/* ==========================================================================
   Coastline Credit Consultants
   Design system + landing page styles.

   Plain CSS. No build step, no preprocessor, no framework, no CDN.
   Palette is locked to the approved "Harbor Flow" brand board; every value
   below is either one of the five brand colours or a derived shade/tint of
   one of them. No foreign hues.

   Structure of this file
     1.  Tokens
     2.  Reset + base
     3.  Type scale
     4.  Motion system (all of it honours prefers-reduced-motion)
     5.  The Harbor Flow mark + logo lockups
     6.  Header + navigation
     7.  Buttons
     8.  Hero
     9.  Shared section furniture
     10. Assurance strip
     11. Statement block ("why now")
     12. Phase rail (how it works)
     13. Pricing: milestone rail + cumulative meter
     14. Pillars + comparison
     15. Partners + tri-bureau band
     16. Forms
     17. FAQ
     18. Footer
     19. Responsive
     20. Print
   ========================================================================== */

/* ------------------------------------------------------------- 1. tokens - */

:root {
  /* Brand palette — EXACT, do not deviate */
  --navy:     #14314B;   /* Harbor Navy     — trust anchor / primary */
  --teal:     #177E7B;   /* Tidewater Teal  — action / accent        */
  --seafoam:  #BFE3DA;   /* Seafoam         — lightest wave band     */
  --slate:    #4A5A66;   /* Driftwood Slate — secondary text         */
  --sand:     #F6F2EA;   /* Sand            — ground                 */

  /* Derived shades and tints of the five above. Nothing else. */
  --navy-950: #081724;
  --navy-900: #0D2237;
  --navy-700: #1D4363;
  --navy-600: #2A5878;
  --navy-500: #3D6B8A;

  --teal-800: #0E5754;
  --teal-700: #12635F;
  --teal-500: #1E9691;
  --teal-400: #35ADA7;
  --teal-300: #6FC5BF;

  --seafoam-400: #8FC8BD;
  --seafoam-300: #A4D2C8;
  --seafoam-100: #DCF0EA;
  --seafoam-050: #EDF8F5;

  --slate-700: #3B4954;
  --slate-400: #7C8A94;

  --sand-050: #FCFAF6;
  --sand-200: #ECE6DA;
  --sand-300: #DED6C6;

  --white: #FFFFFF;

  /* Harbor Flow mark — recoloured per variant, see §5.
     The arrowhead is not its own colour: on the approved board it is the
     seafoam band flaring into a point, one continuous shape in one tone.
     Giving it a darker value was what made it read as a separate object
     floating off the end of the band. */
  --hf-1: var(--seafoam-300);  /* top band     */
  --hf-2: var(--teal);         /* middle band  */
  --hf-3: var(--navy);         /* bottom band  */
  --hf-a: var(--hf-1);         /* arrowhead — always the top band's colour */

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --wrap: 1180px;
  --wrap-narrow: 780px;
  --gutter: 22px;

  /* ONE RADIUS PER STRUCTURAL LEVEL. Nothing picks a radius by eye.
       --r-xl  full-width canvases and grouped component shells:
               .hero-canvas .statement .navy-canvas .guide-cover .guide-cta
               .assurances .pillars .compare
       --r-lg  cards that sit inside those:
               .hero-card .price-hero .milestone .milestone-total .price-point
               .form-card .guide-teaser .guide-toc .guide-part .hero-price
       --r-md  inset notes and data strips: .callout .geo-notice .bureaus
               .stat-list li .checklist
       --r-sm  form controls and the skip link
     Below 420px --r-xl collapses to 20px, so the two card levels merge — a
     28px corner on a 343px-wide panel is a bubble, not a card. */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --shadow-sm: 0 1px 2px rgba(8, 23, 36, .04), 0 2px 6px rgba(8, 23, 36, .05);
  --shadow-md: 0 2px 4px rgba(8, 23, 36, .04), 0 12px 28px -8px rgba(8, 23, 36, .12);
  --shadow-lg: 0 4px 10px rgba(8, 23, 36, .05), 0 28px 56px -16px rgba(8, 23, 36, .18);
  --shadow-navy: 0 30px 70px -28px rgba(8, 23, 36, .55);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-out: cubic-bezier(.22, .61, .36, 1);
}

/* -------------------------------------------------------- 2. reset + base */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--sand);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Belt and braces against a stray wide child pushing the page sideways. */
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
img { height: auto; }

a { color: var(--teal-700); text-underline-offset: 3px; }
a:hover { color: var(--teal-800); }

/* Focus ring: two tones on purpose. The site puts interactive elements on
   sand, on white, on teal and on navy, and no single colour clears 3:1
   against all four. The bright teal ring carries on the dark surfaces; the
   dark halo just outside it carries on the light ones. No border-radius here
   — setting it would reshape pill buttons the moment they took focus. */
:focus-visible {
  outline: 3px solid var(--teal-400);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(8, 23, 36, .5);
}

::selection { background: var(--seafoam); color: var(--navy); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-narrow { max-width: var(--wrap-narrow); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -80px;
  background: var(--navy); color: var(--white);
  padding: 13px 20px; z-index: 200; font-weight: 600;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  text-decoration: none;
  transition: top .18s var(--ease-out);
}
.skip-link:focus { top: 0; color: var(--white); }

/* -------------------------------------------------------- 3. type scale -- */

h1, h2, h3, h4 { margin: 0 0 .55em; }

.display,
h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.35rem, 4.6vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -.012em;
}

h2, .h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.05rem, 4.1vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -.008em;
}

/* Card- and item-level headings switch to Inter. Cormorant is a display face:
   beautiful at 40px, weak and thin at 17px. Using the serif only where it is
   large keeps the pairing intentional rather than accidental. */
h3, .h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.06rem, 1.4vw, 1.2rem);
  line-height: 1.35;
  letter-spacing: -.006em;
}

h4 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: .98rem;
  line-height: 1.4;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; }
em { font-style: italic; }

.label {
  font-family: var(--sans);
  font-size: .715rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--teal-700);
  margin: 0 0 1.1em;
  display: flex;
  /* flex-start, not center: when the label wraps to two lines on a narrow
     screen the rule must stay level with the first line, not float between. */
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}
.label::before {
  content: "";
  width: 22px; height: 2px; flex: none;
  margin-top: .72em;
  background: linear-gradient(90deg, var(--seafoam-400), var(--teal));
  border-radius: 2px;
}

.lede {
  font-size: clamp(1.06rem, 1.5vw, 1.22rem);
  line-height: 1.62;
  color: var(--slate);
  max-width: 60ch;
}
.lede strong { color: var(--navy); }

.section-intro { max-width: 64ch; color: var(--slate); font-size: 1.06rem; }

