/* ═══════════════════════════════════════════════════════════════
   ARCANA — Editorial Layout (Specimen / Broadsheet)
   Type-specimen mastheads, technical-drawing frames, hairline rules.
   Home-only stylesheet. Tokens here extend (never override) main.css.
   ═══════════════════════════════════════════════════════════════ */

/* === Design Tokens (home-only) ===
   Re-theme override: editorial.css loads AFTER main.css, so redefining
   main.css tokens here re-themes the HOME PAGE ONLY (other pages keep
   cobalt/bone). Palette: dark = black / white / deep-indigo.
   Per Vercel web-interface-guidelines: color-scheme on :root, theme-color
   meta matches bg, tint borders/shadows toward the bg hue. */
:root {
  color-scheme: dark;

  /* — base palette override (deep-indigo on black) — */
  --color-bg: #000000;
  --color-surface: rgba(255, 255, 255, 0.03);
  --color-surface-2: rgba(255, 255, 255, 0.05);
  --color-border: rgba(255, 255, 255, 0.09);
  --color-divider: rgba(255, 255, 255, 0.05);
  --color-text: #ffffff;
  --color-text-muted: #9a9aa6;
  --color-text-faint: #85889a;   /* raised — 4.05:1 failed AA; now ~6:1 on black */
  --color-primary: #4338ca;        /* deep-indigo */
  --color-primary-hover: #6366f1;  /* indigo-500, brighter on hover */
  --color-cobalt: #4338ca;         /* alias kept for any reference */
  --color-success: #10b981;        /* functional status, kept */
  /* main.css shorthand aliases re-resolve to the new tokens above */
  --accent-2: #3b82f6;             /* single accent — cobalt */

  /* — editorial tokens — */
  --section-gap: 132px;
  --content-max: 1180px;
  --editorial-radius: 6px;         /* Vercel md — precise, border-first geometry */
  --rule: rgba(255, 255, 255, 0.09);
  --rule-2: rgba(255, 255, 255, 0.14);
  --frame-bg: #050507;
  --ghost-num: rgba(129, 140, 248, 0.07);   /* indigo-tinted ghost numerals */
  --tick: rgba(99, 102, 241, 0.9);          /* indigo-500 frame-hover tick */
}

/* === Native cursor restored (home-only) ===
   The ritual sigil follower (cursor.js + .cursor-follower) was retired
   here — its 0.18-lerp lag felt sluggish. main.css sets cursor:none
   globally for that follower; editorial.css loads last and overrides it
   back to the native pointer on the home page only. Auth/device keep it. */
body { cursor: auto; }
a, button, [role="button"], summary, .cmd, .btn { cursor: pointer; }
input, textarea, [contenteditable] { cursor: text; }

/* === Vercel hybrid geometry (home-only) ===
   Keeps the Bodoni + indigo + pure-black identity but adopts Vercel's
   precise geometry: 6px radius on buttons/inputs/frames, border-first
   elevation, the double-ring focus style, and a 4px spacing rhythm.
   Buttons de-pill from main.css's 9999px to the 6px rectangle spec. */
.btn, .cmd { border-radius: var(--editorial-radius); }

/* Retire the faint full-page grid (main.css body::before). On pure black its
   2%-white lines + top-mask fade read as a grey gradient behind the hero
   copy, not a crisp Vercel grid. Pure black instead. */
body::before { display: none; }

/* Pure-black home canvas. main.css ships --color-bg:#08090a (very dark
   grey-blue); the home identity is pure #000, so override it here on the
   home page only — shared pages keep #08090a. Light mode untouched. */
html:not(.site-light),
html:not(.site-light) body { background: #000; }

/* Retire the full-screen noise overlays on the home page. .grain-overlay
   (animated fractalNoise, .05) and .scanlines (CRT horizontal lines, .03)
   are defined in device.css/effects.css and shared with auth/device. On a
   pure-black canvas they read as static haze that fights the high-contrast
   Bodoni headline (thin strokes disappear into the noise). Disable both
   here on home only — auth/device keep theirs. */
.grain-overlay, .scanlines { display: none; }

/* Retire the cinematic vignettes (effects.css .hero-section::before +
   .cinematic-frame::before/::after). Their radial black-bleed reads as a
   grey gradient on the hero section and every video frame. Flat specimen
   plate — frames keep their double-hairline border+outline only. */
.hero-section::before,
.cinematic-frame::before,
.cinematic-frame::after { display: none; }

/* Vercel focus ring: 2px bg gap + 4px accent — replaces the cobalt
   box-shadow in main.css with a token-driven indigo double ring. */
.btn:focus-visible,
.cmd:focus-visible,
.film-play:focus-visible,
.back-to-top:focus-visible,
nav a:focus-visible,
.feedback-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--accent-2);
}

/* Headings balance; numeric comparisons stay aligned. */
h1, h2, h3 { text-wrap: balance; }
.metric-item strong,
.terminal-text,
.cmd { font-variant-numeric: tabular-nums; }

/* Anchor jumps clear the fixed header. */
.editorial-section,
.hero-section,
.cta-section { scroll-margin-top: 80px; }

