/* ==========================================================================
   HighRisk Compare — design system
   1. Tokens        5. Header / nav
   2. Reset/base    6. Sections & components
   3. Motion        7. Tables / forms
   4. Layout        8. Footer / utilities / responsive
   ========================================================================== */

/* -------------------------------------------------- 1. Tokens ------------ */
:root {
  /* One family, several weights. Body text is Open Sans at 400; headings are the
     same face at 700/800 so the page reads in a single voice — which is how the
     established legal and financial sites handle it.
     To put headings in a serif instead, change --font-display to
     var(--font-serif). Nothing else needs touching: the micro-labels (table
     headers, eyebrows, step numbers) are deliberately pinned to --font-sans so
     they stay sans-serif under either setting. */
  --font-sans:    "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif:   Georgia, "Times New Roman", Times, serif;
  --font-display: var(--font-sans);

  --c-bg:        #ffffff;
  --c-bg-soft:   #f4f7fc;
  --c-bg-sunken: #eef3fa;
  --c-card:      #ffffff;
  --c-line:      #e3eaf4;
  --c-line-soft: #eef2f8;

  --c-ink:       #08102a;
  --c-body:      #4a5670;
  --c-muted:     #77839c;

  --c-brand:     #1552f0;
  --c-brand-ink: #0c37a8;
  --c-brand-2:   #00c2a3;
  --c-accent:    #ff8a3d;
  --c-danger:    #e0475f;
  --c-ok:        #12a06f;
  --c-warn:      #c98a08;

  --c-dark:      #060b1c;
  --c-dark-2:    #0b1430;
  --c-on-dark:   #eaf0ff;
  --c-on-dark-m: #9fb0d4;

  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --shadow-sm: 0 1px 2px rgba(8,16,42,.06), 0 2px 8px rgba(8,16,42,.04);
  --shadow:    0 4px 12px rgba(8,16,42,.06), 0 18px 40px -18px rgba(8,16,42,.22);
  --shadow-lg: 0 8px 24px rgba(8,16,42,.08), 0 40px 80px -32px rgba(8,16,42,.34);
  --shadow-brand: 0 12px 28px -10px rgba(21,82,240,.55);

  --wrap: 1180px;
  --wrap-narrow: 760px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  /* Section padding is doubled wherever two sections meet, so this number lands
     twice. At the old 7rem cap that meant 224px of dead space between blocks on
     a wide screen. */
  --sect-y: clamp(2.75rem, 5.5vw, 4.75rem);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.4,.44,1);
  --header-h: 72px;
}

[data-theme="dark"] {
  --c-bg:        #060b1c;
  --c-bg-soft:   #0a1226;
  --c-bg-sunken: #0d1730;
  --c-card:      #0c142c;
  --c-line:      #1c2748;
  --c-line-soft: #16203c;

  --c-ink:       #eef3ff;
  --c-body:      #a9b8d8;
  --c-muted:     #8092b6;

  --c-brand:     #5b8cff;
  --c-brand-ink: #9db9ff;
  --c-brand-2:   #2fe0c0;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 8px 26px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.55);
  color-scheme: dark;
}

/* -------------------------------------------------- 2. Base -------------- */
*, *::before, *::after { box-sizing: border-box; }
/* Deliberately no overflow on html. Setting it here makes html the page's scroll
   container instead of body, which then (a) stops `body.nav-open{overflow:hidden}`
   from locking the page behind the drawer, and (b) breaks position:sticky on the
   header. The horizontal overflow this was originally added to contain came from
   the .reveal transform bug, which is fixed at source further down. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-body);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* A long unbroken string — a URL, a licence reference, an email — is the other
     common way a phone layout ends up scrolling sideways. */
  overflow-wrap: break-word;
  /* On body, not html. The root is `visible`, so this propagates to the viewport
     and body itself stays visible — which keeps the sticky header working and
     lets body.nav-open lock the page behind the drawer. */
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
/* Grid and flex children default to min-width:auto, so a wide child (the 940px
   comparison table, a long heading) can push its track past the viewport rather
   than shrinking. Reset it where content actually lands. */
.prose, .form-card, .hero__copy, .sidebar, .card, .table-scroll { min-width: 0; }
table { max-width: 100%; }
/* Open Sans is wider and has a larger x-height than the geometric faces this
   scale was first tuned for, so it wants less negative tracking and a little
   more leading than they did. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--c-ink);
  line-height: 1.2;
  letter-spacing: -.011em;
  margin: 0 0 .6em;
  font-weight: 700;
}
/* Even out heading line lengths instead of leaving one short word stranded on
   the last line — most visible on a phone, where a two-line heading often
   breaks badly. Ignored by browsers that do not support it. */
