/* =========================================================================
   KEVOR — landing
   The design system is transcribed from the shipping app: colours and radii
   from Design.Colors / Design.Radius / Design.Spacing in Constants.swift,
   type from Design.Fonts (SF Rounded for UI, SF Mono for the brand mark and
   every digit). Nothing here invents a colour or a face the app does not use.
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------------
     Colour — transcribed from Design.Colors in kevor/Sources/Utilities/
     Constants.swift. Every value below exists in the shipping app. Do not
     add a colour here that the app does not use.
     --------------------------------------------------------------------- */
  --bg: #000000;              /* Design.Colors.background */
  --surface: #111518;         /* Design.Colors.surface */
  --surface-elevated: #1a1e22;/* Design.Colors.surfaceElevated */
  --surface-dock: #0a0c0e;    /* Design.Colors.surfaceDock */
  --border: #2a2e32;          /* Design.Colors.border */

  --text: #f0f0f0;            /* Design.Colors.primaryText */
  --text-2: #808890;          /* Design.Colors.secondaryText */
  --text-3: #667078;          /* lifted for readable fine print on black */

  --coral: #e8364b;           /* Design.Colors.accent — KEVOR signature */
  --cyan: #00c8e0;            /* Design.Colors.cyan — rest phase */
  --green: #2fbf71;           /* Design.Colors.neonGreen */
  --warning: #f0a020;         /* Design.Colors.warning */
  --control: #6b8099;         /* Design.Colors.controlAccent */
  --on-accent: #000000;       /* Design.Colors.buttonText — black on accent */
  --magenta: #db59b8;         /* KevorTokens.magenta — generation's accent */

  /* Design.Colors.badgeTimerTypeRGB — per-timer identity */
  --t-amrap: #ff9f0a;
  --t-emom: #5aa8ff;
  --t-fortime: #32d48c;
  --t-intervals: #af79ff;

  /* Brand mark reds. The wordmark artwork and the app icon each carry their
     own red; the UI accent above is a third. Each is used only where the app
     uses it — the dot beside the wordmark is the artwork red. */
  --brand-red: #ed1e23;       /* BrandWordmark.png */
  --icon-red: #ff2d48;        /* AppIcon 1024 */

  --line: rgba(42, 46, 50, 0.75);
  --line-strong: #2a2e32;

  /* ---------------------------------------------------------------------
     Type — the app is SF Rounded for every label and SF Mono for the brand
     mark and all digits (Design.Fonts). ui-rounded / ui-monospace resolve to
     exactly those faces on Apple platforms.
     --------------------------------------------------------------------- */
  --sans: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont,
    "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, "JetBrains Mono", monospace;

  /* Design.Spacing */
  --s-xxs: 2px; --s-xs: 4px; --s-sm: 8px; --s-smd: 12px;
  --s-md: 16px; --s-lg: 24px; --s-xl: 32px; --s-xxl: 48px;

  /* Design.Radius */
  --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px;
  --r-xl: 20px; --r-xxl: 28px; --r-pill: 99px;

  /* Rhythm */
  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1240px;
  --section-y: clamp(72px, 10vw, 152px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- reset-ish ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.011em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }

/* Keyboard focus: one ring, brand-coloured, never removed. */
:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; letter-spacing: -0.035em; line-height: 1.02; font-weight: 800; }
p { margin: 0; }
::selection { background: var(--coral); color: var(--on-accent); }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
/* The nav is fixed, so anchored sections must reserve room for it. */
section[id], [id] { scroll-margin-top: 82px; }

