/* Shared marketing stylesheet: every rule here is identical on all marketing
   pages and used to be inlined in each one. Page-specific rules stay inline in
   the page, after this file. Fonts/tokens/nav/footer/buttons/legal/etc. */

/* 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;
    }
/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
a { color: inherit; text-decoration: none; }
/* ── Page shell ── */
.page {
      position: relative;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
.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-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, left 0.3s var(--ease-spring), right 0.3s var(--ease-spring), max-width 0.3s var(--ease-spring);
    }
/* 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: transparent;
    }
.nav.is-scrolled.nav-business-open { background: transparent; }
/* While unscrolled the bar is transparent over the page, so the panel is
       too — the white frost would otherwise sit under a grey-looking bar. Once
       scrolled, pill and panel are both the white frost. */
.nav:not(.is-scrolled) .nav-megamenu {
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      box-shadow: none;
    }
.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;
    }
/* Logo lockup: ambient rotating symbol + wordmark */
.nav-logo {
      display: flex;
      align-items: center;
      gap: var(--size-3);
      cursor: pointer;
      flex-shrink: 0;
    }
.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);
    }
/* ── Hero ── */
main {
      flex: 1;
    }
.hero-media,
    .hero-overlay {
      position: absolute;
      inset: 0;
      z-index: -1;
    }
.hero-media {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
/* 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-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:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
    }
.hero-actions .btn {
      height: var(--size-11); /* large 72px */
      padding: 0 var(--size-8);
      font-size: 18px;
    }
.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 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; }
}
/* ── Features grid (3 columns; center always blank; rows alternate left/right) ── */
.features-section {
      background: var(--stone);
      padding: var(--size-12) 0;
    }
.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 .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;
    }
/* 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;
    }
.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.in-view {
      opacity: 1;
      transform: translateY(0);
    }
/* 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;
    }
/* 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-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;
    }
.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;
    }
/* 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);
    }
/* 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-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);
    }
.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 .audience-card-eyebrow {
      color: var(--black);
      opacity: 0.75;
    }
.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;
    }
.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;
    }
/* Legal bar between the two full-bleed keylines */
.site-footer-legal {
      padding: var(--size-5) 0;
    }
.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; }
}
@media (max-width: 600px) {
  /* Mobile */
  .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 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-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;
        }
  .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-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%;
        }
  /* 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-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));
        }
}
.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--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));
    }
.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;
    }
/* ── 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;
    }
/* ── 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-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;
    }
@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); }
}
@container preview (max-width: 1024px) {
  /* ── Tablet upper band (769–1024) — 6-col grid, feature cards
         span 3 (2 per row). Audience cards span 2 (3-across). ── */
  /* 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; }
}
@container preview (max-width: 768px) {
  /* ── 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). ── */
  .features-card--span-2,
        .features-card--span-3,
        .features-card--span-4,
        .features-card--span-6 { grid-column: span 6; }
}
@container preview (max-width: 600px) {
  /* ── 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. ── */
  .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; }
}
/* ============================================================
       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 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;
    }
@container preview (max-width: 1024px) {
  .features-card[data-card="ai-network"] .protections-phone-wrap {
          width: 440px;
          bottom: -128px;
        }
}
@container preview (max-width: 400px) {
  .features-card[data-card="ai-network"] .protections-phone-wrap {
          width: 480px;
          bottom: -204px;
        }
  /* 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;
        }
}