h1, h2, h3 { text-wrap: balance; }
h1 { font-size: clamp(2rem, 5vw, 3.15rem);      font-weight: 800; line-height: 1.14; letter-spacing: -.021em; }
h2 { font-size: clamp(1.55rem, 3.2vw, 2.25rem); font-weight: 700; line-height: 1.18; letter-spacing: -.016em; }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem);    font-weight: 700; letter-spacing: -.008em; }
h4 { font-size: 1.05rem;  font-weight: 600; letter-spacing: 0; }
h5 { font-size: .95rem;   font-weight: 600; letter-spacing: 0; }
h6 { font-size: .875rem;  font-weight: 600; letter-spacing: 0; }
p  { margin: 0 0 1.15em; }
a  { color: var(--c-brand); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--c-brand-ink); }
ul, ol { padding-left: 1.15em; margin: 0 0 1.3em; }
li { margin-bottom: .5em; }
strong { color: var(--c-ink); font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--c-line); margin: 2.5rem 0; }
blockquote {
  margin: 1.8rem 0; padding: 1.1rem 1.4rem;
  border-left: 3px solid var(--c-brand);
  background: var(--c-bg-soft); border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--c-ink); font-size: 1.03rem;
}
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--c-bg-sunken); padding: .15em .4em; border-radius: 6px; }
:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 3px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--c-brand) 22%, transparent); color: var(--c-ink); }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 50%; top: -60px; transform: translateX(-50%);
  background: var(--c-ink); color: #fff; padding: .7rem 1.3rem; border-radius: 0 0 12px 12px;
  z-index: 2000; transition: top .25s var(--ease); font-weight: 600;
}
.skip-link:focus { top: 0; color: #fff; }

/* -------------------------------------------------- 3. Motion ------------ */
/* Resting states first, then the variants, then .is-in LAST.
   Order matters here: `.reveal.is-in` and `.reveal[data-rv="left"]` have the
   same specificity, so whichever is written last wins. With .is-in above the
   variants, the transform never reset — leaving every data-rv="left" block
   permanently 32px off-screen to the left and every data-rv="right" block 32px
   past the right edge, which is what made the whole page scroll sideways. */
.reveal { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity .75s var(--ease), transform .75s var(--ease); will-change: opacity, transform; }
.reveal[data-rv="left"]  { transform: translate3d(-32px, 0, 0); }
.reveal[data-rv="right"] { transform: translate3d(32px, 0, 0); }
.reveal[data-rv="zoom"]  { transform: scale(.94); }
.reveal[data-rv="blur"]  { filter: blur(10px); transform: translate3d(0,18px,0); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }

.reveal.is-in,
.reveal.is-in[data-rv] { opacity: 1; transform: none; filter: none; }
[data-stagger] > * { transition-delay: calc(var(--i, 0) * 85ms); }

@keyframes hrc-float   { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-16px) } }
@keyframes hrc-drift   { 0% { transform: translate(0,0) scale(1) } 33% { transform: translate(4%, -6%) scale(1.07) } 66% { transform: translate(-5%, 4%) scale(.95) } 100% { transform: translate(0,0) scale(1) } }
@keyframes hrc-spin    { to { transform: rotate(360deg) } }
@keyframes hrc-pulse   { 0%,100% { opacity: .5; transform: scale(1) } 50% { opacity: 1; transform: scale(1.14) } }
@keyframes hrc-marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes hrc-sheen   { 0% { transform: translateX(-120%) } 60%,100% { transform: translateX(220%) } }
@keyframes hrc-in      { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: none } }
@keyframes hrc-bar     { from { transform: scaleX(0) } to { transform: scaleX(1) } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* -------------------------------------------------- 4. Layout ------------ */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: var(--wrap-narrow); }
.section { padding-block: var(--sect-y); position: relative; }
.section--soft { background: var(--c-bg-soft); }
.section--dark { background: var(--c-dark); color: var(--c-on-dark-m); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4, .section--dark strong { color: #fff; }
.grid { display: grid; gap: clamp(1.1rem, 2.4vw, 1.9rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.stack > * + * { margin-top: 1.1rem; }
.center { text-align: center; }
.sect-head { max-width: 720px; margin-bottom: clamp(1.6rem, 3vw, 2.5rem); }
.sect-head.center { margin-inline: auto; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-sans); font-size: .76rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--c-brand);
  margin-bottom: .85rem;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--c-brand), var(--c-brand-2)); }
.section--dark .eyebrow { color: var(--c-brand-2); }
.lede { font-size: clamp(1.03rem, 1.6vw, 1.2rem); color: var(--c-body); }
.section--dark .lede { color: var(--c-on-dark-m); }

/* -------------------------------------------------- 5. Header ------------ */
.site-header {
  position: sticky; top: 0; z-index: 900;
  background: color-mix(in srgb, var(--c-bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--c-line); box-shadow: 0 6px 24px -14px rgba(8,16,42,.35); }
.site-header__bar { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-sans); font-weight: 800; font-size: 1.05rem; color: var(--c-ink); letter-spacing: -.014em; }
.brand:hover { color: var(--c-ink); }
.brand__mark { width: 34px; height: 34px; flex: none; border-radius: 10px; box-shadow: var(--shadow-brand); transition: transform .4s var(--ease-spring); }
/* An uploaded logo brings its own shape and transparency — the tile treatment
   would draw a brand-coloured glow around empty space behind it. */
