/* Parlor, redesign stylesheet.

   Pages on the shared layout (_includes/layouts/base.njk) use this file. Pages
   still on the old design keep site.css until they are rebuilt, so nothing
   here can break them.

   Structure and proportions follow corridoradvisors.com: a full-bleed hero with
   white serif type top-left, 80px side margins on a 1440 screen, 65px section
   headlines with a short lede pinned to the right, pill buttons. Type is one
   friendly sans throughout; the wordmark is Lato Bold.
   Colour, like Corridor's, is mostly neutral: ivory ground, one dark (navy)
   and one accent (terracotta, buttons and the active step only). The strong
   colour belongs to the illustrations, not the page. */

:root {
  --paper: #FDFCFA;          /* warm off-white, the page ground (white, black, marigold) */
  --card: #F5F4F0;
  --ink: #111111;
  --ink-soft: #4A4A4A;
  --muted: #6E6E6E;          /* eyebrows, small print; 4.5:1 on ivory */
  --navy: #111111;           /* the one dark: headings, and the dark band */
  --navy-fixed: #111111;     /* dark marks on white chips; never flipped by .sect--dark */
  --on-dark: #F4EFE7;
  --on-dark-soft: rgba(244, 239, 231, 0.74);
  --accent: #F0A418;         /* marigold, the brand colour: buttons, the top strip, bold blocks */
  --accent-hover: #DC920C;
  --on-accent: #111111;      /* navy on marigold; white on yellow is unreadable */
  --accent-tint: #FBE6B8;
  --marigold: var(--accent);
  --marigold-deep: #B8790B;  /* headline and wordmark: marigold dark enough to read as type */
  --alert: #B4552E;          /* form errors keep a readable red */
  --rule: rgba(17, 17, 17, 0.14);
  --rule-dark: rgba(244, 239, 231, 0.2);

  /* Pretendard for everything people read: a clean, neutral sans with a full
     range of weights (open licence). The wordmark is Lato Bold. */
  --text: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --sans: var(--text);
  --brand: var(--text);   /* the wordmark only */

  --pad: clamp(16px, 5.56vw, 80px);     /* 80px at 1440, like Corridor */
  --max: 1280px;
  --sect: clamp(48px, 5vw, 76px);
  --nav-h: 64px;
  --radius: 12px;

  /* Type scale. Every heading has a size here, so no page falls back to the
     browser default again. Sizes land on Corridor's at 1440px. */
  --t-h1: clamp(2.65rem, 6.4vw, 5.75rem);      /* 92px */
  --t-h2: clamp(2.1rem, 4.5vw, 4.0625rem);     /* 65px */
  --t-h2-sm: clamp(2rem, 3.4vw, 3rem);         /* 48px */
  --t-h3: clamp(1.4rem, 1.95vw, 1.75rem);      /* 28px */
  --t-num: clamp(2.2rem, 2.9vw, 2.625rem);     /* 42px card figures */
  --t-big: clamp(3.4rem, 5vw, 4.5rem);         /* 72px math figures */
  --t-lede: clamp(1.0625rem, 1.25vw, 1.125rem);/* 18px */

  /* Grain. One page-level overlay on every image slot, instead of baking a
     grain pass into each file (that took one hero from 114KB to 893KB). */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-strength: 0.42;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body:not(.has-overlay-nav) { padding-top: var(--nav-h); }
img { display: block; max-width: 100%; }
p, blockquote, figure, ul, ol, dl { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--text);
  font-weight: 500;
  color: var(--navy);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: 1.02; letter-spacing: -0.035em; }
h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.028em; }
h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.015em; }

:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 4px; }
.band :focus-visible, .hero :focus-visible, .closing-in :focus-visible { outline-color: var(--on-dark); }
.hero--light :focus-visible { outline-color: var(--navy); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 999px; background: var(--card); color: var(--ink);
  font-family: var(--sans); font-size: 15px;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
.sect { padding-block: var(--sect); }
.center { text-align: center; }

.eyebrow {
  margin-bottom: 20px;
  font-family: var(--sans); font-size: 15px; line-height: 1.3; color: var(--muted);
}

/* Section head: headline left, a short lede pinned right (Corridor x=1010). */
.sect-head {
  display: grid; gap: 20px 60px;
  margin-bottom: clamp(28px, 3vw, 44px);
}
.sect-lede { max-width: 350px; font-size: var(--t-lede); line-height: 1.45; color: var(--ink); }
@media (min-width: 900px) {
  .sect-head { grid-template-columns: minmax(0, 1fr) 350px; align-items: start; }
  .sect-head .sect-lede { padding-top: 64px; }
}

/* ---------- Buttons: Corridor's pills, in terracotta ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px;
  font-family: var(--sans); font-size: 15px; font-weight: 500; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.pill:active { transform: translateY(1px); }
.pill--accent { background: var(--accent); color: var(--on-accent); }
.pill--accent:hover { background: var(--accent-hover); }
.pill--white { background: #fff; color: var(--ink); }
.pill--white:hover { background: #F2EFE8; }
.pill--big { min-height: 52px; padding: 0 28px; font-size: 16px; }

/* ---------- Image slots and placeholders ---------- */
.img {
  position: relative; overflow: hidden;
  aspect-ratio: var(--ratio, auto);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(135deg, rgba(17, 17, 17, 0.05) 0 1px, transparent 1px 14px),
    #DDD3BF;
  color: #4B5250;
}
.img--dark { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 14px), #2B3D55; color: rgba(244, 239, 231, 0.78); }
.img--fill { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; }
.img img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.img.is-empty img { display: none; }
.img::after {           /* the grain, over image and placeholder alike */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: var(--grain); background-size: 240px;
  mix-blend-mode: overlay; opacity: var(--grain-strength);
}
.slot {
  position: absolute; left: 0; top: 0; z-index: 0; max-width: 46ch;
  padding: 14px 16px;
  font-family: var(--sans); font-size: 12.5px; line-height: 1.4;
}
.slot b { display: block; margin-bottom: 3px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; font-size: 11px; }
.slot span { display: block; margin-top: 6px; opacity: .75; font-variant-numeric: tabular-nums; }

/* ---------- Ticker: the strip above the nav ---------- */
:root { --ticker-h: 0px; }   /* the scrolling strip is switched off (partials/ticker.njk is kept, unused) */
.ticker {
  position: relative; z-index: 60; height: var(--ticker-h); overflow: hidden;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.ticker-track { display: flex; width: max-content; height: 100%; animation: ticker 38s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-list { display: flex; align-items: center; height: 100%; margin: 0; padding: 0; list-style: none; }
.ticker-list li { display: flex; align-items: center; white-space: nowrap; }
.ticker-list li::after { content: ""; width: 5px; height: 5px; margin: 0 22px; border-radius: 50%; background: currentColor; opacity: .75; }
@keyframes ticker { to { transform: translateX(-50%); } }
/* ---------- White + marigold: finishing touches ---------- */
.form-card { box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.08), 0 24px 50px rgba(0, 0, 0, 0.08) !important; }
.foot-wrap .foot { background: var(--card); }
.sect--marigold .tile, .sect--marigold .card { background: #fff; }
.sect--marigold .plan-people .avatar:not(.avatar--you) { background: #fff; }
.sect--marigold .flow li { background: rgba(255, 255, 255, 0.55); }
.pill--white { box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.14); }
@media (max-width: 1179px) { .nav-bar, .nav-links > ul { box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.06), 0 8px 22px rgba(0, 0, 0, 0.1); } }
.nav-bg::after, .nav-bar::after, .nav-links > ul::after { content: none; }

/* The marigold full stop: on the wordmark and the hero headline. */
.stop { color: var(--marigold); }
.hero-l-title .stop { font-size: 1.3em; line-height: 0; margin-left: .02em; }

/* ---------- Animations from the founder's film and icon set ---------- */
/* Problem cards: a clip at the top of each. The film's off-white background
   is multiplied into the card, so it has no visible box. */
.card-clip {
  margin: calc(-1 * clamp(24px, 2.6vw, 34px)) calc(-1 * clamp(24px, 2.6vw, 34px)) 18px;
  aspect-ratio: 16 / 9; overflow: hidden; border-radius: 28px 28px 0 0;
}
.card-clip video, .card-clip img { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }

/* The advocate list: each item has its icon on a white tile (their marigold
   would vanish on the marigold section). Faded while pending; when the row
   ticks off it pops in, and the van drives in from the left. */
.plan-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: #fff; box-shadow: 0 4px 12px rgba(60, 40, 0, 0.12); overflow: hidden; }
.plan-ico img { width: 44px; height: 44px; object-fit: contain; }
.plan--flat.is-pending [data-plan-item]:not(.is-done) .plan-ico { opacity: .45; transform: scale(.85); filter: grayscale(1); }
[data-plan-item] .plan-ico { transition: opacity .3s ease, filter .3s ease; }
[data-plan-item].is-done .plan-ico { animation: ico-pop .55s cubic-bezier(.3, 1.6, .5, 1) both; }
[data-plan-item].is-done .plan-ico--transport img { animation: van-in .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ico-pop { 0% { transform: scale(.85); } 100% { transform: scale(1); } }
@keyframes van-in { 0% { transform: translateX(-120%); } 70% { transform: translateX(6%); } 100% { transform: translateX(0); } }
@media (max-width: 600px) {
  .plan-ico { width: 44px; height: 44px; } .plan-ico img { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) { [data-plan-item].is-done .plan-ico, [data-plan-item].is-done .plan-ico img { animation: none; } }

@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ---------- Nav ----------
   Wide screens: at the top of the page the bar is full width and see-through.
   As the page scrolls it gathers into a small centred bar filled with the
   hero's sky (Hera's shape: a rectangle with soft corners, the button nested
   inside). parlor.js drives it with one progress value; only transform,
   clip-path and opacity change, so the page never has to lay itself out again.
   Phones: no morph. Hera's pattern instead, a sky bar with the logo and the
   word Menu, the Sign up button beside it, and a card of big links below. */
.nav {
  --sky: #FFFFFF;
  --nav-r: 14px;
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h);
  top: var(--nav-top, var(--ticker-h));
  color: var(--navy);
}
.nav-shadow {              /* the shadow follows the clipped bar */
  position: absolute; inset: 0; pointer-events: none;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.18));
  opacity: 0; will-change: opacity;
}
.nav-bg {
  position: absolute; inset: 0; overflow: hidden;
  background: var(--sky);
  clip-path: inset(0 0 0 0 round 0);
  will-change: clip-path;
}
.nav-bg::after, .nav-bar::after, .nav-links > ul::after {   /* the same grain as the imagery */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); background-size: 240px;
  mix-blend-mode: overlay; opacity: 0.3;
}
.nav-in {
  position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-inline: clamp(16px, 2.2vw, 32px);
}
.nav-bar { display: contents; }
.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--brand); font-size: 33px; font-weight: 700 !important; letter-spacing: -0.02em;
  line-height: 1; text-decoration: none; color: inherit;
}
/* "Parlor" has no descenders, but the font reserves room for them, so the
   letters sit high in their box. Measured 3.5px above centre; nudge it back.
   (top, not transform: the nav's scroll animation owns the transform.) */
.nav .wordmark { position: relative; color: #111111; }   /* Lato sits centred on its own; no nudge */
.foot-brand .wordmark { color: #111111 !important; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links > ul { display: flex; align-items: center; gap: 4px; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px;
  border: 0; background: none; color: inherit; cursor: pointer;
  font-family: var(--sans); font-size: 15px; text-decoration: none; border-radius: 10px;
}
.nav-link:hover { background: rgba(17, 17, 17, 0.08); }
.nav-link[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }
.caret { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
[aria-expanded="true"] > .caret { transform: translateY(1px) rotate(-135deg); }
.nav-drop { position: relative; }
.drop {
  position: absolute; top: calc(100% + 10px); left: -8px; width: 300px; padding: 8px;
  background: var(--card); color: var(--ink); border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16);
  display: none;
}
.drop.is-open { display: block; }
.drop a { display: block; padding: 12px 14px; border-radius: 8px; text-decoration: none; font-family: var(--sans); }
.drop a:hover { background: var(--paper); }
.drop b { display: block; font-size: 15px; font-weight: 500; }
.drop span { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-soft); }
.nav .nav-cta { border-radius: 9px; }     /* nests inside the bar's 14px corners */
.nav-menu, .nav-cta-m, .nav-scrim { display: none; }

@media (min-width: 1180px) {
  .nav .wordmark, .nav-links { will-change: transform; }
  .nav-bar::after, .nav-links > ul::after { content: none; }   /* phone-only grain; here it would span the whole strip */
}

@media (max-width: 1179px) {
  .nav-shadow { display: none; }
  .nav-in { align-items: flex-start; gap: 10px; padding: 12px 12px 0; }
  .nav-bar {
    position: relative; overflow: hidden; flex: 1; min-width: 0;
    display: flex; align-items: center; justify-content: space-between;
    height: 52px; padding: 0 6px 0 18px; border-radius: var(--nav-r);
    background: var(--sky); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  }
  .nav-bar > * { position: relative; z-index: 1; }
  .nav-menu {
    display: inline-flex; align-items: center; height: 44px; padding: 0 12px;
    border: 0; border-radius: 9px; background: none; color: inherit; cursor: pointer;
    font-family: var(--sans); font-size: 17px; font-weight: 500;
  }
  .nav-cta-m {
    display: inline-flex; height: 52px; min-height: 52px; padding: 0 20px; flex: none;
    border-radius: var(--nav-r); font-size: 16px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  }
  .nav.is-open .nav-cta-m { display: none; }

  /* The open menu: a sky card of big links, a full-width button under it. */
  .nav-links {
    position: fixed; top: calc(var(--nav-top, 0px) + var(--nav-h) + 12px); left: 12px; right: 12px;
    max-height: calc(100svh - var(--nav-h) - 24px); overflow-y: auto;
    flex-direction: column; align-items: stretch; gap: 12px;
    display: none;
  }
  .nav.is-open .nav-links { display: flex; }
  .nav-links > ul {
    position: relative; overflow: hidden; flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px 20px; border-radius: var(--nav-r); background: var(--sky);
  }
  .nav-links > ul > li { position: relative; z-index: 1; }
  .nav-links > ul > li + li { border-top: 1px solid rgba(17, 17, 17, 0.16); }
  .nav-link { width: 100%; height: 60px; padding: 0; font-size: 20px; font-weight: 500; justify-content: space-between; border-radius: 0; }
  .nav-link:hover { background: none; }
  .drop { position: static; width: auto; padding: 0 0 12px; box-shadow: none; background: none; color: inherit; }
  .drop a { padding: 10px 0; }
  .drop a:hover { background: none; }
  .drop span { color: var(--navy); opacity: .75; }
  .nav .nav-cta { min-height: 56px; font-size: 17px; border-radius: var(--nav-r); }

  /* Everything behind the menu dims and softens, and stops scrolling. */
  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 0;
    background: rgba(0, 0, 0, 0.36);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .nav.is-open .nav-scrim { opacity: 1; pointer-events: auto; }
  body.menu-open { overflow: hidden; }
}

/* ---------- 1. Hero ---------- */
.hero {
  position: relative; isolation: isolate; color: #fff;
  min-height: clamp(640px, 122svh, 1100px);
}
.hero::before {          /* legibility for the nav and headline, whatever the image */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(12, 24, 38, 0.36) 0%, rgba(12, 24, 38, 0) 55%);
}
.hero .img--fill { z-index: 0; }
.hero .slot { top: auto; bottom: 30%; left: auto; right: 0; text-align: right; }
.hero-in { position: relative; z-index: 4; padding-top: clamp(110px, 15.5vh, 140px); text-align: center; }
.hero-trust {
  display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 22px;
  font-family: var(--sans); font-size: 15px;
}
.tick { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); position: relative; flex: none; }
.tick::after { content: ""; position: absolute; left: 6px; top: 4px; width: 4px; height: 8px; border: solid var(--on-accent); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
.hero h1 { color: #fff; max-width: 12.5em; margin-inline: auto; }
.hero-lede { max-width: 480px; margin: 26px auto 0; font-size: var(--t-lede); line-height: 1.5; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 12px; margin-top: 34px; }
.hero-small { display: inline-flex; align-items: center; gap: 10px; margin-left: 10px; font-family: var(--sans); font-size: 15px; }
.hero-small > span { white-space: nowrap; }
.hero-small i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
@media (max-width: 600px) {
  .hero-small { flex-basis: 100%; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 10px 0 0; }
  .hero-small i { display: none; }   /* phrases wrap cleanly instead of trailing a dot */
}

/* Light hero: a daylight photo with navy type, centred on open sky. The
   photo is flipped (the file is not) so the couple stands right of centre,
   looking toward the words, and it starts below the buttons. At the bottom it
   bleeds into the ivory section that follows. */
.hero--light { color: var(--navy); background: #6FAED8; }
.hero--light h1 { color: var(--navy); }
.hero--light::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 255, 255, 0) 60%); }
.hero--light .img { background: #6FAED8; }
.hero--light .img img { transform: scaleX(-1); object-position: 25% 50%; }
.hero--light .pill--white { box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.08); }
.hero--light .img--fill {
  top: 400px;               /* below the buttons */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%);
  mask-image: linear-gradient(180deg, transparent 0, #000 22%);
}
.hero--light::after {       /* the bleed into the ivory section below */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 55%, var(--paper) 100%);
}
.hero--light + .sect--ivory { padding-top: clamp(16px, 2.5vw, 48px); }
@media (max-width: 700px) {
  .hero--light .img--fill { top: max(44%, 540px); }   /* phones: the text runs longer */
  .hero--light .img img { object-position: 30% 50%; }
}

/* ---------- Layered hero ----------
   Two slides, stacked, cross-fading. Each is photo, headline, cut-out, one on
   top of the other; both image layers are the same box with the same crop, so
   the cut-out always lands exactly on the couple. Per slide:
     --fy  which part of the photo's height stays in frame (wide screens)
     --ty  headline height, set where the couple's heads are
     --fx / --ty-m  the same for phones, where the crop slides sideways
     --ar  the photo's own shape */
.hero-l { position: relative; color: var(--navy); background: var(--paper); }
.hero-l-rotor { position: relative; height: max(560px, calc(100svh - var(--ticker-h))); background: #2B2418; }   /* the photo fills the first screen; the text sits on its lower part */
.hero-l-stage {
  position: absolute; inset: 0; overflow: hidden; isolation: isolate;
  opacity: 0; transition: opacity 1.2s ease;
}
.hero-l-stage.is-on { opacity: 1; }
.hero-l-stage:not(.is-on) { pointer-events: none; }   /* the hidden slide must not catch the pointer */
.hero-l-stage--1 { --arn: 1.3333; --ar: 2000 / 1500; --fy: 15%; --ty: 31%; --fx: 86%; --ty-m: 32%; }
.hero-l-stage--2 { --arn: 1.5; --ar: 1200 / 800;  --fy: 4%;  --ty: 27%; --fx: 28%; --ty-m: 30%; }
.hero-l-layer { position: absolute; left: 50%; width: max(100%, 720px); aspect-ratio: var(--ar); top: var(--fy); transform: translate(-50%, calc(-1 * var(--fy))); }
.hero-l-layer img { display: block; width: 100%; height: 100%; }
.hero-l-layer:first-child::after {   /* grain on the photo, blended like every other picture */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); background-size: 240px; mix-blend-mode: overlay; opacity: var(--grain-strength);
}
/* Depth on scroll: at the top of the page the headline is in front. As you
   start scrolling down, the couple steps out in front of the words (the
   cut-out fades in over them, with a soft shadow so they lift off the page).
   parlor.js sets --depth from 0 to 1 over the first stretch of scrolling. */
.hero-l-cut { z-index: 3; pointer-events: none; opacity: var(--depth, 0); }
.hero-l-cut img { filter: drop-shadow(0 10px 24px rgba(20, 12, 0, 0.35)); }
/* Nav links over the photo: white while the bar is open, dark once it has
   gathered into the white pill (parlor.js sets .is-over-photo). */
@media (min-width: 1180px) { .nav.is-over-photo { color: #fff; } .nav.is-over-photo .nav-cta { color: var(--on-accent); } }
.hero-l-title {
  position: absolute; z-index: 2; left: 50%; transform: translateX(-50%);
  top: max(var(--ty), calc(var(--nav-h) + 20px)); width: min(94vw, 12.5em);
  margin: 0; text-align: center; color: #fff;
  font-size: clamp(2.8rem, min(7.8vw, 12svh), 7.25rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.03em;
  text-shadow: 0 2px 30px rgba(20, 12, 0, 0.35), 0 1px 3px rgba(20, 12, 0, 0.18);
}
.hero-l-stage::before {    /* a warm shade across the top so white letters hold on bright haze */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(30, 20, 5, 0.42) 0%, rgba(30, 20, 5, 0.18) 45%, rgba(30, 20, 5, 0) 65%);
}
.hero-l-rotor::after {     /* the bleed into the off-white below */
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  /* Nolla-style: no fade to white. Only a soft vignette at the edges; the
     even dimming is done on the photo itself (see "Vivid hero" below). */
  background: radial-gradient(120% 90% at 50% 45%, rgba(10, 6, 0, 0) 55%, rgba(10, 6, 0, 0.35) 100%);
}
@media (prefers-reduced-motion: reduce) { .hero-l-stage { transition: none; } }
.hero-l-below { position: absolute; z-index: 5; left: 0; right: 0; bottom: clamp(28px, 4svh, 48px); text-align: center; }   /* on the photo, near its foot */
.hero-l-below .hero-trust { justify-content: center; margin-bottom: 14px; }
.hero-l-below .hero-lede { margin: 0 auto; max-width: 540px; }
.hero-l-below .hero-actions { justify-content: center; margin-top: 26px; }
.problem--after-hero { padding-top: clamp(40px, 5vw, 80px); }
@media (max-width: 700px) {
  .hero-l-rotor { height: max(520px, calc(100svh - var(--ticker-h))); }
  .hero-l-layer { top: 0; height: 100%; width: auto; left: var(--fx); transform: translateX(calc(-1 * var(--fx))); }
  .hero-l-title { top: var(--ty-m); font-size: clamp(1.9rem, 8.6vw, 2.9rem); line-height: 1.04; }
}

.zero-tile {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px;
  padding: 10px 16px; border-radius: 12px; background: var(--card);
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.06), 0 8px 20px rgba(17, 17, 17, 0.06);
  font-family: var(--sans); font-size: 15px; color: var(--navy);
}
.zero-tile b { font-weight: 700; }

/* ---------- 2. The problem ---------- */
.problem-h { max-width: 845px; }
.strip { position: relative; margin-top: clamp(40px, 5vw, 72px); }
.strip > .img { position: absolute; inset: 0; aspect-ratio: auto; }
.strip > .img .slot { display: none; }
.strip-cards { position: relative; display: grid; gap: 16px; }
@media (min-width: 900px) { .strip-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.card { display: flex; flex-direction: column; padding: clamp(24px, 2.6vw, 34px); background: var(--card); border-radius: 28px; box-shadow: 0 1px 2px rgba(17, 17, 17, 0.05), 0 12px 32px rgba(17, 17, 17, 0.07); }
.card--accent { background: var(--accent-tint); }
.card-num {
  padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--rule);
  font-size: var(--t-num); line-height: 1; letter-spacing: -0.02em; color: var(--ink);
}
.card-num small { font-size: .62em; color: var(--muted); letter-spacing: 0; }
.card-title {
  margin-bottom: 14px;
  font-size: clamp(1.5rem, 2vw, 1.875rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--ink);
}
.card p:not(.card-num):not(.card-title) { font-size: 16px; line-height: 1.55; color: #444; }
.card cite { margin-top: auto; padding-top: 16px; font-family: var(--sans); font-size: 12px; font-style: normal; color: var(--muted); }
.card cite a { text-underline-offset: 3px; }

/* ---------- Tabs (audience toggle, and the dark band) ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: clamp(28px, 3.5vw, 44px); }
.tabs [role="tab"] {
  min-height: 44px; padding: 0 16px; border: 1px solid var(--rule); border-radius: 999px;
  background: transparent; color: var(--ink-soft); cursor: pointer;
  font-family: var(--sans); font-size: 15px;
}
.tabs [role="tab"]:hover { color: var(--ink); border-color: rgba(17, 17, 17, 0.3); }
.tabs [role="tab"][aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: var(--on-dark); }
[role="tabpanel"]:focus-visible { outline-offset: 10px; }

/* ---------- 3. How it works: Corridor's step track ---------- */
.steps { --a: 0; }
.step-k { font-family: var(--sans); font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.step-txt h3 { font-size: clamp(1.25rem, 1.4vw, 1.3rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }
.step-txt p:last-child { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--ink-soft); }
.step-dot {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border-radius: 50%; border: 1.5px solid rgba(17, 17, 17, 0.25); background: var(--paper);
  font-family: var(--sans); font-size: 13px; color: var(--ink-soft); cursor: pointer;
  transition: border-color .3s, box-shadow .3s, color .3s;
}
.step.is-done .step-dot, .step.is-active .step-dot { border-color: var(--navy); color: var(--navy); }
.step.is-active .step-dot { box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--navy); }
.steps-more { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 48px; font-family: var(--sans); font-size: 15px; }
.steps-more a { text-underline-offset: 4px; }

/* The step cards: one photo across all three (Hale's split). Each card shows
   its own third: the image is n cards wide, and card i sits at i/(n-1) of it.
   Cards are square and, when stacked, capped at 320px (the three-column card is ~290px where the columns begin), so their size changes
   smoothly with the window instead of jumping. The crop holds the top of the
   photo, where the faces are; the panel and a navy fade sit at the bottom. */
.step:nth-child(1) { --i: 0; } .step:nth-child(2) { --i: 1; } .step:nth-child(3) { --i: 2; }
.step:nth-child(4) { --i: 3; } .step:nth-child(5) { --i: 4; }
.step-card {
  position: relative; overflow: hidden; isolation: isolate;
  width: min(100%, 320px); aspect-ratio: 1 / 1; border-radius: 20px;
  display: grid; align-items: end; justify-items: center; padding: clamp(12px, 1.4vw, 20px);
  background-color: #9A9A9A;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.72) 100%), none;
  background-size: 100% 100%, calc(var(--n) * 100%) auto;
  background-position: 0 0, calc(var(--i) * 100% / (var(--n) - 1)) 86%;   /* the couple's heads, above the panels */
  background-repeat: no-repeat;
}
@media (min-width: 1px) {
  /* On shorter screens the cards give up height so the whole track, text
     included, fits under the nav and can pin while you scroll. parlor.js
     measures the room left and sets --card-max (never below 200px). */
  .step-card { width: 100%; max-height: var(--card-max, none); }
}
/* No extra grain layer here: this photo has its own grain baked in. */

/* Frosted-glass panel: nearly clear, blurs what is behind it, a hairline edge. */
.glass {
  width: 100%; max-width: 340px; padding: 18px 20px;
  color: #fff; font-family: var(--sans); font-size: 14px; line-height: 1.4;
  background: rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 16px;
  box-shadow: 0 10px 30px rgba(10, 24, 40, 0.18);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
}
.how.is-pinned .step:not(.is-active):not(.is-done) .glass { opacity: .35; transform: translateY(10px) scale(.97); }
.glass > * + * { margin-top: 10px; }
.g-k { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; opacity: .8; }
.g-t { font-size: 17px; font-weight: 600; line-height: 1.25; }
.g-s { opacity: .85; }
.g-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.g-row .g-t { margin: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--navy-fixed);
  font-family: var(--sans); font-size: 12px; font-weight: 600; white-space: nowrap;
}
.chip svg { width: 13px; height: 13px; }
.g-dots li, .g-list li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.g-dots li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.g-list li { justify-content: space-between; padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.g-list li:first-child { border-top: 0; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.18); font-size: 12px; font-weight: 600; }
.g-checks li { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 8px; padding: 6px 0; }
.g-checks svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: #fff; color: var(--navy-fixed); }
.g-checks small { opacity: .8; font-size: 12px; }
.avatar {
  display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent); color: var(--navy-fixed); font-family: var(--sans); font-weight: 600; font-size: 16px;
}
.g-person { display: flex; align-items: center; gap: 12px; }
.g-person b { display: block; font-size: 17px; }
.g-person small { display: block; opacity: .8; font-size: 13px; }
.g-btns { display: flex; gap: 8px; }
.g-btns span { flex: 1; padding: 8px 12px; border-radius: 10px; text-align: center; font-weight: 600; background: rgba(255, 255, 255, 0.18); }
.g-btns span.is-solid, .g-btns span:first-child { background: #fff; color: var(--navy-fixed); }
.g-bubble { max-width: 85%; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: rgba(255, 255, 255, 0.2); }
.g-bubble--me { margin-left: auto; border-radius: 14px 14px 4px 14px; background: #fff; color: var(--navy-fixed); }

/* Stacked (phones, and anything narrow): image, number, title, text. */
.steps-stage { display: grid; gap: 56px; }
.step { display: grid; gap: 18px; }

@media (min-width: 1px) {
  .steps-stage {
    grid-template-columns: repeat(var(--n), minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    column-gap: 40px; row-gap: 0;
  }
  .step { display: contents; }
  .step:nth-child(1) > * { grid-column: 1; } .step:nth-child(2) > * { grid-column: 2; }
  .step:nth-child(3) > * { grid-column: 3; } .step:nth-child(4) > * { grid-column: 4; }
  .step:nth-child(5) > * { grid-column: 5; }

  .steps-stage .step > .step-card { grid-row: 1; margin-bottom: 36px; }
  .step-dot { grid-row: 2; position: relative; z-index: 1; margin-bottom: 26px; }
  .step-txt { grid-row: 3; padding-right: 12px; }
  .step-txt h3, .step-txt p:last-child { transition: color .3s; }
  .step.is-active .step-txt h3 { color: var(--navy); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 6px; }
  .steps-stage[data-live] .step:not(.is-active) .step-txt p:last-child { color: var(--muted); }

  /* The track line behind the dots, and its filled portion. */
  .steps-stage::before, .steps-stage::after {
    content: ""; grid-row: 2; grid-column: 1 / -1; align-self: start; justify-self: start;
    height: 1.5px; margin-top: 17px; margin-left: 18px;
  }
  .steps-stage::before { width: calc((100% + 40px) * (var(--n) - 1) / var(--n)); background: rgba(17, 17, 17, 0.18); }
  .steps-stage::after { width: calc((100% + 40px) * var(--a) / var(--n)); background: var(--navy); transition: width .45s ease; }

  /* Wide screens: the track pins while the page scrolls past it, and each
     stretch of scrolling moves it on a step. Set by parlor.js only when the
     window is tall enough and the reader has not asked for reduced motion. */
}

/* ---------- 4. Who you get: three clean cards ---------- */
.who-cards { display: grid; gap: 16px; }
@media (min-width: 900px) { .who-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.who-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(24px, 2.6vw, 36px); background: var(--card); border-radius: 32px;
}
.who-txt { display: contents; }
.who-txt .ico { width: 48px; height: 48px; border-radius: 50%; margin-bottom: 6px; background: var(--accent-tint); color: var(--navy-fixed); }
.who-txt h3 { font-size: clamp(1.35rem, 1.7vw, 1.6rem); }
.who-txt p { font-size: 16px; line-height: 1.55; color: var(--ink-soft); }

/* ---------- 5. Testimonials (render only with real quotes) ---------- */
.quotes h2 { margin-bottom: 56px; }
.quote-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(940px, 86vw); gap: 24px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--pad) 12px;
  scroll-padding-inline: var(--pad);
}
.quote { scroll-snap-align: center; display: grid; gap: 8px; padding: 8px; background: var(--card); border-radius: var(--radius); }
.quote-txt { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 24px; }
.quote blockquote { font-size: clamp(1.25rem, 1.8vw, 1.625rem); line-height: 1.35; }
.quote figcaption b { display: block; font-size: 20px; font-weight: 400; }
.quote figcaption span { font-size: 13px; color: var(--muted); }
@media (min-width: 760px) { .quote { grid-template-columns: 1fr 1fr; } }

/* ---------- 6. The dark band: what your advocate does ----------
   Muse's "I can" card overlapping callbaba's care plan. The plan ticks itself
   off once, when it scrolls into view (parlor.js); with reduced motion, or no
   script, it is simply shown finished. */
.band h2 { color: #fff; max-width: 14em; }
.band .eyebrow { color: var(--on-dark-soft); }
.band .sect-lede { color: var(--on-dark-soft); font-size: clamp(1.0625rem, 1.4vw, 1.25rem); }
.band .sect-lede .pill { margin-top: 22px; }

.adv { display: grid; gap: 20px; align-items: start; }
@media (min-width: 960px) {
  .adv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
  .adv-can { position: relative; z-index: 2; margin-right: -48px; margin-top: 56px; }
  .plan { position: relative; z-index: 1; }
}
.adv-can, .plan-card {
  border-radius: 24px; font-family: var(--sans);
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12);
}
.adv-can {
  padding: clamp(22px, 2.5vw, 32px);
  background: #111111; box-shadow: 0 30px 60px rgba(4, 12, 24, 0.35);
}
.adv-h { font-size: 22px; font-weight: 600; color: #fff; }
.adv-can li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 20px 0; }
.adv-can li + li { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.adv-can li:last-child { padding-bottom: 4px; }
.adv-can b { display: block; font-size: 17px; font-weight: 600; color: #fff; line-height: 1.3; }
.adv-can p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--on-dark-soft); }
.ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent); color: var(--navy-fixed); }
.ico svg { width: 24px; height: 24px; }