/* === Editorial Sections === */
.editorial-section {
  padding: var(--section-gap) 0;
  position: relative;
}

/* CSS-counter section nameplate: each numbered section increments,
   every .editorial-header prints its index as a ghost Bodoni numeral.
   community (actions cluster collision), metrics (band), and cta
   (no header) are excluded so visible numerals read 01–08 with no gaps.
   No markup required. */
main { counter-reset: sec; }
.editorial-section:not(.community-section):not(.metrics-section):not(.cta-section) {
  counter-increment: sec;
}

/* === Editorial Header (Specimen Masthead) === */
.editorial-header {
  position: relative;
  margin-bottom: 72px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--rule);
}
.editorial-header.centered {
  text-align: center;
  border-bottom: 1px solid var(--rule);
}
.editorial-header::before {
  content: counter(sec, decimal-leading-zero);
  position: absolute;
  top: -10px;
  right: 0;
  font-family: var(--font-display);
  font-size: clamp(64px, 10vw, 124px);
  line-height: 0.8;
  letter-spacing: -0.05em;
  font-weight: 500;
  color: var(--ghost-num);
  pointer-events: none;
  font-feature-settings: "lnum";
  z-index: 0;
}
.editorial-header.centered::before {
  position: static;
  display: block;
  margin: 0 0 14px;
  text-align: center;
}
/* Community header already carries an actions cluster on the right —
   the ghost numeral would collide, so suppress it there. */
.community-section .editorial-header::before { display: none; }

.editorial-header .kicker {
  position: relative;
  z-index: 1;
  color: var(--accent-2);
  font: 510 11px/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.editorial-header .kicker::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent);
  display: inline-block;
}
.editorial-header.centered .kicker::before { display: none; }

.editorial-header h2 {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.04;
  letter-spacing: -1.1px;
  font-weight: 500;
  margin-bottom: 18px;
  color: var(--text);
  max-width: 920px;
  font-feature-settings: "cv01", "ss03";
}
.editorial-header.centered h2 { margin-inline: auto; }
.editorial-header p {
  position: relative;
  z-index: 1;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.62;
  max-width: 660px;
}
.editorial-header.centered p { margin: 0 auto; }

/* Italic cobalt accent for headline keywords */
.hl {
  font-style: italic;
  color: var(--accent-2);
  font-weight: 500;
}

/* === Editorial Grid === */
.editorial-grid {
  display: grid;
  gap: 80px;
  align-items: center;
}
.editorial-grid.two-col {
  grid-template-columns: 1fr 1fr;
}
.editorial-grid.two-col.reversed { direction: rtl; }
.editorial-grid.two-col.reversed > * { direction: ltr; }
@media (max-width: 900px) {
  .editorial-grid.two-col { grid-template-columns: 1fr; gap: 44px; }
  .editorial-grid.two-col.reversed { direction: ltr; }
}

/* === Editorial Content === */
.editorial-content h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.8px;
  font-weight: 500;
  margin-bottom: 22px;
  color: var(--text);
  font-feature-settings: "cv01", "ss03";
}
.editorial-content h3 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.14;
  letter-spacing: -0.6px;
  font-weight: 500;
  margin-bottom: 18px;
  color: var(--text);
  font-feature-settings: "cv01", "ss03";
}
.editorial-content p {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.66;
}
.editorial-content .kicker {
  color: var(--accent-2);
  font: 510 11px/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

/* === Media Frames (technical-drawing double hairline) ===
   ::before/::after on these elements are owned by effects.css
   (.cinematic-frame vignette), so the frame look is built from
   border + outline only — no pseudos. */
.media-frame,
.hero-visual-frame,
.cta-video-frame,
.evidence-frame {
  position: relative;
  border-radius: var(--editorial-radius);
  border: 1px solid var(--rule-2);
  outline: 1px solid var(--rule);
  outline-offset: 5px;
  background: var(--frame-bg);
  overflow: hidden;
  transition: box-shadow 0.5s var(--ease-out), outline-color 0.4s var(--ease-out);
}
.media-frame:hover,
.hero-visual-frame:hover,
.cta-video-frame:hover,
.evidence-frame:hover {
  outline-color: var(--tick);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.4);
}
.media-frame img,
.media-frame .workflow-screenshot {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}
.media-frame:hover img,
.media-frame:hover .workflow-screenshot {
  transform: scale(1.015);
}
.media-frame.dark { background: var(--frame-bg); }

/* FIG. captions retired — labels were unverifiable guesses (videos not
   viewable). Frames stand alone. */

