/* TOVELU — sales page, Material 3 theme (4 August 2026).
 *
 * The whole product now speaks one visual language: the member app, the survey
 * funnel, both application forms and both program pages are Material 3. The
 * sales page was the last surface still wearing the old green-and-ink styling,
 * which meant the very first screen a cold visitor saw looked like a different
 * company from the app it was selling — and the app previews on it had to be
 * hand-drawn approximations rather than the real thing.
 *
 * Same standalone-copy rule as apply-m3.css and program-m3.css: the marketing
 * site is static HTML on its own Vercel project and cannot import from the
 * Next.js bundle, so the tokens below are copied verbatim from
 * webapp/app/app/m3.css. If those change, change these too.
 *
 * Two scopes live in this file and they must not be confused:
 *
 *   .m3s   the sales page itself (marketing layout, type, CTAs)
 *   .ui    the app canvas inside a phone frame — rules copied verbatim from
 *          m3.css with `.m3` rewritten to `.ui`, so a preview is literally the
 *          app's own CSS rather than a lookalike.
 *
 * Page classes are deliberately named apart from app classes (.panel not
 * .card, .cta not .btn, .pill not .chip) so nothing can cross the boundary.
 *
 * The app renders at a 16px root, and every `.ui` rule below is in rem, so this
 * page must not change html { font-size }.
 */

/* ====================================================== tokens (from m3.css) */

.m3s {
  --primary: #1F6F4A; --on-primary: #FFFFFF;
  --primary-container: #9BF3BE; --on-primary-container: #00210F;
  --secondary-container: #CFE9D7; --on-secondary-container: #0A1F13;
  --tertiary-container: #BEEAF8; --on-tertiary-container: #001F27;
  --error: #BA1A1A; --error-container: #FFDAD6; --on-error-container: #410002;
  --surface: #F5FAF5; --s-lowest: #FFFFFF; --s-low: #EFF5EF;
  --s-cont: #E9EFE9; --s-high: #E3E9E3;
  --on-surface: #171D18; --on-surface-variant: #3F4A42;
  --outline: #6F7A72; --outline-variant: #BFC9C0;
  --vibrant: #CDEEDA; --on-vibrant: #00210F;
  --ember-container: #FFDDB3; --on-ember-container: #2A1800;

  /* Deep brand panel for the closing block — the one place the page goes dark
     on purpose, in both themes. */
  --ink: #0E1C14; --on-ink: #E6F2EA;

  /* Call-to-action pair, deliberately NOT --primary/--on-primary. M3 flips a
     filled button in dark mode to a pale green surface with near-black label;
     on a page whose entire job is getting one button pressed that reads as
     disabled. Every CTA is brand green with a WHITE label in both themes. */
  --cta: #1F6F4A; --on-cta: #FFFFFF;

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px;
  --r-xxl: 28px; --r-3xl: 36px; --r-full: 999px;

  --e1: 0 1px 2px rgba(0,0,0,.10), 0 1px 3px 1px rgba(0,0,0,.07);
  --e2: 0 2px 6px 2px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.10);
  --e3: 0 4px 8px 3px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.12);
  --e4: 0 8px 24px 6px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.10);

  --font: "Roboto Flex", Roboto, -apple-system, "Segoe UI", sans-serif;
  --spring: cubic-bezier(.2,.8,.2,1);

  --gut: clamp(1.125rem, 5vw, 2rem);
  --sec-y: clamp(3.5rem, 11vw, 7rem);
}

/* The app follows the device theme, so the page that sells it does too. */
@media (prefers-color-scheme: dark) {
  .m3s {
    --primary: #80D69F; --on-primary: #00391F;
    --primary-container: #005230; --on-primary-container: #9BF3BE;
    --secondary-container: #364B3D; --on-secondary-container: #CFE9D7;
    --tertiary-container: #224C58; --on-tertiary-container: #BEEAF8;
    --error: #FFB4AB; --error-container: #93000A; --on-error-container: #FFDAD6;
    --surface: #0E140F; --s-lowest: #090E0A; --s-low: #161D18;
    --s-cont: #1A211C; --s-high: #242B26;
    --on-surface: #DFE4DE; --on-surface-variant: #BFC9C0;
    --outline: #89938B; --outline-variant: #3F4A42;
    --vibrant: #053E24; --on-vibrant: #9BF3BE;
    --ember-container: #5C3D00; --on-ember-container: #FFDDB3;
    --ink: #05130B; --on-ink: #DFE4DE;
    --cta: #24784E; --on-cta: #FFFFFF;
    --e1: 0 1px 2px rgba(0,0,0,.5), 0 1px 3px 1px rgba(0,0,0,.35);
    --e2: 0 2px 6px 2px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.5);
    --e3: 0 4px 8px 3px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.5);
    --e4: 0 8px 24px 6px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.5);
  }
}

/* ================================================================== base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body.m3s {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* An email address or a long URL is the one thing that can force a
     horizontal scrollbar on a 320px phone, and 90% of this traffic is mobile. */
  overflow-wrap: break-word;
}

.m3s h1, .m3s h2, .m3s h3, .m3s h4, .m3s p, .m3s ul, .m3s ol, .m3s figure { margin: 0; }
.m3s ul, .m3s ol { padding: 0; list-style: none; }
.m3s img, .m3s svg { max-width: 100%; }
/* `:not(.cta)` is load-bearing: as a bare `.m3s a` this reset (0,1,1) would
   beat every .cta colour rule (0,1,0) and every button would inherit the
   surrounding text colour instead of its own label colour. */
.m3s a:not(.cta) { color: inherit; text-decoration: none; }
.m3s :focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: var(--r-sm); }
.m3s b, .m3s strong { font-weight: 600; }

.wrap { width: 100%; max-width: 71rem; margin: 0 auto; padding: 0 var(--gut); }
.narrow { max-width: 46rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Reveal-on-scroll. Armed by the inline <script> that puts .js-reveal on
   <html> before first paint — with scripting off the rule never applies and
   the page renders complete rather than blank. */
.js-reveal .reveal { opacity: 0; transform: translateY(1rem); }
.js-reveal .reveal.in {
  opacity: 1; transform: none;
  transition: opacity .55s var(--spring), transform .55s var(--spring);
}

/* ============================================================== buttons */

.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.25rem; padding: 0 1.75rem; border: 0; border-radius: var(--r-full);
  background: var(--cta); color: var(--on-cta);
  font-family: var(--font); font-size: 1rem; font-weight: 600; line-height: 1.2;
  text-align: center; text-decoration: none; cursor: pointer; box-shadow: var(--e2);
  transition: transform .18s var(--spring), box-shadow .18s var(--spring), filter .18s;
}
.cta:hover { transform: translateY(-2px); box-shadow: var(--e3); filter: brightness(1.06); }
.cta:active { transform: translateY(0); }
.cta .arw { transition: transform .18s var(--spring); }
.cta:hover .arw { transform: translateX(3px); }

