/* ============================================================
   Marker for Creators — Stanley-style light design
   Look & feel remake of getstanley.ai ("lv2b" light variant),
   accent = blue (from the app UI) instead of Stanley purple.
   Theme: light (default) / dark / system via html[data-theme]
   ============================================================ */

:root {
  --bg: #ffffff;
  --ink: #121212;
  --ink-70: rgba(18, 18, 18, .72);
  --ink-45: rgba(18, 18, 18, .45);
  --hairline: rgba(18, 18, 18, .1);
  --card: #ffffff;
  --card-border: rgba(18, 18, 18, .09);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 20px 50px -24px rgba(0, 0, 0, .32);
  --notif-bg: rgba(255, 255, 255, .82);
  --panel: rgba(18, 18, 18, .035);
  --brand: #2f6fed;
  --brand-soft: #6b9bff;
  --brand-ink: #ffffff;
  --mark: rgba(47, 111, 237, .16);
  --tint: #eef3fd;
  --cta-bg: #121212;
  --cta-glow: rgba(47, 111, 237, .55);
  --nav-bg: rgba(255, 255, 255, .86);
  --footer-word: #14141b;
  --appdark: #0d0d0f;

  --display: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --serif: "Lora", Georgia, serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --type-display: clamp(44px, 6.2vw, 88px);
  --type-section: clamp(32px, 4.2vw, 58px);
  --type-feature: clamp(28px, 3.4vw, 44px);
  --type-lede: clamp(16px, 1.25vw, 17.5px);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  /* exact time-reversal of --ease-out, for playing entrances backwards */
  --ease-in: cubic-bezier(.68, 0, .77, 0);
}

html[data-theme="dark"] {
  --bg: #0b0b0c;
  --ink: #f4f4f5;
  --ink-70: rgba(244, 244, 245, .72);
  --ink-45: rgba(244, 244, 245, .45);
  --hairline: rgba(255, 255, 255, .12);
  --card: #161618;
  --card-border: rgba(255, 255, 255, .09);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 20px 50px -24px rgba(0, 0, 0, .8);
  --notif-bg: rgba(28, 28, 30, .82);
  --panel: rgba(255, 255, 255, .05);
  --mark: rgba(47, 111, 237, .38);
  --tint: #12192a;
  --cta-bg: #1e1e20;
  --nav-bg: rgba(11, 11, 12, .78);
  --footer-word: #f4f4f5;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* The background also lives on html: iOS Safari paints the overscroll and
   the area behind its translucent bottom bar from html, not body. */
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .25s ease, color .25s ease;
}
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--display); margin: 0; }
h1 {
  font-size: var(--type-display);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.032em;
}
h2 {
  font-size: var(--type-section);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.03em;
}
.lede {
  font-size: var(--type-lede);
  line-height: 1.6;
  color: var(--ink-70);
}
.eyebrow {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink-45);
}
a { color: inherit; }

/* Highlight mark behind a key word (Stanley .lv3-mark), fill animates in */
.mark {
  position: relative;
  isolation: isolate;
  border-radius: .2em;
  padding: 0 .12em;
  margin: 0 -.04em;
  white-space: nowrap;
}
.mark-fill {
  position: absolute;
  top: .14em; right: 0; bottom: 0; left: 0;
  border-radius: inherit;
  z-index: -1;
  background: var(--mark);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .9s var(--ease-out) .35s;
}
.mark.is-on .mark-fill { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .mark-fill { transform: none; transition: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 600;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), background-color .2s ease;
}
.btn:active { transform: translateY(1px) scale(.99); }

/* Nav pill (dark, small) */
.btn-nav {
  height: 42px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--cta-bg);
  color: #fff;
  font-size: 14.5px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 1px 2px rgba(0, 0, 0, .18);
}
.btn-nav:hover { box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 6px 16px -6px rgba(0, 0, 0, .35); }

/* Big hero CTA: faithful remake of Stanley's .lv2-wl-btn mechanics, in blue.
   Three layers driven by one rotating angle:
   1. a narrow "comet" (brand -> bright core -> brand) circling the border,
      blending over a constant soft brand ring (semi-transparent border-color)
   2. ::before, a matrix of glowing dots masked to the sector trailing the
      comet, so a sparkle trail chases around inside the pill
   3. ::after, a soft brand glow rising from the bottom edge */
@property --cta-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}
@keyframes cta-sweep { to { --cta-angle: 360deg; } }
.btn-cta {
  --cta-pct: 5%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 64px;
  padding: 18px 34px;
  border-radius: 999px;
  border: 1.5px solid rgba(47, 111, 237, .55);
  background:
    radial-gradient(65% 65% at 50% 100%, rgba(47, 111, 237, .5), rgba(47, 111, 237, 0)) padding-box,
    linear-gradient(178deg, rgba(255, 255, 255, .12), transparent 42%) padding-box,
    linear-gradient(var(--cta-bg), var(--cta-bg)) padding-box,
    conic-gradient(from var(--cta-angle),
      transparent,
      var(--brand) var(--cta-pct),
      #dbe7ff calc(var(--cta-pct) * 2),
      var(--brand) calc(var(--cta-pct) * 3),
      transparent calc(var(--cta-pct) * 4)) border-box;
  color: #fff;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
  box-shadow: inset 0 0 0 1px #1a1a1c, 0 14px 34px -16px var(--cta-glow);
  animation: cta-sweep 3s linear infinite;
}
.btn-cta > * { position: relative; z-index: 2; }
.btn-cta::before {
  /* dot trail chasing the comet (Stanley's signature detail) */
  --dot: 2px;
  content: "";
  position: absolute;
  inset: 3px;
  z-index: 1;
  border-radius: inherit;
  background: radial-gradient(circle at var(--dot) var(--dot), #cfe0ff calc(var(--dot) / 4), transparent 0);
  background-size: calc(var(--dot) * 2) calc(var(--dot) * 2);
  background-repeat: space;
  -webkit-mask-image: conic-gradient(from calc(var(--cta-angle) + 45deg), #000, transparent 10% 90%, #000);
  mask-image: conic-gradient(from calc(var(--cta-angle) + 45deg), #000, transparent 10% 90%, #000);
  opacity: .9;
}
.btn-cta::after {
  /* shine sheet that ROTATES with the comet (same --cta-angle), masked so
     it only glows through near the bottom of the pill: the light inside
     the button visibly travels along with the border sweep */
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120%;
  aspect-ratio: 1;
  z-index: 0;
  transform: translate(-50%, -50%) rotate(var(--cta-angle));
  background: linear-gradient(-50deg, transparent 30%, rgba(107, 155, 255, .6), transparent 70%);
  -webkit-mask-image: radial-gradient(circle at bottom, transparent 40%, #000);
  mask-image: radial-gradient(circle at bottom, transparent 40%, #000);
  opacity: .55;
}
.btn-cta:hover { box-shadow: inset 0 0 0 1px #1a1a1c, 0 18px 44px -16px var(--cta-glow); }
.btn-cta:hover .cta-arrow { transform: translateX(3px); }
.cta-apple { width: 22px; height: 22px; flex: none; }
.cta-arrow { width: 20px; height: 20px; flex: none; transition: transform .2s var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .btn-cta { animation: none; }
  .btn-cta::before { opacity: 0; }
}

/* ---------- CTA variant B (Lex Tang starfield shader) ----------
   Preview with ?cta=b, back to the comet with ?cta=a (persisted in
   localStorage by js/main.js). Bright blue pill with soft bokeh stars
   drifting across it and twinkling, plus a blue outer glow. */
body[data-cta="b"] .btn-cta {
  /* night-sky palette sampled from the onboarding background
     (#192440 center glow fading into #05091d / #030306 edges) */
  border: 0;
  animation: none;
  background:
    radial-gradient(120% 170% at 50% 30%, rgba(56, 92, 175, .55), transparent 62%),
    radial-gradient(130% 190% at 12% -20%, rgba(140, 170, 235, .1), transparent 46%),
    linear-gradient(180deg, #10182c, #05070f);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .12),
    inset 0 0 0 1px rgba(96, 130, 210, .3),
    0 10px 38px -8px rgba(25, 55, 140, .6),
    0 2px 10px rgba(10, 25, 70, .4);
}
/* Variant B keeps its original bokeh-star sheets on the pill. */
body[data-cta="b"] .btn-cta::before {
  inset: 0;
  border-radius: inherit;
  opacity: .75;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .8) 0 .8px, transparent 2px),
    radial-gradient(circle, rgba(255, 255, 255, .55) 0 .7px, transparent 1.6px),
    radial-gradient(circle, rgba(255, 255, 255, .8) 0 1.2px, rgba(200, 226, 255, .28) 2.4px, transparent 4.5px);
  background-size: 94px 58px, 57px 43px, 167px 88px;
  background-position: 0 0, 21px 29px, 53px 9px;
  background-repeat: repeat;
  /* like the reference: stars live near the edges, the center stays
     almost clear so they never fight the label */
  -webkit-mask-image: linear-gradient(90deg, #000 0 26%, rgba(0, 0, 0, .12) 42% 58%, #000 74% 100%);
  mask-image: linear-gradient(90deg, #000 0 26%, rgba(0, 0, 0, .12) 42% 58%, #000 74% 100%);
  animation: cta-stars-drift 16s linear infinite;
}
body[data-cta="b"] .btn-cta::after {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  transform: none;
  border-radius: inherit;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .75) 0 1px, transparent 2.2px) 41px 7px / 131px 66px repeat,
    radial-gradient(circle, rgba(255, 255, 255, .5) 0 .7px, transparent 1.6px) 9px 24px / 77px 51px repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 0 26%, rgba(0, 0, 0, .12) 42% 58%, #000 74% 100%);
  mask-image: linear-gradient(90deg, #000 0 26%, rgba(0, 0, 0, .12) 42% 58%, #000 74% 100%);
  animation:
    cta-stars-twinkle 2.4s ease-in-out infinite alternate,
    cta-stars-drift2 22s linear infinite;
}
@keyframes cta-stars-drift {
  to { background-position: 94px 0, 78px 29px, 220px 9px; }
}
@keyframes cta-stars-drift2 {
  to { background-position: 172px 7px, 86px 24px; }
}
@keyframes cta-stars-twinkle {
  from { opacity: .2; }
  to { opacity: .75; }
}
/* Ghost underline link (Stanley "Also on Telegram") */
.hero-ghost {
  display: inline-block;
  margin-top: 14px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ink-45);
  text-decoration: underline;
  text-decoration-color: var(--hairline);
  text-underline-offset: 3px;
  transition: color .16s var(--ease-out);
}
.hero-ghost:hover { color: var(--ink); }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* iOS: extend the nav surface (and its blur) under the status bar / notch,
     content stays 64px tall below the inset */
  height: calc(64px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) clamp(20px, 4vw, 44px) 0;
  background: transparent;
  transition: background-color .25s ease, box-shadow .25s ease;
}
.nav[data-scrolled="true"] {
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px var(--hairline);
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 800;
  font-size: clamp(20px, 1.8vw, 24px);
  letter-spacing: -.03em;
  color: var(--ink);
}
.nav-logo { width: 30px; height: 30px; border-radius: 8px; }
.nav-sub { color: var(--ink-45); font-weight: 700; }
.nav-actions { display: inline-flex; align-items: center; gap: 18px; }
.nav-link {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink-70);
  text-decoration: none;
  transition: color .16s var(--ease-out);
}
.nav-link:hover { color: var(--ink); }

/* ---------- Hero ---------- */
.hero {
  padding: clamp(120px, 16vh, 190px) clamp(20px, 4vw, 40px) 0;
  text-align: center;
}
.hero-copy { max-width: 1120px; margin: 0 auto; }
/* em-based cap: the wrap point scales with the clamped font-size, so the
   headline breaks after the same word at every viewport width */
.hero-copy h1 { max-width: 12.6em; margin-inline: auto; }
.hero-cta { margin-top: clamp(30px, 4vw, 44px); display: flex; flex-direction: column; align-items: center; }
.hero-trust {
  margin: 22px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-45);
}
.stars { color: var(--brand); letter-spacing: .1em; }
.hero-rating {
  margin: 0 0 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-45);
}

/* Hero stage: phone + floating cards */
.hero-stage {
  position: relative;
  max-width: 1240px;
  margin: clamp(48px, 7vw, 90px) auto 0;
  min-height: clamp(420px, 52vw, 700px);
}
.hero-phone {
  position: relative;
  width: clamp(270px, 33vw, 400px);
  margin: 0 auto;
  z-index: 3;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .22));
  /* the screen radius has to scale with THIS phone, not the viewport:
     every reuse (markers demo, timelines, companion, final CTA) is
     narrower than the hero, and a viewport-based radius rounded their
     corners away from under the frame -> background shone through. */
  container-type: inline-size;
}
.phone-frame { position: relative; z-index: 2; width: 100%; pointer-events: none; }
.phone-screen {
  position: absolute;
  z-index: 1;
  inset: 2.1% 4.4%;
  /* 12.5% of the phone width = the hero's proven 50px at 400px wide;
     the frame's own corner cut-out is a ~16.7% squircle, so this always
     stays safely underneath it. */
  border-radius: 12.5cqw;
  background: var(--appdark);
  overflow: hidden;
}
.phone-screen img { width: 100%; height: 100%; object-fit: cover; }