/* ---------- shared bits ---------- */
.eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--coral);
  box-shadow: 0 0 14px var(--coral);
}
.eyebrow.is-cyan::before { background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
.eyebrow.is-magenta::before { background: var(--magenta); box-shadow: 0 0 14px var(--magenta); }
.eyebrow.is-green::before { background: var(--green); box-shadow: 0 0 14px var(--green); }

.h-display {
  font-size: clamp(34px, 3.9vw, 56px);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.04;
  text-wrap: balance;
}
.h-section {
  font-size: clamp(27px, 3.2vw, 44px);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1.08;
  text-wrap: balance;
}
.lede {
  font-size: clamp(15.5px, 1.25vw, 18px);
  color: var(--text-2);
  max-width: 56ch;
  line-height: 1.5;
}
/* Every section header uses the same rhythm, so the gap under a heading never
   changes from one band to the next. */
.section-head { max-width: 62ch; }
.section-head .eyebrow + .h-section,
.section-head .eyebrow + .h-section--sub { margin-top: var(--s-md); }
.section-head .h-section + .lede { margin-top: var(--s-lg); }
.split > div > .eyebrow + .h-section,
.split > div > .eyebrow + .h-section--sub { margin-top: var(--s-md); }
.split > div > .h-section + .lede,
.split > div > .h-section--sub + .lede { margin-top: var(--s-lg); }
.h-section--sub { font-size: clamp(23px, 2.2vw, 32px); }
.faq__title { margin-bottom: var(--s-xl); }

/* The block that follows a section header always sits the same distance away. */
.section-grid { margin-top: clamp(36px, 4.5vw, 60px); }
.story__inner { margin-top: clamp(36px, 4.5vw, 60px); }
.split--stacked { margin-top: clamp(56px, 7vw, 96px); }

.accent { color: var(--coral); }
.accent-cyan { color: var(--cyan); }

/* ---------- brand wordmark ----------
   The artwork itself, exported straight from the app bundle
   (Assets.xcassets/BrandWordmark). Never re-set the wordmark in live type:
   the letterforms, the tracking and the red of the square are all fixed. */
.wordmark {
  display: block;
  height: 21px;
  width: auto;
  image-rendering: -webkit-optimize-contrast;
}
.wordmark--footer { height: 17px; }

/* Where the mark has to be live text (nothing on this page currently does),
   this is the app's own brand face: SF Mono, black weight, wide tracking. */
.wordmark-type {
  font-family: var(--mono);
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 0.34em;
}
.wordmark-type .dot {
  width: 0.2em; height: 0.2em;
  background: var(--brand-red);
  display: inline-block;
  transform: translateY(-0.06em);
}

/* ---------- nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  background: rgba(0, 0, 0, 0.55);
  border-bottom: 1px solid transparent;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.nav.is-stuck { background: rgba(0, 0, 0, 0.86); border-bottom-color: var(--line); }
.nav__inner {
  display: flex; align-items: center; gap: 28px;
  height: 62px;
}
.nav__brand { font-size: 17px; }
.nav__toggle { display: none; }
.nav__links {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}
.nav__links a {
  position: relative;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
  transition: color .2s;
}
.nav__links a:hover,
.nav__links a.is-current { color: var(--text); }
.nav__links a.is-current::after {
  content: "";
  position: absolute;
  inset: auto 0 4px;
  height: 2px;
  background: var(--coral);
}
.nav__right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.nav__links + .nav__right { margin-left: 0; }

.lang {
  display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-pill);
  overflow: hidden; height: 30px;
}
.lang button {
  background: none; border: 0; cursor: pointer;
  padding: 0 11px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em;
  color: var(--text-3); transition: color 0.2s, background 0.2s;
}
.lang button[aria-pressed="true"] { color: var(--text); background: var(--surface-elevated); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding: 0 22px; border-radius: var(--r-pill);
  font-size: 14.5px; font-weight: 750; letter-spacing: -0.01em;
  border: 1px solid transparent; cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s, border-color 0.25s, box-shadow 0.25s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary {
  background: var(--coral); color: var(--on-accent);
  box-shadow: 0 10px 34px -12px rgba(232, 54, 75, 0.9);
}
.btn--primary:hover { box-shadow: 0 16px 44px -12px rgba(232, 54, 75, 1); }
.btn--ghost { border-color: var(--line-strong); color: var(--text); background: rgba(255,255,255,0.02); }
.btn--ghost:hover { background: rgba(255,255,255,0.07); }
.btn--sm { height: 38px; padding: 0 16px; font-size: 13px; }

/* App Store badge (drawn, not an external asset) */
.appstore {
  display: inline-flex; align-items: center; gap: 12px;
  height: 54px; padding: 0 22px 0 18px;
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  background: #050505;
  transition: transform 0.25s var(--ease), border-color 0.25s, background 0.25s;
}
.appstore:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.35); background: #0b0b0b; }
.appstore svg { width: 26px; height: 30px; fill: #fff; flex: none; }
.appstore span { display: block; }
.appstore .k { font-size: 10.5px; color: var(--text-2); letter-spacing: 0.02em; line-height: 1.2; }
.appstore .v { font-size: 19px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; }

/* =========================================================================
   3D iPhone — built in CSS, proportions of an iPhone 17 Pro Max
   Screen 1320×2868 → aspect 0.4603. Frame adds the titanium band.
   ========================================================================= */
.iphone {
  --screen-w: 300px;
  width: var(--screen-w);
  aspect-ratio: 1320 / 2868;
  position: relative;
  border-radius: calc(var(--screen-w) * 0.155);
  flex: none;
  /* titanium band */
  background:
    linear-gradient(145deg, #d8d8dc 0%, #6d6f74 14%, #b9bcc2 26%, #4a4c50 44%,
                    #9fa2a8 60%, #3d3f43 76%, #c8cad0 90%, #55575b 100%);
  padding: calc(var(--screen-w) * 0.0225);
  box-shadow:
    0 2px 1px rgba(255, 255, 255, 0.45) inset,
    0 -2px 1px rgba(0, 0, 0, 0.5) inset,
    0 40px 90px -30px rgba(0, 0, 0, 0.95),
    0 10px 30px -12px rgba(0, 0, 0, 0.8);
  transform-style: preserve-3d;
  transition: transform 0.9s var(--ease);
}
.iphone__inner {
  position: absolute;
  inset: calc(var(--screen-w) * 0.0225);
  border-radius: calc(var(--screen-w) * 0.133);
  background: #000;
  overflow: hidden;
  box-shadow: 0 0 0 1.5px #0a0a0a, 0 0 0 3px rgba(255,255,255,0.06);
}
.iphone__screen {
  position: absolute; inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background: #000;
}
.iphone__screen img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  opacity: 0;
  transition: opacity 0.55s var(--ease), transform 0.9s var(--ease);
  transform: scale(1.02);
}
.iphone__screen img.is-active { opacity: 1; transform: scale(1); }

/* Dynamic Island */
.iphone__island {
  position: absolute;
  top: calc(var(--screen-w) * 0.038);
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--screen-w) * 0.265);
  height: calc(var(--screen-w) * 0.077);
  background: #000;
  border-radius: var(--r-pill);
  z-index: 4;
  box-shadow: 0 0 0 0.5px rgba(255,255,255,0.06);
}
.iphone__island::after {
  content: "";
  position: absolute;
  right: 13%;
  top: 50%;
  transform: translateY(-50%);
  width: calc(var(--screen-w) * 0.026);
  height: calc(var(--screen-w) * 0.026);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #23303a 0%, #0b1116 55%, #000 100%);
}

