/* Nuvira — visual system
   Every color is a token. Never use a raw color in a rule below (the grain data-URI is the one exception).
   Component markup is documented in docs/components.md. */
:root {
  --teal: #2c424e;        /* logo ground */
  --teal-deep: #1f3039;
  --teal-ink: #16242b;    /* footer, deepest sections */
  --teal-soft: #37505d;
  --sand: #c7b698;        /* logo dots */
  --sand-soft: #e3d8c2;
  --tan-base: #a98c6c;    /* logo accent dots */
  --tan: var(--tan-base);
  --tan-deep: #8a6f50;    /* italic emphasis on light grounds (3:1+ for large type) */
  --tan-ink: #6f583f;     /* small accent text on light grounds (4.5:1+) */
  --ink-mid: #4a5760;     /* secondary text on the sand ground */
  --bone: #ede6d6;        /* text on teal */
  --bone-dim: #cfc5b0;
  --cream: #f5f0e6;       /* light section ground */
  --cream-panel: #fffcf5;
  --ink: #23303a;         /* text on cream */
  --ink-soft: #55636d;
  --err: #8a3b2a;
  --line-light: rgba(199, 182, 152, 0.26);
  --line-dark: rgba(44, 66, 78, 0.16);

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1200px;
  --gutter: clamp(18px, 5vw, 56px);
  --radius: 16px;
  --radius-lg: 28px;
  --nav-h: 76px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0; font-family: var(--sans); font-weight: 300; font-size: 17px; line-height: 1.62;
  color: var(--bone); background: var(--teal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.04; margin: 0 0 .5em; letter-spacing: -.008em; text-wrap: balance; }
h1 { font-size: clamp(46px, 6.6vw, 96px); }
h2 { font-size: clamp(36px, 4.8vw, 64px); }
h3 { font-size: clamp(24px, 2.3vw, 31px); line-height: 1.12; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 400; color: var(--sand); }
.section--cream h1 em, .section--cream h2 em, .section--cream h3 em, .section--sand h2 em, .section--sand h3 em, .quiz h2 em { color: var(--tan-deep); }
p { margin: 0 0 1em; text-wrap: pretty; }
strong { font-weight: 500; }
:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; border-radius: 4px; }
.section--cream :focus-visible, .section--sand :focus-visible { outline-color: var(--teal); }
::selection { background: var(--sand); color: var(--teal-ink); }

/* On light grounds the accent darkens so small labels and numerals keep AA contrast. */
.section--cream, .section--sand, .form, .quiz, .plancard, .compare, .callout, .pillar, .tile:not(.tile--image) { --tan: var(--tan-ink); }
.section--teal .tile:not(.tile--image), .section--deep .tile:not(.tile--image) { --tan: var(--tan-base); }
.section--sand { --ink-soft: var(--ink-mid); }
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap--narrow { width: min(860px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.eyebrow {
  font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--sand); margin: 0 0 20px; display: flex; align-items: center; gap: 14px;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; flex: none; }
.section--cream .eyebrow, .section--sand .eyebrow { color: var(--tan); }
.section__head--center .eyebrow { justify-content: center; }
.lede { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.58; max-width: 62ch; }
.fine { font-size: 13px; line-height: 1.55; opacity: .8; max-width: 62ch; }
.section--cream .fine, .section--sand .fine, .quiz .fine, .form .fine { opacity: 1; color: var(--ink-soft); }
.actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--sand); color: var(--teal-ink); padding: 10px 14px; z-index: 200; border-radius: 8px; }
.skip:focus { left: 8px; }
/* present for screen readers, absent from the layout */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.textlink { color: var(--sand); border-bottom: 1px solid var(--line-light); padding-bottom: 2px; transition: border-color .3s, color .3s; }
.textlink:hover { border-color: var(--sand); }
.section--cream .textlink, .section--sand .textlink { color: var(--teal); border-color: var(--line-dark); font-weight: 400; }
.section--cream .textlink:hover, .section--sand .textlink:hover { border-color: var(--teal); }
.textlink--arrow::after { content: "\2192"; display: inline-block; margin-left: .45em; transition: transform .35s var(--ease); }
.textlink--arrow:hover::after { transform: translateX(4px); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px;
  font-family: var(--sans); font-weight: 500; font-size: 15px; letter-spacing: .02em; line-height: 1.2;
  padding: 14px 28px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .45s var(--ease-out), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .45s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--gold { background: var(--sand); color: var(--teal-ink); box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--sand) 70%, transparent); }
.btn--gold:hover { background: var(--bone); box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--sand) 80%, transparent); }
.btn--ghost { border-color: var(--line-light); color: var(--bone); }
.btn--ghost:hover { border-color: var(--sand); color: var(--sand); }
.btn--teal { background: var(--teal); color: var(--bone); }
.btn--teal:hover { background: var(--teal-deep); }
.btn--line { border-color: var(--line-dark); color: var(--ink); }
.btn--line:hover { border-color: var(--teal); }
/* waiting for input: dimmed, no lift. aria-disabled keeps the button in the tab order (the fit check's Continue). Must follow the hover rules. */
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn--teal:disabled, .btn--teal[aria-disabled="true"] { background: var(--teal); }

/* Nav (fixed; transparent over the page head, solid once scrolled) */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--nav-h);
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck, body.menu-open .nav {
  background: color-mix(in srgb, var(--teal-deep) 86%, transparent);
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom-color: var(--line-light);
}
.nav__inner { height: 100%; display: flex; align-items: center; gap: 30px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark { width: 38px; height: 38px; }
.brand__word { font-family: var(--serif); font-size: 30px; font-weight: 500; color: var(--bone); letter-spacing: .01em; line-height: 1; }
.nav__links { display: flex; gap: clamp(16px, 2.1vw, 30px); margin-left: auto; font-size: 14.5px; font-weight: 400; letter-spacing: .02em; }
.nav__links a { position: relative; padding: 8px 0; color: var(--bone-dim); transition: color .3s; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--sand);
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--bone); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__cta { padding: 11px 20px; min-height: 42px; font-size: 14px; }
.nav__toggle { display: none; background: none; border: 0; width: 48px; height: 48px; margin-left: auto; margin-right: -10px; cursor: pointer; position: relative; }
.nav__toggle span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--bone); transition: transform .4s var(--ease), top .4s var(--ease); }
.nav__toggle span:nth-child(1) { top: 19px; }
.nav__toggle span:nth-child(2) { top: 28px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { top: 23.5px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { top: 23.5px; transform: rotate(-45deg); }

/* Full-screen menu (small screens) */
.menu {
  position: fixed; inset: 0; z-index: 55; background: var(--teal-deep) var(--grain);
  padding: calc(var(--nav-h) + 24px) var(--gutter) 32px; display: flex; flex-direction: column; justify-content: space-between;
  overflow-y: auto; opacity: 0; transition: opacity .35s var(--ease);
}
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; }
.menu__links { display: flex; flex-direction: column; }
.menu__links a {
  font-family: var(--serif); font-size: clamp(30px, 8vw, 44px); line-height: 1.1; padding: 11px 0; color: var(--bone);
  border-bottom: 1px solid var(--line-light); opacity: 0; transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease), color .3s;
}
.menu.is-open .menu__links a { opacity: 1; transform: none; }
.menu__links a:nth-child(2) { transition-delay: .04s; } .menu__links a:nth-child(3) { transition-delay: .08s; }
.menu__links a:nth-child(4) { transition-delay: .12s; } .menu__links a:nth-child(5) { transition-delay: .16s; }
.menu__links a:nth-child(6) { transition-delay: .2s; } .menu__links a:nth-child(7) { transition-delay: .24s; }
.menu__links a:nth-child(8) { transition-delay: .28s; }
.menu__links a[aria-current="page"] { color: var(--sand); font-style: italic; }
.menu__foot { margin-top: 28px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; font-size: 15px; color: var(--bone-dim); }
.menu__foot p { margin: 0; }

