/* ============================================================================
   DoNotAge funnel design system
   Ported from the original hand-authored landing page, reorganised by section.
   Fonts: each page loads Fraunces + Manrope via a Google Fonts <link>; the
   :root vars below replace the ones next/font injected in the original apps.
   ========================================================================== */

:root {
  --font-fraunces: "Fraunces";
  --font-manrope: "Manrope";
}

/* --- design tokens -------------------------------------------------------- */
:root {
  --pine: #26332f;
  --pine-shadow: #1e2a26;
  --mid: #375144;
  --sage: #8fa89a;
  --sage-deep: #5c7a6a;
  --offwhite: #f4f1e9;
  --paper: #fcfbf7;
  --band: #eef1ec;
  --ink: #16302a;
  --line: rgba(38, 51, 47, 0.12);
  --near-black: #0b1210;
}

/* --- reset + base --------------------------------------------------------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-manrope), system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
}
.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px;
}
h1,
h2,
h3 {
  font-family: var(--font-fraunces), Georgia, serif;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* scroll-in reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.d1 {
  transition-delay: 0.08s;
}
.d2 {
  transition-delay: 0.16s;
}
.d3 {
  transition-delay: 0.24s;
}
.d4 {
  transition-delay: 0.32s;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* --- announce bar --------------------------------------------------------- */
.announce {
  background: var(--pine);
  color: var(--offwhite);
  font-size: 13px;
  letter-spacing: 0.08em;
  padding: 10px 16px;
}
.announce .announce-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 14px;
}
.announce .sep {
  opacity: 0.5;
}

/* --- top bar / nav -------------------------------------------------------- */
.bar {
  border-bottom: 1px solid var(--line);
  background: rgba(252, 251, 247, 0.9);
  position: sticky;
  top: 0;
  z-index: 50;
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  backdrop-filter: saturate(120%) blur(6px);
}
.bar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  gap: 16px;
}
/* The nav carries the horizontal WORDMARK (687x64), not the stacked logo, so
   it is sized by the reference pages' rule rather than the square 58px this
   used to be: at 58px a 687-wide lockup renders ~622px and swallows the bar.
   Matches clear-the-shelf / the-afternoon-wall. The footer keeps the stacked
   logo, which is why only this rule moves. */
.bar img {
  height: 18px;
  width: auto;
  display: block;
}

/* --- buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--pine);
  color: var(--offwhite);
  font-family: var(--font-manrope), system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  padding: 14px 28px;
  border-radius: 3px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease;
}
.btn:hover {
  transform: translateY(-2px);
  background: var(--pine-shadow);
}
.btn .arrow {
  transition: transform 0.25s ease;
}
.btn:hover .arrow {
  transform: translateX(4px);
}
.btn.small {
  padding: 11px 22px;
  font-size: 15px;
}
.btn.light {
  background: var(--offwhite);
  color: var(--pine);
}
.btn.light:hover {
  background: #fff;
}
.btn.block {
  width: 100%;
  justify-content: center;
  padding: 18px;
  font-size: 18px;
}
.btn.ghost {
  background: transparent;
  color: var(--pine);
  box-shadow: inset 0 0 0 1.5px var(--pine);
}
.btn.ghost:hover {
  background: var(--pine);
  color: var(--offwhite);
}
.herobtns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 24px;
}
.herobtns .btn {
  margin-top: 0;
}

/* --- hero ----------------------------------------------------------------- */
/* Copy-only hero: one column, and the measure capped so the lede does not run
   the full 1120px the two-column layout affords it. */
.hero.hero-copy .wrap {
  grid-template-columns: 1fr;
}
.hero.hero-copy h1 {
  /* The brief's own measure. At display size 34ch never binds, so the headline
     ran the full track. */
  max-width: 17ch;
}
.hero.hero-copy .lede {
  max-width: 58ch;
}

.hero .wrap {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 54px;
  align-items: center;
  padding: 64px 32px 60px;
}

/* The full-width headline variant (HeroBlock.headingFullWidth). The heading
   block spans both tracks on its own row; the lede, CTA and trust row keep the
   left track beside the image.

   The row gap is reset to something typographic: the 54px COLUMN gap is right
   between copy and a photo and far too much between a headline and the
   paragraph under it, and a single `gap` drives both. */
.hero.hero-wide-heading .herohead {
  grid-column: 1 / -1;
}
.hero.hero-wide-heading .herohead h1 {
  /* Full width earns a real measure. Without a cap the headline runs the whole
     track and the eye loses the line start on a wide viewport. */
  max-width: 24ch;
}
@media (min-width: 821px) {
  /* ONLY where the hero is actually two-column. The stacked layout starts at
     max-width 820px, where `.hero .wrap` sets `gap: 34px` and `.heroimg` takes
     `order: -1` — so the image sits above the heading and that 34px is the only
     thing holding them apart.

     Scoped as min-width rather than overridden below, because `.hero.hero-wide-heading
     .wrap` outranks `.hero .wrap` on specificity: any row-gap declared here would
     beat the stacked gap and pin the portrait flush against the eyebrow. Matching
     the 820px cutoff also keeps the 821-860px band two-column WITH its row gap,
     rather than stranding it between the two rules. */
  .hero.hero-wide-heading .wrap {
    row-gap: 22px;
    align-items: start;
  }
}
.eyebrow {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-bottom: 22px;
  font-weight: 600;
}
.hero h1 {
  font-size: clamp(36px, 5vw, 58px);
  max-width: 16ch;
}
.hero .lede {
  font-size: 20px;
  color: #2c403a;
  max-width: 48ch;
  margin-top: 22px;
}
.heroprice {
  margin-top: 26px;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--mid);
  font-weight: 600;
}
.hero .btn {
  margin-top: 24px;
}
.heroimg {
  margin: 0;
}
.heroimg img {
  width: 100%;
  height: auto;
  display: block;
}
.herocap {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--mid);
  text-align: center;
  font-weight: 500;
}
.trustrow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.trustrow span {
  font-size: 14px;
  color: var(--mid);
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 500;
}
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sage-deep);
  display: inline-block;
  flex-shrink: 0;
}

/* --- generic section ------------------------------------------------------ */
section {
  padding: 84px 0;
}
.kicker {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-bottom: 16px;
  font-weight: 600;
}
/* The reset above strips every default margin, and nothing put one back: a
   section heading sat DIRECTLY on its first paragraph, so a 38px headline and
   19px body text were separated by leading alone. Set in `em` so the gap tracks
   each heading's own size — the same rule reads as 16px under a 38px h2 and 11px
   under the 26px it clamps to on a phone. Adjacent-sibling margins collapse, so
   this never doubles up with a lede or sub that already carries a top margin. */
h1,
h2,
h3,
h4 {
  margin-bottom: 0.42em;
}

h2 {
  font-size: clamp(28px, 4vw, 40px);
  max-width: 20ch;
}
.sub {
  font-size: 19px;
  color: #2c403a;
  max-width: 54ch;
  margin-top: 18px;
}

/* --- quotes --------------------------------------------------------------- */
.quotes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 46px;
}
.q {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 28px 28px 24px;
}
.q.big {
  grid-column: span 2;
  background: var(--band);
  border-color: transparent;
}
.q p {
  font-family: var(--font-fraunces), Georgia, serif;
  font-size: 22px;
  line-height: 1.42;
  color: var(--ink);
}
.q.big p {
  font-size: 28px;
  line-height: 1.34;
}
.q .who {
  font-family: var(--font-manrope), system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-top: 18px;
  font-weight: 700;
}

/* --- ease band ------------------------------------------------------------ */
.ease .split {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 56px;
  align-items: center;
}
.ease .pic {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 26px 50px rgba(30, 42, 38, 0.18);
}
.ease .pic img {
  width: 100%;
  height: auto;
  display: block;
}
/* When the media slot holds a video, drop the image frame — the .vidwrap has
   its own rounded corners + shadow, so the outer frame reads as a box-in-a-box. */
.ease .pic--video {
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}
/* Ease-band video runs larger than the default testimonial frame (380px). */
.ease .pic--video .vidwrap {
  max-width: 590px;
}
/* Give the ease band's media column more room on desktop so the video can grow
   into it; the mobile stack (max-width: 820px) is unaffected. */
@media (min-width: 821px) {
  .ease .split:has(.pic--video) {
    grid-template-columns: 1.15fr 0.85fr;
  }
}
.ease .btn {
  margin-top: 28px;
}

/* --- ingredients ---------------------------------------------------------- */
.ingr {
  background: var(--band);
}
.ingr .split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.ingr img {
  width: 100%;
  max-width: 460px;
  height: auto;
  border-radius: 8px;
  display: block;
  margin-left: auto;
  box-shadow: 0 20px 40px rgba(30, 42, 38, 0.18);
}
.benefits {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 52px;
  border-top: 1px solid var(--line);
}
.benefits .bi {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.benefits .bn {
  font-weight: 700;
  color: var(--ink);
  font-size: 15px;
}
.benefits .bb {
  color: var(--mid);
  font-size: 14px;
  text-align: right;
}

/* --- showcase (dark) ------------------------------------------------------ */
.showcase {
  background: var(--near-black);
  color: var(--offwhite);
}
.showcase .kicker {
  color: var(--sage);
}
.showcase h2 {
  color: var(--offwhite);
}
.showcase .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 42px;
  align-items: end;
}
.showcase figure {
  text-align: center;
}
.showcase img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
.showcase figcaption {
  margin-top: 12px;
}
.showcase .ct {
  font-family: var(--font-fraunces), Georgia, serif;
  font-size: 20px;
  color: var(--offwhite);
}
.showcase .cs {
  font-size: 13px;
  color: var(--sage);
  margin-top: 4px;
}
.showcase .cs .free {
  color: #fff;
  font-weight: 700;
}
.showcase .note {
  text-align: center;
  margin-top: 34px;
  font-size: 15px;
  color: rgba(244, 241, 233, 0.72);
}

