@charset "UTF-8";

/* ==========================================================================
   CHAIR IT UP — design system

   The audience is adults 55 and better, so legibility is the brief, not a
   constraint on it. Body text never drops below 18px, every text colour was
   measured against its background, tap targets are 48px, and motion is one
   quiet gesture per section rather than a page that moves while you read.

   The page has one idea it is built around: the program is a FIXED SEQUENCE
   (eight weeks, in order) with a CHOICE INSIDE EACH WEEK (the option that
   suits you today). That is the product's whole argument against free videos
   and against a class where everyone does the same thing. So the eight-week
   track is the one loud element, and everything else stays quiet around it.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */

:root {
  /* Brand navy and teal are fixed by the flyer. The teal is too light to be
     text on white (3.40:1), so it does fills and graphics only, and a darker
     teal carries anything that has to be read. Ratios measured, not guessed. */
  --navy:      #0B3A5B;   /* 11.86:1 on white */
  --navy-deep: #072A42;
  --teal:      #2A9B8F;   /* fills and graphics ONLY — 3.40:1 on white */
  --teal-ink:  #1F7A70;   /*  5.15:1 on white — safe for link text */
  --white:     #FFFFFF;
  --mist:      #F1F5F6;
  --ink:       #1A2B34;   /* 14.59:1 on white */
  --muted:     #5A6B73;   /*  5.55:1 on white */
  --line:      #DDE5E8;
  --line-soft: #E9EFF1;

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Type scale. Body starts at 18px and grows — never shrinks. */
  --t-body: 1.125rem;      /* 18px */
  --t-lead: clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem);
  --t-h3:   clamp(1.25rem, 1.1rem + 0.5vw, 1.45rem);
  --t-h2:   clamp(1.75rem, 1.35rem + 1.8vw, 2.6rem);
  --t-h1:   clamp(2.25rem, 1.6rem + 3.2vw, 4rem);
  --t-num:  clamp(2.75rem, 1.9rem + 4vw, 5rem);

  --s1: .5rem;  --s2: .75rem; --s3: 1rem;   --s4: 1.5rem;
  --s5: 2rem;   --s6: 3rem;   --s7: 4rem;   --s8: 5rem;

  --wrap: 1080px;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --r: 12px;
  --head-h: 68px;

  --shadow: 0 2px 4px rgba(11,58,91,.06), 0 12px 32px -16px rgba(11,58,91,.22);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ----------------------------------------------------------------- base -- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + var(--s4));
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Room for the sticky dock on phones. */
  padding-bottom: 76px;
}
@media (min-width: 60rem) { body { padding-bottom: 0; font-size: 1.1875rem; } }

