/* site.css — the single stylesheet for the sysen.ai website, in the hero's
   design language. Light, precise, engineering-grade. Owns the design tokens,
   base reset, and shared chrome (nav, brand, buttons) for every page; each page
   keeps only its genuinely page-specific rules inline.
   Three SysML families echoed as accents: structure #2563EB, vmodel #B45718,
   behavior #0F8A6A. */

:root {
  /* core design tokens — the single source of truth for every page */
  --bg: #fafbfc;
  --bg-2: #f3f5f8;
  --ink: #11161f;
  --ink-2: #5b6573;
  --line: rgba(17, 22, 31, 0.09);
  --accent: #1e758d;
  --card-shadow: 0 1px 2px rgba(17,22,31,.05), 0 8px 24px rgba(17,22,31,.07);
  --font: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* SysML family accents + layout lane */
  --struct: #2563eb;
  --vmodel: #b45718;
  --behav:  #0f8a6a;
  --lane: 1180px;
}

/* ── base reset + typography (shared by every page) ──────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font); color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

/* ── scrollable layout overrides (the hero ships as a fixed stage) ──────── */
html, body { height: auto; }
body { overflow: visible; }
#hero {
  position: relative; inset: auto;
  height: 100vh; min-height: 680px;
  overflow: hidden;
}
/* On a phone 100vh is the URL-bar-hidden height, so the stage overshoots the
   screen and the first section never peeks; svh is the visible height. The
   680px desktop floor is also taller than a small phone outright. */
@media (max-width: 760px), (pointer: coarse) and (max-height: 540px) {
  #hero { height: 100svh; min-height: 480px; }
  #hero::before { height: 110px; }
}
/* landscape handset: ~400px of height to give, so the floor has to come off
   entirely or the hero pushes the first section a screen down */
@media (pointer: coarse) and (max-height: 540px) {
  #hero { min-height: 0; }
  .scroll-cue { display: none; }
}
/* clean the nav band: fade any corridor card that drifts up under the nav,
   sits above the cards (z≈88) but below the scrim (95), overlay (100) and nav (1000) */
#hero::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 156px;
  z-index: 92; pointer-events: none;
  background: linear-gradient(to bottom,
    var(--bg) 0%, rgba(250,251,252,.82) 28%, rgba(250,251,252,0) 100%);
}
main { position: relative; z-index: 1; background: transparent; }

