/* Rysflo — consumer site, on the Respyr web design system.
   Light ground (#f5f7fa), white cards, near-black type, brand blue as the accent and a
   dark — not blue — primary CTA. Poppins 400/500/600/700 with the negative tracking the
   system asks for. The three biomarkers keep one hue each, mapped onto the system's
   orange / green / blue so colour still carries the product's structure. */
:root{
  /* Respyr tokens */
  --page-bg:#f5f7fa; --white:#ffffff; --dark:#252525;
  --blue:#308bf9; --blue-light:#e9f3ff;
  --green:#3faf58; --green-light:#eaffef;
  --orange:#e48326; --orange-light:#fdf1e5;
  --amber:#ffbf2d; --red:#e74c3c;
  --text-primary:#252525; --text-secondary:#535359; --text-muted:#738298; --text-disabled:#a1a1a1;
  --border:#e1e6ed; --surface:#f5f7fa;
  --font:'Poppins',system-ui,-apple-system,sans-serif;
  --r-card:15px; --r-input:8px; --r-badge:6px; --r-pill:33px;
  --shadow-card:0 1px 3px rgba(37,37,37,.05),0 6px 16px rgba(37,37,37,.05);
  --shadow-float:0 20px 60px rgba(37,37,37,.18),0 6px 16px rgba(37,37,37,.08),0 1px 3px rgba(37,37,37,.05);
  /* rgb triplets, for alpha washes that must follow the theme */
  --ink-rgb:37,37,37; --page-rgb:245,247,250; --panel-rgb:255,255,255;
  /* primary CTA: dark on the light theme, brand blue on the dark one */
  --cta-bg:#252525; --cta-bg-hover:#3a3a3a; --cta-fg:#ffffff; --cta-shadow:rgba(37,37,37,.25);
  --nav-bg:rgba(255,255,255,.72); --nav-bg-solid:rgba(255,255,255,.92);
  /* the offer bar is a tint of the brand blue, not the blue itself, so it never reads as a button */
  --offer-bg:var(--blue-light); --offer-fg:#1d6fd6; --offer-b:#155bb5;
  color-scheme:light;

  /* site aliases — the layout below was written against these names */
  --ground:var(--page-bg);   /* page */
  --raise:var(--white);      /* raised surface */
  --panel:var(--white);      /* cards */
  --line:var(--border);
  --edge:#cdd5df;            /* a firmer border, for hover and selected states */
  --cream:var(--text-primary);
  --ink:var(--text-primary);
  --dim:var(--text-secondary);
  --faint:var(--text-muted);
  --blue-hi:#1f7ce8;  --blue-lo:var(--blue-light);
  /* one hue per biomarker — this is the product, made visible */
  --fuel:var(--orange);  --fuel-lo:var(--orange-light);
  --gut:var(--green);    --gut-lo:var(--green-light);
  --liver:var(--blue);   --liver-lo:var(--blue-light);
  --r:var(--r-card); --rp:var(--r-card);
  --shell:min(1240px,92vw);
}
/* Dark theme: the same tokens, re-pointed. Brand blue, green, orange are unchanged;
   surfaces step up from a cool near-black and the tints become deep washes. */
html[data-theme="dark"]{
  --page-bg:#0f1114; --surface:#1a1d22; --dark:#f2f4f7;
  --blue-light:#14294a; --green-light:#12291a; --orange-light:#2f2012;
  --text-primary:#f2f4f7; --text-secondary:#b9bfc9; --text-muted:#818a97; --text-disabled:#5c636d;
  --border:#262b33;
  --raise:#171a1f; --panel:#171a1f; --edge:#353c46;
  --shadow-card:0 1px 3px rgba(0,0,0,.3),0 6px 16px rgba(0,0,0,.25);
  --shadow-float:0 20px 60px rgba(0,0,0,.6),0 6px 16px rgba(0,0,0,.4);
  --ink-rgb:242,244,247; --page-rgb:15,17,20; --panel-rgb:23,26,31;
  /* on the dark theme the primary button carries the brand blue; the light theme keeps the system's dark CTA */
  --cta-bg:var(--blue); --cta-bg-hover:var(--blue-hi); --cta-fg:#ffffff; --cta-shadow:rgba(48,139,249,.35);
  --nav-bg:rgba(15,17,20,.72); --nav-bg-solid:rgba(15,17,20,.92);
  --offer-bg:#132a4d; --offer-fg:#a9cbff; --offer-b:#ffffff;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{overflow-x:clip}   /* 100vw counts the scrollbar; clip keeps sticky working */
body{margin:0;background:var(--ground);color:var(--ink);
  font:400 16px/1.62 var(--font);letter-spacing:-.02em;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
.shell{width:var(--shell);margin:0 auto}

/* ---------- offer bar + nav ---------- */
/* Founding-release band. One track duplicated and shifted -50%, so the loop is seamless
   however wide the viewport. Pauses on hover and honours reduced-motion.
   Colours come from the theme tokens so it follows light / dark. */
.offer{background:var(--offer-bg);color:var(--offer-fg);overflow:hidden;position:relative;
  padding:9px 0;font-size:14px;font-weight:500;letter-spacing:.1px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.offer-track{display:flex;width:max-content;animation:offer-drift 38s linear infinite}
.offer:hover .offer-track{animation-play-state:paused}
.offer-track span{display:inline-flex;align-items:center;gap:9px;padding:0 26px;white-space:nowrap}
.offer-track span::after{content:"";width:4px;height:4px;border-radius:50%;
  background:currentColor;opacity:.55;margin-left:17px}
.offer b{font-weight:600;color:var(--offer-b)}
@keyframes offer-drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* the partner pages carry a plain one-line offer, not the track */
.offer:not(:has(.offer-track)){text-align:center;padding:9px 16px;-webkit-mask-image:none;mask-image:none}
@media (prefers-reduced-motion:reduce){
  .offer-track{animation:none;width:100%;justify-content:center}
  .offer-track [data-dup]{display:none}
  .offer{-webkit-mask-image:none;mask-image:none}
}
/* Frosted black. At .82 the bar was effectively opaque and read as a solid header
   sitting on top of the photograph; at .46 with a heavier blur the hero shows through
   and the nav feels like glass over the image rather than a lid on it. */
nav{position:sticky;top:0;z-index:60;background:var(--nav-bg);
  -webkit-backdrop-filter:blur(26px) saturate(1.5);
  backdrop-filter:blur(26px) saturate(1.5);
  border-bottom:1px solid rgba(var(--ink-rgb),.06)}
/* the blur has nothing to work with once the page scrolls past the hero, so it firms up */
nav.solid{background:var(--nav-bg-solid);border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;gap:34px;height:74px}
.logo{font-size:23px;font-weight:600;letter-spacing:-.6px;text-decoration:none;display:inline-flex;align-items:center;flex:none}
.logo img{display:block;height:28px;width:auto;max-width:none;flex:none}
.logo .logo-dark{display:none}
html[data-theme="dark"] .logo .logo-light{display:none}
html[data-theme="dark"] .logo .logo-dark{display:block}
/* the switch: a pill with a sliding knob, sun on the left and moon on the right.
   Off = grey track, on = brand-blue track; the knob is always white and the icon under
   it is the live one. role="switch" + aria-checked, so it announces as a toggle. */
/* fixed to the bottom-left corner so it is reachable from anywhere on the page and the
   nav keeps its width for links. Lifted clear of the sticky buy bar where there is one. */
.theme-fab{position:fixed;left:18px;bottom:18px;z-index:70}
body:has(.buybar) .theme-fab{bottom:84px}
@media (max-width:620px){.theme-fab{left:auto;right:12px;bottom:12px} body:has(.buybar) .theme-fab{bottom:78px}}
.theme-fab .theme-btn{box-shadow:var(--shadow-float)}
.theme-btn{flex:none;position:relative;width:58px;height:30px;border-radius:var(--r-pill);
  border:1px solid transparent;background:var(--border);cursor:pointer;padding:0;
  display:grid;grid-template-columns:1fr 1fr;align-items:center;
  transition:background .2s}
.theme-btn:hover{background:var(--edge)}
.theme-btn svg{width:14px;height:14px;position:relative;z-index:1;justify-self:center;
  transition:color .2s}
.theme-btn .knob{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25),0 2px 6px rgba(0,0,0,.12);
  transition:transform .22s cubic-bezier(.4,0,.2,1)}
.theme-btn .i-sun{color:#252525}                 /* on the knob */
.theme-btn .i-moon{color:var(--text-muted)}      /* on the track */
html[data-theme="dark"] .theme-btn{background:var(--blue)}
html[data-theme="dark"] .theme-btn:hover{background:var(--blue-hi)}
html[data-theme="dark"] .theme-btn .knob{transform:translateX(28px)}
html[data-theme="dark"] .theme-btn .i-sun{color:rgba(255,255,255,.75)}
html[data-theme="dark"] .theme-btn .i-moon{color:#252525}
@media (prefers-reduced-motion:reduce){.theme-btn .knob{transition:none}}
.nav-links{display:flex;gap:28px;margin-left:auto;font-size:15.5px}
.nav-links a{color:var(--dim);text-decoration:none;white-space:nowrap}
/* phone navigation: the links collapse under 940px into a panel the burger opens */
.nav-burger{display:none;flex:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--border);
  background:var(--raise);cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--text-primary);transition:transform .2s,opacity .2s}
nav[data-open] .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
nav[data-open] .nav-burger span:nth-child(2){opacity:0}
nav[data-open] .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:940px){
  .nav-in{gap:12px;height:64px}
  .nav-in .btn-sm{margin-left:auto;padding:9px 16px;font-size:14px}
  .nav-burger{display:flex}
  .nav-links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;margin:0;
    padding:8px 4vw 14px;background:var(--page-bg);
    border-bottom:1px solid var(--line);box-shadow:var(--shadow-float);font-size:17px}
  nav[data-open] .nav-links{display:flex}
  .nav-links>a,.nav-drop-btn{display:block;width:100%;padding:13px 0;border-bottom:1px solid var(--line);text-align:left;font-size:17px}
  .nav-links>a:last-child{border-bottom:0}
  .nav-drop{border-bottom:1px solid var(--line)}
  .nav-drop .nav-drop-btn{border-bottom:0;display:flex;justify-content:space-between;align-items:center}
  .nav-menu{position:static;transform:none;width:auto;padding:0 0 10px 14px;border:0;box-shadow:none;background:none;
    -webkit-backdrop-filter:none;backdrop-filter:none}
  .nav-menu a{padding:9px 0}
  .nav-menu-all{border-top:0}
}
.nav-links a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:var(--rp);font:600 15px var(--font);letter-spacing:-.3px;
  text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s,transform .1s,box-shadow .15s}
/* primary CTA is dark, not blue — blue is the accent */
.btn-go{background:var(--cta-bg);color:var(--cta-fg);box-shadow:0 4px 12px var(--cta-shadow)}
.btn-go:hover{background:var(--cta-bg-hover);box-shadow:0 6px 16px var(--cta-shadow);transform:translateY(-1px)}
.btn-go:active{transform:translateY(0)}
.btn-quiet{border-color:var(--border);color:var(--ink);background:var(--raise)}
.btn-quiet:hover{border-color:var(--edge)}
.btn-sm{padding:10px 22px;font-size:15px}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---------- hero ----------
   Was a flat ground with a small cut-out, which is why it did not sit with the
   photography below. Now a lit composition: light sweeping across a dark studio
   floor, the device large, the reading card layered over it. Same cream app
   surface used everywhere else on the page, so the hero belongs to the set. */
.hero{position:relative;min-height:min(86vh,820px);display:flex;align-items:center;
  padding:52px 0 62px;overflow:hidden;isolation:isolate}
/* the light. one source, upper left, falling off across the floor */
.hero::before{content:"";position:absolute;z-index:-2;inset:0;
  background:
    radial-gradient(120% 90% at 8% -10%, rgba(255,247,238,.10), transparent 46%),
    radial-gradient(70% 70% at 74% 46%, rgba(48,139,249,.16), transparent 62%),
    linear-gradient(180deg,#191411,#100D0B 62%,#252525)}
/* floor line, so the product has something to stand on */
.hero::after{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:44%;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));pointer-events:none}
/* deliberately not positioned: .stage is absolute and must anchor to .hero, the
   section, so it can reach the top and bottom edges. A position here would capture it
   and box the photograph back inside the shell. */
.hero-in{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;z-index:1}
h1{font-size:clamp(42px,5vw,68px);font-weight:600;line-height:1.06;
  letter-spacing:-1.6px;margin:0 0 20px}
.hero p.lede{font-size:16.5px;line-height:1.6;color:var(--dim);margin:0 0 14px;max-width:36ch}
/* "With Rysflo, know ..." completes itself by typing each of the three readings in
   turn. The dots are gone: three brand colours on three short lines fought with the
   headline instead of helping it. The list stays in the DOM, visually hidden, so the
   three facts are still read out even though only one is on screen at a time. */
/* the morning readout. Same dark glass as the app panels further down the page — our
   photography is bright, so the panel is dark on both themes and the type inside is white. */
.ask{position:relative;max-width:440px;margin:0 0 30px;padding:14px 18px 15px;border-radius:14px;
  background:rgba(12,10,8,.50);-webkit-backdrop-filter:blur(16px) saturate(1.25);
  backdrop-filter:blur(16px) saturate(1.25);
  border:1px solid rgba(255,255,255,.14);border-top-color:rgba(255,255,255,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 16px 40px rgba(0,0,0,.28);color:#fff}
.ask-h{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:8px}
.ask-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none;
  box-shadow:0 0 0 0 rgba(63,175,88,.6);animation:pulse 2.2s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,175,88,.55)}70%{box-shadow:0 0 0 7px rgba(63,175,88,0)}100%{box-shadow:0 0 0 0 rgba(63,175,88,0)}}
