/* ===== D2 test (2026-11-05): same page as D1, but the page is soft light grey and every grey card is white,
   to compare how the colour glows read on white cards. Bento (dark) is unchanged. ===== */
:root { --page: #F3F4F2; --cement: #FFFFFF; }
body, .hero, .say, .fs, .kb, .next { background-color: var(--page); }
.hero::after { background: linear-gradient(rgba(243,244,242,0), var(--page) 85%); }
.kb__card, .fs__big, .fs__sm, .btn--ghost, .eb { background: #fff; }
.kb__card { box-shadow: 0 1px 2px rgba(13,18,16,.03), 0 18px 40px -28px rgba(13,18,16,.12); }
.fs__sm { box-shadow: inset 0 0 0 1px rgba(13,18,16,.06); }
.vblur i:nth-child(5) { background: linear-gradient(rgba(243,244,242,0) 30%, rgba(243,244,242,.6)); }
.say__t { --w-off: #C4C9C6; }
/* softer, fresher page so the white cards lift off it */
:root { --page: #FCFCFC; }
.hero::after { background: linear-gradient(rgba(252,252,252,0), var(--page) 85%); }
.vblur i:nth-child(5) { background: linear-gradient(rgba(252,252,252,0) 30%, rgba(252,252,252,.6)); }
.kb__card { box-shadow: 0 0 0 1px rgba(13,18,16,.04), 0 2px 6px -2px rgba(13,18,16,.05), 0 24px 48px -30px rgba(13,18,16,.16); clip-path: none; }
.fs__big { box-shadow: 0 0 0 1px rgba(13,18,16,.04), 0 18px 40px -28px rgba(13,18,16,.14); }
.fs__sm { box-shadow: 0 0 0 1px rgba(13,18,16,.05), 0 10px 24px -20px rgba(13,18,16,.12); }
.eb { box-shadow: 0 0 0 1px rgba(13,18,16,.05); }
/* white cards: no outline, elevation from a soft shadow only */
.kb__card { box-shadow: 0 2px 6px -2px rgba(13,18,16,.05), 0 24px 48px -28px rgba(13,18,16,.14); }
.fs__big { box-shadow: 0 18px 40px -26px rgba(13,18,16,.14); }
.fs__sm { box-shadow: 0 10px 26px -18px rgba(13,18,16,.14); }
.eb { box-shadow: 0 4px 14px -8px rgba(13,18,16,.12); }
/* cards like the reference: a fine hairline edge, almost no shadow */
.kb__card, .fs__big, .fs__sm { box-shadow: 0 0 0 1px rgba(13,18,16,.055), 0 1px 2px rgba(13,18,16,.02); }
.eb { box-shadow: 0 0 0 1px rgba(13,18,16,.06); }
.kb__card { --card-line: rgba(13,18,16,.055); box-shadow: none; }

/* (2026-11-05) Necta's page tone: white page; card sections fade white → #FAFAFA → #FAFAFA → white, so the
   grey only sits behind the cards and the edges of each section melt into the white around them */
:root { --page: #FFFFFF; }
body, .hero, .say, .next { background-color: #fff; }
.hero::after { background: linear-gradient(rgba(255,255,255,0), #fff 85%); }
.vblur i:nth-child(5) { background: linear-gradient(rgba(255,255,255,0) 30%, rgba(255,255,255,.55)); }
.fs, .kb { background-color: #fff; background-image: linear-gradient(#FFFFFF 0%, #FAFAFA 32%, #FAFAFA 87%, #FFFFFF 100%); }

/* ===== hero (2026-11-05), Necta-style light: one full-width band of colour that rises from the bottom of the hero
   behind the phone, heavily blurred and masked so the top half stays clean white. Green leads; sky and lilac sit
   at the far edges, peach and butter only as faint warmth low down. ===== */
.hero__aura { left: 0; right: 0; bottom: 0; top: 34%; width: auto; aspect-ratio: auto; transform: none; border-radius: 0; opacity: 1; animation: none;
  -webkit-mask-image: linear-gradient(transparent 0%, #000 42%, #000 82%, transparent 100%); mask-image: linear-gradient(transparent 0%, #000 42%, #000 82%, transparent 100%); }
.hero__aura .mesh { inset: 0; filter: blur(60px); }
.hero__aura .mesh i { opacity: 1; animation-duration: 26s; }
.hero__aura .mesh i:nth-child(1) { left: 26%; top: 18%; width: 48%; height: 90%; background: #C4F2D6; }   /* mint, centre */
.hero__aura .mesh i:nth-child(2) { left: -6%; top: 30%; width: 34%; height: 80%; background: #DCEEFF; opacity: .8; }   /* sky, left */
.hero__aura .mesh i:nth-child(3) { left: 72%; top: 28%; width: 34%; height: 80%; background: #E8E1FF; opacity: .7; }   /* lilac, right */
.hero__aura .mesh i:nth-child(4) { left: 14%; top: 66%; width: 30%; height: 50%; background: #FFE9DC; opacity: .55; }  /* peach, low left */
.hero__aura .mesh i:nth-child(5) { left: 56%; top: 66%; width: 30%; height: 50%; background: #FFF5D2; opacity: .6; }   /* butter, low right */
.js .hero__aura { animation: fade 1.6s ease backwards .1s; }

/* big screens: the hero no longer stretches to the viewport, so the phone is always cropped at the fold
   (about 60% of it shows) instead of standing whole on a tall monitor */
.hero { min-height: 0; }
.hero__stage { flex: none; min-height: 0; height: calc(clamp(250px, 25vw, 350px) * 2.044 * .6); }
@media (max-width: 760px) { .hero__stage { height: calc(clamp(230px, 64vw, 300px) * 2.044 * .62); } }

/* ===== hero mesh v2 (2026-11-05): a true mesh gradient (hero-mesh.js) under the map lines, only in the lower band
   from the cards down; it fades in at the top edge and out into the white fold at the bottom ===== */
.hero__aura { top: 36%; bottom: 0; left: 0; right: 0; z-index: 0; filter: none;
  -webkit-mask-image: linear-gradient(transparent 0%, #000 26%, #000 64%, transparent 96%); mask-image: linear-gradient(transparent 0%, #000 26%, #000 64%, transparent 96%); }
.hero__mesh { display: block; width: 100%; height: 100%; filter: blur(18px) saturate(1.05); transform: scale(1.08); }
.hero__map { z-index: 1; }   /* the map's hairlines sit on top of the colour, so the mesh reads as light under the map */
/* side cards back to clean white glass: almost opaque, so the colour doesn't tint them */
.f--row, .f--stop { background: linear-gradient(160deg, rgba(255,255,255,.94), rgba(255,255,255,.86)) !important; }
.eb { background: #F2F3F1; }   /* label pills: a slight grey so they read on the white page */

/* ===== hero glow, final (2026-11-05): the full-width mesh is gone; just a subtle mint glow right behind the phone ===== */
.hero__aura { left: 50%; top: auto; right: auto; bottom: -12%; width: min(1000px, 120vw); aspect-ratio: 1.5; transform: translateX(-50%); border-radius: 50%;
  -webkit-mask-image: none; mask-image: none; opacity: 1;
  background: radial-gradient(closest-side, rgba(196,240,212,.75), rgba(214,244,226,.35) 50%, rgba(255,255,255,0) 78%); }

/* sticky → benefits seam (2026-11-05): the benefits band starts see-through over the white page (same colour),
   so the glow and phone shadow spilling down from the sticky section blend across instead of being cut */
html body .kb { background-color: transparent; }
html body .kb::before { background: linear-gradient(rgba(255,255,255,0) 0%, rgba(250,250,250,0) 8%, #FAFAFA 32%, #FAFAFA 87%, #FFFFFF 100%); }
html.dark body .kb { background-color: #0A0C0B; }
/* one continuous band from the sticky section into benefits: no white dip between them */
html body .fs::before { background: linear-gradient(#FFFFFF 0%, #FAFAFA 6%, #FAFAFA 100%); }
html body .kb::before { background: linear-gradient(#FAFAFA 0%, #FAFAFA 87%, #FFFFFF 100%); }