.fineprint { font-size: .875rem; line-height: 1.62; color: var(--slate); }
.opt { font-weight: 400; color: var(--slate); }

.tabular { font-variant-numeric: tabular-nums; }

/* Cormorant Garamond defaults to old-style figures. They are lovely in running
   prose and wrong at display size: the 0 has no x-height, so "60-Day" reads as
   "6o-Day" beside an ascending 6, and 2, 7 and 9 hang below the baseline in the
   middle of a headline. Lining figures everywhere the serif runs large.
   (.price-big sets its own lining + tabular pair further down and keeps it.) */
h1, h2, .h2, .display, .statement-quote, .stat-k, .disclosure-title {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

/* ---------------------------------------------------- 4. motion system --- */
/*
   Everything animated is opacity + transform only — no width/height/top/left
   transitions — so nothing here can move layout or cost a reflow on a phone.

   TWO FLAGS, ON PURPOSE.

     .js       set by an inline script in <head>. Drives only structural no-JS
               fallbacks (the mobile nav). Never hides anything.

     .js-anim  added by script.js as its very first statement, and removed
               again if anything in script.js throws. EVERY rule that starts an
               element invisible hangs off this class. So the default — script
               missing, script 404, script blocked, script broken — is the
               finished, fully visible page. A reveal can only hide once the
               script that un-hides it is known to be alive.

   The hero deliberately carries no .reveal at all: see .hero-in below.
*/

.js-anim .reveal {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity .75s var(--ease) var(--d, 0ms),
    transform .75s var(--ease) var(--d, 0ms);
}
.js-anim .reveal.is-in { opacity: 1; transform: none; }

/* Stroke-drawn wave rules */
.js-anim .band-rule path { stroke-dasharray: var(--len, 1400); stroke-dashoffset: var(--len, 1400); }
.js-anim .band-rule.is-in path {
  transition: stroke-dashoffset 1.5s var(--ease) var(--d, 0ms);
  stroke-dashoffset: 0;
}

/* Hero entrance. A CSS animation, not a scroll reveal — it needs no script, so
   it is already running on the first painted frame, and it animates transform
   only: the eyebrow, headline, lede, price, both buttons, the note and the
   glance card are all painted at full opacity from frame one. The hero is
   never a blank navy rectangle, and the LCP element is real text. */
@keyframes heroRise {
  from { transform: translate3d(0, 12px, 0); }
  to   { transform: none; }
}
.hero-in { animation: heroRise .45s var(--ease-out) var(--d, 0ms) both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-anim .reveal { opacity: 1; transform: none; transition: none; }
  .js-anim .band-rule path { stroke-dashoffset: 0; transition: none; }
  .hero-in { animation: none; transform: none; }
  /* The three progress graphics — timeline connectors, the cumulative pricing
     meter, the tri-bureau bars — land in their finished state instead of
     sweeping in, and do not wait on a scroll observer to get there. */
  .rail-connect, .meter-seg, .bureau-fill { transform: none !important; transition: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------- 5. the Harbor Flow mark --- */
/*
   Hand-authored inline SVG rebuild of the approved "Harbor Flow — Elegant Arc"
   icon: three tapered ribbon bands (Seafoam -> Tidewater Teal -> Harbor Navy)
   sweeping upward and resolving into an arrowhead. Sharp at any size,
   recolourable through the --hf-* custom properties, and animatable.

   The PNG exports in assets/ remain as the reference and as a fallback for
   anything that cannot take SVG (email, print vendors, social avatars).

   Variants
     default          full colour
     .logo--navy      one colour, Harbor Navy
     .logo--reversed  reversed on navy (white bands, navy gaps)
*/

.hf-mark { width: 100%; height: auto; overflow: visible; }
.hf-b1 { fill: var(--hf-1); }
.hf-b2 { fill: var(--hf-2); }
.hf-b3 { fill: var(--hf-3); }
.hf-ar { fill: var(--hf-a); }

.logo--navy     { --hf-1: var(--navy); --hf-2: var(--navy); --hf-3: var(--navy); --hf-a: var(--navy); }
.logo--reversed { --hf-1: var(--white); --hf-2: var(--white); --hf-3: var(--white); --hf-a: var(--white); }

/* --- lockups ------------------------------------------------------------ */

.logo { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; }
.logo:hover { color: inherit; }

.logo .hf-mark { width: 54px; flex: none; margin-bottom: 2px; }

.logo-type { display: block; line-height: 1; }

/* Tracking matches the approved wordmark, which is set a touch looser than
   Cormorant's default fit. */
.logo-name {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.62rem;
  line-height: .95;
  color: var(--navy);
  letter-spacing: .02em;
}

.logo-sub {
  display: block;
  font-family: var(--sans);
  font-size: .5rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--teal-700);
  margin-top: .62em;
  margin-right: -.3em;
}

.logo--reversed .logo-name { color: var(--white); }
.logo--reversed .logo-sub  { color: var(--seafoam); }
.logo--navy .logo-name { color: var(--navy); }
.logo--navy .logo-sub  { color: var(--navy); }

/* Stacked lockup, matching the approved brand-board arrangement:
   mark above the wordmark, with rules flanking the tracked subline. */
.logo--stacked { flex-direction: column; gap: 16px; text-align: center; }
.logo--stacked .hf-mark { width: 76px; }
.logo--stacked .logo-name { font-size: 2.5rem; letter-spacing: .02em; }
.logo--stacked .logo-sub {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: .6rem; letter-spacing: .34em; margin-right: 0;
}
.logo--stacked .logo-sub::before,
.logo--stacked .logo-sub::after {
  content: ""; height: 1px; width: 20px; flex: none;
  background: currentColor; opacity: .75;
}

/* --------------------------------------------------- 6. header + nav ----- */

.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(246, 242, 234, .86);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s var(--ease-out), border-color .3s var(--ease-out), background-color .3s var(--ease-out);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-header { -webkit-backdrop-filter: saturate(150%) blur(14px); backdrop-filter: saturate(150%) blur(14px); }
}
.site-header.is-stuck {
  background: rgba(246, 242, 234, .94);
  border-bottom-color: var(--sand-300);
  box-shadow: 0 10px 30px -20px rgba(8, 23, 36, .5);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 78px;
}

.nav-toggle {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--white); border: 1px solid var(--sand-300);
  border-radius: 999px; padding: 9px 16px 9px 13px;
  font-family: var(--sans); font-size: .85rem; font-weight: 600;
  color: var(--navy); cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s, box-shadow .2s;
}
.nav-toggle:hover { border-color: var(--teal-300); }
.nav-toggle-bars {
  position: relative; width: 15px; height: 11px; flex: none;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after,
.nav-toggle-bars span {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: var(--navy); border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s;
}
.nav-toggle-bars::before { top: 0; }
.nav-toggle-bars span    { top: 4.5px; }
.nav-toggle-bars::after  { top: 9px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(4.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span    { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { transform: translateY(-4.5px) rotate(-45deg); }

.site-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 4px;
}
.site-nav a {
  display: inline-block;
  font-size: .92rem; font-weight: 500; color: var(--navy);
  text-decoration: none; padding: 9px 13px; border-radius: 999px;
  transition: background-color .2s, color .2s;
}
.site-nav a:hover { background: rgba(23, 126, 123, .09); color: var(--teal-800); }

.nav-cta {
  background: var(--teal) !important; color: var(--white) !important;
  padding: 11px 20px !important; font-weight: 600 !important;
  margin-left: 8px;
  box-shadow: 0 6px 18px -8px rgba(14, 87, 84, .9);
  transition: background-color .2s, transform .2s var(--ease-out), box-shadow .2s;
}
.nav-cta:hover {
  background: var(--teal-800) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px rgba(14, 87, 84, .95);
}

/* ------------------------------------------------------------ 7. buttons - */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-size: 1rem; font-weight: 600;
  padding: 15px 28px; border-radius: 999px;
  border: 1.5px solid transparent; cursor: pointer;
  text-decoration: none; text-align: center; line-height: 1.3;
  transition: background-color .2s, color .2s, border-color .2s,
              transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--teal); border-color: var(--teal); color: var(--white);
  box-shadow: 0 10px 26px -12px rgba(14, 87, 84, 1);
}
.btn-primary:hover {
  background: var(--teal-800); border-color: var(--teal-800); color: var(--white);
  box-shadow: 0 16px 32px -12px rgba(14, 87, 84, 1);
}

.btn-ghost { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn-ghost:hover { background: var(--navy); color: var(--white); }

/* On the navy canvases */
.on-navy .btn-ghost { border-color: rgba(191, 227, 218, .45); color: var(--white); }
.on-navy .btn-ghost:hover { background: var(--white); border-color: var(--white); color: var(--navy); }

.btn-block { display: flex; width: 100%; }

.btn-arrow { transition: transform .25s var(--ease-out); }
.btn:hover .btn-arrow { transform: translateX(4px); }

/* Long/short label pair. At 375px the full hero CTA wraps to two lines and the
   arrow floats beside the block; the nav's shorter wording holds one line.
   Exactly one of the two is in the DOM flow — and in the a11y tree — at any
   width, so the button is never announced twice. */
.btn-label-short { display: none; }
@media (max-width: 520px) {
  .btn-label-long  { display: none; }
  .btn-label-short { display: inline; }
}

/* --------------------------------------------------------------- 8. hero - */

.hero { padding: clamp(18px, 3vw, 34px) 0 clamp(40px, 5vw, 64px); }

.hero-canvas {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-xl);
  padding: clamp(34px, 5vw, 76px) clamp(24px, 4vw, 64px) clamp(34px, 4.5vw, 62px);
  background:
    radial-gradient(120% 130% at 88% 4%, rgba(23,126,123,.42) 0%, rgba(23,126,123,0) 58%),
    radial-gradient(90% 120% at 4% 100%, rgba(29,67,99,.65) 0%, rgba(29,67,99,0) 60%),
    linear-gradient(158deg, var(--navy) 0%, var(--navy-900) 52%, var(--navy-950) 100%);
  color: var(--seafoam);
  box-shadow: var(--shadow-navy);
}

/* Soft teal aurora, drifting. Pure transform, composited, cheap. */
.hero-glow {
  position: absolute; z-index: -2; pointer-events: none;
  width: 62%; aspect-ratio: 1; right: -10%; top: -22%;
  background: radial-gradient(circle, rgba(53,173,167,.30) 0%, rgba(53,173,167,0) 70%);
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-4%, 4%, 0) scale(1.12); }
}