/* Floating cards */
.float-card { position: absolute; z-index: 2; }
.float-photo {
  left: clamp(-20px, 4vw, 120px);
  top: 12%;
  width: clamp(180px, 22vw, 290px);
  margin: 0;
  background: var(--card);
  border-radius: 24px;
  padding: 7px;
  transform: rotate(-4.3deg);
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .14));
}
.float-photo img { width: 100%; aspect-ratio: 29 / 37; border-radius: 16px; object-fit: cover; }
.photo-pill {
  position: absolute;
  left: 50%; bottom: -26px;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 18px;
  background: var(--card);
  border-radius: 20px;
  padding: 12px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
  white-space: nowrap;
}
.photo-stat { display: flex; align-items: center; gap: 9px; font-weight: 650; font-size: 15px; }
.photo-emoji { font-size: 18px; line-height: 1; }
.float-tweet {
  /* above the phone: the card must not disappear behind the mockup */
  z-index: 5;
  right: clamp(-10px, 5vw, 140px);
  top: 8%;
  width: 264px;
  background: var(--card);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .28);
  border: 1px solid var(--card-border);
  transform: rotate(2deg);
  text-align: left;
}
.mini-head { display: flex; align-items: center; gap: 8px; }
.mini-head img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.mini-head > div { display: flex; flex-direction: column; line-height: 1.2; }
.mini-name { font-weight: 700; font-size: 13px; letter-spacing: -.01em; }
.mini-role { font-size: 12px; color: var(--ink-45); }
.mini-stars { margin: 10px 0 0 !important; font-size: 12px; color: var(--brand) !important; }
.float-tweet p { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-70); }
/* iPhone -> DaVinci Resolve: doodle arrow + mini timeline with markers */
/* The arrow lives INSIDE the timeline card and points at it from above-left */
.hero-arrow {
  position: absolute;
  z-index: 2;
  top: -58px;
  left: 44%;
  width: 60px;
  color: var(--ink-45);
  transform: rotate(8deg);
}
.float-timeline {
  z-index: 4;
  right: clamp(0px, 6vw, 190px);
  bottom: 8%;
  width: min(300px, 74vw);
  /* Fixed dark card in BOTH themes (Resolve-panel gray). No rotation and
     no filter: both caused blurry/ghosted rendering of the tracks. */
  background: #28282e;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  padding: 16px 14px 14px;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .28);
}
/* The hero timeline reuses the onboarding-strip track styles (.tl-video,
   .tl-audio, .tl-wave); only the flags/playhead animation is hero-specific
   (see the .tlm-* rules near the end of this file). */
.float-timeline .tl-video { height: 46px; border-top-width: 9px; }
.float-timeline .tl-audio { height: 30px; }

/* ---------- Companion page ---------- */
/* version/size line inside the download pill, under the label */
.cta-col { display: flex; flex-direction: column; align-items: center; line-height: 1.25; }
.cta-sub {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, .72);
  font-variant-numeric: tabular-nums;
}
.dl-links { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-45); }
.dl-links a { color: var(--ink-45); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hairline); }
.dl-links a:hover { color: var(--ink); }
.hero .statement-sub { margin-top: clamp(40px, 6vw, 70px); }
.companion-stage {
  min-height: 0;
  display: flex;
  justify-content: center;
  padding-bottom: clamp(30px, 5vw, 70px);
}
.companion-stage .ui-window { width: min(480px, 100%); transform: rotate(-1.2deg); text-align: left; }
.steps3 { max-width: 1040px; margin: 0 auto; padding: clamp(40px, 7vw, 100px) clamp(20px, 4vw, 40px); }
.steps3-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step3 {
  padding: clamp(24px, 3vw, 36px);
  border-radius: 24px;
  border: 1px solid var(--card-border);
  background: var(--card);
  box-shadow: var(--card-shadow);
}
.step3-num {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--mark);
  color: var(--brand);
  font-size: 15px;
  font-weight: 800;
}
.step3 h3 { margin-top: 14px; font-size: 19px; font-weight: 750; letter-spacing: -.02em; }
.step3 p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-70); }
@media (max-width: 760px) {
  .steps3-grid { grid-template-columns: 1fr; }
}

/* ---------- Statement ---------- */
.statement {
  max-width: 1100px;
  margin: 0 auto;
  /* Generous air above and below: while scrolling, one statement owns the
     viewport at a time instead of two competing for attention. */
  padding: clamp(200px, 34vh, 420px) clamp(20px, 4vw, 40px) clamp(200px, 34vh, 420px);
  text-align: center;
}
.statement h2 {
  font-size: var(--type-section);
  line-height: 1.04;
  letter-spacing: -.03em;
}
.statement-sub {
  margin: clamp(24px, 3.5vw, 40px) auto 0;
  max-width: 580px;
  font-size: var(--type-lede);
  line-height: 1.6;
  color: var(--ink-70);
}
.nle-eyebrow {
  margin: 18px 0 -12px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-45);
}
.nle-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 3vw, 34px);
  margin-top: 16px;
}
.nle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 650;
  color: var(--ink-70);
}
.nle img { width: 32px; height: 32px; }

/* ---------- Timelines panel (onboarding look) ---------- */
.board-section { padding: clamp(80px, 10vw, 150px) clamp(16px, 4vw, 40px) 0; }
.board-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  width: min(1240px, 100%);
  margin: 0 auto;
  padding: clamp(36px, 5vw, 72px) clamp(24px, 4vw, 64px) clamp(44px, 5.5vw, 84px) clamp(28px, 4.5vw, 72px);
  border-radius: 28px;
  background: var(--tint);
  overflow: hidden;
}
.board-head { max-width: 460px; }
.board-head p.lede { margin: 18px 0 0; max-width: 420px; }
.board-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vw, 24px);
  align-items: stretch;
}

/* Phone-style dark card: timeline list like the app */
.ui-phone {
  background: var(--appdark);
  border-radius: 24px;
  padding: 18px 16px 20px;
  color: #f4f4f5;
  box-shadow: var(--card-shadow);
}
.ui-tc {
  display: inline-block;
  margin: 0 auto 14px;
  padding: 5px 14px;
  border-radius: 999px;
  background: #3a1512;
  color: #ff8a80;
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.ui-phone { text-align: center; }
.ui-session { text-align: left; background: rgba(255, 255, 255, .07); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
.ui-session-name { margin: 0; font-size: 13.5px; font-weight: 700; }
.ui-session-sub { margin: 2px 0 0; font-size: 11.5px; color: rgba(244, 244, 245, .5); }
.ui-tl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  background: rgba(255, 255, 255, .07);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 11px 16px;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 600;
}
.ui-tl.is-active {
  border-color: #34c759;
  background: rgba(52, 199, 89, .1);
}
.ui-active {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: 999px;
  background: #34c759;
  color: #04210d;
}

/* NLE result card */
.ui-nle {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  padding: 18px 16px 20px;
  box-shadow: var(--card-shadow);
}
.ui-nle-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 12px;
}
.ui-nle-head img { width: 26px; height: 26px; }
.ui-seq {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  margin-top: 8px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 600;
}
.ui-seq.is-new { border-color: rgba(47, 111, 237, .5); background: var(--mark); }
.ui-seq-icon {
  width: 18px; height: 13px;
  flex: none;
  border-radius: 3px;
  background: linear-gradient(180deg, #6f9bd8, #4a72ab);
  position: relative;
}
.ui-seq-meta { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--ink-45); white-space: nowrap; }
.board-float {
  position: absolute;
  left: 38%;
  bottom: clamp(20px, 2.6vw, 40px);
  z-index: 3;
  display: flex; align-items: flex-start; gap: 11px;
  width: min(306px, 62%);
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 26px 60px -26px rgba(0, 0, 0, .4);
}
.board-float-icon { width: 32px; height: 32px; border-radius: 8px; flex: none; }
.board-float-title { margin: 0; font-size: 13.5px; font-weight: 650; }
.board-float-text { margin: 2px 0 0; font-size: 13.5px; line-height: 1.36; color: var(--ink-70); }

/* ---------- Testimonials ---------- */
.testimonials { padding: clamp(90px, 12vw, 170px) clamp(20px, 4vw, 40px) clamp(80px, 10vw, 150px); }
.tw-head { max-width: 720px; margin: 0 auto clamp(36px, 5vw, 64px); text-align: center; }
.tw-head h2 { margin-top: 14px; }
/* Quote-card deck, styled after the in-app testimonial screens */
.tw-deck {
  position: relative;
  width: min(680px, 100%);
  min-height: 420px;
  margin: 0 auto;
  perspective: 1600px;
}
.tw-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(34px, 5vw, 56px) clamp(24px, 4vw, 52px);
  border-radius: 28px;
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  text-align: center;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  transition: transform .52s var(--ease-out), opacity .4s ease;
}
.tw-card:active { cursor: grabbing; }
.tw-card img { -webkit-user-drag: none; }
.tw-card[data-depth="0"] { transform: rotate(-.7deg); opacity: 1; z-index: 30; }
.tw-card[data-depth="1"] { transform: translate3d(0, 14px, -70px) rotate(1deg); opacity: 1; z-index: 20; }
.tw-card[data-depth="2"] { transform: translate3d(0, 26px, -140px) rotate(-1.6deg); opacity: 1; z-index: 10; }
.tw-card[data-depth]:not([data-depth="0"]):not([data-depth="1"]):not([data-depth="2"]) {
  transform: translate3d(0, 34px, -200px);
  opacity: 0;
  z-index: 1;
}
.tw-stars { margin: 0; font-size: clamp(24px, 2.6vw, 30px); letter-spacing: .14em; }
.tw-quote {
  margin: 22px 0 0;
  max-width: 500px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(21px, 2.6vw, 30px);
  line-height: 1.3;
  letter-spacing: 0;
}
.tw-person { display: flex; flex-direction: column; align-items: center; margin-top: 26px; line-height: 1.3; }
.tw-pfp { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.tw-name { margin: 10px 0 0; font-size: 16px; font-weight: 700; letter-spacing: -.015em; }
.tw-role { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--ink-45); }
.tw-handle { margin: 0; font-size: 12px; font-weight: 500; color: var(--ink-45); opacity: .65; }
/* Story-style progress dots: gray, the active one widens into a pill and
   its fill runs left-to-right for the 5s the card is shown. */
.tw-pager { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 30px 0 0; padding: 0; list-style: none; }
.tw-pager button {
  position: relative;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(18, 18, 18, .16);
  overflow: hidden;
  cursor: pointer;
  transition: width .5s var(--ease-out), background-color .3s ease;
}
html[data-theme="dark"] .tw-pager button { background: rgba(244, 244, 245, .18); }
.tw-pager button[data-active="true"] { width: 27px; }
.tw-dot-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ink-45);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ---------- Features ---------- */
.features { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px) clamp(40px, 6vh, 80px); }
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(36px, 6vw, 96px);
  padding: clamp(64px, 11vh, 140px) 0;
}
.feature h3 {
  font-size: var(--type-feature);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.03em;
}
.feature-copy p { margin: 18px 0 0; max-width: 460px; font-size: clamp(15.5px, 1.4vw, 17.5px); line-height: 1.6; color: var(--ink-70); }
.feature-link {
  display: inline-block;
  margin-top: 18px;
  font-size: 15px;
  font-weight: 650;
  color: var(--brand);
  text-decoration: none;
}
.feature-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.feature-card { justify-self: center; position: relative; width: 100%; max-width: 480px; }
.feature-flip .feature-copy { order: 2; }
.feature-flip .feature-card { order: 1; }
.guide-sign { font-weight: 650; color: var(--ink); }