.tw{font-size:21px;font-weight:500;line-height:1.3;letter-spacing:-.4px;color:#fff;margin:0;min-height:28px}
.caret{display:inline-block;width:2px;height:20px;background:#fff;
  margin-left:3px;vertical-align:-3px;animation:blink 1.05s steps(1,end) infinite}
/* the second line names the biomarker the question is read from — a chip in the channel's
   colour, then how. Reserved height, so the card does not jump; fades in once the question is typed. */
.ask-a{margin:8px 0 0;min-height:22px;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.78);
  opacity:0;transform:translateY(4px);transition:opacity .35s ease,transform .35s ease}
.ask[data-answered] .ask-a{opacity:1;transform:none}
.ask-a b{font-weight:500;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:13px;letter-spacing:.01em;margin-right:9px;padding:2px 8px;border-radius:6px;
  background:rgba(255,255,255,.10);color:#fff;white-space:nowrap}
.ask[data-c="fuel"] .ask-a b{color:#f2a45c}
.ask[data-c="gut"] .ask-a b{color:#6fd48a}
.ask[data-c="liver"] .ask-a b{color:#7db9ff}
@media (max-width:520px){.ask-a b{display:block;width:max-content;margin:0 0 4px}}
@keyframes blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.qs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap;margin:0;padding:0;list-style:none}
@media (prefers-reduced-motion:reduce){
  .caret{animation:none}
}
@media (max-width:520px){ .tw{min-height:54px;font-size:19px} }
.then{font-size:19.5px;color:var(--ink);margin:0 0 26px;font-weight:500;max-width:40ch;line-height:1.55}
.cta-row{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:24px}
.trust{display:flex;gap:24px;flex-wrap:wrap;font-size:14.5px;color:var(--faint)}
/* HHS issues no official HIPAA mark, so this is a plain shield rather than anything
   dressed up to look like a certification seal. No capsule either — a pill sitting
   under two pill-shaped buttons competes with the CTA instead of supporting it. */
.hipaa{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--faint)}
.hipaa svg{width:17px;height:17px;flex:0 0 17px}
.p-hero .trust{margin:26px 0 6px}
.trust span{display:flex;align-items:center;gap:7px}
.tick{width:15px;height:15px;flex:0 0 15px;color:var(--gut)}

/* the hero tells the sequence: the breath, then what came back from it.
   Two frames cross-fading, captioned, with the step visible. Real Rysflo
   photography rather than a rendered product shot. */
/* ---------- hero ----------
   One photograph across the whole section, not a photo column beside a copy column —
   that split read as two unrelated panels. The subject sits in the left third and the
   daylight opens up on the right, so the copy lands in space the picture already made
   for it. Bright by intent: the UI stays dark, the imagery does not, which is how
   Ultrahuman keeps a dark interface from feeling airless. */
/* full-bleed treatment belongs to the home hero only — scoping this to .hero, because
   as a bare .stage it also captured .p-hero on the goal and partner pages and covered
   their copy entirely */
.hero .stage{position:absolute;inset:0;width:100%;margin:0;overflow:hidden;z-index:0;background:var(--page-bg)}
.p-hero .stage{position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;
  border:1px solid var(--line);background:var(--panel)}
.hero-copy{grid-column:2;position:relative;z-index:2;color:#252525}
.frame{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.hero .stage .frame img{object-position:58% 32%}
.frame[data-on]{opacity:1}
.frame img,.frame video{width:100%;height:100%;object-fit:cover;display:block}
/* the light wash that lets the home hero's dark copy sit on a photograph. Scoped:
   unscoped it also washed out the goal-page heroes, whose copy is beside the image. */
.hero .frame::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(var(--page-rgb),0) 34%,rgba(var(--page-rgb),.6) 62%,rgba(var(--page-rgb),.84))}
/* the caption sits on the photograph, so it carries its own scrim — without it the
   copy fights whatever happens to be in the lower third of the frame */
.p-hero .stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;
  z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(12,9,7,.86),rgba(12,9,7,.52) 42%,transparent)}
.p-hero .stage:not(:has(.seq))::after{display:none}
.seq{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:30px 34px 30px 12%;color:#fff}
.seq-step{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.seq-step b{font-size:12.5px;font-weight:600;letter-spacing:1.4px;color:var(--fuel)}
.seq-bars{display:flex;gap:6px;flex:1;max-width:96px}
.seq-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.24)}
.seq-bars i[data-on]{background:var(--fuel)}
.seq h3{margin:0 0 5px;font-size:22px;font-weight:500;letter-spacing:-.6px;line-height:1.2}
.seq p{margin:0;font-size:15.5px;color:rgba(251,249,246,.76);line-height:1.55;max-width:40ch}
@media (prefers-reduced-motion:reduce){.frame{transition:none}}

/* ---------- section furniture ---------- */
section{padding:96px 0;scroll-margin-top:80px}   /* sticky nav was clipping headings */
.band{background:var(--raise);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
h2{font-size:clamp(30px,3.7vw,44px);font-weight:600;letter-spacing:-1.2px;line-height:1.14;margin:0 0 16px}
.sec-lede{font-size:18.5px;color:var(--dim);max-width:56ch;margin:0 0 46px;line-height:1.62}
.center{text-align:center}
.center .sec-lede{margin-left:auto;margin-right:auto}

/* ---------- one vs three ---------- */
.vs{display:grid;grid-template-columns:1fr 1.35fr;gap:30px;align-items:start}
.vs-card{border:1px solid var(--line);border-radius:var(--r);padding:30px 28px;background:var(--panel);box-shadow:var(--shadow-card)}
.vs-card.them{opacity:.62}
.vs-card.them .vs-list li::after{content:"and nothing about the other two";
  display:block;margin-top:9px;font-size:14.5px;color:var(--faint)}
.vs-card h3{margin:0 0 6px;font-size:15px;font-weight:600;color:var(--faint)}
.vs-card .n{font-size:52px;font-weight:600;letter-spacing:-2px;line-height:1;margin-bottom:10px}
.vs-card.them .n{color:var(--faint)}
.vs-card.us{background:linear-gradient(150deg,rgba(228,131,38,.08),rgba(48,139,249,.08));
  border-color:var(--edge)}
.vs-list{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:11px;font-size:16.5px}
.vs-list li{display:flex;gap:12px;align-items:baseline;color:var(--dim)}
.vs-list b{color:var(--ink);font-weight:500}

/* ---------- biomarkers ---------- */
.marks{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mark{border:1px solid var(--line);border-radius:var(--r);padding:32px 28px 30px;position:relative;
  overflow:hidden;background:var(--panel);box-shadow:var(--shadow-card)}
.mark::after{content:"";position:absolute;left:0;right:0;top:0;height:3px}
.mark.fuel::after{background:var(--fuel)}
.mark.gut::after{background:var(--gut)}
.mark.liver::after{background:var(--liver)}
.mark.fuel{background:linear-gradient(180deg,var(--fuel-lo),var(--panel) 62%)}
.mark.gut{background:linear-gradient(180deg,var(--gut-lo),var(--panel) 62%)}
.mark.liver{background:linear-gradient(180deg,var(--liver-lo),var(--panel) 62%)}
.formula{font-size:13px;font-weight:500;letter-spacing:.4px;margin-bottom:9px}
.mark.fuel .formula{color:var(--fuel)}
.mark.gut .formula{color:var(--gut)}
.mark.liver .formula{color:var(--liver)}
.mark h3{margin:0 0 4px;font-size:23px;font-weight:600;letter-spacing:-.7px}
.mark .asks{font-size:17px;color:var(--ink);margin:0 0 12px;font-weight:500}
.mark p{margin:0;font-size:15.5px;color:var(--dim);line-height:1.62}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s}
.step{border-top:1px solid var(--edge);padding-top:20px}
.step .num{font-size:13px;color:var(--faint);font-weight:500;margin-bottom:9px}
.step h3{margin:0 0 7px;font-size:19px;font-weight:600;letter-spacing:-.4px}
.step p{margin:0;font-size:15.5px;color:var(--dim);line-height:1.6}

/* ---------- spec ---------- */
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.spec div{background:var(--ground);padding:26px 24px}
.spec b{display:block;font-size:19px;font-weight:600;margin-bottom:5px;letter-spacing:-.4px}
.spec span{font-size:15px;color:var(--dim);line-height:1.55}

/* ---------- proof placeholders ---------- */
.ph{border:1px dashed var(--edge);border-radius:var(--r);padding:34px 28px;background:var(--panel)}
.ph-tag{display:inline-block;font-size:12px;font-weight:600;color:var(--fuel);
  background:var(--fuel-lo);padding:4px 12px;border-radius:var(--r-pill);margin-bottom:14px}
.ph h3{margin:0 0 8px;font-size:20px;font-weight:600}
.ph p{margin:0;color:var(--dim);font-size:15.5px;line-height:1.6}
.logos{display:flex;flex-wrap:wrap;gap:14px;margin-top:20px}
.logos span{border:1px solid var(--line);border-radius:9px;padding:11px 18px;
  font-size:14.5px;color:var(--dim)}

/* ---------- buy ---------- */
.buy{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.price-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:34px 32px;box-shadow:var(--shadow-card)}
.price-was{font-size:19px;color:var(--faint);text-decoration:line-through}
.price-now{font-size:60px;font-weight:500;letter-spacing:-2.5px;line-height:1;margin:2px 0 4px}
.price-note{font-size:15px;color:var(--dim);margin-bottom:22px}
.incl{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:11px;font-size:16px}
.incl li{display:flex;gap:11px;align-items:baseline;color:var(--dim)}
.incl b{color:var(--ink);font-weight:500}
.guarantee{border-top:1px solid var(--line);padding-top:20px;margin-top:4px}
.guarantee b{display:block;font-size:17px;font-weight:600;margin-bottom:5px}
.guarantee span{font-size:14.5px;color:var(--dim);line-height:1.6}

/* ---------- faq ---------- */
.faq{max-width:820px;margin:0 auto}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;padding:22px 0;font-size:18.5px;font-weight:500;list-style:none;
  display:flex;justify-content:space-between;gap:20px;letter-spacing:-.3px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--faint);font-weight:400;font-size:24px;line-height:1}
details[open] summary::after{content:"–"}
details p{margin:0 0 24px;color:var(--dim);font-size:16.5px;line-height:1.68;max-width:66ch}

/* ---------- close + footer ---------- */
footer{border-top:1px solid var(--line);padding:52px 0 44px;color:var(--faint);font-size:14.5px}
/* Brand column with the join field on the left, four link columns to the right, the
   wordmark set oversized and near-invisible behind them. Clipped by the footer rather
   than the page, so the watermark can overflow its own box without adding page scroll. */
footer{position:relative;overflow:hidden;border-top:1px solid var(--line);
  padding:66px 0 34px;background:var(--ground)}
.foot-mark{position:absolute;left:0;right:0;bottom:46px;pointer-events:none;user-select:none;
  font-size:clamp(140px,21vw,320px);font-weight:600;letter-spacing:-.06em;line-height:.78;
  text-align:center;white-space:nowrap;color:rgba(var(--ink-rgb),.035)}
.foot-in{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(210px,1fr) repeat(5,minmax(120px,.72fr));gap:40px 20px;align-items:start}
.foot-brand .logo{display:inline-block;margin-bottom:12px}
.foot-brand p{margin:0 0 22px;font-size:15px;line-height:1.6;color:var(--dim);max-width:34ch}
.join{display:flex;gap:8px;max-width:334px}
.join input{flex:1;min-width:0;background:var(--raise);border:1px solid var(--line);
  border-radius:var(--r-input);padding:12px 14px;color:var(--ink);
  font:400 15px var(--font)}
.join input::placeholder{color:var(--faint)}
.join input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-light)}
.social{display:flex;gap:9px;margin-top:18px}
.social a{width:38px;height:38px;border-radius:10px;background:var(--raise);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--dim)}
.social a:hover{color:var(--ink);border-color:var(--edge)}
.foot-col h4{margin:0 0 16px;font-size:11px;font-weight:500;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--faint)}
.foot-col a{display:block;margin-bottom:11px;font-size:15px;color:var(--dim);text-decoration:none}
.foot-col a:hover{color:var(--ink)}
.disclaimer{position:relative;z-index:1;margin-top:44px;font-size:13px;line-height:1.7;
  max-width:78ch;color:var(--faint)}
.foot-rule{position:relative;z-index:1;height:1px;background:var(--line);margin:26px 0 20px}
.foot-base{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:12px 26px;
  justify-content:space-between;font-size:13.5px;color:var(--faint)}
.foot-legal{display:flex;flex-wrap:wrap;gap:22px}
.foot-base a{color:var(--faint);text-decoration:none}
.foot-base a:hover{color:var(--dim)}
@media(max-width:1180px){
  .foot-in{grid-template-columns:repeat(3,1fr);gap:34px 24px}
  .foot-brand{grid-column:1/-1}
}
@media(max-width:1000px){
  .foot-in{grid-template-columns:1fr 1fr;gap:34px 22px}
  .foot-brand{grid-column:1/-1}
  .foot-mark{font-size:28vw;bottom:auto;top:auto;opacity:.7}
}
@media(max-width:560px){.foot-mark{display:none}}

/* Lateral navigation inside a section is not a second call to action. The page already
   has one primary button; these read as links with somewhere to go. */
.tlink{display:inline-flex;align-items:center;gap:7px;margin-top:18px;
  font:500 16px var(--font);color:var(--blue);text-decoration:none}
.tlink svg{transition:transform .18s ease}
.tlink:hover{color:var(--blue-hi)}
.tlink:hover svg{transform:translateX(3px)}
/* the logo mark is wider than the old wordmark; tighten the bar just above the point the links collapse */
@media (max-width:1080px){
  .nav-in{gap:22px}
  .nav-links{gap:18px;font-size:15px}
}