/* The mark, used large as the hero graphic — the brief's instruction to make
   the logo do the heavy lifting. Decorative, behind the copy, low contrast. */
.hero-mark {
  position: absolute; z-index: -1; pointer-events: none;
  width: min(880px, 96%);
  right: -12%; top: -14%;
  opacity: .17;
  --hf-1: var(--seafoam);
  --hf-2: var(--teal-300);
  --hf-3: var(--navy-500);
  --hf-a: var(--seafoam);
}

/* Load animation: the three bands rise into place in sequence, then the
   arrowhead lands. After that a very slow float keeps it alive. Gated on
   .js-anim, so if the script never runs the mark is simply already there. */
.js-anim .hero-mark .hf-band,
.js-anim .hero-mark .hf-ar {
  opacity: 0;
  animation: markRise .95s var(--ease) forwards;
}
.js-anim .hero-mark .hf-b3 { animation-delay: .15s; }
.js-anim .hero-mark .hf-b2 { animation-delay: .30s; }
.js-anim .hero-mark .hf-b1 { animation-delay: .45s; }
.js-anim .hero-mark .hf-ar { animation-delay: .68s; animation-name: arrowLand; animation-duration: .7s; }

@keyframes markRise {
  from { opacity: 0; transform: translate3d(-26px, 22px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes arrowLand {
  from { opacity: 0; transform: translate3d(-16px, 16px, 0) scale(.72); }
  to   { opacity: 1; transform: none; }
}
.hf-mark .hf-band, .hf-mark .hf-ar { transform-origin: 60% 60%; }

.js-anim .hero-mark .hf-b3 { animation-name: markRise, floatA; animation-duration: .95s, 13s; animation-delay: .15s, 1.4s; animation-iteration-count: 1, infinite; animation-timing-function: var(--ease), ease-in-out; animation-direction: normal, alternate; animation-fill-mode: forwards, none; }
.js-anim .hero-mark .hf-b2 { animation-name: markRise, floatB; animation-duration: .95s, 11s; animation-delay: .30s, 1.4s; animation-iteration-count: 1, infinite; animation-timing-function: var(--ease), ease-in-out; animation-direction: normal, alternate; animation-fill-mode: forwards, none; }
.js-anim .hero-mark .hf-b1 { animation-name: markRise, floatC; animation-duration: .95s, 9.5s; animation-delay: .45s, 1.4s; animation-iteration-count: 1, infinite; animation-timing-function: var(--ease), ease-in-out; animation-direction: normal, alternate; animation-fill-mode: forwards, none; }

@keyframes floatA { from { transform: translate3d(0,0,0); } to { transform: translate3d(0, 5px, 0); } }
@keyframes floatB { from { transform: translate3d(0,0,0); } to { transform: translate3d(2px, -5px, 0); } }
@keyframes floatC { from { transform: translate3d(0,0,0); } to { transform: translate3d(4px, -8px, 0); } }

@media (prefers-reduced-motion: reduce) {
  .js-anim .hero-mark .hf-band, .js-anim .hero-mark .hf-ar { opacity: 1; animation: none; transform: none; }
  .hero-glow { animation: none; }
}

.hero-grid { display: grid; grid-template-columns: 1fr; gap: clamp(30px, 4vw, 52px); align-items: start; }

.hero .label { color: var(--seafoam); }
.hero .label::before { background: linear-gradient(90deg, var(--seafoam), var(--teal-300)); }

.hero h1 { color: var(--white); max-width: 22ch; margin-bottom: .42em; }
.hero h1 .accent {
  background: linear-gradient(96deg, var(--seafoam) 8%, var(--teal-300) 92%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--teal-300);
}

.hero-lede { color: var(--seafoam); font-size: clamp(1.06rem, 1.5vw, 1.2rem); line-height: 1.62; max-width: 54ch; }
.hero-lede strong { color: var(--white); }

/* Radius is var(--r-lg), not a pill: this block wraps to two or three lines at
   every width, and a 999px radius on a 93px-tall box gives it semicircular
   ends that fight the text. Pill radii are for single-line objects. */
.hero-price {
  margin-top: 22px;
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 12px 20px; border-radius: var(--r-lg);
  background: rgba(191, 227, 218, .10);
  border: 1px solid rgba(191, 227, 218, .22);
  font-size: .88rem; color: var(--seafoam); line-height: 1.5;
  max-width: 46ch;
}
.hero-price b { color: var(--white); font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 22px; }

.hero-note {
  font-size: .875rem; color: var(--seafoam); opacity: .82;
  border-left: 2px solid rgba(191, 227, 218, .4);
  padding-left: 15px; max-width: 54ch; line-height: 1.6;
}

/* Glass "at a glance" card */
.hero-card {
  border-radius: var(--r-lg);
  padding: 26px 26px 22px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(191, 227, 218, .20);
  box-shadow: 0 24px 50px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.10);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .hero-card { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
}
.hero-card .card-title {
  font-family: var(--sans); font-size: .715rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--seafoam);
  margin-bottom: 1.4em;
}
.glance { margin: 0; }
.glance > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  padding: 11px 0; border-bottom: 1px solid rgba(191, 227, 218, .16);
}
.glance > div:last-of-type { border-bottom: 0; }
.glance dt { color: var(--seafoam); font-size: .89rem; opacity: .9; }
/* No tabular figures here. These values are prose, not an aligned column, and
   tabular widths in Inter also widen the hyphen — "90-day money-back" came out
   as "90 - day money - back" in the most-scanned card on the page. Tabular
   figures stay where there is a genuine column to align: .tabular, the meter
   scale, the milestone amounts. */
.glance dd {
  margin: 0; font-weight: 600; text-align: right;
  font-size: .92rem; color: var(--white);
}
.card-foot {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(191, 227, 218, .16);
  font-size: .8rem; color: var(--seafoam); opacity: .92; line-height: 1.55;
}

/* -------------------------------------------- 9. section furniture ------- */

.section { padding: clamp(58px, 7.5vw, 108px) 0; position: relative; }
.section-white { background: var(--white); }
.section-sand  { background: var(--sand); }
.section-tint  { background: linear-gradient(180deg, var(--sand) 0%, var(--seafoam-050) 100%); }

.section-head { max-width: 44ch; margin-bottom: clamp(34px, 4vw, 54px); }
.section-head h2 { max-width: 20ch; }
.section-head.is-wide { max-width: 60ch; }
.section-head.is-wide h2 { max-width: 26ch; }

/* Three-band wave rule — the logo motif as a divider graphic. */
.band-rule { width: 100%; line-height: 0; overflow: hidden; }
.band-rule svg { width: 100%; height: clamp(30px, 4.5vw, 56px); display: block; }

/* ------------------------------------------------- 10. assurance strip --- */

/* Grouped component shell — same structural level as .pillars and .compare,
   so the same corner. */
.assurances {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 2px;
  background: var(--sand-200);
  border: 1px solid var(--sand-200);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.assurance { background: var(--white); padding: 24px 24px 26px; }
.assurance-ico { width: 30px; height: 30px; margin-bottom: 14px; }
/* Balanced, and reserved at two lines, so the four bodies start on the same
   baseline instead of stepping down the row. */
.assurance h3 { margin-bottom: .35em; text-wrap: balance; min-height: 2.7em; }
.assurance p { margin: 0; font-size: .9rem; color: var(--slate); line-height: 1.55; }

/* ------------------------------------------------- 11. statement block --- */

.statement {
  background:
    radial-gradient(90% 120% at 92% 0%, rgba(23,126,123,.35) 0%, rgba(23,126,123,0) 60%),
    linear-gradient(150deg, var(--navy) 0%, var(--navy-950) 100%);
  border-radius: var(--r-xl);
  padding: clamp(34px, 5vw, 72px) clamp(24px, 4vw, 64px);
  color: var(--seafoam);
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-navy);
}
.statement .label { color: var(--seafoam); }
.statement .label::before { background: linear-gradient(90deg, var(--seafoam), var(--teal-300)); }
.statement-quote {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.75rem, 3.8vw, 2.85rem); line-height: 1.14;
  color: var(--white); max-width: 24ch; margin: 0 0 .55em;
  letter-spacing: -.008em;
}
.statement-quote .accent { color: var(--seafoam); }
.statement-body { color: var(--seafoam); max-width: 62ch; font-size: 1.02rem; line-height: 1.68; opacity: .92; }
.statement-body strong { color: var(--white); }

