@font-face{font-family:'Roboto';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/roboto.75be45f9.woff2') format('woff2');}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:200 900;font-display:swap;src:url('fonts/unbounded.aef5c246.woff2') format('woff2');}
/* ==========================================================================
   LiftLab — Design Tokens
   Extracted 1:1 from liftlab.webflow.io
   Source: liftlab.webflow.shared.22ccf309c.css

   Naming: readable aliases. The original Webflow variable name is noted in a
   comment beside each token so values stay traceable to the source.
   Values are unchanged from the source.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     COLOR
     Two-tone brand: near-black ground + acid lime accent.
     There is no secondary hue in this system — lime is the only chroma.
     --------------------------------------------------------------------- */
  --color-black:        #191919;    /* --all-color--black       — primary text, dark sections */
  --color-black-gray:   #272727;    /* --all-color--black-gray  — raised surfaces on black */
  --color-dark-gray:    #555555;    /* --all-color--dark-gray   — body text, muted labels */
  --color-lime:         #d6fb03;    /* --all-color--lime-yellow — the accent. Use sparingly. */
  --color-white:        #ffffff;    /* --all-color--white */
  --color-pure-black:   #000000;    /* --all-color--000000 */
  --color-off-white:    #f1f1f1;    /* --all-color--f1f1f1      — alternating section ground */
  --color-cool-gray:    #f1f2fa;    /* --all-color--gray */
  --color-nav-gray:     #f4f4f4;    /*                          — fixed navbar ground */

  /* Alpha colors */
  --color-white-70:     rgba(255, 255, 255, 0.70); /* --all-color--white-gray — body copy on black */
  --color-white-16:     rgba(255, 255, 255, 0.16); /* #ffffff29 — hairline border on black */
  --color-black-14:     rgba(25, 25, 25, 0.14);    /* --all-color--rgba-25-25-25-0-14 — hairline on light */
  --color-black-20:     rgba(25, 25, 25, 0.20);    /* #19191933 — nav pill on imagery */
  --color-black-gray-20: rgba(39, 39, 39, 0.20);   /* #27272733 — hero badge on imagery */

  /* Image scrims */
  --scrim-50:           rgba(0, 0, 0, 0.50);       /* #00000080 — inner-page hero overlay */
  --scrim-56:           rgba(0, 0, 0, 0.56);       /* #0000008f — fullscreen menu overlay */

  /* ---------------------------------------------------------------------
     TYPEFACES
     Unbounded = display + all UI. Roboto = running copy only.
     --------------------------------------------------------------------- */
  --font-display: Unbounded, sans-serif;  /* --_fonts---fonts--unbounded */
  --font-body:    Roboto, sans-serif;     /* --_fonts---fonts--roboto */

  --fw-normal:    400;  /* --_fonts---font-weight--normal */
  --fw-medium:    500;  /* --_fonts---font-weight--medium */
  --fw-semibold:  600;  /* --_fonts---font-weight--semi-bold */
  --fw-bold:      700;  /* --_fonts---font-weight--bold */

  /* ---------------------------------------------------------------------
     TYPE SCALE — desktop (≥992px)
     Fluid by breakpoint: every size below is redefined at 991 / 767 / 479.
     --------------------------------------------------------------------- */
  --fs-h1:        4rem;      /* --_typography---h1 (source: 5rem — reduced for SOLUM) */
  --fs-h2:        2.5rem;    /* --_typography---h2 (source: 3rem — reduced for SOLUM) */
  --fs-h3:        1.25rem;   /* --_typography---h3 */
  --fs-h4:        1.25rem;   /* --_typography---h4 */
  --fs-h5:        1.25rem;   /* --_typography---h5 */

  --fs-base:      1rem;      /* --_typography---all-font-size--font-regular */
  --fs-xs:        0.875rem;  /* --…--font-size-0-875 */
  --fs-sm:        1rem;      /* --…--font-size-1rem */
  --fs-md:        1.125rem;  /* --…--font-size-1-125rem */
  --fs-lg:        1.25rem;   /* --…--font-size-1-25 */
  --fs-xl:        1.5rem;    /* --…--font-size-1-5 */
  --fs-2xl:       2rem;      /* --…--font-size-2 */
  --fs-3xl:       2.5rem;    /* --…--font-size-2-5 */
  --fs-display:   5rem;      /* --…--font-size-5 — marquee type */

  /* Line heights — unitless em values exactly as authored */
  --lh-1:         1em;
  --lh-1-1:       1.1em;
  --lh-1-2:       1.2em;
  --lh-1-3:       1.3em;
  --lh-1-4:       1.4em;
  --lh-1-5:       1.5em;
  --lh-1-7:       1.7em;

  /* ---------------------------------------------------------------------
     SPACING — desktop (≥992px)
     Not a linear ramp. Authored as discrete steps; several are redefined
     per breakpoint (marked ▸). Steps without ▸ are constant at all sizes.
     --------------------------------------------------------------------- */
  --space-0-25:   0.25rem;
  --space-0-75:   0.75rem;   /* ▸ */
  --space-0-88:   0.88rem;   /* ▸ */
  --space-1:      1rem;
  --space-1-25:   1.25rem;   /* ▸ */
  --space-1-5:    1.5rem;    /* ▸ */
  --space-1-87:   1.87rem;   /* ▸ */
  --space-2:      2rem;      /* ▸ */
  --space-2-38:   2.38rem;
  --space-2-5:    2.5rem;    /* ▸ */
  --space-3:      3rem;      /* ▸ */
  --space-3-75:   3.75rem;   /* ▸ */
  --space-4-38:   4.38rem;
  --space-5:      5rem;      /* ▸ */
  --space-6-5:    6.5rem;    /* ▸ */
  --space-7-5:    7.5rem;    /* ▸ section rhythm */

  /* ---------------------------------------------------------------------
     GAP — desktop (≥992px)
     A parallel ramp used only for flex/grid gaps.
     --------------------------------------------------------------------- */
  --gap-0-25:     0.25rem;
  --gap-0-5:      0.5rem;
  --gap-0-62:     0.62rem;
  --gap-0-88:     0.88rem;
  --gap-1:        1rem;      /* ▸ */
  --gap-1-25:     1.25rem;   /* ▸ */
  --gap-1-5:      1.5rem;    /* ▸ */
  --gap-1-75:     1.75rem;   /* ▸ */
  --gap-2:        2rem;      /* ▸ */
  --gap-2-5:      2.5rem;    /* ▸ */
  --gap-3-75:     3.75rem;   /* ▸ */
  --gap-5:        5rem;      /* ▸ */
  --gap-7-5:      7.5rem;    /* ▸ */

  /* ---------------------------------------------------------------------
     LAYOUT
     --------------------------------------------------------------------- */
  --container-max:    83.25rem;  /* --_spacing---container-item--container-weight (1332px) */
  --container-pad:    var(--space-1);
  --navbar-max:       83rem;
  --full:             100%;      /* --_spacing---container-item--full */

  /* Measure caps used across the site */
  --measure-10:   12rem;
  --measure-25:   25rem;
  --measure-32:   32rem;
  --measure-40:   40rem;
  --measure-43:   43rem;
  --measure-58:   58rem;
  --measure-prose: 50rem;   /* FAQ / services column */
  --measure-hero: 44.625rem;

  /* ---------------------------------------------------------------------
     RADIUS
     --------------------------------------------------------------------- */
  --radius-sm:    0.375rem;  /* --…--border-0-375 */
  --radius-md:    0.5rem;    /* raw — images, navbar container */
  --radius-lg:    0.625rem;  /* --…--border-0-625 — the default card radius */
  --radius-xl:    12px;      /* raw — utility panels */
  --radius-full:  999px;     /* --…--border-full — every button and pill */

  /* ---------------------------------------------------------------------
     MOTION
     The source uses a single easing/duration for hover transitions.
     --------------------------------------------------------------------- */
  --transition:   all 0.4s;
  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   RESPONSIVE TOKEN OVERRIDES
   Webflow's three standard breakpoints. Type and space shrink together,
   so component CSS never needs its own media queries.
   ========================================================================== */

/* Tablet — ≤991px */
@media screen and (max-width: 991px) {
  :root {
    --fs-h1: 3.5rem;
    --fs-h2: 2.25rem;
    --fs-h3: 1.2rem;
    --fs-h4: 1.2rem;
    --fs-lg: 1rem;
    --fs-xl: 1.31rem;
    --fs-2xl: 1.75rem;
    --fs-3xl: 2rem;
    --fs-display: 4rem;

    --space-1-25: 1.2rem;
    --space-1-5: 1.3rem;
    --space-1-87: 1.59rem;
    --space-2: 1.75rem;
    --space-2-5: 2rem;
    --space-3: 2.625rem;
    --space-3-75: 2.5rem;
    --space-5: 3rem;
    --space-6-5: 4rem;
    --space-7-5: 6rem;

    --gap-1-5: 1.28rem;
    --gap-1-75: 1.37rem;
    --gap-2: 1.75rem;
    --gap-2-5: 2rem;
    --gap-3-75: 2.5rem;
    --gap-5: 3rem;
    --gap-7-5: 4rem;
  }
}

/* Mobile landscape — ≤767px */
@media screen and (max-width: 767px) {
  :root {
    --fs-h1: 3rem;
    --fs-h2: 2rem;
    --fs-h3: 1.1rem;
    --fs-h4: 1.1rem;
    --fs-base: 0.9rem;
    --fs-sm: 0.9rem;
    --fs-lg: 1.2rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem;
    --fs-3xl: 1.75rem;
    --fs-display: 3.5rem;

    --space-0-88: 0.7rem;
    --space-1-25: 1.1rem;
    --space-1-5: 1.2rem;
    --space-1-87: 1.41rem;
    --space-2: 1.5rem;
    --space-2-5: 1.75rem;
    --space-3: 2.25rem;
    --space-3-75: 2rem;
    --space-5: 2.5rem;
    --space-6-5: 2.5rem;
    --space-7-5: 5rem;

    --gap-1: 0.9rem;
    --gap-1-25: 1.1rem;
    --gap-1-5: 1.13rem;
    --gap-1-75: 1.31rem;
    --gap-2: 1.5rem;
    --gap-2-5: 1.5rem;
    --gap-3-75: 1.75rem;
    --gap-5: 2rem;
    --gap-7-5: 3rem;
  }
}

/* Mobile portrait — ≤479px */
@media screen and (max-width: 479px) {
  :root {
    --fs-h1: 2.2rem;
    --fs-h2: 1.5rem;
    --fs-h3: 0.9rem;
    --fs-h4: 0.9rem;
    --fs-base: 0.875rem;
    --fs-xs: 0.8rem;
    --fs-sm: 0.875rem;
    --fs-lg: 0.9rem;
    --fs-xl: 1.1rem;
    --fs-2xl: 1.4rem;
    --fs-3xl: 1.5rem;
    --fs-display: 2.5rem;

    --space-0-75: 0.5rem;
    --space-0-88: 0.5rem;
    --space-1-25: 1rem;
    --space-1-5: 1rem;
    --space-1-87: 1.22rem;
    --space-2: 1.25rem;
    --space-2-5: 1.3rem;
    --space-3: 1.875rem;
    --space-3-75: 1.5rem;
    --space-5: 2rem;
    --space-6-5: 2rem;
    --space-7-5: 3rem;

    --gap-1: 0.8rem;
    --gap-1-25: 1rem;
    --gap-1-5: 1rem;
    --gap-1-75: 1.09rem;
    --gap-2: 1.2rem;
    --gap-2-5: 1.25rem;
    --gap-3-75: 1.5rem;
    --gap-5: 1.75rem;
    --gap-7-5: 2rem;
  }
}
/* ==========================================================================
   LiftLab — Base & Typography
   Requires tokens.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts
   Load these before base.css, or self-host the woff2 files.
   Weights actually used: Roboto 300/400/500/700 · Unbounded 400/500/600/700
   -------------------------------------------------------------------------- */


*,
*::before,
*::after { box-sizing: border-box; }

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background-color: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  line-height: var(--lh-1);
  font-weight: var(--fw-normal);
  color: var(--color-dark-gray);
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video { max-width: 100%; display: block; }

/* --------------------------------------------------------------------------
   Headings

   All headings are Unbounded, semibold, UPPERCASE, with margins zeroed —
   vertical rhythm comes from spacer utilities, never from heading margins.

   NOTE ON h1: the source leaves the bare <h1> element at Webflow's default
   (38px/700) and applies the 5rem h1 token through hero classes instead
   (.home-hero-heading, .inner-hero-heading, .hero-heading-text-v2). That is
   an oversight, not an intent. Here the element is normalized to the token
   so <h1> and .h1 agree. Everything else is verbatim.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--color-black);
  text-transform: uppercase;
  text-wrap: balance;
}

h1, .h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-1);
  font-weight: var(--fw-bold);
}

h2, .h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-1);
  font-weight: var(--fw-semibold);
}

h3, .h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-1);
  font-weight: var(--fw-semibold);
}

h4, .h4 {
  margin-bottom: var(--space-0-25);
  font-size: var(--fs-h4);
  line-height: var(--lh-1-1);
  font-weight: var(--fw-semibold);
}

h5, .h5 {
  font-size: var(--fs-h5);
  line-height: var(--lh-1-1);
  font-weight: var(--fw-semibold);
}

/* --------------------------------------------------------------------------
   Body copy — Roboto, sentence case, generous leading
   -------------------------------------------------------------------------- */
p {
  margin: 0;
  font-family: var(--font-body);
  line-height: var(--lh-1-7);
}

li {
  font-family: var(--font-body);
  color: var(--color-black);
}

a { color: inherit; text-decoration: none; }

:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--color-lime);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Text styles

   Two ramps run in parallel:
   · The UPPERCASE Unbounded ramp (.font-s → .font-l, .font-r) for labels,
     buttons, stats, nav — anything that behaves as UI.
   · .paragraph-regular for actual reading copy in Roboto.
   Never mix: uppercase Unbounded is never used for a full sentence.
   -------------------------------------------------------------------------- */

/* 0.875rem · 500 · uppercase — button labels, meta, captions */
.font-s {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  color: var(--color-white);
}

/* 1rem · 600 · uppercase — the workhorse label. Eyebrows, links, nav. */
.font-r {
  margin-bottom: 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-black);
}

/* 1.25rem · 500 · uppercase — card titles, list rows */
.font-m {
  font-size: var(--fs-lg);
  line-height: var(--lh-1-1);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  color: var(--color-white);
}

/* 1.5rem · 600 · uppercase — sub-headings, pricing figures */
.font-l {
  font-size: var(--fs-xl);
  line-height: var(--lh-1-2);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  color: var(--color-pure-black);
}

/* Running copy */
.paragraph-regular {
  margin-bottom: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-1-5);
  font-weight: var(--fw-normal);
  color: var(--color-dark-gray);
}

/* Section title — same spec as h2, available as a class */
.section-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-1);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  color: var(--color-black);
}

/* Hero title — 5rem, bold, capped measure */
.hero-heading {
  max-width: var(--measure-hero);
  font-size: var(--fs-h1);
  line-height: var(--lh-1);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--color-white);
}

/* Marquee type — the oversized scrolling band */
.marque-text {
  font-size: var(--fs-display);
  line-height: var(--lh-1);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  color: var(--color-black);
}

/* --------------------------------------------------------------------------
   Color modifiers — compose onto any text style
   -------------------------------------------------------------------------- */
.is-black       { color: var(--color-black); }
.is-pure-black  { color: var(--color-pure-black); }
.is-white       { color: var(--color-white); }
.is-gray        { color: var(--color-dark-gray); }
.is-lime        { color: var(--color-lime); }
.is-white-70    { color: var(--color-white-70); }

.text-align-center { text-align: center; }
.text-align-right  { text-align: right; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.container {
  width: var(--full);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section { position: relative; }
.section.bg-black  { background-color: var(--color-black); }
.section.bg-light  { background-color: var(--color-off-white); }

/* Vertical rhythm is applied with spacer elements, not margins.
   Drop a <div class="space-7-5"></div> between blocks. */
.space-0-75 { width: var(--full); padding-top: var(--space-0-75); }
.space-1    { width: var(--full); padding-top: var(--space-1); }
.space-1-25 { width: var(--full); padding-top: var(--space-1-25); }
.space-1-5  { width: var(--full); padding-top: var(--space-1-5); }
.space-1-87 { width: var(--full); padding-top: var(--space-1-87); }
.space-2    { width: var(--full); padding-top: var(--space-2); }
.space-2-5  { width: var(--full); padding-top: var(--space-2-5); }
.space-3    { width: var(--full); padding-top: var(--space-3); }
.space-3-75 { width: var(--full); padding-top: var(--space-3-75); }
.space-5    { width: var(--full); padding-top: var(--space-5); }
.space-6-5  { width: var(--full); padding-top: var(--space-6-5); }
.space-7-5  { width: var(--full); padding-top: var(--space-7-5); }

/* Measure caps */
.max-width-10 { max-width: var(--measure-10); }
.max-width-25 { max-width: var(--measure-25); }
.max-width-32 { max-width: var(--measure-32); }
.max-width-40 { max-width: var(--measure-40); }
.max-width-43 { max-width: var(--measure-43); }
.max-width-50 { max-width: var(--measure-prose); }
.max-width-58 { max-width: var(--measure-58); }
/* ==========================================================================
   LiftLab — Components
   Requires tokens.css + base.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   BUTTON

   One anatomy across the whole site: a full-radius pill whose label sits at
   the left and whose arrow sits in a circular chip pinned to the right. The
   asymmetric padding (1.5rem left / 0.3rem right) exists to let the chip sit
   flush inside the pill.

   Markup (ARROW = a 1rem double-chevron svg, doubled):
     <a class="btn" href="#">
       <span class="btn__label"><span>Join Now</span><span>Join Now</span></span>
       <span class="btn__chip"><span class="btn__arrows">ARROW ARROW</span></span>
     </a>

     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"
          stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
       <path d="M5 5l7 7-7 7M13 5l7 7-7 7"/>
     </svg>

   The doubled label and doubled arrow are intentional: both sit in an
   overflow-hidden box and slide up/across on hover. The source drives this
   with Webflow interactions; here it is CSS.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-1-25);
  padding: 0.31rem 0.3rem 0.31rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background-color: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
}

/* Label window — height is one line; the second copy waits below */
.btn__label {
  display: block;
  height: 0.9rem;
  overflow: hidden;
  line-height: 0.9rem;
}
.btn__label > span { display: block; }
.btn:hover .btn__label > span:first-child { margin-top: -0.9rem; }
.btn__label > span { transition: margin-top 0.4s var(--ease); }

/* Arrow chip */
.btn__chip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  background-color: var(--color-black);
  color: var(--color-white);
}

/* Arrow window — 1rem wide; the second arrow waits to the left */
.btn__arrows {
  display: flex;
  align-items: center;
  width: 1rem;
  overflow: hidden;
}
/* The source ships a 1rem "angles-right" asset. Any icon dropped in here —
   svg, img or glyph — is normalized to that 1rem square so the chip reads
   correctly at every breakpoint. */
.btn__arrows > * {
  display: block;
  flex: none;
  width: 1rem;
  height: 1rem;
  transition: margin-left 0.4s var(--ease);
}
/* Negative, not positive: the track slides LEFT so the first arrow exits and
   the second rides in behind it. A positive margin would push the first arrow
   out of the window and leave the chip empty. */
.btn:hover .btn__arrows > *:first-child { margin-left: -1rem; }

/* --- Variants ---------------------------------------------------------- */

/* Default (`base`) — white pill, black chip. Used on imagery and dark grounds. */

/* `button-secondary` — the lime call to action. The loudest thing on a page;
   one per view. */
.btn--lime {
  background-color: var(--color-lime);
  border-color: var(--color-black-14);
}

/* `with-border` — white pill with a hairline. For light grounds where a
   borderless white pill would disappear. */
.btn--outline {
  background-color: var(--color-white);
  border-color: var(--color-black-14);
}

/* Black — inverts: dark pill, lime chip. */
.btn--black {
  background-color: var(--color-black);
  color: var(--color-white);
}
.btn--black .btn__chip {
  background-color: var(--color-lime);
  color: var(--color-black);
}

/* CTA — black pill that fills its column and pushes the chip to the far edge */
.btn--cta {
  display: flex;
  justify-content: space-between;
  background-color: var(--color-black);
  border-color: var(--color-white-16);
  color: var(--color-white);
}

/* Pricing row button — raised dark surface, full width, chip at far right */
.btn--pricing {
  display: flex;
  justify-content: space-between;
  background-color: var(--color-black-gray);
  border-color: var(--color-white-16);
  color: var(--color-white);
}
.btn--pricing.btn--lime {
  background-color: var(--color-white);
  border-color: var(--color-black-14);
  color: var(--color-black);
}

/* Form submit — the one button that is not pill-with-chip */
.btn--submit {
  display: block;
  width: var(--full);
  padding: var(--space-1) var(--space-1-25);
  border: 1px solid var(--color-black);
  border-radius: var(--radius-full);
  background-color: var(--color-black);
  color: var(--color-white);
  text-align: left;
}

/* Text-only link button — lime label, no container */
.btn--text {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-lime);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}
.btn--text.is-black { color: var(--color-black); }

/* Button rows */
.button-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-0-62);
}

@media screen and (max-width: 767px) {
  .button-wrapper { flex-direction: column; align-items: stretch; }
}
@media screen and (max-width: 479px) {
  .btn__chip { width: 2.3rem; height: 2.3rem; }
}

/* --------------------------------------------------------------------------
   BADGE / EYEBROW
   Every section opens with a lime or black dot-icon plus an uppercase label.
   This is the system's section marker — it names the section, it does not
   number it.
   -------------------------------------------------------------------------- */
.section-badge {
  display: flex;
  align-items: center;
  gap: var(--gap-0-25);
}

.badge-icon {
  display: grid;
  place-items: center;
  flex: none;
  padding: var(--space-0-25);
  border-radius: var(--radius-full);
  background-color: var(--color-black);
  color: var(--color-lime);
}
/* 1rem glyph + 0.25rem padding = a 1.5rem chip */
.badge-icon > svg,
.badge-icon > img {
  display: block;
  width: 1rem;
  height: 1rem;
}
.badge-icon.is-lime {
  background-color: var(--color-lime);
  color: var(--color-black);
}

/* Hero badge — translucent chip that sits over photography */
.hero-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-0-75) var(--fs-md) var(--space-0-75) var(--space-1-25);
  border-radius: var(--radius-full);
  background-color: var(--color-black-gray-20);
  backdrop-filter: blur(2px);
}

/* Logo pill — bordered pill used in the partner/awards strip */
.logo-pill {
  padding: 1.56rem 2.4rem;
  border: 1px solid var(--color-black-14);
  border-radius: var(--radius-full);
  color: var(--color-black);
}
.logo-pill.is-black {
  background-color: var(--color-black);
  color: var(--color-lime);
}

/* --------------------------------------------------------------------------
   SECTION HEADER
   Badge → heading → paragraph, centered by default, left-aligned via .left.
   -------------------------------------------------------------------------- */
.section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section-header.left { align-items: flex-start; text-align: left; }

/* --------------------------------------------------------------------------
   CARDS
   Default card = 0.625rem radius on --color-black-gray. The lime card is the
   emphasis variant; the white card is the light-ground equivalent.
   -------------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
  padding: var(--space-1-5) var(--space-1-87) var(--space-1-87);
  border-radius: var(--radius-lg);
  background-color: var(--color-black-gray);
  color: var(--color-white);
}
.card.is-lime {
  position: relative;
  background-color: var(--color-lime);
  color: var(--color-black);
}
.card.is-white {
  overflow: hidden;
  border: 1px solid var(--color-black-14);
  background-color: var(--color-white);
  color: var(--color-black);
}

.card__icon {
  display: block;
  width: 3.5rem;
  max-width: 3.5rem;
  height: 3.5rem;
}

/* Lime is never paired with white type — at #d6fb03 the contrast fails.
   Enforce it structurally so no descendant can opt out by accident: the
   uppercase ramp (.font-s, .font-m) hardcodes white and would otherwise
   leak onto lime grounds. Badge chips are excluded because they carry
   their own dark ground. */