/* glass sheen */
.iphone__glass {
  position: absolute; inset: 0;
  border-radius: inherit;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.04) 18%,
    rgba(255, 255, 255, 0) 42%,
    rgba(255, 255, 255, 0) 72%,
    rgba(255, 255, 255, 0.05) 100%
  );
  mix-blend-mode: screen;
}

/* side hardware */
.iphone__btn {
  position: absolute;
  background: linear-gradient(180deg, #8e9095, #4a4c50 40%, #2f3134 100%);
  border-radius: 2px;
  z-index: 2;
}
.iphone__btn--power { right: calc(var(--screen-w) * -0.008); top: 23%; width: calc(var(--screen-w) * 0.011); height: 10%; }
.iphone__btn--vol-up { left: calc(var(--screen-w) * -0.008); top: 24%; width: calc(var(--screen-w) * 0.011); height: 6.4%; }
.iphone__btn--vol-dn { left: calc(var(--screen-w) * -0.008); top: 32.5%; width: calc(var(--screen-w) * 0.011); height: 6.4%; }
.iphone__btn--action { left: calc(var(--screen-w) * -0.008); top: 16.5%; width: calc(var(--screen-w) * 0.011); height: 4.2%; }
.iphone__btn--camera { right: calc(var(--screen-w) * -0.008); top: 40%; width: calc(var(--screen-w) * 0.011); height: 5%; background: linear-gradient(180deg, #b9bcc2, #55575b); }

/* Landscape device: the same frame turned 90°, for the full-screen clock. */
.iphone--landscape {
  --screen-w: 100%;
  width: 100%;
  aspect-ratio: 2868 / 1320;
  border-radius: calc(var(--frame-w, 760px) * 0.068);
  padding: calc(var(--frame-w, 760px) * 0.0098);
}
.iphone--landscape .iphone__inner {
  inset: calc(var(--frame-w, 760px) * 0.0098);
  border-radius: calc(var(--frame-w, 760px) * 0.058);
}
.iphone--landscape .iphone__island {
  top: 50%;
  left: calc(var(--frame-w, 760px) * 0.0165);
  transform: translateY(-50%);
  width: calc(var(--frame-w, 760px) * 0.0335);
  height: calc(var(--frame-w, 760px) * 0.115);
}
.iphone--landscape .iphone__island::after { display: none; }
.iphone--landscape .iphone__btn { display: none; }

/* Presentation. Product shots sit straight on, the same way on every band —
   mirrored tilts down the page read as a template rather than a product. The
   only place with real perspective is the hero, where two devices have to
   stack and depth is what makes them legible as two. */
.iphone--flat { transform: none; }
.iphone-stage { display: flex; justify-content: center; }

/* floor glow under a device */
.device-glow { position: relative; }
.device-glow::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -8%;
  transform: translateX(-50%);
  width: 118%; height: 22%;
  background: radial-gradient(ellipse at center, rgba(232,54,75,0.28), transparent 70%);
  filter: blur(38px);
  z-index: -1;
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero {
  position: relative;
  padding-top: clamp(112px, 15vh, 168px);
  padding-bottom: clamp(48px, 6vw, 88px);
  overflow: hidden;
}
.hero::after {
  content: "KEVOR";
  position: absolute;
  left: -1vw;
  bottom: -3vw;
  z-index: -1;
  color: rgba(255,255,255,.025);
  font-family: var(--mono);
  font-size: clamp(150px, 24vw, 350px);
  font-weight: 900;
  letter-spacing: -.1em;
  line-height: .72;
  pointer-events: none;
}
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(900px 600px at 78% 8%, rgba(232, 54, 75, 0.20), transparent 62%),
    radial-gradient(760px 520px at 8% 62%, rgba(0, 200, 224, 0.10), transparent 60%),
    #000;
}
.hero__grid {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 90% 62% at 50% 32%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 62% at 50% 32%, #000 20%, transparent 78%);
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.hero__copy { max-width: 640px; }
.hero h1 { margin-top: var(--s-md); font-family: var(--mono); letter-spacing: -.065em; }
.hero h1 .l2 { display: block; color: var(--coral); }
.hero__lede { margin-top: var(--s-lg); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-smd); margin-top: var(--s-xl); align-items: center; }
/* The App Store badge sets the height in the hero; the secondary button matches it. */
.hero__cta .btn, .cta-final .row .btn { height: 54px; padding-inline: 26px; font-size: 15px; }
.hero__note { margin-top: 18px; font-size: 13px; color: var(--text-3); }

.hero__stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 32px);
  margin-top: var(--s-xl); padding-top: var(--s-lg); border-top: 1px solid var(--line);
}
.stat__n {
  font-family: var(--mono);
  font-size: clamp(25px, 2.6vw, 33px); font-weight: 800; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  display: flex; align-items: baseline; gap: 0.06em;
}
.stat__n i {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.52em;
  font-weight: 700;
  color: var(--text-2);
  letter-spacing: 0;
}
.stat__l { font-size: 12.5px; color: var(--text-2); letter-spacing: 0; margin-top: var(--s-sm); max-width: 21ch; line-height: 1.35; }