.statement-grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }

.stat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.stat-list li {
  padding: 16px 20px; border-radius: var(--r-md);
  background: rgba(191, 227, 218, .07);
  border: 1px solid rgba(191, 227, 218, .16);
}
/* Lining, not tabular: "$0" and "3 of 3" are statements, not a column to
   align, and Cormorant's old-style 0 and 3 drop below the baseline here. */
.stat-k {
  display: block; font-family: var(--serif); font-weight: 600;
  font-size: 2rem; line-height: 1; color: var(--white); margin-bottom: 6px;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}
.stat-v { display: block; font-size: .87rem; color: var(--seafoam); opacity: .88; line-height: 1.5; }

/* ------------------------------------------------------ 12. phase rail --- */

.rail { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }

.rail-item { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 0 20px; align-content: stretch; }

.rail-node {
  position: relative; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: .9rem; font-weight: 700;
  color: var(--white); background: var(--navy);
  box-shadow: 0 0 0 5px var(--white), 0 6px 16px -6px rgba(8,23,36,.5);
}
.section-sand .rail-node, .section-tint .rail-node { box-shadow: 0 0 0 5px var(--sand), 0 6px 16px -6px rgba(8,23,36,.4); }

.rail-item:nth-child(1) .rail-node { background: linear-gradient(140deg, var(--seafoam-400), var(--teal-300)); color: var(--navy); }
.rail-item:nth-child(2) .rail-node { background: linear-gradient(140deg, var(--teal-500), var(--teal-800)); }
.rail-item:nth-child(3) .rail-node { background: linear-gradient(140deg, var(--navy-600), var(--navy-950)); }