:is(.card, .testimonial-card, .pricing-card, .contact-card).is-lime
  :where(*:not(.badge-icon):not(.badge-icon *)) {
  color: var(--color-black);
}

/* Testimonial — taller card with a big gap between quote and attribution */
.testimonial-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--gap-7-5);
  padding: var(--space-1-87);
  border-radius: var(--radius-lg);
  background-color: var(--color-black);
  color: var(--color-white);
}
.testimonial-card.is-lime {
  background-color: var(--color-lime);
  color: var(--color-black);
}
.testimonial-card__mark {
  display: block;
  width: 3.75rem;
  max-width: 3.75rem;
  height: auto;
  color: var(--color-lime);
}
.testimonial-card.is-lime .testimonial-card__mark { color: var(--color-black); }
.testimonial-card__footer {
  display: flex;
  align-items: center;
  gap: var(--gap-0-62);
}

/* Pricing row — a card shaped like a button */
.pricing-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.63rem 0.63rem 0.63rem 1.87rem;
  border-radius: var(--radius-lg);
  background-color: var(--color-black-gray);
  color: var(--color-white);
}
.pricing-card.is-lime {
  background-color: var(--color-lime);
  color: var(--color-black);
}

/* Contact info — small horizontal card */
.contact-card {
  display: flex;
  align-items: center;
  gap: var(--gap-0-88);
  padding: var(--space-1) var(--space-1-87) var(--space-1) var(--space-1-25);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  color: var(--color-black);
}
.contact-card.is-lime { background-color: var(--color-lime); }

/* Team card — image with a lime tab anchored to the lower left */
.team-card { position: relative; }
.team-card__img {
  width: 100%;
  border-radius: var(--radius-md);
  object-fit: cover;
}
.team-card__info {
  position: absolute;
  left: 0;
  bottom: 1.87rem;
  display: flex;
  align-items: center;
  gap: 4.81rem;
  padding: 0.94rem 1.5rem 0.94rem 1.88rem;
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
  background-color: var(--color-lime);
  color: var(--color-black);
}

/* --------------------------------------------------------------------------
   FORM
   -------------------------------------------------------------------------- */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--gap-1-75);
}

.form-field {
  width: var(--full);
  height: 3.75rem;
  margin-bottom: 0;
  padding-inline: 1.38rem;
  border: 1px solid var(--color-black-14);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--color-black);
}
.form-field::placeholder { color: var(--color-dark-gray); }
.form-field:focus {
  border-color: var(--color-black);
  outline: none;
}
textarea.form-field {
  height: auto;
  min-height: 9rem;
  padding-block: 1.15rem;
  line-height: var(--lh-1-5);
  resize: vertical;
}

/* --------------------------------------------------------------------------
   NAVIGATION
   The navbar is a fixed light bar; over hero imagery it goes transparent
   (.navbar--overlay) and the menu trigger becomes a translucent pill.
   -------------------------------------------------------------------------- */
.navbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 999;
  padding-block: 0.5rem;
  background-color: var(--color-nav-gray);
}
.navbar--overlay {
  position: absolute;
  background-color: transparent;
}

.navbar-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--navbar-max);
  margin-inline: auto;
  padding: var(--space-1);
  border-radius: var(--radius-md);
}

/* Menu trigger pill */
.nav-menu-toggle {
  position: relative;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: var(--gap-0-5);
  padding: var(--space-0-88) var(--space-1-25);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background-color: var(--color-black-20);
  color: var(--color-white);
  cursor: pointer;
}
.nav-menu-toggle--light {
  border-color: var(--color-black-14);
  background-color: var(--color-white);
  color: var(--color-black);
}

/* Fullscreen overlay menu */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 9;
  width: 100vw;
  height: 100vh;
  padding-top: 7.65rem;
  overflow: hidden;
  background-color: var(--color-black);
}

.nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-left: 2.5rem;
  color: var(--color-dark-gray);
  text-decoration: none;
}
.nav-link.is-current { color: var(--color-black); }

.nav-text {
  font-size: 1.4rem;
  font-weight: var(--fw-bold);
  line-height: var(--lh-1-1);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   FAQ / ACCORDION
   -------------------------------------------------------------------------- */
.faq-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
}
.faq-item__top {
  display: flex;
  align-items: center;
  gap: var(--gap-1-25);
  width: 100%;
  cursor: pointer;
}
.faq-arrow-wrap {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--space-1);
  border-radius: var(--radius-lg);
  background-color: var(--color-off-white);
  color: var(--color-black);
}
.faq-arrow { width: 1rem; height: 1rem; }
.faq-divider {
  width: 100%;
  height: 1px;
  margin-top: 0.62rem;
  background-color: var(--color-black-14);
}
.faq-divider.on-dark { background-color: var(--color-white-16); }

/* Filter tabs above the accordion */
.faq-tab {
  padding: 0.62rem;
  border-radius: var(--radius-lg);
  background-color: transparent;
  color: var(--color-black);
  cursor: pointer;
}
.faq-tab.is-current {
  background-color: var(--color-black);
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   MARQUEE
   Two bands: lime with black type, black with white type.
   -------------------------------------------------------------------------- */
.marquee {
  display: flex;
  align-items: center;
  gap: var(--gap-5);
  padding-block: var(--space-0-75);
  overflow: hidden;
  background-color: var(--color-lime);
}
.marquee--dark { background-color: var(--color-black); }
.marquee--dark .marque-text { color: var(--color-white); }

.marquee__track {
  display: flex;
  align-items: center;
  gap: var(--gap-5);
  flex: none;
  animation: marquee-scroll 22s linear infinite;
}
@keyframes marquee-scroll {
  to { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* --------------------------------------------------------------------------
   MISC
   -------------------------------------------------------------------------- */
.social-link {
  display: grid;
  place-items: center;
  width: 3.375rem;
  height: 3.375rem;
  border: 1px solid var(--color-black-14);
  border-radius: var(--radius-lg);
  transition: var(--transition);
}
.social-link:hover { background-color: var(--color-lime); }

.link-scale { display: inline-flex; align-items: center; gap: 0.6rem; transition: var(--transition); }
.link-scale:hover { transform: scale(1.1); }

.divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-black-14);
}
.divider--heavy { height: 2px; background-color: var(--color-dark-gray); }
.divider--on-dark { background-color: var(--color-white-16); }

/* Image scrim for inner-page heroes */
.hero-scrim {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 37.5rem;
  background-image: linear-gradient(var(--scrim-50), var(--scrim-50)), var(--hero-image, none);
  background-position: 0 0, 50%;
  background-size: auto, cover;
  background-repeat: repeat, no-repeat;
}
@media screen and (max-width: 991px) { .hero-scrim { min-height: 29rem; } }
@media screen and (max-width: 767px) { .hero-scrim { min-height: 22rem; } }
@media screen and (max-width: 479px) { .hero-scrim { min-height: 17rem; } }
/* ==========================================================================
   SOLUM one-pager — page layer on the LiftLab design system
   ========================================================================== */

:root {
  /* --- the accent ramp -------------------------------------------------
     Every gold surface on the page is mixed from these nine values, so the
     whole accent can be swapped by redefining them (see the silver block at
     the end of this file). --color-lime is the design system's accent token
     and stays the single flat colour; the rest are the gradient stops the
     rings, highlights and solid cards are built from. */
  --au-ring-1: #e6d7a8;   /* gradient ring: highlight  */
  --au-ring-2: #8f7a45;   /* gradient ring: shadow     */
  --au-ring-3: #d8c48d;   /* gradient ring: highlight  */
  --au-ring-4: #7d6a3a;   /* gradient ring: shadow     */
  --au-hl-1:   #c3ad74;   /* heading highlight on a light ground */
  --au-hl-2:   #8f7a45;
  --au-hld-1:  #d8c48d;   /* heading highlight on a dark ground  */
  --au-hld-2:  #a8945c;
  --au-solid-1: #b5a069;  /* solid accent fill (chips, feature card) */
  --au-solid-2: #a8945c;
  --au-solid-3: #97844e;
  --au-tick-1: #cfba7e;   /* tick-list checkmark disc */
  --au-tick-2: #8f7a45;
  --au-ink:    #8f7a45;   /* accent used as type on white */
  --au-surface: #a8945c;  /* filled accent surface (button, tag, band) */
  --au-on:      #111111;  /* type that sits on that surface */

  --color-lime: #a8945c;
  --color-black: #111111;
  --color-black-gray: #1a1a1a;
  --color-off-white: #f7f7f7;
  --color-black-14: rgba(25, 25, 25, 0.07);
}
body { background: var(--color-white); }

/* =======================================================================
   MEDIA SLOTS — every image/video position on the page, with its spec.
   Toggle off with the "Media specs" control to preview without them.
   ======================================================================= */
.slot {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .4rem;
  padding: 1.1rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,0) 60%),
    repeating-linear-gradient(45deg, rgba(128,128,128,.10) 0 10px, rgba(128,128,128,0) 10px 20px),
    #1c1c1a;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.13);
  color: #fff;
  min-height: 8rem;
}
/* corner ticks — reads as a spec frame, not a decorative box */
.slot::before, .slot::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--color-lime);
  opacity: .7;
}
.slot::before { top: .55rem; left: .55rem; border-right: 0; border-bottom: 0; }
.slot::after  { bottom: .55rem; right: .55rem; border-left: 0; border-top: 0; }

.slot--alt {
  background:
    repeating-linear-gradient(-45deg, rgba(128,128,128,.10) 0 10px, rgba(128,128,128,0) 10px 20px),
    #24241f;
}
.slot__id {
  position: absolute;
  top: .9rem; left: 1.1rem;
  font-family: var(--sg-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .625rem;
  letter-spacing: .1em;
  color: var(--color-lime);
}
.slot__type {
  font-family: var(--font-display);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
}
.slot__desc {
  font-family: var(--font-body);
  font-size: .8125rem;
  line-height: 1.45;
  color: rgba(255,255,255,.62);
  max-width: 34rem;
}
.slot__spec {
  font-family: var(--sg-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .6875rem;
  line-height: 1.5;
  color: rgba(255,255,255,.34);
  max-width: 34rem;
}
/* aspect variants */
.slot--1x1   { aspect-ratio: 1/1; }
.slot--4x5   { aspect-ratio: 4/5; }
.slot--3x4   { aspect-ratio: 3/4; }
.slot--4x3   { aspect-ratio: 4/3; }
.slot--16x10 { aspect-ratio: 16/10; }
.slot--21x9  { aspect-ratio: 21/9; }
.slot--tall  { aspect-ratio: 3/4; }
.slot--bleed { position: absolute; inset: 0; border-radius: 0; justify-content: flex-start; padding-top: 6.5rem; }
.slot--bleed .slot__id { top: 5.6rem; }
.slot--flush { border-radius: var(--radius-lg); }
.slot--icon {
  aspect-ratio: auto;
  width: 3.5rem; height: 3.5rem;
  min-height: 0; padding: 0;
  align-items: center; justify-content: center; gap: 0;
}
.slot--icon .slot__id { position: static; font-size: .5rem; letter-spacing: .04em; }
.slot--icon .slot__type, .slot--icon .slot__desc { display: none; }
.slot--icon::before, .slot--icon::after { display: none; }
.slot--icon-dark { box-shadow: inset 0 0 0 1px rgba(17,17,17,.3); background: rgba(17,17,17,.12); }
.slot--icon-dark .slot__id { color: #111; }
.slot--avatar {
  width: 2.5rem; height: 2.5rem; min-height: 0; padding: 0;
  border-radius: 999px; align-items: center; justify-content: center; flex: none;
}
.slot--avatar .slot__id { position: static; font-size: .45rem; letter-spacing: 0; }
.slot--avatar::before, .slot--avatar::after { display: none; }
.slot--logo { aspect-ratio: 16/5; max-width: 14rem; }

/* preview mode: slots collapse to plain tonal blocks */
body.slots-off .slot__id,
body.slots-off .slot__type,
body.slots-off .slot__desc,
body.slots-off .slot__spec { display: none; }
body.slots-off .slot::before,
body.slots-off .slot::after { display: none; }
body.slots-off .slot {
  background:
    radial-gradient(90% 70% at 60% 25%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(200deg, #26261f 0%, #161614 60%, #0d0d0c 100%);
}

/* --------------------------- review controls --------------------------- */

/* --------------------------- variant switcher --------------------------- */
.sec { position: relative; }
.varbar {
  position: absolute; top: .75rem; left: 50%; transform: translateX(-50%);
  z-index: 500; display: flex; align-items: center; gap: .3rem;
  padding: .3rem .4rem;
  border: 1px solid rgba(128,128,128,.28);
  border-radius: 999px;
  background: rgba(20,20,20,.85);
  backdrop-filter: blur(8px);
  max-width: calc(100% - 2rem); overflow-x: auto;
}
.varbar__lab {
  font-family: var(--font-display); font-size: .5625rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.42); padding: 0 .4rem; white-space: nowrap;
}
.varbar__btn {
  padding: .28rem .65rem; border: 0; border-radius: 999px;
  background: rgba(255,255,255,.09); color: rgba(255,255,255,.72);
  font-family: var(--font-display); font-size: .625rem; font-weight: 500;
  cursor: pointer; white-space: nowrap; transition: background .2s, color .2s;
}
.varbar__btn.is-on { background: var(--color-lime); color: #111; }
.variant { display: none; }
.variant.is-on { display: block; }
body.opts-off .varbar { display: none; }

/* ------------------------------- nav ----------------------------------- */
.wordmark {
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; text-decoration: none;
}
.nav-right { display: flex; align-items: center; gap: 1.5rem; }
.nav-inline { color: rgba(255,255,255,.75); text-decoration: none; transition: color .2s; }
.nav-inline:hover { color: var(--color-lime); }
.btn--sm { padding: .25rem .25rem .25rem 1.1rem; }
.btn--sm .btn__chip { width: 2rem; height: 2rem; }
.btn--full { display: flex; justify-content: space-between; width: 100%; }
@media (max-width: 900px) { .nav-inline { display: none; } }

/* ------------------------------- hero ---------------------------------- */
.hero-full { position: relative; display: flex; align-items: flex-end; min-height: 100svh; overflow: hidden; }
.hero-full--short { min-height: 40rem; align-items: center; }
.hero-full__inner { position: relative; z-index: 2; width: 100%; padding-block: var(--space-7-5); }
.hero-full__inner::before {
  content: ""; position: absolute; inset: -30% 0 -10%;
  background: linear-gradient(to top, rgba(0,0,0,.85) 20%, rgba(0,0,0,.35) 65%, transparent 100%);
  z-index: -1; pointer-events: none;
}
.hero-trust {
  font-family: var(--font-body); font-size: .9375rem;
  color: rgba(255,255,255,.62); max-width: 30rem;
}

/* --------------------------- generic layout ---------------------------- */
.grid-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-3-75); align-items: center; }
.grid-split--rev > *:first-child { order: 2; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--gap-1-25); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--gap-1-25); }
@media (max-width: 900px) {
  .grid-split { grid-template-columns: 1fr; }
  .grid-split--rev > *:first-child { order: 0; }
}

/* ------------------------------ collage -------------------------------- */
.collage { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.collage__a { grid-column: 1; }
.collage__b { grid-column: 2; grid-row: 1 / span 2; }
.collage__c { grid-column: 1; }
@media (max-width: 620px) {
  .collage { grid-template-columns: 1fr; }
  .collage__b { grid-column: 1; grid-row: auto; }
}

/* ----------------------------- counters -------------------------------- */
.counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--gap-1-25); }
.counters--bar {
  gap: 1px; border: 1px solid var(--color-black-14); border-radius: var(--radius-lg);
  background: var(--color-black-14); overflow: hidden;
}
.counters--bar .counter { padding: 1.6rem 1.25rem; background: var(--color-white); }
.counter { display: flex; flex-direction: column; gap: .35rem; }
.counter b {
  font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 600;
  line-height: 1; color: var(--color-black); font-variant-numeric: tabular-nums;
}
.counter span {
  font-family: var(--font-display); font-size: .5625rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--color-dark-gray);
  line-height: 1.5;
}
.bg-black .counter b, .bg-black .counter span { color: #fff; }
.bg-black .counter span { color: rgba(255,255,255,.5); }

/* hero stat bar */
.statbar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 1px;
  border: 1px solid var(--color-white-16); border-radius: var(--radius-lg);
  background: var(--color-white-16); overflow: hidden;
}
.statbar__item {
  display: flex; flex-direction: column; gap: .3rem; padding: 1.4rem 1.25rem;
  background: rgba(10,10,10,.55); backdrop-filter: blur(6px);
}
.statbar__item b {
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 600;
  line-height: 1; color: var(--color-lime); font-variant-numeric: tabular-nums;
}
.statbar__item span {
  font-family: var(--font-display); font-size: .625rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55);
}

/* ------------------------------ lists ---------------------------------- */
.card__eyebrow {
  font-family: var(--font-display); font-size: .625rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--color-dark-gray);
}
.tick-list, .cross-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .7rem; }
.tick-list--2col { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1.5rem; }
@media (max-width: 700px) { .tick-list--2col { grid-template-columns: 1fr; } }
.tick-list li, .cross-list li {
  position: relative; padding-left: 1.85rem;
  font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.5em;
  color: var(--color-white-70);
}
.tick-list li::before {
  content: ""; position: absolute; left: 0; top: .25em;
  width: 1.15rem; height: 1.15rem; border-radius: 999px; background: var(--color-lime);
}
.tick-list li::after {
  content: ""; position: absolute; left: .31rem; top: .53em;
  width: .5rem; height: .26rem;
  border-left: 2px solid #111; border-bottom: 2px solid #111; border-radius: 1px;
  transform: rotate(-45deg);
}
.tick-list--dark li { color: var(--color-dark-gray); }
.cross-list li { color: var(--color-dark-gray); }
.cross-list--dark li { color: var(--color-white-70); }
.cross-list li::before {
  content: ""; position: absolute; left: 0; top: .3em;
  width: 1.1rem; height: 1.1rem; border-radius: 999px;
  border: 1px solid currentColor; opacity: .35;
}
.cross-list li::after {
  content: ""; position: absolute; left: .34rem; top: .72em;
  width: .45rem; height: 1px; background: currentColor; opacity: .6;
}

/* ------------------------------ problem -------------------------------- */
.symptom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.symptom {
  padding: 1.1rem 1.25rem; border: 1px solid var(--color-black-14);
  border-radius: var(--radius-lg); background: var(--color-white);
  font-family: var(--font-body); font-size: .9375rem; line-height: 1.4; color: var(--color-black);
}
@media (max-width: 620px) { .symptom-grid { grid-template-columns: 1fr; } }

/* ------------------------------- method -------------------------------- */
.chip-grid { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.base-chip {
  padding: .85rem 1.4rem; border: 1px solid var(--color-black-14); border-radius: 999px;
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 500;
  text-transform: uppercase; color: var(--color-black);
}
.quote {
  max-width: 46rem; margin: 0 auto; padding: 2.5rem 2rem;
  border-top: 1px solid var(--color-black-14); border-bottom: 1px solid var(--color-black-14);
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600;
  line-height: 1.5; text-transform: uppercase; text-align: center; color: var(--color-black);
}
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--gap-1-25); }
.step { padding-top: 1.25rem; border-top: 2px solid var(--color-lime); display: flex; flex-direction: column; gap: .6rem; }
.step__n {
  font-family: var(--font-display); font-size: .625rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--color-dark-gray);
}
.principles { display: flex; flex-direction: column; gap: 1.1rem; }
.principle { display: grid; grid-template-columns: 2.5rem 1fr; gap: .75rem; padding-top: 1rem; border-top: 1px solid var(--color-white-16); }
.principle h3 { margin-bottom: .3rem; }
.principle__n {
  font-family: var(--font-display); font-size: .75rem; font-weight: 600;
  letter-spacing: .08em; color: var(--color-lime); font-variant-numeric: tabular-nums;
}

/* ------------------------------ pillars -------------------------------- */
.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-1-25); }
.pillar-grid__media { grid-column: span 1; grid-row: span 2; aspect-ratio: auto; }
@media (max-width: 1000px) { .pillar-grid { grid-template-columns: repeat(2, 1fr); } .pillar-grid__media { grid-row: auto; grid-column: span 2; aspect-ratio: 16/9; } }
@media (max-width: 620px) { .pillar-grid { grid-template-columns: 1fr; } .pillar-grid__media { grid-column: span 1; } }

.rows { display: flex; flex-direction: column; }
.row-item {
  display: grid; grid-template-columns: 20rem 1fr; gap: var(--gap-1-75);
  padding: 1.7rem 0; border-top: 1px solid var(--color-black-14); align-items: start;
}
.rows--dark .row-item { border-top-color: var(--color-white-16); }
.row-item:last-child { border-bottom: 1px solid var(--color-black-14); }
.rows--dark .row-item:last-child { border-bottom-color: var(--color-white-16); }
@media (max-width: 800px) { .row-item { grid-template-columns: 1fr; gap: .75rem; } }

/* ---------------------------- before / after --------------------------- */
.ba { position: relative; aspect-ratio: 16/10; border-radius: var(--radius-lg); overflow: hidden; user-select: none; }
.ba__pane { position: absolute; inset: 0; }
.ba__pane--before { width: 50%; overflow: hidden; }
.ba__pane--before .slot { position: absolute; inset: 0; width: max(100%, 60vw); }
.ba__pane .slot { height: 100%; border-radius: 0; }
.ba__tag {
  position: absolute; bottom: 1.1rem; z-index: 4;
  padding: .5rem 1rem; border-radius: 999px;
  background: rgba(10,10,10,.75); backdrop-filter: blur(6px);
  font-family: var(--font-display); font-size: .625rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: #fff;
}
.ba__tag--l { left: 1.1rem; }
.ba__tag--r { right: 1.1rem; background: var(--color-lime); color: #111; }
.ba__handle {
  position: absolute; top: 0; bottom: 0; left: 50%; z-index: 5;
  width: 2px; margin-left: -1px; background: var(--color-lime); pointer-events: none;
}
.ba__grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 3rem; height: 3rem;
  border-radius: 999px; background: var(--color-lime); color: #111;
  box-shadow: 0 6px 24px rgba(0,0,0,.4);
}
.ba__grip svg { width: 1.2rem; height: 1.2rem; }
.ba__range {
  position: absolute; inset: 0; z-index: 6;
  width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 3rem; height: 100%; cursor: ew-resize; }
.ba__range::-moz-range-thumb { width: 3rem; height: 100%; border: 0; background: transparent; cursor: ew-resize; }
.ba-label {
  font-family: var(--font-display); font-size: .625rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--color-dark-gray);
}
.ba-label--now { color: var(--color-black); }

