/* ============================================================
   PAGE · LANDING (marketing home)
   Page-scoped composition on top of the design system. Loads
   after the component layer, so it can lean on tokens and
   compose objects/components without fighting them. No new
   colours — only the system palette, type, spacing, and glow.

   CSP note: the app runs style-src 'self' (no inline styles),
   so every per-element value the showcase set inline lives
   here as a class instead (gauge fills, knob angle, etc.).
   ============================================================ */

/* Backstop: the wide engraved display type should never force horizontal
   scroll on narrow screens. */
.site { overflow-x: clip; }

/* ---- Buttons rendered as links --------------------------------------- */
/* CTAs are <a class="c-button">; the bare <a> rule underlines + cyan-glows
   them. Override at higher specificity so source order vs application.css
   re-imports never matters. */
a.c-button { text-decoration: none; }
a.c-button:hover { text-shadow: none; }

/* ---- Skip link ------------------------------------------------------- */
.site-skip {
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-xs);
  color: var(--color-accent);
  font-family: var(--font-plaque);
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform var(--dur-fast) var(--ease-snap);
}
.site-skip:focus-visible { transform: translateY(0); }

/* ---- Background grid (full-page telemetry field) --------------------- */
.site-grid-bg {
  position: fixed;
  inset: 0;
  z-index: var(--z-below);
  pointer-events: none;
  background-image: var(--pattern-grid);
  background-size: var(--grid-cell) var(--grid-cell);
  opacity: 0.35;
  mask-image: radial-gradient(ellipse at top, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at top, black 0%, transparent 75%);
}

/* ---- Topbar ---------------------------------------------------------- */
.site-topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-overlay);
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  border-bottom: var(--border-thick) solid var(--color-bezel-dark);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
}
.site-topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
}
.site-topbar__spacer { flex: 1; }
.site-topbar__status { flex-shrink: 0; }

.site-brand {
  font-family: var(--font-plaque);
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
/* Gradient is scoped to the word itself — not the whole anchor — so the
   full brand sweep lands on DONEBOT instead of being spent on the
   muted sub-label that follows it. */
.site-brand__name {
  background: var(--gradient-vapor);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c-brand-hi) 40%, transparent));
}
.site-brand:hover { text-shadow: none; }
.site-brand__sub {
  font-family: var(--font-data);
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-widest);
  color: var(--color-text-muted);
  -webkit-text-fill-color: var(--color-text-muted);
  background: none;
  filter: none;
  margin-left: var(--space-2);
  vertical-align: middle;
}

