/* =============================================================================
   Service Connect — public site design system
   -----------------------------------------------------------------------------
   Monochrome: black and white, with green (the app's verified/success colour)
   as the only third colour. Typography is Inter (UI + body) paired with
   Instrument Serif italic for accent phrases. 4px spacing base, fluid type
   scale, layered shadows, spring-ish easing, prefers-color-scheme dark mode.
   Icons are inline SVG; the only raster images are the real app screenshots
   under /shots.

   Served under a strict CSP (style-src 'self' + Google Fonts), so every
   declaration lives here — no inline styles anywhere.

    1. Tokens             2. Base & a11y        3. Texture & surfaces
    4. Typography         5. Layout             6. Buttons & pills
    7. Header / nav       8. Motion & reveal    9. Hero
   10. Marquee           11. Bento features    12. How it works
   13. App screens       14. Categories        15. Protection & trust
   16. Providers         17. FAQ               18. CTA band
   19. Footer            20. Category pages    21. Legal pages / 404
   22. Responsive
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* --- Primitives: neutral ramp (very slightly warm, never blue) --------- */
  --n-0: #ffffff;
  --n-25: #fbfaf9;
  --n-50: #f6f5f3;
  --n-100: #eeedea;
  --n-200: #e2e1dc;
  --n-300: #cbc9c3;
  --n-400: #a4a29b;
  --n-500: #7b7973;
  --n-600: #575650;
  --n-700: #3d3c38;
  --n-800: #242422;
  --n-900: #141413;
  --n-950: #0a0a09;

  /* --- Primitives: green (the single third colour) ---------------------- */
  --g-50: #eaf7ef;
  --g-100: #d3eede;
  --g-400: #4ade80;
  --g-500: #22c55e;
  --g-600: #16a34a;
  --g-700: #15803d;
  --g-900: #0e2b1a;

  /* --- Semantic: surfaces & text ---------------------------------------- */
  --bg: var(--n-0);
  --bg-sunken: var(--n-50);
  --surface: var(--n-0);
  --surface-2: var(--n-50);
  --surface-3: var(--n-100);
  --border: var(--n-200);
  --border-strong: var(--n-300);
  --text: var(--n-950);
  --text-2: var(--n-600);
  --text-3: #6b6a64;

  --accent: var(--g-600);
  --accent-hover: var(--g-700);
  --accent-ink: #ffffff;
  --accent-text: var(--g-700);
  --accent-soft: var(--g-50);
  --accent-line: rgba(22, 163, 74, 0.28);
  --accent-glow: rgba(22, 163, 74, 0.16);

  /* Filled buttons need a darker green than the icon/border accent:
     #ffffff on #16a34a is only 3.3:1, on #15803d it is 5.0:1 (AA). */
  --btn-accent-bg: var(--g-700);
  --btn-accent-bg-hover: #11602d;
  --btn-accent-fg: #ffffff;

  /* Inverted "ink" surfaces. In dark mode these flip to white so an ink
     panel always reads as the opposite of the page. */
  --ink: var(--n-950);
  --ink-2: #171715;
  --ink-3: #232321;
  --ink-border: #2e2e2b;
  --ink-text: #ffffff;
  --ink-text-2: #b3b2ad;
  --ink-accent: var(--g-400);

  --header-bg: rgba(255, 255, 255, 0.72);
  --hairline: rgba(10, 10, 9, 0.08);
  --hairline-top: rgba(255, 255, 255, 0.9);
  --grid-line: rgba(10, 10, 9, 0.045);
  /* Grid drawn ON an ink panel, which is the inverse of the page, so it
     needs its own tint rather than the page's --grid-line. Hardcoding one
     grey for both themes made the CTA card's grid invisible on the dark
     panel and a clearly visible field of squares once the panel flipped
     to white in dark mode. */
  --ink-grid: rgba(255, 255, 255, 0.055);
  --ink-grid-strong: rgba(255, 255, 255, 0.09);
  --noise-opacity: 0.035;
  --watermark-opacity: 0.07;
  --scrim: rgba(10, 10, 9, 0.5);

  /* --- Shadows: layered, low-alpha, never a single blurry blob ---------- */
  --shadow-xs:
    0 1px 1px rgba(10, 10, 9, 0.03),
    0 1px 2px rgba(10, 10, 9, 0.04);
  --shadow-sm:
    0 1px 1px rgba(10, 10, 9, 0.03),
    0 2px 5px -1px rgba(10, 10, 9, 0.05),
    0 6px 14px -5px rgba(10, 10, 9, 0.06);
  --shadow-md:
    0 1px 1px rgba(10, 10, 9, 0.04),
    0 4px 10px -2px rgba(10, 10, 9, 0.06),
    0 14px 30px -10px rgba(10, 10, 9, 0.10);
  --shadow-lg:
    0 1px 2px rgba(10, 10, 9, 0.04),
    0 10px 22px -6px rgba(10, 10, 9, 0.09),
    0 30px 60px -18px rgba(10, 10, 9, 0.16);
  --shadow-xl:
    0 2px 4px rgba(10, 10, 9, 0.05),
    0 18px 38px -10px rgba(10, 10, 9, 0.13),
    0 54px 100px -28px rgba(10, 10, 9, 0.26);
  --shadow-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.8);

  /* --- Radii ------------------------------------------------------------ */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-full: 999px;

  /* --- Spacing: 4px base ------------------------------------------------ */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  --section-y: clamp(64px, 7.5vw, 116px);
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(20px, 4vw, 40px);
  --header-h: 56px;

  /* --- Typography ------------------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype",
    Palatino, Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --t-2xs: 0.75rem;      /* 12 */
  --t-xs: 0.8125rem;     /* 13 */
  --t-sm: 0.9375rem;     /* 15 */
  --t-base: 1.0625rem;   /* 17 */
  --t-lg: 1.1875rem;     /* 19 */
  --t-xl: 1.375rem;      /* 22 */
  --t-2xl: clamp(1.5rem, 1.24rem + 1.1vw, 1.875rem);    /* 24 → 30 */
  --t-3xl: clamp(1.875rem, 1.45rem + 1.9vw, 2.5rem);    /* 30 → 40 */
  --t-4xl: clamp(2.25rem, 1.58rem + 2.9vw, 3.5rem);     /* 36 → 56 */
  --t-5xl: clamp(2.75rem, 1.62rem + 4.9vw, 4.625rem);   /* 44 → 74 */

  --lh-display: 1.02;
  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-normal: 1.6;
  --lh-relaxed: 1.7;

  --tr-display: -0.035em;
  --tr-tight: -0.022em;
  --tr-snug: -0.012em;
  --tr-wide: 0.08em;

  /* --- Motion ----------------------------------------------------------- */
  --dur-1: 120ms;  /* colour / opacity — must feel instant */
  --dur-2: 190ms;  /* hover lift, press */
  --dur-3: 280ms;  /* panels, disclosure */
  --dur-4: 460ms;  /* scroll reveal */
  --dur-5: 700ms;  /* hero entrance */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.38, 0.44, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 50;
  --z-header: 60;
  --z-overlay: 90;
  --z-skip: 200;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0a0a;
    --bg-sunken: #060606;
    --surface: #131312;
    --surface-2: #1a1a19;
    --surface-3: #212120;
    --border: #272725;
    --border-strong: #383835;
    --text: #f5f4f2;
    --text-2: #a5a49f;
    --text-3: #7d7c77;

    --accent: var(--g-500);
    --accent-hover: var(--g-400);
    --accent-ink: #06170d;
    --accent-text: var(--g-400);
    --accent-soft: rgba(34, 197, 94, 0.13);

    --btn-accent-bg: var(--g-500);
    --btn-accent-bg-hover: var(--g-400);
    --btn-accent-fg: #06170d;
    --accent-line: rgba(34, 197, 94, 0.34);
    --accent-glow: rgba(34, 197, 94, 0.2);

    /* Ink panels flip to white against the black page. */
    --ink: #ffffff;
    --ink-2: #f4f3f0;
    --ink-3: #e8e7e3;
    --ink-border: #d9d7d1;
    --ink-text: #0a0a09;
    --ink-text-2: #575650;
    --ink-accent: var(--g-700);

    --header-bg: rgba(10, 10, 10, 0.68);
    --hairline: rgba(255, 255, 255, 0.08);
    --hairline-top: rgba(255, 255, 255, 0.06);
    --grid-line: rgba(255, 255, 255, 0.045);
    /* The ink panel is white here, so the grid has to be dark - and much
       fainter, because a dark line on white reads far stronger than a
       light line on black at the same alpha. */
    --ink-grid: rgba(10, 10, 9, 0.028);
    --ink-grid-strong: rgba(10, 10, 9, 0.045);
    --noise-opacity: 0.05;
    /* black mark on the white panel reads stronger than white on black */
    --watermark-opacity: 0.045;
    --scrim: rgba(0, 0, 0, 0.66);

    --shadow-xs:
      0 1px 1px rgba(0, 0, 0, 0.5),
      0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm:
      0 1px 1px rgba(0, 0, 0, 0.5),
      0 2px 5px -1px rgba(0, 0, 0, 0.45),
      0 6px 14px -5px rgba(0, 0, 0, 0.5);
    --shadow-md:
      0 1px 1px rgba(0, 0, 0, 0.5),
      0 4px 10px -2px rgba(0, 0, 0, 0.5),
      0 14px 30px -10px rgba(0, 0, 0, 0.6);
    --shadow-lg:
      0 1px 2px rgba(0, 0, 0, 0.5),
      0 10px 22px -6px rgba(0, 0, 0, 0.55),
      0 30px 60px -18px rgba(0, 0, 0, 0.7);
    --shadow-xl:
      0 2px 4px rgba(0, 0, 0, 0.55),
      0 18px 38px -10px rgba(0, 0, 0, 0.6),
      0 54px 100px -28px rgba(0, 0, 0, 0.8);
    --shadow-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
}