@media (max-width:940px){
  .hero{min-height:auto;padding:40px 0 56px}
  .hero-in,.vs,.buy{grid-template-columns:1fr;gap:34px}
  .stage{aspect-ratio:3/4}
  .marks,.steps{grid-template-columns:1fr}
  .nav-links{display:none}
  .hero{padding:52px 0 62px}
  section{padding:68px 0}
  .readout{position:static;width:100%;max-width:300px;margin-top:24px}
  .stage{aspect-ratio:auto}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- biomarker cards with photography ----------
   The three photographs are wildly different in temperature — a bright gym, an
   amber sunset, a dark food bowl. Duotoning each to its own biomarker hue makes
   them read as one system, and makes the colour mean something rather than
   decorate. The old site put these three in a carousel, which showed one at a
   time and so hid the very thing that makes the product different. */
.mark{padding:0;display:flex;flex-direction:column}
.mark-img{position:relative;aspect-ratio:16/10;overflow:hidden;isolation:isolate}
.mark-img::after{content:"";position:absolute;inset:0;mix-blend-mode:color}
.mark-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04) brightness(1.02)}
.mark.fuel  .mark-img::after{background:var(--fuel)}
.mark.gut   .mark-img::after{background:var(--gut)}
.mark.liver .mark-img::after{background:var(--liver)}
.mark-img::before{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,transparent 60%,rgba(var(--panel-rgb),.55))}
.mark-b{padding:24px 26px 28px;position:relative}
.mark .formula{margin-top:0}
.mark-note{margin:26px 0 0;font-size:14px;color:var(--faint);line-height:1.65;max-width:74ch}

/* ---------- partner pages (trainers, clinics) ----------
   Different buyer, so a different opening move: their problem first, their
   economics second, the device third. The consumer page inverts that order. */
/* The partner heroes were text on a cold blue wash while the home page ran warm and
   image-led. Same two-column structure, same ground, same amber accent now. */
.p-hero{padding:64px 0 78px;position:relative;overflow:hidden}
.p-hero::before{content:"";position:absolute;inset:-40% 40% 30% -25%;
  background:radial-gradient(circle,rgba(228,131,38,.10),transparent 62%);pointer-events:none}
.p-hero-in{display:grid;grid-template-columns:1fr .84fr;gap:52px;align-items:center;
  position:relative;z-index:1}
.eyebrow{display:inline-block;font-size:13px;font-weight:600;color:var(--fuel);
  letter-spacing:.4px;margin-bottom:18px}
.p-hero h1{font-size:clamp(36px,4.4vw,58px);font-weight:600;letter-spacing:-1.6px;max-width:15ch}
.p-hero .lede{font-size:18.5px;color:var(--dim);max-width:46ch;margin:0 0 28px;line-height:1.62}
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;margin:56px 0 0;position:relative;z-index:1}
.fig{background:var(--ground);padding:26px 24px}
.fig b{display:block;font-size:41px;font-weight:500;letter-spacing:-1.8px;line-height:1;
  color:var(--cream);margin-bottom:8px}
.fig span{font-size:15px;color:var(--dim);line-height:1.5}
.fig span b{display:inline;font-size:inherit;line-height:inherit;letter-spacing:inherit;
  font-weight:500;color:var(--cream)}
/* problem / answer, paired so the reader sees the swap */
.pairs{display:grid;gap:18px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.pair .bad,.pair .good{padding:26px 28px}
.pair .bad{background:var(--panel);border-right:1px solid var(--line)}
.pair .good{background:linear-gradient(120deg,rgba(48,139,249,.10),transparent)}
.pair h3{margin:0 0 7px;font-size:19px;font-weight:600;letter-spacing:-.4px}
.pair .bad h3{color:var(--dim)}
.pair p{margin:0;font-size:15.5px;color:var(--dim);line-height:1.62}
.pair .good p{color:var(--ink)}
.tag-bad,.tag-good{display:block;font-size:12px;font-weight:600;letter-spacing:.5px;
  margin-bottom:10px;text-transform:uppercase}
.tag-bad{color:var(--faint)}
.tag-good{color:var(--blue)}
/* money */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tier{border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;background:var(--panel);box-shadow:var(--shadow-card)}
.tier.best{border-color:var(--blue);background:linear-gradient(160deg,rgba(48,139,249,.14),var(--panel))}
.tier .t-name{font-size:15px;color:var(--dim);margin-bottom:6px}
.tier .t-price{font-size:38px;font-weight:600;letter-spacing:-1.6px;line-height:1}
.tier .t-sub{font-size:14.5px;color:var(--faint);margin-top:4px}
.tier ul{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:9px;font-size:15px;color:var(--dim)}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin-top:22px}
.split div{border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;background:var(--panel)}
.split b{display:block;font-size:30px;font-weight:600;letter-spacing:-1.2px;margin-bottom:5px}
.split span{font-size:14.5px;color:var(--dim);line-height:1.5}
/* enquiry form */
.form{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:620px;margin-top:26px}
.form label{display:block;font-size:14px;color:var(--dim);margin-bottom:7px}
.form input,.form select,.form textarea{width:100%;padding:12px 14px;border-radius:var(--r-input);
  border:1px solid var(--border);background:var(--raise);color:var(--ink);
  font:400 16px var(--font)}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px var(--blue-light)}
.form .wide{grid-column:1/-1}
.form-note{font-size:14px;color:var(--faint);margin-top:14px;grid-column:1/-1}
@media (max-width:940px){
  .pair{grid-template-columns:1fr}
  .pair .bad{border-right:0;border-bottom:1px solid var(--line)}
  .tiers{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
}

/* ---------- capability rail ----------
   Pill tabs filtering a scroll-snapped row of cards. The app screens are drawn in
   CSS rather than left as empty frames — there are no screenshots yet, and a
   grey box would say less about the product than a rough honest mock. */
.tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:0 0 40px}
@media (max-width:620px){
  .tabs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;
    margin-inline:calc(50% - 50vw);padding-inline:4vw;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:none}
}
.tab{padding:10px 20px;border-radius:var(--r-pill);border:1px solid transparent;
  background:none;color:var(--dim);font:500 16px var(--font);cursor:pointer;
  transition:background .15s,color .15s}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{background:var(--blue-light);border-color:transparent;color:var(--blue)}
.rail{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 0 26px;margin-inline:calc(50% - 50vw);
  padding-inline:max(calc(50vw - var(--shell) / 2), 16px);scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.cap{flex:0 0 clamp(280px,31%,392px);scroll-snap-align:center}
.cap-vis{aspect-ratio:4/3;border-radius:16px;overflow:hidden;position:relative;
  background:var(--surface);border:1px solid var(--line);
  display:grid;place-items:center;padding:26px}
.cap h3{margin:19px 0 7px;font-size:21px;font-weight:600;letter-spacing:-.5px}
.cap p{margin:0;font-size:16px;color:var(--dim);line-height:1.6}
.rail-dots{display:flex;gap:7px;justify-content:center;margin-top:6px}
.rail-dots i{width:7px;height:7px;border-radius:50%;background:var(--edge)}
.rail-dots i.on{background:var(--dim);width:22px;border-radius:4px}
@media (max-width:940px){ .cap{flex:0 0 82%} }

/* ---------- image-forward layout ----------
   The previous version was text and cards with almost no photography, which is
   what made it read as generated. Ultrahuman runs 3840px heroes and 1848px cards;
   these blocks are sized to match that scale. Any missing file degrades to a
   labelled slot rather than a broken icon. */
.slot{position:relative;overflow:hidden;background:var(--panel);
  border:1px solid var(--line);border-radius:18px}
.slot img,.slot video{width:100%;height:100%;object-fit:cover;display:block}
.slot[data-missing]::after{content:attr(data-empty);position:absolute;inset:0;
  display:grid;place-items:center;text-align:center;padding:22px;
  font-size:13.5px;line-height:1.6;color:var(--faint);
  background:repeating-linear-gradient(45deg,var(--panel),var(--panel) 11px,var(--raise) 11px,var(--raise) 22px)}
.bleed{width:100vw;margin-inline:calc(50% - 50vw)}
.bleed .slot{border-radius:0;border-left:0;border-right:0}
/* aspect utilities for image slots only — bare .wide collided with .form .wide */
.slot.tall{aspect-ratio:3/4}
.slot.wide{aspect-ratio:16/9}
.slot.ultra{aspect-ratio:24/7}
.showcase{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:center;margin-top:52px}
.showcase .slot{aspect-ratio:4/3}
/* 16:9 gym frame in the 4:3 slot: the subject stands left of centre, so favour that side */
.showcase .slot-gym img{object-position:38% 40%}
.showcase-txt h3{font-size:clamp(26px,2.7vw,36px);font-weight:500;letter-spacing:-1.1px;margin:0 0 14px}
.showcase-txt p{font-size:18px;color:var(--dim);line-height:1.65;margin:0}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.trio .slot{aspect-ratio:3/4}

/* capability cards are photography only */
.cap-vis{position:relative;padding:0;display:block;aspect-ratio:4/3}
.cap-vis .bg{position:absolute;inset:0}
.cap-vis .bg img{width:100%;height:100%;object-fit:cover}
.cap-vis[data-missing]::after{content:attr(data-empty);position:absolute;inset:0;z-index:1;
  display:grid;place-items:center;text-align:center;padding:22px;white-space:pre-line;
  font-size:13px;line-height:1.6;color:var(--faint);border-radius:16px;
  background:repeating-linear-gradient(45deg,var(--panel),var(--panel) 11px,var(--raise) 11px,var(--raise) 22px)}
.cap-vis .bg img{position:relative;z-index:1}
/* square source in a 4:3 slot: keep the face and the device in frame, crop the legs */
.cap-vis-reading .bg img{object-position:50% 22%}
.slot[data-missing]::after{white-space:pre-line}

/* ---------- testimonials ---------- */
.tst-hero{display:grid;grid-template-columns:.82fr 1.18fr;gap:40px;align-items:center}
.tst-vid{aspect-ratio:4/5;border-radius:20px;overflow:hidden;position:relative;background:var(--panel);
  border:1px solid var(--line)}
.tst-vid video,.tst-vid img{width:100%;height:100%;object-fit:cover}
.tst-play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(20,16,13,.28);
  border:0;cursor:pointer;color:#fff}
.tst-play i{width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.92);
  display:grid;place-items:center;box-shadow:0 10px 34px rgba(0,0,0,.4)}
.tst-play svg{margin-left:4px;color:#252525}
.tst-quote{font-size:clamp(24px,2.6vw,34px);font-weight:400;letter-spacing:-.9px;
  line-height:1.32;margin:0 0 20px}
.tst-by{display:flex;align-items:center;gap:13px}
.tst-by img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.tst-by b{display:block;font-weight:500;font-size:17px}
.tst-by span{font-size:15px;color:var(--dim)}
/* the floating wall */
.wall{margin-top:64px;position:relative;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.wall-row{display:flex;gap:20px;width:max-content;padding:10px 0}
.wall-row.a{animation:drift 64s linear infinite}
.wall-row.b{animation:drift 78s linear infinite reverse;margin-top:20px}
.wall:hover .wall-row{animation-play-state:paused}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tst{flex:0 0 372px;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:24px 26px;box-shadow:var(--shadow-card)}
.tst p{margin:0 0 18px;font-size:16.5px;line-height:1.62;color:var(--ink)}
.tst .who{display:flex;align-items:center;gap:11px}
.tst .who img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.tst .who b{display:block;font-size:15px;font-weight:500}
.tst .who span{font-size:13.5px;color:var(--dim)}
.tst .stars{color:var(--amber);font-size:13px;letter-spacing:1px;margin-bottom:11px}
@media (prefers-reduced-motion:reduce){.wall-row{animation:none}}
@media (max-width:940px){
  .showcase,.tst-hero{grid-template-columns:1fr;gap:26px}
  .trio{grid-template-columns:1fr}
  .tst{flex-basis:290px}
}

/* ---------- buy page ---------- */
.buy-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start;padding:56px 0 96px}
/* The gallery is sticky inside the same grid row as the accordions. Opening one
   changes the row height, and Chrome's scroll anchoring compensates by shifting the
   scroll position — which drags the image on the left. Opting out of anchoring here
   keeps the left column still while the right one grows. */
/* Scoping this to .buy-wrap was not enough: the anchor node Chrome picks sits in a
   section *below* the grid, so expanding an accordion still scrolled the page by the
   panel's height. Excluding the whole document is the only reliable opt-out, and it
   is what every <details> block on the site wants — FAQ and specs included. Safe here
   because every image slot has a fixed aspect-ratio, so nothing reflows on load. */
body{overflow-anchor:none}
/* Not sticky. Sticky inside this grid row pins the gallery against the row's bottom
   edge while the right column is short; expanding an accordion lengthens the row, the
   pin releases, and the image drops by exactly the panel's height. Static keeps the
   left column still no matter what the right one does. */
.buy-gallery{align-self:start}
.buy-main{aspect-ratio:1/1;border-radius:20px;overflow:hidden;background:var(--panel);border:1px solid var(--line)}
.buy-main img{width:100%;height:100%;object-fit:cover}
/* the product render is a cut-out: shown whole, with air around it, on the card surface */
.buy-main{background:#000}
.buy-main img[data-fit="contain"],.buy-thumbs img[data-fit="contain"]{object-fit:contain;padding:9%;background:var(--surface)}
.buy-thumbs img[data-fit="contain"]{padding:6%}
.buy-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:12px}
.buy-thumbs button[hidden]{display:none}
.buy-thumbs button{aspect-ratio:1/1;border-radius:11px;overflow:hidden;border:1px solid var(--line);
  background:var(--panel);padding:0;cursor:pointer}
.buy-thumbs button[aria-current="true"]{border-color:var(--blue)}
.buy-thumbs img{width:100%;height:100%;object-fit:cover}
/* what each frame shows: an icon and a word, frosted onto the thumbnail's foot */
.buy-thumbs button{position:relative}
.th-tag{position:absolute;left:6px;bottom:6px;z-index:2;display:inline-flex;align-items:center;gap:5px;
  padding:4px 8px 4px 6px;border-radius:var(--r-badge);font:500 10.5px var(--font);letter-spacing:.01em;
  color:#fff;background:rgba(10,10,12,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);pointer-events:none;white-space:nowrap}
.th-tag svg{width:12px;height:12px;flex:none;color:var(--blue)}
.buy-thumbs button[aria-current="true"] .th-tag{background:var(--blue);border-color:var(--blue)}
.buy-thumbs button[aria-current="true"] .th-tag svg{color:#fff}
@media (max-width:520px){.th-tag{padding:3px 6px 3px 5px;font-size:9.5px;gap:4px}}
.opt{border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:12px;
  cursor:pointer;display:flex;gap:14px;align-items:flex-start;background:var(--panel);box-shadow:var(--shadow-card)}
.opt[data-on="true"]{border-color:var(--blue);background:linear-gradient(140deg,rgba(48,139,249,.12),var(--panel))}
.opt input{margin-top:4px;accent-color:var(--blue);width:18px;height:18px}
.opt .o-t{flex:1}
.opt b{display:block;font-size:17.5px;font-weight:600;margin-bottom:3px}
.opt span{font-size:15px;color:var(--dim);line-height:1.55}
.opt .o-p{text-align:right;white-space:nowrap}
.opt .o-p b{font-size:21px}
.opt .o-p s{font-size:14px;color:var(--faint)}
.save{display:inline-block;font-size:11px;font-weight:500;color:var(--blue);
  background:var(--blue-light);padding:2px 8px;border-radius:var(--r-badge);margin-left:8px}
.tot{border-top:1px solid var(--line);margin-top:22px;padding-top:20px;
  display:flex;justify-content:space-between;align-items:baseline;font-size:18px}
.tot b{font-size:30px;font-weight:600;letter-spacing:-1.2px}
.reassure{display:grid;gap:12px;margin-top:24px}
.reassure div{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--dim)}
.reassure svg{flex:0 0 18px;color:var(--gut);margin-top:3px}
@media (max-width:940px){.buy-wrap{grid-template-columns:1fr;gap:32px}.buy-gallery{position:static}}

/* ---------- composition fixes ----------
   Left-aligned headings against a full-width section left half the row empty on
   every scroll. Sections now either centre, or pair the heading with an image so
   the width is actually used. */
.head-pair{display:grid;grid-template-columns:1fr .92fr;gap:48px;align-items:end;margin-bottom:44px}
.head-pair .slot{aspect-ratio:16/10}
.head-pair h2,.head-pair .sec-lede{margin-bottom:0}
.head-pair .sec-lede{margin-top:14px}

/* steps carry photography now, not hairlines over text */
.steps{grid-template-columns:repeat(4,1fr);gap:22px}
.step{border-top:0;padding-top:0}
.step .s-img{aspect-ratio:3/4;border-radius:14px;overflow:hidden;margin-bottom:16px;
  background:var(--panel);border:1px solid var(--line);position:relative}
.step .s-img img{width:100%;height:100%;object-fit:cover}
.step .s-img b{position:absolute;left:14px;top:12px;z-index:2;font-size:13px;font-weight:600;
  color:#fff;background:rgba(20,16,13,.72);backdrop-filter:blur(6px);
  padding:4px 11px;border-radius:20px}
.step .num{display:none}

/* the comparison reads as an argument, not two floating boxes */
.vs{grid-template-columns:.8fr 1.2fr;gap:0;border:1px solid var(--line);
  border-radius:18px;overflow:hidden;max-width:1000px;margin-inline:auto}
.vs-card{border:0;border-radius:0;padding:38px 34px}
.vs-card.them{border-right:1px solid var(--line);background:var(--raise)}
.vs-card.us{background:linear-gradient(150deg,rgba(228,131,38,.10),rgba(48,139,249,.10))}
.vs-card .n{font-size:70px;font-weight:500;letter-spacing:-3px}

/* full-bleed video moment */
.filmstrip{position:relative;height:min(74vh,660px);overflow:hidden}
.filmstrip video,.filmstrip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.filmstrip{color:#fff}
.filmstrip::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,20,20,.84),rgba(20,20,20,.22) 62%)}
.filmstrip .cap{position:absolute;z-index:2;left:0;right:0;top:50%;transform:translateY(-50%);
  flex:none;width:auto}
