/* Outfit, self-hosted: one variable woff2 covering 400-800, same origin as the page.
   Replaces two render-blocking round trips to fonts.googleapis.com and fonts.gstatic.com. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --cobalt: #2B4CF0;
    --cobalt-dark: #1B34C4;
    --cobalt-tint: #EEF1FE;
    --cream: #FBF7EF;
    --cream-deep: #F2ECDD;
    --ink: #1C1D1F;
    --ink-soft: #55575E;
    --white: #FFFFFF;
    --border: #E4DBC4;        /* decorative hairline only - 1.29:1 on cream */
    --border-strong: #988C6E; /* operable control boundary - 3.33:1 on white, 3.11:1 on cream (WCAG 1.4.11) */
    --radius-sm: 12px;
    --radius-md: 14px;
    --radius-lg: 16px;
    --shadow-1: 0 12px 28px -14px rgba(28, 29, 31, 0.20);
    --shadow-2: 0 24px 48px -20px rgba(28, 29, 31, 0.24);
    --shadow-cobalt: 0 12px 28px -14px rgba(43, 76, 240, 0.28);
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-exp: cubic-bezier(0.22, 1, 0.36, 1);
    --nav-h: 72px;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  /* No scroll-behavior smooth: an in-flight smooth scroll wedges rendering in
     automated browsers (docs/MOTION-SPEC.md, Environment gotchas). */

  body {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--cream);
    color: var(--ink);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
  }
  a { text-decoration: none; color: inherit; }
  img { display: block; max-width: 100%; }
  button { font-family: inherit; cursor: pointer; }
  main { overflow-x: clip; }

  ::selection { background: var(--cobalt); color: var(--white); }

  .wrap {
    max-width: 1360px;
    margin: 0 auto;
    padding-left: 48px;
    padding-right: 48px;
  }

  h1, h2, h3 { letter-spacing: -0.02em; font-weight: 700; }

  section[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }

  .skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--cobalt);
    color: var(--white);
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    z-index: 1000;
    font-weight: 600;
  }
  .skip-link:focus { left: 12px; top: 12px; }

  /* ---------- Scroll progress ---------- */
  .progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--cobalt);
    transform-origin: 0 50%;
    transform: scaleX(0);
    z-index: 300;
    pointer-events: none;
  }

  /* ---------- Cursor halo (fine pointers only) ---------- */
  .cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border: 1.5px solid var(--cobalt);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    z-index: 400;
    transition: opacity 300ms var(--ease), scale 350ms var(--ease-exp);
    scale: 1;
  }
  .cursor-ring.on { opacity: 0.45; }
  .cursor-ring.grow { scale: 1.7; opacity: 0.7; }
  @media (pointer: coarse) { .cursor-ring { display: none; } }

  /* ---------- Draft ribbon ---------- */
  .draft-ribbon {
    position: fixed;
    top: 84px;
    right: 14px;
    z-index: 250;
    background: #FBEEDC;
    border: 1px solid rgba(217, 119, 6, 0.35);
    color: #92400E;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 5px 11px;
    border-radius: 999px;
    max-width: 230px;
    line-height: 1.35;
    text-align: right;
    pointer-events: none;
  }
  @media (max-width: 640px) {
    .draft-ribbon { font-size: 9.5px; max-width: 150px; padding: 4px 9px; top: 78px; right: 8px; }
  }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    font-family: inherit;
    font-weight: 600;
    font-size: 15px;
    padding: 14px 26px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    position: relative;
    transition: background 150ms var(--ease), color 150ms var(--ease), box-shadow 300ms var(--ease);
    will-change: transform;
  }
  .btn-primary {
    background: var(--cobalt);
    color: var(--white);
  }
  .btn-primary:hover { background: var(--cobalt-dark); box-shadow: var(--shadow-cobalt); }
  .btn-primary:active { transform: translateY(1px); }

  .btn-invert {
    background: var(--white);
    color: var(--cobalt-dark);
  }
  .btn-invert:hover { background: var(--cream-deep); }
  .btn-invert:active { transform: translateY(1px); }

  .btn:focus-visible, a:focus-visible, [role="button"]:focus-visible {
    outline: 2px solid var(--cobalt);
    outline-offset: 3px;
  }
  input:focus-visible { outline: none; }

  .call-link {
    font-weight: 600;
    font-size: 15px;
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 150ms var(--ease);
  }
  .call-link span { color: var(--ink); font-weight: 700; }
  .call-link:hover { color: var(--ink); }
  .call-link.on-cobalt { color: rgba(255,255,255,0.82); }
  .call-link.on-cobalt span { color: var(--white); }
  .call-link.on-cobalt:hover { color: var(--white); }

  /* ---------- Nav ---------- */
  .site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--cream);
    border-bottom: 1px solid transparent;
    transition: transform 450ms var(--ease-exp), border-color 300ms var(--ease);
  }
  .site-nav.scrolled { border-bottom-color: var(--border); }
  .site-nav.hidden-up { transform: translateY(-100%); }
  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-h);
  }
  .wordmark {
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
  }
  .wordmark i {
    font-style: normal;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cobalt);
    display: inline-block;
    transform: translateY(-1px);
  }
  .nav-links {
    display: flex;
    gap: 36px;
    font-weight: 500;
    font-size: 15px;
    color: var(--ink-soft);
  }
  .nav-links a {
    position: relative;
    transition: color 150ms var(--ease);
    padding: 4px 0;
  }
  .nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.5px;
    background: var(--cobalt);
    transform: scaleX(0);
    transform-origin: 100% 50%;
    transition: transform 350ms var(--ease-exp);
  }
  .nav-links a:hover { color: var(--ink); }
  .nav-links a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
  .nav-right { display: flex; align-items: center; gap: 18px; }
  .hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 10px;
  }
  .hamburger span {
    width: 22px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 300ms var(--ease-exp), opacity 200ms var(--ease);
  }
  .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hamburger.open span:nth-child(2) { opacity: 0; }
  .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    padding: calc(var(--nav-h) + 44px) 28px 40px;
    background: var(--cream);
    z-index: 150;
    flex-direction: column;
    gap: 8px;
  }
  .mobile-menu.open { display: flex; }
  .mobile-menu a {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.02em;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }
  .mobile-menu a.btn {
    font-size: 17px;
    border-bottom: none;
    margin-top: 28px;
    align-self: flex-start;
    padding: 16px 30px;
  }

  /* ---------- Hero: cinematic center over connection field ---------- */
  .hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: calc(var(--nav-h) + 40px) 24px 110px;
    isolation: isolate;
  }
  .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(560px 380px at 18% 22%, rgba(43, 76, 240, 0.055), transparent 70%),
      radial-gradient(640px 420px at 84% 74%, rgba(43, 76, 240, 0.05), transparent 70%);
  }
  #net {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
  }
  .hero-inner { position: relative; z-index: 1; max-width: 1150px; }
  .hero h1 {
    font-size: clamp(44px, 7.4vw, 104px);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -0.03em;
    margin-bottom: 26px;
  }
  .hero h1 .accent { color: var(--cobalt); }
  .mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 0.13em;
    margin-bottom: -0.13em;
  }
  .mask .w { display: inline-block; will-change: transform; }
  .hero-sub {
    font-size: clamp(16px, 1.6vw, 19px);
    color: var(--ink-soft);
    max-width: 520px;
    margin: 0 auto 40px;
  }
  .hero-form-wrap { display: flex; flex-direction: column; align-items: center; }
  .lead-field-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    margin-bottom: 8px;
  }
  .form-note {
    font-size: 13px;
    font-weight: 500;
    color: var(--cobalt-dark);
    margin-top: 12px;
    min-height: 18px;
    opacity: 0;
    transition: opacity 250ms var(--ease);
  }
  .form-note.show { opacity: 1; }
  .hero-aux { margin-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .consent-line {
    font-size: 12px;
    color: var(--ink-soft);
    max-width: 460px;
    line-height: 1.55;
  }
  .scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 1;
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
  }
  .scroll-cue i {
    display: block;
    width: 1.5px;
    height: 44px;
    background: var(--border);
    position: relative;
    overflow: hidden;
  }
  .scroll-cue i::after {
    content: '';
    position: absolute;
    left: 0;
    top: -100%;
    width: 100%;
    height: 100%;
    background: var(--cobalt);
    animation: cue 1.8s var(--ease) infinite;
  }
  @keyframes cue {
    0% { top: -100%; }
    55% { top: 0; }
    100% { top: 100%; }
  }

  /* ---------- Promise marquee ---------- */
  .marquee {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 26px 0;
    overflow: hidden;
  }
  .marquee-track {
    display: flex;
    width: max-content;
    animation: mq 34s linear infinite;
  }
  .marquee:hover .marquee-track { animation-play-state: paused; }
  .marquee-set { display: flex; align-items: center; }
  .marquee-set span {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
    white-space: nowrap;
    margin-right: 26px;
  }
  .marquee-set i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cobalt);
    display: inline-block;
    margin-right: 26px;
    flex: none;
  }
  @keyframes mq { to { transform: translateX(-50%); } }

  /* ---------- Provider wall ---------- */
  .provider-wall { padding: 120px 0; }
  .provider-wall h2 {
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 700;
    margin-bottom: 34px;
    max-width: 560px;
  }
  .provider-tiles { display: flex; gap: 18px; flex-wrap: wrap; }
  .provider-tile {
    flex: 1 1 160px;
    min-width: 140px;
    height: 88px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: var(--ink-soft);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    transition: transform 350ms var(--ease-exp), border-color 350ms var(--ease), letter-spacing 350ms var(--ease), box-shadow 350ms var(--ease);
  }
  .provider-tile:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--cobalt) 40%, var(--border));
    letter-spacing: 0.09em;
    box-shadow: var(--shadow-1);
  }
  .provider-note { margin-top: 22px; font-size: 13.5px; color: var(--ink-soft); }

  /* ---------- Who: horizontal accordion ---------- */
  .who { padding: 40px 0 150px; }
  .who-head { max-width: 640px; margin-bottom: 52px; }
  .who-head h2 { font-size: clamp(30px, 3.4vw, 42px); margin-bottom: 14px; }
  .who-head p { color: var(--ink-soft); font-size: 16.5px; max-width: 520px; }
  .acc { display: flex; gap: 14px; height: 540px; }
  .acc-panel {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    flex: 1 1 0;
    box-shadow: var(--shadow-1);
    cursor: pointer;
    transition: flex-grow 900ms var(--ease-exp);
  }
  .acc-panel.active { flex-grow: 2.8; }
  .acc-panel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(65%) contrast(1.03);
    transform: scale(1.06);
    transition: filter 900ms var(--ease), transform 1200ms var(--ease-exp);
  }
  .acc-panel.active img { filter: grayscale(0%); transform: scale(1); }
  .acc-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(28,29,31,0) 38%, rgba(28,29,31,0.76) 100%);
  }
  .acc-copy {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 26px;
    color: var(--white);
  }
  .acc-copy h3 { font-size: 21px; margin-bottom: 8px; white-space: nowrap; }
  .acc-copy p {
    color: rgba(255,255,255,0.88);
    font-size: 14.5px;
    max-width: 360px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 450ms var(--ease) 180ms, transform 450ms var(--ease) 180ms;
  }
  .acc-panel.active .acc-copy p { opacity: 1; transform: translateY(0); }

  /* ---------- Manifesto: ink band, scrubbed words ---------- */
  .manifesto {
    background: var(--ink);
    color: var(--cream);
    padding: 170px 0;
  }
  .manifesto .rule {
    width: 56px;
    height: 3px;
    background: var(--cobalt);
    margin-bottom: 44px;
  }
  .manifesto p {
    font-size: clamp(27px, 4.3vw, 60px);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.02em;
    max-width: 1150px;
  }
  .manifesto p .mw { display: inline-block; }

  /* ---------- Steps: sticky number rail ---------- */
  .steps { padding: 150px 0 90px; }
  .steps-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 72px;
    align-items: start;
  }
  .steps-left { position: sticky; top: 22vh; }
  .step-big {
    font-size: clamp(120px, 15vw, 210px);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: transparent;
    -webkit-text-stroke: 2px var(--cobalt);
    margin-bottom: 26px;
    display: inline-block;
  }
  @supports not (-webkit-text-stroke: 2px black) {
    .step-big { color: var(--cobalt); }
  }
  .steps-left h2 { font-size: clamp(30px, 3.2vw, 40px); margin-bottom: 14px; max-width: 380px; }
  .steps-left > p { color: var(--ink-soft); font-size: 16.5px; max-width: 400px; }
  .step {
    min-height: 54vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-top: 1px solid var(--border);
    padding: 40px 0;
  }
  .step:first-child { border-top: none; }
  .step h3 { font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 14px; max-width: 460px; }
  .step p { color: var(--ink-soft); font-size: 16.5px; max-width: 460px; }

  /* ---------- Why: hairline grid ---------- */
  .why { padding: 90px 0 150px; }
  .why-head { max-width: 560px; margin-bottom: 56px; }
  .why-head h2 { font-size: clamp(30px, 3.4vw, 42px); }
  .why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
  }
  .why-item {
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    padding: 44px 46px;
    transition: background 400ms var(--ease);
  }
  .why-item:hover { background: var(--white); }
  .why-item h3 {
    font-size: 19px;
    margin-bottom: 12px;
    display: inline-block;
    position: relative;
  }
  .why-item h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    height: 2px;
    width: 100%;
    background: var(--cobalt);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 450ms var(--ease-exp);
  }
  .why-item:hover h3::after { transform: scaleX(1); }
  .why-item p { color: var(--ink-soft); font-size: 15.5px; max-width: 420px; }

  /* ---------- Company ---------- */
  .company { padding: 0 0 150px; }
  .company-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 72px;
    border-top: 1px solid var(--border);
    padding-top: 90px;
  }
  .eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cobalt-dark);
    margin-bottom: 18px;
  }
  .company-left h2 { font-size: clamp(28px, 3vw, 38px); margin-bottom: 20px; max-width: 420px; }
  .company-left p { color: var(--ink-soft); font-size: 16px; max-width: 420px; }
  .founders { display: flex; flex-direction: column; gap: 30px; }
  .founder {
    padding-bottom: 30px;
    border-bottom: 1px solid var(--border);
    transition: padding-left 400ms var(--ease-exp);
  }
  .founder:hover { padding-left: 10px; }
  .founder:last-child { border-bottom: none; padding-bottom: 0; }
  .founder .name { font-weight: 700; font-size: 18px; margin-bottom: 4px; }
  .founder .role {
    font-size: 13px;
    font-weight: 600;
    color: var(--cobalt-dark);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
  }
  .founder p.bio { color: var(--ink-soft); font-size: 15px; max-width: 460px; }

  /* ---------- Final CTA band ---------- */
  .final {
    background: var(--cobalt);
    color: var(--white);
    padding: 130px 0 120px;
    position: relative;
    overflow: hidden;
  }
  .final::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(720px 480px at 85% 10%, rgba(255,255,255,0.09), transparent 70%);
    pointer-events: none;
  }
  .final .wrap { position: relative; }
  .final h2 {
    font-size: clamp(38px, 6vw, 88px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.03em;
    max-width: 900px;
    margin-bottom: 48px;
  }
  .final-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 44px;
    flex-wrap: wrap;
  }
  .final .form-note { color: var(--white); }
  .final-side { display: flex; flex-direction: column; gap: 14px; max-width: 420px; }
  .final .consent-line { color: rgba(255,255,255,0.82); }

  /* ---------- Footer ---------- */
  footer { padding: 52px 0 44px; border-top: 1px solid var(--border); }
  .footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 26px;
  }
  .footer-brand { font-weight: 700; font-size: 16px; }
  .footer-brand .sub {
    display: block;
    font-weight: 400;
    font-size: 13px;
    color: var(--ink-soft);
    margin-top: 4px;
  }
  .footer-links { display: flex; gap: 24px; font-size: 14px; color: var(--ink-soft); }
  .footer-links a { transition: color 150ms var(--ease); }
  .footer-links a:hover { color: var(--ink); }
  .footer-fine {
    font-size: 12px;
    color: var(--ink-soft);
    max-width: 720px;
    line-height: 1.6;
    border-top: 1px solid var(--border);
    padding-top: 20px;
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 900px) {
    .wrap { padding-left: 24px; padding-right: 24px; }
    .nav-links { display: none; }
    /* The call button STAYS on mobile. Hiding it behind the hamburger put two
       taps between a phone user and the only conversion path on the page. */
    .hamburger { display: flex; }

    .hero { padding-bottom: 90px; }
    .hero-sub { margin-bottom: 34px; }

    .provider-wall { padding: 84px 0; }
    .who { padding: 20px 0 100px; }
    .acc { flex-direction: column; height: auto; gap: 12px; }
    .acc-panel { height: 96px; flex: none; transition: height 700ms var(--ease-exp); }
    .acc-panel.active { height: 340px; flex-grow: 1; }
    .acc-copy { left: 20px; right: 20px; bottom: 18px; }
    .acc-copy h3 { font-size: 18px; }

    .manifesto { padding: 110px 0; }

    .steps { padding: 100px 0 60px; }
    .steps-grid { grid-template-columns: 1fr; gap: 24px; }
    .steps-left { position: static; }
    .step-big { display: none; }
    .step { min-height: 0; padding: 34px 0; }

    .why { padding: 60px 0 100px; }
    .why-grid { grid-template-columns: 1fr; }
    .why-item { padding: 30px 26px; }

    .company { padding-bottom: 100px; }
    .company-grid { grid-template-columns: 1fr; gap: 44px; padding-top: 64px; }

    .final { padding: 90px 0 84px; }
    .final-row { flex-direction: column; align-items: flex-start; }
  }

  @media (max-width: 480px) {
    .provider-tile { flex: 1 1 100px; height: 70px; font-size: 12px; }
    .mobile-menu a { font-size: 28px; }
  }

  /* ---------- Reduced motion (and the ?static=1 QA hatch) ---------- */
  @media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
    .scroll-cue i::after { animation: none; top: 0; }
    .cursor-ring { display: none; }
    *, *::before, *::after { transition-duration: 0.01ms !important; }
  }
  .qa-static .marquee-track { animation: none; }
  .qa-static .scroll-cue i::after { animation: none; top: 0; }
  .qa-static .cursor-ring { display: none; }
  .qa-static *, .qa-static *::before, .qa-static *::after { transition-duration: 0.01ms !important; }

  /* ===== v0.3 additions: partner band, trust strip, table, FAQ, lead form ===== */
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
           clip:rect(0,0,0,0);white-space:nowrap;border:0}

  .hero-cta-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center}

  /* Partner band: all supplied lockups are white/reversed, so this surface is ink. */
  .provider-wall{background:var(--ink);border-radius:var(--radius-lg);
                 padding:56px 0 52px;margin-top:56px}
  .provider-wall .pw-inner{padding:0 48px}
  .provider-wall h2{font-size:22px;font-weight:700;color:var(--white);margin-bottom:6px;max-width:620px}
  .provider-wall .pw-lede{font-size:14.5px;color:rgba(255,255,255,.66);max-width:620px;
                          line-height:1.55;margin-bottom:34px}

  .pw-lockup{margin-bottom:26px}
  .pw-lockup .pw-wm{display:block;font-size:34px;font-weight:800;letter-spacing:-.02em;
                    color:var(--white);line-height:1}
  .pw-lockup .pw-role{display:block;margin-top:10px;font-size:12px;font-weight:700;
                      letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.60)}
  .provider-logos{display:grid;grid-template-columns:repeat(6,1fr);gap:30px 28px;align-items:center}
  .provider-logos img{width:100%;max-width:190px;height:auto;opacity:.92}
  .provider-note{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16);
                 font-size:12.5px;color:rgba(255,255,255,.62);line-height:1.6;max-width:760px}

  .trust-strip{border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-top:56px}
  .trust-grid{display:grid;grid-template-columns:repeat(3,1fr)}
  .trust-item{padding:30px 30px 30px 0;border-right:1px solid var(--border)}
  .trust-item:last-child{border-right:none;padding-right:0}
  .trust-item:not(:first-child){padding-left:30px}
  .trust-item h3{font-size:17px;font-weight:700;margin-bottom:7px}
  .trust-item p{font-size:14.5px;color:var(--ink-soft);line-height:1.5}

  .who2{padding:96px 0 0}
  .who2-head{max-width:620px;margin-bottom:32px}
  .who2-head h2{font-size:34px;font-weight:700;margin-bottom:12px}
  .who2-head p{font-size:16px;color:var(--ink-soft);line-height:1.55}
  .tbl-wrap{max-width:820px;overflow-x:auto}
  .tbl{width:100%;min-width:560px;border-collapse:collapse;background:var(--white);
       border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
  .tbl th,.tbl td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--border);font-size:15.5px}
  .tbl thead th{background:var(--cream-deep);font-size:12.5px;font-weight:700;letter-spacing:.1em;
                text-transform:uppercase;color:var(--ink)}
  .tbl thead th:not(:first-child){text-align:center;width:132px}
  .tbl tbody td:not(:first-child){text-align:center}
  .tbl tbody tr:last-child td{border-bottom:none}
  .tbl tbody td:first-child{color:var(--ink-soft)}
  .tbl .vk{background:var(--cobalt-tint)}
  .tick{display:inline-block;width:15px;height:9px;border-left:2.5px solid var(--cobalt);
        border-bottom:2.5px solid var(--cobalt);transform:rotate(-45deg) translateY(-2px)}
  .dash{display:inline-block;width:14px;height:2px;background:var(--border)}
  .tbl-foot{margin-top:18px;font-size:14px;color:var(--ink-soft);line-height:1.6;max-width:64ch}
  .tbl-foot b{color:var(--ink);font-weight:600}

  .faq{padding:96px 0 0}
  .faq-head{max-width:640px;margin-bottom:40px}
  .faq-head h2{font-size:34px;font-weight:700;margin-bottom:12px}
  .faq-head p{color:var(--ink-soft);font-size:16px;line-height:1.5}
  .faq-list{border-top:1px solid var(--border);max-width:860px}
  .faq-item{border-bottom:1px solid var(--border)}
  .faq-item summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;font-size:18px;
                    font-weight:700;letter-spacing:-.01em;position:relative;
                    transition:color 150ms var(--ease)}
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item summary:hover{color:var(--cobalt-dark)}
  .faq-item summary:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:4px}
  .faq-item summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
        border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);
        transform:translateY(-70%) rotate(45deg);transition:transform 200ms var(--ease)}
  .faq-item[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
  .faq-item .faq-body{padding:0 40px 26px 0;max-width:62ch}
  .faq-item .faq-body p{font-size:15.5px;color:var(--ink-soft);line-height:1.6}
  .faq-item .faq-body p+p{margin-top:12px}

  .lead-form{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:16px}
  .lead-field{display:flex;flex-direction:column}
  .lead-field-label{display:block;font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:8px}
  .final .lead-field-label{color:rgba(255,255,255,.86)}
  .lead-form input{border:1px solid var(--border-strong);outline:none;background:var(--white);
                   padding:13px 16px;font-family:inherit;font-size:15px;width:178px;color:var(--ink);
                   border-radius:var(--radius-sm)}
  .lead-form input:focus{border-color:var(--cobalt);box-shadow:0 0 0 3px var(--cobalt-tint)}

  .why-more{margin-top:34px;font-size:15.5px;font-weight:600}
  .why-more a{color:var(--cobalt-dark);text-decoration:underline;text-underline-offset:3px}

  @media (max-width:900px){
    .provider-wall{padding:44px 0 40px}
    .provider-wall .pw-inner{padding:0 24px}
    .provider-logos{grid-template-columns:repeat(2,1fr);gap:26px 28px}
    .trust-grid{grid-template-columns:1fr}
    .trust-item{border-right:none;border-bottom:1px solid var(--border);padding:24px 0}
    .trust-item:last-child{border-bottom:none}
    .trust-item:not(:first-child){padding-left:0}
    .who2,.faq{padding:64px 0 0}
    .who2-head h2,.faq-head h2{font-size:28px}
    .tbl th,.tbl td{padding:12px;font-size:14px}
    .tbl thead th:not(:first-child){width:84px}
    .lead-form,.lead-field,.lead-form input,.lead-form .btn{width:100%}
  }

  

  /* ============================================================
     MOBILE-FIRST HARDENING (added 2026-09-07)
     Most traffic is phones and the primary action is a phone call,
     so the small screen is the one that has to be right.
     ============================================================ */

  /* Nothing may ever push the page sideways. */
  html, body { max-width: 100%; }
  img, svg, video, table { max-width: 100%; }

  /* ---------- Phones: up to 640px ---------- */
  @media (max-width: 640px) {

    /* The draft ribbon was sized for desktop and was dragging the whole
       page into horizontal scroll on a 375px screen. */
    .draft-ribbon {
      top: auto; bottom: 8px; right: 8px; left: 8px;
      max-width: none; text-align: center;
      font-size: 9.5px; padding: 5px 8px;
      opacity: .93;
    }

    /* The call button is the whole point of the page on a phone.
       It must never wrap, never shrink below a 44px tap target, and
       never be the thing that gets hidden. */
    .nav-inner { padding-left: 16px; padding-right: 16px; gap: 10px; }
    .wordmark { white-space: nowrap; font-size: 17px; }
    .nav-right .btn {
      white-space: nowrap;
      font-size: 13px;
      padding: 12px 14px;
      min-height: 44px;
      display: inline-flex; align-items: center;
      flex: none;
    }

    /* Comfortable reading measure and a calmer type scale. */
    .hero h1 { font-size: 31px; line-height: 1.12; }
    .who2-head h2, .faq-head h2, .steps-left h2, .why-head h2 { font-size: 25px; }

    /* Every tappable thing clears 44px. */
    a[href^="tel:"], button, summary, input { min-height: 44px; }
    summary { display: flex; align-items: center; }

    /* --------------------------------------------------------
       "Who does what" becomes a stack of cards instead of a
       table you have to drag sideways. Each row states its own
       two answers, so nothing depends on a header row far away.
       -------------------------------------------------------- */
    .tbl-wrap { overflow: visible; }
    .tbl, .tbl thead, .tbl tbody,
    .tbl tr, .tbl th, .tbl td { display: block; }
    .tbl { border: none; min-width: 0; background: none; }
    .tbl thead { display: none; }
    .tbl tbody tr {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 14px 16px;
      margin-bottom: 10px;
    }
    .tbl tbody td {
      border: none; padding: 0; text-align: left; font-size: 15px;
    }
    .tbl tbody td:first-child {
      font-weight: 700; color: var(--ink);
      padding-bottom: 10px; margin-bottom: 8px;
      border-bottom: 1px solid var(--border);
    }
    .tbl tbody td[data-label] {
      display: flex; align-items: center; justify-content: space-between;
      gap: 14px; padding: 5px 0; background: none;
    }
    .tbl tbody td[data-label]::before {
      content: attr(data-label);
      font-size: 12px; font-weight: 700; letter-spacing: .08em;
      text-transform: uppercase; color: var(--ink-soft);
    }

    /* Provider marks: two up is the most that stays legible. */
    .provider-logos { grid-template-columns: repeat(2, 1fr); gap: 22px 20px; }

    /* One field per line, full-width submit. */
    .lead-form { flex-direction: column; align-items: stretch; gap: 12px; }
    .lead-form > * { width: 100%; }
    .lead-form input { width: 100%; font-size: 16px; }  /* 16px stops iOS zooming on focus */
  }

  /* ---------- Small phones: up to 400px ---------- */
  @media (max-width: 400px) {
    .hero h1 { font-size: 28px; }
    .nav-right .btn { font-size: 12.5px; padding: 12px 11px; }
    .wordmark { font-size: 16px; }
  }

  /* ---------- Tablet: 641px to 1024px ----------
     Previously the layout jumped straight from one column to the full
     desktop grid, so an iPad got the phone layout stretched wide. */
  @media (min-width: 641px) and (max-width: 1024px) {
    .wrap { padding-left: 32px; padding-right: 32px; }
    .hero h1 { font-size: 40px; }
    .provider-logos { grid-template-columns: repeat(3, 1fr); gap: 24px 26px; }  /* 6 marks: 3 + 3 */
    .trust-grid { grid-template-columns: repeat(3, 1fr); }
    .acc { grid-template-columns: repeat(3, 1fr); }
    .why-grid { grid-template-columns: repeat(2, 1fr); }
  }

  /* ---------- Touch devices of any size ---------- */
  @media (hover: none) {
    .cursor-ring { display: none !important; }
    [data-magnet] { transform: none !important; }
  }

  
  /* ---------- Persistent call bar, phones only ----------
     A call-first site should not make a phone user hunt for the number, or
     scroll back up to the nav to find it. This sits in thumb reach for the
     whole page. It replaces the nav CTA below 640px rather than joining it,
     which is also what stopped the nav from overflowing at 375px. */
  .call-bar { display: none; }
  @media (max-width: 640px) {
    .call-bar {
      display: flex; align-items: center; justify-content: center; gap: 10px;
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
      background: var(--cobalt); color: #fff;
      font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
      text-decoration: none;
      padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 0px));
      box-shadow: 0 -8px 24px -12px rgba(0,0,0,.34);
      min-height: 56px;
    }
    .call-bar:active { filter: brightness(.94); }
    .call-bar-icon {
      width: 15px; height: 15px; flex: none; border-radius: 3px;
      background: rgba(255,255,255,.85); opacity: .9;
    }
    /* keep the footer clear of the bar */
    body { padding-bottom: 76px; }
    /* the bar is the call CTA now, so the nav one stands down */
    .nav-right .btn { display: none !important; }
    /* ribbon back to the top, out of the bar's way */
    .draft-ribbon {
      top: 66px; bottom: auto; left: auto; right: 8px;
      max-width: 148px; text-align: right;
      font-size: 9px; padding: 4px 8px; line-height: 1.3;
    }
  }


  /* ============================================================
     BRAND MARK in the nav (finalised 2026-09-06: cobalt outer, ink inner)
     Sized to sit level with the nav CTA: the button is ~50px tall, the mark
     is ~70% of that, and the wordmark steps up so the lockup reads as the
     button's equal rather than a caption beside it.
     ============================================================ */
  .wordmark { align-items: center; gap: 11px; font-size: 21px; line-height: 1; }
  .wordmark i { display: none; }
  .wordmark .mark {
    --s: 34px;
    width: var(--s); height: var(--s); flex: none; position: relative;
    background: var(--cobalt);
    border-radius: calc(var(--s) * 0.286);
  }
  .wordmark .mark::after {
    content: ''; position: absolute;
    top: 21.4%; left: 21.4%; width: 32.1%; height: 32.1%;
    background: var(--ink);
    border-radius: calc(var(--s) * 0.054);
  }
  @media (min-width: 641px) and (max-width: 1024px) {
    .wordmark { font-size: 20px; }
    .wordmark .mark { --s: 32px; }
  }
  @media (max-width: 640px) {
    .wordmark { font-size: 19px; gap: 10px; }
    .wordmark .mark { --s: 30px; }
  }
  @media (max-width: 400px) {
    .wordmark { font-size: 17.5px; gap: 9px; }
    .wordmark .mark { --s: 28px; }
  }

  /* ============================================================
     PAGE HERO for the shared pages (Why us, Privacy, Terms)
     Same connection field, same masked headline reveal as the home page,
     at a height that gets out of the way of the content below it.
     ============================================================ */
  .page-hero { min-height: auto; padding: calc(var(--nav-h) + 92px) 24px 84px; }
  .page-hero h1 { font-size: clamp(38px, 5.8vw, 78px); margin-bottom: 20px; }
  .page-hero .hero-sub { margin-bottom: 0; max-width: 620px; }
  .page-eyebrow {
    display: inline-block; margin-bottom: 20px;
    font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--cobalt-dark);
  }
  .page-hero.compact { padding-bottom: 56px; }
  @media (max-width: 640px) {
    .page-hero { padding: calc(var(--nav-h) + 56px) 20px 56px; }
  }


  /* ---------- Consent checkbox and honeypot ---------- */
  .lead-consent { flex-basis: 100%; margin-top: 4px; }
  .consent-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; max-width: 52ch; }
  .consent-check input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--white); cursor: pointer; }
  .consent-check span { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.9); }
  .consent-check input:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
  .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  /* Errors carry no second hue (design.md rule 2). They are an ink chip with bold white text and a "!"
     marker - 16.9:1 on any surface - and the field at fault gets a ring and focus. Success stays plain
     text, so the two differ by treatment, not colour. Was pale peach #FFD9C7 at 13px: 4.7:1 and easy to
     mistake for the success message (2026-09-21). */
  .form-note.is-error {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--white); background: var(--ink);
    font-size: 15px; font-weight: 600; line-height: 1.35;
    padding: 10px 14px 10px 10px; border-radius: 10px;
  }
  .form-note.is-error::before {
    content: "!"; flex: none; width: 22px; height: 22px; border-radius: 50%;
    background: var(--white); color: var(--ink); font-size: 14px; font-weight: 800;
    display: grid; place-items: center;
  }
  .lead-form [aria-invalid="true"] { outline: 3px solid var(--ink); outline-offset: 3px; }
  .final .lead-form [aria-invalid="true"] { outline-color: var(--white); }
  .consent-check.is-invalid { background: var(--ink); border-radius: 10px; padding: 10px 12px; margin: -10px -12px; }
  .consent-check.is-invalid span { color: var(--white); }