.brand__mark--img { width: auto; height: 34px; border-radius: 0; box-shadow: none; object-fit: contain; }
.site-footer .brand__mark--img { filter: brightness(0) invert(1); opacity: .95; }
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.07); }
.brand__name em { font-style: normal; background: linear-gradient(92deg, var(--c-brand), var(--c-brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.nav li { margin: 0; position: relative; }
.nav a:not(.btn) {
  display: block; padding: .55rem .8rem; border-radius: 10px;
  font-size: .935rem; font-weight: 500; color: var(--c-body); white-space: nowrap;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav a:not(.btn):hover, .nav .current-menu-item > a, .nav .current_page_item > a { color: var(--c-ink); background: var(--c-bg-soft); }
.nav .menu-item-has-children > a::after { content: ""; display: inline-block; width: .42em; height: .42em; margin-left: .45em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .55; }
.nav .sub-menu {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 246px;
  background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: .5rem; display: block;
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.98);
  transition: all .28s var(--ease); flex-direction: column; align-items: stretch;
}
.nav li:hover > .sub-menu, .nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.nav .sub-menu a { padding: .5rem .7rem; font-size: .9rem; }
.header-tools { display: flex; align-items: center; gap: .5rem; }
.theme-toggle {
  width: 38px; height: 38px; display: grid; place-items: center; flex: none;
  border: 1px solid var(--c-line); border-radius: 11px; background: var(--c-card);
  color: var(--c-body); cursor: pointer; transition: all .25s var(--ease);
}
.theme-toggle:hover { color: var(--c-brand); border-color: var(--c-brand); transform: translateY(-2px); }
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

/* Flex column, not grid: three auto grid rows in a fixed-height box stretch to
   fill it, which spreads the bars apart instead of stacking them tightly.
   Same 38px box as .theme-toggle so the two sit as a matched pair. */
.nav-toggle {
  display: none; flex-direction: column; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  border: 1px solid var(--c-line); border-radius: 11px; background: var(--c-card);
  color: var(--c-body); cursor: pointer; padding: 0;
  transition: all .25s var(--ease);
}
.nav-toggle:hover { color: var(--c-brand); border-color: var(--c-brand); transform: translateY(-2px); }
.nav-toggle span { display: block; width: 17px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--ease), opacity .2s var(--ease); }
.nav-toggle span + span { margin-top: 4px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Scoped to .site-header so these beat `.btn { display: inline-flex }`, which is
   defined further down the file at the same specificity. */
.site-header .show-sm { display: none; }
@media (max-width: 860px) {
  .site-header .show-sm { display: flex; width: 100%; }
  .site-header .hide-sm { display: none; }
}
@media (max-width: 400px) { .brand__name { display: none; } }

.scroll-progress { position: fixed; inset: 0 auto auto 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--c-brand), var(--c-brand-2), var(--c-accent)); z-index: 999; }

/* -------------------------------------------------- 6. Buttons ----------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .92rem 1.6rem; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font-sans); font-size: .975rem; font-weight: 600; line-height: 1.2;
  cursor: pointer; text-align: center; overflow: hidden; isolation: isolate;
  transition: transform .28s var(--ease-spring), box-shadow .28s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
/* Lift on hover only where a real pointer exists. On touch, `:hover` either
   never fires (so the effect looked broken) or latches after a tap and stays
   stuck — neither is what you want. Touch gets the press state below instead. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-3px); }
}
.btn:active { transform: translateY(-1px) scale(.985); filter: brightness(1.08); }
.btn svg { flex: none; transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--primary { background: linear-gradient(100deg, var(--c-brand), #3f7bff 55%, var(--c-brand-2)); color: #fff; box-shadow: var(--shadow-brand); background-size: 180% 100%; }
.btn--primary:hover { color: #fff; background-position: 100% 0; box-shadow: 0 18px 36px -12px rgba(21,82,240,.62); }
.btn--primary::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 42%; z-index: -1; background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent); transform: translateX(-120%); }
.btn--primary:hover::after { animation: hrc-sheen 1s var(--ease) forwards; }
.btn--ghost { background: var(--c-card); color: var(--c-ink); border-color: var(--c-line); box-shadow: var(--shadow-sm); }
.btn--ghost:hover { border-color: var(--c-brand); color: var(--c-brand); box-shadow: var(--shadow); }
.btn--onDark { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.2); backdrop-filter: blur(8px); }
.btn--onDark:hover { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.4); }
.btn--sm { padding: .58rem 1.05rem; font-size: .855rem; }
.btn--lg { padding: 1.08rem 2.1rem; font-size: 1.055rem; }
.btn--block { display: flex; width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.btn-row.center { justify-content: center; }

/* -------------------------------------------------- 6b. Hero ------------- */
.hero { position: relative; overflow: clip; background: var(--c-dark); color: var(--c-on-dark-m); padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(4rem, 9vw, 7rem); isolation: isolate; }
.hero__bg { position: absolute; inset: -20% -10%; z-index: -2; }
.hero__orb { position: absolute; border-radius: 50%; filter: blur(78px); opacity: .55; animation: hrc-drift 22s ease-in-out infinite; }
.hero__orb--1 { width: 46vw; height: 46vw; left: -8%; top: -14%; background: radial-gradient(circle, #1552f0, transparent 68%); }
.hero__orb--2 { width: 40vw; height: 40vw; right: -6%; top: 4%; background: radial-gradient(circle, #00c2a3, transparent 68%); animation-duration: 28s; animation-direction: reverse; }
.hero__orb--3 { width: 34vw; height: 34vw; left: 32%; bottom: -22%; background: radial-gradient(circle, #7a4dff, transparent 70%); animation-duration: 34s; }
.hero__grid {
  position: absolute; inset: 0; z-index: -1; opacity: .3;
  background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 78%);
}
.hero h1, .hero h2 { color: #fff; }
.hero__inner { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: 1.08fr .92fr; }
.hero__copy > * { animation: hrc-in .8s var(--ease) backwards; }
.hero__copy > *:nth-child(1) { animation-delay: .05s } .hero__copy > *:nth-child(2) { animation-delay: .15s }
.hero__copy > *:nth-child(3) { animation-delay: .25s } .hero__copy > *:nth-child(4) { animation-delay: .35s }
.hero__copy > *:nth-child(5) { animation-delay: .45s }
.hero p { color: var(--c-on-dark-m); }
.hero__sub { font-size: clamp(1.03rem, 1.65vw, 1.2rem); max-width: 40em; }
.hero .eyebrow { color: var(--c-brand-2); }
.pill {
  display: inline-flex; align-items: center; gap: .55rem; padding: .42rem .95rem .42rem .55rem;
  border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  font-size: .83rem; font-weight: 500; color: var(--c-on-dark); backdrop-filter: blur(8px); margin-bottom: 1.4rem;
}
.pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-brand-2); box-shadow: 0 0 0 4px rgba(0,194,163,.22); animation: hrc-pulse 2.2s ease-in-out infinite; }
.hero__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1.6rem; font-size: .875rem; color: var(--c-on-dark-m); }
.hero__meta span { display: inline-flex; align-items: center; gap: .45rem; }
.hero__meta svg { color: var(--c-brand-2); flex: none; }
.hero__art { position: relative; animation: hrc-in 1s var(--ease) .3s backwards; }
.hero__art img, .hero__art svg { border-radius: var(--radius-lg); animation: hrc-float 7s ease-in-out infinite; }
.hero--compact { padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.hero--compact .hero__inner { grid-template-columns: 1fr; }
.hero--compact h1 { max-width: 20ch; }

/* -------------------------------------------------- 6c. Cards ------------ */
.card {
  position: relative; background: var(--c-card); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: clamp(1.4rem, 2.6vw, 2rem);
  box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform .38s var(--ease), box-shadow .38s var(--ease), border-color .38s var(--ease);
}
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--c-brand) 12%, transparent), transparent 62%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--c-brand) 32%, var(--c-line)); }
.card:hover::before { opacity: 1; }
.card h3 { margin-bottom: .5rem; }
.card p:last-child { margin-bottom: 0; }
.card__icon {
  width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 1.1rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c-brand) 16%, transparent), color-mix(in srgb, var(--c-brand-2) 16%, transparent));
  color: var(--c-brand); transition: transform .4s var(--ease-spring);
}
.card:hover .card__icon { transform: scale(1.1) rotate(-6deg); }
.card__link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .93rem; margin-top: .9rem; }
.card__link svg { transition: transform .3s var(--ease); }
.card:hover .card__link svg { transform: translateX(4px); }
.card--link { display: flex; flex-direction: column; color: inherit; }
.card--link:hover { color: inherit; }
.card--dark { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.1); color: var(--c-on-dark-m); backdrop-filter: blur(10px); }
.card--dark:hover { border-color: rgba(255,255,255,.26); background: rgba(255,255,255,.07); }
.card__media { margin: -1.4rem -1.4rem 1.3rem; background: var(--c-bg-soft); border-bottom: 1px solid var(--c-line-soft); }
.card__media img { width: 100%; }
.card__num { font-family: var(--font-sans); font-size: .82rem; font-weight: 800; color: var(--c-brand); letter-spacing: .1em; }

