/* Lekha demo — Candidate B visual language */
:root {
  --brand:#1A237E;
  --brand-dk:#0D164F;
  --ink:#1a1a2e;
  --ink-2:#4a4a5e;
  --bg:#fafbff;
  --card:#ffffff;
  --line:#e4e6f0;
  --accent:#ffb300;
  --ok:#1b7a3e;
  --warn:#b45309;
  --focus:#ff6b00;
  --radius:14px;
  --shadow:0 6px 24px rgba(26,35,126,.08);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  font:16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
}
a { color:var(--brand); }
:focus-visible { outline:3px solid var(--focus); outline-offset:2px; border-radius:4px; }

/* === Top bar === */
.lk-top {
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:14px 22px;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:20;
}
.lk-logo { font-weight:800; letter-spacing:-0.02em; color:var(--brand); font-size:22px; }
.lk-logo small { color:var(--ink-2); font-weight:500; font-size:12px; margin-left:6px; text-transform:uppercase; letter-spacing:.08em; }
.lk-nav { display:flex; gap:18px; align-items:center; }
.lk-nav a { color:var(--ink-2); text-decoration:none; padding:8px 10px; border-radius:8px; font-weight:500; }
.lk-nav a:hover { background:var(--bg); color:var(--brand); }
.lk-nav .lk-btn-pro { background:var(--brand); color:#fff; font-weight:600; padding:10px 16px; border-radius:10px; }
.lk-nav .lk-btn-pro:hover { background:var(--brand-dk); color:#fff; }

/* === Hero === */
.lk-hero {
  background:linear-gradient(150deg, #1A237E 0%, #283593 55%, #3949ab 100%);
  color:#fff;
  padding:64px 22px 80px;
  position:relative;
  overflow:hidden;
}
.lk-hero::before {
  content:""; position:absolute; right:-120px; top:-120px;
  width:420px; height:420px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,179,0,.25), transparent);
}
.lk-hero-inner { max-width:1100px; margin:0 auto; position:relative; }
.lk-pretitle { color:#c5cae9; text-transform:uppercase; letter-spacing:.12em; font-size:13px; font-weight:600; margin:0 0 10px; }
.lk-hero h1 { font-size:clamp(32px, 5vw, 48px); margin:0 0 14px; line-height:1.1; letter-spacing:-.02em; max-width:18ch; }
.lk-hero p.lede { font-size:18px; color:#e8eaf6; max-width:54ch; margin:0 0 26px; }
.lk-stats { display:flex; gap:28px; flex-wrap:wrap; margin-top:24px; color:#c5cae9; font-size:14px; }
.lk-stats b { color:#fff; font-size:22px; display:block; }

/* Search box */
.lk-search {
  background:#fff; color:var(--ink);
  border-radius:16px; padding:6px;
  display:flex; gap:0;
  box-shadow:0 14px 44px rgba(0,0,0,.18);
  max-width:680px;
}
.lk-search input {
  flex:1; border:0; padding:16px 18px;
  font-size:17px; color:var(--ink);
  background:transparent;
  min-width:0;
}
.lk-search input:focus { outline:none; }
.lk-search button {
  background:var(--brand); color:#fff; border:0;
  padding:0 22px; border-radius:12px;
  font-weight:600; font-size:16px; cursor:pointer;
}
.lk-search button:hover { background:var(--brand-dk); }
.lk-search-wrap { position:relative; max-width:680px; margin-top:8px; }
.lk-suggest {
  position:absolute; left:0; right:0; top:calc(100% + 8px);
  background:#fff; color:var(--ink); border-radius:14px;
  box-shadow:0 14px 44px rgba(0,0,0,.18);
  max-height:360px; overflow-y:auto; z-index:30;
  display:none;
}
.lk-suggest.open { display:block; }
.lk-suggest-item { padding:12px 18px; cursor:pointer; border-bottom:1px solid var(--line); }
.lk-suggest-item:last-child { border-bottom:0; }
.lk-suggest-item:hover, .lk-suggest-item[aria-selected="true"] { background:#eef0fb; }
.lk-suggest-item strong { color:var(--brand); display:block; }
.lk-suggest-item small { color:var(--ink-2); }

/* === How it works === */
.lk-how {
  background:#fff; padding:40px 22px;
  border-bottom:1px solid var(--line);
}
.lk-how-inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.lk-step { display:flex; gap:12px; align-items:flex-start; }
.lk-step-n {
  width:36px; height:36px; border-radius:50%;
  background:var(--brand); color:#fff; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.lk-step h3 { margin:0 0 4px; font-size:16px; }
.lk-step p { margin:0; color:var(--ink-2); font-size:14px; }
@media(max-width:780px) {
  .lk-how-inner { grid-template-columns:repeat(2,1fr); }
}

/* === Section titles === */
.lk-section { padding:56px 22px; }
.lk-section-inner { max-width:1100px; margin:0 auto; }
.lk-section h2 { font-size:28px; letter-spacing:-.01em; margin:0 0 6px; color:var(--ink); }
.lk-section .lk-lede { color:var(--ink-2); margin:0 0 28px; }

/* === Category tiles === */
.lk-cats { display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.lk-cat {
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 18px; cursor:pointer;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  position:relative;
}
.lk-cat:hover, .lk-cat:focus-visible { border-color:var(--brand); box-shadow:var(--shadow); transform:translateY(-2px); }
.lk-cat-icon { font-size:32px; margin-bottom:8px; }
.lk-cat-name { font-weight:700; font-size:17px; margin-bottom:4px; color:var(--ink); }
.lk-cat-desc { color:var(--ink-2); font-size:13px; line-height:1.45; margin-bottom:10px; }
.lk-cat-count { display:inline-block; padding:3px 10px; border-radius:999px; background:#eef0fb; color:var(--brand); font-size:12px; font-weight:600; }
.lk-cat-empty { opacity:.65; }
@media(max-width:900px) { .lk-cats { grid-template-columns:repeat(2,1fr); } }

/* === Country chips === */
.lk-countries { display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.lk-country, .lk-chip {
  background:#fff; border:1px solid var(--line);
  padding:10px 16px; border-radius:999px; cursor:pointer;
  font-weight:500; color:var(--ink);
  display:inline-flex; align-items:center; gap:8px;
  transition:all .15s ease;
}
.lk-country:hover, .lk-chip:hover,
.lk-country:focus-visible, .lk-chip:focus-visible { border-color:var(--brand); color:var(--brand); }
.lk-country.active, .lk-chip.active { background:var(--brand); color:#fff; border-color:var(--brand); }
.lk-chip-count { background:#eef0fb; color:var(--brand); padding:2px 8px; border-radius:999px; font-size:12px; font-weight:600; }
.lk-chip.active .lk-chip-count { background:rgba(255,255,255,.2); color:#fff; }
.lk-pill-coming {
  background:var(--warn); color:#fff;
  padding:2px 8px; border-radius:999px;
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
}
.lk-chip-coming-soon { opacity:.7; cursor:not-allowed; }

/* === Featured templates === */
.lk-docs { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.lk-doc {
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:20px; text-decoration:none;
  color:var(--ink);
  display:flex; flex-direction:column; gap:10px;
  transition:all .15s ease; position:relative;
}
.lk-doc:hover, .lk-doc:focus-visible { border-color:var(--brand); box-shadow:var(--shadow); transform:translateY(-2px); }
.lk-doc-name { font-weight:700; font-size:16px; }
.lk-doc-desc { color:var(--ink-2); font-size:14px; line-height:1.45; flex:1; }
.lk-doc-meta { display:flex; gap:8px; font-size:12px; color:var(--ink-2); }
.lk-tag { background:#eef0fb; color:var(--brand); padding:2px 8px; border-radius:999px; font-weight:600; }
.lk-tag.new { background:#fff4e5; color:var(--warn); }
@media(max-width:900px) { .lk-docs { grid-template-columns:1fr; } }

/* === Compliance banner === */
.lk-banner {
  background:linear-gradient(135deg, #fff4e5 0%, #fff8ee 100%);
  border:1px solid #ffd598;
  border-radius:var(--radius); padding:24px 28px;
  display:flex; gap:18px; align-items:center; flex-wrap:wrap;
}
.lk-banner-icon { font-size:36px; }
.lk-banner h3 { margin:0 0 4px; font-size:18px; }
.lk-banner p { margin:0; color:var(--ink-2); }
.lk-banner .lk-btn { margin-left:auto; }

/* === Pricing strip === */
.lk-price {
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
  max-width:780px; margin:0 auto;
}
.lk-price-card {
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:28px;
  text-align:center;
}
.lk-price-card.pro { background:var(--brand); color:#fff; border-color:var(--brand); position:relative; }
.lk-price-card.pro .lk-price-ribbon {
  position:absolute; top:14px; right:14px;
  background:var(--accent); color:var(--brand); font-weight:700;
  padding:4px 10px; border-radius:6px; font-size:11px; letter-spacing:.05em;
}
.lk-price-card h3 { margin:0 0 6px; font-size:20px; }
.lk-price-card .lk-price-amount { font-size:36px; font-weight:800; letter-spacing:-.02em; margin:10px 0; }
.lk-price-card.pro .lk-price-amount { color:#fff; }
.lk-price-card ul { list-style:none; padding:0; margin:14px 0 18px; text-align:left; }
.lk-price-card li { padding:6px 0; }
.lk-price-card.pro li { color:#e8eaf6; }
.lk-price-card li::before { content:"✓ "; color:var(--ok); font-weight:700; }
.lk-price-card.pro li::before { color:var(--accent); }
@media(max-width:700px) { .lk-price { grid-template-columns:1fr; } }

/* === Buttons === */
.lk-btn {
  display:inline-block; padding:12px 22px;
  background:var(--brand); color:#fff;
  border:1px solid var(--brand);
  border-radius:10px; text-decoration:none;
  font-weight:600; cursor:pointer;
  transition:all .15s ease;
}
.lk-btn:hover { background:var(--brand-dk); border-color:var(--brand-dk); }
.lk-btn.ghost { background:transparent; color:var(--brand); }
.lk-btn.ghost:hover { background:#eef0fb; }
.lk-btn.large { padding:14px 26px; font-size:16px; }
.lk-btn.accent { background:var(--accent); color:var(--brand); border-color:var(--accent); }
.lk-btn.accent:hover { background:#f9a825; border-color:#f9a825; }

/* === Footer === */
.lk-foot {
  background:var(--brand-dk); color:#c5cae9;
  padding:40px 22px 24px;
}
.lk-foot-inner { max-width:1100px; margin:0 auto; }
.lk-foot-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:30px; margin-bottom:24px; }
.lk-foot h4 { color:#fff; margin:0 0 10px; font-size:14px; text-transform:uppercase; letter-spacing:.08em; }
.lk-foot a { color:#c5cae9; text-decoration:none; display:block; padding:4px 0; font-size:14px; }
.lk-foot a:hover { color:#fff; }
.lk-foot-bar { border-top:1px solid rgba(255,255,255,.1); padding-top:18px; font-size:13px; display:flex; justify-content:space-between; }
@media(max-width:700px) { .lk-foot-grid { grid-template-columns:1fr 1fr; } }

/* === Wizard === */
.lk-wiz {
  max-width:720px; margin:40px auto; padding:0 22px;
}
.lk-wiz-head {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:24px; gap:20px; flex-wrap:wrap;
}
.lk-wiz-back {
  background:transparent; border:1px solid var(--line); color:var(--ink-2);
  padding:8px 14px; border-radius:10px; font-size:14px; cursor:pointer;
  text-decoration:none;
}
.lk-wiz-back:hover { border-color:var(--brand); color:var(--brand); }
.lk-wiz h1 { margin:0 0 6px; font-size:28px; letter-spacing:-.01em; }
.lk-wiz-sub { color:var(--ink-2); margin:0 0 28px; }
.lk-progress-wrap {
  background:#eef0fb; border-radius:999px; height:8px;
  overflow:hidden; margin:8px 0 6px;
}
.lk-progress-bar {
  background:var(--brand); height:100%;
  transition:width .3s ease;
  border-radius:999px;
}
.lk-progress-label { font-size:13px; color:var(--ink-2); font-weight:500; }
.lk-step-card {
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:28px;
  box-shadow:var(--shadow);
}
.lk-step-card h2 { margin:0 0 6px; font-size:22px; }
.lk-step-desc { color:var(--ink-2); margin:0 0 20px; font-size:15px; }
.lk-field { margin-bottom:18px; }
.lk-field label {
  display:block; font-weight:600; font-size:14px;
  margin-bottom:6px; color:var(--ink);
}
.lk-field .lk-req { color:var(--warn); }
.lk-field .lk-help { display:block; color:var(--ink-2); font-size:13px; margin-bottom:6px; font-weight:400; }
.lk-field input, .lk-field textarea, .lk-field select {
  width:100%; padding:12px 14px; font-size:15px;
  border:1px solid var(--line); border-radius:10px;
  font-family:inherit;
  background:#fff;
  color:var(--ink);
}
.lk-field input:focus, .lk-field textarea:focus, .lk-field select:focus {
  border-color:var(--brand); outline:3px solid rgba(26,35,126,.2); outline-offset:0;
}
.lk-field textarea { min-height:80px; resize:vertical; }
.lk-field[aria-invalid="true"] input, .lk-field[aria-invalid="true"] textarea, .lk-field[aria-invalid="true"] select {
  border-color:#c62828;
}
.lk-err {
  color:#c62828; font-size:13px; margin-top:6px;
  display:flex; align-items:center; gap:6px;
}
.lk-info-banner {
  background:#fff4e5; border:1px solid #ffd598;
  border-radius:10px; padding:12px 16px; margin-top:14px;
  color:#814d00; font-size:14px;
}
.lk-wiz-nav {
  display:flex; justify-content:space-between; gap:12px;
  margin-top:22px;
}
.lk-wiz-nav .lk-btn.ghost { border-color:var(--line); }

/* === Preview === */
.lk-preview {
  background:#fff; padding:28px;
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin-top:24px;
}
.lk-preview h3 { margin-top:0; color:var(--brand); font-size:20px; }
.lk-preview-doc {
  background:#fefefe; border:1px solid #ddd; padding:24px;
  border-radius:6px; max-height:520px; overflow-y:auto;
  font-family:Georgia, "Times New Roman", serif;
  font-size:14px; line-height:1.55; color:#222;
}
.lk-preview-doc h4 { font-family:-apple-system, sans-serif; color:var(--brand); margin-top:1.5em; font-size:16px; }
.lk-preview-doc h1 { font-family:-apple-system, sans-serif; text-align:center; color:var(--brand); font-size:22px; margin-bottom:24px; }
.lk-preview-actions {
  display:flex; gap:10px; margin-top:16px; flex-wrap:wrap;
}

/* === Toast === */
.lk-toast {
  position:fixed; bottom:24px; left:50%;
  transform:translateX(-50%);
  background:var(--ink); color:#fff;
  padding:14px 22px; border-radius:10px;
  box-shadow:0 14px 44px rgba(0,0,0,.25);
  z-index:100; font-weight:500;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
.lk-toast.show { opacity:1; }

/* === a11y helpers === */
.sr-only {
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
}