/* --- offer (pine) --------------------------------------------------------- */
.offer {
  background: var(--pine);
  color: var(--offwhite);
}
.offer h2 {
  color: var(--offwhite);
  text-align: center;
  margin: 0 auto 0.42em;
}
.offer .kicker {
  color: var(--sage);
  text-align: center;
}
.offercard {
  background: var(--pine-shadow);
  border: 1px solid rgba(143, 168, 154, 0.25);
  border-radius: 8px;
  max-width: 560px;
  margin: 44px auto 0;
  padding: 38px 38px 34px;
}
.line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgba(244, 241, 233, 0.12);
  gap: 16px;
}
.line .name {
  font-size: 16px;
  color: rgba(244, 241, 233, 0.92);
}
.line .name small {
  display: block;
  color: var(--sage);
  font-size: 13px;
  margin-top: 2px;
}
.line .val {
  font-size: 15px;
  white-space: nowrap;
  text-align: right;
}
.line .was {
  color: rgba(244, 241, 233, 0.45);
  text-decoration: line-through;
  margin-right: 8px;
}
.line .free {
  color: var(--sage);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(143, 168, 154, 0.3);
}
.total .lbl {
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--sage);
}
.total .amt {
  font-family: var(--font-fraunces), Georgia, serif;
  font-size: 40px;
  color: var(--offwhite);
}
.total .amt .strike {
  font-size: 20px;
  color: rgba(244, 241, 233, 0.45);
  text-decoration: line-through;
  margin-right: 10px;
}
.offercard .offer-cta {
  margin-top: 26px;
}
.offernote {
  text-align: center;
  color: rgba(244, 241, 233, 0.7);
  font-size: 14px;
  margin-top: 18px;
  line-height: 1.5;
}
.perday {
  text-align: center;
  color: var(--sage);
  font-size: 15px;
  letter-spacing: 0.04em;
  margin-top: 6px;
  font-weight: 600;
}

/* --- objections / FAQ ----------------------------------------------------- */
.obj {
  margin-top: 36px;
  border-top: 1px solid var(--line);
}
.obj details {
  border-bottom: 1px solid var(--line);
}
.obj summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.obj summary::-webkit-details-marker {
  display: none;
}
.obj summary .qx {
  font-family: var(--font-fraunces), Georgia, serif;
  font-size: 22px;
  color: var(--ink);
  font-weight: 500;
}
.obj summary .plus {
  font-size: 26px;
  color: var(--sage-deep);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.obj details[open] summary .plus {
  transform: rotate(45deg);
}
.obj .ans {
  padding: 0 0 26px;
  font-size: 17px;
  color: #2c403a;
  max-width: 64ch;
  line-height: 1.66;
}

/* --- guarantee ------------------------------------------------------------ */
.guar .card {
  background: var(--mid);
  color: var(--offwhite);
  border-radius: 8px;
  padding: 56px 52px;
  position: relative;
  overflow: hidden;
}
.guar .card::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -70px;
  width: 280px;
  height: 280px;
  border: 1px solid rgba(244, 241, 233, 0.16);
  border-radius: 50%;
}
.guar .kicker {
  color: var(--sage);
}
.guar h2 {
  color: var(--offwhite);
  position: relative;
  z-index: 1;
}
.guar p {
  font-size: 18px;
  color: rgba(244, 241, 233, 0.9);
  max-width: 60ch;
  margin-top: 20px;
  line-height: 1.62;
  position: relative;
  z-index: 1;
}
.steps {
  display: flex;
  gap: 30px;
  margin-top: 32px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.step {
  flex: 1;
  min-width: 180px;
}
.step .n {
  font-family: var(--font-fraunces), Georgia, serif;
  font-size: 28px;
  color: var(--sage);
}
.step .t {
  font-size: 15px;
  color: var(--offwhite);
  margin-top: 6px;
  line-height: 1.5;
}

/* --- close (pine) --------------------------------------------------------- */
.close {
  background: var(--pine);
  color: var(--offwhite);
  text-align: center;
}
.close .wrap {
  padding: 92px 32px;
}
.close h2 {
  color: var(--offwhite);
  margin: 0 auto 0.42em;
}
.close p {
  font-size: 19px;
  color: rgba(244, 241, 233, 0.86);
  max-width: 56ch;
  margin: 22px auto 0;
  line-height: 1.6;
}
.close .btn {
  margin-top: 36px;
}
.close .perday {
  margin-top: 18px;
}

/* --- signup (embedded HubSpot form, a skippable second CTA) ---------------- */
.signup {
  background: var(--offwhite);
  text-align: center;
}
.signup .wrap {
  padding: 84px 32px;
  max-width: 720px;
}
.signup h2 {
  margin: 0 auto 0.42em;
}
.signup p {
  font-size: 19px;
  color: var(--mid);
  max-width: 56ch;
  margin: 18px auto 0;
  line-height: 1.6;
}
.signup .hs-form {
  margin-top: 32px;
  text-align: left;
}

/* --- footer --------------------------------------------------------------- */
footer {
  background: var(--offwhite);
  color: var(--mid);
  font-size: 13px;
  text-align: center;
  padding: 40px 0;
  border-top: 1px solid var(--line);
}
footer .wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
footer a {
  color: var(--sage-deep);
  text-decoration: none;
}
.footlogo {
  height: 72px;
  width: auto;
  margin-bottom: 6px;
}

/* --- video testimonials --------------------------------------------------- */
.vids {
  background: var(--band);
}
.vidgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 42px;
  align-items: start;
  justify-items: center;
}

/* One/two-video layouts: center instead of left-aligning in a 3-col grid. */
.vidgrid--1 {
  grid-template-columns: minmax(0, 380px);
  justify-content: center;
}
.vidgrid--2 {
  grid-template-columns: repeat(2, minmax(0, 380px));
  justify-content: center;
}

/* Side layout (layout:'side'): copy beside the video(s) instead of above. */
.vidsplit {
  display: grid;
  grid-template-columns: 1fr minmax(0, 380px);
  gap: 56px;
  align-items: center;
}
.vidsplit .vidgrid {
  margin-top: 0;
}
/* `layout: 'side-reverse'` — video left, copy right.
   Done by placement rather than by reordering the markup: the copy carries the
   heading that introduces the video, so it stays first in the DOM for screen
   readers and for the stacked mobile layout. Only the columns swap. */
.vidsplit--reverse {
  grid-template-columns: minmax(0, 380px) 1fr;
}
.vidsplit--reverse .vidcopy {
  grid-column: 2;
  grid-row: 1;
}
.vidsplit--reverse .vidgrid {
  grid-column: 1;
  grid-row: 1;
}
.vidwrap {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  /* Default portrait frame; each video overrides with its exact ratio inline
     so the player fills edge-to-edge with no letterbox bars. */
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(30, 42, 38, 0.18);
  background: linear-gradient(135deg, #2c3d37, #1e2a26);
}
.vidwrap iframe {
  position: absolute;
  /* Bleed 1px past every edge (clipped by .vidwrap overflow:hidden) so no
     hairline letterbox can show from sub-pixel rounding at the player edges. */
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  border: 0;
}
.vidwrap .play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.vidwrap .circle {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(244, 241, 233, 0.95);
  position: relative;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
.vidwrap .circle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-left: 18px solid var(--pine);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}
.vidwrap .cap {
  color: rgba(244, 241, 233, 0.85);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

/* --- three P's ------------------------------------------------------------ */
.threep {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 42px;
}
.pcard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 30px;
}
.pcard .pl {
  font-family: var(--font-manrope), system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-deep);
  font-weight: 700;
}
.pcard h3 {
  font-size: 23px;
  margin: 8px 0 10px;
}
.pcard p {
  font-size: 15px;
  color: #33473f;
  line-height: 1.6;
}

/* --- timeline ------------------------------------------------------------- */
.timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 42px;
}
.tcard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px;
  border-top: 3px solid var(--sage-deep);
}
.tcard .lab {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-deep);
  font-weight: 700;
}
.tcard .day {
  font-family: var(--font-fraunces), Georgia, serif;
  font-size: 28px;
  color: var(--ink);
  margin: 4px 0 10px;
}
.tcard p {
  font-size: 15px;
  color: #33473f;
  line-height: 1.6;
}

/* --- referral ladder ------------------------------------------------------ */
.refer {
  background: var(--band);
}
.ladder {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 40px;
}
.rung {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px 18px;
  text-align: center;
}
.rung.free {
  background: var(--pine);
  border-color: var(--pine);
}
.rung .rl {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage-deep);
  font-weight: 700;
}
.rung.free .rl {
  color: var(--sage);
}
.rung .rv {
  font-family: var(--font-fraunces), Georgia, serif;
  font-size: 30px;
  color: var(--ink);
  margin: 6px 0 2px;
}
.rung.free .rv {
  color: var(--offwhite);
}
.rung .rd {
  font-size: 13px;
  color: var(--mid);
}
.rung.free .rd {
  color: rgba(244, 241, 233, 0.8);
}

/* ==========================================================================
   Responsive — tablet/landscape (ported breakpoint)
   ========================================================================== */
