/* ============================================================
   Klip — shared stylesheet for index.html + features.html
   System fonts only. Self-contained, same-origin. Light + dark.
   Glass follows the app's real recipe (Sources/Klip/UI/Glass.swift):
   defined at the RIM (two-stroke concentric), light materials
   darken / dark lighten, specular sheen from the top-left ≈ -60deg.
   ============================================================ */

/* ---- Design tokens: light (default) ---- */
:root{
  color-scheme: light;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Neutral macOS-window surfaces. Indigo is an ACCENT ONLY. */
  --ink:      #1c1c1e;
  --ink-2:    #3a3a3e;
  --muted:    #65656d;
  --faint:    #9a9aa1;
  --accent:   #5b6bf0;              /* brand indigo — primary accent */
  --accent-btn:#4f5ee2;             /* primary button fill: white on it = 5.21:1 */
  --accent-ink:#4a57cf;             /* indigo for link text on light */
  --voice:    #9b3fd0;              /* purple — VOICE ONLY */
  --ok:       #2b9d4b;              /* green — PRIVACY ONLY (AA on light) */
  --ok-fill:  #34c759;

  --bg-base:  #ececee;              /* cool neutral gray, not lavender */
  --bg-wash:  linear-gradient(180deg, #f1f1f3 0%, #e6e6e9 100%);

  --hairline: rgba(0,0,0,.10);
  --card:     rgba(255,255,255,.55);

  /* glass recipe (light material DARKENS) — neutral, restrained */
  --glass-fill: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.5));
  --glass-fill-solid: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.78));
  --glass-filter: saturate(1.35) blur(20px);
  --glass-sheen: linear-gradient(135deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,.08) 28%, rgba(255,255,255,0) 55%);
  --rim:
    inset 1px 1px 0 rgba(255,255,255,.7),          /* specular, bright top-left */
    inset 0 0 0 .5px rgba(255,255,255,.28),         /* inner ring */
    0 0 0 .5px rgba(0,0,0,.10);                     /* outer contour */
  --glass-shadow:
    0 1px 2px rgba(0,0,0,.04),
    0 8px 20px -12px rgba(0,0,0,.15),
    0 20px 40px -26px rgba(0,0,0,.18);

  --kbd-bg: rgba(255,255,255,.72);
  --kbd-line: rgba(0,0,0,.14);
  --kbd-ink: #43434a;
  /* Flow diagram — inline SVG, so it follows the theme. Light: dark ink on white glass. */
  --flow-ink:#1c1c1e; --flow-sub:#3a3a3e; --flow-accent:#4a57cf;
  --flow-edge:#78788c; --flow-sheen:#ffffff; --flow-glass:#ffffff;
}

/* ---- Dark: auto (no manual choice) ---- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    color-scheme: dark;
    --ink:#f2f2f4; --ink-2:#d2d2d8; --muted:#adadb5; --faint:#6a6a72;
    --accent:#5b6bf0; --accent-ink:#9ba5f8;
    --voice:#cf95ee; --ok:#34c759; --ok-fill:#34c759;
    --bg-base:#1c1c1e;
    /* Flow diagram inverts: light ink on a dark translucent tile, like every other surface. */
    --flow-ink:#f2f2f4; --flow-sub:#c4c4cc; --flow-accent:#8b96f6;
    --flow-edge:#8f8fa4; --flow-sheen:#5a5a66; --flow-glass:#3a3a42;

    --bg-wash: linear-gradient(180deg, #202022 0%, #171719 100%);
    --hairline: rgba(255,255,255,.12);
    --card: rgba(255,255,255,.06);
    --glass-fill: linear-gradient(180deg, rgba(58,58,62,.64), rgba(44,44,48,.54));
    --glass-fill-solid: linear-gradient(180deg, rgba(50,50,54,.92), rgba(42,42,46,.86));
    --glass-filter: saturate(1.5) blur(20px);
    --glass-sheen: linear-gradient(135deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 30%, rgba(255,255,255,0) 55%);
  /* .12 lifted the card's top-left corner to ~72 sRGB, dragging the headings that sit there
     under AA. A dark material reflects less anyway — .07 keeps the glass read and the text legible. */
    --rim:
      inset 1px 1px 0 rgba(255,255,255,.14),
      inset 0 0 0 .5px rgba(255,255,255,.05),
      0 0 0 .5px rgba(0,0,0,.7);
    --glass-shadow:
      0 1px 2px rgba(0,0,0,.35),
      0 10px 26px -14px rgba(0,0,0,.5),
      0 24px 50px -32px rgba(0,0,0,.55);
    --kbd-bg: rgba(255,255,255,.1);
    --kbd-line: rgba(255,255,255,.16);
    --kbd-ink: #dcdce2;
  }
}

