/* GENERATED by infra/spamcipher/build-assets.mjs. Do not edit. */
:root {
  /* ─── Brand ─── */
  --brand: #0D9668;
  --brand-rgb: 13, 150, 104;
  --brand-dark: #0A7B55;
  --brand-darker: #086B4A;
  --brand-light: #10B981;
  --brand-lighter: #34D399;
  /* Brand color usable as TEXT on light surfaces — meets WCAG AA (≈6.5:1 on white).
     --brand/--brand-light fail contrast as text; use this for brand-colored copy. */
  --brand-text: #086B4A;
  --brand-subtle: #E6F7F0;
  --brand-ghost: rgba(13, 150, 104, 0.08);

  /* ─── Hero ─── */
  --hero-from: #061E14;
  --hero-via: #0A2F1F;
  --hero-to: #0D4F35;

  /* ─── Surfaces ─── */
  --sf-0: #FFFFFF;
  --sf-1: #F9FAFB;
  --sf-2: #F3F4F6;
  --sf-3: #E5E7EB;
  --sf-dark: #0F1923;
  --sf-dark-2: #1A2632;
  --sf-dark-3: #243342;
  --sf-card: rgba(255, 255, 255, 1);

  /* ─── Text ─── */
  --tx: #111827;
  --tx-2: #4B5563;
  --tx-3: #6B7280; /* gray-500: ≈4.8:1 on white (was #9CA3AF = 2.6:1, failed WCAG AA) */
  --tx-4: #D1D5DB;
  --tx-on-dark: #F9FAFB;
  --tx-on-dark-2: rgba(249, 250, 251, 0.7);
  --tx-on-dark-3: rgba(249, 250, 251, 0.4);
  --tx-on-brand: #FFFFFF;
  --tx-link: var(--brand);

  /* ─── Borders ─── */
  --bd: #E5E7EB;
  --bd-light: #F3F4F6;
  --bd-strong: #D1D5DB;
  --bd-brand: rgba(13, 150, 104, 0.3);
  --bd-dark: rgba(255, 255, 255, 0.08);

  /* ─── Semantic ─── */
  --success: #10B981;
  --success-bg: #D1FAE5;
  --warn: #F59E0B;
  --warn-bg: #FEF3C7;
  --err: #EF4444;
  --err-bg: #FEE2E2;
  --info: #3B82F6;
  --info-bg: #DBEAFE;

  /* ─── Type ─── */
  --ff-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --ff-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --ff-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ─── Spacing ─── */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem;
  --s5: 1.25rem; --s6: 1.5rem; --s8: 2rem; --s10: 2.5rem;
  --s12: 3rem; --s16: 4rem; --s20: 5rem; --s24: 6rem; --s32: 8rem;

  /* ─── Radius ─── */
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px;
  --r-xl: 16px; --r-2xl: 20px; --r-full: 9999px;

  /* ─── Shadows ─── */
  --sh-xs: 0 1px 2px rgba(0,0,0,0.04);
  --sh-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --sh-md: 0 4px 6px -1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(0,0,0,0.04);
  --sh-lg: 0 10px 15px -3px rgba(0,0,0,0.07), 0 4px 6px -4px rgba(0,0,0,0.04);
  --sh-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
  --sh-2xl: 0 25px 50px -12px rgba(0,0,0,0.15);
  --sh-brand: 0 4px 14px rgba(13, 150, 104, 0.25);
  --sh-brand-lg: 0 8px 28px rgba(13, 150, 104, 0.3);
  --sh-card: 0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.02);
  --sh-card-hover: 0 8px 24px rgba(0,0,0,0.08), 0 0 0 1px rgba(13,150,104,0.1);
  --sh-glow: 0 0 40px rgba(13, 150, 104, 0.15);

  /* ─── Motion ─── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-normal: 250ms;
  --dur-slow: 400ms;

  /* ─── Layout ─── */
  --nav-h: 70px;
  --max-w: 1200px;
  --max-w-lg: 1400px;
}