/* Page head (every page except home starts with one) */
.pagehead {
  position: relative; overflow: hidden; isolation: isolate;
  padding: calc(var(--nav-h) + clamp(56px, 8vw, 112px)) 0 clamp(64px, 8vw, 112px);
  background:
    var(--grain),
    radial-gradient(1000px 560px at 88% 12%, color-mix(in srgb, var(--teal-soft) 78%, transparent), transparent 62%),
    linear-gradient(180deg, var(--teal-deep), var(--teal));
}
.pagehead--image::before {
  /* the photograph is dimmed so the lede keeps 4.5:1 where it crosses a bright patch (snow, sky, water); phones and tablets dim it further in the responsive block */
  content: ""; position: absolute; inset: 0; z-index: -2; background: var(--img) center / cover no-repeat; opacity: .36;
}
.pagehead--image::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--teal-deep) 8%, color-mix(in srgb, var(--teal-deep) 55%, transparent) 62%, color-mix(in srgb, var(--teal-deep) 20%, transparent)),
              linear-gradient(0deg, var(--teal) 0%, transparent 38%);
}
.pagehead__art {
  position: absolute; right: -7%; top: 50%; width: min(74vh, 50vw); aspect-ratio: 1; margin-top: calc(min(74vh, 50vw) / -2 + 20px); z-index: -1; pointer-events: none;
  background: url("/assets/mark-1024.webp") center / contain no-repeat; opacity: .34;
  -webkit-mask-image: radial-gradient(circle at 60% 50%, #000 30%, transparent 74%); mask-image: radial-gradient(circle at 60% 50%, #000 30%, transparent 74%);
  animation: drift 4.5s var(--ease-out) both; /* settles once and stops: nothing here moves for more than five seconds */
}
@keyframes drift { from { transform: translate3d(0, -10px, 0) rotate(-2.5deg); } to { transform: none; } }
.pagehead__inner { position: relative; }
.pagehead__inner > * { max-width: 820px; }
.pagehead h1 { margin-bottom: 26px; }
.pagehead .lede { margin-bottom: 34px; color: var(--bone-dim); }
.pagehead .actions { margin-bottom: 22px; }
.pagehead .fine { color: var(--bone-dim); margin: 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; letter-spacing: .04em; color: var(--bone-dim); margin-bottom: 30px; }
.crumbs a { border-bottom: 1px solid var(--line-light); }
.crumbs a:hover { color: var(--sand); }
.crumbs > * + *::before { content: "/"; margin-right: 10px; opacity: .5; }

/* Sections */
.section { padding: clamp(84px, 10.5vw, 156px) 0; position: relative; }
.section--tight { padding: clamp(60px, 7vw, 100px) 0; }
.section--cream { background: var(--cream); color: var(--ink); }
.section--sand { background: var(--sand-soft); color: var(--ink); }
.section--teal { background: var(--teal) var(--grain); color: var(--bone); }
.section--deep { background: var(--teal-deep) var(--grain); color: var(--bone); }
.section--cream .lede, .section--sand .lede { color: var(--ink-soft); }
.section--teal .lede, .section--deep .lede { color: var(--bone-dim); }
/* a light section that rises over the dark one above it, like a sheet of paper */
.section--sheet { border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin-top: calc(-1 * var(--radius-lg)); z-index: 1; }
.section--image { isolation: isolate; overflow: hidden; }
.section--image::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--img) var(--img-pos, center) / cover no-repeat; }
.section--image::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--teal-deep) 90%, transparent), color-mix(in srgb, var(--teal-deep) 82%, transparent) 50%, color-mix(in srgb, var(--teal-deep) 90%, transparent)); }
.section__head { max-width: 780px; margin-bottom: clamp(44px, 6vw, 84px); }
.section__head h2 { margin-bottom: 22px; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .lede { margin-inline: auto; }
.section__foot { margin-top: clamp(36px, 5vw, 64px); }

/* Strip (four facts under a page head) */
.strip { background: var(--teal-ink); border-block: 1px solid var(--line-light); }
.strip__inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.strip__inner > div { padding: 30px 28px 30px 0; display: flex; flex-direction: column; gap: 4px; }
.strip__inner > div + div { padding-left: 28px; border-left: 1px solid var(--line-light); }
.strip strong { font-family: var(--serif); font-weight: 500; font-size: 23px; color: var(--sand); line-height: 1.15; }
.strip span { font-size: 14px; color: var(--bone-dim); line-height: 1.45; }
/* a sheet below rises over the strip by its corner radius; give that overlap back so the last line keeps its padding */
.strip:has(+ .section--sheet) { padding-bottom: 28px; }

/* Marquee (decorative principle ticker) */
.marquee { overflow: hidden; border-block: 1px solid var(--line-light); background: var(--teal-ink); padding: 22px 0; }
.marquee__track { display: flex; gap: 56px; width: max-content; animation: marquee 48s linear infinite; }
.marquee span { font-family: var(--serif); font-style: italic; font-size: clamp(24px, 2.6vw, 34px); color: var(--bone-dim); white-space: nowrap; display: flex; align-items: center; gap: 56px; }
.marquee span::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tan); }
@keyframes marquee { to { transform: translateX(calc(-50% - 28px)); } } /* half the track plus half of the 56px gap, so the loop does not jump */

/* Pillars (cards on cream) */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.pillars--2 { grid-template-columns: repeat(2, 1fr); }
.pillar {
  padding: 40px 34px; background: var(--cream-panel); border: 1px solid var(--line-dark); border-radius: var(--radius);
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.pillar:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -34px color-mix(in srgb, var(--teal) 50%, transparent); }
.pillar__num { display: block; font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--tan); margin-bottom: 30px; }
.pillar p { color: var(--ink-soft); margin: 0; }
.pillar p + p { margin-top: .8em; }

/* Cards (on teal) — a soft light follows the pointer */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.card {
  position: relative; padding: 40px 38px; border: 1px solid var(--line-light); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column;
  background: linear-gradient(160deg, color-mix(in srgb, var(--teal-soft) 55%, transparent), transparent 70%);
  transition: border-color .4s var(--ease), transform .6s var(--ease-out);
}
.card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--sand) 16%, transparent), transparent 60%);
}
.card:hover { border-color: color-mix(in srgb, var(--sand) 70%, transparent); transform: translateY(-4px); }
.card:hover::before { opacity: 1; }
.card > * { position: relative; }
.card__icon { width: 52px; height: 52px; margin-bottom: 26px; color: var(--sand); }
.card__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.card p { color: var(--bone-dim); }
.card__note { font-size: 13px; letter-spacing: .02em; color: var(--sand) !important; margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--line-light); }
.card .textlink { margin: 6px 0 22px; align-self: flex-start; }