.cta-line {
  background: transparent; color: var(--on-surface);
  box-shadow: none; border: 1px solid var(--outline);
}
.cta-line:hover { background: var(--s-cont); filter: none; }

/* The closing button. It sits on --ink, which is near-black in BOTH themes, so
   its colours are fixed rather than tokenised: as var(--s-lowest) the dark
   theme painted a near-black button on a near-black panel and the only thing
   left of it was the label. */
.cta-snow { background: #FFFFFF; color: #14523A; }
.cta-snow:hover { filter: none; background: #F1F7F2; }

.cta-sm { min-height: 2.625rem; padding: 0 1.125rem; font-size: .875rem; }
.cta-block { display: flex; width: 100%; }

/* ================================================================ topbar */

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--outline-variant);
}
.topbar-in { display: flex; align-items: center; gap: 1rem; height: 3.75rem; }
.brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.0625rem; letter-spacing: -.01em; }
.brand svg { width: 1.75rem; height: 1.75rem; flex: none; border-radius: .5rem; }
.topnav { display: none; margin-left: auto; gap: 1.5rem; font-size: .875rem; font-weight: 500; color: var(--on-surface-variant); }
.topnav a:hover { color: var(--on-surface); }
.topbar .cta { margin-left: auto; }
.topnav + .cta { margin-left: 0; }

@media (min-width: 62rem) {
  .topnav { display: flex; }
}

/* ================================================================== hero */

.hero {
  position: relative; overflow: hidden;
  padding: clamp(2rem, 7vw, 4rem) 0 clamp(2.5rem, 8vw, 4.5rem);
  background:
    radial-gradient(120% 70% at 50% -10%, var(--vibrant) 0%, transparent 62%),
    var(--surface);
}
.hero-in { display: grid; gap: clamp(2rem, 7vw, 3rem); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--secondary-container); color: var(--on-secondary-container);
  padding: .4375rem .875rem; border-radius: var(--r-full);
  font-size: .75rem; font-weight: 600; letter-spacing: .02em;
}
.eyebrow .dot {
  width: .4375rem; height: .4375rem; border-radius: var(--r-full);
  background: currentColor; animation: beat 2.4s var(--spring) infinite;
}
@keyframes beat { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.hero h1 {
  margin-top: 1.25rem;
  font-size: clamp(2rem, 8.6vw, 3.75rem);
  font-weight: 700; line-height: 1.06; letter-spacing: -.032em;
}
.hero h1 em { font-style: normal; color: var(--primary); }
.hero-sub {
  margin-top: 1.125rem; max-width: 34rem;
  font-size: clamp(1rem, 3.9vw, 1.1875rem); line-height: 1.55;
  color: var(--on-surface-variant);
}
.hero-cta { display: grid; gap: .625rem; margin-top: 1.75rem; max-width: 26rem; }
.hero-note { font-size: .8125rem; color: var(--on-surface-variant); text-align: center; }

.assure { display: grid; gap: .5rem; margin-top: 1.5rem; }
.assure li { display: flex; align-items: flex-start; gap: .5rem; font-size: .875rem; font-weight: 500; }
.assure svg { width: 1.125rem; height: 1.125rem; flex: none; margin-top: .1875rem; color: var(--primary); }

.hero-stage { position: relative; display: flex; justify-content: center; }

@media (min-width: 62rem) {
  .hero-in { grid-template-columns: 1.05fr .95fr; align-items: center; }
}

/* ============================================================ fact strip */

.strip { background: var(--s-cont); border-block: 1px solid var(--outline-variant); }
.strip-in { display: grid; grid-template-columns: 1fr 1fr; }
.strip-cell { padding: 1.25rem 1rem; text-align: center; }
.strip-cell + .strip-cell { border-left: 1px solid var(--outline-variant); }
.strip-cell:nth-child(3) { border-left: 0; }
.strip-cell:nth-child(n+3) { border-top: 1px solid var(--outline-variant); }
.strip-cell b { display: block; font-size: clamp(1.375rem, 5.5vw, 1.75rem); font-weight: 700; letter-spacing: -.02em; color: var(--primary); }
.strip-cell span { display: block; margin-top: .25rem; font-size: .75rem; line-height: 1.35; color: var(--on-surface-variant); }

@media (min-width: 48rem) {
  .strip-in { grid-template-columns: repeat(4, 1fr); }
  .strip-cell:nth-child(3) { border-left: 1px solid var(--outline-variant); }
  .strip-cell:nth-child(n+3) { border-top: 0; }
}

/* ============================================================== sections */

.sect { padding: var(--sec-y) 0; }
.sect-alt { background: var(--s-low); }

.head { max-width: 44rem; }
.head-mid { margin-inline: auto; text-align: center; }
.kick {
  display: block; font-size: .75rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--primary);
}
.head h2 {
  margin-top: .75rem;
  font-size: clamp(1.625rem, 6.4vw, 2.625rem);
  font-weight: 700; line-height: 1.12; letter-spacing: -.028em;
}
.head h2 em { font-style: normal; color: var(--primary); }
.lede {
  margin-top: 1rem; font-size: clamp(.9375rem, 3.8vw, 1.0625rem); line-height: 1.6;
  color: var(--on-surface-variant);
}