/* 2. Base & accessibility -------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  font-feature-settings: "cv11", "ss01";
  font-variant-ligatures: contextual;
}

/* Sticky header: keep in-page anchor targets clear of it. */
[id] {
  scroll-margin-top: calc(var(--header-h) + 24px);
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-underline-offset: 3px;
}

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

button {
  font: inherit;
  color: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

strong,
b {
  font-weight: 650;
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -200px;
  z-index: var(--z-skip);
  padding: 12px 20px;
  border-radius: var(--r-full);
  background: var(--text);
  color: var(--bg);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  transition: top var(--dur-2) var(--ease-spring);
}

.skip-link:focus {
  top: var(--s-4);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* 3. Texture & surfaces ---------------------------------------------------- */

/* A fine dot/grid field plus a soft radial bloom. Used on the hero and the
   CTA band so large flat areas have some air in them without adding colour. */
.texture {
  position: relative;
  isolation: isolate;
}

.texture::before,
.texture::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Retired: the grid field and bloom were removed in the calm pass. The
   class is still on a few category-page sections; it does nothing now. */
.texture::before,
.texture::after {
  display: none;
}

/* Hairline rule that fades at both ends — a 21st.dev-ish detail that keeps
   section seams from looking like hard table borders. */
.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(to right, transparent, var(--border), transparent);
}

/* 4. Typography ------------------------------------------------------------ */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 620;
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

h1 {
  font-size: var(--t-5xl);
  font-weight: 640;
  letter-spacing: var(--tr-display);
  line-height: var(--lh-display);
}

h2 {
  font-size: var(--t-4xl);
  letter-spacing: var(--tr-display);
  line-height: 1.06;
}

h3 {
  font-size: var(--t-xl);
}

h4 {
  font-size: var(--t-lg);
  letter-spacing: var(--tr-snug);
}

/* The one typographic flourish: an accent phrase set in Instrument Serif
   italic. Green in light mode, green in dark mode — no other colour. */
.accent {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.005em;
  color: var(--accent-text);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--text-3);
}

.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--border-strong);
  flex: none;
}

.center .eyebrow {
  justify-content: center;
}

.subhead {
  font-size: var(--t-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-2);
  max-width: 54ch;
  text-wrap: pretty;
}

.lede {
  font-size: var(--t-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-2);
  max-width: 60ch;
  text-wrap: pretty;
}

/* 5. Layout ---------------------------------------------------------------- */

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

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

.section {
  padding-block: var(--section-y);
}

.section-alt {
  background: var(--bg-sunken);
  border-block: 1px solid var(--border);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-width: 62ch;
  margin-bottom: var(--s-12);
}

.section-head > p:not(.eyebrow) {
  font-size: var(--t-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-2);
  text-wrap: pretty;
}

.section-head.center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

/* 6. Buttons & pills ------------------------------------------------------- */

.btn {
  --btn-lift: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font-size: var(--t-sm);
  font-weight: 560;
  letter-spacing: var(--tr-snug);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transform: translateY(var(--btn-lift));
  transition:
    transform var(--dur-2) var(--ease-spring),
    box-shadow var(--dur-2) var(--ease-out),
    background-color var(--dur-1) var(--ease-soft),
    border-color var(--dur-1) var(--ease-soft),
    color var(--dur-1) var(--ease-soft);
}

.btn svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.btn-sm {
  min-height: 38px;
  padding: 0 16px;
  font-size: var(--t-xs);
}

.btn-sm svg {
  width: 15px;
  height: 15px;
}