.stat { text-align: center; padding: 1.5rem 1rem; }
.stat__num { font-family: var(--font-display); font-size: clamp(2.1rem, 4.6vw, 3.05rem); font-weight: 800; line-height: 1.02; letter-spacing: -.02em; background: linear-gradient(120deg, var(--c-brand), var(--c-brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat__label { font-size: .9rem; color: var(--c-muted); margin-top: .6rem; }
.section--dark .stat__label { color: var(--c-on-dark-m); }
.section--dark .stat__num { background: linear-gradient(120deg, #fff, var(--c-brand-2)); -webkit-background-clip: text; background-clip: text; }

.badge { display: inline-flex; align-items: center; gap: .35rem; padding: .26rem .7rem; border-radius: 999px; font-size: .755rem; font-weight: 700; letter-spacing: .02em; line-height: 1.5; }
.badge--ok    { background: color-mix(in srgb, var(--c-ok) 13%, transparent);     color: var(--c-ok); }
.badge--warn  { background: color-mix(in srgb, var(--c-warn) 15%, transparent);   color: var(--c-warn); }
.badge--no    { background: color-mix(in srgb, var(--c-danger) 12%, transparent); color: var(--c-danger); }
.badge--brand { background: color-mix(in srgb, var(--c-brand) 12%, transparent);  color: var(--c-brand); }
.badge--house { background: linear-gradient(100deg, var(--c-accent), #ffb35c); color: #3a1c00; }

.disclosure {
  display: flex; gap: .7rem; align-items: flex-start;
  background: var(--c-bg-soft); border: 1px dashed var(--c-line);
  border-radius: var(--radius); padding: .85rem 1.1rem; margin-bottom: 1.6rem;
  font-size: .855rem; color: var(--c-muted); line-height: 1.55;
}
.disclosure svg { flex: none; margin-top: .2rem; color: var(--c-accent); }
.disclosure p { margin: 0; }

.checklist { list-style: none; padding: 0; }
.checklist li { position: relative; padding-left: 2rem; margin-bottom: .8rem; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 20px; height: 20px; border-radius: 50%;
  background: color-mix(in srgb, var(--c-brand-2) 16%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300c2a3' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 13px; background-repeat: no-repeat; background-position: center;
}
.section--dark .checklist li::before { background-color: rgba(0,194,163,.2); }

.steps { list-style: none; padding: 0; counter-reset: s; }
.steps > li { counter-increment: s; position: relative; padding-left: 3.4rem; padding-bottom: 1.9rem; margin: 0; }
.steps > li::before {
  content: counter(s); position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 13px;
  display: grid; place-items: center; font-family: var(--font-sans); font-weight: 800; font-size: .95rem;
  color: #fff; background: linear-gradient(135deg, var(--c-brand), var(--c-brand-2)); box-shadow: var(--shadow-brand);
}
.steps > li::after { content: ""; position: absolute; left: 19px; top: 46px; bottom: 6px; width: 2px; background: linear-gradient(var(--c-line), transparent); }
.steps > li:last-child { padding-bottom: 0; }
.steps > li:last-child::after { display: none; }
.steps h3 { margin-bottom: .35rem; font-size: 1.12rem; }

/* Accordion / FAQ */
.faq { border-top: 1px solid var(--c-line); }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  background: none; border: 0; padding: 1.25rem .25rem; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem, 1.7vw, 1.12rem);
  color: var(--c-ink); line-height: 1.4; transition: color .2s var(--ease);
}
.faq__q:hover { color: var(--c-brand); }
.faq__icon { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--c-bg-soft); position: relative; margin-top: .1rem; transition: background .25s var(--ease), transform .35s var(--ease); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: var(--c-brand); border-radius: 2px; transition: transform .35s var(--ease), opacity .25s var(--ease); }
.faq__icon::before { width: 11px; height: 2px; }
.faq__icon::after  { width: 2px; height: 11px; }
.faq__q[aria-expanded="true"] .faq__icon { background: var(--c-brand); transform: rotate(180deg); }
.faq__q[aria-expanded="true"] .faq__icon::before { background: #fff; }
.faq__q[aria-expanded="true"] .faq__icon::after { opacity: 0; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s var(--ease); }
.faq__a > div { overflow: hidden; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a p:first-child { padding-top: .1rem; }
.faq__a p:last-child { padding-bottom: 1.35rem; margin-bottom: 0; }

/* Marquee */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; gap: 3rem; animation: hrc-marquee 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-sans); font-weight: 700; font-size: .95rem; color: var(--c-muted); white-space: nowrap; }

/* Breadcrumbs */
.crumbs { font-size: .82rem; color: var(--c-muted); margin-bottom: 1.1rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; }
.crumbs li { margin: 0; display: inline-flex; align-items: center; gap: .4rem; }
.crumbs li + li::before { content: "/"; opacity: .4; }
.crumbs a { color: inherit; }
.crumbs a:hover { color: var(--c-brand); }
.hero .crumbs, .hero .crumbs a { color: var(--c-on-dark-m); }
.hero .crumbs a:hover { color: #fff; }

/* Article */
.prose { font-size: 1.03rem; }
.prose h2 { margin-top: 2.6rem; scroll-margin-top: calc(var(--header-h) + 24px); }
.prose h3 { margin-top: 2rem; scroll-margin-top: calc(var(--header-h) + 24px); }
.prose > p:first-of-type { font-size: 1.1rem; color: var(--c-ink); }
.prose img { border-radius: var(--radius); margin: 2rem 0; box-shadow: var(--shadow); }
.prose figure { margin: 2rem 0; }
.prose figcaption { font-size: .84rem; color: var(--c-muted); text-align: center; margin-top: .7rem; }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; text-decoration-color: color-mix(in srgb, var(--c-brand) 40%, transparent); }
.prose a:hover { text-decoration-color: currentColor; }

.article-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.sidebar { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 1.25rem; }
.toc { font-size: .9rem; }
.toc__title { font-family: var(--font-sans); font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--c-muted); margin-bottom: .8rem; }
.toc ol { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--c-line); }
.toc li { margin: 0; }
.toc a { display: block; padding: .38rem 0 .38rem .9rem; margin-left: -2px; border-left: 2px solid transparent; color: var(--c-body); line-height: 1.4; }
.toc a:hover { color: var(--c-brand); }
.toc a.is-active { color: var(--c-brand); border-left-color: var(--c-brand); font-weight: 600; }

.byline { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; font-size: .855rem; color: var(--c-muted); padding: .9rem 0; border-block: 1px solid var(--c-line); margin-bottom: 2rem; }
.byline strong { color: var(--c-ink); font-weight: 600; }
.byline__dot { opacity: .4; }

.cta-band { position: relative; overflow: hidden; border-radius: var(--radius-xl); padding: clamp(2rem, 5vw, 3.5rem); background: linear-gradient(120deg, var(--c-dark), #12235c 55%, #0b3f57); color: var(--c-on-dark-m); text-align: center; isolation: isolate; }
.cta-band::before { content: ""; position: absolute; width: 60%; aspect-ratio: 1; right: -14%; top: -50%; border-radius: 50%; background: radial-gradient(circle, rgba(0,194,163,.4), transparent 66%); filter: blur(46px); z-index: -1; animation: hrc-drift 24s ease-in-out infinite; }
.cta-band h2 { color: #fff; max-width: 20ch; margin-inline: auto; }
.cta-band p { max-width: 54ch; margin-inline: auto; }

/* Summary box (provider profile) */
.summary-box { display: grid; gap: 1.5rem; grid-template-columns: 1fr auto; align-items: center; background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: clamp(1.35rem, 3vw, 2rem); box-shadow: var(--shadow); }
.summary-box__grid { display: grid; gap: 1rem 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.spec { }
.spec__k { display: block; font-size: .73rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--c-muted); margin-bottom: .22rem; }
.spec__v { font-family: var(--font-display); font-weight: 600; color: var(--c-ink); font-size: 1rem; line-height: 1.35; }

.callout { border-radius: var(--radius); padding: 1.15rem 1.35rem; border: 1px solid var(--c-line); background: var(--c-bg-soft); margin: 1.8rem 0; }
.callout h3, .callout h4 { margin-top: 0; margin-bottom: .4rem; font-size: 1.02rem; }
.callout p:last-child { margin-bottom: 0; }
.callout--good { border-color: color-mix(in srgb, var(--c-ok) 32%, transparent); background: color-mix(in srgb, var(--c-ok) 7%, transparent); }
.callout--watch { border-color: color-mix(in srgb, var(--c-warn) 34%, transparent); background: color-mix(in srgb, var(--c-warn) 8%, transparent); }

/* -------------------------------------------------- 7. Table ------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); border: 1px solid var(--c-line); background: var(--c-card); box-shadow: var(--shadow-sm); }
.table-scroll::-webkit-scrollbar { height: 9px; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: 9px; }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 940px; font-size: .93rem; }
.cmp-table caption { caption-side: top; text-align: left; padding: 1rem 1.2rem 0; font-size: .84rem; color: var(--c-muted); }
.cmp-table th, .cmp-table td { padding: 1.05rem 1.1rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--c-line-soft); }
.cmp-table thead th { position: sticky; top: 0; z-index: 2; background: var(--c-bg-soft); font-family: var(--font-sans); font-size: .755rem; text-transform: uppercase; letter-spacing: .09em; color: var(--c-muted); font-weight: 700; white-space: nowrap; }
.cmp-table tbody tr { transition: background .22s var(--ease); }
.cmp-table tbody tr:hover { background: color-mix(in srgb, var(--c-brand) 4%, transparent); }
.cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-table .prov { display: flex; align-items: center; gap: .75rem; min-width: 210px; }
.cmp-table .prov img { width: 40px; height: 40px; border-radius: 11px; flex: none; }
.cmp-table .prov b { display: block; font-family: var(--font-display); color: var(--c-ink); font-size: .98rem; line-height: 1.25; }
.cmp-table .prov small { color: var(--c-muted); font-size: .78rem; }
.cmp-table td:last-child { text-align: right; white-space: nowrap; }

.table-hint { font-size: .8rem; color: var(--c-muted); margin-top: .7rem; display: flex; align-items: center; gap: .4rem; }
/* Only useful in the band where the table still scrolls sideways. Below 860px
   it becomes stacked cards, so there is nothing to swipe. */
@media (min-width: 940px), (max-width: 860px) { .table-hint { display: none; } }

/* --- Comparison table on a phone -------------------------------------------
   Eight columns inside a 940px minimum leaves ~117px each, which turns a
   "best for" line into an eight-line ribbon and forces a sideways swipe that is
   awkward on touch. Below 860px the table stops being a grid and each provider
   becomes a stacked card, with the column heading rendered from data-label.
   Explicit role attributes are on the markup so changing `display` does not
   strip the table semantics for screen readers. */
@media (max-width: 860px) {
  .table-scroll { overflow-x: visible; border: 0; background: none; box-shadow: none; border-radius: 0; }
  .cmp-table { min-width: 0; display: block; font-size: 1rem; }
  /* display:block is required here. A `table-caption` box with no table context
     gets wrapped in an anonymous table and shrinks to min-content — which wraps
     the caption to one word per line. */
  .cmp-table caption { display: block; width: 100%; padding: 0 0 1rem; }
  .cmp-table thead { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cmp-table tbody { display: block; }
  .cmp-table tbody tr {
    display: block; margin-bottom: 1rem; padding: 1.15rem;
    background: var(--c-card); border: 1px solid var(--c-line);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  }
  .cmp-table tbody tr:hover { background: var(--c-card); }
  .cmp-table tbody tr:last-child { margin-bottom: 0; }
  .cmp-table th, .cmp-table td { display: block; padding: 0; border: 0; text-align: left; }
  /* Provider name row: full width, sits above the spec list. */
  .cmp-table tbody th[scope="row"] { margin-bottom: .9rem; padding-bottom: .9rem; border-bottom: 1px solid var(--c-line-soft); }
  .cmp-table .prov { min-width: 0; }
  /* Each remaining cell becomes a label / value row. */
  .cmp-table td[data-label] {
    display: flex; gap: 1rem; justify-content: space-between; align-items: baseline;
    padding: .5rem 0; border-bottom: 1px solid var(--c-line-soft);
  }
  .cmp-table td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 42%;
    font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--c-muted); line-height: 1.5;
  }
  .cmp-table td[data-label] > * { text-align: right; }
  .cmp-table td.cmp-table__cta { padding-top: 1rem; border-bottom: 0; text-align: left; white-space: normal; }
  .cmp-table td.cmp-table__cta .btn { display: flex; width: 100%; }
}

/* -------------------------------------------------- 7b. Forms ------------ */
.form-shell { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: clamp(1.8rem, 4vw, 3rem); align-items: start; }
.form-card { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3.4vw, 2.4rem); box-shadow: var(--shadow); }
.fieldset { border: 0; padding: 0; margin: 0 0 2.2rem; }
.fieldset:last-of-type { margin-bottom: 1.4rem; }
.fieldset__head { display: flex; align-items: center; gap: .75rem; margin-bottom: .35rem; }
.fieldset__num { width: 28px; height: 28px; flex: none; border-radius: 9px; display: grid; place-items: center; font-size: .8rem; font-weight: 800; font-family: var(--font-sans); color: #fff; background: linear-gradient(135deg, var(--c-brand), var(--c-brand-2)); }
.fieldset legend { padding: 0; }
.fieldset__title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--c-ink); }
.fieldset__hint { font-size: .88rem; color: var(--c-muted); margin: 0 0 1.3rem; padding-left: 2.55rem; }
.field { margin-bottom: 1.15rem; }
.field label, .field .label { display: block; font-size: .875rem; font-weight: 600; color: var(--c-ink); margin-bottom: .42rem; }
.field .req { color: var(--c-danger); }
.field small.help { display: block; font-size: .79rem; color: var(--c-muted); margin-top: .35rem; }
.field-row { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number], select, textarea {
  width: 100%; padding: .78rem .95rem; font: inherit; font-size: .95rem; color: var(--c-ink);
  background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
  appearance: none;
}
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2377839c' stroke-width='2.4' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; background-size: 16px; padding-right: 2.4rem; }
textarea { min-height: 118px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--c-brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-brand) 15%, transparent); }
input::placeholder, textarea::placeholder { color: var(--c-muted); opacity: .75; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--c-danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-danger) 12%, transparent); }
.field__err { display: block; color: var(--c-danger); font-size: .8rem; margin-top: .35rem; font-weight: 600; }