/* NLE timeline strip (onboarding hero visual) */
.tlstrip, .clipdemo, .nle-card {
  border-radius: 24px;
  background: var(--panel);
  padding: clamp(24px, 3vw, 40px);
  position: relative;
}
.tl-video {
  position: relative;
  height: 56px;
  border-radius: 6px;
  background: linear-gradient(180deg, #7396c4, #5d80ad);
  border-top: 10px solid rgba(255, 255, 255, .22);
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .35);
}
.tl-flag {
  position: absolute;
  top: -7px;
  width: 15px;
  height: 17px;
  border-radius: 3px;
  clip-path: polygon(0 0, 100% 0, 100% 68%, 50% 100%, 0 68%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}
/* marker colors sampled from the app screenshot in the hero */
.tl-flag.is-red { background: #d64327; }
.tl-flag.is-blue { background: #3d86e2; }
.tl-flag.is-green { background: #52b235; }
.tl-flag.is-orange { background: #e0a012; }
.tl-flag.is-pink { background: #b94578; }
.tl-audio {
  margin-top: 8px;
  height: 34px;
  border-radius: 6px;
  background: linear-gradient(180deg, #8fbf98, #74a87e);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.tl-wave {
  width: 100%;
  height: 22px;
  background-image: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, .85) 0 2px, transparent 2px 5px);
  mask-image: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 5px),
    linear-gradient(#000, #000);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  opacity: .8;
  clip-path: polygon(0 40%, 4% 10%, 8% 55%, 12% 25%, 16% 70%, 20% 15%, 24% 60%, 28% 35%, 32% 80%, 36% 20%, 40% 55%, 44% 30%, 48% 75%, 52% 12%, 56% 58%, 60% 28%, 64% 68%, 68% 18%, 72% 62%, 76% 38%, 80% 78%, 84% 22%, 88% 52%, 92% 32%, 96% 66%, 100% 40%, 100% 100%, 0 100%);
}
.tl-playhead {
  position: absolute;
  top: clamp(16px, 2vw, 30px);
  bottom: 54px;
  width: 2px;
  background: #ff453a;
}
.tl-playhead::before {
  content: "";
  position: absolute;
  top: -7px; left: -5px;
  border: 6px solid transparent;
  border-top: 8px solid #ff453a;
}
.tlstrip-caption { margin: 18px 0 0; font-size: 13.5px; color: var(--ink-45); text-align: center; }

/* Companion window (onboarding mockup) */
.ui-window {
  background: #1a1a1e;
  border-radius: 18px;
  padding: 14px 16px 18px;
  color: #f4f4f5;
  box-shadow: var(--card-shadow);
  transform: rotate(-1.2deg);
}
.ui-window-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.ui-window-bar .dot { width: 11px; height: 11px; border-radius: 50%; }
.dot.is-r { background: #ff5f57; }
.dot.is-y { background: #febc2e; }
.dot.is-g { background: #28c840; }
.ui-window-title { margin-left: 10px; font-size: 12px; color: rgba(244, 244, 245, .5); }
.ui-window-h { margin: 0 0 10px; font-size: 19px; font-weight: 800; }
.ui-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, .07);
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 8px;
}
.ui-badge {
  width: 40px; height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #46587a;
  font-size: 13px;
  font-weight: 800;
}
.ui-row-text { display: flex; flex-direction: column; min-width: 0; flex: 1; text-align: left; }
.ui-row-name { font-size: 14px; font-weight: 700; }
.ui-row-markers { font-size: 12px; font-weight: 600; color: rgba(244, 244, 245, .55); }
.ui-row-sub { font-size: 12px; color: rgba(244, 244, 245, .5); }
.ui-play {
  width: 40px; height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
.ui-play svg { width: 18px; height: 18px; }
.ui-play.is-hot { background: var(--brand); box-shadow: 0 6px 18px -6px var(--cta-glow); }

/* Clip demo (markers on clips) */
.clipdemo-track { display: flex; flex-direction: column; gap: 14px; }
.tl-video.is-clip { height: 50px; }
.tl-video.is-moved { width: 78%; margin-left: 14%; }
.tl-video.is-short { width: 56%; margin-left: 4%; }
.clip-label {
  position: absolute;
  left: 10px; bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
}

/* NLE logos card */
.nle-card { display: flex; flex-direction: column; gap: 10px; }
.nle-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 14.5px;
  font-weight: 700;
}
.nle-tile img { width: 36px; height: 36px; }

/* Notification (used in With panel + hero float) */
.notif {
  display: flex; align-items: center; gap: 10px;
  width: min(386px, 100%);
  min-height: 64px;
  padding: 14px;
  border-radius: 24px;
  background: var(--notif-bg);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .06), 0 12px 30px -12px rgba(0, 0, 0, .3);
  text-align: left;
}
.notif-icon { width: 38px; height: 38px; border-radius: 9px; flex: none; }
.notif-textcol { flex: 1 1 0; min-width: 0; }
.notif-title { font-size: 15px; line-height: 17px; font-weight: 600; letter-spacing: -.014em; display: block; }
.notif p { margin: 2px 0 0; font-size: 15px; line-height: 18px; letter-spacing: -.014em; color: var(--ink-70); }
.notif-time { flex: none; align-self: flex-start; font-size: 14px; color: var(--ink-45); }

/* Image cards */
.img-card {
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
}
.img-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.img-card-tilt { transform: rotate(2deg); }

/* ---------- Time savings (onboarding "Save hours every shoot") ---------- */
.savings { max-width: 620px; margin: 0 auto; padding: clamp(90px, 12vw, 170px) clamp(20px, 4vw, 40px); }
/* extra head start so the section stays out of view while the pain section is centred */
.savings { padding-top: calc(clamp(90px, 12vw, 170px) + clamp(100px, 18vh, 260px)); }
.savings-head { text-align: center; margin-bottom: clamp(30px, 4vw, 48px); }
.savings-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  padding: clamp(20px, 3vw, 32px);
  box-shadow: var(--card-shadow);
}
.savings-banner {
  margin: 0 0 18px;
  padding: 13px 18px;
  border-radius: 14px;
  background: #e6352b;
  color: #fff;
  font-size: 15px;
  text-align: center;
}
.savings-banner strong { font-weight: 800; }
.savings-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 4px;
  border-top: 1px solid var(--hairline);
}
.savings-row:first-of-type { border-top: 0; }
.savings-bar {
  flex: none;
  width: var(--w);
  min-width: 34px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(180deg, #58d06c, #34c759);
  box-shadow: 0 0 18px rgba(52, 199, 89, .35);
  /* grows in when the card scrolls into view (js/main.js), like in the app */
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .85s var(--ease-out);
}
.savings-card[data-grown="true"] .savings-bar { transform: scaleX(1); }
.savings-row:nth-of-type(2) .savings-bar { transition-delay: .07s; }
.savings-row:nth-of-type(3) .savings-bar { transition-delay: .14s; }
.savings-row:nth-of-type(4) .savings-bar { transition-delay: .21s; }
.savings-row:nth-of-type(5) .savings-bar { transition-delay: .28s; }
.savings-val {
  /* sits right at the end of its bar, not in the label column */
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  /* fades in once the bar next to it has finished growing */
  opacity: 0;
  transition: opacity .3s ease .5s;
}
.savings-card[data-grown="true"] .savings-val { opacity: 1; }
.savings-label { margin-left: auto; font-size: 13.5px; color: var(--ink-45); text-align: right; }
@media (prefers-reduced-motion: reduce) {
  .savings-bar { transform: scaleX(1); transition: none; }
  .savings-val { opacity: 1; transition: none; }
}

/* ---------- Without / With ---------- */
.loop { max-width: 1100px; margin: 0 auto; padding: clamp(100px, 13vw, 190px) clamp(20px, 4vw, 40px); }
.loop-head { text-align: center; max-width: 880px; margin: 0 auto clamp(40px, 6vw, 72px); }
.loop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.loop-panel {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: clamp(26px, 3vw, 42px) clamp(20px, 2.6vw, 38px);
  border-radius: 28px;
  background: var(--panel);
  text-align: center;
}
.loop-panel-with { background: var(--tint); }
.loop-tag { font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--ink-45); }
.loop-tag-ok { color: var(--brand); }
.loop-stack { display: flex; flex-direction: column; gap: 10px; width: min(360px, 100%); }
.loop-stack .notif { width: 100%; }
.loop-note { margin: 4px 0 0; font-size: 14px; color: var(--ink-45); }

/* Without: file chaos */
.filemess {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  width: min(380px, 100%);
}
.file {
  padding: 7px 11px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--card);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-45);
  white-space: nowrap;
  opacity: .85;
}
.file:nth-child(3n) { transform: rotate(-2.4deg) translateY(2px); }
.file:nth-child(3n + 1) { transform: rotate(1.8deg); }
.file:nth-child(4n) { transform: rotate(3deg) translateY(-2px); }
.file:nth-child(5n) { opacity: .55; }

/* With: ordered project */
.loop-project {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(360px, 100%);
  text-align: left;
}
.loop-project .ui-seq { margin-top: 0; background: var(--card); }
.loop-strip { margin-top: 8px; }
.loop-strip .tl-video { height: 44px; }
.loop-strip .tl-audio { height: 26px; }

/* ---------- Quote (paywall style: dark navy, serif) ---------- */
.quote { padding: clamp(50px, 7vw, 120px) clamp(16px, 4vw, 40px); }
.quote-card {
  width: min(1040px, 100%);
  margin: 0 auto;
  padding: clamp(64px, 9vw, 130px) clamp(24px, 5vw, 80px);
  border-radius: 28px;
  background: radial-gradient(120% 140% at 50% 0%, #1c2946 0%, #0e1526 55%, #090c15 100%);
  text-align: center;
}
.quote-text {
  margin: 0 auto;
  max-width: 760px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.18;
  color: #fff;
}
.quote-sub {
  margin: 22px auto 0;
  max-width: 460px;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  color: rgba(244, 244, 245, .62);
}

/* ---------- Join (onboarding 4.9 laurel screen) ---------- */
.join { padding: clamp(110px, 15vw, 210px) clamp(20px, 4vw, 40px) clamp(110px, 14vw, 190px); text-align: center; }
/* real 4.9 laurel + stars artwork (viewBox 314.93 x 202.35) */
.join-art {
  display: block;
  width: clamp(190px, 22vw, 250px);
  height: auto;
  aspect-ratio: 314.93 / 202.35;
  margin: 0 auto;
}
/* the SVG artwork is pure white: invisible on the light theme */
[data-theme="light"] .join-art { filter: invert(1); }
.join-title { margin-top: 65px; }

/* ---------- Guide ---------- */
.guide { max-width: 1020px; margin: 0 auto; padding: clamp(60px, 8vw, 130px) clamp(20px, 4vw, 40px) 0; }
.guide .feature { padding-top: 0; }
.guide .img-card img { aspect-ratio: 1 / 1; }
.guide .feature-card { max-width: 380px; }
.guide .feature-copy p + p { margin-top: 14px; }

/* ---------- Pricing ---------- */
.pricing { max-width: 1040px; margin: 0 auto; padding: clamp(90px, 12vw, 170px) clamp(20px, 4vw, 40px); }
.pricing-head { text-align: center; margin-bottom: clamp(36px, 5vw, 60px); }
.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.plan {
  border: 1px solid var(--card-border);
  border-radius: 28px;
  background: var(--card);
  padding: clamp(28px, 3vw, 40px);
  box-shadow: var(--card-shadow);
}
.plan-pro { background: var(--tint); border-color: rgba(47, 111, 237, .3); }
.plan h3 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; }
.plan-badge {
  font-size: 12px; font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-70);
}
.plan-badge-pro { background: var(--brand); color: #fff; }
.plan-tagline { margin: 10px 0 0; font-size: 15px; color: var(--ink-70); }
.plan-plus { margin: 18px 0 0; font-size: 13.5px; font-weight: 650; color: var(--ink-45); }
.plan ul { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.plan li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-70);
}
.plan li::before {
  content: "";
  position: absolute;
  left: 0; top: 4px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--mark);
}
.plan li::after {
  content: "";
  position: absolute;
  left: 4px; top: 8px;
  width: 7px; height: 4px;
  border-left: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
}
.plan-footer, .plan-reframe { margin: 22px 0 0; font-size: 14px; font-weight: 650; color: var(--ink); }
.plan-reframe { line-height: 1.5; }

/* ---------- Final CTA ---------- */
/* Full-bleed light finish: a soft brand glow rising from the bottom, built
   from theme vars so it works light AND dark. Deliberately the opposite of
   the dark quote card right above it, and the dark CTA pill pops on it. */
.final {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  min-height: 85svh;
  display: grid;
  grid-template-columns: min(1040px, 100%);
  place-content: center;
  justify-items: center;
  text-align: center;
  background:
    radial-gradient(90% 70% at 50% 100%,
      color-mix(in srgb, var(--brand) 14%, var(--bg)),
      var(--bg) 70%);
}
.final-card {
  position: relative;
  width: 100%;
  padding: clamp(56px, 8vw, 110px) clamp(24px, 4vw, 60px);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.final::before {
  /* ambient brand-tinted glow drifting across the section */
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -40%;
  width: 90%;
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 22%, transparent), transparent 72%);
  animation: final-drift 9s ease-in-out infinite alternate;
}
@keyframes final-drift {
  from { transform: translate(-72%, 6%) scale(.9); opacity: .4; }
  to { transform: translate(-28%, -14%) scale(1.15); opacity: .75; }
}
/* Top half of the iPhone mockup above the headline: fixed-height crop box
   (aspect-ratio, no layout shift) with the bottom faded out. */