/* whisper-thin precision grid behind the whole page — fixed so it reads as one
   continuous grid from the hero all the way down to the footer */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(17,22,31,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,22,31,.022) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* ── page nav: transparent over hero, solid once scrolled ───────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 40px;
  transition: background .28s ease, box-shadow .28s ease, border-color .28s ease, padding .28s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(250, 251, 252, .82);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
          backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(255,255,255,.6), 0 8px 30px rgba(17,22,31,.05);
  padding-top: 18px; padding-bottom: 18px;
}
.nav-links { display: flex; align-items: center; gap: 28px; color: var(--ink-2); font-size: 14.5px; font-weight: 500; }
.nav-links a { color: inherit; text-decoration: none; transition: color .15s ease; }
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--ink); }
.nav-links a.nav-cta {
  font-size: 14px; font-weight: 600; color: #fff; background: var(--ink);
  padding: 9px 16px; border-radius: 8px; box-shadow: 0 1px 2px rgba(17,22,31,.18);
}
.nav-links a.nav-cta:hover { color: #fff; }
.nav-links a.nav-login {
  font-size: 14px; font-weight: 600; color: var(--ink);
  padding: 9px 14px; border-radius: 8px; border: 1px solid var(--line);
  background: rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.nav-links a.nav-login:hover { color: var(--ink); border-color: var(--ink-2); background: #fff; }
.nav .nav-cta { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.nav .nav-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(17,22,31,.22); }

/* ── mobile menu: hamburger + drop-down drawer ───────────────────────────────
   Desktop ships neither; both switch on in the ≤760px block below, where the
   inline links (Login included) switch off. site.js toggles body.nav-open. */
.nav-toggle {
  display: none; width: 44px; height: 44px; flex: none; margin: -6px -10px -6px 0;
  padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer;
  align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle .bars,
.nav-toggle .bars::before,
.nav-toggle .bars::after {
  display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor;
}
.nav-toggle .bars { position: relative; transition: background .16s ease; }
.nav-toggle .bars::before, .nav-toggle .bars::after {
  content: ""; position: absolute; left: 0; transition: transform .22s cubic-bezier(.2,.7,.2,1);
}
.nav-toggle .bars::before { top: -7px; }
.nav-toggle .bars::after  { top: 7px; }
.nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
/* open: the bars cross into an ✕ */
body.nav-open .nav-toggle .bars { background: transparent; }
body.nav-open .nav-toggle .bars::before { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle .bars::after  { transform: translateY(-7px) rotate(-45deg); }

.nav-drawer, .nav-scrim { display: none; }

/* ── buttons (shared chrome) ─────────────────────────────────────────────── */
.btn {
  font-family: var(--font); font-size: 15px; font-weight: 600; cursor: pointer;
  padding: 13px 22px; border-radius: 10px; text-decoration: none; border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 9px;
}
.btn-primary { background: var(--ink); color: #fff; box-shadow: 0 1px 2px rgba(17,22,31,.2), 0 8px 22px rgba(17,22,31,.16); }
.btn-primary .arr { transition: transform .2s ease; }
.btn-primary:hover .arr { transform: translateX(3px); }
.btn-ghost { background: rgba(255,255,255,.7); color: var(--ink); border-color: var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* ── hero scroll cue ─────────────────────────────────────────────────────── */
.scroll-cue {
  position: absolute; z-index: 100; left: 50%; bottom: 30px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-2);
  pointer-events: none;
}
.scroll-cue .line {
  width: 1px; height: 34px;
  background: linear-gradient(var(--ink-2), transparent);
  position: relative; overflow: hidden;
}
.scroll-cue .line::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 12px;
  background: var(--accent); animation: cueRun 2.2s cubic-bezier(.6,0,.2,1) infinite;
}
@keyframes cueRun { 0% { transform: translateY(-14px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(34px); opacity: 0; } }

/* ── section scaffold ────────────────────────────────────────────────────── */
.section { padding: 132px 40px; position: relative; }
.lane { max-width: var(--lane); margin: 0 auto; }
.lane-narrow { max-width: 860px; }

.sec-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: .04em;
  color: var(--accent); margin-bottom: 22px;
}
.sec-label::before {
  content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--accent);
}
.sec-head {
  font-size: clamp(30px, 3.6vw, 50px); font-weight: 700; line-height: 1.04;
  letter-spacing: -0.025em; margin: 0; text-wrap: balance; max-width: 18ch;
}
.sec-lead {
  font-size: clamp(17px, 1.45vw, 20px); line-height: 1.6; color: var(--ink-2);
  margin: 22px 0 0; max-width: 60ch; text-wrap: pretty;
}
.sec-head + .sec-lead { margin-top: 24px; }

/* .gridwash sections inherit the continuous page grid (body::before) — no
   per-section wash needed; keep the lane above any section-local layers */
.gridwash > .lane { position: relative; z-index: 1; }

/* ── Vision: filing-cabinet vs living-memory compare ─────────────────────── */
.compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 54px;
}
.cmp {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 28px 28px 30px; box-shadow: var(--card-shadow); position: relative;
}
.cmp .kw {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .02em;
  color: var(--ink-2); margin-bottom: 14px;
}
.cmp .kw .dot { width: 7px; height: 7px; border-radius: 2px; background: currentColor; opacity: .7; }
.cmp h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 10px; }
.cmp p { font-size: 16px; line-height: 1.58; color: var(--ink-2); margin: 0; text-wrap: pretty; }
.cmp.is-stale { background: var(--bg-2); }
.cmp.is-stale .kw { color: #8a93a1; }
.cmp.is-live { border-left: 3px solid var(--accent); }
.cmp.is-live .kw { color: var(--accent); }
.cmp .tag {
  position: absolute; top: 24px; right: 26px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: #9aa3b0;
}
.cmp.is-live .tag { color: var(--accent); }

.signal {
  margin-top: 30px; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  font-family: var(--mono); font-size: 13px; color: var(--ink-2);
}
.signal b { color: var(--ink); font-weight: 500; }
.signal .std {
  color: var(--ink); background: #fff; border: 1px solid var(--line);
  padding: 3px 9px; border-radius: 6px; box-shadow: 0 1px 1px rgba(17,22,31,.04);
}
.signal-stack { margin-top: 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.signal-stack .signal { margin-top: 0; }
.signal-stack .signal b { min-width: 104px; }

/* ── translation primer (collapsible) ────────────────────────────────────── */
.primer { margin-top: 34px; max-width: 820px; }
.primer summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--accent);
  padding: 9px 14px; border: 1px solid rgba(15,138,106,.22); background: rgba(15,138,106,.07);
  border-radius: 999px; user-select: none;
}
.primer summary::-webkit-details-marker { display: none; }
.primer summary .chev { transition: transform .2s ease; font-size: 11px; }
.primer[open] summary .chev { transform: rotate(90deg); }
.primer summary:hover { background: rgba(15,138,106,.11); }
.primer-body {
  margin-top: 18px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: #fff; box-shadow: var(--card-shadow);
}
.primer-body .prow {
  display: grid; grid-template-columns: minmax(180px, 0.85fr) 1.4fr; gap: 0;
  border-top: 1px solid var(--line);
}
.primer-body .prow:first-child { border-top: 0; }
.primer-body .pl, .primer-body .pr { padding: 15px 22px; }
.primer-body .pl {
  font-family: var(--mono); font-size: 13px; color: var(--ink);
  border-right: 1px solid var(--line); background: var(--bg);
}
.primer-body .pr { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.primer-body .head .pl, .primer-body .head .pr {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: #9aa3b0; padding-top: 12px; padding-bottom: 12px; background: var(--bg-2);
}
code, .mono-inline {
  font-family: var(--mono); font-size: .9em; background: rgba(17,22,31,.05);
  border: 1px solid var(--line); padding: 1px 6px; border-radius: 5px; color: var(--ink);
}

/* ── inline next-step links ──────────────────────────────────────────────── */
.steplinks { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 14px 28px; }
.steplink {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.steplink .arr { color: var(--accent); position: relative; top: -2px; transition: transform .2s ease; animation: step-drift 1.8s ease-in-out infinite; }
.steplink:hover .arr { position: relative; top: -3px; animation: none; transform: translateX(6px) scale(1.25); }
@keyframes step-drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .steplink .arr { animation: none; } }

/* ── Platform: V-Model stepper ───────────────────────────────────────────── */
.vmodel { margin-top: 58px; }
.vsteps {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  position: relative;
}
.vstep { padding: 0 16px; position: relative; }
.vstep:first-child { padding-left: 0; }
.vstep:last-child { padding-right: 0; }
.vstep .node {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
}
.vstep .idx {
  font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink-2);
  width: 26px; height: 26px; flex: none; border-radius: 7px;
  display: grid; place-items: center; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 1px 1px rgba(17,22,31,.04);
}
.vstep .rail {
  flex: 1; height: 1px; background: var(--line); position: relative;
}
.vstep:last-child .rail { display: none; }
.vstep .rail::after {
  content: ""; position: absolute; right: -1px; top: -3px;
  border: 4px solid transparent; border-left-color: var(--line);
}
.vstep .kw {
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .06em;
  margin-bottom: 9px;
}
.vstep h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 8px; }
.vstep p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin: 0; text-wrap: pretty; }
.vstep[data-fam="s"] .idx { border-color: rgba(37,99,235,.4); color: var(--struct); }
.vstep[data-fam="v"] .idx { border-color: rgba(180,87,24,.4); color: var(--vmodel); }
.vstep[data-fam="b"] .idx { border-color: rgba(15,138,106,.4); color: var(--behav); }
.vstep[data-fam="s"] .kw { color: var(--struct); }
.vstep[data-fam="v"] .kw { color: var(--vmodel); }
.vstep[data-fam="b"] .kw { color: var(--behav); }
.vaside {
  margin-top: 40px; font-family: var(--mono); font-size: 13px; color: var(--ink-2);
  border-left: 2px solid var(--line); padding-left: 16px; max-width: 60ch; line-height: 1.6;
}

/* ── Differentiators grid ────────────────────────────────────────────────── */
.diffs {
  margin-top: 56px; display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  grid-template-columns: repeat(6, 1fr);
}
.diff { background: var(--bg); padding: 30px 28px 34px; position: relative; }
.diff:nth-child(1), .diff:nth-child(2), .diff:nth-child(3) { grid-column: span 2; }
.diff:nth-child(4), .diff:nth-child(5) { grid-column: span 3; }
/* four-card variant: balanced 2×2 (used on the vision page) */
.diffs.diffs-4 { grid-template-columns: repeat(2, 1fr); }
.diffs.diffs-4 .diff { grid-column: auto; }
.diff .n {
  font-family: var(--mono); font-size: 12px; color: var(--ink-2); margin-bottom: 16px;
  display: flex; align-items: center; gap: 9px;
}
.diff .n .dot { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.diff h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 11px; text-wrap: balance; }
.diff p { font-size: 15.5px; line-height: 1.56; color: var(--ink-2); margin: 0; text-wrap: pretty; }