.grid3 { display: grid; gap: .875rem; margin-top: clamp(2rem, 6vw, 3rem); }
@media (min-width: 56rem) { .grid3 { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }

.panel {
  background: var(--s-lowest); border: 1px solid var(--outline-variant);
  border-radius: var(--r-xxl); padding: clamp(1.375rem, 5vw, 1.875rem);
}
.sect-alt .panel { background: var(--surface); }
.panel-num {
  display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: var(--r-full); background: var(--secondary-container); color: var(--on-secondary-container);
  font-size: .8125rem; font-weight: 700; letter-spacing: .02em;
}
.panel h3 { margin-top: 1rem; font-size: 1.1875rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.panel p { margin-top: .625rem; font-size: .9375rem; line-height: 1.6; color: var(--on-surface-variant); }
.panel .was {
  display: block; margin-top: 1.125rem; padding-top: .875rem;
  border-top: 1px dashed var(--outline-variant);
  font-size: .8125rem; color: var(--on-surface-variant);
}

.punch {
  margin-top: clamp(1.75rem, 5vw, 2.5rem); max-width: 44rem;
  font-size: clamp(1.1875rem, 4.6vw, 1.625rem); font-weight: 600;
  line-height: 1.3; letter-spacing: -.022em;
}
.punch em { font-style: normal; color: var(--primary); }

/* ======================================================== phone previews */

.screens { display: grid; gap: clamp(3rem, 9vw, 4.5rem); margin-top: clamp(2.5rem, 8vw, 4rem); }
.screen-row { display: grid; gap: clamp(1.75rem, 6vw, 2.5rem); align-items: center; }

.screen-copy h3 {
  font-size: clamp(1.3125rem, 5.2vw, 1.75rem); font-weight: 700;
  letter-spacing: -.024em; line-height: 1.18; margin-top: .625rem;
}
.screen-copy > p { margin-top: .875rem; font-size: .9375rem; line-height: 1.62; color: var(--on-surface-variant); }
.screen-copy ul { margin-top: 1.25rem; display: grid; gap: .75rem; }
.screen-copy li { display: flex; gap: .625rem; font-size: .875rem; line-height: 1.5; }
.screen-copy li svg { width: 1.125rem; height: 1.125rem; flex: none; margin-top: .1875rem; color: var(--primary); }

@media (min-width: 60rem) {
  .screen-row { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 4.5rem); }
  .screen-row:nth-child(even) .screen-copy { order: 2; }
}

/* -- the handset ------------------------------------------------------- */

/* A dark bezel around a screen that plays the real app.
 *
 * The FRAME is deliberately the same size the previous sales page shipped:
 * 320 x 638 in the hero, 300 x 597 in the screen rows, on a 390px phone. That
 * size was already right — big enough to read, short enough to see whole.
 *
 * What changed is the canvas INSIDE it. The old page laid the app out at 460
 * design-px (the app's max-width) and scaled it down to fit, which put the
 * app's 14px body type on screen at about 8.5px. Laying it out at 375 — a real
 * phone's width, which is what the app actually renders at in a hand — puts the
 * same frame at a ~0.79 scale instead of ~0.60, so the type inside reads at
 * about 11px. Same frame, same proportion (2.07:1), a quarter more legible.
 *
 * 375 x 775 is that 2.07:1 proportion at the new width. If you change either
 * number, change CANVAS in sales.js with it. */
.phone {
  --ps: 1;            /* screen px / 375, set by the page script */
  --roll: 0px;        /* how far the strip travels, measured by the script */
  --rolldur: 16s;     /* loop length, derived from the distance */
  position: relative; width: 100%; max-width: min(300px, 80vw); margin-inline: auto;
  background: linear-gradient(160deg, #262b28, #0b0d0c 58%);
  border-radius: 3rem; padding: .6875rem;
  box-shadow: 0 1.75rem 3.5rem -1rem rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.06) inset;
}
/* The hero handset is the one the page opens on, so it gets the extra 20px. */
.hero-stage .phone { max-width: min(320px, 82vw); }
.phone::after {
  content: ""; position: absolute; right: -.125rem; top: 22%;
  width: .1875rem; height: 3.5rem; border-radius: .1875rem; background: #333935;
}
.phone-glass {
  position: relative; overflow: hidden; border-radius: 2.375rem;
  background: var(--vibrant); aspect-ratio: 375 / 775;
}

/* The 375-px design canvas, scaled to whatever width the frame ended up. */
.ui {
  position: absolute; top: 0; left: 0; width: 375px; height: 775px;
  transform: scale(var(--ps)); transform-origin: top left;
  display: flex; flex-direction: column;
  background: var(--vibrant); color: var(--on-surface);
  font-family: var(--font); font-size: 1rem; line-height: 1.5;
  text-align: left;
}
.ui-status {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1.5rem .125rem; font-size: .75rem; font-weight: 600; color: var(--on-vibrant);
}
.ui-batt { display: inline-flex; align-items: center; gap: .3125rem; }
.ui-batt i {
  display: block; width: 1.375rem; height: .6875rem; border-radius: .1875rem;
  border: 1.5px solid currentColor; opacity: .6; position: relative;
}
.ui-batt i::before { content: ""; position: absolute; inset: 1.5px; right: 30%; background: currentColor; border-radius: 1px; }

.ui-notch {
  position: absolute; z-index: 9; top: .5rem; left: 50%; transform: translateX(-50%);
  width: 30%; height: 1.5rem; border-radius: var(--r-full); background: #060907;
}

/* The scrolling viewport. `.roll` is the strip that moves inside it. */
.ui-window { position: relative; flex: 1; overflow: hidden; }
.ui-sheet {
  position: absolute; inset: 0; overflow: hidden;
  background: var(--s-lowest); border-radius: var(--r-3xl) var(--r-3xl) 0 0;
}
.roll { will-change: transform; padding: 1.25rem 1rem 7rem; }
.phone.go .roll { animation: phoneRoll var(--rolldur) ease-in-out infinite; }
.phone:hover .roll, .phone:active .roll { animation-play-state: paused; }
@keyframes phoneRoll {
  0%, 8%    { transform: translateY(0); }
  46%, 58%  { transform: translateY(var(--roll)); }
  96%, 100% { transform: translateY(0); }
}

/* A bottom-sheet preview: the screen behind it is dimmed and static, and the
   sheet itself is what scrolls. */
.ui-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.ui-bsheet {
  position: absolute; left: 0; right: 0; bottom: 0; height: 86%; overflow: hidden;
  background: var(--s-lowest); border-radius: var(--r-3xl) var(--r-3xl) 0 0;
}
.ui-bsheet .roll { padding: .75rem 1.25rem 1.5rem; }
.ui-behind { position: absolute; inset: 0; overflow: hidden; background: var(--s-lowest); border-radius: var(--r-3xl) var(--r-3xl) 0 0; }
.ui-behind .ui-pad { padding: 1.25rem 1rem; }

/* The floating toolbar, pinned exactly as the app pins it. */
.ui-float { position: absolute; left: .75rem; right: .75rem; bottom: 1.25rem; z-index: 5; }

/* A live badge above the hero handset, so nobody reads it as a mockup. */
.live {
  position: absolute; z-index: 4; top: -.75rem; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .4375rem; white-space: nowrap;
  background: var(--on-surface); color: var(--surface);
  padding: .375rem .75rem; border-radius: var(--r-full);
  font-size: .6875rem; font-weight: 600; box-shadow: var(--e2);
}
.live i { width: .4375rem; height: .4375rem; border-radius: var(--r-full); background: #6BE39B; animation: beat 1.8s infinite; }

.phone-cap {
  margin-top: 1rem; text-align: center; font-size: .75rem; color: var(--on-surface-variant);
}

/* Where there is room, let the preview reach a real handset's width so the
   canvas renders at roughly 1:1 and the app type inside stays legible. */
/* A landscape phone is the one case where a 638px-tall frame cannot fit at
   all. Nothing in portrait reaches this. */
@media (max-height: 32rem) {
  .phone, .hero-stage .phone { max-width: min(200px, 60vw); }
}

/* ============================== app CSS, copied from m3.css (.m3 → .ui) === */

.ui * { box-sizing: border-box; }
.ui .topbar {
  position: static; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .875rem 1.25rem .75rem; color: var(--on-vibrant); flex: none;
  background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0;
}
.ui .topbar .who { display: flex; align-items: center; gap: .625rem; min-width: 0; }
.ui .topbar .av {
  width: 2rem; height: 2rem; flex: none; border-radius: var(--r-full);
  background: var(--primary); color: var(--on-primary);
  display: grid; place-items: center; font-weight: 600; font-size: .8125rem;
}
.ui .topbar .ttl { font-size: 1rem; font-weight: 600; }
.ui .topbar .clock { font-size: .75rem; font-weight: 600; opacity: .75; flex: none; }

.ui .screen { display: grid; gap: .875rem; }
.ui .muted { color: var(--on-surface-variant); }
.ui .t-l { font-size: 1.375rem; font-weight: 600; letter-spacing: -.005em; margin: 0; }
.ui .t-m { font-size: 1rem; font-weight: 600; margin: 0; }
.ui .t-s { font-size: .875rem; font-weight: 600; margin: 0; }
.ui .b-m { font-size: .875rem; line-height: 1.45; margin: 0; }
.ui .b-s { font-size: .75rem; line-height: 1.35; margin: 0; }

.ui .card { background: var(--s-low); border-radius: var(--r-xxl); padding: 1.25rem; }
.ui .card-p { background: var(--primary-container); color: var(--on-primary-container); }
.ui .card-t { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.ui .card-e { background: var(--ember-container); color: var(--on-ember-container); }
.ui .rowflex { display: flex; align-items: center; gap: 1.25rem; }
.ui .sec { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .25rem 0; }

.ui .dayhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.ui .daychip {
  display: inline-flex; align-items: center; gap: .375rem; flex: none;
  background: var(--secondary-container); color: var(--on-secondary-container);
  padding: .375rem .75rem; border-radius: var(--r-full);
  font-size: .75rem; font-weight: 600; white-space: nowrap;
}

.ui .ring { position: relative; width: 6.25rem; height: 6.25rem; flex: none; }
.ui .ring svg { transform: rotate(-90deg); display: block; }
.ui .ring-v { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ui .ring-v b { font-size: 1.625rem; font-weight: 600; line-height: 1; }
.ui .ring-v span { font-size: .625rem; font-weight: 600; letter-spacing: .06em; }

.ui .macro { display: grid; gap: .3125rem; margin-bottom: .6875rem; }
.ui .macro:last-child { margin-bottom: 0; }
.ui .macro-t { display: flex; justify-content: space-between; font-size: .75rem; font-weight: 600; }
.ui .lin { height: .625rem; border-radius: var(--r-full); overflow: hidden; background: color-mix(in srgb, currentColor 15%, transparent); }
.ui .lin i { display: block; height: 100%; border-radius: var(--r-full); background: currentColor; }

.ui .meal {
  display: flex; align-items: center; gap: 1rem; padding: .875rem 1rem; width: 100%;
  background: var(--s-low); border: 0; border-radius: var(--r-xl); margin-bottom: .5rem;
  text-align: left; color: inherit;
}
.ui .meal:last-child { margin-bottom: 0; }
.ui .meal .ic {
  width: 2.5rem; height: 2.5rem; flex: none; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--secondary-container); color: var(--on-secondary-container);
}
.ui .meal.done .ic { background: var(--primary); color: var(--on-primary); }
.ui .meal.next { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.ui .meal.next .ic { background: var(--on-tertiary-container); color: var(--tertiary-container); }
.ui .meal .tx { flex: 1; min-width: 0; }
.ui .meal .tx p { margin: 0; overflow: hidden; text-overflow: ellipsis; }
.ui .meal.next .muted { color: inherit; opacity: .72; }

.ui .tagrow { display: flex; align-items: center; gap: .375rem; flex-wrap: wrap; }
.ui .tag {
  display: inline-flex; font-size: .625rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: .0625rem .375rem; border-radius: var(--r-full);
}
.ui .tag.em { background: var(--ember-container); color: var(--on-ember-container); }
.ui .tag.adj { background: var(--secondary-container); color: var(--on-secondary-container); }

.ui .wrow2 {
  display: flex; align-items: center; gap: .875rem; padding: .75rem .25rem;
  border-bottom: 1px solid var(--outline-variant);
}
.ui .wrow2:last-child { border-bottom: 0; }
.ui .wrow2 .ic {
  width: 2.25rem; height: 2.25rem; flex: none; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--tertiary-container); color: var(--on-tertiary-container);
}
.ui .wrow2 .lab { flex: 1; min-width: 0; }
.ui .wrow2 .lab p { margin: 0; }
.ui .stepper { display: flex; align-items: center; gap: .25rem; flex: none; }
.ui .stepper span.pm {
  width: 2rem; height: 2rem; border-radius: var(--r-full); border: 1px solid var(--outline);
  color: var(--on-surface); font-size: 1rem; display: grid; place-items: center;
}
.ui .stepper .val {
  width: 3.75rem; text-align: center; font-size: .9375rem; font-weight: 600;
  color: var(--on-surface); border-bottom: 2px solid var(--outline-variant); padding: .25rem 0;
}

.ui .seg { display: flex; gap: .25rem; background: var(--s-cont); padding: .25rem; border-radius: var(--r-full); }
.ui .seg span {
  flex: 1; text-align: center; font-size: .8125rem; font-weight: 600;
  color: var(--on-surface-variant); padding: .5rem .25rem; border-radius: var(--r-full);
}
.ui .seg span.on { background: var(--primary); color: var(--on-primary); border-radius: var(--r-md); }

.ui .optbtn {
  display: flex; align-items: center; gap: 1rem; padding: 1rem; width: 100%;
  background: var(--s-low); border-radius: var(--r-xl); margin-bottom: .5rem; color: inherit;
}
.ui .optbtn.on { background: var(--primary-container); color: var(--on-primary-container); }
.ui .optbtn .ic {
  width: 2.5rem; height: 2.5rem; flex: none; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--secondary-container); color: var(--on-secondary-container);
}
.ui .optbtn.on .ic { background: var(--on-primary-container); color: var(--primary-container); }
.ui .optbtn .tx { flex: 1; min-width: 0; }
.ui .optbtn .tx p { margin: 0; }
.ui .optbtn.on .muted { color: inherit; opacity: .75; }
.ui .optbtn .ch { color: var(--on-surface-variant); font-size: 1.125rem; }
.ui .optbtn.on .ch { color: inherit; transform: rotate(90deg); }

.ui .wrow {
  display: flex; align-items: center; gap: 1rem; padding: .875rem 1rem; background: var(--s-low);
  border-radius: var(--r-xl); margin-bottom: .5rem; width: 100%; color: inherit;
}
.ui .wrow .n {
  width: 2.25rem; height: 2.25rem; flex: none; border-radius: var(--r-full);
  display: grid; place-items: center; font-size: .8125rem; font-weight: 600;
  background: var(--s-cont); color: var(--on-surface-variant);
}
.ui .wrow.done .n { background: var(--primary); color: var(--on-primary); }
.ui .wrow.lock { opacity: .6; }
.ui .wrow .tx { flex: 1; min-width: 0; }
.ui .wrow .tx p { margin: 0; }

.ui .gcat { font-size: .75rem; font-weight: 600; color: var(--on-surface-variant); padding: .75rem .5rem .25rem; letter-spacing: .04em; }
.ui .gitem { display: flex; align-items: center; gap: .875rem; padding: .6875rem .5rem; border-radius: var(--r-md); font-size: 1rem; }
.ui .gitem .box {
  width: 1.25rem; height: 1.25rem; flex: none; border: 2px solid var(--outline); border-radius: 4px;
  display: grid; place-items: center;
}
.ui .gitem .box.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-size: .8125rem; font-weight: 700; }
.ui .gitem .box.on::after { content: "✓"; }
.ui .gitem .box.on + span { text-decoration: line-through; color: var(--on-surface-variant); }
.ui .gitem .qty { margin-left: auto; font-size: .75rem; color: var(--on-surface-variant); }
.ui .gtools { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .25rem; }
.ui .tool {
  display: inline-flex; align-items: center; gap: .375rem; height: 2.25rem; padding: 0 .875rem;
  border-radius: var(--r-full); border: 1px solid var(--outline);
  font-size: .8125rem; font-weight: 600; color: var(--on-surface);
}

.ui .chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.ui .chip {
  border: 1px solid var(--outline); color: var(--on-surface);
  border-radius: var(--r-sm); padding: .5rem .75rem; font-size: .8125rem; font-weight: 600;
}
.ui .chip.matched { background: var(--secondary-container); color: var(--on-secondary-container); border-color: transparent; }
.ui .chip.estimated { background: var(--ember-container); color: var(--on-ember-container); border-color: transparent; }

.ui .capture {
  width: 100%; border: 2px dashed var(--outline-variant); border-radius: var(--r-xl);
  background: var(--s-low); color: var(--on-surface); padding: 1.375rem 1.125rem;
  text-align: center; margin-top: .75rem;
}
.ui .capture .cam { font-size: 1.75rem; display: block; }
.ui .capture b { display: block; font-size: .9375rem; font-weight: 600; margin-top: .5rem; }
.ui .capture .hint { display: block; font-size: .78125rem; color: var(--on-surface-variant); margin-top: .1875rem; }

.ui .guide-n { display: flex; gap: .875rem; padding: .75rem .25rem; border-bottom: 1px solid var(--outline-variant); }
.ui .guide-n:last-child { border-bottom: 0; }
.ui .guide-n b {
  width: 1.5rem; height: 1.5rem; flex: none; border-radius: var(--r-full);
  background: var(--primary); color: var(--on-primary);
  display: grid; place-items: center; font-size: .75rem;
}
.ui .guide-n span { font-size: .875rem; line-height: 1.5; }

.ui .bignum { display: flex; align-items: baseline; gap: .625rem; }
.ui .bignum b { font-size: 3rem; font-weight: 600; line-height: 1; letter-spacing: -.03em; }
.ui .journeybar { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; }
.ui .jb { flex: 1; height: .5rem; border-radius: var(--r-full); overflow: hidden; }
.ui .jb i { display: block; height: 100%; border-radius: var(--r-full); }
.ui .consist { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3125rem; }
.ui .cday {
  aspect-ratio: 1; border-radius: var(--r-sm); background: var(--s-cont);
  display: grid; place-items: center; font-size: .625rem; color: var(--on-surface-variant);
}
.ui .cday.full { background: var(--primary); color: var(--on-primary); }
.ui .cday.part { background: var(--secondary-container); color: var(--on-secondary-container); }
.ui .mile { display: flex; align-items: center; gap: .875rem; padding: .75rem .5rem; width: 100%; color: inherit; border-radius: var(--r-lg); }
.ui .mile .b {
  width: 2.25rem; height: 2.25rem; flex: none; border-radius: var(--r-full);
  display: grid; place-items: center; font-size: 1rem;
  background: var(--s-cont); color: var(--on-surface-variant);
}
.ui .mile.got .b { background: var(--primary); color: var(--on-primary); }
.ui .mile .ch { margin-left: auto; color: var(--on-surface-variant); font-size: .75rem; flex: none; }

.ui .hrow { display: flex; align-items: center; gap: .75rem; padding: .75rem .25rem; border-bottom: 1px solid var(--outline-variant); }
.ui .hrow:last-child { border-bottom: 0; }
.ui .hrow .st { margin-left: auto; font-size: .6875rem; font-weight: 600; padding: .1875rem .5rem; border-radius: var(--r-full); }
.ui .hrow .st.complete { background: var(--primary-container); color: var(--on-primary-container); }
.ui .hrow .st.in_progress { background: var(--tertiary-container); color: var(--on-tertiary-container); }

.ui .toolbar { display: flex; background: var(--s-cont); border-radius: var(--r-full); padding: .375rem; box-shadow: var(--e3); }
.ui .tb {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .125rem;
  padding: .375rem .125rem; color: var(--on-surface-variant);
}
.ui .tb .pill { width: 3rem; height: 1.75rem; border-radius: var(--r-full); display: grid; place-items: center; }
.ui .tb span { font-size: .5625rem; font-weight: 600; white-space: nowrap; }
.ui .tb.on { color: var(--on-secondary-container); }
.ui .tb.on .pill { background: var(--secondary-container); }

.ui .grab { width: 2rem; height: .25rem; border-radius: var(--r-full); background: var(--outline-variant); margin: 0 auto 1rem; }
.ui .ing { display: flex; justify-content: space-between; gap: 1rem; padding: .625rem 0; border-bottom: 1px solid var(--outline-variant); font-size: .875rem; }
.ui .ing:last-of-type { border-bottom: 0; }
.ui .step-n { display: flex; gap: .875rem; padding: .625rem 0; font-size: .875rem; line-height: 1.5; }
.ui .step-n b {
  width: 1.5rem; height: 1.5rem; flex: none; border-radius: var(--r-full);
  background: var(--secondary-container); color: var(--on-secondary-container);
  display: grid; place-items: center; font-size: .75rem;
}

.ui .btn {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  font-size: .9375rem; font-weight: 600; height: 2.75rem; padding: 0 1.5rem;
  border-radius: var(--r-full); width: 100%;
  background: var(--primary); color: var(--on-primary); margin-top: .75rem;
}
.ui .btn.ghost { background: var(--s-cont); color: var(--on-surface); }
.ui .btn.ember { background: var(--ember-container); color: var(--on-ember-container); }

.ui .field {
  width: 100%; font-size: 1rem; padding: .875rem 1rem; border-radius: var(--r-md);
  border: 1px solid var(--outline); background: var(--s-lowest); color: var(--on-surface-variant);
  min-height: 5.25rem;
}
.ui .macro3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; text-align: center; }
.ui .macro3 b { font-size: 1.25rem; font-weight: 600; }

