/* Take Care chrome — the shared marketing-page CSS (fonts, tokens, reset,
   nav, footer, page shell) lifted verbatim from terms.astro, plus the blog
   styles. External (vs the per-page inline copies elsewhere) because ~390
   blog pages share it — one cached file instead of 165KB inlined per page.
   url() paths are relative to /assets/css/ (external CSS ignores <base>). */
    /* Guard: stray horizontal overflow must not widen the layout viewport
       (on iOS it pushes the scrolled nav pill past the screen edge). */
    html { overflow-x: clip; }

    /* ── Fonts (Suisse Int'l) ── */
    @font-face {
      font-family: 'Suisse Int\'l';
      src: url('../fonts/suisseintl-regular-webfont.woff2') format('woff2');
      font-weight: 400; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'Suisse Int\'l';
      src: url('../fonts/suisseintl-regularitalic-webfont.woff2') format('woff2');
      font-weight: 400; font-style: italic; font-display: swap;
    }
    @font-face {
      font-family: 'Suisse Int\'l';
      src: url('../fonts/suisseintl-medium-webfont.woff2') format('woff2');
      font-weight: 500; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'Suisse Int\'l';
      src: url('../fonts/suisseintl-semibold-webfont.woff2') format('woff2');
      font-weight: 600; font-style: normal; font-display: swap;
    }

    /* ── Design tokens (Cyclades v3.x) ── */
    :root {
      --kingfisher: #4A49BC;
      --kingfisher-0: #F0F0FF;
      --kingfisher-1: #E1E1F8;
      --kingfisher-2: #D1D1EC;
      --kingfisher-3: #37327A;
      --kingfisher-4: #2C275B;
      --black: #101820;
      --white: #FFFFFF;
      --stone: #D7D2CB;
      --stone-0: #F6F5F3;
      --stone-1: #F2F1EE;
      --stone-3: #727168;
      --stone-4: #343430;

      --size-0: 0px;
      --size-1: 4px;
      --size-2: 8px;
      --size-3: 12px;
      --size-4: 16px;
      --size-5: 24px;
      --size-6: 32px;
      --size-7: 40px;
      --size-8: 48px;
      --size-9: 56px;
      --size-10: 64px;
      --size-11: 72px;
      --size-12: 80px;
      --size-13: 96px;
      --size-14: 120px;
      --size-15: 160px;
      --size-16: 200px;

      --soft-dropshadow: 0 2px 12px rgba(0, 0, 0, 0.05);
      --kingfisher-light-dropshadow: 0 8px 24px rgba(74, 73, 188, 0.18);

      --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* ── Reset ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html, body { height: 100%; }

    body {
      font-family: 'Suisse Int\'l', 'Helvetica Neue', sans-serif;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      background: var(--stone-1);
      color: var(--black);
      line-height: 1.4;
      /* Page-leave fade used by the hero audience switcher (and any other
         link that wants the same transition). JS adds .is-leaving on the
         body just before window.location.href = … so the current page
         eases out before the next one paints. */
      transition: opacity 0.35s ease;
    }
    body.is-leaving { opacity: 0; }
    @media (prefers-reduced-motion: reduce) {
      body { transition: none; }
      body.is-leaving { opacity: 1; }
    }

    a { color: inherit; text-decoration: none; }

    /* ── Page shell ── */
    .page {
      position: relative;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    /* Vertical content-window keylines at the 1280px max-width edges (0.1 black).
       Both rails on a single pseudo-element so they anti-alias identically.
       z-index sits above section backgrounds so the keylines cut through every
       section (press strip, features, story, etc.) without being painted over. */
    /* Full-page vertical keylines removed. */


    /* ── Nav (transparent over hero; collapses to floating pill on scroll) ── */
    .nav {
      position: sticky;
      top: 0;
      z-index: 50;
      background: transparent;
      /* Full-width keyline below the nav row drawn as a box-shadow so it doesn't
         add to the nav's height (otherwise the hero's -80px margin-top would leave
         a 1px gap of body bg at the very top of the page). */
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
      transition: top 0.3s var(--ease-spring), box-shadow 0.25s ease;
    }

    /* On scroll the whole nav slides down 8px so the pill floats below the top
       edge, and gains 8px of horizontal padding so the pill is inset 8px from
       the viewport edges on every breakpoint. */
    .nav.is-scrolled {
      top: var(--size-2);
      padding-left: var(--size-2);
      padding-right: var(--size-2);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0);
    }

    /* Nav CTA: "Try Carefull" swaps to "Request a Demo" on scroll (animated). Both
       stack in one grid cell so the width never jumps. */
    .nav-cta-swap { position: relative; display: inline-grid; }
    .nav-cta-swap > .nav-cta { grid-area: 1 / 1; transition: opacity 0.32s var(--ease-spring), transform 0.32s var(--ease-spring); }
    .nav-cta--scrolled { opacity: 0; transform: translateY(-12px); pointer-events: none; }
    .nav.is-scrolled .nav-cta--default { opacity: 0; transform: translateY(12px); pointer-events: none; }
    .nav.is-scrolled .nav-cta--scrolled { opacity: 1; transform: translateY(0); pointer-events: auto; }

    .nav-inner {
      max-width: 1280px;
      margin: 0 auto;
      height: var(--size-12); /* 80px */
      position: relative;
      padding: 0 var(--size-5); /* 24px from content-window edges */
      display: grid;
      grid-template-columns: 1fr auto 1fr; /* logo | centered menu | actions */
      align-items: center;
      column-gap: var(--size-5); /* 24px between logo / menu / actions */
      transition: background-color 0.25s ease, border-radius 0.25s ease,
                  box-shadow 0.25s ease, max-width 0.3s var(--ease-spring),
                  backdrop-filter 0.25s ease,
                  -webkit-backdrop-filter 0.25s ease;
    }

    .nav .nav-logo    { justify-self: start; grid-column: 1; }
    .nav .nav-menu    { justify-self: center; grid-column: 2; }
    .nav .nav-actions { justify-self: end;    grid-column: 3; }
    .nav .nav-toggle  { justify-self: end;    grid-column: 3; }

    /* ── Nav menu (appears only when scrolled) ── */
    .nav-menu {
      display: flex;
      align-items: center;
      gap: 2px; /* items bunched tight; padding inside each link supplies breathing room */
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .nav.is-scrolled .nav-menu {
      opacity: 1;
      pointer-events: auto;
    }

    .nav-menu-item {
      position: relative;
    }

    .nav-menu-link {
      display: inline-flex;
      align-items: center;
      gap: var(--size-1);
      height: var(--size-8); /* 48px */
      padding: 0 var(--size-3);
      border-radius: 999px;
      background: transparent;
      border: 0;
      color: var(--black);
      font-family: inherit;
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
      cursor: pointer;
      white-space: nowrap;
      transition: background-color 0.2s ease, color 0.2s ease;
    }

    .nav-menu-link:hover,
    .nav-menu-link[aria-expanded="true"] {
      background: var(--kingfisher);
      color: var(--white);
    }

    .nav-menu-link:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(74, 73, 188, 0.25);
    }

    .nav-menu-chevron {
      width: var(--size-5); /* 24px */
      height: var(--size-5);
      transition: transform 0.25s ease, filter 0.2s ease;
      /* Source SVG fill is #101820 — keep as-is for the default black state */
    }

    /* Flip chevron to white when the link is hovered or open */
    .nav-menu-link:hover .nav-menu-chevron,
    .nav-menu-link[aria-expanded="true"] .nav-menu-chevron {
      filter: brightness(0) invert(1);
    }

    .nav-menu-link[aria-expanded="true"] .nav-menu-chevron {
      transform: rotate(180deg);
    }

    /* "For Business" mega-menu — hover-opens as an OVERLAY dropping below the
       pill (absolute, so it never pushes page content). Styled to read as a
       downward extension of the frosted pill; four options laid out across. */
    .nav-megamenu {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      /* Sibling of .nav-inner (not a child) so its backdrop blur isn't
         trapped by the pill's own backdrop root; centered to match. */
      margin: 0 auto;
      max-width: 1280px;
      z-index: 40;
      display: flex;
      gap: var(--size-2);
      padding: 0 var(--size-5);
      /* Same frosted glass as the scrolled nav pill, in every state. */
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border-radius: 0 0 16px 16px;
      box-shadow: var(--soft-dropshadow);
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      pointer-events: none;
      transition: max-height 0.42s var(--ease-spring), opacity 0.3s ease, padding 0.42s var(--ease-spring), background-color 0.25s ease;
    }

    /* While the business menu is open, the ancestors' backdrop-filters are
       handed off to the dropdown: an ancestor with backdrop-filter becomes a
       backdrop root, which stops the dropdown's own blur from sampling the
       page behind it. Ancestor bg opacity is bumped to compensate. */
    .nav.nav-business-open {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      background: rgba(0, 0, 0, 0.18);
    }
    .nav.is-scrolled.nav-business-open { background: transparent; }
    /* Scrolled: dropdown width matches the pill. The pill keeps its own
       frost — the dropdown is its sibling, so the blurs don't nest. */
    .nav.is-scrolled .nav-megamenu {
      left: var(--size-2);
      right: var(--size-2);
      max-width: calc(1280px - 2 * var(--size-4));
    }

    .nav.nav-business-open .nav-megamenu {
      max-height: 156px;
      opacity: 1;
      /* +8px vertical breathing room over the base size-2 / size-3. */
      padding: calc(var(--size-2) + 8px) var(--size-5) calc(var(--size-3) + 8px);
      pointer-events: auto;
    }

    /* Square the pill's bottom corners while open so the panel continues it. */
    .nav.is-scrolled.nav-business-open .nav-inner {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    .nav-mega-item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between; /* label left, chevron far right */
      gap: var(--size-2);
      height: var(--size-9); /* 56px */
      padding: 0 var(--size-4);
      border-radius: var(--size-3);
      border: 1px solid var(--kingfisher);
      background: var(--white);
      color: var(--black);
      font-size: 18px;
      font-weight: 500;
      text-decoration: none;
      white-space: nowrap;
      transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

    /* On hover the border melts into the fill — kingfisher on kingfisher. */
    .nav-mega-item:hover { background: var(--kingfisher); border-color: var(--kingfisher); color: var(--white); }

    .nav-mega-chevron { width: 20px; height: 20px; flex-shrink: 0; }
    .nav-mega-item:hover .nav-mega-chevron { filter: brightness(0) invert(1); }

    /* Hamburger toggle (mobile only) */
    .nav-toggle {
      display: none;
      width: var(--size-8);
      height: var(--size-8);
      border-radius: 999px;
      border: 2px solid var(--white);
      background: transparent;
      align-items: center;
      justify-content: center;
      padding: 0;
      cursor: pointer;
      transition: border-color 0.25s ease, background-color 0.25s ease;
    }

    .nav-toggle img {
      width: 20px;
      height: 20px;
      filter: brightness(0) invert(1);
      transition: filter 0.25s ease;
    }

    .nav-toggle .nav-toggle-icon-close { display: none; }
    .nav.open .nav-toggle .nav-toggle-icon-open  { display: none; }
    .nav.open .nav-toggle .nav-toggle-icon-close { display: inline-block; }

    /* Hamburger color flip when nav is in pill state */
    .nav.is-scrolled .nav-toggle { border-color: var(--kingfisher); }
    .nav.is-scrolled .nav-toggle img {
      filter: none;
    }

    /* Mobile drawer */
    .nav-drawer {
      position: absolute;
      top: 100%;
      left: var(--size-2);
      right: var(--size-2);
      margin-top: var(--size-2);
      display: none; /* shown only on mobile */
      flex-direction: column;
      gap: var(--size-3);
      padding: var(--size-4);
      background: var(--white);
      border-radius: var(--size-5);
      box-shadow: var(--modal-dropshadow);
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s var(--ease-spring),
                  padding 0.4s var(--ease-spring);
      padding-top: 0;
      padding-bottom: 0;
    }

    .nav.open .nav-drawer {
      max-height: 640px;
      padding-top: var(--size-4);
      padding-bottom: var(--size-4);
    }

    /* Drawer menu (mirrors the desktop nav-menu, expanded inline) */
    .nav-drawer-menu {
      display: flex;
      flex-direction: column;
      gap: var(--size-1);
    }

    .nav-drawer-item { position: relative; }

    .nav-drawer-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      gap: var(--size-2);
      height: var(--size-9);
      padding: 0 var(--size-3);
      border-radius: var(--size-2);
      background: transparent;
      border: 0;
      color: var(--black);
      font-family: inherit;
      font-size: 16px;
      font-weight: 600;
      text-decoration: none;
      cursor: pointer;
      transition: background-color 0.15s ease, color 0.15s ease;
    }

    .nav-drawer-link:hover,
    .nav-drawer-link[aria-expanded="true"] {
      background: var(--kingfisher);
      color: var(--white);
    }

    .nav-drawer-chevron {
      width: var(--size-5);
      height: var(--size-5);
      transition: transform 0.25s ease, filter 0.2s ease;
    }

    .nav-drawer-link:hover .nav-drawer-chevron,
    .nav-drawer-link[aria-expanded="true"] .nav-drawer-chevron {
      filter: brightness(0) invert(1);
    }

    .nav-drawer-link[aria-expanded="true"] .nav-drawer-chevron {
      transform: rotate(180deg);
    }

    .nav-drawer-sub {
      display: flex;
      flex-direction: column;
      padding-left: var(--size-3);
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s var(--ease-spring),
                  padding-top 0.3s var(--ease-spring),
                  padding-bottom 0.3s var(--ease-spring);
    }

    .nav-drawer-item--open .nav-drawer-sub {
      max-height: 400px;
      padding-top: var(--size-1);
      padding-bottom: var(--size-2);
    }

    .nav-drawer-sub a {
      display: flex;
      align-items: center;
      justify-content: space-between; /* label left, chevron far right */
      gap: var(--size-2);
      padding: var(--size-2) var(--size-3);
      border-radius: var(--size-2);
      color: var(--black);
      font-size: 14px;
      font-weight: 500;
      text-decoration: none;
      transition: background-color 0.15s ease, color 0.15s ease;
    }

    .nav-drawer-sub a:hover {
      background: var(--kingfisher);
      color: var(--white);
    }

    .nav-drawer-sub-chevron { width: 20px; height: 20px; flex-shrink: 0; }
    .nav-drawer-sub a:hover .nav-drawer-sub-chevron { filter: brightness(0) invert(1); }

    .nav-drawer .btn {
      width: 100%;
      justify-content: center;
    }

    /* Scrolled state — invert to a frosted-glass white pill (85% opaque + blur),
       inset 24px from each vertical content-window keyline */
    .nav.is-scrolled .nav-inner {
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border-radius: 16px;
      box-shadow: var(--soft-dropshadow);
      /* Pill inset 16px from the 1280 content keylines on desktop. */
      max-width: calc(1280px - 2 * var(--size-4));
    }

    /* Logo lockup: ambient rotating symbol + wordmark */
    .nav-logo {
      display: flex;
      align-items: center;
      gap: var(--size-3);
      cursor: pointer;
      flex-shrink: 0;
    }

    .nav-logo-symbol {
      width: 32px;
      height: 32px;
      flex-shrink: 0;
      animation: logoRotate 20s linear infinite;
      filter: brightness(0) invert(1);
      transition: filter 0.25s ease;
    }

    .nav-logo-type {
      height: 24px;
      width: auto;
      display: block;
      filter: brightness(0) invert(1);
      transition: filter 0.25s ease;
    }

    .nav.is-scrolled .nav-logo-symbol,
    .nav.is-scrolled .nav-logo-type {
      filter: none;
    }

    @keyframes logoRotate {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }

    @media (prefers-reduced-motion: reduce) {
      .nav-logo-symbol { animation: none; }
    }

    /* Right side: login + try carefull */
    .nav-actions {
      display: flex;
      align-items: center;
      gap: var(--size-2);
    }

    /* Buttons (per Cyclades spec — pill, 2px border, semibold) */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--size-2);
      height: var(--size-8); /* 48px small */
      padding: 0 var(--size-5);
      border-radius: 999px;
      border: 2px solid transparent;
      font-family: inherit;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    }

    .btn:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(74, 73, 188, 0.25);
    }

    .btn-primary-outlined {
      background: transparent;
      color: var(--kingfisher);
      border-color: var(--kingfisher);
    }
    .btn-primary-outlined:hover {
      background: var(--kingfisher);
      color: var(--white);
    }
    .btn-primary-outlined:active {
      background: var(--kingfisher-3);
      border-color: var(--kingfisher-3);
      color: var(--white);
    }

    .btn-primary-filled {
      background: var(--kingfisher);
      color: var(--white);
      border-color: var(--kingfisher);
    }
    .btn-primary-filled:hover {
      background: var(--kingfisher-3);
      border-color: var(--kingfisher-3);
    }
    .btn-primary-filled:active {
      background: var(--kingfisher-4);
      border-color: var(--kingfisher-4);
    }

    /* Inverted-outlined — white border + text over dark backgrounds */
    .btn-inverted-outlined {
      background: transparent;
      color: var(--white);
      border-color: var(--white);
    }
    .btn-inverted-outlined:hover {
      background: var(--white);
      color: var(--kingfisher);
    }
    .btn-inverted-outlined:active {
      background: var(--kingfisher-1);
      border-color: var(--kingfisher-1);
      color: var(--kingfisher);
    }
    .btn-inverted-outlined:focus-visible {
      box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
    }

    /* ── Hero ── */
    main {
      flex: 1;
    }

    .hero {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      background: linear-gradient(180deg, var(--kingfisher) 0%, var(--kingfisher-4) 100%);
      color: var(--white);
      /* Extend up under the transparent nav so it overlays the dark hero */
      margin-top: calc(-1 * var(--size-12));
      /* 70% of viewport height (plus the bleed-up so visible portion is 70vh) */
      min-height: calc(70vh + var(--size-12));
      display: flex;
      align-items: center;
      justify-content: center;
      /* Lifted above the page-wide vertical keylines (z-index: 5) so the dark hero
         isn't painted over by them — the hero owns its own white keylines instead. */
      z-index: 10;
    }

    .hero-media,
    .hero-overlay {
      position: absolute;
      inset: 0;
      z-index: -1;
    }

    .hero-media {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    .hero-overlay {
      /* kingfisher → kingfisher-4 gradient at 72% to tint the hero video,
         darker at the bottom. Hex values match --kingfisher / --kingfisher-4. */
      background: linear-gradient(180deg, rgba(74, 73, 188, 0.72) 0%, rgba(44, 39, 91, 0.72) 100%);
    }

    /* Hero vertical content-window keylines removed. */

    .hero-inner {
      width: 100%;
      max-width: 1280px;
      margin: 0 auto;
      /* Top padding ensures content clears the 80px transparent nav even when centered.
         Side padding is 40px — the headline below honors this as its internal gutter. */
      padding: calc(var(--size-12) + var(--size-8)) var(--size-7) var(--size-12);
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* Establish a container so the h1 can size itself off the content window width */
      container-type: inline-size;
    }

    /* Audience toggle (segmented control with sliding thumb) — lives above the hero h1 */
    .hero-toggle {
      position: relative;
      display: inline-flex;
      align-items: center;
      padding: var(--size-1);
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.5);
      border: 1px solid rgba(255, 255, 255, 0.24);
      margin-bottom: var(--size-6);
    }

    .hero-toggle-thumb {
      position: absolute;
      top: var(--size-1);
      bottom: var(--size-1);
      left: 0;
      width: 0;
      /* Selected pill reads as a standard inverted-filled button on the
         dark hero: solid white fill with kingfisher text (text color is
         flipped on aria-pressed below). */
      background: var(--white);
      border: 0;
      box-sizing: border-box;
      border-radius: 999px;
      transform: translateX(0);
      transition: transform 0.4s var(--ease-spring), width 0.4s var(--ease-spring);
      pointer-events: none;
      z-index: 0;
    }

    .hero-toggle-btn {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: var(--size-8); /* 48px */
      padding: 0 var(--size-4);
      border-radius: 999px;
      border: 0;
      background: transparent;
      font-family: inherit;
      font-size: 14px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.85);
      cursor: pointer;
      white-space: nowrap;
      transition: color 0.25s ease;
    }

    .hero-toggle-btn:hover { color: var(--white); }

    .hero-toggle-btn[aria-pressed="true"],
    .hero-toggle-btn[aria-pressed="true"]:hover {
      /* Kingfisher text on the white pill — matches btn-inverted-filled. */
      color: var(--kingfisher);
    }

    .hero-toggle-btn:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
    }

    .hero h1 {
      /* Fluid sizing tuned so the longer first line ("Bring financial safety to your")
         fits inside the 1200px content area at every viewport. Combined with the hard
         <br> in the markup, the headline is locked to exactly 2 lines. */
      font-weight: 600;
      line-height: 1.05;
      letter-spacing: -0.02em;
      width: 100%;
      max-width: 1200px;
      margin-bottom: var(--size-6);
      text-wrap: balance;
    }

    .hero p {
      font-size: 18px;
      font-weight: 400;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.92);
      max-width: 560px;
      margin: 0 auto var(--size-6);
    }

    .hero-actions {
      display: inline-flex;
      gap: var(--size-3);
      flex-wrap: wrap;
      justify-content: center;
    }

    .hero-actions .btn {
      height: var(--size-11); /* large 72px */
      padding: 0 var(--size-8);
      font-size: 18px;
    }

    /* Inverted-filled button — white on kingfisher backgrounds */
    .btn-inverted-filled {
      background: var(--white);
      color: var(--kingfisher);
      border-color: var(--white);
    }
    .btn-inverted-filled:hover {
      background: var(--kingfisher-0);
      border-color: var(--kingfisher-0);
    }
    .btn-inverted-filled:active {
      background: var(--kingfisher-1);
      border-color: var(--kingfisher-1);
    }
    .btn-inverted-filled:focus-visible {
      box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
    }

    /* ── Breakpoints ──
       Desktop:  ≥1024px
       Tablet:   601–1023px
       Mobile:   ≤600px
    */

    /* ── Audience quick-links row (between hero and partner row) ──
       "Carefull for" label on the left; 48px outline buttons on the
       right. Sits 24px below the hero and 16px above the partner row. */
    .audience-links-row {
      max-width: 1280px;
      margin: var(--size-5) auto var(--size-4); /* 24px from hero, 16px from partners */
      padding: 0 var(--size-7); /* 40px gutters — matches partner-row / loyalty-inner */
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--size-4);
    }

    .audience-links-label {
      font-size: 14px;
      font-weight: 400;
      color: var(--stone-3);
    }

    .audience-links-actions {
      display: flex;
      gap: var(--size-2); /* 8px between buttons */
      flex-wrap: wrap;
    }

    /* Full-bleed keyline (100% width) under the partner/Alzheimer's block,
       above the loyalty headline. 40px of space above and below the line. */
    .partner-keyline {
      padding: var(--size-7) 0; /* 40px above + below the line */
    }

    .partner-keyline::after {
      content: "";
      display: block;
      height: 1px;
      background: rgba(0, 0, 0, 0.1); /* matches the section keylines */
    }

    /* ── Partner row (carousel + featured partner card) ── */
    .partner-carousel-section {
      /* Top spacing comes from the audience-links-row above (16px); bottom
         padding removed so the keyline sits flush under the block. */
      padding: 0;
    }

    .partner-row {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 var(--size-7); /* 40px internal margin inside the 1280 frame */
      display: flex;
      gap: var(--size-4); /* 16px */
      align-items: stretch;
    }

    .partner-carousel {
      flex: 1;
      min-width: 0;
      background: var(--stone-1);
      border: 1px solid rgba(0, 0, 0, 0.05);
      border-radius: var(--size-5);
      box-shadow: var(--soft-dropshadow);
      padding: var(--size-6) 0;
      overflow: hidden;
      position: relative;
      /* Center the track vertically when the row stretches the card taller */
      display: flex;
      align-items: center;
    }

    .partner-carousel-track {
      display: flex;
      align-items: center;
      gap: var(--size-12);
      width: max-content;
      flex-shrink: 0; /* don't shrink inside flex parent */
      animation: partner-scroll 60s linear infinite;
    }

    .featured-partner {
      flex: 0 0 240px;
      background: var(--stone-1);
      border: 1px solid rgba(0, 0, 0, 0.05);
      border-radius: var(--size-5);
      box-shadow: var(--soft-dropshadow);
      padding: var(--size-4);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .featured-partner img {
      max-height: 96px;
      max-width: 100%;
      width: auto;
      height: auto;
      display: block;
    }

    .partner-carousel-logo {
      height: 28px;
      width: auto;
      flex-shrink: 0;
      display: block;
    }

    /* Per-partner height overrides for visual balance (matches storybook lockups) */
    .partner-carousel-logo[data-p="tucoemas"]   { height: 22px; }
    .partner-carousel-logo[data-p="synovus"]    { height: 20px; }
    .partner-carousel-logo[data-p="group-1"]    { height: 20px; }
    .partner-carousel-logo[data-p="uhc"]        { height: 32px; }
    .partner-carousel-logo[data-p="fnbo"]       { height: 30px; }
    .partner-carousel-logo[data-p="oceanair"]   { height: 30px; }
    .partner-carousel-logo[data-p="fnbatk"]     { height: 36px; }
    .partner-carousel-logo[data-p="neighbors"]  { height: 40px; }
    .partner-carousel-logo[data-p="secu"]       { height: 40px; }

    @keyframes partner-scroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    @media (prefers-reduced-motion: reduce) {
      .partner-carousel-track { animation: none; }
    }

    /* ── Loyalty section (headline + full-bleed divider + body, phone placeholder on right) ── */
    .loyalty-section {
      position: relative;
      /* Top padding removed — the keyline above the headline owns that
         separation now. Bottom keyline removed too (the audiences row +
         its divider that used to sit below the cards are gone). */
      padding: 0 0 var(--size-10);
      /* Clip the phone so the part that extends below the section is masked */
      overflow: hidden;
      /* Self-contained stacking context so the gradient stays at the bottom z-layer
         regardless of how the phone is positioned (absolute on desktop, relative on tablet). */
      isolation: isolate;
    }

    /* ── Features grid (3 columns; center always blank; rows alternate left/right) ── */
    .features-section {
      background: var(--stone);
      padding: var(--size-12) 0;
    }

    /* Headline at the top of the features block. container-type lives here (not on the
       section) so cqi references the 1280-capped container — matches the loyalty headline. */
    .features-header {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 var(--size-7) var(--size-12); /* 40px gutter + 80px before first row */
      container-type: inline-size;
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.8s ease, transform 0.9s var(--ease-spring);
    }

    .features-header.in-view {
      opacity: 1;
      transform: translateY(0);
    }

    .features-headline {
      font-weight: 600;
      line-height: 1.05;
      letter-spacing: -0.02em;
      color: var(--black);
      margin: 0;
      max-width: 920px; /* matches .loyalty-headline */
    }

    /* Kingfisher 8px underline that builds left→right under "never" after the
       headline finishes its build-in. */
    .features-headline-underline {
      position: relative;
    }

    .features-headline-underline::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -4px;
      height: 8px;
      background: var(--kingfisher);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 0.8s var(--ease-spring);
    }

    .features-header.in-view .features-headline-underline::after {
      transform: scaleX(1);
      transition-delay: 1.1s; /* after the headline build-in finishes */
    }

    /* ── Laptop opening animation ─────────────────────────────────────────────
       Tall stage with 3D perspective. The screen hinges at its bottom edge:
       closed = lying flat with display facing down, open = ~8° back from
       vertical. Driven by scroll position (`--laptop-angle` set in JS), so it
       opens as the user scrolls into the section and closes back up if they
       scroll the other way. */
    .features-laptop-stage {
      /* No fixed height — stage hugs the laptop content. Negative top margin
         pulls the device up tight against the headline; when the screen is
         fully open it can creep over the copy by a few pixels (acceptable
         per design). align-items: flex-end keeps the base on the keyline of
         the features-row below. */
      display: flex;
      align-items: flex-end;
      justify-content: center;
      perspective: 1800px;
      perspective-origin: center 32%;
      margin: calc(-1 * var(--size-4)) 0 0;
    }

    .features-laptop {
      /* 70% of the 1280 content frame, capped at 70vw on narrower viewports */
      width: min(896px, 70vw);
      transform-style: preserve-3d;
    }

    .features-laptop-screen {
      width: 100%;
      aspect-ratio: 16 / 10;
      background: linear-gradient(135deg, #1f1f1f 0%, #2d2d2d 100%);
      border-radius: 14px 14px 4px 4px;
      transform-origin: center bottom;
      transform-style: preserve-3d;
      /* Fully-open state is rotateX(0) — screen is perpendicular to viewer so
         there's no perspective foreshortening (looks flat). JS interpolates
         between -90deg (closed) and 0deg (open). */
      transform: rotateX(var(--laptop-angle, 0deg));
      transition: transform 0.15s linear;
      position: relative;
      box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.25);
    }

    .features-laptop-display {
      position: absolute;
      inset: 14px 14px 20px 14px;
      background:
        linear-gradient(135deg, var(--kingfisher) 0%, var(--kingfisher-3) 100%);
      border-radius: 4px;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }

    /* Base: wider than the screen, slightly chunkier profile */
    .features-laptop-base {
      width: 115%;
      height: 28px;
      margin-left: -7.5%;
      margin-top: -2px;
      background: linear-gradient(180deg, #e8e8e8 0%, #a0a0a0 100%);
      border-radius: 4px 4px 16px 16px;
      position: relative;
      /* Tiny shadow at the bottom — grounds the laptop on the keyline below */
      box-shadow: 0 8px 12px -4px rgba(0, 0, 0, 0.22);
    }

    /* Hinge / cap detail on TOP of the base, centered — flush with the top
       edge so it reads as a protrusion from the hinge. Only the bottom corners
       are radiused so the top sits cleanly on the base's top edge. */
    .features-laptop-base::after {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 140px;
      height: 11px;
      background: linear-gradient(180deg, #5d5d5d 0%, #8a8a8a 100%);
      border-radius: 0 0 16px 16px;
    }

    @media (prefers-reduced-motion: reduce) {
      .features-laptop-screen {
        transition: none;
        transform: rotateX(0deg);
      }
    }

    /* Each row is full-bleed (viewport edge to edge) so the animated keyline at its
       top extends past the 1280 content frame, building across the whole screen. */
    .features-row {
      position: relative;
      padding: var(--size-12) 0;
    }

    /* Animated keyline — only inside the 1280 frame (between the vertical keylines),
       0.1 black, scales left→right with a dramatic tapered ease */
    .features-row::before {
      content: '';
      position: absolute;
      top: 0;
      left: max(0px, calc(50% - 640px));
      right: max(0px, calc(50% - 640px));
      height: 1px;
      background: rgba(0, 0, 0, 0.1);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 1.4s cubic-bezier(0.05, 0.7, 0.1, 1);
    }

    .features-row.in-view::before {
      transform: scaleX(1);
    }

    .features-row-inner {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 var(--size-7); /* 40px gutter inside the 1280 frame */
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
    }

    .features-row-inner .feature { grid-column: 1; }
    .features-row--right .features-row-inner .feature { grid-column: 3; }

    /* Feature card builds in from the bottom as its row scrolls into view */
    .feature {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--size-4);
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.6s ease 0.25s, transform 0.9s var(--ease-spring) 0.25s;
    }

    .features-row.in-view .feature {
      opacity: 1;
      transform: translateY(0);
    }

    @media (prefers-reduced-motion: reduce) {
      .features-header,
      .features-row::before,
      .feature {
        transition: none;
        opacity: 1;
        transform: none;
      }
    }

    .feature-title {
      font-size: 24px;
      font-weight: 600;
      line-height: 1.3;
      letter-spacing: 0;
      color: var(--black);
      margin: 0;
    }

    .feature-body {
      font-size: 16px;
      font-weight: 400;
      line-height: 1.4;
      color: var(--stone-4);
      margin: 0;
    }

    .feature .btn {
      margin-top: var(--size-3);
    }

    .loyalty-content {
      /* Transparent wrapper — horizontal margin lives on .loyalty-inner */
      padding: 0;
    }

    .loyalty-inner {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 var(--size-7); /* 40px internal margin inside the 1280 frame */
      position: relative;
      container-type: inline-size;
    }

    .loyalty-headline {
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: -0.01em;
      color: var(--black);
      margin: var(--size-6) 0 0; /* +32px above */
      /* Capped narrower on desktop so the sentence wraps to ~3 lines.
         Tablet/mobile override below restores full width. */
      max-width: min(80%, 720px);
    }

    /* Compact stat subline anchored to the left. */
    /* Two-thirds stat + its dot are hidden across all viewports. (Was
       display:flex, which overrode the markup's [hidden] attribute — so
       it kept showing. Forced off here.) */
    .loyalty-subline {
      display: none;
      align-items: flex-start;
      gap: var(--size-4); /* 16px between dot and text */
      font-size: 16px;
      font-weight: 400;
      line-height: 1.5;
      color: var(--stone-4);
      margin: var(--size-8) 0 0;
      max-width: 480px;
    }
    /* Blinking marker dot replacing the previous chevron. Sits beside the
       first line of subline copy; loops between kingfisher and kingfisher-2. */
    .loyalty-subline-dot {
      flex-shrink: 0;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-top: 7px; /* optical alignment with the first line of text */
      background: var(--kingfisher);
      animation: loyaltyDotBlink 1.4s ease-in-out infinite;
    }

    @keyframes loyaltyDotBlink {
      0%, 100% { background: var(--kingfisher); }
      50%      { background: var(--kingfisher-2); }
    }

    @media (prefers-reduced-motion: reduce) {
      .loyalty-subline-dot { animation: none; }
    }
    .loyalty-subline strong { font-weight: 600; color: var(--black); }

    /* Full-bleed mid-page keyline — same 1px / --stone as the other keylines.
       208px above (original 80px + 128px), 32px below to the body copy. */
    .loyalty-divider {
      border: 0;
      height: 1px;
      background: var(--stone);
      margin: calc(var(--size-12) + 128px) 0 var(--size-6);
      width: 100%;
    }

    .loyalty-body {
      display: flex;
      flex-direction: column;
      gap: var(--size-5);
      max-width: 400px;
      /* Scroll-driven build-in (gentle ease, slight stagger after the headline) */
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.9s ease-out 0.2s, transform 1.1s var(--ease-spring) 0.2s;
    }

    .loyalty-section.in-view .loyalty-headline,
    .loyalty-section.in-view .loyalty-body {
      opacity: 1;
      transform: translateY(0);
    }

    @media (prefers-reduced-motion: reduce) {
      .loyalty-headline,
      .loyalty-body {
        opacity: 1;
        transform: none;
        transition: none;
      }
    }

    .loyalty-body p {
      font-size: 18px;
      font-weight: 400;
      line-height: 1.5;
      color: var(--black);
      margin: 0;
    }

    .loyalty-body strong {
      font-weight: 600;
    }

    /* Phone — positioned to the section so it spans both content rows.
       Right edge sits 40px inside the 1280 frame (aligned with the content gutter).
       Outer bezel is the device chassis; the inner screen carries the screenshot.
       --phone-y is driven by scroll position via JS — phone rises from below the
       bottom keyline (masked by section overflow:hidden) as the user scrolls. */
    .loyalty-phone {
      position: absolute;
      /* Right edge anchored to the far-right 1280px keyline (sits in the margin) */
      right: max(0px, calc(50% - 640px));
      top: 50%;
      transform: translateY(calc(-50% + var(--phone-y, 220px)));
      transition: transform 0.15s ease-out;
      width: 707px; /* natural design size of loyalty-phone-3.png (707×720) */
      max-width: 100%;
      /* Aspect-ratio gives the box a definite height so the notification can
         position itself proportionally (in %s) regardless of viewport size. */
      aspect-ratio: 707 / 720;
      z-index: 2;
      will-change: transform;
    }

    .loyalty-phone > img {
      display: block;
      width: 100%;
      height: auto;
    }

    /* Frosted-glass notification — looping build-in animation, drops down into place */
    .loyalty-notification {
      position: absolute;
      /* Proportional position keeps the notification attached to the phone. Width is
         fixed so the notification stays the same physical size at every breakpoint. */
      top: 15.5%;
      left: 18.7%;
      width: 320px;
      z-index: -1;
      display: flex;
      align-items: center;
      gap: var(--size-3);
      padding: var(--size-3) var(--size-4);
      background: rgba(255, 255, 255, 0.5);
      backdrop-filter: blur(14px) saturate(160%);
      -webkit-backdrop-filter: blur(14px) saturate(160%);
      border-radius: 16px;
      box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.16),
        0 2px 6px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
      transform-origin: top center;
      animation: notification-loop 6s ease-in-out infinite;
    }

    @keyframes notification-loop {
      0%   { opacity: 0; transform: translateY(-24px) scale(0.92); }
      8%   { opacity: 1; transform: translateY(0)     scale(1); }
      80%  { opacity: 1; transform: translateY(0)     scale(1); }
      92%  { opacity: 0; transform: translateY(-24px) scale(0.92); }
      100% { opacity: 0; transform: translateY(-24px) scale(0.92); }
    }

    @media (prefers-reduced-motion: reduce) {
      .loyalty-notification { animation: none; opacity: 1; transform: none; }
    }

    .loyalty-notification-icon {
      width: var(--size-7);
      height: var(--size-7);
      flex-shrink: 0;
      background: var(--kingfisher);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .loyalty-notification-icon img {
      width: 22px;
      height: 22px;
      filter: brightness(0) invert(1);
    }

    .loyalty-notification-content {
      flex: 1;
      min-width: 0;
    }

    .loyalty-notification-title {
      font-size: 14px;
      font-weight: 600;
      line-height: 1.3;
      color: var(--black);
    }

    .loyalty-notification-subtitle {
      font-size: 13px;
      font-weight: 400;
      line-height: 1.3;
      color: var(--stone-3);
      margin-top: 2px;
    }

    /* Bottom kingfisher glow removed along with the phone — section no
       longer needs the radial halo behind the device. */


    /* ── Press strip — keylines extend full bleed, carousel runs only between the
       vertical content-window edges (the 1280 frame). ── */
    /* Press strip — section is transparent now; the rounded container
       inside carries the same stone-1 chrome as the partner carousel
       at the top of the page. */
    .press-strip {
      position: relative;
      /* No top padding — the gap above the carousel comes from the
         loyalty section's bottom padding (the audiences row that used to
         sit between them was removed). */
      padding: 0 var(--size-7) var(--size-6);
    }

    .press-strip-inner {
      max-width: 1200px;
      margin: 0 auto;
      background: var(--stone-1);
      border-radius: var(--size-5);
      box-shadow: var(--soft-dropshadow);
      padding: var(--size-7) 0;
      overflow: hidden;
    }

    .press-strip-track {
      display: flex;
      align-items: center;
      gap: var(--size-12);
      width: max-content;
      flex-shrink: 0;
      animation: press-scroll 42s linear infinite;
    }

    .press-strip-logo {
      height: 28px;
      width: auto;
      flex-shrink: 0;
      display: block;
      opacity: 0.6;
    }

    /* Per-logo height tweaks for optical balance across mismatched aspect ratios */
    .press-strip-logo[data-l="nyt"]         { height: 36px; }  /* NYT +60% */
    .press-strip-logo[data-l="techcrunch"]  { height: 24px; }
    .press-strip-logo[data-l="yahoo"]       { height: 22px; }
    .press-strip-logo[data-l="aarp"]        { height: 21px; }  /* AARP -20% */
    .press-strip-logo[data-l="abc"]         { height: 36px; }
    .press-strip-logo[data-l="barrons"]     { height: 22px; }  /* Barrons +10% */
    .press-strip-logo[data-l="cnbc"]        { height: 38px; }  /* CNBC +60% */
    .press-strip-logo[data-l="investment"]  { height: 31px; }  /* Investment News +30% */
    .press-strip-logo[data-l="marketwatch"] { height: 20px; }  /* MarketWatch -10% */

    @keyframes press-scroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    @media (prefers-reduced-motion: reduce) {
      .press-strip-track { animation: none; }
    }


    /* ── Story section (page bg switches back to stone-1 here; the press strip's
       bottom border serves as the boundary keyline so we don't double it up) ── */
    .story-section {
      background: var(--stone-1);
    }

    .story-header {
      max-width: 1280px;
      margin: 0 auto;
      /* 40px top + left/right on desktop, 24px bottom. */
      padding: var(--size-7) var(--size-7) var(--size-5);
      container-type: inline-size;
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.8s ease, transform 0.9s var(--ease-spring);
    }

    .story-header.in-view {
      opacity: 1;
      transform: translateY(0);
    }

    .story-headline {
      font-weight: 600;
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: var(--black);
      margin: 0;
      max-width: 80%;
    }

    /* Subline below the story headline — long body copy that supports the
       headline above. 18px / regular weight / stone-4. */
    .story-subline {
      font-size: 18px;
      font-weight: 400;
      line-height: 1.5;
      color: var(--stone-4);
      margin: var(--size-4) 0 0;
      max-width: 80%;
    }


    /* ── Ecosystem rings (scroll-driven concentric circles, built outward from center).
       Each ring scales from 0 → 1 over its own slice of scroll progress. ── */
    .ecosystem {
      /* Matched to the press-strip stone above so the two sections read as
         one continuous band. */
      background: var(--stone);
      position: relative;
    }

    /* Track gives scroll room so the sticky stage stays pinned long enough
       for all four rings to build in. */
    .ecosystem-track {
      height: 115vh;
      position: relative;
    }

    .ecosystem-stage {
      position: sticky;
      top: 0;
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-sizing: border-box;
    }

    .ecosystem-rings {
      position: relative;
      width: min(72vw, 74vh);
      aspect-ratio: 1;
      /* Settled position: pushed to the bottom of the stage and dipped 140px
         below the section boundary for the sunrise look. The rings start
         translated up (close to the headline) and slide down to this resting
         position as the outer rings build — driven by --rings-y in JS. */
      margin-top: auto;
      margin-bottom: -140px;
      transform: translateY(var(--rings-y, 0));
      transition: transform 0.18s linear;
      will-change: transform;
    }

    /* Growing sunrise glow behind the rings — linear top-to-bottom gradient
       (kingfisher above, orange below) matching the loyalty section hex codes.
       Heavy blur for soft halo edges (matches loyalty section's blur amount).
       Scale and opacity are driven by --glow-scale and --glow-opacity in JS;
       opacity uses a slow-build-then-fast-finish curve. */
    .ecosystem-rings::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: linear-gradient(
        to bottom,
        #ADADF8 0%,
        #FAC77A 100%
      );
      filter: blur(48px);
      transform: translate(-50%, -50%) scale(var(--glow-scale, 0));
      opacity: var(--glow-opacity, 0);
      transition: transform 0.18s linear, opacity 0.18s linear;
      pointer-events: none;
      will-change: transform, opacity;
    }

    .ring-group {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    /* Concentric sizes — smaller center + bigger steps so each annular band is wider
       and the curved labels have more space to breathe. Equal 28% bands. */
    .ring-group[data-ring="3"] { width: 100%; height: 100%; }
    .ring-group[data-ring="2"] { width: 72%;  height: 72%;  }
    .ring-group[data-ring="1"] { width: 44%;  height: 44%;  }
    .ring-group[data-ring="0"] { width: 24%;  height: 24%;  }

    .ring-bg {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      transform: scale(var(--p, 0));
      transform-origin: center center;
      transition: transform 0.12s ease-out;
      will-change: transform;
    }

    /* Each outer ring overlays the page bg at low opacity so they nest visibly */
    .ring-group[data-ring="3"] .ring-bg { background: rgba(74, 73, 188, 0.06); }
    .ring-group[data-ring="2"] .ring-bg { background: rgba(74, 73, 188, 0.10); }
    .ring-group[data-ring="1"] .ring-bg { background: rgba(74, 73, 188, 0.16); }
    .ring-center                        { background: var(--kingfisher); }

    .ring-label {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      opacity: var(--p, 0);
      transition: opacity 0.25s ease;
    }

    .ring-label text {
      font-family: inherit;
      font-size: 18px;
      font-weight: 400;
      letter-spacing: 0;
      fill: var(--black);
    }

    .ring-center-label {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--white);
      font-family: inherit;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: -0.01em;
      opacity: var(--p, 0);
      transition: opacity 0.25s ease;
      pointer-events: none;
    }

    /* ── Pillars section (kingfisher backdrop, 3-column build-in) ── */
    .pillars-section {
      background: var(--kingfisher);
      color: var(--white);
      /* Symmetric top/bottom padding — block hugs the content tightly. */
      padding: var(--size-9) 0;
      /* Stack above the ecosystem section so the rings + glow that extend past
         the section boundary tuck behind the kingfisher block instead of
         rendering over it. The sticky stage's transform/will-change creates
         its own stacking context which would otherwise paint above siblings. */
      position: relative;
      z-index: 1;
    }

    .pillars-inner {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 var(--size-7);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--size-8);
      container-type: inline-size;
    }

    .pillar {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--size-5);
      /* Each pillar builds in from below with a staggered delay so the row
         reads left → right when the section enters view. */
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.6s ease, transform 0.7s var(--ease-spring);
    }
    .pillar:nth-child(2) { transition-delay: 0.18s; }
    .pillar:nth-child(3) { transition-delay: 0.36s; }

    .pillars-section.in-view .pillar {
      opacity: 1;
      transform: translateY(0);
    }

    .pillar-title {
      font-size: clamp(32px, 4cqi, 48px);
      font-weight: 600;
      line-height: 1.15;
      letter-spacing: -0.01em;
      margin: 0;
    }

    .pillar-body {
      font-size: 16px;
      line-height: 1.5;
      margin: 0;
      max-width: 360px;
    }


    /* ── Testimonials (featured oversized quote + arrow-driven 12-card carousel) ── */
    .testimonials-section {
      background: var(--stone-1);
      padding: var(--size-13) 0 0;
      overflow: hidden; /* clip card track when scrolled past the right edge */
      /* Stack above the ecosystem section so the rings glow (which scales past
         the ecosystem boundary and is blurred 48px) can't paint into here. */
      position: relative;
      z-index: 1;
    }

    .testimonials-inner {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 var(--size-7);
    }

    .testimonial-featured {
      margin: 0;
      padding: 0;
    }

    .testimonial-featured-quote {
      font-size: clamp(36px, 6cqi, 80px);
      font-weight: 700;
      line-height: 1.05;
      letter-spacing: -0.02em;
      color: var(--kingfisher);
      text-align: center;
      margin: 0 0 var(--size-7);
    }

    .testimonial-featured-cite {
      display: block;
      text-align: center;
      font-size: 16px;
      font-weight: 600;
      color: var(--kingfisher);
      font-style: normal;
    }

    /* Right-aligned arrow controls now live inside the rounded carousel
       container, sitting above the track of cards. */
    .testimonial-controls {
      display: flex;
      justify-content: flex-end;
      gap: var(--size-4);
      margin-bottom: var(--size-5);
    }

    /* Full-bleed horizontal keyline — same 1px/--stone treatment as other dividers. */
    .section-keyline {
      border: 0;
      margin: 0;
      height: 1px;
      width: 100%;
      background: var(--stone);
    }

    /* Storybook .btn-icon pattern — icon-only square button. Pairs with .btn-sm
       (48px), .btn-md (56px), .btn-lg (72px). All buttons keep the pill radius.
       Source: Carefull design system CYCLADES.md §6 + storybook/styles.css. */
    .btn-icon { padding: 0; }
    .btn-icon.btn-sm { width: var(--size-8); }   /* 48px */
    .btn-icon.btn-md { width: var(--size-9); }   /* 56px */
    .btn-icon.btn-lg { width: var(--size-11); }  /* 72px */

    /* Storybook icon filter: tint black icon SVGs to --kingfisher in default
       state, swap to white on hover/active for outlined buttons or in filled
       buttons. Matches storybook/styles.css. */
    .btn img {
      filter: none;
      transition: filter 0.15s ease;
    }
    .btn-primary-outlined:hover img,
    .btn-primary-outlined:active img,
    .btn-primary-filled img,
    .btn-inverted-filled img {
      filter: brightness(0) invert(1);
    }
    /* btn-sm icon sizing — 24px icon with 2px padding inside the 48px button */
    .btn-sm img { width: var(--size-5); height: var(--size-5); padding: 2px; }
    /* Storybook button size modifiers — .btn default is sm (48px); md and lg
       step up. Matches CYCLADES.md §6 + storybook/styles.css. */
    .btn-md { height: var(--size-9); padding: 0 var(--size-4); font-size: 16px; }
    .btn-md img { width: var(--size-6); height: var(--size-6); padding: var(--size-1); }
    .btn-lg { height: var(--size-11); padding: 0 var(--size-5); font-size: 18px; }
    .btn-lg img { width: var(--size-6); height: var(--size-6); padding: var(--size-1); }

    /* Carousel viewport — constrained to the 1280 keyline frame, so the visible
       edges of the carousel sit exactly on the page's vertical keylines.
       Bottom padding holds 40px of room below the cards so the elevation
       shadow has space and doesn't get clipped by overflow:hidden. */
    .testimonial-carousel {
      /* Sits on the same 1200px content rail as the inner blocks above,
         with 40px gutters on either side from the page edges. */
      max-width: 1200px;
      width: calc(100% - var(--size-7) * 2);
      /* 40px gap under the big featured quote on desktop. */
      margin: var(--size-7) auto 40px;
      padding: 24px;
      box-sizing: border-box;
      overflow: hidden;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 24px;
    }

    .testimonial-track {
      display: flex;
      gap: var(--size-4); /* 16px between quote cards */
      transition: transform 0.45s var(--ease-spring);
      will-change: transform;
    }

    .testimonial-card {
      /* 4 cards fit in the 1280 frame with 3 16px gaps between them */
      flex: 0 0 calc((min(100vw, 1280px) - 3 * var(--size-4)) / 4);
      display: flex;
      flex-direction: column;
      gap: var(--size-5);
      background: var(--white);
      border-radius: 12px;
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.04);
      padding: var(--size-6);
    }

    .testimonial-quote {
      font-size: 18px;
      font-weight: 600;
      line-height: 1.35;
      color: var(--black);
      margin: 0;
    }

    .testimonial-meta {
      margin-top: auto;
    }

    .testimonial-author {
      font-size: 16px;
      color: var(--black);
      margin: 0 0 2px;
    }

    .testimonial-role {
      font-size: 14px;
      color: var(--black);
      opacity: 0.7;
      margin: 0;
    }

    .testimonial-logo {
      height: 32px;
      width: auto;
      max-width: 160px;
      object-fit: contain;
      object-position: left center;
      margin-top: var(--size-4);
    }


    /* ── Audiences (featured Everyone card + 3 stacked segment cards) ── */
    .audiences-section {
      background: var(--stone-1);
      padding: 40px 0;
      /* Full-bleed keyline separating this section from the testimonials carousel */
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      /* Match testimonials — keep above the ecosystem rings stacking context */
      position: relative;
      z-index: 1;
    }

    .audiences-inner {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 var(--size-7);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--size-5);
    }

    .audience-card {
      background: var(--white);
      border: 1px solid rgba(0, 0, 0, 0.05);
      border-radius: 16px;
      padding: var(--size-7);
      position: relative;
      overflow: hidden;
      transition: background 0.45s var(--ease-spring), box-shadow 0.45s var(--ease-spring), border-color 0.45s var(--ease-spring), transform 0.45s var(--ease-spring);
    }

    /* Shared hover state — same lift/shadow/border treatment as the
       feature cards so the audience tiles match the cards locked above
       them in the grid (and the larger audiences-section below). */
    .audience-card:hover,
    .audience-card:focus-visible {
      box-shadow: 0 20px 48px rgba(74, 73, 188, 0.34);
      border-color: rgba(74, 73, 188, 0.15);
      transform: translateY(-4px);
      outline: none;
    }

    /* Featured "Everyone" card — Carefull brand photo background with a subtle
       dark gradient at the top so the white eyebrow/title stay legible. */
    .audience-card--featured {
      background-color: var(--stone-3);
      background-image: linear-gradient(180deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0) 50%), url('../img/brand/5458996.webp');
      background-size: cover;
      background-position: center;
      color: var(--white);
      min-height: 480px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .audience-card-eyebrow {
      font-size: 14px;
      margin: 0;
      opacity: 0.85;
      font-weight: 400;
    }

    .audience-card-title {
      font-size: clamp(28px, 3.2cqi, 40px);
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -0.01em;
      margin: 4px 0 0;
    }

    .audience-card-actions {
      display: flex;
      gap: var(--size-3);
      flex-wrap: wrap;
    }

    /* Right column: 3 link cards stacked vertically */
    .audiences-stack {
      display: grid;
      grid-template-rows: repeat(3, 1fr);
      gap: var(--size-5);
    }

    .audience-card--link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--size-5);
      color: var(--black);
      text-decoration: none;
    }

    .audience-card--link .audience-card-eyebrow {
      color: var(--black);
      opacity: 0.75;
    }


    /* ── Sign-off section ──
       Section is full-bleed stone-1; the brand photo fills the 1280 content
       frame edge-to-edge. Text is overlaid on the TOP of the photo (where the
       background of the image is empty/blurry), so it never sits on the
       people's faces. Full-bleed keyline at the top separates from audiences. */
    .signoff-section {
      position: relative;
      z-index: 1;
      background: var(--stone-1);
      text-align: center;
      overflow: hidden;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

    .signoff-inner {
      /* Full-bleed — no max-width so the photo runs edge-to-edge. */
      width: 100%;
      margin: 0;
      position: relative;
      aspect-ratio: 2600 / 2524;
      background-image: url('../img/brand/020.webp');
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }

    /* Text overlay anchored to the TOP of the image, well above the people */
    .signoff-content {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      padding: var(--size-9) var(--size-7) 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--size-5);
    }

    .signoff-headline {
      font-weight: 600;
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: var(--black);
      margin: 0;
    }

    .signoff-body {
      font-size: 18px;
      line-height: 1.4;
      color: var(--black);
      margin: 0;
      max-width: 520px;
    }

    /* Kingfisher accent bar capping the sign-off section */
    .signoff-bar {
      height: var(--size-4); /* 16px */
      background: var(--kingfisher);
    }


    /* ── Site footer (kingfisher backdrop, Carefull lockup left + 3-column nav
       right, sunset-style rotating symbol rising from below the horizon —
       visible through the frosted-glass content area above it) ── */
    .site-footer {
      background: var(--kingfisher);
      color: var(--white);
      position: relative;
      overflow: hidden;
      /* Extra bottom space so the rotating mark has room to be visible below
         the content card. */
      padding-bottom: clamp(220px, 24vw, 360px);
    }

    /* Frosted-glass content card sitting above the rotating mark. 90% opaque
       kingfisher + backdrop blur, so the symbol behind shows as a faint hint.
       z-index 7 keeps this above both the rotating mark (z:6) and the
       page-wide vertical keylines on .page::before (z:5). */
    .site-footer-content {
      position: relative;
      z-index: 7;
      background: rgba(74, 73, 188, 0.9);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      padding: var(--size-13) 0 0;
    }

    /* Re-draw the vertical content-frame keylines INSIDE the content card —
       since the card covers the page-wide .page::before keylines, this pseudo
       restores them over the content (above the frosted-glass bg + the brand/
       nav/legal). Confined to the content's height, so the keylines stop at
       the bottom of the copyright bar and never extend into the rotating
       logo area below (where they're correctly covered by the logo). */
    .site-footer-content::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: max(0px, calc(50% - 640px));
      right: max(0px, calc(50% - 640px));
      border-left: 1px solid rgba(0, 0, 0, 0.28);
      border-right: 1px solid rgba(0, 0, 0, 0.28);
      pointer-events: none;
      z-index: 1;
    }

    .site-footer-inner {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 var(--size-7) var(--size-9);
      display: grid;
      /* 5-column grid: lockup spans 2, the 3 nav columns each take 1 */
      grid-template-columns: repeat(5, 1fr);
      gap: var(--size-7);
      align-items: start;
    }

    .site-footer-brand {
      grid-column: span 2;
      display: flex;
      flex-direction: column;
      gap: var(--size-6);
    }

    .site-footer-logo {
      display: inline-flex;
      align-items: center;
      gap: var(--size-3);
      text-decoration: none;
    }

    .site-footer-logo-symbol {
      height: 36px;
      width: 36px;
      filter: brightness(0) invert(1);
    }

    .site-footer-logo-type {
      height: 22px;
      width: auto;
      filter: brightness(0) invert(1);
    }

    .site-footer-nav {
      grid-column: span 3;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--size-7);
    }

    .site-footer-heading {
      font-size: 14px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.65);
      margin: 0 0 var(--size-5);
    }

    .site-footer-column ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: var(--size-5);
    }

    .site-footer-column a {
      color: var(--white);
      text-decoration: none;
      font-size: 16px;
      font-weight: 500;
      transition: opacity 0.2s ease;
    }

    .site-footer-column a:hover {
      opacity: 0.7;
    }

    /* Contact info beneath the brand lockup */
    .site-footer-contact {
      font-style: normal;
      display: flex;
      flex-direction: column;
      gap: var(--size-4);
    }
    .site-footer-contact p {
      margin: 0;
      font-size: 14px;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.85);
    }
    .site-footer-contact a {
      color: rgba(255, 255, 255, 0.85);
      text-decoration: none;
      transition: opacity 0.2s ease;
    }
    .site-footer-contact a:hover { opacity: 0.7; }

    /* Social icon row */
    .site-footer-social {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      gap: var(--size-3);
    }
    .site-footer-social a {
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--white);
      transition: opacity 0.2s ease;
    }
    .site-footer-social a:hover { opacity: 0.7; }
    .site-footer-social svg {
      width: 22px;
      height: 22px;
      fill: currentColor;
    }

    /* Full-bleed keylines bracketing the legal/copyright bar — dark on the
       kingfisher backdrop so they read as proper dividers. */
    .site-footer-keyline {
      border: 0;
      margin: 0;
      height: 1px;
      background: rgba(0, 0, 0, 0.28);
    }

    /* Legal bar between the two full-bleed keylines */
    .site-footer-legal {
      padding: var(--size-5) 0;
    }
    .site-footer-legal-inner {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 var(--size-7);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--size-5);
    }
    .site-footer-legal-copy {
      margin: 0;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.85);
    }
    .site-footer-legal-links {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      gap: var(--size-7);
    }
    .site-footer-legal-links a {
      color: var(--white);
      text-decoration: none;
      font-size: 14px;
      transition: opacity 0.2s ease;
    }
    .site-footer-legal-links a:hover { opacity: 0.7; }

    /* Rotating mark: now an absolute background layer filling the entire
       footer. Center pinned to the footer's bottom edge — top half rises
       above the floor, bottom half is clipped by overflow:hidden on the
       footer. The top of the symbol extends up into the frosted-glass area
       and shows as a soft hint behind the blur.
       z-index 6 puts it above the page-wide vertical keylines on .page::before
       (z:5), but below the frosted-glass content (z:7). */
    .site-footer-mark {
      position: absolute;
      inset: 0;
      z-index: 6;
      pointer-events: none;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: flex-end;
    }

    .site-footer-mark-positioner {
      width: min(110vw, 1400px);
      aspect-ratio: 1;
      /* Center of the positioner sits on the footer's bottom edge */
      transform: translateY(50%);
    }

    .site-footer-mark-rotating {
      width: 100%;
      height: 100%;
      animation: footer-logo-rotate 40s linear infinite;
      transform-origin: center;
    }

    .site-footer-mark-rotating img {
      width: 100%;
      height: 100%;
      display: block;
      /* Invert the kingfisher symbol to white, then reduce opacity so it reads
         as a soft kingfisher-1-ish "sun" against the deep kingfisher sky. */
      filter: brightness(0) invert(1);
      opacity: 0.65;
    }

    @keyframes footer-logo-rotate {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }

    @media (prefers-reduced-motion: reduce) {
      .site-footer-mark-rotating { animation: none; }
    }


    /* Tablet */
    @media (max-width: 1024px) {
      .nav-inner {
        padding: 0 var(--size-5); /* 24px tablet inline */
      }
      .btn { padding: 0 var(--size-4); }
      .hero-inner { padding: calc(var(--size-12) + var(--size-8)) var(--size-5) var(--size-12); }
      /* Tablet headline — can break to 3 lines, font scales bigger to fill */
      .hero h1 { font-size: clamp(48px, 9cqi, 96px); }

      /* Loyalty section — no top padding (keyline above owns the gap); divider stays full-bleed */
      .loyalty-section { padding: 0 0 var(--size-13); }
      .loyalty-headline { max-width: 100%; }
      .features-headline { font-size: clamp(40px, 8cqi, 80px); max-width: 100%; }
      .story-headline { max-width: 100%; }
      /* Tablet: same stacked pattern as mobile — phone sits below the body copy,
         centered. Phone at full design size (707px), body wider (max 600px). */
      .loyalty-phone {
        position: relative;
        transform: none;
        right: auto;
        top: auto;
        bottom: auto;
        width: 707px;
        /* Phone top sits 40px below the bottom of the body copy */
        margin: var(--size-7) auto -192px;
      }

      .loyalty-body { max-width: 600px; }

      /* Alert anchored 124px from the phone's left edge, lifted 40px from base position */
      .loyalty-notification {
        left: calc(var(--size-12) + var(--size-3) + var(--size-6));
        top: calc(15.5% - var(--size-7));
      }

      /* Tighter spacing on tablet — 24px between the headline and the mid-section keyline */
      .loyalty-divider { margin-top: var(--size-5); }

      /* Testimonials cards: narrower on tablet so ~2.5 cards peek through
         the carousel. 100dvw avoids horizontal-scrollbar math.
         Width calc gives the 24px side gutter (not padding); margin-top
         spaces the carousel 24px below the featured quote. */
      .testimonial-carousel {
        width: calc(100% - var(--size-5) * 2);
        margin-top: var(--size-5);
        padding-left: var(--size-5);
        padding-right: var(--size-5);
      }
      .testimonial-card {
        flex: 0 0 calc((100dvw - 2 * var(--size-5) - var(--size-4) * 2) / 2.5);
      }

      /* Pillars: stack vertically on tablet (3-col was crowding ~700px). */
      .pillars-inner {
        grid-template-columns: 1fr;
        gap: var(--size-7);
        padding: 0 var(--size-5);
      }

      /* Audiences-section: collapse the 2-col featured + stack to one
         column. Featured card stacks above the link stack. */
      .audiences-inner {
        grid-template-columns: 1fr;
        gap: var(--size-7);
        padding: 0 var(--size-5);
      }
      .audience-card--featured { min-height: 420px; }

      /* Footer: 5-col grid was crushing the brand column. Stack brand on
         top, nav into 3-col below. */
      .site-footer-inner {
        grid-template-columns: 1fr;
        gap: var(--size-9);
        padding: 0 var(--size-5) var(--size-9);
      }
      .site-footer-nav {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--size-6);
      }

      /* Features cards grid: drop horizontal padding from 40px → 24px so
         the cards have more usable width. */
      .features-cards-grid {
        padding-left: var(--size-5);
        padding-right: var(--size-5);
      }

      /* Partner row: ease horizontal padding at narrow tablet widths. */
      .partner-row { padding: 0 var(--size-5); }
      /* Match the audience-links row gutters to 24px on tablet. (Keyline
         stays 100% width — no horizontal padding.) */
      .audience-links-row { padding-left: var(--size-5); padding-right: var(--size-5); }

      /* Press strip: no top padding (gap comes from the audiences row),
         side gutter in step with the audiences row above it. */
      .press-strip { padding: 0 var(--size-5) var(--size-6); }

      /* Hamburger at tablet — hide the desktop nav menu + actions and
         show the toggle / drawer (previously this only fired at mobile). */
      .nav-inner > .nav-menu,
      .nav-inner > .nav-actions { display: none; }
      .nav-toggle { display: inline-flex; }
      .nav-drawer { display: flex; }

      /* Drop all section inline padding from var(--size-7) (40px) to
         var(--size-5) (24px) at tablet. The loyalty gutter lives on
         .loyalty-inner (not .loyalty-content, which is padding:0) — target
         the inner directly so the headline isn't double-indented. */
      .loyalty-inner,
      .features-row-inner,
      .features-headline-inner,
      .testimonials-inner,
      .site-footer-legal-inner {
        padding-left: var(--size-5);
        padding-right: var(--size-5);
      }
      /* Audiences gutter lives on the inner now (mirrors the features grid). */
      .audiences-row-inner { padding-left: var(--size-5); padding-right: var(--size-5); }
      /* "Surround families" block: 24px left/right on tablet + mobile. */
      .story-header { padding-left: var(--size-5); padding-right: var(--size-5); }
      /* Reduced space below the loyalty headline on tablet (was 80px). */
      .loyalty-content { padding-bottom: var(--size-6); }

      /* Tablet ring animation — desktop's min(60vw, 66vh) leaves the rings
         (and their curved SVG labels) too small to read on tablet. Grow the
         rings and bump the label + center-label sizes so the copy is legible.
         Mobile (≤600) overrides these below. */
      .ecosystem-rings { width: min(86vw, 78vh); }
      .ring-label text { font-size: 26px; }
      .ring-center-label { font-size: 22px; }

      /* Signoff content uses padding shorthand (var(--size-9) var(--size-7) 0); rewrite. */
      .signoff-content { padding: var(--size-9) var(--size-5) 0; }

      /* Ecosystem section carries no padding — the story header owns its
         own 24px gutter and the ring animation stays full-bleed. */
    }

    /* Mobile */
    @media (max-width: 600px) {
      .nav-inner {
        padding: 0 var(--size-4); /* 16px mobile inline */
        height: var(--size-11);   /* 72px mobile header */
        display: flex;
        justify-content: space-between;
      }

      /* (Hamburger toggle + drawer already turned on at the tablet
         breakpoint above.) */
      .nav-logo-type { height: 20px; }
      .nav-logo-symbol { width: 28px; height: 28px; }

      /* Mobile nav is 72px; pull hero up and pad content to clear it */
      .hero {
        margin-top: calc(-1 * var(--size-11));
        min-height: calc(70vh + var(--size-11));
      }
      .hero-inner { padding: calc(var(--size-11) + var(--size-6)) var(--size-5) var(--size-11); }
      /* Mobile headline — sized for legibility on narrow screens; line count is flexible */
      .hero h1 { font-size: clamp(36px, 9cqi, 56px); }
      .hero p { font-size: 16px; }

      /* Stack the partner row vertically on mobile */
      .partner-row { flex-direction: column; }
      .featured-partner { flex: 0 0 auto; width: 100%; }

      /* Loyalty section — stack phone below text on mobile; no top padding (keyline owns the gap) */
      .loyalty-section { padding: 0 0 var(--size-12); }
      /* loyalty-headline scales via the base clamp on mobile too */
      .features-headline { font-size: clamp(32px, 10cqi, 56px); }
      /* Mobile — 24px between headline and mid-section keyline */
      .loyalty-divider { margin: var(--size-5) 0 var(--size-6); }
      /* Mobile — alert anchored to the far-left phone margin, lifted 32px from base position */
      .loyalty-notification {
        left: var(--size-4);
        top: calc(15.5% - var(--size-6));
      }
      .loyalty-phone {
        position: relative;
        transform: none;
        right: auto;
        top: auto;
        bottom: auto;
        width: 707px;
        /* Phone top sits 40px below the bottom of the body copy */
        margin: var(--size-7) auto -192px;
      }
      .hero-actions { width: 100%; flex-direction: column; }
      .hero-actions .btn { width: 100%; height: var(--size-9); font-size: 16px; padding: 0 var(--size-5); }

      /* Clip the ring bleed at the stage edges (NOT on body/html — that would
         break position:sticky on .ecosystem-stage and the build animation
         would stop playing). Applying overflow:hidden to the sticky element
         itself is safe; only ancestors of a sticky element break it. */
      .ecosystem-stage {
        overflow: hidden;
      }

      /* Ecosystem rings on mobile: bleed past the horizontal edges, dead-center,
         and use the same translateY settle as desktop so the rings start near
         the headline and slide down as you scroll. Positive margin-bottom
         lifts the settled position higher in the viewport (rings rest with a
         40px gap above the kingfisher block instead of dipping into it). */
      .ecosystem-rings {
        width: 115vw;
        margin-top: auto;
        margin-bottom: 40px;
        /* transform inherits the desktop translateY(var(--rings-y)) — the JS
           uses a smaller magnitude on mobile so we don't push past the
           headline on shorter viewports. */
      }
      /* Bump SVG arc text so the labels stay legible at mobile ring sizes */
      .ring-label text {
        font-size: 20px;
      }
      /* Reset the center label back to the mobile size (the ≤1024 tablet
         rule above bumps it to 22px, which would otherwise leak to mobile). */
      .ring-center-label {
        font-size: 16px;
      }

      /* Pillars stack on mobile */
      .pillars-inner {
        grid-template-columns: 1fr;
        gap: var(--size-9);
        padding: 0 var(--size-5);
      }

      /* Audiences: stack the 2-column layout into a single column on mobile */
      .audiences-inner {
        grid-template-columns: 1fr;
        padding: 0 var(--size-5);
      }

      /* Footer: stack brand above nav, 2 columns inside nav */
      .site-footer-inner {
        grid-template-columns: 1fr;
        gap: var(--size-7);
        padding: 0 var(--size-5) var(--size-7);
      }
      .site-footer-nav {
        grid-template-columns: 1fr;
        gap: 0;
      }
      /* Stack the three columns vertically with a kingfisher-family hairline
         between sections (a pure-kingfisher line would vanish on the
         kingfisher footer bg, so this is a lighter tint for contrast). */
      .site-footer-column {
        padding: var(--size-6) var(--size-5);
        margin: 0 calc(-1 * var(--size-5)); /* negate inner gutter so the keyline runs full bleed */
        border-top: 1px solid rgba(0, 0, 0, 0.1);
      }
      .site-footer-column:last-child { padding-bottom: 0; }
      .site-footer-legal-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--size-3);
        padding: 0 var(--size-5);
      }
      .site-footer-legal-links {
        gap: var(--size-5);
      }
      .audience-card--featured {
        min-height: 360px;
      }
      .audience-card-actions {
        flex-direction: column;
        gap: var(--size-2);
      }
      .audience-card-actions .btn {
        width: 100%;
      }

      /* Mobile inline padding → 24px so every section shares the same
         side gutter as tablet. */
      .loyalty-inner { padding-left: var(--size-5); padding-right: var(--size-5); }
      .audiences-row-inner { padding-left: var(--size-5); padding-right: var(--size-5); }
      .press-strip { padding-left: var(--size-5); padding-right: var(--size-5); }

      /* Testimonials: 1 card visible with a peek of the next; smaller featured.
         100dvw to avoid horizontal scrollbar from scrollbar-width math. */
      .testimonials-inner {
        padding: 0 var(--size-5);
      }
      .testimonial-featured-quote {
        font-size: clamp(36px, 10cqi, 64px);
      }
      .testimonial-carousel {
        width: calc(100% - var(--size-5) * 2);
        margin-top: var(--size-5);
        padding-left: var(--size-5);
        padding-right: var(--size-5);
      }
      .testimonial-card {
        flex: 0 0 calc(68dvw - var(--size-5));
      }

      /* Ecosystem story headline + subline use full width on mobile, like
         the loyalty / features headlines above. (Was max-width: 80%.) */
      .story-headline,
      .story-subline { max-width: 100%; }

      /* Partner row + features-cards-grid share the 24px page-edge gutter.
         (Press strip side gutter is set above with the other sections; its
         inner keeps the base var(--size-7) vertical padding so the logos
         aren't crushed.) */
      .partner-row { padding: 0 var(--size-5); }
      .features-cards-grid { padding-left: var(--size-5); padding-right: var(--size-5); }
      /* Audience-links row: wrap so the 3 buttons drop below the label
         instead of overflowing the narrow screen. */
      .audience-links-row {
        flex-wrap: wrap;
        gap: var(--size-3);
        padding-left: var(--size-5);
        padding-right: var(--size-5);
      }

      /* Signoff: scale the headline + tighten content padding so the copy
         doesn't overlap the people in the bg photo on narrow widths. */
      .signoff-content {
        padding: var(--size-7) var(--size-5) 0;
      }
      .signoff-headline {
        font-size: clamp(28px, 7cqi, 40px);
      }
      .signoff-body {
        font-size: 14px;
        max-width: 100%;
      }

      /* Footer tap targets — bump social icons and link spacing so each
         tap area clears the 44px recommendation. */
      .site-footer-social a {
        width: 44px;
        height: 44px;
      }
      .site-footer-nav-col a {
        padding: 6px 0;
      }
      .site-footer-legal-links a {
        padding: 6px 0;
      }
    }

    /* ============================================================
       Capabilities cards (ported from features2.html sandbox).
       Lives inside .loyalty-section so headline + subline + cards
       all read as one section. Skips the porter's .features-section,
       .feature-title, .feature-body — those collide with index's
       existing styles; the cards inherit the index versions.
       ============================================================ */
    .features-cards-grid {
      max-width: 1280px;
      margin: var(--size-8) auto 0; /* 48px under the subline (32 + 16) */
      padding-left: var(--size-7);
      padding-right: var(--size-7);
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: var(--size-4);
    }

    .features-card {
      position: relative;
      background: var(--white);
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 16px;
      overflow: hidden;
      min-height: 520px;
      display: flex;
      flex-direction: column;
      color: inherit;
      text-decoration: none;
      transition: background 0.45s var(--ease-spring), box-shadow 0.45s var(--ease-spring), border-color 0.45s var(--ease-spring), transform 0.45s var(--ease-spring);
      /* Each card is a container so the inner visuals (network, phone,
         badge, LegacyKit cards, HCWH card, photo) can size themselves in
         cqi units — % of THIS card's inline size. No per-breakpoint pixel
         overrides needed; everything scales naturally as the card resizes
         from desktop → tablet → mobile. */
      container-type: inline-size;
    }

    .features-card:hover,
    .features-card:focus-visible {
      background: var(--white);
      box-shadow: 0 20px 48px rgba(74, 73, 188, 0.34);
      border-color: rgba(74, 73, 188, 0.15);
      transform: translateY(-4px);
      outline: none;
    }

    .features-card--span-2 { grid-column: span 2; }
    .features-card--span-3 { grid-column: span 3; }
    .features-card--span-4 { grid-column: span 4; }
    .features-card--span-6 { grid-column: span 6; }

    .features-card[data-card="ai-network"]::before,
    .features-card[data-card="caregiver"]::before,
    .features-card[data-card="protections-phone"]::before,
    .features-card[data-card="growth-share"]::before,
    .features-card[data-card="wealth"]::before,
    .features-card[data-card="engagement"]::before {
      content: '';
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      pointer-events: none;
      z-index: 0;
      width: 140%;
      height: 80%;
      background: radial-gradient(ellipse 70% 100% at center bottom, rgba(74, 73, 188, 0.20) 0%, rgba(74, 73, 188, 0) 80%);
    }

    .features-card-content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--size-4);
      padding: var(--size-5);
      padding-right: calc(var(--size-5) + var(--size-7));
    }

    /* Chevron box — rendered as a ::after on the card itself so the
       background/border are a SEPARATE layer from the chevron img. (Putting
       background on the img doesn't work because CSS `filter` applies to
       the element's whole visual output, including its background — so the
       hover filter would whitewash the kingfisher fill too.) */
    .features-card::after {
      content: '';
      position: absolute;
      top: var(--size-5);
      right: var(--size-5);
      width: 32px;
      height: 32px;
      box-sizing: border-box;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      background: transparent;
      pointer-events: none;
      z-index: 3;
      transition: background-color 0.25s var(--ease-spring), border-color 0.25s var(--ease-spring);
    }

    .features-card:hover::after,
    .features-card:focus-visible::after {
      background: var(--kingfisher);
      border-color: var(--kingfisher);
    }

    .features-card-chevron {
      position: absolute;
      top: var(--size-5);
      right: var(--size-5);
      box-sizing: border-box;
      width: 32px;
      height: 32px;
      padding: 6px;
      display: block;
      filter: none;
      transition: filter 0.25s var(--ease-spring), transform 0.25s var(--ease-spring);
      pointer-events: none;
      z-index: 4;
    }

    .features-card:hover .features-card-chevron,
    .features-card:focus-visible .features-card-chevron {
      /* Pure white chevron on top of the now-kingfisher ::after box. */
      filter: brightness(0) invert(1);
      transform: translateX(4px);
    }

    /* ── AI network card (canvas graph + phone alert) ── */
    .features-card--network .features-card-content {
      padding-bottom: 0;
    }

    /* AI card subline is held to 320px so it sits neatly above the network
       visual instead of running the full width of the span-6 card. */
    .features-card[data-card="ai-network"] .feature-body {
      max-width: 320px;
    }

    .features-card--network .network-wrap {
      position: absolute;
      left: 50%;
      bottom: -160px;
      transform: translateX(-50%);
      width: 145%;
      pointer-events: none;
    }

    .features-card--network .network-wrap canvas {
      display: block;
      width: 100%;
      aspect-ratio: 1 / 1;
    }

    /* cqi-based sizing — width is 178% of the card's inline size, bottom
       offset scales by the same. At 800px card → 1424px wrap; at 400px
       card → 712px wrap. Same look at any size. */
    .features-card[data-card="ai-network"] .network-wrap {
      bottom: -99cqi;
      left: 50%;
      right: auto;
      width: 178cqi;
      max-width: none;
      transform: translateX(-50%);
    }

    /* ── Protections (phone variant) ── */
    .features-card[data-card="protections-phone"] .features-card-content {
      padding-bottom: 0;
    }

    .features-card[data-card="protections-phone"] .protections-badge {
      position: absolute;
      left: 50%;
      bottom: -23cqi;
      width: 98cqi;
      height: 98cqi;
      transform: translateX(-50%);
      pointer-events: none;
      z-index: 1;
    }

    .protections-badge-svg {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
    }

    .protections-badge-outer-spin {
      transform-origin: 0 0;
      animation: protectionsBadgeRotateCW 120s linear infinite;
    }

    .protections-badge-inner-spin {
      transform-origin: 0 0;
      animation: protectionsBadgeRotateCCW 120s linear infinite;
    }

    @keyframes protectionsBadgeRotateCW {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }

    @keyframes protectionsBadgeRotateCCW {
      from { transform: rotate(0deg); }
      to   { transform: rotate(-360deg); }
    }

    @media (prefers-reduced-motion: reduce) {
      .protections-badge-outer-spin,
      .protections-badge-inner-spin { animation: none; }
    }

    .protections-badge-outer { fill: url(#protections-badge-grad); }
    .protections-badge-outer-border { fill: none; stroke: rgba(74, 73, 188, 0.25); stroke-width: 1; }
    .protections-badge-inner { fill: rgba(255, 255, 255, 0.96); }
    .protections-badge-inner-border { fill: none; stroke: rgba(209, 209, 236, 0.5); stroke-width: 1; }

    .protections-badge-amount {
      font-family: 'Suisse Int\'l', 'Helvetica Neue', sans-serif;
      font-weight: 600;
      font-size: 38px;
      fill: var(--kingfisher);
      dominant-baseline: middle;
    }

    .protections-badge-label {
      font-family: 'Suisse Int\'l', 'Helvetica Neue', sans-serif;
      font-weight: 600;
      font-size: 7.5px;
      letter-spacing: 0.18em;
      fill: var(--kingfisher);
      dominant-baseline: middle;
    }

    /* ── Phone + notification (shared by ai-network) ── */
    .features-card[data-card="protections-phone"] .protections-phone-wrap,
    .features-card[data-card="ai-network"] .protections-phone-wrap {
      position: absolute;
      left: 50%;
      bottom: -98px;
      transform: translateX(-50%);
      width: 110%;
      aspect-ratio: 707 / 720;
      pointer-events: none;
      isolation: isolate;
      z-index: 3;
    }

    .features-card[data-card="ai-network"] .protections-phone-wrap {
      left: auto;
      right: 0;
      bottom: -28cqi;
      width: 80cqi;
      max-width: none;
      transform: none;
    }

    .features-card[data-card="protections-phone"] .protections-phone-img,
    .features-card[data-card="ai-network"] .protections-phone-img {
      position: relative;
      z-index: 2;
      transform: translate(-16px, 8px);
      width: 100%;
      height: auto;
      display: block;
    }

    .features-card[data-card="protections-phone"] .protections-phone-notification,
    .features-card[data-card="ai-network"] .protections-phone-notification {
      position: absolute;
      top: calc(12% - 12px);
      left: calc(4.55% + 60px);
      right: 8%;
      z-index: -1;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      background: rgba(255, 255, 255, 0.55);
      backdrop-filter: blur(14px) saturate(160%);
      -webkit-backdrop-filter: blur(14px) saturate(160%);
      border-radius: 12px;
      box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.16),
        0 2px 6px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
      transform-origin: bottom center;
      animation: protectionsPhoneNotification 6s cubic-bezier(0.12, 1, 0.18, 1) infinite;
    }

    @keyframes protectionsPhoneNotification {
      0%   { opacity: 0; transform: translateY(24px); }
      10%  { opacity: 1; transform: translateY(0); }
      90%  { opacity: 1; transform: translateY(0); }
      96%  { opacity: 0; transform: translateY(24px); }
      100% { opacity: 0; transform: translateY(24px); }
    }

    @media (prefers-reduced-motion: reduce) {
      .protections-phone-notification { animation: none; opacity: 1; transform: none; }
    }

    .protections-phone-notification-icon {
      width: 38px;
      height: 38px;
      background: var(--kingfisher);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .protections-phone-notification-icon img {
      width: 26px;
      height: 26px;
      filter: brightness(0) invert(1);
    }

    .protections-phone-notification-content {
      flex: 1;
      min-width: 0;
    }

    .protections-phone-notification-title {
      font-size: 14px;
      font-weight: 600;
      line-height: 1.3;
      color: var(--black);
    }

    .protections-phone-notification-subtitle {
      font-size: 13px;
      font-weight: 400;
      line-height: 1.3;
      color: var(--stone-3);
      margin-top: 1px;
    }

    /* ── Deposit Growth & Retention (share-of-wallet variant) ── */
    .features-card[data-card="growth-share"] .features-card-content {
      padding-bottom: 0;
    }

    .features-card[data-card="growth-share"] .share-wallet-card {
      position: absolute;
      left: 50%;
      right: auto;
      width: 70%;
      max-width: 336px;
      transform: translateX(-50%);
      bottom: -56px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.78) 100%);
      backdrop-filter: blur(20px) saturate(160%);
      -webkit-backdrop-filter: blur(20px) saturate(160%);
      border-radius: 16px;
      padding: 16px 0 20px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      pointer-events: none;
      z-index: 2;
      box-shadow: 0 8px 24px rgba(74, 73, 188, 0.18);
    }

    .features-card[data-card="growth-share"] .growth-graph-wrap {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 24px;
      height: 62%;
      pointer-events: none;
      z-index: 1;
    }

    .features-card[data-card="growth-share"] .growth-build-clip {
      position: absolute;
      inset: 0;
      animation: none;
      clip-path: none;
    }

    .features-card[data-card="growth-share"] .growth-point {
      opacity: 1;
      background: var(--kingfisher);
      box-shadow: none;
    }

    .features-card[data-card="growth-share"] .growth-point[data-i="0"] { animation: growthPointPulse 4s ease-in-out 0s infinite; }
    .features-card[data-card="growth-share"] .growth-point[data-i="1"] { animation: growthPointPulse 4s ease-in-out 0.5s infinite; }
    .features-card[data-card="growth-share"] .growth-point[data-i="2"] { animation: growthPointPulse 4s ease-in-out 1s infinite; }
    .features-card[data-card="growth-share"] .growth-point[data-i="3"] { animation: growthPointPulse 4s ease-in-out 1.5s infinite; }
    .features-card[data-card="growth-share"] .growth-point[data-i="4"] { animation: growthPointPulse 4s ease-in-out 2s infinite; }
    .features-card[data-card="growth-share"] .growth-point[data-i="5"] { animation: growthPointPulse 4s ease-in-out 2.5s infinite; }
    .features-card[data-card="growth-share"] .growth-point[data-i="6"] { animation: growthPointPulse 4s ease-in-out 3s infinite; }
    .features-card[data-card="growth-share"] .growth-point[data-i="7"] { animation: growthPointPulse 4s ease-in-out 3.5s infinite; }

    .share-wallet-title {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      color: var(--stone-4);
      padding: 0 16px 2px;
    }

    .share-wallet-title img {
      width: 18px;
      height: 18px;
      display: block;
      filter: none;
    }

    .share-wallet-chart {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
      margin: 0;
    }

    .share-wallet-svg {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
    }

    .share-wallet-seg { transition: stroke 0.25s ease; }

    .share-wallet-label {
      position: absolute;
      font-size: 11px;
      font-weight: 500;
      color: var(--stone-4);
      white-space: nowrap;
      letter-spacing: 0.01em;
      transform: translate(-50%, -50%);
      background: var(--stone-1);
      padding: 4px 8px;
      border-radius: 0;
      z-index: 2;
    }

    .share-wallet-label--primary {
      color: var(--kingfisher);
      font-weight: 600;
    }

    /* ── Wealth Transfer ── */
    .features-card[data-card="wealth"] .features-card-content {
      padding-bottom: 0;
    }

    .features-card[data-card="wealth"] .wealth-card {
      position: absolute;
      left: var(--size-5);
      right: auto;
      /* cqi-based width — 47% of card. Scales with the card; no pixel
         max-width cap so it stays proportional at every breakpoint. */
      width: 47cqi;
      bottom: -7cqi;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.78) 100%);
      backdrop-filter: blur(20px) saturate(160%);
      -webkit-backdrop-filter: blur(20px) saturate(160%);
      border-radius: 16px;
      padding: 16px 0 20px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      pointer-events: none;
      z-index: 2;
      box-shadow: 0 8px 24px rgba(74, 73, 188, 0.18);
    }

    .wealth-title {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      color: var(--stone-4);
      padding: 0 16px 2px;
    }

    .wealth-title img {
      width: 18px;
      height: 18px;
      display: block;
      filter: none;
    }

    .wealth-illo {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px 16px 8px;
    }

    .wealth-illo img {
      width: 92%;
      max-width: 380px;
      height: auto;
      display: block;
    }

    .wealth-body {
      font-size: 14px;
      line-height: 1.4;
      color: var(--stone-3);
      padding: 0 16px;
      text-align: left;
    }

    /* CTA at the bottom of the rear LegacyKit card. Uses a storybook
       button class on a <span> (the parent <a class="features-card"> is
       what's actually clickable). Full-width inside the 16px side padding. */
    .wealth-cta {
      padding: 4px 16px 0;
      display: flex;
    }
    .wealth-cta > .btn {
      flex: 1;
    }

    .features-card[data-card="wealth"] .wealth-card--front {
      left: 50%;
      right: auto;
      width: 51cqi;
      bottom: -7cqi;
      padding-bottom: 8px;
      z-index: 3;
    }

    .wealth-recipients-header {
      font-size: 12px;
      font-weight: 500;
      color: var(--stone-3);
      padding: 0 16px;
      line-height: 1.3;
    }

    .wealth-recipients {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
    }

    .wealth-recipient {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 16px;
    }

    .wealth-recipient + .wealth-recipient {
      border-top: 1px solid rgba(0, 0, 0, 0.06);
    }

    .wealth-recipient-avatar {
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--kingfisher-1);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .wealth-recipient-avatar img {
      width: 20px;
      height: 20px;
      display: block;
      filter: none;
    }

    .wealth-recipient-info {
      display: flex;
      flex-direction: column;
      line-height: 1.2;
      min-width: 0;
    }

    .wealth-recipient-name {
      font-size: 14px;
      font-weight: 500;
      color: var(--stone-4);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .wealth-recipient-relation {
      font-size: 11px;
      color: var(--stone-3);
    }

    .wealth-recipient--add .wealth-recipient-name {
      color: var(--kingfisher);
      font-weight: 600;
    }

    /* ── Build Engagement & Loyalty ── */
    .features-card[data-card="engagement"] .features-card-content {
      padding-bottom: 0;
    }

    .features-card[data-card="engagement"] .engagement-card {
      position: absolute;
      left: var(--size-5);
      right: auto;
      width: 47cqi;
      bottom: 3cqi;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.92) 100%);
      backdrop-filter: blur(20px) saturate(160%);
      -webkit-backdrop-filter: blur(20px) saturate(160%);
      border-radius: 16px;
      padding: 16px 0 8px;
      display: flex;
      flex-direction: column;
      /* gap: 0 so the first option's highlight reaches the keyline.
         Title supplies its own bottom spacing via padding instead. */
      gap: 0;
      pointer-events: none;
      z-index: 2;
      box-shadow: 0 8px 24px rgba(74, 73, 188, 0.18);
    }

    .features-card[data-card="engagement"] .engagement-photo-card {
      position: absolute;
      right: -8cqi;
      left: auto;
      width: 68cqi;
      bottom: -20cqi;
      height: 100%;
      overflow: hidden;
      pointer-events: none;
      z-index: 1;
    }

    .features-card[data-card="engagement"] .engagement-photo-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
    }

    .engagement-title {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      color: var(--stone-4);
      /* 10px bottom padding replaces the prior 2px + 8px flex gap so
         the title→keyline distance is preserved after gap:0. */
      padding: 0 16px 10px;
    }

    .engagement-title img {
      width: 18px;
      height: 18px;
      display: block;
      filter: none;
    }

    .engagement-options {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
    }

    .engagement-option {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
    }

    .engagement-option-text {
      align-self: center;
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }

    .engagement-option + .engagement-option {
      border-top: 1px solid rgba(0, 0, 0, 0.06);
    }

    .engagement-option:first-child {
      /* 18px top padding = previous 10px + the 8px flex gap that used
         to sit between the keyline and the row. Folding the gap into
         padding means the pulse highlight fills the whole strip with
         no white sliver above the icon. */
      padding-top: 18px;
    }

    .engagement-option-icon {
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    }

    .engagement-option-icon img {
      width: 24px;
      height: 24px;
      display: block;
      filter: none;
    }

    .engagement-option-title {
      font-size: 16px;
      font-weight: 500;
      color: var(--stone-4);
      line-height: 1.2;
    }

    .engagement-option-sub {
      font-size: 12px;
      color: var(--stone-4);
      line-height: 1.3;
      padding-bottom: 2px;
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
    }

    /* ── "By Phone" pulse: every ~7s the row picks up a soft
       kingfisher-2 tint and the icon flips to full white-on-kingfisher,
       while the whole How-Can-We-Help card lifts 8px.
       Title text stays in its idle color. Respects reduced-motion. */
    @keyframes engagement-phone-row {
      0%, 40%, 90%, 100% { background: transparent; }
      50%, 80%           { background: var(--kingfisher-2); }
    }

    @keyframes engagement-phone-icon-circle {
      0%, 40%, 90%, 100% {
        background: var(--white);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
      }
      50%, 80% {
        background: var(--kingfisher);
        box-shadow: 0 2px 6px rgba(74, 73, 188, 0.35);
      }
    }

    /* Filter swap from kingfisher-tint to white. Both keyframes use
       the same 8-function chain so CSS interpolates smoothly (mismatched
       function counts would snap discretely). */
    @keyframes engagement-phone-icon-symbol {
      0%, 40%, 90%, 100% {
        filter: none;
      }
      50%, 80% {
        filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
      }
    }

    @keyframes engagement-card-lift {
      0%, 40%, 90%, 100% { transform: translateY(0); }
      50%, 80%           { transform: translateY(-8px); }
    }

    .engagement-option:first-child {
      animation: engagement-phone-row 7s ease-in-out infinite;
    }
    .engagement-option:first-child .engagement-option-icon {
      animation: engagement-phone-icon-circle 7s ease-in-out infinite;
    }
    .engagement-option:first-child .engagement-option-icon img {
      animation: engagement-phone-icon-symbol 7s ease-in-out infinite;
    }
    .features-card[data-card="engagement"] .engagement-card {
      animation: engagement-card-lift 7s ease-in-out infinite;
      will-change: transform;
    }

    @media (prefers-reduced-motion: reduce) {
      .engagement-option:first-child,
      .engagement-option:first-child .engagement-option-icon,
      .engagement-option:first-child .engagement-option-icon img,
      .features-card[data-card="engagement"] .engagement-card {
        animation: none;
      }
    }

    /* Shared keyline used inside the white inner cards. */
    .card-keyline {
      height: 1px;
      background: rgba(0, 0, 0, 0.06);
    }

    /* ── Growth line graph (shared base for share-of-wallet card) ── */
    .growth-graph {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
    }

    .growth-line {
      stroke: var(--kingfisher);
      stroke-width: 1;
      fill: none;
      vector-effect: non-scaling-stroke;
    }

    .growth-point {
      position: absolute;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: var(--kingfisher);
      transform: translate(-50%, -50%);
      opacity: 0;
    }

    @keyframes growthPointPulse {
      0%, 5%   { background: var(--kingfisher); box-shadow: none; }
      10%, 12% { background: #FFFFFF; box-shadow: 0 0 12px rgba(255, 255, 255, 0.95); }
      20%, 100% { background: var(--kingfisher); box-shadow: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      .growth-point { animation: none; opacity: 1; background: var(--kingfisher); box-shadow: none; }
    }

    /* ── Caregiver card ── */
    .features-card[data-card="caregiver"] .features-card-content {
      padding-bottom: 0;
    }

    .features-card[data-card="caregiver"] .caregiver-wrap {
      position: absolute;
      left: var(--size-5);
      right: -40px;
      bottom: -48px;
      height: 62%;
      display: flex;
      gap: var(--size-3);
      pointer-events: none;
    }

    .caregiver-family,
    .caregiver-share {
      flex: 1;
      min-width: 0;
    }

    .caregiver-family {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .caregiver-person {
      position: relative;
      background: var(--white);
      border-radius: 10px;
      padding: 14px 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: box-shadow 0.3s var(--ease-spring);
    }

    .caregiver-person[data-selected="true"]::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 100%;
      width: var(--size-3);
      height: 1px;
      background: var(--kingfisher);
      pointer-events: none;
    }

    .caregiver-avatar {
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--kingfisher-1);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .caregiver-avatar img {
      width: 20px;
      height: 20px;
      display: block;
      filter: none;
    }

    .caregiver-info {
      display: flex;
      flex-direction: column;
      line-height: 1.2;
      min-width: 0;
    }

    .caregiver-name {
      font-size: 14px;
      font-weight: 500;
      color: var(--stone-4);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .caregiver-relation {
      font-size: 12px;
      color: var(--stone-3);
    }

    .caregiver-person[data-selected="true"] {
      box-shadow: 0 12px 28px rgba(74, 73, 188, 0.28);
    }
    .caregiver-person[data-selected="true"] .caregiver-avatar {
      background: var(--kingfisher);
    }
    .caregiver-person[data-selected="true"] .caregiver-avatar img {
      filter: brightness(0) invert(1);
    }

    .caregiver-share {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.78) 100%);
      backdrop-filter: blur(20px) saturate(160%);
      -webkit-backdrop-filter: blur(20px) saturate(160%);
      border-radius: 16px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      box-shadow: 0 8px 24px rgba(74, 73, 188, 0.18);
    }

    .caregiver-share .card-keyline { margin: 0 -14px; }

    @keyframes caregiverOtherDim {
      0%, 8%    { opacity: 1; }
      22%, 78%  { opacity: 0.32; }
      92%, 100% { opacity: 1; }
    }
    .caregiver-person:not([data-selected="true"]) {
      animation: caregiverOtherDim 8s var(--ease-spring) infinite;
    }

    .caregiver-share-header {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      color: var(--stone-4);
      padding-bottom: 2px;
      margin-bottom: 0;
    }

    .caregiver-share-header img {
      width: 18px;
      height: 18px;
      display: block;
      filter: none;
    }

    .caregiver-share-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
    }

    .caregiver-share-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      color: var(--stone-4);
      white-space: nowrap;
      padding: 11px 14px;
      margin: 0 -14px;
    }
    .caregiver-share-item + .caregiver-share-item {
      border-top: 1px solid rgba(0, 0, 0, 0.05);
    }

    .caregiver-share-check {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 1.5px solid var(--kingfisher);
      background: transparent;
      color: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      line-height: 1;
    }

    @keyframes caregiverCheckOn {
      0%, 6%    { background: transparent; color: transparent; }
      16%, 76%  { background: var(--kingfisher); color: var(--white); }
      86%, 100% { background: transparent; color: transparent; }
    }
    .caregiver-share-item:nth-child(1) .caregiver-share-check { animation: caregiverCheckOn 8s var(--ease-spring) infinite 0s; }
    .caregiver-share-item:nth-child(2) .caregiver-share-check { animation: caregiverCheckOn 8s var(--ease-spring) infinite 0.25s; }
    .caregiver-share-item:nth-child(3) .caregiver-share-check { animation: caregiverCheckOn 8s var(--ease-spring) infinite 0.50s; }
    .caregiver-share-item:nth-child(4) .caregiver-share-check { animation: caregiverCheckOn 8s var(--ease-spring) infinite 0.75s; }
    .caregiver-share-item:nth-child(5) .caregiver-share-check { animation: caregiverCheckOn 8s var(--ease-spring) infinite 1.00s; }

    @media (prefers-reduced-motion: reduce) {
      .caregiver-person:not([data-selected="true"]),
      .caregiver-share-check { animation: none; }
      .caregiver-share-check { background: var(--kingfisher); color: var(--white); }
    }

    /* ── Tablet upper band (769–1024) — 6-col grid, feature cards
       span 3 (2 per row). Audience cards span 2 (3-across). ── */
    @container preview (max-width: 1024px) {
      /* 24px gutter (overrides the base rule's 40px, which sits later in
         source than the @media tablet rule and would otherwise win). */
      .features-cards-grid {
        grid-template-columns: repeat(6, 1fr);
        padding-left: var(--size-5);
        padding-right: var(--size-5);
      }
      .features-card--span-2,
      .features-card--span-3,
      .features-card--span-4,
      .features-card--span-6 { grid-column: span 3; }
      .features-card { min-height: 500px; }
      .features-card .feature-body { max-width: none; }
    }

    /* ── Narrow tablet (601–768) — feature cards become full-width
       single column because at ~290px (2 per row of 6-col) the locked
       desktop visuals overflow them too aggressively. Audience cards
       stay 3-across (span 2 of the still-6-col grid). ── */
    @container preview (max-width: 768px) {
      .features-card--span-2,
      .features-card--span-3,
      .features-card--span-4,
      .features-card--span-6 { grid-column: span 6; }
    }

    /* ── Mobile (≤600px container) — single column with 24px gutters
       inside the preview frame so cards sit in an iPhone-style 327px
       column (375 frame - 2×24 gutters). Audience cards stack too. ── */
    @container preview (max-width: 600px) {
      .features-cards-grid {
        grid-template-columns: 1fr;
        padding-left: var(--size-5);
        padding-right: var(--size-5);
      }
      .features-card--span-2,
      .features-card--span-3,
      .features-card--span-4,
      .features-card--span-6 { grid-column: span 1; }
      .features-card { min-height: 500px; }
      .features-card .feature-body { max-width: none; }
    }

    /* ── Audiences row (under the feature cards) — short headline + a row
       of 3 link cards. Full-bleed keylines on top and bottom; transparent
       bg so it inherits the stone-1 body. Reuses .audience-card and
       .audience-card--link styles from the larger audiences section. */
    /* Mirror the features-cards-grid rail exactly: 1280 max-width with
       40px internal padding (→ 1200 content), so the audience cards line
       up edge-for-edge with the feature cards directly above them. Vertical
       padding only on the section (24px above the eyebrow, 16px below the
       grid so the press carousel sits 16px under it). */
    .audiences-row {
      padding: var(--size-5) 0 var(--size-4);
    }

    .audiences-row-inner {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 var(--size-7);
      display: flex;
      flex-direction: column;
      gap: var(--size-5);
    }

    /* Tablet + mobile gutter → 24px, matching the press carousel below.
       This rule must live AFTER the base above (and after the earlier
       @media blocks) so it actually wins the cascade — the base 40px was
       overriding the earlier tablet/mobile overrides, leaving the cards
       40px-inset while the press box sat at 24px. */
    @media (max-width: 1024px) {
      .audiences-row-inner { padding-left: var(--size-5); padding-right: var(--size-5); }
    }

    /* "Carefull for:" eyebrow above the 3 blocks. */
    .audiences-row-eyebrow {
      font-size: 16px;
      font-weight: 500;
      text-align: center;
      color: var(--stone-4);
      margin: 0;
    }

    /* Audience link cards living as the final row of the features grid:
       each spans 2 columns of the 6-col layout (=> 3 across), auto height,
       slim padding and 24px corner radius. */
    .features-cards-grid .audience-card--in-grid {
      grid-column: span 2;
      padding: var(--size-5) var(--size-4);
      border-radius: 16px;
      min-height: 0;
    }

    .features-cards-grid .audience-card--in-grid .audience-card-title {
      font-size: 24px;
      font-weight: 600;
      letter-spacing: 0;
    }

    /* Shrink the audience card titles at tablet and below so "For Credit
       Unions" doesn't wrap awkwardly when each card is ~1/3 of a 601–1024
       frame. Mobile (≤600) stacks them so the desktop size is fine again. */
    @container preview (max-width: 1024px) {
      .features-cards-grid .audience-card--in-grid .audience-card-title {
        font-size: 18px;
      }
    }

    /* Audience cards keep their base `grid-column: span 2` at tablet so
       all 3 sit in one row of the 6-col grid. They collapse to span 1
       only at mobile (≤600px) where the grid becomes 1fr. */
    @container preview (max-width: 600px) {
      .features-cards-grid .audience-card--in-grid { grid-column: span 1; }
    }

    .audiences-row-headline {
      font-size: clamp(28px, 3.6cqi, 44px);
      font-weight: 600;
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: var(--black);
      margin: 0;
    }

    .audiences-row-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--size-4);
    }

    /* Match the features4 in-grid card chrome exactly: slim padding,
       16px radius, auto height. */
    .audiences-row-grid .audience-card {
      padding: var(--size-5) var(--size-4);
      border-radius: 16px;
      min-height: 0;
    }

    /* Fixed title sizes (24 → 18 at tablet → 24 again when stacked on
       mobile) — same scale that worked in the features4 import. */
    .audiences-row-grid .audience-card-title {
      font-size: 24px;
      font-weight: 600;
      letter-spacing: 0;
    }

    /* Whole card goes white-on-kingfisher on hover. The chevron button
       inside is pointer-events: none so it doesn't intercept hover on its
       own — only the parent card triggers the state change. On hover the
       chevron img inverts to white via filter so it stays visible on the
       kingfisher background. */
    .audiences-row-grid .audience-card--link {
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

    .audiences-row-grid .audience-card--link .btn {
      pointer-events: none;
      transition: border-color 0.2s ease;
    }

    .audiences-row-grid .audience-card--link:hover {
      background: var(--kingfisher);
      color: var(--white);
      border-color: var(--kingfisher);
    }

    .audiences-row-grid .audience-card--link:hover .audience-card-title,
    .audiences-row-grid .audience-card--link:hover .audience-card-eyebrow {
      color: var(--white);
    }

    .audiences-row-grid .audience-card--link:hover .btn {
      border-color: var(--white);
      background: transparent;
    }

    .audiences-row-grid .audience-card--link:hover .btn img {
      filter: brightness(0) invert(1);
    }

    @media (max-width: 1024px) {
      .audiences-row-grid { gap: var(--size-4); }
      /* 18px so "Credit Unions" fits when each card is ~1/3 of the row. */
      .audiences-row-grid .audience-card-title { font-size: 18px; }
    }

    @media (max-width: 600px) {
      /* Stacked single column — full title size is comfortable again. */
      .audiences-row-grid { grid-template-columns: 1fr; gap: var(--size-4); }
      .audiences-row-grid .audience-card-title { font-size: 24px; }
    }

    /* Keep the chevron icon button at its native 48×48 (btn-sm + btn-icon
       = var(--size-8) = 48px) inside the flex audience-card--link so it
       doesn't get squeezed when the title runs wide. */
    .audience-card--link > .btn-icon { flex-shrink: 0; }
    .audience-card--link > .btn-icon > img { flex-shrink: 0; }

    /* ============================================================
       Features cards — @container preview anchor.
       The features-cards-grid lives inside .loyalty-section; we
       wrap the grid in a tiny container div so @container preview
       (max-width: …) queries above react to the grid's actual
       rendered width (viewport - section padding), not the viewport.
       Container-type/-name on a non-painting wrapper avoids touching
       .loyalty-section itself (which holds the headline/subline). */
    .features-cards-container {
      container-type: inline-size;
      container-name: preview;
    }

    /* ── Features LOCK rules — every inner visual pinned to fixed
       desktop pixel sizes / positions. The visuals do NOT scale with the
       grid container; at narrow widths they overflow the card heavily but
       the card's `overflow: hidden` clips cleanly. ── */

    /* Title + body of every card sit above the absolutely-positioned
       visuals so the headline and subline are NEVER painted over. */
    .features-card .features-card-content {
      position: relative;
      z-index: 5;
    }

    /* $1M scalloped badge. */
    .features-card[data-card="protections-phone"] .protections-badge {
      width: 380px;
      height: 380px;
      bottom: -88px;
    }

    /* LegacyKit cards — rear "Start your LegacyKit" + front Recipient. */
    .features-card[data-card="wealth"] .wealth-card {
      width: 280px;
      bottom: -40px;
    }
    .features-card[data-card="wealth"] .wealth-card--front {
      width: 300px;
      bottom: -40px;
    }

    /* How-Can-We-Help inner card. */
    .features-card[data-card="engagement"] .engagement-card {
      width: 280px;
      bottom: 16px;
    }

    /* Photo card (018.webp). */
    .features-card[data-card="engagement"] .engagement-photo-card {
      width: 408px;
      right: -48px;
      bottom: -120px;
    }

    /* AI network cloud — centered horizontally, bleeds heavily on both
       sides and below the card. (transform: translateX(-50%) inherits
       from the shared .features-card--network .network-wrap rule.) */
    .features-card[data-card="ai-network"] .network-wrap {
      width: 1404px;
      bottom: -780px;
      left: 50%;
      right: auto;
      max-width: none;
    }
    /* AI phone — pinned to the RIGHT edge of the card. The base shared
       rule for .protections-phone-wrap centers via left:50% + translateX,
       so we have to explicitly reset left/transform to anchor it right. */
    .features-card[data-card="ai-network"] .protections-phone-wrap {
      left: auto;
      right: 0;
      bottom: -224px;
      width: 634px;
      max-width: none;
      transform: none;
    }

    /* The LOCK rules above set desktop pixel sizes for every card visual.
       For the AI card, the desktop phone (634w) and cloud (1404w) crowd
       the title/body once the card shrinks below ~810px wide. Scale them
       down at narrower container widths AND position the phone so its
       top edge lands just below the body copy (~y=220 in a 500-tall
       card). Content has z-index:5 so the cloud can sit behind text. */
    @container preview (max-width: 1024px) {
      .features-card[data-card="ai-network"] .network-wrap {
        width: 900px;
        bottom: -400px;
      }
      .features-card[data-card="ai-network"] .protections-phone-wrap {
        width: 440px;
        bottom: -128px;
      }
    }
    @container preview (max-width: 400px) {
      .features-card[data-card="ai-network"] .network-wrap {
        width: 640px;
        bottom: -260px;
      }
      .features-card[data-card="ai-network"] .protections-phone-wrap {
        width: 480px;
        bottom: -204px;
      }
      /* Engagement card on Mobile 375 (327px card):
         - How-Can-We-Help: shrink so it doesn't span the whole card
         - 018 photo: smaller, anchored to right edge, pushed lower so
           it peeks out to the right of the help card instead of being
           fully obscured by it */
      .features-card[data-card="engagement"] .engagement-card {
        width: 220px;
      }
      .features-card[data-card="engagement"] .engagement-photo-card {
        width: 240px;
        right: -20px;
        bottom: -160px;
      }
      /* Wealth card on Mobile 375 (327px card):
         - Rear "Start your LegacyKit" sat at bottom: -40 which left
           ~240px of it inside the card — pushed up into the body copy.
           Drop it lower so only the top ~180px of the card pokes into
           the card area, clear of the title/body.
         - Front "LegacyKit Recipient" follows the same drop so the two
           keep their visual relationship. */
      .features-card[data-card="wealth"] .wealth-card {
        width: 240px;
        bottom: -120px;
      }
      .features-card[data-card="wealth"] .wealth-card--front {
        width: 240px;
        bottom: -120px;
      }
    }
    /* Boring legal page (terms / privacy) */
    .legal-header { background: var(--kingfisher); color: var(--white); margin-top: calc(-1 * var(--size-12)); padding: calc(var(--size-12) + var(--size-10)) 0 var(--size-10); }
    .legal-inner { max-width: 820px; margin: 0 auto; padding: 0 var(--size-7); }
    .legal-title { font-size: clamp(32px, 5vw, 48px); font-weight: 600; letter-spacing: -0.02em; margin: 0; }
    .legal-updated { font-size: 15px; color: rgba(255,255,255,0.8); margin: var(--size-3) 0 0; }
    .legal-body { background: var(--white); padding: var(--size-12) 0 var(--size-13); }
    .legal-body h2 { font-size: 24px; font-weight: 600; color: var(--black); letter-spacing: -0.01em; margin: var(--size-9) 0 var(--size-4); }
    .legal-body h3 { font-size: 18px; font-weight: 600; color: var(--black); margin: var(--size-7) 0 var(--size-3); }
    .legal-body p { font-size: 18px; line-height: 1.6; color: var(--stone-4); margin: 0 0 var(--size-5); }
    .legal-body ul, .legal-body ol { font-size: 18px; line-height: 1.6; color: var(--stone-4); margin: 0 0 var(--size-5); padding-left: var(--size-6); }
    .legal-body li { margin: 0 0 var(--size-3); }
    .legal-body a { color: var(--kingfisher); }
    .legal-body strong { color: var(--black); }
    .legal-caps { font-size: 16px; }
    .legal-address { font-size: 16px; line-height: 1.5; color: var(--stone-4); margin: 0 0 var(--size-5); }
  
    /* Scrolled nav: center the menu items between the logo and actions. */
    .nav.is-scrolled .nav-inner { grid-template-columns: 1fr auto 1fr; }
    .nav.is-scrolled .nav-menu { justify-self: center; }

    /* Quotes carousel — full bleed on mobile: no side gutters, padding, or
       side framing so the cards run edge to edge. */
    @media (max-width: 600px) {
      .testimonial-carousel {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
      }
      /* Arrows: inset 24px from the right edge (rest stays full bleed). */
      .testimonial-controls { padding-right: var(--size-5); }
    }

/* ── Blog-specific styles (Take Care pages) ── */
  /* ── Nav — About-page approach: menu visible pre-scroll (the base chrome
     hides it until scrolled). Items render white over the kingfisher band,
     then fall back to the default dark style inside the scrolled pill. ── */
  .nav-menu {
    opacity: 1;
    pointer-events: auto;
  }
  .nav:not(.is-scrolled) .nav-menu-link { color: var(--white); }
  .nav:not(.is-scrolled) .nav-menu-link:hover,
  .nav:not(.is-scrolled) .nav-menu-link[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.16);
    color: var(--white);
  }
  .nav:not(.is-scrolled) .nav-menu-chevron { filter: brightness(0) invert(1); }

  /* ── Shared page scaffolding ── */
  .tc-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--size-6);
  }
  @media (max-width: 600px) {
    .tc-container { padding: 0 var(--size-5); }
  }

  .tc-section { padding: var(--size-10) 0; }
  .tc-section--tight { padding: var(--size-8) 0; }

  /* ── Page header (hub / listings / category) — kingfisher band extending
     under the transparent nav, same technique as .legal-header. ── */
  .tc-header {
    background: linear-gradient(180deg, var(--kingfisher) 0%, var(--kingfisher-3) 100%);
    color: var(--white);
    text-align: center;
    margin-top: calc(-1 * var(--size-12));
    padding: calc(var(--size-12) + var(--size-10)) 0 var(--size-9);
  }
  .tc-header .tc-kicker {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: var(--size-3);
  }
  .tc-header h1 {
    font-size: clamp(32px, 4.5vw, 56px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0 0 var(--size-4);
  }
  .tc-header .tc-sub {
    max-width: 640px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.5;
    color: var(--kingfisher-1);
  }

  /* ── Category pill row (inside the band) ── */
  .tc-cats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size-2);
    justify-content: center;
    padding-top: var(--size-7);
  }
  .tc-cat-pill {
    display: inline-flex;
    align-items: center;
    height: var(--size-8);
    padding: 0 var(--size-4);
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: transparent;
    color: var(--white);
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  .tc-cat-pill:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--white); }
  .tc-cat-pill[aria-current="page"] {
    background: var(--white);
    border-color: var(--white);
    color: var(--kingfisher);
  }

  /* ── Chip (category tag on cards / article hero) ── */
  .tc-chip {
    display: inline-flex;
    align-items: center;
    height: var(--size-6);
    padding: 0 var(--size-3);
    border-radius: 999px;
    background: var(--kingfisher-0);
    color: var(--kingfisher);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
  }

  /* ── Card grid ── */
  .tc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--size-8) var(--size-6);
  }
  @media (max-width: 1024px) { .tc-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 640px)  { .tc-grid { grid-template-columns: 1fr; } }

  .tc-card { display: flex; flex-direction: column; min-width: 0; }
  .tc-card-thumb {
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    overflow: hidden;
    background: var(--stone-0);
    margin-bottom: var(--size-4);
  }
  .tc-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
  }
  .tc-card:hover .tc-card-thumb img { transform: scale(1.03); }
  .tc-card-title {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    margin: var(--size-3) 0 0;
  }
  .tc-card-title a { color: inherit; }
  .tc-card-title a:hover { color: var(--kingfisher); }
  .tc-card-meta {
    margin-top: var(--size-3);
    font-size: 14px;
    color: var(--stone-3);
  }

  /* ── Featured (hub lead) card ── */
  .tc-featured {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--size-8);
    align-items: center;
    background: var(--white);
    border: 1px solid var(--kingfisher-1);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: var(--size-10);
  }
  .tc-featured-thumb { aspect-ratio: 16 / 10; background: var(--stone-0); }
  .tc-featured-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .tc-featured-body { padding: var(--size-8); }
  .tc-featured-body h2 {
    font-size: clamp(24px, 2.5vw, 34px);
    font-weight: 500;
    line-height: 1.2;
    margin: var(--size-4) 0;
  }
  .tc-featured-body h2 a { color: inherit; }
  .tc-featured-body h2 a:hover { color: var(--kingfisher); }
  .tc-featured-body p { color: var(--stone-3); line-height: 1.5; margin: 0 0 var(--size-4); }
  @media (max-width: 900px) {
    .tc-featured { grid-template-columns: 1fr; }
    .tc-featured-body { padding: var(--size-6); }
  }

  /* ── Section heading row (with "view all" link) ── */
  .tc-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--size-4);
    margin-bottom: var(--size-6);
  }
  .tc-row-head h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 500; margin: 0; }
  .tc-row-head a { color: var(--kingfisher); font-weight: 500; font-size: 16px; }
  .tc-row-head a:hover { text-decoration: underline; }

  /* ── Article page — kingfisher hero band, media card overlapping below ── */
  .article-hero {
    background: linear-gradient(180deg, var(--kingfisher) 0%, var(--kingfisher-3) 100%);
    color: var(--white);
    text-align: center;
    margin-top: calc(-1 * var(--size-12));
    padding: calc(var(--size-12) + var(--size-10)) var(--size-6) calc(var(--size-9) + 120px);
  }
  .article-hero > * { max-width: 800px; margin-left: auto; margin-right: auto; }
  .article-hero .tc-chip {
    background: rgba(255, 255, 255, 0.14);
    color: var(--white);
  }
  .article-hero h1 {
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: var(--size-4) auto;
  }
  .article-byline {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--size-3);
    font-size: 15px;
    color: rgba(255, 255, 255, 0.75);
  }
  .article-byline img {
    width: var(--size-8);
    height: var(--size-8);
    border-radius: 50%;
    object-fit: cover;
  }
  .article-byline .article-byline-author { color: var(--white); font-weight: 500; }

  .article-hero-media {
    max-width: 1000px;
    margin: -120px auto 0;
    padding: 0 var(--size-6);
    position: relative;
    z-index: 10;
  }
  .article-hero-media img {
    width: 100%;
    border-radius: 16px;
    display: block;
  }
  .article-hero-media .article-video {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    background: var(--black);
  }
  .article-hero-media .article-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* ── Article body (migrated Webflow richtext) ── */
  .article-body {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--size-8) var(--size-6) var(--size-10);
    font-size: 18px;
    line-height: 1.65;
  }
  .article-body p { margin: 0 0 var(--size-5); }
  .article-body a { color: var(--kingfisher); text-decoration: underline; text-underline-offset: 2px; }
  .article-body a:hover { color: var(--kingfisher-3); }
  .article-body h2, .article-body h3, .article-body h4 {
    font-weight: 500;
    line-height: 1.25;
    margin: var(--size-8) 0 var(--size-4);
  }
  .article-body h2 { font-size: 28px; }
  .article-body h3 { font-size: 23px; }
  .article-body h4 { font-size: 19px; }
  .article-body ul, .article-body ol { margin: 0 0 var(--size-5); padding-left: var(--size-6); }
  .article-body li { margin-bottom: var(--size-2); }
  .article-body blockquote {
    margin: var(--size-6) 0;
    padding: var(--size-2) 0 var(--size-2) var(--size-5);
    border-left: 3px solid var(--kingfisher);
    color: var(--kingfisher-4);
    font-size: 20px;
    line-height: 1.5;
  }
  .article-body figure { margin: var(--size-6) 0; }
  .article-body figure div { margin: 0; }
  .article-body img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
    margin: 0 auto;
  }
  .article-body figcaption {
    text-align: center;
    font-size: 14px;
    color: var(--stone-3);
    margin-top: var(--size-2);
  }
  .article-body iframe { max-width: 100%; }
  .article-body hr {
    border: 0;
    border-top: 1px solid var(--stone-1);
    margin: var(--size-8) 0;
  }

  /* ── Author bio block ── */
  .article-author {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 var(--size-6) var(--size-10);
  }
  .article-author-card {
    display: flex;
    gap: var(--size-5);
    align-items: flex-start;
    border-top: 1px solid var(--stone-1);
    padding-top: var(--size-8);
  }
  .article-author-card img {
    width: var(--size-12);
    height: var(--size-12);
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }
  .article-author-card .article-author-name { font-weight: 500; margin-bottom: var(--size-2); }
  .article-author-card .article-author-bio { font-size: 15px; line-height: 1.6; color: var(--stone-3); }
  .article-author-card .article-author-bio p { margin: 0 0 var(--size-3); }
  .article-author-card .article-author-bio a { color: var(--kingfisher); }

  /* ── CTA band (article footer / hub) ── */
  .tc-cta {
    background: var(--kingfisher);
    border-radius: 16px;
    color: var(--white);
    text-align: center;
    padding: var(--size-10) var(--size-6);
    margin: 0 auto var(--size-10);
    max-width: 1000px;
  }
  .tc-cta h2 {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 500;
    margin: 0 0 var(--size-3);
  }
  .tc-cta p {
    max-width: 560px;
    margin: 0 auto var(--size-6);
    color: var(--kingfisher-1);
    line-height: 1.5;
  }

  /* ── Related articles ── */
  .tc-related { padding-bottom: var(--size-11); }

  /* ── Stories ── */
  .story-card { display: flex; flex-direction: column; min-width: 0; }
  .story-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    overflow: hidden;
    background: var(--stone-0);
    margin-bottom: var(--size-4);
  }
  .story-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .story-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 32, 0.15);
    transition: background 0.2s ease;
  }
  .story-card:hover .story-thumb::after { background: rgba(16, 24, 32, 0.3); }
  .story-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--size-11);
    height: var(--size-11);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    display: grid;
    place-items: center;
    z-index: 1;
  }
  .story-play::before {
    content: '';
    display: block;
    margin-left: 4px;
    border-left: 16px solid var(--kingfisher);
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
  }
  .story-quote {
    font-size: 17px;
    line-height: 1.45;
    font-weight: 400;
    margin: var(--size-3) 0 0;
  }
  .story-name { margin-top: var(--size-3); font-size: 14px; color: var(--stone-3); }

  /* ── Empty state ── */
  .tc-empty { text-align: center; color: var(--stone-3); padding: var(--size-10) 0; }