/* ----------------------------- calculator ------------------------------ */
.calc {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--gap-1-75);
  padding: var(--space-1-87); border: 1px solid var(--color-white-16);
  border-radius: var(--radius-lg); background: var(--color-black-gray);
}
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } }
.calc__form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-1); align-content: start; }
.field { display: flex; flex-direction: column; gap: .45rem; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-display); font-size: .625rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55);
}
.calc .form-field { height: 3.1rem; padding-inline: 1rem; }
.calc__out {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--space-1-5); border-radius: var(--radius-lg);
  background: rgba(0,0,0,.35); border: 1px solid var(--color-white-16);
}
.res-head { padding-bottom: 1rem; }
.res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.res-tile { display: flex; flex-direction: column; gap: .2rem; padding: 1rem; border-radius: var(--radius-sm); background: rgba(255,255,255,.05); }
.res-tile--hero { grid-column: 1 / -1; background: var(--color-lime); color: #111; }
.res-tile span { font-family: var(--font-display); font-size: .5625rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.res-tile b { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; color: inherit; }
.res-tile:not(.res-tile--hero) b { color: #fff; }
.res-tile em { font-style: normal; font-size: .6875rem; opacity: .55; font-family: var(--font-body); }
.res-meta { display: flex; gap: 1.25rem; padding-top: .9rem; font-family: var(--font-body); font-size: .8125rem; color: rgba(255,255,255,.5); }
.res-meta b { color: #fff; font-variant-numeric: tabular-nums; }

/* ------------------------------- levels -------------------------------- */
.tabs { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.tab {
  padding: .8rem 1.4rem; border: 1px solid var(--color-black-14); border-radius: 999px;
  background: transparent; color: var(--color-black);
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 500;
  text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s, border-color .2s;
}
.tab.is-on { background: var(--color-black); border-color: var(--color-black); color: #fff; }
.tabpane { display: none; }
.tabpane.is-on { display: block; }
.lvl {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--gap-1-75);
  padding: var(--space-1-87); border: 1px solid var(--color-black-14);
  border-radius: var(--radius-lg); background: var(--color-white); align-items: stretch;
}
.lvl--feature { background: var(--color-black); border-color: transparent; }
.lvl--feature .level__for { color: var(--color-white-70); }
.lvl--feature .tick-list li { color: var(--color-white-70); }
.lvl__body { display: flex; flex-direction: column; }
.lvl .slot { height: 100%; }
@media (max-width: 900px) { .lvl { grid-template-columns: 1fr; } }

.grid-3--levels { align-items: stretch; }
.level {
  display: flex; flex-direction: column; gap: .85rem; padding: var(--space-1-87);
  border: 1px solid var(--color-black-14); border-radius: var(--radius-lg); background: var(--color-white);
}
.level--feature { background: var(--color-black); border-color: transparent; }
.level--feature h3, .level--feature .level__for { color: var(--color-white); }
.level--feature .tick-list--dark li { color: var(--color-white-70); }
.level--feature .divider { background: var(--color-white-16); }
.level__tag {
  display: inline-block; align-self: flex-start; padding: .35rem .8rem; border-radius: 999px;
  background: var(--color-lime); color: #111;
  font-family: var(--font-display); font-size: .5625rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.level__for { font-family: var(--font-body); font-size: .9375rem; line-height: 1.5; color: var(--color-dark-gray); }
.level__foot { margin-top: auto; padding-top: 1.25rem; }

/* ------------------------------ metrics -------------------------------- */
.metrics { display: flex; flex-wrap: wrap; gap: .5rem; }
.metric {
  padding: .8rem 1.15rem; border: 1px solid var(--color-black-14); border-radius: 999px;
  font-family: var(--font-body); font-size: .9375rem; color: var(--color-black);
}

/* ------------------------------ numbers -------------------------------- */
.numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--gap-1); }
.numbers--inline { grid-template-columns: repeat(3, 1fr); }
.number { display: flex; flex-direction: column; gap: .35rem; padding: 1.5rem 1.25rem; border: 1px solid var(--color-white-16); border-radius: var(--radius-lg); }
.number--feature { background: var(--color-lime); border-color: transparent; }
.number b { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 600; line-height: 1; color: var(--color-white); font-variant-numeric: tabular-nums; }
.number span { font-family: var(--font-display); font-size: .5625rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.number--feature b { color: #111; }
.number--feature span { color: rgba(17,17,17,.6); }

/* ----------------------------- 10 day strip ---------------------------- */
.days { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: .5rem; }
.day { display: flex; flex-direction: column; gap: .5rem; padding: 1.15rem; border: 1px solid var(--color-black-14); border-radius: var(--radius-lg); background: var(--color-white); }
.day--mark { background: var(--color-lime); border-color: transparent; }
.day b { font-family: var(--font-display); font-size: .75rem; font-weight: 600; letter-spacing: .1em; color: var(--color-dark-gray); font-variant-numeric: tabular-nums; }
.day--mark b { color: rgba(17,17,17,.65); }
.day span { font-family: var(--font-body); font-size: .875rem; line-height: 1.4; color: var(--color-black); }

.reset-side { display: flex; flex-direction: column; }
.gate-band { display: grid; grid-template-columns: 1fr auto; gap: var(--gap-1-75); align-items: center; padding: var(--space-1-87); border-radius: var(--radius-lg); background: var(--color-black); }
.gate-band__form { display: flex; gap: .5rem; }
.gate-band__form .form-field { width: 18rem; }
.gate-band__btn { width: auto; white-space: nowrap; }
@media (max-width: 900px) {
  .gate-band { grid-template-columns: 1fr; }
  .gate-band__form { flex-direction: column; }
  .gate-band__form .form-field { width: 100%; }
}
.gate-card { align-self: stretch; }

/* --------------------------- evidence strip ---------------------------- */
.strip-lab {
  font-family: var(--font-display); font-size: .625rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--color-dark-gray);
}
.logo-strip { display: flex; flex-wrap: wrap; gap: var(--gap-1); justify-content: center; }

/* ------------------------------- team ---------------------------------- */
.team-card { position: relative; }
.team-card .slot { border-radius: var(--radius-md); }
.team-card__info {
  position: absolute; left: 0; bottom: 1.5rem;
  display: flex; flex-direction: column; gap: .1rem;
  padding: .8rem 1.5rem .8rem 1.4rem;
  border-radius: 0 999px 999px 0; background: var(--color-lime); color: #111;
}

/* -------------------------------- FAQ ---------------------------------- */
.faq-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--gap-3-75); align-items: start; }
@media (max-width: 900px) { .faq-layout { grid-template-columns: 1fr; } }
.faq-q { border-bottom: 1px solid var(--color-black-14); }
.faq-q summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.4rem 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600;
  text-transform: uppercase; color: var(--color-black);
}
.faq-q summary::-webkit-details-marker { display: none; }
.faq-q__ico {
  display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem;
  border-radius: var(--radius-lg); background: var(--color-off-white); color: var(--color-black);
}
.faq-q[open] .faq-q__ico { background: var(--color-lime); }
.faq-q__ico svg { width: 1rem; height: 1rem; }
.faq-q[open] .faq-q__ico .ic-plus { display: none; }
.faq-q:not([open]) .faq-q__ico .ic-minus { display: none; }
.faq-q__body { padding: 0 0 1.5rem; max-width: 42rem; }

/* ------------------------------ journal -------------------------------- */
.journal-head { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; }
.post { display: flex; flex-direction: column; gap: 1rem; text-decoration: none; }
.post__body { display: flex; flex-direction: column; gap: .5rem; }
.post__meta { font-family: var(--font-display); font-size: .5625rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-dark-gray); }
.post:hover h3 { color: var(--color-dark-gray); }

/* ------------------------------ contact -------------------------------- */
.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 620px) { .contact-row { grid-template-columns: 1fr; } }

/* ------------------------------- footer -------------------------------- */
.footer-sec { background: var(--color-black); }
.footer-top { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--gap-3-75); }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-1-25); }
.footer-cols > div { display: flex; flex-direction: column; gap: .6rem; }
.footer-cols a { font-family: var(--font-body); font-size: .9375rem; color: var(--color-white-70); text-decoration: none; transition: color .2s; }
.footer-cols a:hover { color: var(--color-lime); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr; } .footer-cols { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------- micro --------------------------------- */
.micro { font-family: var(--font-body); font-size: .75rem; line-height: 1.6; color: rgba(255,255,255,.45); }
.micro--dark { color: var(--color-dark-gray); }
.micro--legal { max-width: 52rem; }

:focus-visible { outline: 2px solid var(--color-lime); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* =======================================================================
   v3 — components added in the revision pass (later rules win)
   ======================================================================= */

.hero-sec { padding-top: 4rem; }
.slot--fill { position: absolute; inset: 0; height: 100%; }

/* ---- hero explainer video thumbnail ---- */
.vthumb { position: relative; margin: 0; aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden; }
.vthumb__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  display: grid; place-items: center; width: 5rem; height: 5rem;
  border: 0; border-radius: 999px; background: var(--color-lime); color: #111;
  cursor: pointer; z-index: 3; box-shadow: 0 10px 40px rgba(0,0,0,.45);
  transition: transform .25s var(--ease);
}
.vthumb__play:hover { transform: translate(-50%,-50%) scale(1.08); }
.vthumb__play svg { width: 1.6rem; height: 1.6rem; margin-left: .15rem; }
.vthumb__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; flex-direction: column; gap: .2rem;
  padding: 3rem 1.4rem 1.4rem;
  background: linear-gradient(to top, rgba(0,0,0,.85), transparent);
}
.vthumb__name { font-family: var(--font-display); font-size: var(--fs-base); font-weight: 600; text-transform: uppercase; color: #fff; }
.vthumb__meta { font-family: var(--font-body); font-size: .8125rem; color: rgba(255,255,255,.65); }

/* ---- problem: symptom → cause ---- */
.cause-list { display: flex; flex-direction: column; }
.cause {
  display: grid; grid-template-columns: 1.15fr 2.5rem 1fr 1fr; gap: var(--gap-1-25);
  align-items: start; padding: 1.7rem 0; border-top: 1px solid var(--color-black-14);
}
.cause:last-child { border-bottom: 1px solid var(--color-black-14); }
.cause__lab {
  display: block; margin-bottom: .5rem;
  font-family: var(--font-display); font-size: .5625rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--color-dark-gray);
}
.cause__arrow { display: grid; place-items: center; padding-top: 1.6rem; color: var(--color-lime); }
.cause__arrow svg { width: 1.1rem; height: 1.1rem; }
.cause__fix { padding-left: 1.25rem; border-left: 2px solid var(--color-lime); }
@media (max-width: 900px) {
  .cause { grid-template-columns: 1fr; gap: 1rem; }
  .cause__arrow { display: none; }
  .cause__fix { padding-left: 1rem; }
}

/* ---- problem: then / now table ---- */
.then-now { display: flex; flex-direction: column-reverse; border-top: 1px solid var(--color-black-14); }
.then-now__row, .then-now__head { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: .75rem; padding: .85rem 0; border-bottom: 1px solid var(--color-black-14); }
.then-now__head { border-bottom: 0; border-top: 0; padding-bottom: .5rem; }
.then-now__k { font-family: var(--font-body); font-size: .875rem; color: var(--color-black); }
.then-now__a { font-family: var(--font-body); font-size: .875rem; color: var(--color-dark-gray); }
.then-now__b { font-family: var(--font-body); font-size: .875rem; color: var(--color-black); font-weight: 500; }
.then-now__hl { font-family: var(--font-display); font-size: .5625rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-dark-gray); }
@media (max-width: 620px) { .then-now__row, .then-now__head { grid-template-columns: 1fr; gap: .2rem; } .then-now__head { display: none; } }

/* ---- system: LiftLab services layout ---- */
.svc-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; }
.svc-grid { display: grid; grid-template-columns: 1fr 1.55fr; gap: var(--gap-1-25); align-items: stretch; }
.svc-right { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-1-25); }
.svc-card {
  display: flex; flex-direction: column; height: 100%;
  padding: var(--space-1-5) var(--space-1-87) var(--space-1-87);
  border-radius: var(--radius-lg); background: var(--color-black-gray); color: #fff;
}
.svc-card--tall { justify-content: flex-start; }
.svc-card--tall .svc-card__bottom { margin-top: auto; }
.svc-card--wide { grid-column: 1 / -1; }
.svc-card__wide-in { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--gap-1-75); align-items: center; }
.svc-card__n { font-family: var(--font-display); font-size: .5625rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--color-lime); }
.svc-card__n--dark { color: rgba(17,17,17,.55); }
.svc-card.is-lime { background: var(--color-lime); color: #111; }
.metric-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.mchip {
  padding: .45rem .8rem; border: 1px solid var(--color-white-16); border-radius: 999px;
  font-family: var(--font-body); font-size: .75rem; color: rgba(255,255,255,.75);
}
@media (max-width: 1000px) { .svc-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .svc-right { grid-template-columns: 1fr; } .svc-card__wide-in { grid-template-columns: 1fr; } }

.tick-list--tight { gap: .5rem; }
.tick-list--tight li { font-size: .9375rem; padding-left: 1.7rem; }

/* ---- calculator v3 ---- */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-1-25); padding: 0; border: 0; background: none; }
.calc__side {
  display: flex; flex-direction: column;
  padding: var(--space-1-87); border: 1px solid var(--color-white-16);
  border-radius: var(--radius-lg); background: var(--color-black-gray);
}
.calc__side--out { background: rgba(255,255,255,.03); }
.calc__step { font-family: var(--font-display); font-size: .5625rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--color-lime); }
.calc__live { padding: 1.1rem 1.25rem; border-radius: var(--radius-sm); background: rgba(0,0,0,.35); border: 1px solid var(--color-white-16); }
.calc__livelab {
  display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .65rem;
  font-family: var(--font-display); font-size: .5625rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5);
}
.calc__dot { width: .4rem; height: .4rem; border-radius: 999px; background: var(--color-lime); }
.calc__dot.is-busy { animation: pulse .5s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.calc__liverow {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .4rem 0;
  font-family: var(--font-body); font-size: .8125rem; color: rgba(255,255,255,.55);
}
.calc__liverow b { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }

.lockwrap { position: relative; }
.lockwrap.is-locked .res-grid { filter: blur(9px); opacity: .55; pointer-events: none; }
.lock {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  padding: 1.4rem; border-radius: var(--radius-lg);
  background: rgba(14,14,14,.72); backdrop-filter: blur(2px);
  border: 1px solid var(--color-white-16);
}
.lockwrap:not(.is-locked) .lock { display: none; }
.lock__ico { color: var(--color-lime); }
.lock__ico svg { width: 1.4rem; height: 1.4rem; }

.incl { padding: 1.25rem; border-radius: var(--radius-lg); border: 1px dashed var(--color-white-16); }
.incl__lab { font-family: var(--font-display); font-size: .5625rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.incl__row { display: grid; grid-template-columns: 7rem 1fr; gap: 1.1rem; align-items: start; }
.incl__img { min-height: 0; }
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .incl__row { grid-template-columns: 1fr; } }

/* ---- plans (LiftLab pricing layout) ---- */
.save-tag { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; color: #fff; }
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-1-25); align-items: stretch; }
.plan {
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg); background: var(--color-black-gray);
  border: 1px solid var(--color-white-16); overflow: hidden;
}
.plan--feature { background: var(--color-lime); border-color: transparent; }
.plan__body { display: flex; flex-direction: column; flex: 1; padding: var(--space-1-87); }
.plan__bottom { margin-top: auto; }
.plan__price { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 600; line-height: 1; color: #fff; }
.plan__price--dark { color: #111; }
.plan__per { display: block; margin-top: .45rem; font-size: .625rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.plan__img { border-radius: 0; }
.plan--feature .tick-list li::before { background: #111; }
.plan--feature .tick-list li::after { border-color: var(--color-lime); }
@media (max-width: 1000px) { .plan-grid { grid-template-columns: 1fr; } }

/* ---- testimonials (LiftLab layout) ---- */
.tst-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-1-25); align-items: start; }
.tst-col { display: flex; flex-direction: column; gap: var(--gap-1-25); }
.tst-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: 3rem;
  padding: var(--space-1-87); border-radius: var(--radius-lg);
  background: var(--color-black); color: #fff;
}
.tst-card--lime { background: var(--color-lime); color: #111; }
.tst-card__top svg { width: 3rem; height: auto; color: var(--color-lime); }
.tst-card--lime .tst-card__top svg { color: #111; }
.tst-quote { margin: 0; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 500; line-height: 1.5; color: inherit; }
.tst-card__bottom { display: flex; align-items: center; gap: .75rem; }
@media (max-width: 1000px) { .tst-grid { grid-template-columns: 1fr; } }

/* ---- contact (LiftLab layout) ---- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: var(--gap-3-75); align-items: start; }
.contact-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.contact-info-card {
  display: flex; align-items: center; gap: var(--gap-0-88);
  padding: var(--space-1) var(--space-1-25);
  border: 1px solid var(--color-black-14); border-radius: var(--radius-lg);
  background: var(--color-white); color: var(--color-black);
}
.contact-info-card.is-lime { background: var(--color-lime); border-color: transparent; }
.contact-info-card p { font-size: .75rem; margin-bottom: .1rem; }
.contact-info-card a { text-decoration: none; }
.cform { display: flex; flex-direction: column; gap: var(--gap-1-25); }
.cform .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-1-25); }
.cform .group { display: flex; flex-direction: column; gap: .55rem; }
.cform .group--full { grid-column: 1 / -1; }
.cform label { font-size: .8125rem; }
.cform textarea.form-field { min-height: 8rem; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } .contact-info-grid { grid-template-columns: 1fr; } .cform .row { grid-template-columns: 1fr; } }

.counters--2 { grid-template-columns: 1fr 1fr; }

/* ---- pull statement: sentence case, NOT the uppercase UI label style ----
   .font-l is a uppercase label style and must never carry a full sentence.
   Statements that close a block use this instead.                        */
.pull {
  max-width: 34rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.005em;
  text-transform: none;
  color: var(--color-black);
  text-wrap: pretty;
}
.pull--dark { color: #fff; }
.pull--quote {
  padding-left: 1.25rem;
  border-left: 2px solid var(--color-lime);
  font-style: normal;
}
.pull--quote::before { content: "\201C"; }
.pull--quote::after  { content: "\201D"; }

/* ---- founder section: photos → story → numbers, in that order ---- */
.ba-fig { margin: 0; display: flex; flex-direction: column; gap: .85rem; }
.ba-fig__cap { display: flex; align-items: baseline; gap: .6rem; }
.ba-fig__note {
  font-family: var(--font-body); font-size: .8125rem; color: var(--color-dark-gray);
}
.ba-fig__note--now { color: var(--color-black); }

.founder { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--gap-3-75); align-items: start; }
.founder__story { max-width: 38rem; }
.founder__data {
  padding: var(--space-1-87);
  border: 1px solid var(--color-black-14);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}
.founder__lab {
  font-family: var(--font-display); font-size: .5625rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--color-dark-gray);
}
.founder__data .counters--bar { border-color: var(--color-black-14); background: var(--color-black-14); }
@media (max-width: 900px) { .founder { grid-template-columns: 1fr; } }

/* =======================================================================
   v6 — pass over layout details
   ======================================================================= */

/* Full-width button that keeps the pill anatomy: label left, chip hard right.
   Replaces the left-aligned .btn--submit slab, which read as an input field. */
.btn--wide {
  display: flex;
  justify-content: space-between;
  width: 100%;
  border: 0;
  font-family: var(--font-display);
  text-align: left;
}
.cform__submit { max-width: 22rem; }

/* header block used by the LiftLab-style split section headers */
.section-header-item-block { display: flex; flex-direction: column; align-items: center; }
.section-header-item-block.left { align-items: flex-start; text-align: left; }

/* tall feature card: copy flows, image pins to the bottom */
.svc-card--tall .svc-card__bottom { margin-top: 0; }
.svc-card--tall > .slot--16x10 { margin-top: auto; }

/* plan image sits flush at the card foot */
.plan__img { border-radius: 0; margin-top: auto; }
.plan__top { display: flex; flex-direction: column; }

/* seam between two consecutive dark sections so they don't merge into one slab */
.section.bg-black + .sec .section.bg-black,
.seam { border-top: 1px solid rgba(255,255,255,.09); }

/* the levels heading column shouldn't collapse to nothing beside the save tag */
.svc-header__right { flex: none; }
@media (max-width: 700px) { .svc-header { align-items: flex-start; } }

/* form labels: .font-r is uppercase 600 — too heavy at field scale */
.cform label.font-r, .field label {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
}
.cform label.font-r { color: var(--color-dark-gray); }

/* first-person statement — same emphasis as a pull quote, but no quote marks,
   because the whole page is already in Tomas's voice */
.pull--stmt { padding-left: 1.25rem; border-left: 2px solid var(--color-lime); }
#transformation .pull--stmt { font-size: 1.0625rem; line-height: 1.65; max-width: 36rem; }
.signature {
  font-family: var(--font-display);
  font-size: .8125rem; font-weight: 500;
  color: var(--color-dark-gray);
}

/* =======================================================================
   v8 — tick centring, badge chips, per-row problem icons
   ======================================================================= */

/* Checkmark: the old two-pseudo hack rotated a bordered box and never landed
   on the circle's centre. Centre it with an SVG instead — deterministic. */
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .2em;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  background-color: var(--color-lime);
  background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5.5 12.5l4.5 4.5L18.5 7.5'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: .7rem .7rem;
  transform: none;
}
.tick-list li::after { content: none; }
.plan--feature .tick-list li::before {
  background-color: #111;
  background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5.5 12.5l4.5 4.5L18.5 7.5'/></svg>");
}

/* Badge chips: smaller, and each section now carries its own glyph */
.badge-icon { padding: .28rem; }
.badge-icon > svg, .badge-icon > img { width: .8125rem; height: .8125rem; }
.contact-info-card .badge-icon { padding: .5rem; }
.contact-info-card .badge-icon > svg { width: 1rem; height: 1rem; }

/* Problem rows: panels with a per-row icon, no repeated arrow column */
.cause-list { gap: .75rem; }
.cause {
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: var(--gap-1-75);
  padding: var(--space-1-5) var(--space-1-87);
  border: 1px solid var(--color-black-14);
  border-top: 1px solid var(--color-black-14);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  align-items: start;
}
.cause:last-child { border-bottom: 1px solid var(--color-black-14); }
.cause__sym { display: flex; gap: .85rem; align-items: flex-start; }
.cause__ico {
  display: grid; place-items: center; flex: none;
  width: 2.4rem; height: 2.4rem;
  border-radius: var(--radius-md);
  background: var(--color-off-white);
  color: var(--color-black);
}
.cause__ico svg { width: 1.15rem; height: 1.15rem; }
.cause__fix { padding-left: 1.1rem; border-left: 2px solid var(--color-lime); }
@media (max-width: 900px) {
  .cause { grid-template-columns: 1fr; gap: 1.1rem; padding: var(--space-1-25); }
  .cause__fix { padding-left: 1rem; }
}

/* =======================================================================
   v9 — tables, joined before/after, plan clarity, motion, sticky CTA
   ======================================================================= */

/* ---- then / now table: header first, rule beneath it ---- */
.then-now { display: flex; flex-direction: column; border-top: 0; }
.then-now__head {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: .75rem;
  padding: 0 0 .6rem;
  border-bottom: 1px solid var(--color-black);
}
.then-now__head > span:first-child {
  font-family: var(--font-display); font-size: .5625rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--color-dark-gray);
}
.then-now__row { border-bottom: 1px solid var(--color-black-14); }
.then-now__row:last-child { border-bottom: 0; }

/* ---- cross-list dash: same centring bug as the tick, same fix ---- */
.cross-list li::before {
  content: "";
  position: absolute; left: 0; top: .2em;
  width: 1.1rem; height: 1.1rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  opacity: .3;
  background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='3' stroke-linecap='round'><path d='M7 12h10'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: .7rem .7rem;
}
.cross-list li::after { content: none; }