.final-phone-crop {
  position: relative;
  flex: none;
  width: 240px;
  max-width: 60vw;
  /* ~72% of the phone frame's height: the first row of marker buttons
     (red + blue) ends at ~80% of this box, so it is fully visible before
     the fade starts */
  aspect-ratio: 1350 / 1980;
  margin-bottom: clamp(18px, 3vw, 34px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
}
/* no drop-shadow: the crop container would clip it anyway */
.final-phone-crop .final-phone {
  width: 100%;
  margin: 0;
  filter: none;
}
.final-card h2 { color: var(--ink); }
.final-card .lede { margin: 20px auto 0; max-width: 480px; color: var(--ink-70); }
/* the App Store pill keeps its standard design-B dark look: it pops on the
   light background, so no section-specific overrides beyond the spacing */
.final-card .btn-cta { margin-top: 34px; }
.final-card .hero-ghost { color: var(--ink-70); text-decoration: none; }
.final-card .hero-ghost:hover { color: var(--ink); text-decoration: underline; }
.final-card .btn-nav { margin-top: 32px; }
@media (prefers-reduced-motion: reduce) {
  .final::before { animation: none; }
}

/* ---------- FAQ ---------- */
.faq { padding: clamp(30px, 5vw, 80px) clamp(20px, 4vw, 40px) clamp(100px, 13vw, 190px); }
.faq-inner { max-width: 760px; margin: 0 auto; }
.faq h2 { text-align: center; margin-bottom: clamp(32px, 5vw, 56px); }
.faq details {
  border-top: 1px solid var(--hairline);
  padding: 4px 0;
}
.faq details:last-child { border-bottom: 1px solid var(--hairline); }
.faq summary {
  padding: 18px 36px 18px 4px;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -.015em;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink-45);
  transition: transform .25s var(--ease-out);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-body { padding: 0 4px 20px; font-size: 15px; line-height: 1.6; color: var(--ink-70); }
.faq-body a { color: var(--brand); font-weight: 600; }
.waitlist { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.waitlist input {
  flex: 1;
  min-width: 200px;
  height: 42px;
  padding: 0 16px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-family: var(--display);
  font-size: 14.5px;
}
.waitlist input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: transparent; }

/* ---------- Footer ---------- */
.footer { position: relative; padding-top: clamp(48px, 6vw, 80px); padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); overflow: hidden; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(18px, 3vw, 36px);
  padding: 0 clamp(20px, 4vw, 40px);
}
.footer-links a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-45);
  text-decoration: none;
  transition: color .16s ease;
}
.footer-links a:hover { color: var(--ink); }
.footer-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 26px;
  padding: 0 clamp(20px, 4vw, 40px);
}
.footer-credit { margin: 0; font-size: 13px; font-weight: 500; color: var(--ink-45); }
.theme-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--panel);
}
.theme-toggle button {
  display: grid;
  place-items: center;
  width: 25px; height: 25px;
  min-width: 25px; min-height: 25px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-45);
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
/* the whole button reacts, not just the icon */
.theme-toggle button svg { width: 11px; height: 11px; pointer-events: none; }
.theme-toggle button[data-active="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
.footer-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: clamp(8px, 2vw, 24px);
}
.footer-word {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-weight: 800;
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--footer-word);
  white-space: nowrap;
  user-select: none;
}
.footer-word .footer-appicon { width: 1.15em; height: 1.15em; border-radius: 24%; flex: none; }

/* ---------- Sticky mobile CTA ---------- */
/* Fully transparent wrap: layout + safe-area padding only, no background
   or glow behind it. Content stays visible under the button; only the
   fixed .bottom-blur strip below provides any obscuring. */
/* iOS 26 samples fixed elements near the bottom edge that are >=80% of the
   viewport wide to tint its toolbar backing; transparent ones produce an
   OPAQUE white/black bar. So the wrap must be only as wide as the button
   (max-content, centred via left:50%), never a full-width strip. Same
   pattern as getstanley.ai's .lv2b-sticky. */
.sticky-wrap {
  position: fixed;
  left: 50%;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  width: max-content;
  max-width: calc(100vw - 32px);
  pointer-events: none;
  visibility: hidden;
  transform: translate(-50%, calc(100% + 60px));
  opacity: 0;
  /* hide = the entrance played backwards: reversed curve, opacity fading
     over the last .3s of the slide instead of the first */
  transition: transform .35s var(--ease-in), opacity .3s ease .05s, visibility 0s .35s;
}
.sticky-wrap[data-shown="true"] {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
  transition: transform .35s var(--ease-out), opacity .3s ease;
}
.sticky-cta {
  pointer-events: auto;
  white-space: nowrap;
  min-height: 54px;
  padding: 14px 28px;
  font-size: 16px;
}
.sticky-cta, .sticky-cta:hover { box-shadow: inset 0 0 0 1px #1a1a1c; }
body[data-cta="b"] .sticky-cta, body[data-cta="b"] .sticky-cta:hover {
  box-shadow: inset 0 1px rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(96, 130, 210, .3);
}
@media (min-width: 761px) { .sticky-wrap { display: none; } }

/* ---------- Progressive bottom blur (Stanley-style) ----------
   Three stacked backdrop-filter layers with staggered masks, so the blur
   ramps from 0 at the top of the strip to strong at the viewport edge.
   z-index sits BELOW the nav (60) and the sticky CTA (70): both stay sharp. */
/* Two side-by-side halves instead of one strip: iOS 26's toolbar-tint
   sampler only fires on fixed elements >=80% of the viewport wide, so at
   50% each these can never trigger the opaque white/black backing bar.
   Identical blur+mask on both halves makes the centre seam invisible. */
.bottom-blur {
  position: fixed;
  bottom: 0;
  height: calc(110px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  pointer-events: none;
}
.bottom-blur--l { left: 0; right: 50%; }
.bottom-blur--r { left: 50%; right: 0; }
/* Mobile: no DOM blur strip; iOS Safari's own toolbar glass handles the
   bottom edge, and any full-width fixed strip risks the iOS 26 opaque
   toolbar-backing bar. Desktop keeps the strip. */
@media (max-width: 760px) {
  .bottom-blur { display: none; }
}
.bottom-blur > span {
  position: absolute;
  inset: 0;
  display: block;
}
.bottom-blur > span:nth-child(1) {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 38%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 38%);
}
.bottom-blur > span:nth-child(2) {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 34%, #000 72%);
  mask-image: linear-gradient(to bottom, transparent 34%, #000 72%);
}
.bottom-blur > span:nth-child(3) {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 62%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 62%, #000 100%);
}

/* ---------- Meta in-app browser escape sheet (js/store-link.js) ---------- */
.escape-sheet {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.escape-sheet[data-shown="true"] { display: flex; }
.escape-card {
  position: relative;
  width: min(420px, 100%);
  margin-bottom: env(safe-area-inset-bottom);
  padding: 26px 22px 22px;
  border-radius: 24px;
  background: var(--card);
  box-shadow: 0 -10px 60px -20px rgba(0, 0, 0, .6);
  text-align: center;
  animation: escape-up .3s var(--ease-out);
}
@keyframes escape-up { from { transform: translateY(20px); opacity: 0; } }
.escape-close {
  position: absolute;
  top: 10px; right: 12px;
  width: 32px; height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-45);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.escape-title { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
.escape-hint { margin: 10px 0 18px; font-size: 14.5px; line-height: 1.5; color: var(--ink-70); }
.escape-copy { width: 100%; background: var(--brand); }
.escape-copy:hover { background: var(--brand); }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .board-panel { grid-template-columns: 1fr; }
  .board-float { position: static; margin: 18px 0 0; width: min(340px, 100%); }
}
@media (max-width: 760px) {
  .feature, .feature-flip { grid-template-columns: 1fr; gap: 36px; padding: 56px 0; }
  .feature-flip .feature-copy { order: 1; }
  .feature-flip .feature-card { order: 2; }
  .feature-card { justify-self: start; }
  .loop-grid, .pricing-grid { grid-template-columns: 1fr; }
  .board-stage { grid-template-columns: 1fr; }
  .nav-link { display: none; }
  /* Stack order on phones: iPhone -> timeline -> testimonial */
  .hero-stage { min-height: 0; padding-bottom: 40px; display: flex; flex-direction: column; }
  .hero-phone { width: min(80vw, 340px); order: 0; }
  .float-photo { display: none; }
  .float-tweet { position: static; width: min(330px, 100%); margin: 22px auto 0; transform: rotate(1.4deg); order: 2; }
  .hero-arrow { display: none; }
  .float-timeline { position: relative; right: auto; bottom: auto; width: min(300px, 100%); margin: 22px auto 0; order: 1; }
  .footer-meta { flex-direction: column; gap: 14px; }
  .btn-cta { font-size: 16.5px; min-height: 58px; padding: 15px 26px; }
  .cta-apple { width: 19px; height: 19px; }
  .cta-arrow { width: 17px; height: 17px; }
}

/* ---------- Companion walkthrough video ---------- */
.cvideo { max-width: 1040px; margin: 0 auto; padding: clamp(70px, 10vw, 150px) clamp(20px, 4vw, 40px) 0; }
.cvideo-frame {
  aspect-ratio: 16 / 9;
  border-radius: 24px;
  overflow: hidden;
  background: #000;
  box-shadow: var(--card-shadow);
}
.cvideo-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Auth pages (/login, /account) ---------- */
.auth-main {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 110px clamp(16px, 4vw, 40px) 60px;
}
.auth-card {
  width: min(420px, 100%);
  padding: clamp(30px, 5vw, 44px) clamp(24px, 4vw, 40px);
  border-radius: 28px;
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  text-align: center;
}
.auth-icon { margin: 0 auto; border-radius: 14px; }
.auth-title { margin-top: 18px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.auth-sub { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-70); }
.auth-buttons { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s var(--ease-out), box-shadow .15s ease;
}
.auth-btn:active { transform: translateY(1px); }
.auth-btn svg { width: 19px; height: 19px; flex: none; }
.auth-btn-apple { background: var(--cta-bg); color: #fff; }
.auth-btn-google { background: var(--card); color: var(--ink); border: 1px solid var(--hairline); }
.auth-btn-email { background: var(--brand); color: #fff; }
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
  color: var(--ink-45);
  font-size: 12.5px;
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.auth-input {
  height: 48px;
  padding: 0 18px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-family: var(--display);
  font-size: 15px;
  text-align: center;
}
.auth-input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: transparent; }
.auth-soon {
  margin: 18px 0 0;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--mark);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
}
.auth-soon.is-bump { animation: auth-bump .4s var(--ease-out); }
@keyframes auth-bump { 30% { transform: scale(1.03); } }
.auth-legal { margin: 20px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-45); }
.auth-legal a { color: var(--ink-70); }

/* ---------- Auth v2: real login + account ---------- */
.auth-email-pill {
  margin: 0;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--panel);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-70);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auth-links { display: flex; justify-content: center; gap: 18px; margin: 6px 0 0; font-size: 12.5px; }
.auth-links a { color: var(--ink-45); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hairline); }
.auth-links a:hover { color: var(--ink); }
.auth-note {
  margin: 18px 0 0;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--mark);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
}
.auth-note.is-error { background: rgba(230, 53, 43, .12); }
.auth-btn.is-busy, .auth-btn:disabled { opacity: .65; pointer-events: none; }
/* Loading feedback IN the button: small ring next to the label, so a slow
   network or an open sign-in popup never looks like a dead button. */
.auth-btn.is-busy::after, .biz-apply.is-busy::after {
  content: "";
  width: 13px;
  height: 13px;
  flex: none;
  margin-left: 9px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: auth-spin .7s linear infinite;
}
.biz-apply.is-busy { opacity: .8; pointer-events: none; display: inline-flex; align-items: center; }
.auth-spinner {
  width: 30px;
  height: 30px;
  margin: 26px auto;
  border: 3px solid var(--hairline);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: auth-spin .8s linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }
.account-avatar {
  width: 72px;
  height: 72px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--mark) center / cover no-repeat;
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 800;
  color: var(--brand);
}
.account-providers { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-45); }
.account-rows { margin-top: 26px; display: flex; flex-direction: column; gap: 8px; }
.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  text-align: left;
}
.account-row-label { font-size: 14px; font-weight: 650; }
.account-row-soon { font-size: 12.5px; color: var(--ink-45); white-space: nowrap; }
.account-card .auth-buttons { margin-top: 22px; }