/* ── Why now / Why us ─────────────────────────────────────────────────────── */
.twocol { margin-top: 54px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.pillar {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 34px 34px 36px; box-shadow: var(--card-shadow); border-top: 3px solid var(--accent);
}
.pillar .lbl {
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--accent);
  margin-bottom: 14px;
}
.pillar h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 14px; }
.pillar p { font-size: 16.5px; line-height: 1.6; color: var(--ink-2); margin: 0; text-wrap: pretty; }

/* ── brand wordmark (nav + footer) ───────────────────────────────────────── */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand .wordmark { height: 40px; width: auto; display: block; }
.foot .brand .wordmark { height: 40px; }

/* ── Founder ─────────────────────────────────────────────────────────────── */
.founder-grid {
  margin-top: 54px; display: grid; grid-template-columns: minmax(290px, 380px) 1fr;
  gap: 56px; align-items: center;
}
.founder-card {
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 14px; padding: 14px 14px 16px; box-shadow: var(--card-shadow);
}
.founder-card .fc-key {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 2px 4px 12px;
}
.founder-card .fc-key .kw {
  font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--accent);
}
.founder-card .fc-key .dot { width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }
.founder-card img {
  display: block; width: 100%; height: auto; border-radius: 8px; background: #fff;
}
.founder-card .fc-name {
  display: flex; flex-direction: column; gap: 3px; padding: 13px 6px 4px; margin-top: 12px;
  border-top: 1px solid var(--line); font-size: 19px; font-weight: 600; letter-spacing: -0.01em;
}
.founder-card .fc-name span {
  font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--ink-2); letter-spacing: 0;
}
.founder-card .fc-link {
  display: inline-flex; align-items: center; gap: 6px; margin: 4px 6px 0;
  font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--accent);
  text-decoration: none; transition: gap .2s ease;
}
.founder-card .fc-link:hover { gap: 10px; }
.founder-card .fc-link .arr { transition: transform .2s ease; }
.founder-card .fc-link:hover .arr { transform: translateX(2px); }
.founder-body blockquote {
  margin: 0; font-size: clamp(21px, 2.2vw, 30px); font-weight: 500; line-height: 1.36;
  letter-spacing: -0.018em; color: var(--ink); text-wrap: pretty; position: relative;
}
.founder-body blockquote .mk { color: var(--accent); }
.founder-body .founder-note {
  margin: 26px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-2);
  max-width: 56ch; text-wrap: pretty;
}

