/* ==========================================================================
   CREDENTIAL ROOF - DESIGN SYSTEM
   Blue and white, nothing else carries colour. The blue is Kentucky blue
   #0033A0. Pattern from ui-ux-pro-max: Funnel (3 step conversion),
   Minimalism and Swiss style. Type: Lexend for headings, Source Sans 3 for
   body (the Corporate Trust pairing).

   Every flat pair is measured with contrast.py. Text over photographs is
   measured by check_photo_contrast.py against the shipped files.
   ========================================================================== */

:root {
  --clr-blue:        #0033A0;   /* the brand. white on it 10.60:1          */
  --clr-blue-hover:  #002A85;
  --clr-navy:        #0B2A6B;   /* deep ground. white on it 13.48:1        */
  --clr-sky:         #C9D9FF;   /* accent on dark. 7.50:1 on blue           */

  --clr-bg:          #FFFFFF;
  --clr-tint:        #EEF3FC;   /* palest blue surface                      */
  --clr-tint-2:      #E6EEFA;
  --clr-fg:          #1D2939;   /* ink. 14.70:1 on white                    */
  --clr-fg-muted:    #3B4A66;   /* 7.63:1 on the tint                       */
  --clr-fg-invert:   #FFFFFF;
  --clr-fg-invert-muted: #C9D9FF;

  --clr-rule:        #D5DFF2;
  --clr-border:      #6B7A9C;   /* 3:1+ non text boundary                   */

  --ff-head: 'Lexend', 'Segoe UI', system-ui, sans-serif;
  --ff-body: 'Source Sans 3', 'Source Sans Pro', 'Segoe UI', system-ui, sans-serif;

  --fs-xs: 0.8125rem; --fs-sm: 0.9375rem; --fs-base: 1.0625rem; --fs-md: 1.2rem;
  --fs-lg: 1.5rem; --fs-xl: 2rem;

  --sp-1: .5rem; --sp-2: .75rem; --sp-3: 1rem; --sp-4: 1.5rem; --sp-5: 2rem;
  --sp-6: 3rem; --sp-7: 4.5rem; --sp-8: clamp(5.5rem, 9vw, 8rem);

  --radius: 8px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(11,42,107,.06), 0 2px 6px rgba(11,42,107,.06);
  --shadow-md: 0 2px 4px rgba(11,42,107,.06), 0 12px 28px rgba(11,42,107,.10);
  --shadow-lg: 0 4px 10px rgba(11,42,107,.08), 0 26px 60px rgba(11,42,107,.18);

  --ease: cubic-bezier(.4,0,.2,1);
  --t-fast: 180ms var(--ease);
  --t-base: 260ms var(--ease);

  --measure: 64ch;
  --wrap: 1180px;
  --wrap-narrow: 760px;
}

/* ==========================================================================
   RESET AND BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--ff-body); font-size: var(--fs-base); line-height: 1.65;
  color: var(--clr-fg); background: var(--clr-bg); -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--ff-head); font-weight: 600; line-height: 1.12; color: inherit; letter-spacing: -.01em; }
h1 { font-size: clamp(2.5rem, 5.8vw, 4.4rem); font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); letter-spacing: -.015em; }
h3 { font-size: var(--fs-md); }
p { max-width: var(--measure); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }

a { color: var(--clr-blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--clr-navy); }
.on-dark a:not(.btn) { color: var(--clr-sky); }
.on-dark a:not(.btn):hover { color: #fff; }

:focus-visible { outline: 3px solid var(--clr-blue); outline-offset: 3px; border-radius: 2px; }
.on-dark :focus-visible { outline-color: var(--clr-sky); }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--clr-blue); color: #fff; padding: var(--sp-3) var(--sp-4); font-weight: 600; }
.skip-link:focus { left: 0; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }
.center { text-align: center; }
.center p { margin-inline: auto; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.stack > * + * { margin-top: var(--sp-4); }

/* ==========================================================================
   BUTTONS. Square shouldered. Fitts: 52px minimum.
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 52px; padding: 0 var(--sp-5);
  font-family: var(--ff-head); font-size: var(--fs-sm); font-weight: 600;
  border: 2px solid transparent; border-radius: var(--radius);
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(180deg, #0B44C2, var(--clr-blue)); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--clr-blue-hover); color: #fff; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.on-dark .btn-primary { background: #fff; color: var(--clr-blue); }
.on-dark .btn-primary:hover { background: var(--clr-tint); color: var(--clr-navy); }
.btn-ghost { background: transparent; color: var(--clr-blue); border-color: var(--clr-blue); }
.btn-ghost:hover { background: var(--clr-tint); color: var(--clr-navy); border-color: var(--clr-navy); }
.on-dark .btn-ghost { color: #fff; border-color: rgba(255,255,255,.7); }
.on-dark .btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.btn-white { background: #fff; color: var(--clr-blue); }
.btn-white:hover { background: var(--clr-tint); color: var(--clr-navy); }
.btn-sm { min-height: 46px; padding: 0 var(--sp-4); font-size: var(--fs-xs); }

/* ==========================================================================
   HEADER AND NAV. White, the blue mark, a blue CTA top right.
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--clr-rule); transition: box-shadow .22s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 8px 28px rgba(11,42,107,.12); }
.site-header .wrap { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-2) 0; }

.wordmark { display: inline-flex; align-items: center; gap: .6rem; color: var(--clr-blue); text-decoration: none; margin-right: auto; line-height: 1; }
.wordmark .mark { width: 44px; height: 44px; flex: 0 0 44px; display: block; }
.wm-text { display: flex; flex-direction: column; font-family: var(--ff-head); }
.wm-a { font-size: 1.15rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--clr-fg); }
.wm-b { font-size: .8rem; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: var(--clr-blue); margin-top: .1rem; }
@media (max-width: 460px) { .wordmark .mark { width: 36px; height: 36px; flex-basis: 36px; } .wm-a { font-size: .95rem; } }

.nav { display: flex; align-items: center; gap: var(--sp-4); }
.nav ul { display: contents; }
/* :not(.btn) matters: a bare .nav a would outrank .btn-primary and repaint the CTA. */
.nav a:not(.btn) { color: var(--clr-fg); text-decoration: none; font-family: var(--ff-head); font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; }
.nav a:not(.btn):hover, .nav a[aria-current="page"] { color: var(--clr-blue); }
.site-header .btn { white-space: nowrap; }
.nav-phone { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; font-family: var(--ff-head); font-size: var(--fs-xs); font-weight: 600; color: var(--clr-fg); }
.icon-sm { width: 18px; height: 18px; flex: 0 0 18px; }
.icon { width: 28px; height: 28px; }

