/* tesr v7, round 5: a product page in the manner of healthapp.google. Photo after photo, the
   width of the window and back to back, with the words and the app's own screens laid on top.
   Mobile first. Owner, 2026-10-18: no two-colour gradients, the app's own grey inside its
   screens, and motion that never jitters (nothing tied to the scroll is eased by a transition).

   The look is "bold" (owner's pick, 2026-10-18): the section's colour, strongly (eyebrows as
   filled pills, key words in colour). */

:root {
  --paper: #f7f5f0;
  --pad: clamp(16px, 4.2vw, 64px);
  --maxw: 1560px;
  --round: clamp(22px, 2.4vw, 36px);
  --out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease: cubic-bezier(0.45, 0, 0.55, 1);
  /* the app's own ground inside its screens (appcut.js swaps #ededf0 for this) */
  --ground: #ededf0;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
sup { font-size: 0.55em; line-height: 0; margin-left: 0.1em; font-weight: 500; }
.ms {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 1.3em;
  line-height: 1;
  display: inline-block;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
  font-feature-settings: "liga";
  user-select: none;
  vertical-align: middle;
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.center { text-align: center; margin-left: auto !important; margin-right: auto !important; }

/* ───────── the area colours: one --c per section ───────── */
.area {
  --cd: color-mix(in srgb, var(--c) 72%, #000);
  --cl: color-mix(in srgb, var(--c) 55%, #fff);
  --on: #fff;
}
[data-look="bold"] .area { --t: color-mix(in srgb, var(--c) 12%, #fff); }
.area.plain { --t: var(--paper); }
.area:not(.slides):not(.privacy) { background: var(--t); }
.area em { font-style: normal; color: var(--cd); }

/* ───────── buttons ───────── */
.btn {
  display: inline-block;
  text-decoration: none;
  appearance: none;
  border: 0;
  cursor: pointer;
  background: var(--red);
  color: #fff;
  font: 600 15px/1 "DM Sans", system-ui, sans-serif;
  padding: 13px 22px;
  border-radius: 999px;
  white-space: nowrap;
  transition: transform 0.2s var(--out), background 0.2s;
}
.btn:hover { background: #cf1f24; }
.btn:active { transform: scale(0.97); }
.btn.big { font-size: 17px; padding: 16px 28px; }

/* ───────── product bar ───────── */
.bar {
  position: fixed;
  z-index: 50;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 1600px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 8px 0 24px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(20, 20, 30, 0.06), 0 8px 24px rgba(20, 20, 30, 0.08);
}
.bar-logo { display: block; color: var(--ink); height: 20px; }
.bar-logo svg { height: 100%; width: auto; display: block; }
.bar-tabs { display: flex; gap: 4px; }
.bar-tabs a { text-decoration: none; font-size: 15px; font-weight: 500; padding: 9px 15px; border-radius: 999px; color: var(--ink-2); transition: background 0.25s, color 0.25s; }
.bar-tabs a:hover { background: #f1eee8; }
.bar-tabs a.on { background: #ece7dd; color: var(--ink); }
.bar-buy { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.bar-price { text-align: right; line-height: 1.2; }
.bar-price b { display: block; font-size: 14px; font-weight: 600; }
.bar-price small { display: block; font-size: 12px; color: var(--ink-2); }

/* ───────── type ───────── */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--cd); }
.eyebrow .ms { font-size: 20px; }
[data-look="bold"] .eyebrow { background: var(--c); color: var(--on); padding: 7px 15px 7px 11px; border-radius: 999px; }
.h2 { font-size: clamp(38px, 5vw, 80px); font-weight: 500; letter-spacing: -0.04em; line-height: 1.02; margin-top: 16px; max-width: 18ch; }
.h2.big { font-size: clamp(40px, 5.6vw, 92px); max-width: 16ch; }
.lead { font-size: clamp(18px, 1.5vw, 22px); color: var(--ink-2); margin-top: 18px; max-width: 46ch; line-height: 1.45; }
.h3x { font-size: clamp(30px, 3.6vw, 56px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.06; }
.fine { font-size: 14px; color: var(--ink-3); margin-top: 22px; }

/* ───────── sections ───────── */
.area { padding: clamp(72px, 9vw, 150px) 0; position: relative; }
.area.slides { padding: 0; }
.area.slim { padding: clamp(48px, 6vw, 90px) 0; }
.hero { padding: 0 0 clamp(24px, 3vw, 40px); }
.intro { padding-top: clamp(64px, 8vw, 120px); }

/* ───────── a slide: one photo the width of the window, the words and the screens on it ───────── */
.slide {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #1a1a1e;
  color: #fff;
  min-height: max(100vh, 760px);
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(24px, 3vw, 56px);
  padding: clamp(110px, 12vh, 150px) clamp(24px, 5vw, 96px) clamp(48px, 7vh, 88px);
}
.s-photo { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; z-index: -2; transform: scale(1.12); transform-origin: 50% 50%; backface-visibility: hidden; }
.slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 8, 12, 0.7) 0%, rgba(8, 8, 12, 0.4) 34%, rgba(8, 8, 12, 0.08) 62%, rgba(8, 8, 12, 0.08) 100%),
    linear-gradient(0deg, rgba(8, 8, 12, 0.35) 0%, rgba(8, 8, 12, 0) 30%);
}
.slide.flip::after {
  background:
    linear-gradient(270deg, rgba(8, 8, 12, 0.7) 0%, rgba(8, 8, 12, 0.4) 34%, rgba(8, 8, 12, 0.08) 62%, rgba(8, 8, 12, 0.08) 100%),
    linear-gradient(0deg, rgba(8, 8, 12, 0.35) 0%, rgba(8, 8, 12, 0) 30%);
}
.slide.flip .s-text { grid-column: 2; grid-row: 1; }
.slide.flip .s-cards { grid-column: 1; grid-row: 1; }
.s-text { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; max-width: 640px; }
.slide.flip .s-text { justify-self: end; }
.slide .eyebrow { color: #fff; }
[data-look="bold"] .slide .eyebrow { color: var(--on); }
.slide .h2, .slide .h3x { color: #fff; }
.slide .h2 em, .slide .h3x em { color: var(--cl); }
.slide .lead { color: rgba(255, 255, 255, 0.84); }
.s-copy h3 { font-size: clamp(26px, 2.6vw, 42px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.s-copy p { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.55; margin-top: 12px; color: rgba(255, 255, 255, 0.86); max-width: 46ch; }
.s-copy p b { color: #fff; }
.s-cards { display: flex; gap: clamp(14px, 1.6vw, 26px); justify-content: center; align-items: center; }
.slide.low .s-cards { align-self: end; align-items: flex-end; }
/* the people on the left: the words and the screens stacked in the right half, over empty space */
.slide.stack-right { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); grid-template-rows: auto 1fr; }
.slide.stack-right .s-text { grid-column: 2; grid-row: 1; justify-self: start; gap: 18px; }
.slide.stack-right .s-cards { grid-column: 1 / -1; grid-row: 2; justify-content: flex-end; align-items: flex-end; }
.slide.stack-right::after { background: linear-gradient(270deg, rgba(8, 8, 12, 0.66) 0%, rgba(8, 8, 12, 0.38) 40%, rgba(8, 8, 12, 0.06) 62%), linear-gradient(0deg, rgba(8, 8, 12, 0.3) 0%, rgba(8, 8, 12, 0) 30%); }
.slide .app { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), 0 28px 60px rgba(0, 0, 0, 0.35); }

/* where each photo's person stands: a narrow screen crops toward them, never away */
[data-photo="hero-run"], [data-photo="hero-kettlebell"], [data-photo="sleep"], [data-photo="recovery"], [data-photo="today"], [data-photo="bujji"], [data-photo="you"], [data-photo="privacy"], [data-photo="t-gym-rest"], [data-photo="t-week"], [data-photo="hero-cycle"] { object-position: 70% 45%; }
[data-photo="hero-kitchen"], [data-photo="cycle"], [data-photo="t-plan"] { object-position: 30% 45%; }
[data-photo="intro-food"] { object-position: 68% 45%; }
[data-photo="food2"] { object-position: 32% 45%; }
[data-photo="scan"] { object-position: 70% 45%; }
[data-photo="t-gym-set"] { object-position: 40% 45%; }
/* she lies across the middle: on a desk the photo slides left so the set card on the right clears her legs */
@media (min-width: 861px) { .s-photo[data-photo="t-gym-set"] { object-position: 30% 45%; left: -12%; width: 112%; max-width: none; } }
[data-photo="t-check"] { object-position: 74% 45%; }
[data-photo="hero-pair"] { object-position: 45% 45%; }
[data-photo="t-own"] { object-position: 50% 45%; }
/* the hero is a slide too */
/* Owner, 2026-10-18: the whole opening, rings card included, sits on the first screen at any window
   size. The headline keeps to two lines ("Sleep. Recover." fits its column) and shrinks on a short
   window, the spaces with it; site.js gives the card whatever height is left. */
.hero-slide { min-height: max(100svh, 560px); grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); padding-top: clamp(96px, 12vh, 150px); }
.hero-slide .s-text { max-width: 780px; }
.hero-slide .s-head { container-type: inline-size; }
.hero-name { font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, 0.82); }
.hero-h1 { font-size: clamp(44px, min(7vw, 12vh, 15cqi), 120px); font-weight: 500; letter-spacing: -0.045em; line-height: 0.96; margin-top: clamp(8px, 1.6vh, 14px); }
.hero-sub { font-size: clamp(17px, 1.5vw, 22px); color: rgba(255, 255, 255, 0.86); margin-top: clamp(12px, 2.6vh, 24px); max-width: 30ch; line-height: 1.45; }
.hero-cta { display: flex; align-items: center; gap: 18px; margin-top: clamp(16px, 3.6vh, 32px); }
.hero-free { font-size: 15px; color: rgba(255, 255, 255, 0.86); font-weight: 500; }
.hero-slide .s-text { justify-content: center; }
/* the opening (H-1 for now): the words and today's rings on the left, the runner on the right */
.h1-run .s-text { gap: clamp(18px, 3.8vh, 34px); }
.h1-run .s-cards { display: none; }
.intel-strip {
  margin: 14px 0 0;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: 22px;
  padding: 14px 22px;
  text-decoration: none;
  font-size: 15.5px;
  color: var(--ink-2);
  box-shadow: 0 1px 2px rgba(20, 20, 30, 0.04);
}
.intel-strip b { color: var(--ink); font-weight: 600; }
.strip-go { margin-left: auto; font-weight: 600; color: var(--ink); white-space: nowrap; display: inline-flex; align-items: center; }

/* three screens on one photo, each with its words under it */
/* the photo is a band across the top, its person whole in it; the three screens sit below on the
   slide's dark ground, overlapping only the band's lower edge (owner, 2026-10-18: never over a person) */
.slide.trio { --band: 64vh; grid-template-columns: minmax(0, 1fr); align-content: start; background: #121216; padding-top: calc(var(--band) - 150px); min-height: 0; }
/* every photo runs a little past its box at the top (and fades out at the foot), so its drift never shows an edge */
.slide.trio .s-photo { top: calc(var(--band) * -0.06); height: calc(var(--band) * 1.16); }
/* a photo in a band fades out on its own, so its edge never shows as it drifts */
.slide.trio .s-photo { -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 91%); mask-image: linear-gradient(180deg, #000 74%, transparent 91%); }
.slide.trio::after { inset: 0 0 auto 0; height: calc(var(--band) * 1.25); background: linear-gradient(180deg, rgba(8, 8, 12, 0.62) 0%, rgba(8, 8, 12, 0.08) 27%, rgba(8, 8, 12, 0.05) 50%, rgba(18, 18, 22, 0.7) 69%, #121216 80%, #121216 100%); }
.t-top { position: absolute; top: clamp(100px, 12vh, 140px); left: clamp(24px, 5vw, 96px); max-width: 760px; }
.t-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); align-items: end; }
.t-item { display: grid; gap: 18px; justify-items: center; align-content: end; }
.t-cap { width: 100%; max-width: 380px; }
.t-cap h3 { font-size: clamp(19px, 1.5vw, 23px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.t-cap p { font-size: 15.5px; color: rgba(255, 255, 255, 0.82); margin-top: 6px; line-height: 1.5; }

/* the gym: two photos side by side, edge to edge */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.slide.duo-item { margin: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; padding: clamp(110px, 12vh, 150px) clamp(20px, 3vw, 56px) clamp(40px, 6vh, 72px); }
.slide.duo-item::after { background: linear-gradient(180deg, rgba(8, 8, 12, 0.62) 0%, rgba(8, 8, 12, 0.1) 36%, rgba(8, 8, 12, 0.1) 70%, rgba(8, 8, 12, 0.55) 100%); }
.duo-item .s-text { grid-row: 1; max-width: none; gap: 14px; justify-content: flex-start; }
.duo-item .s-cards { grid-row: 2; align-items: center; }
.duo-item .s-copy p { margin-top: 0; }

/* the training chapter's five parts */
.parts { list-style: none; padding: 0; margin: clamp(22px, 3vw, 36px) 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.parts a { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; font-size: 15px; font-weight: 600; padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); color: #fff; transition: background 0.25s; }
.parts a:hover { background: rgba(255, 255, 255, 0.28); }
.parts b { color: var(--cl); font-feature-settings: "tnum"; }
.part-n { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.82); margin-bottom: 14px; }
.part-n b { font-size: 15px; color: var(--cl); font-feature-settings: "tnum"; }
.chip { font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--ink); }
.chip.free { background: var(--c); color: var(--on); }

/* intro: three photo cards */
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(40px, 5vw, 72px); }
.pcard h3 { font-size: clamp(20px, 1.7vw, 24px); font-weight: 500; letter-spacing: -0.015em; margin-top: 20px; }
.pcard p { font-size: 16px; color: var(--ink-2); margin-top: 6px; max-width: 34ch; }
.pc-photo { margin: 0; position: relative; border-radius: var(--round); overflow: hidden; aspect-ratio: 4 / 4.6; background: #ddd; }
.pc-photo img { width: 100%; height: 100%; object-fit: cover; }
.pc-over { position: absolute; left: 14px; right: 14px; bottom: 16px; display: flex; justify-content: center; }

/* the app's own screens, cut at band edges, in a curved white card */
.app {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 20, 30, 0.06), 0 18px 44px rgba(20, 20, 30, 0.16);
  flex: none;
  width: 300px;
  height: 200px;
}
.app-in { width: 393px; transform-origin: 0 0; }
.app-in img { display: block; }
/* the build: rows rise in, bars grow, lines draw (appcut.js marks them) */
.app.b-ready .b-row { opacity: 0; transform: translate3d(0, 14px, 0); }
.app.b-ready.built .b-row { opacity: 1; transform: none; transition: opacity 0.55s var(--out), transform 0.7s var(--out); transition-delay: calc(var(--i) * 70ms + 100ms); }
.app.b-ready .b-bar { transform-origin: 0 50%; transform: scaleX(0); }
.app.b-ready.built .b-bar { transform: none; transition: transform 1s var(--out) 0.4s; }
.b-draw { transition: stroke-dashoffset 1.4s var(--out) 0.3s; }
.app.measuring .b-row, .app.measuring .b-bar { transform: none !important; }

/* a card arrives once: a fade and a short rise, nothing tied to the scroll */
[data-step] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 0.7s var(--out), transform 0.9s var(--out); }
[data-step].on { opacity: 1; transform: none; }

/* Bujji's hats */
.hats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.hat { background: #fff; border-radius: var(--round); padding: 26px 22px 24px; }
.hat .k-mark { height: 5.2em; display: flex; align-items: flex-end; }
.hat .k-mark svg { height: 100%; width: auto; }
.hat h3 { font-size: 20px; font-weight: 500; margin-top: 18px; }
.hat p { font-size: 15.5px; color: var(--ink-2); margin-top: 6px; }
#bujji .wrap { padding-top: clamp(40px, 5vw, 80px); padding-bottom: clamp(48px, 6vw, 96px); }

/* watch or not */
.ess { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.es { background: #fff; border-radius: var(--round); padding: 28px; }
.es .ms { font-size: 30px; }
.es h3 { font-size: 21px; font-weight: 500; margin-top: 34px; }
.es p { font-size: 16px; color: var(--ink-2); margin-top: 6px; }

/* free and premium */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 48px; max-width: 1160px; margin-left: auto; margin-right: auto; }
.plan { background: #fff; border-radius: var(--round); padding: clamp(24px, 3vw, 44px); }
.plan.pro { box-shadow: inset 0 0 0 2px var(--c); }
.plan h3 { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; }
.plan-price { font-size: 15px; font-weight: 600; color: var(--ink-2); margin-top: 4px !important; }
.plan ul { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 18px; }
.plan li { display: flex; gap: 14px; font-size: 15.5px; color: var(--ink-2); line-height: 1.45; }
.plan li .ms { font-size: 22px; color: var(--ink); margin-top: 1px; }
.plan li b { display: block; color: var(--ink); font-weight: 600; font-size: 16px; }

/* privacy: a photo the width of the window, and the promises over it */
.privacy { padding: 0; }
.pv { position: relative; overflow: hidden; isolation: isolate; color: #fff; background: #10141a; min-height: 100vh; }
.pv-photo { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; z-index: -2; object-position: 60% 40%; transform: scale(1.12); backface-visibility: hidden; }
.pv-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 12, 16, 0.9) 0%, rgba(8, 12, 16, 0.72) 42%, rgba(8, 12, 16, 0.12) 75%, rgba(8, 12, 16, 0.05) 100%); }
.pv-in {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  grid-template-areas: "top ." "list ." "apps .";
  gap: clamp(28px, 4vw, 64px) clamp(28px, 5vw, 96px);
  padding: clamp(110px, 12vh, 150px) clamp(24px, 6vw, 120px) clamp(48px, 7vw, 110px);
  align-items: start;
}
.pv-top { grid-area: top; }
.pv .eyebrow { color: #fff; }
[data-look="bold"] .pv .eyebrow { background: var(--c); color: #0d1f22; }
.pv-h { font-size: clamp(42px, 6vw, 96px); font-weight: 500; letter-spacing: -0.045em; line-height: 0.98; margin-top: 18px; max-width: 13ch; }
.pv-h em { color: var(--c); }
.pv-lead { font-size: clamp(18px, 1.6vw, 24px); color: rgba(255, 255, 255, 0.8); margin-top: 20px; max-width: 34ch; }
.pv-list { grid-area: list; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pv-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  padding: 20px 20px 22px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  opacity: 0.3;
  transform: translate3d(0, 16px, 0);
  transition: opacity 0.8s var(--out), transform 0.9s var(--out);
}
.pv-list li.lit { opacity: 1; transform: none; }
.pv-list .ms { grid-row: span 2; font-size: 26px; color: var(--c); margin-top: 2px; }
.pv-list b { font-size: clamp(17px, 1.3vw, 20px); font-weight: 600; letter-spacing: -0.01em; }
.pv-list span:not(.ms) { font-size: 15px; color: rgba(255, 255, 255, 0.74); margin-top: 4px; line-height: 1.45; }
.pv-apps { grid-area: apps; display: grid; justify-items: start; }

/* FAQ */
.faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); gap: 40px; }
.qs details { border-bottom: 1px solid rgba(22, 22, 26, 0.12); }
.qs summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; font-size: 19px; font-weight: 500; padding: 22px 0; }
.qs summary::-webkit-details-marker { display: none; }
.qs summary::after { content: "expand_more"; font-family: "Material Symbols Rounded"; font-size: 26px; line-height: 1; transition: transform 0.3s var(--out); }
.qs details[open] summary::after { transform: rotate(180deg); }
.qs details p { font-size: 16.5px; color: var(--ink-2); padding: 0 40px 24px 0; max-width: 60ch; }

/* footnotes and footer */
.notes { padding-top: clamp(40px, 5vw, 64px); }
.foot-notes { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-3); line-height: 1.55; display: grid; gap: 8px; max-width: 980px; }
/* The footer on every page: the company as the live site names it, and every legal page (2026-10-18). */
.foot { border-top: 1px solid rgba(22, 22, 26, 0.1); padding: 36px 0 72px; }
.foot-in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 40px; align-items: start; font-size: 14px; color: var(--ink-2); }
.foot-brand { display: flex; align-items: center; gap: 18px; }
.foot-logo { display: block; height: 18px; color: var(--ink); }
.foot-logo svg { height: 100%; width: auto; display: block; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 22px; }
.foot-links a { color: var(--ink); font-weight: 500; text-decoration: none; }
.foot-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot-company { grid-column: 1 / -1; display: grid; gap: 4px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.foot-company b { color: var(--ink-2); font-weight: 600; }


/* reveal on scroll; headlines arrive word by word (opacity and a short rise only: no blur) */
[data-rv] { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 0.8s var(--out), transform 0.9s var(--out); transition-delay: var(--rd, 0s); }
[data-rv].in { opacity: 1; transform: none; }
[data-split] .w { display: inline-block; opacity: 0; transform: translate3d(0, 0.32em, 0); transition: opacity 0.6s var(--out), transform 0.75s var(--out); transition-delay: calc(var(--wi) * 50ms); }
[data-split].in .w { opacity: 1; transform: none; }

/* ───────── narrower screens ───────── */
@media (max-width: 1180px) {
  .bar-tabs { display: none; }
  .hats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  body { font-size: 16px; }
  :root { --round: 24px; }
  .bar { height: 56px; padding: 0 6px 0 18px; top: 8px; width: calc(100% - 16px); }
  .bar-logo { height: 17px; }
  .bar-price small { display: none; }
  .btn { padding: 11px 18px; font-size: 14px; }
  .btn.big { padding: 14px 24px; font-size: 16px; }
  .intel-strip { font-size: 14.5px; padding: 14px 16px; border-radius: 18px; flex-wrap: wrap; }
  .intel-strip .strip-go { margin-left: 0; }
  .three { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .pc-photo { aspect-ratio: 4 / 3.8; }

  /* a slide on a phone: the photo first and whole (the person never under a card), its heading on
     it; the words and the app's screens follow on the slide's dark ground */
  .slide, .slide.flip, .hero-slide { --ph: min(74svh, 620px); display: flex; flex-direction: column; min-height: 0; padding: calc(var(--ph) - 120px) 16px 44px; gap: 24px; background: #121216; }
  .s-photo, .slide.trio .s-photo { top: calc(var(--ph) * -0.06); height: calc(var(--ph) * 1.14); -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 91%); mask-image: linear-gradient(180deg, #000 72%, transparent 91%); }
  .slide::after, .slide.flip::after, .slide.trio::after, .slide.stack-right::after { inset: 0 0 auto 0; height: calc(var(--ph) * 1.25); background: linear-gradient(180deg, rgba(8, 8, 12, 0.45) 0%, rgba(8, 8, 12, 0) 14%, rgba(8, 8, 12, 0) 48%, rgba(18, 18, 22, 0.82) 67%, #121216 80%, #121216 100%); }
  .slide.flip .s-text, .slide.flip .s-cards { justify-self: stretch; }
  .s-text { display: contents; }
  .s-head { position: relative; }
  .s-head:empty { display: none; }
  .s-copy { position: relative; }
  .s-cards { flex-direction: column; }
  .hero-h1 { font-size: clamp(48px, 13vw, 72px); }
  .slide.trio { --ph: min(62svh, 520px); padding: calc(var(--ph) - 110px) 0 36px; }
  .t-top { position: relative; top: auto; left: auto; padding: 0 16px; max-width: none; }
  .t-row {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    padding: 4px 16px 10px;
    scrollbar-width: none;
    align-items: stretch;
  }
  .t-row::-webkit-scrollbar { display: none; }
  .t-item { flex: 0 0 min(84%, 360px); scroll-snap-align: center; align-content: start; }
  .duo { grid-template-columns: minmax(0, 1fr); }
  .slide.duo-item { padding: 92px 16px 40px; }

  .ess, .plans, .faq { grid-template-columns: minmax(0, 1fr); }
  .ess { gap: 12px; }
  .es h3 { margin-top: 18px; }
  .faq { gap: 12px; }

  .pv { min-height: 0; background: #0d1116; }
  .pv-photo { top: -4svh; height: 68svh; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 96%); mask-image: linear-gradient(180deg, #000 70%, transparent 96%); }
  .pv-in { padding-top: calc(64svh - 130px) !important; }
  .pv-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "list" "apps"; padding: 92px 16px 36px; gap: 26px; }
  .pv-shade { inset: 0 0 auto 0; height: 80svh; background: linear-gradient(180deg, rgba(8, 12, 16, 0.4) 0%, rgba(8, 12, 16, 0) 24%, rgba(8, 12, 16, 0.7) 62%, #0d1116 80%, #0d1116 100%); }
  .pv-list li { padding: 16px 16px 18px; }

  .foot-in { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .foot-links { justify-content: flex-start; gap: 10px 20px; }
}
@media (max-width: 400px) {
  .bar-price { display: none; }
  .hats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hat { padding: 18px 16px; }
  .hat .k-mark { height: 3.6em; }
  .hat h3 { font-size: 17px; }
  .hat p { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-rv], [data-step], [data-split] .w, .pv-list li { opacity: 1 !important; transform: none !important; transition: none !important; }
  .s-photo { transform: none !important; }
}

/* ───────── early access: the waitlist (owner, 2026-10-18) ───────── */
.wl { max-width: 860px; text-align: center; }
.wl .h2, .wl .lead { margin-left: auto; margin-right: auto; }
.wl-form { margin-top: 36px; }
.wl-row { position: relative; display: flex; gap: 10px; max-width: 580px; margin: 0 auto; }
.wl-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wl-input { flex: 1 1 auto; min-width: 0; font: 400 17px/1.2 "DM Sans", system-ui, sans-serif; padding: 15px 22px; border-radius: 999px; border: 1px solid rgba(22, 22, 26, 0.18); background: #fff; color: var(--ink); }
.wl-input::placeholder { color: var(--ink-3); }
.wl-input:focus { outline: 2px solid var(--red); outline-offset: 2px; }
.wl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.wl-error { min-height: 22px; margin-top: 10px; font-size: 14px; color: #c41e23; }
.wl-note { font-size: 13.5px; color: var(--ink-3); }
.wl-note a { color: inherit; text-underline-offset: 3px; }
.wl-done { display: inline-flex; align-items: center; gap: 14px; margin-top: 36px; padding: 18px 26px; text-align: left; background: #fff; border-radius: 20px; }
.wl-done[hidden] { display: none; }
.wl-done .ms { font-size: 34px; color: #1f9d55; }
.wl-done .done-title { display: block; font-size: 17px; }
.wl-done p { margin-top: 2px; font-size: 15px; color: var(--ink-2); }
@media (max-width: 560px) {
  .wl-row { flex-direction: column; }
  .wl-row .btn { width: 100%; }
}