/* hero device: two phones, scan → result */
.hero__devices { position: relative; display: flex; justify-content: center; align-items: center; min-height: 520px; }
.hero__devices .iphone { --screen-w: clamp(210px, 22vw, 290px); }
.hero__devices .d-back {
  position: absolute; left: 4%; top: 6%;
  opacity: 0.9;
  transform: perspective(2400px) rotateY(-13deg) rotateX(3deg) scale(0.88);
  filter: brightness(0.7) saturate(0.9);
  z-index: 1;
}
.hero__devices .d-front {
  position: relative; z-index: 2;
  transform: perspective(2400px) rotateY(-13deg) rotateX(3deg) translateX(12%);
}

/* The opening move.
   The first version was a neon line looping down the phone forever, the stock
   scanner effect, and it swept over a screen that already showed the parsed
   result. The second hid the screenshot and wiped it in, which meant the hero
   depended on a script to be visible at all.

   This is the app's own gesture instead: KevorGlyphScannerView orbits a short
   coral-to-cyan arc around its stage, so the frame does the same. One lap when
   the page opens, then nothing. The screenshot is never hidden, so there is no
   state in which the hero is blank. */
.frame-trace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  /* Additive, like the arc's .plusLighter blend in the app, so the segment
     reads as light on the screen rather than a drawn outline. */
  mix-blend-mode: plus-lighter;
  filter: drop-shadow(0 0 6px rgba(232, 54, 75, 0.55));
}
.frame-trace rect {
  fill: none;
  stroke: url(#traceStroke);
  stroke-width: 9;
  stroke-linecap: round;
  /* A 22-unit segment of a 100-unit path, matching the arc's trim in the app. */
  stroke-dasharray: 22 78;
  stroke-dashoffset: 22;
}
.hero__devices.is-revealed .frame-trace {
  animation: trace-fade 2.15s linear 0.25s 1 both;
}
.hero__devices.is-revealed .frame-trace rect {
  animation: trace-run 1.9s cubic-bezier(0.4, 0, 0.2, 1) 0.25s 1 both;
}
@keyframes trace-run {
  from { stroke-dashoffset: 22; }
  to   { stroke-dashoffset: -78; }
}
/* Fades in fast, holds while it travels, and is gone before it closes the loop,
   so the frame is never left with a bright segment parked on it. */
@keyframes trace-fade {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  72%  { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .frame-trace { display: none; }
}

/* =========================================================================
   Sticky scroll story (the scan flow)
   ========================================================================= */
.story { position: relative; padding-bottom: calc(var(--section-y) * 0.45); }
.story__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(30px, 6vw, 90px);
  align-items: start;
}
.story__steps { display: flex; flex-direction: column; gap: clamp(46px, 11vh, 110px); padding-block: 2vh 6vh; }
.story__step { opacity: 0.26; transition: opacity 0.5s var(--ease); }
.story__step.is-active { opacity: 1; }
.story__step h3 {
  font-size: clamp(24px, 2.8vw, 36px);
  margin: 14px 0 12px;
}
.story__step p { color: var(--text-2); max-width: 44ch; }
.story__num {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em;
  color: var(--coral); font-weight: 700;
}
.story__step ul { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
/* Desktop keeps the one sticky device; narrow screens get a shot per step so
   nothing has to stay pinned over the text. */
.story__shot { display: none; }
.story__step li {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-2);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 12px;
}
.story__sticky {
  position: sticky;
  /* Centre the device in the viewport, but never let it slide under the nav. */
  top: max(78px, calc(50vh - 310px));
  display: flex; justify-content: center;
}
.story__sticky .iphone { --screen-w: clamp(214px, 21vw, 282px); }

/* Editorial hierarchy without changing the long-form copy. */
.section-head {
  position: relative;
  padding-left: clamp(20px, 2.6vw, 34px);
  border-left: 2px solid var(--coral);
}
.section-head::after {
  content: "";
  position: absolute;
  left: -2px;
  top: 0;
  width: 2px;
  height: 34px;
  background: var(--text);
}

/* =========================================================================
   Feature grid / cards
   ========================================================================= */
.grid { display: grid; gap: 16px; }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--s-lg);
  position: relative;
  overflow: hidden;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.card__icon {
  width: 40px; height: 40px; border-radius: var(--r-md);
  display: grid; place-items: center; margin-bottom: 18px;
  background: rgba(232, 54, 75, 0.12);
  border: 1px solid rgba(232, 54, 75, 0.28);
}
.card__icon svg { width: 20px; height: 20px; stroke: var(--coral); fill: none; stroke-width: 1.9; }
.card--emom .card__icon { background: rgba(90,168,255,0.12); border-color: rgba(90,168,255,0.30); }
.card--emom .card__icon svg { stroke: var(--t-emom); }
.card--fortime .card__icon { background: rgba(50,212,140,0.12); border-color: rgba(50,212,140,0.30); }
.card--fortime .card__icon svg { stroke: var(--t-fortime); }
.card--intervals .card__icon { background: rgba(175,121,255,0.12); border-color: rgba(175,121,255,0.30); }
.card--intervals .card__icon svg { stroke: var(--t-intervals); }
.card--magenta .card__icon { background: rgba(219,89,184,0.12); border-color: rgba(219,89,184,0.30); }
.card--magenta .card__icon svg { stroke: var(--magenta); }
.card--amrap .card__icon { background: rgba(255,159,10,0.12); border-color: rgba(255,159,10,0.30); }
.card--amrap .card__icon svg { stroke: var(--t-amrap); }
.card h4 { font-size: 18px; font-weight: 780; margin-bottom: 8px; letter-spacing: -0.025em; }
.card p { font-size: 14.5px; color: var(--text-2); line-height: 1.5; }

