/* ===== colour mesh (2026-11-05): soft multi-colour light behind the product, so the neutral ink/grey page feels
   playful. Five blurred blobs on one palette: pale spring pastels (mint, sky, lilac, peach, butter), normal blending so overlaps stay light. They drift slowly.
   Colour stays in the light only; UI chrome stays ink/grey, and status colours keep their meaning. ===== */
.mesh { position: absolute; inset: 0; pointer-events: none; filter: blur(70px); }
.mesh i { position: absolute; border-radius: 50%; will-change: transform; opacity: .85; }
.mesh i:nth-child(1) { left: 30%; top: 26%; width: 42%; height: 58%; background: #CFF2DC; animation: mDrift1 18s ease-in-out infinite alternate; }   /* mint */
.mesh i:nth-child(2) { left: 6%;  top: 34%; width: 36%; height: 52%; background: #D6ECFF; animation: mDrift2 22s ease-in-out infinite alternate; }   /* sky */
.mesh i:nth-child(3) { left: 56%; top: 30%; width: 36%; height: 54%; background: #E9E0FF; animation: mDrift3 20s ease-in-out infinite alternate; }   /* lilac */
.mesh i:nth-child(4) { left: 20%; top: 54%; width: 30%; height: 40%; background: #FFE6D8; animation: mDrift2 24s ease-in-out infinite alternate-reverse; } /* peach */
.mesh i:nth-child(5) { left: 52%; top: 56%; width: 28%; height: 38%; background: #FFF4CF; animation: mDrift1 26s ease-in-out infinite alternate-reverse; } /* butter */
@keyframes mDrift1 { to { transform: translate(8%, -6%) scale(1.08); } }
@keyframes mDrift2 { to { transform: translate(10%, 6%) scale(.94); } }
@keyframes mDrift3 { to { transform: translate(-9%, 5%) scale(1.06); } }

/* hero: the mesh replaces the plain green aura; it sits under the phone and fades out before the fold */
.hero__aura { background: none; bottom: -14%; width: min(1600px, 170vw); opacity: 1; -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent); mask-image: radial-gradient(closest-side, #000 50%, transparent); }

/* pinned features: a smaller pool of the same light behind the phone */
.mesh--fs { inset: 4% -55% 2%; z-index: -1; opacity: 1; filter: blur(80px); }
.fs__c { isolation: isolate; }

/* dark theme (bento in view): the light dims rather than glowing */
html.dark .mesh { opacity: .12; }
@media (max-width: 760px) { .mesh { filter: blur(48px); } .hero__aura { width: 190vw; } }
@media (prefers-reduced-motion: reduce) { .mesh i { animation: none; } }
/* sticky features: fresher, a touch more colour than the hero, and a lighter phone shadow so nothing reads muddy */
.mesh--fs i:nth-child(1) { background: #BDF0D0; } .mesh--fs i:nth-child(2) { background: #C6E5FF; } .mesh--fs i:nth-child(3) { background: #E2D6FF; }
.mesh--fs i:nth-child(4) { background: #FFE0CF; } .mesh--fs i:nth-child(5) { background: #FFF1BF; }
.fs__phone { filter: drop-shadow(0 18px 24px rgba(13,18,16,.08)) drop-shadow(0 50px 60px rgba(13,18,16,.07)); }

/* benefit cards: a small fresh pool of light inside each card, right behind its phone (mint-led, spring) */
.kb__card { isolation: isolate; }
.mesh--card { inset: auto 6% -12% 6%; height: 70%; z-index: 0; filter: blur(46px); opacity: 1; }
.mesh--card i:nth-child(1) { left: 22%; top: 22%; width: 56%; height: 60%; background: #C2F0D3; }
.mesh--card i:nth-child(2) { left: 2%;  top: 38%; width: 42%; height: 50%; background: #D3EDFF; }
.mesh--card i:nth-child(3) { left: 58%; top: 40%; width: 40%; height: 46%; background: #F1F8C6; }
.kb__card .kb__phone { z-index: 1; }
.mesh--card { inset: auto -6% -14% -6%; height: 76%; }
.kb__card:has(.kb__phone.is-high) .mesh--card { inset: -14% -6% auto -6%; }
/* green leads (2026-11-05): mint keeps its full strength; the other hues drop back to hints that melt into it */
.mesh i:nth-child(1) { opacity: .9; }
.mesh i:not(:nth-child(1)) { opacity: .38; }
.mesh--fs i:not(:nth-child(1)) { opacity: .32; }
.mesh--card i:not(:nth-child(1)) { opacity: .45; }
/* benefit cards sit on cement grey, where thin pastels turn dull. Lift the light with a white core under the
   colour, and use brighter, airier tints at full strength instead of see-through ones (reads fresh, not grey). */
.mesh--card { background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,.6) 55%, rgba(255,255,255,0)); }
.mesh--card i:nth-child(1) { background: #C9F6DA; opacity: .95; }
.mesh--card i:nth-child(2) { background: #E3F3FF; opacity: .9; }
.mesh--card i:nth-child(3) { background: #F2FBD6; opacity: .9; }

/* sticky features: soft concentric ripples behind the phone, the same "signal" as the hero pill and charger rings.
   Each band is a soft shaded ring (light → faint mint-grey → light); they drift outward slowly and fade at the edge. */
@property --rr { syntax: '<length>'; inherits: false; initial-value: 0px; }
.rings { position: absolute; left: 50%; top: 50%; width: min(1100px, 92vw); aspect-ratio: 1; translate: -50% -50%; z-index: -1; pointer-events: none; border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%,
    rgba(255,255,255,0) calc(var(--rr) + 0px), rgba(30,72,50,.045) calc(var(--rr) + 30px), rgba(255,255,255,.55) calc(var(--rr) + 36px), rgba(255,255,255,0) calc(var(--rr) + 46px));
  -webkit-mask-image: radial-gradient(closest-side, transparent 22%, #000 34%, rgba(0,0,0,.6) 62%, transparent 98%);
          mask-image: radial-gradient(closest-side, transparent 22%, #000 34%, rgba(0,0,0,.6) 62%, transparent 98%);
  animation: rRip 6s linear infinite; }
@keyframes rRip { to { --rr: 46px; } }
html.dark .rings { opacity: .15; }
@media (max-width: 760px) { .rings { width: 150vw; } }
@media (prefers-reduced-motion: reduce) { .rings { animation: none; } }

/* (2026-11-05) benefit cards: clip the glow to the rounded card (clip-path clips blurred layers, overflow alone can
   leak at the corners), and fade the glow out before the card edge so the card reads as a solid fill */
.kb__card { clip-path: inset(0 round 28px); }
.mesh--card { inset: auto 2% -6% 2%; -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 92%); mask-image: radial-gradient(closest-side, #000 45%, transparent 92%); }
.kb__card:has(.kb__phone.is-high) .mesh--card { inset: -6% 2% auto 2%; }

/* sticky ripples: an angular mask keeps them in two soft fans above and below the phone, not across the width */
.rings { width: min(900px, 80vw);
  -webkit-mask-image: conic-gradient(from 0deg, #000 0deg 28deg, transparent 62deg 118deg, #000 152deg 208deg, transparent 242deg 298deg, #000 332deg 360deg),
                      radial-gradient(closest-side, transparent 24%, #000 36%, rgba(0,0,0,.5) 64%, transparent 96%);
  -webkit-mask-composite: source-in;
          mask-image: conic-gradient(from 0deg, #000 0deg 28deg, transparent 62deg 118deg, #000 152deg 208deg, transparent 242deg 298deg, #000 332deg 360deg),
                      radial-gradient(closest-side, transparent 24%, #000 36%, rgba(0,0,0,.5) 64%, transparent 96%);
          mask-composite: intersect; }
/* ripples, take 2: a tall narrow oval mask (not fans), so the rings hug the phone and stay out of the wide sides */
.rings { width: min(1000px, 86vw);
  -webkit-mask-image: radial-gradient(ellipse 34% 50% at 50% 50%, transparent 40%, #000 56%, rgba(0,0,0,.55) 78%, transparent 100%);
          mask-image: radial-gradient(ellipse 34% 50% at 50% 50%, transparent 40%, #000 56%, rgba(0,0,0,.55) 78%, transparent 100%);
  -webkit-mask-composite: source-over; mask-composite: add; }

/* benefit cards, take 3 (2026-11-05): the glow is drawn with plain radial gradients, no blur filter, so nothing can
   escape the rounded corners. Fresh and natural: a mint bloom right behind the phone, a sky haze to one side,
   a hint of lime low on the other; all of it fades to nothing well before the card edge. */
.kb__card { clip-path: none; }
.mesh--card { inset: 0; height: auto; filter: none; -webkit-mask-image: none; mask-image: none;
  background:
    radial-gradient(38% 34% at 50% 74%, rgba(150,232,184,.55), rgba(150,232,184,0) 100%),
    radial-gradient(30% 30% at 30% 62%, rgba(170,214,255,.42), rgba(170,214,255,0) 100%),
    radial-gradient(28% 26% at 72% 86%, rgba(222,245,160,.42), rgba(222,245,160,0) 100%),
    radial-gradient(46% 40% at 50% 78%, rgba(255,255,255,.7), rgba(255,255,255,0) 100%); }
.mesh--card i { display: none; }
.kb__card:has(.kb__phone.is-high) .mesh--card { inset: 0;
  background:
    radial-gradient(38% 34% at 50% 26%, rgba(150,232,184,.55), rgba(150,232,184,0) 100%),
    radial-gradient(30% 30% at 70% 38%, rgba(170,214,255,.42), rgba(170,214,255,0) 100%),
    radial-gradient(28% 26% at 28% 14%, rgba(222,245,160,.42), rgba(222,245,160,0) 100%),
    radial-gradient(46% 40% at 50% 22%, rgba(255,255,255,.7), rgba(255,255,255,0) 100%); }
/* glow sits around the phone's edges (where it shows), not under its body */
.mesh--card { background:
    radial-gradient(26% 30% at 12% 70%, rgba(150,232,184,.6), rgba(150,232,184,0) 100%),
    radial-gradient(24% 26% at 90% 58%, rgba(178,216,255,.5), rgba(178,216,255,0) 100%),
    radial-gradient(30% 22% at 76% 96%, rgba(214,244,160,.5), rgba(214,244,160,0) 100%),
    radial-gradient(34% 26% at 22% 98%, rgba(150,232,184,.45), rgba(150,232,184,0) 100%),
    radial-gradient(40% 18% at 50% 44%, rgba(150,232,184,.4), rgba(150,232,184,0) 100%); }
.kb__card:has(.kb__phone.is-high) .mesh--card { background:
    radial-gradient(26% 30% at 88% 30%, rgba(150,232,184,.6), rgba(150,232,184,0) 100%),
    radial-gradient(24% 26% at 10% 42%, rgba(178,216,255,.5), rgba(178,216,255,0) 100%),
    radial-gradient(30% 22% at 24% 4%, rgba(214,244,160,.5), rgba(214,244,160,0) 100%),
    radial-gradient(40% 18% at 50% 68%, rgba(150,232,184,.4), rgba(150,232,184,0) 100%); }
/* ripples: quieter, so the phone's UI leads; thinner, lighter bands that melt into the page */
.rings { opacity: .5;
  background: repeating-radial-gradient(circle at 50% 50%,
    rgba(255,255,255,0) calc(var(--rr) + 0px), rgba(30,72,50,.03) calc(var(--rr) + 32px), rgba(255,255,255,.4) calc(var(--rr) + 37px), rgba(255,255,255,0) calc(var(--rr) + 46px)); }
/* d2: much softer card glow (about half), just a breath of colour around the phone */
.mesh--card { opacity: .5; }
.rings { opacity: .55; }   /* ripples ~10% more visible */

/* (2026-11-05) the alert's backdrop blur + clip animation makes Chrome drop the card's rounded overflow clip for a
   moment (square corners). clip-path keeps the rounded clip at all times. The hairline is drawn inside (::after),
   so the clip can't cut it off. */
.kb__card { clip-path: inset(0 round 28px); }
.kb__card::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px var(--card-line, transparent); }

/* (2026-11-05) fresher card glow: the phone's grey shadow was mixing into the colour and dulling it, so it's much
   lighter now; tints are brighter, cleaner hues (high chroma, high lightness) at low strength instead of muted ones */
.kb__phone { filter: drop-shadow(0 24px 34px rgba(13,18,16,.06)); }
.mesh--card { opacity: 1; background:
    radial-gradient(26% 30% at 12% 70%, rgba(110,245,165,.30), rgba(110,245,165,0) 100%),
    radial-gradient(24% 26% at 90% 58%, rgba(120,205,255,.26), rgba(120,205,255,0) 100%),
    radial-gradient(30% 22% at 76% 96%, rgba(200,255,110,.30), rgba(200,255,110,0) 100%),
    radial-gradient(34% 26% at 22% 98%, rgba(110,245,165,.26), rgba(110,245,165,0) 100%),
    radial-gradient(40% 18% at 50% 44%, rgba(110,245,165,.20), rgba(110,245,165,0) 100%); }
.kb__card:has(.kb__phone.is-high) .mesh--card { background:
    radial-gradient(26% 30% at 88% 30%, rgba(110,245,165,.30), rgba(110,245,165,0) 100%),
    radial-gradient(24% 26% at 10% 42%, rgba(120,205,255,.26), rgba(120,205,255,0) 100%),
    radial-gradient(30% 22% at 24% 4%, rgba(200,255,110,.30), rgba(200,255,110,0) 100%),
    radial-gradient(40% 18% at 50% 68%, rgba(110,245,165,.20), rgba(110,245,165,0) 100%); }
.kb__phone { filter: none; }   /* no drop shadow on the benefit phones: it greyed the glow */
.fs { overflow-x: clip; }   /* the glow and rings behind the sticky phone must not widen the page on phones (clip keeps sticky working) */
/* (2026-11-05) the phone column is positioned, so its glow and rings painted over the (static) copy and stat columns
   once their reveal finished. Lift both columns above it so the cards stay pure white. */
.fs__l, .fs__r { position: relative; z-index: 2; }
/* ripples fade out before the section's bottom edge (the next section's background was cutting them in a hard line) */
.rings { width: min(900px, 80vw);
  -webkit-mask-image: radial-gradient(ellipse 34% 42% at 50% 50%, transparent 40%, #000 56%, rgba(0,0,0,.5) 76%, transparent 100%);
          mask-image: radial-gradient(ellipse 34% 42% at 50% 50%, transparent 40%, #000 56%, rgba(0,0,0,.5) 76%, transparent 100%); }
.mesh--fs { -webkit-mask-image: linear-gradient(#000 55%, transparent 96%); mask-image: linear-gradient(#000 55%, transparent 96%); }   /* glow fades out inside its own box, so nothing reaches the section edge */
.fs__phone { filter: drop-shadow(0 16px 20px rgba(13,18,16,.10)) drop-shadow(0 32px 40px rgba(13,18,16,.08)); }   /* shorter shadow: fades out before the section edge */