.plan-people { display: flex; align-items: flex-start; justify-content: center; gap: 14px; margin-bottom: 22px; }
.who-dot { display: grid; justify-items: center; gap: 8px; font-family: var(--sans); font-size: 13px; color: var(--on-dark-soft); }
.plan-people .avatar { width: 64px; height: 64px; font-size: 22px; box-shadow: 0 0 0 3px var(--sect-bg), 0 0 0 5px rgba(255, 255, 255, 0.35); }
.avatar--you { background: #EDEDEA; font-size: 16px !important; }
.chip--handled { margin-top: 20px; }
.plan-card { padding: clamp(22px, 2.5vw, 32px); }
@media (min-width: 960px) {   /* clear the "I can" card that overlaps this one */
  .plan-card { padding-left: calc(48px + clamp(22px, 2.5vw, 32px)); }
  .plan-people { padding-left: 48px; }
}
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.plan-h { font-size: 22px; font-weight: 600; color: #fff; }
.plan-list li { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 12px; padding: 13px 0; }
.plan-list li + li { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.tick-c {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; color: var(--navy-fixed); transition: background-color .35s ease, color .35s ease, box-shadow .35s ease;
}
.tick-c svg { width: 16px; height: 16px; transition: opacity .25s ease, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.plan-what { font-size: 17px; color: #fff; }
.plan-status { font-size: 14px; color: var(--on-dark-soft); text-align: right; transition: opacity .3s ease; }
.chip[data-plan-done] { transition: opacity .35s ease, transform .45s cubic-bezier(.3, 1.6, .5, 1); }

/* Waiting state, only ever set by the script just before it plays. */
.plan.is-pending [data-plan-item]:not(.is-done) .tick-c { background: transparent; color: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35); }
.plan.is-pending [data-plan-item]:not(.is-done) .tick-c svg { opacity: 0; transform: scale(.4); }
.plan.is-pending [data-plan-item]:not(.is-done) .plan-status { opacity: .55; }
.plan.is-pending:not(.is-complete) .chip[data-plan-done] { opacity: 0; transform: scale(.85); }
@media (max-width: 600px) {
  .plan-list li { grid-template-columns: 26px 1fr; }
  .plan-status { grid-column: 2; text-align: left; margin-top: -6px; }
}

/* ---------- 7. The numbers: Corridor's math ---------- */
.nums-grid { display: grid; gap: 48px 40px; }
.nums h2 { font-size: var(--t-h2-sm); line-height: 1.08; max-width: 9.5em; }
.nums-cta > p:not(.eyebrow) { margin: 16px 0 24px; font-size: var(--t-lede); }
.nums-alt { margin-top: 14px; font-family: var(--sans); font-size: 13px; color: var(--ink-soft); }
.nums-alt a { text-underline-offset: 3px; }
.num-big {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--rule);
  font-size: var(--t-big); line-height: 1; letter-spacing: -0.03em; color: var(--navy);
}
.num-big small { font-size: 0.5em; letter-spacing: 0; color: var(--muted); }
.num p:last-child { font-size: 17px; line-height: 1.5; max-width: 240px; }
@media (min-width: 960px) {
  .nums-grid { grid-template-columns: minmax(0, 1.55fr) repeat(3, minmax(0, 1fr)); }
  .num { padding-top: 6px; }
}
@media (max-width: 959px) { .nums-cta { text-align: center; } .nums h2 { margin-inline: auto; } }

/* ---------- 8. Closing band, footer inside it ---------- */
.closing {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 64px;
  min-height: clamp(860px, 97vw, 1400px);
  padding-top: clamp(80px, 9vw, 130px);
  color: #fff; text-align: center;
}
.closing .img--fill { z-index: 0; }
.closing .img img { object-position: 70% 100%; }   /* her face low and right, sky above for the words */
@media (max-width: 700px) { .closing .img img { object-position: 22% 100%; } }   /* phones: her face, not her ear */
.closing::before {         /* keeps the white headline readable on bright sky */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.12) 45%, rgba(0, 0, 0, 0) 70%);
}
.closing .slot { top: 45%; left: 50%; transform: translateX(-50%); text-align: center; }
@media (max-width: 700px) { .closing .slot { display: none; } }
.closing-in { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; }
.closing h2 { color: #fff; max-width: 13em; font-size: clamp(2.4rem, 5vw, 4.5rem); }
.closing-in > p:not(.closing-alt) { max-width: 623px; margin: 24px 0 32px; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.5; }
.closing-alt { margin-top: 18px; font-family: var(--sans); font-size: 15px; }
.closing-alt a { text-underline-offset: 4px; }
.closing-foot { position: relative; z-index: 3; padding-bottom: clamp(16px, 2.8vw, 40px); text-align: left; color: var(--ink); }

/* ---------- Footer card ---------- */
.foot-wrap { padding-block: 40px; }
.foot { padding: 24px clamp(20px, 2.2vw, 32px) 18px; background: var(--paper); border-radius: var(--radius); font-family: var(--sans); }
.foot-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding-bottom: 20px; border-bottom: 1px solid var(--rule); }
.foot-brand { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.foot-brand .wordmark { font-size: 24px; color: var(--navy); }
.foot-brand span { font-family: var(--text); font-size: 15px; color: var(--ink-soft); }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 15px; }
.foot-links a, .foot-legal a { text-decoration: none; color: var(--ink-soft); }
.foot-links a:hover, .foot-legal a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 14px; font-size: 12px; color: var(--muted); }
.foot-legal { display: flex; gap: 18px; }
.foot-legal a { color: var(--muted); }

/* ---------- Bold colour blocks ----------
   Each section is a deep, solid colour from the palette with light type on
   it, instead of ivory under everything. Every pairing is 7:1 or better.
   .sect--dark flips the text colours for the section; the white cards inside
   flip them back. */
