/* The site's stylesheet, in cascade order. *//* Rise tokens: the design's own, copied unchanged from the design handoff
   (canvas/ds/riseds/components/bundle.css). The site recreates the design 1:1, so it
   follows these values, not the app's tokens.css. */

/* Rise tokens, per Look × theme. Source of truth: design_handoff_rise_3/design-system/tokens/*.css (copied verbatim).
   Two ways to switch, both supported:
   1) the app's own:  <html data-look="paper|reel" data-theme="light|dark">
   2) this system's theme ids: data-theme="paper-light|paper-dark|reel-light|reel-dark"
   All four faces are self-hosted: their @font-face rules come from tokens.css (fonts/): Fraunces, Atkinson Next,
   Newsreader (variable wght 200–800, opsz 6–72, normal + italic), Barlow Semi Condensed 500/600/700. No CDN fonts. */
/* Look-independent: spacing, sizing, motion, sun gradients. */
/* ---------- shared: spacing, motion, sizing (Look-independent) ---------- */
:root{
  --space-2:2px;--space-4:4px;--space-8:8px;--space-12:12px;--space-16:16px;--space-20:20px;--space-24:24px;--space-32:32px;--space-48:48px;
  --gutter:20px;
  --row-min:56px;            /* tick rows — one-handed, mid-meal */
  --control-h:48px;          /* fields, segmented */
  --button-h:52px;--button-h-sm:40px;
  --icon-button:44px;
  --nav-h:64px;

  --dur-instant:90ms;        /* press feedback */
  --dur-fast:160ms;          /* hover, toggles */
  --dur-base:260ms;          /* sheet, toast */
  --dur-slow:520ms;          /* sun travel on the horizon */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);   /* tick pop, sun settle */
  --ease-in-out:cubic-bezier(.65,0,.35,1);

  --sun:radial-gradient(circle at 40% 38%,#ffd392,#f8a959 42%,#eb7b49 72%,#e0673f);
  --sun-wide:radial-gradient(120% 140% at 50% 110%,#ffd392 0%,#f8a959 35%,#e0673f 80%);
}

/* Motion off */
@media (prefers-reduced-motion:reduce){:root{--dur-instant:0ms;--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms}}
/* Look: PAPER (default). Base palette --p-*, then semantic tokens, light + dark. Switch: <html data-look="paper" data-theme="light|dark"> */
/* =====================================================================
   LOOK: PAPER  (default)
   ===================================================================== */
:root,[data-look="paper"]{
  --p-paper-50:#FFFDF8;--p-paper-100:#F7F1E8;--p-paper-200:#EFE6D8;--p-paper-300:#E4D9CA;--p-paper-400:#CDBFAE;
  --p-ink-900:#1C1916;--p-ink-700:#4A423A;--p-ink-600:#5A5047;--p-ink-400:#8F8172;
  --p-coral-500:#E0673F;--p-coral-600:#D65C34;--p-coral-700:#C9532E;--p-coral-800:#A8441F;--p-coral-200:#F2C6B4;
  --p-green-600:#3F8F55;--p-gold-600:#B8870F;--p-rose-600:#C23A4B;

  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Atkinson Next',system-ui,sans-serif;
  --font-numeric:'Atkinson Next',system-ui,sans-serif;
  --font-caption:'Atkinson Next',system-ui,sans-serif;
  --display-weight:420;--display-style:normal;--due-title-style:normal;
  --numeric-weight:700;--numeric-tracking:-.03em;
  --caption-size:14px;--caption-weight:700;--caption-tracking:0;--caption-transform:none;
  --label-transform:none;--label-tracking:0;--label-size:16px;

  --type-hero:76px;--type-display-lg:32px;--type-display-md:24px;--type-title:18px;--type-body:16px;--type-small:14px;--type-micro:12px;

  --radius-sm:8px;--radius-md:14px;--radius-card:22px;--radius-field:14px;--radius-pill:999px;
  --texture:none;
}
:root,[data-look="paper"]{
  --bg-canvas:var(--p-paper-100);--bg-raised:var(--p-paper-50);--bg-sunken:var(--p-paper-200);--bg-inverse:var(--p-ink-900);
  --ink:var(--p-ink-900);--ink-muted:var(--p-ink-600);--ink-soft:var(--p-ink-400);--ink-inverse:var(--p-paper-100);
  --line:var(--p-paper-300);--line-strong:var(--p-paper-400);
  --accent:var(--p-coral-500);--accent-hover:var(--p-coral-600);--accent-pressed:var(--p-coral-700);--accent-disabled:var(--p-coral-200);
  --accent-ink:var(--p-ink-900);--accent-text:var(--p-coral-800);
  --danger:var(--p-rose-600);--danger-ink:#FFFFFF;
  --focus-ring:0 0 0 2px var(--bg-canvas),0 0 0 4px var(--p-coral-500);

  --intake-on-track:var(--p-green-600);--intake-partial:var(--p-gold-600);--intake-low:var(--p-rose-600);
  --intake-on-track-wash:#DCEBDF;--intake-partial-wash:#F2E6C4;--intake-low-wash:#F4D8DB;

  --due-bg:var(--p-paper-50);--due-ink:var(--p-ink-900);--due-ink-muted:var(--p-ink-600);--due-accent-text:var(--p-coral-800);
  --due-edge:inset 0 0 0 1.5px var(--p-coral-500);--due-glow:0 22px 44px -22px rgba(224,103,63,.55);
  --due-cta-bg:var(--p-coral-500);--due-cta-ink:var(--p-ink-900);--due-secondary-edge:var(--p-paper-400);
  --now-line:var(--p-coral-500);--sun-halo:rgba(248,169,89,.42);

  --nav-bg:var(--p-paper-50);--nav-edge:inset 0 0 0 1px var(--p-paper-300);--nav-shadow:0 12px 28px -14px rgba(80,50,25,.4);
  --nav-ink:var(--p-ink-600);--nav-active-bg:var(--p-ink-900);--nav-active-ink:var(--p-paper-100);--nav-active-glow:0 8px 18px -8px rgba(224,103,63,.7);

  --shadow-card:0 1px 2px rgba(80,50,25,.08),0 16px 32px -20px rgba(80,50,25,.3);
  --shadow-float:0 20px 48px -18px rgba(60,40,20,.45);
  --scrim:rgba(28,25,22,.4);
  --chart-band:rgba(224,103,63,.14);
}
[data-look="paper"][data-theme="dark"],[data-theme="paper-dark"]{
  --bg-canvas:#0B0A09;--bg-raised:#1F1D1A;--bg-sunken:#171513;--bg-inverse:#F3EDE3;
  --ink:#F3EDE3;--ink-muted:#B9AD9F;--ink-soft:#766A5C;--ink-inverse:#0B0A09;
  --line:#2A2622;--line-strong:#3A352F;
  --accent:#E0673F;--accent-hover:#E8774F;--accent-pressed:#C9532E;--accent-disabled:#5A2E20;
  --accent-ink:#121110;--accent-text:#F08A64;
  --danger:#E8697A;--danger-ink:#121110;
  --intake-on-track:#5DB872;--intake-partial:#D9A520;--intake-low:#E8697A;
  --intake-on-track-wash:#1E3324;--intake-partial-wash:#3A3015;--intake-low-wash:#3A1E22;
  --due-bg:#1F1D1A;--due-ink:#F3EDE3;--due-ink-muted:#B9AD9F;--due-accent-text:#F08A64;
  --due-edge:inset 0 0 0 1.5px #E0673F;--due-glow:0 0 44px -10px rgba(224,103,63,.45);
  --due-cta-bg:#E0673F;--due-cta-ink:#121110;--due-secondary-edge:#4A433C;
  --sun-halo:rgba(248,169,89,.32);
  --nav-bg:#1F1D1A;--nav-edge:inset 0 0 0 1px #34302B;--nav-shadow:none;
  --nav-ink:#B9AD9F;--nav-active-bg:#F3EDE3;--nav-active-ink:#0B0A09;--nav-active-glow:0 0 22px -6px rgba(248,169,89,.55);
  --shadow-card:inset 0 0 0 1px #2E2A26;--shadow-float:inset 0 0 0 1px #34302B,0 24px 48px -16px rgba(0,0,0,.7);
  --scrim:rgba(0,0,0,.6);--chart-band:rgba(240,138,100,.2);
}

/* Look: REEL. Same semantic names as Paper; only values differ. Switch: <html data-look="reel" data-theme="light|dark"> */
/* =====================================================================
   LOOK: REEL
   ===================================================================== */
[data-look="reel"],[data-theme="reel-light"],[data-theme="reel-dark"]{
  --font-display:'Newsreader',Georgia,serif;
  --font-body:'Barlow Semi Condensed',system-ui,sans-serif;
  --font-numeric:'Barlow Semi Condensed',system-ui,sans-serif;
  --font-caption:'Barlow Semi Condensed',system-ui,sans-serif;
  --display-weight:400;--display-style:normal;--due-title-style:italic;
  --numeric-weight:600;--numeric-tracking:-.01em;
  --caption-size:11px;--caption-weight:600;--caption-tracking:.22em;--caption-transform:uppercase;
  --label-transform:uppercase;--label-tracking:.14em;--label-size:13px;
  --type-hero:86px;--type-display-lg:40px;--type-display-md:26px;--type-title:19px;--type-body:16px;--type-small:14px;--type-micro:11px;
  --radius-sm:10px;--radius-md:16px;--radius-card:24px;--radius-field:999px;--radius-pill:999px;
  --texture:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .25 0 0 0 0 .14 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --bg-canvas:#F3EDE3;--bg-raised:#FFFAF2;--bg-sunken:#E9E1D4;--bg-inverse:#121110;
  --ink:#121110;--ink-muted:#6E655B;--ink-soft:#8C8378;--ink-inverse:#F3EDE3;
  --line:#DDD3C4;--line-strong:#C9BBA9;
  --accent:#E0673F;--accent-hover:#D65C34;--accent-pressed:#C9532E;--accent-disabled:#F2C6B4;
  --accent-ink:#121110;--accent-text:#B44A26;
  --danger:#C23A4B;--danger-ink:#FFFFFF;
  --focus-ring:0 0 0 2px var(--bg-canvas),0 0 0 4px #E0673F;
  --intake-on-track:#3D9656;--intake-partial:#C4910F;--intake-low:#C23A4B;
  --intake-on-track-wash:#D6EEDC;--intake-partial-wash:#F3E3B0;--intake-low-wash:#F4D8DB;

  --due-bg:radial-gradient(120% 90% at 0% 0%,rgba(248,169,89,.32),rgba(248,169,89,0) 55%),#1F1D1A;
  --due-ink:#F3EDE3;--due-ink-muted:#B9AD9F;--due-accent-text:#F4A07E;
  --due-edge:inset 0 0 0 0 transparent;--due-glow:0 22px 44px -22px rgba(18,17,16,.7);
  --due-cta-bg:#E0673F;--due-cta-ink:#121110;--due-secondary-edge:rgba(243,237,227,.35);
  --now-line:#E0673F;--sun-halo:rgba(248,169,89,.42);

  --nav-bg:#121110;--nav-edge:inset 0 0 0 0 transparent;--nav-shadow:0 14px 30px -14px rgba(0,0,0,.6);
  --nav-ink:#A99E91;--nav-active-bg:var(--sun-wide);--nav-active-ink:#121110;--nav-active-glow:0 0 22px -4px rgba(248,169,89,.6);

  --shadow-card:inset 0 0 0 1px #DDD3C4;
  --shadow-float:0 20px 48px -18px rgba(18,17,16,.5);
  --scrim:rgba(18,17,16,.45);
  --chart-band:rgba(224,103,63,.16);
}
[data-look="reel"][data-theme="dark"],[data-theme="reel-dark"]{
  --texture:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .92 0 0 0 0 .8 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --bg-canvas:#0E0D0B;--bg-raised:#1F1D1A;--bg-sunken:#171513;--bg-inverse:#F3EDE3;
  --ink:#F3EDE3;--ink-muted:#A99E91;--ink-soft:#6E655B;--ink-inverse:#121110;
  --line:#2A2622;--line-strong:#3A352F;
  --accent:#E0673F;--accent-hover:#E8774F;--accent-pressed:#C9532E;--accent-disabled:#5A2E20;
  --accent-ink:#121110;--accent-text:#F08A64;
  --danger:#E8697A;--danger-ink:#121110;
  --intake-on-track:#5DB872;--intake-partial:#D9A520;--intake-low:#E8697A;
  --intake-on-track-wash:#1E3324;--intake-partial-wash:#3A3015;--intake-low-wash:#3A1E22;
  --due-bg:radial-gradient(120% 100% at 0% 0%,#F29A6E,#E0673F 60%);
  --due-ink:#121110;--due-ink-muted:#2A1A12;--due-accent-text:#121110;
  --due-edge:inset 0 0 0 0 transparent;--due-glow:0 0 56px -12px rgba(224,103,63,.6);
  --due-cta-bg:#121110;--due-cta-ink:#F3EDE3;--due-secondary-edge:rgba(18,17,16,.5);
  --sun-halo:rgba(248,169,89,.32);
  --nav-bg:#1F1D1A;--nav-edge:inset 0 0 0 1px #34302B;--nav-shadow:0 14px 30px -14px rgba(0,0,0,.7);
  --nav-ink:#A99E91;
  --shadow-card:inset 0 0 0 1px #2A2622;--shadow-float:inset 0 0 0 1px #34302B,0 24px 48px -16px rgba(0,0,0,.7);
  --scrim:rgba(0,0,0,.6);--chart-band:rgba(240,138,100,.2);
}


/* Screen-level tokens (eyebrow, section heading, hero CTA, nav dot, weigh-in date, chart band) from the approved 5a/5b mocks. Per-Look. */
/* ---------- screen-level tokens (from the approved 5a / 5b mocks) ---------- */
:root,[data-look="paper"]{
  --eyebrow-size:15px;--eyebrow-weight:700;--eyebrow-tracking:0;--eyebrow-transform:none;--eyebrow-ink:var(--p-ink-700);
  --due-label-size:13px;--due-label-tracking:0;
  --section-font:var(--font-display);--section-size:18px;--section-weight:400;--section-tracking:0;--section-transform:none;--section-ink:var(--ink);
  --horizon:rgba(28,25,22,.35);
  --nav-dot:radial-gradient(circle at 40% 38%,#ffd392,#f8a959 45%,#e0673f);--nav-label-size:12px;--nav-label-weight:700;
  --cta-hero-bg:var(--accent);--cta-hero-ink:var(--accent-ink);--cta-hero-glow:none;--cta-hero-size:16px;--cta-hero-tracking:0;--cta-hero-transform:none;
  --chip-bg:var(--bg-sunken);
  --weighin-date-font:var(--font-display);--weighin-date-size:22px;--weighin-date-weight:400;
  --band-flat:1;--band-sky:0;
}
[data-look="paper"][data-theme="dark"],[data-theme="paper-dark"]{--eyebrow-ink:#CFC4B6;--horizon:rgba(243,237,227,.35)}
[data-look="reel"],[data-theme="reel-light"],[data-theme="reel-dark"]{
  --eyebrow-size:12px;--eyebrow-weight:600;--eyebrow-tracking:.22em;--eyebrow-transform:uppercase;--eyebrow-ink:var(--ink-muted);
  --due-label-size:11px;--due-label-tracking:.18em;
  --section-font:var(--font-caption);--section-size:11px;--section-weight:600;--section-tracking:.22em;--section-transform:uppercase;--section-ink:var(--ink-muted);
  --horizon:rgba(18,17,16,.35);
  --nav-dot:transparent;--nav-label-size:11px;--nav-label-weight:600;
  --cta-hero-bg:var(--sun-wide);--cta-hero-ink:#121110;--cta-hero-glow:0 0 22px -6px rgba(248,169,89,.6);--cta-hero-size:13px;--cta-hero-tracking:.16em;--cta-hero-transform:uppercase;
  --chip-bg:var(--bg-sunken);
  --weighin-date-font:var(--font-numeric);--weighin-date-size:30px;--weighin-date-weight:600;
  --band-flat:0;--band-sky:1;
}
[data-look="reel"][data-theme="dark"],[data-theme="reel-dark"]{--eyebrow-ink:#CFC4B6;--horizon:rgba(243,237,227,.35)}


/* Preview ground: canvas, texture and body face follow the active Look. */
body{background-color:var(--bg-canvas);background-image:var(--texture);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
/* Rise website: site tokens. Moved here unchanged from the design handoff's site.css,
   so the hex and px values the design sets live in a token file. Everything else is
   an existing Rise token (tokens.css). */

.rs-site{
  --container-site:1280px;
  --gutter-site:clamp(20px,5cqw,64px);
  --space-section:clamp(72px,9cqw,128px);
  --type-site-wordmark:clamp(72px,8cqw,116px);
  --type-site-hero:clamp(36px,3.7cqw,52px);
  --type-site-h2:clamp(30px,3.4cqw,48px);
  --type-site-lede:clamp(18px,1.5cqw,21px);
  --hero-pad:56px;
  --sun-get:clamp(120px,16cqw,220px);
  --frame-bezel:10px;--frame-radius:54px;--frame-ink:#121110;
  --window-radius:14px;--window-bar:36px;
  --z-window:.4;--z-hero-phone:.4;--z-phone:.62;--z-phone-live:.78;--z-phone-pair:.5;--z-look:.54;
  --dur-reveal:700ms;--dur-sunrise:1600ms;--dur-look-fade:900ms;--stagger-site:90ms;
  --ease-site:cubic-bezier(.16,1,.3,1);
}
.rs-site,[data-look="paper"]{--cta-hero-wash:var(--accent-hover);--cta-hero-bg-pressed:var(--accent-pressed)}
[data-look="reel"]{
  --cta-hero-wash:rgba(18,17,16,.09);
  --cta-hero-bg-pressed:linear-gradient(rgba(18,17,16,.16),rgba(18,17,16,.16)),var(--sun-wide);
}

/* screenshot scale, stepped by container width */
@container (max-width:1279px){.rs-page{--z-window:.33;--z-hero-phone:.33;--z-look:.44}}
@container (max-width:1060px){.rs-page{--z-window:.27;--z-hero-phone:.27;--z-look:.38;--z-phone-pair:.42;--z-phone-live:.7}}
@container (max-width:900px){.rs-page{--z-window:.46;--z-hero-phone:.4;--z-phone:.7;--z-phone-live:.8;--z-phone-pair:.5;--z-look:.5}}
@container (max-width:760px){.rs-page{--z-window:.37;--z-hero-phone:.34}}
@container (max-width:600px){.rs-page{--z-window:.29;--z-hero-phone:.3;--z-look:.44}}
@container (max-width:480px){.rs-page{--z-window:.22;--z-hero-phone:.26;--z-phone-pair:.36;--z-look:.36}}
@container (max-width:360px){.rs-page{--z-window:.19;--z-hero-phone:.22;--z-phone:.62;--z-phone-live:.68;--z-phone-pair:.32;--z-look:.28}}
/* The document floor, from the design: the canvas page's body{margin:0}. The
   rest of the body rule (the Look's canvas, texture and face) is the "preview
   ground" rule at the end of tokens.css. */
body{margin:0}

/* The Look switch's options are drawn 40px tall inside the Segmented control's
   48px track. An invisible ::after makes each target the 44px minimum
   (--icon-button) without changing what is drawn. */
[data-control="look"] > [role="radio"]{position:relative}
[data-control="look"] > [role="radio"]::after{content:"";position:absolute;inset:calc((var(--icon-button) - 100%) / -2) 0}
/* Rise website: fonts, device frames, states and motion. Ported from the design handoff's
   site.css as exported: only the font paths changed, and the site tokens moved to
   site-tokens.css. Colour, type and spacing come from the Rise tokens (tokens.css). */

/* ---------- fonts: the bundled faces only ---------- */
@font-face{font-family:'Fraunces';src:url("/assets/fonts/fraunces-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url("/assets/fonts/fraunces-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'Atkinson Next';src:url("/assets/fonts/atkinson-next.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url("/assets/fonts/newsreader-normal.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url("/assets/fonts/newsreader-italic.woff2") format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:'Barlow Semi Condensed';src:url("/assets/fonts/barlow-semi-condensed-500.woff2") format("woff2");font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Semi Condensed';src:url("/assets/fonts/barlow-semi-condensed-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Semi Condensed';src:url("/assets/fonts/barlow-semi-condensed-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------- the site container (its tokens are in site-tokens.css) ---------- */
.rs-site{
  container-type:inline-size;
  overflow-x:clip;
}
.rs-site section[id]{scroll-margin-top:72px}

/* ---------- Look and theme changes: one view transition for the whole page ---------- */
::view-transition-old(root),::view-transition-new(root){animation-duration:900ms;animation-timing-function:cubic-bezier(.65,0,.35,1)}
html.rs-wipe::view-transition-old(root),html.rs-wipe::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.rs-wipe::view-transition-old(root){z-index:0}
html.rs-wipe::view-transition-new(root){z-index:1}

/* ---------- layout helpers ---------- */
.rs-wrap{box-sizing:border-box;max-width:var(--container-site);margin-inline:auto;padding-inline:var(--gutter-site)}
.rs-label{font-family:var(--font-caption);font-size:var(--label-size);font-weight:600;letter-spacing:var(--label-tracking);text-transform:var(--label-transform)}
.rs-step::before{content:"";display:none;position:absolute;left:calc(var(--gutter-site) * -1);right:calc(var(--gutter-site) * -1);top:10px;height:1px;background:linear-gradient(90deg,transparent,var(--horizon) 12%,var(--horizon) 88%,transparent)}
.rs-scroll-top{position:absolute;left:0;right:0;top:0}
.rs-scroll-end{position:absolute;left:0;right:0;bottom:0}
@container (max-width:900px){
  .rs-stack-sm{grid-template-columns:minmax(0,1fr)!important}
  .rs-two-sm{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .rs-first-sm{order:-1}
  .rs-hide-sm{display:none!important}
  .rs-how-horizon{display:none}
  .rs-step::before{display:block}
}

/* ---------- header: sticks, slims, and carries the sun along the horizon as the page scrolls ---------- */
.rs-header{position:sticky;top:0;z-index:40;transition:background-color 400ms var(--ease-site),transform 500ms var(--ease-site)}
.rs-header.is-stuck{background-color:var(--bg-canvas);background-image:var(--texture)}
.rs-header.is-away{transform:translateY(-100%)}
.rs-brand{display:inline-flex;align-items:center;min-height:44px;border-radius:var(--radius-pill);color:var(--ink);text-decoration:none;outline:none}
.rs-brand:focus-visible{box-shadow:var(--focus-ring)}
.rs-progress-track{position:relative;height:0}
.rs-header-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding-block:16px;transition:padding 400ms var(--ease-site)}
.rs-header.is-stuck .rs-header-inner{padding-block:6px}
.rs-progress{position:relative;height:1px;background:linear-gradient(90deg,transparent,var(--horizon) 12%,var(--horizon) 88%,transparent)}
.rs-progress-sun{position:absolute;top:-7px;left:calc(var(--gutter-site) + var(--scroll,0) * (100% - var(--gutter-site) * 2 - 14px));width:14px;height:14px;border-radius:50%;background:var(--sun);box-shadow:0 0 12px 3px var(--sun-halo)}

/* ---------- device frames ---------- */
.rs-phone{zoom:var(--z-phone);flex:none;width:390px;padding:var(--frame-bezel);border-radius:var(--frame-radius);background:var(--frame-ink);box-shadow:0 0 0 1px var(--line-strong),var(--shadow-float);pointer-events:none}
.rs-phone.is-hero{zoom:var(--z-hero-phone)}
.rs-phone.is-pair{zoom:var(--z-phone-pair)}
.rs-phone.is-look{zoom:var(--z-look)}
.rs-phone.is-live{zoom:var(--z-phone-live);pointer-events:auto}
.rs-phone-screen{position:relative;width:390px;height:844px;overflow:hidden;border-radius:calc(var(--frame-radius) - var(--frame-bezel))}
.rs-window{zoom:var(--z-window);flex:none;width:1440px;overflow:hidden;border-radius:var(--window-radius);background:var(--bg-raised);box-shadow:0 0 0 1px var(--line-strong),var(--shadow-float);pointer-events:none}
.rs-window-bar{height:var(--window-bar);display:flex;align-items:center;gap:8px;padding:0 14px;background:var(--bg-sunken)}
.rs-window-bar span{width:12px;height:12px;border-radius:50%;background:var(--line-strong)}
.rs-window-screen{position:relative;width:1440px;height:900px;overflow:hidden}

/* ---------- CTAs ---------- */
.rs-cta{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--button-h);padding:0 24px;border-radius:var(--radius-pill);font-family:var(--font-body);font-size:16px;font-weight:700;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;outline:none;transition:transform var(--dur-instant) var(--ease-out),background-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.rs-cta-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--cta-hero-bg);color:var(--cta-hero-ink);box-shadow:var(--cta-hero-glow);font-size:var(--cta-hero-size);letter-spacing:var(--cta-hero-tracking);text-transform:var(--cta-hero-transform)}
/* the hover tone wells up from where the pointer came in */
.rs-cta-hero::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--cta-hero-wash);clip-path:circle(0 at var(--mx,50%) var(--my,50%));transition:clip-path 550ms var(--ease-site)}
.rs-cta-secondary{background-color:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.rs-cta-hero.is-hover::before{clip-path:circle(150% at 50% 50%)}
.rs-cta-secondary.is-hover{background-color:var(--bg-sunken)}
@media (hover:hover) and (pointer:fine){
  .rs-cta-hero:hover::before{clip-path:circle(150% at var(--mx,50%) var(--my,50%))}
  .rs-cta-secondary:hover{background-color:var(--bg-sunken)}
  .rs-navlink:hover{color:var(--ink)}
  .rs-link:hover{text-decoration-thickness:2px}
  .rs-look:hover{box-shadow:inset 0 0 0 1.5px var(--line-strong)}
  .rs-theme:hover{box-shadow:inset 0 0 0 1.5px var(--ink-soft)}
}
.rs-cta:active,.rs-cta.is-pressed{transform:scale(.97)}
.rs-cta-hero:active,.rs-cta-hero.is-pressed{background:var(--cta-hero-bg-pressed)}
.rs-cta-secondary:active,.rs-cta-secondary.is-pressed{background-color:var(--bg-sunken);box-shadow:inset 0 0 0 1.5px var(--ink-soft)}
.rs-cta-hero:focus-visible,.rs-cta-hero.is-focus{box-shadow:var(--focus-ring)}
.rs-cta-secondary:focus-visible,.rs-cta-secondary.is-focus{box-shadow:inset 0 0 0 1.5px var(--line-strong),var(--focus-ring)}

@container (max-width:480px){.rs-cta{padding:0 17px}}

.rs-cta-due{background:var(--due-cta-bg);color:var(--due-cta-ink)}
.rs-cta-due.is-hover{box-shadow:inset 0 0 0 999px rgba(140,130,120,.16)}
@media (hover:hover) and (pointer:fine){.rs-cta-due:hover{box-shadow:inset 0 0 0 999px rgba(140,130,120,.16)}}
.rs-cta-due:active,.rs-cta-due.is-pressed{box-shadow:inset 0 0 0 999px rgba(140,130,120,.28)}
.rs-cta-due:focus-visible,.rs-cta-due.is-focus{box-shadow:0 0 0 2px var(--due-ink)}
.rs-ico{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rs-glyph{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background-color:var(--bg-sunken);color:var(--ink)}
.rs-step-chip{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:var(--radius-pill);box-shadow:inset 0 0 0 1.5px var(--due-secondary-edge);font-size:var(--type-small);font-weight:700;white-space:nowrap}

/* ---------- links ---------- */
.rs-navlink{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--radius-pill);color:var(--ink-muted);text-decoration:none;outline:none;font-family:var(--font-caption);font-size:var(--label-size);font-weight:600;letter-spacing:var(--label-tracking);text-transform:var(--label-transform);transition:color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.rs-navlink.is-hover{color:var(--ink)}
.rs-navlink:active,.rs-navlink.is-pressed{color:var(--ink);background-color:var(--bg-sunken)}
.rs-navlink:focus-visible,.rs-navlink.is-focus{box-shadow:var(--focus-ring)}
.rs-link{display:inline-flex;align-items:center;min-height:44px;border-radius:var(--radius-sm);color:var(--accent-text);font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;outline:none;transition:background-color var(--dur-fast) var(--ease-out)}
.rs-link.is-hover{text-decoration-thickness:2px}
.rs-link:active,.rs-link.is-pressed{text-decoration-thickness:2px;background-color:var(--bg-sunken)}
.rs-link:focus-visible,.rs-link.is-focus{box-shadow:var(--focus-ring)}

/* ---------- Look picker tile (a transparent button over the preview) ---------- */
.rs-look{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;border-radius:28px;background:transparent;cursor:pointer;outline:none;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-instant) var(--ease-out)}
.rs-look.is-hover{box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.rs-look:active,.rs-look.is-pressed{transform:scale(.98);box-shadow:inset 0 0 0 1.5px var(--ink-soft)}
.rs-look[aria-pressed="true"],.rs-look.is-selected{box-shadow:inset 0 0 0 2px var(--ink)}
.rs-look:focus-visible,.rs-look.is-focus{box-shadow:inset 0 0 0 1px var(--line),var(--focus-ring)}
.rs-look[aria-pressed="true"]:focus-visible{box-shadow:inset 0 0 0 2px var(--ink),var(--focus-ring)}

/* ---------- theme switch: the sun crosses the pill and becomes a crescent ---------- */
.rs-theme{position:relative;flex:none;width:68px;height:var(--icon-button);padding:0;border:0;border-radius:var(--radius-pill);color:var(--ink);background-color:var(--bg-sunken);box-shadow:inset 0 0 0 1.5px var(--line-strong);cursor:pointer;outline:none;transition:transform var(--dur-instant) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.rs-theme-knob{position:absolute;left:8px;top:50%;width:28px;height:28px;margin-top:-14px;display:grid;place-items:center;transition:transform var(--dur-slow) var(--ease-spring)}
.rs-theme[aria-checked="true"] .rs-theme-knob{transform:translateX(24px)}
.rs-theme-sun,.rs-theme-moon{grid-area:1/1;transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-slow) var(--ease-spring)}
.rs-theme-sun{width:22px;height:22px;border-radius:50%;background:var(--sun);box-shadow:0 0 12px 2px var(--sun-halo)}
.rs-theme-moon{width:22px;height:22px;fill:currentColor;opacity:0;transform:rotate(-70deg) scale(.5)}
.rs-theme[aria-checked="true"] .rs-theme-sun{opacity:0;transform:scale(.4)}
.rs-theme[aria-checked="true"] .rs-theme-moon{opacity:1;transform:rotate(-12deg)}
.rs-theme-star{position:absolute;border-radius:50%;background-color:var(--ink-muted);opacity:0;transform:scale(0);transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-slow) var(--ease-spring)}
.rs-theme-star.is-a{left:15px;top:12px;width:4px;height:4px}
.rs-theme-star.is-b{left:25px;top:27px;width:3px;height:3px}
.rs-theme[aria-checked="true"] .rs-theme-star{opacity:1;transform:none}
.rs-theme.is-hover{box-shadow:inset 0 0 0 1.5px var(--ink-soft)}
.rs-theme:active,.rs-theme.is-pressed{transform:scale(.97)}
.rs-theme:focus-visible,.rs-theme.is-focus{box-shadow:inset 0 0 0 1.5px var(--line-strong),var(--focus-ring)}

/* ---------- "This device" tag ---------- */
.rs-tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--radius-pill);background-color:var(--chip-bg);color:var(--ink);font-family:var(--font-caption);font-size:var(--type-micro);font-weight:700;letter-spacing:var(--label-tracking);text-transform:var(--label-transform);white-space:nowrap}

/* ---------- motion ----------
   Reveals only hide things once the page script has added .rs-js, so with no script,
   or with reduced motion, everything is simply there. */
.rs-js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity var(--dur-reveal) var(--ease-site),transform var(--dur-reveal) var(--ease-site)}
.rs-js [data-reveal="phone"]{transform:translateY(48px) rotate(2deg) scale(.97);transition:opacity 900ms var(--ease-site),transform 1200ms var(--ease-spring)}
.rs-js [data-reveal="pop"]{transform:scale(.4);transition:opacity 300ms var(--ease-site),transform var(--dur-slow) var(--ease-spring)}
.rs-js [data-reveal="draw"]{opacity:1;transform:none;background-repeat:no-repeat!important;background-size:0% 100%!important;transition:background-size 900ms var(--ease-site)}
.rs-js [data-reveal="rise"]{opacity:1;transform:none;overflow:clip;overflow-clip-margin:.2em}
.rs-js [data-reveal="rise"]>span{display:inline-block;transform:translateY(112%) rotate(3deg);transform-origin:0 100%;transition:transform 1100ms var(--ease-site);transition-delay:calc(var(--i,0) * var(--stagger-site))}
.rs-js [data-reveal="words"]{opacity:1;transform:none}
.rs-words .rs-w{display:inline-block;overflow:clip;overflow-clip-margin:.2em;padding:.08em .08em .16em;margin:-.08em -.08em -.16em;vertical-align:top}
.rs-js .rs-words .rs-w>span{display:inline-block;transform:translateY(112%) rotate(3deg);transform-origin:0 100%;transition:transform 1100ms var(--ease-site);transition-delay:calc(180ms + var(--i,0) * 55ms)}
.rs-js .rs-words.is-in .rs-w>span{transform:none}
.rs-js [data-reveal]:not([data-reveal="rise"]):not([data-reveal="words"]){transition-delay:calc(var(--i,0) * var(--stagger-site))}
.rs-js [data-reveal].is-in{opacity:1;transform:none}
.rs-js [data-reveal="draw"].is-in{background-size:100% 100%!important}
.rs-js [data-reveal="rise"].is-in>span{transform:none}

/* the hero sun: rises once on load, sets when the page goes dark, rises again for light */
@keyframes rs-sunrise{from{transform:translateY(70%)}}
.rs-hero-sun{width:100%;height:100%;border-radius:50%;background:var(--sun);transition:transform var(--dur-sunrise) var(--ease-site);animation:rs-sunrise var(--dur-sunrise) var(--ease-site) 300ms both}
[data-theme="dark"] .rs-hero-sun{transform:translateY(27%)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* the hero devices lean a little towards the pointer */
.rs-tilt{transform:perspective(1400px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transition:transform 900ms var(--ease-site)}

/* scroll-linked: phones drift, and the "No" lines come into focus at the middle of the screen */
.rs-drift{transform:translateY(var(--shift,0px));will-change:transform}
.rs-focus{opacity:var(--o,1);transform:translateX(calc((1 - var(--o,1)) * -20px));transition:opacity 300ms linear,transform 300ms linear}

@media (prefers-reduced-motion:reduce){
  .rs-site,.rs-site *{animation:none!important;transition:none!important}
}