/* Steps (numbered list on cream) */
.steps { list-style: none; margin: 0; padding: 0; max-width: 880px; }
.step { display: grid; grid-template-columns: 72px 1fr; gap: 24px; padding: 34px 0; border-top: 1px solid var(--line-dark); }
.step:last-child { border-bottom: 1px solid var(--line-dark); }
.section--teal .step, .section--deep .step { border-color: var(--line-light); }
.step__num { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--tan); color: var(--tan); display: grid; place-items: center; font-family: var(--serif); font-size: 24px; }
.section--teal .step__num, .section--deep .step__num { color: var(--sand); border-color: var(--sand); }
.step h3 { margin-bottom: 8px; }
.step p { margin: 0; color: var(--ink-soft); max-width: 62ch; }
.section--teal .step p, .section--deep .step p { color: var(--bone-dim); }

/* Timeline (the journey; a line fills as you scroll) */
.timeline { list-style: none; margin: 0; padding: 0 0 0 clamp(36px, 6vw, 84px); position: relative; max-width: 900px; }
.timeline::before, .timeline::after { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 1px; background: var(--line-dark); }
.timeline::after { background: var(--tan); transform-origin: top; transform: scaleY(var(--p, 0)); transition: transform .2s linear; }
.section--teal .timeline::before, .section--deep .timeline::before { background: var(--line-light); }
.section--teal .timeline::after, .section--deep .timeline::after { background: var(--sand); }
.timeline__item { position: relative; padding: 0 0 clamp(40px, 5vw, 68px); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: ""; position: absolute; left: calc(-1 * clamp(36px, 6vw, 84px)); top: 8px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--cream); border: 1px solid var(--tan); transition: background .5s var(--ease), box-shadow .5s var(--ease);
}
.section--teal .timeline__item::before, .section--deep .timeline__item::before { background: var(--teal); border-color: var(--sand); }
.timeline__item.in::before { background: var(--tan); box-shadow: 0 0 0 7px color-mix(in srgb, var(--tan) 18%, transparent); }
.section--teal .timeline__item.in::before, .section--deep .timeline__item.in::before { background: var(--sand); box-shadow: 0 0 0 7px color-mix(in srgb, var(--sand) 16%, transparent); }
.timeline__when { display: block; font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--tan); margin-bottom: 10px; }
.section--teal .timeline__when, .section--deep .timeline__when { color: var(--sand); }
.timeline__item h3 { margin-bottom: 10px; }
.timeline__item p { margin: 0; color: var(--ink-soft); max-width: 60ch; }
.timeline__item p + p { margin-top: .8em; }
.section--teal .timeline__item p, .section--deep .timeline__item p { color: var(--bone-dim); }

/* Honest list (statement list beside a heading) */
.honest { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.honest__text { position: sticky; top: calc(var(--nav-h) + 32px); }
.honest__list { list-style: none; margin: 0; padding: 0; }
.honest__list li { padding: 24px 0; border-top: 1px solid var(--line-light); color: var(--bone-dim); font-size: 18px; }
.honest__list li:last-child { border-bottom: 1px solid var(--line-light); }
.honest__list strong { font-family: var(--serif); font-weight: 500; font-size: 27px; color: var(--sand); display: block; margin-bottom: 6px; line-height: 1.15; }
.section--cream .honest__list li, .section--sand .honest__list li { border-color: var(--line-dark); color: var(--ink-soft); }
.section--cream .honest__list strong, .section--sand .honest__list strong { color: var(--teal); }

/* Compare ("what you may hear" vs "what you'll hear here") */
.compare { border: 1px solid var(--line-dark); border-radius: var(--radius); overflow: hidden; background: var(--cream-panel); }
.compare__row { display: grid; grid-template-columns: 1fr 1fr; }
.compare__row + .compare__row { border-top: 1px solid var(--line-dark); }
.compare__row > div { padding: 26px clamp(20px, 3vw, 40px); }
.compare__row > div + div { border-left: 1px solid var(--line-dark); background: color-mix(in srgb, var(--sand) 14%, transparent); }
.compare__head > div { font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--tan); padding-block: 18px; }
.compare__them { color: var(--ink-soft); font-style: italic; }
.compare__us { font-family: var(--serif); font-size: clamp(20px, 1.9vw, 25px); line-height: 1.25; color: var(--ink); font-weight: 500; }

/* Split (text beside an image) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.split--flip .split__text { order: 2; }
.split--wide { grid-template-columns: 1.15fr .85fr; }
.split__text h2 { margin-bottom: 22px; }
.split__text .lede { margin-bottom: 1.2em; }
.split__text p { max-width: 58ch; }
.section--cream .split__text p:not(.lede):not(.eyebrow), .section--sand .split__text p:not(.lede):not(.eyebrow) { color: var(--ink-soft); }
.section--teal .split__text p:not(.lede):not(.eyebrow), .section--deep .split__text p:not(.lede):not(.eyebrow) { color: var(--bone-dim); }
.media { margin: 0; position: relative; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(150deg, var(--teal-soft), var(--teal-deep)); aspect-ratio: 4 / 5; }
.media--wide { aspect-ratio: 16 / 10; }
.media--square { aspect-ratio: 1; }
.media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.6s var(--ease-out); }
.media.in img { transform: none; }
.media figcaption { position: absolute; left: 18px; bottom: 16px; max-width: calc(100% - 36px); padding: 6px 10px; border-radius: 6px; background: color-mix(in srgb, var(--teal-ink) 78%, transparent); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--bone); }
.ticks { list-style: none; margin: 26px 0 30px; padding: 0; }
.ticks li { position: relative; padding: 13px 0 13px 34px; border-top: 1px solid var(--line-dark); }
.ticks li:last-child { border-bottom: 1px solid var(--line-dark); }
.ticks li::before { content: ""; position: absolute; left: 4px; top: 21px; width: 9px; height: 9px; border-radius: 50%; background: var(--tan); }
.section--teal .ticks li, .section--deep .ticks li { border-color: var(--line-light); color: var(--bone-dim); }
.section--teal .ticks li::before, .section--deep .ticks li::before { background: var(--sand); }

/* Plan card (a sheet of paper resting on a photograph) */
.mediawrap { position: relative; }
.plancard {
  position: absolute; right: -5%; bottom: -9%; width: min(310px, 66%); padding: 24px 26px 22px; border-radius: 12px;
  background: var(--cream-panel); color: var(--ink); border: 1px solid var(--line-dark); rotate: -1.6deg;
  box-shadow: 0 44px 70px -34px color-mix(in srgb, var(--teal-ink) 80%, transparent), 0 2px 0 var(--cream);
}
.plancard__title { font-size: 11.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--tan); margin: 0 0 12px; }
.plancard dl { margin: 0; }
.plancard dl > div { padding: 11px 0; border-top: 1px solid var(--line-dark); }
.plancard dt { font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.1; }
.plancard dd { margin: 3px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
.plancard__foot { margin: 0; padding-top: 12px; border-top: 1px solid var(--line-dark); font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.3; }
@media (max-width: 1000px) { .plancard { right: 4%; bottom: -12%; } .mediawrap { margin-bottom: 9%; } }
@media (max-width: 680px) { .plancard { position: relative; right: auto; bottom: auto; width: auto; margin: -56px 14px 0; } .mediawrap { margin-bottom: 0; } }

/* Statement (one large line) */
.statement { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4.2vw, 58px); line-height: 1.14; letter-spacing: -.01em; max-width: 22ch; margin: 0; text-wrap: balance; }
.statement em { font-style: italic; color: var(--sand); }
.section--cream .statement em, .section--sand .statement em { color: var(--tan-deep); }
.statement--wide { max-width: 30ch; }
.statement--center { margin-inline: auto; text-align: center; }
.statement__by { display: block; margin-top: 28px; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--tan); }