.btn-lg {
  min-height: 54px;
  padding: 0 28px;
  font-size: var(--t-base);
}

.btn-lg svg {
  width: 19px;
  height: 19px;
}

.btn-primary {
  background: var(--btn-accent-bg);
  color: var(--btn-accent-fg);
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.btn-primary:hover {
  --btn-lift: -1.5px;
  background: var(--btn-accent-bg-hover);
  box-shadow:
    var(--shadow-md),
    0 0 0 4px var(--accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
  box-shadow: var(--shadow-xs), var(--shadow-hairline);
}

.btn-secondary:hover {
  --btn-lift: -1.5px;
  border-color: var(--border-strong);
  background: var(--surface-2);
  box-shadow: var(--shadow-sm), var(--shadow-hairline);
}

.btn-ink {
  background: var(--ink);
  color: var(--ink-text);
  box-shadow: var(--shadow-sm);
}

.btn-ink:hover {
  --btn-lift: -1.5px;
  background: var(--ink-2);
  box-shadow: var(--shadow-md);
}

.btn-ghost {
  background: transparent;
  color: var(--text-2);
  border-color: transparent;
}

.btn-ghost:hover {
  color: var(--text);
  background: var(--surface-2);
}

.btn:active {
  --btn-lift: 0;
  transform: translateY(0) scale(0.975);
  transition-duration: var(--dur-1);
}

.btn.is-disabled,
.btn[aria-disabled="true"] {
  background: var(--surface-2);
  color: var(--text-3);
  border-color: var(--border);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

.center .cta-row {
  justify-content: center;
}

/* Small capsule labels */
.tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent-text);
  border: 1px solid var(--accent-line);
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.badge-irish {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 32px;
  padding: 0 14px 0 8px;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs), var(--shadow-hairline);
  font-size: var(--t-xs);
  font-weight: 560;
  color: var(--text-2);
  white-space: nowrap;
  width: -moz-fit-content;
  width: fit-content;
}

.badge-irish .flag {
  width: 18px;
  height: 12px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--hairline);
  flex: none;
}

/* 7. Header / nav ---------------------------------------------------------- */

/* Transparent while the page sits at the top so the hero's texture runs
   under it; once the page moves (or the mobile menu opens) it turns into a
   blurred glass bar with a hairline, so content scrolling beneath stays
   legible. The blur is on from the start and only the tint animates, since
   backdrop-filter itself cannot be transitioned smoothly. */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: transparent;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition:
    border-color var(--dur-3) var(--ease-soft),
    box-shadow var(--dur-3) var(--ease-soft),
    background-color var(--dur-3) var(--ease-soft);
}

.site-header.is-scrolled,
.site-header.is-solid {
  background: var(--header-bg);
  border-bottom-color: var(--border);
  box-shadow: 0 1px 0 var(--hairline), 0 8px 24px -16px rgba(10, 10, 9, 0.3);
}

.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: var(--tr-tight);
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

/* The mark on its own, no tile: it swaps to the white version in dark
   mode through the <picture> in the markup. */
.brand-mark {
  display: block;
  width: 24px;
  height: 24px;
  flex: none;
  transition: transform var(--dur-2) var(--ease-spring);
}

.brand:hover .brand-mark {
  transform: scale(1.06);
}

.brand-mark img {
  width: 24px;
  height: 24px;
  display: block;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: var(--r-full);
  color: var(--text-2);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition:
    color var(--dur-1) var(--ease-soft),
    background-color var(--dur-1) var(--ease-soft);
}

.site-nav a:hover {
  color: var(--text);
  background: var(--surface-3);
}

/* `.site-nav a` (0,1,1) outranks `.btn-primary` (0,1,0), so the button
   colours have to be restated here or the label inherits the muted nav
   grey and fails contrast against the green fill. */
.site-nav a.btn {
  margin-left: var(--s-3);
}

.site-nav a.btn-primary {
  background: var(--btn-accent-bg);
  color: var(--btn-accent-fg);
}

.site-nav a.btn-primary:hover {
  background: var(--btn-accent-bg-hover);
  color: var(--btn-accent-fg);
}

.site-nav a.btn-secondary {
  color: var(--text);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: var(--shadow-xs);
}

.nav-toggle span {
  display: block;
  width: 17px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--text);
  transition: transform var(--dur-3) var(--ease-spring), opacity var(--dur-2) var(--ease-soft);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.4);
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* 8. Motion & reveal ------------------------------------------------------- */

/* Scroll reveal is opt-in from JS: the `js-reveal` class is only added to
   <html> when JS runs AND prefers-reduced-motion is not set. Without it
   every [data-reveal] element is simply visible, so no-JS and
   reduced-motion visitors never see a blank page. */
/* No `will-change` here on purpose: it would promote every revealable
   element to its own compositing layer for the whole life of the page,
   which costs memory and buys nothing once the element has settled. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
}

.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-4) var(--ease-out),
    transform var(--dur-4) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.js-reveal [data-reveal="scale"] {
  transform: translateY(24px) scale(0.985);
}

.js-reveal [data-reveal="fade"] {
  transform: none;
}

/* Stagger helpers. Delays live in CSS (not inline style attributes) so the
   strict `style-src 'self'` CSP stays intact. */
.js-reveal .stagger > *:nth-child(1) { --reveal-delay: 0ms; }
.js-reveal .stagger > *:nth-child(2) { --reveal-delay: 60ms; }
.js-reveal .stagger > *:nth-child(3) { --reveal-delay: 120ms; }
.js-reveal .stagger > *:nth-child(4) { --reveal-delay: 180ms; }
.js-reveal .stagger > *:nth-child(5) { --reveal-delay: 240ms; }
.js-reveal .stagger > *:nth-child(6) { --reveal-delay: 300ms; }
.js-reveal .stagger > *:nth-child(7) { --reveal-delay: 340ms; }
.js-reveal .stagger > *:nth-child(n + 8) { --reveal-delay: 380ms; }

.js-reveal [data-reveal].d1 { --reveal-delay: 80ms; }
.js-reveal [data-reveal].d2 { --reveal-delay: 160ms; }
.js-reveal [data-reveal].d3 { --reveal-delay: 240ms; }
.js-reveal [data-reveal].d4 { --reveal-delay: 320ms; }

/* Interactive "glow border": a soft radial highlight that follows the
   pointer, drawn on a ::before so it never affects layout. JS sets --mx/--my. */
.glow {
  position: relative;
}

.glow::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 0%),
    var(--accent-line),
    transparent 70%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-soft);
  pointer-events: none;
}

.glow:hover::before,
.glow:focus-within::before {
  /* Retired in the calm pass: cards lift and change border on hover, and
     that is enough. */
  opacity: 0;
}