/* ─── Dark ─── */
[data-theme="dark"] {
  --sf-0: #0F1923;
  --sf-1: #1A2632;
  --sf-2: #243342;
  --sf-3: #2E3E4F;
  --sf-card: rgba(26, 38, 50, 1);

  --tx: #F9FAFB;
  --tx-2: #D1D5DB;
  --tx-3: #9CA3AF;
  --tx-4: #6B7280;

  --bd: rgba(255,255,255,0.1);
  --bd-light: rgba(255,255,255,0.06);
  --bd-strong: rgba(255,255,255,0.15);

  --brand-subtle: rgba(13, 150, 104, 0.15);
  --brand-ghost: rgba(13, 150, 104, 0.1);
  --brand-text: #34D399; /* light green reads on dark surfaces (the #086B4A used in light mode would fail here) */

  --success-bg: rgba(16,185,129,0.15);
  --warn-bg: rgba(245,158,11,0.15);
  --err-bg: rgba(239,68,68,0.15);
  --info-bg: rgba(59,130,246,0.15);

  --sh-card: 0 1px 3px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.04);
  --sh-card-hover: 0 8px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(13,150,104,0.15);
  --sh-sm: 0 1px 3px rgba(0,0,0,0.3);
  --sh-md: 0 4px 6px rgba(0,0,0,0.25);
  --sh-lg: 0 10px 15px rgba(0,0,0,0.3);
}

    /* ============================== */
    /*           RESET                */
    /* ============================== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    body {
      font-family: var(--ff-body);
      color: var(--tx);
      background: var(--sf-0);
      line-height: 1.6;
      overflow-x: hidden;
    }
    a { text-decoration: none; color: inherit; }
    ul, ol { list-style: none; }
    img { max-width: 100%; display: block; }
    button { cursor: pointer; border: none; background: none; font-family: inherit; }
    input { font-family: inherit; }

    /* ============================== */
    /*           UTILITIES            */
    /* ============================== */
    .container {
      max-width: 1216px;
      margin: 0 auto;
      padding: 0 var(--s6);
    }
    .section-label {
      font-family: var(--ff-display);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--brand-text);
      margin-bottom: var(--s3);
    }
    .section-title {
      font-family: var(--ff-display);
      font-size: 2.25rem;
      font-weight: 300;
      color: var(--tx);
      letter-spacing: -0.01em;
      line-height: 1.15;
      margin-bottom: var(--s4);
    }
    .section-desc {
      font-size: 1.125rem;
      color: var(--tx-2);
      max-width: 560px;
      line-height: 1.7;
      font-weight: 300;
    }
    .section-header {
      text-align: center;
      margin-bottom: var(--s16);
    }
    .section-header .section-desc {
      margin: 0 auto;
    }

    /* ============================== */
    /*           BUTTONS              */
    /* ============================== */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--s2);
      font-family: var(--ff-display);
      font-weight: 700;
      font-size: 1.05rem;
      padding: 12px 28px;
      height: 46px;
      border-radius: 9999px;
      transition: all var(--dur-normal) var(--ease-out);
      white-space: nowrap;
    }
    .btn-primary {
      background: var(--brand-dark); /* white text needs ≥4.5:1; --brand-light gave ~2.9:1 */
      color: #fff;
      box-shadow: var(--sh-brand);
    }
    .btn-primary:hover {
      background: var(--brand-darker);
      box-shadow: var(--sh-brand-lg);
      transform: translateY(-1px);
    }
    .btn-ghost {
      background: transparent;
      color: var(--tx);
      border: 1.5px solid var(--bd-strong);
    }
    .btn-ghost:hover {
      border-color: var(--brand);
      color: var(--brand);
    }
    .btn-ghost-light {
      background: transparent;
      color: var(--tx-on-dark);
      border: 1.5px solid rgba(255,255,255,0.25);
    }
    .btn-ghost-light:hover {
      border-color: rgba(255,255,255,0.6);
      background: rgba(255,255,255,0.06);
    }
    .btn-lg {
      font-size: 1rem;
      padding: 14px 32px;
      height: 48px;
    }

    /* ============================== */
    /*           NAV                  */
    /* ============================== */
    .nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      height: 70px;
      display: flex;
      align-items: center;
      transition: background var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out), border-color var(--dur-normal) var(--ease-out);
      border-bottom: 1px solid transparent;
    }
    .nav.nav--solid {
      background: rgba(255,255,255,0.97);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom-color: var(--bd);
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }
    [data-theme="dark"] .nav.nav--solid {
      background: rgba(15,25,35,0.97);
    }
    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--s6);
      width: 100%;
      padding: 0 25px;
      position: relative;
    }
    .nav-logo {
      display: flex;
      align-items: center;
      gap: 0;
      font-family: var(--ff-display);
      font-weight: 700;
      font-size: 0.96rem;
      color: var(--tx-on-dark);
      transition: color var(--dur-normal);
      flex: 1 0 auto;
    }
    .nav-logo img {
      height: 48px;
      width: auto;
      margin-right: -5px;
    }
    .nav--solid .nav-logo { color: var(--tx); }
    .nav-links {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--s6);
      flex: 0 0 auto;
      white-space: nowrap;
    }
    .nav-links a {
      font-family: var(--ff-display);
      font-size: 1.05rem;
      font-weight: 500;
      color: var(--tx-on-dark-2);
      transition: color var(--dur-fast);
    }
    .nav-links a:hover { color: var(--tx-on-dark); }
    .nav--solid .nav-links a { color: var(--tx-2); }
    .nav--solid .nav-links a:hover { color: var(--tx); }
    .nav-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: var(--s3);
      flex: 1 0 auto;
      white-space: nowrap;
    }
    .nav--solid .nav-actions .btn-ghost-light {
      color: var(--tx);
      border-color: var(--bd-strong);
    }
    .nav--solid .nav-actions .btn-ghost-light:hover {
      border-color: var(--brand);
      color: var(--brand);
    }
    .dark-toggle {
      width: 36px;
      height: 36px;
      border-radius: 9999px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--tx-on-dark-2);
      transition: color var(--dur-fast), background var(--dur-fast);
      font-size: 1.125rem;
    }
    .dark-toggle:hover {
      background: rgba(255,255,255,0.1);
      color: var(--tx-on-dark);
    }
    .nav--solid .dark-toggle { color: var(--tx-3); }
    .nav--solid .dark-toggle:hover {
      background: var(--sf-2);
      color: var(--tx);
    }
    .nav-hamburger {
      display: none;
      width: 36px;
      height: 36px;
      align-items: center;
      justify-content: center;
      color: var(--tx-on-dark-2);
      border-radius: var(--r-md);
    }
    .nav--solid .nav-hamburger { color: var(--tx-2); }
    .nav-hamburger svg { width: 22px; height: 22px; }

    /* Mobile menu */
    .mobile-menu {
      display: none;
      position: fixed;
      top: 70px;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--sf-0);
      z-index: 999;
      padding: var(--s8) var(--s6);
      flex-direction: column;
      gap: var(--s2);
    }
    .mobile-menu.open { display: flex; }
    .mobile-menu a {
      font-family: var(--ff-display);
      font-size: 1.125rem;
      font-weight: 600;
      color: var(--tx);
      padding: var(--s4) 0;
      border-bottom: 1px solid var(--bd-light);
    }
    .mobile-menu-actions {
      display: flex;
      flex-direction: column;
      gap: var(--s3);
      margin-top: var(--s6);
    }
    .mobile-menu-actions .btn { width: 100%; justify-content: center; }

    /* ============================== */
    /*           HERO                 */
    /* ============================== */
    .hero {
      position: relative;
      background: linear-gradient(100deg, var(--hero-via) 0%, var(--hero-from) 100%);
      /* Fill the full viewport so the green hero (incl. the "Trusted…" line) is the
         whole first screen and the logo carousel stays BELOW the fold. */
      min-height: 100vh;
      padding: calc(70px + 10px) 0 24px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      /* The trust line used to sit at the bottom of this section and hold the height open. It now
         lives in the logo band, so without centring the block the hero ends with ~200px of dead
         green below the CTA. */
      justify-content: center;
    }
    /* On shorter viewports (e.g. a maximized window with browser chrome) scale the
       shield down so the hero + trust + carousel still fit without scrolling. */
    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
      background-size: 40px 40px;
      opacity: 0.4;
      pointer-events: none;
    }
    .hero-inner {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 1216px;
      margin: 0 auto;
      padding: 0 var(--s6);
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: clamp(14px, 3vh, 56px);
    }
    .hero-top {
      display: grid;
      /* Measured off the reference at 1440: its h1 is 686px wide against a 850px artwork, so the
         text column is the WIDER of the two. The artwork only looks contained because 280px of it
         is cropped off the viewport. */
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
      align-items: center;
      gap: var(--s8);
    }
    .hero-text {
      min-width: 0;
    }
    .hero-desc {
      font-size: 1.125rem;
      font-weight: 300;
      color: var(--tx-on-dark-2);
      max-width: 520px;
      line-height: 1.7;
      margin-bottom: var(--s8);
      animation: heroFadeUp 0.8s var(--ease-out) 0.3s both;
    }

    /* Verify card: mobile-only chrome (ZeroBounce-style hero card).
       On desktop the wrapper is layout-transparent and its extras are hidden. */

    /* Hero input group */
    .subline-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-family: var(--ff-display);
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--tx-on-dark, #f8fafc);
      background: rgba(16,185,129,0.14);
      border: 1px solid rgba(16,185,129,0.45);
      border-radius: 9999px;
      padding: 5px 12px;
      text-decoration: none;
      white-space: nowrap;
      transition: background var(--dur-fast), border-color var(--dur-fast);
    }
    .subline-pill svg { width: 14px; height: 14px; color: var(--brand); transition: transform var(--dur-fast); }
    .subline-pill:hover { background: rgba(16,185,129,0.24); border-color: rgba(16,185,129,0.7); }
    .subline-pill:hover svg { transform: translateX(3px); }
    .hero-cap {
      font-family: var(--ff-display);
      font-size: 0.88rem;
      font-weight: 500;
      color: var(--tx-on-dark-2);
      text-decoration: none;
      cursor: pointer;
      transition: color var(--dur-fast);
    }
    a.hero-cap:hover {
      background: rgba(255,255,255,0.12);
      border-color: rgba(255,255,255,0.32);
      color: var(--tx-on-dark);
    }

    /* Hero logo floating */
    @keyframes ringStepGlow {
      0%, 24%, 100% { border-color: rgba(255,255,255,0.22); color: var(--tx-on-dark-2); background: rgba(10, 30, 24, 0.72); }
      6%, 14% { border-color: rgba(16,185,129,0.75); color: var(--tx-on-dark); background: rgba(16,185,129,0.18); }
    }

    /* Exact positions calculated: center + radius*cos/sin - 22px icon offset */
    /* Inner ring: 340px box, radius 170px */

    /* Outer ring: 460px box, radius 230px */
    @keyframes spin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    @keyframes counterspin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(-360deg); }
    }

    /* Hero trust bar */
    .hero-trust-line {
      height: 5px;
      background: #2a3a52;
      width: 100%;
      position: relative;
      z-index: 5;
    }
    .logo-carousel-wrap {
      background: #fff;
      padding: 28px 0;
      width: 100%;
      position: relative;
      box-shadow: 0 4px 20px rgba(0,0,0,0.15), 0 -4px 20px rgba(0,0,0,0.15);
    }
    /* Compliance badges occupy the existing white band above the logo carousel
       (same position/height as the old ::before — no change to the white space). */
    .compliance-strip {
      content: '';
      position: absolute;
      top: -75px;
      left: 0;
      right: 0;
      height: 70px;
      background: #fff;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(16px, 3vw, 40px);
      padding: 0 24px;
    }
    .compliance-strip .cb {
      display: flex;
      align-items: center;
      gap: 8px;
      opacity: 0.62;
      transition: opacity 0.25s ease;
    }
    .compliance-strip .cb:hover { opacity: 1; }
    .compliance-strip .cb-seal { width: 42px; height: 42px; flex-shrink: 0; }
    .compliance-strip .cb-seal svg { width: 42px; height: 42px; display: block; }
    .compliance-strip .cb-text { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
    .compliance-strip .cb-name { font-size: 12.5px; font-weight: 700; color: #374151; letter-spacing: 0.2px; white-space: nowrap; }
    .compliance-strip .cb-sub { font-size: 10px; font-weight: 500; color: var(--tx-3); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
    @media (max-width: 920px) {
      .compliance-strip { gap: clamp(8px, 2vw, 20px); padding: 0 10px; }
      .compliance-strip .cb { gap: 5px; }
      .compliance-strip .cb-seal, .compliance-strip .cb-seal svg { width: 26px; height: 26px; }
      .compliance-strip .cb-name { font-size: 10px; }
      .compliance-strip .cb-sub { font-size: 8px; letter-spacing: 0.3px; }
    }
    @media (max-width: 620px) {
      .compliance-strip .cb-text { display: none; }
      .compliance-strip .cb-seal, .compliance-strip .cb-seal svg { width: 30px; height: 30px; }
      .compliance-strip { gap: clamp(14px, 4.5vw, 30px); }
    }
    .logo-carousel-wrap::after {
      content: '';
      position: absolute;
      bottom: -20px;
      left: 0;
      right: 0;
      height: 20px;
      background: #fff;
    }
    .logo-carousel {
      overflow: hidden;
      width: 100%;
    }
    .logo-track {
      display: flex;
      align-items: center;
      gap: 80px;
      animation: scroll 30s linear infinite;
      width: max-content;
    }
    .logo-track img {
      height: 40px;
      width: auto;
      opacity: 0.85;
      transition: opacity var(--dur-fast);
    }
    .logo-track img:hover { opacity: 1; }
    @keyframes scroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* Transform-only entrance: above-the-fold hero content stays opacity:1 so it
       remains an LCP candidate from first paint. Animating opacity from 0 here made
       every large hero element invisible at paint time, which yields Lighthouse NO_LCP. */
    @keyframes heroFadeUp {
      from { transform: translateY(24px); }
      to { transform: translateY(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-headline, .hero-desc, .hero-visual { animation: none; }
    }

    /* ============================== */
    /*      SOCIAL PROOF / REVIEWS    */
    /* ============================== */
    .reviews-section {
      padding: 80px 0;
      background: #F0FAF4;
    }
    [data-theme="dark"] .reviews-section {
      background: var(--sf-1);
    }

    /* ============================== */
    /*   HOW IT WORKS (choose path)   */
    /* ============================== */
    .how-section {
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding: 96px 0;
      background: linear-gradient(180deg, #ffffff 0%, #F2F9F5 100%);
      position: relative;
      overflow: hidden;
    }
    [data-theme="dark"] .how-section { background: var(--bg); }
    .how-section::before {
      content: "";
      position: absolute;
      top: -25%;
      left: 50%;
      transform: translateX(-50%);
      width: 1000px;
      height: 1000px;
      background: radial-gradient(circle, rgba(16,185,129,0.09), transparent 62%);
      pointer-events: none;
    }
    .how-inner { position: relative; z-index: 1; width: 100%; }
    .how-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--s6);
      align-items: stretch;
      margin-bottom: var(--s12);
    }
    .how-card {
      background: var(--sf-card, #fff);
      border: 1px solid var(--bd);
      border-radius: 20px;
      padding: 40px 32px;
      display: flex;
      flex-direction: column;
      transition: transform var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out), border-color var(--dur-normal) var(--ease-out);
    }
    .how-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--sh-card-hover);
      border-color: rgba(16,185,129,0.35);
    }
    .how-card--flagship {
      border-color: rgba(16,185,129,0.4);
      box-shadow: 0 14px 44px rgba(16,185,129,0.12);
    }
    .how-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 22px;
    }
    .how-icon {
      width: 56px;
      height: 56px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(16,185,129,0.1);
      color: var(--brand);
    }
    .how-icon svg { width: 28px; height: 28px; }
    .how-depth { display: inline-flex; gap: 5px; }
    .how-depth i {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--bd-strong, #d1d5db);
      display: block;
    }
    .how-depth i.on { background: var(--brand); }
    .how-eyebrow {
      font-family: var(--ff-display);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--brand-text);
      margin-bottom: var(--s2);
    }
    .how-title {
      font-family: var(--ff-display);
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--tx);
      letter-spacing: -0.01em;
      margin-bottom: 6px;
    }
    .how-cardsub {
      font-size: 0.92rem;
      color: var(--tx-2);
      line-height: 1.5;
      margin-bottom: 26px;
    }
    .how-steps {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: var(--s4);
      flex: 1;
    }
    .how-steps li { display: flex; gap: var(--s3); align-items: flex-start; }
    .how-num {
      flex-shrink: 0;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      /* --brand-light (#10B981) gives white only 2.54:1; the numeral is 12.8px text on a filled
         badge, so it owes 4.5:1. The darker brand green carries the same identity at 5.48:1. */
      background: #047857;
      color: #fff;
      font-family: var(--ff-display);
      font-size: 0.8rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 1px;
    }
    .how-step-t { display: flex; flex-direction: column; gap: 2px; }
    .how-step-t strong {
      font-family: var(--ff-display);
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--tx);
      line-height: 1.3;
    }
    .how-step-t span { font-size: 0.84rem; color: var(--tx-3); line-height: 1.45; }
    .how-foot { text-align: center; max-width: 680px; margin: 0 auto; }
    .how-foot p { font-size: 1.05rem; color: var(--tx-2); line-height: 1.7; margin-bottom: var(--s6); }
    .how-foot strong { color: var(--tx); font-weight: 700; }
    @media (max-width: 960px) {
      .how-section { min-height: auto; padding: 72px 0; }
      .how-grid {
        grid-template-columns: 1fr;
        max-width: 440px;
        margin-left: auto;
        margin-right: auto;
      }
    }

    /* ============================== */
    /*   SERVICES (feature explorer)  */
    /* ============================== */
    .services-section {
      padding: 100px 0;
      background: #E7F4EE; /* a shade deeper than the How-it-works band — subtle section break */
      position: relative;
    }
    [data-theme="dark"] .services-section { background: var(--sf-1); }
    .services-layout {
      display: grid;
      grid-template-columns: 250px 1fr;
      gap: 56px;
      align-items: start;
    }
    .services-tabs {
      display: flex;
      flex-direction: column;
      gap: 2px;
      border-left: 1px solid var(--bd);
    }
    .svc-tab {
      display: flex;
      align-items: center;
      gap: var(--s3);
      width: 100%;
      padding: 13px 18px;
      margin-left: -1px;
      font-family: var(--ff-display);
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--tx-2);
      text-align: left;
      background: none;
      border: none;
      border-left: 2px solid transparent;
      cursor: pointer;
      transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
    }
    .svc-tab svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--tx-3); transition: color var(--dur-fast); }
    .svc-tab:hover { color: var(--tx); background: rgba(16,185,129,0.05); }
    .svc-tab.active {
      color: var(--brand-text);
      background: rgba(16,185,129,0.09);
      border-left-color: var(--brand);
      border-radius: 0 10px 10px 0;
    }
    .svc-tab.active svg { color: var(--brand); }
    .services-panels { position: relative; }
    .svc-panel { display: none; }
    .svc-panel.active {
      display: grid;
      /* Was `1fr 400px`. Neither track could shrink: the 400px column is fixed, and a bare 1fr has
         min-width:auto so it will not go below its content. Between ~981px and ~1200px the pair
         needed more room than the container had, and the panel pushed the whole document 27px wider
         than the viewport. minmax(0, ...) lets both give. */
      grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
      gap: 48px;
      align-items: center;
      animation: svcFade 0.35s var(--ease-out);
    }
    @keyframes svcFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    .svc-text h3 {
      font-family: var(--ff-display);
      font-size: 1.6rem;
      font-weight: 700;
      color: var(--tx);
      line-height: 1.25;
      letter-spacing: -0.01em;
      margin-bottom: var(--s3);
    }
    .svc-text > p {
      font-size: 1rem;
      color: var(--tx-2);
      line-height: 1.7;
      max-width: 460px;
      margin-bottom: 22px;
    }
    .svc-checklist {
      list-style: none;
      margin: 0 0 28px;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .svc-checklist li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 0.95rem;
      color: var(--tx);
    }
    .svc-ccheck {
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: rgba(16,185,129,0.12);
      color: var(--brand-text);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 1px;
    }
    .svc-ccheck svg { width: 12px; height: 12px; }
    .svc-visual { display: flex; align-items: center; justify-content: center; }
    .svc-visual img { width: 100%; max-width: 420px; height: auto; }
    @media (max-width: 980px) {
      .services-section { padding: 72px 0; }
      .services-layout { grid-template-columns: 1fr; gap: 32px; }
      .services-tabs {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        border-left: none;
      }
      .svc-tab {
        width: auto;
        margin-left: 0;
        padding: 8px 15px;
        border: 1px solid var(--bd);
        border-radius: 9999px;
      }
      .svc-tab.active { border-color: var(--brand); border-radius: 9999px; }
      .svc-panel.active { grid-template-columns: 1fr; gap: 32px; }
      .svc-visual { order: -1; }
      .svc-visual img { max-width: 340px; }
    }

    /* ============================== */
    /*   WHY CHOOSE (benefits grid)   */
    /* ============================== */
    .why-section {
      padding: 100px 0;
      background: #E0F1E8; /* a shade deeper than the Services band — subtle section break */
    }
    [data-theme="dark"] .why-section { background: var(--bg); }
    .why-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 40px 32px;
    }
    .why-card {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 14px;
    }
    .why-icon {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      background: rgba(16,185,129,0.1);
      color: var(--brand);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .why-icon svg { width: 26px; height: 26px; }
    .why-h {
      font-family: var(--ff-display);
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--tx);
      line-height: 1.3;
      letter-spacing: -0.01em;
    }
    .why-p {
      font-size: 0.92rem;
      color: var(--tx-2);
      line-height: 1.6;
    }
    /* Contact CTA — spans the two empty grid cells (bottom-right) as a deliberate,
       roomy call-to-action panel, distinct from the borderless feature cards. */
    .contact-cta {
      grid-column: span 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      padding: 38px 44px;
      border-radius: 22px;
      background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(16,185,129,0.02));
      border: 1px solid rgba(16,185,129,0.22);
    }
    .contact-cta-body { display: flex; flex-direction: column; gap: 12px; max-width: 460px; }
    .contact-cta-eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: var(--ff-display); font-weight: 700; font-size: 0.8rem;
      text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand);
    }
    .contact-cta-eyebrow svg { width: 16px; height: 16px; }
    .contact-cta-h {
      font-family: var(--ff-display); font-size: 1.5rem; font-weight: 800;
      color: var(--tx); line-height: 1.25; letter-spacing: -0.01em; margin: 0;
    }
    .contact-cta-p { font-size: 0.98rem; color: var(--tx-2); line-height: 1.55; margin: 0; }
    .contact-cta-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
    .contact-cta-tag {
      font-size: 0.8rem; font-weight: 600; color: var(--brand-text, var(--brand));
      background: rgba(16,185,129,0.12); border-radius: 9999px; padding: 6px 13px;
    }
    .contact-cta-actions { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }
    .contact-cta-actions .btn { width: 100%; }
    @media (max-width: 960px) {
      .why-section { padding: 72px 0; }
      .why-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 28px; }
      .contact-cta { grid-column: 1 / -1; }
    }
    @media (max-width: 560px) {
      .why-grid { grid-template-columns: 1fr; gap: 28px; }
      .contact-cta { flex-direction: column; align-items: flex-start; gap: 24px; padding: 28px 24px; }
      .contact-cta-actions { flex-direction: row; width: 100%; }
      .contact-cta-actions .btn { flex: 1; }
    }

    /* ============================== */
    /*   SPEED / THROUGHPUT band       */
    /* ============================== */
    .speed-section {
      padding: 96px 0;
      background: #F4FAF7; /* lighter near-white band — distinct from the sage Why section above */
    }
    [data-theme="dark"] .speed-section { background: var(--sf-1); }
    .speed-rows { display: flex; flex-direction: column; gap: 20px; max-width: 860px; margin: 0 auto; }
    .speed-row {
      display: grid;
      grid-template-columns: 1fr 150px 150px;
      align-items: center;
      background: var(--sf-card, #fff);
      border: 1px solid var(--bd);
      border-radius: 16px;
      padding: 26px 32px;
      box-shadow: 0 4px 18px rgba(0,0,0,0.05);
    }
    .speed-label { display: flex; align-items: center; gap: 16px; padding-right: 24px; }
    .speed-licon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: rgba(16,185,129,0.1);
      color: var(--brand);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .speed-licon svg { width: 24px; height: 24px; }
    .speed-label strong { display: block; font-family: var(--ff-display); font-size: 1rem; font-weight: 700; color: var(--tx); line-height: 1.3; }
    .speed-label span { font-size: 0.82rem; color: var(--brand-text); font-weight: 600; }
    .speed-stat {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      border-left: 1px solid var(--bd);
      padding: 4px 8px;
    }
    .speed-num { font-family: var(--ff-display); font-size: 2rem; font-weight: 800; color: var(--brand-text); line-height: 1; }
    .speed-time { font-size: 0.82rem; color: var(--tx-3); margin-top: 7px; }
    .speed-foot { text-align: center; font-size: 0.85rem; color: var(--tx-3); max-width: 620px; margin: 28px auto 0; line-height: 1.6; }
    @media (max-width: 680px) {
      .speed-section { padding: 64px 0; }
      .speed-row { grid-template-columns: 1fr 1fr; row-gap: 22px; padding: 24px; }
      .speed-label { grid-column: 1 / -1; padding-right: 0; }
      .speed-stat:nth-child(2) { border-left: none; }
    }

    /* ============================== */
    /*   INTEGRATIONS showcase         */
    /* ============================== */
    .intg-section { padding: 100px 0; background: #FFFFFF; overflow: hidden; }
    [data-theme="dark"] .intg-section { background: var(--bg); }
    .intg-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
    .intg-visual { position: relative; width: 100%; max-width: 480px; aspect-ratio: 1 / 1; margin: 0 auto; }
    .intg-circle {
      position: absolute;
      inset: 5%;
      border-radius: 50%;
      background: radial-gradient(circle at 42% 40%, rgba(16,185,129,0.18), rgba(16,185,129,0.04) 68%);
    }
    .intg-logo {
      position: absolute;
      transform: translate(-50%, -50%);
      width: 64px;
      height: 64px;
      background: #fff;
      border: 1px solid var(--bd);
      border-radius: 16px;
      box-shadow: 0 8px 22px rgba(0,0,0,0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform var(--dur-normal) var(--ease-out);
    }
    .intg-logo:hover { transform: translate(-50%, -50%) scale(1.08); }
    .intg-logo img { width: 58%; height: 58%; object-fit: contain; }
    .intg-logo--main {
      width: 98px;
      height: 98px;
      border-radius: 22px;
      border-color: rgba(16,185,129,0.3);
      box-shadow: 0 16px 38px rgba(16,185,129,0.2);
      z-index: 2;
    }
    .intg-text h2 { margin-bottom: var(--s4); }
    .intg-p {
      font-size: 1.05rem;
      color: var(--tx-2);
      line-height: 1.7;
      max-width: 480px;
      margin-bottom: 18px;
      font-weight: 300;
    }
    .intg-text .btn { margin-top: 10px; }
    @media (max-width: 900px) {
      .intg-section { padding: 72px 0; }
      .intg-layout { grid-template-columns: 1fr; gap: 40px; }
      .intg-text { text-align: center; }
      .intg-p { margin-left: auto; margin-right: auto; }
      .intg-visual { order: -1; max-width: 380px; }
    }
    @media (max-width: 480px) {
      .intg-logo { width: 50px; height: 50px; border-radius: 13px; }
      .intg-logo--main { width: 74px; height: 74px; border-radius: 18px; }
    }

    /* ============================== */
    /*   CASE STUDIES (carousel)       */
    /* ============================== */
    .cs-wrap { position: relative; }
    .cs-track {
      display: flex;
      gap: 24px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      padding: 4px 2px 8px;
      /* Must match the 2px inline padding. Without it scrollLeft:0 is not a valid snap position,
         because the first card's start edge sits 2px in, so Chrome performs an involuntary 2px snap
         scroll as soon as this element is laid out. Chrome stops recording LCP candidates at the
         first scroll on a page, and that snap fires before any contentful element is recorded, so
         the homepage emitted NO LCP AT ALL and Lighthouse scored Performance 0. Being far below the
         fold makes no difference: layout is enough to trigger it. */
      scroll-padding-left: 2px;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    .cs-track::-webkit-scrollbar { display: none; }
    .cs-card {
      flex: 0 0 364px;
      max-width: 364px;
      background: var(--sf-card, #fff);
      border: 1px solid var(--bd);
      border-radius: 18px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      scroll-snap-align: start;
      transition: box-shadow var(--dur-normal) var(--ease-out), transform var(--dur-normal) var(--ease-out);
    }
    .cs-card:hover { transform: translateY(-4px); box-shadow: var(--sh-card-hover); }
    .cs-head {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 22px 24px;
      background: linear-gradient(135deg, rgba(16,185,129,0.13), rgba(16,185,129,0.03));
      border-bottom: 1px solid var(--bd);
    }
    .cs-avatar { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.12); flex-shrink: 0; }
    .cs-head-meta strong { display: block; font-family: var(--ff-display); font-size: 0.95rem; font-weight: 700; color: var(--tx); line-height: 1.3; }
    .cs-head-meta span { font-size: 0.8rem; color: var(--tx-3); }
    .cs-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
    .cs-label { font-family: var(--ff-display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-text); }
    .cs-title { font-family: var(--ff-display); font-size: 1.15rem; font-weight: 700; color: var(--tx); line-height: 1.3; letter-spacing: -0.01em; }
    .cs-text { font-size: 0.9rem; color: var(--tx-2); line-height: 1.6; flex: 1; }
    .cs-nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
    .cs-arrow {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 1px solid var(--bd-strong);
      background: #fff;
      color: var(--tx);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all var(--dur-fast);
    }
    .cs-arrow:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
    .cs-arrow svg { width: 20px; height: 20px; }
    @media (max-width: 560px) { .cs-card { flex-basis: 290px; max-width: 290px; } }

    /* ============================== */
    /*    FEATURES SHOWCASE (large)   */
    /* ============================== */
    .feature-block {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--s12);
      align-items: center;
      margin-bottom: 80px;
    }
    .feature-block:last-child { margin-bottom: 0; }

    /* ============================== */
    /*     PRODUCT SCREENSHOT MOCKUP  */
    /* ============================== */

    /* -- Inbox Insight mockup internals -- */

    /* -- Content analysis mockup -- */

    /* -- Auth checker mockup -- */

    /* -- AI insights mockup -- */

    /* ============================== */
    /*      API SECTION (dark)        */
    /* ============================== */
    .api-inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--s12);
      align-items: center;
    }

    /* ============================== */
    /*      COMPATIBLE ESPs           */
    /* ============================== */
    .esp-pill {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 12px 22px;
      background: var(--sf-0);
      border: 1px solid var(--bd);
      border-radius: 12px;
      font-family: var(--ff-display);
      font-size: 0.9375rem;
      box-shadow: var(--sh-xs);
      transition: all var(--dur-normal) var(--ease-out);
      font-weight: 600;
      color: var(--tx);
      transition: all var(--dur-fast);
    }
    .esp-pill:hover {
      border-color: var(--bd-brand);
      background: var(--brand-subtle);
    }

    /* ============================== */
    /*         BLOG SECTION           */
    /* ============================== */
    .blog-section {
      padding: 80px 0;
      background: #DCEEE4;
    }
    [data-theme="dark"] .blog-section {
      background: var(--sf-1);
    }
    .blog-section .section-title {
      font-family: 'Roboto Slab', Georgia, serif;
      font-weight: 800;
    }
    .blog-carousel { position: relative; overflow: hidden; }
    .blog-track {
      display: flex;
      gap: var(--s6);
      /* Translated via transform (GPU-composited) by landing.js — not a scroll
         container, so the auto-stream never writes scrollLeft (which forced reflow). */
      overflow: visible;
      will-change: transform;
      padding: 4px 2px 14px;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .blog-track::-webkit-scrollbar { display: none; }
    .blog-track .blog-card { flex: 0 0 340px; max-width: 340px; }
    .blog-nav {
      position: absolute;
      top: 96px;
      transform: translateY(-50%);
      z-index: 6;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: #fff;
      border: 1px solid var(--bd);
      box-shadow: 0 6px 20px rgba(0,0,0,0.16);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--tx);
      transition: all var(--dur-fast);
    }
    .blog-nav:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
    .blog-nav svg { width: 22px; height: 22px; }
    .blog-nav--prev { left: -12px; }
    .blog-nav--next { right: -12px; }
    @media (max-width: 560px) {
      .blog-track .blog-card { flex-basis: 282px; max-width: 282px; }
      .blog-nav { width: 40px; height: 40px; }
    }
    .blog-card {
      background: var(--sf-card);
      border: 1px solid var(--bd);
      border-radius: 16px;
      overflow: hidden;
      transition: all var(--dur-normal) var(--ease-out);
    }
    .blog-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--sh-card-hover);
    }
    .blog-card-img {
      height: 190px;
      overflow: hidden;
      background: #eaf3ee;
    }
    .blog-card-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform var(--dur-normal) var(--ease-out);
    }
    .blog-card:hover .blog-card-img img { transform: scale(1.04); }
    .blog-card-body {
      padding: var(--s6);
    }
    .blog-card-title {
      font-family: var(--ff-display);
      font-size: 1.125rem;
      font-weight: 700;
      color: var(--tx);
      line-height: 1.35;
      margin-bottom: var(--s3);
    }
    .blog-card-excerpt {
      font-size: 0.875rem;
      color: var(--tx-2);
      line-height: 1.6;
    }
    .blog-card-link {
      display: inline-flex;
      align-items: center;
      gap: var(--s1);
      font-family: var(--ff-display);
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--brand-text);
      margin-top: var(--s4);
      transition: gap var(--dur-fast);
    }
    .blog-card-link:hover { gap: var(--s2); }

    /* ============================== */
    /*         FINAL CTA              */
    /* ============================== */
    .final-cta {
      position: relative;
      background: linear-gradient(100deg, var(--hero-via) 0%, var(--hero-from) 100%);
      padding: 60px 0;
      overflow: hidden;
    }
    .final-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
      background-size: 38px 38px;
      opacity: 0.4;
      pointer-events: none;
    }
    .cta-banner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1.25fr 0.75fr;
      align-items: center;
      gap: 40px;
    }
    .cta-banner-text { position: relative; z-index: 1; }
    .cta-banner-text h2 {
      font-family: var(--ff-display);
      font-size: 2.1rem;
      font-weight: 700;
      color: var(--tx-on-dark);
      line-height: 1.2;
      letter-spacing: -0.01em;
      max-width: 520px;
      margin-bottom: var(--s6);
    }
    .cta-banner-btn {
      display: inline-flex;
      align-items: center;
      font-family: var(--ff-display);
      font-weight: 700;
      font-size: 1rem;
      color: #047857;
      background: #fff;
      padding: 14px 32px;
      border-radius: 9999px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.18);
      transition: transform var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out);
    }
    .cta-banner-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.26); }
    .cta-banner-note {
      font-size: 0.85rem;
      color: var(--tx-on-dark-2);
      margin-top: var(--s4);
      max-width: 380px;
    }
    .cta-banner-visual { position: relative; z-index: 1; display: flex; justify-content: center; }
    .cta-portrait { position: relative; width: 100%; max-width: 270px; aspect-ratio: 1 / 1; }
    .cta-portrait > img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
      border: 6px solid rgba(255,255,255,0.3);
      box-shadow: 0 24px 60px rgba(0,0,0,0.3);
    }
    .cta-badge {
      position: absolute;
      top: 8%;
      left: -6%;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--brand-text);
      box-shadow: 0 10px 24px rgba(0,0,0,0.22);
    }
    .cta-badge svg { width: 26px; height: 26px; }
    .cta-dot {
      position: absolute;
      top: -4%;
      right: 2%;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: #FACC15;
      box-shadow: 0 6px 16px rgba(0,0,0,0.18);
    }
    @media (max-width: 860px) {
      .cta-banner { grid-template-columns: 1fr; text-align: center; gap: 30px; }
      .cta-banner-text h2, .cta-banner-note { margin-left: auto; margin-right: auto; }
      .cta-banner-visual { order: -1; }
      .cta-portrait { max-width: 210px; }
    }

    /* ============================== */
    /*         FAQ                    */
    /* ============================== */
    .faq-section {
      padding: 80px 0;
      background: #F0FAF4;
    }
    [data-theme="dark"] .faq-section {
      background: var(--sf-1);
    }
    .faq-list {
      max-width: 800px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: var(--s3);
    }
    .faq-item {
      background: var(--sf-card);
      border: 1px solid var(--bd);
      border-radius: 12px;
      overflow: hidden;
      transition: border-color var(--dur-fast);
    }
    .faq-item.open {
      border-color: var(--bd-brand);
    }
    .faq-question {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--s5) var(--s6);
      width: 100%;
      text-align: left;
      font-family: var(--ff-display);
      font-size: 1rem;
      font-weight: 600;
      color: var(--tx);
      cursor: pointer;
      background: none;
      border: none;
    }
    .faq-question:hover { color: var(--brand); }
    .faq-chevron {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
      transition: transform var(--dur-normal) var(--ease-out);
      color: var(--tx-3);
    }
    .faq-item.open .faq-chevron {
      transform: rotate(180deg);
    }
    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height var(--dur-normal) var(--ease-out);
    }
    .faq-answer-inner {
      padding: 0 var(--s6) var(--s5);
      font-size: 0.9375rem;
      color: var(--tx-2);
      line-height: 1.7;
    }

    /* ============================== */
    /*          FOOTER                */
    /* ============================== */
    .footer {
      background: #FFFFFF;
      padding: 80px 0 var(--s8);
      border-top: 1px solid var(--bd);
    }
    .footer-grid {
      display: grid;
      grid-template-columns: max-content repeat(4, max-content);
      justify-content: space-between;
      gap: var(--s8);
      margin-bottom: 60px;
    }
    .footer-brand {
      display: flex;
      flex-direction: column;
      gap: var(--s4);
    }
    .footer-brand-logo {
      display: flex;
      align-items: center;
      gap: var(--s3);
      font-family: var(--ff-display);
      font-weight: 700;
      font-size: 1.125rem;
      color: var(--tx);
    }
    .footer-brand-logo img {
      height: 28px;
      width: auto;
    }
    .footer-brand-desc {
      font-size: 0.875rem;
      color: var(--tx-2);
      line-height: 1.7;
      max-width: 280px;
    }
    .footer-socials {
      display: flex;
      gap: var(--s3);
      margin-top: var(--s4);
    }
    .footer-socials a {
      width: 36px;
      height: 36px;
      border-radius: 9999px;
      background: rgba(0,0,0,0.05);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--tx-2);
      transition: background var(--dur-fast), color var(--dur-fast);
    }
    .footer-socials a:hover {
      background: rgba(16,185,129,0.12);
      color: var(--brand);
    }
    .footer-col-title {
      font-family: var(--ff-display);
      font-size: 0.8125rem;
      font-weight: 700;
      color: var(--tx);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: var(--s5);
    }
    .footer-col a {
      display: block;
      font-size: 0.875rem;
      color: var(--tx-2);
      padding: 6px 0;
      transition: color var(--dur-fast);
    }
    .footer-col a:hover { color: var(--brand); }
    .footer-bottom {
      border-top: 1px solid var(--bd);
      padding-top: var(--s8);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .footer-copy {
      font-size: 0.8125rem;
      color: var(--tx-3);
    }
    .footer-legal {
      display: flex;
      gap: var(--s6);
    }
    .footer-legal a {
      font-size: 0.8125rem;
      color: var(--tx-3);
      transition: color var(--dur-fast);
    }
    .footer-legal a:hover { color: var(--brand); }

    /* ============================== */
    /*        RESPONSIVE              */
    /* ============================== */
    @media (max-width: 1024px) {
      .hero-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
      .hero-text { text-align: center; }
      .hero-cap { white-space: normal; }
      .hero-cap { white-space: normal; }
      .feature-block {
        grid-template-columns: 1fr;
        gap: var(--s8);
      }
      .api-inner {
        grid-template-columns: 1fr;
        gap: var(--s8);
      }
    }

    @media (max-width: 900px) {
      /* Single-line tagline can't fit on small screens — allow it to wrap there */
      .section-title { font-size: 1.75rem; }
      .footer-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .footer-brand { grid-column: 1 / -1; }
    }

    /* Desktop nav (6 links + 3 buttons) genuinely fits only at >=1260px
       (Create Account clips below that) — hamburger for the whole range under it */
    @media (max-width: 1279px) {
      .nav-links, .nav-actions { display: none; }
      .nav-hamburger { display: flex; }
    }

    @media (max-width: 1180px) and (min-width: 1025px) {
    }

    /* Mobile view for the entire range where the desktop two-column hero
       can't hold (hero-top stacks below 1024) — desktop style above only */
    @media (max-width: 1024px) {
      .hero { padding: calc(70px + 28px) 0 60px; }

      /* Top trust pill (replaces the bottom trust line on phones) */

      /* On phones the H1 is the typographic anchor (no giant brand text) */
      .hero-desc { font-size: 0.98rem; margin-bottom: var(--s6); }

      /* Verify tool becomes a card: title, input, button, photo with result chip.
         Capped at 520px so it doesn't stretch on phablets/small tablets. */

      /* Benefit checks under the card */

      /* Why/pipeline lists: icon-row items with dividers instead of a long
         flat stack, so the sections read as deliberate mobile lists */
      .why-grid { grid-template-columns: 1fr; gap: 26px; }
      .why-card {
        display: grid;
        grid-template-columns: 44px 1fr;
        column-gap: 14px;
        row-gap: 8px;
        align-items: center;
      }
      .why-card + .why-card { border-top: 1px solid var(--bd); padding-top: 26px; }
      .why-icon { width: 44px; height: 44px; border-radius: 12px; }
      .why-icon svg { width: 22px; height: 22px; }
      .why-h { font-size: 1.05rem; }
      .why-p { grid-column: 1 / -1; font-size: 0.9rem; }

      /* Case-study cards: consistent card-plus-peek width on phones */
      .cs-card { flex: 0 0 84vw; max-width: 340px; }

      /* Blog stream: arrows sit as a pair under the track (like case studies)
         instead of floating over card text at the viewport edges */
      .blog-carousel { padding-bottom: 58px; }
      .blog-nav { top: auto; bottom: 0; transform: none; width: 42px; height: 42px; }
      .blog-nav--prev { left: auto; right: 54px; }
      .blog-nav--next { right: 0; }

      /* Full-width account CTA below the checks */
      .hero-cap { display: none; }
      .section-title { font-size: 1.5rem; }
      .reviews-section, .blog-section, .faq-section { padding: 60px 0; }
       .final-cta { padding: 60px 0; }
      .final-cta h2 { font-size: 1.75rem; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .footer-bottom { flex-direction: column; gap: var(--s4); text-align: center; }
      .footer-legal { justify-content: center; }
      .esp-pill { font-size: 0.8125rem; padding: 8px 14px; }
    }

    /* ===== Single email verification modal ===== */
    .ev-modal { position: fixed; inset: 0; z-index: 4000; display: none; align-items: center; justify-content: center; padding: 20px; }
    .ev-modal.open { display: flex; }
    .ev-overlay { position: absolute; inset: 0; background: rgba(7,18,14,0.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
    .ev-card { position: relative; z-index: 1; width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 20px; padding: 30px 28px 26px; box-shadow: 0 30px 70px rgba(0,0,0,0.35); animation: evPop 0.24s var(--ease-out, ease); }
    @keyframes evPop { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }
    .ev-close { position: absolute; top: 14px; right: 16px; width: 30px; height: 30px; font-size: 24px; line-height: 1; color: #9ca3af; background: none; border: none; cursor: pointer; border-radius: 8px; }
    .ev-close:hover { color: #374151; background: #f3f4f6; }
    @keyframes evShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
    .ev-credits { margin-top: 16px; font-size: 0.8rem; color: #9ca3af; text-align: center; }
    .ev-credits-spent { color: #6b7280; }
    .ev-credits-spent a { color: var(--brand, #10b981); font-weight: 700; text-decoration: none; }
    .ev-credits-spent a:hover { text-decoration: underline; }
    .ev-result { margin-top: 20px; padding-top: 18px; border-top: 1px solid #eef0f2; }
    .ev-result-only { margin-top: 4px; padding-top: 0; border-top: none; }
    .ev-verdict { display: flex; align-items: center; gap: 12px; }
    .ev-gravatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; margin-left: auto; flex-shrink: 0; border: 2px solid #d1fae5; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
    .ev-vicon { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
    .ev-vicon svg { width: 24px; height: 24px; }
    .ev-good { background: #d1fae5; color: #059669; }
    .ev-bad { background: #fee2e2; color: #dc2626; }
    .ev-warn { background: #fef3c7; color: #d97706; }
    .ev-vtext strong { display: block; font-family: var(--ff-display); font-size: 1.15rem; font-weight: 800; color: #111827; line-height: 1.2; }
    .ev-vtext span { font-size: 0.8rem; color: #6b7280; font-family: var(--ff-mono); word-break: break-all; }
    .ev-checks { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
    .ev-check { display: flex; align-items: center; gap: 9px; font-size: 0.875rem; color: #374151; }
    .ev-dot { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; line-height: 1; }
    .ev-dot.ok { background: #10b981; } .ev-dot.no { background: #ef4444; } .ev-dot.neu { background: #9ca3af; }
    .ev-check b { margin-left: auto; color: #6b7280; font-weight: 600; font-size: 0.8rem; }
    .ev-exhausted { text-align: center; padding: 8px 4px 2px; }
    .ev-exhausted .ev-vicon { margin: 0 auto 14px; }
    .ev-exhausted h3 { font-family: var(--ff-display); font-size: 1.4rem; font-weight: 800; color: #111827; margin: 0 0 10px; }
    .ev-exhausted p { color: #6b7280; font-size: 0.95rem; line-height: 1.55; margin: 0 0 20px; }
    .ev-exhausted p strong { color: #111827; }
    .ev-cta { display: inline-block; font-family: var(--ff-display); font-weight: 700; font-size: 0.95rem; color: #fff; background: var(--brand, #10b981); padding: 13px 30px; border-radius: 9999px; text-decoration: none; box-shadow: var(--sh-brand, 0 6px 20px rgba(16,185,129,0.35)); }
    .ev-cta:hover { background: var(--brand-dark, #059669); }
    .ev-spin { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; vertical-align: -2px; margin-right: 6px; }
    /* ============================== */
    /*   BLOG LANDING PAGE            */
    /* ============================== */
    /* Reserve the fixed 70px .nav's height. The nav is position:fixed (out of flow), so the first
       in-flow element (this subnav on every blog/article/compare/glossary page) otherwise sits at
       top:0 BEHIND the nav, burying it and squeezing the article header beneath it. This margin (body
       is a BFC via overflow-x:hidden, so it does not collapse) drops the subnav to just below the nav
       and gives every article header full clearance. Landing pages have no .blog-subnav, so untouched. */
    .blog-subnav { margin-top: 70px; border-bottom: 1px solid var(--bd); background: #fff; }
    /* Belt-and-suspenders: if an article page (has .article-layout) ever ships WITHOUT its .blog-subnav
       (template regression, new page type), reserve the fixed nav's height on <main> so the header still
       clears. Mutually exclusive with the rule above (only fires when no subnav), so never double-offsets.
       Scoped to .article-layout, so landing pages (no article) are untouched. */
    body:has(.article-layout):not(:has(.blog-subnav)) > main { padding-top: 70px; }
    .blog-subnav-inner { max-width: 1216px; margin: 0 auto; padding: 0 var(--s6); display: flex; align-items: center; gap: 26px; height: 56px; overflow-x: auto; scrollbar-width: none; }
    .blog-subnav-inner::-webkit-scrollbar { display: none; }
    .blog-subnav .bs-brand { font-family: var(--ff-display); font-weight: 800; color: var(--tx); margin-right: 6px; white-space: nowrap; }
    .blog-subnav a { font-size: 0.9rem; color: var(--tx-2); white-space: nowrap; font-weight: 500; transition: color var(--dur-fast); }
    .blog-subnav a.active { color: var(--brand-text); font-weight: 700; }
    .blog-subnav a:hover { color: var(--brand); }
    .blog-page { padding: 52px 0 80px; background: #fff; }
    .feat-wrap { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; margin-bottom: 64px; }
    .feat-main { display: block; }
    .feat-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px; background: #eaf3ee; margin-bottom: 22px; display: block; }
    .feat-cat, .blog-card-cat { display: inline-block; font-family: var(--ff-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-text); margin-bottom: 10px; }
    .feat-main h1 { font-family: var(--ff-display); font-size: 2rem; font-weight: 700; color: var(--tx); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: var(--s3); }
    .feat-excerpt { font-size: 1.02rem; color: var(--tx-2); line-height: 1.7; margin-bottom: var(--s4); max-width: 580px; }
    .feat-readmore { font-family: var(--ff-display); font-weight: 700; color: var(--brand-text); }
    .feat-side-title { font-family: var(--ff-display); font-size: 1.1rem; font-weight: 800; color: var(--tx); margin-bottom: var(--s2); padding-bottom: var(--s3); border-bottom: 2px solid var(--brand); display: inline-block; }
    .feat-side-list { margin-top: var(--s2); }
    .feat-item { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--bd); align-items: flex-start; }
    .feat-item:last-child { border-bottom: none; }
    .feat-item-body { flex: 1; min-width: 0; }
    .feat-item .feat-cat { margin-bottom: 4px; }
    .feat-item h3 { font-family: var(--ff-display); font-size: 0.95rem; font-weight: 600; color: var(--tx); line-height: 1.35; margin-bottom: 6px; }
    .feat-item .rm { font-size: 0.78rem; font-weight: 700; color: var(--brand-text); }
    .feat-item img { width: 84px; height: 64px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: #eaf3ee; }
    .bposts-title { font-family: var(--ff-display); font-size: 1.6rem; font-weight: 700; color: var(--tx); margin-bottom: var(--s6); }
    .bposts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
    .bposts-grid .blog-card { display: flex; flex-direction: column; }
    .bposts-grid .blog-card .blog-card-body { display: flex; flex-direction: column; gap: 4px; }
    .bposts-grid .blog-card.is-hidden { display: none; }
    .blog-loadmore-wrap { text-align: center; margin-top: 48px; }
    .blog-chip { font-family: var(--ff-display); font-size: 0.85rem; font-weight: 600; color: var(--tx-2); background: #fff; border: 1px solid var(--bd-strong); border-radius: 9999px; padding: 8px 18px; transition: all var(--dur-fast); cursor: default; }
    .blog-chip:hover { border-color: var(--brand); color: var(--brand); }
    @media (max-width: 900px) {
      .feat-wrap { grid-template-columns: 1fr; gap: 40px; }
      .bposts-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 600px) {
      .bposts-grid { grid-template-columns: 1fr; }
    }

    /* ============================== */
    /*   BLOG ARTICLE PAGE            */
    /* ============================== */
    .article-body { font-size: 1.06rem; line-height: 1.8; color: var(--tx); }
    .article-body p { margin-bottom: var(--s5); color: var(--tx-2); }
    .article-body .lead { font-size: 1.18rem; color: var(--tx); font-weight: 500; }
    .article-body h2 { font-family: var(--ff-display); font-size: 1.55rem; font-weight: 700; color: var(--tx); letter-spacing: -0.01em; margin: 44px 0 var(--s4); scroll-margin-top: 90px; }
    .article-body h3 { font-family: var(--ff-display); font-size: 1.2rem; font-weight: 700; color: var(--tx); margin: 30px 0 var(--s3); }
    .article-body a { color: var(--brand-text); font-weight: 600; }
    .article-body ul, .article-body ol.steps { margin: 0 0 var(--s5); padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 12px; }
    .article-body ul li { display: flex; gap: 12px; color: var(--tx-2); }
    .article-body ul li::before { content: ""; flex-shrink: 0; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; background: rgba(16,185,129,0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat; }

    /* ===== Article: share rail + sticky TOC sidebar ===== */
    .toc-box { background: #F4FAF7; border: 1px solid var(--bd); border-radius: 14px; padding: 22px 24px; }
    .toc-box ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
    .toc-box a { font-size: 0.875rem; color: var(--tx-2); line-height: 1.4; display: block; padding-left: 12px; border-left: 2px solid var(--bd); transition: color var(--dur-fast), border-color var(--dur-fast); }
    .toc-box a:hover { color: var(--brand); }
    .toc-box a.active { color: var(--brand-text); font-weight: 700; border-left-color: var(--brand); }
    .article-toc-inline { display: none; }
    /* inline figures: full article width, subject-focused (cropped to subject) */
    @media (max-width: 1024px) {
      .article-toc-inline { display: block; }
    }

/* Cold email series cluster nav (blog interlinking) */

/* Comparison table — head-to-head tables on comparison articles (engine + hand-made share this).
   Wrap wide tables in <div class="cmp-table-wrap"> so they scroll instead of breaking the layout. */
.cmp-table-wrap { overflow-x: auto; border: 1px solid var(--bd); border-radius: 16px; background: #fff; margin: 1.5rem 0; }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.cmp-table th, .cmp-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--bd); font-size: 0.96rem; vertical-align: top; }
.cmp-table thead th { font-family: var(--ff-display); font-weight: 800; color: var(--tx); background: var(--bg-2, #f7f8f9); }
.cmp-table thead th.sc, .cmp-table td.sc { color: var(--brand-text); background: rgba(16, 185, 129, 0.05); }
.cmp-table tbody tr:last-child td { border-bottom: none; }
.cmp-table td.cap { font-family: var(--ff-display); font-weight: 600; color: var(--tx); }

    /* ============================================================
       HERO REDESIGN (2026-08-15)
       Headline leads the left column; a real-product collage fills the right.
       Replaces the shield + orbit, which were decorative and told the visitor
       nothing about the product.
       ============================================================ */

    .hero-headline {
      font-family: var(--ff-display);
      font-size: clamp(1.7rem, 2.6vw, 2.35rem);
      font-weight: 700;
      line-height: 1.16;
      letter-spacing: -0.02em;
      color: var(--tx-on-dark);
      max-width: 686px; /* the reference's h1 measure at 1440 */
      margin: 0 0 var(--s5);
    }

    /* ---- right column: layered real screenshots ---- */
    .hero-visual {
      position: relative;
      animation: heroFadeUp 0.8s var(--ease-out) 0.2s both;

    }

    /* The two floating cards overhang the frame, which is what gives the
       composition depth. They are real crops, so they must never be scaled
       past their natural width or the UI text inside goes soft. */
    /* Two hero visuals, one shown at a time. The product artwork is a wide 1887x1230 collage built
       for a side-by-side desktop layout; stacked under the copy on a phone it shrinks to the point
       where its UI detail is unreadable, so below 980px it is swapped for the photo instead. */
    .hero-art { display: block; }
    .hero-art img {
      display: block;
      width: 100%;
      max-width: none;
      height: auto;
      /* Supplied artwork carries an alpha channel, so it composites directly onto the gradient.
         No radius or box-shadow here: both would draw a rectangle around a non-rectangular image. */
      filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.35));
      /* The illustration is drawn on the hero's own dark green, so it needs no frame or shadow.
         A border here would read as a screenshot, which is exactly the register we moved away from. */
    }

    /* ---- logo band: trust line left, logos streaming right ---- */
    .logo-band {
      display: grid;
      grid-template-columns: minmax(230px, 300px) 1fr;
      align-items: center;
      gap: var(--s8);
      padding-left: max(24px, calc((100vw - 1240px) / 2));
    }
    .logo-band-lede {
      margin: 0;
      text-align: left;
      font-family: 'Roboto Slab', Georgia, serif;
      font-size: 1rem;
      font-weight: 600;
      line-height: 1.45;
      /* The band is WHITE. The old .hero-trust h4 used --tx-on-dark because it
         sat on the dark hero; reusing that token here would render near-white
         on white, which is the exact failure this page just had. */
      color: var(--tx);
    }

    @media (max-width: 980px) {
      .hero-top { grid-template-columns: 1fr; }
      .hero-visual { margin-top: var(--s8); margin-right: 0; }

      /* Undo the desktop bleed. Stacked, there is no side to fill, and 124% would just crop the
         artwork against .hero's overflow:hidden. */
      .hero-art img { width: 100%; }
      /* Stack the cards instead of overlapping: at this width the overhang
         either clips or covers the screenshot it is meant to annotate. */
    }
    @media (max-width: 860px) {
      .logo-band { grid-template-columns: 1fr; gap: var(--s5); padding-left: 24px; padding-right: 24px; }
      .logo-band-lede { text-align: center; }
    }


    /* ---- 90%+ placement claim, below the logo band ---- */
    /* .subline-pill was styled for the dark hero; on this light strip it needs the dark treatment. */


    /* The reference lets the artwork run off the right edge, which is what makes it read as filling
       the side rather than sitting in a slot. Only do that where there is actually margin to bleed
       into: below the 1216px container there is none, and oversizing there just crops the artwork
       and pushes the document wider than the viewport. */
    @media (min-width: 1241px) {
      /* The artwork bleeds off the right edge as in the reference, but it is SIZED rather than
         stretched to get there: measured against the reference the previous 124% stretch made it
         roughly 60% larger than it should be, which is what threw the proportions out. The column is
         extended past the viewport edge and the image is right-aligned inside it at a fixed cap, so
         widening the browser moves the bleed rather than inflating the artwork. */
      .hero-visual {
        /* Measured live from the reference at a 1440 viewport: artwork 850x554, left edge 870,
           right edge 1720. That is 280px hanging off the right, not the ~40 I first estimated from
           a screenshot, because a screenshot only shows the part that survived the crop. */
        margin-right: calc((1216px - 100vw) / 2 - var(--s6) - 280px);
        display: flex;
        justify-content: flex-end;
      }
      .hero-art img { width: 850px; max-width: none; }
    }

    /* ---- Hero conversion CTA: one email field straight into signup ----
       Replaces the free-verifier card, which sent the visitor to a tool instead of an account. The
       field POSTs nothing itself: it is a GET form at /signup so the address is carried across and
       the visitor lands on signup with it already filled. */
    .hero-signup {
      display: flex;
      align-items: center;
      gap: var(--s3);
      max-width: 520px;
      margin: 0 0 var(--s4);
      flex-wrap: wrap;
    }
    .hero-signup-input {
      flex: 1 1 240px;
      min-width: 0;
      height: 52px;
      padding: 0 var(--s5);
      border-radius: 9999px;
      border: 1.5px solid rgba(255, 255, 255, 0.22);
      background: rgba(255, 255, 255, 0.06);
      color: var(--tx-on-dark);
      font-size: 1rem;
      font-family: inherit;
    }
    .hero-signup-input::placeholder { color: rgba(249, 250, 251, 0.55); }
    .hero-signup-input:focus {
      outline: none;
      border-color: var(--brand-light);
      background: rgba(255, 255, 255, 0.1);
    }
    .hero-signup-btn { height: 52px; flex-shrink: 0; }
    .hero-cap { margin: 0; }

    /* ---- Free email verifier, now on the tools page ---- */
    .ev-section { max-width: 760px; margin: 0 auto; padding: var(--s10) var(--s6) var(--s8); }
    .ev-widget {
      display: flex;
      align-items: center;
      gap: var(--s3);
      flex-wrap: wrap;
      padding: var(--s5);
      border: 1px solid var(--bd);
      border-radius: 16px;
      background: var(--sf-1);
    }
    .ev-input {
      flex: 1 1 260px;
      min-width: 0;
      height: 48px;
      padding: 0 var(--s4);
      border-radius: 10px;
      border: 1px solid var(--bd);
      background: #fff;
      color: var(--tx);
      font-size: 1rem;
      font-family: inherit;
    }
    .ev-input:focus { outline: none; border-color: var(--brand); }
    .ev-credits { font-size: 0.875rem; color: var(--tx-3); flex-shrink: 0; }
    @media (max-width: 560px) {
      .hero-signup-input, .hero-signup-btn, .ev-input { flex-basis: 100%; }
    }


    /* "Check out how" sits inside the "Reach the inbox" card, the one stage whose whole claim IS the
       90%+ figure, so the link lands next to the sentence it substantiates. .subline-pill was styled
       for the dark hero, so on this light card it needs the dark-on-light treatment. */
    /* No margin. .why-card is a flex column with its own 14px gap, which is exactly the space between
       the card's heading and its paragraph. Adding another 16px on top made the button sit 30px out,
       twice the card's internal rhythm, so it read as floating below the card rather than belonging
       to it. Letting the card's own gap apply puts the button the same distance from the paragraph
       as the paragraph is from the heading, and the three read as one block. */
    .why-cta { margin-top: 0; }
    .why-cta .subline-pill {
      border-color: var(--brand);
      color: var(--brand-text, var(--brand));
      background: transparent;
    }
    .why-cta .subline-pill:hover {
      background: var(--brand);
      color: #fff;
    }


    /* Swap at 1240, not at the 980 stacking breakpoint. The artwork only gets its full 850px above
       1240; between 981 and 1240 the grid still runs two columns but squeezes it to 375-425px, where
       the UI detail inside is unreadable. 1240 therefore also covers landscape tablets (1024, 1112,
       1180), which is where it looked worst. */
    @media (max-width: 1240px) {
      .hero-art img {
        display: block;
        width: 100%;
        /* Cropped to a band rather than shown at its natural 760x618 ratio. Left to itself it runs
           to ~790px tall on a tablet and swallows the fold; the treatment it replaces used the same
           photo as a 290px cover for exactly this reason. */
        height: clamp(240px, 34vh, 340px);
        object-fit: cover;
        object-position: center 18%;
        border-radius: 16px;
        box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.5);
      }
    }


    /* ---- Skip layout and paint for the offscreen half of the page ----
       The homepage is ~17,000px tall across 12 sections. Profiling throttled mobile showed our own
       JavaScript costs 14ms; essentially all of the ~700ms Total Blocking Time was browser-internal
       style and layout for content nobody has scrolled to yet. content-visibility lets the browser
       skip that work until a section approaches the viewport.

       Deliberately NOT applied to the hero, compliance strip or logo band: those are above or at the
       fold, where skipping work buys nothing and risks a flash. contain-intrinsic-size supplies a
       placeholder height so the scrollbar does not jump as sections are realised. */
    .why-section,
    .how-section,
    .services-section,
    .speed-section,
    .intg-section,
    .reviews-section,
    .blog-section,
    .cmp-section,
    .faq-section,
    .final-cta { content-visibility: auto; }

    /* Per-section placeholder heights, measured at 412px and 1440px rather than guessed. A single
       flat 900px estimate left the document 3,244px short on load and the scrollbar jumped as each
       section realised. `auto` keeps the browser's remembered size once a section has rendered
       once; these numbers only have to be right for the first paint. */
    .why-section      { contain-intrinsic-size: auto 1900px; }
    .how-section      { contain-intrinsic-size: auto 2300px; }
    .services-section { contain-intrinsic-size: auto 1550px; }
    .speed-section    { contain-intrinsic-size: auto  790px; }
    .intg-section     { contain-intrinsic-size: auto  970px; }
    .reviews-section  { contain-intrinsic-size: auto  800px; }
    .blog-section     { contain-intrinsic-size: auto  740px; }
    .cmp-section      { contain-intrinsic-size: auto 1060px; }
    .faq-section      { contain-intrinsic-size: auto 1020px; }
    .final-cta        { contain-intrinsic-size: auto 1020px; }

    @media (min-width: 900px) {
      .why-section      { contain-intrinsic-size: auto 1060px; }
      .how-section      { contain-intrinsic-size: auto 1280px; }
      .services-section { contain-intrinsic-size: auto  940px; }
      .speed-section    { contain-intrinsic-size: auto  660px; }
      .intg-section     { contain-intrinsic-size: auto  680px; }
      .reviews-section  { contain-intrinsic-size: auto  840px; }
      .blog-section     { contain-intrinsic-size: auto  690px; }
      .cmp-section      { contain-intrinsic-size: auto 1400px; }
    }

/* ─────────────────────────────────────────────────────────────────────────────
   ARTICLE BLOCKS (ax-*)
   Structural variety for generated articles. Every page used to render through
   one shell, so 550+ articles differed only by hero photo; the one page that
   stood out did so because a human hand-drew an inline SVG, which the engine
   cannot do.
   These are ADDITIVE ONLY and namespaced `ax-`. Nothing above this line is
   touched, so every already-published page references none of these rules and
   renders exactly as it did. Forward-looking by construction.
   Colour stays on-brand (green family, no purple): variation here is STRUCTURAL,
   because varying hue per article would drift the brand rather than enrich it.
   ───────────────────────────────────────────────────────────────────────────── */