.nav-toggle { display: none; background: none; border: 1px solid var(--clr-border); border-radius: var(--radius); padding: .55rem .75rem; cursor: pointer; color: var(--clr-fg); min-height: 46px; }
.nav-toggle svg { display: block; }
@media (max-width: 1180px) {
  .nav-toggle { display: inline-flex; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: var(--sp-3);
    background: #fff; border-bottom: 1px solid var(--clr-rule); padding: var(--sp-4) 1.25rem var(--sp-5); box-shadow: var(--shadow-lg); }
  .nav ul { display: grid; gap: var(--sp-3); }
  .nav:not(.is-open) { display: none; }
  .nav .btn { width: 100%; }
  .nav-phone { justify-content: center; padding: var(--sp-2) 0; }
}

/* ==========================================================================
   SECTIONS. Every body section carries a photograph behind an effect.
   ========================================================================== */
.section { position: relative; padding-block: var(--sp-8); overflow: hidden; isolation: isolate; }
.section > .wrap, .section > .wrap-narrow { position: relative; z-index: 2; }
/* Crossfade: every section after the first starts 140px inside the one
   before it, and the whole incoming section is masked to transparent across
   that band, so it dissolves in over the previous one and no edge exists.
   Type never sits in the band: the incoming section's padding-top absorbs
   the overlap, and any section that has a successor carries 140px of extra
   padding-bottom so its own last line stays clear of the band. */
.section + .section:not(.band) { margin-top: -140px; padding-top: calc(var(--sp-8) + 140px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 140px); mask-image: linear-gradient(180deg, transparent 0, #000 140px); }
.section:has(+ .section:not(.band)) { padding-bottom: calc(var(--sp-8) + 140px); }
.band { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%); }
.section:has(+ .band) { padding-bottom: calc(var(--sp-8) + 36px); }
.band + .section { margin-top: -36px; padding-top: calc(var(--sp-8) + 36px); }
.hero { position: sticky; top: 0; z-index: 0; }
.section:not(.hero) { z-index: 1; }
.section-dark { background: var(--clr-navy); color: var(--clr-fg-invert); }
.on-dark { color: var(--clr-fg-invert); }
.on-dark .lead, .on-dark .muted { color: var(--clr-fg-invert-muted); }
.bg { position: absolute; inset: -6% 0; z-index: 0; background-size: cover; background-position: center; }

.lead { font-size: var(--fs-md); color: var(--clr-fg-muted); max-width: 56ch; }
.eyebrow { font-family: var(--ff-head); font-weight: 600; font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--clr-blue); margin-bottom: var(--sp-3); display: flex; align-items: center; gap: .6rem; }
/* No rule mark before eyebrows: the owner reads it as a dash. House rule. */
.on-dark .eyebrow { color: var(--clr-sky); }
.section-head.center .eyebrow { justify-content: center; }
.section-head { margin-bottom: var(--sp-6); }
.section-head .lead { margin-top: var(--sp-3); }
.cta-row { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ==========================================================================
   NINE EFFECTS, written for this site. No two on the same page. Alpha values
   set by check_photo_contrast.py, not by eye.
   ========================================================================== */

/* 1. eave: deep blue shade from the left, the photograph clearing to the right */
.fx-eave::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(11,42,107,.96) 0%, rgba(11,42,107,.90) 58%, rgba(11,42,107,.55) 100%),
              radial-gradient(60% 80% at 100% 100%, rgba(0,51,160,.35), transparent 70%); }
.fx-eave .bg { background-position: 72% center; }

/* 2. chalkline: pale ground with fine diagonal chalk lines */
.fx-chalkline::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background-color: rgba(255,255,255,.93);
  background-image: repeating-linear-gradient(-32deg, transparent 0 58px, rgba(0,51,160,.10) 58px 59px); }

