/* ==========================================================
   LOCAL MEDIA EMPIRE — SALES PAGE
   ========================================================== */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

:root {
    --ink: #0A1633;
    --ink-2: #26365C;
    --muted: #5A6A8C;
    --blue: #0B5CFF;
    --blue-2: #1683FF;
    --cyan: #19D3FF;
    --teal: #12C9A6;
    --paper: #F5F8FD;
    --night: #050C22;
    --night-2: #0B1B45;
    --red: #FF2E4D;
    --mark: #BDEEFF;
    --gold: #FFC93C;
    --gold-soft: #FFD76A;
    --grad: linear-gradient(100deg, #0A4DFF 0%, #1683FF 52%, #19D3FF 100%);
    --grad-gold: linear-gradient(100deg, #FFE7A3 0%, #FFC93C 45%, #FF9F1C 100%);
    --grad-cta: linear-gradient(100deg, #E24400 0%, #F55F00 50%, #FF8418 100%);
    --shadow-card: 0 24px 50px -22px rgba(10, 22, 51, .45), 0 0 0 1px rgba(10, 22, 51, .06);
    --display: 'Bricolage Grotesque', 'Geist', sans-serif;
}

/* ---------- base ---------- */
body { font-family: 'Geist', sans-serif; font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--paper); overflow-x: hidden; }
a { transition: color .2s, background .2s, transform .25s, box-shadow .25s; }
img { max-width: 100%; }

/* utility (same naming as previous pages) */
.w400 { font-weight: 400; } .w500 { font-weight: 500; } .w600 { font-weight: 600; } .w700 { font-weight: 700; } .w800 { font-weight: 800; } .w900 { font-weight: 900; }
.lh100 { line-height: 100%; } .lh120 { line-height: 120%; } .lh140 { line-height: 140%; } .lh160 { line-height: 160%; }
.anton { font-family: 'Anton', sans-serif; }
.caveat { font-family: 'Caveat', cursive; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- buttons ---------- */
.btn-lmp { display: inline-flex; align-items: center; gap: 9px; border-radius: 999px; font-weight: 700; font-size: 15px; padding: 12px 22px; text-decoration: none; white-space: nowrap; }
.btn-outline-lmp { border: 1.5px solid rgba(10, 22, 51, .8); color: var(--ink); background: rgba(255, 255, 255, .7); }
.btn-outline-lmp:hover { background: var(--ink); color: #fff; }
.btn-grad { position: relative; overflow: hidden; background: var(--grad); color: #fff; border: 0; box-shadow: 0 12px 26px -12px rgba(11, 92, 255, .85), inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn-grad:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 18px 32px -12px rgba(11, 92, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn-grad::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); animation: shine 3.6s ease-in-out infinite; }

/* ---------- shared section heading ---------- */
.sec-title { position: relative; z-index: 2; margin: 0 0 66px; font-family: 'Anton', sans-serif; font-weight: 400; font-size: clamp(36px, 4.6vw, 66px); line-height: 1.1; letter-spacing: .01em; text-transform: uppercase; text-align: center; color: var(--ink); }
.sec-title .box { display: inline-block; margin-left: 6px; padding: 2px 20px 0; border-radius: 14px; background: var(--grad); color: #fff; transform: rotate(-1.5deg); box-shadow: 0 20px 40px -18px rgba(11, 92, 255, .85), inset 0 1px 0 rgba(255, 255, 255, .3); }

.rise { opacity: 0; transform: translateY(18px); animation: rise .85s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: var(--d, 0s); }

/* shared countdown digits (sticky bar) */
.cd { display: flex; align-items: center; gap: 5px; }
.cd-u { display: flex; flex-direction: column; align-items: center; min-width: 46px; padding: 4px 6px 3px; border-radius: 9px; background: #101B3F; box-shadow: inset 0 0 0 1px rgba(255, 46, 77, .3); }
.cd-u b { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 23px; line-height: 1; color: var(--red); }
.cd-u small { margin-top: 2px; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8193BC; }
.cd > i { font-family: 'Anton', sans-serif; font-style: normal; font-size: 18px; color: var(--red); opacity: .7; }

/* ==========================================================
   SECTION 1 — FOLD (night city backdrop shared by nav + hero)
   ========================================================== */
.fold { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: linear-gradient(180deg, #040A1F 0%, #06112F 34%, #0A1A47 70%, #0E235E 100%); }
.f-sky { position: absolute; inset: 0; z-index: -6; pointer-events: none;
    background:
        radial-gradient(ellipse 44% 18% at 50% 0%, rgba(25, 211, 255, .22), transparent 70%),
        radial-gradient(ellipse 36% 22% at 50% 36%, rgba(22, 131, 255, .30), transparent 72%),
        radial-gradient(ellipse 34% 26% at 0% 24%, rgba(11, 92, 255, .24), transparent 70%),
        radial-gradient(ellipse 34% 26% at 100% 34%, rgba(11, 92, 255, .22), transparent 70%); }
.f-stars { position: absolute; left: 0; right: 0; top: 0; height: 1000px; z-index: -5; background: url(../images/stars.svg) 0 0 / 100% 100% no-repeat; }
.f-map { position: absolute; left: 0; right: 0; top: 0; height: 1300px; z-index: -5; opacity: .5; background: url(../images/map-dark.svg) center top / 1800px auto no-repeat;
    -webkit-mask-image: radial-gradient(ellipse 40% 36% at 50% 30%, transparent 25%, #000 80%), linear-gradient(#000 40%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: radial-gradient(ellipse 40% 36% at 50% 30%, transparent 25%, #000 80%), linear-gradient(#000 40%, transparent 100%);
            mask-composite: intersect; }

/* two static searchlights rising from the city behind the offer */
.f-beams { position: absolute; left: 0; right: 0; bottom: 170px; height: 1000px; z-index: -4; pointer-events: none; }
.f-beams i { position: absolute; bottom: 0; width: 380px; height: 100%; transform-origin: 50% 100%; clip-path: polygon(47% 100%, 53% 100%, 100% 0, 0 0); background: linear-gradient(0deg, rgba(25, 211, 255, .20), rgba(25, 211, 255, .06) 55%, rgba(25, 211, 255, 0) 90%); }
.f-beams i:nth-child(1) { left: 8%; transform: rotate(22deg); }
.f-beams i:nth-child(2) { right: 8%; transform: rotate(-22deg); }

/* skyline rising behind the offer card */
.f-city { position: absolute; left: 0; right: 0; bottom: 0; height: 460px; z-index: -3; pointer-events: none; }
.f-city::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: 40px; height: 420px; background: radial-gradient(ellipse 50% 60% at 50% 100%, rgba(25, 211, 255, .30), transparent 72%); }
.fc-far { position: absolute; left: 0; right: 0; bottom: 60px; height: 360px; background: url(../images/skyline-stage.svg) center bottom / auto 100% repeat-x; opacity: .38; }
.fc-near { position: absolute; left: 0; right: 0; bottom: 0; height: 250px; background: url(../images/skyline-night.svg) center bottom / auto 100% repeat-x; }
.city-pin { position: absolute; bottom: var(--b); width: var(--s); height: calc(var(--s) * 1.33); animation: pinBob 3.4s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(25, 211, 255, .6)); }
.city-pin:nth-child(odd) { animation-delay: -1.6s; }
.city-pin svg { display: block; width: 100%; height: 100%; }
.city-pin::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 150%; height: 10px; border-radius: 50%; border: 2px solid rgba(25, 211, 255, .6); animation: pinPulse 2.4s ease-out infinite; }

/* ---------- nav (minimal) ---------- */
.nav { position: relative; z-index: 30; padding-top: 24px; }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.nav-logo img { display: block; width: auto; height: 58px; }
.nav-links { display: flex; align-items: center; }
.nav-links a { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; margin-left: 38px; white-space: nowrap; color: #AFC0E4; font-size: 15px; font-weight: 600; text-decoration: none; }
.nav-links a + a::before { content: ""; position: absolute; left: -19px; top: 50%; width: 1px; height: 14px; background: rgba(255, 255, 255, .18); transform: translateY(-50%); }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after { transform: scaleX(1); }
.nl-support i { width: 7px; height: 7px; border-radius: 50%; background: #2BE08E; box-shadow: 0 0 0 3px rgba(43, 224, 142, .2); }

/* ==========================================================
   SECTION 1 — HERO
   ========================================================== */
.hero { position: relative; padding: 26px 0 120px; }
.hero-inner { max-width: 1240px; margin: 0 auto; }

/* ---------- pre headline ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; padding: 8px 22px 8px 8px; border-radius: 999px; background: linear-gradient(90deg, rgba(11, 92, 255, .30), rgba(25, 211, 255, .08)); box-shadow: inset 0 0 0 1px rgba(25, 211, 255, .35); color: #DCE6FA; font-size: 17px; font-weight: 500; text-align: left; }
.eyebrow b { color: var(--cyan); font-weight: 800; white-space: nowrap; }
.eb-ic { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--grad); box-shadow: 0 0 18px rgba(25, 211, 255, .45); }
.eb-ic svg { width: 15px; height: 20px; }
.eb-sep { color: #6F82B0; }

/* ---------- headline: two tiers, wide display face ---------- */
.h-title { margin: 30px auto 0; font-family: var(--display); font-optical-sizing: auto; color: #fff; }
.h-title > span { display: block; }
.ht-1 { max-width: 1160px; margin: 0 auto; font-size: clamp(31px, 4.1vw, 60px); font-weight: 800; line-height: 1.27; letter-spacing: -.025em; text-wrap: balance; }
.ht-2 { max-width: 980px; margin: 20px auto 0; font-size: clamp(20px, 2.3vw, 33px); font-weight: 700; line-height: 1.46; letter-spacing: -.015em; color: #C9D4EE; text-wrap: balance; }
.hl-ai { background: linear-gradient(100deg, #7FE3FF 0%, #19D3FF 45%, #1683FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hl-box { padding: 0 .2em .04em; border-radius: .22em; background: var(--grad); color: #fff; -webkit-box-decoration-break: clone; box-decoration-break: clone; box-shadow: 0 16px 40px -18px rgba(25, 211, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .3); }
.hl-local { white-space: nowrap; }
.hl-pin { width: .5em; height: .68em; vertical-align: -.04em; margin: 0 .01em; }
.hl-line { color: #fff; padding-bottom: .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 15C70 6 160 3 297 9' stroke='%2319D3FF' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% .3em no-repeat; }
.hl-gold { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- sub headline: 4-step roadmap ---------- */
.chain { display: flex; align-items: center; justify-content: center; gap: 10px; width: fit-content; max-width: 100%; margin: 34px auto 0; padding: 10px; border-radius: 20px; background: rgba(8, 18, 52, .72); box-shadow: inset 0 0 0 1px rgba(127, 227, 255, .16), 0 20px 40px -24px rgba(0, 0, 0, .6); }
.ch-step { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 12px; background: rgba(255, 255, 255, .05); color: #fff; font-size: 17px; font-weight: 700; line-height: 1.25; white-space: nowrap; text-align: left; }
.ch-ic { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--grad); color: #fff; font-size: 14px; }
.ch-gold { background: rgba(255, 201, 60, .1); box-shadow: inset 0 0 0 1px rgba(255, 201, 60, .45); color: var(--gold-soft); }
.ch-gold .ch-ic { background: linear-gradient(135deg, #FFE08A, #FF9F1C); color: #3A2600; }
.ch-arrow { width: 22px; height: 12px; flex: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M1 6h17M13 1l6 5-6 5' stroke='%2319D3FF' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- VSL ---------- */
.vsl-wrap { position: relative; max-width: 780px; margin: 64px auto 0; }
.vsl-frame { position: relative; z-index: 2; padding: 10px; border-radius: 26px; border: 2px solid transparent;
    background: linear-gradient(#0A1633, #0A1633) padding-box, linear-gradient(135deg, #7FE3FF, #1683FF 40%, #0B1B45 75%, #19D3FF) border-box;
    box-shadow: 0 0 0 8px rgba(25, 211, 255, .07), 0 0 90px -10px rgba(25, 211, 255, .4), 0 60px 100px -40px rgba(0, 0, 0, .8); }
.vsl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 6px 11px; color: #AFC0E4; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.live { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 6px; background: #D4143A; color: #fff; font-weight: 800; letter-spacing: .16em; box-shadow: 0 0 18px rgba(255, 46, 77, .55); }
.live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: blink 1.1s steps(2, start) infinite; }
.vsl-snd i { color: var(--cyan); margin-right: 4px; }
.vsl-screen { position: relative; aspect-ratio: 16 / 9; border-radius: 15px; overflow: hidden; background: #000; }
.vsl-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* handwritten note pointing at the video (sits above the dashboard prop) */
.vsl-note { position: absolute; z-index: 3; top: -44px; left: calc(100% + 16px); display: none; width: 200px; color: var(--cyan); font-family: 'Caveat', cursive; font-size: 30px; font-weight: 700; line-height: 1; text-align: left; transform: rotate(-4deg); }
.vsl-note span { display: block; padding-left: 14px; }
.vsl-note svg { display: block; width: 150px; margin: 2px 0 0 -34px; }

/* ---------- glossy icons at the edges around the headline ---------- */
.h-icons { position: absolute; left: 0; right: 0; top: 0; z-index: 0; display: none; height: 420px; pointer-events: none; }
.hi { position: absolute; display: grid; place-items: center; width: var(--s); height: var(--s); border-radius: 30%; color: #fff; font-size: calc(var(--s) * .42); opacity: .4; rotate: var(--r, 0deg); animation: floaty 7s ease-in-out infinite;
    background: linear-gradient(150deg, var(--c2), var(--c1));
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -8px 14px rgba(0, 0, 0, .22), 0 20px 34px -16px var(--c1); }
.hi::before { content: ""; position: absolute; inset: 3px 4px 52%; border-radius: 26% 26% 40% 40%; background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0)); }
.hi i { position: relative; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
.hi-coin { border-radius: 50%; color: #7A4A00; background: radial-gradient(circle at 34% 28%, #FFF3C4, #FFC93C 46%, #D98300); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .28), inset 0 -6px 10px rgba(120, 60, 0, .35), 0 18px 30px -14px rgba(255, 160, 30, .7); }
.hi-coin::before { inset: 3px 8px 55%; border-radius: 50% 50% 40% 40%; }
.hi-pin { background: none; box-shadow: none; }
.hi-pin::before { display: none; }
.hi-pin svg { width: 70%; height: 90%; filter: drop-shadow(0 0 8px rgba(25, 211, 255, .4)); }

/* ---------- big 3D props hugging the viewport edges (desktop) ---------- */
.prop { position: absolute; top: 50%; z-index: 1; display: none; text-align: left; color: var(--ink); }
.prop-phone { left: calc((780px - 100vw) / 2 + 2.6vw); width: 236px; transform: translateY(-50%); transform-origin: 0 50%; }
.prop-dash { right: calc((780px - 100vw) / 2 + 2.2vw); width: 272px; transform: translateY(-38%); transform-origin: 100% 50%; }

.pp-3d { transform: perspective(1100px) rotateY(24deg) rotateX(4deg) rotateZ(-3deg); }
.phone { position: relative; width: 236px; height: 486px; padding: 10px; border-radius: 42px; background: linear-gradient(145deg, #34406A, #0B1330 55%, #26335E); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2), 0 50px 90px -30px rgba(0, 0, 0, .9), 0 0 70px -10px rgba(25, 211, 255, .45); }
.ph-notch { position: absolute; z-index: 2; top: 19px; left: 50%; width: 72px; height: 20px; border-radius: 12px; background: #050A1C; transform: translateX(-50%); }
.ph-screen { height: 100%; overflow: hidden; border-radius: 32px; background: #fff; }
.ph-status { display: flex; justify-content: space-between; height: 36px; padding: 11px 20px 0 24px; font-size: 11px; font-weight: 700; }
.ph-status i { margin-left: 2px; font-size: 9px; }
.ph-mail { padding: 6px 14px 0; }
.pm-from { display: flex; align-items: center; gap: 8px; padding-bottom: 9px; border-bottom: 1px solid #E3EAF6; }
.pm-from img { width: 28px; height: 28px; border-radius: 8px; }
.pm-from b { display: block; font-size: 12px; font-weight: 800; line-height: 1.2; }
.pm-from small { display: block; font-size: 9.5px; color: var(--muted); }
.pm-hero { position: relative; height: 100px; margin-top: 10px; overflow: hidden; border-radius: 12px; background: url(../images/skyline.svg) center bottom / auto 62% repeat-x, linear-gradient(180deg, #2E8BFF 0%, #8FD3FF 62%, #FFD9A8 100%); }
.pm-tag { position: absolute; left: 8px; top: 8px; padding: 2px 7px; border-radius: 5px; background: var(--red); color: #fff; font-size: 8.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pm-title { margin-top: 10px; font-family: 'Playfair Display', serif; font-size: 15.5px; font-weight: 800; line-height: 1.2; }
.pm-ai { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; padding: 3px 8px; border-radius: 999px; background: #EAF3FF; color: var(--blue); font-size: 9.5px; font-weight: 800; }
.pm-lines i { display: block; height: 5px; margin-top: 6px; border-radius: 3px; background: #DDE5F2; }
.pm-lines i:last-child { width: 64%; }
.pm-sponsor { position: relative; display: flex; align-items: center; gap: 8px; margin-top: 13px; padding: 9px; border-radius: 10px; background: #FFF6E3; box-shadow: inset 0 0 0 1px #FFE2A6; }
.pms-lbl { position: absolute; right: 8px; top: -7px; padding: 1px 6px; border-radius: 4px; background: #FFB23C; color: #3A2600; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pms-av { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: linear-gradient(135deg, #FFB23C, #FF7A1C); color: #fff; font-size: 11px; }
.pm-sponsor b { display: block; font-size: 11px; font-weight: 800; line-height: 1.2; }
.pm-sponsor small { display: block; font-size: 9px; color: var(--muted); }

.pp-toast { position: absolute; z-index: 2; display: flex; align-items: center; gap: 9px; width: 214px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .85); animation: floaty 6s ease-in-out infinite; }
.pp-toast.t1 { top: 58px; right: -34px; }
.pp-toast.t2 { bottom: 64px; left: -14px; animation-delay: -3s; }
.toast-ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: linear-gradient(135deg, #12C9A6, #0FA88B); color: #fff; font-size: 14px; }
.toast-ic.ic-blue { background: var(--grad); }
.pp-toast b { display: block; font-size: 13.5px; font-weight: 800; line-height: 1.2; }
.pp-toast small { display: block; font-size: 11.5px; color: var(--muted); }

.pd-3d { transform: perspective(1100px) rotateY(-24deg) rotateX(4deg) rotateZ(3deg); }
.win { width: 272px; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .9), 0 0 70px -10px rgba(25, 211, 255, .45); }
.win-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #0A1633; color: #AFC0E4; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.win-bar i { width: 9px; height: 9px; border-radius: 50%; background: #FF5F57; }
.win-bar i:nth-child(2) { background: #FEBC2E; }
.win-bar i:nth-child(3) { background: #28C840; }
.win-bar span { margin-left: 8px; }
.win-body { padding: 14px 14px 13px; }
.rs-head { display: flex; align-items: center; justify-content: space-between; }
.rs-head b { font-family: var(--display); font-size: 16px; font-weight: 800; }
.rs-live { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; background: #DDFBF3; color: #0FA88B; font-size: 10.5px; font-weight: 800; }
.rs-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.rs-list { margin: 10px 0 0; padding: 0; list-style: none; }
.rs-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #EEF2F9; font-size: 13.5px; font-weight: 700; }
.rs-ic { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: color-mix(in srgb, var(--c) 15%, #fff); color: var(--c); font-size: 13px; }
.tg { position: relative; width: 30px; height: 17px; flex: none; margin-left: auto; border-radius: 999px; background: var(--teal); }
.tg::after { content: ""; position: absolute; right: 2px; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.rs-chart { margin-top: 6px; padding: 10px 11px 6px; border-radius: 12px; background: linear-gradient(180deg, #EEF6FF, #fff); box-shadow: inset 0 0 0 1px #E3ECFA; }
.rsc-top { display: flex; align-items: baseline; justify-content: space-between; }
.rsc-top small { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rsc-top b { font-family: var(--display); font-size: 20px; font-weight: 800; }
.rs-chart svg { display: block; width: 100%; height: 46px; margin-top: 4px; }

.pd-card { position: absolute; z-index: 2; left: -30px; bottom: -58px; width: 210px; padding: 12px 13px; border-radius: 14px; background: #fff; box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .85); animation: floaty 6s ease-in-out infinite; animation-delay: -2s; }
.pdc-top { display: flex; align-items: center; justify-content: space-between; }
.pdc-tag { padding: 3px 9px; border-radius: 999px; background: #FFF3D6; color: #B7791F; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.pdc-ok { color: #0FA88B; font-size: 11px; font-weight: 800; white-space: nowrap; }
.pdc-biz { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.pdc-av { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: linear-gradient(135deg, #FF8A7A, #E6475F); color: #fff; font-size: 14px; }
.pdc-biz b { display: block; font-size: 13.5px; font-weight: 800; line-height: 1.2; }
.pdc-biz small { display: block; font-size: 11px; color: var(--muted); }

/* ---------- feature grid ---------- */
.feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 1120px; margin: 72px auto 0; padding: 0; list-style: none; text-align: left; }
.feat-grid li { position: relative; display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); color: #fff; font-size: 16.5px; font-weight: 700; line-height: 1.25; transition: transform .25s, box-shadow .25s; }
.feat-grid li::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 2px; border-radius: 2px; background: var(--a); opacity: .85; }
.feat-grid li:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a) 60%, transparent), 0 16px 30px -18px var(--a); }
.ft-ic { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: color-mix(in srgb, var(--a) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a) 45%, transparent); color: var(--a); font-size: 18px; }

/* ---------- offer: price + CTA + guarantee ---------- */
.offer { position: relative; z-index: 1; display: grid; grid-template-columns: 250px 1fr; align-items: center; gap: 34px; max-width: 880px; margin: 76px auto 0; padding: 28px 40px 28px 28px; border-radius: 30px; border: 1.5px solid transparent; text-align: left;
    background: linear-gradient(160deg, #0F2462, #0A1840 60%, #081335) padding-box,
                linear-gradient(135deg, rgba(127, 227, 255, .85), rgba(22, 131, 255, .35) 40%, rgba(255, 255, 255, .06) 70%, rgba(255, 201, 60, .65)) border-box;
    box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .85), 0 0 80px -20px rgba(25, 211, 255, .4); }
.offer-box { position: relative; }
.offer-box::before { content: ""; position: absolute; inset: 6% -6% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(25, 211, 255, .45), transparent); }
.offer-box img { position: relative; display: block; width: 100%; height: auto; margin: -84px 0 -34px; }

.price-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.p-old { font-size: 22px; font-weight: 700; color: #8FA0C8; }
.p-old s { text-decoration-color: var(--red); text-decoration-thickness: 3px; }
.p-arrow { color: var(--red); font-size: 22px; }
.p-new { font-family: var(--display); font-size: 88px; font-weight: 800; line-height: .9; letter-spacing: -.04em; color: #fff; text-shadow: 0 0 40px rgba(25, 211, 255, .45); }
.p-new sup { top: -.85em; margin-right: 2px; font-size: .42em; color: var(--cyan); }
.p-tag { padding: 7px 12px; border-radius: 10px; background: rgba(255, 201, 60, .12); box-shadow: inset 0 0 0 1px rgba(255, 201, 60, .5); color: var(--gold-soft); font-size: 13px; font-weight: 800; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; }

.btn-buy { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: 22px; padding: 17px 20px 15px; border-radius: 18px; background: var(--grad-cta); color: #fff; text-align: center; text-decoration: none; text-shadow: 0 1px 1px rgba(120, 30, 0, .45);
    box-shadow: 0 22px 44px -16px rgba(245, 95, 0, .9), 0 0 50px -12px rgba(255, 120, 20, .55), inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(90, 20, 0, .3); }
.btn-buy::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; border: 2px solid rgba(255, 140, 40, .85); animation: ctaRing 2.2s ease-out infinite; pointer-events: none; }
.bb-shine { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.bb-shine::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-20deg); animation: shine 3.6s ease-in-out infinite; }
.bb-main { font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.bb-main i { margin-left: 8px; transition: transform .25s; }
.bb-sub { font-size: 15px; font-weight: 600; opacity: .92; }
.btn-buy:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 28px 50px -16px rgba(245, 95, 0, 1), 0 0 60px -10px rgba(255, 120, 20, .7), inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(90, 20, 0, .3); }
.btn-buy:hover .bb-main i { transform: translateX(5px); }

.offer-pts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 16px 0 0; padding: 0; list-style: none; color: #DCE6FA; font-size: 15.5px; font-weight: 600; }
.offer-pts i { margin-right: 5px; color: var(--teal); }

.trust { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; padding-top: 16px; border-top: 1px dashed rgba(255, 255, 255, .14); }
.mbg { display: flex; align-items: center; gap: 12px; }
.mbg-seal { position: relative; display: grid; place-items: center; align-content: center; width: 58px; height: 58px; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFE7A3, #FFC93C 45%, #E08A00); color: #3A2600; line-height: 1; box-shadow: 0 0 0 3px rgba(255, 201, 60, .25), 0 10px 20px -8px rgba(255, 160, 30, .7); }
.mbg-seal::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1.5px dashed rgba(58, 38, 0, .4); }
.mbg-seal b { font-family: 'Anton', sans-serif; font-size: 22px; font-weight: 400; }
.mbg-seal small { font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.mbg-txt { color: #fff; font-size: 15px; font-weight: 800; line-height: 1.25; }
.pay { display: flex; gap: 8px; color: #C9D4EE; font-size: 30px; }

/* (section 1) people at the fold's bottom corners — waist crop hidden under the torn edge */
.mp-wrap { display: contents; }
.mp { position: absolute; bottom: 0; z-index: 0; width: clamp(240px, 25vw, 440px); height: auto; pointer-events: none; }
.mp-left { left: -4.5vw; }
.mp-right { right: -4.5vw; }

/* ==========================================================
   SECTION 2 — TESTIMONIALS (publisher stories)
   ========================================================== */
.stories { position: relative; z-index: 2; padding: 84px 0 120px; background: var(--paper); }

/* torn newspaper edge biting up into the night fold (shadow is baked into the SVG) */
.tear { position: absolute; left: 0; right: 0; top: -54px; z-index: 3; height: 64px; pointer-events: none; background: url(../images/tear.svg?v2) 0 0 / 900px 64px repeat-x; }

/* scroll reveal (shared) — only when JS is running */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- background: glows, halftone, giant quote marks ---------- */
.st-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
    background:
        radial-gradient(ellipse 30% 20% at 8% 14%, rgba(25, 211, 255, .18), transparent 70%),
        radial-gradient(ellipse 28% 22% at 94% 30%, rgba(11, 92, 255, .12), transparent 70%),
        radial-gradient(ellipse 30% 22% at 6% 64%, rgba(255, 201, 60, .16), transparent 70%),
        radial-gradient(ellipse 30% 22% at 96% 84%, rgba(18, 201, 166, .14), transparent 70%); }
.st-dots { position: absolute; inset: 0; background: radial-gradient(rgba(11, 92, 255, .17) 1.3px, transparent 1.8px) 0 0 / 15px 15px;
    -webkit-mask-image: radial-gradient(ellipse 22% 26% at 0% 40%, #000, transparent 72%), radial-gradient(ellipse 22% 26% at 100% 62%, #000, transparent 72%);
            mask-image: radial-gradient(ellipse 22% 26% at 0% 40%, #000, transparent 72%), radial-gradient(ellipse 22% 26% at 100% 62%, #000, transparent 72%); }
.st-qm { position: absolute; font-family: 'Playfair Display', serif; font-size: 460px; font-style: normal; font-weight: 900; line-height: 1; color: var(--blue); opacity: .045; }
.st-qm-l { left: -40px; top: 38%; }
.st-qm-r { right: -30px; top: 66%; }

/* ---------- floating review snippets (phrases from the testimonials) + 3D megaphone (desktop) ---------- */
.deco { position: absolute; inset: 0; z-index: 1; display: none; pointer-events: none; }
.rv { --tail: #fff; position: absolute; display: flex; flex-direction: column; width: 206px; margin: 0; padding: 16px 18px 14px; border-radius: 22px; background: #fff; color: var(--ink); text-align: left; rotate: var(--r, 0deg); box-shadow: 0 26px 44px -24px rgba(10, 22, 51, .42), 0 0 0 1px rgba(10, 22, 51, .05); animation: floaty 7s ease-in-out infinite; }
.rv::after { content: ""; position: absolute; left: 26px; bottom: -7px; width: 16px; height: 16px; border-radius: 3px; background: var(--tail); transform: rotate(45deg); }
.rv:nth-of-type(2n) { animation-delay: -2.6s; }
.rv:nth-of-type(3n) { animation-delay: -4.9s; }
.rv-stars { color: #FFB400; font-size: 15px; line-height: 1; letter-spacing: 2px; text-shadow: 0 1px 0 rgba(160, 90, 0, .25); }
.rv p { margin: 9px 0 0; font-family: var(--display); font-size: 15.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.rv figcaption { display: flex; align-items: center; gap: 7px; margin-top: 10px; color: var(--muted); font-size: 12px; font-weight: 600; }
.rv-av { position: relative; overflow: hidden; display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--a2), var(--a)); color: #fff; font-size: 9px; font-weight: 800; box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); }
.rv-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); transform-origin: 50% 30%; }

/* big smiley breaking out of a top corner */
.rv-emo { position: absolute; top: -30px; right: -20px; font-size: 48px; line-height: 1; rotate: 12deg; filter: drop-shadow(0 9px 10px rgba(10, 22, 51, .3)); }
.rv-emo img { display: block; width: 60px; height: 60px; }
.rv-el .rv-emo { right: auto; left: -20px; rotate: -12deg; }
.rv-el::after { left: auto; right: 26px; }
.rv-g { width: 190px; }

/* layout variant: name on top, stars at the bottom */
.rv-top figcaption { order: -1; margin: 0 0 8px; }
.rv-top p { margin-top: 0; }
.rv-top .rv-stars { order: 3; margin-top: 10px; }

/* colour + type variants */
.rv-blue { --tail: #0F5BFF; background: linear-gradient(140deg, #0A4DFF, #1683FF 60%, #19D3FF); color: #fff; box-shadow: 0 26px 44px -22px rgba(11, 92, 255, .6); }
.rv-blue p { font-size: 16.5px; }
.rv-blue figcaption { color: rgba(255, 255, 255, .88); }
.rv-navy { --tail: #0A1633; background: #0A1633; color: #fff; box-shadow: 0 26px 44px -22px rgba(10, 22, 51, .6), inset 0 0 0 1px rgba(127, 227, 255, .18); }
.rv-navy p { font-size: 16.5px; }
.rv-navy figcaption { color: #AFC0E4; }
.rv-rose { --tail: #FFE6EC; background: #FFE6EC; box-shadow: 0 26px 44px -24px rgba(225, 29, 72, .35), inset 0 0 0 1px #FFCFDA; }
.rv-mint { --tail: #E0F9F0; background: #E0F9F0; box-shadow: 0 26px 44px -24px rgba(15, 168, 139, .35), inset 0 0 0 1px #BDEFD9; }
.rv-peach { --tail: #FFF0D9; background: #FFF0D9; box-shadow: 0 26px 44px -24px rgba(217, 119, 6, .35), inset 0 0 0 1px #FFDEAA; }
.rv-line { border: 2px solid transparent; border-radius: 24px; background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box; }
.rv-line::after { display: none; }
.rv-line p { font-family: 'Playfair Display', serif; font-size: 16.5px; font-style: italic; font-weight: 700; letter-spacing: 0; }

.d3 { position: absolute; width: var(--w, 120px); height: auto; rotate: var(--r, 0deg); animation: floaty 8s ease-in-out infinite; filter: drop-shadow(0 22px 22px rgba(10, 22, 51, .2)); }

/* ---------- header ---------- */
.st-head { position: relative; z-index: 2; text-align: center; }

.st-quote { position: relative; max-width: 1100px; margin: 0 auto; padding: 0 70px; }
.st-quote blockquote { margin: 0; }
.st-quote p { margin: 0; font-family: 'Playfair Display', serif; font-size: clamp(18px, 1.72vw, 25px); font-style: italic; font-weight: 700; line-height: 1.55; color: var(--ink-2); text-wrap: balance; }
.st-quote p b { font-weight: 900; color: var(--ink); background: linear-gradient(180deg, transparent 58%, rgba(255, 201, 60, .6) 58%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sq { position: absolute; font-size: 46px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sq-l { left: 0; top: -6px; }
.sq-r { right: 0; bottom: -4px; }

.st-rule { display: flex; align-items: center; justify-content: center; gap: 14px; max-width: 460px; margin: 42px auto 0; }
.st-rule::before, .st-rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(10, 22, 51, .25)); }
.st-rule::after { background: linear-gradient(90deg, rgba(10, 22, 51, .25), transparent); }
.st-rule svg { width: 22px; height: 29px; }

.st-title { margin: 22px auto 0; font-family: var(--display); font-size: clamp(30px, 3.5vw, 50px); font-weight: 800; line-height: 1.24; letter-spacing: -.025em; color: var(--ink); }
.st-title > span { display: block; }
.st-title > span:first-child { color: var(--ink-2); font-size: .8em; }
.st-l2 { position: relative; display: inline-block; }
.st-spark { position: absolute; fill: var(--blue-2); animation: twinkle 2.6s ease-in-out infinite; }
.st-spark.sp1 { left: -34px; top: -4px; width: 22px; height: 22px; }
.st-spark.sp2 { right: -26px; bottom: 2px; width: 14px; height: 14px; fill: var(--gold); animation-delay: 1.2s; }
.st-sub { max-width: 800px; margin: 18px auto 0; color: var(--muted); font-size: 19px; line-height: 1.6; text-wrap: balance; }
.st-sub b { color: var(--ink); font-weight: 700; }

/* ---------- staggered two-column story cards ---------- */
.st-grid { position: relative; z-index: 2; display: flex; align-items: flex-start; gap: 34px; max-width: 1080px; margin: 64px auto 0; }
.st-col { display: flex; flex: 1; flex-direction: column; gap: 34px; min-width: 0; }
.st-col-b { padding-top: 76px; }

.tcard { position: relative; overflow: hidden; padding: 28px 28px 24px; border-radius: 24px; background: #fff; box-shadow: 0 30px 60px -34px rgba(10, 22, 51, .42), 0 0 0 1px rgba(10, 22, 51, .07); transition: transform .35s, box-shadow .35s; }
.tcard::before { content: ""; position: absolute; right: -70px; top: -70px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--a) 15%, transparent), transparent); pointer-events: none; }
.tcard::after { content: ""; position: absolute; left: 28px; right: 28px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--a), var(--a2)); }

.tc-top { position: relative; display: flex; align-items: center; gap: 14px; }
.tc-av { position: relative; width: 66px; height: 66px; flex: none; padding: 3px; border-radius: 50%; background: linear-gradient(135deg, var(--a2), var(--a)); }
.tc-ini { position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border: 3px solid #fff; border-radius: 50%; background: linear-gradient(135deg, color-mix(in srgb, var(--a) 14%, #fff), color-mix(in srgb, var(--a2) 32%, #fff)); color: var(--a); font-family: var(--display); font-size: 20px; font-weight: 800; }
.tc-ini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); transform-origin: 50% 30%; }
.tc-pin { position: absolute; right: -3px; bottom: -1px; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(10, 22, 51, .22); }
.tc-pin svg { width: 12px; height: 16px; }
.tc-who b { display: block; font-family: var(--display); font-size: 19px; font-weight: 800; line-height: 1.2; color: var(--ink); }
.tc-who small { display: block; margin-top: 2px; color: var(--muted); font-size: 14px; }
.tc-qm { align-self: flex-start; margin-left: auto; font-size: 34px; background: linear-gradient(135deg, var(--a2), var(--a)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.tc-q { position: relative; margin: 20px 0 0; color: var(--ink-2); font-size: 17px; line-height: 1.72; }
.tc-q mark { padding: 0 2px; color: var(--ink); font-weight: 600; background: linear-gradient(180deg, transparent 58%, color-mix(in srgb, var(--a) 24%, transparent) 58%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.tc-foot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--a) 6%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a) 16%, transparent); }
.tc-tags { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tc-tags li { display: flex; align-items: center; gap: 8px; color: #0B7E61; font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.tc-tags i { color: #16C784; font-size: 15px; }

/* mini visuals (code-built, no figures) */
.tc-viz { flex: none; width: 140px; }
.vz-lbl { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.viz-growth svg { display: block; width: 100%; height: 44px; }
.vz-area { fill: color-mix(in srgb, var(--a) 18%, transparent); }
.vz-line { fill: none; stroke: var(--a); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.vz-dot { fill: var(--a); }
.viz-check { display: flex; flex-direction: column; gap: 5px; }
.viz-check span { display: flex; align-items: center; gap: 7px; padding: 4px 8px; border-radius: 8px; background: #fff; box-shadow: 0 4px 10px -6px rgba(10, 22, 51, .3); color: var(--ink); font-size: 11.5px; font-weight: 700; }
.viz-check i { display: grid; place-items: center; width: 15px; height: 15px; flex: none; border-radius: 50%; background: var(--a); color: #fff; font-size: 8px; }
.viz-link { display: flex; flex-direction: column; align-items: center; }
.vl-row { display: flex; align-items: center; gap: 6px; }
.vl-row > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; box-shadow: 0 6px 14px -8px rgba(10, 22, 51, .35); color: var(--a); font-size: 16px; }
.vl-row > span:last-child { background: linear-gradient(135deg, var(--a2), var(--a)); color: #fff; }
.vl-row > i { color: var(--a); font-size: 13px; }
.viz-link .vz-lbl { margin: 7px 0 0; }
.viz-bars .vb { display: flex; align-items: flex-end; gap: 6px; height: 46px; }
.viz-bars .vb i { flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; background: color-mix(in srgb, var(--a) 30%, #fff); }
.viz-bars .vb i:last-child { background: linear-gradient(180deg, var(--gold), #FF9F1C); box-shadow: 0 6px 12px -6px rgba(255, 160, 30, .8); }

@media (min-width: 1300px) {
    .deco { display: block; }
    .st-grid { max-width: 1000px; }
}
@media (max-width: 1439.98px) {
    .rv { scale: .88; }
    .d3 { scale: .8; }
    .rv-g { display: none; }
}
@media (max-width: 991.98px) {
    .st-quote { padding: 0 40px; }
    .st-grid { flex-direction: column; align-items: stretch; max-width: 620px; }
    .st-col { display: contents; }
    .st-grid { gap: 28px; }
}
@media (max-width: 767.98px) {
    .stories { padding: 64px 0 80px; }
    .st-quote { padding: 34px 0 0; }
    .st-quote p { font-size: 17px; text-wrap: pretty; }
    .sq { font-size: 32px; }
    .sq-l { left: 50%; top: 0; transform: translateX(-50%); }
    .sq-r { display: none; }
    .st-rule { margin-top: 34px; }
    .st-sub { font-size: 16.5px; }
    .st-grid { margin-top: 48px; }
    .tcard { padding: 24px 20px 20px; border-radius: 20px; }
    .tc-q { font-size: 16px; }
    .tc-foot { flex-direction: column; align-items: stretch; }
    .tc-viz { width: 100%; }
    .viz-bars, .viz-growth { max-width: 240px; }
    .viz-check { flex-direction: row; flex-wrap: wrap; }
    .st-spark { display: none; }
    .st-qm { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .js .reveal { opacity: 1; transform: none; transition: none; }
    .rv, .d3, .st-spark { animation: none; }
}

/* ==========================================================
   SECTION 3 — WHY LOCAL CHANGES EVERYTHING (light, editorial, guided by arrows)
   ========================================================== */
.local { position: relative; z-index: 3; isolation: isolate; overflow-x: clip; padding: 90px 0 120px; color: var(--ink); }
/* slightly darker light tone rising as a soft curve out of the testimonials */
.lc-dome { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, #E4EAF3 0%, #EAEFF6 40%, #EEF2F8 100%); }
/* small-town rooftop silhouette rising out of the testimonials */
.lc-edge { position: absolute; left: 0; right: 0; top: -94px; z-index: -1; height: 96px; background: url(../images/town-edge.svg) 0 100% / 1200px 96px repeat-x; pointer-events: none; }
/* faded town illustration behind the intro, clear behind the copy */
.lc-town { position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 860px; object-fit: cover; object-position: center 70%; opacity: .34; pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 42%, #000 80%), linear-gradient(#000 25%, transparent 85%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(90deg, transparent 42%, #000 80%), linear-gradient(#000 25%, transparent 85%);
            mask-composite: intersect; }
/* local people peeking in from the edges (desktop) */
.lc-person { position: absolute; z-index: 0; display: none; width: clamp(300px, 25vw, 440px); height: auto; pointer-events: none;
    -webkit-mask-image: linear-gradient(#000 74%, transparent 98%);
            mask-image: linear-gradient(#000 74%, transparent 98%); }
.lc-p-left { left: -9vw; top: 980px; }
.lc-p-right { right: -9vw; top: 1860px; }
@media (min-width: 1380px) { .lc-person { display: block; } }
.lc-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
    background:
        radial-gradient(ellipse 30% 18% at 96% 8%, rgba(255, 196, 60, .18), transparent 70%),
        radial-gradient(ellipse 28% 20% at 2% 40%, rgba(18, 201, 166, .12), transparent 70%),
        radial-gradient(ellipse 30% 20% at 98% 72%, rgba(244, 63, 94, .08), transparent 70%); }
.lc-bg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(10, 22, 51, .09) 1.2px, transparent 1.7px) 0 0 / 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 24% 30% at 0% 8%, #000, transparent 70%), radial-gradient(ellipse 24% 30% at 100% 50%, #000, transparent 70%);
            mask-image: radial-gradient(ellipse 24% 30% at 0% 8%, #000, transparent 70%), radial-gradient(ellipse 24% 30% at 100% 50%, #000, transparent 70%); }

/* ---------- intro: copy + zoom graphic ---------- */
.lc-intro { display: grid; grid-template-columns: 1fr 1.02fr; align-items: center; gap: 56px; max-width: 1200px; margin: 0 auto; }
.lc-title { margin: 0; font-family: var(--display); font-size: clamp(38px, 4.5vw, 64px); font-weight: 800; line-height: 1.06; letter-spacing: -.035em; color: var(--ink); }
.lc-local { display: inline-block; padding: .02em .16em .05em; border-radius: .16em; background: #FFD84D; color: var(--ink); rotate: -2deg; box-shadow: 0 14px 28px -14px rgba(200, 140, 0, .75), inset 0 -3px 0 rgba(0, 0, 0, .08); }
.lc-local svg { width: .54em; height: .74em; margin: 0 .01em; vertical-align: -.07em; }
.lc-sub { margin: 28px 0 26px; color: #5A6785; font-family: var(--display); font-size: clamp(20px, 1.9vw, 25px); font-weight: 700; line-height: 1.38; letter-spacing: -.015em; }
.lc-sub b { display: block; color: var(--ink); font-weight: 800; }
.lc-swoosh { padding-bottom: .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14C80 5 170 3 297 10' stroke='%23F59E0B' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% .3em no-repeat; }
.lc-copy p { margin: 0 0 12px; color: #3C4A6B; font-size: 18.5px; line-height: 1.7; }
.lc-copy strong { color: var(--ink); font-weight: 700; }
.lc-copy mark { padding: 0 .12em; color: var(--ink); font-weight: 800; background: linear-gradient(180deg, transparent 52%, #FFE066 52%); }
.lc-copy .lc-diff { margin: 22px 0 10px; color: var(--ink); font-family: var(--display); font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.lc-checks { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.lc-checks li { display: flex; align-items: center; gap: 11px; color: var(--ink); font-size: 18px; font-weight: 600; }
.lc-checks i { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: #12C9A6; color: #fff; font-size: 11px; box-shadow: 0 6px 12px -6px rgba(18, 201, 166, .9); }

.lc-art { position: relative; }
.lc-photo { display: block; width: 108%; max-width: none; height: auto; margin: 0 -4%; border-radius: 28px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
            mask-composite: intersect; }


/* ---------- five reasons: soft white cards, illustration + strong copy ---------- */
.why-path { position: relative; z-index: 1; max-width: 1040px; margin: 90px auto 0; }
.wp-row { position: relative; display: grid; grid-template-columns: 330px 1fr; align-items: center; gap: 40px; overflow: hidden; padding: 24px 44px 24px 24px; border-radius: 28px; background: #fff; box-shadow: 0 30px 60px -40px rgba(10, 22, 51, .45), 0 0 0 1px rgba(10, 22, 51, .06); }
.wp-row::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 5px; border-radius: 0 5px 5px 0; background: var(--a); }
.wp-flip { grid-template-columns: 1fr 330px; padding: 24px 24px 24px 44px; }
.wp-flip::before { left: auto; right: 0; border-radius: 5px 0 0 5px; }
.wp-flip .wp-vis { order: 2; }
.wp-row + .wp-row { margin-top: 24px; }
.wp-vis { display: flex; align-items: center; justify-content: center; height: 224px; border-radius: 20px; background: radial-gradient(ellipse 62% 62% at 50% 56%, color-mix(in srgb, var(--a) 17%, #fff), color-mix(in srgb, var(--a) 5%, #fff) 72%); }
.wp-vis img { display: block; width: auto; height: auto; max-width: 100%; max-height: 208px; filter: drop-shadow(0 16px 16px rgba(10, 22, 51, .12)); }
.wp-head { display: flex; align-items: center; gap: 14px; }
.wp-no { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; background: linear-gradient(135deg, color-mix(in srgb, var(--a) 65%, #fff), var(--a)); color: #fff; font-family: var(--display); font-size: 17px; font-weight: 800; box-shadow: 0 10px 20px -10px var(--a), inset 0 1px 0 rgba(255, 255, 255, .35); }
.wp-text h3 { margin: 0; color: var(--ink); font-family: var(--display); font-size: clamp(22px, 2.2vw, 29px); font-weight: 800; line-height: 1.18; letter-spacing: -.02em; }
.wp-text p { max-width: 560px; margin: 14px 0 0; color: #3C4A6B; font-size: 18px; line-height: 1.68; }
.wp-text strong { color: var(--ink); font-weight: 700; background: linear-gradient(180deg, transparent 58%, color-mix(in srgb, var(--a) 26%, transparent) 58%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (max-width: 991.98px) {
    .why-path { max-width: 640px; margin-top: 60px; }
    .wp-row, .wp-flip { grid-template-columns: 1fr; gap: 18px; padding: 20px 20px 26px; }
    .wp-flip .wp-vis { order: 0; }
    .wp-row::before, .wp-flip::before { left: 24px; right: 24px; top: 0; bottom: auto; width: auto; height: 5px; border-radius: 0 0 5px 5px; }
    .wp-vis { height: 200px; }
    .wp-vis img { max-height: 186px; }
}
@media (max-width: 575.98px) {
    .wp-vis { height: 170px; }
    .wp-vis img { max-height: 156px; }
    .wp-no { width: 40px; height: 40px; font-size: 15px; }
    .wp-text p { font-size: 17px; }
}

/* ---------- local businesses need this audience ---------- */
.need-wrap { position: relative; z-index: 1; isolation: isolate; max-width: 1180px; margin: 110px auto 0; }
.need-wrap::before { content: ""; position: absolute; inset: 22px -16px -22px 16px; z-index: -2; border-radius: 40px; background: linear-gradient(160deg, #CFE0FF, #A8C6FF); opacity: .6; rotate: 1.6deg; }
.need-peek { position: absolute; z-index: -1; height: auto; filter: drop-shadow(0 20px 22px rgba(10, 22, 51, .25)); animation: floaty 8s ease-in-out infinite; }
.np-pin { left: -62px; top: -74px; width: 140px; rotate: -14deg; }
.np-mega { right: -84px; top: -62px; width: 190px; rotate: 10deg; animation-delay: -3s; }
.np-coins { right: -60px; bottom: -66px; width: 160px; rotate: -8deg; animation-delay: -5s; }
.lc-need { position: relative; z-index: 1; isolation: isolate; overflow: hidden; padding: 76px 48px 56px; border-radius: 40px; color: #fff; text-align: center; background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(140, 214, 255, .45), transparent 70%), radial-gradient(ellipse 40% 30% at 100% 100%, rgba(255, 216, 77, .14), transparent 70%), linear-gradient(160deg, #2A5FE0 0%, #1E4CC4 45%, #183FA6 100%); box-shadow: 0 50px 90px -40px rgba(20, 60, 170, .6), inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 0 0 1px rgba(255, 255, 255, .12); }
.lc-need::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(rgba(255, 255, 255, .16) 1.2px, transparent 1.6px) 0 0 / 22px 22px; -webkit-mask-image: linear-gradient(#000, transparent 35%, transparent 70%, #000); mask-image: linear-gradient(#000, transparent 35%, transparent 70%, #000); pointer-events: none; }
.need-title { margin: 0; color: #fff; font-family: var(--display); font-size: clamp(30px, 3.6vw, 50px); font-weight: 800; line-height: 1.18; letter-spacing: -.03em; }
.lc-yel { display: inline-block; padding: 0 .16em .04em; border-radius: .16em; background: #FFD84D; color: var(--ink); rotate: -2deg; box-shadow: 0 12px 24px -12px rgba(200, 140, 0, .7); }
.need-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 940px; margin: 40px auto 0; }
.need-card { display: flex; align-items: center; gap: 18px; padding: 22px 26px; border-radius: 22px; background: rgba(255, 255, 255, .12); text-align: left; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 24px 40px -26px rgba(10, 30, 90, .6); }
.nc-ic { display: grid; place-items: center; width: 62px; height: 62px; flex: none; border-radius: 18px; background: linear-gradient(135deg, var(--a2), var(--a)); color: #fff; font-size: 24px; box-shadow: 0 14px 26px -12px var(--a), inset 0 1px 0 rgba(255, 255, 255, .35); }
.nc-ic img { width: 100%; height: 100%; object-fit: contain; }
.nc-ic img + i { display: none; }
.nc-ic:has(img) { width: 88px; height: 88px; margin: -10px -4px; background: none; box-shadow: none; filter: drop-shadow(0 12px 14px rgba(10, 30, 90, .35)); }
.need-card p { margin: 0; color: #DCE6FA; font-size: 18px; font-weight: 600; line-height: 1.45; }
.need-card s { display: block; margin-top: 2px; color: #fff; font-family: var(--display); font-size: 20px; font-weight: 800; letter-spacing: -.015em; text-decoration-color: #FF4D6A; text-decoration-thickness: 3px; }
.need-line { margin: 38px 0 0; color: #fff; font-family: var(--display); font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.02em; }
.need-line mark { padding: 0 .18em .04em; border-radius: 8px; color: var(--ink); background: #FFD84D; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.dual { display: grid; grid-template-columns: 1fr 72px 1fr; margin-top: 50px; }
.dual-card { display: flex; flex-direction: column; margin: 0; padding: 16px 16px 24px; border-radius: 26px; }
.dual-nat { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.dual-loc { background: #0A1633; box-shadow: 0 0 0 1.5px rgba(127, 227, 255, .6), 0 30px 70px -26px rgba(5, 15, 50, .75), 0 0 60px -16px rgba(25, 211, 255, .5); }
.dual-map { position: relative; overflow: hidden; border-radius: 18px; aspect-ratio: 600 / 328; }
.dual-nat .dual-map { background: #11275F; }
.dual-loc .dual-map { background: #050C22; }
.dual-map img { display: block; width: 100%; height: 100%; }
.dm-pin { position: absolute; left: 50%; top: 50%; width: 30px; height: 40px; transform: translate(-50%, -88%); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
.dm-pin svg { display: block; width: 100%; height: 100%; }
.dm-pin::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 46px; height: 14px; border-radius: 50%; border: 2px solid rgba(25, 211, 255, .75); animation: pinPulse 2.4s ease-out infinite; }
.dual-card figcaption { margin-top: 18px; text-align: center; }
.dual-card figcaption b { display: block; font-family: var(--display); font-size: clamp(20px, 1.85vw, 26px); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.dual-card figcaption span { display: block; margin-top: 6px; font-size: 17px; font-weight: 600; }
.dual-nat b { color: #C6D4F5; }
.dual-nat span { color: #A7B9E4; }
.dual-loc b { color: #fff; }
.dual-loc b em { color: #FFD84D; font-style: normal; }
.dual-loc span { color: #7FE3FF; }
.dual-arrow { z-index: 1; display: grid; place-items: center; align-self: center; justify-self: center; width: 56px; height: 56px; border-radius: 50%; background: #FFD84D; color: var(--ink); font-size: 20px; box-shadow: 0 0 0 8px rgba(255, 216, 77, .25), 0 12px 24px -10px rgba(200, 140, 0, .7); }

@media (max-width: 1199.98px) {
    .lc-intro { gap: 36px; }
}
@media (max-width: 991.98px) {
    .lc-intro { grid-template-columns: 1fr; max-width: 680px; }
    .need-cards, .dual { grid-template-columns: 1fr; }
    .dual-arrow { margin: -10px auto; rotate: 90deg; }
}
@media (max-width: 767.98px) {
    .local { padding: 54px 0 80px; }
    .lc-edge { top: -62px; height: 64px; background-size: 800px 64px; }
    .lc-copy p, .wp-text p { font-size: 17px; }
    .lc-checks li { font-size: 16.5px; }
    .lc-need { padding: 48px 18px 28px; border-radius: 28px; }
    .need-wrap { margin-top: 80px; }
    .need-wrap::before { inset: 14px -8px -14px 8px; border-radius: 28px; }
    .need-card { padding: 20px; }
    .need-card s { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
    .dm-pin::after { animation: none; }
}


@media (max-width: 1299.98px) { .need-peek { display: none; } }
/* ==========================================================
   SECTION 4 — THAT'S THE LOCAL ADVANTAGE (golden-hour main street + offer)
   ========================================================== */
.adv { position: relative; z-index: 2; isolation: isolate; overflow: hidden; padding: 78px 0 180px; }
/* warm sunset fallback; the photo sits on top once it exists. Top matches section 3 so there is no seam */
.adv-bg { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, #EEF2F8 0%, #F6EDE4 18%, #F2D2B4 40%, #C98E73 60%, #4B3552 80%, #17182F 100%); }
.adv-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 22%); }
.adv-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, transparent 42%, rgba(20, 14, 34, .5) 68%, rgba(13, 12, 30, .88) 100%); }

.adv-title { max-width: 900px; margin: 0 auto; color: var(--ink); font-family: var(--display); font-size: clamp(40px, 5vw, 72px); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; text-align: center; }
.adv-mark { display: inline-block; padding: 0 .16em .05em; border-radius: .16em; background: #FFD84D; rotate: -1.5deg; box-shadow: 0 16px 30px -14px rgba(200, 140, 0, .7); }

/* six advantages: 3 + 2 + wide payoff tile */
.adv-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; max-width: 1080px; margin: 56px auto 0; }
.adv-item { display: flex; grid-column: span 2; align-items: center; gap: 16px; padding: 16px 22px 16px 16px; border-radius: 22px; background: rgba(255, 255, 255, .97); box-shadow: 0 26px 50px -30px rgba(60, 30, 20, .55), 0 0 0 1px rgba(255, 255, 255, .7); }
.adv-item:nth-child(4), .adv-item:nth-child(5) { grid-column: span 3; }
.adv-ic { position: relative; display: grid; place-items: center; width: 74px; height: 74px; flex: none; border-radius: 20px; background: color-mix(in srgb, var(--a) 15%, #fff); color: var(--a); font-size: 26px; }
.adv-ic img { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); object-fit: contain; filter: drop-shadow(0 10px 12px rgba(40, 20, 20, .2)); }
.adv-ic img + i { display: none; }
.adv-ic:has(img) { background: none; }
.adv-item p { margin: 0; color: var(--ink); font-family: var(--display); font-size: 20px; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; }
.adv-wide { grid-column: 1 / -1 !important; justify-content: center; padding: 18px 28px; background: linear-gradient(135deg, #FFF7DA, #FFE7A1); box-shadow: 0 30px 60px -30px rgba(120, 70, 0, .6), inset 0 0 0 1.5px rgba(245, 158, 11, .55); }
.adv-wide p { font-size: clamp(20px, 2vw, 25px); }
.adv-wide p span { background: linear-gradient(180deg, transparent 58%, rgba(245, 158, 11, .45) 58%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }


/* offer reuses the first-fold .offer card */
.offer-adv { margin-top: 110px; }
.offer-adv .bb-main { font-size: 20px; }
/* warm variant of the fold offer card so it melts into the golden-hour photo */
.offer-adv { background: linear-gradient(160deg, rgba(74, 42, 58, .96) 0%, rgba(46, 27, 42, .96) 55%, rgba(30, 19, 32, .97) 100%) padding-box, linear-gradient(135deg, #FFE29A, #F59E0B 38%, rgba(245, 158, 11, .18) 70%, #FFD84D) border-box; box-shadow: 0 50px 90px -40px rgba(20, 8, 10, .75), 0 0 80px -20px rgba(255, 170, 70, .45); }
.offer-adv .offer-box::before { background: radial-gradient(closest-side, rgba(255, 190, 90, .45), transparent); }
.offer-adv .p-old { color: #CDB7B4; }
.offer-adv .p-new { text-shadow: 0 0 40px rgba(255, 180, 80, .45); }
.offer-adv .p-new sup { color: #FFD84D; }
.offer-adv .offer-pts { color: #F3E6E0; }
.offer-adv .offer-pts i { color: #FFD84D; }
.offer-adv .trust { border-top-color: rgba(255, 220, 180, .18); }
.offer-adv .pay { color: #EADBD3; }
.bb-main .nw { white-space: nowrap; }

@media (max-width: 991.98px) {
    .adv-grid { grid-template-columns: 1fr 1fr; max-width: 640px; }
    .adv-item, .adv-item:nth-child(4), .adv-item:nth-child(5) { grid-column: span 1; }
}
@media (max-width: 575.98px) {
    .adv { padding: 48px 0 100px; }
    .adv-grid { grid-template-columns: 1fr; gap: 12px; }
    .adv-item { padding: 12px 16px 12px 12px; }
    .adv-ic { width: 60px; height: 60px; font-size: 22px; }
    .adv-item p { font-size: 18px; }
    .adv-wide { justify-content: flex-start; }
}

/* ==========================================================
   SECTION 5 — WHY LOCAL MEDIA EMPIRES BECOME SO VALUABLE (warm light: proof + formula)
   ========================================================== */
.val { position: relative; z-index: 3; isolation: isolate; overflow-x: clip; padding: 28px 0 44px; color: var(--ink); }
/* dawn-glow curve rising out of the sunset street above */
.val-horizon { position: absolute; left: -12%; right: -12%; top: -112px; z-index: -1; height: 240px; border-radius: 50% 50% 0 0 / 112px 112px 0 0; background: linear-gradient(180deg, #FFE9D2 0%, #FFF3E6 50%, rgba(255, 246, 237, 0) 100%); box-shadow: 0 -2px 0 rgba(255, 214, 150, .9); filter: drop-shadow(0 -22px 30px rgba(255, 170, 70, .5)); }
.val-bg { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, #FFF3E6 0%, #FFF8F1 6%, #FBF6F0 35%, #F8F6F3 70%, #F5F7FB 100%); }
.val-edge { position: absolute; z-index: 0; display: none; height: auto; pointer-events: none; filter: drop-shadow(0 24px 24px rgba(90, 45, 10, .2)); animation: floaty 8s ease-in-out infinite; }
.ve-left { left: 4%; top: 68px; width: 160px; rotate: -10deg; }
.ve-right { right: 4%; top: 48px; width: 190px; rotate: 12deg; animation-delay: -3s; }

/* ---------- header ---------- */
.val-head { position: relative; z-index: 1; max-width: 940px; margin: 0 auto; text-align: center; }
.val-title { margin: 0; color: var(--ink); font-family: var(--display); font-size: clamp(36px, 4.6vw, 64px); font-weight: 800; line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; }
.val-swoosh { padding-bottom: .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14C80 5 170 3 297 10' stroke='%23F59E0B' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% .28em no-repeat; }
.val-sub { max-width: 760px; margin: 22px auto 0; color: #6E5D52; font-family: var(--display); font-size: clamp(19px, 1.9vw, 24px); font-weight: 700; line-height: 1.4; letter-spacing: -.01em; }
.val-sub b { color: var(--ink); font-weight: 800; }
.val-intro { max-width: 780px; margin: 30px auto 0; color: #4A4F63; font-size: 19.5px; line-height: 1.7; }
.val-rent { color: #C2410C; font-weight: 700; }
.val-own { max-width: 840px; margin: 16px auto 0; color: var(--ink); font-family: var(--display); font-size: clamp(22px, 2.4vw, 32px); font-weight: 800; line-height: 1.3; letter-spacing: -.02em; }
.val-own mark { padding: 0 .12em; color: var(--ink); background: linear-gradient(180deg, transparent 52%, #FFD84D 52%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- proof: featured case + 3x2 grid, big photos ---------- */
.val-proof { position: relative; z-index: 1; max-width: 1140px; margin: 72px auto 0; }
.case { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; background: #fff; box-shadow: 0 30px 60px -38px rgba(70, 35, 10, .45), 0 0 0 1px rgba(70, 35, 10, .06); }
.case-img { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: linear-gradient(140deg, color-mix(in srgb, var(--a) 28%, #fff), color-mix(in srgb, var(--a) 65%, #0A1633)); }
.case-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-img::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(12, 10, 26, .5)); pointer-events: none; }
.case-ph { position: absolute; left: 50%; top: 50%; color: rgba(255, 255, 255, .55); font-size: 60px; transform: translate(-50%, -50%); }
.case-lbl { position: absolute; z-index: 1; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.case-lbl::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #12C9A6; }
.case-lbl-nl::before { background: #1683FF; }
.case-stat { position: absolute; z-index: 1; left: 14px; bottom: 14px; padding: 8px 14px; border-radius: 12px; background: #FFD84D; color: var(--ink); font-family: var(--display); font-size: 18px; font-weight: 800; letter-spacing: -.01em; box-shadow: 0 12px 22px -10px rgba(0, 0, 0, .55); }
.case-body { padding: 20px 22px 24px; }
.case-body h3 { margin: 0; color: var(--ink); font-family: var(--display); font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.case-body p { margin: 8px 0 0; color: #4A4F63; font-size: 16px; line-height: 1.6; }
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 22px; }
.case-feat { flex-direction: row; align-items: stretch; }
.case-feat .case-img { flex: 0 0 52%; min-height: 340px; aspect-ratio: auto; }
.case-feat .case-img::after { display: none; }
.case-feat .case-body { display: flex; flex: 1; flex-direction: column; justify-content: center; padding: 34px 38px; }
.case-feat h3 { font-size: 30px; }
.case-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.case-stats div { padding: 14px 10px 12px; border-radius: 14px; background: #FFF7E6; text-align: center; box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .28); }
.case-stats b { display: block; color: var(--ink); font-family: var(--display); font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.case-stats small { display: block; margin-top: 7px; color: #8A6A3A; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.case-feat p { margin-top: 18px; font-size: 17px; }

/* ---------- the formula ---------- */
.formula { position: relative; z-index: 1; max-width: 1140px; margin: 90px auto 0; padding: 40px 44px 30px; border-radius: 32px; background: #fff; text-align: center; box-shadow: 0 40px 80px -46px rgba(70, 35, 10, .42), 0 0 0 1px rgba(70, 35, 10, .06); }
.fm-title { margin: 0; color: var(--ink); font-family: var(--display); font-size: clamp(20px, 2vw, 26px); font-weight: 800; letter-spacing: -.015em; }
.fm-flow { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; margin: 32px 0 0; padding: 0; list-style: none; }
.fm-flow > li { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 12px; }
.fm-flow > li.fm-arr { flex: 0 0 auto; padding-top: 34px; color: #C4CCDA; font-size: 26px; }
.fm-ic { position: relative; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, color-mix(in srgb, var(--a) 18%, #fff)); color: var(--a); font-size: 34px; box-shadow: 0 16px 30px -16px color-mix(in srgb, var(--a) 70%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--a) 26%, transparent); }
.fm-ic img { width: 76%; height: 76%; object-fit: contain; }
.fm-ic img + i { display: none; }
.fm-flow b { max-width: 150px; color: var(--ink); font-family: var(--display); font-size: 17px; font-weight: 800; line-height: 1.25; }
.fm-repeat .fm-ic i { animation: fmSpin 6s linear infinite; }
.fm-asset .fm-ic { width: 118px; height: 118px; margin-top: -11px; background: radial-gradient(circle at 35% 30%, #FFF6D6, #FFD84D 70%, #F59E0B); color: #7A4A00; box-shadow: 0 0 0 7px rgba(255, 216, 77, .3), 0 22px 36px -14px rgba(245, 158, 11, .85); }
.fm-asset b { color: #B45309; font-size: 19px; }
.fm-loop { position: relative; height: 44px; margin: 8px 25% 0 6%; border: 2.5px solid #CDBDF5; border-top: 0; border-radius: 0 0 44px 44px; }
.fm-loop::before { content: ""; position: absolute; left: -9px; top: -6px; border: 8px solid transparent; border-bottom: 11px solid #B9A2F2; border-top: 0; }
.fm-loop span { position: absolute; left: 50%; bottom: -15px; padding: 0 12px; background: #fff; color: #8B5CF6; font-family: 'Caveat', cursive; font-size: 24px; font-weight: 700; line-height: 1; white-space: nowrap; transform: translateX(-50%); }

/* ---------- plain paragraphs ---------- */
.val-copy { position: relative; z-index: 1; max-width: 800px; margin: 84px auto 0; text-align: center; }
.val-copy p { margin: 0 0 22px; color: #4A4F63; font-size: 19.5px; line-height: 1.7; }
.val-copy b { color: var(--ink); font-weight: 700; }
.vc-every span { display: block; }
.vc-every span + span { margin-top: 6px; }
.val-copy .vc-power { margin: 40px 0 0; color: var(--ink); font-family: var(--display); font-size: clamp(24px, 2.8vw, 36px); font-weight: 800; line-height: 1.3; letter-spacing: -.02em; }
.vc-power mark { padding: 0 .14em .04em; border-radius: 8px; color: var(--ink); background: #FFD84D; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- until now -> AI ---------- */
.val-until { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 50px; max-width: 1080px; margin: 96px auto 0; }
.val-until:not(:has(.vu-img)) { grid-template-columns: 1fr; max-width: 820px; text-align: center; }
.vu-text p { margin: 0; color: #4A4F63; font-family: var(--display); font-size: clamp(22px, 2.3vw, 30px); font-weight: 700; line-height: 1.42; letter-spacing: -.015em; }
.vu-text b { color: var(--ink); font-weight: 800; }
.vu-img img { display: block; width: 100%; height: auto; border-radius: 26px; filter: sepia(.3) saturate(.85);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
            mask-composite: intersect; }
.val-ai { position: relative; margin: 64px auto 0; color: var(--ink); font-family: var(--display); font-size: clamp(32px, 4.2vw, 58px); font-weight: 800; line-height: 1.15; letter-spacing: -.035em; text-align: center; }
.val-ai span { background: linear-gradient(100deg, #0A4DFF, #19D3FF 55%, #8B5CF6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.va-spark { display: inline-block; width: .5em; height: .5em; margin-left: .15em; vertical-align: .6em; fill: #F59E0B; animation: twinkle 2.6s ease-in-out infinite; }

/* lower part: paragraphs + before/after box, local people on the edges (desktop) */
.val-lower { position: relative; }
.vd-person { position: absolute; top: 40px; z-index: 0; display: none; width: clamp(280px, 24vw, 420px); height: auto; pointer-events: none; -webkit-mask-image: linear-gradient(#000 72%, transparent 97%); mask-image: linear-gradient(#000 72%, transparent 97%); }
.vd-left { left: -6vw; }
.vd-right { right: -6vw; }
@media (min-width: 1300px) { .vd-person { display: block; } }
/* before/after box: old-paper "until now" panel + blue AI band */
.val-shift { position: relative; z-index: 1; max-width: 1140px; margin: 96px auto 0; overflow: hidden; border-radius: 32px; background: linear-gradient(160deg, #F7EFE2, #F1E6D4); box-shadow: 0 40px 80px -46px rgba(70, 35, 10, .45), 0 0 0 1px rgba(70, 35, 10, .08); }
.val-shift::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(120, 80, 30, .1) 1.1px, transparent 1.5px) 0 0 / 16px 16px; -webkit-mask-image: radial-gradient(ellipse 40% 60% at 0% 0%, #000, transparent 70%); mask-image: radial-gradient(ellipse 40% 60% at 0% 0%, #000, transparent 70%); pointer-events: none; }
.val-shift .val-until { max-width: none; margin: 0; padding: 44px 44px 40px 52px; gap: 44px; }
.val-shift .vu-text p { color: #5B4A3A; }
.val-shift .vu-text b { color: #2A1E14; }
.val-shift .val-ai { margin: 0; padding: 40px 30px 44px; color: #FFF6E8; font-size: clamp(28px, 3.6vw, 50px); background: radial-gradient(ellipse 50% 90% at 50% 0%, rgba(255, 200, 120, .22), transparent 70%), linear-gradient(120deg, #3A2417 0%, #54351F 50%, #6E4726 100%); box-shadow: inset 0 1px 0 rgba(255, 230, 190, .18); }
.val-shift .val-ai span { background: linear-gradient(100deg, #FFE7A3, #FFC93C 55%, #FFB23C); -webkit-background-clip: text; background-clip: text; color: transparent; }
.val-shift .va-spark { fill: #FFD84D; }
@media (min-width: 1300px) { .val-edge { display: block; } }
@media (max-width: 1199.98px) {
    .case-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 991.98px) {
    .case-feat { flex-direction: column; }
    .case-feat .case-img { flex: none; min-height: 0; aspect-ratio: 16 / 10; }
    .case-feat .case-body { padding: 24px 22px 26px; }
    /* the formula reads as a stacked list of rows on narrow screens */
    .fm-flow { flex-direction: column; align-items: center; gap: 0; }
    .fm-flow > li { flex: none; flex-direction: row; align-items: center; justify-content: flex-start; gap: 18px; width: 100%; max-width: 340px; }
    .fm-ic { width: 66px; height: 66px; font-size: 26px; }
    .fm-flow b { flex: 1; max-width: none; font-size: 18px; text-align: left; }
    .fm-flow > li.fm-arr { height: 24px; padding: 0; color: #CBD3E1; font-size: 15px; transform: none; }
    .fm-flow > li.fm-arr i { display: block; width: 66px; text-align: center; transform: rotate(90deg); }
    .fm-asset .fm-ic { width: 78px; height: 78px; margin-top: 0; margin-left: -6px; box-shadow: 0 0 0 6px rgba(255, 216, 77, .3), 0 18px 30px -14px rgba(245, 158, 11, .85); }
    .fm-asset b { font-size: 19px; }
    .fm-loop { display: none; }
    .val-until { grid-template-columns: 1fr; gap: 26px; text-align: center; }
    .val-shift .val-until { padding: 32px 22px 28px; }
}
@media (max-width: 767.98px) {
    .val { padding: 44px 0 36px; }
    .val-horizon { border-radius: 50% 50% 0 0 / 56px 56px 0 0; top: -70px; }
    .val-intro, .val-copy p { font-size: 17px; }
    .case-grid { grid-template-columns: 1fr; }
    .case-img, .case-feat .case-img { aspect-ratio: 16 / 9; }
    .case-feat h3 { font-size: 24px; }
    .case-stats b { font-size: 22px; }
    .formula { padding: 30px 18px 26px; }
}
@media (prefers-reduced-motion: reduce) {
    .val-edge, .fm-repeat .fm-ic i, .va-spark { animation: none; }
}
@keyframes fmSpin { to { transform: rotate(360deg); } }

/* ==========================================================
   SECTION 6 — INTRODUCING (spotlit product stage, warm gold on night)
   ========================================================== */
.intro { position: relative; z-index: 2; isolation: isolate; overflow: hidden; padding: 176px 0 140px; background: linear-gradient(180deg, #F5F7FB 50%, #EEF3FB 50%); color: #fff; }

/* dark stage rising as a dome out of the light section, lit by warm spotlights */
.intro-bg { position: absolute; top: 100px; bottom: 0; left: -12%; right: -12%; z-index: -1; overflow: hidden; border-top: 1px solid rgba(255, 205, 130, .6); border-radius: 50% 50% 50% 50% / 130px 130px 110px 110px;
    background: radial-gradient(ellipse 44% 32% at 50% 0%, rgba(255, 184, 96, .26), transparent 70%), linear-gradient(180deg, #0E1C44 0%, #070F28 42%, #040917 100%);
    box-shadow: 0 -18px 60px -10px rgba(255, 170, 70, .38); }
.beam { position: absolute; top: -60px; width: 440px; height: 1250px; background: linear-gradient(180deg, rgba(255, 228, 176, .34), rgba(255, 170, 70, .09) 55%, transparent 80%); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); filter: blur(18px); transform-origin: 50% 0;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%); mask-image: linear-gradient(180deg, transparent 0, #000 22%); }
.beam.b-l { left: 20%; rotate: -22deg; }
.beam.b-r { right: 20%; rotate: 22deg; }
/* big animated arrow dropping from the section above into the stage */
.intro-arrow { position: absolute; left: 50%; top: 4px; z-index: 2; width: 92px; margin-left: -46px; pointer-events: none; animation: arrowDrop 1.5s ease-in-out infinite; }
.intro-arrow svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 14px 14px rgba(150, 70, 0, .32)); }
@keyframes arrowDrop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .intro-arrow { animation: none; } }
.stage-floor { position: absolute; left: 50%; bottom: -60px; width: 2400px; height: 640px; margin-left: -1200px; transform: perspective(700px) rotateX(64deg); transform-origin: 50% 100%;
    background-image: linear-gradient(rgba(255, 196, 120, .26) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 196, 120, .26) 1px, transparent 1px); background-size: 70px 70px;
    -webkit-mask-image: radial-gradient(ellipse 45% 80% at 50% 100%, #000 10%, transparent 70%);
            mask-image: radial-gradient(ellipse 45% 80% at 50% 100%, #000 10%, transparent 70%); }
/* gold + white dust over the stage */
.intro-bg::after { content: ""; position: absolute; inset: 0;
    background-image:
        radial-gradient(2px 2px at 8% 30%, rgba(255, 214, 140, .8), transparent),
        radial-gradient(1.5px 1.5px at 18% 62%, rgba(255, 255, 255, .6), transparent),
        radial-gradient(2px 2px at 30% 18%, rgba(255, 214, 140, .7), transparent),
        radial-gradient(1.5px 1.5px at 44% 72%, rgba(255, 255, 255, .5), transparent),
        radial-gradient(2px 2px at 58% 26%, rgba(255, 214, 140, .7), transparent),
        radial-gradient(1.5px 1.5px at 70% 58%, rgba(255, 255, 255, .6), transparent),
        radial-gradient(2px 2px at 82% 22%, rgba(255, 214, 140, .8), transparent),
        radial-gradient(1.5px 1.5px at 92% 66%, rgba(255, 255, 255, .6), transparent),
        radial-gradient(1.5px 1.5px at 64% 86%, rgba(255, 214, 140, .6), transparent),
        radial-gradient(1.5px 1.5px at 26% 88%, rgba(255, 255, 255, .5), transparent); }
/* night city behind the showcase, fading into the stage floor */
.intro-city { position: absolute; left: 0; right: 0; bottom: 70px; height: 540px; opacity: .8; background: url(../images/skyline-stage.svg) center bottom / auto 100% repeat-x; }
.intro-city::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 220px; background: linear-gradient(180deg, transparent, #040917 85%); }

/* 3D gold "Introducing" lettering */
.intro-kicker { position: relative; display: inline-block; transform: rotate(-3deg) skewX(-8deg); }
.intro-kicker > span { display: block; font-family: 'Anton', sans-serif; font-size: clamp(38px, 4.3vw, 64px); line-height: 1.1; letter-spacing: .05em; text-transform: uppercase; }
.ik-shadow { position: absolute; left: 0; top: 0; color: #7A3E06; text-shadow: 1px 1px 0 #7A3E06, 2px 2px 0 #6E3705, 3px 3px 0 #623105, 4px 4px 0 #562A04, 5px 5px 0 #4A2403, 6px 6px 0 #3F1F03, 8px 11px 20px rgba(0, 0, 0, .75); }
.ik-front { position: relative; background: linear-gradient(180deg, #FFFBEA 0%, #FFE08A 40%, #FFB020 76%, #F08A00 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.intro .sparkle { position: absolute; fill: #FFD76A; animation: twinkle 2.6s ease-in-out infinite; }
.ik-sp1 { width: 24px; height: 24px; left: -42px; top: -4px; }
.ik-sp2 { width: 15px; height: 15px; right: -32px; bottom: 2px; animation-delay: 1.2s; }

.intro-logo { display: block; width: min(620px, 84%); height: auto; margin: 18px auto 0; filter: drop-shadow(0 14px 34px rgba(255, 170, 70, .25)); }

/* gold divider with the brand pin */
.intro-rule { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 30px auto 0; }
.intro-rule i { width: 110px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #FFC93C); }
.intro-rule i:last-child { background: linear-gradient(90deg, #FFC93C, transparent); }
.intro-rule svg { width: 20px; height: 27px; filter: drop-shadow(0 0 10px rgba(255, 190, 80, .6)); }

/* sub-headline under the logo */
.intro-lede { max-width: 880px; margin: 22px auto 0; color: #BCC8E3; font-size: clamp(18px, 1.65vw, 24px); font-weight: 500; line-height: 1.6; text-wrap: balance; }
.intro-lede b { font-weight: 700; color: #fff; }
.il-ai { position: relative; display: inline-block; color: #FFD76A; font-weight: 800; white-space: nowrap; }
.il-ai svg { position: absolute; left: -2%; bottom: -.3em; width: 104%; height: .48em; overflow: visible; fill: none; stroke: #FFB020; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.il-ai svg path { vector-effect: non-scaling-stroke; }

/* showcase: laptop + box + phone on the stage */
.showcase { position: relative; max-width: 1060px; margin: 64px auto 0; padding: 0 130px; }
.stage-glow { position: absolute; left: 50%; bottom: -46px; z-index: -1; width: 900px; height: 170px; margin-left: -450px; border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 170, 70, .5), transparent 70%); filter: blur(20px); }
.laptop { position: relative; z-index: 1; }
.lp-lid { position: relative; padding: 14px 14px 16px; border-radius: 22px 22px 6px 6px; background: linear-gradient(180deg, #2E3550, #141A2E); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12), 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 80px -10px rgba(255, 170, 70, .35); }
.lp-cam { position: absolute; top: 5px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #0A0F1E; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.lp-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; background: #fff; }
/* laptop screen: publications dashboard in HTML — every size in cqw so it scales with the screen */
.dash { container-type: inline-size; display: flex; flex-direction: column; background: #F5F7FB; text-align: left; }
/* Section 23 (#dashboard-growth) reuses the .dash class; keep its section-level
   padding, stacking and background out of the laptop screen. */
.lp-screen.dash { z-index: auto; isolation: auto; overflow: hidden; padding: 0; background: #F5F7FB; }
.db-nav { display: flex; align-items: center; gap: 2.6cqw; flex: none; height: 6.6cqw; padding-right: 2.4cqw; border-bottom: 1px solid #E4E9F2; background: #fff; font-size: 1.45cqw; font-weight: 600; color: #5F6A85; white-space: nowrap; }
.db-nav span { display: flex; align-items: center; gap: .8cqw; align-self: stretch; }
.db-nav span i { font-size: 1.3cqw; }
.db-nav .on { color: var(--blue); box-shadow: inset 0 -.3cqw 0 var(--blue); }
.db-nav .db-logo { justify-content: center; width: 6.6cqw; border-right: 1px solid #E4E9F2; color: #5B6680; }
.db-nav .db-logo i { font-size: 2.4cqw; }
.db-main { flex: 1; min-height: 0; overflow: hidden; padding: 2.6cqw 3cqw 0; }
.db-head { display: flex; align-items: center; justify-content: space-between; }
.db-head b { font-size: 3.4cqw; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.db-new { display: flex; align-items: center; gap: .7cqw; padding: 1cqw 1.7cqw; border-radius: .8cqw; background: var(--grad); font-size: 1.3cqw; font-weight: 700; color: #fff; box-shadow: 0 .6cqw 1.4cqw -.6cqw rgba(11, 92, 255, .6); }
.db-filter { display: flex; align-items: center; gap: 1.2cqw; margin: 2cqw 0 2.2cqw; }
.db-filter small { font-size: 1.15cqw; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5F6A85; }
.db-filter .ml { margin-left: auto; }
.db-sel { display: flex; align-items: center; justify-content: space-between; width: 15cqw; padding: .9cqw 1.3cqw; border: 1px solid #DCE2ED; border-radius: .7cqw; background: #fff; font-size: 1.3cqw; font-weight: 600; color: var(--ink); }
.db-sel i { font-size: .95cqw; color: #9AA4B9; }
.db-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2cqw; }
.db-card { margin: 0; overflow: hidden; border: 1px solid #E2E7F1; border-radius: 1cqw; background: #fff; box-shadow: 0 .6cqw 1.6cqw -.8cqw rgba(10, 22, 51, .28); }
.db-thumb { position: relative; }
.db-thumb img { display: block; width: 100%; aspect-ratio: 440 / 400; object-fit: cover; object-position: top center; }
.db-pub { position: absolute; left: 0; bottom: 0; padding: .5cqw 1.2cqw; border-radius: 0 .8cqw 0 0; background: var(--blue); font-size: 1.05cqw; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.db-card figcaption { padding: 1cqw 1.2cqw 1.2cqw; line-height: 1.3; }
.db-card b { display: block; overflow: hidden; font-size: 1.35cqw; font-weight: 800; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.db-card small { display: flex; align-items: center; gap: .5cqw; font-size: 1.1cqw; font-weight: 600; color: var(--muted); }
.db-card small i { color: var(--blue); }
/* the laptop screen gets tiny on phones: show fewer, bigger, readable cards */
@container (max-width: 420px) {
    .db-nav { gap: 3.2cqw; height: 8cqw; font-size: 2.6cqw; }
    .db-nav span i { font-size: 2.4cqw; }
    .db-nav .db-logo { width: 8cqw; }
    .db-nav .db-logo i { font-size: 4.2cqw; }
    .db-nav span:nth-last-child(-n+2) { display: none; }
    .db-main { padding: 3cqw 3.4cqw 0; }
    .db-head b { font-size: 5.6cqw; }
    .db-new { gap: 1.2cqw; padding: 1.3cqw 2.4cqw; border-radius: 1.4cqw; font-size: 2.4cqw; }
    .db-filter { display: none; }
    .db-grid { grid-template-columns: 1fr 1fr; gap: 3.4cqw; margin-top: 2.4cqw; }
    .db-card { border-radius: 2cqw; }
    .db-card:nth-child(n+3) { display: none; }
    .db-thumb img { aspect-ratio: 3 / 2; }
    .db-pub { padding: .9cqw 2cqw; border-radius: 0 1.6cqw 0 0; font-size: 2cqw; }
    .db-card figcaption { padding: 1.6cqw 2.2cqw 1.8cqw; }
    .db-card b { font-size: 3.2cqw; }
    .db-card small { gap: 1cqw; font-size: 2.5cqw; }
}
.lp-base { position: relative; left: -8%; width: 116%; height: 22px; margin-top: -2px; border-radius: 2px 2px 18px 18px; background: linear-gradient(180deg, #DCD8D2, #9C958C 60%, #7A736A); box-shadow: 0 26px 40px -14px rgba(0, 0, 0, .85); }
.lp-base::before { content: ""; position: absolute; top: 0; left: 50%; width: 130px; height: 8px; margin-left: -65px; border-radius: 0 0 10px 10px; background: #8C857B; }

.sc-box { position: absolute; left: -34px; bottom: -30px; z-index: 2; width: 250px; height: auto; rotate: -6deg; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .7)) drop-shadow(0 0 40px rgba(255, 170, 70, .3)); }
.sc-phone { position: absolute; right: 26px; bottom: -34px; z-index: 2; width: 196px; rotate: 7deg; transform-origin: right bottom; }

/* phone: mobile newsletter reading view */
.in-phone { position: relative; padding: 8px; border-radius: 34px; background: linear-gradient(145deg, #2A2F45, #0C1122); box-shadow: 0 40px 60px -26px rgba(0, 0, 0, .8), inset 0 0 0 1.5px rgba(255, 255, 255, .14), 0 0 50px -12px rgba(255, 170, 70, .45); }
.in-notch { position: absolute; left: 50%; top: 14px; z-index: 2; width: 58px; height: 16px; border-radius: 10px; background: #0C1122; transform: translateX(-50%); }
.in-pscreen { overflow: hidden; border-radius: 27px; background: #fff; }
.app-status { display: flex; justify-content: space-between; padding: 8px 16px 0; color: var(--ink); font-size: 9px; font-weight: 700; }
.app-status i { font-size: 8px; }
.nl-screen { display: flex; flex-direction: column; height: 386px; }
.nl-top { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding: 0 10px 8px; border-bottom: 1px solid #EEF2F9; text-align: left; }
.nl-top > i { font-size: 10px; color: var(--blue); }
.nl-top > .fa-star { color: #C3CCDD; }
.nl-av { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: linear-gradient(135deg, #8B5E3C, #3E2415); color: #FFD9A8; font-size: 10px; }
.nl-top div { flex: 1; min-width: 0; line-height: 1.15; }
.nl-top b { display: block; overflow: hidden; font-size: 9.5px; font-weight: 900; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.nl-top small { font-size: 7.5px; font-weight: 600; color: var(--muted); }
.nl-body { flex: 1; overflow: hidden; padding: 10px 12px 0; text-align: center; }
.nl-mast { display: block; width: 116px; margin: 0 auto; }
.nl-rule { height: 1px; margin: 8px 0; background: #E4E9F2; }
.nl-q { margin: 0 0 8px; color: #2A3550; font-size: 8px; line-height: 1.35; }
.nl-q b { display: block; margin-bottom: 2px; color: var(--ink); font-size: 9.5px; font-weight: 900; }
.nl-img { display: block; width: 100%; border-radius: 8px; }
.nl-link { display: block; margin: 7px 0 8px; color: var(--blue); font-size: 8.5px; font-weight: 800; line-height: 1.3; text-decoration: underline; }
.nl-lines i { display: block; height: 4px; margin: 0 auto 5px; border-radius: 2px; background: #E1E7F2; }
.nl-lines i:nth-child(2) { width: 86%; }
.nl-lines i:nth-child(3) { width: 70%; }
.nl-foot { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 0 10px; border-top: 1px solid #EEF2F9; color: var(--muted); font-size: 7.5px; font-weight: 700; }
.nl-foot svg { width: 8px; height: 11px; }
.nl-foot b { color: var(--ink); }

/* big side elements: AI assistant + real product screens floating in 3D */
.side-el { position: absolute; z-index: 0; pointer-events: none; perspective: 1100px; }
.side-l { left: 8px; top: 130px; width: 340px; }
.ai-robot { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 40px rgba(25, 140, 255, .4)); animation: floaty 7s ease-in-out infinite; }
.side-r { right: -48px; top: 120px; width: 470px; height: 460px; }
.in-win { position: absolute; left: 0; top: 0; width: 410px; overflow: hidden; border-radius: 14px; background: #fff; transform: rotateY(-24deg) rotateZ(4deg); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 50px 80px -30px rgba(0, 0, 0, .9), 0 0 80px -10px rgba(255, 170, 70, .4); }
.in-winbar { display: flex; gap: 6px; padding: 8px 11px; background: #EEEBE6; }
.in-winbar i { width: 9px; height: 9px; border-radius: 50%; background: #FF5F57; }
.in-winbar i:nth-child(2) { background: #FEBC2E; }
.in-winbar i:nth-child(3) { background: #28C840; }
.in-panel { position: absolute; right: 72px; top: 160px; width: 230px; overflow: hidden; border-radius: 12px; background: #fff; transform: rotateY(-16deg) rotateZ(-3deg); box-shadow: 0 40px 60px -24px rgba(0, 0, 0, .9), 0 0 60px -8px rgba(255, 190, 90, .5); }
/* "Add Recommendations" window (HTML rebuild of the product UI) */
.rc { background: #fff; color: var(--ink); font-size: 10px; text-align: left; }
.rc-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid #EEF2F9; font-size: 11.5px; }
.rc-head b { font-weight: 800; }
.rc-head span { font-size: 15px; line-height: 1; color: #98A4BD; }
.rc-body { display: grid; grid-template-columns: 1.05fr 1fr; gap: 12px; padding: 10px 12px 12px; }
.rc-tabs { display: flex; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid #EEF2F9; color: #8391AE; font-size: 8px; font-weight: 700; white-space: nowrap; }
.rc-tabs .on { margin-bottom: -7px; padding-bottom: 5px; border-bottom: 2px solid var(--blue); color: var(--ink); }
.rc-chips { display: flex; gap: 5px; margin: 10px 0 4px; }
.rc-chips span { padding: 3px 7px; border-radius: 5px; background: #EEF4FF; color: var(--blue); font-size: 8px; font-weight: 800; white-space: nowrap; }
.rc-chips .on { background: var(--blue); color: #fff; }
.rc-item { display: flex; align-items: center; gap: 7px; margin-top: 6px; padding: 7px; border-radius: 8px; background: #F6F8FC; }
.rc-item div { flex: 1; min-width: 0; }
.rc-item b { display: block; overflow: hidden; font-size: 9px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.rc-item small { color: var(--muted); font-size: 7.5px; }
.rc-item > i { color: var(--blue); font-size: 11px; }
.rc-av { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 6px; background: linear-gradient(135deg, #8B5E3C, #3E2415); color: #FFD9A8; font-size: 9px; }
.rc-av.av2 { background: var(--grad); color: #fff; }
.rc-colors { display: flex; flex-wrap: wrap; gap: 5px; color: var(--muted); font-size: 7.5px; font-weight: 700; }
.rc-colors span { display: flex; align-items: center; gap: 4px; padding: 3px 5px; border: 1px solid #E4EAF4; border-radius: 5px; }
.rc-colors i { width: 9px; height: 9px; border: 1px solid #DCE3EF; border-radius: 3px; }
.rc-preview { margin-top: 8px; padding: 10px; border: 1px solid #E4EAF4; border-radius: 8px; text-align: center; }
.rc-preview > b { display: block; font-size: 10px; font-weight: 900; }
.rc-preview > small { display: block; margin: 2px 0 7px; color: var(--muted); font-size: 7.5px; }
.rp-item { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 6px; background: #F6F8FC; text-align: left; }
.rp-item em { flex: 1; overflow: hidden; font-size: 8.5px; font-style: normal; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.rp-item > i { color: #22A447; font-size: 11px; }
.rp-btn { display: block; margin-top: 7px; padding: 5px 0; border-radius: 6px; background: #22A447; color: #fff; font-size: 9px; font-weight: 800; }
/* "Newsletter Summary" panel (HTML rebuild of the product UI) */
.ns { padding: 10px 12px 12px; border-top: 3px solid #F59E0B; background: #fff; color: var(--ink); font-size: 9.5px; text-align: left; }
.ns-head { display: flex; align-items: center; gap: 7px; margin: -10px -12px 8px; padding: 8px 12px; border-bottom: 1px solid #EEF2F9; }
.ns-head span { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: #F59E0B; color: #fff; font-size: 8px; }
.ns-head b { font-size: 11.5px; font-weight: 800; }
.ns-stats { display: grid; gap: 4px; }
.ns-stats div { display: flex; justify-content: space-between; font-size: 9px; }
.ns-stats span { color: var(--muted); font-weight: 600; }
.ns-stats b { font-weight: 800; }
.ns-label { margin: 9px 0 6px; padding-top: 8px; border-top: 1px solid #EEF2F9; font-size: 9.5px; font-weight: 800; }
.ns-row { display: flex; align-items: center; justify-content: space-between; font-size: 8.5px; font-weight: 700; }
.ns-toggle { position: relative; width: 22px; height: 12px; border-radius: 999px; background: #22A447; }
.ns-toggle::after { content: ""; position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.ns-field { margin-top: 6px; }
.ns-field small { display: block; margin-bottom: 2px; color: var(--muted); font-size: 7.5px; font-weight: 700; }
.ns-field div { overflow: hidden; padding: 4px 6px; border: 1px solid #E4EAF4; border-radius: 5px; font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }
.ns-save { display: inline-block; margin-top: 8px; padding: 4px 12px; border-radius: 5px; background: #22A447; color: #fff; font-size: 8.5px; font-weight: 800; }

/* people standing on the stage, behind the box / phone (warm rim glow, bottom faded) */
/* the glow lives on the wrapper: a mask on the image itself would clip the
   drop-shadow at the image box, leaving a hard cut above the head */
.person { position: absolute; bottom: 90px; z-index: 0; display: block; width: clamp(330px, 30vw, 533px); pointer-events: none; filter: brightness(.94) drop-shadow(0 0 34px rgba(255, 170, 70, .32)); }
.person img { display: block; width: 100%; height: auto;
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 97%);
            mask-image: linear-gradient(180deg, #000 72%, transparent 97%); }
.person.p-left { left: calc(50% - 50vw - 2.5vw); }
.person.p-right { right: calc(50% - 50vw - 2.5vw); }

@media (max-width: 1399.98px) {
    .side-l { scale: .82; transform-origin: left top; }
    .side-r { scale: .78; transform-origin: right top; }

}
@media (max-width: 1199.98px) {
    /* every side decoration is gone at this width, so the stage head-space goes too */
    .intro { padding-top: 150px; }
    .side-el, .person { display: none; }
    .showcase { padding: 0 90px; }
    .sc-box { width: 230px; }
    .sc-phone { right: 10px; scale: .88; }
}
@media (max-width: 991.98px) {
    .showcase { padding: 0 60px; }
    .sc-box { width: 200px; left: -10px; }
    .sc-phone { scale: .75; }
}
@media (max-width: 767.98px) {
    .intro { padding: 130px 0 90px; }
    .intro-bg { top: 76px; border-radius: 50% 50% 50% 50% / 50px 50px 40px 40px; }
    .intro-arrow { top: 2px; width: 66px; margin-left: -33px; }
    .beam { width: 240px; }
    .intro-city { bottom: 40px; height: 300px; }
    .intro-rule { margin-top: 22px; }
    .intro-rule i { width: 70px; }
    .intro-lede { margin-top: 16px; }
    .showcase { margin-top: 44px; padding: 0 8px; }
    .lp-lid { padding: 8px 8px 10px; border-radius: 14px 14px 4px 4px; }
    .lp-base { height: 14px; border-radius: 2px 2px 12px 12px; }
    .lp-base::before { width: 70px; height: 5px; margin-left: -35px; }
    .sc-box { width: 36%; left: -14px; bottom: -26px; }
    .sc-phone { right: 20px; bottom: -34px; scale: .55; }
}

/* ==========================================================
   SECTION 7 — WHAT IT DELIVERS (2-3-3-2 feature cards with code-built product screens)
   ========================================================== */
.dlv { position: relative; z-index: 1; isolation: isolate; overflow-x: clip; padding: 80px 0 130px; color: var(--ink); background: linear-gradient(180deg, #EEF3FB 0%, #F5F8FD 26%, #F5F8FD 100%); }

/* background: soft theme glows + a blueprint grid that only shows toward the edges + tiny light specks */
.dlv-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent 99%); mask-image: linear-gradient(180deg, #000 88%, transparent 99%);
    background:
        radial-gradient(ellipse 36% 26% at 6% 14%, rgba(22, 131, 255, .17), transparent 70%),
        radial-gradient(ellipse 32% 24% at 95% 32%, rgba(25, 211, 255, .18), transparent 70%),
        radial-gradient(ellipse 34% 26% at 4% 62%, rgba(99, 102, 241, .12), transparent 70%),
        radial-gradient(ellipse 36% 22% at 94% 84%, rgba(11, 92, 255, .13), transparent 70%); }
.dlv-bg::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(11, 92, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 92, 255, .08) 1px, transparent 1px); background-size: 56px 56px; background-position: center top;
    -webkit-mask-image: radial-gradient(ellipse 44% 58% at 50% 46%, transparent 62%, #000 100%);
            mask-image: radial-gradient(ellipse 44% 58% at 50% 46%, transparent 62%, #000 100%); }
.dlv-bg::after { content: ""; position: absolute; inset: 0;
    background-image:
        radial-gradient(3px 3px at 7% 22%, rgba(22, 131, 255, .55), transparent),
        radial-gradient(2px 2px at 13% 48%, rgba(25, 211, 255, .6), transparent),
        radial-gradient(3px 3px at 5% 78%, rgba(99, 102, 241, .5), transparent),
        radial-gradient(2px 2px at 92% 12%, rgba(25, 211, 255, .6), transparent),
        radial-gradient(3px 3px at 88% 44%, rgba(22, 131, 255, .5), transparent),
        radial-gradient(2px 2px at 95% 70%, rgba(99, 102, 241, .55), transparent),
        radial-gradient(3px 3px at 86% 94%, rgba(22, 131, 255, .45), transparent); }

/* headline */
.dlv-head { position: relative; text-align: center; }
.dlv-rule { display: flex; align-items: center; justify-content: center; gap: 12px; }
.dlv-rule i { width: 70px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--blue-2)); }
.dlv-rule i:last-child { background: linear-gradient(90deg, var(--blue-2), transparent); }
.dlv-rule svg { width: 20px; height: 27px; }
.dlv-title { margin: 16px 0 0; color: var(--ink); font-family: var(--display); font-size: clamp(40px, 4.8vw, 68px); font-weight: 800; line-height: 1.1; letter-spacing: -.035em; }
.dlv-t { position: relative; display: inline-block; }
.dlv-title .hl-box { display: inline-block; padding: 0 .22em .06em; rotate: -2deg; }
.dlv-3d { position: absolute; top: -10px; display: none; height: auto; pointer-events: none; animation: floaty 8s ease-in-out infinite; filter: drop-shadow(0 22px 22px rgba(10, 22, 51, .2)); }
.dlv-3d.d-l { left: calc(50% - 430px); width: 118px; rotate: -12deg; }
.dlv-3d.d-r { right: calc(50% - 430px); width: 112px; rotate: 10deg; animation-delay: -4s; }
@media (min-width: 1200px) { .dlv-3d { display: block; } }

/* 2-3-3-2 grid of feature cards */
.dl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 36px; max-width: 1120px; margin: 60px auto 0; }
/* each card carries its own accent: --a (strong) + --a2 (light) */
.dl-card { --a: #0B5CFF; --a2: #19D3FF; --ag: linear-gradient(100deg, var(--a), color-mix(in srgb, var(--a) 55%, var(--a2))); position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 26px; background: #fff; box-shadow: 0 36px 60px -40px color-mix(in srgb, var(--a) 55%, #0A1633), 0 0 0 1.5px color-mix(in srgb, var(--a) 20%, transparent); }
.dl-img { position: relative; margin: 0; overflow: hidden; aspect-ratio: 16 / 9; background: color-mix(in srgb, var(--a) 14%, #fff); container-type: inline-size; }
.dl-img::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 5px; background: linear-gradient(90deg, var(--a), var(--a2)); }
.dl-body { flex: 1; padding: 26px 30px 32px; }
.dl-hd { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.dl-no { display: grid; place-items: center; flex: none; min-width: 44px; height: 44px; padding: 0 8px; border-radius: 14px; background: var(--ag); color: #fff; font-family: var(--display); font-size: 17px; font-weight: 800; box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--a) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35); }
.dl-card h3 { margin: 0; color: var(--ink); font-family: var(--display); font-size: 26px; font-weight: 800; line-height: 1.18; letter-spacing: -.02em; }
.dl-card p { margin: 0; color: #4E5D7E; font-size: 18px; line-height: 1.62; }
.dl-card p strong { color: var(--ink); font-weight: 700; }
.dl-card mark, .dlv-close mark { padding: 0 .12em; border-radius: 3px; background: linear-gradient(transparent 14%, #FFE066 14%, #FFD84D 88%, transparent 88%); color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* #10: the asset — navy card with gold (money accent) */
.dl-gold { --a: #F59E0B; --a2: #FFD84D; background: linear-gradient(160deg, #10286A 0%, #0A1633 70%); box-shadow: 0 34px 60px -30px rgba(10, 22, 51, .65), 0 0 0 1px rgba(255, 201, 60, .4), 0 0 70px -24px rgba(255, 190, 80, .45); }
.dl-gold .dl-img { background: #10286A; }
.dl-gold .dl-img::after { background: var(--grad-gold); }
.dl-gold .dl-no { background: var(--grad-gold); color: var(--ink); box-shadow: 0 10px 20px -10px rgba(255, 170, 40, .7), inset 0 1px 0 rgba(255, 255, 255, .5); }
.dl-gold h3 { color: #fff; }
.dl-gold p { color: #C5D2EE; }
.dl-gold mark { background: var(--grad-gold); color: var(--ink); }

/* ----------------------------------------------------------
   code-built product screens
   Everything inside .scr is sized in em, and 1em = --u = 1% of the card width
   (wide cards use .64% on desktop so every screen has the same text density),
   so the screens scale with their card and stay sharp.
   ---------------------------------------------------------- */
.scr { --u: .84cqw; position: absolute; inset: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--ink); font-family: 'Geist', sans-serif; font-size: var(--u); line-height: 1.3; text-align: left;
    background: radial-gradient(ellipse 70% 80% at 15% 0%, rgba(255, 255, 255, .95), transparent 60%), linear-gradient(140deg, color-mix(in srgb, var(--a) 22%, #fff) 0%, color-mix(in srgb, var(--a2) 13%, #fff) 58%, color-mix(in srgb, var(--a) 17%, #fff) 100%); }
.scr::before { content: ""; position: absolute; inset: 0; background: radial-gradient(color-mix(in srgb, var(--a) 24%, transparent) 1px, transparent 1.5px) 0 0 / 4em 4em; -webkit-mask-image: linear-gradient(160deg, #000, transparent 70%); mask-image: linear-gradient(160deg, #000, transparent 70%); }
.s-ai, .s-art, .s-dev, .s-own { --u: .64cqw; }
.scr b { font-weight: 800; }
.scr img { display: block; max-width: none; object-fit: cover; }
.scr figure { margin: 0; }
.scr i { font-style: normal; }

/* shared pieces: window, url bar, skeleton lines, buttons, toasts */
.sw { position: relative; z-index: 1; overflow: hidden; border-radius: 2.4em; background: #fff; box-shadow: 0 3.4em 6em -3em rgba(10, 22, 51, .45), 0 0 0 1px rgba(10, 22, 51, .06); }
.sw-bar { display: flex; align-items: center; gap: 1em; height: 5.4em; padding: 0 2.4em; border-bottom: 1px solid #E4E9F2; background: #F2F5FA; }
.sw-bar > i { width: 1.5em; height: 1.5em; flex: none; border-radius: 50%; background: #FF5F57; }
.sw-bar > i:nth-child(2) { background: #FEBC2E; }
.sw-bar > i:nth-child(3) { background: #28C840; }
.sw-url { flex: 1; min-width: 0; overflow: hidden; margin-left: .8em; padding: .25em .9em; border-radius: 1em; background: #fff; color: #7A87A3; font-size: 2.1em; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; box-shadow: inset 0 0 0 1px #E4E9F2; }
.sk { display: block; height: 1.3em; margin-top: 1.2em; border-radius: 1em; background: #E3E9F3; }
.s-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45em; padding: .5em 1.1em; border-radius: .6em; background: var(--ag); color: #fff; font-size: 2.3em; font-weight: 800; white-space: nowrap; box-shadow: 0 .6em 1.2em -.5em color-mix(in srgb, var(--a) 70%, transparent); }
.s-btn i { font-size: .85em; }
.s-toast { position: absolute; z-index: 3; display: flex; align-items: center; gap: 1.4em; padding: 1.3em 2.4em 1.3em 1.3em; border-radius: 2.2em; background: #fff; white-space: nowrap; box-shadow: 0 2.6em 4.4em -2em rgba(10, 22, 51, .5), 0 0 0 1px rgba(10, 22, 51, .05); animation: floaty 6s ease-in-out infinite; }
.s-toast > i { display: grid; place-items: center; width: 6em; height: 6em; flex: none; border-radius: 1.8em; background: color-mix(in srgb, var(--a) 12%, #fff); }
.s-toast > i > span { font-size: 3.2em; line-height: 1; }
.s-toast b { display: block; font-size: 2.5em; line-height: 1.2; }
.s-toast small { display: block; margin-top: .1em; color: var(--muted); font-size: 2em; font-weight: 600; }

/* 01 · AI publishing */
.s-ai .sw { width: 134em; height: 74em; }
.ai-body { display: grid; grid-template-columns: 54em 1fr; height: calc(100% - 5.4em); }
.ai-chat { display: flex; flex-direction: column; gap: 2em; padding: 3em; border-right: 1px solid #E6EBF3; background: #F6F8FC; }
.ai-hd { display: flex; align-items: center; gap: 1.2em; }
.ai-hd span { font-size: 3.4em; line-height: 1; }
.ai-hd b { font-size: 3em; }
.ai-me, .ai-bot { max-width: 88%; padding: .55em .8em; font-size: 2.5em; font-weight: 600; line-height: 1.35; }
.ai-me { align-self: flex-end; border-radius: .8em .8em .2em .8em; background: var(--ag); color: #fff; }
.ai-bot { border-radius: .8em .8em .8em .2em; background: #fff; color: var(--ink); box-shadow: 0 0 0 1px #E4E9F2; }
.ai-prog { margin-top: auto; padding: 2em; border-radius: 1.8em; background: #fff; box-shadow: 0 0 0 1px #E4E9F2; }
.ai-prog small { display: flex; justify-content: space-between; color: var(--muted); font-size: 2.1em; font-weight: 700; }
.ai-prog small b { color: var(--a); }
.ai-prog > span { display: block; height: 1.4em; margin-top: 1.2em; overflow: hidden; border-radius: 1em; background: #E6ECF6; }
.ai-prog > span i { display: block; width: 86%; height: 100%; border-radius: inherit; background: var(--ag); }
.ai-prev { position: relative; padding: 3em 3.4em; }
.ap-mast { display: flex; align-items: center; gap: 1em; padding-bottom: 1.6em; border-bottom: 1px solid #EDF1F7; }
.ap-mast svg { width: 2.6em; height: 3.5em; flex: none; }
.ap-mast b { font-family: 'Playfair Display', serif; font-size: 3.2em; font-weight: 900; }
.ai-prev > img { width: 100%; height: 24em; margin-top: 2em; border-radius: 1.4em; }
.ap-h { display: block; margin-top: .6em; font-family: var(--display); font-size: 3.2em; line-height: 1.15; letter-spacing: -.02em; }
.ap-row { display: flex; align-items: center; gap: 2em; margin-top: 2.2em; }
.ap-row img { width: 12em; height: 8em; flex: none; border-radius: 1em; }
.ap-row div { flex: 1; }
.ap-row b { display: block; font-size: 2.4em; }
.ap-btn { position: absolute; right: 3.4em; bottom: 3em; }

/* 02 · AI articles */
.s-art .sw { width: 136em; height: 76em; }
.art-tools { display: flex; align-items: center; gap: 1em; height: 6.4em; padding: 0 2.4em; border-bottom: 1px solid #E8EDF5; background: #FAFBFD; }
.art-tools > span { display: grid; place-items: center; min-width: 1.9em; height: 1.8em; padding: 0 .4em; border-radius: .45em; color: #5B6680; font-size: 2.1em; font-weight: 800; white-space: nowrap; }
.art-tools .at-i { font-family: Georgia, serif; font-style: italic; }
.art-tools .at-ai { margin-left: auto; padding: 0 .7em; background: color-mix(in srgb, var(--a) 12%, #fff); color: var(--a); }
.art-tools .at-wc { padding: 0 .7em; background: #F1F4F9; color: var(--muted); font-weight: 700; }
.art-body { display: grid; grid-template-columns: 1fr 42em; height: calc(100% - 6.4em); }
.art-doc { overflow: hidden; padding: 3.2em 4em; }
.ad-kick { color: var(--a); font-size: 2em; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.ad-title { display: block; margin-top: .4em; font-family: var(--display); font-size: 4.2em; line-height: 1.1; letter-spacing: -.025em; }
.ad-by { display: flex; align-items: center; gap: 1.2em; margin-top: 1.8em; }
.ad-by img { width: 4.4em; height: 4.4em; border-radius: 50%; }
.ad-by small { color: var(--muted); font-size: 2.1em; font-weight: 600; }
.ad-hero { width: 100%; height: 16em; margin-top: 2em; border-radius: 1.4em; }
.ad-p { margin-top: 1em; color: #3F4B66; font-size: 2.3em; line-height: 1.5; }
.caret { display: inline-block; width: .12em; height: 1.05em; margin-left: .1em; vertical-align: -.15em; background: var(--a); animation: caretBlink 1s steps(2) infinite; }
@keyframes caretBlink { 50% { opacity: 0; } }
.art-side { display: flex; flex-direction: column; gap: 1.6em; padding: 3em; border-left: 1px solid #E6EBF3; background: #F6F8FC; }
.art-side > b { font-size: 2.8em; }
.as-opt { display: flex; align-items: center; justify-content: space-between; padding: 1.4em 1.8em; border-radius: 1.4em; background: #fff; box-shadow: 0 0 0 1px #E4E9F2; }
.as-opt small { color: var(--muted); font-size: 2.1em; font-weight: 700; }
.as-opt span { font-size: 2.2em; font-weight: 800; }
.as-opt .ok { color: #16A34A; }
.as-btns { display: flex; gap: 1.4em; }
.as-btns span { flex: 1; padding: .5em 0; border-radius: .6em; background: #fff; font-size: 2.2em; font-weight: 700; text-align: center; box-shadow: 0 0 0 1px #DCE3EF; }
.as-gen { margin-top: auto; }

/* 03 · professional publication */
.s-site .sw { width: 88em; height: 57em; }
.ms-nav { display: flex; align-items: center; gap: 1.2em; height: 7em; padding: 0 3em; border-bottom: 1px solid #EDF1F7; }
.ms-nav svg { width: 2.4em; height: 3.2em; flex: none; }
.ms-nav b { font-family: 'Playfair Display', serif; font-size: 2.8em; font-weight: 900; white-space: nowrap; }
.ms-links { display: flex; gap: 2em; margin-left: auto; }
.ms-links i { width: 5em; height: 1em; border-radius: 1em; background: #DDE4EF; }
.ms-sub { margin-left: 1.2em; padding: .4em .9em; border-radius: .5em; background: var(--ag); color: #fff; font-size: 1.9em; font-weight: 800; }
.ms-hero { position: relative; height: 22em; margin: 2.4em 3em 0; overflow: hidden; border-radius: 1.6em; }
.ms-hero img { width: 100%; height: 100%; }
.ms-hero div { position: absolute; left: 0; right: 0; bottom: 0; padding: 6em 2.6em 2.2em; background: linear-gradient(180deg, transparent, rgba(6, 14, 38, .85)); color: #fff; }
.ms-hero small { display: block; color: var(--a2); font-size: 1.8em; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.ms-hero b { display: block; margin-top: .2em; font-family: var(--display); font-size: 3.2em; line-height: 1.12; letter-spacing: -.02em; }
.ms-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2em; padding: 2.4em 3em; }
.ms-cards img { width: 100%; height: 9em; border-radius: 1em; }
.ms-cards .sk { margin-top: 1em; }

/* 04 · email + web */
.pub-back { position: absolute; left: 5em; top: 5em; width: 90em; height: 58em; opacity: .6; }
.pb-lines { padding: 3em 4em; }
.pb-lines .sk { height: 1.8em; margin-top: 2.2em; }
.pub-modal { position: relative; z-index: 2; width: 74em; padding: 3.4em; border-radius: 2.6em; background: #fff; box-shadow: 0 4em 7em -3em rgba(10, 22, 51, .5), 0 0 0 1px rgba(10, 22, 51, .06); }
.pm-h { display: block; font-family: var(--display); font-size: 3.4em; letter-spacing: -.02em; }
.pm-sub { display: block; margin-top: .3em; color: var(--muted); font-size: 2.1em; font-weight: 600; }
.pm-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 2em; margin-top: 2.6em; }
.pm-opt { position: relative; padding: 2.2em; border-radius: 1.8em; background: color-mix(in srgb, var(--a) 7%, #fff); box-shadow: inset 0 0 0 .4em var(--a); }
.pm-opt em { display: block; font-size: 4.2em; font-style: normal; line-height: 1; }
.pm-opt b { display: block; margin-top: .5em; font-size: 2.6em; }
.pm-opt small { display: block; color: var(--muted); font-size: 1.9em; font-weight: 600; }
.pm-opt .tg { position: absolute; right: 2em; top: 2em; width: 6em; height: 3.4em; border-radius: 2em; background: #22A447; }
.pm-opt .tg::after { content: ""; position: absolute; right: .5em; top: .5em; width: 2.4em; height: 2.4em; border-radius: 50%; background: #fff; }
.pm-btn { display: flex; margin-top: 1.1em; padding: .7em 0; font-size: 2.5em; }

/* 05 · list building */
.s-sign .sw { width: 88em; height: 57em; }
.sg-page { position: relative; display: grid; place-items: center; height: calc(100% - 5.4em); }
.sg-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sg-page::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6, 14, 38, .38), rgba(6, 14, 38, .78)); }
.sg-box { position: relative; z-index: 2; width: 64em; color: #fff; text-align: center; }
.sg-box svg { width: 3.4em; height: 4.6em; }
.sg-box > b { display: block; margin-top: .3em; font-family: var(--display); font-size: 4em; line-height: 1.12; letter-spacing: -.025em; }
.sg-box > small { display: block; margin-top: .6em; color: rgba(255, 255, 255, .88); font-size: 2.1em; font-weight: 600; }
.sg-form { display: flex; gap: 1em; margin-top: 2.6em; padding: .8em; border-radius: 1.6em; background: #fff; }
.sg-form span { flex: 1; align-self: center; padding: 0 .8em; color: #8A96B0; font-size: 2.2em; font-weight: 600; text-align: left; }
.sg-form em { padding: .55em 1em; border-radius: .6em; background: var(--ag); color: #fff; font-size: 2.2em; font-style: normal; font-weight: 800; }
.sg-proof { display: flex; align-items: center; justify-content: center; gap: 1.2em; margin-top: 2.2em; }
.sg-av { display: flex; }
.sg-av img { width: 4.4em; height: 4.4em; margin-left: -1.2em; border-radius: 50%; box-shadow: 0 0 0 .45em #fff; }
.sg-av img:first-child { margin-left: 0; }
.sg-proof small { font-size: 2em; font-weight: 700; }

/* 06 · confirmation page */
.s-conf .sw { width: 88em; height: 57em; }
.cf-page { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: calc(100% - 5.4em); text-align: center; background: radial-gradient(ellipse 60% 50% at 50% 22%, #E8FBF0, #fff 70%); }
.cf-check { display: grid; place-items: center; width: 9em; height: 9em; border-radius: 50%; background: linear-gradient(135deg, #22C55E, #16A34A); color: #fff; box-shadow: 0 1.6em 3em -1.2em rgba(22, 163, 74, .7), 0 0 0 1.4em rgba(34, 197, 94, .15); }
.cf-check span { font-size: 5em; font-weight: 900; line-height: 1; }
.cf-page > b { display: block; margin-top: .7em; font-family: var(--display); font-size: 4em; letter-spacing: -.025em; }
.cf-page > small { display: block; margin-top: .2em; color: var(--muted); font-size: 2.1em; font-weight: 600; }
.cf-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8em; width: 76em; margin: 2.4em 0 0; padding: 0; list-style: none; }
.cf-steps li { padding: 1.8em 1em; border-radius: 1.6em; background: #F5F8FD; box-shadow: 0 0 0 1px #E4E9F2; }
.cf-steps em { display: block; font-size: 3.6em; font-style: normal; line-height: 1; }
.cf-steps span { display: block; margin-top: .6em; font-size: 2em; font-weight: 700; line-height: 1.25; }
.cf-btn { margin-top: 1.1em; }
.cf-bit { position: absolute; width: 1.4em; height: 2.6em; border-radius: .4em; background: var(--c); rotate: var(--r); }

/* 07 · audience */
.s-aud .sw { width: 86em; padding: 3.2em 3.4em; }
.au-top { display: flex; align-items: flex-end; gap: 2em; }
.au-top small { display: block; color: var(--muted); font-size: 2.1em; font-weight: 700; }
.au-top > div > b { display: block; font-family: var(--display); font-size: 6em; line-height: 1; letter-spacing: -.03em; }
.au-up { margin-bottom: .6em; padding: .25em .6em; border-radius: 1em; background: #DCFCE7; color: #15803D; font-size: 2em; font-weight: 800; white-space: nowrap; }
.au-spark { flex: 1; height: 9em; margin-left: 1em; overflow: visible; }
.au-spark .a { fill: url(#auFill); }
.au-spark stop { stop-color: var(--a); }
.au-spark .l { fill: none; stroke: var(--a); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.au-tabs { display: flex; gap: 1em; margin-top: 2.4em; padding-bottom: 1.6em; border-bottom: 1px solid #EDF1F7; }
.au-tabs span { padding: .3em .8em; border-radius: .6em; color: var(--muted); font-size: 2em; font-weight: 700; }
.au-tabs .on { background: color-mix(in srgb, var(--a) 12%, #fff); color: var(--a); }
.au-row { display: flex; align-items: center; gap: 1.6em; padding: 1.5em 0; border-bottom: 1px solid #F0F3F8; }
.au-row:last-child { padding-bottom: 0; border-bottom: 0; }
.au-row img { width: 5.2em; height: 5.2em; flex: none; border-radius: 50%; }
.au-row div { flex: 1; min-width: 0; }
.au-row b { display: block; font-size: 2.3em; }
.au-row small { display: block; color: var(--muted); font-size: 1.9em; font-weight: 600; }
.au-pill { padding: .25em .6em; border-radius: 1em; background: #DCFCE7; color: #15803D; font-size: 1.8em; font-weight: 800; }
.au-pill.new { background: #EEF4FF; color: var(--blue); }
.au-row em { width: 3.2em; color: var(--ink); font-size: 2.1em; font-style: normal; font-weight: 800; text-align: right; }

/* 08 · scheduling */
.s-cal .sw { width: 88em; padding: 3em 3.2em 3.4em; }
.cl-hd { display: flex; align-items: center; gap: 1.4em; }
.cl-hd b { font-family: var(--display); font-size: 3.2em; letter-spacing: -.02em; }
.cl-nav { color: #9AA6BE; font-size: 2.6em; font-weight: 800; letter-spacing: .2em; }
.cl-new { margin-left: auto; font-size: 2em; }
.cl-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2em; margin-top: 2.4em; }
.cl-day { min-height: 30em; padding: 1.4em 1.2em; border-radius: 1.4em; background: #F6F8FC; box-shadow: inset 0 0 0 1px #E8EDF5; }
.cl-day > small { display: block; color: var(--muted); font-size: 1.8em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cl-day > b { display: block; font-family: var(--display); font-size: 3.4em; line-height: 1.1; }
.cl-day.today { background: color-mix(in srgb, var(--a) 9%, #fff); box-shadow: inset 0 0 0 .4em var(--a); }
.cl-ev { display: block; margin-top: 1.4em; padding: .9em 1em; border-radius: 1em; background: var(--c); color: #fff; box-shadow: 0 1em 2em -1em rgba(10, 22, 51, .5); }
.cl-ev b { display: block; font-size: 1.9em; line-height: 1.2; }
.cl-ev small { display: block; margin-top: .2em; font-size: 1.7em; font-weight: 700; opacity: .92; }
.cl-add { display: grid; place-items: center; height: 6em; margin-top: 1.4em; border: .3em dashed #C9D3E4; border-radius: 1em; color: #9AA6BE; font-size: 1em; }
.cl-add::first-letter { font-size: 3em; }

/* 09 · every device */
.dv-set { position: absolute; inset: 0; }
.dv { position: absolute; }
.dv-scr { position: relative; overflow: hidden; background: #fff; }
.dv-mon { left: 22em; top: 5em; width: 96em; }
.dv-mon .dv-scr { aspect-ratio: 16 / 10; border: 1.6em solid #1A2238; border-radius: 2em; box-shadow: 0 3em 5em -2.4em rgba(10, 22, 51, .5); }
.dv-mon::after { content: ""; display: block; width: 20em; height: 8em; margin: 0 auto; background: linear-gradient(180deg, #C4CDDD, #97A3BB); clip-path: polygon(32% 0, 68% 0, 100% 100%, 0 100%); }
.dv-tab { right: 14em; bottom: 5em; width: 38em; }
.dv-tab .dv-scr { aspect-ratio: 3 / 4; border: 1.4em solid #1A2238; border-radius: 3em; box-shadow: 0 3em 5em -2em rgba(10, 22, 51, .55); }
.dv-ph { left: 12em; bottom: 4em; width: 19em; }
.dv-ph .dv-scr { aspect-ratio: 9 / 19; border: 1em solid #1A2238; border-radius: 3.4em; box-shadow: 0 3em 5em -2em rgba(10, 22, 51, .55); }
.mini { position: absolute; inset: 0; overflow: hidden; font-size: .92em; }
.mini.m-tab { font-size: .5em; }
.mini.m-ph { font-size: .37em; }
.mini-nav { display: flex; align-items: center; gap: .8em; height: 6em; padding: 0 2.4em; border-bottom: 1px solid #EDF1F7; }
.mini-nav svg { width: 1.8em; height: 2.4em; flex: none; }
.mini-nav b { font-family: 'Playfair Display', serif; font-size: 2.2em; font-weight: 900; white-space: nowrap; }
.mini-nav i { width: 14em; height: .9em; margin-left: auto; border-radius: 1em; background: #DDE4EF; }
.mini-nav em { margin-left: auto; padding: .35em .8em; border-radius: .5em; background: var(--ag); color: #fff; font-size: 1.5em; font-style: normal; font-weight: 800; }
.mini-nav i + em { margin-left: 1em; }
.mini-hero { position: relative; height: 26em; margin: 2em 2.4em 0; overflow: hidden; border-radius: 1.2em; }
.mini-hero img { width: 100%; height: 100%; }
.mini-hero b { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4em .7em .5em; background: linear-gradient(180deg, transparent, rgba(6, 14, 38, .85)); color: #fff; font-family: var(--display); font-size: 2.8em; line-height: 1.12; letter-spacing: -.02em; }
.mini-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6em; padding: 1.8em 2.4em; }
.mini-cards img { width: 100%; height: 9em; border-radius: .8em; }
.mini-cards .sk { height: 1em; margin-top: .8em; }
.m-tab .mini-hero { height: 44em; }
.m-tab .mini-cards { grid-template-columns: repeat(2, 1fr); }
.m-tab .mini-cards img { height: 16em; }
.m-ph .mini-nav { height: 9em; }
.m-ph .mini-nav b { font-size: 3em; }
.m-ph .mini-hero { height: 40em; }
.m-ph .mini-hero b { font-size: 4em; }
.m-ph .mini-cards { grid-template-columns: 1fr; }
.m-ph .mini-cards img { height: 22em; }
.m-ph .mini-cards .sk { height: 1.6em; }

/* 10 · the asset (navy + gold) */
.s-own { color: #fff; background: radial-gradient(ellipse 60% 70% at 85% 0%, rgba(255, 200, 100, .28), transparent 60%), linear-gradient(140deg, #1B3C92 0%, #0E235E 60%, #0A1A47 100%); }
.s-own::before { background: radial-gradient(rgba(255, 214, 140, .2) 1px, transparent 1.5px) 0 0 / 4em 4em; }
.ow-panel { position: relative; z-index: 1; width: 136em; padding: 3.2em 3.6em; border-radius: 2.6em; background: linear-gradient(160deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .04)); box-shadow: inset 0 0 0 1px rgba(255, 214, 140, .3), 0 4em 7em -3em rgba(0, 0, 0, .6); }
.ow-hd { display: flex; align-items: center; justify-content: space-between; gap: 2em; }
.ow-hd small { display: block; color: #AFC0E4; font-size: 2.1em; font-weight: 700; }
.ow-hd b { display: block; font-family: 'Playfair Display', serif; font-size: 3.6em; font-weight: 900; }
.ow-badge { padding: .45em .9em; border-radius: 2em; background: var(--grad-gold); color: var(--ink); font-size: 2.2em; font-weight: 800; white-space: nowrap; box-shadow: 0 .8em 1.6em -.6em rgba(255, 170, 40, .7); }
.ow-main { display: grid; grid-template-columns: 1fr 40em; gap: 3em; margin-top: 2.6em; }
.ow-chart { padding: 2.4em 2.6em 1.8em; border-radius: 2em; background: rgba(6, 14, 40, .45); box-shadow: inset 0 0 0 1px rgba(127, 227, 255, .12); }
.ow-chart small { display: block; color: #AFC0E4; font-size: 2em; font-weight: 700; }
.ow-chart > b { display: block; font-family: var(--display); font-size: 5.4em; line-height: 1.05; letter-spacing: -.03em; }
.ow-chart > b span { margin-left: .2em; color: #4ADE80; font-family: 'Geist', sans-serif; font-size: .38em; letter-spacing: 0; vertical-align: .7em; }
.ow-chart svg { display: block; width: 100%; height: 26em; margin-top: 1em; overflow: visible; }
.ow-chart .g { fill: none; stroke: rgba(175, 192, 228, .14); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ow-chart .a { fill: url(#owFill); }
.ow-chart .l { fill: none; stroke: #FFC93C; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ow-months { display: flex; justify-content: space-between; margin-top: 1em; color: #7F90B5; font-size: 1.7em; font-weight: 700; }
.ow-side { display: flex; flex-direction: column; gap: 1.4em; }
.ow-stat { padding: 1.6em 2.4em; border-radius: 1.8em; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.ow-stat small { display: block; color: #AFC0E4; font-size: 1.9em; font-weight: 700; }
.ow-stat b { display: block; font-family: var(--display); font-size: 4em; line-height: 1.1; }
.ow-streams { flex: 1; padding: 1.8em 2.4em; border-radius: 1.8em; background: rgba(255, 201, 60, .1); box-shadow: inset 0 0 0 1px rgba(255, 214, 140, .3); }
.ow-streams small { display: block; color: #FFD76A; font-size: 1.8em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ow-streams span { display: block; margin-top: .55em; font-size: 2.2em; font-weight: 700; }
.ow-streams span::before { content: "\2713"; margin-right: .5em; color: #FFD76A; font-weight: 900; }

/* wide screens shown in a regular-width card (tablet / phone): same text size, lighter layout */
@container (max-width: 440px) {
    .s-ai .sw { width: 92em; height: 58em; }
    .ai-body { grid-template-columns: 50em 1fr; }
    .ai-chat { gap: 1.6em; padding: 2.4em; }
    .ai-prev { padding: 2.4em; }
    .ai-prev > img { height: 14em; }
    .ap-row, .ap-btn, .ai-prev .sk, .s-ai .s-toast { display: none; }
    .s-art .sw { width: 92em; height: 60em; }
    .art-body { grid-template-columns: 1fr; }
    .art-side, .art-tools .at-wc { display: none; }
    .ad-hero { height: 12em; }
    .dv-set { font-size: .64em; }
    .ow-panel { width: 92em; padding: 2.6em 3em; }
    .ow-main { grid-template-columns: 1fr; }
    .ow-side, .ow-badge { display: none; }
    .ow-chart svg { height: 16em; }
}

/* floating activity cards on the edges */
.fx { position: absolute; z-index: 2; display: none; align-items: center; gap: 10px; width: 184px; padding: 11px 12px; border-radius: 18px; background: #fff; color: var(--ink); text-align: left; rotate: var(--r, 0deg); pointer-events: none; box-shadow: 0 24px 44px -22px rgba(10, 22, 51, .42), 0 0 0 1px rgba(10, 22, 51, .06); animation: floaty 7s ease-in-out infinite; }
.fx-ic { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 13px; background: var(--c, #EAF1FF); font-size: 22px; line-height: 1; }
.fx b { display: block; font-size: 13.5px; font-weight: 800; line-height: 1.25; }
.fx small { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; font-weight: 600; line-height: 1.3; }
.fx-l { left: max(10px, calc(50% - 540px - 196px)); }
.fx-r { right: max(10px, calc(50% - 540px - 196px)); }
.fx-blue { background: linear-gradient(140deg, #0A4DFF, #1683FF 60%, #19D3FF); color: #fff; box-shadow: 0 24px 44px -20px rgba(11, 92, 255, .6); }
.fx-blue small { color: rgba(255, 255, 255, .88); }
.fx-blue .fx-ic { background: rgba(255, 255, 255, .22); }
.fx-navy { background: #0A1633; color: #fff; box-shadow: 0 24px 44px -20px rgba(10, 22, 51, .6), inset 0 0 0 1px rgba(127, 227, 255, .2); }
.fx-navy small { color: #AFC0E4; }
.fx-navy .fx-ic { background: rgba(127, 227, 255, .14); }
@media (min-width: 1400px) {
    .fx { display: flex; }
    .dl-grid { max-width: 1080px; }
}

/* the bottom line */
.dlv-end { position: relative; }
.dlv-close { position: relative; z-index: 1; max-width: 820px; margin: 72px auto 0; text-align: center; }
.dlv-person { position: absolute; z-index: 0; display: none; width: clamp(300px, 24vw, 470px); height: auto; pointer-events: none; -webkit-mask-image: linear-gradient(#000 70%, transparent 96%); mask-image: linear-gradient(#000 70%, transparent 96%); }
.dp-left { left: calc(50% - 50vw - 2.5vw); top: -70px; }
.dp-right { right: calc(50% - 50vw - 2.5vw); bottom: 0; z-index: 2; }
@media (min-width: 1300px) { .dlv-person { display: block; } }
.dlv-close p { margin: 0; color: var(--ink); font-family: var(--display); font-size: clamp(26px, 3vw, 40px); font-weight: 800; line-height: 1.28; letter-spacing: -.028em; text-wrap: balance; }
.dlv-close p > span { color: var(--ink-2); opacity: .75; }

/* CTA: first-fold offer box */
.offer-dlv { margin-top: 96px; }
.offer-dlv .bb-main { font-size: 21px; line-height: 1.28; text-wrap: balance; }

@media (max-width: 1199.98px) {
    .dl-grid { gap: 30px 26px; }
    .dl-card h3 { font-size: 24px; }
}
@media (max-width: 991.98px) {
    .dl-img { aspect-ratio: 3 / 2; }
    .scr, .s-ai, .s-art, .s-dev, .s-own { --u: 1cqw; }
    .dl-body { padding: 22px 24px 26px; }
    .dl-card h3 { font-size: 21px; }
    .dl-card p { font-size: 16.5px; }
    .offer-dlv .bb-main { font-size: 18px; }
}
/* tablet: the shared .offer rule sets 140px further down the file, so re-state it here */
@media (min-width: 768px) and (max-width: 991.98px) {
    .dlv .offer-dlv { margin-top: 96px; }
}
@media (max-width: 767.98px) {
    .dlv { padding: 60px 0 76px; }
    .dl-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
    .dl-body { padding: 18px 20px 22px; }
    .dl-card h3, .dl-card.wide h3 { font-size: 22px; }
    .dl-card p, .dl-card.wide p { font-size: 16px; }
    .dlv-close { margin-top: 52px; }
    .dlv-close p { font-size: 24px; }
    .offer-dlv { margin-top: 110px; }
    .bb-br { display: none; }
}

/* ==========================================================
   SECTION 8 — TESTIMONIALS II (dark variant of the Section 2 story layout)
   Shares .tear / .st-bg / .deco / .rv / .tcard / .tc-* / .st-grid with Section 2; only the differences live here.
   ========================================================== */
.stories-dk { padding: 124px 0 210px; color: #fff; background: linear-gradient(180deg, #07102B 0%, #0A1840 50%, #0B1B48 100%); }

/* the light section above tears down into the night (same tile, flipped; its paper colour matches Section 7's bottom) */
.stories-dk .tear { top: -2px; transform: scaleY(-1); }

/* background: brighter theme glows, cyan halftone, faint giant quotes */
.stories-dk .st-bg { background:
    radial-gradient(ellipse 30% 22% at 8% 18%, rgba(25, 211, 255, .2), transparent 70%),
    radial-gradient(ellipse 28% 22% at 94% 30%, rgba(139, 92, 246, .24), transparent 70%),
    radial-gradient(ellipse 30% 22% at 6% 68%, rgba(255, 201, 60, .13), transparent 70%),
    radial-gradient(ellipse 30% 22% at 96% 86%, rgba(18, 201, 166, .17), transparent 70%); }
.stories-dk .st-dots { background: radial-gradient(rgba(127, 227, 255, .24) 1.3px, transparent 1.8px) 0 0 / 15px 15px; }
.stories-dk .st-qm { color: var(--cyan); opacity: .08; }
.stories-dk .rv { box-shadow: 0 26px 44px -20px rgba(0, 0, 0, .6); }
.stories-dk .rv-blue { box-shadow: 0 26px 44px -18px rgba(11, 92, 255, .7); }
.stories-dk .d3 { filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .45)) drop-shadow(0 0 30px rgba(255, 190, 80, .25)); }
.stories-dk .tcard { box-shadow: 0 34px 70px -32px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .08); }

/* headline: the $50,000 sentence */
.s8-pre { max-width: 900px; margin: 0 auto; color: #C5D2EE; font-size: clamp(19px, 1.9vw, 26px); font-weight: 500; line-height: 1.5; text-wrap: balance; }
.s8-pre b { color: #fff; font-weight: 800; }
.s8-title { margin: 14px auto 0; color: #fff; font-family: var(--display); font-size: clamp(38px, 4.7vw, 68px); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; }
.s8-t { position: relative; display: inline-block; }
.s8-money { display: inline-block; background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; filter: drop-shadow(0 8px 24px rgba(255, 180, 60, .35)); }
.s8-title .st-spark.sp1 { fill: var(--cyan); }
.stories-dk .st-rule { margin-top: 34px; }
.stories-dk .st-rule::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3)); }
.stories-dk .st-rule::after { background: linear-gradient(90deg, rgba(255, 255, 255, .3), transparent); }

/* new mini visuals */
.viz-reach { display: flex; flex-direction: column; gap: 5px; }
.viz-reach > span:not(.vz-lbl) { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 8px; border-radius: 8px; background: #fff; color: var(--ink); font-size: 11.5px; font-weight: 800; box-shadow: 0 4px 10px -6px rgba(10, 22, 51, .3); }
.viz-reach em { color: var(--muted); font-size: 10px; font-style: normal; font-weight: 600; }
.viz-reach > span.dim { opacity: .55; }
.viz-reach > span.on { background: linear-gradient(135deg, var(--a), var(--a2)); color: #fff; }
.viz-reach .on em { color: rgba(255, 255, 255, .9); }
.viz-hours { display: flex; flex-direction: column; gap: 8px; }
.vh { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 8px; }
.vh small { color: var(--muted); font-size: 10.5px; font-weight: 800; }
.vh i { display: block; width: var(--w); height: 10px; border-radius: 5px; background: #D5DCE8; }
.vh.on small { color: var(--ink); }
.vh.on i { background: linear-gradient(90deg, var(--a), var(--a2)); box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--a) 70%, transparent); }

@media (max-width: 767.98px) {
    .stories-dk { padding: 96px 0 130px; }
    .s8-pre { font-size: 17px; }
    .s8-title { font-size: 31px; }
    .viz-reach, .viz-hours { max-width: 240px; }
}

/* ==========================================================
   SECTION 9 — THE GROWTH ENGINE (4-step cycle around the product hub)
   ========================================================== */
.gr { position: relative; z-index: 3; isolation: isolate; overflow-x: clip; padding: 36px 0 130px; color: var(--ink); background: linear-gradient(180deg, #F2F7FF 0%, #F5F8FD 30%, #F5F8FD 100%); }

/* light dome rising out of the night section above (alpha-faded shape + drop-shadow glow, no blurred box-shadow seam) */
.gr-top { position: absolute; left: -12%; right: -12%; top: -110px; z-index: -1; height: 240px; border-radius: 50% 50% 0 0 / 110px 110px 0 0; background: #F2F7FF; box-shadow: 0 -2px 0 rgba(127, 227, 255, .9); }
.gr-glow { position: absolute; left: 12%; right: 12%; top: -270px; z-index: -2; height: 220px; pointer-events: none; background: radial-gradient(ellipse 50% 60% at 50% 73%, rgba(25, 211, 255, .4), transparent 72%); }
.gr-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(ellipse 34% 24% at 8% 30%, rgba(22, 131, 255, .12), transparent 70%),
        radial-gradient(ellipse 30% 22% at 94% 40%, rgba(124, 58, 237, .12), transparent 70%),
        radial-gradient(ellipse 30% 22% at 6% 80%, rgba(234, 88, 12, .08), transparent 70%),
        radial-gradient(ellipse 32% 22% at 94% 88%, rgba(22, 163, 74, .09), transparent 70%); }

/* header */
.gr-head { position: relative; z-index: 2; text-align: center; }
.gr-title { margin: 0; color: var(--ink); font-family: var(--display); font-size: clamp(34px, 4.4vw, 62px); font-weight: 800; line-height: 1.16; letter-spacing: -.035em; }
.gt-one, .gt-many { display: inline-flex; margin: 0 .18em; vertical-align: -.08em; }
.gt-one img, .gt-many img { width: .86em; height: .86em; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 .06em #fff, 0 .14em .3em -.1em rgba(10, 22, 51, .45); }
.gt-many img + img { margin-left: -.3em; }
.gt-hl { position: relative; display: inline-block; background: linear-gradient(100deg, #0A4DFF, #7C3AED 58%, #C026D3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gt-sw { position: absolute; left: -1%; bottom: -.2em; width: 102%; height: .3em; overflow: visible; fill: none; stroke: #8B5CF6; stroke-width: 4; stroke-linecap: round; opacity: .55; }
.gt-sw path { vector-effect: non-scaling-stroke; }
.gr-sub { display: inline-flex; align-items: center; gap: 12px; margin: 26px 0 0; color: var(--ink-2); font-size: clamp(18px, 1.7vw, 23px); font-weight: 700; }
.gr-sub i { color: var(--blue-2); animation: grSpin 7s linear infinite; }
@keyframes grSpin { to { transform: rotate(360deg); } }
.gr-intro { max-width: 860px; margin: 18px auto 0; color: var(--muted); font-size: 19px; line-height: 1.65; text-wrap: balance; }
.gr-intro b { color: var(--ink); }
.gr-intro mark, .gs4 mark, .gc-ai mark { padding: 0 .12em; border-radius: 3px; background: linear-gradient(transparent 14%, #FFE066 14%, #FFD84D 88%, transparent 88%); color: var(--ink); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* the cycle */
.gr-cyc { position: relative; display: grid; grid-template-columns: 1fr 380px 1fr; row-gap: 76px; max-width: 1140px; margin: 76px auto 0; }
.gr-waves { position: absolute; left: 50%; top: 50%; z-index: -1; width: 1500px; height: 1500px; transform: translate(-50%, -50%); pointer-events: none; background: repeating-radial-gradient(circle, transparent 0 169px, rgba(11, 92, 255, .1) 170px 171.5px);
    -webkit-mask-image: radial-gradient(circle, #000 24%, transparent 66%); mask-image: radial-gradient(circle, #000 24%, transparent 66%); }
.gr-ring { position: absolute; left: 50%; top: 50%; z-index: 0; width: 600px; height: 600px; transform: translate(-50%, -50%); overflow: visible; pointer-events: none; }
.rg-base { fill: none; stroke: url(#grRing); stroke-width: 5; opacity: .85; }
.rg-ah { filter: drop-shadow(0 3px 5px rgba(10, 22, 51, .25)); }

/* hub: the product inside a spinning gradient ring */
.gr-hub { position: relative; z-index: 2; grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: center; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle at 50% 32%, #fff 0%, #EEF4FF 72%); box-shadow: 0 34px 60px -30px rgba(10, 22, 51, .5), 0 0 0 12px rgba(255, 255, 255, .75), 0 0 60px -6px rgba(25, 211, 255, .35); }
.gh-spin { position: absolute; inset: -14px; border-radius: 50%; background: conic-gradient(from 0deg, #0B5CFF, #7C3AED, #EA580C, #16A34A, #0B5CFF);
    -webkit-mask-image: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); mask-image: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); }
.gr-hub img { position: relative; width: 158px; height: auto; margin-top: -8px; filter: drop-shadow(0 20px 22px rgba(10, 22, 51, .35)); }
.gr-hub b { position: relative; margin-top: 8px; padding: 6px 14px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

/* step cards */
.gr-step { position: relative; z-index: 1; padding: 22px 26px 28px; border-radius: 26px; background: linear-gradient(90deg, var(--a), var(--a2)) top / 100% 5px no-repeat, #fff; box-shadow: 0 34px 60px -38px color-mix(in srgb, var(--a) 60%, #0A1633), 0 0 0 1.5px color-mix(in srgb, var(--a) 18%, transparent); }
.gs1 { grid-column: 1; grid-row: 1; }
.gs2 { grid-column: 3; grid-row: 1; }
.gs3 { grid-column: 3; grid-row: 2; }
.gs4 { grid-column: 1; grid-row: 2; }
.gs-art { display: grid; place-items: center; height: 150px; margin: 4px 0 16px; border-radius: 18px; background: radial-gradient(ellipse 62% 72% at 50% 62%, color-mix(in srgb, var(--a) 16%, #fff), transparent 75%); }
.gs-art img { width: auto; max-width: 100%; height: auto; max-height: 150px; filter: drop-shadow(0 14px 16px rgba(10, 22, 51, .16)); }
.gs-hd { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.gs-no { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 56px; height: 56px; flex: none; border-radius: 16px; background: linear-gradient(135deg, var(--a), var(--a2)); color: #fff; font-family: var(--display); font-size: 26px; font-weight: 800; line-height: .95; box-shadow: 0 12px 22px -10px color-mix(in srgb, var(--a) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35); }
.gs-no small { font-family: 'Geist', sans-serif; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .92; }
.gr-step h3 { margin: 0; color: var(--ink); font-family: var(--display); font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.gr-step p { margin: 0; color: #4E5D7E; font-size: 16.5px; line-height: 1.62; }
.gr-step p strong { color: var(--ink); font-weight: 700; }

/* subscribers joining on the ripples, anchored to the window edges */
.gr-orbs { position: absolute; inset: 0; z-index: 0; display: none; pointer-events: none; }
.gr-orb { position: absolute; width: var(--s); height: var(--s); animation: floaty 7s ease-in-out infinite; }
.gr-orb.o-l { left: calc(50% - 50vw + var(--x)); }
.gr-orb.o-r { right: calc(50% - 50vw + var(--x)); }
.gr-orb img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #fff, 0 14px 26px -10px rgba(10, 22, 51, .45); }
.gr-orb i { position: absolute; right: -8px; top: -6px; display: grid; place-items: center; min-width: 26px; height: 22px; padding: 0 5px; border-radius: 999px; background: linear-gradient(135deg, #16A34A, #4ADE80); color: #fff; font-size: 11px; font-style: normal; font-weight: 800; box-shadow: 0 0 0 2.5px #fff, 0 6px 12px -4px rgba(22, 163, 74, .7); }
@media (min-width: 1400px) { .gr-orbs { display: block; } }

/* what it adds up to */
.gr-close { position: relative; max-width: 940px; margin: 88px auto 0; text-align: center; }
/* desktop only: below 992px the box art pulls up 84px and needs the wider gap */
@media (min-width: 992px) { .gr-end .offer { margin-top: 76px; } }
.gc-lead { margin: 0; color: var(--ink-2); font-size: clamp(19px, 1.8vw, 23px); line-height: 1.6; text-wrap: balance; }
.gc-lead b { color: var(--ink); font-weight: 800; }
.gc-not { margin: 40px 0 0; color: #7A87A3; font-size: clamp(19px, 1.8vw, 24px); font-weight: 600; }
.gc-not span { text-decoration: underline wavy rgba(244, 63, 94, .75); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.gc-yes { margin: 12px 0 0; color: var(--ink); font-family: var(--display); font-size: clamp(27px, 3vw, 40px); font-weight: 800; line-height: 1.3; letter-spacing: -.025em; text-wrap: balance; }
.gc-yes span { color: var(--a); background: linear-gradient(transparent 64%, color-mix(in srgb, var(--a) 18%, transparent) 64%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.gc-ai { margin: 28px auto 0; max-width: 820px; color: var(--ink-2); font-size: clamp(18px, 1.6vw, 21px); line-height: 1.6; text-wrap: balance; }
.gr-edge { position: absolute; z-index: -1; display: none; height: auto; pointer-events: none; animation: floaty 8s ease-in-out infinite; filter: drop-shadow(0 22px 22px rgba(10, 22, 51, .2)); }
.ge-l { left: calc(50% - 50vw + 3.5vw); top: 10px; width: 150px; rotate: -12deg; }
.ge-r { right: calc(50% - 50vw + 3.5vw); top: 150px; width: 170px; rotate: 8deg; animation-delay: -4s; }
@media (min-width: 1300px) { .gr-edge { display: block; } }
.gr-end { position: relative; }
.gr-person { position: absolute; bottom: 0; z-index: 0; display: none; width: clamp(300px, 24vw, 470px); height: auto; pointer-events: none; -webkit-mask-image: linear-gradient(#000 72%, transparent 97%); mask-image: linear-gradient(#000 72%, transparent 97%); }
.gp-l { left: calc(50% - 50vw - 2.5vw); }
.gp-r { right: calc(50% - 50vw - 2.5vw); }
@media (min-width: 1300px) { .gr-person { display: block; } }

/* tablet + phone: a numbered vertical flow with arrows between the steps */
@media (max-width: 991.98px) {
    .gr-cyc { display: flex; flex-direction: column; align-items: stretch; row-gap: 0; max-width: 620px; margin-top: 56px; }
    .gr-ring, .gr-waves { display: none; }
    .gr-hub { order: -1; align-self: center; width: 240px; height: 240px; margin-bottom: 72px; }
    .gr-hub img { width: 118px; }
    .gr-step + .gr-step { margin-top: 96px; }
    .gr-step + .gr-step::before { content: "\2193"; position: absolute; left: 50%; top: -64px; color: var(--a); font-size: 38px; font-weight: 900; line-height: 1; transform: translateX(-50%); }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .gr { padding-bottom: 110px; }
    .gr-cyc { max-width: 696px; }
    /* the illustration moves beside the text so each step is a band, not a tower */
    .gr-step { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; column-gap: 26px; row-gap: 10px; padding: 24px 28px; }
    .gs-art { grid-column: 1; grid-row: 1 / span 2; height: 100%; min-height: 160px; margin: 0; }
    .gs-art img { max-height: 170px; }
    .gs-hd { grid-column: 2; grid-row: 1; align-self: end; margin-bottom: 0; }
    .gr-step p { grid-column: 2; grid-row: 2; align-self: start; }
}
@media (max-width: 767.98px) {
    .gr { padding: 28px 0 100px; }
    .gr-top { top: -60px; height: 150px; border-radius: 50% 50% 0 0 / 60px 60px 0 0; }
    .gr-glow { top: -155px; height: 130px; left: 0; right: 0; }
    .gt-br { display: none; }
    .gr-title { font-size: 32px; }
    .gr-sub { gap: 9px; font-size: 17px; }
    .gr-intro { font-size: 16.5px; }
    .gr-step { padding: 18px 20px 24px; }
    .gs-art { height: 130px; }
    .gs-art img { max-height: 130px; }
    .gr-step h3 { font-size: 20px; }
    .gr-step p { font-size: 16px; }
    .gr-close { margin-top: 64px; }
    .gc-not { margin-top: 30px; }
    .gc-yes { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
    .gr-sub i, .gr-orb, .gr-edge, .gr-person { animation: none; }
}

/* ==========================================================
   SECTION 10 — WHY BUSINESSES PAY (email ROI stats with source proof + source logos)
   Light cool-grey, a touch darker than Section 9 so the two read as different sections.
   ========================================================== */
.pr { position: relative; z-index: 4; isolation: isolate; overflow-x: clip; padding: 70px 0 130px; color: var(--ink); background: linear-gradient(180deg, #E7EDF7 0%, #EBF0F8 45%, #EEF2F9 100%); }

/* slanted edge meeting the section above (opaque polygon in this section's colour + a gradient line; no filter) */
.pr-edge { position: absolute; left: 0; top: -89px; width: 100%; height: 90px; overflow: visible; pointer-events: none; }
.pr-edge polyline { fill: none; stroke: url(#prEdge); vector-effect: non-scaling-stroke; }
.pr-edge .pe-glow { stroke-width: 12; opacity: .2; }
.pr-edge .pe-line { stroke-width: 3; }

/* background: soft colour glows + a dot grid that only shows toward the edges */
.pr-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
    background:
        radial-gradient(ellipse 34% 22% at 8% 10%, rgba(245, 158, 11, .12), transparent 70%),
        radial-gradient(ellipse 30% 22% at 94% 16%, rgba(25, 211, 255, .14), transparent 70%),
        radial-gradient(ellipse 30% 24% at 5% 58%, rgba(124, 58, 237, .1), transparent 70%),
        radial-gradient(ellipse 32% 22% at 95% 80%, rgba(22, 163, 74, .1), transparent 70%); }
.pr-bg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(10, 22, 51, .12) 1.2px, transparent 1.7px) 0 0 / 18px 18px;
    -webkit-mask-image: radial-gradient(ellipse 46% 60% at 50% 45%, transparent 64%, #000 100%); mask-image: radial-gradient(ellipse 46% 60% at 50% 45%, transparent 64%, #000 100%); }

/* 3D edges beside the header (desktop) */
.pr-3d { position: absolute; z-index: 0; display: none; height: auto; pointer-events: none; animation: floaty 8s ease-in-out infinite; filter: drop-shadow(0 22px 22px rgba(10, 22, 51, .22)); }
.p3-l { left: 2.6vw; top: 96px; width: 150px; rotate: -10deg; }
.p3-r { right: 2.6vw; top: 130px; width: 150px; rotate: 9deg; animation-delay: -4s; }
@media (min-width: 1300px) { .pr-3d { display: block; } }

/* header */
.pr-head { position: relative; z-index: 2; text-align: center; }
.pr-quote { max-width: 980px; margin: 0 auto; color: var(--ink-2); font-family: 'Playfair Display', serif; font-size: clamp(18px, 1.7vw, 24px); font-style: italic; font-weight: 700; line-height: 1.55; text-wrap: balance; }
.pr-quote b { font-weight: 900; background: linear-gradient(100deg, #E07A00, #F59E0B 45%, #EA580C); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pr-quote i { margin-right: 12px; color: var(--blue-2); font-size: .85em; vertical-align: .08em; }
.pr-rule { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 34px auto 0; }
.pr-rule i { width: 90px; height: 1px; background: linear-gradient(90deg, transparent, rgba(10, 22, 51, .28)); }
.pr-rule i:last-child { background: linear-gradient(90deg, rgba(10, 22, 51, .28), transparent); }
.pr-rule svg { width: 22px; height: 29px; }
.pr-title { margin: 20px auto 0; max-width: 1000px; color: var(--ink); font-family: var(--display); font-size: clamp(34px, 4.2vw, 60px); font-weight: 800; line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; }
.pr-title span { background: linear-gradient(100deg, #E07A00, #F59E0B 45%, #EA580C); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pr-sub { max-width: 900px; margin: 18px auto 0; color: #4E5D7E; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.55; text-wrap: balance; }
.pr-sub b { color: var(--ink); font-weight: 800; }

/* stat rows: stat + text on one side, the wide source proof on the other (alternating) */
.pr-list { display: flex; flex-direction: column; gap: 30px; max-width: 1140px; margin: 64px auto 0; }
.pr-row { --gx: 0%; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); grid-template-rows: auto auto; align-items: center; gap: 14px 48px; padding: 36px 40px; border-radius: 28px;
    background: radial-gradient(ellipse 36% 90% at var(--gx) 50%, color-mix(in srgb, var(--a) 11%, transparent), transparent 70%), #fff;
    box-shadow: 0 34px 60px -40px rgba(10, 22, 51, .38), 0 0 0 1.5px color-mix(in srgb, var(--a) 16%, transparent); }
.pr-row::before { content: ""; position: absolute; left: 40px; right: 40px; top: 0; height: 4px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--a), var(--a2)); }
.pr-row:nth-child(even) { --gx: 100%; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.pr-stat { grid-column: 1; grid-row: 1; align-self: end; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; justify-content: start; column-gap: 14px; text-align: left; }
.pr-txt { grid-column: 1; grid-row: 2; align-self: start; }
.pr-proof { grid-column: 2; grid-row: 1 / span 2; }
.pr-row:nth-child(even) .pr-stat, .pr-row:nth-child(even) .pr-txt { grid-column: 2; }
.pr-row:nth-child(even) .pr-proof { grid-column: 1; }
.pr-stat .pr-emo { grid-row: 1 / span 2; }
.pr-emo { display: block; font-size: 42px; line-height: 1; filter: drop-shadow(0 8px 10px rgba(10, 22, 51, .22)); }
.pr-num { display: block; background: linear-gradient(135deg, var(--a), color-mix(in srgb, var(--a) 62%, #0A1633)); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: var(--display); font-size: 60px; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.pr-stat small { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; font-weight: 800; line-height: 1.35; letter-spacing: .12em; text-transform: uppercase; }
.pr-txt h3 { margin: 0; color: var(--ink); font-family: var(--display); font-size: 25px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.pr-txt p { margin: 10px 0 0; color: #4E5D7E; font-size: 17px; line-height: 1.62; }
.pr-txt p strong { color: var(--ink); font-weight: 700; }
.pr-src { display: inline-block; margin-top: 14px; color: color-mix(in srgb, var(--a) 78%, #0A1633); font-size: 13px; font-weight: 800; letter-spacing: .04em; }

/* source proof: the real page in a small browser window, the source's logo floating on its corner */
.pr-proof { position: relative; display: block; min-width: 0; color: inherit; text-decoration: none; rotate: 1deg; }
.pr-row:nth-child(even) .pr-proof { rotate: -1deg; }
.pp-win { display: block; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 26px 46px -26px rgba(10, 22, 51, .5), 0 0 0 1px rgba(10, 22, 51, .1), 0 0 40px -16px color-mix(in srgb, var(--a) 55%, transparent); }
.pp-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-bottom: 1px solid #DDE3EE; background: #EEF1F6; }
.pp-bar i { width: 9px; height: 9px; flex: none; border-radius: 50%; background: #FF5F57; }
.pp-bar i:nth-child(2) { background: #FEBC2E; }
.pp-bar i:nth-child(3) { background: #28C840; }
.pp-bar em { flex: 1; min-width: 0; overflow: hidden; margin-left: 8px; padding: 3px 10px; border-radius: 6px; background: #fff; color: #5A6A8C; font-size: 11.5px; font-style: normal; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.pp-win img { display: block; width: 100%; height: auto; }
.pr-brand { position: absolute; right: -30px; top: -40px; z-index: 2; display: grid; place-items: center; height: 74px; padding: 0 20px; border-radius: 16px; background: #fff; rotate: 6deg; box-shadow: 0 18px 32px -14px rgba(10, 22, 51, .45), 0 0 0 1px rgba(10, 22, 51, .06); animation: floaty 6s ease-in-out infinite; }
.pr-brand img { display: block; width: auto; height: 42px; max-width: 180px; object-fit: contain; }
.pr-brand img[src*="brand-dma"] { height: 52px; }
.pr-row:nth-child(even) .pr-brand { rotate: -5deg; animation-delay: -3s; }

/* what it means */
.pr-means { margin: 84px auto 0; text-align: center; }
.pm-lead { margin: 0; color: var(--ink-2); font-size: clamp(19px, 1.8vw, 24px); font-weight: 700; }
.pm-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; margin: 18px 0 0; font-family: var(--display); font-size: clamp(22px, 2.4vw, 32px); font-weight: 800; letter-spacing: -.02em; }
.pm-line span { padding: 3px 16px 5px; border-radius: 10px; background: linear-gradient(100deg, #FFE066, #FFD84D); color: var(--ink); box-shadow: 0 14px 30px -16px rgba(200, 150, 0, .6); }
.pm-line i { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-2); }

/* the source screenshots ARE the proof — give them enough width to actually be read */
@media (min-width: 1200px) {
    .pr-list { max-width: 1300px; }
    .pr-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.58fr); }
    .pr-row:nth-child(even) { grid-template-columns: minmax(0, 1.58fr) minmax(0, 1fr); }
}
@media (max-width: 991.98px) {
    .pr-row, .pr-row:nth-child(even) { --gx: 0%; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 28px 22px 26px; }
    .pr-stat, .pr-txt, .pr-proof, .pr-row:nth-child(even) .pr-stat, .pr-row:nth-child(even) .pr-txt, .pr-row:nth-child(even) .pr-proof { grid-column: auto; grid-row: auto; }
    .pr-emo { font-size: 34px; }
    .pr-num { font-size: 48px; }
    .pr-proof, .pr-row:nth-child(even) .pr-proof { rotate: 0deg; margin-top: 16px; }
    .pr-brand, .pr-row:nth-child(even) .pr-brand { right: 8px; left: auto; top: -30px; height: 58px; padding: 0 14px; rotate: 4deg; }
    .pr-brand img { height: 32px; }
    .pr-brand img[src*="brand-dma"] { height: 40px; }
}
@media (max-width: 767.98px) {
    .pr { padding: 50px 0 100px; }
    .pr-edge { top: -39px; height: 40px; }
    .pr-quote { font-size: 17px; }
    .pr-title { font-size: 31px; }
    .pr-sub { font-size: 16.5px; }
    .pr-list { gap: 22px; margin-top: 44px; }
    .pr-row::before { left: 22px; right: 22px; }
    .pr-txt h3 { font-size: 21px; }
    .pr-txt p { font-size: 16px; }
    .pr-num { font-size: 42px; }
    .pr-means { margin-top: 60px; }
    .pm-line { flex-direction: column; gap: 12px; font-size: 22px; }
    .pm-line i { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .pr-3d, .pr-brand { animation: none; }
}

/* ==========================================================
   SECTION 11 — THE BUSINESS BEHIND THE PUBLICATION (light lavender-white)
   ========================================================== */
.bh { position: relative; z-index: 5; isolation: isolate; overflow-x: clip; padding: 48px 0 130px; color: var(--ink); background: linear-gradient(180deg, #F4F2FE 0%, #F7F6FE 50%, #F5F8FD 100%); }

/* soft wave edge meeting the section above (opaque shape in this section's colour + gradient line; no filter) */
.bh-wave { position: absolute; left: 0; top: -79px; width: 100%; height: 80px; overflow: visible; pointer-events: none; }
.bh-wave .bw-glow, .bh-wave .bw-line { fill: none; stroke: url(#bhWave); vector-effect: non-scaling-stroke; }
.bh-wave .bw-glow { stroke-width: 12; opacity: .18; }
.bh-wave .bw-line { stroke-width: 3; }

.bh-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
    background:
        radial-gradient(ellipse 34% 24% at 6% 18%, rgba(124, 58, 237, .12), transparent 70%),
        radial-gradient(ellipse 30% 22% at 95% 30%, rgba(22, 131, 255, .12), transparent 70%),
        radial-gradient(ellipse 32% 22% at 94% 78%, rgba(245, 158, 11, .1), transparent 70%); }
.bh-bg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(124, 58, 237, .13) 1.2px, transparent 1.7px) 0 0 / 18px 18px;
    -webkit-mask-image: radial-gradient(ellipse 46% 60% at 50% 40%, transparent 64%, #000 100%); mask-image: radial-gradient(ellipse 46% 60% at 50% 40%, transparent 64%, #000 100%); }

.bh-title { max-width: 1000px; margin: 0 auto; color: var(--ink); font-family: var(--display); font-size: clamp(34px, 4.3vw, 60px); font-weight: 800; line-height: 1.14; letter-spacing: -.035em; text-align: center; text-wrap: balance; }
.bh-title .hl-box { display: inline-block; padding: 0 .2em .06em; rotate: -1.5deg; }

/* three beats (numbered, joined by a line) + the reveal illustration */
.bh-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 56px; max-width: 1120px; margin: 64px auto 0; }
.bh-beats { position: relative; display: flex; flex-direction: column; gap: 34px; margin: 0; padding: 0; list-style: none; }
.bh-beats::before { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, #0B5CFF, #7C3AED, #EA580C); opacity: .35; }
.bh-beats li { position: relative; display: flex; align-items: center; gap: 22px; }
.bh-no { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--a), var(--a2)); color: #fff; font-family: var(--display); font-size: 24px; font-weight: 800; box-shadow: 0 0 0 6px #F6F4FE, 0 14px 26px -12px color-mix(in srgb, var(--a) 75%, transparent); }
.bh-beats p { margin: 0; color: #3E4B6A; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.45; text-wrap: pretty; }
.bh-beats b { color: var(--ink); font-weight: 800; }
.bh-art { position: relative; margin: 0; text-align: center; }
.bh-art::before { content: ""; position: absolute; inset: 8% 6% 4%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(124, 58, 237, .16), rgba(22, 131, 255, .08) 60%, transparent); }
.bh-art img { display: block; width: 100%; max-width: 500px; height: auto; margin: 0 auto; filter: drop-shadow(0 26px 30px rgba(10, 22, 51, .18)); }

/* the chain: four nodes on a gradient track, arrowheads between */
.bh-chain { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1060px; margin: 96px auto 0; padding: 0; list-style: none; }
.bh-chain::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 50px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #0B5CFF, #7C3AED, #EA580C, #F59E0B); }
.bh-chain li { position: relative; text-align: center; }
.bh-chain li + li::before { content: ""; position: absolute; left: 0; top: 43px; border-left: 16px solid color-mix(in srgb, var(--a) 85%, #0A1633); border-top: 9px solid transparent; border-bottom: 9px solid transparent; transform: translateX(-50%); }
.bh-ic { position: relative; display: grid; place-items: center; width: 104px; height: 104px; margin: 0 auto; border-radius: 50%; background: #fff; box-shadow: 0 18px 32px -16px rgba(10, 22, 51, .4), 0 0 0 5px color-mix(in srgb, var(--a) 22%, #fff); }
.bh-ic img { width: 70px; height: 70px; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(10, 22, 51, .2)); }
.bh-chain small { display: block; margin-top: 16px; color: var(--a); font-size: 12px; font-weight: 800; letter-spacing: .16em; }
.bh-chain b { display: block; margin-top: 4px; color: var(--ink); font-family: var(--display); font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.bh-gold .bh-ic { background: radial-gradient(circle at 50% 40%, #FFF8E4, #FFFFFF 70%); box-shadow: 0 18px 32px -14px rgba(245, 158, 11, .6), 0 0 0 5px #FFE7A3, 0 0 40px -6px rgba(255, 190, 80, .7); }
.bh-gold b { background: linear-gradient(100deg, #E07A00, #F59E0B 45%, #EA580C); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* the payoff line */
.bh-reveal { max-width: 940px; margin: 76px auto 0; color: var(--ink); font-family: var(--display); font-size: clamp(30px, 3.6vw, 50px); font-weight: 800; line-height: 1.16; letter-spacing: -.03em; text-align: center; text-wrap: balance; }
.bh-reveal span { background: linear-gradient(100deg, #E07A00, #F59E0B 45%, #EA580C); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* where it's heading: a contained navy panel */
.bh-pwrap { position: relative; }
.bh-panel { position: relative; overflow: hidden; max-width: 1080px; margin: 88px auto 0; padding: 64px 72px 60px; border-radius: 36px; color: var(--ink); text-align: center;
    background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(255, 255, 255, .85), transparent 70%), radial-gradient(ellipse 40% 60% at 100% 100%, rgba(139, 92, 246, .2), transparent 70%), radial-gradient(ellipse 36% 50% at 0% 100%, rgba(25, 211, 255, .18), transparent 70%), linear-gradient(160deg, #EAE5FF 0%, #E4E8FF 50%, #DDEBFF 100%);
    box-shadow: 0 40px 80px -50px rgba(76, 29, 149, .45), inset 0 0 0 1.5px rgba(124, 58, 237, .16); }
.bh-panel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(124, 58, 237, .14) 1.2px, transparent 1.7px) 0 0 / 18px 18px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); pointer-events: none; }
.bh-p1 { position: relative; margin: 0; font-family: var(--display); font-size: clamp(26px, 3vw, 40px); font-weight: 800; line-height: 1.25; letter-spacing: -.025em; text-wrap: balance; }
.bh-p1 span { background: linear-gradient(100deg, #6D28D9, #4F46E5 45%, #1683FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bh-div { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; margin: 30px auto 0; }
.bh-div i { width: 80px; height: 1px; background: linear-gradient(90deg, transparent, rgba(10, 22, 51, .25)); }
.bh-div i:last-child { background: linear-gradient(90deg, rgba(10, 22, 51, .25), transparent); }
.bh-div svg { width: 18px; height: 18px; fill: #8B5CF6; }
.bh-p2 { position: relative; max-width: 820px; margin: 26px auto 0; color: #4E5D7E; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.6; text-wrap: balance; }
.bh-p2 mark { padding: 0 .12em; border-radius: 3px; background: linear-gradient(transparent 14%, #FFE066 14%, #FFD84D 88%, transparent 88%); color: var(--ink); font-weight: 700; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.bh-fx-l { left: calc(50% - 50vw + 1vw); }
.bh-fx-r { right: calc(50% - 50vw + 1vw); }
@media (min-width: 1400px) {
    .bh-grid { max-width: 1000px; }
    .bh-panel { max-width: 1000px; }
}
@media (max-width: 991.98px) {
    .bh-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 640px; }
    .bh-art img { max-width: 420px; }
    .bh-chain { grid-template-columns: repeat(2, 1fr); row-gap: 40px; max-width: 520px; }
    .bh-chain::before, .bh-chain li + li::before { display: none; }
}
/* tablet: the beats stay beside the art and the chain stays a left-to-right run */
@media (min-width: 768px) and (max-width: 991.98px) {
    .bh-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; max-width: 696px; }
    .bh-beats { gap: 26px; }
    .bh-beats::before { left: 22px; }
    .bh-beats p { font-size: 17px; }
    .bh-no { width: 46px; height: 46px; font-size: 20px; }
    .bh-art img { max-width: 324px; }
    .bh-chain { grid-template-columns: repeat(4, 1fr); row-gap: 0; max-width: 696px; }
    .bh-chain::before { display: block; top: 38px; }
    .bh-chain li + li::before { display: block; top: 31px; border-left-width: 13px; }
    .bh-ic { width: 80px; height: 80px; box-shadow: 0 16px 28px -16px rgba(10, 22, 51, .4), 0 0 0 4px color-mix(in srgb, var(--a) 22%, #fff); }
    .bh-ic img { width: 54px; height: 54px; }
    .bh-chain small { margin-top: 12px; font-size: 11px; letter-spacing: .12em; }
    .bh-chain b { font-size: 16px; }
}
@media (max-width: 767.98px) {
    .bh { padding: 60px 0 100px; }
    .bh-wave { top: -39px; height: 40px; }
    .bh-title { font-size: 31px; }
    .bh-grid { margin-top: 44px; }
    .bh-beats { gap: 26px; }
    .bh-beats::before { left: 22px; }
    .bh-no { width: 46px; height: 46px; font-size: 20px; }
    .bh-beats p { font-size: 18px; }
    .bh-chain { margin-top: 64px; }
    .bh-ic { width: 88px; height: 88px; }
    .bh-ic img { width: 58px; height: 58px; }
    .bh-chain b { font-size: 18px; }
    .bh-reveal { margin-top: 56px; font-size: 28px; }
    .bh-panel { margin-top: 64px; padding: 44px 22px 40px; border-radius: 26px; }
    .bh-p1 { font-size: 24px; }
    .bh-p2 { font-size: 16.5px; }
}

/* ==========================================================
   SECTION 12 — 3 SIMPLE STEPS (after the CinemaStudio steps section)
   ========================================================== */
.tp { position: relative; z-index: 6; isolation: isolate; overflow-x: clip; padding: 0 0 130px; color: var(--ink); background: linear-gradient(180deg, #E9EFFB 0%, #E1E9F7 46%, #E9EFFB 100%); }
.tp-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
    background:
        radial-gradient(ellipse 40% 26% at 6% 12%, rgba(22, 131, 255, .16), transparent 70%),
        radial-gradient(ellipse 34% 26% at 96% 26%, rgba(139, 92, 246, .16), transparent 70%),
        radial-gradient(ellipse 36% 24% at 4% 64%, rgba(22, 197, 94, .12), transparent 70%),
        radial-gradient(ellipse 36% 24% at 98% 84%, rgba(25, 211, 255, .14), transparent 70%); }
.tp-bg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(10, 22, 51, .1) 1.2px, transparent 1.7px) 0 0 / 18px 18px;
    -webkit-mask-image: radial-gradient(ellipse 44% 54% at 50% 46%, transparent 62%, #000 100%); mask-image: radial-gradient(ellipse 44% 54% at 50% 46%, transparent 62%, #000 100%); }
.tp-sky { position: absolute; left: 0; right: 0; bottom: 0; height: 300px; background: url(../images/skyline-night.svg) center bottom / auto 100% repeat-x; opacity: .12;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%); mask-image: linear-gradient(180deg, transparent, #000 60%); }

/* navy word band the card overlaps */
.tp-band { position: relative; display: flex; align-items: center; height: 200px; overflow: hidden; background: radial-gradient(ellipse 50% 120% at 50% 0%, rgba(25, 211, 255, .18), transparent 70%), linear-gradient(90deg, #07102B, #10286A 50%, #07102B); }
.tp-band::after { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(127, 227, 255, .14) 1.2px, transparent 1.7px) 0 0 / 18px 18px; pointer-events: none; }
.tp-band-in { display: flex; align-items: center; gap: 36px; padding: 0 0 40px 48px; white-space: nowrap; font-family: 'Anton', sans-serif; font-size: 118px; line-height: 1; letter-spacing: .01em; text-transform: uppercase; }
.tp-band-in span { background-clip: text; -webkit-background-clip: text; color: transparent; }
.tp-band-in .tpw1 { background-image: linear-gradient(180deg, #BBF7D0, #22C55E); }
.tp-band-in .tpw2 { background-image: linear-gradient(180deg, #BFDBFE, #1683FF); }
.tp-band-in .tpw3 { background-image: linear-gradient(180deg, #E9D5FF, #8B5CF6); }
.tp-band-in i { color: #FFD76A; font-size: 54px; font-style: normal; }

/* the big white card */
.tp-card { position: relative; z-index: 1; width: min(1280px, calc(100% - 32px)); margin: -84px auto 0; padding: 84px 0 76px; overflow: hidden; border-radius: 44px; background: #fff; box-shadow: 0 50px 100px -56px rgba(10, 22, 51, .4), 0 0 0 1px rgba(10, 22, 51, .06); }
.tp-title { max-width: 1040px; margin: 0 auto; padding: 0 40px; color: var(--ink); font-family: var(--display); font-size: clamp(34px, 4vw, 58px); font-weight: 800; line-height: 1.14; letter-spacing: -.035em; text-align: center; text-wrap: balance; }
.tp-title .hl-box { display: inline-block; padding: 0 .2em .06em; rotate: -1.5deg; }

/* zig-zag step rows; the keyword band runs in from the card edge */
.tp-row { --ag: linear-gradient(100deg, var(--a), color-mix(in srgb, var(--a) 55%, var(--a2))); display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); align-items: center; margin-top: 64px; }
.tp-txt { position: relative; padding: 0 3% 0 72px; }
.tp-flip { grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); }
.tp-flip .tp-txt { order: 2; padding: 0 72px 0 3%; }
.tp-ghost { position: absolute; left: 40px; top: -74px; z-index: 0; color: transparent; font-family: 'Anton', sans-serif; font-size: 190px; line-height: 1; letter-spacing: .02em; pointer-events: none; -webkit-text-stroke: 2px color-mix(in srgb, var(--a) 26%, transparent); }
.tp-flip .tp-ghost { left: auto; right: 40px; }
.tp-head { position: relative; display: flex; align-items: center; gap: 16px; }
.tp-num { display: grid; place-items: center; width: 74px; height: 74px; flex: none; border-radius: 24px; background: var(--ag); color: #fff; font-family: 'Anton', sans-serif; font-size: 36px; line-height: 1; letter-spacing: .02em; box-shadow: 0 18px 30px -14px color-mix(in srgb, var(--a) 80%, transparent), inset 0 2px 0 rgba(255, 255, 255, .35); }
.tp-step { display: flex; align-items: center; gap: 12px; color: var(--a); font-size: 14px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.tp-step::before { content: ""; width: 34px; height: 3px; border-radius: 3px; background: var(--ag); }
.tp-txt h3 { position: relative; margin: 20px 0 0; color: var(--ink); font-family: var(--display); font-size: clamp(26px, 2.6vw, 38px); font-weight: 800; line-height: 1.18; letter-spacing: -.025em; }
.tp-txt p { position: relative; margin: 12px 0 0; color: #4E5D7E; font-size: 18px; line-height: 1.62; }
.tp-txt .tp-lead { color: var(--ink-2) !important; font-weight: 600; }
.tp-txt b, .tp-txt strong { color: var(--ink); font-weight: 800; }
.tp-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.tp-feats li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fff; color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.25; box-shadow: 0 10px 20px -16px rgba(10, 22, 51, .35), 0 0 0 1px color-mix(in srgb, var(--a) 18%, transparent); }
.tp-feats i { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: color-mix(in srgb, var(--a) 10%, #fff); font-size: 18px; font-style: normal; line-height: 1; }

/* product screens (same em-scaled .scr system as Section 7) */
.tp-shot { position: relative; margin: 0 48px 0 12px; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 26px; container-type: inline-size; box-shadow: 0 34px 64px -36px color-mix(in srgb, var(--a) 55%, #0A1633), 0 0 0 1.5px color-mix(in srgb, var(--a) 18%, transparent); }
.tp-flip .tp-shot { margin: 0 12px 0 48px; }
.tp-shot .scr { --u: .8cqw; }
.tp-shot .sw { width: 114em; height: 71em; }

/* 1 · create publication */
.c1-body { display: grid; grid-template-columns: 27em 1fr; height: calc(100% - 5.4em); }
.c1-steps { display: flex; flex-direction: column; gap: 2em; padding: 4.4em 2.6em; border-right: 1px solid #E6EBF3; background: #F6F8FC; }
.c1-steps span { display: flex; align-items: center; gap: .6em; color: var(--muted); font-size: 2.3em; font-weight: 700; }
.c1-steps span b { display: grid; place-items: center; width: 1.6em; height: 1.6em; flex: none; border-radius: 50%; background: var(--a); color: #fff; font-size: .8em; }
.c1-steps .cur { color: var(--ink); }
.c1-steps .cur b { background: var(--ag); box-shadow: 0 0 0 .3em color-mix(in srgb, var(--a) 22%, transparent); }
.c1-main { display: flex; flex-direction: column; gap: 2.2em; padding: 3.8em 4.2em; }
.c1-h { font-family: var(--display); font-size: 3.8em; letter-spacing: -.02em; }
.c1-f small { display: block; margin-bottom: .4em; color: var(--muted); font-size: 1.9em; font-weight: 700; }
.c1-f > span { display: flex; align-items: center; gap: .5em; padding: .55em .8em; border-radius: .5em; background: #fff; font-size: 2.4em; font-weight: 700; box-shadow: inset 0 0 0 1px #DCE3EF; }
.c1-f > span em { margin-left: auto; color: var(--a); font-style: normal; font-weight: 900; }
.c1-f.act > span { box-shadow: inset 0 0 0 .1em var(--a), 0 0 0 .25em color-mix(in srgb, var(--a) 15%, transparent); }
.c1-row { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 3em; }
.c1-f > .c1-sw { gap: .55em; padding: .3em 0; background: transparent; box-shadow: none; }
.c1-sw i { width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--c); }
.c1-sw i.on { box-shadow: 0 0 0 .18em #fff, 0 0 0 .34em var(--c); }
.c1-logo { display: flex; align-items: center; gap: 1.2em; padding: 1.6em 2em; border-radius: 1.6em; background: color-mix(in srgb, var(--a) 8%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a) 22%, transparent); }
.c1-logo svg { width: 2.8em; height: 3.8em; flex: none; }
.c1-logo b { display: block; font-family: 'Playfair Display', serif; font-size: 2.7em; font-weight: 900; line-height: 1.05; }
.c1-logo small { display: block; color: var(--muted); font-size: 1.8em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.c1-go { align-self: flex-start; margin-top: .4em; font-size: 2.6em; }
.c1-timer { position: absolute; right: 4em; top: 3.4em; z-index: 3; padding: .45em .9em; border-radius: 2em; background: var(--ink); color: #fff; font-size: 2em; font-weight: 800; box-shadow: 0 1em 2em -1em rgba(10, 22, 51, .6); }

/* 2 · AI articles */
.c2-body { display: grid; grid-template-columns: 1fr 34em; height: calc(100% - 5.4em); }
.c2-list { display: flex; flex-direction: column; gap: 1.8em; padding: 3.2em 3.6em; }
.c2-hd { display: flex; align-items: center; justify-content: space-between; }
.c2-hd b { font-family: var(--display); font-size: 3.4em; letter-spacing: -.02em; }
.c2-hd .s-btn { font-size: 2.1em; }
.c2-art { display: flex; gap: 1.8em; padding: 1.6em; border-radius: 1.6em; background: #fff; box-shadow: 0 0 0 1px #E4E9F2, 0 1em 2em -1.4em rgba(10, 22, 51, .3); }
.c2-art img { width: 13em; height: 10em; flex: none; border-radius: 1em; }
.c2-art b { display: block; font-size: 2.3em; line-height: 1.2; }
.c2-art small { display: block; margin-top: .3em; color: var(--muted); font-size: 1.8em; font-weight: 600; }
.c2-tags { display: flex; gap: .8em; margin-top: 1em; }
.c2-tags em { padding: .2em .6em; border-radius: .5em; background: color-mix(in srgb, var(--a) 12%, #fff); color: var(--a); font-size: 1.7em; font-style: normal; font-weight: 800; }
.c2-tags em.aeo { background: #F3E8FF; color: #7C3AED; }
.c2-side { display: flex; flex-direction: column; align-items: center; gap: 2.6em; padding: 3.6em 3em; border-left: 1px solid #E6EBF3; background: #F6F8FC; }
.c2-ring { position: relative; width: 20em; height: 20em; }
.c2-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.c2-ring circle { fill: none; stroke-width: 3.4; }
.c2-ring .t { stroke: #E3E9F3; }
.c2-ring .v { stroke: var(--a); stroke-dasharray: 96 100; stroke-linecap: round; }
.c2-ring b { position: absolute; left: 0; right: 0; top: 30%; font-family: var(--display); font-size: 5.4em; line-height: 1; text-align: center; }
.c2-ring small { position: absolute; left: 0; right: 0; top: 63%; color: var(--muted); font-size: 1.8em; font-weight: 700; text-align: center; }
.c2-chk { display: flex; flex-direction: column; gap: 1.2em; width: 100%; margin: 0; padding: 0; list-style: none; }
.c2-chk li { display: flex; align-items: center; gap: .6em; font-size: 2.1em; font-weight: 700; }
.c2-chk li::before { content: "\2713"; display: grid; place-items: center; width: 1.3em; height: 1.3em; flex: none; border-radius: 50%; background: #DCFCE7; color: #16A34A; font-size: .8em; font-weight: 900; }

/* 3 · newsletter builder */
.c3-body { display: grid; grid-template-columns: 38em 1fr; height: calc(100% - 5.4em); }
.c3-pick { display: flex; flex-direction: column; gap: 1.4em; padding: 3.2em 2.8em; border-right: 1px solid #E6EBF3; background: #F6F8FC; }
.c3-h { font-size: 2.6em; }
.c3-it { display: flex; align-items: center; gap: 1.2em; padding: 1.2em; border-radius: 1.2em; background: #fff; box-shadow: 0 0 0 1px #E4E9F2; }
.c3-it.on { box-shadow: inset 0 0 0 .25em color-mix(in srgb, var(--a) 70%, transparent); }
.c3-drag { color: #A0AAC0; font-size: 2em; letter-spacing: -.25em; }
.c3-it img { width: 7em; height: 5.4em; flex: none; border-radius: .8em; }
.c3-it span { flex: 1; font-size: 1.9em; font-weight: 700; line-height: 1.25; }
.c3-it em { display: grid; place-items: center; width: 3.2em; height: 3.2em; flex: none; border-radius: 50%; background: var(--a); color: #fff; font-size: 1.5em; font-style: normal; font-weight: 900; }
.c3-it em:empty { background: #fff; box-shadow: inset 0 0 0 .15em #CBD5E1; }
.c3-issue { display: flex; flex-direction: column; gap: 1.8em; padding: 3em 3.6em; }
.c3-mast { display: flex; align-items: center; gap: 1em; padding-bottom: 1.6em; border-bottom: 1px solid #EDF1F7; }
.c3-mast svg { width: 2.6em; height: 3.5em; flex: none; }
.c3-mast b { font-family: 'Playfair Display', serif; font-size: 3em; font-weight: 900; }
.c3-mast small { margin-left: auto; color: var(--muted); font-size: 1.8em; font-weight: 700; }
.c3-story { display: flex; gap: 1.8em; }
.c3-story img { width: 16em; height: 11em; flex: none; border-radius: 1.2em; }
.c3-story div { flex: 1; }
.c3-story b { display: block; font-family: var(--display); font-size: 2.4em; line-height: 1.15; letter-spacing: -.02em; }
.c3-send { margin-top: auto; padding: .7em 0; font-size: 2.4em; }

/* wide stage in a narrow card (phones): bigger units, drop the side panels */
@container (max-width: 480px) {
    .tp-shot .scr { --u: 1.05cqw; }
    .tp-shot .sw { width: 88em; height: 66em; }
    .c1-body, .c2-body, .c3-body { grid-template-columns: 1fr; }
    .c1-steps, .c2-side, .c3-pick, .c1-timer { display: none; }
    .c1-main { gap: 1.8em; padding: 3em 3.4em; }
    .c1-row .c1-logo { display: none; }
    .c3-story + .c3-story { display: none; }
}

/* connectors between the rows */
.tp-conn { display: block; width: 46%; max-width: 560px; height: auto; margin: 10px auto; overflow: visible; }
.tp-conn path { fill: none; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1 13; }

/* recap */
.tp-recap { margin: 84px auto 0; padding: 0 40px; text-align: center; }
.tp-its { margin: 0; color: var(--ink); font-family: var(--display); font-size: clamp(40px, 4.4vw, 64px); font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.tp-flow { display: flex; max-width: 980px; margin: 30px auto 0; padding: 0; list-style: none; }
.tp-flow li { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 78px; margin-left: -18px; padding: 0 46px 0 58px; background: linear-gradient(100deg, var(--a), color-mix(in srgb, var(--a) 62%, #fff)); color: #fff; clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 50%, calc(100% - 34px) 100%, 0 100%, 34px 50%); }
.tp-flow li:first-child { margin-left: 0; padding-left: 30px; clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 50%, calc(100% - 34px) 100%, 0 100%); border-radius: 16px 0 0 16px; }
.tp-flow i { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .95); color: var(--a); font-size: 16px; font-style: normal; font-weight: 900; }
.tp-flow b { font-family: var(--display); font-size: 19px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; text-align: left; }
.tp-team { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 26px; margin: 56px auto 0; }
.tt-old { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.tt-role { position: relative; width: 94px; text-align: center; }
.tt-role i { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; background: #F1F4F9; font-size: 30px; font-style: normal; filter: grayscale(.4); opacity: .85; }
.tt-role::after { content: ""; position: absolute; left: 50%; top: 32px; width: 74px; height: 3px; border-radius: 3px; background: #F43F5E; transform: translate(-50%, -50%) rotate(-35deg); }
.tt-role small { display: block; margin-top: 8px; color: var(--muted); font-size: 13px; font-weight: 700; }
.tt-arrow { color: var(--blue-2); font-size: 40px; font-weight: 900; line-height: 1; }
.tt-new { text-align: center; }
.tt-av { position: relative; display: block; width: 96px; height: 96px; margin: 0 auto; border-radius: 50%; box-shadow: 0 0 0 5px #fff, 0 0 0 8px rgba(22, 131, 255, .35), 0 20px 40px -16px rgba(11, 92, 255, .6); }
.tt-av img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.tt-av i { position: absolute; right: -6px; bottom: -4px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--grad); font-size: 18px; font-style: normal; box-shadow: 0 0 0 3px #fff; }
.tt-new b { display: block; margin-top: 12px; color: var(--ink); font-size: 16px; font-weight: 800; }
.tp-close { max-width: 900px; margin: 40px auto 0; color: #3E4B6A; font-size: clamp(19px, 1.9vw, 24px); line-height: 1.6; text-wrap: balance; }
.tp-close b { color: var(--ink); font-weight: 800; }
.tp-close mark { padding: 0 .12em; border-radius: 3px; background: linear-gradient(transparent 14%, #FFE066 14%, #FFD84D 88%, transparent 88%); color: var(--ink); font-weight: 700; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

@media (max-width: 991.98px) {
    .tp-band { height: 150px; }
    .tp-band-in { padding-left: 28px; font-size: 84px; }
    .tp-card { margin-top: -60px; padding: 64px 0 60px; border-radius: 32px; }
    .tp-row, .tp-flip { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .tp-txt, .tp-flip .tp-txt { order: 0; padding: 0 32px; }
    .tp-ghost, .tp-flip .tp-ghost { left: 32px; right: auto; top: -58px; font-size: 150px; }
    .tp-shot, .tp-flip .tp-shot { margin: 0 24px; }
    .tp-conn { width: 60%; }
    .tp-flow { flex-direction: column; gap: 10px; max-width: 420px; }
    .tp-flow li, .tp-flow li:first-child { margin-left: 0; padding: 0 20px; border-radius: 16px; clip-path: none; justify-content: flex-start; }
}
/* tablet: keep the desktop zig-zag — stacking here made the screenshots render
   near desktop size below the text and ballooned every row */
@media (min-width: 768px) and (max-width: 991.98px) {
    .tp-row { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: 0; }
    .tp-flip { grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); }
    .tp-txt { order: 0; padding: 0 2% 0 34px; }
    .tp-flip .tp-txt { order: 2; padding: 0 34px 0 2%; }
    .tp-ghost { left: 22px; right: auto; top: -52px; font-size: 118px; }
    .tp-flip .tp-ghost { left: auto; right: 22px; }
    .tp-num { width: 58px; height: 58px; border-radius: 18px; font-size: 28px; }
    .tp-step { gap: 10px; font-size: 12.5px; letter-spacing: .18em; }
    .tp-step::before { width: 26px; }
    .tp-txt h3 { margin-top: 16px; font-size: 26px; }
    .tp-txt p { font-size: 16.5px; }
    .tp-feats { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .tp-feats li { padding: 9px 11px; font-size: 14px; }
    .tp-shot { margin: 0 24px 0 0; }
    .tp-flip .tp-shot { margin: 0 0 0 24px; }
    /* the recap keeps its chevron run */
    .tp-flow { flex-direction: row; gap: 0; max-width: 700px; }
    .tp-flow li { margin-left: -18px; padding: 0 30px 0 42px; border-radius: 0; justify-content: center;
        clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%, 26px 50%); }
    .tp-flow li:first-child { margin-left: 0; padding-left: 22px; border-radius: 16px 0 0 16px;
        clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%); }
    .tp-flow i { width: 28px; height: 28px; font-size: 14px; }
    .tp-flow b { font-size: 15px; }
}
@media (max-width: 767.98px) {
    .tp { padding-bottom: 90px; }
    .tp-band { height: 120px; }
    .tp-band-in { gap: 22px; padding: 0 0 30px 18px; font-size: 64px; }
    .tp-band-in i { font-size: 32px; }
    .tp-card { width: calc(100% - 20px); margin-top: -46px; padding: 50px 0 48px; border-radius: 26px; }
    .tp-title { padding: 0 20px; font-size: 30px; }
    .tp-row { margin-top: 44px; }
    .tp-txt, .tp-flip .tp-txt { padding: 0 20px; }
    .tp-ghost, .tp-flip .tp-ghost { left: 20px; top: -42px; font-size: 108px; }
    .tp-num { width: 58px; height: 58px; border-radius: 18px; font-size: 28px; }
    .tp-step { gap: 9px; font-size: 12px; letter-spacing: .18em; }
    .tp-step::before { width: 24px; }
    .tp-txt p { font-size: 16.5px; }
    .tp-feats { grid-template-columns: minmax(0, 1fr); }
    .tp-shot, .tp-flip .tp-shot { margin: 0 14px; }
    .tp-conn { width: 70%; }
    .tp-recap { margin-top: 60px; padding: 0 20px; }
    .tt-role { width: 76px; }
    .tt-arrow { transform: rotate(90deg); }
    .tp-close { font-size: 18px; }
}

/* ==========================================================
   SECTION 13 — YOUR PUBLICATION IS LIVE
   A deeper blue-grey tint than Section 12 (different, but not a dark section)
   ========================================================== */
.lv { position: relative; z-index: 7; isolation: isolate; overflow-x: clip; padding: 28px 0 120px; color: var(--ink); background: #EFF4FE; }
.lv-bg { position: absolute; left: -10%; right: -10%; top: -92px; bottom: 0; z-index: -1; overflow: hidden; border-radius: 50% 50% 0 0 / 92px 92px 0 0; pointer-events: none; box-shadow: 0 -2px 0 rgba(150, 168, 224, .55);
    background:
        radial-gradient(ellipse 46% 30% at 50% 2%, rgba(255, 255, 255, .85), transparent 72%),
        radial-gradient(ellipse 38% 34% at 6% 26%, rgba(167, 139, 250, .42), transparent 70%),
        radial-gradient(ellipse 34% 30% at 96% 20%, rgba(103, 202, 250, .46), transparent 70%),
        radial-gradient(ellipse 40% 32% at 88% 90%, rgba(94, 226, 175, .36), transparent 70%),
        radial-gradient(ellipse 36% 30% at 8% 92%, rgba(129, 178, 250, .42), transparent 70%),
        linear-gradient(170deg, #EFE9FD 0%, #E2EDFC 46%, #EAF3FE 100%); }
.lv-bg::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(118deg, rgba(255, 255, 255, .6) 0 2px, transparent 2px 26px);
    -webkit-mask-image: radial-gradient(ellipse 54% 60% at 50% 46%, transparent 42%, #000 100%); mask-image: radial-gradient(ellipse 54% 60% at 50% 46%, transparent 42%, #000 100%); }

/* copy + the finished article */
.lv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); align-items: center; gap: 64px; max-width: 1180px; margin: 0 auto; }
.lv-copy p { margin: 20px 0 0; color: #45536F; font-size: clamp(18px, 1.75vw, 21px); line-height: 1.7; }
.lv-copy p:first-child { margin: 0; }
.lv-lead { color: var(--ink-2) !important; font-size: clamp(20px, 2vw, 24px) !important; }
.lv-copy b, .lv-copy strong { color: var(--ink); font-weight: 800; }
.lv-copy mark { padding: 0 .12em; border-radius: 3px; background: linear-gradient(transparent 14%, #BDE3FF 14%, #9BD6FF 88%, transparent 88%); color: var(--ink); font-weight: 700; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.ar-doc { position: relative; margin: 0; padding: 22px; border-radius: 28px; background: #fff; color: var(--ink); rotate: -1.5deg;
    box-shadow: 0 44px 80px -44px rgba(10, 22, 51, .5), 0 0 0 1px rgba(10, 22, 51, .09), 0 0 70px -26px rgba(124, 58, 237, .28); }
.ar-top { display: flex; align-items: center; gap: 10px; }
.ar-top svg { width: 18px; height: 24px; flex: none; }
.ar-top b { font-family: 'Playfair Display', serif; font-size: 19px; font-weight: 900; }
.ar-tags { display: flex; gap: 6px; margin-left: auto; }
.ar-tags em { padding: 3px 9px; border-radius: 7px; background: #EAF2FF; color: var(--blue); font-size: 12px; font-style: normal; font-weight: 800; }
.ar-tags em.aeo { background: #F3E8FF; color: #7C3AED; }
.ar-doc > img { display: block; width: 100%; height: 200px; margin-top: 14px; border-radius: 18px; object-fit: cover; }
.ar-h { display: block; margin-top: 16px; color: var(--ink); font-family: var(--display); font-size: clamp(21px, 2vw, 26px); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.ar-lines i { display: block; height: 10px; margin-top: 10px; border-radius: 6px; background: #EDF1F7; }
.ar-act { display: flex; gap: 10px; margin-top: 20px; }
.ar-act span { padding: 11px 18px; border-radius: 13px; font-size: 14.5px; font-weight: 800; }
.ar-ghost { background: #F1F4F9; color: var(--ink-2); }
.ar-pub { margin-left: auto; background: var(--grad); color: #fff; box-shadow: 0 14px 26px -12px rgba(11, 92, 255, .8); }
.ar-pub i { margin-left: 6px; font-size: 12px; }
.ar-chip { position: absolute; z-index: 2; display: none; padding: 10px 16px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 13.5px; font-weight: 800; white-space: nowrap; box-shadow: 0 20px 34px -18px rgba(10, 22, 51, .5), 0 0 0 1px rgba(10, 22, 51, .07); animation: floaty 7s ease-in-out infinite; }
.c-a { left: -52px; top: 96px; rotate: -5deg; }
.c-b { right: -34px; top: 46%; rotate: 4deg; animation-delay: -2.4s; }
.c-c { left: -26px; bottom: 56px; rotate: 3deg; animation-delay: -4.6s; }
@media (min-width: 1200px) { .ar-chip { display: block; } }

/* the payoff */
.lv-live { margin: 104px auto 0; text-align: center; }
.lv-title { max-width: 1020px; margin: 0 auto; color: var(--ink); font-family: var(--display); font-size: clamp(28px, 3.4vw, 46px); font-weight: 800; line-height: 1.22; letter-spacing: -.03em; text-wrap: balance; }
.lv-title span { background: linear-gradient(100deg, #0B5CFF, #0EA5E9 60%, #12C9A6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lv-title em { font-style: normal; }
.lv-nos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; margin: 40px 0 0; padding: 0; list-style: none; }
.lv-nos li { display: flex; align-items: center; gap: 12px; padding: 14px 26px 14px 18px; border-radius: 20px; background: #fff; color: var(--ink); font-family: var(--display); font-size: clamp(19px, 2vw, 26px); font-weight: 800; letter-spacing: -.02em; box-shadow: 0 20px 34px -26px rgba(10, 22, 51, .5), 0 0 0 1px rgba(10, 22, 51, .07); }
.lv-nos i { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: #FFE4E9; color: #E11D48; font-size: 14px; font-style: normal; font-weight: 900; box-shadow: inset 0 0 0 1px rgba(225, 29, 72, .25); }
.lv-just { max-width: 1000px; margin: 42px auto 0; color: var(--ink); font-family: var(--display); font-size: clamp(22px, 2.6vw, 34px); font-weight: 800; line-height: 1.36; letter-spacing: -.025em; text-wrap: balance; }
.lv-just b { background: linear-gradient(100deg, #0B5CFF, #7C3AED); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; }
.lv-just mark { padding: 0 .12em; border-radius: 3px; background: linear-gradient(transparent 14%, #FFE066 14%, #FFD84D 88%, transparent 88%); color: var(--ink); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

@media (max-width: 991.98px) {
    .lv { padding: 36px 0 96px; }
    .lv-bg { top: -60px; border-radius: 50% 50% 0 0 / 60px 60px 0 0; }
    .lv-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; max-width: 640px; }
    .ar-doc { rotate: 0deg; }
    .lv-live { margin-top: 76px; }
    .lv-nos { gap: 14px; }
}
/* tablet: copy stays beside the article card, and the three "No..." pills stay on one row */
@media (min-width: 768px) and (max-width: 991.98px) {
    .lv-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 34px; max-width: 696px; align-items: start; }
    .lv-copy p { font-size: 17px; line-height: 1.62; }
    .lv-lead { font-size: 19px !important; }
    .lv-nos { gap: 10px; }
    .lv-nos li { padding: 12px 18px 12px 14px; gap: 10px; font-size: 18px; }
    .lv-nos i { width: 28px; height: 28px; font-size: 13px; }
}
@media (max-width: 767.98px) {
    .lv { padding: 36px 0 84px; }
    .lv-bg { top: -42px; border-radius: 50% 50% 0 0 / 42px 42px 0 0; }
    .lv-copy p { font-size: 17px; }
    .lv-lead { font-size: 19px !important; }
    .ar-doc { padding: 16px; border-radius: 22px; }
    .ar-doc > img { height: 150px; }
    .ar-act span { padding: 10px 14px; font-size: 13.5px; }
    .lv-live { margin-top: 60px; }
    .lv-title { font-size: 26px; }
    .lv-nos { flex-direction: column; align-items: stretch; }
    .lv-nos li { justify-content: flex-start; padding: 12px 18px; font-size: 19px; }
    .lv-just { margin-top: 32px; font-size: 21px; }
}

/* ==========================================================
   SECTION 14 — DEMO (dark control room, after the JV demo section)
   ========================================================== */
.dm { position: relative; z-index: 8; isolation: isolate; overflow: hidden; margin-top: -72px; padding: 150px 0 130px; color: #fff; background: #040A1C; clip-path: polygon(0 70px, 100% 0, 100% 100%, 0 100%); }
.dm::before { content: ""; position: absolute; inset: 0; z-index: -2; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 4px); }
.dm::after { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: -2; height: 240px; background: linear-gradient(180deg, rgba(25, 211, 255, .12), transparent); }
.dm-glow { position: absolute; left: 50%; top: 46%; z-index: -1; width: 1300px; height: 820px; transform: translate(-50%, -50%); background: radial-gradient(ellipse, rgba(22, 131, 255, .36), rgba(25, 211, 255, .08) 45%, transparent 66%); pointer-events: none; }

/* heading */
.dm-title { margin: 0 auto; color: #fff; font-family: var(--display); font-size: clamp(32px, 4.2vw, 58px); font-weight: 800; line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
.dm-hl { display: inline-block; padding: 0 .2em .06em; border-radius: 14px; background: var(--grad); rotate: -1.5deg; box-shadow: 0 20px 40px -18px rgba(25, 140, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .3); }
.dm-sub { max-width: 900px; margin: 24px auto 0; color: #C5D2EE; font-size: clamp(18px, 1.7vw, 21px); line-height: 1.6; text-wrap: balance; }
.dm-sub b { color: #fff; font-weight: 800; }

/* studio monitor */
.dm-frame { position: relative; z-index: 2; max-width: 940px; margin: 48px auto 0; padding: 10px; border: 2px solid transparent; border-radius: 26px;
    background: linear-gradient(#0A1633, #0A1633) padding-box, linear-gradient(135deg, #19D3FF, #0B5CFF 45%, #7C3AED 100%) border-box;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, .05), 0 50px 100px -40px rgba(11, 60, 180, .9), 0 0 120px -30px rgba(25, 211, 255, .5); }
.dm-bar { display: flex; align-items: center; gap: 12px; padding: 4px 8px 12px; }
.dm-rec { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px; border-radius: 999px; background: rgba(255, 46, 77, .16); color: #FF7A8F; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(255, 46, 77, .35); }
.dm-rec i { width: 8px; height: 8px; border-radius: 50%; background: #FF2E4D; box-shadow: 0 0 10px #FF2E4D; animation: dmBlink 1.2s steps(2, start) infinite; }
@keyframes dmBlink { 50% { opacity: .25; } }
.dm-name { color: #AFC0E4; font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.dm-dots { display: flex; gap: 6px; margin-left: auto; }
.dm-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.dm-screen { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 18px; background: #05091A; }
.dm-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* after the video */
.dm-after { position: relative; z-index: 2; max-width: 960px; margin: 52px auto 0; color: #C5D2EE; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.6; text-wrap: balance; }
.dm-after b { color: #fff; font-weight: 800; }
.dm-after mark { padding: 0 .12em; border-radius: 3px; background: linear-gradient(transparent 14%, #FFE066 14%, #FFD84D 88%, transparent 88%); color: var(--ink); font-weight: 700; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.dm-arrow { position: relative; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; margin: 30px auto 0; border-radius: 50%; background: rgba(255, 255, 255, .07); color: var(--cyan); font-size: 17px; box-shadow: inset 0 0 0 1px rgba(127, 227, 255, .25); animation: floaty 3.4s ease-in-out infinite; }

/* tilted walls of real publications */
.dm-wall { position: absolute; top: 300px; z-index: 0; width: 340px; perspective: 1100px; pointer-events: none; }
.dw-left { left: -120px; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%); mask-image: linear-gradient(90deg, transparent 0%, #000 34%); }
.dw-right { right: -120px; -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 34%); mask-image: linear-gradient(270deg, transparent 0%, #000 34%); }
@media (min-width: 1600px) { .dw-left { left: -40px; } .dw-right { right: -40px; } }
.dw-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.dw-left .dw-grid { transform: rotateY(30deg); transform-origin: left center; }
.dw-right .dw-grid { transform: rotateY(-30deg); transform-origin: right center; }
.dw-grid img { display: block; width: 100%; border-radius: 12px; background: #fff; outline: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .9), 0 0 36px -8px rgba(25, 140, 255, .5); }
.dw-grid img:nth-child(even) { margin-top: 44px; }

@media (max-width: 1399.98px) {
    .dm-wall { width: 320px; }
    .dw-left { left: -80px; }
    .dw-right { right: -80px; }
}
@media (max-width: 1199.98px) {
    .dm-wall { display: none; }
    .dm { padding: 120px 0 100px; }
}
@media (max-width: 767.98px) {
    .dm { margin-top: -38px; padding: 86px 0 80px; clip-path: polygon(0 36px, 100% 0, 100% 100%, 0 100%); }
    .dm-title { font-size: 29px; }
    .dm-hl { border-radius: 9px; }
    .dm-sub { margin-top: 18px; font-size: 16.5px; }
    .dm-frame { margin-top: 30px; padding: 6px; border-radius: 16px; box-shadow: 0 0 0 5px rgba(255, 255, 255, .05), 0 30px 60px -30px rgba(11, 60, 180, .9); }
    .dm-bar { gap: 8px; padding: 3px 5px 9px; }
    .dm-name { font-size: 11.5px; }
    .dm-screen { border-radius: 11px; }
    .dm-after { margin-top: 34px; font-size: 17px; }
    .dm-arrow { width: 44px; height: 44px; margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .dm-arrow, .dm-rec i { animation: none; }
}

/* ==========================================================
   SECTION 15 — INSIDE LOCAL MEDIA EMPIRE
   11 alternating rows, one feature per row, each with a full-size screen.
   Deliberately NOT Section 7's card grid: no cards, no borders — the screen
   floats on the ground and the copy sits beside it.
   ========================================================== */
/* the section keeps only a FLAT fallback colour — every painted layer lives on .ie-bg so the
   wave clips gradient + glows + grid as ONE surface (a separately-filled wave shape would show
   a line wherever the grid texture starts, which is how the Section 12 wave failed) */
.ie { position: relative; z-index: 9; isolation: isolate; overflow-x: clip; padding: 64px 0 130px; color: var(--ink); background: #F7F9FE; }
.ie-bg { --wv: 90px; position: absolute; top: calc(-1 * var(--wv)); left: 0; right: 0; bottom: 0; z-index: -1; overflow: hidden; pointer-events: none;
    background:
        radial-gradient(ellipse 40% 22% at 8% 12%, rgba(11, 92, 255, .10), transparent 70%),
        radial-gradient(ellipse 36% 20% at 94% 34%, rgba(124, 58, 237, .10), transparent 70%),
        radial-gradient(ellipse 36% 20% at 6% 68%, rgba(13, 148, 136, .09), transparent 70%),
        radial-gradient(ellipse 40% 22% at 96% 88%, rgba(234, 88, 12, .08), transparent 70%),
        linear-gradient(180deg, #F7F9FE 0%, #EFF4FD 40%, #F4F7FD 100%);
    /* the JV page's own wave path (.prize-wave), flipped like .prize-wave-b so the light rises INTO the dark */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cg transform='translate(0,90) scale(1,-1)'%3E%3Cpath d='M0 0H1440V38C1320 78 1180 88 1020 62S720 6 540 30 200 88 0 48Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(#000, #000);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cg transform='translate(0,90) scale(1,-1)'%3E%3Cpath d='M0 0H1440V38C1320 78 1180 88 1020 62S720 6 540 30 200 88 0 48Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(#000, #000);
    -webkit-mask-size: 100% var(--wv), 100% calc(100% - var(--wv) + 1px);
            mask-size: 100% var(--wv), 100% calc(100% - var(--wv) + 1px);
    -webkit-mask-position: 0 0, 0 100%;
            mask-position: 0 0, 0 100%;
    -webkit-mask-repeat: no-repeat, no-repeat;
            mask-repeat: no-repeat, no-repeat; }
.ie-bg::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(10, 22, 51, .05) 1px, transparent 1px) 0 0 / 76px 76px,
                linear-gradient(0deg, rgba(10, 22, 51, .05) 1px, transparent 1px) 0 0 / 76px 76px;
    -webkit-mask-image: radial-gradient(ellipse 60% 52% at 50% 44%, transparent 38%, #000 100%);
            mask-image: radial-gradient(ellipse 60% 52% at 50% 44%, transparent 38%, #000 100%); }

/* heading */
.ie-head { position: relative; max-width: 1050px; margin: 0 auto 64px; text-align: center; }
.ie-edge { position: absolute; z-index: 0; display: none; height: auto; pointer-events: none; filter: drop-shadow(0 26px 26px rgba(10, 22, 51, .22)); animation: floaty 8s ease-in-out infinite; }
.ie-e-l { left: calc(50% - 50vw + 2.2vw); top: 2px; width: 250px; rotate: -8deg; }
.ie-e-r { right: calc(50% - 50vw + 2.2vw); top: -18px; width: 228px; rotate: 7deg; animation-delay: -3.5s; }
@media (min-width: 1360px) { .ie-edge { display: block; } }
.ie-title { position: relative; z-index: 1; margin: 0; color: var(--ink); text-wrap: balance; }
.ie-t1 { display: block; color: #55648A; font-size: clamp(16px, 1.55vw, 21px); font-weight: 600; line-height: 1.5; }
.ie-t2 { display: block; margin-top: 12px; font-family: var(--display); font-size: clamp(29px, 3.5vw, 48px); font-weight: 800; line-height: 1.12; letter-spacing: -.035em;
    background: linear-gradient(100deg, #0B5CFF, #7C3AED 55%, #19D3FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ie-t3 { display: block; margin-top: 16px; color: var(--ink); font-family: var(--display); font-size: clamp(20px, 2.1vw, 28px); font-weight: 800; line-height: 1.32; letter-spacing: -.022em; }
.ie-title mark { padding: 0 .12em; border-radius: 3px; background: linear-gradient(transparent 14%, #FFE066 14%, #FFD84D 88%, transparent 88%); color: var(--ink); font-weight: 800; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ie-kick { margin: 30px 0 0; text-align: center; }
.ie-kick span { display: inline-block; padding: 12px 30px; border-radius: 999px; background: #0A1633; color: #fff; font-family: var(--display); font-size: clamp(17px, 1.7vw, 22px); font-weight: 800; letter-spacing: -.01em; box-shadow: 0 22px 40px -22px rgba(10, 22, 51, .9); }

/* rows */
.ie-rows { display: flex; flex-direction: column; gap: 32px; max-width: 1260px; margin: 0 auto; }
.ie-row { position: relative; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; gap: 48px; padding: 36px 44px; border-radius: 30px;
    background: linear-gradient(170deg, #fff, color-mix(in srgb, var(--a) 4%, #fff));
    box-shadow: 0 34px 64px -44px color-mix(in srgb, var(--a) 55%, #0A1633), 0 0 0 1.5px color-mix(in srgb, var(--a) 16%, transparent); }
/* flipped rows must SWAP the template too, or the screen lands in the narrow column and every even row renders smaller */
.ie-row.rev { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
.ie-row.rev .ie-txt { order: 2; }

/* icon + number ride together in an accent pill ABOVE the title, so the title itself is unobstructed and can run big */
.ie-tag { display: flex; align-items: center; gap: 14px; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.ie-tag::after { content: ""; flex: 1; min-width: 24px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--a) 42%, transparent), transparent); }
.ie-tag i { display: grid; place-items: center; width: 54px; height: 54px; flex: none; border-radius: 17px; background: var(--ag); color: #fff; font-size: 21px; box-shadow: 0 16px 26px -14px color-mix(in srgb, var(--a) 85%, transparent), inset 0 1px 0 rgba(255, 255, 255, .4); }
.ie-tag em { font-family: 'Anton', sans-serif; font-size: 40px; font-style: normal; font-weight: 400; line-height: 1; letter-spacing: .02em; background: var(--ag); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ie-txt h3 { margin: 22px 0 14px; color: var(--ink); font-family: var(--display); font-size: clamp(24px, 2.5vw, 34px); font-weight: 800; line-height: 1.16; letter-spacing: -.03em; text-wrap: balance; }
/* key phrase carries a thick marker stroke in the row's own accent */
.ie-hl { position: relative; display: inline-block; padding: 0 .05em .1em; color: var(--a); }
.ie-hl::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; border-radius: 999px; background: var(--ag); opacity: .8; }
.ie-txt p { margin: 0; color: #45536F; font-size: clamp(16.5px, 1.5vw, 18.5px); line-height: 1.65; }
.ie-txt strong { color: var(--ink); font-weight: 800; }

/* the screen: floats on the ground, tilted toward the copy */
.ie-shot { position: relative; container-type: inline-size; }
.ie-shot::before { content: ""; position: absolute; inset: 8% -4% -6%; z-index: 0; border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--a) 26%, transparent), transparent 76%); }
/* screens size to their OWN content — no fixed aspect box, so nothing gets cropped */
.ie-shot .scr { --u: 1.04cqw; position: relative; inset: auto; display: block; overflow: visible; }
.ie-shot .sw { width: 100%; }
.ie-row:not(.rev) .ie-shot .sw { rotate: -1.4deg; }
.ie-row.rev .ie-shot .sw { rotate: 1.4deg; }
.v-pub, .v-art, .v-crm, .v-dev, .v-web { --u: .92cqw; }

/* decoration spread down the section so the ground never reads empty */
.ie-deco { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ie-dc { position: absolute; display: flex; align-items: center; gap: 11px; padding: 12px 17px; border-radius: 17px; background: #fff; color: var(--ink); font-size: 13.5px; font-weight: 800; white-space: nowrap;
    box-shadow: 0 24px 40px -22px rgba(10, 22, 51, .5), 0 0 0 1px rgba(10, 22, 51, .06); animation: floaty 7s ease-in-out infinite; }
.ie-dc i { display: grid; place-items: center; width: 31px; height: 31px; flex: none; border-radius: 10px; font-size: 14px; font-style: normal; }
.ie-dc small { display: block; margin-top: 1px; color: var(--muted); font-size: 11.5px; font-weight: 700; }
.dc1 { left: calc(50% - 50vw + .9vw); top: 7%; rotate: -3deg; }
.dc2 { right: calc(50% - 50vw + .9vw); top: 19%; rotate: 3deg; animation-delay: -2s; }
.dc3 { left: calc(50% - 50vw + .9vw); top: 35%; rotate: 2deg; animation-delay: -4s; }
.dc4 { right: calc(50% - 50vw + .9vw); top: 51%; rotate: -2deg; animation-delay: -1s; }
.dc5 { left: calc(50% - 50vw + .9vw); top: 67%; rotate: -2deg; animation-delay: -3s; }
.dc6 { right: calc(50% - 50vw + .9vw); top: 80%; rotate: 3deg; animation-delay: -5s; }
.ie-ring { position: absolute; border-radius: 50%; border: 1.5px dashed rgba(11, 92, 255, .22); }
.ie-ring.r1 { left: calc(50% - 50vw + 4vw); top: 26%; width: 190px; height: 190px; }
.ie-ring.r2 { right: calc(50% - 50vw + 3vw); top: 60%; width: 240px; height: 240px; border-color: rgba(124, 58, 237, .2); }
.ie-np { position: absolute; right: calc(50% - 50vw + 3vw); top: 9%; width: 132px; rotate: 9deg; opacity: .95; animation: floaty 8s ease-in-out infinite; animation-delay: -2.5s; }
@media (max-width: 1599.98px) { .ie-np { width: 104px; } }
@media (max-width: 1499.98px) { .ie-dc, .ie-np { display: none; } .ie-ring.r1 { width: 140px; height: 140px; } }

/* closing line + offer */
.ie-close { max-width: 1000px; margin: 104px auto 0; color: var(--ink); font-family: var(--display); font-size: clamp(21px, 2.4vw, 31px); font-weight: 800; line-height: 1.38; letter-spacing: -.025em; text-align: center; text-wrap: balance; }
.ie-close b { font-weight: 800; background: linear-gradient(100deg, #0B5CFF, #0EA5E9 60%, #12C9A6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ie-close mark { padding: 0 .12em; border-radius: 3px; background: linear-gradient(transparent 14%, #FFE066 14%, #FFD84D 88%, transparent 88%); color: var(--ink); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.offer-ie { margin-top: 58px; }

/* CTA wrapper + people cutouts on the edges (same treatment as Section 7) */
.ie-end { position: relative; }
/* Same treatment as .dlv-person / .gr-person: full size with the bottom masked out so the
   cutout melts into the ground. height:auto is REQUIRED — the img's height attribute is a
   presentational hint that would otherwise fix the box and stretch the image (object-fit: fill). */
.ie-person { position: absolute; z-index: 1; display: none; width: clamp(300px, 24vw, 470px); height: auto; pointer-events: none;
    -webkit-mask-image: linear-gradient(#000 72%, transparent 97%);
            mask-image: linear-gradient(#000 72%, transparent 97%); }
.ip-l { left: calc(50% - 50vw - 2.5vw); bottom: 0; }
.ip-r { right: calc(50% - 50vw - 2.5vw); bottom: 0; z-index: 2; }
@media (min-width: 1300px) { .ie-person { display: block; } }

/* ---------- 01 create publication ---------- */
.vp-body { padding: 3.4em 3.6em 3.8em; }
.vp-steps { display: flex; gap: .8em; margin-bottom: 2.6em; }
.vp-steps span { padding: .5em 1.2em; border-radius: 1em; background: #F1F4FA; color: #8A97B2; font-size: 2.1em; font-weight: 800; }
.vp-steps .on { background: color-mix(in srgb, var(--a) 14%, #fff); color: var(--a); }
.vp-steps .now { background: var(--ag); color: #fff; }
.vp-field { margin-bottom: 1.8em; padding: 1.5em 1.8em; border-radius: 1.4em; background: #F7F9FC; box-shadow: inset 0 0 0 1px #E7ECF5; }
.vp-field small { display: block; color: var(--muted); font-size: 2em; font-weight: 700; }
.vp-field b { display: block; margin-top: .2em; font-size: 2.7em; }
.vp-pick { display: flex; align-items: center; gap: .9em; margin-bottom: 2.4em; }
.vp-sw { width: 3.4em; height: 3.4em; border-radius: 1em; }
.vp-sw.s1 { background: linear-gradient(135deg, #0B5CFF, #19D3FF); }
.vp-sw.s2 { background: linear-gradient(135deg, #7C3AED, #C084FC); }
.vp-sw.s3 { background: linear-gradient(135deg, #0D9488, #2DD4BF); }
.vp-sw.s4 { background: linear-gradient(135deg, #EA580C, #FBBF24); }
.vp-sw.on { box-shadow: 0 0 0 .55em #fff, 0 0 0 1.15em var(--a); }
.vp-pick em { margin-left: .6em; color: var(--muted); font-size: 2em; font-weight: 700; }
.vp-bar { height: 1.5em; overflow: hidden; border-radius: 1em; background: #E9EEF7; }
.vp-bar i { display: block; height: 100%; border-radius: inherit; background: var(--ag); }
.vp-run { display: flex; align-items: center; justify-content: space-between; margin-top: 1.8em; }
.vp-run em { color: var(--a); font-size: 2.2em; font-weight: 800; }
.vp-tt { right: 3%; bottom: 6%; }

/* ---------- 02 AI articles ---------- */
.va-split { display: grid; grid-template-columns: 30% 1fr; }
.va-side { padding: 3em 2.4em; border-right: 1px solid #EDF1F8; background: #F8FAFD; }
.va-side small { display: block; margin-bottom: 1.4em; color: var(--muted); font-size: 1.95em; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.va-t { display: block; margin-bottom: .9em; padding: 1.1em 1.3em; border-radius: 1.1em; background: #fff; color: var(--ink-2); font-size: 2.05em; font-weight: 700; line-height: 1.25; box-shadow: 0 0 0 1px #E9EEF6; }
.va-t.on { background: var(--ag); color: #fff; box-shadow: none; }
.va-main { padding: 3em 3.2em; }
.va-h { display: block; margin-bottom: 1.6em; font-size: 3.1em; line-height: 1.2; }
.va-main .sk { height: 1.5em; margin-top: 1.4em; }
.va-caret { display: inline-block; width: .3em; height: 2.6em; margin-top: 1.2em; vertical-align: middle; background: var(--a); animation: blink 1s steps(2, start) infinite; }
.va-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 2.6em; }
.va-foot em { color: var(--a); font-size: 2.1em; font-weight: 800; }

/* ---------- 03 SEO + AEO ---------- */
.vs-body { padding: 3.4em 3.6em; }
.vs-scores { display: flex; gap: 2.4em; margin-bottom: 2.6em; }
.vs-ring { position: relative; width: 13em; height: 13em; }
.vs-ring svg { width: 100%; height: 100%; rotate: -90deg; }
.vs-ring circle { fill: none; stroke-width: 3.4; }
.vr-bg { stroke: #E9EEF7; }
.vr-fg { stroke: var(--a); stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 4; }
.vs-ring.vr-b .vr-fg { stroke: var(--a2); stroke-dashoffset: 8; }
.vs-ring em { position: absolute; left: 0; right: 0; top: 34%; text-align: center; font-size: 3.4em; font-weight: 800; }
.vs-ring small { position: absolute; left: 0; right: 0; bottom: 18%; text-align: center; color: var(--muted); font-size: 1.9em; font-weight: 800; letter-spacing: .08em; }
.vs-list span { display: flex; align-items: center; gap: 1em; margin-bottom: 1em; color: var(--ink-2); font-size: 2.15em; font-weight: 700; }
.vs-list i { display: grid; place-items: center; width: 1.6em; height: 1.6em; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--a) 15%, #fff); color: var(--a); font-size: .95em; font-weight: 900; }
.vs-serp { margin-top: 2.4em; padding: 1.8em 2em; border-radius: 1.4em; background: #F7F9FC; box-shadow: inset 0 0 0 1px #E7ECF5; }
.vs-serp small { display: block; margin-bottom: .5em; color: var(--muted); font-size: 1.9em; font-weight: 800; text-transform: uppercase; }
.vs-serp b { display: block; color: #1A0DAB; font-size: 2.3em; line-height: 1.25; }
.vs-serp em { display: block; margin-top: .3em; color: #0F7B37; font-size: 1.95em; font-weight: 600; }

/* ---------- 04 weekly issue ---------- */
.vi-split { display: grid; grid-template-columns: 32% 1fr; }
.vi-side { padding: 3em 2.4em; border-right: 1px solid #EDF1F8; background: #F8FAFD; }
.vi-side small { display: block; margin-bottom: 1.4em; color: var(--muted); font-size: 1.95em; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.vi-a { display: flex; align-items: center; gap: .9em; margin-bottom: .9em; padding: 1.1em 1.2em; border-radius: 1.1em; background: #fff; font-size: 2.05em; font-weight: 700; box-shadow: 0 0 0 1px #E9EEF6; }
.vi-a i { display: grid; place-items: center; width: 1.7em; height: 1.7em; flex: none; border-radius: 50%; background: #EEF2F8; color: #94A3B8; font-size: .85em; font-weight: 900; }
.vi-a.in i { background: var(--ag); color: #fff; }
.vi-issue { padding: 3em 3.2em; }
.vi-mast { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 1.4em; border-bottom: .25em solid var(--ink); }
.vi-mast b { font-family: 'Playfair Display', serif; font-size: 3.2em; font-weight: 900; }
.vi-mast em { color: var(--muted); font-size: 2em; font-weight: 700; }
.vi-lead { height: 8.5em; margin: 1.8em 0; border-radius: 1.2em; background: linear-gradient(135deg, color-mix(in srgb, var(--a) 22%, #fff), color-mix(in srgb, var(--a2) 26%, #fff)); }
.vi-h { display: block; margin-bottom: 1.2em; font-size: 2.9em; line-height: 1.2; }
.vi-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4em; margin-top: 2em; }
.vi-two span { height: 5.4em; border-radius: 1em; background: #F1F4FA; }
.vi-tt { left: 2%; bottom: 5%; }

/* ---------- 05 publish to audience ---------- */
.vd-top { display: flex; align-items: center; justify-content: space-between; padding: 2.8em 3.2em; border-bottom: 1px solid #EDF1F8; }
.vd-top b { font-size: 2.6em; }
.vd-dest { padding: 2.4em 3.2em 1em; }
.vd-d { display: flex; align-items: center; gap: 1.4em; margin-bottom: 1.2em; padding: 1.6em 1.8em; border-radius: 1.4em; background: #F7F9FC; box-shadow: inset 0 0 0 1px #E7ECF5; }
.vd-d > i { display: grid; place-items: center; width: 4.4em; height: 4.4em; flex: none; border-radius: 1.3em; background: #fff; font-size: 2.2em; box-shadow: 0 0 0 1px #E7ECF5; }
.vd-d div { flex: 1; min-width: 0; }
.vd-d b { display: block; font-size: 2.3em; }
.vd-d small { display: block; margin-top: .15em; color: var(--muted); font-size: 1.95em; font-weight: 600; }
.vd-d > em { display: grid; place-items: center; width: 2.6em; height: 2.6em; flex: none; border-radius: 50%; background: #EEF2F8; color: transparent; font-size: 1.8em; font-weight: 900; }
.vd-d.on > em { background: var(--ag); color: #fff; }
.vd-bar { height: 1.5em; margin: 1.4em 3.2em 0; overflow: hidden; border-radius: 1em; background: #E9EEF7; }
.vd-bar i { display: block; height: 100%; border-radius: inherit; background: var(--ag); }
.vd-meta { display: flex; justify-content: space-between; margin: 1em 3.2em 3.2em; color: var(--muted); font-size: 2em; font-weight: 700; }

/* ---------- 06 media website ---------- */
.vw-nav { display: flex; align-items: center; gap: 1.6em; padding: 2.2em 3em; border-bottom: 1px solid #EDF1F8; }
.vw-nav b { font-family: 'Playfair Display', serif; font-size: 2.9em; font-weight: 900; }
.vw-links { display: flex; gap: 1.1em; margin-left: auto; }
.vw-links i { width: 5.6em; height: 1.2em; border-radius: 1em; background: #E3E9F3; }
.vw-nav em { padding: .6em 1.4em; border-radius: .9em; background: var(--ag); color: #fff; font-size: 2em; font-weight: 800; }
.vw-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2em; padding: 2.6em 3em 0; }
.vw-img { height: 13em; border-radius: 1.4em; background: linear-gradient(135deg, color-mix(in srgb, var(--a) 26%, #fff), color-mix(in srgb, var(--a2) 30%, #fff)); }
.vw-lead b { display: block; margin-bottom: 1em; font-size: 2.8em; line-height: 1.2; }
.vw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6em; padding: 2.4em 3em 0; }
.vw-grid span { height: 7em; border-radius: 1.2em; background: #F1F4FA; }
.vw-foot { display: flex; justify-content: space-between; margin-top: 2.4em; padding: 2em 3em; border-top: 1px solid #EDF1F8; background: #F8FAFD; color: var(--muted); font-size: 2em; font-weight: 700; }

/* ---------- 07 signup page ---------- */
.vl-page { padding: 4.6em 3.6em 4.2em; text-align: center; }
.vl-h { display: block; margin-bottom: .6em; font-size: 3.5em; line-height: 1.18; }
.vl-sub { display: block; margin-bottom: 2.6em; color: var(--muted); font-size: 2.2em; font-weight: 600; }
.vl-form { display: flex; justify-content: center; gap: 1em; }
.vl-in { flex: 1; max-width: 22em; padding: 1.3em 1.6em; border-radius: 1.2em; background: #F5F8FC; color: #9AA7BF; font-size: 2.2em; font-weight: 600; text-align: left; box-shadow: inset 0 0 0 1px #E2E8F2; }
.vl-form .s-btn { font-size: 2.2em; padding: 1.25em 1.6em; }
.vl-proof { display: flex; align-items: center; justify-content: center; gap: .7em; margin-top: 2.6em; }
.vl-av { width: 3.4em; height: 3.4em; border-radius: 50%; box-shadow: 0 0 0 .5em #fff; }
.vl-av.a1 { background: linear-gradient(135deg, #FFB067, #FF6B3D); }
.vl-av.a2 { background: linear-gradient(135deg, #2BE3B8, #0F9D8A); margin-left: -1.4em; }
.vl-av.a3 { background: linear-gradient(135deg, #7C3AED, #C084FC); margin-left: -1.4em; }
.vl-proof em { margin-left: .8em; color: var(--muted); font-size: 2.1em; font-weight: 700; }
.vl-tt { right: 2%; top: 8%; }

/* ---------- 08 confirmation page ---------- */
.vc-edit { display: flex; align-items: center; gap: 1em; padding: 2.2em 3em; border-bottom: 1px solid #EDF1F8; background: #F8FAFD; }
.vc-edit small { margin-right: auto; color: var(--muted); font-size: 2em; font-weight: 800; text-transform: uppercase; }
.vc-tab { padding: .55em 1.3em; border-radius: .9em; background: #fff; color: var(--ink-2); font-size: 2em; font-weight: 800; box-shadow: 0 0 0 1px #E4E9F2; }
.vc-tab.on { background: var(--ag); color: #fff; box-shadow: none; }
.vc-page { padding: 4.2em 3.6em 3em; text-align: center; }
.vc-tick { display: inline-grid; place-items: center; width: 2.5em; height: 2.5em; margin-bottom: .47em; border-radius: 50%; background: var(--ag); color: #fff; font-size: 3.4em; font-weight: 900; line-height: 1; }
.vc-page b { display: block; font-size: 3.1em; line-height: 1.2; }
.vc-page em { display: block; margin-top: .6em; color: var(--muted); font-size: 2.2em; font-weight: 600; }
.vc-cta { margin-top: 2.2em; }
.vc-cta .s-btn { font-size: 2.2em; padding: 1.2em 1.7em; }
.vc-opts { display: flex; justify-content: center; gap: 2.4em; padding: 2.2em 3em 3em; }
.vc-opts span { display: inline-flex; align-items: center; gap: .7em; color: var(--ink-2); font-size: 2.05em; font-weight: 700; }
.vc-opts i { display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: color-mix(in srgb, var(--a) 15%, #fff); color: var(--a); font-size: .9em; font-weight: 900; }

/* ---------- 09 schedule ---------- */
.vq-hd { display: flex; align-items: center; justify-content: space-between; padding: 2.8em 3.2em; border-bottom: 1px solid #EDF1F8; }
.vq-hd b { font-size: 2.6em; }
.vq-line { position: relative; padding: 3em 3.2em 1em; }
.vq-line::before { content: ""; position: absolute; left: 5.6em; top: 4.4em; bottom: 3.4em; width: .3em; border-radius: 1em; background: #E9EEF7; }
.vq-item { position: relative; display: flex; align-items: center; gap: 1.4em; margin-bottom: 1.6em; padding-left: 4.6em; }
.vq-item::before { content: ""; position: absolute; left: 1.55em; top: 50%; width: 1.9em; height: 1.9em; translate: 0 -50%; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .45em #E9EEF7; }
.vq-item.done::before { background: var(--a2); box-shadow: 0 0 0 .45em color-mix(in srgb, var(--a2) 35%, #fff); }
.vq-item.now::before { background: var(--a); box-shadow: 0 0 0 .45em color-mix(in srgb, var(--a) 30%, #fff); }
.vq-item em { width: 5.4em; flex: none; color: var(--muted); font-size: 2.05em; font-weight: 800; }
.vq-item b { flex: 1; font-size: 2.35em; }
.vq-item span { padding: .5em 1.1em; border-radius: .9em; background: #F1F4FA; color: var(--ink-2); font-size: 1.95em; font-weight: 800; white-space: nowrap; }
.vq-item.now span { background: var(--ag); color: #fff; }
.vq-auto { display: flex; align-items: center; justify-content: space-between; margin: 1em 3.2em 3.2em; padding: 1.8em 2em; border-radius: 1.4em; background: #F7F9FC; box-shadow: inset 0 0 0 1px #E7ECF5; font-size: 2.2em; font-weight: 800; }
.vq-tog { position: relative; width: 4.4em; height: 2.3em; border-radius: 2em; background: var(--ag); }
.vq-tog::after { content: ""; position: absolute; right: .28em; top: .28em; width: 1.74em; height: 1.74em; border-radius: 50%; background: #fff; }

/* ---------- 10 subscribers ---------- */
.vm-hd { display: flex; align-items: center; gap: 1.4em; padding: 2.8em 3.2em; border-bottom: 1px solid #EDF1F8; }
.vm-hd b { font-size: 2.6em; }
.vm-search { flex: 1; max-width: 18em; padding: .9em 1.4em; border-radius: 1em; background: #F5F8FC; color: #9AA7BF; font-size: 2.05em; font-weight: 600; box-shadow: inset 0 0 0 1px #E2E8F2; }
.vm-tag { margin-left: auto; padding: .55em 1.2em; border-radius: .9em; background: var(--ag); color: #fff; font-size: 2.05em; font-weight: 800; }
.vm-rows { padding: 2.2em 3.2em 1em; }
.vm-r { display: flex; align-items: center; gap: 1.4em; margin-bottom: 1.2em; padding: 1.5em 1.8em; border-radius: 1.4em; background: #F7F9FC; box-shadow: inset 0 0 0 1px #E7ECF5; }
.vm-av { width: 4.4em; height: 4.4em; flex: none; border-radius: 50%; }
.vm-av.a1 { background: linear-gradient(135deg, #FFB067, #FF6B3D); }
.vm-av.a2 { background: linear-gradient(135deg, #2BE3B8, #0F9D8A); }
.vm-av.a3 { background: linear-gradient(135deg, #7C3AED, #C084FC); }
.vm-r div { flex: 1; min-width: 0; }
.vm-r b { display: block; font-size: 2.3em; }
.vm-r small { display: block; margin-top: .15em; color: var(--muted); font-size: 1.95em; font-weight: 600; }
.vm-st { padding: .5em 1.1em; border-radius: .9em; background: #EEF2F8; color: #7A87A3; font-size: 1.9em; font-weight: 800; white-space: nowrap; }
.vm-st.on { background: color-mix(in srgb, var(--a) 15%, #fff); color: var(--a); }
.vm-foot { display: flex; align-items: center; justify-content: space-between; margin: 1em 3.2em 3.2em; color: var(--muted); font-size: 2em; font-weight: 700; }

/* ---------- 11 every device ---------- */
.vv-set { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 2.4em; width: 100%; }
.vv { position: relative; overflow: hidden; border-radius: 1.8em; background: #fff; box-shadow: 0 3.4em 6em -3em rgba(10, 22, 51, .45), 0 0 0 1px rgba(10, 22, 51, .07); }
.vv-in { padding: 2.2em; }
.vv-in b { display: block; margin-bottom: 1.2em; font-family: 'Playfair Display', serif; font-size: 2.6em; font-weight: 900; }
.vv-in .sk { height: 1.4em; margin-top: 1.1em; }
.vv-img { height: 9em; margin-top: 1.6em; border-radius: 1.2em; background: linear-gradient(135deg, color-mix(in srgb, var(--a) 30%, #fff), color-mix(in srgb, var(--a2) 34%, #fff)); }
.vv-desk { width: 54%; }
.vv-desk .vv-bar { display: flex; align-items: center; gap: .9em; height: 4.4em; padding: 0 2em; border-bottom: 1px solid #E4E9F2; background: #F2F5FA; }
.vv-desk .vv-bar i { width: 1.3em; height: 1.3em; border-radius: 50%; background: #FF5F57; }
.vv-desk .vv-bar i:nth-child(2) { background: #FEBC2E; }
.vv-desk .vv-bar i:nth-child(3) { background: #28C840; }
.vv-tab { width: 26%; border-radius: 1.6em; }
.vv-phone { width: 15%; border-radius: 2.2em; }
.vv-phone .vv-notch { position: absolute; left: 50%; top: .9em; width: 30%; height: .9em; translate: -50% 0; border-radius: 1em; background: #E4E9F2; }
.vv-phone .vv-in { padding: 2.6em 1.4em 1.6em; }
.vv-phone .vv-in b { font-size: 2em; }
.vv-phone .vv-img { height: 6em; }
.vv-tt { right: 4%; top: 6%; }

/* ---------- responsive ---------- */
@media (max-width: 1199.98px) {
    .ie-rows { gap: 28px; max-width: 1140px; }
    .ie-row { gap: 34px; padding: 30px 32px; }
    /* Section 14's bottom padding shrinks here — keep the wave clear of its chevron */
    .ie-bg { --wv: 68px; }
}
@media (max-width: 991.98px) {
    .ie { padding: 56px 0 100px; }
    .ie-head { margin-bottom: 48px; }
    .ie-rows { gap: 72px; max-width: 680px; }
    .ie-row, .ie-row.rev { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .ie-row.rev .ie-txt { order: 0; }
    .ie-row:not(.rev) .ie-shot .sw, .ie-row.rev .ie-shot .sw { rotate: 0deg; }
    .ie-shot .scr, .v-pub, .v-art, .v-crm, .v-dev, .v-web { --u: 1.5cqw; }
    .ie-close { margin-top: 76px; }
}
/* tablet: the feature rows keep the desktop two-column shape inside their card */
@media (min-width: 768px) and (max-width: 991.98px) {
    .ie-rows { gap: 24px; max-width: 696px; }
    .ie-row, .ie-row.rev { grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); gap: 22px; padding: 24px 24px; }
    .ie-row.rev { grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr); }
    .ie-row.rev .ie-txt { order: 2; }
    .ie-tag i { width: 40px; height: 40px; border-radius: 13px; font-size: 16px; }
    .ie-tag em { font-size: 28px; }
    .ie-txt h3 { margin: 14px 0 10px; font-size: 21px; }
    .ie-txt p { font-size: 15px; line-height: 1.55; }
    .ie-hl::after { height: 3px; }
    .ie-shot .scr, .v-pub, .v-art, .v-crm, .v-dev, .v-web { --u: 1.15cqw; }
}
@media (max-width: 767.98px) {
    .ie { padding: 44px 0 88px; }
    .ie-bg { --wv: 50px; }
    .ie-t2 { font-size: 27px; }
    .ie-t3 { font-size: 19px; }
    .ie-kick span { padding: 10px 20px; font-size: 16px; }
    .ie-rows { gap: 20px; }
    .ie-row, .ie-row.rev { padding: 22px 18px 26px; border-radius: 24px; }
    .ie-txt h3 { margin: 14px 0 12px; font-size: 23px; }
    .ie-tag { gap: 11px; }
    .ie-tag i { width: 44px; height: 44px; border-radius: 14px; font-size: 17px; }
    .ie-tag em { font-size: 30px; }
    .ie-hl::after { height: 4px; }
    .ie-txt p { font-size: 16px; }
    /* keep the mocks at desktop proportions so their height scales with the width */
    .ie-shot .scr, .v-pub, .v-art, .v-crm, .v-dev, .v-web { --u: 1.15cqw; }
    .ie-close { margin-top: 56px; font-size: 19px; }
    .offer-ie { margin-top: 40px; }
}

/* ==========================================================
   SECTION 16 — VALUE CALCULATOR
   Headline now; .calc-slot is a reserved, correctly-proportioned placeholder
   so dropping the real calculator in later does not reflow the page.
   ========================================================== */
/* Distinct MINT/AQUA tint — Section 15 ends on #F4F7FD, so reusing that read as no section
   change at all. Flat fallback only; every painted layer lives on .calc-bg so the curved top
   clips gradient + glows + ripple texture as ONE surface (same rule as the 14->15 wave). */
.calc { position: relative; z-index: 10; isolation: isolate; overflow-x: clip; padding: 44px 0 110px; color: var(--ink); background: #EAF4F2; }
.calc-bg { --cv: 96px; position: absolute; top: calc(-1 * var(--cv)); left: 0; right: 0; bottom: 0; z-index: -1; overflow: hidden; pointer-events: none;
    background:
        radial-gradient(ellipse 62% 44% at 50% 44%, rgba(255, 255, 255, .92), transparent 74%),
        radial-gradient(ellipse 44% 34% at -2% 18%, rgba(13, 148, 136, .26), transparent 68%),
        radial-gradient(ellipse 42% 32% at 102% 52%, rgba(11, 92, 255, .2), transparent 68%),
        radial-gradient(ellipse 38% 28% at 8% 96%, rgba(124, 58, 237, .14), transparent 70%),
        radial-gradient(ellipse 46% 30% at 92% 100%, rgba(18, 201, 166, .2), transparent 72%),
        linear-gradient(180deg, #DCEFEB 0%, #E3EEFA 46%, #E7F4F1 100%);
    /* one long asymmetric sweep — deliberately NOT the symmetric wave used at 14->15 */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'%3E%3Cpath d='M0 96 L0 40 C 480 -12 960 92 1440 28 L1440 96 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'%3E%3Cpath d='M0 96 L0 40 C 480 -12 960 92 1440 28 L1440 96 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
    -webkit-mask-size: 100% var(--cv), 100% calc(100% - var(--cv) + 1px);
            mask-size: 100% var(--cv), 100% calc(100% - var(--cv) + 1px);
    -webkit-mask-position: 0 0, 0 100%;
            mask-position: 0 0, 0 100%;
    -webkit-mask-repeat: no-repeat, no-repeat;
            mask-repeat: no-repeat, no-repeat; }
/* concentric ripples, not Section 15's square grid */
.calc-bg::after { content: ""; position: absolute; inset: 0;
    background: repeating-radial-gradient(circle at 50% 30%, rgba(12, 120, 96, .07) 0 1px, transparent 1px 52px);
    -webkit-mask-image: radial-gradient(ellipse 52% 46% at 50% 46%, transparent 42%, #000 100%);
            mask-image: radial-gradient(ellipse 52% 46% at 50% 46%, transparent 42%, #000 100%); }

/* floating calculator motifs */
.calc-deco { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cd-arc { position: absolute; border-radius: 50%; border: 1.5px dashed rgba(13, 148, 136, .26); }
.cd-arc.a1 { left: calc(50% - 50vw + 3vw); top: 22%; width: 210px; height: 210px; }
.cd-arc.a2 { right: calc(50% - 50vw + 2vw); bottom: 12%; width: 280px; height: 280px; border-color: rgba(11, 92, 255, .14); }
.cd-op { position: absolute; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 19px; background: #fff; color: #0C8C5A; font-family: var(--display); font-size: 26px; font-weight: 800;
    box-shadow: 0 20px 34px -20px rgba(10, 22, 51, .45), 0 0 0 1px rgba(10, 22, 51, .05); animation: floaty 7s ease-in-out infinite; }
/* keep every tile fully on-screen: a 52px tile rotated a few degrees needs ~60px of
   clearance, so these sit at a fixed px offset rather than a vw that collapses at 1600 */
.calc-deco .o1 { left: calc(50% - 50vw + 64px); top: 16%; rotate: -8deg; }
.calc-deco .o2 { right: calc(50% - 50vw + 64px); top: 28%; rotate: 7deg; color: #0B5CFF; animation-delay: -2s; }
.calc-deco .o3 { left: calc(50% - 50vw + 78px); bottom: 22%; rotate: 6deg; color: #7C3AED; animation-delay: -4s; }
.calc-deco .o4 { right: calc(50% - 50vw + 72px); bottom: 30%; rotate: -6deg; color: #D97706; animation-delay: -1s; }
.cd-fig { position: absolute; display: block; padding: 13px 20px 12px; border-radius: 18px; background: #fff; text-align: center; border-top: 3px solid #12C9A6;
    box-shadow: 0 22px 38px -22px rgba(10, 22, 51, .45), 0 0 0 1px rgba(10, 22, 51, .05); animation: floaty 8s ease-in-out infinite; }
.cd-fig em { display: block; color: var(--ink); font-family: var(--display); font-size: 19px; font-style: normal; font-weight: 800; letter-spacing: -.02em; }
.cd-fig small { display: block; margin-top: 1px; color: var(--muted); font-size: 11.5px; font-weight: 700; }
.calc-deco .f1 { left: calc(50% - 50vw + 30px); top: 42%; rotate: -4deg; animation-delay: -3s; }
.calc-deco .f2 { right: calc(50% - 50vw + 30px); top: 52%; rotate: 4deg; animation-delay: -5.5s; }
@media (max-width: 1499.98px) { .cd-op, .cd-fig { display: none; } .cd-arc.a1 { width: 150px; height: 150px; } }
/* shallower curve where Section 15's bottom padding shrinks */
@media (max-width: 1199.98px) { .calc-bg { --cv: 64px; } }

/* wide enough that each explicit .calc-br segment holds on ONE line at desktop —
   the longest is "Build a local audience of just 10,000 subscribers" */
.calc-head { max-width: 1180px; margin: 0 auto 52px; text-align: center; }
.calc-title { margin: 0; color: var(--ink); font-family: var(--display); font-size: clamp(25px, 2.85vw, 40px); font-weight: 800; line-height: 1.3; letter-spacing: -.03em; }
.calc-title > span, .calc-title > b { white-space: nowrap; }
/* forced 3-line break on desktop; phones wrap naturally */
.calc-br { display: none; }
@media (min-width: 992px) { .calc-br { display: block; } }
.calc-title b { font-weight: 800; }
.calc-hl { background: linear-gradient(100deg, #0B5CFF, #0EA5E9 55%, #12C9A6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.calc-big { background: linear-gradient(100deg, #0C8C5A, #12C9A6 60%, #0EA5E9); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 1.24em; }

/* reserved slot */
.calc-slot { position: relative; max-width: 1080px; margin: 0 auto; overflow: hidden; border-radius: 26px; background: #fff;
    box-shadow: 0 40px 80px -44px rgba(10, 22, 51, .45), 0 0 0 1px rgba(10, 22, 51, .07); }
.cl-bar { display: block; padding: 22px 32px 24px; background: linear-gradient(100deg, #0B5CFF, #0EA5E9 52%, #12C9A6); color: #fff; }
.cl-bar b { display: block; font-family: var(--display); font-size: 23px; font-weight: 800; letter-spacing: -.02em; }
.cl-bar small { display: block; margin-top: 5px; color: rgba(255, 255, 255, .88); font-size: 14px; font-weight: 600; }
/* both columns stretch to a common height so the slot reserves the REAL calculator's
   footprint — otherwise dropping the live one in later reflows everything below it */
.cl-body { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; padding: 34px 32px 36px; }
.cl-side, .cl-out { display: flex; flex-direction: column; }
.cl-side > small, .cl-out > small { display: block; margin-bottom: 22px; color: var(--muted); font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cl-fld { display: flex; flex: 1; flex-direction: column; justify-content: center; margin-bottom: 18px; }
.cl-fld:last-child { margin-bottom: 0; }
.cl-fld em { display: block; margin-bottom: 14px; color: var(--ink); font-size: 16px; font-style: normal; font-weight: 700; }
/* range input, styled so the filled part tracks the thumb via --p */
.cl-range { --p: 20%; display: block; width: 100%; height: 22px; margin: 0; padding: 0; cursor: pointer; background: transparent; -webkit-appearance: none; appearance: none; }
.cl-range::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: linear-gradient(90deg, #0B5CFF 0 var(--p), #E4EBF5 var(--p) 100%); }
.cl-range::-moz-range-track { height: 8px; border-radius: 8px; background: linear-gradient(90deg, #0B5CFF 0 var(--p), #E4EBF5 var(--p) 100%); }
.cl-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -7px; border: 4px solid #fff; border-radius: 50%; background: #0B5CFF; box-shadow: 0 6px 14px -4px rgba(11, 92, 255, .85); }
.cl-range::-moz-range-thumb { width: 14px; height: 14px; border: 4px solid #fff; border-radius: 50%; background: #0B5CFF; box-shadow: 0 6px 14px -4px rgba(11, 92, 255, .85); }
.cl-range:focus-visible { outline: 3px solid rgba(11, 92, 255, .35); outline-offset: 4px; border-radius: 8px; }
.cl-scale { display: flex; align-items: baseline; justify-content: space-between; margin-top: 6px; }
.cl-scale i { color: var(--muted); font-size: 12.5px; font-style: normal; font-weight: 700; }
.cl-scale b { position: absolute; left: 50%; translate: -50% 0; color: #0C8C5A; font-family: var(--display); font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.cl-scale { position: relative; }

.cl-res { display: block; flex: none; margin-bottom: 16px; padding: 20px 22px; border-radius: 18px; background: #F4F7FC; box-shadow: inset 0 0 0 1px #E4EBF5; }
.cl-res-hd { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cl-res-hd b { color: var(--ink); font-family: var(--display); font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.cl-pill { margin-left: auto; padding: 5px 13px; border-radius: 999px; background: #E7EDF7; color: #5F6E8C; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; }
.cl-pill-g { background: linear-gradient(120deg, #0C8C5A, #12C9A6); color: #fff; box-shadow: 0 10px 18px -10px rgba(12, 140, 90, .8); }
.cl-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cl-metrics span { display: block; min-width: 0; }
.cl-metrics small { display: block; margin-bottom: 4px; color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.cl-metrics strong { display: block; color: var(--ink); font-family: var(--display); font-size: clamp(24px, 2.2vw, 30px); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; }
.cl-note { margin: 14px 0 0; color: #4E6A5E; font-size: 13px; font-weight: 600; }
.cl-note b { color: #0C8C5A; font-weight: 800; }
.cl-res-b { background: linear-gradient(160deg, #EFFAF5, #E6F7F0); box-shadow: inset 0 0 0 1px #CFEBDF; }
.cl-res-b .cl-metrics strong { color: #0C8C5A; }
.cl-res-c { display: flex; align-items: center; gap: 16px; margin-bottom: 0; background: linear-gradient(160deg, #FFF8E8, #FFF2D8); box-shadow: inset 0 0 0 1px #F2DFB4; }
.cl-ic { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 16px; background: #fff; font-size: 25px; box-shadow: 0 12px 22px -12px rgba(160, 110, 10, .6); }
.cl-sum { display: block; min-width: 0; }
.cl-sum small { display: block; margin-bottom: 2px; color: #7A5A12; font-size: 13.5px; font-weight: 700; }
.cl-sum strong { display: block; color: #9A6A00; font-family: var(--display); font-size: clamp(26px, 2.4vw, 34px); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; }

@media (max-width: 767.98px) {
    .calc { padding: 48px 0 72px; }
    .calc-bg { --cv: 46px; }
    .calc-head { margin-bottom: 34px; }
    .calc-title { font-size: 26px; line-height: 1.3; }
    .cl-bar { padding: 18px 20px 20px; }
    .cl-bar b { font-size: 20px; }
    .cl-bar small { font-size: 13px; }
    .cl-body { grid-template-columns: 1fr; gap: 26px; min-height: 0; padding: 24px 18px 26px; }
    .cl-fld { flex: none; margin-bottom: 22px; }
    .cl-res { height: auto; padding: 17px 18px; }
    .cl-res-hd { margin-bottom: 13px; }
    .cl-res-hd b { font-size: 16.5px; }
    .cl-metrics { gap: 12px; }
    .cl-metrics strong { font-size: 23px; }
    .cl-res-c { height: auto; gap: 13px; }
    .cl-ic { width: 46px; height: 46px; border-radius: 14px; font-size: 22px; }
}

/* ==========================================================
   SECTION 17 — THE REAL IMPACT (8 cards, 3 per row: 3/3/2)
   DARK by design: Sections 15 and 16 are both light, so this lands the payoff
   with contrast. Mirrored diagonal top (high-LEFT) vs Section 14 (high-RIGHT).
   ========================================================== */
.imp { position: relative; z-index: 11; isolation: isolate; overflow: hidden; margin-top: -72px; padding: 100px 0 120px; color: #fff; background: #16255A;
    clip-path: polygon(0 0, 100% 70px, 100% 100%, 0 100%); }
.imp-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(ellipse 52% 26% at 50% 2%, rgba(25, 211, 255, .26), transparent 70%),
        radial-gradient(ellipse 66% 40% at 50% 48%, rgba(72, 132, 255, .22), transparent 72%),
        radial-gradient(ellipse 42% 28% at 0% 38%, rgba(56, 130, 255, .3), transparent 70%),
        radial-gradient(ellipse 42% 28% at 100% 70%, rgba(147, 97, 255, .3), transparent 70%),
        radial-gradient(ellipse 38% 24% at 88% 22%, rgba(18, 201, 166, .16), transparent 72%),
        linear-gradient(180deg, #1D3270 0%, #17275E 52%, #1B2C66 100%); }
.imp-bg::after { content: ""; position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 5px); }

.imp-head { max-width: 900px; margin: 0 auto 60px; text-align: center; }
.imp-title { margin: 0; color: #fff; font-family: var(--display); font-size: clamp(30px, 4vw, 54px); font-weight: 800; line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
.imp-hl { background: linear-gradient(100deg, #19D3FF, #12C9A6 60%, #7FE3FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.imp-sub { margin: 20px 0 0; color: #C5D2EE; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.6; text-wrap: balance; }
.imp-sub b { color: #fff; font-weight: 800; }
.imp-kick { display: inline-block; margin-top: 30px; padding: 11px 28px; border-radius: 999px; background: linear-gradient(100deg, #0B5CFF, #0EA5E9 55%, #12C9A6); color: #fff; font-family: var(--display); font-size: clamp(15px, 1.5vw, 19px); font-weight: 800; letter-spacing: -.01em; box-shadow: 0 18px 34px -18px rgba(14, 165, 233, .95), inset 0 1px 0 rgba(255, 255, 255, .35); }

/* 3 per row; the final row of 2 centres itself */
.imp-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; max-width: 1180px; margin: 0 auto; }
.imp-card { position: relative; display: flex; flex-direction: column; width: calc((100% - 52px) / 3); overflow: hidden; border-radius: 22px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--a) 13%, rgba(255, 255, 255, .07)), rgba(255, 255, 255, .035));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a) 34%, rgba(255, 255, 255, .1)),
                0 30px 60px -36px rgba(0, 0, 0, .9),
                0 0 44px -20px color-mix(in srgb, var(--a) 70%, transparent); }
/* full-bleed photo banner, same treatment as the Section 5 .case cards */
.imp-img { position: relative; overflow: hidden; aspect-ratio: 16 / 10;
    background: linear-gradient(140deg, color-mix(in srgb, var(--a) 34%, #16255A), color-mix(in srgb, var(--a) 72%, #0A1633)); }
.imp-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.imp-img::after { content: ""; position: absolute; inset: 46% 0 0; pointer-events: none;
    background: linear-gradient(transparent, color-mix(in srgb, var(--a) 24%, rgba(8, 14, 36, .26)) 62%, color-mix(in srgb, var(--a) 42%, rgba(8, 14, 36, .58))); }
/* accent glow line along the bottom edge of the photo */
.imp-img::before { content: ""; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 4px; pointer-events: none;
    background: linear-gradient(90deg, var(--a), var(--a2)); box-shadow: 0 0 20px 1px color-mix(in srgb, var(--a2) 75%, transparent); }
.imp-ph { position: absolute; z-index: 3; left: 16px; top: 16px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
    background: linear-gradient(135deg, var(--a), var(--a2)); color: #fff; font-size: 18px; transform: none;
    box-shadow: 0 14px 24px -10px color-mix(in srgb, var(--a) 85%, transparent), inset 0 1px 0 rgba(255, 255, 255, .4); }
.imp-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 4; height: 5px; background: linear-gradient(90deg, var(--a), var(--a2)); box-shadow: 0 6px 18px -2px color-mix(in srgb, var(--a) 70%, transparent); }
.imp-body { padding: 26px 26px 28px; }
/* cards + elements floating around the section (fixed px offsets, never vw) */
.imp-deco { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.imp-orb { position: absolute; border-radius: 50%; opacity: .55; }
.imp-orb.b1 { left: -120px; top: 14%; width: 320px; height: 320px; background: radial-gradient(closest-side, rgba(25, 211, 255, .28), transparent 70%); }
.imp-orb.b2 { right: -140px; bottom: 10%; width: 380px; height: 380px; background: radial-gradient(closest-side, rgba(147, 97, 255, .26), transparent 70%); }
.imp-ring2 { position: absolute; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .14); }
.imp-ring2.g1 { left: 40px; bottom: 16%; width: 210px; height: 210px; }
.imp-ring2.g2 { right: 60px; top: 12%; width: 260px; height: 260px; border-color: rgba(127, 227, 255, .16); }
.imp-el { --a: #19D3FF; --a2: #0B5CFF; position: absolute; overflow: hidden; padding: 15px 18px 16px 21px; border-radius: 19px;
    background: linear-gradient(165deg, color-mix(in srgb, var(--a) 16%, rgba(12, 22, 54, .78)), rgba(10, 18, 46, .82)); backdrop-filter: blur(8px);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a) 40%, rgba(255, 255, 255, .14)), 0 26px 44px -24px rgba(0, 0, 0, .95),
                0 0 34px -16px color-mix(in srgb, var(--a) 75%, transparent); animation: floaty 8s ease-in-out infinite; }
.imp-el::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--a), var(--a2)); }
.imp-el em { display: block; font-family: var(--display); font-size: 26px; font-style: normal; font-weight: 800; line-height: 1.05; letter-spacing: -.03em;
    background: linear-gradient(100deg, #fff, color-mix(in srgb, var(--a) 72%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.imp-el small { display: block; margin-top: 4px; color: #C0D0EE; font-size: 12px; font-weight: 700; letter-spacing: -.005em; }
.imp-deco .e2 { --a: #4ADE80; --a2: #16A34A; }
.imp-deco .e3 { --a: #FCD34D; --a2: #D97706; }
.imp-deco .e4 { --a: #C084FC; --a2: #7C3AED; }
.imp-el .spark { display: flex; align-items: flex-end; gap: 3px; height: 24px; margin-top: 9px; }
.imp-el .spark i { width: 5px; border-radius: 2px; background: linear-gradient(180deg, var(--a), var(--a2)); }
.imp-deco .e1 { left: 34px; top: 20%; rotate: -4deg; }
.imp-deco .e2 { right: 22px; top: 34%; rotate: 4deg; animation-delay: -2.5s; }
.imp-deco .e3 { left: 46px; bottom: 24%; rotate: 3deg; animation-delay: -5s; }
.imp-deco .e4 { right: 46px; bottom: 34%; rotate: -3deg; animation-delay: -1.2s; }
@media (max-width: 1499.98px) { .imp-el { display: none; } }
.imp-body h3 { position: relative; margin: 0 0 12px; padding-top: 16px; font-family: var(--display); font-size: clamp(20px, 1.8vw, 24px); font-weight: 800; line-height: 1.2; letter-spacing: -.028em;
    background: linear-gradient(104deg, #fff 35%, color-mix(in srgb, var(--a2) 62%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.imp-body h3::before { content: ""; position: absolute; left: 0; top: 0; width: 32px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--a), var(--a2)); box-shadow: 0 0 14px 0 color-mix(in srgb, var(--a2) 70%, transparent); }
.imp-body p { margin: 0; color: #B9C7E6; font-size: 15.5px; line-height: 1.66; }
.imp-card b { color: #fff; font-weight: 800; }

.imp-close { max-width: 900px; margin: 68px auto 0; color: #fff; font-family: var(--display); font-size: clamp(21px, 2.5vw, 33px); font-weight: 800; line-height: 1.34; letter-spacing: -.025em; text-align: center; text-wrap: balance; }
.imp-close mark { padding: 0 .12em; border-radius: 3px; background: linear-gradient(transparent 14%, #FFE066 14%, #FFD84D 88%, transparent 88%); color: var(--ink); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

@media (max-width: 1199.98px) {
    .imp-card { width: calc((100% - 26px) / 2); }
}
@media (max-width: 767.98px) {
    .imp { margin-top: -38px; padding: 86px 0 80px; clip-path: polygon(0 0, 100% 36px, 100% 100%, 0 100%); }
    .imp-head { margin-bottom: 40px; }
    .imp-title { font-size: 28px; }
    .imp-sub { font-size: 16.5px; }
    .imp-grid { gap: 18px; }
    .imp-ph { left: 12px; top: 12px; width: 38px; height: 38px; border-radius: 12px; font-size: 16px; }
    .imp-card { width: 100%; padding: 24px 22px 26px; border-radius: 18px; }
    .imp-ic { width: 48px; height: 48px; margin-bottom: 16px; border-radius: 15px; font-size: 19px; }
    .imp-close { margin-top: 44px; font-size: 20px; }
}

/* ==========================================================
   SECTION 18 — TESTIMONIALS III (light, 2x2)
   Reuses the .tcard / .tc-* cards from Section 2. Light ground because
   Section 17 above is dark navy. Transition is a shallow double-notch arc,
   distinct from the wave (14->15), sweep (15->16) and diagonal (16->17).
   ========================================================== */
.tst { position: relative; z-index: 12; isolation: isolate; overflow-x: clip; padding: 32px 0 118px; color: var(--ink); background: #F3F7FD; }
.tst-bg { --tv: 92px; position: absolute; top: calc(-1 * var(--tv)); left: 0; right: 0; bottom: 0; z-index: -1; overflow: hidden; pointer-events: none;
    background:
        radial-gradient(ellipse 46% 26% at 50% 2%, rgba(255, 255, 255, .95), transparent 72%),
        radial-gradient(ellipse 34% 24% at 5% 28%, rgba(11, 92, 255, .10), transparent 70%),
        radial-gradient(ellipse 34% 24% at 96% 66%, rgba(18, 201, 166, .12), transparent 70%),
        linear-gradient(180deg, #F6F9FE 0%, #EEF4FC 50%, #F3F7FD 100%);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 92' preserveAspectRatio='none'%3E%3Cpath d='M0 92 L0 34 C 180 34 250 6 420 6 C 590 6 660 40 720 40 C 780 40 850 6 1020 6 C 1190 6 1260 34 1440 34 L1440 92 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 92' preserveAspectRatio='none'%3E%3Cpath d='M0 92 L0 34 C 180 34 250 6 420 6 C 590 6 660 40 720 40 C 780 40 850 6 1020 6 C 1190 6 1260 34 1440 34 L1440 92 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
    -webkit-mask-size: 100% var(--tv), 100% calc(100% - var(--tv) + 1px);
            mask-size: 100% var(--tv), 100% calc(100% - var(--tv) + 1px);
    -webkit-mask-position: 0 0, 0 100%;
            mask-position: 0 0, 0 100%;
    -webkit-mask-repeat: no-repeat, no-repeat;
            mask-repeat: no-repeat, no-repeat; }

.tst .st-head { margin-bottom: 56px; }
.tst-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: 1080px; margin: 0 auto; align-items: start; }

@media (max-width: 1199.98px) { .tst-bg { --tv: 64px; } }
@media (max-width: 991.98px) {
    .tst { padding: 28px 0 90px; }
    .tst-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 620px; }
}
/* tablet keeps the 2x2 grid rather than unrolling into one tall column */
@media (min-width: 768px) and (max-width: 991.98px) {
    .tst-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 696px; }
}
@media (max-width: 767.98px) {
    .tst { padding: 22px 0 74px; }
    .tst-bg { --tv: 44px; }
    .tst .st-head { margin-bottom: 36px; }
}

/* ==========================================================
   SECTION 19 — WHO IS THIS FOR? (6 cards + 1 wide highlight)
   Deeper INDIGO tint: Section 18 ends on #F3F7FD, so a similar light would
   read as no section change at all. Transition is a shallow centred chevron,
   distinct from the wave / sweep / diagonal / double-notch above it.
   ========================================================== */
.who { position: relative; z-index: 13; isolation: isolate; overflow-x: clip; padding: 44px 0 72px; color: var(--ink); background: #E4E8FA; }
.who-bg { --cw: 94px; position: absolute; top: calc(-1 * var(--cw)); left: 0; right: 0; bottom: 0; z-index: -1; overflow: hidden; pointer-events: none;
    background:
        radial-gradient(ellipse 46% 26% at 50% 3%, rgba(255, 255, 255, .9), transparent 72%),
        radial-gradient(ellipse 34% 24% at 4% 30%, rgba(11, 92, 255, .13), transparent 70%),
        radial-gradient(ellipse 34% 24% at 97% 64%, rgba(124, 58, 237, .14), transparent 70%),
        linear-gradient(180deg, #E8EBFC 0%, #DFE4F8 52%, #E6EAFB 100%);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 94' preserveAspectRatio='none'%3E%3Cpath d='M0 94 L0 22 L720 64 L1440 22 L1440 94 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 94' preserveAspectRatio='none'%3E%3Cpath d='M0 94 L0 22 L720 64 L1440 22 L1440 94 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
    -webkit-mask-size: 100% var(--cw), 100% calc(100% - var(--cw) + 1px);
            mask-size: 100% var(--cw), 100% calc(100% - var(--cw) + 1px);
    -webkit-mask-position: 0 0, 0 100%;
            mask-position: 0 0, 0 100%;
    -webkit-mask-repeat: no-repeat, no-repeat;
            mask-repeat: no-repeat, no-repeat; }

.who-head { max-width: 900px; margin: 0 auto 54px; text-align: center; }
.who-title { margin: 0; color: var(--ink); font-family: var(--display); font-size: clamp(32px, 4.2vw, 56px); font-weight: 800; line-height: 1.1; letter-spacing: -.035em; }
.who-hl { background: linear-gradient(100deg, #0B5CFF, #7C3AED 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.who-lead { margin: 20px 0 0; color: #45536F; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.6; text-wrap: balance; }
.who-lead b { color: var(--ink); font-weight: 800; }
.who-nos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; margin: 22px 0 0; }
.who-nos span { padding: 8px 16px; border-radius: 999px; background: #fff; color: var(--ink-2); font-size: 14.5px; font-weight: 700; box-shadow: 0 10px 20px -14px rgba(10, 22, 51, .5), inset 0 0 0 1px rgba(10, 22, 51, .07); }
.who-nos em { padding: 8px 18px; border-radius: 999px; background: var(--grad); color: #fff; font-size: 14.5px; font-style: normal; font-weight: 800; box-shadow: 0 14px 26px -14px rgba(11, 92, 255, .85); }
.who-kick { display: inline-block; margin-top: 30px; color: var(--ink); font-family: var(--display); font-size: clamp(18px, 1.9vw, 24px); font-weight: 800; letter-spacing: -.02em; }

.who-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; max-width: 1140px; margin: 0 auto; }
/* overflow:hidden is what makes the top accent bar follow the card's rounded corners —
   without it the 3px bar keeps square corners that poke past the radius */
.who-card { position: relative; display: flex; flex-direction: column; width: calc((100% - 48px) / 3); overflow: hidden; padding: 28px 26px 30px; border-radius: 22px; background: #fff;
    box-shadow: 0 28px 54px -34px rgba(10, 22, 51, .45), 0 0 0 1px rgba(10, 22, 51, .06); }
.who-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--a), var(--a2)); }
/* bigger slot so character art has room; FA tile is the fallback until art lands */
.who-ic { position: relative; display: grid; place-items: center; width: 104px; height: 104px; margin-bottom: 16px; }
.who-ic::before { content: ""; position: absolute; inset: -6%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--a) 26%, transparent), transparent 74%); }
.who-ic img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 16px rgba(10, 22, 51, .22)); }
.who-ic i { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(145deg, var(--a), var(--a2)); color: #fff; font-size: 22px; box-shadow: 0 18px 30px -16px var(--a); }
.who-ic img + i { display: none; }
.who-card h3 { margin: 0 0 10px; color: var(--ink); font-family: var(--display); font-size: clamp(18px, 1.6vw, 21px); font-weight: 800; line-height: 1.25; letter-spacing: -.02em; }
/* highlighted title pill — needs h3 in the selector to outrank .who-card h3 */
.who-card h3.who-pill { display: inline-block; align-self: flex-start; margin: 0 0 12px; padding: 9px 17px; border-radius: 13px;
    background: color-mix(in srgb, var(--a) 16%, #fff); color: var(--ink);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--a) 34%, #fff), 0 10px 18px -12px color-mix(in srgb, var(--a) 70%, transparent); }
.who-card p { margin: 0; color: #4A5772; font-size: 15.5px; line-height: 1.65; }
.who-card b { color: var(--ink); font-weight: 800; }
/* the 7th runs full width so the odd card reads as deliberate, not a gap */
.who-wide { flex-direction: row; align-items: center; gap: 22px; width: 100%; background: linear-gradient(120deg, #FFF8E8, #FFEFCC); box-shadow: 0 28px 54px -32px rgba(217, 119, 6, .5), 0 0 0 1px rgba(217, 119, 6, .16); }
.who-wide .who-ic { width: 116px; height: 116px; margin-bottom: 0; flex: none; }
.who-wide p { max-width: 760px; }

@media (max-width: 1199.98px) {
    .who-bg { --cw: 66px; }
    .who-card { width: calc((100% - 24px) / 2); }
    /* the closing highlight still spans the row, not a lone half-width orphan */
    .who-card.who-wide { width: 100%; }
}
@media (max-width: 767.98px) {
    .who { padding: 44px 0 52px; }
    .who-bg { --cw: 44px; }
    .who-head { margin-bottom: 34px; }
    .who-title { font-size: 29px; }
    .who-lead { font-size: 16.5px; }
    .who-nos { gap: 8px 10px; margin-top: 18px; }
    .who-nos span, .who-nos em { padding: 7px 13px; font-size: 13px; }
    .who-grid { gap: 16px; }
    .who-card { width: 100%; padding: 22px 20px 24px; border-radius: 18px; }
    .who-ic { width: 84px; height: 84px; margin-bottom: 12px; }
    .who-ic i { width: 48px; height: 48px; border-radius: 15px; font-size: 19px; }
    .who-wide { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* Section 19 background elements (standing rule: every section gets these) */
.who-deco { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.wd-orb { position: absolute; border-radius: 50%; }
.wd-orb.w1 { left: -150px; top: 8%; width: 360px; height: 360px; background: radial-gradient(closest-side, rgba(11, 92, 255, .16), transparent 70%); }
.wd-orb.w2 { right: -170px; bottom: 6%; width: 420px; height: 420px; background: radial-gradient(closest-side, rgba(124, 58, 237, .15), transparent 70%); }
.wd-ring { position: absolute; border-radius: 50%; border: 1.5px dashed rgba(11, 92, 255, .18); }
.wd-ring.v1 { left: 54px; bottom: 14%; width: 200px; height: 200px; }
.wd-ring.v2 { right: 70px; top: 10%; width: 250px; height: 250px; border-color: rgba(124, 58, 237, .18); }
.wd-per { position: absolute; display: inline-flex; align-items: center; gap: 9px; padding: 10px 15px 10px 11px; border-radius: 14px;
    background: color-mix(in srgb, var(--a) 13%, #fff); color: var(--ink); font-size: 14px; font-weight: 800; white-space: nowrap;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--a) 30%, #fff), 0 18px 30px -20px color-mix(in srgb, var(--a) 75%, transparent);
    animation: floaty 8s ease-in-out infinite; }
.wd-per i { font-size: 19px; font-style: normal; line-height: 1; }
.wd-per em { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: #16C784; color: #fff; font-size: 11px; font-style: normal; font-weight: 900; }
.who-deco .p1 { left: 38px; top: 16%; rotate: -5deg; }
.who-deco .p2 { right: 40px; top: 25%; rotate: 4deg; animation-delay: -2s; }
.who-deco .p3 { left: 30px; top: 46%; rotate: 3deg; animation-delay: -4s; }
.who-deco .p4 { right: 32px; top: 56%; rotate: -3deg; animation-delay: -1s; }
.who-deco .p5 { left: 44px; bottom: 18%; rotate: -4deg; animation-delay: -5.5s; }
.wd-tick { position: absolute; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: #16C784; font-size: 18px; font-weight: 900;
    box-shadow: 0 18px 30px -20px rgba(10, 22, 51, .5), inset 0 0 0 1.5px rgba(22, 199, 132, .3); animation: floaty 7s ease-in-out infinite; }
.who-deco .t1 { right: 64px; bottom: 24%; rotate: 8deg; animation-delay: -3s; }
.who-deco .t2 { left: 70px; top: 32%; rotate: -8deg; animation-delay: -6s; }
@media (max-width: 1499.98px) { .wd-per, .wd-tick { display: none; } }

/* ==========================================================
   SECTION 20 — HOW YOU CAN MAKE MONEY
   Section 4 treatment: full-bleed photo background + gradient scrim.
   2 cards per row, each with a full photo. Transition is a soft dome —
   the 6th distinct shape (wave / sweep / diagonal / notch / chevron / dome).
   ========================================================== */
.mny { position: relative; z-index: 14; isolation: isolate; overflow: hidden; padding: 128px 0 130px; color: #fff; }
.mny-bg { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, #E6EAFB 0%, #A7B0DC 14%, #565781 34%, #2A2449 56%, #16112D 76%, #0D0A1F 100%); }
/* photo SITS AT THE BOTTOM; the gradient above simply runs down into it */
.mny-photo { position: absolute; left: 0; right: 0; bottom: 0; top: auto; width: 100%; height: 62%; object-fit: cover; object-position: center bottom; opacity: .55;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 38%, #000 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 38%, #000 100%); }
.mny-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, transparent 30%, rgba(14, 10, 32, .62) 62%, rgba(11, 8, 26, .92) 100%); }
/* soft dome carrying Section 19 indigo down into the photo */
.mny-bg::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 120px; background: #E6EAFB;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1440 0 L1440 34 C 1120 92 920 18 660 58 C 420 96 210 26 0 68 Z' fill='%23000'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1440 0 L1440 34 C 1120 92 920 18 660 58 C 420 96 210 26 0 68 Z' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

.mny-head { max-width: 980px; margin: 0 auto 58px; text-align: center; }
.mny-title { margin: 0; color: var(--ink); font-family: var(--display); font-size: clamp(31px, 4.1vw, 55px); font-weight: 800; line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; }
.mny-mark { display: inline-block; padding: 0 .18em .05em; border-radius: .16em; background: linear-gradient(100deg, #F59E0B, #FFD84D); color: #3A2600; rotate: -1.5deg; box-shadow: 0 18px 34px -16px rgba(217, 119, 6, .75); }
.mny-lead { margin: 22px 0 0; color: #41506E; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.62; text-wrap: balance; }
.mny-lead b { color: var(--ink); font-weight: 800; }

.mny-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; max-width: 1120px; margin: 0 auto; }
.mny-card { position: relative; display: flex; flex-direction: row-reverse; align-items: stretch; overflow: hidden; border-radius: 22px;
    background: linear-gradient(150deg, color-mix(in srgb, var(--a) 30%, #15122E), color-mix(in srgb, var(--a) 13%, #100D26) 70%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a) 40%, transparent), 0 36px 68px -38px rgba(0, 0, 0, .95); }
.mny-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: 3px; background: linear-gradient(90deg, var(--a), var(--a2)); }
.mny-img { position: relative; width: 44%; flex: none; overflow: hidden; align-self: stretch; min-height: 178px;
    background: linear-gradient(140deg, color-mix(in srgb, var(--a) 40%, #1B1638), color-mix(in srgb, var(--a) 72%, #0D0A1F)); }
.mny-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mny-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 9, 28, .78), transparent 46%); pointer-events: none; }
.mny-ph { position: absolute; left: 50%; top: 50%; color: rgba(255, 255, 255, .5); font-size: 54px; transform: translate(-50%, -50%); }
.mny-no { position: absolute; right: 16px; top: 16px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
    background: linear-gradient(145deg, var(--a), var(--a2)); color: #fff; font-family: var(--display); font-size: 20px; font-weight: 800;
    box-shadow: 0 16px 26px -14px var(--a); }
.mny-body { flex: 1; min-width: 0; padding: 26px 8px 26px 26px; align-self: center; }
.mny-body h3 { display: inline-block; margin: 0 0 13px; padding: 8px 15px; border-radius: 12px;
    background: color-mix(in srgb, var(--a) 24%, #fff); color: var(--ink); font-family: var(--display); font-size: clamp(18px, 1.65vw, 22px); font-weight: 800; line-height: 1.24; letter-spacing: -.02em;
    box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .8); }
.mny-body p { margin: 0; color: #C3CFE8; font-size: 15.5px; line-height: 1.66; }
.mny-body b { color: #fff; font-weight: 800; }

.mny-flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin: 54px auto 0; }
.mny-flow span { padding: 12px 22px; border-radius: 999px; color: #0C1029; font-family: var(--display); font-size: clamp(14px, 1.45vw, 17px); font-weight: 800; }
.mny-flow span:nth-of-type(1) { background: linear-gradient(135deg, #7FE3FF, #19D3FF); box-shadow: 0 16px 28px -16px rgba(25, 211, 255, .9); }
.mny-flow span:nth-of-type(2) { background: linear-gradient(135deg, #C4B5FD, #A78BFA); box-shadow: 0 16px 28px -16px rgba(167, 139, 250, .9); }
.mny-flow span:nth-of-type(3) { background: linear-gradient(135deg, #86EFAC, #4ADE80); box-shadow: 0 16px 28px -16px rgba(74, 222, 128, .9); }
.mny-flow span:nth-of-type(4) { background: linear-gradient(135deg, #FDE68A, #FBBF24); box-shadow: 0 16px 28px -16px rgba(251, 191, 36, .9); }
.mny-flow i { color: var(--cyan); font-size: 18px; font-style: normal; }
.mny-close { max-width: 940px; margin: 50px auto 0; color: #fff; font-family: var(--display); font-size: clamp(21px, 2.4vw, 31px); font-weight: 800; line-height: 1.36; letter-spacing: -.025em; text-align: center; text-wrap: balance; }
.mny-close b { background: linear-gradient(100deg, #4ADE80, #19D3FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mny-close mark { padding: 0 .12em; border-radius: 3px; background: linear-gradient(transparent 14%, #FFE066 14%, #FFD84D 88%, transparent 88%); color: var(--ink); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.offer-mny { margin-top: 52px;
    background: linear-gradient(160deg, rgba(48, 36, 84, .97) 0%, rgba(28, 21, 56, .97) 55%, rgba(16, 12, 36, .98) 100%) padding-box,
                linear-gradient(135deg, rgba(196, 181, 253, .85), rgba(167, 139, 250, .45) 40%, rgba(255, 255, 255, .06) 70%, rgba(255, 201, 60, .65)) border-box;
    box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .9), 0 0 80px -22px rgba(124, 58, 237, .45); }
.mny-end { position: relative; }
.mny-person { position: absolute; z-index: 1; display: none; bottom: 0; width: clamp(300px, 24vw, 470px); height: auto; pointer-events: none;
    -webkit-mask-image: linear-gradient(#000 72%, transparent 97%);
            mask-image: linear-gradient(#000 72%, transparent 97%); }
.mp-l { left: calc(50% - 50vw - 2.5vw); }
.mp-r { right: calc(50% - 50vw - 2.5vw); z-index: 2; }
@media (min-width: 1300px) { .mny-person { display: block; } }

@media (max-width: 991.98px) {
    .mny { padding: 96px 0 100px; }
    .mny-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 620px; }
}
/* tablet: two columns, photo stacked inside each card, and the flow stays one row */
@media (min-width: 768px) and (max-width: 991.98px) {
    .mny-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 696px; }
    .mny-card { flex-direction: column; }
    .mny-img { width: 100%; aspect-ratio: 16 / 9; min-height: 0; }
    .mny-img::after { inset: 46% 0 0; background: linear-gradient(transparent, rgba(10, 7, 24, .82)); }
    .mny-no { right: 12px; top: 12px; width: 38px; height: 38px; border-radius: 12px; font-size: 17px; }
    .mny-body { padding: 18px 18px 20px; align-self: auto; }
    .mny-body h3 { margin-bottom: 10px; padding: 7px 12px; font-size: 16px; }
    .mny-body p { font-size: 14.5px; line-height: 1.6; }
    .mny-flow { gap: 8px 10px; }
    .mny-flow span { padding: 9px 14px; font-size: 13.5px; }
}
@media (max-width: 767.98px) {
    .mny { padding: 74px 0 84px; }
    .mny-bg::before { top: -40px; height: 110px; border-radius: 50% 50% 0 0 / 60px 60px 0 0; }
    .mny-head { margin-bottom: 36px; }
    .mny-title { font-size: 28px; }
    .mny-lead { font-size: 16.5px; }
    .mny-card { flex-direction: column; border-radius: 18px; }
    .mny-img { width: 100%; aspect-ratio: 3 / 2; min-height: 0; }
    .mny-img::after { inset: 46% 0 0; background: linear-gradient(transparent, rgba(10, 7, 24, .82)); }
    .mny-body { padding: 20px 20px 22px; align-self: auto; }
    .mny-no { left: 14px; top: 13px; width: 38px; height: 38px; border-radius: 12px; font-size: 17px; }
    .mny-body { padding: 20px 20px 22px; }
    .mny-flow { margin-top: 38px; }
    .mny-flow { gap: 8px 8px; }
    .mny-flow span { padding: 8px 12px; font-size: 13px; }
    .mny-close { margin-top: 36px; font-size: 20px; }
}

/* ==========================================================
   SECTION 21 — PROBLEM / SOLUTION
   Paired rows: a rose "without" card and a green "with" card on each line,
   linked by an arrow, so every pain maps to its fix. Light ground because
   Section 20 ends near-black. Transition = notched shoulder (8th shape).
   ========================================================== */
.tbl { position: relative; z-index: 15; isolation: isolate; overflow-x: clip; padding: 26px 0 156px; color: var(--ink); background: #F4F6FC; }
.tbl-bg { --bv: 96px; position: absolute; top: calc(-1 * var(--bv)); left: 0; right: 0; bottom: 0; z-index: -1; overflow: hidden; pointer-events: none;
    background:
        radial-gradient(ellipse 44% 26% at 50% 2%, rgba(255, 255, 255, .95), transparent 72%),
        radial-gradient(ellipse 34% 24% at 3% 26%, rgba(225, 29, 72, .09), transparent 70%),
        radial-gradient(ellipse 34% 24% at 97% 62%, rgba(22, 163, 74, .10), transparent 70%),
        linear-gradient(180deg, #F7F9FE 0%, #EEF2FA 50%, #F4F6FC 100%);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'%3E%3Cpath d='M0 96 L0 30 L300 30 L360 8 L1080 8 L1140 30 L1440 30 L1440 96 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 96' preserveAspectRatio='none'%3E%3Cpath d='M0 96 L0 30 L300 30 L360 8 L1080 8 L1140 30 L1440 30 L1440 96 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
    -webkit-mask-size: 100% var(--bv), 100% calc(100% - var(--bv) + 1px);
            mask-size: 100% var(--bv), 100% calc(100% - var(--bv) + 1px);
    -webkit-mask-position: 0 0, 0 100%;
            mask-position: 0 0, 0 100%;
    -webkit-mask-repeat: no-repeat, no-repeat;
            mask-repeat: no-repeat, no-repeat; }

.tbl-head { max-width: 940px; margin: 0 auto 52px; text-align: center; }
.tbl-title { margin: 0; color: var(--ink); font-family: var(--display); font-size: clamp(30px, 4vw, 54px); font-weight: 800; line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; }
.tbl-hl { background: linear-gradient(100deg, #E11D48, #F59E0B 65%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tbl-sub { margin: 20px 0 0; color: #45536F; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.6; text-wrap: balance; }
.tbl-sub b { color: var(--ink); font-weight: 800; }

/* paired grid: bad | arrow | good — both cards stretch to the taller of the pair */
.tbl-grid { display: grid; grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr); align-items: stretch; gap: 18px 0; max-width: 1160px; margin: 0 auto; }
.tbl-hd { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 22px; border-radius: 16px; color: #fff; font-family: var(--display); font-size: clamp(15px, 1.5vw, 19px); font-weight: 800; letter-spacing: -.015em; text-align: center; }
.tbl-hd i { font-size: 20px; font-style: normal; }
.tbl-hd em { font-style: normal; text-decoration: underline; text-underline-offset: 3px; }
.tbl-hd-bad { background: linear-gradient(120deg, #E11D48, #FB7185); box-shadow: 0 20px 36px -20px rgba(225, 29, 72, .9); }
.tbl-hd-good { background: linear-gradient(120deg, #16A34A, #4ADE80); box-shadow: 0 20px 36px -20px rgba(22, 163, 74, .9); }

.tbl-card { display: flex; align-items: flex-start; gap: 13px; padding: 20px 22px; border-radius: 18px; }
.tbl-bad { background: #FFF1F3; box-shadow: inset 0 0 0 1.5px #FBD5DC, 0 18px 34px -26px rgba(225, 29, 72, .55); }
.tbl-good { background: #EDFBF1; box-shadow: inset 0 0 0 1.5px #C7EED6, 0 18px 34px -26px rgba(22, 163, 74, .55); }
.tbl-ic { display: grid; place-items: center; width: 26px; height: 26px; flex: none; margin-top: 2px; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 900; }
.tbl-bad .tbl-ic { background: #E11D48; box-shadow: 0 8px 14px -8px rgba(225, 29, 72, .9); }
.tbl-good .tbl-ic { background: #16A34A; box-shadow: 0 8px 14px -8px rgba(22, 163, 74, .9); }
.tbl-card h4 { margin: 0 0 7px; color: var(--ink); font-family: var(--display); font-size: clamp(16px, 1.45vw, 18.5px); font-weight: 800; line-height: 1.26; letter-spacing: -.015em; }
.tbl-card p { margin: 0; color: #4A5772; font-size: 14.8px; line-height: 1.62; }
.tbl-card b { color: var(--ink); font-weight: 800; }
.tbl-arrow { display: grid; place-items: center; color: #9AA7C4; font-size: 17px; }

/* background elements — rose "cost" chips on the problem side, green "gain" chips on the solution side */
.tbl-deco { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.td-orb { position: absolute; border-radius: 50%; }
.td-orb.o-bad { left: -140px; top: 12%; width: 360px; height: 360px; background: radial-gradient(closest-side, rgba(225, 29, 72, .13), transparent 70%); }
.td-orb.o-good { right: -150px; bottom: 14%; width: 390px; height: 390px; background: radial-gradient(closest-side, rgba(22, 163, 74, .14), transparent 70%); }
.td-ring { position: absolute; border-radius: 50%; border: 1.5px dashed rgba(10, 22, 51, .12); }
.td-ring.r-a { left: 46px; bottom: 22%; width: 190px; height: 190px; }
.td-ring.r-b { right: 60px; top: 14%; width: 240px; height: 240px; }
/* evidence cards, NOT restatements of the pointers: a metric, a delta and a trend bar */
.td-stat { position: absolute; width: 172px; padding: 13px 15px 14px; border-radius: 16px; background: #fff;
    box-shadow: 0 22px 38px -22px rgba(10, 22, 51, .5), inset 0 0 0 1.5px rgba(10, 22, 51, .07); animation: floaty 8s ease-in-out infinite; }
.td-stat small { display: block; color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.td-stat em { display: block; margin-top: 2px; font-family: var(--display); font-size: 25px; font-style: normal; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.td-stat u { display: block; margin-top: 1px; color: var(--muted); font-size: 11px; font-weight: 700; text-decoration: none; }
.td-stat i { display: flex; align-items: flex-end; gap: 4px; height: 26px; margin-top: 10px; }
.td-stat i b { flex: 1; height: var(--h); border-radius: 3px 3px 1px 1px; }
.td-down { box-shadow: 0 22px 38px -22px rgba(225, 29, 72, .5), inset 0 0 0 1.5px #FBD5DC; }
.td-down em { color: #E11D48; }
.td-down i b { background: linear-gradient(180deg, #FDA4AF, #E11D48); }
.td-up { box-shadow: 0 22px 38px -22px rgba(22, 163, 74, .5), inset 0 0 0 1.5px #C7EED6; }
.td-up em { color: #16A34A; }
.td-up i b { background: linear-gradient(180deg, #86EFAC, #16A34A); }
.tbl-deco .d1 { left: 32px; top: 16%; rotate: -4deg; }
.tbl-deco .d2 { left: 46px; top: 43%; rotate: 3deg; animation-delay: -3s; }
.tbl-deco .u1 { right: 34px; top: 23%; rotate: 4deg; animation-delay: -1.5s; }
.tbl-deco .u2 { right: 48px; top: 40%; rotate: -3deg; animation-delay: -4s; }
@media (max-width: 1499.98px) { .td-stat { display: none; } }

/* losing / winning cutouts on the outer edges */
.tbl-person { position: absolute; z-index: 1; display: none; bottom: 0; width: clamp(180px, 15vw, 285px); height: auto; pointer-events: none;
    -webkit-mask-image: linear-gradient(#000 74%, transparent 98%);
            mask-image: linear-gradient(#000 74%, transparent 98%); }
.tbl-lose { left: calc(50% - 50vw - 2vw); }
.tbl-win { right: calc(50% - 50vw - 2vw); z-index: 2; }
@media (min-width: 1300px) { .tbl-person { display: block; } }

.tbl-close { max-width: 980px; margin: 54px auto 0; color: var(--ink); font-family: var(--display); font-size: clamp(20px, 2.3vw, 30px); font-weight: 800; line-height: 1.38; letter-spacing: -.025em; text-align: center; text-wrap: balance; }
.tbl-rent { color: #E11D48; font-weight: 800; }
.tbl-close mark { padding: 0 .12em; border-radius: 3px; background: linear-gradient(transparent 14%, #FFE066 14%, #FFD84D 88%, transparent 88%); color: var(--ink); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

@media (max-width: 991.98px) {
    .tbl { padding: 22px 0 122px; }
    .tbl-bg { --bv: 62px; }
    .tbl-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 620px; }
    .tbl-arrow { display: none; }
    .tbl-hd { margin-top: 16px; }
    .tbl-hd:first-of-type { margin-top: 0; }
}
/* tablet: the pairing is the argument — keep problem and solution on the same row */
@media (min-width: 768px) and (max-width: 991.98px) {
    .tbl-grid { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); gap: 12px 0; max-width: 696px; }
    .tbl-arrow { display: grid; font-size: 14px; }
    .tbl-hd { margin-top: 0; padding: 12px 14px; font-size: 14px; gap: 7px; }
    .tbl-hd i { font-size: 16px; }
    .tbl-card { gap: 10px; padding: 15px 16px; border-radius: 15px; }
    .tbl-ic { width: 22px; height: 22px; font-size: 11px; }
    .tbl-card h4 { margin-bottom: 5px; font-size: 15px; }
    .tbl-card p { font-size: 13.4px; line-height: 1.55; }
}
@media (max-width: 767.98px) {
    .tbl { padding: 18px 0 96px; }
    .tbl-bg { --bv: 44px; }
    .tbl-head { margin-bottom: 34px; }
    .tbl-title { font-size: 28px; }
    .tbl-sub { font-size: 16.5px; }
    .tbl-card { padding: 16px 17px; border-radius: 15px; }
    /* the stack loses the side-by-side pairing, so mark it with a connector */
    .tbl-arrow { display: grid; height: 26px; color: #A7B3CD; font-size: 15px; }
    .tbl-arrow i { rotate: 90deg; }
    .tbl-close { margin-top: 38px; font-size: 19px; }
}

/* ==========================================================
   SECTION 22 — PEOPLE ARE PAYING THOUSANDS
   Alternating paragraph+image intro, reserved auto-slider for Fiverr gig
   screenshots, icon pointer list, centred closing text, CTA with cutouts.
   ========================================================== */
.val2 { position: relative; z-index: 16; isolation: isolate; overflow-x: clip; padding: 38px 0 128px; color: var(--ink); background: #EDF2FC; }
.val2-bg { --bv: 136px; position: absolute; top: calc(-1 * var(--bv)); left: 0; right: 0; bottom: 0; z-index: -1; overflow: hidden; pointer-events: none;
    background:
        linear-gradient(180deg, rgba(179, 203, 255, .6) 0%, rgba(200, 195, 250, .38) 38%, transparent 78%) 0 0 / 100% 260px no-repeat,
        linear-gradient(180deg, rgba(10, 22, 51, .08) 0%, transparent 100%) 0 0 / 100% 150px no-repeat,
        radial-gradient(ellipse 560px 240px at 8% 0, rgba(11, 92, 255, .22), transparent 72%) 0 0 / 100% 260px no-repeat,
        radial-gradient(ellipse 560px 240px at 92% 20px, rgba(124, 58, 237, .2), transparent 72%) 0 0 / 100% 260px no-repeat,
        radial-gradient(ellipse 46% 30% at 50% 4%, rgba(255, 255, 255, .9), transparent 74%),
        radial-gradient(ellipse 36% 26% at 3% 20%, rgba(11, 92, 255, .11), transparent 70%),
        radial-gradient(ellipse 36% 26% at 98% 62%, rgba(124, 58, 237, .11), transparent 70%),
        linear-gradient(180deg, #F1F5FD 0%, #E7EEFB 46%, #EDF2FC 100%);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 136' preserveAspectRatio='none'%3E%3Cpath d='M0 136 L0 66 L420 66 L540 12 L1440 12 L1440 136 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 136' preserveAspectRatio='none'%3E%3Cpath d='M0 136 L0 66 L420 66 L540 12 L1440 12 L1440 136 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
    -webkit-mask-size: 100% var(--bv), 100% calc(100% - var(--bv) + 1px);
            mask-size: 100% var(--bv), 100% calc(100% - var(--bv) + 1px);
    -webkit-mask-position: 0 0, 0 100%;
            mask-position: 0 0, 0 100%;
    -webkit-mask-repeat: no-repeat, no-repeat;
            mask-repeat: no-repeat, no-repeat; }
.val2-bg::after { content: ""; position: absolute; inset: var(--bv) 0 0 0;
    background: radial-gradient(rgba(10, 22, 51, .05) 1.2px, transparent 1.7px) 0 0 / 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 60% 46% at 50% 4%, #000 0%, transparent 72%);
            mask-image: radial-gradient(ellipse 60% 46% at 50% 4%, #000 0%, transparent 72%); }

/* floating evidence cards + orbs, spread through the intro/slider zone */
.val2-deco { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.v2-orb { position: absolute; border-radius: 50%; }
.v2-orb.o-a { left: -130px; top: 8%; width: 340px; height: 340px; background: radial-gradient(closest-side, rgba(11, 92, 255, .12), transparent 70%); }
.v2-orb.o-b { right: -150px; bottom: 10%; width: 380px; height: 380px; background: radial-gradient(closest-side, rgba(124, 58, 237, .12), transparent 70%); }
.v2-ring { position: absolute; border-radius: 50%; border: 1.5px dashed rgba(10, 22, 51, .12); }
.v2-ring.r-a { left: 64px; top: 46%; width: 170px; height: 170px; }
.v2-stat { --a: #E11D48; --a2: #FB7185; position: absolute; overflow: hidden; width: 182px; padding: 15px 16px 16px 20px; border-radius: 19px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--a) 9%, #fff), #fff 72%);
    box-shadow: 0 24px 40px -22px color-mix(in srgb, var(--a) 60%, #0A1633), inset 0 0 0 1.5px color-mix(in srgb, var(--a) 24%, transparent);
    animation: floaty 8s ease-in-out infinite; }
.v2-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--a), var(--a2)); }
.v2-stat small { display: block; color: color-mix(in srgb, var(--a) 72%, #45536F); font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.v2-stat em { display: block; margin-top: 3px; font-family: var(--display); font-size: 27px; font-style: normal; font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
    background: linear-gradient(100deg, var(--a), color-mix(in srgb, var(--a2) 80%, var(--a))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.v2-stat u { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 700; text-decoration: none; line-height: 1.35; }
.v2-cost { left: 24px; top: 6%; rotate: -3deg; }
.v2-time { --a: #D97706; --a2: #FCD34D; left: 40px; top: 62%; rotate: 3deg; animation-delay: -3s; }
.v2-ai { --a: #0D9488; --a2: #4ADE80; right: 26px; top: 30%; rotate: 3deg; animation-delay: -5s; }
@media (max-width: 1560px) { .v2-stat, .v2-ring { display: none; } }

/* header */
.val2-head { max-width: 980px; margin: 0 auto 60px; text-align: center; }
.val2-title { margin: 0; color: var(--ink); font-family: var(--display); font-size: clamp(30px, 3.8vw, 50px); font-weight: 800; line-height: 1.14; letter-spacing: -.03em; text-wrap: balance; }
.val2-hl { background: linear-gradient(100deg, #0B5CFF, #7C3AED); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* alternating paragraph + image rows */
.val2-alt { display: flex; flex-direction: column; gap: 46px; max-width: 1160px; margin: 0 auto 70px; }
.val2-row { --a: #E11D48; --a2: #FB7185; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 52px; }
.val2-row.val2-flip { --a: #0B5CFF; --a2: #12C9A6; }
.val2-txt { position: relative; padding: 28px 30px 28px 36px; border-radius: 22px;
    background: linear-gradient(150deg, color-mix(in srgb, var(--a) 10%, #fff), color-mix(in srgb, var(--a) 3%, #fff));
    box-shadow: 0 26px 48px -34px color-mix(in srgb, var(--a) 65%, #0A1633), inset 0 0 0 1.5px color-mix(in srgb, var(--a) 20%, transparent); }
.val2-txt::before { content: ""; position: absolute; left: 0; top: 28px; bottom: 28px; width: 5px; border-radius: 0 5px 5px 0; background: linear-gradient(180deg, var(--a), var(--a2)); }
.val2-flip .val2-txt { padding: 28px 36px 28px 30px; }
.val2-flip .val2-txt::before { left: auto; right: 0; border-radius: 5px 0 0 5px; }
.val2-row.val2-flip { direction: rtl; }
.val2-row.val2-flip > * { direction: ltr; }
.val2-txt p { margin: 0; color: #38455E; font-size: clamp(18px, 1.75vw, 22px); line-height: 1.68; text-wrap: balance; }
.val2-txt b { color: var(--ink); font-weight: 800; }
.val2-img { position: relative; display: grid; place-items: center; min-height: 320px; overflow: hidden; border-radius: 26px;
    background: linear-gradient(140deg, color-mix(in srgb, var(--a) 16%, #fff), color-mix(in srgb, var(--a2) 14%, #fff));
    box-shadow: 0 34px 64px -36px color-mix(in srgb, var(--a) 60%, #0A1633), inset 0 0 0 1.5px color-mix(in srgb, var(--a) 18%, transparent); }
.val2-img::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(145deg, color-mix(in srgb, var(--a) 30%, transparent), transparent 58%); }
.val2-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.val2-ph { position: relative; z-index: 0; color: rgba(11, 92, 255, .28); font-size: 72px; }
.val2-img img ~ .val2-ph, .val2-img:has(img) .val2-ph { display: none; }

/* "look what people charge" sub-block */
.val2-sub { max-width: 900px; margin: 0 auto 34px; text-align: center; }
.val2-subtitle { margin: 0; color: var(--ink); font-family: var(--display); font-size: clamp(24px, 2.9vw, 38px); font-weight: 800; line-height: 1.22; letter-spacing: -.025em; text-wrap: balance; }
.val2-hl2 { background: linear-gradient(100deg, #E11D48, #F59E0B); -webkit-background-clip: text; background-clip: text; color: transparent; }
.val2-sub p { max-width: 760px; margin: 18px auto 0; color: #45536F; font-size: 17px; line-height: 1.6; }
.val2-sub p b { color: var(--ink); font-weight: 800; }

/* reserved 2-row auto-slider (Fiverr gig screenshots, TBD) */
.val2-slider { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.val2-mask { display: flex; flex-direction: column; gap: 24px; padding: 24px 0 46px; }
.val2-track { align-items: flex-start; }
.val2-track { display: flex; gap: 20px; width: max-content; animation: val2Scroll 34s linear infinite; }
.val2-track-b { animation-direction: reverse; animation-duration: 40s; }
.val2-slide { position: relative; display: block; width: 286px; height: 338px; flex: none; overflow: hidden; padding: 8px 8px 0; border-radius: 20px;
    background: #fff; box-shadow: 0 16px 30px -20px rgba(10, 22, 51, .5), inset 0 0 0 1.5px #E4E9F5; }
/* sources run 601-683px tall; the card is sized to the TALLEST and contains the rest,
   so no gig is ever cropped and none is upscaled */
.val2-slide img { display: block; width: 100%; height: calc(100% - 8px); object-fit: contain; object-position: top center; border-radius: 14px; }
/* the price of every gig, called out on the card */
.val2-price { position: absolute; right: 16px; top: 16px; display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 13px 8px; border-radius: 999px;
    background: linear-gradient(120deg, #FFD84D, #F59E0B); color: #5A3A00; font-size: 10.5px; font-style: normal; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    box-shadow: 0 12px 22px -10px rgba(180, 110, 10, .85), inset 0 1px 0 rgba(255, 255, 255, .55); }
.val2-price b { color: #2A1A00; font-family: var(--display); font-size: 18px; letter-spacing: -.02em; }
@keyframes val2Scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.val2-slider-note { max-width: 640px; margin: 16px auto 0; color: var(--muted); font-size: 13.5px; font-weight: 600; text-align: center; }

/* the twist */
.val2-twist { max-width: 900px; margin: 18px auto 0; color: var(--ink); font-size: clamp(18px, 1.85vw, 22px); line-height: 1.6; text-align: center; text-wrap: balance; }
.val2-twist b { font-weight: 800; }
.val2-twist mark { padding: 0 .12em; border-radius: 3px; background: linear-gradient(transparent 14%, #FFE066 14%, #FFD84D 88%, transparent 88%); color: var(--ink); font-weight: 700; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* icon pointer list */
.val2-pts-head { max-width: 760px; margin: 68px auto 0; text-align: center; }
.val2-kick { display: inline-block; padding: 8px 20px; border-radius: 999px; background: #fff; color: var(--blue); font-size: 13.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; box-shadow: 0 14px 26px -16px rgba(10, 22, 51, .3), inset 0 0 0 1px rgba(11, 92, 255, .18); }
.val2-pts-head h3 { margin: 16px 0 0; color: var(--ink); font-family: var(--display); font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.025em; }
.val2-pts { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; max-width: 1120px; margin: 40px auto 0; }
.val2-pt { --a: #0B5CFF; --a2: #19D3FF; display: flex; align-items: center; gap: 18px; width: calc((100% - 40px) / 3); padding: 24px 26px; border-radius: 22px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--a) 9%, #fff), #fff 70%);
    box-shadow: 0 24px 44px -28px color-mix(in srgb, var(--a) 60%, #0A1633), inset 0 0 0 1.5px color-mix(in srgb, var(--a) 20%, transparent); }
.val2-pt:nth-child(2) { --a: #7C3AED; --a2: #C084FC; }
.val2-pt:nth-child(3) { --a: #0D9488; --a2: #2DD4BF; }
.val2-pt:nth-child(4) { --a: #EA580C; --a2: #FBBF24; }
.val2-pt:nth-child(5) { --a: #16A34A; --a2: #4ADE80; }
.val2-ic { display: grid; place-items: center; width: 60px; height: 60px; flex: none; border-radius: 19px; background: linear-gradient(145deg, var(--a), var(--a2)); color: #fff; font-size: 23px;
    box-shadow: 0 16px 26px -12px color-mix(in srgb, var(--a) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, .4); }
.val2-pt p { margin: 0; color: #38455E; font-size: 16.5px; line-height: 1.55; }
.val2-pt b { color: var(--ink); font-weight: 800; }

/* centred closing text, same idiom as .mny-close */
.val2-close { max-width: 900px; margin: 64px auto 0; text-align: center; }
.val2-close p { margin: 0; color: var(--ink); font-family: var(--display); font-size: clamp(20px, 2.2vw, 27px); font-weight: 800; line-height: 1.36; letter-spacing: -.02em; text-wrap: balance; }
.val2-em { margin-top: 18px !important; color: #45536F !important; font-family: inherit !important; font-size: clamp(16.5px, 1.6vw, 19px) !important; font-weight: 500 !important; font-style: italic; letter-spacing: normal !important; }

/* CTA with edge cutouts — same idiom as .gr-person / .ie-person / .mny-person */
.val2-end { position: relative; margin-top: 54px; }
.val2-person { position: absolute; z-index: 1; display: none; bottom: 0; width: clamp(280px, 22vw, 430px); height: auto; pointer-events: none;
    -webkit-mask-image: linear-gradient(#000 72%, transparent 97%);
            mask-image: linear-gradient(#000 72%, transparent 97%); }
.vp2-l { left: calc(50% - 50vw - 2.5vw); }
.vp2-r { right: calc(50% - 50vw - 2.5vw); z-index: 2; }
@media (min-width: 1300px) { .val2-person { display: block; } }
.offer-val2 { margin-top: 0; }

@media (max-width: 1199.98px) {
    .val2-pt { width: calc((100% - 20px) / 2); }
}
@media (max-width: 991.98px) {
    .val2 { padding: 34px 0 100px; }
    .val2-bg { --bv: 88px; }
    .val2-row, .val2-row.val2-flip { grid-template-columns: minmax(0, 1fr); direction: ltr; gap: 24px; }
    .val2-img { order: -1; min-height: 240px; }
    /* one row of gigs is enough proof below desktop */
    .val2-track-b { display: none; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .val2-row, .val2-row.val2-flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 24px; }
    .val2-row.val2-flip { direction: rtl; }
    .val2-img { order: 0; min-height: 210px; }
    .val2-txt { padding: 22px 24px 22px 28px; }
    .val2-flip .val2-txt { padding: 22px 28px 22px 24px; }
    .val2-txt p { font-size: 16px; line-height: 1.6; }
    .val2-pt { padding: 20px 20px; gap: 14px; }
    .val2-ic { width: 52px; height: 52px; border-radius: 16px; font-size: 20px; }
    .val2-pt p { font-size: 15px; }
}
@media (max-width: 767.98px) {
    .val2 { padding: 26px 0 78px; }
    .val2-bg { --bv: 58px; }
    .val2-head { margin-bottom: 40px; }
    .val2-title { font-size: 26px; }
    .val2-alt { gap: 34px; margin-bottom: 48px; }
    .val2-sub { margin-bottom: 24px; }
    .val2-subtitle { font-size: 22px; }
    /* portrait gig shots need their own height — a fixed 108px was cropping them */
    .val2-slide { width: 210px; height: 245px; }
    .val2-price { right: 11px; top: 11px; bottom: auto; padding: 5px 10px 6px; font-size: 9.5px; gap: 5px; }
    .val2-price b { font-size: 15px; }
    .val2-txt { padding: 20px 20px 20px 24px; border-radius: 18px; }
    .val2-flip .val2-txt { padding: 20px 24px 20px 20px; }
    .val2-txt::before { top: 20px; bottom: 20px; width: 4px; }
    .val2-pt { padding: 18px 18px; }
    .val2-ic { width: 52px; height: 52px; border-radius: 16px; font-size: 20px; }
    .val2-pt p { font-size: 15.5px; }
    .val2-twist { margin-top: 14px; font-size: 17px; }
    .val2-pts-head { margin-top: 48px; }
    .val2-pts { gap: 14px; margin-top: 28px; }
    .val2-pt { width: 100%; padding: 16px 18px; }
    .val2-close { margin-top: 44px; }
    .val2-end { margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    .val2-track { animation: none; }
}

/* ==========================================================
   SECTION 23 — IMAGINE OPENING YOUR DASHBOARD
   Two-phase growth timeline (Right Away / Over Time), bold asset
   statement, reserved placeholder for the real dashboard preview.
   Transition = single soft organic dome, distinct from every prior shape.
   ========================================================== */
.dash { position: relative; z-index: 17; isolation: isolate; overflow-x: clip; padding: 24px 0 130px; color: #fff; background: #0E1938; }
.dash-bg { --bv: 118px; position: absolute; top: calc(-1 * var(--bv)); left: 0; right: 0; bottom: 0; z-index: -1; overflow: hidden; pointer-events: none;
    background:
        radial-gradient(ellipse 56% 22% at 50% 0%, rgba(25, 211, 255, .3), transparent 72%),
        radial-gradient(ellipse 34% 16% at 50% 0%, rgba(127, 227, 255, .22), transparent 70%),
        radial-gradient(ellipse 44% 30% at -2% 22%, rgba(11, 92, 255, .32), transparent 68%),
        radial-gradient(ellipse 40% 28% at 102% 48%, rgba(124, 58, 237, .26), transparent 68%),
        radial-gradient(ellipse 52% 34% at 88% 98%, rgba(245, 158, 11, .3), transparent 70%),
        radial-gradient(ellipse 40% 26% at 4% 94%, rgba(18, 201, 166, .18), transparent 70%),
        linear-gradient(180deg, #16244E 0%, #101B3F 44%, #0C1531 100%);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 118' preserveAspectRatio='none'%3E%3Cpath d='M0 118 L0 58 C 360 6 1080 6 1440 58 L1440 118 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 118' preserveAspectRatio='none'%3E%3Cpath d='M0 118 L0 58 C 360 6 1080 6 1440 58 L1440 118 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
    -webkit-mask-size: 100% var(--bv), 100% calc(100% - var(--bv) + 1px);
            mask-size: 100% var(--bv), 100% calc(100% - var(--bv) + 1px);
    -webkit-mask-position: 0 0, 0 100%;
            mask-position: 0 0, 0 100%;
    -webkit-mask-repeat: no-repeat, no-repeat;
            mask-repeat: no-repeat, no-repeat; }
.dash-bg::after { content: ""; position: absolute; inset: var(--bv) 0 0 0;
    background: radial-gradient(rgba(255, 255, 255, .08) 1.2px, transparent 1.7px) 0 0 / 24px 24px;
    -webkit-mask-image: radial-gradient(ellipse 70% 56% at 50% 46%, transparent 30%, #000 100%);
            mask-image: radial-gradient(ellipse 70% 56% at 50% 46%, transparent 30%, #000 100%); }

/* floating orbs + rings spread behind the timeline */
.dash-deco { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.dd-orb { position: absolute; border-radius: 50%; }
.dd-orb.o-a { left: -150px; top: 20%; width: 360px; height: 360px; background: radial-gradient(closest-side, rgba(25, 211, 255, .26), transparent 70%); }
.dd-orb.o-b { right: -160px; bottom: 12%; width: 400px; height: 400px; background: radial-gradient(closest-side, rgba(245, 158, 11, .3), transparent 70%); }
.dd-ring { position: absolute; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .16); }
.dd-ring.r-a { left: 58px; top: 62%; width: 150px; height: 150px; }
.dd-ring.r-b { right: 74px; top: 16%; width: 120px; height: 120px; }
/* floating dashboard widgets — live numbers, not restatements of the cards */
.dd-card { position: absolute; width: 164px; padding: 13px 15px 14px; border-radius: 16px; background: #fff;
    box-shadow: 0 24px 40px -22px rgba(10, 22, 51, .5), inset 0 0 0 1.5px rgba(10, 22, 51, .07); animation: floaty 9s ease-in-out infinite; }
.dd-card small { display: block; color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.dd-card em { display: block; margin-top: 3px; color: var(--ink); font-family: var(--display); font-size: 26px; font-style: normal; font-weight: 800; letter-spacing: -.025em; line-height: 1.05; }
.dd-card u { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 700; text-decoration: none; line-height: 1.35; }
.dd-card i { display: flex; align-items: flex-end; gap: 4px; height: 26px; margin-top: 11px; font-style: normal; }
.dd-card i b { flex: 1; height: var(--h); border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, #7DB0FF, #0B5CFF); }
.dd-dot { position: absolute; top: 15px; right: 15px; width: 8px; height: 8px; border-radius: 50%; background: #16A34A; box-shadow: 0 0 0 4px rgba(22, 163, 74, .16); }
.dd-dot-b { background: var(--blue); box-shadow: 0 0 0 4px rgba(11, 92, 255, .16); }
.dd-tick { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #16A34A; color: #fff; font-size: 10px; box-shadow: 0 8px 14px -8px rgba(22, 163, 74, .9); }
/* anchored to the CONTENT edge, never the viewport, so they can never sit under a card */
.dd-card.dd-c1 { left: max(16px, calc(50% - 530px - 184px)); top: 20%; rotate: -3deg; }
.dd-card.dd-c2 { right: max(16px, calc(50% - 530px - 184px)); top: 15%; rotate: 3deg; animation-delay: -3s; }
.dd-card.dd-c3 { right: max(16px, calc(50% - 530px - 184px)); top: 56%; rotate: -2deg; animation-delay: -5.5s; }
.dd-c2 em { color: #16A34A; }
@media (max-width: 1399.98px) { .dd-card, .dd-ring { display: none; } }

.dash-head { max-width: 900px; margin: 0 auto 54px; text-align: center; }
.dash-title { margin: 0; color: #fff; font-family: var(--display); font-size: clamp(28px, 3.6vw, 46px); font-weight: 800; line-height: 1.16; letter-spacing: -.03em; text-wrap: balance; }
.dash-hl { background: linear-gradient(100deg, #7FE3FF, #C084FC 65%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* phase kicker + reference-style icon card grid */
.dash-phase { max-width: 1060px; margin: 0 auto; text-align: center; }
.dash-phase2 { margin-top: 54px; }
.dash-kick { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 32px; padding: 9px 24px; border-radius: 999px; background: linear-gradient(100deg, #0B5CFF, #19D3FF); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 16px 28px -16px rgba(11, 92, 255, .95), inset 0 1px 0 rgba(255, 255, 255, .35); }
.dash-kick2 { background: linear-gradient(100deg, #D97706, #FBBF24); color: #3A2400; box-shadow: 0 16px 28px -16px rgba(217, 119, 6, .95), inset 0 1px 0 rgba(255, 255, 255, .45); }
.dash-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; }
.dash-card { position: relative; display: flex; flex-direction: column; align-items: center; width: calc((100% - 78px) / 4); padding: 30px 24px 30px; border-radius: 22px; text-align: center;
    background: linear-gradient(165deg, color-mix(in srgb, var(--a) 9%, #fff), #fff 68%);
    box-shadow: 0 30px 54px -28px rgba(0, 0, 0, .8), 0 0 40px -18px color-mix(in srgb, var(--a) 70%, transparent), inset 0 0 0 1.5px color-mix(in srgb, var(--a) 26%, transparent); }
.dash-card::before { content: ""; position: absolute; left: 50%; top: 0; width: 54px; height: 4px; border-radius: 0 0 4px 4px; translate: -50% 0; background: linear-gradient(90deg, var(--a), var(--a2)); }
.dash-vis { position: relative; display: grid; place-items: center; width: 100%; height: 150px; margin-bottom: 18px; }
.dash-vis::before { content: ""; position: absolute; width: 132px; height: 132px; border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--a) 20%, transparent), transparent 72%); }
.dash-vis img { position: relative; max-width: 100%; max-height: 150px; width: auto; height: auto; }
.dash-ph { position: relative; background: linear-gradient(145deg, var(--a), var(--a2)); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 62px; }
.dash-vis:has(img) .dash-ph { display: none; }
.dash-card h3 { margin: 0 0 10px; --x: 0; color: var(--ink); font-family: var(--display); font-size: clamp(18px, 1.7vw, 21px); font-weight: 800; line-height: 1.24; letter-spacing: -.02em; text-wrap: balance; }
.dash-card p { margin: 0; color: #4A5772; font-size: 15px; line-height: 1.58; }
.dash-card p b { color: var(--ink); font-weight: 800; }

/* bold closing asset statement */
.dash-close { max-width: 780px; margin: 56px auto 0; text-align: center; }
.dash-asset { margin: 0; color: #fff; font-family: var(--display); font-size: clamp(24px, 3vw, 38px); font-weight: 800; line-height: 1.24; letter-spacing: -.025em; text-wrap: balance; }
.dash-hl2 { background: linear-gradient(100deg, #FCD34D, #F59E0B); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dash-sub { max-width: 640px; margin: 16px auto 0; color: #B9C7E6; font-size: clamp(15.5px, 1.5vw, 18px); font-style: italic; line-height: 1.6; }

/* growth snapshot: three headline figures, then what they compound into */
.dash-growth { max-width: 1080px; margin: 52px auto 0; padding: 44px 48px 48px; border-radius: 30px;
    background: linear-gradient(170deg, #fff, #FDFBF6);
    box-shadow: 0 50px 96px -44px rgba(0, 0, 0, .85), 0 0 70px -26px rgba(245, 158, 11, .5), inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
.dg-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dg-stat { padding: 4px 24px; text-align: center; }
.dg-stat + .dg-stat { box-shadow: inset 1px 0 0 rgba(10, 22, 51, .12); }
.dg-stat em { display: block; font-family: var(--display); font-size: clamp(40px, 5vw, 66px); font-style: normal; font-weight: 800; line-height: 1; letter-spacing: -.045em;
    background: linear-gradient(100deg, #D97706, #F59E0B 55%, #EA580C); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dg-stat small { display: block; margin-top: 12px; color: #45536F; font-size: clamp(14px, 1.35vw, 16.5px); font-weight: 600; }

.dg-panel { margin-top: 42px; padding: 34px 34px 38px; border-radius: 26px; text-align: center;
    background: linear-gradient(150deg, #FFF6E6, #FFFAF2 55%, #FFF3E0);
    box-shadow: 0 30px 56px -36px rgba(180, 110, 10, .55), inset 0 0 0 1.5px rgba(217, 119, 6, .2); }
.dg-panel h3 { margin: 0 0 26px; color: var(--ink); font-family: var(--display); font-size: clamp(22px, 2.5vw, 32px); font-weight: 800; letter-spacing: -.028em; }
.dg-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.dg-step { position: relative; padding: 0 12px; }
.dg-step + .dg-step::before { content: ""; position: absolute; left: -9px; top: 6px; bottom: 6px; width: 1px; background: rgba(180, 110, 10, .24); }
.dg-step b { display: block; color: #D14608; font-family: var(--display); font-size: clamp(19px, 2vw, 25px); font-weight: 800; letter-spacing: -.025em; }
.dg-step span { display: block; margin-top: 7px; color: #5B4A33; font-size: clamp(13px, 1.25vw, 15px); font-weight: 600; }

@media (max-width: 1199.98px) {
    .dash-card { width: calc((100% - 26px) / 2); }
}
@media (max-width: 991.98px) {
    .dash { padding: 28px 0 96px; }
    .dash-bg { --bv: 78px; }
    .dash-phase2 { margin-top: 42px; }
    .dash-growth { margin-top: 44px; }
    .dash-growth { padding: 32px 30px 34px; }
    .dg-panel { padding: 28px 24px 30px; }
    .dg-steps { gap: 14px; }
}
@media (max-width: 767.98px) {
    .dash { padding: 24px 0 74px; }
    .dash-bg { --bv: 54px; }
    .dash-head { margin-bottom: 38px; }
    .dash-title { font-size: 25px; }
    .dash-kick { margin-bottom: 20px; }
    .dash-grid { gap: 16px; }
    .dash-card { width: 100%; padding: 22px 20px 24px; border-radius: 18px; }
    .dash-vis { height: 116px; margin-bottom: 14px; }
    .dash-vis img { max-height: 116px; }
    .dash-vis::before { width: 104px; height: 104px; }
    .dash-ph { font-size: 50px; }
    .dash-close { margin-top: 42px; }
    .dash-growth { margin-top: 36px; padding: 26px 18px 28px; border-radius: 22px; }
    /* three figures stack, and the timeline goes 2x2 rather than four cramped columns */
    .dg-stats { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .dg-stat { padding: 0; }
    .dg-stat + .dg-stat { padding-top: 20px; box-shadow: inset 0 1px 0 rgba(10, 22, 51, .12); }
    .dg-stat small { margin-top: 6px; }
    .dg-panel { margin-top: 30px; padding: 24px 18px 26px; border-radius: 20px; }
    .dg-panel h3 { margin-bottom: 20px; }
    .dg-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
    .dg-step:nth-child(odd)::before { display: none; }
}

/* ==========================================================
   SECTION 24 — SO MANY WAYS TO GROW YOUR LOCAL AUDIENCE
   Same card contract as Section 19 (top accent bar, art slot on an accent
   blob, tinted title pill, body copy) on a fresh MINT ground, so it reads as
   a new section rather than a repeat of Section 23's near-white.
   Transition = a centred rounded tab, distinct from every prior shape.
   ========================================================== */
.uc { position: relative; z-index: 18; isolation: isolate; overflow-x: clip; padding: 40px 0 126px; color: var(--ink); background: #EDF5F0; }
.uc-bg { --uv: 106px; position: absolute; top: calc(-1 * var(--uv)); left: 0; right: 0; bottom: 0; z-index: -1; overflow: hidden; pointer-events: none;
    background:
        linear-gradient(180deg, rgba(22, 163, 74, .34) 0%, rgba(167, 224, 190, .22) 42%, transparent 80%) 0 0 / 100% 250px no-repeat,
        radial-gradient(ellipse 46% 30% at 50% 4%, rgba(255, 255, 255, .92), transparent 74%),
        radial-gradient(ellipse 36% 26% at 5% 20%, rgba(13, 148, 136, .14), transparent 70%),
        radial-gradient(ellipse 36% 26% at 96% 62%, rgba(11, 92, 255, .1), transparent 70%),
        linear-gradient(180deg, #EFF7F1 0%, #E7F1EC 48%, #EDF5F0 100%);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 106' preserveAspectRatio='none'%3E%3Cpath d='M0 106 L0 54 L460 54 C 520 54 540 12 720 12 C 900 12 920 54 980 54 L1440 54 L1440 106 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 106' preserveAspectRatio='none'%3E%3Cpath d='M0 106 L0 54 L460 54 C 520 54 540 12 720 12 C 900 12 920 54 980 54 L1440 54 L1440 106 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
    -webkit-mask-size: 100% var(--uv), 100% calc(100% - var(--uv) + 1px);
            mask-size: 100% var(--uv), 100% calc(100% - var(--uv) + 1px);
    -webkit-mask-position: 0 0, 0 100%;
            mask-position: 0 0, 0 100%;
    -webkit-mask-repeat: no-repeat, no-repeat;
            mask-repeat: no-repeat, no-repeat; }

/* background elements (standing rule) — orbs, rings and floating channel widgets */
.uc-deco { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ud-orb { position: absolute; border-radius: 50%; }
.ud-orb.g1 { left: -150px; top: 16%; width: 370px; height: 370px; background: radial-gradient(closest-side, rgba(22, 163, 74, .12), transparent 70%); }
.ud-orb.g2 { right: -160px; bottom: 14%; width: 400px; height: 400px; background: radial-gradient(closest-side, rgba(11, 92, 255, .1), transparent 70%); }
.ud-ring { position: absolute; border-radius: 50%; border: 1.5px dashed rgba(10, 22, 51, .1); }
.ud-ring.k1 { left: 62px; top: 58%; width: 158px; height: 158px; }
.ud-ring.k2 { right: 70px; top: 13%; width: 126px; height: 126px; }
.ud-card { position: absolute; width: 164px; padding: 13px 15px 14px; border-radius: 16px; background: #fff;
    box-shadow: 0 24px 40px -22px rgba(10, 22, 51, .5), inset 0 0 0 1.5px rgba(10, 22, 51, .07); animation: floaty 9s ease-in-out infinite; }
.ud-card small { display: block; color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.ud-card em { display: block; margin-top: 3px; color: #16A34A; font-family: var(--display); font-size: 26px; font-style: normal; font-weight: 800; letter-spacing: -.025em; line-height: 1.05; }
.ud-card u { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 700; text-decoration: none; line-height: 1.35; }
.ud-dot { position: absolute; top: 15px; right: 15px; width: 8px; height: 8px; border-radius: 50%; background: #16A34A; box-shadow: 0 0 0 4px rgba(22, 163, 74, .16); }
/* anchored to the CONTENT edge so they can never sit under a card */
.ud-card.uc-f1 { left: max(16px, calc(50% - 570px - 184px)); top: 24%; rotate: -3deg; }
.ud-card.uc-f2 { right: max(16px, calc(50% - 570px - 184px)); top: 18%; rotate: 3deg; animation-delay: -3s; }
.ud-card.uc-f3 { right: max(16px, calc(50% - 570px - 184px)); top: 62%; rotate: -2deg; animation-delay: -5.5s; }
.uc-f3 em { color: var(--blue); }
@media (max-width: 1559.98px) { .ud-card, .ud-ring { display: none; } }

.uc-head { max-width: 940px; margin: 0 auto 52px; text-align: center; }
.uc-title { margin: 0; color: var(--ink); font-family: var(--display); font-size: clamp(30px, 4vw, 52px); font-weight: 800; line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
.uc-hl { background: linear-gradient(100deg, #16A34A, #0D9488 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.uc-lead { margin: 20px 0 0; color: #45536F; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.6; text-wrap: balance; }
.uc-lead b { color: var(--ink); font-weight: 800; }
.uc-lead mark { padding: 0 .16em; border-radius: 4px; background: #FFD84D; color: var(--ink); font-weight: 800; }
.uc-kick { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; color: var(--ink); font-family: var(--display); font-size: clamp(18px, 1.9vw, 24px); font-weight: 800; letter-spacing: -.02em; }
.uc-kick i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: linear-gradient(145deg, #D97706, #FCD34D); color: #fff; font-size: 16px; box-shadow: 0 14px 24px -12px rgba(217, 119, 6, .8); }

.uc-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; max-width: 1140px; margin: 0 auto; }
/* overflow:hidden keeps the 3px top bar inside the card's rounded corners */
.uc-card { position: relative; display: flex; flex-direction: column; width: calc((100% - 48px) / 3); overflow: hidden; padding: 28px 26px 30px; border-radius: 22px; background: #fff;
    box-shadow: 0 28px 54px -34px rgba(10, 22, 51, .45), 0 0 0 1px rgba(10, 22, 51, .06); }
.uc-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--a), var(--a2)); }
.uc-ic { position: relative; display: grid; place-items: center; width: 104px; height: 104px; margin-bottom: 16px; }
.uc-ic::before { content: ""; position: absolute; inset: -6%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--a) 26%, transparent), transparent 74%); }
.uc-ic img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 16px rgba(10, 22, 51, .22)); }
.uc-ic i { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(145deg, var(--a), var(--a2)); color: #fff; font-size: 22px; box-shadow: 0 18px 30px -16px var(--a); }
.uc-ic img + i { display: none; }
.uc-card h3 { margin: 0 0 10px; color: var(--ink); font-family: var(--display); font-size: clamp(17px, 1.55vw, 20px); font-weight: 800; line-height: 1.25; letter-spacing: -.02em; }
/* h3 in the selector so the tinted pill outranks .uc-card h3 */
.uc-card h3.uc-pill { display: inline-block; align-self: flex-start; margin: 0 0 12px; padding: 9px 17px; border-radius: 13px;
    background: color-mix(in srgb, var(--a) 16%, #fff); color: var(--ink);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--a) 34%, #fff), 0 10px 18px -12px color-mix(in srgb, var(--a) 70%, transparent); }
.uc-card p { margin: 0; color: #4A5772; font-size: 15.5px; line-height: 1.65; }
.uc-card b { color: var(--ink); font-weight: 800; }
/* the last two run half-width and side by side: organic | paid, setting up the closing line */
.uc-half { flex-direction: row; align-items: center; gap: 26px; width: calc((100% - 24px) / 2); padding: 34px 32px 36px; }
.uc-half .uc-ic { width: 138px; height: 138px; margin-bottom: 0; flex: none; }
.uc-half p { font-size: 16.5px; line-height: 1.62; }
.uc-gold { background: linear-gradient(120deg, #FFF8E8, #FFEFCC); box-shadow: 0 28px 54px -32px rgba(217, 119, 6, .5), 0 0 0 1px rgba(217, 119, 6, .16); }

.uc-close { max-width: 900px; margin: 62px auto 0; padding: 40px 44px 42px; border-radius: 26px; background: #fff; text-align: center; overflow: hidden; position: relative;
    box-shadow: 0 34px 62px -38px rgba(10, 22, 51, .45), 0 0 0 1px rgba(10, 22, 51, .06); }
.uc-close::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, #16A34A, #0D9488 50%, #D97706); }
.uc-statement { margin: 0; color: var(--ink); font-family: var(--display); font-size: clamp(22px, 2.6vw, 33px); font-weight: 800; line-height: 1.26; letter-spacing: -.025em; text-wrap: balance; }
.uc-hl2 { background: linear-gradient(100deg, #D97706, #F59E0B); -webkit-background-clip: text; background-clip: text; color: transparent; }
.uc-goals { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 26px 0 0; }
.uc-goal { display: inline-flex; align-items: center; gap: 11px; margin: 0; padding: 13px 20px; border-radius: 15px; color: var(--ink); font-size: clamp(15px, 1.5vw, 17px); font-weight: 700; text-align: left; }
.uc-goal i { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; color: #fff; font-size: 12px; }
.uc-goal-no { background: #FFF1F3; box-shadow: inset 0 0 0 1.5px #FBD5DC; }
.uc-goal-no i { background: #E11D48; box-shadow: 0 8px 14px -8px rgba(225, 29, 72, .9); }
.uc-goal-yes { background: #EDFBF1; box-shadow: inset 0 0 0 1.5px #C7EED6; }
.uc-goal-yes i { background: #16A34A; box-shadow: 0 8px 14px -8px rgba(22, 163, 74, .9); }
.uc-goal mark { padding: 0 .14em; border-radius: 3px; background: linear-gradient(transparent 14%, #FFE066 14%, #FFD84D 88%, transparent 88%); color: var(--ink); font-weight: 800; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.uc-final { max-width: 700px; margin: 24px auto 0; color: #45536F; font-size: clamp(15.5px, 1.5vw, 18px); line-height: 1.6; }
.uc-final b { color: var(--ink); font-weight: 800; }

@media (max-width: 1199.98px) {
    .uc-bg { --uv: 76px; }
    .uc-card { width: calc((100% - 24px) / 2); }
    .uc-half { width: 100%; }
}
/* tablet: the closing pair stays a pair rather than two full-width bands */
@media (min-width: 768px) and (max-width: 991.98px) {
    .uc-half { width: calc((100% - 24px) / 2); flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px 22px 26px; }
    .uc-half .uc-ic { width: 96px; height: 96px; }
    .uc-half p { font-size: 15px; }
}
@media (max-width: 767.98px) {
    .uc { padding: 46px 0 80px; }
    .uc-bg { --uv: 52px; }
    .uc-head { margin-bottom: 28px; }
    .uc-title { font-size: 27px; }
    .uc-lead { margin-top: 14px; font-size: 15.5px; line-height: 1.55; }
    .uc-kick { margin-top: 16px; font-size: 17px; gap: 8px; }
    .uc-kick i { width: 28px; height: 28px; border-radius: 9px; font-size: 13px; }
    .uc-grid { gap: 16px; }
    .uc-card { width: 100%; padding: 22px 20px 24px; border-radius: 18px; }
    .uc-ic { width: 84px; height: 84px; margin-bottom: 12px; }
    .uc-ic i { width: 48px; height: 48px; border-radius: 15px; font-size: 19px; }
    .uc-half { flex-direction: column; align-items: flex-start; gap: 14px; }
    .uc-half .uc-ic { width: 84px; height: 84px; }
    .uc-close { margin-top: 44px; padding: 28px 22px 30px; border-radius: 20px; }
    .uc-goal { width: 100%; }
}

/* ==========================================================
   SECTION 25 — 3-DAY LAUNCH WORKSHOP (bonus block)
   The user asked for this one to be HIGHLIGHTED, so it is the only dark
   block in this stretch: navy + gold against Section 24's mint, which makes
   it read as a premium bonus rather than another content section.
   Transition = a single clean full-width diagonal, new in the run.
   ========================================================== */
.ws { position: relative; z-index: 19; isolation: isolate; overflow-x: clip; padding: 46px 0 104px; color: #EAF0FF; background: #0A1633; }
.ws-bg { --wv: 112px; position: absolute; top: calc(-1 * var(--wv)); left: 0; right: 0; bottom: 0; z-index: -1; overflow: hidden; pointer-events: none;
    background:
        radial-gradient(ellipse 52% 30% at 50% 0%, rgba(217, 119, 6, .3), transparent 72%),
        radial-gradient(ellipse 40% 30% at 6% 26%, rgba(11, 92, 255, .3), transparent 70%),
        radial-gradient(ellipse 40% 30% at 96% 70%, rgba(124, 58, 237, .26), transparent 70%),
        linear-gradient(180deg, #13224A 0%, #0C1735 52%, #0A1633 100%);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 112' preserveAspectRatio='none'%3E%3Cpath d='M0 112 L0 88 L1440 14 L1440 112 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 112' preserveAspectRatio='none'%3E%3Cpath d='M0 112 L0 88 L1440 14 L1440 112 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
    -webkit-mask-size: 100% var(--wv), 100% calc(100% - var(--wv) + 1px);
            mask-size: 100% var(--wv), 100% calc(100% - var(--wv) + 1px);
    -webkit-mask-position: 0 0, 0 100%;
            mask-position: 0 0, 0 100%;
    -webkit-mask-repeat: no-repeat, no-repeat;
            mask-repeat: no-repeat, no-repeat; }
.ws-bg::after { content: ""; position: absolute; inset: var(--wv) 0 0 0;
    background: radial-gradient(rgba(255, 255, 255, .07) 1.2px, transparent 1.7px) 0 0 / 24px 24px;
    -webkit-mask-image: radial-gradient(ellipse 66% 48% at 50% 6%, #000 0%, transparent 74%);
            mask-image: radial-gradient(ellipse 66% 48% at 50% 6%, #000 0%, transparent 74%); }

/* background elements (standing rule) — glass widgets that suit the dark ground */
.ws-deco { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.wsd-orb { position: absolute; border-radius: 50%; }
.wsd-orb.b1 { left: -160px; top: 18%; width: 380px; height: 380px; background: radial-gradient(closest-side, rgba(217, 119, 6, .2), transparent 70%); }
.wsd-orb.b2 { right: -170px; bottom: 12%; width: 420px; height: 420px; background: radial-gradient(closest-side, rgba(11, 92, 255, .22), transparent 70%); }
.wsd-ring { position: absolute; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .13); }
.wsd-ring.n1 { left: 60px; bottom: 16%; width: 150px; height: 150px; }
.wsd-card { position: absolute; width: 178px; padding: 14px 16px 15px; border-radius: 16px; background: rgba(255, 255, 255, .07);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14), 0 26px 44px -24px rgba(0, 0, 0, .8); animation: floaty 9s ease-in-out infinite; }
.wsd-card small { display: block; color: #9FB0D6; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.wsd-card em { display: block; margin-top: 4px; color: #FCD34D; font-family: var(--display); font-size: 23px; font-style: normal; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.wsd-card em s { margin-right: 6px; color: #8E9DC4; font-size: 17px; }
.wsd-card u { display: block; margin-top: 4px; color: #9FB0D6; font-size: 11px; font-weight: 700; text-decoration: none; line-height: 1.35; }
.wsd-card i { display: flex; gap: 6px; margin-top: 9px; font-style: normal; }
.wsd-card i b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(255, 255, 255, .1); color: #9FB0D6; font-size: 12px; font-weight: 800; }
.wsd-card i b.done { background: linear-gradient(145deg, #D97706, #FCD34D); color: #2A1806; }
/* anchored to the CONTENT edge so they never sit under the content */
.wsd-card.ws-p1 { left: max(16px, calc(50% - 600px - 196px)); top: 26%; rotate: -3deg; }
.wsd-card.ws-p2 { right: max(16px, calc(50% - 600px - 196px)); top: 60%; rotate: 3deg; animation-delay: -4s; }
@media (max-width: 1619.98px) { .wsd-card, .wsd-ring { display: none; } }

.ws-head { max-width: 960px; margin: 0 auto 50px; text-align: center; }
.ws-badge { display: inline-flex; align-items: center; gap: 10px; padding: 9px 20px; border-radius: 999px; background: rgba(252, 211, 77, .12); color: #FCD34D; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    box-shadow: inset 0 0 0 1.5px rgba(252, 211, 77, .34); }
.ws-badge i { font-size: 15px; }
.ws-title { margin: 20px 0 0; color: #fff; font-family: var(--display); font-size: clamp(30px, 4vw, 52px); font-weight: 800; line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
.ws-hl { background: linear-gradient(100deg, #FCD34D, #F59E0B 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ws-hl2 { background: linear-gradient(100deg, #FCD34D, #F59E0B 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* intro split: copy left, 3D box right */
.ws-intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 56px; max-width: 1140px; margin: 0 auto 72px; }
.ws-sub { margin: 0 0 20px; color: #fff; font-family: var(--display); font-size: clamp(21px, 2.3vw, 30px); font-weight: 800; line-height: 1.24; letter-spacing: -.025em; }
.ws-live { color: #7FE3FF; }
.ws-copy p { margin: 0 0 14px; color: #C3D0EC; font-size: clamp(16px, 1.6vw, 18.5px); line-height: 1.66; }
.ws-copy p:last-child { margin-bottom: 0; }
.ws-copy b { color: #fff; font-weight: 800; }
.ws-matters { color: #fff !important; }

.ws-boxwrap { position: relative; display: grid; place-items: center; min-height: 340px; }
.ws-boxglow { position: absolute; width: 78%; height: 62%; border-radius: 50%; background: radial-gradient(closest-side, rgba(252, 211, 77, .4), transparent 72%); }
.ws-box { position: relative; width: 100%; max-width: 380px; height: auto; filter: drop-shadow(0 40px 46px rgba(0, 0, 0, .6)); }
/* fallback stands in until the 3D box art lands, so the column is never empty */
.ws-boxfall { position: relative; display: grid; place-items: center; gap: 10px; width: 260px; padding: 34px 26px 30px; border-radius: 22px; background: linear-gradient(150deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04)); text-align: center;
    box-shadow: inset 0 0 0 1.5px rgba(252, 211, 77, .3), 0 30px 50px -28px rgba(0, 0, 0, .8); }
.ws-boxfall i { font-size: 40px; color: #FCD34D; }
.ws-boxfall b { color: #fff; font-family: var(--display); font-size: 19px; font-weight: 800; line-height: 1.25; }
.ws-boxfall u { color: #9FB0D6; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-decoration: none; text-transform: uppercase; }
.ws-box ~ .ws-boxfall, .ws-boxwrap:has(.ws-box) .ws-boxfall { display: none; }

.ws-dayshead { max-width: 820px; margin: 0 auto 34px; text-align: center; }
.ws-dayshead h3 { margin: 0; color: #fff; font-family: var(--display); font-size: clamp(22px, 2.5vw, 33px); font-weight: 800; letter-spacing: -.025em; text-wrap: balance; }

.ws-days { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; max-width: 1140px; margin: 0 auto 70px; }
/* each day gets its own accent so the 3 read as a progression, plus a ghost
   numeral, an icon badge and a coloured top edge — the flat glass panels the
   user rejected had none of that separation */
.ws-day { position: relative; display: flex; flex-direction: column; align-items: flex-start; width: calc((100% - 44px) / 3); overflow: hidden; padding: 28px 26px 30px; border-radius: 22px;
    background: linear-gradient(165deg, color-mix(in srgb, var(--a) 22%, rgba(255, 255, 255, .05)), rgba(255, 255, 255, .04));
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--a) 34%, rgba(255, 255, 255, .12)), 0 30px 54px -34px rgba(0, 0, 0, .9); }
.ws-day::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--a), var(--a2)); }
.ws-ghost { position: absolute; top: 6px; right: 14px; color: rgba(255, 255, 255, .07); font-family: var(--display); font-size: 92px; font-weight: 800; line-height: 1; letter-spacing: -.05em; pointer-events: none; }
.ws-dic { position: relative; display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 16px; border-radius: 17px; background: linear-gradient(145deg, var(--a), var(--a2)); color: #fff; font-size: 21px;
    box-shadow: 0 18px 30px -14px var(--a); }
.ws-daytag { position: relative; display: inline-block; margin-bottom: 11px; padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--a) 30%, transparent); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--a2) 45%, transparent); }
.ws-day h4 { position: relative; margin: 0 0 10px; color: #fff; font-family: var(--display); font-size: clamp(17px, 1.6vw, 20.5px); font-weight: 800; line-height: 1.25; letter-spacing: -.02em; }
.ws-day p { position: relative; margin: 0; color: #CBD7F0; font-size: 15px; line-height: 1.62; }
.ws-day b { color: #fff; font-weight: 800; }

.ws-payoff { max-width: 900px; margin: 0 auto; text-align: center; }
.ws-pre { margin: 0; color: #C3D0EC; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; }
.ws-big { margin: 14px 0 0; color: #fff; font-family: var(--display); font-size: clamp(24px, 3vw, 40px); font-weight: 800; line-height: 1.18; letter-spacing: -.03em; text-wrap: balance; }
.ws-checks { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; }
/* a green TINT on navy is too low-contrast to read — solid glass fill, brighter
   text and a solid green check instead */
.ws-checks li { display: inline-flex; align-items: center; gap: 11px; padding: 13px 20px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 16px; font-weight: 700; letter-spacing: -.005em;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2); }
.ws-checks i { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: linear-gradient(145deg, #16A34A, #4ADE80); color: #04270F; font-size: 11px; font-weight: 900;
    box-shadow: 0 8px 14px -8px rgba(22, 163, 74, .9); }
.ws-split { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; margin-top: 34px; }
.ws-you, .ws-us { font-family: var(--display); font-size: clamp(17px, 1.8vw, 23px); font-weight: 800; letter-spacing: -.02em; }
.ws-you { color: #C3D0EC; }
.ws-us { color: #FCD34D; }

/* glass fill + a bright gold ring: an amber FILL goes muddy brown on navy */
.ws-value { max-width: 900px; margin: 62px auto 0; padding: 32px 38px 34px; border-radius: 24px; text-align: center;
    background: linear-gradient(140deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .035));
    box-shadow: inset 0 0 0 2px rgba(252, 211, 77, .55), 0 34px 60px -36px rgba(0, 0, 0, .9); }
.ws-vtitle { margin: 0; color: #fff; font-family: var(--display); font-size: clamp(19px, 2.1vw, 27px); font-weight: 800; line-height: 1.3; letter-spacing: -.025em; text-wrap: balance; }
.ws-price { color: #FCD34D; }
.ws-vfree { display: inline-flex; align-items: center; gap: 10px; margin: 16px 0 0; color: #C3D0EC; font-size: clamp(15px, 1.5vw, 17.5px); font-weight: 700; }
.ws-vfree i { color: #FCD34D; font-size: 16px; }
.ws-vfree b { color: #4ADE80; font-weight: 800; }

/* excited-reader cutout on the bottom-left edge, same idiom as the other edge people */
/* anchored by her RIGHT edge to the centred 900px content block (not the viewport),
   so at 2x she bleeds further off the left instead of running under the pills */
/* her right edge is pinned 20px clear of the centred 900px content block, so the
   only size that actually gains VISIBLE area is one that matches the side margin;
   `50vw - 430px` keeps a constant ~40px bleed instead of wasting width off-screen */
.ws-girl { position: absolute; z-index: 1; display: none; bottom: 0; right: calc(50% + 470px); width: min(30vw, calc(50vw - 430px), 600px); height: auto; pointer-events: none;
    -webkit-mask-image: linear-gradient(#000 74%, transparent 98%);
            mask-image: linear-gradient(#000 74%, transparent 98%); }
@media (min-width: 1300px) { .ws-girl { display: block; } }

@media (max-width: 991.98px) {
    .ws { padding: 36px 0 84px; }
    .ws-bg { --wv: 76px; }
    .ws-intro { grid-template-columns: minmax(0, 1fr); gap: 34px; margin-bottom: 52px; }
    .ws-boxwrap { order: -1; min-height: 0; }
    .ws-day { width: calc((100% - 24px) / 2); }
}
@media (max-width: 767.98px) {
    .ws { padding: 28px 0 66px; }
    .ws-bg { --wv: 52px; }
    .ws-head { margin-bottom: 34px; }
    .ws-title { font-size: 27px; }
    .ws-sub { font-size: 20px; }
    .ws-box { max-width: 260px; }
    .ws-days { gap: 14px; margin-bottom: 48px; }
    .ws-day { width: 100%; gap: 0; padding: 20px 18px 22px; border-radius: 16px; }
    .ws-checks { gap: 9px; margin-top: 24px; }
    .ws-checks li { width: 100%; padding: 10px 15px; font-size: 14px; }
    .ws-split { flex-direction: column; gap: 6px; margin-top: 28px; }
    .ws-value { margin-top: 44px; padding: 24px 20px 26px; border-radius: 18px; }
    .ws-vfree { display: block; }
    .ws-vfree i { margin-right: 9px; }
}

/* ==========================================================
   SECTION 26 — 6 POWER BONUSES
   Alternating left/right cards: the box art (with 3D icons scattered around it)
   on one side, the bonus copy on the other, flipping every other card.
   Light LAVENDER ground after Section 25's navy. Transition = a 4-bump scallop.
   ========================================================== */
.bn { position: relative; z-index: 20; isolation: isolate; overflow-x: clip; padding: 76px 0 120px; color: var(--ink); background: #F2F1FB; }
.bn-bg { --nv: 112px; position: absolute; top: calc(-1 * var(--nv)); left: 0; right: 0; bottom: 0; z-index: -1; overflow: hidden; pointer-events: none;
    background:
        linear-gradient(180deg, rgba(124, 58, 237, .3) 0%, rgba(196, 181, 253, .18) 42%, transparent 80%) 0 0 / 100% 260px no-repeat,
        radial-gradient(ellipse 46% 30% at 50% 4%, rgba(255, 255, 255, .95), transparent 74%),
        radial-gradient(ellipse 40% 9% at 0% 24%, rgba(124, 58, 237, .16), transparent 70%),
        radial-gradient(ellipse 40% 9% at 100% 38%, rgba(234, 88, 12, .13), transparent 70%),
        radial-gradient(ellipse 40% 9% at 0% 54%, rgba(13, 148, 136, .14), transparent 70%),
        radial-gradient(ellipse 40% 9% at 100% 70%, rgba(225, 29, 72, .12), transparent 70%),
        radial-gradient(ellipse 40% 9% at 0% 86%, rgba(22, 163, 74, .13), transparent 70%),
        linear-gradient(90deg, rgba(10, 22, 51, .035) 1px, transparent 1px) 50% 0 / 72px 72px,
        linear-gradient(0deg, rgba(10, 22, 51, .035) 1px, transparent 1px) 50% 0 / 72px 72px,
        linear-gradient(180deg, #F7F5FE 0%, #F1EEFB 30%, #F5F2FC 60%, #EFEDFA 100%);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 112' preserveAspectRatio='none'%3E%3Cpath d='M0 112 L0 60 Q 180 10 360 60 T 720 60 T 1080 60 T 1440 60 L1440 112 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 112' preserveAspectRatio='none'%3E%3Cpath d='M0 112 L0 60 Q 180 10 360 60 T 720 60 T 1080 60 T 1440 60 L1440 112 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
    -webkit-mask-size: 100% var(--nv), 100% calc(100% - var(--nv) + 1px);
            mask-size: 100% var(--nv), 100% calc(100% - var(--nv) + 1px);
    -webkit-mask-position: 0 0, 0 100%;
            mask-position: 0 0, 0 100%;
    -webkit-mask-repeat: no-repeat, no-repeat;
            mask-repeat: no-repeat, no-repeat; }

.bn-deco { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bnd-orb { position: absolute; border-radius: 50%; }
.bnd-orb.q1 { left: -160px; top: 12%; width: 380px; height: 380px; background: radial-gradient(closest-side, rgba(124, 58, 237, .13), transparent 70%); }
.bnd-orb.q2 { right: -170px; bottom: 16%; width: 400px; height: 400px; background: radial-gradient(closest-side, rgba(217, 119, 6, .12), transparent 70%); }
.bnd-ring { position: absolute; border-radius: 50%; border: 1.5px dashed rgba(10, 22, 51, .1); }
.bnd-ring.z1 { left: 54px; top: 44%; width: 150px; height: 150px; }
.bnd-ring.z2 { right: 62px; top: 10%; width: 118px; height: 118px; }
.bnd-orb.q3 { left: -200px; top: 44%; width: 460px; height: 460px; background: radial-gradient(closest-side, rgba(11, 92, 255, .1), transparent 70%); }
.bnd-orb.q4 { right: -200px; top: 66%; width: 440px; height: 440px; background: radial-gradient(closest-side, rgba(22, 163, 74, .1), transparent 70%); }
/* confetti tiles live only at the side edges, faded out behind the cards */
.bnd-confetti { position: absolute; inset: 0; opacity: .38; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22280%22%20height%3D%22280%22%3E%3Cg%20opacity%3D%22.75%22%3E%3Crect%20x%3D%2230%22%20y%3D%2240%22%20width%3D%2214%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%237C3AED%22%20transform%3D%22rotate(28%2037%2043)%22%2F%3E%3Ccircle%20cx%3D%22120%22%20cy%3D%2230%22%20r%3D%224%22%20fill%3D%22%23F59E0B%22%2F%3E%3Crect%20x%3D%22200%22%20y%3D%2270%22%20width%3D%2212%22%20height%3D%225%22%20rx%3D%222.5%22%20fill%3D%22%23E11D48%22%20transform%3D%22rotate(-35%20206%2072)%22%2F%3E%3Cpath%20d%3D%22M70%20150l6-10%206%2010z%22%20fill%3D%22%230D9488%22%2F%3E%3Ccircle%20cx%3D%22240%22%20cy%3D%22190%22%20r%3D%223.5%22%20fill%3D%22%230B5CFF%22%2F%3E%3Crect%20x%3D%22150%22%20y%3D%22210%22%20width%3D%2214%22%20height%3D%226%22%20rx%3D%223%22%20fill%3D%22%2316A34A%22%20transform%3D%22rotate(60%20157%20213)%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%22240%22%20width%3D%2210%22%20height%3D%2210%22%20rx%3D%222%22%20fill%3D%22%23FBBF24%22%20transform%3D%22rotate(20%2025%20245)%22%2F%3E%3Ccircle%20cx%3D%22170%22%20cy%3D%22130%22%20r%3D%222.5%22%20fill%3D%22%23C084FC%22%2F%3E%3Cpath%20d%3D%22M250%2020l3%207%207%201-5%205%201%207-6-4-6%204%201-7-5-5%207-1z%22%20fill%3D%22%23FBBF24%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 0 0 / 280px 280px;
    -webkit-mask-image: linear-gradient(90deg, #000 0, rgba(0,0,0,.7) calc(50% - 640px), transparent calc(50% - 560px), transparent calc(50% + 560px), rgba(0,0,0,.7) calc(50% + 640px), #000 100%);
            mask-image: linear-gradient(90deg, #000 0, rgba(0,0,0,.7) calc(50% - 640px), transparent calc(50% - 560px), transparent calc(50% + 560px), rgba(0,0,0,.7) calc(50% + 640px), #000 100%); }
/* gold sunburst behind the headline */
.bnd-burst { position: absolute; left: 50%; top: -120px; width: 1100px; height: 900px; translate: -50% 0;
    background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(251, 191, 36, .1) 0deg 7deg, transparent 7deg 18deg);
    -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 80%);
            mask-image: radial-gradient(closest-side, #000 20%, transparent 80%); }
@media (max-width: 1499.98px) { .bnd-ring { display: none; } }

.bn-head { position: relative; max-width: 1080px; margin: 0 auto 64px; text-align: center; }
.bnh-ic { --off: clamp(18px, 2.2vw, 46px); display: none; width: min(210px, 11vw, calc(50vw - 552px - var(--off))); top: 50px; }
.bnh-l { right: calc(100% + var(--off)); rotate: -10deg; }
.bnh-r { left: calc(100% + var(--off)); rotate: 10deg; animation-delay: -4s; }
@media (min-width: 1400px) { .bnh-ic { display: block; } }
.bn-mk { position: relative; white-space: nowrap; background: linear-gradient(180deg, transparent 60%, rgba(124, 58, 237, .2) 60%, rgba(236, 72, 153, .22) 92%, transparent 92%); padding: 0 6px; }
.bn-hl2 { background: linear-gradient(100deg, #0B5CFF, #7C3AED); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bn-kick { display: inline-flex; align-items: center; gap: 10px; padding: 9px 20px; border-radius: 999px; background: #fff; color: #B45309; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    box-shadow: 0 14px 26px -16px rgba(10, 22, 51, .35), inset 0 0 0 1.5px rgba(217, 119, 6, .28); }
.bn-kick i { color: #D97706; font-size: 15px; }
.bn-title { margin: 22px 0 0; color: var(--ink); font-family: var(--display); font-size: clamp(32px, 4vw, 62px); font-weight: 800; line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; -webkit-text-stroke: 1px var(--ink); }
.bn-title .bn-hl { -webkit-text-stroke: 1px #E08A0B; }
.bn-title .bn-hl2 { -webkit-text-stroke: 1px #4F52EE; }
.bn-hl { background: linear-gradient(100deg, #D97706, #F59E0B 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bn-lead { max-width: 800px; margin: 20px auto 0; color: #45536F; font-size: clamp(16.5px, 1.65vw, 20px); line-height: 1.6; text-wrap: balance; }
.bn-lead b { color: var(--ink); font-weight: 800; }
.bn-value { display: inline-flex; align-items: baseline; gap: 10px; margin-top: 24px; padding: 12px 26px; border-radius: 999px; background: linear-gradient(120deg, #0A1633, #1B2C5C); color: #fff; font-family: var(--display); font-size: clamp(16px, 1.7vw, 21px); font-weight: 800; letter-spacing: -.01em;
    box-shadow: 0 22px 38px -22px rgba(10, 22, 51, .8); }
.bn-value s { color: #93A3C7; }
.bn-value b { color: #FCD34D; }

.bn-list-wrap { display: flex; flex-direction: column; gap: 32px; max-width: 1200px; margin: 0 auto; }
.bn-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); align-items: stretch; gap: 0; padding: 14px; overflow: hidden; border-radius: 30px; background: #fff;
    box-shadow: 0 40px 70px -40px color-mix(in srgb, var(--a) 55%, rgba(10, 22, 51, .6)), 0 0 0 1.5px color-mix(in srgb, var(--a) 16%, #fff); }
/* accent corner wash behind the copy side */
.bn-card::before { content: ""; position: absolute; right: -120px; top: -140px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--a2) 14%, transparent), transparent 72%); pointer-events: none; }
.bn-flip::before { right: auto; left: -120px; }
.bn-body { position: relative; align-self: center; padding: 30px 36px 30px 42px; }
.bn-flip .bn-body { padding: 30px 42px 30px 36px; }
.bn-flip { direction: rtl; }
.bn-flip > * { direction: ltr; }

/* box art + scattered 3D icons */
.bn-visual { position: relative; display: grid; place-items: center; min-height: 460px; padding: 56px 40px 50px; overflow: hidden; border-radius: 22px;
    background:
        radial-gradient(color-mix(in srgb, var(--a) 22%, transparent) 1.2px, transparent 1.6px) 0 0 / 20px 20px,
        linear-gradient(155deg, color-mix(in srgb, var(--a) 17%, #fff) 0%, color-mix(in srgb, var(--a2) 9%, #fff) 60%, #fff 100%);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--a) 14%, #fff); }
.bn-num { position: absolute; left: 20px; bottom: -34px; color: transparent; font-family: var(--display); font-size: 210px; font-weight: 800; letter-spacing: -.07em; line-height: 1;
    -webkit-text-stroke: 2px color-mix(in srgb, var(--a) 26%, transparent); pointer-events: none; }
.bn-flip .bn-num { left: auto; right: 20px; }
.bn-free { position: absolute; z-index: 3; top: 18px; right: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 999px; background: #fff; color: color-mix(in srgb, var(--a) 82%, #000); font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    box-shadow: 0 12px 22px -12px color-mix(in srgb, var(--a) 70%, transparent), inset 0 0 0 1.5px color-mix(in srgb, var(--a) 22%, #fff); }
.bn-free i { color: var(--a); }
.bn-flip .bn-free { right: auto; left: 18px; }
.bn-floor { position: absolute; left: 50%; bottom: 40px; width: 62%; height: 34px; border-radius: 50%; translate: -50% 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--a) 30%, rgba(10, 22, 51, .25)), transparent); }
.bn-glow { position: absolute; width: 92%; height: 76%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--a) 26%, transparent), transparent 74%); }
.bn-box { position: relative; z-index: 1; width: 100%; max-width: 340px; height: auto; filter: drop-shadow(0 26px 30px rgba(10, 22, 51, .35)); }
.bn-fall { position: relative; z-index: 1; display: grid; place-items: center; gap: 10px; width: 190px; padding: 30px 20px; border-radius: 20px; background: linear-gradient(150deg, color-mix(in srgb, var(--a) 16%, #fff), #fff); text-align: center;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--a) 26%, #fff), 0 20px 34px -22px rgba(10, 22, 51, .4); }
.bn-fall i { color: var(--a); font-size: 34px; }
.bn-fall b { color: var(--ink); font-family: var(--display); font-size: 16px; font-weight: 800; }
.bn-box ~ .bn-fall, .bn-visual:has(.bn-box) .bn-fall { display: none; }
/* generated 3D icon images around each box */
.bn-ic { position: absolute; z-index: 2; height: auto; pointer-events: none; filter: drop-shadow(0 16px 18px rgba(10, 22, 51, .22)); animation: floaty 8s ease-in-out infinite; }
.bn-visual .bn-ic { width: 96px; }
.bn-visual .bi-a { top: 62px; left: 22px; rotate: -8deg; }
.bn-flip .bn-visual .bi-a { left: auto; right: 22px; rotate: 8deg; }
.bn-visual .bi-b { bottom: 40px; right: 22px; rotate: 8deg; animation-delay: -3.5s; }
.bn-flip .bn-visual .bi-b { right: auto; left: 22px; rotate: -8deg; }

/* section-edge spread: bonus / giveaway tiles + value cards */
.bnd-ic { width: 84px; }
.bnd-ic.e1 { left: max(14px, calc(50% - 600px - 150px)); top: 15%; rotate: -10deg; }
.bnd-ic.e2 { right: max(14px, calc(50% - 600px - 150px)); top: 22%; rotate: 9deg; animation-delay: -2s; }
.bnd-ic.e3 { left: max(14px, calc(50% - 600px - 150px)); top: 39%; rotate: 7deg; animation-delay: -4s; }
.bnd-ic.e4 { right: max(14px, calc(50% - 600px - 150px)); top: 46%; rotate: -8deg; animation-delay: -1s; }
.bnd-ic.e5 { left: max(14px, calc(50% - 600px - 150px)); top: 63%; rotate: -6deg; animation-delay: -5s; }
.bnd-ic.e6 { right: max(14px, calc(50% - 600px - 150px)); top: 70%; rotate: 10deg; animation-delay: -3s; }
.bnd-card { position: absolute; width: 184px; padding: 13px 14px 14px; border-radius: 18px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: 0 26px 44px -24px color-mix(in srgb, var(--g1) 45%, rgba(10, 22, 51, .55)), inset 0 0 0 1.5px color-mix(in srgb, var(--g1) 14%, #fff); animation: floaty 9s ease-in-out infinite; }
.bndc-top { display: flex; align-items: center; gap: 10px; }
.bndc-ic { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; background: linear-gradient(145deg, var(--g1), var(--g2)); color: #fff; font-size: 15px;
    box-shadow: 0 10px 16px -8px var(--g1), inset 0 1.5px 0 rgba(255, 255, 255, .4); }
.bnd-card small { display: block; color: var(--muted); font-size: 9.5px; font-weight: 800; letter-spacing: .07em; line-height: 1.2; text-transform: uppercase; }
.bnd-card em { display: block; margin-top: 2px; color: var(--ink); font-family: var(--display); font-size: 19px; font-style: normal; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; white-space: nowrap; }
.bnd-card u { display: block; margin-top: 9px; padding-top: 8px; border-top: 1px dashed rgba(10, 22, 51, .12); color: color-mix(in srgb, var(--g1) 80%, #000); font-size: 11px; font-weight: 800; text-decoration: none; }
.bndc-bar { display: block; height: 7px; margin-top: 11px; overflow: hidden; border-radius: 99px; background: color-mix(in srgb, var(--g1) 12%, #fff); }
.bndc-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--g1), var(--g2)); }
.bndc-dots { display: flex; gap: 5px; margin-top: 11px; }
.bndc-dots b { flex: 1; height: 7px; border-radius: 99px; background: linear-gradient(90deg, var(--g1), var(--g2)); }
.bndc-dots b:nth-child(n+7) { opacity: .3; }
.bndc-chips { display: flex; gap: 6px; margin-top: 10px; }
.bndc-chips b { padding: 4px 9px; border-radius: 99px; background: color-mix(in srgb, var(--g1) 10%, #fff); color: color-mix(in srgb, var(--g1) 85%, #000); font-size: 10.5px; font-weight: 800; }
.bnd-card.c1 { left: max(14px, calc(50% - 600px - 208px)); top: 10%; rotate: -3deg; }
.bnd-card.c2 { right: max(14px, calc(50% - 600px - 208px)); top: 12%; rotate: 3deg; animation-delay: -3s; }
.bnd-card.c3 { left: max(14px, calc(50% - 600px - 208px)); top: 27%; rotate: 2deg; animation-delay: -5.5s; }
.bnd-card.c4 { right: max(14px, calc(50% - 600px - 208px)); top: 31%; rotate: -2deg; animation-delay: -1.5s; }
.bnd-card.c5 { left: max(14px, calc(50% - 600px - 208px)); top: 50%; rotate: -3deg; animation-delay: -4s; }
.bnd-card.c6 { right: max(14px, calc(50% - 600px - 208px)); top: 55%; rotate: 3deg; animation-delay: -6.5s; }
.bnd-card.c7 { left: max(14px, calc(50% - 600px - 208px)); top: 74%; rotate: 2deg; animation-delay: -2.5s; }
.bnd-card.c8 { right: max(14px, calc(50% - 600px - 208px)); top: 79%; rotate: -2deg; animation-delay: -7s; }
@media (max-width: 1639.98px) { .bnd-card { display: none; } }
@media (max-width: 1499.98px) { .bnd-ic { display: none; } }


/* people cutouts flanking the CTA */
.bn-end { position: relative; margin-top: 64px; }
.bn-person { position: absolute; z-index: 1; display: none; bottom: 0; width: clamp(250px, 19vw, 370px); height: auto; pointer-events: none;
    -webkit-mask-image: linear-gradient(#000 74%, transparent 98%);
            mask-image: linear-gradient(#000 74%, transparent 98%); }
.bp-l { left: calc(50% - 50vw - 2vw); }
.bp-r { right: calc(50% - 50vw - 2vw); z-index: 2; }
@media (min-width: 1300px) { .bn-person { display: block; } }

.bn-tag { display: inline-flex; align-items: center; gap: 12px; padding: 6px 6px 6px 22px; border-radius: 999px; background: color-mix(in srgb, var(--a) 10%, #fff);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--a) 26%, #fff); }
.bn-tag b { display: grid; place-items: center; min-width: 72px; height: 58px; padding: 0 14px; border-radius: 999px; background: linear-gradient(135deg, var(--a), var(--a2)); color: #fff; font-family: var(--display); font-size: 34px; font-weight: 800; letter-spacing: -.04em; line-height: 1;
    box-shadow: 0 16px 26px -14px var(--a), inset 0 2px 0 rgba(255, 255, 255, .35); }
.bn-tag small { order: 1; color: color-mix(in srgb, var(--a) 80%, #000); font-size: 15px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.bn-tag b { order: 2; }
.bn-body h3 { margin: 18px 0 0; color: var(--ink); font-family: var(--display); font-size: clamp(23px, 2.35vw, 31px); font-weight: 800; line-height: 1.25; letter-spacing: -.025em; }
.bn-mark { padding: 0 4px; background: linear-gradient(180deg, transparent 58%, color-mix(in srgb, var(--a) 24%, transparent) 58%, color-mix(in srgb, var(--a2) 30%, transparent) 94%, transparent 94%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.bn-sub { margin: 10px 0 0; color: color-mix(in srgb, var(--a) 78%, #000); font-size: clamp(15px, 1.5vw, 17px); font-weight: 800; }
.bn-lede { margin: 10px 0 0; color: #4A5772; font-size: 15.5px; line-height: 1.62; }
.bn-lede b { color: var(--ink); font-weight: 800; }
.bn-exh { display: flex; align-items: center; gap: 9px; margin-top: 20px; color: var(--ink); font-size: 14px; font-weight: 800; letter-spacing: .02em; }
.bn-exh i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(145deg, #F59E0B, #FCD34D); color: #fff; font-size: 13px; }
.bn-exh em { flex: 1; height: 1.5px; margin-left: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--a) 30%, transparent), transparent); }
.bn-items { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.bn-items-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bn-items li { position: relative; padding: 8px 12px 8px 38px; border-radius: 12px; background: color-mix(in srgb, var(--a) 6%, #fff); color: #4A5772; font-size: 14.2px; line-height: 1.45; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a) 10%, #fff); }
.bn-items li::before { content: "\f00c"; position: absolute; left: 10px; top: 9px; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: linear-gradient(145deg, var(--a), var(--a2)); color: #fff; font-family: "Font Awesome 6 Free"; font-size: 9.5px; font-weight: 900; }
.bn-items-plain li { color: var(--ink); font-weight: 700; }
.bn-items b { color: var(--ink); font-weight: 800; }
.bn-more { display: inline-block; margin: 14px 0 0; padding: 8px 16px; border-radius: 999px; background: linear-gradient(120deg, #FFF4D6, #FFE8B0); color: var(--ink); font-size: 14.5px; font-weight: 700; }
.bn-more b { color: color-mix(in srgb, var(--a) 78%, #000); font-weight: 800; }
.offer-bn { margin-top: 0; }

@media (max-width: 991.98px) {
    .bn { padding: 56px 0 96px; }
    .bn-bg { --nv: 76px; }
    .bn-card { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 12px; }
    .bn-body, .bn-flip .bn-body { padding: 22px 16px 16px; }
    .bn-num { font-size: 150px; bottom: -24px; }
    .bn-card, .bn-flip { direction: ltr; }
    .bn-visual { min-height: 0; padding: 60px 24px 44px; }
    .bn-box { max-width: 260px; }
    .bn-visual .bn-ic { width: 76px; }
    .bn-tag b { min-width: 60px; height: 50px; font-size: 28px; }
}
@media (max-width: 767.98px) {
    .bn { padding: 44px 0 74px; }
    .bn-bg { --nv: 52px; }
    .bn-head { margin-bottom: 36px; }
    .bn-title { font-size: 31px; -webkit-text-stroke: .5px var(--ink); }
    .bn-mk { white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
    .bn-lead { font-size: 16px; }
    .bn-list-wrap { gap: 18px; }
    .bn-card { padding: 10px; border-radius: 22px; }
    .bn-body, .bn-flip .bn-body { padding: 20px 10px 14px; }
    .bn-visual { border-radius: 16px; }
    .bn-items, .bn-items-2 { grid-template-columns: minmax(0, 1fr); }
    .bn-visual .bn-ic { width: 60px; }
    .bn-flip .bn-free { left: auto; right: 18px; }
    .bn-end { margin-top: 44px; }
}

/* ==========================================================
   SECTION 27 — THE FINAL WAKE-UP CALL (dark, dusk-to-night)
   ========================================================== */
.wk { position: relative; z-index: 21; isolation: isolate; overflow-x: clip; padding: 52px 0 164px; color: #E4E6FB; background: #0B0A22; }
/* layered wave edge: a translucent violet-pink wave rises behind the dark front wave */
.wk::before { content: ""; position: absolute; left: 0; right: 0; top: -150px; height: 260px; z-index: -3; pointer-events: none;
    background: linear-gradient(90deg, rgba(124, 58, 237, .55), rgba(236, 72, 153, .45) 55%, rgba(168, 85, 247, .55));
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 150' preserveAspectRatio='none'%3E%3Cpath d='M0 150 L0 58 C 260 104 520 110 780 66 C 1040 22 1260 14 1440 44 L1440 150 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 150' preserveAspectRatio='none'%3E%3Cpath d='M0 150 L0 58 C 260 104 520 110 780 66 C 1040 22 1260 14 1440 44 L1440 150 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
    -webkit-mask-size: 100% 150px, 100% 112px;
            mask-size: 100% 150px, 100% 112px;
    -webkit-mask-position: 0 0, 0 100%;
            mask-position: 0 0, 0 100%;
    -webkit-mask-repeat: no-repeat, no-repeat;
            mask-repeat: no-repeat, no-repeat; }
.wk-bg { --kv: 110px; position: absolute; top: calc(-1 * var(--kv)); left: 0; right: 0; bottom: 0; z-index: -2; overflow: hidden; pointer-events: none;
    background:
        radial-gradient(ellipse 70% 40% at 50% 100%, rgba(91, 33, 182, .35), transparent 70%),
        radial-gradient(ellipse 30% 24% at 0% 70%, rgba(219, 39, 119, .16), transparent 70%),
        linear-gradient(180deg, #2A1F6E 0px, #1A1450 110px, #110E33 300px, #0B0A22 520px, #0B0A22 100%);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 110 L0 62 C 240 18 480 16 720 52 C 960 88 1200 92 1440 48 L1440 110 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 110 L0 62 C 240 18 480 16 720 52 C 960 88 1200 92 1440 48 L1440 110 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
    -webkit-mask-size: 100% var(--kv), 100% calc(100% - var(--kv) + 1px);
            mask-size: 100% var(--kv), 100% calc(100% - var(--kv) + 1px);
    -webkit-mask-position: 0 0, 0 100%;
            mask-position: 0 0, 0 100%;
    -webkit-mask-repeat: no-repeat, no-repeat;
            mask-repeat: no-repeat, no-repeat; }
.wk-photo { position: absolute; left: 0; top: 500px; bottom: 0; z-index: -1; width: 64%; overflow: hidden; pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .7) 45%, transparent 95%), linear-gradient(180deg, transparent 0%, #000 30%, #000 72%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .7) 45%, transparent 95%), linear-gradient(180deg, transparent 0%, #000 30%, #000 72%, transparent 100%);
            mask-composite: intersect; }
.wk-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(49, 26, 120, .55), rgba(11, 10, 34, .35)); }
.wk-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; opacity: .34; filter: saturate(1.1) brightness(.8); }

.wk-deco { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.wkd-card { position: absolute; display: flex; align-items: center; gap: 11px; width: 212px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .07); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .13), 0 26px 44px -24px rgba(0, 0, 0, .9); animation: floaty 9s ease-in-out infinite; }
.wkd-ic { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; color: #fff; font-size: 15px; }
.wkd-bad .wkd-ic { background: linear-gradient(145deg, #E11D48, #FB7185); box-shadow: 0 10px 18px -8px #E11D48; }
.wkd-good .wkd-ic { background: linear-gradient(145deg, #16A34A, #4ADE80); box-shadow: 0 10px 18px -8px #16A34A; }
.wkd-card small { display: block; color: #A9ADD8; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.wkd-card em { display: block; margin-top: 1px; font-family: var(--display); font-size: 19px; font-style: normal; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.wkd-bad em { color: #FDA4AF; }
.wkd-good em { color: #86EFAC; }
.wkd-card u { display: block; margin-top: 2px; color: #A9ADD8; font-size: 10.5px; font-weight: 700; text-decoration: none; }
.wkd-card.k1 { left: max(16px, calc(50% - 580px - 236px)); top: 42%; rotate: -3deg; }
.wkd-card.k2 { right: max(16px, calc(50% - 580px - 236px)); top: 30%; rotate: 3deg; animation-delay: -3s; }
@media (max-width: 1639.98px) { .wkd-card { display: none; } }

.wk-head { position: relative; max-width: 1140px; margin: 0 auto; text-align: center; }
.wk-pre { max-width: 880px; margin: 0 auto; color: #D7DAF6; font-size: clamp(18px, 1.95vw, 25px); font-weight: 600; line-height: 1.5; letter-spacing: -.01em; text-wrap: balance; }
.wk-pre b { color: #fff; font-weight: 800; }
.wk-gold { color: #FCD34D; font-family: var(--display); font-size: 1.24em; font-weight: 800; letter-spacing: -.025em; white-space: nowrap; }
.wk-kick { position: relative; display: inline-flex; align-items: center; gap: 12px; margin-top: 34px; padding: 8px 28px 8px 8px; border-radius: 999px;
    background: linear-gradient(110deg, #E11D48, #F43F5E 35%, #FB923C 75%, #FBBF24); color: #fff; font-family: var(--display); font-size: clamp(18px, 1.8vw, 23px); font-weight: 800; letter-spacing: -.01em; text-shadow: 0 1px 2px rgba(120, 10, 30, .35);
    box-shadow: 0 0 0 6px rgba(244, 63, 94, .16), 0 0 0 12px rgba(244, 63, 94, .07), 0 20px 50px -10px rgba(244, 63, 94, .85), inset 0 2px 0 rgba(255, 255, 255, .35);
    }
.wk-kick-dot { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #E11D48; font-size: 19px; box-shadow: 0 6px 14px -4px rgba(120, 10, 30, .5); }
.wk-kick-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .8); animation: wkRing 1.8s ease-out infinite; }
.wk-kick-dot i { animation: wkFlick 1.8s ease-in-out infinite; }
@keyframes wkRing { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes wkFlick { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.14) rotate(-6deg); } }
.wk-title { margin: 22px 0 0; color: #fff; font-family: var(--display); font-size: clamp(31px, 3.7vw, 58px); font-weight: 800; line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; text-shadow: 0 6px 40px rgba(0, 0, 0, .35); }
.wk-hl { display: block; background: linear-gradient(100deg, #FB7185, #F472B6 40%, #C084FC 75%, #FCD34D); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }

.wk-story { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 60px; max-width: 1140px; margin: 70px auto 0; }
.wk-art { position: relative; display: grid; place-items: center; margin: 0; }
.wk-art-glow { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(236, 72, 153, .4), rgba(124, 58, 237, .28) 55%, transparent 76%); }
.wk-art img { position: relative; z-index: 1; width: 100%; height: auto; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .6)); }

.wk-copy > p { margin: 0 0 20px; color: #C9CCF0; font-size: clamp(18px, 1.55vw, 20.5px); line-height: 1.65; }
.wk-copy b { color: #fff; font-weight: 800; }
.wk-copy .wk-alert { position: relative; padding: 4px 0 4px 22px; color: #E4E6FB; }
.wk-alert::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; border-radius: 4px; background: linear-gradient(180deg, #FB7185, #F97316); box-shadow: 0 0 14px rgba(251, 113, 133, .7); }
.wk-pair { display: grid; gap: 12px; margin: 0 0 26px; }
.wk-row { display: flex; align-items: center; gap: 15px; padding: 16px 20px 16px 15px; border-radius: 18px; background: linear-gradient(120deg, var(--rf), rgba(255, 255, 255, .05));
    box-shadow: inset 0 0 0 1.5px var(--rb), 0 18px 34px -24px var(--r1); }
.wk-rent { --rb: rgba(251, 113, 133, .45); --rf: rgba(225, 29, 72, .26); --r1: #E11D48; --r2: #FB7185; }
.wk-own { --rb: rgba(74, 222, 128, .45); --rf: rgba(22, 163, 74, .26); --r1: #16A34A; --r2: #4ADE80; }
.wk-row-ic { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; background: linear-gradient(145deg, var(--r1), var(--r2)); color: #fff; font-size: 18px; box-shadow: 0 10px 20px -8px var(--r1); }
.wk-row p { margin: 0; color: #E4E6FB; font-size: clamp(16.5px, 1.45vw, 19px); line-height: 1.45; }
.wk-rent b { color: #FDA4AF; }
.wk-own b { color: #86EFAC; }
.wk-copy .wk-last { margin: 0; color: #fff; font-family: var(--display); font-size: clamp(21px, 1.9vw, 26px); font-weight: 700; line-height: 1.35; letter-spacing: -.02em; }
.wk-asset { padding: 0 6px; border-radius: 6px; background: linear-gradient(100deg, #FCD34D, #F59E0B); color: #1A1033; font-weight: 800; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

@media (max-width: 991.98px) {
    .wk { padding: 44px 0 166px; }
    .wk-bg { --kv: 76px; }
    .wk::before { top: -104px; height: 190px; -webkit-mask-size: 100% 104px, 100% 88px; mask-size: 100% 104px, 100% 88px; }
    .wk-photo { top: 460px; width: 100%; }
    .wk-story { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 50px; }
    .wk-art { max-width: 390px; width: 100%; margin: 0 auto; }
}
@media (max-width: 767.98px) {
    .wk { padding: 34px 0 128px; }
    .wk-bg { --kv: 52px; }
    .wk::before { top: -74px; height: 150px; -webkit-mask-size: 100% 74px, 100% 78px; mask-size: 100% 74px, 100% 78px; }

    .wk-photo { top: 34%; bottom: auto; height: 520px; }
    .wk-photo img { opacity: .22; }
    .wk-kick { margin-top: 26px; }
    .wk-title { font-size: 30px; }
    .wk-row { padding: 12px 14px 12px 12px; }
}

/* ==========================================================
   SECTION 28 — THE PAIN: TRAFFIC YOU DON'T CAPTURE DISAPPEARS
   ========================================================== */
.cp { position: relative; z-index: 22; isolation: isolate; overflow-x: clip; padding: 40px 0 152px; color: var(--ink); background: #FFF7F9; }
/* off-centre hill rising out of the dark section, with a rose ribbon hill behind it */
.cp::before { content: ""; position: absolute; left: 0; right: 0; top: -128px; height: 238px; z-index: -3; pointer-events: none;
    background: linear-gradient(90deg, rgba(244, 114, 182, .55), rgba(251, 113, 133, .5) 50%, rgba(192, 132, 252, .5));
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140 L0 70 C 220 40 420 6 700 12 C 1000 18 1220 70 1440 96 L1440 140 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140 L0 70 C 220 40 420 6 700 12 C 1000 18 1220 70 1440 96 L1440 140 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
    -webkit-mask-size: 100% 128px, 100% 112px;
            mask-size: 100% 128px, 100% 112px;
    -webkit-mask-position: 0 0, 0 100%;
            mask-position: 0 0, 0 100%;
    -webkit-mask-repeat: no-repeat, no-repeat;
            mask-repeat: no-repeat, no-repeat; }
.cp-bg { --pv: 110px; position: absolute; top: calc(-1 * var(--pv)); left: 0; right: 0; bottom: 0; z-index: -2; overflow: hidden; pointer-events: none;
    background:
        radial-gradient(ellipse 40% 12% at 62% 3%, #fff, transparent 72%),
        radial-gradient(ellipse 36% 16% at 3% 30%, rgba(244, 63, 94, .08), transparent 70%),
        radial-gradient(ellipse 36% 16% at 97% 64%, rgba(124, 58, 237, .07), transparent 70%),
        linear-gradient(90deg, rgba(225, 29, 72, .055) 1px, transparent 1px) 50% 0 / 64px 64px,
        linear-gradient(0deg, rgba(225, 29, 72, .055) 1px, transparent 1px) 50% 0 / 64px 64px,
        linear-gradient(180deg, #FFEFF4 0%, #FFF7F9 22%, #FFF8FA 100%);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 110 L0 84 C 300 84 520 18 900 18 C 1180 18 1320 58 1440 70 L1440 110 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 110 L0 84 C 300 84 520 18 900 18 C 1180 18 1320 58 1440 70 L1440 110 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
    -webkit-mask-size: 100% var(--pv), 100% calc(100% - var(--pv) + 1px);
            mask-size: 100% var(--pv), 100% calc(100% - var(--pv) + 1px);
    -webkit-mask-position: 0 0, 0 100%;
            mask-position: 0 0, 0 100%;
    -webkit-mask-repeat: no-repeat, no-repeat;
            mask-repeat: no-repeat, no-repeat; }

.cp::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 46% 60% at 50% 55%, #FFF8FA 30%, rgba(255, 248, 250, 0) 100%); }
.cp-deco { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cpd-orb { position: absolute; border-radius: 50%; }
.cpd-orb.o1 { left: -170px; top: 22%; width: 420px; height: 420px; background: radial-gradient(closest-side, rgba(244, 63, 94, .1), transparent 70%); }
.cpd-orb.o2 { right: -170px; top: 58%; width: 420px; height: 420px; background: radial-gradient(closest-side, rgba(22, 163, 74, .09), transparent 70%); }
.cpd-card { position: absolute; display: flex; align-items: center; gap: 11px; width: 196px; padding: 12px 14px; border-radius: 16px; background: #fff;
    box-shadow: 0 24px 40px -24px rgba(10, 22, 51, .45), inset 0 0 0 1.5px rgba(10, 22, 51, .06); animation: floaty 9s ease-in-out infinite; }
.cpd-ic { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; color: #fff; font-size: 15px; }
.cpd-bad .cpd-ic { background: linear-gradient(145deg, #E11D48, #FB7185); }
.cpd-good .cpd-ic { background: linear-gradient(145deg, #16A34A, #4ADE80); }
.cpd-card small { display: block; color: var(--muted); font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cpd-card em { display: block; margin-top: 1px; font-family: var(--display); font-size: 19px; font-style: normal; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.cpd-bad em { color: #E11D48; }
.cpd-good em { color: #16A34A; }
.cpd-card u { display: block; margin-top: 2px; color: var(--muted); font-size: 10.5px; font-weight: 700; text-decoration: none; }
.cpd-card.k1 { left: max(16px, calc(50% - 560px - 220px)); top: 18%; rotate: -3deg; }
.cpd-card.k2 { right: max(16px, calc(50% - 560px - 220px)); top: 34%; rotate: 3deg; animation-delay: -3s; }
@media (max-width: 1599.98px) { .cpd-card { display: none; } }

.cp-head { max-width: 1160px; margin: 0 auto; text-align: center; }
.cp-kick { display: inline-flex; align-items: center; gap: 10px; padding: 9px 20px; border-radius: 999px; background: #fff; color: #E11D48; font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    box-shadow: inset 0 0 0 1.5px rgba(225, 29, 72, .25), 0 12px 24px -14px rgba(225, 29, 72, .6); }
.cp-title { margin: 20px 0 0; color: var(--ink); font-family: var(--display); font-size: clamp(32px, 4vw, 58px); font-weight: 800; line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; }
/* the word itself fades away */
.cp-fade { background: linear-gradient(90deg, #E11D48 0%, #F43F5E 45%, rgba(244, 63, 94, .22) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

.cp-flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 14px; margin-top: 34px; }
.cp-flow-step { display: inline-flex; align-items: center; gap: 10px; padding: 9px 20px 9px 9px; border-radius: 999px; background: #fff; color: var(--ink); font-size: clamp(16px, 1.5vw, 19px); font-weight: 800;
    box-shadow: 0 16px 30px -22px rgba(10, 22, 51, .5), inset 0 0 0 1.5px rgba(10, 22, 51, .07); }
.cp-flow-step i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(145deg, #0B5CFF, #19D3FF); color: #fff; font-size: 14px; }
.cp-flow-step:nth-of-type(2) i { background: linear-gradient(145deg, #7C3AED, #C084FC); }
.cp-flow-gone { background: transparent; color: #9AA3B8; box-shadow: inset 0 0 0 2px rgba(154, 163, 184, .45); outline: 2px dashed transparent; }
.cp-flow-gone i { background: linear-gradient(145deg, #E11D48, #FB7185); opacity: .9; }
.cp-flow-arr { color: #F43F5E; font-size: 20px; }
.cp-sub { margin: 24px 0 0; color: var(--ink); font-family: var(--display); font-size: clamp(20px, 2vw, 27px); font-weight: 700; line-height: 1.35; letter-spacing: -.02em; text-wrap: balance; }
.cp-sub span { padding: 0 4px; background: linear-gradient(180deg, transparent 60%, rgba(244, 63, 94, .2) 60%, rgba(244, 63, 94, .2) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* table */
.cp-tbl { max-width: 1160px; margin: 56px auto 0; padding: 10px; border-radius: 28px; background: #fff; box-shadow: 0 40px 70px -46px rgba(10, 22, 51, .45), inset 0 0 0 1.5px rgba(10, 22, 51, .06); }
.cp-tr { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 20px; padding: 14px 20px; border-radius: 18px; }
.cp-tr + .cp-tr:not(.cp-win) { background: linear-gradient(rgba(10, 22, 51, .08), rgba(10, 22, 51, .08)) 20px 0 / calc(100% - 40px) 1px no-repeat; }
.cp-th { padding: 14px 20px 12px; color: var(--muted); font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.cp-what { display: flex; align-items: center; gap: 14px; }
.cp-what b { color: var(--ink); font-family: var(--display); font-size: clamp(17px, 1.6vw, 20px); font-weight: 800; letter-spacing: -.02em; }
.cp-ic { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; background: linear-gradient(145deg, var(--a), var(--a2)); color: #fff; font-size: 18px; box-shadow: 0 12px 20px -10px var(--a); }
.cp-next { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cp-next p { margin: 0; color: #46536E; font-size: clamp(15.5px, 1.4vw, 17.5px); line-height: 1.45; }
.cp-chip { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-style: normal; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.cp-warn { background: #FFF1E0; color: #C2410C; }
.cp-bad { background: #FFE4E9; color: #BE123C; }
.cp-good { background: linear-gradient(120deg, #16A34A, #22C55E); color: #fff; box-shadow: 0 10px 20px -10px #16A34A; }
.cp-win { margin-top: 12px; padding: 22px 20px; background: linear-gradient(110deg, #DCFCE7, #ECFDF5 55%, #F0FDF4);
    box-shadow: inset 0 0 0 2.5px rgba(22, 163, 74, .5), 0 22px 40px -26px rgba(22, 163, 74, .85); }
.cp-win .cp-what b { font-size: 1.1em; }
.cp-win .cp-ic { width: 52px; height: 52px; font-size: 20px; }
.cp-win .cp-next p { color: #14532D; font-size: clamp(16.5px, 1.5vw, 19px); }
.cp-win .cp-next p b { color: #15803D; font-weight: 800; }
.cp-win .cp-chip { padding: 9px 16px; font-size: 13px; }

/* capture chain */
.cp-chain { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; max-width: 1160px; margin: 76px auto 0; }
/* dotted progress track running behind the four cards */
.cp-chain::before { content: ""; position: absolute; left: 6%; right: 6%; top: 104px; height: 3px; background: radial-gradient(circle, rgba(225, 29, 72, .35) 1.5px, transparent 2px) 0 50% / 12px 3px repeat-x; }
.cp-step { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 26px; background: #fff;
    box-shadow: 0 34px 56px -38px color-mix(in srgb, var(--a) 60%, rgba(10, 22, 51, .6)), inset 0 0 0 1.5px color-mix(in srgb, var(--a) 16%, #fff); }
.cp-step-top { position: relative; display: grid; place-items: center; height: 214px; margin: 8px 8px 0; border-radius: 20px;
    background:
        radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)) 50% 58% / 70% 70% no-repeat,
        radial-gradient(color-mix(in srgb, var(--a) 22%, transparent) 1.2px, transparent 1.6px) 0 0 / 16px 16px,
        linear-gradient(160deg, color-mix(in srgb, var(--a) 20%, #fff), color-mix(in srgb, var(--a2) 10%, #fff)); }
.cp-step-art { position: relative; width: 176px; height: auto; margin-top: 10px; filter: drop-shadow(0 18px 20px color-mix(in srgb, var(--a) 40%, rgba(10, 22, 51, .35))); }
.cp-step-n { position: absolute; top: 12px; left: 12px; z-index: 1; padding: 5px 12px; border-radius: 999px; background: linear-gradient(120deg, var(--a), var(--a2)); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 8px 16px -8px var(--a); }
.cp-step:not(:last-child)::after { content: "\f061"; position: absolute; right: -27px; top: 90px; z-index: 3; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(145deg, #E11D48, #FB7185); color: #fff; font-family: "Font Awesome 6 Free"; font-size: 12px; font-weight: 900; box-shadow: 0 0 0 5px #FFF8FA, 0 10px 18px -8px rgba(225, 29, 72, .7); }
.cp-chain > .cp-step { overflow: visible; }
.cp-step-body { padding: 18px 20px 24px; text-align: center; }
.cp-step-from { display: block; color: var(--muted); font-size: 14.5px; font-weight: 700; }
.cp-step-to { display: block; margin-top: 4px; color: color-mix(in srgb, var(--a) 82%, #000); font-family: var(--display); font-size: clamp(21px, 1.9vw, 26px); font-weight: 800; line-height: 1.12; letter-spacing: -.03em; }
.cp-step-gold { background: linear-gradient(170deg, #FFFBEF, #FFF1CF); box-shadow: 0 34px 60px -30px rgba(217, 119, 6, .6), inset 0 0 0 2px rgba(245, 158, 11, .55); }
.cp-step-gold .cp-step-top { background:
        radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)) 50% 58% / 70% 70% no-repeat,
        repeating-conic-gradient(from 0deg at 50% 60%, rgba(251, 191, 36, .22) 0deg 8deg, transparent 8deg 20deg),
        linear-gradient(160deg, #FFE7A8, #FFF4D6); }
.cp-step-gold .cp-step-to { color: #B45309; }

.cp-close { max-width: 1000px; margin: 64px auto 0; text-align: center; font-family: var(--display); font-size: clamp(28px, 3.4vw, 48px); font-weight: 800; line-height: 1.15; letter-spacing: -.04em; text-wrap: balance; }
.cp-close span { color: #9AA3B8; }
.cp-close b { background: linear-gradient(100deg, #16A34A, #0D9488 50%, #0B5CFF); -webkit-background-clip: text; background-clip: text; color: transparent; }

@media (max-width: 991.98px) {
    .cp { padding: 36px 0 132px; }
    .cp-bg { --pv: 76px; }
    .cp::before { top: -100px; height: 190px; -webkit-mask-size: 100% 100px, 100% 92px; mask-size: 100% 100px, 100% 92px; }
    .cp-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
    .cp-chain::before, .cp-step:not(:last-child)::after { display: none; }
}
@media (max-width: 767.98px) {
    .cp { padding: 28px 0 104px; }
    .cp-bg { --pv: 50px; }
    .cp::before { top: -70px; height: 150px; -webkit-mask-size: 100% 70px, 100% 82px; mask-size: 100% 70px, 100% 82px; }
    .cp-title { font-size: 32px; }
    .cp-flow { flex-direction: column; gap: 2px; margin-top: 22px; }
    .cp-flow-arr { rotate: 90deg; font-size: 13px; }
    .cp-flow-step { padding: 7px 16px 7px 7px; font-size: 15.5px; }
    .cp-flow-step i { width: 28px; height: 28px; font-size: 12px; }
    .cp-tbl { padding: 6px; border-radius: 22px; }
    .cp-th { display: none; }
    .cp-th + .cp-tr { background: none; }
    .cp-tr { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; }
    /* an inline chip does not fit: row inner width is 311px, and description + chip
       measures 360 / 283 / 417 / 445 across the four rows. it stays on its own line
       and the row is tightened instead. */
    .cp-next { flex-direction: column; align-items: flex-start; gap: 6px; }
    .cp-tr { gap: 8px; padding: 12px 14px; }
    .cp-ic { width: 40px; height: 40px; font-size: 16px; }
    .cp-chip { padding: 5px 11px; font-size: 11.5px; }
    .cp-win { padding: 16px 14px; }
    .cp-win .cp-ic { width: 46px; height: 46px; }
    .cp-win .cp-chip { padding: 7px 13px; font-size: 12px; }
    .cp-chain { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .cp-step { flex-direction: row; align-items: center; }
    .cp-step-top { width: 132px; height: 132px; flex: none; margin: 8px; }
    .cp-step-art { width: 104px; margin-top: 12px; }
    .cp-step-n { top: 7px; left: 7px; padding: 3px 8px; font-size: 9.5px; }
    .cp-step-body { padding: 12px 16px 12px 6px; text-align: left; }
}

/* ==========================================================
   SECTION 29 — THE LOCAL MEDIA FLYWHEEL
   ========================================================== */
.fw { position: relative; z-index: 23; isolation: isolate; overflow-x: clip; padding: 60px 0 150px; color: var(--ink); background: #F1F8F6; }
.fw::before { content: ""; position: absolute; left: 0; right: 0; top: -120px; height: 230px; z-index: -3; pointer-events: none;
    background: linear-gradient(90deg, rgba(45, 212, 191, .45), rgba(16, 185, 129, .35) 50%, rgba(56, 189, 248, .4));
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 130' preserveAspectRatio='none'%3E%3Cpath d='M0 130 L0 60 C 300 30 640 44 960 66 C 1180 80 1320 40 1440 10 L1440 130 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 130' preserveAspectRatio='none'%3E%3Cpath d='M0 130 L0 60 C 300 30 640 44 960 66 C 1180 80 1320 40 1440 10 L1440 130 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
    -webkit-mask-size: 100% 120px, 100% 112px;
            mask-size: 100% 120px, 100% 112px;
    -webkit-mask-position: 0 0, 0 100%;
            mask-position: 0 0, 0 100%;
    -webkit-mask-repeat: no-repeat, no-repeat;
            mask-repeat: no-repeat, no-repeat; }
.fw-bg { --fv: 110px; position: absolute; top: calc(-1 * var(--fv)); left: 0; right: 0; bottom: 0; z-index: -2; overflow: hidden; pointer-events: none;
    background:
        radial-gradient(ellipse 40% 12% at 30% 4%, #fff, transparent 72%),
        radial-gradient(ellipse 36% 16% at 2% 40%, rgba(13, 148, 136, .09), transparent 70%),
        radial-gradient(ellipse 36% 16% at 98% 70%, rgba(124, 58, 237, .06), transparent 70%),
        radial-gradient(rgba(13, 148, 136, .13) 1.2px, transparent 1.6px) 0 0 / 24px 24px,
        linear-gradient(180deg, #E6F5F1 0%, #F1F8F6 20%, #F4FAF8 100%);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 110 L0 22 C 380 22 620 92 1000 88 C 1220 86 1340 64 1440 56 L1440 110 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 110 L0 22 C 380 22 620 92 1000 88 C 1220 86 1340 64 1440 56 L1440 110 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
    -webkit-mask-size: 100% var(--fv), 100% calc(100% - var(--fv) + 1px);
            mask-size: 100% var(--fv), 100% calc(100% - var(--fv) + 1px);
    -webkit-mask-position: 0 0, 0 100%;
            mask-position: 0 0, 0 100%;
    -webkit-mask-repeat: no-repeat, no-repeat;
            mask-repeat: no-repeat, no-repeat; }
/* keep the dot texture off the reading column */
.fw::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 46% 62% at 50% 52%, #F3F9F7 35%, rgba(243, 249, 247, 0) 100%); }

.fw-deco { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.fwd-orb { position: absolute; border-radius: 50%; }
.fwd-orb.o1 { left: -170px; top: 30%; width: 420px; height: 420px; background: radial-gradient(closest-side, rgba(13, 148, 136, .1), transparent 70%); }
.fwd-orb.o2 { right: -170px; top: 60%; width: 420px; height: 420px; background: radial-gradient(closest-side, rgba(11, 92, 255, .07), transparent 70%); }
.fwd-card { position: absolute; display: flex; align-items: center; gap: 11px; width: 204px; padding: 12px 14px; border-radius: 16px; background: #fff;
    box-shadow: 0 24px 40px -24px rgba(10, 22, 51, .45), inset 0 0 0 1.5px rgba(10, 22, 51, .06); animation: floaty 9s ease-in-out infinite; }
.fwd-ic { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; background: linear-gradient(145deg, #0D9488, #2DD4BF); color: #fff; font-size: 15px; }
.fwd-card small { display: block; color: var(--muted); font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.fwd-card em { display: block; margin-top: 1px; color: #0F766E; font-family: var(--display); font-size: 18px; font-style: normal; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.fwd-card u { display: block; margin-top: 2px; color: var(--muted); font-size: 10.5px; font-weight: 700; text-decoration: none; }
.fwd-card.k1 { left: max(16px, calc(50% - 570px - 226px)); top: 22%; rotate: -3deg; }
.fwd-card.k2 { right: max(16px, calc(50% - 570px - 226px)); top: 36%; rotate: 3deg; animation-delay: -3s; }
@media (max-width: 1619.98px) { .fwd-card { display: none; } }

.fw-head { max-width: 1000px; margin: 0 auto; text-align: center; }
.fw-kick { display: inline-flex; align-items: center; gap: 10px; padding: 9px 20px; border-radius: 999px; background: #fff; color: #0F766E; font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    box-shadow: inset 0 0 0 1.5px rgba(13, 148, 136, .25), 0 12px 24px -14px rgba(13, 148, 136, .6); }
.fw-kick i { color: #0D9488; }
.fw-title { margin: 20px 0 0; color: var(--ink); font-family: var(--display); font-size: clamp(32px, 4vw, 56px); font-weight: 800; line-height: 1.1; letter-spacing: -.04em; text-wrap: balance; }
.fw-hl { background: linear-gradient(100deg, #0D9488, #0B5CFF); -webkit-background-clip: text; background-clip: text; color: transparent; }

.fw-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 56px; max-width: 1140px; margin: 56px auto 0; }
.fw-art { position: relative; display: grid; place-items: center; margin: 0; }
.fw-art-glow { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(45, 212, 191, .28), rgba(11, 92, 255, .1) 60%, transparent 76%); }
.fw-art img { position: relative; z-index: 1; width: 100%; height: auto; filter: drop-shadow(0 30px 36px rgba(10, 22, 51, .2)); }
.fw-art-fall { display: none; }
.fw-art-empty { aspect-ratio: 1 / 1; }
.fw-art-empty .fw-art-fall { position: relative; z-index: 1; display: grid; place-items: center; width: 60%; aspect-ratio: 1; border-radius: 50%; background: #fff; color: #0D9488; font-size: 80px;
    box-shadow: 0 0 0 24px rgba(13, 148, 136, .07), 0 30px 50px -30px rgba(10, 22, 51, .4); }

.fw-start { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; padding: 10px 20px 10px 10px; border-radius: 999px; background: linear-gradient(120deg, #0D9488, #14B8A6); color: #fff; font-family: var(--display); font-size: clamp(17px, 1.6vw, 20px); font-weight: 800; letter-spacing: -.01em;
    box-shadow: 0 16px 30px -16px rgba(13, 148, 136, .8); }
.fw-start span { padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .22); font-family: inherit; font-size: .78em; letter-spacing: .02em; }
.fw-rows { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.fw-row { display: flex; align-items: center; gap: 16px; padding: 14px 18px 14px 14px; border-radius: 18px; background: #fff; box-shadow: 0 18px 34px -28px rgba(10, 22, 51, .45), inset 0 0 0 1.5px rgba(10, 22, 51, .06); }
.fw-ic { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 15px; background: linear-gradient(145deg, var(--a), var(--a2)); color: #fff; font-size: 19px; box-shadow: 0 12px 20px -10px var(--a); }
.fw-row b { display: block; color: var(--ink); font-size: clamp(16.5px, 1.45vw, 18.5px); font-weight: 800; line-height: 1.35; }
.fw-then { display: flex; align-items: center; gap: 8px; margin-top: 3px; color: #46536E; font-size: clamp(15.5px, 1.35vw, 17px); font-weight: 600; line-height: 1.4; }
.fw-then i { color: var(--a); font-size: 13px; }

/* milestones */
.fw-grow { max-width: 1140px; margin: 70px auto 0; padding: 30px 36px 26px; border-radius: 26px; background: #fff; text-align: center; box-shadow: 0 34px 60px -44px rgba(10, 22, 51, .45), inset 0 0 0 1.5px rgba(10, 22, 51, .06); }
.fw-label { margin: 0; color: #0F766E; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.fw-miles { position: relative; display: flex; justify-content: space-between; margin: 22px 0 0; padding: 0; list-style: none; }
.fw-miles::before { content: ""; position: absolute; left: 7%; right: 7%; top: 14px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #99F6E4, #14B8A6 50%, #0B5CFF); }
.fw-miles li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1; }
.fw-dot { width: calc(18px + var(--i) * 3px); height: calc(18px + var(--i) * 3px); margin-top: calc(7px - var(--i) * 1.5px); border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 4px #14B8A6, 0 6px 12px -4px rgba(13, 148, 136, .5); }
.fw-miles li:last-child .fw-dot { background: #0B5CFF; box-shadow: 0 0 0 5px rgba(11, 92, 255, .18), 0 8px 16px -4px rgba(11, 92, 255, .6); }
.fw-miles b { color: var(--ink); font-family: var(--display); font-size: calc(18px + var(--i) * 2.5px); font-weight: 800; letter-spacing: -.02em; }
.fw-miles li:last-child b { color: #0B5CFF; }
.fw-miles-cap { margin: 6px 0 0; color: var(--muted); font-size: 15px; font-weight: 700; }

/* value chain */
.fw-chain { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 9px; max-width: 860px; margin: 40px auto 0; }
.fw-chip { padding: 10px 16px; border-radius: 999px; background: #fff; color: var(--ink); font-size: clamp(15px, 1.2vw, 17px); font-weight: 800; box-shadow: 0 12px 24px -18px rgba(10, 22, 51, .5), inset 0 0 0 1.5px rgba(13, 148, 136, .22); }
.fw-chip-gold { background: linear-gradient(120deg, #F59E0B, #FBBF24); color: #fff; box-shadow: 0 14px 26px -12px rgba(217, 119, 6, .7); }
.fw-link { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.fw-arr { color: #14B8A6; font-size: 16px; }

.fw-close { max-width: 900px; margin: 52px auto 0; color: var(--ink); font-family: var(--display); font-size: clamp(24px, 2.6vw, 36px); font-weight: 800; line-height: 1.25; letter-spacing: -.03em; text-align: center; text-wrap: balance; }
.fw-close b { color: #0F766E; }

@media (max-width: 991.98px) {
    .fw { padding: 50px 0 120px; }
    .fw-bg { --fv: 76px; }
    .fw::before { top: -90px; height: 180px; -webkit-mask-size: 100% 90px, 100% 92px; mask-size: 100% 90px, 100% 92px; }
    .fw-main { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .fw-art { max-width: 460px; width: 100%; margin: 0 auto; }
}
@media (max-width: 767.98px) {
    .fw { padding: 40px 0 96px; }
    .fw-bg { --fv: 50px; }
    .fw::before { top: -64px; height: 140px; -webkit-mask-size: 100% 64px, 100% 78px; mask-size: 100% 64px, 100% 78px; }
    .fw-title { font-size: 31px; }
    .fw-start { border-radius: 20px; }
    .fw-row { align-items: flex-start; }
    .fw-then { align-items: flex-start; }
    .fw-then i { margin-top: 5px; }
    .fw-grow { padding: 24px 12px 20px; }
    .fw-miles b { font-size: calc(13px + var(--i) * 1.5px); }
    .fw-chain { gap: 8px; }
    .fw-chip { padding: 8px 14px; font-size: 15px; }
    .fw-arr { font-size: 13px; }
}

/* ==========================================================
   SECTION 30 — THE HIDDEN VALUE OF AN AUDIENCE YOU OWN
   ========================================================== */
.hv { position: relative; z-index: 24; isolation: isolate; overflow-x: clip; padding: 70px 0 160px; color: #E6ECFA; background: #0A1633; }
.hv::before { content: ""; position: absolute; left: 0; right: 0; top: -124px; height: 234px; z-index: -3; pointer-events: none;
    background: linear-gradient(90deg, rgba(251, 191, 36, .55), rgba(45, 212, 191, .45) 50%, rgba(251, 191, 36, .55));
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 130' preserveAspectRatio='none'%3E%3Cpath d='M0 130 L0 40 C 200 80 420 90 720 44 C 1020 0 1240 10 1440 50 L1440 130 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 130' preserveAspectRatio='none'%3E%3Cpath d='M0 130 L0 40 C 200 80 420 90 720 44 C 1020 0 1240 10 1440 50 L1440 130 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
    -webkit-mask-size: 100% 124px, 100% 112px;
            mask-size: 100% 124px, 100% 112px;
    -webkit-mask-position: 0 0, 0 100%;
            mask-position: 0 0, 0 100%;
    -webkit-mask-repeat: no-repeat, no-repeat;
            mask-repeat: no-repeat, no-repeat; }
.hv-bg { --hv: 110px; position: absolute; top: calc(-1 * var(--hv)); left: 0; right: 0; bottom: 0; z-index: -2; overflow: hidden; pointer-events: none;
    background:
        radial-gradient(ellipse 44% 16% at 50% 12%, rgba(251, 191, 36, .16), transparent 72%),
        radial-gradient(ellipse 36% 20% at 2% 50%, rgba(11, 92, 255, .22), transparent 70%),
        radial-gradient(ellipse 36% 20% at 98% 78%, rgba(124, 58, 237, .2), transparent 70%),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 50% 0 / 72px 72px,
        linear-gradient(0deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 50% 0 / 72px 72px,
        linear-gradient(180deg, #13224A 0%, #0C1735 40%, #0A1633 100%);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 110 L0 70 C 180 30 380 24 560 56 C 680 78 760 78 880 56 C 1060 24 1260 30 1440 70 L1440 110 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 110 L0 70 C 180 30 380 24 560 56 C 680 78 760 78 880 56 C 1060 24 1260 30 1440 70 L1440 110 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
    -webkit-mask-size: 100% var(--hv), 100% calc(100% - var(--hv) + 1px);
            mask-size: 100% var(--hv), 100% calc(100% - var(--hv) + 1px);
    -webkit-mask-position: 0 0, 0 100%;
            mask-position: 0 0, 0 100%;
    -webkit-mask-repeat: no-repeat, no-repeat;
            mask-repeat: no-repeat, no-repeat; }

.hv-deco { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hvd-orb { position: absolute; border-radius: 50%; }
.hvd-orb.o1 { left: -180px; top: 20%; width: 440px; height: 440px; background: radial-gradient(closest-side, rgba(251, 191, 36, .1), transparent 70%); }
.hvd-orb.o2 { right: -180px; top: 55%; width: 440px; height: 440px; background: radial-gradient(closest-side, rgba(45, 212, 191, .09), transparent 70%); }
.hvd-card { position: absolute; display: flex; align-items: center; gap: 11px; width: 204px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .07);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .13), 0 26px 44px -24px rgba(0, 0, 0, .9); animation: floaty 9s ease-in-out infinite; }
.hvd-ic { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; background: linear-gradient(145deg, #D97706, #FBBF24); color: #fff; font-size: 15px; }
.hvd-card small { display: block; color: #9FB0D6; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hvd-card em { display: block; margin-top: 1px; color: #FCD34D; font-family: var(--display); font-size: 19px; font-style: normal; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.hvd-card u { display: block; margin-top: 2px; color: #9FB0D6; font-size: 10.5px; font-weight: 700; text-decoration: none; }
.hvd-card.k1 { left: max(16px, calc(50% - 570px - 226px)); top: 16%; rotate: -3deg; }
.hvd-card.k2 { right: max(16px, calc(50% - 570px - 226px)); top: 30%; rotate: 3deg; animation-delay: -3s; }
@media (max-width: 1619.98px) { .hvd-card { display: none; } }

.hv-head { max-width: 1000px; margin: 0 auto; text-align: center; }
.hv-kick { display: inline-flex; align-items: center; gap: 10px; padding: 9px 20px; border-radius: 999px; background: rgba(251, 191, 36, .12); color: #FCD34D; font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; box-shadow: inset 0 0 0 1.5px rgba(252, 211, 77, .45); }
.hv-title { margin: 20px 0 0; color: #fff; font-family: var(--display); font-size: clamp(32px, 4vw, 56px); font-weight: 800; line-height: 1.1; letter-spacing: -.04em; text-wrap: balance; }
.hv-hl { background: linear-gradient(100deg, #FDE68A, #FBBF24 55%, #F59E0B); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hv-lead { margin: 22px 0 0; color: #C6D1EC; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.6; }
.hv-lead b { color: #fff; }

.hv-eq { display: flex; align-items: stretch; justify-content: center; gap: 16px; max-width: 980px; margin: 40px auto 0; }
.hv-eq-cell { display: flex; flex-direction: column; justify-content: center; flex: 1; padding: 22px 16px; border-radius: 22px; background: rgba(255, 255, 255, .06); text-align: center; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12); }
.hv-eq-cell b { color: #fff; font-family: var(--display); font-size: clamp(34px, 3.8vw, 52px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.hv-eq-cell small { margin-top: 8px; color: #9FB0D6; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hv-eq-total { flex: 1.35; background: linear-gradient(150deg, rgba(251, 191, 36, .18), rgba(255, 255, 255, .04)); box-shadow: inset 0 0 0 2px rgba(252, 211, 77, .6), 0 30px 60px -30px rgba(251, 191, 36, .45); }
.hv-eq-total b { background: linear-gradient(100deg, #FDE68A, #FBBF24 60%, #F59E0B); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: clamp(40px, 4.6vw, 64px); }
.hv-eq-total small { color: #FCD34D; }
.hv-eq-op { display: grid; place-items: center; align-self: center; width: 46px; height: 46px; flex: none; border-radius: 50%; background: #fff; color: #0A1633; font-family: var(--display); font-size: 26px; font-weight: 800; }

.hv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; max-width: 1140px; margin: 44px auto 0; }
.hv-panel { padding: 28px 30px; border-radius: 26px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .1); }
.hv-panel-t { margin: 0 0 18px; color: #fff; font-family: var(--display); font-size: clamp(20px, 1.9vw, 24px); font-weight: 800; letter-spacing: -.02em; }
.hv-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.hv-list li { display: flex; align-items: center; gap: 14px; color: #DCE4F7; font-size: clamp(16px, 1.4vw, 18px); font-weight: 600; line-height: 1.4; }
.hv-ic { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px; background: linear-gradient(145deg, var(--a), var(--a2)); color: #fff; font-size: 17px; box-shadow: 0 10px 20px -8px var(--a); }
.hv-ladder { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.hv-lrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hv-lrow span { color: #C6D1EC; font-size: clamp(16px, 1.4vw, 18px); font-weight: 600; }
.hv-lrow span b { color: #fff; font-weight: 800; }
.hv-lrow em { color: #FCD34D; font-family: var(--display); font-size: clamp(20px, 1.9vw, 26px); font-style: normal; font-weight: 800; letter-spacing: -.02em; }
.hv-bar { display: block; height: 10px; margin-top: 8px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .08); }
.hv-bar i { display: block; width: max(var(--w), 3%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #F59E0B, #FDE68A); }

.hv-close { max-width: 900px; margin: 56px auto 0; color: #fff; font-family: var(--display); font-size: clamp(26px, 3vw, 40px); font-weight: 800; line-height: 1.2; letter-spacing: -.03em; text-align: center; text-wrap: balance; }
.hv-close2 { max-width: 900px; margin: 14px auto 0; color: #C6D1EC; font-family: var(--display); font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; line-height: 1.25; letter-spacing: -.02em; text-align: center; text-wrap: balance; }
.hv-close2 b { color: #FCD34D; font-weight: 800; }
.hv-close span { color: #9FB0D6; text-decoration: line-through; text-decoration-color: rgba(251, 113, 133, .8); text-decoration-thickness: 3px; }

@media (max-width: 991.98px) {
    .hv { padding: 56px 0 126px; }
    .hv-bg { --hv: 76px; }
    .hv::before { top: -94px; height: 186px; -webkit-mask-size: 100% 94px, 100% 94px; mask-size: 100% 94px, 100% 94px; }
    .hv-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 767.98px) {
    .hv { padding: 44px 0 100px; }
    .hv-bg { --hv: 50px; }
    .hv::before { top: -66px; height: 144px; -webkit-mask-size: 100% 66px, 100% 80px; mask-size: 100% 66px, 100% 80px; }
    .hv-title { font-size: 31px; }
    .hv-lead br { display: none; }
    .hv-eq { flex-wrap: wrap; gap: 10px; }
    .hv-eq-cell { flex: 1 1 calc(50% - 40px); padding: 16px 10px; }
    .hv-eq-op { width: 34px; height: 34px; font-size: 20px; }
    .hv-eq > .hv-eq-op:nth-of-type(2) { margin: 0 calc(50% - 17px); }
    .hv-eq-total { flex-basis: 100%; }
    .hv-panel { padding: 22px 18px; }
}

/* ==========================================================
   SECTION 31 — LOCAL AUDIENCES DON'T NEED TO BE MASSIVE
   ========================================================== */
.pl { position: relative; z-index: 25; isolation: isolate; overflow-x: clip; padding: 64px 0 150px; color: var(--ink); }
.pl::before { content: ""; position: absolute; left: 0; right: 0; top: -124px; height: 234px; z-index: -3; pointer-events: none; background: linear-gradient(90deg, rgba(167, 139, 250, .55), rgba(96, 165, 250, .45) 50%, rgba(167, 139, 250, .55));
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 124' preserveAspectRatio='none'%3E%3Cpath d='M0 124 L0 70 C 300 50 540 6 820 20 C 1080 34 1260 70 1440 80 L1440 124 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 124' preserveAspectRatio='none'%3E%3Cpath d='M0 124 L0 70 C 300 50 540 6 820 20 C 1080 34 1260 70 1440 80 L1440 124 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
    -webkit-mask-size: 100% 124px, 100% 112px; mask-size: 100% 124px, 100% 112px;
    -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
    -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat; }
.pl-bg { --lv: 110px; position: absolute; top: calc(-1 * var(--lv)); left: 0; right: 0; bottom: 0; z-index: -2; overflow: hidden; pointer-events: none;
    background: radial-gradient(ellipse 40% 12% at 70% 4%, #fff, transparent 72%), radial-gradient(ellipse 36% 18% at 2% 40%, rgba(124, 58, 237, .08), transparent 70%), radial-gradient(ellipse 36% 18% at 98% 70%, rgba(13, 148, 136, .08), transparent 70%), linear-gradient(90deg, rgba(79, 70, 229, .05) 1px, transparent 1px) 50% 0 / 64px 64px, linear-gradient(0deg, rgba(79, 70, 229, .05) 1px, transparent 1px) 50% 0 / 64px 64px, linear-gradient(180deg, #ECEBFF 0%, #F5F4FF 22%, #F7F6FF 100%);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 110 L0 30 C 260 30 480 90 760 84 C 1040 78 1200 40 1440 36 L1440 110 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 110 L0 30 C 260 30 480 90 760 84 C 1040 78 1200 40 1440 36 L1440 110 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
    -webkit-mask-size: 100% var(--lv), 100% calc(100% - var(--lv) + 1px); mask-size: 100% var(--lv), 100% calc(100% - var(--lv) + 1px);
    -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
    -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat; }
.pl::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 46% 62% at 50% 52%, #F7F6FF 35%, rgba(247, 246, 255, 0) 100%); }
.pl-deco { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.pld-orb { position: absolute; border-radius: 50%; }
.pld-card { position: absolute; display: flex; align-items: center; gap: 11px; width: 204px; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: 0 24px 40px -24px rgba(10, 22, 51, .45), inset 0 0 0 1.5px rgba(10, 22, 51, .06); animation: floaty 9s ease-in-out infinite; }
.pld-ic { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; background: linear-gradient(145deg, #7C3AED, #C084FC); color: #fff; font-size: 15px; }
.pld-card small { display: block; color: var(--muted); font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pld-card em { display: block; margin-top: 1px; color: #6D28D9; font-family: var(--display); font-size: 19px; font-style: normal; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.pld-card u { display: block; margin-top: 2px; color: var(--muted); font-size: 10.5px; font-weight: 700; text-decoration: none; }
.pld-card.k1 { left: max(16px, calc(50% - 570px - 226px)); top: 14%; rotate: -3deg; }
.pld-card.k2 { right: max(16px, calc(50% - 570px - 226px)); top: 28%; rotate: 3deg; animation-delay: -3s; }
@media (max-width: 1619.98px) { .pld-card { display: none; } }
.pld-orb.o1 { left: -170px; top: 30%; width: 420px; height: 420px; background: radial-gradient(closest-side, rgba(124, 58, 237, .09), transparent 70%); }
.pld-orb.o2 { right: -170px; top: 62%; width: 420px; height: 420px; background: radial-gradient(closest-side, rgba(13, 148, 136, .08), transparent 70%); }
.pl-head { max-width: 1000px; margin: 0 auto; text-align: center; }
.pl-kick { display: inline-flex; align-items: center; gap: 10px; padding: 9px 20px; border-radius: 999px; background: #fff; color: #6D28D9; font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; box-shadow: inset 0 0 0 1.5px rgba(124, 58, 237, .25), 0 12px 24px -14px rgba(124, 58, 237, .6); }
.pl-title { margin: 20px 0 0; color: var(--ink); font-family: var(--display); font-size: clamp(32px, 4vw, 56px); font-weight: 800; line-height: 1.1; letter-spacing: -.04em; text-wrap: balance; }
.pl-hl { background: linear-gradient(100deg, #7C3AED, #0D9488); -webkit-background-clip: text; background-clip: text; color: transparent; }

.pl-vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1160px; margin: 50px auto 0; }
.pl-side { position: relative; padding: 28px 30px; border-radius: 24px; background: #fff; box-shadow: 0 30px 50px -40px rgba(10, 22, 51, .45), inset 0 0 0 1.5px rgba(10, 22, 51, .07); }
.pl-side-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; font-size: 22px; color: #fff; }
.pl-side-tag { display: block; margin-top: 16px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pl-side p { margin: 8px 0 0; color: #46536E; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.55; }
.pl-side p b { color: var(--ink); }
.pl-nat .pl-side-ic { background: linear-gradient(145deg, #94A3B8, #CBD5E1); }
.pl-nat .pl-side-tag { color: #64748B; }
.pl-loc { background: linear-gradient(160deg, #F4F0FF, #fff 70%); box-shadow: 0 30px 56px -34px rgba(124, 58, 237, .5), inset 0 0 0 2px rgba(124, 58, 237, .35); }
.pl-loc .pl-side-ic { background: linear-gradient(145deg, #7C3AED, #C084FC); box-shadow: 0 12px 22px -10px #7C3AED; }
.pl-loc .pl-side-tag { color: #6D28D9; }

.pl-ic { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; background: linear-gradient(145deg, var(--a), var(--a2)); color: #fff; font-size: 18px; box-shadow: 0 12px 20px -10px var(--a); }

.pl-state { max-width: 1160px; margin: 60px auto 0; padding: 40px 30px; border-radius: 30px; text-align: center; background: linear-gradient(120deg, #6D28D9, #7C3AED 45%, #0D9488); color: #fff; box-shadow: 0 40px 70px -40px rgba(109, 40, 217, .75); }
.pl-state-a { margin: 0; color: rgba(255, 255, 255, .72); font-size: clamp(18px, 1.8vw, 22px); font-weight: 700; text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .6); text-decoration-thickness: 2px; }
.pl-state-b { margin: 12px 0 0; font-family: var(--display); font-size: clamp(30px, 3.6vw, 50px); font-weight: 800; line-height: 1.1; letter-spacing: -.04em; text-wrap: balance; }
.pl-state-b span { color: #FDE68A; }
.pl-state-c { display: inline-block; margin: 18px 0 0; padding: 8px 20px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: clamp(16px, 1.5vw, 19px); font-weight: 800; }

.pl-close { max-width: 900px; margin: 44px auto 0; color: #46536E; font-size: clamp(18px, 1.8vw, 23px); font-weight: 600; line-height: 1.55; text-align: center; text-wrap: balance; }
.pl-close b { color: var(--ink); }

@media (max-width: 991.98px) {
    .pl { padding: 56px 0 120px; }
    .pl-bg { --lv: 76px; }
    .pl::before { top: -94px; height: 186px; -webkit-mask-size: 100% 94px, 100% 94px; mask-size: 100% 94px, 100% 94px; }
}
@media (max-width: 767.98px) {
    .pl { padding: 44px 0 96px; }
    .pl-bg { --lv: 50px; }
    .pl::before { top: -66px; height: 144px; -webkit-mask-size: 100% 66px, 100% 80px; mask-size: 100% 66px, 100% 80px; }
    .pl-title { font-size: 31px; }
    .pl-vs { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .pl-side { padding: 22px 20px; }
    .pl-state { padding: 30px 18px; border-radius: 24px; }
}

/* ==========================================================
   SECTION 32 — EVERY MONTH YOU WAIT (urgency + final offer)
   ========================================================== */
.wt { position: relative; z-index: 26; isolation: isolate; overflow-x: clip; padding: 38px 0 130px; color: var(--ink); }
.wt::before { content: ""; position: absolute; left: 0; right: 0; top: -124px; height: 234px; z-index: -3; pointer-events: none; background: linear-gradient(90deg, rgba(251, 113, 133, .5), rgba(251, 191, 36, .45) 50%, rgba(251, 113, 133, .5));
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 124' preserveAspectRatio='none'%3E%3Cpath d='M0 124 L0 90 C 280 70 480 20 720 20 C 960 20 1160 70 1440 90 L1440 124 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 124' preserveAspectRatio='none'%3E%3Cpath d='M0 124 L0 90 C 280 70 480 20 720 20 C 960 20 1160 70 1440 90 L1440 124 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
    -webkit-mask-size: 100% 124px, 100% 112px; mask-size: 100% 124px, 100% 112px;
    -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
    -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat; }
.wt-bg { --tv: 110px; position: absolute; top: calc(-1 * var(--tv)); left: 0; right: 0; bottom: 0; z-index: -2; overflow: hidden; pointer-events: none;
    background: radial-gradient(ellipse 40% 12% at 50% 5%, #fff, transparent 72%), radial-gradient(ellipse 36% 18% at 2% 44%, rgba(244, 63, 94, .08), transparent 70%), radial-gradient(ellipse 36% 18% at 98% 74%, rgba(245, 158, 11, .08), transparent 70%), radial-gradient(rgba(225, 29, 72, .1) 1.2px, transparent 1.6px) 0 0 / 24px 24px, linear-gradient(180deg, #FFEDF1 0%, #FFF6F7 22%, #FFF8F8 100%);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 110 L0 50 C 240 50 420 88 720 88 C 1020 88 1200 50 1440 50 L1440 110 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 110 L0 50 C 240 50 420 88 720 88 C 1020 88 1200 50 1440 50 L1440 110 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
    -webkit-mask-size: 100% var(--tv), 100% calc(100% - var(--tv) + 1px); mask-size: 100% var(--tv), 100% calc(100% - var(--tv) + 1px);
    -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
    -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat; }
.wt { background: #FFF8F8; }
.wt::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 46% 62% at 50% 50%, #FFF8F8 35%, rgba(255, 248, 248, 0) 100%); }
.pl { background: #F7F6FF; }
.wt-deco { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.wtd-orb { position: absolute; border-radius: 50%; }
.wtd-card { position: absolute; display: flex; align-items: center; gap: 11px; width: 204px; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: 0 24px 40px -24px rgba(10, 22, 51, .45), inset 0 0 0 1.5px rgba(10, 22, 51, .06); animation: floaty 9s ease-in-out infinite; }
.wtd-ic { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; background: linear-gradient(145deg, #E11D48, #FB7185); color: #fff; font-size: 15px; }
.wtd-card small { display: block; color: var(--muted); font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.wtd-card em { display: block; margin-top: 1px; color: #E11D48; font-family: var(--display); font-size: 19px; font-style: normal; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.wtd-card u { display: block; margin-top: 2px; color: var(--muted); font-size: 10.5px; font-weight: 700; text-decoration: none; }
.wtd-card.k1 { left: max(16px, calc(50% - 570px - 226px)); top: 14%; rotate: -3deg; }
.wtd-card.k2 { right: max(16px, calc(50% - 570px - 226px)); top: 28%; rotate: 3deg; animation-delay: -3s; }
@media (max-width: 1619.98px) { .wtd-card { display: none; } }
.wtd-good .wtd-ic { background: linear-gradient(145deg, #16A34A, #4ADE80); }
.wtd-good em { color: #16A34A; }
.wtd-orb.o1 { left: -180px; top: 24%; width: 440px; height: 440px; background: radial-gradient(closest-side, rgba(244, 63, 94, .1), transparent 70%); }
.wtd-orb.o2 { right: -180px; top: 56%; width: 440px; height: 440px; background: radial-gradient(closest-side, rgba(245, 158, 11, .1), transparent 70%); }
.wt-head { max-width: 1040px; margin: 0 auto; text-align: center; }
.wt-kick { display: inline-flex; align-items: center; gap: 10px; padding: 9px 20px; border-radius: 999px; background: linear-gradient(120deg, #F59E0B, #FBBF24); color: #1A1033; font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 14px 30px -12px rgba(245, 158, 11, .8); }
.wt-title { margin: 20px 0 0; color: var(--ink); font-family: var(--display); font-size: clamp(31px, 3.8vw, 54px); font-weight: 800; line-height: 1.1; letter-spacing: -.04em; text-wrap: balance; }
.wt-hl { background: linear-gradient(100deg, #E11D48, #EA580C 60%, #D97706); -webkit-background-clip: text; background-clip: text; color: transparent; }

.wt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; max-width: 1080px; margin: 50px auto 0; }
.wt-panel { padding: 28px 30px; border-radius: 26px; background: #fff; box-shadow: 0 34px 60px -44px rgba(10, 22, 51, .45), inset 0 0 0 1.5px rgba(10, 22, 51, .06); }
.wt-panel-t { margin: 0 0 18px; color: var(--ink); font-family: var(--display); font-size: clamp(19px, 1.8vw, 23px); font-weight: 800; line-height: 1.3; letter-spacing: -.02em; }
.wt-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.wt-list li { display: flex; align-items: center; gap: 14px; color: #3E4B66; font-size: clamp(16px, 1.4vw, 18px); font-weight: 700; line-height: 1.4; }
.wt-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: linear-gradient(145deg, #E11D48, #FB7185); box-shadow: 0 10px 18px -8px #E11D48; color: #fff; font-size: 16px; }
.wt-row { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 14px 16px; border-radius: 16px; font-size: clamp(16.5px, 1.45vw, 19px); font-weight: 700; line-height: 1.35; }
.wt-row i { font-size: 22px; }
.wt-gone { background: #FFF1F3; color: #9F1239; box-shadow: inset 0 0 0 1.5px rgba(225, 29, 72, .18); }
.wt-gone i { color: #E11D48; }
.wt-keep { background: #ECFDF3; color: #166534; box-shadow: inset 0 0 0 2px rgba(22, 163, 74, .35); }
.wt-keep i { color: #16A34A; }
.wt-lme { margin: 18px 0 0; color: #46536E; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; }
.wt-lme b { color: var(--ink); }

.wt-end { max-width: 960px; margin: 56px auto 0; text-align: center; }
.wt-warn { margin: 0; color: #46536E; font-size: clamp(19px, 1.9vw, 24px); font-weight: 600; line-height: 1.5; text-wrap: balance; }
.wt-warn span { color: var(--ink); font-weight: 800; }
.wt-big { margin: 22px 0 0; color: var(--ink); font-family: var(--display); font-size: clamp(28px, 3.4vw, 46px); font-weight: 800; line-height: 1.15; letter-spacing: -.035em; text-wrap: balance; }
.wt-big span { background: linear-gradient(100deg, #E11D48, #EA580C); -webkit-background-clip: text; background-clip: text; color: transparent; }
.offer-wt { margin-top: 90px; }

@media (max-width: 991.98px) {
    .wt { padding: 36px 0 100px; }
    .wt-bg { --tv: 76px; }
    .wt::before { top: -94px; height: 186px; -webkit-mask-size: 100% 94px, 100% 94px; mask-size: 100% 94px, 100% 94px; }
    .wt-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 767.98px) {
    .wt { padding: 28px 0 90px; }
    .wt-bg { --tv: 50px; }
    .wt::before { top: -66px; height: 144px; -webkit-mask-size: 100% 66px, 100% 80px; mask-size: 100% 66px, 100% 80px; }
    .wt-title { font-size: 30px; }
    .wt-panel { padding: 22px 18px; }
    .offer-wt { margin-top: 70px; }
}

/* ---------- visual upgrade: S30 / S31 / S32 image slots ---------- */
.hv-feature { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 50px; max-width: 1140px; margin: 46px auto 0; }
.hv-photo { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 28px; box-shadow: 0 0 0 2px rgba(252, 211, 77, .5), 0 40px 70px -30px rgba(0, 0, 0, .8); }
.hv-photo-img { width: 100%; height: 100%; object-fit: cover; }
.hv-photo-tag { position: absolute; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 999px; background: rgba(10, 22, 51, .82); color: #FCD34D; font-size: 14px; font-weight: 800; box-shadow: inset 0 0 0 1.5px rgba(252, 211, 77, .45); }
.hv-feature-copy .hv-lead { margin: 0; text-align: left; }
.hv-feature .hv-eq { flex-direction: column; gap: 10px; max-width: none; margin: 24px 0 0; }
.hv-feature .hv-eq-cell { flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 22px; text-align: left; }
.hv-feature .hv-eq-cell b { font-size: clamp(30px, 3vw, 42px); }
.hv-feature .hv-eq-total b { font-size: clamp(36px, 3.6vw, 52px); }
.hv-feature .hv-eq-cell small { margin: 0; text-align: right; }
.hv-feature .hv-eq-op { width: 36px; height: 36px; margin: -18px auto; position: relative; z-index: 1; font-size: 20px; }
.hv-nophoto { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.hv-nophoto .hv-feature-copy .hv-lead { text-align: center; }
.hv-nophoto .hv-eq { flex-direction: row; }
.hv-nophoto .hv-eq-cell { flex-direction: column; text-align: center; }
.hv-nophoto .hv-eq-cell small { margin-top: 8px; text-align: center; }
.hv-nophoto .hv-eq-op { margin: 0; }
.hv-art { width: 76px; height: 76px; flex: none; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .45)); }
.hv-art + .hv-ic { display: none; }

.pl-side-photo { margin: -12px -14px 0; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 18px; }
.pl-side-photo:empty { display: none; }
.pl-side-photo img { width: 100%; height: 100%; object-fit: cover; }
.pl-nat .pl-side-photo img { filter: grayscale(.55) contrast(.95); }
.pl-side-photo:not(:empty) + .pl-side-ic { position: relative; margin: -30px 0 0 10px; box-shadow: 0 0 0 5px #fff; }
.pl-tiers { max-width: 1160px; margin: 50px auto 0; }
.pl-tiers-t { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 20px; color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pl-tiers-t i { color: #7C3AED; }
.pl-tier-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pl-tier { overflow: hidden; border-radius: 24px; background: #fff; box-shadow: 0 30px 54px -38px color-mix(in srgb, var(--a) 60%, rgba(10, 22, 51, .6)), inset 0 0 0 1.5px color-mix(in srgb, var(--a) 16%, #fff); }
.pl-tier-photo { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(150deg, color-mix(in srgb, var(--a) 30%, #fff), color-mix(in srgb, var(--a2) 14%, #fff)); }
.pl-tier-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pl-tier-photo .pl-ic { position: absolute; left: 16px; bottom: -23px; z-index: 1; box-shadow: 0 0 0 5px #fff, 0 12px 20px -10px var(--a); }
.pl-tier-body { padding: 34px 20px 22px; }
.pl-tier-n { display: block; color: var(--muted); font-size: 14px; font-weight: 700; }
.pl-tier-n b { display: block; color: color-mix(in srgb, var(--a) 85%, #000); font-family: var(--display); font-size: clamp(28px, 2.6vw, 36px); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.pl-tier-body p { margin: 10px 0 0; color: var(--ink); font-size: clamp(16px, 1.35vw, 18px); font-weight: 700; line-height: 1.35; }
.pl-tier-gold { background: linear-gradient(170deg, #FFFBEF, #FFF1CF); box-shadow: 0 30px 56px -30px rgba(217, 119, 6, .6), inset 0 0 0 2px rgba(245, 158, 11, .5); }
.pl-tier-gold .pl-tier-photo .pl-ic { box-shadow: 0 0 0 5px #FFF7E2, 0 12px 20px -10px var(--a); }
.pl-tier-gold .pl-tier-body p { color: #B45309; }
.pl-state { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 34px 44px; text-align: left; }
.pl-state-art { width: 250px; height: auto; margin: -50px -10px -50px 0; filter: drop-shadow(0 24px 30px rgba(10, 22, 51, .45)); }
.pl-state:not(:has(.pl-state-art)) { grid-template-columns: minmax(0, 1fr); text-align: center; }

.wt-row-art { width: 46px; height: 46px; flex: none; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(10, 22, 51, .2)); }
.wt-row-art + i { display: none; }
.wt-end { display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: center; gap: 40px; max-width: 1000px; text-align: left; }
.wt-end-art { width: 100%; height: auto; filter: drop-shadow(0 26px 30px rgba(10, 22, 51, .25)); }
.wt-end-noart { grid-template-columns: minmax(0, 1fr); text-align: center; }
.wt-offer-wrap { margin-top: 80px; }
.offer-wt { margin-top: 0; }

@media (max-width: 1199.98px) {
    .pl-tier-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .hv-feature { grid-template-columns: minmax(0, 1fr); gap: 30px; max-width: 1140px; }
    .hv-photo { aspect-ratio: 16 / 9; }
    .hv-photo-img { object-position: 50% 38%; }
    .pl-state { grid-template-columns: minmax(0, 1fr); text-align: center; }
    .pl-state-art { width: 200px; margin: 0 auto -20px; }
}
@media (max-width: 767.98px) {
    .hv-feature .hv-eq-cell { padding: 14px 16px; }
    .hv-nophoto .hv-eq { flex-direction: column; }
    .hv-nophoto .hv-eq-op { margin: -14px auto; }
    .hv-art { width: 64px; height: 64px; }
    /* four stacked tier cards plus two VS cards carried ~590px of photo on a phone;
       a wider frame keeps the images reading without the vertical cost */
    .pl-side-photo { margin: -8px -8px 0; aspect-ratio: 5 / 2; }
    .pl-tier-row { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .pl-tier-photo { aspect-ratio: 5 / 2; }
    .pl-state { padding: 28px 18px; }
    .wt-end { grid-template-columns: minmax(0, 1fr); gap: 14px; text-align: center; }
    .wt-end-art { width: 180px; margin: 0 auto; }
    .wt-offer-wrap { margin-top: 60px; }
}

/* ==========================================================
   SECTION 33 — SPECIAL JVZOO LAUNCH PRICE
   ========================================================== */
.lp { position: relative; z-index: 27; isolation: isolate; overflow-x: clip; padding: 70px 0 120px; color: #E3EAFB; background: #070F26; }
.lp::before { content: ""; position: absolute; left: 0; right: 0; top: -128px; height: 238px; z-index: -3; pointer-events: none;
    background: linear-gradient(90deg, rgba(251, 191, 36, .5), rgba(56, 189, 248, .45) 55%, rgba(251, 191, 36, .5));
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 128' preserveAspectRatio='none'%3E%3Cpath d='M0 128 L0 52 C 260 76 520 96 800 74 C 1040 56 1240 22 1440 6 L1440 128 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 128' preserveAspectRatio='none'%3E%3Cpath d='M0 128 L0 52 C 260 76 520 96 800 74 C 1040 56 1240 22 1440 6 L1440 128 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
    -webkit-mask-size: 100% 128px, 100% 112px; mask-size: 100% 128px, 100% 112px;
    -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
    -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat; }
.lp-bg { --pv: 110px; position: absolute; top: calc(-1 * var(--pv)); left: 0; right: 0; bottom: 0; z-index: -2; overflow: hidden; pointer-events: none;
    background:
        radial-gradient(ellipse 46% 18% at 50% 10%, rgba(56, 189, 248, .2), transparent 72%),
        radial-gradient(ellipse 36% 20% at 4% 48%, rgba(251, 191, 36, .14), transparent 70%),
        radial-gradient(ellipse 36% 20% at 96% 76%, rgba(124, 58, 237, .2), transparent 70%),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 50% 0 / 72px 72px,
        linear-gradient(0deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 50% 0 / 72px 72px,
        linear-gradient(180deg, #102048 0%, #0A1533 40%, #070F26 100%);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 110 L0 78 C 300 74 520 56 760 34 C 980 14 1220 16 1440 44 L1440 110 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 110 L0 78 C 300 74 520 56 760 34 C 980 14 1220 16 1440 44 L1440 110 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
    -webkit-mask-size: 100% var(--pv), 100% calc(100% - var(--pv) + 1px); mask-size: 100% var(--pv), 100% calc(100% - var(--pv) + 1px);
    -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
    -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat; }

.lp-deco { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.lpd-orb { position: absolute; border-radius: 50%; }
.lpd-orb.o1 { left: -180px; top: 22%; width: 440px; height: 440px; background: radial-gradient(closest-side, rgba(251, 191, 36, .1), transparent 70%); }
.lpd-orb.o2 { right: -180px; top: 58%; width: 440px; height: 440px; background: radial-gradient(closest-side, rgba(56, 189, 248, .1), transparent 70%); }
.lpd-card { position: absolute; width: 226px; padding: 16px 18px 18px; border-radius: 20px; background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: inset 0 0 0 1.5px rgba(252, 211, 77, .4), 0 30px 50px -26px rgba(0, 0, 0, .95); animation: floaty 9s ease-in-out infinite; }
.lpd-top { display: flex; align-items: center; gap: 10px; }
.lpd-ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 11px; background: linear-gradient(145deg, #D97706, #FBBF24); color: #fff; font-size: 14px; box-shadow: 0 10px 16px -8px rgba(217, 119, 6, .9); }
.lpd-card small { color: #CBD6F2; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; }
.lpd-card em { display: block; margin-top: 12px; color: #FCD34D; font-family: var(--display); font-size: 42px; font-style: normal; font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.lpd-card em sup { top: -.5em; font-size: .52em; }
.lpd-card u { display: block; margin-top: 6px; color: #9AAACF; font-size: 12px; font-weight: 700; text-decoration: none; }
.lpd-chip { display: inline-block; margin-top: 12px; padding: 5px 11px; border-radius: 999px; background: rgba(34, 197, 94, .18); color: #86EFAC; font-size: 11px; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(74, 222, 128, .35); }
.lpd-card.k2 { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14), 0 30px 50px -26px rgba(0, 0, 0, .95); }
.lpd-card.k2 .lpd-ic { background: linear-gradient(145deg, #E11D48, #FB7185); box-shadow: 0 10px 16px -8px rgba(225, 29, 72, .9); }
.lpd-up { color: #9AAACF !important; text-decoration: line-through; text-decoration-color: rgba(251, 113, 133, .9); text-decoration-thickness: 3px; }
.lpd-up span { font-size: .5em; letter-spacing: -.02em; }
.lpd-chip-bad { background: rgba(244, 63, 94, .16); color: #FDA4AF; box-shadow: inset 0 0 0 1px rgba(251, 113, 133, .35); }
/* kept beside the headline so they never sit behind the product stage */
.lpd-card.k1 { left: max(16px, calc(50% - 545px - 252px)); top: 86px; rotate: -3deg; }
.lpd-card.k2 { right: max(16px, calc(50% - 545px - 252px)); top: 120px; rotate: 3deg; animation-delay: -3s; }
@media (max-width: 1639.98px) { .lpd-card { display: none; } }

.lp-head { max-width: 1060px; margin: 0 auto; text-align: center; }
.lp-pre { max-width: 860px; margin: 0 auto; color: #B9C4E6; font-size: clamp(16.5px, 1.6vw, 20px); font-style: italic; font-weight: 500; line-height: 1.55; text-wrap: balance; }
.lp-pre b { color: #fff; font-weight: 800; }
.lp-gold { color: #FCD34D; font-weight: 800; }
.lp-kick { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; padding: 9px 22px; border-radius: 999px; background: linear-gradient(120deg, #F59E0B, #FBBF24); color: #1A1033; font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 16px 34px -12px rgba(245, 158, 11, .85); }
.lp-title { margin: 20px 0 0; color: #fff; font-family: var(--display); font-size: clamp(32px, 4.2vw, 58px); font-weight: 800; line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; }
.lp-hl { background: linear-gradient(100deg, #FDE68A, #FBBF24 50%, #38BDF8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-sub { max-width: 900px; margin: 20px auto 0; color: #C2CCEA; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; text-wrap: balance; }
.lp-sub b { color: #fff; }
.lp-sub span { color: #FDA4AF; font-weight: 800; }

.lp-stage { position: relative; margin-top: 46px; }
.lp-stage .showcase { margin-top: 0; }
.lp-stage .person { filter: brightness(.96) drop-shadow(0 0 34px rgba(56, 189, 248, .32)); }
.lp-stage .stage-glow { background: radial-gradient(ellipse, rgba(56, 189, 248, .4), transparent 70%); }

@media (max-width: 991.98px) {
    .lp { padding: 56px 0 90px; }
    .lp-bg { --pv: 76px; }
    .lp::before { top: -96px; height: 190px; -webkit-mask-size: 100% 96px, 100% 94px; mask-size: 100% 96px, 100% 94px; }
}
@media (max-width: 767.98px) {
    .lp { padding: 44px 0 64px; }
    .lp-bg { --pv: 50px; }
    .lp::before { top: -66px; height: 144px; -webkit-mask-size: 100% 66px, 100% 80px; mask-size: 100% 66px, 100% 80px; }
    .lp-title { font-size: 31px; }
}

/* ==========================================================
   SECTION 34 — WHAT'S INCLUDED (feature table)
   ========================================================== */
.pt { position: relative; z-index: 28; isolation: isolate; overflow-x: clip; padding: 66px 0 120px; color: var(--ink); background: #F3F6FD; }
.pt::before { content: ""; position: absolute; left: 0; right: 0; top: -128px; height: 238px; z-index: -3; pointer-events: none;
    background: linear-gradient(90deg, rgba(56, 189, 248, .5), rgba(124, 58, 237, .4) 55%, rgba(56, 189, 248, .5));
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 128' preserveAspectRatio='none'%3E%3Cpath d='M0 128 L0 84 C 260 40 520 26 780 44 C 1020 60 1240 96 1440 72 L1440 128 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 128' preserveAspectRatio='none'%3E%3Cpath d='M0 128 L0 84 C 260 40 520 26 780 44 C 1020 60 1240 96 1440 72 L1440 128 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
    -webkit-mask-size: 100% 128px, 100% 112px; mask-size: 100% 128px, 100% 112px;
    -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
    -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat; }
.pt-bg { --qv: 110px; position: absolute; top: calc(-1 * var(--qv)); left: 0; right: 0; bottom: 0; z-index: -2; overflow: hidden; pointer-events: none;
    background:
        radial-gradient(ellipse 40% 12% at 50% 4%, #fff, transparent 72%),
        radial-gradient(ellipse 34% 16% at 2% 34%, rgba(11, 92, 255, .08), transparent 70%),
        radial-gradient(ellipse 34% 16% at 98% 70%, rgba(124, 58, 237, .08), transparent 70%),
        linear-gradient(90deg, rgba(11, 92, 255, .05) 1px, transparent 1px) 50% 0 / 64px 64px,
        linear-gradient(0deg, rgba(11, 92, 255, .05) 1px, transparent 1px) 50% 0 / 64px 64px,
        linear-gradient(180deg, #E8EEFB 0%, #F1F5FD 16%, #EDF2FC 60%, #F4F7FE 100%);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 110 L0 48 C 220 84 460 92 720 66 C 980 40 1220 34 1440 58 L1440 110 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 110 L0 48 C 220 84 460 92 720 66 C 980 40 1220 34 1440 58 L1440 110 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
    -webkit-mask-size: 100% var(--qv), 100% calc(100% - var(--qv) + 1px); mask-size: 100% var(--qv), 100% calc(100% - var(--qv) + 1px);
    -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
    -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat; }
/* spotlight behind the card so it lifts off the grid */
.pt::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(ellipse 52% 44% at 50% 40%, rgba(255, 255, 255, .96), rgba(255, 255, 255, 0) 70%),
        conic-gradient(from 200deg at 50% 8%, rgba(11, 92, 255, .07) 0deg 14deg, transparent 14deg 34deg, rgba(124, 58, 237, .06) 34deg 48deg, transparent 48deg 80deg); }

.pt-deco { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ptd-orb { position: absolute; border-radius: 50%; }
.ptd-orb.o1 { left: -170px; top: 16%; width: 420px; height: 420px; background: radial-gradient(closest-side, rgba(11, 92, 255, .09), transparent 70%); }
.ptd-orb.o2 { right: -170px; top: 52%; width: 420px; height: 420px; background: radial-gradient(closest-side, rgba(124, 58, 237, .08), transparent 70%); }
.pt-head { position: relative; max-width: 1000px; margin: 0 auto 46px; text-align: center; }
/* 3D icons flanking the headline */
.pt-3d { --off: clamp(16px, 2vw, 40px); position: absolute; top: 18px; display: none; width: min(190px, 10.5vw, calc(50vw - 520px - var(--off))); height: auto; pointer-events: none; animation: floaty 8s ease-in-out infinite; }
.pt-3d-l { right: calc(100% + var(--off)); rotate: -9deg; }
.pt-3d-r { left: calc(100% + var(--off)); rotate: 9deg; animation-delay: -4s; }
@media (min-width: 1300px) { .pt-3d { display: block; } }
.pt-kick { display: inline-flex; align-items: center; gap: 10px; padding: 9px 20px; border-radius: 999px; background: #fff; color: #0B4ED6; font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; box-shadow: inset 0 0 0 1.5px rgba(11, 92, 255, .22), 0 12px 24px -14px rgba(11, 92, 255, .6); }
.pt-title { margin: 20px 0 0; color: var(--ink); font-family: var(--display); font-size: clamp(32px, 4vw, 56px); font-weight: 800; line-height: 1.1; letter-spacing: -.04em; text-wrap: balance; }
.pt-hl { background: linear-gradient(100deg, #0B5CFF, #7C3AED); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* single pricing card: banner, full checklist, price + CTA (CinemaStudio-style) */
.pc { scroll-margin-top: 72px; position: relative; max-width: 900px; margin: 0 auto; padding: 3px; border-radius: 34px;
    background: linear-gradient(150deg, #0B5CFF, #19D3FF 35%, #7C3AED 70%, #FBBF24);
    box-shadow: 0 70px 110px -60px rgba(10, 22, 51, .75), 0 0 0 10px rgba(255, 255, 255, .55); }
.pc > .pc-banner { border-radius: 31px 31px 0 0; }
.pc > .pc-body { border-radius: 0 0 31px 31px; background: #fff; }
.pc-ribbon { position: absolute; z-index: 3; right: 20px; top: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: linear-gradient(120deg, #E11D48, #F97316); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 16px 26px -14px rgba(225, 29, 72, .9), inset 0 1.5px 0 rgba(255, 255, 255, .3); }
.pc-banner-txt { position: relative; }
.pc-banner { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 22px; padding: 28px 34px 28px 26px; overflow: hidden;
    background:
        radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.4px) 0 0 / 18px 18px,
        linear-gradient(150deg, #071232 0%, #0B3AA8 45%, #0B5CFF 78%, #19D3FF 130%); text-align: left; }
.pc-banner-box { position: relative; width: 150px; height: auto; filter: drop-shadow(0 24px 26px rgba(0, 0, 0, .6)); }
.pc-banner-glow { position: absolute; left: 50%; top: -40%; width: 120%; height: 140%; translate: -50% 0; background: radial-gradient(closest-side, rgba(25, 211, 255, .35), transparent 70%); }
.pc-banner-logo { display: block; width: min(300px, 82%); height: auto; }
.pc-banner-tag { display: inline-block; margin-top: 12px; padding: 8px 18px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22); }
.pc-body { padding: 30px 34px 34px; }
.pc-banner > div { position: relative; }
.pc-list { column-count: 2; column-gap: 34px; margin: 0; padding: 0; list-style: none; }
.pc-grp { display: block; margin-bottom: 18px; padding: 0; background: none !important; border-radius: 0; -webkit-column-break-inside: avoid; break-inside: avoid; }
.pc-grp:last-child { margin-bottom: 0; }
.pc-grp > ul { margin: 0; padding: 0; list-style: none; }
.pc-list li { display: flex; align-items: flex-start; gap: 11px; padding: 8px 6px; border-radius: 10px; color: #2B3856; font-size: 15.5px; font-weight: 700; line-height: 1.4; -webkit-column-break-inside: avoid; break-inside: avoid; }
.pc-grp > ul > li:nth-child(odd):not(.pc-g) { background: rgba(10, 22, 51, .035); }
.pc-list li i { margin-top: 3px; display: grid; place-items: center; width: 19px; height: 19px; flex: none; border-radius: 50%; background: linear-gradient(145deg, #16A34A, #4ADE80); color: #fff; font-size: 9.5px; }
.pc-list li span { flex: 1; }
.pc-list li b { color: var(--ink); font-weight: 800; }
.pc-tag { flex: none; padding: 3px 9px; border-radius: 999px; background: rgba(11, 92, 255, .1); color: #0B4ED6; font-size: 10.5px; font-style: normal; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.pc-tag-free { background: rgba(217, 119, 6, .14); color: #B45309; }
.pc-g { display: grid !important; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 0; padding: 11px 14px !important; border-radius: 12px; background: linear-gradient(90deg, rgba(11, 92, 255, .12), rgba(11, 92, 255, 0)); color: var(--ink) !important; font-family: var(--display); font-size: 16px !important; font-weight: 800 !important; }
.pc-gn { padding: 3px 9px; border-radius: 999px; background: rgba(11, 92, 255, .14); color: #0B4ED6; font-family: var(--geist, inherit); font-size: 11px; font-style: normal; font-weight: 800; }
.pc-gic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: linear-gradient(145deg, #0B5CFF, #19D3FF); color: #fff; font-size: 11px; }

.pc-price { position: relative; margin-top: 30px; padding: 30px 26px 28px; overflow: hidden; border-radius: 26px; text-align: center; color: #E6ECFA;
    background:
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(25, 211, 255, .22), transparent 70%),
        linear-gradient(170deg, #0B1633 0%, #0A1022 100%);
    box-shadow: inset 0 0 0 2px rgba(252, 211, 77, .45), 0 34px 60px -34px rgba(10, 22, 51, .9); }
.pc-stack { display: grid; gap: 8px; max-width: 520px; margin: 0 auto 22px; }
.pc-stack div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 16px; border-radius: 14px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.pc-stack span { color: #C4CEEB; font-size: 14.5px; font-weight: 700; text-align: left; }
.pc-stack b { color: #FCD34D; font-size: 14.5px; font-weight: 800; white-space: nowrap; }
.pc-waived { display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 7px 16px; border-radius: 999px; background: rgba(244, 63, 94, .16); color: #FDA4AF; font-size: 13.5px; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(251, 113, 133, .35); }
.pc-was { margin: 14px 0 0; color: #C4CEEB; font-size: clamp(16px, 1.6vw, 19px); font-weight: 700; }
.pc-was s { color: #FDA4AF; text-decoration-thickness: 3px; }
.pc-today { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 8px 0 0; color: #fff; font-family: var(--display); font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; letter-spacing: -.02em; line-height: 1; text-transform: uppercase; }
.pc-today b { background: linear-gradient(100deg, #FDE68A, #FBBF24 55%, #F59E0B); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: clamp(56px, 6vw, 86px); letter-spacing: -.05em; }
.pc-today sup { top: -.5em; font-size: .46em; }
.pc-once { margin: 2px 0 0; color: #9AAACF; font-size: 13.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.pc-coupon { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 9px; margin-top: 20px; padding: 9px 18px; border-radius: 999px; background: linear-gradient(120deg, #E11D48, #F97316); color: #fff; font-size: 13.5px; font-weight: 800; box-shadow: 0 16px 30px -14px rgba(225, 29, 72, .9); }
.pc-coupon > i { color: #FCD34D; font-size: 12px; }
.pc-code { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .95); color: #B91C1C; font-family: inherit; font-size: 13.5px; font-weight: 800; letter-spacing: .06em; cursor: pointer; }
/* JVZoo buy button. The <a> and <img> are supplied by JVZoo and must not be edited,
   so all sizing is done here. The image is 489x259 natural: it fills the panel on
   narrow screens and stops at its own natural width rather than upscaling and going soft. */
.jv-button { margin: 22px 0 0; }
.jv-button a { display: block; line-height: 0; }
.jv-button img { display: block; width: 100%; max-width: 489px; height: auto; margin: 0 auto; }
.pc-foot { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; }
.pc-seal { display: grid; place-items: center; align-content: center; width: 66px; height: 66px; flex: none; border-radius: 50%; background: linear-gradient(150deg, #FDE68A, #F59E0B); color: #4A2A00; box-shadow: 0 16px 26px -14px rgba(245, 158, 11, .9); }
.pc-seal b { font-family: var(--display); font-size: 24px; font-weight: 800; line-height: 1; }
.pc-seal small { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pc-foot-txt { text-align: left; }
.pc-risk { margin: 0; color: #86EFAC; font-size: 14.5px; font-weight: 800; }
.pc-pay { display: flex; align-items: center; gap: 12px; margin-top: 8px; color: #8FA0C6; font-size: 25px; }

@media (max-width: 991.98px) {
    .pt { padding: 54px 0 96px; }
    .pt-bg { --qv: 76px; }
    .pt::before { top: -96px; height: 190px; -webkit-mask-size: 100% 96px, 100% 94px; mask-size: 100% 96px, 100% 94px; }
    .pc-body { padding: 26px 22px 28px; }
    .pc-banner { grid-template-columns: 120px minmax(0, 1fr); padding: 24px 24px 24px 18px; }
    .pc-banner-box { width: 120px; }
}
@media (max-width: 767.98px) {
    .pt { padding: 42px 0 76px; }
    .pt-bg { --qv: 50px; }
    .pt::before { top: -66px; height: 144px; -webkit-mask-size: 100% 66px, 100% 80px; mask-size: 100% 66px, 100% 80px; }
    .pt-title { font-size: 31px; }
    .pc { border-radius: 26px; padding: 2px; }
    .pc > .pc-banner { border-radius: 24px 24px 0 0; }
    .pc > .pc-body { border-radius: 0 0 24px 24px; }
    .pc-ribbon { right: 12px; top: 12px; padding: 6px 12px; font-size: 10px; }
    .pc-banner { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 12px; padding: 22px 18px; text-align: center; }
    .pc-banner-box { width: 108px; }
    .pc-banner-logo { width: 74%; }
    .pc-banner-tag { margin-top: 10px; font-size: 11.5px; }
    .pc-banner-txt { display: grid; justify-items: center; }
    .pc-banner-logo { width: 74%; margin: 0 auto; }
    .pc-body { padding: 22px 14px 24px; }
    .pc-stack div { flex-direction: column; align-items: flex-start; gap: 4px; }
    .pc-today { flex-direction: column; gap: 4px; }
    .pc-foot { flex-direction: column; gap: 12px; }
    .pc-foot-txt { text-align: center; }
    .pc-pay { justify-content: center; }
    .pc-list { column-count: 1; }
    .pc-grp { margin-bottom: 14px; }
    .pc-list li { padding: 5px 6px; font-size: 15px; line-height: 1.35; }
    .pc-g { padding: 9px 12px !important; }
    .pc-price { padding: 22px 14px 24px; border-radius: 20px; }
    .pc-coupon { gap: 7px; padding: 8px 14px; font-size: 12.5px; }
}

/* ==========================================================
   SECTION 35 — IRON-CLAD 30-DAY TRIPLE GUARANTEE (dark stage + white card)
   ========================================================== */
.gt { position: relative; z-index: 29; isolation: isolate; overflow-x: clip; padding: 70px 0 110px; color: #E7F5EC; background: #02120D; }
.gt::before { content: ""; position: absolute; left: 0; right: 0; top: -128px; height: 238px; z-index: -3; pointer-events: none;
    background: linear-gradient(90deg, rgba(163, 230, 53, .6), rgba(45, 212, 191, .5) 52%, rgba(163, 230, 53, .6));
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 128' preserveAspectRatio='none'%3E%3Cpath d='M0 128 L0 30 C 280 60 520 84 780 62 C 1020 42 1240 8 1440 22 L1440 128 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 128' preserveAspectRatio='none'%3E%3Cpath d='M0 128 L0 30 C 280 60 520 84 780 62 C 1020 42 1240 8 1440 22 L1440 128 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
    -webkit-mask-size: 100% 128px, 100% 112px; mask-size: 100% 128px, 100% 112px;
    -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
    -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat; }
.gt-bg { --gv: 110px; position: absolute; top: calc(-1 * var(--gv)); left: 0; right: 0; bottom: 0; z-index: -2; overflow: hidden; pointer-events: none;
    background:
        radial-gradient(ellipse 52% 24% at 50% 0%, rgba(163, 230, 53, .2), transparent 72%),
        radial-gradient(ellipse 34% 20% at 2% 46%, rgba(13, 148, 136, .22), transparent 70%),
        radial-gradient(ellipse 34% 20% at 98% 78%, rgba(245, 158, 11, .1), transparent 70%),
        radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1.4px) 0 0 / 26px 26px,
        linear-gradient(180deg, #06291F 0%, #041B14 44%, #02120D 100%);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 110 L0 66 C 240 22 480 16 720 42 C 960 68 1200 74 1440 40 L1440 110 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 110 L0 66 C 240 22 480 16 720 42 C 960 68 1200 74 1440 40 L1440 110 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
    -webkit-mask-size: 100% var(--gv), 100% calc(100% - var(--gv) + 1px); mask-size: 100% var(--gv), 100% calc(100% - var(--gv) + 1px);
    -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
    -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat; }

.gt-deco { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.gtd-orb { position: absolute; border-radius: 50%; }
.gtd-orb.o1 { left: -180px; top: 26%; width: 440px; height: 440px; background: radial-gradient(closest-side, rgba(74, 222, 128, .1), transparent 70%); }
.gtd-orb.o2 { right: -180px; top: 64%; width: 440px; height: 440px; background: radial-gradient(closest-side, rgba(251, 191, 36, .12), transparent 70%); }

.gt-head { max-width: 1100px; margin: 0 auto; text-align: center; }
/* headline sits on a bright plaque, like the reference banner */
.gt-plaque { display: inline-block; margin: 0; padding: 18px 44px; border-radius: 22px; background: linear-gradient(120deg, #A3E635, #4ADE80 60%, #22D3EE); color: #04231B; font-family: var(--display); font-size: clamp(26px, 3.4vw, 48px); font-weight: 800; line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; rotate: -1deg;
    box-shadow: 0 26px 50px -22px rgba(74, 222, 128, .75), inset 0 3px 0 rgba(255, 255, 255, .45), 0 0 0 4px rgba(163, 230, 53, .18); }
.gt-sub { margin: 26px 0 0; color: #BFE6D2; font-size: clamp(17px, 1.8vw, 22px); font-style: italic; font-weight: 600; line-height: 1.5; text-wrap: balance; }
.gt-sub u { color: #fff; text-decoration-color: rgba(163, 230, 53, .8); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* optional photo, blended into the dark ground */
/* photo sits behind everything as a soft wash: faded on all four edges so the
   image has no visible rectangle, with the panel simply covering the middle */
.gt-photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 52%, #000 30%, rgba(0, 0, 0, .35) 72%, transparent 100%);
            mask-image: radial-gradient(ellipse 78% 62% at 50% 52%, #000 30%, rgba(0, 0, 0, .35) 72%, transparent 100%); }
.gt-photo img { width: 100%; height: 100%; object-fit: cover; opacity: .5; mix-blend-mode: screen; filter: saturate(.75) brightness(.85) blur(2px); }

/* one white panel holding the graphic and the three guarantee cards */
.gt-panel { position: relative; max-width: 1200px; margin: 46px auto 0; padding: 48px 44px; overflow: hidden; border-radius: 36px; background: #fff;
    box-shadow: 0 80px 120px -70px rgba(0, 0, 0, .95), inset 0 0 0 2px rgba(74, 222, 128, .3); }
.gt-panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, #0B5CFF, #7C3AED 48%, #16A34A); }
.gt-stage { display: grid; place-items: center; }
.gt-visual { position: relative; display: grid; place-items: center; width: min(760px, 100%); }
.gt-visual-glow { position: absolute; inset: -12% 6% 2%; border-radius: 50%; background: radial-gradient(closest-side, rgba(74, 222, 128, .28), rgba(45, 212, 191, .12) 58%, transparent 78%); }
.gt-badge { position: relative; z-index: 2; width: min(400px, 60%); height: auto; filter: drop-shadow(0 30px 34px rgba(10, 22, 51, .45)); }
.gt-box { position: absolute; z-index: 1; left: 6%; bottom: 0; width: 23%; height: auto; rotate: -7deg; filter: drop-shadow(0 22px 26px rgba(10, 22, 51, .5)); }
.gt-shield { position: absolute; z-index: 3; right: 6%; top: 0; width: 20%; height: auto; rotate: 8deg; animation: floaty 8s ease-in-out infinite; }
.gt-visual-cap { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 9px; margin: 18px 0 0; padding: 10px 20px; border-radius: 999px; background: #F1F9F4; color: #15803D; font-size: 14px; font-weight: 800; box-shadow: inset 0 0 0 1.5px rgba(22, 163, 74, .28); }
.gt-visual-cap i { color: #4ADE80; }

.gt-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 38px auto 0; }
.gt-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; overflow: hidden; padding: 28px 24px 26px; border-radius: 22px; background: linear-gradient(170deg, color-mix(in srgb, var(--a) 8%, #fff), #fff 70%);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--a) 20%, #fff), 0 26px 40px -34px color-mix(in srgb, var(--a) 60%, rgba(10, 22, 51, .6)); }
.gt-item::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--a), var(--a2)); }
.gt-ic { position: relative; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; background: linear-gradient(145deg, var(--a), var(--a2)); color: #fff; font-size: 21px; box-shadow: 0 14px 24px -12px var(--a); }
.gt-ic em { position: absolute; right: -7px; bottom: -7px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: color-mix(in srgb, var(--a) 85%, #000); font-family: var(--display); font-size: 12.5px; font-style: normal; font-weight: 800; box-shadow: 0 6px 12px -6px rgba(10, 22, 51, .6); }
.gt-item h3 { margin: 2px 0 8px; color: var(--ink); font-family: var(--display); font-size: clamp(19px, 1.8vw, 23px); font-weight: 800; line-height: 1.2; letter-spacing: -.025em; }
.gt-item p { margin: 0 0 9px; color: #46536E; font-size: clamp(15px, 1.3vw, 16.5px); line-height: 1.55; }
.gt-item p:last-child { margin-bottom: 0; }
.gt-item b { color: var(--ink); font-weight: 800; }

.gt-close { max-width: 1000px; margin: 46px auto 0; color: #fff; font-family: var(--display); font-size: clamp(26px, 3.2vw, 44px); font-weight: 800; line-height: 1.2; letter-spacing: -.035em; text-align: center; text-wrap: balance; }
.gt-close b { background: linear-gradient(100deg, #A3E635, #4ADE80); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gt-close span { display: block; margin-top: 6px; color: #86EFAC; }

@media (max-width: 1199.98px) {
    .gt-items { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .gt-panel { padding: 34px 26px; }
}
@media (max-width: 991.98px) {
    .gt { padding: 56px 0 90px; }
    .gt-bg { --gv: 76px; }
    .gt::before { top: -96px; height: 190px; -webkit-mask-size: 100% 96px, 100% 94px; mask-size: 100% 96px, 100% 94px; }
    .gt-plaque { padding: 16px 28px; }
}
@media (max-width: 767.98px) {
    .gt { padding: 44px 0 72px; }
    .gt-bg { --gv: 50px; }
    .gt::before { top: -66px; height: 144px; -webkit-mask-size: 100% 66px, 100% 80px; mask-size: 100% 66px, 100% 80px; }
    .gt-plaque { padding: 14px 18px; border-radius: 18px; font-size: 26px; }
    .gt-item { gap: 12px; padding: 22px 16px 20px; border-radius: 18px; }
    .gt-panel { padding: 26px 14px; border-radius: 24px; }
    .gt-ic { width: 46px; height: 46px; font-size: 18px; }
}

/* ==========================================================
   SECTION 36 — FOUNDER NOTE + RISK-FREE CTA
   ========================================================== */
.fn { position: relative; z-index: 30; isolation: isolate; overflow-x: clip; padding: 64px 0 110px; color: var(--ink); background: #F4F8F6; }
.fn::before { content: ""; position: absolute; left: 0; right: 0; top: -126px; height: 236px; z-index: -3; pointer-events: none;
    background: linear-gradient(90deg, rgba(74, 222, 128, .45), rgba(56, 189, 248, .38) 52%, rgba(74, 222, 128, .45));
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 126' preserveAspectRatio='none'%3E%3Cpath d='M0 126 L0 76 C 260 40 520 14 800 34 C 1040 52 1240 88 1440 96 L1440 126 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 126' preserveAspectRatio='none'%3E%3Cpath d='M0 126 L0 76 C 260 40 520 14 800 34 C 1040 52 1240 88 1440 96 L1440 126 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
    -webkit-mask-size: 100% 126px, 100% 112px; mask-size: 100% 126px, 100% 112px;
    -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
    -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat; }
.fn-bg { --fv: 110px; position: absolute; top: calc(-1 * var(--fv)); left: 0; right: 0; bottom: 0; z-index: -2; overflow: hidden; pointer-events: none;
    background:
        radial-gradient(ellipse 40% 12% at 50% 5%, #fff, transparent 72%),
        radial-gradient(ellipse 34% 16% at 2% 40%, rgba(22, 163, 74, .08), transparent 70%),
        radial-gradient(ellipse 34% 16% at 98% 74%, rgba(11, 92, 255, .07), transparent 70%),
        radial-gradient(rgba(22, 163, 74, .1) 1.2px, transparent 1.6px) 0 0 / 24px 24px,
        linear-gradient(180deg, #E8F3EE 0%, #F4F8F6 20%, #F6FAF8 100%);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 110 L0 40 C 300 82 560 90 820 60 C 1060 32 1260 26 1440 52 L1440 110 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0 110 L0 40 C 300 82 560 90 820 60 C 1060 32 1260 26 1440 52 L1440 110 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
    -webkit-mask-size: 100% var(--fv), 100% calc(100% - var(--fv) + 1px); mask-size: 100% var(--fv), 100% calc(100% - var(--fv) + 1px);
    -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
    -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat; }
.fn::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 48% 56% at 50% 46%, #F7FBF9 35%, rgba(247, 251, 249, 0) 100%); }

.fn-deco { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.fnd-orb { position: absolute; border-radius: 50%; }
.fnd-orb.o1 { left: -170px; top: 18%; width: 420px; height: 420px; background: radial-gradient(closest-side, rgba(22, 163, 74, .1), transparent 70%); }
.fnd-orb.o2 { right: -170px; top: 58%; width: 420px; height: 420px; background: radial-gradient(closest-side, rgba(11, 92, 255, .08), transparent 70%); }

/* founder quote */
.fn-quote { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: center; gap: 44px; max-width: 1060px; margin: 0 auto; padding: 38px 44px; border-radius: 30px; background: #fff;
    box-shadow: 0 50px 90px -60px rgba(10, 22, 51, .6), inset 0 0 0 1.5px rgba(10, 22, 51, .06); }
.fn-photo { position: relative; display: grid; place-items: center; }
.fn-photo-ring { position: absolute; inset: -10px; border-radius: 50%; background: conic-gradient(from 200deg, #16A34A, #0B5CFF 40%, #7C3AED 70%, #16A34A); opacity: .28; }
.fn-photo img { position: relative; width: 100%; height: auto; border-radius: 50%; box-shadow: 0 26px 40px -24px rgba(10, 22, 51, .7); }
.fn-badge { position: absolute; bottom: 4px; left: 50%; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 999px; translate: -50% 0; background: linear-gradient(120deg, #16A34A, #22C55E); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    box-shadow: 0 14px 24px -12px rgba(22, 163, 74, .9); }
.fn-body { position: relative; }
.fn-mark { position: absolute; left: -10px; top: -22px; color: rgba(22, 163, 74, .16); font-size: 54px; }
.fn-quote blockquote { position: relative; margin: 0; color: #2B3856; font-size: clamp(17px, 1.7vw, 21px); font-style: italic; font-weight: 600; line-height: 1.6; }
.fn-quote blockquote b { color: var(--ink); font-style: normal; font-weight: 800; }
.fn-sign { display: flex; flex-direction: column; margin-top: 20px; padding-top: 16px; border-top: 1.5px dashed rgba(10, 22, 51, .12); }
.fn-name { color: var(--ink); font-family: var(--display); font-size: clamp(19px, 1.8vw, 23px); font-weight: 800; letter-spacing: -.02em; }
.fn-role { margin-top: 2px; color: #15803D; font-size: 14.5px; font-weight: 800; }

/* risk-free CTA */
.fn-cta { max-width: 900px; margin: 56px auto 0; text-align: center; }
.fn-title { margin: 0; color: var(--ink); font-family: var(--display); font-size: clamp(28px, 3.6vw, 50px); font-weight: 800; line-height: 1.1; letter-spacing: -.04em; text-wrap: balance; }
.fn-hl { background: linear-gradient(100deg, #16A34A, #0D9488 60%, #0B5CFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fn-sub { margin: 16px 0 0; color: #46536E; font-size: clamp(17px, 1.7vw, 21px); font-weight: 600; }
.fn-sub b { color: var(--ink); font-weight: 800; }
.fn-price { color: #15803D; font-family: var(--display); font-size: 1.25em; }
.fn-buy { display: block; max-width: 560px; margin: 26px auto 0; }
.fn-trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: 20px; }
.fn-trust span { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 800; box-shadow: inset 0 0 0 1.5px rgba(10, 22, 51, .08), 0 12px 22px -16px rgba(10, 22, 51, .5); }
.fn-trust i { color: #16A34A; }
.fn-pay { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; color: #7B879F; font-size: 26px; }

@media (max-width: 991.98px) {
    .fn { padding: 52px 0 90px; }
    .fn-bg { --fv: 76px; }
    .fn::before { top: -94px; height: 186px; -webkit-mask-size: 100% 94px, 100% 94px; mask-size: 100% 94px, 100% 94px; }
    .fn-quote { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 30px 26px; text-align: center; }
    .fn-photo { max-width: 220px; margin: 0 auto; }
    .fn-mark { position: static; display: block; margin-bottom: 6px; font-size: 40px; }
    .fn-sign { align-items: center; }
}
@media (max-width: 767.98px) {
    .fn { padding: 42px 0 72px; }
    .fn-bg { --fv: 50px; }
    .fn::before { top: -66px; height: 144px; -webkit-mask-size: 100% 66px, 100% 80px; mask-size: 100% 66px, 100% 80px; }
    .fn-quote { padding: 24px 18px; border-radius: 24px; }
    .fn-title { font-size: 29px; }
    .fn-trust span { padding: 8px 14px; font-size: 13px; }
}

/* ==========================================================
   SECTION 37 — LAUNCH SPECIAL COUNTDOWN
   transition: a hard diagonal slice instead of the wave masks used elsewhere
   ========================================================== */
.jz { --cut: 92px; position: relative; z-index: 31; isolation: isolate; overflow-x: clip; margin-top: calc(-1 * var(--cut)); padding: calc(var(--cut) + 56px) 0 110px; color: #E8ECFA; background: #0A0C1E;
    -webkit-clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%); }
/* bright blade along the cut */
.jz-edge { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--cut) + 8px); z-index: 2; pointer-events: none;
    background: linear-gradient(90deg, #E11D48, #F97316 45%, #FBBF24);
    -webkit-clip-path: polygon(0 var(--cut), 100% 0, 100% 7px, 0 calc(var(--cut) + 7px));
            clip-path: polygon(0 var(--cut), 100% 0, 100% 7px, 0 calc(var(--cut) + 7px)); }
.jz-bg { position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background:
        radial-gradient(ellipse 48% 22% at 50% 8%, rgba(225, 29, 72, .26), transparent 72%),
        radial-gradient(ellipse 34% 20% at 3% 52%, rgba(244, 63, 94, .16), transparent 70%),
        radial-gradient(ellipse 34% 20% at 97% 74%, rgba(22, 163, 74, .18), transparent 70%),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 50% 0 / 68px 68px,
        linear-gradient(0deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 50% 0 / 68px 68px,
        linear-gradient(180deg, #14162E 0%, #0C0E22 44%, #0A0C1E 100%); }

.jz-deco { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.jzd-orb { position: absolute; border-radius: 50%; }
.jzd-orb.o1 { left: -180px; top: 24%; width: 440px; height: 440px; background: radial-gradient(closest-side, rgba(244, 63, 94, .12), transparent 70%); }
.jzd-orb.o2 { right: -180px; top: 58%; width: 440px; height: 440px; background: radial-gradient(closest-side, rgba(74, 222, 128, .1), transparent 70%); }

.jz-head { max-width: 1000px; margin: 0 auto; text-align: center; }
.jz-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin: 0; color: #fff; font-family: var(--display); font-size: clamp(28px, 3.8vw, 52px); font-weight: 800; line-height: 1.1; letter-spacing: -.04em; text-transform: uppercase; }
.jz-siren { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(145deg, #E11D48, #FB7185); color: #fff; font-size: 24px;
    box-shadow: 0 0 0 6px rgba(225, 29, 72, .16), 0 18px 30px -14px rgba(225, 29, 72, .9); animation: jzPulse 1.6s ease-in-out infinite; }
@keyframes jzPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.jz-hl { background: linear-gradient(100deg, #FB7185, #FBBF24); -webkit-background-clip: text; background-clip: text; color: transparent; }

.jz-cd { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 28px; }
.jz-u { display: grid; place-items: center; min-width: 116px; padding: 16px 14px 12px; border-radius: 20px; background: linear-gradient(170deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04)); color: #fff;
    box-shadow: inset 0 0 0 1.5px rgba(251, 113, 133, .35), 0 24px 40px -26px rgba(0, 0, 0, .95); }
.jz-u b { font-family: var(--display); font-size: clamp(34px, 4vw, 54px); font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.jz-u small { margin-top: 7px; color: #A6AFD4; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.jz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; max-width: 1180px; margin: 52px auto 0; }
.jz-col { --a: #E11D48; --a2: #FB7185; position: relative; overflow: hidden; padding: 28px 30px 30px; border-radius: 28px;
    background: linear-gradient(170deg, color-mix(in srgb, var(--a) 16%, rgba(255, 255, 255, .04)), rgba(255, 255, 255, .03) 70%);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--a) 36%, rgba(255, 255, 255, .1)), 0 40px 70px -46px rgba(0, 0, 0, .95); }
.jz-keep { --a: #16A34A; --a2: #4ADE80; }
.jz-col::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--a), var(--a2)); }
.jz-col header { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1.5px dashed rgba(255, 255, 255, .14); }
.jz-badge { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; background: linear-gradient(145deg, var(--a), var(--a2)); color: #fff; font-size: 19px; box-shadow: 0 14px 24px -12px var(--a); }
.jz-col h3 { margin: 0; color: #fff; font-family: var(--display); font-size: clamp(19px, 1.8vw, 23px); font-weight: 800; line-height: 1.22; letter-spacing: -.025em; }
.jz-col ul { display: grid; gap: 16px; margin: 18px 0 0; padding: 0; list-style: none; }
.jz-col li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 13px; }
.jz-ic { display: grid; place-items: center; width: 26px; height: 26px; margin-top: 2px; border-radius: 50%; background: color-mix(in srgb, var(--a) 24%, transparent); color: color-mix(in srgb, var(--a) 40%, #fff); font-size: 12px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--a) 45%, transparent); }
.jz-col li b { display: block; color: #fff; font-size: clamp(16px, 1.45vw, 18px); font-weight: 800; line-height: 1.3; }
.jz-col li p { margin: 5px 0 0; color: #B9C1E0; font-size: clamp(14.5px, 1.3vw, 16px); line-height: 1.55; }
.jz-lose li b { color: #FFE4E9; }
.jz-keep li b { color: #E7FBEF; }

@media (max-width: 991.98px) {
    .jz { --cut: 62px; padding: calc(var(--cut) + 44px) 0 90px; }
    .jz-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: 700px; }
}
@media (max-width: 767.98px) {
    .jz { --cut: 40px; padding: calc(var(--cut) + 34px) 0 72px; }
    .jz-title { gap: 10px; font-size: 27px; }
    .jz-siren { width: 44px; height: 44px; border-radius: 14px; font-size: 19px; }
    .jz-cd { gap: 8px; }
    .jz-u { min-width: 74px; padding: 12px 8px 10px; border-radius: 16px; }
    .jz-col { padding: 22px 18px 24px; border-radius: 22px; }
}

/* ==========================================================
   SECTION 38 — YOUR TOTAL SAVINGS BY ACTING NOW
   transition: the light sheet slides up over the dark section with rounded top corners
   ========================================================== */
.sv { --lift: 54px; position: relative; z-index: 32; isolation: isolate; overflow-x: clip; margin-top: calc(-1 * var(--lift)); padding: calc(var(--lift) + 56px) 0 110px; border-radius: 54px 54px 0 0; color: var(--ink); background: #F5F7FC;
    box-shadow: 0 -30px 60px -20px rgba(0, 0, 0, .55); }
.sv-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; border-radius: inherit; pointer-events: none;
    background:
        radial-gradient(ellipse 44% 16% at 50% 0%, #fff, transparent 72%),
        radial-gradient(ellipse 34% 16% at 2% 40%, rgba(225, 29, 72, .07), transparent 70%),
        radial-gradient(ellipse 34% 16% at 98% 72%, rgba(22, 163, 74, .08), transparent 70%),
        linear-gradient(90deg, rgba(10, 22, 51, .04) 1px, transparent 1px) 50% 0 / 64px 64px,
        linear-gradient(0deg, rgba(10, 22, 51, .04) 1px, transparent 1px) 50% 0 / 64px 64px,
        linear-gradient(180deg, #EEF2FA 0%, #F5F7FC 22%, #F7F9FD 100%); }
.sv::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse 48% 54% at 50% 48%, #F8FAFE 35%, rgba(248, 250, 254, 0) 100%); }
/* the little grab-handle on the lifted sheet */
.sv-bg::before { content: ""; position: absolute; left: 50%; top: 20px; width: 92px; height: 6px; border-radius: 99px; translate: -50% 0; background: rgba(10, 22, 51, .12); }

.sv-deco { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.svd-orb { position: absolute; border-radius: 50%; }
.svd-orb.o1 { left: -170px; top: 24%; width: 420px; height: 420px; background: radial-gradient(closest-side, rgba(225, 29, 72, .08), transparent 70%); }
.svd-orb.o2 { right: -170px; top: 58%; width: 420px; height: 420px; background: radial-gradient(closest-side, rgba(22, 163, 74, .09), transparent 70%); }

.sv-head { max-width: 1000px; margin: 0 auto 44px; text-align: center; }
.sv-kick { display: inline-flex; align-items: center; gap: 10px; padding: 9px 20px; border-radius: 999px; background: #fff; color: #0B4ED6; font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; box-shadow: inset 0 0 0 1.5px rgba(11, 92, 255, .2), 0 12px 24px -14px rgba(11, 92, 255, .6); }
.sv-title { margin: 20px 0 0; color: var(--ink); font-family: var(--display); font-size: clamp(30px, 4vw, 54px); font-weight: 800; line-height: 1.1; letter-spacing: -.04em; text-wrap: balance; }
.sv-hl { background: linear-gradient(100deg, #16A34A, #0B5CFF); -webkit-background-clip: text; background-clip: text; color: transparent; }

.sv-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 22px; max-width: 1140px; margin: 0 auto; }
.sv-card { padding: 30px 32px 32px; border-radius: 28px; }
.sv-after { background: #fff; box-shadow: 0 40px 70px -50px rgba(10, 22, 51, .6), inset 0 0 0 1.5px rgba(10, 22, 51, .08); }
.sv-tag { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: 999px; background: #F1F4FA; color: #46536E; font-size: 13.5px; font-weight: 800; }
.sv-tag em { color: var(--muted); font-style: normal; font-weight: 700; }
.sv-tag-gold { background: linear-gradient(120deg, #F59E0B, #FBBF24); color: #3A2400; }
.sv-rows { margin-top: 20px; }
.sv-rhead { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 0 4px 10px; color: var(--muted); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sv-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 4px; border-top: 1px solid rgba(10, 22, 51, .09); }
.sv-row span { color: #2B3856; font-size: clamp(15px, 1.35vw, 17px); font-weight: 700; line-height: 1.35; }
.sv-row b { color: #46536E; font-size: clamp(14.5px, 1.3vw, 16.5px); font-weight: 700; text-align: right; white-space: nowrap; }
.sv-row b i { color: var(--ink); font-style: normal; font-weight: 800; }
.sv-total { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding: 18px 22px; border-radius: 20px; background: #FFF1F3; box-shadow: inset 0 0 0 1.5px rgba(225, 29, 72, .22); }
.sv-total span { color: #9F1239; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sv-total b { color: #E11D48; font-family: var(--display); font-size: clamp(30px, 3.2vw, 44px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }

.sv-vs { display: grid; place-items: center; }
.sv-vs span { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: #0A1633; color: #fff; font-family: var(--display); font-size: 19px; font-weight: 800; text-transform: uppercase;
    box-shadow: 0 0 0 8px #F5F7FC, 0 18px 30px -14px rgba(10, 22, 51, .8); }

.sv-today { position: relative; overflow: hidden; color: #fff; text-align: center;
    background: radial-gradient(ellipse 70% 40% at 50% 0%, rgba(25, 211, 255, .25), transparent 70%), linear-gradient(165deg, #0B1633 0%, #0A1022 100%);
    box-shadow: 0 46px 80px -46px rgba(10, 22, 51, .95), inset 0 0 0 2px rgba(252, 211, 77, .5); }
.sv-once { margin: 18px 0 0; color: #9AAACF; font-size: 13px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.sv-price { margin: 4px 0 0; font-family: var(--display); font-size: clamp(64px, 7vw, 96px); font-weight: 800; letter-spacing: -.06em; line-height: 1;
    background: linear-gradient(100deg, #FDE68A, #FBBF24 55%, #F59E0B); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sv-price sup { top: -.5em; font-size: .42em; }
.sv-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 20px 0 0; padding: 0; list-style: none; text-align: left; }
.sv-points li { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); color: #DCE4FA; font-size: 14px; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.sv-points i { display: grid; place-items: center; width: 19px; height: 19px; flex: none; border-radius: 50%; background: linear-gradient(145deg, #16A34A, #4ADE80); color: #fff; font-size: 9.5px; }
.sv-save { display: grid; gap: 2px; margin: 20px 0 0; padding: 16px; border-radius: 18px; background: rgba(34, 197, 94, .14); box-shadow: inset 0 0 0 1.5px rgba(74, 222, 128, .4); }
.sv-save span { color: #86EFAC; font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.sv-save b { color: #fff; font-family: var(--display); font-size: clamp(30px, 3.2vw, 42px); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; }
.sv-save small { color: #9AAACF; font-size: 12.5px; font-weight: 700; }
.sv-buy { display: block; margin: 22px auto 0; }

@media (max-width: 991.98px) {
    .sv { --lift: 40px; padding: calc(var(--lift) + 44px) 0 90px; border-radius: 40px 40px 0 0; }
    .sv-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 640px; }
    .sv-vs span { box-shadow: 0 0 0 8px #F5F7FC, 0 14px 24px -12px rgba(10, 22, 51, .8); }
}
@media (max-width: 767.98px) {
    .sv { --lift: 28px; padding: calc(var(--lift) + 34px) 0 72px; border-radius: 30px 30px 0 0; }
    .sv-title { font-size: 30px; }
    .sv-card { padding: 22px 18px 24px; border-radius: 22px; }
    .sv-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .sv-row b { text-align: left; }
    .sv-rhead { display: none; }
    .sv-points { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================
   SECTION 39 — YEAR-ONE SAVINGS
   transition: a wide elliptical dome rises out of the previous section
   ========================================================== */
.ys { --dome: 90px; position: relative; z-index: 33; isolation: isolate; overflow-x: clip; margin-top: calc(-1 * var(--dome)); padding: calc(var(--dome) + 50px) 0 110px; color: #E4ECF7; background: #04182B;
    border-radius: 50% 50% 0 0 / var(--dome) var(--dome) 0 0;
    box-shadow: 0 -26px 60px -18px rgba(45, 212, 191, .28); }
.ys-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; border-radius: inherit; pointer-events: none;
    background:
        radial-gradient(ellipse 70% 30% at 50% -6%, rgba(45, 212, 191, .18), transparent 74%),
        radial-gradient(ellipse 34% 20% at 3% 48%, rgba(11, 92, 255, .22), transparent 70%),
        radial-gradient(ellipse 34% 20% at 97% 76%, rgba(251, 191, 36, .14), transparent 70%),
        radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.4px) 0 0 / 26px 26px,
        linear-gradient(180deg, #072538 0%, #05203150 12%, #062134 46%, #04182B 100%); }

.ys-deco { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.ysd-orb { position: absolute; border-radius: 50%; }
.ysd-orb.o1 { left: -180px; top: 28%; width: 440px; height: 440px; background: radial-gradient(closest-side, rgba(45, 212, 191, .14), transparent 70%); }
.ysd-orb.o2 { right: -180px; top: 62%; width: 440px; height: 440px; background: radial-gradient(closest-side, rgba(251, 191, 36, .12), transparent 70%); }

.ys-head { max-width: 1040px; margin: 0 auto; text-align: center; }
.ys-title { margin: 0; color: #fff; font-family: var(--display); font-size: clamp(28px, 3.8vw, 52px); font-weight: 800; line-height: 1.1; letter-spacing: -.04em; text-transform: uppercase; text-wrap: balance; }
.ys-amt { background: linear-gradient(100deg, #FDE68A, #FBBF24 55%, #5EEAD4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ys-sub { max-width: 820px; margin: 18px auto 0; color: #AFC2D8; font-size: clamp(16.5px, 1.6vw, 20px); font-style: italic; font-weight: 600; line-height: 1.55; text-wrap: balance; }

.ys-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 1140px; margin: 44px auto 0; padding: 0; list-style: none; }
.ys-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 16px; padding: 20px 22px; border-radius: 20px; background: rgba(255, 255, 255, .055); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .1); }
.ys-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(145deg, #0D9488, #2DD4BF); color: #04182B; font-size: 18px; box-shadow: 0 14px 24px -12px rgba(13, 148, 136, .9); }
.ys-list p { margin: 0; color: #B9CADD; font-size: clamp(15px, 1.35vw, 17px); line-height: 1.55; }
.ys-list b { color: #fff; font-weight: 800; }

.ys-statement { max-width: 1000px; margin: 50px auto 0; text-align: center; }
.ys-lead { margin: 0; color: #8FA7C0; font-size: clamp(16px, 1.5vw, 19px); font-weight: 700; font-style: italic; }
.ys-big { margin: 14px 0 0; color: #fff; font-family: var(--display); font-size: clamp(28px, 3.6vw, 50px); font-weight: 800; line-height: 1.14; letter-spacing: -.04em; text-wrap: balance; }
.ys-big span { background: linear-gradient(100deg, #5EEAD4, #38BDF8 60%, #FBBF24); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ys-ai { display: inline-flex; align-items: center; gap: 10px; margin: 20px 0 0; padding: 10px 22px; border-radius: 999px; background: rgba(251, 191, 36, .14); color: #FCD34D; font-size: clamp(15px, 1.5vw, 18px); font-weight: 800; box-shadow: inset 0 0 0 1.5px rgba(252, 211, 77, .4); }

.ys-cta { max-width: 760px; margin: 52px auto 0; padding: 34px 32px 32px; border-radius: 28px; text-align: center;
    background: linear-gradient(170deg, rgba(45, 212, 191, .16), rgba(255, 255, 255, .04));
    box-shadow: inset 0 0 0 2px rgba(94, 234, 212, .45), 0 40px 70px -44px rgba(0, 0, 0, .95); }
.ys-cta h3 { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0; color: #fff; font-family: var(--display); font-size: clamp(24px, 2.8vw, 36px); font-weight: 800; letter-spacing: -.03em; }
.ys-cta h3 i { color: #4ADE80; }
.ys-cta > p { margin: 12px 0 0; color: #B9CADD; font-size: clamp(16px, 1.5vw, 18px); font-weight: 600; }
.ys-cta > p b { color: #FCD34D; font-family: var(--display); font-size: 1.25em; font-weight: 800; }
.ys-buy { display: block; max-width: 520px; margin: 22px auto 0; }
.ys-note { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 16px 0 0; color: #86EFAC; font-size: 14px; font-weight: 800; }

@media (max-width: 991.98px) {
    .ys { --dome: 60px; padding: calc(var(--dome) + 40px) 0 90px; }
    .ys-list { grid-template-columns: minmax(0, 1fr); max-width: 700px; }
}
@media (max-width: 767.98px) {
    .ys { --dome: 36px; padding: calc(var(--dome) + 30px) 0 72px; }
    .ys-title { font-size: 28px; }
    .ys-list li { padding: 16px 16px; gap: 13px; }
    .ys-ic { width: 40px; height: 40px; font-size: 16px; }
    .ys-cta { padding: 26px 18px 26px; border-radius: 22px; }
}

/* ==========================================================
   SECTION 40 — FAQ (two-column accordion)
   transition: a stepped staircase edge
   ========================================================== */
.fq { --step: 66px; position: relative; z-index: 34; isolation: isolate; overflow-x: clip; margin-top: calc(-1 * var(--step)); padding: calc(var(--step) + 54px) 0 110px; color: var(--ink); background: #F6F8FD;
    -webkit-clip-path: polygon(0 var(--step), 25% var(--step), 25% calc(var(--step) * .62), 50% calc(var(--step) * .62), 50% calc(var(--step) * .3), 75% calc(var(--step) * .3), 75% 0, 100% 0, 100% 100%, 0 100%);
            clip-path: polygon(0 var(--step), 25% var(--step), 25% calc(var(--step) * .62), 50% calc(var(--step) * .62), 50% calc(var(--step) * .3), 75% calc(var(--step) * .3), 75% 0, 100% 0, 100% 100%, 0 100%); }
.fq-bg { position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background:
        radial-gradient(ellipse 44% 16% at 50% 2%, #fff, transparent 72%),
        radial-gradient(ellipse 34% 16% at 2% 38%, rgba(11, 92, 255, .07), transparent 70%),
        radial-gradient(ellipse 34% 16% at 98% 74%, rgba(124, 58, 237, .07), transparent 70%),
        linear-gradient(90deg, rgba(10, 22, 51, .035) 1px, transparent 1px) 50% 0 / 64px 64px,
        linear-gradient(0deg, rgba(10, 22, 51, .035) 1px, transparent 1px) 50% 0 / 64px 64px,
        linear-gradient(180deg, #EFF3FB 0%, #F6F8FD 20%, #F8FAFE 100%); }
.fq-deco { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.fqd-orb { position: absolute; border-radius: 50%; }
.fqd-orb.o1 { left: -170px; top: 22%; width: 420px; height: 420px; background: radial-gradient(closest-side, rgba(11, 92, 255, .08), transparent 70%); }
.fqd-orb.o2 { right: -170px; top: 62%; width: 420px; height: 420px; background: radial-gradient(closest-side, rgba(124, 58, 237, .08), transparent 70%); }
.fqd-3d { position: absolute; display: none; left: max(12px, calc(50% - 560px - 170px)); top: 210px; width: min(150px, 10vw); height: auto; rotate: -10deg; animation: floaty 8s ease-in-out infinite; }
@media (min-width: 1400px) { .fqd-3d { display: block; } }

.fq-head { max-width: 980px; margin: 0 auto 44px; text-align: center; }
.fq-kick { display: inline-flex; align-items: center; gap: 10px; padding: 9px 20px; border-radius: 999px; background: #fff; color: #0B4ED6; font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; box-shadow: inset 0 0 0 1.5px rgba(11, 92, 255, .2), 0 12px 24px -14px rgba(11, 92, 255, .6); }
.fq-title { margin: 20px 0 0; color: var(--ink); font-family: var(--display); font-size: clamp(30px, 4vw, 54px); font-weight: 800; line-height: 1.1; letter-spacing: -.04em; text-transform: uppercase; }
.fq-hl { background: linear-gradient(100deg, #0B5CFF, #7C3AED); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fq-sub { max-width: 780px; margin: 16px auto 0; color: #46536E; font-size: clamp(16px, 1.55vw, 19px); font-weight: 600; line-height: 1.55; text-wrap: balance; }

/* accordion */
.fq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; max-width: 1160px; margin: 0 auto; }
.fq-item { overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 26px 44px -40px rgba(10, 22, 51, .6), inset 0 0 0 1.5px rgba(10, 22, 51, .08); }
.fq-item summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 20px 22px; cursor: pointer; list-style: none; }
.fq-item summary::-webkit-details-marker { display: none; }
.fq-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(145deg, #0B5CFF, #19D3FF); color: #fff; font-family: var(--display); font-size: 14px; font-weight: 800; }
.fq-q { color: var(--ink); font-size: clamp(16px, 1.45vw, 18px); font-weight: 800; line-height: 1.35; }
.fq-item summary i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #F1F4FA; color: #0B4ED6; font-size: 13px; transition: transform .25s ease, background .25s ease; }
.fq-item[open] summary i { background: #0B5CFF; color: #fff; transform: rotate(45deg); }
.fq-item[open] { box-shadow: 0 30px 50px -36px rgba(11, 92, 255, .6), inset 0 0 0 2px rgba(11, 92, 255, .3); }
.fq-a { padding: 0 22px 22px 70px; }
.fq-a p { margin: 0 0 12px; color: #46536E; font-size: clamp(15px, 1.35vw, 16.5px); line-height: 1.6; }
.fq-a p:last-child { margin-bottom: 0; }
.fq-a b { color: var(--ink); font-weight: 800; }

/* "I'm here for you" cutout beside the list — only when there is real room next to it */
.fq-help { position: absolute; right: max(8px, calc(50% - 596px - 300px)); bottom: 96px; z-index: 1; display: none; width: min(300px, calc(50vw - 600px)); pointer-events: none; }
.fq-person { width: 100%; height: auto;
    -webkit-mask-image: linear-gradient(#000 82%, transparent 99%);
            mask-image: linear-gradient(#000 82%, transparent 99%); }
.fq-help-empty { display: none !important; }
@media (min-width: 1560px) { .fq-help { display: block; } }

.fq-cta { max-width: 760px; margin: 44px auto 0; text-align: center; }
.fq-cta p { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 12px 24px; border-radius: 999px; background: #fff; color: var(--ink); font-size: clamp(15px, 1.4vw, 17px); font-weight: 800; box-shadow: inset 0 0 0 1.5px rgba(10, 22, 51, .08), 0 16px 28px -20px rgba(10, 22, 51, .5); }
.fq-cta i { color: #0B5CFF; }

@media (max-width: 991.98px) {
    .fq { --step: 44px; padding: calc(var(--step) + 42px) 0 90px; }
    .fq-list { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
}
@media (max-width: 767.98px) {
    .fq { --step: 28px; padding: calc(var(--step) + 32px) 0 72px; }
    .fq-title { font-size: 30px; }
    .fq-item summary { gap: 11px; padding: 16px 16px; }
    .fq-a { padding: 0 16px 18px 16px; }
}

/* ==========================================================
   SECTION 41 — HIGHEST-ROI INVESTMENT (text only)
   transition: no shape — a hairline rule with a star sitting on it
   ========================================================== */
.roi { position: relative; z-index: 35; isolation: isolate; overflow-x: clip; padding: 84px 0 110px; color: var(--ink); background: #FFFFFF; }
.roi-bg { position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background:
        linear-gradient(90deg, transparent, rgba(11, 92, 255, .35) 18%, rgba(124, 58, 237, .35) 50%, rgba(11, 92, 255, .35) 82%, transparent) 0 0 / 100% 2px no-repeat,
        radial-gradient(ellipse 40% 18% at 50% 0%, rgba(11, 92, 255, .07), transparent 72%),
        linear-gradient(180deg, #FBFCFF 0%, #FFFFFF 26%, #FFFFFF 100%); }
.roi-star { position: absolute; left: 50%; top: -25px; z-index: 1; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; translate: -50% 0; background: linear-gradient(145deg, #F59E0B, #FBBF24); color: #fff; font-size: 18px;
    box-shadow: 0 0 0 8px #fff, 0 16px 26px -14px rgba(245, 158, 11, .9); }

.roi-wrap { max-width: 860px; margin: 0 auto; }
.roi-title { margin: 0; color: var(--ink); font-family: var(--display); font-size: clamp(30px, 3.8vw, 50px); font-weight: 800; line-height: 1.12; letter-spacing: -.04em; text-align: center; text-wrap: balance; }
.roi-hl { background: linear-gradient(100deg, #D97706, #F59E0B 55%, #0B5CFF); -webkit-background-clip: text; background-clip: text; color: transparent; }

.roi-wrap p { color: #3E4B66; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.65; }
.roi-wrap b { color: var(--ink); font-weight: 800; }
.roi-intro { margin-top: 34px; }
.roi-intro p { margin: 0 0 10px; }
.roi-lead { color: var(--ink) !important; font-weight: 800; }
.roi-strong { color: var(--ink) !important; font-family: var(--display); font-size: clamp(20px, 2vw, 26px) !important; font-weight: 800; letter-spacing: -.02em; }
.roi-strong b { background: linear-gradient(100deg, #0B5CFF, #7C3AED); -webkit-background-clip: text; background-clip: text; color: transparent; }

.roi-block { margin-top: 30px; padding-left: 22px; border-left: 3px solid rgba(11, 92, 255, .22); }
.roi-block p { margin: 0 0 10px; }
.roi-q { color: var(--ink) !important; font-family: var(--display); font-size: clamp(19px, 1.8vw, 23px) !important; font-weight: 800; letter-spacing: -.02em; }
.roi-kick { color: var(--ink) !important; font-weight: 800; }
.roi-list { display: grid; gap: 9px; margin: 14px 0 0; padding: 0; list-style: none; }
.roi-list-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 22px; }
.roi-list li { position: relative; padding-left: 26px; color: #3E4B66; font-size: clamp(16px, 1.5vw, 18px); font-weight: 700; line-height: 1.5; }
.roi-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(145deg, #0B5CFF, #19D3FF); }
.roi-list-2 li::before { background: linear-gradient(145deg, #16A34A, #4ADE80); }
.roi-para { margin: 30px 0 0; }

.roi-diff { margin-top: 40px; padding-top: 30px; border-top: 1.5px dashed rgba(10, 22, 51, .14); }
.roi-diff p { margin: 0 0 10px; }
.roi-expense { color: #9AA3B8 !important; font-weight: 700; }
.roi-big { margin: 16px 0 0 !important; color: var(--ink) !important; font-family: var(--display); font-size: clamp(28px, 3.4vw, 46px) !important; font-weight: 800; line-height: 1.12; letter-spacing: -.04em; text-wrap: balance; }
.roi-big span { background: linear-gradient(100deg, #16A34A, #0B5CFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.roi-own { display: grid; gap: 4px; margin: 20px 0 0; padding: 0; list-style: none; }
.roi-own li { color: var(--ink); font-family: var(--display); font-size: clamp(18px, 1.8vw, 22px); font-weight: 800; letter-spacing: -.02em; }
.roi-own li:last-child { color: #0B4ED6; }

.roi-close { margin-top: 40px; padding-top: 30px; border-top: 1.5px dashed rgba(10, 22, 51, .14); }
.roi-if { margin: 0 !important; }
.roi-final { margin: 16px 0 0 !important; color: var(--ink) !important; font-family: var(--display); font-size: clamp(28px, 3.6vw, 48px) !important; font-weight: 800; line-height: 1.12; letter-spacing: -.04em; text-wrap: balance; }
.roi-final span { background: linear-gradient(100deg, #D97706, #F59E0B); -webkit-background-clip: text; background-clip: text; color: transparent; }

@media (max-width: 767.98px) {
    .roi { padding: 64px 0 72px; }
    .roi-title { font-size: 29px; }
    .roi-block { padding-left: 16px; }
    .roi-list-2 { grid-template-columns: minmax(0, 1fr); }
    .roi-big, .roi-final { font-size: 27px !important; }
}

/* ==========================================================
   SECTION 42 — P.S. / P.P.S. CLOSING (text only, light)
   transition: a single gradient rule across the top, nothing cut out
   ========================================================== */
.ps { position: relative; z-index: 36; isolation: isolate; overflow-x: clip; padding: 76px 0 110px; color: var(--ink); background: #F7F8FD; border-top: 6px solid transparent;
    border-image: linear-gradient(90deg, #0B5CFF, #7C3AED 45%, #F59E0B) 1; }
.ps-bg { position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background:
        radial-gradient(ellipse 46% 18% at 50% 0%, rgba(11, 92, 255, .08), transparent 72%),
        radial-gradient(ellipse 34% 20% at 3% 54%, rgba(124, 58, 237, .06), transparent 70%),
        radial-gradient(ellipse 34% 20% at 97% 80%, rgba(245, 158, 11, .07), transparent 70%),
        linear-gradient(180deg, #F1F4FC 0%, #F7F8FD 26%, #FAFBFE 100%); }

.ps-wrap { max-width: 860px; margin: 0 auto; }
.ps-wrap p { color: #3E4B66; font-size: clamp(16.5px, 1.55vw, 19px); line-height: 1.65; }
.ps-wrap b { color: var(--ink); font-weight: 800; }
.ps-block + .ps-block { margin-top: 44px; padding-top: 38px; border-top: 1.5px dashed rgba(10, 22, 51, .16); }
.ps-label { margin: 0 0 14px !important; color: var(--ink) !important; font-family: var(--display); font-size: clamp(30px, 3.4vw, 44px) !important; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.ps-lead { margin: 0 0 12px; color: var(--ink) !important; font-weight: 800; }
.ps-list { display: grid; gap: 9px; margin: 0 0 18px; padding: 0; list-style: none; }
.ps-list li { position: relative; padding-left: 26px; color: #3E4B66; font-size: clamp(16px, 1.5vw, 18px); font-weight: 700; line-height: 1.5; }
.ps-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(145deg, #E11D48, #FB7185); }
.ps-or { margin: 0 0 22px; }
.ps-or span { color: #8892AB; }
.ps-big { margin: 0 !important; color: var(--ink) !important; font-family: var(--display); font-size: clamp(28px, 3.4vw, 46px) !important; font-weight: 800; line-height: 1.12; letter-spacing: -.04em; }
.ps-big-2 { margin-top: 6px !important; background: linear-gradient(100deg, #0B5CFF, #7C3AED 55%, #D97706); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.ps-stack { display: grid; gap: 4px; margin: 0 0 18px; padding: 0; list-style: none; }
.ps-stack li { color: #3E4B66; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.55; }
.ps-stack b { color: var(--ink); font-weight: 800; }
.ps-wrap .ps-block > p { margin: 0 0 14px; }
.ps-quote { margin: 18px 0 14px !important; color: var(--ink) !important; font-family: var(--display); font-size: clamp(26px, 3.2vw, 42px) !important; font-weight: 800; line-height: 1.16; letter-spacing: -.04em; }
.ps-quote span { background: linear-gradient(100deg, #D97706, #F59E0B 55%, #0B5CFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ps-wait { color: var(--ink) !important; font-weight: 800; }

.ps-offer { margin-top: 48px; padding-top: 38px; border-top: 1.5px dashed rgba(10, 22, 51, .16); text-align: center; }
.ps-was { margin: 0 !important; color: #8892AB !important; font-family: var(--display); font-size: clamp(20px, 2vw, 26px) !important; font-weight: 800; }
.ps-was s { text-decoration-color: #E11D48; text-decoration-thickness: 3px; }
.ps-now { margin: 10px 0 0 !important; color: var(--ink) !important; font-family: var(--display); font-size: clamp(20px, 2.2vw, 28px) !important; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; text-wrap: balance; }
.ps-now b { background: linear-gradient(100deg, #D97706, #F59E0B); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 1.35em; }
.ps-buy { display: block; max-width: 600px; margin: 24px auto 0; }
.ps-terms { margin: 16px 0 0 !important; color: #46536E !important; font-size: clamp(15px, 1.4vw, 17px) !important; font-weight: 700; }
.ps-terms-g { margin-top: 6px !important; color: #15803D !important; font-weight: 800; }
.ps-value { max-width: 760px; margin: 22px auto 0 !important; color: #55627E !important; font-size: clamp(15.5px, 1.45vw, 18px) !important; font-style: italic; line-height: 1.6; text-wrap: balance; }
.ps-gold { color: #B45309 !important; }

@media (max-width: 767.98px) {
    .ps { padding: 58px 0 72px; }
    .ps-big, .ps-quote { font-size: 27px !important; }
    .ps-label { font-size: 30px !important; }
}

/* ==========================================================
   FOOTER (shared with the JV page)
   ========================================================== */
.site-footer { position: relative; isolation: isolate; overflow: hidden; padding: 150px 0 0; color: #C9D6F2; text-align: center; clip-path: polygon(0 80px, 100% 0, 100% 100%, 0 100%);
    background: radial-gradient(ellipse 50% 40% at 50% 0%, rgba(22, 131, 255, .28), transparent 70%), linear-gradient(180deg, #0A1636 0%, #050B1F 60%, #03081A 100%); }
.ft-map { position: absolute; inset: 0; z-index: -1; background: url(../images/map-dark.svg) center / cover no-repeat; opacity: .55;
    -webkit-mask-image: radial-gradient(ellipse 65% 60% at 50% 42%, rgba(0, 0, 0, .15) 25%, #000 85%);
            mask-image: radial-gradient(ellipse 65% 60% at 50% 42%, rgba(0, 0, 0, .15) 25%, #000 85%); }

.ft-logo { display: block; width: min(300px, 70%); height: auto; margin: 0 auto; }
.ft-tag { margin: 10px 0 0; font-family: 'Caveat', cursive; font-size: 26px; font-weight: 700; color: var(--cyan); }

.ft-legal { max-width: 920px; margin: 40px auto 0; }
.ft-legal h4 { margin: 0 0 10px; font-size: 14px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.ft-legal p { margin: 0 0 28px; font-size: 13.5px; line-height: 1.75; color: #93A4C8; }

.ft-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 0; max-width: 920px; margin: 10px auto 0; padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.ft-links a { padding: 2px 18px; font-size: 14px; font-weight: 600; color: #DCE6FA; text-decoration: none; }
.ft-links a + a { border-left: 1px solid rgba(255, 255, 255, .18); }
.ft-links a:hover { color: var(--cyan); }
.ft-copy { margin: 18px 0 0; font-size: 13px; color: #6F82AB; }

/* bottom cityscape: far skyline → giant wordmark → near lit skyline (static) */
.ft-city { position: relative; height: clamp(190px, 22vw, 330px); margin-top: 30px; overflow: hidden; pointer-events: none; user-select: none; }
.ft-city::before { content: ""; position: absolute; left: 50%; bottom: -40%; z-index: 0; width: 120%; height: 90%; margin-left: -60%; border-radius: 50%; background: radial-gradient(ellipse, rgba(25, 180, 255, .28), transparent 65%); }
.ftc-far { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; height: 96%; background: url(../images/skyline-stage.svg) center bottom / auto 100% repeat-x; opacity: .42; }
.ft-wordmark { position: absolute; left: 0; right: 0; top: 4%; z-index: 1; font-family: 'Anton', sans-serif; font-size: clamp(60px, 16vw, 250px); line-height: .9; letter-spacing: .02em; text-align: center; text-transform: uppercase; white-space: nowrap;
    background: linear-gradient(180deg, rgba(120, 225, 255, .6) 0%, rgba(25, 160, 255, .3) 45%, rgba(22, 131, 255, .08) 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ftc-near { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 60%; background: url(../images/skyline-night.svg) center bottom / auto 100% repeat-x; }
.ft-pin { position: absolute; z-index: 3; width: 22px; height: 30px; transform: translateX(-50%); filter: drop-shadow(0 6px 10px rgba(25, 140, 255, .6)); }
.ft-pin svg { display: block; width: 100%; height: 100%; }
.ft-pin::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 34px; height: 9px; border: 2px solid rgba(25, 211, 255, .55); border-radius: 50%; transform: translateX(-50%); animation: pinPulse 2.6s ease-out infinite; }

@media (max-width: 767.98px) {
    .site-footer { padding-top: 100px; clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%); }
    .ft-tag { font-size: 22px; }
    .ft-legal { margin-top: 30px; }
    .ft-legal p { font-size: 12.5px; }
    .ft-links { gap: 10px 20px; }
    .ft-links a { padding: 2px 0; font-size: 13px; }
    .ft-links a + a { border-left: 0; }
    .ft-wordmark { font-size: 18.5vw; top: 10%; }
    .ft-city { height: 190px; margin-top: 20px; }
    .ftc-near { height: 55%; }
    .ft-pin { width: 16px; height: 22px; }
}


/* trust row parity: guarantee + card logos on every CTA */
.sv-note { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 14px 0 0; color: #86EFAC; font-size: 13.5px; font-weight: 800; }
.sv-pay, .ys-pay { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; color: #8FA0C6; font-size: 24px; }
.ps-pay { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; color: #7B879F; font-size: 24px; }

/* ==========================================================
   STICKY BOTTOM BAR
   ========================================================== */
.stickybar { position: fixed; left: 50%; bottom: 12px; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 18px; width: min(1080px, calc(100% - 24px)); padding: 10px 12px 10px 22px; border-radius: 20px; background: rgba(5, 12, 34, .95); color: #DCE6FA; box-shadow: 0 24px 50px -12px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(127, 227, 255, .22); transform: translateX(-50%); animation: barIn .7s .9s cubic-bezier(.2, .7, .2, 1) both; }
.sb-coupon { display: flex; align-items: center; gap: 10px; }
.sb-txt { font-size: 14px; font-weight: 600; }
.sb-code { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px; border: 1.5px dashed var(--gold); border-radius: 9px; background: rgba(255, 201, 60, .1); color: var(--gold-soft); font: 800 15px/1.2 'Geist', sans-serif; letter-spacing: .12em; cursor: pointer; transition: background .2s; }
.sb-code i { font-size: 13px; opacity: .8; }
.sb-code:hover { background: rgba(255, 201, 60, .2); }
.sb-code::after { content: "Copied!"; position: absolute; left: 50%; bottom: calc(100% + 8px); padding: 4px 10px; border-radius: 6px; background: var(--gold); color: #1A1200; font-size: 12px; letter-spacing: .02em; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%, 4px); transition: opacity .2s, transform .2s; }
.sb-code.copied::after { opacity: 1; transform: translate(-50%, 0); }
.sb-timer { display: flex; align-items: center; gap: 12px; }
.sb-lbl { color: #9FB0D6; font-size: 11px; font-weight: 800; letter-spacing: .14em; line-height: 1.25; text-align: right; text-transform: uppercase; }
.sb-cta { padding: 14px 26px; font-size: 16px; background: var(--grad-cta); text-shadow: 0 1px 1px rgba(120, 30, 0, .45); box-shadow: 0 12px 26px -10px rgba(245, 95, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .4); }
.sb-cta:hover { box-shadow: 0 16px 32px -10px rgba(245, 95, 0, 1), inset 0 1px 0 rgba(255, 255, 255, .4); }
.sb-cta-s { display: none; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (min-width: 1200px) {
    .prop, .vsl-note, .h-icons { display: block; }
}
@media (max-width: 1439.98px) {
    .prop { scale: .84; }
}
@media (max-width: 1399.98px) {
    .chain { gap: 6px; }
    .ch-step { font-size: 15.5px; padding-right: 13px; }
    .ch-arrow { width: 16px; }
    .mp { width: 22vw; }
}
@media (max-width: 1299.98px) {
    .prop { scale: .72; }
    .vsl-note { width: 170px; font-size: 26px; }
    .vsl-note svg { width: 120px; margin-left: -26px; }
    .mp { width: 19vw; }
}
@media (max-width: 1199.98px) {
    .chain { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 640px; }
    .ch-arrow { display: none; }
    .ch-step { white-space: normal; }
    .offer { grid-template-columns: 250px 1fr; gap: 30px; padding-right: 32px; }
    .hero { padding-bottom: 40px; }
    /* the two hero cutouts are a desktop-only flourish */
    .mp-wrap { display: none; }
}
@media (max-width: 991.98px) {
    .feat-grid { grid-template-columns: 1fr 1fr; max-width: 680px; }
    .offer { grid-template-columns: 1fr; gap: 0; max-width: 620px; margin-top: 140px; padding: 0 28px 28px; text-align: center; }
    .offer-box { width: 230px; margin: 0 auto; }
    .offer-box img { margin: -110px 0 -10px; }
    .price-row { justify-content: center; }
    .trust { flex-direction: column; }
    .sb-lbl { display: none; }
}
@media (max-width: 767.98px) {

    .nav-logo img { height: 42px; }
    .nav-links a { margin-left: 22px; font-size: 13.5px; }
    .nav-links a + a::before { left: -11px; }
    .nav-links .nl-bonuses { display: none; }
    .hero { padding: 20px 0 32px; }
    .eyebrow { border-radius: 20px; font-size: 14.5px; padding-right: 16px; }
    .eyebrow b { white-space: normal; }
    .ht-2 { margin-top: 14px; }
    .vsl-wrap { margin-top: 40px; }
    .vsl-channel { display: none; }
    .feat-grid { margin-top: 44px; gap: 10px; }
    .feat-grid li { padding: 12px; gap: 10px; font-size: 14.5px; }
    .ft-ic { width: 36px; height: 36px; font-size: 15px; border-radius: 10px; }
    .p-new { font-size: 68px; }
    .bb-main { font-size: 19px; }
    .bb-sub { font-size: 14px; }
    .f-city { height: 300px; }
    .fc-far { height: 220px; bottom: 34px; }
    .fc-near { height: 150px; }
    .city-pin, .f-beams { display: none; }
    .stickybar { gap: 10px; padding: 8px 8px 8px 12px; border-radius: 16px; }
    .sb-txt { display: none; }
    .sb-cta { padding: 12px 16px; font-size: 14.5px; }
    .sb-cta-l { display: none; }
    .sb-cta-s { display: inline; }
}
@media (max-width: 479.98px) {
    .nav-links .nl-demo { display: none; }
    .nav-links .nl-faq { display: none; }
    .nav-links a + a::before { display: none; }
    .ch-step { font-size: 13.5px; gap: 8px; padding: 7px 9px 7px 7px; }
    .ch-ic { width: 28px; height: 28px; font-size: 12px; }
    .feat-grid { grid-template-columns: 1fr; max-width: 340px; gap: 8px; }
    .feat-grid li { padding: 9px 12px; }
    .ft-ic { width: 32px; height: 32px; font-size: 14px; }
    .offer { padding: 0 18px 22px; }
    .mbg-txt { font-size: 14px; }
    .pay { font-size: 26px; }
    .sb-code { padding: 5px 8px; font-size: 13px; gap: 6px; }
    .cd { gap: 3px; }
    .cd > i { display: none; }
    .cd-u { min-width: 36px; padding: 3px 4px 2px; }
    .cd-u b { font-size: 18px; }
    .cd-u small { font-size: 8px; }
    .sb-cta { padding: 11px 13px; }
    .sb-cta-s { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .rise { opacity: 1; transform: none; animation: none; }
    .pp-toast, .pd-card, .hi, .city-pin, .city-pin::after, .btn-buy::before, .bb-shine::after, .stickybar { animation: none; }
}

/* ---------- keyframes ---------- */
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes barIn { from { opacity: 0; transform: translate(-50%, 24px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pinBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pinPulse { 0% { opacity: .9; transform: translateX(-50%) scale(.4); } 100% { opacity: 0; transform: translateX(-50%) scale(1.6); } }
@keyframes twinkle { 0%, 100% { opacity: 1; transform: scale(1) rotate(0); } 50% { opacity: .35; transform: scale(.6) rotate(45deg); } }
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes blink { to { visibility: hidden; } }
@keyframes shine { 0% { left: -60%; } 55%, 100% { left: 130%; } }
@keyframes ctaRing { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.06, 1.4); opacity: 0; } }
@keyframes ring { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-14deg); } 80% { transform: rotate(12deg); } 85% { transform: rotate(-8deg); } 90% { transform: rotate(5deg); } }

/* ==========================================================
   TEMPORARY — HIDDEN FOR NOW (2026-09-18)
   To bring both back: DELETE THIS WHOLE BLOCK. Nothing else was
   changed — the markup, the copy-to-clipboard JS and every other
   rule are untouched, so removing these two lines fully restores them.
     1. .pc-coupon  — "Use Coupon Code LMEVIP at checkout" inside the pricing table
     2. .stickybar  — sticky bottom bar (coupon + countdown + Get Instant Access)
   ========================================================== */
.pc-coupon,
.stickybar { display: none !important; }

/* ==========================================================
   REAL PRODUCT SCREENSHOTS (.app-shot)
   Shared frame for the real app / publication captures. A wide UI
   capture is unreadable at phone width, so each one ships a cropped
   <source> for <=767 and the full screen above that.
   ========================================================== */
.app-shot { max-width: 1080px; margin: 40px auto 0; padding: 0; border-radius: 18px; overflow: hidden;
    box-shadow: 0 46px 80px -40px rgba(0, 0, 0, .85), 0 0 0 1.5px rgba(255, 255, 255, .16), 0 0 70px -30px rgba(25, 211, 255, .5); }
.app-shot picture, .app-shot img { display: block; width: 100%; height: auto; }
/* on a light ground the cyan halo reads as haze, so swap it for a soft ink shadow */
.app-shot-light { box-shadow: 0 40px 70px -38px rgba(10, 22, 51, .55), 0 0 0 1.5px rgba(10, 22, 51, .1); }

@media (max-width: 991.98px) { .app-shot { max-width: 100%; margin-top: 32px; border-radius: 14px; } }
@media (max-width: 767.98px) { .app-shot { margin-top: 24px; border-radius: 12px; } }