/* Hallmark · macrostructure: Split Studio (+ Narrative Workflow roadmap) · tone: soft-clinical · anchor hue: teal 218°
 * genre: modern-minimal · theme: studied-DNA (source: cip_spark_pitch_template_feb26End.pdf, image mode)
 * paper oklch(100% 0 0) · accent oklch(71.7% 0.121 218.5) #29b5d6 · sun oklch(87.3% 0.131 82.9) #ffcd69
 * display + body: Carlito (metric-compatible stand-in for the deck's Calibri) · nav: N5 floating pill · footer: Ft5 statement
 * enrichment: E5 hand-built SVG (line art extracted from the deck as vector) · studied: yes
 * motion: line-art veil draw · pointer parallax · count-up · pillar-linked demo video · scroll progress
 * Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4
 */

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html,
body { overflow-x: clip; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
strong { font-weight: 700; }
.nowrap { white-space: nowrap; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.skip {
  position: fixed;
  left: var(--space-sm);
  top: var(--space-sm);
  z-index: 100;
  padding: var(--space-2xs) var(--space-sm);
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

/* ---------- Scroll progress ---------- */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 60;
  pointer-events: none;
}
.progress span {
  display: block;
  height: 100%;
  background: var(--color-brand);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
}

/* ---------- Nav · N5 floating pill ---------- */
.nav {
  position: fixed;
  top: var(--space-sm);
  left: 50%;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  width: min(calc(100% - 2 * var(--gutter)), calc(var(--page-max) - 2 * var(--gutter))); /* same edges as the content */
  padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-md);
  background: oklch(100% 0 0 / 0.86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  transform: translateX(-50%);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.nav.is-scrolled { box-shadow: var(--shadow-lift); }
.nav.is-hidden { transform: translate(-50%, calc(-100% - 2rem)); }

.nav__brand { display: block; flex: none; border-radius: var(--radius-sm); }
.nav__brand img { height: 1.75rem; width: auto; }

.nav__links {
  display: flex;
  gap: var(--space-md);
  margin-left: auto;
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
}
.nav__links a {
  position: relative;
  padding: var(--space-3xs) 0;
  color: var(--color-ink-2);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--color-brand);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-short) var(--ease-out);
}
.nav__links a:hover,
.nav__links a.is-current { color: var(--color-ink); }
.nav__links a:hover::after,
.nav__links a.is-current::after { transform: scaleX(1); }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 3rem;
  padding: 0 var(--space-md);
  background: var(--color-brand);
  color: var(--color-ink);
  font: 700 var(--text-md)/1 var(--font-body);
  white-space: nowrap;
  text-decoration: none;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:hover { box-shadow: var(--shadow-lift); background: oklch(76% 0.115 218.5); }
.btn:active { transform: translateY(1px); }
.btn--small { min-height: 2.5rem; padding: 0 var(--space-sm); font-size: var(--text-sm); margin-left: var(--space-2xs); }
.nav__links + .btn--small { margin-left: 0; }

.btn__arrow {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-short) var(--ease-out);
}
.btn:hover .btn__arrow { transform: translateX(3px); }

.link {
  color: var(--color-accent-ink);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--color-brand-soft);
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.link:hover { text-decoration-color: var(--color-brand); }

/* ---------- Shared type ---------- */
.kicker {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: var(--space-xs);
}

.h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--color-accent-ink);
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}

.lead {
  max-width: var(--measure);
  font-size: var(--text-lg);
  line-height: 1.45;
  color: var(--color-ink);
}
.lead strong { color: var(--color-accent-ink); }

section {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Status chip ---------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-ink-2);
}
.status__dot {
  position: relative;
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--color-sun);
  box-shadow: 0 0 0 1px oklch(70% 0.13 75);
}
.status__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--color-sun);
  opacity: 0;
}
.is-in .status__dot::after,
.is-in.status .status__dot::after { animation: pulse-once 1.6s var(--ease-out) 0.6s 2; }
@keyframes pulse-once {
  0% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(3.2); }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-xl);
  min-height: min(56rem, 100svh);
  padding-top: 8rem;
  padding-bottom: var(--space-2xl);
}
.hero__text { align-self: center; display: grid; gap: var(--space-md); }