/* === Terminal Capture === */
.terminal-capture {
  padding: 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
}
.terminal-bar {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--rule);
}
.terminal-bar .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}
.terminal-bar .dot:first-child { background: rgba(220, 38, 38, 0.55); }
.terminal-bar .dot:nth-child(2) { background: rgba(234, 179, 8, 0.55); }
.terminal-bar .dot:nth-child(3) { background: rgba(34, 197, 94, 0.55); }
.terminal-text {
  padding: 22px;
  margin: 0;
  color: #D9F99D;
  overflow-x: auto;
  background: transparent;
}
.t-cobalt { color: #818cf8; }
.t-green { color: #22c55e; }
.t-muted { color: #7d8187; }

/* === Workflow Timeline === */
.workflow-timeline { position: relative; }
.workflow-timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(99, 102, 241, 0.16), rgba(99, 102, 241, 0.16), transparent);
  transform: translateX(-50%);
  z-index: 0;
}
@media (max-width: 900px) {
  .workflow-timeline-line { display: none; }
}

/* === Workflow Chapters === */
.workflow-chapter {
  padding: 64px 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
  z-index: 1;
}
.workflow-chapter:last-child { border-bottom: none; }
/* Single index per chapter: the Roman ghost numeral (.workflow-number).
   The redundant mono "STEP nn / 03" tag was retired — one device, not two. */
.workflow-number {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(72px, 10vw, 132px);
  line-height: 0.82;
  color: var(--ghost-num);
  letter-spacing: -0.04em;
  margin-bottom: 8px;
  font-weight: 500;
  position: relative;
  display: inline-block;
  font-feature-settings: "lnum";
}
.workflow-number::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--tick), transparent);
  opacity: 0.5;
}
.workflow-detail {
  list-style: none;
  margin-top: 26px;
  display: grid;
  gap: 12px;
}
.workflow-detail li {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
  padding-left: 22px;
  position: relative;
}
.workflow-detail li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 510;
}

