/* ============================================================
   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; }
.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; }
.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-grid--4 { grid-template-columns: repeat(4, 1fr); }
/* Session card: a pastel band (one colour per session, --wc) with the icon,
   number and state; the body below with the title, date, faces and button. */
.wb-card { display: flex; flex-direction: column; border-radius: 20px; background: #fff; border: 1px solid #E7E9F0; overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--shadow-card); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.wb-card:hover { border-color: var(--wc, #071E56); transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.wb-card--featured { border-color: var(--color-navy); }
.wb-card-band { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: color-mix(in srgb, var(--wc, #BFE5FF) 55%, #fff); }
.wb-card-n { flex: 1; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--color-navy); }
.wb-num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; background: #fff; flex: none; }
.wb-card-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 20px; flex: 1; }
.wb-card h3 { font-family: var(--font-display); font-size: 20px; line-height: 1.25; margin: 0; }
.wb-card p { color: #5C6780; font-size: 14px; line-height: 1.55; margin: 0; }
.wb-card-when { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--color-navy); }
.wb-card-faces { display: flex; margin-top: 2px; }
.wb-card-faces img, .wb-card-faces .wb-speaker-ph { width: 30px; height: 30px; border-radius: 999px; border: 2px solid #fff; margin-left: -8px; object-fit: cover; object-position: top; box-shadow: 0 2px 6px rgba(7, 30, 86, .12); }
.wb-card-faces > :first-child { margin-left: 0; }
.wb-card-faces .wb-speaker-ph { font-size: 13px; }
.wb-card .wb-cta { margin-top: auto; justify-content: center; padding: 11px 16px; font-size: 14.5px; }
.wb-badge--next { background: var(--color-lime); color: var(--color-navy); }
/* Hub hero: short, the copy and the orbs, nothing else. */
.wb-hub-hero { position: relative; overflow: hidden; padding-top: 24px; padding-bottom: 26px; }
.wb-hub-row { display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap; margin-top: 14px; }
.wb-hub-row .wb-share { margin-top: 0; }
.wb-hub-hero .container { position: relative; }
.wb-hub-hero .wb-orb { z-index: 0; }
.wb-hub-hero .wb-orb--lav { width: 300px; height: 300px; right: -60px; top: -120px; }
.wb-hub-hero .wb-orb--pink { width: 260px; height: 260px; left: auto; right: 180px; bottom: -190px; }
.wb-hub-copy { position: relative; z-index: 1; }
.wb-hub-copy h1 { font-size: 46px; margin: 6px 0 8px; display: flex; align-items: center; gap: 14px; }
.wb-hub-mic { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; flex: none; border-radius: 999px; background: var(--color-lime); box-shadow: 0 8px 20px rgba(7, 30, 86, .12); }
.wb-hub-copy .lead { max-width: 72ch; }
.wb-sec-head--center { margin-left: auto; margin-right: auto; }
.wb-sec-head .tag { display: inline-block; font-weight: 800; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; padding: 6px 13px; border-radius: 999px; }
@media (max-width: 1024px) { .wb-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 880px) { .wb-hub-copy h1 { font-size: 36px; gap: 10px; align-items: flex-start; } .wb-hub-mic { width: 42px; height: 42px; margin-top: 2px; } }
@media (max-width: 640px) { .wb-grid--4 { grid-template-columns: 1fr; } }
.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-replay-transcript { max-width: 78ch; margin: 24px 0 0; background: #fff; border: 1px solid #E7E9F0; border-radius: 18px; padding: 0; }
.wb-replay-transcript summary { list-style: none; cursor: pointer; padding: 22px 26px; }
.wb-replay-transcript summary::-webkit-details-marker { display: none; }
.wb-transcript-k { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #5C6780; margin-bottom: 4px; }
.wb-replay-transcript summary h2 { font-size: 22px; margin: 0 0 4px; }
.wb-transcript-hint { font-size: 14px; color: #5C6780; }
.wb-replay-transcript[open] .wb-transcript-hint { display: none; }
.wb-replay-transcript .wb-transcript { margin: 0; padding: 0 26px 26px; }
.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: the stage grid again (video, hosts strip and share row on
   the left, the fit card on the right), see .wb-stage-*. */

/* 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; }
/* scroll-margin: the sticky header. */
.wb-ty-sec-head { margin-bottom: 26px; scroll-margin-top: 92px; }
.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; }
  /* The picked program moves up under the heading, so the answer and the
     card it points at are on screen together. */
  .wb-ty-prog.is-match { order: -1; }
  .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; }
}

/* ---- Session page: the stage (starting soon and live) ----------------------
   One screen on a desktop: a slim title line, the framed player at two
   thirds, the host strip under it, and a side column with the question box
   and the offer. Everything else on the page sits below the fold. Markup:
   build.py, wb_stage_block. */
.wb-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-stage="soon"] [data-stage-only="live"], [data-stage="live"] [data-stage-only="soon"] { display: none !important; }

/* The hero in stage mode: the big headline is kept for assistive tech and
   search but not shown; the block's own slim title stands in. */
/* .wb-hero--slim: the same slim title line for the ended state, without
   the stage's full-height slot. */
.wb-hero--stage, .wb-hero--slim { gap: 0; margin-top: 0; }
.wb-hero--stage .wb-hero-head, .wb-hero--slim .wb-hero-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.wb-hero--stage .wb-slot > .wb-orb, .wb-hero--slim .wb-slot > .wb-orb { display: none; }
.wb-page-hero:has(.wb-hero--stage), .wb-page-hero:has(.wb-hero--slim) { padding-top: 14px; }
.wb-hero--stage .wb-hero-more, .wb-hero--slim .wb-hero-more { margin-top: 22px; }
/* Starting soon, live and ended: the hook paragraphs, the date line and
   the duration / Q&A pills are the registration pitch; only the share
   row stays (the card's Share button targets it). */
.wb-hero--stage .wb-hook, .wb-hero--slim .wb-hook,
.wb-hero--stage .wb-when-row, .wb-hero--slim .wb-when-row,
.wb-hero--stage .wb-meta-row .pill, .wb-hero--slim .wb-meta-row .pill { display: none; }
.wb-hero--stage .wb-meta-row .wb-share, .wb-hero--slim .wb-meta-row .wb-share { margin: 0; padding-left: 0; border-left: 0; }
/* On the stage the share row is moved under the hosts strip (main.js), so
   the "more" block has nothing left to show. */
.wb-hero--stage .wb-hero-more { display: none; }
.wb-stage-share:empty { display: none; }
.wb-stage-share .wb-share { margin: 2px 0 0 4px; }

.wb-stage-title { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; min-width: 0; }
.wb-stage-title .wb-badge { flex: none; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 5px 12px; }
.wb-stage-title .wb-badge--live::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #D92D20; vertical-align: 1px; animation: wb-pulse 1.6s ease-in-out infinite; }
@keyframes wb-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .wb-stage-title .wb-badge--live::before, .wb-frame-live::before { animation: none; } }
.wb-stage-name { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.2; color: var(--color-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.wb-stage-grid { display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.wb-stage-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.wb-stage-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* The frame: thick white border, rounded, soft shadow. */
.wb-frame { background: #fff; padding: 8px; border-radius: 24px; box-shadow: 0 18px 44px rgba(7, 30, 86, .18), 0 2px 6px rgba(7, 30, 86, .08); }
.wb-screen { position: relative; aspect-ratio: 16 / 9; border-radius: 17px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; color: #fff; background: radial-gradient(120% 90% at 50% 100%, #14308A 0%, #071E56 62%); }
.wb-frame--playing .wb-screen { padding: 0; display: block; background: #000; }
.wb-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wb-frame-live { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: #D92D20; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.wb-frame-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: wb-pulse 1.6s ease-in-out infinite; }
.wb-screen-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.2; color: #fff; max-width: 22ch; }
.wb-screen-soon h2 { margin: 0 0 4px; font-size: 28px; color: #fff; }
.wb-screen-local { margin: 0; min-height: 0; font-size: 15px; font-weight: 700; color: var(--color-lime); }
.wb-screen-local:empty { display: none; }
.wb-screen .wb-count { margin-top: 14px; }
.wb-screen .wb-count-cells { justify-content: center; }
.wb-screen .wb-count-cell { min-width: 78px; background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: none; backdrop-filter: none; }
.wb-screen .wb-count-cell b { color: #fff; font-size: 30px; }
.wb-screen .wb-count-cell span { color: rgba(255, 255, 255, .7); }
.wb-screen .wb-count-live { justify-content: center; color: #fff; }

/* The email step, inside the frame. */
.wb-gate { width: 100%; max-width: 460px; }
.wb-gate-lead { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: #fff; }
.wb-gate-row { display: flex; gap: 8px; }
.wb-gate-row input { flex: 1; min-width: 0; height: 50px; padding: 0 18px; border: 0; border-radius: 999px; font: inherit; font-size: 16px; color: var(--color-navy); background: #fff; }
.wb-gate-row input:focus-visible { outline: 3px solid var(--color-lime); outline-offset: 2px; }
.wb-gate-row .btn { flex: none; min-height: 50px; padding: 0 22px; white-space: nowrap; }
.wb-gate .btn { color: var(--color-navy); }
.wb-gate-err { margin: 10px 0 0; font-size: 14px; font-weight: 700; color: #FFD0CC; }
.wb-gate-in { margin: 10px 0 0; font-size: 15px; font-weight: 700; color: #fff; }
.wb-gate-note { margin: 10px 0 0; font-size: 12px; color: rgba(255, 255, 255, .6); }
.wb-gate [hidden] { display: none; }

/* Hosted by: thin strip under the frame. */
.wb-hosts { display: flex; align-items: center; gap: 12px; padding: 9px 16px; background: rgba(255, 255, 255, .78); border-radius: 16px; }
.wb-hosts-logo { width: 30px; height: 30px; border-radius: 8px; flex: none; }
.wb-hosts p { margin: 0; flex: 1; min-width: 0; font-size: 15px; color: var(--color-navy); }
.wb-hosts-faces { display: flex; flex: none; }
.wb-hosts-face { display: block; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; border: 2px solid #fff; background: #DDEAF5; margin-left: -8px; }
.wb-hosts-face:first-child { margin-left: 0; }
.wb-hosts-face img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* "Having trouble loading?": a small help line under the strip, not a button. */
.wb-fallback { margin: -4px 4px 0; font-size: 13px; color: #33415C; text-align: center; }
.wb-fallback[hidden] { display: none; }
.wb-fallback a { font-weight: 700; color: var(--color-navy); text-decoration: underline; text-underline-offset: 3px; }

/* Side column: the question box, then the offer. */
.wb-ask, .wb-fit { background: #fff; border: 1px solid #E7E9F0; border-radius: 18px; padding: 16px 18px; }
.wb-ask { flex: 1; display: flex; flex-direction: column; }
.wb-ask h3, .wb-fit h3 { font-family: var(--font-display); font-size: 19px; line-height: 1.2; margin: 0 0 10px; }
.wb-ask-form { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.wb-ask-form textarea { flex: 1; width: 100%; min-height: 76px; resize: none; padding: 12px 14px; border: 1px solid #D5DEEA; border-radius: 14px; font: inherit; font-size: 15px; line-height: 1.45; color: var(--color-navy); }
.wb-ask-form textarea:focus-visible { outline: 3px solid var(--color-navy); outline-offset: 1px; }
.wb-ask-form .btn { min-height: 44px; padding: 10px 18px; font-size: 15px; }
.wb-ask-note { margin: 0; font-size: 11.5px; line-height: 1.45; color: #78849B; }

/* The fit card (wb_fit_card): one question, four answers, the matching
   program's panel opens in place. Same answer buttons as the thank-you
   card, tighter. */
.wb-fit-k { margin: 0 0 4px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #5C6780; }
.wb-fit-options { display: flex; flex-direction: column; gap: 7px; }
.wb-fit-opt { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 44px; padding: 9px 13px; border: 1.5px solid #D5DEEA; border-radius: 13px; background: #FBFCFE; font: inherit; font-size: 14.5px; font-weight: 700; line-height: 1.25; text-align: left; color: var(--color-navy); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.wb-fit-opt:hover { border-color: var(--color-navy); background: #fff; }
.wb-fit-opt .dot { width: 15px; height: 15px; flex: none; border-radius: 999px; border: 2px solid currentColor; opacity: .5; display: flex; align-items: center; justify-content: center; }
.wb-fit-opt.selected { background: var(--color-lime); border-color: var(--color-lime); }
.wb-fit-opt.selected .dot { opacity: 1; background: var(--color-navy); border-color: var(--color-navy); }
.wb-fit-opt.selected .dot::after { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--color-lime); }
.wb-fit-result { margin-top: 12px; }
.wb-fit-result[hidden], .wb-fit-prog[hidden] { display: none; }
.wb-fit-prog { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: #EEF8FF; border: 2px solid var(--color-sky); }
.wb-fit-tag { align-self: flex-start; padding: 4px 11px; border-radius: 999px; background: var(--color-lime); color: var(--color-navy); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.wb-fit-prog h4 { font-family: var(--font-display); font-size: 19px; line-height: 1.2; margin: 0; }
.wb-fit-prog p { margin: 0; font-size: 14px; line-height: 1.45; color: #33415C; }
.wb-fit-code { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin: 2px 0 0; padding: 9px 14px; border: 1.5px dashed var(--color-navy); border-radius: 12px; background: #fff; font: inherit; color: var(--color-navy); cursor: pointer; }
.wb-fit-code:hover { background: #F6FAFE; }
.wb-fit-code code { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: .06em; background: none; padding: 0; }
.wb-fit-code span { font-size: 12px; font-weight: 700; color: #5C6780; }
.wb-fit-deal { font-size: 13px; font-weight: 700; color: var(--color-navy); }
.wb-fit-deal--na { font-weight: 600; color: #5C6780; }
.wb-fit-prog .btn { margin-top: 4px; min-height: 46px; padding: 11px 18px; font-size: 15px; }
.wb-fit-more { align-self: center; font-size: 13.5px; font-weight: 700; color: var(--color-navy); text-decoration: underline; text-underline-offset: 3px; }
.wb-fit-terms { margin: 10px 0 0; font-size: 10.5px; line-height: 1.4; color: #78849B; }
/* Picked: only the chosen answer and its panel stay. */
.wb-fit--picked .wb-fit-k, .wb-fit--picked > h3, .wb-fit--picked .wb-fit-opt:not(.selected) { display: none; }
.wb-fit--picked .wb-fit-opt.selected { cursor: default; }
.wb-fit-back { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 700; color: #5C6780; text-decoration: underline; text-underline-offset: 3px; }
.wb-fit-back[hidden] { display: none; }

/* Desktop: the stage owns the first screen; the rest starts below it. */
@media (min-width: 1000px) {
  /* No min-height on the slot: the stage is as tall as its content, so
     nothing sits empty between the player and what follows. */
}
@media (max-width: 999px) {
  /* Phone and tablet: player, email step, question box, offer. */
  .wb-stage-grid { grid-template-columns: 1fr; gap: 14px; }
  .wb-stage-name { font-size: 19px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
@media (max-width: 640px) {
  .wb-frame { padding: 6px; border-radius: 20px; }
  .wb-screen { border-radius: 15px; padding: 46px 16px 18px; gap: 10px; }
  /* The poster grows to hold the email step; the player is 16:9 again. */
  .wb-frame:not(.wb-frame--playing) .wb-screen { aspect-ratio: auto; min-height: 56vw; }
  .wb-screen-title, .wb-screen-soon h2 { font-size: 20px; }
  .wb-screen .wb-count-cell { min-width: 0; flex: 1; max-width: 84px; padding: 8px 4px; }
  .wb-screen .wb-count-cell b { font-size: 24px; }
  .wb-gate-row { flex-direction: column; }
  .wb-gate-row input { flex: none; width: 100%; }
  .wb-gate-row .btn { width: 100%; }
  .wb-hosts { padding: 8px 12px; gap: 10px; }
  .wb-hosts p { font-size: 13.5px; line-height: 1.35; }
  .wb-ask-form textarea { min-height: 96px; }
}

/* ---- Session page, day-of states: starting soon / recording coming ----
   The blocks sit in the hero's one slot (see build.py, STATE_NAMES). */
.wb-badge--soon { background: #FFF4CC; color: #8A6100; }
.wb-soon { max-width: 1040px; margin: 0 auto; padding: 32px; background: #fff; border: 1px solid #E7E9F0; border-radius: 18px; text-align: center; }
.wb-soon h2 { font-size: 30px; margin: 0 0 8px; }
.wb-soon-line { margin: 0 auto; max-width: 56ch; color: #33415C; line-height: 1.55; }
.wb-soon-local { font-weight: 700; color: var(--color-navy); }
.wb-soon .wb-count { margin-top: 22px; }
.wb-soon .wb-count-cells { justify-content: center; }
.wb-soon .wb-count-cell { min-width: 84px; background: #F2F6FB; -webkit-backdrop-filter: none; backdrop-filter: none; }
.wb-soon .wb-count-cell b { font-size: 34px; }
.wb-soon .wb-count-live { justify-content: center; }
.wb-count-cell[hidden] { display: none; }
/* The registration card inside a row is not the sticky sidebar it is in the
   registration state. */
.wb-form-card--flow { position: static; }

/* "Get the recording": secondary to the player, so one quiet row. */
.wb-capture { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 16px 28px; align-items: center; max-width: 1040px; margin: 28px auto 0; padding: 20px 24px; background: #fff; border: 1px solid #E7E9F0; border-radius: 18px; }
.wb-capture[hidden] { display: none; }
.wb-capture-copy h3 { font-family: var(--font-display); font-size: 19px; margin: 0 0 4px; }
.wb-capture-copy p { margin: 0; font-size: 14px; line-height: 1.5; color: #5C6780; }
.wb-form--inline { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 10px; align-items: end; }
.wb-form--inline .field { margin: 0; }
.wb-form--inline .btn { min-height: 48px; padding: 12px 20px; white-space: nowrap; }
.wb-capture-done { grid-column: 1 / -1; margin: 0; font-weight: 700; color: #1D6B37; text-align: center; }

/* Ended: one card (message, next session, recording form), then the four
   program cards in a row (.wb-ty-progs, shared with the thank-you page). */
.wb-ended { display: grid; gap: 22px; }
.wb-ended-card { padding: 26px 30px; background: #fff; border: 1px solid #E7E9F0; border-radius: 18px; }
.wb-ended-card h2 { font-size: 28px; margin: 0 0 8px; }
.wb-ended-card > p { margin: 0; max-width: 66ch; color: #33415C; line-height: 1.55; }
.wb-ended-card > p a { font-weight: 700; color: var(--color-navy); text-decoration: underline; text-underline-offset: 3px; }
.wb-ended-card .wb-capture { margin: 18px 0 0; padding: 18px 0 0; max-width: none; background: none; border: 0; border-top: 1px solid #E7E9F0; border-radius: 0; }
.wb-ended-head { margin: 4px 0 -8px; }
.wb-ended-head h2 { font-size: 24px; margin: 0 0 4px; }
.wb-ended-head p { margin: 0; font-size: 15px; color: #5C6780; }
.wb-ty-prog .wb-fit-more { margin-top: 10px; align-self: center; }

/* "Up next" link at the foot of a live or finished session page. Its own
   name: .wb-next is the homepage's navy next-webinar card. */
.wb-up-next { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; align-items: center; padding: 20px 24px; background: #fff; border: 1px solid #E7E9F0; border-radius: 18px; text-decoration: none; color: var(--color-navy); transition: border-color .18s ease; }
.wb-up-next:hover { border-color: var(--color-navy); }
.wb-up-next-k { grid-column: 1; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5C6780; }
.wb-up-next b { grid-column: 1; font-family: var(--font-display); font-size: 20px; line-height: 1.25; }
.wb-up-next-cta { grid-column: 2; grid-row: 1 / span 2; font-weight: 800; white-space: nowrap; }
.wb-replay-next { margin: 22px 0 0; }

@media (max-width: 900px) {
  .wb-capture { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .wb-soon, .wb-ended-card { padding: 24px 18px; }
  .wb-soon h2, .wb-ended-card h2 { font-size: 24px; }
  .wb-ended-card .wb-capture { grid-template-columns: 1fr; }
  .wb-soon .wb-count-cell { min-width: 0; flex: 1; max-width: 110px; }
  .wb-capture { padding: 18px; }
  .wb-form--inline { grid-template-columns: 1fr; }
  .wb-form--inline .btn { width: 100%; }
  .wb-up-next { grid-template-columns: 1fr; }
  .wb-up-next-cta { grid-column: 1; grid-row: auto; margin-top: 6px; }
}

@media (max-width: 900px) {
  .wb-live-row { grid-template-columns: 1fr; gap: 22px; }
}
@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; }
/* Journal. Short hero with the search box; topic chips; the newest article
   featured; the rest in a grid, newest first. Cards carry their image (3:2)
   or a category gradient until one exists. */
.blog-hero { padding-top: 26px; padding-bottom: 26px; }
.blog-hero-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: 28px; align-items: end; }
.blog-hero h1 { font-size: 46px; margin: 6px 0 8px; }
.blog-hero .lead { max-width: 60ch; margin: 0; }
.blog-search { display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid #D5DEEA; border-radius: 999px; padding: 6px 6px 6px 18px; }
.blog-search:focus-within { border-color: var(--color-navy); }
.blog-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 16px; color: var(--color-navy); outline: none; }
.blog-search button { flex: none; width: 40px; height: 40px; border: 0; border-radius: 999px; background: var(--color-lime); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.blog-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.blog-tag { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1.5px solid #D5DEEA; background: #fff; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--color-navy); cursor: pointer; text-decoration: none; transition: border-color .15s ease, background .15s ease; }
.blog-tag span { font-size: 11.5px; color: #5C6780; }
.blog-tag:hover { border-color: var(--color-navy); }
.blog-tag.is-on { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }
.blog-tag.is-on span { color: rgba(255,255,255,.7); }
.blog-tags--art { margin: 14px 0 0; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.blog-card[hidden] { display: none; }
.blog-card .thumb { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #EEF3FA; }
.blog-card .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-card .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 16px 20px 0; font-size: 12px; font-weight: 700; color: var(--color-muted); text-transform: uppercase; letter-spacing: .06em; }
.blog-card .meta .sep { color: #B6C0D2; }
.blog-card .blog-cat { color: var(--color-navy); }
.blog-card h3 { font-size: 19px; line-height: 1.25; margin: 8px 20px 6px; }
.blog-card h3 a { color: inherit; text-decoration: none; }
.blog-card h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.blog-card p { font-size: 14px; color: var(--color-muted); margin: 0 20px 14px; }
.blog-card a.more { margin: auto 20px 20px; font-weight: 800; font-size: 14px; color: var(--color-navy); }
/* Featured: the newest piece, image beside the text. */
/* The image fills the left column top to bottom; the text stacks in the
   right column, each piece pinned to its row so the grid cannot scatter
   them. */
.blog-card--featured { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; align-items: start; margin-bottom: 24px; }
.blog-card--featured .thumb { grid-column: 1; grid-row: 1 / -1; aspect-ratio: auto; height: 100%; min-height: 320px; }
.blog-card--featured .meta { grid-column: 2; grid-row: 1; padding-top: 26px; }
.blog-card--featured h3 { grid-column: 2; grid-row: 2; font-size: 26px; margin-right: 26px; }
.blog-card--featured p { grid-column: 2; grid-row: 3; font-size: 15.5px; margin-right: 26px; }
.blog-card--featured a.more { grid-column: 2; grid-row: 4; margin: 0 26px 26px 20px; }
.blog-empty { margin: 24px 0 0; }
.linklike { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--color-navy); text-decoration: underline; cursor: pointer; }
/* Article page: dateline, tags, the image under the hero. */
.art-date { margin: 4px 0 0; font-size: 14px; font-weight: 700; color: var(--color-muted); }
.callout--program { background: #EEF8FF; }
.callout--program a { color: var(--color-navy); }
.art-hero { margin: 0 0 28px; }
.art-hero img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
@media (max-width: 1024px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 880px) {
  .blog-hero-row { grid-template-columns: 1fr; gap: 16px; }
  .blog-hero h1 { font-size: 36px; }
  .blog-card--featured { grid-template-columns: 1fr; grid-template-rows: auto; }
  .blog-card--featured .thumb { grid-column: 1; grid-row: auto; aspect-ratio: 3 / 2; height: auto; min-height: 0; }
  .blog-card--featured .meta, .blog-card--featured h3, .blog-card--featured p, .blog-card--featured a.more { grid-column: 1; grid-row: auto; }
  .blog-card--featured .meta { padding-top: 16px; }
  .blog-card--featured h3, .blog-card--featured p { margin-right: 20px; }
  .blog-card--featured a.more { margin: 0 20px 20px; }
}
.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 ---------- */
/* Hero, narrower desktops. The blobs and the figure are absolutely placed
   at fixed sizes from the right of the visual column, so as the column
   narrows they push left into the copy. Up to 1199px they take the smaller,
   further-right set; above that the desktop set clears the text. Checked
   pixel by pixel (blob shapes and the figure's opaque pixels against every
   text line and button in .hero-copy) from 1440 down to 360. */
@media (max-width: 1199px) {
  .hero h1 { font-size: 54px; }
  .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; }
}
@media (max-width: 1024px) {
  .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; }
}
/* Just above the one-column switch the paragraph rewraps into the blobs'
   left edges; nudge both right. The 880 block below takes over under it. */
@media (max-width: 960px) {
  .blob-lime { right: 176px; }
  .blob-pink { right: 64px; }
}
@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); }
/* The product scenes are square compositions with their own background, so
   the media box is square and the image fills it edge to edge: shown whole,
   never cropped, masked or tinted. aspect-ratio rather than a percentage
   height, because a percentage height inside a <picture> has nothing definite
   to resolve against in Safari. Same for .product-media. */
.router-media { aspect-ratio: 1 / 1; overflow: hidden; }
.router-media picture, .product-media picture, .prog-hero-art picture { display: block; width: 100%; height: 100%; }
.router-media img, .product-media img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Product cards show the scene at 4:3 (cover, centred): the product sits in
   the middle of every scene, so only set dressing is trimmed, and the card
   is not a full screen tall. */
.product-media { aspect-ratio: 4 / 3; overflow: hidden; }
.product-media img { object-fit: cover; object-position: center; }
.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;
}
/* Rounded rectangle panel holding the program's first product scene. */
.prog-hero-art { width: 100%; max-width: 420px; aspect-ratio: 1 / 1; justify-self: center;
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 22px 40px rgba(7,30,86,.14); }
.prog-hero-art img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ---- 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-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.product-body .pill-tags { gap: 6px; }
.product-body .pill { padding: 5px 11px; font-size: 12px; }
.product-card h3 { font-size: 17px; line-height: 1.2; font-family: var(--font-display); margin: 8px 0 2px; }
.product-dose { font-size: 13.5px; color: var(--color-muted); margin-bottom: 6px; }
.product-benefits { font-size: 13.5px; margin: 8px 0 0; gap: 6px; }
.product-benefits li { font-size: 13.5px; }
.product-ingredients { font-size: 12.5px; color: var(--color-muted); margin: 10px 0 0; line-height: 1.45; }
.product-ingredients b { color: var(--color-navy); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; margin-right: 4px; }
.product-foot { margin-top: auto; padding-top: 12px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.product-foot .btn { padding: 10px 16px; font-size: 14px; }
.product-from { display: block; font-size: 11.5px; font-weight: 700; color: var(--color-muted); }
.product-price { font-size: 22px; 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 { max-width: 340px; }
}
@media (max-width: 640px) {
  .router-grid, .product-grid { grid-template-columns: 1fr; }
  /* Phones: the scene as a square thumbnail floated beside the pills, name
     and dose line; the bullets, ingredients and the price row run full
     width below it. The body is a block here so its text wraps the float. */
  .product-card { display: block; }
  .product-media { float: left; aspect-ratio: 1 / 1; width: 112px; margin: 14px 12px 6px 14px; border-radius: 12px; }
  .product-media img { object-fit: cover; }
  .product-body { display: block; padding: 14px 14px 16px; }
  .product-benefits { clear: both; margin-top: 10px; }
  .product-foot { clear: both; flex-direction: row; align-items: center; justify-content: space-between; }
  .product-foot .btn { width: auto; }
  .prog-hero h1 { font-size: 34px; }
}

/* ---- 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 { align-items: stretch; text-align: left; }
.prog-price-head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 10px; }
.prog-price-head h3 { font-family: var(--font-body); font-weight: 800; font-size: 17px; margin: 0; line-height: 1.2; }
.prog-price-kicker { display: block; margin-top: 3px; font-size: 13px; line-height: 1.35; color: var(--color-muted); }
.prog-price .price-amount { margin: 6px 0 18px; font-size: 40px; }
.prog-price .actions { margin-top: auto; padding-top: 4px; 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; }



/* 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; }
}