.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-display-s);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}
.hero__title strong { font-weight: 700; color: var(--color-accent-ink); }

.hero__lead { max-width: var(--measure); font-size: var(--text-lg); line-height: 1.45; color: var(--color-ink-2); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-2xs); }

/* Art sits level with the headline, larger than its column: it tucks into the column
 * gap and reaches toward the right margin, like the deck cover bleeds off the slide. */
.hero__art {
  position: relative;
  align-self: center;
  width: 123%;
  margin-left: -10%;
  margin-right: -13%;
  margin-top: calc(var(--space-2xl) * -1);
}

/* Scroll-linked pen drawing. JS clones .pen__fill into .pen__line and drives
 * --draw (0→1). Without JS the filled art shows as-is. */
.pen { display: block; width: 100%; height: auto; overflow: visible; }
.pen__fill { fill: var(--color-brand); }
.pen__line {
  fill: none;
  stroke: var(--color-brand);
  stroke-width: 0.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pen__tip { fill: var(--color-sun); opacity: 0; }
.js [data-pen] .pen__fill { fill-opacity: var(--fill, 0); }
.js [data-pen] .pen__line { stroke-opacity: var(--line, 1); }
.split__art .pen__line { stroke-width: 0.55; }

/* Problem art slightly larger than its column, reaching into the left margin */
@media (min-width: 52.01rem) {
  .split__art { width: 105%; margin-left: -5%; }
}
.js [data-pen] .pen__tip { opacity: var(--tip, 0); }

.hero__dot {
  position: absolute;
  top: 6%;
  right: 10%;
  width: clamp(0.9rem, 1.6vw, 1.4rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-sun);
  translate: calc(var(--tx, 0px) * -1.8) calc(var(--ty, 0px) * -1.8);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.hero__art.is-drawn .hero__dot,
html:not(.js) .hero__dot { opacity: 1; transform: scale(1); }

[data-tilt] { translate: var(--tx, 0px) var(--ty, 0px); }

/* ---------- Load sequence: headline slides in, then the rest of the hero ---------- */
.js .seq { opacity: 0; transform: translateY(0.75rem); }
.js .seq--slide { transform: translateX(-3rem); }
.is-loaded .seq {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-med) var(--ease-out), transform 900ms var(--ease-out);
  transition-delay: calc(var(--seq, 1) * 160ms + 520ms);
}
.is-loaded .seq--slide { transition-delay: 80ms; transition-duration: 700ms, 1000ms; }

/* Scroll cue — only meaningful while the hero is pinned */
.cue {
  position: absolute;
  left: 50%;
  bottom: var(--space-lg);
  display: none;
  justify-items: center;
  gap: var(--space-2xs);
  margin-left: -4rem;
  width: 8rem;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-2);
}
.cue i {
  display: block;
  width: 1.5px;
  height: 2.5rem;
  background: var(--color-brand);
  transform-origin: 50% 0;
  animation: cue-line 2.2s var(--ease-in-out) infinite;
}
@keyframes cue-line {
  0% { transform: scaleY(0); opacity: 1; }
  60% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}
.is-loaded .pin.is-drawing .cue { opacity: 0; transition-delay: 0ms; transition-duration: var(--dur-short); }

/* ---------- Scroll-pinned drawing tracks ----------
 * The section sticks while the visitor scrolls through the track; scroll progress
 * draws the art, and the page moves on once the drawing is complete. Only where the
 * whole section fits the viewport — elsewhere the art draws as it passes through view. */
@media (min-width: 52.01rem) and (min-height: 46rem) and (prefers-reduced-motion: no-preference) {
  .pin { height: 220svh; }
  .pin > section {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 0;
    padding-block: 5rem var(--space-lg);
    align-content: center;
  }
  .pin .cue { display: grid; }
}

.pen-stage { position: relative; }