h1, h2, h3 {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 100, "wght" 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

p { margin: 0; max-width: 62ch; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }

a { color: var(--teal-ink); text-underline-offset: .2em; text-decoration-thickness: from-font; }
a:hover { color: var(--navy); }

button { font: inherit; color: inherit; }

/* One visible focus ring everywhere. Keyboard users on this site are likely
   to be the ones who need it most. */
:focus-visible {
  outline: 3px solid var(--teal-ink);
  outline-offset: 3px;
  border-radius: 4px;
}
.band--navy :focus-visible, .foot :focus-visible, .hero :focus-visible {
  outline-color: #7FD8CC;
}

::selection { background: #CFEDE8; color: var(--navy); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: var(--white);
  padding: var(--s2) var(--s4); border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ----------------------------------------------------------- structure -- */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 720px; }

.band { padding-block: clamp(3rem, 7vw, var(--s8)); }
.band--mist { background: var(--mist); }
.band--navy { background: var(--navy); color: #E8EFF3; }
.band--navy h1, .band--navy h2, .band--navy h3 { color: var(--white); }
.band--tight { padding-block: clamp(2rem, 4vw, var(--s6)); }

.eyebrow {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 112, "wght" 700;
  font-size: .8125rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal-ink);
  margin: 0 0 var(--s3);
}
.eyebrow--light { color: #7FD8CC; }

.lede { font-size: var(--t-lead); line-height: 1.5; color: var(--ink); margin-top: var(--s4); }
.lede--light { color: #DCE7EC; }
.prose > * + * { margin-top: var(--s3); }
.prose { color: var(--ink); }
.muted { color: var(--muted); }

/* The price. Stated plainly — it is an investment figure, not a sale. */
.figure {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 115, "wght" 700;
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem);
  color: var(--navy);
  margin-top: var(--s4);
  line-height: 1.1;
}
.figure span {
  display: block;
  font-family: var(--font-body);
  font-variation-settings: normal;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
  margin-top: .35rem;
}
.figure--light { color: var(--white); }
.figure--light span { color: #B9CEDA; }

/* -------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 52px;
  padding: .85em 1.6em;
  border: 2px solid var(--navy);
  border-radius: var(--r);
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-display);
  font-variation-settings: "wdth" 104, "wght" 700;
  font-size: 1.0625rem;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: var(--white); transform: translateY(-1px); }
.btn--lg { min-height: 60px; font-size: 1.125rem; padding: .9em 1.9em; }
.btn--sm { min-height: 46px; font-size: 1rem; padding: .6em 1.1em; }

.btn--ghost { background: transparent; color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: var(--white); }

.btn--on-dark { background: var(--white); border-color: var(--white); color: var(--navy); }
.btn--on-dark:hover { background: #CFEDE8; border-color: #CFEDE8; color: var(--navy); }

.btn--outline-light { background: transparent; border-color: rgba(255,255,255,.6); color: var(--white); }
.btn--outline-light:hover { background: rgba(255,255,255,.12); border-color: var(--white); color: var(--white); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }

/* --------------------------------------------------------------- header -- */

.head {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.head.is-stuck { border-bottom-color: var(--line); box-shadow: 0 1px 20px -10px rgba(11,58,91,.4); }
.head__in { min-height: var(--head-h); display: flex; align-items: center; gap: var(--s4); }

.mark { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--navy); flex: none; }
.mark__glyph { width: 32px; height: 32px; color: var(--navy); }
.mark__word {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 112, "wght" 700;
  font-size: 1.1875rem; letter-spacing: .01em; line-height: 1;
}
.mark__word span { color: var(--teal-ink); }

.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.75rem); }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink); text-decoration: none; font-size: 1.0625rem;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--navy); border-bottom-color: var(--teal); }
.nav a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--teal); font-weight: 700; }

.burger {
  display: none; margin-left: auto;
  width: 48px; height: 48px; padding: 0;
  background: none; border: 2px solid var(--line); border-radius: 10px;
  position: relative; cursor: pointer;
}
.burger span { position: absolute; left: 12px; width: 20px; height: 2px; background: var(--navy); transition: transform .25s var(--ease), opacity .2s; }
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 28px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.menu { display: none; border-top: 1px solid var(--line); background: var(--white); padding-block: var(--s2) var(--s4); }
.menu ul { display: grid; }
.menu a {
  display: block; padding: var(--s3) 0; font-size: 1.1875rem;
  color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-display); font-variation-settings: "wdth" 104, "wght" 700;
}

@media (max-width: 59.999rem) {
  .nav, .head__cta { display: none; }
  .burger { display: block; }
  .menu:not([hidden]) { display: block; }
}

/* ----------------------------------------------------------------- hero -- */