/* ============================================================== estimator */

.est {
  margin-top: clamp(2rem, 6vw, 3rem);
  background: var(--s-lowest); border: 1px solid var(--outline-variant);
  border-radius: var(--r-3xl); padding: clamp(1.375rem, 5vw, 2.25rem);
  box-shadow: var(--e1);
}
.sect-alt .est { background: var(--surface); }
.est-units { display: flex; gap: .25rem; background: var(--s-cont); padding: .25rem; border-radius: var(--r-full); width: max-content; }
.est-units button {
  border: 0; background: transparent; cursor: pointer; font-family: var(--font);
  font-size: .8125rem; font-weight: 600; color: var(--on-surface-variant);
  padding: .5rem 1.125rem; border-radius: var(--r-full); transition: .25s var(--spring);
}
.est-units button[aria-pressed="true"] { background: var(--cta); color: var(--on-cta); }

.est-fields { display: grid; gap: 1rem; margin-top: 1.25rem; }
@media (min-width: 34rem) { .est-fields { grid-template-columns: 1fr 1fr; } }
.est-field label { display: block; font-size: .8125rem; font-weight: 600; color: var(--on-surface-variant); margin-bottom: .375rem; }
.est-input { position: relative; display: flex; align-items: center; }
.est-input input {
  width: 100%; font-family: var(--font); font-size: 1.25rem; font-weight: 600;
  padding: .875rem 3.25rem .875rem 1rem; border-radius: var(--r-md);
  border: 1px solid var(--outline); background: var(--s-lowest); color: var(--on-surface);
  -moz-appearance: textfield; appearance: textfield;
}
.sect-alt .est-input input { background: var(--surface); }
.est-input input::-webkit-outer-spin-button, .est-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.est-input input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.est-input .unit { position: absolute; right: 1rem; font-size: .875rem; font-weight: 600; color: var(--on-surface-variant); pointer-events: none; }