/* Phones and tablets: the section can't be pinned (it's taller than the screen), so only
 * the drawing is. The figure becomes a scroll track: the stage sticks in the middle of the
 * viewport (JS sets --stick-top) while a spacer of 0.8 screen scrolls past, and scroll
 * through that track draws the art before the page moves on. */
@media (max-width: 52rem) and (prefers-reduced-motion: no-preference) {
  .js [data-pen] { display: block; }
  .js [data-pen] .pen-stage { position: sticky; top: var(--stick-top, 25svh); }
  .js [data-pen]::after { content: ""; display: block; height: 80svh; }
}

/* Problem points step in as the drawing progresses */
.js [data-step] {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.js [data-step].is-in { opacity: 1; transform: none; }

/* ---------- Split sections ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-xl) var(--space-2xl);
  padding-block: var(--space-3xl);
}
.split__text { display: grid; gap: var(--space-md); align-content: start; }
.split__text .kicker { margin-bottom: calc(var(--space-md) * -0.5); }

.points { display: grid; gap: var(--space-md); margin-top: var(--space-xs); counter-reset: pt; }
.points li {
  position: relative;
  display: grid;
  gap: var(--space-3xs);
  padding: var(--space-sm) 0 var(--space-sm) 3rem;
  border-top: var(--rule-hair) solid var(--color-rule);
  counter-increment: pt;
}
.points li::before {
  content: counter(pt);
  position: absolute;
  left: 0;
  top: var(--space-sm);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1.5px solid var(--color-brand);
  color: var(--color-accent-ink);
  font-size: var(--text-sm);
  font-weight: 700;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.points li:hover::before { background: var(--color-brand); color: var(--color-ink); }
.points h3 { font-size: var(--text-lg); line-height: 1.25; }
.points p { color: var(--color-ink-2); max-width: var(--measure); }

/* ---------- Solution ---------- */
.solution {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: var(--space-xl) var(--space-2xl);
  padding-block: var(--space-3xl);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.solution__text { display: grid; gap: var(--space-md); }
.solution__text .kicker { margin-bottom: calc(var(--space-md) * -0.5); }
.solution__line {
  grid-column: 1 / -1;
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-accent-ink);
  text-wrap: balance;
}

.pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}
.pillar {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3xs) var(--space-sm);
  padding: var(--space-sm);
  text-align: left;
  font: inherit;
  color: var(--color-ink);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  cursor: pointer;
  transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.pillar:hover { border-color: var(--color-brand); }
.pillar[aria-selected="true"] {
  background: var(--color-paper-2);
  border-color: var(--color-brand);
  box-shadow: inset 3px 0 0 var(--color-brand);
}
.pillar__icon {
  grid-row: span 2;
  width: 2.5rem;
  height: 2.5rem;
  fill: none;
  stroke: var(--color-brand);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-short) var(--ease-out);
}
.pillar:hover .pillar__icon,
.pillar[aria-selected="true"] .pillar__icon { transform: translateY(-2px); }
.pillar__name { font-size: var(--text-md); font-weight: 700; line-height: 1.2; color: var(--color-accent-ink); }
.pillar__desc { font-size: var(--text-sm); line-height: 1.4; color: var(--color-ink-2); }

/* Demo — the real app screen recording inside the iPhone frame from the pitch deck.
 * The frame image has its screen cut out; the video sits underneath, positioned on the
 * screen opening (471×1022 at x32 y32 of the 535×1086 frame). Play/pause and progress
 * sit below the phone so they never cover the app's own navigation bar. */
.demo {
  display: grid;
  gap: var(--space-md);
  width: 100%;
  max-width: 21rem;
  justify-self: center;
}
.iphone {
  position: relative;
  width: 100%;
  aspect-ratio: 535 / 1086;
  filter: drop-shadow(0 28px 40px oklch(52.5% 0.095 222 / 0.28));
}
/* The screen opening (471×1022 at x32 y32 of the 535×1086 frame), 1px larger on every
 * side so no seam shows under the bezel. A status-bar strip holds the Dynamic Island
 * and the recording sits below it (the recording has no status bar of its own), scaled
 * to fit without cropping; any sliver either side shows the app's own background. */