@media (max-width: 820px) {
  body {
    font-size: 17px;
  }
  .hero .wrap {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 44px 28px;
  }
  .heroimg {
    order: -1;
  }
  .quotes {
    grid-template-columns: 1fr;
  }
  .q.big {
    grid-column: span 1;
  }
  .q.big p {
    font-size: 24px;
  }
  .ease .split,
  .ingr .split {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .benefits {
    grid-template-columns: 1fr;
    margin-top: 32px;
  }
  .ease .pic {
    order: -1;
  }
  .ingr img {
    margin: 0 auto;
  }
  .showcase .grid {
    grid-template-columns: 1fr;
    gap: 22px;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }
  .vidgrid,
  .threep,
  .timeline {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .vidsplit {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  /* Stacked: drop the explicit placement, or `grid-column: 2` would conjure a
     phantom second column out of a one-column grid. */
  .vidsplit--reverse .vidcopy,
  .vidsplit--reverse .vidgrid {
    grid-column: 1;
    grid-row: auto;
  }
  .ladder {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  section {
    padding: 60px 0;
  }
  .offercard {
    padding: 30px 24px;
  }
  .guar .card {
    padding: 46px 36px;
  }
}

/* ==========================================================================
   Responsive — small phones (new). Fixes announce-bar overflow + tightens
   spacing / type so nothing exceeds the viewport on ~360–520px screens.
   ========================================================================== */
@media (max-width: 520px) {
  .wrap {
    padding: 0 20px;
  }
  .announce {
    font-size: 11px;
    letter-spacing: 0.04em;
    padding: 9px 14px;
  }
  .announce .announce-row {
    gap: 4px 12px;
  }
  .announce .sep {
    display: none;
  }
  .bar .wrap {
    padding: 12px 20px;
    gap: 12px;
  }
  .bar img {
    height: 15px;
  }
  .btn {
    font-size: 15px;
    padding: 13px 22px;
  }
  .btn.small {
    padding: 10px 16px;
    font-size: 13px;
  }
  .hero .wrap {
    padding: 30px 20px 40px;
  }
  .hero .lede {
    font-size: 18px;
  }
  .hero .btn {
    width: 100%;
    justify-content: center;
  }
  .heroprice {
    margin-top: 20px;
  }
  section {
    padding: 48px 0;
  }
  .sub {
    font-size: 17px;
  }
  .quotes {
    margin-top: 32px;
  }
  .q.big p {
    font-size: 22px;
  }
  .ladder {
    grid-template-columns: 1fr 1fr;
  }
  .offercard {
    padding: 26px 20px;
  }
  .line .name {
    font-size: 15px;
  }
  .total .amt {
    font-size: 32px;
  }
  .obj summary {
    padding: 20px 0;
    gap: 16px;
  }
  .obj summary .qx {
    font-size: 19px;
  }
  .guar .card {
    padding: 36px 24px;
  }
  .guar p {
    font-size: 16px;
  }
  .close .wrap {
    padding: 64px 20px;
  }
  .footlogo {
    height: 60px;
  }
}

/* ============================================================================
   NARRATIVE BLOCKS
   storyHero · story · pullQuote · doseList · bigStat · chips — the editorial,
   creator-page shapes. Structure and rhythm live here; every colour and face is
   a --nb-* token whose default below is the house palette, so a funnel that
   sets no theme gets the house look and a theme only has to restate tokens.
   ========================================================================== */

:root {
  --nb-display: var(--font-fraunces), Georgia, serif;
  --nb-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --nb-kicker: var(--sage-deep);
  --nb-accent: var(--mid);
  --nb-accent-bright: var(--sage);
  --nb-copy: rgba(22, 48, 42, 0.86);
  --nb-copy-soft: rgba(22, 48, 42, 0.7);
  --nb-copy-mute: rgba(22, 48, 42, 0.6);
  --nb-copy-faint: rgba(22, 48, 42, 0.75);
  --nb-band: var(--pine);
  --nb-band-ink: var(--offwhite);
  --nb-tint: var(--band);
  --nb-card: #ffffff;
  --nb-shadow: 0 1px 2px rgba(38, 51, 47, 0.05), 0 10px 34px rgba(38, 51, 47, 0.07);
  --nb-eyebrow-bg: rgba(38, 51, 47, 0.06);
}

.wrap.narrow {
  max-width: 660px;
}

/* --- storyHero ------------------------------------------------------------ */
.shero {
  padding: 56px 0 40px;
}
.shero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--nb-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nb-accent);
  background: var(--nb-eyebrow-bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  margin-bottom: 26px;
}
.shero-eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nb-accent-bright);
}
h1.shero-h {
  font-size: clamp(36px, 6vw, 62px);
  max-width: 15ch;
}
.shero-intro {
  font-size: clamp(18px, 2.1vw, 21px);
  color: var(--nb-copy-soft);
  max-width: 54ch;
  margin: 22px 0 1.1em;
}
.shero-fig {
  margin: 40px 0 4px;
}
.shero-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: var(--nb-shadow);
}
.shero-cap {
  font-family: var(--nb-mono);
  font-size: 12px;
  color: var(--nb-copy-faint);
  text-align: center;
  margin-top: 6px;
}
.shero-cta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 34px;
}
.microtrust {
  font-family: var(--nb-mono);
  font-size: 13px;
  color: var(--nb-copy-mute);
}
/* Inside the closing band the microtrust needs two things the base rule cannot
   give it, and both were visible bugs:

   1. BLOCK, not inline. The band is `text-align: center` and the button is
      `inline-flex`, so an inline span sits on the SAME centred line and shoves
      the button off centre (measured 91px left on Jodie's page).
   2. The BAND's ink. `--nb-copy-mute` is dark body copy, which on a dark close
      band renders as near-invisible text on near-invisible ground. */
.close .microtrust {
  display: block;
  margin-top: 18px;
  color: var(--offwhite);
  opacity: 0.75;
}

/* The registered mark, set as a real superscript in display type. At heading
   sizes a full-size ® is nearly as tall as the capitals and reads as a typo;
   the browser's default `sup` metrics put it too high and too large, so both
   are set here. Body copy leaves ® alone. See funnels-ui/regmark.tsx. */
.regmark {
  font-size: 0.42em;
  vertical-align: baseline;
  position: relative;
  top: -0.85em;
  line-height: 0;
  margin-left: 0.02em;
}

/* --- story ---------------------------------------------------------------- */
section.story {
  padding: 52px 0;
  border-top: 1px solid var(--line);
}
section.story h2 {
  font-size: clamp(26px, 3.6vw, 38px);
  max-width: 18ch;
}
section.story p {
  color: var(--nb-copy);
  max-width: 60ch;
  margin: 0 0 1.1em;
}
section.story p:last-child {
  margin-bottom: 0;
}

/* --- pullQuote ------------------------------------------------------------ */
.pullquote {
  /* Vertical padding sits on the SECTION, not the wrap: a theme is free to
     restate `.wrap` padding, and that would otherwise flatten the band. */
  padding: 76px 0;
  background: var(--nb-band);
  color: var(--nb-band-ink);
  text-align: center;
  border-top: 1px solid var(--line);
}
.pullquote .pq {
  font-family: var(--nb-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(30px, 5.5vw, 52px);
  line-height: 1.1;
  color: #ffffff;
}
.pullquote .pq .accent {
  color: var(--nb-accent-bright);
}
.pullquote p {
  color: rgba(255, 255, 255, 0.78);
  max-width: 52ch;
  margin: 26px auto 0;
  font-size: 18px;
}

/* --- doseList ------------------------------------------------------------- */
.doselist {
  padding: 60px 0;
  border-top: 1px solid var(--line);
}
.doselist h2 {
  font-size: clamp(26px, 3.6vw, 38px);
  /* This heading runs the full measure — drop the global h2 20ch cap. */
  max-width: none;
}
.doselist .lede {
  color: var(--nb-copy);
  max-width: 60ch;
  margin: 0 0 1.1em;
}
.doselist .list-intro {
  margin-top: 22px;
}
/* The figure and its unit STACK as one object, with the note held beside
   them: a two-column grid, not one flex line. As a flex row all three were
   siblings on the same line, so the unit's position became a function of how
   many lines the note happened to run — which is what stranded "mg Pure NMN"
   a hundred pixels under the number it labels. */
.hero-dose {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  /* Row 2 flexes, row 1 does not. The note spans both rows, so with two auto
     rows a longer note pads BOTH of them and the unit drifts away from the
     figure — 4px under it on one page, 24px on another. Giving the spare
     height to row 2 alone, with the unit aligned to its top, holds that gap
     identical no matter how long the note runs. */
  grid-template-rows: auto 1fr;
  column-gap: 34px;
  row-gap: 4px;
  align-items: start;
  margin: 34px 0 6px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.hero-dose .num {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--nb-display);
  font-size: clamp(46px, 8vw, 78px);
  line-height: 0.9;
  color: var(--nb-accent);
  font-weight: 600;
}
/* Directly under the figure, sharing its left edge. */
.hero-dose .unit {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--nb-mono);
  font-size: 15px;
  color: var(--mid);
}
/* Beside the stack, spanning both of its rows and CENTRED against it. The
   two blocks are different heights — figure plus unit runs ~100px, the note
   2-3 lines — so top-aligning them leaves the note finishing well above the
   unit and the pair reads as unaligned. Centred, they sit level whichever is
   taller. */
