/* ==========================================================================
   Big, Bold Change in Primary Care — launch site
   Brand: Your Care, Your Say (Saskatchewan NDP Caucus)
   Idiom: product page. Big quiet type, centred compositions, colour comes
   from the models and a few deliberate brand moments.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Brand (from ndpcaucus.sk.ca/your_care_your_say) */
  --orange: #ff9900;
  --orange-ink: #d96f00;   /* orange for large display text on cream */
  --orange-text: #a84400;  /* orange for small text: 4.5:1 on cream and on the hero's warm foot */
  --blue: #00a9e0;
  --blue-ink: #0077b6;     /* blue for small text and links */
  --cream: #fff8e9;
  --ink: #1a1b16;

  /* Neutrals */
  --bg: var(--cream);
  --bg-white: #ffffff;
  --ink-2: #5d5c55;
  --ink-3: #8a897f;
  --hairline: rgba(26, 27, 22, 0.1);
  --hairline-light: rgba(255, 255, 255, 0.16);

  --brand-gradient: linear-gradient(90deg, var(--orange), var(--blue));

  /* Type */
  --font: "Poppins", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Layout */
  --gutter: clamp(20px, 5vw, 72px);
  --wrap: 1120px;
  --wrap-narrow: 840px;
  --radius: 28px;
  --radius-sm: 20px;
  --beat: clamp(180px, 28vh, 300px);        /* scroll between one section's last line and the next one's first */
  --section-y: clamp(72px, 10vh, 128px);    /* standard section padding */
  --section-y-lg: clamp(96px, 15vh, 176px); /* statement sections */
  --gap-lg: clamp(56px, 8vh, 96px);         /* between a section's main groups */
  --gap-md: clamp(40px, 6vh, 64px);
  --stack: 14px;                             /* eyebrow → title → tagline */
  --topbar-h: 68px; /* 52px on phones, set in the phone block below */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --cycle: 3200ms;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--topbar-h);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; } /* the width/height attributes only reserve space; CSS sizes keep the aspect */
h1, h2, h3, p { margin: 0; }
/* Line breaks: headlines and short lines balance so no line is left short; running text
   avoids a lone word on its last line. Where a phrase must stay together ("primary care",
   "on luck.") the markup uses  , and a sentence that should start its own line is
   wrapped in <span class="line">. */
p { text-wrap: pretty; }
h1, h2, h3, .closer__title, .lede, .pillar__tagline { text-wrap: balance; }
.line { display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--blue-ink);
  outline-offset: 3px;
  border-radius: 6px;
}
/* Read by screen readers, not shown */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Sections that receive focus from an in-page link (main.js) don't get a ring around the whole block */
[tabindex="-1"]:focus { outline: none; }
/* The phone menu moves focus to its first link; opened by a tap or click, that shows no ring
   (main.js sets data-opened, and switches it back as soon as a key is pressed) */
.topbar[data-opened="pointer"] .topbar__nav a:focus-visible { outline: none; }

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 980px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.2s;
}
.skip-link:focus { transform: none; }

/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
/* Scroll locks go on the body, never the root: hiding the root's overflow makes the body's own
   overflow-x clip apply to the body itself, so for a moment the body is the scroll box every sticky
   element sticks to, and Safari doesn't switch them back when the lock lifts (the phone pillar
   pieces then scroll past their places). On the body, the lock passes up to the page as it should. */
.lenis.lenis-stopped body { overflow: hidden; }

/* --------------------------------------------------------------------------
   Type scale
   -------------------------------------------------------------------------- */

.display,
.hero__title,
.closer__title,
.film__title {
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.display-l,
.pillar__title,
.faq__title,
.downloads__title {
  font-size: clamp(2rem, 3.7vw, 3.3rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.028em;
}

/* One orange word per headline, like "Big Bold Change in Healthcare" */
.accent { color: var(--orange-ink); }

.eyebrow {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--blue-ink);
}
.eyebrow--muted { color: var(--ink-2); }
.eyebrow--light { color: rgba(255, 255, 255, 0.72); }

.lede {
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-2);
}

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap--narrow { width: min(var(--wrap-narrow), 100% - 2 * var(--gutter)); }

/* Buttons and links. White text on the deeper brand blue (the blue the site already uses for
   text): white on the pure brand blue (#00A9E0) fails contrast checks, this passes AA. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 24px;
  border: 0;
  border-radius: 980px;
  background: var(--blue-ink);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn:hover { background: #00669d; }
.btn:active { transform: scale(0.98); }
.btn--small { min-height: 32px; padding: 0 14px; font-size: 0.8125rem; }
/* A download whose file isn't there yet (main.js checks and relabels it) */
.btn.is-pending,
.btn.is-pending:hover { background: rgba(26, 27, 22, 0.08); color: var(--ink-3); cursor: default; }