/* Connector: drawn by default, and only collapsed to nothing once script.js
   has proved it is alive and can draw it back in. transform only. */
.rail-connect {
  position: absolute; z-index: 1;
  left: 19px; top: 40px; bottom: -6px; width: 2px;
  background: linear-gradient(180deg, var(--seafoam-400), var(--teal-300));
  transform-origin: top;
}
.rail-item:nth-child(2) .rail-connect { background: linear-gradient(180deg, var(--teal-500), var(--navy-600)); }
.js-anim .rail-connect { transform: scaleY(0); }
.js-anim .rail-item.is-in .rail-connect { transition: transform .9s var(--ease) .25s; transform: scaleY(1); }

.rail-card {
  padding: 0 0 40px;
}
.rail-when {
  font-size: .715rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--teal-700); margin: 10px 0 8px;
}
.rail-card h3 { font-size: 1.3rem; margin-bottom: .3em; }
.rail-card > p:not(.rail-when):not(.rail-bill) { color: var(--slate); font-size: .98rem; margin-bottom: .9em; }
.rail-bill {
  display: inline-flex; align-items: baseline; gap: 9px;
  padding: 7px 15px; border-radius: 999px;
  background: var(--seafoam-050); border: 1px solid var(--seafoam);
  font-size: .86rem; color: var(--teal-800); font-weight: 600;
}
.rail-bill b { font-size: 1rem; color: var(--navy); font-variant-numeric: tabular-nums; }
.rail-bill.is-none { background: var(--sand); border-color: var(--sand-300); color: var(--slate); }

.steps-foot {
  margin-top: 30px; font-size: .97rem; color: var(--slate);
  border-left: 3px solid var(--teal); padding-left: 18px; max-width: 62ch;
}

/* --------------------------------------- 13. pricing rail + meter -------- */

.price-lockup {
  display: grid; grid-template-columns: 1fr; gap: clamp(26px, 3.5vw, 48px);
  align-items: start; margin-bottom: clamp(34px, 4vw, 52px);
}

.price-hero {
  background: var(--white); border: 1px solid var(--sand-200);
  border-radius: var(--r-lg); padding: clamp(26px, 3.5vw, 40px);
  box-shadow: var(--shadow-md);
}
.price-big {
  font-family: var(--serif); font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(3.4rem, 8vw, 5.2rem); line-height: .92; color: var(--navy);
  margin: 0 0 .12em;
  /* Cormorant defaults to old-style figures, which are lovely in prose and
     ambiguous on a price. Lining figures keep the number unmistakable. */
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.price-big small { font-size: .38em; font-family: var(--sans); font-weight: 600; letter-spacing: 0; color: var(--slate); margin-left: .3em; }
.price-sub { color: var(--slate); font-size: 1.02rem; max-width: 40ch; }

/* Cumulative meter — three segments, filling seafoam -> teal -> navy. */
.meter { margin-top: 26px; }
.meter-track {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  height: 12px; border-radius: 999px; overflow: hidden; background: var(--sand-200);
}
.meter-seg { border-radius: 999px; transform-origin: left; }
.meter-seg-1 { background: linear-gradient(90deg, var(--seafoam), var(--seafoam-400)); }
.meter-seg-2 { background: linear-gradient(90deg, var(--teal-400), var(--teal)); }
.meter-seg-3 { background: linear-gradient(90deg, var(--navy-600), var(--navy)); }
.js-anim .meter-seg { transform: scaleX(0); }
.js-anim .meter.is-in .meter-seg { transition: transform .8s var(--ease); transform: scaleX(1); }
.js-anim .meter.is-in .meter-seg-2 { transition-delay: .22s; }
.js-anim .meter.is-in .meter-seg-3 { transition-delay: .44s; }

.meter-scale {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  margin-top: 10px; font-size: .78rem; color: var(--slate);
  font-variant-numeric: tabular-nums;
}
.meter-scale span { text-align: right; }
.meter-scale span b { color: var(--navy); font-weight: 600; }

/* Milestone cards.
   The stack holds the <ol> and the total together in one grid cell, so the
   total can live outside the list without landing in a column of its own. */
.milestone-stack { display: grid; gap: 16px; align-content: start; }
.milestones { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }

.milestone {
  position: relative;
  background: var(--white); border: 1px solid var(--sand-200);
  border-radius: var(--r-lg); padding: 22px 24px 22px 26px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.milestone::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--seafoam-400);
}
.milestone:nth-child(2)::before { background: var(--teal); }
.milestone:nth-child(3)::before { background: var(--navy); }
.milestone-top {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: baseline; gap: 6px 16px; margin-bottom: 6px;
}
.milestone h3 { margin: 0; font-size: 1.08rem; }
.milestone-amt {
  font-family: var(--sans); font-weight: 700; font-size: 1.22rem;
  color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.milestone-when {
  font-size: .715rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal-700); margin: 0 0 8px;
}
.milestone p.milestone-trigger { margin: 0; font-size: .92rem; color: var(--slate); line-height: 1.55; }