.est-out { margin-top: 1.5rem; }
.est-lead {
  background: var(--primary-container); color: var(--on-primary-container);
  border-radius: var(--r-xxl); padding: 1.25rem 1.375rem;
}
.est-lead .cap { font-size: .75rem; font-weight: 600; opacity: .82; }
.est-lead .big { margin-top: .375rem; font-size: clamp(1.25rem, 4.8vw, 1.625rem); font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
.est-lead .sub { margin-top: .5rem; font-size: .875rem; line-height: 1.5; opacity: .9; }
.est-lead.warn { background: var(--ember-container); color: var(--on-ember-container); }

.est-tiers { display: grid; gap: .5rem; margin-top: .875rem; }
@media (min-width: 34rem) { .est-tiers { grid-template-columns: repeat(3, 1fr); } }
.est-tier {
  display: flex; align-items: center; gap: .625rem;
  background: var(--s-cont); border-radius: var(--r-lg); padding: .875rem 1rem;
  font-size: .875rem; font-weight: 600;
}
.est-tier .mark {
  width: 1.375rem; height: 1.375rem; flex: none; border-radius: var(--r-full);
  display: grid; place-items: center; font-size: .75rem;
  background: var(--outline-variant); color: var(--on-surface-variant);
}
.est-tier.ok { background: var(--secondary-container); color: var(--on-secondary-container); }
.est-tier.ok .mark { background: var(--primary); color: var(--on-primary); }
.est-tier .why { display: block; font-size: .6875rem; font-weight: 400; opacity: .8; }

.est-fine { margin-top: 1rem; font-size: .8125rem; line-height: 1.55; color: var(--on-surface-variant); }
.est-cta { margin-top: 1.25rem; display: grid; gap: .5rem; justify-items: start; }
@media (max-width: 33.99rem) { .est-cta .cta { width: 100%; } }

/* =============================================================== timeline */

.tl { margin-top: clamp(2rem, 6vw, 3rem); display: grid; gap: 0; }
.tl-row { display: grid; grid-template-columns: 3.75rem 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--outline-variant); }
.tl-row:last-child { border-bottom: 1px solid var(--outline-variant); }
.tl-time { font-size: .8125rem; font-weight: 700; color: var(--primary); padding-top: .125rem; }
.tl-body h4 { font-size: 1rem; font-weight: 600; }
.tl-body p { margin-top: .3125rem; font-size: .875rem; line-height: 1.55; color: var(--on-surface-variant); }
.tl-who {
  display: inline-block; margin-top: .5rem; padding: .1875rem .5rem; border-radius: var(--r-full);
  font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--s-cont); color: var(--on-surface-variant);
}
.tl-who.you { background: var(--tertiary-container); color: var(--on-tertiary-container); }