:root {
  --rust: #8A3A14;
  --night: #FDFCFA;
  --espresso: #FDFCFA;
  --peach: #F2C38B;
}
.sect--rust { --sect-bg: var(--rust); }
.sect--night { --sect-bg: var(--night); }
.sect--espresso { --sect-bg: var(--espresso); }
.sect--dark {
  /* Historically the dark blocks; in the white + marigold palette they are
     plain white sections with black type. */
  --navy: #111111; --ink: #111111; --ink-soft: #4A4A4A; --muted: #6E6E6E;
  --rule: rgba(17, 17, 17, 0.12);
  --paper: var(--sect-bg);
  background: var(--sect-bg); color: var(--ink);
}
.sect--dark :focus-visible { outline-color: #111111; }
.sect--dark .card, .sect--dark .who-card {
  --navy: #111111; --ink: #161B1A; --ink-soft: #4B5250; --muted: #776F62; --rule: rgba(17, 17, 17, 0.14);
  color: var(--ink);
}
.sect--dark .card--accent { background: #111111; }
.sect--dark .card--accent, .sect--dark .card--accent .card-title, .sect--dark .card--accent p { color: #fff !important; }
.sect--dark .card--accent .card-title { border-color: rgba(255, 255, 255, 0.22); }

/* The calm palette (homepage mock-up): navy, the closing photo's light blue,
   and ivory, alternating light and dark. Terracotta stays for buttons only. */
:root { --sky-light: #8BBCDB; }
.sect--ivory { background: var(--paper); }
.sect--sky {
  --muted: rgba(17, 17, 17, 0.82); --ink-soft: rgba(17, 17, 17, 0.9); --rule: rgba(17, 17, 17, 0.18);
  --paper: var(--sky-light);
  background: var(--sky-light); color: var(--navy);
}
.sect--sky .who-card { --ink-soft: #4B5250; --muted: #776F62; }
.sect--ivory .card--accent { background: var(--navy-fixed); }
.sect--ivory .card--accent, .sect--ivory .card--accent .card-title, .sect--ivory .card--accent p { color: #fff !important; }
.sect--ivory .card--accent .card-title { border-color: rgba(255, 255, 255, 0.22); }
.sect--night .adv-can { background: #111111; }

/* Navy + terracotta on ivory (homepage sample). The terracotta block is the
   deep one (--rust), so white type on it reads at 7:1; buttons on it turn
   white. No brown anywhere. */
.sect--rust .who-card { box-shadow: 0 20px 40px rgba(60, 20, 4, 0.18); }

/* Marigold blocks: the brand colour at full strength, with navy type. The
   cards on them go navy so they still read as cards. */
.sect--marigold {
  --sect-bg: var(--marigold);
  --navy: #111111; --ink: #1B2322; --ink-soft: rgba(17, 17, 17, 0.86); --muted: rgba(17, 17, 17, 0.72);
  --rule: rgba(17, 17, 17, 0.2); --paper: var(--marigold);
  background: var(--marigold); color: var(--navy-fixed);
}
.sect--marigold h2 { color: var(--navy-fixed); }
.sect--marigold.band h2, .sect--marigold.band .sect-lede { color: #fff !important; }
.sect--marigold.band .sect-lede { color: var(--ink-soft); }
.sect--marigold .pill--accent { background: var(--navy-fixed); color: #fff; }
.sect--marigold .pill--accent:hover { background: #0F2238; }
.sect--marigold .adv-can, .sect--marigold .plan-card { background: #111111; border-color: transparent; box-shadow: 0 30px 60px rgba(60, 40, 0, 0.22); }
.sect--marigold .who-dot { color: var(--navy-fixed); }
.sect--marigold .fig-n { color: var(--navy-fixed); }
.sect--marigold .fig-n small { color: rgba(17, 17, 17, 0.65); }
.sect--marigold .flow li { background: rgba(255, 255, 255, 0.4); border-color: rgba(17, 17, 17, 0.12); }
.sect--marigold .flow b { color: var(--navy-fixed); }
.sect--marigold .flow-n { color: var(--navy-fixed); opacity: .7; }
.sect--marigold :focus-visible { outline-color: var(--navy-fixed); }

/* The advocate block's list: plain rows on the marigold, no cards, no
   avatars. Black type, a black tick that fills in as each item is done. */
.plan--flat { max-width: 760px; margin: 0 auto; }
.plan--flat .plan-list li { grid-template-columns: 30px 1fr auto; gap: 16px; padding: 18px 0; border-top: 1px solid rgba(17, 17, 17, 0.2); }
.plan--flat .plan-list li:last-child { border-bottom: 1px solid rgba(17, 17, 17, 0.2); }
.plan--flat .plan-what { font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: #111111; }
.plan--flat .plan-status { font-size: 15px; color: rgba(17, 17, 17, 0.72); }
.plan--flat .tick-c { width: 30px; height: 30px; background: #111111; color: var(--marigold); }
.plan--flat.is-pending [data-plan-item]:not(.is-done) .tick-c { box-shadow: inset 0 0 0 1.5px rgba(17, 17, 17, 0.45); }

/* How it works on deep navy: white track, peach for the step you are on. */
.sect--dark .tabs [role="tab"][aria-selected="true"] { background: #111111; border-color: #111111; color: #fff; }
.sect--dark .step-dot { border-color: rgba(17, 17, 17, 0.25); color: var(--ink-soft); }
.sect--dark .step.is-active .step-txt h3 { color: #111111; }
.sect--dark .steps-stage::before { background: rgba(17, 17, 17, 0.15); }

/* The advocate band on rust: its buttons turn white so they still stand out. */
.sect--rust .pill--accent { background: #fff; color: var(--rust); }
.sect--rust .pill--accent:hover { background: var(--peach); }
.sect--rust .adv-can { background: #111111; }

/* ---------- Inner pages ----------
   Pages without a photo hero open straight onto a dark block. Headlines are
   the same Figtree as every other heading on the site. */
.page-h1 { font-size: clamp(2.4rem, 4.8vw, 4.25rem); }
.page-lede { max-width: 34em; margin-top: 24px; font-size: var(--t-lede); line-height: 1.55; color: var(--ink-soft); }
.foot-wrap { background: var(--night); max-width: none; padding-inline: max(var(--pad), calc((100% - var(--max)) / 2)); }
body:not(.has-overlay-nav) { padding-top: 0; }
body:not(.has-overlay-nav) main > .sect:first-child { padding-top: calc(var(--nav-h) + clamp(48px, 6vw, 96px)); }
.is-inner main > .sect:first-child { padding-top: calc(var(--nav-h) + var(--inset) + clamp(48px, 6vw, 96px)); }

/* ---------- Provider and plan pages ----------
   Dark photo hero, then bold colour blocks. Light cards ("tiles") flip the
   text colours back, the same way the homepage cards do. */
.page-hero-grid { display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (min-width: 960px) { .page-hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.page-photo { overflow: hidden; border-radius: 28px; aspect-ratio: 4 / 5; max-height: 640px; position: relative; }
.page-photo img { width: 100%; height: 100%; object-fit: cover; }
.page-photo::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); background-size: 240px; mix-blend-mode: overlay; opacity: .35; pointer-events: none; }
@media (max-width: 959px) { .page-photo { aspect-ratio: 4 / 3; } }
.page-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.pill--ghost { background: transparent; color: #111111; box-shadow: inset 0 0 0 1.5px rgba(17, 17, 17, 0.3); }
.pill--ghost:hover { box-shadow: inset 0 0 0 1.5px #111111; }

.page-head { display: grid; gap: 20px 60px; margin-bottom: clamp(28px, 3vw, 44px); }
.page-head h2 { max-width: 16em; }
@media (min-width: 960px) { .page-head:has(.sect-intro) { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); align-items: start; } .page-head .sect-intro { padding-top: 12px; } }
.page-head:last-child { margin-bottom: 0; }
.sect-intro p { font-size: var(--t-lede); line-height: 1.6; color: var(--ink-soft); max-width: 38em; }
.sect-intro p + p { margin-top: 1em; }
.sect-after { margin-top: clamp(36px, 4vw, 56px); }
.sect-intro .pill { margin-top: 12px; }

.figs { display: grid; gap: 36px; }
@media (min-width: 760px) { .figs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; } }
.fig { padding-top: 22px; border-top: 1px solid var(--rule); }
.fig-n { display: flex; align-items: baseline; gap: 8px; font-size: var(--t-big); line-height: 1; letter-spacing: -0.03em; color: #111111; }
.fig-n small { font-size: .45em; color: var(--muted); letter-spacing: 0; }
.fig p:not(.fig-n) { margin-top: 18px; font-size: 16px; line-height: 1.55; color: var(--ink-soft); }
.fig cite { display: block; margin-top: 12px; font-style: normal; font-size: 13px; color: var(--muted); }
.fig cite a, .tile a, .file a, .faq a, .note a { color: inherit; text-underline-offset: 3px; }

.tiles { display: grid; gap: 16px; }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1100px) { .tiles:has(> .tile:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile {
  --navy: #111111; --ink: #161B1A; --ink-soft: #4B5250; --muted: #776F62; --rule: rgba(17, 17, 17, 0.14);
  color: var(--ink); background: var(--card); border-radius: 28px; padding: clamp(24px, 2.6vw, 36px);
}
.tile h3 { font-size: clamp(1.3rem, 1.6vw, 1.5rem); margin-bottom: 14px; }
.tile p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.tile p + p { margin-top: .9em; }
.tile .fit { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); color: var(--ink); font-size: 15px; }
.measures { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.measure { padding: 5px 11px; border-radius: 999px; background: #F2E1CF; color: var(--navy-fixed); font-family: var(--sans); font-size: 13px; font-weight: 500; }
.measure.heavy { background: var(--navy-fixed); color: #fff; }
.note { max-width: 52em; margin-top: 32px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }

.flow { display: grid; gap: 16px; counter-reset: none; }
@media (min-width: 760px) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.flow li { padding: 26px 24px; border-radius: 24px; background: var(--card); }
.flow-n { display: block; margin-bottom: 18px; font-size: 13px; font-weight: 600; letter-spacing: .06em; color: #111111; opacity: .5; }
.flow b { display: block; font-size: 20px; font-weight: 600; color: #111111; }
.flow p { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }

/* Case files: a vertical list of tabs and one open file. */
.files { display: grid; gap: 20px; align-items: start; }
@media (min-width: 960px) { .files { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; } }
.files-list { display: grid; gap: 6px; }
.files-list [role="tab"] {
  display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: baseline; width: 100%;
  padding: 14px 16px; border: 0; border-radius: 14px; background: transparent; color: var(--ink-soft);
  font: inherit; font-size: 16px; line-height: 1.4; text-align: left; cursor: pointer;
}
.files-list [role="tab"]:hover { background: rgba(17, 17, 17, 0.04); color: #111111; }
.files-list [role="tab"][aria-selected="true"] { background: var(--card); color: #111111; }
.files-list .n { font-size: 13px; font-weight: 600; color: #111111; opacity: .5; }
.file { scroll-margin-top: calc(var(--nav-h) + 16px); }
.file {
  --navy: #111111; --ink: #161B1A; --ink-soft: #4B5250; --muted: #776F62; --rule: rgba(17, 17, 17, 0.14);
  color: var(--ink); background: var(--card); border-radius: 28px; padding: clamp(24px, 3vw, 40px);
}
.file-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.file-tags .tag { background: #F2E1CF; color: var(--navy-fixed); font-family: var(--sans); }
.file-tags .tag--alt { background: var(--navy-fixed); color: #fff; }
.file h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); }
.file-beats { margin: 22px 0 0; }
.file-beats > div { padding: 16px 0; border-top: 1px solid var(--rule); }
.file-beats dt { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--navy-fixed); }
.file-beats dd { margin: 6px 0 0; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.file-close { margin-top: 8px; padding: 18px 20px; border-radius: 16px; background: #F4EDE2; font-size: 16px; line-height: 1.55; }
.file-close b { color: var(--navy-fixed); }

/* FAQ: native details/summary, so it works with a keyboard and a screen
   reader with no script at all. */
.faq { display: grid; gap: 10px; max-width: 880px; }
.faq details { border-radius: 20px; background: var(--card); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 24px; cursor: pointer; list-style: none; font-size: 18px; font-weight: 500; color: #111111;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 26px; font-weight: 300; line-height: 1; color: #111111; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid #111111; outline-offset: 2px; border-radius: 20px; }
.faq-a { padding: 0 24px 22px; }
.faq-a p { font-size: 16px; line-height: 1.65; color: var(--ink-soft); max-width: 44em; }

.cta-in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cta h2 { max-width: 18em; font-size: clamp(2rem, 3.8vw, 3.25rem); }
.cta p { max-width: 38em; margin: 22px 0 30px; font-size: var(--t-lede); line-height: 1.6; color: var(--ink-soft); }

/* ---------- Documents: legal pages and guides ----------
   Long reading. Left-aligned on purpose, one comfortable column, the site's
   type and colours. */
.doc { padding-top: calc(var(--nav-h) + var(--ticker-h) + clamp(40px, 5vw, 72px)); }
.doc + .doc { padding-top: 0; }
.prose { max-width: calc(46rem + 2 * var(--pad)); text-align: left; }
.prose h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); line-height: 1.06; letter-spacing: -0.03em; color: #111; }
.prose h2 { margin: 2.6rem 0 .8rem; font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1.2; letter-spacing: -0.015em; color: #111; }
.prose h3 { margin: 1.8rem 0 .5rem; font-size: 1.1rem; color: #111; }
.prose p, .prose li { font-size: 17px; line-height: 1.7; color: #2B2B2B; }
.prose p + p { margin-top: 1em; }
.prose ul, .prose ol { margin: 1em 0 0; padding-left: 1.3em; list-style: revert; }
.prose li + li { margin-top: .5em; }
.prose a { color: #111; text-decoration-color: var(--marigold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: #111; }
.prose .updated { margin-top: 14px; font-size: 14px; color: var(--muted); }
.prose .callout, .prose .answer {
  margin: 1.6rem 0; padding: 18px 22px; border-radius: 16px; background: var(--card); border-left: 4px solid var(--marigold);
}
.prose .answer { padding: 24px 26px; }
.prose .callout p, .prose .answer p { margin: 0; }
.prose .answer p + p { margin-top: .8em; }
.prose b, .prose strong { color: #111; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: .7rem .6rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose th { font-weight: 600; color: #111; }
.prose--guide .crumb { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.prose--guide .crumb a { color: var(--muted); text-decoration-color: currentColor; text-decoration-thickness: 1px; }
.prose--guide .standfirst { margin-top: 22px; font-size: clamp(1.1rem, 1.4vw, 1.25rem); line-height: 1.55; }
.prose .toc { display: grid; gap: 10px; margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); }
.prose .toc a { font-size: 16px; }
.prose .toc span { display: inline-block; min-width: 2.2em; color: var(--muted); font-variant-numeric: tabular-nums; }
.prose .opt { padding-top: 1.6rem; border-top: 1px solid var(--rule); }
.prose .opt + .opt { margin-top: 2.6rem; }
.prose .opt h2 { margin-top: 0; }
.prose .src { margin-top: 1rem; font-size: 14px; color: var(--muted); }
.prose .src a { color: var(--muted); }
.prose .phone { display: inline-block; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 600; color: #111; text-decoration-color: var(--marigold); }
.opt, .toc a { scroll-margin-top: calc(var(--nav-h) + 24px); }
.cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }

/* ---------- Signup ---------- */
.signup-grid { display: grid; gap: clamp(40px, 5vw, 72px); align-items: start; }
@media (min-width: 960px) {
  .signup-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); }
  .form-card { position: sticky; top: calc(var(--nav-h) + 24px); }
}
.checks { display: grid; gap: 12px; max-width: 34em; margin-top: 32px; }
.checks li { position: relative; padding-left: 28px; font-size: 16px; line-height: 1.5; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%23111111' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.callrow { max-width: 34em; margin-top: 32px; padding: 16px 20px; border-radius: 16px; background: var(--card); font-size: 15px; line-height: 1.5; }
.callrow b { color: #111111; font-weight: 600; margin-right: 4px; }
.callrow a { color: #111111; text-underline-offset: 3px; }

/* The form card. White, so it resets the text colours .sect--dark flipped. */
.form-card {
  --ink: #161B1A; --ink-soft: #4B5250; --rule: rgba(17, 17, 17, 0.18);
  color: var(--ink); background: var(--card); border-radius: 24px;
  padding: clamp(24px, 3vw, 40px); box-shadow: 0 30px 60px rgba(4, 12, 24, 0.3);
}
.form-card h2 { font-size: clamp(1.6rem, 2.2vw, 2rem); color: var(--navy-fixed); }
.form-card .sub { margin: 8px 0 26px; font-size: 15px; color: var(--ink-soft); }
.form-card .field { display: grid; gap: 7px; margin-bottom: 20px; }
.form-card label { font-size: 15px; font-weight: 600; color: var(--navy-fixed); }
.form-card .hint { font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.form-card input[type="text"], .form-card input[type="tel"], .form-card input[type="email"], .form-card input[type="date"] {
  width: 100%; height: 52px; padding: 0 14px; font: inherit; font-size: 17px;
  color: var(--ink); background: #FBF7F0; border: 1.5px solid var(--rule); border-radius: 12px;
}
.form-card input:focus-visible { outline: 2px solid var(--navy-fixed); outline-offset: 1px; border-color: var(--navy-fixed); }
.form-card input[aria-invalid="true"] { border-color: var(--alert); background: #FDF3EC; }
.form-card .err { font-size: 13px; font-weight: 600; color: var(--alert); }
.form-card .err:empty { display: none; }
.form-card .consent { display: grid; gap: 12px; margin: 26px 0 10px; }
.form-card .check {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  padding: 16px; border: 1.5px solid var(--rule); border-radius: 14px; background: #FBF7F0;
}
.form-card .check.bad { border-color: var(--alert); background: #FDF3EC; }
.form-card .check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--navy-fixed); }
.form-card .check label { font-size: 14.5px; font-weight: 400; line-height: 1.5; color: var(--ink); }
.form-card .check label b { color: var(--navy-fixed); }
.form-card .check a, .form-card .smsterms a { color: var(--navy-fixed); text-underline-offset: 3px; }
.form-card .smsterms { margin-top: 14px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.form-card .smsterms strong { color: var(--ink); font-weight: 600; }
.form-card .submit {
  width: 100%; height: 56px; margin-top: 22px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 17px; font-weight: 600; background: var(--accent); color: var(--on-accent);
}
.form-card .submit:hover { background: var(--accent-hover); }
.form-card .submit:disabled { opacity: 0.55; cursor: not-allowed; }
.form-card .after { margin-top: 14px; font-size: 13px; text-align: center; color: var(--ink-soft); }
.form-card .done { display: none; }
.form-card .done.on { display: block; }
.form-card .done h2 { font-size: clamp(1.4rem, 2vw, 1.75rem); }
.form-card .done p { margin-top: 12px; color: var(--ink-soft); }
.form-card .hp { position: absolute; left: -9999px; }

/* ---------- Centred layout ----------
   Everything is centred: section headers, cards, the step track, figures,
   page tops and the footer. The one deliberate exception is running text of
   several lines (case files, FAQ answers, multi-paragraph cards, the form),
   which stays left-aligned, because centred paragraphs are hard to read. */
.sect-head, .page-head { grid-template-columns: 1fr !important; justify-items: center; text-align: center; }
.sect-head .sect-lede, .page-head .sect-intro { padding-top: 0 !important; max-width: 38em; margin-inline: auto; }
.sect-head h2, .page-head h2, .problem-h, .nums h2, .band h2 { margin-inline: auto; }
.sect-intro p, .sect-after p, .note { margin-inline: auto; }
.sect-after, .note { text-align: center; }
.eyebrow { text-align: center; }
.problem .eyebrow, .problem-h { text-align: center; }
.tabs { justify-content: center; }
.card { text-align: center; }

.step { justify-items: center; text-align: center; }
.step .glass { text-align: left; }   /* panel rows read as a list */
.steps-more { justify-content: center; }
@media (min-width: 1px) {
  .step-dot { justify-self: center; }
  .step-txt { padding: 0 8px; }
  /* the track now runs between the centres of the first and last dots */
  .steps-stage::before, .steps-stage::after { margin-left: calc((100% - (var(--n) - 1) * 40px) / (2 * var(--n))); }
}

.who-card { align-items: center; text-align: center; }
.who-txt p { margin-inline: auto; }

.nums-grid { grid-template-columns: 1fr !important; justify-items: center; text-align: center; }
@media (min-width: 960px) {
  .nums-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .nums-cta { grid-column: 1 / -1; margin-bottom: 16px; }
}
.num { width: 100%; }
.num-big { justify-content: center; }
.num p:last-child { margin-inline: auto; }

.foot-top { flex-direction: column; text-align: center; }
.foot-brand, .foot-links, .foot-base { justify-content: center; text-align: center; }

.page-hero-grid { grid-template-columns: 1fr !important; justify-items: center; text-align: center; }
.page-hero-grid .page-lede { margin-inline: auto; }
.page-actions { justify-content: center; }
.page-photo { width: min(100%, 760px); aspect-ratio: 16 / 10 !important; max-height: none; }
.page-photo img { object-position: 50% 40%; }
.fig { text-align: center; }
.fig-n { justify-content: center; }
.tile { text-align: center; }
.tile:has(> p + p) { text-align: left; }          /* several paragraphs: keep them readable */
.measures { justify-content: center; }
.flow li { text-align: center; }
.faq { margin-inline: auto; }

.signup-grid { grid-template-columns: 1fr !important; justify-items: center; }
.signup-intro { text-align: center; }
.signup-intro .page-lede, .callrow { margin-inline: auto; }
.checks { width: fit-content; margin-inline: auto; text-align: left; }
.form-card { width: min(100%, 560px); position: static !important; }
.form-card > h2, .form-card > .sub { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* The advocate list with icons. Placed last so it wins over the plain-list
   rules above: tick, icon, what, status. */
.plan--flat .plan-list li { grid-template-columns: 30px 52px 1fr auto; }
.plan--flat .plan-what { text-align: left; }
.plan--flat .plan-status { text-align: right; }
@media (max-width: 600px) {
  .plan--flat .plan-list li { grid-template-columns: 30px 44px 1fr; row-gap: 2px; }
  .plan--flat .plan-status { grid-column: 3; text-align: left; margin-top: 0; }
}

/* The sun mark beside the wordmark. */
/* The logo mark: at rest, just the sun. Hover (or keyboard focus) on the
   wordmark and the rays fan out across the arc from right to left, while the
   word steps aside to make room. Both layers are the founder's artwork, split
   into sun-disc.png and sun-rays.png on the same canvas. The sun is 47.6% of
   the canvas width and sits at its bottom centre. */
@property --hide { syntax: "<angle>"; inherits: false; initial-value: 180deg; }
.wordmark { --sw: 34px; transition: gap .6s cubic-bezier(.2, .7, .2, 1); }
.wordmark .sun { position: relative; flex: none; width: var(--sw); height: calc(var(--sw) * 0.51); transform: translateY(.2em); }
.wordmark .sun img { position: absolute; left: 50%; bottom: 0; width: calc(var(--sw) / 0.476); max-width: none; height: auto; transform: translateX(-50%); }
.wordmark .sun-rays {
  --hide: 180deg;   /* the whole arc hidden; 0deg shows it all */
  -webkit-mask-image: conic-gradient(from -90deg at 50% 100%, transparent var(--hide), #000 var(--hide));
          mask-image: conic-gradient(from -90deg at 50% 100%, transparent var(--hide), #000 var(--hide));
  transition: --hide .9s cubic-bezier(.3, .6, .2, 1);
}
.wordmark:hover .sun-rays, .wordmark:focus-visible .sun-rays { --hide: 0deg; }
/* (the word no longer steps aside on hover; see the round sun below) */
@media (max-width: 1179px) { .wordmark { --sw: 28px; } }
@media (prefers-reduced-motion: reduce) { .wordmark .sun-rays, .wordmark { transition: none; } }
.foot-brand .wordmark { font-size: 28px; }
@media (max-width: 1179px) { .nav .wordmark { font-size: 28px; gap: 8px; } }

/* "Covered by Medicare" above the hero headline. The headline keeps its
   height per slide; the label sits just above it. */
.hero-l-stage { --title-top: max(var(--ty), calc(var(--nav-h) + 62px)); }
.hero-l-title { top: var(--title-top); }
.hero-l-kicker {
  position: absolute; z-index: 4; left: 50%; transform: translateX(-50%);
  top: calc(var(--title-top) - 48px);
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 14px 7px 9px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.9); color: #111;
  font-family: var(--sans); font-size: 15px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
@media (max-width: 700px) {
  .hero-l-stage { --title-top: max(var(--ty-m), 112px); }   /* keeps the label clear of the phone nav */
  .hero-l-title { top: var(--title-top); }
  .hero-l-kicker { top: calc(var(--title-top) - 38px); font-size: 13px; padding: 5px 12px 5px 7px; }
}

/* A light grain over the marigold, so the flat yellow reads as a material
   rather than a web colour. Same noise as the photos, multiplied in lightly. */
.sect--marigold, .ticker { position: relative; isolation: isolate; }
.sect--marigold::before, .ticker::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain); background-size: 200px; mix-blend-mode: multiply; opacity: .28;
}
.pill--accent { position: relative; isolation: isolate; overflow: hidden; }
.pill--accent::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain); background-size: 160px; mix-blend-mode: multiply; opacity: .28;
}

/* Ambient light (after callbaba): two soft glows, one lighter gold and one
   deeper amber, drift slowly across each marigold block on a 28-second loop.
   Nothing visibly moves; the light shifts, so blocks of the same colour each
   look a little different and alive. Off for reduced motion. */
@property --glow-x1 { syntax: "<percentage>"; inherits: false; initial-value: 15%; }
@property --glow-y1 { syntax: "<percentage>"; inherits: false; initial-value: 20%; }
@property --glow-x2 { syntax: "<percentage>"; inherits: false; initial-value: 85%; }
@property --glow-y2 { syntax: "<percentage>"; inherits: false; initial-value: 75%; }
@keyframes glow-drift {
  0%, 100% { --glow-x1: 15%; --glow-y1: 20%; --glow-x2: 85%; --glow-y2: 75%; }
  50%      { --glow-x1: 55%; --glow-y1: 55%; --glow-x2: 35%; --glow-y2: 30%; }
}
.sect--marigold {
  background-color: #F0A418;
  background-image:
    radial-gradient(85% 85% at var(--glow-x1) var(--glow-y1), rgba(255, 214, 120, 0.42), transparent 70%),
    radial-gradient(90% 90% at var(--glow-x2) var(--glow-y2), rgba(176, 96, 0, 0.20), transparent 70%),
    radial-gradient(140% 120% at 15% 0%, #F5B23A 0%, #F0A418 60%);
  animation: glow-drift 28s ease-in-out infinite;
}
.sect--marigold:nth-of-type(odd) { animation-delay: -14s; }   /* neighbouring blocks never glow in step */
@media (prefers-reduced-motion: reduce) { .sect--marigold { animation: none; } }

/* The advocate list sits on a steady card: flat marigold that does not take
   part in the drifting glow, so only the area around it shifts. Same grain as
   the block, rounded corners and a soft shadow. */
.plan--flat {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 10px clamp(18px, 3vw, 36px);
  background: #F0A418; border-radius: 28px;
  box-shadow: 0 2px 6px rgba(90, 50, 0, 0.10), 0 18px 40px rgba(90, 50, 0, 0.16);
}
.plan--flat::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain); background-size: 200px; mix-blend-mode: multiply; opacity: .28;
}
.plan--flat .plan-list li:first-child { border-top: 0; }
.plan--flat .plan-list li:last-child { border-bottom: 0; }

/* The provider links sit after the step track, never inside it, and only
   while the For providers tab is open. */
.steps-more--providers { display: none; }
.how:has(#panel-providers:not([hidden])) .steps-more--providers { display: flex; }

/* Phones and narrow screens: no pinned track, so each step lights up as it
   scrolls into view instead (parlor.js marks it .is-active / .is-done). */
@media (max-width: 0px) {
  .steps-stage[data-live] .step .glass { transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
  .steps-stage[data-live] .step:not(.is-active):not(.is-done) .glass { opacity: .35; transform: translateY(14px) scale(.97); }
  .steps-stage[data-live] .step .step-txt h3 { transition: color .3s; }
  .step.is-active .step-dot { border-color: #111111; color: #111111; box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px #111111; }
}

/* One circle per step number, no outer ring: the step you are on simply
   gets a solid black outline and number. */
.step .step-dot, .step.is-active .step-dot, .step.is-done .step-dot { box-shadow: none !important; }
.step.is-active .step-dot { border: 2px solid #111111; color: #111111; }
/* Steps you have passed: a marigold circle. */
.step.is-done .step-dot { background: var(--marigold); border: 2px solid var(--marigold); color: #111111; }

/* Vivid hero (after Nolla): the photo fills the screen and is dimmed evenly,
   so every word on it is white and readable. The cut-out gets the same
   dimming, so the couple matches the photo when they step in front. */
.hero-l-layer img { filter: brightness(.62) saturate(1.08); }
.hero-l-cut img { filter: brightness(.62) saturate(1.08) drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35)); }
.hero-l-layer:first-child::after { opacity: .14; }
.hero-l-stage::before { background: none; }
.hero-l-below .hero-lede { color: rgba(255, 255, 255, 0.92); }
.hero-l-below .pill--white {
  background: rgba(255, 255, 255, 0.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hero-l-below .pill--white:hover { background: rgba(255, 255, 255, 0.26); }
.hero-l-below .zero-tile {
  background: rgba(20, 14, 6, 0.38); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

/* "What do you need help with?" (after Nolla): a glass pill that opens into a
   frosted list in the same spot, replacing the paragraph and buttons until it
   is closed. Every item leads to sign-up. */
.needs-open {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 14px;
  min-height: 44px; padding: 0 18px 0 12px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-family: var(--sans); font-size: 15px; font-weight: 500; color: #fff;
  background: rgba(20, 14, 6, 0.38); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: background-color .2s ease;
}
.needs-open:hover { background: rgba(20, 14, 6, 0.5); }
.needs-open img, .needs-head img { width: 26px; height: auto; }
.hero-main .zero-tile { display: flex; width: fit-content; margin: 12px auto 0; }
.needs {
  width: min(100%, 620px); margin: 0 auto; text-align: left; overflow: hidden;
  border-radius: 22px; color: #fff;
  background: rgba(40, 32, 24, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 20px 50px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.1); backdrop-filter: blur(22px) saturate(1.1);
}
.needs-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.needs-head p { flex: 1; font-family: var(--sans); font-size: 18px; font-weight: 500; }
.needs-close { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; }
.needs-close:hover { background: rgba(255, 255, 255, 0.12); }
.needs-close svg { width: 16px; height: 16px; }
.needs ul { list-style: none; margin: 0; padding: 6px 0; }
.needs a { display: block; padding: 12px 22px; color: #fff; text-decoration: none; font-family: var(--sans); font-size: 17px; }
.needs a:hover, .needs a:focus-visible { background: rgba(255, 255, 255, 0.1); outline: none; }
@media (min-width: 700px) {
  .needs { width: min(100%, 720px); }
  .needs ul { display: grid; grid-template-columns: 1fr 1fr; padding: 8px 6px; }
}
@media (max-width: 699px) { .needs a { padding: 9px 20px; font-size: 16px; } .needs-head { padding: 10px 10px 10px 18px; } }
/* Very short screens have no room for both: the headline steps back while
   the list is open. */
.hero-l-title, .hero-l-kicker { transition: opacity .3s ease; }
@media (max-height: 700px) { .hero-l:has([data-needs].is-open) :is(.hero-l-title, .hero-l-kicker) { opacity: 0; } }

/* The strip now sits in the page as a divider under the hero, not above the
   nav; it scrolls with the page like any section. */
.ticker { z-index: 1; height: 40px; }

/* Over the dark hero photo the wordmark is white too, like the nav links. */
@media (min-width: 1180px) { .nav.is-over-photo .wordmark { color: #fff; } }

/* The morph (after Nolla): the panel grows out of the pill. It is laid out at
   full size over the pill, then revealed with a clip-path that starts as the
   pill's own shape and opens to the whole panel; closing runs it back. Only
   clip-path and opacity animate, so it stays smooth. parlor.js sets the
   numbers. Everything else in the block fades back while it is open. */
.hero-main { position: relative; }
.hero-main > :not(.needs) { transition: opacity .22s ease; }
.hero-main.is-open > :not(.needs) { opacity: 0; pointer-events: none; }
.needs {
  position: absolute; left: 50%; bottom: var(--needs-bottom, 0); z-index: 2;
  width: min(92vw, 720px); margin: 0; translate: -50% 0;
  clip-path: var(--needs-clip, inset(0 round 22px));
  transition: clip-path .32s cubic-bezier(.2, .8, .2, 1);
}
.needs-head, .needs li { opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .25s ease; }
.needs.is-shown .needs-head { opacity: 1; transform: none; transition-delay: .06s; }
.needs.is-shown li { opacity: 1; transform: none; }
.needs.is-shown li:nth-child(1) { transition-delay: .10s; } .needs.is-shown li:nth-child(2) { transition-delay: .12s; }
.needs.is-shown li:nth-child(3) { transition-delay: .14s; } .needs.is-shown li:nth-child(4) { transition-delay: .16s; }
.needs.is-shown li:nth-child(5) { transition-delay: .18s; } .needs.is-shown li:nth-child(6) { transition-delay: .20s; }
@media (prefers-reduced-motion: reduce) {
  .needs, .needs-head, .needs li, .hero-main > :not(.needs) { transition: none !important; }
}

/* The photo always covers the hero, whatever the window's shape (Nolla's
   behaviour): wide enough for the width AND tall enough for the height.
   Container units measure the stage itself. */
.hero-l-stage { container-type: size; }
@media (min-width: 701px) {
  .hero-l-layer { width: max(100cqw, calc(100cqh * var(--arn))); }
}

/* Intro (after Nolla): on first load the photo rises out of the dark while
   settling from a touch of zoom, then the words and buttons arrive one after
   another. Plays once; the photo rotation afterwards is untouched. Only
   opacity, scale and translate animate, and "backwards" fill means nothing
   is held afterwards, so hover/open states keep working. */
@keyframes hero-photo-in { from { opacity: 0; scale: 1.06; } to { opacity: 1; scale: 1; } }
@keyframes hero-rise { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
.hero-l-stage--1 .hero-l-layer:first-child { animation: hero-photo-in 1.4s cubic-bezier(.22, .61, .36, 1) backwards; }
.hero-l-stage--1 .hero-l-kicker { animation: hero-rise .7s cubic-bezier(.22, .61, .36, 1) .35s backwards; }
.hero-l-stage--1 .hero-l-title  { animation: hero-rise .8s cubic-bezier(.22, .61, .36, 1) .45s backwards; }
.hero-main .hero-lede           { animation: hero-rise .7s cubic-bezier(.22, .61, .36, 1) .70s backwards; }
.hero-main .hero-sub            { animation: hero-rise .7s cubic-bezier(.22, .61, .36, 1) .75s backwards; }
.hero-main .hero-actions        { animation: hero-rise .7s cubic-bezier(.22, .61, .36, 1) .80s backwards; }
.hero-main .needs-open          { animation: hero-rise .7s cubic-bezier(.22, .61, .36, 1) .90s backwards; }
.hero-main .zero-tile           { animation: hero-rise .7s cubic-bezier(.22, .61, .36, 1) 1.0s backwards; }
@media (prefers-reduced-motion: reduce) {
  .hero-l-stage--1 .hero-l-layer:first-child, .hero-l-stage--1 .hero-l-kicker, .hero-l-stage--1 .hero-l-title,
  .hero-main .hero-lede, .hero-main .hero-actions, .hero-main .needs-open, .hero-main .zero-tile { animation: none; }
}

/* Signup: a smaller headline, then the form, then the reassurance underneath. */
.signup .page-h1 { font-size: clamp(1.9rem, 3.2vw, 2.75rem); }
.signup-after { max-width: 640px; }
.signup-after .page-lede { margin-top: 0; }

/* Phones: centre each photo on its couple (their middle, measured from the
   cut-outs: 57.5% across the first photo, 41.5% across the second), now that
   the hero is a full screen tall and the photo is scaled up to cover it. */
@media (max-width: 700px) {
  .hero-l-stage--1 { --cx: 57.5%; } .hero-l-stage--2 { --cx: 41.5%; }
  .hero-l-layer { left: 50%; transform: translateX(calc(-1 * var(--cx))); }
}

/* The hero's two lines: the promise, then what that means in practice. */
.hero-l-below .hero-lede { font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 500; line-height: 1.4; max-width: 34em; }
.hero-sub { max-width: 36em; margin: 10px auto 0; font-size: clamp(.95rem, 1.1vw, 1.05rem); line-height: 1.5; color: rgba(255, 255, 255, 0.82); }
.hero-l-below .hero-actions { margin-top: 22px; }
/* Short screens: the headline and its label move up and tighten a little so
   the two lines below never collide with it. */
@media (max-height: 760px) {
  .hero-l-stage { --title-top: max(calc(var(--nav-h) + 52px), 14%) !important; }
  .hero-l-title { font-size: clamp(2rem, min(7vw, 9.5svh), 5rem); }
  .hero-l-below { bottom: 18px; }
  .hero-sub { margin-top: 6px; }
  .hero-l-below .hero-actions { margin-top: 14px; }
  .needs-open { margin-top: 10px; }
}

.hero-l-below .hero-lede, .hero-sub { text-wrap: balance; }

/* How it works without photos: each step is just its card. The panel is the
   card now, solid and light, with dark type and marigold accents. */
.step-card {
  aspect-ratio: auto !important; max-height: none !important; min-height: 0;
  background: none !important; padding: 0 !important; overflow: visible; display: block;
}
.step-card .glass {
  max-width: none; width: 100%; padding: 22px 24px; opacity: 1 !important; transform: none;
  background: var(--card); color: #111111;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid rgba(17, 17, 17, 0.08); border-radius: 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 30px rgba(0, 0, 0, 0.06);
  text-align: left;
}
.steps-stage[data-live] .step:not(.is-active):not(.is-done) .glass { opacity: .5 !important; transform: translateY(10px) scale(.98); }
.step-card .g-k { color: #6E6E6E; opacity: 1; }
.step-card .g-s, .step-card .g-checks small { color: #4A4A4A; opacity: 1; }
.step-card .chip { background: var(--marigold); color: #111111; }
.step-card .g-checks svg { background: var(--marigold); color: #111111; }
.step-card .g-btns span { background: #ECEAE4; color: #111111; }
.step-card .g-btns span:first-child, .step-card .g-btns span.is-solid { background: #111111; color: #fff; }
.step-card .g-bubble { background: #ECEAE4; color: #111111; }
.step-card .g-bubble--me { background: var(--marigold); color: #111111; }
.step-card .tag { background: #ECEAE4; color: #111111; }
.step-card .g-list li { border-top-color: rgba(17, 17, 17, 0.1); }
@media (min-width: 1px) { .steps-stage .step > .step-card { align-self: stretch; } .step-card .glass { height: 100%; } }

/* The stopper: the section is made taller by the length of the stop (its
   height is set by parlor.js; padding would not work, a pinned element may
   not travel into its parent's padding), and its content pins, centred
   under the nav, while the steps play. */
.how.is-pinned > .wrap { position: sticky; top: var(--pin-top, 72px); }

/* How it works as a vertical flow (after callbaba), on wide screens: the
   steps are a list on the left, the current one open with its description,
   the others folded to their title; the current step's card shows on the
   right. */
@media (min-width: 1px) {
  .how .steps-stage {
    grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.05fr) !important;
    grid-template-rows: repeat(var(--n), auto) !important;
    column-gap: 20px !important; row-gap: 0 !important; align-items: start;
    max-width: 1080px; margin: 0 auto;
  }
  .how .steps-stage::before, .how .steps-stage::after { display: none !important; }
  .how .step:nth-child(1) > * { grid-row: 1; } .how .step:nth-child(2) > * { grid-row: 2; }
  .how .step:nth-child(3) > * { grid-row: 3; } .how .step:nth-child(4) > * { grid-row: 4; }
  .how .steps-stage .step > .step-dot { grid-column: 1 !important; margin: 18px 0 0 !important; justify-self: start; }
  .how .steps-stage .step > .step-txt {
    grid-column: 2 !important; text-align: left; padding: 22px 0 22px !important;
    border-top: 1px solid rgba(17, 17, 17, 0.1);
  }
  .how .steps-stage .step:first-child > .step-txt { border-top: 0; }
  .how .steps-stage .step > .step-card {
    grid-column: 3 !important; grid-row: 1 / -1 !important; align-self: center !important;
    width: 100% !important; margin: 0 !important;
    opacity: 0; transform: translateY(12px) scale(.98); pointer-events: none;
    transition: opacity .45s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
  }
  .how .steps-stage .step.is-active > .step-card,
  .how .steps-stage:not([data-live]) .step:first-child > .step-card { opacity: 1; transform: none; pointer-events: auto; }
  .how .step-card .glass { height: auto !important; opacity: 1 !important; transform: none !important; }
  .how .step-txt h3 { font-size: clamp(1.25rem, 1.6vw, 1.5rem); color: rgba(17, 17, 17, 0.45); text-decoration: none !important; transition: color .3s; }
  .how .step.is-active .step-txt h3, .how .step.is-done .step-txt h3 { color: #111111 !important; }
  .how .step-txt p:last-child {
    max-height: 0; overflow: hidden; opacity: 0; margin-top: 0 !important;
    transition: max-height .45s ease, opacity .35s ease, margin-top .45s ease;
  }
  .how .step.is-active .step-txt p:last-child { max-height: 12em; opacity: 1; margin-top: 10px !important; color: #4A4A4A !important; }
}

/* Type weight (after the Nolla reference): headings bold in a warm
   near-black, buttons semibold. Running text keeps its own colours. */
:root { --head: #1F1A17; --body-grey: #6B6660; }
h1, h2, h3, .card-title, .step-txt h3, .plan-what, .files-list [role="tab"][aria-selected="true"],
.faq summary, .flow b, .tile h3, .file h3, .who-txt h3, .num-big, .fig-n { font-weight: 650 !important; }
h1, h2, h3 { letter-spacing: -0.025em; }
main h2, main h3, .card-title, .step-txt h3, .tile h3, .file h3, .faq summary, .flow b { color: var(--head); }
.sect--marigold h2, .sect--marigold h3 { color: inherit; }
.hero-l-title { font-weight: 650 !important; }
.pill, .nav .nav-cta, .form-card .submit, .needs-open { font-weight: 600 !important; }
.pill--dark, .sect--marigold .pill--accent { background: #231C18; color: #F6F2EE; }

/* Phones, top of the homepage: logo and Menu straight on the photo, in white,
   with no white bar behind them. The bar returns as you scroll. */
@media (max-width: 1179px) {
  .nav .nav-bar { transition: background-color .25s ease, box-shadow .25s ease; }
  .nav.is-top:not(.is-open) .nav-bar { background: transparent; box-shadow: none; }
  .nav.is-top:not(.is-open) .nav-bar .wordmark, .nav.is-top:not(.is-open) .nav-menu { color: #fff; }
  .nav.is-top:not(.is-open) .nav-cta-m { box-shadow: none; }
}

/* Phones: Menu on the left, the logo in the centre of the screen, Sign up on
   the right (after Nolla). */
@media (max-width: 1179px) {
  .nav-in { position: relative; }
  .nav .nav-bar { justify-content: flex-start; padding-left: 6px; }
  .nav .nav-bar .nav-menu { order: -1; }
  .nav .nav-bar { position: static; }   /* so the logo centres on the screen, not the bar */
  .nav .nav-bar .wordmark { position: absolute; left: 50%; top: calc(12px + 26px); translate: -50% -50%; margin: 0; z-index: 2; }
}
@media (max-width: 1179px) {
  /* One full-width bar: Menu left, logo centre, Sign up tucked in at the right. */
  .nav .nav-bar { flex: 1 1 100%; padding-right: 100px; }
  .nav .nav-cta-m {
    position: absolute; right: 18px; top: 18px; z-index: 3;
    height: 40px; min-height: 40px; padding: 0 16px; border-radius: 10px; font-size: 15px; box-shadow: none;
  }
}

/* The hero headline is now a full sentence: smaller, wider, balanced lines. */
.hero-l-title { font-size: clamp(2rem, min(4.4vw, 8svh), 4.4rem) !important; width: min(92vw, 17em) !important; line-height: 1.08 !important; text-wrap: balance; }
@media (max-width: 700px) { .hero-l-title { font-size: clamp(1.7rem, 7.4vw, 2.3rem) !important; } }
.hero-l-below .hero-sub { font-size: clamp(1rem, 1.3vw, 1.15rem); color: rgba(255, 255, 255, 0.88); }

.nowrap { white-space: nowrap; }

/* Wide screens: the logo sits in the exact centre of the bar, two links on
   its left, the rest and Sign up on its right. At the top of the page the
   groups sit at the edges; as the bar gathers into the pill, parlor.js
   slides them in to hug the logo. */
@media (min-width: 1180px) {
  .nav-in { position: relative; justify-content: flex-start; }
  .nav-links, .nav-links > ul { display: contents; }
  .nav-links > ul > li { list-style: none; }
  .nav .wordmark { position: absolute !important; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; }
  .nav-links > ul > li:nth-child(2) { margin-right: auto; }
  .nav-links > ul > li { will-change: transform; }
  .nav .nav-cta { margin-left: 12px; will-change: transform; }
}

/* Hero head: the $0 tile, then the headline, then the line about what Parlor
   handles, as one block placed where the headline used to sit. The buttons
   stay at the foot of the photo. */
.hero-l-head {
  position: absolute; z-index: 2; left: 50%; top: var(--title-top); translate: -50% 0;
  width: min(92vw, 860px); text-align: center;
}
.hero-l-head .hero-l-title { position: static !important; transform: none !important; translate: none !important; width: auto !important; margin: 0 auto; max-width: 17em; }
.hero-l-head .zero-tile { display: inline-flex; margin: 0 0 18px; animation: hero-rise .7s cubic-bezier(.22, .61, .36, 1) .30s backwards; }
.hero-l-head .hero-sub { max-width: 36em; margin: 18px auto 0; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.5; color: rgba(255, 255, 255, 0.9); text-wrap: balance; animation: hero-rise .7s cubic-bezier(.22, .61, .36, 1) .6s backwards; }
.hero-l-head .zero-tile { background: rgba(20, 14, 6, 0.38); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* Get started buttons: white text on the marigold. */
.pill--accent, .nav .nav-cta, .nav .nav-cta-m, .nav.is-over-photo .nav-cta { color: #fff !important; }

.hero-l-head { top: max(calc(var(--nav-h) + 44px), 19%) !important; }

/* Narrow phones: a slightly smaller logo and button so "Get started" never
   meets the centred logo. */
@media (max-width: 420px) {
  .nav .wordmark { font-size: 24px !important; gap: 7px !important; --sw: 24px; }
  .nav .nav-cta-m { padding: 0 12px; font-size: 14px; right: 16px; }
  .nav .nav-bar .nav-menu { padding: 0 8px; font-size: 16px; }
}
@media (max-width: 345px) {
  .nav .wordmark { font-size: 21px !important; --sw: 21px; }
  .nav .nav-cta-m { padding: 0 10px; font-size: 13px; right: 14px; }
  .nav .nav-bar .nav-menu { font-size: 15px; }
}

/* Inset hero (after Hale): the photo sits in the page as a card, with a thin
   margin of the page colour all round and rounded corners, like a print.
   The nav sits inside it. */
:root { --inset: clamp(12px, 1.7vw, 26px); --inset-r: clamp(20px, 2vw, 32px); }
.hero-l { padding: var(--inset) var(--inset) var(--inset); background: var(--paper); }
.hero-l-rotor {
  height: max(520px, calc(100svh - 2 * var(--inset))) !important;
  border-radius: var(--inset-r); overflow: hidden; isolation: isolate;
}
.hero-l-rotor::after { border-radius: var(--inset-r); }
.hero-l-head { top: max(calc(var(--nav-h) + 44px + var(--inset)), 19%) !important; }
.hero-l-below { bottom: calc(var(--inset) + clamp(24px, 3.5svh, 44px)) !important; }
/* nav items line up inside the card's edges while the bar is open */
.has-overlay-nav .nav:not(.is-open) .nav-in { padding-inline: calc(var(--inset) + clamp(16px, 2.2vw, 32px)); }
.has-overlay-nav .nav { top: var(--inset); }
@media (max-width: 1179px) {
  .has-overlay-nav .nav .nav-in { padding-left: calc(var(--inset) + 6px); padding-right: calc(var(--inset) + 6px); }
  .has-overlay-nav .nav .nav-cta-m { right: calc(var(--inset) + 12px); }
}

/* The hero's Get started matches the one in the nav: a rounded rectangle, not a pill. */
.hero-actions .pill--accent { border-radius: 9px; }

/* The wordmark (the founder's lettering, letters set to just touch) drawn as
   a mask, so it takes the text colour: white on the photo, black on white. */
.wordmark .wm {
  display: inline-block; height: 1.02em; aspect-ratio: 462 / 185; flex: none;
  background: currentColor;
  -webkit-mask: url("/brand/wordmark.png") center / contain no-repeat;
          mask: url("/brand/wordmark.png") center / contain no-repeat;
  translate: 0 .16em;   /* the p's descender hangs below, like type */
}

/* Phones: the buttons follow straight on from the headline block (placed by
   parlor.js), and the $0 tile moves to the bottom. */
.zero-tile--foot { display: none; }
@media (max-width: 700px) {
  .hero-l-head .zero-tile--head { display: none; }
  .zero-tile--foot { display: flex; width: fit-content; margin: 12px auto 0; background: rgba(20, 14, 6, 0.38); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .hero-l-below.is-placed { bottom: auto !important; top: var(--below-top); }
}

.hero-main .zero-tile--foot { display: none; }
@media (max-width: 700px) { .hero-main .zero-tile--foot { display: flex; } }

/* Get started sits inside the right end of the bar at every width: the bar's
   side margin and the button's offset come from one number, with the same
   6px gap at the right as above and below. */
@media (max-width: 1179px) {
  .nav .nav-in { --bar-pad: 12px; }
  .has-overlay-nav .nav .nav-in { --bar-pad: calc(var(--inset) + 6px); }
  .nav .nav-in, .has-overlay-nav .nav:not(.is-open) .nav-in { padding-left: var(--bar-pad); padding-right: var(--bar-pad); }
  .nav .nav-cta-m, .has-overlay-nav .nav .nav-cta-m { right: calc(var(--bar-pad) + 6px); top: 18px; }
}
/* Wide screens: the button leaves the same 6px of pill above and below it. */
@media (min-width: 1180px) { .nav .nav-cta { height: 40px; min-height: 40px; padding-block: 0; } }

/* Phones, top of the homepage: nothing behind Menu, the logo and the button,
   not even the bar's grain, so they sit straight on the photo. */
@media (max-width: 1179px) {
  .nav .nav-bar::after { transition: opacity .25s ease; }
  .nav.is-top:not(.is-open) .nav-bar::after { opacity: 0; }
}

/* "Covered by Medicare." always gets its own line under the headline. */
.hero-l-title .hero-cover { display: block; }

/* The sun, turned over into a smile, with two happy closed eyes. The rays
   still fan out on hover, now shining down from under it. */
.wordmark .sun { transform: translateY(.2em) scaleY(-1); --e: calc(var(--sw) * .17); }
.wordmark .sun::before, .wordmark .sun::after {
  content: ""; position: absolute; z-index: 2; bottom: 30%;
  width: var(--e); height: calc(var(--e) * .55); box-sizing: border-box;
  border: calc(var(--sw) * .045) solid #231C18; border-top: 0; border-radius: 0 0 999px 999px;
}
.wordmark .sun::before { left: calc(50% - var(--sw) * .19 - var(--e) / 2); }
.wordmark .sun::after { left: calc(50% + var(--sw) * .19 - var(--e) / 2); }
.wordmark .sun { --e: max(5px, calc(var(--sw) * .17)); }
.wordmark .sun::before, .wordmark .sun::after { border-width: 0 max(1.4px, calc(var(--sw) * .045)) max(1.4px, calc(var(--sw) * .045)); }
.needs-open img, .needs-head img { transform: scaleY(-1); }   /* turned over, like the logo */

/* ---------- Hero: the room ----------
   The room, blurred, fills the card; the two of them are cut out sharp and
   stand at its foot, sized by parlor.js so the headline always sits clear
   above them. Dark words on the light room. Scrolling pins the card while
   the headline slides down behind them (Apple-style), then the page moves on. */
.hero-l--room { --pin: 75svh; padding-bottom: 0; }
.hero-l--room .hero-l-pin { position: sticky; top: var(--inset); }
.hero-l--room::after { content: ""; display: block; height: calc(var(--pin) + var(--inset)); }   /* the scroll the pin plays over */
.hero-l--room .hero-l-rotor { background: #ECE7E0; }
.hero-l--room .hero-l-rotor::after, .hero-l--room .hero-l-stage::before { content: none; }
.hero-l--room .hero-l-stage { --p: 0; }
.hero-l--room .hero-l-head { z-index: 2; transform: translateY(calc(var(--p) * var(--head-drop, 0px))); }
.hero-l--room .hero-l-title { color: #1F1A17; text-shadow: none; }
.hero-l--room .hero-l-head .hero-sub { color: #3B332D; }
.hero-l--room .hero-l-below { bottom: clamp(24px, 3.5svh, 44px) !important; }
@media (max-width: 700px) { .hero-l--room .hero-l-below { opacity: calc(1 - var(--p) * 2.5); } }

/* The nav on the light room: dark, not white. */

@media (prefers-reduced-motion: reduce) {
  .hero-l--room::after { content: none; }
  .hero-l--room .hero-l-pin { position: relative; top: 0; }
}
.hero-l-title .hl, .hero-l--room .hero-l-title .stop { color: #DB9031; }   /* the sun's own colour, a shade deeper than the buttons */
/* They grow from their feet, so no gap opens under them. */

/* Wide screens: words on the left, the two of them large on the right,
   standing on the card's right edge (parlor.js sets .is-side when the card
   is wide enough; narrower, they stand underneath as before). While pinned,
   they step in towards the middle and the words slip behind them. */
.hero-l--room.is-side .hero-l-head {
  left: var(--side-x); top: var(--side-top) !important; translate: none; width: min(46%, 700px); text-align: left;
}
.hero-l--room.is-side .hero-l-title { margin: 0; max-width: none; font-size: clamp(2.2rem, min(3.7vw, 7.4svh), 4.4rem) !important; }
.hero-l--room.is-side .hero-l-head .hero-sub { margin: 20px 0 0; max-width: 32em; text-wrap: pretty; }
.hero-l--room.is-side .hero-l-below {
  left: var(--side-x); right: auto; top: var(--below-top); bottom: auto !important;
  width: min(46%, 700px); max-width: none; margin: 0; padding: 0; text-align: left;
  opacity: calc(1 - var(--p) * 1.6);
}
.hero-l--room.is-side .hero-actions { justify-content: flex-start; margin-top: 0; }
.hero-l--room.is-side .needs { left: 0; translate: none; width: min(100%, 620px); }
.hero-l--room.is-side .needs ul { grid-template-columns: 1fr; }
.hero-l--room.is-side .hero-l-title { text-align: left; }
.hero-l--room.is-side .hero-l-head { width: min(45%, 820px); }

/* The open menu lines up with the bar above it, edge for edge. */
@media (max-width: 1179px) {
  .nav .nav-links { left: var(--bar-pad, 12px); right: var(--bar-pad, 12px); }
}

/* The logo is white on the hero photo and turns black once it is in the
   white bar or pill. */
@media (min-width: 1180px) { body:has(.hero-l--room) .nav.is-over-photo .wordmark { color: #fff; } }
@media (max-width: 1179px) { body:has(.hero-l--room) .nav.is-top:not(.is-open) .nav-bar .wordmark { color: #fff; } }

/* Wide screens, once scrolled: the pill is the phone bar. Menu on the left
   (parlor.js places it and fades it in), the logo in the middle, Get started
   on the right; the links fade away and Menu opens them as a panel under
   the pill, the same card as on phones. */
@media (min-width: 1180px) {
  .nav .nav-menu {
    display: inline-flex; align-items: center; position: absolute; z-index: 3;
    left: var(--menu-x, 0); top: var(--menu-y, 0); translate: 0 -50%;
    height: 40px; padding: 0 14px; border: 0; border-radius: 9px; background: none; color: #1F1A17; cursor: pointer;
    font-family: var(--sans); font-size: 16px; font-weight: 500; opacity: 0; visibility: hidden;
  }
  .nav .nav-menu:hover { background: rgba(17, 17, 17, 0.05); }
  .nav.is-pill .nav-menu { visibility: visible; }
  .nav.is-pill:not(.is-open) .nav-links > ul > li { visibility: hidden; }

  .nav.is-open .nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 12px;
    position: fixed; z-index: 2; top: var(--pill-top); left: var(--pill-l); width: var(--pill-w);
    max-height: calc(100svh - var(--pill-top) - 12px); overflow-y: auto;
  }
  .nav.is-open .nav-links > ul {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    padding: 6px 22px; border-radius: 14px; background: #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
  }
  .nav.is-open .nav-links > ul > li { transform: none !important; opacity: 1 !important; margin: 0 !important; }
  .nav.is-open .nav-links > ul > li + li { border-top: 1px solid rgba(17, 17, 17, 0.12); }
  .nav.is-open .nav-link { width: 100%; height: 58px; padding: 0; font-size: 19px; font-weight: 500; justify-content: space-between; border-radius: 0; color: #1F1A17; }
  .nav.is-open .nav-link:hover { background: none; }
  .nav.is-open .drop { position: static; width: auto; padding: 0 0 12px; box-shadow: none; background: none; color: inherit; translate: none; opacity: 1; }
  .nav.is-open .nav-links > .nav-cta { transform: none !important; margin: 0 !important; min-height: 54px; font-size: 17px; border-radius: 14px; justify-content: center; }
  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 0; background: rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .nav.is-open .nav-scrim { opacity: 1; pointer-events: auto; }
  body.menu-open { overflow: hidden; }
}

/* The room a shade darker (and a touch more at the top) so the white logo
   and links hold on it. */
.hero-l--room .hero-l-stage::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(30, 22, 14, .22) 0, rgba(30, 22, 14, 0) 22%);
}

/* Phones and tablets: the open menu sits 10px under the bar, like the desktop panel. */
@media (max-width: 1179px) {
  .nav .nav-links { top: calc(12px + 52px + 10px); }
  .has-overlay-nav .nav .nav-links { top: calc(var(--inset) + 12px + 52px + 10px); }
}
/* advocate and Medicare: a deep marigold, so they hold on the room. */
.hero-l-title .hl, .hero-l--room .hero-l-title .stop { color: #B86E0C; }

/* Scrolling, reworked: the headline stays put to the end; the two of them
   sink out of the card and fade, and the buttons fade with them, the way the
   rest of the page scrolls away. */
.hero-l--room .hero-l-head { transform: none; }
.hero-l--room .hero-l-below, .hero-l--room.is-side .hero-l-below { opacity: calc(1 - var(--p) * 1.6); }

/* The white border shows under the card too, before the strip below. */
.hero-l--room { padding-bottom: var(--inset); }
.hero-l--room::after { height: var(--pin); }
/* The words scroll up at the page's pace while the two of them sink away. */
.hero-l--room .hero-l-head, .hero-l--room .hero-l-below { transform: translateY(calc(var(--p) * var(--pin) * -1)); }

/* The sun on "What do you need help with?" bobs, just barely, so the pill
   feels alive and clickable. */
@keyframes sun-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2.5px; } }
.needs-open img { animation: sun-bob 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .needs-open img { animation: none; } }

/* Top of the homepage: the nav links and Menu are white on the photo, like the logo. */
@media (min-width: 1180px) { body:has(.hero-l--room) .nav.is-over-photo .nav-link { color: #fff; } }
@media (max-width: 1179px) { body:has(.hero-l--room) .nav.is-top:not(.is-open) .nav-menu { color: #fff; } }

/* The open help list never fades with the scroll: it looks the same at
   any scroll position as it does at the top. */
.hero-l--room .hero-l-below.is-open, .hero-l--room.is-side .hero-l-below.is-open { opacity: 1; }

/* In the nav, centre the logo on what the eye reads (the sun and the letters'
   body), not on its box, which the p's descender pulls down. */
.nav .wordmark .sun { transform: scaleY(-1); }
.nav .wordmark .wm { translate: 0 0; }

/* Hero words in slate rather than black. */
.hero-l--room .hero-l-title { color: #1E293B; }
.hero-l--room .hero-l-head .hero-sub { color: #334155; }
/* Turned over, the sun sits in the top half of its image; bring it down to the text's middle. */
.needs-open img, .needs-head img { position: relative; top: 3px; }

/* Room hero, stacked (any width): the buttons follow the headline, the two of them stand below. */
.hero-l--room:not(.is-side) .hero-l-below.is-placed { bottom: auto !important; top: var(--below-top); }

/* Their entrance moves them with transform, leaving `translate` (which keeps
   them centred, or on the right) alone, so they never start out of place. */

/* ---------- Hero: the ask box, after Nolla ----------
   A soft light-grey card, grey example text top left, and a round grey
   arrow bottom right (marigold once you have typed). */
.nbox {
  position: relative; width: min(100%, 620px); margin: 0 auto 14px; padding: 16px 14px 12px 20px; box-sizing: border-box;
  background: rgba(238, 238, 236, 0.96); border-radius: 18px; text-align: left; cursor: text;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  animation: hero-rise .7s cubic-bezier(.22, .61, .36, 1) .7s backwards;
}
.nbox-field { position: relative; }
.nbox-input {
  display: block; width: 100%; min-height: 56px; padding: 0; border: 0; resize: none; background: none; outline: none;
  font-family: var(--sans); font-size: 18px; line-height: 1.45; color: #2A2A2A;
}
.nbox-ph {
  position: absolute; inset: 0 0 auto 0; margin: 0; pointer-events: none;
  font-family: var(--sans); font-size: 18px; line-height: 1.45; color: #6B6B6B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nbox-ph span { display: inline; white-space: pre; transition: opacity .28s ease, filter .28s ease; }
.nbox-ph.is-out span, .nbox-ph.is-in span { opacity: 0; filter: blur(3px); }
.nbox-ph.is-in span { transition: none; }
.nbox.has-text .nbox-ph { display: none; }
.nbox-row { display: flex; justify-content: flex-end; align-items: center; }
.nbox-go {
  display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
  background: #7A7A78; color: #fff; transition: background-color .2s ease;
}
.nbox-go svg { width: 19px; height: 19px; }
.nbox-go:hover, .nbox.has-text .nbox-go { background: var(--accent); }
.nbox:focus-within { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18), 0 0 0 3px rgba(240, 164, 24, 0.45); }
.hero-l--room.is-side .nbox { margin-left: 0; }
@media (max-width: 700px) { .nbox { padding: 14px 12px 10px 16px; } .nbox-input, .nbox-ph { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .nbox { animation: none; } .nbox-ph span { transition: none; } }

/* ---------- Test: the cycling couple as a full, darkened background ----------
   No cut-out; the photo fills the card, dimmed so white words hold on it.
   Wide screens put the words on the right, over the soft grass, clear of
   their faces. */
.hero-l--photo .hero-l-stage::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 14, 20, .35) 0, rgba(10, 14, 20, 0) 30%, rgba(10, 14, 20, 0) 60%, rgba(10, 14, 20, .45) 100%);
}
.hero-l--photo .hero-l-title { color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .25); }
.hero-l--photo .hero-l-title .hl, .hero-l--photo .hero-l-title .stop { color: #F4AC2A; }
.hero-l--photo.is-side .hero-l-head, .hero-l--photo.is-side .hero-l-below { left: auto; right: var(--side-x); }
.hero-l--photo.is-side .hero-l-head, .hero-l--photo.is-side .hero-l-below { width: min(37%, 600px); }
.hero-l--photo.is-side .hero-l-title { font-size: clamp(2rem, min(3.1vw, 6.4svh), 3.6rem) !important; }
.hero-l--photo:not(.is-side) .hero-l-head { top: 44% !important; }

/* ---------- How it works: text first, then its picture ----------
   Phones: number, words, then the card under them.
   Wide screens: one column. The step you are on opens into a bordered,
   rounded panel with its words and, under them, its card; the other steps
   stay folded to their title. */
@media (max-width: 0px) {
  .how .steps-stage .step > .step-dot { order: 1; }
  .how .steps-stage .step > .step-txt { order: 2; }
  .how .steps-stage .step > .step-card { order: 3; margin-top: 18px; }
}
@media (min-width: 1px) {
  .how .steps-stage { display: flex !important; flex-direction: column; gap: 10px; max-width: 760px; }
  .how .steps-stage .step {
    display: grid !important; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px;
    grid-template-areas: "dot txt" ". card";
    padding: 6px 22px; border: 1px solid transparent; border-radius: 24px;
    transition: background-color .35s ease, border-color .35s ease, padding .35s ease, box-shadow .35s ease;
  }
  .how .steps-stage .step > .step-dot { grid-area: dot !important; }
  .how .steps-stage .step > .step-txt { grid-area: txt !important; border-top: 0 !important; padding: 18px 0 !important; }
  .how .steps-stage .step > .step-card {
    grid-area: card !important; align-self: start !important;
    max-height: 0 !important; overflow: hidden; transform: translateY(8px);
    transition: max-height .5s cubic-bezier(.2, .7, .2, 1), opacity .4s ease, transform .5s cubic-bezier(.2, .7, .2, 1), margin .4s ease;
  }
  .how .steps-stage .step.is-active,
  .how .steps-stage:not([data-live]) .step:first-child {
    background: #fff; border-color: rgba(17, 17, 17, 0.1); box-shadow: 0 14px 36px rgba(17, 17, 17, 0.06); padding: 10px 26px 26px;
  }
  .how .steps-stage .step.is-active > .step-card,
  .how .steps-stage:not([data-live]) .step:first-child > .step-card { max-height: 320px !important; transform: none; margin: 0 0 4px !important; }
  .how .step-card .glass { box-shadow: none !important; }
}
/* Shorter laptop screens: a little tighter, so the whole flow fits and pins. */
@media (min-width: 1px) and (max-height: 820px) {
  .how .sect-head { margin-bottom: 18px !important; }
  .how .tabs { margin-bottom: 20px !important; }
  .how .steps-stage { gap: 6px; }
  .how .steps-stage .step > .step-txt { padding: 12px 0 !important; }
  .how .steps-stage .step > .step-dot { margin-top: 12px !important; }
  .how .steps-stage .step.is-active, .how .steps-stage:not([data-live]) .step:first-child { padding: 6px 24px 18px; }
  .how .step-card .glass { padding-top: 16px !important; padding-bottom: 16px !important; }
}
.how.is-measuring *, .how.is-measuring *::before { transition: none !important; }
@media (min-width: 1px) and (max-height: 760px) {
  .how .sect-head h2 { font-size: clamp(2rem, 6svh, 2.8rem) !important; }
  .how .sect-head { margin-bottom: 12px !important; }
  .how .tabs { margin-bottom: 14px !important; }
  .how .steps-stage .step > .step-txt { padding: 9px 0 !important; }
  .how .steps-stage .step > .step-dot { margin-top: 9px !important; }
  .how .step-card .g-checks li { padding-block: 3px !important; }
}

/* Full photo hero: everything centred at every width, and the photo softened a touch. */
.hero-l--photo:not(.is-side) .hero-l-head { top: 40% !important; }

/* ---------- How it works: centred steps, soft marigold numbers ----------
   Wide screens: each step is centred: the number sits beside its title as
   one centred line, and the open step's words and card are centred under
   it. The numbers are soft, blurred marigold until you reach them, then
   solid marigold (no black rings). */
@media (min-width: 1px) {
  .how .steps-stage .step {
    grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr) !important; column-gap: 14px;
    grid-template-areas: ". dot h ." "p p p p" "card card card card" !important;
    text-align: center;
  }
  .how .steps-stage .step > .step-txt { display: contents !important; }
  .how .steps-stage .step > .step-txt h3 { grid-area: h; padding: 18px 0; margin: 0; }
  .how .steps-stage .step > .step-txt p:last-child { grid-area: p; max-width: 36em; justify-self: center; }
  .how .steps-stage .step > .step-dot { align-self: center; margin: 0 !important; }
  .how .steps-stage .step > .step-card { justify-self: center; width: min(100%, 560px) !important; }
  .how .steps-stage .step.is-active > .step-card { margin-top: 18px !important; }
}
@media (min-width: 1px) and (max-height: 820px) {
  .how .steps-stage .step > .step-txt h3 { padding: 12px 0; }
}
@media (min-width: 1px) and (max-height: 760px) {
  .how .steps-stage .step > .step-txt h3 { padding: 9px 0; }
}

.how .step .step-dot, .how .step.is-active .step-dot, .how .step.is-done .step-dot {
  position: relative; isolation: isolate; border: 0 !important; box-shadow: none !important; background: none !important;
  color: #5C4A1E; transition: color .4s ease;
}
.how .step .step-dot::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%;
  background: rgba(240, 164, 24, 0.42); filter: blur(3px);
  transition: background-color .45s ease, filter .45s ease, transform .45s ease;
}
.how .step.is-active .step-dot, .how .step.is-done .step-dot { color: #1F1A17; }
.how .step.is-active .step-dot::before, .how .step.is-done .step-dot::before { background: var(--marigold); filter: none; }
.how .step.is-active .step-dot::before { transform: scale(1.06); }
@media (min-width: 1px) {
  .how .steps-stage { align-items: stretch !important; }
  .how .steps-stage .step > .step-txt p:last-child { text-align: center !important; }
}
@media (min-width: 1px) {
  .how .steps-stage .step { row-gap: 0 !important; }
  .how .steps-stage .step.is-active > .step-txt p:last-child { margin: 0 auto !important; }
}

/* The ask box's mic, beside the arrow, and the quiet trust line at the photo's foot. */
.nbox-row { gap: 8px; }
.nbox-mic {
  display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(17, 17, 17, 0.06); color: #3A3A3A; box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.1); transition: background-color .2s ease, color .2s ease;
}
.nbox-mic svg { width: 18px; height: 18px; }
.nbox-mic:hover { background: rgba(17, 17, 17, 0.1); }
.nbox.is-listening .nbox-mic { background: var(--accent); color: #fff; box-shadow: none; animation: mic-pulse 1.4s ease-in-out infinite; }
.nbox.is-working .nbox-mic { opacity: .5; pointer-events: none; }
@keyframes mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(240, 164, 24, .45); } 50% { box-shadow: 0 0 0 8px rgba(240, 164, 24, 0); } }
@media (prefers-reduced-motion: reduce) { .nbox.is-listening .nbox-mic { animation: none; } }
.nbox-trust {
  position: absolute; z-index: 5; left: 0; right: 0; bottom: clamp(14px, 2.4svh, 24px); margin: 0;
  display: flex; justify-content: center; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.78);
  transform: translateY(calc(var(--p, 0) * var(--pin, 0px) * -1));
}
.nbox-trust svg { width: 15px; height: 15px; }

/* After Nolla: a white mic circle with a hairline edge, a filled grey send
   circle, both 38px, the icons crisp and centred. */
.nbox-row { gap: 10px; }
.nbox-mic, .nbox-go { width: 38px; height: 38px; }
.nbox-mic { background: #fff; color: #2B2B2B; box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.12), 0 1px 2px rgba(17, 17, 17, 0.06); }
.nbox-mic:hover { background: #fafafa; }
.nbox-mic svg { width: 17px; height: 17px; }
.nbox-go { background: #8A8A87; }
.nbox-go svg { width: 18px; height: 18px; }
.nbox-input { min-height: 48px; }
/* Short windows: the trust line gives way before anything overlaps it. */
.hero-l--photo.is-cramped .nbox-trust { display: none; }

/* ---------- Test: the white sun, a full circle ----------
   A whole round sun in warm white with the original's texture
   (sun-circle-white.png, built from sun-disc.png), and two happy closed
   eyes in the original textured marigold (sun-circle.png showing through
   two arc-shaped masks). The hover rays are off for this test. */
.wordmark .sun {
  width: calc(var(--sw) * .78) !important; height: calc(var(--sw) * .78) !important;
  transform: translateY(.06em) !important; --e: calc(var(--sw) * .2);
  background: url("/brand/sun-circle-white.png") center / contain no-repeat;
}
.wordmark .sun img { display: none; }
.wordmark .sun::before, .wordmark .sun::after {
  border: 0 !important; bottom: auto; top: 36%; height: calc(var(--e) * .55);
  background: url("/brand/sun-circle.png") center / 600% auto;
  --t: max(1.5px, calc(var(--sw) * .055));
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent calc(var(--e) / 2 - var(--t)), #000 calc(var(--e) / 2 - var(--t) + .5px), #000 calc(var(--e) / 2), transparent calc(var(--e) / 2 + .5px));
          mask: radial-gradient(circle at 50% 100%, transparent calc(var(--e) / 2 - var(--t)), #000 calc(var(--e) / 2 - var(--t) + .5px), #000 calc(var(--e) / 2), transparent calc(var(--e) / 2 + .5px));
}
.wordmark .sun::before { left: calc(50% - var(--sw) * .15 - var(--e) / 2); }
.wordmark .sun::after { left: calc(50% + var(--sw) * .15 - var(--e) / 2); }
.wordmark .sun { width: calc(var(--sw) * .9) !important; height: calc(var(--sw) * .9) !important; --e: max(6px, calc(var(--sw) * .24)); }
.wordmark .sun::before, .wordmark .sun::after { --t: max(2px, calc(var(--sw) * .07)); background-size: 300% auto; }
.wordmark .sun::before { left: calc(50% - var(--sw) * .17 - var(--e) / 2); }
.wordmark .sun::after { left: calc(50% + var(--sw) * .17 - var(--e) / 2); }

/* Rays for the round sun: twelve short marigold strokes all the way round.
   On hover (or keyboard focus) they turn in and grow out from the sun; at
   rest they are gone. The old half-sun ray image is hidden under a mask. */
.wordmark .sun img.sun-rays {
  display: block !important; position: absolute; left: 50%; top: 50%; bottom: auto;
  width: 185%; height: 185%; max-width: none; object-position: -9999px 0;
  background: var(--accent);
  -webkit-mask: url("/brand/sun-rays-ring.svg") center / contain no-repeat;
          mask: url("/brand/sun-rays-ring.svg") center / contain no-repeat;
  transform: translate(-50%, -50%) rotate(-30deg) scale(.6); opacity: 0;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .35s ease;
  pointer-events: none;
}
.wordmark:hover .sun img.sun-rays, .wordmark:focus-visible .sun img.sun-rays { transform: translate(-50%, -50%) rotate(0) scale(1); opacity: 1; }
.wordmark, .wordmark:hover, .wordmark:focus-visible { transition: none; }
@media (prefers-reduced-motion: reduce) { .wordmark .sun img.sun-rays { transition: none; } }
.wordmark .sun img.sun-rays { width: 150%; height: 150%; }
/* The word stays put on hover: only the sun shines. The rays are sized to
   fit inside the gap, so they never reach the letters. */
.wordmark, .wordmark:hover, .wordmark:focus-visible { transition: none !important; }
/* Bigger rays: the ring is larger, and the sun sits a little further from
   the word at all times (never only on hover), so they still clear it. */
.wordmark .sun img.sun-rays { width: 162%; height: 162%; }
/* The circle's middle on the middle of the letters. */
.wordmark .sun { transform: translateY(-.015em) !important; }

/* Footer brand: the tagline rule applies to the tagline only (it was also
   shrinking the logo's own parts), and logo and tagline centre on one line. */
.foot-brand { align-items: center !important; gap: 8px 18px; }
.foot-brand .wordmark span { font-size: inherit; color: inherit; }
.foot-brand .wordmark { font-size: 28px; --sw: 30px; }
.foot-brand .wordmark .wm { translate: 0 0; }
.foot-brand .wordmark .sun { transform: translateY(-.015em) !important; }

/* ---------- The sun on light and on the photo ----------
   On white (the scrolled pill, the phone bar, the
   footer, the menu) the sun is the textured marigold circle with dark eyes;
   only over the hero photo is it the white circle with marigold eyes. */
.wordmark .sun { background-image: url("/brand/sun-circle.png"); }
.wordmark .sun::before, .wordmark .sun::after { background: #231C18; }
@media (min-width: 1180px) {
  .nav.is-over-photo .wordmark .sun { background-image: url("/brand/sun-circle-white.png"); }
  .nav.is-over-photo .wordmark .sun::before, .nav.is-over-photo .wordmark .sun::after { background: url("/brand/sun-circle.png") center / 300% auto; }
}
@media (max-width: 1179px) {
  .nav.is-top:not(.is-open) .wordmark .sun { background-image: url("/brand/sun-circle-white.png"); }
  .nav.is-top:not(.is-open) .wordmark .sun::before, .nav.is-top:not(.is-open) .wordmark .sun::after { background: url("/brand/sun-circle.png") center / 300% auto; }
}

/* ---------- The strip under the hero, quieter ----------
   No colour band: plain sentence-case words in the body font, slate, on the
   page colour, drifting slowly, fading out at both edges, with thin rules
   above and below. Easy on older eyes: 17px, dark enough to read, slow
   (about 70s a loop), paused on hover, a pause button for anyone who wants
   it still (WCAG 2.2.2), and still for reduced motion. */
.ticker {
  height: auto !important; padding: 22px 0; overflow: hidden; z-index: 1;
  background: var(--paper) !important; color: #334155 !important;
  font-family: var(--sans); font-size: 17px; font-weight: 500; letter-spacing: 0; text-transform: none;
  border-block: 1px solid rgba(17, 17, 17, 0.07);
}
.ticker::after {   /* the words fade in and out at the edges */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--paper) 0, rgba(253, 252, 250, 0) 12%, rgba(253, 252, 250, 0) 88%, var(--paper) 100%);
}
.ticker::before { content: none !important; }
.ticker-track { animation-duration: 70s; }
.ticker-list li::after { width: 4px; height: 4px; margin: 0 28px; background: var(--accent); opacity: 1; }
.ticker.is-paused .ticker-track { animation-play-state: paused; }
.ticker-pause {
  position: absolute; z-index: 2; right: 14px; top: 50%; translate: 0 -50%;
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  background: #fff; color: #334155; box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.12);
}
.ticker-pause svg { width: 14px; height: 14px; }
.ticker-pause .i-play, .ticker.is-paused .ticker-pause .i-pause { display: none; }
.ticker.is-paused .ticker-pause .i-play { display: inline; }
@media (prefers-reduced-motion: reduce) { .ticker-pause { display: none; } }
@media (max-width: 700px) { .ticker { font-size: 16px; padding: 18px 0; } .ticker-list li::after { margin: 0 22px; } }
/* One link in the nav now: How it works on the left, Get started on the right. */
@media (min-width: 1180px) { .nav .nav-links > .nav-cta { margin-left: auto !important; } }
.nav.is-measuring, .nav.is-measuring * { transition: none !important; }

/* ---------- One link in the nav ----------
   "How it works" is the link where Menu used to be, in Menu's type, on every
   screen; the old list and its panel are gone. Wide screens: it, the logo
   and Get started sit on one line, the pill's centre line, from the top of
   the page. */
.nav .nav-menu { text-decoration: none; }
@media (min-width: 1180px) {
  .nav .nav-links > ul:not(.nav-quick) { display: none !important; }
  .nav .nav-menu { visibility: visible !important; opacity: 1 !important; }
  .nav.is-over-photo .nav-menu { color: #fff; }
  .nav.is-over-photo .nav-menu:hover { background: rgba(255, 255, 255, 0.12); }
}
@media (max-width: 1179px) {
  .nav .nav-bar .nav-menu { font-size: 16px; white-space: nowrap; }
}
@media (max-width: 420px) { .nav .nav-bar .nav-menu { font-size: 15px; padding: 0 8px; } }
@media (max-width: 345px) { .nav .nav-bar .nav-menu { font-size: 14px; padding: 0 6px; } }
/* The narrowest phones have no room for the link beside the centred logo;
   How it works is the next thing on the page there anyway. */
@media (max-width: 369px) { .nav .nav-bar .nav-menu { display: none; } }

/* ---------- "Connect with an advocate" (after Nolla) ----------
   A frosted pill: three overlapping round faces, then the words. Sits above
   the help pill; same glass, a little lighter so it reads first. */
.hero-main { display: flex; flex-direction: column; align-items: center; }
.hero-l--room.is-side .hero-main { align-items: flex-start; }
.connect {
  display: inline-flex; align-items: center; gap: 12px; margin: 2px 0 10px;
  min-height: 52px; padding: 6px 22px 6px 6px; border-radius: 999px; text-decoration: none;
  font-family: var(--sans); font-size: 17px; font-weight: 500; color: #fff; letter-spacing: -0.005em;
  background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 10px 30px rgba(0, 0, 0, 0.18);
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
  transition: background-color .25s ease, transform .25s ease;
  animation: hero-rise .7s cubic-bezier(.22, .61, .36, 1) .8s backwards;
}
.connect:hover, .connect:focus-visible { background: rgba(255, 255, 255, 0.24); }
.connect-faces { display: inline-flex; }
.connect-faces img {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}
.connect-faces img + img { margin-left: -11px; }
.connect:hover .connect-faces img + img { margin-left: -6px; }
.connect-faces img { transition: margin .3s cubic-bezier(.2, .8, .2, 1); }
.needs-open { margin-top: 0 !important; }
@media (max-width: 700px) { .connect { font-size: 16px; min-height: 48px; } .connect-faces img { width: 36px; height: 36px; } }
@media (prefers-reduced-motion: reduce) { .connect { animation: none; } .connect-faces img { transition: none; } }
/* Softer edges between the faces, like Nolla's: a thin dark seam, not a white ring. */
.connect-faces img { box-shadow: 0 0 0 2px rgba(34, 28, 22, 0.55); width: 42px; height: 42px; }
.connect { min-height: 54px; }
@media (max-width: 700px) { .connect-faces img { width: 38px; height: 38px; } .connect { min-height: 50px; } }
/* Both hero pills one height: 44px, the faces sized to sit inside with a
   4px margin, the words the same size as the help pill's. */
.connect, .needs-open { height: 44px !important; min-height: 44px !important; box-sizing: border-box; }
.connect { padding: 4px 18px 4px 4px; font-size: 15px; gap: 10px; }
.connect-faces img { width: 36px !important; height: 36px !important; }
.connect-faces img + img { margin-left: -10px; }
@media (max-width: 700px) { .connect { font-size: 15px; } }
/* The ask box in solid white, like Nolla's. */
.nbox { background: #fff !important; }
/* The connect pill wears the help pill's glass and type exactly. */
.connect {
  background: rgba(20, 14, 6, 0.38) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
  -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important;
  font-size: 15px !important; font-weight: 600 !important; letter-spacing: normal; color: #fff;
}
.connect:hover, .connect:focus-visible { background: rgba(20, 14, 6, 0.5) !important; }

/* ---------- Hero pills, after Nolla ----------
   Light frosted glass (a white veil over a strong blur) rather than a dark
   tint, no edge line, 50px tall, regular-weight 16px words. In the connect
   pill the faces sit 8px in from the pill's edge all round and only just
   overlap. */
.connect, .needs-open {
  height: 50px !important; min-height: 50px !important;
  background: rgba(255, 255, 255, 0.16) !important; box-shadow: none !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.2) !important; backdrop-filter: blur(22px) saturate(1.2) !important;
  font-size: 16px !important; font-weight: 500 !important; color: #fff !important;
}
.connect:hover, .connect:focus-visible, .needs-open:hover, .needs-open:focus-visible { background: rgba(255, 255, 255, 0.24) !important; }
.connect { padding: 8px 22px 8px 8px !important; gap: 12px !important; }
.connect-faces img { width: 34px !important; height: 34px !important; box-shadow: 0 0 0 1.5px rgba(40, 34, 28, 0.35) !important; }
.connect-faces img + img { margin-left: -4px !important; }
.connect:hover .connect-faces img + img { margin-left: -1px !important; }
.needs-open { padding: 0 22px 0 18px !important; gap: 12px !important; }
.hero-main .connect { margin-bottom: 12px; }
@media (max-width: 700px) { .connect, .needs-open { font-size: 15px !important; } }

/* The hero no longer moves as you scroll: no pin, no drift, no blur change.
   It simply scrolls away with the page. */
.hero-l--room::after { content: none !important; }
.hero-l--room .hero-l-pin { position: relative !important; top: auto !important; }
.hero-l--room, .hero-l--room .hero-l-stage, .hero-l--room .hero-l-below { --p: 0 !important; }
/* No entrance animation on the hero either: it is simply there on arrival.
   (The ask box's changing examples and the help pill's bobbing sun stay.) */
.hero-l--room .hero-l-head, .hero-l--room .hero-l-head *, .hero-l--room .hero-l-stage--1 .hero-l-title, .hero-main .nbox, .hero-main .connect, .hero-main .needs-open, .hero-main .hero-actions, .hero-main .zero-tile, .hero-main .hero-sub, .hero-main .hero-lede { animation: none !important; }

/* ---------- The sun, clean ----------
   No speckle. Flat colour with one soft touch of light: a gentle glow from
   the upper left, so it reads as a warm, rounded sun rather than a flat dot.
   Marigold on white (dark eyes); white over the photo (marigold eyes). */
.wordmark .sun { background: radial-gradient(circle at 34% 30%, #F4B54A 0, #E39B2C 55%, #D08A22 100%) !important; border-radius: 50%; }
.wordmark .sun::before, .wordmark .sun::after { background: #2A2118 !important; }
@media (min-width: 1180px) {
  .nav.is-over-photo .wordmark .sun { background: radial-gradient(circle at 34% 30%, #FFFFFF 0, #F8F3EA 60%, #EDE4D6 100%) !important; }
  .nav.is-over-photo .wordmark .sun::before, .nav.is-over-photo .wordmark .sun::after { background: #E39B2C !important; }
}
@media (max-width: 1179px) {
  .nav.is-top:not(.is-open) .wordmark .sun { background: radial-gradient(circle at 34% 30%, #FFFFFF 0, #F8F3EA 60%, #EDE4D6 100%) !important; }
  .nav.is-top:not(.is-open) .wordmark .sun::before, .nav.is-top:not(.is-open) .wordmark .sun::after { background: #E39B2C !important; }
}

/* The bar's grain lost its frame when the bar became position: static (to
   centre the logo on the screen) and spread across the whole nav strip.
   The bar is clean white now; no grain. */
.nav-bar::after, .nav-links > ul::after { content: none !important; }

/* The pyramid, in the panels too: each step's panel is a little wider than
   the one before (narrow for step 1, full width for step 3), centred. */
@media (min-width: 1px) {
  .how .steps-stage .step { width: 100%; margin-inline: auto; box-sizing: border-box; }
  .how .steps-stage .step:nth-child(1) { width: 74%; }
  .how .steps-stage .step:nth-child(2) { width: 87%; }
  .how .steps-stage .step:nth-child(3) { width: 100%; }
}

/* Phones get the same flow as desktop: the section holds still, one step
   opens at a time. Sized for a narrow screen: full-width panels (the
   pyramid lives in the titles here), tighter padding and type. */
@media (max-width: 699px) {
  .how .steps-stage .step:nth-child(n) { width: 100%; }
  .how .steps-stage .step { padding: 4px 14px; column-gap: 10px; }
  .how .steps-stage .step.is-active, .how .steps-stage:not([data-live]) .step:first-child { padding: 4px 16px 18px; }
  .how .steps-stage .step > .step-txt h3 { font-size: 17px !important; padding: 12px 0; text-align: left; }
  .how .steps-stage .step > .step-txt p:last-child { font-size: 15px; line-height: 1.45; }
  .how .step .step-dot { width: 30px; height: 30px; font-size: 13px; }
  .how .steps-stage .step.is-active > .step-card { margin-top: 12px !important; }
  .how .step-card .glass { padding: 14px 16px !important; }
  .how .sect-head { margin-bottom: 16px !important; }
  .how .sect-head h2 { font-size: clamp(2rem, 9vw, 2.6rem) !important; }
}

/* ---------- The page ground, after Nolla ----------
   A very slight warm grey instead of near-white, so the white panels, cards
   and the ask box lift off it. The hero is a photo, so it is unchanged. */
:root { --paper: #F4EEE6; }   /* warm oat (was a cool light grey #F1F0EE) */
.sect--night, .sect--espresso, .how { --night: #F4EEE6; --espresso: #F4EEE6; }
.ticker::after { background: linear-gradient(90deg, var(--paper) 0, rgba(244, 238, 230, 0) 12%, rgba(244, 238, 230, 0) 88%, var(--paper) 100%) !important; }

/* ---------- Step numbers, quieter ----------
   Small rounded squares instead of glowing marigold circles: a faint grey
   tile with a grey number for steps you have not reached or have passed,
   and a solid dark tile with a white number for the step you are on. */
.how .step .step-dot, .how .step.is-active .step-dot, .how .step.is-done .step-dot {
  width: 30px !important; height: 30px !important; border-radius: 8px !important;
  font-size: 13px !important; font-weight: 600; color: #8A847C !important;
}
.how .step .step-dot::before, .how .step.is-done .step-dot::before {
  background: rgba(17, 17, 17, 0.07) !important; filter: none !important; border-radius: 8px; transform: none !important;
}
.how .step.is-active .step-dot { color: #fff !important; }
.how .step.is-active .step-dot::before { background: #231C18 !important; }
@media (max-width: 699px) { .how .step .step-dot, .how .step.is-active .step-dot, .how .step.is-done .step-dot { width: 26px !important; height: 26px !important; font-size: 12px !important; border-radius: 7px !important; } }
/* Quieter still (after Nolla's numbered cards): plain numbers, no tile.
   Light grey, a little larger and thinner; the current step's number dark. */
.how .step .step-dot::before, .how .step.is-active .step-dot::before, .how .step.is-done .step-dot::before { background: none !important; }
.how .step .step-dot, .how .step.is-active .step-dot, .how .step.is-done .step-dot {
  font-size: 22px !important; font-weight: 400 !important; color: #B5B0A8 !important; width: 24px !important;
}
.how .step.is-active .step-dot { color: #231C18 !important; }
@media (max-width: 699px) { .how .step .step-dot, .how .step.is-active .step-dot, .how .step.is-done .step-dot { font-size: 19px !important; width: 20px !important; } }

/* The hero headline in Figtree: rounder, friendlier letters than the body
   font, at semibold with a little air between them. */
.hero-l-title { font-family: "Plus Jakarta Sans", var(--text) !important; font-weight: 600 !important; letter-spacing: -0.015em !important; }

/* One headline voice: every section headline in Figtree, the same size and
   weight as the hero's. */
:root { --headline: clamp(2rem, min(4.4vw, 8svh), 4.4rem); }
@media (max-width: 700px) { :root { --headline: clamp(1.7rem, 7.4vw, 2.3rem); } }
.hero-l-title, #how-title, #band-title, #closing-title {
  font-family: "Plus Jakarta Sans", var(--text) !important; font-weight: 600 !important; letter-spacing: -0.015em !important;
  font-size: var(--headline) !important; line-height: 1.08 !important;
}
/* Step titles are headings too: Figtree, matching the section headline. */
.how .step-txt h3 { font-family: "Plus Jakarta Sans", var(--text) !important; font-weight: 600 !important; letter-spacing: -0.01em !important; }
/* The marigold section's checklist titles are headings too. */
.plan-what { font-family: "Plus Jakarta Sans", var(--text) !important; font-weight: 600 !important; letter-spacing: -0.01em; }

/* Headings in Plus Jakarta Sans (bold, a little tighter). The shared headline
   size comes down a notch so the hero stays on three lines on a laptop. */
:root { --headline: clamp(2rem, min(3.9vw, 7.2svh), 3.9rem); }
@media (max-width: 700px) { :root { --headline: clamp(1.6rem, 6.9vw, 2.15rem); } }
.hero-l-title, #how-title, #band-title, #closing-title { font-weight: 700 !important; letter-spacing: -0.025em !important; }
.how .step-txt h3, .plan-what { font-weight: 700 !important; letter-spacing: -0.015em !important; }
/* The full stop after Medicare sits tight against the word, as normal type. */
.hero-l-title .stop { font-size: 1em !important; margin-left: 0 !important; line-height: inherit !important; }

/* ---------- TIGHT FLOW for How it works (remove "how--tight" in
   partials/how-it-works.njk to go back) ----------
   The space under the steps matches the space above the heading: the
   section's own padding plus the grey border around the hero. */
/* Step titles are clickable: a pointer, and a gentle darkening on hover
   for the folded ones. */
.how .step-txt h3 { cursor: pointer; transition: color .2s ease; }
.how .step:not(.is-active) .step-txt h3:hover { color: #1F1A17 !important; }

/* Opening and closing steps move in lockstep: the same duration and easing
   for every part, and each part opens to its measured height (parlor.js
   sets --p-open and --card-open), so the block's height never bulges. */
.how .steps-stage .step,
.how .steps-stage .step > .step-card,
.how .steps-stage .step > .step-txt p:last-child,
.how .step-txt h3 {
  transition-duration: .45s !important; transition-timing-function: cubic-bezier(.4, 0, .2, 1) !important;
}
.how .steps-stage .step.is-active > .step-card,
.how .steps-stage:not([data-live]) .step:first-child > .step-card { max-height: var(--card-open, 320px) !important; }
.how .step.is-active .step-txt p:last-child { max-height: var(--p-open, 12em) !important; }

/* ---------- Nav colour change, eased ----------
   Words, logo and sun cross-fade between light (on the photo) and dark (on
   the white pill) over a quarter second instead of switching in one frame.
   The sun is always marigold underneath; on the photo a white veil covers
   it (an inset shadow, which can animate, unlike a gradient swap). */
.nav .wordmark, .nav .nav-menu, .nav .nav-link { transition: color .28s ease, background-color .2s ease !important; }
.wordmark .sun {
  background: radial-gradient(circle at 34% 30%, #F4B54A 0, #E39B2C 55%, #D08A22 100%) !important;
  box-shadow: inset 0 0 0 999px rgba(252, 248, 241, 0);
  transition: box-shadow .28s ease;
}
.wordmark .sun::before, .wordmark .sun::after { transition: background-color .28s ease; }
@media (min-width: 1180px) {
  .nav.is-over-photo .wordmark .sun { background: radial-gradient(circle at 34% 30%, #F4B54A 0, #E39B2C 55%, #D08A22 100%) !important; box-shadow: inset 0 0 0 999px rgba(252, 248, 241, .94); }
}
@media (max-width: 1179px) {
  .nav.is-top:not(.is-open) .wordmark .sun { background: radial-gradient(circle at 34% 30%, #F4B54A 0, #E39B2C 55%, #D08A22 100%) !important; box-shadow: inset 0 0 0 999px rgba(252, 248, 241, .94); }
}
.nav-bar { transition: background-color .28s ease, box-shadow .28s ease !important; }
@media (prefers-reduced-motion: reduce) { .nav .wordmark, .nav .nav-menu, .wordmark .sun, .wordmark .sun::before, .wordmark .sun::after { transition: none !important; } }

/* The nav's moving parts follow the scroll frame by frame (parlor.js sets
   their position every frame). A CSS ease on transform made Get started
   trail the white bar by a beat, so it jittered in and out of the pill. */
.nav .nav-cta, .nav .nav-menu, .nav .wordmark, .nav .nav-links > ul > li { transition-property: color, background-color, box-shadow !important; }
.nav-bg, .nav-shadow { transition: none !important; }
.how.is-pinned > .wrap { top: var(--pin-top-css, var(--pin-top, 72px)); }

/* ---------- Marigold band: a quiet panel behind the heading ----------
   A slightly deeper marigold card with a hairline edge, holding the heading,
   the line under it and the button. The band's light-to-dark glow carries
   on around it. The deeper colour gives the white words more contrast. */
.band .sect-head {
  width: fit-content; max-width: min(100%, 860px); margin-inline: auto; box-sizing: border-box;
  padding: clamp(24px, 3vw, 40px) clamp(22px, 4vw, 56px);
  border-radius: 28px;
  background: rgba(150, 88, 0, 0.26);
  box-shadow: inset 0 0 0 1px rgba(110, 62, 0, 0.18);
}
.band .sect-lede p { font-weight: 500; }
@media (max-width: 700px) { .band .sect-head { border-radius: 22px; } }
/* One solid colour, fill and edge alike: the brand's deep marigold. */
.band .sect-head { background: var(--marigold-deep, #B8790B) !important; box-shadow: none !important; border: 1px solid var(--marigold-deep, #B8790B); }
.band .sect-head { border: 0 !important; }
/* The panel is exactly as wide as the checklist below it. */
.band .sect-head { width: 100% !important; max-width: 760px !important; }

/* ---------- One column width ----------
   The nav bar is exactly as wide as the page's content column: at most
   760px, and otherwise the same side margins as the content (--pad). */
@media (max-width: 1179px) {
  .nav .nav-in, .has-overlay-nav .nav .nav-in { --bar-pad: max(var(--pad), calc((100% - 760px) / 2)); }
  .nav .nav-links { left: max(var(--pad), calc((100vw - 760px) / 2)) !important; right: max(var(--pad), calc((100vw - 760px) / 2)) !important; }
}

/* ---------- Closing: just the sky ----------
   No longer a tall photo of her: the band is only as tall as its words and
   the footer, showing the top of the picture (open sky). The space from the
   marigold band down to the headline equals the space from the last line
   of words down to the footer card. */
.closing {
  --close-gap: clamp(72px, 8vw, 120px);
  min-height: 0 !important; justify-content: flex-start !important; gap: var(--close-gap) !important;
  padding-top: var(--close-gap) !important;
}
.closing .img img, .closing .img--fill img { object-position: 50% 50% !important; }
@media (max-width: 700px) { .closing .img img, .closing .img--fill img { object-position: 12% 50% !important; } }
.closing::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.14) 100%) !important; }
.closing-alt { display: none; }   /* provider link: the site is consumer-only; providers are in the footer */

/* The hero photo gets the same film grain as every other photo on the site
   (over the photo, under the words and the ask box). */
.hero-l--room .hero-l-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: var(--grain); background-size: 240px;
  mix-blend-mode: overlay; opacity: var(--grain-strength);
}
/* One brightness at every width (phones used to step darker at 700px). */

/* Phone-style bar, top of the homepage: How it works and Get started sit at
   the photo's edges, where the desktop nav puts them, so nothing jumps at
   1180px. Once you scroll, the white bar gathers into the content column. */
@media (max-width: 1179px) {
  .has-overlay-nav .nav.is-top:not(.is-open) .nav-in { --bar-pad: calc(var(--inset) + clamp(16px, 2.2vw, 32px) - 6px); }
  .has-overlay-nav .nav .nav-in { transition: padding .35s cubic-bezier(.4, 0, .2, 1); }
  .has-overlay-nav .nav .nav-cta-m { transition: right .35s cubic-bezier(.4, 0, .2, 1), background-color .15s ease !important; }
}
@media (max-width: 1179px) and (prefers-reduced-motion: reduce) {
  .has-overlay-nav .nav .nav-in, .has-overlay-nav .nav .nav-cta-m { transition: none !important; }
}

/* ---------- How it works, static (after Nolla) ----------
   All three steps visible at once, nothing pinned, nothing folds. The class
   how--static is added by parlor.js (?how=scroll brings the old flow back).
   how--nolla: one white strip, the steps divided by hairline grey rules.
   how--cards: three separate white cards. */
.how.how--static .steps-stage {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: none !important;
  gap: 0 !important; max-width: 1180px !important; width: 100%; margin: 0 auto; align-items: stretch !important;
}
.how.how--static .steps-stage::before, .how.how--static .steps-stage::after { display: none !important; }
.how.how--static .steps-stage .step,
.how.how--static .steps-stage .step:nth-child(n) {
  display: flex !important; flex-direction: column; width: auto !important; margin: 0 !important;
  padding: clamp(24px, 2.6vw, 36px) !important; text-align: left !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  grid-template-areas: none !important;
}
.how.how--static .steps-stage .step > * { grid-area: auto !important; grid-column: auto !important; grid-row: auto !important; }
.how.how--static .step > .step-dot { order: 1; align-self: flex-start; cursor: default; margin: 0 0 clamp(40px, 5vw, 72px) !important; }
.how.how--static .step > .step-txt { order: 2; display: block !important; padding: 0 !important; }
.how.how--static .step > .step-card { order: 3; margin-top: 22px !important; }
/* every step shown in full */
.how.how--static .step .step-dot, .how.how--static .step.is-active .step-dot, .how.how--static .step.is-done .step-dot {
  width: auto !important; height: auto !important; font-family: var(--text); font-size: clamp(2.2rem, 3.2vw, 3rem) !important;
  font-weight: 300 !important; line-height: 1; color: #B5B0A8 !important;
}
.how.how--static .step .step-dot::before { display: none !important; }
.how.how--static .step-txt h3 { text-align: left !important; color: #1F1A17 !important; padding: 0 !important; margin: 0 0 8px !important; cursor: default; font-size: clamp(1.25rem, 1.7vw, 1.5rem) !important; }
.how.how--static .step-txt p:last-child { max-height: none !important; opacity: 1 !important; margin: 0 !important; text-align: left !important; color: #6B6660 !important; font-size: clamp(1rem, 1.15vw, 1.08rem); line-height: 1.5; max-width: none !important; }
.how.how--static .steps-stage .step > .step-card { max-height: none !important; overflow: visible !important; opacity: 1 !important; transform: none !important; width: 100% !important; justify-self: stretch !important; }
.how.how--static .step .glass { opacity: 1 !important; transform: none !important; }
.how.how--static .wrap { min-height: 0 !important; zoom: 1 !important; }

/* Nolla: one white strip, hairline grey dividers, rounded outer corners */
.how.how--nolla .steps-stage { background: #fff; border-radius: 22px; overflow: hidden; }
.how.how--nolla .steps-stage .step + .step { border-left: 1px solid rgba(17, 17, 17, 0.08) !important; }
.how.how--nolla .step-card .glass { background: #F6F5F2 !important; border-color: transparent !important; }

/* Cards: three white cards with room between */

/* Phones and narrow windows: stacked */
@media (max-width: 900px) {
  .how.how--static .steps-stage { grid-template-columns: 1fr !important; }
  .how.how--static .step > .step-dot { margin-bottom: 20px !important; }
  .how.how--nolla .steps-stage .step + .step { border-left: 0 !important; border-top: 1px solid rgba(17, 17, 17, 0.08) !important; }
  .how.how--static .steps-stage .step:nth-child(n) { padding: 24px 22px !important; }
}
.how.how--static .steps-stage .step > .step-txt p:last-child, .how.how--static .step-txt h3 { text-align: left !important; justify-self: auto !important; }
.how.how--static .steps-stage .step:nth-child(n) > .step-txt p:last-child { color: #6B6660 !important; }
.how.how--static .steps-stage .step:nth-child(n) .step-txt h3 { color: #1F1A17 !important; }
/* Static How it works spacing: the heading closer to the hero, more air
   between the heading and the steps. */
.how.how--static { padding-top: clamp(32px, 3vw, 44px) !important; }
.how.how--static .sect-head { margin-bottom: clamp(28px, 4vw, 56px) !important; }

/* Side by side, the three steps share their rows (subgrid): numbers on one
   line, titles on one line (sized to the longest), text on one line, and
   the example cards all starting at the same height. */
@media (min-width: 901px) {
  .how.how--static .steps-stage { grid-template-rows: auto auto auto auto !important; }
  .how.how--static .steps-stage .step:nth-child(n) {
    display: grid !important; grid-row: span 4 !important; grid-template-rows: subgrid !important; row-gap: 0 !important;
    align-content: start;
  }
  .how.how--static .step > .step-txt { display: contents !important; }
  .how.how--static .step > .step-dot { grid-row: 1 !important; }
  .how.how--static .step > .step-txt h3 { grid-row: 2 !important; align-self: end; }
  .how.how--static .step > .step-txt p:last-child { grid-row: 3 !important; align-self: start; }
  .how.how--static .step > .step-card { grid-row: 4 !important; align-self: start; }
}
@media (min-width: 901px) {
  .how.how--static .steps-stage .step:nth-child(n) { grid-template-columns: minmax(0, 1fr) !important; column-gap: 0 !important; }
  .how.how--static .steps-stage .step > * { grid-column: 1 !important; justify-self: stretch !important; }
  .how.how--static .step > .step-dot { justify-self: start !important; }
}
@media (min-width: 901px) {
  .how.how--static .steps-stage .step > .step-txt h3,
  .how.how--static .steps-stage .step > .step-txt p:last-child { grid-area: auto !important; grid-column: 1 !important; justify-self: stretch !important; text-align: left !important; }
  .how.how--static .steps-stage .step > .step-txt h3 { grid-row: 2 !important; }
  .how.how--static .steps-stage .step > .step-txt p:last-child { grid-row: 3 !important; }
}
.how.how--static .steps-stage .step:nth-child(n) > .step-card { margin: 22px 0 0 !important; }

/* ---------- How it works: the story pictures (after Baba) ----------
   Real faces and one calm card per step. parlor.js plays each once when it
   scrolls into view (.is-playing, then .is-done); with reduced motion, or
   before the script runs, the finished state shows. */

/* Waiting to play (set by parlor.js before the story scrolls in) */
/* Playing */

/* Softer story motion: lines fade up into place, ticks settle rather than
   pop, chips and tags ease in. */

/* Story pictures in black and white: dark ticks and chips, a grey ring and
   dot; no marigold, so they sit quietly under the words. */

/* ---------- Story tags, smooth ----------
   The call wave and "Call ended" (and "Working on it" / "All handled") share
   one slot between the faces and cross-fade in place, so nothing jumps. When
   the call ends the slot widens a touch and the faces ease apart. */
/* step 2: wave while talking, then Call ended; the faces part slightly */
/* step 3: Working on it, then All handled */
/* undo the earlier show/hide switches that caused the jumps */
/* Equal-width face columns, so the tag between them sits dead centre. */
/* Step 3: the faces sit close around the tag, like step 2's, not spread to the edges. */

/* ---------- Nav: just the logo and "Say hello" ----------
   How it works leaves the nav (it is the next thing on the page). The
   button gets its own colour, a deep teal by default; ?cta= compares
   others while we choose. */
.nav .nav-menu { display: none !important; }
:root { --cta: #1F5F5B; --cta-hover: #184D4A; }
.nav .nav-cta, .nav .nav-cta-m, .nav.is-over-photo .nav-cta { background: var(--cta) !important; color: #fff !important; }
.nav .nav-cta::before, .nav .nav-cta-m::before { content: none !important; }
.nav .nav-cta:hover, .nav .nav-cta-m:hover { background: var(--cta-hover) !important; }

/* ---------- The bar in marigold, everything on it white ----------
   Once the bar forms (and on inner pages), it is marigold; the wordmark,
   the sun (white with marigold eyes) and "Say hello" (a white pill with
   dark words) sit on it in white. */
.nav { --sky: var(--accent); }
.nav .wordmark { color: #fff !important; }
.nav .wordmark .sun { box-shadow: inset 0 0 0 999px rgba(252, 248, 241, .94) !important; }
.nav .wordmark .sun::before, .nav .wordmark .sun::after { background: #D08A22 !important; }
.nav .nav-cta, .nav .nav-cta-m, .nav.is-over-photo .nav-cta { background: #fff !important; color: #231C18 !important; }
.nav .nav-cta:hover, .nav .nav-cta-m:hover { background: #FFF8EC !important; }
.nav-bar { background: var(--accent) !important; }
.nav.is-top:not(.is-open) .nav-bar { background: transparent !important; }
/* Say hello: dusty rose with marigold words (trying it). */
.nav .nav-cta, .nav .nav-cta-m, .nav.is-over-photo .nav-cta { background: var(--pal-paper) !important; color: #F0A418 !important; }
.nav .nav-cta:hover, .nav .nav-cta-m:hover { background: #9C4F57 !important; }
/* Say hello: rose with white words (readable at 4.6 : 1). */
.nav .nav-cta, .nav .nav-cta-m, .nav.is-over-photo .nav-cta { background: var(--pal-paper) !important; color: #fff !important; }

/* Option: the logo on the left (html.logo-left), Say hello on the right. */
@media (min-width: 1180px) {
  .logo-left .nav .wordmark { left: calc(var(--inset) + clamp(16px, 2.2vw, 32px)) !important; translate: 0 -50% !important; }
}
@media (max-width: 1179px) {
  .logo-left .nav .nav-bar .wordmark { left: calc(var(--bar-pad, 12px) + 14px) !important; translate: 0 -50% !important; transition: left .35s cubic-bezier(.4, 0, .2, 1); }
}

/* ---------- The nav floats, with no bar ----------
   The logo and Say hello stay at the top as you scroll, on their own: no
   pill, no morph. Over the hero photo the logo is white; past it (and on
   every other page) it is the dark wordmark with the marigold sun, eased. */
.nav.is-past-hero .wordmark { color: #1F1A17 !important; }
.nav.is-past-hero .wordmark .sun { box-shadow: inset 0 0 0 999px rgba(252, 248, 241, 0) !important; }
.nav.is-past-hero .wordmark .sun::before, .nav.is-past-hero .wordmark .sun::after { background: #2A2118 !important; }
.nav .nav-shadow, .nav .nav-bg { display: none !important; }
.nav .nav-bar { background: transparent !important; box-shadow: none !important; }
/* Past the hero the logo floats over moving content, so it gets its own
   small frosted chip (no bar, no morph) to stay readable. Say hello is
   already a solid button. */
.nav .wordmark::after {
  content: ""; position: absolute; z-index: -1; inset: -8px -16px -10px -12px; border-radius: 999px;
  background: rgba(253, 252, 250, .82); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .08); opacity: 0; transition: opacity .3s ease;
}
.nav .wordmark { isolation: isolate; }
.nav.is-past-hero .wordmark::after { opacity: 1; }

/* ---------- Palette (for the picker; html[data-pal] turns it on) ----------
   Five roles: the page ground, the big band, its heading panel, the words on
   the band's list, the action buttons, and the hero's highlighted words. */
html[data-pal] { --paper: var(--pal-paper); }
html[data-pal] .sect--night, html[data-pal] .sect--espresso, html[data-pal] .how { --night: var(--pal-paper); --espresso: var(--pal-paper); }
html[data-pal] .band, html[data-pal] .band .plan { background-color: var(--pal-band) !important; }
html[data-pal] .band .sect-head { background: var(--pal-panel) !important; }
html[data-pal] .band .plan, html[data-pal] .band .plan-what { color: var(--pal-band-text) !important; }
html[data-pal] .band .plan-status { color: color-mix(in srgb, var(--pal-band-text) 72%, transparent) !important; }
html[data-pal] .band .plan li + li, html[data-pal] .band .plan [class*="row"] + [class*="row"] { border-color: color-mix(in srgb, var(--pal-band-text) 16%, transparent) !important; }
html[data-pal] .nav .nav-cta, html[data-pal] .nav .nav-cta-m, html[data-pal] .nav.is-over-photo .nav-cta,
html[data-pal] .band .pill, html[data-pal] .closing .pill { background: var(--pal-cta) !important; color: var(--pal-cta-text) !important; }
html[data-pal] .band .pill::before, html[data-pal] .closing .pill::before { content: none !important; }
html[data-pal] .hero-l-title .hl, html[data-pal] .hero-l--room .hero-l-title .stop { color: var(--pal-hl) !important; }

/* The band's own marigold gradient gives way to the chosen colour, with a
   soft light-to-dark glow of its own. */
html[data-pal] .band { background-image: radial-gradient(90% 90% at 20% 10%, rgba(255, 255, 255, .10), transparent 70%), radial-gradient(90% 90% at 80% 100%, rgba(0, 0, 0, .16), transparent 70%) !important; }

/* ---------- One typeface: Plus Jakarta Sans for everything ---------- */
:root { --text: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --sans: var(--text); }
body, button, input, textarea, select { font-family: var(--text); }

/* ================= Pine ================= 
   The chosen palette, now the site's own: a rose page and band, a deeper
   rose panel, white words on the band, soft-ink buttons with white words,
   soft-ink highlight words in the hero. The logo sits on the left. */
:root {
  --pal-paper: #56603A; --pal-band: #56603A; --pal-panel: #56603A; --pal-band-text: #FFFFFF;
  --pal-cta: #F4B942; --pal-cta-hover: #E3A62E; --pal-cta-text: #2A1A10; --pal-hl: #2A1A10;
  --pal-hl-word: #E6D897; --pal-menu: #9A3E26; --pal-tint: #F1F0E2; --pal-card: #FFFFFF;
  --pal-shadow: 30, 20, 10; --pal-glow-hi: 240, 230, 180; --pal-glow-lo: 30, 20, 10;
}

/* Ambient light (after Baba), in rose: a lighter and a deeper glow drift
   slowly across the hero, How it works and the band on the same 28-second
   loop, so the same colour never looks flat. Off for reduced motion. */
html[data-pal] .band, html[data-pal] .hero-l-rotor, html[data-pal] .how {
  background-color: var(--pal-paper) !important;
  background-image:
    radial-gradient(85% 85% at var(--glow-x1) var(--glow-y1), rgba(var(--pal-glow-hi), 0.20), transparent 70%),
    radial-gradient(90% 90% at var(--glow-x2) var(--glow-y2), rgba(var(--pal-glow-lo), 0.18), transparent 70%) !important;
  animation: glow-drift 28s ease-in-out infinite;
}
html[data-pal] .how { animation-delay: -9s; }
html[data-pal] .band { animation-delay: -18s; background-color: var(--pal-band) !important; }
@media (prefers-reduced-motion: reduce) { html[data-pal] .band, html[data-pal] .hero-l-rotor, html[data-pal] .how { animation: none; } }

/* Hero: no photo, the rose frame itself */
html[data-pal] .hero-l--photo .hero-l-stage::before { content: none !important; }
html[data-pal] .hero-l--photo .hero-l-title { text-shadow: none !important; }

/* Words that sit straight on the rose are white */
html[data-pal] .how .sect-head h2, html[data-pal] .how h2 { color: #fff !important; }
html[data-pal] .foot, html[data-pal] .foot a, html[data-pal] .foot span, html[data-pal] .foot-brand span, html[data-pal] .foot-base, html[data-pal] .foot-links a { color: #fff !important; }
html[data-pal] .foot-brand .wordmark { color: #fff !important; }
html[data-pal] .foot .foot-base { border-top-color: rgba(255, 255, 255, .25) !important; }
html[data-pal] .foot-brand .wordmark .sun { box-shadow: inset 0 0 0 999px rgba(252, 248, 241, .94) !important; }
html[data-pal] .foot-brand .wordmark .sun::before, html[data-pal] .foot-brand .wordmark .sun::after { background: #D08A22 !important; }
/* Jakarta is a touch wider: keep the connect pill on one line on phones. */
.connect { white-space: nowrap; }
@media (max-width: 420px) { .connect, .needs-open { font-size: 14.5px !important; } .connect { padding-right: 16px !important; gap: 10px !important; } }

/* ---------- The band's list, lighter ----------
   Ticks are white circles with a deep-rose check (not black and marigold);
   the drawings sit straight on the band as white line art, with no white
   tile behind them and no marigold in them. */
.plan--flat .tick-c { background: #fff !important; color: var(--pal-panel) !important; box-shadow: none !important; }
.plan--flat.is-pending [data-plan-item]:not(.is-done) .tick-c { background: transparent !important; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55) !important; }
.plan-ico { background: none !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; }
.plan-ico img { width: 48px !important; height: 48px !important; }
.plan--flat.is-pending [data-plan-item]:not(.is-done) .plan-ico { opacity: .4; filter: none !important; }
@media (max-width: 700px) { .plan-ico img { width: 40px !important; height: 40px !important; } }

/* ---------- The band, compressed ----------
   Less air: a tighter panel, the list starting closer under it, slimmer
   rows with smaller drawings, and less padding top and bottom. */
.band { padding-top: clamp(40px, 4vw, 56px) !important; padding-bottom: clamp(40px, 4vw, 56px) !important; }
.band .sect-head { padding: clamp(22px, 2.4vw, 30px) clamp(22px, 3.6vw, 48px) !important; margin-bottom: 20px !important; }
.band .sect-lede p { margin: 10px 0 0 !important; }
.band .sect-lede .pill { margin-top: 18px !important; }
.plan--flat .plan-list li { padding: 11px 0 !important; }
.plan-ico img { width: 38px !important; height: 38px !important; }
.plan--flat .plan-list li { grid-template-columns: 30px 44px 1fr auto !important; }
.plan--flat .tick-c { width: 26px !important; height: 26px !important; }
@media (max-width: 700px) {
  .plan--flat .plan-list li { grid-template-columns: 26px 36px 1fr !important; padding: 10px 0 !important; row-gap: 0 !important; }
  .plan-ico img { width: 32px !important; height: 32px !important; }
  .band .sect-head { padding: 20px 18px !important; }
}
.band .sect-head { row-gap: 6px !important; }
.band .sect-lede .pill { margin-top: 16px !important; }

/* The floating logo's chip takes the page colour (rose), and the logo on it
   stays white with the white sun, as on the hero. */
html[data-pal] .nav .wordmark::after { background: color-mix(in srgb, var(--pal-paper) 92%, transparent) !important; box-shadow: 0 6px 20px rgba(var(--pal-shadow), .18) !important; }
html[data-pal] .nav.is-past-hero .wordmark { color: #fff !important; }
html[data-pal] .nav.is-past-hero .wordmark .sun { box-shadow: inset 0 0 0 999px rgba(252, 248, 241, .94) !important; }
html[data-pal] .nav.is-past-hero .wordmark .sun::before, html[data-pal] .nav.is-past-hero .wordmark .sun::after { background: #D08A22 !important; }

/* ---------- What we help with ----------
   Four white cards on the rose: a group, one line, and its topics as quiet
   chips. Two by two on wide screens, stacked on phones. */
.help { padding: clamp(40px, 5vw, 72px) 0 !important; }
.help-head { text-align: center; max-width: 40em; margin: 0 auto clamp(24px, 3.5vw, 44px); }
.help-head h2 { margin: 0; color: #fff; font-family: "Plus Jakarta Sans", var(--text); font-weight: 700; letter-spacing: -0.025em; font-size: var(--headline); line-height: 1.08; }
.help-head p { margin: 14px auto 0; color: rgba(255, 255, 255, .88); font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.5; }
.help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 1180px; margin: 0 auto; }
.help-card { background: #fff; border-radius: 22px; padding: clamp(22px, 2.6vw, 32px); }
.help-card h3 { margin: 0 0 6px; font-size: clamp(1.2rem, 1.6vw, 1.4rem); color: #1F1A17; }
.help-card > p { margin: 0 0 16px; color: #6B6660; font-size: 15.5px; line-height: 1.5; }
.help-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.help-chips a {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 999px; text-decoration: none;
  background: #F4F1EE; color: #1F1A17; font-size: 15px; font-weight: 500; transition: background-color .2s ease, color .2s ease;
}
.help-chips a:hover, .help-chips a:focus-visible { background: var(--pal-paper); color: #fff; }
.help-more { text-align: center; margin: clamp(22px, 3vw, 32px) 0 0; color: rgba(255, 255, 255, .9); font-size: 16px; }
.help-more a { color: #fff; font-weight: 600; text-underline-offset: 4px; }
@media (max-width: 800px) { .help-grid { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .help-chips a { font-size: 14.5px; min-height: 36px; padding: 0 12px; } }
/* Phones: the first five topics per group, and a "+ more" chip for the rest. */
.help-chips .help-more-btn { display: none; }
@media (max-width: 800px) {
  .help-card:not(.is-open) .help-chips li:nth-child(n+6):not(.help-more-li) { display: none; }
  .help-chips .help-more-btn { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px dashed rgba(31, 26, 23, .3); background: none; color: #1F1A17; font: 500 15px var(--text); cursor: pointer; }
  .help-card.is-open .help-more-li { display: none; }
}
/* Still pictures: step 2 shows a quiet sound-wave between Ruth and the team
   (a conversation, not one that has ended). */

/* How it works: words only. The pictures under each step are gone. */
.how .steps-stage .step > .step-card { display: none !important; }
.how.how--static .steps-stage .step:nth-child(n) { padding-bottom: clamp(26px, 2.8vw, 38px) !important; }
.how.how--static .step > .step-dot { margin-bottom: 20px !important; }

/* Marigold stays in the logo only. The ask box's send arrow is soft ink once
   you type, its focus ring is a quiet white glow, and the help pill's sun is
   white. */
.nbox:focus-within { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18), 0 0 0 3px rgba(255, 255, 255, 0.55) !important; }
.nbox-go:hover, .nbox.has-text .nbox-go { background: var(--pal-cta) !important; }
.needs-open img, .needs-head img { filter: brightness(0) invert(1); opacity: .9; }

/* Test: the superhero sun (see parlor.js). Twice the sun's size, centred on
   it, so the cape and the raised fist sit just outside the circle. */

/* The superhero's hover: no rays. The cape ripples in the wind (it waves
   from the shoulders) and the fist gives a little pump. */

/* ================= Every page on rose =================
   Anything that sits straight on the rose is white (pure white: anything
   lighter fails contrast on this rose). White surfaces (cards, forms,
   callouts, FAQs, the How it works strip) keep their dark words. The old
   marigold blocks on the inner pages become a deeper rose; every primary
   button is soft ink with white words; the footer is a deep-rose card. */
html[data-pal] main :is(h1, h2, h3, h4, h5, p, li, td, th, strong, b, em, span, a, small, dt, dd, label, figcaption, button, blockquote, cite)
  :not(:is(.form-card, .check, .callrow, .steps-stage, .tile, .file, details, .callout, .answer, .help-card, .cov-card, .cv-table-wrap, .cv-steps, .pr-strip, .cv-faq-list, .nbox, .measure, .tag, .needs, .connect, .pill, .flow, [aria-selected="true"]) *) {
  color: #fff;
}
html[data-pal] main :is(h1, h2, h3, h4, h5, p, li, td, th, strong, b, em, span, a, small, dt, dd, label, figcaption, blockquote, cite):not(:is(.form-card, .check, .callrow, .steps-stage, .tile, .file, details, .callout, .answer, .help-card, .cov-card, .cv-table-wrap, .cv-steps, .pr-strip, .cv-faq-list, .nbox, .measure, .tag, .needs, .connect, .pill, .flow, [aria-selected="true"]) *):not(.hl):not(.stop):not(.pill):not(.tag):not(.measure):not(.callrow) {
  color: #fff !important;
}
html[data-pal] main [role="tab"]:not([aria-selected="true"]) { color: #fff !important; }
html[data-pal] main [role="tab"][aria-selected="true"], html[data-pal] main [role="tab"][aria-selected="true"] * { color: #1F1A17 !important; }
/* links straight on rose: white, with a soft white underline */
html[data-pal] main a:not(.pill):not(.cov-card):not(:is(.form-card, .tile, .file, details, .callout, .answer, .help-card, .cov-card, .nbox, .check) *) { text-decoration-color: rgba(255, 255, 255, .55) !important; }
/* tables and rules on rose */
html[data-pal] main :is(table, tr, td, th):not(:is(.callout, .answer) *) { border-color: rgba(255, 255, 255, .25) !important; }
html[data-pal] main hr { border-color: rgba(255, 255, 255, .25) !important; }
/* the old marigold blocks: a deeper rose */
html[data-pal] .sect--marigold:not(.band) { background: var(--pal-panel) !important; animation: none !important; }
html[data-pal] .sect--marigold:not(.band)::before { opacity: .12 !important; }
/* buttons */
html[data-pal] main .pill--accent, html[data-pal] .form-card .submit { background: var(--pal-cta) !important; color: #fff !important; }
html[data-pal] main .pill--accent::before, html[data-pal] .form-card .submit::before { content: none !important; }
html[data-pal] main .pill--accent:hover, html[data-pal] .form-card .submit:hover { background: var(--pal-cta-hover) !important; }
html[data-pal] main .pill--ghost:not(:is(.tile, .file, .callout) *) { color: #fff !important; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6) !important; background: transparent !important; }
/* sign up: the reassurance ticks under the form */
html[data-pal] .signup .checks li::before { background: #fff !important; color: var(--pal-panel) !important; }
/* the footer: a deep-rose card, white words, everywhere */
html[data-pal] .foot { background: var(--pal-panel) !important; box-shadow: none !important; }
html[data-pal] .foot, html[data-pal] .foot * { color: #fff !important; }
html[data-pal] .foot a { text-decoration-color: rgba(255, 255, 255, .5); }
html[data-pal] .foot .foot-base { border-top-color: rgba(255, 255, 255, .22) !important; }
/* small contrast fixes on the homepage */
html[data-pal] .hero-l-title .hl, html[data-pal] .hero-l--room .hero-l-title .stop { color: var(--pal-cta-hover) !important; }
html[data-pal] .nbox-trust, html[data-pal] .help-head p, html[data-pal] .help-more { color: #fff !important; }
html[data-pal] .band .plan-status { color: #fff !important; opacity: .92; }
.how.how--static .step .step-dot { color: #948D84 !important; }
/* The "what it takes" steps on the inner pages: white cards, dark words. */
html[data-pal] .flow li { background: #fff !important; border-radius: 18px; }
html[data-pal] .flow li, html[data-pal] .flow li * { color: #1F1A17 !important; }
html[data-pal] .flow li p { color: #5C5650 !important; }
.how.how--static .step .step-dot, .how.how--static .step .step-dot span { color: #857E75 !important; }
/* The footer's surround on the inner pages is the rose too, to the very bottom. */
html[data-pal] .foot-wrap { background: transparent !important; }
html[data-pal] { background: var(--pal-paper); }

/* ---------- Sign-up form: who, names side by side, state, insurance ---------- */
.form-card fieldset { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; }
.form-card legend { font-size: 15px; font-weight: 600; color: var(--navy-fixed); margin-bottom: 9px; padding: 0; }
.form-card .opt { font-weight: 400; color: var(--ink-soft); }
.form-card .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-card .field-row .field { margin-bottom: 20px; }
.form-card .who-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.form-card .who-opts label {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px 0 12px; border-radius: 12px; cursor: pointer;
  border: 1.5px solid var(--rule); background: #FBF7F0; font-size: 16px; font-weight: 500; color: var(--ink);
}
.form-card .who-opts input { width: 18px; height: 18px; margin: 0; accent-color: var(--pal-cta); }
.form-card .who-opts label:has(input:checked) { border-color: var(--pal-cta); background: #fff; box-shadow: inset 0 0 0 1px var(--pal-cta); }
.form-card .who-opts label:has(input:focus-visible) { outline: 2px solid var(--navy-fixed); outline-offset: 2px; }
.form-card select {
  width: 100%; height: 52px; padding: 0 40px 0 14px; font: inherit; font-size: 17px; color: var(--ink);
  background: #FBF7F0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23231C18' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center / 12px;
  border: 1.5px solid var(--rule); border-radius: 12px; appearance: none; -webkit-appearance: none;
}
.form-card select:focus-visible { outline: 2px solid var(--navy-fixed); outline-offset: 1px; }
.form-card select[aria-invalid="true"] { border-color: var(--alert); background-color: #FDF3EC; }
.form-card .for-them { margin: 4px 0 0; }
.form-card .group-label { margin: 6px 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
@media (max-width: 420px) { .form-card .field-row { grid-template-columns: 1fr; gap: 0; } }

/* Sign up, "What happens next": a small heading, and plain white check marks
   rather than filled circles (which read as empty radio buttons). */
.signup .next-title { margin: 0 0 10px; font-size: clamp(1.3rem, 1.8vw, 1.6rem); color: #fff; text-align: center; }
html[data-pal] .signup .checks li::before {
  content: "" !important; width: 18px !important; height: 18px !important; top: 4px !important;
  background: #fff !important; border-radius: 0 !important; box-shadow: none !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.signup .page-sub { max-width: 34em; margin: 14px auto 0; text-align: center; color: #fff; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.5; }

/* Sign-up page: the logo sits on the page (no chip), the nav scrolls away with
   it, and the button on the right goes back home. */
.nav-back .nav { position: absolute !important; }
.nav-back .nav .wordmark::after { display: none !important; }
.nav-back .nav .wordmark, .nav-back .nav.is-past-hero .wordmark { color: #fff !important; }
.nav-back .nav .wordmark .sun { box-shadow: inset 0 0 0 999px rgba(252, 248, 241, .94) !important; }
.nav-back .nav .wordmark .sun::before, .nav-back .nav .wordmark .sun::after { background: #D08A22 !important; }
.nav-back .nav-back-btn span { margin-right: 4px; }

/* Sign-up page: the open sky, at the same scale as the homepage's closing.
   It scrolls with the page like everything else. The photo covers one screen
   height at the top, then melts into its own sky blue, so it is never
   stretched; the same shade and film grain sit over all of it. */
html[data-pal] .signup.sect {
  --sky-h: 726px;   /* the height the homepage closing shows the sky at, so the scale matches */
  position: relative; isolation: isolate;
  background:
    linear-gradient(180deg, rgba(18, 38, 58, .58) 0, rgba(18, 38, 58, .56) 330px, rgba(18, 38, 58, .40) 560px, rgba(18, 38, 58, .40) var(--sky-h), rgba(18, 38, 58, .44) 100%),
    linear-gradient(180deg, rgba(95, 140, 175, 0) calc(var(--sky-h) - 260px), #5F8CAF var(--sky-h)),
    url("/images/home/closing-sky.jpg") 50% 0 / auto var(--sky-h) no-repeat,
    #5F8CAF !important;
}
html[data-pal] .signup.sect::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain); background-size: 240px; mix-blend-mode: overlay; opacity: var(--grain-strength);
}
@media (min-width: 2640px) { html[data-pal] .signup.sect { background-size: auto, auto, 100% auto, auto !important; } }

/* The sun's eyes in the page's rose, so they whisper rather than shout. */
html .wordmark .sun::before, html .wordmark .sun::after,
html[data-pal] .nav .wordmark .sun::before, html[data-pal] .nav .wordmark .sun::after,
html[data-pal] .nav.is-past-hero .wordmark .sun::before, html[data-pal] .nav.is-past-hero .wordmark .sun::after,
html[data-pal] .foot-brand .wordmark .sun::before, html[data-pal] .foot-brand .wordmark .sun::after,
.nav-back .nav .wordmark .sun::before, .nav-back .nav .wordmark .sun::after { background: var(--pal-paper) !important; }

/* Homepage closing: the same deeper shade as the sign-up sky, so the smaller
   line under the headline reads clearly. */
html[data-pal] .closing::before { background: linear-gradient(180deg, rgba(18, 38, 58, .56) 0%, rgba(18, 38, 58, .56) 48%, rgba(18, 38, 58, .40) 72%, rgba(18, 38, 58, .40) 100%) !important; }


/* Sign-up headings and body in the site's shared styles: the headline like
   every section headline, the lines under it like the band's body text. */
html[data-pal] .signup .page-h1 {
  font-family: "Plus Jakarta Sans", var(--text) !important; font-weight: 700 !important;
  font-size: var(--headline) !important; line-height: 1.08 !important; letter-spacing: -0.025em !important;
}
html[data-pal] .signup :is(.page-sub, .page-lede) { font-size: clamp(17px, 1.4vw, 20px) !important; font-weight: 500 !important; line-height: 1.45 !important; }
html[data-pal] .signup .checks li { font-weight: 500; }
/* "What we help with" intro in the same body style as the band's line. */
html[data-pal] .help-head p { font-size: clamp(17px, 1.4vw, 20px) !important; font-weight: 500 !important; line-height: 1.45 !important; }
/* The band's tick: a deep-rose check in the white circle. */
html[data-pal] main .plan--flat .tick-c:not(#_), html[data-pal] main .plan--flat .tick-c:not(#_) svg, html[data-pal] main .plan--flat .tick-c:not(#_) path { color: var(--pal-panel) !important; }   /* :not(#_) outranks the broad "white on rose" rule */
/* The consent wording, a little smaller (the words themselves are unchanged). */
.form-card .check label { font-size: 13.5px !important; line-height: 1.5 !important; }
.form-card .smsterms { font-size: 12.5px !important; line-height: 1.55 !important; margin-top: 10px !important; }

/* The hero card in the band panel's deep rose (its glow and grain stay). */
html[data-pal] .hero-l--photo .hero-l-rotor { background-color: var(--pal-panel) !important; }   /* with its grain and glow on top, this renders as the panel's var(--pal-panel) */
/* Same drift as before, softer light patch, so it reads as the deep rose. */
html[data-pal] .hero-l--photo .hero-l-rotor {
  background-image:
    radial-gradient(85% 85% at var(--glow-x1) var(--glow-y1), rgba(var(--pal-glow-hi), 0.09), transparent 70%),
    radial-gradient(90% 90% at var(--glow-x2) var(--glow-y2), rgba(var(--pal-glow-lo), 0.16), transparent 70%) !important;
}
/* advocate and Medicare: a pale blush that stands out from the white words
   and reads clearly on the deep rose. */
html[data-pal] .hero-l-title .hl, html[data-pal] .hero-l--room .hero-l-title .stop { color: var(--pal-hl-word) !important; }

/* The hero card exactly like the band's panel: flat deep rose, no grain, no glow. */
html[data-pal] .hero-l--photo .hero-l-rotor { background: var(--pal-panel) !important; animation: none !important; }
html[data-pal] .hero-l--photo .hero-l-stage::after { content: none !important; }

/* TRY: no frame. The hero is one full-bleed block of deep rose. */
html[data-pal] .hero-l--photo { padding: 0 !important; background: var(--pal-panel) !important; }
html[data-pal] .hero-l--photo .hero-l-rotor { border-radius: 0 !important; height: max(560px, 100svh) !important; }
html[data-pal] .hero-l--photo .hero-l-rotor::after { border-radius: 0 !important; }
/* The drifting glow back on the full-bleed hero (no grain), tuned for the
   deep rose so it stays deep: a soft light patch and a soft shadow drifting. */
html[data-pal] .hero-l--photo .hero-l-rotor {
  background-color: var(--pal-panel) !important;
  background-image:
    radial-gradient(85% 85% at var(--glow-x1) var(--glow-y1), rgba(var(--pal-glow-hi), 0.12), transparent 70%),
    radial-gradient(90% 90% at var(--glow-x2) var(--glow-y2), rgba(var(--pal-glow-lo), 0.22), transparent 70%) !important;
  animation: glow-drift 28s ease-in-out infinite !important;
}
@media (prefers-reduced-motion: reduce) { html[data-pal] .hero-l--photo .hero-l-rotor { animation: none !important; } }

/* How it works under the same open sky as the closing: the photo at the same
   scale, the same shade (deeper where the heading sits), and the same grain. */
html[data-pal] .how {
  position: relative; isolation: isolate; animation: none !important;
  background:
    linear-gradient(180deg, rgba(18, 38, 58, .56) 0%, rgba(18, 38, 58, .56) 40%, rgba(18, 38, 58, .44) 100%),
    url("/images/home/closing-sky.jpg") 50% 50% / cover no-repeat,
    #5F8CAF !important;
}
html[data-pal] .how::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain); background-size: 240px; mix-blend-mode: overlay; opacity: var(--grain-strength);
}
/* The hero: flat deep rose again, no drifting glow. */
html[data-pal] .hero-l--photo .hero-l-rotor { background: var(--pal-panel) !important; animation: none !important; }

/* ---------- Am I covered? ----------
   White question cards on the rose, each one a link to the form. */
.cov { padding: clamp(40px, 5vw, 72px) 0 !important; }
.cov .help-head h2 { margin: 0; color: #fff; font-family: "Plus Jakarta Sans", var(--text); font-weight: 700; letter-spacing: -0.025em; font-size: var(--headline); line-height: 1.08; }
.cov-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 1180px; margin: 0 auto; }
.cov-card {
  display: flex; flex-direction: column; gap: 8px; padding: clamp(22px, 2.6vw, 30px); border-radius: 22px; background: #fff; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cov-card:hover, .cov-card:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(var(--pal-shadow), .18); }
.cov-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
html[data-pal] .cov-card h3 { margin: 0; font-size: clamp(1.15rem, 1.5vw, 1.3rem); color: #1F1A17 !important; }
html[data-pal] .cov-card p { margin: 0; color: #5C5650 !important; font-size: 16px; line-height: 1.5; }
html[data-pal] .cov-card .cov-go { margin-top: auto; padding-top: 8px; color: var(--pal-panel) !important; font-weight: 600; font-size: 15.5px; }
html[data-pal] .cov-card .cov-go span { color: inherit !important; }
@media (max-width: 800px) { .cov-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .cov-card { transition: none; } }

/* ---------- Am I covered? page ---------- */
.cv-hero { padding: clamp(110px, 12vw, 160px) 0 clamp(40px, 5vw, 64px) !important; text-align: center; }
html[data-pal] .cv-kicker { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.cv-h1 { margin: 0; font-family: "Plus Jakarta Sans", var(--text); font-weight: 700; letter-spacing: -0.025em; font-size: var(--headline); line-height: 1.08; }
.cv-lede { max-width: 32em; margin: 14px auto 0; font-size: clamp(17px, 1.4vw, 20px); font-weight: 500; line-height: 1.45; }
.cv-check { max-width: 820px; margin: clamp(26px, 3.5vw, 40px) auto 0; padding: clamp(18px, 2.4vw, 26px); border-radius: 22px; background: #fff; text-align: left; }
.cv-fields { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.cv-field { display: grid; gap: 6px; }
html[data-pal] .cv-field span { font-size: 14px; font-weight: 600; color: #1F1A17 !important; }
.cv-field select {
  width: 100%; height: 52px; padding: 0 40px 0 14px; font: inherit; font-size: 17px; color: #1F1A17;
  background: #FBF7F0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23231C18' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center / 12px;
  border: 1.5px solid rgba(17, 17, 17, .14); border-radius: 12px; appearance: none; -webkit-appearance: none;
}
.cv-go { height: 52px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--pal-cta); color: #fff; font: 600 16px var(--text); cursor: pointer; white-space: nowrap; }
.cv-go:hover { background: var(--pal-cta-hover); }
html[data-pal] .cv-err { margin: 8px 0 0; color: #A33B2E !important; font-size: 14px; min-height: 0; }
.cv-result { margin-top: 18px; padding: 18px 20px; border-radius: 16px; background: var(--pal-tint); }
html[data-pal] .cv-result p { margin: 0 0 6px; color: #3B332D !important; font-size: 16px; line-height: 1.5; }
html[data-pal] .cv-result .cv-result-title { color: #1F1A17 !important; font-size: 19px; font-weight: 700; }
.cv-result .pill { margin-top: 10px; }
html[data-pal] .cv-note { margin: 14px 0 0; color: #6B6560 !important; font-size: 13px; line-height: 1.5; }
.cv-compare, .cv-promise, .cv-faq { padding: clamp(40px, 5vw, 64px) 0 !important; }
.cv-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 980px; margin: 0 auto; }
.cv-card { padding: clamp(24px, 3vw, 34px); border-radius: 22px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.cv-card--us { background: #fff; box-shadow: none; }
.cv-card-k { margin: 0; font-size: 15px; font-weight: 600; }
.cv-big { margin: 10px 0 0; font-family: "Plus Jakarta Sans", var(--text); font-weight: 700; font-size: clamp(2.4rem, 4vw, 3.4rem); letter-spacing: -0.03em; line-height: 1; }
.cv-big-sub { margin: 6px 0 18px; font-size: 16px; }
.cv-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.cv-list li { position: relative; padding-left: 28px; font-size: 16px; line-height: 1.45; }
.cv-list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; }
.cv-list--yes li::before { background: var(--pal-panel); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.cv-list--no li::before { background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
html[data-pal] .cv-card--us :is(.cv-card-k, .cv-big, .cv-big-sub, li) { color: #1F1A17 !important; }
html[data-pal] .cv-card--us .cv-big-sub, html[data-pal] .cv-card--us li { color: #3B332D !important; }
.cv-steps { list-style: none; counter-reset: s; max-width: 760px; margin: 0 auto; padding: 0; display: grid; gap: 12px; }
.cv-steps li { counter-increment: s; position: relative; padding: 20px 22px 20px 64px; border-radius: 18px; background: #fff; font-size: 16.5px; line-height: 1.5; }
.cv-steps li::before { content: counter(s); position: absolute; left: 22px; top: 18px; font-size: 22px; font-weight: 400; color: var(--pal-panel); }
html[data-pal] .cv-steps li, html[data-pal] .cv-steps li * { color: #3B332D !important; }
html[data-pal] .cv-steps li b { color: #1F1A17 !important; }
.cv-faq-list { max-width: 760px; margin: 0 auto; display: grid; gap: 10px; }
.cq { border-radius: 16px; background: #fff; }
.cq summary { list-style: none; cursor: pointer; padding: 18px 22px; display: flex; justify-content: space-between; gap: 12px; font-size: 17px; font-weight: 600; }
.cq summary::-webkit-details-marker { display: none; }
.cq summary::after { content: "+"; font-size: 22px; font-weight: 400; line-height: 1; transition: transform .2s ease; }
.cq[open] summary::after { transform: rotate(45deg); }
.cq p { margin: 0; padding: 0 22px 20px; font-size: 16px; line-height: 1.5; }
html[data-pal] .cq summary, html[data-pal] .cq summary * { color: #1F1A17 !important; }
html[data-pal] .cq p { color: #3B332D !important; }
.cov-cta { text-align: center; margin: -8px 0 28px; }
@media (max-width: 760px) {
  .cv-fields { grid-template-columns: 1fr; }
  .cv-go { width: 100%; }
  .cv-cards { grid-template-columns: 1fr; }
}

/* Coverage page: the comparison as one table on a white card. */
.cv-table-wrap { max-width: 980px; margin: 0 auto; padding: clamp(10px, 2vw, 22px) clamp(14px, 3vw, 34px) clamp(22px, 3vw, 32px); border-radius: 24px; background: #fff; }
.cv-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cv-table th, .cv-table td { padding: 16px 12px; text-align: left; vertical-align: top; font-size: 16px; line-height: 1.45; border-bottom: 1px solid rgba(17, 17, 17, .09); }
.cv-table tbody tr:last-child :is(th, td) { border-bottom: 0; }
.cv-table thead :is(th, td) { padding-top: 14px; padding-bottom: 14px; vertical-align: middle; font-size: 15px; font-weight: 600; }
.cv-table thead tr { border-bottom: 1.5px solid rgba(17, 17, 17, .16); }
.cv-table tbody th { width: 26%; font-weight: 600; }
.cv-table .cv-us { background: var(--pal-tint); }
.cv-table thead .cv-us { border-radius: 14px 14px 0 0; }
.cv-table tbody tr:last-child .cv-us { border-radius: 0 0 14px 14px; }
.cv-table b { font-size: 1.35em; font-weight: 700; letter-spacing: -0.01em; }
.cv-wm { font-size: 26px; --sw: 26px; gap: 8px; }
html[data-pal] .cv-table :is(th, td, b, span) { color: #1F1A17 !important; }
html[data-pal] .cv-table td:not(.cv-us) { color: #5C5650 !important; }
html[data-pal] .cv-table .cv-wm, html[data-pal] .cv-table .cv-wm * { color: #1F1A17 !important; }
.cv-table-cta { margin: 22px 0 0; text-align: center; }
@media (max-width: 700px) {
  .cv-table th, .cv-table td { padding: 12px 8px; font-size: 14.5px; }
  .cv-table tbody th { width: 30%; }
  .cv-table b { font-size: 1.2em; }
  .cv-wm { font-size: 21px; --sw: 21px; }
}
.cv-hero { padding-bottom: 8px !important; }
.cv-compare { padding-top: clamp(24px, 3vw, 36px) !important; }
/* Phones: each row's label sits above its two answers, so the columns get the width. */
@media (max-width: 700px) {
  .cv-table, .cv-table thead, .cv-table tbody { display: block; }
  .cv-table tr { display: grid; grid-template-columns: 1fr 1fr; }
  .cv-table thead td { display: none; }
  .cv-table tbody th { grid-column: 1 / -1; width: auto; padding: 14px 8px 4px; border-bottom: 0; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
  .cv-table tbody td { padding: 6px 10px 14px; }
  .cv-table thead .cv-us { border-radius: 12px 0 0 0; }
  .cv-table tbody tr:last-child .cv-us { border-radius: 0 0 0 12px; }
}

/* Comparison table, cleaner: the Parlor column is headed by a deep-rose tab
   with the white logo (as on the site), no tinted column, one hairline
   between rows, equal answer columns, labels quiet. */
.cv-table-wrap { padding: 0 clamp(18px, 3vw, 36px) clamp(24px, 3vw, 32px); overflow: hidden; }
.cv-table .cv-us { background: none !important; border-radius: 0 !important; }
.cv-table thead tr { border-bottom: 0; }
.cv-table thead :is(th, td) { padding: 0 16px; height: 76px; border-bottom: 0; }
.cv-table thead th.cv-us { background: var(--pal-panel) !important; border-radius: 0 0 16px 16px !important; text-align: center; }
.cv-table thead th:not(.cv-us) { text-align: center; }
.cv-table tbody th { width: 28%; padding-left: 0; }
.cv-table tbody td { text-align: center; }
.cv-table :is(th, td) { border-bottom: 1px solid rgba(17, 17, 17, .08); }
.cv-table tbody tr:first-child :is(th, td) { padding-top: 26px; }
html[data-pal] .cv-table tbody th { color: #6B6560 !important; font-weight: 500; font-size: 15px; }
html[data-pal] .cv-table tbody td.cv-us, html[data-pal] .cv-table tbody td.cv-us * { color: #1F1A17 !important; font-weight: 600; }
html[data-pal] .cv-table tbody td.cv-us b { font-weight: 700; }
html[data-pal] .cv-table thead th.cv-us .cv-wm, html[data-pal] .cv-table thead th.cv-us .cv-wm * { color: #fff !important; }
html[data-pal] .cv-table thead th.cv-us .cv-wm .sun { box-shadow: inset 0 0 0 999px rgba(252, 248, 241, .94) !important; }
.cv-table thead .cv-wm { justify-content: center; }
.cv-table b { font-size: 1.25em; }
@media (max-width: 700px) {
  .cv-table-wrap { padding: 0 14px 22px; }
  .cv-table thead :is(th, td) { height: 64px; padding: 0 8px; }
  .cv-table thead th.cv-us { border-radius: 0 0 12px 12px !important; }
  .cv-table tbody th { padding-left: 0; text-align: left; font-size: 12.5px; }
  .cv-table tbody tr:first-child :is(th, td) { padding-top: 14px; }
  .cv-table tbody td { text-align: center; }
}
/* hairlines between rows (the site-wide "tables on rose" rule had turned them white) */
html[data-pal] main .cv-table :is(th, td) { border-color: rgba(17, 17, 17, .08) !important; }
html[data-pal] main .cv-table thead :is(th, td), html[data-pal] main .cv-table tbody tr:last-child :is(th, td) { border-bottom-color: transparent !important; }
.cv-table tbody :is(th, td) { vertical-align: middle; padding-top: 18px; padding-bottom: 18px; }
@media (max-width: 700px) {
  .cv-table tbody th { width: auto !important; padding: 16px 0 2px !important; border-bottom: 0 !important; }
  .cv-table tbody td { padding: 4px 8px 16px !important; }
  html[data-pal] main .cv-table tbody tr:not(:last-child) td { border-bottom-color: rgba(17, 17, 17, .08) !important; }
}

/* "No surprises" in the How it works style: one white strip, three steps
   side by side divided by hairlines, a large light number, title, line. */
.pr-strip { list-style: none; margin: 0 auto; padding: 0; max-width: 1180px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #fff; border-radius: 22px; overflow: hidden; }
.pr-step { padding: clamp(24px, 2.6vw, 36px); }
.pr-step + .pr-step { border-left: 1px solid rgba(17, 17, 17, 0.08); }
.pr-n { display: block; margin-bottom: 20px; font-size: clamp(2.2rem, 3.2vw, 3rem); font-weight: 300; line-height: 1; }
html[data-pal] .pr-strip .pr-n { color: #857E75 !important; }
html[data-pal] .pr-strip h3 { margin: 0 0 8px; font-family: "Plus Jakarta Sans", var(--text); font-weight: 700; letter-spacing: -0.015em; font-size: clamp(1.25rem, 1.7vw, 1.5rem); color: #1F1A17 !important; }
html[data-pal] .pr-strip p { margin: 0; font-size: clamp(1rem, 1.15vw, 1.08rem); line-height: 1.5; color: #6B6660 !important; }
@media (max-width: 900px) {
  .pr-strip { grid-template-columns: 1fr; }
  .pr-step + .pr-step { border-left: 0; border-top: 1px solid rgba(17, 17, 17, 0.08); }
  .pr-step { padding: 24px 22px; }
}
@media (min-width: 901px) {
  .pr-strip { grid-template-rows: auto auto auto; }
  .pr-step { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  .pr-step h3 { align-self: end; }
}

/* The menu: three links in one sky-blue rounded box, the same shape as
   Say hello, sitting just left of it. Wide screens only; phones keep their
   own row. */
.nav-quick { display: none; }
@media (min-width: 1180px) {
  html .nav .nav-links > ul:not(.nav-quick) { display: none; }
  html .nav .nav-quick {
    display: flex; align-items: center; gap: 2px; height: 40px; margin: 0 0 0 auto; padding: 0 4px;
    list-style: none; border-radius: 9px; background: var(--pal-menu);
  }
  .nav-quick li { list-style: none; }
  .nav-quick a {
    display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 6px;
    color: #fff; font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap;
  }
  .nav-quick a:hover, .nav-quick a[aria-current] { background: rgba(255, 255, 255, 0.16); }
  html .nav .nav-quick + .nav-links > .nav-cta { margin-left: -14px !important; }   /* 10px from the menu, after the row's 24px gap */
  html .nav .nav-quick { translate: 0 6px; }   /* parlor.js holds Say hello 6px down; match it */
}

/* Plus Jakarta Sans sits its letters a touch low in the line box; lift the
   text 1px so it reads as centred in the nav buttons and menu links. */
.nav .nav-cta, .nav .nav-cta-m, .nav-quick a { padding-bottom: 2px; }
/* Nav buttons and menu links at the same size as the How it works body text. */
html .nav .nav-cta, html .nav .nav-cta-m, html .nav .nav-quick a { font-size: clamp(1rem, 1.15vw, 1.08rem) !important; }
@media (max-width: 700px) { html .nav .nav-cta-m { font-size: 15px !important; } }

/* The logo is sized to sit inside a 40px rounded rectangle, the same as the
   menu and Say hello; scrolled, that chip appears behind it. */
html .nav .wordmark::after { inset: auto -14px; top: 50%; height: 40px; translate: 0 -50%; border-radius: 9px !important; }
html .nav .wordmark { font-size: 25px !important; --sw: 26px; gap: 7px !important; }

/* The Pause button in the hero corner, for the background video. */
@media (prefers-reduced-motion: reduce) { .light-pause { display: none !important; } }
.light-pause {
  position: absolute; right: 20px; bottom: 20px; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px; border: 0; border-radius: 9px; cursor: pointer;
  background: rgba(0, 0, 0, .28); color: #fff; font: 600 14px var(--text);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.light-pause:hover { background: rgba(0, 0, 0, .4); }

/* The hero's background: a quiet kitchen in low sun, looped seamlessly and
   shown as filmed (its bright window is toned down inside the video file).
   Still, on its poster frame, for anyone who asks for less motion. */
.hero-l--photo .hero-l-rotor { isolation: isolate; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.hero-l--photo .hero-l-stage { z-index: 2; }

/* The wordmark on its own, without the sun. */
.wordmark .sun { display: none !important; }
/* without the sun, the wordmark can take more of the 40px chip */
html .nav .wordmark:not(#_) { font-size: 31px !important; }
@media (max-width: 700px) { html .nav .wordmark:not(#_) { font-size: 28px !important; } }

/* The hero headline a notch lighter: semibold, not bold. */
.hero-l-title, .hero-l-title * { font-weight: 600 !important; }
/* the kitchen footage a touch darker overall */
.hero-video { filter: brightness(.68); }

/* What we help with: two hands untangling a thread, between the heading and
   the cards. The drawing is always white. */
.help-art {
  width: min(760px, 92%); aspect-ratio: 2906 / 1347; margin: 0 auto clamp(28px, 3.5vw, 48px);
  background: #fff;
  -webkit-mask: url("/images/home/untangle-hands.png") center / contain no-repeat;
          mask: url("/images/home/untangle-hands.png") center / contain no-repeat;
}
.help-head { margin-bottom: clamp(20px, 2.6vw, 32px) !important; }

/* Say hello (and Go back) has its own colour, so the picker can set it apart
   from the other buttons. By default it follows them. */
:root { --pal-hello: #F4B942; --pal-hello-text: #2A1A10; }
html .nav:not(#_) :is(.nav-cta, .nav-cta-m) { background: var(--pal-hello) !important; color: var(--pal-hello-text) !important; }
html .nav:not(#_) :is(.nav-cta, .nav-cta-m):hover { background: color-mix(in srgb, var(--pal-hello) 86%, #000) !important; }

/* A little grain on What we help with, behind the drawing and the cards. */
.help { position: relative !important; overflow: hidden; }
.help > * { position: relative; z-index: 1; }
.help::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--grain); background-size: 240px; opacity: .32; }
/* A little grain on the hero too: inside the stage, under the words, over
   whatever colour, tiles or video sits behind. */
html .hero-l--photo .hero-l-stage { isolation: isolate; }
html[data-pal] .hero-l--photo .hero-l-stage:not(#_)::before { content: "" !important; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grain); background-size: 240px; opacity: .2; }
/* How it works: the same room above its title as What we help with. */
html main .how:not(#_) { padding-top: clamp(40px, 5vw, 72px) !important; padding-bottom: calc(clamp(40px, 5vw, 72px) + var(--headline) * .2) !important; }


/* From the mood board: Fraunces, a soft 1970s serif, for
   headlines and big numbers only. Everything people read or tap stays
   Plus Jakarta Sans. Form section titles stay sans too. */
:root { --display: "Fraunces", Georgia, "Times New Roman", serif; }
html main :is(h1, h2):not(.form-card h2, .form-card *):not(#_),
html main .hero-l-title:not(#_), html main .hero-l-title *:not(#_),
html main :is(.step-dot span, .pr-n):not(#_) {
  font-family: var(--display) !important;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}
html main :is(.step-dot span, .pr-n):not(#_) { font-weight: 500 !important; letter-spacing: 0 !important; }
/* In Fraunces the hero headline reads smaller than the bold sans did: a
   little bigger. And What happens next on signup, sized as a proper heading. */
html .hero-l-title:not(#_) { font-size: clamp(2.2rem, min(4.9vw, 9svh), 4.9rem) !important; }
@media (max-width: 700px) { html .hero-l-title:not(#_) { font-size: clamp(1.9rem, 8.2vw, 2.55rem) !important; } }
html main .signup .next-title:not(#_) { font-size: clamp(2rem, 3.2vw, 2.8rem) !important; line-height: 1.05; margin-bottom: 14px; }
/* Chips: on hover, a darker shade of the chip with the same dark words
   (the old hover turned the words white on a pale chip). */
html main .help-chips a:is(:hover, :focus-visible):not(#_):not(#_) { background: #E4DED6 !important; color: #1F1A17 !important; }

/* The hero's turning phrase. */
.hero-l-title .rot-line { display: block; white-space: nowrap; }
.hero-l-title .rot { position: relative; display: inline-block; vertical-align: bottom; white-space: nowrap; text-align: left;
  transition: width .7s cubic-bezier(.22, 1, .36, 1); }
.hero-l-title .rot-ghost { visibility: hidden; display: inline-block; width: 0; overflow: visible; }
.hero-l-title .rot-word { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; transform: translateY(.38em); filter: blur(6px);
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1), filter .6s cubic-bezier(.22, 1, .36, 1); }
.hero-l-title .rot-word.is-on { opacity: 1; transform: none; filter: none; }
.hero-l-title .rot-word.is-out { opacity: 0; transform: translateY(-.38em); filter: blur(6px); }
@media (prefers-reduced-motion: reduce) { .hero-l-title .rot, .hero-l-title .rot-word { transition: none; } }
/* The hero headline all in white: no highlight colour on advocate or Medicare. */
html[data-pal] .hero-l-title:not(#_) :is(.hl, .stop) { color: #fff !important; }
/* The menu pill's words have their own colour (picker: Menu text). */
:root { --pal-menu-text: #FFFFFF; }
html .nav:not(#_) .nav-quick a { color: var(--pal-menu-text) !important; }
html .nav:not(#_) .nav-quick a:is(:hover, [aria-current]) { background: color-mix(in srgb, var(--pal-menu-text) 16%, transparent) !important; }
/* Button words have their own colour (picker: Button text). */
html main :is(.pill--accent, .cv-go):not(#_), html .form-card .submit:not(#_), html main :is(.pill--accent, .cv-go):not(#_) * { color: var(--pal-cta-text) !important; }

/* The menu sits on the page like the logo: no box at the top, bigger and
   heavier words. Scrolled past the hero it takes the same soft chip as the
   logo, so it stays readable over the sections. Say hello grows to match and
   stays the strongest thing in the bar. */
@media (min-width: 1180px) {
  html .nav:not(#_):not(#_) .nav-quick { background: transparent !important; box-shadow: none !important; padding: 0; gap: 4px; height: 48px;
    transition: background-color .3s ease, box-shadow .3s ease; }
  html .nav:not(#_):not(#_) .nav-quick a { font-size: 18px !important; font-weight: 600 !important; height: 40px; padding: 0 14px; border-radius: 9px; }
  html .nav.is-past-hero:not(#_):not(#_) .nav-quick { background: color-mix(in srgb, var(--pal-paper) 92%, transparent) !important; box-shadow: 0 6px 20px rgba(var(--pal-shadow), .18) !important; padding: 0 4px; border-radius: 12px;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}
html .nav:not(#_):not(#_) :is(.nav-cta, .nav-cta-m) { height: 48px !important; min-height: 48px !important; padding: 0 24px 2px !important; font-size: 18px !important; font-weight: 700 !important; border-radius: 11px !important; }
@media (max-width: 700px) { html .nav:not(#_):not(#_) :is(.nav-cta, .nav-cta-m) { height: 44px !important; min-height: 44px !important; padding: 0 18px 2px !important; font-size: 16px !important; } }
/* The closing line a touch bigger; the Get started buttons match Say hello. */
html main .closing h2:not(#_):not(#_) { font-size: calc(var(--headline) * 1.15) !important; }
html main :is(.band, .closing) .pill:not(#_):not(#_) { height: 48px !important; min-height: 48px !important; padding: 0 24px 2px !important; font-size: 18px !important; font-weight: 700 !important; border-radius: 11px !important; }
@media (max-width: 700px) { html main :is(.band, .closing) .pill:not(#_):not(#_) { height: 44px !important; min-height: 44px !important; padding: 0 18px 2px !important; font-size: 16px !important; } }
/* Pages without the hero photo: on a light page, the bare logo and menu
   take the page's dark ink. */
html .nav.nav-on-light:not(.is-past-hero):not(#_) .wordmark { color: var(--pal-ink, #1F1A17) !important; }
html .nav.nav-on-light:not(.is-past-hero):not(#_) { --pal-menu-text: var(--pal-ink, #1F1A17); }

/* Menu for phones and tablets: a button beside Say hello, opening a panel of
   big, easy rows under the bar. Hidden from 1180px, where the links show. */
.nav-toggle, .nav-sheet { display: none; }
@media (max-width: 1179px) {
  .nav { --sheet-ink: #fff; }
  .nav .nav-toggle {
    display: inline-flex; align-items: center; position: absolute; z-index: 4; height: 44px; padding: 0 16px 2px;
    border: 0; border-radius: 11px; background: transparent; color: var(--pal-menu-text, #fff);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 55%, transparent);
    font: 600 16px var(--text); cursor: pointer; transition: background-color .2s ease;
  }
  .nav .nav-toggle:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
  .nav.is-past-hero .nav-toggle, .nav.sheet-open .nav-toggle { background: color-mix(in srgb, var(--pal-paper) 92%, transparent); box-shadow: 0 6px 20px rgba(var(--pal-shadow), .18); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .nav .nav-sheet:not([hidden]) {
    display: block; position: absolute; z-index: 5; left: 16px; right: 16px; padding: 6px 6px 10px; border-radius: 18px;
    background: var(--pal-paper); color: var(--pal-ink, #1F1A17);
    box-shadow: 0 18px 44px rgba(var(--pal-shadow), .3), inset 0 0 0 1px rgba(255, 255, 255, .12);
    animation: sheet-in .22s cubic-bezier(.22, 1, .36, 1);
  }
  html[data-pal] .nav .nav-sheet { color: #fff; }
  .nav-sheet ul { list-style: none; margin: 0; padding: 0; }
  .nav-sheet li + li { border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
  .nav-sheet li a { display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 0 14px; border-radius: 12px;
    color: inherit !important; font: 600 20px var(--text); text-decoration: none; }
  .nav-sheet li a:hover, .nav-sheet li a[aria-current] { background: color-mix(in srgb, currentColor 10%, transparent); }
  .nav-sheet li a span { opacity: .6; }
  .nav-sheet .nav-sheet-cta { display: flex; align-items: center; justify-content: center; height: 52px; margin: 8px 8px 0; border-radius: 12px;
    background: var(--pal-hello, var(--pal-cta)); color: var(--pal-hello-text, #fff) !important; font: 700 18px var(--text); text-decoration: none; }
  @keyframes sheet-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .nav .nav-sheet:not([hidden]) { animation: none; } }
}
/* Fraunces' "wonky" leaning letters: kept on the other headlines, off in the
   hero headline. */
html main :is(h1, h2):not(.form-card h2, .form-card *):not(#_):not(#_), html main :is(.step-dot span, .pr-n):not(#_):not(#_) { font-variation-settings: "SOFT" 100, "opsz" 144, "WONK" 1; }
html main .hero-l-title:not(#_):not(#_), html main .hero-l-title *:not(#_):not(#_) { font-variation-settings: "SOFT" 100, "opsz" 144, "WONK" 0 !important; }

/* Desktop: the three links sit in the exact centre of the bar. */
@media (min-width: 1180px) {
  html .nav:not(#_):not(#_) .nav-quick { position: absolute; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%); }
  html .nav:not(#_):not(#_) .nav-quick + .nav-links > .nav-cta { margin-left: auto !important; }
}
/* Menu matches Say hello's size at every width. */
@media (max-width: 1179px) { html .nav:not(#_) .nav-toggle { height: 48px; padding: 0 20px 2px; font-size: 18px; border-radius: 11px; } }
@media (max-width: 700px) { html .nav:not(#_) .nav-toggle { height: 44px; padding: 0 16px 2px; font-size: 16px; } }
/* No gliding while a page loads: the bar's buttons appear where they belong.
   Menu stays hidden until it has been placed beside Say hello. */
html:not(.nav-ready) .nav:not(#_), html:not(.nav-ready) .nav:not(#_) * { transition: none !important; }
.nav .nav-toggle:not(.is-placed) { visibility: hidden; }
/* The chat box's send button says Say hello: a rounded, slightly rectangular
   pill, the same height as the mic, in the button colour. */
html .nbox .nbox-go:not(#_):not(#_) { width: auto; height: 38px; padding: 0 16px 1px; border-radius: 999px;
  background: var(--pal-cta) !important; color: var(--pal-cta-text, #fff) !important; font: 700 15px var(--text); white-space: nowrap; }
html .nbox .nbox-go:not(#_):not(#_):hover { background: var(--pal-cta-hover) !important; }
/* Safari tints its toolbar from the page's own background colour. Behind the
   page sits a dark neutral that matches the hero video, so the toolbar reads
   dark and plain; the body keeps the pine for every section. */
html:not(#_) { background: #1C1A16 !important; }
/* Inner pages carry the same paper grain as What we help with, behind
   everything on the page (cards, photos and the sky sit above it). */
body.is-inner { isolation: isolate; }
body.is-inner::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grain); background-size: 240px; opacity: .32; }
/* Their pine sections are the page's own colour, so let the grain through. */
html body.is-inner main > section:not(.signup):not(#_) { background-color: transparent !important; }
html body.is-inner main > section:not(#_)::before { background-image: none !important; }
/* The hero headline back in Plus Jakarta Sans (semibold), a touch smaller
   than it used to be. Other headlines stay in Fraunces. */
html main .hero-l-title:not(#_):not(#_), html main .hero-l-title *:not(#_):not(#_) { font-family: "Plus Jakarta Sans", var(--text) !important; font-variation-settings: normal !important; letter-spacing: -0.025em !important; }
html .hero-l-title:not(#_):not(#_) { font-size: clamp(1.8rem, min(3.5vw, 6.6svh), 3.5rem) !important; }
@media (max-width: 700px) { html .hero-l-title:not(#_):not(#_) { font-size: clamp(1.5rem, 6.2vw, 1.95rem) !important; } }

/* "Sit back, relax.": a deep, warm near-black section with a little grain.
   The headline sits straight on it; the checklist card keeps white words. */
html[data-pal] body .band:not(#_) { --pal-band: #231B15; --pal-band-text: #FFFFFF; background-image: none !important; animation: none !important; position: relative; isolation: isolate; }
html[data-pal] body .band:not(#_)::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grain); background-size: 240px; opacity: .22; }
html[data-pal] body .band:not(#_) .sect-head { background: transparent !important; box-shadow: none !important; border: 0 !important; }
html[data-pal] body .band:not(#_) .sect-head :is(h2, p):not(.pill) { color: #fff !important; }
html[data-pal] body .band:not(#_) .sect-head .sect-lede { color: rgba(255, 255, 255, .86) !important; }
html[data-pal] body .band:not(#_) .plan { background: #2E251E !important; }
html[data-pal] body .band:not(#_) .plan .plan-what, html[data-pal] body .band:not(#_) .plan .visually-hidden { color: #fff !important; }
html[data-pal] body .band:not(#_) .plan-status { color: rgba(255, 255, 255, .78) !important; opacity: 1; }
html[data-pal] body .band:not(#_) .plan li + li { border-color: rgba(255, 255, 255, .12) !important; }
/* Sit back, relax lines up with How it works and What we help with: the same
   room above its heading, and no leftover padding from the old box. */
html main .band:not(#_):not(#_) { padding-top: clamp(40px, 5vw, 72px) !important; padding-bottom: clamp(40px, 5vw, 72px) !important; }
html[data-pal] body .band:not(#_):not(#_) .sect-head { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; }
html[data-pal] body .band:not(#_):not(#_) .sect-head .sect-lede { margin-top: 14px !important; font-size: clamp(1rem, 1.3vw, 1.15rem) !important; line-height: 1.5 !important; }
html[data-pal] body .band:not(#_):not(#_) .sect-head .sect-lede p { margin: 0 !important; font-size: clamp(17px, 1.4vw, 20px) !important; font-weight: 500 !important; line-height: 1.45 !important; }
html[data-pal] body .band:not(#_):not(#_) .sect-head { row-gap: 0 !important; }
/* We'll do the busywork: room around Get started, like the closing. */
html[data-pal] body .band:not(#_):not(#_) .sect-head .pill { margin-top: 32px !important; }
html[data-pal] body .band:not(#_):not(#_) .sect-head { margin-bottom: clamp(36px, 4vw, 56px) !important; }

/* Signup: what they told us on the homepage. */
.form-card .told { margin: 0 0 26px; padding: 20px 22px; border-radius: 16px; background: #F3ECE0; color: #231B15; }
.form-card .told-label { margin: 0 0 6px; font: 700 12px/1.2 var(--text); letter-spacing: .12em; text-transform: uppercase; color: #6B5E52; }
.form-card .told-topic { margin: 0 0 6px; font: 600 18px/1.4 var(--text); color: #231B15; }
.form-card .told-said { margin: 0; font: 500 18px/1.5 var(--text); color: #231B15; }
.form-card .told-said::before { content: "\201C"; } .form-card .told-said::after { content: "\201D"; }
.form-card .told-foot { margin: 14px 0 0; font-size: 14px; color: #5C5650; }

/* Resources: the hub, articles built from content/, and the draft marks. */
.res-list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 12px; }
.res-card { display: grid; gap: 6px; padding: 20px 22px; border-radius: 16px; background: #fff; color: #231B15 !important; text-decoration: none !important; position: relative; }
.res-card b { font-size: 19px; line-height: 1.3; color: #231B15 !important; }
.res-card span { font-size: 15.5px; line-height: 1.5; color: #5C5650 !important; }
.res-card:hover b { text-decoration: underline; text-underline-offset: 3px; }
.res-card .res-draft { position: absolute; top: 14px; right: 16px; font: 700 11px var(--text); letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: #8A5A00 !important; background: #FFF1D6; padding: 4px 8px; border-radius: 6px; }
.draft-banner { margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; background: #FFF1D6; color: #4A3200 !important; font-size: 15px; }
.draft-banner b { color: #4A3200 !important; }
mark.verify { background: #FFE08A; color: #231B15 !important; padding: 1px 4px; border-radius: 4px; font-size: .92em; }
.article .table-wrap { overflow-x: auto; margin: 1.4rem 0; }
.article .table-wrap table { margin: 0; min-width: 520px; }
.article th, .article td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(255, 255, 255, .25); }
.article .help-box { margin-top: 2.4rem; }
.article .help-box p + p { margin-top: .6em; }
.faq-list { margin-top: 2rem; }
html main .res-list:not(#_) { list-style: none; padding: 0; }
html main .res-list:not(#_) > li { list-style: none; margin: 0; }
html main .res-list:not(#_) > li::marker { content: none; }
html main .res-card:not(#_):not(#_) b { color: #231B15 !important; }
html main .res-card:not(#_):not(#_) span { color: #5C5650 !important; }
html main .res-card:not(#_):not(#_) .res-draft { color: #6B4700 !important; }
html main .draft-banner:not(#_):not(#_), html main .draft-banner:not(#_):not(#_) * { color: #4A3200 !important; }
html main .article:not(#_) strong.q { display: inline; font-size: 1.02em; }
html main .res-card:not(#_):not(#_) { padding-right: 96px; }
@media (max-width: 560px) { html main .res-card:not(#_):not(#_) { padding-right: 22px; padding-top: 40px; } }

/* Guide boxes (short answer, callouts, the advocate box): no yellow stripe. */
html .prose:not(#_) :is(.callout, .answer) { border-left: 0 !important; }

/* ---------- Hero, light: warm paper, dark words, an ink drawing ---------- */
html[data-pal] .hero-l--photo .hero-l-rotor:not(#_):not(#_) { background: #F4EFEC !important; }
html .hero-l--photo .hero-l-stage:not(#_):not(#_)::before { opacity: .12; mix-blend-mode: multiply; }
html[data-pal] .hero-l-title:not(#_):not(#_), html[data-pal] .hero-l-title:not(#_):not(#_) * { color: #231B15 !important; }
html .hero-l .nbox:not(#_) { box-shadow: 0 0 0 1px rgba(35, 27, 21, .10), 0 10px 30px rgba(35, 27, 21, .08) !important; }
html[data-pal] .hero-l :is(.connect, .needs-open):not(#_):not(#_) { background: rgba(35, 27, 21, .06) !important; color: #231B15 !important; box-shadow: inset 0 0 0 1px rgba(35, 27, 21, .08) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-pal] .hero-l :is(.connect, .needs-open):not(#_):not(#_) * { color: #231B15 !important; }
html[data-pal] .hero-l .nbox-trust:not(#_):not(#_), html[data-pal] .hero-l .nbox-trust:not(#_):not(#_) * { color: #5C5650 !important; }
/* the bar at the top of the homepage sits on paper now: dark words */
body:not(.is-inner) .nav:not(.is-past-hero):not(.nav-on-light):not(#_) .wordmark { color: #231B15 !important; }
body:not(.is-inner) .nav:not(.is-past-hero):not(#_) { --pal-menu-text: #231B15; }
body:not(.is-inner) .nav:not(.is-past-hero):not(#_) .nav-toggle { color: #231B15; }

.hero-ink { position: absolute; z-index: 1; pointer-events: none; height: auto; }
@media (min-width: 901px) {
  /* Left / right: the two of them walk beside the words, feet on the bottom edge. */
  html:is([data-ink="left"], [data-ink="right"]) .hero-ink { bottom: 0; height: min(76%, 700px); width: auto; }
  html[data-ink="left"] .hero-ink:not(#_) { bottom: 7%; height: min(71%, 645px); left: max(6vw, calc(50% - 630px)); }
  html[data-ink="left"] .hero-ink { left: max(3vw, calc(50% - 680px)); }
  html[data-ink="right"] .hero-ink { right: max(3vw, calc(50% - 680px)); }
  html:is([data-ink="left"], [data-ink="right"]) .hero-l-head:not(#_) { width: min(56vw, 760px) !important; }
  html:is([data-ink="left"], [data-ink="right"]) .hero-l-title:not(#_):not(#_) { max-width: none !important; width: auto !important; }
  html[data-ink="left"] .hero-l-head:not(#_) { left: calc(50% + 13vw); }
  html[data-ink="right"] .hero-l-head:not(#_) { left: calc(50% - 13vw); }
  html[data-ink="left"] .hero-l-below .hero-main:not(#_) { translate: 13vw 0; }
  html[data-ink="right"] .hero-l-below .hero-main:not(#_) { translate: -13vw 0; }
  /* Middle: small, rising from the bottom edge under the buttons. */
  html[data-ink="middle"] .hero-ink { left: 50%; bottom: 0; translate: -50% 0; height: min(24%, 220px); width: auto; }
}
@media (max-width: 900px) {
  /* Narrow screens: always the middle, small, at the bottom. */
  .hero-ink { left: 50%; bottom: 0; translate: -50% 0; height: min(22%, 190px); width: auto; }
}
html[data-pal] .hero-l--photo:not(#_):not(#_) { background: #F4EFEC !important; }
@media (min-width: 901px) {
  html[data-ink="left"] .hero-l .nbox-trust:not(#_) { translate: 13vw 0; }
  html[data-ink="right"] .hero-l .nbox-trust:not(#_) { translate: -13vw 0; }
  html[data-ink] .hero-l:not(#_) { overflow-x: clip; }
  html[data-ink="middle"] .hero-l .nbox-trust:not(#_) { left: 56px; right: auto; width: auto; justify-content: flex-start; }
}
@media (max-width: 900px) { html .hero-l .nbox-trust:not(#_) { bottom: calc(min(22%, 190px) + 12px) !important; } }
@media (min-width: 901px) and (max-width: 1380px) {
  html[data-ink="left"] .hero-l-head:not(#_) { left: calc(50% + 16vw); width: min(52vw, 700px) !important; }
  html[data-ink="left"] .hero-l-below .hero-main:not(#_) { translate: 16vw 0; }
  html[data-ink="left"] .hero-ink:not(#_) { height: min(66%, 600px); }
}

/* How it works continues the hero: the same warm paper, dark words, and the
   steps card lifted off it with a soft edge. */
html[data-pal] main .how:not(#_):not(#_) { background: #F4EFEC !important; animation: none !important; }
html[data-pal] main .how:not(#_):not(#_)::after { opacity: .12 !important; mix-blend-mode: multiply; }
html[data-pal] main .how:not(#_):not(#_) :is(h2, .sect-head p, .sect-lede) { color: #231B15 !important; }
html[data-pal] main .how:not(#_):not(#_) .steps-stage { box-shadow: 0 0 0 1px rgba(35, 27, 21, .08), 0 14px 36px rgba(35, 27, 21, .08) !important; }
html[data-pal] body .band:not(#_):not(#_) .plan { box-shadow: none !important; }
/* We'll do the busywork: the tangle of calls, emails and forms, handled. */
.band-art { display: block; width: min(420px, 80%); height: auto; margin: 0 auto clamp(28px, 3.5vw, 48px); }
html[data-pal] body .band:not(#_):not(#_) .sect-head { margin-bottom: clamp(24px, 3vw, 36px) !important; }

/* Flat pine and near-black brown, with the paper grain (chosen over the painted texture). */
body:not(#_):not(#_) { background-image: none !important; }
body .band:not(#_):not(#_):not(#_) { --pal-band: #231B15; background-image: none !important; }
body .band:not(#_):not(#_):not(#_) .plan { background: #2E251E !important; }
body.is-inner:not(#_):not(#_)::before, .help:not(#_):not(#_)::after { opacity: .32 !important; }
body .band:not(#_):not(#_):not(#_)::after { opacity: .22 !important; }

/* ---------- The page is warm paper, like the hero ----------
   Everything that isn't its own coloured section (What we help with, the
   busywork band, the sky sections, the footer, the pine blocks on the
   provider pages) sits on #F4EFEC, and its words turn dark ink. */
:root { --pal-paper: #F4EFEC; --pal-ink: #231B15; }
html:not(#_) { background: #F4EFEC !important; }
html[data-pal] body:not(#_):not(#_) { background-color: #F4EFEC !important; }
body.is-inner:not(#_)::before { mix-blend-mode: multiply; opacity: .12 !important; }
html[data-pal] main .help:not(#_):not(#_) { background: #56603A !important; }
html[data-pal] main :is(h1, h2, h3, h4, h5, p, li, td, th, strong, b, em, span, a, small, dt, dd, label, figcaption, button, blockquote, cite, summary):not(#_):not(#_):not(:is(.help, .band, .signup, .closing, .sect--marigold, .hero-l, .form-card, .check, .callrow, .tile, .file, details, .callout, .answer, .cov-card, .cv-table-wrap, .pr-strip, .nbox, .measure, .tag, .needs, .connect, .pill, .res-card, .steps-stage, .told) *):not(.pill):not(.hl):not(.stop):not(.tag):not(.measure) { color: #231B15 !important; }
html[data-pal] main a:not(#_):not(#_):not(.pill):not(:is(.help, .band, .signup, .closing, .sect--marigold, .hero-l) *) { text-decoration-color: rgba(35, 27, 21, .45) !important; }
html[data-pal] main :is(table, tr, td, th, hr):not(#_):not(#_):not(:is(.help, .band, .sect--marigold, .callout, .answer) *) { border-color: rgba(35, 27, 21, .16) !important; }
html[data-pal] main .pill--ghost:not(#_):not(#_):not(:is(.help, .band, .signup, .closing, .sect--marigold, .hero-l) *) { color: #231B15 !important; box-shadow: inset 0 0 0 1.5px rgba(35, 27, 21, .5) !important; }
/* white cards need an edge on paper */
html[data-pal] main :is(.res-card, .pr-strip, details.cq, .cov-card, .prose .callout, .prose .answer, .tile, .file):not(#_):not(#_):not(:is(.help, .band, .sect--marigold) *) { box-shadow: 0 0 0 1px rgba(35, 27, 21, .10), 0 8px 24px rgba(35, 27, 21, .05) !important; }
html[data-pal] body.is-inner main > section.sect--marigold:not(#_):not(#_) { background: #56603A !important; }
/* Scrolled, the logo and menu sit on pine chips with white words, as before. */
html[data-pal] .nav.is-past-hero:not(#_):not(#_) .wordmark { color: #fff !important; }
html[data-pal] .nav.is-past-hero:not(#_):not(#_) .wordmark::after { background: color-mix(in srgb, #56603A 94%, transparent) !important; }
html .nav.is-past-hero:not(#_):not(#_) { --pal-menu-text: #FFFFFF; }
@media (min-width: 1180px) { html .nav.is-past-hero:not(#_):not(#_):not(#_) .nav-quick { background: color-mix(in srgb, #56603A 94%, transparent) !important; } }
@media (max-width: 1179px) { html .nav:is(.is-past-hero, .sheet-open):not(#_):not(#_) .nav-toggle { background: color-mix(in srgb, #56603A 94%, transparent) !important; color: #fff !important; box-shadow: 0 6px 20px rgba(0, 0, 0, .18) !important; } }
html[data-pal] .nav .nav-sheet:not(#_):not(#_) { color: #231B15 !important; }

/* The mark: a hand-painted ring (from the ink drawing), beside the wordmark.
   A mask, so it takes the wordmark's colour: dark on paper, white on pine. */
html .wordmark .sun:not(#_):not(#_) { display: inline-block !important; width: .92em !important; height: .92em !important; flex: none; transform: none !important; translate: 0 -.035em !important; background: currentColor !important; box-shadow: none !important; border-radius: 0 !important; opacity: 1 !important; filter: none !important;
  -webkit-mask: url("/brand/ring.png") center / contain no-repeat; mask: url("/brand/ring.png") center / contain no-repeat; }
html .wordmark .sun:not(#_):not(#_) > *, html .wordmark .sun:not(#_):not(#_)::before, html .wordmark .sun:not(#_):not(#_)::after { display: none !important; }
html .nav .wordmark:not(#_):not(#_) { gap: 8px !important; }

/* Phones and tablets: the scrolled logo chip is the same height as Menu and
   Say hello, and sits on the same centre line. */
@media (max-width: 1179px) { html .nav:not(#_):not(#_) .wordmark::after { height: 48px !important; top: calc(50% + 4px) !important; } }
@media (max-width: 700px) { html .nav:not(#_):not(#_) .wordmark::after { height: 44px !important; top: calc(50% + 2px) !important; } }

/* Section headings on phones: as big as the closing line. */
@media (max-width: 700px) {
  html main :is(.how, .help, .band) h2:not(#_):not(#_) { font-size: calc(var(--headline) * 1.15) !important; }
}

/* Date of birth on iPhone: Safari gives date inputs their own width, which
   pushes past the card; keep it to the field's width like the others. */
.form-card input[type="date"] { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; width: 100%; display: block; box-sizing: border-box; text-align: left; }
.form-card input[type="date"]::-webkit-date-and-time-value { text-align: left; }
@media (min-width: 1180px) { html .nav:not(#_):not(#_) .wordmark::after { height: 48px !important; } }
/* Optical centring: the logo's descender makes it sit high in its chip and
   above the button text; its ring and letters move down to the centre line. */
html .nav .wordmark:not(#_):not(#_) > :is(.sun, .wm) { position: relative; top: 1px; }
@media (max-width: 1179px) { html .nav .wordmark:not(#_):not(#_) > :is(.sun, .wm) { top: 5px; } }
@media (max-width: 700px) { html .nav .wordmark:not(#_):not(#_) > :is(.sun, .wm) { top: 3px; } }
/* Even sides: at the top the logo's letters line up with Say hello's edge;
   scrolled, the logo slides in so its chip's edge does instead. */
@media (max-width: 1179px) { html.logo-left .nav .nav-bar .wordmark:not(#_):not(#_) { left: calc(var(--bar-pad, 12px) + 6px) !important; } }
html .nav .wordmark:not(#_):not(#_) > :is(.sun, .wm) { left: 0; transition: left .3s ease; }
html .nav .wordmark:not(#_):not(#_)::after { transition: opacity .3s ease, left .3s ease, right .3s ease; }
html .nav.is-past-hero .wordmark:not(#_):not(#_) > :is(.sun, .wm) { left: 14px; }
html .nav.is-past-hero .wordmark:not(#_):not(#_)::after { left: 0 !important; right: -28px !important; }
@media (prefers-reduced-motion: reduce) { html .nav .wordmark:not(#_):not(#_) > :is(.sun, .wm), html .nav .wordmark:not(#_):not(#_)::after { transition: none; } }

/* Past the hero, a full-width paper bar (slightly see-through) across the top
   holds the logo (dark, no chip), the menu pill and Say hello. The nav sits in
   the same place at the top of the page and in the bar, so nothing moves when
   the bar appears. Not on sign-up, which keeps its own simple header. */
html .has-overlay-nav .nav:not(#_):not(#_) { top: 2px !important; }
@media (max-width: 1179px) { html .has-overlay-nav .nav:not(#_):not(#_) { top: -2px !important; } }
@media (max-width: 700px) { html .has-overlay-nav .nav:not(#_):not(#_) { top: -4px !important; } }
html .nav:not(#_):not(#_)::before {
  content: ""; position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none;
  top: var(--bar-top, -2px); height: var(--bar-h, 80px);
  background: rgba(244, 239, 236, .84); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 1px 0 rgba(35, 27, 21, .08), 0 8px 24px rgba(35, 27, 21, .06);
  opacity: 0; transition: opacity .3s ease;
}
html body:not(.nav-back) .nav.is-past-hero:not(#_):not(#_)::before { opacity: 1; }
@media (max-width: 1179px) { html .nav:not(#_):not(#_) { --bar-top: 2px; } }
@media (max-width: 700px) { html .nav:not(#_):not(#_) { --bar-top: 4px; --bar-h: 72px; } }
html[data-pal] body:not(.nav-back) .nav.is-past-hero:not(#_):not(#_):not(#_) .wordmark { color: #231B15 !important; }
html body:not(.nav-back) .nav.is-past-hero .wordmark:not(#_):not(#_):not(#_)::after { opacity: 0 !important; }
html body:not(.nav-back) .nav.is-past-hero .wordmark:not(#_):not(#_):not(#_) > :is(.sun, .wm) { left: 0; }
@media (prefers-reduced-motion: reduce) { html .nav:not(#_):not(#_)::before { transition: none; } }
html body.nav-back .nav .wordmark:not(#_):not(#_):not(#_) > :is(.sun, .wm) { left: 0 !important; }

/* Phones and tablets: Menu opens a full-screen paper panel. Big serif items,
   the ink drawing, and one full-width Say hello at the bottom; the header keeps
   the logo and Close. */
@media (max-width: 1179px) {
  html.menu-sheet-open { overflow: hidden; }
  html .nav .nav-sheet:not([hidden]):not(#_):not(#_) {
    position: fixed; inset: 0; z-index: -2; display: flex; flex-direction: column;
    margin: 0; border-radius: 0; box-shadow: none; background: #F4EFEC !important; color: #231B15 !important;
    padding: calc(var(--bar-h, 80px) + 12px) max(24px, 6vw) max(24px, env(safe-area-inset-bottom)); overflow-y: auto;
    animation: sheet-fade .28s ease both;
  }
  html .nav.sheet-open:not(#_):not(#_)::before { opacity: 1 !important; background: #F4EFEC !important; box-shadow: none !important; }
  html .nav.sheet-open:not(#_):not(#_) .wordmark { color: #231B15 !important; }
  html .nav.sheet-open .wordmark:not(#_):not(#_):not(#_)::after { opacity: 0 !important; }
  html .nav.sheet-open .wordmark:not(#_):not(#_):not(#_) > :is(.sun, .wm) { left: 0 !important; }
  html .nav.sheet-open:not(#_):not(#_) .nav-cta-m { visibility: hidden; }
  .nav-sheet-list { list-style: none; margin: 8px 0 0; padding: 0; }
  .nav-sheet-list li { border-bottom: 1px solid rgba(35, 27, 21, .12); animation: sheet-item .45s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(.06s + var(--i) * .06s); }
  html .nav .nav-sheet-list a:not(#_):not(#_) { display: flex; justify-content: flex-start; align-items: baseline; gap: 16px; padding: 18px 0; color: #231B15 !important; text-decoration: none;
    font-family: var(--display, "Fraunces", Georgia, serif); font-weight: 600; font-size: clamp(32px, 9vw, 44px); line-height: 1.05; letter-spacing: -0.02em; font-variation-settings: "SOFT" 100, "opsz" 144; }
  .nav-sheet-n { font: 600 14px var(--text); letter-spacing: .08em; color: #8A7F74; min-width: 26px; }
  html .nav .nav-sheet-list a[aria-current]:not(#_) { color: #56603A !important; }
  .nav-sheet-foot { margin-top: auto; padding-top: 24px; display: grid; gap: 14px; justify-items: center; animation: sheet-item .5s cubic-bezier(.22, 1, .36, 1) .24s both; }
  .nav-sheet-art { width: auto; height: min(24vh, 220px); opacity: .9; }
  .nav-sheet-line { margin: 0; font: 600 18px var(--text); color: #5C5650; }
  html .nav .nav-sheet .nav-sheet-cta:not(#_):not(#_) { display: flex; align-items: center; justify-content: center; width: 100%; height: 60px; margin: 0; border-radius: 14px;
    background: var(--pal-hello, #F4B942) !important; color: #2A1A10 !important; font: 700 19px var(--text); text-decoration: none; }
  @keyframes sheet-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes sheet-item { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { html .nav .nav-sheet:not([hidden]), .nav-sheet-list li, .nav-sheet-foot { animation: none !important; } }
}
/* Am I covered? uses the same title size as Resources and the other pages. */
html main .cv-h1:not(#_):not(#_) { font-size: clamp(2.3rem, 4.6vw, 3.6rem) !important; line-height: 1.06 !important; letter-spacing: -0.02em !important; }
/* Phones and small tablets: no drawing in the hero, it crowds the buttons. */
@media (max-width: 900px) { html .hero-ink:not(#_) { display: none !important; } }
/* Without the drawing, the phone hero is only as tall as its content. */
@media (max-width: 700px) {
  html .hero-l--photo .hero-l-stage:not(#_):not(#_) { --title-top: 128px !important; }
  html .hero-l--photo:not(#_):not(#_), html .hero-l--photo :is(.hero-l-pin, .hero-l-rotor):not(#_):not(#_) { height: 520px !important; min-height: 0 !important; }
}
/* The needs list sits on the light hero now: a deeper panel so its white
   words stay readable (8:1, was 4:1). */
html[data-pal] .hero-l .needs:not(#_):not(#_) { background: rgba(40, 32, 24, .78) !important; }