/* ---- Dark: manual (wins over anything) ---- */
:root[data-theme="dark"]{
  color-scheme: dark;
  --ink:#f2f2f4; --ink-2:#d2d2d8; --muted:#adadb5; --faint:#6a6a72;
  --accent:#5b6bf0; --accent-ink:#9ba5f8;
  --voice:#cf95ee; --ok:#34c759; --ok-fill:#34c759;
  --bg-base:#1c1c1e;
  /* Flow diagram inverts: light ink on a dark translucent tile, like every other surface. */
  --flow-ink:#f2f2f4; --flow-sub:#c4c4cc; --flow-accent:#8b96f6;
  --flow-edge:#8f8fa4; --flow-sheen:#5a5a66; --flow-glass:#3a3a42;
  --bg-wash: linear-gradient(180deg, #202022 0%, #171719 100%);
  --hairline: rgba(255,255,255,.12);
  --card: rgba(255,255,255,.06);
  --glass-fill: linear-gradient(180deg, rgba(58,58,62,.64), rgba(44,44,48,.54));
  --glass-fill-solid: linear-gradient(180deg, rgba(50,50,54,.92), rgba(42,42,46,.86));
  --glass-filter: saturate(1.5) blur(20px);
  --glass-sheen: linear-gradient(135deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 30%, rgba(255,255,255,0) 55%);
  /* .12 lifted the card's top-left corner to ~72 sRGB, dragging the headings that sit there
     under AA. A dark material reflects less anyway — .07 keeps the glass read and the text legible. */
  --rim:
    inset 1px 1px 0 rgba(255,255,255,.14),
    inset 0 0 0 .5px rgba(255,255,255,.05),
    0 0 0 .5px rgba(0,0,0,.7);
  --glass-shadow:
    0 1px 2px rgba(0,0,0,.35),
    0 10px 26px -14px rgba(0,0,0,.5),
    0 24px 50px -32px rgba(0,0,0,.55);
  --kbd-bg: rgba(255,255,255,.1);
  --kbd-line: rgba(255,255,255,.16);
  --kbd-ink: #dcdce2;
}

/* Accessibility floors: match the app's opaque fallback (neutral) */
@media (prefers-reduced-transparency: reduce){
  :root{ --glass-fill:#e4e5e7; --glass-fill-solid:#e4e5e7; --glass-filter:none; }
  :root[data-theme="dark"]{ --glass-fill:#2a2a2c; --glass-fill-solid:#2a2a2c; --glass-filter:none; }
}
@media (prefers-reduced-transparency: reduce) and (prefers-color-scheme: dark){
  :root:not([data-theme]){ --glass-fill:#2a2a2c; --glass-fill-solid:#2a2a2c; --glass-filter:none; }
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

/* Type: body sits near 0 tracking with comfortable leading.
   Tracking is applied per size below — never one value for all sizes. */
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg-base);
  font-size:1rem;
  line-height:1.6;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background:var(--bg-wash); background-color:var(--bg-base);
  pointer-events:none;
}

/* Headings set their own line breaks; body copy stays on the normal algorithm. */
h1,h2,h3{ text-wrap:balance }

a{ color:var(--accent-ink); text-decoration:none }
a:hover{ text-decoration:underline; text-underline-offset:3px }
:focus-visible{ outline:2.5px solid var(--accent-ink); outline-offset:3px; border-radius:8px }
img,svg{ max-width:100% }

.wrap{ width:100%; max-width:1080px; margin-inline:auto; padding-inline:24px }

/* Reusable glass surface — the rim carries the look, not the blur */
.glass{
  position:relative;
  background:var(--glass-fill);
  -webkit-backdrop-filter:var(--glass-filter);
  backdrop-filter:var(--glass-filter);
  box-shadow:var(--rim), var(--glass-shadow);
  border-radius:20px;
  isolation:isolate;
}
.glass::before{  /* specular sheen: directional, edge-weighted — not a flat veil */
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:var(--glass-sheen);
  pointer-events:none; z-index:0;
}
.glass > *{ position:relative; z-index:1 }
/* Content-layer surfaces: same rim + sheen, but no live blur.
   Glass is the navigation layer; cards on the page background don't
   need (or want) a stack of backdrop-filters. Keeps scroll smooth. */
.glass--flat{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--glass-fill-solid) }

kbd{
  font-family:var(--sans); font-size:.82em; font-weight:600; line-height:1;
  display:inline-flex; align-items:center; gap:1px;
  padding:3px 7px; border-radius:7px; white-space:nowrap;
  color:var(--kbd-ink);
  background:var(--kbd-bg);
  box-shadow: inset 0 0 0 .5px var(--kbd-line), inset 0 1px 0 rgba(255,255,255,.5), 0 1px 1px rgba(16,20,50,.06);
}
:root[data-theme="dark"] kbd{ box-shadow: inset 0 0 0 .5px var(--kbd-line), inset 0 1px 0 rgba(255,255,255,.08) }
code{
  font-family:var(--mono); font-size:.86em;
  background:var(--card); padding:2px 6px; border-radius:6px;
  box-shadow:inset 0 0 0 .5px var(--hairline); color:var(--accent-ink);
  overflow-wrap:anywhere;
}

/* ---------- Nav ---------- */
.nav-shell{ position:sticky; top:0; z-index:50; padding:14px 0 0 }
.nav{
  display:flex; align-items:center; gap:18px;
  padding:9px 10px 9px 16px; border-radius:16px;
}
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--display);
  font-weight:700; font-size:1.12rem; line-height:1.2; letter-spacing:-.02em; color:var(--ink) }
