/* ============================================================
   akwOS — marketing shell

   LAYOUT ONLY, and only what the landing page alone needs. Every
   component it shares with the product surface — panel, grid, tile,
   tag, grade badge, button, chip, slot marks — comes from `ui.css`
   and resolves against `tokens.css`.

   What used to be here and is now gone: a second `:root` palette
   whose `--agents` / `--monitors` / `--lists` / `--red` / `--line` /
   `--muted` / `--dim` disagreed with the product surface's values
   under the same names, and a hand-built replica of the product UI
   (`.planbox`, `.feed`, `.lst-tbl`, `.st-done/.st-run/.st-open`)
   maintained in parallel with the real thing. The page renders the
   real components from the real data now, so the replica has nothing
   left to drift from.

   The shell is the dark theme; `index.html` sets data-theme="dark".
   ============================================================ */

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

/* ── brand ─────────────────────────────────────────────────── */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: var(--solid); display: grid; place-items: center;
}
.brand-mark svg {
  width: 19px; height: 19px; stroke: var(--solid-fg); stroke-width: 2.5;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.brand-text { font-size: 19px; font-weight: 640; letter-spacing: -.03em; }
.brand-os { opacity: .55; }
.brand.sm .brand-mark { width: 26px; height: 26px; }
.brand.sm .brand-text { font-size: 17px; }

/* ── nav ───────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.nav.stuck { border-bottom-color: var(--border); }
.nav-in { display: flex; align-items: center; gap: 32px; height: 66px; }
.nav-links {
  display: flex; gap: 28px; margin-left: auto;
  font-size: 14.5px; color: var(--text-muted);
}
.nav-links a { transition: color .18s; }
.nav-links a:hover { color: var(--text); }

/* ── hero ──────────────────────────────────────────────────── */
.eyebrow {
  font-size: 11.5px; font-weight: 640; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-dim); margin: 0 0 20px;
}
/* `overflow: clip`, not `hidden`, so the bleeding glow cannot widen
   the page without making the hero a scroll container. */
.hero { padding: 96px 0 56px; text-align: center; position: relative; overflow: clip; }
.hero::before {
  content: ""; position: absolute; inset: -10% -20% auto; height: 620px;
  background: radial-gradient(60% 60% at 50% 0%,
    color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
  pointer-events: none; z-index: -1;
}
.hero-h1 {
  font-size: clamp(38px, 6.2vw, 68px); line-height: 1.05;
  letter-spacing: -.038em; font-weight: 660; margin: 0 0 26px;
}
.hero-sub {
  max-width: 660px; margin: 0 auto; color: var(--text-muted);
  font-size: 18px; line-height: 1.62;
}
.hero-sub b { color: var(--text); font-weight: 600; }
.hero-cta { display: flex; gap: 12px; justify-content: center; margin: 36px 0 0; flex-wrap: wrap; }

/* ── statline ──────────────────────────────────────────────── */
.statline {
  list-style: none; display: flex; justify-content: center; flex-wrap: wrap;
  margin: 60px auto 0; padding: 0; max-width: 860px;
  border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden;
  background: linear-gradient(180deg, var(--akw-w-06), transparent);
}
.statline li {
  flex: 1 1 170px; padding: 22px 18px; text-align: center;
  border-right: 1px solid var(--border);
}
.statline li:last-child { border-right: 0; }
.statline b {
  display: block; font-size: 30px; font-weight: 660;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.statline span { display: block; font-size: 12.5px; color: var(--text-dim); margin-top: 3px; }
/* The vendored figure, under the authored headline. Deliberately
   smaller and quieter than <b>: both numbers are true, and only one
   of them answers "what has this org built". Sizing it the same would
   invite a reader to add them. */
.statline em {
  display: block; font-style: normal; font-size: 11px;
  color: var(--text-dim); opacity: .8; margin-top: 5px;
  font-variant-numeric: tabular-nums;
}
.statline i {
  display: block; font-style: normal; font-family: var(--mono);
  font-size: 9.5px; color: var(--text-dim); opacity: .72; margin-top: 6px;
  letter-spacing: .04em; text-transform: uppercase;
}

/* ── device stage ──────────────────────────────────────────── */
.stage-sec { padding: 36px 0 84px; }
.stage-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 28px; flex-wrap: wrap; margin-bottom: 26px;
}
.stage-title { font-size: 26px; letter-spacing: -.028em; font-weight: 640; margin: 0 0 6px; }
.stage-note { margin: 0; color: var(--text-dim); font-size: 14px; max-width: 460px; }

.toggle {
  display: inline-flex; padding: 5px; gap: 4px;
  border: 1px solid var(--border); border-radius: 16px; background: var(--surface);
}
.toggle-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 9px 16px 10px; border: 0; border-radius: var(--r-md);
  background: transparent; color: var(--text-muted); cursor: pointer;
  font-family: inherit; text-align: left;
  transition: background .2s var(--ease), color .2s;
}
.toggle-btn svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 3px;
}
.toggle-btn .t-name { font-size: 13.5px; font-weight: 580; letter-spacing: -.01em; }
.toggle-btn .t-dim { font-size: 11px; opacity: .62; font-variant-numeric: tabular-nums; }
/* aria-selected carries the state — there is no parallel .is-on class
   to keep in step, and a screen reader reads the same fact the CSS does. */
.toggle-btn[aria-selected="true"] { background: var(--solid); color: var(--solid-fg); }
.toggle-btn[aria-selected="true"] .t-dim { opacity: .55; }