/* ── Category: dark band ─────────────────────────────────────────────────── */
.band-dark {
  background: var(--ink); color: #fff; position: relative; overflow: hidden;
}
.band-dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 90% at 30% 40%, #000 0%, transparent 75%);
          mask-image: radial-gradient(70% 90% at 30% 40%, #000 0%, transparent 75%);
}
.band-dark .lane { position: relative; z-index: 1; }
.band-dark .sec-label { color: var(--accent); }
.band-dark .sec-label::before { background: var(--accent); }
.bigquote {
  font-size: clamp(30px, 4.4vw, 60px); font-weight: 700; line-height: 1.06;
  letter-spacing: -0.03em; margin: 26px 0 0; text-wrap: balance; max-width: 20ch;
}
.bigquote em { font-style: normal; color: var(--accent); }
.band-dark .positioning {
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.62; color: rgba(255,255,255,.62);
  margin: 32px 0 0; max-width: 64ch; text-wrap: pretty;
}
.band-dark .positioning b { color: #fff; font-weight: 500; }

/* ── Category: teal band (variant of .band-dark) ─────────────────────────── */
.band-teal {
  background: var(--accent); color: #fff; position: relative; overflow: hidden;
}
.band-teal::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 90% at 30% 40%, #000 0%, transparent 75%);
          mask-image: radial-gradient(70% 90% at 30% 40%, #000 0%, transparent 75%);
}
.band-teal .lane { position: relative; z-index: 1; }
.band-teal .sec-label { color: #fff; }
.band-teal .sec-label::before { background: #fff; }
.band-teal .bigquote { color: #fff; }
.band-teal .bigquote em { color: var(--ink); }
.band-teal .positioning {
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.62; color: rgba(255,255,255,.86);
  margin: 32px 0 0; max-width: 64ch; text-wrap: pretty;
}
.band-teal .positioning b { color: var(--ink); font-weight: 600; }

/* ── CTA ──────────────────────────────────────────────────────────────────── */
#cta { text-align: center; padding: 130px 40px; }
#cta .sec-head { margin: 0 auto; max-width: 20ch; }
#cta .sec-lead { margin: 24px auto 0; max-width: 52ch; }
#cta .cta-row { margin-top: 36px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ── footer ───────────────────────────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--line); background: rgba(17,22,31,.025);
  padding: 54px 40px 60px;
}
.foot .lane { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.foot .brand { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; }
.foot .brand .mark {
  width: 22px; height: 22px; border-radius: 6px;
  background: linear-gradient(135deg, var(--struct), var(--behav));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); position: relative;
}
.foot .brand .mark::after {
  content: ""; position: absolute; inset: 5px;
  border: 1.5px solid rgba(255,255,255,.92); border-radius: 2px;
  clip-path: polygon(0 0, 50% 100%, 100% 0, 100% 22%, 50% 100%, 0 22%);
}
.foot .tag { margin-top: 14px; color: var(--ink-2); font-size: 14px; max-width: 36ch; line-height: 1.55; }
.foot .cols { display: flex; gap: 60px; flex-wrap: wrap; }
.foot .col h4 {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: #9aa3b0; margin: 0 0 14px; font-weight: 500;
}
.foot .col h4 a { display: inline; color: inherit; font-size: inherit; margin: 0; text-decoration: none; transition: color .15s ease; }
.foot .col h4 a:hover { color: var(--ink-2); }
.foot .col a { display: block; color: var(--ink-2); text-decoration: none; font-size: 14.5px; margin-bottom: 10px; }
.foot .col a:hover { color: var(--ink); }
.foot .legal {
  max-width: var(--lane); margin: 40px auto 0; padding-top: 22px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px; color: #9aa3b0;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

/* ── scroll reveal ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
  .reveal.in { opacity: 1; transform: none; }
  .reveal.d1 { transition-delay: .07s; }
  .reveal.d2 { transition-delay: .14s; }
  .reveal.d3 { transition-delay: .21s; }
  .reveal.d4 { transition-delay: .28s; }
}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 940px) {
  .section { padding: 92px 24px; }
  .compare { grid-template-columns: 1fr; }
  .founder-grid { grid-template-columns: 1fr; gap: 34px; max-width: 520px; }
  .vsteps { grid-template-columns: 1fr 1fr; gap: 30px 18px; }
  .vstep .rail { display: none; }
  .vstep { padding: 0; }
  .diffs { grid-template-columns: 1fr; }
  .diffs.diffs-4 { grid-template-columns: 1fr; }
  .diff:nth-child(n) { grid-column: auto; }
  .twocol { grid-template-columns: 1fr; }
  .foot .lane { flex-direction: column; }
}
/* ── mobile: the inline nav collapses into the hamburger drawer ───────────────
   Both arms mean "phone", because width alone does not: a handset on its side
   is ~850px wide but only ~400px tall, which clears a width-only breakpoint and
   puts the whole desktop nav — Login included — back on a phone. `pointer:
   coarse` says touch-primary, and the short viewport separates a handset from a
   tablet in landscape (820px+ tall), which has the room and keeps the inline
   nav. A browser without pointer-query support falls back to the width arm.
   Keep this list in sync with MOBILE_NAV in site.js. */
@media (max-width: 760px), (pointer: coarse) and (max-height: 540px) {
  :root { --navh: 58px; }

  .nav { padding: 13px 20px !important; gap: 12px; }
  /* the CTA and the hamburger group on the right, wordmark alone on the left */
  .nav .brand { margin-right: auto; }
  .brand .wordmark { height: 32px; }
  /* Login and the section links move into the drawer; the demo CTA stays put */
  .nav-links a:not(.nav-cta) { display: none; }
  .nav-links a.nav-cta { font-size: 13.5px; padding: 9px 15px; }
  .nav-toggle { display: inline-flex; }
  /* Drawer and scrim are children of the fixed nav, so they layer *inside* its
     stacking context — a positioned child would otherwise paint over the bar
     itself. Order within the nav: bar chrome (3) > drawer (2) > scrim (1). */
  .nav > .brand, .nav > .nav-links, .nav > .nav-toggle { position: relative; z-index: 3; }

  .nav-drawer {
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; right: 0; z-index: 2;
    padding: calc(var(--navh) + 8px) 20px 20px;
    background: rgba(250, 251, 252, .98);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
            backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 34px rgba(17,22,31,.10);
    transform: translateY(-100%); visibility: hidden;
    transition: transform .26s cubic-bezier(.2,.7,.2,1), visibility 0s linear .26s;
  }
  .nav-drawer a {
    display: flex; align-items: center; min-height: 52px; padding: 0 2px;
    color: var(--ink); text-decoration: none;
    font-size: 18px; font-weight: 600; letter-spacing: -0.012em;
    border-top: 1px solid var(--line);
  }
  .nav-drawer a:first-child { border-top: 0; }
  .nav-drawer a.active { color: var(--accent); }

  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 1;
    background: rgba(17,22,31,.42);
    opacity: 0; visibility: hidden;
    transition: opacity .26s ease, visibility 0s linear .26s;
  }

  body.nav-open { overflow: hidden; }
  body.nav-open .nav-drawer {
    transform: none; visibility: visible;
    transition: transform .26s cubic-bezier(.2,.7,.2,1), visibility 0s;
  }
  body.nav-open .nav-scrim {
    opacity: 1; visibility: visible;
    transition: opacity .26s ease, visibility 0s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-drawer, .nav-scrim, .nav-toggle .bars,
  .nav-toggle .bars::before, .nav-toggle .bars::after { transition-duration: .01ms; }
}

@media (max-width: 560px) {
  .section { padding: 72px 20px; }
  #cta { padding: 92px 20px; }
  .foot { padding: 44px 20px 52px; }
  .foot .lane { gap: 30px; }
  .foot .cols { gap: 26px 34px; }
  .vsteps { grid-template-columns: 1fr; }
  .primer-body .prow { grid-template-columns: 1fr; }
  .primer-body .pl { border-right: 0; border-bottom: 1px solid var(--line); }
  .primer-body .pl, .primer-body .pr { padding: 13px 17px; }
  /* card interiors: 26–34px of inset costs a third of a 360px screen */
  .cmp { padding: 22px 20px 24px; }
  .cmp .tag { position: static; display: block; margin-bottom: 6px; }
  .diff { padding: 24px 20px 26px; }
  .pillar { padding: 26px 22px 28px; }
  .gapcard { padding: 20px 20px 22px; }
  .signal-stack .signal b { min-width: 0; }
  /* 16px is the threshold below which iOS zooms the page on focus */
  .demo-form input, .demo-form select, .demo-form textarea { font-size: 16px; }
}

/* ════════════════════════════════════════════════════════════════════════
   SUBPAGES (vision.html, platform.html)
   These pages drop the animated hero and lead with a static page-head.
   They reuse .section / .lane / .sec-* / .compare / .signal / .band-dark /
   .pillar / .reveal / .foot from above; the rules below add what's unique.
   ════════════════════════════════════════════════════════════════════════ */

/* the subpage body has no fixed hero, so the nav sits over a light header —
   keep it solid from the very top for legibility */
body.subpage .nav {
  background: rgba(250, 251, 252, .82);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
          backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(255,255,255,.6), 0 8px 30px rgba(17,22,31,.05);
}

/* ── page header ─────────────────────────────────────────────────────────── */
.page-head {
  padding: 160px 40px 86px; position: relative; overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 130% at 50% -10%, #ffffff 0%, var(--bg) 52%, var(--bg-2) 100%);
}
.page-head .lane { position: relative; z-index: 1; max-width: var(--lane); }
.page-head .crumb {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: .02em;
  color: var(--accent); margin-bottom: 26px;
}
.page-head .crumb .arr { transition: transform .2s ease; }
.page-head .crumb:hover .arr { transform: translateX(-3px); }
.page-head h1 {
  font-size: clamp(38px, 5.2vw, 68px); font-weight: 700; line-height: 1.03;
  letter-spacing: -0.028em; margin: 0; text-wrap: balance; max-width: 16ch;
}
.page-head h1 em { font-style: normal; color: var(--accent); }
.page-head .lede {
  font-size: clamp(17px, 1.55vw, 21px); line-height: 1.56; color: var(--ink-2);
  margin: 26px 0 0; max-width: 60ch; text-wrap: pretty;
}
.page-head .head-cta { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ── Vision: problem cards + insight callout ─────────────────────────────── */
.probgrid {
  margin-top: 54px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.probcard {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 26px 26px 28px; box-shadow: var(--card-shadow);
  border-top: 3px solid var(--pc, var(--ink-2));
}
.probcard .lbl {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--pc, var(--ink-2)); margin-bottom: 12px; font-weight: 500;
}
.probcard h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 10px; }
.probcard p { font-size: 15px; line-height: 1.56; color: var(--ink-2); margin: 0; text-wrap: pretty; }
.probcard ul { margin: 10px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }

.insight {
  margin-top: 36px; background: #fff; border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 14px;
  padding: 30px 32px; box-shadow: var(--card-shadow); max-width: 880px;
}
.insight .q {
  font-size: clamp(21px, 2.3vw, 30px); font-weight: 600; line-height: 1.32;
  letter-spacing: -0.018em; margin: 0; color: var(--ink); text-wrap: pretty;
}
.insight .q em { font-style: normal; color: var(--accent); }
.insight p { margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 60ch; }

/* ── Platform: detailed lifecycle phases ─────────────────────────────────── */
.phaserail {
  margin-top: 56px; display: flex; flex-wrap: wrap; gap: 10px;
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-2);
}
.phaserail a {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  color: var(--ink); background: #fff; border: 1px solid var(--line);
  padding: 7px 13px; border-radius: 999px; box-shadow: 0 1px 1px rgba(17,22,31,.04);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.phaserail a:hover { transform: translateY(-1px); box-shadow: var(--card-shadow); border-color: var(--ph); }
.phaserail a .dot { width: 8px; height: 8px; border-radius: 2px; background: var(--ph); }

.phases { margin-top: 30px; display: grid; gap: 26px; }
.phase {
  --ph: var(--accent); scroll-margin-top: 96px;
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--ph);
  border-radius: 16px; box-shadow: var(--card-shadow); padding: 30px 32px 34px;
}
.phase.ph-define { --ph: var(--struct); }
.phase.ph-analyze { --ph: var(--vmodel); }
.phase.ph-verify { --ph: var(--behav); }
.phase.ph-sync   { --ph: var(--accent); }
.phase.ph-assure { --ph: #b4341e; }

.phase-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.phase .idx {
  font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ph);
  width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--ph) 8%, #fff); border: 1px solid color-mix(in srgb, var(--ph) 32%, transparent);
}
.phase .kw {
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; color: var(--ph);
}
.phase .phase-title { font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.phase .role {
  font-family: var(--mono); font-size: 12px; color: var(--ink-2);
  margin-left: auto; letter-spacing: .02em;
}
.phase .summary {
  margin: 16px 0 0; font-size: 16.5px; line-height: 1.58; color: var(--ink-2);
  max-width: 74ch; text-wrap: pretty;
}
.phase-grid {
  margin-top: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  padding-top: 24px; border-top: 1px solid var(--line);
}
.phase-grid h4 {
  font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: #9aa3b0; margin: 0 0 12px; font-weight: 500;
}
.phase-grid ul { margin: 0; padding-left: 18px; }
.phase-grid li { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin-bottom: 8px; text-wrap: pretty; }
.phase-grid li strong { color: var(--ink); font-weight: 600; }
.phase .callout {
  margin-top: 24px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2);
  background: color-mix(in srgb, var(--ph) 6%, #fff);
  border-left: 3px solid var(--ph); border-radius: 0 10px 10px 0; padding: 14px 18px;
}
.phase .callout strong { color: var(--ph); font-weight: 600; }
.phase .callout a { color: var(--ph); font-weight: 600; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--ph) 40%, transparent); }
.phase .callout a:hover { border-bottom-color: var(--ph); }
.phase .backtop {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 22px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .02em;
  color: var(--ph); text-decoration: none; opacity: .85;
  transition: opacity .15s ease, transform .15s ease;
}
.phase .backtop:hover { opacity: 1; transform: translateY(-1px); }

@media (max-width: 940px) {
  .page-head { padding: 132px 24px 64px; }
  .probgrid { grid-template-columns: 1fr; }
  .phase-grid { grid-template-columns: 1fr; gap: 18px; }
  .phase .role { margin-left: 0; width: 100%; }
}
@media (max-width: 560px) {
  /* the mobile nav is 58px tall, so the head needs far less top clearance */
  .page-head { padding: 104px 20px 48px; }
  .page-head h1 { font-size: clamp(31px, 8.6vw, 44px); max-width: none; }
  .page-head .crumb { margin-bottom: 18px; }
  .page-head .head-cta { gap: 10px; }
  .page-head .head-cta .btn { width: 100%; justify-content: center; }
  .probcard { padding: 22px 20px 24px; }
  .insight { padding: 24px 20px; }
  .phase { padding: 24px 20px 26px; }
  .stagerail-note, .vaside { padding-left: 12px; }
}

/* ── Book-a-demo modal (demo.js) ─────────────────────────────────────────── */
.demo-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(17, 22, 31, 0.5);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: demoFade .18s ease;
}
.demo-overlay[hidden] { display: none; }
@keyframes demoFade { from { opacity: 0; } to { opacity: 1; } }
body.demo-open { overflow: hidden; }