.filmstrip .cap .shell{width:var(--shell);margin:0 auto}
.filmstrip h2{max-width:16ch;margin-bottom:14px;font-weight:500}
.filmstrip p{max-width:44ch;font-size:18.5px;color:rgba(255,255,255,.82);line-height:1.62;margin:0}
.filmstrip .btn{margin-top:26px}

/* press row, clearly marked until real */
.press{display:flex;flex-wrap:wrap;gap:38px;align-items:center;justify-content:center;
  opacity:.55;filter:grayscale(1)}
html[data-theme="dark"] .press{filter:grayscale(1) invert(1) brightness(1.4)}
.press img{height:26px;width:auto}
.press-note{text-align:center;font-size:12.5px;color:var(--fuel);margin:0 0 20px;
  letter-spacing:.4px;font-weight:500}
@media (max-width:940px){
  .head-pair{grid-template-columns:1fr;gap:26px}
  .steps{grid-template-columns:1fr 1fr;gap:16px}
  .vs{grid-template-columns:1fr}
  .vs-card.them{border-right:0;border-bottom:1px solid var(--line)}
  .filmstrip{height:60vh}
}

/* the worked example — one concrete case carries the whole mechanism */
.example{border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:30px;
  background:var(--panel);display:grid;grid-template-columns:1fr 1fr}
.example > div{padding:24px 26px}
.example > div:first-child{border-right:1px solid var(--line)}
.ex-h{font-size:12.5px;font-weight:600;letter-spacing:.6px;margin-bottom:10px}
.ex-hi .ex-h{color:var(--fuel)}
.ex-lo .ex-h{color:var(--ink-4);color:var(--faint)}
.example b{display:block;font-size:18.5px;font-weight:500;letter-spacing:-.3px;margin-bottom:7px}
.example p{margin:0;font-size:15.5px;color:var(--dim);line-height:1.6}
@media (max-width:940px){.example{grid-template-columns:1fr}
  .example > div:first-child{border-right:0;border-bottom:1px solid var(--line)}}
/* long-form reading column */
.body{font-size:17.5px;line-height:1.72;color:var(--dim);margin:0 0 18px;max-width:68ch}
section .shell h2 + .body{margin-top:0}
.shell > h2{margin-top:44px}
.shell > h2:first-child{margin-top:0}
/* the biomarker cards carry motion now, duotoned the same way the stills were */
.mark-img video{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.04) brightness(1.02)}
/* the airflow clip is 1284x716 — close enough to 16:9 to fill the slot edge to edge */
.why-vid{background:#0E0B09}
.why-vid video{width:100%;height:100%;object-fit:cover}

/* ---------- research provenance ----------
   Deliberately just a statement and a link. The three analytes are explained one
   card each in #marks, so a second card trio here repeated them and read as a kit. */
#validation .btn{margin-top:14px}

@media (max-width:900px){
  .p-hero-in{grid-template-columns:1fr;gap:34px}
  .p-hero-in .stage{max-height:420px}
}

/* ---------- dashboard showcase ----------
   One sub-tab per dashboard view, each making a single point. Screenshot slots stay
   empty until anonymised captures land: the live dashboard carries client names, ages
   and weight history, which cannot go on a public page. */
#dash .tabs{margin:30px 0 26px}
.dash-panel{display:grid;grid-template-columns:1.35fr .65fr;gap:30px;align-items:center}
/* an author-sheet display value outranks the UA sheet's [hidden]{display:none},
   so the attribute needs restating here or every panel renders at once */
.dash-panel[hidden]{display:none}
/* the captures are ~16:9 screens of a light UI; show the whole screen rather than crop
   the edges of a dashboard, on the app's own white ground */
.dash-shot{aspect-ratio:16/9;background:#fff}
.dash-shot img{object-fit:contain;background:#fff}
.dash-txt h3{margin:0 0 12px;font-size:clamp(22px,2.2vw,29px);font-weight:500;letter-spacing:-.8px}
.dash-txt p{margin:0;font-size:16.5px;color:var(--dim);line-height:1.65}
@media (max-width:860px){ .dash-panel{grid-template-columns:1fr;gap:20px} }

/* ---------- comparison matrix ----------
   Was three stacked pairs, which repeated the Today / With Rysflo labels six times
   and hid the actual argument. As a matrix the three dimensions become the spine and
   each label is stated once, so the structure carries the comparison. */
.matrix{margin-top:34px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.mx-head,.mx-row{display:grid;grid-template-columns:.5fr 1fr 1fr}
.mx-head{background:var(--raise);border-bottom:1px solid var(--line)}
.mx-head span{padding:15px 24px;font-size:13.5px;font-weight:500;color:var(--faint)}
.mx-head .mx-now{color:#fff;background:var(--blue)}
/* Dividers move from the row onto the cells, so the rule crossing the blue column
   can be white-alpha instead of a grey seam laid over the blue. */
.mx-row+.mx-row .mx-dim,.mx-row+.mx-row .mx-cell{border-top:1px solid var(--line)}
.mx-row+.mx-row .mx-cell.now{border-top-color:rgba(255,255,255,.22)}
.mx-dim{padding:26px 24px;font-size:17px;font-weight:500;letter-spacing:-.3px;color:var(--cream)}
.mx-cell{padding:26px 24px;border-left:1px solid var(--line)}
.mx-cell h3{margin:0 0 8px;font-size:16.5px;font-weight:500;letter-spacing:-.2px;color:var(--faint)}
.mx-cell p{margin:0;font-size:15px;line-height:1.6;color:var(--faint)}
/* The Rysflo side is a solid brand-blue panel running the height of the matrix, with
   white type. The alternatives stay grey on the page ground. */
.mx-cell.now{background:var(--blue);border-left-color:var(--blue)}
.mx-cell.now h3{color:#fff}
.mx-cell.now p{color:rgba(255,255,255,.94)}
@media (max-width:820px){
  .mx-head{display:none}
  .mx-row{grid-template-columns:1fr}
  .mx-dim{padding-bottom:0}
  .mx-cell{border-left:0}
  .mx-cell h3::before{content:"Today — ";color:var(--faint)}
  .mx-cell.now h3::before{content:"With Rysflo — ";color:rgba(255,255,255,.75)}
}

/* the closing form is capped at 620px, so on its own it left the whole right half of
   the section empty. Copy and form now sit side by side. */
.talk-in{display:grid;grid-template-columns:1fr .95fr;gap:54px;align-items:start}
.talk-in .form{margin-top:0;max-width:none;align-content:start}
.talk-in .form>div{align-self:start}
.talk-in h2{margin-top:0}
#talk{padding-bottom:74px}
@media (max-width:900px){ .talk-in{grid-template-columns:1fr;gap:28px} }

/* ---------- long-form science page ----------
   1,100 words in one unbroken column with no way to see the shape of the argument.
   A sticky contents rail gives the reader the structure up front and their position
   in it, which is what a long technical read needs more than decoration. */
.doc-in{display:grid;grid-template-columns:212px 1fr;gap:64px;align-items:start}
.doc-body{max-width:68ch;min-width:0}
.toc{position:sticky;top:104px}
.toc-h{margin:0 0 14px;font-size:12.5px;font-weight:600;color:var(--faint);letter-spacing:.3px}
.toc nav{display:grid}
.toc a{padding:9px 0 9px 16px;border-left:1px solid var(--line);font-size:14.5px;
  line-height:1.4;color:var(--faint);text-decoration:none;transition:color .2s,border-color .2s}
.toc a:hover{color:var(--dim)}
.toc a.on{color:var(--cream);border-left-color:var(--fuel)}
.doc-body h2{scroll-margin-top:104px;margin-top:52px}
.doc-body h2:first-child{margin-top:0}

.fig-sci{margin:52px 0 30px;padding:0}
.fig-sci img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);
  border:1px solid var(--line);display:block}
.fig-sci figcaption{margin-top:11px;font-size:14px;color:var(--faint);line-height:1.5;text-align:center}

@media (max-width:960px){
  .doc-in{grid-template-columns:1fr;gap:34px}
  .toc{position:static;border-bottom:1px solid var(--line);padding-bottom:22px}
  .toc nav{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:2px}
  .toc a{border-left:0;padding-left:0}
  .toc a.on{border-left:0}
}

/* this hero has a short lede, so the tall 4:5 stage left a gap beneath the text */

.fig-sci{margin:26px 0 30px}

.nav-links a.on{color:var(--ink)}
/* the amber eyebrow and contents marker were the only orange on the science page and
   read as an accent with no meaning; amber is reserved for the fuel channel */
.p-hero .eyebrow{color:var(--dim)}
.toc a.on{border-left-color:var(--cream)}

/* ---------- blog index ---------- */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:34px 30px;margin-top:8px}
.post{display:flex;flex-direction:column}
.post.feature{grid-column:1/-1;display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center}
.post-img{aspect-ratio:16/10;margin-bottom:18px}
.post.feature .post-img{margin-bottom:0;aspect-ratio:16/11}
.post-meta{display:flex;gap:14px;font-size:13px;color:var(--faint);margin-bottom:10px}
.post-meta span+span::before{content:"·";margin-right:14px;color:var(--line)}
.post h3{margin:0 0 9px;font-size:21px;font-weight:500;letter-spacing:-.5px;line-height:1.28}
.post.feature h3{font-size:clamp(26px,2.6vw,34px);letter-spacing:-1px}
.post p{margin:0 0 16px;font-size:15.5px;color:var(--dim);line-height:1.62}
.post.feature p{font-size:17px}
.post-link{font-size:14.5px;font-weight:500;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--edge);padding-bottom:3px;align-self:flex-start;margin-top:auto}
.post-link:hover{border-bottom-color:var(--dim)}
@media (max-width:820px){ .post.feature{grid-template-columns:1fr;gap:18px} }

/* ---------- subscription pricing ---------- */
.price{border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:22px}
.price-n{display:flex;align-items:baseline;gap:10px}
.price-n b{font-size:52px;font-weight:500;letter-spacing:-2.4px;line-height:1;color:var(--cream)}
.price-n span{font-size:16px;color:var(--dim)}
.price-sub{margin:11px 0 0;font-size:15px;color:var(--faint);line-height:1.55}

/* purchase panel keeps only price, action and the three assurances that answer an
   objection; everything else earns its own section below, one idea at a time */
.assure{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:10px}
.assure li{position:relative;padding-left:24px;font-size:15px;color:var(--faint);line-height:1.55}
.assure li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;
  border-radius:50%;background:var(--edge)}

.ticks{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:18px}
.ticks li{font-size:15.5px;color:var(--dim);line-height:1.6}
.ticks b{display:block;font-size:17px;font-weight:500;color:var(--ink);
  letter-spacing:-.25px;margin-bottom:3px}

/* Earn-it-down calculator on /buy. Tap or drag the month grid; the price follows.
   A complete month always earns the full $6, which is why February is not shortchanged. */
.earn{max-width:640px;margin:38px auto 0;text-align:left;background:var(--ground);
  border:1px solid var(--line);border-radius:var(--r);padding:26px 26px 24px}
.earn-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.earn-mo{font-size:14px;color:var(--faint)}
.earn select{background:var(--raise);color:var(--ink);border:1px solid var(--edge);
  border-radius:9px;padding:8px 11px;font:inherit;font-size:14.5px;cursor:pointer}
.earn-btns{margin-left:auto;display:flex;gap:8px}
.earn-btns button{background:transparent;color:var(--dim);border:1px solid var(--edge);
  border-radius:99px;padding:8px 15px;font:inherit;font-size:13.5px;cursor:pointer;
  transition:border-color .18s,color .18s}
.earn-btns button:hover{border-color:var(--dim);color:var(--ink)}
.earn-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:7px;touch-action:none}
.earn-grid button{aspect-ratio:1;border:1px solid var(--edge);background:var(--raise);
  border-radius:8px;cursor:pointer;padding:0;font:inherit;font-size:12px;
  color:var(--faint);font-variant-numeric:tabular-nums;
  transition:background .14s,border-color .14s,color .14s}