/* === Hero Section (Specimen) === */
.hero-section {
  padding: 48px 0 96px;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-inner {
  position: relative;
  z-index: 1;
}
.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(44px, 7.2vw, 92px);
  line-height: 1.02;
  letter-spacing: -1.0px;
  font-weight: 600;
  max-width: 940px;
  margin: 0 auto 26px;
  color: var(--text);
  position: relative;
  cursor: default;
  font-feature-settings: "cv01", "ss03";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Headline ink — bone with cobalt accent word (dark mode; light mode keeps its own dark ink). */
html:not(.site-light) .hero-headline { color: #f5f0e8; }
html:not(.site-light) .hl { color: #3b82f6; }
/* solid ink — gradient text retired (AI-slop tell). Italic cobalt accent via .hl. */
.hero-sub {
  max-width: 660px;
  margin: 0 auto 38px;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.62;
}
.hero-sub b { color: var(--text); font-weight: 510; }
.hero-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.hero-install {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  justify-content: center;
}
.hero-install .cmd { display: inline-flex; }

/* === HeroUI component DNA (ported to vanilla, hero-only) ===
   Button / Kbd / Snippet reimplemented in plain CSS after the
   HeroUI v3 BEM source (button.css, kbd.css, snippet.css).
   These layer on top of main.css's .btn/.cmd base; editorial.css loads
   last so they win on the home page. Shared pages never see them. */

/* — Button (HeroUI variants, scoped to hero actions) —
   .button layers onto .btn (which supplies height/padding/font/base
   from main.css). Adds icon slots, pending spinner, pressed scale,
   and the primary/secondary variant detailing. */
.hero-actions .button {
  gap: 9px;
  position: relative;
  border-radius: var(--editorial-radius);
  transition: transform var(--dur-fast) var(--ease-spring),
              background var(--dur-fast), border-color var(--dur-fast),
              box-shadow var(--dur-base), color var(--dur-fast);
}
.hero-actions .button__label { display: inline-block; }
.hero-actions .button__icon { width: 16px; height: 16px; flex: 0 0 auto; }
.hero-actions .button__icon--trailing { transition: transform var(--dur-base) var(--ease-spring); }
/* primary: solid accent + cobalt glow; arrow nudges right on hover */
.hero-actions .button--primary {
  box-shadow: 0 0 0 1px transparent, 0 10px 30px -12px var(--accent-2, #818cf8);
}
.hero-actions .button--primary:hover {
  box-shadow: 0 0 0 1px transparent, 0 14px 38px -10px var(--accent-2, #818cf8);
}
.hero-actions .button--primary:hover .button__icon--trailing { transform: translateX(3px); }
/* secondary: ghost outline, leading play icon nudges left on hover */
.hero-actions .button--secondary {
  background: rgba(255,255,255,.03);
  color: var(--text);
  border-color: rgba(255,255,255,.10);
}
.hero-actions .button--secondary:hover {
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
}
.hero-actions .button--secondary .button__icon--leading {
  width: 13px; height: 13px; margin-left: -1px;
  transition: transform var(--dur-base) var(--ease-spring);
}
.hero-actions .button--secondary:hover .button__icon--leading { transform: translateX(-1px) scale(1.08); }
/* pressed (HeroUI data-pressed / :active) */
.hero-actions .button:active,
.hero-actions .button[data-pressed="true"] { transform: translateY(0) scale(.97); }
/* pending spinner (HeroUI data-pending) — wired for future async buttons */
.hero-actions .button[data-pending="true"] { pointer-events: none; color: transparent !important; }
.hero-actions .button[data-pending="true"]::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff; border-radius: 50%;
  animation: btnSpin .7s linear infinite;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* — Kbd (keycap) — */
.kbd {
  display: inline-flex; align-items: center; gap: 2px;
  height: 22px; min-width: 22px; padding: 0 7px;
  font: 600 11px/1 var(--mono);
  font-family: var(--mono), ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.14);
  border-bottom-width: 2px;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  vertical-align: middle;
  -webkit-user-select: none; user-select: none;
}
.kbd--sm { height: 20px; min-width: 20px; padding: 0 6px; font-size: 10px; }
.kbd--xs { height: 17px; min-width: 17px; padding: 0 5px; font-size: 9px; border-radius: 5px; }
.kbd__abbr { font-weight: 700; opacity: .85; }
.kbd__content { display: inline-block; }

/* — Snippet (install shell w/ copy) —
   Wraps the .cmd typewriter target + a HeroUI-style copy button. The
   .cmd keeps its green-on-black terminal look; its own border/bg are
   neutralized inside the shell so the shell is the frame. */
.snippet {
  display: inline-flex; align-items: center; gap: 14px;
  height: 48px; padding: 0 6px 0 18px;
  border: 1px solid var(--line2);
  border-radius: 10px;
  background: #050408;
  box-shadow: 0 1px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.03);
  transition: border-color var(--dur-fast), box-shadow var(--dur-base);
}
.snippet:hover { border-color: rgba(217,249,157,.28); box-shadow: 0 0 18px rgba(217,249,157,.06); }
.snippet .cmd {
  border: 0; background: transparent; height: auto; min-height: 0;
  padding: 0; width: auto; border-radius: 0; box-shadow: none;
  color: #D9F99D; letter-spacing: .02em;
}
.snippet .cmd:hover { border-color: transparent; box-shadow: none; }
.snippet .cmd span { color: var(--soft); margin-right: 8px; }
.snippet__copy {
  flex: 0 0 auto; width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.10); border-radius: 7px;
  background: rgba(255,255,255,.03); color: var(--muted);
  cursor: pointer; transition: color var(--dur-fast), background var(--dur-fast),
              border-color var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}
.snippet__copy:hover { color: var(--text); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); }
.snippet__copy:active { transform: scale(.94); }
.snippet__copy:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--accent-2); }
.snippet__icon { width: 15px; height: 15px; }
.snippet__icon--check { display: none; color: #86efac; }
.snippet__copy.is-copied .snippet__icon--copy { display: none; }
.snippet__copy.is-copied .snippet__icon--check { display: block; }
.snippet__copy.is-copied { color: #86efac; border-color: rgba(134,239,172,.4); }

/* — Legibility scrim behind the hero copy —
   The ascii-rain particles are indigo #818cf8 (same hue as the cobalt
   "prove" accent), so they wash out the centered headline. A dark radial
   scrim sits above the rain (z1) and below the copy (z2), clearing a
   near-black plate behind the text while the rain stays visible at the
   edges. Replaces the earlier indigo spotlight, which was the same hue
   as the particles and made the wash worse. */
.hero-section::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: min(960px, 94vw); height: 580px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
              #000 0%, rgba(0,0,0,.94) 38%, rgba(0,0,0,.6) 62%, transparent 74%);
  pointer-events: none; z-index: 1;
}
.hero-inner { z-index: 2; }
.hero-headline, .hero-sub, .hero-actions, .hero-install { position: relative; z-index: 1; }

/* — Light mode — */
.site-light .hero-actions .button--primary {
  box-shadow: 0 10px 30px -12px rgba(67,56,202,.45);
}
.site-light .hero-actions .button--secondary {
  background: #fff; border-color: rgba(67,56,202,.18); color: var(--color-text);
}
.site-light .hero-actions .button--secondary:hover { border-color: rgba(67,56,202,.4); background: #fff; }
.site-light .kbd {
  background: linear-gradient(180deg, #fff, #f3f0e8);
  border-color: rgba(67,56,202,.2);
  color: var(--color-text);
  box-shadow: 0 1px 0 rgba(67,56,202,.1), inset 0 1px 0 #fff;
}
.site-light .hero-kbd-hint { color: var(--muted); }
.site-light .snippet { background: #fff; border-color: rgba(67,56,202,.16); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.site-light .snippet:hover { border-color: rgba(67,56,202,.3); box-shadow: none; }
.site-light .snippet .cmd { color: #4338ca; }
.site-light .snippet .cmd span { color: var(--muted); }
.site-light .snippet__copy { background: #f3f0e8; border-color: rgba(67,56,202,.14); color: var(--muted); }
.site-light .snippet__copy:hover { color: #4338ca; background: #ece8df; border-color: rgba(67,56,202,.3); }
.site-light .snippet__icon--check { color: #15803d; }
.site-light .snippet__copy.is-copied { color: #15803d; border-color: rgba(21,128,61,.35); }
.site-light .hero-section::after {
  background: radial-gradient(ellipse at center,
              #fff 0%, rgba(255,255,255,.96) 38%, rgba(255,255,255,.62) 62%, transparent 74%);
}

@media (prefers-reduced-motion: reduce) {
  .hero-actions .button__icon--trailing,
  .hero-actions .button__icon--leading { transition: none; }
  .hero-actions .button[data-pending="true"]::after { animation-duration: 1.5s; }
}

@media (max-width: 560px) {
  .snippet { width: 100%; }
  .hero-kbd-hint { flex-wrap: wrap; justify-content: center; }
}

/* === Hero Visual (full-width) === */
.hero-visual {
  margin: 72px auto 0;
  width: min(1080px, 90%);
  position: relative;
}
/* When the product loop leads the Workflows section, collapse the top
   margin (the editorial-header already supplies bottom spacing). */
.workflows-section .hero-visual { margin-top: 8px; margin-bottom: 72px; }
.hero-visual-frame {
  position: relative;
  width: 100%;
  /* double-hairline frame via border + outline (no pseudos; vignette is
     handled by .cinematic-frame in effects.css) */
  padding: 0;
  background: var(--frame-bg);
  transform: none;       /* tilt retired — flat specimen plate */
  transition: box-shadow 0.5s var(--ease-out), outline-color 0.4s var(--ease-out);
}
.hero-video {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--editorial-radius);
  object-fit: cover;
  background: var(--frame-bg);
}
/* hero-visual-glow retired — flat specimen plate, no gradient bleed */

/* === Meet Video === */
.meet-video {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 0;
  object-fit: cover;
  background: var(--frame-bg);
}

/* === Film Section === */
.film-video {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.film-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 3;
}
.film-play:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}
.film-play:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%) scale(1.08);
}
.film-play svg { width: 26px; height: 26px; fill: #fff; margin-left: 3px; }
.film-play.hidden { display: none; }

/* === Metrics Strip === */
.metrics-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  padding: 36px 0;
}
.metric-item { text-align: center; }
.metric-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 64px);
  line-height: 1;
  letter-spacing: -1.2px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 10px;
  font-feature-settings: "lnum";
}
.metric-item span {
  color: var(--muted);
  font: 500 11px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.metric-divider {
  width: 1px;
  height: 56px;
  background: var(--rule-2);
}

/* === CTA Section === */
.cta-section {
  padding: 120px 0 64px;
  text-align: center;
}
.cta-video-wrap {
  width: min(900px, 90%);
  margin: 0 auto 68px;
}
.cta-video-frame {
  position: relative;
  width: 100%;
  padding: 0;
  background: var(--frame-bg);
}
.cta-video {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--editorial-radius);
  object-fit: cover;
  background: var(--frame-bg);
}
.cta-inner {
  max-width: 720px;
  margin: 0 auto;
}
.cta-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.4vw, 48px);
  line-height: 1.08;
  letter-spacing: -1px;
  font-weight: 500;
  margin-bottom: 18px;
  color: var(--text);
  font-feature-settings: "cv01", "ss03";
}
.cta-inner p {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.62;
  margin-bottom: 38px;
}
.cta-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.btn.lg {
  height: 52px;
  padding: 0 26px;
  font-size: 15px;
}

/* === Evidence Section === */
.evidence-section { padding-top: 60px; }
.evidence-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}
.evidence-grid .evidence-card.full {
  grid-column: 1 / -1;
  max-width: 720px;
  margin: 0 auto;
}
.evidence-card {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.evidence-frame {
  border-radius: var(--editorial-radius);
  background: var(--frame-bg);
}
.evidence-frame img,
.evidence-frame video {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: var(--frame-bg);
}
.evidence-meta {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.evidence-rune {
  font-family: var(--font-display), "Segoe UI Symbol", "Apple Symbols", "Noto Sans Runic", serif;
  font-style: italic;
  font-size: 44px;
  line-height: 1;
  color: var(--accent-2);
  opacity: 0.9;
  min-width: 48px;
  text-align: center;
}
.evidence-meta h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--text);
  letter-spacing: -0.4px;
}
.evidence-meta p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}
@media (max-width: 768px) {
  .evidence-grid { grid-template-columns: 1fr; }
}

