/* Home / landing page design system (wireframe: HF-style tokens).
   Loaded only by src/templates/home.php — the app pages keep app.css. */
:root{
  --bg:#fafafa; --surface:#ffffff; --surface-warm:#fff4cc;
  --fg:#0d1117; --fg-2:#374151; --muted:#6b7280;
  --border:#e5e7eb; --border-soft:#f3f4f6;
  --accent:#ffd21e; --accent-on:#0d1117; --accent-hover:#f59e0b;
  --success:#16a34a; --warn:#f59e0b; --danger:#dc2626;
  --font-display:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --text-xs:12px; --text-sm:13px; --text-base:15px; --text-lg:18px;
  --text-xl:24px; --text-2xl:32px; --text-3xl:40px; --text-4xl:48px;
  --leading-body:1.55; --tracking-display:-0.01em;
  --section-y-desktop:80px; --section-y-tablet:48px; --section-y-phone:32px;
  --radius-sm:4px; --radius-md:6px; --radius-lg:8px; --radius-pill:9999px;
  --elev-raised:0 2px 8px rgba(13,17,23,.08);
  --focus-ring:0 0 0 3px rgba(13,17,23,0.1);
  --motion-fast:120ms; --ease-standard:cubic-bezier(0.2,0,0,1);
  --container-max:1280px; --container-gutter-desktop:24px; --container-gutter-phone:12px;
  /* feature-card accents */
  --nlp:#2563eb; --nlp-soft:#dbeafe;
  --vision:#16a34a; --vision-soft:#dcfce7;
  --audio:#9333ea; --audio-soft:#f3e8ff;
  --multi:#db2777; --multi-soft:#fce7f3;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font-body); font-size:var(--text-base);
  line-height:var(--leading-body); -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
h1,h2,h3{font-family:var(--font-display); font-weight:600; margin:0; letter-spacing:var(--tracking-display); line-height:1.2}
p{margin:0}
button{font:inherit}
:focus-visible{outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-sm)}

.container{max-width:var(--container-max); margin:0 auto; padding:0 var(--container-gutter-desktop)}
section{padding:var(--section-y-desktop) 0}
.eyebrow{font-family:var(--font-mono); font-size:var(--text-xs); font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted)}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn{font-family:var(--font-display); font-size:var(--text-sm); font-weight:500;
  padding:9px 16px; border-radius:var(--radius-md); border:1px solid transparent;
  cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  transition:background var(--motion-fast) var(--ease-standard), transform var(--motion-fast);
  white-space:nowrap}
.btn-primary{background:var(--fg); color:#fff}
.btn-primary:hover{background:var(--fg-2)}
.btn-yellow{background:var(--accent); color:var(--accent-on)}
.btn-yellow:hover{background:var(--accent-hover)}
.btn-outline{background:var(--surface); color:var(--fg); border-color:var(--border)}
.btn-outline:hover{background:var(--border-soft)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.7; cursor:wait; transform:none}

/* ── Header ───────────────────────────────────────────────────────────── */
header.nav{position:sticky; top:0; z-index:50; background:rgba(250,250,250,.85);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--border)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:60px}
.brand{font-family:var(--font-display); font-weight:600; font-size:var(--text-lg); display:flex; align-items:center; gap:9px}
.brand .dot{width:1.3em; height:1.3em; background:url(logo-mark.svg) center/contain no-repeat; display:inline-block; flex:none}
.brand .tld{color:var(--muted); font-weight:400}
.nav-links{display:flex; gap:26px; font-family:var(--font-mono); font-size:var(--text-sm)}
.nav-links a{color:var(--fg-2)}
.nav-links a:hover{color:var(--fg)}
.nav-right{display:flex; align-items:center; gap:14px}
.nav-login{font-family:var(--font-mono); font-size:var(--text-sm); color:var(--fg-2); cursor:pointer}
.nav-login:hover{color:var(--fg)}

/* Mobile hamburger — hidden on desktop; the collapse wrapper is transparent
   (display:contents) so nav-links/nav-right lay out exactly as before. */