.earn-grid button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.earn-grid button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.earn-hint{margin:13px 0 0;font-size:13.5px;color:var(--faint)}
.earn-out{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.earn-line[hidden],.earn-price [hidden]{display:none}
.earn-line{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;font-size:15px;
  color:var(--dim);font-variant-numeric:tabular-nums}
.earn-line b{color:var(--blue);font-weight:500;font-size:17px}
.earn-x,.earn-eq{color:var(--faint)}
.earn-price{display:flex;align-items:baseline;gap:14px;margin-top:16px;flex-wrap:wrap}
.earn-price b{font-size:58px;font-weight:500;letter-spacing:-2.5px;line-height:1;color:var(--cream);
  font-variant-numeric:tabular-nums;transition:color .18s}
.earn-meta{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.earn-meta i{font-style:normal;font-size:14px;color:var(--faint)}
.earn-meta s{font-size:14px;color:var(--faint);text-decoration-thickness:1px}
.earn-year{margin:16px 0 0;font-size:14.5px;color:var(--dim);line-height:1.6}
@media (max-width:560px){
  .earn{padding:20px 18px 20px}
  .earn-grid{grid-template-columns:repeat(7,1fr);gap:6px}
  .earn-price{gap:10px}
  .earn-price b{font-size:46px}
  .earn-btns{margin-left:0;width:100%}
  .earn-btns button{flex:1}
}

/* ---------- science chapters with charts ----------
   Diagrams are inline SVG rather than generated images: they hold real labels and
   real values, stay crisp at any size, follow the theme, and weigh a few KB. */
/* charts sit inside the reading column and bleed a little past it, so a wide plot
   is legible without breaking the sticky contents rail beside the prose */
.doc-body .chart{margin:30px 0 34px;width:calc(100% + 90px)}
.chart svg{width:100%;height:auto;display:block;font-family:inherit}
.chart figcaption{margin-top:13px;font-size:13.5px;color:var(--faint);line-height:1.6;
  max-width:62ch;margin-inline:auto;text-align:center}
@media (max-width:1100px){ .doc-body .chart{width:100%} }

/* ---------- purchase page: accordions, steps, comparison ----------
   Detail lives in accordions so the panel stays short without losing content. */
.acc{margin-top:30px;border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;padding:16px 28px 16px 0;position:relative;
  font-size:16px;color:var(--ink);letter-spacing:-.2px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";position:absolute;right:6px;top:23px;width:8px;height:8px;
  border-right:1.5px solid var(--dim);border-bottom:1.5px solid var(--dim);
  transform:rotate(45deg);transition:transform .2s}
.acc details[open] summary::after{transform:rotate(-135deg);top:26px}
.acc p,.acc ul{margin:0 0 18px;font-size:15px;color:var(--dim);line-height:1.65}
.acc ul{padding-left:18px;display:grid;gap:8px}
.acc ul b{color:var(--ink);font-weight:500}

.how{list-style:none;counter-reset:h;padding:0;margin:22px 0 0;display:grid;gap:20px}
.how li{counter-increment:h;position:relative;padding-left:42px;font-size:15.5px;
  color:var(--dim);line-height:1.6}
.how li::before{content:counter(h);position:absolute;left:0;top:1px;width:26px;height:26px;
  border-radius:50%;border:1px solid var(--edge);display:grid;place-items:center;
  font-size:13px;color:var(--faint)}
.how b{display:block;font-size:17px;font-weight:500;color:var(--ink);margin-bottom:3px;letter-spacing:-.25px}
.showcase.rev>.slot{order:2}

.cmp{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cmp-row{display:grid;grid-template-columns:.9fr 1.15fr 1fr 1fr}
.cmp-row+.cmp-row{border-top:1px solid var(--line)}
.cmp-row>span{padding:18px 20px;font-size:14.5px;color:var(--faint);line-height:1.55}
.cmp-row>span+span{border-left:1px solid var(--line)}
.cmp-row>span:first-child{color:var(--dim)}
.cmp-head{background:var(--raise)}
.cmp-head>span{font-size:15px;font-weight:500;color:var(--dim)}
/* The Rysflo column reads as selected: a blue wash with a continuous edge down both
   sides, against neutral grey for the alternatives. A tint rather than a solid fill —
   body copy has to stay legible on it. */
.cmp-us{background:rgba(48,139,249,.10);color:var(--ink)!important;
  box-shadow:inset 1px 0 0 rgba(48,139,249,.34),inset -1px 0 0 rgba(48,139,249,.34)}
.cmp-head .cmp-us{background:rgba(48,139,249,.18);color:var(--blue)!important;
  box-shadow:inset 1px 0 0 rgba(48,139,249,.44),inset -1px 0 0 rgba(48,139,249,.44),
             inset 0 1px 0 rgba(48,139,249,.44)}
.cmp-row:last-child .cmp-us{box-shadow:inset 1px 0 0 rgba(48,139,249,.34),
  inset -1px 0 0 rgba(48,139,249,.34),inset 0 -1px 0 rgba(48,139,249,.34)}
@media (max-width:860px){
  .showcase.rev>.slot{order:0}
  /* Wrapping the two alternatives onto a second, unlabelled line meant a reader could
     not tell which product a value belonged to. The table stays a table instead: one
     horizontal scroller, all four columns intact, the header row kept, and the row
     label pinned to the left edge so the subject of a value is never off screen. */
  .cmp{overflow:hidden;overflow-x:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain}
  .cmp:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .cmp-row{grid-template-columns:126px 168px 158px 176px;min-width:628px}
  .cmp-row>span{padding:15px 16px;font-size:13.5px}
  .cmp-head>span{font-size:14px}
  /* the label column rides along with the scroll */
  .cmp-row>span:first-child{position:sticky;left:0;z-index:3;
    background:var(--ground);box-shadow:1px 0 0 var(--line)}
  .cmp-head>span:first-child{background:var(--raise)}
  /* the Rysflo column keeps its blue seat and both edges while it scrolls */
  .cmp-us{position:relative;z-index:2}
}

/* ---------- outcome cards ---------- */
.ocs{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;margin-top:34px}
.oc{background:var(--ground);padding:26px 26px 30px}
/* the drawing sits straight on the card — a boxed panel inside a bordered cell inside a
   framed grid was three rectangles around one small picture */
.oc-vis{margin:0 -6px 18px}
.oc-vis svg{width:100%;height:auto;display:block;font-family:inherit}
.oc-vis .num{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
/* ---------- the scale drawings, animated ----------
   Only while the wrapper carries data-anim (set by script, never under reduced motion) are
   the parts held in their starting state; each card plays once it gets data-in. Verbs:
   grow (bars, from the baseline), draw (lines, via pathLength=1), fill (grey turns orange),
   shift (a piece steps aside), fade. Each part times itself with --d. */
.ocs[data-anim] .a-grow{transform:scaleY(0)}
.ocs[data-anim] .a-draw{stroke-dasharray:1;stroke-dashoffset:1}
.ocs[data-anim] .a-fade{opacity:0}
.ocs[data-anim] .a-fill{fill:var(--ink);fill-opacity:.38}
.ocs[data-anim] .a-shift{transform:translateX(0)}
.ocs[data-anim] .oc[data-in] .a-grow{animation:oc-grow .6s cubic-bezier(.2,.7,.2,1) forwards}
.ocs[data-anim] .oc[data-in] .a-draw{animation:oc-draw .55s ease-out forwards}
.ocs[data-anim] .oc[data-in] .a-draw.a-slow{animation-duration:1.3s}
.ocs[data-anim] .oc[data-in] .a-fade{animation:oc-fade .45s ease-out forwards}
.ocs[data-anim] .oc[data-in] .a-fill{animation:oc-fill .5s ease-out forwards}
.ocs[data-anim] .oc[data-in] .a-shift{animation:oc-shift .5s cubic-bezier(.2,.7,.2,1) forwards}
.ocs[data-anim] .oc[data-in] [style*="--d:"]{animation-delay:var(--d)}
@keyframes oc-grow{to{transform:scaleY(1)}}
@keyframes oc-draw{to{stroke-dashoffset:0}}
@keyframes oc-fade{to{opacity:1}}
@keyframes oc-fill{to{fill:var(--fuel);fill-opacity:1}}
@keyframes oc-shift{to{transform:translateX(8px)}}
/* the finished state, for no-script and reduced motion */
.ocs:not([data-anim]) .a-shift{transform:translateX(8px)}
.oc h3{margin:0 0 9px;font-size:19px;font-weight:500;letter-spacing:-.4px;line-height:1.25}
.oc p{margin:0;font-size:15px;color:var(--dim);line-height:1.6}
.oc sup{font-size:11px;color:var(--faint);margin-left:1px}

.refs{margin:22px 0 20px;padding-left:20px;display:grid;gap:11px;
  font-size:15px;color:var(--dim);line-height:1.6;max-width:78ch}
.refs a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--edge)}
.refs a:hover{border-bottom-color:var(--dim)}

/* ---------- retention model ---------- */
.calc{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.calc-in{padding:34px 36px;display:grid;gap:8px;align-content:start}
.calc-in label{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-size:15px;color:var(--dim);margin-top:14px}
.calc-in label:first-child{margin-top:0}
.calc-in output{font-size:16px;color:var(--cream);font-weight:500}
.calc-in input[type=range]{width:100%;accent-color:var(--fuel);height:22px;background:transparent}
.calc-money{display:flex;align-items:center;gap:10px;border:1px solid var(--border);
  border-radius:var(--r-input);padding:0 14px;background:var(--raise)}
.calc-money span{color:var(--faint);font-size:15px}
.calc-money input{flex:1;background:transparent;border:0;outline:none;color:var(--ink);
  font-size:17px;padding:12px 0;font-family:inherit}
.calc-out{padding:34px 36px;border-left:1px solid var(--line);
  background:linear-gradient(150deg,rgba(228,131,38,.07),rgba(48,139,249,.05))}
.calc-k{margin:0;font-size:13px;color:var(--faint);letter-spacing:.2px}
.calc-n{margin:6px 0 4px;font-size:clamp(38px,4.4vw,54px);font-weight:500;
  letter-spacing:-2px;line-height:1;color:var(--cream)}
.calc-n2{margin:6px 0 0;font-size:clamp(28px,3vw,36px);font-weight:500;
  letter-spacing:-1.2px;line-height:1;color:var(--cream)}
.calc-sub{margin:0;font-size:14.5px;color:var(--dim)}
.calc-out hr{border:0;border-top:1px solid var(--line);margin:24px 0 20px}
@media (max-width:860px){ .calc{grid-template-columns:1fr} .calc-out{border-left:0;border-top:1px solid var(--line)} }

/* ---------- audience split cards ---------- */
.twocard{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.tc{border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:34px 34px 12px;box-shadow:var(--shadow-card)}
.tc-eyebrow{margin:0 0 8px;font-size:13px;font-weight:500;color:var(--fuel);letter-spacing:.2px}
.tc h3{margin:0 0 26px;font-size:clamp(23px,2.4vw,30px);font-weight:500;letter-spacing:-.9px;line-height:1.18}
.tc-item{display:grid;grid-template-columns:34px 1fr;gap:16px;padding:22px 0;
  border-top:1px solid var(--line)}
.tc-item b{display:block;font-size:17px;font-weight:500;color:var(--ink);
  letter-spacing:-.3px;line-height:1.3;margin-bottom:7px}
.tc-item p{margin:0;font-size:15px;color:var(--dim);line-height:1.6}
.tc-i{width:34px;height:34px;border-radius:9px;background:var(--raise);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--dim)}
.tc-i svg{width:18px;height:18px}
@media (max-width:860px){ .twocard{grid-template-columns:1fr} }

/* ---------- checkout first fold ----------
   The old H1 was just the word "Rysflo", which spent the most valuable space on the
   page telling the buyer something the nav already told them. It now states the offer.
   The goal pills went with it: one product at one price is not a variant choice. */
.buy-eyebrow{margin:0 0 12px;font-size:13px;font-weight:500;color:var(--faint);letter-spacing:.3px}
.buy-h1{font-size:clamp(27px,2.7vw,36px);font-weight:500;letter-spacing:-1.1px;
  line-height:1.2;margin:0 0 26px;max-width:19ch}
.ticks .eg{display:block;margin-top:6px;color:var(--faint);font-size:14.5px}
/* ---------- numbered concern cards ---------- */
.concerns{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cc{background:var(--ground);padding:26px 24px 28px}
.cc-n{display:block;font-size:13px;color:var(--fuel);margin-bottom:14px;letter-spacing:.3px}
.cc b{display:block;font-size:17.5px;font-weight:500;letter-spacing:-.35px;
  color:var(--ink);margin-bottom:8px;line-height:1.3}
.cc p{margin:0;font-size:15px;color:var(--dim);line-height:1.6}

/* ---------- sticky buy bar ---------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--nav-bg-solid);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);padding:14px 0}
.buybar-in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.buybar b{font-size:16px;font-weight:500;color:var(--ink);margin-right:12px}
.buybar span{font-size:14.5px;color:var(--faint)}
@media (max-width:620px){ .buybar span{display:none} }

/* ---------- buy page mosaic ----------
   Good Bug pairs a full-bleed image panel against a grid of concern cards rather than
   stacking equal-width bands. Same rhythm here. */
.mosaic{display:grid;grid-template-columns:.78fr 1.22fr;gap:26px;align-items:stretch}
.mos-img{margin:0;position:relative;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);min-height:380px}
.mos-img img{width:100%;height:100%;object-fit:cover;display:block}
.mos-img figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;
  font-size:16px;line-height:1.4;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(20,20,20,.86))}
.mos-txt{display:flex;flex-direction:column;justify-content:center}
.mos-txt h2{margin:0 0 8px}
.mos-txt .sec-lede{margin-bottom:26px}
.mos-txt .concerns{grid-template-columns:1fr 1fr}
@media (max-width:900px){ .mosaic{grid-template-columns:1fr} .mos-img{min-height:260px} }

/* ---------- shop: the morning filmstrip ---------- */
.mstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
.mstep{margin:0}
.mstep-img{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line)}
.mstep-img img{width:100%;height:100%;object-fit:cover;display:block}
.mstep-t{position:absolute;left:14px;top:13px;font-size:12.5px;color:#fff;
  background:rgba(20,16,13,.62);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:5px 12px}