.iphone__display {
  position: absolute;
  left: calc(5.98% - 1px);
  top: calc(2.95% - 1px);
  width: calc(88.04% + 2px);
  height: calc(94.11% + 2px);
  display: grid;
  grid-template-rows: 5.6% 1fr;
  border-radius: 13.2% / 6.1%;
  overflow: hidden;
  background: var(--color-app-bg);
}
.iphone__status {
  position: relative;
  background: var(--color-app-top);
}
.iphone__island {
  position: absolute;
  left: 50%;
  top: 22%;
  width: 31.7%;
  height: 66%;
  border-radius: var(--radius-pill);
  background: oklch(12% 0 0);
  transform: translateX(-50%);
}
.iphone__screen {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center top;
  background: var(--color-app-bg);
}
.iphone__frame {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.demo__bar {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding-inline: var(--space-2xs);
}
.demo__toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: 50%;
  background: var(--color-paper);
  color: var(--color-accent-ink);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.demo__toggle:hover { border-color: var(--color-brand); background: var(--color-paper-2); }
.demo__toggle:active { transform: translateY(1px); }
.demo__toggle svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.demo__icon-play { fill: currentColor; }
.demo__toggle[data-state="playing"] .demo__icon-play,
.demo__toggle[data-state="paused"] .demo__icon-pause { display: none; }
.demo__progress {
  position: relative;
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: var(--color-rule);
  overflow: hidden;
}
.demo__progress span {
  position: absolute;
  inset: 0;
  background: var(--color-brand);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
}
.demo__label { flex: none; font-size: var(--text-xs); font-weight: 700; color: var(--color-ink-2); }

/* ---------- Intelligence ---------- */
.defs { display: grid; gap: var(--space-sm); }
.defs div { padding-left: var(--space-sm); border-left: 3px solid var(--color-brand-soft); transition: border-color var(--dur-short) var(--ease-out); }
.defs div:hover { border-left-color: var(--color-brand); }
.defs dt { font-size: var(--text-lg); font-weight: 700; color: var(--color-accent-ink); line-height: 1.25; }
.defs dd { color: var(--color-ink-2); }
.defs dd strong { color: var(--color-ink); }

.note {
  max-width: var(--measure);
  padding: var(--space-sm) var(--space-md);
  border: 1.5px solid var(--color-ink);
  border-radius: var(--radius-sm);
}
.note strong { color: var(--color-accent-ink); }

/* Technology points: each fades in after the last, its teal side line drawing first;
 * then a link carries the reader on to the Insights section. */
.tech-points { display: grid; gap: var(--space-xl); align-content: center; justify-items: start; }
.defs--steps { gap: var(--space-lg); }
.defs--steps div {
  position: relative;
  padding-left: var(--space-md);
  border-left-color: var(--color-brand-soft);
}
.defs--steps div::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-brand);
  transform-origin: 50% 0;
  transform: scaleY(1);
}
.js .defs--steps [data-reveal] {
  transform: translateY(0.75rem);
  transition-duration: 700ms;
  transition-delay: calc(var(--i, 0) * 260ms + 220ms);
}
.js .defs--steps [data-reveal]::before {
  transform: scaleY(0);
  transition: transform 600ms var(--ease-out) calc(var(--i, 0) * 260ms);
}
.js .defs--steps [data-reveal].is-in::before { transform: scaleY(1); }
.js .tech-points .link--next { transition-delay: calc(var(--i, 0) * 260ms + 220ms); }
.defs--steps dt { font-size: var(--text-xl); }
.defs--steps dd { font-size: var(--text-md); margin-top: var(--space-3xs); }

.link--next { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.link--next svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-short) var(--ease-out);
}
.link--next:hover svg { transform: translateY(3px); }

/* ---------- Insights rail ----------
 * A sideways-scrolling row of Insights screens: title, image, description per card.
 * Every image has the same width and 4:5 shape. Swipe, trackpad, keyboard (focus the
 * row, then arrow keys) or the arrow buttons; cards snap to their left edge. */