/* Emoji avatar exactly like in the apps: colored circle + big emoji */
.account-avatar.is-emoji { font-size: 34px; color: #fff; }

/* ======================= PRO / SHOP (/pro) ======================= */
.account-row-link { text-decoration: none; color: inherit; transition: border-color .18s ease, background .18s ease; }
.account-row-link:hover { border-color: var(--ink-45); background: color-mix(in srgb, var(--ink) 3%, transparent); }

/* Wider than the auth card: the plan rows carry crossed-out anchor prices in
   a discount context and need the horizontal room (Jona 2026-08-05). */
.pro-card { width: min(520px, 100%); max-width: 520px; }
.plan-list { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.plan-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px 16px;
  border: 1.5px solid var(--hairline);
  border-radius: 16px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.plan-row[data-selected="true"] {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 6%, transparent);
}
.plan-radio {
  width: 20px; height: 20px;
  border: 2px solid var(--ink-45);
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  transition: border-color .18s ease;
}
.plan-row[data-selected="true"] .plan-radio { border-color: var(--brand); }
.plan-row[data-selected="true"] .plan-radio::after {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--brand);
}
.plan-name { font-size: 14.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.plan-badge {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
  background: var(--brand);
  border-radius: 999px;
  padding: 3px 8px;
}
.plan-price { margin-left: auto; font-size: 14.5px; font-weight: 800; white-space: nowrap; }
.plan-per { font-size: 12px; font-weight: 600; color: var(--ink-45); }
.plan-buy { width: 100%; margin-top: 18px; justify-content: center; }
.plan-buy:disabled { opacity: .55; cursor: default; }
.plan-fineprint { margin: 14px 0 0; font-size: 12px; line-height: 1.55; color: var(--ink-45); }
.pro-success-emoji { font-size: 52px; line-height: 1; }

/* Plan rows: big per-week comparison price, billed note beneath */
.plan-price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.plan-week { font-size: 16px; font-weight: 800; }
.plan-billed { font-size: 11.5px; font-weight: 600; color: var(--ink-45); }
/* Crossed-out standard price while a discount context is active (Phase Y) */
.plan-anchor { font-weight: 600; color: var(--ink-45); text-decoration: line-through; }

/* Marker Team block on the account page */
.team-block { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hairline); text-align: left; }
.team-title { margin: 0; font-size: 14px; font-weight: 800; }
.team-seats { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-45); }
.team-members { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.team-member {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
}
.team-member-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 17px;
  background: var(--mark);
  flex: none;
}
.team-member-name { font-size: 13.5px; font-weight: 650; }
.team-member-remove {
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--ink-45);
  font-size: 14px;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
}
.team-member-remove:hover { color: #e6352b; background: rgba(230, 53, 43, .08); }
.team-empty { margin: 0; font-size: 12.5px; color: var(--ink-45); }
.team-invite { margin-top: 14px; padding: 14px 16px; border: 1.5px dashed var(--brand); border-radius: 14px; text-align: center; }
.team-code { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: .18em; color: var(--brand); }
.team-code-hint { margin: 6px 0 0; font-size: 11.5px; color: var(--ink-45); }
.team-actions { margin-top: 14px; }

/* Team plan row: sub text under the label + light divider above */
.plan-name { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.plan-name > span:first-child { display: flex; align-items: center; gap: 8px; }
.plan-name-sub { font-size: 11.5px; font-weight: 600; color: var(--ink-45); }
.plan-divider { height: 1px; background: var(--hairline); margin: 6px 2px; }
.plan-redeem-divider { display: flex; align-items: center; gap: 12px; margin: 26px 0 18px; color: var(--ink-45); font-size: 12px; font-weight: 650; }
.plan-redeem-divider::before, .plan-redeem-divider::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.team-redeem-input {
  text-transform: uppercase;
  text-align: center;
  letter-spacing: .3em;
  font-weight: 800;
  font-size: 18px;
}

/* Editable account name */
.account-name { cursor: pointer; border-radius: 10px; padding: 2px 8px; }
.account-name:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.account-name.is-empty { color: var(--ink-45); font-weight: 650; }
.account-name-input {
  border: none;
  border-bottom: 2px solid var(--brand);
  background: transparent;
  text-align: center;
  outline: none;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  display: block;
  color: inherit;
  font-family: inherit;
}

/* Light gray back chevron, top-left INSIDE the card (/pro, /team).
   Icon only, no circle; the 38px box keeps a comfortable tap target. */
.pro-card { position: relative; }
.back-chev {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--ink-45);
  border-radius: 12px;
  transition: color .18s ease;
}
.back-chev svg { width: 22px; height: 22px; }
.back-chev:hover { color: var(--ink); }

/* Billing details form (/billing) */
.billing-form { text-align: left; }
.billing-section { margin: 10px 0 0; font-size: 12px; font-weight: 700; color: var(--ink-45); text-transform: uppercase; letter-spacing: .04em; }
.billing-row { display: flex; gap: 8px; }
.billing-row .auth-input { min-width: 0; }
select.auth-input { appearance: none; -webkit-appearance: none; }

/* ---------- Inline checkout (Paddle payment frame inside our card) ------ */
.checkout-summary { margin: 6px 0 2px; text-align: left; }
.checkout-plan { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0 12px; }
.checkout-plan-name { font-weight: 700; font-size: 15.5px; }
.checkout-plan-billed { font-size: 12.5px; font-weight: 600; color: var(--ink-45); }
.checkout-lines { border-top: 1px solid var(--hairline); padding-top: 10px; }
.checkout-line { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 13.5px; color: var(--ink-70); }
.checkout-line.is-total { padding-top: 8px; margin-top: 6px; border-top: 1px solid var(--hairline); font-size: 15px; font-weight: 700; color: var(--ink); }
.biz-section { margin: 16px 0 4px; text-align: left; border: 1px solid var(--card-border); border-radius: 14px; padding: 14px 16px; background: var(--panel); }
.biz-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14.5px; font-weight: 600; }
.biz-toggle input { width: 18px; height: 18px; accent-color: var(--brand); cursor: pointer; }
.biz-hint { margin: 6px 0 0 28px; font-size: 12.5px; color: var(--ink-45); }
.biz-fields { margin-top: 12px; display: none; flex-direction: column; gap: 10px; }
.biz-section.is-open .biz-fields { display: flex; }
.biz-apply { align-self: center; border: 0; border-radius: 980px; padding: 9px 18px; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--brand-ink); background: var(--brand); cursor: pointer; }
.biz-apply:disabled { opacity: .5; cursor: default; }
.biz-status { font-size: 12.5px; color: var(--ink-45); }
.biz-status.is-ok { color: #1a9c4b; }
.biz-status.is-error { color: #e6352b; }
.paddle-frame-wrap { margin-top: 14px; min-height: 420px; }

/* ---------- Invoice list on /billing ---------- */
.invoice-list { margin: 4px 0 18px; text-align: left; }
.invoice-row { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--hairline); }
.invoice-row:last-child { border-bottom: 0; }
.invoice-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.invoice-date { font-size: 14px; font-weight: 600; }
.invoice-num { font-size: 12px; color: var(--ink-45); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invoice-amount { font-size: 14px; font-weight: 700; white-space: nowrap; }
.invoice-dl { border: 1px solid var(--card-border); border-radius: 980px; padding: 7px 14px; font: inherit; font-size: 12.5px; font-weight: 700; background: var(--panel); color: var(--ink); cursor: pointer; }
.invoice-dl:disabled { opacity: .5; cursor: default; }

/* Billing page: invoice loading + show-more; account row trailing icons */
.invoice-loading { display: flex; justify-content: center; padding: 18px 0; }
.invoice-loading .auth-spinner { width: 22px; height: 22px; }
.invoice-more { display: block; margin: 2px auto 16px; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--brand); cursor: pointer; }

/* Billing form fields: single tidy column, left-aligned (the centered
   pill inputs are a login-screen style, not a form style) */
.billing-fields { display: flex; flex-direction: column; gap: 10px; }
.billing-fields .auth-input, .biz-fields .auth-input { text-align: left; width: 100%; }
.billing-fields .billing-section { margin: 8px 2px 0; }
.billing-fields .billing-row { gap: 10px; }

/* ---------- Creator code note (account, below the card) ---------- */
.auth-main { flex-direction: column; }
.creator-note {
  position: relative;
  margin: 16px 0 0;
  font-size: 12.5px;
  color: var(--ink-45);
  text-align: center;
  cursor: default;
  outline: none;
}
.creator-note strong { font-weight: 700; letter-spacing: .05em; color: var(--ink-70); }
.creator-note-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  width: min(250px, 78vw);
  padding: 10px 13px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--bg);
  font-size: 11.5px;
  line-height: 1.55;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 5;
}
.creator-note:hover .creator-note-tip,
.creator-note:focus .creator-note-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- Phones: the card chrome disappears, content IS the page ---------- */
@media (max-width: 560px) {
  .auth-main { padding: 100px 22px 48px; }
  .auth-card {
    background: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }
}

/* ---------- /pro declutter: benefit checkmarks, quiet cards ---------- */
.pro-benefits {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pro-benefits li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--ink-70);
}
.pro-benefits svg { width: 15px; height: 15px; color: var(--brand); flex: none; }

/* One number per card: the billing detail only appears on the selected plan */
.plan-row .plan-billed { display: none; }
.plan-row[data-selected="true"] .plan-billed { display: block; }

.plan-teamlink {
  display: block;
  margin: 16px 0 0;
  font-size: 12.5px;
  color: var(--ink-45);
  text-align: center;
  text-decoration: none;
}
.plan-teamlink:hover { color: var(--ink-70); text-decoration: underline; }

/* ---------- Companion hero: Wistia demo video ---------- */
.companion-video {
  margin: 34px auto 0;
  width: min(410px, 100%);
  border-radius: 18px;
  overflow: hidden;
}
wistia-player[media-id='iktz0wkygn']:not(:defined) {
  display: block;
  background: center / contain no-repeat url('https://fast.wistia.com/embed/medias/iktz0wkygn/swatch');
  filter: blur(5px);
  padding-top: 125%; /* 0.8 aspect until the player defines itself */
}