/* Notice (plain, boxed compliance or context note) */
.notice { border: 1px solid var(--line-light); border-left: 2px solid var(--sand); border-radius: 0 var(--radius) var(--radius) 0; padding: 22px 26px; font-size: 15.5px; color: var(--bone-dim); max-width: 760px; }
.notice strong { color: var(--bone); }
.section--cream .notice, .section--sand .notice { border-color: var(--line-dark); border-left-color: var(--tan); color: var(--ink-soft); background: var(--cream-panel); }
.section--cream .notice strong, .section--sand .notice strong { color: var(--ink); }
.notice p:last-child { margin: 0; }

/* Facts (definition rows) */
.facts { margin: 0; display: grid; gap: 0; }
.facts > div { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 20px; padding: 18px 0; border-top: 1px solid var(--line-dark); }
.facts > div:last-child { border-bottom: 1px solid var(--line-dark); }
.facts dt { font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--tan); padding-top: 4px; }
.facts dd { margin: 0; }
.section--teal .facts > div, .section--deep .facts > div { border-color: var(--line-light); }
.section--teal .facts dt, .section--deep .facts dt { color: var(--sand); }
.section--teal .facts dd, .section--deep .facts dd { color: var(--bone-dim); }

/* FAQ */
.faq details { border-top: 1px solid var(--line-light); }
.faq details:last-child { border-bottom: 1px solid var(--line-light); }
.faq summary { list-style: none; cursor: pointer; padding: 26px 48px 26px 0; position: relative; font-family: var(--serif); font-size: clamp(22px, 2vw, 28px); font-weight: 500; line-height: 1.2; transition: color .3s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--sans); font-weight: 300; font-size: 30px; color: var(--sand); transition: transform .4s var(--ease); }
.faq summary:hover { color: var(--sand); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details > *:not(summary) { margin: 0 0 1em; color: var(--bone-dim); max-width: 68ch; }
.faq details > *:last-child { margin-bottom: 28px; }
.section--cream .faq details, .section--sand .faq details { border-color: var(--line-dark); }
.section--cream .faq summary::after { color: var(--tan); }
.section--cream .faq summary:hover { color: var(--tan); }
.section--cream .faq details > *:not(summary), .section--sand .faq details > *:not(summary) { color: var(--ink-soft); }
.faq__group { margin: clamp(40px, 5vw, 64px) 0 14px; font-size: 12px; font-weight: 500; font-family: var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--sand); }
.section--cream .faq__group { color: var(--tan); }
.faq__group:first-child { margin-top: 0; }

/* Tiles (library and link cards) */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tiles--2 { grid-template-columns: repeat(2, 1fr); }
.tile {
  position: relative; display: flex; flex-direction: column; min-height: 300px; padding: 30px 30px 28px; border-radius: var(--radius); overflow: hidden; isolation: isolate;
  background: var(--cream-panel); border: 1px solid var(--line-dark); color: var(--ink);
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out), border-color .4s;
}
.tile:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -34px color-mix(in srgb, var(--teal) 55%, transparent); border-color: var(--tan); }
.tile__kicker { font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--tan); margin-bottom: auto; padding-bottom: 40px; }
.tile h3 { margin-bottom: 10px; font-size: clamp(24px, 2.1vw, 29px); }
.tile p { margin: 0 0 18px; color: var(--ink-soft); font-size: 15.5px; }
.tile__more { font-size: 14px; font-weight: 500; letter-spacing: .04em; color: var(--teal); }
.tile__more::after { content: "\2192"; display: inline-block; margin-left: .45em; transition: transform .4s var(--ease); }
.tile:hover .tile__more::after { transform: translateX(5px); }
.tile--image { color: var(--bone); border-color: transparent; background: var(--teal-deep); }
.tile--image::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--img) center / cover no-repeat; transition: transform 1.4s var(--ease-out); }
.tile--image::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--teal-ink) 82%, transparent), color-mix(in srgb, var(--teal-ink) 88%, transparent) 78%); }
.tile--image:hover::before { transform: scale(1.06); }
.tile--image .tile__kicker, .tile--image .tile__more { color: var(--sand); }
.tile--image p { color: var(--bone-dim); }
.section--teal .tile:not(.tile--image), .section--deep .tile:not(.tile--image) { background: color-mix(in srgb, var(--teal-soft) 40%, transparent); border-color: var(--line-light); color: var(--bone); }
.section--teal .tile:not(.tile--image) p, .section--deep .tile:not(.tile--image) p { color: var(--bone-dim); }
.section--teal .tile:not(.tile--image) .tile__more, .section--deep .tile:not(.tile--image) .tile__more, .section--teal .tile__kicker, .section--deep .tile__kicker { color: var(--sand); }

/* Prose (articles and legal pages) */
.prose { max-width: 720px; margin-inline: auto; font-size: 18px; line-height: 1.72; color: var(--ink); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(30px, 3.2vw, 40px); margin-top: 1.9em; margin-bottom: 0; }
.prose h3 { font-size: clamp(23px, 2.2vw, 27px); margin-top: 1.6em; margin-bottom: 0; }
.prose p, .prose li { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: .5em; }
.prose li::marker { color: var(--tan); }
.prose a { color: var(--teal); text-decoration: underline; text-decoration-color: var(--tan); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--teal); }
.prose .lede { font-family: var(--serif); font-size: clamp(23px, 2.2vw, 28px); line-height: 1.38; color: var(--ink); max-width: none; }
.prose blockquote { margin-inline: 0; padding-left: 24px; border-left: 2px solid var(--tan); font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.35; }
.callout { background: var(--cream-panel); border: 1px solid var(--line-dark); border-radius: var(--radius); padding: 26px 28px; }
.callout > strong:first-child, .callout__title { display: block; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--tan); margin-bottom: 10px; }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.prose .sources { font-size: 14.5px; color: var(--ink-soft); border-top: 1px solid var(--line-dark); padding-top: 24px; margin-top: 2.6em; }
.prose .sources li, .prose .sources p { color: var(--ink-soft); }
.prose__meta { font-size: 13px; letter-spacing: .06em; color: var(--ink-soft); }
.readbar { position: fixed; left: 0; top: 0; height: 2px; width: 100%; z-index: 70; background: var(--sand); transform-origin: left; transform: scaleX(var(--read, 0)); }