.insights {
  display: grid;
  gap: var(--space-xl);
  padding-block: var(--space-2xl) var(--space-3xl);
}
.insights__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-md) var(--space-xl);
}
.insights__intro { display: grid; gap: var(--space-sm); max-width: 40rem; }
.insights__intro .kicker { margin-bottom: calc(var(--space-sm) * -0.5); }
.insights__nav { display: flex; gap: var(--space-2xs); }
.rail-btn {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: 50%;
  background: var(--color-paper);
  color: var(--color-accent-ink);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.rail-btn:hover:not(:disabled) { border-color: var(--color-brand); background: var(--color-paper-2); }
.rail-btn:active:not(:disabled) { transform: translateY(1px); }
.rail-btn:disabled { opacity: 0.35; cursor: default; }
.rail-btn svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(15rem, 22vw, 18.5rem);
  gap: var(--space-lg);
  margin: 0 calc(var(--gutter) * -1);
  padding: var(--space-2xs) var(--gutter) var(--space-md);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--color-rule) transparent;
  list-style: none;
}
.rail:focus-visible { outline-offset: -2px; border-radius: var(--radius-card); }
/* Scroll-driven mode (JS adds .is-hscroll when motion is allowed and the cards overflow):
 * the row holds mid-screen inside a tall track and vertical scrolling slides the cards
 * sideways (JS sets --x); the page carries on once the last card is in view. */
/* min-width: 0 stops the grid section from stretching to fit every card */
.rail-track,
.rail-view { min-width: 0; }
.rail-track.is-hscroll { height: var(--track-h, auto); }
.rail-track.is-hscroll .rail-view {
  position: sticky;
  top: var(--stick-top, 15vh);
  margin: 0 calc(var(--gutter) * -1);
  overflow: hidden;
}
.rail-track.is-hscroll .rail {
  margin: 0;
  overflow: visible;
  scroll-snap-type: none;
  transform: translate3d(var(--x, 0px), 0, 0);
  will-change: transform;
}

.icard {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: var(--space-sm);
  align-content: start;
  scroll-snap-align: start;
}
.icard__title { font-size: var(--text-lg); line-height: 1.2; color: var(--color-accent-ink); }
.icard__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius-card);
  border: var(--rule-hair) solid var(--color-rule);
  background: var(--color-app-bg);
  box-shadow: var(--shadow-lift);
}
.icard__desc { font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-2); }

/* ---------- Traction ---------- */
.traction {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-xl) var(--space-2xl);
  padding-block: var(--space-3xl);
  position: relative;
  isolation: isolate;
}
.traction::before {
  content: "";
  position: absolute;
  inset: 0 50%;
  margin-inline: -50vw;
  background: var(--color-paper-2);
  z-index: -1;
}
.traction__head { display: grid; gap: var(--space-sm); align-content: start; }
.traction__head .kicker { margin-bottom: calc(var(--space-sm) * -0.5); }