/* Timer types read as a compact equipment ledger, not another card row. */
.grid--4 { gap: clamp(20px, 3vw, 38px); }
.grid--4 .card {
  border-width: 1px 0 0;
  border-radius: 0;
  background: transparent;
  padding: var(--s-lg) 0 0;
  overflow: visible;
}
.grid--4 .card:hover { transform: none; border-color: var(--coral); }
.grid--4 .card__icon { border-radius: var(--r-sm); }

/* split showcase */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 6vw, 84px);
  align-items: center;
}
.split--rev > *:first-child { order: 2; }
.split__media { display: flex; justify-content: center; }

/* Two devices side by side when a section describes two states of one screen. */
.split__media--pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px);
  align-items: start;
}
.split__media--pair .pair__item { margin: 0; display: grid; justify-items: center; gap: var(--s-smd); }
.split__media--pair .iphone { --screen-w: 100%; width: 100%; }
.split__media--pair figcaption {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
}
.split__media .iphone { --screen-w: clamp(230px, 24vw, 310px); }

.bullets { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.bullets li { display: flex; gap: 13px; align-items: flex-start; font-size: 15.5px; color: var(--text-2); }
.bullets li b { color: var(--text); font-weight: 700; }
.bullets .tick {
  flex: none; width: 19px; height: 19px; border-radius: 50%; margin-top: 2px;
  background: rgba(232,54,75,0.14); border: 1px solid rgba(232,54,75,0.4);
  display: grid; place-items: center;
}
.landscape-band { display: grid; gap: var(--s-lg); justify-items: center; }
.landscape-band__device { width: min(100%, 860px); --frame-w: min(100vw, 860px); }
.landscape-band__caption {
  color: var(--text-2);
  font-size: clamp(14.5px, 1.2vw, 17px);
  max-width: 60ch;
  text-align: center;
}

.bullets .tick::after {
  content: ""; width: 5px; height: 8px; margin-top: -2px;
  border: solid var(--coral); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg);
}