/* Contact (text beside a form) */
.contact { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.contact__details { list-style: none; padding: 0; margin: 32px 0 24px; }
.contact__details li { display: grid; grid-template-columns: 96px 1fr; padding: 13px 0; border-top: 1px solid var(--line-dark); font-size: 16px; }
.contact__details li:last-child { border-bottom: 1px solid var(--line-dark); }
.contact__details span { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--tan); font-weight: 500; align-self: center; }
.contact__details a:hover { color: var(--tan); }
.contact .fine { color: var(--ink-soft); }
.contact .fine a { text-decoration: underline; text-underline-offset: 3px; }
.form { background: var(--cream-panel); border: 1px solid var(--line-dark); border-radius: var(--radius); padding: clamp(24px, 4vw, 44px); display: flex; flex-direction: column; gap: 18px; color: var(--ink); box-shadow: 0 40px 80px -50px color-mix(in srgb, var(--teal) 55%, transparent); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form label { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--ink-soft); }
.form .opt { text-transform: none; letter-spacing: 0; font-weight: 300; }
.form input:not([type="checkbox"]):not([type="radio"]), .form select, .form textarea {
  font: inherit; font-family: var(--sans); font-size: 16px; font-weight: 300; letter-spacing: 0; text-transform: none; color: var(--ink);
  padding: 13px 14px; border: 1px solid color-mix(in srgb, var(--teal) 62%, transparent); border-radius: 10px; background: var(--cream-panel); transition: border-color .3s, box-shadow .3s; width: 100%;
}
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.form select { text-overflow: ellipsis; }
.form textarea { resize: vertical; }
.form .check { flex-direction: row; align-items: flex-start; gap: 12px; text-transform: none; letter-spacing: 0; font-weight: 300; font-size: 13.5px; line-height: 1.5; }
.form .check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--teal); flex: none; }
.form .check a { text-decoration: underline; text-underline-offset: 2px; }
.form .hp { display: none; }
.form .btn { align-self: flex-start; margin-top: 6px; }
.form__status { min-height: 1.4em; margin: 0; font-size: 14.5px; color: var(--ink-soft); }
.form__status.ok { color: var(--teal); font-weight: 400; }
.form__status.err { color: var(--err); }
.form__status a, .quiz__hint a { text-decoration: underline; text-underline-offset: 3px; }
.form.is-sending .btn { opacity: .6; pointer-events: none; }

/* Fit check (quiz) */
.quiz { max-width: 820px; margin-inline: auto; background: var(--cream-panel); border: 1px solid var(--line-dark); border-radius: var(--radius-lg); padding: clamp(26px, 5vw, 60px); color: var(--ink); box-shadow: 0 50px 90px -60px color-mix(in srgb, var(--teal) 60%, transparent); }
.quiz__bar { height: 2px; background: var(--line-dark); border-radius: 2px; overflow: hidden; margin-bottom: 14px; }
.quiz__bar span { display: block; height: 100%; width: 100%; background: var(--tan); transform-origin: left; transform: scaleX(var(--q, 0)); transition: transform .6s var(--ease-out); }
.quiz__count { font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--tan); margin-bottom: clamp(22px, 3vw, 36px); }
.quiz__step { border: 0; padding: 0; margin: 0; min-width: 0; }
.quiz__step[hidden] { display: none; }
.quiz__step legend { font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; padding: 0; margin-bottom: 12px; text-wrap: balance; }
.quiz__hint { color: var(--ink-soft); margin-bottom: 26px; font-size: 16px; }
.quiz__opts { display: grid; gap: 12px; }
.opt-card { position: relative; display: block; cursor: pointer; }
.opt-card input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opt-card span { display: block; padding: 18px 54px 18px 22px; border: 1px solid var(--line-dark); border-radius: 14px; font-size: 17px; line-height: 1.4; font-weight: 400; background: var(--cream); transition: border-color .3s, background .3s, transform .4s var(--ease-out); position: relative; }
.opt-card span::after { content: ""; position: absolute; right: 20px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 1px solid var(--tan); transition: background .3s, box-shadow .3s; }
.opt-card:hover span { border-color: var(--tan); transform: translateX(3px); }
.opt-card input:checked + span { border-color: var(--teal); background: color-mix(in srgb, var(--sand) 26%, var(--cream-panel)); }
.opt-card input:checked + span::after { background: var(--teal); border-color: var(--teal); box-shadow: inset 0 0 0 4px var(--cream-panel); }
.opt-card input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 3px; }
.quiz__nav { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; gap: 12px; }
.quiz__back { background: none; border: 0; padding: 12px 4px; cursor: pointer; color: var(--ink-soft); font-size: 15px; }
.quiz__back:hover { color: var(--ink); }
.quiz__back[hidden] { visibility: hidden; display: block !important; }
.quiz__nav[hidden] .quiz__back, .quiz__again[hidden] { display: none !important; }
.quiz__msg { min-height: 1.5em; margin: 10px 0 0; text-align: right; font-size: 14.5px; color: var(--ink-soft); }
.quiz__result h2 { font-size: clamp(32px, 4vw, 48px); margin-bottom: 16px; }
.quiz__result .lede { color: var(--ink-soft); margin-bottom: 22px; }
.quiz__summary { list-style: none; margin: 0 0 28px; padding: 0; font-size: 15.5px; color: var(--ink-soft); }
.quiz__summary li { padding: 11px 0; border-top: 1px solid var(--line-dark); display: grid; grid-template-columns: minmax(110px, 190px) 1fr; gap: 16px; }
.quiz__summary li:last-child { border-bottom: 1px solid var(--line-dark); }
.quiz__summary b { font-weight: 500; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--tan); padding-top: 3px; }
.quiz .form { border: 0; padding: 0; box-shadow: none; background: none; margin-top: 8px; }