.brand:hover{ text-decoration:none }
.brand .mark{ width:28px; height:28px; flex:0 0 auto; border-radius:8px; display:block }
.nav .links{ display:flex; align-items:center; gap:4px; margin-left:6px }
.nav .links a{ color:var(--muted); font-weight:500; font-size:.92rem; padding:7px 11px; border-radius:9px }
.nav .links a:hover{ color:var(--ink); background:var(--card); text-decoration:none }
.nav .spacer{ flex:1 }
.nav .ghost{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--ink); font-weight:600; font-size:.9rem; padding:8px 13px; border-radius:11px;
}
.nav .ghost:hover{ background:var(--card); text-decoration:none }
.nav .ghost svg{ width:17px; height:17px }
.tt{
  width:38px; height:38px; flex:0 0 auto; display:inline-grid; place-items:center;
  border-radius:11px; border:none; cursor:pointer; color:var(--ink);
  background:var(--card); box-shadow:inset 0 0 0 .5px var(--hairline);
  transition:transform .15s ease, background .2s ease;
}
.tt:hover{ transform:translateY(-1px) }
.tt:active{ transform:scale(.94) }
.tt svg{ width:19px; height:19px }
.tt .moon{ display:none }
:root[data-theme="dark"] .tt .sun{ display:none }
:root[data-theme="dark"] .tt .moon{ display:block }
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .tt .sun{ display:none }
  :root:not([data-theme]) .tt .moon{ display:block }
}
@media (max-width:860px){ .nav .links{ display:none } }
@media (max-width:520px){ .nav .ghost .lbl{ display:none } }

/* ---------- Hero ---------- */
.hero{ padding:56px 0 20px; text-align:center }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.8rem; font-weight:600; letter-spacing:.005em; color:var(--muted);
  padding:6px 14px; border-radius:999px; margin:0 0 24px;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--ok) }
/* Display type: tight leading, negative tracking — hierarchy is
   weight + size + leading as a set, not size alone. */
