/* ============================================================
   SELF-HOSTED FONTS
   Pulled from the @fontsource packages rather than Google's CDN.
   font-display:swap keeps text visible while the face loads.
   ============================================================ */
@font-face{font-family:'Fredoka';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/fredoka-latin-400-normal.93ea52bfd4.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/fredoka-latin-500-normal.d0feaff862.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/fredoka-latin-600-normal.f56ba4069e.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/fredoka-latin-700-normal.f67eddbc39.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/nunito-sans-latin-400-normal.bf4fb90479.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/nunito-sans-latin-500-normal.99f9835596.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/nunito-sans-latin-700-normal.36fbea3bf7.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/nunito-sans-latin-800-normal.1e1f107c15.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* =========================================================================
   PureMuze — Design System
   Built from "PureMuze Visual Style Guide v1"
   Colors, type scale, spacing and components match the style guide tokens.
   ========================================================================= */

:root {
  /* Color tokens */
  --color-sky: #8ECEFD;   /* exact hero/nav colour from the mockup */
  --color-sky-mid: #AEE1FF;
  --color-sky-soft: #C9EBFF;
  --color-navy: #071E56;
  --color-lime: #E9FF4F;
  --color-lime-hover: #DDF238;
  --color-pink: #FFA4BE;
  --color-pink-cta: #FF9BB8;
  --color-lavender: #CDB7FF;
  --color-lavender-cta: #B894F6;
  --color-blue-soft: #BFE5FF;
  --color-cream: #FFF9F2;
  --color-offwhite: #FAFBFC;
  --color-card: #FFFFFF;
  --color-border: #DDEAF5;
  --color-muted: #506079;
  --color-success: #17B26A;
  --color-lavender-bg: #F2ECFF;

  /* Fonts */
  --font-display: "Fredoka", "Arial Rounded MT Bold", "Nunito", sans-serif;
  --font-body: "Nunito Sans", "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Radii */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-card: 0 12px 40px rgba(7, 30, 86, 0.06);
  --shadow-bar: 0 16px 40px rgba(7, 30, 86, 0.08);
  --shadow-pop: 0 24px 60px rgba(7, 30, 86, 0.12);

  /* Layout */
  --maxw: 1200px;
  --gutter: 40px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--color-navy);
  background: var(--color-offwhite);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; margin: 0 0 .5em; line-height: 1.08; }
/* Fredoka is a display face and falls apart under about 18px. Rule for the
   whole site: Fredoka for headings at 18px and above only; Nunito Sans for
   everything smaller and for all body copy. Every h4 on the site is under
   18px, so h4 is body-face by default, and the small headings below that
   used to set the display face explicitly no longer do. */
h4 { font-family: var(--font-body); font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; }