/* ---- before / after: two frames butted together, one outer radius ---- */
.ba-pair {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.ba-pair__item { position: relative; }
.ba-pair__item + .ba-pair__item { box-shadow: inset 1px 0 0 rgba(255,255,255,.16); }
.slot--flat { border-radius: 0; }
.ba-pair__tag {
  position: absolute; left: .9rem; bottom: .9rem; z-index: 3;
  padding: .4rem .8rem; border-radius: 999px;
  background: rgba(10,10,10,.72); backdrop-filter: blur(6px);
  font-family: var(--font-display); font-size: .5625rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: #fff;
}
.ba-pair__tag--now { background: var(--color-lime); color: #111; }
@media (max-width: 520px) { .ba-pair { grid-template-columns: 1fr; } .ba-pair__item + .ba-pair__item { box-shadow: inset 0 1px 0 rgba(255,255,255,.16); } }

/* ---- plans: say what you get, and never white type on lime ---- */
.plan { position: relative; }
.plan__flag {
  position: absolute; top: 0; right: var(--space-1-87); z-index: 2;
  padding: .4rem .85rem; border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--color-black); color: var(--color-lime);
  font-family: var(--font-display); font-size: .5625rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.plan__flag--quiet { background: rgba(255,255,255,.12); color: #fff; }
.plan__get {
  padding: 1rem 1.15rem;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.06);
  border-left: 2px solid var(--color-lime);
}
.plan__get--dark { background: rgba(17,17,17,.10); border-left-color: #111; }
.plan__getlab {
  display: block; margin-bottom: .4rem;
  font-family: var(--font-display); font-size: .5625rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; opacity: .6;
}
.plan__gettxt { margin: 0; font-family: var(--font-body); font-size: .9375rem; line-height: 1.55; }
.plan__best { font-family: var(--font-body); font-size: .875rem; line-height: 1.55; color: rgba(255,255,255,.6); }
.plan__best b { color: #fff; font-weight: 500; }

/* Lime is never paired with white type — enforce across the whole card. */
.plan--feature,
.plan--feature .plan__gettxt,
.plan--feature .plan__best,
.plan--feature .plan__best b,
.plan--feature .tick-list li,
.plan--feature .font-r,
.plan--feature h3 { color: var(--color-black); }
.plan--feature .plan__best { color: rgba(17,17,17,.72); }

/* =======================================================================
   MOTION
   ======================================================================= */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* FAQ: animated open/close (details does not transition on its own) */
.faq-q__body {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: height .38s cubic-bezier(.22,1,.36,1), opacity .28s ease;
}
.faq-q.is-open .faq-q__body { opacity: 1; }
.faq-q summary { transition: color .2s ease; }
.faq-q summary:hover { color: var(--color-dark-gray); }
.faq-q__ico { transition: background-color .3s ease, transform .35s cubic-bezier(.22,1,.36,1); }
.faq-q.is-open .faq-q__ico { transform: rotate(180deg); }

/* magnetic play button */
.vthumb__play {
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
  will-change: transform;
}
.vthumb.is-near .vthumb__play { box-shadow: 0 14px 50px rgba(0,0,0,.55); }

/* hover lifts */
.plan, .svc-card, .tst-card, .cause { transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease; }
.plan:hover, .svc-card:hover { transform: translateY(-4px); }
.metric:hover, .mchip:hover, .base-chip:hover { border-color: var(--color-lime); }
.metric, .mchip, .base-chip { transition: border-color .25s ease, color .25s ease; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .faq-q__body { transition: none; }
  .vthumb__play { transition: none; }
  .plan:hover, .svc-card:hover { transform: none; }
}

/* =======================================================================
   STICKY CTA
   ======================================================================= */
.stickycta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
  transform: translateY(110%);
  transition: transform .45s cubic-bezier(.22,1,.36,1);
  background: rgba(12,12,12,.94);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,.12);
}
.stickycta.is-on { transform: none; }
.stickycta__in {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: .85rem var(--space-1);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; flex-wrap: wrap;
}
.stickycta__txt { display: flex; flex-direction: column; gap: .15rem; }
.stickycta__txt b {
  font-family: var(--font-display); font-size: .8125rem; font-weight: 600;
  text-transform: uppercase; color: #fff;
}
.stickycta__txt span { font-family: var(--font-body); font-size: .8125rem; color: rgba(255,255,255,.6); }
.stickycta__btns { display: flex; gap: .5rem; flex-wrap: wrap; }
@media (max-width: 760px) {
  .stickycta__txt span { display: none; }
  .stickycta__alt { display: none; }
  .stickycta__in { padding: .7rem 1rem; }
}

/* review chrome moves out of the sticky CTA's way */

/* ---- tabs on a dark section (Levels moved to bg-black; tabs never followed) ---- */
.tabs { justify-content: flex-start; gap: .4rem; padding: .35rem; border-radius: 999px; align-self: flex-start; }
.bg-black .tabs { background: rgba(255,255,255,.06); border: 1px solid var(--color-white-16); display: inline-flex; }
.bg-black .tab {
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.62);
}
.bg-black .tab:hover { color: #fff; }
.bg-black .tab.is-on {
  background: var(--color-lime);
  color: #111;
}
.tab { padding: .65rem 1.35rem; }

/* all rules in the then/now table are the same hairline — the header is
   already distinguished by its label styling, it does not need a heavier rule */
.then-now__head { border-bottom: 1px solid var(--color-black-14); }

/* =======================================================================
   v11
   ======================================================================= */

/* Section eyebrows: drop the filled chip. An icon inside a dark circle sitting
   beside a short label read as a broken bullet rather than a marker. */
.section-badge .badge-icon {
  padding: 0;
  background: none;
  border-radius: 0;
  color: var(--color-lime);
}
.section-badge .badge-icon > svg { width: 1rem; height: 1rem; }
.section-badge { gap: .5rem; }
.bg-light .section-badge .badge-icon,
.section:not(.bg-black) .section-badge .badge-icon { color: var(--color-black); }
.bg-black .section-badge .badge-icon { color: var(--color-lime); }

/* calculator: idle before the user touches anything */
.lock__idle, .lock__ready { display: flex; flex-direction: column; }
.lockwrap:not(.is-touched) .res-grid { filter: blur(11px); opacity: .28; }
.lock__ico { color: var(--color-lime); }
.lock__ico svg { width: 1.4rem; height: 1.4rem; }
.calc__liverow b { color: rgba(255,255,255,.35); }
.lockwrap.is-touched ~ * .calc__liverow b { color: #fff; }
.calc__side:has(.lockwrap.is-touched) .calc__liverow b { color: #fff; }

/* plan bullets that are direct time with Tomas */
.tick-list li.is-me { color: #fff; font-weight: 500; }
.tick-list li.is-me::before {
  background-color: var(--color-lime);
  box-shadow: none;
}
.plan--feature .tick-list li.is-me { color: #111; }
.plan--feature .tick-list li.is-me::before {
  background-color: #111;
  box-shadow: 0 0 0 3px rgba(17,17,17,.16);
}
.me-key {
  display: block;
  font-family: var(--font-body);
  font-size: .75rem;
  color: rgba(255,255,255,.42);
}
.me-key--dark { color: rgba(17,17,17,.5); }

/* in-page links glide instead of jumping */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
[id] { scroll-margin-top: 4.5rem; }

/* contact: the photo column matches the form's height instead of stopping short */
.contact-grid { align-items: stretch; }
.contact-left { display: flex; flex-direction: column; }
.contact-left > .slot {
  flex: 1 1 auto;
  aspect-ratio: auto;
  min-height: 20rem;
}
@media (max-width: 900px) {
  .contact-left > .slot { aspect-ratio: 4 / 5; flex: 0 0 auto; min-height: 0; }
}

/* =======================================================================
   v13 — calculator as a sequential flow
   ======================================================================= */
.calcflow { max-width: 46rem; margin-inline: auto; }

.cstep {
  border: 1px solid var(--color-white-16);
  border-radius: var(--radius-lg);
  background: var(--color-black-gray);
  opacity: .48;
  transition: opacity .45s ease, border-color .45s ease, background-color .45s ease;
}
.cstep.is-active { opacity: 1; border-color: rgba(255,255,255,.26); }
.cstep.is-done { opacity: .72; }

.cstep__head {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: var(--space-1-5) var(--space-1-87);
  border-bottom: 1px solid var(--color-white-16);
}
.cstep__head h3 { margin-bottom: .3rem; }
.cstep__n {
  display: grid; place-items: center; flex: none;
  width: 2.1rem; height: 2.1rem;
  border-radius: 999px;
  border: 1px solid var(--color-white-16);
  background: transparent;
  color: rgba(255,255,255,.5);
  font-family: var(--font-display); font-size: .75rem; font-weight: 600;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.cstep.is-active .cstep__n { background: var(--color-lime); border-color: transparent; color: #111; }
.cstep.is-done .cstep__n { background: var(--accent-12); border-color: transparent; color: var(--color-lime); }
.cstep__body { padding: var(--space-1-87); }

.cstep__link {
  width: 1px; height: 2rem; margin-inline: auto;
  background: linear-gradient(to bottom, var(--color-white-16), transparent);
}

/* waiting / loading / result states */
.cwait { padding: 1.25rem 0; }
.cwait b { color: #fff; font-weight: 500; }

.cload__bar { height: 2px; background: rgba(255,255,255,.12); border-radius: 2px; overflow: hidden; }
.cload__bar > span {
  display: block; height: 100%; width: 0%;
  background: var(--color-lime);
  transition: width .35s linear;
}
.cload__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.cload__list li {
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--font-body); font-size: .9375rem;
  color: rgba(255,255,255,.35);
  transition: color .3s ease;
}
.cload__list li.is-done { color: rgba(255,255,255,.85); }
.cload__tick {
  display: grid; place-items: center; flex: none;
  width: 1.1rem; height: 1.1rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  color: transparent;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.cload__tick svg { width: .62rem; height: .62rem; }
.cload__list li.is-done .cload__tick {
  background: var(--color-lime); border-color: transparent; color: #111;
}
.cload__v {
  margin-left: auto;
  font-family: var(--font-display); font-size: .8125rem; font-weight: 600;
  color: var(--color-lime); font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity .3s ease;
}
.cload__list li.is-done .cload__v { opacity: 1; }

.cresult { animation: fadeUp .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.res-meta__note { margin-left: auto; opacity: .6; }

.calc__form { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .calc__form { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .cresult { animation: none; } }

/* free-start section: pitch sticky on the left, the flow scrolling on the right */
.startgrid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--gap-3-75);
  align-items: start;
}
.startgrid__aside { position: sticky; top: 5.5rem; }
.startgrid .calcflow { max-width: none; margin-inline: 0; }
@media (max-width: 1000px) {
  .startgrid { grid-template-columns: 1fr; }
  .startgrid__aside { position: static; }
}

/* three programmes across */
.plan-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .plan-grid { grid-template-columns: 1fr; } }

/* before / after frames run taller — a standing figure needs the height */
.ba-pair .slot { aspect-ratio: 2 / 3; }
@media (max-width: 520px) { .ba-pair .slot { aspect-ratio: 4 / 5; } }

/* no glow ring on the highlighted ticks — the brighter text already carries it */
.tick-list li.is-me::before,
.plan--feature .tick-list li.is-me::before { box-shadow: none; }

/* the discount belongs beside the control that unlocks it, not in the header */
.billing { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; }
.save-tag {
  padding: .4rem .8rem;
  border-radius: 999px;
  background: var(--accent-14);
  border: 1px solid var(--accent-32);
  color: var(--color-lime);
  font-family: var(--font-display);
  font-size: .625rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.billing.is-quarterly .save-tag { opacity: 1; transform: none; }

/* discount lives inside the 3-month option so it is visible before you pick it */
.tab { display: inline-flex; align-items: center; gap: .5rem; }
.tab__save {
  padding: .2rem .5rem;
  border-radius: 999px;
  background: var(--accent-16);
  color: var(--color-lime);
  font-size: .5625rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background-color .25s ease, color .25s ease;
}
.bg-black .tab.is-on .tab__save { background: rgba(17,17,17,.16); color: #111; }

/* Level 1's button was the same colour as its own card. Ghost style instead:
   quiet enough to sit below Level 2/3 in the hierarchy, but actually visible. */
.btn--ghost {
  background: transparent;
  border-color: rgba(255,255,255,.32);
  color: #fff;
}
.btn--ghost .btn__chip { background: var(--color-lime); color: #111; }
.btn--ghost:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.5); }

/* ghost button needed an actual resting state — a 32% hairline on a dark card
   read as nothing until hover */
.btn--ghost {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.55);
  color: #fff;
}
.btn--ghost:hover { background: rgba(255,255,255,.22); border-color: #fff; }

/* =======================================================================
   CUT-OUTS — transparent PNGs that break the edge of their container
   ======================================================================= */
.has-cut { position: relative; overflow: visible; }
.cutout {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 26px 44px rgba(0,0,0,.5));
}
.cutout .slot { height: 100%; background: none; box-shadow: none; }
.slot--cut {
  border: 1px dashed var(--accent-50);
  border-radius: var(--radius-md);
  background:
    repeating-conic-gradient(rgba(255,255,255,.05) 0% 25%, transparent 0% 50%) 50% / 16px 16px;
}
.slot--cut::before, .slot--cut::after { display: none; }

/* arm bleeding off the lower-right of the monitoring card */
.cutout--arm { right: -2.5rem; bottom: -3rem; width: 13rem; height: 15rem; }

/* bowl tucked into the top-right of the free-plan pitch */
.cutout--bowl { right: -3rem; top: -4rem; width: 11rem; height: 11rem; }

/* Tomas cutting in from the left of the apply section */
.cutout--tomas { left: -6rem; bottom: 0; width: 15rem; height: 26rem; }

@media (max-width: 1250px) { .cutout--tomas { display: none; } }
@media (max-width: 1000px) { .cutout--arm, .cutout--bowl { display: none; } }
body.slots-off .slot--cut { border-color: transparent; }

/* =======================================================================
   real images in place of spec slots
   ======================================================================= */
.slot.has-img {
  padding: 0;
  background: none;
  box-shadow: none;
  border: 0;
}
.slot.has-img::before, .slot.has-img::after { display: none; }
.slot.has-img > .slot__id,
.slot.has-img > .slot__type,
.slot.has-img > .slot__desc,
.slot.has-img > .slot__spec { display: none; }
.slot.has-img > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--fit, cover);
  border-radius: inherit;
}
.slot--avatar.has-img > img { border-radius: 999px; }
.slot--cut.has-img { border: 0; background: none; }
.ba-pair .slot.has-img { border-radius: 0; }

/* =======================================================================
   v26 — glyph icons, cut-out alignment, Level 3 figure
   ======================================================================= */

/* filled glyph icons inherit page colour (source files are black) */
.pil-icon { width: 2.75rem; height: 2.75rem; display: block; fill: currentColor; color: var(--color-lime); }
.svc-card.is-lime .pil-icon { color: #111; }

/* cut-outs: source PNGs are all 3:4, so the frame matches and nothing letterboxes */
.cutout .slot.has-img > img { object-fit: contain; object-position: bottom center; }
.cutout--arm  { right: -2rem; bottom: -2.5rem; width: 11rem; aspect-ratio: 3/4; height: auto; }
.cutout--bowl { right: -2.5rem; top: -3.5rem; width: 9rem; aspect-ratio: 3/4; height: auto; }

/* Tomas stands on top of the Level 3 card */
.plan--l3 { overflow: visible; }
.cutout--tomas {
  left: 50%; transform: translateX(-50%);
  top: -13.5rem; width: 10.5rem; aspect-ratio: 3/4; height: auto;
  bottom: auto; right: auto;
}
@media (min-width: 1001px) { .plan-grid { padding-top: 11rem; } }
@media (max-width: 1000px) { .cutout--tomas { display: none; } }

/* -----------------------------------------------------------------------
   cut-out sizing, properly this time.

   The frames had a fixed aspect-ratio and the image inside was stretched to
   height:100%, so any mismatch between frame and file letterboxed the PNG and
   the subject drifted off its anchor. Let the image set its own height instead
   — the file is already a cut-out with its own padding, so nothing else is
   needed and no ratio can ever disagree.
   ----------------------------------------------------------------------- */
.cutout { height: auto !important; aspect-ratio: auto !important; }
.cutout .slot,
.cutout .slot.has-img {
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  border-radius: 0;
}
.cutout .slot.has-img > img {
  width: 100%;
  height: auto;
  object-fit: fill;
  border-radius: 0;
}

/* anchors: width only, the image supplies the rest */
.cutout--arm   { right: -1.5rem; bottom: -2rem; top: auto; left: auto; width: 10.5rem; }
.cutout--bowl  { right: -2.25rem; top: -3rem; bottom: auto; left: auto; width: 8.5rem; }
.cutout--tomas { left: 50%; transform: translateX(-50%); top: auto; bottom: 100%; right: auto; width: 10.5rem; margin-bottom: -1rem; }

/* keep the monitoring card's chips clear of the arm */
/* arm cut-out removed — chips reclaim the full card width */

/* bowl sits as a cut-out inside the nutrition card instead of a framed photo */
.bowl-wrap { margin-top: auto; padding-top: var(--space-1-87); display: flex; justify-content: center; }
.bowl-wrap .slot { width: 78%; max-width: 15rem; height: auto; min-height: 0; aspect-ratio: auto; border: 0; background: none; }
.bowl-wrap .slot.has-img > img { width: 100%; height: auto; object-fit: fill; filter: drop-shadow(0 22px 34px rgba(0,0,0,.55)); }

/* -----------------------------------------------------------------------
   Per-image crop anchoring. INT-02 is now the 2:3 shoot frame in a 3:4
   portrait slot, so `cover` crops ~11% off the height. Centred left too
   much headroom and put his shoes on the cut line; bias the window down.
   ----------------------------------------------------------------------- */
.slot[data-slot="INT-02"].has-img > img { object-position: center 78%; }
.slot[data-slot="PRB-01"].has-img > img { object-position: center top; }
.slot[data-slot="TST-AV-2"].has-img > img { object-position: center 30%; }

/* -----------------------------------------------------------------------
   Bowl: big, anchored to the card's bottom-right corner, and clipped by it.
   ----------------------------------------------------------------------- */
.svc-card--tall { position: relative; overflow: hidden; }
.bowl-wrap {
  position: absolute;
  right: -13%;
  bottom: -13%;
  width: 62%;
  max-width: none;
  margin: 0;
  padding: 0;
  display: block;
  pointer-events: none;
  z-index: 1;
}
.bowl-wrap .slot {
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
}
.bowl-wrap .slot.has-img > img {
  width: 100%;
  height: auto;
  object-fit: fill;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.5));
}
/* keep the copy clear of it */
.svc-card--tall .svc-card__bottom { position: relative; z-index: 2; padding-bottom: 7rem; }
@media (max-width: 700px) { .bowl-wrap { width: 52%; right: -8%; bottom: -8%; } }

/* -----------------------------------------------------------------------
   Tomas rises out from BEHIND the Level 3 card — waist up visible, the rest
   hidden by the card itself.

   z-index:-1 paints the figure behind the parent's own background. That only
   works while .plan does not establish a stacking context, so the hover
   transform is disabled on this card — otherwise the negative index would
   paint above the background instead of behind it.
   ----------------------------------------------------------------------- */
.cutout--tomas {
  left: 50%;
  transform: translateX(-50%);
  top: -15.5rem;
  bottom: auto;
  right: auto;
  width: 22rem;
  margin: 0;
  z-index: -1;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.55));
}
.plan--l3 { overflow: visible; }
.plan--l3:hover { transform: none; }

@media (min-width: 1001px) { .plan-grid { padding-top: 16.5rem; } }
@media (max-width: 1000px) { .cutout--tomas { display: none; } }

/* bowl: roughly double again — dominates the card corner, heavily clipped */
.bowl-wrap { width: 118%; right: -34%; bottom: -26%; }
.svc-card--tall .svc-card__bottom { padding-bottom: 9rem; }
@media (max-width: 700px) { .bowl-wrap { width: 95%; right: -24%; bottom: -18%; } }

/* no shadow on the bowl — it sits inside the card, not floating above it */
.bowl-wrap .slot.has-img > img { filter: none; }

/* new bowl file is trimmed to content and landscape (810x693) — resize for it */
.bowl-wrap { width: 86%; right: -22%; bottom: -16%; }
@media (max-width: 700px) { .bowl-wrap { width: 78%; right: -18%; bottom: -12%; } }

/* -----------------------------------------------------------------------
   Tomas behind the Level 3 card — properly this time.

   z-index:-1 was unreliable: the scroll-reveal adds will-change/opacity to
   .plan, which makes it a stacking context, and a negative-index child then
   paints ABOVE its parent's background instead of behind it.

   Fix: move the card's background onto ::after. Pseudo-elements paint after
   real children at the same index, so the figure (z-index 0) is covered by
   the card surface (::after, z-index 0), and the content sits above both.
   No z-index games, no reserved space.
   ----------------------------------------------------------------------- */
.plan-grid { padding-top: 0 !important; }

/* The card face is painted on the element again, not on a pseudo. It was
   moved to `::after` so the Tomas cut-out could sit between the card's
   background and its copy while living inside the card — and he no longer
   does, so the workaround only had costs left.

   The cost: `inset: 0` on an absolutely positioned pseudo resolves against
   the padding box, so the face stopped 1px short of the card's own edge on
   every side. With the border set transparent to hide the doubled hairline,
   that left a 1px transparent ring around Level 3 — and on a phone, where
   Level 3 slides up over Level 2, the gold card underneath showed straight
   through it as a hairline outline.

   Everything below is what `.plan` already paints, so it is simply removed
   rather than restated. */
.plan--l3 {
  overflow: visible;
  isolation: isolate;
}
.plan--l3 > .plan__body,
.plan--l3 > .plan__flag { position: relative; z-index: 1; }

.cutout--tomas {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -12.5rem;
  bottom: auto;
  right: auto;
  width: 20rem;
  margin: 0;
  z-index: 0;
  filter: none;
}
@media (max-width: 1000px) { .cutout--tomas { display: none; } }

/* Tomas ~3x — towers over the card, hidden from the card's top edge down */
.cutout--tomas { width: 60rem; top: -37rem; }
@media (max-width: 1400px) { .cutout--tomas { width: 48rem; top: -29.5rem; } }
@media (max-width: 1200px) { .cutout--tomas { width: 40rem; top: -24.5rem; } }
@media (max-width: 1000px) { .cutout--tomas { display: none; } }

/* =======================================================================
   BOWL — single authoritative block. Every property set explicitly so none
   of the earlier iterations can interfere.
   ======================================================================= */
.svc-card--tall {
  position: relative;
  overflow: hidden;
}
.svc-card--tall > .bowl-wrap {
  position: absolute;
  display: block;
  left: auto;
  top: auto;
  right: -18%;
  bottom: -14%;
  width: 82%;
  max-width: none;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.svc-card--tall > .bowl-wrap > .slot {
  position: static;
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
.svc-card--tall > .bowl-wrap > .slot > img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: fill;
  border-radius: 0;
  filter: none;
}
.svc-card--tall > .svc-card__bottom { position: relative; z-index: 2; padding-bottom: 8rem; }
@media (max-width: 700px) {
  .svc-card--tall > .bowl-wrap { width: 74%; right: -14%; bottom: -10%; }
}

/* Reserve the bowl's box before the image decodes. Without this the wrapper is
   auto-height, measures 0, and sits entirely outside the card's clip. */
.svc-card--tall > .bowl-wrap { aspect-ratio: 810 / 693; }
.svc-card--tall > .bowl-wrap > .slot { height: 100%; }
.svc-card--tall > .bowl-wrap > .slot > img { height: 100%; object-fit: contain; object-position: bottom right; }

/* Tomas 15% smaller */
.cutout--tomas { width: 51rem; top: -31.5rem; }
@media (max-width: 1400px) { .cutout--tomas { width: 41rem; top: -25rem; } }
@media (max-width: 1200px) { .cutout--tomas { width: 34rem; top: -21rem; } }
@media (max-width: 1000px) { .cutout--tomas { display: none; } }

/* The Level 3 layering rule set position:relative on the flag, which killed its
   absolute positioning — it stretched to full card width and wrapped. */
.plan--l3 > .plan__flag {
  position: absolute;
  top: 0;
  right: var(--space-1-87);
  left: auto;
  width: auto;
  white-space: nowrap;
  z-index: 2;
}

/* An old `max-width:1250px { display:none }` from when this cut-out lived in
   the contact section was still hiding him between 1001px and 1250px. */
@media (min-width: 1001px) { .cutout--tomas { display: block !important; } }
@media (max-width: 1000px) { .cutout--tomas { display: none !important; } }

/* =======================================================================
   v36 — breathing room, dark inputs, restructured problem + founder blocks
   ======================================================================= */

/* more air between everything */
.grid-2, .grid-3, .svc-grid, .svc-right, .plan-grid { gap: var(--gap-1-75); }
.grid-split, .startgrid, .contact-grid, .faq-layout { gap: var(--gap-5); }
.collage { gap: 1rem; }
.svc-card, .plan__body, .cstep__body, .calc__side, .founder__data { padding: var(--space-2); }
.tst-grid { gap: var(--gap-1-75); }
.tst-col { gap: var(--gap-1-75); }

/* chips smaller */
.mchip { font-size: .6875rem; padding: .38rem .7rem; }
.metric { font-size: .8125rem; padding: .6rem .95rem; }
.base-chip { font-size: .75rem; padding: .65rem 1.1rem; }
.metric-chips { gap: .35rem; }

/* single stat card in the About collage */
.statcard {
  grid-column: 2;
  display: flex; flex-direction: column; gap: .4rem; justify-content: center;
  padding: 1.4rem 1.25rem;
  border: 1px solid var(--color-black-14);
  border-radius: var(--radius-lg);
  background: var(--color-off-white);
}
.statcard b {
  font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 600;
  line-height: 1; color: var(--color-black); font-variant-numeric: tabular-nums;
}
.statcard span {
  font-family: var(--font-display); font-size: .5625rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--color-dark-gray); line-height: 1.5;
}
@media (max-width: 620px) { .statcard { grid-column: 1; } }

/* Problem: copy left, image with the table card staggered beneath it */
.prob-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--gap-5); align-items: start; }
.prob-media { position: relative; padding-bottom: 3rem; }
.prob-media > .slot { width: 72%; margin-left: auto; }
.prob-table {
  position: relative;
  margin-top: -6rem;
  margin-right: 22%;
  padding: var(--space-1-87);
  border: 1px solid var(--color-black-14);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: 0 24px 50px rgba(25,25,25,.10);
}
@media (max-width: 1000px) {
  .prob-layout { grid-template-columns: 1fr; }
  .prob-media > .slot { width: 100%; }
  .prob-table { margin: -4rem 0 0; }
}

/* table header reads as a header */
.then-now__head {
  margin: -1.4rem -1.4rem .6rem;
  padding: .8rem 1.4rem;
  border-radius: var(--radius-sm);
  background: var(--color-black);
  border-bottom: 0;
}
.then-now__head > span:first-child,
.then-now__hl { color: rgba(255,255,255,.75); }

/* founder: before/after and the numbers share the right column */
.ba-col { display: flex; flex-direction: column; }

/* dark form fields — white boxes were shouting on the black sections */
.bg-black .form-field,
.cstep .form-field,
.lock .form-field,
.calc .form-field {
  background: rgba(255,255,255,.05);
  border-color: var(--color-white-16);
  color: #fff;
}
.bg-black .form-field::placeholder,
.cstep .form-field::placeholder,
.lock .form-field::placeholder { color: rgba(255,255,255,.42); }
.bg-black .form-field:focus,
.cstep .form-field:focus,
.lock .form-field:focus { border-color: var(--color-lime); background: rgba(255,255,255,.08); }
.bg-black select.form-field option { background: #1b1b1b; color: #fff; }

/* no emphasis on individual list items */
.tick-list li.is-me,
.plan--feature .tick-list li.is-me { font-weight: 400; color: inherit; }
.tick-list li.is-me { color: var(--color-white-70); }
.plan--feature .tick-list li.is-me { color: var(--color-black); }
.tick-list li.is-me::before { box-shadow: none; }

/* consent checkbox */
.consent { display: flex; align-items: flex-start; gap: .65rem; cursor: pointer; }
.consent input { width: 1.05rem; height: 1.05rem; margin-top: .15rem; accent-color: var(--color-lime); flex: none; }
.consent span { font-family: var(--font-body); font-size: .8125rem; line-height: 1.5; color: var(--color-dark-gray); }

/* Tomas nudged down */
.cutout--tomas { top: -28.4rem; }
@media (max-width: 1400px) { .cutout--tomas { top: -21.9rem; } }
@media (max-width: 1200px) { .cutout--tomas { top: -17.9rem; } }

/* before/after: the two source files are different ratios (4:5 and 16:9), so
   the frame is fixed at 4:5 and the wider one is cropped to match. */
.ba-pair .slot { aspect-ratio: 4 / 5; }
.ba-pair .slot.has-img > img { object-fit: cover; object-position: center; }
.slot[data-slot="BA-02"].has-img > img { object-position: center 40%; }
@media (max-width: 520px) { .ba-pair .slot { aspect-ratio: 4 / 5; } }

/* reviews: no avatar, so the attribution is just the name and level */
.tst-card__bottom--noav { display: block; }
.tst-card__bottom--noav .font-r { display: block; }

/* =======================================================================
   v37 — Problem as two stacked horizontal cards, no shadows anywhere
   ======================================================================= */
.prob-layout { display: block; }
.prob-copy { max-width: none; }
.prob-media { display: none; }

.prob-stack { display: flex; flex-direction: column; }
.prob-card {
  border: 1px solid var(--color-black-14);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: none;
  overflow: hidden;
}
.prob-card--media { padding: 0; }
.prob-card--media .slot { border-radius: 0; }
.prob-card--table {
  margin-left: 6rem;
  margin-top: -2rem;
  padding: var(--space-2);
  position: relative;
}
@media (max-width: 900px) {
  .prob-card--table { margin-left: 0; margin-top: 1rem; padding: var(--space-1-5); }
}

/* the table header bar sits inside the padded card */
.prob-card--table .then-now__head { margin: 0 0 .6rem; border-radius: var(--radius-sm); }

/* no drop shadows on content anywhere */
.prob-table, .prob-card, .plan, .svc-card, .tst-card, .cause,
.card, .level, .statcard, .founder__data, .cstep { box-shadow: none !important; }
.plan:hover, .svc-card:hover { box-shadow: none !important; }

/* Problem cards: clear stagger, sane crop, table not stretched across the page */
.slot--16x9 { aspect-ratio: 16 / 9; }
.slot[data-slot="PRB-01"].has-img > img { object-position: center 32%; }

.prob-card--media { width: 86%; margin-left: 0; }
.prob-card--table { width: 74%; margin-left: auto; margin-right: 0; margin-top: -3.5rem; }
@media (max-width: 900px) {
  .prob-card--media, .prob-card--table { width: 100%; margin-left: 0; margin-top: 0; }
  .prob-card--table { margin-top: 1rem; }
}

/* Problem: back to 50/50. Copy one side, image on the other with the table
   card stacked directly under it, jutting out to the left. */
.prob-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-5);
  align-items: start;
}
.prob-copy { max-width: 34rem; }
.prob-stack { display: block; }
.prob-card--media { width: 100%; margin: 0; }
.prob-card--table {
  width: auto;
  margin: -3rem 2.5rem 0 -3.5rem;
  padding: var(--space-1-87);
}
.then-now__row { grid-template-columns: 1.15fr .9fr 1fr; }
@media (max-width: 1000px) {
  .prob-layout { grid-template-columns: 1fr; }
  .prob-copy { max-width: none; }
  .prob-card--table { margin: -2rem 1.5rem 0 0; }
}
@media (max-width: 700px) {
  .prob-card--table { margin: 1rem 0 0; padding: var(--space-1-25); }
}