.link {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  /* A taller tap area (44px) without moving anything */
  padding-block: 10px;
  margin-block: -10px;
  color: var(--blue-ink);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}
.link::after { content: "›"; font-size: 1.15em; line-height: 1; transition: transform 0.2s var(--ease); }
.link:hover { text-decoration: underline; }
.link:hover::after { transform: translateX(2px); }

/* --------------------------------------------------------------------------
   3D stage (fixed canvas)
   Stacking: section backgrounds < canvas (z 1) < content (z 2) < opaque "cover" sections (z 3)
   -------------------------------------------------------------------------- */

.stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.stage.is-ready { opacity: 1; }
/* While the infographic's row shows, the canvas lies over that section instead (main.js sets its
   top and height), so the page carries the models along with their panels as it scrolls */
.stage.is-docked { position: absolute; inset: auto 0 auto 0; }
.no-webgl .stage { display: none; }

.cover { position: relative; z-index: 3; }

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */

.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  height: var(--topbar-h);
  padding: 3px var(--gutter) 0;
  background: rgba(255, 248, 233, 0.78);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
/* The brand's gradient rule */
.topbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--brand-gradient);
}
.topbar.is-scrolled { box-shadow: inset 0 -1px 0 var(--hairline); }
.topbar.is-dark { background: rgba(26, 27, 22, 0.78); color: #fff; box-shadow: inset 0 -1px 0 var(--hairline-light); }

.topbar__left { display: flex; align-items: center; min-width: 0; }
.topbar__brand { display: grid; padding-block: 15px; margin-block: -15px; } /* a 44px+ tap area round the logo */
.topbar__brand img { grid-area: 1 / 1; width: 200px; height: auto; transition: opacity 0.3s; }
.topbar__brand .logo-on-dark,
.topbar.is-dark .topbar__brand .logo-on-light { opacity: 0; }
.topbar.is-dark .topbar__brand .logo-on-dark { opacity: 1; }

.topbar__nav { display: flex; gap: 40px; }
.topbar__nav a {
  font-size: 1.0625rem;
  font-weight: 500;
  color: rgba(26, 27, 22, 0.72);
  text-decoration: none;
  transition: color 0.25s;
}
.topbar__nav a:hover,
.topbar__nav a.is-active { color: var(--ink); }
.topbar.is-dark .topbar__nav a { color: rgba(255, 255, 255, 0.7); }
.topbar.is-dark .topbar__nav a:hover,
.topbar.is-dark .topbar__nav a.is-active { color: #fff; }

.topbar__right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.topbar .btn--small { min-height: 42px; padding: 0 22px; font-size: 1rem; }
/* The menu's own "Get the plan": phones only (the bar's button serves desktop) */
.topbar__nav .topbar__cta { display: none; }

/* Phone menu button: three bars that fold into a cross when the menu is open */
.topbar__menu {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -8px; /* the bars sit on the gutter line; the tap target reaches a little past it */
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.topbar__menu span,
.topbar__menu span::before,
.topbar__menu span::after {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease);
}
.topbar__menu span { position: relative; }
.topbar__menu span::before,
.topbar__menu span::after { content: ""; position: absolute; left: 0; }
.topbar__menu span::before { top: -7px; }
.topbar__menu span::after { top: 7px; }
.topbar.is-open .topbar__menu span { background: transparent; }
.topbar.is-open .topbar__menu span::before { transform: translateY(7px) rotate(45deg); }
.topbar.is-open .topbar__menu span::after { transform: translateY(-7px) rotate(-45deg); }
html.menu-open body { overflow: hidden; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  height: 100vh;
  height: 100svh;
  min-height: 640px;
  padding: calc(var(--topbar-h) + 24px) var(--gutter) 24px;
  text-align: center;
  /* No z-index: the gradient must sit below the fixed canvas. Cream warming to
     orange at the foot, like the brand's hero panel. */
  background:
    radial-gradient(42% 34% at 50% 60%, rgba(255, 153, 0, 0.14), rgba(255, 153, 0, 0) 100%),
    linear-gradient(180deg, var(--cream) 0%, var(--cream) 48%, #ffdca6 100%);
}

/* A capped column centred in the viewport, so tall screens don't stretch the composition.
   The 3D stage places the model in .hero__stage, whatever size it ends up. */
.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto minmax(200px, 1fr) auto;
  gap: 16px;
  width: min(1200px, 100%);
  height: min(100%, 920px);
  margin-inline: auto;
}

.hero__head { display: grid; gap: var(--stack); justify-items: center; }
.hero__title { max-width: 23ch; }

.hero__stage { position: relative; min-height: 200px; }

/* Shown only if WebGL is unavailable */
.hero__word {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  font-size: clamp(4rem, 16vw, 15rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffb13d, var(--orange));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.no-webgl .hero__word { display: grid; }

/* The four pillars, set clear of the model above */
.hero__parts { display: grid; justify-items: center; margin-top: clamp(20px, 4.5vh, 48px); }
.hero__pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: min(1040px, 100%);
  margin-inline: auto;
}
.hero__pillars a {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 16px 10px 0;
  text-decoration: none;
  color: var(--ink-2);
  transition: color 0.35s;
}
.hero__pillars a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(26, 27, 22, 0.12);
}
.hero__pillars strong { font-size: 1.0625rem; font-weight: 700; color: var(--ink); }
/* The tab lines run the width of their tab (balanced wrapping made narrow five-line stacks of the
   longer lines), with no lone last word */
.hero__line { font-size: 0.875rem; line-height: 1.4; text-wrap: pretty; }
.hero__pillars a:hover,
.hero__pillars a.is-active { color: var(--ink); }
.hero__pillars a.is-active strong { color: var(--orange-text); }
.hero__bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--brand-gradient);
  transform: scaleX(0);
  transform-origin: left;
}
.hero__pillars a.is-active .hero__bar { animation: fill var(--cycle) linear forwards; }
.hero__pillars a.is-active.is-held .hero__bar { animation: none; transform: scaleX(1); }
@keyframes fill { to { transform: scaleX(1); } }