/* Answers (home: the questions people hesitate to ask). Without JS every question shows as a plain list. */
.answers { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.answers__intro h2 { margin-bottom: 20px; }
.answers__intro .lede { margin-bottom: 30px; }
.answers__tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.answers__tab {
  min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line-light); background: none; color: var(--bone-dim);
  font-size: 14.5px; letter-spacing: .02em; cursor: pointer; transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.answers__tab:hover { border-color: var(--sand); color: var(--bone); }
.answers__tab[aria-selected="true"] { background: var(--sand); border-color: var(--sand); color: var(--teal-ink); font-weight: 500; }
.answers__more { margin: 0; }
.answers__panel {
  position: relative; padding: clamp(26px, 3.4vw, 48px); border: 1px solid var(--line-light); border-radius: var(--radius-lg);
  background: linear-gradient(165deg, color-mix(in srgb, var(--teal-soft) 46%, transparent), color-mix(in srgb, var(--teal-ink) 40%, transparent));
  box-shadow: 0 60px 100px -70px var(--teal-ink), inset 0 1px 0 color-mix(in srgb, var(--bone) 8%, transparent);
}
.answers__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 16px; margin-bottom: 26px; border-bottom: 1px solid var(--line-light); font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--sand); }
.answers__count { font-family: var(--serif); font-size: 19px; letter-spacing: .04em; color: var(--bone-dim); font-variant-numeric: lining-nums tabular-nums; }
.answers__q { font-style: italic; font-weight: 400; font-size: clamp(27px, 2.9vw, 40px); line-height: 1.12; color: var(--bone); margin: 0 0 26px; }
.answers__who { font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--sand); margin: 0 0 8px; }
.answers__short { font-family: var(--serif); font-weight: 500; font-size: clamp(40px, 5vw, 72px); line-height: 1; letter-spacing: -.015em; color: var(--sand); margin: 0 0 18px; text-wrap: balance; }
.answers__long { color: var(--bone-dim); font-size: 17px; line-height: 1.6; max-width: 46ch; margin: 0; }
.answers__slide + .answers__slide { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--line-light); }
.answers__bar { display: none; }
.answers.is-live .answers__stage { display: grid; }
.answers.is-live .answers__slide { grid-area: 1 / 1; margin: 0; padding: 0; border: 0; visibility: hidden; opacity: 0; transition: opacity .4s var(--ease), visibility 0s .4s; }
.answers.is-live .answers__slide.is-active { visibility: visible; opacity: 1; transition: opacity .7s var(--ease) .1s; }
.answers.is-live .answers__slide > * { transform: translateY(14px); transition: transform .9s var(--ease-out) .1s; }
.answers.is-live .answers__slide.is-active > * { transform: none; }
.answers.is-live .answers__slide.is-active .answers__short { transition-delay: .2s; }
.answers.is-live .answers__slide.is-active .answers__long { transition-delay: .3s; }
.answers.is-live .answers__bar { display: flex; align-items: center; gap: 4px; margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line-light); }
.answers__btn { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid transparent; background: none; color: var(--bone); cursor: pointer; transition: border-color .3s, color .3s; }
.answers__btn:hover { border-color: var(--line-light); color: var(--sand); }
.answers__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.answers__btn .ico-play { fill: currentColor; stroke: none; display: none; }
.answers__btn[data-paused="true"] .ico-play { display: block; }
.answers__btn[data-paused="true"] .ico-pause { display: none; }
.answers__progress { flex: 1; height: 1px; margin: 0 12px 0 8px; background: var(--line-light); }
.answers__progress span { display: block; height: 3px; margin-top: -1px; border-radius: 2px; background: var(--sand); transform-origin: left; transform: scaleX(0); }
.answers__progress span.is-running { animation: answersbar var(--answers-ms, 8000ms) linear forwards; }
.answers.is-paused .answers__progress span { animation-play-state: paused; }
@keyframes answersbar { to { transform: scaleX(1); } }
html.static .answers.is-live .answers__slide, html.static .answers.is-live .answers__slide > * { transition: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .answers.is-live .answers__slide, .answers.is-live .answers__slide > * { transition: none; transform: none; }
  .answers__progress, .answers__btn[data-answers-toggle] { display: none; }
}
@media (max-width: 1000px) {
  .answers { grid-template-columns: 1fr; }
}

/* Chooser (home: "what brings you here?" chips that start the fit check) */
.chooser { display: flex; flex-wrap: wrap; gap: 12px; }
.chooser a { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 22px; border-radius: 999px; border: 1px solid var(--line-light); color: var(--bone); font-size: 15.5px; transition: border-color .3s, background .3s, color .3s, transform .4s var(--ease-out); }
.chooser a:hover { border-color: var(--sand); background: color-mix(in srgb, var(--sand) 12%, transparent); color: var(--sand); transform: translateY(-2px); }
.section--cream .chooser a, .section--sand .chooser a { border-color: var(--line-dark); color: var(--ink); background: var(--cream-panel); }
.section--cream .chooser a:hover, .section--sand .chooser a:hover { border-color: var(--teal); color: var(--teal); }

/* Utah statutory notice (58-1-512). Verbatim text, set large on purpose: the statute ties its size to the
   largest type in the advertisement. Pages with body class "notice-strict" cap every other size to match it. */
:root { --notice-size: clamp(27px, 3.3vw, 46px); }
.utahnotice { background: var(--teal-ink) var(--grain); border-block: 1px solid var(--line-light); padding: clamp(56px, 7vw, 104px) 0; color: var(--bone); }
.utahnotice__text { font-family: var(--serif); font-weight: 500; font-size: var(--notice-size); line-height: 1.14; letter-spacing: -.005em; color: var(--sand-soft); margin: 0 0 26px; max-width: 30ch; text-wrap: pretty; }
.utahnotice .wrap { display: grid; grid-template-columns: minmax(0, 1fr); }
.utahnotice__text { max-width: none; }
.utahnotice__cite { font-size: 13.5px; letter-spacing: .04em; color: var(--bone-dim); margin: 0; }
.utahnotice__cite a { border-bottom: 1px solid var(--line-light); }
.utahnotice__cite a:hover { color: var(--sand); border-color: var(--sand); }
/* When the notice is the last block on a page it sits against the footer, which shares its ground: lift it to teal so it stays its own band. */
main > .utahnotice:last-child { background-color: var(--teal); border-bottom: 0; }
body.notice-strict { --notice-size: clamp(32px, 4.3vw, 58px); }
body.notice-strict.home { --notice-size: clamp(36px, 5.2vw, 76px); }
/* nothing on a strict page may be set larger than the notice */
body.notice-strict :is(h1, .hero__title, .ctaband h2, .answers__short) { font-size: var(--notice-size); line-height: 1.06; }
body.notice-strict main :is(h2, .statement, .quiz__result h2) { font-size: min(var(--notice-size), clamp(28px, 3.5vw, 46px)); }
body.notice-strict main .prose h2 { font-size: min(var(--notice-size), clamp(30px, 3.2vw, 40px)); }
body.notice-strict .menu__links a { font-size: min(var(--notice-size), clamp(27px, 7vw, 40px)); }
body.notice-strict .hero__title { line-height: .98; }
/* the footer lockup is lettering too: it scales with the notice so its wordmark never stands taller than the notice's own letters */
body.notice-strict .footer__brand img { width: min(230px, calc(var(--notice-size) * 5.125)); }

/* CTA band */
.ctaband { position: relative; isolation: isolate; overflow: hidden; padding: clamp(96px, 12vw, 180px) 0; text-align: center; background: var(--teal-deep); }
.ctaband__bg { position: absolute; inset: -8% 0; z-index: -2; background: url("/assets/img/salt-shore.webp") center / cover no-repeat, linear-gradient(160deg, var(--teal-soft), var(--teal-ink)); will-change: transform; }
.ctaband::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(1000px 560px at 50% 50%, color-mix(in srgb, var(--teal-deep) 82%, transparent), color-mix(in srgb, var(--teal-ink) 88%, transparent)); }
.ctaband__inner { display: flex; flex-direction: column; align-items: center; }
.ctaband h2 { font-size: clamp(42px, 6.4vw, 92px); margin-bottom: 22px; }
.ctaband .lede { color: var(--bone-dim); margin-bottom: 34px; }
.ctaband .actions { justify-content: center; margin-bottom: 24px; }
.ctaband .fine { margin: 0; }
.ctaband .eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }

/* Footer */
.footer { background: var(--teal-ink) var(--grain); border-top: 1px solid var(--line-light); padding: clamp(60px, 7vw, 92px) 0 36px; color: var(--bone-dim); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1.25fr 1.1fr; gap: clamp(28px, 4vw, 64px); }
.footer__brand img { margin: -6px 0 16px -6px; }
.footer__brand p { font-size: 14px; margin: 0; }
.footer__col { display: flex; flex-direction: column; gap: 11px; font-size: 14.5px; }
.footer__col h2 { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--sand); margin: 0 0 8px; }
.footer__col a { transition: color .3s; align-self: flex-start; }
.footer a:hover { color: var(--sand); }
.footer__legal { margin-top: clamp(44px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--line-light); font-size: 12.5px; line-height: 1.65; }
.footer__legal p { max-width: 980px; }
.footer__base { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 18px 0 0; max-width: none !important; }

