/* aem-eds-kit landing - tokens + class-based styles (handoff fidelity) */

:root {
  --ink: #0d0d0c;
  --surface: #161614;
  --line: #2a2a27;
  --paper: #ecebe6;
  --text-2: #b4b2aa;
  --muted: #9a9890;
  --accent: #ff5a36;
  --glow: 0 40px 80px -40px rgba(255, 90, 54, 0.18);
  --sans: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

a { color: var(--paper); text-decoration: none; }
a:hover { color: var(--accent); }
::selection { background: var(--accent); color: var(--ink); }
code { font-family: var(--mono); }
.accent { color: var(--accent); }
.dim { opacity: 0.6; }
.paper { color: var(--paper); }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ── Nav ─────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: rgba(13, 13, 12, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.lockup { display: flex; align-items: center; gap: 10px; }
.lockup:hover { color: var(--paper); }
.mark {
  width: 28px; height: 28px; border-radius: 7px; background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--ink);
  letter-spacing: -0.06em; flex: none;
}
.mark-lg { width: 64px; height: 64px; border-radius: 15px; font-size: 28px; }
.wordmark { font-family: var(--mono); font-size: 16px; font-weight: 500; letter-spacing: -0.03em; }
/* Logo hover: the >_ tile flips in 3D, the prompt nudges forward, the
   underscore becomes a blinking cursor and a warm sweep (the CLI logo's
   gradient) runs across the wordmark. */
.lockup { perspective: 200px; }
.mark { transition: box-shadow .3s ease; }
.mark-gt, .mark-cur { display: inline-block; }
.wordmark { background: linear-gradient(90deg, var(--paper) 0 40%, #ff3b1e 46%, #ff5a36 50%, #ff7d52 54%, var(--paper) 60% 100%) 100% 0 / 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.lockup:hover .mark, .lockup:focus-visible .mark { animation: mark-flip .7s cubic-bezier(.3, 1.4, .5, 1); box-shadow: 0 0 22px -2px rgba(255, 90, 54, .55); }
.lockup:hover .mark-gt, .lockup:focus-visible .mark-gt { animation: mark-nudge .7s ease .45s; }
.lockup:hover .mark-cur, .lockup:focus-visible .mark-cur { animation: blink 1s steps(1) .7s infinite; }
.lockup:hover .wordmark, .lockup:focus-visible .wordmark { animation: word-sweep .9s ease-out .15s both; }
@keyframes mark-flip { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
@keyframes mark-nudge { 0%, 100% { transform: translateX(0); } 40% { transform: translateX(2px); } }
@keyframes word-sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .lockup:hover .mark, .lockup:hover .mark-gt, .lockup:hover .mark-cur, .lockup:hover .wordmark,
  .lockup:focus-visible .mark, .lockup:focus-visible .mark-gt, .lockup:focus-visible .mark-cur, .lockup:focus-visible .wordmark { animation: none; }
}
.nav-links { display: flex; gap: 24px; font-size: 14px; flex: 1; flex-wrap: wrap; }
.nav-links a { color: var(--muted); }
.nav-actions { display: flex; gap: 10px; align-items: center; }
.btn { font-size: 14px; padding: 8px 14px; border-radius: 8px; }
.btn-outline { border: 1px solid var(--line); }
.btn-accent { background: var(--accent); color: var(--ink); font-weight: 600; }
.btn-accent:hover { color: var(--ink); opacity: 0.92; }

/* ── Hero ────────────────────────────────────────────── */
.hero {
  padding: 96px 24px 72px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 56px; align-items: start;
}
.hero-text { display: flex; flex-direction: column; gap: 28px; }
.hero-meta { margin: 0; font-family: var(--mono); font-size: 13px; color: var(--muted); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pill { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; }
.h1 { margin: 0; font-size: clamp(40px, 6vw, 72px); font-weight: 600; letter-spacing: -0.05em; line-height: 0.95; }
/* Typewriter headline: an invisible copy (text + cursor) holds the final
   width so nothing shifts while the visible copy types over it (main.js). */
.typewriter { position: relative; display: inline-block; white-space: nowrap; }
.tw-ghost { visibility: hidden; }
.tw-typed { position: absolute; left: 0; top: 0; }
/* The terminal's block cursor stands in for the full stop. */
.tw-caret { display: inline-block; width: .5em; height: .74em; margin-left: .14em; vertical-align: -.02em; background: var(--accent); animation: blink 1s steps(1) infinite; }
.tw-caret.is-typing { animation: none; }
@media (prefers-reduced-motion: reduce) { .tw-caret { animation: none; } }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lead { margin: 0; font-size: 19px; line-height: 1.55; color: var(--text-2); max-width: 520px; text-wrap: pretty; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.copy-btn {
  display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 15px;
  padding: 14px 18px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; color: var(--paper); cursor: pointer; transition: border-color 0.15s;
}
.copy-btn:hover { border-color: var(--accent); }
.copy-label { font-size: 12px; color: var(--muted); padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; }
.copy-btn-accent { background: var(--accent); border: 0; color: var(--ink); font-size: 16px; padding: 16px 22px; font-weight: 500; }
.copy-btn-accent .copy-label { color: var(--ink); border-color: rgba(13, 13, 12, 0.3); }
.copy-btn-accent:hover { opacity: 0.92; }
.text-link { font-size: 15px; padding: 14px 18px; }
/* Agent setup prompt (copy-paste into an AI agent). */
.agent-setup { margin-top: 36px; border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; background: var(--surface); display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; }
.agent-setup-text { display: flex; flex-direction: column; gap: 6px; flex: 1 1 360px; }
.agent-prompt[hidden] { display: none; }

/* ── Terminal ────────────────────────────────────────
      Mirrors the CLI's palette (src/lib/ui.ts): accent #ff5a36, inquirer
      cyan answers, ora's green tick, the red heading bar, Figma purple. */
.terminal { background: #0f0f0e; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 50px 100px -40px rgba(255, 90, 54, .22), 0 0 0 1px rgba(255, 255, 255, .02) inset; }
.term-bar { position: relative; display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #181816; border-bottom: 1px solid var(--line); }
.term-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.term-dot:nth-child(1) { background: #ff5f57; }
.term-dot:nth-child(2) { background: #febc2e; }
.term-dot:nth-child(3) { background: #28c840; }
.term-title { position: absolute; left: 0; right: 0; text-align: center; pointer-events: none; font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 80px; }
.term-title b { color: var(--text-2); font-weight: 500; }
/* Fixed height so the streaming log never grows/shrinks the page (no layout
   shift as the animation loops); older output scrolls off the top. */
.term-body { padding: 18px 22px 22px; font-family: var(--mono); font-size: 13px; line-height: 1.6; height: 560px; overflow: hidden; color: var(--paper); }
.tl { white-space: pre-wrap; word-break: break-word; min-height: 1.6em; }
.t-b { font-weight: 700; }
.t-dim { color: #8a887f; }
.t-acc { color: var(--accent); }
.t-accb { color: var(--accent); font-weight: 700; }
.t-cyan { color: #4fc3d9; }
.t-ok { color: #3fc46a; }
.t-pass { color: #2d9d78; }
.t-warn { color: #e5c07b; }
.t-red { color: #fa0f00; }
.t-figma { color: #a259ff; }
.t-mark { background: var(--accent); color: var(--ink); font-weight: 700; border-radius: 3px; }
.t-dots { color: var(--accent); }
.tl:has(.t-art) { line-height: 1.02; min-height: 0; }
/* The CLI paints the art column-by-column along this warm sweep. */
.t-art { font-weight: 700; letter-spacing: -0.04em; background: linear-gradient(90deg, #ff3b1e, #ff5a36 7ch, #ff7d52 19ch); -webkit-background-clip: text; background-clip: text; color: transparent; }
.t-cursor { display: inline-block; width: .6em; background: var(--paper); animation: blink 1s steps(1) infinite; }
@media (width <= 520px) {
  .term-body { font-size: 11.5px; padding: 14px 14px 18px; height: 520px; }
  .term-title { padding: 0 64px 0 72px; }
}
@media (prefers-reduced-motion: reduce) { .t-cursor { animation: none; } }
@keyframes blink { 50% { opacity: 0; } }

/* ── Hero 3D stack ───────────────────────────────────
      The finished page; the CSS, JS, UE model and design frame rise out of
      it, then vanish one by one and the loop restarts. --s3-k is the
      explode factor (0 = page). The page sits a hair above z=0, so layers
      at rest tuck in under it. */
@property --s3-k { syntax: '<number>'; inherits: true; initial-value: 1; }
.stage3d { --s3-gap: 54px; --s3-scale: 1; --s3-dur: 10s; position: relative; height: 640px; perspective: 1500px; perspective-origin: 50% 40%; align-self: center; overflow: clip; }
.s3-stack { position: absolute; inset: 0; transform-style: preserve-3d; }
.s3-stack { transform: rotateX(56deg) rotateZ(-36deg) translateZ(-110px) scale(var(--s3-scale)); animation: s3-assemble var(--s3-dur) cubic-bezier(.65, 0, .35, 1) infinite; }
.s3-floor {
  position: absolute; left: calc(50% - 380px); top: calc(50% - 380px); width: 760px; height: 760px; transform: translateZ(-30px);
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 68%); mask-image: radial-gradient(circle, #000 0%, transparent 68%);
}
.s3-plate {
  position: absolute; left: calc(50% - 200px); top: calc(50% - 140px); width: 400px; height: 280px; border-radius: 12px;
  transform: translateZ(calc(var(--i) * var(--s3-gap) * var(--s3-k)));
}
.s3-label { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-bottom: 6px; }
.s3-bar { display: block; height: 6px; border-radius: 3px; background: #c9c7bf; flex: none; }
.s3-bar-dark { background: var(--line); }

/* The finished page: nav, hero block, card row. */
.s3-page { transform: translateZ(3px); background: var(--paper); color: var(--ink); padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); animation: s3-glow var(--s3-dur) cubic-bezier(.65, 0, .35, 1) infinite; }
.s3-page .s3-label { color: #6b6a64; margin: 0; }
.s3-page-nav { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid #d8d6ce; }
.s3-page-logo { width: 16px; height: 16px; border-radius: 4px; background: var(--accent); margin-right: 6px; }
.s3-page-pill { margin-left: auto; width: 44px; height: 16px; border-radius: 5px; background: var(--ink); }
.s3-page-hero { flex: 1; display: flex; gap: 16px; min-height: 0; }
.s3-page-copy { flex: 1; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.s3-page-title { font-size: 24px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.s3-page-btn { align-self: flex-start; margin-top: 2px; padding: 5px 12px; border-radius: 6px; background: var(--accent); font-size: 11px; font-weight: 600; }
.s3-page-img { width: 140px; border-radius: 6px; background: repeating-linear-gradient(135deg, #d8d6ce 0 8px, #e2e0d9 8px 16px); }
.s3-page-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; height: 46px; }
.s3-page-card { border-radius: 6px; background: #e2e0d9; border: 1px solid #d8d6ce; }

.s3-code { background: rgba(22, 22, 20, .96); border: 1px solid var(--line); padding: 16px 18px; font-family: var(--mono); font-size: 12px; line-height: 1.75; color: var(--text-2); white-space: nowrap; }
.s3-code .s3-label { font-size: 11px; }
.s3-caret { animation: blink 1s steps(1) infinite; }
.s3-frame { background: rgba(13, 13, 12, .55); border: 1.5px solid var(--accent); padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 0 60px -10px rgba(255, 90, 54, .35); }
.s3-frame-label { position: absolute; top: -22px; left: 0; font-family: var(--mono); font-size: 11px; color: var(--accent); white-space: nowrap; opacity: clamp(0, calc(var(--s3-k) * 6 - .2), 1); }
.s3-handle { position: absolute; width: 8px; height: 8px; background: var(--ink); border: 1.5px solid var(--accent); }
.s3-wire { display: block; height: 22px; border: 1px dashed var(--muted); border-radius: 3px; flex: none; }
.s3-frame-nav { height: 16px; }
.s3-wire-accent { border-color: var(--accent); border-radius: 4px; }
.s3-wire-img { width: 140px; height: auto; border-radius: 6px; }
.s3-wire-card { height: auto; border-radius: 6px; }
.s3-hint { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; text-align: center; font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* 0-8% page alone · 8-32% layers rise · then they vanish one by one, top
   first (frame 46%, model 52%, JS 58%, CSS 64%) · 72-76% snap back under
   the page while hidden · reappear unseen beneath it. */
@keyframes s3-assemble { 0%, 8% { --s3-k: 0; } 32%, 72% { --s3-k: 1; } 76%, 100% { --s3-k: 0; } }
@keyframes s3-v4 { 0%, 46% { opacity: 1; } 49%, 78% { opacity: 0; } 80%, 100% { opacity: 1; } }
@keyframes s3-v3 { 0%, 52% { opacity: 1; } 55%, 78% { opacity: 0; } 80%, 100% { opacity: 1; } }
@keyframes s3-v2 { 0%, 58% { opacity: 1; } 61%, 78% { opacity: 0; } 80%, 100% { opacity: 1; } }
@keyframes s3-v1 { 0%, 64% { opacity: 1; } 67%, 78% { opacity: 0; } 80%, 100% { opacity: 1; } }
.s3-v1, .s3-v2, .s3-v3, .s3-v4 { animation: var(--s3-dur) linear infinite; }
.s3-v1 { animation-name: s3-v1; }
.s3-v2 { animation-name: s3-v2; }
.s3-v3 { animation-name: s3-v3; }
.s3-v4 { animation-name: s3-v4; }
@keyframes s3-glow {
  0%, 6%, 76%, 100% { box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 0 1.5px var(--accent), 0 0 70px -6px rgba(255, 90, 54, .45); }
  16%, 66% { box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); }
}
@media (width <= 520px) {
  .stage3d { --s3-scale: .7; --s3-gap: 44px; height: 460px; }
}
@media (prefers-reduced-motion: reduce) {
  .s3-stack, .s3-page, .s3-caret, .s3-v1, .s3-v2, .s3-v3, .s3-v4 { animation: none; }
  .s3-stack { --s3-k: 1; }
}

/* ── Terminal band (moved out of the hero) ───────────── */
.terminal-band { padding-top: 72px; padding-bottom: 8px; max-width: 860px; }

/* ── Facts strip ─────────────────────────────────────── */
.facts-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.fact { padding: 28px 0; display: flex; flex-direction: column; gap: 4px; }
.fact-value { font-size: 28px; font-weight: 600; letter-spacing: -0.03em; }
.fact-label { font-size: 14px; color: var(--muted); }

/* ── Section tones ───────────────────────────────────
      Alternating grounds so neighbouring sections read apart. The tone runs
      edge to edge even on max-width (.container) sections: a spread shadow
      paints the sides, clip-path trims it vertically. */
:root {
  --tone-raised: #141412;
  --tone-deep: #090908;
  --tone-warm: #16110e;
}
.tone { background: var(--tone); box-shadow: 0 0 0 100vmax var(--tone); clip-path: inset(0 -100vmax); }
.tone-raised { --tone: var(--tone-raised); }
.tone-deep { --tone: var(--tone-deep); }
.tone-warm { --tone: var(--tone-warm); }
/* The closing CTA gets a low accent glow behind the cube. */
.cta-band { background: radial-gradient(60% 70% at 50% 30%, rgba(255, 90, 54, .09), transparent 70%), var(--tone); }

/* ── Sections ────────────────────────────────────────── */
.section { padding: 112px 24px; display: flex; flex-direction: column; gap: 48px; }
.section-bordered { border-top: 1px solid var(--line); }
.section-2col { padding: 112px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 56px; }
.section-header { display: flex; flex-direction: column; gap: 14px; max-width: 680px; }
.eyebrow { font-family: var(--mono); font-size: 13px; color: var(--accent); }
.h2 { margin: 0; font-size: clamp(34px, 4.5vw, 52px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; }
.intro { margin: 0; font-size: 17px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }

/* ── How it works ────────────────────────────────────── */
.how-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; align-items: stretch; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.card-accent { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.card-step { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.card-accent .card-step { color: var(--ink); }
.card-title { font-family: var(--mono); font-size: 20px; font-weight: 500; }
.card-desc { font-size: 14px; color: var(--text-2); line-height: 1.5; }
.card-mono { font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: var(--text-2); }
.card-accent .card-mono { color: var(--ink); }
/* 3D stage: the four steps sit on a tilted plane; a packet runs the
   pipeline and the picked card lifts (main.js toggles aria-pressed). */
.how-stage { perspective: 1800px; perspective-origin: 50% 0%; padding: 40px 24px 24px; margin: -40px -24px 0; overflow: clip; }
.how-plane { position: relative; transform-style: preserve-3d; transform: rotateX(24deg); transform-origin: 50% 100%; }
.how-plane::before {
  content: ""; position: absolute; inset: -40px -60px; transform: translateZ(-2px); pointer-events: none;
  background-image: linear-gradient(#1f1f1d 1px, transparent 1px), linear-gradient(90deg, #1f1f1d 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse, #000 30%, transparent 75%);
}
.how-track { position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; transform: translateZ(-1px); background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px); }
.how-packet { position: absolute; top: -5px; left: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 18px 4px rgba(255, 90, 54, .4); animation: how-travel 4.5s cubic-bezier(.6, 0, .4, 1) infinite; }
@keyframes how-travel { 0% { left: 0%; opacity: 0; } 6%, 94% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.how-cards { position: relative; transform-style: preserve-3d; gap: 24px; }
button.card { font: inherit; color: inherit; text-align: left; align-items: flex-start; cursor: pointer; min-height: 220px; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .8); transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .2s, box-shadow .35s; }
button.card:hover { transform: translateZ(14px); border-color: rgba(255, 90, 54, .5); }
button.card[aria-pressed="true"] { transform: translateZ(36px); border-color: var(--accent); box-shadow: 0 40px 48px -24px rgba(0, 0, 0, .9), 0 0 50px -12px rgba(255, 90, 54, .4); }
button.card:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; }
@media (width <= 900px) {
  .how-track { display: none; }
  .how-plane { transform: rotateX(14deg); }
}
@media (prefers-reduced-motion: reduce) {
  .how-packet { animation: none; display: none; }
  button.card { transition: none; }
}
.conventions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr)); gap: 12px; counter-reset: conv; }
.conv { position: relative; background: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 6px; transition: border-color .15s ease, transform .15s ease; }
.conv:hover { border-color: rgba(255, 90, 54, .5); transform: translateY(-2px); }
.conv::before { counter-increment: conv; content: counter(conv, decimal-leading-zero); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--accent); }
.conv-title { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.conv-title::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.conv-desc { font-size: 14px; color: var(--muted); line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .conv:hover { transform: none; } }

/* ── Commands ────────────────────────────────────────── */
.cmd-table { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.cmd-row { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cmd-name { font-family: var(--mono); font-size: 14px; }
.cmd-desc { font-size: 15px; color: var(--text-2); }

/* ── Audits ──────────────────────────────────────────── */
.audit-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.audit-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.audit-cmd { font-family: var(--mono); font-size: 18px; }
.audit-sub { font-size: 15px; color: var(--text-2); }
.checks { display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.45; }
.check { display: flex; gap: 10px; }
.tick { color: var(--accent); flex: none; }

/* ── Compare ─────────────────────────────────────────── */
.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 16px; }
.compare-card { border: 1px solid var(--line); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.compare-card-accent { border-color: var(--accent); }
.compare-name { font-family: var(--mono); font-size: 16px; color: var(--muted); }
.compare-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.compare-desc { font-size: 15px; color: var(--muted); line-height: 1.6; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--mono); font-size: 13px; }
.chip { padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; }

/* ── Quick start ─────────────────────────────────────── */
.quickstart-band { background: var(--surface); }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.step { display: flex; flex-direction: column; gap: 14px; }
.step-label { font-size: 15px; color: var(--muted); }
.code-box { font-family: var(--mono); font-size: 14px; padding: 18px; background: var(--ink); border: 1px solid var(--line); border-radius: 10px; }
.code-wrap { word-break: break-all; }
.note { margin: 0; font-size: 14px; color: var(--muted); }

/* ── Roadmap ─────────────────────────────────────────── */
.roadmap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); border-top: 1px solid var(--line); }
.road-col { padding: 28px 28px 0 0; display: flex; flex-direction: column; gap: 14px; }
.road-ver { font-family: var(--mono); font-size: 20px; font-weight: 600; color: var(--accent); }
.road-desc { font-size: 15px; color: var(--text-2); line-height: 1.6; }

/* ── FAQ ─────────────────────────────────────────────── */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; display: flex; justify-content: space-between; gap: 16px; padding: 22px 0; background: none; border: 0; color: var(--paper); font: 500 18px var(--sans); text-align: left; cursor: pointer; }
.faq-sign { font-family: var(--mono); color: var(--accent); }
.faq-a { overflow: hidden; }
.faq-a p { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.faq-q[aria-expanded="false"] + .faq-a { display: none; }

/* ── Final CTA ───────────────────────────────────────── */
.final-cta { padding: 96px 24px 128px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; }
.h2-cta { font-size: clamp(40px, 6vw, 72px); letter-spacing: -0.045em; line-height: 0.98; }

/* Rotating mark cube */
.cube-stage { --cube: 140px; --cube-dur: 12s; position: relative; width: 300px; height: 240px; perspective: 900px; }
.cube-orbit { position: absolute; left: 10px; top: 20px; width: 280px; height: 280px; border-radius: 50%; border: 1px dashed var(--line); transform-style: preserve-3d; animation: cube-orbit calc(var(--cube-dur) * 1.6) linear infinite; }
.cube-moon { position: absolute; top: -5px; left: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 16px 3px rgba(255, 90, 54, .35); }
.cube-moon-b { top: auto; bottom: -4px; left: calc(50% - 4px); width: 8px; height: 8px; background: var(--paper); box-shadow: none; }
.cube { position: absolute; left: calc(50% - var(--cube) / 2); top: calc(50% - var(--cube) / 2); width: var(--cube); height: var(--cube); transform-style: preserve-3d; animation: cube-spin var(--cube-dur) linear infinite; transform: rotateX(-24deg) rotateY(-30deg); }
.cube-face { position: absolute; inset: 0; border-radius: 22px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 700; letter-spacing: -0.06em; backface-visibility: hidden; background: var(--surface); border: 1px solid var(--line); color: var(--accent); font-size: 22px; }
.cube-front, .cube-back { background: var(--accent); border-color: var(--accent); color: var(--ink); font-size: 56px; }
.cube-front { transform: translateZ(calc(var(--cube) / 2)); }
.cube-back { transform: rotateY(180deg) translateZ(calc(var(--cube) / 2)); }
.cube-right { transform: rotateY(90deg) translateZ(calc(var(--cube) / 2)); }
.cube-left { transform: rotateY(-90deg) translateZ(calc(var(--cube) / 2)); }
.cube-top { transform: rotateX(90deg) translateZ(calc(var(--cube) / 2)); background: #1f1f1d; color: var(--muted); font-size: 18px; }
.cube-bottom { transform: rotateX(-90deg) translateZ(calc(var(--cube) / 2)); background: var(--ink); }
.cube-shadow { position: absolute; left: calc(50% - 90px); bottom: -6px; width: 180px; height: 24px; border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 90, 54, .35) 0%, transparent 70%); }
@keyframes cube-spin { from { transform: rotateX(-24deg) rotateY(0deg); } to { transform: rotateX(-24deg) rotateY(360deg); } }
@keyframes cube-orbit { from { transform: rotateX(72deg) rotateZ(0deg); } to { transform: rotateX(72deg) rotateZ(360deg); } }
@media (prefers-reduced-motion: reduce) { .cube, .cube-orbit { animation: none; } .cube-orbit { transform: rotateX(72deg); } }

/* ── Footer ──────────────────────────────────────────── */
.footer-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 28px; padding-bottom: 28px; font-size: 14px; color: var(--muted); }
.footer-mono { font-family: var(--mono); }
.footer-links { display: flex; gap: 20px; }
.footer-links a { color: var(--muted); }

/* ── Scroll offset for sticky nav ────────────────────── */
[id] { scroll-margin-top: 72px; }

/* ── Responsive ──────────────────────────────────────── */
@media (width <= 720px) {
  .nav-links { display: none; }
}
@media (width <= 520px) {
  .cmd-row { grid-template-columns: 1fr; gap: 6px; }
}

/* ── Reduced motion ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── Guide pages: base layout (wide container like the homepage,
      with a readable measure for prose) ────────────────── */
.guide { max-width: 1200px; margin: 0 auto; padding: 40px 24px 96px; }
.guide h1 { font-size: clamp(32px, 5vw, 48px); font-weight: 600; letter-spacing: -.035em; margin: 8px 0 18px; }
.guide h2 { font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin: 48px 0 14px; }
.guide h3 { font-size: 18px; font-weight: 600; margin: 28px 0 8px; }
.guide p, .guide li { color: var(--text-2); line-height: 1.7; }
.guide p { margin: 0 0 14px; }
.guide ul, .guide ol { margin: 0 0 16px; padding-left: 22px; }
.guide li { margin: 6px 0; }
.guide code { font-family: var(--mono); font-size: .92em; background: var(--ink); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; color: var(--paper); }
.guide pre { background: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; overflow-x: auto; font-family: var(--mono); font-size: 13.5px; line-height: 1.7; margin: 0 0 18px; }
.guide pre code { background: none; border: 0; padding: 0; }
.guide pre .c { color: var(--accent); }
.guide pre .d { color: var(--muted); }
.guide table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 0 0 18px; }
.guide td, .guide th { border-top: 1px solid var(--line); padding: 9px 12px 9px 0; text-align: left; color: var(--text-2); vertical-align: top; }
.guide th { color: var(--paper); font-weight: 600; }
.guide td:first-child, .guide th:first-child { color: var(--paper); font-weight: 600; }
.guide .lead { font-size: 19px; color: var(--paper); }
.guide .crumbs { font-family: var(--mono); font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.guide .crumbs a { color: var(--muted); }
/* keep long-form prose readable inside the wide container; rich
   components (cards, flow, tables, badges) still span full width */
.guide > p, .guide > ul, .guide > ol, .guide > pre, .guide .lead, .guide .crumbs { max-width: 860px; }

/* ── Guide pages: shared flair (eyebrow, gradient h1, badges,
      cards, flow diagram, callouts, mapped tables, step lists) ── */
.guide table.map td:first-child { font-family: var(--mono); }
.guide .eyebrow { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; }
.guide h1 .grad { background: linear-gradient(90deg, #ff3b1e, #ff5a36, #ff7d52); -webkit-background-clip: text; background-clip: text; color: transparent; }
.guide .badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 4px; }
.guide .badge { font-family: var(--mono); font-size: 12.5px; color: var(--text-2); background: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; }
.guide .badge .dot { color: var(--accent); margin-right: 5px; }

.guide .split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 20px; }
.guide .mcard { border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: rgba(255, 255, 255, .015); }
.guide .mcard h3 { margin: 0 0 10px; display: flex; align-items: center; gap: 10px; font-size: 16px; }
.guide .mcard .ic { width: 28px; height: 28px; border-radius: 8px; display: inline-grid; place-items: center; background: var(--ink); border: 1px solid var(--line); color: var(--accent); font-size: 15px; flex: none; }
.guide .mcard p { margin: 0 0 10px; font-size: 14px; }
.guide .mcard ul { margin: 0; padding-left: 18px; font-size: 13.5px; }
.guide .mcard li { margin: 4px 0; }

.guide .flow { display: grid; grid-template-columns: 1fr auto 1.1fr auto 1fr; align-items: stretch; gap: 10px; margin: 8px 0 24px; }
.guide .flow .node { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--ink); }
.guide .flow .node .k { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 7px; }
.guide .flow .node .v { font-family: var(--mono); font-size: 12.5px; color: var(--paper); line-height: 1.6; }
.guide .flow .node.accent { border-color: rgba(255, 90, 54, .55); background: linear-gradient(180deg, rgba(255, 90, 54, .06), transparent); }
.guide .flow .arrow { display: grid; place-items: center; color: var(--accent); font-size: 18px; }

.guide table.map td.arrow { color: var(--accent); width: 1.6em; text-align: center; }
.guide table.map td:last-child { color: var(--paper); font-family: var(--mono); }

.guide ol.steps { list-style: none; padding: 0; margin: 0 0 18px; counter-reset: st; }
.guide ol.steps > li { position: relative; border: 1px solid var(--line); border-radius: 12px; padding: 13px 16px 14px 54px; margin: 0 0 10px; background: rgba(255, 255, 255, .012); }
.guide ol.steps > li::before { counter-increment: st; content: counter(st); position: absolute; left: 14px; top: 12px; width: 26px; height: 26px; border-radius: 8px; background: var(--accent); color: #0d0d0c; font-family: var(--mono); font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.guide ol.steps > li pre { margin: 10px 0 2px; }
.guide ol.steps.cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.guide ol.steps.cols > li { margin: 0; }
.guide ol.steps .st-title { display: block; font-weight: 600; color: var(--paper); }
.guide ol.steps .st-note { display: block; margin: 5px 0 0; font-size: 13px; color: var(--text-2); line-height: 1.55; }
@media (width <= 680px) { .guide ol.steps.cols { grid-template-columns: 1fr; } }

.guide .callout { display: flex; gap: 12px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; padding: 14px 16px; margin: 0 0 18px; background: rgba(255, 255, 255, .02); }
.guide .callout .ci { color: var(--accent); font-size: 15px; line-height: 1.5; flex: none; }
.guide .callout p { margin: 0; }
.guide .callout strong { color: var(--paper); }

.guide .faqs { display: grid; gap: 10px; }
.guide .faqs .fq { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: rgba(255, 255, 255, .012); }
.guide .faqs .fq h3 { margin: 0 0 6px; }
.guide .faqs .fq p { margin: 0; font-size: 14.5px; }

@media (width <= 640px) {
  .guide .split { grid-template-columns: 1fr; }
  .guide .flow { grid-template-columns: 1fr; }
  .guide .flow .arrow { transform: rotate(90deg); }
}

/* ── E2E test page: design vs generated screenshots ── */
.guide .split > .mcard { min-width: 0; }
.guide .e2e-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 20px; }
.guide .e2e-shots figure { margin: 0; display: grid; gap: 6px; align-content: start; min-width: 0; }
.guide .e2e-shots figcaption { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.guide .e2e-shots img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.guide .e2e-page .e2e-scroll { max-height: 720px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; }
.guide .e2e-page .e2e-scroll img { border: 0; border-radius: 0; }
.guide .e2e-block { border-top: 1px solid var(--line); padding-top: 6px; }
.guide .e2e-block h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.guide .e2e-diff { font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--muted); }
.guide .e2e-block p { max-width: 860px; }
@media (width <= 760px) {
  .guide .e2e-shots { grid-template-columns: 1fr; }
}

/* Phone widths: long inline code, flag tables and step lists wrap or scroll
   inside their own box instead of widening the page. */
.guide code, .doc-content code { overflow-wrap: anywhere; }
.guide li, .guide ol.steps > li { min-width: 0; overflow-wrap: anywhere; }
table.flags { display: block; max-width: 100%; overflow-x: auto; }
.guide .e2e-table { overflow-x: auto; margin: 0 0 18px; }
.guide .e2e-table table { margin: 0; }
.guide table.e2e-cases td:nth-child(3) code { white-space: nowrap; }
.guide table td.ok, .guide table.map td.ok:last-child { color: #4cc38a; font-family: var(--mono); }
.guide table td.bad, .guide table.map td.bad:last-child { color: #ff7a6b; font-family: var(--mono); }

/* ── Changelog page (generated from CHANGELOG.md) ── */
.guide .cl-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 8px; }
.guide .cl-toc a { font-family: var(--mono); font-size: 12.5px; color: var(--text-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; }
.guide .cl-toc a:hover { color: var(--accent); border-color: var(--accent); }
.guide .cl-version { border-top: 1px solid var(--line); margin-top: 36px; }
.guide .cl-version h2 { margin: 28px 0 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.guide .cl-version h2 a { color: var(--paper); }
.guide .cl-date { font-family: var(--mono); font-size: 13px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.guide .cl-version h3 { font-size: 13px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--accent); margin: 22px 0 8px; }
.guide .cl-version ul { max-width: 860px; }
.guide .cl-version li { overflow-wrap: anywhere; }
.guide .cl-version li a { color: var(--accent); }
.guide.changelog .lead a { color: var(--accent); }