.mstep figcaption{margin-top:16px;font-size:15px;color:var(--dim);line-height:1.6}
.mstep b{display:block;font-size:17.5px;font-weight:500;color:var(--ink);
  letter-spacing:-.3px;margin-bottom:6px}

/* full-bleed statement band on the shop page */
.shopband{height:min(64vh,560px)}
.shopband h2{max-width:20ch;margin-bottom:14px;font-weight:500}
.shopband p{max-width:52ch;font-size:18px;color:rgba(255,255,255,.82);line-height:1.62;margin:0}

/* the loyalty streak, drawn rather than described */
.streak{margin:34px auto 0;max-width:470px}
.streak svg{width:100%;height:auto;display:block;font-family:inherit}
.streak figcaption{margin-top:16px;font-size:14.5px;color:var(--faint);line-height:1.6;text-align:center}

/* two app frames side by side */
/* two app screens, shown as screens: a phone-shaped frame on the app's own white ground,
   with air around the capture so nothing sits hard against an edge */
.appduo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.appduo figure{margin:0}
.appduo .screen{aspect-ratio:9/13;border-radius:26px;overflow:hidden;background:#f5f7fa;
  border:6px solid #1c1f24;box-shadow:0 0 0 1px rgba(255,255,255,.08),var(--shadow-float);
  display:flex;align-items:center;justify-content:center;padding:8% 6%}
html:not([data-theme="dark"]) .appduo .screen{border-color:#252525;box-shadow:0 0 0 1px rgba(0,0,0,.06),var(--shadow-float)}
.appduo .screen img{width:100%;height:100%;object-fit:contain;border-radius:12px;display:block}
.appduo figcaption{margin-top:12px;font-size:13.5px;color:var(--faint);text-align:center}
@media (max-width:820px){ .shopband{height:auto;padding:80px 0} }

@media (max-width:900px){
  .hero{min-height:0;padding-bottom:0}
  .hero-in{grid-template-columns:1fr;gap:0}
  .stage{position:relative;width:100vw;margin:30px calc(50% - 50vw) 0;height:64vh;top:auto;bottom:auto}
  .stage::before{inset:auto 0 0 0;width:auto;height:40%;
    background:linear-gradient(180deg,transparent,var(--ground))}
  .seq{padding:26px 6vw 30px}
}

/* hero type, inverted for the bright photograph */
/* The photograph starts below the nav rather than running behind it. Pulling it up
   made the frost read, but the bar then cropped into the subject, and an intact
   photograph matters more than the glass effect over it. The nav still frosts against
   whatever scrolls beneath it. */
.hero{background:var(--page-bg)}
.hero::before,.hero::after{display:none}
.hero-copy h1{color:var(--ink);letter-spacing:-1.8px}
.hero-copy .then{color:var(--ink)}
.hero-copy p.lede{color:var(--dim)}
.hero-copy .qs-sr{color:var(--ink)}
.hero-copy .btn-quiet{border-color:var(--border);color:var(--ink)}
.hero-copy .btn-quiet:hover{border-color:var(--edge)}
.hero-copy .hipaa{color:var(--faint)}
@media (max-width:900px){
  .hero{min-height:0;padding:0 0 48px}
  .hero-in{grid-template-columns:1fr;gap:0}
  .stage{position:relative;inset:auto;width:100vw;margin:0 calc(50% - 50vw);height:52vh}
  .hero{min-height:calc(100svh - 64px);align-items:flex-end;padding:40px 0 44px}
  .hero-copy{grid-column:1;padding-top:30px}
  html[data-theme="dark"] .hero-in{grid-template-columns:1fr}
  .hero .frame::after{background:linear-gradient(180deg,rgba(var(--page-rgb),.3) 0,rgba(var(--page-rgb),.62) 28%,rgba(var(--page-rgb),.88) 55%,rgba(var(--page-rgb),.97) 100%)}
}

/* ---------- home hero, dark theme ----------
   The light theme washes the photograph out to the page colour so dark copy can sit on
   it. On the dark theme that wash became a flat black void down the right third, cold
   against a warm photograph. Here the scrim is warm-tinted, never reaches solid, and
   the copy is white on the picture rather than page-ink on a wash. */
html[data-theme="dark"] .hero .frame::after{
  background:
    linear-gradient(90deg,rgba(12,10,8,0) 30%,rgba(12,10,8,.42) 58%,rgba(12,10,8,.66) 100%),
    linear-gradient(180deg,rgba(15,17,20,0) 72%,rgba(15,17,20,.92))}   /* seats the bottom edge */
html[data-theme="dark"] .hero-copy h1,html[data-theme="dark"] .hero-copy .then{color:#fff}
html[data-theme="dark"] .hero-copy p.lede{color:rgba(255,255,255,.88)}
html[data-theme="dark"] .hero-copy .trust,html[data-theme="dark"] .hero-copy .hipaa{color:rgba(255,255,255,.78)}
html[data-theme="dark"] .hero-copy .tick{color:var(--green)}
/* the secondary button was dark on dark: frosted glass with a visible edge instead */
html[data-theme="dark"] .hero-copy .btn-quiet{color:#fff;border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.10);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html[data-theme="dark"] .hero-copy .btn-quiet:hover{border-color:rgba(255,255,255,.62);background:rgba(255,255,255,.16)}
/* slide dots: white on the photograph, active one solid */
html[data-theme="dark"] .stage-dots button{background:rgba(255,255,255,.28);background-clip:content-box}
html[data-theme="dark"] .stage-dots button[aria-current="true"]{background:#fff;background-clip:content-box}
/* pull the copy a little toward the subject so the two do not sit on opposite walls */
@media (min-width:901px){
  html[data-theme="dark"] .hero-in{grid-template-columns:.92fr 1fr}
}
@media (max-width:900px){
  html[data-theme="dark"] .hero .frame::after{
    background:linear-gradient(180deg,rgba(8,9,11,.32) 0,rgba(8,9,11,.66) 28%,rgba(8,9,11,.9) 55%,rgba(8,9,11,.97) 100%)}
}

/* hero carousel dots — small, low, out of the copy's way */
.stage-dots{position:absolute;z-index:3;left:0;bottom:26px;display:flex;gap:9px;
  padding-left:calc((100vw - var(--shell))/2)}
/* The bar stays 3px, but a 3px tap target is unusable on a phone. The button carries
   20px of vertical padding for the hit area and paints only its content box, then pulls
   that padding back out with an equal negative margin so the row's layout — and the
   hero above it — is exactly where it was. Touchable height 43px. */
.stage-dots button{width:26px;height:3px;border:0;box-sizing:content-box;
  padding:20px 0;margin:-20px 0;border-radius:2px;cursor:pointer;
  background:rgba(var(--ink-rgb),.22);background-clip:content-box;
  transition:background .25s,width .25s}
.stage-dots button[aria-current="true"]{background:rgba(var(--ink-rgb),.72);width:38px;
  background-clip:content-box}
@media (max-width:900px){ .stage-dots{padding-left:6vw;bottom:16px} }

/* over a bright photograph the frosted bar needs its type brought up, or the links
   sink into the blur */
nav .nav-links a{color:var(--text-secondary)}
nav .nav-links a:hover,nav .nav-links a.on{color:var(--text-primary)}
nav .logo{color:var(--text-primary)}
nav.solid .nav-links a{color:var(--dim)}
nav.solid .nav-links a:hover,nav.solid .nav-links a.on{color:var(--ink)}

/* ---------- capability card UI overlays ----------
   Dark panel, because our photography is bright — a light frost on a light image has
   nothing to hold against. Mono figures and hairline rules do the work that weight and
   fill were doing before. Sized in container units so the panel shrinks with the card
   instead of swamping the small ones. */
.cap-vis{container-type:inline-size}
.cap-vis .ui{position:absolute;right:4cqw;bottom:4cqw;z-index:2;width:min(46cqw,204px);
  /* Measured from the reference: its veil is only 0.18-0.32 alpha and it keeps roughly
     half the photograph's local contrast — the picture genuinely reads through. Two
     things were making mine opaque: a 44px blur that flattened all detail, and a
     brightness() filter compounding on top of the tint. Blur is now light enough to
     preserve texture, and the tint alone does the seating. Ultrahuman lightens because
     their photography is dark; ours is bright, so the same construction inverts. */
  background:rgba(12,10,8,.30);
  -webkit-backdrop-filter:blur(13px) saturate(1.15);
  backdrop-filter:blur(13px) saturate(1.15);
  /* glass has an edge: the reference catches light along the top and left, which is
     what stops the panel reading as a flat rectangle laid on the picture */
  border:1px solid rgba(255,255,255,.13);
  border-top-color:rgba(255,255,255,.26);border-left-color:rgba(255,255,255,.19);
  border-radius:4.2cqw;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  padding:2.9cqw 3.1cqw 3.1cqw;color:#fff;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums}
.cap-vis .ui-h{font-size:2.6cqw;font-weight:400;color:rgba(255,255,255,.70);
  letter-spacing:.09em;text-transform:uppercase;
  padding-bottom:1.9cqw;margin-bottom:2.2cqw;
  border-bottom:1px solid rgba(255,255,255,.14)}
.cap-vis .ui-score{display:flex;align-items:baseline;gap:1.4cqw;margin-bottom:2.3cqw}
.cap-vis .ui-score b{font-size:6.4cqw;font-weight:400;letter-spacing:.01em;line-height:1}
.cap-vis .ui-score span{font-size:2.6cqw;color:rgba(255,255,255,.48);letter-spacing:.06em}
.cap-vis .ui-bar{height:1px;background:rgba(255,255,255,.16);margin-bottom:2.2cqw}
.cap-vis .ui-bar i{display:block;height:1px;background:rgba(255,255,255,.68)}
.cap-vis .ui-rows{display:grid;gap:0}
.cap-vis .ui-rows>div{display:flex;justify-content:space-between;align-items:baseline;
  font-size:2.5cqw;color:rgba(255,255,255,.55);padding:1.05cqw 0;
  border-bottom:1px solid rgba(255,255,255,.09)}
.cap-vis .ui-rows>div:last-child{border-bottom:0;padding-bottom:0}
.cap-vis .ui-rows b{font-weight:400;color:rgba(255,255,255,.92);font-size:2.8cqw}
.cap-vis .ui-rows em{font-style:normal;color:rgba(255,255,255,.40);font-size:2.2cqw}
.cap-vis .ui-rows b.ok{color:rgba(255,255,255,.92)}
.cap-vis .ui-week{display:flex;gap:.4cqw;align-items:flex-end;height:6cqw;margin-bottom:1.2cqw}
.cap-vis .ui-week i{flex:1;background:rgba(255,255,255,.38);min-height:1px}
.cap-vis .ui-week i.on{background:rgba(255,255,255,.85)}
.cap-vis .ui-axis{display:flex;justify-content:space-between;font-size:2cqw;
  color:rgba(255,255,255,.34);letter-spacing:.08em;margin-bottom:.4cqw}
.cap-vis .ui-note{font-size:2.3cqw;color:rgba(255,255,255,.48);letter-spacing:.02em}
/* bright photographs need almost nothing behind a dark panel */
.cap-vis .bg::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(210deg,transparent 66%,rgba(20,16,13,.16))}
/* placed per photograph — each panel sits where its own image is quiet */
.cap-vis .ui-tl{left:4cqw;right:auto;top:4cqw;bottom:auto}
.cap-vis .ui-tr{right:4cqw;left:auto;top:4cqw;bottom:auto}
.cap-vis .ui-bl{left:4cqw;right:auto;bottom:4cqw;top:auto}
.cap-vis .ui-br{right:4cqw;left:auto;bottom:4cqw;top:auto}
/* a streak is a row of marks, not a chart — full height, not data-driven bars */
.cap-vis .ui-week.streak{height:3.6cqw;gap:.7cqw}
.cap-vis .ui-week.streak i{height:100%;border-radius:.6cqw;background:rgba(255,255,255,.18)}
.cap-vis .ui-week.streak i.on{background:rgba(255,255,255,.82)}
.cap-vis .ui-note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* a note following rows needs air, or it reads as another row */
.cap-vis .ui-rows + .ui-note{margin-top:1.8cqw}
/* the headline figure never wraps — it is one number, always on one line */
.cap-vis .ui-score{flex-wrap:nowrap;white-space:nowrap}
.cap-vis .ui-score b{flex:0 0 auto}
/* Sized in cqw, this panel's type falls to 5.8-7.6px once the card is a phone's width —
   below the point where a mono face resolves at all. Below 900px the panel takes a
   larger share of the card and every size gets a max() floor, so nothing renders under
   11px. The floors are inert at every width where the card is already wide enough
   (768px single-column, and every desktop width), so desktop rendering is untouched. */
@media (max-width:900px){
  .cap-vis .ui{width:min(68cqw,232px);padding:max(10px,2.9cqw) max(11px,3.1cqw) max(11px,3.1cqw);
    border-radius:max(9px,4.2cqw)}
  .cap-vis .ui-h{font-size:max(11px,2.6cqw);letter-spacing:.06em;
    padding-bottom:max(7px,1.9cqw);margin-bottom:max(8px,2.2cqw)}
  .cap-vis .ui-score{gap:max(5px,1.4cqw);margin-bottom:max(8px,2.3cqw)}
  .cap-vis .ui-score b{font-size:max(22px,6.4cqw)}
  .cap-vis .ui-score span{font-size:max(11px,2.6cqw)}
  .cap-vis .ui-bar{margin-bottom:max(8px,2.2cqw)}
  .cap-vis .ui-rows>div{font-size:max(11px,2.5cqw);padding:max(4px,1.05cqw) 0}
  .cap-vis .ui-rows b{font-size:max(11.5px,2.8cqw)}
  .cap-vis .ui-rows em{font-size:max(11px,2.2cqw)}
  .cap-vis .ui-week{height:max(20px,6cqw);gap:max(2px,.4cqw);margin-bottom:max(5px,1.2cqw)}
  .cap-vis .ui-week.streak{height:max(13px,3.6cqw);gap:max(3px,.7cqw)}
  .cap-vis .ui-axis{font-size:max(11px,2cqw);letter-spacing:.05em;margin-bottom:max(2px,.4cqw)}
  .cap-vis .ui-note{font-size:max(11px,2.3cqw)}
  .cap-vis .ui-rows + .ui-note{margin-top:max(7px,1.8cqw)}
  .cap-vis .ui-tl,.cap-vis .ui-bl{left:max(10px,4cqw)}
  .cap-vis .ui-tr,.cap-vis .ui-br,.cap-vis .ui{right:max(10px,4cqw)}
  .cap-vis .ui-tl,.cap-vis .ui-tr{top:max(10px,4cqw)}
  .cap-vis .ui-bl,.cap-vis .ui-br,.cap-vis .ui{bottom:max(10px,4cqw)}
  .cap-vis .ui-tl,.cap-vis .ui-tr{bottom:auto}
  .cap-vis .ui-bl,.cap-vis .ui-br{top:auto}
  .cap-vis .ui-tl,.cap-vis .ui-bl{right:auto}
  .cap-vis .ui-tr,.cap-vis .ui-br{left:auto}
}
/* when a panel carries rows, the progress rule is saying the same thing twice and
   costs a fifth of its height — the figure and the rows are enough */
.cap-vis .ui-bar:has(+ .ui-rows){display:none}

/* Habits and Share carry two cards, not three, which left the rail hanging to the
   left with dead space beside it. `safe center` centres them when they fit and falls
   back to flex-start when the rail overflows, so horizontal scrolling on narrow
   screens never clips the first card. Card proportions stay identical across tabs —
   widening two of them would make the set resize as you switch. */
.rail{justify-content:safe center}

/* ---------- Tools: nav dropdown ----------
   Opened on hover for pointers and on click for everything else, because a hover-only
   menu is unreachable by keyboard and sticks open after a tap on touch. The click state
   is the source of truth; hover only previews it. */
.nav-drop{position:relative}
.nav-drop-btn{display:inline-flex;align-items:center;gap:5px;padding:0;border:0;background:none;
  color:var(--dim);font:400 15.5px var(--font);cursor:pointer}
.nav-drop-btn:hover,.nav-drop[data-open] .nav-drop-btn{color:var(--ink)}
.nav-drop-btn svg{transition:transform .18s ease}
.nav-drop[data-open] .nav-drop-btn svg{transform:rotate(180deg)}
.nav-menu{position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%);
  width:330px;padding:10px;border-radius:16px;z-index:70;
  background:var(--raise);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:var(--shadow-float)}
.nav-menu[hidden]{display:none}
.nav-menu a{display:block;padding:11px 13px;border-radius:11px;text-decoration:none;color:var(--ink)}
.nav-menu a:hover{background:var(--surface)}
.nav-menu b{display:block;font-size:15px;font-weight:500}
.nav-menu span{display:block;margin-top:2px;font-size:13.5px;line-height:1.45;color:var(--faint)}
.nav-menu-all{margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 11px 11px;
  font-size:14.5px;color:var(--blue)!important}

/* ---------- Tools: calculator pages ---------- */
.shell.narrow{width:min(760px,92vw)}
.tool-in{display:grid;grid-template-columns:1fr .82fr;gap:52px;align-items:start}
.tool-form h1{font-size:clamp(34px,3.9vw,50px);font-weight:500;letter-spacing:-1.5px;
  margin:0 0 16px;max-width:17ch}
.tool-form .lede{font-size:18px;color:var(--dim);margin:0 0 30px;line-height:1.62;max-width:52ch}
/* .calc is already taken by the trainer retention panel — this is the tool form */
.calcform{display:grid;gap:20px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f label{display:block;margin-bottom:8px;font-size:14px;font-weight:500;color:var(--dim)}
.f input,.f select{width:100%;background:var(--raise);border:1px solid var(--line);
  border-radius:var(--r-input);padding:12px 14px;color:var(--ink);
  font:400 16px var(--font)}
.f input::placeholder{color:var(--faint)}
.f input:focus,.f select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-light)}
.f select{appearance:none;cursor:pointer;padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23818a97' stroke-width='2.2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:15px}
.f select option{background:var(--raise);color:var(--ink)}
/* segmented control — two mutually exclusive values are a switch, not a dropdown */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-input)}
.seg button{padding:10px 8px;border:0;border-radius:6px;background:none;color:var(--dim);
  font:500 15px var(--font);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--raise);color:var(--ink);
  box-shadow:var(--shadow-card)}