/* --------------------------------------------------------------------------
   Paradox (problem statement): the brand's dark block, with the legislature
   -------------------------------------------------------------------------- */

.paradox {
  padding: calc(var(--beat) / 2) 0;
  background: var(--ink);
  color: #fff;
  text-align: center;
  overflow: hidden;
}
.paradox .eyebrow { color: var(--blue); }
.paradox .lede { color: rgba(255, 255, 255, 0.72); }
.paradox .accent { color: var(--orange); }
.paradox__head { position: relative; display: grid; gap: var(--stack); justify-items: center; }
.paradox__head .display { max-width: 24ch; }
.paradox__head .lede { max-width: 58ch; margin-top: 10px; }

[data-reveal] .w { opacity: 0.22; }
.no-motion [data-reveal] .w { opacity: 1; }

.stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 32px;
  margin-top: var(--gap-lg);
}
.stat { display: grid; gap: 10px; justify-items: center; }
.stat__value {
  font-size: clamp(2.75rem, 5vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat__value small { font-size: 0.6em; font-weight: 700; letter-spacing: -0.02em; }
/* The counting number (main.js): a box at the finished number's width, digits centred, so nothing moves */
.stat__num { display: inline-block; text-align: center; white-space: nowrap; }
.stat__caption { max-width: 26ch; font-size: 1.0625rem; line-height: 1.5; color: rgba(255, 255, 255, 0.7); }

.paradox__turn {
  position: relative;
  display: grid;
  justify-items: center;
  margin-top: var(--gap-lg);
}
/* The diagnosis that closes the dark block */
.paradox__close {
  max-width: 46ch;
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   The pivot: here is the plan
   -------------------------------------------------------------------------- */

.plan-intro {
  padding: calc(var(--beat) / 2) 0;
  background: var(--bg);
  text-align: center;
}
.plan-intro__inner { display: grid; gap: 24px; justify-items: center; }
.plan-intro__title {
  max-width: 22ch;
  /* Capped so "One primary-care system." fits on one line inside the 1120px wrap */
  font-size: clamp(2.4rem, 5.9vw, 5.3rem);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.035em;
}
.plan-intro .lede { max-width: 66ch; margin-top: 10px; }
/* The pivot leads straight into the first pillar, whose centred intro already starts lower on the screen */
#the-plan { padding-bottom: 96px; }
.plan-intro .lede strong { color: var(--ink); font-weight: 700; }

/* The promise, straight after the hero: continues the hero's warm foot back into cream. Its top
   padding makes up a full beat with the little space under the hero's pillar row. */
.plan-intro--promise {
  /* Less on tall screens, where the hero's centred group already leaves space below its pillar row */
  padding-top: max(80px, calc(var(--beat) - 40px - max(0px, (100vh - 1020px) / 2)));
  background: linear-gradient(180deg, #ffdca6 0%, var(--cream) 42%);
}

.paradox__art {
  position: absolute;
  right: -6vw;
  bottom: -5vw;
  width: min(60vw, 860px);
  opacity: 0.1;
  filter: invert(1);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   The plan: pillars over the fixed 3D stage
   -------------------------------------------------------------------------- */

/* Clipped at the sides: on phones the pillar pieces otherwise widen the page past the screen (a phone
   then zooms out a little or lets the page slide sideways). "clip" makes no scroll box, so the sticky
   and pinned parts inside still stick to the screen. */
.plan { position: relative; overflow-x: clip; }

.pillar__intro,
.step { position: relative; z-index: 2; }

/* The intro is one centred group: the text, then a box the 3D stage places the model in (the
   box rides with the text as the page scrolls, and the model docks mid-screen for the blurbs). */
.pillar__intro {
  display: grid;
  grid-template-rows: auto clamp(180px, 36svh, 400px);
  align-content: center;
  justify-items: center;
  gap: 24px;
  /* A screen tall, capped on tall screens so the space around the centred group (and with it the
     scroll from one pillar to the next) stays about one beat */
  min-height: min(100vh, 1000px);
  min-height: min(100svh, 1000px);
  padding: calc(var(--topbar-h) + 36px) var(--gutter) 28px;
  text-align: center;
}
.pillar__stage { width: min(100%, 64vh); height: 100%; }
.pillar__head { display: grid; gap: var(--stack); justify-items: center; max-width: 820px; }
.pillar__title { max-width: 22ch; } /* "Your digital Backbone." on one line where it fits */
.pillar__tagline {
  font-size: clamp(1.2rem, 1.5vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.pillar__head .lede { max-width: 62ch; }
.pillar__cta { margin-top: 6px; }
/* A link inside running text: a taller tap area (inline padding doesn't move the lines) */
.faq__head .lede a { padding-block: 10px; }

.step {
  display: flex;
  align-items: center;
  /* Keep the blocks near the model on wide screens. The model scales with viewport height,
     so the column does too, leaving room for it between the two blocks. */
  width: min(100%, calc(960px + 48vh));
  margin-inline: auto;
  padding: 0 var(--gutter);
}
.step--right { justify-content: flex-end; }
/* The four blurbs of a pillar come two at a time, one each side of the model, so a pillar is two
   beats of scrolling rather than four. The grid keeps both blocks of a pair level; each row is
   about half a screen, with the model in the gap between the columns. */
.pillar[data-state] .pillar__steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(clamp(300px, 44vh, 440px), auto);
  width: min(100%, calc(960px + 48vh));
  margin-inline: auto;
  /* The hand-off to the next pillar's heading, about one beat */
  padding-bottom: clamp(80px, 12vh, 140px);
}
.pillar[data-state] .step { width: auto; margin: 0; }
.pillar[data-state] .step--left { grid-column: 1; padding-right: 0; }
.pillar[data-state] .step--right { grid-column: 2; padding-left: 0; }
/* Before the infographic, whose centred header sits lower the taller the screen is, the Backbone
   needs less run-up than the other pillars */
#backbone .pillar__steps { padding-bottom: clamp(0px, calc(1000px - 100vh), 120px); }

/* Plain text blocks: nothing between the words and the page */
.block {
  position: relative;
  display: grid;
  gap: 12px;
  width: min(400px, 30vw);
}

/* Legibility halo behind the text, invisible where nothing is underneath. A feathered cream
   haze (::before) over a progressive blur (.halo, added by main.js): four nested ellipses, each
   blurring a little more than the one outside it, so no boundary is more than a few pixels of
   blur apart. (Browsers don't let a mask feather a backdrop-filter, so this stands in for one.) */
.block::before,
.pillar__head::before {
  content: "";
  position: absolute;
  inset: -34px -48px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    rgba(255, 248, 233, 0.9) 34%,
    rgba(255, 248, 233, 0.6) 54%,
    rgba(255, 248, 233, 0) 74%
  );
}
.halo {
  position: absolute;
  inset: -34px -48px;
  z-index: -2;
  pointer-events: none;
}
.halo i {
  position: absolute;
  border-radius: 50%;
  -webkit-backdrop-filter: blur(var(--b));
  backdrop-filter: blur(var(--b));
}
.halo i:nth-child(1) { inset: 0; --b: 1.5px; }
.halo i:nth-child(2) { inset: 8%; --b: 3px; }
.halo i:nth-child(3) { inset: 16%; --b: 5px; }
.halo i:nth-child(4) { inset: 25%; --b: 8px; }
.pillar__head { position: relative; }
.block h3 {
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.022em;
}
.block p:not(.eyebrow) {
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.block--promise h3 {
  font-size: clamp(1.8rem, 2.6vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

/* --------------------------------------------------------------------------
   One connected system: a looping strip
   The four panels drift right to left in a loop (main.js moves each panel, wrapping it round
   while it's off screen), and keeps going as the page scrolls past. The models themselves are drawn by
   the 3D stage into each .panel__model box.
   -------------------------------------------------------------------------- */

.infographic {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* the wide track must not stretch the column */
  /* The header and the panels are one group, centred in the screen, so the header stays close to
     the panels however tall the screen is */
  grid-template-rows: auto auto;
  align-content: center;
  row-gap: var(--gap-md);
  height: 100vh;
  height: 100svh;
  padding: calc(var(--topbar-h) + 36px) 0 28px;
  overflow: hidden;
}
.infographic__head {
  display: grid;
  gap: var(--stack);
  justify-items: center;
  padding: 0 var(--gutter);
  text-align: center;
}
.infographic__viewport {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 0;
}
.infographic__track {
  --panel-gap: clamp(28px, 4vw, 64px);
  display: flex;
  gap: var(--panel-gap);
  width: max-content;
  padding: 0 var(--gutter);
}
.panel {
  /* Grows a little with the screen, and is never less than a third of it (less the gap), so the
     strip of four is always more than a screen and a panel long: a panel wrapping round from the
     left edge to the right is out of view at both ends */
  flex: 0 0 max(min(max(400px, 29vw), 560px, 82vw), calc(100vw / 3 - var(--panel-gap) + 4px));
  display: grid;
  /* The content keeps its usual width, centred, when a wide screen makes the panel wider */
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
  gap: 12px;
  align-content: start;
  will-change: transform;
}
.panel__model {
  height: clamp(200px, 36vh, 360px);
  aspect-ratio: 1;
  margin: 0 auto 8px;
}
.no-webgl .panel__model { display: none; }
.panel h3 {
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.022em;
}
.panel p:not(.eyebrow) {
  max-width: 40ch;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink-2);
}
/* The closing statement holds mid-screen while the logo floats up above it */
/* The closer locks mid-screen, holds for a quarter of a screen, then the film slides up over it
   (the film's -60vh overlap must cover the closer's height plus this step's bottom padding) */
.pillar .step.step--closer {
  display: block;
  min-height: 135vh;
  padding-top: 0;
  padding-bottom: 10vh;
}
.closer {
  position: sticky;
  top: 50vh;
  display: grid;
  justify-items: center;
  gap: 18px;
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}
.closer__title { max-width: 18ch; }
.closer__sub {
  font-size: clamp(1.5rem, 2.6vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--orange-ink);
}
.closer__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 28px;
  margin-top: 14px;
}

/* Fades: text rises in at the bottom of the screen and drifts up and fades under the top bar, tied
   to the scroll (syncFades in main.js writes opacity and transform). Nothing here, so the text is
   simply visible without the script or with reduced motion. */

/* --------------------------------------------------------------------------
   Video
   -------------------------------------------------------------------------- */

.film {
  --s: 0.84;
  --r: 28;
  height: 125vh;      /* fills the screen, then holds for a quarter of a screen before the FAQ */
  margin-top: -60vh;  /* slides up over the pinned closing statement */
  background: var(--ink);
  color: #fff;
}
.film__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.film__frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--r) * 1px);
  transform: scale(var(--s));
  background:
    radial-gradient(70% 90% at 30% 20%, rgba(0, 169, 224, 0.5), transparent 60%),
    radial-gradient(70% 90% at 80% 90%, rgba(255, 153, 0, 0.6), transparent 60%),
    #0e0f0c;
}
.film__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  opacity: 0;
  transition: opacity 0.6s;
}
.film__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film.is-playing .film__video { opacity: 1; object-fit: contain; } /* playing: the whole film, letterboxed, never cropped (a phone held upright would otherwise show a narrow slice) */
.film.is-playing .film__overlay,
.film.is-playing .film__placeholder { opacity: 0; pointer-events: none; }

.film__placeholder { position: absolute; inset: 0; transition: opacity 0.6s; }
.film__placeholder img {
  position: absolute;
  right: -4%;
  bottom: -8%;
  width: min(80%, 1100px);
  opacity: 0.14;
  filter: invert(1);
}

.film__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: end;
  justify-items: start;
  gap: 14px;
  padding: clamp(28px, 5vw, 72px);
  transition: opacity 0.6s;
}
.film__title { max-width: 22ch; color: #fff; }
.film__title .accent { color: var(--orange); }
.film__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: clamp(80px, 9vw, 112px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 0.4s var(--ease-out), background-color 0.3s;
}
.film__play:hover { transform: translate(-50%, -50%) scale(1.05); background: var(--orange); }
.film__play svg { width: 34%; fill: #fff; margin-left: 6%; }
.film__status { min-height: 1.5em; font-size: 0.875rem; color: rgba(255, 255, 255, 0.72); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq {
  padding: calc(var(--beat) / 2) 0;
  background: var(--bg-white);
}
.faq__head { display: grid; gap: var(--stack); justify-items: center; text-align: center; }
.faq__head .lede a { color: var(--blue-ink); font-weight: 600; text-decoration: none; }
.faq__head .lede a:hover { text-decoration: underline; }

.faq__list { margin-top: var(--gap-md); }
/* The switch between the Q&A's groups: a pill whose highlight slides to the chosen group. main.js
   shows it and hides the other groups; without the script every group shows, under its heading. */
.faq__switch {
  position: relative;
  display: flex;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 28px;
  padding: 4px;
  border-radius: 980px;
  background: var(--cream);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.faq__switch[hidden] { display: none; }
.faq__slider {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  border-radius: 980px;
  background: var(--blue-ink);
  box-shadow: 0 2px 10px rgba(0, 119, 182, 0.22);
}
/* Slides once it has been placed (not from nothing as the page loads) */
.faq__switch.is-ready .faq__slider { transition: transform 0.45s var(--ease-out), width 0.45s var(--ease-out); }
.no-motion .faq__switch .faq__slider { transition: none; }
.faq__tab {
  position: relative; /* over the slider */
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 980px;
  background: none;
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.3s var(--ease);
}
.faq__tab:hover { color: var(--ink); }
.faq__tab[aria-selected="true"] { color: #fff; }
.faq__tab:focus-visible { outline-offset: 2px; border-radius: 980px; }
.faq__panel { border-top: 1px solid var(--hairline); }
.faq.is-tabbed .faq__group { display: none; }
/* The Q&A document's groups ("For Patients" …), shown when the switch isn't there */
.faq__group {
  padding: 28px 0 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--blue-ink);
}
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary i {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  transition: transform 0.4s var(--ease-out);
}
.faq__item summary i::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--blue-ink);
  border-bottom: 2px solid var(--blue-ink);
  transform: rotate(45deg);
}
.faq__item[open] summary i { transform: rotate(180deg); }
.faq__answer { overflow: hidden; }
.faq__answer p { max-width: 64ch; padding-bottom: 26px; font-size: 1.0625rem; line-height: 1.55; color: var(--ink-2); }
.faq__answer strong { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   Downloads: the brand's cream-to-orange panel
   -------------------------------------------------------------------------- */

.downloads {
  padding: clamp(24px, 4vh, 56px) 12px 12px;
  background: var(--bg);
}
.downloads__panel {
  padding: var(--gap-lg) clamp(20px, 4vw, 64px) clamp(28px, 4vw, 48px);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #fff3dc 0%, #ffd38a 45%, var(--orange) 100%);
}
.downloads__head { display: grid; gap: var(--stack); justify-items: center; text-align: center; }
.downloads__head .lede { max-width: 48ch; color: var(--ink-2); }

.dl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: min(var(--wrap), 100%);
  margin: var(--gap-md) auto 0;
}
.dl {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 236px;
  padding: 26px 26px 24px;
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(90, 50, 0, 0.06);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.dl:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(90, 50, 0, 0.4); }
.dl__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 22px;
  border-radius: 50%;
  background: var(--blue);
}
.dl__icon svg { width: 20px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dl__title { font-size: 1.1875rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
.dl__meta { font-size: 0.9375rem; color: var(--ink-2); }
.dl__cta { margin-top: auto; padding-top: 18px; }
.dl.is-pending { cursor: default; }
.dl.is-pending:hover { transform: none; box-shadow: 0 1px 2px rgba(90, 50, 0, 0.06); }
.dl.is-pending .dl__icon { background: #e6e0d3; }
.dl.is-pending .dl__cta { display: none; }

/* --------------------------------------------------------------------------
   Footer: the brand's dark footer
   -------------------------------------------------------------------------- */

.footer {
  padding: 36px 0;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.62);
}
.footer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px 20px;
  flex-wrap: wrap;
  font-size: 0.75rem;
}
.footer__inner img { width: 118px; height: auto; }
/* Email, phone and address: a row beside the logo, a column on phones */
.footer__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 36px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}
.footer__contact li { display: flex; align-items: flex-start; gap: 10px; }
.footer__contact svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 0.15em; /* level with the first line of text */
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.footer__contact a {
  padding-block: 11px; /* a 44px tap area without moving anything */
  margin-block: -11px;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.footer__contact a:hover { text-decoration: underline; }
.footer__contact address { font-style: normal; }
/* Copyright and back to top, under a hairline */
.footer__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  flex-basis: 100%;
  padding-top: 20px;
  border-top: 1px solid var(--hairline-light);
}
.footer__base p { margin: 0; }
.footer__top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-block: 13px; /* a 44px tap area without moving anything */
  margin-block: -13px;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}
.footer__top:hover { color: #fff; }
.footer__top svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Narrow desktops and tablets in landscape: the nav steps down so the logo, links and button keep
   their room (at full size they only fit from about 1180px) */
@media (max-width: 1180px) and (min-width: 861px) {
  .topbar__nav { gap: 24px; }
  .topbar__nav a { font-size: 1rem; }
  .topbar__brand img { width: 164px; }
}
@media (max-width: 980px) and (min-width: 861px) {
  .topbar__nav { gap: 18px; }
  .topbar__nav a { font-size: 0.9375rem; }
  .topbar__brand img { width: 144px; }
  .topbar .btn--small { padding: 0 16px; font-size: 0.9375rem; }
}

@media (max-width: 1100px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .dl-grid { grid-template-columns: repeat(2, 1fr); }
}

/* The phone layout: narrow screens, and phones turned sideways (PHONE_QUERY in js/stage.js) */
@media (max-width: 860px), (max-height: 500px) and (pointer: coarse) {
  :root { --topbar-h: 52px; }
  .topbar { grid-template-columns: 1fr auto; }
  .topbar__brand img { width: 135px; }
  /* The bar holds just the logo and the menu button; "Get the plan" moves into the menu */
  .topbar__right .btn { display: none; }
  .topbar__menu { display: grid; margin-right: -6px; }
  /* The nav becomes a full-screen panel under the bar (the bar's backdrop filter makes it the
     panel's containing block, so the panel is placed from the bar's own edges) */
  .topbar__nav {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    right: 0;
    height: calc(100vh - var(--topbar-h));
    height: calc(100svh - var(--topbar-h));
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 0 var(--gutter) 10vh;
    background: var(--cream);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s 0.3s;
  }
  .topbar.is-open .topbar__nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  }
  .topbar__nav a,
  .topbar.is-dark .topbar__nav a {
    padding: 10px 0;
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--ink);
  }
  .topbar__nav a.is-active,
  .topbar.is-dark .topbar__nav a.is-active { color: var(--orange-ink); }
  .topbar .topbar__nav a.topbar__cta {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 28px;
    padding: 0 26px;
    min-height: 48px;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    color: #fff;
  }

  /* Phones: the hero group (title, model box, pillar row) is centred as a whole instead of being
     stretched to the screen's full height, so the pillar row never hides under the browser's
     toolbar; the hero only grows past the screen if the group needs it */
  .hero { height: auto; min-height: 100svh; padding-top: calc(var(--topbar-h) + 16px); padding-bottom: max(28px, env(safe-area-inset-bottom)); }
  .hero__inner { height: auto; gap: 12px; grid-template-rows: auto clamp(170px, 34svh, 320px) auto; }
  .hero__stage { min-height: 0; }
  .hero__parts { margin-top: 16px; }
  .hero__pillars { grid-template-columns: repeat(2, 1fr); gap: 12px 16px; }
  .hero__pillars a { padding-top: 12px; }
  .hero__line { display: none; }

  /* Model sits in the upper part of the screen; text rides below it */
  .pillar__intro { grid-template-rows: clamp(150px, 30svh, 280px) auto; gap: 20px; padding-top: calc(var(--topbar-h) + 12px); padding-bottom: 24px; }
  .pillar__stage { order: -1; }
  /* The blur halos behind text cost a frame of compositing each on phones; the cream haze stays */
  .halo { display: none; }
  .step,
  .step--right { justify-content: center; align-items: flex-end; min-height: 70vh; min-height: 70svh; padding-bottom: 6vh; text-align: center; }
  .pillar .step:last-child { min-height: 78vh; min-height: 78svh; }
  /* After the last-child rule, which would otherwise win on specificity and cut the closer short */
  .pillar .step.step--closer { min-height: 125vh; min-height: 125svh; }
  .block { width: 100%; max-width: 480px; justify-items: center; }
  /* Phones: the closing statement holds below the logo, the pair centred together */
  .closer { top: calc(var(--topbar-h) + 34svh); }

  /* Pillars on phones: the model with one piece of text at a time (the intro, then each blurb),
     held together in the middle of the screen. The intro and blurb wrappers step aside
     (display: contents) so every piece sits in one column inside the pillar; each piece sticks
     just below the model (main.js sets each sticky top so the pair is centred) and stays there to
     the end of the pillar. main.js keeps each blurb hidden until it reaches its place, then swaps
     it with the one showing; the model swaps in place between pillars. */
  .pillar[data-state] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* No space above the model box: the next model is already rising into view as the last one goes */
    padding: 0 var(--gutter);
  }
  /* About one beat between the plan statement and the Home heading (the Home model waits for the
     statement to clear its spot, see layoutPhonePillars) */
  #home.pillar[data-state] { padding-top: calc(var(--beat) - 100px); }
  .pillar[data-state] .pillar__intro,
  .pillar[data-state] .pillar__steps,
  .pillar[data-state] .step { display: contents; }
  /* The model holds at the centre of the screen and swaps in place, so the box it rides on desktop isn't needed */
  .pillar[data-state] .pillar__stage { display: none; }
  .pillar[data-state] .pillar__head,
  .pillar[data-state] .block { position: sticky; z-index: 2; top: 45svh; flex: none; }
  .pillar[data-state] .block { width: 100%; max-width: 480px; }
  /* Pieces overlap in the flow (main.js spaces them); until it's laid out, show only the intro */
  .pillar[data-state] .block:not([style*="margin-top"]) { opacity: 0; }
  /* The scroll the last piece holds for, then fades out with the model (set by main.js) */
  .pillar[data-state]::after { content: ""; flex: none; height: var(--pillar-tail, 75svh); }
  .pillar[data-state] .block[data-fade] { opacity: 1; transform: none; transition: none; }
  /* A flick through a pillar comes to rest on a piece, not half way through a swap (main.js puts a
     snap point at each piece; "proximity" leaves the rest of the page free) */
  html { scroll-snap-type: y proximity; }
  .snap-mark { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; pointer-events: none; }

  .infographic { padding-top: calc(var(--topbar-h) + 24px); grid-template-rows: auto 1fr; align-content: normal; row-gap: 0; }
  /* Factsheet buttons at a full 44px tap height on phones */
  .pillar__cta.btn--small { min-height: 44px; padding: 0 22px; font-size: 0.9375rem; }
  .panel__model { height: clamp(180px, 30vh, 300px); }

  .film { height: 125vh; }
  .downloads { padding-left: 8px; padding-right: 8px; padding-bottom: 8px; }
  .dl { min-height: 0; }
  .footer__inner { flex-direction: column; align-items: center; text-align: center; }
  .footer__contact { flex-direction: column; align-items: center; }
  .footer__contact li { flex-direction: column; align-items: center; gap: 6px; }
  .footer__contact svg { margin-top: 0; }
  .footer__base { justify-content: center; }
}