.effort {
  margin-top: clamp(1.75rem, 5vw, 2.5rem);
  background: var(--primary-container); color: var(--on-primary-container);
  border-radius: var(--r-xxl); padding: clamp(1.375rem, 5vw, 2rem);
  display: grid; gap: .5rem;
}
.effort .big { font-size: clamp(2rem, 8vw, 3rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.effort p { font-size: .9375rem; line-height: 1.55; opacity: .9; }

/* ============================================================ fit / lists */

.fit { display: grid; gap: 1rem; margin-top: clamp(2rem, 6vw, 3rem); }
@media (min-width: 52rem) { .fit { grid-template-columns: 1fr 1fr; } }
.fit-col { border-radius: var(--r-xxl); padding: clamp(1.375rem, 5vw, 1.875rem); }
.fit-yes { background: var(--secondary-container); color: var(--on-secondary-container); }
.fit-no { background: var(--s-cont); color: var(--on-surface); }
.fit-col h3 { font-size: 1.0625rem; font-weight: 600; }
.fit-col ul { margin-top: 1rem; display: grid; gap: .875rem; }
.fit-col li { display: flex; gap: .625rem; font-size: .9375rem; line-height: 1.5; }
.fit-col li svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: .125rem; }

/* ============================================================ free block */

.freebox {
  margin-top: clamp(2rem, 6vw, 3rem); display: grid; gap: .75rem;
}
@media (min-width: 56rem) { .freebox { grid-template-columns: repeat(3, 1fr); } }
.freestep {
  background: var(--s-lowest); border: 1px solid var(--outline-variant);
  border-radius: var(--r-xxl); padding: clamp(1.25rem, 4.5vw, 1.75rem);
}
.sect-alt .freestep { background: var(--surface); }
.freestep .n {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--r-full);
  background: var(--cta); color: var(--on-cta); font-size: .875rem; font-weight: 700;
}
.freestep h3 { margin-top: .875rem; font-size: 1.0625rem; font-weight: 600; }
.freestep p { margin-top: .5rem; font-size: .875rem; line-height: 1.6; color: var(--on-surface-variant); }
.freestep .free-tag {
  display: inline-block; margin-top: .875rem; padding: .25rem .625rem; border-radius: var(--r-full);
  font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--primary-container); color: var(--on-primary-container);
}
.freestep .free-tag.paid { background: var(--tertiary-container); color: var(--on-tertiary-container); }