/* 9. Hero ------------------------------------------------------------------ */

.hero {
  position: relative;
  padding-top: clamp(56px, 8vw, 112px);
  padding-bottom: 0;
  overflow: clip;
}

/* One centred column: mark, headline, one sentence, the buttons, then the
   phone. Nothing beside the phone, nothing behind it. */
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  gap: clamp(40px, 5vw, 64px);
}

.hero-mark {
  display: block;
  width: 56px;
  height: 56px;
}

.hero-mark img {
  width: 100%;
  height: 100%;
}

/* The hero headline is set smaller than the global h1 scale on purpose.
   At the shared --t-5xl maximum of 74px, "Find local services" needs 670px
   and the hero's text column is 549px at 1280, so it broke after "Find
   local" and left "services" stranded on a line of its own. Capped here so
   the first clause holds one line from 1024 up, with the accent phrase
   dropped to its own line rather than left to wrap wherever it lands. */
#hero-heading {
  font-size: clamp(2.375rem, 1.4rem + 4.2vw, 4.5rem);
  text-wrap: balance;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
  min-width: 0;
}

.hero-copy h1 {
  max-width: 22ch;
}

/* "Find local services" on one line, the accent phrase on the next. */
#hero-heading .accent {
  display: block;
}

.hero-copy .subhead {
  max-width: 40ch;
  text-align: center;
}

.hero-copy .cta-row {
  justify-content: center;
  margin-top: var(--s-2);
}

.platform-note {
  font-size: var(--t-xs);
  color: var(--text-3);
  margin-top: calc(var(--s-2) * -1);
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2) var(--s-5);
  padding-top: var(--s-4);
  width: 100%;
}

.hero-proof li {
  display: inline-flex;
  /* baseline, not centre: at phone width these items wrap to two lines and
     a centred tick floated out beside the gap between them, reading as a
     stray mark rather than as the item's own bullet. */
  align-items: baseline;
  gap: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--text-2);
}

.hero-proof svg {
  width: 15px;
  height: 15px;
  flex: none;
  /* nudged down so a baseline-aligned tick sits with the cap height */
  transform: translateY(2px);
  color: var(--accent);
}

/* --- Phone frame ------------------------------------------------------- */

/* The phone runs off the bottom of the hero into the stats band, the way
   a product shot sits on a launch page: the top two thirds are enough. */
.hero-visual {
  position: relative;
  display: grid;
  place-items: start center;
  justify-self: center;
  width: min(340px, 78vw);
  min-width: 0;
  max-height: clamp(360px, 46vw, 520px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, #000 78%, transparent);
}

.phone-frame {
  position: relative;
  width: min(300px, 76vw);
  aspect-ratio: 660 / 1434;
  padding: 10px;
  border-radius: 46px;
  background: linear-gradient(170deg, #2b2b2b, #0b0b0b 42%, #1c1c1c);
  box-shadow:
    var(--shadow-xl),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 1px rgba(255, 255, 255, 0.22);
  transition: transform var(--dur-5) var(--ease-out);
}

.phone-frame picture {
  display: block;
  height: 100%;
}

.phone-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 36px;
  background: #0a0a0a;
}

.hero-visual .phone-frame {
  width: min(340px, 78vw);
}

/* Speaker notch */
.phone-frame::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 62px;
  height: 18px;
  border-radius: var(--r-full);
  background: #0a0a0a;
  z-index: 2;
}

.phone-frame-sm {
  width: min(216px, 62vw);
  padding: 7px;
  border-radius: 34px;
}

.phone-frame-sm img {
  border-radius: 27px;
}

.phone-frame-sm::after {
  top: 14px;
  width: 44px;
  height: 13px;
}

/* 10. Marquee -------------------------------------------------------------- */

.marquee {
  position: relative;
  padding-block: var(--s-6);
  border-block: 1px solid var(--border);
  background: var(--bg);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.marquee-track {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  gap: var(--s-10);
  padding-left: var(--s-10);
  animation: marquee 48s linear infinite;
}

.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track {
  animation-play-state: paused;
}

.marquee-track li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: var(--tr-snug);
  color: var(--text-3);
  white-space: nowrap;
}

.marquee-track li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.55;
  flex: none;
}

@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .marquee-track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    gap: var(--s-3) var(--s-6);
    padding-left: 0;
  }

  .marquee-track li.is-clone {
    display: none;
  }
}

/* 11. Bento features ------------------------------------------------------- */

.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-4);
}

.bento > * {
  min-width: 0;
}

.bento-cell {
  position: relative;
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
  padding: var(--s-6);
  padding-top: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs), var(--shadow-hairline);
  overflow: hidden;
  transition:
    transform var(--dur-2) var(--ease-spring),
    box-shadow var(--dur-3) var(--ease-out),
    border-color var(--dur-3) var(--ease-soft);
}

.bento-cell:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md), var(--shadow-hairline);
}

.bento-cell.span-3 { grid-column: span 3; }
.bento-cell.span-4 { grid-column: span 4; }
.bento-cell.span-6 { grid-column: span 6; }

/* --- Bento "demo" primitives -------------------------------------------
   Each cell can open with a miniature, CSS-drawn fragment of the product
   before the icon/title/caption block. Everything here is decoration and is
   marked aria-hidden in the markup; the cell's meaning lives in its text. */
.demo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-2);
  min-width: 0;
  min-height: 116px;
  margin-bottom: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}



.bento-cell.is-ink .demo {
  background: rgba(127, 127, 127, 0.1);
  border-color: var(--ink-border);
}

/* A two-message thread with an accepted offer */
.demo-msg {
  position: relative;
  min-width: 0;
  max-width: 86%;
  overflow-wrap: anywhere;
  padding: 8px 12px;
  border-radius: 13px 13px 13px 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: var(--t-2xs);
  line-height: 1.45;
  color: var(--text-2);
  box-shadow: var(--shadow-xs);
}

.demo-msg.is-mine {
  align-self: flex-end;
  border-radius: 13px 13px 4px 13px;
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

.bento-cell.is-ink .demo-msg {
  background: var(--ink-2);
  border-color: var(--ink-border);
  color: var(--ink-text-2);
}

.bento-cell.is-ink .demo-msg.is-mine {
  background: var(--ink-text);
  border-color: var(--ink-text);
  color: var(--ink);
}

/* A small status strip: label on the left, value on the right */
.demo-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px var(--s-3);
  min-width: 0;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  font-size: var(--t-2xs);
  color: var(--text-3);
}

.demo-row > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.demo-row b {
  font-size: var(--t-xs);
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  white-space: nowrap;
}

.demo-row .ok {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent-text);
  font-weight: 600;
}

.demo-row .ok svg {
  width: 12px;
  height: 12px;
}