.demo-modal {
  position: relative;
  width: 100%; max-width: 520px;
  max-height: 90vh; overflow-y: auto;
  background: #fff; border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: var(--card-shadow);
  padding: 30px 30px 26px;
}
.demo-close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: 0; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--ink-2);
  transition: color .15s ease;
}
.demo-close:hover { color: var(--ink); }
.demo-head { font-size: 24px; font-weight: 700; margin: 0 28px 6px 0; color: var(--ink); }
.demo-sub { font-size: 14px; color: var(--ink-2); margin: 0 0 20px; line-height: 1.5; }

.demo-form { display: flex; flex-direction: column; gap: 14px; }
.demo-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.demo-form .req { color: #d1453b; font-weight: 700; }
.demo-form input,
.demo-form select,
.demo-form textarea {
  font-family: var(--font); font-size: 15px; font-weight: 400; color: var(--ink);
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px;
  background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
.demo-form textarea { resize: vertical; min-height: 88px; }
.demo-form input:focus,
.demo-form select:focus,
.demo-form textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(30, 117, 141, 0.16);
}

.demo-status { font-size: 14px; padding: 10px 12px; border-radius: 9px; }
.demo-status.is-success { background: #e7f6ed; color: #146c43; border: 1px solid #b7e4c7; }
.demo-status.is-error   { background: #fdeceb; color: #b42318; border: 1px solid #f5c2c0; }

.demo-actions { display: flex; gap: 12px; margin-top: 4px; }
.demo-actions .demo-submit { flex: 1; justify-content: center; }
.demo-actions .demo-cancel { justify-content: center; }
.demo-actions .btn:disabled { opacity: .55; cursor: not-allowed; }
/* match the teal "Book a demo" CTA rather than the default dark .btn-primary */
.demo-actions .demo-submit { background: var(--accent); }
.demo-actions .demo-submit:hover:not(:disabled) {
  box-shadow: 0 1px 2px rgba(30, 117, 141, .2), 0 8px 22px rgba(30, 117, 141, .28);
}

@media (max-width: 520px) {
  .demo-modal { padding: 24px 20px; }
  .demo-actions { flex-direction: column-reverse; }
}

/* ── Book a demo CTA: standard teal across all pages ─────────────────────── */
.nav-links a.nav-cta[data-book-demo],
.btn.btn-primary[data-book-demo] {
  background: var(--accent);
}
.nav .nav-cta[data-book-demo]:hover,
.btn.btn-primary[data-book-demo]:hover {
  box-shadow: 0 1px 2px rgba(30, 117, 141, .2), 0 8px 22px rgba(30, 117, 141, .28);
}

/* ════════════════════════════════════════════════════════════════════════
   PRODUCT (product.html) — the walkthrough
   One project shown end to end. The screenshot device is ported from the
   LinkedIn carousel: the SAME image drawn twice — dimmed and desaturated
   underneath for context, clipped to one region at full colour on top, with
   a teal box around it. Browsers dedupe the identical URL, so a frame costs
   one download.

   Per-figure geometry arrives as custom properties set inline, converted
   from the carousel's 952x528 px stage:
     --iw  image width      = w    / 952 * 100%
     --ix  image left       = left / 952 * 100%
     --iy  image top        = top  / 528 * 100%
     --cw  clip-path        unchanged (already % of the image's own box)
     --bx --by --bw --bh    box rect, /952 for x, /528 for y
     --z   mobile zoom      = 100 / --bw, as a unitless number
   Optional second window (one frame, two callouts): --cw2 --bx2 --by2 etc.
   ════════════════════════════════════════════════════════════════════════ */

/* ── demo-project chip in the page head ──────────────────────────────────── */
.demo-chip {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--vmodel); font-weight: 500;
  background: color-mix(in srgb, var(--vmodel) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--vmodel) 28%, transparent);
  padding: 6px 12px; border-radius: 999px;
}
.demo-chip .dot { width: 7px; height: 7px; border-radius: 2px; background: var(--vmodel); }

/* ── stage rail: shipping state AND the tour's phase switcher ────────────
   Two orthogonal states live on these pills, so keep them separate:
   .is-live = this stage has shipped, .is-on = this stage is the one being
   shown below. Collapsing them was the bug the first version had. */
.stagerail {
  margin-top: 8px; display: flex; flex-wrap: wrap; gap: 10px;
  font-family: var(--mono); font-size: 12.5px;
}
.stagerail .stage {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font: inherit; cursor: pointer;
  color: var(--ink-2); border: 1px solid var(--line); background: #fff;
  padding: 7px 14px; border-radius: 999px; letter-spacing: .04em;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease,
              background .15s ease, color .15s ease;
}
.stagerail .stage:hover { transform: translateY(-1px); box-shadow: var(--card-shadow); border-color: var(--ink-2); }
.stagerail .stage .dot { width: 8px; height: 8px; border-radius: 2px; background: currentColor; opacity: .45; }
/* shipped, but not the one on screen — the dot carries the state on its own */
.stagerail .stage.is-live { color: var(--ink); font-weight: 500; }
.stagerail .stage.is-live .dot { background: var(--accent); opacity: 1; box-shadow: 0 0 0 3px rgba(30,117,141,.15); }
/* selected */
.stagerail .stage.is-on {
  color: #fff; background: var(--accent); border-color: var(--accent); font-weight: 500;
  box-shadow: 0 1px 2px rgba(30,117,141,.2), 0 6px 18px rgba(30,117,141,.22);
}
.stagerail .stage.is-on:hover { border-color: var(--accent); }
.stagerail .stage.is-on .dot { background: #fff; opacity: 1; box-shadow: none; }
.stagerail .stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.stagerail-note {
  margin: 16px 0 0; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2);
  border-left: 2px solid var(--line); padding-left: 14px; max-width: 62ch; line-height: 1.6;
}

/* ── the tour: one switcher driving the film and the walkthrough ──────────
   The walkthrough used to be three stacked cards, roughly four screens of
   scroll — and it would have grown by that much again with every lifecycle
   stage that ships. It is now a horizontal track of one-claim frames inside
   a fixed slot, and the rail above swaps the film and the track together.
   The page is the same height whether one stage has shipped or five. */
.tour { margin-top: 44px; }
.tour-phase[hidden] { display: none; }

.tour-soon {
  background: rgba(255,255,255,.5); border: 1px dashed rgba(154,163,176,.62);
  border-radius: 16px; padding: 44px 42px 46px; max-width: 760px;
}
.tour-soon .kw {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .06em; color: var(--ink-2);
}
.tour-soon h3 {
  font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -0.022em;
  margin: 14px 0 0; text-wrap: balance;
}
.tour-soon p {
  margin: 14px 0 0; font-size: 16.5px; line-height: 1.58; color: var(--ink-2);
  max-width: 60ch; text-wrap: pretty;
}
.tour-soon .steplink { margin-top: 24px; }

/* ── the track ───────────────────────────────────────────────────────────
   Native scroll-snap, not a JS-positioned carousel: swipe, trackpad, and
   the scrollbar all work for free, and the frames stay in the document for
   search engines and for anyone deep-linking a single claim. */
/* The track earns more width than the reading lane — a 2293px screenshot in
   half of 1180px is a smear. It bleeds to the RIGHT only, so the first frame
   still starts on the lane's left edge and stays aligned with every headline
   above it, while the rest of the track runs toward the screen edge. The
   24px is inset plus room for a scrollbar, which 100vw counts and the layout
   viewport does not. */
.track-wrap {
  margin-top: 42px;
  --breakout: clamp(0px, (100vw - var(--lane)) / 2 - 24px, 260px);
  margin-right: calc(-1 * var(--breakout));
}
/* the chrome belongs to the lane, not to the bleed */
.track-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px 28px; flex-wrap: wrap; margin: 0 var(--breakout) 22px 0;
}
.track-head h3 {
  font-size: clamp(22px, 2.4vw, 31px); font-weight: 700; letter-spacing: -0.024em;
  line-height: 1.1; margin: 0; text-wrap: balance; max-width: 22ch;
}
.track-ctl { display: flex; align-items: center; gap: 10px; }
.tnav {
  width: 38px; height: 38px; flex: none; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font-size: 17px; line-height: 1;
  color: var(--ink); background: #fff; border: 1px solid var(--line);
  box-shadow: var(--card-shadow);
  transition: transform .15s ease, border-color .15s ease, opacity .15s ease;
}
.tnav:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--ink-2); }
.tnav:disabled { opacity: .3; cursor: default; box-shadow: none; }
.tcount {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em;
  color: var(--ink-2); min-width: 62px; text-align: center;
}
.tcount b { color: var(--ink); font-weight: 500; }