/* Collage: two real columns. The old grid auto-placed items into rows, which
   left two empty rows in the left column under the plate. */
.collage { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.collage__col { display: flex; flex-direction: column; gap: 1rem; }
.collage__col > .slot { width: 100%; }
.statcard { grid-column: auto; height: 100%; }
@media (max-width: 620px) { .collage { grid-template-columns: 1fr; } }

/* table sits UNDER the image, not on top of it — no negative margin */
.prob-card--table { margin: 1rem 2.5rem 0 -3.5rem; }
@media (max-width: 1000px) { .prob-card--table { margin: 1rem 1.5rem 0 0; } }
@media (max-width: 700px)  { .prob-card--table { margin: 1rem 0 0; } }

/* Problem: equal-height cards, stagger reversed (image left, table right),
   copy vertically centred against the pair.
   grid-template-rows: 1fr 1fr makes both rows the same height, and the taller
   content (the table) sets that height — the image then stretches to match. */
.prob-layout { align-items: center; }

.prob-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 1rem; }

.prob-card--media {
  height: 100%;
  margin: 0 3.5rem 0 0;
}
.prob-card--media > .slot {
  height: 100%;
  aspect-ratio: auto;
  min-height: 0;
}
.prob-card--media > .slot.has-img > img { height: 100%; object-fit: cover; }

.prob-card--table {
  height: 100%;
  margin: 0 0 0 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 1000px) {
  .prob-card--media, .prob-card--table { margin: 0; }
  .prob-stack { grid-template-rows: auto auto; }
  .prob-card--media > .slot { aspect-ratio: 16 / 9; height: auto; }
}

/* width:100% was cancelling the image card's right margin — it needs auto so
   the margin actually narrows the box and the stagger shows */
.prob-card--media { width: auto; }

/* both cards short and horizontal — compact the table so it sets a low
   shared height, and the image matches it */
.prob-card--table { padding: 1.1rem 1.35rem; }
.prob-card--table .then-now__row,
.prob-card--table .then-now__head { padding-top: .5rem; padding-bottom: .5rem; }
.prob-card--table .then-now__head { padding-left: 1rem; padding-right: 1rem; }
.prob-card--table .then-now__k,
.prob-card--table .then-now__a,
.prob-card--table .then-now__b { font-size: .8125rem; }
.prob-card--table .then-now__hl,
.prob-card--table .then-now__head > span:first-child { font-size: .5rem; }

/* table header: a light tint, not a black slab */
.then-now__head {
  background: var(--color-off-white);
  border-bottom: 1px solid var(--color-black-14);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.then-now__head > span:first-child,
.then-now__hl { color: var(--color-dark-gray); }

/* explicit row height — the 1fr/1fr pair was resolving circularly against the
   image's own height and ending up portrait. Both cards are now wide and short. */
.prob-stack { grid-template-rows: 15rem 15rem; }
.prob-card--media > .slot { height: 100%; width: 100%; }
@media (max-width: 1000px) { .prob-stack { grid-template-rows: auto auto; } }

/* chips take the body text colour, not the heading colour */
.metric, .base-chip {
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-dark-gray);
}
.mchip { color: rgba(255,255,255,.62); }
.bg-black .metric, .bg-black .base-chip { color: var(--color-white-70); border-color: var(--color-white-16); }

/* founder numbers: one card instead of a label, three boxes and a footnote */
.numbercard {
  padding: var(--space-1-5) var(--space-1-87);
  border: 1px solid var(--color-black-14);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}
.numbercard__lab {
  display: block;
  font-family: var(--font-display);
  font-size: .5625rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--color-dark-gray);
}
.numbercard__row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  padding: 1rem 0 .9rem;
}
.numbercard__row > div { display: flex; flex-direction: column; gap: .2rem; }
.numbercard__row b {
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 600;
  line-height: 1; color: var(--color-black); font-variant-numeric: tabular-nums;
}
.numbercard__row span {
  font-family: var(--font-body); font-size: .75rem; color: var(--color-dark-gray);
}
.numbercard__note {
  margin: 0; padding-top: .85rem;
  border-top: 1px solid var(--color-black-14);
  font-family: var(--font-body); font-size: .6875rem; line-height: 1.5;
  color: var(--color-dark-gray);
}

/* =======================================================================
   PDF teaser — the reset built as two real pages, tilted
   ======================================================================= */
.pdfmock { position: relative; width: 100%; aspect-ratio: 1 / 1.02; }
.pdfpage {
  position: absolute;
  width: 74%;
  aspect-ratio: 1 / 1.414;
  padding: 8%;
  border-radius: 3px;
  background: #fbfbf8;
  color: #191919;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(25,25,25,.12);
}
.pdfpage--back {
  left: 0; top: 0;
  transform: rotate(-7deg);
  background: #f4f4f0;
}
.pdfpage--front {
  right: 0; bottom: 0;
  transform: rotate(4deg);
  background: #111;
  color: #fff;
  border-color: rgba(255,255,255,.14);
}

/* inside page */
.pdfpage__eyebrow {
  font-family: var(--font-display); font-size: .42rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: #8a8a80;
}
.pdfpage__h {
  margin-top: .35rem;
  font-family: var(--font-display); font-size: .72rem; font-weight: 600;
  text-transform: uppercase; line-height: 1.15;
}
.pdfpage__rule { height: 2px; width: 26%; background: var(--color-lime); margin: .55rem 0 .7rem; }
.pdfpage__rows { display: flex; flex-direction: column; gap: .42rem; }
.pdfpage__rows > div { display: flex; flex-direction: column; gap: .06rem; }
.pdfpage__rows em {
  font-style: normal;
  font-family: var(--font-display); font-size: .38rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: #9a9a90;
}
.pdfpage__rows span { font-family: var(--font-body); font-size: .48rem; line-height: 1.35; color: #33332e; }
.pdfpage__note {
  margin-top: auto; padding-top: .5rem;
  border-top: 1px solid rgba(25,25,25,.12);
  font-family: var(--font-body); font-size: .4rem; line-height: 1.4; color: #77776e;
}

/* cover */
.pdfpage__brand {
  font-family: var(--font-display); font-size: .5rem; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase;
}
.pdfpage__mid { margin-top: auto; }
.pdfpage__kicker {
  display: block;
  font-family: var(--font-display); font-size: .38rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--color-lime);
}
.pdfpage__title {
  display: block; margin-top: .4rem;
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 700;
  line-height: 1.02; text-transform: uppercase;
}
.pdfpage__accent { height: 2px; width: 34%; background: var(--color-lime); margin: .6rem 0 .55rem; }
.pdfpage__sub {
  display: block;
  font-family: var(--font-body); font-size: .45rem; line-height: 1.45;
  color: rgba(255,255,255,.62);
}
.pdfpage__foot {
  margin-top: auto;
  font-family: var(--font-display); font-size: .34rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.42);
}

.incl__row { grid-template-columns: 9.5rem 1fr; align-items: center; }
@media (max-width: 560px) { .incl__row { grid-template-columns: 1fr; } .pdfmock { max-width: 14rem; } }

/* FAQ: sticky intro on the left, questions on the right, no image */
.faqgrid { display: grid; grid-template-columns: 1fr 1.35fr; gap: var(--gap-5); align-items: start; }
.faqgrid__aside { position: sticky; top: 5.5rem; }
.faqgrid .faq-wrap { max-width: none; margin: 0; }
@media (max-width: 1000px) {
  .faqgrid { grid-template-columns: 1fr; }
  .faqgrid__aside { position: static; }
}

/* real logo replaces the text wordmark */
.wordmark { display: inline-flex; align-items: center; line-height: 0; }
.wordmark .logo { height: 1.6rem; width: auto; display: block; }
.wordmark--lg .logo { height: 2.4rem; }
@media (max-width: 620px) { .wordmark .logo { height: 1.35rem; } }

/* PDF teaser was rendering at 152px wide, so every bit of type looked blown up.
   Give it real room and scale the page type down against it. */
.incl__row { grid-template-columns: 17rem 1fr; gap: 1.5rem; }
.pdfmock { aspect-ratio: 1 / 0.98; }
.pdfpage { width: 70%; padding: 7%; }
.pdfpage--back { transform: rotate(-6deg); }
.pdfpage--front { transform: rotate(3deg); }

.pdfpage__title { font-size: .95rem; line-height: 1.06; }
.pdfpage__brand { font-size: .42rem; letter-spacing: .26em; }
.pdfpage__kicker { font-size: .32rem; }
.pdfpage__sub { font-size: .38rem; line-height: 1.5; }
.pdfpage__foot { font-size: .3rem; }
.pdfpage__h { font-size: .58rem; }
.pdfpage__eyebrow { font-size: .34rem; }
.pdfpage__rows em { font-size: .32rem; }
.pdfpage__rows span { font-size: .4rem; }
.pdfpage__rows { gap: .35rem; }
.pdfpage__note { font-size: .33rem; }
.pdfpage__accent, .pdfpage__rule { height: 1.5px; }

@media (max-width: 900px) { .incl__row { grid-template-columns: 14rem 1fr; } }
@media (max-width: 560px) { .incl__row { grid-template-columns: 1fr; } .pdfmock { max-width: 16rem; } }

/* contact card: the email was overflowing its box */
.contact-info-card a.font-r,
.contact-info-card b.font-r {
  font-size: .8125rem;
  letter-spacing: .02em;
  word-break: break-word;
  text-transform: none;
}
.contact-info-card p { font-size: .6875rem; }

/* Contact cards: one per row the moment two would squeeze the address onto a
   second line. "hello@solumfitness.com" measures 203px and the card adds 88px
   around it, so a card needs about 291px to keep it on one line; at 1440 the
   pair only gets ~255px each and the address wrapped.
   auto-fit rather than a breakpoint, so the switch happens at the width where
   the text actually stops fitting instead of at a number picked by hand. */
.contact-info-grid { grid-template-columns: repeat(auto-fit, minmax(18.5rem, 1fr)); }


/* =======================================================================
   Problem table, rethought. Forcing it to match the image's height squashed
   it. The image stays short and horizontal; the table takes the height it
   actually needs and is styled as a proper comparison card.
   ======================================================================= */
.prob-stack { grid-template-rows: 13.5rem auto; }

.prob-card--table {
  height: auto;
  display: block;
  padding: 0;
  overflow: hidden;
}

/* header */
.prob-card--table .then-now__head {
  margin: 0;
  padding: .85rem 1.4rem;
  border-radius: 0;
  background: var(--color-off-white);
  border-bottom: 1px solid var(--color-black-14);
}
.prob-card--table .then-now__hl,
.prob-card--table .then-now__head > span:first-child {
  font-size: .5625rem;
  letter-spacing: .14em;
  color: var(--color-dark-gray);
}

/* rows */
.prob-card--table .then-now__row {
  padding: .95rem 1.4rem;
  border-bottom: 1px solid var(--color-black-14);
  align-items: center;
}
.prob-card--table .then-now__row:last-child { border-bottom: 0; }
.prob-card--table .then-now__row:nth-child(even) { background: rgba(25,25,25,.022); }

.prob-card--table .then-now__k,
.prob-card--table .then-now__a,
.prob-card--table .then-now__b { font-size: .875rem; line-height: 1.45; }
.prob-card--table .then-now__k { color: var(--color-black); font-weight: 500; }
.prob-card--table .then-now__a { color: var(--color-dark-gray); }
.prob-card--table .then-now__b { color: var(--color-black); font-weight: 500; }

/* the "After 40" column carries the accent so the point lands */
.prob-card--table .then-now__row > span:last-child { position: relative; padding-left: .9rem; }
.prob-card--table .then-now__row > span:last-child::before {
  content: "";
  position: absolute; left: 0; top: .15em; bottom: .15em;
  width: 2px; border-radius: 2px; background: var(--color-lime);
}
.prob-card--table .then-now__head > span:last-child { padding-left: .9rem; }

.then-now, .prob-card--table .then-now { border: 0; }
.then-now__row, .then-now__head { grid-template-columns: 1.15fr .95fr 1fr; }

/* numbers card: centred label, hairline separators between the three stats */
.numbercard__lab { text-align: center; }
.numbercard__row { gap: 0; padding-bottom: .2rem; }
.numbercard__row > div {
  align-items: center;
  text-align: center;
  padding: 0 .85rem;
  border-left: 1px solid var(--color-black-14);
}
.numbercard__row > div:first-child { border-left: 0; }

/* PDF teaser 20% smaller */
.incl__row { grid-template-columns: 13.6rem 1fr; }
@media (max-width: 900px) { .incl__row { grid-template-columns: 11.2rem 1fr; } }
@media (max-width: 560px) { .incl__row { grid-template-columns: 1fr; } .pdfmock { max-width: 12.8rem; } }

/* logos larger */
.wordmark .logo { height: 2.5rem; }
.wordmark--lg .logo { height: 3.6rem; }
@media (max-width: 620px) { .wordmark .logo { height: 2rem; } .wordmark--lg .logo { height: 2.8rem; } }

/* more air under the numbers card label */
.numbercard__lab { margin-bottom: .35rem; }
.numbercard__row { padding-top: 1.5rem; }

/* =======================================================================
   Problem table, simplified: tinted header only, no zebra rows, no accent
   dashes, generous spacing. Image a little taller.
   ======================================================================= */
.prob-stack { grid-template-rows: 17rem auto; }

.prob-card--table .then-now__row:nth-child(even) { background: transparent; }
.prob-card--table .then-now__row > span:last-child { padding-left: 0; }
.prob-card--table .then-now__row > span:last-child::before { content: none; }
.prob-card--table .then-now__head > span:last-child { padding-left: 0; }

.prob-card--table .then-now__head { padding: 1.05rem 1.6rem; }
.prob-card--table .then-now__row { padding: 1.25rem 1.6rem; }
.then-now__row, .then-now__head { gap: 1.25rem; }

/* PDF teaser smaller again */
.incl__row { grid-template-columns: 11rem 1fr; }
@media (max-width: 900px) { .incl__row { grid-template-columns: 9.5rem 1fr; } }
@media (max-width: 560px) { .incl__row { grid-template-columns: 1fr; } .pdfmock { max-width: 11rem; } }

/* more air under the numbers label */
.numbercard__row { padding-top: 2.1rem; }

/* numbers card: more vertical padding overall */
.numbercard { padding: var(--space-2-5) var(--space-1-87); }
.numbercard__row { padding-top: 2.1rem; padding-bottom: 0; }

/* no box shadows or drop shadows anywhere on the page (review chrome keeps its own) */
*:not(.ctl):not(.ctl *):not(.varbar):not(.varbar *):not(.stickycta):not(.stickycta *) {
  box-shadow: none !important;
}
.pdfpage, .vthumb__play, .cutout, .cutout *, .bowl-wrap, .bowl-wrap *,
.prob-card, .plan, .svc-card, .tst-card, .numbercard, .statcard { filter: none !important; }

/* breathing room above the submit button */
.cform__submit { padding-top: 1.25rem; }

/* PDF teaser smaller again */
.incl__row { grid-template-columns: 8.5rem 1fr; gap: 1.25rem; }
@media (max-width: 900px) { .incl__row { grid-template-columns: 7.5rem 1fr; } }
@media (max-width: 560px) { .incl__row { grid-template-columns: 1fr; } .pdfmock { max-width: 9rem; } }

/* hero video replaces the poster slot */
.vthumb { overflow: hidden; border-radius: var(--radius-lg); }
.vthumb__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  background: #111;
}

/* Problem: give the media column more of the width so the table can breathe */
.prob-layout { grid-template-columns: .85fr 1.25fr; gap: var(--gap-3-75); }
.prob-card--media { margin-right: 4.5rem; }
.prob-card--table { margin-left: 4.5rem; }
@media (max-width: 1000px) {
  .prob-layout { grid-template-columns: 1fr; }
  .prob-card--media, .prob-card--table { margin: 0; }
}

/* wide video thumbnail in How It Works */
.vthumb--wide { aspect-ratio: 16 / 9; width: 100%; }
.vthumb--wide .vthumb__play { width: 4.5rem; height: 4.5rem; }
.vthumb--wide .vthumb__cap { padding: 4rem 1.75rem 1.6rem; }
.vthumb--wide .vthumb__name { font-size: var(--fs-lg); }

/* problem image taller */
.prob-stack { grid-template-rows: 23rem auto; }
@media (max-width: 1000px) { .prob-stack { grid-template-rows: auto auto; } }

/* video caption bigger */
.vthumb__name { font-size: var(--fs-lg); }
.vthumb__meta { font-size: .9375rem; }
.vthumb__cap { padding: 4rem 1.6rem 1.5rem; gap: .3rem; }
.vthumb--wide .vthumb__name { font-size: var(--fs-xl); }
.vthumb--wide .vthumb__meta { font-size: 1rem; }

/* Button labels were wrapping inside a .9rem overflow-hidden window, so long
   labels got cut ("Get Your Free" / "Coaching"). Keep them on one line. */
.btn__label > span { white-space: nowrap; }
/* The duplicate is the hover swap's second frame. Keep it out of selections so
   copying the page does not yield every button label twice. */
.btn__label > span + span { user-select: none; -webkit-user-select: none; }
.btn { white-space: nowrap; }

/* more space between the two caption lines */
.vthumb__cap { gap: .5rem; }

/* habit rows carry a small icon */
.then-now__k { display: flex; align-items: center; gap: .7rem; }
.then-now__ico {
  display: grid; place-items: center; flex: none;
  width: 1.9rem; height: 1.9rem;
  border-radius: var(--radius-sm);
  background: var(--color-off-white);
  color: var(--color-dark-gray);
}
.then-now__ico svg { width: .95rem; height: .95rem; }
.then-now__head > span:first-child { padding-left: 2.6rem; }

/* numbers card: less top padding */
.numbercard { padding-top: var(--space-1-5); }

/* PDF page type smaller again — it should read as a shrunk document */
.pdfpage__title { font-size: .72rem; }
.pdfpage__brand { font-size: .32rem; }
.pdfpage__kicker { font-size: .24rem; }
.pdfpage__sub { font-size: .28rem; line-height: 1.5; }
.pdfpage__foot { font-size: .22rem; }
.pdfpage__h { font-size: .42rem; }
.pdfpage__eyebrow { font-size: .25rem; }
.pdfpage__rows em { font-size: .24rem; }
.pdfpage__rows span { font-size: .3rem; }
.pdfpage__rows { gap: .26rem; }
.pdfpage__note { font-size: .24rem; }
.pdfpage__accent, .pdfpage__rule { height: 1px; }

