/* EDEN for Hannah · the story.
   Her garage gym at 6 am and the trail at noon, shot like a race: black ground, white light, her lime on the clock.
   Her reels are the only colour. Sofia XC for display capitals and numerals, Figtree for text, cards and UI, Ms Madi
   for the one script word of each chapter badge.
   html.st-on   = the experience (story.js running).
   html.st-flat = ?rm=1, the flat mode: the readable document with end states and the one live phone.
   Without either, the page is a readable static document (no JS, or a script failed to load). */

@font-face {
  font-family: "Sofia XC";
  font-style: normal;
  font-display: swap;
  font-weight: 1 1000;
  src: url("media/fonts/sofia-xc-latin-ext.woff2") format("woff2-variations"), url("media/fonts/sofia-xc-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Sofia XC";
  font-style: normal;
  font-display: swap;
  font-weight: 1 1000;
  src: url("media/fonts/sofia-xc-latin.woff2") format("woff2-variations"), url("media/fonts/sofia-xc-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("media/fonts/figtree-latin-ext.woff2") format("woff2-variations"), url("media/fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("media/fonts/figtree-latin.woff2") format("woff2-variations"), url("media/fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: italic;
  font-display: swap;
  font-weight: 300 900;
  src: url("media/fonts/figtree-italic-latin-ext.woff2") format("woff2-variations"), url("media/fonts/figtree-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  font-style: italic;
  font-display: swap;
  font-weight: 300 900;
  src: url("media/fonts/figtree-italic-latin.woff2") format("woff2-variations"), url("media/fonts/figtree-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Ms Madi";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("media/fonts/ms-madi-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Ms Madi";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("media/fonts/ms-madi-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* size-adjusted local fallbacks, visible during the swap only */
@font-face { font-family: "Sofia XC Fallback"; src: local("Arial Narrow"), local("Roboto Condensed"), local("Liberation Sans Narrow"), local("Arial"); size-adjust: 82%; ascent-override: 96%; descent-override: 24%; }
@font-face { font-family: "Figtree Fallback"; src: local("Arial"), local("Helvetica"), local("Roboto"), local("Liberation Sans"); size-adjust: 102%; ascent-override: 93%; descent-override: 24%; }

:root {
  --night: #0A0A09;
  --coal: #141413;
  --ash: #1F1F1D;
  --smoke: #34342F;
  --chalk: #F4F4F0;
  --muted: #A6A69E;
  --faint: #5E5E58;
  --hair: rgba(244, 244, 240, .12);
  --card: #FFFFFF;
  --card-ink: #111111;
  --card-meta: #555555;
  --lime: #B0C43A;
  --lime-deep: #8EA02A;
  --shadow: 0 30px 60px -25px rgba(0, 0, 0, .85);

  --f-disp: "Sofia XC", "Sofia XC Fallback", "Arial Narrow", Arial, sans-serif;
  --f-text: "Figtree", "Figtree Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-script: "Ms Madi", cursive;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io3: cubic-bezier(.65, 0, .35, 1);
  --ease-ios: cubic-bezier(.32, .72, 0, 1);
  --ease-drop: cubic-bezier(.2, 1.3, .4, 1);
  --gut: 16px;
  --ck: 40px;
  --S: 100vh;
  --LH: 100vh;
  color-scheme: dark;
}
@supports (height: 100svh) { :root { --S: 100svh; --LH: 100lvh; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); color: var(--chalk); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0; background: var(--night); color: var(--chalk);
  font: 500 17px/1.4 var(--f-text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
p, h1, h2, h3, ol, ul, li, figure { margin: 0; padding: 0; }
h1, h2, h3 { font-weight: inherit; font-size: inherit; }
ol, ul { list-style: none; }
img, video, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
b { font-weight: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.probe { position: fixed; top: 0; left: 0; width: 0; visibility: hidden; pointer-events: none; }
#vh-s { height: 100vh; height: 100svh; }
#vh-l { height: 100vh; height: 100lvh; }
.skip {
  position: fixed; left: 12px; top: 12px; z-index: 1000; padding: 10px 14px; border-radius: 12px; border: 0;
  background: var(--chalk); color: var(--night); font: 700 15px/1.2 var(--f-text); text-decoration: none; cursor: pointer;
  transform: translateY(calc(-100% - 90px));
}
.skip:focus-visible { transform: none; }
.skip--try { top: 60px; }
.skip--try[hidden] { display: none; }
.sr-story { display: none; }
html.st-on .sr-story { display: block; }
#end { height: 1px; }
.lime { color: var(--lime); }
.nw { white-space: nowrap; }

/* ---------------------------------------------------------------------------------------------- type */
.src { font: 700 11px/1.35 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.h2 { font: 900 44px/.9 var(--f-disp); letter-spacing: -.01em; text-transform: uppercase; color: var(--chalk); }
.c3__h { font-size: 40px; }
.sub { font: 500 17px/1.3 var(--f-text); color: var(--muted); }
.cap { font: 500 17px/1.3 var(--f-text); color: var(--chalk); }
.small { font: 400 15px/1.4 var(--f-text); color: var(--muted); }
.close { font: 900 36px/.9 var(--f-disp); letter-spacing: -.01em; text-transform: uppercase; color: var(--chalk); }
.key, .quote { font: 900 clamp(44px, 12.5vw, 54px)/.88 var(--f-disp); letter-spacing: -.01em; text-transform: uppercase; color: var(--chalk); }
html.st-desk .src { font-size: 13px; }
html.st-desk .h2 { font-size: 84px; }
html.st-desk .sub, html.st-desk .cap { font-size: 21px; }
html.st-desk .close { font-size: 64px; }
html.st-desk .key, html.st-desk .quote { font-size: 108px; }

/* a word rises out of its mask */
html.st-on .w { display: inline-block; vertical-align: top; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
html.st-on .w > span { display: inline-block; }

/* the chapter badge, as her highlight covers: a black circle, a capitals word and one script word */
.bdg { display: flex; align-items: center; gap: 10px; }
.bdg__c {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; background: #050505; box-shadow: inset 0 0 0 1.5px var(--smoke);
}
.bdg__w { font: 900 12px/1 var(--f-disp); letter-spacing: .03em; text-transform: uppercase; color: var(--chalk); white-space: nowrap; }
.bdg__s { font: 400 var(--bs, 22px)/.78 var(--f-script); color: var(--chalk); white-space: nowrap; margin-top: 1px; }
.bdg__n { font: 700 11px/1 var(--f-text); letter-spacing: .08em; color: var(--muted); }
.bdg--3 { --bs: 19px; }
/* phones: where the badge shares its row with the title (chapters 5 and 6), its number sits above the title */
html.st-on:not(.st-desk) .bdg--5 .bdg__n, html.st-on:not(.st-desk) .bdg--6 .bdg__n { position: absolute; left: 66px; top: 3px; } .bdg--5 { --bs: 18.5px; } .bdg--7 { --bs: 21px; } .bdg--8 { --bs: 15.5px; } .bdg--2 { --bs: 21px; }
html.st-desk .bdg { gap: 14px; }
html.st-desk .bdg__c { width: 84px; height: 84px; box-shadow: inset 0 0 0 1.5px var(--smoke); }
html.st-desk .bdg__w { font-size: 16px; }
html.st-desk .bdg__s { font-size: calc(var(--bs, 22px) * 30 / 22); }
html.st-desk .bdg__n { font-size: 13px; }

/* ---------------------------------------------------------------------------------------------- light and grain */
/* the garage light, top right: a soft radial lift on black */
.light { display: none; }
html.st-on .light {
  display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 86% -6%, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 70%);
}
/* static, never animated. A light speck layer at .05 in normal blending reads as the screen blend on this black ground
   (screen over near black adds light; so does a light speck at low alpha), without a full-screen blend pass per frame */
.grain {
  position: fixed; inset: 0; z-index: 55; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n' x='0' y='0'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 .96  0 0 0 0 .96  0 0 0 0 .94  0 0 0 1.4 -.4'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}
html.st-on .grain { position: absolute; }

/* ============================================================================================== experience */
html.js:not(.st-on):not(.st-fail):not(.st-flat) #story,
html.js:not(.st-on):not(.st-fail):not(.st-flat) #dock { visibility: hidden; }

html.st-boot *, html.st-boot *::before, html.st-boot *::after { transition: none !important; }
html.st-on #run { position: relative; height: calc(var(--runL, 4718vh) + var(--LH)); }
html.st-on #end { position: absolute; left: 0; bottom: 0; width: 1px; }
html.st-on #stage {
  position: -webkit-sticky; position: sticky; top: 0;
  height: 100vh; height: var(--LH);
  overflow: hidden; overflow: clip;
  background: var(--night);
}
/* a chapter is a scene of the stage: no stacking context of its own, its parts carry their z-index */
html.st-on .sc { position: absolute; left: 0; top: 0; width: 100%; height: var(--LH); visibility: hidden; pointer-events: none; }
html.st-on .hero { display: none; }
html.st-on .sc .bdg, html.st-on .c1, html.st-on .c5i, html.st-on .c6 { position: absolute; left: 0; top: 0; z-index: 24; }
html.st-on .sc > *, html.st-on .c1 > *, html.st-on .c5i > *, html.st-on .c6 > * { will-change: auto; }
html.st-on .sc .bdg { opacity: 0; }
html.st-on .sc .bdg--4 { z-index: 33; }

/* ---------------------------------------------------------------------------------------------- the reel (her treadmill reel, 9:16) */
.reel, .scrim { display: none; }
html.st-on .reel {
  display: block; position: absolute; left: 0; top: 0; z-index: 2; width: var(--rw, 390px); height: var(--rh, 693px);
  transform-origin: 0 0; pointer-events: none; visibility: hidden;
}
html.st-on .reel.is-anim, html.st-on .reel.is-anim .reel__mask, html.st-on .reel.is-anim .reel__in { will-change: transform, opacity; }
html.st-on .reel__frame {
  position: absolute; inset: -8px; border-radius: 36px; background: var(--coal);
  box-shadow: var(--shadow), inset 0 0 0 1px var(--hair); opacity: 0;
}
html.st-on .reel__mask { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; transform-origin: 0 0; background: #000; }
html.st-on .reel__in { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; }
.reel__img, .reel__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.reel__img { color: transparent; font-size: 0; }
.reel__v { z-index: 1; opacity: 0; transition: opacity .3s linear; }
.reel__v.on { opacity: 1; }
/* once her video shows frames, its poster leaves the paint (after the fade): moving the reel never repaints a 9:16 image */
html.st-on .reel__in:has(> .reel__v.on) > .reel__img { visibility: hidden; transition: visibility 0s linear .35s; }
/* ch1 q .10 to .45: the reel's upper 58% veiled to 40% black (her card band stays clear) */
.reel__veil { position: absolute; left: 0; right: 0; top: 0; height: 60%; z-index: 2; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .4) 0, rgba(0, 0, 0, .4) 86%, rgba(0, 0, 0, 0) 100%); }
/* J12: one soft band across the reel under her burned-in card (y 58% to 82%, 6% feathers): as our replica lifts off,
   it reads as the card's shadow */
.reel__card { position: absolute; left: 0; top: 58%; width: 100%; height: 24%; z-index: 2; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 25%, #000 75%, rgba(0, 0, 0, 0) 100%); }
/* desktop: a black lift on the card's top left, under the H1 that crosses it */
.reel__lift { position: absolute; left: 0; top: 0; width: 72%; height: 70%; z-index: 2; opacity: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 0% 38%, rgba(10, 10, 9, .82) 0, rgba(10, 10, 9, .55) 45%, rgba(10, 10, 9, 0) 78%); }
html.st-on .wc { will-change: opacity; }
/* J12 and R2: the reel fades to black under the card */
.reel__dark { position: absolute; inset: 0; z-index: 3; background: #000; opacity: 0; pointer-events: none; }
/* phones: the full-bleed reels get a black top scrim (0 to 34% of S) so titles read; her card band is never veiled */
html.st-on .scrim { display: block; position: absolute; left: 0; width: 100%; z-index: 3; pointer-events: none; opacity: 0; }
/* phones, chapter 1: a soft lift from the left under the H1, the opening line and the rows (her card band stays clear) */
html.st-on .scrim--left { top: 0; height: calc(var(--S) * .6); background: radial-gradient(95% 75% at 0% 44%, rgba(10, 10, 9, .74) 0, rgba(10, 10, 9, .5) 42%, rgba(10, 10, 9, 0) 78%); }
html.st-on .scrim--top { top: 0; height: calc(var(--S) * .34); background: linear-gradient(180deg, rgba(10, 10, 9, .85) 0, rgba(10, 10, 9, .6) 45%, rgba(10, 10, 9, 0) 100%); }
html.st-on .scrim--bot { top: calc(var(--S) * .79); height: calc(var(--LH) - var(--S) * .79); background: linear-gradient(180deg, rgba(10, 10, 9, 0) 0, rgba(10, 10, 9, .62) 40%, rgba(10, 10, 9, .8) 100%); }

/* ---------------------------------------------------------------------------------------------- the replica of her card (T1, T4) */
/* her white workout card as burned into her reel: one white rounded box per line, Figtree 700, her ink, centred */
.rep { display: none; }
html.st-on .rep { display: block; position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 70; pointer-events: none; visibility: hidden; }
.rb { position: absolute; left: 0; top: 0; width: 0; height: 0; white-space: nowrap; }
.rb--2 { z-index: 2; }
.rb__bg { position: absolute; left: 0; top: 0; width: 100px; height: 40px; transform-origin: 0 0; background: var(--card); border-radius: 10px; overflow: hidden; }
.rb__k { position: absolute; inset: 0; opacity: 0; background: var(--ash); }
.rb--1 .rb__k { background: var(--lime); }
.rb__t {
  position: absolute; left: 0; top: 0; transform-origin: 0 0;
  font: 700 100px/1 var(--f-text); letter-spacing: 0; color: var(--card-ink);
}
/* the app's own row (white card style, smaller): its title left, its meta right */
.rb__r {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  transform-origin: 0 0; opacity: 0; padding: 0 12px; font: 700 17px/1 var(--f-text); color: var(--card-ink);
}
.rb__r span { font-weight: 600; font-size: 15px; color: var(--card-meta); }
.rb__mk { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
/* chapter 9: the closing line types itself, character by character */
html.st-on .hc--easy .ch { visibility: hidden; }
html.st-on .hc--easy .ch.on { visibility: inherit; }
.rep__sh { position: absolute; left: 0; top: 0; width: 100px; height: 100px; transform-origin: 0 0; opacity: 0;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .82), rgba(0, 0, 0, .5) 58%, rgba(0, 0, 0, 0)); }
html.st-on .rep.st-in .rb__bg, html.st-on .rep.st-in .rb__t, html.st-on .rep.st-in .rb__r, html.st-on .rep.st-in .rep__sh { will-change: transform, opacity; }

/* ---------------------------------------------------------------------------------------------- 1 · Warm up */
.c1__h { display: block; font: 900 92px/.88 var(--f-disp); letter-spacing: -.01em; text-transform: uppercase; color: var(--chalk); }
.c1__m { display: block; }
.c1__l { display: block; }
.c1__do { font: 800 30px/1 var(--f-disp); letter-spacing: -.005em; text-transform: uppercase; color: var(--chalk); }
.c1__dsrc { margin-top: 8px; }
html.st-on .c1 { width: 0; height: 0; overflow: visible; }
html.st-on .c1 > * { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
html.st-on .c1__h { white-space: nowrap; }
html.st-on .c1__m { overflow: hidden; padding-bottom: .04em; margin-bottom: -.04em; }
html.st-on .c1__op { white-space: nowrap; width: 0; height: 0; }
/* over her reel, the small type keeps a soft shadow */
html.st-on .c1__dsrc, html.st-on .c1__src, html.st-on .r1__w, html.st-on .c1__line, html.st-on .c1__do { text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 12px rgba(0, 0, 0, .35); }
html.st-on .c1__op > * { position: absolute; left: 0; top: 0; transform-origin: 0 0; white-space: nowrap; }
html.st-on .sc-1.st-in .c1 > *, html.st-on .sc-1.st-in .c1__l { will-change: transform, opacity; }
html.st-on.st-desk .c1__h { font-size: 176px; }
html.st-on.st-desk .c1__do { font-size: 48px; }
html.st-on.st-desk .c1__dsrc { margin-top: 12px; }

/* the scroll cue: a stopwatch, then the words */
.cue { display: none; }
html.st-on .cue {
  position: absolute; z-index: 21; display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 14px 0 8px; border-radius: 16px;
  background: rgba(20, 20, 19, .82); box-shadow: inset 0 0 0 1px var(--hair);
  color: var(--chalk); font: 700 11px/1 var(--f-text); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; opacity: 0;
}
.cue__g { width: 20px; height: 20px; flex: none; overflow: visible; fill: none; stroke: var(--chalk); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cue__g .cue__h { stroke: var(--chalk); transform-origin: 10px 11px; }
html.st-on:not(.rmos) .cue.tick .cue__h { animation: st-tick 2.4s steps(8, end) infinite; }
@keyframes st-tick { to { transform: rotate(360deg); } }

/* the four rows */
.r1 { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.r1__n { font: 800 40px/1 var(--f-disp); font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--chalk); }
.r1__w { font: 500 17px/1.2 var(--f-text); color: var(--chalk); }
html.st-on .rows1 { position: absolute; left: 0; top: 0; z-index: 20; }
html.st-on .r1 { position: absolute; left: 0; top: 0; opacity: 0; }
html.st-on .c1__src, html.st-on .c1__line { position: absolute; left: 0; top: 0; z-index: 20; }
.c1__line { font: 700 21px/1.25 var(--f-text); color: var(--chalk); }
.c1__s1, .c1__s2 { display: block; }
html.st-on .c1__src, html.st-on .c1__line { opacity: 0; }
html.st-on.st-desk .r1__n { font-size: 56px; }
html.st-on.st-desk .r1__w { font-size: 21px; }
html.st-on.st-desk .c1__line { font-size: 26px; }
/* the source lines over her reel sit on a small night veil (phones) */
html.st-on:not(.st-desk) .c1__dsrc, html.st-on:not(.st-desk) .c1__src { width: auto !important; padding: 3px 7px 2px; margin-left: -7px; border-radius: 6px; background: rgba(10, 10, 9, .62); text-shadow: none; }

/* ---------------------------------------------------------------------------------------------- 2 · Rep 1 · What your app is made of */
html.st-on .c2__h, html.st-on .c2__sub, html.st-on .band, html.st-on .board, html.st-on .chips, html.st-on .c2__small,
html.st-on .c2__src, html.st-on .c2__close { position: absolute; left: 0; top: 0; z-index: 20; }
html.st-on .c2__h { width: calc(100% - 32px); text-wrap: balance; }
.band { overflow: hidden; border-radius: 18px; background: var(--coal); box-shadow: var(--shadow), inset 0 0 0 1px var(--hair); }
.band__img, .band__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; filter: grayscale(1) contrast(1.08) brightness(.82); }
.band__v { z-index: 1; opacity: 0; transition: opacity .3s linear; }
.band__v.on { opacity: 1; }
html.st-on .band { opacity: 0; }
html.st-on .band--2 { border: 6px solid var(--coal); }
.board { border-radius: 14px; }
.split {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px 0 15px;
  background: var(--coal); box-shadow: inset 0 -1px 0 var(--hair);
}
.split__tk { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--lime); transform-origin: 50% 0; }
.split__v { flex: none; width: var(--vw, 124px); font: 800 40px/1 var(--f-disp); font-variant-numeric: tabular-nums; text-transform: uppercase; color: var(--chalk); white-space: nowrap; }
.split__w { flex: 1; min-width: 0; font: 500 17px/1.15 var(--f-text); color: var(--chalk); }
html.st-on .split { position: absolute; left: 0; top: 0; width: 100%; height: 44px; opacity: 0; }
html.st-on .sc-2.st-in .split { will-change: transform, opacity; }
/* the odometer: one clipped cell per character, holding a strip */
.od { display: inline-block; position: relative; overflow: hidden; height: 1em; line-height: 1em; vertical-align: top; }
.od__g { visibility: hidden; }
.od__s { position: absolute; left: -3px; right: -3px; top: 0; text-align: center; }
.od__s::before { content: attr(data-s); display: block; white-space: pre; line-height: 1em; }
.od__c { display: inline-block; height: 1em; line-height: 1em; vertical-align: top; }
.chips { display: flex; gap: 8px; }
.chip { padding: 8px 12px; border-radius: 12px; background: var(--coal); box-shadow: inset 0 0 0 1px var(--hair); font: 500 15px/1.2 var(--f-text); color: var(--chalk); white-space: nowrap; }
html.st-on .chip, html.st-on .c2__small, html.st-on .c2__src, html.st-on .c2__close { opacity: 0; }
.c2__c1, .c2__c2 { display: block; }
html.st-on.st-desk .split { height: var(--rowH, 78px); padding: 0 18px 0 22px; gap: 20px; }
html.st-on.st-desk .split__tk { width: 3px; }
html.st-on.st-desk .split::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--faint); }
html.st-on.st-desk .split__v { font-size: var(--vf, 72px); }
html.st-on.st-desk .split__w { font-size: 21px; }
html.st-on.st-desk .chip { font-size: 17px; padding: 10px 16px; }

/* ---------------------------------------------------------------------------------------------- 3 · Rep 2 · Your method */
html.st-on .c3__h, html.st-on .c3__src, html.st-on .c3__close { position: absolute; left: 0; top: 0; z-index: 20; }
/* the source line sits under the tiles (they never pass over it: the phones' mask stops them above it) */
html.st-on .c3__src { z-index: 17; }
/* phones: the tiles move inside a fixed window (y 196 to the pill zone): an outgoing tile leaves under its top edge, so it
   never crosses the label space; the labels live outside it, above */
html.st-on .lbls3 { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 20; }
.c3__h1, .c3__h2 { display: block; }
html.st-on .tiles { position: absolute; inset: 0; z-index: 18; }
html.st-on .tile { position: absolute; left: 0; top: 0; visibility: hidden; }
html.st-on .tile__f { transform-origin: 50% 55%; }
/* her reel in a coal frame: the frame keeps its round corners (a background, no clip); her video's corners are drawn by a
   static overlay in the frame colour (no rounded clip over a playing video) */
.tile__f { position: relative; border: 6px solid var(--coal); border-radius: 18px; background: var(--coal); box-shadow: var(--shadow); }
.tile__m { position: relative; width: 100%; padding-top: 125%; background: #000; }
.tile__cn { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(circle at 100% 100%, rgba(20, 20, 19, 0) 11.5px, var(--coal) 12px) 0 0 / 12px 12px no-repeat,
    radial-gradient(circle at 0 100%, rgba(20, 20, 19, 0) 11.5px, var(--coal) 12px) 100% 0 / 12px 12px no-repeat,
    radial-gradient(circle at 100% 0, rgba(20, 20, 19, 0) 11.5px, var(--coal) 12px) 0 100% / 12px 12px no-repeat,
    radial-gradient(circle at 0 0, rgba(20, 20, 19, 0) 11.5px, var(--coal) 12px) 100% 100% / 12px 12px no-repeat; }
.tile__img, .tile__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.tile__v { z-index: 1; opacity: 0; transition: opacity .3s linear; }
.tile__v.on { opacity: 1; }
/* our label: a coal card beside her reel, never over it */
.lbl { padding: 12px 14px 13px; border-radius: 14px; background: var(--coal); box-shadow: inset 0 0 0 1px var(--hair); }
.lbl__t { font: 900 26px/.95 var(--f-disp); text-transform: uppercase; color: var(--chalk); letter-spacing: -.005em; }
.lbl__s { margin-top: 6px; font: 500 15px/1.3 var(--f-text); color: var(--muted); }
html.st-on .lbl { position: absolute; left: 0; top: 0; z-index: 2; opacity: 0; }
/* the lime hairline: from our label to the height of her own card inside the reel (it points, never touches) */
.hl { display: none; }
html.st-on .hl { display: block; position: absolute; left: 0; top: 0; z-index: 2; width: 0; height: 0; pointer-events: none; }
.hl i { position: absolute; left: 0; top: 0; background: var(--lime); transform-origin: 0 0; }
.hl__v { width: 1px; height: 100px; }
.hl__h { width: 100px; height: 1px; }
.hl__d { width: 5px; height: 5px; border-radius: 50%; margin: -2px 0 0 -2px; }
html.st-on .c3__src, html.st-on .c3__close { opacity: 0; }
html.st-on:not(.st-desk) .c3__close { text-wrap: balance; }
html.st-on.st-desk .lbl__t { font-size: 30px; }
html.st-on.st-desk .lbl__s { font-size: 17px; }

/* ---------------------------------------------------------------------------------------------- 4 · Rep 3 · The app */
.key__1, .key__2 { display: block; }
html.st-on .key, html.st-on .c4__cap { position: absolute; left: 0; top: 0; z-index: 32; }
html.st-on .key { white-space: nowrap; }
html.st-on.st-desk .key { white-space: normal; text-wrap: balance; }
/* "Your card is now the plan." in the closing-line style (Sofia XC 900 caps, 36 px phones, 64 px desktop) */
html.st-on .c4__cap { opacity: 0; font: 900 36px/.9 var(--f-disp); letter-spacing: -.01em; text-transform: uppercase; color: var(--chalk); text-wrap: balance; }
html.st-on.st-desk .c4__cap { font-size: 64px; }
/* phones: the key line over her reel keeps the small type's soft shadow */
html.st-on:not(.st-desk) .key { text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 12px rgba(0, 0, 0, .35); }

/* ---------------------------------------------------------------------------------------------- 5 · Rep 4 · Screen by screen */
.step__t { font: 800 17px/1.25 var(--f-text); color: var(--chalk); }
.step__s { margin-top: 3px; font: 500 17px/1.3 var(--f-text); color: var(--muted); }
html.st-on .c5i { width: 0; height: 0; }
html.st-on .c5i > * { position: absolute; left: 0; top: 0; }
html.st-on .c5__h { white-space: nowrap; }
html.st-on .c5__sub { white-space: nowrap; opacity: 0; }
html.st-on .steps { position: absolute; inset: 0; z-index: 25; }
html.st-on .step { position: absolute; left: 0; top: 0; visibility: hidden; }
html.st-on .step.on { visibility: inherit; }
html.st-on .c5__draft { position: absolute; left: 0; top: 0; z-index: 25; opacity: 0; }
html.st-on.st-desk .step__t { font-size: 30px; line-height: 1.12; letter-spacing: -.01em; }
html.st-on.st-desk .step__s { margin-top: 8px; font-size: 21px; text-wrap: balance; }
/* T5 · the track (desktop) and the lane strip (phones) */
.track, .lane { display: none; }
html.st-on.st-desk .track { display: block; position: absolute; left: 0; top: 0; z-index: 8; overflow: visible; pointer-events: none; }
.track__o, .track__i { fill: none; stroke: var(--faint); stroke-width: 1.5; }
.track__tk { stroke: var(--chalk); stroke-width: 2; stroke-linecap: round; }
.track__n { font: 700 13px var(--f-text); fill: var(--chalk); text-anchor: middle; }
.track__mk.on .track__tk { stroke: var(--lime); }
.track__mk.on .track__n { fill: var(--lime); }
.track__tr { fill: none; stroke: var(--lime); stroke-width: 4; stroke-linecap: round; }
.track__tr2 { stroke-width: 6; }
.track__dot { fill: var(--lime); }
html.st-on:not(.st-desk) .lane { display: block; position: absolute; left: 0; top: 0; z-index: 8; height: 12px; pointer-events: none; opacity: 0; }
.lane__l { position: absolute; left: 0; right: 0; height: 1.5px; background: var(--faint); }
.lane__l--a { top: 0; } .lane__l--b { bottom: 0; }
.lane__mk { position: absolute; top: -2px; width: 2px; height: 16px; margin-left: -1px; border-radius: 1px; background: var(--chalk); }
.lane__mk.on { background: var(--lime); }
.lane__tr { position: absolute; left: 0; top: 1px; width: 40px; height: 10px; border-radius: 5px; transform-origin: 100% 50%;
  background: linear-gradient(90deg, rgba(176, 196, 58, 0), rgba(176, 196, 58, .55)); }
.lane__dot { position: absolute; left: 0; top: 1px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--lime); }

/* ---------------------------------------------------------------------------------------------- 6 · Rep 5 · Your turn */
.c6__a1, .c6__a2 { display: block; }
html.st-on .c6 { width: 0; height: 0; }
html.st-on .c6 > * { position: absolute; left: 0; top: 0; }
html.st-on .c6__h { white-space: nowrap; }
html.st-on .c6__s { opacity: 0; }
html.st-on .c6__hint, html.st-on .c6__after { position: absolute; left: 0; top: 0; z-index: 25; }
html.st-on .c6__hint { opacity: 0; font: 500 15px/1.35 var(--f-text); color: var(--muted); text-align: center; text-wrap: balance; }
html.st-on.st-desk .c6__hint { font: 500 21px/1.3 var(--f-text); color: var(--chalk); text-align: left; }
html.st-on.st-noapp .c6__hint { display: none; }
/* "Session done." / "Tomorrow, the plan knows what’s next.": the caption style (Figtree 500 17 / 21 px) */
html.st-on .c6__after { visibility: hidden; }
html.st-on.st-desk .c6__a2 { margin-top: 4px; }
html.st-on:not(.st-desk) .c6__after { width: 0; height: 0; }
html.st-on:not(.st-desk) .c6__a1, html.st-on:not(.st-desk) .c6__a2 { position: absolute; left: 0; top: 0; white-space: nowrap; }
.fx6 { display: none; }
html.st-on .fx6 { display: block; position: absolute; inset: 0; z-index: 12; pointer-events: none; visibility: hidden; }
html.st-on .fx6:not(.st-in) { display: none; }
.fx6 i { position: absolute; left: 0; top: 0; display: block; border-radius: 50%; opacity: 0; }
html.st-on .fx6.st-in i { will-change: transform, opacity; }
.fx6__br { width: 760px; height: 760px; margin: -380px 0 0 -380px; background: radial-gradient(closest-side, rgba(244, 244, 240, 1), rgba(244, 244, 240, .4) 45%, rgba(244, 244, 240, 0)); }
/* the done: a 2 px lime ring (360 px at most, sized by the frame loop), scaled to 1.4 as it fades */
.fx6__pu { width: 360px; height: 360px; margin: -180px 0 0 -180px; background: none; box-shadow: inset 0 0 0 2px var(--lime); }
/* the scroll reminder (SPEC 2 D point 3): a coal pill with our down chevron and two lines, bottom centre under the phone */
.nudge { display: none; }
html.st-on .nudge {
  display: flex; position: absolute; z-index: 27; left: 0; top: 0; align-items: center; gap: 10px;
  padding: 7px 18px 7px 7px; border-radius: 26px; background: var(--coal); color: var(--chalk);
  box-shadow: inset 0 0 0 1px var(--hair), var(--shadow); white-space: nowrap; pointer-events: none;
  opacity: 0; visibility: hidden; translate: 0 10px;
  transition: opacity .32s linear, translate .42s var(--ease-out), visibility 0s linear .42s;
}
html.st-on .nudge.on { opacity: 1; visibility: inherit; translate: 0 0; transition: opacity .32s linear, translate .42s var(--ease-out), visibility 0s; }
.nudge__c { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ash); }
.nudge__chev { width: 18px; height: 18px; fill: none; stroke: var(--chalk); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nudge__t { display: flex; flex-direction: column; gap: 1px; }
.nudge__t b { font: 700 15px/1.2 var(--f-text); }
.nudge__t span { font: 400 15px/1.25 var(--f-text); color: var(--muted); }
/* the chevron bobs 6 px on a 1.4 s loop (still under reduced motion) */
html.st-on:not(.rmos) .nudge.on .nudge__chev { animation: st-nudge 1.4s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes st-nudge { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }

/* ---------------------------------------------------------------------------------------------- 4 · 5 · 6 · the phone (black titanium) */
html.st-on .phone {
  position: absolute; left: 0; top: 0; z-index: 14;
  width: var(--cw, 393px); height: var(--chh, 852px);
  transform-origin: 0 0; pointer-events: none;
}
html.st-on .phone__screen { pointer-events: auto; }
html.st-on .phone.ph-off { opacity: 0; }
/* while the phone is on stage (chapters 4 to 6, pre-render included) its hardware and its glass keep their own layers
   and their raster scale: scaling the phone (the entrance, the recoveries, the live rescale) re-rasters nothing, and no
   layer is created or dropped at the start of a motion */
html.st-on .phone.ph-lay { will-change: transform, opacity; }
html.st-on .phone.ph-lay .phone__screen { will-change: transform; }
/* the hardware and the black glass fade on their own layers: their fades never repaint the phone (its shadow) or the app */
html.st-on .phone.ph-lay .phone__frame, html.st-on .phone.ph-lay > .pb, html.st-on .phone.ph-lay .phone__black,
html.st-on .phone.ph-lay .phone__sh { will-change: transform, opacity; }
.phone { --R: 55px; --bz: 11px; --band: 6px; }
.phone__frame {
  position: absolute; inset: calc((var(--bz) + var(--band)) * -1);
  border-radius: calc(var(--R) + var(--bz) + var(--band));
  border: var(--band) solid transparent;
  background:
    linear-gradient(#050505, #050505) padding-box,
    linear-gradient(160deg, #2C2C2A 0%, #1B1B1A 22%, #121211 46%, #1A1A19 64%, #262624 100%) border-box;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06);
  pointer-events: none;
}
/* its drop shadow: a soft ellipse under the lower half (gradients only), drawn at a quarter of its size and scaled up:
   a soft gradient loses nothing, and its raster, on the phone's first frame, costs a sixteenth */
.phone__sh {
  position: absolute; left: -64px; top: 46%; width: calc((100% + 128px) / 4); height: calc((54% + 150px) / 4);
  transform: scale(4); transform-origin: 0 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .78), rgba(0, 0, 0, .42) 55%, rgba(0, 0, 0, 0));
}
/* the top edge catches the garage light (along its straight part) */
.phone__frame::after {
  content: ""; position: absolute; top: calc(var(--band) * -1); left: 16%; right: 16%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .18) 30%, rgba(255, 255, 255, .18) 70%, rgba(255, 255, 255, 0));
}
.phone__frame::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  border-radius: calc(var(--R) + var(--bz));
  border: var(--bz) solid #000;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), inset 0 0 0 .75px rgba(255, 255, 255, .04);
}
.pa { position: absolute; z-index: 0; width: var(--band); height: 2.5px; background: rgba(120, 120, 112, .35); }
.pa--1 { left: calc(var(--band) * -1); top: 92px; }
.pa--2 { left: calc(var(--band) * -1); bottom: 92px; }
.pa--3 { right: calc(var(--band) * -1); top: 92px; }
.pa--4 { right: calc(var(--band) * -1); bottom: 92px; }
.pb {
  position: absolute; width: 5px; border-radius: 2px;
  background: linear-gradient(90deg, #121211 0%, #2E2E2B 45%, #3A3A36 55%, #161615 100%);
  box-shadow: 0 0 0 .6px rgba(0, 0, 0, .6);
}
.pb--act { left: calc(0px - var(--bz) - var(--band) - 3.5px); top: 122px; height: 32px; }
.pb--vu { left: calc(0px - var(--bz) - var(--band) - 3.5px); top: 182px; height: 60px; }
.pb--vd { left: calc(0px - var(--bz) - var(--band) - 3.5px); top: 254px; height: 60px; }
.pb--pw { right: calc(0px - var(--bz) - var(--band) - 3.5px); top: 214px; height: 94px; background: linear-gradient(270deg, #121211 0%, #2E2E2B 45%, #3A3A36 55%, #161615 100%); }
.phone__screen {
  position: absolute; inset: 0; background: #000;
  transform: translateZ(0);
}
/* the 55 px corners of the glass: four static spans over the app (no rounded clip, so no mask layer per frame) */
.phone__corners { position: absolute; inset: 0; z-index: 45; pointer-events: none; }
.phone__block { position: absolute; inset: 0; z-index: 30; }
.phone__corners i { position: absolute; width: 56px; height: 56px; }
.phone__corners i:nth-child(1) { left: 0; top: 0; background: radial-gradient(circle at 100% 100%, rgba(0, 0, 0, 0) 54.5px, #000 55px); }
.phone__corners i:nth-child(2) { right: 0; top: 0; background: radial-gradient(circle at 0 100%, rgba(0, 0, 0, 0) 54.5px, #000 55px); }
.phone__corners i:nth-child(3) { left: 0; bottom: 0; background: radial-gradient(circle at 100% 0, rgba(0, 0, 0, 0) 54.5px, #000 55px); }
.phone__corners i:nth-child(4) { right: 0; bottom: 0; background: radial-gradient(circle at 0 0, rgba(0, 0, 0, 0) 54.5px, #000 55px); }
#eden-app { position: absolute; left: 0; top: 0; width: 100%; height: 100%; contain: strict; }
.phone__glare {
  position: absolute; inset: 0; z-index: 40; pointer-events: none; border-radius: var(--R);
  background: linear-gradient(118deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .025) 20%, rgba(255, 255, 255, 0) 38%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}
/* the glass goes black while the reel docks (T4) and during a recovery (R) */
.phone__black { display: none; }
html.st-on .phone__black { display: block; position: absolute; inset: 0; z-index: 30; background: #000; opacity: 0; pointer-events: none; }
/* the Dynamic Island: 196 pt in the DOM, 126 pt through the clip; T6 opens it on a lime check */
.phone__island {
  position: absolute; top: 11px; left: 50%; z-index: 41; width: 196px; height: 37px; margin-left: -98px;
  pointer-events: none; clip-path: inset(0 35px round 18.5px); -webkit-clip-path: inset(0 35px round 18.5px);
  contain: strict;
}
.isl__body { position: absolute; inset: 0; border-radius: 18.5px; background: #000; box-shadow: inset 0 0 0 .75px rgba(255, 255, 255, .05); }
.isl__body::after {
  content: ""; position: absolute; right: 48px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #2E3640 0, #10141A 38%, #05070A 62%, #000 72%);
}
/* T6: a tiny lime check inside the island, revealed by a black cover that slides away (transform only) */
.isl__ck { position: absolute; left: 44px; top: 7.5px; width: 22px; height: 22px; overflow: visible; opacity: 0; }
.isl__cv { position: absolute; left: 40px; top: 4px; width: 30px; height: 29px; background: #000; transform-origin: 0 50%; }
.isl__ck circle { fill: var(--lime); }
.isl__ck path { fill: none; stroke: var(--night); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* the static Today screen: only when the app is missing, or without the experience */
.phone__fb { display: none; position: absolute; inset: 0; background: var(--night); color: var(--chalk); font-family: var(--f-text); }
html.st-noapp .phone__fb, html[data-noapp] .phone__fb, html:not(.st-on):not(.st-flat) .phone__fb { display: block; }
html.st-noapp #eden-app, html[data-noapp] #eden-app, html:not(.st-on):not(.st-flat) #eden-app { display: none; }
html.no-js img[data-src] { display: none; }
.fb__status { position: absolute; left: 0; right: 0; top: 0; height: 54px; color: var(--chalk); }
.fb__time { position: absolute; left: 38px; top: 18px; font: 600 16px/20px var(--f-text); font-variant-numeric: tabular-nums; }
.fb__icons { position: absolute; right: 30px; top: 21px; display: flex; gap: 6px; align-items: center; }
.fb__k { position: absolute; left: 16px; top: 62px; font: 700 11px/1 var(--f-text); letter-spacing: .08em; color: var(--muted); }
.fb__hd { position: absolute; left: 16px; right: 16px; top: 84px; height: 271px; border-radius: 18px; overflow: hidden; background: var(--ash); }
.fb__hd img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
.fb__h { position: absolute; left: 16px; right: 16px; top: 369px; font: 900 34px/1 var(--f-disp); text-transform: uppercase; letter-spacing: -.005em; }
.fb__m { position: absolute; left: 16px; right: 16px; top: 407px; font: 500 15px/1.2 var(--f-text); color: var(--muted); }
.fb__calc { margin-left: 4px; font: 600 11px/1 var(--f-text); color: var(--muted); }
.fb__rows { position: absolute; left: 16px; right: 16px; top: 438px; display: grid; gap: 2px; }
.fb__rows li { display: flex; align-items: center; justify-content: space-between; height: 28px; padding: 0 12px; border-radius: 8px; background: var(--card); color: var(--card-ink); }
.fb__rows b { font: 700 15px/1 var(--f-text); }
.fb__rows span { font: 600 13px/1 var(--f-text); color: var(--card-meta); }
.fb__src { position: absolute; left: 16px; right: 16px; top: 684px; font: 700 11px/1 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fb__pill { position: absolute; left: 16px; right: 16px; bottom: 99px; height: 52px; border-radius: 26px; background: var(--lime); color: var(--night); font: 700 17px/52px var(--f-text); text-align: center; }
.fb__tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 83px; padding-bottom: 26px; display: flex; justify-content: space-around; align-items: center; border-top: 1px solid rgba(244, 244, 240, .1); background: rgba(10, 10, 9, .92); font: 600 10.5px/1 var(--f-text); color: var(--muted); }
.fb__tabs span { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.fb__tabs svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fb__tabs .on { color: var(--chalk); }
.phone.c780 .fb__hd { top: 80px; height: 220px; }
.phone.c780 .fb__h { top: 312px; }
.phone.c780 .fb__m { top: 350px; }
.phone.c780 .fb__rows { top: 378px; }
.phone.c780 .fb__rows li { height: 26px; }
.phone.c780 .fb__src { top: 604px; }

/* ---------------------------------------------------------------------------------------------- R · the recovery ring */
.ring { display: none; }
html.st-on .ring {
  display: block; position: absolute; left: 0; top: 0; z-index: 40; width: 168px; height: 168px; margin: -84px 0 0 -84px;
  pointer-events: none; visibility: hidden; opacity: 0;
}
html.st-on .ring.st-in { will-change: transform, opacity; }
.ring__g { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.ring__tk { fill: none; stroke: var(--ash); stroke-width: 6; }
.ring__a { fill: none; stroke: var(--lime); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 100 100; }
.ring__t {
  position: absolute; left: 0; right: 0; top: 50%; margin-top: -36px; text-align: center;
  font: 800 44px/1 var(--f-disp); font-variant-numeric: tabular-nums; color: var(--chalk);
}
.ring__l {
  position: absolute; left: 50%; width: 112px; margin-left: -56px; top: 50%; margin-top: 16px; text-align: center;
  font: 700 11px/1.25 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-wrap: balance;
}
html.st-on.st-desk .ring { width: 240px; height: 240px; margin: -120px 0 0 -120px; }
html.st-on.st-desk .ring__t { font-size: 64px; margin-top: -50px; }
html.st-on.st-desk .ring__l { font-size: 13px; width: 160px; margin-left: -80px; margin-top: 24px; }

/* ---------------------------------------------------------------------------------------------- 7 · Cool down */
.bpm { position: relative; }
.bpm__row { position: relative; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.bpm__v { font: 800 80px/.9 var(--f-disp); font-variant-numeric: tabular-nums; color: var(--chalk); }
.bpm__u { font: 700 13px/1 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: var(--chalk); }
.bpm__tr { position: absolute; left: -6px; right: -6px; top: 6px; height: 60px; width: auto; max-width: none; overflow: visible; pointer-events: none; }
.bpm__p { fill: none; stroke: var(--chalk); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: .34; }
.zone { position: absolute; left: -10px; top: -8px; width: 180px; height: 92px; max-width: none; overflow: visible; }
.zone__b { fill: none; stroke: var(--lime); stroke-width: 2; width: calc(100% - 2px); height: calc(100% - 2px); }
.zone__t { display: flex; gap: 10px; align-items: baseline; margin-top: 14px; white-space: nowrap; }
.zone__l { font: 700 11px/1 var(--f-text); letter-spacing: .08em; color: var(--lime); }
.zone__r { font: 500 15px/1 var(--f-text); color: var(--muted); }
html.st-on .bpm { position: absolute; left: 0; top: 0; z-index: 20; width: 0; height: 0; }
html.st-on .bpm > * { position: absolute; left: 0; top: 0; }
html.st-on .bpm__tr { width: 100px; height: 60px; right: auto; }
html.st-on .zone { opacity: 0; transform-origin: 0 0; }
html.st-on .zone__t { margin: 0; opacity: 0; }
html.st-on .c7q, html.st-on .offer, html.st-on .c7__line { position: absolute; left: 0; top: 0; z-index: 20; }
html.st-on .c7q { transform-origin: 0 0; }
/* chapter 7 moves its blocks as wholes (the quote compresses, the rows rise, J78 shrinks them): their own layers */
html.st-on .sc-7.st-in .c7q, html.st-on .sc-7.st-in .of, html.st-on .sc-7.st-in .bpm, html.st-on .sc-7.st-in .c7__line { will-change: transform, opacity; }
.q__1, .q__2 { display: block; }
html.st-on .q__a, html.st-on .q__b { display: block; }
.c7__src { margin-top: 12px; text-wrap: balance; }
html.st-on .c7__src { opacity: 0; }
.of { padding: 0; }
html.st-on .of, html.st-on .c7__line { transform-origin: 0 0; }
.of__k { font: 700 11px/1.3 var(--f-text); letter-spacing: .08em; color: var(--muted); }
.of__v { margin-top: 6px; font: 600 17px/1.25 var(--f-text); color: var(--chalk); }
/* the offer's numbers ("6 weeks", "$0", "0 extra filming", "100%"): Sofia XC 800 tabular, 1.25x the row */
.of__n { font: 800 1.25em/1 var(--f-disp); font-variant-numeric: tabular-nums; letter-spacing: .005em; }
html.st-on .of { position: absolute; left: 0; top: 0; opacity: 0; }
html.st-on .c7__line { opacity: 0; font: 700 21px/1.2 var(--f-text); }
html.st-on.st-desk .c7__line { font-size: 24px; }
html.st-on.st-desk .bpm__v { font-size: 168px; }
html.st-on.st-desk .bpm__u { font-size: 15px; }
html.st-on.st-desk .zone__l { font-size: 13px; }
html.st-on.st-desk .zone__r { font-size: 17px; }
html.st-on.st-desk .of__k { font-size: 13px; }
html.st-on.st-desk .of__v { font-size: 21px; }
html.st-on .band--7, html.st-on .band--9 { z-index: 1; border-radius: 0; background: transparent; box-shadow: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 var(--mfx, 50%), transparent 100%), linear-gradient(180deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, #000 0, #000 var(--mfx, 50%), transparent 100%), linear-gradient(180deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
  mask-composite: intersect; }
html.st-on:not(.st-desk) .band--7, html.st-on:not(.st-desk) .band--9 { display: none; }
.bpm__fly { display: none; }
html.st-on .bpm__fly {
  display: block; position: absolute; left: 0; top: 0; z-index: 36; margin: 0; transform-origin: 0 0; visibility: hidden;
  font: 800 80px/.9 var(--f-disp); font-variant-numeric: tabular-nums; color: var(--chalk); white-space: nowrap; pointer-events: none;
}
html.st-on.st-desk .bpm__fly { font-size: 168px; }

/* ---------------------------------------------------------------------------------------------- 8 · Splits · The numbers (quiet) */
.eq { font: 500 17px/1.5 var(--f-text); color: var(--chalk); }
.eq__l { display: block; }
.eq b { font: 800 26px/1 var(--f-disp); font-variant-numeric: tabular-nums; color: var(--chalk); letter-spacing: .005em; }
.eq__x { font: 500 1em/1 var(--f-text); color: var(--chalk); }
.eq__r { position: relative; }
.eq__rule { position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: var(--hair); transform-origin: 0 50%; }
html:not(.st-on) .eq__rule { display: none; }
.c8 .small { margin-top: 10px; }
.c8__src { margin-top: 10px; }
html.st-on .c8 { position: absolute; left: 0; top: 0; z-index: 20; }
html.st-on .c8 > * { position: relative; }
html.st-on .c8 .bdg { position: relative; margin-bottom: 18px; }
html.st-on.st-desk .eq { font-size: 21px; }
html.st-on.st-desk .eq b { font-size: 34px; }
html.st-on.st-desk .eq__l:nth-child(1), html.st-on.st-desk .eq__l:nth-child(2) { display: inline; }
html.st-on .eq__r { display: table; margin-top: 6px; padding-top: 4px; }
html.st-on.st-desk .c8 { text-align: center; }
html.st-on.st-desk .eq__r { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------------------------------------- 9 · Finish */
/* her card again, every line checked; then the closing line and the call to action, in her card's style */
.c9card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hc {
  position: relative; display: block; margin: 0; padding: .22em .55em; border-radius: .28em;
  background: var(--card); color: var(--card-ink); font: 700 16px/1.25 var(--f-text); text-align: center; white-space: nowrap;
  box-shadow: var(--shadow); text-decoration: none;
}
.hc__ck { position: absolute; left: 100%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 8px; }
.hc__ck svg { width: 100%; height: 100%; overflow: visible; }
.hc__ck circle { fill: var(--lime); }
.hc__ck path { fill: none; stroke: var(--night); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hc--easy { margin-top: 14px; font-size: 22px; }
/* the experience: the fifth box's white grows from the centre to the typed text (its own layer, scaleX) */
.hc__bg { display: none; }
html.st-on .hc--easy { background: transparent; box-shadow: none; }
html.st-on .hc__bg { display: block; position: absolute; inset: 0; border-radius: inherit; background: var(--card); box-shadow: var(--shadow); transform-origin: 50% 50%; }
html.st-on .hc--easy .hc__t { position: relative; display: inline-block; }
.hc--go {
  display: flex; align-items: center; justify-content: center; height: 52px; margin-top: 2px; padding: 0 30px;
  background: var(--lime); color: var(--night); font: 900 28px/1 var(--f-disp); text-transform: uppercase; letter-spacing: .01em;
  border-radius: 14px; cursor: pointer; touch-action: manipulation;
}
.hc--go:active { transform: scale(.97); }
.thread { display: flex; align-items: flex-start; gap: 10px; }
.thread__faces { display: flex; flex: none; padding-top: 2px; }
.thread__faces img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px var(--night); }
.thread__faces img + img { margin-left: -8px; }
.thread__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.thread__t b { font: 700 15px/1.25 var(--f-text); color: var(--chalk); }
.thread__t span { font: 400 15px/1.3 var(--f-text); color: var(--muted); }
.btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.btns:focus { outline: none; }
.btn {
  display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; height: 56px; padding: 0 8px;
  border-radius: 16px; background: var(--chalk); color: var(--night); text-decoration: none; font: 700 14px/1.15 var(--f-text); letter-spacing: -.005em;
  transition: transform .14s var(--ease-out); touch-action: manipulation;
}
.btn:active { transform: scale(.97); }
.btn span { min-width: 0; }
@media (min-width: 380px) { .btns .btn span { white-space: nowrap; } }
html.st-desk .btn { font-size: 15px; }
.btn .ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn .ico__dot { stroke-width: 2.6; }
.btn--s { flex: 1; }
/* chapter 9's four buttons are secondary: "Say GO." is the one filled accent */
.btns { gap: 16px; }
.btns .btn { height: 48px; background: var(--coal); color: var(--chalk); box-shadow: inset 0 0 0 1px var(--hair); }
.c9__foot { margin-top: 16px; text-wrap: pretty; }
html.st-on .c9card { position: absolute; left: 0; top: 0; z-index: 26; display: block; width: 0; height: 0; }
html.st-on .hc { position: absolute; left: 0; top: 0; margin: 0; opacity: 0; }
html.st-on .hc__ck { opacity: 0; }
html.st-on .hc--go { pointer-events: none; }
html.st-on .hc--go.live { pointer-events: auto; }
html.st-on .c9r { position: absolute; left: 0; top: 0; z-index: 26; }
html.st-on .sc-9 .thread, html.st-on .sc-9 .btn, html.st-on .sc-9 .c9__foot { opacity: 0; }
html.st-on .btns { margin-top: 0; pointer-events: auto; }
html.st-on .btns .btn { pointer-events: none; }
html.st-on .btns .btn.live { pointer-events: auto; }
html.st-on .c9__foot { margin-top: 0; }
html.st-on .c9r > * { position: absolute; left: 0; top: 0; width: 100%; }
html.st-on.st-desk .hc { font-size: 24px; }
html.st-on.st-desk .hc--easy { font-size: 34px; }
html.st-on.st-desk .hc--go { height: 72px; font-size: 40px; padding: 0 44px; border-radius: 18px; }
html.st-on.st-desk .thread__t b { font-size: 17px; }
html.st-on.st-desk .thread__t span { font-size: 17px; }
html.st-on.st-desk .thread__faces img { width: 34px; height: 34px; }
html.st-on.st-desk .btns { gap: 14px; }
html.st-on.st-desk .btns .btn { height: 56px; font-size: 16px; }
html.st-on .sc-9.st-in .hc, html.st-on .sc-9.st-in .thread, html.st-on .sc-9.st-in .btn { will-change: transform, opacity; }

/* ---------------------------------------------------------------------------------------------- the session clock */
#clock { display: none; }
html.st-on #clock {
  display: flex; align-items: center; gap: 12px; position: absolute; left: 0; top: 0; z-index: 60; width: 100%;
  height: calc(var(--ck) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--gut) 0;
  background: var(--coal); box-shadow: inset 0 -1px 0 var(--hair); pointer-events: none; opacity: 0; visibility: hidden;
}
.ck__l { position: relative; flex: none; width: 64px; height: 18px; overflow: hidden; }
.ck__a, .ck__b {
  position: absolute; left: 0; top: 0; font: 800 15px/18px var(--f-disp); letter-spacing: .02em; text-transform: uppercase;
  font-variant-numeric: tabular-nums; color: var(--chalk); white-space: nowrap;
}
.ck__b { opacity: 0; }
.ck__tl { position: relative; flex: 1; min-width: 0; height: 4px; }
.ck__s { position: absolute; left: 0; top: 0; height: 4px; width: 10px; border-radius: 1px; background: var(--ash); overflow: hidden; }
.ck__f { position: absolute; inset: 0; background: var(--lime); transform: scaleX(0); transform-origin: 0 50%; }
/* T6: the done pulse of a rep segment (a light lime overlay, opacity only) */
.ck__p { position: absolute; inset: 0; background: #E9F59B; opacity: 0; }
.ck__cur { position: absolute; left: 0; top: -4px; width: 2px; height: 12px; margin-left: -1px; border-radius: 1px; background: var(--lime); }
.ck__t { flex: none; width: 34px; text-align: right; font: 800 15px/1 var(--f-disp); font-variant-numeric: tabular-nums; color: var(--chalk); }
.ck__fin { position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px; background: var(--lime); transform: scaleX(0); transform-origin: 0 50%; }
html.st-on.st-desk #clock { --ck: 48px; gap: 18px; padding-left: 56px; padding-right: 56px; }
html.st-on.st-desk .ck__l { width: 92px; height: 20px; }
html.st-on.st-desk .ck__a, html.st-on.st-desk .ck__b { font-size: 17px; line-height: 20px; }
html.st-on.st-desk .ck__t { width: 44px; font-size: 17px; }
html.st-on.st-desk .ck__tl { max-width: 980px; margin: 0 auto; }

/* ---------------------------------------------------------------------------------------------- the contact pill + sheet */
#dock {
  position: fixed; z-index: 900;
  right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transition: transform .28s var(--ease-ios), opacity .28s linear, visibility 0s;
}
/* aside: it leaves, then it is gone for good (no focus, no hit) until it returns */
#dock.aside { transform: translate3d(0, calc(100% + 16px), 0); opacity: 0; pointer-events: none; visibility: hidden;
  transition: transform .28s var(--ease-ios), opacity .28s linear, visibility 0s linear .28s; }
.pill {
  display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px 0 9px;
  border-radius: 24px; background: rgba(20, 20, 19, .96); color: var(--chalk);
  box-shadow: inset 0 0 0 1px var(--hair), var(--shadow);
  font: 700 15px/1 var(--f-text); text-decoration: none; white-space: nowrap;
  cursor: pointer; border: 0; touch-action: manipulation;
  transition: transform .14s var(--ease-out), opacity .2s linear;
}
.pill:active { transform: scale(.96); }
.pill__faces { display: flex; }
.pill__faces img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px var(--coal); }
.pill__faces img + img { margin-left: -8px; }
#dock.open .pill { opacity: 0; }
/* the autoplay control: bottom left, the contact pill keeps bottom right (as alan) */
#autoplay {
  position: fixed; z-index: 900; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transition: transform .28s var(--ease-ios), opacity .28s linear, visibility 0s;
}
html.js:not(.st-on) #autoplay, html.st-flat #autoplay, html.st-fail #autoplay { display: none; }
#autoplay.aside { transform: translate3d(0, calc(100% + 16px), 0); opacity: 0; pointer-events: none; visibility: hidden; transition: transform .28s var(--ease-ios), opacity .28s linear, visibility 0s linear .28s; }
.auto {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 9px; height: 48px; padding: 0 18px 0 11px;
  border-radius: 24px; background: rgba(20, 20, 19, .96); color: var(--chalk); border: 0;
  box-shadow: inset 0 0 0 1px var(--hair), var(--shadow);
  font: 700 15px/1 var(--f-text); white-space: nowrap; cursor: pointer; touch-action: manipulation;
  transition: transform .14s var(--ease-out);
}
.auto:active { transform: scale(.96); }
.auto__i { width: 26px; height: 26px; border-radius: 50%; background: var(--lime); color: var(--night); display: grid; place-items: center; flex: none; }
.auto__i svg { width: 10px; height: 10px; fill: currentColor; display: block; }
.auto__i svg[fill="none"] { fill: none; width: 12px; height: 12px; }
.auto__bar { position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px; border-radius: 1px; background: var(--hair); overflow: hidden; }
.auto__bar i { display: block; width: 100%; height: 100%; background: var(--lime); transform-origin: 0 50%; transform: scaleX(0); }
#autoplay:not(.is-on) .auto__bar { opacity: .55; }
#sheet-scrim { position: fixed; inset: 0; z-index: 950; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .22s linear; touch-action: none; }
#sheet-scrim.on { opacity: 1; }
#sheet {
  position: fixed; z-index: 960; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  max-width: 480px; margin: 0 auto; max-height: calc(100% - 24px); overflow: auto; overscroll-behavior: contain;
  padding: 22px 20px 20px; border-radius: 28px; background: var(--coal); color: var(--chalk);
  box-shadow: inset 0 0 0 1px var(--hair), 0 30px 80px -24px rgba(0, 0, 0, .9);
  transform: translate3d(0, 112%, 0); transition: transform .4s var(--ease-ios);
}
#sheet.on { transform: none; }
.sheet__grab { width: 38px; height: 5px; border-radius: 3px; background: rgba(244, 244, 240, .2); margin: -8px auto 14px; touch-action: none; }
.sheet__x { position: absolute; right: 10px; top: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--chalk); }
.sheet__h { font: 900 34px/.95 var(--f-disp); text-transform: uppercase; letter-spacing: -.01em; padding-right: 40px; }
.sheet__s { margin-top: 8px; font: 400 15px/1.3 var(--f-text); color: var(--muted); }
.who { display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; row-gap: 12px; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); }
.who img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px var(--coal), 0 0 0 2.5px var(--hair); }
.who__n { display: flex; flex-direction: column; gap: 3px; }
.who__n b { font: 700 17px/1.2 var(--f-text); }
.who__n span { font: 500 15px/1.2 var(--f-text); color: var(--muted); }
.who__b { grid-column: 1 / -1; display: flex; gap: 10px; }

/* ============================================================================================== static document
   (no JS, a script failed to load, or ?rm=1): the same words, the same order, readable, end states. */
html:not(.st-on) #stage { position: static; height: auto; overflow: visible; }
html:not(.st-on) .cue, html:not(.st-on) .fx6, html:not(.st-on) .rep, html:not(.st-on) .reel, html:not(.st-on) .scrim,
html:not(.st-on) .ring, html:not(.st-on) .nudge, html:not(.st-on) #clock, html:not(.st-on) .bpm__fly, html:not(.st-on) .phone__black,
html:not(.st-on) .hl, html:not(.st-on) .track, html:not(.st-on) .lane, html:not(.st-on) .band--7, html:not(.st-on) .band--9,
html:not(.st-on) .tile__v, html:not(.st-on) .band__v, html:not(.st-on) .bpm__tr, html:not(.st-on) .isl__ck { display: none; }
html:not(.st-on) #dock { position: absolute; top: 12px; bottom: auto; z-index: 30; }
html:not(.st-on) .sc { position: relative; padding: 76px var(--gut) 0; max-width: 760px; margin: 0 auto; }
html:not(.st-on) .sc-1 { padding-top: 16px; }
html:not(.st-on) .sc .bdg { margin-bottom: 18px; }
html:not(.st-on) .c1 .bdg { margin-bottom: 22px; }
html:not(.st-on) .c1__h { font-size: clamp(72px, 22vw, 150px); }
html:not(.st-on) .c1__op { margin-top: 18px; }
html:not(.st-on) .hero { margin: 26px 0 0; border-radius: 22px; overflow: hidden; background: var(--coal); box-shadow: var(--shadow), 0 0 0 6px var(--coal); max-width: 420px; }
html:not(.st-on) .hero img { width: 100%; height: auto; }
html:not(.st-on) .h2, html:not(.st-on) .key, html:not(.st-on) .quote, html:not(.st-on) .close { text-wrap: balance; }
html:not(.st-on) .rows1 { display: grid; gap: 10px; margin-top: 30px; }
html:not(.st-on) .r1 { flex-wrap: wrap; }
html:not(.st-on) .c1__src { margin-top: 12px; }
html:not(.st-on) .c1__line { margin-top: 24px; }
html:not(.st-on) .c2__sub { margin-top: 10px; }
html:not(.st-on) .band--2 { position: relative; margin-top: 22px; aspect-ratio: 16 / 9; border: 6px solid var(--coal); }
html:not(.st-on) .board { margin-top: 22px; overflow: hidden; }
html:not(.st-on) .split { padding-top: 8px; padding-bottom: 8px; }
html:not(.st-on) .chips { margin-top: 12px; flex-wrap: wrap; }
html:not(.st-on) .c2__small { margin-top: 10px; }
html:not(.st-on) .c2__src { margin-top: 8px; }
html:not(.st-on) .c2__close { margin-top: 28px; }
html:not(.st-on) .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 14px; margin-top: 22px; }
html:not(.st-on) .lbl { margin-top: 10px; }
html:not(.st-on) .lbl__t { font-size: 22px; }
html:not(.st-on) .c3__src { margin-top: 14px; }
html:not(.st-on) .c3__close { margin-top: 26px; }
html:not(.st-on) .c4__cap { margin-top: 18px; }
html:not(.st-on) .c5__sub { margin-top: 10px; }
html:not(.st-on) .steps { display: grid; gap: 16px; margin-top: 22px; }
html:not(.st-on) .c5__draft { margin-top: 18px; }
html:not(.st-on) .c6__s { margin-top: 10px; }
html:not(.st-on) .c6__hint { margin-top: 8px; display: none; }
@media (min-width: 900px) { html.st-flat:not(.st-noapp) .c6__hint { display: block; } }
html:not(.st-on) .c6__after { margin-top: 22px; }
html:not(.st-on) .phone { position: relative; width: 393px; height: 852px; margin: 40px 0 calc(852px * -.28 + 14px) calc(50% - 196.5px); transform: scale(.72); transform-origin: 50% 0; }
html:not(.st-on) .phone__fb { border-radius: 55px; }
html:not(.st-on) .bpm { margin-top: 6px; padding: 10px 14px 4px; width: max-content; }
html:not(.st-on) .zone { left: 0; top: 0; width: 100%; height: 92px; }
html:not(.st-on) .c7q { margin-top: 24px; }
html:not(.st-on) .offer { display: grid; gap: 16px; margin-top: 26px; }
html:not(.st-on) .c7__line { margin-top: 22px; }
html:not(.st-on) .c8 .bdg { margin-bottom: 18px; }
html:not(.st-on) .c9card { margin-top: 8px; padding-right: 30px; }
html:not(.st-on) .c9r { margin-top: 30px; }
html:not(.st-on) .sc-9 { padding-bottom: 120px; }
@media (min-width: 760px) {
  html:not(.st-on) .sc-1 { max-width: 980px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); column-gap: 48px; align-items: start; padding-top: 40px; }
  html:not(.st-on) .sc-1 > .c1 { grid-column: 1; grid-row: 1; }
  html:not(.st-on) .sc-1 > .hero { grid-column: 2; grid-row: 1 / span 4; margin: 0; }
  html:not(.st-on) .sc-1 > *:not(.hero):not(.c1) { grid-column: 1; }
  html:not(.st-on) .tiles { grid-template-columns: repeat(4, 1fr); }
  html:not(.st-on) .key, html:not(.st-on) .quote { font-size: 72px; }
  html:not(.st-on) .h2 { font-size: 64px; }
}

/* ---------------------------------------------------------------------------------------------- elevation additions */
/* chapter 1, desktop: the rows' words wrap beside their numeral (the right column is 23% of the width) */
html.st-on.st-desk .r1 { white-space: normal; }
html.st-on.st-desk .r1__w { min-width: 0; }
/* chapter 8: the badge sits in its slot (outside the sheet's flow); desktop lines 1 and 2 share a line and still move */
html.st-on .c8 .bdg { position: absolute; margin: 0; }
html.st-on.st-desk .eq__l:nth-child(1), html.st-on.st-desk .eq__l:nth-child(2) { display: inline-block; }
html.st-on .eq__rule { transform-origin: 0 50%; }
html.st-on.st-desk .eq__rule { transform-origin: 50% 50%; }
/* short desktops and landscape phones: the display type and the big objects follow the height (--dk = S / 900, set by
   story.js, 1 on a 900 px tall screen) */
html.st-on.st-desk .h2 { font-size: calc(84px * var(--dk, 1)); }
html.st-on.st-desk .close { font-size: calc(64px * var(--dk, 1)); }
html.st-on.st-desk .key, html.st-on.st-desk .quote { font-size: calc(108px * var(--dk, 1)); }
html.st-on.st-desk .c1__h { font-size: calc(176px * var(--dk, 1)); }
html.st-on.st-desk .c1__do { font-size: calc(48px * var(--dk, 1)); }
html.st-on.st-desk .r1__n { font-size: calc(56px * var(--dk, 1)); }
html.st-on.st-desk .bdg__c { width: calc(84px * var(--dk, 1)); height: calc(84px * var(--dk, 1)); }
html.st-on.st-desk .bdg__w { font-size: max(12px, calc(16px * var(--dk, 1))); }
html.st-on.st-desk .bdg__s { font-size: calc(var(--bs, 22px) * 30 / 22 * var(--dk, 1)); }
html.st-on.st-desk .ring { width: calc(240px * var(--dk, 1)); height: calc(240px * var(--dk, 1)); margin: calc(-120px * var(--dk, 1)) 0 0 calc(-120px * var(--dk, 1)); }
html.st-on.st-desk .ring__t { font-size: calc(64px * var(--dk, 1)); margin-top: calc(-50px * var(--dk, 1)); }
html.st-on.st-desk .bpm__v, html.st-on.st-desk .bpm__fly { font-size: calc(168px * var(--dk, 1)); }
html.st-on.st-desk .step__t { font-size: max(19px, calc(30px * var(--dk, 1))); }
html.st-on.st-desk .sub, html.st-on.st-desk .cap, html.st-on.st-desk .step__s, html.st-on.st-desk .of__v, html.st-on.st-desk .r1__w { font-size: max(15px, calc(21px * var(--dk, 1))); }
html.st-on.st-desk .c1__line { font-size: max(17px, calc(26px * var(--dk, 1))); }
html.st-on.st-desk .c4__cap.cap { font-size: calc(64px * var(--dk, 1)); }
html.st-on.st-desk .c1__s1, html.st-on.st-desk .c1__s2 { text-wrap: balance; }
html.st-on.st-desk .hc { font-size: max(16px, calc(24px * var(--dk, 1))); }
html.st-on.st-desk .hc--easy { font-size: max(20px, calc(34px * var(--dk, 1))); }
html.st-on.st-desk .hc--go { height: max(48px, calc(72px * var(--dk, 1))); font-size: max(26px, calc(40px * var(--dk, 1))); }
/* desktop family on a narrow column (a phone on its side): every label stays inside its button */
html.st-on.st-desk .btns .btn span { white-space: normal; text-align: center; }
html.st-on.st-desk .lbl__t { font-size: max(18px, calc(30px * var(--dk, 1))); }
html.st-on.st-desk .lbl__s { font-size: max(13px, calc(17px * var(--dk, 1))); }
html.st-on.st-desk .split__w { font-size: max(15px, calc(21px * var(--dk, 1))); }
html.st-on.st-desk .chip { font-size: max(13px, calc(17px * var(--dk, 1))); padding: calc(10px * var(--dk, 1)) calc(16px * var(--dk, 1)); }
html.st-on.st-desk .c1__line { font-size: max(15px, calc(26px * var(--dk, 1))); }