.nav-toggle{display:none; width:40px; height:40px; padding:0; place-items:center; cursor:pointer;
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface)}
.nav-bars{position:relative; display:block; width:18px; height:12px}
.nav-bars span{position:absolute; left:0; right:0; height:2px; border-radius:2px; background:var(--fg-2); transition:.2s ease}
.nav-bars span:nth-child(1){top:0}
.nav-bars span:nth-child(2){top:5px}
.nav-bars span:nth-child(3){top:10px}
.nav-toggle[aria-expanded="true"] .nav-bars span:nth-child(1){top:5px; transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-bars span:nth-child(3){top:5px; transform:rotate(-45deg)}
.nav-collapse{display:contents}

/* signed-in avatar menu (same ids/classes the shared JS expects) */
.kc-usermenu{position:relative}
.kc-avatar{width:34px; height:34px; border-radius:50%; border:1px solid var(--border);
  background:var(--surface); cursor:pointer; overflow:hidden; display:grid; place-items:center;
  font-weight:600; font-size:var(--text-sm); color:var(--fg-2); padding:0; text-transform:uppercase}
.kc-avatar img{width:100%; height:100%; object-fit:cover; display:block}
.kc-userdrop{position:absolute; right:0; top:42px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-md); box-shadow:var(--elev-raised); min-width:220px; padding:8px; z-index:60}
.kc-userdrop .uemail{font-family:var(--font-mono); font-size:var(--text-xs); color:var(--muted);
  padding:8px 10px; border-bottom:1px solid var(--border-soft); margin-bottom:6px; word-break:break-all}
.kc-userdrop button, .kc-userdrop a{display:block; width:100%; text-align:left; background:none; border:0;
  padding:8px 10px; border-radius:var(--radius-sm); font-size:var(--text-sm); color:var(--fg-2); cursor:pointer}
.kc-userdrop button:hover, .kc-userdrop a:hover{background:var(--border-soft); color:var(--fg)}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero{padding-top:64px; padding-bottom:56px; text-align:center}
.badge-free{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono);
  font-size:var(--text-xs); font-weight:500; letter-spacing:0.04em; padding:5px 12px;
  border-radius:var(--radius-pill); background:var(--surface-warm); color:var(--fg);
  border:1px solid #f2c40f}
.badge-free .b{background:var(--accent); color:var(--accent-on); padding:1px 7px; border-radius:var(--radius-sm); font-weight:600}
.hero h1{font-size:clamp(34px,5.4vw,var(--text-4xl)); max-width:16ch; margin:24px auto 0; line-height:1.08}
.hero h1 .hl{background:linear-gradient(180deg, transparent 62%, var(--accent) 62%); padding:0 2px}
.hero .sub{font-size:var(--text-lg); color:var(--fg-2); max-width:60ch; margin:20px auto 0; text-wrap:pretty}

/* ── Audit CTA (the domain input) ─────────────────────────────────────── */
.audit{max-width:660px; margin:34px auto 0}
.audit-form{display:flex; gap:10px; align-items:stretch}
.input-wrap{flex:1; display:flex; align-items:center; gap:10px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-md); padding:0 14px;
  transition:border var(--motion-fast), box-shadow var(--motion-fast)}
.input-wrap:focus-within{border-color:var(--fg); box-shadow:var(--focus-ring)}
.input-wrap.err{border-color:var(--danger); box-shadow:0 0 0 3px rgba(220,38,38,.12)}
.input-wrap .globe{color:var(--muted); flex:none; display:flex}
.input-wrap .in-wrap{flex:1; position:relative; display:flex; min-width:0}
.input-wrap input{flex:1; border:0; outline:none; background:transparent; height:46px; min-width:0;
  font-family:var(--font-mono); font-size:var(--text-base); color:var(--fg)}
.input-wrap input::placeholder{color:var(--muted)}
/* the wrap's :focus-within ring is the focus indicator — no inner ring */
.input-wrap input:focus-visible{box-shadow:none}
/* ghost domain completion rendered behind the input text */
.input-wrap .ghost{position:absolute; inset:0; display:flex; align-items:center;
  pointer-events:none; overflow:hidden; white-space:pre;
  font-family:var(--font-mono); font-size:var(--text-base)}
.input-wrap .ghost .typed{visibility:hidden}
.input-wrap .ghost .rest{color:var(--muted)}
.audit .btn{height:48px; padding:0 22px; font-size:var(--text-base)}
.trust{display:flex; flex-wrap:wrap; gap:18px 26px; justify-content:center; margin-top:22px;
  font-family:var(--font-mono); font-size:var(--text-xs); color:var(--fg-2)}
.trust span{display:inline-flex; align-items:center; gap:7px}
.trust .ck{color:var(--success)}