.bento-cell.is-ink .demo-row {
  background: var(--ink-2);
  border-color: var(--ink-border);
  color: var(--ink-text-2);
}

.bento-cell.is-ink .demo-row b {
  color: var(--ink-text);
}

/* One big number, the way the feature grids on 21st.dev anchor a cell */
.demo-figure {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--s-2);
  min-width: 0;
  font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
  font-weight: 640;
  letter-spacing: var(--tr-display);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.demo-figure small {
  font-size: var(--t-2xs);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-3);
}

/* Five stars, the last one hollow */
.demo-stars {
  position: relative;
  display: flex;
  gap: 4px;
  color: var(--accent);
}

.demo-stars svg {
  width: 17px;
  height: 17px;
}

.demo-stars svg.off {
  color: var(--border-strong);
}

/* County chips, one selected */
.demo-chips {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.demo-chips span {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: var(--t-2xs);
  color: var(--text-3);
}

.demo-chips span.on {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-text);
  font-weight: 600;
}

.bento-cell .ico {
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: var(--surface-3);
  color: var(--text);
  border: 1px solid var(--border);
  flex: none;
}

.bento-cell .ico svg {
  width: 19px;
  height: 19px;
}

.bento-cell .ico.green {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-text);
}

.bento-cell h3 {
  font-size: var(--t-lg);
  letter-spacing: var(--tr-snug);
  margin-top: var(--s-2);
}

.bento-cell p {
  font-size: var(--t-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-2);
  text-wrap: pretty;
}

/* The wide "ink" cell that anchors the grid */
.bento-cell.is-ink {
  background: var(--ink);
  border-color: var(--ink-border);
  color: var(--ink-text);
  box-shadow: var(--shadow-md);
}

.bento-cell.is-ink h3 {
  color: var(--ink-text);
}

.bento-cell.is-ink p {
  color: var(--ink-text-2);
}

.bento-cell.is-ink .ico {
  background: rgba(127, 127, 127, 0.18);
  border-color: var(--ink-border);
  color: var(--ink-text);
}

.bento-stat {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: var(--t-3xl);
  font-weight: 640;
  letter-spacing: var(--tr-display);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.bento-stat small {
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-3);
}

.bento-cell.is-ink .bento-stat small {
  color: var(--ink-text-2);
}

/* 12. How it works --------------------------------------------------------- */

/* Horizontal 3-step row (used on category pages) */
.steps-row {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
}

.steps-row .step {
  counter-increment: step;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  padding-top: var(--s-10);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs), var(--shadow-hairline);
  transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-3) var(--ease-out);
}

.steps-row .step:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md), var(--shadow-hairline);
}

.steps-row .step::before {
  content: "0" counter(step);
  position: absolute;
  top: var(--s-5);
  left: var(--s-6);
  font-size: var(--t-xs);
  font-weight: 620;
  letter-spacing: var(--tr-wide);
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
}

.steps-row .step h3 {
  font-size: var(--t-lg);
  letter-spacing: var(--tr-snug);
}

.steps-row .step p {
  font-size: var(--t-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-2);
  text-wrap: pretty;
}

/* 13. At a glance (stats band) ------------------------------------------- */

/* Four true figures on one framed surface, ruled by hairlines rather than
   split into cards. Every number here is a fact about the product (county
   count, category count, fee, refund) - never a vanity metric. */
.stats {
  padding-block: clamp(40px, 5vw, 72px) clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--border);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stats-grid li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-2);
  min-width: 0;
  padding: var(--s-3) clamp(16px, 2.6vw, 32px);
  box-shadow: inset -1px 0 0 var(--border);
}

.stats-grid li:last-child {
  box-shadow: none;
}

.stat-num {
  display: flex;
  align-items: baseline;
  font-size: var(--t-3xl);
  font-weight: 640;
  letter-spacing: var(--tr-display);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.stat-label {
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
  color: var(--text-2);
  max-width: 20ch;
  text-wrap: pretty;
}

.stats-note {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--s-2);
  margin-top: var(--s-8);
  text-align: center;
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--text-3);
}

.stats-note svg {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 2px;
  color: var(--accent);
}

/* 13b. How it works (sticky stage + numbered steps) ----------------------- */

/* Desktop: the phone stays pinned on the left while the five steps scroll
   past on the right; JS swaps the screenshot to match whichever step sits
   in the middle of the viewport. Each step also carries its own copy of the
   screenshot (.how-figure) for the phone layout, where the list turns into
   a horizontal snap row. Only one of the two is ever displayed, so the
   accessibility tree never sees a screenshot twice. */
.how {
  overflow: clip;
}

.how-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

/* Pinned so the phone sits in the vertical middle of the viewport (or just
   under the header on short screens). The frame's height is its width x
   1434/660, so half of that is width x 1.0864. */
.how-stage {
  --stage-w: min(320px, 28vw);
  position: sticky;
  top: max(calc(var(--header-h) + 24px), calc(50vh - var(--stage-w) * 1.0864));
  display: grid;
  place-items: center;
}

.how-stage .phone-frame {
  width: var(--stage-w);
}

/* Room under the last step so the stage stays pinned while that step is
   in the middle of the viewport, instead of being dragged up by the end of
   the grid. */
.how-steps {
  padding-bottom: clamp(96px, 22vh, 220px);
}

.how-stage .how-shot {
  position: absolute;
  inset: 10px;
  opacity: 0;
  transform: scale(0.985);
  transition:
    opacity var(--dur-4) var(--ease-out),
    transform var(--dur-4) var(--ease-out);
}

.how-stage .how-shot.is-active {
  opacity: 1;
  transform: none;
}

.how-stage .how-shot img {
  border-radius: 36px;
}

/* The list: number column + body, with a spine between the numbers that
   fills green as each step is reached. */
.how-steps {
  display: flex;
  flex-direction: column;
}

.how-step {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: var(--s-5);
  padding-block: var(--s-8);
}

.how-step:first-child {
  padding-top: var(--s-2);
}

/* Spine: a faint track from this step's number down to the next one, and
   a green fill on top of it that grows once the step is done. */
.how-step::before,
.how-step::after {
  content: "";
  position: absolute;
  left: 21.5px;
  top: calc(var(--s-8) + 44px + 6px);
  bottom: -6px;
  width: 1px;
}

.how-step:first-child::before,
.how-step:first-child::after {
  top: calc(var(--s-2) + 44px + 6px);
}

.how-step::before {
  background: var(--border);
}

.how-step::after {
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 640ms var(--ease-out);
}

.how-step.is-done::after {
  transform: none;
}

.how-step:last-child::before,
.how-step:last-child::after {
  display: none;
}