/* === Section Dividers (hairline + cobalt diamond) === */
.section-divider {
  width: 100%;
  height: 1px;
  background: var(--rule);
  position: relative;
  margin: 0;
  opacity: 0;
  transform: scaleX(0);
  transition: opacity 0.8s ease, transform 1s var(--ease-out);
}
.section-divider.revealed { opacity: 1; transform: scaleX(1); }
.section-divider::after {
  content: "◆";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-bg);
  color: var(--accent);
  font-size: 7px;
  padding: 0 14px;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════
   Home-only dark overrides for main.css cobalt-hardcoded components.
   main.css is shared by 6 pages (kept on the old cobalt/bone tokens);
   these re-skin only the components the home page actually renders.
   ═══════════════════════════════════════════════════════════════ */

/* nav sign-in pill → indigo + de-pill to Vercel 6px */
nav a.signin {
  color: #fff;
  border: 1px solid rgba(99, 102, 241, 0.5);
  background: rgba(99, 102, 241, 0.18);
  border-radius: var(--editorial-radius);
}
nav a.signin:hover {
  color: #fff;
  background: rgba(99, 102, 241, 0.25);
  border-color: rgba(99, 102, 241, 0.6);
}

/* theme-toggle hover → indigo (main.css hardcodes cobalt) */
.theme-toggle:hover { background: rgba(99, 102, 241, 0.08); }