/* spinner */
.spin{width:15px; height:15px; border:2px solid rgba(255,255,255,.4); border-top-color:currentColor;
  border-radius:50%; animation:spin .7s linear infinite; display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Generic section heads ────────────────────────────────────────────── */
.sec-head{max-width:640px}
.sec-head h2{font-size:var(--text-2xl); margin-top:10px}
.sec-head p{color:var(--fg-2); margin-top:12px; font-size:var(--text-lg)}
.divider{border-top:1px solid var(--border)}
.microcopy{margin-top:14px; font-size:var(--text-sm); color:var(--muted)}
.compare-links{margin-top:24px; text-align:center; font-size:var(--text-sm); color:var(--muted);
  display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:center; align-items:center}
.compare-links a{color:var(--fg-2); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--border)}
.compare-links a:hover{color:var(--fg); text-decoration-color:var(--fg-2)}

/* ── Core areas cards ─────────────────────────────────────────────────── */
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:40px}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:20px}
.card:hover{border-color:#d1d5db}
.chip{display:inline-flex; align-items:center; font-family:var(--font-mono); font-size:var(--text-xs);
  font-weight:500; letter-spacing:.02em; padding:3px 9px; border-radius:var(--radius-sm)}
.chip.nlp{background:var(--nlp-soft); color:var(--nlp)}
.chip.vision{background:var(--vision-soft); color:var(--vision)}
.chip.audio{background:var(--audio-soft); color:var(--audio)}
.chip.multi{background:var(--multi-soft); color:var(--multi)}
.card h3{font-size:var(--text-lg); margin:14px 0 8px}
.card p{color:var(--fg-2); font-size:var(--text-sm); line-height:1.5}
.card ul{margin:12px 0 0; padding:0; list-style:none; font-family:var(--font-mono); font-size:var(--text-xs); color:var(--muted)}
.card li{padding:4px 0; border-top:1px solid var(--border-soft)}

/* ── What we check grid ───────────────────────────────────────────────── */
.checks{display:flex; flex-wrap:wrap; gap:10px; margin-top:36px}
.check{display:inline-flex; align-items:center; gap:8px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-pill); padding:8px 14px;
  font-family:var(--font-mono); font-size:var(--text-sm)}