/* Sticky call-to-action (small screens, after the first screen) */
.stickycta {
  position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 50; display: none; align-items: center; gap: 6px;
  padding: 8px 8px 8px 8px; border-radius: 999px; background: color-mix(in srgb, var(--teal-ink) 88%, transparent); border: 1px solid var(--line-light);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 40px -18px var(--teal-ink);
  transform: translateY(140%); visibility: hidden; transition: transform .6s var(--ease-out), visibility 0s .6s; /* hidden once it has slid away, so its links leave the tab order */
}
.stickycta.is-on { transform: none; visibility: visible; transition-delay: 0s; }
.stickycta .btn { flex: 1; min-height: 46px; padding: 12px 18px; }
.stickycta__alt { padding: 12px 18px; font-size: 14px; color: var(--bone); white-space: nowrap; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: .07s; }
.reveal:nth-child(3) { transition-delay: .14s; }
.reveal:nth-child(4) { transition-delay: .21s; }
.reveal:nth-child(5) { transition-delay: .28s; }
.reveal:nth-child(6) { transition-delay: .35s; }

/* Error page */
.notfound { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: calc(var(--nav-h) + 40px) 0 80px; }
.notfound .actions { justify-content: center; }
.notfound .lede { margin-inline: auto; margin-bottom: 30px; color: var(--bone-dim); }

html.static .reveal { opacity: 1; transform: none; transition: none; }
html.static .media img { transform: none; transition: none; }
html.static .marquee__track, html.static .pagehead__art { animation: none; }
html.static { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .media img { transform: none; transition: none; }
  .marquee__track, .pagehead__art { animation: none; }
  .btn:hover, .pillar:hover, .card:hover, .tile:hover, .chooser a:hover, .opt-card:hover span { transform: none; }
  .menu__links a { transition: none; opacity: 1; transform: none; }
  .timeline::after { transition: none; }
}

/* Responsive */
@media (max-width: 1080px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: block; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1000px) {
  .pillars, .cards, .cards--3, .tiles { grid-template-columns: 1fr 1fr; }
  .honest, .contact, .split, .split--wide { grid-template-columns: 1fr; }
  .honest__text { position: static; }
  .split--flip .split__text { order: 0; }
  .media { aspect-ratio: 16 / 11; }
  .strip__inner { grid-template-columns: 1fr 1fr; }
  .strip__inner > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .strip__inner > div:nth-child(n+3) { border-top: 1px solid var(--line-light); }
  .pagehead__art { opacity: .2; right: -30%; width: 86vw; margin-top: -43vw; }
  .pagehead--image::before { opacity: .24; } /* the text runs the full width here, past the side scrim */
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  :root { --nav-h: 66px; }
  .brand__word { font-size: 27px; }
  .pillars, .pillars--2, .cards, .cards--3, .tiles, .tiles--2, .strip__inner, .form__row { grid-template-columns: 1fr; }
  .strip__inner > div { padding: 22px 0 !important; border-left: 0 !important; }
  .strip__inner > div + div { border-top: 1px solid var(--line-light); }
  .step { grid-template-columns: 48px 1fr; gap: 16px; }
  .step__num { width: 40px; height: 40px; font-size: 18px; }
  .card, .pillar { padding: 30px 24px; }
  .tile { min-height: 240px; }
  .compare__row { grid-template-columns: 1fr; }
  .compare__row > div + div { border-left: 0; border-top: 1px dashed var(--line-dark); }
  .compare__head { display: none; }
  /* the header row is gone at this width, so each cell shows its own label (real text in the markup, visually hidden above 680px) */
  .compare__label {
    position: static; width: auto; height: auto; margin: 0 0 4px; overflow: visible; clip: auto; clip-path: none; white-space: normal; display: block;
    font-family: var(--sans); font-style: normal; font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--tan);
  }
  .compare__us .compare__label { margin-bottom: 6px; }
  .facts > div, .quiz__summary li { grid-template-columns: 1fr; gap: 4px; }
  .footer__grid { grid-template-columns: 1fr; }
  .section--sheet { --radius-lg: 22px; }
  .strip:has(+ .section--sheet) { padding-bottom: 22px; }
  html { scroll-padding-bottom: 96px; } /* keyboard focus never lands underneath the sticky bar */
  .stickycta { display: flex; }
  .stickycta[hidden] { display: none; }
  body.has-stickycta .footer { padding-bottom: 96px; }
  .prose { font-size: 17px; }
  .btn { white-space: normal; text-align: center; }
}
@media (max-width: 350px) {
  .stickycta .btn, .stickycta__alt { padding: 12px 10px; }
}

/* HERO — home page (see src/pages/index.html; the canvas is driven by the hero block in app.js) */
.hero {
  position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; display: flex; flex-direction: column;
  padding-top: var(--nav-h); background: var(--teal-deep);
}
.hero__photo {
  position: absolute; inset: 0; z-index: -3; background: url("/assets/img/wasatch-dawn.webp") center 78% / cover no-repeat;
  transform: scale(1.1); transform-origin: 60% 70%; animation: heropush 18s var(--ease-out) .2s forwards;
}
@keyframes heropush { to { transform: scale(1); } }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--teal-deep) 94%, transparent) 0%, color-mix(in srgb, var(--teal-deep) 72%, transparent) 38%, transparent 74%),
    linear-gradient(180deg, color-mix(in srgb, var(--teal-deep) 92%, transparent) 0%, transparent 34%, transparent 62%, color-mix(in srgb, var(--teal-ink) 92%, transparent) 100%);
}
.hero__canvas {
  position: absolute; z-index: -1; right: -9%; top: 45%; width: min(92vh, 55vw); aspect-ratio: 1; margin-top: calc(min(92vh, 55vw) / -2);
  background: radial-gradient(circle at 55% 49%, color-mix(in srgb, var(--sand) 12%, transparent), transparent 58%);
  /* the mark dissolves toward the headline so the two never collide */
  -webkit-mask-image: linear-gradient(90deg, transparent 3%, #000 30%); mask-image: linear-gradient(90deg, transparent 3%, #000 30%);
}
.hero__inner { margin-block: auto; padding-block: clamp(36px, 6vh, 80px) clamp(28px, 4vh, 56px); }
.hero__inner > * { max-width: 700px; }
.hero__title { font-size: clamp(62px, 10.6vw, 168px); line-height: .9; letter-spacing: -.022em; margin: 0 0 clamp(22px, 3.2vh, 40px); max-width: none; }
.hero__title .line { display: block; overflow: hidden; padding: .08em .1em .16em 0; margin: -.08em 0 -.16em; }
.hero__title .line > span { display: block; transform: translateY(112%); transition: transform 1.5s var(--ease-out); }
.hero__title .line:nth-child(2) > span { transition-delay: .14s; }
.hero.is-ready .hero__title .line > span { transform: none; }
.hero .lede { color: var(--bone); max-width: 52ch; margin-bottom: clamp(24px, 3.4vh, 36px); text-shadow: 0 1px 24px var(--teal-deep); }
.hero .actions { margin-bottom: 22px; }
.hero .fine { margin: 0; }
.hero__in { opacity: 0; transform: translateY(18px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease-out); }
.hero.is-ready .hero__in { opacity: 1; transform: none; }
.hero__inner .hero__in:nth-child(3) { transition-delay: .5s; }
.hero__inner .hero__in:nth-child(4) { transition-delay: .62s; }
.hero__inner .hero__in:nth-child(5) { transition-delay: .74s; }
.hero__railwrap.hero__in { transition-delay: .95s; }
.hero__rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line-light); }
.hero__rail li + li { border-left: 1px solid var(--line-light); }
.hero__rail a { display: flex; flex-direction: column; gap: 4px; padding: 20px 18px 24px; color: var(--bone-dim); transition: color .3s, background .4s; min-height: 48px; }
.hero__rail li:first-child a { padding-left: 0; }
.hero__rail b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 17px; color: var(--sand); }
.hero__rail span { font-size: 14.5px; letter-spacing: .02em; }
.hero__rail a:hover { color: var(--bone); background: linear-gradient(180deg, color-mix(in srgb, var(--sand) 9%, transparent), transparent); }
/* Pause / play for the ambient motion (photo, dot mark, ticker). app.js shows it only when motion is on and sets html.motion-paused.
   It sits above the right end of the rail, clear of the hero copy; below 1000px, where the copy spans the full width, it takes its own row. */