.hero { position: relative; isolation: isolate; background: var(--navy-deep); color: var(--white); overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img, .hero__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.hero__media video { z-index: 1; }
/* A scrim heavy enough that white text clears AA over any frame of the video.
   Measured against the brightest frame, not the average. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(100deg, rgba(7,42,66,.94) 0%, rgba(7,42,66,.86) 42%, rgba(7,42,66,.52) 100%),
    linear-gradient(to top, rgba(7,42,66,.75) 0%, rgba(7,42,66,0) 45%);
}
.hero__in { position: relative; z-index: 3; padding-block: clamp(3.5rem, 10vw, 7rem); }
.hero h1 { color: var(--white); max-width: 15ch; }
.hero h1 span { display: block; }
.hero h1 span + span { color: #8FE0D4; }
.hero__sub { font-size: var(--t-lead); color: #DCE7EC; margin-top: var(--s4); max-width: 34ch; }
.hero__support { margin-top: var(--s4); color: #C5D6DF; max-width: 46ch; }
.hero .figure { color: var(--white); }
.hero .figure span { color: #B9CEDA; }

/* ============================ THE EIGHT-WEEK TRACK ========================
   The signature. Eight numerals in order, because the weeks genuinely are a
   sequence and the order carries information the reader needs. The rule is
   drawn once, left to right, when it scrolls into view — the only motion on
   the page that says something rather than decorates.
   ======================================================================== */

.track { margin-top: var(--s6); }
.track__rule { position: relative; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.track__rule::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--teal), var(--navy));
  transform: scaleX(0); transform-origin: left;
}
.track.is-in .track__rule::after { transform: scaleX(1); transition: transform 1.4s var(--ease); }