.choice-grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr)); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice span {
  display: flex; align-items: center; gap: .55rem; padding: .72rem .9rem; cursor: pointer;
  border: 1px solid var(--c-line); border-radius: var(--radius-sm); background: var(--c-bg);
  font-size: .9rem; font-weight: 500; color: var(--c-body);
  transition: all .22s var(--ease);
}
.choice span::before { content: ""; width: 17px; height: 17px; flex: none; border: 2px solid var(--c-line); border-radius: 5px; transition: all .2s var(--ease); }
.choice input[type=radio] + span::before { border-radius: 50%; }
.choice:hover span { border-color: var(--c-brand); transform: translateY(-1px); }
.choice input:checked + span { border-color: var(--c-brand); background: color-mix(in srgb, var(--c-brand) 7%, transparent); color: var(--c-ink); }
.choice input:checked + span::before { background: var(--c-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat; border-color: var(--c-brand); }
.choice input:focus-visible + span { outline: 3px solid var(--c-brand); outline-offset: 2px; }

.consent { display: flex; gap: .75rem; align-items: flex-start; background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: var(--radius); padding: 1rem 1.15rem; font-size: .845rem; line-height: 1.6; color: var(--c-body); }
.consent input { margin-top: .25rem; width: 18px; height: 18px; flex: none; accent-color: var(--c-brand); }
.hp-field { position: absolute !important; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form-progress { height: 5px; border-radius: 5px; background: var(--c-bg-sunken); overflow: hidden; margin-bottom: 1.8rem; }
.form-progress__bar { height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, var(--c-brand), var(--c-brand-2)); transition: width .45s var(--ease); }

.notice { border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1.6rem; font-size: .92rem; border: 1px solid; }
.notice--error { color: var(--c-danger); border-color: color-mix(in srgb, var(--c-danger) 35%, transparent); background: color-mix(in srgb, var(--c-danger) 8%, transparent); }
.notice--ok { color: var(--c-ok); border-color: color-mix(in srgb, var(--c-ok) 35%, transparent); background: color-mix(in srgb, var(--c-ok) 8%, transparent); }

.trust-list { list-style: none; padding: 0; margin: 0; font-size: .875rem; }
.trust-list li { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .85rem; }
.trust-list svg { flex: none; margin-top: .2rem; color: var(--c-brand-2); }

/* Success screen */
.success-mark { width: 84px; height: 84px; margin: 0 auto 1.5rem; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c-ok) 14%, transparent); }
.success-mark svg { color: var(--c-ok); }
.success-mark svg path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: hrc-draw .7s var(--ease) .25s forwards; }
@keyframes hrc-draw { to { stroke-dashoffset: 0 } }