.guarantee {
  margin-top: 1rem; background: var(--s-cont); border-radius: var(--r-xxl);
  padding: clamp(1.25rem, 4.5vw, 1.75rem); font-size: .9375rem; line-height: 1.6;
  color: var(--on-surface-variant);
}
.guarantee strong { color: var(--on-surface); }

/* =================================================================== faq */

.faq { margin-top: clamp(2rem, 6vw, 3rem); border-top: 1px solid var(--outline-variant); }
.faq-item { border-bottom: 1px solid var(--outline-variant); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 1.125rem .25rem; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font); font-size: 1rem; font-weight: 600; line-height: 1.4;
  color: var(--on-surface); text-align: left;
}
.faq-q .pm {
  width: 1.75rem; height: 1.75rem; flex: none; border-radius: var(--r-full);
  display: grid; place-items: center; background: var(--s-cont); color: var(--on-surface-variant);
  transition: transform .25s var(--spring), background .25s;
}
.faq-item.open .faq-q .pm { transform: rotate(45deg); background: var(--primary); color: var(--on-primary); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s var(--spring); }
.faq-a-in { padding: 0 .25rem 1.25rem; font-size: .9375rem; line-height: 1.65; color: var(--on-surface-variant); }
.faq-a-in a { color: var(--primary); font-weight: 600; text-decoration: underline; }

/* ============================================================== closing */

.final { padding: var(--sec-y) 0; }
.final-box {
  background: var(--ink); color: var(--on-ink);
  border-radius: var(--r-3xl); padding: clamp(2.25rem, 8vw, 4.5rem) clamp(1.375rem, 5vw, 3rem);
  text-align: center;
}
.final-box h2 {
  font-size: clamp(1.625rem, 6.6vw, 2.75rem); font-weight: 700;
  line-height: 1.12; letter-spacing: -.028em; max-width: 30rem; margin-inline: auto;
}
.final-box p { margin-top: 1rem; font-size: clamp(.9375rem, 3.8vw, 1.0625rem); line-height: 1.6; opacity: .82; max-width: 34rem; margin-inline: auto; }
.final-box .cta { margin-top: 1.75rem; }
.final-assure {
  margin-top: 1.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .625rem 1.25rem;
  font-size: .8125rem; opacity: .82;
}
.final-assure li { display: inline-flex; align-items: center; gap: .375rem; }
.final-assure svg { width: 1rem; height: 1rem; flex: none; }

/* ================================================================ footer */

.foot { border-top: 1px solid var(--outline-variant); padding: 2.5rem 0 7rem; font-size: .875rem; color: var(--on-surface-variant); }
@media (min-width: 48rem) { .foot { padding-bottom: 2.5rem; } }
.foot-top { display: grid; gap: 1.25rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; }
.foot-links a:hover { color: var(--on-surface); }
.foot-legal { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--outline-variant); font-size: .8125rem; line-height: 1.6; }
@media (min-width: 48rem) {
  .foot-top { grid-template-columns: 1fr auto; align-items: center; }
}

/* ============================================================ sticky cta */

/* Mobile only. 90% of this traffic is on a phone, and on a phone the hero
   button is a long way up by the time anyone finishes reading. */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  padding: .625rem var(--gut) calc(.625rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--outline-variant);
  transform: translateY(110%); transition: transform .3s var(--spring);
}
.sticky.show { transform: none; }
.sticky .cta { width: 100%; }
.sticky small { display: block; margin-top: .375rem; text-align: center; font-size: .6875rem; color: var(--on-surface-variant); }
@media (min-width: 48rem) { .sticky { display: none; } }

/* ======================================================== reduced motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .m3s *, .m3s *::before, .m3s *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* The rolling previews are the one thing that must actually stop rather than
     race: a 16-second scroll compressed to nothing is a flicker. */
  .phone .roll { animation: none !important; }
}