.track__weeks {
  display: grid; grid-template-columns: repeat(8, 1fr);
  gap: var(--s2); margin-top: var(--s3);
}
.track__week { text-align: left; }
.track__n {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 122, "wght" 700;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  line-height: 1; color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.track__label { display: block; font-size: .9375rem; color: var(--muted); margin-top: .35rem; line-height: 1.3; }

@media (max-width: 47.999rem) {
  /* On a phone, eight columns is unreadable. The track becomes a list, which
     is also how the weeks are actually experienced — one after another. */
  .track__weeks { grid-template-columns: 1fr; gap: 0; }
  .track__week { display: grid; grid-template-columns: 3.25rem 1fr; gap: var(--s3); align-items: baseline; padding: var(--s3) 0; border-bottom: 1px solid var(--line-soft); }
  .track__n { font-size: 2rem; }
  .track__label { font-size: 1.0625rem; color: var(--ink); margin-top: 0; }
  .track__rule { display: none; }
}

/* The spine on How it works: the same eight weeks, given room. */
.spine { display: grid; gap: 0; margin-top: var(--s6); counter-reset: none; }
.spine__row {
  display: grid; grid-template-columns: minmax(4.5rem, 7rem) 1fr;
  gap: var(--s4); align-items: start;
  padding: var(--s5) 0; border-top: 1px solid var(--line);
}
.spine__row:last-child { border-bottom: 1px solid var(--line); }
.spine__n {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 125, "wght" 700;
  font-size: var(--t-num); line-height: .85; color: var(--teal);
  font-variant-numeric: tabular-nums;
}
.spine__row:first-child .spine__n,
.spine__row:last-child .spine__n { color: var(--navy); }
.spine__w { font-family: var(--font-display); font-variation-settings: "wdth" 104, "wght" 700; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: .25rem; }
.spine__t { font-size: var(--t-h3); color: var(--navy); font-family: var(--font-display); font-variation-settings: "wdth" 100, "wght" 700; line-height: 1.2; }

/* The second axis: within a week, you pick the option that suits you today.
   Three rungs, deliberately unlabelled — the client has not published level
   names and inventing them would put words in the doctor's mouth. */
.rungs { display: grid; gap: .4rem; margin-top: var(--s3); max-width: 15rem; }
.rung { height: 10px; border-radius: 5px; background: var(--teal); opacity: .28; }
.rung:nth-child(2) { opacity: .55; width: 78%; }
.rung:nth-child(3) { opacity: .85; width: 56%; }
.rungs--legend { display: flex; justify-content: space-between; font-size: .9375rem; color: var(--muted); margin-top: .5rem; max-width: 15rem; }

/* ------------------------------------------------------------- compare -- */

/*
 * "Free videos give you ideas. CHAIR IT UP gives you a path."
 *
 * That sentence is a comparison, so it is drawn as one: a scatter of
 * unrelated marks against an ordered climb. The right-hand side deliberately
 * echoes the eight-week track, because it IS the eight-week track -- the two
 * places on the site make the same claim and should look related.
 */
.compare { display: grid; gap: var(--s4); margin-top: var(--s6); }
@media (min-width: 52rem) { .compare { grid-template-columns: 1fr 1fr; gap: var(--s5); } }

.cpanel {
  border-radius: var(--r);
  padding: var(--s5);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  display: flex; flex-direction: column;
}
.cpanel--win { border-color: rgba(127,216,204,.45); background: rgba(42,155,143,.14); }
.cpanel__label {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 110, "wght" 700;
  font-size: .8125rem; letter-spacing: .15em; text-transform: uppercase;
  color: #9DB6C4; margin-bottom: var(--s2);
}
.cpanel--win .cpanel__label { color: #7FD8CC; }
.cpanel__t {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 104, "wght" 700;
  font-size: var(--t-h3); color: #D7E4EB; line-height: 1.2;
}
.cpanel--win .cpanel__t { color: var(--white); }
.cpanel__viz { margin-top: var(--s5); height: 92px; position: relative; }

/* Left: unrelated bits, no order, going nowhere. */
.scatter span {
  position: absolute; height: 8px; border-radius: 4px;
  background: #5A7486;
}
/* Right: eight steps, climbing, in order. */
.climb { display: flex; align-items: flex-end; gap: 6px; height: 100%; }
.climb span {
  flex: 1; border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #7FD8CC, var(--teal));
}

/* ----------------------------------------------------------- credential -- */

/*
 * The doctor is the reason to trust this at all, so his section is built like
 * a credential plate rather than a paragraph: the name set large, and the
 * three facts that matter -- who, where, and what this is NOT -- given equal
 * weight on a ruled row. The last one is the non-medical fence, which was
 * previously buried in the footer.
 */
.cred {
  border: 1px solid var(--line);
  border-left: 6px solid var(--navy);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--mist);
  padding: clamp(1.75rem, 4vw, var(--s6));
}
.cred__name {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 112, "wght" 700;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  color: var(--navy); line-height: 1.05; margin-top: var(--s2);
}
.cred__facts {
  display: grid; gap: var(--s4);
  margin-top: var(--s5); padding-top: var(--s5);
  border-top: 1px solid var(--line-2, #CBD8DD);
}
@media (min-width: 46rem) { .cred__facts { grid-template-columns: repeat(3, 1fr); gap: var(--s5); } }
.cfact dt {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 108, "wght" 700;
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal-ink); margin-bottom: .3rem;
}
.cfact dd { margin: 0; color: var(--ink); font-size: 1.0625rem; line-height: 1.45; }

/* ---------------------------------------------------------------- media -- */

/*
 * Photography carries the warmth that type alone cannot. Every image is a
 * real person 55+ training at home -- not a gym, not a class, not a clinic.
 * Fixed aspect ratios and explicit width/height stop the page reflowing as
 * they load, which matters more than usual when the reader is mid-sentence.
 */
.media {
  border-radius: var(--r);
  overflow: hidden;
  background: var(--mist);
  box-shadow: var(--shadow);
}
.media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }

/* Text beside a picture. Alternate the side down a page so it reads as a
   rhythm rather than a template. */