/* -------------------------------------------------- 8. Footer ------------ */
.site-footer { background: var(--c-dark); color: var(--c-on-dark-m); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; font-size: .93rem; }
.site-footer a { color: var(--c-on-dark-m); }
.site-footer a:hover { color: #fff; }
.site-footer h3 { font-family: var(--font-sans); color: #fff; font-size: .79rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 1.1rem; font-weight: 700; }
.footer-grid { display: grid; gap: 2.4rem; grid-template-columns: 1.6fr repeat(3, 1fr); }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: .6rem; }
.footer-grid li a { position: relative; }
.footer-grid li a::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .3s var(--ease); }
.footer-grid li a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.site-footer .brand { color: #fff; margin-bottom: .9rem; }
.footer-legal { margin-top: 2.8rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .8rem; color: #7f8fb3; }
.footer-legal p { max-width: 82ch; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between; margin-top: 1.2rem; }

/* 52px, not 46: this floats over footer body text and links, and anything under
   ~48px means a slightly-off thumb lands on whatever is behind it — which is why
   tapping it was opening a footer link instead of scrolling up.
   z-index sits above the header so nothing can ever cover it, and
   touch-action: manipulation drops the 300ms tap delay. */
.to-top {
  position: fixed; right: 20px; bottom: 20px;
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-brand); color: #fff; border: 0; cursor: pointer;
  box-shadow: var(--shadow-brand);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .32s var(--ease), transform .32s var(--ease), visibility .32s;
  z-index: 950;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { transform: translateY(-3px) scale(1.06); }
.to-top:active { transform: scale(.92); }
/* The icon must never be the hit target — the listener is on the button. */
.to-top svg { pointer-events: none; }

/* Utilities */
.mt-0 { margin-top: 0 } .mb-0 { margin-bottom: 0 }
.mt-1 { margin-top: 1rem } .mt-2 { margin-top: 2rem } .mt-3 { margin-top: 3rem }
.mb-1 { margin-bottom: 1rem } .mb-2 { margin-bottom: 2rem }
.muted { color: var(--c-muted); font-size: .875rem; }
.tag-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .34rem .8rem; border-radius: 999px; border: 1px solid var(--c-line); background: var(--c-bg); font-size: .81rem; font-weight: 500; color: var(--c-body); transition: all .22s var(--ease); }
a.chip:hover { border-color: var(--c-brand); color: var(--c-brand); transform: translateY(-2px); }
.chip--dark { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: var(--c-on-dark); }
a.chip--dark:hover { background: rgba(255,255,255,.14); color: #fff; }

.pagination { display: flex; gap: .4rem; justify-content: center; margin-top: 3rem; flex-wrap: wrap; }
.pagination .page-numbers { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 .6rem; border-radius: 11px; border: 1px solid var(--c-line); color: var(--c-body); font-weight: 600; font-size: .9rem; }
.pagination .page-numbers:hover, .pagination .current { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }

/* -------------------------------------------------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__art { max-width: 560px; margin-inline: auto; order: -1; }
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .form-shell { grid-template-columns: minmax(0, 1fr); }
  .summary-box { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  :root { --header-h: 64px; }
  .nav-toggle { display: flex; }
  /* .nav goes position:fixed below, which takes it out of the header's flex
     flow — so its margin-left:auto stops pushing anything. The tools have to
     carry the auto margin here or they bunch up against the logo. */
  .header-tools { margin-left: auto; }
  /* Absolute, not fixed. The header's backdrop-filter makes it the containing
     block for fixed descendants, so `inset: var(--header-h) 0 0` resolved
     against the 64px header and collapsed the drawer to zero height. Anchoring
     to the header with top:100% and an explicit viewport height is correct
     either way — the header is sticky at the top while the drawer is open. */
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    margin: 0; background: var(--c-bg);
    padding: 1.2rem var(--gutter) 2.5rem;
    overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
    border-top: 1px solid var(--c-line);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav ul { flex-direction: column; align-items: stretch; gap: .1rem; }
  /* The row needs real horizontal padding or the hover / current-page background
     sits flush against the text. Pull the list out by the same amount so the
     text still lines up with the drawer gutter and the dividers run full-bleed. */
  .nav > ul { margin-inline: -.75rem; }
  .nav a:not(.btn) { padding: .8rem .75rem; font-size: 1.02rem; border-radius: 0; border-bottom: 1px solid var(--c-line-soft); }
  /* Parent row is link + toggle button side by side; the submenu spans both and
     collapses beneath them. */
  /* stretch, not center: the link is ~53px tall (text + .8rem padding) while the
     button is 44px, so centring left the button's bottom border floating above
     the link's and the row's underline broke into two offset segments.
     Stretching makes both borders land on the same line. */
  .nav .menu-item-has-children { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; }
  .nav .menu-item-has-children > a { grid-column: 1; grid-row: 1; }
  /* The decorative arrow is replaced by the real button injected in theme.js. */
  .nav .menu-item-has-children > a::after { content: none; }
  .nav .submenu-toggle {
    grid-column: 2; grid-row: 1;
    width: 44px; min-height: 44px; height: auto; display: grid; place-items: center;
    background: none; border: 0; border-bottom: 1px solid var(--c-line-soft);
    color: var(--c-muted); cursor: pointer; padding: 0;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
  .nav .submenu-toggle svg { transition: transform .3s var(--ease); }
  .nav .submenu-toggle[aria-expanded="true"] { color: var(--c-brand); }
  .nav .submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

  .nav .sub-menu {
    grid-column: 1 / -1;
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-radius: 0; background: none;
    padding: 0 0 0 .9rem;
    max-height: 0; overflow: hidden;
    transition: max-height .35s var(--ease), padding-bottom .35s var(--ease);
  }
  .nav .sub-menu.is-open { max-height: 60rem; padding-bottom: .5rem; }
  .nav .sub-menu a { border-bottom: 0; padding: .5rem .75rem; font-size: .94rem; color: var(--c-muted); }
  /* body only. body's overflow propagates to the viewport (html is visible), so
     this locks the page without making html a scroll container — which would
     kill the sticky header. */
  body.nav-open { overflow: hidden; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  /* On a phone the measure is short enough that long words ("underwriting",
     "compliance", "expectations") wrap early and leave a 60–90px ragged gap on
     the right, while the left stays flush — which reads as uneven margins.
     Hyphenating evens the right edge out. Only on small screens: at desktop
     measure the lines are long enough that hyphens would just be noise. */
  p, li, .lede, .hero__sub, dd { hyphens: auto; -webkit-hyphens: auto; }
  p, li { text-wrap: pretty; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn--sm { width: auto; }
  .cmp-table td:last-child { text-align: left; }
  .steps > li { padding-left: 2.9rem; }
  .card__media { margin-inline: -1.4rem; }
}
@media print {
  .site-header, .site-footer, .to-top, .scroll-progress, .hero__bg, .btn { display: none !important; }
  body { color: #000; background: #fff; font-size: 12pt; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* -------------------------------------------------- 9. Touch input -------
   Everything above is written for a pointer. A touch device reports
   `hover: none`, where :hover either never fires or latches after a tap and
   stays applied until you tap elsewhere. Neutralise the decorative hover
   states there and let :active carry the feedback instead. */
@media (hover: none) {
  .btn:hover                 { transform: none; }
  .btn--primary:hover::after { animation: none; }
  .card:hover                { transform: none; box-shadow: var(--shadow-sm); border-color: var(--c-line); }
  .card:hover::before        { opacity: 0; }
  .card:hover .card__icon    { transform: none; }
  .theme-toggle:hover,
  .nav-toggle:hover          { transform: none; color: var(--c-body); border-color: var(--c-line); }
  a.chip:hover               { transform: none; }
  .brand:hover .brand__mark  { transform: none; }
  .btn:hover svg             { transform: none; }
  .to-top:hover              { transform: none; }
  .faq__q:hover              { color: var(--c-ink); }
  .card:hover .card__link svg{ transform: none; }
  .footer-grid li a:hover::after { transform: scaleX(0); }
  .cmp-table tbody tr:hover  { background: var(--c-card); }

  /* Anything tappable gets a comfortable target and no 300ms delay. */
  a, button, [role="button"], input[type="submit"], label.choice { touch-action: manipulation; }
  .btn, .theme-toggle, .nav-toggle, .faq__q { min-height: 44px; }

  /* Press feedback, since these elements can no longer rely on hover. */
  .card:active               { transform: scale(.995); }
  a.chip:active              { transform: scale(.97); }
  .theme-toggle:active,
  .nav-toggle:active         { transform: scale(.94); }
}

/* The submenu toggle is injected on every viewport but only belongs to the
   mobile drawer — the desktop nav opens its dropdowns on hover/focus. */
.submenu-toggle { display: none; }