/* ---------- Hero live layer: ticking timecode + self-pressing buttons ---------- */
.phone-live { position: absolute; inset: 0; z-index: 2; pointer-events: none; container-type: size; }
.live-timecode {
  position: absolute;
  top: 18%;
  left: 0; right: 0;
  height: 7%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.4cqw;
  font-weight: 500;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.live-press {
  position: absolute;
  /* matches the corner radius of the buttons in the screenshot; the blur
     feathers the edges so tiny alignment differences between browsers
     never show */
  border-radius: 4cqw;
  background: #fff;
  opacity: 0;
  transform: scale(1);
  filter: blur(6px);
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.live-press.is-pressing { animation: press-flash .55s ease-out; }
@keyframes press-flash {
  0% { opacity: 0; transform: scale(1); }
  25% { opacity: .28; transform: scale(.97); }
  100% { opacity: 0; transform: scale(1); }
}

/* ---------- Hero mini timeline: flag + playhead animation ---------- */
.tlm-flags { position: absolute; inset: 0; }
.tlm-flag { margin-left: -7px; animation: flag-pop .34s cubic-bezier(.34, 1.56, .64, 1); }
.tlm-flag.is-static { animation: none; }
@keyframes flag-pop {
  0% { transform: translateY(-8px) scale(.4); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
/* Playhead like DaVinci Resolve: plain red line, rounded head that
   necks down into it. */
.tlm-playhead {
  position: absolute;
  top: 6px; bottom: 12px;
  left: 2%;
  width: 2px;
  background: #eb4d3d;
  will-change: transform;
}
.tlm-playhead::before {
  content: "";
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  width: 15px;
  height: 16px;
  background: #eb4d3d;
  clip-path: path('M2.5 0 H12.5 Q15 0 15 2.5 V6.5 L8.7 16 H6.3 L0 6.5 V2.5 Q0 0 2.5 0 Z');
}

/* ---------- Hero timeline: faithful DaVinci Resolve look ----------
   Colors sampled from a real Resolve timeline: dark timeline surface,
   steel-blue video clip with the subtle thumbnail divider line, dark
   forest-green audio clip with a pale recorded waveform, outlined
   markers sitting at the clip top, outlined playhead. */
.tlm-stage { position: relative; }
.float-timeline .tl-video {
  height: 48px;
  border-top: 0;
  /* flags live INSIDE the clip and get clipped away at its edges */
  overflow: hidden;
  border-radius: 7px 7px 2px 2px;
  background: linear-gradient(180deg,
    #446581 0, #446581 40%,
    rgba(15, 20, 28, .2) 40%, rgba(15, 20, 28, .2) calc(40% + 1px),
    #446581 calc(40% + 1px));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(0, 0, 0, .18);
}
.float-timeline .tl-audio {
  margin-top: 3px;
  height: 36px;
  border-radius: 2px 2px 7px 7px;
  display: block;
  overflow: hidden;
  background: #38694d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -1px 0 rgba(0, 0, 0, .18);
}
.float-timeline .tl-wave,
.painsec .tl-wave {
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20420%2036%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2018.0%20L0.0%2012.8%20L2.0%209.0%20L4.0%209.7%20L6.0%2014.7%20L8.0%2016.6%20L10.0%2016.8%20L12.0%2016.8%20L14.0%2016.2%20L16.0%2015.9%20L18.0%2010.1%20L20.0%2014.7%20L22.0%2016.4%20L24.0%2015.0%20L26.0%2014.7%20L28.0%2015.2%20L30.0%2014.4%20L32.0%2016.0%20L34.0%2016.8%20L36.0%2016.8%20L38.0%2015.5%20L40.0%2016.6%20L42.0%2016.5%20L44.0%2015.5%20L46.0%2013.4%20L48.0%2013.8%20L50.0%2015.3%20L52.0%2016.8%20L54.0%2015.6%20L56.0%2014.0%20L58.0%2013.1%20L60.0%2012.8%20L62.0%2011.3%20L64.0%2011.4%20L66.0%2013.3%20L68.0%2012.7%20L70.0%2011.3%20L72.0%2011.8%20L74.0%2013.9%20L76.0%2015.3%20L78.0%2016.8%20L80.0%2016.8%20L82.0%2016.8%20L84.0%2016.8%20L86.0%2016.6%20L88.0%2015.2%20L90.0%2016.2%20L92.0%2016.8%20L94.0%2014.8%20L96.0%2016.2%20L98.0%2016.8%20L100.0%2016.4%20L102.0%2016.8%20L104.0%2016.8%20L106.0%2014.8%20L108.0%2014.7%20L110.0%2010.2%20L112.0%2012.7%20L114.0%2011.4%20L116.0%2011.9%20L118.0%209.1%20L120.0%2012.6%20L122.0%2011.3%20L124.0%2014.8%20L126.0%2011.6%20L128.0%2014.9%20L130.0%2016.0%20L132.0%2016.6%20L134.0%2015.0%20L136.0%2015.2%20L138.0%2016.8%20L140.0%2016.8%20L142.0%2015.4%20L144.0%2016.8%20L146.0%2016.7%20L148.0%2013.4%20L150.0%2014.4%20L152.0%2013.5%20L154.0%2014.1%20L156.0%2012.9%20L158.0%2011.7%20L160.0%2012.9%20L162.0%2010.8%20L164.0%209.4%20L166.0%208.4%20L168.0%208.3%20L170.0%207.8%20L172.0%2011.4%20L174.0%209.4%20L176.0%207.5%20L178.0%205.5%20L180.0%206.7%20L182.0%208.0%20L184.0%207.5%20L186.0%206.0%20L188.0%205.3%20L190.0%207.2%20L192.0%205.4%20L194.0%204.3%20L196.0%205.7%20L198.0%206.4%20L200.0%204.3%20L202.0%204.8%20L204.0%203.8%20L206.0%205.4%20L208.0%203.6%20L210.0%205.2%20L212.0%203.5%20L214.0%204.2%20L216.0%201.8%20L218.0%205.1%20L220.0%203.5%20L222.0%203.5%20L224.0%204.8%20L226.0%205.7%20L228.0%205.3%20L230.0%205.7%20L232.0%203.9%20L234.0%204.0%20L236.0%203.5%20L238.0%203.5%20L240.0%203.5%20L242.0%205.6%20L244.0%203.4%20L246.0%208.5%20L248.0%207.5%20L250.0%208.2%20L252.0%208.0%20L254.0%209.7%20L256.0%2010.8%20L258.0%209.6%20L260.0%209.4%20L262.0%207.5%20L264.0%207.0%20L266.0%207.0%20L268.0%207.2%20L270.0%207.3%20L272.0%206.4%20L274.0%204.5%20L276.0%204.2%20L278.0%203.5%20L280.0%205.2%20L282.0%207.0%20L284.0%208.9%20L286.0%207.7%20L288.0%209.2%20L290.0%208.5%20L292.0%206.8%20L294.0%208.0%20L296.0%208.5%20L298.0%206.3%20L300.0%207.8%20L302.0%207.8%20L304.0%209.1%20L306.0%205.0%20L308.0%205.7%20L310.0%207.8%20L312.0%209.7%20L314.0%208.5%20L316.0%2010.2%20L318.0%2012.2%20L320.0%2013.3%20L322.0%2013.6%20L324.0%2012.2%20L326.0%2013.7%20L328.0%2013.4%20L330.0%2011.9%20L332.0%2011.7%20L334.0%2015.0%20L336.0%2016.8%20L338.0%2016.8%20L340.0%2016.8%20L342.0%2016.6%20L344.0%2016.8%20L346.0%2016.7%20L348.0%2016.8%20L350.0%2016.8%20L352.0%2016.8%20L354.0%2015.7%20L356.0%2015.7%20L358.0%2013.8%20L360.0%2016.8%20L362.0%2016.6%20L364.0%2016.7%20L366.0%2016.8%20L368.0%2016.8%20L370.0%2015.3%20L372.0%2015.3%20L374.0%2013.2%20L376.0%2011.7%20L378.0%2011.1%20L380.0%209.5%20L382.0%2013.7%20L384.0%2014.8%20L386.0%2016.6%20L388.0%2014.9%20L390.0%2015.9%20L392.0%2016.8%20L394.0%2016.8%20L396.0%2016.8%20L398.0%2014.7%20L400.0%2015.8%20L402.0%2016.7%20L404.0%2016.8%20L406.0%2016.8%20L408.0%2016.8%20L410.0%2016.8%20L412.0%2016.8%20L414.0%2014.2%20L416.0%2016.8%20L418.0%2016.7%20L420%2018.0%20L418.0%2019.3%20L416.0%2019.2%20L414.0%2021.8%20L412.0%2019.2%20L410.0%2019.2%20L408.0%2019.2%20L406.0%2019.2%20L404.0%2019.2%20L402.0%2019.3%20L400.0%2020.2%20L398.0%2021.3%20L396.0%2019.2%20L394.0%2019.2%20L392.0%2019.2%20L390.0%2020.1%20L388.0%2021.1%20L386.0%2019.4%20L384.0%2021.2%20L382.0%2022.3%20L380.0%2026.5%20L378.0%2024.9%20L376.0%2024.3%20L374.0%2022.8%20L372.0%2020.7%20L370.0%2020.7%20L368.0%2019.2%20L366.0%2019.2%20L364.0%2019.3%20L362.0%2019.4%20L360.0%2019.2%20L358.0%2022.2%20L356.0%2020.3%20L354.0%2020.3%20L352.0%2019.2%20L350.0%2019.2%20L348.0%2019.2%20L346.0%2019.3%20L344.0%2019.2%20L342.0%2019.4%20L340.0%2019.2%20L338.0%2019.2%20L336.0%2019.2%20L334.0%2021.0%20L332.0%2024.3%20L330.0%2024.1%20L328.0%2022.6%20L326.0%2022.3%20L324.0%2023.8%20L322.0%2022.4%20L320.0%2022.7%20L318.0%2023.8%20L316.0%2025.8%20L314.0%2027.5%20L312.0%2026.3%20L310.0%2028.2%20L308.0%2030.3%20L306.0%2031.0%20L304.0%2026.9%20L302.0%2028.2%20L300.0%2028.2%20L298.0%2029.7%20L296.0%2027.5%20L294.0%2028.0%20L292.0%2029.2%20L290.0%2027.5%20L288.0%2026.8%20L286.0%2028.3%20L284.0%2027.1%20L282.0%2029.0%20L280.0%2030.8%20L278.0%2032.5%20L276.0%2031.8%20L274.0%2031.5%20L272.0%2029.6%20L270.0%2028.7%20L268.0%2028.8%20L266.0%2029.0%20L264.0%2029.0%20L262.0%2028.5%20L260.0%2026.6%20L258.0%2026.4%20L256.0%2025.2%20L254.0%2026.3%20L252.0%2028.0%20L250.0%2027.8%20L248.0%2028.5%20L246.0%2027.5%20L244.0%2032.6%20L242.0%2030.4%20L240.0%2032.5%20L238.0%2032.5%20L236.0%2032.5%20L234.0%2032.0%20L232.0%2032.1%20L230.0%2030.3%20L228.0%2030.7%20L226.0%2030.3%20L224.0%2031.2%20L222.0%2032.5%20L220.0%2032.5%20L218.0%2030.9%20L216.0%2034.2%20L214.0%2031.8%20L212.0%2032.5%20L210.0%2030.8%20L208.0%2032.4%20L206.0%2030.6%20L204.0%2032.2%20L202.0%2031.2%20L200.0%2031.7%20L198.0%2029.6%20L196.0%2030.3%20L194.0%2031.7%20L192.0%2030.6%20L190.0%2028.8%20L188.0%2030.7%20L186.0%2030.0%20L184.0%2028.5%20L182.0%2028.0%20L180.0%2029.3%20L178.0%2030.5%20L176.0%2028.5%20L174.0%2026.6%20L172.0%2024.6%20L170.0%2028.2%20L168.0%2027.7%20L166.0%2027.6%20L164.0%2026.6%20L162.0%2025.2%20L160.0%2023.1%20L158.0%2024.3%20L156.0%2023.1%20L154.0%2021.9%20L152.0%2022.5%20L150.0%2021.6%20L148.0%2022.6%20L146.0%2019.3%20L144.0%2019.2%20L142.0%2020.6%20L140.0%2019.2%20L138.0%2019.2%20L136.0%2020.8%20L134.0%2021.0%20L132.0%2019.4%20L130.0%2020.0%20L128.0%2021.1%20L126.0%2024.4%20L124.0%2021.2%20L122.0%2024.7%20L120.0%2023.4%20L118.0%2026.9%20L116.0%2024.1%20L114.0%2024.6%20L112.0%2023.3%20L110.0%2025.8%20L108.0%2021.3%20L106.0%2021.2%20L104.0%2019.2%20L102.0%2019.2%20L100.0%2019.6%20L98.0%2019.2%20L96.0%2019.8%20L94.0%2021.2%20L92.0%2019.2%20L90.0%2019.8%20L88.0%2020.8%20L86.0%2019.4%20L84.0%2019.2%20L82.0%2019.2%20L80.0%2019.2%20L78.0%2019.2%20L76.0%2020.7%20L74.0%2022.1%20L72.0%2024.2%20L70.0%2024.7%20L68.0%2023.3%20L66.0%2022.7%20L64.0%2024.6%20L62.0%2024.7%20L60.0%2023.2%20L58.0%2022.9%20L56.0%2022.0%20L54.0%2020.4%20L52.0%2019.2%20L50.0%2020.7%20L48.0%2022.2%20L46.0%2022.6%20L44.0%2020.5%20L42.0%2019.5%20L40.0%2019.4%20L38.0%2020.5%20L36.0%2019.2%20L34.0%2019.2%20L32.0%2020.0%20L30.0%2021.6%20L28.0%2020.8%20L26.0%2021.3%20L24.0%2021.0%20L22.0%2019.6%20L20.0%2021.3%20L18.0%2025.9%20L16.0%2020.1%20L14.0%2019.8%20L12.0%2019.2%20L10.0%2019.2%20L8.0%2019.4%20L6.0%2021.3%20L4.0%2026.3%20L2.0%2027.0%20L0.0%2023.2%20Z%22%20fill%3D%22%23daefe3%22%20fill-opacity%3D%220.95%22%2F%3E%3C%2Fsvg%3E") 0 0 / 420px 100% repeat-x;
  -webkit-mask: none;
  mask: none;
  clip-path: none;
  opacity: 1;
}
/* Markers: Resolve shape (rounded top, pointed bottom) with a dark
   outline, sitting AT the top edge of the video clip. */
.float-timeline .tl-flag {
  top: 2px;
  width: 14px;
  height: 17px;
  border-radius: 0;
  clip-path: path('M3 0 H11 Q14 0 14 3 V11.5 L7 17 L0 11.5 V3 Q0 0 3 0 Z');
  /* soft outline: the marker's own color darkened, slightly translucent */
  background: color-mix(in srgb, color-mix(in srgb, var(--fc, #dd3c27), #10141b 55%) 80%, transparent);
  box-shadow: none;
}
.float-timeline .tl-flag::after {
  content: "";
  position: absolute;
  left: .9px;
  top: .9px;
  width: 12.2px;
  height: 15.2px;
  clip-path: path('M2.4 0 H9.8 Q12.2 0 12.2 2.4 V10.1 L6.1 15.2 L0 10.1 V2.4 Q0 0 2.4 0 Z');
  background: var(--fc, #dd3c27);
}
.float-timeline .tl-flag.is-red { --fc: #dd3c27; }
.float-timeline .tl-flag.is-blue { --fc: #2f9cf6; }
.float-timeline .tl-flag.is-green { --fc: #17a23c; }
.float-timeline .tl-flag.is-pink { --fc: #c94a94; }
/* Playhead gets its Resolve outline */
.tlm-playhead {
  top: -8px;
  bottom: -2px;
  left: 75%;
  background: #e64b3d;
  filter:
    drop-shadow(1px 0 0 rgba(12, 14, 18, .8)) drop-shadow(-1px 0 0 rgba(12, 14, 18, .8))
    drop-shadow(0 1px 0 rgba(12, 14, 18, .8)) drop-shadow(0 -1px 0 rgba(12, 14, 18, .8));
}
.tlm-playhead::before { background: #e64b3d; }

.fgal { max-width: 1180px; margin: 0 auto; padding: clamp(50px, 7vw, 100px) 0; }
.fgal-head { padding: 0 clamp(20px, 4vw, 40px); margin-bottom: clamp(26px, 4vw, 44px); }
.fgal-head h2 { font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -.025em; margin-top: 10px; }
.fgal-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px clamp(20px, 4vw, 40px) 18px;
  scrollbar-width: none;
}
.fgal-track::-webkit-scrollbar { display: none; }
.fcard { flex: none; width: min(78vw, 380px); scroll-snap-align: start; }
.fcard-visual {
  height: 340px;
  border-radius: 24px;
  border: 1px solid var(--card-border);
  background: var(--card);
  box-shadow: var(--card-shadow);
  display: grid;
  place-items: center;
  padding: 28px;
  overflow: hidden;
}
.fcard-cap { margin: 16px 6px 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-70); }
.fcard-cap b { color: var(--ink); font-weight: 750; }
.fgal-nav { display: flex; justify-content: flex-end; gap: 10px; padding: 6px clamp(20px, 4vw, 40px) 0; }
.fgal-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--card);
  color: var(--ink-70);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s ease, color .15s ease;
}
.fgal-btn:hover { background: var(--mark); color: var(--brand); }
.fgal-btn svg { width: 18px; height: 18px; }

/* Feature visuals */
.fv-phone { width: min(240px, 100%); background: #17181c; border-radius: 22px; padding: 18px 14px; }
.fv-phone .ui-tc { margin-bottom: 14px; }
.fv-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fv-btn {
  display: grid;
  place-items: center;
  height: 52px;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
}
.fv-btn.is-red { background: #d64327; }
.fv-btn.is-blue { background: #3d86e2; }
.fv-btn.is-green { background: #52b235; }
.fv-btn.is-pink { background: #b94578; }
.fv-watch {
  width: 172px;
  background: #17181c;
  border-radius: 40px;
  padding: 14px;
  border: 5px solid #2c2d33;
  box-shadow: 12px 0 0 -4px #3a3b42; /* digital crown hint */
}
.fv-watch-screen { display: flex; flex-direction: column; gap: 10px; }
.fv-watch-tc { text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 17px; font-weight: 600; color: rgba(255, 255, 255, .85); font-variant-numeric: tabular-nums; }
.fv-watch .fv-btn { height: 44px; border-radius: 14px; }
.fv-tls { width: min(260px, 100%); }
.fv-scan { position: relative; width: 100%; max-width: 280px; padding: 44px 20px; text-align: center; }
.fv-corner { position: absolute; width: 26px; height: 26px; border: 2.5px solid var(--ink-45); border-radius: 2px; }
.fv-corner.is-tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 10px; }
.fv-corner.is-tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 10px; }
.fv-corner.is-bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 10px; }
.fv-corner.is-br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 10px; }
.fv-scanline {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 20%;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
  opacity: .7;
  animation: fv-scan 2.6s ease-in-out infinite alternate;
}
@keyframes fv-scan { from { top: 16%; } to { top: 82%; } }
@media (prefers-reduced-motion: reduce) { .fv-scanline { animation: none; top: 50%; } }
.fv-scan-label { margin: 0; font-size: 16.5px; font-weight: 750; letter-spacing: -.01em; }
.fv-scan-sub { margin: 8px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-45); }
.fv-anticam .fv-scan-label { font-size: 18px; }
.fv-note { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.fv-note-bubble {
  align-self: center;
  background: var(--mark);
  color: var(--ink);
  border: 1px solid rgba(47, 111, 237, .25);
  border-radius: 16px 16px 16px 4px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
}
.fv-clips { width: 100%; display: flex; flex-direction: column; gap: 14px; }
.fv-window { width: 100%; text-align: left; }
.fv-tcbox {
  width: 100%;
  max-width: 280px;
  background: #17181c;
  border-radius: 20px;
  padding: 26px 22px;
  text-align: center;
}
.fv-tcbox-label { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.fv-tcbox-tc { margin: 12px 0 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 30px; font-weight: 600; color: rgba(255, 255, 255, .9); font-variant-numeric: tabular-nums; }
.fv-tcbox-pill {
  display: inline-block;
  margin-top: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(82, 178, 53, .16);
  color: #52b235;
  font-size: 12px;
  font-weight: 700;
}
.fv-nles { display: flex; flex-direction: column; gap: 12px; width: min(240px, 100%); }
.fv-watch-btns { display: flex; flex-direction: column; gap: 8px; }
.howhead { padding: clamp(70px, 10vh, 140px) clamp(20px, 4vw, 40px) 0; }

/* ---------- How it works: 3 steps with Apple-style plus popovers ---------- */
.howb { max-width: 1180px; margin: 0 auto; padding: clamp(70px, 10vh, 140px) clamp(20px, 4vw, 40px); }
.howb .tw-head { margin-bottom: clamp(30px, 4vw, 50px); }
.howb .statement-sub { margin-top: 14px; }
.howb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.howb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 34px);
  border-radius: 28px;
  border: 1px solid var(--card-border);
  background: var(--card);
  box-shadow: var(--card-shadow);
}
.howb-eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-45); }
.howb-card h3 { font-size: clamp(21px, 2.4vw, 26px); font-weight: 800; letter-spacing: -.02em; }
.howb-text { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-70); }
.howb-visual { flex: 1; display: grid; place-items: center; padding: 26px 0 10px; min-height: 230px; }
.howb-visual .fv-scan { max-width: 240px; }
.howb-visual .fv-phone { width: min(210px, 100%); }
.howb-visual .ui-window { width: 100%; text-align: left; }
.howb-plus {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: var(--ink);
  color: var(--bg);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .15s ease;
}
.howb-plus:hover { transform: scale(1.08); }
.howb-plus svg { width: 18px; height: 18px; }
@media (max-width: 860px) {
  .howb-grid { grid-template-columns: 1fr; }
  .howb-visual { min-height: 0; }
}

.howb-pop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; }
.howb-pop[hidden] { display: none; }
.howb-pop-backdrop { position: absolute; inset: 0; background: rgba(10, 12, 16, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .28s ease; }
.howb-pop-card {
  position: relative;
  width: min(560px, 100%);
  border-radius: 28px;
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: 0 30px 80px -20px rgba(10, 12, 16, .4);
  padding: clamp(26px, 4vw, 40px);
  opacity: 0;
  transform: translateY(24px) scale(.97);
  transition: opacity .28s ease, transform .28s cubic-bezier(.3, .7, .3, 1);
}
.howb-pop.is-open .howb-pop-backdrop { opacity: 1; }
.howb-pop.is-open .howb-pop-card { opacity: 1; transform: none; }
.howb-pop-card h3 { font-size: clamp(22px, 3vw, 28px); font-weight: 800; letter-spacing: -.02em; }
.howb-pop-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: var(--mark);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.howb-pop-close svg { width: 16px; height: 16px; }
.howb-list { margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.howb-list li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.55; color: var(--ink-70); }
.howb-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--mark);
}
.howb-list li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
}
@media (max-width: 560px) {
  .howb-pop { padding: 0; align-items: end; justify-items: stretch; }
  .howb-pop-card { width: 100%; border-radius: 24px 24px 0 0; transform: translateY(40px); }
  .howb-pop.is-open .howb-pop-card { transform: none; }
}


/* ---------- Markers demo (phone left, big timeline right) ---------- */
/* directly follows the problem statement, so it opens with statement-like air */
.mdemo {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(90px, 14vh, 200px) clamp(20px, 4vw, 40px) clamp(70px, 10vh, 140px);
}
.mdemo .tw-head { margin-bottom: clamp(30px, 4vw, 50px); }
.mdemo .statement-sub { margin-top: 14px; }
.mdemo .nle-row { margin-top: 34px; }
.mdemo-stage {
  /* mirrored flex metrics, so absolutely positioned annotations can be
     anchored to the device / timeline columns without JS */
  --mdemo-gap: clamp(24px, 4vw, 56px);
  --mdemo-devw: min(300px, 40vw);
  --mdemo-tlw: min(440px, calc(100% - var(--mdemo-devw) - var(--mdemo-gap)));
  position: relative; display: flex; align-items: center; justify-content: center; gap: var(--mdemo-gap);
}

/* Device slot: iPhone and Apple Watch share ONE grid cell with a fixed
   box (phone aspect ratio), so the tab toggle is a pure opacity crossfade
   and can never shift the layout. */
.mdemo-device {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: min(300px, 40vw);
  aspect-ratio: 1350 / 2760;
}
.mdemo-device > * {
  grid-area: 1 / 1;
  /* opacity + scale only. No filter: iOS Safari renders blur crossfades
     unreliably on composited layers. */
  transition: opacity .38s ease, transform .38s ease;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.mdemo-device .dev-hidden {
  opacity: 0;
  -webkit-transform: translateZ(0) scale(.965);
  transform: translateZ(0) scale(.965);
  pointer-events: none;
}
.mdemo-stage .mdemo-phone {
  /* no drop-shadow: the shared slot/crossfade must stay filter-free */
  filter: none;
  position: relative;
  inset: auto;
  margin: 0;
  width: 100%;
  transform: translateZ(0);
}
.seg {
  display: inline-flex;
  gap: 4px;
  margin-top: 18px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--card);
}
.seg-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 8px 18px;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-45);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  transition: background-color .25s ease, color .25s ease;
}
.seg-btn.is-on { background: var(--mark); color: var(--brand); }
.mdemo-stage .mdemo-timeline {
  position: relative;
  inset: auto;
  transform: translateZ(0);
  margin: 0;
  flex: 1 1 auto;
  max-width: 440px;
  width: auto;
}

/* Real Apple Watch Ultra mockup (watch-body.png, 563x900, band included).
   The body render is OPAQUE black where the display sits, so the screen
   layer goes ON TOP of it. Display glass measured with PIL:
   x 43..490, y 182..722  ->  7.64% / 20.22% / 79.57% / 60.11%,
   corner radius ~136px of a 448px-wide glass = 30% of the screen width. */
/* No filter / box-shadow anywhere on the watch: a drop-shadow would also
   shadow the transparent band alpha and read as a rendering glitch. */
.mwatch {
  position: relative;
  flex: 0 0 auto;
  width: 222px;
  max-width: 78%;
  filter: none;
  box-shadow: none;
}
.mwatch img { box-shadow: none; }
.mwatch-body { position: relative; z-index: 1; display: block; width: 100%; pointer-events: none; }
.mwatch-screen {
  position: absolute;
  z-index: 2;
  left: 7.64%;
  top: 20.22%;
  width: 79.57%;
  height: 60.11%;
  border-radius: 30% / 25%;
  overflow: hidden;
  background: #000;
  container-type: size;
}
.mwatch-ui { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Invisible tap targets over the 4 marker buttons, same shine as .live-press */
.mwatch .watch-press {
  position: absolute;
  border: 0;
  border-radius: 24%;
  background: #fff;
  opacity: 0;
  transform: scale(1);
  filter: blur(6px);
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mwatch .watch-press.is-pressing { animation: press-flash .55s ease-out; }
/* Live timecode over the baked-in red line at the bottom of the screenshot */
.mwatch-tc {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #000;
  color: #e5524d;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 8.5cqw;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.mwatch-tc i { width: 6px; height: 6px; border-radius: 50%; background: #e5524d; flex: none; }
/* "Try it yourself" annotation with a doodle arrow pointing at the device.
   Desktop: floats in the empty space above the timeline (absolute, so it
   can never shift the stage). Mobile: in flow between device and timeline
   with the arrow rotated to point up. */
.mdemo-hint {
  position: absolute;
  z-index: 3;
  /* roughly halfway between the phone's top edge and the timeline card,
     sitting over the timeline's left third; the doodle points down-left
     back at the device */
  top: 26%;
  left: calc((100% - var(--mdemo-devw) - var(--mdemo-gap) - var(--mdemo-tlw)) / 2
             + var(--mdemo-devw) + var(--mdemo-gap) + var(--mdemo-tlw) * .06);
  right: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink-45);
  pointer-events: none;
}
.mdemo-hint-arrow { width: 24px; flex: none; }
.mdemo-hint-text {
  font-family: 'Caveat', cursive;
  font-weight: 500;
  font-style: normal;
  font-size: 19px;
  line-height: 1.2;
  white-space: nowrap;
}
@media (max-width: 760px) {
  /* Phones: one device slot on top, timeline below */
  .mdemo-stage { flex-direction: column; }
  .mdemo-hint {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    flex-direction: column;
    gap: 8px;
    /* the column stage gap is ~24px on phones (clamp(24px, 4vw, 56px)).
       Above: 24 + 10 = 34px -> ~17px, below: 24 + 4 = 28px -> ~14px.
       Negative margins pull the hint back into the flex gap. */
    margin: -7px 0 -10px;
  }
  /* the doodle points down-left by default: 135deg turns it upwards */
  .mdemo-hint-arrow { width: 22px; transform: rotate(135deg); }
  .mdemo-device {
    order: 0;
    width: min(280px, 74vw);
    /* the slot collapses to the visible device (the watch is much shorter
       than the phone); JS pins the px height, the timeline moves with it */
    aspect-ratio: auto;
    align-items: start;
    overflow: hidden;
    transition: height .45s ease;
  }
  .mdemo-hint { order: 1; }
  .mdemo-stage .mdemo-timeline { order: 2; width: 100%; max-width: none; }
}

/* (the old CSS-drawn .demo-iphone frame is gone: every demo now uses the
   real .hero-phone mockup with phone-frame.png) */

/* ---------- Timelines demo ---------- */
/* Stanley-style editorial row: big left-aligned headline block left,
   demo right (mirrored in .compsec). */
.tlsec {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(80px, 12vh, 170px) clamp(20px, 4vw, 40px);
  display: grid;
  /* the demo column carries a phone + the NLE list side by side, so it gets
     a little more room than the copy */
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(40px, 6vw, 90px);
}
.tlsec .tl-phone-crop { width: min(280px, 52%); }
.tlsec .tw-head,
.compsec .tw-head {
  max-width: 420px;
  margin: 0;
  text-align: left;
}
.tlsec .tw-head h2,
.compsec .tw-head h2 {
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.04;
  letter-spacing: -.03em;
}
.tlsec .statement-sub,
.compsec .statement-sub {
  margin: 18px 0 0;
  max-width: 420px;
  text-align: left;
}
.active-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: #1f9d55;
  color: #fff;
  font-size: .72em;
  font-weight: 800;
  letter-spacing: .04em;
  vertical-align: 2px;
}
.tlsec-stage { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2.2vw, 28px); }
.tlsec-nle { flex: 1 1 auto; min-width: 0; max-width: 320px; }

/* Real app screenshot in the phone frame, bottom third cropped + faded.
   Fixed box (aspect-ratio) so nothing ever shifts. */
.tl-phone-crop {
  flex: 0 0 auto;
  width: 260px;
  aspect-ratio: 1350 / 1822; /* 66% of the phone frame's height */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 98%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 98%);
}
.tl-phone { width: 100%; filter: none; } /* no drop-shadow: clipped by .tl-phone-crop */
.tl-phone-live { position: absolute; inset: 0; z-index: 2; pointer-events: none; container-type: size; }
/* Covers the baked-in timecode pill with the live, ticking one.
   Measured on screen-timeline.jpg (1170x2532) with PIL: the pill spans
   x 32.31%..67.61%, y 7.42%..10.70% -> box padded a hair on every side. */
.tl-tc {
  top: 7.2%;
  height: 3.75%;
  left: 32.0%;
  right: 32.0%;
  /* half the pill radius: the box is 3.75cqh tall, so a full pill would be
     1.875cqh -> .94cqh */
  border-radius: .94cqh;
  background: #3a1512;
  color: #fff;
  font-size: 4.58cqw;
}
/* Green ACTIVE highlight over a timeline row of the screenshot */
.tl-hl {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 3.5%;
  box-sizing: border-box;
  border: 1.5px solid rgba(77, 199, 107, .9);
  /* matches the rounding of the real timeline rows in screen-timeline.jpg
     (measured: ~68px radius on a 1170px-wide screenshot = 5.85% of width) */
  border-radius: 5.85cqw;
  background: rgba(77, 199, 107, .10);
  opacity: 0;
  transition: opacity .25s ease;
}
.tl-hl.is-active { opacity: 1; }
.tl-hl b {
  font-size: 8.36px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  padding: 3.04px 6.84px;
  border-radius: 999px;
  background: #4dc76b;
  color: #06240f;
}

/* NLE panel 1:1 with the iOS onboarding list (no header, striped rows) */
.tlsec-nle {
  background: #28282e;
  border: 0;
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
}
.tlsec-nle .ui-seq {
  height: 38px;
  gap: 10px;
  padding: 0 14px;
  margin: 0;
  border: 0;
  border-radius: 0;
  font-size: 15px;
  font-weight: 500;
  color: #8a8a8a;
  background: #28282e;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease, color .45s ease;
}
.tlsec-nle .ui-seq:nth-child(even) { background: #24242a; }
.tlsec-nle .ui-seq.is-shown { opacity: 1; transform: none; }
/* the row that just appeared reads as the newest one */
.tlsec-nle .ui-seq.is-new-row { color: #fff; }
.tlsec-nle .tlglyph { width: 18px; height: 18px; flex: none; }
.tlsec-nle .ui-seq-meta { font-size: 12px; color: inherit; opacity: .7; }
@media (max-width: 760px) {
  .tlsec { grid-template-columns: 1fr; gap: clamp(30px, 6vw, 46px); }
  .tlsec-stage { flex-direction: column-reverse; }
  .tl-phone-crop { width: min(260px, 74vw); }
  .tlsec-nle { width: 100%; max-width: 420px; }
}

/* ---------- Companion demo (mirrored editorial row: visual left, text right) ---------- */
.compsec {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(80px, 12vh, 170px) clamp(20px, 4vw, 40px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 90px);
  text-align: left;
}
.compsec-copy { order: 2; justify-self: start; }
.compsec .compsec-stage { order: 1; }
.compsec-stage { position: relative; display: flex; justify-content: center; padding-bottom: 26px; }
/* real iPhone mockup (same .hero-phone structure as the markers demo),
   cropped to its top two thirds and faded out at the bottom */
.compsec-phone {
  position: relative;
  z-index: 1;
  inset: auto;
  margin: 0;
  width: min(280px, 78%);
  transform-origin: 50% 0;
  transition: transform .7s cubic-bezier(.3, .7, .3, 1), opacity .7s ease;
}
.compsec-window {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 30%;
  width: min(480px, 94%);
  text-align: left;
  opacity: 0;
  transform: translate(-50%, 44px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.3, .7, .3, 1);
  box-shadow: 0 30px 70px -18px rgba(10, 12, 16, .55);
}
.compsec-stage.is-revealed .compsec-phone { transform: translateY(34px) scale(.96); opacity: .55; }
.compsec-stage.is-revealed .compsec-window { opacity: 1; transform: translate(-50%, 0); }
.compsec-cta { margin: 26px 0 0; }
@media (max-width: 760px) {
  .compsec { grid-template-columns: 1fr; gap: clamp(30px, 6vw, 46px); }
  .compsec-copy { order: 0; }
  .compsec .compsec-stage { order: 1; }
}

/* ---------- Pain (onboarding: Tired of scrubbing) ---------- */
.painsec { max-width: 900px; margin: 0 auto; padding: clamp(90px, 12vh, 180px) clamp(20px, 4vw, 40px); text-align: center; }
.painsec h2 { font-size: var(--type-section); line-height: 1.06; letter-spacing: -.03em; }
.painsec .statement-sub { margin: clamp(20px, 3vw, 32px) auto 0; max-width: 560px; }
/* Playhead scrubs faster and faster until the timeline snaps in two
   (web version of the iOS onboarding PainScreenV3 choreography) */
.painsec-stage { position: relative; height: 130px; margin-top: clamp(34px, 6vw, 60px); }
.pain-intact, .pain-broken { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.pain-broken { flex-direction: row; gap: 0; align-items: center; }
.painsec-half { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; transition: transform 1s cubic-bezier(.2, .9, .3, 1.18); }
.painsec-half.is-l { transform-origin: bottom left; clip-path: polygon(0 0, 100% 0, 93% 18%, 100% 37%, 92% 56%, 99% 76%, 94% 100%, 0 100%); }
.painsec-half.is-r { transform-origin: bottom right; margin-left: -2%; clip-path: polygon(7% 0, 100% 0, 100% 100%, 6% 100%, 12% 78%, 4% 58%, 11% 37%, 3% 18%); }
.is-broken .painsec-half.is-l { transform: rotate(-7deg) translate(-12px, 14px); }
.is-broken .painsec-half.is-r { transform: rotate(7deg) translate(12px, 14px); }
/* Same DaVinci Resolve look as the hero timeline (.float-timeline):
   steel-blue video clip with the thumbnail divider, forest-green audio
   clip with the pale recorded waveform. No markers here on purpose. */
.painsec .tl-video {
  height: 42px;
  border-top: 0;
  overflow: hidden;
  border-radius: 7px 7px 2px 2px;
  background: linear-gradient(180deg,
    #446581 0, #446581 40%,
    rgba(15, 20, 28, .2) 40%, rgba(15, 20, 28, .2) calc(40% + 1px),
    #446581 calc(40% + 1px));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(0, 0, 0, .18);
}
.painsec .tl-audio {
  height: 30px;
  margin-top: 0;
  border-radius: 2px 2px 7px 7px;
  display: block;
  overflow: hidden;
  background: #38694d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -1px 0 rgba(0, 0, 0, .18);
}
/* .painsec .tl-wave picks up the Resolve waveform tile further down,
   where .float-timeline .tl-wave is defined (shared selector). */
/* the halves sit tight like real stacked Resolve tracks */
.pain-intact, .painsec-half { gap: 3px; }
.pain-playhead { position: absolute; top: 8px; bottom: 8px; left: 50%; width: 2.5px; border-radius: 2px; background: #e64b3d; transition: box-shadow 1.6s ease; }
.pain-playhead::before { content: ""; position: absolute; top: -2px; left: 50%; transform: translateX(-50%); width: 13px; height: 14px; background: #e64b3d; clip-path: path('M2.5 0 H10.5 Q13 0 13 2.5 V5.5 L7.6 14 H5.4 L0 5.5 V2.5 Q0 0 2.5 0 Z'); }
.is-burning .pain-playhead { box-shadow: 0 0 14px 3px rgba(255, 122, 40, .85); }
.is-burning .pain-intact .tl-video, .is-burning .pain-intact .tl-audio { box-shadow: 0 0 22px rgba(224, 45, 27, .35); transition: box-shadow 1.6s ease; }
.pain-playhead.is-fallen { left: 62%; top: auto; bottom: -6px; height: 64px; transform: rotate(84deg); transform-origin: bottom center; box-shadow: 0 0 14px 3px rgba(255, 122, 40, .7); }
.painsec-badgewrap { height: 74px; margin: 54px 0 0; }
/* The pill holds its space from the start but stays invisible until the
   timeline breaks; the reveal only swaps visibility, never the size. */
.painsec-badge {
  position: relative;
  display: inline-block;
  padding: 14px 25px;
  border-radius: 20px;
  background: #e02d1b;
  color: #fff;
  font-size: 21px;
  font-weight: 800;
  visibility: hidden;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1s cubic-bezier(.2, .9, .3, 1.3), transform 1s cubic-bezier(.2, .9, .3, 1.3);
}
.painsec-badge.is-shown {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .painsec-badge.is-shown { transition: none; }
}


/* ---------- Legal pages ---------- */
.legal { max-width: 760px; margin: 0 auto; padding: 140px clamp(20px, 4vw, 40px) 120px; }
.legal h1 { font-size: clamp(34px, 4.6vw, 54px); letter-spacing: -.03em; margin: 0 0 10px; }
.legal h2 { font-size: 24px; letter-spacing: -.02em; margin: 40px 0 12px; }
.legal h3 { font-size: 18px; margin: 28px 0 8px; }
.legal p, .legal li { font-size: 15.5px; line-height: 1.65; color: var(--ink-70); }
.legal ul { padding-left: 22px; }
.legal .legal-updated { color: var(--ink-45); font-size: 14px; margin-bottom: 34px; }

/* ---------- Width-tuned headlines ---------- */
/* width-tuned so the line breaks after the comma on wide screens */
.final-card h2 { max-width: 12em; margin-left: auto; margin-right: auto; }
/* width-tuned so the line breaks after the comma on wide screens */
.final-card .lede { max-width: 386px; margin-left: auto; margin-right: auto; }
/* width-tuned so the line breaks after the comma on wide screens */
.mdemo .tw-head .statement-sub { max-width: 366px; margin-left: auto; margin-right: auto; }
/* width-tuned so the line breaks after the comma on wide screens */
.quote .quote-sub { max-width: 360px; margin-left: auto; margin-right: auto; }

/* ---------- Form page (/add-camera) ---------- */
.formpage { max-width: 680px; margin: 0 auto; padding: 140px clamp(20px, 4vw, 40px) 120px; }
.formpage h1 { font-size: clamp(30px, 4.2vw, 46px); letter-spacing: -.03em; margin: 0 0 16px; }
.formpage h2 { font-size: 22px; letter-spacing: -.02em; margin: 44px 0 12px; }
.formpage p { font-size: 15.5px; line-height: 1.65; color: var(--ink-70); }
.form-field { margin-top: 26px; }
.form-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.form-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  font-family: var(--display);
  font-size: 15px;
  line-height: 1.5;
}
textarea.form-input { resize: vertical; min-height: 96px; }
.form-input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: transparent; }
.form-hint { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-45); }
.form-example {
  margin: 14px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--panel);
  color: var(--ink-70);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-x: auto;
}
.formpage .btn-cta { margin-top: 32px; }
.formpage .btn-cta:disabled { opacity: .6; pointer-events: none; }
.form-thanks, .form-error { margin-top: 24px; font-size: 15.5px; line-height: 1.6; }
.form-error { color: #e6352b; }

/* ---------- Acknowledgements table ---------- */
.ack-table-wrap { overflow-x: auto; margin-top: 30px; }
.ack-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ack-table th, .ack-table td {
  text-align: left;
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
  line-height: 1.5;
  color: var(--ink-70);
}
.ack-table th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.ack-table td:first-child { white-space: nowrap; }
.ack-table a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }


/* ---------- Last call: oversized App Store button below the FAQ ---------- */
.lastcall {
  display: flex;
  justify-content: center;
  padding: clamp(30px, 6vh, 80px) 24px clamp(100px, 14vh, 180px);
}
.lastcall .btn-cta {
  font-size: 31px;
  min-height: 106px;
  padding: 30px 56px;
  border-radius: 999px;
}
.lastcall .btn-cta .cta-apple { width: 36px; height: 36px; }
.lastcall .btn-cta .cta-arrow { width: 33px; height: 33px; }
@media (max-width: 760px) {
  /* 1.65x of the phone base sizes (16.5px / 58px / 15px 26px) */
  .lastcall .btn-cta { font-size: 27px; min-height: 96px; padding: 25px 43px; }
  .lastcall .btn-cta .cta-apple { width: 31px; height: 31px; }
  .lastcall .btn-cta .cta-arrow { width: 28px; height: 28px; }
}
@media (max-width: 560px) {
  /* narrow phones: drop to ~1.35x so the label still fits on one line,
     and never let the pill exceed the viewport */
  .lastcall .btn-cta {
    font-size: 22px;
    min-height: 78px;
    padding: 20px 30px;
    max-width: calc(100vw - 48px);
  }
  .lastcall .btn-cta .cta-apple { width: 26px; height: 26px; }
  .lastcall .btn-cta .cta-arrow { width: 23px; height: 23px; }
}