.track {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 26px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.track::-webkit-scrollbar { display: none; }
.track:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; border-radius: 20px; }
/* trailing spacer: without it the last frame can never reach snap-start,
   and mandatory snapping fights the scroll at the end of the track */
.track::after { content: ""; flex: 0 0 46px; }

.slide {
  flex: 0 0 calc(100% - 72px); scroll-snap-align: start; scroll-margin-top: 96px;
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 16px; box-shadow: var(--card-shadow); padding: 26px 30px 28px;
}
.slide-in {
  display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(280px, 1fr);
  gap: 34px; align-items: center;
}
.slide-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.slide .idx {
  font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--accent);
  width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}
.slide .kw {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .06em; color: var(--accent);
}
.slide-copy h4 {
  font-size: clamp(21px, 1.95vw, 28px); font-weight: 700; letter-spacing: -0.024em;
  line-height: 1.1; margin: 18px 0 0; text-wrap: balance;
}
.slide-copy p {
  margin: 14px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2);
  text-wrap: pretty;
}
.slide-copy p b, .slide-copy p strong { color: var(--ink); font-weight: 600; }

/* the override beat — one dark frame so six light ones don't blur together */
.slide.is-dark {
  background: var(--accent); border-color: var(--accent); border-left-color: #fff;
  color: #fff; position: relative; overflow: hidden;
}
.slide.is-dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 90% at 30% 30%, #000 0%, transparent 75%);
          mask-image: radial-gradient(70% 90% at 30% 30%, #000 0%, transparent 75%);
}
.slide.is-dark > * { position: relative; z-index: 1; }
.slide.is-dark .idx { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.34); }
.slide.is-dark .kw { color: rgba(255,255,255,.72); }
.slide.is-dark .slide-copy h4 { color: #fff; }
.slide.is-dark .slide-copy p { color: rgba(255,255,255,.82); }
.slide.is-dark .slide-copy p b { color: #fff; }
.slide.is-dark .shot-frame { border-color: rgba(255,255,255,.2); box-shadow: 0 8px 64px rgba(0,50,62,.4); }
.slide.is-dark figcaption { color: rgba(255,255,255,.66); }
.slide.is-dark .pullquote { color: #fff; border-left-color: #fff; background: rgba(255,255,255,.10); }
/* NB: everything inside .shot-frame sits over a light screenshot, so the
   callout box and the toggle keep their light-background styling even here —
   inverting them makes both disappear. */

/* a segmented progress bar reads as "six of these" better than dots do */
.track-dots { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 22px var(--breakout) 0 0; padding: 0; }
.track-dots button {
  display: block; width: 26px; height: 5px; padding: 0; border: 0; border-radius: 3px;
  cursor: pointer; background: rgba(17,22,31,.14);
  transition: background .2s ease, width .2s ease;
}
.track-dots button:hover { background: rgba(17,22,31,.3); }
.track-dots button.is-on { background: var(--accent); width: 46px; }
.track-dots button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* the shots inside the track are revealed by the track, not by the page
   observer — a frame three screens to the right never intersects. Until the
   script takes over, ship the end state so the callouts are never invisible. */
.track:not([data-ready]) .shot .shot-dim { opacity: .4; }
.track:not([data-ready]) .shot .shot-box { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .track { scroll-behavior: auto; }
}

.pullquote {
  margin: 28px 0 0; padding: 22px 26px; border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, #fff); border-radius: 0 12px 12px 0;
  font-size: clamp(18px, 2vw, 24px); font-weight: 600; line-height: 1.4;
  letter-spacing: -0.015em; max-width: 62ch; text-wrap: pretty;
}
/* inside a frame the quote is a caption, not a banner */
.slide .pullquote {
  margin-top: 18px; padding: 14px 18px; font-size: clamp(15px, 1.25vw, 17.5px);
  line-height: 1.45; border-radius: 0 9px 9px 0;
}

/* ── the screenshot device ───────────────────────────────────────────────── */
.shot { margin: 0; }
.shot-frame {
  position: relative; width: 100%; aspect-ratio: 952 / 528;
  border-radius: 12px; overflow: hidden; background: #fff;
  border: 1px solid var(--line); box-shadow: 0 2px 16px rgba(0,92,113,.10);
}
.shot-stack { position: absolute; inset: 0; }
.shot-stack img {
  position: absolute; display: block;
  width: var(--iw); height: auto; left: var(--ix); top: var(--iy);
}
.shot-dim { filter: grayscale(.9); opacity: .4; }
.shot-live { clip-path: var(--cw); }
.shot-live.w2 { clip-path: var(--cw2); }
.shot-box {
  position: absolute; border: 2.5px solid var(--accent); border-radius: 5px;
  left: var(--bx); top: var(--by); width: var(--bw); height: var(--bh);
}
.shot-box.w2 { left: var(--bx2); top: var(--by2); width: var(--bw2); height: var(--bh2); }

/* lead the eye: the context fades back and the callout settles as it scrolls in */
@media (prefers-reduced-motion: no-preference) {
  .shot .shot-dim { opacity: 1; transition: opacity .65s ease .1s; }
  .shot .shot-box { opacity: 0; transform: scale(1.04); transform-origin: center;
    transition: opacity .5s ease .3s, transform .5s cubic-bezier(.2,.7,.2,1) .3s; }
  .shot.in .shot-dim { opacity: .4; }
  .shot.in .shot-box { opacity: 1; transform: scale(1); }
}

.shot-full {
  position: absolute; z-index: 3; right: 12px; bottom: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; cursor: pointer;
  color: var(--ink); background: rgba(255,255,255,.86); border: 1px solid var(--line);
  padding: 6px 11px; border-radius: 7px; line-height: 1;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background .15s ease, transform .15s ease;
}
.shot-full:hover { background: #fff; transform: translateY(-1px); }
/* "show me what's outside the crop" — lift the dim, drop the callouts */
.shot.is-full .shot-dim { opacity: 1; filter: none; }
.shot.is-full .shot-box { opacity: 0; }

.shot figcaption {
  margin-top: 14px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em;
  text-transform: uppercase; color: #9aa3b0; line-height: 1.5;
}

/* ── contact sheet: the rest of the loop, one line each ──────────────────── */
.sheet { margin-top: 34px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sheet .card {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 16px 20px; box-shadow: var(--card-shadow);
}
/* the frame must stay at 952/528 — --iy and --by are percentages of frame
   HEIGHT, calibrated to that box. Change the aspect and every vertical
   offset silently drifts. */
.sheet .shot-frame { border-radius: 9px; }
.sheet .shot-full { display: none; }
/* a third of a lane is far too small to read a 2293px screenshot whole, so
   these thumbnails skip the context layer and show only the callout region */
.sheet .shot-stack {
  transform: scale(var(--z, 1)) translate(calc(var(--bx) * -1), calc(var(--by) * -1));
  transform-origin: top left;
}
.sheet .shot-dim { opacity: 1; filter: none; }
.sheet .shot-box { display: none; }
.sheet h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 16px 0 0; }
.sheet p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin: 8px 0 0; text-wrap: pretty; }

/* ── the film: the live composition ──────────────────────────────────────────
   product-demo.js mounts the authored 1920x1080 composition here. The stage
   lays itself out as [svg area | 37px transport], so the wrapper is sized
   16:9 PLUS the bar — that way the svg fills exactly, with no letterboxing,
   and the controls stay native-size and legible instead of being scaled into
   illegibility along with the picture. */
.film { margin-top: 0; }  /* .tour owns the gap above the phase panel */
.film-stage {
  position: relative; width: 100%; padding-bottom: calc(56.25% + 37px);
  border-radius: 14px; overflow: hidden; background: var(--bg-2);
  border: 1px solid var(--line); box-shadow: 0 8px 40px rgba(17,22,31,.12);
}
.film-mount { position: absolute; inset: 0; }
.film-mount [data-om-starter] { background: transparent !important; }
/* authoring affordance — the host's video exporter, not for visitors */
.film-mount button[title="Export video"] { display: none !important; }

.film-poster {
  position: absolute; inset: 0; z-index: 2; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  border: 0; font-family: var(--font); text-align: center;
  /* a scrim, not a cover — the frame parked underneath is the poster */
  background: linear-gradient(rgba(250,251,252,.62), rgba(250,251,252,.8));
  -webkit-backdrop-filter: saturate(115%); backdrop-filter: saturate(115%);
  transition: opacity .35s ease;
}
.film-poster > span:last-child {
  background: rgba(255,255,255,.9); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 22px 15px;
  box-shadow: 0 1px 2px rgba(17,22,31,.05), 0 10px 30px rgba(17,22,31,.08);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
/* the transport is authoring chrome until the visitor opts in */
.film-stage:not(.is-live) .film-mount [data-om-starter] > div:last-child { visibility: hidden; }
.film-poster[hidden] { display: none; }
.film-poster .ico {
  width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: 21px; padding-left: 4px;
  box-shadow: 0 2px 6px rgba(30,117,141,.3), 0 14px 40px rgba(30,117,141,.34);
  transition: transform .18s ease;
}
.film-poster:hover .ico { transform: scale(1.06); }
.film-poster b { display: block; font-size: 21px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.film-poster em {
  display: block; margin-top: 7px; font-style: normal;
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-2);
}

.chapters {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.chapters button {
  font-family: var(--mono); font-size: 12px; cursor: pointer; color: var(--ink-2);
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 12px; display: inline-flex; align-items: center; gap: 8px;
  transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.chapters button:hover { color: var(--ink); border-color: var(--ink-2); transform: translateY(-1px); }
.chapters button .t { color: var(--accent); }
.chapters button.is-on { color: #fff; background: var(--accent); border-color: var(--accent); }
.chapters button.is-on .t { color: rgba(255,255,255,.72); }

.transcript { margin-top: 22px; max-width: 820px; }
.transcript summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--accent);
  padding: 8px 14px; border: 1px solid rgba(30,117,141,.24); background: rgba(30,117,141,.06);
  border-radius: 999px; user-select: none;
}
.transcript summary::-webkit-details-marker { display: none; }
.transcript summary .chev { transition: transform .2s ease; font-size: 11px; }
.transcript[open] summary .chev { transform: rotate(90deg); }
.transcript ol {
  margin: 18px 0 0; padding: 0 0 0 4px; list-style: none;
  border-left: 2px solid var(--line);
}
.transcript li { padding: 0 0 14px 18px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.transcript li b { display: block; color: var(--ink); font-weight: 600; }
.transcript li .t { font-family: var(--mono); font-size: 11.5px; color: var(--accent); }

@media (max-width: 760px) {
  /* the composition is authored at fixed 1920x1080 with absolute positions;
     below ~700px its 22px type would render at ~4px. Offer the film as a
     link-out rather than an unreadable smear. */
  .film-stage { padding-bottom: calc(56.25% + 37px); }
  .chapters { display: none; }
}

/* ── the gap, rebuilt (home-page teaser) ─────────────────────────────────────
   Scene 2 of the demo composition has no screenshot behind it — it is drawn.
   What a tool keeps, beside what it drops, is the whole thesis in one image. */
.gapduo {
  margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  align-items: stretch; max-width: 860px;
}
.gapcard {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 24px 26px 26px; box-shadow: var(--card-shadow);
}
.gapcard .lbl {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: #9aa3b0; margin-bottom: 14px;
}
.gapcard .gap-kw {
  font-family: var(--mono); font-size: 12px; color: var(--accent); margin-bottom: 10px;
}
.gapcard p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.gapcard.is-kept { border-left: 3px solid var(--accent); }
.gapcard.is-lost {
  background: transparent; border: 2px dashed rgba(154,163,176,.6); box-shadow: none;
  display: flex; flex-direction: column;
}
.gapcard.is-lost .gap-kw { color: var(--ink-2); }
.gapcard.is-lost .ghost {
  margin-top: auto; padding-top: 14px; font-family: var(--mono); font-size: 13px;
  color: #9aa3b0; letter-spacing: .04em;
}
@media (prefers-reduced-motion: no-preference) {
  .gapcard.is-lost { animation: gapPulse 3.2s ease-in-out infinite; }
  @keyframes gapPulse {
    0%, 100% { border-color: rgba(154,163,176,.45); }
    50%      { border-color: rgba(180,52,30,.5); }
  }
}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 940px) {
  /* one column per frame — and the claim arrives before the evidence */
  .track { gap: 18px; }
  .track::after { flex-basis: 26px; }
  .slide { flex-basis: calc(100% - 44px); padding: 22px 22px 26px; }
  .slide-in { grid-template-columns: 1fr; gap: 22px; }
  .slide-copy { order: -1; }
  .slide-copy h4 { margin-top: 14px; }
  .tour-soon { padding: 32px 26px 34px; }
  .sheet { grid-template-columns: 1fr; max-width: 520px; }
  .gapduo { grid-template-columns: 1fr; max-width: 520px; }
}
/* Below ~760px a 2293px-wide desktop screenshot is unreadable at full width.
   Zoom the stack so the callout region fills the frame instead of shrinking
   it — same geometry, no extra assets. --z is 100 / --bw. */
@media (max-width: 760px) {
  .shot-stack {
    transform: scale(var(--z, 1)) translate(calc(var(--bx) * -1), calc(var(--by) * -1));
    transform-origin: top left;
  }
  .shot .shot-dim, .shot.in .shot-dim { opacity: 1; filter: none; }
  .shot .shot-box, .shot.in .shot-box { opacity: 0; }
  .shot-full { display: none; }
}
@media (max-width: 560px) {
  /* a narrower frame with a wider peek: the half-visible next card is the
     only affordance that says "swipe" once the arrows wrap below the title */
  .track { gap: 14px; }
  .track::after { flex-basis: 18px; }
  .slide { flex-basis: calc(100% - 30px); padding: 20px 18px 22px; }
  .slide .pullquote { padding: 12px 15px; }
  .tour-soon { padding: 26px 20px 28px; }
  .track-head { gap: 14px 18px; }
  .track-ctl { width: 100%; }
  .transcript li { padding-left: 14px; }
}