/* feedback modal + review badge + mobile cta → Vercel 6px (de-pill/deround) */
.feedback-modal { border-radius: var(--editorial-radius); }
.review-badge { border-radius: var(--editorial-radius); }
.mobile-menu .mobile-cta { border-radius: var(--editorial-radius); }

/* testimonial avatar → indigo; card lifts on hover (border-first + soft shadow) */
.testimonial-avatar {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.2);
  color: var(--accent-2);
}
.testimonial:hover {
  border-color: rgba(99, 102, 241, 0.28);
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.18), 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* back-to-top → indigo */
.back-to-top {
  background: rgba(99, 102, 241, 0.18);
  border-color: rgba(99, 102, 241, 0.4);
  color: var(--accent-2);
}
.back-to-top:hover {
  background: rgba(99, 102, 241, 0.3);
  border-color: rgba(99, 102, 241, 0.7);
}

/* feedback CTA + modal fields → indigo (feedback.css is shared, so override here) */
.feedback-cta {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.25);
  color: var(--accent-2);
  border-radius: var(--editorial-radius);   /* de-pill to Vercel 6px */
}
.feedback-cta:hover {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.45);
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.15);
}
.fb-field input:focus,
.fb-field textarea:focus {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.3);
}

/* testimonial card → Vercel 6px (feedback.css uses --radius-lg) */
.testimonial { border-radius: var(--editorial-radius); }

/* ═══════════════════════════════════════════════════════════════
   Light Mode Overrides (.site-light — full parity)
   ═══════════════════════════════════════════════════════════════ */