/* =========================================================================
   Video overlay slot (user drops a real device capture here)
   ========================================================================= */
.overlay-slot {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-xxl);
  background:
    radial-gradient(680px 320px at 50% 0%, rgba(232, 54, 75, 0.10), transparent 70%),
    var(--surface);
  padding: clamp(28px, 4vw, 48px);
  display: grid;
  gap: var(--s-lg);
  place-items: center;
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}
.overlay-slot .iphone { --screen-w: clamp(196px, 18vw, 236px); }
/* Placeholder screen: a deliberate empty device, not an unfinished slot. */
.overlay-slot__empty {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s-smd);
  background: linear-gradient(180deg, #06090b, #000);
}
.overlay-slot__empty svg {
  width: 34px; height: 34px;
  fill: none; stroke: var(--text-3); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.overlay-slot__empty span {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-3);
}
.overlay-slot__caption { color: var(--text-2); font-size: 14.5px; max-width: 48ch; }

/* =========================================================================
   Comparison table
   ========================================================================= */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); }
table.compare { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 14.5px; }
table.compare th, table.compare td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line); }
table.compare thead th {
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2);
  font-weight: 750; background: rgba(255,255,255,0.02);
}
table.compare thead th.is-us {
  color: var(--coral);
  font-family: var(--mono);
  font-weight: 800;
  letter-spacing: 0.12em;
  font-size: 12px;
}
table.compare tbody th { font-weight: 650; color: var(--text); }
table.compare td { color: var(--text-2); }
table.compare td.is-us,
table.compare thead th.is-us {
  background: rgba(232, 54, 75, 0.085);
  box-shadow: inset 1px 0 0 rgba(232,54,75,0.22), inset -1px 0 0 rgba(232,54,75,0.22);
}
table.compare td.is-us { color: var(--text); font-weight: 650; }
table.compare td.is-us.yes { color: var(--coral); }
table.compare tbody tr:hover td, table.compare tbody tr:hover th { background-color: rgba(255,255,255,0.018); }
table.compare tbody tr:hover td.is-us { background-color: rgba(232, 54, 75, 0.115); }
table.compare tr:last-child th, table.compare tr:last-child td { border-bottom: 0; }
.yes { color: var(--text-2); font-weight: 700; }
.no { color: var(--text-3); }