.calcform-note{margin:22px 0 0;font-size:13.5px;line-height:1.65;color:var(--faint);max-width:52ch}

/* the panel is the point of the page, so it stays in view while the inputs are filled in */
.tool-out{position:sticky;top:96px;background:var(--raise);border:1px solid var(--line);
  border-radius:20px;overflow:hidden;box-shadow:var(--shadow-card)}
.tool-out h2{margin:0;padding:20px 26px;font-size:15px;font-weight:600;letter-spacing:.2px;
  color:var(--dim);border-bottom:1px solid var(--line)}
.out{padding:30px 26px}
.out+.out{border-top:1px solid var(--line)}
.out-big{font-size:clamp(46px,5.4vw,64px);font-weight:500;letter-spacing:-2.4px;line-height:1;
  color:var(--fuel);font-variant-numeric:tabular-nums}
.out-unit{margin-top:8px;font-size:15.5px;color:var(--dim)}
.out-sub{font-size:30px;font-weight:500;letter-spacing:-1px;color:var(--ink);
  font-variant-numeric:tabular-nums}
.out-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:15px 0;border-bottom:1px solid var(--line)}
.out-row:last-child{border-bottom:0;padding-bottom:0}
.out-row:first-child{padding-top:0}
.out-row span{font-size:15px;color:var(--dim)}
.out-row b{font-size:19px;font-weight:500;font-variant-numeric:tabular-nums}
.out-row[data-hit] span{color:var(--ink)}
.out-row[data-hit] b{color:var(--fuel)}
.out-verdict{margin-top:14px;font-size:15.5px;line-height:1.55;color:var(--dim)}
.out-verdict b{color:var(--ink);font-weight:500}
/* the reading rail — where the current value sits inside the reference range */
.gauge{height:8px;border-radius:4px;margin:22px 0 10px;display:flex;gap:2px;overflow:hidden}
.gauge i{flex:1;background:var(--line)}
.gauge i[data-hit]{background:var(--fuel)}
.gauge-scale{display:flex;justify-content:space-between;font-size:12px;color:var(--faint);
  font-variant-numeric:tabular-nums}

.tool-body h2{font-size:clamp(26px,2.8vw,34px);font-weight:500;letter-spacing:-1.1px;margin:0 0 8px}
.tool-body h3{font-size:20px;font-weight:500;letter-spacing:-.5px;margin:34px 0 10px}
.tool-body p{font-size:17px;line-height:1.7;color:var(--dim);margin:0 0 14px}
.tool-body ul{margin:0 0 14px;padding-left:20px;color:var(--dim);font-size:17px;line-height:1.7}
.tool-body li{margin-bottom:6px}

.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;margin-top:34px}
.tool-grid a{display:block;padding:26px;background:var(--ground);text-decoration:none}
.tool-grid a:hover{background:var(--raise)}
.tool-grid b{display:block;font-size:19px;font-weight:500;letter-spacing:-.4px;margin-bottom:7px}
.tool-grid span{font-size:15px;line-height:1.55;color:var(--dim)}

@media(max-width:900px){
  .tool-in{grid-template-columns:1fr;gap:34px}
  .tool-out{position:static;order:-1}
  .nav-menu{left:auto;right:0;transform:none;width:min(320px,88vw)}
}

/* ---------- full-bleed goal hero ----------
   The framed 4:3 stage boxes the photograph inside the shell; this variant lets it run
   edge to edge with the copy sitting on it, the way the home hero does. Inverted though:
   the home photo is bright so its copy is dark on a light wash, and these lifestyle frames
   are warm and dim, so the copy is light on a dark scrim. */
/* copy sits in the upper third rather than centred: the subject's face is at mid-height
   on the right, so centring put the two focal points on the same line and they competed */
/* fills the fold: the sticky nav is 74px and sits in flow directly above, so the hero
   takes the rest of the viewport. svh rather than vh so it does not jump on mobile when
   the browser chrome retracts. */
.p-hero-full{min-height:calc(100vh - 74px);min-height:calc(100svh - 74px);
  display:flex;align-items:flex-start;
  padding:clamp(96px,17vh,168px) 0 78px;overflow:hidden;isolation:isolate;background:#1A120C}
.p-hero-full::before{display:none}              /* the p-hero glow has nothing to do here */
.p-hero-full .shell{position:relative;z-index:2}
.p-hero-full .stage{position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:0;
  aspect-ratio:auto;border:0;border-radius:0;background:#1A120C}
/* the scrim runs across rather than up, because the copy is beside the subject, not under
   it. It has to reach roughly 0.9 at the left edge for white type to hold on a lit wall. */
.p-hero-full .stage::after,.p-hero-full .stage:not(:has(.seq))::after{content:"";display:block;position:absolute;inset:0;height:auto;
  z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,7,5,.90),rgba(10,7,5,.76) 32%,rgba(10,7,5,.34) 58%,rgba(10,7,5,.08) 80%,transparent)}
.p-hero-full .frame img{object-position:62% 100%}
.p-hero-sq .frame img{object-position:50% 17%}
/* the airflow clip is dark at the edges already, so the scrim only has to protect the
   copy column; the motion sits right of centre, in the space the copy leaves */