@media (max-width: 560px) {
  /* Phones: scale the biggest type with the screen so two-word phrases ("The Saskatchewan",
     "shouldn't depend") fit on one line instead of stranding a word */
  .display, .hero__title, .closer__title, .film__title { font-size: clamp(1.9rem, 9vw, 2.4rem); }
  .plan-intro__title { font-size: clamp(2rem, 10vw, 2.4rem); }
  .stats { grid-template-columns: 1fr; gap: 40px; }
  .dl-grid { grid-template-columns: 1fr; gap: 10px; }
  /* The FAQ's switch in one row, across the column: "Physicians & Providers" becomes "Providers" */
  .faq__tab-more { display: none; }
  .faq__switch { width: 100%; }
  .faq__tab { flex: 1 1 auto; padding: 0 10px; font-size: 0.875rem; }
  /* One column of compact rows: icon, title over its size, and an arrow (the word "Download"
     stays for screen readers), so the five files take a screen instead of three */
  .dl {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas: "icon title cta" "icon meta cta";
    align-items: center;
    column-gap: 14px;
    row-gap: 1px;
    padding: 16px 18px;
  }
  .dl__icon { grid-area: icon; margin-bottom: 0; }
  .dl__title { grid-area: title; align-self: end; font-size: 1.0625rem; }
  .dl__meta { grid-area: meta; align-self: start; font-size: 0.875rem; }
  .dl__cta { grid-area: cta; margin: 0; padding: 0 2px 0 0; font-size: 0; }
  .dl__cta::after { font-size: 1.6rem; }
}