.milestone-total {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: 8px 16px; margin-top: 4px;
  background: var(--navy); color: var(--white);
  border-radius: var(--r-lg); padding: 20px 26px;
}
.milestone-total .mt-label { font-weight: 600; font-size: 1rem; }
.milestone-total .mt-amt { font-family: var(--sans); font-weight: 700; font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.milestone-total .mt-note { flex-basis: 100%; font-size: .82rem; color: var(--seafoam); opacity: .85; margin: 0; line-height: 1.5; }

/* Price assurance cards.
   NO HOVER STATE — see the note above §14. */
.price-points { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: clamp(30px, 4vw, 46px); }
.price-point {
  background: var(--white); border: 1px solid var(--sand-200);
  border-radius: var(--r-lg); padding: 24px 24px;
}
.price-point .tick { width: 26px; height: 26px; margin-bottom: 14px; }
/* Balanced so no heading orphans its last word, and reserved at two lines so
   the four bodies start level instead of stepping down the row. */
.price-point h3 { margin-bottom: .4em; text-wrap: balance; min-height: 2.7em; }
.price-point p { color: var(--slate); font-size: .91rem; margin: 0; line-height: 1.6; }

/* -------------------------------------------- 14. pillars + comparison --- */
/*
   NO HOVER STATES ON CARDS, ANYWHERE.

   None of .pillar, .price-point, .milestone, .assurance, .stat-list li or
   .compare-row is clickable. A lift-and-shadow on hover is the standard
   promise of "this is a link" — a promise every one of these would break —
   and having three different treatments across six identical-looking card
   families made the page read as if some of them did something. Hover states
   belong to the things that respond: links, buttons, form fields, summaries.
   (.milestone:focus-within was also dead code — a milestone has no focusable
   children.)
*/

.pillars { display: grid; grid-template-columns: 1fr; gap: 2px; background: var(--sand-200); border: 1px solid var(--sand-200); border-radius: var(--r-xl); overflow: hidden; }
.pillar { background: var(--white); padding: clamp(26px, 3vw, 38px); }
.pillar-ico { width: 34px; height: 34px; margin-bottom: 18px; }
.pillar h3 { font-size: 1.16rem; margin-bottom: .5em; }
.pillar p { color: var(--slate); font-size: .96rem; margin: 0; line-height: 1.65; }

/* Comparison — deliberately not a <table>: it stacks cleanly at 375px with no
   inner horizontal scroll, and each row stays a readable pair. */
.compare {
  margin-top: clamp(34px, 4vw, 52px);
  border: 1px solid var(--sand-200); border-radius: var(--r-xl);
  overflow: hidden; background: var(--white);
}
.compare-head {
  display: none;
  background: var(--navy);
}
.compare-head span {
  padding: 14px 24px; font-size: .715rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--seafoam);
}
.compare-head span + span { color: var(--white); }
.compare-row { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--sand-200); }
.compare-row:first-of-type { border-top: 0; }
.compare-cell { position: relative; padding: 18px 24px; }
.compare-cell .compare-tag {
  display: block; font-size: .66rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; margin-bottom: 7px;
}
.compare-usual { background: var(--sand); color: var(--slate); }
.compare-usual .compare-tag { color: var(--slate); }
.compare-ours { background: var(--white); color: var(--navy); }
.compare-ours .compare-tag { color: var(--teal-700); }
.compare-cell p { margin: 0; font-size: .93rem; line-height: 1.55; }
.compare-ours p { font-weight: 500; }
.compare-foot { padding: 16px 24px; background: var(--sand-050); border-top: 1px solid var(--sand-200); }
.compare-foot p { margin: 0; font-size: .82rem; color: var(--slate); line-height: 1.55; }

/* ----------------------------------------- 15. partners + bureau band ---- */

.navy-canvas {
  border-radius: var(--r-xl);
  padding: clamp(34px, 5vw, 72px) clamp(24px, 4vw, 60px);
  background:
    radial-gradient(85% 110% at 6% 0%, rgba(23,126,123,.34) 0%, rgba(23,126,123,0) 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-950) 100%);
  color: var(--seafoam);
  box-shadow: var(--shadow-navy);
  position: relative; overflow: hidden;
}
.navy-canvas .label { color: var(--seafoam); }
.navy-canvas .label::before { background: linear-gradient(90deg, var(--seafoam), var(--teal-300)); }
.navy-canvas h2 { color: var(--white); }
.navy-canvas .section-intro { color: var(--seafoam); opacity: .92; }
.navy-canvas .fineprint { color: var(--seafoam); opacity: .8; }
.navy-canvas strong { color: var(--white); }
.navy-canvas a { color: var(--seafoam); }

.partner-grid { display: grid; grid-template-columns: 1fr; gap: clamp(30px, 4vw, 52px); align-items: start; }

.ticks { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 16px; }
.ticks li { position: relative; padding-left: 34px; font-size: .96rem; line-height: 1.6; color: var(--seafoam); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .18em;
  width: 21px; height: 21px; border-radius: 50%;
  background: rgba(191, 227, 218, .14);
  border: 1px solid rgba(191, 227, 218, .32);
}
.ticks li::after {
  content: ""; position: absolute; left: 6.5px; top: .62em;
  width: 8px; height: 4.5px;
  border-left: 2px solid var(--seafoam);
  border-bottom: 2px solid var(--seafoam);
  transform: rotate(-45deg);
}

/* Tri-bureau status band — the wave motif as a data graphic. Illustrative. */
.bureaus {
  margin: 28px 0 12px; border-radius: var(--r-md);
  border: 1px solid rgba(191, 227, 218, .18);
  background: rgba(8, 23, 36, .32);
  overflow: hidden;
}
.bureaus-head {
  padding: 11px 18px; font-size: .66rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--seafoam);
  background: rgba(191, 227, 218, .09);
  border-bottom: 1px solid rgba(191, 227, 218, .14);
}
.bureau-row {
  display: grid; grid-template-columns: 96px 1fr auto; align-items: center;
  gap: 14px; padding: 12px 18px;
  border-bottom: 1px solid rgba(191, 227, 218, .10);
  font-size: .84rem; color: var(--seafoam);
}
.bureau-row:last-child { border-bottom: 0; }
.bureau-bar { height: 7px; border-radius: 999px; background: rgba(191, 227, 218, .14); overflow: hidden; }
.bureau-fill { display: block; height: 100%; border-radius: 999px; transform-origin: left; }
.bureau-row:nth-child(2) .bureau-fill { background: linear-gradient(90deg, var(--seafoam), var(--teal-300)); }
.bureau-row:nth-child(3) .bureau-fill { background: linear-gradient(90deg, var(--teal-300), var(--teal-400)); }
.bureau-row:nth-child(4) .bureau-fill { background: linear-gradient(90deg, var(--teal-400), var(--seafoam)); }
.js-anim .bureau-fill { transform: scaleX(0); }
.js-anim .bureaus.is-in .bureau-fill { transition: transform 1.1s var(--ease); transform: scaleX(1); }
.js-anim .bureaus.is-in .bureau-row:nth-child(3) .bureau-fill { transition-delay: .16s; }
.js-anim .bureaus.is-in .bureau-row:nth-child(4) .bureau-fill { transition-delay: .32s; }
.bureau-state { font-size: .74rem; font-weight: 600; color: var(--white); white-space: nowrap; }
.bureaus-note { font-size: .78rem; color: var(--seafoam); opacity: .75; margin: 10px 0 0; line-height: 1.55; }

/* ------------------------------------------------------------- 16. forms - */

.start-grid { display: grid; grid-template-columns: 1fr; gap: clamp(30px, 4vw, 52px); align-items: start; }

.magnet-copy p { color: var(--slate); }
.magnet-copy .magnet-link { font-weight: 600; }