/* =========================================================================
   Gallery strip
   ========================================================================= */
.gallery { display: flex; gap: clamp(18px, 3vw, 40px); overflow-x: auto; padding-block: 12px 30px; scroll-snap-type: x mandatory; }
.gallery::-webkit-scrollbar { height: 6px; }
.gallery::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.gallery figure { margin: 0; flex: none; scroll-snap-align: center; text-align: center; }
.gallery::after { content: ""; flex: none; width: max(1px, calc(var(--gutter) - 18px)); }
.gallery .iphone { --screen-w: clamp(184px, 19vw, 230px); }
.gallery figcaption { margin-top: 18px; font-size: 12.5px; color: var(--text-2); letter-spacing: 0.04em; }

/* =========================================================================
   FAQ
   ========================================================================= */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 24px 40px 24px 0;
  font-size: clamp(16px, 1.8vw, 20px); font-weight: 700; letter-spacing: -0.02em;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 12px; height: 12px; margin-top: -6px;
  border: solid var(--text-3); border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg); transition: transform 0.3s var(--ease), border-color 0.3s;
}
.faq details[open] summary::after { transform: rotate(-135deg); border-color: var(--coral); }
.faq p { padding-bottom: 26px; color: var(--text-2); max-width: 72ch; font-size: 15.5px; }

/* =========================================================================
   Final CTA + footer
   ========================================================================= */