/* more space between the PDF teaser and the copy beside it */
.incl__row { gap: 2.5rem; }
@media (max-width: 560px) { .incl__row { gap: 1.5rem; } }

/* new problem photo is 3:2 landscape — centre the crop */
.slot[data-slot="PRB-01"].has-img > img { object-position: center 45%; }

/* =======================================================================
   Accent switcher only — a small swatch pair glued to the left edge
   ======================================================================= */

/* About: stagger the second collage column down, centre the copy against the pair */
#about-solum .grid-split { align-items: center; }
.collage__col:last-child { padding-top: 3.5rem; }
@media (max-width: 620px) { .collage__col:last-child { padding-top: 0; } }

/* habit icons: filled, accent coloured, no chip background, larger */
.then-now__ico {
  width: auto; height: auto;
  background: none;
  border-radius: 0;
  color: var(--color-lime);
}
.then-now__ico svg { width: 1.35rem; height: 1.35rem; }
.then-now__k { gap: .8rem; }
.then-now__head > span:first-child { padding-left: 2.15rem; }

/* more room between the video caption's two lines */
.vthumb__cap { gap: .85rem; }

/* once the targets are unlocked, step 2 stays fully legible */
.cstep.is-unlocked { opacity: 1; border-color: rgba(255,255,255,.26); }
.cstep.is-unlocked .cstep__n { background: var(--color-lime); border-color: transparent; color: #111; }

/* accent-derived tints so gold mode is gold everywhere */
:root {
  --accent-07: rgba(214,251,3,.07);
  --accent-12: rgba(214,251,3,.12);
  --accent-14: rgba(214,251,3,.14);
  --accent-16: rgba(214,251,3,.16);
  --accent-32: rgba(214,251,3,.32);
  --accent-50: rgba(214,251,3,.50);
}
:root {
  --accent-07: rgba(168,148,92,.10);
  --accent-12: rgba(168,148,92,.16);
  --accent-14: rgba(168,148,92,.18);
  --accent-16: rgba(168,148,92,.20);
  --accent-32: rgba(168,148,92,.38);
  --accent-50: rgba(168,148,92,.55);
}

/* section eyebrows are monochrome: a bare glyph, no chip behind it.
   Black on light grounds, white on dark ones; labels follow the ground. */
.section-badge .badge-icon,
.section-badge .badge-icon.is-lime { background: none; padding: 0; }
.section-badge .badge-icon { color: var(--color-black); }
.section-badge .badge-icon.is-lime { color: #fff; }
.section-badge .badge-icon > svg, .section-badge .badge-icon > img { width: .95rem; height: .95rem; }
.section-badge .font-r { color: var(--color-black); text-transform: none; letter-spacing: .02em; }
.bg-black .section-badge .font-r,
.section-badge .font-r.is-white,
.section-badge .font-r.is-lime { color: #fff; }

/* gold highlight inside headings — gradient-clipped so it keeps depth on
   light grounds where flat gold would sit at the contrast floor */
.hl-au {
  background: linear-gradient(120deg, var(--au-hl-1), var(--au-hl-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-style: normal;
}
.bg-black .hl-au,
.is-white .hl-au { background-image: linear-gradient(120deg, var(--au-hld-1), var(--au-hld-2)); }

/* cinematic gray ground — background-image only, layered on .bg-black so
   every dark-section descendant rule keeps applying */
.section.bg-cine {
  background-image:
    radial-gradient(90% 70% at 60% 25%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(200deg, #26261f 0%, #161614 60%, #0d0d0c 100%);
}

/* shiny silver gradient border, works on any rounded card */
.br-ag { position: relative; }
.br-ag::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, #e9ecf0 0%, #9aa0a9 32%, #d9dde2 58%, #878d96 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.sci-shot.br-ag, .numbercard.br-ag { border: 0; }

/* gradient ring per button tone: gold buttons/cards get gold, white buttons
   silver, black buttons a dark ring. The element's own border goes fully
   transparent so the ring is the only edge — no double border. */
.btn--lime, .btn--outline, .btn--black, .btn--cta, .btn--ghost,
.svc-card.is-lime, .plan--feature { position: relative; border: 0; }
.btn--lime::after, .btn--outline::after, .btn--black::after, .btn--cta::after, .btn--ghost::after,
.svc-card.is-lime::after, .plan--feature::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, var(--au-ring-1) 0%, var(--au-ring-2) 38%, var(--au-ring-3) 62%, var(--au-ring-4) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.btn--outline::after, .btn--ghost::after { background: linear-gradient(135deg, #eef0f3 0%, #9aa0a9 38%, #dde1e6 62%, #8a9099 100%); }
.btn--black::after, .btn--cta::after { background: linear-gradient(135deg, #8f8f8f 0%, #2b2b2b 38%, #757575 62%, #1f1f1f 100%); }

/* =======================================================================
   Vertical rhythm inside a block (eyebrow → title → copy).
   These gaps are spacer <div>s, not margins, so one multiplier scales the
   lot. Section rhythm (space-3 and up) is deliberately left alone.
   ======================================================================= */
:root { --stack: 1.45; }

.space-0-75 { padding-top: calc(var(--space-0-75) * var(--stack)); }
.space-1    { padding-top: calc(var(--space-1)    * var(--stack)); }
.space-1-25 { padding-top: calc(var(--space-1-25) * var(--stack)); }
.space-1-5  { padding-top: calc(var(--space-1-5)  * var(--stack)); }
.space-1-87 { padding-top: calc(var(--space-1-87) * var(--stack)); }
.space-2    { padding-top: calc(var(--space-2)    * var(--stack)); }
.space-2-5  { padding-top: calc(var(--space-2-5)  * var(--stack)); }

/* 15+ stat card: more vertical padding, larger caption */
.statcard { padding: 2.1rem 1.4rem; gap: .6rem; }
.statcard span {
  font-size: .6875rem;
  letter-spacing: .1em;
  line-height: 1.55;
}

/* =======================================================================
   Instagram
   ======================================================================= */
.ig-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; }
.ig-head__right { display: flex; align-items: center; gap: 1.5rem; flex: none; }
.ig-stat { display: flex; flex-direction: column; gap: .2rem; }
.ig-stat b {
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 600;
  line-height: 1; color: #fff; font-variant-numeric: tabular-nums;
}
.ig-stat span {
  font-family: var(--font-display); font-size: .5625rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5);
}
.ig-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-1); }
.ig-post {
  position: relative; display: block; text-decoration: none;
  border-radius: var(--radius-lg); overflow: hidden;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.ig-post:hover { transform: translateY(-5px); }
.ig-post .slot { border-radius: 0; }
.ig-post::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.15) 52%, transparent 100%);
  opacity: .92; transition: opacity .35s ease;
}
.ig-post:hover::after { opacity: 1; }
.ig-post__ico {
  position: absolute; top: .85rem; right: .85rem; z-index: 2;
  display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem; border-radius: 999px;
  background: rgba(255,255,255,.16); backdrop-filter: blur(6px); color: #fff;
}
.ig-post__ico svg { width: .75rem; height: .75rem; margin-left: .1rem; }
.ig-post__cap {
  position: absolute; left: 1rem; right: 1rem; bottom: .95rem; z-index: 2;
  font-family: var(--font-body); font-size: .8125rem; line-height: 1.4; color: #fff;
}
@media (max-width: 900px) { .ig-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ig-grid { grid-template-columns: 1fr; } .ig-head__right { width: 100%; justify-content: space-between; } }

/* headings reveal line by line */
.split-line { display: block; overflow: hidden; }
.split-line > span {
  display: block;
  transform: translateY(105%);
  transition: transform .85s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--ld, 0ms);
}
.split-ready.in .split-line > span { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .split-line > span { transform: none; transition: none; }
}

/* =======================================================================
   Video lightbox
   ======================================================================= */
.vthumb { cursor: pointer; }
.vthumb:focus-visible { outline: 2px solid var(--color-lime); outline-offset: 4px; }

.lb {
  position: fixed; inset: 0; z-index: 12000;
  display: none; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.lb.is-open { display: flex; }
.lb__scrim { position: absolute; inset: 0; background: rgba(8,8,8,.9); backdrop-filter: blur(6px); }
.lb__panel {
  position: relative; z-index: 1;
  width: 100%; max-width: 60rem;
  display: flex; flex-direction: column; gap: 1.25rem;
  animation: lbIn .4s cubic-bezier(.22,1,.36,1) both;
}
@keyframes lbIn { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
.lb__frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg); overflow: hidden; background: #000;
}
.lb__video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.lb__placeholder {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-size: .75rem; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.4);
  background: repeating-linear-gradient(115deg,#1b1b18 0 22px,#141412 22px 44px);
}
.lb__close {
  position: absolute; top: -3rem; right: 0;
  width: 2.4rem; height: 2.4rem; border: 0; border-radius: 999px;
  background: rgba(255,255,255,.12); color: #fff; cursor: pointer;
  display: grid; place-items: center;
}
.lb__close:hover { background: rgba(255,255,255,.22); }
.lb__close svg { width: 1rem; height: 1rem; }
.lb__foot { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.lb__text { display: flex; flex-direction: column; gap: .3rem; }
.lb__title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; text-transform: uppercase; color: #fff; }
.lb__meta { font-family: var(--font-body); font-size: .875rem; color: rgba(255,255,255,.55); }
.lb__cta { display: flex; gap: .6rem; flex-wrap: wrap; }
@media (max-width: 700px) {
  .lb__foot { flex-direction: column; align-items: flex-start; }
  .lb__close { top: -2.8rem; }
}

/* hero headline was breaking to three lines after the spacing change */
.hero-heading { font-size: calc(var(--fs-h1) * .86); }

/* hero headline down to two lines */
.hero-heading { font-size: calc(var(--fs-h1) * .74); }

/* =======================================================================
   v48 — Instagram on a light ground, submit button back to normal size
   ======================================================================= */

/* submit is a normal pill again, not a stretched bar */
.cform__submit { max-width: none; }
.cform__submit .btn { width: auto; justify-content: flex-start; }

/* Instagram on the light section */
.ig-stat b { color: var(--color-black); }
.ig-stat span { color: var(--color-dark-gray); }
.ig-post__ico { background: rgba(255,255,255,.9); color: var(--color-black); }
.ig-post .slot { border-radius: 0; }
.ig-post { border: 1px solid var(--color-black-14); }

/* the form's .group is a stretch flex column, so the button was filling it */
.cform__submit { align-items: flex-start; }
.cform__submit .btn { width: auto; flex: 0 0 auto; align-self: flex-start; }

/* Instagram tiles that are actually video */
.ig-video {
  display: block; width: 100%; aspect-ratio: 1/1;
  object-fit: cover; background: #111;
}

/* reels are 4:5 portrait, so the grid follows */
.ig-video { aspect-ratio: 4 / 5; }
.ig-post .slot { aspect-ratio: 4 / 5; }
.ig-post__cap {
  font-family: var(--font-display); font-size: .625rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.8);
}

/* reels stay 9:16 — full frame, nothing cropped off */
.ig-video { aspect-ratio: 9 / 16; }
.ig-post .slot { aspect-ratio: 9 / 16; }

/* IG header: copy left with a sane measure, stat + follow pinned right */
.ig-head { flex-wrap: nowrap; align-items: flex-end; }
.ig-head .section-header-item-block { flex: 1 1 auto; min-width: 0; }
.ig-head .section-heading { max-width: 26rem; }
.ig-head .paragraph-regular { max-width: 30rem; }
.ig-head__right { flex-direction: column; align-items: flex-end; gap: 1.1rem; }
@media (max-width: 900px) {
  .ig-head { flex-wrap: wrap; }
  .ig-head__right { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
  .ig-head .section-heading, .ig-head .paragraph-regular { max-width: none; }
}

/* =======================================================================
   Instagram profile card — replaces the floating stat + button
   ======================================================================= */
.ig-head { align-items: stretch; gap: var(--gap-3-75); }
.ig-head .section-header-item-block { justify-content: center; }

.ig-card {
  flex: 0 0 17rem;
  display: flex; flex-direction: column; gap: 1.1rem;
  padding: var(--space-1-87);
  border: 1px solid var(--color-black-14);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  align-self: center;
}
.ig-card__top { display: flex; align-items: center; gap: .85rem; }
.ig-card__av {
  width: 3.1rem; height: 3.1rem; min-height: 0; flex: none;
  border-radius: 999px; padding: 0; aspect-ratio: 1/1;
}
.ig-card__av.has-img > img { border-radius: 999px; object-position: center 28%; }
.ig-card__who { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.ig-card__who b {
  font-family: var(--font-display); font-size: .8125rem; font-weight: 600;
  color: var(--color-black); overflow: hidden; text-overflow: ellipsis;
}
.ig-card__who span { font-family: var(--font-body); font-size: .8125rem; color: var(--color-dark-gray); }

.ig-card__stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 1px solid var(--color-black-14);
  border-bottom: 1px solid var(--color-black-14);
  padding: .9rem 0;
}
.ig-card__stats > div { display: flex; flex-direction: column; gap: .15rem; padding-right: .75rem; }
.ig-card__stats > div + div { border-left: 1px solid var(--color-black-14); padding-left: .9rem; padding-right: 0; }
.ig-card__stats b {
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600;
  line-height: 1; color: var(--color-black); font-variant-numeric: tabular-nums;
}
.ig-card__stats span {
  font-family: var(--font-display); font-size: .5rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--color-dark-gray);
}
.ig-card .btn { width: 100%; }

@media (max-width: 900px) {
  .ig-head { flex-wrap: wrap; }
  .ig-card { flex: 1 1 100%; align-self: stretch; }
}

/* IG card goes horizontal — avatar and identity left, stats and CTA right */
.ig-card {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 1.75rem;
  padding: var(--space-1-25) var(--space-1-87);
}
.ig-card__top { flex: none; }
.ig-card__stats {
  border-top: 0; border-bottom: 0;
  border-left: 1px solid var(--color-black-14);
  border-right: 1px solid var(--color-black-14);
  padding: .25rem 1.5rem;
  gap: 1.5rem;
}
.ig-card__stats > div { padding-right: 0; }
.ig-card__stats > div + div { border-left: 0; padding-left: 0; }
.ig-card .btn { width: auto; flex: none; }

@media (max-width: 1100px) {
  .ig-head { flex-wrap: wrap; }
  .ig-card { flex: 1 1 100%; justify-content: space-between; }
}
@media (max-width: 640px) {
  .ig-card { flex-direction: column; align-items: stretch; gap: 1.1rem; }
  .ig-card__stats {
    border-left: 0; border-right: 0;
    border-top: 1px solid var(--color-black-14);
    border-bottom: 1px solid var(--color-black-14);
    padding: .9rem 0;
  }
  .ig-card .btn { width: 100%; }
}

/* IG card, final shape: identity block on the left (handle + name, stats under
   it), Follow button beside the whole thing */
.ig-card { gap: 2rem; align-items: center; }
.ig-card__id { display: flex; flex-direction: column; gap: .85rem; }
.ig-card__top { gap: .85rem; }
.ig-card__stats {
  border: 0; padding: 0;
  display: flex; align-items: baseline; gap: 0;
  flex-wrap: wrap;
}
.ig-card__stats > div {
  display: flex; align-items: baseline; gap: .4rem;
  padding: 0 .9rem;
}
.ig-card__stats > div:first-child { padding-left: 0; }
.ig-card__stats > div + div { border-left: 1px solid var(--color-black-14); }
.ig-card__stats b {
  font-size: 1rem; line-height: 1;
  font-family: var(--font-display); font-weight: 600;
}
.ig-card__stats span {
  font-size: .75rem; letter-spacing: .04em; text-transform: uppercase;
  opacity: .6;
}

@media (max-width: 640px) {
  .ig-card { flex-direction: column; align-items: stretch; }
  .ig-card__stats { border: 0; padding: 0; }
}
.ig-card__stats > div { flex-direction: row; }

/* "Foundation first · Progress follows" marquee: more vertical breathing room,
   smaller type */
.marquee:not(.marquee--dark) { padding-block: var(--space-2-5); }
.marquee:not(.marquee--dark) .marque-text { font-size: 2.25rem; }

/* The closing "Track · Review · Adjust" band goes gold like the opening one.
   It keeps the compact proportions the --dark variant carries, only the two
   colours change, so the class name now reads as a size rather than a shade. */
.marquee--dark { background-color: var(--color-lime); }
.marquee--dark .marque-text { color: var(--color-black); }

/* =======================================================================
   LEVELS section in light mode. The wrapper drops .bg-black, so the light
   :not(.bg-black) rules already handle tabs and badges; this block flips the
   two dark plan cards (L1, L3) to light and repaints their inner type. The
   gold feature card (L2) is left exactly as it was.
   ======================================================================= */
#levels .levels-light { background-color: var(--color-off-white); }

/* header type back to dark */
#levels .is-white { color: var(--color-black); }
#levels .is-white-70 { color: var(--color-dark-gray); }

/* L1 + L3 become light cards (leave the gold L2 alone) */
/* L3 used to be excluded here because its face came from a ::after — the
   stacking workaround for the Tomas cut-out, which now lives outside the card.
   With the pseudo gone the exclusion left L3 painting its dark-mode face, so
   it takes the same element background/border as L1 again. */
:is(#levels, .pay) .plan:not(.plan--feature) {
  background: var(--color-white);
  border-color: var(--color-black-14);
}
:is(#levels, .pay) .plan:not(.plan--feature) h3,
:is(#levels, .pay) .plan:not(.plan--feature) .plan__price,
:is(#levels, .pay) .plan:not(.plan--feature) .plan__bottom .font-r,
:is(#levels, .pay) .plan:not(.plan--feature) .plan__best b { color: var(--color-black); }
:is(#levels, .pay) .plan:not(.plan--feature) .plan__best { color: rgba(17,17,17,.66); }
:is(#levels, .pay) .plan:not(.plan--feature) .tick-list li { color: var(--color-dark-gray); }

/* dividers inside the light cards need to be dark hairlines, not white */
:is(#levels, .pay) .plan:not(.plan--feature) .divider--on-dark { background-color: var(--color-black-14); }

/* L1 ghost button was built for a dark ground — give it a dark outline */
:is(#levels, .pay) .plan:not(.plan--feature) .btn--ghost {
  color: var(--color-black);
  border-color: transparent;
}
:is(#levels, .pay) .plan:not(.plan--feature) .btn--ghost:hover {
  background: rgba(17,17,17,.05);
  border-color: rgba(17,17,17,.45);
}

/* L3 "Application only" flag was white-on-white translucent — make it read */
#levels .plan__flag--quiet {
  background: var(--color-black); color: #fff;
}

/* =======================================================================
   BASED ON SCIENCE — body-data card (Hume band cut-out) + bloodwork card
   ======================================================================= */
.sci-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--gap-1-75); align-items: stretch;
}
.sci-card {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-black-14);
  overflow: hidden;
}
.sci-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--space-2); }
.sci-card h3 { color: var(--color-black); }

/* the Hume-band card lets the cut-out break its edge */
.sci-card--media { overflow: visible; }
.sci-card--media .sci-card__body { padding-bottom: var(--space-5); }
.cutout--hume {
  left: auto; top: auto; right: 1.5rem; bottom: -3.25rem;
  width: 11rem; height: 13rem;
  filter: drop-shadow(0 22px 38px rgba(0,0,0,.28));
}

/* credential chips pinned to the foot of the bloodwork card */
.sci-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; }
.sci-chip {
  padding: .5rem .9rem; border-radius: 999px;
  border: 1px solid var(--color-black-14);
  font-family: var(--font-display); font-size: .625rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--color-dark-gray);
}

@media (max-width: 1000px) {
  .sci-grid { grid-template-columns: 1fr; }
  .cutout--hume { display: none; }
  .sci-card--media .sci-card__body { padding-bottom: var(--space-2); }
}

/* Hume-band placeholder: give the empty slot a real box so the position reads
   before the PNG exists. Once the image is in, .has-img sizes to the artwork. */
.cutout--hume .slot--cut:not(.has-img) { min-height: 13rem; }

/* Foundation-first marquee: the flex gap between the two looping tracks was
   adding a second gap on top of the trailing separator, so the seam looked
   wider than the rhythm. Drop it; the trailing "·" carries the spacing. */
.marquee:not(.marquee--dark) { gap: 0; }

/* =======================================================================
   BASED ON SCIENCE v2 — stacked panels. Body-data panel shows the real Hume
   app readings (muscle map + health score) with the band cut-out; bloodwork
   panel lays the claim out as a concrete three-step process.
   ======================================================================= */
.sci-stack { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-1-75); align-items: stretch; }
@media (max-width: 900px) {
  .sci-stack { grid-template-columns: 1fr; }
  .sci-panel { min-height: 0; }
}
.sci-panel {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 41rem;
  background: var(--color-white);
  border: 1px solid var(--color-black-14);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  overflow: hidden;
}
.sci-panel h3 { color: var(--color-black); }

/* text sits on top; the media showcase fills the rest of the card. The band is
   tucked into the bottom-right corner (flipped) and clipped by the card edge;
   the real app readings float over it as small cards. */
.sci-panel__media { position: relative; flex: 1; min-height: 16rem; margin-top: var(--space-1-5); }
.cutout--hume {
  left: auto; top: auto; right: -4rem; bottom: -4rem;
  width: 24rem; height: 24rem; z-index: 3;
  filter: none;
}
.sci-shot {
  position: absolute; z-index: 1; overflow: hidden;
  border-radius: 1rem; border: 1px solid var(--color-black-14);
  background: #0d1316;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,.22));
}
.sci-shot .slot { height: 100%; width: 100%; padding: 0; background: none; border-radius: inherit; }
.sci-shot--tall  { width: 11.5rem; aspect-ratio: 377 / 579; left: 5.25rem;  bottom: -2.9rem; z-index: 2; }
.sci-shot--inset { width: 12.5rem; aspect-ratio: 345 / 319; left: -5rem;    bottom: -3.9rem; z-index: 1; }

/* single combined Hume ecosystem image — oversized and bled past the card
   edge, clipped by the panel's own overflow:hidden */
.sci-panel__media--one { position: relative; }
.sci-panel__media--one .sci-eco {
  position: absolute;
  right: -5rem; bottom: -6.5rem;
  width: 42rem; max-width: none;
  aspect-ratio: 1340 / 744;
  min-height: 0; padding: 0;
  background: none; box-shadow: none;
}
@media (max-width: 1000px) {
  .sci-panel__media--one { min-height: 17rem; }
  .sci-panel__media--one .sci-eco { width: 135%; right: -12%; bottom: -12%; }
}

/* bloodwork panel: the claim as a process, pinned to the bottom of the card */
.sci-panel--blood .sci-panel__flow { margin-top: auto; padding-top: var(--space-2-5); }
.sci-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1-5); }
.sci-steps li { display: flex; gap: 1rem; align-items: flex-start; }
.sci-steps__n {
  flex: none; width: 2.1rem; height: 2.1rem; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--accent-14); color: var(--color-lime);
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
}
.sci-steps b { display: block; font-family: var(--font-body); font-weight: 600; color: var(--color-black); margin-bottom: .25rem; }
.sci-steps p { margin: 0; font-family: var(--font-body); font-size: .9375rem; line-height: 1.55; color: var(--color-dark-gray); }

@media (max-width: 1000px) {
  .sci-panel { grid-template-columns: 1fr; gap: var(--space-2); padding: var(--space-1-87); }
  .sci-panel__media { min-height: 21rem; margin-top: var(--space-1-5); }
  .cutout--hume { display: none; }
}