.site-light {
  color-scheme: light;

  /* — base palette override (indigo on white, cream-yellow tint) — */
  --color-bg: #ffffff;
  --color-surface: #fef9e7;          /* light cream yellow */
  --color-surface-2: #fdf0c4;       /* deeper cream */
  --color-border: #ece4d2;          /* cream-tinted, visible on white */
  --color-divider: #efe9da;
  --color-text: #000000;
  --color-text-muted: #5c5650;
  --color-text-faint: #6f6860;
  --color-primary: #4338ca;         /* indigo on white (~7:1) */
  --color-primary-hover: #6366f1;
  --color-cobalt: #4338ca;
  --color-success: #15803d;

  /* ghost fills used by main.css components when home re-themes them */
  --ghost-fill: rgba(0, 0, 0, 0.025);
  --ghost-fill-2: rgba(0, 0, 0, 0.04);
  --ghost-fill-3: rgba(0, 0, 0, 0.06);
  --ghost-border: rgba(0, 0, 0, 0.08);
  --ghost-border-2: rgba(0, 0, 0, 0.11);
  --ghost-border-hover: rgba(67, 56, 202, 0.22);
  --header-bg: rgba(255, 255, 255, 0.92);
  --overlay-scrim: rgba(20, 18, 14, 0.32);
  --mobile-panel: rgba(255, 255, 255, 0.98);

  /* re-bind aliases so home never keeps dark computed values */
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --soft: var(--color-text-faint);
  --accent: var(--color-primary);
  --accent2: var(--color-primary);
  --accent-hover: var(--color-primary-hover);
  --accent-2: var(--color-primary);
  --line: var(--color-border);
  --line2: var(--color-divider);

  /* — editorial tokens — */
  --rule: #e7e0cf;                  /* cream hairline on white */
  --rule-2: #d8d0bb;
  --frame-bg: #050507;              /* dark plates stay dark in light mode */
  --ghost-num: rgba(67, 56, 202, 0.13);
  --accent-2: #4338ca;              /* indigo text accent on white */
  --tick: rgba(67, 56, 202, 0.85);
}
.site-light,
.site-light body {
  background-color: var(--color-bg);
  color: var(--color-text);
}
.site-light .editorial-header h2,
.site-light .editorial-content h2,
.site-light .editorial-content h3,
.site-light .hero-headline,
.site-light .cta-inner h2,
.site-light .evidence-meta h3 { color: var(--text); }
.site-light .hl { color: #4338ca; }

.site-light .media-frame,
.site-light .hero-visual-frame,
.site-light .cta-video-frame,
.site-light .evidence-frame { background: var(--frame-bg); }
.site-light .media-frame:not(.dark) { background: #fff; }
.site-light .hero-video,
.site-light .meet-video,
.site-light .cta-video { background: var(--frame-bg); }

/* Dark product screenshots are intentional specimen plates on the light
   canvas — lift them with a soft shadow and a hairline border so they do
   not bleed into the white background. */
.site-light .media-frame,
.site-light .hero-visual-frame,
.site-light .cta-video-frame,
.site-light .evidence-frame,
.site-light .terminal-capture {
  border-color: var(--rule-2);
  outline-color: var(--rule);
  box-shadow: 0 12px 40px rgba(20, 18, 14, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.site-light .media-frame:hover,
.site-light .hero-visual-frame:hover,
.site-light .cta-video-frame:hover,
.site-light .evidence-frame:hover,
.site-light .terminal-capture:hover {
  outline-color: var(--tick);
  box-shadow: 0 18px 60px rgba(20, 18, 14, 0.12), 0 0 0 1px rgba(67, 56, 202, 0.12);
}

.site-light .terminal-capture { background: #1a1a1a; }
.site-light .terminal-bar { background: rgba(0, 0, 0, 0.1); }

/* cream-yellow surfaces for the warm light mode */
.site-light .testimonial { background: var(--color-surface); border-color: var(--color-border); }
.site-light .testimonial:hover { background: var(--color-surface-2); border-color: rgba(67, 56, 202, 0.25); box-shadow: 0 0 0 1px rgba(67,56,202,0.18), 0 8px 24px rgba(0,0,0,0.06); }
.site-light .testimonial-author { border-color: var(--color-border); }
.site-light .testimonial-avatar { background: rgba(67, 56, 202, 0.1); border-color: rgba(67, 56, 202, 0.25); color: #4338ca; }

/* nav sign-in → solid indigo on white (white text was unreadable on cobalt tint) */
.site-light nav a.signin { color: #fff; background: var(--color-primary); border-color: var(--color-primary); border-radius: var(--editorial-radius); }
.site-light nav a.signin:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }

/* primary button hover + theme-toggle + cmd → indigo (main.css hardcodes cobalt/bone-green) */
.site-light .btn.primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.site-light .theme-toggle:hover { background: rgba(67, 56, 202, 0.08); }
.site-light .cmd { color: #4338ca; background: var(--color-surface); border-color: rgba(67, 56, 202, 0.2); }
.site-light .cmd::after { background: #4338ca; }

/* back-to-top → indigo in light */
.site-light .back-to-top { background: rgba(67,56,202,0.12); border-color: rgba(67,56,202,0.4); color: var(--color-primary); }
.site-light .back-to-top:hover { background: rgba(67,56,202,0.22); border-color: rgba(67,56,202,0.7); }

/* feedback CTA + modal fields → indigo in light */
.site-light .feedback-modal { background: var(--color-surface); }   /* cream, not forced white */
.site-light .feedback-cta { background: rgba(67,56,202,0.06); border-color: rgba(67,56,202,0.2); color: var(--color-primary); }
.site-light .feedback-cta:hover { background: rgba(67,56,202,0.12); border-color: rgba(67,56,202,0.4); box-shadow: 0 0 20px rgba(67,56,202,0.12); }
.site-light .fb-field input:focus,
.site-light .fb-field textarea:focus { box-shadow: 0 0 0 3px rgba(67,56,202,0.14); }

.site-light .metric-divider { background: var(--rule-2); }

.site-light .workflow-number { color: rgba(67, 56, 202, 0.22); }
.site-light .workflow-number::after { background: linear-gradient(90deg, rgba(67, 56, 202, 0.4), transparent); }
.site-light .workflow-detail li::before { color: var(--accent-2); }

.site-light .evidence-rune { color: var(--accent-2); opacity: 0.9; }

.site-light .film-play {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.18);
}
.site-light .film-play:hover { background: rgba(0, 0, 0, 0.1); border-color: rgba(0, 0, 0, 0.28); }
.site-light .film-play svg { fill: #1a1a1a; }

.site-light .section-divider { background: var(--rule); }
.site-light .section-divider::after { background: var(--color-bg); color: var(--accent); }

.site-light .kicker { color: var(--accent-2); }
.site-light .editorial-header::before { color: var(--ghost-num); }

/* === Responsive === */
@media (max-width: 768px) {
  .metrics-strip { flex-wrap: wrap; gap: 36px; }
  .metric-divider { display: none; }
  .workflow-chapter { padding: 52px 0; }
  .editorial-section { padding: 84px 0; }
  .cta-section { padding: 84px 0; }
  .editorial-header { margin-bottom: 52px; }
  /* ghost numeral gets in the way on narrow screens */
  .editorial-header::before { font-size: clamp(48px, 16vw, 72px); top: -4px; }
}
@media (max-width: 480px) {
  .editorial-header h2 { font-size: clamp(28px, 7vw, 36px); letter-spacing: -0.6px; }
  .editorial-content h2 { font-size: clamp(24px, 6vw, 30px); }
  .editorial-content h3 { font-size: clamp(21px, 5vw, 26px); }
  .hero-headline { font-size: clamp(34px, 9vw, 50px); letter-spacing: -0.9px; }
}

/* === Reduced Motion === */
/* === Coverflow Carousel (vanilla port of the Originkit component) === */
.coverflow {
  --cf-stage: #0b0b10;
  --cf-slide-bg: #121218;
  --cf-shadow-active: 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--accent-2, #818cf8), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  --cf-shadow-rest: 0 14px 40px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  --cf-scrim: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.12) 55%, transparent 100%);
  --cf-caption: rgba(247, 248, 248, 0.72);
  --cf-dot: rgba(255, 255, 255, 0.22);
  --cf-dot-hover: rgba(255, 255, 255, 0.5);
  --cf-nav-bg: #fff;
  --cf-nav-fg: #050507;
  --cf-nav-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);

  position: relative;
  width: 100%;
  height: clamp(280px, 50vw, 400px);
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--editorial-radius);
  touch-action: pan-y;
  outline: none;
}
.coverflow:focus-visible { outline: 2px solid var(--accent-2, #818cf8); outline-offset: 2px; }
/* No-JS fallback: show the first slide as a static full card. */
.coverflow .cf-slide:first-child { width: 100%; height: 100%; opacity: 1; }
/* Showcase variant — full-bleed, page-level stage. */
.coverflow.showcase { height: clamp(400px, 62vh, 560px); }
.showcase-section .editorial-header { margin-bottom: 56px; }
.coverflow .cf-slide {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  opacity: 0;
  display: block;
  overflow: hidden;
  border-radius: var(--editorial-radius);
  background-color: transparent;
  background-size: cover;
  background-position: center;
  box-shadow: var(--cf-shadow-rest), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transform: translate(-50%, -50%);
  will-change: transform, opacity, width, height;
}
.cf-prev,
.cf-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  border: none;
  background: var(--cf-nav-bg);
  color: var(--cf-nav-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 2000;
  box-shadow: var(--cf-nav-shadow);
  -webkit-tap-highlight-color: transparent;
}
.cf-prev { left: 12px; }
.cf-next { right: 12px; }
.cf-prev:focus-visible,
.cf-next:focus-visible {
  outline: 2px solid var(--accent-2, #818cf8);
  outline-offset: 2px;
}
.cf-prev svg,
.cf-next svg { width: 42%; height: 42%; }

/* Bottom scrim — legibility for caption + dots over the active card.
   Captions are off; scrim disabled, dots remain. */
.coverflow::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 130px;
  background: var(--cf-scrim);
  pointer-events: none;
  z-index: 1500;
  display: none;
}

/* Caption + dots bar. */
.cf-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  z-index: 2000;
}
.cf-caption {
  font: 500 12px/1.4 var(--mono);
  color: var(--cf-caption);
  letter-spacing: 0.02em;
  text-align: center;
  max-width: 78%;
  text-wrap: balance;
  display: none;
}
.cf-dots { display: flex; gap: 8px; }
.cf-dot {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  border: none;
  padding: 0;
  background: var(--cf-dot);
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.cf-dot:hover { background: var(--cf-dot-hover); }
.cf-dot.is-active { background: var(--accent-2, #818cf8); transform: scale(1.2); }
.cf-dot:focus-visible { outline: 2px solid var(--accent-2, #818cf8); outline-offset: 3px; }

/* — Light mode: no black stage / black chrome — */
.site-light .coverflow {
  --cf-stage: #f0ebe3;
  --cf-slide-bg: #e6e0d6;
  --cf-shadow-active: 0 18px 48px rgba(20, 18, 14, 0.14), 0 0 0 1px var(--accent-2, #4338ca), inset 0 0 0 1px rgba(255, 255, 255, 0.85);
  --cf-shadow-rest: 0 10px 28px rgba(20, 18, 14, 0.1), inset 0 0 0 1px rgba(20, 18, 14, 0.06);
  --cf-scrim: linear-gradient(to top, rgba(240, 235, 227, 0.96) 0%, rgba(240, 235, 227, 0.55) 50%, transparent 100%);
  --cf-caption: #5c5650;
  --cf-dot: rgba(20, 18, 14, 0.2);
  --cf-dot-hover: rgba(20, 18, 14, 0.4);
  --cf-nav-bg: #ffffff;
  --cf-nav-fg: #141414;
  --cf-nav-shadow: 0 6px 18px rgba(20, 18, 14, 0.12);
  border-color: rgba(20, 18, 14, 0.08);
  background: var(--cf-stage);
}
@media (prefers-reduced-motion: reduce) {
  .cf-dot { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .media-frame img,
  .media-frame .workflow-screenshot { transition: none; }
  .hero-headline { transition: none; animation: none; }
  .section-divider { opacity: 1; transform: none; transition: none; }
  .hero-visual-frame,
  .cta-video-frame,
  .media-frame,
  .evidence-frame { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   PAGE DECK — progressively enhanced coverflow carousel.
   The home page is a normal vertical marketing page by default.
   page-deck.js upgrades it into a 3-screen horizontal deck on
   desktop browsers that have motion enabled. No-JS, reduced-motion,
   and narrow viewports keep the reliable vertical scroll experience.
   ═══════════════════════════════════════════════════════════════ */
:root { --nav-h: 68px; }

/* ── Default (vertical fallback) ── */
.deck {
  position: relative;
  background: var(--color-bg, #050507);
}
.deck-track { position: relative; }
.deck-page {
  position: relative;
  width: 100%;
  background: var(--color-bg, #050507);
}


/* Between-section dividers are visible in the vertical page. */
.deck-page .section-divider { display: block; }