.check .ic{width:16px; height:16px; border-radius:50%; display:grid; place-items:center; flex:none; color:#fff; font-size:10px}
.check .ok{background:var(--success)} .check .warn{background:var(--warn)} .check .crit{background:var(--danger)}

/* ── Metric strip (dashboard preview) ─────────────────────────────────── */
.strip{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden}
.strip-head{padding:16px 20px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.strip-head .t{font-family:var(--font-mono); font-weight:600}
.strip-head .m{font-family:var(--font-mono); font-size:var(--text-xs); color:var(--muted)}
.strip-grid{display:grid; grid-template-columns:repeat(5,1fr)}
.strip-cell{padding:22px 20px; border-right:1px solid var(--border-soft)}
.strip-cell:last-child{border-right:0}
.strip-cell .n{font-family:var(--font-display); font-size:var(--text-2xl); font-weight:600; line-height:1}
.strip-cell .n small{font-size:var(--text-base); color:var(--muted)}
.strip-cell .n.good{color:var(--success)}
.strip-cell .l{font-family:var(--font-mono); font-size:11px; color:var(--muted); margin-top:8px; text-transform:uppercase; letter-spacing:.03em}
.strip-cell .sub{font-size:var(--text-sm); color:var(--fg-2); margin-top:4px}

/* ── How it works ─────────────────────────────────────────────────────── */
.steps3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:40px}
.stepcard{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:24px; position:relative}
.stepcard .num{font-family:var(--font-display); font-size:var(--text-sm); color:var(--accent-on);
  background:var(--accent); width:26px; height:26px; border-radius:var(--radius-sm); display:grid; place-items:center; font-weight:600}
.stepcard h3{font-size:var(--text-lg); margin:16px 0 8px}
.stepcard p{color:var(--fg-2); font-size:var(--text-sm)}

/* ── Comparison ───────────────────────────────────────────────────────── */
.compare-wrap{overflow-x:auto; margin-top:36px}
.compare{width:100%; border-collapse:collapse; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; font-size:var(--text-base)}
.compare th,.compare td{padding:14px 20px; text-align:left; border-bottom:1px solid var(--border-soft)}
.compare thead th{background:var(--bg); font-family:var(--font-mono); font-size:var(--text-sm); font-weight:600}
.compare thead th.us{background:var(--surface-warm)}
.compare td.us{font-weight:600; color:var(--fg)}
.compare td.them{color:var(--muted)}
.compare tbody tr:last-child td{border-bottom:0}
.compare .rowlabel{font-family:var(--font-mono); font-size:var(--text-sm); color:var(--fg-2)}

/* ── Landing pages: 3-up cards, narrow container, FAQ accordion ─────────── */
.cards-3{grid-template-columns:repeat(3,1fr)}
.container-narrow{max-width:760px}
.faq{margin-top:32px; display:flex; flex-direction:column; gap:12px}
.faq-item{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:4px 20px}
.faq-item summary{list-style:none; cursor:pointer; padding:16px 0; font-weight:600; font-size:var(--text-lg);
  display:flex; align-items:center; justify-content:space-between; gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+"; color:var(--muted); font-weight:400; font-size:22px; line-height:1; flex:none}
.faq-item[open] summary::after{content:"–"}
.faq-item p{color:var(--fg-2); padding:0 0 18px; line-height:1.6; max-width:64ch}

/* ── Final CTA ────────────────────────────────────────────────────────── */
.final{background:var(--fg); color:#fff; border-radius:var(--radius-lg); padding:56px 40px; text-align:center}
.final h2{color:#fff; font-size:var(--text-3xl); max-width:18ch; margin:0 auto}
.final p{color:#c7ccd3; margin:16px auto 0; max-width:52ch}
.final .audit{margin-top:28px}
.final .input-wrap{background:#161b22; border-color:#30363d}
.final .input-wrap input{color:#fff}
.final .input-wrap .globe{color:#8b949e}
.final .input-wrap .ghost .rest{color:#8b949e}

/* ── Footer ───────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--border); background:var(--surface); padding:36px 0}
.foot-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px}
.foot-inner .brand{font-size:var(--text-base)}
.foot-links{display:flex; gap:22px; font-family:var(--font-mono); font-size:var(--text-sm); color:var(--muted)}
.foot-note{font-family:var(--font-mono); font-size:11px; color:var(--muted)}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media(max-width:920px){
  section{padding:var(--section-y-tablet) 0}

  /* Hamburger nav: toggle shows, links + actions drop into a full-width panel */
  .nav-toggle{display:grid}
  .nav-collapse{display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--surface); border-bottom:1px solid var(--border);
    box-shadow:var(--elev-raised); padding:8px 16px 18px}
  .nav-collapse.open{display:flex}
  .nav-links{display:flex; flex-direction:column; gap:0}
  .nav-links a{padding:13px 4px; border-bottom:1px solid var(--border-soft)}
  .nav-right{flex-direction:column; align-items:stretch; gap:10px; width:100%; padding-top:14px}
  .nav-right .btn{width:100%; justify-content:center}
  .nav-login{padding:13px 4px}
  /* signed-in: swap the avatar chip for an inline account block */
  .nav-right .kc-avatar{display:none}
  .nav-right .kc-usermenu{position:static; width:100%}
  .nav-right .kc-userdrop{position:static; display:block; min-width:0; padding:0; border:0; box-shadow:none}
  .nav-right .kc-userdrop a{display:none} /* "My audits" already a button above */
  .nav-right .kc-userdrop .uemail{border:0; padding:4px 2px 8px}
  .nav-right .kc-userdrop button{padding:12px 6px; border-top:1px solid var(--border-soft); border-radius:0}

  .cards{grid-template-columns:repeat(2,1fr)}
  .strip-grid{grid-template-columns:repeat(2,1fr)}
  .strip-cell{border-bottom:1px solid var(--border-soft)}
  .steps3{grid-template-columns:1fr}
}
@media(max-width:600px){
  .container{padding:0 var(--container-gutter-phone)}
  section{padding:var(--section-y-phone) 0}
  .hero h1{font-size:28px}
  .hero .sub{font-size:var(--text-base)}
  .audit-form{flex-direction:column}
  .audit .btn{width:100%; justify-content:center}
  .cards{grid-template-columns:1fr}
  .strip-grid{grid-template-columns:1fr}
  .final{padding:40px 20px}
  .foot-inner{flex-direction:column; align-items:flex-start}
}