/* 3. stormfront: navy with a darker band rolling in from the top */
.fx-stormfront::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(3,16,48,.55) 0%, transparent 34%), rgba(11,42,107,.91); }

/* 4. underlayment: white with a faint shingle course pattern */
.fx-underlayment::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background-color: rgba(255,255,255,.94);
  background-image: repeating-linear-gradient(180deg, transparent 0 46px, rgba(0,51,160,.07) 46px 47px),
                    repeating-linear-gradient(90deg, transparent 0 92px, rgba(0,51,160,.04) 92px 93px); }

/* 5. flashing: brand blue with a bright hairline sweep at the top */
.fx-flashing::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(201,217,255,.7) 0 3px, transparent 3px),
              linear-gradient(100deg, rgba(201,217,255,.14), transparent 40%), rgba(0,51,160,.94); }

/* 6. daylight: the photograph clear on the right, a white pane on the left */
.fx-daylight::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.94) 50%, rgba(255,255,255,.72) 68%, rgba(255,255,255,.30) 100%); }
.fx-daylight .bg { background-position: 85% center; }

/* 7. blueprint: the photograph drawn in blue line, pale blue paper over it */
.fx-blueprint .bg { filter: grayscale(1) contrast(1.05); }
.fx-blueprint::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(238,243,252,.96), rgba(230,238,250,.94)); mix-blend-mode: normal; }

/* 8. ridge-cap: solid brand blue with a row of faint roof peaks along the top */
.fx-ridge-cap::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(135deg, rgba(255,255,255,.10) 0 12px, transparent 12px) 0 0/48px 24px no-repeat,
              rgba(0,51,160,.97); }

/* 9. dusk: navy to blue evening gradient */
.fx-dusk::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,51,160,.90) 0%, rgba(11,42,107,.97) 100%); }