/* certification seal on the US/EU chips */
.sci-chip { display: inline-flex; align-items: center; gap: .5rem; }
.sci-chip__ico { width: 1.05rem; height: 1.05rem; flex: none; }
.sci-chip__ico .seal { fill: var(--color-lime); }
.sci-chip__ico .tick { fill: none; stroke: var(--color-white); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* =======================================================================
   APPLY FORM — two-step flow. Step 1 collects contact + body stats, step 2
   the goals and message, so the form never shows as one long wall of fields.
   ======================================================================= */
.cform__progress { display: flex; align-items: center; gap: .85rem; margin-bottom: 0; }
.cform__pstep { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-dark-gray); opacity: .45; transition: opacity .25s ease; }
.cform__pstep b { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 999px; background: var(--color-black-14); color: var(--color-black); font-size: .8125rem; transition: background .25s ease, color .25s ease; }
.cform__pstep.is-on, .cform__pstep.is-done { opacity: 1; color: var(--color-black); }
.cform__pstep.is-on b, .cform__pstep.is-done b { background: var(--color-lime); color: #111; }
.cform__pbar { flex: 1; height: 1px; background: var(--color-black-14); }

.cform__panel { display: none; }
.cform__panel.is-on { display: flex; flex-direction: column; gap: var(--gap-1-25); }

/* Step 2's buttons. `.cform .row` is a two-column grid and out-ranks a lone
   class, so this row was still a grid: Send Message filled its cell and its
   arrow chip sat a hundred pixels short of the pill's edge, and Back was a
   grey word floating in the other cell. A flex row instead, both pills at
   their natural width and left-aligned like Continue on step 1. */
.cform .row.cform__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
/* Back is a real pill, chip first, arrows pointing the way it goes. */
.btn--back { padding-left: .3rem; padding-right: 1.5rem; }
.btn--back .btn__arrows { transform: scaleX(-1); }
.btn--back:hover { background-color: var(--color-off-white); }

.form-field.is-invalid { border-color: #c0492f; }

/* =======================================================================
   S MONOGRAM WATERMARK — ghosted into the corner of the Standard section.
   ======================================================================= */
.wm-sec { position: relative; overflow: hidden; }
.wm-sec .container { position: relative; z-index: 1; }
.wm-sec .s-mark {
  position: absolute;
  right: -2.5rem; bottom: -3.5rem;
  width: 17rem; height: auto;
  color: #fff; opacity: .07;
  pointer-events: none;
  z-index: -1;
}
@media (max-width: 700px) { .wm-sec .s-mark { width: 11rem; right: -2rem; bottom: -2.5rem; } }

/* =======================================================================
   MOBILE: pricing cards stack like a deck. Below 1000px the grid becomes
   a block flow and each card pins near the top of the viewport, so the
   next card slides up and over it as you scroll.
   ======================================================================= */
@media (max-width: 1000px) {
  .plan-grid { display: block; }
  /* No shadow to separate the stacked cards: the page-wide
     `box-shadow: none !important` rule below cancels it. Each card carries an
     opaque background and a hairline border, which is enough. */
  .plan-grid .plan {
    position: sticky;
    margin-bottom: var(--gap-1-25);
  }
  /* By class, not by child position. These were :nth-child(1/2/3), which
     silently re-targeted the moment the cut-out was added ahead of the cards
     inside .plan-grid: Level 3 became the fourth child, matched none of the
     three rules, and lost both its z-index and its sticky offset — so the
     two cards above it, still holding z-index 2 and 3, painted over it. */
  .plan-grid .plan.plan--l1      { top: 3.5rem;  z-index: 1; }
  .plan-grid .plan.plan--feature { top: 4.25rem; z-index: 2; }
  .plan-grid .plan.plan--l3      { top: 5rem;    z-index: 3; }
}

/* =======================================================================
   Gold ring on the licensed-partner chips, and the shiny gold gradient on
   every tick-list checkmark circle (feature-card dark checks keep their
   own higher-specificity fill).
   ======================================================================= */
.sci-chip {
  position: relative; border: 0;
  background: linear-gradient(135deg, var(--au-solid-1) 0%, var(--au-solid-2) 55%, var(--au-solid-3) 100%);
  color: #111;
}
.sci-chip__ico .seal { fill: #111; }
.sci-chip__ico .tick { stroke: var(--color-lime); }
.sci-chip::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, var(--au-ring-1) 0%, var(--au-ring-2) 38%, var(--au-ring-3) 62%, var(--au-ring-4) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.tick-list li::before {
  background-image:
    url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5.5 12.5l4.5 4.5L18.5 7.5'/></svg>"),
    linear-gradient(135deg, var(--au-tick-1) 0%, var(--au-tick-2) 100%);
  background-size: .7rem .7rem, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

/* Instagram identity card: silver shiny ring like the other white cards */
.ig-card { position: relative; border: 0; }
.ig-card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, #eef0f3 0%, #9aa0a9 38%, #dde1e6 62%, #8a9099 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* =======================================================================
   RESPONSIVE FIXES

   Every rule below repairs a layout that broke at some viewport width.
   They live at the end because several of them have to out-rank earlier
   unconditional declarations of the same selector.
   ======================================================================= */

/* --- 1. Horizontal page scroll on desktop -------------------------------
   The Tomas cut-out is 34–51rem wide and centred on the Level 3 card, which
   sits at the right edge of the grid. Nothing clipped him, so every viewport
   narrower than ~1700px got a horizontal scrollbar (116px of overflow at
   1280). overflow-x:clip contains him without turning the section into a
   scroll container, so the sticky pricing deck below 1000px still works and
   he can still overhang the card vertically. */
#levels { overflow-x: clip; }

/* --- 2. Horizontal page scroll on small phones --------------------------
   .btn is white-space:nowrap so labels never break mid-pill, but that also
   makes a long label an unshrinkable minimum: "Calculate My Targets" is a
   283px floor inside a 251px column at 340px wide, which pushed the whole
   page sideways. On phones let the label wrap instead. The second label copy
   only exists for the hover slide, which no touch device fires, so it goes. */
@media (max-width: 479px) {
  .btn { white-space: normal; }
  .btn__label { height: auto; line-height: 1.3; }
  .btn__label > span,
  .btn__label > span > span { white-space: normal; }
  .btn__label > span + span { display: none; }
  .btn:hover .btn__label > span:first-child { margin-top: 0; }
}

/* --- 3. Then / now table never collapsed on mobile ----------------------
   A `max-width:620px` rule stacked this table into one column, but two later
   unconditional `.then-now__row, .then-now__head` declarations reset the
   template at every width. The result on a 375px screen was three columns of
   60–90px wrapping every cell onto three lines.

   The table only makes its point if the two states can be read against each
   other, so keep them side by side and give the habit its own full-width
   line above them. The header row is hidden, so each value labels itself. */
@media (max-width: 620px) {
  .then-now__head,
  .prob-card--table .then-now__head { display: none; }

  .then-now__row,
  .prob-card--table .then-now__row {
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    row-gap: .95rem;
    padding: 1.15rem 1.25rem;
    align-items: start;
  }
  .then-now__k,
  .prob-card--table .then-now__k {
    grid-column: 1 / -1;
    font-size: .9375rem;
  }

  /* The "simplified table" block above strips padding and ::before content
     from `.then-now__row > span:last-child` at (0,4,0), so the two-column
     layout has to match that weight to put them back. */
  .then-now__a, .then-now__b,
  .prob-card--table .then-now__row > span.then-now__a,
  .prob-card--table .then-now__row > span.then-now__b { padding-left: 0; }

  .then-now__a::before,
  .then-now__b::before,
  .prob-card--table .then-now__row > span.then-now__a::before,
  .prob-card--table .then-now__row > span.then-now__b::before {
    content: "At 25";
    /* the last cell's ::before is the accent dash: absolute, 2px wide.
       Reset it fully or the label renders inside a 2px column. */
    position: static;
    top: auto;
    bottom: auto;
    width: auto;
    background: none;
    border-radius: 0;
    display: block;
    margin-bottom: .3rem;
    font-family: var(--font-display);
    font-size: .5rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-dark-gray);
  }
  .then-now__b::before,
  .prob-card--table .then-now__row > span.then-now__b::before { content: "After 40"; }
}

/* --- 4. Instagram reels on phones --------------------------------------
   The tiles are 9:16, so one column meant four 600px-tall frames — roughly
   2,500px of scrolling for four posts. Two columns keeps the whole set on
   one screen-and-a-bit. */
@media (max-width: 520px) {
  .ig-grid { grid-template-columns: repeat(2, 1fr); }
  .ig-post__cap { left: .6rem; right: .6rem; bottom: .6rem; font-size: .5rem; }
  .ig-post__ico { width: 1.5rem; height: 1.5rem; top: .5rem; right: .5rem; }
}

/* --- 5. PDF teaser clipped its own content ------------------------------
   The mock's box is sized from the .incl__row grid column, which shrank from
   17rem to 8.5rem across revisions, but the type inside stayed in fixed rem.
   The pages overflowed their own overflow:hidden box — by 103px at 1280 and
   131px at 768, so the amount cut off changed with the viewport. Size the
   whole mock from its own width instead: one container-query base, every
   child in em, so it renders identically at every breakpoint and fits. */
.pdfmock { container-type: inline-size; }
.pdfpage { font-size: 2.65cqw; padding: 5.5%; }

.pdfpage__eyebrow { font-size: .52em; }
.pdfpage__h { font-size: .88em; margin-top: .45em; }
.pdfpage__rule { height: .1em; margin: .6em 0 .75em; }
.pdfpage__rows { gap: .4em; }
.pdfpage__rows > div { gap: .08em; }
.pdfpage__rows em { font-size: .48em; }
.pdfpage__rows span { font-size: .62em; }
.pdfpage__note { font-size: .5em; padding-top: .45em; }

.pdfpage__brand { font-size: .66em; }
.pdfpage__kicker { font-size: .5em; }
.pdfpage__title { font-size: 1.5em; margin-top: .5em; }
.pdfpage__accent { height: .1em; margin: .8em 0 .7em; }
.pdfpage__sub { font-size: .58em; }
.pdfpage__foot { font-size: .46em; }

/* One mock width everywhere: the tablet step shrank it to 7.5rem, and at that
   size the sub-pixel rounding on ~20 lines of 2px type still tipped the back
   page a few pixels past its own box. */
@media (min-width: 561px) and (max-width: 900px) { .incl__row { grid-template-columns: 8.5rem 1fr; } }

/* --- 6. Two-step form progress row -------------------------------------
   "2 Your goals" ran flush into the container edge at 375px and wrapped
   below that, because neither step can shrink and the connector had already
   collapsed to 33px. */
@media (max-width: 440px) {
  .cform__progress { gap: .55rem; }
  .cform__pstep { font-size: .6875rem; gap: .4rem; letter-spacing: .02em; }
  .cform__pstep b { width: 1.45rem; height: 1.45rem; font-size: .6875rem; }
}

/* --- 7. Video lightbox on short viewports ------------------------------
   The panel is centred and the close button hangs 3rem above it, so on a
   landscape phone the panel is taller than the viewport and the close button
   lands off-screen with no way to scroll to it. */
@media (max-height: 560px) {
  .lb { align-items: flex-start; overflow-y: auto; padding-top: 3.25rem; }
  .lb__close { top: -2.5rem; }
}

/* --- 8. Levels eyebrow was white on an off-white ground ----------------
   The section moved to a light background but its badge label still carries
   .is-lime, which paints #fff. Only this one section is affected — the other
   two .is-lime badges are still on black. */
#levels .section-badge .font-r.is-lime { color: var(--color-black); }

/* =======================================================================
   MOBILE REFINEMENTS

   A second pass over phone widths. Same reason as the block above for
   living at the end of the file: most of these have to out-rank earlier
   unconditional declarations of the same selector.
   ======================================================================= */

/* --- 9. Buttons stretched to the full container width -------------------
   The design system turns .button-wrapper into a stretched column under
   767px, so every paired CTA became a 343px slab on a 390px screen. The
   pill is sized by its label at every other width and should be here too:
   keep the row, let it wrap, let each button keep its own width.

   .btn--wide is a different component and is left alone — it is 100% wide
   inside the plan and calculator cards at every breakpoint by design. */
@media (max-width: 767px) {
  .button-wrapper {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}

/* --- 10. The pill itself was oversized on phones ------------------------
   47px tall with a 37px chip and 24px of left padding. .btn--sm already
   carries the right metrics for a phone, so apply them to every button
   rather than tagging two dozen elements in the markup. */
@media (max-width: 767px) {
  .btn {
    padding: .25rem .25rem .25rem 1.1rem;
    gap: .7rem;
    font-size: .75rem;
  }
  .btn__chip { width: 2rem; height: 2rem; }
  .btn__arrows { width: .85rem; }
  .btn__arrows > * { width: .85rem; height: .85rem; }
  .btn:hover .btn__arrows > *:first-child { margin-left: -.85rem; }
  .btn--sm { padding: .2rem .2rem .2rem .95rem; }
  .btn--sm .btn__chip { width: 1.8rem; height: 1.8rem; }
}

/* --- 11. About Solum collage ate a whole screen -------------------------
   Under 620px the two columns stacked, so four frames ran full-bleed one
   after another: 1,242px of photography before a word of copy, more than a
   viewport of scrolling to get past. Two columns is the layout the collage
   was drawn for, and it costs ~400px at phone width instead. */
@media (max-width: 620px) {
  .collage { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .collage__col { gap: .5rem; }
  .collage__b { grid-column: 2; grid-row: 1 / span 2; }
}

/* 1fr is minmax(auto, 1fr), and that auto floor is the item's min-content
   width — so any child that will not shrink pushes the track, the grid and
   then the page wider than the viewport. At 320px the collage was 294px
   inside a 273px column. Every two-column block added on phones needs the
   floor removed explicitly. */
@media (max-width: 700px) {
  .collage, .collage__col, .collage__col > *,
  .ba-pair, .ba-pair__item,
  .then-now__row > span,
  .tst-col, .tst-col > * { min-width: 0; }
}

/* --- 12. Before / after lost the comparison on phones -------------------
   Stacking the two frames under 520px turned an 858px scroll out of the one
   image pair whose whole point is that you see both at once. Keep them
   adjacent and put the divider back on the vertical edge. */
@media (max-width: 520px) {
  .ba-pair { grid-template-columns: 1fr 1fr; }
  .ba-pair__item + .ba-pair__item {
    box-shadow: inset 1px 0 0 rgba(255,255,255,.16);
  }
  .ba-pair__tag { font-size: .5rem; padding: .3rem .5rem; letter-spacing: .1em; }
}

/* --- 13. Form fields were 60px tall at every width ----------------------
   Nine of them in the apply form, so the height compounds. The 16px font
   size is not cosmetic: iOS Safari zooms the whole page when you focus an
   input below 16px, and the page never zooms back out. */
@media (max-width: 767px) {
  .form-field {
    height: 3.25rem;
    padding-inline: 1.05rem;
    font-size: 1rem;
  }
  .calc .form-field { height: 2.9rem; padding-inline: .85rem; }
  textarea.form-field,
  .cform textarea.form-field { height: auto; min-height: 6.5rem; padding-block: .85rem; }
}

/* --- 14. Reviews were a 1,952px column ---------------------------------
   Three testimonials, each a photo plus a card, stacked under 1000px. On a
   phone that is two and a half screens of scrolling to read three quotes.
   Swipe through them instead — one card at a time, the next one peeking so
   it reads as a track rather than as the end of the section.

   .tst-col carries .reveal, and a slide parked off to the right never
   intersects the viewport, so it would sit at opacity 0 until swiped to.
   Opt these out of the reveal here. */
@media (max-width: 700px) {
  .tst-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    gap: .75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* the snap track bleeds to both container edges so the peek is even */
    margin-inline: calc(var(--container-pad) * -1);
    padding-inline: var(--container-pad);
    scroll-padding-inline: var(--container-pad);
  }
  .tst-grid::-webkit-scrollbar { display: none; }
  .tst-col {
    gap: .75rem;
    scroll-snap-align: start;
  }
  .tst-col.reveal { opacity: 1; transform: none; transition: none; }
}

/* --- 15. Line-height inherited as an absolute 14px ----------------------
   --lh-1 was `1em`. In line-height, em resolves against the element's own
   font size and then inherits as the resulting *length*, so `body` computed
   it to 14px and handed 14px down to everything that did not set its own.
   Any descendant with a larger font size got a line box shorter than its
   type: the FAQ summaries are 14.4px on 14px, .vthumb__name is 17.6px on
   14px. Wrap one of those onto two lines and the lines overlap.

   Unitless inherits as a ratio, which is what was meant. Elements that
   declare `line-height: var(--lh-1)` themselves are unaffected — 1em and 1
   compute identically there.

   body then needs a real inheritable default. The accidental 14px worked out
   to 1.2–1.5 for the small uppercase labels that make up most of the
   inheriting text, so 1.3 keeps them where they were and only changes the
   cases that were broken. Paragraphs (1.7) and headings (1) set their own
   and are untouched. */
:root { --lh-1: 1; }
body { line-height: 1.3; }

/* Wrapping text that still needs more than the ratio it inherits. */
.faq-q summary > span:first-child { line-height: 1.3; }
.vthumb__name { line-height: 1.15; }
.plan__price { line-height: 1.15; }
.footer-cols a { line-height: 1.35; }

/* Headings run at ratio 1, and the split-line reveal masks each line with
   overflow:hidden — so every descender in a heading was being sliced off
   (29px of glyph in a 26px box). overflow-clip-margin widens the clip region
   without adding a scroll box or moving anything. */
.split-line { overflow: clip; overflow-clip-margin: 0.14em; }

/* --- 16. Sticky CTA was two stacked rows on a phone ---------------------
   The label and the button both sit on their own line under ~430px, which
   makes the bar 103px tall — a fifth of a phone screen, permanently. One
   row: the label takes what is left and wraps inside it. */
@media (max-width: 760px) {
  .stickycta__in { flex-wrap: nowrap; gap: .85rem; }
  .stickycta__txt { min-width: 0; flex: 1 1 auto; }
  .stickycta__txt b { font-size: .6875rem; line-height: 1.25; letter-spacing: .04em; }
  .stickycta__btns { flex: none; flex-wrap: nowrap; }
}

/* =======================================================================
   SCIENCE HEADER COLLAGE

   Three frames from the shoot showing what "measuring the body" actually
   looks like — the full standing measurement, the band on the wrist, the
   feet on the pod. They go beside the section header, which was carrying a
   ~700x370px void to the right of the heading, so the section gains the
   photography without gaining any height.
   ======================================================================= */
/* .section-header.left already sets align-items, so the modifier has to
   match its weight to re-centre the two columns against each other. */
.section-header.sci-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: var(--gap-1-75);
  align-items: center;
  width: 100%;
}
.sci-head__copy { display: flex; flex-direction: column; align-items: flex-start; }

/* The shots that used to sit here were moved out to .sci-strip below, and
   this block went with them: `.sci-tile { aspect-ratio: 16/10 }` outlived
   its markup and was still squashing the strip's tiles from three rules
   away. The warning it carried is the one that matters and it is repeated
   at .sci-strip: a `.slot` is overflow:hidden, so its min-content height is
   zero, and an item spanning flexible tracks contributes nothing to them. */

/* Media queries add no specificity, so this has to carry the same two-class
   weight as the block above or the two columns survive down to 320px and the
   whole collage lands in a 164px gutter. */
@media (max-width: 900px) {
  .section-header.sci-head {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-1-5);
  }
}

/* --- 17. Step rules read as dividers once the steps stack ---------------
   .step carries a 2px gold top border. Across four side-by-side columns
   that is a column marker; stacked on a phone it is four heavy gold bars
   slicing the page, and the eye reads them as section separators. Same
   accent, same position, but as a short tick instead of a full-width rule.
   A border cannot be part-width, so it becomes a background instead. */
@media (max-width: 620px) {
  .step {
    border-top: 0;
    padding-top: 1.1rem;
    background: linear-gradient(var(--color-lime), var(--color-lime))
                left top / 2.25rem 2px no-repeat;
  }
}

/* =======================================================================
   FREE START — Tomas cut-out at the foot of the pitch column.
   The left column carried ~1,100px of dead space under the sticky pitch,
   because the calculator flow on the right is three times its height.
   The figure takes the bottom of that column: the grid gains a second row
   sized to the image, the pitch keeps the first row to itself, and sticky
   now stops where the figure starts instead of travelling over it.
   ======================================================================= */
/* Sticky can't be bounded by a grid area in Chrome — the pitch travelled
   straight down over the figure. So the aside stretches the full column,
   the pitch sticks inside a wrapper that stops where the figure starts,
   and the figure is pinned to the foot of the column. */
@media (min-width: 1001px) {
  #start .startgrid__aside { position: static; align-self: stretch; display: flex; flex-direction: column; }
  #start .startgrid__stickwrap { flex: 1 1 auto; }
  #start .startgrid__stick { position: sticky; top: 5.5rem; }
  #start .startfig { flex: none; }
}
#start .startfig { display: flex; justify-content: flex-start; align-items: flex-end; }
#start .startfig .slot {
  width: 100%; max-width: 24rem;
  height: auto; min-height: 0; aspect-ratio: auto;
  border: 0; background: none; box-shadow: none;
  /* .slot is overflow:hidden by default, which clipped the drop-shadow into
     a hard rectangle. The box is opened up and padded so the shadow has
     somewhere to fall — border-box, so the figure itself stays ~22rem. */
  overflow: visible;
  padding: 5rem 2.5rem 3.5rem;
}
#start .startfig .slot.has-img > img {
  width: 100%; height: auto; object-fit: fill; border-radius: 0;
  /* No shadow. It was here to give the figure contact with the floor, but
     the pose is a mid-march with the leading foot off the ground, so a
     contact shadow implies a floor he isn't touching. On a near-white
     ground it just read as a sticker edge. */
  filter: none;
  /* Forward lean, tipping the top to the right. Pivot at the feet, not the
     centre, or the whole figure slides sideways instead of leaning. */
  transform-origin: 50% 100%;
  transform: rotate(7deg);
}
/* stacked, it sits between the pitch and the calculator; half size is
   plenty there, and a full-height figure would push the form off-screen */
@media (max-width: 1000px) {
  #start .startfig { justify-content: center; padding-block: var(--space-2-5); }
  #start .startfig .slot { max-width: 14rem; padding: 3rem 1.5rem 2.25rem; }
}

/* =======================================================================
   v49 — CLIENT REVIEW, 2026-08-26
   ======================================================================= */

/* ----------------------------------------------------------------------
   1. The two marquees did not scroll on the client's phone (iOS Safari).

   Both bands animate correctly in every browser I can test, so the CSS
   animation is kept only as the no-JS fallback. page.js takes the tracks
   over and drives the transform from rAF, which cannot be parked by the
   compositor and wraps at track-width + flex-gap so the loop is seamless
   on the dark band too. Reduced motion is still honoured: nothing starts.
   ---------------------------------------------------------------------- */