/* A four-across variant of .grid3, for the four beats of the weekly loop. */
.grid4 { display: grid; gap: .875rem; margin-top: clamp(2rem, 6vw, 3rem); }
@media (min-width: 40rem) { .grid4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .grid4 { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }

/* ================================================================= steps

   The path from tapping the button to keeping the result. Numbered on a rail
   because this genuinely is a sequence — you cannot do step 3 before step 1 —
   rather than as decoration on an unordered list. */

.steps { margin-top: clamp(2rem, 6vw, 3rem); }
.step { position: relative; display: grid; grid-template-columns: 2.75rem 1fr; gap: 1.125rem; padding-bottom: 2.25rem; }
.step:last-child { padding-bottom: 0; }
/* The rail joining one step to the next. */
.step:not(:last-child)::before {
  content: ""; position: absolute; left: 1.3125rem; top: 3.25rem; bottom: .5rem;
  width: 2px; background: var(--outline-variant);
}
/* NOT `.step-n` — that name belongs to the app's method rows inside `.ui`, and
   a bare page rule of the same name beat `.ui .step-n` on every property the
   app rule doesn't set (width, height, background, radius), collapsing each
   cooking instruction into a 44px green circle. Page classes must stay out of
   the app's namespace. */
.step-num {
  position: relative; z-index: 1;
  width: 2.75rem; height: 2.75rem; border-radius: var(--r-full);
  display: grid; place-items: center;
  background: var(--cta); color: var(--on-cta); font-size: 1rem; font-weight: 700;
}
.step-body h3 { font-size: 1.1875rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; padding-top: .5rem; }
.step-body > p { margin-top: .625rem; font-size: .9375rem; line-height: 1.62; color: var(--on-surface-variant); }
.step-meta { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .875rem; }
.step-chip {
  display: inline-flex; align-items: center; gap: .3125rem;
  background: var(--s-cont); color: var(--on-surface-variant);
  padding: .3125rem .625rem; border-radius: var(--r-full);
  font-size: .75rem; font-weight: 600;
}
.step-chip.free { background: var(--primary-container); color: var(--on-primary-container); }
.step-chip.you { background: var(--tertiary-container); color: var(--on-tertiary-container); }

/* =============================================================== lengths */

.pick {
  display: inline-block; margin-bottom: .75rem; padding: .25rem .625rem;
  border-radius: var(--r-full); font-size: .6875rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  background: var(--primary-container); color: var(--on-primary-container);
}
.panel-pick { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.panel-steps {
  display: flex; align-items: baseline; gap: .5rem; margin-top: 1rem;
  padding-top: .875rem; border-top: 1px dashed var(--outline-variant);
  font-size: .8125rem; color: var(--on-surface-variant);
}
.panel-steps b { font-size: 1.25rem; font-weight: 700; color: var(--on-surface); letter-spacing: -.02em; }

.floors { display: grid; gap: .75rem; margin-top: 1rem; }
@media (min-width: 52rem) { .floors { grid-template-columns: 1fr 1fr; } }
.floor {
  background: var(--ember-container); color: var(--on-ember-container);
  border-radius: var(--r-xxl); padding: clamp(1.25rem, 4.5vw, 1.75rem);
}
.floor h3 { font-size: 1rem; font-weight: 600; }
.floor p { margin-top: .5rem; font-size: .875rem; line-height: 1.6; opacity: .92; }

/* ============================================================ comparison

   One table, two shapes. Under 56rem every row becomes its own card with the
   column name repeated on each cell — a four-column grid is unreadable at
   320px, and a sideways-scrolling table hides the column that matters. */

.cmp-wrap { margin-top: clamp(2rem, 6vw, 3rem); }
.cmp { width: 100%; border-collapse: collapse; text-align: left; }
.cmp caption { text-align: left; font-size: .8125rem; color: var(--on-surface-variant); padding-bottom: .875rem; }
.cmp thead { display: none; }
.cmp tr {
  display: block; margin-bottom: .75rem; padding: 1.125rem 1.25rem;
  background: var(--s-lowest); border: 1px solid var(--outline-variant); border-radius: var(--r-xxl);
}
.sect-alt .cmp tr { background: var(--surface); }
.cmp th[scope="row"] {
  display: block; font-size: 1rem; font-weight: 600; line-height: 1.3;
  padding-bottom: .75rem; letter-spacing: -.01em;
}
.cmp td {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .5rem 0; font-size: .875rem; border-top: 1px solid var(--outline-variant);
}
.cmp td::before {
  content: attr(data-col); flex: none; font-weight: 600; color: var(--on-surface-variant);
}
.cmp td span { text-align: right; }
.cmp td.us {
  background: var(--primary-container); color: var(--on-primary-container);
  border-top: 0; border-radius: var(--r-md); padding: .625rem .75rem; margin: .25rem 0;
  font-weight: 600;
}
.cmp td.us::before { color: inherit; opacity: .8; }

@media (min-width: 56rem) {
  .cmp { border-radius: var(--r-xxl); overflow: hidden; }
  .cmp thead { display: table-header-group; }
  /* Every row, not just the body's. Scoped to tbody this left the header row
     as a display:block card while its cells were table-cells, so the
     highlighted TOVELU column header sat over the wrong column. */
  .cmp tr, .sect-alt .cmp tr {
    display: table-row; margin: 0; padding: 0; border: 0; border-radius: 0;
    background: none;
  }
  .cmp thead th {
    padding: .875rem 1rem; font-size: .8125rem; font-weight: 700;
    color: var(--on-surface-variant); vertical-align: bottom;
  }
  .cmp thead th.us { color: var(--on-primary-container); background: var(--primary-container); border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .cmp th[scope="row"] {
    display: table-cell; padding: .875rem 1rem; font-size: .875rem;
    border-top: 1px solid var(--outline-variant); vertical-align: top; width: 30%;
  }
  .cmp td {
    display: table-cell; padding: .875rem 1rem; font-size: .875rem;
    border-top: 1px solid var(--outline-variant); vertical-align: top;
  }
  .cmp td::before { display: none; }
  .cmp td span { text-align: left; }
  .cmp td.us {
    background: var(--primary-container); color: var(--on-primary-container);
    border-radius: 0; margin: 0; border-top: 1px solid color-mix(in srgb, var(--on-primary-container) 18%, transparent);
  }
  .cmp tbody tr:last-child td.us { border-radius: 0 0 var(--r-lg) var(--r-lg); }
}

/* =================================================================== trust

   The block that stands in for testimonials we do not have. It reads as a
   letter rather than a marketing panel on purpose — wider measure, quieter
   surface, a real name and a real address at the end of it. */

.trust {
  margin-top: clamp(2rem, 6vw, 3rem);
  background: var(--secondary-container); color: var(--on-secondary-container);
  border-radius: var(--r-3xl); padding: clamp(1.5rem, 6vw, 3rem);
}
.trust h3 {
  font-size: clamp(1.25rem, 5vw, 1.75rem); font-weight: 700;
  letter-spacing: -.024em; line-height: 1.2; max-width: 26rem;
}
.trust p { margin-top: 1rem; font-size: clamp(.9375rem, 3.8vw, 1.0625rem); line-height: 1.68; max-width: 38rem; }
.trust p + p { margin-top: .875rem; }
.trust .sign {
  display: flex; align-items: center; gap: .875rem; margin-top: 1.75rem;
  padding-top: 1.375rem; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.trust .sign .mark {
  width: 2.75rem; height: 2.75rem; flex: none; border-radius: var(--r-full);
  background: var(--cta); color: var(--on-cta); display: grid; place-items: center;
  font-size: 1rem; font-weight: 700;
}
.trust .sign b { display: block; font-size: .9375rem; font-weight: 600; }
.trust .sign span { display: block; font-size: .8125rem; opacity: .82; }
.trust .sign a { text-decoration: underline; }