/* ---- Hero ------------------------------------------------------------ */
.site-hero {
  position: relative;
  padding-block: var(--space-5) var(--space-8);
  overflow: hidden;
}
.site-hero__inner {
  text-align: center;
  align-items: center;
}
.site-hero__inner > * + * { margin-top: var(--space-5); }
.site-hero__eyebrow { align-self: center; }
.site-hero__title {
  font-size: clamp(2.5rem, 8vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: var(--ls-wider);
  margin-inline: auto;
}
.site-hero__title em {
  font-style: normal;
  background: var(--gradient-vapor);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.site-hero__sub {
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
  line-height: var(--lh-normal);
  max-width: 60ch;
  margin-inline: auto;
}
/* Kata readout — one concept at a time. Full-bleed band above the hero; the
   three lines are stacked in the same spot and slowly cross-fade. */
.site-roller-band {
  --roll-h: 2.6rem;
  width: 100%;
  padding-block: var(--space-7) var(--space-2);
  font-family: var(--font-terminal);
  font-size: var(--fs-xl);
  color: var(--c-medium-green);
  letter-spacing: var(--ls-wide);
  text-shadow: 0 0 8px color-mix(in srgb, var(--c-medium-green) 50%, transparent);
}
/* Stack every line in a single grid cell so they overlap; opacity (not
   position) decides which one is showing. */
.site-roller { display: grid; }
/* Three equal columns span the full page width; each word is centred in its
   own column, so JP/EN/RU sit at mirrored thirds with EN on the page midline. */
.site-roller__item {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
  min-height: var(--roll-h);
  white-space: nowrap;
  opacity: 0;
  will-change: opacity;
  animation: kata-fade 30s ease-in-out infinite;
}
/* Three lines, each phase-shifted by a third of the cycle, so one breathes
   in as the previous breathes out. */
.site-roller__item:nth-child(1) { animation-delay:  0s; }
.site-roller__item:nth-child(2) { animation-delay: 10s; }
.site-roller__item:nth-child(3) { animation-delay: 20s; }

/* VT323 (the terminal face) is Latin-only, so the kana and Cyrillic words
   fall through to a system font whose glyphs sit much taller than VT323's
   short caps — kana fills the em box, Cyrillic caps run ~20% taller. Scale
   the non-Latin scripts down so all three read at the same height on the
   shared baseline; the EN word (VT323) is the target. */
.site-roller__cjk { font-size: 0.6em; }
.site-roller__cyr { font-size: 0.85em; }

/* One line's full cycle: dark, breathe in, hold, breathe out, dark again.
   The faint scale gives the glow a gentle pulse rather than a flat fade. */
@keyframes kata-fade {
  0%      { opacity: 0;    transform: scale(0.985); }
  11%     { opacity: 0.9;  transform: scale(1); }
  28%     { opacity: 0.9;  transform: scale(1); }
  33%     { opacity: 0;    transform: scale(0.985); }
  100%    { opacity: 0;    transform: scale(0.985); }
}

/* Reduced motion: no cross-fade — lay all three concepts out as static,
   stacked rows, every line visible. */
@media (prefers-reduced-motion: reduce) {
  .site-roller__item {
    grid-area: auto;
    opacity: 0.9;
    transform: none;
    animation: none;
  }
}
.site-hero__cta { margin-top: var(--space-6); }

/* Status lights: equal-width columns so the lamps are evenly spaced
   regardless of label width ("Listening" vs "Nothing slipping"). Each stack
   centres in its column, so the lights land on a regular rhythm. */
.site-hero__telemetry {
  margin-top: var(--space-7);
  max-width: 30rem;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  gap: var(--space-4);
}
.site-hero__telemetry .c-led-stack { display: flex; }
@media (max-width: 32rem) {
  .site-hero__telemetry { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Band (full-bleed marquee strip) -------------------------------- */
.site-band { padding-block: var(--space-5); }

/* ---- Section scaffolding -------------------------------------------- */
.site-sections { padding-top: var(--space-7); padding-bottom: var(--space-9); }

/* Generous vertical rhythm. Default deck/stack/grid gaps read cramped here,
   so open them up — between sections, inside panels, and (especially) around
   the nested sub-panels. */
.site-sections > * + * { margin-top: var(--space-8); }              /* between sections */
.site-sections .o-panel { padding: var(--space-6); }               /* roomier panels */
.site-sections .o-panel.o-stack > * + * { margin-top: var(--space-5); } /* inside panels */
.site-sections .o-grid { gap: var(--space-5); }                    /* around cards + sub-panels */

/* Tighten the gap the panel head + stack would otherwise double up. */
.o-panel.o-stack > .o-panel__head { margin-bottom: 0; }

.site-section__title {
  font-size: clamp(var(--fs-xl), 4vw, var(--fs-2xl));
  color: var(--color-text-strong);
  max-width: 22ch;
}
.site-prose {
  color: var(--color-text);
  max-width: 68ch;
}
.site-prose--lead {
  font-size: var(--fs-lg);
  color: var(--color-text);
  max-width: 64ch;
}
.site-note { font-size: var(--fs-sm); }

/* ---- Channels -------------------------------------------------------- */
/* Cards stretch to equal height in the grid; the status badge is pinned to
   the bottom (margin-top:auto absorbs the slack) so the row of "Live now /
   Coming soon" labels lines up regardless of how much note text sits above. */
.site-channel { display: flex; flex-direction: column; gap: var(--space-2); height: 100%; }
.site-channel__note { font-size: var(--fs-sm); margin-top: var(--space-1); }
.site-channel .c-card__meta { margin-top: auto; padding-top: var(--space-3); }
.site-chips { margin-top: var(--space-2); }

/* ---- Method (numbered, multi-step) ---------------------------------- */
.site-method {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-5);
  padding: 0;
  margin: 0;
}
/* Each step is topped by an engraved seam rather than a flat dark rule —
   a 1px shadow line over a 1px highlight reads as a groove cut into the
   chassis, which carries far better on the dark-green field than the old
   low-contrast bezel-dark border did. A short glowing cyan tick (tied to the
   step number) anchors the left end and makes each divider distinct. */
.site-method__step {
  position: relative;
  padding-top: var(--space-4);
}
.site-method__step::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(
    to bottom,
    var(--c-bezel-shadow) 0 1px,
    var(--c-bezel-light) 1px 2px
  );
}
.site-method__step::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--space-6);
  height: 2px;
  background: var(--color-accent);
  box-shadow: var(--glow-cyan);
}
.site-method__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: 1;
  color: var(--color-accent);
  text-shadow: var(--glow-cyan);
}
.site-method__title {
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  color: var(--color-text-strong);
  margin-top: var(--space-3);
}
.site-method__body {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  max-width: none;
}