.cta-final {
  position: relative; overflow: hidden;
  border-radius: var(--r-xxl);
  border: 1px solid var(--line);
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(232,54,75,0.24), transparent 68%),
    linear-gradient(180deg, var(--surface), var(--surface-dock));
  padding: clamp(44px, 7vw, 92px) clamp(24px, 5vw, 64px);
  text-align: center;
}
.cta-final .h-section { max-width: 18ch; margin-inline: auto; }
.cta-final .lede { margin: 22px auto 0; text-align: center; }
.cta-final .row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.cta-final__icon {
  width: 84px; height: 84px; border-radius: 19px; margin: 0 auto var(--s-lg);
  box-shadow: 0 20px 50px -18px rgba(232, 54, 75, 0.8),
              0 0 0 0.5px rgba(255, 255, 255, 0.10) inset;
}

.footer { border-top: 1px solid var(--line); padding-block: 48px 60px; margin-top: var(--section-y); }
.footer__inner { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; }
.footer__links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer a { font-size: 13.5px; color: var(--text-2); transition: color 0.2s; }
.footer a:hover { color: var(--text); }
.footer small { color: var(--text-3); font-size: 12.5px; }
.footer__legal {
  margin-top: var(--s-lg);
  padding-top: var(--s-md);
  border-top: 1px solid var(--line);
}
.footer__legal small { display: block; max-width: 80ch; line-height: 1.5; font-size: 11.5px; }

/* =========================================================================
   Reveal-on-scroll
   ========================================================================= */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: 0.08s; }
.reveal[data-d="2"] { transition-delay: 0.16s; }
.reveal[data-d="3"] { transition-delay: 0.24s; }
.reveal[data-d="4"] { transition-delay: 0.32s; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1080px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .nav__inner { gap: 12px; }
  .nav__toggle {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 28px;
    margin-left: -8px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
  }
  .nav__toggle span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .nav__toggle i {
    display: block;
    width: 7px;
    height: 7px;
    border: solid currentColor;
    border-width: 0 1px 1px 0;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s var(--ease);
  }
  .nav__toggle[aria-expanded="true"] i { transform: translateY(2px) rotate(225deg); }
  .nav__links {
    position: absolute;
    inset: 62px 0 auto;
    display: none;
    max-height: calc(100vh - 62px);
    overflow-y: auto;
    padding: 4px var(--gutter) 16px;
    border-bottom: 1px solid var(--line);
    background: #000;
  }
  .nav__links.is-open { display: grid; gap: 0; }
  .nav__links a {
    min-height: 52px;
    border-bottom: 1px solid rgba(255,255,255,.1);
    font-size: 15px;
    font-weight: 600;
  }
  .nav__links a:last-child { border-bottom: 0; }
  .nav__links a.is-current::after { inset: 14px auto 14px 0; width: 2px; height: auto; }
  .nav__right { margin-left: auto; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__devices { min-height: 460px; margin-top: 20px; }
  .story__inner { grid-template-columns: 1fr; }
  /* Sticking the device to the top on a narrow screen makes the step text
     scroll underneath it. On mobile the device just leads the section and
     scrolls away with everything else. */
  .story__sticky { display: none; }
  .story__steps { padding-block: 28px 10px; gap: clamp(48px, 9vh, 72px); }
  .story__step { opacity: 1; }
  .story__shot {
    display: flex;
    justify-content: center;
    margin-top: 28px;
  }
  .story__shot .iphone { --screen-w: min(230px, 62vw); }
  .split, .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .split--rev > *:first-child { order: 0; }
}
@media (max-width: 560px) {
  .grid--4 { grid-template-columns: 1fr; }
  .nav__inner { gap: 8px; }
  .nav__brand .wordmark { height: 18px; }
  .nav__right .btn { display: none; }
  .nav__toggle { padding-inline: 10px; }
  body { font-size: 16px; }
  .hero__stats { gap: 14px; }
  .stat__l { font-size: 11.5px; max-width: none; }
  .hero__cta .btn, .cta-final .row .btn { height: 50px; padding-inline: 20px; }
  .overlay-slot { padding: 24px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* i18n: hide the inactive language */
[data-i18n-hide] { display: none !important; }