.how-num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs), var(--shadow-hairline);
  font-size: var(--t-sm);
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  transition:
    background-color var(--dur-3) var(--ease-soft),
    border-color var(--dur-3) var(--ease-soft),
    color var(--dur-3) var(--ease-soft),
    box-shadow var(--dur-3) var(--ease-out),
    transform var(--dur-2) var(--ease-spring);
}

.how-step.is-done .how-num {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-text);
}

.how-step.is-active .how-num {
  background: var(--btn-accent-bg);
  border-color: var(--btn-accent-bg);
  color: var(--btn-accent-fg);
  box-shadow: var(--shadow-sm), 0 0 0 5px var(--accent-glow);
  transform: scale(1.06);
}

.how-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
  padding-top: 2px;
}

.how-ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: var(--s-2);
  border-radius: var(--r-sm);
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text);
  transition:
    background-color var(--dur-3) var(--ease-soft),
    border-color var(--dur-3) var(--ease-soft),
    color var(--dur-3) var(--ease-soft);
}

.how-ico svg {
  width: 19px;
  height: 19px;
}

.how-step.is-active .how-ico {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-text);
}

.how-body h3 {
  font-size: var(--t-xl);
  letter-spacing: var(--tr-tight);
  color: var(--text-2);
  transition: color var(--dur-3) var(--ease-soft);
}

.how-step.is-active .how-body h3 {
  color: var(--text);
}

.how-body p {
  font-size: var(--t-base);
  line-height: var(--lh-relaxed);
  color: var(--text-2);
  max-width: 44ch;
  text-wrap: pretty;
}

.how-figure {
  display: none;
  margin: 0;
}

/* 14. Categories ----------------------------------------------------------- */

/* One framed surface with hairline rules between the cells rather than 14
   floating cards. The 1px `gap` over a `--border` background paints the
   dividers, which keeps working at every auto-fill column count. */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm), var(--shadow-hairline);
  overflow: hidden;
}

/* Rules are drawn *inside* each cell rather than by a 1px grid gap, so the
   unused cells at the end of the last row stay plain surface instead of
   showing through as grey blocks. */
.category-grid > li {
  display: flex;
  box-shadow:
    inset -1px 0 0 var(--border),
    inset 0 -1px 0 var(--border);
}

/* The catch-all tile takes the width of two cells so the last row reads as
   a deliberate end to the list. */
.category-grid > li.is-ink-cell {
  grid-column: span 2;
  box-shadow: none;
}

@media (max-width: 620px) {
  .category-grid > li.is-ink-cell {
    grid-column: span 1;
  }
}

.category-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-5);
  background: transparent;
  text-decoration: none;
  isolation: isolate;
  transition: background-color var(--dur-2) var(--ease-soft);
}

/* A faint grid field that only shows up under the pointer. */
.category-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(90% 70% at 50% 0%, var(--accent-glow), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-soft);
  pointer-events: none;
}

.category-card:hover::before,
.category-card:focus-visible::before {
  opacity: 1;
}

.category-card:hover {
  background: var(--surface-2);
}

.category-card .icon {
  width: 38px;
  height: 38px;
  flex: none;
  padding: 8px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text);
  transition:
    background-color var(--dur-2) var(--ease-soft),
    color var(--dur-2) var(--ease-soft),
    border-color var(--dur-2) var(--ease-soft);
}

.category-card:hover .icon {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-text);
}

.category-card > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.category-card strong {
  font-size: var(--t-base);
  font-weight: 620;
  letter-spacing: var(--tr-snug);
  color: var(--text);
}

.category-card .desc {
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--text-3);
  text-wrap: pretty;
}

/* Arrow affordance that slides in on hover */
.category-card::after {
  content: "";
  position: absolute;
  right: var(--s-5);
  top: var(--s-5);
  width: 16px;
  height: 16px;
  background: currentColor;
  color: var(--text-3);
  opacity: 0;
  transform: translate(-4px, 4px);
  -webkit-mask: var(--arrow-mask) center / contain no-repeat;
  mask: var(--arrow-mask) center / contain no-repeat;
  transition: opacity var(--dur-2) var(--ease-soft), transform var(--dur-2) var(--ease-spring);
}

.category-card:hover::after,
.category-card:focus-visible::after {
  opacity: 1;
  transform: translate(0, 0);
}

:root {
  --arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E");
}

.category-grid > li.is-ink-cell {
  background: var(--ink);
}

.category-card.is-all {
  color: var(--ink-text);
}

.category-card.is-all::before {
  background-image: radial-gradient(90% 70% at 50% 0%, var(--accent-glow), transparent 70%);
  opacity: 1;
}

.category-card.is-all:hover {
  background: var(--ink-2);
}

.category-card.is-all strong {
  color: var(--ink-text);
}

.category-card.is-all .desc {
  color: var(--ink-text-2);
}

.category-card.is-all::after {
  color: var(--ink-text-2);
}

/* 15. Protection & trust --------------------------------------------------- */

/* 16. Providers ------------------------------------------------------------ */

.providers .container {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.providers .container > div:first-child {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  position: sticky;
  top: calc(var(--header-h) + 32px);
}

.perk-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}

.perk {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs), var(--shadow-hairline);
  transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-3) var(--ease-out);
}

.perk:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md), var(--shadow-hairline);
}

.perk > svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
  margin-bottom: var(--s-2);
}

.perk strong {
  font-size: var(--t-base);
  font-weight: 620;
  letter-spacing: var(--tr-snug);
}

.perk p {
  font-size: var(--t-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-2);
  text-wrap: pretty;
}

.perk.is-promo {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: var(--s-6);
  background: var(--ink);
  border-color: var(--ink-border);
  color: var(--ink-text);
  box-shadow: var(--shadow-md);
}

.perk.is-promo strong {
  color: var(--ink-text);
}

.perk.is-promo p {
  color: var(--ink-text-2);
}

.perk.is-promo > span:last-child {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.perk .price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: none;
  padding-right: var(--s-6);
  border-right: 1px solid var(--ink-border);
  font-size: var(--t-xl);
  font-weight: 640;
  letter-spacing: var(--tr-tight);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.perk .price small {
  font-size: var(--t-2xs);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-text-2);
}

/* 17. FAQ ------------------------------------------------------------------ */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.faq-item {
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease-soft), box-shadow var(--dur-3) var(--ease-out);
}

.faq-item[open] {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 56px;
  padding: var(--s-4) var(--s-5);
  cursor: pointer;
  list-style: none;
  font-size: var(--t-base);
  font-weight: 560;
  letter-spacing: var(--tr-snug);
  color: var(--text);
  transition: background-color var(--dur-1) var(--ease-soft);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover {
  background: var(--surface-2);
}

/* Plus → minus toggle drawn in CSS */
.faq-item summary::after {
  content: "";
  width: 12px;
  height: 12px;
  flex: none;
  background:
    linear-gradient(var(--text-3), var(--text-3)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--text-3), var(--text-3)) center / 1.5px 12px no-repeat;
  transition: transform var(--dur-3) var(--ease-spring);
}