/* `transform: scale()` shrinks the paint, never the layout box — the
   unscaled shell is 1922px wide and would push the page sideways.
   The stage clips it; the scaled device stays centred either way. */
.stage {
  position: relative; display: flex; justify-content: center;
  overflow: hidden; transition: height .55s var(--ease);
}
.stage-glow {
  position: absolute; inset: auto 8% 0; height: 220px; z-index: 0;
  background: radial-gradient(50% 100% at 50% 100%,
    color-mix(in srgb, var(--accent) 20%, transparent), transparent 72%);
  filter: blur(28px); pointer-events: none;
}
.device { position: relative; z-index: 1; }
.device-shell {
  position: relative; background: var(--akw-n-850);
  border: 1px solid var(--akw-w-12); box-shadow: var(--shadow-lg);
  transform-origin: top center; transition: border-radius .45s var(--ease);
}
.device-screen {
  background: var(--akw-n-0); overflow: hidden; position: relative;
  transition: width .55s var(--ease), height .55s var(--ease);
}
.device-screen iframe { width: 100%; height: 100%; border: 0; display: block; }

.device-chrome {
  display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px;
  border-bottom: 1px solid rgba(0,0,0,.35); background: var(--akw-n-800);
}
.device-chrome .dot-w { width: 10px; height: 10px; border-radius: 50%; background: var(--akw-w-24); }
.device-url { margin-left: 14px; font-size: 11.5px; color: var(--text-dim); font-family: var(--mono); }
.device-notch { display: none; }

.device[data-device="desktop"] .device-shell { border-radius: var(--r-lg); padding: 0; overflow: hidden; }
.device[data-device="desktop"] .device-screen { width: 1920px; height: 1200px; }

.device[data-device="phone"] .device-shell {
  border-radius: 58px; padding: 11px;
  background: var(--akw-n-925); border-color: var(--akw-w-14);
}
.device[data-device="phone"] .device-chrome { display: none; }
.device[data-device="phone"] .device-screen { width: 402px; height: 874px; border-radius: 47px; }
.device[data-device="phone"] .device-notch {
  display: block; position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  width: 118px; height: 33px; background: var(--akw-void); border-radius: var(--r-full); z-index: 3;
}
/* Outside the stage, so the clip above never eats it. */
.device-caption {
  text-align: center; color: var(--text-dim); font-size: 12.5px;
  font-variant-numeric: tabular-nums; margin: 18px 0 0;
}

/* ── content sections ──────────────────────────────────────── */
.sec { padding: 92px 0; border-top: 1px solid var(--border); }
.sec.alt { background: linear-gradient(180deg, var(--bg-sunken), var(--bg)); }
.sec-h2 {
  font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -.032em;
  font-weight: 650; margin: 0 0 14px; line-height: 1.14; max-width: 20ch;
}
.sec-lede { color: var(--text-muted); font-size: 16.5px; margin: 0 0 28px; max-width: 66ch; }
.sec-lede b { color: var(--text); font-weight: 600; }
.sec-lede code { font-size: .88em; }

/* The provenance chip every derived block carries, so a reader can
   tell at a glance which numbers came out of the generator. */
.derived {
  display: inline-block; margin-bottom: 14px; padding: 3px 9px;
  font-family: var(--mono); font-size: 10px; color: var(--text-dim);
  border: 1px dashed var(--border-strong); border-radius: var(--r-xs);
}

.ticks { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 11px; }
.ticks li { position: relative; padding-left: 26px; color: var(--text-muted); font-size: 14.8px; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 13px; height: 8px;
  border-left: 1.8px solid var(--text); border-bottom: 1.8px solid var(--text);
  transform: rotate(-45deg); opacity: .55;
}

/* ── evidence ladder ───────────────────────────────────────── */
.grades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 32px; }
.gcard {
  border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px;
  background: var(--surface); position: relative; overflow: hidden;
}
.gcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.gcard.g1::before { background: var(--ok); }
.gcard.g2::before { background: var(--accent); }
.gcard.g3::before { background: var(--warn); }
.gcard.g4::before { background: var(--text-dim); }
.gcard b {
  display: block; font-size: 16px; font-weight: 620;
  letter-spacing: -.02em; font-family: var(--mono);
}
.gcard span { display: block; font-size: 12.8px; color: var(--text-dim); margin-top: 5px; }

/* ── cta + footer ──────────────────────────────────────────── */
.cta { padding: 92px 0; border-top: 1px solid var(--border); text-align: center; }
.cta h2 { font-size: clamp(30px, 4vw, 44px); letter-spacing: -.034em; font-weight: 660; margin: 0 0 12px; }
.cta p { color: var(--text-muted); margin: 0 0 30px; font-size: 17px; }
.foot { border-top: 1px solid var(--border); padding: 34px 0; }
.foot-in { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.foot-links { display: flex; gap: 22px; margin-left: auto; font-size: 14px; color: var(--text-muted); }
.foot-links a:hover { color: var(--text); }
.foot-c { font-size: 13px; color: var(--text-dim); }

/* ── responsive ────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .grades { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .wrap { padding: 0 20px; }
  .nav-links { display: none; }
  .hero { padding: 64px 0 40px; }
  .sec, .cta { padding: 64px 0; }
  .grades { grid-template-columns: 1fr; }
  .stage-head { align-items: flex-start; }
  .statline li { flex-basis: 50%; border-bottom: 1px solid var(--border); }
  .foot-links { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}