.hero-dose .lab {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 16px;
  color: var(--nb-copy-soft);
  /* 26ch was a hangover from the flex layout, where a wide note would have
     pushed the unit off the line. The grid column is free to be generous:
     there are 700-880px beside the figure on every page that uses this
     block, and 26ch spent 250px of it, breaking a two-sentence note over
     four cramped lines. 44ch reads as a note rather than a column, and
     still leaves room to spare at the narrowest of those wraps. */
  max-width: 44ch;
}
.dose-rows {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 44px;
}
.drow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.drow .name {
  font-size: 15.5px;
  color: rgba(12, 42, 27, 0.85);
}
.drow .amt {
  font-family: var(--nb-mono);
  font-size: 14px;
  color: var(--nb-accent);
  font-weight: 500;
  white-space: nowrap;
}
.drow.hi {
  border-bottom-color: var(--nb-accent-bright);
}
.drow.hi .name {
  font-weight: 600;
  color: var(--ink);
}
.drow.hi .amt {
  color: var(--nb-kicker);
  font-weight: 600;
}

/* --- bigStat -------------------------------------------------------------- */
.bigstat {
  padding: 60px 0;
  border-top: 1px solid var(--line);
  background: var(--nb-tint);
}
.bigstat-inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 44px;
  align-items: center;
}
.bigstat .stat {
  font-family: var(--nb-display);
  font-size: clamp(70px, 12vw, 128px);
  line-height: 0.85;
  color: var(--nb-accent);
  font-weight: 600;
}
.bigstat .stat .suffix {
  font-size: 0.4em;
  color: var(--nb-kicker);
  vertical-align: top;
}
.bigstat p {
  color: var(--nb-copy);
  max-width: 42ch;
  margin: 0;
}
.bigstat .sig {
  font-family: var(--nb-display);
  font-style: italic;
  color: var(--nb-accent);
  margin-top: 14px;
}