.counts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md) var(--space-lg);
  align-content: start;
}
.counts li { display: grid; font-size: var(--text-md); font-weight: 700; color: var(--color-ink-2); }
.count {
  font-family: var(--font-display);
  font-size: var(--text-stat);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.counts li:first-child .count { color: var(--color-accent-ink); }

.proof {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
  color: var(--color-ink-2);
}
.proof strong { display: block; color: var(--color-accent-ink); font-size: var(--text-lg); }

/* ---------- Who ---------- */
.who { display: grid; gap: var(--space-xl); padding-block: var(--space-3xl); }
.who .h2 { color: var(--color-ink); max-width: 18ch; }
.who__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.who__card {
  display: grid;
  gap: var(--space-xs);
  align-content: start;
  padding-top: var(--space-md);
  border-top: 3px solid var(--color-brand);
}
.who__stat .count { color: var(--color-accent-ink); }
.who__card h3 { font-size: var(--text-xl); line-height: 1.15; }
.who__card p:last-child { color: var(--color-ink-2); max-width: var(--measure); }
.who__foot { font-size: var(--text-lg); max-width: 40rem; }
.who__foot strong { color: var(--color-accent-ink); }

/* ---------- Roadmap ---------- */
.roadmap { display: grid; gap: var(--space-xl); padding-block: var(--space-3xl); border-top: var(--rule-hair) solid var(--color-rule); }
.roadmap__head { display: grid; gap: var(--space-sm); }
.roadmap__head .kicker { margin-bottom: calc(var(--space-sm) * -0.5); }
/* Timeline — a hairline rail; scroll draws a teal line along it and each stage
 * lights up as the line reaches its node. JS positions the rail between the first
 * and last node, so it works horizontally (desktop) and vertically (mobile). */
.timeline { position: relative; }
.timeline__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-lg);
}
.timeline__rail {
  position: absolute;
  left: 0.4375rem;
  top: 0.4375rem;
  width: calc(80% + var(--space-lg) * 0.8);
  height: 1.5px;
  background: var(--color-rule);
  pointer-events: none;
}
.timeline__rail span {
  position: absolute;
  inset: 0;
  background: var(--color-brand);
  transform-origin: 0 0;
  transform: scaleX(var(--p, 1));
}
.timeline.is-vertical .timeline__rail span { transform: scaleY(var(--p, 1)); }

