/* CommandCenter landing page. Built on Dawn UI tokens (assets/dawn-*.css). */
@layer app {
  :root { --wrap: 72rem; --gut: clamp(1rem, 4vw, 2rem); --sec: clamp(4rem, 9vw, 7.5rem); }
  html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
  body { display: block; min-height: 100dvh; overflow-x: clip; line-height: 1.6; }
  h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  a:where(:not(.button)) { color: var(--live-ink); text-underline-offset: .18em; text-decoration-thickness: 1px; }
  a:where(:not(.button)):hover { color: var(--text-strong); }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
  .sprite { position: absolute; }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mono { font-family: var(--font-mono); font-size: .92em; }
  .muted { color: var(--text-muted); }
  .faint { color: var(--text-faint); }
  .small { font-size: var(--type-small); }
  .wrap { inline-size: min(100% - 2 * var(--gut), var(--wrap)); margin-inline: auto; }
  .wrap--narrow { inline-size: min(100% - 2 * var(--gut), 48rem); }
  .skip { position: absolute; inset-inline-start: 1rem; inset-block-start: -4rem; z-index: 100; padding: .6rem 1rem;
    background: var(--live); color: var(--on-live); border-radius: var(--r-control); transition: inset-block-start .15s var(--ease); }
  .skip:focus { inset-block-start: 1rem; }

  /* ---------- header ---------- */
  .top { position: sticky; inset-block-start: 0; z-index: 50; background: color-mix(in oklab, var(--canvas) 78%, transparent);
    backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-block-end: 1px solid transparent;
    transition: border-color .2s var(--ease); }
  .top.is-stuck { border-block-end-color: var(--hairline); }
  .top__in { display: flex; align-items: center; gap: 1.5rem; min-block-size: 3.5rem; }
  .brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--text-strong); text-decoration: none; font-weight: 600; letter-spacing: -.01em; }
  .brand:hover { color: var(--text-strong); }
  .brand__mark { inline-size: 1.75rem; block-size: 1.75rem; }
  .m-bg { fill: #0d1020; } .m-ring { fill: none; stroke: #6E82FF; stroke-width: 3; opacity: .55; }
  .m-chev { fill: none; stroke: #6E82FF; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
  .m-cursor { stroke: #33D196; stroke-width: 5; stroke-linecap: round; }
  .nav { display: flex; gap: .25rem; margin-inline-start: auto; }
  .nav a { padding: .4rem .7rem; border-radius: var(--r-pill); color: var(--text-muted); text-decoration: none; font-size: var(--type-small); }
  .nav a:hover { background: var(--fill); color: var(--text-strong); }
  .top__end { display: flex; align-items: center; gap: .5rem; }
  .theme .theme__moon { display: none; }
  :root:not([data-mode=light]) .theme .theme__sun { display: none; }
  :root:not([data-mode=light]) .theme .theme__moon { display: block; }
  @media (prefers-color-scheme: light) {
    :root:not([data-mode]) .theme .theme__sun { display: block; }
    :root:not([data-mode]) .theme .theme__moon { display: none; }
  }
  :root[data-mode=dark] .theme .theme__sun { display: block; }
  :root[data-mode=dark] .theme .theme__moon { display: none; }
  :root[data-mode=light] .theme .theme__sun { display: none; }
  :root[data-mode=light] .theme .theme__moon { display: block; }
  @media (max-width: 52rem) { .nav { display: none; } .top__end { margin-inline-start: auto; } }

  /* ---------- hero ---------- */
  .hero { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(3rem, 8vw, 6.5rem) clamp(3rem, 6vw, 5rem); }
  .hero__glow { position: absolute; inset: -20% -10% auto auto; inline-size: 70vw; max-inline-size: 60rem; aspect-ratio: 1; z-index: -1; pointer-events: none;
    background: radial-gradient(closest-side, color-mix(in oklab, var(--live-mark) 26%, transparent), transparent 70%); opacity: .7; }
  .hero__grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }
  @media (min-width: 62rem) { .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
  .hero__text { display: grid; gap: 1.5rem; justify-items: start; min-width: 0; }
  .eyebrow { display: inline-flex; align-items: center; gap: .6rem; font: 400 var(--type-label)/1.3 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
  .eyebrow__dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in oklab, var(--ok) 22%, transparent); animation: pulse 2.6s var(--ease) infinite; }
  h1 { font: 600 clamp(2.25rem, 5.6vw, 4rem)/1.04 var(--font-sans); letter-spacing: -.035em; color: var(--text-strong); text-wrap: balance; }
  h1 em { font-style: normal; background: linear-gradient(100deg, var(--live-ink), color-mix(in oklab, var(--live-ink) 40%, var(--ok))); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .lede { max-inline-size: 54ch; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.6; color: var(--text-muted); text-wrap: pretty; }
  .cta { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
  .cta__ver { font: 400 var(--type-label)/1 var(--font-mono); padding: .3rem .45rem; border-radius: var(--r-pill); background: color-mix(in oklab, var(--on-live) 22%, transparent); }
  .button { text-decoration: none; }
  .button[data-size=lg] { white-space: normal; text-align: center; line-height: 1.25; padding-block: .6rem; }
  .button:hover { color: var(--_ink); }
  .button--outline:hover, .button--secondary:hover, .button--ghost:hover { color: var(--text-strong); }
  .button--secondary.is-done { color: var(--ok); }
  .trust { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; color: var(--text-muted); font-size: var(--type-small); }
  .trust li { display: inline-flex; align-items: center; gap: .5rem; }
  .trust [data-slot=icon] { color: var(--live-ink); }

  /* hero visual */
  .stage { position: relative; min-width: 0; padding: clamp(.5rem, 3vw, 2rem); }
  .orbit { position: absolute; inset: 0; z-index: -1; display: grid; place-items: center; color: var(--line); }
  .orbit svg { inline-size: 120%; max-inline-size: 36rem; fill: none; stroke: currentColor; stroke-width: 1; opacity: .8; }
  .orbit .sweep path { fill: color-mix(in oklab, var(--live-mark) 20%, transparent); stroke: none; }
  .orbit .sweep { transform-origin: 200px 200px; animation: spin 14s linear infinite; }
  .win { background: var(--cell); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden;
    box-shadow: var(--float); animation: rise .9s var(--ease) both; }
  .win__bar { display: flex; align-items: center; gap: .75rem; padding: .65rem .9rem; border-block-end: 1px solid var(--hairline); background: var(--sunken); }
  .dots { display: inline-flex; gap: .4rem; } .dots i { inline-size: .65rem; block-size: .65rem; border-radius: 50%; background: var(--line); }
  .win__title { font-size: var(--type-small); font-weight: 500; color: var(--text); margin-inline: auto; transform: translateX(-1.5rem); }
  .win__tag { font: 400 .625rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); border: 1px solid var(--line); border-radius: var(--r-pill); padding: .25rem .5rem; }
  .win__body { display: grid; grid-template-columns: 7rem 1fr; min-height: 19rem; }
  .win__side { display: grid; align-content: start; gap: .25rem; padding: .9rem .6rem; border-inline-end: 1px solid var(--hairline); background: var(--sunken); }
  .pill { padding: .45rem .65rem; border-radius: var(--r-control); font-size: var(--type-small); color: var(--text-muted); }
  .pill.is-on { background: var(--live-wash); color: var(--live-ink); font-weight: 500; }
  .win__main { display: grid; align-content: start; gap: .5rem; padding: 1rem; min-width: 0; }
  .row { display: grid; grid-template-columns: 1.25rem 1fr auto; align-items: center; gap: .65rem; padding: .6rem .7rem; border: 1px solid var(--hairline); border-radius: var(--r-control); font-size: var(--type-small); }
  .row b { font-weight: 500; color: var(--text-strong); min-width: 0; }
  .row i { font: 400 var(--type-label)/1 var(--font-mono); color: var(--text-faint); font-style: normal; }
  .tick { inline-size: 1rem; block-size: 1rem; border-radius: 50%; border: 1.5px solid var(--line-strong); }
  .row.done .tick { background: var(--ok); border-color: var(--ok); box-shadow: inset 0 0 0 3px var(--cell); }
  .row.done i { color: var(--ok); }
  .row.live { grid-template-columns: 1.25rem 1fr; border-color: var(--live-line); background: var(--live-wash); }
  .row.live .tick { border-color: var(--live-mark); border-top-color: transparent; animation: spin 1s linear infinite; }
  .row.live .bar { grid-column: 2; block-size: 5px; border-radius: 9px; background: color-mix(in oklab, var(--live-mark) 20%, transparent); overflow: hidden; }
  .row.live .bar span { display: block; inline-size: 62%; block-size: 100%; border-radius: inherit; background: var(--live-mark); animation: load 3.2s var(--ease) infinite alternate; }
  .launch { margin-block-start: .4rem; display: inline-flex; justify-self: start; align-items: center; gap: .5rem; padding: .55rem 1rem; border-radius: var(--r-pill);
    background: var(--fill); color: var(--text-faint); font-size: var(--type-small); font-weight: 500; }

  /* ---------- sections ---------- */
  .section { padding-block: var(--sec); }
  .section--tight { padding-block: 0 var(--sec); }
  .section--alt { background: var(--sunken); border-block: 1px solid var(--hairline); }
  .sec-head { display: grid; gap: .9rem; margin-block-end: clamp(2rem, 4vw, 3.25rem); max-inline-size: 44rem; }
  .sec-head h2, .dl h2, .final h2 { font: 600 clamp(1.75rem, 3.6vw, 2.625rem)/1.1 var(--font-sans); letter-spacing: -.03em; color: var(--text-strong); text-wrap: balance; }
  .sec-head .muted { font-size: 1.0625rem; text-wrap: pretty; }
  .kicker { font: 400 var(--type-label)/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--live-ink); }
  .kicker--gap { margin-block-start: 1.5rem; }
  h3 { font: 500 1.125rem/1.3 var(--font-sans); letter-spacing: -.01em; color: var(--text-strong); }

  /* download card */
  .dl { display: grid; gap: 0; padding: 0; overflow: clip; border-radius: calc(var(--r-panel) + 4px);
    background: linear-gradient(160deg, var(--raised), var(--cell)); box-shadow: var(--float); }
  .dl__main, .dl__verify { padding: clamp(1.25rem, 3.5vw, 2.5rem); display: grid; gap: 1rem; align-content: start; min-width: 0; }
  .dl__verify { background: var(--sunken); border-block-start: 1px solid var(--hairline); }
  @media (min-width: 56rem) { .dl { grid-template-columns: 1.1fr 1fr; } .dl__verify { border-block-start: 0; border-inline-start: 1px solid var(--hairline); } .status { grid-column: 1 / -1; } }
  .dl__err { font-size: var(--type-small); color: var(--warn); }
  .meta { display: grid; gap: .6rem; margin-block-start: .5rem; }
  .meta div { display: flex; flex-wrap: wrap; gap: .25rem 1rem; padding-block: .6rem; border-block-start: 1px solid var(--hairline); font-size: var(--type-small); }
  .meta dt { inline-size: 6rem; color: var(--text-faint); font-family: var(--font-mono); font-size: var(--type-label); text-transform: uppercase; letter-spacing: .06em; padding-block-start: .15rem; }
  .meta dd { margin: 0; color: var(--text-strong); min-width: 0; }
  .hash, .snip { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; padding: .65rem .65rem .65rem .9rem; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--well); box-shadow: var(--well-shade); }
  .hash code, .snip code { min-width: 0; font: 400 .8125rem/1.6 var(--font-mono); color: var(--text-strong); overflow-wrap: anywhere; word-break: break-all; }
  .hash code { flex: 1 1 14rem; }
  .snip pre { flex: 1 1 14rem; min-width: 0; margin: 0; white-space: pre-wrap; }
  .snip code::before { content: "$ "; color: var(--text-faint); }
  .hash .button, .snip .button { flex: none; }
  .status { display: flex; gap: .85rem; align-items: flex-start; padding: 1rem clamp(1.25rem, 3.5vw, 2.5rem); border-block-start: 1px solid var(--hairline); background: var(--warn-wash); color: var(--text); font-size: var(--type-small); }
  .status p { text-wrap: pretty; }
  .status [data-slot=badge] { margin-block-start: .1rem; }

  /* steps */
  .steps { display: grid; gap: 1rem; counter-reset: s; position: relative; }
  @media (min-width: 40rem) { .steps { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 70rem) { .steps { grid-template-columns: repeat(5, 1fr); } }
  .step { position: relative; display: grid; gap: .6rem; align-content: start; padding: 1.4rem; background: var(--cell); border: 1px solid var(--hairline); border-radius: var(--r-panel);
    transition: translate .2s var(--ease), border-color .2s var(--ease); }
  .step:hover { border-color: var(--line-strong); translate: 0 -2px; }
  .step [data-slot=icon] { color: var(--live-ink); margin-block-end: .25rem; }
  .step p { font-size: var(--type-small); color: var(--text-muted); line-height: 1.55; text-wrap: pretty; }
  .step__n { position: absolute; inset-block-start: 1.1rem; inset-inline-end: 1.2rem; font: 400 var(--type-label)/1 var(--font-mono); color: var(--text-faint); }
  .step__n::before { content: "0"; }

  /* cards */
  .grid { display: grid; gap: 1rem; }
  @media (min-width: 40rem) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 62rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
  .feat, .need { padding: 1.5rem; gap: .6rem; --surface-radius: var(--r-panel); --surface-fill: var(--cell); --surface-edge: var(--hairline); }
  .feat [data-slot=icon], .need [data-slot=icon] { color: var(--live-ink); }
  .feat p, .need p { color: var(--text-muted); font-size: var(--type-small); line-height: 1.55; text-wrap: pretty; }
  .reversible { display: flex; align-items: center; gap: .6rem; margin-block-start: 1.75rem; color: var(--text-muted); font-size: var(--type-small); }
  .reversible [data-slot=icon] { color: var(--ok); }

  /* sources table */
  .table { border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--cell); overflow: clip; }
  .trow { display: grid; gap: .25rem 1.5rem; padding: 1rem 1.25rem; border-block-start: 1px solid var(--hairline); font-size: var(--type-small); color: var(--text-muted); }
  .trow:first-child { border-block-start: 0; }
  .trow b { color: var(--text-strong); font-weight: 500; }
  .trow > span { min-width: 0; overflow-wrap: anywhere; }
  .thead { display: none; background: var(--sunken); font: 400 var(--type-label)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); }
  @media (min-width: 52rem) { .trow { grid-template-columns: 1fr 1.5fr 1.5fr; align-items: baseline; } .thead { display: grid; } }

  /* faq */
  [data-slot=accordion] { border-color: var(--line); }
  details[data-slot=accordion-item] { border-color: var(--hairline); }
  [data-slot=accordion-trigger] { padding-block: 1.1rem; font-size: 1.0625rem; }
  [data-slot=accordion-content] { font-size: 1rem; }
  [data-slot=accordion-content] p { text-wrap: pretty; }

  /* final */
  .final { text-align: center; }
  .final__in { display: grid; justify-items: center; gap: 1.25rem; padding-block: clamp(2.5rem, 6vw, 4.5rem); border-radius: calc(var(--r-panel) + 8px);
    background: radial-gradient(60% 120% at 50% 0%, color-mix(in oklab, var(--live-mark) 20%, transparent), transparent 70%), var(--cell); border: 1px solid var(--hairline); }

  /* footer */
  .foot { border-block-start: 1px solid var(--hairline); background: var(--sunken); padding-block: 2.5rem 3rem; color: var(--text-muted); font-size: var(--type-small); }
  .foot__in { display: grid; gap: 1rem; max-inline-size: 60rem; }
  .foot__disc { color: var(--text); text-wrap: pretty; }
  .foot__small { color: var(--text-faint); }

  /* ---------- motion ---------- */
  @keyframes spin { to { rotate: 1turn; } }
  @keyframes pulse { 50% { box-shadow: 0 0 0 8px transparent; } }
  @keyframes rise { from { opacity: 0; translate: 0 18px; } }
  @keyframes load { from { inline-size: 48%; } to { inline-size: 88%; } }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }
  @media (prefers-reduced-motion: no-preference) {
    .hero__text > * { animation: rise .8s var(--ease) both; }
    .hero__text > :nth-child(2) { animation-delay: .06s; } .hero__text > :nth-child(3) { animation-delay: .12s; }
    .hero__text > :nth-child(4) { animation-delay: .18s; } .hero__text > :nth-child(5) { animation-delay: .24s; }
    .win { animation-delay: .15s; }
  }
  @media (max-width: 30rem) {
    .win__body { grid-template-columns: 1fr; } .win__side { display: none; }
    .win__title { transform: none; margin-inline: 0 auto; }
    .cta .button { inline-size: 100%; }
    .meta dt { inline-size: 100%; }
  }
  @media (forced-colors: active) { .button, .step, .win { border: 1px solid CanvasText; } }
}