/* ==========================================================
   ProfitMaps AI — front-end sales page
   Deep emerald + the JV page's hero language: hero aura, ghost
   logo marks, a 3D map floor with standing rank pins, the video
   on a tilted lime plate dropping a pin onto the floor, and edge
   cards (visibility card, price tile, gold chip, notifications).
   No running lines, no flowing effects.
   Acid lime = highlight, gold = money, orange pill = every CTA.
   Type: Bricolage Grotesque (Title Case headlines), Geist body,
   Caveat for the one handwritten note.
   ========================================================== */
/* Arial scaled to Geist's width (measured on the pre-launch page:
   regular 102.6%, bold 99.5%), so body text wraps the same before and
   after Geist loads (no layout shift) */
@font-face { font-family: "Geist Fallback"; font-weight: 400 500; src: local("Arial"), local("ArialMT"); size-adjust: 102.6%; ascent-override: 98%; descent-override: 28%; line-gap-override: 0%; }
@font-face { font-family: "Geist Fallback"; font-weight: 600 900; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 99.5%; ascent-override: 98%; descent-override: 28%; line-gap-override: 0%; }

:root {
    --night: #03110B;
    --night-2: #052117;
    --acid: #D6F23C;
    --lime: #C6F689;
    --lime-2: #ABE565;
    --lime-ink: #0B130D;
    --gold: #FFC23D;
    --coral: #FF8A6B;
    --ink: #0B1D12;
    --body-d: #D3E3D7;
    --muted: #9DB5A4;
    --dim: #7D9585;

    --cta: linear-gradient(90deg, #FF9A26 0%, #FF6A10 55%, #F83F00 100%);

    --f-display: "Bricolage Grotesque", "Geist", system-ui, sans-serif;
    --f-body: "Geist", "Geist Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
    --f-hand: "Caveat", cursive;
    --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
body {
    margin: 0;
    background: var(--night);
    color: var(--body-d);
    font-family: var(--f-body);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
b, strong { font-weight: 700; }
.ic { width: 1em; height: 1em; flex: none; }
.wrap { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
:focus-visible { outline: 3px solid var(--acid); outline-offset: 3px; }
html.fw .hero-h1 { visibility: hidden; }


/* ==========================================================
   BUTTONS
   ========================================================== */
/* the main CTA: orange pill + white arrow disc */
.btn-cta {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    width: 100%;
    height: 80px;
    padding: 0 12px 0 40px;
    border-radius: 999px;
    background: var(--cta);
    color: #fff;
    font-family: var(--f-display);
    font-size: 29px;
    font-weight: 800;
    letter-spacing: -.01em;
    text-decoration: none;
    white-space: nowrap;
    text-shadow: 0 1px 1px rgba(120, 30, 0, .35);
    box-shadow: 0 24px 46px -14px rgba(248, 63, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(110, 25, 0, .25);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    border: 2px solid rgba(255, 110, 20, .8);
    animation: cta-ring 2.2s ease-out infinite;
    pointer-events: none;
}
@keyframes cta-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.06, 1.45); opacity: 0; } }
.bb-shine { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.bb-shine::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 32%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: translateX(-180%) skewX(-20deg);
    animation: shine 3.8s ease-in-out 1s infinite;
}
@keyframes shine { 0% { transform: translateX(-180%) skewX(-20deg); } 45%, 100% { transform: translateX(420%) skewX(-20deg); } }
.cta-arrow { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #fff; color: #F2560A; box-shadow: 0 6px 14px -4px rgba(120, 30, 0, .45); transition: transform .25s var(--ease); }
.cta-arrow .ic { width: 26px; height: 26px; }
.btn-cta:hover { transform: translateY(-3px); box-shadow: 0 30px 54px -14px rgba(248, 63, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(110, 25, 0, .25); }
.btn-cta:hover .cta-arrow { transform: translateX(4px); }

.btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 20px;
    border-radius: 999px;
    background: var(--cta);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 12px 26px -12px rgba(248, 63, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .4);
    transition: transform .2s var(--ease);
}
.btn-sm .ic { width: 16px; height: 16px; }
.btn-sm:hover { transform: translateY(-2px); }


/* ==========================================================
   HERO
   ========================================================== */
.hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding-bottom: 170px;
    background:
        /* vignette: darker edges keep the eye in the middle */
        radial-gradient(ellipse 80% 70% at 50% 34%, rgba(1, 8, 5, 0) 55%, rgba(1, 8, 5, .5) 100%),
        linear-gradient(180deg, var(--night) 0, var(--night-2) 360px, #072A1D 900px, #06241A 1500px, #041A12 100%);
}
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-aura {
    position: absolute;
    left: 50%; top: -200px;
    width: 1500px; height: 900px;
    margin-left: -750px;
    background:
        radial-gradient(closest-side at 50% 55%, rgba(198, 246, 137, .16), transparent 70%),
        radial-gradient(closest-side at 20% 40%, rgba(79, 227, 193, .08), transparent),
        radial-gradient(closest-side at 80% 40%, rgba(243, 203, 85, .06), transparent);
}
.ghost-mark {
    position: absolute;
    width: var(--w);
    aspect-ratio: 1;
    border-radius: 30%;
    border: 1.5px solid rgba(198, 246, 137, .08);
    transform: rotate(var(--r, -8deg));
}
.ghost-mark::after { content: ""; position: absolute; inset: 26%; border-radius: 50%; border: 1.5px solid rgba(198, 246, 137, .08); }
.ghost-mark.gm1 { --w: 520px; --r: -12deg; left: -260px; top: 60px; }
.ghost-mark.gm2 { --w: 560px; --r: 10deg; right: -290px; top: 20px; }
/* 3D map floor */
.floor-wrap {
    position: absolute;
    left: 0; right: 0;
    top: 760px; bottom: 0;
    overflow: hidden;
    perspective: 1000px;
    perspective-origin: 50% 0;
    -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 76%, transparent);
            mask-image: linear-gradient(transparent, #000 14%, #000 76%, transparent);
}
.map-floor {
    position: absolute;
    left: 50%; top: 0;
    width: 2800px; height: 1750px;
    margin-left: -1400px;
    background: url(../images/map-floor.svg) center top / 100% 100% no-repeat;
    opacity: .17;
    transform-origin: 50% 0;
    transform: rotateX(60deg);
}
.horizon { position: absolute; left: 50%; top: 700px; width: 1800px; height: 320px; margin-left: -900px; background: radial-gradient(closest-side, rgba(198, 246, 137, .1), transparent); }
.hero-grain {
    position: absolute;
    inset: 0 0 auto;
    height: 1000px;
    z-index: -1;
    opacity: .08;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    -webkit-mask-image: linear-gradient(#000 40%, transparent);
            mask-image: linear-gradient(#000 40%, transparent);
    pointer-events: none;
}

/* nav (LME pattern) */
.nav { position: relative; z-index: 6; padding-top: 14px; }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.nav-logo { flex: none; }
.nav-logo img { width: auto; height: 42px; }
.nav-links { display: flex; align-items: center; }
.nav-links a { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-left: 38px; padding: 6px 0; color: #B6C9BC; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: color .2s; }
.nav-links a + a::before { content: ""; position: absolute; left: -19px; top: 50%; width: 1px; height: 14px; background: rgba(255, 255, 255, .16); transform: translateY(-50%); }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 11px; height: 1.5px; background: var(--acid); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after { transform: scaleX(1); }

.hero-wrap { position: relative; }

/* --- copy --- */
.hero-copy { position: relative; z-index: 3; padding-top: 18px; text-align: center; }
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 5px 18px 5px 5px;
    border-radius: 999px;
    background: rgba(13, 20, 15, .7);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
    color: var(--body-d);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
}
.eb-new { padding: 6px 13px; border-radius: 999px; background: linear-gradient(180deg, #EEFF8A, var(--acid)); color: var(--ink); font-size: 13.5px; font-weight: 800; }

/* the headline in a framed rectangle: gradient border, scanner corners,
   the "New" pill sitting on its top edge */
.h-box {
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin: 22px auto 0;
    padding: 34px 54px 30px;
    border-radius: 30px;
    border: 1.5px solid transparent;
    background: linear-gradient(180deg, rgba(16, 60, 41, .78), rgba(6, 26, 18, .82)) padding-box, linear-gradient(135deg, rgba(238, 255, 140, .85), rgba(79, 227, 193, .35) 35%, rgba(255, 255, 255, .05) 62%, rgba(255, 194, 61, .7)) border-box;
    box-shadow: 0 50px 90px -50px #000, 0 0 100px -34px rgba(214, 242, 60, .4), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.hb-c { position: absolute; width: 26px; height: 26px; border: 3px solid var(--acid); filter: drop-shadow(0 0 6px rgba(214, 242, 60, .5)); }
.hb-c.c1 { top: 12px; left: 12px; border-right: 0; border-bottom: 0; border-radius: 9px 0 0 0; }
.hb-c.c2 { top: 12px; right: 12px; border-left: 0; border-bottom: 0; border-radius: 0 9px 0 0; }
.hb-c.c3 { bottom: 12px; left: 12px; border-right: 0; border-top: 0; border-radius: 0 0 0 9px; }
.hb-c.c4 { bottom: 12px; right: 12px; border-left: 0; border-top: 0; border-radius: 0 0 9px 0; }
.h-box .eyebrow { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); white-space: nowrap; background: #0C2A1D; box-shadow: inset 0 0 0 1px rgba(214, 242, 60, .35), 0 10px 24px -10px #000; }
.hero-h1 {
    margin: 0 auto;
    font-family: var(--f-display);
    font-optical-sizing: auto;
    font-size: clamp(34px, 4.75vw, 78px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.035em;
    color: #fff;
}
.hero-h1 > span { display: block; }
.nw { white-space: nowrap; }
.hl-lime {
    background: linear-gradient(180deg, #F2FF9C 0%, var(--acid) 55%, #A9E13A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 26px rgba(214, 242, 60, .3));
}
/* the payoff: gold text with a hand-drawn brush stroke that sweeps in once
   the headline is shown */
.hl-gold {
    position: relative;
    display: inline-block;
    background: linear-gradient(180deg, #FFF1B8 0%, #FFD45C 40%, #F59E1B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 .45em rgba(255, 194, 61, .3));
}
.hl-gold::after {
    content: "";
    position: absolute;
    left: -3%; right: -4%; bottom: -.2em;
    height: .3em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 30' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23FFE38A'/%3E%3Cstop offset='.55' stop-color='%23FFC23D'/%3E%3Cstop offset='1' stop-color='%23FF8F1F'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M3 20C80 10 180 5 297 6c2 0 3 3 1 5-98 2-188 9-286 17-7 1-12-4-9-8z' fill='url(%23g)'/%3E%3Cpath d='M40 14c70-5 140-7 210-7' stroke='%23FFF6D6' stroke-opacity='.55' stroke-width='1.6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
html:not(.fw) .hl-gold::after { animation: brush .7s cubic-bezier(.3, .7, .2, 1) .45s both; }
@keyframes brush { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* the logo mark standing in for the o in "Local" (real hole via mask) */
.o-mark {
    display: inline-block;
    width: .54em; height: .58em;
    margin: 0 .02em 0 .03em;
    vertical-align: -.02em;
    border-radius: 30%;
    background: linear-gradient(160deg, #F2FF9C, var(--acid) 60%, #A9E13A);
    -webkit-mask: radial-gradient(circle, transparent .125em, #000 calc(.125em + .5px));
            mask: radial-gradient(circle, transparent .125em, #000 calc(.125em + .5px));
    transform: rotate(-9deg);
}
/* sub-headline: the three steps as one route, docked on the headline box's
   bottom edge (mirrors the "New" pill on its top edge). Solid tiles, dashed
   route between stops, the payoff stop in gold like "Get Paid". */
.steps {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    margin: -28px auto 0;
    padding: 9px 26px 9px 9px;
    list-style: none;
    border-radius: 999px;
    border: 1.5px solid transparent;
    background: linear-gradient(180deg, #10331F, #0A2318) padding-box, linear-gradient(90deg, rgba(214, 242, 60, .7), rgba(79, 227, 193, .3) 50%, rgba(255, 194, 61, .75)) border-box;
    box-shadow: 0 22px 44px -18px #000, 0 0 44px -16px rgba(214, 242, 60, .4);
    color: #fff;
    font-size: 18.5px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.2;
    white-space: nowrap;
}
.steps li { position: relative; display: flex; align-items: center; gap: 12px; }
.steps li + li::before {
    content: "";
    width: 50px; height: 14px;
    margin: 0 14px 0 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D6F23C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") right center / 13px 13px no-repeat, repeating-linear-gradient(90deg, rgba(214, 242, 60, .65) 0 6px, transparent 6px 11px) left center / calc(100% - 9px) 2px no-repeat;
}
.st-ic {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px; height: 36px;
    border-radius: 11px;
    background: linear-gradient(160deg, #F2FF9C, var(--acid) 60%, #A9E13A);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .16), 0 0 18px -4px rgba(214, 242, 60, .65);
    color: var(--ink);
}
.st-ic .ic { width: 19px; height: 19px; }
.steps li:last-child .st-ic { background: linear-gradient(160deg, #FFE9A0, #FFC23D 55%, #F59E1B); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .16), 0 0 18px -4px rgba(255, 194, 61, .7); color: #2B1A00; }
.h-box { padding-bottom: 52px; }
/* compact route below 1440 so it clears the corner brackets and the phone */
@media (max-width: 1439px) {
    .steps { margin-top: -26px; padding-right: 20px; font-size: 16.5px; }
    .steps li + li::before { width: 34px; margin: 0 10px 0 12px; }
    .st-ic { width: 32px; height: 32px; border-radius: 10px; }
    .st-ic .ic { width: 17px; height: 17px; }
}
/* below 1280 the box gets too narrow to dock the route between its corner
   brackets, so it sits under the box */
@media (max-width: 1279px) {
    .steps { margin-top: 22px; font-size: 16px; }
    .h-box { padding-bottom: 38px; }
}


/* ==========================================================
   VIDEO (JV: tilted lime plate, spotlight, pin drop)
   ========================================================== */
.stage { position: relative; z-index: 2; max-width: 820px; margin: 40px auto 0; padding: 0 24px; isolation: isolate; }
/* dark pool behind the video so the floor never competes with it */
.stage::after { content: ""; position: absolute; z-index: -2; left: -240px; right: -240px; top: -60px; bottom: 40px; background: radial-gradient(closest-side, rgba(4, 24, 16, .9) 55%, rgba(4, 24, 16, .5) 78%, transparent); pointer-events: none; }
.vid-spot { position: absolute; z-index: -1; left: -16%; right: -16%; top: -22%; bottom: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(198, 246, 137, .3), rgba(198, 246, 137, .08) 55%, transparent); pointer-events: none; }
.vsl-frame {
    position: relative;
    padding: 8px;
    border-radius: 26px;
    background: #0B1A12;
    box-shadow: 0 0 0 1px rgba(198, 246, 137, .45), 0 60px 140px -40px rgba(198, 246, 137, .4), 0 40px 80px -30px #000;
}
/* tilted lime plate = logo silhouette */
.vsl-frame::before { content: ""; position: absolute; inset: -14px; z-index: -1; border-radius: 38px; background: linear-gradient(140deg, #E2FCB6, var(--lime) 45%, var(--lime-2)); transform: rotate(-2.2deg); }
.vsl-player { position: relative; overflow: hidden; aspect-ratio: 1280 / 725; border-radius: 19px; background: #021008; }
.vsl-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }



/* ==========================================================
   OFFER CARD
   ========================================================== */
/* the copy's three checks as three cards above the offer, each with its own
   colour (lime, teal, gold) */
.perks { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 860px; margin: 60px auto 0; padding: 0; list-style: none; color: #fff; font-size: 16px; font-weight: 600; line-height: 1.3; }
.perks li {
    --c: #E4FA6E; --c2: #A9E13A; --cb: rgba(214, 242, 60, .3);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px 14px 14px;
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(21, 52, 36, .94), rgba(8, 27, 19, .94));
    box-shadow: inset 0 0 0 1px var(--cb), 0 26px 46px -26px #000;
    text-wrap: balance;
}
.perks li:nth-child(2) { --c: #8AF5DB; --c2: #2FC9A6; --cb: rgba(79, 227, 193, .3); }
.perks li:nth-child(3) { --c: #FFE38A; --c2: #F59E1B; --cb: rgba(255, 194, 61, .32); }
.pk-ic { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(160deg, var(--c), var(--c2)); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .16), 0 0 22px -6px var(--c2); color: #0B1D12; }
.pk-ic .ic { width: 22px; height: 22px; }
/* the light offer box (same as further down the page) on the dark fold */
.s7-cta.hero-cta { z-index: 3; margin-top: 64px; }
/* "Included" as a straight gold ribbon hanging from the box's top edge,
   folded over it on the left */
.hero-cta .hc-ribbon { top: -12px; right: 30px; padding: 14px 18px 14px 12px; border-radius: 0 0 16px 16px; transform: none; box-shadow: 0 18px 30px -16px rgba(120, 70, 0, .6), inset 0 -3px 0 rgba(120, 70, 0, .18), inset 0 12px 0 -1px rgba(120, 70, 0, .14); }
.hero-cta .hc-ribbon::before,
.hero-cta .hc-ribbon::after { content: ""; position: absolute; top: 0; width: 12px; height: 12px; background: #9C640A; }
.hero-cta .hc-ribbon::before { left: -12px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.hero-cta .hc-ribbon::after { right: -12px; clip-path: polygon(0 0, 100% 100%, 0 100%); }
/* one column (box art on top): back to the sticker the other boxes use */
@media (max-width: 899px) {
    .hero-cta .hc-ribbon { top: -24px; right: -10px; padding: 10px 18px 10px 10px; border-radius: 18px; transform: rotate(5deg) scale(.86); transform-origin: right top; box-shadow: 0 20px 40px -18px rgba(120, 70, 0, .6), 0 0 40px -14px rgba(243, 203, 85, .5); }
    .hero-cta .hc-ribbon::before, .hero-cta .hc-ribbon::after { display: none; }
}
@media (max-width: 559px) {
    .hero-cta .hc-ribbon { top: auto; bottom: -26px; right: -6px; transform: rotate(-4deg) scale(.82); transform-origin: right bottom; }
}
.bp-from { font-size: 19px; font-weight: 600; }
.bp-rest { padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .16); color: #FFE08A; font-size: 15px; font-weight: 700; line-height: 1.35; }
/* guarantee: gold seal + the promise, with secure checkout under it */
.guar { display: inline-flex; align-items: center; gap: 12px; text-align: left; }
.g-seal { flex: none; width: 76px; height: 76px; margin: -12px 0 -12px -6px; transform: rotate(-10deg); filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .45)) drop-shadow(0 0 14px rgba(255, 194, 61, .3)); }
.guar-txt { display: grid; gap: 4px; }
.guar-txt b { color: #fff; font-size: 15.5px; font-weight: 700; line-height: 1.2; }
.secure { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 14px; font-weight: 600; }
.secure .ic { width: 16px; height: 16px; color: var(--acid); }
.pay { display: flex; gap: 6px; }
.pay svg { width: 42px; height: auto; }
/* handwritten note pointing at the CTA (JV) */
.cta-note { display: none; }



/* ==========================================================
   EDGE PROPS (JV)
   ========================================================== */
.props-l, .props-r, .floor-pins { display: none; }
.prop { position: absolute; transform: rotate(var(--r, 0deg)); }

/* placed as on the JV page: --pa-t / --pa-w are the size and offset under the nav as
   seen on screen, so the props' own scale and lift (--ps / --py) are undone here */
.p-art { --r: 0deg; --pa-t: 92px; --pa-w: 210px; left: calc(10px / var(--ps, .85)); top: calc((var(--pa-t) - var(--py, -40px)) / var(--ps, .85)); width: calc(var(--pa-w) / var(--ps, .85)); }
.p-art img { width: 100%; height: auto; opacity: .42; filter: saturate(.8); -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 100%); mask-image: radial-gradient(closest-side, #000 45%, transparent 100%); }

/* the gold chip (JV prize chip) */
.p-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px 10px 10px;
    border-radius: 18px;
    background: linear-gradient(135deg, #F9DE80, #E8AF35);
    color: #2B1C00;
    box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .9), 0 0 50px -14px rgba(243, 203, 85, .5);
}
.p-chip > .ic { width: 42px; height: 42px; padding: 10px; border-radius: 30%; background: #2B1C00; color: #F6D36A; }
.p-chip small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.p-chip b { display: block; font-family: var(--f-display); font-size: 21px; font-weight: 800; line-height: 1.05; letter-spacing: -.01em; }

/* stage wings: the browser sits on a wall anchored to the right edge, turned
   toward the video, with a soft fade where it slides behind the stage; the
   phone floats free in the left gutter, slightly tilted and turned inward */
.wing { position: absolute; filter: brightness(.88) saturate(.85); }
.wing-l { left: 6px; top: 418px; width: 256px; transform: perspective(1500px) rotateY(14deg) rotateZ(-6deg); }
.wing-r { right: -46px; top: 438px; width: 620px; transform: perspective(1400px) rotateY(-30deg); transform-origin: 100% 50%; }
.wing::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -40px; height: 70px; border-radius: 50%; background: radial-gradient(closest-side, rgba(198, 246, 137, .28), transparent); z-index: -1; }
.wing-r > .mk-win { -webkit-mask-image: linear-gradient(270deg, #000 62%, rgba(0, 0, 0, .25) 100%); mask-image: linear-gradient(270deg, #000 62%, rgba(0, 0, 0, .25) 100%); }

/* callouts: an enlarged fragment of what is on that device's screen */
.callout {
    position: absolute;
    z-index: 2;
    padding: 14px 16px 15px;
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(22, 52, 36, .97), rgba(9, 26, 18, .97));
    box-shadow: inset 0 0 0 1px rgba(198, 246, 137, .32), 0 30px 60px -24px #000, 0 0 50px -18px rgba(198, 246, 137, .45);
    color: #EAF3EC;
}
/* connector: a short line + glowing node reaching into the device */
.callout::before { content: ""; position: absolute; width: 2px; height: 46px; background: linear-gradient(rgba(198, 246, 137, 0), rgba(198, 246, 137, .8)); }
.callout::after { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(198, 246, 137, .2), 0 0 16px rgba(198, 246, 137, .9); }
.co-label { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.co-label .ic { width: 14px; height: 14px; }
.co-dot { width: 8px; height: 8px; border-radius: 50%; background: #FF5D47; box-shadow: 0 0 0 3px rgba(255, 93, 71, .2); }

/* left: the scan result as a mini 5x5 grid + the number that matters */
.co-grid { left: -16px; top: 906px; width: 240px; padding-inline: 14px; }
.co-grid .co-body { gap: 10px; }
.co-grid .mini-grid { grid-template-columns: repeat(5, 13px); gap: 4px; padding: 8px; }
.co-grid .mini-grid i { width: 13px; height: 13px; }
.co-grid .co-stat span { font-size: 12.5px; }
/* here the connector stops just under the gold #17 pin on the phone map
   (pin centre measured at callout x 160 / y -114), never on top of it */
.co-grid::before { left: 161px; top: -94px; height: 94px; background: linear-gradient(rgba(198, 246, 137, .9), rgba(198, 246, 137, .3)); }
.co-grid::after { left: 159px; top: -97px; width: 6px; height: 6px; box-shadow: 0 0 8px rgba(198, 246, 137, .9); }
.co-body { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.mini-grid { display: grid; grid-template-columns: repeat(5, 14px); gap: 5px; flex: none; padding: 9px; border-radius: 12px; background: #0A1611; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.mini-grid i { width: 14px; height: 14px; border-radius: 50%; background: #2B3A31; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
.mini-grid .g-b { background: #151B17; box-shadow: inset 0 0 0 1.5px #fff; }
.mini-grid .g-y { background: #151B17; box-shadow: inset 0 0 0 2px #F2B33D, 0 0 10px rgba(242, 179, 61, .8); }
.co-stat { display: flex; flex-direction: column; line-height: 1.2; }
.co-stat b { font-family: var(--f-display); font-size: 40px; font-weight: 800; line-height: .95; letter-spacing: -.04em; color: #FF7B63; }
.co-stat b small { font-size: .5em; color: #C9D6CC; letter-spacing: -.01em; }
.co-stat span { margin-top: 4px; font-size: 13px; font-weight: 600; color: #DDE6D8; white-space: nowrap; }
.co-stat em { margin-top: 6px; font-style: normal; font-size: 12px; font-weight: 600; color: #F2B33D; }

/* right: the AI's next move, as it appears in the app */
.co-move { right: 0; top: 790px; width: 262px; }
.co-move::before { right: 40px; top: -46px; }
.co-move::after { right: 35px; top: -56px; }
.co-move p { margin: 7px 0 11px; font-size: 15.5px; font-weight: 600; line-height: 1.35; color: #fff; }
.co-btn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(198, 246, 137, .5); color: var(--lime); font-size: 13px; font-weight: 700; }
.co-btn .ic { width: 14px; height: 14px; }

/* the devices */
.mk-phone { position: relative; }
.ph-body { position: relative; z-index: 1; padding: 8px; border-radius: 44px; background: linear-gradient(150deg, #6B7A6E 0%, #2A332C 22%, #0E130F 62%, #33403A 100%); box-shadow: inset 0 0 0 1px rgba(198, 246, 137, .35), inset 0 0 0 3px #070A08, 0 60px 80px -30px rgba(0, 0, 0, .85), 0 0 70px -20px rgba(198, 246, 137, .4); }
.ph-island { position: absolute; left: 50%; top: 15px; z-index: 3; width: 74px; height: 20px; margin-left: -37px; border-radius: 10px; background: #000; }
.ph-screen { position: relative; overflow: hidden; padding-top: 32px; border-radius: 36px; background: #0E100F; }
.ph-status { position: absolute; left: 0; right: 0; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 22px 0 30px; color: #fff; }
.ph-status b { font-size: 11px; font-weight: 700; letter-spacing: .01em; }
.ph-sys { display: flex; align-items: center; gap: 4px; }
.ph-sys svg { width: 13px; height: 9px; fill: #fff; }
.ph-bat { position: relative; width: 19px; height: 9px; margin-left: 1px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.ph-bat::before { content: ""; position: absolute; left: 2px; top: 2px; bottom: 2px; width: 11px; border-radius: 1.5px; background: #fff; }
.ph-bat::after { content: ""; position: absolute; right: -3px; top: 3px; width: 1.5px; height: 3px; border-radius: 0 1px 1px 0; background: rgba(255, 255, 255, .5); }
.ph-screen img { width: 100%; height: auto; }
.ph-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(125deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .03) 30%, transparent 45%); pointer-events: none; }
.ph-btn { position: absolute; z-index: 0; width: 4px; border-radius: 3px; background: linear-gradient(90deg, #4A574D, #1A221C); }
.ph-btn.b1 { left: -2px; top: 110px; height: 36px; }
.ph-btn.b2 { left: -2px; top: 160px; height: 60px; }
.ph-btn.b3 { right: -2px; top: 140px; height: 80px; }
.mk-win { overflow: hidden; border-radius: 16px; background: #0B0F0C; box-shadow: 0 0 0 1px rgba(198, 246, 137, .28), 0 60px 90px -30px #000, 0 0 70px -20px rgba(198, 246, 137, .35); }
.mw-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: #161C18; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.mw-bar i { width: 10px; height: 10px; border-radius: 50%; background: #FF6159; }
.mw-bar i:nth-child(2) { background: #FFBE2F; }
.mw-bar i:nth-child(3) { background: #2ACA44; }
.mw-bar span { flex: 1; margin: 0 90px 0 10px; padding: 4px 10px; border-radius: 7px; background: #232A25; color: #9DB5A4; font-size: 12px; font-weight: 600; text-align: center; }
.mk-win img { width: 100%; height: auto; }

/* standing rank pins on the floor (JV) */
.fp {
    --c: var(--lime);
    position: absolute;
    left: var(--x); top: var(--y);
    width: 36px; height: 36px;
    display: grid;
    place-items: center;
    border-radius: 30%;
    background: radial-gradient(circle, var(--lime-ink) 0 10.5px, transparent 11.1px), var(--c);
    font-family: var(--f-display);
    font-size: 13px;
    font-weight: 800;
    color: var(--c);
    transform: translate(-50%, -100%) scale(var(--s, 1));
    box-shadow: 0 0 16px -6px var(--c);
}
.fp::before { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 22px; margin-left: -1px; background: linear-gradient(var(--c), transparent); }
.fp::after { content: ""; position: absolute; left: 50%; top: calc(100% + 18px); width: 34px; height: 10px; margin-left: -17px; border-radius: 50%; background: radial-gradient(closest-side, var(--c), transparent); opacity: .5; }
.fp.r3 { --c: #82D660; }
.fp.r4 { --c: #EDE36B; }
.fp.r5 { --c: #F2C553; }
.fp.r-out { --c: #93A79A; font-size: 9.5px; letter-spacing: -.03em; }


/* ==========================================================
   SECTION 2 — THE SCAN PICTURE (light)
   The light sheet rises over the dark hero as a wide dome with a
   lime rim and a badge on its crest. The scan sits on a tilted lime
   plate (the fold-1 video motif) with the 3D pin beside it; its four
   colours are explained around it and light up in turn.
   ========================================================== */
.sec-scan {
    position: relative;
    isolation: isolate;
    margin-top: -84px;
    padding: 100px 0 100px;
    border-radius: 50% 50% 0 0 / 84px 84px 0 0;
    background: linear-gradient(180deg, #F7FBF3 0, #EFF6EA 55%, #E8F1E2 100%);
    color: #3E5446;
}
.sec-scan::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%; border-radius: inherit; box-shadow: 0 -2px 0 rgba(214, 242, 60, .85), 0 -40px 70px -30px rgba(198, 246, 137, .55); pointer-events: none; }
.s2-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
/* a real aerial town behind the scan card (washed light, fading out before the copy) */
.s2-photo { position: absolute; inset: 0; background: url(../images/bg-scan-aerial-town.webp) 50% 40% / cover; opacity: .42; -webkit-mask-image: radial-gradient(1000px 700px at 72% 54%, #000 25%, transparent 72%); mask-image: radial-gradient(1000px 700px at 72% 54%, #000 25%, transparent 72%); }
@media (max-width: 899px) { .s2-photo { opacity: .32; -webkit-mask-image: linear-gradient(transparent 32%, #000 55%, #000 88%, transparent); mask-image: linear-gradient(transparent 32%, #000 55%, #000 88%, transparent); } }
.s2-glow { position: absolute; inset: 0; background: radial-gradient(560px 420px at 50% 62%, rgba(198, 246, 137, .55), rgba(198, 246, 137, .12) 60%, transparent 75%), radial-gradient(420px 360px at 12% 70%, rgba(79, 227, 193, .2), transparent 70%), radial-gradient(420px 360px at 88% 45%, rgba(255, 194, 61, .18), transparent 70%); }
/* bouncing arrow on the dome crest, between the dark fold and the light one */
.s2-down { position: absolute; left: 50%; top: 0; z-index: 2; display: grid; place-items: center; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: linear-gradient(180deg, #EEFF8A, var(--acid)); box-shadow: 0 0 0 7px rgba(214, 242, 60, .18), 0 14px 30px -8px rgba(214, 242, 60, .7); color: var(--ink); animation: s2-bounce 1.8s var(--ease) infinite; }
.s2-down .ic { width: 24px; height: 24px; }
.s2-down:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
@keyframes s2-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(9px); } }
/* left: the big claim + the scan's four colours, counted; right: the scan */
.s2-grid { display: grid; grid-template-columns: minmax(0, 1fr) 540px; gap: 84px; align-items: center; max-width: 1240px; }
.s2-title { margin: 0; font-family: var(--f-display); font-size: clamp(44px, 5.2vw, 84px); font-weight: 800; line-height: .98; letter-spacing: -.045em; color: #0B1D12; }
.s2-title .mk { padding: 0 .06em; background: linear-gradient(transparent 58%, rgba(198, 246, 137, .95) 58%, rgba(198, 246, 137, .95) 90%, transparent 90%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.s2-sub { max-width: 29em; margin: 24px 0 0; font-size: 19.5px; line-height: 1.55; }
/* the verdict bar: one segment per colour, as wide as its count (JS); lights with its card */
.s2-bar { display: flex; gap: 4px; max-width: 560px; height: 20px; margin: 30px 0 0; padding: 4px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 29, 18, .07), 0 12px 26px -16px rgba(11, 29, 18, .45); }
.s2-bar i { --tc: #22A34A; flex: 1 1 0; min-width: 8px; border-radius: 999px; background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 70%, #fff), var(--tc)); transition: opacity .3s, filter .3s, flex-grow .6s var(--ease); }
.s2-bar i[data-t="a"] { --tc: #F0A42A; }
.s2-bar i[data-t="r"] { --tc: #E5534B; }
.s2-bar i[data-t="d"] { --tc: #AEB8AA; }
.s2-bar[data-hl] i { opacity: .22; filter: saturate(.3); }
.s2-bar[data-hl="g"] i[data-t="g"], .s2-bar[data-hl="a"] i[data-t="a"], .s2-bar[data-hl="r"] i[data-t="r"], .s2-bar[data-hl="d"] i[data-t="d"] { opacity: 1; filter: none; }
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 560px; margin: 14px 0 0; padding: 0; list-style: none; }
.tier {
    --tc: #22A34A; --tc-ink: #157A36;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px 14px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 0 0 1px rgba(11, 29, 18, .07), 0 22px 44px -26px rgba(11, 29, 18, .45);
    cursor: pointer;
    transition: transform .25s var(--ease), box-shadow .25s;
}
.tier[data-t="a"] { --tc: #F0A42A; --tc-ink: #B26B00; }
.tier[data-t="r"] { --tc: #E5534B; --tc-ink: #C23A33; }
.tier[data-t="d"] { --tc: #AEB8AA; --tc-ink: #5E6E62; }
.tier:hover, .tier.on { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--tc), 0 26px 50px -24px rgba(11, 29, 18, .5); }
/* the pain point leads: the buried card is tinted red with a bigger number */
.tier[data-t="r"] { background: linear-gradient(160deg, #FFF4F2, #FFE2DE); box-shadow: 0 0 0 1.5px rgba(229, 83, 75, .5), 0 22px 44px -22px rgba(194, 58, 51, .5); }
.tier[data-t="r"]:hover, .tier[data-t="r"].on { box-shadow: 0 0 0 2.5px var(--tc), 0 26px 50px -22px rgba(194, 58, 51, .55); }
.tier[data-t="r"] .t-ball { width: 48px; height: 48px; }
.tier[data-t="r"] .t-txt b { font-size: 36px; }
.tier:focus { outline: none; }
.tier:focus-visible { box-shadow: 0 0 0 3px #0B1D12; }
.t-ball { flex: none; width: 42px; height: 42px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--tc) 60%, #fff), var(--tc) 62%); box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .15), 0 8px 16px -8px var(--tc); }
.t-txt { display: grid; line-height: 1.2; }
.t-txt b { font-family: var(--f-display); font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--tc-ink); }
.t-txt b small { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; color: #5B6F60; }
.t-txt strong { margin-top: 5px; font-size: 15.5px; color: #0B1D12; }
.t-txt em { margin-top: 1px; font-size: 13px; font-style: normal; color: #5B6F60; }
/* the punch line on a dark panel (the section's one dark moment): a crossed-out report
   turning into a picture, the claim in white, the payoff in lime */
.s2-note { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 16px; max-width: 560px; margin: 22px 0 0; padding: 14px 22px 14px 14px; border-radius: 20px; background: radial-gradient(260px 120px at 100% 0, rgba(198, 246, 137, .22), transparent 70%), linear-gradient(150deg, #123B27, #0B1D12 70%); box-shadow: inset 0 0 0 1.5px rgba(198, 246, 137, .45), 0 0 0 5px rgba(198, 246, 137, .18), 0 24px 44px -20px rgba(11, 29, 18, .7); font-size: 17px; line-height: 1.45; color: #D3E3D7; }
.s2-note b { color: #fff; }
.s2-note .hl { color: #C6F689; font-weight: 600; }
.s2-vs { display: flex; align-items: center; gap: 6px; flex: none; padding: 7px 9px; border-radius: 15px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.vs-doc, .vs-pic { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; }
.vs-doc { background: rgba(255, 255, 255, .08); color: #8FA596; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16); }
.vs-doc::after { content: ""; position: absolute; left: 5px; right: 5px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: #FF6B5E; box-shadow: 0 0 0 1.5px #0F2A1B; transform: rotate(-42deg); }
.vs-pic { background: linear-gradient(160deg, #F2FF9C, #C6F689 60%, #ABE565); color: #0B1D12; box-shadow: 0 0 22px -4px rgba(198, 246, 137, .8); transform: rotate(-6deg); }
.vs-doc .ic, .vs-pic .ic { width: 20px; height: 20px; }
.vs-arr { width: 16px; height: 16px; color: #C6F689; }

/* the scan card on its tilted lime plate */
.scan-map { position: relative; }
.sm-wrap { position: relative; isolation: isolate; }
.sm-wrap::before { content: ""; position: absolute; inset: -18px; z-index: -1; border-radius: 38px; background: linear-gradient(140deg, #EEFF9A 0%, #C6F689 45%, #9BE15A 100%); box-shadow: 0 50px 80px -40px rgba(54, 110, 20, .55); transform: rotate(-3.5deg); }
.s2-card { position: relative; padding: 52px 22px 42px; border-radius: 28px; background: url(../images/map-light.svg) center / cover, #EEF2EA; box-shadow: inset 0 0 0 1px rgba(11, 29, 18, .08), 0 30px 60px -36px rgba(11, 29, 18, .5); }
.sm-tag { position: absolute; left: 18px; top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 9px; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 3px 10px -5px rgba(11, 29, 18, .35); font-size: 12.5px; font-weight: 700; color: #0B1D12; }
.sm-tag i { width: 8px; height: 8px; border-radius: 50%; background: #22A34A; box-shadow: 0 0 0 3px rgba(34, 163, 74, .2); }
/* wider gaps = smaller dots, so the street map shows between them */
.sm-grid { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(7, 1fr); gap: 20px; }
/* two dashed radius rings around the business (the app's scan circle) */
.s2-rings, .s2-rings::before { position: absolute; left: 50%; top: 50%; z-index: -1; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.s2-rings { width: 47%; border: 2px dashed rgba(30, 154, 69, .55); background: radial-gradient(closest-side, rgba(34, 163, 74, .2), rgba(34, 163, 74, 0)); }
.s2-rings::before { content: ""; width: 162%; border: 2px dashed rgba(30, 154, 69, .35); }
.sd {
    --c: #C3CCC0;
    position: relative;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 62%, #fff), var(--c) 62%);
    box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .16), 0 6px 12px -6px rgba(11, 29, 18, .5);
    font-family: var(--f-display);
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    transform: scale(0);
    transition: transform .4s cubic-bezier(.3, 1.5, .5, 1), box-shadow .25s, opacity .3s, filter .3s;
}
.sd.on { transform: scale(1); }
.sd.on:hover { transform: scale(1.12); }
.sd.g { --c: #22A34A; }
.sd.a { --c: #F0A42A; color: #3A2200; }
.sd.r { --c: #E5534B; }
.sd.d { color: #5B6B5F; }
.sd.me { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #22A34A, 0 0 26px rgba(34, 163, 74, .7); }
/* the shop badge on the business's dot */
.sd-pin { position: absolute; right: -11px; top: -11px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 30%; background: #0B1D12; color: #C6F689; box-shadow: 0 0 0 2.5px #fff, 0 6px 12px -4px rgba(11, 29, 18, .6); transform: rotate(-8deg); }
.sd-pin .ic { width: 16px; height: 16px; transform: rotate(8deg); }
.sd.sel { box-shadow: 0 0 0 3px #0B1D12, 0 0 18px rgba(11, 29, 18, .3); }
.sd:focus { outline: none; }
.sd:focus-visible { box-shadow: 0 0 0 3px #0B1D12; }
/* one colour group lit, the rest dimmed */
.sm-grid[data-hl] .sd { opacity: .18; filter: saturate(.3); }
.sm-grid[data-hl="g"] .sd.g, .sm-grid[data-hl="a"] .sd.a, .sm-grid[data-hl="r"] .sd.r, .sm-grid[data-hl="d"] .sd.d { opacity: 1; filter: none; }
.sm-tip { display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; margin: 34px auto 0; padding: 10px 20px 10px 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #D5E0CF, 0 10px 24px -16px rgba(11, 29, 18, .35); color: #0B1D12; font-size: 15px; font-weight: 600; text-align: center; }
.sm-tip > .ic { flex: none; width: 22px; height: 22px; padding: 4px; box-sizing: content-box; border-radius: 50%; background: #E8F7DA; color: #1E9A45; }
.sm-note { position: absolute; right: 16px; bottom: 11px; margin: 0; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .9); box-shadow: inset 0 0 0 1px #D5E0CF; color: #6B7F70; font-size: 11.5px; }


/* ==========================================================
   SECTION 3 — THE REAL APP (light)
   One big browser window: the three app screens are its tabs (map, plan,
   websites), each with its own colour that also tints the tilted plate
   behind the window. Auto-plays while in view until a tab is picked. Lime
   wash at the top fading to white, soft colour glows (no grid behind copy).
   ========================================================== */
.sec-app { position: relative; isolation: isolate; padding: 70px 0 170px; background: linear-gradient(180deg, #DDF6AE 0, #EEFAD9 220px, #FBFDF8 520px, #FBFDF8 100%); }
.s3-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(transparent, #000 180px); mask-image: linear-gradient(transparent, #000 180px); background: radial-gradient(640px 460px at 10% 60%, rgba(59, 130, 246, .13), transparent 70%), radial-gradient(640px 460px at 90% 56%, rgba(139, 85, 238, .12), transparent 70%), radial-gradient(1000px 560px at 50% 68%, rgba(198, 246, 137, .38), transparent 70%); }
.sec-app .wrap { max-width: 1460px; }
.s3-head { position: relative; text-align: center; }
/* the label: a small dark chip with a recording dot (not a button) */
.s3-kick { display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px 7px 12px; border-radius: 999px; background: #0B1D12; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 10px 22px -12px rgba(11, 29, 18, .7); }
.s3-kick i { width: 9px; height: 9px; border-radius: 50%; background: #FF4D3D; box-shadow: 0 0 0 3px rgba(255, 77, 61, .28); animation: s3-rec 1.6s ease-in-out infinite; }
@keyframes s3-rec { 50% { opacity: .35; } }
.s3-title { margin: 20px 0 0; font-family: var(--f-display); font-size: clamp(38px, 5vw, 76px); font-weight: 800; line-height: 1.04; letter-spacing: -.045em; color: #0B1D12; }
.s3-sub { margin: 16px 0 0; font-size: 18px; color: #4D6354; }

/* the showcase; --c / --c2 follow the active tab */
.s3-show { --c: #3FA34D; --c2: #C6F689; position: relative; max-width: 1000px; margin: 58px auto 0; }
/* scan rings radiating from the window, in the active colour; faded at the top
   so no line runs behind the header copy */
.s3-rings { position: absolute; left: 50%; top: 50%; z-index: -2; width: 1700px; aspect-ratio: 1; margin: -850px 0 0 -850px; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 88px, color-mix(in srgb, var(--c) 42%, transparent) 88px 90px), radial-gradient(closest-side, color-mix(in srgb, var(--c2) 45%, transparent), transparent 70%); -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 78%), linear-gradient(transparent 520px, #000 700px); -webkit-mask-composite: source-in; mask-image: radial-gradient(closest-side, #000 30%, transparent 78%), linear-gradient(transparent 520px, #000 700px); mask-composite: intersect; pointer-events: none; transition: opacity .6s; }
.s3-show[data-on="2"] { --c: #3B82F6; --c2: #A9CBFF; }
.s3-show[data-on="3"] { --c: #8B55EE; --c2: #CDB4FF; }
.s3-show::before { content: ""; position: absolute; inset: 34px -20px -20px; z-index: -1; border-radius: 36px; background-color: var(--c2); background-image: linear-gradient(140deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 55%); transform: rotate(-1.6deg); box-shadow: 0 70px 110px -60px var(--c); transition: background-color .6s var(--ease), box-shadow .6s var(--ease); }
.s3-win { position: relative; border-radius: 22px; box-shadow: 0 0 0 1.5px rgba(11, 29, 18, .12), 0 50px 90px -40px rgba(11, 29, 18, .6); }

/* browser chrome: traffic lights + the three screens as raised buttons, then the address bar */
.s3-bar { display: flex; align-items: center; gap: 16px; padding: 12px 14px 12px 20px; border-radius: 22px 22px 0 0; background: #E3E9E0; }
.s3-dots { display: flex; gap: 8px; }
.s3-dots i { width: 12px; height: 12px; border-radius: 50%; background: #FF6159; }
.s3-dots i:nth-child(2) { background: #FFBE2F; }
.s3-dots i:nth-child(3) { background: #2ACA44; }
.s3-tabs { display: flex; gap: 8px; flex: 1; min-width: 0; }
.s3-tab { --tc: #3FA34D; position: relative; display: flex; align-items: center; gap: 11px; flex: 1 1 0; min-width: 0; height: 52px; padding: 0 14px 0 8px; overflow: hidden; border: 0; border-radius: 15px; background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(11, 29, 18, .1), 0 1px 0 rgba(255, 255, 255, .8), 0 8px 16px -12px rgba(11, 29, 18, .6); color: #3E5446; font: inherit; font-size: 16px; font-weight: 700; text-align: left; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s, background-color .2s, color .2s; }
.s3-tab:nth-child(2) { --tc: #3B82F6; }
.s3-tab:nth-child(3) { --tc: #8B55EE; }
/* idle tabs end in a small arrow button: "open this one" */
.s3-tab::after { content: ""; flex: none; width: 26px; height: 26px; margin-left: auto; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233E5446' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: inset 0 0 0 1px rgba(11, 29, 18, .12); transition: transform .2s var(--ease); }
.s3-tab:hover { background: #fff; color: #0B1D12; transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tc) 60%, transparent), 0 14px 24px -12px rgba(11, 29, 18, .55); }
.s3-tab:hover::after { transform: translateX(2px); }
.s3-tab.on { background: #fff; color: #0B1D12; transform: none; box-shadow: inset 0 0 0 2px var(--tc), 0 14px 26px -12px color-mix(in srgb, var(--tc) 75%, transparent); }
.s3-tab.on::after { display: none; }
.s3-tab:focus-visible { outline: 3px solid var(--tc); outline-offset: 2px; }
.s3-n { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: color-mix(in srgb, var(--tc) 14%, #fff); color: var(--tc); transition: background-color .25s, color .25s; }
.s3-n .ic { width: 19px; height: 19px; }
.s3-tab.on .s3-n { background: var(--tc); color: #fff; box-shadow: 0 6px 14px -6px var(--tc); }
.s3-tab b { overflow: hidden; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
/* progress line: fills while the tab plays */
.s3-prog { position: absolute; left: 14px; right: 14px; bottom: 5px; height: 3px; border-radius: 3px; background: var(--tc); transform: scaleX(0); transform-origin: left; }
.s3-tab.on .s3-prog { transform: scaleX(1); }
.s3-show.auto .s3-tab.on .s3-prog { animation: s3-prog 5.5s linear both; }
@keyframes s3-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.s3-url { display: flex; align-items: center; gap: 12px; padding: 10px 14px 12px; background: #F5F8F3; border-bottom: 1px solid rgba(11, 29, 18, .08); }
.s3-addr { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; height: 36px; padding: 0 16px; border-radius: 11px; background: #fff; box-shadow: inset 0 0 0 1px rgba(11, 29, 18, .09); color: #4D6354; font-size: 14.5px; font-weight: 600; }
.s3-addr .ic { width: 14px; height: 14px; color: #1E9A45; }
.s3-exp { display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 11px; background: #fff; box-shadow: inset 0 0 0 1px rgba(11, 29, 18, .09); color: #0B1D12; cursor: zoom-in; transition: background-color .2s; }
.s3-exp:hover { background: #EEF9DC; }
.s3-exp .ic { width: 17px; height: 17px; }

/* the screens: stacked in one cell, the active one fades in */
.s3-screens { display: grid; border-radius: 0 0 22px 22px; background: #0E1511; }
.s3-pane { position: relative; grid-area: 1 / 1; display: flex; flex-direction: column; margin: 0; }
.s3-shot { position: relative; }
html.js .s3-pane { opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s .5s; }
html.js .s3-pane.on { opacity: 1; visibility: visible; transition: opacity .5s var(--ease); }
.s3-media { display: block; width: 100%; padding: 0; border: 0; background: #0E1511; cursor: zoom-in; }
.s3-media img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; }
.s3-media:focus-visible { outline: 3px solid var(--tc); outline-offset: -3px; }
.s3-pane figcaption { display: flex; align-items: center; gap: 14px; flex: 1; padding: 18px 26px 20px; border-radius: 0 0 22px 22px; background: #fff; box-shadow: inset 0 3px 0 var(--tc); }
.s3-pane figcaption b { flex: none; font-family: var(--f-display); font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: -.025em; color: #0B1D12; }
.s3-pane figcaption span { font-size: 17px; line-height: 1.55; color: #2C3D32; }
/* the screen's labels: dark callouts hanging off the window edges, an icon tile
   in the screen's colour and a short connector + node pointing into the screen */
.s3-tag { position: absolute; top: var(--y); z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border-radius: 15px; background: linear-gradient(160deg, #1A3D2A, #0B1D12 75%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 0 0 1.5px color-mix(in srgb, var(--tc) 55%, transparent), 0 22px 40px -14px rgba(0, 0, 0, .65), 0 0 36px -12px var(--tc); color: #fff; font-size: 15px; font-weight: 700; white-space: nowrap; }
.s3-ti { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(160deg, color-mix(in srgb, var(--tc) 60%, #fff), var(--tc)); color: #fff; box-shadow: 0 6px 14px -6px var(--tc); }
.s3-ti .ic { width: 17px; height: 17px; }
.s3-tag::before { content: ""; position: absolute; top: 50%; width: 34px; height: 2px; margin-top: -1px; }
.s3-tag::after { content: ""; position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--tc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tc) 30%, transparent), 0 0 14px var(--tc); }
.s3-tag.tg-l { left: -46px; }
.s3-tag.tg-l::before { left: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 50%, transparent), var(--tc)); }
.s3-tag.tg-l::after { left: calc(100% + 32px); }
.s3-tag.tg-r { right: -46px; }
.s3-tag.tg-r::before { right: 100%; background: linear-gradient(270deg, color-mix(in srgb, var(--tc) 50%, transparent), var(--tc)); }
.s3-tag.tg-r::after { right: calc(100% + 32px); }
/* corner art (wide screens only): this section's own 3D objects, one each side,
   overlapping the window's bottom corners */
.s3-art { display: none; }
@media (min-width: 1440px) {
    .s3-art { display: block; position: absolute; z-index: 4; bottom: -64px; height: auto; pointer-events: none; filter: drop-shadow(0 30px 30px rgba(11, 29, 18, .3)); animation: s3-bob 7s ease-in-out infinite; }
    .s3-art-l { left: max(-195px, calc(10px - (100vw - 1000px) / 2)); width: 230px; transform: rotate(-6deg); }
    .s3-art-r { right: max(-225px, calc(10px - (100vw - 1000px) / 2)); width: 275px; transform: rotate(5deg); animation-delay: -3.5s; }
}
@media (min-width: 1440px) and (max-width: 1599px) {
    .s3-art-l { width: 196px; }
    .s3-art-r { width: 236px; }
}
/* header side widgets (wide screens): a clip being recorded (left) and the three
   screens as connected steps that follow the active tab (right) */
.s3-fl { display: none; }
@media (min-width: 1440px) {
    .s3-fl { display: block; position: absolute; pointer-events: none; animation: s3-bob 8s ease-in-out infinite; }
    .s3-fl-l { left: calc(50% - 712px); top: 26px; width: 196px; height: 128px; border-radius: 20px; background: radial-gradient(130px 90px at 28% 24%, rgba(198, 246, 137, .26), transparent 70%), linear-gradient(160deg, #18402B, #0B1D12 75%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 26px 44px -18px rgba(11, 29, 18, .55); transform: rotate(-8deg); }
    .fl-rec { position: absolute; left: 15px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: #FF4D3D; box-shadow: 0 0 0 4px rgba(255, 77, 61, .25); animation: s3-rec 1.6s ease-in-out infinite; }
    .fl-play { position: absolute; left: 50%; top: 45%; display: grid; place-items: center; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 32%; background: var(--lime); color: var(--lime-ink); box-shadow: 0 0 0 7px rgba(198, 246, 137, .18), 0 10px 20px -8px rgba(0, 0, 0, .6); transform: rotate(-8deg); }
    .fl-play .ic { width: 20px; height: 20px; margin-left: 3px; fill: currentColor; transform: rotate(8deg); }
    .fl-bar { position: absolute; left: 15px; right: 15px; bottom: 16px; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .16); }
    .fl-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 62%; border-radius: inherit; background: var(--lime); animation: s3-fill 7s linear infinite; }
    .fl-bar i::after { content: ""; position: absolute; right: -6px; top: -3.5px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
    .s3-fl-r { right: calc(50% - 712px); top: 104px; display: flex; align-items: center; gap: 24px; padding: 14px 18px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 29, 18, .07), 0 26px 44px -20px rgba(11, 29, 18, .45); transform: rotate(6deg); animation-delay: -4s; }
    .s3-fl-r::before { content: ""; position: absolute; left: 42px; right: 42px; top: 50%; border-top: 2px dashed #CFD9CA; }
    .fl-step { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(160deg, color-mix(in srgb, var(--tc) 55%, #fff), var(--tc)); color: #fff; box-shadow: 0 8px 16px -8px var(--tc); opacity: .55; transition: transform .4s var(--ease), opacity .4s, box-shadow .4s; }
    .fl-step .ic { width: 21px; height: 21px; }
    .sec-app[data-on="1"] .fl-step:nth-child(1), .sec-app[data-on="2"] .fl-step:nth-child(2), .sec-app[data-on="3"] .fl-step:nth-child(3) { opacity: 1; transform: translateY(-4px) scale(1.12); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tc) 22%, transparent), 0 12px 22px -8px var(--tc); }
}
@keyframes s3-fill { from { width: 8%; } to { width: 96%; } }
/* 1440–1599: the headline reaches further out, so the widgets come in a little
   and the steps card sits beside the sub-line */
@media (min-width: 1440px) and (max-width: 1599px) {
    .s3-fl-l { left: calc(50% - 684px); width: 176px; height: 116px; }
    .s3-fl-r { right: calc(50% - 690px); top: 196px; gap: 18px; padding: 12px 15px; }
    .fl-step { width: 40px; height: 40px; border-radius: 12px; }
}
@keyframes s3-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
html.js .s3-pane .s3-tag { opacity: 0; transition: opacity .4s var(--ease), translate .5s var(--ease); }
html.js .s3-pane .s3-tag.tg-l { translate: -14px 0; }
html.js .s3-pane .s3-tag.tg-r { translate: 14px 0; }
html.js .s3-pane.on .s3-tag { opacity: 1; translate: 0 0; transition-delay: .25s; }
@media (max-width: 1299px) {
    .s3-tag.tg-l { left: 14px; }
    .s3-tag.tg-r { right: 14px; }
}
@media (max-width: 767px) {
    .s3-show { margin-top: 36px; }
    .s3-show::before { inset: 20px -8px -10px; border-radius: 26px; }
    .s3-win, .s3-bar { border-radius: 16px 16px 0 0; }
    .s3-win { border-radius: 16px; }
    .s3-bar { gap: 0; }
    .s3-dots { display: none; }
    .s3-tabs { gap: 5px; }
    .s3-tab { gap: 6px; height: 42px; padding: 0 6px; border-radius: 11px; font-size: 13px; justify-content: center; }
    .s3-n { display: none; }
    .s3-prog { left: 8px; right: 8px; bottom: 4px; height: 2.5px; }
    .s3-url { gap: 8px; padding: 8px 8px 9px; }
    .s3-addr { height: 30px; padding: 0 10px; font-size: 12.5px; }
    .s3-exp { width: 30px; height: 30px; }
    .s3-screens, .s3-pane figcaption { border-radius: 0 0 16px 16px; }
    .s3-pane figcaption { display: block; padding: 14px 16px 16px; }
    .s3-pane figcaption b { display: block; font-size: 20px; }
    .s3-pane figcaption span { display: block; margin-top: 4px; font-size: 15px; }
    .s3-tag { gap: 6px; padding: 4px 9px 4px 4px; border-radius: 9px; font-size: 11.5px; }
    .s3-ti { width: 20px; height: 20px; border-radius: 6px; }
    .s3-ti .ic { width: 11px; height: 11px; }
    .s3-tag::before, .s3-tag::after { display: none; }
    .s3-tab::after { display: none; }
    .s3-bar { padding: 8px; }
    .s3-tag.tg-l { left: 8px; }
    .s3-tag.tg-r { right: 8px; }
}

/* ==========================================================
   SECTION 4 — PRICING (dark, lively)
   A night-emerald wave rises out of the light section with a lime
   seam badge. Behind the cards: tier-coloured aura, the hero's 3D map
   floor and a few standing rank pins. Each card carries its own product
   box standing on a glowing pedestal; Platinum is raised with a
   light sweeping round its border.
   ========================================================== */
@property --pr-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.sec-price { position: relative; isolation: isolate; padding: 52px 0 130px; background: linear-gradient(180deg, #04170F 0, #04170F 80px, #062418 520px, #052117 70%, #03110B 100%); color: var(--body-d); }
/* ==========================================================
   SEAMS (every section join): a straight edge with 45° cut corners and a
   centre tab where the section above dips in (painted in --above), HUD rails
   along the edge and a triple chevron over the tab.
   .seam       light above, dark below: lime/mint glowing rails
   .seam-lt    dark above, light below: green/teal rails, lime chevron
   .seam-ll    light above, light below: soft rails
   .seam-min   chevron only (domes, the inset panel)
   ========================================================== */
.seam { --above: #FBFDF8; --cut: 46px; --r1: #D6F23C; --r2: #5EEAD4; --chev: #3FA34D; --glow1: rgba(214, 242, 60, .7); --glow2: rgba(94, 234, 212, .7); position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 60px; pointer-events: none; }
.seam-lt { --r1: #3FA34D; --r2: #14A89A; --chev: #D6F23C; --glow1: transparent; --glow2: transparent; }
.seam-ll { --r1: rgba(63, 163, 77, .55); --r2: rgba(20, 168, 154, .55); --glow1: transparent; --glow2: transparent; }
/* corners and tabs start 1px above the section edge: a clip-path edge sitting
   exactly on the boundary is anti-aliased against the dark section below and
   shows as a grey hairline across the seam */
.seam-c { position: absolute; top: -1px; width: var(--cut); height: calc(var(--cut) + 1px); background: var(--above); }
.seam-cl { left: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
.seam-cr { right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.seam-c::after { content: ""; position: absolute; top: 50%; left: 50%; width: calc(var(--cut) * 1.42); height: 2px; margin: -1px 0 0 calc(var(--cut) * -.71); background: var(--r1); box-shadow: 0 0 10px var(--glow1); }
.seam-cl::after { transform: rotate(-45deg); }
.seam-cr::after { transform: rotate(45deg); background: var(--r2); box-shadow: 0 0 10px var(--glow2); }
.seam-tab { position: absolute; left: 50%; top: -1px; width: 400px; height: 18px; margin-left: -200px; background: var(--above); clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 18px 100%); }
/* rails: hatched run + solid line + a node at the tab end */
.seam-l, .seam-r { position: absolute; top: 12px; height: 8px; }
.seam-l { left: calc(var(--cut) + 14px); right: calc(50% + 214px); background: radial-gradient(circle, var(--r1) 0 3.5px, transparent 4px) right center / 8px 8px no-repeat, linear-gradient(var(--r1), var(--r1)) right 6px center / 36% 2px no-repeat, repeating-linear-gradient(110deg, var(--r1) 0 2px, transparent 2px 6px) left center / 56% 6px no-repeat; filter: drop-shadow(0 0 4px var(--glow1)); }
.seam-r { left: calc(50% + 214px); right: calc(var(--cut) + 14px); background: radial-gradient(circle, var(--r2) 0 3.5px, transparent 4px) left center / 8px 8px no-repeat, linear-gradient(var(--r2), var(--r2)) left 6px center / 36% 2px no-repeat, repeating-linear-gradient(110deg, var(--r2) 0 2px, transparent 2px 6px) right center / 56% 6px no-repeat; filter: drop-shadow(0 0 4px var(--glow2)); }
/* triple chevron over the tab, in the section above */
.seam-chev { position: absolute; left: 50%; top: -58px; width: 34px; height: 40px; margin-left: -17px; fill: none; stroke: var(--chev); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .18)); animation: seam-chev 1.8s var(--ease) infinite; }
@keyframes seam-chev { 0%, 100% { translate: 0 0; opacity: 1; } 50% { translate: 0 6px; opacity: .75; } }
/* the frame on an inset panel (section 11): corners + rails only, top and bottom */
.seam-in { --above: transparent; }
.seam-flip { top: auto; bottom: 0; transform: scaleY(-1); }
/* on a dome: the chevrons sit in a big badge straddling the rim, flowing downward */
.seam-dome { z-index: 6; }
.seam-dome .seam-chev { top: -40px; width: 80px; height: 80px; margin-left: -40px; padding: 21px 22px 17px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #1A2A3A, #07111B 70%); stroke: #D6F23C; stroke-width: 5; box-shadow: 0 0 0 2px #D6F23C, 0 0 0 9px rgba(214, 242, 60, .16), 0 0 34px -2px rgba(214, 242, 60, .6), 0 16px 30px -10px rgba(0, 0, 0, .6); filter: none; animation: none; }
.seam-dome.seam-lt .seam-chev { background: linear-gradient(180deg, #F2FF9C, var(--acid) 60%, #B9E62E); stroke: #0B1D12; box-shadow: 0 0 0 7px rgba(214, 242, 60, .22), 0 0 34px -2px rgba(214, 242, 60, .7), 0 16px 30px -10px rgba(0, 0, 0, .45); }
.seam-dome .seam-chev path { animation: seam-flow 1.5s ease-in-out infinite; }
.seam-dome .seam-chev path:nth-child(2) { animation-delay: .2s; }
.seam-dome .seam-chev path:nth-child(3) { animation-delay: .4s; }
@keyframes seam-flow { 0%, 100% { opacity: .45; } 40% { opacity: 1; } }
@media (max-width: 767px) {
    .seam-dome .seam-chev { top: -32px; width: 64px; height: 64px; margin-left: -32px; padding: 17px 18px 13px; }
}

/* ---- seam variants: one design language, a different join each time ---- */
.seam { --edge: #D6F23C; --edge-glow: rgba(214, 242, 60, .8); }
.seam-ll { --edge: #7BC74D; --edge-glow: transparent; }
.seam-min { height: 0; }
/* smaller, deeper tab with dotted rails (footer) */
.v-dipsm { --cut: 30px; }
.v-dipsm .seam-tab { width: 240px; height: 24px; margin-left: -120px; clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 24px 100%); }
.v-dipsm .seam-l { right: calc(50% + 134px); background: radial-gradient(circle, var(--r1) 0 2px, transparent 2.5px) 0 50% / 10px 8px repeat-x; }
.v-dipsm .seam-r { left: calc(50% + 134px); background: radial-gradient(circle, var(--r2) 0 2px, transparent 2.5px) 0 50% / 10px 8px repeat-x; }
/* deep bevel: big cut corners, rails between them */
.v-beveltab { --cut: 110px; }
.v-beveltab .seam-tab { width: 300px; height: 14px; margin-left: -150px; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 14px 100%); }
.v-beveltab .seam-l { right: calc(50% + 164px); }
.v-beveltab .seam-r { left: calc(50% + 164px); }
/* raised plate: the section below rises into the one above in the centre */
.v-rise, .v-gridrise { --cut: 10px; --pw: 520px; }
.seam.v-rise[style*="#170A0E"] { --pw: 320px; }
.seam-plate { position: absolute; left: 50%; top: -20px; width: var(--pw); height: 21px; margin-left: calc(var(--pw) / -2); background: var(--below); clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 100%, 0 100%); }
.seam-plate::after { content: ""; position: absolute; left: 20px; right: 20px; top: 0; height: 2px; background: var(--edge); box-shadow: 0 0 10px var(--edge-glow); }
.v-rise .seam-l, .v-gridrise .seam-l { right: calc(50% + var(--pw) / 2 + 14px); }
.v-rise .seam-r, .v-gridrise .seam-r { left: calc(50% + var(--pw) / 2 + 14px); }
.v-rise .seam-chev, .v-gridrise .seam-chev { top: -76px; }
/* wings: the section below climbs up the viewport edges */
.v-wings { --cut: 96px; }
.seam-w { position: absolute; top: -46px; width: 90px; height: 47px; background: var(--below); }
.seam-wl { left: 0; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.seam-wr { right: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.seam-w::after { content: ""; position: absolute; top: 50%; left: 50%; width: 101px; height: 2px; margin: -1px 0 0 -50.5px; background: var(--edge); box-shadow: 0 0 10px var(--edge-glow); }
.seam-wl::after { transform: rotate(27deg); }
.seam-wr::after { transform: rotate(-27deg); }
.v-wings .seam-l { left: 104px; right: calc(50% + 18px); top: 10px; }
.v-wings .seam-r { right: 104px; left: calc(50% + 18px); top: 10px; }
.seam-node { position: absolute; left: 50%; top: 8px; width: 14px; height: 14px; margin-left: -7px; border-radius: 3px; background: var(--edge); box-shadow: 0 0 0 4px color-mix(in srgb, var(--edge) 25%, transparent), 0 0 14px var(--edge-glow); transform: rotate(45deg); }
/* V-notch: the section above points down into this one */
.seam-v, .seam-pk { position: absolute; left: 0; width: 100%; overflow: visible; }
.seam-v { top: 0; height: 64px; }
.seam-v polygon { fill: var(--above); }
.seam-v polyline, .seam-pk polyline { fill: none; stroke: var(--edge); stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px var(--edge-glow)); }
.v-vnotch .seam-chev { top: -30px; }
/* peak: this section rises to a point in the centre */
.seam-pk { top: -52px; height: 53px; }
.seam-pk polygon { fill: var(--below); }
.v-peak .seam-chev { top: -114px; }
/* two tabs at a third and two thirds */
/* typing bubble (into section 14, the messages): the dark section ends in a
   chat bubble with a tail and three typing dots, its edge lit in green */
.v-typing { --cut: 10px; }
.seam-bub { position: absolute; left: 50%; top: -1px; width: 190px; max-width: none; height: 66px; margin-left: -95px; overflow: visible; }
/* filled to match the bottom of section 13 there (its lime glow tints it) */
.seam-bub .sb-fill { fill: url(#sbFill); }
.seam-bub .sb-edge { fill: none; stroke: var(--r1); stroke-width: 2; stroke-linejoin: round; }
.seam-typing { position: absolute; left: 50%; top: 18px; display: flex; gap: 8px; margin-left: -20px; }
.seam-typing i { width: 8px; height: 8px; border-radius: 50%; background: #C6F689; animation: seam-type 1.2s ease-in-out infinite; }
.seam-typing i:nth-child(2) { background: #A5EBC0; animation-delay: .15s; }
.seam-typing i:nth-child(3) { background: #7CF0D2; animation-delay: .3s; }
@keyframes seam-type { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.v-typing .seam-l { right: calc(50% + 116px); }
.v-typing .seam-r { left: calc(50% + 116px); }
/* ruler: a measuring rail across the whole edge with a centre node */
.seam-ruler { position: absolute; left: 0; right: 0; top: 0; height: 16px; border-top: 2px solid var(--r1); background: repeating-linear-gradient(90deg, var(--r1) 0 2px, transparent 2px 96px) 50% 0 / 100% 14px no-repeat, repeating-linear-gradient(90deg, var(--r1) 0 1.5px, transparent 1.5px 12px) 50% 0 / 100% 7px no-repeat; opacity: .85; filter: drop-shadow(0 0 3px var(--glow1)); }
.v-ruler .seam-node { top: -6px; }
/* badge: a straight edge with the chevron in a lime button on it */
.v-badge .seam-l { left: 24px; right: calc(50% + 44px); top: -4px; }
.v-badge .seam-r { right: 24px; left: calc(50% + 44px); top: -4px; }
.seam-badge { position: absolute; left: 50%; top: -30px; display: grid; place-items: center; width: 60px; height: 60px; margin-left: -30px; border-radius: 50%; background: linear-gradient(180deg, #EEFF8A, var(--acid)); box-shadow: 0 0 0 7px color-mix(in srgb, var(--below) 80%, transparent), 0 14px 30px -8px rgba(110, 170, 30, .7); }
.seam-badge .seam-chev { position: static; width: 22px; height: 26px; margin: 0; stroke: #0B1D12; filter: none; }
/* neon grid floor at the bottom of the dark section above, then a lit straight edge */
.seam-grid { position: absolute; left: 0; right: 0; top: -130px; height: 130px; background: linear-gradient(rgba(214, 242, 60, .35) 1.5px, transparent 1.5px) 0 0 / 100% 26px, linear-gradient(90deg, rgba(214, 242, 60, .35) 1.5px, transparent 1.5px) 50% 0 / 72px 100%; transform: perspective(260px) rotateX(48deg); transform-origin: 50% 100%; -webkit-mask-image: linear-gradient(transparent, #000 85%); mask-image: linear-gradient(transparent, #000 85%); }
.v-grid .seam-grid { top: -150px; height: 150px; }
.seam-lit { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--edge); box-shadow: 0 0 14px var(--edge-glow); }
.v-grid { --cut: 10px; }
.v-grid .seam-l, .v-grid .seam-r { top: 14px; }
.v-grid .seam-chev { top: -70px; }
/* browser window (into section 13, the real screens): the dark section opens
   like an app window: rounded top corners with a lit edge, the three window
   dots, an address pill and toolbar squares on a lighter bar */
.v-browser { --cut: 34px; height: 58px; }
.v-browser .seam-bar { position: absolute; inset: 0; border-radius: var(--cut) var(--cut) 0 0; background: linear-gradient(#0F2A32, #0B2229); box-shadow: inset 0 -1px 0 rgba(124, 240, 210, .14), 0 18px 30px -18px rgba(0, 0, 0, .7); }
.v-browser .seam-bar::before { content: ""; position: absolute; inset: 0; padding-top: 2px; border-radius: inherit; background: linear-gradient(90deg, var(--r1), #C6F689 45%, var(--r2)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.v-browser .seam-c { width: var(--cut); height: var(--cut); clip-path: none; background: radial-gradient(circle at 100% 100%, transparent calc(var(--cut) - .5px), var(--above) var(--cut)); }
.v-browser .seam-cr { background: radial-gradient(circle at 0 100%, transparent calc(var(--cut) - .5px), var(--above) var(--cut)); }
.v-browser .seam-c::after { display: none; }
.seam-dots { position: absolute; left: 50px; top: 23px; display: flex; gap: 9px; }
.seam-dots i { width: 12px; height: 12px; border-radius: 50%; background: #FF6159; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.seam-dots i:nth-child(2) { background: #FFBE2F; }
.seam-dots i:nth-child(3) { background: #2ACA44; }
.seam-url { position: absolute; left: 50%; top: 14px; display: flex; align-items: center; gap: 11px; width: min(500px, 40vw); height: 31px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(124, 240, 210, .24); color: #7CF0D2; transform: translateX(-50%); }
.seam-url .ic { flex: none; width: 13px; height: 13px; }
.seam-url i { width: 44%; height: 6px; border-radius: 3px; background: linear-gradient(90deg, rgba(198, 246, 137, .55), rgba(124, 240, 210, .2)); }
.seam-tools { position: absolute; right: 50px; top: 17px; display: flex; gap: 8px; }
.seam-tools i { width: 24px; height: 24px; border-radius: 8px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.seam-tools i:last-child { border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgba(198, 246, 137, .18), 0 0 14px rgba(198, 246, 137, .4); }
/* stepped tab: a wide shallow step, then a narrow deeper one */
.v-steps { --cut: 10px; }
.v-steps .seam-s1 { width: 560px; height: 12px; margin-left: -280px; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 12px 100%); }
.v-steps .seam-s2 { width: 300px; height: 28px; margin-left: -150px; clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 16px 100%); }
.v-steps .seam-l { right: calc(50% + 294px); }
.v-steps .seam-r { left: calc(50% + 294px); }
.v-steps .seam-chev { top: -50px; }
/* light on light: the tabs get a lit bottom edge so they read */
.v-steps .seam-s1 { background: linear-gradient(var(--edge), var(--edge)) 50% 100% / calc(100% - 24px) 2px no-repeat, var(--above); }
.v-steps .seam-s2 { background: linear-gradient(var(--edge), var(--edge)) 50% 100% / calc(100% - 32px) 2px no-repeat, var(--above); }
@media (max-width: 767px) {
    .v-dipsm .seam-tab { width: 140px; height: 16px; margin-left: -70px; }
    .v-browser { --cut: 22px; height: 48px; }
    .seam-dots { left: 22px; top: 19px; gap: 6px; }
    .seam-dots i { width: 9px; height: 9px; }
    .seam-url { top: 11px; gap: 8px; width: 46vw; height: 26px; padding: 0 12px; }
    .seam-url .ic { width: 11px; height: 11px; }
    .seam-tools { right: 22px; top: 13px; }
    .seam-tools i:not(:last-child) { display: none; }
    .seam-tools i:last-child { width: 22px; height: 22px; }
    .v-dipsm .seam-l { right: calc(50% + 80px); }
    .v-dipsm .seam-r { left: calc(50% + 80px); }
    .v-beveltab { --cut: 50px; }
    .v-beveltab .seam-tab { width: 150px; height: 10px; margin-left: -75px; }
    .v-beveltab .seam-l { right: calc(50% + 86px); }
    .v-beveltab .seam-r { left: calc(50% + 86px); }
    .v-rise, .v-gridrise { --pw: 200px; }
    .seam-plate { top: -14px; height: 15px; clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 100%, 0 100%); }
    .v-rise .seam-chev, .v-gridrise .seam-chev { top: -60px; }
    .v-wings { --cut: 54px; }
    .seam-w { top: -26px; width: 50px; height: 26.5px; }
    .seam-w::after { width: 56px; margin-left: -28px; }
    .v-wings .seam-l { left: 58px; }
    .v-wings .seam-r { right: 58px; }
    .seam-v { height: 26px; }
    .v-vnotch .seam-chev { top: -26px; }
    .seam-pk { top: -22px; height: 23px; }
    .v-peak .seam-chev { top: -72px; }
    .seam-badge { top: -24px; width: 48px; height: 48px; margin-left: -24px; }
    .v-badge .seam-l { right: calc(50% + 34px); }
    .v-badge .seam-r { left: calc(50% + 34px); }
    .seam-grid { top: -80px; height: 80px; }
    .v-grid .seam-grid { top: -90px; height: 90px; }
    .v-steps .seam-s1 { width: 240px; height: 8px; margin-left: -120px; }
    .v-steps .seam-s2 { width: 130px; height: 18px; margin-left: -65px; }
    .v-steps .seam-l { right: calc(50% + 128px); }
    .v-steps .seam-r { left: calc(50% + 128px); }
}
/* split: Plumber A's red meets Plumber B's green at a centre badge (section 8) */
.v-split { --r1: #FF6B5E; --r2: #4ADE80; --glow1: rgba(255, 107, 94, .8); --glow2: rgba(74, 222, 128, .8); }
.v-split .seam-tab { width: 360px; margin-left: -180px; }
.v-split .seam-l { right: calc(50% + 196px); }
.v-split .seam-r { left: calc(50% + 196px); }
.split-badge { position: absolute; left: 50%; top: -32px; z-index: 2; display: grid; place-items: center; width: 80px; height: 80px; margin-left: -40px; border-radius: 50%; background: radial-gradient(circle, #0D1D16 0 33px, transparent 33.5px), conic-gradient(#4ADE80 0 50%, #FF6B5E 50% 100%); box-shadow: 0 0 26px -4px rgba(255, 107, 94, .6), 0 0 26px -4px rgba(74, 222, 128, .6), 0 14px 26px -10px rgba(0, 0, 0, .6); }
.split-badge .seam-chev { position: static; width: 28px; height: 32px; margin: 4px 0 0; stroke: #fff; filter: none; }
@media (max-width: 767px) {
    .v-split .seam-tab { width: 170px; margin-left: -85px; }
    .v-split .seam-l { right: calc(50% + 96px); }
    .v-split .seam-r { left: calc(50% + 96px); }
    .split-badge { top: -26px; width: 62px; height: 62px; margin-left: -31px; background: radial-gradient(circle, #0D1D16 0 25px, transparent 25.5px), conic-gradient(#4ADE80 0 50%, #FF6B5E 50% 100%); }
    .split-badge .seam-chev { width: 22px; height: 26px; }
}
/* section 22: a light dome rising over the dark offer */
.sec-guar { margin-top: -80px; border-radius: 50% 50% 0 0 / 80px 80px 0 0; }
.sec-guar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%; border-radius: inherit; box-shadow: 0 -2px 0 rgba(214, 242, 60, .9), 0 -40px 70px -30px rgba(198, 246, 137, .6); pointer-events: none; }
@media (max-width: 767px) { .sec-guar { margin-top: -40px; border-radius: 50% 50% 0 0 / 40px 40px 0 0; } }

/* ==========================================================
   BACKGROUND LAYERS (.bgx), behind each section's own art
   light: a faint dot grid at the sides (clear behind the copy) + sparkles
   dark:  star dots + soft corner glows (violet / teal)
   ========================================================== */
.bgx { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.bgx::before { content: ""; position: absolute; inset: 0; -webkit-mask-image: radial-gradient(ellipse 48% 62% at 50% 50%, transparent 52%, #000 100%), linear-gradient(transparent, #000 160px, #000 calc(100% - 140px), transparent); -webkit-mask-composite: source-in; mask-image: radial-gradient(ellipse 48% 62% at 50% 50%, transparent 52%, #000 100%), linear-gradient(transparent, #000 160px, #000 calc(100% - 140px), transparent); mask-composite: intersect; }
.bgx-l::before { background: radial-gradient(circle, rgba(11, 29, 18, .15) 1.1px, transparent 1.6px) 0 0 / 26px 26px; }
.bgx-l.no-dots::before { display: none; }
/* keep the dot grid, drop the sparkles and starbursts */
.bgx-l.no-stars { background: none; }
.bgx-l { background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6.6 5.4 11.4 12 12-6.6.6-11.4 5.4-12 12-.6-6.6-5.4-11.4-12-12C6.6 11.4 11.4 6.6 12 0z' fill='%2378A88A'/%3E%3C/svg%3E") left 8% top 170px / 20px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6.6 5.4 11.4 12 12-6.6.6-11.4 5.4-12 12-.6-6.6-5.4-11.4-12-12C6.6 11.4 11.4 6.6 12 0z' fill='%23A9B8AE'/%3E%3C/svg%3E") right 11% top 230px / 14px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%235B6CFF' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M20 2v12M20 26v12M2 20h12M26 20h12M7.3 7.3l8.5 8.5M24.2 24.2l8.5 8.5M7.3 32.7l8.5-8.5M24.2 15.8l8.5-8.5'/%3E%3C/svg%3E") right 5% top 150px / 44px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2378A88A' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M10 2v16M2 10h16'/%3E%3C/svg%3E") left 4% top 58% / 16px no-repeat; }
.bgx-d::before { background: radial-gradient(circle, rgba(255, 255, 255, .55) .9px, transparent 1.3px) 0 0 / 97px 89px, radial-gradient(circle, rgba(198, 246, 137, .5) 1px, transparent 1.5px) 41px 33px / 163px 151px, radial-gradient(circle, rgba(140, 200, 255, .4) .8px, transparent 1.2px) 70px 12px / 131px 117px; -webkit-mask-image: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(0, 0, 0, .35) 40%, #000 100%), linear-gradient(transparent, #000 160px, #000 calc(100% - 140px), transparent); mask-image: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(0, 0, 0, .35) 40%, #000 100%), linear-gradient(transparent, #000 160px, #000 calc(100% - 140px), transparent); }
.bgx-d { background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6.6 5.4 11.4 12 12-6.6.6-11.4 5.4-12 12-.6-6.6-5.4-11.4-12-12C6.6 11.4 11.4 6.6 12 0z' fill='%23FFFFFF' fill-opacity='.55'/%3E%3C/svg%3E") left 9% top 190px / 18px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6.6 5.4 11.4 12 12-6.6.6-11.4 5.4-12 12-.6-6.6-5.4-11.4-12-12C6.6 11.4 11.4 6.6 12 0z' fill='%23D6F23C' fill-opacity='.7'/%3E%3C/svg%3E") right 10% top 250px / 14px no-repeat,
    radial-gradient(640px 460px at 0 100%, rgba(139, 85, 238, .14), transparent 70%),
    radial-gradient(640px 460px at 100% 12%, rgba(94, 234, 212, .1), transparent 70%); }

/* EDGE SHAPES: code-built objects half off the viewport edge, mid-section,
   alternating sides (wide screens only) */
.edge { display: none; }
@media (min-width: 1360px) {
    .edge { --w: 150px; display: block; position: absolute; top: var(--y, 45%); z-index: -1; width: var(--w); aspect-ratio: 1; pointer-events: none; background: var(--c, #0B1D12); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
    .edge.at-l { left: calc(var(--w) * -.55); }
    .edge.at-r { right: calc(var(--w) * -.55); }
    /* a thick ribbon squiggle in lime → mint */
    /* three rounded speed bars in lime → mint (was a squiggle that read as an "S") */
    .e-squig { --w: 150px; --c: linear-gradient(135deg, #C6F689, #4FE3C1); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23000' stroke-width='12' stroke-linecap='round'%3E%3Cpath d='M14 30h72M30 52h56M48 74h38'/%3E%3C/g%3E%3C/svg%3E"); transform: rotate(-18deg); }
    .e-squig.at-l { transform: scaleX(-1) rotate(-18deg); }
    /* an outlined coil spring */
    .e-coil { --w: 130px; --c: rgba(11, 29, 18, .5); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23000' stroke-width='3'%3E%3Cellipse cx='50' cy='16' rx='34' ry='9'/%3E%3Cellipse cx='50' cy='30' rx='34' ry='9'/%3E%3Cellipse cx='50' cy='44' rx='34' ry='9'/%3E%3Cellipse cx='50' cy='58' rx='34' ry='9'/%3E%3Cellipse cx='50' cy='72' rx='34' ry='9'/%3E%3Cellipse cx='50' cy='86' rx='34' ry='9'/%3E%3C/svg%3E"); transform: rotate(-24deg); }
    /* a line starburst */
    .e-burst { --w: 110px; --c: #5B6CFF; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M20 1v13M20 26v13M1 20h13M26 20h13M6.6 6.6l9.2 9.2M24.2 24.2l9.2 9.2M6.6 33.4l9.2-9.2M24.2 15.8l9.2-9.2M12.7 2.3l3.4 8.3M23.9 29.4l3.4 8.3M2.3 27.3l8.3-3.4M29.4 16.1l8.3-3.4'/%3E%3C/svg%3E"); }
    /* three concentric arcs */
    .e-arcs { --w: 150px; --c: #FF8A6B; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M20 80a40 40 0 0 1 60 0'/%3E%3Cpath d='M8 70a54 54 0 0 1 84 0'/%3E%3Cpath d='M32 90a26 26 0 0 1 36 0'/%3E%3C/svg%3E"); transform: rotate(90deg); }
    .e-arcs.at-r { transform: rotate(-90deg); }
    /* on dark sections */
    .sec-two .e-coil, .sec-screens .e-coil, .sec-train .e-coil, .sec-week .e-coil, .sec-worry .e-coil, .sec-price .e-coil { --c: rgba(214, 242, 60, .5); }
    .sec-two .e-burst, .sec-screens .e-burst, .sec-train .e-burst, .sec-week .e-burst, .sec-worry .e-burst { --c: #5EEAD4; }
    .sec-two .e-arcs, .sec-screens .e-arcs, .sec-train .e-arcs, .sec-week .e-arcs, .sec-worry .e-arcs { --c: #A78BFA; }
}
/* 3D edge objects (one per section, generated per section; never reused) */
.edge3d { display: none; }
@media (min-width: 1360px) {
    .edge3d { display: block; position: absolute; top: var(--y, 30%); z-index: 0; width: 210px; height: auto; pointer-events: none; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .28)); animation: s3-bob 8s ease-in-out infinite; }
    .edge3d.at-l { left: -64px; transform: rotate(-8deg); }
    .edge3d.at-r { right: -64px; transform: rotate(8deg); animation-delay: -4s; }
}
@media (min-width: 1360px) and (max-width: 1599px) { .edge3d { width: 170px; } }
.pr-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.pr-aura { position: absolute; inset: 0; background: radial-gradient(760px 620px at 80% 56%, rgba(94, 234, 168, .2), transparent 70%), radial-gradient(500px 500px at 18% 58%, rgba(198, 246, 137, .08), transparent 70%), radial-gradient(800px 360px at 50% 280px, rgba(214, 242, 60, .1), transparent 70%); }
.pr-wrap { max-width: 1320px; }
/* section 21 reuses the section 4 pricing; its longer head wraps evenly */
/* section 21, the final offer, gets its own stage so it doesn't read as a
   repeat of section 4: a lit lime grid floor under the three plans (fading
   to the sides), a stronger spotlight on Platinum, teal + gold side glows */
.pr-floor { position: absolute; left: 50%; bottom: 210px; width: 2400px; height: 900px; margin-left: -1200px; background: linear-gradient(rgba(198, 246, 137, .5) 2px, transparent 2px) 0 0 / 100% 48px, linear-gradient(90deg, rgba(198, 246, 137, .5) 2px, transparent 1.5px) 50% 0 / 90px 100%; transform: perspective(560px) rotateX(60deg); transform-origin: 50% 100%; -webkit-mask-image: linear-gradient(transparent 5%, #000 45%), linear-gradient(90deg, transparent 4%, #000 16%, #000 84%, transparent 96%); -webkit-mask-composite: source-in; mask-image: linear-gradient(transparent 5%, #000 45%), linear-gradient(90deg, transparent 4%, #000 16%, #000 84%, transparent 96%); mask-composite: intersect; }
.pr-floor::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 0; height: 60%; background: radial-gradient(closest-side at 50% 100%, rgba(214, 242, 60, .35), transparent); }
.pr-side { position: absolute; inset: 0; background: radial-gradient(620px 520px at 2% 78%, rgba(94, 234, 212, .16), transparent 70%), radial-gradient(620px 520px at 98% 74%, rgba(255, 194, 61, .14), transparent 70%); }
.sec-price2 .plan-best::before { opacity: 1.6; filter: brightness(1.35); }
.sec-price2 .pr-title { text-wrap: balance; }
.sec-price2 .pr-title .hl { padding-right: .04em; }

.pr-head { text-align: center; }
.pr-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px 7px 11px; border-radius: 999px; background: rgba(214, 242, 60, .1); box-shadow: inset 0 0 0 1px rgba(214, 242, 60, .4); color: var(--acid); font-size: 14px; font-weight: 800; }
.pr-kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 3px rgba(214, 242, 60, .25); }
.pr-title { margin: 20px 0 0; font-family: var(--f-display); font-size: clamp(40px, 5.4vw, 84px); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; color: #fff; }
.pr-title .hl { white-space: nowrap; background: linear-gradient(180deg, #F2FF9C 0%, var(--acid) 55%, #A9E13A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 26px rgba(214, 242, 60, .3)); }
.pr-lede { max-width: 36em; margin: 18px auto 0; color: #B9CDBD; font-size: 19.5px; line-height: 1.55; }

/* the cards */
.plans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: stretch; max-width: 1280px; margin: 160px auto 0; }
.plan { --c: #C6F689; --c2: #8ED45E; --cg: rgba(198, 246, 137, .5); position: relative; display: flex; flex-direction: column; padding: 22px 26px 28px; border-radius: 30px; border: 1.5px solid transparent; color: #fff; text-align: left;
    background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 60%) padding-box, linear-gradient(180deg, #0F271B, #0A1D14 60%, #07140D) padding-box, linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, transparent), rgba(255, 255, 255, .06) 40%, rgba(255, 255, 255, .04)) border-box;
    box-shadow: 0 50px 90px -50px #000, 0 0 80px -40px var(--cg); }
.plan-basic { --c: #E4ECE7; --c2: #A9BAB0; --cg: rgba(228, 236, 231, 0); }
.plan-gold { --c: #FFC23D; --c2: #F59E1B; --cg: rgba(255, 194, 61, .35); }
.plan-basic { background: linear-gradient(180deg, #11231A, #0B1A12 60%, #08140D) padding-box, linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .06)) border-box; box-shadow: 0 50px 90px -50px #000; }
.plan-gold { background: radial-gradient(120% 50% at 50% 0%, rgba(255, 194, 61, .12), transparent 60%) padding-box, linear-gradient(180deg, #1A2214, #131A0E 60%, #0C130A) padding-box, linear-gradient(180deg, rgba(255, 194, 61, .8), rgba(255, 194, 61, .14) 45%, rgba(255, 194, 61, .3)) border-box; box-shadow: 0 50px 90px -50px #000, 0 0 70px -36px rgba(255, 194, 61, .55); }
.plan-basic .pl-name { color: #fff; }
.plan-gold .pl-price { background: rgba(255, 194, 61, .07); box-shadow: inset 0 0 0 1px rgba(255, 194, 61, .3); }
.plan-best { --c: #5EEAA8; --c2: #22C47A; --cg: rgba(94, 234, 168, .55); z-index: 1; padding-top: 30px; padding-bottom: 27px; border-width: 3px;
    background: radial-gradient(110% 55% at 50% 0%, rgba(214, 242, 60, .34), transparent 66%) padding-box, radial-gradient(90% 40% at 50% 100%, rgba(94, 234, 168, .18), transparent 70%) padding-box, linear-gradient(180deg, #1C6440, #134A2F 45%, #0D2D1D) padding-box, conic-gradient(from var(--pr-a), #F2FF9C, var(--acid) 12%, #5EEAA8 26%, rgba(214, 242, 60, .45) 40%, rgba(214, 242, 60, .45) 60%, #5EEAA8 74%, var(--acid) 88%, #F2FF9C) border-box;
    box-shadow: 0 0 0 1px rgba(214, 242, 60, .45), 0 0 0 10px rgba(214, 242, 60, .1), 0 0 0 22px rgba(214, 242, 60, .04), 0 0 170px -10px rgba(198, 246, 137, .6), 0 60px 100px -40px #000;
    margin-top: -26px; }
/* the turning lit border: a big conic square rotating inside a 3px ring mask
   (composited, nothing repaints) */
.pb-ring { position: absolute; inset: -3px; z-index: -1; overflow: hidden; padding: 3px; border-radius: 30px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.pb-ring i { position: absolute; left: 50%; top: 50%; width: 1300px; height: 1300px; margin: -650px 0 0 -650px; background: conic-gradient(#F2FF9C, var(--acid) 12%, #5EEAA8 26%, rgba(214, 242, 60, .45) 40%, rgba(214, 242, 60, .45) 60%, #5EEAA8 74%, var(--acid) 88%, #F2FF9C); animation: pb-spin 5s linear infinite; }
@keyframes pb-spin { to { transform: rotate(360deg); } }
/* the breathing glow: a fixed extra shadow that fades in and out */
.pb-glow { position: absolute; inset: -3px; z-index: -2; border-radius: 30px; box-shadow: 0 0 0 12px rgba(214, 242, 60, .06), 0 0 0 26px rgba(214, 242, 60, .03), 0 0 200px -6px rgba(198, 246, 137, .4); opacity: 0; animation: pb-glow 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes pb-glow { 50% { opacity: 1; } }
/* a soft spotlight from above onto the Platinum card */
.plan-best::before { content: ""; position: absolute; left: 50%; bottom: 55%; z-index: -1; width: 170%; height: 120%; margin-left: -85%; background: conic-gradient(from 180deg at 50% 0, transparent 160deg, rgba(214, 242, 60, .2) 170deg, rgba(242, 255, 156, .34) 180deg, rgba(214, 242, 60, .2) 190deg, transparent 202deg); -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 80%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 80%, transparent); pointer-events: none; }
.plan-best .pl-top { height: 190px; }
.plan-best .pl-ped { width: 250px; height: 250px; margin-left: -125px; }
.plan-best .pl-box { width: 236px; margin-top: -140px; }
.plan-best .pl-name { color: #fff; }
.plan-best .pl-price { background: linear-gradient(160deg, #F2FF9C, var(--acid) 55%, #A9E13A); box-shadow: 0 16px 34px -16px rgba(214, 242, 60, .8); }
.plan-best .pl-now { color: var(--ink); text-shadow: none; }
.plan-best .pl-now sup { color: var(--ink); }
.plan-best .pl-per { background: var(--ink); box-shadow: none; color: var(--acid); }
.plan-best .pl-list li > i { background: linear-gradient(160deg, #F2FF9C, var(--acid)); }
/* the product box, inside the card header on its own lit stage */
.pl-top { position: relative; display: grid; place-items: end center; height: 170px; margin: 0 -8px; }
.pl-ped { position: absolute; left: 50%; bottom: -8px; width: 220px; height: 220px; margin-left: -110px; border-radius: 30%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 55%, transparent), color-mix(in srgb, var(--c) 14%, transparent) 62%, transparent 64%); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--c) 85%, transparent), inset 0 0 22px color-mix(in srgb, var(--c) 55%, transparent), 0 0 30px -6px var(--c); transform: perspective(600px) rotateX(76deg); transform-origin: 50% 100%; }
.pl-box { position: relative; width: 196px; height: auto; margin: -130px 0 26px; filter: drop-shadow(0 26px 22px rgba(0, 0, 0, .65)) drop-shadow(0 0 30px color-mix(in srgb, var(--c) 30%, transparent)); }
.pl-ribbon { position: absolute; z-index: 2; top: 0; left: 50%; display: inline-flex; align-items: center; gap: 7px; padding: 9px 20px; border-radius: 999px; background: linear-gradient(180deg, #F2FF9C, var(--acid)); color: var(--ink); font-size: 13.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; transform: translate(-50%, -50%); box-shadow: 0 0 0 5px rgba(214, 242, 60, .18), 0 14px 30px -10px rgba(214, 242, 60, .9); }
.plan > * { order: 2; }
.plan > .pl-top { order: 0; }
/* "Most complete": a yellow banner across the lower part of the Platinum box,
   in front of it (contrasts with the green card and the green box) */
.plan > .pl-ribbon { position: absolute; z-index: 4; top: 158px; left: 50%; display: flex; align-items: center; gap: 12px; margin: 0; padding: 9px 28px 9px 9px; border-radius: 15px; background: linear-gradient(180deg, #FFF0A0, #FFD23F 50%, #F5B312); color: #2B1A00; font-family: var(--f-display); font-size: 19px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; box-shadow: inset 0 -3px 0 rgba(140, 80, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .75), 0 0 0 5px rgba(255, 210, 63, .22), 0 0 46px -6px rgba(255, 196, 40, .85), 0 20px 34px -14px rgba(0, 0, 0, .75); transform: translateX(-50%) rotate(-3deg); animation: pr-banner 2.6s ease-in-out infinite; }
.plan > .pl-ribbon .ic { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: #2B1A00; color: #FFD23F; }
@keyframes pr-banner { 50% { transform: translateX(-50%) rotate(-3deg) translateY(-3px); } }
.pl-ribbon .ic { width: 15px; height: 15px; }
.pl-name { margin: 20px 0 0; font-family: var(--f-display); font-size: 34px; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; color: var(--c); text-align: center; }
.pl-sub { margin: 6px 0 0; color: #B9CDBD; font-size: 16px; font-weight: 500; text-align: center; }
.pl-price { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 20px 0 0; padding: 16px 12px; border-radius: 18px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.pl-now { font-family: var(--f-display); font-size: 66px; font-weight: 800; line-height: .9; letter-spacing: -.045em; color: #fff; text-shadow: 0 0 40px var(--cg); }
.pl-now sup { position: relative; top: .14em; margin-right: 3px; vertical-align: top; font-size: .4em; line-height: 1; color: var(--c); }
.pl-per { padding: 5px 10px; border-radius: 8px; background: color-mix(in srgb, var(--c) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); color: var(--c); font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pl-list { flex: 1; margin: 20px 0 0; padding: 0; list-style: none; }
.pl-list li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 2px; border-top: 1px dashed rgba(255, 255, 255, .08); color: #CFDDD2; font-size: 15.5px; line-height: 1.45; }
.pl-list li:first-child { border-top: 0; }
/* "Everything in …": a tinted bar with a plus, so the stacking reads at a glance */
.pl-list li.pl-inc { align-items: center; margin-bottom: 6px; padding: 11px 14px 11px 10px; border-radius: 14px; background: color-mix(in srgb, var(--c) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent); }
.pl-list li.pl-inc + li { border-top: 0; }
.pl-list li.pl-inc > i { width: 26px; height: 26px; border-radius: 50%; transform: none; }
.pl-list li.pl-inc > i .ic { display: none; }
.pl-list li.pl-inc > i::before { content: "+"; font: 900 19px/1 var(--f-display); margin-top: -2px; }
.pl-list li > i { display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 7px; background: linear-gradient(160deg, var(--c), var(--c2)); color: #0B1D12; transform: rotate(-6deg); }
.pl-list li > i .ic { width: 13px; height: 13px; }
.pl-list b { color: #fff; font-weight: 700; }
.pl-list .pl-note { gap: 10px; margin: 6px 0; padding: 12px 14px; border: 1px dashed color-mix(in srgb, var(--c) 45%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--c) 7%, transparent); color: #E3EDE5; font-size: 14.5px; }
.pl-list .pl-note + li { border-top: 0; }
.pl-note > .ic { flex: none; width: 19px; height: 19px; margin-top: 1px; color: var(--c); }
.pl-foot { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 0 0; color: #9DB5A4; font-size: 14px; font-weight: 600; }
.pl-foot .ic { width: 17px; height: 17px; color: var(--c); }
/* JVZoo button wrappers (LME pattern): the <a><img> inside is never touched */
.jv-wrap { position: relative; width: fit-content; max-width: 100%; margin: 24px auto 0; }
.jv-wrap::before { content: ""; position: absolute; inset: -10px; z-index: 0; border-radius: 22px; background: radial-gradient(closest-side, rgba(214, 242, 60, .38), transparent 76%); pointer-events: none; }
.jv-wrap::after { content: ""; position: absolute; inset: -4px; z-index: 2; border-radius: 16px; border: 2px solid rgba(214, 242, 60, .85); pointer-events: none; animation: jv-ring 2.2s ease-out infinite; }
@keyframes jv-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.06, 1.4); opacity: 0; } }
.jv-button { position: relative; z-index: 1; overflow: hidden; border-radius: 12px; box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .9); }
.jv-button::after { content: ""; position: absolute; top: 0; left: 0; z-index: 2; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); pointer-events: none; transform: translateX(-160%) skewX(-20deg); animation: jv-shine 3.6s ease-in-out infinite; }
@keyframes jv-shine { 0% { transform: translateX(-160%) skewX(-20deg); } 55%, 100% { transform: translateX(330%) skewX(-20deg); } }
.jv-button a { display: block; line-height: 0; }
.jv-button img { display: block; width: 100%; max-width: 489px; height: auto; margin: 0 auto; }
/* the JVZoo button, shown as supplied: no frame, glow, shine or ring */
.plan .jv-wrap { width: 100%; margin: 24px 0 0; }
.plan .jv-wrap::before, .plan .jv-wrap::after, .plan .jv-button::after { display: none; }
.plan .jv-button { border-radius: 0; box-shadow: none; overflow: visible; }
.plan .pl-foot { margin-top: 16px; }
.pr-tbar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 26px; width: fit-content; max-width: 100%; margin: 64px auto 0; padding: 12px 26px 12px 18px; border-radius: 26px; background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px rgba(214, 242, 60, .28), 0 30px 60px -30px #000; }
.pr-tbar .g-seal { width: 78px; height: 78px; margin: -16px 0; }
.pr-tbar .pay svg { width: 44px; }
.pr-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; margin: 0; padding: 0; list-style: none; }
.pr-trust li { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: 15.5px; font-weight: 700; }
.pr-trust li + li { padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, .14); }
.pr-trust .ic { width: 30px; height: 30px; padding: 6px; border-radius: 10px; background: rgba(214, 242, 60, .14); color: var(--acid); }


/* ==========================================================
   SECTION 5 — THE WHOLE IDEA (light)
   Colour the Clipsfield way: a near-white section, one pastel per step
   (sky blue, butter yellow, lavender), red/green only for meaning,
   lime kept to small accents (kicker dot, title marker, the key line).
   The problem sits in one dark panel, broken into readable chunks.
   ========================================================== */
.sec-idea { position: relative; isolation: isolate; padding: 64px 0 190px; background: linear-gradient(180deg, #FBFCFA 0, #FBFCFA 80px, #F6F8F4 100%); color: #3E5446; }
.s5-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(520px 380px at 4% 22%, rgba(120, 180, 255, .16), transparent 70%), radial-gradient(520px 380px at 96% 16%, rgba(255, 186, 120, .16), transparent 70%), radial-gradient(640px 420px at 50% 100%, rgba(170, 140, 255, .12), transparent 70%); }
.s5-wrap { max-width: 1300px; }
.s5-head { text-align: center; }
.s5-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px 7px 11px; border-radius: 999px; background: #0B1D12; color: #fff; font-size: 14px; font-weight: 700; }
.s5-kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 3px rgba(214, 242, 60, .25); }
.s5-title { margin: 20px 0 0; font-family: var(--f-display); font-size: clamp(40px, 5.4vw, 82px); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; color: #0B1D12; }
.s5-title .mk { white-space: nowrap; padding: 0 .06em; background: linear-gradient(transparent 58%, rgba(198, 246, 137, .95) 58%, rgba(198, 246, 137, .95) 90%, transparent 90%); }
.s5-sub { max-width: 40em; margin: 18px auto 0; font-size: 20px; line-height: 1.55; text-wrap: balance; }

/* the three steps: one pastel each */
.idea-steps { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.18fr); gap: 30px; align-items: start; max-width: 1240px; margin: 64px auto 0; padding: 0; list-style: none; }
/* the route: from each badge to the next, in the step colours, with an arrow in the gap */
.is-go { --to: #E08A00; position: absolute; left: 57px; top: 255px; z-index: 1; width: calc(100% + 30px); height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--k), var(--to)); -webkit-mask: repeating-linear-gradient(90deg, #000 0 12px, transparent 12px 20px); mask: repeating-linear-gradient(90deg, #000 0 12px, transparent 12px 20px); pointer-events: none; }
.is-card:nth-child(2) .is-go { --to: #8B55EE; }
.is-card:has(.is-go)::after { content: ""; position: absolute; z-index: 2; top: 243px; right: -29px; width: 28px; height: 28px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1D12' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: 0 0 0 3px color-mix(in srgb, var(--k) 45%, transparent), 0 8px 16px -6px rgba(11, 29, 18, .4); }
html.s5-anim .is-go { transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease); }
html.s5-anim .is-card:has(.is-go)::after { opacity: 0; transform: scale(.4); transition: opacity .3s, transform .4s var(--ease); }
html.s5-anim .idea-steps.on .is-go { transform: none; }
html.s5-anim .idea-steps.on .is-card:has(.is-go)::after { opacity: 1; transform: none; }
.idea-steps.on .is-card:nth-child(1) .is-go { transition-delay: .9s; }
.idea-steps.on .is-card:nth-child(1)::after { transition-delay: 1.5s; }
.idea-steps.on .is-card:nth-child(2) .is-go { transition-delay: 2.1s; }
.idea-steps.on .is-card:nth-child(2)::after { transition-delay: 2.7s; }
.is-card { --k: #2F7CF6; --t: #E8F2FF; --t2: #D4E6FF; position: relative; padding: 16px 16px 32px; border-radius: 28px; background: linear-gradient(180deg, var(--t) 0, #fff 62%); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--k) 22%, transparent), 0 34px 60px -40px rgba(11, 29, 18, .45); }
.is-card:nth-child(2) { --k: #E08A00; --t: #FFF4DC; --t2: #FFE7B3; }
.is-card:nth-child(3) { --k: #8B55EE; --t: #F2EBFF; --t2: #E3D5FF; transform: translateY(-10px); box-shadow: inset 0 0 0 2px rgba(139, 85, 238, .75), 0 0 0 6px rgba(139, 85, 238, .12), 0 0 60px -14px rgba(139, 85, 238, .6), 0 40px 70px -40px rgba(60, 20, 140, .55); }
.ivw-ring { position: absolute; inset: -6px; border-radius: 34%; border: 3px solid #FF6B5E; animation: ivw-pulse 1.8s ease-out infinite; pointer-events: none; }
@keyframes ivw-pulse { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.is-n { position: absolute; left: 32px; top: 232px; z-index: 3; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 30%; background: var(--k); box-shadow: 0 0 0 5px #fff, 0 12px 22px -8px color-mix(in srgb, var(--k) 70%, transparent); color: #fff; font-family: var(--f-display); font-size: 22px; font-weight: 800; transform: rotate(-8deg); }
.is-card h3 { margin: 42px 16px 0; font-family: var(--f-display); font-size: 27px; font-weight: 800; line-height: 1.15; letter-spacing: -.025em; color: #0B1D12; }
.is-card p { margin: 10px 16px 0; font-size: 17px; line-height: 1.6; }
.is-card p b { color: #0B1D12; }
.iv { position: relative; height: 240px; border-radius: 20px; overflow: hidden; background: radial-gradient(color-mix(in srgb, var(--k) 22%, transparent) 1.4px, transparent 1.8px) 0 0 / 16px 16px, linear-gradient(160deg, var(--t2), var(--t)); }
/* 1: the search */
.iv-search { display: grid; place-content: center; justify-items: center; gap: 16px; }
.ivs-drop { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(160deg, #6CC4FF, #1F7FE0); color: #fff; box-shadow: 0 12px 24px -10px rgba(31, 127, 224, .8); }
.ivs-drop .ic { width: 24px; height: 24px; }
.ivs-drop::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(31, 127, 224, .35); }
.ivs-bar { display: flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; border-radius: 999px; background: #fff; box-shadow: 0 14px 30px -14px rgba(31, 90, 180, .55), 0 0 0 1px rgba(31, 127, 224, .15); color: #0B1D12; font-size: 18px; white-space: nowrap; }
.ivs-bar .ic { width: 20px; height: 20px; color: #1F7FE0; }
.ivs-caret { width: 2px; height: 20px; margin-left: -6px; background: #1F7FE0; animation: ivs-blink 1.1s steps(1) infinite; }
@keyframes ivs-blink { 50% { opacity: 0; } }
.ivs-bar b { display: inline-block; }
html.s5-anim .idea-steps:not(.on) .ivs-bar b { clip-path: inset(0 100% 0 0); }
html.s5-anim .idea-steps.on .ivs-bar b { animation: ivs-type 1.1s steps(15) .2s both; }
@keyframes ivs-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
html.s5-anim .idea-steps:not(.on) .ivp-map i { opacity: 0; transform: translateY(-26px); }
html.s5-anim .ivp-map i { transition: opacity .3s, transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.idea-steps.on .ivp-map .p1 { transition-delay: 1.2s; }
.idea-steps.on .ivp-map .p2 { transition-delay: 1.45s; }
.idea-steps.on .ivp-map .p3 { transition-delay: 1.7s; }
html.s5-anim .idea-steps:not(.on) .ivw-line { transform: rotate(7deg) scaleX(0); }
html.s5-anim .ivw-line { transform-origin: left; transition: transform .8s var(--ease) 2.4s; }
html.s5-anim .idea-steps:not(.on) .ivw-far { opacity: 0; transform: scale(.4); }
html.s5-anim .ivw-far { transition: opacity .3s 3.1s, transform .5s cubic-bezier(.3, 1.6, .5, 1) 3.1s; }
/* 2: the map pack */
.iv-pack { display: grid; grid-template-columns: 1fr 1.1fr; gap: 12px; padding: 16px; }
.ivp-map { position: relative; border-radius: 14px; background: linear-gradient(90deg, transparent 47%, #fff 47%, #fff 53%, transparent 53%), linear-gradient(transparent 58%, #fff 58%, #fff 64%, transparent 64%), #FFF8E8; box-shadow: inset 0 0 0 1px rgba(224, 138, 0, .2); }
.ivp-map i, .ivp-list b { display: grid; place-items: center; border-radius: 50%; background: #1E9A45; color: #fff; font-family: var(--f-display); font-style: normal; font-weight: 800; }
.ivp-map i { position: absolute; width: 28px; height: 28px; font-size: 13px; box-shadow: 0 0 0 3px #fff, 0 8px 14px -6px rgba(11, 29, 18, .6); }
.ivp-map .p1 { left: 18%; top: 18%; }
.ivp-map .p2 { left: 60%; top: 30%; }
.ivp-map .p3 { left: 22%; top: 70%; }
.ivp-list { display: grid; align-content: start; gap: 9px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: 0 12px 24px -14px rgba(160, 100, 0, .45); -webkit-mask-image: linear-gradient(#000 64%, transparent); mask-image: linear-gradient(#000 64%, transparent); }
.ivp-list i { display: flex; align-items: center; gap: 9px; }
.ivp-list b { flex: none; width: 22px; height: 22px; font-size: 11.5px; }
.ivp-list s { flex: 1; height: 9px; border-radius: 9px; background: #F2E3C2; }
.ivp-list .fade b { background: #E9DCC0; }
/* 3: where they stand */
.iv-where::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 30%, rgba(255, 255, 255, .9) 30%, rgba(255, 255, 255, .9) 33%, transparent 33%), linear-gradient(90deg, transparent 72%, rgba(255, 255, 255, .9) 72%, rgba(255, 255, 255, .9) 75%, transparent 75%), linear-gradient(transparent 62%, rgba(255, 255, 255, .9) 62%, rgba(255, 255, 255, .9) 66%, transparent 66%); }
.ivw-shop, .ivw-far { position: absolute; display: grid; place-items: center; border-radius: 30%; font-family: var(--f-display); font-weight: 800; }
.ivw-shop { left: 18%; top: 34%; width: 58px; height: 58px; background: #fff; color: #5B2DB8; box-shadow: 0 14px 26px -12px rgba(91, 45, 184, .55), 0 0 0 1px rgba(139, 85, 238, .2); }
.ivw-shop .ic { width: 28px; height: 28px; }
.ivw-shop b { position: absolute; right: -16px; top: -14px; padding: 4px 9px; border-radius: 999px; background: #1E9A45; color: #fff; font-size: 14px; box-shadow: 0 0 0 3px #fff; }
.ivw-far { right: 16%; top: 48%; width: 54px; height: 54px; background: linear-gradient(160deg, #FF8A80, #D9443C); color: #fff; font-size: 16px; box-shadow: 0 0 0 4px #fff, 0 14px 26px -12px rgba(217, 68, 60, .8); }
.ivw-line { position: absolute; left: 32%; right: 31%; top: 56%; border-top: 3px dashed rgba(91, 45, 184, .45); transform: rotate(7deg); }
.ivw-line em { position: absolute; left: 50%; top: -15px; padding: 3px 10px; border-radius: 999px; background: #5B2DB8; color: #fff; font-size: 13px; font-style: normal; font-weight: 800; transform: translateX(-50%) rotate(-7deg); }

/* the quiet problem: one dark panel, broken into chunks */
.quiet { --qc: 50px; --qb: 28px; --qt: 200px; --qd: 18px; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) 600px; gap: 48px; align-items: center; max-width: 1240px; margin: 84px auto 0; padding: 76px 64px 68px; }
/* the HUD shape: 45° cut corners, a tab where the light page dips into the top edge */
.qz-bg { position: absolute; inset: 0; z-index: -1; filter: drop-shadow(0 0 16px rgba(214, 242, 60, .18)) drop-shadow(0 50px 50px rgba(11, 29, 18, .45)); pointer-events: none; }
.qz-edge, .qz-fill { position: absolute; clip-path: polygon(var(--qc) 0, calc(50% - var(--qt)) 0, calc(50% - var(--qt) + var(--qd)) var(--qd), calc(50% + var(--qt) - var(--qd)) var(--qd), calc(50% + var(--qt)) 0, calc(100% - var(--qc)) 0, 100% var(--qc), 100% calc(100% - var(--qb)), calc(100% - var(--qb)) 100%, var(--qb) 100%, 0 calc(100% - var(--qb)), 0 var(--qc)); }
.qz-edge { inset: 0; background: radial-gradient(420px 260px at 0 0, #D6F23C, transparent 70%), radial-gradient(420px 260px at 100% 0, #5EEAD4, transparent 70%), radial-gradient(320px 70px at 50% 0, rgba(214, 242, 60, .9), transparent 70%), radial-gradient(380px 240px at 100% 100%, rgba(255, 107, 94, .7), transparent 70%), radial-gradient(380px 240px at 0 100%, rgba(214, 242, 60, .45), transparent 70%), rgba(255, 255, 255, .12); }
.qz-fill { inset: 1.5px; overflow: hidden; background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23D6F23C' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M20 2v12M20 26v12M2 20h12M26 20h12M7.3 7.3l8.5 8.5M24.2 24.2l8.5 8.5M7.3 32.7l8.5-8.5M24.2 15.8l8.5-8.5'/%3E%3C/svg%3E") right 5% top 64px / 46px no-repeat,
    radial-gradient(560px 420px at 0 0, rgba(214, 242, 60, .16), transparent 70%),
    radial-gradient(520px 420px at 84% 46%, rgba(198, 246, 137, .2), transparent 70%),
    radial-gradient(480px 360px at 100% 100%, rgba(94, 234, 212, .12), transparent 70%),
    radial-gradient(360px 200px at 22% 74%, rgba(255, 110, 90, .1), transparent 70%),
    linear-gradient(160deg, #112E1F 0%, #0A1B12 55%, #06110B 100%); }
/* a fine grid on the phone side only, never behind the copy */
.qz-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(198, 246, 137, .08) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(198, 246, 137, .08) 1px, transparent 1px) 0 0 / 40px 40px; -webkit-mask-image: linear-gradient(90deg, transparent 52%, #000 72%), linear-gradient(transparent, #000 20%, #000 80%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 52%, #000 72%), linear-gradient(transparent, #000 20%, #000 80%, transparent); mask-composite: intersect; }
/* a lit perspective floor under the phone */
.qz-floor { position: absolute; right: -10%; bottom: 0; width: 64%; height: 230px; background: linear-gradient(rgba(214, 242, 60, .32) 1.5px, transparent 1.5px) 0 0 / 100% 28px, linear-gradient(90deg, rgba(214, 242, 60, .32) 1.5px, transparent 1.5px) 50% 0 / 56px 100%; transform: perspective(300px) rotateX(52deg); transform-origin: 50% 100%; -webkit-mask-image: linear-gradient(transparent, #000 70%), linear-gradient(90deg, transparent, #000 30%, #000 80%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(transparent, #000 70%), linear-gradient(90deg, transparent, #000 30%, #000 80%, transparent); mask-composite: intersect; }
/* HUD rails along the top and bottom edges, inside the panel */
.qz-hud { --cut: 50px; --glow1: rgba(214, 242, 60, .7); }
.qz-hud .seam-l, .qz-hud .seam-r { top: 26px; }
.qz-hud-b { --cut: 28px; top: auto; bottom: 0; transform: scaleY(-1); }
.qz-hud-b .seam-l, .qz-hud-b .seam-r { top: 14px; }
.qz-hud-b .seam-l { right: calc(50% + 24px); }
.qz-hud-b .seam-r { left: calc(50% + 24px); }
/* a dotted arrow from the statement to the red row (drawn by JS when side by side) */
.qz-path { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.qz-path path { animation: qz-in .6s ease both; fill: none; stroke: var(--acid); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 8; filter: drop-shadow(0 0 4px rgba(214, 242, 60, .7)); marker-end: none; }
@keyframes qz-in { from { opacity: 0; } }
.qz-path .qz-head { stroke-width: 3; stroke-dasharray: none; stroke-linejoin: round; }
.q-title { margin: 0 0 26px; font-family: var(--f-display); font-size: clamp(34px, 3.6vw, 54px); font-weight: 800; line-height: 1.06; letter-spacing: -.04em; color: #fff; }
.q-row { display: flex; align-items: flex-start; gap: 16px; margin-top: 14px; padding: 18px 20px; border-radius: 20px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.q-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 30%; }
.q-ic .ic { width: 22px; height: 22px; }
.q-ok .q-ic { background: rgba(79, 208, 122, .16); box-shadow: inset 0 0 0 1px rgba(79, 208, 122, .45); color: #6FE39A; }
.q-bad .q-ic { background: rgba(255, 110, 90, .16); box-shadow: inset 0 0 0 1px rgba(255, 110, 90, .45); color: #FF8A7A; }
.q-row p { margin: 0; color: #DCE7DE; font-size: 19px; line-height: 1.6; }
.q-row q { quotes: "\201C" "\201D"; display: inline-block; margin-top: 6px; padding: 4px 14px; border-radius: 14px 14px 14px 4px; background: #fff; color: #0B1D12; font-family: var(--f-display); font-size: 20px; font-style: normal; font-weight: 800; white-space: nowrap; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .6); }
.q-row mark { white-space: nowrap; padding: 0 2px; background: none; color: #FF8A7A; font-weight: 700; text-decoration: underline wavy rgba(255, 138, 122, .6); text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.q-punch { margin: 26px 0 0; color: #fff; font-family: var(--f-display); font-size: 25px; font-weight: 800; line-height: 1.3; letter-spacing: -.015em; }
.q-punch span { display: block; color: #FF8A7A; }
.q-copy .q-strong { display: block; margin: 26px 0 0; color: #fff; font-family: var(--f-display); font-size: 23px; font-weight: 800; line-height: 1.35; letter-spacing: -.01em; }
.q-strong span { color: var(--acid); text-decoration: underline; text-decoration-color: rgba(214, 242, 60, .5); text-decoration-thickness: 3px; text-underline-offset: 9px; text-decoration-skip-ink: none; }
.q-strong > .ic { display: inline-block; width: 34px; height: 34px; margin-left: 12px; vertical-align: -6px; padding: 7px; border-radius: 50%; background: var(--acid); color: var(--ink); box-shadow: 0 0 22px -4px rgba(214, 242, 60, .8); animation: q-nudge 1.6s ease-in-out infinite; }
@keyframes q-nudge { 50% { translate: 5px 0; } }
.q-fig { position: relative; margin: 0; }
/* the customer searching, beside what her phone shows (the phone mock on the right) */
.q-fig .qp { width: 320px; margin: 0 0 0 auto; z-index: 1; }
.q-fig .q-tag { margin: 26px 0 0 auto; transform: translateX(calc(-160px + 50%)); }
.q-who { position: absolute; left: -30px; bottom: -68px; z-index: 0; width: auto; height: 560px; filter: drop-shadow(0 0 40px rgba(111, 184, 255, .25)); pointer-events: none; }
/* the old statement → #14 connector would cross her; her pointer takes its place */
@media (min-width: 768px) { .quiet .qz-path { display: none; } }
/* the pointer from her phone to the screen */
.q-point { position: absolute; left: 128px; bottom: 190px; z-index: 2; width: calc(100% - 128px - 320px + 6px); height: 0; border-top: 2px dashed var(--acid); filter: drop-shadow(0 0 6px rgba(214, 242, 60, .7)); pointer-events: none; }
.q-point::before { content: ""; position: absolute; left: -7px; top: -8px; width: 12px; height: 12px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 4px rgba(214, 242, 60, .3); animation: st-blink 1.4s ease-in-out infinite; }
.q-point::after { content: ""; position: absolute; right: -2px; top: -7px; border: 6px solid transparent; border-left: 9px solid var(--acid); }
.q-fig::before { content: ""; position: absolute; left: auto; right: -10px; width: 340px; top: 50px; bottom: 90px; z-index: -1; border-radius: 40px; background: linear-gradient(140deg, #E2FCB6, var(--lime) 45%, var(--lime-2)); transform: rotate(-6deg); box-shadow: 0 50px 80px -44px rgba(140, 210, 60, .6); }
.q-fig::after { content: ""; position: absolute; right: -14px; bottom: 60px; z-index: -1; width: 140px; height: 120px; background: radial-gradient(rgba(255, 255, 255, .25) 1.4px, transparent 1.7px) 0 0 / 8px 8px; }
.qp { position: relative; width: 380px; max-width: 100%; margin: 0 auto; padding: 10px; border-radius: 50px; background: linear-gradient(150deg, #6B7A6E 0%, #2A332C 22%, #0E130F 62%, #33403A 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), inset 0 0 0 3px #070A08, 0 60px 90px -40px rgba(0, 0, 0, .8); }
.qp-btn { position: absolute; right: -3px; top: 150px; width: 4px; height: 70px; border-radius: 3px; background: #2A332C; }
.qp-screen { position: relative; padding-bottom: 20px; border-radius: 40px; background: #fff; }
.qp-island { position: absolute; left: 50%; top: 12px; z-index: 3; width: 86px; height: 24px; margin-left: -43px; border-radius: 14px; background: #0A0D0B; }
.qp-map { position: relative; overflow: hidden; border-radius: 40px 40px 0 0; height: 150px; background: url(../images/map-light.svg) center / 260% auto, #EEF2EA; }
.qp-you { position: absolute; left: 66%; top: 58%; width: 18px; height: 18px; border-radius: 50%; background: #1F7FE0; box-shadow: 0 0 0 4px #fff, 0 4px 10px rgba(0, 0, 0, .3); }
.qp-you::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; background: rgba(31, 127, 224, .2); animation: qp-pulse 2.4s ease-out infinite; }
@keyframes qp-pulse { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.qp-search { position: relative; display: flex; align-items: center; gap: 10px; margin: -26px 14px 0; padding: 13px 16px; border-radius: 999px; background: #fff; box-shadow: 0 12px 26px -12px rgba(11, 29, 18, .45), 0 0 0 1px rgba(11, 29, 18, .07); color: #6B7F70; font-size: 14px; line-height: 1.3; }
.qp-search .ic { flex: none; width: 18px; height: 18px; color: #1F7FE0; }
.qp-search b { color: #0B1D12; }
.qp-list { display: grid; gap: 9px; margin: 16px 14px 0; padding: 0; list-style: none; }
.qp-list li { display: flex; align-items: center; gap: 13px; padding: 13px 14px; border-radius: 18px; background: #F5F7FA; box-shadow: inset 0 0 0 1px rgba(11, 29, 18, .06); }
.qp-list li > i { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #1E9A45; color: #fff; font-family: var(--f-display); font-size: 16px; font-style: normal; font-weight: 800; }
.qp-list b { display: block; color: #0B1D12; font-size: 16.5px; font-weight: 600; line-height: 1.2; }
.qp-list small { display: block; margin-top: 3px; color: #6B7F70; font-size: 13.5px; }
.qp-list .dots { justify-content: center; padding: 2px 0; background: none; box-shadow: none; color: #9AA79E; font-size: 22px; letter-spacing: .3em; line-height: 1; }
.qp-list .r { position: relative; z-index: 2; margin: 4px -58px 0 -8px; padding: 15px 16px; border-radius: 20px; background: #FFF0EE; box-shadow: inset 0 0 0 2px #E5534B, 0 0 0 6px rgba(229, 83, 75, .14), 0 0 44px -6px rgba(229, 83, 75, .7), 0 22px 34px -16px rgba(80, 10, 0, .6); scale: 1.04; }
.qp-list .r > i { background: #D9443C; }
/* one moment: the results land one by one, then the business at #14 */
html.js .qp:not(.go) .qp-list li { opacity: 0; transform: translateY(16px); }
.qp .qp-list li { transition: opacity .45s ease, transform .55s var(--ease); }
.qp.go .qp-list li:nth-child(2) { transition-delay: .15s; }
.qp.go .qp-list li:nth-child(3) { transition-delay: .3s; }
.qp.go .qp-list li:nth-child(4) { transition-delay: .5s; }
.qp.go .qp-list li:nth-child(5) { transition-delay: .9s; transition-duration: .45s, .8s; transition-timing-function: ease, cubic-bezier(.3, 1.6, .5, 1); }
html.js .qp:not(.go) .qp-list .r { transform: translateY(60px); }
.q-tag { width: fit-content; margin: 26px auto 0; padding: 5px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); color: #9DB5A4; font-size: 13px; font-weight: 600; }

/* the statement band: a white sticker card, lime only on the payoff */
/* the bridge: problem (light, cut left corners) → answer (dark, cut right corners) */
.idea-band { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1.18fr); align-items: stretch; max-width: 1240px; margin: 72px auto 0; filter: drop-shadow(0 30px 34px rgba(11, 29, 18, .22)); }
.ib-a, .ib-b { display: flex; align-items: center; gap: 22px; margin: 0; font-family: var(--f-display); font-size: clamp(22px, 2.1vw, 31px); font-weight: 800; line-height: 1.2; letter-spacing: -.025em; }
.ib-a { padding: 34px 64px 34px 34px; background: linear-gradient(135deg, #FFFFFF, #F3F7EE); color: #0B1D12; clip-path: polygon(30px 0, 100% 0, 100% 100%, 30px 100%, 0 calc(100% - 30px), 0 30px); box-shadow: inset 0 0 0 1.5px rgba(11, 29, 18, .1); }
.ib-eye { position: relative; display: grid; place-items: center; flex: none; width: 58px; height: 58px; border-radius: 30%; background: #F1F4EE; box-shadow: inset 0 0 0 1.5px #D9E2D3; color: #7D8E82; }
.ib-eye .ic { width: 28px; height: 28px; }
.ib-eye::after { content: ""; position: absolute; left: 12px; right: 12px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: #E5534B; box-shadow: 0 0 0 2px #F1F4EE; transform: rotate(-42deg); }
.ib-b { position: relative; overflow: hidden; padding: 30px 40px 30px 64px; background: radial-gradient(360px 220px at 18% 50%, rgba(214, 242, 60, .2), transparent 70%), linear-gradient(rgba(198, 246, 137, .07) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(198, 246, 137, .07) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(150deg, #133A27, #0B1D12 70%); color: #fff; clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%); }
.ib-b em { font-style: normal; color: var(--acid); }
.ib-b .ib-ic { background: #050D08; box-shadow: 0 0 0 1.5px rgba(214, 242, 60, .45), 0 0 34px -6px rgba(214, 242, 60, .55); }
/* the arrow chip on the join */
.ib-go { position: relative; z-index: 2; align-self: center; display: grid; place-items: center; width: 60px; height: 60px; margin-left: -30px; border-radius: 50%; background: linear-gradient(180deg, #EEFF8A, var(--acid)); color: var(--ink); box-shadow: 0 0 0 7px #F6F8F4, 0 0 0 9px rgba(214, 242, 60, .5), 0 14px 26px -10px rgba(110, 170, 30, .8); }
.ib-go .ic { width: 26px; height: 26px; }
.ib-ic { display: grid; grid-template-columns: repeat(5, 14px); gap: 7px; flex: none; padding: 18px; border-radius: 28%; background: #0B1D12; box-shadow: 0 0 0 5px rgba(11, 29, 18, .08), 0 18px 30px -12px rgba(11, 29, 18, .6); transform: rotate(-8deg); }
.ib-ic i { --dc: rgba(255, 255, 255, .3); width: 14px; height: 14px; border-radius: 50%; background: var(--dc); box-shadow: 0 0 8px -1px var(--dc); }
.ib-ic .d { --dc: #8A968D; }
html.s5-anim .idea-band:not(.on) .ib-ic i { background: rgba(255, 255, 255, .16); box-shadow: none; }
html.s5-anim .ib-ic i { transition: background-color .3s, box-shadow .3s; }
.idea-band.on .ib-ic i { transition-delay: calc(var(--i) * 60ms); }
.ib-ic .g { --dc: #4FD07A; }
.ib-ic .a { --dc: #F0A42A; }
.ib-ic .r { --dc: #FF6B5E; }


/* ==========================================================
   SECTION 6 — INTRODUCING PROFITMAPS AI: three spotlights, three Ones
   Deep night-blue ground with grain. The headline's three beats are
   colour-coded (scan = sky, report = amber, opportunity = lime) and the
   stage acts them out under matching spotlights, left to right: you →
   the classic product mockup (box front left, laptop with the real scan,
   tablet with the branded report, phone) → the owner replying.
   ========================================================== */
.sec-intro { position: relative; isolation: isolate; margin-top: -80px; padding: 116px 0 104px; border-radius: 50% 50% 0 0 / 80px 80px 0 0; background: linear-gradient(180deg, #050A14 0, #050A14 80px, #08121E 30%, #0A1724 64%, #07111B 100%); color: var(--body-d); overflow-x: clip; }
/* the ground, cut to the dome */
.s6-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
/* the dome's lit rim */
.sec-intro::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%; border-radius: inherit; box-shadow: 0 -2px 0 rgba(214, 242, 60, .9), 0 -42px 80px -32px rgba(111, 184, 255, .7); pointer-events: none; }
/* film grain, static */
.s6-bg::after { content: ""; position: absolute; inset: 0; opacity: .5; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 220px 220px; }
/* soft light behind the logo */
.s6-halo { position: absolute; left: 50%; top: 150px; width: 1100px; height: 520px; margin-left: -550px; border-radius: 50%; background: radial-gradient(closest-side, rgba(214, 242, 60, .09), rgba(111, 184, 255, .05) 55%, transparent); }
.spk { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); color: #fff; opacity: .35; animation: spk-tw 4.6s ease-in-out var(--d) infinite; }
.spk.lime { color: var(--acid); }
/* the header's empty sides: a dashed scan radius each side + rank pins */
.s6-ring { position: absolute; top: 120px; width: 620px; aspect-ratio: 1; border-radius: 50%; border: 2px dashed rgba(214, 242, 60, .16); background: radial-gradient(closest-side, rgba(214, 242, 60, .06), transparent 70%); -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent); mask-image: radial-gradient(closest-side, #000 60%, transparent); }
.s6-ring::before { content: ""; position: absolute; inset: 22%; border-radius: 50%; border: 2px dashed rgba(214, 242, 60, .12); }
.sr-l { left: -300px; }
.sr-r { right: -300px; border-color: rgba(255, 107, 94, .16); background: radial-gradient(closest-side, rgba(255, 107, 94, .06), transparent 70%); }
.sr-r::before { border-color: rgba(255, 107, 94, .12); }
.s6-pin { box-shadow: 0 0 22px -4px var(--c); animation: s6-pin 5s ease-in-out var(--d, 0s) infinite; }
@keyframes s6-pin { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes spk-tw { 0%, 100% { opacity: .12; } 50% { opacity: .6; } }

/* header */
.s6-wrap { position: relative; z-index: 2; max-width: 1320px; }
.s6-head { text-align: center; }
.s6-brand { position: relative; display: grid; justify-items: center; margin: 0; }
/* generous padding: background-clip:text cuts anything outside the box (the I's swash, the g's tail) */
.s6-script { position: relative; z-index: 1; margin-bottom: -.66em; padding: .18em .6em .32em; font-family: "Mrs Saint Delafield", "Brush Script MT", cursive; font-size: clamp(54px, 6.3vw, 105px); font-weight: 400; line-height: 1; color: transparent; background: linear-gradient(180deg, rgba(255, 255, 255, .78) 30%, rgba(255, 255, 255, .14) 82%); -webkit-background-clip: text; background-clip: text; }
.s6-logo { position: relative; z-index: 2; display: block; width: clamp(220px, 36.4vw, 602px); height: auto; filter: drop-shadow(0 0 46px rgba(214, 242, 60, .2)); }
.s6-title { margin: 44px 0 0; font-family: var(--f-display); font-weight: 800; line-height: 1.04; letter-spacing: -.045em; color: #fff; }
.s6-title > span { display: block; }
.s6-title .t1 { font-size: clamp(32px, 4vw, 60px); }
/* beat colours: the same sky and amber light the stage */
.s6-title .b-scan, .s6-title .b-rep { padding: 0 .04em .06em; color: transparent; -webkit-background-clip: text; background-clip: text; }
.s6-title .b-scan { background-image: linear-gradient(180deg, #CFE7FF 10%, #6FB8FF 90%); }
.s6-title .b-rep { background-image: linear-gradient(180deg, #FFEBB8 10%, #FFB443 90%); }
.s6-title .t2 { margin: 12px 0 8px; font-size: clamp(44px, 6.2vw, 96px); }
.s6-title .t3 { font-size: clamp(30px, 3.8vw, 56px); color: #C8D6DE; }
.s6-title .hl { display: inline-block; padding: .02em .2em .08em; border-radius: .16em; background: linear-gradient(180deg, #F2FF9C, var(--acid)); color: var(--ink); transform: rotate(-1.5deg); box-shadow: 0 18px 40px -18px rgba(214, 242, 60, .6); }

/* ---------- the stage: one scene sized in cqw (1680px = 100cqw reference) ---------- */
.s6-stage { position: relative; z-index: 1; width: min(100%, 1920px); margin: 6px auto 0; aspect-ratio: 1680 / 800; container-type: inline-size; }
.st-light { position: absolute; inset: 0; pointer-events: none; }
/* spotlights: soft cones from lamps just under the wave, each aimed at its
   beat. --hd = the stage's distance from the section top (set by JS; the
   fallback is close at 1680), so the lamps stay under the wave and
   atan2() keeps every beam on target at any width. */
.s6-stage { --hd: 44cqw; }
.sbm { --a: 15deg; --oy: 14px; position: absolute; left: var(--x); top: calc(var(--oy) - var(--hd)); width: 120cqw; height: calc(var(--hd) + 52cqw); margin-left: -60cqw; transform-origin: 50% 0; transform: rotate(calc(atan2(var(--dx), calc(var(--hd) - var(--oy) + var(--ty))) * -1)); background: conic-gradient(from calc(180deg - var(--a)) at 50% 0, transparent 0deg, var(--c) calc(var(--a) * .55), var(--c) calc(var(--a) * 1.45), transparent calc(var(--a) * 2), transparent 360deg); -webkit-mask-image: linear-gradient(transparent 0, #000 24%, #000 80%, transparent 97%); mask-image: linear-gradient(transparent 0, #000 24%, #000 80%, transparent 97%); }
.sbm-1 { --oy: calc(60px + 6.2cqw); --x: 11cqw; --dx: 39cqw; --ty: 22cqw; --a: 14deg; --c: rgba(111, 184, 255, .2); }
.sbm-2 { --x: 50cqw; --dx: 15cqw; --ty: 20cqw; --a: 7.5deg; --c: rgba(255, 190, 80, .15); }
.sbm-3 { --oy: calc(60px + 6.2cqw); --x: 91cqw; --dx: -9cqw; --ty: 14cqw; --a: 9deg; --c: rgba(214, 242, 60, .18); }
/* where each beam starts: a broad, soft colour wash (no hard source),
   kept fully below the section top so it never cuts across the wave */
.lamp { position: absolute; top: calc(2px - var(--hd)); width: 30cqw; height: 13cqw; margin-left: -15cqw; border-radius: 50%; background: radial-gradient(closest-side, var(--c), transparent); }
.lamp-1 { top: calc(60px + 1cqw - var(--hd)); left: 11cqw; --c: rgba(111, 184, 255, .09); }
.lamp-2 { left: 50cqw; --c: rgba(255, 190, 80, .07); }
.lamp-3 { top: calc(60px + 1cqw - var(--hd)); left: 91cqw; --c: rgba(214, 242, 60, .08); }
/* the lit map-grid floor the whole scene stands on */
.st-grid { position: absolute; left: -12cqw; right: -12cqw; bottom: -7cqw; height: 30cqw; background: linear-gradient(rgba(214, 242, 60, .22) 1.5px, transparent 1.5px) 0 0 / 100% 2.6cqw, linear-gradient(90deg, rgba(214, 242, 60, .22) 1.5px, transparent 1.5px) 50% 0 / 4.4cqw 100%; transform: perspective(70cqw) rotateX(64deg); transform-origin: 50% 100%; -webkit-mask-image: linear-gradient(transparent, #000 55%), linear-gradient(90deg, transparent 4%, #000 26%, #000 74%, transparent 96%); -webkit-mask-composite: source-in; mask-image: linear-gradient(transparent, #000 55%), linear-gradient(90deg, transparent 4%, #000 26%, #000 74%, transparent 96%); mask-composite: intersect; }
/* spotlight fixtures at the section top, aimed down their beams */
.st-fix { --dx: 39cqw; --ty: 22cqw; --lc: #8EC8FF; position: absolute; left: var(--x); top: calc(60px - var(--hd)); z-index: 1; width: 5.2cqw; height: 6.4cqw; margin-left: -2.6cqw; transform-origin: 50% 0; transform: rotate(calc(atan2(var(--dx), calc(var(--hd) - 60px - 6.2cqw + var(--ty))) * -1)); }
.st-fix::before { content: ""; position: absolute; left: 50%; top: 0; width: .5cqw; height: 2cqw; margin-left: -.25cqw; background: linear-gradient(90deg, #3A4652, #151C23); }
.st-fix::after { content: ""; position: absolute; left: 0; right: 0; top: 1.8cqw; bottom: 0; border-radius: 1cqw 1cqw 42% 42% / 1cqw 1cqw 30% 30%; background: radial-gradient(70% 34% at 50% 100%, #fff, var(--lc) 45%, transparent 72%), linear-gradient(90deg, #2C3843, #0E151B 40%, #3B4855 72%, #141B22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 1.4cqw 2.6cqw -.4cqw var(--lc); }
.fx-1 { --x: 11cqw; --dx: 39cqw; --ty: 22cqw; --lc: #8EC8FF; }
.fx-3 { --x: 91cqw; --dx: -9cqw; --ty: 14cqw; --lc: #D6F23C; }
.st-floor { position: absolute; left: 4cqw; right: 4cqw; bottom: -4cqw; height: 16cqw; border-radius: 50%; background: radial-gradient(closest-side, rgba(150, 190, 220, .12), rgba(150, 190, 220, .04) 60%, transparent); }
.pool { position: absolute; bottom: -1cqw; height: 9cqw; border-radius: 50%; }
.pool-1 { left: 28cqw; width: 44cqw; background: radial-gradient(closest-side, rgba(111, 184, 255, .3), transparent); }
.pool-2 { left: 52cqw; width: 26cqw; background: radial-gradient(closest-side, rgba(255, 190, 80, .26), transparent); }
.pool-3 { left: 64cqw; width: 34cqw; background: radial-gradient(closest-side, rgba(214, 242, 60, .22), transparent); }

/* the people: you (left) and the owner (right), waist crop fading into the floor */
.st-person { position: absolute; bottom: 0; z-index: 1; width: 29cqw; height: auto; pointer-events: none; -webkit-mask-image: linear-gradient(#000 76%, transparent 98%); mask-image: linear-gradient(#000 76%, transparent 98%); }
.sp-you { left: -1.2cqw; }
.sp-owner { right: -1.2cqw; }
.st-who { position: absolute; bottom: 3cqw; z-index: 5; padding: .45cqw 1.1cqw; border-radius: 99px; background: rgba(8, 18, 30, .82); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: #DCE7EE; font-size: clamp(11px, .85cqw, 15px); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.w-you { left: 9cqw; }
.w-owner { right: 7.5cqw; }

/* beat tags */
.beat { position: absolute; }
/* the route 1 → 2 → 3 between the tags (drawn by JS), revealed when the lights come on */
.st-route { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.st-route path { fill: none; stroke: url(#stRouteG); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 9 8; filter: drop-shadow(0 0 5px rgba(255, 210, 120, .45)); }
html.js .s6-stage .st-route { clip-path: inset(0 100% 0 0); transition: clip-path 2.2s var(--ease) .2s; }
html.js .s6-stage.on .st-route { clip-path: inset(0 0 0 0); }
.s6-tag { position: absolute; left: 0; bottom: calc(100% + .9cqw); z-index: 2; display: inline-flex; align-items: center; gap: .7cqw; padding: .45cqw 1.3cqw .45cqw .45cqw; border-radius: 99px; background: rgba(8, 18, 30, .9); box-shadow: inset 0 0 0 1.5px var(--tc), 0 0 2.4cqw -.6cqw var(--tc), 0 1.2cqw 2.4cqw -1cqw #000; color: #fff; font-family: var(--f-display); font-size: clamp(13px, 1.12cqw, 20px); font-weight: 800; letter-spacing: -.01em; line-height: 1; white-space: nowrap; }
.s6-tag i { display: grid; place-items: center; width: 1.9cqw; height: 1.9cqw; min-width: 22px; min-height: 22px; border-radius: 50%; background: var(--tc); color: #07111B; font-size: .82em; font-style: normal; }

/* 1 · the scan, on the laptop (internals sized in the laptop's own cqw) */
.bt-scan { --tc: #6FB8FF; left: 30cqw; top: 9cqw; z-index: 2; width: 40cqw; }
.bt-scan .s6-tag { left: 1cqw; }
.lt { container-type: inline-size; }
.lt-lid { padding: 1.6cqw; border-radius: 2.8cqw 2.8cqw 1cqw 1cqw; background: linear-gradient(160deg, #3A4440, #1A201C 60%, #2C3531); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 5cqw 10cqw -3cqw rgba(0, 0, 0, .75), 0 0 10cqw -2cqw rgba(111, 184, 255, .5); }
.lt-bezel { position: relative; padding: 2.4cqw 1.6cqw 1.6cqw; border-radius: 1.8cqw; background: #050806; }
.lt-cam { position: absolute; left: 50%; top: .8cqw; width: .8cqw; height: .8cqw; margin-left: -.4cqw; border-radius: 50%; background: #1E2622; }
.lt-screen { display: flex; flex-direction: column; overflow: hidden; border-radius: .7cqw; aspect-ratio: 16 / 10; background: #0E1511; }
.lt-screen img { flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: 50% 0; }
.lt-base { position: relative; height: 2.6cqw; margin: 0 -6cqw; border-radius: 0 0 4.4cqw 4.4cqw; background: linear-gradient(180deg, #C9D2CD, #8C9690 60%, #5E6863); box-shadow: 0 3.4cqw 5cqw -1.6cqw rgba(0, 0, 0, .7); }
.lt-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 18cqw; height: 1cqw; margin-left: -9cqw; border-radius: 0 0 1.4cqw 1.4cqw; background: #6E7873; }
.sw-bar { display: flex; flex: none; align-items: center; gap: 1cqw; height: 3.6cqw; padding: 0 2cqw; background: #161E19; border-bottom: 1px solid rgba(255, 255, 255, .07); color: #9DB5A4; font-size: 1.9cqw; font-weight: 600; white-space: nowrap; }
.sw-bar i { width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: #FF6159; }
.sw-bar i:nth-child(2) { background: #FFBE2F; }
.sw-bar i:nth-child(3) { background: #2ACA44; }
.sw-bar span { margin-left: 1.2cqw; overflow: hidden; text-overflow: ellipsis; }

/* 2 · the branded report, on the tablet */
.bt-rep { --tc: #FFC25C; left: 60cqw; top: 10cqw; z-index: 3; width: 13.5cqw; transform: rotate(5deg); }
.bt-rep .s6-tag { left: 0; transform: rotate(-5deg); }
.tab { position: relative; padding: 4.2%; border-radius: 1.5cqw; background: linear-gradient(150deg, #4A554F, #1A201C 30%, #0B0F0D 70%, #2E3833); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), inset 0 0 0 .25cqw #070A08, 0 2.4cqw 4cqw -1.4cqw rgba(0, 0, 0, .85), 0 0 5cqw -1cqw rgba(255, 190, 80, .55); }
.tab-cam { position: absolute; left: 50%; top: 1.5%; width: 2%; aspect-ratio: 1; margin-left: -1%; border-radius: 50%; background: #26302B; }
.rp-page { position: relative; overflow: hidden; container-type: inline-size; aspect-ratio: 3 / 4; border-radius: .6cqw; background: #fff; }
.rp-band { display: flex; align-items: center; gap: 5.33cqw; padding: 6.67cqw 8cqw; background: linear-gradient(120deg, #3B5BDB, #7048E8); color: #fff; }
.rp-logo { display: grid; place-items: center; flex: none; width: 17.33cqw; height: 17.33cqw; border-radius: 30%; background: #fff; color: #3B5BDB; font-family: var(--f-display); font-size: 7.33cqw; font-weight: 800; box-shadow: 0 0 0 1.67cqw rgba(255, 194, 92, .9); }
.rp-band b { display: block; font-family: var(--f-display); font-size: 8.33cqw; line-height: 1.1; }
.rp-band small { display: block; font-size: 5.33cqw; opacity: .85; }
.rp-in { display: grid; gap: 3cqw; padding: 8cqw 8cqw 10.67cqw; color: #3E5446; }
.rp-for { font-size: 4.8cqw; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8A98A0; }
.rp-biz { font-family: var(--f-display); font-size: 7.9cqw; line-height: 1.1; letter-spacing: -.02em; color: #0B1D12; white-space: nowrap; }
.rp-kw { font-size: 5.47cqw; }
.rp-row { display: flex; align-items: center; gap: 6.67cqw; margin: 2.67cqw 0; }
.rp-grid { display: grid; grid-template-columns: repeat(5, 1fr); flex: none; gap: 2cqw; width: 40cqw; }
.rp-grid i { aspect-ratio: 1; border-radius: 50%; background: #B9C2BD; }
.rp-grid .g { background: #22A34A; }
.rp-grid .a { background: #F08C2A; }
.rp-grid .r { background: #E5534B; }
.rp-grid .me { box-shadow: 0 0 0 1cqw #fff, 0 0 0 2cqw #E9B21A; }
.rp-score { font-size: 5.2cqw; line-height: 1.25; }
.rp-score b { display: block; font-family: var(--f-display); font-size: 14.67cqw; line-height: 1; color: #1E9A45; }
.rp-h { display: flex; align-items: center; gap: 2.67cqw; margin-top: 2cqw; font-family: var(--f-display); font-size: 6.33cqw; font-weight: 800; color: #6C47E0; }
.rp-h .ic { width: 6.67cqw; height: 6.67cqw; }
.rp-line { display: block; height: 3.67cqw; border-radius: 3.67cqw; background: #E6EAF0; }
/* handwritten pointer to the agency logo, above the laptop so it never sits on screen text */
.rp-note { position: absolute; right: calc(100% - 1.4cqw); top: -3.6cqw; z-index: 3; display: flex; flex-direction: row-reverse; align-items: flex-start; gap: .3cqw; color: #FFB443; font: 700 clamp(18px, 1.75cqw, 31px)/1 var(--f-hand); white-space: nowrap; transform: rotate(-9deg); transform-origin: right top; filter: drop-shadow(0 0 .5cqw rgba(0, 0, 0, .9)) drop-shadow(0 0 1cqw rgba(255, 170, 60, .4)); }
.rp-note .hand { flex: none; width: 4.4cqw; height: 3.7cqw; margin-top: 1cqw; transform: scale(-1, -1); }
.rp-note span { margin-top: 0; }

/* the phone (mobile app), in front of the laptop and tablet */
.st-phone { position: absolute; left: 57cqw; bottom: 4.5cqw; z-index: 4; width: 8cqw; container-type: inline-size; }
.mp-body { position: relative; padding: 4.5cqw; border-radius: 19cqw; background: linear-gradient(150deg, #6B7A6E 0%, #2A332C 22%, #0E130F 62%, #33403A 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), inset 0 0 0 2cqw #070A08, 0 18cqw 30cqw -10cqw rgba(0, 0, 0, .85), 0 0 26cqw -6cqw rgba(255, 190, 80, .5); }
.mp-island { position: absolute; left: 50%; top: 8.5cqw; z-index: 2; width: 28cqw; height: 7.5cqw; margin-left: -14cqw; border-radius: 6cqw; background: #000; }
.mp-screen { overflow: hidden; padding-top: 15cqw; border-radius: 15cqw; background: #0E100F; aspect-ratio: 9 / 19; }
.mp-screen img { display: block; width: 100%; height: auto; }

/* the box on its logo-mark pedestal, front left (classic mockup order) */
.st-box { position: absolute; left: 25.5cqw; bottom: 2.4cqw; z-index: 5; width: 17.5cqw; container-type: inline-size; }
.st-box img { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 12cqw 10cqw rgba(0, 0, 0, .65)) drop-shadow(0 0 15cqw rgba(198, 246, 137, .3)); }
/* a lit riser in the logo's squircle shape, lying flat under the box */
.st-ped { position: absolute; left: 50%; bottom: -53cqw; width: 125cqw; height: 125cqw; margin-left: -62.5cqw; border-radius: 30%; background: radial-gradient(closest-side, rgba(214, 242, 60, .42), rgba(214, 242, 60, .12) 62%, rgba(10, 24, 18, .9) 64%, rgba(10, 24, 18, .9)); transform: perspective(300cqw) rotateX(77deg); box-shadow: inset 0 0 0 1.6cqw rgba(214, 242, 60, .95), inset 0 0 12cqw rgba(214, 242, 60, .55), 0 0 25cqw rgba(214, 242, 60, .4); }
.st-ped::after { content: ""; position: absolute; inset: 11cqw; border-radius: 30%; box-shadow: inset 0 0 0 0.7cqw rgba(214, 242, 60, .45); }

/* 3 · the owner replies */
.bt-say { --tc: var(--acid); left: 73.5cqw; top: 4.6cqw; z-index: 4; }
.say { position: relative; display: flex; align-items: center; gap: 1cqw; padding: 1.3cqw 2.2cqw 1.4cqw 1.7cqw; border-radius: 1.6cqw; background: #fff; color: var(--ink); box-shadow: 0 0 0 .3cqw rgba(214, 242, 60, .9), 0 0 5cqw -.6cqw rgba(214, 242, 60, .6), 0 2cqw 3.6cqw -1.4cqw #000; animation: say-bob 6s ease-in-out infinite, say-glow 2.4s ease-in-out infinite; }
@keyframes say-glow { 50% { box-shadow: 0 0 0 .45cqw rgba(214, 242, 60, 1), 0 0 7cqw 0 rgba(214, 242, 60, .75), 0 2cqw 3.6cqw -1.4cqw #000; } }
/* the "new message" dot */
.say::before { content: ""; position: absolute; right: -.5cqw; top: -.5cqw; z-index: 2; width: 1.4cqw; height: 1.4cqw; min-width: 12px; min-height: 12px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 .3cqw #fff, 0 0 1.2cqw rgba(34, 197, 94, .9); animation: say-dot2 1.6s ease-in-out infinite; }
@keyframes say-dot2 { 50% { transform: scale(1.25); } }
html.js .s6-stage:not(.said) .say::before { opacity: 0; }
/* tail down to the owner's head */
.say::after { content: ""; position: absolute; left: 66%; bottom: -1.5cqw; width: 2.4cqw; height: 1.7cqw; background: #fff; clip-path: polygon(0 0, 100% 0, 62% 100%); }
@keyframes say-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.6cqw); } }
.say-av { display: none; flex: none; width: 3.4cqw; height: 3.4cqw; border-radius: 50%; object-fit: cover; }
.say-in { display: grid; }
.say-in small { color: #5C6B60; font-size: clamp(11px, .82cqw, 14px); font-weight: 700; letter-spacing: .04em; }
.say-msg, .say-typing { grid-area: 2 / 1; align-self: center; }
.say-msg { font-family: var(--f-display); font-size: clamp(18px, 2.05cqw, 36px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; white-space: nowrap; }
.say-typing { display: flex; gap: .4cqw; visibility: hidden; }
.say-typing i { width: .7cqw; height: .7cqw; min-width: 7px; min-height: 7px; border-radius: 50%; background: #98A69C; }

/* one moment on view (JS): spotlights switch on one by one, tags land,
   then the owner types and replies. No JS = everything already on. */
html.js .s6-stage .sbm, html.js .s6-stage .lamp, html.js .s6-stage .s6-tag { transition: opacity .9s var(--ease), transform .7s var(--ease); }
html.js .s6-stage:not(.on) .sbm, html.js .s6-stage:not(.on) .lamp { opacity: 0; }
html.js .s6-stage:not(.on) .s6-tag { opacity: 0; translate: 0 .8cqw; }
html.js .s6-stage .s6-tag { transition: opacity .6s var(--ease), translate .6s var(--ease); }
html.js .s6-stage .sbm-2, html.js .s6-stage .lamp-2, html.js .s6-stage .bt-rep .s6-tag { transition-delay: .7s; }
html.js .s6-stage .sbm-3, html.js .s6-stage .lamp-3, html.js .s6-stage .bt-say .s6-tag { transition-delay: 1.4s; }
html.js .s6-stage:not(.said) .say-msg { visibility: hidden; }
html.js .s6-stage.on:not(.said) .say-typing { visibility: visible; }
html.js .s6-stage.on:not(.said) .say-typing i { animation: say-dot 1s ease-in-out infinite; }
.say-typing i:nth-child(2) { animation-delay: .15s !important; }
.say-typing i:nth-child(3) { animation-delay: .3s !important; }
@keyframes say-dot { 0%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-.35cqw); opacity: 1; } }
html.js .s6-stage.said .say-msg { animation: say-pop .45s var(--ease); }
@keyframes say-pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }


/* small laptops: the bubble keeps a readable minimum size, so give it room */
@media (min-width: 900px) and (max-width: 1279px) {
    .bt-say { left: 75.5cqw; top: 1.4cqw; }
}
/* phones: smaller header */
@media (max-width: 767px) {
    .sec-intro { margin-top: -40px; padding: 60px 0 72px; border-radius: 50% 50% 0 0 / 40px 40px 0 0; }
    .s6-halo { top: 70px; width: 640px; height: 380px; margin-left: -320px; }
    .s6-script { margin-bottom: -.52em; font-size: 14.7vw; }
    .s6-logo { width: 60vw; }
    .s6-title { margin-top: 34px; }
    .s6-title .t1 { font-size: 7.4vw; }
    .s6-title .t2 { font-size: 10.6vw; }
    .s6-title .t3 { font-size: 7.2vw; }
}
/* below 900px the scene is too tight side by side, so it becomes a short
   story you scroll: 1 the scan, 2 the report popping out of the box,
   3 the owner's reply (with his face, since the people are hidden) */
@media (max-width: 899px) {
    .s6-stage { display: grid; grid-template-areas: "scan" "pair" "say"; aspect-ratio: auto; width: 100%; max-width: 600px; margin-top: 22px; padding: 0 16px; }
    .st-person, .st-who, .rp-note, .sbm, .lamp, .spk, .st-fix, .st-route, .s6-pin, .s6-ring { display: none; }
    .st-grid { bottom: auto; top: 30%; height: 60%; }
    .beat, .st-box { position: relative; left: auto; top: auto; bottom: auto; }
    .s6-tag { gap: 8px; padding: 5px 14px 5px 5px; font-size: 15px; box-shadow: inset 0 0 0 1.5px var(--tc), 0 0 18px -6px var(--tc), 0 10px 20px -10px #000; }
    .s6-tag i { width: 24px; height: 24px; }
    .bt-scan .s6-tag, .bt-rep .s6-tag { left: 0; }
    .bt-scan { grid-area: scan; width: auto; margin-top: 52px; }
    .bt-scan .s6-tag { bottom: calc(100% + 12px); }
    .lt { width: 90%; margin: 0 auto; }
    .bt-rep { grid-area: pair; z-index: 2; align-self: start; justify-self: end; width: 46cqw; margin: 64px 3cqw 0 0; transform: rotate(5deg); }
    .tab { border-radius: 16px; }
    .rp-page { border-radius: 8px; }
    .bt-rep .s6-tag { bottom: calc(100% + 10px); transform: rotate(-5deg); }
    .st-box { grid-area: pair; z-index: 3; align-self: start; justify-self: start; width: 46cqw; margin: calc(64px + 32cqw) 0 12cqw 5cqw; }
    .st-phone { grid-area: pair; position: relative; left: auto; bottom: auto; z-index: 4; align-self: end; justify-self: end; width: 21cqw; margin: 0 5cqw 9cqw 0; }
    .bt-say { grid-area: say; justify-self: center; margin-top: 58px; }
    .bt-say .s6-tag { left: 50%; translate: -50% 0; }
    html.js .s6-stage:not(.on) .bt-say .s6-tag { translate: -50% 10px; }
    .say { gap: 12px; padding: 12px 20px 12px 12px; border-radius: 22px 22px 22px 6px; box-shadow: 0 0 0 3px rgba(214, 242, 60, .9), 0 0 40px -6px rgba(214, 242, 60, .55), 0 18px 34px -14px #000; animation: none; }
    .say::after { display: none; }
    .say-av { display: block; width: 50px; height: 50px; }
    .say-typing { gap: 5px; }
    .say-typing i { width: 8px; height: 8px; }
    .st-floor { left: -10%; right: -10%; bottom: auto; top: 50%; height: 60%; }
    .pool-1 { left: 0; bottom: auto; top: 10%; width: 100%; height: 34%; }
    .pool-2 { left: 0; bottom: auto; top: 50%; width: 100%; height: 34%; }
    .pool-3 { left: 10%; bottom: -6%; width: 80%; height: 22%; }
}


/* ==========================================================
   SECTION 7 — TRY IT YOURSELF (light)
   A light wave out of the dark intro; one white demo console (dark step
   rail + playground with a stopwatch dial). Step colours carry on from
   section 6: pick = violet, scan = sky, report = amber, offer = green.
   ========================================================== */
.sec-try { position: relative; isolation: isolate; padding: 0 0 150px; background: linear-gradient(180deg, #EAF6DF 0, #F3F8EE 18%, #F7F8F4 36%, #EEF2FB 58%, #F2F6EC 82%, #F5F8F2 100%); color: #3E5446; }
.s7-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background:
    radial-gradient(620px 520px at 0 22%, rgba(139, 85, 238, .16), transparent 70%),
    radial-gradient(620px 520px at 100% 26%, rgba(47, 124, 246, .15), transparent 70%),
    radial-gradient(700px 520px at 0 64%, rgba(79, 148, 255, .14), transparent 70%),
    radial-gradient(700px 520px at 100% 60%, rgba(198, 246, 137, .3), transparent 70%),
    radial-gradient(620px 420px at 6% 92%, rgba(255, 186, 92, .16), transparent 70%),
    radial-gradient(620px 420px at 96% 94%, rgba(60, 196, 106, .14), transparent 70%); }
/* the console's halo follows the active step colour */
.s7-halo { --hc: rgba(139, 85, 238, .22); position: absolute; left: 50%; top: 180px; width: 1500px; height: 1000px; margin-left: -750px; border-radius: 50%; background: radial-gradient(closest-side, var(--hc), transparent 72%); transition: background .6s; }
.sec-try:has(.sim[data-step="2"]) .s7-halo { --hc: rgba(47, 124, 246, .22); }
.sec-try:has(.sim[data-step="3"]) .s7-halo { --hc: rgba(242, 165, 43, .22); }
.sec-try:has(.sim[data-step="4"]) .s7-halo { --hc: rgba(60, 196, 106, .24); }
/* graph-paper grid: fine 40px cells, a stronger line every 160px with a small
   green crosshair where they meet; fades at the sides, top and bottom */
/* a faint dot grid at the sides only (never behind the copy or the cards) */
.s7-bg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(11, 29, 18, .16) 1.1px, transparent 1.6px) 0 0 / 26px 26px; -webkit-mask-image: linear-gradient(90deg, #000, transparent 18%, transparent 82%, #000), linear-gradient(transparent 160px, #000 340px, #000 calc(100% - 200px), transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, #000, transparent 18%, transparent 82%, #000), linear-gradient(transparent 160px, #000 340px, #000 calc(100% - 200px), transparent); mask-composite: intersect; }
.s7-wrap { position: relative; z-index: 1; max-width: 1300px; }
.s7-head { text-align: center; }
/* the headline now sits inside the white console card (LME) */
.sim > .s7-head { padding: 26px 24px 6px; }
.sim > .s7-head .s7-sub::before { display: none; }
/* the join into the band: a lit lime line under the chevron badge */
.seam-band::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--acid) 18%, var(--acid) 82%, transparent); box-shadow: 0 0 16px rgba(214, 242, 60, .7); }
/* LME word band: the four steps, full bleed, the console card over its lower half */
.s7-band { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: .3em; width: 100vw; margin: 0 0 0 calc(50% - 50vw); padding: 74px 16px 112px; background: radial-gradient(60% 120% at 50% 0, rgba(198, 246, 137, .14), transparent 70%), linear-gradient(180deg, #0F2A1C, #0B1D12); font-family: var(--f-display); font-size: clamp(44px, 7.6vw, 124px); font-weight: 800; line-height: 1; letter-spacing: -.035em; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.s7-band { border-radius: 0 0 50% 50% / 0 0 70px 70px; box-shadow: 0 2px 0 rgba(214, 242, 60, .85), 0 26px 60px -26px rgba(198, 246, 137, .7); }
.s7-band span { background: linear-gradient(180deg, var(--a), var(--b)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .04em; }
.s7-band .w1 { --a: #D6C2FF; --b: #8B55EE; }
.s7-band .w2 { --a: #BBD9FF; --b: #4F94FF; }
.s7-band .w3 { --a: #FFE3A3; --b: #F2A52B; }
.s7-band .w4 { --a: #C8F7CF; --b: #3CC46A; }
.s7-band i { color: var(--acid); font-size: .42em; font-style: normal; filter: drop-shadow(0 0 10px rgba(214, 242, 60, .7)); }
.s7-title { margin: 0; font-family: var(--f-display); font-size: clamp(40px, 5.4vw, 82px); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; color: #0B1D12; }
.s7-title .mk { white-space: nowrap; padding: 0 .06em; background: linear-gradient(transparent 58%, rgba(198, 246, 137, .95) 58%, rgba(198, 246, 137, .95) 90%, transparent 90%); }
.s7-sub { max-width: 42em; margin: 18px auto 0; font-size: 20px; line-height: 1.55; text-wrap: balance; }
.s7-note { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; margin: 22px 0 0; color: #3E5446; font-size: 15px; text-align: center; }
.s7-sub, .s7-note, .rl-copy { position: relative; isolation: isolate; }
/* a feathered patch of the section's paper colour behind text that sits on the grid,
   so lines and crosshairs never run through the words */
.s7-sub::before, .s7-note::before, .rl-copy::before { content: ""; position: absolute; inset: -6px -14px; z-index: -1; border-radius: 26px; background: rgba(246, 249, 243, .9); box-shadow: 0 0 34px 26px rgba(246, 249, 243, .9); pointer-events: none; }
.s7-note span { padding: 4px 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px #D8E3D0; color: #0B1D12; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

/* side props (>=1400): a stopwatch top-left and a tap cursor bottom-right */
.s7-deco { display: none; }
@media (min-width: 1400px) {
    .s7-deco { display: block; position: absolute; inset: 0; pointer-events: none; }
    .s7-watch { position: absolute; left: calc(50% - 760px); top: 300px; width: 150px; height: auto; transform: rotate(-12deg); filter: drop-shadow(0 26px 30px rgba(11, 29, 18, .22)); animation: s7-float 7s ease-in-out infinite; }
    .s7-watch rect { fill: #0B1D12; }
    .w-face { fill: #fff; stroke: #0B1D12; stroke-width: 7; }
    .w-arc { fill: none; stroke: var(--lime-2); stroke-width: 14; stroke-dasharray: 50 100; transform: rotate(-90deg); transform-origin: 60px 80px; }
    .w-ticks { stroke: #0B1D12; stroke-width: 3.2; stroke-linecap: round; opacity: .55; }
    .w-hand { stroke: #0B1D12; stroke-width: 5; stroke-linecap: round; }
    .w-hub { fill: #0B1D12; }
    .s7-tap { position: absolute; right: calc(50% - 736px); top: 780px; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: #fff; box-shadow: 0 24px 40px -18px rgba(11, 29, 18, .45), inset 0 0 0 1.5px #E1E9D9; color: #0B1D12; transform: rotate(-14deg); animation: s7-float 8s ease-in-out -2s infinite; }
    .s7-tap .ic { position: relative; width: 38px; height: 38px; transform: scaleX(-1); }
    .s7-tap i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--lime-2); animation: s7-ripple 2.4s ease-out infinite; }
    .s7-tap i + i { animation-delay: 1.2s; }
}
@keyframes s7-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes s7-ripple { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }

/* ---------- the demo console ---------- */
.sim { --sc: #8B55EE; --prog: 0; position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: 1240px; margin: -92px auto 0; padding: 18px; border-radius: 36px; background: #fff; box-shadow: 0 0 0 1.5px #E1E9D9, 0 60px 100px -60px rgba(11, 29, 18, .5), 0 24px 44px -34px rgba(11, 29, 18, .3); }
.sim[data-step="2"] { --sc: #2F7CF6; --prog: .3333; }
.sim[data-step="3"] { --sc: #E08A00; --prog: .6667; }
.sim[data-step="4"] { --sc: #1E9A45; --prog: 1; }

/* the step rail */
.sim-rail { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; margin: 0; padding: 20px 14px; border-radius: 26px; background: radial-gradient(260px 200px at 0 0, rgba(198, 246, 137, .12), transparent 70%), linear-gradient(170deg, #0E3626, #07221A); list-style: none; }
.sim-rail li { --c: #8B55EE; position: relative; }
.sim-rail li:nth-child(2) { --c: #4F94FF; }
.sim-rail li:nth-child(3) { --c: #F2A52B; }
.sim-rail li:nth-child(4) { --c: #3CC46A; }
/* the timeline: a dashed track from the first disc to the last, filled
   (violet → sky → amber → green) as far as the current step */
.sim-rail::before, .sim-rail::after { content: ""; position: absolute; left: 49px; top: 56px; width: 2px; }
.sim-rail::before { bottom: 56px; border-left: 2px dashed rgba(255, 255, 255, .16); }
.sim-rail::after { left: 48px; width: 4px; height: calc((100% - 112px) * var(--prog)); border-radius: 4px; background: linear-gradient(#8B55EE, #4F94FF 40%, #F2A52B 72%, #3CC46A); background-size: 100% calc(100% / max(var(--prog), .01)); transition: height .6s var(--ease); }
.sim-rail button { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 14px; border: 0; border-radius: 18px; background: transparent; color: #CFE0D4; font: inherit; text-align: left; cursor: pointer; transition: background .25s var(--ease), box-shadow .25s var(--ease); }
.sim-rail button:hover { background: rgba(255, 255, 255, .05); }
.sim-rail .n { position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: #0B2A1D; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2); color: #fff; font-family: var(--f-display); font-size: 18px; font-weight: 800; transition: background .3s, box-shadow .3s, color .3s; }
.sim-rail .n i { font-style: normal; }
.sim-rail .n .ic { display: none; width: 20px; height: 20px; }
.sim-rail .st-t b { display: block; color: #fff; font-family: var(--f-display); font-size: 17.5px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.sim-rail .st-t small { display: block; margin-top: 2px; color: #93B29D; font-size: 14px; }
.sim-rail button.on { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 70%, transparent), 0 14px 30px -18px var(--c); }
.sim-rail button.on .n { background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent), 0 8px 18px -6px var(--c); color: #fff; transform: rotate(-6deg); }
.sim-rail button.done .n { background: color-mix(in srgb, var(--c) 22%, #0B2A1D); box-shadow: inset 0 0 0 1.5px var(--c); color: var(--c); }
.sim-rail button.done .n i { display: none; }
.sim-rail button.done .n .ic { display: block; }

/* LME-style: the four steps as one chevron chain (step colours), the active one
   filled and lifted, done ones ticked; a STEP 0n label over each title */
.sim-rail { flex-direction: row; justify-content: stretch; gap: 0; padding: 0; border-radius: 0; background: none; }
.sim-rail::before, .sim-rail::after { display: none; }
.sim-rail li { --c2: #6D3FD8; flex: 1 1 0; min-width: 0; transition: transform .3s var(--ease), filter .3s; }
.sim-rail li:nth-child(2) { --c2: #2F6FE0; }
.sim-rail li:nth-child(3) { --c2: #D9870B; }
.sim-rail li:nth-child(4) { --c2: #1E9A45; }
.sim-rail li + li { margin-left: -14px; }
.sim-rail li:has(button.on) { z-index: 2; transform: translateY(-4px); filter: drop-shadow(0 16px 18px color-mix(in srgb, var(--c) 45%, transparent)); }
.sim-rail button { height: 100%; min-height: 98px; gap: 14px; padding: 14px 40px 14px 44px; border-radius: 0; background: color-mix(in srgb, var(--c) 9%, #fff); box-shadow: none; color: #0B1D12; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%, 28px 50%); transition: background .3s; }
.sim-rail li:first-child button { padding-left: 20px; border-radius: 22px 0 0 22px; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%); }
.sim-rail li:last-child button { padding-right: 22px; border-radius: 0 22px 22px 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 28px 50%); }
.sim-rail button:hover { background: color-mix(in srgb, var(--c) 16%, #fff); }
.sim-rail button.done { background: color-mix(in srgb, var(--c) 20%, #fff); }
.sim-rail button.on, .sim-rail button.on:hover { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 72%, #fff), var(--c) 55%, var(--c2)); box-shadow: none; color: #fff; }
.sim-rail .n { width: 46px; height: 46px; border-radius: 30%; background: #fff; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 45%, transparent); color: var(--c2); font-size: 19px; }
.sim-rail button.on .n { background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .28), 0 8px 18px -6px rgba(0, 0, 0, .35); color: var(--c2); transform: rotate(-6deg); }
.sim-rail button.done .n { background: var(--c); box-shadow: none; color: #fff; }
.sim-rail .st-t b { color: inherit; font-size: 18px; }
.sim-rail .st-t small { color: color-mix(in srgb, currentColor 62%, transparent); font-size: 13.5px; }
.sim-rail button.on .st-t small { color: rgba(255, 255, 255, .85); }
.sim-rail .st-t::before { display: block; margin-bottom: 3px; color: var(--c2); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.sim-rail button.on .st-t::before { color: rgba(255, 255, 255, .9); }
.sim-rail li:nth-child(1) .st-t::before { content: "Step 01"; }
.sim-rail li:nth-child(2) .st-t::before { content: "Step 02"; }
.sim-rail li:nth-child(3) .st-t::before { content: "Step 03"; }
.sim-rail li:nth-child(4) .st-t::before { content: "Step 04"; }
/* the step's big outline number, top right of the stage (LME step head) */
.sim-stage::after { content: "01"; position: absolute; right: 170px; top: 12px; z-index: 0; color: transparent; font-family: var(--f-display); font-size: 62px; font-weight: 800; line-height: .8; letter-spacing: -.05em; -webkit-text-stroke: 2px color-mix(in srgb, var(--sc) 35%, transparent); pointer-events: none; transition: -webkit-text-stroke-color .3s; }
.sim[data-step="2"] .sim-stage::after { content: "02"; }
.sim[data-step="3"] .sim-stage::after { content: "03"; }
.sim[data-step="4"] .sim-stage::after { content: "04"; }
.sim-body { position: relative; z-index: 1; display: grid; align-content: center; min-height: 0; }

/* the playground */
.sim-stage { position: relative; display: flex; flex-direction: column; min-width: 0; height: var(--stage-h, 712px); padding: 20px 30px 34px; border-radius: 26px; background: linear-gradient(180deg, #F8FBF5, #F1F6EC); box-shadow: inset 0 0 0 1px #E3ECDC; }
.sim-head { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1.5px dashed #D8E3D0; }
.sim-dial { position: relative; display: grid; place-items: center; flex: none; width: 46px; height: 46px; color: var(--sc); transition: color .3s; }
.sim-dial svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.sim-dial circle { fill: none; stroke-width: 4.5; }
.sim-dial .trk { stroke: #E1E9DA; }
.sim-dial .bar { stroke: var(--sc); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 75; transition: stroke-dashoffset .6s var(--ease), stroke .3s; }
.sim[data-step="2"] .sim-dial .bar { stroke-dashoffset: 50; }
.sim[data-step="3"] .sim-dial .bar { stroke-dashoffset: 25; }
.sim[data-step="4"] .sim-dial .bar { stroke-dashoffset: 0; }
.sim-dial > .ic { width: 19px; height: 19px; }
.sim-title { flex: 1; min-width: 0; color: #3E5446; font-size: 15.5px; font-weight: 700; }
.sim-reset { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px #D5E0CD; color: #0B1D12; font: 700 14.5px var(--f-body); cursor: pointer; transition: box-shadow .2s, transform .2s; }
.sim-reset .ic { width: 16px; height: 16px; }
.sim-reset:hover { box-shadow: inset 0 0 0 1.5px #0B1D12; }
.sim-body { flex: 1; }
.sx { width: 100%; }

/* step layout: copy on the left, the visual on the right */
.sx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 44px; align-items: center; animation: sx-in .45s var(--ease); }
.sx.s1 { grid-template-columns: 1fr; align-items: start; }
.sx.s1 .sx-vis { margin-top: 26px; }
.s3 .sx-rest { min-height: 72px; }
@keyframes sx-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sx-top h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; color: #0B1D12; font-family: var(--f-display); font-size: 34px; font-weight: 800; line-height: 1.08; letter-spacing: -.03em; outline: none; }
.sx-top p { margin: 0; color: #3E5446; font-size: 17.5px; line-height: 1.55; }
.sx-rest p { margin: 18px 0 0; color: #3E5446; font-size: 16.5px; line-height: 1.55; }
.sx-rest p b { color: #0B1D12; }
.sim { scroll-margin-top: 18px; }

/* step 1: the six sample businesses */
.bizgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.biz { --bc: #2F7CF6; position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 160px; padding: 20px; border: 0; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1.5px #E1E9D9, 0 12px 26px -20px rgba(11, 29, 18, .45); color: #0B1D12; font: inherit; text-align: left; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.biz:hover, .biz:focus-visible { transform: translateY(-3px); box-shadow: inset 0 0 0 2px var(--bc), 0 22px 34px -20px color-mix(in srgb, var(--bc) 70%, transparent); }
.biz-ic, .sx-top h3 .biz-ic { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 17px; background: linear-gradient(155deg, color-mix(in srgb, var(--bc) 55%, #fff), var(--bc)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 18px -10px var(--bc); color: #fff; transform: rotate(-5deg); }
.biz-ic .ic { width: 26px; height: 26px; }
.biz b { display: block; font-family: var(--f-display); font-size: 18px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.biz small { display: block; margin-top: 3px; color: #536559; font-size: 14px; }
.biz-tx { margin-top: auto; padding-right: 46px; }
.biz b { font-size: 20px; }
/* the business's map before the scan: grey spots, its own spot in its colour */
.biz-dots { position: absolute; right: 16px; top: 16px; display: grid; grid-template-columns: repeat(7, 7px); gap: 2px; padding: 7px; border-radius: 14px; background: url(../images/map-light.svg) center / 260% auto, #EEF2EA; box-shadow: inset 0 0 0 1px rgba(11, 29, 18, .08); }
.biz-dots i { width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.biz-dots i.me { position: relative; background: var(--bc); box-shadow: 0 0 0 2.5px #fff, 0 0 12px 3px color-mix(in srgb, var(--bc) 70%, transparent); scale: 1.5; }
.biz-dots i.me::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--bc); animation: biz-ping 2s ease-out infinite; }
@keyframes biz-ping { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
/* "tap here" on the first sample */
.bizgrid > .biz:first-child::after { content: ""; position: absolute; right: 2px; bottom: -12px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1D12' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 14a8 8 0 0 1-8 8M18 11v-1a2 2 0 0 0-4 0M14 10V9a2 2 0 0 0-4 0v1M10 9.5V4a2 2 0 0 0-4 0v10'/%3E%3Cpath d='M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.9-6-2.3l-3.6-3.6a2 2 0 0 1 2.8-2.8L7 15'/%3E%3C/svg%3E") center / 22px no-repeat; box-shadow: 0 0 0 3px var(--bc), 0 12px 22px -8px rgba(11, 29, 18, .45); animation: biz-tap 1.6s ease-in-out infinite; pointer-events: none; }
@keyframes biz-tap { 0%, 100% { transform: translate(0, 0); box-shadow: 0 0 0 3px var(--bc), 0 0 0 3px color-mix(in srgb, var(--bc) 40%, transparent), 0 12px 22px -8px rgba(11, 29, 18, .45); } 50% { transform: translate(-6px, -6px); box-shadow: 0 0 0 3px var(--bc), 0 0 0 12px color-mix(in srgb, var(--bc) 0%, transparent), 0 12px 22px -8px rgba(11, 29, 18, .45); } }
.biz-go { position: absolute; right: 18px; bottom: 18px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: color-mix(in srgb, var(--bc) 12%, #fff); color: var(--bc); transition: background .25s, color .25s, transform .25s var(--ease); }
.biz-go .ic { width: 18px; height: 18px; }
.biz:hover .biz-go, .biz:focus-visible .biz-go { background: var(--bc); color: #fff; transform: translateX(2px); }

/* step 2: the scan */
.sx-top h3 .biz-ic { width: 46px; height: 46px; border-radius: 14px; }
.sx-top h3 .biz-ic .ic { width: 22px; height: 22px; }
.sx-kw { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sx-kw .kw { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 11px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sc) 35%, #E1E9D9); color: #0B1D12; font-weight: 700; }
.sx-kw .kw .ic { width: 16px; height: 16px; color: var(--sc); }
.sx-kw > span:last-child { color: #536559; font-size: 15px; }
.scan-box { margin-top: 22px; padding: 14px 16px 16px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1.5px #E1E9D9; }
.sx-rest p.sx-note { display: flex; align-items: flex-start; gap: 12px; margin: 16px 0 0; padding: 12px 16px 12px 12px; border-radius: 16px; background: #EAF7EE; box-shadow: inset 0 0 0 1.5px rgba(30, 154, 69, .25); color: #1E3B29; font-size: 15.5px; }
.sx-note > .ic { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 10px; background: #1E9A45; color: #fff; }
.sx-rest p.sx-note.bad { background: #FFF0EE; box-shadow: inset 0 0 0 1.5px rgba(217, 63, 54, .25); color: #4A1F1B; }
.sx-note.bad > .ic { background: #D93F36; }
.scan-st { display: flex; align-items: center; gap: 10px; margin: 0; color: #0B1D12; font-size: 17px; font-weight: 700; }
.scan-st i { width: 10px; height: 10px; border-radius: 50%; background: var(--sc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sc) 22%, transparent); animation: st-blink 1s ease-in-out infinite; }
.scan-st.done i { background: #1E9A45; box-shadow: 0 0 0 4px rgba(30, 154, 69, .2); animation: none; }
@keyframes st-blink { 50% { opacity: .35; } }
.meter { height: 10px; margin-top: 12px; overflow: hidden; border-radius: 10px; background: #E1E9DA; }
.meter i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7DB4FF, var(--sc)); transition: width .2s linear; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.stats div { padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1.5px #E1E9D9; animation: sx-in .4s var(--ease) both; }
.stats div:nth-child(2) { animation-delay: .08s; }
.stats div:nth-child(3) { animation-delay: .16s; }
.stats b { display: block; font-family: var(--f-display); font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: #0B1D12; }
.stats b.g { color: #1E9A45; }
.stats b.r { color: #D93F36; }
.stats span { display: block; margin-top: 5px; color: #3E5446; font-size: 13.5px; line-height: 1.3; }
.sim-btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; margin-top: 20px; padding: 0 24px; border: 0; border-radius: 999px; background: #0B1D12; color: #fff; font: 700 16px var(--f-body); cursor: pointer; box-shadow: 0 14px 26px -14px rgba(11, 29, 18, .8); transition: transform .2s var(--ease), background .2s; animation: sx-in .4s var(--ease) both; }
.sim-btn .ic { width: 18px; height: 18px; color: var(--lime); transition: transform .2s var(--ease); }
.sim-btn:hover { transform: translateY(-2px); background: #133A27; }
.sim-btn:hover .ic { transform: translateX(3px); }
.scan-card { position: relative; overflow: hidden; padding: 26px; border-radius: 28px; background: url(../images/map-light.svg) center / cover, #EEF2EA; box-shadow: inset 0 0 0 1px rgba(11, 29, 18, .08), 0 30px 60px -36px rgba(11, 29, 18, .5); }
.scan-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 9px; }
.tg { --c: #C3CCC0; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1.5px rgba(11, 29, 18, .12); color: transparent; font-family: var(--f-display); font-size: 14px; font-weight: 800; transform: scale(.5); transition: transform .35s cubic-bezier(.3, 1.5, .5, 1), background .2s, color .2s; }
.tg.on { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 62%, #fff), var(--c) 62%); box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .16), 0 6px 12px -6px rgba(11, 29, 18, .5); color: #fff; transform: scale(1); }
.tg.g { --c: #22A34A; }
.tg.a { --c: #F0A42A; }
.tg.a.on { color: #3A2200; }
.tg.r { --c: #E5534B; }
.tg.d.on { color: #5B6B5F; }
.tg.me.on { box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #0B1D12, 0 8px 16px -6px rgba(11, 29, 18, .6); }
/* radar while scanning: rings from the business, transform + opacity only */
.scan-card::before, .scan-card::after { content: ""; position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; border: 2px solid var(--sc); opacity: 0; pointer-events: none; }
.scan-card.scanning::before, .scan-card.scanning::after { animation: radar 1.8s ease-out infinite; }
.scan-card.scanning::after { animation-delay: .9s; }
@keyframes radar { 0% { transform: scale(.4); opacity: .7; } 100% { transform: scale(5.5); opacity: 0; } }

/* step 3: the branded report itself */
.mrc { overflow: hidden; max-width: 400px; margin-top: 22px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1.5px #E1E9D9, 0 24px 40px -28px rgba(11, 29, 18, .5); transform: rotate(-1.5deg); animation: sx-in .5s var(--ease) .2s both; }
.mrc-band { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: linear-gradient(135deg, #8B6BFF, #5B3FE0); color: #fff; }
.mrc-logo { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 30%; background: #fff; color: #5B3FE0; font-family: var(--f-display); font-size: 14px; font-weight: 800; }
.mrc-band b { display: block; font-family: var(--f-display); font-size: 16px; font-weight: 800; line-height: 1.15; }
.mrc-band small { display: block; color: rgba(255, 255, 255, .8); font-size: 12px; }
.mrc-in { padding: 14px 16px 16px; }
.mrc-in > small { display: block; color: #6B7F70; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.mrc-in > b { display: block; margin-top: 2px; color: #0B1D12; font-family: var(--f-display); font-size: 19px; font-weight: 800; }
.mrc-kw { display: block; color: #536559; font-size: 13px; }
.mrc-row { display: flex; align-items: center; gap: 18px; margin-top: 12px; }
.mrc-row .mr-grid { width: 108px; margin: 0; }
.mrc-score { color: #3E5446; font-size: 13px; line-height: 1.3; }
.mrc-score b { display: block; color: #1E9A45; font-family: var(--f-display); font-size: 38px; font-weight: 800; line-height: 1; letter-spacing: -.03em; }

/* steps 3 + 4: the phone */
.sx-vis.ph-wrap { display: flex; justify-content: center; }
.dphone { position: relative; width: min(310px, 100%); padding: 10px; border-radius: 46px; background: linear-gradient(150deg, #5E6B62, #1B231E 26%, #0D120F 70%, #36423B); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 0 0 4px #070A08, 0 40px 70px -34px rgba(11, 29, 18, .75), 0 0 0 10px color-mix(in srgb, var(--sc) 12%, transparent); }
.dphone::before { content: ""; position: absolute; left: 50%; top: 20px; z-index: 3; width: 92px; height: 26px; margin-left: -46px; border-radius: 20px; background: #000; }
.dp-scr { display: flex; flex-direction: column; overflow: hidden; height: 540px; border-radius: 37px; background: #F3F5F2; }
.dp-top { display: flex; align-items: center; gap: 10px; padding: 52px 16px 10px; background: #fff; border-bottom: 1px solid #E6ECE3; }
.dp-av { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(155deg, color-mix(in srgb, var(--bc) 50%, #fff), var(--bc)); color: #fff; font-family: var(--f-display); font-size: 16px; font-weight: 800; }
.dp-top b { display: block; color: #0B1D12; font-size: 15px; line-height: 1.2; }
.dp-top small { display: block; color: #536559; font-size: 12px; }
.chat { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 14px 12px; overflow: hidden; }
.bub { max-width: 84%; padding: 8px 12px; border-radius: 18px; font-size: 13.5px; line-height: 1.4; opacity: 0; transform: translateY(8px) scale(.97); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.bub.show, .minirep.show { opacity: 1; transform: none; }
.bub.me { align-self: flex-end; border-bottom-right-radius: 6px; background: linear-gradient(170deg, #4C95FF, #2F6FEA); color: #fff; }
.bub.them { align-self: flex-start; border-bottom-left-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px #E1E9D9; color: #0B1D12; }
.minirep { align-self: flex-end; width: 80%; padding: 10px 12px 12px; border-radius: 16px; border-bottom-right-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px #E1E9D9, 0 10px 20px -14px rgba(11, 29, 18, .4); opacity: 0; transform: translateY(8px) scale(.97); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.minirep b { display: block; color: #0B1D12; font-family: var(--f-display); font-size: 13.5px; font-weight: 800; }
.minirep small { display: block; color: #51607A; font-size: 11.5px; }
.mr-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; width: 126px; margin-top: 8px; }
.mr-grid i { aspect-ratio: 1; border-radius: 50%; background: #C3CCC0; }
.mr-grid .g { background: #22A34A; }
.mr-grid .a { background: #F0A42A; }
.mr-grid .r { background: #E5534B; }

/* step 4: price choices + the example earning */
.choices { display: grid; gap: 10px; margin-top: 22px; }
.chipb { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; padding: 14px 18px 14px 14px; border: 0; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1.5px #D5E0CD; color: #0B1D12; font: inherit; text-align: left; cursor: pointer; transition: box-shadow .2s, background .2s, transform .2s var(--ease); }
.chipb b { font-family: var(--f-display); font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.opt-rd { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px #B9C7B2; transition: box-shadow .2s; }
.opt-pr { display: flex; align-items: baseline; gap: 6px; color: #0B1D12; font-family: var(--f-display); font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.opt-pr small { color: #6B7F70; font-family: var(--f-body); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.chipb:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px #1E9A45, 0 12px 22px -16px rgba(30, 154, 69, .6); }
.chipb[aria-pressed="true"] { background: #EEF9E6; box-shadow: inset 0 0 0 2px #1E9A45, 0 14px 24px -16px rgba(30, 154, 69, .7); }
.chipb[aria-pressed="true"] .opt-rd { box-shadow: inset 0 0 0 7px #1E9A45; }
.earn { margin-top: 16px; padding: 12px 16px 14px; border-radius: 22px; background: linear-gradient(160deg, #F2FFDF, #fff 70%); box-shadow: inset 0 0 0 1.5px #CFE8B0, 0 18px 34px -24px rgba(30, 154, 69, .6); animation: earn-pop .45s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes earn-pop { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
.earn .lbl { color: #536559; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.earn .amt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; color: #3E5446; font-size: 16px; }
.earn .amt b { color: #0B1D12; font-family: var(--f-display); font-size: 38px; font-weight: 800; line-height: 1; letter-spacing: -.04em; background: linear-gradient(transparent 60%, rgba(198, 246, 137, .95) 60%, rgba(198, 246, 137, .95) 92%, transparent 92%); }
.earn p { margin: 10px 0 0; color: #3E5446; font-size: 13.5px; line-height: 1.5; }
.btn-cta.sm { width: auto; height: 58px; margin-top: 14px; gap: 16px; padding: 0 9px 0 28px; font-size: 21px; animation: sx-in .4s var(--ease) .1s both; }
.btn-cta.sm .cta-arrow { width: 44px; height: 44px; }
.btn-cta.sm .cta-arrow .ic { width: 20px; height: 20px; }

/* small laptops: narrower rail, two business columns */
@media (max-width: 1199px) {
    .sim-rail button { padding: 12px 34px 12px 40px; gap: 10px; }
    .sim-rail li:first-child button { padding-left: 16px; }
    .sim-rail .st-t b { font-size: 16px; }
    .sim-rail .st-t small { display: none; }
    .sim-stage { height: 712px; }
    .biz { min-height: 170px; }
    .biz-dots { display: none; }
    .biz-go { top: 18px; bottom: auto; }
    .biz-tx { padding-right: 0; }
    .sx { column-gap: 28px; }
    .sx-top h3 { font-size: 30px; }
}
/* tablets + phones: the rail becomes a 4-step strip on top; each step
   stacks copy → visual → result */
@media (max-width: 899px) {
    .sec-try { padding: 0 0 90px; }
    .sim { gap: 12px; margin-top: -60px; padding: 10px; border-radius: 28px; }
    .s7-band { margin-top: 0; padding: 52px 10px 80px; gap: .18em; font-size: 6.9vw; border-radius: 0 0 50% 50% / 0 0 36px 36px; }
    .sim-rail li + li { margin-left: -9px; }
    .sim-rail button { flex-direction: column; justify-content: center; gap: 6px; min-height: 0; padding: 10px 14px 10px 20px; text-align: center; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%); }
    .sim-rail li:first-child button { padding-left: 6px; border-radius: 16px 0 0 16px; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); }
    .sim-rail li:last-child button { padding-right: 6px; border-radius: 0 16px 16px 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 14px 50%); }
    .sim-rail .n { width: 34px; height: 34px; font-size: 15px; }
    .sim-rail .st-t::before { display: none; }
    .sim-rail .st-t b { font-size: 12px; line-height: 1.15; }
    .sim-rail .st-t small { display: none; }
    .sim-stage::after { display: none; }
    .sim-stage { padding: 16px 16px 24px; border-radius: 22px; }
    .sim-head { gap: 10px; margin-bottom: 20px; padding-bottom: 14px; }
    .sim-dial { width: 40px; height: 40px; }
    .sim-title { font-size: 14px; }
    .sim-reset { height: 38px; padding: 0 14px; font-size: 13.5px; }
    .sx, .sx.s1 { grid-template-columns: 1fr; }
    .sx-copy { display: contents; }
    .sx-top { order: 1; }
    .sx-vis, .sx.s1 .sx-vis { order: 2; margin-top: 22px; }
    .sx-rest { order: 3; }
    .s3 .sx-rest { min-height: 0; }
    .biz { min-height: 150px; }
    .biz-dots { display: grid; }
    .biz-go { top: auto; bottom: 18px; }
    .biz-tx { padding-right: 46px; }
    .sx-top h3 { font-size: 26px; }
    .sx-top h3 .biz-ic { width: 40px; height: 40px; border-radius: 12px; }
    .sx-top p { font-size: 16px; }
    .bizgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .scan-card { max-width: 320px; margin: 0 auto; padding: 16px; border-radius: 22px; }
    .scan-grid { gap: 6px; }
    .tg { font-size: 12px; }
    .scan-st { margin-top: 0; }
    .stats b { font-size: 24px; }
    .dp-scr { height: 460px; }
    .s4 .dp-scr { height: 380px; }
    .mrc { display: none; }
    /* phones: the stage is as tall as the step it shows (no fixed height, no gap above) */
    .sim-stage { height: auto; min-height: 0; }
    .sim-body { align-content: start; }
    .sx-rest p.sx-note { font-size: 14.5px; }
    .btn-cta.sm { width: 100%; }
}
@media (max-width: 559px) {
    .bizgrid { grid-template-columns: 1fr; }
    .biz { flex-direction: row; align-items: center; gap: 14px; min-height: 0; padding: 12px 14px 12px 12px; }
    .biz-ic { width: 46px; height: 46px; border-radius: 14px; }
    .biz-tx { margin-top: 0; }
    .biz b { font-size: 17.5px; }
    .biz-dots { display: none; }
    .biz-go { top: 50%; bottom: auto; margin-top: -19px; }
    .s7-sub { font-size: 17px; }
    .stats { gap: 6px; }
    .stats div { padding: 10px; }
    .stats span { font-size: 12px; }
    .sim-title { font-size: 13px; }
    .sx-kw > span:last-child { font-size: 13.5px; }
    .scan-box { margin-top: 16px; padding: 12px 14px 14px; }
    .sim-reset { padding: 0 12px; }
    .sim-reset .ic { display: none; }
    .mr-grid { width: 112px; }
    .bub { font-size: 13px; }
}
/* desktop: the steps bar + the whole stage fit one screen (above the sticky bar);
   the stage takes its height from the viewport and every step scales into it */
@media (min-width: 900px) {
    .sim { --stage-h: clamp(456px, calc(100vh - 214px), 680px); gap: 14px; }
    .sim-rail { scroll-margin-top: 14px; }
    .sim-rail button { min-height: 80px; padding-top: 10px; padding-bottom: 10px; }
    .sim-rail .n { width: 40px; height: 40px; font-size: 17px; }
    .sim-stage { height: var(--stage-h); padding: 14px 28px 20px; }
    .sim-head { margin-bottom: 14px; padding-bottom: 12px; }
    .sim-stage::after { top: 8px; font-size: 54px; }
    .sx-top h3 { margin-bottom: 6px; font-size: clamp(26px, calc(var(--stage-h) / 20), 32px); }
    .sx-top p { font-size: 16px; line-height: 1.5; }
    /* 1 · tiles shrink with the stage */
    .sx.s1 .sx-vis { margin-top: 16px; }
    .bizgrid { gap: 12px; }
    .biz { min-height: clamp(116px, calc((var(--stage-h) - 296px) / 2), 160px); padding: 16px 18px; }
    .biz-ic { width: 48px; height: 48px; border-radius: 15px; }
    /* 2 · the scan card is as tall as the stage allows; the copy column tightens */
    .s2 .sx-vis { display: flex; justify-content: flex-end; }
    .s2 .scan-card { width: min(100%, calc(var(--stage-h) - 120px)); padding: 18px; }
    .s2 .scan-grid { gap: 7px; }
    .s2 .tg { font-size: 13px; }
    .scan-box { margin-top: 14px; padding: 12px 14px 14px; }
    .stats { margin-top: 12px; gap: 8px; }
    .stats div { padding: 10px 12px; }
    .stats b { font-size: 26px; }
    .sx-rest p.sx-note { margin-top: 12px; padding: 10px 14px 10px 10px; font-size: 14.5px; line-height: 1.45; }
    .sim-btn { height: 48px; margin-top: 14px; }
    /* 3 · the report card + the phone fit the stage */
    .mrc { margin-top: 16px; }
    .mrc-band { padding: 10px 14px; }
    .mrc-in { padding: 10px 14px 12px; }
    .mrc-row { margin-top: 8px; }
    .mrc-row .mr-grid { width: 92px; }
    .dp-scr { height: calc(var(--stage-h) - 150px); }
    .dphone { width: min(300px, 100%); }
    /* 4 · the prices side by side, a compact result */
    .s4 .choices { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 16px; }
    .s4 .chipb { position: relative; grid-template-columns: 1fr; align-content: start; gap: 4px; padding: 14px 14px 12px; }
    .s4 .chipb .opt-rd { position: absolute; right: 12px; top: 12px; width: 18px; height: 18px; }
    .s4 .chipb[aria-pressed="true"] .opt-rd { box-shadow: inset 0 0 0 6px #1E9A45; }
    .s4 .chipb b { padding-right: 22px; font-size: 15.5px; line-height: 1.2; }
    .s4 .opt-pr { flex-wrap: wrap; gap: 0 5px; font-size: 24px; }
    .earn { margin-top: 12px; padding: 10px 14px 12px; }
    .earn .amt { margin-top: 2px; }
    .earn .amt b { font-size: 32px; }
    .earn p { margin-top: 6px; font-size: 12.5px; }
    .btn-cta.sm { height: 54px; margin-top: 12px; font-size: 19px; }
}
/* short laptop screens: tighter still */
@media (min-width: 900px) and (max-height: 820px) {
    .sim > .s7-head { padding-top: 20px; }
    .sx-top h3 { font-size: 25px; }
    .sx-top p { font-size: 15px; }
    .sx-top h3 .biz-ic { width: 38px; height: 38px; border-radius: 12px; }
    .sx-kw .kw { padding: 5px 12px 5px 9px; font-size: 14.5px; }
    .scan-box { margin-top: 10px; padding: 10px 12px 12px; }
    .scan-st { font-size: 15px; }
    .meter { margin-top: 8px; }
    .stats { margin-top: 10px; }
    .stats div { padding: 8px 10px; }
    .stats b { font-size: 22px; }
    .stats span { margin-top: 3px; font-size: 12.5px; }
    .sx-rest p.sx-note { margin-top: 10px; padding: 8px 12px 8px 8px; font-size: 13.5px; }
    .sx-note > .ic { width: 26px; height: 26px; padding: 5px; }
    .sim-btn { height: 44px; margin-top: 10px; font-size: 15px; }
    .mrc { margin-top: 10px; }
    .mrc-band { padding: 7px 12px; }
    .mrc-logo { width: 32px; height: 32px; font-size: 12px; }
    .mrc-in { padding: 8px 12px 10px; }
    .mrc-in > b { font-size: 17px; }
    .mrc-kw { display: none; }
    .s3 .sx-rest .sim-btn { margin-top: 6px; }
    .mrc-row .mr-grid { width: 78px; gap: 2px; }
    .mrc-score b { font-size: 30px; }
    .s4 .choices { margin-top: 12px; }
    .s4 .chipb { padding: 10px 12px; }
    .s4 .opt-pr { font-size: 21px; }
    .earn .amt b { font-size: 28px; }
    .btn-cta.sm { height: 50px; margin-top: 10px; font-size: 18px; }
}
@media (max-width: 767px) {
}


/* ---------- section 7, part 2: the same steps in the real app ---------- */
.s7-real { position: relative; margin-top: 110px; }
.s7-real::before { content: ""; position: absolute; left: 50%; top: -60px; z-index: -1; width: 1600px; height: 900px; margin-left: -800px; border-radius: 50%; background: radial-gradient(closest-side, rgba(198, 246, 137, .32), rgba(111, 184, 255, .12) 55%, transparent 75%); pointer-events: none; }
.s7-art { display: none; }
@media (min-width: 1400px) {
    .s7-art { display: block; position: absolute; z-index: 5; width: 180px; height: auto; pointer-events: none; filter: drop-shadow(0 24px 26px rgba(11, 29, 18, .35)); animation: s3-bob 7s ease-in-out infinite; }
    .s7-art-watch { left: -70px; top: -84px; transform: rotate(-10deg); }
    .s7-art-tap { left: -214px; top: 50%; margin-top: -84px; transform: rotate(-6deg); animation-delay: -3.5s; }
}
/* ---- the real app: one dark HUD panel (cut corners + top tab like the seams),
   two clip cards side by side, each a browser window + its magnified card ---- */
/* the demo video between the real-app panel and the offer box: a dark
   cut-corner frame with a lit lime-to-teal edge; the still frame and a big
   lime play button until it is pressed, then the Vimeo player */
/* the top menu's "App Demo" link lands here, with room above the pill */
.dm-block { margin-top: 120px; scroll-margin-top: 40px; }
.dm-head { text-align: center; }
.dm-kick { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px 7px 12px; border-radius: 999px; background: #0E1A14; color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.dm-kick .ic { width: 15px; height: 15px; color: var(--acid); }
.dm-title { margin: 20px 0 0; color: #0B1D12; font-family: var(--f-display); font-size: clamp(38px, 4.8vw, 72px); font-weight: 800; line-height: 1.04; letter-spacing: -.045em; text-wrap: balance; }
.dm-title .mk { white-space: nowrap; padding: 0 .06em; background: linear-gradient(transparent 58%, rgba(198, 246, 137, .95) 58%, rgba(198, 246, 137, .95) 90%, transparent 90%); }
.dm-sub { max-width: 40em; margin: 16px auto 0; color: #3E5446; font-size: 19px; line-height: 1.55; text-wrap: balance; }
/* the monitor card: as wide as the real-app panel above it */
.s7-demo { --qc: 40px; position: relative; isolation: isolate; max-width: 1280px; margin: 48px auto 0; padding: 0 16px 16px; }
.dm-bg { position: absolute; inset: 0; z-index: -1; filter: drop-shadow(0 0 30px rgba(198, 246, 137, .35)) drop-shadow(0 50px 50px rgba(11, 29, 18, .35)); pointer-events: none; }
.dm-bg::before, .dm-bg::after { content: ""; position: absolute; clip-path: polygon(var(--qc) 0, 100% 0, 100% calc(100% - var(--qc)), calc(100% - var(--qc)) 100%, 0 100%, 0 var(--qc)); pointer-events: none; }
.dm-bg::before { inset: 0; background: linear-gradient(135deg, #D6F23C, #5EEAD4 40%, rgba(255, 255, 255, .25) 65%, #9BEA6A); }
.dm-bg::after { inset: 2px; background: linear-gradient(160deg, #15402A, #0B1D12 60%, #07130D); }
/* the top bar: a recording chip, the title, the length */
.dm-bar { display: flex; align-items: center; gap: 14px; height: 58px; padding: 0 12px; color: #C9DACD; font-size: 14px; font-weight: 600; }
.dm-rec { display: inline-flex; flex: none; align-items: center; gap: 8px; white-space: nowrap; padding: 5px 12px 5px 10px; border-radius: 999px; background: rgba(198, 246, 137, .1); box-shadow: inset 0 0 0 1px rgba(198, 246, 137, .3); color: var(--acid); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.dm-rec i { width: 8px; height: 8px; border-radius: 50%; background: #FF5A4E; box-shadow: 0 0 0 3px rgba(255, 90, 78, .25); animation: st-blink 1.4s ease-in-out infinite; }
.dm-name { color: #fff; }
.dm-meta { flex: none; margin-left: auto; color: #8FA898; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; letter-spacing: .06em; }
.dm-play, .s7-demo iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 16px; }
.dm-play { position: relative; overflow: hidden; background: #0B1D12; cursor: pointer; }
.dm-play img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), filter .4s; }
.dm-play::after { content: ""; position: absolute; inset: 0; background: radial-gradient(closest-side, rgba(4, 23, 15, .1), rgba(4, 23, 15, .45)); transition: opacity .3s; }
.dm-btn { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: 104px; height: 104px; margin: -52px 0 0 -52px; border-radius: 50%; background: linear-gradient(155deg, #F2FF9C, var(--acid) 60%, #A9E13A); box-shadow: 0 0 0 10px rgba(198, 246, 137, .28), 0 20px 40px -12px rgba(0, 0, 0, .6); color: var(--ink); transition: transform .3s var(--ease); }
.dm-btn::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 3px solid rgba(198, 246, 137, .7); animation: dm-ring 2.4s ease-out infinite; }
@keyframes dm-ring { 0% { opacity: 1; transform: scale(.88); } 100% { opacity: 0; transform: scale(1.3); } }
.dm-btn .ic { width: 40px; height: 40px; margin-left: 6px; }
.dm-play:hover img { transform: scale(1.03); }
.dm-play:hover .dm-btn, .dm-play:focus-visible .dm-btn { transform: scale(1.08); }
.dm-play:focus-visible { outline: 3px solid var(--acid); outline-offset: 4px; }
.dm-block + .s7-cta { margin-top: 110px; }
@media (max-width: 767px) {
    .dm-block { margin-top: 80px; }
    .dm-sub { font-size: 16.5px; }
    .s7-demo { --qc: 20px; margin-top: 32px; padding: 0 8px 8px; }
    .dm-bar { height: 46px; gap: 10px; padding: 0 6px; font-size: 12.5px; }
    .dm-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .dm-rec { padding: 4px 9px 4px 8px; font-size: 10.5px; }
    .dm-play, .s7-demo iframe { border-radius: 11px; }
    .dm-btn { width: 72px; height: 72px; margin: -36px 0 0 -36px; box-shadow: 0 0 0 7px rgba(198, 246, 137, .28), 0 14px 30px -10px rgba(0, 0, 0, .6); }
    .dm-btn .ic { width: 28px; height: 28px; margin-left: 4px; }
    .dm-block + .s7-cta { margin-top: 120px; }
}

.rx { --qc: 50px; --qb: 28px; --qt: 200px; --qd: 18px; position: relative; isolation: isolate; max-width: 1280px; margin: 0 auto; padding: 72px 52px 56px; }
.rx-bg { position: absolute; inset: 0; z-index: -1; filter: drop-shadow(0 0 16px rgba(111, 184, 255, .16)) drop-shadow(0 50px 50px rgba(11, 29, 18, .4)); pointer-events: none; }
.rx-edge, .rx-fill { position: absolute; clip-path: polygon(var(--qc) 0, calc(50% - var(--qt)) 0, calc(50% - var(--qt) + var(--qd)) var(--qd), calc(50% + var(--qt) - var(--qd)) var(--qd), calc(50% + var(--qt)) 0, calc(100% - var(--qc)) 0, 100% var(--qc), 100% calc(100% - var(--qb)), calc(100% - var(--qb)) 100%, var(--qb) 100%, 0 calc(100% - var(--qb)), 0 var(--qc)); }
.rx-edge { inset: 0; background: radial-gradient(420px 260px at 0 0, #6FB8FF, transparent 70%), radial-gradient(420px 260px at 100% 0, #D6F23C, transparent 70%), radial-gradient(320px 70px at 50% 0, rgba(214, 242, 60, .8), transparent 70%), radial-gradient(400px 240px at 100% 100%, rgba(94, 234, 212, .7), transparent 70%), radial-gradient(400px 240px at 0 100%, rgba(111, 184, 255, .55), transparent 70%), rgba(255, 255, 255, .12); }
.rx-fill { inset: 1.5px; overflow: hidden; background: radial-gradient(620px 420px at 22% 46%, rgba(79, 148, 255, .2), transparent 70%), radial-gradient(620px 420px at 80% 56%, rgba(198, 246, 137, .16), transparent 70%), radial-gradient(500px 220px at 50% 0, rgba(214, 242, 60, .1), transparent 70%), linear-gradient(160deg, #112F21, #0A1B12 60%, #07130D); }
/* a faint grid low in the panel, behind the cards only */
.rx-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(198, 246, 137, .07) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(198, 246, 137, .07) 1px, transparent 1px) 0 0 / 40px 40px; -webkit-mask-image: linear-gradient(transparent 30%, #000 70%); mask-image: linear-gradient(transparent 30%, #000 70%); }
.rx-hud { --cut: 50px; --r1: #6FB8FF; --r2: #D6F23C; --glow1: rgba(111, 184, 255, .7); --glow2: rgba(214, 242, 60, .7); }
.rx-hud .seam-l, .rx-hud .seam-r { top: 26px; }
.rx-head { text-align: center; }
.rx-kick { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.rx-kick i { width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .25); animation: st-blink 1.4s ease-in-out infinite; }
.rx .s7-h { margin-top: 16px; color: #fff; }
.rx .s7-h .mk { background: none; color: var(--acid); }
.rx-cards { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 22px; margin-top: 46px; }
.rx-go { display: grid; place-items: center; align-self: start; width: 54px; height: 54px; margin-top: 150px; border-radius: 50%; background: linear-gradient(180deg, #EEFF8A, var(--acid)); color: var(--ink); box-shadow: 0 0 0 7px rgba(214, 242, 60, .14), 0 0 30px -4px rgba(214, 242, 60, .7); }
.rx-go .ic { width: 24px; height: 24px; }
.rx-card { --pc: #8EC5FF; --pn: #4F94FF; position: relative; container-type: inline-size; margin: 0; padding: 12px 12px 22px; border-radius: 26px; background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 60px -30px #000; }
.rx-2 { --pc: #D6F59C; --pn: #3CC46A; }
.rx-win { position: relative; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 0 46px -12px var(--pn), 0 22px 40px -22px #000; }
.rx-win .rl-bar { gap: 6px; height: 32px; padding: 0 12px; font-size: 11px; }
.rx-win .rl-bar i { width: 9px; height: 9px; }
.rx-win .rl-bar span { margin-left: 6px; }
/* the magnified card hangs off the window's lower left (the play button sits lower right) */
.rl-zoom.rx-zoom { position: relative; top: auto; left: auto; right: auto; z-index: 4; width: min(300px, 64%); margin: -64px 0 0 -6px; padding: 12px 14px 14px; border-radius: 14px; font-size: 12.5px; box-shadow: 0 0 0 1.5px #E1E9D9, 0 0 0 6px color-mix(in srgb, var(--pc) 40%, transparent), 0 24px 40px -18px rgba(0, 0, 0, .7); transform: rotate(-2deg); }
.rx-zoom .z-title { margin-bottom: 6px; font-size: 15px; }
.rx-zoom .z-row { grid-template-columns: 58px minmax(0, 1fr); gap: 8px; padding: 6px 0; }
.rx-zoom .z-row small { font-size: 11px; }
.rx-zoom .z-btn { gap: 5px; margin-top: 8px; padding: 6px 11px; border-radius: 8px; font-size: 11px; }
.rx-zoom .z-btn .ic { width: 12px; height: 12px; }
.rx-zoom .z-scan { gap: 8px; }
.rx-zoom .z-scan b { font-size: 14px; }
.rx-zoom .z-spin { width: 14px; height: 14px; border-width: 2.5px; }
.rx-zoom .z-bar { height: 7px; margin: 9px 0 7px; }
.rx-zoom .z-sub { font-size: 12px; }
.rx-zoom .z-toast { margin-top: 10px; padding: 5px 12px; font-size: 11.5px; }
.rx-copy { display: flex; align-items: flex-start; gap: 16px; margin-top: 20px; padding: 0 8px; }
.rx-n { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 30%; background: linear-gradient(160deg, var(--pc), var(--pn)); color: #0B1D12; font-family: var(--f-display); font-size: 22px; font-weight: 800; transform: rotate(-6deg); box-shadow: 0 10px 22px -8px var(--pn); }
.rx-tx b { display: block; color: #fff; font-family: var(--f-display); font-size: clamp(24px, 2.2vw, 32px); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; }
.rx-tx span { display: block; margin-top: 8px; color: #C4D3C8; font-size: 16.5px; line-height: 1.55; }
@media (max-width: 1099px) {
    .rx { padding: 64px 28px 44px; }
    .rx-cards { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin-left: auto; margin-right: auto; }
    .rx-go { justify-self: center; margin-top: 0; rotate: 90deg; }
}
@media (max-width: 767px) {
    .rx { --qc: 26px; --qb: 18px; --qt: 90px; --qd: 12px; padding: 46px 12px 26px; }
    .rx-hud { --cut: 26px; }
    .rx-hud .seam-l { right: calc(50% + 100px); top: 18px; }
    .rx-hud .seam-r { left: calc(50% + 100px); top: 18px; }
    .rx-cards { gap: 16px; margin-top: 30px; }
    .rx-card { padding: 8px 8px 18px; border-radius: 20px; }
    .rl-zoom.rx-zoom { width: 84%; margin-top: -40px; }
    .rx-copy { gap: 12px; margin-top: 16px; padding: 0 4px; }
    .rx-n { width: 44px; height: 44px; font-size: 18px; }
    .rx-tx b { font-size: 23px; }
    .rx-tx span { font-size: 15.5px; }
    .rx-go { width: 44px; height: 44px; }
}
.s7-h { margin: 0; color: #0B1D12; font-family: var(--f-display); font-size: clamp(32px, 3.9vw, 58px); font-weight: 800; line-height: 1.05; letter-spacing: -.04em; text-align: center; }
.s7-h .mk { white-space: nowrap; padding: 0 .06em; background: linear-gradient(transparent 58%, rgba(198, 246, 137, .95) 58%, rgba(198, 246, 137, .95) 90%, transparent 90%); }
/* two zig-zag rows: the clip on a laptop (internals in the laptop's cqw),
   a card that magnifies the key part of the screen, a dashed leader to
   that spot, and the caption as heading + text. Everything in a row is
   sized in the device's cqw, so the leader stays on target at any width. */
.rl-rows { display: grid; gap: 0; max-width: 1320px; margin: 70px auto 0; }
.rl-link { display: block; height: 170px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 150' fill='none' stroke-linecap='round'%3E%3Cpath d='M470 8C470 90 120 50 92 128' stroke='%2364B04A' stroke-width='4' stroke-dasharray='1 12'/%3E%3Cpath d='M76 116l16 20 14-22' stroke='%2364B04A' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E") center / 560px 150px no-repeat; }
.rl-row { --pc: #8EC5FF; --pn: #4F94FF; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: center; gap: 90px; margin: 0; }
.rl-row.r2 { --pc: #C6F689; --pn: #3CC46A; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
.rl-row.r2 .rl-dev { order: 2; }
.rl-dev { position: relative; container-type: inline-size; }
/* pastel light behind the laptop + its shadow on the floor */
.rl-dev::before { content: ""; position: absolute; left: -12%; right: -12%; top: -14%; bottom: -10%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--pc) 70%, transparent), transparent); }
.rl-dev::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: -4cqw; height: 7cqw; border-radius: 50%; background: radial-gradient(closest-side, rgba(11, 29, 18, .28), transparent); }
.rl-lt { position: relative; z-index: 1; }
.rl-lt .lt-lid { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 5cqw 10cqw -3cqw rgba(11, 29, 18, .5); }
.lt-screen.rl-scr { display: block; aspect-ratio: auto; background: #fff; }
.rl-bar { display: flex; align-items: center; gap: .8cqw; height: 4.2cqw; padding: 0 2cqw; background: #fff; box-shadow: inset 0 -1px 0 #E6ECE3; color: #5C6B60; font-size: 1.45cqw; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.rl-bar i { width: 1.15cqw; height: 1.15cqw; border-radius: 50%; background: #FF6159; }
.rl-bar i:nth-child(2) { background: #FFBE2F; }
.rl-bar i:nth-child(3) { background: #2ACA44; }
.rl-bar span { margin-left: 1cqw; overflow: hidden; text-overflow: ellipsis; }
.rl-vid { position: relative; background: #EEF2EA; }
.rl-vid video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
/* play / pause: a small dark disc while playing, a big lime play button when paused */
/* the play / pause control. The button covers the whole clip (a fixed box,
   so starting a clip never shifts layout); its circle (::before) and icon
   (::after) sit in the corner and move only by transform: centred and full
   size while paused, shrunk into the corner while playing. cqw / cqh are the
   button's own size (container-type: size is safe: inset 0 sets its size). */
.rl-toggle { position: absolute; inset: 0; z-index: 2; padding: 0; border: 0; border-radius: 0; background: none; color: #fff; cursor: pointer; container-type: size; -webkit-tap-highlight-color: transparent; }
.rl-toggle::before, .rl-toggle::after { content: ""; position: absolute; right: 12px; bottom: 12px; transform: scale(.618); transform-origin: 100% 100%; transition: transform .35s var(--ease), background .25s, box-shadow .25s, opacity .25s; }
.rl-toggle::before { width: 68px; height: 68px; border-radius: 50%; background: rgba(11, 29, 18, .78); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .6); opacity: .9; }
.rl-toggle::after { right: 36px; bottom: 36px; width: 20px; height: 20px; background: #fff; transform-origin: calc(100% + 24px) calc(100% + 24px); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='4' y='3' width='4' height='14' rx='1'/%3E%3Crect x='12' y='3' width='4' height='14' rx='1'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='4' y='3' width='4' height='14' rx='1'/%3E%3Crect x='12' y='3' width='4' height='14' rx='1'/%3E%3C/svg%3E") center / contain no-repeat; }
.rl-toggle:hover::before { opacity: 1; }
.rl-toggle:focus-visible { outline: none; }
.rl-toggle:focus-visible::before { box-shadow: 0 0 0 3px var(--lime), 0 8px 18px -8px rgba(0, 0, 0, .6); }
[data-loop].is-paused .rl-toggle::before, [data-loop].is-paused .rl-toggle::after { transform: translate(calc(-50cqw + 46px), calc(-50cqh + 46px)); }
[data-loop].is-paused .rl-toggle::before { background: var(--lime); box-shadow: 0 0 0 10px rgba(198, 246, 137, .35), 0 16px 30px -12px rgba(11, 29, 18, .6); opacity: 1; }
[data-loop].is-paused .rl-toggle::after { background: var(--ink); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 2.5v15l13-7.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 2.5v15l13-7.5z'/%3E%3C/svg%3E"); }
[data-loop].is-paused .rl-toggle:hover::before { transform: translate(calc(-50cqw + 46px), calc(-50cqh + 46px)) scale(1.06); }
/* the clips whose control sits bottom-left */
.dk-1 .rl-toggle::before, .dk-1 .rl-toggle::after, .tr-app .rl-toggle::before, .tr-app .rl-toggle::after, .rc-app .rl-toggle::before, .rc-app .rl-toggle::after { right: auto; left: 12px; transform-origin: 0 100%; }
.dk-1 .rl-toggle::after, .tr-app .rl-toggle::after, .rc-app .rl-toggle::after { left: 36px; transform-origin: -24px calc(100% + 24px); }
.dk-1.is-paused .rl-toggle::before, .dk-1.is-paused .rl-toggle::after, .tr-app.is-paused .rl-toggle::before, .tr-app.is-paused .rl-toggle::after, .rc-app.is-paused .rl-toggle::before, .rc-app.is-paused .rl-toggle::after { transform: translate(calc(50cqw - 46px), calc(-50cqh + 46px)); }
.dk-1.is-paused .rl-toggle:hover::before, .tr-app.is-paused .rl-toggle:hover::before, .rc-app.is-paused .rl-toggle:hover::before { transform: translate(calc(50cqw - 46px), calc(-50cqh + 46px)) scale(1.06); }
[data-loop].is-error .rl-toggle { display: none; }

/* the leader + node (W units: 1 = 1% of the device width) */
.rl-lead { position: absolute; left: 0; top: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rl-lead path { fill: none; stroke: #0B1D12; stroke-opacity: .6; stroke-width: 1.6; stroke-dasharray: 4 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rl-node { position: absolute; z-index: 3; width: 1.7cqw; height: 1.7cqw; margin: -.85cqw 0 0 -.85cqw; border-radius: 50%; background: var(--lime-2); box-shadow: 0 0 0 .32cqw #0B1D12; pointer-events: none; }
.rl-node::after { content: ""; position: absolute; inset: -.32cqw; border-radius: 50%; border: .3cqw solid var(--lime-2); animation: s7-ripple 2s ease-out infinite; }
.r1 .rl-node { left: 33.5cqw; top: 41cqw; }
.r2 .rl-node { left: 67.6cqw; top: 39cqw; }

/* the magnified card: only labels that are on that screen */
.rl-zoom { position: absolute; z-index: 4; top: 38cqw; display: grid; width: 34cqw; padding: 1.8cqw 2.1cqw 2cqw; border-radius: 2cqw; background: #fff; box-shadow: 0 0 0 1.5px #E1E9D9, 0 0 0 .8cqw color-mix(in srgb, var(--pc) 40%, transparent), 0 3cqw 5cqw -2.4cqw rgba(11, 29, 18, .55); color: #3E5446; font-size: max(10.5px, 1.6cqw); line-height: 1.35; transform: rotate(-2deg); }
.r1 .rl-zoom { left: -7cqw; }
.r2 .rl-zoom { right: -7cqw; transform: rotate(2deg); }
.z-title { margin-bottom: .9cqw; color: #0B1D12; font-family: var(--f-display); font-size: max(13px, 2.1cqw); font-weight: 800; }
.z-row { display: grid; grid-template-columns: max(52px, 6.6cqw) minmax(0, 1fr); gap: 1cqw; padding: .7cqw 0; border-top: 1px dashed #DCE4D6; }
.z-row small { color: #8A98A0; font-size: max(9.5px, 1.4cqw); }
.z-row b { color: #0B1D12; }
.z-btn { display: inline-flex; align-items: center; gap: .6cqw; justify-self: end; margin-top: 1cqw; padding: .75cqw 1.5cqw; border-radius: .9cqw; background: #B9EE6E; color: #10350F; font-size: max(9.5px, 1.35cqw); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.z-btn .ic { width: 1.5cqw; height: 1.5cqw; }
.z-scan { display: flex; align-items: center; gap: 1cqw; }
.z-scan b { color: #0B1D12; font-family: var(--f-display); font-size: max(12.5px, 2cqw); font-weight: 800; }
.z-spin { flex: none; width: 2cqw; height: 2cqw; border-radius: 50%; border: .3cqw solid #D6E0D0; border-top-color: #22A34A; animation: z-spin 1s linear infinite; }
@keyframes z-spin { to { transform: rotate(360deg); } }
.z-bar { position: relative; display: block; height: 1cqw; margin: 1.3cqw 0 .9cqw; overflow: hidden; border-radius: 1cqw; background: #E6ECE3; }
.z-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 8%; border-radius: inherit; background: #22A34A; }
.z-bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent); animation: z-shim 2.2s ease-in-out infinite; }
@keyframes z-shim { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.z-sub { color: #536559; font-size: max(10px, 1.45cqw); }
.z-toast { justify-self: center; margin-top: 1.5cqw; padding: .8cqw 1.7cqw; border-radius: 99px; background: #0B1D12; color: #fff; font-size: max(10px, 1.4cqw); font-weight: 700; white-space: nowrap; }

/* 1100–1439: the rows reach the screen edge, so the cards come in and slim down
   (the leaders still start under them) */
@media (min-width: 1100px) and (max-width: 1439px) {
    .r1 .rl-zoom { left: -2cqw; width: 30cqw; }
    .r2 .rl-zoom { right: -2cqw; width: 30cqw; }
    .rl-row { gap: 64px; }
}
/* the copy beside each laptop */
.rl-copy { display: block; }
.rl-num { display: block; width: fit-content; margin-bottom: 6px; padding-right: .04em; background: linear-gradient(165deg, var(--pc), var(--pn) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: var(--f-display); font-size: 116px; font-weight: 800; line-height: .86; letter-spacing: -.05em; filter: drop-shadow(0 10px 18px color-mix(in srgb, var(--pn) 35%, transparent)); }
.rl-tag { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 10px; border-radius: 999px; background: #0B1D12; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.rl-tag i { width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .25); animation: st-blink 1.6s ease-in-out infinite; }
.rl-lead-t { display: block; margin: 18px 0 12px; color: #0B1D12; font-family: var(--f-display); font-size: clamp(32px, 3vw, 46px); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; }
.rl-txt { display: block; max-width: 30em; color: #3E5446; font-size: 19px; line-height: 1.6; }

/* the offer box (light version of the hero card) */
.s7-cta { position: relative; display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: center; gap: 44px; max-width: 960px; margin: 120px auto 0; padding: 30px 44px 30px 34px; border: 1.5px solid transparent; border-radius: 32px; background: linear-gradient(160deg, #FFFFFF, #F8FCF3 60%, #F0F8E4) padding-box, linear-gradient(135deg, #B9EE6E, #8EC5FF 45%, rgba(255, 255, 255, .6) 70%, #FFC25C) border-box; box-shadow: 0 0 0 8px rgba(198, 246, 137, .2), 0 60px 100px -50px rgba(11, 29, 18, .5); }
.s7c-box { position: relative; align-self: stretch; display: grid; place-items: center; }
.s7c-box img { position: relative; z-index: 1; width: 100%; height: auto; margin: -34px 0 -10px; transform: rotate(-5deg); filter: drop-shadow(0 26px 22px rgba(11, 29, 18, .4)); }
.s7c-box::before { content: ""; position: absolute; inset: 4% -14% 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(198, 246, 137, .75), rgba(198, 246, 137, 0)); }
/* the logo-squircle riser from section 6, lying flat under the box */
.s7c-ped { position: absolute; left: 50%; bottom: -6px; width: 230px; height: 230px; margin-left: -115px; border-radius: 30%; background: radial-gradient(closest-side, rgba(171, 229, 101, .55), rgba(171, 229, 101, .15) 62%, rgba(255, 255, 255, 0) 64%); box-shadow: inset 0 0 0 3px rgba(120, 190, 50, .9), inset 0 0 20px rgba(171, 229, 101, .6); transform: perspective(600px) rotateX(76deg); transform-origin: 50% 100%; }
.s7c-main { min-width: 0; }
.s7c-price { display: flex; align-items: center; gap: 16px; margin: 0; color: #3E5446; }
.s7c-price b { color: #0B1D12; font-family: var(--f-display); font-size: 78px; font-weight: 800; line-height: .9; letter-spacing: -.045em; }
.s7c-price .bp-rest { padding-left: 16px; border-left: 1.5px solid #D8E3D0; color: #1E9A45; font-size: 15.5px; font-weight: 800; line-height: 1.35; }
.s7c-main .btn-cta { margin-top: 26px; }
.s7c-trust { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 18px; margin-top: 22px; padding-top: 16px; border-top: 1.5px dashed #D8E3D0; }
.s7c-trust .g-seal { filter: drop-shadow(0 8px 12px rgba(120, 70, 0, .3)); }
.s7c-trust .guar-txt b { color: #0B1D12; }
.s7c-trust .secure { color: #3E5446; }
.s7c-trust .secure .ic { color: #1E9A45; }
.s7c-chip { position: absolute; z-index: 2; top: -28px; right: -34px; transform: rotate(5deg); box-shadow: 0 20px 40px -18px rgba(120, 70, 0, .6), 0 0 40px -14px rgba(243, 203, 85, .5); }
.s7-cta .cta-note { color: #EE7A10; filter: none; }

@media (max-width: 1099px) {
    .rl-rows { gap: 0; max-width: 760px; }
    .rl-link { height: 120px; background-size: 360px 100px; }
    .rl-row, .rl-row.r2 { grid-template-columns: 1fr; gap: 44px; }
    .rl-row.r2 .rl-dev { order: 0; }
    .rl-lead, .rl-node { display: none; }
    .r1 .rl-zoom { left: -2cqw; }
    .r2 .rl-zoom { right: -2cqw; }
    .rl-zoom { top: auto; bottom: -9cqw; }
    .rl-copy { padding-top: 70px; }
    .rl-num { font-size: 90px; }
    .s7c-chip { right: -12px; }
}
@media (max-width: 899px) {
    .s7-real { margin-top: 90px; }
    .rl-rows { margin-top: 50px; }
    .s7-cta { grid-template-columns: 1fr; gap: 4px; max-width: 560px; margin-top: 130px; padding: 0 26px 26px; text-align: center; }
    .s7c-box { width: 190px; margin: 0 auto; }
    .s7c-box img { margin: -90px 0 -4px; }
    .s7c-ped { width: 170px; height: 170px; margin-left: -85px; bottom: -12px; }
    .s7c-price { justify-content: center; }
    .s7c-trust { justify-content: center; }
    .s7c-chip { top: -24px; right: -10px; transform: rotate(5deg) scale(.86); transform-origin: right top; }
}
@media (max-width: 559px) {
    .s7-real { margin-top: 76px; }
    .rl-rows { gap: 0; }
    .rl-link { height: 96px; background-size: 260px 80px; }
    .s7-bg::before { opacity: .6; }
    .rl-row, .rl-row.r2 { gap: 26px; }
    .rl-zoom, .r1 .rl-zoom, .r2 .rl-zoom { position: relative; left: auto; right: auto; bottom: auto; width: 88%; margin: -2px auto 0; padding: 14px 16px 16px; border-radius: 16px; font-size: 13px; transform: none; }
    .z-title { margin-bottom: 8px; font-size: 16px; }
    .z-row { grid-template-columns: 62px minmax(0, 1fr); gap: 8px; padding: 6px 0; }
    .z-row small { font-size: 12px; }
    .z-btn { gap: 6px; margin-top: 8px; padding: 6px 12px; border-radius: 8px; font-size: 11px; }
    .z-btn .ic { width: 13px; height: 13px; }
    .z-scan { gap: 8px; }
    .z-scan b { font-size: 15px; }
    .z-spin { width: 16px; height: 16px; border-width: 2.5px; }
    .z-bar { height: 7px; margin: 10px 0 8px; }
    .z-sub { font-size: 12.5px; }
    .z-toast { margin-top: 10px; padding: 6px 14px; font-size: 12px; }
    .rl-copy { padding-top: 0; }
    .rl-num { font-size: 72px; }
    .rl-lead-t { margin-top: 14px; }
    .rl-txt { font-size: 17px; }
    .s7-cta { margin-top: 110px; padding: 0 16px 20px; border-radius: 26px; }
    .s7c-box { width: 150px; }
    .s7c-box img { margin: -70px 0 -4px; }
    .s7c-ped { width: 140px; height: 140px; margin-left: -70px; }
    .s7c-price { gap: 10px; }
    .s7c-price b { font-size: 56px; }
    .s7c-price .bp-from { font-size: 16px; }
    .s7c-price .bp-rest { padding-left: 10px; font-size: 14px; text-align: left; }
    .s7c-trust { flex-direction: column; gap: 14px; }
    .s7c-chip { top: auto; bottom: -26px; right: -6px; transform: rotate(-4deg) scale(.82); transform-origin: right bottom; }
}


/* ==========================================================
   SECTION 8 — TWO PLUMBERS (dark)
   A dark wave out of the light demo section. ONE map card carries both
   scans with a drag handle to compare them (A left, B right); each
   plumber's card stands on his side; the light is split coral (A) /
   green (B). Lime only on the title, the handle and the payoff line.
   ========================================================== */
.sec-two { position: relative; isolation: isolate; padding: 110px 0 110px; background: linear-gradient(180deg, #07120E 0, #07120E 80px, #0A1914 46%, #08140F 100%); color: var(--body-d); overflow-x: clip; }
/* two stage lights: red falls on Plumber A's side, green on Plumber B's */
.s8-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background:
    radial-gradient(70% 60% at 22% 62%, rgba(229, 83, 75, .2), transparent 70%),
    radial-gradient(70% 60% at 78% 62%, rgba(60, 196, 106, .2), transparent 70%),
    radial-gradient(60% 40% at 50% 0, rgba(214, 242, 60, .07), transparent 70%); }
.s8-bg::before, .s8-bg::after { content: ""; position: absolute; top: -40px; width: 54%; height: 120%; pointer-events: none; }
.s8-bg::before { left: -6%; background: conic-gradient(from 150deg at 18% 0, transparent 0deg, rgba(255, 107, 94, .16) 14deg, rgba(255, 107, 94, .09) 34deg, transparent 50deg); -webkit-mask-image: linear-gradient(#000 40%, transparent 92%); mask-image: linear-gradient(#000 40%, transparent 92%); }
.s8-bg::after { right: -6%; background: conic-gradient(from 160deg at 82% 0, transparent 0deg, rgba(74, 222, 128, .09) 16deg, rgba(74, 222, 128, .16) 36deg, transparent 50deg); -webkit-mask-image: linear-gradient(#000 40%, transparent 92%); mask-image: linear-gradient(#000 40%, transparent 92%); }
.s8-wrap { max-width: 1400px; }
.s8-head { text-align: center; }
.s8-kicker { display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px 7px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(214, 242, 60, .35); color: var(--acid); font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.s8-kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 3px rgba(214, 242, 60, .2); }
.s8-title { margin: 22px 0 0; color: #fff; font-family: var(--f-display); font-size: clamp(40px, 5.4vw, 82px); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; }
.s8-title .hl { padding: 0 .04em .06em; color: transparent; background: linear-gradient(90deg, #F2FF9C, #D6F23C 45%, #5EEAA8); -webkit-background-clip: text; background-clip: text; }
.s8-sub { max-width: 36em; margin: 20px auto 0; color: #B7C9BD; font-size: 20px; line-height: 1.55; text-wrap: balance; }

/* plumber A | the shared map | plumber B */
.vs { display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px; align-items: stretch; gap: 40px; margin-top: 76px; }
.pl { --c: #FF6B5E; --cv: #FF8F84; position: relative; display: flex; flex-direction: column; padding: 26px 24px 24px; border-radius: 26px; background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 45%, transparent), 0 34px 60px -30px rgba(0, 0, 0, .8), 0 0 70px -30px var(--c); }
.pl-b { --c: #3CC46A; --cv: #6EE7A0; }
/* each plumber stands behind the top of his card; the waist fade is baked into
   the image (a CSS mask here would clip the glow to a visible rectangle) */
.vs .pl { margin-top: 220px; }
.pl-man { position: absolute; left: 50%; bottom: calc(100% - 6px); width: auto; height: 290px; transform: translateX(-50%); filter: drop-shadow(0 0 34px color-mix(in srgb, var(--c) 40%, transparent)); pointer-events: none; }
.pl-tag { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; padding: 5px 15px 5px 5px; border-radius: 999px; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--cv); font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.pl-tag i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c); color: #fff; }
.pl-tag .ic { width: 15px; height: 15px; }
.pl h3 { margin: 16px 0 0; color: #fff; font-family: var(--f-display); font-size: 25px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.pl-stats { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.pl-gauge { display: grid; justify-items: center; gap: 10px; margin: auto 0; padding: 22px 0; text-align: center; }
.pl-gauge > span { color: #B7C9BD; font-size: 15px; }
.pl-ring { position: relative; display: grid; place-items: center; width: 170px; aspect-ratio: 1; }
.pl-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.pl-ring circle { fill: none; stroke-width: 11; }
.pl-ring .trk { stroke: rgba(255, 255, 255, .08); }
.pl-ring .bar { stroke: var(--cv); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p)); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c) 70%, transparent)); transition: stroke-dashoffset 1.4s var(--ease) .3s; }
html.js .vs:not(:has(.cmp.in)) .pl-ring .bar { stroke-dashoffset: 100; }
.pl-ring b { color: var(--cv); font-family: var(--f-display); font-size: 44px; font-weight: 800; letter-spacing: -.04em; }
/* each card is wired to its half of the map */
.pl::after { content: ""; position: absolute; top: 50%; width: 40px; height: 12px; margin-top: -6px; background: radial-gradient(circle, var(--c) 0 4px, color-mix(in srgb, var(--c) 35%, transparent) 4.5px 6px, transparent 6.5px) var(--nx) 50% / 12px 12px no-repeat, repeating-linear-gradient(90deg, var(--c) 0 6px, transparent 6px 11px) 0 50% / 100% 2px no-repeat; filter: drop-shadow(0 0 6px var(--c)); }
.pl-a::after { --nx: 100%; left: 100%; }
.pl-b::after { --nx: 0; right: 100%; }
.pl-stats li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px 12px; }
.pl-stats span { color: #B7C9BD; font-size: 15px; line-height: 1.3; }
.pl-stats b { color: var(--cv); font-family: var(--f-display); font-size: 32px; font-weight: 800; line-height: .9; letter-spacing: -.03em; }
.pl-meter { grid-column: 1 / -1; display: block; height: 8px; overflow: hidden; border-radius: 8px; background: rgba(255, 255, 255, .08); }
.pl-meter s { display: block; height: 100%; border-radius: inherit; background: #3CC46A; transition: width 1s var(--ease); }
.pl-meter.r s { background: #FF6B5E; }

/* the shared map: A underneath, B clipped from the handle to the right */
.cmp { --pos: 50%; position: relative; }
.cmp-q { position: absolute; left: 50%; top: -22px; z-index: 7; display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 20px 0 16px; border-radius: 999px; background: #fff; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .7); color: #0B1D12; font-size: 15px; font-weight: 700; white-space: nowrap; transform: translateX(-50%); }
.cmp-q .ic { width: 17px; height: 17px; color: #2F7CF6; }
.cmp-map { position: relative; overflow: visible; aspect-ratio: 1 / .98; border-radius: 30px; background: url(../images/map-light.svg) center / cover, #EEF2EA; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .14), 0 0 0 10px rgba(255, 255, 255, .04), 0 50px 90px -40px #000; container-type: inline-size; }
.cmp-layer { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; overflow: hidden; }
.cmp-layer.la { background: rgba(255, 107, 94, .1); }
.cmp-layer.lb { background: rgba(60, 196, 106, .1); clip-path: inset(0 0 0 var(--pos)); }
.cmp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2.4cqw; width: 88cqw; }
.cd { --c: #C3CCC0; display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 62%, #fff), var(--c) 62%); box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .16), 0 6px 12px -6px rgba(11, 29, 18, .5); color: #fff; font-family: var(--f-display); font-size: 2.3cqw; font-weight: 800; transition: transform .45s cubic-bezier(.3, 1.5, .5, 1); }
.cd.g { --c: #22A34A; }
.cd.a { --c: #F0A42A; color: #3A2200; }
.cd.r { --c: #E5534B; }
.cd.d { color: #5B6B5F; }
.cd.me { box-shadow: 0 0 0 .5cqw #fff, 0 0 0 .95cqw #0B1D12, 0 8px 16px -6px rgba(11, 29, 18, .6); }
html.js .cmp:not(.in) .cd { transform: scale(0); }
/* side labels sit on the map's top edge, pointing to their halves */
.cmp-lbl { position: absolute; top: -15px; z-index: 7; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px; border-radius: 999px; color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .6); }
.cmp-lbl .ic { width: 14px; height: 14px; }
.cmp-lbl.ca { left: 28px; background: #E5534B; }
.cmp-lbl.ca .ic { transform: scaleX(-1); }
.cmp-lbl.cb { right: 28px; background: #22A34A; }
/* the handle */
.cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 4; width: 0; pointer-events: none; }
.cmp-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 29, 18, .12), 0 0 18px rgba(255, 255, 255, .8); }
.cmp-handle i { position: absolute; left: 0; top: 100%; display: flex; align-items: center; justify-content: center; gap: 1px; width: 74px; height: 50px; margin: -25px 0 0 -37px; border-radius: 999px; background: var(--acid); box-shadow: 0 0 0 4px #fff, 0 14px 28px -8px rgba(0, 0, 0, .55); color: var(--ink); }
.cmp-handle .ic { width: 14px; height: 14px; }
.cmp-handle .cmp-hand { width: 22px; height: 22px; }
.cmp-handle .ic:first-child { transform: scaleX(-1); }
.cmp.hint .cmp-handle .cmp-hand { animation: cmp-nudge 1.4s ease-in-out infinite; }
@keyframes cmp-nudge { 0%, 100% { translate: -3px 0; } 50% { translate: 3px 0; } }
.cmp.hint .cmp-handle i::after { content: ""; position: absolute; inset: -4px; border-radius: 999px; border: 2px solid var(--acid); animation: s7-ripple 1.8s ease-out infinite; }
.cmp-map:has(.cmp-range:focus-visible) .cmp-handle i { box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--acid), 0 14px 28px -8px rgba(0, 0, 0, .55); }
/* the real control: a transparent range input over the whole map */
.cmp-range { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none; }
.cmp-range::-webkit-slider-thumb { -webkit-appearance: none; width: 64px; height: 64px; }
.cmp-range::-moz-range-thumb { width: 64px; height: 64px; border: 0; }

/* the payoff line */
.s8-call { display: flex; align-items: center; gap: 26px; max-width: 1120px; margin: 84px auto 0; padding: 30px 40px; border: 1.5px solid transparent; border-radius: 28px; background: linear-gradient(160deg, #10241B, #0B1B15) padding-box, linear-gradient(90deg, rgba(255, 107, 94, .7), rgba(255, 255, 255, .12) 45%, rgba(214, 242, 60, .85)) border-box; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }
.s8-call-ic { display: grid; place-items: center; flex: none; width: 66px; height: 66px; border-radius: 21px; background: linear-gradient(155deg, #F2FF9C, var(--acid)); box-shadow: 0 12px 26px -10px rgba(214, 242, 60, .6); color: var(--ink); transform: rotate(-6deg); }
.s8-call-ic .ic { width: 30px; height: 30px; }
.s8-call p { margin: 0; color: #fff; font-family: var(--f-display); font-size: clamp(21px, 2.1vw, 31px); font-weight: 700; line-height: 1.3; letter-spacing: -.015em; }
.s8-call em { color: var(--acid); font-style: normal; }
.s8-note { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; margin: 20px 0 0; color: #A9BCB0; font-size: 15px; }
.s8-note span { padding: 4px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2); color: #E3ECE6; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

/* tablets: the map on top, A left / B right under it */
@media (max-width: 1199px) {
    .vs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; max-width: 820px; margin-left: auto; margin-right: auto; }
    .cmp { grid-column: 1 / -1; order: -1; margin-bottom: 30px; }
    .pl::after { display: none; }
    .pl-gauge { margin: 0; }
}
@media (max-width: 767px) {
    .sec-two { padding: 52px 0 90px; }
    .s8-title { margin-top: 18px; font-size: 10.4vw; }
    .s8-sub { font-size: 17px; }
    .vs { margin-top: 56px; }
    .cmp-map { border-radius: 22px; }
    .cmp-q { top: -20px; height: 40px; font-size: 14px; }
    .cmp-handle .ic { width: 15px; height: 15px; }
    .cmp-lbl { top: auto; bottom: -13px; height: 26px; padding: 0 10px; font-size: 10.5px; }
    .cmp-lbl.ca { left: 14px; }
    .cmp-lbl.cb { right: 14px; }
    .cmp-handle i { top: 100%; width: 52px; height: 40px; margin: -20px 0 0 -26px; }
    .cmp-handle .ic:not(.cmp-hand) { display: none; }
    .s8-bg::before, .s8-bg::after { display: none; }
    .pl-ring { width: 140px; }
    .pl-ring b { font-size: 36px; }
    .cd { font-size: 2.8cqw; }
    .s8-call { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 60px; padding: 24px 22px; border-radius: 22px; }
    .s8-call-ic { width: 54px; height: 54px; border-radius: 17px; }
}
@media (max-width: 559px) {
    .vs { grid-template-columns: 1fr; }
    .pl h3 { font-size: 23px; }
    .vs .pl { margin-top: 190px; }
    .pl-man { height: 230px; }
}


/* ==========================================================
   SECTION 9 — A PICTURE BEATS A PITCH (light, warm paper)
   A light wave out of the dark section 8. Copy left with the three
   quotes as chips (struck-out pitch / your bubble / their reply); right,
   the branded sample report in front of a faded pile of wordless pitch
   messages; then the Export + Share-link clips in two dark cards (copy |
   laptop, flipped), each with a magnified card of its on-screen panel.
   ========================================================== */
.sec-pic { position: relative; isolation: isolate; padding: 50px 0 140px; background: linear-gradient(180deg, #FBF8F2 0, #FBF8F2 80px, #FFFDF9 50%, #F7F8F2 100%); color: #3E5446; }
.s9-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(transparent, #000 200px); mask-image: linear-gradient(transparent, #000 200px); background: radial-gradient(620px 460px at 4% 20%, rgba(255, 170, 120, .16), transparent 70%), radial-gradient(680px 520px at 82% 24%, rgba(110, 140, 255, .14), transparent 70%), radial-gradient(760px 460px at 70% 42%, rgba(198, 246, 137, .26), transparent 70%), radial-gradient(900px 520px at 50% 88%, rgba(180, 150, 255, .12), transparent 70%); }
.s9-wrap { position: relative; z-index: 1; max-width: 1340px; }

.pic-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; gap: 84px; }
.s9-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px 7px 11px; border-radius: 999px; background: #0B1D12; color: #fff; font-size: 14px; font-weight: 700; }
.s9-kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 3px rgba(214, 242, 60, .25); }
.s9-title { margin: 20px 0 0; color: #0B1D12; font-family: var(--f-display); font-size: clamp(44px, 5vw, 78px); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; }
@media (max-width: 1099px) { .s9-title .br-d { display: none; } }
.s9-title .mk { padding: 0 .06em; background: linear-gradient(transparent 58%, rgba(198, 246, 137, .95) 58%, rgba(198, 246, 137, .95) 90%, transparent 90%); }
.pic-copy p { margin: 18px 0 0; color: #3E5446; font-size: 18.5px; line-height: 1.65; }
.pic-copy p b { color: #0B1D12; }
.pic-copy .pic-lead { margin-top: 26px; color: #0B1D12; font-size: 22px; font-weight: 500; line-height: 1.5; }
/* the three quotes as a mini chat: caption + bubble per line */
.pic-chat { display: grid; gap: 10px; max-width: 520px; margin-top: 22px; padding: 18px 20px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1.5px #E1E9D9, 0 24px 44px -30px rgba(11, 29, 18, .45); }
.pic-copy .pc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 15.5px; line-height: 1.4; }
.pc-say { color: #6B7F70; }
.pc-dot { margin-left: -8px; color: #6B7F70; }
.pc-me, .pc-old { justify-content: flex-end; text-align: right; }
.pc-row .q-no, .pc-row .q-you, .pc-row .q-them { padding: 8px 14px; font-size: 16.5px; white-space: nowrap; }
.pc-row .q-no { border-radius: 16px 16px 4px 16px; }
.pc-typing { display: inline-flex; gap: 4px; padding: 9px 11px; border-radius: 14px; background: #F1F4EE; }
.pc-typing b { width: 6px; height: 6px; border-radius: 50%; background: #98A69C; animation: say-dot 1s ease-in-out infinite; }
.pc-typing b:nth-child(2) { animation-delay: .15s; }
.pc-typing b:nth-child(3) { animation-delay: .3s; }
.q-no { padding: 3px 10px; border-radius: 999px; background: #EEF0EA; color: #7A8A7F; text-decoration: line-through; text-decoration-color: #E5534B; text-decoration-thickness: 2px; white-space: nowrap; }
.q-you, .q-them { padding: 4px 12px; color: #0B1D12; font-style: normal; font-weight: 700; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.q-you { border-radius: 16px 16px 4px 16px; background: linear-gradient(180deg, #EEFFC4, #D6F23C); box-shadow: 0 6px 14px -8px rgba(120, 160, 20, .8); }
.q-them { border-radius: 16px 16px 16px 4px; background: #fff; box-shadow: inset 0 0 0 1.5px #D8E3D0, 0 6px 14px -10px rgba(11, 29, 18, .4); }
.pic-copy .pic-close { margin-top: 26px; padding-left: 18px; border-left: 4px solid var(--lime-2); color: #0B1D12; font-weight: 500; }

/* the report in front of a faded pile of pitches */
.pic-vis { margin: 0; }
.pic-stage { position: relative; padding: 64px 0 0 34px; }
.pile { position: absolute; inset: 0; }
.pp { position: absolute; display: grid; gap: 9px; width: 50%; padding: 18px 20px 20px; border-radius: 18px; background: #F4F5F2; box-shadow: 0 0 0 1px #E2E5DE, 0 20px 40px -26px rgba(11, 29, 18, .4); opacity: .9; filter: saturate(.4); }
.pp-x { position: absolute; right: -12px; top: -12px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #E5534B; color: #fff; box-shadow: 0 0 0 3px #FBF8F2, 0 8px 16px -6px rgba(229, 83, 75, .7); }
.pp-x .ic { width: 16px; height: 16px; }
.pp1 { left: -10px; top: 6px; transform: rotate(-9deg); }
.pp2 { left: 16%; top: 0; transform: rotate(-3deg); }
.pp3 { right: -2%; top: 0; transform: rotate(7deg); }
.pp-ic { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 4px; border-radius: 10px; background: #EEF0EA; color: #9AA79E; }
.pp-ic .ic { width: 18px; height: 18px; }
.pp .ln { display: block; height: 8px; border-radius: 8px; background: #E9ECE6; }
.pp .w1 { width: 92%; } .pp .w2 { width: 100%; } .pp .w3 { width: 78%; } .pp .w4 { width: 54%; }
.pic-art { position: absolute; left: -58px; bottom: -40px; z-index: 3; width: 132px; height: auto; pointer-events: none; filter: drop-shadow(0 18px 20px rgba(11, 29, 18, .35)); transform: rotate(-10deg); }
@media (max-width: 1199px) { .pic-art { left: -34px; width: 112px; } }
@media (max-width: 1099px) { .pic-art { display: none; } }
.rpt { position: relative; z-index: 2; overflow: hidden; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px #E3E8EF, 0 60px 100px -50px rgba(26, 40, 90, .55), 0 0 0 10px rgba(255, 255, 255, .55); transform: rotate(1.2deg); }
.rpt-band { display: flex; align-items: center; gap: 12px; padding: 18px 24px; background: linear-gradient(120deg, #3B5BDB, #7048E8); color: #fff; }
.rpt-logo { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: #fff; color: #5A49E0; }
.rpt-logo .ic { width: 18px; height: 18px; }
.rpt-band b { font-family: var(--f-display); font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.rpt-band small { margin-left: auto; font-size: 13.5px; opacity: .88; white-space: nowrap; }
.rpt-tabs { display: flex; gap: 6px; padding: 10px 14px; background: #F2F4F8; }
.rpt-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1; height: 44px; padding: 0 10px; border: 0; border-radius: 12px; background: transparent; color: #51607A; font: 700 14.5px var(--f-body); white-space: nowrap; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.rpt-tabs button .ic { width: 17px; height: 17px; }
.rpt-tabs button:hover { color: #0B1D12; }
.rpt-tabs button[aria-selected="true"] { background: #fff; box-shadow: 0 4px 12px -6px rgba(26, 40, 90, .35), inset 0 0 0 1px #E3E8EF; color: #0B1D12; }
.rpt-tabs button[aria-selected="true"] .ic { color: #5A49E0; }
/* all three tabs share one cell, so the card is always as tall as the tallest tab */
.rpt-body { display: grid; padding: 22px 28px 26px; }
.rpt-p { grid-area: 1 / 1; display: flex; flex-direction: column; }
.rpt-p[hidden] { display: flex; visibility: hidden; }
.rpt-p { animation: sx-in .35s var(--ease); }
.rpt-p h3 { margin: 0; color: #0B1D12; font-family: var(--f-display); font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.rpt-sub { display: block; margin-top: 4px; color: #66748A; font-size: 14px; }
.rpt-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; width: min(318px, 100%); margin: 16px auto 0; }
.rd { --c: #C3CCC0; display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 62%, #fff), var(--c) 62%); box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .14), 0 5px 10px -6px rgba(11, 29, 18, .5); color: #fff; font-family: var(--f-display); font-size: 13px; font-weight: 800; }
.rd.g { --c: #22A34A; }
.rd.a { --c: #F0A42A; color: #3A2200; }
.rd.r { --c: #E5534B; }
.rd.d { color: #5B6B5F; }
.rpt-stats { display: grid; grid-template-columns: 1fr 1fr; margin: auto -28px -26px; text-align: center; }
.rpt-grid { margin-bottom: 18px; }
.rpt-stats > div { padding: 10px 10px 12px; background: #F4F6F2; }
.rpt-stats > div:first-child { background: #FFF0EE; box-shadow: inset -1px 0 0 #F2D5D1; }
.rpt-stats span { display: block; color: #66748A; font-size: 13px; }
.rpt-stats b { display: block; color: #0B1D12; font-family: var(--f-display); font-size: 34px; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.rpt-stats b.bad { color: #D93F36; }
.rpt-bars { display: grid; gap: 18px; margin-top: 30px; }
.rb { display: grid; grid-template-columns: 136px minmax(0, 1fr) 44px; align-items: center; gap: 14px; }
.rb span { color: #3E5446; font-size: 15px; }
.rb i { display: block; height: 14px; overflow: hidden; border-radius: 14px; background: #EEF1F5; }
.rb s { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8EDBA6, #22A34A); }
.rb b { color: #0B1D12; font-family: var(--f-display); font-size: 17px; font-weight: 800; text-align: right; }
.rb.you { margin-top: 6px; padding: 12px 14px; border-radius: 16px; background: #FFF1EF; }
.rb.you span { color: #0B1D12; font-weight: 700; white-space: nowrap; }
.rb.you s { background: linear-gradient(90deg, #FFA79F, #E5534B); }
.rb.you b { color: #D93F36; }
.rpt-steps { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: st; }
.rpt-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px 0; border-top: 1px dashed #E1E6EC; color: #0B1D12; font-size: 16px; line-height: 1.45; counter-increment: st; }
.rpt-steps li:first-child { border-top: 0; }
.rpt-steps li::before { content: counter(st); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(155deg, #EEFFC4, #C6F689); color: #0B1D12; font-family: var(--f-display); font-size: 15px; font-weight: 800; }
.s9-note { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; margin: 30px 0 0; color: #3E5446; font-size: 15px; text-align: center; }
.s9-note span { padding: 4px 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px #D8E3D0; color: #0B1D12; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

/* the two clips: dark cards, copy | laptop (flipped on the second). Card 1
   emerald + lime (export), card 2 indigo + sky (share link). The magnified
   panel card sits on the laptop's outer bottom corner, inside the card. */
.dk-list { display: grid; gap: 40px; max-width: 1340px; margin: 72px auto 0; }
.dk { --a: #C6F689; --a2: 198, 246, 137; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, .74fr) minmax(0, 1.4fr); align-items: center; gap: 72px; margin: 0; padding: 64px 76px 64px 72px; overflow: hidden; border: 1.5px solid transparent; border-radius: 40px; background: radial-gradient(680px 460px at 78% 56%, rgba(var(--a2), .2), transparent 70%), linear-gradient(150deg, #11432F, #0A2C1F 55%, #072018) padding-box, linear-gradient(135deg, rgba(var(--a2), .7), rgba(255, 255, 255, .06) 40%, rgba(255, 255, 255, .04) 70%, rgba(var(--a2), .35)) border-box; box-shadow: 0 60px 100px -50px rgba(7, 32, 24, .75); }
.dk-2 { --a: #5EEAD4; --a2: 94, 234, 212; grid-template-columns: minmax(0, 1.4fr) minmax(0, .74fr); padding: 64px 72px 64px 76px; background: radial-gradient(680px 460px at 22% 56%, rgba(var(--a2), .22), transparent 70%), linear-gradient(150deg, #0F3D3B, #0B2B2A 55%, #071B1B) padding-box, linear-gradient(225deg, rgba(var(--a2), .75), rgba(255, 255, 255, .06) 40%, rgba(255, 255, 255, .04) 70%, rgba(var(--a2), .35)) border-box; box-shadow: 0 60px 100px -50px rgba(12, 17, 48, .75); }
.dk-2 .dk-media { order: -1; }
/* film grain (static) */
.dk::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 220px 220px; }
.dk-copy { display: block; }
.dk-num { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 18px; border-radius: 30%; background: linear-gradient(160deg, color-mix(in srgb, var(--a) 60%, #fff), var(--a)); color: #0B1D12; font-family: var(--f-display); font-size: 28px; font-weight: 800; letter-spacing: -.03em; transform: rotate(-6deg); box-shadow: 0 0 0 6px rgba(var(--a2), .16), 0 14px 28px -10px rgba(var(--a2), .8); }
.dk-tag { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.dk-h { display: block; margin: 20px 0 14px; color: #fff; font-family: var(--f-display); font-size: clamp(32px, 2.9vw, 46px); font-weight: 800; line-height: 1.06; letter-spacing: -.035em; }
.dk-txt { display: block; color: #D2DED6; font-size: 19px; line-height: 1.65; }
.dk-2 .dk-txt { color: #CDE3E0; }
/* the laptop sits on a soft pool of the card's accent light */
.dk-win { position: relative; z-index: 1; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 0 60px -14px rgba(var(--a2), .7), 0 30px 50px -24px rgba(0, 0, 0, .7); }
.dk-win .rl-bar { gap: 7px; height: 36px; padding: 0 14px; font-size: 12px; }
.dk-win .rl-bar i { width: 10px; height: 10px; }
.dk-win .rl-bar span { margin-left: 6px; }
.dk-dev::before { left: -8%; right: -8%; top: -10%; bottom: -8%; background: radial-gradient(closest-side, rgba(var(--a2), .28), transparent); }
.dk-dev::after { background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); }
.dk .dk-zoom { --pc: var(--a); top: auto; bottom: -3cqw; width: 36cqw; font-size: max(12px, 1.8cqw); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .6), 0 0 0 .8cqw rgba(var(--a2), .35), 0 3cqw 6cqw -2cqw rgba(0, 0, 0, .7); }
.dk-1 .dk-zoom { left: auto; right: -4cqw; transform: rotate(2.5deg); }
.dk-2 .dk-zoom { right: auto; left: -4cqw; transform: rotate(-2.5deg); }
.dk .dk-zoom .z-title { font-size: max(14px, 2.3cqw); }
.dk .dk-zoom .z-row { grid-template-columns: minmax(0, 1fr) auto; }
.dk .dk-zoom .z-row small { font-size: max(11px, 1.6cqw); }
/* card 1's magnified panel covers the screen's bottom-right, so its play button moves left */
.z-brand { display: block; padding: .9cqw 0; border-top: 1px dashed #DCE4D6; color: #3E5446; }
.z-brand small { display: block; margin-bottom: .3cqw; color: #8A98A0; font-size: max(9px, 1.25cqw); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.z-check { display: flex; align-items: center; gap: 1cqw; padding: 1cqw 1.2cqw; margin: .6cqw 0; border-radius: 1cqw; background: #F6F8F4; box-shadow: inset 0 0 0 1px #E3E9DE; color: #0B1D12; font-weight: 700; }
.z-check i { flex: none; width: max(12px, 1.7cqw); height: max(12px, 1.7cqw); border-radius: .4cqw; box-shadow: inset 0 0 0 1.5px #9AA79E; background: #fff; }
.z-dl { display: flex; align-items: center; justify-content: center; gap: .8cqw; margin-top: .7cqw; padding: .9cqw; border-radius: 1cqw; background: #fff; box-shadow: inset 0 0 0 1.5px #D5DDD0; color: #0B1D12; font-weight: 700; }
.z-dl .ic { width: max(12px, 1.6cqw); height: max(12px, 1.6cqw); }

/* the two clip cards in the page's HUD shape: cut corners, a tab (card 1 at
   the top over its copy, card 2 at the bottom), an accent edge, HUD rails,
   a grid + lit floor on the window side and two floating icon tiles */
.dk.dk { --qc: 46px; --qb: 26px; --qt: 150px; --qd: 16px; --tx: 30%; overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
.dk-2.dk-2 { --tx: 70%; }
.dk::after { display: none; }
.dk-bg { position: absolute; inset: 0; z-index: -1; filter: drop-shadow(0 0 18px rgba(var(--a2), .18)) drop-shadow(0 50px 50px rgba(7, 32, 24, .45)); pointer-events: none; }
.dk-edge, .dk-fill { position: absolute; clip-path: polygon(var(--qc) 0, calc(var(--tx) - var(--qt)) 0, calc(var(--tx) - var(--qt) + var(--qd)) var(--qd), calc(var(--tx) + var(--qt) - var(--qd)) var(--qd), calc(var(--tx) + var(--qt)) 0, calc(100% - var(--qc)) 0, 100% var(--qc), 100% calc(100% - var(--qb)), calc(100% - var(--qb)) 100%, var(--qb) 100%, 0 calc(100% - var(--qb)), 0 var(--qc)); }
.dk-2 .dk-edge, .dk-2 .dk-fill { clip-path: polygon(var(--qb) 0, calc(100% - var(--qb)) 0, 100% var(--qb), 100% calc(100% - var(--qc)), calc(100% - var(--qc)) 100%, calc(var(--tx) + var(--qt)) 100%, calc(var(--tx) + var(--qt) - var(--qd)) calc(100% - var(--qd)), calc(var(--tx) - var(--qt) + var(--qd)) calc(100% - var(--qd)), calc(var(--tx) - var(--qt)) 100%, var(--qc) 100%, 0 calc(100% - var(--qc)), 0 var(--qb)); }
.dk-edge { inset: 0; background: radial-gradient(440px 260px at 0 0, rgba(var(--a2), 1), transparent 70%), radial-gradient(440px 260px at 100% 100%, rgba(var(--a2), .85), transparent 70%), radial-gradient(300px 70px at var(--tx) 0, rgba(var(--a2), .9), transparent 70%), rgba(255, 255, 255, .12); }
.dk-2 .dk-edge { background: radial-gradient(440px 260px at 100% 0, rgba(var(--a2), 1), transparent 70%), radial-gradient(440px 260px at 0 100%, rgba(var(--a2), .85), transparent 70%), radial-gradient(300px 70px at var(--tx) 100%, rgba(var(--a2), .9), transparent 70%), rgba(255, 255, 255, .12); }
.dk-fill { inset: 1.5px; overflow: hidden; background: radial-gradient(620px 440px at 72% 50%, rgba(var(--a2), .2), transparent 70%), radial-gradient(420px 300px at 10% 10%, rgba(var(--a2), .1), transparent 70%), linear-gradient(150deg, #11432F, #0A2C1F 55%, #072018); }
.dk-2 .dk-fill { background: radial-gradient(620px 440px at 28% 50%, rgba(var(--a2), .2), transparent 70%), radial-gradient(420px 300px at 90% 10%, rgba(var(--a2), .1), transparent 70%), linear-gradient(150deg, #0F3D3B, #0B2B2A 55%, #071B1B); }
/* a fine grid on the window side only */
.dk-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(var(--a2), .08) 1px, transparent 1px) 0 0 / 38px 38px, linear-gradient(90deg, rgba(var(--a2), .08) 1px, transparent 1px) 0 0 / 38px 38px; -webkit-mask-image: linear-gradient(90deg, transparent 38%, #000 62%), linear-gradient(transparent, #000 18%, #000 82%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 38%, #000 62%), linear-gradient(transparent, #000 18%, #000 82%, transparent); mask-composite: intersect; }
.dk-2 .dk-fill::after { -webkit-mask-image: linear-gradient(270deg, transparent 38%, #000 62%), linear-gradient(transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(270deg, transparent 38%, #000 62%), linear-gradient(transparent, #000 18%, #000 82%, transparent); }
/* a lit perspective floor under the window */
.dk-floor { position: absolute; right: -6%; bottom: 0; width: 66%; height: 200px; background: linear-gradient(rgba(var(--a2), .3) 1.5px, transparent 1.5px) 0 0 / 100% 26px, linear-gradient(90deg, rgba(var(--a2), .3) 1.5px, transparent 1.5px) 50% 0 / 52px 100%; transform: perspective(300px) rotateX(54deg); transform-origin: 50% 100%; -webkit-mask-image: linear-gradient(transparent, #000 70%), linear-gradient(90deg, transparent, #000 25%, #000 80%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(transparent, #000 70%), linear-gradient(90deg, transparent, #000 25%, #000 80%, transparent); mask-composite: intersect; }
.dk-2 .dk-floor { right: auto; left: -6%; }
/* HUD rails along the tab edge */
.dk-hud { --cut: 46px; --r1: var(--a); --r2: var(--a); --glow1: rgba(var(--a2), .7); --glow2: rgba(var(--a2), .7); }
.dk-1 .dk-hud .seam-l { left: 70px; right: calc(70% + 166px); top: 24px; }
.dk-1 .dk-hud .seam-r { left: calc(30% + 166px); right: 70px; top: 24px; }
.dk-2 .dk-hud { top: auto; bottom: 0; transform: scaleY(-1); }
.dk-2 .dk-hud .seam-l { left: 70px; right: calc(30% + 166px); top: 24px; }
.dk-2 .dk-hud .seam-r { left: calc(70% + 166px); right: 70px; top: 24px; }
/* two floating icon tiles near the window */
.dk-deco { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.dk-chip { position: absolute; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 30%; background: linear-gradient(160deg, color-mix(in srgb, var(--a) 55%, #fff), var(--a)); color: #0B1D12; box-shadow: 0 0 0 6px rgba(var(--a2), .14), 0 16px 30px -10px rgba(0, 0, 0, .6); animation: s3-bob 7s ease-in-out infinite; }
.dk-chip .ic { width: 26px; height: 26px; }
.dk-chip.k2 { width: 46px; height: 46px; background: #fff; color: color-mix(in srgb, var(--a) 40%, #0B1D12); animation-delay: -3.5s; }
.dk-chip.k2 .ic { width: 21px; height: 21px; }
.dk-1 .k1 { left: calc(37% - 10px); top: 40px; transform: rotate(-10deg); }
.dk-1 .k2 { right: 92px; top: 30px; transform: rotate(8deg); }
.dk-2 .k1 { right: calc(37% - 10px); bottom: 40px; transform: rotate(10deg); }
.dk-2 .k2 { right: 92px; top: 30px; transform: rotate(8deg); }
@media (max-width: 1099px) {
    .dk.dk { --tx: 50%; --qt: 120px; }
    .dk-2.dk-2 { --tx: 50%; }
    .dk-1 .dk-hud .seam-l, .dk-2 .dk-hud .seam-l { right: calc(50% + 136px); }
    .dk-1 .dk-hud .seam-r, .dk-2 .dk-hud .seam-r { left: calc(50% + 136px); }
    .dk-floor, .dk-2 .dk-floor { left: 0; right: 0; width: 100%; }
    .dk-fill::after, .dk-2 .dk-fill::after { -webkit-mask-image: linear-gradient(transparent 45%, #000 70%); mask-image: linear-gradient(transparent 45%, #000 70%); }
    .dk-chip { display: none; }
}
@media (max-width: 767px) {
    .dk.dk { --qc: 24px; --qb: 16px; --qt: 70px; --qd: 10px; }
    .dk-hud { --cut: 24px; }
    .dk-1 .dk-hud .seam-l, .dk-2 .dk-hud .seam-l { left: 34px; right: calc(50% + 82px); top: 16px; }
    .dk-1 .dk-hud .seam-r, .dk-2 .dk-hud .seam-r { left: calc(50% + 82px); right: 34px; top: 16px; }
}
@media (min-width: 1100px) and (max-width: 1439px) {
    .pp3 { right: 0; }
    .dk { gap: 52px; padding: 52px 56px; }
    .dk-2 { padding: 52px 56px; }
}
@media (max-width: 1199px) {
    .pic-grid { gap: 56px; }
    .rb { grid-template-columns: 146px minmax(0, 1fr) 40px; }
}
@media (max-width: 1099px) {
    .pic-grid { grid-template-columns: 1fr; max-width: 680px; margin: 0 auto; }
    /* cards stack: copy on top, laptop below */
    .dk-list { max-width: 720px; margin-top: 64px; gap: 32px; }
    .dk, .dk-2 { grid-template-columns: 1fr; gap: 40px; padding: 52px 48px 64px; }
    .dk-2 .dk-media { order: 0; }
    .dk .dk-zoom { bottom: -5cqw; }
    .dk-1 .dk-zoom { right: -2cqw; }
    .dk-2 .dk-zoom { left: -2cqw; }
}
@media (max-width: 767px) {
    .sec-pic { padding: 34px 0 100px; }
    .pic-copy p { font-size: 17px; }
    .pic-copy .pic-lead { font-size: 19px; }
    .pic-stage { padding: 48px 0 0 10px; }
    .pp3 { right: 2%; transform: rotate(5deg); }
    .rpt-band { padding: 14px 16px; }
    .rpt-band small { display: none; }
    .rpt-tabs { padding: 8px; gap: 4px; }
    .rpt-tabs button { gap: 6px; height: 40px; padding: 0 6px; font-size: 13px; }
    .rpt-tabs button .ic { width: 15px; height: 15px; }
    .rpt-body { padding: 18px 16px 20px; }
    .rpt-grid { gap: 6px; }
    .rd { font-size: 11px; }
    .rpt-stats b { font-size: 28px; }
    .rb { grid-template-columns: 1fr 40px; gap: 6px 10px; }
    .rb span { grid-column: 1 / -1; }
    .dk-list { margin-top: 52px; gap: 24px; }
    .dk, .dk-2 { gap: 30px; padding: 36px 24px 44px; border-radius: 30px; }
    .dk-num { width: 58px; height: 58px; font-size: 23px; }
    .dk-txt { font-size: 17px; }
}
@media (max-width: 559px) {
    .dk, .dk-2 { padding: 30px 16px 30px; }
    .dk .dk-zoom, .dk-1 .dk-zoom, .dk-2 .dk-zoom { position: relative; top: auto; bottom: auto; left: auto; right: auto; width: 92%; margin: -2px auto 0; font-size: 13px; transform: none; }
    .z-brand small { font-size: 10.5px; }
    .z-check, .z-dl { padding: 8px 10px; border-radius: 8px; gap: 8px; }
}


/* ==========================================================
   SECTION 10 — EVERYTHING INSIDE (light lavender mist)
   A lavender wave out of the warm section 9. The five real-app clips
   are left-right white cards, each in its own pastel (posts blue,
   articles violet, site plan amber, scans teal, bell coral) with a chip
   that quotes an on-screen label; then the 12 features (plan table =
   section 11, upgrade clips = section 12).
   ========================================================== */
.sec-feat { position: relative; isolation: isolate; padding: 54px 0 140px; background: linear-gradient(180deg, #EFF0FD 0, #EFF0FD 80px, #F6F6FF 40%, #FAFAFF 80%, #F4F5FD 100%); color: #3E4A60; }
.s10-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(640px 480px at 6% 12%, rgba(160, 130, 255, .2), transparent 70%), radial-gradient(640px 480px at 94% 8%, rgba(110, 180, 255, .2), transparent 70%), radial-gradient(700px 520px at 4% 52%, rgba(255, 190, 150, .16), transparent 70%), radial-gradient(700px 520px at 96% 60%, rgba(120, 225, 200, .18), transparent 70%), radial-gradient(900px 520px at 50% 92%, rgba(198, 246, 137, .2), transparent 70%); }
/* dot texture only at the side margins, never behind copy */
.s10-bg::before { content: ""; position: absolute; inset: 0 0 32%; background: radial-gradient(circle, rgba(70, 80, 160, .22) 1.2px, transparent 1.6px) 0 0 / 26px 26px; -webkit-mask-image: linear-gradient(90deg, #000, transparent 12%, transparent 88%, #000); mask-image: linear-gradient(90deg, #000, transparent 12%, transparent 88%, #000); }
.s10-wrap { position: relative; z-index: 1; max-width: 1340px; }
.s10-head { text-align: center; }
.s10-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px 7px 11px; border-radius: 999px; background: #161B3A; color: #fff; font-size: 14px; font-weight: 700; }
.s10-kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 3px rgba(214, 242, 60, .25); }
.s10-kicker.k-soft { background: #fff; box-shadow: inset 0 0 0 1.5px #D9DCF2; color: #161B3A; }
.s10-kicker.k-soft i { background: #8B55EE; box-shadow: 0 0 0 3px rgba(139, 85, 238, .2); }
.s10-title { text-wrap: balance; margin: 20px 0 0; color: #10142B; font-family: var(--f-display); font-size: clamp(40px, 5.2vw, 80px); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; }
.s10-title .mk, .s10-h3 .mk { padding: 0 .06em; background: linear-gradient(transparent 58%, rgba(198, 246, 137, .95) 58%, rgba(198, 246, 137, .95) 90%, transparent 90%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (max-width: 899px) { .s10-title .br-d { display: none; } }
@media (min-width: 900px) { .s10-title .mk { white-space: nowrap; } }
.s10-sub { max-width: 40em; margin: 18px auto 0; color: #3E4A60; font-size: 20px; line-height: 1.55; text-wrap: balance; }
.s10-sub b { padding: 2px 10px; border-radius: 999px; background: #161B3A; color: #fff; font-size: .86em; }
.s10-h3 { margin: 18px 0 0; color: #10142B; font-family: var(--f-display); font-size: clamp(32px, 3.8vw, 56px); font-weight: 800; line-height: 1.05; letter-spacing: -.04em; }
.s10-sub-head .s10-h3:first-child { margin-top: 0; }

/* ---------- the five feature cards ---------- */
.fc-list { display: grid; gap: 34px; margin-top: 64px; }
.fc { --fc: #2F7CF6; --ft: #EAF2FF; --fs: 47, 124, 246; position: relative; display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.3fr); align-items: center; gap: 60px; margin: 0; padding: 30px 30px 30px 56px; border-radius: 38px; background: #fff; box-shadow: 0 0 0 1.5px rgba(var(--fs), .14), 0 50px 90px -60px rgba(30, 40, 90, .55), 0 18px 36px -30px rgba(30, 40, 90, .3); }
.fc.flip { grid-template-columns: minmax(0, 1.3fr) minmax(0, .78fr); padding: 30px 56px 30px 30px; }
.fc.flip .fc-stage { order: -1; }
.fc-violet { --fc: #8B55EE; --ft: #F1EAFF; --fs: 139, 85, 238; }
.fc-amber { --fc: #E08A00; --ft: #FFF2DC; --fs: 224, 138, 0; }
.fc-teal { --fc: #0FA88E; --ft: #E1F7F2; --fs: 15, 168, 142; }
.fc-coral { --fc: #E5534B; --ft: #FFEAE7; --fs: 229, 83, 75; }
/* the cut-corner card (light): an edge in the card's colour + a white fill, both
   clipped; the soft glow under it is the card's own box-shadow */
.fc.fc { isolation: isolate; border-radius: 0; background: none; box-shadow: 0 40px 90px -46px rgba(var(--fs), .6), 0 0 110px -60px rgba(var(--fs), .7); }
.fc::before, .fc::after { content: ""; position: absolute; z-index: -1; clip-path: polygon(36px 0, calc(100% - 36px) 0, 100% 36px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 36px); pointer-events: none; }
.fc::before { inset: 0; background: linear-gradient(135deg, rgba(var(--fs), .95), rgba(var(--fs), .18) 34%, rgba(var(--fs), .1) 66%, rgba(var(--fs), .75)); }
.fc::after { inset: 1.5px; background: radial-gradient(420px 260px at 0 0, rgba(var(--fs), .08), transparent 70%), linear-gradient(160deg, #fff, #FCFCFF); }
.fc-copy { display: block; }
.fc-copy .fc-ic { margin-bottom: 0; }
.fc-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: linear-gradient(155deg, color-mix(in srgb, var(--fc) 55%, #fff), var(--fc)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 14px 26px -12px var(--fc); color: #fff; transform: rotate(-6deg); }
.fc-ic .ic { width: 30px; height: 30px; }
.fc-tag { margin-top: 26px; background: #161B3A; }
.fc-h { display: block; margin: 22px 0 12px; color: #10142B; font-family: var(--f-display); font-size: clamp(30px, 2.7vw, 42px); font-weight: 800; line-height: 1.07; letter-spacing: -.035em; }
.fc-txt { display: block; color: #3E4A60; font-size: 18.5px; line-height: 1.65; }
/* the pastel stage with the app window (fully inside the card) */
.fc-stage { position: relative; padding: 34px 34px 34px; border-radius: 28px; background: radial-gradient(circle, rgba(var(--fs), .16) 1.2px, transparent 1.6px) 0 0 / 22px 22px, linear-gradient(150deg, var(--ft), color-mix(in srgb, var(--ft) 55%, #fff)); box-shadow: inset 0 0 0 1px rgba(var(--fs), .12); }
.fw-win { position: relative; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(30, 40, 90, .08), 0 34px 60px -32px rgba(var(--fs), .7), 0 14px 30px -20px rgba(30, 40, 90, .35); }
.fw-win .rl-bar { height: 38px; gap: 6px; padding: 0 14px; font-size: 12px; }
.fw-win .rl-bar i { width: 10px; height: 10px; }
.fw-win .rl-bar span { margin-left: 8px; }
.fw-win .rl-vid { border-radius: 0; }
/* the chip: an on-screen label, enlarged, overlapping the stage corner */
.fx { position: absolute; z-index: 3; display: grid; gap: 8px; padding: 14px 16px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1.5px rgba(var(--fs), .25), 0 0 0 7px rgba(var(--fs), .1), 0 24px 40px -18px rgba(30, 40, 90, .45); color: #10142B; font-size: 14.5px; line-height: 1.3; }
.fc:not(.flip) .fx { left: -26px; bottom: 26px; transform: rotate(-2.5deg); }
.fc.flip .fx { right: -26px; bottom: 26px; transform: rotate(2.5deg); }
.fx small { color: #6B7590; font-size: 12.5px; }
.fx-a b { font-size: 16px; }
.fx-row { display: flex; gap: 22px; }
.fx-go, .fx-add { display: inline-flex; align-items: center; justify-self: start; gap: 6px; padding: 7px 14px; border-radius: 10px; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.fx-go { background: #B9EE6E; color: #10350F; }
.fx-go .ic { width: 14px; height: 14px; }
.fx-warn { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: #FFF6DA; box-shadow: inset 0 0 0 1px #F3DD95; color: #7A4B00; font-size: 13.5px; font-weight: 700; }
.fx-warn .ic { width: 16px; height: 16px; flex: none; }
.fx-c { max-width: 240px; background: #FFF9EA; box-shadow: 0 0 0 1.5px #F3DD95, 0 0 0 7px rgba(224, 138, 0, .1), 0 24px 40px -18px rgba(30, 40, 90, .45); }
.fx-c small { color: #7A4B00; font-weight: 600; }
.fx-add { background: #fff; box-shadow: inset 0 0 0 1.5px #D7DCE6; color: #10142B; }
.fx-d { grid-auto-flow: column; gap: 22px; }
.fx-d small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.fx-d b { display: block; margin-top: 2px; font-family: var(--f-display); font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.fx-d span:first-child b { color: #0FA88E; }
.fx-n { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 700; }
.fx-n i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #22A34A; box-shadow: 0 0 0 3px rgba(34, 163, 74, .2); }
.fx-n + .fx-n { padding-top: 8px; border-top: 1px dashed #E3E6EF; }

/* ---- every feature stands out: a big number + glowing icon, a watermark icon,
   a marked headline and a saturated colour stage with the window tilted on it ---- */
.fc-copy { position: relative; isolation: isolate; }
.fc-top { display: flex; align-items: center; gap: 18px; }
.fc-top .fc-ic { width: 74px; height: 74px; border-radius: 30%; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 8px rgba(var(--fs), .12), 0 18px 32px -12px var(--fc); }
.fc-top .fc-ic .ic { width: 34px; height: 34px; transform: rotate(6deg); }
.fc-no { font-family: var(--f-display); font-size: 64px; font-weight: 800; line-height: .9; letter-spacing: -.05em; background: linear-gradient(170deg, color-mix(in srgb, var(--fc) 45%, #fff), var(--fc)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fc-wm { position: absolute; left: -30px; bottom: -40px; z-index: -1; width: 260px; height: 260px; color: var(--fc); opacity: .07; transform: rotate(-12deg); pointer-events: none; }
.fc .fc-h { display: inline; margin: 0; padding: 0 .06em; font-size: clamp(34px, 3.1vw, 50px); line-height: 1.12; background: linear-gradient(transparent 60%, rgba(var(--fs), .2) 60%, rgba(var(--fs), .2) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.fc .fc-copy .fc-h { margin-top: 0; }
.fc .fc-top { margin-bottom: 26px; }
.fc .fc-txt { margin-top: 16px; }
.fc .fc-stage { background: radial-gradient(60% 50% at 72% 18%, rgba(255, 255, 255, .38), transparent 70%), radial-gradient(circle, rgba(255, 255, 255, .26) 1.3px, transparent 1.8px) 0 0 / 22px 22px, linear-gradient(150deg, color-mix(in srgb, var(--fc) 62%, #fff), var(--fc) 52%, color-mix(in srgb, var(--fc) 72%, #000)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 34px 60px -30px rgba(var(--fs), .85); }
.fc .fc-stage .fw-win { transform: rotate(-1.2deg); box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 40px 70px -30px rgba(0, 0, 0, .55), 0 0 60px -20px rgba(255, 255, 255, .6); }
.fc.flip .fc-stage .fw-win { transform: rotate(1.2deg); }
@media (max-width: 767px) {
    .fc-top .fc-ic { width: 58px; height: 58px; }
    .fc-top .fc-ic .ic { width: 26px; height: 26px; }
    .fc-no { font-size: 48px; }
    .fc .fc-h { font-size: 28px; }
    .fc-wm { width: 180px; height: 180px; }
    .fc .fc-stage .fw-win, .fc.flip .fc-stage .fw-win { transform: none; }
}

/* ---- the 12 tools on a dark emerald cut-corner panel, "+" badge on its top tab ---- */
.ft-panel { --qc: 50px; --qb: 28px; --qt: 180px; --qd: 18px; position: relative; isolation: isolate; margin-top: 100px; padding: 70px 40px 44px; }
.ft-pbg { position: absolute; inset: 0; z-index: -1; filter: drop-shadow(0 0 18px rgba(198, 246, 137, .2)) drop-shadow(0 50px 50px rgba(11, 29, 18, .4)); pointer-events: none; }
.ft-pedge, .ft-pfill { position: absolute; clip-path: polygon(var(--qc) 0, calc(50% - var(--qt)) 0, calc(50% - var(--qt) + var(--qd)) var(--qd), calc(50% + var(--qt) - var(--qd)) var(--qd), calc(50% + var(--qt)) 0, calc(100% - var(--qc)) 0, 100% var(--qc), 100% calc(100% - var(--qb)), calc(100% - var(--qb)) 100%, var(--qb) 100%, 0 calc(100% - var(--qb)), 0 var(--qc)); }
.ft-pedge { inset: 0; background: radial-gradient(440px 260px at 0 0, #D6F23C, transparent 70%), radial-gradient(440px 260px at 100% 0, #5EEAD4, transparent 70%), radial-gradient(300px 70px at 50% 0, rgba(214, 242, 60, .9), transparent 70%), radial-gradient(420px 240px at 100% 100%, rgba(139, 85, 238, .7), transparent 70%), radial-gradient(420px 240px at 0 100%, rgba(47, 124, 246, .6), transparent 70%), rgba(255, 255, 255, .12); }
.ft-pfill { inset: 1.5px; overflow: hidden; background: radial-gradient(520px 360px at 12% 30%, rgba(139, 85, 238, .18), transparent 70%), radial-gradient(520px 360px at 88% 70%, rgba(94, 234, 212, .14), transparent 70%), radial-gradient(500px 200px at 50% 0, rgba(214, 242, 60, .12), transparent 70%), linear-gradient(160deg, #113022, #0B1D12 60%, #07130D); }
.ft-hud { --cut: 50px; --r1: #D6F23C; --r2: #5EEAD4; }
.ft-hud .seam-l, .ft-hud .seam-r { top: 26px; }
.ft-hud .seam-l { right: calc(50% + 196px); }
.ft-hud .seam-r { left: calc(50% + 196px); }
.ft-panel .ft-div { position: absolute; left: 50%; top: -28px; height: auto; margin: 0 0 0 -28px; }
.ft-panel .ft-div::before { display: none; }
.ft-panel .ft-div i { box-shadow: 0 0 0 8px rgba(214, 242, 60, .16), 0 0 30px -4px rgba(214, 242, 60, .8); }
.ft-panel .ft-grid { margin-top: 0; }
.ft-panel .ft { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.ft-panel .ft:hover { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fc) 70%, transparent), 0 24px 40px -24px color-mix(in srgb, var(--fc) 70%, transparent); }
.ft-panel .ft h3 { color: #fff; }
.ft-panel .ft p { color: #B5C6BA; }
.ft-panel .ft-ic { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 26px -4px var(--fc); }
@media (max-width: 767px) {
    .ft-panel { --qc: 26px; --qb: 16px; --qt: 80px; --qd: 12px; margin-top: 70px; padding: 50px 10px 14px; }
    .ft-hud { --cut: 26px; }
    .ft-hud .seam-l { right: calc(50% + 96px); top: 18px; }
    .ft-hud .seam-r { left: calc(50% + 96px); top: 18px; }
    .ft-panel .ft-div { top: -24px; margin-left: -24px; }
    .ft-panel .ft-div i { width: 48px; height: 48px; }
}

/* ---------- the 12 features ---------- */
/* "+ all of these": a dashed divider with a plus badge */
.ft-div { position: relative; display: grid; place-items: center; height: 56px; margin-top: 70px; }
.ft-div::before { content: ""; position: absolute; left: 6%; right: 6%; top: 50%; border-top: 2px dashed #C9CEEA; }
.ft-div i { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 30%; background: linear-gradient(160deg, #F2FF9C, var(--acid)); color: var(--ink); box-shadow: 0 0 0 8px #F6F6FF, 0 14px 26px -10px rgba(110, 170, 30, .7); transform: rotate(-6deg); }
.ft-div .ic { width: 26px; height: 26px; transform: rotate(6deg); }
.ft-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 34px; }
.ft { --fc: #2F7CF6; position: relative; padding: 24px 22px; border-radius: 24px; background: linear-gradient(170deg, color-mix(in srgb, var(--fc) 7%, #fff), #fff 55%); box-shadow: 0 0 0 1.5px rgba(30, 40, 90, .07), 0 24px 44px -36px rgba(30, 40, 90, .5); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.ft:hover { transform: translateY(-4px); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--fc) 40%, transparent), 0 30px 50px -34px color-mix(in srgb, var(--fc) 60%, transparent); }
.ft:nth-child(6n+2) { --fc: #8B55EE; }
.ft:nth-child(6n+3) { --fc: #E08A00; }
.ft:nth-child(6n+4) { --fc: #0FA88E; }
.ft:nth-child(6n+5) { --fc: #E5534B; }
.ft:nth-child(6n+6) { --fc: #4F9A16; }
.ft-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 30%; background: linear-gradient(155deg, color-mix(in srgb, var(--fc) 50%, #fff), var(--fc)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 12px 22px -10px var(--fc); color: #fff; transform: rotate(-6deg); }
.ft-ic .ic { width: 26px; height: 26px; transform: rotate(6deg); }
.ft h3 { margin: 16px 0 6px; color: #10142B; font-family: var(--f-display); font-size: 20px; font-weight: 800; line-height: 1.2; letter-spacing: -.015em; }
.ft p { margin: 0; color: #4D5873; font-size: 15px; line-height: 1.5; }



/* ---------- and where it can grow (section 12) ---------- */
/* a lavender section of its own after the dark plan table */
.sec-grow { position: relative; isolation: isolate; padding: 50px 0 110px; background: linear-gradient(180deg, #EFF0FD 0, #EFF0FD 80px, #F6F6FF 50%, #F4F5FD 100%); color: #3E4A60; }
.s10-h3.s12-title { font-size: clamp(40px, 5.2vw, 78px); letter-spacing: -.045em; text-wrap: balance; }
.sec-grow .s10-bg { -webkit-mask-image: linear-gradient(transparent, #000 160px); mask-image: linear-gradient(transparent, #000 160px); }
.gw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 70px; }
.grow-art { display: none; }
@media (min-width: 1100px) {
    .s10-sub-head { position: relative; }
    .grow-art { display: block; position: absolute; right: -10px; top: -10px; width: 190px; height: auto; pointer-events: none; filter: drop-shadow(0 22px 24px rgba(30, 40, 90, .3)); transform: rotate(6deg); }
}
@media (min-width: 1100px) and (max-width: 1299px) { .grow-art { width: 150px; right: -20px; } }
.gw { --gc: 99, 102, 241; --gh: #6366F1; position: relative; isolation: isolate; min-width: 0; margin: 0; padding: 22px 16px 26px; box-shadow: 0 40px 80px -46px rgba(var(--gc), .65), 0 0 100px -60px rgba(var(--gc), .7); }
.gw-2 { --gc: 224, 160, 30; --gh: #E0A01E; }
.gw-3 { --gc: 15, 168, 142; --gh: #0FA88E; }
/* the cut-corner card: an edge in the tier colour + a white fill */
.gw::before, .gw::after { content: ""; position: absolute; z-index: -1; clip-path: polygon(30px 0, calc(100% - 30px) 0, 100% 30px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 30px); pointer-events: none; }
.gw::before { inset: 0; background: linear-gradient(135deg, rgba(var(--gc), .95), rgba(var(--gc), .18) 34%, rgba(var(--gc), .1) 66%, rgba(var(--gc), .75)); }
.gw::after { inset: 1.5px; background: radial-gradient(360px 220px at 0 100%, rgba(var(--gc), .08), transparent 70%), linear-gradient(170deg, #fff, #FCFCFF); }
.gw-stage { position: relative; padding: 58px 20px 22px; border-radius: 22px; background: radial-gradient(360px 240px at 50% 0, rgba(140, 120, 255, .45), transparent 70%), linear-gradient(160deg, #1E2766, #121946 60%, #0C1130); }
.gw-2 .gw-stage { background: radial-gradient(360px 240px at 50% 0, rgba(255, 194, 61, .38), transparent 70%), linear-gradient(160deg, #2A2412, #1B170C 60%, #110E07); }
.gw-3 .gw-stage { background: radial-gradient(360px 240px at 50% 0, rgba(120, 225, 200, .35), transparent 70%), linear-gradient(160deg, #10372C, #0A2620 60%, #071A15); }
/* the upgrade ribbon hangs from the card's top edge, in the tier colour */
.gw-badge { position: absolute; left: 50%; top: -22px; z-index: 2; display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px 11px 12px; border-radius: 0 0 14px 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--gh) 70%, #fff), var(--gh)); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), 0 14px 26px -12px rgba(var(--gc), .9); transform: translateX(-50%); }
.gw-2 .gw-badge { color: #2B1A00; }
.gw-badge::before, .gw-badge::after { content: ""; position: absolute; top: 0; width: 10px; height: 10px; background: color-mix(in srgb, var(--gh) 60%, #000); }
.gw-badge::before { left: -10px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.gw-badge::after { right: -10px; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.gw-badge .gw-lock { width: 22px; height: 22px; padding: 4px; border-radius: 7px; background: rgba(0, 0, 0, .22); color: #fff; }
.gw-2 .gw-badge .gw-lock { background: #2B1A00; color: #FFD45C; }
.gw .fw-win { box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .7); }
.gw .fw-win .rl-bar { height: 30px; font-size: 10.5px; }
.gw .fw-win .rl-bar i { width: 8px; height: 8px; }
.gw .gw-cap { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 14px; margin-top: 22px; padding: 0 8px; }
.gw-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 30%; background: linear-gradient(155deg, color-mix(in srgb, var(--gh) 50%, #fff), var(--gh)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 12px 22px -10px var(--gh); transform: rotate(-6deg); }
.gw-ic .ic { width: 22px; height: 22px; transform: rotate(6deg); }
.gw-cap b { color: #10142B; font-family: var(--f-display); font-size: clamp(21px, 1.7vw, 25px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.gw-tx { grid-column: 1 / -1; margin-top: 10px; color: #3E4A60; font-size: 16px; line-height: 1.6; }

@media (max-width: 1199px) {
    .fc { gap: 40px; padding: 26px 26px 26px 40px; }
    .fc.flip { padding: 26px 40px 26px 26px; }
    .ft-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .gw-grid { gap: 18px; }
}
@media (max-width: 1023px) {
    .fc, .fc.flip { grid-template-columns: 1fr; gap: 30px; max-width: 720px; margin: 0 auto; padding: 40px 30px 30px; }
    .fc.flip .fc-stage { order: 0; }
    .fc:not(.flip) .fx, .fc.flip .fx { left: auto; right: -14px; bottom: -18px; transform: rotate(2deg); }
    .gw-grid { grid-template-columns: minmax(0, 1fr); row-gap: 56px; max-width: 560px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 767px) {
    .sec-feat { padding: 34px 0 100px; }
    .s10-sub { font-size: 17px; }
    .fc-list { margin-top: 44px; gap: 22px; }
    .fc, .fc.flip { padding: 30px 18px 18px; }
    .fc::before, .fc::after { clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 22px); }
    .fc-txt { font-size: 17px; }
    .fc-stage { padding: 16px; border-radius: 20px; }
    .fw-win { border-radius: 12px; }
    .fw-win .rl-bar { height: 30px; font-size: 10.5px; }
    .fc:not(.flip) .fx, .fc.flip .fx { position: relative; right: auto; bottom: auto; margin: -8px auto 0; justify-self: center; width: fit-content; max-width: 100%; transform: none; }
    .fc-stage { display: grid; }
    .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
    .ft-div { margin-top: 50px; }
    .ft { padding: 16px 14px; border-radius: 18px; }
    .ft-ic { width: 42px; height: 42px; }
    .ft-ic .ic { width: 20px; height: 20px; }
    .ft h3 { margin-top: 12px; font-size: 15.5px; }
    .ft p { font-size: 13px; line-height: 1.45; }
    .sec-grow { padding: 34px 0 96px; }
}
@media (max-width: 559px) {
    .fx-d { gap: 16px; }
}


/* ==========================================================
   SECTION 11 — PLAN BY PLAN (dark midnight)
   A dark wave out of the lavender features section. The live page's
   comparison table on a deep midnight card; the Platinum column is lit
   in lime (solid lime head, glowing band); footnote and the CTA.
   ========================================================== */
.sec-plans { --pi: max(16px, calc(50% - 720px)); position: relative; isolation: isolate; padding: 104px 0 210px; background: linear-gradient(180deg, #F4F5FD, #EFF0FD); color: #C4CAE4; overflow-x: clip; }
.s11-bg, .pnl-hud { position: absolute; top: 24px; bottom: 70px; left: var(--pi); right: var(--pi); pointer-events: none; }
.s11-bg { z-index: -1; overflow: hidden; clip-path: polygon(46px 0, calc(100% - 46px) 0, 100% 46px, 100% calc(100% - 46px), calc(100% - 46px) 100%, 46px 100%, 0 calc(100% - 46px), 0 46px); background: radial-gradient(700px 520px at 8% 30%, rgba(139, 85, 238, .22), transparent 70%), radial-gradient(640px 560px at 80% 55%, rgba(198, 246, 137, .14), transparent 70%), radial-gradient(700px 480px at 18% 92%, rgba(80, 200, 220, .12), transparent 70%), linear-gradient(180deg, #0A0D22, #0D1230 45%, #0A0E24); box-shadow: 0 60px 120px -60px rgba(10, 13, 34, .6); }
.pnl-hud { z-index: 2; }
/* faint perspective grid floor, below the table (never behind the copy) */
.s11-bg::before { content: ""; position: absolute; left: -20%; right: -20%; bottom: -10%; height: 70%; background: linear-gradient(rgba(150, 160, 255, .14) 1px, transparent 1px) 0 0 / 64px 64px, linear-gradient(90deg, rgba(150, 160, 255, .14) 1px, transparent 1px) 0 0 / 64px 64px; transform: perspective(700px) rotateX(62deg); transform-origin: 50% 100%; -webkit-mask-image: radial-gradient(60% 80% at 50% 100%, #000, transparent); mask-image: radial-gradient(60% 80% at 50% 100%, #000, transparent); }
.s11-bg::after { content: ""; position: absolute; inset: 0; opacity: .5; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 220px 220px; }
.s11-wrap { position: relative; z-index: 1; max-width: 1200px; }
.s11-head { text-align: center; }
.s11-title { margin: 0; color: #fff; font-family: var(--f-display); font-size: clamp(40px, 5.2vw, 78px); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; }
.s11-title .hl { padding: 0 .04em .06em; color: transparent; background: linear-gradient(90deg, #F2FF9C, #D6F23C 50%, #9BEA6A); -webkit-background-clip: text; background-clip: text; }
.s11-sub { margin: 16px auto 0; color: #B9C0DE; font-size: 20px; line-height: 1.55; }

.pt-wrap { max-width: 1080px; margin: 50px auto 0; overflow-x: auto; border-radius: 30px; background: linear-gradient(170deg, #161C40, #10153A 60%, #0E1333); box-shadow: inset 0 0 0 1.5px rgba(160, 170, 255, .14), 0 60px 110px -50px #000, 0 0 90px -40px rgba(139, 85, 238, .5); }
.pt-table { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: 16px; }
.pt-table th, .pt-table td { padding: 17px 22px; border-top: 1px solid rgba(255, 255, 255, .07); text-align: center; vertical-align: middle; }
.pt-table tbody tr:first-child > * { border-top: 0; }
.pt-table tbody th { color: #EEF0FA; font-weight: 600; text-align: left; }
.pt-table td { color: #B9C0DE; white-space: nowrap; }
.pt-table thead th { padding: 26px 22px 22px; border-top: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); color: #fff; font-family: var(--f-display); font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.pt-table thead small { display: block; margin-top: 3px; color: #9AA3C8; font-family: var(--f-body); font-size: 15px; font-weight: 700; letter-spacing: 0; }
.pt-table .ic { display: inline-block; width: 20px; height: 20px; color: #6EE7A0; vertical-align: -4px; }
.pt-no { color: #545C82; font-weight: 700; }
/* Platinum column: a lime band, solid lime head */
.pt-table .hl { background: rgba(198, 246, 137, .08); color: #F4FFE0; font-weight: 700; box-shadow: inset 1.5px 0 0 rgba(198, 246, 137, .45), inset -1.5px 0 0 rgba(198, 246, 137, .45); }
.pt-table .hl .ic { color: var(--lime); }
.pt-table thead .hl { background: linear-gradient(180deg, #E9FFB4, #C6F689); color: var(--ink); box-shadow: 0 0 40px -6px rgba(198, 246, 137, .55); }
.pt-table thead .hl small { color: #2E5A0E; }
.pt-table tbody tr:last-child .hl { box-shadow: inset 1.5px 0 0 rgba(198, 246, 137, .45), inset -1.5px 0 0 rgba(198, 246, 137, .45), inset 0 -1.5px 0 rgba(198, 246, 137, .45); }
.pt-table tbody tr:hover > * { background: rgba(255, 255, 255, .035); }
.pt-table tbody tr:hover > .hl { background: rgba(198, 246, 137, .13); }
.pt-note { display: flex; align-items: flex-start; gap: 12px; max-width: 1080px; margin: 14px auto 0; padding: 14px 20px 14px 14px; border-radius: 18px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(160, 170, 255, .14); color: #A9B1D2; font-size: 14px; line-height: 1.55; text-align: left; }
.pn-ic { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 9px; background: rgba(111, 184, 255, .16); color: #8EC5FF; }
.pn-ic .ic { width: 16px; height: 16px; }
/* plan headers in their plan colours (as in the pricing section) */
.pt-wrap { overflow: visible; }
.pt-table thead th:not(:first-child) { position: relative; padding-top: 30px; font-size: 22px; }
.pt-table thead small { margin-top: 4px; font-family: var(--f-display); font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.ph-ic { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 30%; transform: rotate(-6deg); }
.pt-table .ph-ic .ic { width: 22px; height: 22px; color: inherit; vertical-align: 0; transform: rotate(6deg); }
.ph-basic .ph-ic { background: linear-gradient(160deg, #F2F5F3, #AEBDB4); color: #1F2B25; box-shadow: 0 10px 20px -8px rgba(200, 215, 205, .6); }
.ph-gold .ph-ic { background: linear-gradient(160deg, #FFE7A0, #F2A51B); color: #3A2200; box-shadow: 0 10px 20px -8px rgba(255, 194, 61, .7); }
.ph-plat .ph-ic { background: #0B1D12; color: var(--acid); box-shadow: 0 10px 20px -8px rgba(11, 29, 18, .7); }
.pt-table thead .ph-basic { background: linear-gradient(180deg, rgba(228, 236, 231, .1), transparent); box-shadow: inset 0 3px 0 rgba(228, 236, 231, .55); }
.pt-table thead .ph-gold { background: linear-gradient(180deg, rgba(255, 194, 61, .14), transparent); box-shadow: inset 0 3px 0 rgba(255, 194, 61, .8); }
.pt-table thead .ph-gold small { color: #FFD45C; }
.pt-table thead .ph-basic small { color: #E4ECE7; }
.pt-table thead th.ph-plat { border-radius: 22px 22px 0 0; }
.pt-tag { position: absolute; left: 50%; top: -18px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px 6px 8px; border-radius: 11px; background: linear-gradient(180deg, #FFF0A0, #FFD23F 50%, #F5B312); color: #2B1A00; font-family: var(--f-body); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; box-shadow: inset 0 -2px 0 rgba(140, 80, 0, .3), 0 0 26px -6px rgba(255, 196, 40, .8); transform: translateX(-50%) rotate(-3deg); }
.pt-tag .ic { width: 20px; height: 20px; padding: 3px; border-radius: 6px; background: #2B1A00; color: #FFD23F; vertical-align: 0; }
/* row labels with icons, soft stripes, a lit row on hover */
.rw-ic { --rc: #4F94FF; display: inline-grid; place-items: center; width: 38px; height: 38px; margin-right: 14px; border-radius: 30%; background: linear-gradient(155deg, color-mix(in srgb, var(--rc) 55%, #fff), var(--rc)); color: #fff; vertical-align: middle; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 18px -4px var(--rc); transform: rotate(-6deg); }
.pt-table .rw-ic .ic { width: 19px; height: 19px; color: #fff; vertical-align: 0; transform: rotate(6deg); }
.pt-table tbody tr:nth-child(11n+1) .rw-ic { --rc: #4F94FF; }
.pt-table tbody tr:nth-child(11n+2) .rw-ic { --rc: #8B55EE; }
.pt-table tbody tr:nth-child(11n+3) .rw-ic { --rc: #14B8A6; }
.pt-table tbody tr:nth-child(11n+4) .rw-ic { --rc: #F2A52B; }
.pt-table tbody tr:nth-child(11n+5) .rw-ic { --rc: #3CC46A; }
.pt-table tbody tr:nth-child(11n+6) .rw-ic { --rc: #EC4899; }
.pt-table tbody tr:nth-child(11n+7) .rw-ic { --rc: #6366F1; }
.pt-table tbody tr:nth-child(11n+8) .rw-ic { --rc: #F97316; }
.pt-table tbody tr:nth-child(11n+9) .rw-ic { --rc: #06B6D4; }
.pt-table tbody tr:nth-child(11n+10) .rw-ic { --rc: #A855F7; }
.pt-table tbody tr:nth-child(11n+11) .rw-ic { --rc: #EAB308; }
.pt-table tbody th { padding-top: 13px; padding-bottom: 13px; }
.pt-table tbody tr:nth-child(even) > * { background: rgba(255, 255, 255, .025); }
.pt-table tbody tr:nth-child(even) > .hl { background: rgba(198, 246, 137, .1); }
.pt-table tbody tr:hover > * { background: rgba(255, 255, 255, .06); }
/* values as chips: ticks, crosses, Platinum's pills */
.pt-table td > .ic { box-sizing: content-box; width: 16px; height: 16px; padding: 5px; border-radius: 50%; background: rgba(110, 231, 160, .16); vertical-align: middle; }
.pt-table td.hl > .ic { background: var(--lime); color: var(--ink); }
.pt-no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .06); font-size: 0; vertical-align: middle; }
.pt-no::before { content: ""; width: 10px; height: 10px; background: linear-gradient(45deg, transparent 43%, #7A82A8 43%, #7A82A8 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, #7A82A8 43%, #7A82A8 57%, transparent 57%); }
.pt-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: rgba(198, 246, 137, .16); box-shadow: inset 0 0 0 1px rgba(198, 246, 137, .45); color: #F4FFE0; }
.pt-pill .ic { width: 15px; height: 15px; color: var(--lime); vertical-align: 0; }
/* the full offer box on the dark section: white card, lime halo, bright note */
.s7-cta.pt-box { margin-top: 64px; box-shadow: 0 0 0 8px rgba(198, 246, 137, .14), 0 0 90px -20px rgba(198, 246, 137, .45), 0 60px 100px -40px #000; }
.s7-cta.pt-box .cta-note { color: #FFA23A; filter: drop-shadow(0 0 12px rgba(255, 138, 38, .45)); }
/* below 900 the box pops out of the card's top, so it needs more room */
@media (max-width: 899px) { .s7-cta.pt-box { margin-top: 120px; } }

@media (max-width: 767px) {
    .sec-plans { --pi: 8px; padding: 70px 0 150px; }
    .s11-bg, .pnl-hud { top: 16px; bottom: 50px; }
    .s11-bg { clip-path: polygon(26px 0, calc(100% - 26px) 0, 100% 26px, 100% calc(100% - 26px), calc(100% - 26px) 100%, 26px 100%, 0 calc(100% - 26px), 0 26px); }
    .s11-sub { font-size: 17px; }
    .pt-wrap { margin-top: 32px; border-radius: 22px; }
    .s7-cta.pt-box { margin-top: 124px; }
    /* phones: all four columns fit (no sideways scroll); values may wrap */
    .pt-table { min-width: 0; font-size: 13px; line-height: 1.3; table-layout: fixed; }
    .pt-table col.c-f { width: 34%; }
    .pt-table th, .pt-table td { padding: 11px 6px; }
    .pt-table td { white-space: normal; }
    .pt-table tbody th { padding-left: 14px; font-size: 13px; }
    .pt-table thead th { padding: 16px 4px 14px; font-size: 15px; }
    .pt-table .ic { width: 15px; height: 15px; }
    .pt-table td > .ic { width: 13px; height: 13px; padding: 4px; }
    .pt-no { width: 21px; height: 21px; }
    .pt-pill { padding: 3px 7px; font-size: 11.5px; }
    .rw-ic { float: left; width: 22px; height: 22px; margin: 0 7px 2px 0; border-radius: 7px; }
    .pt-table .rw-ic .ic { width: 12px; height: 12px; }
    .pt-table tbody th { padding-left: 10px; }
    .ph-ic { width: 32px; height: 32px; margin-bottom: 6px; }
    .ph-ic .ic { width: 16px; height: 16px; }
    .pt-table thead th:not(:first-child) { padding-top: 22px; font-size: 14px; }
    .pt-table thead small { font-size: 15px; }
    .pt-tag { top: -14px; padding: 4px 8px 4px 5px; font-size: 9px; letter-spacing: .04em; }
    .pt-tag .ic { width: 15px; height: 15px; padding: 2px; }
    /* narrow columns: the tag hangs from the column's right edge, pills wrap */
    .pt-tag { left: auto; right: 3px; transform: none; translate: none; }
    .pt-pill { justify-content: center; padding: 3px 5px; white-space: normal; text-align: center; line-height: 1.15; }
    .pt-pill .ic { display: none; }
    .pt-note { font-size: 13px; }
}
@media (max-width: 359px) {
    .pt-table th, .pt-table td { padding-left: 3px; padding-right: 3px; }
    .pt-pill { padding: 3px 4px; font-size: 10px; }
}


/* ==========================================================
   SECTION 13 — REAL SCREENS + ON YOUR PHONE (dark teal-black)
   A dark bevel out of the lavender section. The ten real screens in two
   rows sliding opposite ways under a HUD header card; tap one for the
   full-screen viewer.
   Then the three phone clips cropped into phones on a lit stage.
   ========================================================== */
.sec-screens { position: relative; isolation: isolate; padding: 50px 0 150px; background: linear-gradient(180deg, #05121A 0, #05121A 80px, #071A22 40%, #061720 100%); color: #C9D6DA; overflow-x: clip; }
/* calm stage: soft colour pools, a faint map grid fading out at the sides,
   and a light behind the banner screen (no stars, sparkles or grain) */
.s13-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background:
    radial-gradient(1100px 520px at 50% 470px, rgba(60, 200, 190, .24), transparent 70%),
    radial-gradient(1400px 300px at 50% 470px, rgba(198, 246, 137, .1), transparent 70%),
    radial-gradient(760px 560px at 0 58%, rgba(198, 246, 137, .12), transparent 70%),
    radial-gradient(760px 560px at 100% 60%, rgba(90, 150, 255, .16), transparent 70%),
    radial-gradient(900px 500px at 50% 92%, rgba(198, 246, 137, .14), transparent 70%); }
.s13-grid { position: absolute; inset: 0; background: linear-gradient(rgba(124, 240, 210, .1) 1px, transparent 1px) 50% 0 / 64px 64px, linear-gradient(90deg, rgba(124, 240, 210, .1) 1px, transparent 1px) 50% 0 / 64px 64px; -webkit-mask-image: radial-gradient(1200px 620px at 50% 470px, #000, transparent 75%), linear-gradient(transparent, #000 220px, #000 calc(100% - 200px), transparent); -webkit-mask-composite: source-in; mask-image: radial-gradient(1200px 620px at 50% 470px, #000, transparent 75%), linear-gradient(transparent, #000 220px, #000 calc(100% - 200px), transparent); mask-composite: intersect; }
.s13-wrap { position: relative; z-index: 2; max-width: 1240px; }
.s13-head { text-align: center; }
.s13-kicker { display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px 7px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(110, 231, 200, .35); color: #7CF0D2; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.s13-kicker i { width: 8px; height: 8px; border-radius: 50%; background: #7CF0D2; box-shadow: 0 0 0 3px rgba(124, 240, 210, .2); }
.s13-title { margin: 22px 0 0; color: #fff; font-family: var(--f-display); font-size: clamp(40px, 5.4vw, 82px); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.s13-title .hl, .s13-h3 .hl { padding: 0 .04em .06em; color: transparent; background: linear-gradient(90deg, #7CF0D2, #C6F689 55%, #E9FF8A); -webkit-background-clip: text; background-clip: text; }
.s13-sub { max-width: 38em; margin: 20px auto 0; color: #AFC3C9; font-size: 19.5px; line-height: 1.6; text-wrap: balance; }

/* ---------- the screens: two rows sliding opposite ways ----------
   Each row holds its five screens twice and slides by half its width, so it
   loops without a jump. Tiles share one height (--ih) and differ in width
   (--ar: wide 2.2, true 16:9, narrow 1.25 cropped on the dialog) for a
   mixed rhythm. Rows pause on hover / keyboard focus, off-screen and while
   the viewer is open; the header card sits over the gap between them. */
.mq { --ih: clamp(250px, 33vh, 320px); --g: 22px; --rg: 64px; --pad: 70px; --fac: 8s; position: relative; z-index: 2; margin-top: calc(34px - var(--pad)); }
.mq-row { padding: var(--pad) 0; overflow-x: clip; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.mq-b { margin-top: calc(var(--rg) - 2 * var(--pad)); }
.mq-track { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; animation: mq-slide calc(var(--w) * var(--fac)) linear infinite; will-change: transform; }
.mq-a .mq-track { --w: 8.26; }
.mq-b .mq-track { --w: 8.68; animation-direction: reverse; animation-delay: -21s; }
@keyframes mq-slide { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (hover: hover) { .mq-row:hover .mq-track { animation-play-state: paused; } }
.mq-row:has(.shot:focus-visible) .mq-track, .mq-off .mq-track, .mq-hold .mq-track { animation-play-state: paused; }
.mq-t { --gc: 79, 148, 255; flex: none; margin-right: var(--g); }
.shot { position: relative; display: block; padding: 7px; border: 0; border-radius: 20px; background: linear-gradient(165deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025)); box-shadow: inset 0 0 0 1.5px rgba(var(--gc), .5), 0 18px 28px -20px #000; color: inherit; font: inherit; text-align: left; cursor: zoom-in; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.shot:hover, .shot:focus-visible { transform: translateY(-6px); box-shadow: inset 0 0 0 2px rgba(var(--gc), .9), 0 0 64px -14px rgba(var(--gc), .8), 0 36px 60px -32px #000; }
.shot:focus-visible { outline: none; }
.shot-win { position: relative; display: block; overflow: hidden; border-radius: 14px; background: linear-gradient(160deg, #EEF3F5, #DCE5E9); box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); }
.shot-bar { display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 11px; background: #EEF2F4; }
.shot-bar i { width: 8px; height: 8px; border-radius: 50%; background: #FF6159; }
.shot-bar i:nth-child(2) { background: #FFBE2F; }
.shot-bar i:nth-child(3) { background: #2ACA44; }
.shot-win img { display: block; width: calc(var(--ih) * var(--ar)); height: var(--ih); object-fit: cover; object-position: var(--op, 50% 0); }
/* caption: a dark label in the tile's colour over the bottom of the screen */
.shot-cap { position: absolute; left: 19px; right: 19px; bottom: 19px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; pointer-events: none; }
.shot-cap > span { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; padding: 8px 14px 8px 12px; border-radius: 12px; background: rgba(5, 18, 26, .9); box-shadow: inset 0 0 0 1.5px rgba(var(--gc), .6), 0 12px 24px -12px #000; color: #fff; font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.shot-cap > span::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--gc)); box-shadow: 0 0 0 3px rgba(var(--gc), .25); }
.shot-ex { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(198, 246, 137, .2), 0 10px 20px -8px #000; color: var(--ink); transition: transform .25s var(--ease), box-shadow .25s; }
.shot-ex .ic { width: 15px; height: 15px; }
/* the top row labels sit at the top of the screen, so the card never hides them */
.mq-a .shot-cap { top: 41px; bottom: auto; align-items: flex-start; }
.shot:hover .shot-ex, .shot:focus-visible .shot-ex { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(198, 246, 137, .25), 0 0 20px rgba(198, 246, 137, .7); }

/* the header card: a cut-corner HUD panel over the gap between the rows,
   "Look around" sitting on its top edge */
.s13-card { --qc: 28px; position: absolute; left: 50%; top: 50%; z-index: 3; width: max-content; max-width: min(900px, 86vw); padding: 36px 54px 28px; transform: translate(-50%, -50%); filter: drop-shadow(0 0 34px rgba(124, 240, 210, .2)) drop-shadow(0 34px 40px rgba(0, 0, 0, .6)); }
.s13-card-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.s13-card-edge, .s13-card-fill { position: absolute; clip-path: polygon(var(--qc) 0, calc(100% - var(--qc)) 0, 100% var(--qc), 100% calc(100% - var(--qc)), calc(100% - var(--qc)) 100%, var(--qc) 100%, 0 calc(100% - var(--qc)), 0 var(--qc)); }
.s13-card-edge { inset: 0; background: radial-gradient(420px 200px at 0 0, #7CF0D2, transparent 70%), radial-gradient(420px 200px at 100% 100%, #C6F689, transparent 70%), rgba(255, 255, 255, .14); }
.s13-card-fill { inset: 1.5px; background: radial-gradient(520px 220px at 50% 0, rgba(60, 200, 190, .2), transparent 70%), linear-gradient(170deg, #0A2229, #061419 70%); }
.s13-card .s13-kicker { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); background: #061419; white-space: nowrap; }
.s13-card .s13-title { margin: 0; font-size: clamp(34px, 3.7vw, 58px); }
.s13-card .s13-sub { max-width: 34em; margin-top: 12px; font-size: 17px; line-height: 1.55; }

/* ---------- the phones ---------- */
.phones { margin-top: 24px; text-align: center; }
.s13-h3 { margin: 0; color: #fff; font-family: var(--f-display); font-size: clamp(34px, 4vw, 60px); font-weight: 800; line-height: 1.05; letter-spacing: -.04em; text-wrap: balance; }
.ph3-row { position: relative; isolation: isolate; display: flex; justify-content: center; align-items: flex-end; gap: 54px; margin-top: 56px; }
/* a lit map-grid floor under the phones, and a spotlight on the middle one */
.ph3-row::after { content: ""; position: absolute; left: 50%; top: 46%; z-index: -1; width: 1300px; height: 420px; margin-left: -650px; background: linear-gradient(rgba(198, 246, 137, .26) 1.5px, transparent 1.5px) 0 0 / 100% 34px, linear-gradient(90deg, rgba(198, 246, 137, .26) 1.5px, transparent 1.5px) 50% 0 / 60px 100%; transform: perspective(400px) rotateX(58deg); transform-origin: 50% 100%; -webkit-mask-image: linear-gradient(transparent, #000 60%), linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(transparent, #000 60%), linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); mask-composite: intersect; pointer-events: none; }
.phones { position: relative; isolation: isolate; }
.phones::before { content: ""; position: absolute; left: 50%; top: 80px; z-index: -1; width: 900px; height: 900px; margin-left: -450px; background: conic-gradient(from 180deg at 50% 0, transparent 160deg, rgba(198, 246, 137, .14) 172deg, rgba(242, 255, 156, .2) 180deg, rgba(198, 246, 137, .14) 188deg, transparent 200deg); -webkit-mask-image: linear-gradient(#000 30%, transparent 80%); mask-image: linear-gradient(#000 30%, transparent 80%); pointer-events: none; }
/* the lit stage under the phones */
.ph3-row::before { content: ""; position: absolute; left: 50%; top: 52%; width: 1100px; height: 360px; margin-left: -550px; border-radius: 50%; background: radial-gradient(closest-side, rgba(124, 240, 210, .2), rgba(198, 246, 137, .08) 55%, transparent); pointer-events: none; }
.ph3 { --pg: 124, 240, 210; position: relative; width: 270px; margin: 0; text-align: left; }
.ph3.p-m { --pg: 198, 246, 137; width: 310px; z-index: 2; }
.ph3.p-r { --pg: 120, 160, 255; }
.ph3-dev { position: relative; padding: 11px; border-radius: 48px; background: linear-gradient(150deg, #6B7A6E 0%, #1B231E 26%, #0D120F 70%, #36423B 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 0 0 4px #070A08, 0 50px 80px -40px #000, 0 0 80px -24px rgba(var(--pg), .7); }
.p-l .ph3-dev { transform: rotate(-5deg); }
.p-r .ph3-dev { transform: rotate(5deg); }
.ph3-btn { position: absolute; right: -3px; top: 22%; width: 3px; height: 64px; border-radius: 0 3px 3px 0; background: #2B3530; }
/* the screen: a status-bar strip for the notch, then the clip cropped to its
   phone strip (the source is 960x540 with the phone in the middle 268px) */
.ph3-scr { position: relative; overflow: hidden; padding-top: 12%; border-radius: 38px; background: #fff; }
.ph3-scr video { display: block; width: 100%; height: auto; aspect-ratio: 268 / 540; object-fit: cover; }
.ph3-island { position: absolute; left: 50%; top: 9px; z-index: 2; width: 30%; height: 22px; margin-left: -15%; border-radius: 20px; background: #000; }
/* each caption: a cut-corner card in its phone's colour, an icon badge on
   its top edge wired to the phone above; all three on one baseline */
.ph3 figcaption { --cq: 16px; position: relative; isolation: isolate; min-height: 150px; margin-top: 50px; padding: 40px 20px 22px; color: #C9D6DA; font-size: 15.5px; line-height: 1.5; text-align: center; }
.ph3 figcaption::before, .ph3 figcaption::after { content: ""; position: absolute; z-index: -1; clip-path: polygon(var(--cq) 0, calc(100% - var(--cq)) 0, 100% var(--cq), 100% calc(100% - var(--cq)), calc(100% - var(--cq)) 100%, var(--cq) 100%, 0 calc(100% - var(--cq)), 0 var(--cq)); }
.ph3 figcaption::before { inset: 0; background: linear-gradient(180deg, rgba(var(--pg), .95), rgba(var(--pg), .22) 55%, rgba(255, 255, 255, .1)); }
.ph3 figcaption::after { inset: 1.5px; background: radial-gradient(240px 110px at 50% 0, rgba(var(--pg), .18), transparent 70%), linear-gradient(180deg, #0C232A, #071519); }
.ph3-ic { position: absolute; left: 50%; top: 0; display: grid; place-items: center; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 15px; background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .6), transparent 45%), rgb(var(--pg)); box-shadow: inset 0 -4px 8px rgba(0, 0, 0, .18), 0 0 0 5px #08181D, 0 0 0 6.5px rgba(var(--pg), .5), 0 0 30px -4px rgba(var(--pg), .7); color: #06141A; }
.ph3-ic .ic { width: 22px; height: 22px; }
/* the wire up to the phone */
.ph3-ic::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 6px); width: 2px; height: 22px; margin-left: -1px; background: linear-gradient(rgba(var(--pg), 0), rgba(var(--pg), .9)); }
.ph3 figcaption b { display: block; color: #fff; font-family: var(--f-display); font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.ph3 figcaption span { display: block; margin-top: 6px; color: #AFC3C9; }
/* the rings and floating icons, centred on the middle phone (--cy) */
.ph-deco { --cy: 318px; position: absolute; left: 50%; bottom: calc(100% - var(--cy)); z-index: -1; width: 0; height: 0; pointer-events: none; }
.ph-rings { position: absolute; left: -700px; top: -700px; width: 1400px; max-width: none; height: 1400px; overflow: visible; -webkit-mask-image: linear-gradient(transparent 12%, #000 42%, #000 60%, transparent 80%); mask-image: linear-gradient(transparent 12%, #000 42%, #000 60%, transparent 80%); }
.ph-rings circle { fill: none; }
.ph-rings .pr1 { stroke: rgba(124, 240, 210, .12); stroke-width: 1.5; stroke-dasharray: 3 9; }
.ph-rings .pr2 { stroke: rgba(198, 246, 137, .08); stroke-width: 1.5; }
.ph-rings .pr3 { stroke: rgba(124, 240, 210, .14); stroke-width: 1.5; }
.ph-rings .pr3t { stroke: rgba(124, 240, 210, .08); stroke-width: 9; stroke-dasharray: 2 22; }
.ph-rings .prn { fill: #C6F689; opacity: .7; }
.ph-rings .prn2 { fill: #7CF0D2; }
.ph-fi { position: absolute; left: calc(var(--x) - var(--s) / 2); top: calc(var(--y) - var(--s) / 2); display: grid; place-items: center; width: var(--s); height: var(--s); border-radius: 30%; background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .6), transparent 45%), linear-gradient(150deg, rgb(var(--c)), color-mix(in srgb, rgb(var(--c)) 62%, #000)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -5px 10px rgba(0, 0, 0, .25), 0 0 0 6px rgba(var(--c), .1), 0 0 40px -8px rgba(var(--c), .75), 0 18px 28px -14px #000; color: #06141A; transform: rotate(var(--r)); animation: ph-bob 4.8s ease-in-out var(--d) infinite alternate; }
.ph-fi .ic { width: 44%; height: 44%; }
@keyframes ph-bob { to { translate: 0 -10px; } }
@media (max-width: 1399px) { .ph-fi { display: none; } }
@media (max-width: 1199px) { .ph-deco { display: none; } }

/* ---------- the viewer ---------- */
.shot-box { width: min(1240px, 92vw); max-width: none; max-height: none; padding: 0; border: 0; background: transparent; color: #fff; overflow: visible; }
.shot-box::backdrop { background: rgba(2, 8, 12, .9); }
.shot-box figure { margin: 0; }
.shot-box img { display: block; width: 100%; height: auto; max-height: 80vh; object-fit: contain; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15), 0 40px 100px -20px #000; }
.shot-box figcaption { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 18px; color: #E3ECEF; font-size: 16px; line-height: 1.45; text-align: center; }
.sb-n { flex: none; padding: 4px 12px; border-radius: 999px; background: var(--lime); color: var(--ink); font-size: 13px; font-weight: 800; }
.sb-btn, .sb-x { position: absolute; display: grid; place-items: center; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); color: #fff; cursor: pointer; transition: background .2s, transform .2s; }
.sb-btn:hover, .sb-x:hover { background: var(--lime); color: var(--ink); }
.sb-btn .ic { width: 22px; height: 22px; }
.sb-p { left: -78px; top: 42%; }
.sb-p .ic { transform: scaleX(-1); }
.sb-n2 { right: -78px; top: 42%; }
.sb-x { right: -14px; top: -66px; width: 46px; height: 46px; font-size: 28px; line-height: 1; }

@media (max-width: 1199px) {
    .mq { --ih: 250px; --g: 18px; --rg: 52px; --fac: 6.5s; }
    .s13-card { padding: 34px 44px 26px; }
    .s13-card .s13-sub { font-size: 16.5px; }
    .shot-cap > span { font-size: 13.5px; }
    .ph3-row { gap: 30px; }
    .ph3 { width: 230px; }
    .ph3.p-m { width: 270px; }
    .sb-p { left: 8px; top: auto; bottom: -76px; }
    .sb-n2 { right: 8px; top: auto; bottom: -76px; }
}
@media (max-width: 767px) {
    .sec-screens { padding: 34px 0 110px; }
    .s13-sub { font-size: 17px; }
    /* phones: the card sits above the rows instead of over them */
    .mq { --ih: 200px; --g: 14px; --rg: 22px; --pad: 46px; --fac: 5.5s; margin-top: 6px; }
    .s13-card { position: relative; left: auto; top: auto; width: auto; max-width: none; margin: 40px 16px calc(34px - var(--pad)); padding: 34px 20px 24px; transform: none; text-align: center; }
    .s13-card .s13-sub { font-size: 15.5px; }
    .mq-row { -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
    .shot { padding: 5px; border-radius: 15px; }
    .shot-win { border-radius: 10px; }
    .shot-bar { height: 15px; gap: 4px; padding: 0 8px; }
    .shot-bar i { width: 5px; height: 5px; }
    .shot-cap { left: 13px; right: 13px; bottom: 13px; gap: 8px; }
    .mq-a .shot-cap { top: 28px; }
    .shot-cap > span { gap: 7px; padding: 6px 10px 6px 9px; border-radius: 9px; font-size: 12px; }
    .shot-cap > span::before { width: 6px; height: 6px; }
    .shot-ex { width: 26px; height: 26px; }
    .shot-ex .ic { width: 12px; height: 12px; }
    .phones { margin-top: 30px; }
    /* phones: swipe through the three */
    .ph3-row { justify-content: flex-start; gap: 18px; margin: 34px -24px 0; padding: 10px 16vw 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .ph3-row::-webkit-scrollbar { display: none; }
    .ph3-row::before, .ph3-row::after, .phones::before { display: none; }
    .ph3, .ph3.p-m { flex: none; width: 68vw; max-width: 300px; margin-top: 0; scroll-snap-align: center; }
    .p-l .ph3-dev, .p-r .ph3-dev { transform: none; }
    .ph3 figcaption { min-height: 0; margin-top: 44px; padding: 36px 16px 18px; font-size: 14.5px; }
    .ph3 figcaption b { font-size: 19px; }
    .shot-box { width: 96vw; }
    .sb-x { right: 4px; top: -58px; }
}


/* ==========================================================
   SECTION 14 — COPY THESE. SEND THEM. (light sky)
   A light wave out of the dark screens section. Left column (sticky on
   desktop): headline + a dark "type the details" card; right: the four
   messages as a numbered send-order timeline of chat bubbles. Typed
   details fill the lime slots live; your own slots stay dashed amber.
   ========================================================== */
.sec-say { position: relative; isolation: isolate; padding: 118px 0 100px; background: linear-gradient(180deg, #EEF5FF 0, #EEF5FF 80px, #F5F9FF 50%, #F2F7FE 100%); color: #3E4A60; }
/* soft colour light that follows the four steps down the right (blue,
   violet, green, amber) and a lime glow behind the card; no dots or stars */
.s14-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(transparent, #000 160px); mask-image: linear-gradient(transparent, #000 160px); background:
    radial-gradient(620px 520px at 6% 26%, rgba(80, 150, 255, .16), transparent 70%),
    radial-gradient(560px 460px at 97% 16%, rgba(80, 150, 255, .16), transparent 70%),
    radial-gradient(560px 460px at 99% 42%, rgba(139, 85, 238, .12), transparent 70%),
    radial-gradient(560px 460px at 97% 68%, rgba(30, 154, 69, .11), transparent 70%),
    radial-gradient(620px 480px at 93% 94%, rgba(224, 138, 0, .12), transparent 70%),
    radial-gradient(640px 520px at 14% 74%, rgba(198, 246, 137, .24), transparent 70%); }
.s14-wrap { position: relative; z-index: 1; max-width: 1300px; }
.say-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: 80px; }
/* the side column runs the full height; the details card + note stick while
   the four messages scroll past */
.say-side { align-self: stretch; }
.say-stick { position: sticky; top: 28px; }
.s14-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px 7px 11px; border-radius: 999px; background: #0F1B33; color: #fff; font-size: 14px; font-weight: 700; }
.s14-kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 3px rgba(214, 242, 60, .25); }
.s14-title { margin: 20px 0 0; color: #0E1730; font-family: var(--f-display); font-size: clamp(44px, 5vw, 78px); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; }
.s14-title .mk { white-space: nowrap; padding: 0 .06em; background: linear-gradient(transparent 58%, rgba(198, 246, 137, .95) 58%, rgba(198, 246, 137, .95) 90%, transparent 90%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.s14-sub { max-width: 30em; margin: 20px 0 0; color: #3E4A60; font-size: 19.5px; line-height: 1.6; }

/* the details card */
.say-form { --qc: 30px; --qb: 16px; position: relative; isolation: isolate; display: grid; gap: 20px; margin-top: 36px; padding: 38px 40px 42px; }
.sf-bg { position: absolute; inset: 0; z-index: -1; filter: drop-shadow(0 30px 30px rgba(15, 27, 51, .3)); pointer-events: none; }
.sf-bg::before, .sf-bg::after { content: ""; position: absolute; clip-path: polygon(var(--qc) 0, calc(100% - var(--qc)) 0, 100% var(--qc), 100% calc(100% - var(--qb)), calc(100% - var(--qb)) 100%, var(--qb) 100%, 0 calc(100% - var(--qb)), 0 var(--qc)); pointer-events: none; }
.sf-bg::before { inset: 0; background: radial-gradient(380px 220px at 0 0, #C6F689, transparent 70%), radial-gradient(380px 240px at 100% 100%, #5B8CFF, transparent 70%), rgba(255, 255, 255, .14); }
.sf-bg::after { inset: 1.5px; background: radial-gradient(420px 260px at 100% 0, rgba(80, 150, 255, .28), transparent 70%), linear-gradient(160deg, #13234A, #0F1B33 60%, #0B1428); }
/* "live": a green dot pinging after "Watch the messages fill in." */
.sf-live { position: relative; display: inline-block; width: 9px; height: 9px; margin-left: 10px; border-radius: 50%; background: #3CE07A; box-shadow: 0 0 10px rgba(60, 224, 122, .8); vertical-align: 2px; }
.sf-live::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(60, 224, 122, .7); animation: sf-ping 1.8s ease-out infinite; }
@keyframes sf-ping { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.sf-t { display: flex; align-items: center; gap: 16px; margin: 0 0 6px; color: #fff; font-family: var(--f-display); font-size: 20px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.sf-tx { display: grid; gap: 4px; }
.sf-tx b { font-weight: 800; }
.sf-tx > span { color: #D9F7AE; font-size: 15.5px; font-weight: 700; letter-spacing: 0; }
.sf-ic { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(155deg, #F2FF9C, var(--acid)); color: var(--ink); transform: rotate(-6deg); }
.sf-ic .ic { width: 21px; height: 21px; }
.sf-f { display: grid; gap: 10px; }
.sf-f > span:first-child { color: #B9C6E0; font-size: 14px; font-weight: 700; }
.sf-in { position: relative; display: block; }
.sf-in .ic { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: #7E8FB4; pointer-events: none; transition: color .2s; }
.sf-in input { width: 100%; height: 54px; padding: 0 16px 0 46px; border: 0; border-radius: 15px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12); color: #fff; font: 600 16.5px var(--f-body); outline: none; transition: box-shadow .2s, background .2s; }
.sf-in input::placeholder { color: #7E8FB4; font-weight: 500; }
.sf-in input:focus { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 2px var(--lime), 0 0 0 4px rgba(198, 246, 137, .18); }
.sf-in input:focus + .ic, .sf-in:focus-within .ic { color: var(--lime); }
/* the examples note: an info strip under the card */
.s14-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 14px 0 0; padding: 11px 16px 11px 11px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1.5px #D3DFF1, 0 16px 30px -24px rgba(30, 50, 100, .5); color: #3E4A60; font-size: 15px; line-height: 1.45; }
.sn-ic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 10px; background: #EAF2FF; color: #2F7CF6; }
.sn-ic .ic { width: 16px; height: 16px; }
.s14-note .sn-tag { padding: 4px 11px; border-radius: 999px; background: #0F1B33; color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
/* the 3D chat bubble under the card (part of the sticky block, so the left
   column never goes blank) with a dashed flight path to the messages */
.say-art { --aw: clamp(150px, calc(100vh - 660px), 240px); position: relative; height: calc(var(--aw) * .92); margin-top: 16px; pointer-events: none; }
.say-art img { position: absolute; left: 20px; top: 0; width: var(--aw); height: auto; animation: say-float 5s ease-in-out infinite alternate; }
@keyframes say-float { to { translate: 0 -10px; } }
.say-path { position: absolute; left: calc(20px + var(--aw)); top: calc(var(--aw) * .02); width: calc(100% - 20px - var(--aw) + 24px); max-width: none; height: calc(var(--aw) * .5); overflow: visible; }
.say-path path { fill: none; stroke: #7FA7E8; stroke-width: 2.2; stroke-dasharray: 2 8; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.say-plane { position: absolute; right: -39px; top: calc(var(--aw) * .22 - 15px); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: linear-gradient(155deg, #F2FF9C, var(--acid)); box-shadow: 0 12px 22px -10px rgba(110, 170, 30, .8); color: var(--ink); transform: rotate(10deg); }
.say-plane .ic { width: 15px; height: 15px; }

/* the messages: a numbered send-order timeline */
.say-list { position: relative; display: grid; gap: 26px; margin: 0; padding: 0; list-style: none; }
li.sm { --c: #2F7CF6; position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 20px; align-items: start; }
/* li.sm sets the default, so the step colours need the li as well */
li.sm-2 { --c: #8B55EE; }
li.sm-3 { --c: #1E9A45; }
li.sm-4 { --c: #E08A00; }
/* the rail: one dashed segment per step, in that step's colour */
li.sm:not(:last-child)::before { content: ""; position: absolute; left: 25px; top: 74px; bottom: -40px; border-left: 2px dashed color-mix(in srgb, var(--c) 55%, transparent); }
.sm-n { position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; margin-top: 14px; border-radius: 17px; background: linear-gradient(155deg, color-mix(in srgb, var(--c) 55%, #fff), var(--c)); box-shadow: 0 0 0 6px #F3F8FF, 0 12px 24px -10px var(--c); color: #fff; font-family: var(--f-display); font-size: 22px; font-weight: 800; transform: rotate(-6deg); }
.sm-card { position: relative; isolation: isolate; padding: 24px 26px 22px; filter: drop-shadow(0 24px 26px rgba(30, 50, 100, .12)); }
.sm-card::before, .sm-card::after { content: ""; position: absolute; z-index: -1; clip-path: polygon(26px 0, calc(100% - 26px) 0, 100% 26px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 26px); pointer-events: none; }
.sm-card::before { inset: 0; background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 22%, #fff) 30%, rgba(30, 50, 100, .1)); }
.sm-card::after { inset: 4px 1.5px 1.5px; background: radial-gradient(420px 160px at 0 0, color-mix(in srgb, var(--c) 7%, transparent), transparent 70%), #fff; }
.sm-lab { display: block; color: var(--c); font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
/* the message itself, as your sent bubble */
.sm-row { display: flex; align-items: flex-end; gap: 12px; margin-top: 14px; }
.sm-bub { position: relative; flex: 1; min-width: 0; padding: 18px 20px 28px; border-radius: 20px 20px 4px 20px; background: color-mix(in srgb, var(--c) 9%, #fff); color: #0E1730; font-size: 17px; line-height: 1.6; }
/* the tail, the read ticks and your avatar */
.sm-bub::after { content: ""; position: absolute; right: -10px; bottom: 0; width: 14px; height: 16px; background: inherit; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.sm-tick { position: absolute; right: 12px; bottom: 6px; color: var(--c); line-height: 0; }
.sm-tick .ic { width: 19px; height: 19px; }
.sm-av { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(155deg, color-mix(in srgb, var(--c) 50%, #fff), var(--c)); box-shadow: 0 0 0 3px #fff, 0 8px 16px -8px var(--c); color: #fff; }
.sm-av .ic { width: 16px; height: 16px; }
.sm-bub p { margin: 0; }
.sm-bub p + p { margin-top: 10px; }
/* the fill-in slots: typed details (lime once filled), your own slots (dashed amber) */
.slot { display: inline; padding: 1px 7px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1.5px #B8CBEA; color: #3B5BDB; font-weight: 700; white-space: nowrap; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background .2s, color .2s, box-shadow .2s; }
.slot.on { background: var(--lime); box-shadow: none; color: var(--ink); }
.slot.you { background: #FFF6E2; box-shadow: inset 0 0 0 1.5px #F0C46A; color: #8A5300; white-space: normal; outline: 1.5px dashed #E5A93A; outline-offset: -1.5px; }
.slot.flash { animation: slot-flash .5s var(--ease); }
@keyframes slot-flash { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
.sm-copy { display: inline-flex; align-items: center; gap: 9px; height: 44px; margin-top: 16px; padding: 0 18px 0 15px; border: 0; border-radius: 999px; background: #0F1B33; color: #fff; font: 700 14.5px var(--f-body); cursor: pointer; transition: background .2s, color .2s, transform .2s var(--ease); }
.sm-copy .ic { width: 17px; height: 17px; color: var(--lime); }
.sm-copy:hover { transform: translateY(-2px); background: var(--c); }
.sm-copy:hover .ic { color: #fff; }
.sm-copy.done { background: var(--lime); color: var(--ink); }
.sm-copy.done .ic { color: var(--ink); }

@media (max-width: 1099px) {
    .say-grid { grid-template-columns: 1fr; gap: 50px; max-width: 760px; margin: 0 auto; }
    .say-stick { position: static; }
    /* stacked: the chat bubble sits beside the headline */
    .say-side { position: relative; }
    .say-art { --aw: 150px; position: absolute; right: 0; top: 34px; height: auto; margin: 0; }
    .say-art img { position: static; display: block; }
    .say-path, .say-plane { display: none; }
}
@media (max-width: 767px) {
    .sec-say { padding: 92px 0 70px; }
    .s14-sub { font-size: 17px; }
    .say-form { --qc: 22px; --qb: 12px; gap: 16px; margin-top: 28px; padding: 28px 22px 30px; }
    .sf-t { font-size: 18px; }
    .say-list { gap: 18px; }
    li.sm:not(:last-child)::before { left: 19px; top: 58px; bottom: -30px; }
    .say-art { --aw: 92px; top: 52px; right: -6px; }
    li.sm { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
    .sm-n { width: 40px; height: 40px; margin-top: 12px; border-radius: 13px; font-size: 18px; box-shadow: 0 0 0 5px #F3F8FF, 0 10px 20px -10px var(--c); }
    .sm-card { padding: 18px 16px 16px; border-radius: 22px; }
    .sm-row { gap: 9px; }
    .sm-bub { padding: 14px 15px 26px; font-size: 16px; }
    .sm-av { width: 28px; height: 28px; }
    .sm-av .ic { width: 14px; height: 14px; }
}


/* ==========================================================
   SECTION 15 — 3-DAY HANDS-ON TRAINING (dark espresso + gold)
   A dark wave out of the light sky section. The three days as tear-off
   calendar pages (white sheets, coloured header strips, binder rings,
   sheets underneath) joined by a dashed route; the Training page clip
   on a laptop in a left-right card; the full offer box.
   ========================================================== */
.sec-train { position: relative; isolation: isolate; padding: 112px 0 170px; background: linear-gradient(180deg, #120F0A 0, #120F0A 80px, #17130C 45%, #120F0A 100%); color: #D8D0BE; overflow-x: clip; }
/* calm colour light, no dots, sparkles or grain: gold behind the headline,
   each day's own colour under its card, warm light behind the laptop and a
   gold-lime glow round the offer box */
.s15-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(transparent, #000 160px); mask-image: linear-gradient(transparent, #000 160px); background:
    radial-gradient(900px 420px at 50% 9%, rgba(255, 194, 61, .17), transparent 70%),
    radial-gradient(520px 380px at 22% 30%, rgba(155, 234, 106, .14), transparent 70%),
    radial-gradient(520px 380px at 50% 32%, rgba(93, 168, 255, .15), transparent 70%),
    radial-gradient(520px 380px at 78% 30%, rgba(255, 180, 67, .15), transparent 70%),
    radial-gradient(760px 520px at 34% 58%, rgba(255, 194, 61, .12), transparent 70%),
    radial-gradient(1000px 420px at 50% 86%, rgba(198, 246, 137, .1), transparent 70%),
    radial-gradient(700px 400px at 50% 88%, rgba(255, 194, 61, .1), transparent 70%); }
.s15-wrap { position: relative; z-index: 1; max-width: 1240px; }
.s15-head { text-align: center; }
.s15-kicker { display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px 7px 12px; border-radius: 999px; background: linear-gradient(135deg, #F9DE80, #E8AF35); color: #2B1C00; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 10px 30px -10px rgba(243, 203, 85, .6); }
.s15-kicker .ic { width: 17px; height: 17px; }
.s15-title { margin: 22px 0 0; color: #fff; font-family: var(--f-display); font-size: clamp(40px, 5.6vw, 86px); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.s15-title .hl { padding: 0 .04em .06em; color: transparent; background: linear-gradient(90deg, #FFE7A3, #FFC23D 45%, #FF9E3D); -webkit-background-clip: text; background-clip: text; }
.s15-title .nw { white-space: nowrap; }
.s15-sub { margin: 18px auto 0; color: #CFC6B2; font-size: 20px; line-height: 1.55; text-wrap: balance; }

/* the three calendar pages on a route */
.days { --dg: 64px; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dg); margin: 90px 0 0; padding: 0; list-style: none; }
/* the route: a lit track at the header strips, lime > blue > amber */
.days::before { content: ""; position: absolute; left: 6%; right: 6%; top: 60px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #9BEA6A, #5DA8FF 50%, #FFB443); box-shadow: 0 0 16px rgba(255, 194, 61, .45); }
.dc-next { position: absolute; right: calc(var(--dg) / -2 - 19px); top: 43px; z-index: 5; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(155deg, #FFE7A3, #FFC23D); box-shadow: 0 0 0 5px rgba(18, 15, 10, .9), 0 0 0 7px rgba(255, 194, 61, .45), 0 0 22px rgba(255, 194, 61, .6); color: #2B1C00; }
.dc-next .ic { width: 17px; height: 17px; }
/* line the nodes up with the track: day 1 is tilted up at its right edge, day 2 sits 26px lower */
.d-1 .dc-next { top: 50px; }
.d-2 .dc-next { top: 14px; }
/* the cap, earned on day 3: sits on the page's corner (replaces its icon) */
.dc-cap { position: absolute; right: -30px; top: -84px; z-index: 4; width: 150px; height: auto; transform: rotate(9deg); filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .5)); pointer-events: none; }
.d-3 .dc-ic { visibility: hidden; }
.dcal { --c1: #E9FFB4; --c2: #9BEA6A; --ci: #1F4A0B; position: relative; display: flex; flex-direction: column; padding-top: 14px; }
.d-2 { --c1: #BFE3FF; --c2: #5DA8FF; --ci: #0E2E66; }
.d-3 { --c1: #FFE7A3; --c2: #FFB443; --ci: #4A2A00; }
.dcal:nth-child(1) { transform: rotate(-2deg); }
.dcal:nth-child(2) { transform: rotate(1.2deg); margin-top: 26px; }
.dcal:nth-child(3) { transform: rotate(-1.2deg); }
/* the sheets underneath */
.dcal::before, .dcal::after { content: ""; position: absolute; left: 6px; right: 6px; top: 22px; bottom: -8px; z-index: -1; border-radius: 22px; background: #E9E3D6; transform: rotate(2.4deg); box-shadow: 0 20px 40px -24px #000; }
.dcal::after { left: 12px; right: 12px; bottom: -15px; background: #CFC7B6; transform: rotate(-1.8deg); z-index: -2; }
.dc-rings { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; justify-content: center; gap: 120px; pointer-events: none; }
.dc-rings i { width: 14px; height: 34px; border-radius: 8px; background: linear-gradient(90deg, #8B8478, #E8E2D6 45%, #9C958A); box-shadow: 0 4px 8px -3px rgba(0, 0, 0, .6); }
.dc-top { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 22px 24px 18px; border-radius: 22px 22px 0 0; background: linear-gradient(160deg, var(--c1), var(--c2)); color: var(--ci); }
.dc-day { font-family: var(--f-display); font-size: 17px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.dc-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: rgba(255, 255, 255, .55); color: var(--ci); }
.dc-ic .ic { width: 20px; height: 20px; }
.dc-body { display: block; flex: 1; padding: 6px 26px 28px; border-radius: 0 0 22px 22px; background: #FFFDF8; box-shadow: 0 30px 60px -30px #000; color: #3E4436; }
.dc-n { display: block; color: #17130C; font-family: var(--f-display); font-size: 120px; font-weight: 800; line-height: .95; letter-spacing: -.06em; }
.dcal h3 { margin: 6px 0 10px; color: #17130C; font-family: var(--f-display); font-size: 26px; font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
.dcal p { margin: 0; color: #4A4E40; font-size: 17px; line-height: 1.55; }

/* the Training page clip: laptop | copy, in a glass card */
/* a cut-corner HUD panel (edge + fill layers, rails on the top edge) */
.tr-app { --qc: 48px; --qb: 26px; --qt: 160px; --qd: 16px; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .78fr); align-items: center; gap: 56px; max-width: 1240px; margin: 110px auto 0; padding: 72px 60px 60px 52px; }
.tr-bg { position: absolute; inset: 0; z-index: -1; filter: drop-shadow(0 0 16px rgba(255, 194, 61, .16)) drop-shadow(0 50px 50px rgba(0, 0, 0, .5)); pointer-events: none; }
.tr-edge, .tr-fill { position: absolute; clip-path: polygon(var(--qc) 0, calc(50% - var(--qt)) 0, calc(50% - var(--qt) + var(--qd)) var(--qd), calc(50% + var(--qt) - var(--qd)) var(--qd), calc(50% + var(--qt)) 0, calc(100% - var(--qc)) 0, 100% var(--qc), 100% calc(100% - var(--qb)), calc(100% - var(--qb)) 100%, var(--qb) 100%, 0 calc(100% - var(--qb)), 0 var(--qc)); }
.tr-edge { inset: 0; background: radial-gradient(420px 260px at 0 0, #FFC23D, transparent 70%), radial-gradient(420px 260px at 100% 0, #C6F689, transparent 70%), radial-gradient(300px 70px at 50% 0, rgba(255, 213, 120, .85), transparent 70%), radial-gradient(400px 240px at 100% 100%, rgba(255, 158, 61, .7), transparent 70%), radial-gradient(400px 240px at 0 100%, rgba(155, 234, 106, .5), transparent 70%), rgba(255, 255, 255, .12); }
.tr-fill { inset: 1.5px; overflow: hidden; background: radial-gradient(640px 420px at 30% 56%, rgba(255, 194, 61, .16), transparent 70%), radial-gradient(520px 380px at 88% 40%, rgba(198, 246, 137, .1), transparent 70%), linear-gradient(160deg, #241D11, #19140C 60%, #120E08); }
.tr-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255, 213, 120, .06) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(255, 213, 120, .06) 1px, transparent 1px) 0 0 / 40px 40px; -webkit-mask-image: linear-gradient(transparent 35%, #000 75%); mask-image: linear-gradient(transparent 35%, #000 75%); }
.tr-hud { --cut: 48px; --r1: #FFC23D; --r2: #C6F689; --glow1: rgba(255, 194, 61, .7); --glow2: rgba(198, 246, 137, .7); }
.tr-hud .seam-l, .tr-hud .seam-r { top: 26px; }
.tr-hud .seam-l { right: calc(50% + 176px); }
.tr-hud .seam-r { left: calc(50% + 176px); }
.tr-dev { --pc: #FFD27A; }
.tr-dev::before { background: radial-gradient(closest-side, rgba(255, 194, 61, .22), transparent); }
.tr-dev::after { background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent); }
.tr-app .tr-zoom { top: auto; bottom: -4cqw; left: auto; right: -5cqw; width: 42cqw; font-size: max(11px, 1.65cqw); transform: rotate(2.5deg); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .6), 0 0 0 .8cqw rgba(255, 194, 61, .3), 0 3cqw 6cqw -2cqw rgba(0, 0, 0, .7); }
.tr-zoom .z-title { display: flex; align-items: center; gap: .8cqw; font-size: max(13px, 2.1cqw); }
.tr-zoom .z-title .ic { width: max(14px, 2.2cqw); height: max(14px, 2.2cqw); color: #1E9A45; }
.tz-row { display: grid; gap: .2cqw; padding: .9cqw 0; border-top: 1px dashed #DCE4D6; }
.tz-row b { color: #0B1D12; font-weight: 700; }
.tz-row small { color: #7A8A80; font-size: max(10px, 1.4cqw); }
.tr-copy { display: block; }
.tr-h { display: block; margin: 0 0 16px; color: #fff; font-family: var(--f-display); font-size: clamp(30px, 3vw, 48px); font-weight: 800; line-height: 1.07; letter-spacing: -.035em; }
.tr-txt { display: block; color: #D8D0BE; font-size: 19px; line-height: 1.65; }
.tr-box { margin-top: 96px; }

@media (max-width: 1099px) {
    .days { --dg: 48px; }
    .dc-n { font-size: 96px; }
    .dc-cap { right: -8px; top: -74px; width: 124px; }
    .dcal h3 { font-size: 22px; }
    .tr-app { --qc: 34px; --qt: 110px; grid-template-columns: 1fr; gap: 48px; max-width: 720px; padding: 64px 40px 52px; }
    .tr-hud { --cut: 34px; }
    .tr-hud .seam-l { right: calc(50% + 126px); }
    .tr-hud .seam-r { left: calc(50% + 126px); }
    .tr-app .tr-zoom { right: -2cqw; }
}
@media (max-width: 899px) {
    .days { --dg: 64px; grid-template-columns: 1fr; max-width: 460px; margin: 70px auto 0; }
    /* stacked: the track runs down between the pages, arrows point down */
    .days::before { left: 50%; right: auto; top: 4%; bottom: 4%; width: 4px; height: auto; margin-left: -2px; background: linear-gradient(180deg, #9BEA6A, #5DA8FF 50%, #FFB443); }
    .dc-next, .d-1 .dc-next, .d-2 .dc-next { right: auto; left: 50%; top: auto; bottom: calc(var(--dg) / -2 - 27px); margin-left: -19px; }
    .dc-next .ic { transform: rotate(90deg); }
    .dcal:nth-child(2) { margin-top: 0; }
    .tr-box { margin-top: 130px; }
}
@media (max-width: 767px) {
    .sec-train { padding: 84px 0 120px; }
    .s15-sub { font-size: 17px; }
    .dc-n { font-size: 84px; }
    .dc-body { padding: 4px 22px 24px; }
    .tr-app { --qc: 24px; --qb: 16px; --qt: 70px; --qd: 12px; margin-top: 80px; padding: 50px 18px 36px; }
    .tr-hud { --cut: 24px; }
    .tr-hud .seam-l, .tr-hud .seam-r { top: 18px; }
    .tr-hud .seam-l { right: calc(50% + 84px); }
    .tr-hud .seam-r { left: calc(50% + 84px); }
    .dc-cap { right: -6px; top: -62px; width: 108px; }
    .tr-txt { font-size: 17px; }
    .tr-box { margin-top: 124px; }
}
@media (max-width: 559px) {
    .tr-app .tr-zoom { position: relative; top: auto; bottom: auto; left: auto; right: auto; width: 94%; margin: -2px auto 0; font-size: 13px; transform: none; }
    .tz-row small { font-size: 11.5px; }
}


/* ==========================================================
   SECTION 16 — HOW YOU GET PAID (light apricot)
   A light wave out of the dark training section. A / B / C as price
   tags; the Recurring scan clip in a laptop card; "You Set The Price."
   as a calculator (dark slider panel + a white receipt); the offer box.
   ========================================================== */
.sec-paid { position: relative; isolation: isolate; padding: 112px 0 170px; background: linear-gradient(180deg, #FFF4EA 0, #FFF4EA 80px, #FFF9F3 50%, #FFF6EE 100%); color: #4A3F36; }
/* calm colour light, no dots or stars: each tag's colour behind it, peach
   behind the recurring panel, lime behind the calculator */
.s16-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(transparent, #000 160px); mask-image: linear-gradient(transparent, #000 160px); background:
    radial-gradient(520px 380px at 22% 21%, rgba(229, 83, 75, .12), transparent 70%),
    radial-gradient(520px 380px at 50% 22%, rgba(47, 124, 246, .11), transparent 70%),
    radial-gradient(520px 380px at 78% 21%, rgba(30, 154, 69, .11), transparent 70%),
    radial-gradient(820px 480px at 40% 41%, rgba(255, 150, 90, .15), transparent 70%),
    radial-gradient(900px 520px at 50% 70%, rgba(198, 246, 137, .24), transparent 70%),
    radial-gradient(640px 460px at 90% 94%, rgba(255, 130, 150, .1), transparent 70%); }
.s16-wrap { position: relative; z-index: 1; max-width: 1240px; }
.s16-head { text-align: center; }
.s16-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px 7px 12px; border-radius: 999px; background: #2A1C12; color: #fff; font-size: 14px; font-weight: 700; }
.s16-kicker .ic { width: 16px; height: 16px; color: var(--acid); }
.s16-title { margin: 20px 0 0; color: #1E140C; font-family: var(--f-display); font-size: clamp(40px, 5.4vw, 82px); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.s16-title .mk, .s16-h3 .mk { padding: 0 .06em; background: linear-gradient(transparent 58%, rgba(198, 246, 137, .95) 58%, rgba(198, 246, 137, .95) 90%, transparent 90%); -webkit-box-decoration-break: clone; box-decoration-break: clone; white-space: nowrap; }
.s16-sub { max-width: 34em; margin: 18px auto 0; color: #4A3F36; font-size: 20px; line-height: 1.55; text-wrap: balance; }

/* A / B / C as option cards: light cut-corner cards with a lit edge in
   the option's colour, a big letter tile + a solid billing chip and a
   12-month strip showing how often you bill: one month (A), every month (B), a report each month (C) */
.ptags { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin: 64px 0 0; padding: 0; list-style: none; filter: drop-shadow(0 28px 26px rgba(90, 45, 10, .14)); }
.ptag { --c: #E5534B; --c2: #FF9070; --cs: 229, 83, 75; position: relative; transition: transform .3s var(--ease); }
.o-b { --c: #2F7CF6; --c2: #74B4FF; --cs: 47, 124, 246; }
.o-c { --c: #1E9A45; --c2: #62D483; --cs: 30, 154, 69; }
.ptag:hover { transform: translateY(-6px); }
.pt-card { position: relative; isolation: isolate; display: flex; flex-direction: column; height: 100%; padding: 34px 32px 30px; overflow: hidden; }
.pt-card::before, .pt-card::after { content: ""; position: absolute; z-index: -2; clip-path: polygon(34px 0, calc(100% - 34px) 0, 100% 34px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 34px); pointer-events: none; }
.pt-card::before { inset: 0; background: linear-gradient(135deg, rgba(var(--cs), .95), rgba(var(--cs), .2) 34%, rgba(var(--cs), .1) 66%, rgba(var(--cs), .75)); }
.pt-card::after { inset: 2px; background: radial-gradient(360px 220px at 0 0, rgba(var(--cs), .1), transparent 70%), linear-gradient(160deg, #fff, #FFFDFA); }
.pt-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pt-l { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .45), transparent 45%), linear-gradient(155deg, var(--c2), var(--c)); box-shadow: inset 0 -4px 8px rgba(0, 0, 0, .14), 0 14px 26px -12px var(--c); color: #fff; font-family: var(--f-display); font-size: 32px; font-weight: 800; transform: rotate(-6deg); }
.pt-bill { padding: 8px 15px; border-radius: 10px; background: var(--c); box-shadow: 0 8px 16px -8px var(--c); color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ptag h3 { position: relative; margin: 26px 0 10px; color: #1E140C; font-family: var(--f-display); font-size: 27px; font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
.ptag p { position: relative; margin: 0 0 24px; color: #4A3F36; font-size: 17.5px; line-height: 1.6; }
/* the 12-month billing strip */
.pt-rhythm { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; gap: 5px; margin-top: auto; padding-top: 18px; border-top: 1.5px dashed rgba(var(--cs), .25); }
.pt-rhythm i { height: 10px; border-radius: 4px; background: rgba(var(--cs), .14); }
.o-a .pt-rhythm i:first-child { background: linear-gradient(90deg, var(--c2), var(--c)); box-shadow: 0 0 10px rgba(var(--cs), .5); }
.o-b .pt-rhythm i { background: linear-gradient(90deg, var(--c2), var(--c)); }
.o-c .pt-rhythm i { justify-self: center; width: 10px; border-radius: 50%; background: var(--c); opacity: .75; }

/* the Recurring scan clip: copy | laptop */
.rc-app { --qc: 36px; --qb: 18px; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr); align-items: center; gap: 64px; margin: 110px 0 0; padding: 56px 56px 56px 64px; }
/* a light cut-corner card: peach-to-green lit edge, white fill */
.rc-bg { position: absolute; inset: 0; z-index: -1; filter: drop-shadow(0 40px 40px rgba(90, 45, 10, .16)); pointer-events: none; }
.rc-edge, .rc-fill { position: absolute; clip-path: polygon(var(--qc) 0, calc(100% - var(--qc)) 0, 100% var(--qc), 100% calc(100% - var(--qb)), calc(100% - var(--qb)) 100%, var(--qb) 100%, 0 calc(100% - var(--qb)), 0 var(--qc)); }
.rc-edge { inset: 0; background: linear-gradient(135deg, rgba(255, 138, 92, .95), rgba(255, 170, 120, .25) 34%, rgba(30, 154, 69, .14) 66%, rgba(30, 154, 69, .8)); }
.rc-fill { inset: 1.5px; background: radial-gradient(520px 320px at 0 0, rgba(255, 150, 90, .1), transparent 70%), radial-gradient(520px 320px at 100% 100%, rgba(198, 246, 137, .18), transparent 70%), linear-gradient(160deg, #fff, #FFFCF8); }
.rc-copy { display: block; }
.rc-h { display: block; margin: 0 0 14px; color: #1E140C; font-family: var(--f-display); font-size: clamp(30px, 2.8vw, 44px); font-weight: 800; line-height: 1.07; letter-spacing: -.035em; }
.rc-txt { display: block; color: #4A3F36; font-size: 19px; line-height: 1.65; }
.rc-dev { --pc: #FFC48A; }
.rc-app .rc-zoom { top: auto; bottom: -4cqw; right: -5cqw; left: auto; width: 38cqw; font-size: max(11px, 1.7cqw); transform: rotate(2.5deg); }
.rc-zoom .z-title { display: flex; align-items: center; gap: .8cqw; font-size: max(13px, 2.1cqw); }
.rc-zoom .z-title .ic { width: max(14px, 2.1cqw); height: max(14px, 2.1cqw); color: #1E9A45; }
.rc-zoom .z-row small { font-size: max(10px, 1.45cqw); }
.rc-zoom .z-btn .ic { width: max(11px, 1.5cqw); height: max(11px, 1.5cqw); }

/* the calculator */
.calc { margin-top: 120px; }
.s16-h3 { margin: 0; color: #1E140C; font-family: var(--f-display); font-size: clamp(36px, 4.4vw, 66px); font-weight: 800; line-height: 1.04; letter-spacing: -.04em; }
.calc-board { --qc: 40px; --qb: 22px; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 56px; max-width: 1120px; margin: 48px auto 0; padding: 56px 60px; color: #D3E3D7; }
/* a cut-corner panel (lime and amber lit edges, faint grid), so it no
   longer looks like the rounded offer box under it */
.cb-bg { position: absolute; inset: 0; z-index: -1; filter: drop-shadow(0 0 16px rgba(198, 246, 137, .14)) drop-shadow(0 50px 50px rgba(7, 35, 24, .4)); pointer-events: none; }
.cb-edge, .cb-fill { position: absolute; clip-path: polygon(var(--qc) 0, calc(100% - var(--qc)) 0, 100% var(--qc), 100% calc(100% - var(--qb)), calc(100% - var(--qb)) 100%, var(--qb) 100%, 0 calc(100% - var(--qb)), 0 var(--qc)); }
.cb-edge { inset: 0; background: radial-gradient(420px 260px at 0 0, #C6F689, transparent 70%), radial-gradient(420px 260px at 100% 100%, #FFB443, transparent 70%), rgba(255, 255, 255, .14); }
.cb-fill { inset: 1.5px; overflow: hidden; background: radial-gradient(520px 360px at 0 0, rgba(198, 246, 137, .14), transparent 70%), radial-gradient(480px 340px at 100% 100%, rgba(255, 180, 67, .14), transparent 70%), linear-gradient(160deg, #10402D, #0A2C1F 60%, #072318); }
.cb-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(198, 246, 137, .06) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(198, 246, 137, .06) 1px, transparent 1px) 0 0 / 40px 40px; -webkit-mask-image: linear-gradient(90deg, #000, transparent 60%); mask-image: linear-gradient(90deg, #000, transparent 60%); }
/* the wallet and coins, spilling from the receipt's corner */
.rc-coins { position: absolute; right: -70px; top: -96px; z-index: 2; width: 170px; height: auto; transform: rotate(12deg); filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .35)); pointer-events: none; }
.calc-ctrl { display: grid; gap: 30px; }
.cc-f label { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; color: #fff; font-size: 18px; font-weight: 700; }
.cc-f label b { padding: 4px 14px; border-radius: 999px; background: var(--lime); color: var(--ink); font-family: var(--f-display); font-size: 22px; font-weight: 800; line-height: 1.2; }
/* the slider: lime fill up to the thumb (--p set by JS) */
.cc-range { --p: 22%; width: 100%; height: 30px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.cc-range::-webkit-slider-runnable-track { height: 12px; border-radius: 12px; background: linear-gradient(90deg, #9BEA6A, var(--lime)) 0 0 / var(--p) 100% no-repeat, rgba(255, 255, 255, .12); }
.cc-range::-moz-range-track { height: 12px; border-radius: 12px; background: linear-gradient(90deg, #9BEA6A, var(--lime)) 0 0 / var(--p) 100% no-repeat, rgba(255, 255, 255, .12); }
.cc-range::-webkit-slider-thumb { width: 32px; height: 32px; margin-top: -10px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(198, 246, 137, .35), 0 8px 18px -6px rgba(0, 0, 0, .6); -webkit-appearance: none; appearance: none; transition: box-shadow .2s; }
.cc-range::-moz-range-thumb { width: 32px; height: 32px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(198, 246, 137, .35), 0 8px 18px -6px rgba(0, 0, 0, .6); }
.cc-range:focus-visible { outline: none; }
.cc-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px var(--lime), 0 8px 18px -6px rgba(0, 0, 0, .6); }
.cc-people { display: flex; flex-wrap: wrap; gap: 8px; min-height: 46px; }
.cc-people i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: var(--pc); color: #fff; box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .6); animation: pp-in .35s cubic-bezier(.3, 1.5, .5, 1); }
.cc-people i .ic { width: 22px; height: 22px; }
@keyframes pp-in { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
/* the receipt */
.calc-rcpt { position: relative; }
.rc-paper { position: relative; display: grid; gap: 10px; padding: 30px 32px 44px; background: #FFFDF8; color: #2B2118; transform: rotate(2deg); box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .7); -webkit-mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 11px) no-repeat, conic-gradient(from -45deg at 50% 100%, #000 90deg, transparent 0) 0 100% / 22px 14px repeat-x; mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 11px) no-repeat, conic-gradient(from -45deg at 50% 100%, #000 90deg, transparent 0) 0 100% / 22px 14px repeat-x; border-radius: 18px 18px 0 0; }
.rcp-lab { color: #7A6A5A; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.rcp-line { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1.5px dashed #E2D6C6; color: #4A3F36; font-family: var(--f-display); font-size: 20px; font-weight: 700; }
.rcp-line i { flex: 1; }
.rcp-total { color: #12100A; font-family: var(--f-display); font-size: clamp(64px, 7vw, 104px); font-weight: 800; line-height: .95; letter-spacing: -.05em; }
.rcp-total.bump { animation: tot-bump .35s var(--ease); }
@keyframes tot-bump { 40% { transform: scale(1.05); color: #1E9A45; } }
.rcp-note { margin: 6px 0 0; color: #5C4F42; font-size: 14.5px; line-height: 1.55; }
.pay-box { margin-top: 110px; }

@media (max-width: 1099px) {
    .ptags { gap: 18px; }
    .pt-card { padding: 30px 24px 26px; }
    .ptag h3 { font-size: 23px; }
    .rc-app { grid-template-columns: 1fr; gap: 50px; max-width: 720px; margin-left: auto; margin-right: auto; padding: 44px 36px 52px; }
    .rc-app .rc-zoom { right: -2cqw; }
    .calc-board { grid-template-columns: 1fr; gap: 44px; max-width: 640px; padding: 40px 36px 46px; }
    /* stacked: the wallet moves to the receipt's lower corner, clear of the sliders */
    .rc-coins { top: auto; bottom: -46px; right: -52px; width: 140px; }
}
@media (max-width: 899px) {
    .ptags { grid-template-columns: 1fr; max-width: 520px; margin: 50px auto 0; }
    .pay-box { margin-top: 130px; }
}
@media (max-width: 767px) {
    .sec-paid { padding: 84px 0 120px; }
    .s16-sub { font-size: 17px; }
    .rc-app { --qc: 24px; --qb: 14px; margin-top: 80px; padding: 36px 18px 36px; }
    .rc-txt { font-size: 17px; }
    .calc { margin-top: 90px; }
    .calc-board { --qc: 24px; --qb: 14px; margin-top: 32px; padding: 34px 20px 34px; }
    .rc-coins { right: -14px; bottom: -40px; width: 96px; }
    .cc-f label { font-size: 16px; }
    .cc-f label b { font-size: 19px; }
    .cc-people i { width: 38px; height: 38px; border-radius: 12px; }
    .cc-people i .ic { width: 18px; height: 18px; }
    .rc-paper { padding: 24px 22px 38px; transform: rotate(1deg); }
    .pay-box { margin-top: 124px; }
}
@media (max-width: 559px) {
    .rc-app .rc-zoom { position: relative; top: auto; bottom: auto; left: auto; right: auto; width: 92%; margin: -2px auto 0; font-size: 13px; transform: none; }
}


/* ==========================================================
   SECTION 17 — YOUR FIRST WEEK (dark plum)
   A dark wave out of the light apricot section. A planner board (4 x 2):
   seven tickable day tiles, each in its own colour, and a progress-ring
   tile that fills 0/7 → 7/7 as days are ticked off.
   ========================================================== */
.sec-week { position: relative; isolation: isolate; padding: 50px 0 150px; background: linear-gradient(180deg, #130A1C 0, #130A1C 80px, #190E26 45%, #140B1F 100%); color: #D9CFE6; overflow-x: clip; }
/* calm colour light, no stars or grain: violet behind the headline, lime
   under the board, teal and amber low at the sides */
.s17-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(transparent, #000 160px); mask-image: linear-gradient(transparent, #000 160px); background:
    radial-gradient(900px 420px at 50% 10%, rgba(160, 100, 255, .22), transparent 70%),
    radial-gradient(1100px 520px at 50% 64%, rgba(198, 246, 137, .1), transparent 70%),
    radial-gradient(620px 480px at 3% 84%, rgba(94, 234, 212, .12), transparent 70%),
    radial-gradient(620px 480px at 97% 84%, rgba(255, 194, 92, .11), transparent 70%); }
.s17-wrap { position: relative; z-index: 1; max-width: 1280px; }
.s17-head { position: relative; text-align: center; }
/* the 3D calendar beside the headline (fully on screen, floating) */
.s17-art { position: absolute; right: 2%; top: -6px; width: 200px; height: auto; transform: rotate(8deg); filter: drop-shadow(0 22px 24px rgba(0, 0, 0, .5)); animation: say-float 5s ease-in-out infinite alternate; pointer-events: none; }
.s17-kicker { display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px 7px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(198, 160, 255, .4); color: #D7BFFF; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.s17-kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 3px rgba(214, 242, 60, .2); }
.s17-title { margin: 22px 0 0; color: #fff; font-family: var(--f-display); font-size: clamp(44px, 6vw, 92px); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; }
.s17-title .hl { padding: 0 .04em .06em; color: transparent; background: linear-gradient(90deg, #E2C9FF, #C6F689 60%, #E9FF8A); -webkit-background-clip: text; background-clip: text; }
.s17-sub { max-width: 36em; margin: 18px auto 0; color: #CFC4DD; font-size: 20px; line-height: 1.55; text-wrap: balance; }

/* the planner board */
/* the board sits in a cut-corner HUD panel (lime > violet lit edge, rails) */
.wk-panel { --qc: 44px; --qb: 24px; --qt: 170px; --qd: 16px; position: relative; isolation: isolate; margin-top: 64px; padding: 86px 34px 34px; }
.wkp-bg { position: absolute; inset: 0; z-index: -1; filter: drop-shadow(0 0 16px rgba(184, 146, 255, .16)) drop-shadow(0 50px 50px rgba(0, 0, 0, .5)); pointer-events: none; }
.wkp-edge, .wkp-fill { position: absolute; clip-path: polygon(var(--qc) 0, calc(50% - var(--qt)) 0, calc(50% - var(--qt) + var(--qd)) var(--qd), calc(50% + var(--qt) - var(--qd)) var(--qd), calc(50% + var(--qt)) 0, calc(100% - var(--qc)) 0, 100% var(--qc), 100% calc(100% - var(--qb)), calc(100% - var(--qb)) 100%, var(--qb) 100%, 0 calc(100% - var(--qb)), 0 var(--qc)); }
.wkp-edge { inset: 0; background: radial-gradient(420px 260px at 0 0, #C6F689, transparent 70%), radial-gradient(420px 260px at 100% 0, #B892FF, transparent 70%), radial-gradient(300px 70px at 50% 0, rgba(214, 191, 255, .85), transparent 70%), radial-gradient(400px 240px at 100% 100%, rgba(94, 234, 212, .6), transparent 70%), radial-gradient(400px 240px at 0 100%, rgba(184, 146, 255, .5), transparent 70%), rgba(255, 255, 255, .12); }
.wkp-fill { inset: 1.5px; overflow: hidden; background: radial-gradient(640px 420px at 20% 30%, rgba(160, 100, 255, .16), transparent 70%), radial-gradient(520px 380px at 90% 80%, rgba(198, 246, 137, .1), transparent 70%), linear-gradient(160deg, #22163A, #190F29 60%, #130A1E); }
.wkp-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(214, 191, 255, .05) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(214, 191, 255, .05) 1px, transparent 1px) 0 0 / 40px 40px; -webkit-mask-image: linear-gradient(transparent 20%, #000 80%); mask-image: linear-gradient(transparent 20%, #000 80%); }
.wk-hud { --cut: 44px; --r1: #C6F689; --r2: #B892FF; --glow1: rgba(198, 246, 137, .7); --glow2: rgba(184, 146, 255, .7); }
.wk-hud .seam-l, .wk-hud .seam-r { top: 26px; }
.wk-hud .seam-l { right: calc(50% + 186px); }
.wk-hud .seam-r { left: calc(50% + 186px); }
.wk-board { --cg: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 52px var(--cg); margin: 0; padding: 0; list-style: none; }
/* the week track: a stretch per day above its tile (into the gap to the
   next one), a numbered node in the day's colour; ticking a day lights it */
.wk, .wk-prog { position: relative; }
.wk-seg { position: absolute; left: 0; right: calc(var(--cg) * -1); top: -27px; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--c, #C6F689) 22%, transparent); transition: background .3s, box-shadow .3s; }
.wk-4 .wk-seg, .wk-prog .wk-seg { right: 0; }
.wk-seg i { position: absolute; left: 34px; top: 50%; display: grid; place-items: center; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #1A1026; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c, #C6F689) 60%, transparent); color: var(--c, #C6F689); font-family: var(--f-display); font-size: 11px; font-style: normal; font-weight: 800; transition: background .3s, color .3s, box-shadow .3s; }
.wk.on .wk-seg { background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 40%, transparent)); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 70%, transparent); }
.wk.on .wk-seg i { background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 25%, transparent), 0 0 14px var(--c); color: #1A1024; }
/* the finish: a lime diamond over the progress tile */
.wk-goal i { left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 4px; transform: rotate(45deg); }
.wk-done .wk-goal { background: linear-gradient(90deg, rgba(198, 246, 137, .4), var(--lime)); box-shadow: 0 0 12px rgba(198, 246, 137, .7); }
.wk-done .wk-goal i { background: var(--lime); box-shadow: 0 0 16px var(--lime); }
.wk { --c: #C6F689; display: flex; min-width: 0; }
.wk-2 { --c: #7FB7FF; }
.wk-3 { --c: #B892FF; }
.wk-4 { --c: #FFC25C; }
.wk-5 { --c: #5EEAD4; }
.wk-6 { --c: #FF8A80; }
.wk-7 { --c: #9BEA6A; }
.wk-b { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-height: 250px; padding: 22px 22px 24px; border: 0; border-radius: 24px; background: linear-gradient(170deg, color-mix(in srgb, var(--c) 9%, #1C1229), #160E21); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 22%, transparent); color: inherit; font: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s; }
.wk-b:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 55%, transparent), 0 24px 40px -24px color-mix(in srgb, var(--c) 60%, transparent); }
.wk-top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.wk-day { padding: 5px 13px; border-radius: 999px; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); font-family: var(--f-display); font-size: 15px; font-weight: 800; letter-spacing: .02em; }
/* the tick: a solid button in the day's colour, its check showing faintly */
.wk-tick { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--c) 18%, transparent); box-shadow: inset 0 0 0 2px var(--c); color: color-mix(in srgb, var(--c) 55%, transparent); transition: background .25s, color .25s, box-shadow .25s, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.wk-tick .ic { width: 17px; height: 17px; }
.wk-b:hover .wk-tick { color: var(--c); }
/* "Tap to tick" on day 1, with a pulsing tick, until the first tap */
.wk-hint { margin: 0 9px 0 auto; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #EFE9F6; font-size: 12px; font-weight: 700; white-space: nowrap; transition: opacity .3s; }
.wk-1 .wk-tick { animation: wk-pulse 1.8s ease-out infinite; }
@keyframes wk-pulse { 0% { box-shadow: inset 0 0 0 2px var(--c), 0 0 0 0 color-mix(in srgb, var(--c) 60%, transparent); } 100% { box-shadow: inset 0 0 0 2px var(--c), 0 0 0 12px transparent; } }
.wk-used .wk-hint { opacity: 0; }
.wk-used .wk-1 .wk-tick { animation: none; }
/* a big faded check behind a ticked day */
.wk-wm { position: absolute; right: -26px; bottom: -36px; z-index: -1; width: 112px; height: 112px; max-width: none; color: var(--c); opacity: 0; transform: rotate(-10deg) scale(.8); transition: opacity .3s, transform .4s var(--ease); pointer-events: none; }
.wk.on .wk-wm { opacity: .12; transform: rotate(-10deg); }
.wk-ic { position: relative; display: grid; place-items: center; width: 48px; height: 48px; margin-top: 22px; border-radius: 15px; background: linear-gradient(155deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c)); color: #1A1024; box-shadow: 0 12px 22px -12px var(--c); transform: rotate(-6deg); }
.wk-ic .ic { width: 23px; height: 23px; }
.wk-t { position: relative; display: block; margin-top: 18px; color: #EFE9F6; font-size: 17px; font-weight: 500; line-height: 1.55; }
/* ticked */
.wk-b[aria-pressed="true"] { background: linear-gradient(170deg, color-mix(in srgb, var(--c) 18%, #1C1229), #1A1126); box-shadow: inset 0 0 0 2px var(--c), 0 0 40px -14px var(--c); }
.wk-b[aria-pressed="true"] .wk-tick { background: var(--c); box-shadow: none; color: #1A1024; transform: scale(1.12); }
/* the progress tile */
.wk-prog { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 250px; border-radius: 24px; background: radial-gradient(260px 200px at 50% 40%, rgba(198, 246, 137, .2), transparent 70%), linear-gradient(170deg, #22183A, #1A1230); box-shadow: inset 0 0 0 1.5px rgba(198, 246, 137, .4); transition: background .4s, box-shadow .4s; }
.wp-ring { position: relative; display: grid; place-items: center; width: 150px; height: 150px; }
.wp-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.wp-ring circle { fill: none; stroke-width: 10; }
.wp-ring .trk { stroke: rgba(198, 246, 137, .14); }
.wp-ring .bar { stroke: var(--lime); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .5s var(--ease); filter: drop-shadow(0 0 8px rgba(198, 246, 137, .6)); }
.wp-n { position: relative; display: grid; justify-items: center; gap: 2px; }
.wp-ring b { color: #fff; font-family: var(--f-display); font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.wp-n small { color: #C9BEDA; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.wp-dots { display: flex; gap: 7px; }
.wp-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .14); transition: background .25s; }
.wp-dots i:nth-child(1) { --c: #C6F689; } .wp-dots i:nth-child(2) { --c: #7FB7FF; } .wp-dots i:nth-child(3) { --c: #B892FF; } .wp-dots i:nth-child(4) { --c: #FFC25C; } .wp-dots i:nth-child(5) { --c: #5EEAD4; } .wp-dots i:nth-child(6) { --c: #FF8A80; } .wp-dots i:nth-child(7) { --c: #9BEA6A; }
.wp-dots i { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 50%, transparent); }
.wp-dots i.on { background: var(--c); box-shadow: 0 0 10px var(--c); }
/* 7/7: the tile turns lime */
.wp-done { display: none; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: #1A1024; color: var(--lime); font-family: var(--f-display); font-size: 15px; font-weight: 800; }
.wp-done .ic { width: 16px; height: 16px; }
.wk-done .wk-prog { background: radial-gradient(260px 200px at 50% 30%, rgba(255, 255, 255, .5), transparent 70%), linear-gradient(160deg, #E9FFB4, var(--lime) 55%, #A9E05A); box-shadow: 0 0 50px -10px rgba(198, 246, 137, .8); }
.wk-done .wp-ring .trk { stroke: rgba(26, 16, 36, .15); }
.wk-done .wp-ring .bar { stroke: #1A1024; filter: none; }
.wk-done .wp-ring b { color: #1A1024; }
.wk-done .wp-n small { color: #2E3A12; }
.wk-done .wp-dots { display: none; }
.wk-done .wp-done { display: inline-flex; }

@media (max-width: 1099px) {
    .wk-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wk-b, .wk-prog { min-height: 220px; }
    .wk-4 .wk-seg { right: 0; }
    .wk-2 .wk-seg, .wk-6 .wk-seg { right: 0; }
    .wk-panel { --qc: 32px; --qt: 110px; padding: 80px 24px 26px; }
    .wk-hud { --cut: 32px; }
    .wk-hud .seam-l { right: calc(50% + 126px); }
    .wk-hud .seam-r { left: calc(50% + 126px); }
    .s17-art { right: 0; top: -24px; width: 120px; }
}
@media (max-width: 767px) {
    .sec-week { padding: 34px 0 110px; }
    .s17-sub { font-size: 17px; }
    .s17-art { display: none; }
    .wk-panel { --qc: 22px; --qb: 14px; --qt: 60px; --qd: 10px; margin-top: 44px; padding: 44px 12px 14px 44px; }
    .wk-hud { --cut: 22px; }
    .wk-hud .seam-l, .wk-hud .seam-r { top: 16px; }
    .wk-hud .seam-l { right: calc(50% + 72px); }
    .wk-hud .seam-r { left: calc(50% + 72px); }
    .wk-board { --cg: 12px; grid-template-columns: 1fr; gap: var(--cg); }
    /* the track runs down the left of the list */
    .wk-seg, .wk-2 .wk-seg, .wk-4 .wk-seg, .wk-6 .wk-seg { left: -24px; right: auto; top: 0; bottom: calc(var(--cg) * -1); width: 3px; height: auto; }
    .wk.on .wk-seg { background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 40%, transparent)); }
    .wk-seg i { left: 50%; top: 30px; width: 20px; height: 20px; margin: -10px 0 0 -10px; font-size: 10px; }
    .wk-prog .wk-seg { bottom: 50%; }
    .wk-goal i { top: 100%; width: 14px; height: 14px; margin: -7px 0 0 -7px; }
    .wk-hint { font-size: 11px; }
    .wk-b { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "ic top" "ic t"; column-gap: 14px; min-height: 0; padding: 16px 16px 18px; border-radius: 20px; }
    .wk-top { grid-area: top; }
    .wk-ic { grid-area: ic; width: 44px; height: 44px; margin-top: 2px; border-radius: 14px; }
    .wk-t { grid-area: t; margin-top: 10px; font-size: 16px; }
    .wk-prog { flex-direction: row; gap: 18px; min-height: 0; padding: 16px; border-radius: 20px; }
    .wp-ring { width: 92px; height: 92px; }
    .wp-ring b { font-size: 24px; }
    .wp-n small { font-size: 9px; letter-spacing: .06em; }
}


/* ==========================================================
   SECTION 18 — THE HONEST SPLIT (light stone)
   A light wave out of the dark plum section. One card cut down the
   middle: a dark emerald half (the tool) and a white half (you), joined
   by a seam badge carrying the ProfitMaps mark; then a yes / probably-
   not fit check.
   ========================================================== */
.sec-split { position: relative; isolation: isolate; padding: 50px 0 170px; background: linear-gradient(180deg, #F1F3F0 0, #F1F3F0 80px, #F7F8F5 50%, #F2F4F1 100%); color: #3E4A44; }
/* calm colour light, no dots or stars: green behind the tool half, blue
   behind yours, lime and coral behind the fit cards */
.s18-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(transparent, #000 160px); mask-image: linear-gradient(transparent, #000 160px); background:
    radial-gradient(800px 380px at 50% 12%, rgba(198, 246, 137, .3), transparent 70%),
    radial-gradient(620px 480px at 16% 36%, rgba(30, 154, 69, .16), transparent 70%),
    radial-gradient(620px 480px at 84% 36%, rgba(80, 140, 255, .14), transparent 70%),
    radial-gradient(620px 440px at 26% 80%, rgba(198, 246, 137, .26), transparent 70%),
    radial-gradient(560px 420px at 76% 82%, rgba(255, 130, 110, .12), transparent 70%); }
.s18-wrap { position: relative; z-index: 1; max-width: 1240px; }
.s18-head { position: relative; text-align: center; }
/* the 3D balance scale beside the headline (fully on screen, floating) */
.s18-art { position: absolute; right: 2%; top: -10px; width: 190px; height: auto; transform: rotate(6deg); filter: drop-shadow(0 22px 22px rgba(11, 29, 18, .3)); animation: say-float 5s ease-in-out infinite alternate; pointer-events: none; }
.s18-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px 7px 11px; border-radius: 999px; background: #0E1A14; color: #fff; font-size: 14px; font-weight: 700; }
.s18-kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 3px rgba(214, 242, 60, .25); }
.s18-title { margin: 20px 0 0; color: #0B1D12; font-family: var(--f-display); font-size: clamp(44px, 6vw, 92px); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; }
.s18-title .mk { padding: 0 .06em; background: linear-gradient(transparent 58%, rgba(198, 246, 137, .95) 58%, rgba(198, 246, 137, .95) 90%, transparent 90%); white-space: nowrap; }
.s18-sub { margin: 18px auto 0; color: #3E4A44; font-size: 20px; line-height: 1.55; text-wrap: balance; }

/* the split card */
/* one cut-corner panel: each half carries its own edge (::before) and fill
   (::after) layers, cut on its outer corners only */
.hsp-card { --qc: 44px; --qb: 22px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 64px; filter: drop-shadow(0 50px 44px rgba(11, 29, 18, .22)); }
.hsp-half::before, .hsp-half::after { content: ""; position: absolute; pointer-events: none; }
.hsp-half::before { inset: 0; z-index: -2; }
.hsp-half::after { z-index: -1; }
.hsp-tool::before, .hsp-tool::after { clip-path: polygon(var(--qc) 0, 100% 0, 100% 100%, var(--qb) 100%, 0 calc(100% - var(--qb)), 0 var(--qc)); }
.hsp-you::before, .hsp-you::after { clip-path: polygon(0 0, calc(100% - var(--qc)) 0, 100% var(--qc), 100% calc(100% - var(--qb)), calc(100% - var(--qb)) 100%, 0 100%); }
.hsp-tool::before { background: radial-gradient(420px 260px at 0 0, #C6F689, transparent 70%), radial-gradient(360px 240px at 0 100%, rgba(30, 154, 69, .9), transparent 70%), rgba(198, 246, 137, .3); }
.hsp-tool::after { inset: 1.5px 0 1.5px 1.5px; background: radial-gradient(520px 360px at 0 0, rgba(198, 246, 137, .16), transparent 70%), linear-gradient(160deg, #10402D, #0A2C1F 60%, #072318); }
.hsp-you::before { background: radial-gradient(420px 260px at 100% 0, #5B9BFF, transparent 70%), radial-gradient(360px 240px at 100% 100%, rgba(47, 124, 246, .55), transparent 70%), rgba(47, 124, 246, .22); }
.hsp-you::after { inset: 1.5px 1.5px 1.5px 0; background: radial-gradient(460px 300px at 100% 0, rgba(80, 140, 255, .1), transparent 70%), linear-gradient(160deg, #fff, #FBFDFF); }
.hsp-half { position: relative; isolation: isolate; display: flex; flex-direction: column; padding: 52px 56px 56px; }
.hsp-tool { padding-right: 92px; }
.hsp-you { padding-left: 98px; }
.hsp-tool { color: #D3E3D7; }
.hsp-you { color: #3E4A44; }
.hsp-half h3 { display: flex; align-items: center; gap: 14px; margin: 0 0 28px; font-family: var(--f-display); font-size: clamp(28px, 2.6vw, 40px); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; }
.hsp-tool h3 { color: #fff; }
.hsp-you h3 { color: #0B1D12; }
.hsp-ic { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 18px; transform: rotate(-6deg); }
.hsp-tool .hsp-ic { background: linear-gradient(155deg, #F2FF9C, var(--acid)); color: var(--ink); box-shadow: 0 12px 26px -10px rgba(214, 242, 60, .55); }
.hsp-you .hsp-ic { background: linear-gradient(155deg, #8EC5FF, #2F7CF6); color: #fff; box-shadow: 0 12px 26px -10px rgba(47, 124, 246, .6); }
.hsp-ic .ic { width: 27px; height: 27px; }
.hsp-half ul { display: flex; flex: 1; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
/* the shorter list spreads to the same height, no gap at the bottom */
.hsp-you ul { justify-content: space-between; }
.hsp-half li { display: flex; align-items: flex-start; gap: 14px; padding: 13px 0; font-size: 18.5px; line-height: 1.45; }
.hsp-tool li { border-top: 1px dashed rgba(198, 246, 137, .16); color: #E8F1EA; }
.hsp-you li { border-top: 1px dashed #DDE5DF; color: #1D2A23; }
.hsp-half li:first-child { border-top: 0; }
.hsp-ck { display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin-top: -1px; border-radius: 50%; }
.hsp-ck .ic { width: 15px; height: 15px; }
.hsp-tool .hsp-ck { background: var(--lime); color: var(--ink); }
.hsp-you .hsp-ck { background: #0B1D12; color: #fff; }
/* the seam: a lime line down the cut and the ProfitMaps mark on it */
.hsp-seam { position: absolute; left: 50%; top: 0; bottom: 0; z-index: 2; width: 0; pointer-events: none; }
.hsp-seam::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 4px; border-radius: 4px; background: linear-gradient(rgba(198, 246, 137, .2), var(--lime) 18%, var(--lime) 82%, rgba(198, 246, 137, .2)); box-shadow: 0 0 0 1px rgba(30, 154, 69, .3), 0 0 22px rgba(198, 246, 137, .9); }
.hsp-seam > span { position: absolute; left: 0; top: 50%; display: grid; place-items: center; width: 86px; height: 86px; margin: -43px 0 0 -43px; border-radius: 27px; background: #fff; box-shadow: 0 0 0 2px var(--lime), 0 0 0 9px rgba(198, 246, 137, .35), 0 0 40px rgba(198, 246, 137, .55), 0 18px 34px -12px rgba(0, 0, 0, .5); transform: rotate(-8deg); }
.hsp-seam img { width: 56px; height: 56px; border-radius: 15px; }

@media (max-width: 1023px) {
    .hsp-card { --qc: 32px; --qb: 18px; }
    .hsp-half { padding: 44px 36px 46px; }
    .hsp-tool { padding-right: 70px; }
    .hsp-you { padding-left: 76px; }
    .hsp-seam > span { width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 23px; }
    .hsp-seam img { width: 46px; height: 46px; }
    .s18-art { right: 0; top: -24px; width: 120px; }
    .hsp-half li { font-size: 17px; }
}
@media (max-width: 767px) {
    .sec-split { padding: 34px 0 110px; }
    .s18-sub { font-size: 17px; }
    .s18-art { display: none; }
    .hsp-card { --qc: 24px; --qb: 14px; grid-template-columns: 1fr; margin-top: 44px; }
    .hsp-tool { padding: 34px 22px 56px; }
    .hsp-you { padding: 56px 22px 34px; }
    /* stacked: cut the top corners of the tool half, the bottom of yours */
    .hsp-tool::before, .hsp-tool::after { clip-path: polygon(var(--qc) 0, calc(100% - var(--qc)) 0, 100% var(--qc), 100% 100%, 0 100%, 0 var(--qc)); }
    .hsp-tool::after { inset: 1.5px 1.5px 0; }
    .hsp-you::before, .hsp-you::after { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--qb)), calc(100% - var(--qb)) 100%, var(--qb) 100%, 0 calc(100% - var(--qb))); }
    .hsp-you::after { inset: 0 1.5px 1.5px; }
    .hsp-half h3 { margin-bottom: 18px; }
    .hsp-ic { width: 48px; height: 48px; border-radius: 15px; }
    .hsp-half li { padding: 11px 0; font-size: 16.5px; }
    /* the seam runs across between the halves */
    .hsp-seam { position: relative; left: auto; top: auto; bottom: auto; width: auto; height: 0; }
    .hsp-seam::before { left: 24px; right: 24px; top: -1.5px; bottom: auto; width: auto; height: 3px; background: linear-gradient(90deg, transparent, var(--lime) 20%, var(--lime) 80%, transparent); }
    .hsp-seam > span { left: 50%; top: 0; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 22px; }
    .hsp-seam img { width: 44px; height: 44px; }
}


/* ---------- is this for you? (pairs with the split card) ---------- */
.fit { margin-top: 110px; text-align: center; }
.fit-kicker { margin-bottom: 18px; }
.fit-title .mk { padding: 0 .06em; background: linear-gradient(transparent 58%, rgba(198, 246, 137, .95) 58%, rgba(198, 246, 137, .95) 90%, transparent 90%); white-space: nowrap; }
.fit-title { margin: 0; color: #0B1D12; font-family: var(--f-display); font-size: clamp(34px, 4.2vw, 62px); font-weight: 800; line-height: 1.05; letter-spacing: -.04em; }
.fit-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: stretch; gap: 30px; margin-top: 110px; text-align: left; }
/* the buyer, standing behind the top of the "Yes" card (its tick moves right) */
.fit-you { position: absolute; left: 0; bottom: calc(100% - 34px); z-index: 0; width: 320px; height: auto; filter: drop-shadow(0 22px 26px rgba(11, 29, 18, .18)); pointer-events: none; }
.fit-grid .fit-card { z-index: 1; }
.fit-yes .fit-ic { left: auto; right: 40px; }
/* cut-corner cards with a full-colour header band (green / coral), a white
   tick or cross tile on the top edge and solid marks; "Yes" leads with a
   lime glow */
.fit-card { --c1: #2FB45A; --c2: #1E9A45; --fb: #fff; --qt: 34px; --pt: 56px; --px: 44px; position: relative; isolation: isolate; display: flex; flex-direction: column; padding: var(--pt) var(--px) 40px; filter: drop-shadow(0 36px 34px rgba(11, 29, 18, .16)); }
.fit-card::before, .fit-card::after { content: ""; position: absolute; clip-path: polygon(var(--qt) 0, calc(100% - var(--qt)) 0, 100% var(--qt), 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 var(--qt)); pointer-events: none; }
.fit-card::before { inset: 0; z-index: -2; background: linear-gradient(160deg, var(--c1), var(--c2)); }
.fit-card::after { inset: 2px; z-index: -1; background: var(--fb); }
.fit-yes { --fc: #1E9A45; filter: drop-shadow(0 0 30px rgba(198, 246, 137, .7)) drop-shadow(0 36px 34px rgba(11, 29, 18, .16)); }
.fit-no { --fc: #D9453C; --c1: #F0695F; --c2: #D9453C; --fb: #FFF6F4; filter: drop-shadow(0 0 26px rgba(255, 138, 128, .3)) drop-shadow(0 36px 34px rgba(80, 20, 10, .14)); }
.fit-card ul { display: flex; flex: 1; flex-direction: column; }
/* the header band: the card's colour edge to edge, cut with the card */
.fit-card h4 { display: flex; align-items: center; gap: 14px; margin: calc(2px - var(--pt)) calc(2px - var(--px)) 20px; padding: calc(var(--pt) - 4px) calc(var(--px) - 2px) 22px; background: radial-gradient(420px 140px at 0 0, rgba(255, 255, 255, .22), transparent 70%), linear-gradient(160deg, var(--c1), var(--c2)); clip-path: polygon(calc(var(--qt) - 1px) 0, calc(100% - var(--qt) + 1px) 0, 100% calc(var(--qt) - 1px), 100% 100%, 0 100%, 0 calc(var(--qt) - 1px)); color: #fff; font-family: var(--f-display); font-size: clamp(24px, 2.2vw, 32px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.fit-ic { position: absolute; left: 40px; top: -28px; z-index: 2; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: #fff; color: var(--fc); transform: rotate(-6deg); }
.fit-yes .fit-ic { box-shadow: 0 0 0 4px rgba(198, 246, 137, .7), 0 14px 26px -10px rgba(30, 154, 69, .7); }
.fit-no .fit-ic { box-shadow: 0 0 0 4px rgba(255, 170, 160, .6), 0 14px 26px -10px rgba(217, 69, 60, .6); }
.fit-ic .ic { width: 27px; height: 27px; }
.fit-card ul { margin: 0; padding: 0; list-style: none; }
.fit-card li { display: flex; align-items: flex-start; gap: 14px; padding: 13px 0; border-top: 1px dashed #D3DED7; color: #14231B; font-size: 18px; font-weight: 500; line-height: 1.45; }
.fit-no li { border-top-color: #F1CBC4; color: #3A1A16; }
.fit-card li:first-child { border-top: 0; }
.fit-mk { display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin-top: -1px; border-radius: 50%; background: var(--fc); box-shadow: 0 6px 12px -6px var(--fc); color: #fff; }
.fit-mk .ic { width: 15px; height: 15px; }
@media (max-width: 1023px) {
    .fit-card { --pt: 50px; --px: 30px; padding-bottom: 34px; }
    .fit-card li { font-size: 17px; }
}
@media (max-width: 767px) {
    .fit { margin-top: 80px; }
    .fit-grid { grid-template-columns: 1fr; gap: 44px; margin-top: 200px; }
    .fit-you { width: 230px; }
    .fit-yes .fit-ic { right: 20px; }
    .fit-card { --pt: 44px; --px: 20px; --qt: 24px; padding-bottom: 26px; }
    .fit-card h4 { margin-bottom: 12px; padding-bottom: 18px; }
    .fit-ic { left: 20px; top: -24px; width: 48px; height: 48px; border-radius: 15px; }
    .fit-card li { padding: 11px 0; font-size: 16.5px; }
}


/* ==========================================================
   SECTION 19 — "BUT WHAT IF…" (dark wine)
   A dark wave out of the light stone section. The eight worries as a
   numbered list; the chosen one's honest answer opens in a big lime card
   beside it (phones: accordion); then the full offer box.
   ========================================================== */
.sec-worry { position: relative; isolation: isolate; padding: 50px 0 100px; background: linear-gradient(180deg, #170A0E 0, #170A0E 80px, #1D0D13 45%, #160A0E 100%); color: #E7D6DA; overflow-x: clip; }
/* calm colour light, no stars or grain: coral behind the headline, lime
   behind the answer card, warm coral and amber low at the sides */
.s19-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(transparent, #000 160px); mask-image: linear-gradient(transparent, #000 160px); background:
    radial-gradient(900px 420px at 50% 9%, rgba(255, 110, 100, .2), transparent 70%),
    radial-gradient(640px 480px at 22% 40%, rgba(255, 110, 100, .12), transparent 70%),
    radial-gradient(760px 520px at 70% 40%, rgba(198, 246, 137, .14), transparent 70%),
    radial-gradient(620px 460px at 3% 80%, rgba(255, 120, 100, .12), transparent 70%),
    radial-gradient(620px 460px at 97% 80%, rgba(255, 180, 90, .11), transparent 70%); }
.s19-wrap { position: relative; z-index: 1; max-width: 1260px; }
.s19-head { position: relative; text-align: center; }
/* the 3D lifebuoy beside the headline (fully on screen, floating) */
.s19-art { position: absolute; right: 2%; top: -14px; width: 190px; height: auto; transform: rotate(-6deg); filter: drop-shadow(0 22px 24px rgba(0, 0, 0, .5)); animation: say-float 5s ease-in-out infinite alternate; pointer-events: none; }
.s19-kicker { display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px 7px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(255, 140, 130, .4); color: #FFB3A8; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.s19-kicker i { width: 8px; height: 8px; border-radius: 50%; background: #FF8A80; box-shadow: 0 0 0 3px rgba(255, 138, 128, .22); }
.s19-title { margin: 22px 0 0; color: #fff; font-family: var(--f-display); font-size: clamp(44px, 6.2vw, 96px); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; }
/* oversized quote marks: coral open, lime close */
.bw-qm { display: inline-block; margin: 0 .02em; padding: .08em .04em 0; font-size: 1.3em; line-height: .9; vertical-align: -.2em; color: transparent; background: linear-gradient(180deg, #FFB3A8, #FF6B5E); -webkit-background-clip: text; background-clip: text; }
.bw-qm + .bw-qm, .s19-title .bw-qm:last-child { background-image: linear-gradient(180deg, #F2FF9C, #9BEA6A); }

/* the worries: a numbered list (left) + the chosen answer in a big card
   (right). The answers live inside their list items; with JS on desktop
   they are lifted into the card area (absolute, over .wq-stage). */
.wq { --lw: 520px; --gap: 36px; position: relative; display: grid; grid-template-columns: var(--lw) minmax(0, 1fr); gap: var(--gap); align-items: stretch; margin-top: 60px; }
.wq-list { display: grid; gap: 10px; align-content: start; }
.wq-q { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 38px; align-items: center; gap: 14px; width: 100%; padding: 16px 16px 16px 18px; border: 0; border-radius: 20px; background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .08); color: #F3E7EA; font: inherit; text-align: left; cursor: pointer; transition: background .25s, box-shadow .25s, transform .25s var(--ease); }
.wq-q:hover { background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1.5px rgba(255, 160, 150, .3); }
.wq-n { color: #FF8A80; font-family: var(--f-display); font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.wq-t { font-family: var(--f-display); font-size: 18.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.wq-go { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .07); color: #D9C2C7; transition: background .25s, color .25s, transform .25s var(--ease); }
.wq-go .ic { width: 16px; height: 16px; }
.wq-item.on .wq-q { background: linear-gradient(100deg, rgba(255, 107, 94, .4), rgba(255, 107, 94, .12)); box-shadow: inset 0 0 0 1.5px rgba(255, 150, 140, .75), 0 0 30px -8px rgba(255, 107, 94, .55); color: #fff; }
.wq-item.on .wq-n { color: #fff; }
/* a lit coral bar on the chosen row's left edge */
.wq-q::before { content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 4px; border-radius: 4px; background: #FF8A80; box-shadow: 0 0 14px #FF6B5E; opacity: 0; transition: opacity .25s; }
.wq-item.on .wq-q::before { opacity: 1; }
.wq-item.on .wq-go { background: var(--lime); color: var(--ink); transform: translateX(4px); }
/* the answer card */
/* the answer card: a cut-corner panel (lime lit edge, light lime fill) */
.wq-stage { --qc: 40px; --qb: 22px; position: relative; isolation: isolate; grid-column: 2; grid-row: 1; min-height: 100%; filter: drop-shadow(0 0 22px rgba(198, 246, 137, .3)) drop-shadow(0 50px 50px rgba(0, 0, 0, .5)); }
/* the top-left corner stays small so the pointer can sit level with row 1 */
.wq-stage::before, .wq-stage::after { content: ""; position: absolute; clip-path: polygon(12px 0, calc(100% - var(--qc)) 0, 100% var(--qc), 100% calc(100% - var(--qb)), calc(100% - var(--qb)) 100%, var(--qb) 100%, 0 calc(100% - var(--qb)), 0 12px); pointer-events: none; }
.wq-stage::before { inset: 0; z-index: -2; background: radial-gradient(420px 260px at 0 0, #E9FF8A, transparent 70%), radial-gradient(420px 260px at 100% 100%, #9BEA6A, transparent 70%), #C6F689; }
.wq-stage::after { inset: 2px; z-index: -1; background: radial-gradient(420px 300px at 100% 0, rgba(198, 246, 137, .5), transparent 70%), linear-gradient(165deg, #F7FFE9, #E6F8C9); }
/* the pointer: slides to the chosen row (--py set by JS) */
.wq-ptr { position: absolute; left: calc(var(--lw) + var(--gap) - 12px); top: var(--py, 40px); z-index: 1; width: 26px; height: 26px; margin-top: -13px; background: #F5FEE6; box-shadow: -2px 2px 0 0 #C6F689; transform: rotate(45deg); transition: top .4s var(--ease); pointer-events: none; }
.wq-quote { position: absolute; right: 44px; top: 4px; color: rgba(255, 107, 94, .18); font-family: var(--f-display); font-size: 260px; font-weight: 800; line-height: 1; pointer-events: none; }
/* which worry you're on */
.wq-pips { position: absolute; left: 64px; bottom: 60px; display: flex; align-items: center; gap: 8px; }
.wq-pips i { width: 10px; height: 10px; border-radius: 5px; background: rgba(19, 36, 15, .16); transition: width .3s var(--ease), background .3s; }
.wq-pips i.on { width: 28px; background: #13240F; }
.wq-nav { position: absolute; right: 40px; bottom: 40px; display: flex; gap: 10px; }
.wq-nav button { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: #13240F; color: #fff; cursor: pointer; transition: transform .2s var(--ease), background .2s; }
.wq-nav button:hover { transform: translateY(-2px); background: #1E9A45; }
.wq-nav .ic { width: 20px; height: 20px; }
.wq-prev .ic { transform: scaleX(-1); }
.wq-a { margin: 10px 0 6px; padding: 22px 24px; border-radius: 20px; background: linear-gradient(165deg, #F7FFE9, #E6F8C9); color: #13240F; }
.wq-a-top { display: flex; flex-direction: column; gap: 10px; }
.wq-a-n { align-self: flex-start; padding: 4px 12px; border-radius: 999px; background: #13240F; color: var(--lime); font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.wq-a-q { color: #C2382E; font-family: var(--f-display); font-size: 22px; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; }
.wq-a p { margin: 16px 0 0; color: #13240F; font-size: 19px; line-height: 1.6; }
/* JS on: the answers lift into the card (desktop) */
html.js .wq-stage { display: block; }
html.js .wq-a { position: absolute; left: calc(var(--lw) + var(--gap)); right: 0; top: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 56px 64px 124px; background: none; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s .35s; }
html.js .wq-item.on .wq-a { opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s; }
/* the answer box covers the whole card, arrows included: let clicks through
   it to the arrow buttons; its text stays selectable */
html.js .wq-a { pointer-events: none; }
html.js .wq-a > * { pointer-events: auto; }
html.js .wq-a-q { font-size: clamp(28px, 2.7vw, 42px); }
html.js .wq-a p { margin-top: 22px; font-size: clamp(19px, 1.55vw, 23px); line-height: 1.6; }
html:not(.js) .wq { grid-template-columns: 1fr; }
html:not(.js) .wq-stage { display: none; }
.bw-box { margin-top: 100px; }

@media (min-width: 900px) and (max-width: 1199px) {
    .wq { --lw: 400px; --gap: 26px; }
    .wq-t { font-size: 17px; }
    html.js .wq-a { padding: 44px 44px 116px; }
    .wq-pips { left: 44px; bottom: 56px; }
    .s19-art { right: 0; top: -26px; width: 120px; }
}
@media (max-width: 899px) {
    .wq { grid-template-columns: 1fr; max-width: 680px; margin-left: auto; margin-right: auto; }
    .wq-stage, .wq-ptr { display: none !important; }
    /* accordion: the open answer sits under its worry */
    html.js .wq-a { position: static; display: none; margin: 10px 0 6px; padding: 24px 24px 26px; background: radial-gradient(300px 200px at 100% 0, rgba(198, 246, 137, .5), transparent 70%), linear-gradient(165deg, #F7FFE9, #E6F8C9); box-shadow: inset 0 0 0 2px #C6F689; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); opacity: 1; visibility: visible; transform: none; }
    html.js .wq-item.on .wq-a { display: block; animation: sx-in .35s var(--ease); }
    html.js .wq-a-q { display: none; }
    html.js .wq-a p { margin-top: 12px; font-size: 18px; }
    .wq-item.on .wq-go { transform: rotate(90deg); }
    .bw-box { margin-top: 130px; }
}
@media (max-width: 767px) {
    .sec-worry { padding: 34px 0 80px; }
    .s19-art { display: none; }
    .wq { margin-top: 40px; }
    .wq-q { grid-template-columns: 34px minmax(0, 1fr) 32px; gap: 10px; padding: 14px 12px 14px 14px; border-radius: 16px; }
    .wq-n { font-size: 19px; }
    .wq-t { font-size: 16.5px; }
    .wq-go { width: 32px; height: 32px; }
    html.js .wq-a { padding: 20px 18px 22px; border-radius: 16px; }
    html.js .wq-a p { font-size: 16.5px; }
    .bw-box { margin-top: 124px; }
}


/* ==========================================================
   SECTION 20 — TWO BONUSES (light pearl)
   A V-notch out of the dark wine section. LME bonus structure: two
   alternating cut-corner cards — a tinted stage with the bonus box
   (Included ribbon, glow, floor, two chips) and the copy (tag, marked
   title, lede, description). Blue = course,
   purple = training, matching the box art.
   ========================================================== */
.sec-bonus { position: relative; isolation: isolate; padding: 140px 0 170px; background: linear-gradient(180deg, #F5F6FC 0, #F5F6FC 80px, #FAFAFE 50%, #F4F5FB 100%); color: #3E4560; }
/* the earlier pearl background (user preferred it): blue light left,
   violet light right, lime glow behind the headline + the faint dot grid */
.s20-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(transparent, #000 160px); mask-image: linear-gradient(transparent, #000 160px); background: radial-gradient(700px 520px at 6% 30%, rgba(47, 107, 255, .14), transparent 70%), radial-gradient(700px 520px at 94% 66%, rgba(139, 61, 255, .14), transparent 70%), radial-gradient(800px 400px at 50% 6%, rgba(198, 246, 137, .3), transparent 70%); }
.s20-wrap { position: relative; z-index: 1; max-width: 1240px; }
.s20-head { position: relative; text-align: center; }
/* the 3D gift beside the headline (fully on screen, floating) */
.s20-art { position: absolute; left: calc(50% + 462px); top: -24px; width: 170px; height: auto; transform: rotate(8deg); filter: drop-shadow(0 22px 22px rgba(16, 20, 43, .28)); animation: say-float 5s ease-in-out infinite alternate; pointer-events: none; }
.s20-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px 7px 12px; border-radius: 999px; background: linear-gradient(135deg, #F9DE80, #E8AF35); color: #2B1C00; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 10px 26px -10px rgba(232, 175, 53, .7); }
.s20-kicker .ic { width: 16px; height: 16px; }
.s20-title { margin: 20px 0 0; color: #10142B; font-family: var(--f-display); font-size: clamp(44px, 5.8vw, 88px); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; }
/* "Bonuses" carries a gold marker: the one word the section is about */
.s20-title .mk-gold { padding: 0 .06em; background: linear-gradient(transparent 56%, #FFD45C 56%, #F2B632 90%, transparent 90%); white-space: nowrap; }
.s20-sub { margin: 18px auto 0; color: #3E4560; font-size: 20px; line-height: 1.55; text-wrap: balance; }

/* the bonus cards */
/* a gold glow round each bonus card */
.bx-list { display: grid; gap: 44px; margin-top: 64px; filter: drop-shadow(0 0 26px rgba(245, 190, 58, .35)) drop-shadow(0 40px 40px rgba(16, 20, 43, .16)); }
/* each bonus is a cut-corner panel in its own colour: the card is the lit
   edge (2px), each half is cut on its outer corners only */
.bx-card { --a: #2F6BFF; --a2: #22D3EE; --qc: 44px; --qb: 22px; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: stretch; gap: 0; padding: 2px; background: linear-gradient(135deg, var(--a), var(--a2) 30%, color-mix(in srgb, var(--a2) 30%, #fff) 60%, var(--a)); clip-path: polygon(var(--qc) 0, calc(100% - var(--qc)) 0, 100% var(--qc), 100% calc(100% - var(--qb)), calc(100% - var(--qb)) 100%, var(--qb) 100%, 0 calc(100% - var(--qb)), 0 var(--qc)); }
.bx-vis, .bx-body { --c1: calc(var(--qc) - 1px); --c2: calc(var(--qb) - 1px); }
.bx-vis { clip-path: polygon(var(--c1) 0, 100% 0, 100% 100%, var(--c2) 100%, 0 calc(100% - var(--c2)), 0 var(--c1)); }
.bx-body { background: radial-gradient(420px 260px at 100% 0, color-mix(in srgb, var(--a2) 10%, transparent), transparent 70%), #fff; clip-path: polygon(0 0, calc(100% - var(--c1)) 0, 100% var(--c1), 100% calc(100% - var(--c2)), calc(100% - var(--c2)) 100%, 0 100%); }
.bx-flip .bx-vis { clip-path: polygon(0 0, calc(100% - var(--c1)) 0, 100% var(--c1), 100% calc(100% - var(--c2)), calc(100% - var(--c2)) 100%, 0 100%); }
.bx-flip .bx-body { clip-path: polygon(var(--c1) 0, 100% 0, 100% 100%, var(--c2) 100%, 0 calc(100% - var(--c2)), 0 var(--c1)); }
.bx-flip { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.bx-flip .bx-vis { order: 2; }
/* the stage */
.bx-vis { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; min-height: 600px; padding: 84px 40px 36px; background: radial-gradient(closest-side at 50% 55%, color-mix(in srgb, var(--a2) 35%, transparent), transparent), linear-gradient(160deg, color-mix(in srgb, var(--a) 92%, #000), color-mix(in srgb, var(--a) 60%, #0A0F2C) 60%, #0A0F2C); overflow: hidden; }
.bx-glow { position: absolute; left: 50%; top: 50%; width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--a2) 60%, transparent), transparent); }
.bx-floor { position: absolute; left: 50%; bottom: 112px; width: 360px; height: 70px; margin-left: -180px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .4), color-mix(in srgb, var(--a2) 30%, transparent) 60%, transparent); }
.bx-box { position: relative; z-index: 1; width: min(330px, 80%); height: auto; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .55)); transform: rotate(-4deg); transition: transform .4s var(--ease); }
.bx-card:hover .bx-box { transform: rotate(-2deg) translateY(-8px); }
/* the two chips sit in a row under the box, never on the box art */
.bx-chips { position: relative; z-index: 2; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.bx-chip { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 16px; background: #fff; box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .6); color: #10142B; font-size: 15px; font-weight: 800; line-height: 1.2; }
.bx-chip .ic { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 11px; background: linear-gradient(155deg, var(--a2), var(--a)); color: #fff; }
.bx-chip small { display: block; color: #6B7590; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ch-a { transform: rotate(-3deg); }
.ch-b { transform: rotate(2.5deg); }
/* the copy */
.bx-body { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 56px 58px 56px 54px; }
/* "Bonus #1" on the copy side: a gold tag that matches the seal */
.bx-tag { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 12px; border-radius: 12px; background: radial-gradient(120px 40px at 0 0, rgba(255, 255, 255, .55), transparent 70%), linear-gradient(150deg, #FFE48A, #F5BE3A 55%, #E39A1C); box-shadow: inset 0 -2px 0 rgba(150, 90, 0, .22), 0 10px 20px -10px rgba(200, 130, 0, .7); color: #3A2400; transform: rotate(-2deg); }
.bx-tag .ic { width: 18px; height: 18px; }
.bx-tag small { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.bx-tag b { font-family: var(--f-display); font-size: 19px; font-weight: 800; }
/* the award seal: a gold rosette (BONUS / #1 / INCLUDED) with ribbon tails
   in the bonus colour, stamped on the outer top corner of the stage */
.bx-seal { position: absolute; left: 30px; top: 24px; z-index: 3; width: 142px; max-width: none; height: auto; overflow: visible; transform: rotate(-10deg); transform-origin: 50% 35%; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .45)) drop-shadow(0 0 18px rgba(255, 194, 61, .45)); transition: transform .45s cubic-bezier(.3, 1.5, .5, 1); }
.bx-flip .bx-seal { left: auto; right: 34px; transform: rotate(10deg); }
.bx-card:hover .bx-seal { transform: rotate(-4deg) scale(1.05); }
.bx-flip:hover .bx-seal { transform: rotate(4deg) scale(1.05); }
/* tails in the bonus's light colour with a white edge, so they read on its stage */
.bs-tail { fill: var(--a2); stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.bs-tail + .bs-tail { fill: color-mix(in srgb, var(--a2) 70%, var(--a)); }
.bs-core { fill: color-mix(in srgb, var(--a) 40%, #0A0F2C); }
.bx-body h3 { margin: 18px 0 0; color: #10142B; font-family: var(--f-display); font-size: clamp(30px, 2.8vw, 44px); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; }
.bx-mark { padding: 0 .04em; background: linear-gradient(transparent 62%, color-mix(in srgb, var(--a2) 38%, transparent) 62%, color-mix(in srgb, var(--a2) 38%, transparent) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.bx-lede { margin: 16px 0 0; color: #10142B; font-size: 19.5px; font-weight: 600; line-height: 1.5; }
.bx-lede-b { font-family: var(--f-display); font-size: 21px; font-weight: 800; letter-spacing: -.01em; line-height: 1.4; }
/* a detail still to be confirmed (the user's own notes): dashed amber chip */
.tbc { display: inline-block; padding: 2px 9px; border-radius: 7px; background: #FFF3C4; box-shadow: inset 0 0 0 1.5px #E2B94A; outline: 1.5px dashed #D4A93E; outline-offset: -1.5px; color: #6B4A00; font-family: var(--f-body); font-size: 14px; font-weight: 700; letter-spacing: 0; line-height: 1.5; vertical-align: 2px; }
.bx-body > .tbc { margin-top: 14px; }
.bx-checks { display: grid; gap: 4px; margin: 16px 0 0; padding: 0; list-style: none; }
.bx-checks li { display: flex; align-items: flex-start; gap: 12px; padding: 9px 0; color: #10142B; font-size: 17.5px; line-height: 1.45; }
.bx-ck { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(155deg, var(--a2), var(--a)); color: #fff; box-shadow: 0 6px 14px -8px var(--a); }
.bx-ck .ic { width: 14px; height: 14px; }
/* the training steps */
.bx-steps { display: grid; gap: 10px; width: 100%; margin-top: 18px; }
/* the two training steps as a short track: a dot per step on a line */
.bx-step { position: relative; margin: 0; padding: 4px 0 14px 36px; color: #3E4560; font-size: 16.5px; line-height: 1.55; }
.bx-step:not(.bx-up)::before { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(155deg, var(--a2), var(--a)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--a) 18%, transparent), 0 0 12px color-mix(in srgb, var(--a) 50%, transparent); }
.bx-step:first-child::after { content: ""; position: absolute; left: 7px; top: 27px; bottom: -6px; width: 2px; border-radius: 2px; background: linear-gradient(var(--a), var(--a2)); }
.bx-step b { color: color-mix(in srgb, var(--a) 85%, #000); }
/* the upgrade box stands apart: gold */
.bx-step.bx-up { margin-top: 8px; padding: 16px 18px 16px 62px; background: linear-gradient(160deg, #FFF8E2, #FFF1CC); box-shadow: inset 0 0 0 1.5px #EBC765; color: #4A3A12; clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); }
.bx-crown { position: absolute; left: 16px; top: 16px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(155deg, #FFE7A3, #E8AF35); box-shadow: 0 8px 14px -8px rgba(160, 110, 0, .7); color: #4A2E00; }
.bx-crown .ic { width: 17px; height: 17px; }
.bx-step.bx-up b { color: #7A5300; }
/* the closing line as a quote */
.bx-note { margin: 20px 0 0; padding-left: 16px; border-left: 3px solid color-mix(in srgb, var(--a) 60%, transparent); color: #4A5170; font-size: 16.5px; font-style: italic; line-height: 1.6; }
.bx-desc b { color: #10142B; }

@media (max-width: 1279px) {
    .s20-art { left: auto; right: -10px; top: -60px; width: 120px; }
}
@media (max-width: 1099px) {
    .bx-body { padding: 44px 40px; }
    .bx-seal { width: 110px; left: 24px; top: 20px; }
    .bx-flip .bx-seal { right: 24px; }
    .s20-art { top: -36px; width: 116px; }
    .bx-vis { min-height: 500px; }
}
@media (max-width: 899px) {
    .bx-card, .bx-flip { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
    .bx-flip .bx-vis { order: 0; }
    .bx-vis { min-height: 0; padding: 84px 30px 34px; }
    /* stacked: cut the visual's top corners and the copy's bottom ones */
    .bx-vis, .bx-flip .bx-vis { clip-path: polygon(var(--c1) 0, calc(100% - var(--c1)) 0, 100% var(--c1), 100% 100%, 0 100%, 0 var(--c1)); }
    .bx-body, .bx-flip .bx-body { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--c2)), calc(100% - var(--c2)) 100%, var(--c2) 100%, 0 calc(100% - var(--c2))); }
}
@media (max-width: 767px) {
    .sec-bonus { padding: 80px 0 110px; }
    .s20-sub { font-size: 17px; }
    .bx-list { gap: 26px; margin-top: 44px; }
    .bx-card { --qc: 26px; --qb: 14px; }
    .s20-art { display: none; }
    .bx-vis { gap: 22px; padding: 74px 16px 26px; }
    .bx-box { width: min(240px, 66%); }
    .bx-glow { width: 320px; height: 320px; margin: -160px 0 0 -160px; }
    .bx-floor { width: 260px; margin-left: -130px; bottom: 96px; }
    .bx-chips { gap: 8px; }
    .bx-chip { padding: 8px 12px 8px 8px; font-size: 13px; }
    .bx-chip .ic { width: 30px; height: 30px; padding: 7px; }
    .bx-body { padding: 30px 20px 32px; }
    .bx-seal { width: 86px; left: 14px; top: 14px; }
    .bx-flip .bx-seal { right: 14px; }
    .bx-lede { font-size: 17.5px; }
    .bx-lede-b { font-size: 18.5px; }
    .bx-checks li { font-size: 16px; }
    .bx-step, .bx-note { font-size: 15.5px; }
}


/* ==========================================================
   SECTION 22 — 30-DAY GUARANTEE (light ivory + gold)
   A light wave out of the dark offer stack. One certificate card with a
   double gold frame and corner ornaments: the big rosette seal with
   ribbon tails, the promise, and the deadline as a dark band.
   ========================================================== */
.sec-guar { position: relative; isolation: isolate; padding: 140px 0 150px; background: linear-gradient(180deg, #FBF7EC 0, #FBF7EC 80px, #FFFCF4 50%, #FAF6EA 100%); color: #3F3A2E; }
/* warm gold behind the seal, green behind the shield, a lime haze low down
   (the dot grid stays, via .bgx-l.no-stars) */
/* faded out over the last 170px too, so the bottom edge is plain ivory and
   matches the next seam's tabs (they are filled with this section's colour) */
.s22-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(transparent, #000 140px, #000 calc(100% - 300px), transparent calc(100% - 130px)); mask-image: linear-gradient(transparent, #000 140px, #000 calc(100% - 300px), transparent calc(100% - 130px)); background: radial-gradient(700px 520px at 22% 50%, rgba(255, 194, 61, .28), transparent 70%), radial-gradient(620px 480px at 88% 32%, rgba(60, 196, 106, .18), transparent 70%), radial-gradient(1100px 360px at 50% 84%, rgba(198, 246, 137, .26), transparent 70%); }
/* faint guilloche rings behind the card */
.s22-bg::before { content: ""; position: absolute; left: 50%; top: 52%; width: 1400px; height: 1400px; margin: -700px 0 0 -700px; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 26px, rgba(200, 150, 40, .08) 26px 27px); -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent); mask-image: radial-gradient(closest-side, #000 40%, transparent); }
.s22-wrap { position: relative; z-index: 1; max-width: 1180px; }
/* the 3D shield, stamped on the certificate's top-right corner */
.gq-shield { position: absolute; right: -34px; top: -62px; z-index: 3; width: 150px; height: auto; transform: rotate(10deg); filter: drop-shadow(0 18px 20px rgba(60, 40, 0, .35)); pointer-events: none; }
@media (max-width: 1279px) { .gq-shield { right: -10px; } }

.gq-card { position: relative; display: grid; grid-template-columns: 320px minmax(0, 1fr); align-items: center; gap: 0 56px; padding: 64px 70px 0 56px; border-radius: 34px; background: radial-gradient(500px 360px at 0 50%, rgba(255, 213, 120, .18), transparent 70%), #FFFEFA; box-shadow: 0 0 0 2px #E2C27A, 0 0 0 9px #FFFEFA, 0 0 0 10.5px rgba(205, 160, 60, .55), 0 60px 110px -50px rgba(120, 80, 10, .45); overflow: hidden; }
/* stitched inner line */
.gq-card::before { content: ""; position: absolute; inset: 14px; border-radius: 24px; border: 1.5px dashed rgba(205, 160, 60, .5); pointer-events: none; }
.gq-corner { position: absolute; width: 34px; height: 34px; border: 3px solid #D4A93E; pointer-events: none; }
.c-tl { left: 26px; top: 26px; border-right: 0; border-bottom: 0; border-radius: 12px 0 0 0; }
.c-tr { right: 26px; top: 26px; border-left: 0; border-bottom: 0; border-radius: 0 12px 0 0; }
.c-bl { left: 26px; bottom: 26px; border-right: 0; border-top: 0; border-radius: 0 0 0 12px; }
.c-br { right: 26px; bottom: 26px; border-left: 0; border-top: 0; border-radius: 0 0 12px 0; }
/* the seal with ribbon tails */
.gq-seal { position: relative; display: grid; justify-items: center; align-self: center; padding-bottom: 52px; }
.gq-seal-svg { position: relative; z-index: 2; width: 290px; height: 290px; transform: rotate(-8deg); filter: drop-shadow(0 22px 26px rgba(120, 70, 0, .35)) drop-shadow(0 0 30px rgba(255, 194, 61, .35)); }
.gq-rib { position: absolute; top: 210px; z-index: 1; width: 64px; height: 130px; background: linear-gradient(180deg, #F2C553, #C88A12); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .25); }
.gq-rib.r1 { left: calc(50% - 74px); transform: rotate(14deg); }
.gq-rib.r2 { left: calc(50% + 10px); transform: rotate(-14deg); background: linear-gradient(180deg, #E9B23A, #B57809); }
.gq-cap { position: relative; z-index: 2; margin-top: 14px; padding: 6px 15px; border-radius: 999px; background: #FFFDF5; box-shadow: inset 0 0 0 1.5px #D4A93E; color: #8A5A00; font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
/* the promise */
.gq-body { padding-bottom: 52px; }
.gq-title { margin: 0; color: #17130C; font-family: var(--f-display); font-size: clamp(36px, 4.2vw, 64px); font-weight: 800; line-height: 1.08; letter-spacing: -.04em; }
.gq-l { display: block; }
.gq-l + .gq-l { margin-top: .06em; }
.gq-title .mk { display: inline-block; margin-top: .08em; padding: 0 .14em .04em; transform: rotate(-1.2deg); border-radius: .14em; background: var(--lime); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.gq-p { margin: 24px 0 0; color: #4A4436; font-size: 19px; line-height: 1.7; }
.gq-p + .gq-p { margin-top: 18px; }
.gq-p b { color: #17130C; }
/* placeholder until the support email is confirmed */
.gq-tbc { padding: 2px 9px; border-radius: 7px; background: #FFF3C4; box-shadow: inset 0 0 0 1.5px #E2B94A; outline: 1.5px dashed #D4A93E; outline-offset: -1.5px; color: #6B4A00; font-weight: 700; white-space: nowrap; }
/* the deadline band along the bottom of the certificate */
.gq-risk { position: relative; z-index: 2; grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 -70px 0 -56px; padding: 22px 40px; background: radial-gradient(500px 90px at 50% 0, rgba(242, 86, 10, .22), transparent 70%), linear-gradient(90deg, #22140A, #3A200C 50%, #22140A); color: #FFF4D6; font-family: var(--f-display); font-size: clamp(18px, 1.7vw, 23px); font-weight: 700; letter-spacing: -.01em; text-align: left; }
.gq-risk-ic { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(155deg, #FFB37A, #F2560A); color: #fff; box-shadow: 0 0 0 5px rgba(242, 86, 10, .2); animation: gq-tick 2.4s ease-in-out infinite; }
.gq-risk-ic .ic { width: 22px; height: 22px; }
/* a lit orange top edge, and the date in an orange highlight */
.gq-risk::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, #FF8A3D 20%, #FFB37A 50%, #FF8A3D 80%, transparent); box-shadow: 0 0 14px rgba(255, 138, 61, .8); }
.gq-date { padding: 0 .3em .04em; border-radius: .25em; background: linear-gradient(155deg, #FF9A4D, #F2560A); color: #fff; white-space: nowrap; box-shadow: 0 6px 16px -8px rgba(242, 86, 10, .9); }
@keyframes gq-tick { 50% { box-shadow: 0 0 0 9px rgba(242, 86, 10, .08); } }
.gq-card .c-bl, .gq-card .c-br { display: none; }

@media (max-width: 1023px) {
    .gq-card { grid-template-columns: 1fr; justify-items: center; gap: 10px; padding: 56px 40px 0; text-align: center; }
    .gq-body { padding-bottom: 44px; }
    .gq-risk { margin: 0 -40px; }
    .gq-shield { right: -8px; top: -56px; width: 120px; }
}
@media (max-width: 767px) {
    .sec-guar { padding: 84px 0 110px; }
    .gq-card { padding: 44px 22px 0; border-radius: 26px; }
    .gq-card::before { inset: 9px; border-radius: 19px; }
    .gq-corner { width: 24px; height: 24px; }
    .c-tl { left: 16px; top: 16px; } .c-tr { right: 16px; top: 16px; }
    .gq-seal { padding-bottom: 40px; }
    .gq-seal-svg { width: 170px; height: 170px; }
    .gq-rib { top: 120px; width: 40px; height: 84px; }
    .gq-rib.r1 { left: calc(50% - 46px); }
    .gq-rib.r2 { left: calc(50% + 6px); }
    .gq-shield { right: -2px; top: -44px; width: 96px; }
    .gq-p { font-size: 17px; text-align: left; }
    .gq-tbc { white-space: normal; }
    .gq-risk { margin: 0 -22px; padding: 18px 20px; font-size: 17px; }
    .gq-risk-ic { width: 36px; height: 36px; }
}


/* ==========================================================
   SECTION 23 — QUESTIONS (light mint)
   A mint wave out of the ivory guarantee section. Numbered accordion
   cut-corner cards in two independent columns (native <details>); one
   column on phones. The question-bulb art sits under the shorter column.
   ========================================================== */
.sec-faq { position: relative; isolation: isolate; padding: 50px 0 150px; background: linear-gradient(180deg, #EDF8F1 0, #EDF8F1 80px, #F5FBF7 50%, #EFF8F2 100%); color: #33463B; }
/* soft light only (the dot grid stays, via .bgx-l.no-stars): lime behind
   the headline and the list centre, teal glows at the sides */
.s23-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(transparent, #000 140px); mask-image: linear-gradient(transparent, #000 140px); background: radial-gradient(800px 400px at 50% 6%, rgba(198, 246, 137, .32), transparent 70%), radial-gradient(900px 600px at 50% 55%, rgba(198, 246, 137, .2), transparent 70%), radial-gradient(620px 520px at 4% 50%, rgba(80, 200, 220, .13), transparent 70%), radial-gradient(620px 520px at 96% 60%, rgba(80, 200, 220, .13), transparent 70%); }
.s23-wrap { position: relative; z-index: 1; max-width: 1240px; }
.s23-head { text-align: center; }
.s23-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 7px 15px 7px 11px; border-radius: 999px; background: #0E1A14; color: #fff; font-size: 14px; font-weight: 800; letter-spacing: .14em; }
.s23-kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 3px rgba(214, 242, 60, .25); }
.s23-title .mk { padding: 0 .06em; background: linear-gradient(transparent 58%, rgba(198, 246, 137, .95) 58%, rgba(198, 246, 137, .95) 90%, transparent 90%); }
.s23-title { margin: 0; color: #0B1D12; font-family: var(--f-display); font-size: clamp(48px, 6.4vw, 100px); font-weight: 800; line-height: 1; letter-spacing: -.05em; }

/* two independent columns */
.fq-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; align-items: start; margin-top: 60px; }
.fq-col { display: grid; gap: 14px; }
/* each question is a light cut-corner card (::before edge, ::after fill) */
.fq { --qc: 18px; position: relative; isolation: isolate; filter: drop-shadow(0 16px 18px rgba(11, 29, 18, .08)); transition: transform .25s var(--ease), filter .25s; }
.fq::before, .fq::after { content: ""; position: absolute; clip-path: polygon(var(--qc) 0, 100% 0, 100% calc(100% - var(--qc)), calc(100% - var(--qc)) 100%, 0 100%, 0 var(--qc)); pointer-events: none; }
.fq::before { inset: 0; z-index: -2; background: linear-gradient(135deg, rgba(30, 154, 69, .35), rgba(11, 29, 18, .07) 40%, rgba(11, 29, 18, .07) 70%, rgba(94, 234, 212, .35)); }
.fq::after { inset: 1.5px; z-index: -1; background: #fff; }
.fq:not([open]):hover { transform: translateY(-3px); }
/* open: a lime lit edge and a soft lime header */
.fq[open] { filter: drop-shadow(0 0 18px rgba(198, 246, 137, .6)) drop-shadow(0 24px 24px rgba(30, 154, 69, .16)); }
.fq[open]::before { background: linear-gradient(135deg, #9BEA6A, var(--lime) 50%, #5EEAD4); }
.fq[open]::after { inset: 2px; background: linear-gradient(180deg, #F3FEE4, #fff 70px); }
.fq summary { display: grid; grid-template-columns: 40px minmax(0, 1fr) 34px; align-items: center; gap: 14px; padding: 20px 20px 20px 22px; list-style: none; cursor: pointer; }
.fq summary::-webkit-details-marker { display: none; }
.fq summary:focus-visible { outline: 3px solid var(--lime-2); outline-offset: 3px; border-radius: 22px; }
.fq-n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #E8F6EC; color: #1E9A45; font-family: var(--f-display); font-size: 16px; font-weight: 800; letter-spacing: -.01em; transition: background .25s, color .25s; }
.fq[open] .fq-n { background: linear-gradient(155deg, #3CC46A, #1E9A45); color: #fff; box-shadow: 0 8px 16px -8px rgba(30, 154, 69, .8); }
.fq-q { color: #0B1D12; font-family: var(--f-display); font-size: 19px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
/* the + that turns into × */
.fq-ic { position: relative; width: 34px; height: 34px; border-radius: 50%; background: #EEF5F0; transition: background .25s, transform .3s var(--ease); }
.fq-ic::before, .fq-ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.5px; margin: -1.25px 0 0 -7px; border-radius: 2px; background: #1E9A45; }
.fq-ic::after { transform: rotate(90deg); }
.fq[open] .fq-ic { background: var(--lime); transform: rotate(45deg); }
.fq[open] .fq-ic::before, .fq[open] .fq-ic::after { background: var(--ink); }
.fq summary:hover .fq-ic { background: color-mix(in srgb, var(--lime) 60%, #fff); box-shadow: 0 0 0 4px rgba(198, 246, 137, .4); }
.fq p { margin: 0 26px 24px 76px; padding-left: 16px; border-left: 3px solid var(--lime-2); color: #2A3B31; font-size: 17.5px; line-height: 1.65; }
.fq[open] p { animation: sx-in .3s var(--ease); }
/* the question-bulb art fills the space under question 13 */
.fq-art { justify-self: center; width: 190px; height: auto; margin-top: 8px; filter: drop-shadow(0 20px 22px rgba(11, 29, 18, .22)); animation: say-float 5s ease-in-out infinite alternate; pointer-events: none; }

@media (max-width: 899px) {
    .fq-cols { grid-template-columns: 1fr; max-width: 680px; margin-left: auto; margin-right: auto; }
    .fq-art { width: 140px; margin-top: 18px; }
}
@media (max-width: 767px) {
    .sec-faq { padding: 34px 0 110px; }
    .fq-cols { margin-top: 40px; }
    .fq { --qc: 14px; }
    .fq summary { grid-template-columns: 30px minmax(0, 1fr) 30px; gap: 10px; padding: 16px 14px 16px 16px; }
    .fq-n { width: 32px; height: 32px; border-radius: 10px; font-size: 14px; }
    .fq-q { font-size: 16.5px; }
    .fq-ic { width: 30px; height: 30px; }
    .fq p { margin: 0 16px 20px 56px; padding-left: 12px; font-size: 16px; }
}


/* ==========================================================
   SECTION 24 — THE CLOSE (light lime sunrise)
   A lime wave out of the mint FAQ. Three stacked "One" lines with tiles
   in the section 6 beat colours, soft light rays behind, the full offer
   box, and the P.S. as a pinned paper note.
   ========================================================== */
.sec-final { position: relative; isolation: isolate; margin-top: -80px; padding: 140px 0 170px; border-radius: 50% 50% 0 0 / 80px 80px 0 0; background: linear-gradient(180deg, #F3FAE3 0, #F3FAE3 80px, #FAFDF2 45%, #FFFFFF 100%); color: #33463B; overflow-x: clip; }
.sec-final::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%; border-radius: inherit; box-shadow: 0 -2px 0 rgba(158, 214, 74, .95), 0 -40px 70px -30px rgba(198, 246, 137, .75); pointer-events: none; }
.s24-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; -webkit-mask-image: linear-gradient(transparent, #000 120px); mask-image: linear-gradient(transparent, #000 120px); background: radial-gradient(900px 560px at 50% 18%, rgba(198, 246, 137, .6), transparent 70%), radial-gradient(620px 480px at 4% 56%, rgba(94, 234, 212, .2), transparent 70%), radial-gradient(620px 480px at 96% 56%, rgba(255, 190, 80, .2), transparent 70%); }
/* soft rays fanning down from above the headline (static) */
.fn-ray { position: absolute; left: 50%; top: -120px; width: 260px; height: 1100px; margin-left: -130px; transform-origin: 50% 0; background: linear-gradient(180deg, var(--c), transparent 78%); opacity: 1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent); mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent); }
/* a real local main street low in the section, two map pins on the shops
   either side of the offer box (pins hidden on phones) */
.fn-street { position: absolute; left: 50%; bottom: 0; z-index: -1; width: max(100%, 1700px); aspect-ratio: 1800 / 1040; transform: translateX(-50%); }
.fn-street::before { content: ""; position: absolute; inset: 0; background: url(../images/bg-final-main-street.webp) center / cover; opacity: .5; -webkit-mask-image: linear-gradient(transparent 6%, #000 42%, #000 84%, transparent); mask-image: linear-gradient(transparent 6%, #000 42%, #000 84%, transparent); }
.fn-mpin { --s: 1.3; animation: fn-bob 3.6s ease-in-out var(--d, 0s) infinite alternate; }
@media (max-width: 1199px) { .fn-mpin { display: none; } }
@keyframes fn-bob { to { translate: 0 -8px; } }
.fn-ray.r1 { --c: rgba(111, 184, 255, .42); transform: rotate(30deg); }
.fn-ray.r2 { --c: rgba(170, 230, 90, .5); transform: rotate(0deg); width: 340px; margin-left: -170px; }
.fn-ray.r3 { --c: rgba(255, 180, 70, .42); transform: rotate(-30deg); }
.s24-wrap { position: relative; z-index: 1; max-width: 1120px; text-align: center; }

/* the three lines as a checklist: left-aligned in a centred block, the tiles
   stacked in one column and joined by a dashed line */
/* the three beats as a flow: cut-corner cards in the beat colours (blue,
   amber, lime), each with a tiny code-built picture, joined by lime arrows;
   the payoff card is wider and glows */
.fn-title { display: grid; grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr) 60px minmax(0, 1.28fr); align-items: stretch; max-width: 1120px; margin: 0 auto; color: #0B1D12; font-family: var(--f-display); font-size: clamp(26px, 2.3vw, 38px); font-weight: 800; line-height: 1.1; letter-spacing: -.04em; }
.fn-step { --c: 47, 124, 246; --qc: 20px; position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 16px 24px; filter: drop-shadow(0 22px 22px rgba(11, 29, 18, .12)); transition: transform .3s var(--ease); }
.fn-step:hover { transform: translateY(-4px); }
.fn-step::before, .fn-step::after { content: ""; position: absolute; clip-path: polygon(var(--qc) 0, 100% 0, 100% calc(100% - var(--qc)), calc(100% - var(--qc)) 100%, 0 100%, 0 var(--qc)); pointer-events: none; }
.fn-step::before { inset: 0; z-index: -2; background: linear-gradient(135deg, rgba(var(--c), .95), rgba(var(--c), .22) 38%, rgba(var(--c), .14) 70%, rgba(var(--c), .7)); }
.fn-step::after { inset: 2px; z-index: -1; background: #fff; }
.fn-step.s2 { --c: 240, 162, 26; }
.fn-step.s3 { --c: 124, 193, 58; filter: drop-shadow(0 0 26px rgba(198, 246, 137, .75)) drop-shadow(0 22px 22px rgba(11, 29, 18, .12)); }
.fn-vis { display: block; width: 100%; max-width: 260px; }
.fn-vis svg { display: block; width: 100%; height: auto; }
.fn-t { display: block; text-align: center; white-space: nowrap; }
.fn-arrow { position: relative; display: grid; place-items: center; }
.fn-arrow::before { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; border-top: 2px dashed rgba(30, 154, 69, .5); }
.fn-arrow b { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(155deg, #F2FF9C, var(--acid)); box-shadow: 0 0 0 5px rgba(198, 246, 137, .3), 0 10px 18px -8px rgba(110, 170, 30, .8); color: var(--ink); }
.fn-arrow .ic { width: 18px; height: 18px; }
.fn-title .mk { padding: 0 .08em; background: linear-gradient(transparent 56%, rgba(198, 246, 137, .95) 56%, rgba(198, 246, 137, .95) 90%, transparent 90%); }
.fn-sub { text-wrap: balance; margin: 34px auto 0; color: #33463B; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.5; }
.fn-box { margin-top: 70px; text-align: left; }
/* the finale: the last offer box stands on a lit stage (a halo behind it, a
   soft grid floor under it) with a slow pulsing lime ring */
.fn-halo, .fn-floor { position: absolute; z-index: -1; pointer-events: none; }
.fn-halo { left: 50%; top: 50%; width: 1500px; height: 720px; margin: -360px 0 0 -750px; background: radial-gradient(closest-side, rgba(198, 246, 137, .75), rgba(198, 246, 137, .25) 55%, transparent); }
.fn-floor { left: 50%; bottom: -46px; width: 2000px; height: 480px; margin-left: -1000px; background: linear-gradient(rgba(40, 140, 60, .34) 1.5px, transparent 1.5px) 0 0 / 100% 40px, linear-gradient(90deg, rgba(40, 140, 60, .34) 1.5px, transparent 1.5px) 50% 0 / 76px 100%; transform: perspective(520px) rotateX(62deg); transform-origin: 50% 100%; -webkit-mask-image: linear-gradient(transparent, #000 60%, #000 88%, transparent), linear-gradient(90deg, transparent 6%, #000 26%, #000 74%, transparent 94%); -webkit-mask-composite: source-in; mask-image: linear-gradient(transparent, #000 60%, #000 88%, transparent), linear-gradient(90deg, transparent 6%, #000 26%, #000 74%, transparent 94%); mask-composite: intersect; }
.fn-ring { position: absolute; inset: -1.5px; border-radius: inherit; box-shadow: 0 0 0 14px rgba(170, 230, 90, .3); opacity: 0; pointer-events: none; animation: fn-ring 2.8s ease-out infinite; }
@keyframes fn-ring { 0% { opacity: .9; transform: scale(.99); } 100% { opacity: 0; transform: scale(1.025); } }

/* the P.S. as a pinned note */
.fn-ps { position: relative; max-width: 860px; margin: 80px auto 0; padding: 40px 44px 32px; border-radius: 6px 22px 22px 22px; background: linear-gradient(170deg, #FFFDF4, #FFF8DF); box-shadow: 0 0 0 1px rgba(170, 130, 30, .14), 0 30px 50px -30px rgba(90, 70, 10, .45); text-align: left; transform: rotate(-1deg); }
.fn-pin { position: absolute; left: 50%; top: -14px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FF9A8F, #E5534B 60%, #B3332B); box-shadow: 0 6px 10px -4px rgba(0, 0, 0, .5), inset 0 -2px 3px rgba(0, 0, 0, .2); }
.fn-ps p { margin: 0; color: #3F3A2E; font-size: 19px; line-height: 1.7; }
/* the P.S. badge is stamped on the note's top-left corner, out of the text */
.fn-psb { position: absolute; left: -20px; top: -24px; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #0B1D12; box-shadow: 0 0 0 4px #FFFDF4, 0 10px 18px -8px rgba(0, 0, 0, .5); color: var(--lime); font-family: var(--f-display); font-size: 19px; font-weight: 800; transform: rotate(-10deg); }
.fn-go { display: inline-flex; align-items: center; gap: 6px; color: #1E7A2E; font-weight: 800; text-decoration: underline; text-decoration-color: rgba(30, 154, 69, .4); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: gap .2s var(--ease), color .2s; }
.fn-go .ic { width: 18px; height: 18px; }
.fn-go:hover { gap: 10px; color: #0B1D12; }

@media (max-width: 899px) {
    .fn-box { margin-top: 130px; }
    /* stacked: picture left, words right, arrows pointing down */
    .fn-title { grid-template-columns: 1fr; max-width: 480px; }
    .fn-step { flex-direction: row; justify-content: flex-start; gap: 16px; padding: 12px 18px 12px 12px; }
    .fn-vis { flex: none; width: 118px; }
    .fn-t { text-align: left; white-space: normal; }
    .fn-arrow { height: 40px; }
    .fn-arrow::before { left: 50%; right: auto; top: -6px; bottom: -6px; border-top: 0; border-left: 2px dashed rgba(30, 154, 69, .5); }
    .fn-arrow b { width: 32px; height: 32px; transform: rotate(90deg); }
    .fn-arrow .ic { width: 15px; height: 15px; }
}

/* ==========================================================
   OFFER BOX VARIANTS
   ========================================================== */
/* dark box for the light sections (7, 16, 24): the white box sank into the page */
.s7-cta.cta-dark { background: radial-gradient(520px 320px at 14% 50%, rgba(198, 246, 137, .22), transparent 70%) padding-box, radial-gradient(420px 220px at 80% 0, rgba(94, 234, 212, .1), transparent 70%) padding-box, linear-gradient(160deg, #15402A, #0B1D12 58%, #07130D) padding-box, linear-gradient(135deg, #D6F23C, #5EEAD4 38%, rgba(255, 255, 255, .12) 64%, #FFC25C) border-box; box-shadow: 0 0 0 8px rgba(198, 246, 137, .2), 0 0 90px -24px rgba(198, 246, 137, .55), 0 60px 100px -50px rgba(11, 29, 18, .75); color: #C9DACD; }
.cta-dark .s7c-price { color: #C9DACD; }
.cta-dark .s7c-price b { color: #fff; text-shadow: 0 0 40px rgba(214, 242, 60, .3); }
.cta-dark .s7c-price .bp-rest { border-left-color: rgba(255, 255, 255, .16); color: var(--acid); }
.cta-dark .s7c-trust { border-top-color: rgba(214, 242, 60, .22); }
.cta-dark .s7c-trust .guar-txt b { color: #fff; }
.cta-dark .s7c-trust .secure { color: #9DB5A4; }
.cta-dark .s7c-trust .secure .ic { color: var(--acid); }
.cta-dark .s7c-box img { filter: drop-shadow(0 26px 22px rgba(0, 0, 0, .6)) drop-shadow(0 0 30px rgba(198, 246, 137, .25)); }
.s7-cta.cta-dark .cta-note { color: #EE7A10; }
/* the "Included · 3-day training" chip hangs from the top edge as a straight
   ribbon on every offer box, as on the hero box (stickers again below 900) */
@media (min-width: 900px) {
    .s7-cta .s7c-chip { top: -12px; right: 30px; padding: 14px 18px 14px 12px; border-radius: 0 0 16px 16px; transform: none; box-shadow: 0 18px 30px -16px rgba(120, 70, 0, .6), inset 0 -3px 0 rgba(120, 70, 0, .18), inset 0 12px 0 -1px rgba(120, 70, 0, .14); }
    .s7-cta .s7c-chip::before, .s7-cta .s7c-chip::after { content: ""; position: absolute; top: 0; width: 12px; height: 12px; background: #9C640A; }
    .s7-cta .s7c-chip::before { left: -12px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
    .s7-cta .s7c-chip::after { right: -12px; clip-path: polygon(0 0, 100% 100%, 0 100%); }
}
@media (max-width: 767px) {
    .sec-final { margin-top: -40px; padding: 84px 0 100px; border-radius: 50% 50% 0 0 / 40px 40px 0 0; }
    .fn-title { font-size: 25px; }
    .fn-box { margin-top: 124px; }
    .fn-ps { margin-top: 64px; padding: 36px 20px 24px; transform: none; }
    .fn-psb { left: -6px; top: -22px; }
    .fn-ps p { font-size: 16.5px; }
    .fn-psb { width: 50px; height: 50px; font-size: 16px; }
    .fn-floor { width: 1100px; margin-left: -550px; bottom: -36px; }
}


/* ==========================================================
   FOOTER (dark night emerald)
   A dark wave out of the light close. Logo + tagline, the two notes
   (illustrations, standard disclaimer), support + legal links,
   copyright, and a big faint outlined wordmark along the bottom.
   ========================================================== */
.pf-foot { position: relative; isolation: isolate; padding: 40px 0 0; background: linear-gradient(180deg, #04170F 0, #04170F 80px, #061C13 50%, #03110B 100%); color: #A9BCB0; }
.pf-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(transparent, #000 140px); mask-image: linear-gradient(transparent, #000 140px); background: radial-gradient(800px 360px at 50% 120px, rgba(198, 246, 137, .1), transparent 70%), radial-gradient(700px 400px at 50% 100%, rgba(30, 154, 69, .22), transparent 70%); }
.pf-wrap { position: relative; z-index: 1; max-width: 1080px; text-align: center; }
.pf-brand { display: grid; justify-items: center; gap: 14px; }
.pf-brand img { width: 240px; height: auto; }
.pf-tag { color: var(--lime); font-size: 13px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.pf-legal { display: grid; gap: 16px; max-width: 980px; margin: 40px auto 0; padding: 28px 32px; border-radius: 22px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); text-align: left; }
.pf-legal p { margin: 0; font-size: 13.5px; line-height: 1.7; }
.pf-note { color: #C2D3C7; }
.pf-disc { padding-top: 16px; border-top: 1px dashed rgba(255, 255, 255, .1); color: #93A99A; }
.pf-disc b { color: #E4EEE7; }
.pf-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 6px; margin-top: 30px; }
.pf-links a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; color: #D6E4DA; font-size: 14.5px; font-weight: 600; text-decoration: none; transition: background .2s, color .2s; }
.pf-links a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.pf-links a + a::before { content: ""; width: 4px; height: 4px; margin: 0 6px 0 -14px; border-radius: 50%; background: rgba(198, 246, 137, .45); }
.pf-links .pf-sup { background: rgba(198, 246, 137, .12); box-shadow: inset 0 0 0 1px rgba(198, 246, 137, .35); color: var(--lime); }
.pf-sup i { width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .25); }
.pf-copy { margin: 22px 0 0; color: #7D9585; font-size: 13.5px; }
/* the big faint wordmark, cut by the bottom edge */
.pf-word { position: relative; display: block; margin-top: 30px; color: transparent; font-family: var(--f-display); font-size: clamp(90px, 17vw, 300px); font-weight: 800; line-height: .78; letter-spacing: -.06em; text-align: center; white-space: nowrap; -webkit-text-stroke: 1.5px rgba(198, 246, 137, .14); background: linear-gradient(180deg, rgba(198, 246, 137, .12), transparent 75%); -webkit-background-clip: text; background-clip: text; pointer-events: none; user-select: none; height: .62em; overflow: hidden; }
@media (max-width: 767px) {
    .pf-brand img { width: 190px; }
    .pf-legal { margin-top: 30px; padding: 20px 18px; border-radius: 18px; }
    .pf-legal p { font-size: 12.5px; }
    .pf-links a { padding: 7px 10px; font-size: 13.5px; }
    .pf-links a + a::before { display: none; }
    .pf-word { font-size: 20.5vw; }
}


/* bigger view of a screen */
.sa-box { width: min(1120px, 94vw); max-width: none; padding: 0; border: 0; border-radius: 16px; background: #0E1511; box-shadow: 0 40px 100px -20px #000; overflow: visible; }
.sa-box::backdrop { background: rgba(3, 17, 11, .82); }
.sa-box img { display: block; width: 100%; height: auto; border-radius: 16px; }
.sa-x { position: absolute; right: -14px; top: -14px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--acid); color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .6); }


/* ==========================================================
   STICKY BUY BAR
   ========================================================== */
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; padding: 0 16px 14px; pointer-events: none; transform: translateY(130%); transition: transform .4s var(--ease); }
.buybar.on { transform: none; }
.bbar-in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; max-width: 980px; margin: 0 auto; padding: 10px 10px 10px 24px; border-radius: 999px; background: linear-gradient(180deg, #0B2A1D, var(--night)); box-shadow: inset 0 0 0 1px rgba(214, 242, 60, .35), 0 24px 50px -16px rgba(0, 0, 0, .7), 0 0 40px -14px rgba(214, 242, 60, .35); pointer-events: auto; }
.bbar-in .btn-sm { justify-self: end; }
/* room under the footer so the bar never covers its last lines */
.pf-foot { padding-bottom: 92px; }
/* 30-minute countdown, hours shown as 00 (JS) */
.bbar-timer { display: flex; align-items: center; gap: 6px; }
.bbar-timer > .ic { width: 22px; height: 22px; margin-right: 6px; color: #FF9A26; filter: drop-shadow(0 0 8px rgba(255, 138, 38, .55)); }
.bt-u { display: grid; justify-items: center; min-width: 46px; padding: 5px 6px 4px; border-radius: 10px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(214, 242, 60, .22); line-height: 1; }
.bt-u b { font-family: var(--f-display); font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: #fff; }
.bt-u small { margin-top: 3px; color: var(--muted); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.bbar-timer > i { color: var(--acid); font-family: var(--f-display); font-size: 20px; font-style: normal; font-weight: 800; line-height: 1; margin-top: -12px; }
.bbar-timer.is-low .bt-u b { color: #FFB13D; }
.bbar-txt { line-height: 1.25; }
.bbar-txt b { display: block; font-family: var(--f-display); font-size: 18px; font-weight: 800; color: #fff; }
.bbar-txt span { font-size: 14px; color: var(--muted); }


/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (min-width: 900px) {
    .hero-h1 > span { white-space: nowrap; }
}

/* props at the viewport edges (JV) */
@media (min-width: 1200px) {
    .props-l, .props-r { display: block; position: absolute; z-index: 4; top: 0; width: 290px; height: 760px; transform: translateY(var(--py, -40px)) scale(var(--ps, .85)); }
    .props-l { left: 26px; transform-origin: left top; }
    .props-r { right: 26px; transform-origin: right top; }
    /* kept quiet: background texture, not content */
    .floor-pins { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .22; filter: saturate(.6); }
    .cta-note { display: flex; position: absolute; left: calc(100% + 10px); top: 54%; align-items: flex-end; gap: 6px; color: #FFA23A; font: 700 30px/1 var(--f-hand); white-space: nowrap; transform: rotate(-5deg); transform-origin: left top; pointer-events: none; filter: drop-shadow(0 0 12px rgba(255, 138, 38, .45)); }
    .cta-note .hand { flex: none; width: 64px; height: 54px; margin-bottom: 9px; }
}
/* wide screens: a slightly bigger video; the browser wing slides out by what
   the video gained so the gap between them stays as it was */
@media (min-width: 1600px) {
    .stage { max-width: min(920px, calc(100vw - 680px)); }
    /* the browser starts below the headline box's corner; the phone sits lower,
       clear of the 3D pin, its top level with the video's */
    .props-r { --py: 12px; }
    .props-l { --py: 90px; }
    .wing-r { right: calc(-46px - max(0px, 890px - 50vw)); }
}
@media (min-width: 1200px) and (max-width: 1439px) {
    .props-l, .props-r { --ps: .76; --py: 34px; }
    .p-art { --pa-t: 62px; --pa-w: 168px; }
    .props-l { --py: calc(72px + (100vw - 1280px) * .14); }
    .plans { max-width: 1180px; gap: 24px; }
    .plan-best { margin-top: -18px; }
    .s2-grid { gap: 64px; }
    .perks { max-width: 800px; }
    .stage { max-width: calc(100vw - 560px); }
}
@media (min-width: 1200px) and (max-width: 1379px) {
    .cta-note { display: none; }
}
/* below 1280 the steps drop under the headline box, so the video (and the phone) sit lower */
@media (min-width: 1200px) and (max-width: 1279px) {
    .props-l { --py: calc(94px + (100vw - 1200px) * .14); }
}
/* 1440–1599: the headline box reaches over the phone's column, so the props
   stay below it */
@media (min-width: 1440px) and (max-width: 1599px) {
    .props-l, .props-r { --ps: .8; --py: calc(20px + (100vw - 1440px) * .2); }
    .p-art { --pa-t: 74px; --pa-w: 185px; }
    .props-l { --py: calc(80px + (100vw - 1440px) * .15); }
}
/* 1600–1679: the box is still wide, so a smaller phone keeps clear of it */
@media (min-width: 1600px) and (max-width: 1679px) {
    .props-l, .props-r { --ps: .74; }
    .props-r { --py: 24px; }
    .p-art { --pa-t: 74px; --pa-w: 170px; }
    .props-l { --py: 129px; }
}

/* 1100–1199: the scan reaches the wrap edge, keep its props on screen */
/* one column below 1200: a 2-up grid would orphan the third tier (LME rule) */
@media (max-width: 1199px) {
    .plans { grid-template-columns: minmax(0, 1fr); gap: 150px; max-width: 520px; margin-top: 150px; }
    .plan-best { margin-top: 0; }
    /* the final offer leads with the most complete plan on phones */
    .sec-price2 .plan-best { order: -1; }
    .pr-floor { bottom: 40px; width: 1200px; margin-left: -600px; }
}
@media (min-width: 1100px) and (max-width: 1199px) {
}
@media (max-width: 1099px) {
    .idea-steps { grid-template-columns: minmax(0, 1fr); max-width: 560px; gap: 26px; }
    .is-go, .is-card:has(.is-go)::after { display: none; }
    .is-card:nth-child(3) { transform: none; }
    .q-strong > .ic { rotate: 90deg; }
    .quiet { grid-template-columns: minmax(0, 1fr); gap: 56px; max-width: 680px; margin-top: 64px; padding: 64px 40px 52px; }
    .qz-fill::after { -webkit-mask-image: linear-gradient(transparent 50%, #000 70%); mask-image: linear-gradient(transparent 50%, #000 70%); }
    .qz-floor { right: 0; width: 100%; }
    .idea-band { margin-top: 56px; }
    /* stacked: claim, scan, colours, note */
    .s2-grid { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 640px; }
    .s2-copy { display: contents; }
    .s2-title, .s2-sub { text-align: center; }
    .s2-sub { margin-left: auto; margin-right: auto; }
    .scan-map { order: 3; width: 100%; max-width: 540px; margin: 64px auto 0; }
    .s2-bar { order: 4; width: 100%; max-width: none; margin: 34px auto 0; }
    .tiers { order: 4; width: 100%; margin: 14px auto 0; }
    .s2-note { order: 5; margin: 18px auto 0; }
    .nav-links a { margin-left: 26px; }
    .nav-links a + a::before { left: -13px; }
}
@media (max-width: 991px) {
    .nav-links .nl-bonuses { display: none; }
    .perks { grid-template-columns: 1fr; max-width: 560px; gap: 12px; }
    .floor-wrap { top: 640px; }
}

@media (max-width: 767px) {
    .wrap { padding: 0 16px; }
    .nav { padding-top: 12px; }
    .nav-in { gap: 12px; padding: 0 16px; }
    .nav-logo img { height: 24px; }
    .nav-links a { margin-left: 14px; font-size: 12.5px; gap: 6px; }
    .nav-links a + a::before { display: none; }
    .nav-links .nl-demo, .nav-links .nl-faq { display: none; }

    .hero { padding-bottom: 100px; }
    .sec-scan { margin-top: -44px; padding: 80px 0 64px; border-radius: 50% 50% 0 0 / 44px 44px 0 0; }
    .s2-down { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
    .s2-down .ic { width: 21px; height: 21px; }
    .s2-title { font-size: 40px; }
    .s2-sub { font-size: 16.5px; }
    .scan-map { margin-top: 48px; }
    .tiers { gap: 10px; }
    .s2-note { font-size: 15px; }
    .sm-wrap::before { inset: -10px; border-radius: 30px; }
    .s2-card { padding: 46px 12px 34px; border-radius: 22px; }
    .sm-note { right: 10px; bottom: 8px; font-size: 11px; }
    .sm-grid { gap: 10px; }
    .sd-pin { right: -8px; top: -8px; width: 22px; height: 22px; }
    .sd-pin .ic { width: 13px; height: 13px; }
    .tier[data-t="r"] .t-ball { width: 34px; height: 34px; }
    .tier[data-t="r"] .t-txt b { font-size: 28px; }
    .s2-note { gap: 12px; padding: 10px 14px 10px 10px; }
    .s2-vs { padding: 5px 7px; gap: 4px; }
    .vs-doc, .vs-pic { width: 32px; height: 32px; border-radius: 10px; }
    .vs-doc .ic, .vs-pic .ic { width: 17px; height: 17px; }
    .vs-arr { width: 13px; height: 13px; }
    .sd { font-size: 12px; }
    /* fixed two-line box so the cards below don't jump while the tip changes */
    .sa-x { right: 6px; top: -50px; }
    .sec-app { padding: 44px 0 80px; }
    .sec-price { padding: 50px 0 90px; }
    .sec-idea { padding: 46px 0 124px; }
    .s5-sub { font-size: 16.5px; }
    .s5-title .mk { white-space: normal; }
    .is-card { padding: 12px 12px 26px; border-radius: 24px; }
    .iv { height: 200px; }
    .is-n { top: 188px; }
    .is-n { left: 26px; top: 170px; width: 44px; height: 44px; font-size: 19px; }
    .is-card h3 { margin: 36px 12px 0; font-size: 23px; }
    .is-card p { margin: 8px 12px 0; font-size: 16px; }
    .ivs-bar { font-size: 16px; }
    .quiet { --qc: 26px; --qb: 18px; --qt: 90px; --qd: 12px; padding: 44px 16px 34px; }
    .qz-hud { --cut: 26px; }
    .qz-hud .seam-l { right: calc(50% + 100px); top: 18px; }
    .qz-hud .seam-r { left: calc(50% + 100px); top: 18px; }
    .qz-hud-b { --cut: 18px; }
    .qz-hud-b .seam-l, .qz-hud-b .seam-r { top: 10px; }
    .q-row { gap: 12px; padding: 14px; }
    .q-ic { width: 38px; height: 38px; }
    .q-row p { font-size: 16.5px; }
    .q-row q { font-size: 18px; }
    .q-punch { font-size: 21px; }
    .q-copy .q-strong { font-size: 19px; }
    .qp-list .r { margin-right: -22px; }
    .qp, .q-fig .qp { width: 330px; margin: 0 auto; }
    .q-fig::before { left: 26px; right: 26px; width: auto; }
    .q-fig .q-tag { margin: 26px auto 0; transform: none; }
    .q-who, .q-point { display: none; }
    .qp-list b { font-size: 15px; }
    .idea-band { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 0 auto; }
    .ib-a, .ib-b { flex-direction: column; text-align: center; gap: 16px; font-size: 22px; }
    .ib-a { padding: 28px 22px 52px; clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%, 0 22px); }
    .ib-b { padding: 52px 22px 28px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px)); }
    .ib-go { justify-self: center; margin: 0; rotate: 90deg; }
    .seam { --cut: 26px; }
    .seam-tab { width: 180px; height: 12px; margin-left: -90px; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 12px 100%); }
    .seam-l { right: calc(50% + 100px); top: 8px; }
    .seam-r { left: calc(50% + 100px); top: 8px; }
    .seam-chev { top: -46px; width: 26px; height: 30px; margin-left: -13px; }
    .pr-lede { font-size: 16.5px; }
    .plans { gap: 124px; margin-top: 124px; }
    .plan { padding: 18px 18px 24px; border-radius: 24px; }
    .plan-best { padding-top: 26px; }
    .pl-top, .plan-best .pl-top { height: 130px; }
    .pl-box, .plan-best .pl-box { width: 170px; margin-top: -110px; }
    .pl-ped, .plan-best .pl-ped { width: 180px; height: 180px; margin-left: -90px; }
    .pr-tbar { gap: 12px; padding: 14px 16px; border-radius: 22px; }
    .pr-trust { flex-direction: column; align-items: flex-start; gap: 10px; }
    .pr-trust li + li { padding-left: 0; border-left: 0; }
    .plan > .pl-ribbon { top: 106px; gap: 9px; padding: 7px 20px 7px 7px; border-radius: 13px; font-size: 15px; }
    .plan > .pl-ribbon .ic { width: 30px; height: 30px; padding: 7px; border-radius: 9px; }
    .plan-best { margin-top: 0; }
    .pl-name { font-size: 30px; }
    .pl-now { font-size: 56px; }
    .pl-list li { font-size: 14.5px; }
    .jv-wrap { margin-top: 20px; }
    .jv-wrap::after { inset: -3px; border-width: 1.5px; }
    .pr-trust li { font-size: 14px; }
    .s3-sub { font-size: 16px; }
    .sm-tip { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 62px; margin-top: 24px; padding: 9px 16px; border-radius: 18px; font-size: 14px; }
    .tier { gap: 10px; padding: 12px; border-radius: 16px; }
    .t-ball { width: 30px; height: 30px; }
    .t-txt b { font-size: 24px; }
    .t-txt b small { font-size: 13px; }
    .t-txt strong { font-size: 14px; }
    .t-txt em { display: none; }
    .hero-grain { height: 760px; }
    .ghost-mark { display: none; }
    .floor-wrap { top: 520px; }
    .map-floor { opacity: .14; }
    .hero-copy { padding-top: 20px; }
    .eyebrow { gap: 9px; padding: 4px 13px 4px 4px; font-size: 13px; }
    .eb-new { padding: 5px 10px; font-size: 12px; }
    /* phones: the desktop idea, compact. The headline sits in the lit frame
       (scanner corners, the pill on its top edge) and the three steps dock on
       its bottom edge as one card of three columns joined by arrows */
    .h-box { width: 100%; margin-top: 18px; padding: 36px 12px 64px; border-radius: 24px; }
    .h-box .eyebrow { top: 0; transform: translate(-50%, -50%); }
    .hb-c { width: 18px; height: 18px; border-width: 2.5px; }
    .hb-c.c1 { top: 10px; left: 10px; border-radius: 7px 0 0 0; }
    .hb-c.c2 { top: 10px; right: 10px; border-radius: 0 7px 0 0; }
    .hb-c.c3, .hb-c.c4 { display: none; }
    /* sized so the longest line ("Get Paid To Fix It." ≈ 7.5em) fills the frame:
       (100vw - page gutters 32px - frame padding 24px) / 7.6 */
    .hero-h1 { font-size: min(calc((100vw - 56px) / 7.6), 56px); line-height: 1.04; text-wrap: balance; }
    .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 12px; width: calc(100% - 24px); margin: -44px auto 0; padding: 12px 8px 13px; border-radius: 20px; font-size: 13px; font-weight: 700; line-height: 1.25; letter-spacing: 0; text-align: center; white-space: normal; }
    .steps li { flex-direction: column; justify-content: flex-start; gap: 8px; min-width: 0; }
    .steps li + li::before { position: absolute; left: -12px; top: 9px; width: 12px; height: 14px; margin: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D6F23C' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / 12px 12px no-repeat; }
    .st-ic { width: 32px; height: 32px; border-radius: 10px; }

    .stage { margin-top: 34px; padding: 0 22px; }
    .stage::after { left: -40px; right: -40px; }
    .vsl-frame { padding: 5px; border-radius: 18px; }
    .vsl-frame::before { inset: -8px; border-radius: 24px; }
    .vsl-player { border-radius: 13px; }

    .bp-from { font-size: 16px; }
    .bp-rest { padding-left: 12px; font-size: 13px; text-align: left; }
    .btn-cta { height: 70px; padding: 0 8px 0 24px; gap: 10px; font-size: min(25px, 6.4vw); }
    .cta-arrow { width: 52px; height: 52px; }
    .perks { margin-top: 30px; font-size: 15.5px; }
    .pk-ic { width: 40px; height: 40px; }
    .pk-ic .ic { width: 20px; height: 20px; }
    .pay svg { width: 40px; }

    .buybar { padding: 0 8px 8px; }
    .pf-foot { padding-bottom: 78px; }
    .bbar-in { grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 8px 8px 8px 14px; }
    .bbar-txt { display: none; }
    .bbar-timer { gap: 3px; }
    .bbar-timer > .ic { display: none; }
    .bt-u { min-width: 34px; padding: 4px 4px 3px; border-radius: 8px; }
    .bt-u b { font-size: 16px; }
    .bt-u small { font-size: 8px; letter-spacing: .08em; }
    .bbar-timer > i { font-size: 15px; margin-top: -9px; }
    .bbar-txt b { font-size: 16px; white-space: nowrap; }
    .bbar-txt span { font-size: 12.5px; }
    .bb-x { display: none; }
}
@media (max-width: 374px) {
    .btn-sm { padding: 0 14px; font-size: 14px; }
    .eyebrow { gap: 7px; padding-right: 10px; font-size: 11.5px; }
    .eb-new { padding: 4px 8px; font-size: 11px; }
}

/* motion off on request (keep LAST) */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    /* section 13: still rows you can swipe, without the looping copies */
    .mq-row { overflow-x: auto; scrollbar-width: none; }
    .mq-row::-webkit-scrollbar { display: none; }
    .mq-dup { display: none; }
}

/* ============================================================
   LAUNCH ADDITIONS (live copy, Oct 2026): the proof cards in
   section 16, the note under each plan price, the launch-pricing
   panel in section 21 and the hero video cover.
   ============================================================ */

/* section 16: proof the demand is real. Static source cards (no links
   out), Bundle-page style: the source's brand band with its logo and
   citation, a small picture of the figure, the figure, its line. Cut
   corners and a lit edge in the brand colour, like the A / B / C cards. */
.pmx-proof { margin: 128px 0 0; text-align: center; }
.pmx-pk { display: inline-flex; align-items: center; gap: 12px; margin: 0; color: #6B4526; font-size: 13.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.pmx-pk::before, .pmx-pk::after { content: ""; width: 48px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(107, 69, 38, 0), rgba(107, 69, 38, .45)); }
.pmx-pk::after { transform: scaleX(-1); }
.pmx-pk .ic { width: 32px; height: 32px; padding: 7px; border-radius: 10px; background: #2A1C12; color: var(--acid); transform: rotate(-6deg); box-shadow: 0 8px 16px -8px rgba(42, 28, 18, .7); }
.pmx-pt { max-width: 16em; margin: 18px auto 0; color: #1E140C; font-family: var(--f-display); font-size: clamp(34px, 4vw, 60px); font-weight: 800; line-height: 1.04; letter-spacing: -.04em; text-wrap: balance; }
.pmx-pt span { padding: 0 .06em; background: linear-gradient(transparent 58%, rgba(198, 246, 137, .95) 58%, rgba(198, 246, 137, .95) 90%, transparent 90%); white-space: nowrap; }
.pmx-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 52px 0 0; text-align: left; filter: drop-shadow(0 26px 24px rgba(90, 45, 10, .14)); }
.b-ahrefs { --c1: #FFC98A; --c2: #FF8D00; --tint: #FFF5E8; --deep: #C26300; --hd: #054ADA; --hdt: #DCE7FF; }
.b-brightlocal { --c1: #9EF0B2; --c2: #0FD03B; --tint: #EDFDF1; --deep: #08852A; --hd: #00086B; --hdt: #DDE2FF; }
.b-google { --c1: #A8C7FA; --c2: #4285F4; --tint: #EEF4FF; --deep: #1A56C4; --hd: #FFFFFF; --hdt: #3C4043; }
.b-whitespark { --c1: #FFB0C9; --c2: #F50057; --tint: #FFF0F5; --deep: #C2004A; --hd: #1F2125; --hdt: #E7E8EA; }
.pmx-card { --qc: 26px; --qb: 14px; position: relative; isolation: isolate; display: flex; flex-direction: column; padding: 2px 2px 26px; color: #4A3F36; transition: transform .3s var(--ease); }
.pmx-card:hover { transform: translateY(-6px); }
.pmx-card::before, .pmx-card::after { content: ""; position: absolute; z-index: -1; clip-path: polygon(var(--qc) 0, calc(100% - var(--qc)) 0, 100% var(--qc), 100% calc(100% - var(--qb)), calc(100% - var(--qb)) 100%, var(--qb) 100%, 0 calc(100% - var(--qb)), 0 var(--qc)); pointer-events: none; }
.pmx-card::before { inset: 0; background: linear-gradient(160deg, var(--c2), color-mix(in srgb, var(--c2) 22%, transparent) 38%, color-mix(in srgb, var(--c2) 12%, transparent) 70%, color-mix(in srgb, var(--c2) 70%, transparent)); }
.pmx-card::after { inset: 2px; background: radial-gradient(320px 220px at 100% 100%, color-mix(in srgb, var(--c1) 28%, transparent), transparent 70%), linear-gradient(180deg, #fff 45%, var(--tint)); }
/* the brand band: logo left, citation right, the brand colour under it */
.pc-hd { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 76px; padding: 14px 20px 18px 24px; background: var(--hd); color: var(--hdt); clip-path: polygon(var(--qc) 0, calc(100% - var(--qc)) 0, 100% var(--qc), 100% 100%, 0 100%, 0 var(--qc)); }
.pc-hd::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--c2); }
.b-google .pc-hd { box-shadow: inset 0 -1px 0 #E3E8F1; }
.b-google .pc-hd::after { background: linear-gradient(90deg, #4285F4 0 25%, #EA4335 25% 50%, #FBBC05 50% 75%, #34A853 75%); }
.pc-logo { display: grid; place-items: center; flex: none; }
.pc-logo img { width: auto; height: 22px; }
.b-ahrefs .pc-logo img { height: 32px; border-radius: 7px; }
.b-whitespark .pc-logo img { height: 28px; }
.b-google .pc-logo { width: 44px; height: 44px; border-radius: 13px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 8px 16px -10px rgba(0, 0, 0, .5); }
.b-google .pc-logo img { width: 26px; height: 26px; }
.pc-hd small { color: var(--hdt); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; line-height: 1.35; text-align: right; text-transform: uppercase; text-wrap: balance; }
/* the picture of the figure */
.pc-viz { display: flex; align-items: center; justify-content: center; gap: 14px; height: 132px; margin: 18px 18px 0; padding: 12px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c1) 65%, #fff), 0 14px 24px -20px color-mix(in srgb, var(--c2) 70%, transparent); }
.pc-ring { position: relative; display: grid; place-items: center; flex: none; width: 82px; height: 82px; border-radius: 50%; background: conic-gradient(var(--c2) calc(var(--p) * 1%), color-mix(in srgb, var(--c1) 30%, #F1EEE6) 0); }
.pc-ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #fff; }
.pc-ring b { position: relative; color: #1E140C; font-family: var(--f-display); font-size: 20px; font-weight: 800; letter-spacing: -.03em; }
.pc-ring .pc-badge { position: absolute; right: -5px; bottom: -3px; width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--c2); color: #fff; box-shadow: 0 0 0 3px #fff; }
.pv-pair { gap: 26px; }
/* Ahrefs: a year of monthly charges next to the 78% who bill monthly */
.pc-cal { position: relative; display: grid; grid-template-columns: repeat(4, 20px); gap: 5px; padding: 16px 8px 8px; border-radius: 10px; background: var(--tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c1) 70%, #fff); }
.pc-cal::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; border-radius: 10px 10px 0 0; background: var(--c2); }
.pc-cal i { display: grid; place-items: center; height: 20px; border-radius: 6px; background: linear-gradient(160deg, var(--c1), var(--c2)); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12); }
.pc-cal i::before { content: "$"; color: #fff; font-family: var(--f-display); font-size: 11.5px; font-weight: 800; line-height: 1; }
/* Google/Ipsos: a local search on the phone, then the store */
.pc-trip { display: flex; align-items: center; gap: 6px; }
.pc-phone { display: grid; place-items: center; width: 34px; height: 56px; padding: 4px; border-radius: 10px; background: #26303D; box-shadow: 0 10px 16px -10px rgba(0, 0, 0, .6); }
.pc-phone .ic { width: 100%; height: 100%; padding: 13px 5px; border-radius: 7px; background: var(--tint); color: var(--c2); }
.pc-path { position: relative; width: 24px; height: 2px; background: repeating-linear-gradient(90deg, var(--c2) 0 4px, transparent 4px 7px); }
.pc-path::after { content: ""; position: absolute; right: 0; top: 50%; width: 6px; height: 6px; border-top: 2px solid var(--c2); border-right: 2px solid var(--c2); transform: translateY(-50%) rotate(45deg); }
.pc-store { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(160deg, var(--c1), var(--c2)); box-shadow: 0 10px 18px -10px var(--c2); }
.pc-store .ic { width: 22px; height: 22px; color: #fff; }
/* Whitespark: the Google profile itself at number one */
.pv-rank ol { display: grid; gap: 9px; width: 100%; margin: 0; padding: 0; list-style: none; }
.pv-rank li { display: flex; align-items: center; gap: 10px; }
.pv-rank li > b { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 7px; background: color-mix(in srgb, var(--c1) 30%, #F1EEE6); color: #94838C; font-size: 12px; font-weight: 800; }
.pv-rank .pc-one > b { background: linear-gradient(160deg, var(--c1), var(--c2)); color: #fff; }
.pc-gbp { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px; border-radius: 12px; background: var(--tint); box-shadow: inset 0 0 0 1.5px var(--c2), 0 10px 18px -12px var(--c2); }
.pc-av { flex: none; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(160deg, var(--c1), var(--c2)); }
.pc-lns { display: grid; flex: 1; gap: 5px; }
.pc-lns i { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--c2) 55%, #fff); }
.pc-lns i + i { width: 60%; background: color-mix(in srgb, var(--c1) 55%, #fff); }
.pc-gbp .ic { width: 18px; height: 18px; color: var(--c2); }
.pc-bar { flex: 1; height: 10px; border-radius: 5px; background: linear-gradient(90deg, color-mix(in srgb, var(--c1) 40%, #E9E4EA) var(--w), transparent var(--w)); }
/* the figure and its line */
.pc-stat { display: block; margin: 20px 22px 0; color: var(--deep); font-family: var(--f-display); font-size: 50px; font-weight: 800; line-height: .95; letter-spacing: -.045em; }
.pc-txt { display: block; margin: 8px 22px 0; color: #4A3F36; font-size: 15.5px; line-height: 1.55; }
.pmx-pn { max-width: 900px; margin: 32px auto 0; text-align: center; color: #7A6A5C; font-size: 14.5px; line-height: 1.55; }
.pmx-pn .ic { display: inline-block; width: 18px; height: 18px; margin-right: 8px; color: #C26300; vertical-align: -4px; }

/* the note under each plan price: a stub hanging from the price box,
   split in two (after launch | today) */
.pl-price:has(+ .pmx-after) { border-radius: 18px 18px 8px 8px; }
.pmx-after { margin: 0 12px; border-radius: 0 0 14px 14px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); color: #B9CDBD; font-size: 13px; line-height: 1.35; text-align: center; }
.pmx-after > span { display: block; padding: 8px 12px 9px; }
.pmx-after > span:last-child { border-top: 1.5px dashed rgba(255, 255, 255, .14); }
.pmx-after .ic { display: inline-block; width: 14px; height: 14px; margin-right: 7px; color: #8FA394; vertical-align: -2px; }
.pmx-after b { color: #FFD45C; font-weight: 800; }
.pmx-after .pa-now { color: #fff; font-weight: 700; }
.pmx-after .pa-now .ic { width: 18px; height: 18px; padding: 3.5px; vertical-align: -4px; border-radius: 50%; background: var(--c); color: var(--ink); }
.pa-sep { display: none; }
.plan-best .pmx-after { background: rgba(3, 20, 12, .5); box-shadow: inset 0 0 0 1px rgba(214, 242, 60, .32); }
.plan-best .pmx-after > span:last-child { border-color: rgba(214, 242, 60, .22); }
.plan-best .pmx-after .pa-now .ic { background: var(--acid); }
.plan-gold .pmx-after { background: rgba(255, 194, 61, .05); box-shadow: inset 0 0 0 1px rgba(255, 194, 61, .26); }
.plan-gold .pmx-after > span:last-child { border-color: rgba(255, 194, 61, .2); }

/* section 21: launch pricing. A cut-corner panel (gold lit at the top
   where the deadline tag sits, lime at the bottom left); each plan's one
   payment today runs along a track to what it costs after launch; the
   month-three sum drawn as two columns. */
.pmx-lp { --qc: 34px; --qb: 18px; position: relative; isolation: isolate; max-width: 980px; margin: 80px auto 0; padding: 54px 44px 34px; color: #fff; text-align: center; }
.lp-bg { position: absolute; inset: 0; z-index: -1; filter: drop-shadow(0 0 18px rgba(198, 246, 137, .1)) drop-shadow(0 50px 50px rgba(0, 0, 0, .5)); pointer-events: none; }
.lp-edge, .lp-fill { position: absolute; clip-path: polygon(var(--qc) 0, calc(100% - var(--qc)) 0, 100% var(--qc), 100% calc(100% - var(--qb)), calc(100% - var(--qb)) 100%, var(--qb) 100%, 0 calc(100% - var(--qb)), 0 var(--qc)); }
.lp-edge { inset: 0; background: radial-gradient(420px 200px at 50% 0, #FFC23D, transparent 70%), radial-gradient(420px 260px at 0 100%, #C6F689, transparent 70%), radial-gradient(360px 220px at 100% 100%, rgba(198, 246, 137, .5), transparent 70%), rgba(255, 255, 255, .12); }
.lp-fill { inset: 1.5px; background: radial-gradient(520px 240px at 50% 0, rgba(255, 194, 61, .12), transparent 70%), radial-gradient(560px 320px at 0 100%, rgba(198, 246, 137, .1), transparent 70%), linear-gradient(170deg, #0F3324, #0A2619 60%, #071D13); }
.pmx-lp-k { position: absolute; left: 50%; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 2 * var(--qc) - 20px); margin: 0; padding: 8px 18px 8px 8px; border-radius: 12px; background: linear-gradient(180deg, #FFF0A0, #FFD23F 50%, #F5B312); color: #2B1A00; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; line-height: 1.3; text-align: left; text-transform: uppercase; transform: translate(-50%, -50%); box-shadow: inset 0 -2px 0 rgba(120, 70, 0, .25), 0 12px 26px -10px rgba(245, 179, 18, .7); }
.pmx-lp-k .ic { width: 26px; height: 26px; padding: 5px; border-radius: 8px; background: #2B1A00; color: #FFD23F; }
.pmx-lp-t { margin: 0; font-family: var(--f-display); font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; line-height: 1.06; letter-spacing: -.035em; text-wrap: balance; }
.pmx-lp-t span { background: linear-gradient(180deg, #F2FF9C 0%, var(--acid) 55%, #A9E13A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pmx-lp-rows { display: grid; gap: 10px; margin: 28px 0 0; text-align: left; }
.pmx-lp-r { --rc: #E4ECE7; display: grid; grid-template-columns: minmax(150px, 1fr) 182px minmax(48px, .7fr) minmax(0, 1.25fr); align-items: center; gap: 16px; padding: 12px 20px 12px 18px; border-radius: 16px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); font-size: 16px; }
.lp-gold { --rc: #FFC23D; }
.pmx-lp-r > b { display: flex; align-items: center; gap: 12px; color: #fff; font-family: var(--f-display); font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.pmx-lp-r > b::before { content: ""; flex: none; width: 11px; height: 11px; border-radius: 3px; background: var(--rc); box-shadow: 0 0 12px var(--rc); transform: rotate(45deg); }
.pmx-now { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 15px 6px 6px; border-radius: 999px; background: rgba(198, 246, 137, .12); box-shadow: inset 0 0 0 1px rgba(198, 246, 137, .45); color: #EAFFC8; font-weight: 700; white-space: nowrap; }
.pmx-now .ic { width: 22px; height: 22px; padding: 4.5px; border-radius: 50%; background: var(--lime); color: var(--ink); }
.pmx-arr { position: relative; height: 2px; background: linear-gradient(90deg, rgba(198, 246, 137, .75), rgba(255, 255, 255, .18)); }
.pmx-arr i { position: absolute; left: -3px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--lime); }
.pmx-arr::after { content: ""; position: absolute; right: 1px; top: 50%; width: 8px; height: 8px; border-top: 2px solid rgba(255, 255, 255, .35); border-right: 2px solid rgba(255, 255, 255, .35); transform: translateY(-50%) rotate(45deg); }
.pmx-then { display: inline-flex; align-items: center; gap: 9px; color: #9DB3A3; font-size: 15.5px; }
.pmx-then .ic { width: 17px; height: 17px; color: #6F8A77; }
.pmx-hot { --rc: var(--acid); background: linear-gradient(90deg, rgba(214, 242, 60, .07), rgba(255, 194, 61, .13)); box-shadow: inset 0 0 0 1.5px rgba(255, 194, 61, .6), 0 18px 34px -20px rgba(255, 194, 61, .55); }
.pmx-hot .pmx-arr { background: linear-gradient(90deg, rgba(198, 246, 137, .75), #FFC23D); }
.pmx-hot .pmx-arr::after { border-color: #FFC23D; }
.pmx-hot .pmx-then { color: #FFD45C; font-weight: 700; }
.pmx-hot .pmx-then .ic { color: #FFC23D; }
.lp-x { display: flex; align-items: center; gap: 28px; margin: 22px 0 0; padding: 18px 26px 18px 22px; border-radius: 16px; background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); text-align: left; }
.pmx-lp-x { margin: 0; color: #CFE0D3; font-size: 16.5px; line-height: 1.6; }
.lp-math { display: flex; flex: none; align-items: flex-end; gap: 12px; padding: 0 6px; border-bottom: 1.5px solid rgba(255, 255, 255, .22); }
.lm-col { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 48px; }
.lm-col b { margin-bottom: 3px; font-family: var(--f-display); font-size: 15px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.lm-col i { width: 100%; border-radius: 5px; }
.lm-month b { color: #FFD45C; }
.lm-month em { width: 100%; height: 14px; border: 1.5px dashed rgba(255, 212, 92, .65); border-bottom: 0; border-radius: 5px 5px 0 0; }
.lm-month i { height: 20px; background: linear-gradient(180deg, #FFD45C, #F5A20F); box-shadow: inset 0 -2px 0 rgba(120, 70, 0, .25); }
.lm-once b { color: var(--lime); }
.lm-once .ic { width: 20px; height: 20px; margin-bottom: 3px; padding: 4px; border-radius: 50%; background: var(--lime); color: var(--ink); }
.lm-once i { height: 59px; background: linear-gradient(180deg, #E9FFB4, var(--lime) 50%, #8ED45E); box-shadow: 0 0 18px -4px rgba(198, 246, 137, .6); }

/* the hero video cover: a dark capsule, lime play disc with a soft ping */
.vf-play { position: absolute; left: 3%; bottom: 4.5%; display: flex; align-items: center; gap: 10px; padding: 6px 18px 6px 6px; border-radius: 999px; background: #04140C; box-shadow: inset 0 0 0 1.5px rgba(198, 246, 137, .55), 0 0 30px -6px rgba(198, 246, 137, .45), 0 14px 30px -10px rgba(0, 0, 0, .7); color: #fff; font: 600 clamp(13px, 1.7vw, 16px)/1 var(--f-body); white-space: nowrap; transition: transform .25s var(--ease); }
.vf-disc { position: relative; display: grid; place-items: center; width: clamp(34px, 4.4vw, 46px); height: clamp(34px, 4.4vw, 46px); border-radius: 50%; background: linear-gradient(160deg, #E9FFB4, var(--lime) 55%, #8ED45E); box-shadow: 0 6px 16px -6px rgba(198, 246, 137, .8); }
.vf-disc::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--lime); animation: vf-ping 2.2s cubic-bezier(.2, .6, .3, 1) infinite; }
@keyframes vf-ping { 0% { transform: scale(1); opacity: .9; } 80%, 100% { transform: scale(1.7); opacity: 0; } }
.vf-disc svg { width: 46%; height: auto; margin-left: 8%; fill: var(--ink); }
.vf-play b { font-family: var(--f-display); font-size: 1.12em; font-weight: 800; letter-spacing: -.01em; }
.vf-play small { padding: 4px 8px; border-radius: 7px; background: rgba(198, 246, 137, .14); color: var(--lime); font-size: .86em; font-weight: 700; font-variant-numeric: tabular-nums; }
.vsl-facade:hover .vf-play, .vsl-facade:focus-visible .vf-play { transform: scale(1.05); }
.vsl-facade.wait .vf-play { opacity: .75; }
.vsl-facade.wait .vf-disc::before { animation: none; opacity: 0; }

@media (max-width: 1100px) {
    .pmx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
    /* plan name on top, then today's payment along the track to the price after launch */
    .pmx-lp-r { grid-template-columns: max-content minmax(36px, 1fr) max-content; grid-template-areas: "n n n" "w a t"; gap: 10px 14px; padding: 14px 18px; }
    .pmx-lp-r > b { grid-area: n; }
    .pmx-now { grid-area: w; }
    .pmx-arr { grid-area: a; }
    .pmx-then { grid-area: t; }
}
@media (max-width: 760px) {
    .pmx-proof { margin-top: 88px; }
    .pmx-cards { gap: 18px; margin-top: 36px; }
    .pmx-lp { --qc: 22px; --qb: 12px; margin-top: 64px; padding: 50px 16px 18px; }
    .pmx-lp-k { max-width: calc(100% - 2 * var(--qc) - 8px); padding: 7px 12px 7px 7px; font-size: 11px; letter-spacing: .06em; }
    .pmx-lp-k .ic { width: 22px; height: 22px; padding: 4px; }
    .pmx-lp-rows { margin-top: 22px; }
}
@media (max-width: 600px) {
    .pmx-cards { grid-template-columns: minmax(0, 1fr); }
    .pmx-pk { gap: 10px; font-size: 12.5px; letter-spacing: .12em; }
    .pmx-pk::before, .pmx-pk::after { width: 22px; }
    /* bent track: today's payment, then down and across to the price after launch */
    .pmx-lp-r { grid-template-columns: 22px minmax(0, 1fr); grid-template-areas: "n n" "w w" "a t"; justify-items: start; gap: 10px 8px; padding: 14px; font-size: 15px; }
    .pmx-lp-r > b { font-size: 17px; }
    .pmx-arr { align-self: start; width: 13px; height: 14px; margin: -6px 0 0 10px; border-left: 2px solid rgba(198, 246, 137, .55); border-bottom: 2px solid rgba(198, 246, 137, .55); border-radius: 0 0 0 7px; background: none; }
    .pmx-hot .pmx-arr { background: none; border-color: #FFC23D; }
    .pmx-arr i, .pmx-arr::after { display: none; }
    .pmx-then { font-size: 15px; }
    .lp-x { flex-direction: column; gap: 16px; padding: 18px 16px; text-align: center; }
    .pmx-lp-x { font-size: 15.5px; }
    .vf-play { gap: 8px; padding: 4px 12px 4px 4px; font-size: 12.5px; }
    .vf-disc { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
    .vf-disc::before { animation: none; opacity: 0; }
}

/* Platinum coupon ticket (both pricing sections), from the Bundle page:
   a notched ticket with a dashed lime edge that warms to gold (an opacity
   fade, nothing repaints), the code, the saving and a Copy button */
.coupon { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; margin-top: 24px; padding: 13px 14px 13px 20px; border-radius: 16px; background: linear-gradient(90deg, rgba(198, 246, 137, .16), rgba(255, 212, 92, .14));
    -webkit-mask: radial-gradient(circle at 0 50%, transparent 10px, #000 10.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 10px, #000 10.5px) right / 51% 100% no-repeat;
    mask: radial-gradient(circle at 0 50%, transparent 10px, #000 10.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 10px, #000 10.5px) right / 51% 100% no-repeat; }
.coupon::before, .coupon::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px dashed rgba(198, 246, 137, .8); pointer-events: none; }
.coupon::after { border-color: rgba(255, 212, 92, .95); opacity: 0; animation: cp-warm 2.4s ease-in-out infinite; }
@keyframes cp-warm { 50% { opacity: 1; } }
.cp-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(160deg, #F3FFC9 0%, #C6F689 48%, #7EE0AE 100%); color: var(--ink); box-shadow: 0 8px 16px -8px rgba(166, 227, 90, .8); transform: rotate(-8deg); }
.cp-ic .ic { width: 19px; height: 19px; }
.cp-txt { display: grid; gap: 2px; min-width: 0; }
.cp-txt small { color: var(--lime); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.cp-code { color: #fff; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 21px; font-weight: 700; letter-spacing: .05em; line-height: 1.1; }
.cp-off { display: grid; justify-items: center; color: #FFD45C; font-size: 11px; font-weight: 800; letter-spacing: .1em; line-height: 1; text-transform: uppercase; }
.cp-off b { font-family: var(--f-display); font-size: 28px; letter-spacing: -.03em; text-transform: none; }
.cp-copy { padding: 10px 14px; border: 0; border-radius: 10px; background: var(--lime); color: var(--ink); font: 800 13.5px/1 var(--f-body); cursor: pointer; box-shadow: inset 0 -2px 0 rgba(30, 90, 20, .22); transition: transform .15s var(--ease), background .2s; }
.cp-copy:hover { transform: translateY(-1px); }
.cp-copy:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cp-copy.done { background: #fff; }
.plan .coupon + .jv-wrap { margin-top: 16px; }
@media (max-width: 767px) {
    .coupon { gap: 9px; padding: 11px 10px 11px 16px; }
    .cp-ic { width: 32px; height: 32px; }
    .cp-code { font-size: 18px; }
    .cp-off b { font-size: 23px; }
    .cp-copy { padding: 9px 11px; font-size: 12.5px; }
}
@media (max-width: 400px) {
    .cp-ic { display: none; }
    .coupon { gap: 8px; padding-left: 18px; }
    .cp-code { font-size: 16px; }
    .cp-off b { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .coupon::after { animation: none; } }

/* ============================================================
   SECTION 1b — WEBINAR REPLAY (the client's section after the hero).
   Kept plain on purpose: a 3 h 39 min video, so nothing behind it moves
   or competes. The hero's own dark green carries straight on (no colour
   step); the boundary is a video timeline (played part lit lime up to a
   playhead, chapter ticks, a buffered stretch); a cut-corner screen with a
   lit edge and two corner brackets; a pulsing ring on the poster's own
   "WEBINAR REPLAY" play badge; the page's orange button.
   ============================================================ */
.hero { padding-bottom: 70px; }
.s-replay { position: relative; padding: 64px 0 150px; background: var(--night); color: #fff; }
/* the timeline on the boundary */
.rp-seam { position: absolute; left: 0; right: 0; top: -1px; z-index: 2; height: 2px; pointer-events: none; }
.rp-track { position: absolute; inset: 0; background:
    linear-gradient(90deg, rgba(198, 246, 137, 0) 0, rgba(198, 246, 137, .55) 18%, var(--lime) 50%, rgba(255, 255, 255, .26) 50%, rgba(255, 255, 255, .26) 62%, rgba(255, 255, 255, .12) 62%, rgba(255, 255, 255, 0) 100%); }
/* chapter ticks: lit before the playhead, dim after */
.rp-track::before { content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 8px; background:
    linear-gradient(var(--lime), var(--lime)) 22% 0 / 2px 100% no-repeat,
    linear-gradient(var(--lime), var(--lime)) 38% 0 / 2px 100% no-repeat,
    linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, .3)) 66% 0 / 2px 100% no-repeat,
    linear-gradient(rgba(255, 255, 255, .22), rgba(255, 255, 255, .22)) 82% 0 / 2px 100% no-repeat; }
.rp-head { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F2FFC8, var(--lime) 60%, #9BE15D); box-shadow: 0 0 0 5px rgba(198, 246, 137, .16), 0 0 22px rgba(198, 246, 137, .55); }
/* head */
.s-replay .s-head { max-width: 980px; margin: 0 auto 40px; text-align: center; }
.rp-kick { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 11px; border-radius: 999px; background: rgba(214, 242, 60, .1); box-shadow: inset 0 0 0 1px rgba(214, 242, 60, .4); color: var(--acid); font-size: 14px; font-weight: 800; letter-spacing: .02em; }
.rp-kick i { width: 8px; height: 8px; border-radius: 50%; background: #FF5A5F; box-shadow: 0 0 0 3px rgba(255, 90, 95, .22); animation: rp-rec 2.4s ease-in-out infinite; }
@keyframes rp-rec { 50% { opacity: .35; } }
.s-replay .s-title { margin: 18px 0 0; color: #fff; font-family: var(--f-display); font-size: clamp(38px, 4.7vw, 68px); font-weight: 800; line-height: 1.04; letter-spacing: -.045em; text-wrap: balance; }
.s-replay .s-title .mk { display: block; background: linear-gradient(180deg, #F2FF9C 0%, var(--acid) 55%, #A9E13A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-wrap: balance; }
/* the screen: cut corners top-left / bottom-right, a lit lime edge, brackets on the square corners */
.rp-frame { --qc: 34px; position: relative; isolation: isolate; max-width: 1000px; margin: 0 auto; padding: 3px; }
.rp-frame::before { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: polygon(var(--qc) 0, 100% 0, 100% calc(100% - var(--qc)), calc(100% - var(--qc)) 100%, 0 100%, 0 var(--qc)); background: linear-gradient(135deg, #EFFFC2 0%, var(--lime) 14%, rgba(198, 246, 137, .38) 40%, rgba(198, 246, 137, .3) 62%, var(--lime) 88%, #9BE15D 100%); }
.rp-frame::after { content: ""; position: absolute; inset: -13px; z-index: -1; pointer-events: none; opacity: .75; background:
    linear-gradient(var(--lime), var(--lime)) right top / 28px 2px no-repeat, linear-gradient(var(--lime), var(--lime)) right top / 2px 28px no-repeat,
    linear-gradient(var(--lime), var(--lime)) left bottom / 28px 2px no-repeat, linear-gradient(var(--lime), var(--lime)) left bottom / 2px 28px no-repeat; }
.rp-player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #050B07; clip-path: polygon(calc(var(--qc) - 1.25px) 0, 100% 0, 100% calc(100% - var(--qc) + 1.25px), calc(100% - var(--qc) + 1.25px) 100%, 0 100%, 0 calc(var(--qc) - 1.25px)); }
.rp-player iframe, .rp-player img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
.rp-still { all: unset; position: absolute; inset: 0; cursor: pointer; }
.rp-still img { transition: transform .5s var(--ease); }
.rp-still:hover img, .rp-still:focus-visible img { transform: scale(1.015); }
.rp-still:focus-visible { outline: 3px solid var(--lime); outline-offset: -3px; }
/* play cue: a big lime play button at the centre of the poster, with a soft
   ping (transform / opacity only); it grows a touch on hover */
.rp-play { position: absolute; left: 50%; top: 50%; width: clamp(72px, 12.5%, 128px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; transition: transform .25s var(--ease);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.6 5.4v13.2c0 .8.9 1.3 1.6.9l10.4-6.6c.6-.4.6-1.3 0-1.7L10.2 4.6c-.7-.5-1.6 0-1.6.8z' fill='%230B1D12'/%3E%3C/svg%3E") 56% 50% / 42% no-repeat, radial-gradient(circle at 34% 28%, #F4FFCC, var(--lime) 55%, #8ED45E);
    box-shadow: 0 0 0 10px rgba(198, 246, 137, .22), 0 0 0 22px rgba(198, 246, 137, .08), 0 18px 40px -8px rgba(0, 0, 0, .6); }
.rp-play::before, .rp-play::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--lime); animation: rp-ping 2.4s cubic-bezier(.2, .6, .3, 1) infinite; }
.rp-play::after { animation-delay: 1.2s; }
@keyframes rp-ping { 0% { transform: scale(1); opacity: .85; } 80%, 100% { transform: scale(1.75); opacity: 0; } }
.rp-still:hover .rp-play, .rp-still:focus-visible .rp-play { transform: translate(-50%, -50%) scale(1.08); }
.rp-meta { margin: 16px 0 0; color: #8FA394; font-size: 14px; text-align: center; }
/* the page's orange button, sized for this section */
.rp-cta { display: flex; justify-content: center; margin: 26px 0 0; }
.btn-cta.rp-btn { width: auto; height: 68px; gap: 20px; padding: 0 10px 0 34px; font-size: 25px; }
.rp-btn .cta-arrow { width: 50px; height: 50px; }
.rp-btn .cta-arrow .ic { width: 22px; height: 22px; }
.rp-btn:hover .cta-arrow { transform: translateY(3px); }
@media (max-width: 767px) {
    .hero { padding-bottom: 50px; }
    .s-replay { padding: 48px 0 110px; }
    .s-replay .s-head { margin-bottom: 28px; }
    .s-replay .s-title { font-size: clamp(30px, 8.6vw, 40px); }
    .rp-frame { --qc: 18px; }
    .rp-frame::after { inset: -9px; background-size: 18px 2px, 2px 18px, 18px 2px, 2px 18px; }
    .rp-play { box-shadow: 0 0 0 7px rgba(198, 246, 137, .22), 0 0 0 15px rgba(198, 246, 137, .08), 0 12px 28px -8px rgba(0, 0, 0, .6); }
    .btn-cta.rp-btn { width: 100%; height: 58px; gap: 12px; padding: 0 8px 0 22px; font-size: 18px; }
    .rp-btn .cta-arrow { width: 42px; height: 42px; }
    .rp-btn .cta-arrow .ic { width: 19px; height: 19px; }
}
@media (prefers-reduced-motion: reduce) {
    .rp-kick i, .rp-play::before, .rp-play::after { animation: none; }
}

/* ============================================================
   HERO VIDEO FRAME v4 — the studio screen (graphite top-lit bezel with a
   webcam dot, a lit rim lime -> mint, a halo, a floor light pool) on the
   page's ORIGINAL shape: the rounded plate tilted -2.2deg behind it (the
   logo silhouette), now as lit lime glass instead of a solid slab.
   All static.
   ============================================================ */
.vsl-frame { padding: 11px; border-radius: 26px;
    background: radial-gradient(circle at 50% 5.5px, #33463A 0 1.6px, #0B1610 2.4px 3.6px, transparent 4px) no-repeat, linear-gradient(180deg, #172A1F 0%, #0B1811 38%, #060F0A 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -1px 0 rgba(0, 0, 0, .5), 0 0 0 7px rgba(198, 246, 137, .08), 0 0 44px -6px rgba(198, 246, 137, .45), 0 0 120px -20px rgba(198, 246, 137, .45), 0 60px 100px -40px #000; }
/* the lit rim (a 2px ring, brightest top-left, cooling to mint bottom-right) */
.vsl-frame::before { inset: -2px; z-index: 1; padding: 2px; border-radius: 28px; transform: none; pointer-events: none;
    background: linear-gradient(140deg, #F4FFCC 0%, var(--lime) 18%, rgba(198, 246, 137, .28) 44%, rgba(126, 224, 174, .3) 66%, #7EE0AE 88%, #CFFFE6 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
/* light pool on the floor */
.vsl-frame::after { content: ""; position: absolute; z-index: -1; left: 6%; right: 6%; bottom: -56px; height: 80px; border-radius: 50%; background: radial-gradient(closest-side, rgba(198, 246, 137, .55), rgba(198, 246, 137, .16) 55%, transparent); pointer-events: none; }
.vsl-player { border-radius: 16px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6); }
/* room above: the tilted plate's right corner rises ~30px above the screen */
.stage { margin-top: 70px; }
/* the original tilted plate (frame + 14px each side, -2.2deg), as lit lime glass */
.stage::before { content: ""; position: absolute; z-index: -1; left: 10px; right: 10px; top: -14px; bottom: -14px; border-radius: 38px; transform: rotate(-2.2deg); pointer-events: none;
    background: linear-gradient(140deg, rgba(226, 252, 182, .55), rgba(198, 246, 137, .34) 45%, rgba(171, 229, 101, .22));
    box-shadow: inset 0 0 0 1.5px rgba(214, 242, 60, .7), 0 0 70px -18px rgba(198, 246, 137, .6); }
@media (max-width: 767px) {
    .vsl-frame { padding: 6px; border-radius: 18px; background: radial-gradient(circle at 50% 3px, #33463A 0 1.1px, transparent 1.6px) no-repeat, linear-gradient(180deg, #172A1F 0%, #0B1811 38%, #060F0A 100%); }
    .vsl-frame::before { inset: -1.5px; padding: 1.5px; border-radius: 19.5px; }
    .vsl-frame::after { bottom: -34px; height: 50px; }
    .vsl-player { border-radius: 12px; }
    .stage::before { left: 14px; right: 14px; top: -8px; bottom: -8px; border-radius: 24px; }
    .stage { margin-top: 40px; }
}

/* section 3: on wide screens the corner art overlaps the window's bottom
   corners, so the caption keeps its text clear of both objects */
@media (min-width: 1440px) {
    .s3-pane figcaption { padding-left: 76px; padding-right: 92px; }
}

/* ============================================================
   PLATINUM FOCUS (both pricing sections). Platinum is the offer to
   pick: on three-column screens it stands on a podium (wider and
   taller; the side cards start lower and their boxes recede); on every
   size it gets a brighter card and spotlight, a bigger box on a
   brighter pedestal, a bigger name and price, and a shine that crosses
   the "Most complete" banner. Motion = transform / opacity only.
   ============================================================ */
.plan-best {
    background: radial-gradient(110% 55% at 50% 0%, rgba(214, 242, 60, .5), transparent 66%) padding-box, radial-gradient(90% 40% at 50% 100%, rgba(94, 234, 168, .26), transparent 70%) padding-box, linear-gradient(180deg, #237B4D, #175A3B 45%, #0E3422) padding-box, conic-gradient(from var(--pr-a), #F2FF9C, var(--acid) 12%, #5EEAA8 26%, rgba(214, 242, 60, .45) 40%, rgba(214, 242, 60, .45) 60%, #5EEAA8 74%, var(--acid) 88%, #F2FF9C) border-box;
    box-shadow: 0 0 0 1px rgba(214, 242, 60, .6), 0 0 0 12px rgba(214, 242, 60, .12), 0 0 0 26px rgba(214, 242, 60, .05), 0 0 230px -10px rgba(198, 246, 137, .75), 0 70px 110px -40px #000; }
.plan-best::before { background: conic-gradient(from 180deg at 50% 0, transparent 156deg, rgba(214, 242, 60, .3) 168deg, rgba(242, 255, 156, .55) 180deg, rgba(214, 242, 60, .3) 192deg, transparent 204deg); }
.plan-best .pl-top { height: 208px; }
.plan-best .pl-ped { width: 286px; height: 286px; margin-left: -143px; background: radial-gradient(closest-side, rgba(214, 242, 60, .72), rgba(214, 242, 60, .2) 62%, transparent 64%); }
.plan-best .pl-box { width: 264px; margin-top: -160px; filter: drop-shadow(0 30px 24px rgba(0, 0, 0, .7)) drop-shadow(0 0 46px rgba(214, 242, 60, .5)); }
.plan > .pl-ribbon { top: 174px; overflow: hidden; }
.plan > .pl-ribbon::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -35%; width: 28%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .8), transparent); transform: skewX(-18deg); animation: rb-shine 3.6s ease-in-out infinite; pointer-events: none; }
@keyframes rb-shine { 0%, 55% { transform: translateX(0) skewX(-18deg); } 100% { transform: translateX(560%) skewX(-18deg); } }
.plan-best .pl-name { font-size: 40px; }
.plan-best .pl-sub { color: #DDF5C8; }
.plan-best .pl-now { font-size: 80px; }
@media (min-width: 1200px) {
    .plans { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); margin-top: 222px; }
    .plan-best { margin-top: -58px; }
    .plan-basic, .plan-gold { margin-top: 34px; }
    .plan-basic .pl-box, .plan-gold .pl-box { filter: drop-shadow(0 26px 22px rgba(0, 0, 0, .65)) saturate(.8) brightness(.86); }
    .plan-gold { box-shadow: 0 50px 90px -50px #000; }
}
@media (min-width: 1200px) and (max-width: 1439px) {
    .plan-best { margin-top: -46px; }
    .plan-best .pl-name { font-size: 36px; }
    .plan-best .pl-now { font-size: 74px; }
}
@media (max-width: 767px) {
    .plan-best .pl-top { height: 146px; }
    .plan-best .pl-ped { width: 206px; height: 206px; margin-left: -103px; }
    .plan-best .pl-box { width: 196px; margin-top: -124px; }
    .plan > .pl-ribbon { top: 122px; }
    .plan-best .pl-name { font-size: 34px; }
    .plan-best .pl-now { font-size: 66px; }
}
@media (prefers-reduced-motion: reduce) { .plan > .pl-ribbon::after { animation: none; opacity: 0; } }

/* "Gold or Platinum?" (both pricing sections): the client's note, with the
   Platinum part starting on its own line */
.pt-note .pn-line { display: block; margin-top: 6px; }

/* sticky bar: the seconds tile, its number in lime so the ticking catches the eye */
.bt-s b { color: var(--acid); }
@media (max-width: 767px) {
    .bbar-timer { gap: 2px; }
    .bt-u { min-width: 31px; padding: 4px 3px 3px; }
    .bt-u b { font-size: 15.5px; }
    .bt-u small { font-size: 7.5px; letter-spacing: .06em; }
    .bbar-timer > i { font-size: 13px; margin-top: -8px; }
    .bbar-in .btn-sm { min-width: 0; gap: 6px; padding: 0 14px; font-size: 14.5px; }
}
@media (max-width: 400px) {
    .bbar-in .btn-sm { padding: 0 12px; font-size: 14px; }
    .bbar-in .btn-sm .ic { display: none; }
}
/* the narrowest phones: timer on top, button full width under it */
@media (max-width: 340px) {
    .bbar-in { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 8px; padding: 8px; border-radius: 22px; }
    .bbar-in .btn-sm { justify-self: stretch; justify-content: center; }
}