.tl { position: relative; display: grid; gap: var(--space-2xs); align-content: start; }
.tl__node {
  position: relative;
  z-index: 1;
  width: 0.875rem;
  height: 0.875rem;
  margin-bottom: var(--space-sm);
  border-radius: 50%;
  background: var(--color-paper);
  border: 1.5px solid var(--color-rule);
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
/* Outline icons draw themselves (pathLength=1 dashes) when their stage lights up */
.tl__icon {
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: var(--space-2xs);
  fill: none;
  stroke: var(--color-brand);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tl__icon > * { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.js .tl__icon > * {
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 900ms var(--ease-in-out);
}
.js .tl__icon > :nth-child(2) { transition-delay: 120ms; }
.js .tl__icon > :nth-child(3) { transition-delay: 240ms; }
.js .tl__icon > :nth-child(4) { transition-delay: 360ms; }
.js .tl__icon > :nth-child(5) { transition-delay: 480ms; }
.js .tl.is-on .tl__icon > * { stroke-dashoffset: 0; }
.tl--now .tl__icon { stroke: oklch(70% 0.13 75); }

.tl__step {
  font-size: var(--text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--color-ink-2);
}
.tl__title {
  font-size: var(--text-lg);
  line-height: 1.2;
  text-wrap: balance;
  transition: color var(--dur-short) var(--ease-out);
}
.tl__desc { font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-2); }

.tl.is-on .tl__node,
html:not(.js) .tl__node { background: var(--color-brand); border-color: var(--color-brand); box-shadow: 0 0 0 0.375rem var(--color-brand-soft); }
.tl--now .tl__node,
.tl--now.is-on .tl__node { background: var(--color-sun); border-color: oklch(70% 0.13 75); box-shadow: 0 0 0 0.375rem oklch(87.3% 0.131 82.9 / 0.3); }
.tl--now .tl__step { color: var(--color-ink); }
.tl:hover .tl__node { transform: scale(1.25); }
.tl:hover .tl__title { color: var(--color-accent-ink); }

.js .tl > :not(.tl__node) {
  opacity: 0.35;
  transform: translateY(0.5rem);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.js .tl > .tl__title { transition-delay: 40ms; }
.js .tl > .tl__desc { transition-delay: 80ms; }
.js .tl.is-on > :not(.tl__node) { opacity: 1; transform: none; }

/* ---------- Install ---------- */
.install {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-xl) var(--space-2xl);
  padding-block: var(--space-3xl);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.install__text { display: grid; gap: var(--space-md); justify-items: start; }
.install .h2 { color: var(--color-ink); }
.qr {
  position: relative;
  display: grid;
  justify-items: center;
  padding: var(--space-md) var(--space-md) var(--space-lg);
  border: 2px solid var(--color-brand-soft);
  border-radius: var(--radius-card);
  background: var(--color-paper);
}
.qr img { width: 13.75rem; height: 13.75rem; }
.qr figcaption {
  position: absolute;
  bottom: calc(var(--space-sm) * -1);
  padding: var(--space-3xs) var(--space-md);
  background: var(--color-sun);
  color: var(--color-ink);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- Footer · Ft5 statement, compact ----------
 * Org block on the left; the statement sits top-right above the links. */
.footer {
  margin-top: var(--space-2xl);
  padding: var(--space-xl) var(--gutter);
  background: var(--color-ink);
  color: var(--color-paper);
}
.footer__row {
  max-width: calc(var(--page-max) - 2 * var(--gutter)); /* same content width as the sections above */
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch; /* right column spans the full height: tagline level with the logo, links level with the copyright */
  gap: var(--space-lg);
  font-size: var(--text-sm);
}
.footer__org { display: grid; gap: var(--space-sm); color: oklch(100% 0 0 / 0.72); }
.footer__org img { height: 1.75rem; width: auto; }
.footer__end { display: grid; justify-items: end; align-content: space-between; gap: var(--space-sm); }
.footer__statement {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-brand);
  text-align: right;
  margin-top: -0.14em; /* optical: lifts the letter tops level with the top of the logo */
}
.footer__dot {
  display: inline-block;
  width: 0.16em;
  height: 0.16em;
  margin-left: 0.06em;
  border-radius: 50%;
  background: var(--color-sun);
}
.footer__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-xs) var(--space-lg); }
.footer__links a {
  color: oklch(100% 0 0 / 0.86);
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__links a:hover { color: var(--color-brand); text-decoration: underline; text-underline-offset: 0.25em; }

/* ---------- Reveal ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (min-width: 52.01rem) and (max-width: 80rem) {
  .hero__art { width: 118%; margin-left: -9%; margin-right: -9%; }
}

@media (max-width: 52rem) {
  /* Footer stacks tagline + links first, logo, company details and copyright last */
  .footer__row { flex-direction: column-reverse; align-items: flex-start; gap: var(--space-xl); }
  .footer__end { justify-items: start; }
  .footer__statement { text-align: left; }
  .footer__links { justify-content: flex-start; column-gap: var(--space-sm); }

  .nav__links { display: none; }
  .nav { justify-content: space-between; }

  .hero,
  .split,
  .solution,
  .traction,
  .install { grid-template-columns: minmax(0, 1fr); }

  .hero { min-height: 0; padding-top: 7rem; padding-bottom: 0; gap: var(--space-lg); }
  .hero__art { width: 100%; max-width: 40.8rem; margin: 0; }
  .split { padding-block: var(--space-2xl); }
  .split--flip .split__art { order: 2; }
  .split__art { max-width: 36rem; }

  .solution { padding-block: var(--space-2xl); }
  .demo { max-width: 18rem; }


  .traction,
  .who,
  .roadmap,
  .install { padding-block: var(--space-2xl); }
  .proof { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }

  .who__grid { grid-template-columns: minmax(0, 1fr); }

  .timeline__list { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-left: var(--space-xl); }
  .tl__node { position: absolute; left: calc(var(--space-xl) * -1); top: 0.2rem; margin: 0; }

  .install { justify-items: start; }
  .qr { justify-self: center; }
}

@media (max-width: 30rem) {
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .counts { gap: var(--space-md); }
  .hero__actions .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
  .js [data-reveal],
  .js .tl > * { transform: none !important; transition: opacity 150ms linear !important; transition-delay: 0ms !important; }
  .js .seq,
  .js [data-step] { transform: none !important; transition: opacity 150ms linear !important; transition-delay: 0ms !important; }
  .cue i { animation: none; }
  .js .defs--steps [data-reveal]::before { transform: scaleY(1) !important; transition: none !important; }
  [data-tilt], .hero__dot { translate: none !important; }
  .hero__dot { transition-duration: 150ms !important; transition-delay: 0ms !important; }
  .status__dot::after { animation: none !important; }
}