/* ---- Big statement (outcome / CTA) ---------------------------------- */
.site-statement {
  font-size: clamp(1.75rem, 5vw, 3rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
  color: var(--color-text-strong);
  max-width: 20ch;
}
.site-statement em {
  font-style: normal;
  color: var(--color-accent);
}

/* ---- Terminal legibility -------------------------------------------- */
/* The CRT look is great but VT323 + the system's double-blur glow + tight
   scanlines made the text fuzzy. On the landing: larger text, a crisper
   (single-tight) bloom, more line spacing, and softer scanlines. The
   phosphor colour and CRT character stay. */
.site .c-terminal {
  line-height: 1.5;
  text-shadow:
    0 0 1px var(--term-color),
    0 0 5px color-mix(in srgb, var(--term-color) 28%, transparent);
}
.site .c-terminal::before { opacity: 0.45; }

/* ---- Conversation terminals ----------------------------------------- */
.site-chat { font-size: var(--fs-xl); }
.site-chat > * + * { margin-top: var(--space-4); }
.site-chat__you::before {
  content: "you> ";
  color: var(--color-phosphor-cyan);
  opacity: 0.8;
}
.site-chat__bot::before {
  content: "donebot> ";
  opacity: 0.55;
}

/* ---- Exchange layout: chat CRT + operations ledger ------------------ */
/* The chat (a CRT) and the ledger (a control-panel register) are two
   different surfaces, so let them size to their own content rather than
   forcing equal-height columns. The chat carries the conversation, so give
   it ~two-thirds and let the ledger sit narrow alongside it. */
.site-exchange {
  align-items: start;
  grid-template-columns: 2fr 1fr;
}
/* Fixed columns don't auto-wrap; stack them once there's no room. */
@media (max-width: 720px) {
  .site-exchange { grid-template-columns: 1fr; }
}

/* ---- Operations ledger (the machine's side of the exchange) --------- */
/* A structured register of what the chat produced — status LED, category
   tag, value — instead of a second phosphor terminal. */
.site-ledger__head .c-led { margin-right: var(--space-1); }
.site-ledger__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-ledger__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-3);
  /* keep each op on a single line — no awkward mid-value wraps */
  white-space: nowrap;
  /* engraved divider between rows — same groove as the method seam */
  box-shadow: inset 0 -2px 0 0 var(--c-bezel-shadow), inset 0 -1px 0 0 var(--c-bezel-light);
}
.site-ledger__row:last-child { box-shadow: none; }
.site-ledger__row .c-badge { flex: none; }
/* value sits inline right after the label, not pushed to the right edge */
.site-ledger__value {
  font-family: var(--font-data);
  font-size: var(--fs-xs);
  color: var(--color-phosphor-cyan);
}
/* GTD context (@computer, @calls) — dimmer than the task it qualifies */
.site-ledger__ctx { color: var(--color-text-muted); }

/* ---- Web console scene ---------------------------------------------- */
.site-console { margin-top: var(--space-2); }
.site-console__feed { min-height: 12rem; }
.site-console__controls { margin-top: var(--space-2); }
.site-knob { text-align: center; }
.site-knob .c-plaque { margin-top: var(--space-2); }
.site-knob--lo { --knob-angle: 40deg; }
.site-toggle__label {
  font-family: var(--font-plaque);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text);
}

/* Gauge fill levels (replaces inline --gauge-value under CSP). */
.site-gv-08  { --gauge-value: 0.08; }
.site-gv-28  { --gauge-value: 0.28; }
.site-gv-62  { --gauge-value: 0.62; }
.site-gv-77  { --gauge-value: 0.77; }
.site-gv-100 { --gauge-value: 1; }

/* ---- CTA panel ------------------------------------------------------- */
.site-cta {
  text-align: center;
  align-items: center;
}
.site-cta > * { margin-inline: auto; }
.site-cta__title { max-width: 24ch; }
.site-cta__buttons { margin-top: var(--space-4); }