.faq-item[open] summary::after {
  transform: rotate(135deg);
  background:
    linear-gradient(var(--accent), var(--accent)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 1.5px 12px no-repeat;
}

.faq-item > p {
  padding: 0 var(--s-5) var(--s-5);
  font-size: var(--t-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-2);
  max-width: 68ch;
  text-wrap: pretty;
}

/* 18. CTA band ------------------------------------------------------------- */

.cta-band {
  padding-block: var(--section-y);
}

.cta-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
  padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 64px);
  border-radius: var(--r-2xl);
  background: var(--ink);
  border: 1px solid var(--ink-border);
  color: var(--ink-text);
  text-align: center;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  isolation: isolate;
}

/* Soft green bloom + grid, clipped to the card */
.cta-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(70% 90% at 50% 0%, var(--accent-glow) 0%, transparent 62%);
  pointer-events: none;
}

/* Reversed logo mark bleeding off the corner, faint enough to read as a
   watermark. The <picture> swaps to the black mark in dark mode, where the
   ink panel is white. */
.cta-mark {
  position: absolute;
  right: -4%;
  bottom: -16%;
  z-index: -1;
  width: clamp(200px, 32%, 340px);
  aspect-ratio: 1;
  opacity: var(--watermark-opacity);
  transform: rotate(-8deg);
  pointer-events: none;
}

.cta-mark img {
  width: 100%;
  height: 100%;
}

.cta-card h2 {
  font-size: var(--t-4xl);
  max-width: 18ch;
}

.cta-card > p {
  font-size: var(--t-lg);
  line-height: var(--lh-relaxed);
  color: var(--ink-text-2);
  max-width: 52ch;
  text-wrap: pretty;
}

.cta-card .btn-secondary {
  background: rgba(127, 127, 127, 0.14);
  color: var(--ink-text);
  border-color: var(--ink-border);
  box-shadow: none;
}

.cta-card .btn-secondary:hover {
  background: rgba(127, 127, 127, 0.22);
}

.cta-card .btn.is-disabled,
.cta-card .btn[aria-disabled="true"] {
  background: transparent;
  color: var(--ink-text-2);
  border-color: var(--ink-border);
}

.cta-note {
  font-size: var(--t-xs);
  color: var(--ink-text-2);
}

/* 19. Footer --------------------------------------------------------------- */

.site-footer {
  position: relative;
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: var(--s-8);
  background: var(--bg-sunken);
  border-top: 1px solid var(--border);
  overflow: clip;
  isolation: isolate;
}

/* Dotted field, densest at the top edge and fading out before the legal
   line, so the footer reads as a surface rather than a dead band. */


.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(40px, 5vw, 64px);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
  max-width: 34ch;
}

.footer-brand p {
  font-size: var(--t-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-2);
  text-wrap: pretty;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
}

.footer-col h3 {
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--s-1);
}

.footer-col a {
  width: -moz-fit-content;
  width: fit-content;
  font-size: var(--t-sm);
  color: var(--text-2);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-soft), transform var(--dur-2) var(--ease-spring);
}

.footer-col a:hover {
  color: var(--text);
  transform: translateX(2px);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border);
  font-size: var(--t-xs);
  color: var(--text-3);
}

.footer-bottom .links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s-5);
}

.footer-bottom a {
  color: var(--text-3);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-soft);
}

.footer-bottom a:hover {
  color: var(--text);
}

/* Oversized wordmark bleeding off the bottom edge — the one "big" moment
   in the footer. Decorative, hidden from assistive tech in the markup. */
.footer-wordmark {
  display: flex;
  align-items: center;
  gap: 0.16em;
  width: 100%;
  margin-top: var(--s-8);
  margin-bottom: calc(var(--s-10) * -1);
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  font-size: clamp(2rem, 8.8vw, 8.5rem);
  font-weight: 640;
  letter-spacing: -0.055em;
  line-height: 0.82;
  text-align: center;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(to bottom, var(--border-strong), transparent 78%);
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
  pointer-events: none;
}

.footer-wordmark picture,
.footer-wordmark img {
  width: 0.82em;
  height: 0.82em;
  flex: none;
}

.footer-wordmark picture {
  opacity: 0.32;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 88%);
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
}

/* 20. Category pages ------------------------------------------------------- */

.hero-cat {
  padding-bottom: clamp(40px, 5vw, 72px);
}

.hero-cat .hero-inner {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
}

.hero-cat h1 {
  font-size: var(--t-4xl);
  max-width: 16ch;
}

.cat-visual {
  display: grid;
  place-items: center;
  min-width: 0;
}

.cat-tile {
  display: grid;
  place-items: center;
  width: min(240px, 60vw);
  aspect-ratio: 1;
  border-radius: var(--r-2xl);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg), var(--shadow-hairline);
  color: var(--accent);
  position: relative;
  overflow: hidden;
}

.cat-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 70% at 50% 0%, var(--accent-glow), transparent 68%);
}

.cat-tile svg {
  width: 44%;
  height: 44%;
  position: relative;
  stroke-width: 1.2;
}

.prose {
  max-width: 68ch;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.prose h2 {
  font-size: var(--t-3xl);
  margin-bottom: var(--s-2);
}

.prose p {
  font-size: var(--t-base);
  line-height: var(--lh-relaxed);
  color: var(--text-2);
  text-wrap: pretty;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs), var(--shadow-hairline);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--text-2);
  transition: border-color var(--dur-2) var(--ease-soft), transform var(--dur-2) var(--ease-spring);
}

.chip:hover {
  border-color: var(--accent-line);
  transform: translateY(-1px);
}

.related {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--r-xl);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.related h3 {
  font-size: var(--t-lg);
  letter-spacing: var(--tr-snug);
  margin-bottom: var(--s-1);
}

.related p {
  font-size: var(--t-sm);
  color: var(--text-2);
}

.related-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* 21. Legal pages / 404 ---------------------------------------------------- */

.legal {
  padding-block: clamp(48px, 6vw, 88px) var(--section-y);
}

.legal-head {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-bottom: var(--s-8);
  margin-bottom: var(--s-10);
  border-bottom: 1px solid var(--border);
}

.legal-head h1 {
  font-size: var(--t-4xl);
}