.guide-teaser {
  margin: 26px 0 0; padding: 22px 24px;
  border-radius: var(--r-lg); border: 1px solid var(--sand-200);
  background: linear-gradient(150deg, var(--white), var(--seafoam-050));
  box-shadow: var(--shadow-sm);
}
.guide-teaser h3 { margin-bottom: .5em; }
.guide-teaser ul { margin: 0; padding-left: 1.15em; }
.guide-teaser li { font-size: .91rem; color: var(--slate); margin-bottom: .4em; }
.guide-teaser li:last-child { margin-bottom: 0; }

.form-card {
  background: var(--white);
  border: 1px solid var(--sand-200);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(24px, 3vw, 34px);
  color: var(--navy);
}
.navy-canvas .form-card .fineprint { color: var(--slate); opacity: 1; }
.navy-canvas .form-card strong { color: var(--navy); }
.navy-canvas .form-card a { color: var(--teal-700); }
.form-card h3 { font-size: 1.18rem; margin-bottom: .3em; }
.form-card .form-sub { font-size: .89rem; color: var(--slate); margin-bottom: 1.6em; }

.field { margin: 0 0 16px; }
.field label { display: block; font-size: .845rem; font-weight: 600; color: var(--navy); margin-bottom: 7px; }

.field input, .field select {
  width: 100%; font-family: var(--sans); font-size: 1rem;
  color: var(--navy); background: var(--sand-050);
  border: 1px solid var(--sand-300); border-radius: var(--r-sm);
  padding: 13px 14px; line-height: 1.4;
  transition: border-color .18s, box-shadow .18s, background-color .18s;
}
.field input::placeholder { color: var(--slate); }
.field input:hover, .field select:hover { border-color: var(--seafoam-400); }
.field input:focus, .field select:focus {
  background: var(--white);
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(23, 126, 123, .22);
}
/* Keyboard focus keeps the global ring on top of the field's own glow. */
.field input:focus-visible, .field select:focus-visible {
  box-shadow: 0 0 0 6px rgba(8, 23, 36, .5);
}

/* Selects get an explicit chevron so they never read as plain text inputs.
   This matters most on the state field, which drives the geo-screen — a user
   who does not realise it is a dropdown never sees the screening notice. */
.field select {
  appearance: none; -webkit-appearance: none;
  padding-right: 40px;
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2314314B' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.field-row { display: grid; grid-template-columns: 1fr; gap: 0 16px; }

.lead-form .btn { margin-top: 8px; }

.form-status {
  margin: 16px 0 0; font-size: .9rem; font-weight: 500;
  color: var(--navy); padding: 14px 16px;
  background: var(--sand); border-left: 3px solid var(--slate);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; line-height: 1.55;
}
.form-status:empty { display: none; }

/* geo-screen notice: shown inline before submission, never silent */
.geo-notice {
  margin: -2px 0 18px; padding: 17px 18px;
  border-radius: var(--r-md); font-size: .9rem; line-height: 1.58;
  background: var(--seafoam-050); border: 1px solid var(--seafoam);
  border-left: 4px solid var(--teal);
  color: var(--navy);
}
.geo-notice[hidden] { display: none; }
/* Colour stated explicitly: this notice sits inside a navy canvas whose
   `strong { color: white }` rule would otherwise render this headline
   white-on-pale. That headline names the state and the reason, so losing it
   defeats the entire point of screening visibly. */
.geo-notice strong { display: block; margin-bottom: 5px; color: var(--navy) !important; font-size: .97rem; }
.geo-notice p { margin: 0 0 .7em; color: var(--slate); }
.geo-notice p:last-child { margin-bottom: 0; }
.geo-notice a { color: var(--teal-700); }
.geo-notice.is-closed { background: var(--sand); border-color: var(--sand-300); border-left-color: var(--slate); }

/* --------------------------------------------------------------- 17. faq - */

.faq { margin-top: clamp(26px, 3vw, 40px); border-top: 1px solid var(--sand-300); }
.faq-item { border-bottom: 1px solid var(--sand-300); }
.faq-item > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 22px 4px; font-weight: 600; font-size: 1.04rem; color: var(--navy);
  transition: color .2s;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { color: var(--teal-800); }
.faq-item > summary::after {
  content: ""; flex: none; width: 12px; height: 12px; margin-top: .45em;
  border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: rotate(45deg); transform-origin: 60% 60%;
  transition: transform .3s var(--ease);
}
.faq-item[open] > summary::after { transform: rotate(225deg); }
.faq-answer { padding: 0 4px 24px; max-width: 68ch; }
.faq-answer p { color: var(--slate); font-size: .96rem; }
.faq-item[open] .faq-answer { animation: faqIn .35s var(--ease-out); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ 18. footer - */

.site-footer {
  background:
    radial-gradient(70% 90% at 88% 0%, rgba(23,126,123,.22) 0%, rgba(23,126,123,0) 62%),
    linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 100%);
  color: var(--seafoam);
  padding: 0 0 44px;
  font-size: .95rem;
  position: relative; overflow: hidden;
}
.site-footer > .wrap { padding-top: clamp(40px, 5vw, 64px); }
.site-footer .band-rule { opacity: .85; }
.site-footer a { color: var(--seafoam); text-decoration: underline; }
.site-footer a:hover { color: var(--white); }

.footer-top { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; margin-bottom: 40px; }
.footer-brand .tagline {
  margin: 18px 0 0; color: var(--seafoam); opacity: .78;
  font-family: var(--serif); font-size: 1.2rem; font-style: italic;
}
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-links a { text-decoration: none; font-size: .93rem; opacity: .88; }
.footer-links a:hover { text-decoration: underline; opacity: 1; }
.footer-links-title {
  font-size: .68rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--seafoam); opacity: .82; margin: 0 0 14px;
}

.disclosures {
  border-top: 1px solid rgba(191, 227, 218, .2);
  padding: 34px 0 0; margin-bottom: 30px;
}
.disclosure-title { font-family: var(--serif); font-weight: 600; font-size: 1.75rem; color: var(--white); margin-bottom: .45em; }

/* The required disclosure is set at full body size, in white, at the top of
   the block. It is a trust signal, not fine print, and it is styled that way
   on purpose. */
.disclosure-lead {
  color: var(--white); font-size: 1.04rem; line-height: 1.62;
  max-width: 74ch;
  padding: 18px 22px; border-radius: var(--r-md);
  background: rgba(191, 227, 218, .09);
  border-left: 3px solid var(--seafoam);
}
.disclosure-after { color: var(--seafoam); max-width: 78ch; margin-top: 24px; line-height: 1.62; }

.disclosure-list {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 18px;
}
.disclosure-list li {
  padding-left: 18px; border-left: 2px solid var(--teal-500);
  line-height: 1.62; max-width: 78ch; color: var(--seafoam);
  font-size: .93rem;
}
.disclosure-list strong { color: var(--white); }