/* ---- Footer ---------------------------------------------------------- */
.site-footer {
  margin-top: var(--space-8);
  padding-block: var(--space-6);
  border-top: var(--border-thick) solid var(--color-bezel-dark);
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
}
.site-footer__fine { font-size: var(--fs-xs); margin-top: var(--space-2); }
.site-footer__transmission {
  font-family: var(--font-terminal);
  font-size: var(--fs-md);
}

/* ---- Ticker: slower + smooth ---------------------------------------- */
/* The system marquee scrolls in 22s; that reads as frantic here, so halve
   the speed. The choppiness was repaint jank — the moving track carries a
   phosphor text-shadow that re-rasterises every frame. Promote it to its
   own compositor layer (will-change) so the glow is rasterised once and the
   layer is just translated: smooth, sub-pixel motion. */
.site .c-marquee__track {
  animation-duration: 44s;
  will-change: transform;
  backface-visibility: hidden;
}

/* ---- Method status strip: a slow scan that rests on the last light --- */
/* All five stage tiles stay lit; a gentle highlight sweeps left-to-right
   through them (echoing the flow of the method), then settles and HOLDS on
   the last tile — "Nothing slipping" — for ~5s before the sweep restarts.
   Tiles 1–4 share a short bright window, staggered by delay; tile 5 holds.
   fill-mode:both keeps tiles dim during their initial delay (no first-run
   flash). */
.site-method-strip .c-annunciator__tile {
  animation-duration: 11s;
  animation-timing-function: var(--ease-pulse);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.site-method-strip .c-annunciator__tile:nth-child(1) { animation-name: ms-sweep; animation-delay: 0s; }
.site-method-strip .c-annunciator__tile:nth-child(2) { animation-name: ms-sweep; animation-delay: 1.1s; }
.site-method-strip .c-annunciator__tile:nth-child(3) { animation-name: ms-sweep; animation-delay: 2.2s; }
.site-method-strip .c-annunciator__tile:nth-child(4) { animation-name: ms-sweep; animation-delay: 3.3s; }
.site-method-strip .c-annunciator__tile:nth-child(5) { animation-name: ms-rest;  animation-delay: 0s; }

/* Tiles 1–4: brief highlight, then dim for the rest of the cycle. */
@keyframes ms-sweep {
  0%   { filter: brightness(0.82); }
  2%   { filter: brightness(1.45); }
  9%   { filter: brightness(1.45); }
  13%  { filter: brightness(0.82); }
  100% { filter: brightness(0.82); }
}
/* Tile 5: lights as the sweep arrives (~41%) and holds bright through to
   ~93% (~5.7s) — the rest on "Nothing slipping" — then settles before loop. */
@keyframes ms-rest {
  0%   { filter: brightness(0.82); }
  38%  { filter: brightness(0.82); }
  41%  { filter: brightness(1.45); }
  93%  { filter: brightness(1.45); }
  98%  { filter: brightness(0.82); }
  100% { filter: brightness(0.82); }
}

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 720px) {
  .site-topbar__status { display: none; }
  /* The topbar is a single non-wrapping row (brand + spacer + account nav).
     On a phone the brand alone eats the width, so the nav buttons overflow
     off the right edge and become unreachable. Let the row wrap: brand stays
     on top, the account actions drop to their own full-width row below. */
  .site-topbar__inner { flex-wrap: wrap; }
  .site-topbar__spacer { display: none; }
  .site-topbar nav { width: 100%; justify-content: flex-start; }
  /* The console preview's 5-up tab bank is an inline-flex row with no wrap;
     left alone it forces the page wider than the viewport. Let it wrap. */
  .site-console .c-tabs { flex-wrap: wrap; max-width: 100%; }
  .site-hero { padding-block: var(--space-7) var(--space-6); }
  .site-footer .o-cluster { gap: var(--space-4); }
  /* The three-language line is wider; shrink it so it fits one row. */
  .site-roller-band { --roll-h: 2rem; font-size: var(--fs-md); }
  /* Orbitron runs wide, so the old clamp shrank the headline to ~21px to
     keep "OUT OF YOUR HEAD." on one line — far too small for a hero. Let it
     wrap instead and scale up: a punchy display size that still can't force
     horizontal overflow (no extra tracking; the longest word fits at 3rem). */
  .site-hero__title { font-size: clamp(2rem, 9vw, 3rem); letter-spacing: 0; }
  .site-hero__eyebrow { letter-spacing: var(--ls-wide); white-space: normal; }
}