.split { display: grid; gap: var(--s5); align-items: center; }
@media (min-width: 56rem) {
  .split { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
  .split--flip .split__media { order: -1; }
}

/* A pillar with a face on it. The teal rule moves from the top of the text to
   a band under the image, so the card still reads as one object. */
.pcard {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.pcard img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pcard__body { padding: var(--s4) var(--s4) var(--s5); border-top: 4px solid var(--teal); flex: 1; }
.pcard__body h3 { margin-bottom: var(--s2); }
.pcard__body p { color: var(--ink); }

/* A full-width photograph used as a quiet divider between arguments. */
.strip { position: relative; }
.strip img { width: 100%; height: clamp(220px, 34vw, 420px); object-fit: cover; display: block; }

/* ---------------------------------------------------------------- cards -- */

.grid { display: grid; gap: var(--s4); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
/* Exactly two columns, not auto-fit: the equipment page has four cards, and
   auto-fit made three columns with a lone orphan on the second row. */
.grid--2 { grid-template-columns: 1fr; }
@media (min-width: 48rem) { .grid--2 { grid-template-columns: 1fr 1fr; } }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s5);
  box-shadow: var(--shadow);
}
.card h3 { margin-bottom: var(--s2); }
.card p { color: var(--ink); }
.card__tag {
  display: inline-block; font-family: var(--font-display);
  font-variation-settings: "wdth" 108, "wght" 700;
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal-ink); background: #E4F3F1; border-radius: 999px;
  padding: .3rem .7rem; margin-bottom: var(--s3);
}
.card__tag--opt { color: var(--muted); background: var(--mist); }

/* A quiet numeral for the three pillars — they are not a sequence, so they
   get a rule and a colour block rather than 01 / 02 / 03. */
.pillar { border-top: 4px solid var(--teal); padding-top: var(--s4); }
.pillar h3 { margin-bottom: var(--s2); }

.checks { display: grid; gap: var(--s3); margin-top: var(--s5); }
.checks li { display: grid; grid-template-columns: 1.75rem 1fr; gap: var(--s2); align-items: start; }
.checks li::before {
  content: ""; width: 1.1rem; height: .6rem; margin-top: .45em;
  border-left: 3px solid var(--teal-ink); border-bottom: 3px solid var(--teal-ink);
  transform: rotate(-45deg);
}