/* The narrowest phones (320–360px): the FAQ's switch tightens a little more to stay in one row */
@media (max-width: 360px) {
  .faq__tab { padding: 0 6px; font-size: 0.8125rem; }
}

/* Phones turned sideways: the phone layout on a screen only about 400px tall */
@media (max-height: 500px) and (pointer: coarse) {
  /* Hero: the title, the model and the four tabs (in one row) share the one screen */
  .hero__title { font-size: 2rem; }
  .hero__inner { gap: 6px; grid-template-rows: auto clamp(110px, 36svh, 200px) auto; }
  .hero__parts { margin-top: 6px; }
  .hero__pillars { grid-template-columns: repeat(4, 1fr); }
  .hero__pillars a { padding-top: 8px; }
  /* Infographic: the heading alone, and smaller models and type, so a whole panel fits under it */
  .infographic { padding-top: calc(var(--topbar-h) + 10px); }
  .infographic__head .eyebrow,
  .infographic__head .pillar__tagline { display: none; }
  .infographic__head .pillar__title { font-size: 1.75rem; }
  .panel { gap: 6px; }
  .panel__model { height: 30svh; margin-bottom: 4px; }
  .panel h3 { font-size: 1.25rem; }
  .panel p:not(.eyebrow) { font-size: 0.9375rem; line-height: 1.4; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}