/* --- chips ---------------------------------------------------------------- */
.chipband {
  padding: 56px 0;
  border-top: 1px solid var(--line);
}
.chipband h2 {
  font-size: clamp(24px, 3.4vw, 34px);
  /* Fills the narrow column — drop the global h2 20ch cap. */
  max-width: none;
}
.chipband p {
  color: var(--nb-copy);
  margin: 14px 0 0;
}
.chips {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.chip {
  font-family: var(--nb-mono);
  font-size: 13px;
  background: var(--nb-card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px;
  display: inline-flex;
  gap: 9px;
  align-items: center;
}
.chip .tick {
  /* `--nb-accent-bright` is the LARGE-display token: it is chosen to sit on a
     dark band behind 40px+ type. At 13px on a white chip it fails 4.5:1 on
     every theme we have (2.56 to 4.11), while `--nb-accent` clears it on every
     one (4.94 to 6.15), because that is the token picked for exactly this. */
  color: var(--nb-accent);
  font-weight: 700;
}

/* --- note footer ---------------------------------------------------------- */
footer.footnote {
  padding: 36px 0;
  border-top: 1px solid var(--line);
  font-family: var(--nb-mono);
  font-size: 12px;
  color: var(--nb-copy-faint);
  background: transparent;
  text-align: left;
}

@media (max-width: 760px) {
  .bigstat-inner {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .dose-rows {
    grid-template-columns: 1fr;
    gap: 0;
  }
  /* No room for a column beside the figure: figure, unit, then the note
     under both. The explicit placements above have to be released or the
     note would claim an implicit second column and squeeze itself. */
  .hero-dose {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .hero-dose .num,
  .hero-dose .unit,
  .hero-dose .lab {
    grid-column: auto;
    grid-row: auto;
  }
  /* Stacked, the note is just body copy, so it takes the same measure as the
     lede above it rather than the narrower beside-the-figure one. Uncapped
     it ran to 681px at this breakpoint, wider than anything else on the
     page. */
  .hero-dose .lab {
    margin-top: 14px;
    max-width: 60ch;
  }
}

/* ============================================================================
   THEME — "the pulse" (body.t-pulse)
   Marcel's channel palette: teal/cyan with a gold accent, Fraunces display,
   Inter body, IBM Plex Mono labels. Everything is scoped to the body class, so
   these rules can never reach another funnel's page.
   ========================================================================== */

body.t-pulse {
  /* Retarget the house face tokens — the base body/h1..h3 rules read these. */
  --font-manrope: "Inter";
  --font-fraunces: "Fraunces";

  --ink: #0e2a33;
  --paper: #f5f8f9;
  --line: rgba(14, 42, 51, 0.13);

  --nb-display: "Fraunces", Georgia, serif;
  --nb-mono: "IBM Plex Mono", ui-monospace, monospace;
  --nb-kicker: #ac5600; /* Was #d8a020, which put every 12px kicker on this
     page at 2.19:1 — under the 4.5:1 WCAG AA asks for at that size, and
     enough to reject the page at the live contrast gate. Same accent,
     darkened at full saturation: 4.58:1 on the sign-up band, 4.84:1 on the
     page ground. */
  --nb-accent: #16849b;
  /* Focus rings are non-text indicators: WCAG wants 3:1 against whatever
     surrounds them, and the ring is offset, so on the closing CTA both sides
     of it sit on --nb-accent. The label accent cannot serve both jobs — it
     has to be dark enough to read as 12px type on paper, which leaves it far
     too close to the teal band. This clears all three grounds the button
     appears on: 15.9:1 on paper, 15.0:1 on the sign-up band, 3.9:1 on the
     closing band. */
  --nb-focus: #0b1f26;
  --nb-accent-bright: #4fafd1;
  --nb-copy: rgba(12, 42, 27, 0.86);
  --nb-copy-soft: rgba(12, 42, 27, 0.78);
  --nb-copy-mute: rgba(12, 42, 27, 0.6);
  --nb-copy-faint: rgba(12, 42, 27, 0.75);
  --nb-band: #0e2a33;
  --nb-band-ink: #f5f8f9;
  --nb-tint: #e6edef;
  --nb-card: #ffffff;
  --nb-shadow: 0 1px 2px rgba(14, 42, 51, 0.05), 0 10px 34px rgba(14, 42, 51, 0.07);
  --nb-eyebrow-bg: rgba(23, 100, 61, 0.08);

  /* Held at every width: the house sheet steps body copy down to 17px under
     820px, but this design keeps one size throughout. */
  font-size: 18px;
  line-height: 1.65;
}
body.t-pulse h1,
body.t-pulse h2 {
  font-weight: 600;
  line-height: 1.07;
}
body.t-pulse .wrap {
  max-width: 940px;
  padding: 0 26px;
}
/* Restated at theme specificity — the rule above would otherwise win. */
body.t-pulse .wrap.narrow {
  max-width: 660px;
}
body.t-pulse .kicker {
  font-family: var(--nb-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  font-weight: 400;
  color: var(--nb-kicker);
  margin-bottom: 18px;
}

/* The sign-up section labels its eyebrow `.eyebrow`, every other block labels
   the same thing `.kicker`, and this theme only ever styled the latter — so one
   label on the page fell back to the house sage while the rest carried the
   accent. Every other theme that restyles one restyles both; this one did not. */
body.t-pulse .eyebrow {
  font-family: var(--nb-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  font-weight: 400;
  color: var(--nb-kicker);
}
/* `.lab` under doseList keeps the softer body tone, not the house tcard tone. */
body.t-pulse .hero-dose .lab {
  color: rgba(12, 42, 27, 0.7);
}

/* Buttons: rounded, teal, with the arrow nudging on hover. */
body.t-pulse .btn {
  font-family: var(--font-manrope), system-ui, sans-serif;
  font-weight: 600;
  font-size: 17px;
  background: var(--nb-accent);
  color: #ffffff;
  padding: 15px 28px;
  border-radius: 12px;
  border: 1px solid var(--nb-accent);
  box-shadow: var(--nb-shadow);
  transition: transform 0.16s, background 0.16s;
}
body.t-pulse .btn:hover {
  background: #0f6274;
  transform: translateY(-1px);
}
body.t-pulse .btn:focus-visible {
  outline: 2px solid var(--nb-focus);
  outline-offset: 3px;
}
body.t-pulse .btn .arrow {
  transition: transform 0.16s;
}
body.t-pulse .btn:hover .arrow {
  transform: translateX(3px);
}

/* The closing band, in the theme's primary rather than the house pine. */
body.t-pulse .close {
  /* Same as the pull quote: pad the section, leave `.wrap` to the theme rule. */
  padding: 84px 0;
  background: var(--nb-accent);
  color: #ffffff;
}
body.t-pulse .close h2 {
  color: #ffffff;
  font-size: clamp(28px, 4.6vw, 48px);
  max-width: 17ch;
}
body.t-pulse .close p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 18px;
  line-height: 1.65;
  max-width: 46ch;
  margin: 20px auto 0;
}
body.t-pulse .close .btn {
  background: #ffffff;
  color: var(--nb-accent);
  border-color: #ffffff;
  margin-top: 30px;
  font-size: 18px;
  padding: 17px 34px;
}
body.t-pulse .close .btn:hover {
  background: var(--paper);
  color: #0f4b2f;
}
body.t-pulse .close .microtrust {
  color: rgba(255, 255, 255, 0.75);
  display: block;
  margin-top: 18px;
}

@media (prefers-reduced-motion: reduce) {
  body.t-pulse .btn,
  body.t-pulse .btn .arrow {
    transition: none;
  }
}

/* ============================================================================
   THEME — "the studio" (body.t-studio)   Jodie King
   Palette sampled from her own canvases: coral, crimson-plum, amber, on the
   warm white of a studio wall. Fraunces display, Karla everywhere else, no
   monospace on purpose. Scoped to the body class; cannot reach another funnel.
   ========================================================================== */

body.t-studio {
  --font-manrope: "Karla";
  --font-fraunces: "Fraunces";

  --ink: #241c1a;
  --paper: #fbf8f4;
  --line: rgba(36, 28, 26, 0.14);

  /* HOUSE tokens, retargeted. The base sheet reads these directly, so without
     them a theme only recolours the narrative blocks and leaves the eyebrow,
     the trust row, the dots and the close/pull-quote bands in pine and sage.
     `--pine` is the BAND colour here, not the button: the button is restated
     below, because on a palette built round one accent a full-bleed band in
     that accent is far too much of it. */
  --pine: #3b1c2a;
  --pine-shadow: #2e1521;
  --sage-deep: #9d4366;
  --sage: #c9a3b2;
  --mid: rgba(36, 28, 26, 0.7);
  --offwhite: #fbf8f4;
  --band: #f5ede4;

  --nb-display: "Fraunces", Georgia, serif;
  --nb-mono: "Karla", system-ui, sans-serif;
  /* Crimson-plum, 5.79:1 on paper. The coral is deliberately NOT the kicker
     colour: at 3.88:1 it fails normal-size text, so it carries display type,
     rules and fills only. */
  --nb-kicker: #9d4366;
  /* Darkened from the sampled #da621e until white on it clears 4.5 (lands at
     5.46). The sampled value lives on --nb-accent-bright for large text. */
  --nb-accent: #b8430f;
  --nb-accent-bright: #d4551c;
  --nb-copy: rgba(36, 28, 26, 0.88);
  --nb-copy-soft: rgba(36, 28, 26, 0.8);
  --nb-copy-mute: rgba(36, 28, 26, 0.62);
  --nb-copy-faint: rgba(36, 28, 26, 0.75);
  --nb-band: #3b1c2a;
  --nb-band-ink: #fbf8f4;
  --nb-tint: #f5ede4;
  --nb-card: #ffffff;
  --nb-shadow: 0 1px 2px rgba(36, 28, 26, 0.05), 0 10px 34px rgba(59, 28, 42, 0.08);
  --nb-eyebrow-bg: rgba(157, 67, 102, 0.09);

  font-size: 18px;
  line-height: 1.66;
}
body.t-studio h1,
body.t-studio h2 {
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.012em;
}
body.t-studio .kicker {
  font-family: var(--nb-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--nb-kicker);
}
body.t-studio .btn {
  font-family: "Karla", system-ui, sans-serif;
  font-weight: 700;
  background: var(--nb-accent);
  border-color: var(--nb-accent);
  border-radius: 10px;
}
body.t-studio .btn:hover {
  background: #9c3709;
  border-color: #9c3709;
}
body.t-studio .pq .accent,
body.t-studio .bigstat .stat {
  color: var(--nb-accent-bright);
}
body.t-studio .close .btn {
  background: #ffffff;
  color: #9c3709;
  border-color: #ffffff;
}

/* ============================================================================
   THEME — "the standard" (body.t-standard)   John Garvin
   Near-black and white, heavy condensed all-caps display, and ONE hot red
   rationed to numbers and key words. Oswald display, Inter body.
   ========================================================================== */

body.t-standard {
  --font-manrope: "Inter";
  --font-fraunces: "Oswald";

  --ink: #111111;
  --paper: #ffffff;
  --line: rgba(17, 17, 17, 0.14);

  /* HOUSE tokens, retargeted. The base sheet reads these directly, so without
     them a theme only recolours the narrative blocks and leaves the eyebrow,
     the trust row, the dots and the close/pull-quote bands in pine and sage.
     `--pine` is the BAND colour here, not the button: the button is restated
     below, because on a palette built round one accent a full-bleed band in
     that accent is far too much of it. */
  --pine: #111111;
  --pine-shadow: #000000;
  --sage-deep: #c40d12;
  --sage: #f0a1a3;
  --mid: rgba(17, 17, 17, 0.7);
  --offwhite: #ffffff;
  --band: #f2f2f2;

  --nb-display: "Oswald", "Arial Narrow", sans-serif;
  --nb-mono: "Inter", system-ui, sans-serif;
  /* The red, dark enough that white on it clears 4.5 (6.15) and that it clears
     4.5 as text on white (5.58). --nb-accent-bright is for the dark band only,
     where 5.32 against near-black is plenty. */
  --nb-kicker: #c40d12;
  --nb-accent: #c40d12;
  --nb-accent-bright: #ff3b30;
  --nb-copy: rgba(17, 17, 17, 0.88);
  --nb-copy-soft: rgba(17, 17, 17, 0.78);
  --nb-copy-mute: rgba(17, 17, 17, 0.6);
  --nb-copy-faint: rgba(17, 17, 17, 0.75);
  --nb-band: #111111;
  --nb-band-ink: #ffffff;
  --nb-tint: #f2f2f2;
  --nb-card: #ffffff;
  --nb-shadow: 0 1px 2px rgba(17, 17, 17, 0.06), 0 10px 30px rgba(17, 17, 17, 0.08);
  --nb-eyebrow-bg: rgba(196, 13, 18, 0.08);

  font-size: 18px;
  line-height: 1.6;
}
/* Condensed all-caps, tight: the headline treatment his own posts use. */
body.t-standard h1,
body.t-standard h2 {
  font-family: var(--nb-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.02;
}
body.t-standard .kicker {
  font-family: var(--nb-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nb-kicker);
}
body.t-standard .btn {
  font-family: var(--nb-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--nb-accent);
  border-color: var(--nb-accent);
  border-radius: 2px;
}
body.t-standard .btn:hover {
  background: #a00a0e;
  border-color: #a00a0e;
}
/* The red earns its keep on the numbers and nowhere else. */
body.t-standard .bigstat .stat,
body.t-standard .hero-dose .num {
  color: var(--nb-accent);
}
body.t-standard .pq .accent {
  color: var(--nb-accent-bright);
}
body.t-standard .close .btn {
  background: var(--nb-accent);
  color: #ffffff;
  border-color: var(--nb-accent);
}
body.t-standard .close .btn:hover {
  background: #a00a0e;
  border-color: #a00a0e;
}

/* ============================================================================
   THEME — "midlife" (body.t-midlife)   Dr Ellen Albertson
   Strong red and hot pink on warm white, with the kicker rendered as a filled
   caption chip: the device her own posts are built on. Poppins display,
   Inter body.
   ========================================================================== */

body.t-midlife {
  --font-manrope: "Inter";
  --font-fraunces: "Poppins";

  --ink: #2a1f22;
  --paper: #fdf9f5;
  --line: rgba(42, 31, 34, 0.14);

  /* HOUSE tokens, retargeted. The base sheet reads these directly, so without
     them a theme only recolours the narrative blocks and leaves the eyebrow,
     the trust row, the dots and the close/pull-quote bands in pine and sage.
     `--pine` is the BAND colour here, not the button: the button is restated
     below, because on a palette built round one accent a full-bleed band in
     that accent is far too much of it. */
  --pine: #3a1220;
  --pine-shadow: #2b0d18;
  --sage-deep: #c81e3c;
  --sage: #e8a3b6;
  --mid: rgba(42, 31, 34, 0.7);
  --offwhite: #fdf9f5;
  --band: #fbeff0;

  --nb-display: "Poppins", system-ui, sans-serif;
  --nb-mono: "Inter", system-ui, sans-serif;
  --nb-kicker: #c81e3c;
  --nb-accent: #c81e3c;
  /* Her brightest pink. White on it is 3.79 and FAILS, so it never carries
     small text: large display type on the dark band only (4.3 there). */
  --nb-accent-bright: #e8437f;
  --nb-copy: rgba(42, 31, 34, 0.88);
  --nb-copy-soft: rgba(42, 31, 34, 0.8);
  --nb-copy-mute: rgba(42, 31, 34, 0.62);
  --nb-copy-faint: rgba(42, 31, 34, 0.75);
  --nb-band: #3a1220;
  --nb-band-ink: #fdf9f5;
  --nb-tint: #fbeff0;
  --nb-card: #ffffff;
  --nb-shadow: 0 1px 2px rgba(42, 31, 34, 0.05), 0 10px 34px rgba(200, 30, 60, 0.09);
  --nb-eyebrow-bg: rgba(200, 30, 60, 0.09);

  font-size: 18px;
  line-height: 1.68;
}
body.t-midlife h1,
body.t-midlife h2 {
  font-family: var(--nb-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
}
/* THE CAPTION CHIP. Filled rather than plain text, because the chip is the
   recognisable device in her feed. White on the strong red is 5.67. */
body.t-midlife .kicker {
  font-family: var(--nb-mono);
  display: inline-block;
  background: var(--nb-kicker);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 4px;
}
body.t-midlife .btn {
  font-family: var(--nb-display);
  font-weight: 600;
  background: var(--nb-accent);
  border-color: var(--nb-accent);
  border-radius: 999px;
}
body.t-midlife .btn:hover {
  background: #a9152f;
  border-color: #a9152f;
}
body.t-midlife .pq .accent,
body.t-midlife .bigstat .stat {
  color: var(--nb-accent-bright);
}
body.t-midlife .close .btn {
  background: #ffffff;
  color: #a9152f;
  border-color: #ffffff;
}

/* ----------------------------------------------------------------------------
   Hardcoded house copy colours, restated per partner theme.
   `.hero .lede`, `.sub`, `.obj .ans`, `.pcard p` and `.tcard p` carry literal
   greens (#2c403a / #33473f) rather than tokens, so they survive a theme and
   leave green-grey body copy sitting on a coral or red page.
   -------------------------------------------------------------------------- */
body.t-studio .hero .lede,
body.t-studio .sub,
body.t-studio .obj .ans,
body.t-studio .pcard p,
body.t-studio .tcard p,
body.t-standard .hero .lede,
body.t-standard .sub,
body.t-standard .obj .ans,
body.t-standard .pcard p,
body.t-standard .tcard p,
body.t-midlife .hero .lede,
body.t-midlife .sub,
body.t-midlife .obj .ans,
body.t-midlife .pcard p,
body.t-midlife .tcard p {
  color: var(--nb-copy-soft);
}

/* The eyebrow is the hero's kicker and reads `--sage-deep`, which the token
   retarget above already fixes. Ellen's is restated as a filled chip so the
   hero carries the same caption-chip device as the sections. */
body.t-midlife .eyebrow {
  display: inline-block;
  background: var(--nb-kicker);
  color: #ffffff;
  font-size: 12px;
  letter-spacing: 0.1em;
  padding: 5px 12px;
  border-radius: 4px;
}
body.t-standard .eyebrow {
  font-family: var(--nb-display);
  font-weight: 500;
}

/* Her hero eyebrow is the longest chip on the page ("Dr Ellen Albertson · The
   Midlife Whisperer") and wrapped to two lines at 375px, which reads as a block
   rather than as the caption chip it is meant to be. Tightened just enough to
   hold one line, with a sane line-height in case a longer string ever wraps. */
body.t-midlife .eyebrow,
body.t-midlife .kicker {
  line-height: 1.35;
}
@media (max-width: 820px) {
  body.t-midlife .eyebrow {
    font-size: 11px;
    letter-spacing: 0.05em;
    padding: 5px 10px;
  }
}

/* Opt-in hairline above the sign-up section, matching the one `section.story`
   and `.bigstat` already draw. Needed where the form follows a section that
   ends on plain paper (the chips band, say), which otherwise runs straight into
   the form with no break at all. */
.signup--rule {
  border-top: 1px solid var(--line);
}

/* ============================================================================
   WAVE 2 PARTNER THEMES
   Same construction as the first three: retarget BOTH the --nb-* block tokens
   and the house tokens the base sheet reads directly (--pine as the band,
   --sage-deep as the kicker, --mid as muted copy, --offwhite as band ink,
   --band as the tint), then restate the base sheet's three hardcoded greens.
   Setting only the --nb-* half leaves the eyebrow, trust row, dots and bands
   in pine and sage on a page that is no longer green.
   ========================================================================== */

/* --- "atelier" — Calie Calabrese ------------------------------------------ */
body.t-atelier {
  --font-manrope: "Jost";
  --font-fraunces: "Cormorant Garamond";
  --ink: #2b2622;
  --paper: #faf7f2;
  --line: rgba(43, 38, 34, 0.13);
  --nb-display: "Cormorant Garamond", Georgia, serif;
  --nb-mono: "Jost", system-ui, sans-serif;
  --nb-kicker: #8a6a4f;
  --nb-accent: #8a6a4f;
  --nb-accent-bright: #b08e6c;
  --nb-copy: rgba(43, 38, 34, 0.88);
  --nb-copy-soft: rgba(43, 38, 34, 0.8);
  --nb-copy-mute: rgba(43, 38, 34, 0.62);
  --nb-copy-faint: rgba(43, 38, 34, 0.75);
  --nb-band: #2b2622;
  --nb-band-ink: #faf7f2;
  --nb-tint: #f2ece3;
  --nb-card: #ffffff;
  --nb-shadow: 0 1px 2px rgba(43, 38, 34, 0.05), 0 10px 34px rgba(43, 38, 34, 0.07);
  --nb-eyebrow-bg: rgba(138, 106, 79, 0.09);
  --pine: #2b2622;
  --pine-shadow: #1c1815;
  --sage-deep: #8a6a4f;
  --sage: #c9b39a;
  --mid: rgba(43, 38, 34, 0.7);
  --offwhite: #faf7f2;
  --band: #f2ece3;
  font-size: 18px;
  line-height: 1.7;
}
body.t-atelier h1,
body.t-atelier h2 {
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.1;
}
body.t-atelier .kicker,
body.t-atelier .eyebrow {
  font-family: var(--nb-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--nb-kicker);
}
body.t-atelier .btn {
  font-family: var(--nb-mono);
  font-weight: 500;
  letter-spacing: 0.06em;
  background: var(--nb-accent);
  border-color: var(--nb-accent);
  border-radius: 0;
}
body.t-atelier .btn:hover {
  background: #6f5540;
  border-color: #6f5540;
}
body.t-atelier .pq .accent,
body.t-atelier .bigstat .stat {
  color: var(--nb-accent-bright);
}
body.t-atelier .close .btn {
  background: #faf7f2;
  color: #6f5540;
  border-color: #faf7f2;
}
/* The bigStat signature is 18px accent copy on the band's tinted ground
   (#f2ece3), where this theme's warm accent lands at 4.20:1 — it clears 4.5
   everywhere else because everywhere else is white. One shade down on the band
   only, so the accent hue is unchanged in the places that already pass. */
body.t-atelier .bigstat .sig {
  color: #7e6047;
}

/* --- "glow" — Claudia ----------------------------------------------------- */
body.t-glow {
  --font-manrope: "Nunito Sans";
  --font-fraunces: "Cormorant Garamond";
  --ink: #3a2b30;
  --paper: #fdf7f7;
  --line: rgba(58, 43, 48, 0.12);
  --nb-display: "Cormorant Garamond", Georgia, serif;
  --nb-mono: "Nunito Sans", system-ui, sans-serif;
  /* The deeper rose, not the blush: white on her lightest pink is 4.11:1 and
     fails, so the blush stays a tint and the rose carries text and buttons. */
  --nb-kicker: #9c4664;
  --nb-accent: #9c4664;
  --nb-accent-bright: #d98ba6;
  --nb-copy: rgba(58, 43, 48, 0.88);
  --nb-copy-soft: rgba(58, 43, 48, 0.8);
  --nb-copy-mute: rgba(58, 43, 48, 0.62);
  --nb-copy-faint: rgba(58, 43, 48, 0.75);
  --nb-band: #40252e;
  --nb-band-ink: #fdf7f7;
  --nb-tint: #fbeaee;
  --nb-card: #ffffff;
  --nb-shadow: 0 1px 2px rgba(58, 43, 48, 0.05), 0 10px 34px rgba(156, 70, 100, 0.08);
  --nb-eyebrow-bg: rgba(156, 70, 100, 0.08);
  --pine: #40252e;
  --pine-shadow: #2f1a21;
  --sage-deep: #9c4664;
  --sage: #d98ba6;
  --mid: rgba(58, 43, 48, 0.7);
  --offwhite: #fdf7f7;
  --band: #fbeaee;
  font-size: 18px;
  line-height: 1.72;
}
body.t-glow h1,
body.t-glow h2 {
  font-weight: 500;
  line-height: 1.12;
}
body.t-glow .kicker,
body.t-glow .eyebrow {
  font-family: var(--nb-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nb-kicker);
}
body.t-glow .btn {
  font-family: var(--nb-mono);
  font-weight: 700;
  background: var(--nb-accent);
  border-color: var(--nb-accent);
  border-radius: 999px;
}
body.t-glow .btn:hover {
  background: #833a54;
  border-color: #833a54;
}
body.t-glow .pq .accent,
body.t-glow .bigstat .stat {
  color: var(--nb-accent-bright);
}
/* OPTICAL CENTRING FOR OLD-STYLE FIGURES.
   Cormorant Garamond draws figures at x-height, the way a text face should:
   "1000" is 33px of ink inside the 70px box, sitting 28px down from its top
   and 9px up from its bottom. `.lab` is centred on that BOX, so a box centred
   perfectly is a note sitting ~11px high to the eye. Measured, not guessed:
   half the 28/9 asymmetry, which is 0.146 of the figure size.
   Forcing lining figures would fix the geometry instead, but it would change
   the numerals this theme is built on, so the correction lives here.
   Expressed against the figure's own clamp so it tracks every width, and
   confined to the two-column layout — below 761px the note sits underneath
   and there is nothing to centre it against. `position` rather than margin so
   the correction never changes the height of the block. */
@media (min-width: 761px) {
  body.t-glow .hero-dose .lab {
    position: relative;
    /* Two declarations on purpose. The second is the real one: it multiplies
       the figure's own clamp so the correction tracks the figure at every
       width. The first is what any engine that cannot parse the second falls
       back to -- the correction at the clamp's cap, which is exact at 1024px
       and up and over-corrects by at most 2.5px in the narrow band below it.
       Cheaper than being wrong about one browser. */
    top: 11.388px;
    top: calc(clamp(46px, 8vw, 78px) * 0.146);
  }
}
body.t-glow .close .btn {
  background: #fdf7f7;
  color: #833a54;
  border-color: #fdf7f7;
}

/* --- "ringside" — Tony Jeffries ------------------------------------------- */
/* The only theme on a DARK ground. Every token is inverted rather than tinted,
   because a light-page theme with a dark hero reads as a broken page. */
/* The optional question above a bigStat: sits on the same measure as the number
   row beneath it, with the heading capped so it breaks like a headline. */
.bigstat-head h2 {
  max-width: 19ch;
}
.bigstat-head + .bigstat-inner {
  margin-top: 26px;
}

/* ── Label panels ──────────────────────────────────────────────────────────
   Supplement-facts tables side by side, for the arms whose argument IS the
   label. The band ground is what makes the white panels read as labels rather
   than as cards; the tone colours are semantic (hidden / underdosed / disclosed)
   and are stated in the flag text too, so the meaning does not rest on colour. */
.lp {
  background: var(--band, #14342a);
  color: var(--offwhite, #fff);
}
/* The kicker sits on the inverted band, so it needs a colour chosen against the
   DARK ground rather than the page's. Themes set `--nb-band-kicker`; the accent
   is only the fallback, and on a near-black band a mid accent will not clear
   4.5:1 at kicker size. */
.lp .kicker {
  color: var(--nb-band-kicker, var(--nb-accent-bright, #9fd8b8));
}
.lp h2 {
  color: var(--offwhite, #fff);
}
.lp .lp-lede {
  color: rgba(255, 255, 255, 0.78);
  max-width: 60ch;
  margin-top: 14px;
}
.lp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 38px 0 6px;
  align-items: start;
}
.lp .lp-panel {
  --lp-radius: 14px;
  background: #fff;
  color: #14161a;
  border-radius: var(--lp-radius);
  overflow: hidden;
  box-shadow: var(--nb-shadow, 0 10px 30px rgba(0, 0, 0, 0.18));
}
/* The header BLEEDS one pixel past the panel on three sides, and the panel's
   `overflow: hidden` rounds it. Belt and braces alongside moving the reveal
   transform off the panel: the layer-edge artifact was the real cause, this
   covers the plain sub-pixel case.
   The panel lands on a half-pixel (the 1fr grid tracks resolve to x.5), so a
   rounded corner is rasterised across a pixel boundary and the white panel
   underneath shows through as a pale arc. Rounding the header to match did not
   help: two arcs a half-pixel apart still leave a fringe between them. Making
   the header LARGER than its clip removes the question — there is no gap for
   the panel to show through, whatever the sub-pixel offset. Padding gains the
   same pixel back so the text does not shift. */
.lp .lp-head {
  margin: -1px -1px 0;
  padding: 15px 19px 14px;
  font-family: var(--nb-mono, inherit);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  color: #fff;
}
.lp .lp-bad .lp-head {
  background: #9a2a08;
}
.lp .lp-warn .lp-head {
  background: #7a5310;
}
.lp .lp-good .lp-head {
  background: #14161a;
}
.lp .lp-head .lp-flag {
  font-size: 11px;
  opacity: 0.92;
  text-align: right;
}
.lp .lp-facts {
  padding: 6px 18px 18px;
}
.lp .lp-facts .lp-ttl {
  font-family: var(--nb-display, inherit);
  font-size: 19px;
  font-weight: 600;
  padding: 12px 0 8px;
  border-bottom: 2px solid #14161a;
}
.lp .lp-row {
  font-family: var(--nb-mono, inherit);
  font-size: 12.5px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(20, 22, 26, 0.13);
}
.lp .lp-row .lp-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.lp .lp-row .lp-amt {
  color: #7a2106;
  font-weight: 600;
  white-space: nowrap;
}
.lp .lp-warn .lp-row .lp-amt {
  color: #14161a;
}
.lp .lp-row.lp-low .lp-amt,
.lp .lp-row.lp-low .lp-dn {
  color: #9a2a08;
  font-weight: 700;
}
.lp .lp-row.lp-low .lp-dn {
  margin-left: 5px;
}
.lp .lp-row.lp-blend .lp-sub {
  display: block;
  margin-top: 6px;
  color: rgba(20, 22, 26, 0.62);
  font-size: 12px;
  line-height: 1.5;
}
.lp .lp-row.lp-hi {
  background: rgba(245, 184, 0, 0.18);
  margin: 0 -18px;
  padding-left: 18px;
  padding-right: 18px;
}
.lp .lp-row.lp-hi .lp-name {
  font-weight: 600;
}
.lp .lp-facts .lp-note {
  font-family: var(--nb-mono, inherit);
  font-size: 11.5px;
  color: rgba(20, 22, 26, 0.66);
  margin-top: 12px;
  line-height: 1.5;
}
.lp .lp-after {
  color: rgba(255, 255, 255, 0.86);
  max-width: 60ch;
  margin-top: 30px;
}
.lp .lp-after b {
  color: #fff;
}
@media (max-width: 980px) {
  .lp-grid {
    grid-template-columns: 1fr;
  }
}

/* "Ember" — Ryker Black / The Anti Aging Channel. His banner and thumbnails are
   near-black with warning-amber and orange-red, and his page is an
   investigation, so the palette carries the alarm his audience already reads.
   Kept on PAPER rather than going dark like ringside: the argument is a label
   you are meant to read, and the label panels are white in his own artwork.
   The amber is darkened well past the brand value — #e0a400 on paper is 2.1:1
   and unreadable as body-adjacent text, and gold kickers at that ratio have
   already shipped here once. */
body.t-ember {
  --font-manrope: "Inter";
  --font-fraunces: "Space Grotesk";
  --ink: #161418;
  --paper: #f8f5ee;
  --line: rgba(22, 20, 24, 0.14);
  --nb-display: "Space Grotesk", system-ui, sans-serif;
  --nb-mono: "Inter", system-ui, sans-serif;
  --nb-kicker: #8a5200;
  --nb-accent: #9a2a08;
  --nb-accent-bright: #e0400c;
  --nb-copy: rgba(22, 20, 24, 0.88);
  --nb-copy-soft: rgba(22, 20, 24, 0.8);
  --nb-copy-mute: rgba(22, 20, 24, 0.68);
  --nb-copy-faint: rgba(22, 20, 24, 0.75);
  --nb-band: #161418;
  --nb-band-ink: #ffffff;
  --nb-tint: #ece6da;
  --nb-card: #ffffff;
  --nb-shadow: 0 1px 2px rgba(22, 20, 24, 0.05), 0 10px 34px rgba(22, 20, 24, 0.08);
  --nb-eyebrow-bg: rgba(224, 64, 12, 0.09);
  --nb-band-kicker: #f5b800;
  --pine: #9a2a08;
  --pine-shadow: #7a2106;
  --sage-deep: #8a5200;
  --sage: #6d4a12;
  --mid: rgba(22, 20, 24, 0.7);
  --offwhite: #ffffff;
  --band: #161418;
  font-size: 18px;
  line-height: 1.62;
}
body.t-ember h1,
body.t-ember h2 {
  font-family: var(--nb-display);
  font-weight: 600;
  letter-spacing: -0.015em;
}
body.t-ember .kicker,
body.t-ember .eyebrow {
  font-family: var(--nb-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
body.t-ember .btn {
  font-family: var(--nb-mono);
  font-weight: 600;
  border-radius: 12px;
}
/* The band inverts to near-black, which is where his label contrast lives: the
   amber has to lift off the dark ground rather than the paper one. */
body.t-ember .band .kick,
body.t-ember .close .kick {
  color: #f5b800;
}
body.t-ember .bigstat .stat {
  color: var(--nb-accent-bright);
}
body.t-ember .chip .tick {
  color: var(--nb-accent);
  font-weight: 700;
}

body.t-ringside {
  --font-manrope: "Barlow";
  --font-fraunces: "Barlow Condensed";
  --ink: #f2f2f2;
  --paper: #0d0d0d;
  --line: rgba(242, 242, 242, 0.16);
  --nb-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --nb-mono: "Barlow", system-ui, sans-serif;
  --nb-kicker: #ff2e2e;
  --nb-accent: #d21414;
  --nb-accent-bright: #ff2e2e;
  --nb-copy: rgba(242, 242, 242, 0.88);
  --nb-copy-soft: rgba(242, 242, 242, 0.8);
  --nb-copy-mute: rgba(242, 242, 242, 0.66);
  --nb-copy-faint: rgba(242, 242, 242, 0.75);
  --nb-band: #d21414;
  --nb-band-ink: #ffffff;
  --nb-tint: #171717;
  --nb-card: #171717;
  --nb-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.6);
  --nb-eyebrow-bg: rgba(255, 46, 46, 0.12);
  --pine: #d21414;
  --pine-shadow: #a90f0f;
  --sage-deep: #ff2e2e;
  --sage: #ff8a8a;
  --mid: rgba(242, 242, 242, 0.7);
  --offwhite: #ffffff;
  --band: #171717;
  font-size: 18px;
  line-height: 1.6;
}
body.t-ringside h1,
body.t-ringside h2 {
  font-family: var(--nb-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
}
/* The house copy-only hero caps the headline at 17ch, a measure tuned for the
   house serif. Barlow Condensed sets far narrower glyphs, so the same ch value
   lands ~444px here and wraps the headline to four lines, NARROWER than its own
   655px lede, which inverts the type hierarchy. `ch` tracks the font, so the fix
   is a wider cap for this face only: 26ch reads ~679px, three lines, headline
   fractionally wider than the lede. Scoped to the theme so no other copy-only
   hero moves. */
body.t-ringside .hero.hero-copy h1 {
  max-width: 26ch;
}
body.t-ringside .kicker,
body.t-ringside .eyebrow {
  font-family: var(--nb-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nb-kicker);
}
body.t-ringside .btn {
  font-family: var(--nb-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--nb-accent);
  border-color: var(--nb-accent);
  border-radius: 0;
  color: #ffffff;
}
body.t-ringside .btn:hover {
  background: #a90f0f;
  border-color: #a90f0f;
}
/* Cards and tints are near-black, so their hairlines need lifting off it. */
body.t-ringside .q,
body.t-ringside .tcard,
body.t-ringside .pcard {
  border-color: rgba(242, 242, 242, 0.16);
}
body.t-ringside .bigstat .stat,
body.t-ringside .hero-dose .num {
  color: var(--nb-accent-bright);
}
/* THREE COLLISIONS between an inverted theme and the base sheet, which assumes
   a light page throughout. Each is a real failure, not a preference:

   1. The bands are `--pine`, which here is the red. A red accent line on a red
      band measured 1.48:1. On this theme the accent earns its emphasis by being
      the brightest thing on the band rather than a different hue.
   2. `.bigstat .sig` takes `--nb-accent`, the darker red, which lands at 3.29:1
      on the near-black tint. The bright red clears it at 4.85:1.
   3. `.signup` takes `--offwhite` as its BACKGROUND, while `.close` takes the
      same token as its band TEXT. One token, two roles that cannot both be
      satisfied on a dark page: the signup section rendered as a white block
      carrying near-white type at 1.12:1. It gets its own dark ground here. */
body.t-ringside .pq .accent {
  color: #ffffff;
}
/* The band paragraph is a SIBLING of `.pq`, not a child, so a `.pq p` selector
   matches nothing and both bands kept their house alpha-white on this red:
   composited over #d21414 that is 3.71:1 on the pull quote and 3.83:1 on the
   close, both normal-size and both under AA. Opaque here, because the shortfall
   is the alpha rather than the hue. */
body.t-ringside .pullquote p {
  color: #ffffff;
}
body.t-ringside .close p {
  color: var(--offwhite);
}
/* The microtrust is a <span> dimmed by CSS `opacity`, not by a colour alpha, so
   it survived both the `.close p` fix and my rgba-only audit: 75% of --offwhite
   over #d21414 is 3.52:1 at 13px. On the house's darker bands the dimming is
   affordable; on this red it is not, so the band keeps the hierarchy through
   size alone. */
body.t-ringside .close .microtrust {
  opacity: 1;
}
/* The per-day line is the third text in this band to land on the same trap, and
   the first to reach it through a NEW block field rather than existing markup:
   nothing rendered `.perday` on this theme until Tony's close took one. The
   shared rule paints it `--sage`, which is #ff8a8a here, and on the band's
   #d21414 that is 2.40:1 at 15px — under AA, and under even the 3:1 large-text
   floor. Same fix as its siblings: the band's opaque white, 5.46:1. */
body.t-ringside .close .perday {
  color: var(--offwhite);
}
body.t-ringside .bigstat .sig {
  color: var(--nb-accent-bright);
}
body.t-ringside .signup {
  background: #171717;
  color: var(--nb-copy);
}
/* 4. The chip tick is the mirror of the house rule: `--nb-accent` is the AA-safe
      choice on the seven light themes and the failing one here (3.29:1 on the
      near-black card), where the bright red clears at 4.85:1. */
body.t-ringside .chip .tick {
  color: var(--nb-accent-bright);
}
body.t-ringside .close .btn {
  background: #ffffff;
  color: #0d0d0d;
  border-color: #ffffff;
}

/* --- "copper" — Zib ------------------------------------------------------- */
body.t-copper {
  --font-manrope: "IBM Plex Sans";
  --font-fraunces: "Newsreader";
  --ink: #16181a;
  --paper: #ffffff;
  --line: rgba(22, 24, 26, 0.14);
  --nb-display: "Newsreader", Georgia, serif;
  --nb-mono: "IBM Plex Sans", system-ui, sans-serif;
  --nb-kicker: #9a5b2c;
  --nb-accent: #9a5b2c;
  --nb-accent-bright: #c47c45;
  --nb-copy: rgba(22, 24, 26, 0.88);
  --nb-copy-soft: rgba(22, 24, 26, 0.8);
  --nb-copy-mute: rgba(22, 24, 26, 0.64);
  --nb-copy-faint: rgba(22, 24, 26, 0.75);
  --nb-band: #16181a;
  --nb-band-ink: #ffffff;
  --nb-tint: #f6f2ee;
  --nb-card: #ffffff;
  --nb-shadow: 0 1px 2px rgba(22, 24, 26, 0.05), 0 10px 30px rgba(22, 24, 26, 0.07);
  --nb-eyebrow-bg: rgba(154, 91, 44, 0.09);
  --pine: #16181a;
  --pine-shadow: #000000;
  --sage-deep: #9a5b2c;
  --sage: #c47c45;
  --mid: rgba(22, 24, 26, 0.7);
  --offwhite: #ffffff;
  --band: #f6f2ee;
  font-size: 18px;
  line-height: 1.66;
}
body.t-copper h1,
body.t-copper h2 {
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.1;
}
body.t-copper .kicker,
body.t-copper .eyebrow {
  font-family: var(--nb-mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nb-kicker);
}
body.t-copper .btn {
  font-family: var(--nb-mono);
  font-weight: 600;
  background: var(--nb-accent);
  border-color: var(--nb-accent);
  border-radius: 4px;
}
body.t-copper .btn:hover {
  background: #7d4922;
  border-color: #7d4922;
}
body.t-copper .pq .accent,
body.t-copper .bigstat .stat,
body.t-copper .hero-dose .num {
  color: var(--nb-accent-bright);
}
body.t-copper .close .btn {
  background: #ffffff;
  color: #7d4922;
  border-color: #ffffff;
}

/* --- "highland" — Alison Gardner ------------------------------------------ */
body.t-highland {
  --font-manrope: "Karla";
  --font-fraunces: "Fraunces";
  --ink: #2a3138;
  --paper: #f7f9f9;
  --line: rgba(42, 49, 56, 0.13);
  --nb-display: "Fraunces", Georgia, serif;
  --nb-mono: "Karla", system-ui, sans-serif;
  --nb-kicker: #3d6b70;
  --nb-accent: #3d6b70;
  --nb-accent-bright: #6f9ea1;
  --nb-copy: rgba(42, 49, 56, 0.88);
  --nb-copy-soft: rgba(42, 49, 56, 0.8);
  --nb-copy-mute: rgba(42, 49, 56, 0.62);
  --nb-copy-faint: rgba(42, 49, 56, 0.75);
  --nb-band: #2a3f45;
  --nb-band-ink: #f7f9f9;
  --nb-tint: #eaf0f0;
  --nb-card: #ffffff;
  --nb-shadow: 0 1px 2px rgba(42, 49, 56, 0.05), 0 10px 34px rgba(42, 63, 69, 0.08);
  --nb-eyebrow-bg: rgba(61, 107, 112, 0.09);
  --pine: #2a3f45;
  --pine-shadow: #1d2c31;
  --sage-deep: #3d6b70;
  --sage: #a8c4c4;
  --mid: rgba(42, 49, 56, 0.7);
  --offwhite: #f7f9f9;
  --band: #eaf0f0;
  font-size: 18px;
  line-height: 1.72;
}
body.t-highland h1,
body.t-highland h2 {
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.14;
}
body.t-highland .kicker,
body.t-highland .eyebrow {
  font-family: var(--nb-mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nb-kicker);
}
body.t-highland .btn {
  font-family: var(--nb-mono);
  font-weight: 700;
  background: var(--nb-accent);
  border-color: var(--nb-accent);
  border-radius: 8px;
}
body.t-highland .btn:hover {
  background: #2f5458;
  border-color: #2f5458;
}
body.t-highland .pq .accent,
body.t-highland .bigstat .stat {
  color: var(--nb-accent-bright);
}
body.t-highland .close .btn {
  background: #f7f9f9;
  color: #2f5458;
  border-color: #f7f9f9;
}

/* The base sheet's three hardcoded greens, restated for the wave-2 themes. */
body.t-atelier .hero .lede,
body.t-atelier .sub,
body.t-atelier .obj .ans,
body.t-atelier .pcard p,
body.t-atelier .tcard p,
body.t-glow .hero .lede,
body.t-glow .sub,
body.t-glow .obj .ans,
body.t-glow .pcard p,
body.t-glow .tcard p,
body.t-ringside .hero .lede,
body.t-ringside .sub,
body.t-ringside .obj .ans,
body.t-ringside .pcard p,
body.t-ringside .tcard p,
body.t-copper .hero .lede,
body.t-copper .sub,
body.t-copper .obj .ans,
body.t-copper .pcard p,
body.t-copper .tcard p,
body.t-highland .hero .lede,
body.t-highland .sub,
body.t-highland .obj .ans,
body.t-highland .pcard p,
body.t-highland .tcard p {
  color: var(--nb-copy-soft);
}

/* ============================================================================
   THEME - "clinic" (body.t-clinic)

   The COMPANY type, not a personality. DoNotAge's own funnels read in the face
   used by clear-the-shelf and the-afternoon-wall: the OS sans, no web font.
   Partner and creator funnels keep their own faces.

   This overrides the two type tokens and NOTHING else - palette, spacing and
   every block stay the house design system. "Same fonts as those pages", not
   "same page as those pages".

   The stacks end in sans-serif on purpose: the house rules read
   `var(--font-fraunces), Georgia, serif`, and without a sans terminator a
   machine missing every named face would fall through to Georgia and set the
   display type in a serif after all.
   ========================================================================== */
body.t-clinic {
  --font-fraunces: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial,
    sans-serif;
  --font-manrope: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial,
    sans-serif;
  --nb-display: var(--font-fraunces);
}

/* Fraunces is an optical-size display serif and carries its own presence at a
   large size; a system sans at the same size and tracking reads looser and
   flatter. Tightening the display headings is what keeps the hero looking set
   rather than defaulted. Measured on the built page, not assumed. */
body.t-clinic h1,
body.t-clinic h2,
body.t-clinic h3 {
  letter-spacing: -0.02em;
}

/* Optional link inside a guarantee step (see GuaranteeStep.link). Underlined
   rather than coloured: the step block sits on the dark panel where the house
   accent has too little contrast to read as a link. */
.guar .step .t .steplink {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.guar .step .t .steplink:hover {
  text-decoration-thickness: 2px;
}