.footer-meta { color: var(--seafoam); opacity: .72; border-top: 1px solid rgba(191, 227, 218, .16); padding-top: 26px; }
.legal-line { font-size: .84rem; line-height: 1.62; max-width: 92ch; margin-bottom: .8em; }

/* -------------------------------------------------------- 19. responsive - */
/* Mobile-first above. Verified at 375 / 768 / 1280. */

@media (min-width: 560px) {
  .field-row { grid-template-columns: 1fr 1fr; }
  .assurances { grid-template-columns: 1fr 1fr; }
  .price-points { grid-template-columns: 1fr 1fr; }
  .compare-row { grid-template-columns: 1fr 1fr; }
  .compare-head { display: grid; grid-template-columns: 1fr 1fr; }
  .compare-cell + .compare-cell { border-left: 1px solid var(--sand-200); }
  /* Hidden from the eye, kept for the ear. The column heads carry the labels
     visually up here, but they are two <span>s in a separate block — nothing
     ties a cell to its heading for a screen reader. display:none would delete
     that association entirely, so the per-cell tag goes visually-hidden
     instead and every cell still announces which column it belongs to. */
  .compare-cell .compare-tag {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .compare-head + .compare-row { border-top: 0; }
}

@media (min-width: 760px) {
  .pillars { grid-template-columns: 1fr 1fr; }
  .disclosure-list { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
  .statement-grid { grid-template-columns: 1.35fr .65fr; }
  .stat-list { gap: 14px; }
}

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .hero-grid { grid-template-columns: 1.32fr .68fr; }
  .start-grid { grid-template-columns: 1.05fr .95fr; }
  .partner-grid { grid-template-columns: 1.08fr .92fr; }
  .price-lockup { grid-template-columns: .8fr 1.2fr; }
  .assurances { grid-template-columns: repeat(4, 1fr); }

  /* Phase rail goes horizontal: three columns, connector runs left-to-right. */
  .rail { grid-template-columns: repeat(3, 1fr); gap: 0 28px; }
  .rail-item { grid-template-columns: 1fr; gap: 0; }
  .rail-connect {
    left: 52px; right: -28px; top: 19px; bottom: auto;
    width: auto; height: 2px;
    background: linear-gradient(90deg, var(--seafoam-400), var(--teal-300));
    transform-origin: left;
  }
  .rail-item:nth-child(2) .rail-connect { background: linear-gradient(90deg, var(--teal-500), var(--navy-600)); }
  .js-anim .rail-connect { transform: scaleX(0); }
  .js-anim .rail-item.is-in .rail-connect { transform: scaleX(1); }
  .rail-item:last-child .rail-connect { display: none; }
  /* Cards stretch so the billing pill lines up across all three columns
     however unequal the body copy is. */
  .rail-card { padding: 0; display: flex; flex-direction: column; height: 100%; }
  .rail-card .rail-bill { margin-top: auto; align-self: flex-start; }
  .rail-when { margin-top: 22px; }
}

@media (min-width: 1080px) {
  .price-points { grid-template-columns: repeat(4, 1fr); }
  .milestones, .milestone-stack { gap: 18px; }
}

/* Mobile navigation: collapsed by default, toggled open by script.js.
   Above 900px the nav is always visible and the toggle is hidden. */
@media (max-width: 899px) {
  .header-inner { flex-wrap: wrap; }
  .site-nav {
    flex-basis: 100%;
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .32s var(--ease);
    overflow: hidden;
  }
  /* grid-template-rows: 0fr + overflow:hidden CLIPS the panel; it does not
     remove it. Closed, all six links were still 343x53, still tabbable, still
     read out by screen readers after the menu announced itself collapsed —
     and Tab moved focus to a link whose focus ring was clipped off-screen
     (WCAG 2.4.3 and 2.4.7). visibility:hidden takes them out of the tab order
     and out of the a11y tree. It is delayed by exactly the collapse duration
     on close, so the height animation is unaffected, and applied instantly on
     open so the links are focusable as soon as the panel starts moving. */
  .site-nav > ul {
    overflow: hidden; min-height: 0;
    visibility: hidden;
    transition: visibility 0s linear .32s;
  }
  .site-nav.is-open { grid-template-rows: 1fr; }
  .site-nav.is-open > ul { visibility: visible; transition-delay: 0s; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 18px; }
  .site-nav li { border-top: 1px solid var(--sand-300); }
  .site-nav li:first-child { border-top: 0; }
  .site-nav a { display: block; padding: 14px 4px; border-radius: var(--r-sm); }
  .nav-cta { text-align: center; margin: 14px 0 0 !important; padding: 14px 20px !important; }
  /* No JS: the collapsed grid row would hide the nav permanently, so keep it
     open — and visible, or the links would be unreachable. */
  html:not(.js) .site-nav { grid-template-rows: 1fr; }
  html:not(.js) .site-nav > ul { visibility: visible; transition: none; }
  html:not(.js) .nav-toggle { display: none; }
}

@media (max-width: 420px) {
  :root { --gutter: 16px; --r-xl: 20px; }
  body { font-size: 16px; }
  .hero-actions .btn { width: 100%; }
  .hero-mark { width: 150%; right: -40%; top: -8%; opacity: .14; }
  .logo .hf-mark { width: 38px; }
  .logo-name { font-size: 1.42rem; }
  .logo-sub { font-size: .46rem; letter-spacing: .26em; }
  .bureau-row { grid-template-columns: 78px 1fr; row-gap: 8px; }
  .bureau-state { grid-column: 2; text-align: right; }
}

/* ------------------------------------------------------------- 20. print - */

@media print {
  /* #questions, not .faq: partner-one-pager.html reuses the class name .faq
     for its own printed <dl>, and hiding by class here blanked the whole back
     page of the handout. Targeting the landing page's section by id also drops
     its heading, which would otherwise print above no answers. */
  .site-header, .hero-actions, .nav-toggle, .form-card, #questions, .band-rule { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; overflow: visible; }
  .hero-canvas, .statement, .navy-canvas, .site-footer {
    background: #fff !important; color: #000 !important; box-shadow: none;
    border: 1px solid #999;
  }
  .hero h1, .navy-canvas h2, .statement-quote, .disclosure-title,
  .disclosure-lead, .disclosure-list li, .disclosure-list strong,
  .hero-lede, .statement-body, .ticks li, .glance dt, .glance dd { color: #000 !important; }
  .site-footer a, .disclosure-lead { color: #000 !important; }
  .disclosure-lead { background: #f2f2f2; }
  .logo--reversed .logo-name, .logo--reversed .logo-sub { color: #000 !important; }
  .logo--reversed { --hf-1: #666; --hf-2: #333; --hf-3: #000; --hf-a: #666; }
  .section { padding: 18pt 0; }
}