.hero__railwrap { position: relative; }
.hero__motion {
  position: absolute; right: 0; bottom: calc(100% + 12px);
  display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 14px 0 12px; cursor: pointer;
  border: 1px solid var(--line-light); border-radius: 999px; background: color-mix(in srgb, var(--teal-ink) 82%, transparent);
  color: var(--bone-dim); font-size: 12px; font-weight: 400; letter-spacing: .06em; line-height: 1; transition: border-color .3s, color .3s;
}
.hero__motion:hover { border-color: var(--sand); color: var(--bone); }
.hero__motion svg { width: 10px; height: 10px; fill: currentColor; flex: none; }
.hero__motion .ico-play, html.motion-paused .hero__motion .ico-pause { display: none; }
html.motion-paused .hero__motion .ico-play { display: block; }
html.motion-paused .hero__photo, html.motion-paused .marquee__track { animation-play-state: paused; }
html.static .hero__photo { animation: none; transform: none; }
html.static .hero__title .line > span, html.static .hero__in { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .hero__photo { animation: none; transform: none; }
  .hero__title .line > span, .hero__in { transition: none; }
}
@media (min-width: 1001px) {
  /* Desktop: --copy-end is where the copy column ends, measured from the left edge of the screen. The side scrim holds
     through it and the dot mark only fades in past it, so neither the sunlit ridge nor the dots sit behind the lede or
     the disclaimer line. */
  .hero { --copy-end: calc(max(var(--gutter), 50vw - 600px) + 740px); }
  .hero::before {
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--teal-deep) 94%, transparent) 0, color-mix(in srgb, var(--teal-deep) 70%, transparent) var(--copy-end), transparent calc(var(--copy-end) + 410px)),
      linear-gradient(180deg, color-mix(in srgb, var(--teal-deep) 92%, transparent) 0%, transparent 34%, transparent 62%, color-mix(in srgb, var(--teal-ink) 92%, transparent) 100%);
  }
  .hero__canvas {
    --fade: max(3%, var(--copy-end) - 109vw + min(92vh, 55vw)); /* the same point, measured from the canvas's own left edge */
    -webkit-mask-image: linear-gradient(90deg, transparent var(--fade), #000 calc(var(--fade) + 27%)); mask-image: linear-gradient(90deg, transparent var(--fade), #000 calc(var(--fade) + 27%));
  }
}
@media (min-width: 1001px) and (max-width: 1180px) {
  /* just above the tablet breakpoint the mark sits close to the copy: the lede and the disclaimer wrap sooner, so the whole mark still shows */
  .hero { --copy-end: calc(var(--gutter) + 520px); }
  .hero .lede, .hero .fine { max-width: 480px; }
}
@media (max-width: 1000px) {
  /* the text spans the full width here, so the mark fades out downward and ends above the eyebrow */
  .hero__canvas {
    right: -34%; top: 30%; width: 120vw; margin-top: -60vw; opacity: .3;
    -webkit-mask-image: linear-gradient(180deg, #000 25%, transparent 55%); mask-image: linear-gradient(180deg, #000 25%, transparent 55%);
  }
  .hero::before {
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--teal-deep) 90%, transparent) 0%, color-mix(in srgb, var(--teal-deep) 38%, transparent) 30%, color-mix(in srgb, var(--teal-deep) 82%, transparent) 62%, color-mix(in srgb, var(--teal-ink) 96%, transparent) 100%);
  }
  .hero__rail { grid-template-columns: repeat(5, max-content); overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .hero__motion { position: static; margin: 0 0 12px auto; }
  .hero__rail::-webkit-scrollbar { display: none; }
  .hero__rail a { padding-right: 26px; }
}
@media (max-width: 680px) {
  .hero__inner { padding-top: 29vh; }
  .hero__canvas {
    right: -26%; top: calc(var(--nav-h) - 4vw); width: 122vw; margin-top: 0; opacity: .78;
    /* the eyebrow starts 29vh + 4vw below the canvas top (see .hero__inner padding-top above); the fade ends just before it */
    -webkit-mask-image: linear-gradient(180deg, #000 calc((29vh + 4vw) * .4), transparent calc(29vh + 4vw - 6px)); mask-image: linear-gradient(180deg, #000 calc((29vh + 4vw) * .4), transparent calc(29vh + 4vw - 6px));
  }
  .hero__title { font-size: clamp(58px, 17.5vw, 84px); }
}

/* Print: reveal and hero states are scroll- and timer-driven and never run on paper; nothing stays fixed. */
@media print {
  .reveal, .hero__in, .hero__title .line > span { opacity: 1 !important; transform: none !important; transition: none !important; }
  .nav { position: absolute; }
  .nav__toggle, .menu, .stickycta, .readbar, .marquee, .hero__motion { display: none !important; }
  .answers.is-live .answers__stage { display: block; }
  .answers.is-live .answers__slide { visibility: visible; opacity: 1; transition: none; }
  .answers.is-live .answers__slide > * { transform: none; transition: none; }
  .answers.is-live .answers__slide + .answers__slide { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--line-light); }
  .answers__tabs, .answers__count, .answers.is-live .answers__bar { display: none; }
}

/* Fallback where color-mix() is unsupported (Safari before 16.2, Chrome before 111). Each color-mix() above sits beside a var(), so there the whole declaration computes to transparent. Keep this block last: it wins by source order. */
@supports not (color: color-mix(in srgb, red, blue)) {
  .nav.is-stuck, body.menu-open .nav { background: var(--teal-deep); }
  .stickycta, .media figcaption, .hero__motion { background: var(--teal-ink); }
  .hero::before, .pagehead--image::after { background: var(--teal-deep); opacity: .78; }
  .section--image::after, .tile--image::after, .ctaband::after { background: var(--teal-deep); opacity: .88; }
  .form input:not([type="checkbox"]):not([type="radio"]), .form select, .form textarea { border: 1px solid var(--ink-soft); }
}