.hero h1{
  font-family:var(--display);
  font-size:clamp(2.05rem, 5vw, 3.3rem);
  line-height:1.03; letter-spacing:-.028em; margin:0 auto; max-width:16ch;
  font-weight:700; color:var(--ink);
}
.hero h1 .grad{ color:var(--accent) }
.hero .sub{
  color:var(--muted); font-size:clamp(1.05rem,1.7vw,1.22rem); line-height:1.55;
  letter-spacing:0; font-weight:400;
  max-width:50ch; margin:20px auto 0;
}
.cta-row{ display:flex; flex-wrap:wrap; gap:13px; justify-content:center; margin-top:32px }
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-size:1rem; font-weight:600; letter-spacing:-.01em; line-height:1.2;
  padding:14px 26px; border-radius:14px; cursor:pointer; border:none;
  transition:transform .16s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease, filter .2s ease;
}
.btn svg{ width:19px; height:19px }
.btn-primary{
  color:#fff;
  background:var(--accent-btn);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(0,0,0,.16);
}
/* Hover lifts and deepens the shadow instead of shifting the fill: any lighter
   indigo drops white below 4.5:1, any darker one drops the button below 3:1
   against the dark page. */
.btn-primary:hover{ transform:translateY(-1px); text-decoration:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 6px 14px -4px rgba(43,55,170,.45) }
.btn-primary:focus-visible{ outline-color:var(--ink) }
.btn-primary:active{ transform:translateY(0) scale(.985) }
.btn-secondary{
  color:var(--ink); background:var(--glass-fill);
  -webkit-backdrop-filter:var(--glass-filter); backdrop-filter:var(--glass-filter);
  box-shadow: inset 0 0 0 .5px var(--hairline), inset 0 1px 0 rgba(255,255,255,.5), 0 2px 6px -3px rgba(0,0,0,.2);
}
.btn-secondary:hover{ transform:translateY(-2px); text-decoration:none }
.btn-secondary:active{ transform:translateY(0) scale(.985) }