.p-hero-vapour .stage{background:#000}
/* the device sits dead centre in the clip; it is scaled up and slid right so it lands in
   the right half and the copy has the left. The strip this uncovers is pure black, and the
   scrim is solid across it, so the clip's edge never shows as a seam. */
.p-hero-full.p-hero-vapour .frame img,.p-hero-full.p-hero-vapour .frame video{object-position:50% 50%;
  transform:translateX(27%) scale(1.18);transform-origin:50% 50%}
.p-hero-full.p-hero-vapour .stage::after{
  background:linear-gradient(90deg,#000 0,#000 20%,rgba(0,0,0,.86) 28%,rgba(0,0,0,.5) 44%,rgba(0,0,0,.1) 62%,transparent 80%)}
@media(max-width:820px){
  /* the device rides high, the copy sits low on a near-solid scrim */
  .p-hero-full.p-hero-vapour .frame img,.p-hero-full.p-hero-vapour .frame video{object-position:50% 30%;transform:translateY(-16%) scale(1.05)}
  .p-hero-full.p-hero-vapour .stage::after,.p-hero-full.p-hero-vapour .stage:not(:has(.seq))::after{
    background:linear-gradient(to top,#000 0,rgba(0,0,0,.94) 40%,rgba(0,0,0,.72) 60%,rgba(0,0,0,.45) 100%)}
}
.hero-over{max-width:min(560px,54%)}
.p-hero-full .eyebrow{color:rgba(255,255,255,.62)}
.p-hero-full h1{color:#fff}
.p-hero-full .lede{color:rgba(255,255,255,.84)}
.p-hero-full .trust{color:rgba(255,255,255,.72);margin-top:22px}
/* .hipaa sets its own colour for the dark-on-light home hero; over a photograph it
   has to follow its siblings or it reads as disabled */
.p-hero-full .trust .hipaa{color:inherit}
.p-hero-full .btn-quiet{border-color:rgba(255,255,255,.34);color:#fff}
.p-hero-full .btn-quiet:hover{border-color:rgba(255,255,255,.62)}
@media(max-width:820px){
  /* the subject can no longer sit beside the copy, so the scrim turns and comes up */
  .p-hero-full{min-height:calc(100svh - 74px);padding:56px 0 48px;align-items:flex-end}
  .p-hero-full .stage::after,.p-hero-full .stage:not(:has(.seq))::after{
    background:linear-gradient(to top,rgba(10,7,5,.96),rgba(10,7,5,.86) 55%,rgba(10,7,5,.62) 80%,rgba(10,7,5,.4))}
  .p-hero-full .frame img{object-position:70% 100%}
  .hero-over{max-width:none}
}

/* ---------- weight-loss timeline ----------
   Three phases, not a numbered process: the reader is not following steps, they are
   being told what the data can support at each stage. The rule runs across the top of
   all three so it reads as elapsed time rather than as three separate cards. */
.tl{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin:34px 0 0;padding:0;border-top:1px solid var(--line)}
.tl li{padding:24px 30px 4px 0;position:relative}
.tl li::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;
  border-radius:50%;background:var(--edge)}
.tl li:first-child::before{background:var(--cream)}
.tl b{display:block;font-size:13px;font-weight:600;letter-spacing:.9px;
  color:var(--faint);margin-bottom:14px}
.tl h3{margin:0 0 10px;font-size:20px;font-weight:500;letter-spacing:-.5px;line-height:1.25}
.tl p{margin:0;font-size:16px;line-height:1.65;color:var(--dim)}
@media(max-width:860px){
  .tl{grid-template-columns:1fr;border-top:0}
  .tl li{padding:22px 0 22px 22px;border-top:1px solid var(--line)}
  .tl li::before{top:18px}
}

/* Benefits bento, built to the reference's structure rather than its palette.
   Four columns, two rows, wide cards at opposite corners. What makes the reference work
   is not the grid: the subjects are cut out and float on a soft ground, run past the
   card's bottom edge, and are annotated by small floating chips rather than captioned.
   Photographs sitting in rectangular wells read as a CMS; this reads as art direction.
   Inverted for a dark brand — their light cards on white become raised panels on the
   warm near-black. */
.bens{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:38px}
.ben{position:relative;overflow:hidden;border-radius:20px;background:var(--raise);
  border:1px solid var(--line);min-height:318px;padding:28px 30px;box-shadow:var(--shadow-card)}
.ben-ui{min-height:372px}
.ben-w2{grid-column:span 2}
.ben-tall{min-height:340px}
/* setup in the quiet tone, claim in the loud one. Doing hierarchy, not decoration: the
   span is the premise, the rest is what the product adds. */
.ben h3{position:relative;z-index:3;margin:0;max-width:16ch;
  font-size:19.5px;font-weight:500;letter-spacing:-.4px;line-height:1.3;color:var(--ink)}
.ben h3 span{color:var(--faint)}
/* the ground: one soft source per card, hue taken from the analyte it speaks to */
/* Grounds carry the same hue as the subject's garment, so photograph and card read as
   one object rather than a picture pasted on a panel. Salmon for the muscle card, brand
   blue for the reading, amber for the fat-oxidation texture. Previously all of these sat
   near .30 on a near-black panel, which is well under the threshold where a wash is
   legible at all — hence the muted look. */
.ben-cut::before,.ben-ui::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(135% 120% at 70% 114%, rgba(228,131,38,.30), rgba(228,131,38,.10) 46%, transparent 76%)}
.ben-salmon .cut{right:7%}
.ben-salmon::before{background:radial-gradient(135% 120% at 70% 114%, rgba(228,103,79,.30), rgba(228,103,79,.10) 46%, transparent 76%)}
.ben-blue::before{background:radial-gradient(135% 120% at 70% 114%, rgba(48,139,249,.28), rgba(48,139,249,.09) 46%, transparent 76%)}
.ben-ui::before{background:radial-gradient(135% 120% at 70% 114%, rgba(48,139,249,.24), rgba(48,139,249,.08) 46%, transparent 76%)}
.ben-centre::before{background:radial-gradient(125% 115% at 50% 116%, rgba(63,175,88,.26), rgba(63,175,88,.08) 48%, transparent 76%)}
/* the cutout runs past the bottom edge; the card clips it */
.ben .cut{position:absolute;z-index:2;bottom:-12%;right:-2%;height:110%;width:auto;max-width:none;
  filter:drop-shadow(0 22px 40px rgba(0,0,0,.5))}
.ben-centre .cut{right:50%;transform:translateX(50%);bottom:-26%;height:88%}
.ben-tall .cut{height:104%;right:4%;bottom:-6%}
/* app captures tuck into the lower right as a screen, no device frame */
.ben .shot{position:absolute;z-index:2;right:-4%;bottom:-14%;width:82%;height:auto;border-radius:14px;
  box-shadow:0 20px 46px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.10)}
/* one card is texture edge to edge with the line laid over it */
/* the one card whose claim is a comparison of timing — a drawing states that in a way a
   product screenshot cannot, so this card carries a diagram rather than a capture */
.ben .ui-chart{display:block;width:100%;height:auto;margin:2px 0 11px}
.ben .ui-note{font-size:11.5px;color:var(--text-muted);letter-spacing:.02em}
/* the targets card reuses the home page's frosted panel verbatim, so the same idea is
   drawn the same way on both pages instead of once as a panel and once as a screenshot */
.ben .ui{position:absolute;z-index:2;left:28px;right:28px;bottom:22px;height:206px;
  container-type:normal;width:auto;
  background:rgba(10,8,7,.52);-webkit-backdrop-filter:blur(16px) saturate(1.25);
  backdrop-filter:blur(16px) saturate(1.25);
  border:1px solid rgba(255,255,255,.13);
  border-top-color:rgba(255,255,255,.24);border-left-color:rgba(255,255,255,.18);
  border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
  padding:15px 17px 16px;color:#fff;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
.ben .ui-h{font-size:11px;color:rgba(255,255,255,.62);letter-spacing:.06em;margin-bottom:9px}
.ben .ui-score{display:flex;align-items:baseline;gap:6px;margin-bottom:11px}
.ben .ui-score b{font-size:27px;font-weight:400;line-height:1}
.ben .ui-score span{font-size:11px;color:rgba(255,255,255,.52);letter-spacing:.05em}
.ben .ui-rows>div{display:flex;justify-content:space-between;align-items:baseline;
  padding:7px 0;border-bottom:1px solid rgba(255,255,255,.09);font-size:12px}
.ben .ui-rows>div:last-child{border-bottom:0;padding-bottom:0}
.ben .ui-rows span{color:rgba(255,255,255,.62)}
.ben .ui-rows b{font-weight:400;font-size:13.5px}
.ben .ui-rows em{font-style:normal;color:rgba(255,255,255,.5);font-size:11px}
/* A light replica of the product's own progress card, drawn in markup rather than
   screenshotted, so the copy can state this card's actual claim while the surface stays
   the app's — same white ground, blue series, dashed range band and green corner. */
.appcard{position:absolute;z-index:2;left:28px;right:28px;bottom:22px;height:206px;
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border-radius:14px;padding:16px 16px 14px;
  box-shadow:0 18px 40px rgba(0,0,0,.42);
  font-family:var(--font)}
.ac-blob{position:absolute;top:-46px;right:-34px;width:104px;height:104px;border-radius:50%;
  background:radial-gradient(circle at 35% 65%,#5BD08C,#25A45F);opacity:.9}
.ac-eyebrow{position:relative;font-size:9px;letter-spacing:.09em;text-transform:uppercase;
  color:#98A0A9;margin-bottom:7px}
.ac-head{position:relative;font-size:14px;line-height:1.32;color:#15181C;font-weight:400;
  max-width:88%;margin-bottom:16px}
.ac-head b{font-weight:600}
.ac-chart{display:block;width:100%;height:auto;margin-top:auto}
@media(max-width:640px){.appcard{position:relative;left:0;right:0;bottom:0;margin-top:18px}}
.ben-bleed{padding:26px 28px;background:linear-gradient(150deg,#5A3418,#2A1810 70%)}
.ben-bleed .bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(1.9) saturate(1.25);mix-blend-mode:screen}
.ben-bleed::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,7,5,.55),transparent 46%)}
.ben-bleed h3{color:#fff;max-width:13ch}
/* annotations float over the photograph rather than sitting beneath it */
.chip{position:absolute;z-index:4;display:flex;align-items:baseline;gap:8px;
  padding:9px 14px;border-radius:12px;
  background:rgba(18,14,11,.62);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  backdrop-filter:blur(16px) saturate(1.3);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 26px rgba(0,0,0,.42);
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
.chip b{font-size:15px;font-weight:500;color:#fff}
.chip span{font-size:11.5px;color:rgba(255,255,255,.60);letter-spacing:.03em}
/* card one carried a narrow full-length figure and a lot of nothing beside it. The
   reference fills that space with floating annotation rather than a bigger photograph,
   which also gives the claim its evidence. */
.chip-3{left:30px;bottom:104px}
.chip-4{left:78px;bottom:38px}
.chip-1{left:31%;bottom:104px}
.chip-2{left:43%;bottom:42px}
@media(max-width:1080px){
  .bens{grid-template-columns:repeat(2,1fr)}
  .ben-w2{grid-column:span 2}
  .chip-1{left:auto;right:46%;bottom:96px}
  .chip-2{left:auto;right:32%;bottom:36px}
}
@media(max-width:640px){
  /* Six full-width cards stacked was a long scroll of near-identical panels, and the
     bento's whole point — a set you take in at once — was gone. It becomes a snap
     carousel instead: one card per view, the next one peeking, native horizontal
     scrolling only. Vertical page scroll is never intercepted. */
  .bens{display:flex;flex-wrap:nowrap;align-items:stretch;gap:12px;margin-top:30px;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    /* run past the page gutter so the first and last card still line up with the
       text column above, and the row reads as continuing off the screen */
    margin-inline:calc((100vw - var(--shell)) / -2);
    padding-inline:calc((100vw - var(--shell)) / 2);
    /* room for the position rail */
    padding-bottom:19px;
    /* Position indicator, in CSS only. The native scrollbar is an overlay on every
       touch platform — invisible at rest, which is exactly when the reader needs to be
       told there is more to the right — so it is hidden and the rail is drawn instead:
       two background layers on the scroller itself, a hairline track and a blue thumb,
       both background-attachment:scroll so they stay put while the cards move. The
       thumb's background-position-x is then driven by the scroller's own scroll
       timeline, so it tracks a flick exactly and needs no script. Where scroll-driven
       animation is unsupported the thumb simply rests at the left of the track and
       still reads as "you are at the start of a row". */
    scrollbar-width:none;
    background-image:linear-gradient(var(--blue),var(--blue)),
                     linear-gradient(rgba(var(--ink-rgb),.12),rgba(var(--ink-rgb),.12));
    background-repeat:no-repeat,no-repeat;
    background-attachment:scroll,scroll;
    background-size:26% 3px,100% 3px;
    background-position-y:bottom,bottom;
    background-position-x:left,left;
    animation-name:bens-rail;animation-duration:auto;animation-timing-function:linear;
    animation-fill-mode:both;animation-timeline:scroll(self inline)}
  @keyframes bens-rail{to{background-position-x:right,left}}
  .bens::-webkit-scrollbar{height:0;width:0;display:none}
  .ben,.ben-w2{flex:0 0 86vw;width:86vw;max-width:86vw;
    scroll-snap-align:center;scroll-snap-stop:always;min-height:360px}
  .ben-ui{min-height:372px}
  .ben-tall{min-height:360px}
  .chip{display:none}
  .ben .shot{width:72%;right:-4%;bottom:-10%}
  /* Cutouts: the old blanket .ben .cut{height:64%;right:-8px} shrank every subject to a
     sliver and, because it also overrode .ben-centre's right:50% while its
     translateX(50%) survived, pushed the meal bowl off the right edge. Each subject is
     placed on its own now. top = 100% - bottom - height stays at or above -6% in every
     case, so no head is cut off. */
  /* the squat: narrow figure (347x677), so it is sized off height and pushed right,
     leaving the left half clear for the heading. top = 100 + 8 - 106 = 2% */
  .ben-salmon .cut{height:106%;bottom:-8%;right:-14%}
  /* the bowl is square: nearly the full card width, seated low and centred, with the
     heading over the empty upper band. top = 100 + 20 - 76 = 44% */
  .ben-centre .cut{height:76%;bottom:-20%;right:50%;transform:translateX(50%)}
  /* the reading (642x820) fills its card corner to corner. top = 100 + 6 - 104 = 2% */
  .ben-tall .cut{height:104%;bottom:-6%;right:-10%}
}

/* mid-page conversion block: sits at the end of the benefits run, where the argument
   has just been made and the reader would otherwise have to travel to the footer */
.midcta{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
  background:var(--raise);border:1px solid var(--line);border-radius:var(--r);padding:30px 34px;box-shadow:var(--shadow-card)}
.midcta>div{flex:1 1 380px;min-width:0}
.midcta .btn{flex:0 0 auto}
.midcta h3{margin:0 0 7px;font-size:23px;font-weight:500;letter-spacing:-.6px}
.midcta p{margin:0;font-size:16px;color:var(--dim);max-width:52ch}
@media(max-width:640px){.midcta{padding:26px 24px}}

/* Mechanism, three steps. No boxes and no numbers: an icon, the step named in the brand
   blue, then the body in near-white. The body is the content here, so it is not greyed
   back the way supporting copy is elsewhere. */
.mech{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:40px}
.mech-i svg{width:34px;height:34px;display:block;color:var(--blue);margin-bottom:18px}
.mech-i b{display:block;font-size:16px;font-weight:500;letter-spacing:-.1px;color:var(--blue);
  margin-bottom:10px}
.mech-i p{margin:0;font-size:17px;line-height:1.55;color:var(--ink);max-width:34ch}
@media(max-width:880px){.mech{grid-template-columns:1fr;gap:34px}}

/* A single app screen beside its copy. The PNG carries its own device frame, so the
   only job here is to stop it growing to column width on a desktop and to centre it
   once the showcase stacks on a phone. */
.phone{display:flex;justify-content:center}
.phone img{width:100%;max-width:min(300px,72vw);height:auto;display:block}
/* alternate sides on a wide screen, the same way .showcase.rev flips a .slot */
.showcase.rev>.phone{order:2}
@media (max-width:860px){
  .phone img{max-width:min(250px,66vw)}
  .showcase.rev>.phone{order:0}   /* stacked: screen first, copy under it */
}