.marquee { transform: translateZ(0); }
.marquee__track {
  animation-name: marquee-scroll-3d;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
@keyframes marquee-scroll-3d {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}
/* JS is driving the transform — park the fallback animation */
.marquee__track.is-js-driven { animation: none; }

/* ----------------------------------------------------------------------
   2. Free start: the other cut-out on phones.
   The mid-march figure leans 7° out of a 224px column and reads as a run,
   which is the wrong note beside a nutrition calculator. On phones it is
   swapped for the standing portrait. Both slots are in the markup; exactly
   one is ever displayed.
   ---------------------------------------------------------------------- */
#start .startfig__phone { display: none; }
@media (max-width: 1000px) {
  #start .startfig__wide { display: none; }
  #start .startfig__phone { display: flex; }
  /* the standing pose has both feet down, so it stays upright */
  #start .startfig__phone.has-img > img { transform: none; }
}

/* ----------------------------------------------------------------------
   3. Hero headline matches the section headings on phones.
   .hero-heading runs at --fs-h1 × .74, which is still a size of its own at
   phone widths (2.22rem against a 2rem h2). One heading size on a phone.
   ---------------------------------------------------------------------- */
@media (max-width: 767px) {
  .hero-heading { font-size: var(--fs-h2); }
}

/* ----------------------------------------------------------------------
   4. Logo up a step at every width.
   ---------------------------------------------------------------------- */
.wordmark .logo { height: 3rem; }
.wordmark--lg .logo { height: 4.3rem; }
@media (max-width: 620px) {
  .wordmark .logo { height: 2.4rem; }
  .wordmark--lg .logo { height: 3.35rem; }
}

/* ----------------------------------------------------------------------
   5. The Problem table: bigger habit icons, and the two state labels read
      black on phones.

   On phones the header row is hidden and each value labels itself through
   a ::before ("At 25" / "After 40"). Those were --color-dark-gray, which
   the client reads as washed out at .5rem on a phone.
   ---------------------------------------------------------------------- */
.then-now__ico svg { width: 1.7rem; height: 1.7rem; }
.then-now__head > span:first-child { padding-left: 2.5rem; }

@media (max-width: 620px) {
  .then-now__a::before,
  .then-now__b::before,
  .prob-card--table .then-now__row > span.then-now__a::before,
  .prob-card--table .then-now__row > span.then-now__b::before {
    color: var(--color-black);
  }
}

/* =======================================================================
   v50 — CLIENT REVIEW, 2026-08-27
   ======================================================================= */

/* ----------------------------------------------------------------------
   1. "The silver is ugly — go darker, with light text on it."

   Every filled accent surface is re-pointed at --au-surface / --au-on here
   rather than at the flat token, and only in silver mode: gold is left
   exactly as it was. The list is explicit on purpose — the accent is also
   used for hairlines, tick discs, progress fills and small caps type, and
   those must stay mid-luminance to survive on black AND on white. Sending
   them dark would erase them on the dark sections.
   ---------------------------------------------------------------------- *//* the shorthand on these two would otherwise put the flat token back *//* type inside the filled cards is set per-element, so it has to be told too *//* The licensed-partner chips fill from --au-solid-*, which in silver is the
   same gunmetal as every other filled surface — but their ink is hard-coded
   #111 for gold, so in silver the label vanished into its own background.
   Only the ink moves; the fill was already right. The seal disc flips with
   it, and its tick flips the other way to stay visible on a light disc. */
/* `.plan--feature .tick-list li.is-me` sets its own colour at (0,3,1) and so
   outranks the `.plan--feature *` sweep above at (0,3,0). In gold that colour
   is #111 and correct; in silver it left four list items at 2.13 against the
   fill. Restated at matching weight rather than by widening the sweep. */
/* the tick discs inside a filled card need the opposite of their usual job */
/* ----------------------------------------------------------------------
   2. The mid-march cut-out moves to the bloodwork card, and is bigger.

   It stands on the card and is clipped by its top edge, so the figure has
   to be a sibling: .sci-panel is overflow:hidden and would crop anything
   inside it. The card takes a z-index so it paints over the figure's feet.

   Sized at 20rem after the first pass read small. The ceiling is not the
   header's height but its width: the copy is capped at 40rem and the
   figure hangs off the right edge, so it can rise the full height of the
   header without ever meeting a line of text. 20rem puts its head level
   with the heading, which is as far as it should go.

   Below 901px the stack is a single column and the header runs full width,
   so there is no empty right side to reach into: the figure is dropped
   rather than shrunk into the gap between the two cards.
   ---------------------------------------------------------------------- */
.sci-blood { position: relative; display: flex; flex-direction: column; }
.sci-blood > .sci-panel { flex: 1 1 auto; }
.sci-panel--blood { z-index: 1; }

.sci-blood__fig {
  position: absolute;
  z-index: 0;
  right: 2rem;
  /* the bottom 5rem of the figure disappears behind the card */
  bottom: calc(100% - 5rem);
  width: 20rem;
  height: auto; min-height: 0; aspect-ratio: auto;
  border: 0; background: none; box-shadow: none; overflow: visible; padding: 0;
  pointer-events: none;
}
.sci-blood__fig.has-img > img {
  width: 100%; height: auto; object-fit: fill; border-radius: 0; filter: none;
}
@media (min-width: 901px) { .sci-stack { margin-top: 7rem; } }
/* Narrow desktop: the copy is capped at 40rem but the container is not, so
   as the window closes it is the white to the right of the paragraphs that
   disappears, not the paragraphs. 20rem still clears them at 1101px, by
   62px — close enough to read as a collision, so the small figure holds
   until 1250 where the gap is over 200. */
@media (min-width: 901px) and (max-width: 1250px) {
  .sci-blood__fig { width: 13rem; right: 1rem; bottom: calc(100% - 3.5rem); }
}
@media (max-width: 900px) { .sci-blood__fig { display: none; } }

/* the shots have left the header, so the copy is the whole of it */
.section-header.sci-head { grid-template-columns: minmax(0, 1fr); }

/* ----------------------------------------------------------------------
   3. The collage: one full-width card under the pair.

   First pass put all three shots in a short landscape row. All three
   sources are tall portraits — 2734x4289 and two at 3333x5000 — so a
   202px-high box showed a band across the middle of each and the standing
   frame lost both its head and its feet. That is the "not showing off the
   photos" note, and no object-position fixes it.

   So the lead frame now carries its own aspect-ratio and is the narrowest
   column rather than the widest: at its natural 2734/4289 it crops to
   nothing, and it is what sizes the row. The two details stretch to that
   row and crop to roughly square, which suits them — both subjects (two
   fists, two feet) are arranged across the frame, not down it, and both
   sources are 3333x5000 so there is height to spare.

   Every photo is positioned absolutely inside its tile. Sizing them with
   height:100% instead makes the row depend on the images and the images
   depend on the row; that circularity is what collapsed this strip to
   natural photo height on the first attempt.

   The gap above is the stack's own gap, not a spacer div. The .space-1-87
   utility resolves to 43px here against the stack's 28px, which is why the
   strip read as detached from the two cards rather than grouped with them.
   ---------------------------------------------------------------------- */
.sci-strip {
  display: flex;
  align-items: stretch;
  gap: .75rem;
  margin: var(--gap-1-75) 0 0;
  padding: .75rem;
  background: var(--color-white);
  border: 1px solid var(--color-black-14);
  border-radius: var(--radius-lg);
  /* a floor, not a size: it never binds while the lead photo is doing its
     job, so if that photo ever fails to load the strip degrades to a short
     card instead of collapsing to a 26px line of padding */
  min-height: 14rem;
}
/* the two details are their own flex box rather than two more cells of the
   strip. On a phone this box turns into a column, which is the whole reason
   it exists: the alternative is one tile spanning two grid rows, and that
   is the arrangement that broke. */
.sci-strip__pair {
  display: flex;
  align-items: stretch;
  gap: .75rem;
  flex: 2.02 1 0;
  min-width: 0;
}
.sci-strip__pair > .sci-tile { flex: 1 1 0; min-width: 0; }
.sci-strip .sci-tile--lead { flex: .62 1 0; min-width: 0; }

.sci-strip .sci-tile {
  position: relative;
  height: auto;
  min-height: 0;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) - .5rem);
}
/* The lead photo sits in normal flow and is the only thing in the strip with
   a height of its own. Everything else stretches to it.

   Deliberately not `aspect-ratio`: the first version sized the row from a
   ratio on a grid item spanning two rows, whose siblings had no intrinsic
   height at all because their images were absolutely placed. Chrome resolves
   that; iPhone Safari did not, and the collage arrived broken. A replaced
   element in flow, plus align-items: stretch, is the boring version of the
   same layout and needs nothing newer than flexbox. It also crops the
   standing frame by exactly nothing, which was the point of it. */
.sci-strip .sci-tile--lead.has-img > img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  /* the photo's own ratio, restated so prod's lazy load reserves the box
     before the file arrives — without it the strip sits at its min-height
     and jumps when the image decodes */
  aspect-ratio: 2734 / 4289;
}
.sci-strip .sci-strip__pair .sci-tile.has-img > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* the two details are the only ones cropped: hold the band on the hands
   and on the feet rather than on the centre of a 5000px-tall frame */
.sci-strip .slot[data-slot="SCI-02"].has-img > img { object-position: center 62%; }
.sci-strip .slot[data-slot="SCI-03"].has-img > img { object-position: center 56%; }

/* phone: the lead keeps its portrait shape down the left and the two
   details stack beside it, which is the only arrangement that does not
   letterbox a standing figure at 350px wide */
@media (max-width: 700px) {
  .sci-strip { gap: .5rem; padding: .5rem; min-height: 9rem; }
  .sci-strip__pair { flex-direction: column; flex: 1 1 0; gap: .5rem; }
  .sci-strip .sci-tile--lead { flex: .9 1 0; }
}

/* ----------------------------------------------------------------------
   4. Free start has no cut-out.

   "Why is there a cut out here all of a sudden?" — the marching figure
   moved up to the bloodwork card and the standing portrait had taken its
   place, which reads as unmotivated: two cut-outs, two sections apart,
   neither doing anything the copy needs. The figure is gone from the
   markup; the .startfig rules above it are left dormant so putting one
   back is a markup change alone.
   ---------------------------------------------------------------------- */

/* ----------------------------------------------------------------------
   5. UNIT PICKERS, second pass.

   A <select> for two options is a dropdown to reach one alternative, and
   sitting beside a number input it read as a second field rather than as a
   property of the first. Replaced with a segmented toggle on the leading
   edge: both units visible, one tap, no popup list.

   The toggle keeps its own shell rather than sharing a border with the
   input. Wrapping both in one box means restating the field height, which
   is 60px here and 52px under 767px and belongs to the design system, not
   to this file; letting the toggle stretch to whatever the input is costs
   nothing and cannot drift.

   The <select> is gone rather than hidden. Two focusable controls for one
   value is worse for a keyboard than either alone, so the buttons are the
   control and a hidden input carries the value the calculator reads.
   Arrow keys move between the segments.
   ---------------------------------------------------------------------- */
.unitfield { display: flex; align-items: stretch; gap: .4rem; min-width: 0; }
.unitfield > .form-field { min-width: 0; }
.unitfield > input.form-field:not(.unitfield__in) { flex: 1 1 auto; width: auto; }
.unitfield__in { flex: 0 0 3.4rem; width: auto; padding-inline: .7rem; text-align: center; }
.unitfield__in[hidden] { display: none; }

.unitseg {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--color-white-16);
  border-radius: var(--radius-lg);
  background: rgba(0, 0, 0, .28);
}
.unitseg__b {
  appearance: none; -webkit-appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0 .65rem;
  font-family: var(--font-display);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  border-radius: calc(var(--radius-lg) - 3px);
  transition: background-color .15s ease, color .15s ease;
}
.unitseg__b:hover { color: #fff; }
.unitseg__b.is-on {
  background-color: var(--color-lime);
  color: var(--color-black);
}
.unitseg__b:focus-visible {
  outline: 2px solid var(--color-lime);
  outline-offset: 2px;
}

@media (max-width: 400px) {
  .unitfield { gap: .3rem; }
  .unitfield__in { flex-basis: 2.9rem; padding-inline: .4rem; }
  .unitseg__b { padding-inline: .45rem; font-size: .625rem; letter-spacing: .04em; }
}

/* The same switch on the white contact form: the colours invert, the lit
   segment stays gold so it matches the step marker beside it. */
.unitfield--light .unitseg { border-color: var(--color-black-14); background: var(--color-off-white); }
.unitfield--light .unitseg__b { color: var(--color-dark-gray); }
.unitfield--light .unitseg__b:hover { color: var(--color-black); }
.unitfield--light .unitseg__b.is-on { background-color: var(--color-lime); color: var(--color-black); }
.unitfield--light .unitseg__b:focus-visible { outline-color: var(--color-black); }

/* ----------------------------------------------------------------------
   6. Tomas in the pricing section on phones.

   He stands at the foot of the whole section and the next one cuts him off
   at the waist, rather than living inside the Level 3 card. That is why he
   moved out of the card in the markup: below 1000px the cards are a sticky
   deck, and a sticky box is both a containing block for anything absolute
   inside it and its own stacking context, so from in there he could reach
   neither the section's bottom edge nor behind the section that follows.

   Out here his containing block switches with the breakpoint. Above 1000px
   .plan-grid takes position:relative and he sits over the Level 3 column
   exactly as before. Below it .plan-grid is static again and he falls
   through to .section, whose bottom edge he now hangs off.

   Nothing gives him a z-index: he needs to stay in the plain positioned
   layer so the Reviews section, later in the document, paints over the half
   of him that hangs below. A z-index here would put him on top of it.
   ---------------------------------------------------------------------- */
@media (min-width: 1001px) {
  /* his containing block, in place of the card he used to sit inside */
  .plan-grid { position: relative; }
  /* Placed into the Level 3 column rather than measured to it. An absolutely
     positioned grid child whose containing block is the grid takes its grid
     area as that containing block, so `left: 50%` from the cascade above
     still centres him on the card and `top` still counts from the card's top
     edge — the geometry is byte-for-byte what it was inside the card.

     The arithmetic version of this (83.333% + gap/3) was exact at 1440 and
     1200 and wrong by 8px at 1024, because `repeat(3, 1fr)` is really
     minmax(auto, 1fr): the third track blows out to 322.9px there while the
     other two hold at 299px, and no formula over the grid's width can find
     the centre of a track that is sizing to its own content. */
  .cutout--tomas { grid-column: 3; grid-row: 1; }
}

@media (max-width: 1000px) {
  .levels-light {
    /* This is the width of the whole PNG, not of Tomas. He occupies 782 of
       its 1866 px — 42%, with a 29% transparent margin either side — so a
       box sized to the section left him at barely a third of the screen.
       190vw makes his body about 80% of the phone's width; the canvas edges
       overflow the box and are clipped. The cap holds him near half the
       width of a tablet, where 190vw would be absurd. */
    --tomas-w: clamp(22rem, 190vw, 62rem);
  }
  .cutout--tomas {
    display: block !important;   /* six earlier rules hide him with !important */
    position: absolute;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    transform: none;
    margin: 0;
    z-index: auto;
    filter: none;
    pointer-events: none;
    /* The box is the window, not the figure: it spans the section and is
       cropped to 0.52 of the image's width. The PNG is 3:4, so that shows
       the top 39% of the canvas — from the top of his head to just under
       the crossed arms. Everything below is simply outside the box.

       He is cut by this box rather than by hanging below the section: the
       Reviews section and everything in it is transparent down to the white
       on <body>, so there is nothing there to do the covering. The pricing
       section is #f7f7f7, so its bottom edge is the visible line either way,
       and this does not depend on what the next section is painted. */
    height: calc(var(--tomas-w) * 0.52) !important;
    aspect-ratio: auto !important;
    overflow: hidden;
  }
  .cutout--tomas .slot,
  .cutout--tomas .slot.has-img { height: 100%; }
  .cutout--tomas .slot.has-img > img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* -0.045 lifts the canvas's own empty margin above his head off the top
       of the box, so the crop starts at his hair rather than 40px above it */
    top: calc(var(--tomas-w) * -0.045);
    width: var(--tomas-w);
    height: auto;
    max-width: none;
    object-fit: fill;
  }
  /* the room he stands in. Without it he starts inside the Level 3 card,
     which is sticky at z-index 3 and paints straight over him. */
  #levels .plan-grid { margin-bottom: calc(var(--tomas-w) * 0.53); }
}

/* Stat tile used outside the About collage: no grid placement, sized to its
   own content instead of stretching to a grid row. */
/* The Hume kit and the tier it belongs to, called out rather than captioned.
   Sits at the foot of the panel's text column, not over the photo, which is
   absolutely positioned and bleeds past the card corner.

   The label borrows .sci-chip's exact type — same face, size, weight and
   tracking — instead of inventing a slightly smaller caps style. Two caps
   sizes a notch apart in one section do not read as a hierarchy, they read as
   a mistake. The body line stays on .paragraph-regular, so the callout adds no
   new type style to a section already carrying ten. */
.sci-kit {
  border-left: 3px solid var(--au-surface);
  background: var(--accent-07);
  padding: .85rem 1.1rem;
  border-radius: 0 .25rem .25rem 0;
}
.sci-kit__lab {
  display: block;
  font-family: var(--font-display); font-size: .625rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--au-ink);
  margin-bottom: .3rem;
}
.sci-kit p { margin: 0; }

/* Form status line. Reuses the body type and separates the three states by
   colour, not by another size. Only ever holds one short sentence. */
.cform__status {
  margin: .9rem 0 0;
  font-family: var(--font-body); font-size: .8125rem; line-height: 1.5;
}
.cform__status.is-wait { color: var(--color-dark-gray); }
.cform__status.is-good { color: var(--au-ink); font-weight: 500; }
.cform__status.is-bad  { color: #a4302b; }

/* A buy button with no Stripe link yet opens the stand-in checkout page. It
   should still look like a live control, so nothing is dimmed here; the
   attribute exists so it is greppable before launch. */
[data-buy-pending] { cursor: pointer; }

/* Legal pages (terms, privacy, refunds). One narrow column on the site's own
   type, no nav and no footer — they are read, not browsed. PLACEHOLDER runs
   are marked so an unfinished clause cannot slip past unnoticed. */
.legal { max-width: 44rem; margin: 0 auto; padding: var(--space-5) 1.5rem var(--space-7-5); }
.legal .section-heading { margin: 0 0 var(--space-2-5); }
.legal__h {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
  margin: var(--space-2-5) 0 var(--space-0-75);
}
.legal .paragraph-regular { margin: 0 0 var(--space-1); }
.legal .tick-list { margin: 0 0 var(--space-1-5); }
/* These lists reuse .tick-list, which is a benefits component built for the
   dark sections: its items are white-70 and a pixel off .paragraph-regular.
   On a white page that rendered nine lines of the privacy policy invisible,
   and with the meta line it put three body sizes within 2px of each other.
   One body size here; the meta line steps back in colour, not in size. And a
   neutral dot, because a green tick beside "health data we collect" reads as
   an endorsement rather than a list item. */
.legal .tick-list li {
  font-size: var(--fs-base); color: var(--color-dark-gray); padding-left: 1.1rem;
}
.legal .tick-list li::before {
  width: .3125rem; height: .3125rem; top: .62em; left: .1rem;
  background: rgba(17, 17, 17, .32);
}
.legal .tick-list li::after { content: none; }
.legal__meta { font-family: var(--font-body); font-size: var(--fs-base); color: #757575; margin-top: var(--space-2-5); }
/* Gold on a gold tint measured 3.53:1. A marker whose whole job is to be
   impossible to miss before this copy is written should not be the faintest
   thing on the page. */
.legal__todo { background: var(--accent-14); color: #4a3f20; padding: 0 .25rem; border-radius: .15rem; }
.legal__back {
  display: inline-block; margin: 0 0 var(--space-2-5);
  font-family: var(--font-display); font-size: .625rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: #7d6a3b; text-decoration: none;
}
.legal__back:last-child { margin: var(--space-3-75) 0 0; }
/* Borrows .legal__back's type exactly, so the cross-links add no new style. */
.legal__nav { display: flex; gap: 1.25rem; flex-wrap: wrap; margin: var(--space-3-75) 0 0; }
.legal__nav a {
  font-family: var(--font-display); font-size: .625rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: #7d6a3b; text-decoration: none;
}
.legal__nav a:hover { text-decoration: underline; }
.legal__nav + .legal__back:last-child { margin-top: var(--space-1-5); }

/* Checkout popup. Opened over the page by a buy button (#buy-KEY in the
   URL) so the site stays under the visitor. Same bones as the video
   lightbox; inside, the contact section's grid: a copy of the pricing card
   that was pressed on the left, the contact form's stepper on the right.
   The card keeps the pricing section's light theming via the :is() above. */
.ck {
  position: fixed; inset: 0; z-index: 12000;
  display: none; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.ck.is-open { display: flex; }
.ck__scrim { position: absolute; inset: 0; background: rgba(8,8,8,.86); backdrop-filter: blur(6px); }
.ck__panel {
  position: relative; z-index: 1;
  width: 100%; max-width: 72rem; max-height: calc(100vh - 3rem); overflow: auto;
  background: var(--color-white); border-radius: var(--radius-lg);
  padding: var(--space-3);
  animation: lbIn .4s cubic-bezier(.22,1,.36,1) both;
}
.ck__close {
  position: absolute; top: .9rem; right: .9rem; z-index: 2;
  width: 2.2rem; height: 2.2rem; border: 0; border-radius: 999px;
  background: var(--color-off-white); color: var(--color-black); cursor: pointer;
  display: grid; place-items: center;
}
.ck__close:hover { background: var(--color-black-14); }
.ck__close svg { width: 1rem; height: 1rem; }

.pay__grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: var(--gap-3-75); align-items: start; }
.pay__order { position: sticky; top: 0; }
.pay .plan { transition: none; }
.pay .plan:hover { transform: none; }
.pay .cform[hidden] { display: none; }
.pay .cform .row { grid-template-columns: 1fr 1fr; }
.pay__go { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
/* what happens next, after paying: the site's tick list on a white ground */
.pay__next li { color: var(--color-dark-gray); }

/* Three markers do not fit a phone with all three labels on: only the live
   step keeps its word, the others are their number. */
.cform__pstep { white-space: nowrap; }
@media (max-width: 480px) {
  .cform__progress--3 .cform__pstep:not(.is-on) > span { display: none; }
  .cform__progress--3.is-done .cform__pstep:last-child > span { display: inline; }
}

@media (max-width: 900px) {
  /* a sheet, not a window */
  .ck { padding: 0; align-items: stretch; }
  .ck__panel { max-width: none; max-height: none; border-radius: 0; padding: 3.5rem 1.25rem var(--space-5); }
  .pay__grid { grid-template-columns: 1fr; gap: var(--gap-2-5); }
  .pay__order { position: static; }
  /* the order shrinks to level, name and price on a phone; the list of what
     is included would cost a whole screen before the first question */
  .pay__order .plan__bottom, .pay__order .divider,
  .pay__order .divider + .space-1-87, .pay__order .plan__price + .space-1-87 { display: none; }
  /* after paying, the message comes before the order */
  .pay--done .pay__main { order: -1; }
}
@media (max-width: 640px) { .pay .cform .row { grid-template-columns: 1fr; } }

/* Cookie consent card. A corner card rather than a full-width bar: the bar
   spanned the same edge as the sticky CTA, so the two had to be kept apart by
   offsetting one against the other's measured height — which is what left a
   gap between them, and what put the hidden CTA on top of the buttons.

   A card owns a corner instead of an edge, so there is no offset to compute.
   The sticky CTA is simply suppressed until consent is answered: it is a
   one-time question, and nothing should compete with it. Uses the site's
   button component, so it adds two type styles rather than four. Fixed rather
   than sticky: it must not scroll away unanswered. */
.cbar {
  position: fixed; z-index: 9600;
  left: 1.25rem; bottom: 1.25rem; right: auto;
  width: min(23rem, calc(100vw - 2.5rem));
  background: var(--color-black-gray);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg, .75rem);
  box-shadow: 0 1.5rem 3rem rgba(0,0,0,.45);
  padding: 1.25rem;
}
.cbar__in { display: flex; flex-direction: column; align-items: flex-start; gap: .85rem; }
.cbar__copy { min-width: 0; }
.cbar__copy b {
  display: block;
  font-family: var(--font-display); font-size: .625rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--color-white);
  margin-bottom: .4rem;
}
.cbar__copy p {
  margin: 0;
  font-family: var(--font-body); font-size: .8125rem; line-height: 1.5;
  color: rgba(255,255,255,.62);
}
.cbar__btns { display: flex; gap: .6rem; width: 100%; }
/* Every other button on the site gets its height from the arrow chip — 35 to
   40px. These two have no chip, so they were left with the base 3.2px of
   vertical padding and came out 22px tall and squashed. The base left padding
   is sized for a chip sitting on the right, too, so the label needs centring
   once there is nothing to sit beside. */
.cbar__btns .btn {
  flex: 1 1 0;
  justify-content: center;
  padding: .72rem 1.25rem;
  min-height: 2.5rem;
}
.cbar__more {
  font-family: var(--font-display); font-size: .625rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.55); text-decoration: none;
}
.cbar__more:hover { color: var(--color-white); }

/* The card overlays the CTA rather than displacing it. Nothing is offset
   against anything, so there is no seam to leave a gap — and the CTA stays
   where it belongs instead of vanishing until consent is answered. The card
   outranks it (9600 over 9000), so its buttons stay on top and clickable. */
/* A CTA that is off-screen must never eat a click on its way past. */
.stickycta:not(.is-on) { pointer-events: none; }

@media (max-width: 700px) {
  .cbar { left: 1rem; right: 1rem; bottom: 1rem; width: auto; }
}