/* ---------- Layout helpers ---------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 88px 0; }
.section--compact { padding: 56px 0; }
.section--cream { background: var(--color-cream); }
.section--offwhite { background: var(--color-offwhite); }
.section--lavender { background: var(--color-lavender-bg); }
.section--white { background: #fff; }
.center { text-align: center; }
.eyebrow {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 14px;
}
.lead { font-size: 19px; color: var(--color-muted); max-width: 720px; }
.center .lead { margin-left: auto; margin-right: auto; }
.section h2 { font-size: 36px; }
.text-lime { color: var(--color-lime); }
.text-navy { color: var(--color-navy); }
.muted { color: var(--color-muted); }
.maxw-720 { max-width: 720px; }
.maxw-820 { max-width: 820px; }
.mb-0 { margin-bottom: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
  padding: 18px 32px;
  min-height: 48px;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.btn:focus-visible { outline: 3px solid var(--color-navy); outline-offset: 3px; }
.btn--primary { background: var(--color-lime); color: var(--color-navy); }
.btn--primary:hover { background: var(--color-lime-hover); transform: translateY(-1px); }
.btn--secondary {
  background: transparent; color: var(--color-navy);
  border: 1.5px solid rgba(7,30,86,.35); padding: 16px 28px;
}
.btn--secondary:hover { background: rgba(7,30,86,.05); transform: translateY(-1px); }
.btn--pink { background: var(--color-pink-cta); color: var(--color-navy); }
.btn--pink:hover { background: #ff86a9; transform: translateY(-1px); }
.btn--lavender { background: var(--color-lavender-cta); color: #fff; }
.btn--lavender:hover { background: #a87df0; transform: translateY(-1px); }
.btn--white { background:#fff; color: var(--color-navy); box-shadow: var(--shadow-card); }
.btn--white:hover { transform: translateY(-1px); }
.btn--block { width: 100%; }
.btn--lg { padding: 20px 38px; font-size: 17px; }
.btn .arrow { transition: transform .15s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  /* Header is the same flat #8ECEFD as the hero on every page and every scroll
     state, so the nav reads as part of the hero and the wordmark never changes. */
  background: var(--color-sky);
  transition: background .25s ease, box-shadow .25s ease;
}
.site-header.nav-light { background: var(--color-sky); }
.site-header.is-stuck, .site-header.nav-light.is-stuck {
  background: rgba(142,206,253,.95); backdrop-filter: blur(10px);
  box-shadow: 0 4px 24px rgba(7,30,86,.10);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand { font-family: var(--font-display); font-weight: 700; font-size: 28px; letter-spacing: -.03em; display:inline-flex; align-items:center; }
.brand .pure { color: var(--color-navy); }
.brand .muze { color: var(--color-lime); }
.nav-links { display: flex; align-items: center; gap: 30px; list-style: none; }
.nav-links a { font-weight: 700; font-size: 15px; color: var(--color-navy); }
.nav-links a:hover { color: var(--color-lavender-cta); }
.nav-cta { display: flex; align-items: center; gap: 16px; }
.nav-toggle { display: none; background: none; border: none; padding: 8px; }
.nav-toggle span { display:block; width: 26px; height: 2.5px; background: var(--color-navy); border-radius: 2px; margin: 5px 0; transition: .25s; }

/* Header wordmark: navy "Pure" + lime "Muze" on the flat #8ECEFD bar, per the
   mockup. Navy is 9.3:1; lime is 1.5:1 and is a deliberate brand choice, not an
   oversight - do not "fix" it to a darker colour without asking Charles.
   The footer keeps white "Pure" + lime "Muze", which is 8:1+ on navy. */
.site-footer .brand .pure { color: #fff; }
.site-footer .brand .muze { color: var(--color-lime); }

/* Mobile drawer */
.mobile-drawer {
  position: fixed; inset: 0 0 0 auto; width: min(320px, 86vw);
  background: #fff; box-shadow: var(--shadow-pop);
  transform: translateX(100%); transition: transform .28s ease;
  z-index: 200; padding: 28px 26px; display: flex; flex-direction: column; gap: 6px;
}
.mobile-drawer.open { transform: translateX(0); }
.mobile-drawer a { padding: 14px 6px; font-weight: 700; border-bottom: 1px solid var(--color-border); }
.mobile-drawer .btn { margin-top: 18px; }
.drawer-close { align-self: flex-end; background: none; border: none; font-size: 26px; color: var(--color-navy); line-height: 1; margin-bottom: 8px; }
.scrim { position: fixed; inset: 0; background: rgba(7,30,86,.35); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 150; }
.scrim.open { opacity: 1; pointer-events: auto; }

/* ---------- Announcement bar (announce_bar in build.py) ---------- */
.pm-bar { background: var(--color-navy); color: #fff; font-size: 14px; line-height: 1.4; }
.pm-bar[hidden] { display: none; }
.pm-bar-in { display: flex; align-items: center; gap: 14px; min-height: 44px; padding-top: 6px; padding-bottom: 6px; }
.pm-bar p { margin: 0; flex: 1; }
.pm-bar b { color: var(--color-lime); font-weight: 800; }
.pm-bar-cta { flex: none; color: #fff; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.pm-bar-cta:hover { color: var(--color-lime); }
.pm-bar-x { flex: none; width: 36px; height: 36px; margin-right: -8px; border: 0; border-radius: 999px; background: transparent; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.pm-bar-x:hover { background: rgba(255,255,255,.12); }
@media (max-width: 640px) {
  .pm-bar { font-size: 13.5px; }
  .pm-bar-in { flex-wrap: wrap; row-gap: 2px; padding-top: 10px; padding-bottom: 10px; }
  .pm-bar p { flex: 1 1 calc(100% - 44px); }
  .pm-bar-cta { flex: none; order: 3; }
  .pm-bar-x { order: 2; align-self: flex-start; }
}

/* ---------- Promo code panel (code_panel in build.py) ---------- */
.pm-code { margin: 16px 0 0; padding: 16px 18px; border-radius: 16px; background: var(--color-navy); color: #fff; }
.pm-code-lead { margin: 0 0 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-lime); }
.pm-code-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pm-code-value { flex: 1 1 auto; font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: .04em; color: #fff; user-select: all; }
.pm-code-copy { flex: none; min-height: 44px; padding: 10px 18px; font-size: 15px; }
.pm-code-where { margin: 10px 0 0; font-size: 14px; font-weight: 600; color: #fff; }
.pm-code-terms { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: #C9D3EA; }
.wb-replay .pm-code { margin-top: 22px; }
.prog-hero .pm-code, .page-hero .pm-code { margin-top: 22px; max-width: 520px; }
.pm-code--compact { margin: 0 0 16px; padding: 12px 14px; }
.pm-code--compact .pm-code-value { font-size: 20px; }
.pm-code--compact .pm-code-copy { min-height: 40px; padding: 8px 14px; font-size: 14px; }
.pm-code--compact .pm-code-where { font-size: 13px; margin-top: 8px; }
.pm-code--compact .pm-code-terms { font-size: 11.5px; }

/* ---------- Exit modal (exit_modal in build.py) ----------
   Same language as the session and thank-you pages: the sky, the two
   circles, the live badge, the panel's headshots. */
.pm-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(7, 30, 86, .5); }
.pm-modal[hidden] { display: none; }
.pm-modal-card { position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - 40px); overflow: auto; border-radius: 22px; background: #fff; box-shadow: var(--shadow-pop); }
.pm-modal-top { position: relative; overflow: hidden; padding: 24px 26px 20px; background: var(--color-sky); }
.pm-modal-top > * { position: relative; z-index: 1; }
.pm-modal-top .blob { z-index: 0; }
.pm-modal-top .blob-pink { width: 200px; height: 200px; right: -70px; top: -80px; opacity: .9; }
.pm-modal-top .blob-lime { width: 120px; height: 120px; right: 90px; top: auto; bottom: -70px; }
.pm-modal-top .hero-badge { margin-bottom: 12px; font-size: 12px; padding: 6px 12px; }
.pm-modal-lead { margin: 0 0 4px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--color-navy); opacity: .8; }
.pm-modal-top h2 { font-size: 25px; line-height: 1.12; margin: 0 0 14px; padding-right: 30px; color: #fff; }
.pm-modal-faces { display: flex; flex-direction: column; gap: 8px; }
.pm-modal-face { display: flex; align-items: center; gap: 10px; }
.pm-modal-face img, .pm-modal-face .wb-speaker-ph { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; object-position: top; border: 2px solid #fff; box-shadow: 0 4px 12px rgba(7, 30, 86, .15); flex: none; font-size: 16px; }
.pm-modal-face b { display: block; font-size: 14px; line-height: 1.2; color: var(--color-navy); }
.pm-modal-face span { display: block; font-size: 12px; line-height: 1.3; color: var(--color-navy); opacity: .72; }
.pm-modal-body { padding: 18px 26px 6px; }
.pm-modal-p { font-size: 15px; color: var(--color-muted); margin: 0 0 14px; }
.pm-modal-grid { gap: 12px; }
.pm-modal-body .field { margin-bottom: 12px; }
.pm-modal-body .wb-legal { margin-top: 10px; }
.pm-modal-x { position: absolute; top: 10px; right: 10px; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .8); color: var(--color-navy); font-size: 24px; line-height: 1; cursor: pointer; }
.pm-modal-x:hover { background: #fff; }
.pm-modal-no { display: block; width: 100%; margin: 0; padding: 12px 10px 16px; border: 0; background: transparent; color: var(--color-muted); font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pm-modal .pm-code { margin-top: 0; }
@media (max-width: 560px) {
  .pm-modal { align-items: flex-end; padding: 0; }
  .pm-modal-card { max-width: none; max-height: 94vh; border-radius: 22px 22px 0 0; }
  .pm-modal-top { padding: 20px 20px 16px; }
  .pm-modal-top h2 { font-size: 22px; }
  .pm-modal-faces { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; }
  .pm-modal-face span { display: none; }
  .pm-modal-face img, .pm-modal-face .wb-speaker-ph { width: 34px; height: 34px; }
  .pm-modal-body { padding: 16px 20px 4px; }
  .pm-modal-grid { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .pm-modal-card { animation: hero-rise .3s ease-out both; }
}

/* ---------- Promo code panel (code_panel in build.py) ---------- */
.pm-code { margin: 16px 0 0; padding: 16px 18px; border-radius: 16px; background: var(--color-navy); color: #fff; }
.pm-code-lead { margin: 0 0 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-lime); }
.pm-code-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pm-code-value { flex: 1 1 auto; font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: .04em; color: #fff; user-select: all; }
.pm-code-copy { flex: none; min-height: 44px; padding: 10px 18px; font-size: 15px; }
.pm-code-where { margin: 10px 0 0; font-size: 14px; font-weight: 600; color: #fff; }
.pm-code-terms { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: #C9D3EA; }
.wb-replay .pm-code { margin-top: 22px; }
.prog-hero .pm-code, .page-hero .pm-code { margin-top: 22px; max-width: 520px; }
.pm-code--compact { margin: 0 0 16px; padding: 12px 14px; }
.pm-code--compact .pm-code-value { font-size: 20px; }
.pm-code--compact .pm-code-copy { min-height: 40px; padding: 8px 14px; font-size: 14px; }
.pm-code--compact .pm-code-where { font-size: 13px; margin-top: 8px; }
.pm-code--compact .pm-code-terms { font-size: 11.5px; }

/* ---------- Exit modal (exit_modal in build.py) ---------- */
.pm-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(7, 30, 86, .45); }
.pm-modal[hidden] { display: none; }
.pm-modal-card { position: relative; width: 100%; max-width: 440px; max-height: calc(100vh - 40px); overflow: auto; padding: 28px 26px 22px; border-radius: 20px; background: #fff; box-shadow: var(--shadow-pop); }
.pm-modal-card .tag { display: inline-block; font-weight: 800; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; padding: 6px 13px; border-radius: var(--radius-pill); margin-bottom: 12px; }
.pm-modal-card h2 { font-size: 26px; line-height: 1.15; margin: 0 0 10px; padding-right: 30px; }
.pm-modal-p { font-size: 15.5px; color: var(--color-muted); margin: 0 0 16px; }
.pm-modal-p b { color: var(--color-navy); }
.pm-modal-x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--color-navy); font-size: 26px; line-height: 1; cursor: pointer; }
.pm-modal-x:hover { background: var(--color-offwhite); }
.pm-modal-no { display: block; width: 100%; margin: 10px 0 0; padding: 10px; border: 0; background: transparent; color: var(--color-muted); font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pm-modal .pm-code { margin-top: 0; }
@media (max-width: 560px) {
  .pm-modal { align-items: flex-end; padding: 0; }
  .pm-modal-card { max-width: none; max-height: 92vh; border-radius: 20px 20px 0 0; padding: 24px 20px 18px; }
}
@media (prefers-reduced-motion: no-preference) {
  .pm-modal-card { animation: hero-rise .3s ease-out both; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--color-sky);
  padding: 32px 0 96px;
}
/* Copy column is wider than it was: the H1 breaks across two lines, not
   three, and the figure is a head-and-torso crop that needs less room. */
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; min-height: 560px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.7); border-radius: var(--radius-pill);
  padding: 8px 16px; font-weight: 800; font-size: 13px; letter-spacing: .04em; color: var(--color-navy);
  margin-bottom: 22px;
}
.hero h1 { font-size: 66px; line-height: .98; letter-spacing: -0.04em; color: #fff; margin-bottom: 22px; }
.hero h1 .lime { color: var(--color-lime); }
.hero-sub { font-size: 20px; color: var(--color-navy); max-width: 520px; margin-bottom: 30px; font-weight: 500; }
.hero-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hero-micro { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--color-navy); }

/* Hero visual: blobs + photo slot + snapshot card */
.hero-visual { position: relative; min-height: 560px; }
.blob { position: absolute; z-index: 1; }
.blob-pink { width: 300px; height: 360px; background: var(--color-pink); border-radius: 999px; right: 210px; top: 130px; }
.blob-lime { width: 200px; height: 200px; background: var(--color-lime); border-radius: 999px; right: 380px; top: 270px; opacity: .9; }
.hero-photo {
  /* The image is a head-and-torso crop (630x600), shown smaller than the visual column. It sits so its bottom
     edge falls just past the hero's bottom edge: .hero has overflow:hidden
     and .trust-wrap overlaps that edge (margin-top:-56px, z-index:20), so
     the crop line is hidden behind the trust bar and she reads as sitting
     behind it, not chopped. Keep bottom negative for that reason. */
  position: absolute; z-index: 2; right: 190px; bottom: -60px;
  width: 420px; height: 400px;
  background: none; box-shadow: none; border-radius: 0; overflow: visible;
  pointer-events: none;
}
.hero-photo picture { display: block; width: 100%; height: 100%; }
.hero-photo img {
  display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: bottom center;
}
/* Care Snapshot: a compact frosted card, top edge level with the H1 and
   right edge on the container line, sitting beside the figure. */
.snapshot-card {
  position: absolute; z-index: 3; right: 0; top: 100px; width: 232px;
  background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .85); border-radius: 20px;
  box-shadow: 0 14px 34px rgba(7, 30, 86, .10);
  padding: 14px 16px 10px;
}
.snapshot-card h4 { font-family: var(--font-body); font-weight: 800; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 4px; }
.snapshot-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(7, 30, 86, .08); }
.snapshot-row:first-of-type { border-top: none; }
.snapshot-ico { width: 28px; height: 28px; border-radius: 999px; flex: none; display: flex; align-items: center; justify-content: center; }
.snapshot-row b { font-size: 13px; display: block; line-height: 1.2; }
.snapshot-row span { font-size: 11px; color: var(--color-muted); }
@keyframes hero-rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes hero-drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
.hero-copy > * { animation: hero-rise .6s ease-out both; }
.hero-copy > :nth-child(2) { animation-delay: .06s; }
.hero-copy > :nth-child(3) { animation-delay: .12s; }
.hero-copy > :nth-child(4) { animation-delay: .18s; }
.hero-copy > :nth-child(5) { animation-delay: .24s; }
.hero-photo { animation: hero-rise .8s ease-out .15s both; }
.snapshot-card { animation: hero-rise .7s ease-out .4s both; }
.blob-pink { animation: hero-drift 9s ease-in-out 1s infinite; }
.blob-lime { animation: hero-drift 7s ease-in-out .5s infinite reverse; }
@media (prefers-reduced-motion: reduce) {
  .hero-copy > *, .hero-photo, .snapshot-card, .blob-pink, .blob-lime, .wb-face { animation: none; opacity: 1; translate: none; }
}
.snapshot-cta { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; background: var(--color-lavender-bg); border-radius: var(--radius-md); padding: 12px 16px; font-weight: 800; font-size: 13px; }

/* ---------- Trust bar ---------- */
.trust-wrap { margin-top: -56px; position: relative; z-index: 20; }
.trust-bar {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-bar);
  padding: 26px 30px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.trust-item { display: flex; align-items: center; gap: 14px; padding: 0 14px; }
.trust-item + .trust-item { border-left: 1px solid var(--color-border); }
.trust-ico { width: 44px; height: 44px; border-radius: 999px; background: var(--color-blue-soft); flex: none; display: flex; align-items: center; justify-content: center; }
.trust-item b { display: block; font-size: 15px; font-family: var(--font-body); font-weight: 800; }
.trust-item span { font-size: 13px; color: var(--color-muted); }

/* ---------- Icon circles / benefits ---------- */
.benefit-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.benefit { text-align: center; }
.icon-circle { width: 72px; height: 72px; border-radius: 999px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.benefit h3 { font-family: var(--font-body); font-weight: 800; font-size: 17px; margin-bottom: 6px; }
.benefit p { font-size: 14px; color: var(--color-muted); }
.split { display: grid; grid-template-columns: .9fr 1.6fr; gap: 48px; align-items: center; }

/* ---------- Cards / programs ---------- */
.card {
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 32px; box-shadow: var(--shadow-card);
}
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.program-card .tag {
  display: inline-block; font-weight: 800; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--radius-pill); margin-bottom: 18px;
}
.tag--lime { background: var(--color-lime); color: var(--color-navy); }
.tag--lavender { background: var(--color-lavender-bg); color: var(--color-lavender-cta); }
.tag--pink { background: #ffe6ee; color: #d6336c; }
.program-card h3 { font-size: 26px; }
.program-card p { color: var(--color-muted); font-size: 16px; }
.program-card.lime { background: #FCFFE6; border-color: #EEF6B8; }
.program-card.lavender { background: #FAF7FF; border-color: #EBE2FF; }
.program-card.pink { background: #FFF5F8; border-color: #FFE0EA; }

/* ---------- Pricing ---------- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; }
.price-card.featured { border: 2px solid var(--color-lavender-cta); box-shadow: var(--shadow-pop); }
.price-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--color-lavender-cta); color: #fff; font-weight: 800; font-size: 12px;
  padding: 7px 16px; border-radius: var(--radius-pill); letter-spacing: .04em; white-space: nowrap;
}
.price-card h3 { font-family: var(--font-body); font-weight: 800; font-size: 20px; margin-bottom: 4px; }
.price-card .price-desc { color: var(--color-muted); font-size: 14px; min-height: 40px; }
.price-amount { font-family: var(--font-display); font-weight: 700; font-size: 46px; letter-spacing: -.03em; margin: 12px 0 4px; }
.price-card.low .price-amount { color: #9bbf00; }
.price-card.standard .price-amount { color: #3aa0e6; }
.price-card.enhanced .price-amount { color: var(--color-lavender-cta); }
.price-amount small { font-family: var(--font-body); font-size: 16px; font-weight: 700; color: var(--color-muted); }
.feature-list { list-style: none; margin: 18px 0 24px; display: flex; flex-direction: column; gap: 12px; }
.feature-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; }
.feature-list .check { color: var(--color-success); flex: none; margin-top: 2px; }
.price-card .actions { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.fineprint { font-size: 13px; color: var(--color-muted); max-width: 760px; margin: 26px auto 0; text-align: center; }

/* ---------- Steps ---------- */
/* Auto-balances to however many steps are in the row (5 on how-it-works, 3 on
   the program pages). The connector line spans first circle to last, not the
   full container, so it never trails past the final step. */
.steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 16px; position: relative; }
.step { text-align: center; position: relative; }
.step-num { width: 56px; height: 56px; border-radius: 999px; background: var(--color-blue-soft); color: var(--color-navy); font-family: var(--font-display); font-weight: 700; font-size: 22px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; position: relative; z-index: 2; }
.step h3 { font-family: var(--font-body); font-weight: 800; font-size: 16px; margin-bottom: 6px; }
.step p { font-size: 13px; color: var(--color-muted); }
.steps::before {
  content: ""; position: absolute; top: 28px; height: 2px; z-index: 1;
  /* half a column in from each edge = dead centre of the first and last circle */
  left: calc(50% / var(--step-count, 5)); right: calc(50% / var(--step-count, 5));
  background: repeating-linear-gradient(90deg, var(--color-border) 0 8px, transparent 8px 16px);
}
.steps--3 { --step-count: 3; }
.steps--4 { --step-count: 4; }
.steps--5 { --step-count: 5; }

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(90deg, #8ECEFD 0%, #C9EBFF 50%, #8ECEFD 100%); }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.commitment {
  background: var(--color-blue-soft); border-radius: var(--radius-lg); padding: 36px 40px;
  display: grid; grid-template-columns: auto 1.4fr 1fr auto; gap: 30px; align-items: center;
}
.commit-shield { width: 84px; height: 84px; border-radius: 999px; background: var(--color-lime); display: flex; align-items: center; justify-content: center; flex: none; }
.commit-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.commit-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 600; }
.commit-list .check { color: var(--color-success); flex: none; }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-navy); color: #cdd6ea; padding: 64px 0 30px; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 30px; }
.footer-about { font-size: 14px; color: #9fb0d0; max-width: 280px; margin-top: 16px; }
.footer-col h4 { font-family: var(--font-body); font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; color: #b9c5dd; }
.footer-col a:hover { color: var(--color-lime); }
.footer-bottom { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: #8094b6; }
.footer-bottom .socials { display: flex; gap: 14px; }
.footer-bottom .socials a { width: 34px; height: 34px; border-radius: 999px; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; }
/* ---- Masterclass series ------------------------------------------------ */
/* These pages run tighter than the marketing pages on purpose. A registration
   page is read in one scroll, so the default section rhythm leaves too much
   dead space between blocks. */
.section--tight { padding-top: 44px; padding-bottom: 44px; }
.page-hero--tight { padding-top: 34px; padding-bottom: 30px; }
.page-hero--tight h1 { margin-bottom: 10px; }

/* auto 1fr: the form spans both rows and its extra height must land in the
   second row, not open a gap under the subhead. */
.wb-hero { display: grid; grid-template-columns: 1.25fr .85fr; grid-template-rows: auto 1fr; grid-template-areas: "head slot" "more slot"; gap: 0 44px; align-items: start; margin-top: 6px; }
.wb-hero-head { grid-area: head; }
.wb-hero-more { grid-area: more; }
.wb-hero > .wb-slot { grid-area: slot; }
/* Session page top: the hero and the takeaways/speakers section on one
   sky canvas, no seam between them, with the promo's soft orbs behind
   both. The sections are transparent and sit above the orbs. */
/* isolation + negative z-index on the orbs: every orb paints above the sky
   and below every piece of content in the canvas, at any width, however far
   an orb reaches past the column it is anchored in. */
.wb-top { position: relative; overflow: hidden; background: var(--color-sky); isolation: isolate; }
.wb-top > section { background: transparent; }
.wb-orb { position: absolute; border-radius: 999px; pointer-events: none; z-index: -1; }
/* Lavender lives inside the form slot, pink inside the What you'll learn
   column, so each sits behind that element at every width. Lime stays on
   the canvas, low right. */
.wb-orb--lav { width: 420px; height: 420px; background: #CDB7FF; right: -90px; top: -70px; opacity: .6; }
.wb-orb--pink { width: 380px; height: 380px; background: #FFA4BE; left: -150px; bottom: -110px; opacity: .55; }
.wb-orb--lime { width: 200px; height: 200px; background: #E9FF4F; right: 6%; bottom: -70px; opacity: .5; }
.wb-slot, #agenda { position: relative; }
.wb-page-hero { padding-bottom: 12px; }
/* One text colour in the hero, hierarchy by size and weight. */
.wb-page-hero h1, .wb-page-hero .lead, .wb-page-hero .wb-hook { color: #071E56; }
.wb-page-hero .lead { font-size: 20px; font-weight: 600; opacity: .92; max-width: 46ch; }
.wb-page-hero .wb-hook { opacity: .8; max-width: none; font-size: 15.5px; text-wrap: pretty; }
.wb-live-pill-sep { opacity: .45; margin: 0 2px; }
/* The promo's date block. */
.wb-when-row { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.wb-when-row > svg { flex: none; display: block; }
.wb-when-row b { font-size: 17px; font-weight: 800; letter-spacing: .01em; text-transform: uppercase; color: #071E56; line-height: 1.25; }
.wb-when-sep { opacity: .45; margin: 0 4px; }
/* One row under the date: the two pills, then the share row after a rule. */
.wb-meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-top: 14px; }
.wb-meta-row .wb-share { margin: 0 0 0 4px; padding-left: 14px; border-left: 1px solid rgba(7, 30, 86, .2); }
.wb-live-pill { display: inline-flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .85); border-radius: 999px; padding: 6px 16px 6px 6px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #071E56; margin-bottom: 16px; }
.wb-live-pill-ic { width: 30px; height: 30px; border-radius: 999px; background: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px rgba(233, 255, 79, .55); }
.wb-tagline { font-family: var(--font-display); font-size: 20px; color: #071E56; margin: 6px 0 12px; }
.wb-hook { color: #33415C; line-height: 1.6; margin: 12px 0 0; max-width: 58ch; }
.wb-hook--turn { color: #5C6780; }

/* The form column is deliberately narrow. Two side-by-side inputs push this
   card wide and crush the copy beside it. */
.wb-form-card { background: #fff; border: 1px solid #E7E9F0; border-radius: 18px; padding: 24px; position: sticky; top: 92px; }
.wb-form-head h3 { font-family: var(--font-display); font-size: 21px; margin: 0 0 4px; }
.wb-form-head p { font-size: 13px; color: #5C6780; margin: 0 0 16px; }
.wb-form .field { margin-bottom: 12px; }
.wb-form .field label { display: block; font-size: 13px; font-weight: 650; margin-bottom: 5px; }
.wb-form .field input { width: 100%; }
.wb-form .disclaimer { margin-top: 10px; font-size: 12px; }
/* Legal line sits inside the form card, above the fold, where it is actually
   read - not buried in the footer where a disclaimer does no work. */
.wb-legal { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid #EDEFF4; font-size: 11.5px; line-height: 1.5; color: #78849B; }

.wb-sec-head { margin-bottom: 24px; max-width: 62ch; }
.wb-sec-head h2 { margin: 10px 0 6px; }
.wb-sec-head p { margin: 0; }

/* Session page: four takeaways beside the panelists. */
.wb-learn2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.wb-col-head { font-size: 26px; margin: 0 0 22px; padding-bottom: 12px; border-bottom: 1px solid rgba(7, 30, 86, .22); }
.wb-learn-sec { padding-top: 26px; }
.wb-take { display: flex; gap: 14px; align-items: flex-start; background: #fff; border-radius: 16px; padding: 18px 20px; margin-bottom: 12px; box-shadow: 0 8px 24px rgba(7, 30, 86, .06); }
.wb-take-ic { flex: none; width: 30px; height: 30px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.wb-take p { margin: 0; font-size: 15px; line-height: 1.6; color: #5C6780; }
.wb-take b { color: #071E56; }
/* Speaker cluster, from the promo graphics: big circles on pastel discs
   with a white ring, a white nametag pill overlapping each, guests on the
   top row and the host centred below, a slow float. */
.wb-col-intro { margin: -8px 0 18px; font-size: 15px; line-height: 1.6; color: #071E56; opacity: .8; }
.wb-cluster { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; justify-items: center; padding: 22px 0 0; }
.wb-face { position: relative; width: 210px; text-align: center; animation: wb-float 6s ease-in-out infinite; }
.wb-face:nth-child(2) { animation-delay: -2s; }
.wb-face:nth-child(3) { grid-column: 1 / -1; animation-delay: -4s; }
.wb-face-ring { width: 168px; height: 168px; border-radius: 999px; background: var(--disc, #BFE5FF); padding: 6px; margin: 0 auto; box-shadow: 0 14px 30px rgba(7, 30, 86, .12); }
.wb-face-ring img, .wb-face-ring .wb-speaker-ph { display: block; width: 100%; height: 100%; border-radius: 999px; object-fit: cover; object-position: top; border: 5px solid #fff; box-sizing: border-box; }
.wb-face-ring .wb-speaker-ph { font-size: 40px; background: #fff; color: #8494AE; }
.wb-nametag { position: relative; display: inline-block; margin-top: -26px; background: #fff; border-radius: 999px; padding: 8px 18px 7px; box-shadow: 0 8px 20px rgba(7, 30, 86, .10); }
.wb-nametag b { display: block; font-size: 15px; line-height: 1.2; color: #071E56; }
.wb-nametag span { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #5C6780; }
.wb-face-role { margin: 10px auto 0; max-width: 200px; font-size: 12.5px; line-height: 1.45; color: #071E56; opacity: .75; }
@keyframes wb-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
/* FAQ: left-aligned like everything else, capped at a readable measure. */
.wb-faq { max-width: 74ch; }

/* Next-session card on the homepage and the hub. Navy, date and title and
   buttons on the left, the speakers listed on the right. */
.wb-next { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: start; background: #071E56; color: #fff; border-radius: 22px; padding: 36px 40px; }
.wb-next::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 999px; right: -140px; bottom: -220px; background: rgba(255, 255, 255, .05); pointer-events: none; }
.wb-next-main, .wb-next-panel { position: relative; min-width: 0; }
.wb-next-date { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: #C9EBFF; }
.wb-next h3 { font-family: var(--font-display); font-size: 30px; line-height: 1.15; color: #fff; margin: 16px 0 8px; }
.wb-next-sub { margin: 0 0 24px; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .75); max-width: 44ch; }
.wb-next-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.wb-next .btn--secondary { color: #fff; border-color: rgba(255, 255, 255, .5); }
.wb-next .btn--secondary:hover { background: rgba(255, 255, 255, .08); }
.wb-next-panel-label { display: flex; align-items: center; gap: 16px; margin: 4px 0 6px; font-size: 14px; font-weight: 700; color: #fff; }
.wb-next-panel-label::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .35); }
.wb-next-speaker { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.wb-next-speaker img { width: 48px; height: 48px; border-radius: 999px; object-fit: cover; flex: none; }
.wb-next-speaker .wb-speaker-ph { width: 48px; height: 48px; font-size: 20px; flex: none; }
.wb-next-speaker b { display: block; font-size: 17px; line-height: 1.2; color: #fff; }
.wb-next-speaker span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .75); }
@media (max-width: 900px) {
  .wb-learn2 { grid-template-columns: 1fr; gap: 32px; }
  .wb-next { grid-template-columns: 1fr; gap: 28px; padding: 28px 24px; }
  .wb-next h3 { font-size: 24px; }
}
@media (max-width: 480px) {
  .wb-orb--lav { width: 260px; height: 260px; right: -110px; top: -40px; }
  .wb-orb--pink { width: 240px; height: 240px; left: -120px; bottom: -60px; }
  .wb-orb--lime { width: 140px; height: 140px; right: -30px; bottom: -50px; }
  .wb-meta-row .wb-share { width: 100%; margin: 4px 0 0; padding-left: 0; border-left: 0; }
  .wb-face { width: 160px; }
  .wb-face-ring { width: 132px; height: 132px; padding: 5px; }
  .wb-nametag { padding: 7px 14px 6px; }
  .wb-nametag b { font-size: 13px; }
  .wb-face-role { font-size: 12px; max-width: 160px; }
  .wb-next-actions .btn { width: 100%; }
}


/* Share row lives in the hero, where people expect it, not at the foot of the
   page. Icon-only: four labelled buttons would compete with the primary CTA. */
.wb-share { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.wb-share > span { font-size: 13px; font-weight: 650; color: #5C6780; }
.wb-share-row { display: flex; gap: 8px; }
.wb-share-btn { width: 34px; height: 34px; border-radius: 999px; border: 1px solid #DDE2EC; color: #33415C; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; background: #fff; transition: border-color .16s ease, color .16s ease, background .16s ease; }
.wb-share-btn:hover { border-color: #071E56; color: #071E56; background: #F2F5FB; }
.wb-share-btn svg { display: block; }

.wb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.wb-card { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 16px; background: #fff; border: 1px solid #E7E9F0; text-decoration: none; color: inherit; transition: border-color .18s ease, transform .18s ease; }
.wb-card:hover { border-color: #071E56; transform: translateY(-2px); }
.wb-card h3 { font-family: var(--font-display); font-size: 19px; line-height: 1.3; margin: 0; }
.wb-card p { color: #5C6780; font-size: 14px; line-height: 1.55; margin: 0; flex: 1; }
.wb-card-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wb-num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; background: #F2F5FB; flex: none; }
.wb-cta { font-weight: 650; font-size: 14px; color: #071E56; margin-top: 4px; }
.wb-card--featured { border-color: #071E56; border-width: 2px; }
.wb-badge { font-size: 12px; font-weight: 650; color: #3A4A66; background: #F2F5FB; padding: 4px 10px; border-radius: 999px; }
.wb-badge--live { background: #FFE3E3; color: #9B1C1C; }
.wb-badge--past { background: #E8F6ED; color: #1D6B37; }
.wb-badge--tbd { background: #FFF4CC; color: #8A6100; }
.wb-tbd { background: #FFF4CC; color: #8A6100; }
/* 16:9 without layout shift while the iframe loads. */
.video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #071E56; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* StreamYard On-Air, click-to-load. The poster fills the same 16:9 frame the
   iframe will take, so nothing shifts when the visitor starts the player. */
.wb-onair-poster { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 28px; text-align: center; color: #fff; background: radial-gradient(120% 90% at 50% 100%, #12307A 0%, #071E56 60%); }
/* Until the player is started the poster is in flow and carries the 16:9
   ratio itself. The frame hides overflow, and a fixed-ratio frame clipped
   the button on a 375px screen; an in-flow poster with a preferred ratio
   grows past 16:9 only when its content needs it. Once the iframe is in,
   the frame goes back to a strict 16:9 with the iframe absolutely placed. */
.wb-onair:not(.wb-onair--loaded) { aspect-ratio: auto; }
.wb-onair:not(.wb-onair--loaded) .wb-onair-poster { aspect-ratio: 16 / 9; }
.wb-onair-live { margin: 0 0 4px; }
.wb-onair-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.2; color: #fff; max-width: 24ch; }
.wb-onair-note { margin: 0 0 8px; font-size: 13px; color: rgba(255,255,255,.72); max-width: 40ch; }
.wb-onair-poster .btn { color: var(--color-navy); }
@media (max-width: 640px) {
  .wb-onair-poster { padding: 16px; gap: 8px; }
  .wb-onair-title { font-size: 18px; }
  .wb-onair-note { font-size: 12px; }
  .wb-onair-poster .btn--lg { padding: 14px 24px; font-size: 15px; }
}
.wb-speaker-ph { width: 56px; height: 56px; border-radius: 999px; flex: none; }
.wb-speaker-ph { background: #071E56; color: #E9FF4F; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 22px; }
.wb-speaker-note { display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #1D6B37; background: #E8F6ED; padding: 2px 8px; border-radius: 999px; }
.wb-transcript { margin-top: 20px; }
.wb-transcript p { margin: 0 0 14px; line-height: 1.7; color: #33415C; }
.wb-transcript b { color: #071E56; }

/* Session states. The hero's second column is the one slot that changes
   with state: the registration form card, or the live player with the
   question box, or the replay. Live and replay want the whole width, so
   the hero drops to one column (.wb-hero--wide, set at build time for the
   default state and toggled by main.js when the state changes). The
   blocks themselves are hidden with the hidden attribute; nothing here
   sets display on .wb-state, so hidden keeps working. */
.wb-slot { min-width: 0; }
.wb-hero--wide { grid-template-columns: 1fr; grid-template-areas: "head" "slot" "more"; }
.wb-state-badge { margin: 0 0 12px; }
.wb-state--wide .wb-live-row { margin-top: 28px; }
.wb-state--wide .wb-strip { margin-top: 28px; }
.wb-state--wide .wb-replay { margin: 28px auto 0; }
.wb-replay-transcript { max-width: 74ch; margin: 32px auto 0; }
.wb-about { background: #fff; border: 1px solid #E7E9F0; border-radius: 18px; padding: 24px; }
.wb-about-links { margin: 16px 0 0; font-size: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
.wb-about-links a { font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.wb-about-links span { color: #A3AEC2; }
/* ?state= override banner. Fixed, unmistakable, never on a real page. */
.wb-preview-banner { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 1000; background: #071E56; color: #E9FF4F; padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: 13px; letter-spacing: .02em; box-shadow: var(--shadow-pop); white-space: nowrap; }

/* Live state. Video full width, then the question box beside the session
   card, then one neutral strip. No commerce in the two-column row: the
   right column sits beside the guest expert on video, and adjacency reads
   as endorsement. */
.wb-live-video { max-width: 1040px; margin: 0 auto; }
.wb-live-row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; max-width: 1040px; margin: 0 auto; }
.wb-qa-card { background: #fff; border: 1px solid #E7E9F0; border-radius: 18px; padding: 24px; }
.wb-qa-card .wb-form-head p { margin-bottom: 18px; }
.wb-form .field textarea { width: 100%; min-height: 110px; }
.wb-opt { font-weight: 500; color: #78849B; }
.wb-about h3 { font-family: var(--font-display); font-size: 21px; margin: 0 0 4px; }
.wb-about > .muted { font-size: 14px; margin: 0 0 16px; }
.wb-about h4 { font-size: 16px; margin: 20px 0 8px; }
.wb-about-speakers { display: grid; gap: 12px; }
.wb-about-agenda { margin: 0; padding-left: 18px; }
.wb-about-agenda li { font-size: 14px; line-height: 1.5; color: #33415C; margin-bottom: 6px; }
/* The strip: persistent and neutral, never timed or prominent. Plain links
   with separators, no buttons, so it reads as site furniture. */
.wb-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; padding: 18px 24px; background: #fff; border: 1px solid #E7E9F0; border-radius: 14px; max-width: 1040px; margin: 0 auto; font-size: 15px; }
.wb-strip b { margin-right: 6px; }
.wb-strip a { font-weight: 650; color: #071E56; text-decoration: underline; text-underline-offset: 3px; }
.wb-strip a:hover { color: var(--color-lavender-cta); }
.wb-strip-sep { color: #A3AEC2; }

/* Replay state. Same latitude rules, a block instead of a strip. */
.wb-replay { max-width: 70ch; margin: 0 auto; padding: 32px; background: #fff; border: 1px solid #E7E9F0; border-radius: 18px; }
.wb-replay h2 { font-size: 26px; margin: 0 0 12px; }
.wb-replay p { color: #33415C; line-height: 1.6; margin: 0 0 12px; }
.wb-replay .hero-actions { margin-top: 20px; gap: 12px; }

/* Thank-you page, one per session (wb_thanks_body). Built out of the home
   hero's own pieces: .hero for the sky, .blob for the two shapes, .hero-badge
   for the pill, .hero-copy for the staggered rise, and the snapshot card's
   glass for the question card. What is here is only what differs. */

/* The sky behind the status line and the hero is one block. Nothing on it
   clips: the hero's top edge would slice the pink circle flat where it
   rises behind the status line, and the sky's bottom edge would cut off
   the open calendar menu. The circles sit in .wb-ty-bg, a layer the size
   of the sky that clips only them. */
.wb-ty-sky { position: relative; background: var(--color-sky); }
.wb-ty-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

/* Status line: brand lime, directly under the nav, above the circle. */
.wb-ty-status { position: relative; z-index: 3; padding-top: 6px; }
.wb-ty-status-in { display: flex; align-items: flex-start; gap: 11px; padding: 12px 16px; border-radius: 16px; background: var(--color-lime); font-size: 15px; line-height: 1.5; color: var(--color-navy); }
.wb-ty-status-in p { margin: 0; }
.wb-ty-status-ic { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 999px; background: #fff; display: inline-flex; align-items: center; justify-content: center; }
.wb-ty-status-ic svg { stroke-width: 3; }

.wb-ty-hero { padding: 40px 0 56px; overflow: visible; background: transparent; }
.wb-ty-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
/* Above the card: on a phone the open calendar menu drops over it, and the
   card (backdrop-filter, later in the DOM) would otherwise paint on top. */
.wb-ty-grid .hero-copy { position: relative; z-index: 2; }
.wb-ty-hero .hero-badge { margin-bottom: 16px; }
.wb-ty-dot { width: 8px; height: 8px; border-radius: 999px; background: #E5484D; display: inline-block; }
.wb-ty-hero h1 { margin-bottom: 16px; }
.wb-ty-hero .hero-sub { font-size: 18.5px; max-width: 44ch; margin-bottom: 0; }
/* z-index: every direct child of .hero-copy is a stacking context (the
   hero-rise animation keeps a translate on it), and the invite line comes
   after the actions in the DOM, so without this it painted over the open
   calendar menu. */
.wb-ty-hero .hero-actions { gap: 12px; margin-top: 22px; position: relative; z-index: 6; }
.wb-ty-invite { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.wb-ty-invite p { margin: 0; font-weight: 600; color: var(--color-navy); }
.wb-ty-invite .btn { gap: 8px; padding: 11px 18px; font-size: 15px; }
.steps--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px) { .steps--4 { grid-template-columns: repeat(2, 1fr); } }
.wb-ty-tbd { margin: 18px 0 0; font-weight: 600; color: var(--color-navy); max-width: 44ch; }
/* Same two shapes as the home hero, moved to frame the card instead of a
   figure: pink off the top right corner, lime under the card's left edge. */
/* top: the circle sits 21px inside the sky's top edge, more than the 14px
   it drifts up (hero-drift), so its curve is never sliced. */
.wb-ty-bg .blob-pink { width: 340px; height: 340px; right: -80px; top: 21px; opacity: .9; }
.wb-ty-bg .blob-lime { width: 220px; height: 220px; right: 180px; top: auto; bottom: -90px; }

/* Countdown. main.js binds to data-countdown, data-unit, .wb-count-cells,
   .wb-count-label and .wb-count-live. */
.wb-count { margin-top: 14px; }
.wb-count-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wb-count-cells { display: flex; gap: 10px; }
.wb-count-cell { min-width: 68px; padding: 10px 6px 9px; border-radius: 16px; text-align: center; background: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.wb-count-cell b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 27px; line-height: 1; color: var(--color-navy); font-variant-numeric: tabular-nums; }
.wb-count-cell span { display: block; margin-top: 5px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); }
.wb-count-live { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 18px; color: var(--color-navy); }
/* The hidden attribute loses to display:flex above without this. */
.wb-count-cells[hidden], .wb-count-live[hidden], .wb-count-label[hidden] { display: none; }

/* One add-to-calendar control. A <details>, so it opens without JavaScript. */
.wb-ty-cal { position: relative; }
.wb-ty-cal summary { list-style: none; cursor: pointer; user-select: none; }
.wb-ty-cal summary::-webkit-details-marker { display: none; }
.wb-ty-caret { width: 0; height: 0; margin-left: 2px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid currentColor; transition: transform .15s; }
.wb-ty-cal[open] .wb-ty-caret { transform: rotate(180deg); }
.wb-ty-cal-menu { position: absolute; z-index: 5; top: calc(100% + 8px); left: 0; min-width: 220px; padding: 8px; border-radius: 16px; background: #fff; box-shadow: 0 14px 34px rgba(7, 30, 86, .16); }
.wb-ty-cal-menu a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px; font-weight: 600; color: var(--color-navy); text-decoration: none; }
.wb-ty-cal-menu a:hover, .wb-ty-cal-menu a:focus-visible { background: var(--color-offwhite); }

/* The one-question card: the home snapshot card's glass, at card size. */
.wb-ty-card { position: relative; padding: 26px 26px 22px; border-radius: 20px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .85); box-shadow: 0 14px 34px rgba(7, 30, 86, .10); animation: hero-rise .7s ease-out .3s both; }
.wb-ty-card .tag { display: inline-block; font-weight: 800; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; padding: 6px 13px; border-radius: var(--radius-pill); margin-bottom: 13px; }
.wb-ty-card h2 { font-size: 26px; line-height: 1.15; margin: 0 0 14px; }
.wb-ty-q { font-family: var(--font-display); font-weight: 600; font-size: 18px; margin: 0 0 10px; color: var(--color-navy); }
.wb-ty-card .options { gap: 8px; margin: 0; }
.wb-ty-card .option { width: 100%; min-height: 48px; padding: 11px 14px; gap: 12px; border-width: 1.5px; border-radius: 14px; font-size: 15.5px; font-weight: 600; text-align: left; background: #fff; }
.wb-ty-card .option:hover { border-color: var(--color-navy); background: #fff; }
.wb-ty-card .option .dot { width: 16px; height: 16px; border-color: currentColor; opacity: .5; }
.wb-ty-card .option.selected { background: var(--color-lime); border-color: var(--color-lime); }
.wb-ty-card .option.selected .dot { opacity: 1; background: var(--color-navy); border-color: var(--color-navy); }
.wb-ty-card .option.selected .dot::after { width: 6px; height: 6px; background: var(--color-lime); }
.wb-ty-fine { margin: 14px 0 0; font-size: 12.5px; color: var(--color-muted); }

/* Program cards, on the off-white like the home "What brings you here?". */
.wb-ty-programs { padding: 60px 0 34px; }
.wb-ty-sec-head { margin-bottom: 26px; }
.wb-ty-sec-head .tag { display: inline-block; font-weight: 800; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; padding: 6px 13px; border-radius: var(--radius-pill); margin-bottom: 12px; }
.wb-ty-sec-head h2 { margin-bottom: 10px; }
.wb-ty-sec-head p { max-width: 62ch; margin: 0 auto; }
/* The registrant code where people choose a program: one line under the
   section head, and a small tag on the cards it applies to. */
.pm-code-line { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 12px; max-width: 760px; margin: 0 auto 26px; padding: 12px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--color-border); font-size: 14px; color: var(--color-navy); }
.pm-code-line-lead { font-weight: 700; }
.pm-code-line-value { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: .04em; color: var(--color-navy); user-select: all; }
.pm-code-line-copy { min-height: 40px; padding: 6px 16px; border: 0; border-radius: 999px; background: var(--color-lime); color: var(--color-navy); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.pm-code-line-copy:hover { filter: brightness(.96); }
.pm-code-line-terms { flex-basis: 100%; text-align: center; font-size: 12px; line-height: 1.45; color: var(--color-muted); }
/* On the thank-you program cards the tag sits on the same line across the
   row: the free space of each card goes above it (margin-top: auto), and
   the Explore button keeps a fixed distance below it. The HRT card has no
   tag, so its button takes the auto margin itself. */
.wb-ty-prog .pm-code-chip { margin-top: auto; margin-bottom: 0; }
.wb-ty-prog .pm-code-chip + .btn { margin-top: 12px; }
.pm-code-chip { align-self: flex-start; margin-bottom: 4px; padding: 4px 10px; border-radius: 999px; background: #F3FFB0; color: var(--color-navy); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 560px) {
  .pm-code-line { border-radius: 16px; padding: 12px 14px; }
}
.wb-ty-progs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.wb-ty-prog { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 20px; background: #fff; border: 2px solid var(--color-border); scroll-margin-top: 96px; transition: transform .25s, box-shadow .25s, border-color .25s, background .25s; }
.wb-ty-prog h3 { font-family: var(--font-display); font-size: 20px; line-height: 1.2; margin: 0; }
.wb-ty-prog p { font-size: 15px; margin: 0 0 4px; }
.wb-ty-prog ul { margin: 0 0 12px; padding-left: 1.1em; font-size: 14px; color: var(--color-muted); }
.wb-ty-prog li { margin: .25em 0; }
.wb-ty-prog .btn { margin-top: auto; justify-content: center; padding: 13px 16px; font-size: 15px; }
.wb-ty-fit { display: none; align-self: flex-start; margin-bottom: 2px; padding: 5px 12px; border-radius: 999px; background: var(--color-lime); color: var(--color-navy); font-weight: 800; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.wb-ty-prog.is-match { border-color: var(--color-sky); background: #EEF8FF; transform: translateY(-6px); box-shadow: 0 18px 40px rgba(142, 206, 253, .5); }
.wb-ty-prog.is-match .wb-ty-fit { display: inline-block; }
.wb-ty-prog.is-match .btn { background: var(--color-lime); border-color: var(--color-lime); }
.wb-ty-assure { display: flex; align-items: flex-start; gap: 10px; max-width: 720px; margin: 24px auto 0; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--color-border); font-size: 14.5px; }
.wb-ty-assure > span:first-child { flex: none; margin-top: 1px; }
.wb-ty-disc { padding-top: 10px; padding-bottom: 40px; }

/* Rows of the "About this session" card on the session page. */
.wb-thanks-rows { border-top: 1px solid #EDEFF4; }
.wb-thanks-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid #EDEFF4; font-size: 14px; }
.wb-thanks-row span { color: #5C6780; font-weight: 650; flex: none; }
.wb-thanks-row b { color: #071E56; text-align: right; }

@media (prefers-reduced-motion: reduce) {
  .wb-ty-card { animation: none; }
  .wb-ty-prog, .wb-ty-caret { transition: none; }
  .wb-ty-prog.is-match { transform: none; }
}
@media (max-width: 1000px) {
  .wb-ty-progs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .wb-ty-grid { grid-template-columns: 1fr; gap: 26px; }
  .wb-ty-bg .blob-pink { width: 220px; height: 220px; right: -90px; top: 80px; bottom: auto; transform: none; }
  .wb-ty-bg .blob-lime { display: none; }
}
@media (max-width: 560px) {
  .wb-ty-progs { grid-template-columns: 1fr; }
  .wb-ty-hero { padding: 26px 0 40px; }
  .wb-ty-hero .hero-sub { font-size: 17px; }
  .wb-ty-card { padding: 22px 18px 18px; }
  .wb-ty-card h2 { font-size: 23px; }
  .wb-count-cell { min-width: 0; flex: 1; }
  .wb-ty-hero .hero-actions .btn, .wb-ty-cal, .wb-ty-cal summary { width: 100%; justify-content: center; }
  .wb-ty-cal-menu { right: 0; }
}

@media (max-width: 900px) {
  .wb-live-row { grid-template-columns: 1fr; gap: 22px; }
  .wb-replay { padding: 24px; }
}
@media (max-width: 900px) {
  /* Form above the fold on mobile: the copy is long and burying the CTA
     underneath all of it costs registrations. */
  /* Mobile order: eyebrow and headline, then the form, then the rest. */
  .wb-hero { grid-template-columns: 1fr; grid-template-areas: "head" "slot" "more"; gap: 18px 0; }
  .wb-form-card { position: static; }
  .section--tight { padding-top: 34px; padding-bottom: 34px; }
}

/* LegitScript seal. Do NOT set width/height here - LegitScript requires the
   image render at its native 73x79 or it becomes unreadable. Layout only. */
.footer-seal { display: inline-flex; align-items: center; line-height: 0; }
.footer-seal img { display: block; }
.footer-legal-note { font-size: 12px; color: #6f83a8; margin-top: 18px; line-height: 1.6; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { background: linear-gradient(180deg, #8ECEFD 0%, #EAF6FF 100%); padding: 64px 0 56px; }
.page-hero h1 { font-size: 56px; color: var(--color-navy); }
.page-hero .lead { margin-top: 8px; }
.breadcrumb { font-size: 13px; font-weight: 700; color: var(--color-muted); margin-bottom: 16px; }
.breadcrumb a:hover { color: var(--color-lavender-cta); }

/* ---------- Prose (blog/legal) ---------- */
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { font-size: 30px; margin-top: 1.4em; }
.prose h3 { font-size: 22px; font-family: var(--font-body); font-weight: 800; margin-top: 1.4em; }
.prose p, .prose li { font-size: 17px; color: #243a6b; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 1.2em; display: flex; flex-direction: column; gap: 8px; }
.prose a { color: var(--color-lavender-cta); font-weight: 700; text-decoration: underline; }
.prose blockquote { border-left: 4px solid var(--color-lavender); background: var(--color-lavender-bg); margin: 1.4em 0; padding: 18px 24px; border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.callout { background: var(--color-lavender-bg); border-radius: var(--radius-md); padding: 20px 24px; font-size: 15px; margin: 24px 0; }
.callout b { color: var(--color-navy); }

/* ---------- FAQ ---------- */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-q { width: 100%; text-align: left; background: none; border: none; padding: 22px 4px; font-family: var(--font-body); font-weight: 800; font-size: 18px; color: var(--color-navy); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq-q .plus { flex: none; width: 26px; height: 26px; border-radius: 999px; background: var(--color-lavender-bg); display: flex; align-items: center; justify-content: center; transition: transform .2s; font-size: 18px; }
.faq-item.open .faq-q .plus { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a-inner { padding: 0 4px 22px; color: var(--color-muted); font-size: 16px; }
.faq-group-title { font-size: 22px; margin: 40px 0 8px; }

/* ---------- Quiz ---------- */
.quiz-wrap { max-width: 640px; margin: 0 auto; }
.quiz-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-bar); padding: 40px; }
.progress { height: 8px; background: var(--color-border); border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
.progress-fill { height: 100%; background: var(--color-lavender-cta); width: 0; transition: width .35s ease; border-radius: 999px; }
.progress-label { font-size: 13px; font-weight: 700; color: var(--color-muted); margin-bottom: 28px; }
.quiz-step { display: none; animation: fade .35s ease; }
.quiz-step.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.quiz-step h2 { font-size: 28px; }
.quiz-step .help { color: var(--color-muted); font-size: 15px; margin-bottom: 24px; }
.options { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.option {
  width: 100%; text-align: left; background: #fff; border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md); padding: 18px 20px; font-weight: 700; font-size: 16px; color: var(--color-navy);
  display: flex; align-items: center; gap: 14px; transition: .15s;
}
.option:hover { border-color: var(--color-lavender-cta); background: #faf7ff; }
.option.selected { border-color: var(--color-lavender-cta); background: var(--color-lavender-bg); }
.option .dot { width: 22px; height: 22px; border-radius: 999px; border: 2px solid var(--color-border); flex: none; display:flex; align-items:center; justify-content:center; }
.option.selected .dot { border-color: var(--color-lavender-cta); background: var(--color-lavender-cta); }
.option.selected .dot::after { content: ""; width: 8px; height: 8px; border-radius: 999px; background: #fff; }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 800; font-size: 14px; margin-bottom: 6px; }
.field input, .field select {
  width: 100%; padding: 15px 16px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: 16px; color: var(--color-navy); background:#fff;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--color-lavender-cta); }
.quiz-nav { display: flex; justify-content: space-between; margin-top: 26px; gap: 12px; }
.quiz-back { background: none; border: none; color: var(--color-muted); font-weight: 700; font-size: 15px; padding: 12px; }
.quiz-back:hover { color: var(--color-navy); }
.quiz-result { text-align: center; }
.result-score { width: 150px; height: 150px; border-radius: 999px; margin: 0 auto 22px; display:flex; flex-direction: column; align-items:center; justify-content:center; background: conic-gradient(var(--color-lavender-cta) var(--deg,260deg), var(--color-border) 0); }
.result-score .inner { width: 122px; height: 122px; background:#fff; border-radius:999px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.result-score .num { font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 1; color: var(--color-navy); }
.result-score .lbl { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--color-muted); text-transform: uppercase; }
.disclaimer { font-size: 12px; color: var(--color-muted); text-align:center; margin-top: 20px; }

/* ---------- Misc components ---------- */
.pill-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 8px 16px; font-size: 13px; font-weight: 700; }
.stat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.stat { background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: 28px; text-align:center; box-shadow: var(--shadow-card); }
.stat .big { font-family: var(--font-display); font-weight: 700; font-size: 40px; color: var(--color-lavender-cta); letter-spacing:-.03em; }
.stat .lbl { font-size: 14px; color: var(--color-muted); }
.reviewer-card { display:flex; gap: 22px; align-items:center; background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-card); }
.reviewer-avatar { width: 86px; height: 86px; border-radius:999px; flex:none; background: linear-gradient(150deg, var(--color-lavender) 0%, var(--color-pink) 100%); display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:700; font-size: 30px; color:#fff; }
.note-banner { background: var(--color-lavender-bg); border-radius: var(--radius-md); padding: 16px 22px; font-size: 14px; display:flex; gap:12px; align-items:flex-start; }
.blog-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.blog-card { display:flex; flex-direction:column; overflow:hidden; }
.blog-card .thumb { height: 160px; border-radius: var(--radius-md); margin-bottom: 18px; }
.blog-card h3 { font-size: 20px; }
.blog-card .meta { font-size: 12px; font-weight: 700; color: var(--color-muted); text-transform: uppercase; letter-spacing:.06em; margin-bottom: 10px; }
.blog-card p { font-size: 14px; color: var(--color-muted); }
.blog-card a.more { margin-top: auto; font-weight: 800; font-size: 14px; color: var(--color-lavender-cta); }
.form-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(120%); background: var(--color-navy); color:#fff; padding: 14px 22px; border-radius: var(--radius-pill); font-weight:700; font-size:14px; box-shadow: var(--shadow-pop); z-index: 300; transition: transform .3s; }
.toast.show { transform: translateX(-50%) translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero h1 { font-size: 54px; }
  /* narrower visual column - pull the lime blob in so it clears the headline */
  .blob-lime { width: 200px; height: 200px; right: 200px; top: 250px; }
  .blob-pink { width: 300px; height: 360px; right: 80px; }
  .hero-photo { right: 70px; width: 380px; height: 362px; bottom: -60px; }
  .benefit-grid { grid-template-columns: repeat(3, 1fr); row-gap: 30px; }
  .steps { grid-template-columns: repeat(3,1fr); row-gap: 30px; }
  .steps::before { display: none; }
  .footer-top { grid-template-columns: 1fr 1fr; row-gap: 30px; }
  .commitment { grid-template-columns: 1fr; text-align: left; }
}
@media (max-width: 880px) {
  :root { --gutter: 22px; }
  .nav-links, .nav-cta .btn { display: none; }
  .nav-toggle { display: block; }
  .hero-grid { grid-template-columns: 1fr; }
  /* Between 480 and 880 the visual is one centred column. The Care Snapshot
     card sits in flow ABOVE the figure instead of floating over her face,
     and the figure and blobs anchor into the bottom padding. */
  .hero-visual { min-height: 0; margin-top: 10px; padding-bottom: 300px; }
  .snapshot-card { position: static; width: 100%; max-width: 360px; margin: 0 auto; }
  .hero-photo { right: 50%; transform: translateX(50%); width: 360px; height: 343px; bottom: -60px; }
  .blob-pink { width: 260px; height: 300px; right: 50%; top: auto; bottom: 10px; transform: translateX(50%) translateX(14px); }
  .blob-lime { width: 190px; height: 190px; right: 50%; top: auto; bottom: -10px; transform: translateX(50%) translateX(-90px); }
  .hero h1 { font-size: 48px; }
  .hero-sub { font-size: 18px; }
  .section { padding: 56px 0; }
  .section h2 { font-size: 30px; }
  .page-hero h1 { font-size: 40px; }
  .trust-bar { grid-template-columns: 1fr 1fr; gap: 18px; }
  .trust-item { border-left: none !important; }
  .cards-3, .cards-2, .price-grid, .blog-grid, .stat-grid, .form-grid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: 24px; }
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .price-card.featured { order: -1; }
}
@media (max-width: 480px) {
  .hero h1 { font-size: 40px; }
  .benefit-grid { grid-template-columns: 1fr 1fr; }
  .quiz-card { padding: 26px 20px; }
  .snapshot-card { display: none; }
  .blob-pink { width: 230px; height: 290px; right: 50%; transform: translateX(50%) translateX(14px); top: 60px; }
  .blob-lime { width: 190px; height: 190px; right: 50%; transform: translateX(50%) translateX(-6px); bottom: 20px; }
  .hero-visual { min-height: 300px; }
  .hero-photo { width: 260px; height: 248px; right: 50%; transform: translateX(50%); bottom: -60px; }
}

/* =========================================================================
   PROGRAMS — router, program hero, product cards
   Added 08.05.26 when the four LaunchPad programs became real pages.
   ========================================================================= */

/* ---- homepage router ---- */
.router-section { background: linear-gradient(180deg, #FFFFFF 0%, var(--color-offwhite) 100%); }
.router-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.router-card {
  display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-lg);
  border: 1px solid var(--color-border); overflow: hidden; box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.router-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); border-color: var(--rc); }
.router-media {
  background: color-mix(in srgb, var(--rc) 26%, #fff);
  height: 168px; display: flex; align-items: center; justify-content: center; padding: 18px;
}
/* The product render sits in a fixed-height box. Sized in px, not as a
   percentage: the image is inside a <picture>, and a percentage height there
   has nothing definite to resolve against in Safari, so the 500px render
   spilled out over the card copy on iPhones. Same for .product-media. */
.router-media picture, .product-media picture { display: flex; align-items: center; justify-content: center; height: 100%; max-width: 100%; }
.router-media img { display: block; width: auto; height: auto; max-height: 132px; max-width: 100%; }
.router-copy { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.router-goal { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--color-navy); line-height: 1.15; }
.router-prog { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.router-sub { font-size: 14px; color: var(--color-muted); margin-top: 2px; }
.router-go { margin-top: auto; padding-top: 14px; font-weight: 800; font-size: 14px; color: var(--color-navy); }
.router-card:hover .router-go .arrow { transform: translateX(4px); }

/* ---- program page hero ---- */
.prog-hero { background: linear-gradient(180deg, var(--color-sky) 0%, #DCF0FF 62%, var(--color-offwhite) 100%); padding: 20px 0 64px; }
.prog-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; margin-top: 18px; }
.prog-hero h1 { font-size: 54px; line-height: 1.02; margin: 14px 0 16px; }
.prog-bestfor {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 20px;
  background: rgba(255,255,255,.72); border-radius: var(--radius-md); padding: 14px 18px;
  font-size: 15px; font-weight: 600; color: var(--color-navy); max-width: 540px;
}
.prog-hero-art { position: relative; display: flex; align-items: center; justify-content: center; min-height: 320px; }
.prog-hero-blob { position: absolute; width: 300px; height: 300px; border-radius: 999px; opacity: .55; }
.prog-hero-art img { position: relative; width: 300px; height: auto; object-fit: contain;
  filter: drop-shadow(0 22px 40px rgba(7,30,86,.18)); }

/* ---- program switcher strip ---- */
.prog-strip { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.prog-chip {
  display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-pill);
  font-weight: 700; font-size: 14.5px; color: var(--color-navy); background: #fff;
  transition: border-color .15s ease, transform .15s ease;
}
.prog-chip:hover { border-color: var(--color-navy); transform: translateY(-1px); }
.prog-chip.is-current { background: var(--color-navy); color: #fff; border-color: var(--color-navy); }
.prog-chip .dot { width: 9px; height: 9px; border-radius: 999px; flex: none; }

/* ---- product cards ---- */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 38px; }
.product-card {
  display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-lg);
  border: 1px solid var(--color-border); overflow: hidden; box-shadow: var(--shadow-card);
}
.product-media { height: 200px; display: flex; align-items: center; justify-content: center; padding: 22px; }
.product-media img { display: block; width: auto; height: auto; max-height: 156px; max-width: 100%; }
.product-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.product-card h3 { font-size: 19px; font-family: var(--font-display); margin: 10px 0 4px; }
.product-dose { font-size: 14px; color: var(--color-muted); margin-bottom: 14px; }
.product-benefits { font-size: 14px; }
.product-ingredients { font-size: 13px; color: var(--color-muted); margin: 16px 0 0; line-height: 1.5; }
.product-ingredients b { color: var(--color-navy); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.product-foot { margin-top: auto; padding-top: 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.product-from { display: block; font-size: 12px; font-weight: 700; color: var(--color-muted); }
.product-price { font-size: 26px; font-weight: 800; color: var(--color-navy); line-height: 1.1; }
.product-per { display: block; font-size: 12px; color: var(--color-muted); }
.maxw-760 { max-width: 760px; margin: 0 auto; }

@media (max-width: 1024px) {
  .router-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .prog-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .prog-hero h1 { font-size: 42px; }
  .prog-hero-art { min-height: 240px; }
  .prog-hero-art img, .prog-hero-blob { width: 230px; height: auto; }
  .prog-hero-blob { height: 230px; }
}
@media (max-width: 640px) {
  .router-grid, .product-grid { grid-template-columns: 1fr; }
  .prog-hero h1 { font-size: 34px; }
  .product-foot { flex-direction: column; align-items: stretch; }
  .product-foot .btn { width: 100%; }
}

/* ---- nav dropdown for Programs ---- */
.nav-links .has-sub { position: relative; }
.nav-links .has-sub > a { display: inline-flex; align-items: center; gap: 5px; }
.nav-links .caret { font-size: 10px; opacity: .6; transition: transform .15s ease; }
.nav-links .has-sub:hover .caret { transform: rotate(180deg); }
.subnav {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 268px; background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-pop); padding: 8px;
  list-style: none; opacity: 0; visibility: hidden; transition: opacity .15s ease, transform .15s ease;
  z-index: 120;
}
.nav-links .has-sub:hover .subnav,
.nav-links .has-sub:focus-within .subnav { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.subnav::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.subnav li a {
  display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 10px;
  font-size: 14.5px; font-weight: 700; color: var(--color-navy); white-space: nowrap;
}
.subnav li a:hover { background: var(--color-offwhite); color: var(--color-navy); }
.subnav .dot { width: 9px; height: 9px; border-radius: 999px; flex: none; }
.subnav-all { border-top: 1px solid var(--color-border); margin-top: 6px; padding-top: 4px; }
.subnav-all a { font-size: 13.5px; color: var(--color-muted) !important; }
.mobile-drawer .drawer-sub { padding-left: 20px; font-size: 14.5px; font-weight: 600; color: var(--color-muted); }

/* ---- four-program price grid ---- */
.price-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }
.prog-price { display: flex; flex-direction: column; }
.prog-price-head { display: flex; align-items: center; gap: 13px; margin-bottom: 12px; }
.prog-price-head h3 { font-family: var(--font-body); font-weight: 800; font-size: 17px; margin: 0; line-height: 1.2; }
.prog-price .price-desc { min-height: 42px; }
.prog-price .feature-list { font-size: 14px; }
.prog-price .actions { margin-top: auto; padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 1100px) { .price-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .price-grid--4 { grid-template-columns: 1fr; } }

/* ---- quiz result: program match ---- */
.result-badge {
  display: inline-block; padding: 9px 20px; border-radius: var(--radius-pill);
  font-family: var(--font-body); font-weight: 800; font-size: 15px;
  color: var(--color-navy); margin-bottom: 18px;
}
.result-alt { font-size: 14.5px; color: var(--color-muted); margin: 16px 0 22px; }
.result-alt a { font-weight: 800; }

/* ============================================================
   ADDED 08.06.26 — portal nav entry, FAQ index, price table,
   accessibility skip link.
   ============================================================ */

/* Skip link: keyboard users land on it first, sighted users never see it.
   Also a small accessibility signal search engines read. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--color-navy); color: #fff; padding: 12px 18px;
  border-radius: 0 0 10px 0; font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* Patient portal entry in the primary nav. LegitScript expects a reviewer to
   find the portal login without hunting; this is the same "My Portal" pattern
   the OpenLoop-built storefront uses. */
.nav-portal {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: 15px; color: var(--color-navy);
  padding: 10px 14px; border-radius: 999px; text-decoration: none;
  border: 1.5px solid rgba(7,30,86,.22); background: rgba(255,255,255,.55);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
  white-space: nowrap;
}
.nav-portal svg { display: block; }
.nav-portal:hover { background: #fff; border-color: rgba(7,30,86,.45); transform: translateY(-1px); }
.nav-portal:focus-visible { outline: 3px solid var(--color-navy); outline-offset: 2px; }
.site-footer .socials a { display: inline-flex; }

/* FAQ page: jump index across the seven groups. */
.faq-jumps { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.faq-jump {
  font-size: 14px; font-weight: 700; text-decoration: none;
  color: var(--color-navy); background: #fff; border: 1.5px solid var(--color-border);
  border-radius: 999px; padding: 8px 14px; transition: border-color .18s ease, transform .18s ease;
}
.faq-jump:hover { border-color: var(--color-navy); transform: translateY(-1px); }
.faq-group-title { scroll-margin-top: 96px; }
.maxw-860 { max-width: 860px; margin: 0 auto; }
.tag--sky { background: var(--color-sky); color: var(--color-navy); }

/* Pricing: the full 18-medication table. */
.ptable-wrap { overflow-x: auto; margin-top: 34px; border-radius: 16px; border: 1px solid var(--color-border); background: #fff; }
.ptable { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 640px; }
.ptable th {
  text-align: left; padding: 14px 18px; font-size: 13px; letter-spacing: .04em;
  text-transform: uppercase; color: #506079; border-bottom: 2px solid var(--color-border);
  background: #FBFCFE;
}
.ptable td { padding: 15px 18px; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.ptable tr:last-child td { border-bottom: 0; }
.ptable-head td {
  background: #F6F8FC; font-family: var(--font-body); font-weight: 800; font-size: 17px;
  padding-top: 20px; padding-bottom: 14px;
}
.ptable-head a { color: var(--color-navy); text-decoration: none; }
.ptable-head a:hover { text-decoration: underline; }
.ptable-head .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 9px; }
.ptable-sub { display: block; font-size: 13px; color: #506079; margin-top: 3px; font-weight: 400; }
.ptable-price { font-weight: 800; white-space: nowrap; }
.ptable-per { display: block; font-size: 12px; color: #506079; font-weight: 400; }

@media (max-width: 980px) {
  .nav-portal { display: none; }
}

/* Inline links inside lead paragraphs were visually indistinguishable from
   body copy, which hides real navigation from readers and crawlers alike. */
.lead a, .faq-a-inner a, .footer-about a {
  color: var(--color-lavender-cta); font-weight: 700;
  text-decoration: underline; text-underline-offset: 2px;
}
.lead a:hover, .faq-a-inner a:hover { color: var(--color-navy); }

/* Program pages: the chip strip and the program note used to be two separate
   88px-padded sections directly under the hero. One tighter band instead. */
.prog-band { padding: 34px 0 42px; background: var(--color-offwhite); }
.prog-band .prog-strip { margin-bottom: 0; }
.prog-hero { padding-bottom: 48px; }
.prog-band + .section--offwhite { padding-top: 56px; }

/* Price cards: "from" prefix when a program has more than one price. */
.price-from {
  display: inline-block; font-family: var(--font-body); font-size: 14px;
  font-weight: 700; color: #506079; margin-right: 6px; vertical-align: middle;
}

/* Contact page routes */
.contact-routes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.contact-route {
  display: flex; gap: 15px; align-items: flex-start; text-decoration: none;
  background: #fff; border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  padding: 22px; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.contact-route:hover { border-color: var(--rc, var(--color-navy)); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(7,30,86,.08); }
.contact-route b { display: block; color: var(--color-navy); font-size: 17px; margin-bottom: 6px; }
.contact-route .muted { display: block; font-size: 14px; line-height: 1.55; }
.contact-go { display: inline-block; margin-top: 12px; font-weight: 700; font-size: 14px; color: var(--color-navy); }
.contact-route:hover .contact-go .arrow { transform: translateX(3px); }

.contact-direct { margin-top: 30px; }
.contact-direct h3 { font-family: var(--font-display); font-size: 20px; margin-bottom: 14px; }
.contact-emails { list-style: none; padding: 0; margin: 0 0 20px; }
.contact-emails li { padding: 14px 0; border-bottom: 1px solid var(--color-border); }
.contact-emails li:last-child { border-bottom: 0; }
.contact-emails b { display: block; font-size: 15px; color: var(--color-navy); }
.contact-emails a { display: block; font-weight: 700; margin: 2px 0 3px; }
.contact-emails .muted { font-size: 14px; }

.field textarea {
  width: 100%; border: 1.5px solid var(--color-border); border-radius: 12px;
  padding: 13px 15px; font: inherit; font-size: 16px; color: var(--color-navy);
  background: #fff; resize: vertical; min-height: 120px;
}
.field textarea:focus { outline: none; border-color: var(--color-navy); }

@media (max-width: 900px) {
  .contact-routes { grid-template-columns: 1fr; }
}

@media (max-width: 1180px) and (min-width: 861px) {
  .footer-top { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .footer-top > div:first-child { grid-column: 1 / -1; max-width: 460px; }
}
/* Contact page: the emergency notice sat a full section-gap below a short form. */
.contact-emergency { padding: 12px 0 72px; }

/* Price cards lost their bullet list (it read as filler). Keep margin-top:auto
   on .actions so the buttons still bottom-align across all four cards, and give
   the kicker a min-height so the prices line up on the same row too. */
.prog-price .price-desc { min-height: 42px; margin-bottom: 0; }
.prog-price .price-amount { margin: 18px 0 26px; }

/* Legal pages: cross-document index at the foot of every policy. */
.legal-index { list-style: none; padding: 0; margin: 0 0 26px; columns: 2; column-gap: 32px; }
.legal-index li { break-inside: avoid; padding: 6px 0; font-size: 15px; }
@media (max-width: 720px) { .legal-index { columns: 1; } }

/* REGRESSION FIX 08.07.26 — the 5-step process strip overflowed on mobile.
   When the dotted-line alignment was fixed, the base rule became
   `grid-auto-flow: column`. That places items into IMPLICIT columns, so the
   existing `grid-template-columns` overrides in the media queries had no
   effect: five items still produced five columns and pushed the page to 448px
   wide on a 390px viewport. Resetting the flow to row is what those breakpoints
   actually needed. */
@media (max-width: 1024px) {
  .steps { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 880px) {
  .steps { grid-auto-flow: row; grid-template-columns: 1fr; }
}
/* The homepage trust bar was 4px over on small screens. */
@media (max-width: 480px) {
  .trust-item { min-width: 0; }
}

/* ============================================================
   MOBILE PASS 08.07.26
   ============================================================ */

/* The 18-medication price table forced a sideways scroll on phones.
   Restack it as one card per medication instead. Headers become inline
   labels via data-label so nobody loses the column meaning. */
@media (max-width: 720px) {
  .ptable-wrap { overflow-x: visible; border: 0; background: none; }
  .ptable { min-width: 0; }
  .ptable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ptable tbody, .ptable tr, .ptable td { display: block; width: 100%; }
  .ptable tr {
    background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md);
    margin-bottom: 14px; padding: 4px 2px; overflow: hidden;
  }
  .ptable td { border-bottom: 1px solid var(--color-border); padding: 11px 16px; display: flex;
               justify-content: space-between; align-items: baseline; gap: 16px; text-align: right; }
  .ptable td:last-child { border-bottom: 0; }
  .ptable td::before {
    content: attr(data-label); font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
    color: #506079; font-weight: 800; text-align: left; flex: none;
  }
  .ptable td > b, .ptable td .ptable-sub { text-align: right; }
  .ptable-sub { display: block; }
  .ptable-price { font-size: 18px; }
  .ptable-per { display: inline; font-size: 12px; margin-left: 6px; }
  /* Program header rows stay full-width banners rather than becoming cards. */
  .ptable tr.ptable-head { background: #F6F8FC; border-color: transparent; margin: 22px 0 12px; padding: 0; }
  .ptable tr.ptable-head td { display: block; text-align: left; border: 0; padding: 14px 16px; }
  .ptable tr.ptable-head td::before { content: none; }
}

/* Footer links were 19px tall, well under the 44px touch-target guidance, and
   stacked 10px apart. Easy to hit the wrong one on a phone. */
@media (max-width: 880px) {
  .footer-col ul { gap: 2px; }
  .footer-col a { display: block; padding: 11px 0; font-size: 15px; }
  .site-footer .socials a { padding: 10px; }
  .footer-top { row-gap: 8px; }
}
/* Ingredients were sitting beside the medication name instead of under it. */
@media (max-width: 720px) {
  .ptable td { flex-wrap: wrap; }
  .ptable td > b { flex: 1 1 auto; }
  .ptable .ptable-sub { flex: 0 0 100%; text-align: right; margin-top: 2px; }
  .ptable td.ptable-price { align-items: baseline; }
}