.note {
  background: #FFF8E8; border: 1px solid #E3D0A4; border-left: 4px solid #B07C1A;
  border-radius: 0 var(--r) var(--r) 0;
  padding: var(--s4); margin-top: var(--s4); font-size: 1.0625rem;
}
.note strong { color: #6B4A0A; }

/* ----------------------------------------------------------------- form -- */

.form { margin-top: var(--s5); max-width: 34rem; }
.field { margin-bottom: var(--s4); }
.field label { display: block; font-weight: 700; color: var(--navy); margin-bottom: .4rem; font-size: 1.0625rem; }
.field .hint { display: block; font-weight: 400; color: var(--muted); font-size: .9375rem; margin-top: -.15rem; margin-bottom: .4rem; }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: 1.0625rem;
  min-height: 54px; padding: .8rem 1rem;
  border: 2px solid #BFCDD4; border-radius: var(--r); background: var(--white); color: var(--ink);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--teal-ink); box-shadow: 0 0 0 4px rgba(31,122,112,.16); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.msg { padding: var(--s4); border-radius: var(--r); margin-bottom: var(--s5); font-size: 1.0625rem; }
.msg--ok { background: #E4F3F1; border: 2px solid var(--teal-ink); color: #13443F; }
.msg--err { background: #FDECEA; border: 2px solid #B3261E; color: #7A1810; }

/* ------------------------------------------------------------ final CTA -- */

/*
 * The one thing the whole site is for. It was a left-aligned paragraph with a
 * button under it; now the price and the action sit together on a plate, so
 * the offer reads as a single object instead of four stacked lines.
 */
.final { text-align: center; }
.final .eyebrow { justify-content: center; }
.final h2 { margin-inline: auto; max-width: 16ch; }
.final .lede { margin-inline: auto; text-align: center; }

.offer {
  margin: var(--s6) auto 0;
  max-width: 34rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--r);
  padding: var(--s5);
  display: grid; gap: var(--s4);
}
@media (min-width: 40rem) {
  .offer { grid-template-columns: auto 1fr; align-items: center; text-align: left; gap: var(--s5); }
}
.offer .figure { margin-top: 0; }
.offer .btn { width: 100%; }
.final__note { margin: var(--s4) auto 0; color: #A9C1CE; font-size: 1rem; max-width: 42ch; }

/* The eight-week track, reduced to a rule -- a quiet reminder of the shape of
   the thing they are joining. */
.final__rule {
  display: flex; gap: 5px; justify-content: center;
  margin-bottom: var(--s5);
}
.final__rule span {
  width: 26px; height: 5px; border-radius: 3px;
  background: rgba(127,216,204,.28);
}
.final__rule span:last-child { background: #7FD8CC; }

/* ----------------------------------------------------------------- foot -- */

.foot { background: var(--navy-deep); color: #B6CBD7; padding-block: var(--s7) var(--s5); font-size: 1.0625rem; }
.foot a { color: #9FDDD2; text-decoration: none; }
.foot a:hover { color: var(--white); text-decoration: underline; }

.foot__in { display: grid; gap: var(--s6); padding-bottom: var(--s5); }
@media (min-width: 52rem) { .foot__in { grid-template-columns: 1.5fr 1fr 1fr; gap: var(--s5); } }

.foot__mark { display: inline-flex; align-items: center; gap: .55rem; color: var(--white); text-decoration: none; }
.foot__mark svg { width: 30px; height: 30px; }
.foot__brand { font-family: var(--font-display); font-variation-settings: "wdth" 112, "wght" 700; font-size: 1.25rem; color: var(--white); line-height: 1; }
.foot__brand span { color: #7FD8CC; }
.foot__blurb { margin-top: var(--s3); color: #94AFBD; max-width: 38ch; }

.foot__h {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 110, "wght" 700;
  font-size: .75rem; letter-spacing: .15em; text-transform: uppercase;
  color: #7FD8CC; margin-bottom: var(--s3);
}
.foot__nav ul { display: grid; gap: .65rem; }
.foot__phone { font-family: var(--font-display); font-variation-settings: "wdth" 110, "wght" 700; font-size: 1.25rem; }

/* The non-medical fence. It is the most legally important sentence on the
   site, so it gets a rule and its own space instead of being grey small print
   lost under the links. */
.foot__legalbar { border-top: 1px solid rgba(255,255,255,.16); padding-top: var(--s5); }
.foot__disclaimer {
  color: #C3D6E0; max-width: 74ch; font-size: 1rem; line-height: 1.6;
  border-left: 3px solid rgba(127,216,204,.5); padding-left: var(--s4);
}
.foot__legal { margin-top: var(--s4); color: #7795A5; font-size: .9375rem; }

/* ----------------------------------------------------------------- dock -- */

.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -2px 16px rgba(11,58,91,.12); }
.dock a {
  flex: 1; min-height: 62px; display: flex; align-items: center; justify-content: center;
  text-decoration: none; font-family: var(--font-display);
  font-variation-settings: "wdth" 106, "wght" 700; font-size: 1.0625rem;
}
.dock__call { color: var(--navy); border-right: 1px solid var(--line); }
.dock__wait { background: var(--navy); color: var(--white); }
.dock__wait span { font-weight: 400; opacity: .85; }
@media (min-width: 60rem) { .dock { display: none; } }

/* --------------------------------------------------------------- motion -- */

/* The hidden state is added by JS, never here. A stylesheet that hides
   content and waits for a script is one blocked file away from a blank page. */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }

/* The hero settles once on load, in order, then stops moving. */
.hero__in > * { animation: rise .7s var(--ease) both; }
.hero__in > *:nth-child(1) { animation-delay: .05s; }
.hero__in > *:nth-child(2) { animation-delay: .15s; }
.hero__in > *:nth-child(3) { animation-delay: .25s; }
.hero__in > *:nth-child(4) { animation-delay: .35s; }
.hero__in > *:nth-child(5) { animation-delay: .45s; }
.hero__in > *:nth-child(6) { animation-delay: .55s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .track.is-in .track__rule::after { transform: scaleX(1); }
}

@media print {
  .head, .dock, .foot, .hero__media, .btn { display: none !important; }
  body { padding: 0; color: #000; background: #fff; }
}