/* ---------- Hero mockup (glass Klip window) ---------- */
.stage{ position:relative; margin:52px auto 0; max-width:560px; padding-inline:8px; perspective:1600px }
.mockup{ border-radius:22px; padding:0; overflow:hidden; text-align:left }
.mk-bar{
  display:flex; align-items:center; gap:8px; padding:12px 15px 11px;
  border-bottom:.5px solid var(--hairline);
}
.mk-dots{ display:flex; gap:7px }
.mk-dots i{ width:11px; height:11px; border-radius:50%; display:block }
.mk-dots i:nth-child(1){ background:#ff5f57 } .mk-dots i:nth-child(2){ background:#febc2e } .mk-dots i:nth-child(3){ background:#28c840 }
.mk-search{
  flex:1; display:flex; align-items:center; gap:8px; margin-left:6px;
  background:var(--card); border-radius:9px; padding:6px 11px;
  box-shadow:inset 0 0 0 .5px var(--hairline); color:var(--faint); font-size:.84rem;
}
.mk-search svg{ width:14px; height:14px; flex:0 0 auto; color:var(--faint) }
.mk-caret{ width:1.5px; height:13px; margin-left:auto; background:var(--accent); border-radius:1px; animation:blink 1.1s steps(1) infinite }
@keyframes blink{ 50%{ opacity:0 } }
@media (prefers-reduced-motion: reduce){ .mk-caret{ animation:none } }
.mk-chips{ display:flex; gap:7px; padding:11px 14px 3px; flex-wrap:wrap }
.chip{
  font-size:.74rem; font-weight:600; padding:4px 10px; border-radius:999px;
  color:var(--muted); background:var(--card); box-shadow:inset 0 0 0 .5px var(--hairline);
}
.chip.on{ color:#fff; background:var(--accent); box-shadow:none }
.chip.star{ color:var(--muted) }
.mk-list{ padding:9px 10px 14px; display:flex; flex-direction:column; gap:4px }
.row{
  display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:9px;
  color:var(--ink);
}
.row .ic{ width:30px; height:30px; flex:0 0 auto; border-radius:8px; display:grid; place-items:center;
  background:var(--card); box-shadow:inset 0 0 0 .5px var(--hairline); color:var(--accent) }
.row .ic svg{ width:16px; height:16px }
.row .tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px }
.row .t1{ display:block; font-size:.85rem; font-weight:600; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.row .t2{ display:block; font-size:.76rem; color:var(--muted); font-family:var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.row .time{ font-size:.72rem; color:var(--faint); flex:0 0 auto; font-variant-numeric:tabular-nums }
/* Real app selects a row with a ~20% accent TINT + normal text (HistoryView: accentColor.opacity(0.20)),
   not a solid fill — the solid-accent/white-text treatment is the selected CHIP, not the row. */
.row.sel{ background:color-mix(in srgb, var(--accent) 18%, transparent); box-shadow:none }
.row.voice .ic{ color:var(--voice) }          /* purple = voice only */
.row.voice .wave{ color:var(--voice) }
.row.cred .ic{ color:var(--muted) }            /* credential row is muted */
.row .wave{ display:flex; align-items:center; gap:2px; height:14px }
.row .wave i{ width:2px; border-radius:1px; background:currentColor; opacity:.7 }
.dots-pw{ letter-spacing:2px; font-family:var(--mono) }
.lock{ width:13px; height:13px; color:var(--faint) }
.float{
  position:absolute; right:20px; bottom:-18px; z-index:3;
  display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:13px;
  font-size:.8rem; font-weight:600; color:var(--ink);
}
.float .rec{ width:9px; height:9px; border-radius:50%; background:#ff5f57; box-shadow:0 0 0 4px rgba(255,95,87,.2) }
@media (max-width:600px){ .float{ right:12px; bottom:-16px; font-size:.76rem } }

/* ---------- Section scaffolding ---------- */
section{ padding:58px 0 }
.sec-head{ text-align:center; max-width:640px; margin:0 auto 36px }
.sec-kicker{ font-size:.76rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--accent-ink); margin:0 0 10px }
.sec-head h2{ font-family:var(--display); font-size:clamp(1.6rem,3.2vw,2.2rem); line-height:1.1; letter-spacing:-.022em; margin:0; font-weight:700; color:var(--ink) }
.sec-head p:not(.sec-kicker){ color:var(--muted); font-size:1.02rem; line-height:1.6; letter-spacing:0; margin:12px auto 0; max-width:52ch }

/* ---------- Feature grid ---------- */
.grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
@media (max-width:940px){ .grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){ .grid{ grid-template-columns:1fr } }
.feat{ padding:22px 20px 24px; border-radius:18px; transition:transform .22s cubic-bezier(.2,.7,.2,1) }
.feat:hover{ transform:translateY(-4px) }
.feat .picto{ margin-bottom:14px; color:var(--ink) }
.feat .picto svg{ width:104px; height:80px; display:block }
.feat .picto .n{ stroke:currentColor; stroke-width:3.6; opacity:.56 }
   /* neutral tone: the stage, not the actor. 3.6 against the accent's 4.5 so the eye
      lands on the accent first; opacity .52 → .56 pays back the contrast the thinner
      stroke costs. Measured off the rendered card: 3.87:1 light / 5.08:1 dark, both
      clear of the 3:1 floor for non-text graphics (WCAG 1.4.11), and on light the
      neutral now sits *under* the accent's 4.22:1 — hierarchy, not just taste. */
.feat .picto .a{ stroke:var(--accent) }                  /* brand tone: the action */
.feat .picto .af{ fill:var(--accent); stroke:none }
.feat .picto.voice .a{ stroke:var(--voice) }             /* purple = voice only */
.feat h3{ font-size:1.06rem; font-weight:650; line-height:1.25; letter-spacing:-.015em; margin:0 0 7px }
.feat p{ margin:0; color:var(--muted); font-size:.92rem; line-height:1.55; letter-spacing:0 }
.feat p kbd{ margin:0 1px }

/* One quiet, specific way down a level (Apple: advanced options one level deeper) */
.more{ text-align:center; margin:16px 0 0; font-size:.95rem }
.more a{ font-weight:600 }
.more a::after{ content:" →" }

/* ---------- Shortcuts strip ---------- */
.shortcuts .panel{ padding:12px; border-radius:22px }
.sc-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(8,1fr); gap:8px }
@media (max-width:820px){ .sc-grid{ grid-template-columns:repeat(4,1fr) } }
@media (max-width:460px){ .sc-grid{ grid-template-columns:repeat(2,1fr) } }
.sc{
  text-align:center; padding:18px 10px 16px; border-radius:15px;
  transition:background .2s ease, transform .18s ease;
}
.sc:hover{ background:var(--card); transform:translateY(-2px) }
.sc .k{ display:inline-block }
.sc .k kbd{ font-size:.92rem; padding:6px 10px }
.sc .l{ display:block; margin-top:11px; font-size:.82rem; letter-spacing:.005em; color:var(--muted); font-weight:500 }

/* ---------- Flow illustration ---------- */
.flow{ margin-top:64px }
.flow .flow-svg{ display:block; width:100%; height:auto }
/* Below 700px the 1000x500 viewBox scales its 18px labels to about 6px — an unreadable smear.
   The nine feature cards already carry the same information, so the diagram steps aside. */
@media (max-width:700px){ .flow{ display:none } }

/* ---------- Privacy ---------- */
.priv-list{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
@media (max-width:820px){ .priv-list{ grid-template-columns:1fr } }
.priv-list li{ padding:22px 20px 24px; border-radius:18px }
.priv-list .pi{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  color:var(--ok); background:color-mix(in srgb, var(--ok-fill) 14%, transparent); box-shadow:inset 0 0 0 .5px var(--hairline) }
.priv-list .pi svg{ width:18px; height:18px }
.priv-list b{ display:block; margin:14px 0 5px; font-size:1.02rem; font-weight:650; line-height:1.3; letter-spacing:-.012em; color:var(--ink) }
.priv-list span{ display:block; font-size:.92rem; line-height:1.55; letter-spacing:0; color:var(--muted) }

/* ---------- Install ---------- */
.install .sec-head{ margin-bottom:28px }
.term{ max-width:640px; margin:0 auto; border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg, #1e1e20, #141416);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.08), 0 16px 40px -24px rgba(0,0,0,.5), 0 6px 16px -10px rgba(0,0,0,.4); }
.term-bar{ display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:.5px solid rgba(255,255,255,.07) }
.term-bar i{ width:11px; height:11px; border-radius:50% }
.term-bar i:nth-child(1){ background:#ff5f57 } .term-bar i:nth-child(2){ background:#febc2e } .term-bar i:nth-child(3){ background:#28c840 }
.term-bar span{ margin-left:6px; font-family:var(--mono); font-size:.76rem; color:#8a96b6 }
.term pre{ margin:0; padding:20px 22px; overflow-x:auto; font-family:var(--mono); font-size:.86rem; line-height:1.85; color:#cdd3e4 }
.term .c{ color:#727d9c } .term .g{ color:#7fd6c4 } .term .p{ color:#c9a2ff }
.install .note{ text-align:center; color:var(--muted); font-size:.92rem; line-height:1.6; margin:22px auto 0; max-width:56ch }

/* ---------- GitHub CTA ---------- */
.gh-card{ text-align:center; max-width:760px; margin:0 auto; padding:44px 32px 42px; border-radius:24px }
@media (max-width:520px){ .gh-card{ padding:34px 20px 32px } }
.gh-card h2{ font-family:var(--display); font-size:clamp(1.55rem,3.1vw,2.1rem); line-height:1.12; letter-spacing:-.022em; margin:0; font-weight:700; color:var(--ink) }
.gh-card .lead{ color:var(--muted); font-size:1.02rem; line-height:1.6; letter-spacing:0; max-width:48ch; margin:14px auto 0 }
.gh-card .cta-row{ margin-top:28px }

/* ---------- Full feature index (features.html) ---------- */
.ix-card{ padding:28px 30px 32px; border-radius:22px }
@media (max-width:520px){ .ix-card{ padding:22px 18px 26px } }
.ix-cols{ columns:3 260px; column-gap:40px }
.ix-group{ margin:0 0 26px; break-inside:avoid-column }
.ix-group h2{
  font-size:.76rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--accent-ink); margin:0 0 2px; break-after:avoid;
}
.ix-group h2.voice{ color:var(--voice) }
.ix-group ul{ list-style:none; margin:0; padding:0 }
.ix-group li{ padding:8px 0 9px; border-top:.5px solid var(--hairline); break-inside:avoid }
.ix-group li b{ display:block; font-size:.87rem; font-weight:600; line-height:1.35; letter-spacing:-.01em; color:var(--ink) }
.ix-group li b kbd{ font-size:.78em; padding:2px 6px; margin-left:2px; vertical-align:1px }
.ix-group li span{ display:block; font-size:.8rem; color:var(--muted); line-height:1.45; letter-spacing:0; margin-top:1px }

/* features.html header: minimal — title, one line, a way back */
.page-head{ padding:44px 0 30px; text-align:center }
.page-head h1{ font-family:var(--display); font-size:clamp(1.8rem,3.6vw,2.4rem);
  line-height:1.08; letter-spacing:-.025em; margin:0; font-weight:700; color:var(--ink) }
.page-head p{ color:var(--muted); font-size:1.02rem; line-height:1.6; margin:12px auto 0; max-width:50ch }
.back{ display:block; text-align:center; margin:24px 0 0; padding:10px 0; font-size:.95rem; font-weight:600 }
.back::before{ content:"← " }

/* ---------- Footer ---------- */
footer{ margin-top:34px; padding:40px 0; border-top:.5px solid var(--hairline) }
.foot{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 26px; justify-content:space-between }
.foot .brand{ font-size:1.02rem }
.foot-meta{ display:flex; flex-wrap:wrap; gap:8px 16px; font-size:.86rem; letter-spacing:.005em; color:var(--muted); align-items:center }
.foot-meta a{ color:var(--muted); font-weight:500 }
.foot-meta a:hover{ color:var(--ink) }
/* --muted, not --faint: --faint is 2.59:1 on the page and fails AA for real text.
   (--faint stays in the hero mockup, which is aria-hidden illustration.) */
.copyright{ margin-top:22px; font-size:.82rem; letter-spacing:.005em; color:var(--muted) }

/* ---------- Load / scroll reveal ---------- */
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1) }
.js .reveal.in{ opacity:1; transform:none }
.hero .eyebrow, .hero h1, .hero .sub, .hero .cta-row, .stage{
  animation:rise .8s cubic-bezier(.2,.7,.2,1) both;
}
.hero h1{ animation-delay:.05s } .hero .sub{ animation-delay:.12s }
.hero .cta-row{ animation-delay:.19s } .stage{ animation-delay:.26s }
@keyframes rise{ from{ opacity:0; transform:translateY(20px) } to{ opacity:1; transform:none } }
/* Reduced motion: the reveal resolves to its FINAL state, not its start state —
   opacity:1 here, so a .reveal element is never left invisible waiting for an
   animation (or for app.js) that is never going to run. */
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; transition:none }
  .hero .eyebrow,.hero h1,.hero .sub,.hero .cta-row,.stage{ animation:none }
  .feat:hover,.sc:hover,.btn:hover,.btn:active,.tt:hover,.tt:active{ transform:none }
  .feat,.sc,.btn,.tt{ transition:background .2s ease, box-shadow .2s ease, color .2s ease }
}

/* ---------- Touch targets (44×44, Apple HIG / WCAG 2.5.5) ----------
   Only on coarse pointers: a 44px theme toggle on a trackpad Mac is just fat. */
@media (pointer:coarse){
  .tt{ width:44px; height:44px }
  .nav .ghost,.nav .links a,.brand{ min-height:44px }
  .nav .ghost{ padding-inline:14px }
  .foot-meta{ gap:0 16px }
  .foot-meta a{ display:inline-flex; align-items:center; min-height:44px }
}
/* Standalone links that are the only thing in their block get a real hit box
   in every input mode; inline links inside a sentence are exempt (WCAG 2.5.8). */
.more a{ display:inline-block; padding:10px 8px }