.legal-head .meta {
  font-size: var(--t-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.legal-body {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--gutter);
  font-size: var(--t-base);
  line-height: var(--lh-relaxed);
  color: var(--text-2);
}

.legal-body h2 {
  font-size: var(--t-xl);
  letter-spacing: var(--tr-tight);
  color: var(--text);
  margin-top: var(--s-12);
  margin-bottom: var(--s-4);
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.legal-body h2:first-child {
  margin-top: 0;
}

.legal-body h3 {
  font-size: var(--t-base);
  font-weight: 620;
  color: var(--text);
  margin-top: var(--s-8);
  margin-bottom: var(--s-3);
}

.legal-body p {
  margin-bottom: var(--s-4);
  text-wrap: pretty;
}

.legal-body ul,
.legal-body ol {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-6);
  padding-left: var(--s-5);
}

.legal-body li {
  position: relative;
  padding-left: var(--s-4);
  text-wrap: pretty;
}

.legal-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border-strong);
}

.legal-body a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.legal-body strong {
  color: var(--text);
}

.notfound {
  min-height: min(64vh, 560px);
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--section-y);
}

.notfound > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
}

.notfound .eyebrow {
  justify-content: center;
}

.notfound h1 {
  font-size: var(--t-4xl);
}

.notfound .subhead {
  text-align: center;
  max-width: 44ch;
}

/* 22. Responsive ----------------------------------------------------------- */

@media (max-width: 1023px) {
  /* Phone/tablet: no room for a pinned stage, so the steps become a
     horizontal snap row of cards, each with its own screenshot. */
  .how-stage {
    display: none;
  }

  .how-layout {
    display: block;
  }

  .how-steps {
    flex-direction: row;
    gap: var(--s-4);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: var(--s-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .how-steps::-webkit-scrollbar {
    display: none;
  }

  .how-step {
    flex: 0 0 min(320px, 84vw);
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: var(--s-5);
    padding: var(--s-5);
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xs), var(--shadow-hairline);
    scroll-snap-align: start;
  }

  .how-step:first-child {
    padding-top: var(--s-5);
  }

  .how-step::before,
  .how-step::after {
    display: none;
  }

  /* In a card the number is enough of a marker: the icon chip would sit
     right beside it as a second, competing badge, and the text reads better
     across the full card width than boxed into the column beside the number. */
  .how-ico {
    display: none;
  }

  .how-body {
    grid-column: 1 / -1;
    padding-top: 0;
  }

  .how-body h3 {
    font-size: var(--t-lg);
  }

  .how-body p {
    font-size: var(--t-sm);
  }

  .how-figure {
    display: flex;
    justify-content: center;
    grid-column: 1 / -1;
    padding-top: var(--s-2);
  }

  .how-figure .phone-frame-sm {
    width: min(200px, 56vw);
  }
}

@media (max-width: 1080px) {
  .hero-inner,
  .hero-cat .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .cat-visual {
    order: 2;
    margin-top: var(--s-6);
  }

  .providers .container {
    grid-template-columns: minmax(0, 1fr);
  }

  .providers .container > div:first-child {
    position: static;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: 1 / -1;
    max-width: 48ch;
  }
}

@media (max-width: 880px) {
  :root {
    --header-h: 52px;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    position: absolute;
    top: calc(100% + 8px);
    right: var(--gutter);
    left: var(--gutter);
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: var(--s-3);
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.985);
    transform-origin: top center;
    transition:
      opacity var(--dur-2) var(--ease-soft),
      transform var(--dur-3) var(--ease-spring),
      visibility 0s linear var(--dur-3);
  }

  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .site-nav a {
    min-height: 46px;
    padding: 0 var(--s-4);
    border-radius: var(--r-sm);
    font-size: var(--t-base);
  }

  .site-nav a.btn {
    margin-left: 0;
    margin-top: var(--s-2);
    justify-content: center;
    min-height: 46px;
    font-size: var(--t-sm);
  }

  .steps-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .bento-cell,
  .bento-cell.span-3,
  .bento-cell.span-4 {
    grid-column: span 3;
  }

  .bento-cell.span-6 {
    grid-column: span 6;
  }

  .perk.is-promo {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-4);
  }

  .perk .price {
    padding-right: 0;
    padding-bottom: var(--s-3);
    border-right: 0;
    border-bottom: 1px solid var(--ink-border);
    width: 100%;
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 20px;
  }

  body {
    font-size: 1rem;
  }

  .hero {
    padding-top: var(--s-10);
  }

  .hero-mark {
    width: 48px;
    height: 48px;
  }

  .hero-visual {
    max-height: 400px;
  }

  .bento-cell,
  .bento-cell.span-3,
  .bento-cell.span-4,
  .bento-cell.span-6 {
    grid-column: span 6;
  }

  .perk-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats-grid {
    row-gap: var(--s-6);
  }

  .stats-grid li:nth-child(2n) {
    box-shadow: none;
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-8);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .related {
    flex-direction: column;
    align-items: flex-start;
  }

  .cta-row .btn {
    width: 100%;
  }

  .section-head {
    margin-bottom: var(--s-8);
  }
}

@media (max-width: 400px) {
  .hero-visual,
  .hero-visual .phone-frame {
    width: min(280px, 82vw);
  }
}

/* Larger screens: let the hero breathe a little more. */
@media (min-width: 1440px) {
  :root {
    --container: 1240px;
  }
}

/* Print: legal pages are the ones people actually print. */
@media print {
  .site-header,
  .site-footer,
  .skip-link,
  .cta-band,
  .marquee {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .legal-body,
  .legal-head {
    max-width: none;
  }
}

/* ==========================================================================
   Cookie consent
   Rendered by site.js only while no choice is stored, so no-JS visitors never
   see it (nothing on the site could set a consent-gated cookie without JS
   anyway). Tokens flip for dark mode on their own.
   ========================================================================== */
.cookie-banner {
  position: fixed;
  inset-inline: var(--gutter);
  bottom: max(var(--s-4), env(safe-area-inset-bottom));
  z-index: var(--z-overlay);
  margin-inline: auto;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  background: var(--surface);
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg), var(--shadow-hairline);
  font-size: var(--t-sm);
  line-height: var(--lh-relaxed);
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner h2 {
  font-size: var(--t-base);
  font-weight: 620;
  letter-spacing: var(--tr-tight);
  color: var(--text);
}

.cookie-banner p {
  margin: 0;
  text-wrap: pretty;
}

.cookie-banner a {
  color: var(--text);
  text-underline-offset: 3px;
}

.cookie-banner .actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

@media (prefers-reduced-motion: no-preference) {
  .cookie-banner {
    animation: cookie-in var(--dur-3) var(--ease-out) both;
  }

  @keyframes cookie-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
  }
}

/* "Cookie settings" in the footer is a button (it acts on this page, it does
   not navigate) styled to sit among its sibling links. */
.link-button {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--text-3);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-soft);
}

.link-button:hover {
  color: var(--text);
}