/* Breadcrumbs. Rendered from the schema node, laid over the top of the hero. */
main { position: relative; }
.crumbs { position: absolute; top: 0; left: 0; right: 0; z-index: 5; padding-top: var(--sp-3); font-family: var(--ff-head); font-size: var(--fs-xs); font-weight: 500; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; color: var(--clr-fg-invert-muted); }
.crumbs li + li::before { content: "/"; margin-right: .5rem; opacity: .6; }
.crumbs a { color: var(--clr-fg-invert-muted); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs [aria-current] span { color: #fff; }
.crumbs + .hero { padding-top: clamp(4.5rem, 12vw, 8.5rem); }
.crumbs + .hero.hero-short { padding-top: clamp(4rem, 9vw, 6rem); }

/* ==========================================================================
   HERO. The loop sits inside the photo layer so the photo is poster and
   fallback. Reduced motion never plays it (the script also never starts it).
   ========================================================================== */
.bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% center; display: block; }
@media (prefers-reduced-motion: reduce) { .bg-video { display: none; } }
.hero-grid { display: grid; grid-template-columns: minmax(0, 620px) minmax(280px, 420px); gap: var(--sp-6); align-items: center; justify-content: space-between; }
.hero-card { position: relative; display: block; justify-self: end; width: 100%; background: #fff; border-radius: var(--radius-lg); padding: .6rem; box-shadow: var(--shadow-lg); transform: rotate(-2deg); transition: transform var(--t-base), box-shadow var(--t-base); }
.hero-card:hover { transform: rotate(0deg) translateY(-3px); }
.hero-card:focus-visible { outline-color: var(--clr-sky); }
.hero-card img, .hero-card video { border-radius: 8px; width: 100%; height: auto; display: block; }
.report-loop { display: block; width: 100%; height: auto; border-radius: 8px; background: var(--clr-blue); }
.report-figure .report-still { display: none; }
@media (prefers-reduced-motion: reduce) {
  .report-loop { display: none; }
  .report-figure .report-still { display: block; border-radius: 8px; }
}
.hero-card-tag { position: absolute; left: 1rem; bottom: -0.9rem; background: var(--clr-blue); color: #fff; font-family: var(--ff-head); font-size: var(--fs-xs); font-weight: 600; padding: .45rem .8rem; border-radius: var(--radius); box-shadow: var(--shadow-md); }
@media (max-width: 1024px) { .hero-grid { grid-template-columns: 1fr; } .hero-card { display: none; } }
/* The trust bar under the hero: four plain facts on a white plate */
.trust-bar { margin-top: clamp(2.5rem, 6vw, 4.5rem); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(201,217,255,.35); border: 1px solid rgba(201,217,255,.35); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.trust-bar li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4); background: #fff; color: var(--clr-fg); }
.trust-bar .tb-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 10px; background: var(--clr-tint); color: var(--clr-blue); }
.trust-bar b { display: block; font-family: var(--ff-head); font-weight: 600; font-size: var(--fs-sm); line-height: 1.2; }
.trust-bar small { display: block; font-size: var(--fs-xs); color: var(--clr-fg-muted); margin-top: .15rem; }
@media (max-width: 1024px) { .trust-bar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .trust-bar { grid-template-columns: 1fr; } }

.report-figure { background: #fff; border: 1px solid var(--clr-rule); border-radius: var(--radius-lg); padding: var(--sp-3); box-shadow: var(--shadow-md); max-width: 1100px; margin-inline: auto; }
.report-figure img { border-radius: 8px; }
.report-figure figcaption { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--clr-fg-muted); }
.hero { padding-block: clamp(4rem, 12vw, 8.5rem) clamp(3rem, 7vw, 5rem); min-height: min(78vh, 680px); display: grid; align-items: center; align-content: center; }
.hero-short { min-height: 0; }
.hero.hero-short { min-height: 0; padding-block: clamp(3rem, 8vw, 5.5rem); }
.hero-in { max-width: 620px; }
.hero-in .sub { font-size: var(--fs-md); margin-top: var(--sp-4); color: var(--clr-fg-invert-muted); max-width: 52ch; }
.hero-in .cta-group { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.hero-in .trust { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--clr-fg-invert-muted); max-width: none; }
.hero-in .trust span { display: inline-flex; align-items: center; gap: .4rem; }
.hero-in .trust svg { color: var(--clr-sky); }

/* ==========================================================================
   CARDS AND GRIDS
   ========================================================================== */
.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px)  { .grid-3, .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 620px)  { .grid-4 { grid-template-columns: 1fr; } }

.card { background: #fff; color: var(--clr-fg); border: 1px solid var(--clr-rule); border-radius: var(--radius-lg); padding: var(--sp-5) var(--sp-5) var(--sp-6); box-shadow: var(--shadow-sm); transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base); }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #B9C9EA; }
.on-dark .card:hover { border-color: rgba(201,217,255,.55); }
.card h3 { margin-bottom: var(--sp-2); }
.card p { color: var(--clr-fg-muted); font-size: var(--fs-sm); }
.on-dark .card { background: rgba(255,255,255,.08); color: var(--clr-fg-invert); border-color: rgba(201,217,255,.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.on-dark .card p { color: var(--clr-fg-invert-muted); }
a.card { text-decoration: none; color: inherit; display: block; }
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
a.card .more { color: var(--clr-blue); font-family: var(--ff-head); font-weight: 600; font-size: var(--fs-xs); }

.vcard .vicon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius); background: var(--clr-tint); color: var(--clr-blue); margin-bottom: var(--sp-3); }

.step { position: relative; padding-top: calc(var(--sp-4) + 30px + var(--sp-3)); }
.step-n { position: absolute; top: var(--sp-4); left: var(--sp-5); font-family: var(--ff-head); font-weight: 700; font-size: var(--fs-xs); color: #fff; background: var(--clr-blue); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.plan-list .step { padding-top: calc(var(--sp-4) + 30px + var(--sp-3)); }

.ticks { display: grid; gap: .6rem; }
.ticks li { display: flex; gap: .55rem; align-items: flex-start; font-size: var(--fs-sm); }
.ticks svg { color: var(--clr-blue); margin-top: .2rem; }
.on-dark .ticks svg { color: var(--clr-sky); }

.pcard { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.pcard img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.pcard-body { padding: var(--sp-4) var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.pcard-body h2 { font-size: var(--fs-lg); }

/* Tiers. The middle one is the featured, most profitable choice. */
.tiers { align-items: stretch; }
.tier { background: rgba(255,255,255,.08); border: 1px solid rgba(201,217,255,.3); border-radius: var(--radius-lg); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.tier-featured { background: #fff; color: var(--clr-fg); border-color: #fff; box-shadow: var(--shadow-lg); transform: scale(1.02); }
.tier .audience { font-family: var(--ff-head); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--clr-sky); }
.tier-featured .audience { color: var(--clr-blue); }
.tier h3 { font-size: var(--fs-xl); }
.tier .ticks { flex: 1; }
.tier-featured .ticks svg { color: var(--clr-blue); }
.tier .btn { width: 100%; }
.tier-featured .btn-primary { background: var(--clr-blue); color: #fff; }
.tier-featured .btn-primary:hover { background: var(--clr-blue-hover); color: #fff; }
.tier .quiet-link { font-size: var(--fs-sm); text-align: center; }
/* The featured tier is a white card inside a dark section. .on-dark a:not(.btn)
   would paint its link sky on white (1.41:1, measured), so it is overridden here. */
.on-dark .tier-featured a:not(.btn) { color: var(--clr-blue); }
.on-dark .tier-featured a:not(.btn):hover { color: var(--clr-navy); }
.tiers-close { margin-top: var(--sp-5); color: var(--clr-fg-invert-muted); max-width: none; text-align: center; }
.tiers-replace { margin-top: var(--sp-3); max-width: 62ch; margin-inline: auto; }
.related { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--clr-rule); }
.related-list { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-family: var(--ff-head); font-weight: 500; font-size: var(--fs-sm); }
@media (max-width: 860px) { .tier-featured { transform: none; } }

/* Guide */
.guide-grid { align-items: start; gap: var(--sp-6); }
.side-card h3 { margin-bottom: var(--sp-3); }
.side-call { margin-top: var(--sp-4); font-family: var(--ff-head); font-weight: 600; }

/* Explanatory read more */
details.more-block { margin-top: var(--sp-4); }
details.more-block summary { cursor: pointer; font-family: var(--ff-head); font-weight: 600; color: var(--clr-blue); display: inline-flex; align-items: center; gap: .5rem; list-style: none; }
details.more-block summary::-webkit-details-marker { display: none; }
details.more-block summary::after { content: "+"; font-weight: 700; }
details.more-block[open] summary::after { content: "\2212"; }
details.more-block > *:not(summary) { margin-top: var(--sp-4); }

/* Band */
.band { padding-block: var(--sp-5); }
.band-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.band-wrap p { max-width: 60ch; font-family: var(--ff-head); font-weight: 500; font-size: var(--fs-md); }
.band-actions { display: inline-flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.band-more { font-family: var(--ff-head); font-weight: 600; font-size: var(--fs-sm); }

/* FAQ and article */
.faq h3 { margin-bottom: .4rem; }
.faq p { color: var(--clr-fg-muted); }
.article h2 { font-size: var(--fs-lg); margin-bottom: .5rem; }
.contact-grid { align-items: start; gap: var(--sp-6); }
.contact-lines { margin-top: var(--sp-5); font-family: var(--ff-head); font-weight: 600; }

/* ==========================================================================
   FORMS
   ========================================================================== */
.form-card { text-align: left; }
.on-dark .form-card { background: #fff; color: var(--clr-fg); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-lg); margin-top: var(--sp-6); }
.form { display: grid; gap: var(--sp-4); }
.form .two { display: grid; gap: var(--sp-4); grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .form .two { grid-template-columns: 1fr; } }
.field { display: grid; gap: .4rem; }
.field label { font-family: var(--ff-head); font-weight: 600; font-size: var(--fs-xs); color: var(--clr-fg); }
.field .hint { font-size: var(--fs-xs); color: var(--clr-fg-muted); }
.field input, .field select, .field textarea { font: inherit; color: var(--clr-fg); background: #fff; border: 1px solid var(--clr-border); border-radius: var(--radius); padding: .8rem .95rem; min-height: 50px; width: 100%; }
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--clr-blue); outline-offset: 1px; border-color: var(--clr-blue); }
.form-status { font-weight: 600; padding: var(--sp-2) 0; }
.form-status:empty { display: none; }
.form-status[data-state="ok"] { color: #1B5E20; }
.form-status[data-state="bad"] { color: #B3261E; }
.form-note { font-size: var(--fs-sm); color: var(--clr-fg-muted); }
.on-dark .form-card a:not(.btn) { color: var(--clr-blue); }
/* The form card is white inside a dark section, so the dark-ground button
   swap (white fill) would vanish into it. Restore the blue fill there. */
.on-dark .form-card .btn-primary { background: var(--clr-blue); color: #fff; }
.on-dark .form-card .btn-primary:hover { background: var(--clr-blue-hover); color: #fff; }
.on-dark .form-card .form-note { color: var(--clr-fg-muted); }
.on-dark .form-card .field label { color: var(--clr-fg); }

/* ==========================================================================
   FOOTER. The junk drawer.
   ========================================================================== */
.site-footer { background: var(--clr-navy); color: var(--clr-fg-invert); padding-block: var(--sp-7) var(--sp-5); }
.site-footer a { color: var(--clr-fg-invert-muted); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.3fr 1fr; gap: var(--sp-5); }
@media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h2 { font-family: var(--ff-head); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--clr-sky); margin-bottom: var(--sp-3); }
.site-footer ul { display: grid; gap: .6rem; font-size: var(--fs-sm); }
.site-footer .wordmark { color: #fff; margin: 0 0 var(--sp-3); }
.site-footer .wm-a { color: #fff; }
.site-footer .wm-b { color: var(--clr-sky); }
.site-footer .blurb { font-size: var(--fs-sm); color: var(--clr-fg-invert-muted); max-width: 36ch; }
.contact-block { margin-top: var(--sp-3); font-size: var(--fs-sm); line-height: 1.9; }
.legal { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid rgba(201,217,255,.25); font-size: var(--fs-xs); color: var(--clr-fg-invert-muted); }
.legal p { max-width: none; }

/* ==========================================================================
   MOTION. Hiding is done by ADDING .pre, revealing by REMOVING it, so nothing
   can stay stuck invisible. .pre is only applied below the fold.
   ========================================================================== */
.reveal, .hero-in > * { transition: opacity .42s var(--ease), transform .42s var(--ease); }
.js .reveal.pre, .js .hero-in.pre > * { opacity: 0; transform: translateY(14px); }
.js .reveal.pre:nth-child(2) { transition-delay: .06s; }
.js .reveal.pre:nth-child(3) { transition-delay: .12s; }
.js .reveal.pre:nth-child(4) { transition-delay: .18s; }
.js .hero-in.pre > *:nth-child(2) { transition-delay: .08s; }
.js .hero-in.pre > *:nth-child(3) { transition-delay: .16s; }
.js .hero-in.pre > *:nth-child(4) { transition-delay: .24s; }
.bg { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .hero-in > *, .card, .btn, a.card { transition: none !important; }
  .bg { transform: none !important; }
}

/* ==========================================================================
   MEGA MENU. Appended to styles.css by build.py. Top level items are
   buttons that drop a panel from the header; every destination inside a
   panel is a plain <a href>, so the links stay crawlable. Under 1180px the
   panels sit open inside the drawer, no toggles needed.
   ========================================================================== */
.nav-item { position: static; }
.nav-btn { display: inline-flex; align-items: center; gap: .35rem; background: none; border: 0; padding: .6rem .2rem; cursor: pointer; color: var(--clr-fg); font-family: var(--ff-head); font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; transition: color var(--t-fast), border-color var(--t-fast); }
.nav-btn svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.nav-btn:hover, .nav-btn[aria-expanded="true"] { color: var(--clr-blue); border-bottom-color: var(--clr-blue); }
.nav-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--clr-rule); box-shadow: 0 30px 60px rgba(11,42,107,.18); display: none; }
.mega.is-open { display: block; animation: mega-drop .32s var(--ease) both; }
@keyframes mega-drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.mega-grid { display: grid; grid-template-columns: repeat(3, 1fr) 1.1fr; gap: var(--sp-5); padding: var(--sp-5) 0 var(--sp-6); }
.mega-grid.two { grid-template-columns: repeat(2, 1fr) 1.1fr; }
.mega h2 { font-family: var(--ff-head); font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--clr-fg-muted); margin-bottom: var(--sp-3); }
.mega ul { display: grid; gap: .35rem; }
.mega a.item { display: block; padding: .7rem .8rem; border-radius: var(--radius); text-decoration: none; color: var(--clr-fg); transition: background var(--t-fast), transform var(--t-fast); }
.mega a.item:hover { background: var(--clr-tint); transform: translateX(3px); color: var(--clr-fg); }
.mega a.item b { display: block; font-family: var(--ff-head); font-weight: 600; font-size: var(--fs-sm); }
.mega a.item small { display: block; color: var(--clr-fg-muted); font-size: var(--fs-xs); margin-top: .15rem; }
.mega-cta { background: var(--clr-blue); color: #fff; border-radius: var(--radius-lg); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); justify-content: space-between; }
.mega-cta p { color: var(--clr-fg-invert-muted); font-size: var(--fs-sm); }
.mega-cta strong { font-family: var(--ff-head); font-size: var(--fs-md); color: #fff; }
.mega-cta .btn { align-self: flex-start; }
.mega-cta .btn-white:hover { color: var(--clr-navy); }
.mega-backdrop { position: fixed; inset: 0; background: rgba(11,42,107,.28); z-index: 40; display: none; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.mega-backdrop.is-open { display: block; animation: fade .3s var(--ease) both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 1180px) {
  .nav-item { display: block; }
  .nav-btn { display: none; }
  .mega { position: static; display: block; box-shadow: none; border: 0; animation: none; }
  .mega-grid, .mega-grid.two { grid-template-columns: 1fr; gap: var(--sp-4); padding: 0 0 var(--sp-3); }
  .mega-cta { display: none; }
  .mega-backdrop { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .mega.is-open, .mega-backdrop.is-open { animation: none; } .nav-btn svg, .mega a.item { transition: none; } }

/* ==========================================================================
   DYNAMIC LAYER. Appended to styles.css by build.py. Everything here is
   additive: with no JS, or under reduced motion, every element is already
   in its final, visible state. Nothing here carries text.
   ========================================================================== */

/* scroll progress under the header */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; width: 100%; background: var(--clr-blue); transform: scaleX(0); transform-origin: 0 50%; }

/* the logo check draws itself once, on load (js adds .draw to html) */
.draw .site-header .mark polyline { stroke-dasharray: 120; stroke-dashoffset: 0; animation: draw-in .9s var(--ease) both; }
.draw .site-header .mark polyline:last-child { animation-delay: .25s; }
@keyframes draw-in { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }

/* hero headline rises word by word (js wraps words in .w) */
.hero-in h1 .w { display: inline-block; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .hero-in.pre h1 .w { opacity: 0; transform: translateY(.45em); }
.js .hero-in:not(.pre) h1 .w { transition-delay: calc(var(--i, 0) * 70ms); }

/* reveals: direction and stagger by index (js sets --i on grid children) */
.reveal[data-from="left"]  { --dx: -22px; --dy: 0px; }
.reveal[data-from="right"] { --dx: 22px; --dy: 0px; }
.js .reveal.pre { transform: translate(var(--dx, 0px), var(--dy, 14px)); }
.js .grid > .reveal, .js .grid > .reveal.pre { transition-delay: calc(var(--i, 0) * 80ms); }

/* the hero light: a slow sweep across the overlay */
.fx-eave .sweep { position: absolute; inset: -20%; z-index: 1; pointer-events: none; background: radial-gradient(38% 55% at 30% 40%, rgba(201,217,255,.16), transparent 70%); animation: sweep 14s ease-in-out infinite alternate; }
@keyframes sweep { from { transform: translate3d(-6%, -4%, 0); } to { transform: translate3d(10%, 6%, 0); } }

/* chalk lines and shingle courses drift very slowly */
.fx-chalkline::after { animation: chalk-drift 60s linear infinite; }
@keyframes chalk-drift { from { background-position: 0 0; } to { background-position: 118px 0; } }
.fx-underlayment::after { animation: course-drift 90s linear infinite; }
@keyframes course-drift { from { background-position: 0 0, 0 0; } to { background-position: 0 47px, 93px 0; } }

/* the plan: a line draws across behind the three steps as they arrive */
.plan-steps { position: relative; }
.plan-steps::before { content: ""; position: absolute; left: 6%; right: 6%; top: 46px; height: 2px; background: linear-gradient(90deg, var(--clr-blue), var(--clr-sky)); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s var(--ease) .2s; z-index: 0; }
.plan-steps.is-in::before { transform: scaleX(1); }
html:not(.js) .plan-steps::before { transform: scaleX(1); }
.plan-steps .step { z-index: 1; }
.plan-steps.is-in .step-n { animation: pop .5s var(--ease) both; }
.plan-steps.is-in .step:nth-child(2) .step-n { animation-delay: .35s; }
.plan-steps.is-in .step:nth-child(3) .step-n { animation-delay: .7s; }
@keyframes pop { 0% { transform: scale(.6); box-shadow: 0 0 0 0 rgba(0,51,160,.5); } 60% { transform: scale(1.12); } 100% { transform: scale(1); box-shadow: 0 0 0 12px rgba(0,51,160,0); } }
@media (max-width: 860px) { .plan-steps::before { display: none; } }

/* the stakes: two slow drips down the dark ground */
.fx-stormfront .drip { position: absolute; top: -40px; width: 10px; height: 26px; border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%; background: rgba(201,217,255,.55); z-index: 1; pointer-events: none; animation: drip 7s ease-in infinite; }
.fx-stormfront .drip.a { left: 14%; }
.fx-stormfront .drip.b { left: 82%; animation-delay: 3.4s; animation-duration: 9s; width: 8px; height: 20px; }
@keyframes drip { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: .9; } 88% { opacity: .9; } 100% { transform: translateY(110vh); opacity: 0; } }

/* value icons react to hover; the featured tier breathes */
.vcard .vicon svg, .trust-bar .tb-icon svg { transition: transform .3s var(--ease); }
.vcard:hover .vicon svg, .trust-bar li:hover .tb-icon svg { transform: rotate(-8deg) scale(1.12); }
.tier-featured { animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1.02) translateY(0); } 50% { transform: scale(1.02) translateY(-6px); } }
@media (max-width: 860px) { .tier-featured { animation: none; } }

/* the band: a slow shine */
.fx-ridge-cap .shine { position: absolute; top: 0; bottom: 0; width: 30%; left: -40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.10), transparent); z-index: 1; pointer-events: none; animation: shine 8s ease-in-out infinite; }
@keyframes shine { 0% { left: -40%; } 60%, 100% { left: 120%; } }

/* the hero card tilts toward the cursor (js sets --rx and --ry) */
.hero-card { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(-2deg); transition: transform .35s var(--ease), box-shadow var(--t-base); will-change: transform; }
.hero-card:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(0deg) translateY(-3px); }

/* FAQ accordions: a smooth open; the answer is never hidden without js */
details.faq { border: 1px solid var(--clr-rule); border-radius: var(--radius-lg); background: #fff; padding: 0; overflow: hidden; transition: box-shadow var(--t-base), border-color var(--t-base); }
details.faq:hover { border-color: #B9C9EA; box-shadow: var(--shadow-sm); }
details.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary h3 { margin: 0; font-size: var(--fs-md); }
details.faq .faq-x { position: relative; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--clr-tint); transition: transform .3s var(--ease), background var(--t-fast); }
details.faq .faq-x::before, details.faq .faq-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--clr-blue); transform: translate(-50%, -50%); }
details.faq .faq-x::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .3s var(--ease); }
details.faq[open] .faq-x { transform: rotate(180deg); background: var(--clr-blue); }
details.faq[open] .faq-x::before, details.faq[open] .faq-x::after { background: #fff; }
details.faq[open] .faq-x::after { transform: translate(-50%, -50%) rotate(0deg); }
details.faq .faq-a { padding: 0 var(--sp-5) var(--sp-5); }
details.faq .faq-a p { color: var(--clr-fg-muted); }
/* The answer opens instantly (native details), so it can never be stuck
   half-open if a transition fails to run; only the icon animates. */
details.faq[open] .faq-a p { animation: faq-in .3s var(--ease) both; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* header condenses when stuck */
.site-header .wrap { transition: padding .25s var(--ease); }
.site-header.is-stuck .wrap { padding-block: .35rem; }

@media (prefers-reduced-motion: reduce) {
  .fx-eave .sweep, .fx-stormfront .drip, .fx-ridge-cap .shine { display: none; }
  .fx-chalkline::after, .fx-underlayment::after, .tier-featured, .draw .site-header .mark polyline, .plan-steps.is-in .step-n { animation: none !important; }
  .plan-steps::before { transform: scaleX(1); transition: none; }
  .hero-card, .hero-card:hover { transform: rotate(-2deg); transition: none; }
  details.faq[open] .faq-a p { animation: none; }
  .hero-in h1 .w { transition: none; }
}

/* ==========================================================================
   SCROLL-LINKED MOTION. The page moves with the scroll wheel, not on a
   timer: headings and cards rise as they enter, photographs drift and
   settle, the pinned hero recedes as the first section slides over it.
   Browsers without scroll timelines ignore this block and use the
   observer reveals in main.js instead; nothing depends on it.
   ========================================================================== */
@supports (animation-timeline: view()) {
  .section-head, .card, .tier, .report-figure, .related, .article > .stack > div, .cta-row, .tiers-close, .more-block, .faq {
    animation: rise-in linear both; animation-timeline: view();
    animation-range: entry calc(var(--i, 0) * 5%) entry calc(55% + var(--i, 0) * 5%);
  }
  .section:not(.hero) .bg { animation: photo-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  .hero .hero-grid, .hero .trust-bar { animation: hero-recede linear both; animation-timeline: scroll(root); animation-range: 0 560px; }
  .hero .bg { animation: hero-bg-recede linear both; animation-timeline: scroll(root); animation-range: 0 700px; }
  .js .reveal.pre { opacity: 1; transform: none; }   /* scroll timelines own the reveal here */
}
@keyframes rise-in { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: none; } }
@keyframes photo-drift { from { transform: translateY(-7%) scale(1.10); } to { transform: translateY(7%) scale(1.10); } }
@keyframes hero-recede { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-60px) scale(.96); } }
@keyframes hero-bg-recede { from { transform: scale(1); filter: brightness(1); } to { transform: scale(1.08); filter: brightness(.7); } }
@media (prefers-reduced-motion: reduce) {
  .section-head, .card, .tier, .report-figure, .related, .article > .stack > div, .cta-row, .tiers-close, .more-block, .faq, .section .bg, .hero .hero-grid, .hero .trust-bar { animation: none !important; }
}

/* ==========================================================================
   COMPACT FORM AND THE PHONE PASS. Appended to styles.css by build.py.
   ========================================================================== */

/* The form: three fields on one row, everything else behind "Add a note" */
.form-compact { gap: var(--sp-3); }
.form-compact .row3 { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: var(--sp-3); }
.form-compact .field label { font-size: .75rem; }
.form-compact .field input, .form-compact .field select, .form-compact .field textarea { min-height: 46px; padding: .6rem .85rem; }
.form-more { border-top: 1px solid var(--clr-rule); padding-top: var(--sp-2); }
.form-more summary { cursor: pointer; list-style: none; font-family: var(--ff-head); font-weight: 600; font-size: var(--fs-xs); color: var(--clr-blue); display: inline-flex; align-items: center; gap: .4rem; }
.form-more summary::-webkit-details-marker { display: none; }
.form-more summary::after { content: "+"; font-weight: 700; }
.form-more[open] summary::after { content: "\2212"; }
.form-more > *:not(summary) { margin-top: var(--sp-3); }
.form-foot { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.form-foot .form-note { margin: 0; }
.form-card h3 { font-size: var(--fs-lg); }
.form-lead { color: var(--clr-fg-muted); margin: .25rem 0 var(--sp-4); font-size: var(--fs-sm); }
.wrap-narrow .form-card { margin-top: var(--sp-6); }
.on-dark .form-card { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); }
@media (max-width: 760px) { .form-compact .row3 { grid-template-columns: 1fr; } .form-foot .btn { width: 100%; } }

/* Section photographs: the phone gets a 900px file, not the 1800px one */
.bg { background-image: var(--img); }
@media (max-width: 640px) { .bg { background-image: var(--img-m, var(--img)); } }

/* The phone: tighter rhythm, shallower crossfade band, one column everywhere */
@media (max-width: 760px) {
  :root { --sp-8: 3.75rem; }
  .section + .section:not(.band) { margin-top: -80px; padding-top: calc(var(--sp-8) + 80px);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 80px); mask-image: linear-gradient(180deg, transparent 0, #000 80px); }
  .section:has(+ .section:not(.band)) { padding-bottom: calc(var(--sp-8) + 80px); }
  .hero { min-height: 0; padding-top: 3rem; }
  .hero-in .sub { font-size: var(--fs-base); }
  .hero-in .cta-group .btn { width: 100%; }
  .trust-bar { margin-top: var(--sp-5); box-shadow: var(--shadow-md); }
  .trust-bar li { padding: var(--sp-3); }
  .trust-bar small { display: none; }
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.7rem; }
  .section-head { margin-bottom: var(--sp-5); }
  .card { padding: var(--sp-4); }
  .tier { padding: var(--sp-4); }
  .tier h3 { font-size: 1.5rem; }
  .plan-steps.is-in .step-n { animation: none; }
  .crumbs { font-size: .72rem; }
  .guide-grid, .contact-grid { gap: var(--sp-5); }
  .related-list { gap: var(--sp-2) var(--sp-3); }
  .site-footer { padding-block: var(--sp-6) var(--sp-4); }
  .footer-grid { gap: var(--sp-4); }
}
@media (max-width: 420px) {
  .wrap, .wrap-narrow { width: min(100% - 1.75rem, var(--wrap)); }
  h1 { font-size: 2rem; }
}