/* ----------------------------------------------------------
   Minimal base, replacing Bootstrap 5.2.3.
   The page only ever uses .container, .container-xl,
   .position-relative and .text-center. These rules reproduce
   Bootstrap's container breakpoints and the parts of Reboot the
   layout relies on, byte-for-byte in behaviour.
   ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote { margin-top: 0; }
ul, ol { padding-left: 0; }
img, svg, video, iframe { vertical-align: middle; }
button { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
a { color: inherit; }
s { text-decoration-line: line-through; }
sup { position: relative; font-size: .75em; line-height: 0; vertical-align: baseline; }

.container, .container-xl { width: 100%; padding-right: 12px; padding-left: 12px; margin-right: auto; margin-left: auto; }
@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container, .container-xl { max-width: 1140px; } }
@media (min-width: 1400px) { .container, .container-xl { max-width: 1320px; } }
.position-relative { position: relative !important; }
.text-center { text-align: center !important; }

/* ==========================================================
   LOCAL MEDIA EMPIRE — THE BUNDLE / PLATINUM BUNDLE PAGE
   Same design system as the FE sales page and the Pro, Local
   Directory and Local Client Version OTOs, re-themed to the
   Bundle box art: NEON VIOLET + MAGENTA on a near-black plum
   ground. The box is a wall of purple glow, so on the page the
   violet is the ACCENT, not the ground — the ground goes almost
   to black with a plum cast and the neon lands on a handful of
   elements. The CTA stays GREEN (the accept colour carried over
   from the Pro page): violet and magenta have no contrast left
   to give once they own the page.
   ========================================================== */

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

:root {
    --ink: #1C0A33;
    --ink-2: #3A2159;
    --muted: #6E5A8C;

    /* the violet charge that replaces the FE's brand blue.
       Brand blue survives only inside the logo artwork itself. */
    --blue: #7A22F5;
    --blue-2: #8B5CF6;
    /* --cyan keeps the FE class names working; here it is the
       box art's MAGENTA, the second accent next to the violet */
    --cyan: #E85CFF;

    /* VIOLET palette — off the Bundle box art */
    --vio: #C77DFF;
    --vio-soft: #F0DCFF;
    --vio-2: #A855F7;
    --vio-deep: #7B2CBF;
    --plum: #3B1160;
    --night: #08040F;
    --night-2: #1B0E30;

    --paper: #FAF5FF;
    --red: #FF2E4D;
    --green: #22C55E;
    --amber: #FF8A00;

    --grad: linear-gradient(100deg, #6D18E8 0%, #8B5CF6 52%, #E85CFF 100%);
    /* neon violet — slabs, pills, seals, icon tiles.
       Starts white-hot so it reads as a lit edge, not flat purple. */
    --grad-vio: linear-gradient(100deg, #FFFFFF 0%, #E9C6FF 32%, #C77DFF 66%, #F7EBFF 100%);
    --grad-vio-text: linear-gradient(100deg, #FFFFFF 0%, #E3B4FF 34%, #C77DFF 58%, #FFF0FF 100%);
    /* the box art's own wordmark ramp — deep violet into magenta,
       used where the fill carries WHITE text instead of plum */
    --grad-neon: linear-gradient(100deg, #7A22F5 0%, #A855F7 42%, #C026D3 72%, #E85CFF 100%);
    /* accept button — green, same as the Pro page: violet and
       magenta have no contrast left to give once they own the page */
    --grad-cta: linear-gradient(100deg, #0E8B3C 0%, #1BB24C 48%, #37D45F 100%);
    --display: 'Bricolage Grotesque', 'Geist', sans-serif;

    /* the shared FE SVGs are natively blue (~215deg). A small
       hue-rotate walks them to violet; no sepia needed, unlike
       the gold (Pro) and green (Local Directory) pages. */
    --tint-vio: hue-rotate(46deg) saturate(1.15) brightness(1.02);
}

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

.w400 { font-weight: 400; } .w500 { font-weight: 500; } .w600 { font-weight: 600; } .w700 { font-weight: 700; } .w800 { font-weight: 800; } .w900 { font-weight: 900; }
.anton { font-family: 'Anton', sans-serif; }
.caveat { font-family: 'Caveat', cursive; }
.vio-text { background: var(--grad-vio); -webkit-background-clip: text; background-clip: text; color: transparent; }

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

/* scroll reveal for everything below the fold — js/script.js adds .in.
   Gated on .js so the content is visible if scripting is off. */
.js .reveal { opacity: 0; transform: translateY(26px); 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; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* ==========================================================
   DELIVERY / WARNING STRIP  (top of the page)
   ========================================================== */
.deliver { position: relative; z-index: 40; overflow: hidden; background: linear-gradient(90deg, #0A0F18 0%, #101928 35%, #121C2D 70%, #090D16 100%); box-shadow: inset 0 -1px 0 rgba(168, 85, 247, .3), 0 10px 30px -14px rgba(0, 0, 0, .9); }
.deliver::before { content: ""; position: absolute; inset: 0; opacity: .32; pointer-events: none;
    background: repeating-linear-gradient(115deg, rgba(199, 125, 255, .09) 0 14px, transparent 14px 30px); }
.dl-in { position: relative; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 22px; padding: 11px 16px 13px; text-align: left; }

.dl-msg { display: flex; align-items: center; gap: 12px; }
.dl-ic { position: relative; display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--grad-vio); color: #1A0A2E; font-size: 16px; box-shadow: 0 8px 18px -8px rgba(168, 85, 247, .9), inset 0 1px 0 rgba(255, 255, 255, .8); }
.dl-ic::after { content: ""; position: absolute; inset: -4px; border-radius: 16px; border: 1.5px solid rgba(199, 125, 255, .5); animation: ctaRing 2.4s ease-out infinite; }
.dl-ic i { animation: truck 2.6s ease-in-out infinite; }
.dl-txt { color: #F3E8FF; font-size: 15.5px; font-weight: 800; line-height: 1.3; }
.dl-txt small { display: block; color: #A08BBE; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; }

.dl-warn { display: flex; align-items: center; gap: 10px; padding: 7px 16px 7px 11px; border-radius: 12px; background: rgba(255, 46, 77, .12); box-shadow: inset 0 0 0 1px rgba(255, 46, 77, .45); color: #FFD9DF; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.dl-warn b { color: #fff; font-weight: 900; letter-spacing: .01em; }
.dl-warn .dl-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(255, 46, 77, .6); animation: dotPulse 1.8s ease-out infinite; }
.dl-warn u { text-decoration: none; color: var(--vio); font-weight: 800; }

.dl-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; overflow: hidden; background: rgba(168, 85, 247, .14); }
.dl-bar i { position: absolute; top: 0; bottom: 0; width: 26%; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--vio-2) 40%, #fff 55%, var(--cyan) 70%, transparent); animation: dlRun 2.8s cubic-bezier(.5, 0, .5, 1) infinite; }

/* ==========================================================
   FOLD — graphite atmosphere shared by nav + hero
   ========================================================== */
.fold { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: linear-gradient(180deg, #08040F 0%, #0C0618 34%, #140A24 70%, #1B0E30 100%); }

.f-sky { position: absolute; inset: 0; z-index: -6; pointer-events: none;
    background:
        radial-gradient(ellipse 48% 20% at 50% -2%, rgba(199, 125, 255, .12), transparent 70%),
        radial-gradient(ellipse 40% 26% at 50% 40%, rgba(139, 92, 246, .11), transparent 74%),
        radial-gradient(ellipse 30% 24% at 0% 26%, rgba(232, 92, 255, .12), transparent 70%),
        radial-gradient(ellipse 30% 24% at 100% 34%, rgba(122, 34, 245, .16), transparent 70%); }

/* the FE's blue sparks, walked over to violet */
.f-stars { position: absolute; left: 0; right: 0; top: 0; height: 1000px; z-index: -5; opacity: .4; background: url(../images/stars.svg) 0 0 / 100% 100% no-repeat; filter: var(--tint-vio); }

/* faint street map — still a local product */
.f-map { position: absolute; left: 0; right: 0; top: 0; height: 1300px; z-index: -5; opacity: .2; background: url(../images/map-dark.svg) center top / 1800px auto no-repeat; filter: var(--tint-vio);
    -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; }

/* the box art's neon edge-sweeps, rebuilt as background ribbons */
.f-arcs { position: absolute; left: -10%; right: -10%; top: -160px; height: 1500px; z-index: -5; pointer-events: none; opacity: .32; }
.f-arcs i { position: absolute; left: 50%; top: 0; width: var(--w); height: var(--w); border-radius: 50%; border: 2px solid transparent; border-top-color: rgba(199, 125, 255, .5); border-right-color: rgba(232, 92, 255, .28); transform: translateX(-50%) rotate(var(--r, 0deg)); }
.f-arcs i:nth-child(1) { --w: 1500px; --r: -22deg; top: -560px; }
.f-arcs i:nth-child(2) { --w: 1900px; --r: 16deg; top: -800px; opacity: .6; }
.f-arcs i:nth-child(3) { --w: 2400px; --r: -8deg; top: -1080px; opacity: .35; }

/* two static searchlights rising 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: 320px; height: 100%; opacity: .14; background: linear-gradient(0deg, rgba(232, 92, 255, .6), transparent 70%); -webkit-mask-image: linear-gradient(0deg, #000, transparent 78%); mask-image: linear-gradient(0deg, #000, transparent 78%); }
.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(139, 92, 246, .3), 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: .22; filter: var(--tint-vio) brightness(.8); }
.fc-near { position: absolute; left: 0; right: 0; bottom: 0; height: 250px; background: url(../images/skyline-night.svg) center bottom / auto 100% repeat-x; filter: saturate(.5) brightness(.5) contrast(1.15); }

/* ---------- nav ---------- */
.nav { position: relative; z-index: 30; padding-top: 22px; }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.nav-logo { display: flex; align-items: center; gap: 12px; }
.nav-logo img { display: block; width: auto; height: 54px; }
.nav-bun { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px 5px 10px; border-radius: 999px; background: var(--grad-vio); color: #1A0A2E; font-family: var(--display); font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 10px 22px -10px rgba(168, 85, 247, .95), inset 0 1px 0 rgba(255, 255, 255, .8); }
.nav-bun i { font-size: 12px; }

/* (order-progress styles kept for a future in-funnel variant) */
.steps { display: flex; align-items: center; gap: 0; }
.stp { display: inline-flex; align-items: center; gap: 8px; color: #8A76A6; font-size: 13px; font-weight: 700; white-space: nowrap; }
.stp span { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(168, 85, 247, .24); font-size: 11px; font-weight: 800; }
.stp-done { color: #B098CE; }
.stp-done span { background: rgba(34, 197, 94, .16); box-shadow: inset 0 0 0 1px rgba(34, 197, 94, .5); color: #4ADE80; }
.stp-now { color: #fff; }
.stp-now span { background: var(--grad-vio); box-shadow: 0 0 0 4px rgba(199, 125, 255, .16); color: #1A0A2E; }
.stp-sep { width: 34px; height: 1px; margin: 0 12px; flex: none; background: linear-gradient(90deg, rgba(168, 85, 247, .5), rgba(168, 85, 247, .14)); }

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

/* ---------- pre headline: "Available Limited-Time Only" ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; padding: 8px 22px 8px 8px; border-radius: 999px; background: linear-gradient(90deg, rgba(168, 85, 247, .22), rgba(199, 125, 255, .05)); box-shadow: inset 0 0 0 1px rgba(199, 125, 255, .34); color: #F0E4FF; font-size: 17px; font-weight: 500; text-align: left; }
.eyebrow b { color: #fff; 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-vio); color: #1A0A2E; font-size: 15px; box-shadow: 0 0 18px rgba(199, 125, 255, .45); }
.eb-sep { color: #8A76A6; }
.eb-pulse { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(255, 46, 77, .6); animation: dotPulse 1.8s ease-out infinite; }

/* ---------- headline ---------- */
.h-title { margin: 26px 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.24; letter-spacing: -.025em; text-wrap: balance; }
.ht-2 { max-width: 1000px; margin: 14px auto 0; color: #DCC8F2; font-size: clamp(20px, 2.4vw, 35px); font-weight: 700; line-height: 1.3; letter-spacing: -.02em; text-wrap: balance; }
.ht-2 b { color: #fff; font-weight: 800; }

/* "Platinum Bundle" — neon violet slab */
.hl-box { position: relative; display: inline-block; padding: 0 .22em .06em; border-radius: .2em; background: var(--grad-vio); color: #1A0A2E; transform: rotate(-1deg); box-shadow: 0 18px 44px -18px rgba(168, 85, 247, .9), inset 0 2px 0 rgba(255, 255, 255, .9), inset 0 -4px 10px rgba(60, 20, 90, .22); }
.hl-box::after { content: ""; position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none;
    background: linear-gradient(112deg, transparent 32%, rgba(255, 255, 255, .85) 44%, transparent 54%); mix-blend-mode: screen; animation: sheen 5.5s ease-in-out infinite; }
.hl-box i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px rgba(199, 125, 255, .95); animation: twinkle 2.6s ease-in-out infinite; }
.hl-box i:nth-of-type(1) { left: -14px; top: -10px; width: 7px; height: 7px; }
.hl-box i:nth-of-type(2) { right: -12px; bottom: -8px; animation-delay: .9s; }

/* "One Discounted One-Time Price" — magenta swoosh */
.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='%23E85CFF' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% .3em no-repeat; }
.hl-nw { white-space: nowrap; }

/* ---------- sub headline ---------- */
.subline { display: inline-flex; align-items: center; gap: 14px; max-width: 1000px; margin: 30px auto 0; padding: 14px 26px 14px 14px; border-radius: 20px; background: rgba(10, 18, 32, .78); box-shadow: inset 0 0 0 1px rgba(168, 85, 247, .22), 0 20px 40px -24px rgba(0, 0, 0, .7); text-align: left; }
.sl-x { position: relative; display: grid; place-items: center; align-content: center; gap: 1px; width: 62px; height: 62px; flex: none; border-radius: 16px; background: linear-gradient(150deg, #FFFFFF, #9D4EDD); color: #1A0A2E; font-family: var(--display); line-height: 1; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .85), inset 0 -6px 12px rgba(48, 14, 74, .25), 0 16px 28px -14px rgba(168, 85, 247, .9); }
.sl-x b { display: grid; place-items: center; font-size: 21px; font-weight: 800; letter-spacing: -.03em; }
.sl-x b i { font-size: 22px; }
.sl-x small { font-size: 8.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .72; }
.subline p { margin: 0; color: #DAC6F0; font-size: clamp(16px, 1.45vw, 20px); font-weight: 600; line-height: 1.4; }
.subline p b { color: #fff; font-weight: 800; }
.subline p .u { color: #fff; font-weight: 800; box-shadow: inset 0 -2px 0 rgba(232, 92, 255, .6); }

/* ---------- the "you already have the technology…" lead-in ---------- */
.leadin { position: relative; max-width: 940px; margin: 30px auto 0; }
.leadin p { margin: 0; padding: 0 14px; color: #CBB2E6; font-size: clamp(18px, 2vw, 26px); font-weight: 700; line-height: 1.4; letter-spacing: -.015em; text-wrap: balance; }
.leadin p b { color: #fff; font-weight: 800; }
.leadin .li-rule { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
.leadin .li-rule::before, .leadin .li-rule::after { content: ""; height: 1px; width: min(240px, 26vw); background: linear-gradient(90deg, transparent, rgba(168, 85, 247, .6)); }
.leadin .li-rule::after { background: linear-gradient(90deg, rgba(168, 85, 247, .6), transparent); }
.leadin .li-dot { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: rgba(199, 125, 255, .12); box-shadow: inset 0 0 0 1px rgba(199, 125, 255, .5); color: var(--vio); font-size: 13px; animation: nudge 2.2s ease-in-out infinite; }

/* ---------- the three promises, straight out of the sub headline ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 1000px; margin: 26px auto 0; padding: 0; list-style: none; }
.pillars li { display: flex; align-items: center; gap: 11px; padding: 11px 14px 11px 11px; border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1px rgba(168, 85, 247, .24); color: #fff; text-align: left; }
.pillars .pl-ic { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 11px; background: color-mix(in srgb, var(--c, #C77DFF) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, #C77DFF) 45%, transparent); color: var(--c, #C77DFF); font-size: 15px; }
.pillars .pl-nm { min-width: 0; }
.pillars .pl-nm b { display: block; font-size: 15.5px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.pillars .pl-in { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; color: #6EE7A0; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pillars .pl-in i { font-size: 9px; }

/* ==========================================================
   VSL + edge props
   ========================================================== */
.vsl-wrap { position: relative; max-width: 780px; margin: 46px auto 0; }
.vsl-frame { position: relative; z-index: 2; padding: 10px; border-radius: 26px; border: 2px solid transparent;
    background: linear-gradient(#0D0619, #0D0619) padding-box, linear-gradient(135deg, #FFFFFF, #CE9BFF 32%, #3B1160 70%, #FF8AF0) border-box;
    box-shadow: 0 0 0 8px rgba(199, 125, 255, .06), 0 0 90px -10px rgba(139, 92, 246, .4), 0 60px 100px -40px rgba(0, 0, 0, .9); }
.vsl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 6px 11px; color: #B098CE; 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; }
/* the fold now carries two players stacked inside one .vsl-wrap */
.vsl-frame + .vsl-frame { margin-top: 16px; }
@media (max-width: 575.98px) { .vsl-frame + .vsl-frame { margin-top: 12px; } }
.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; }

/* placeholder until the Bundle VSL embed lands */
.vsl-ph { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 16px; text-align: center;
    background: radial-gradient(ellipse 60% 70% at 50% 45%, #22103A, #0B0518 78%); }
.vsl-ph::before { content: ""; position: absolute; inset: 0; opacity: .3; background: repeating-linear-gradient(90deg, rgba(199, 125, 255, .07) 0 2px, transparent 2px 5px); }
.vph-play { position: relative; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--grad-vio); color: #1A0A2E; font-size: 28px; padding-left: 5px; box-shadow: 0 20px 40px -14px rgba(168, 85, 247, .9), inset 0 2px 0 rgba(255, 255, 255, .85); }
.vph-play::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(199, 125, 255, .5); animation: ctaRing 2.2s ease-out infinite; }
.vph-txt { position: relative; color: #E6D2F8; font-family: var(--display); font-size: clamp(17px, 2vw, 24px); font-weight: 800; letter-spacing: -.01em; }
.vph-tag { position: relative; padding: 4px 12px; border-radius: 999px; background: rgba(232, 92, 255, .12); box-shadow: inset 0 0 0 1px rgba(232, 92, 255, .4); color: var(--cyan); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }

/* handwritten note pointing at the video */
.vsl-note { position: absolute; z-index: 3; top: -44px; left: calc(100% + 16px); display: none; width: 205px; 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 floating around the headline ---------- */
.h-icons { position: absolute; left: 0; right: 0; top: 0; z-index: 0; display: none; height: 470px; 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: .55; 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-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(232, 92, 255, .5)); }

/* ---------- 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-order { left: calc((780px - 100vw) / 2 + 2.4vw); width: 278px; transform: translateY(-50%); transform-origin: 0 50%; }
.prop-unlock { right: calc((780px - 100vw) / 2 + 2.2vw); width: 278px; transform: translateY(-46%); transform-origin: 100% 50%; }
.pm-3d { transform: perspective(1100px) rotateY(23deg) rotateX(4deg) rotateZ(-3deg); }
.pg-3d { transform: perspective(1100px) rotateY(-23deg) rotateX(4deg) rotateZ(3deg); }

.win { width: 278px; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .95), 0 0 70px -10px rgba(139, 92, 246, .35); }
.win-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #190B2B; color: #B49AD0; 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: 13px 14px 14px; }

.wb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wb-head b { font-family: var(--display); font-size: 16px; font-weight: 800; }
.wb-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: linear-gradient(100deg, #F5E9FF, #9D4EDD); color: #1A0A2E; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }

/* LEFT prop — the order summary: every upgrade, one price */
.ord-list { margin: 11px 0 0; padding: 0; list-style: none; }
.ord-list li { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-top: 1px solid #F1EAF9; }
.ord-ic { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 8px; background: linear-gradient(140deg, color-mix(in srgb, var(--c) 72%, #fff), var(--c)); color: #fff; font-size: 11px; }
.ord-nm { min-width: 0; }
.ord-nm b { display: block; font-size: 12px; font-weight: 800; line-height: 1.2; }
.ord-nm small { display: block; color: var(--muted); font-size: 9.5px; font-weight: 600; }
.ord-in { margin-left: auto; flex: none; padding: 3px 7px; border-radius: 6px; background: #E9F9EE; color: #16A34A; font-size: 9px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.ord-tot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 11px; padding: 10px 11px; border-radius: 12px; background: linear-gradient(180deg, #FAF5FF, #F0E6FB); box-shadow: inset 0 0 0 1px #E3D3F5; }
.ord-tot span { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ord-tot b { display: inline-flex; align-items: baseline; gap: 7px; font-family: var(--display); font-size: 19px; font-weight: 800; color: var(--ink); }
.ord-tot b s { color: #A99BBE; font-size: 13px; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.ord-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 9px; padding: 8px; border-radius: 10px; border: 1.5px dashed #C79BF5; background: #FAF3FF; color: #7B2CBF; font-size: 11.5px; font-weight: 800; }

.pp-toast { position: absolute; z-index: 3; display: flex; align-items: center; gap: 9px; width: 218px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .9); animation: floaty 6s ease-in-out infinite; }
.pp-toast.t1 { top: -34px; right: -40px; }
.toast-ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: linear-gradient(135deg, #9D4EDD, #3B1160); color: #fff; font-size: 14px; }
.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); }

/* RIGHT prop — the bundle account: everything switched on */
.acc-plan { display: flex; align-items: center; gap: 10px; margin-top: 11px; padding: 10px 11px; border-radius: 12px; background: linear-gradient(120deg, #1C0B33, #3A1B5C); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
.acc-gem { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--grad-vio); color: #1A0A2E; font-size: 13px; }
.acc-plan b { display: block; font-size: 12.5px; font-weight: 800; line-height: 1.2; }
.acc-plan small { display: block; color: #B49AD0; font-size: 10px; font-weight: 600; }
.acc-plan .acc-on { margin-left: auto; padding: 3px 8px; border-radius: 6px; background: rgba(34, 197, 94, .2); color: #6EE7A0; font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }

.acc-list { margin: 10px 0 0; padding: 0; list-style: none; }
.acc-list li { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-top: 1px solid #F1EAF9; font-size: 12px; font-weight: 700; }
.acc-ic { display: grid; place-items: center; width: 27px; height: 27px; flex: none; border-radius: 8px; background: color-mix(in srgb, var(--c) 15%, #fff); color: var(--c); font-size: 11px; }
.tg { position: relative; width: 30px; height: 17px; flex: none; margin-left: auto; border-radius: 999px; background: #16A34A; }
.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); }

.acc-bonus { display: flex; align-items: center; gap: 8px; margin-top: 11px; padding: 9px 10px; border-radius: 11px; background: #FFF7E8; box-shadow: inset 0 0 0 1px #FFE0A8; color: #8A5A00; font-size: 11.5px; font-weight: 800; }
.acc-bonus i { color: #F2A100; }

.sv-cap { position: absolute; z-index: 3; left: -44px; bottom: -54px; width: 228px; padding: 11px 13px; border-radius: 14px; background: #fff; box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .9); animation: floaty 6s ease-in-out infinite; animation-delay: -2s; }
.svcap-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.svcap-row s { color: #A99BBE; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.svcap-row b { color: #16A34A; font-size: 13px; font-weight: 900; }
.svcap-bar { position: relative; height: 8px; margin-top: 9px; border-radius: 999px; background: #F1EAF9; overflow: hidden; }
.svcap-bar i { position: absolute; inset: 0 0 0 0; border-radius: 999px; background: linear-gradient(90deg, #9D4EDD, #8B5CF6); animation: grFill 3.4s ease-in-out infinite; }

/* ==========================================================
   OFFER — the box fan + price + Get Access Now
   ========================================================== */
.offer { position: relative; z-index: 1; display: grid; grid-template-columns: 300px 1fr; align-items: center; column-gap: 44px; row-gap: 0; max-width: 1140px; margin: 96px auto 0; padding: 32px; border-radius: 30px; border: 1.5px solid transparent; text-align: left;
    background: linear-gradient(160deg, #251040, #150826 58%, #0A0414) padding-box,
                linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(168, 85, 247, .45) 38%, rgba(255, 255, 255, .06) 70%, rgba(255, 138, 240, .7)) border-box;
    box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .95), 0 0 80px -20px rgba(139, 92, 246, .35); }

/* the box, popping out of the top of the card */
.offer-box { position: relative; }
.offer-box::before { content: ""; position: absolute; inset: 6% -8% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(139, 92, 246, .45), transparent); }
.offer-box img { position: relative; display: block; width: 100%; height: auto; margin: -84px 0 -34px; }
.box-tag { position: absolute; z-index: 5; left: 50%; bottom: -6px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; background: var(--grad-vio); color: #1A0A2E; font-family: var(--display); font-size: 12.5px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; text-transform: uppercase; box-shadow: 0 14px 26px -12px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .8); }

.offer-body { padding-right: 20px; }
.offer-kick { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px; border-radius: 999px; background: rgba(232, 92, 255, .12); box-shadow: inset 0 0 0 1px rgba(232, 92, 255, .45); color: var(--cyan); font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.offer-h { margin: 12px 0 0; font-family: var(--display); font-size: clamp(23px, 2.5vw, 34px); font-weight: 800; line-height: 1.16; letter-spacing: -.02em; color: #fff; }
.offer-h b { background: var(--grad-vio-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; }

.bump { display: flex; align-items: center; gap: 9px; margin-top: 14px; color: #B098CE; font-size: 15px; font-weight: 700; }
.bump i { color: var(--red); }
.bump s { color: #9C8AB5; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.bump b { color: #F0E4FF; font-weight: 800; }

.price-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 8px; }
.p-old { font-size: 24px; font-weight: 700; color: #9C8AB5; }
.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 44px rgba(139, 92, 246, .6); }
.p-new sup { top: -.85em; margin-right: 2px; font-size: .42em; color: var(--vio); }
.p-only { font-family: var(--display); font-size: clamp(26px, 2.6vw, 38px); font-weight: 800; letter-spacing: .02em; color: var(--cyan); text-transform: uppercase; }
.p-tag { padding: 7px 12px; border-radius: 10px; background: rgba(199, 125, 255, .1); box-shadow: inset 0 0 0 1px rgba(199, 125, 255, .45); color: var(--vio); font-size: 13px; font-weight: 800; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; }

.btn-add { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: 20px; padding: 18px 20px 15px; border-radius: 18px; background: var(--grad-cta); color: #fff; text-align: center; text-decoration: none; text-shadow: 0 1px 1px rgba(0, 60, 22, .5);
    box-shadow: 0 22px 44px -16px rgba(27, 178, 76, .9), 0 0 50px -12px rgba(55, 212, 95, .5), inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(6, 88, 38, .45); }
.btn-add::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; border: 2px solid rgba(55, 212, 95, .9); 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: 23px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.bb-main i { margin-left: 9px; transition: transform .25s; }
.bb-sub { font-size: 15px; font-weight: 600; opacity: .95; }
.btn-add:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 28px 50px -16px rgba(27, 178, 76, 1), 0 0 60px -10px rgba(55, 212, 95, .65), inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(6, 88, 38, .45); }
.btn-add:hover .bb-main i { transform: translateX(5px); }

.offer-pts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 15px 0 0; padding: 0; list-style: none; color: #C4D4E7; font-size: 15.5px; font-weight: 600; }
.offer-pts i { margin-right: 5px; color: #4ADE80; }

/* the licence line that closes BOTH offer cards */
.offer-lic { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 11px; margin-top: 18px; padding: 13px 20px; border-radius: 16px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(168, 85, 247, .22); color: #DAC6F0; font-family: var(--display); font-size: clamp(15px, 1.5vw, 19.5px); font-weight: 700; letter-spacing: -.01em; line-height: 1.45; text-align: center; }
.offer-lic i { flex: none; color: var(--cyan); }
.offer-lic b { display: inline-block; padding: 1px 10px 3px; border-radius: 8px; color: #fff; font-weight: 800; }
.offer-lic .b1 { background: linear-gradient(120deg, #1D4ED8, #2E8BFF 55%, #E85CFF); box-shadow: 0 10px 20px -12px rgba(139, 92, 246, .95), inset 0 1px 0 rgba(255, 255, 255, .4); }
.offer-lic .b2 { background: linear-gradient(120deg, #3A1B5C, #6A38A0 55%, #A06BD4); box-shadow: 0 10px 20px -12px rgba(59, 17, 96, .95), inset 0 1px 0 rgba(255, 255, 255, .3); }

.trust { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 16px; padding-top: 16px; border-top: 1px dashed rgba(168, 85, 247, .22); }
.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%, #FFFFFF, #DCB8FF 45%, #8B4FC0); color: #1A0A2E; line-height: 1; box-shadow: 0 0 0 3px rgba(199, 125, 255, .22), 0 10px 20px -8px rgba(168, 85, 247, .9); }
.mbg-seal::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1.5px dashed rgba(40, 10, 64, .38); }
.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: 14.5px; font-weight: 700; line-height: 1.3; }
.mbg-txt b { font-weight: 900; }
.pay { display: flex; gap: 8px; color: #A08BBE; font-size: 30px; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (min-width: 1200px) {
    .prop, .vsl-note, .h-icons { display: block; }
}
@media (max-width: 1439.98px) {
    .prop { scale: .84; }
}
@media (max-width: 1299.98px) {
    .prop { scale: .72; }
    .vsl-note { width: 170px; font-size: 26px; }
    .vsl-note svg { width: 120px; margin-left: -26px; }
}
@media (max-width: 1199.98px) {
    .hero { padding-bottom: 156px; }
    .pillars { max-width: 940px; }
    .offer { grid-template-columns: 270px 1fr; column-gap: 34px; padding: 30px 28px; }
    .offer-body { padding-right: 10px; }
}
@media (max-width: 991.98px) {
    .steps { display: none; }
    .pillars li { font-size: 15px; }
    .offer { grid-template-columns: 1fr; gap: 0; max-width: 640px; margin-top: 120px; padding: 0 28px 28px; text-align: center; }
    .offer-body { padding-right: 0; }
    .offer-lic { margin-top: 20px; }
    .offer-box { width: 246px; margin: 0 auto 22px; }
    .offer-box img { margin: -110px 0 -6px; }
    .offer-h, .bump, .price-row { justify-content: center; }
    .trust { flex-direction: column; }
    .mbg-txt { text-align: left; }
}
@media (max-width: 767.98px) {
    .dl-in { flex-direction: column; align-items: flex-start; gap: 9px; padding: 10px 14px 13px; }
    .dl-txt { font-size: 14.5px; }
    .dl-warn { font-size: 13.5px; padding: 6px 12px 6px 10px; }
    .nav { padding-top: 16px; }
    .nav-logo img { height: 40px; }
    .nav-bun { font-size: 12px; padding: 4px 10px 4px 8px; }
    .hero { padding: 20px 0 132px; }
    .eyebrow { border-radius: 20px; font-size: 14.5px; padding-right: 16px; }
    .eyebrow b { white-space: normal; }
    .h-title { margin-top: 20px; }
    .subline { gap: 11px; padding: 12px 16px 12px 11px; border-radius: 16px; }
    .sl-x { width: 54px; height: 54px; }
    .sl-x b { font-size: 18px; }
    .pillars { gap: 8px; }
    .pillars li { padding: 8px 13px 8px 8px; font-size: 14px; }
    .pillars .pl-ic { width: 29px; height: 29px; font-size: 12px; }
    .pillars .pl-in { font-size: 9.5px; padding: 2px 6px; }
    .vsl-wrap { margin-top: 30px; }
    .vsl-channel { display: none; }
    .vph-play { width: 64px; height: 64px; font-size: 22px; }
    .leadin { margin-top: 24px; }
    .leadin .li-rule::before, .leadin .li-rule::after { width: 22vw; }
    .offer-lic { flex-direction: column; gap: 8px; padding: 13px 14px; border-radius: 14px; }
    .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; }
    .f-beams { display: none; }
}
@media (max-width: 479.98px) {
    .dl-txt small { font-size: 12px; }
    .pillars { grid-template-columns: 1fr; max-width: 360px; }
    .offer { padding: 0 18px 22px; }
    .offer-kick { font-size: 10.5px; letter-spacing: .1em; }
    .offer-box { width: 216px; }
    .box-tag { font-size: 11px; padding: 5px 11px; }
    .mbg-txt { font-size: 13.5px; }
    .pay { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    .rise { opacity: 1; transform: none; animation: none; }
    .pp-toast, .sv-cap, .hi, .btn-add::before, .bb-shine::after, .dl-bar i, .dl-ic i, .dl-ic::after, .svcap-bar i, .vph-play::after, .li-dot, .hl-box i, .hl-box::after, .eb-pulse { animation: none; }
}

/* ---------- keyframes ---------- */
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.5); } }
@keyframes blink { to { visibility: hidden; } }
@keyframes shine { 0% { left: -60%; } 55%, 100% { left: 130%; } }
@keyframes sheen { 0%, 100% { opacity: 0; } 8% { opacity: .9; } 24% { opacity: 0; } }
@keyframes ctaRing { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.06, 1.4); opacity: 0; } }
@keyframes dlRun { 0% { left: -30%; } 100% { left: 104%; } }
@keyframes truck { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(3px); } }
@keyframes dotPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 46, 77, .6); } 70% { box-shadow: 0 0 0 9px rgba(255, 46, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 46, 77, 0); } }
@keyframes grFill { 0%, 100% { right: 34%; } 50% { right: 4%; } }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes arrowDrop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(14px); } }



/* ==========================================================
   BUNDLE-ONLY ADDITIONS
   Everything above is the shared fold system, recoloured.
   What follows exists only on this page.
   ========================================================== */

/* ---------- nav: no order-progress here (this is not an
     in-funnel OTO), so the right slot carries the limited-time
     chip that the copy opens with ---------- */
.nav-lt { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px 7px 11px; border-radius: 999px; background: rgba(232, 92, 255, .1); box-shadow: inset 0 0 0 1px rgba(232, 92, 255, .42); color: #F0E4FF; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.nav-lt b { color: #fff; font-weight: 900; }
.nav-lt .lt-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(255, 46, 77, .6); animation: dotPulse 1.8s ease-out infinite; }

/* ---------- headline slab ----------
   The shared .hl-box is a LIGHT fill with plum text. The Bundle
   box art's own "Bundle" wordmark is the opposite: white type on
   a violet-into-magenta ramp with a neon rim. That reads better
   at headline size and it is the one place the page goes full
   neon, so it overrides the shared rule. */
.hl-box { background: var(--grad-neon); color: #fff; text-shadow: 0 2px 10px rgba(45, 5, 70, .5);
    box-shadow: 0 18px 50px -16px rgba(199, 125, 255, .85), 0 0 0 1.5px rgba(255, 168, 250, .6), inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -5px 12px rgba(52, 6, 84, .4); }
.hl-box::after { background: linear-gradient(112deg, transparent 32%, rgba(255, 255, 255, .7) 44%, transparent 54%); }

/* ---------- price row: Just $2997.00 -> $297 ----------
   The struck figure is the loud part of the copy, so it is big
   for a "was" price — but it stays a step under .p-new so the
   $297 is still what the eye lands on. */
.p-was { font-family: var(--display); font-size: clamp(34px, 3.4vw, 48px); font-weight: 800; line-height: .95; letter-spacing: -.03em; color: #B7A4CE; }
.p-was sup { top: -.7em; margin-right: 1px; font-size: .46em; }
.p-was small { font-size: .5em; font-weight: 800; letter-spacing: -.02em; }
.p-new small { font-size: .46em; font-weight: 800; letter-spacing: -.02em; }
.price-row .p-arrow { font-size: 26px; }

/* The strike is DRAWN, not text-decoration. A real line-through
   fragments here: the raised <sup> "$" and the smaller cents sit
   on different baselines, so the browser draws three stubs at
   three heights. One absolute bar across the whole figure is the
   only way to get a single clean line. */
.p-struck { position: relative; text-decoration: none; white-space: nowrap; }
.p-struck::after { content: ""; position: absolute; left: -.06em; right: -.06em; top: 52%; height: 5px; border-radius: 3px; background: var(--red); box-shadow: 0 2px 10px rgba(255, 46, 77, .5); transform: rotate(-3deg); }

/* ---------- LEFT prop: the stack of offers, all ticked ---------- */
.ord-in.ord-inc { background: #F3E8FF; color: #7B2CBF; }
.ord-tot .ot-off { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 7px; background: var(--grad-neon); color: #fff; font-family: var(--display); font-size: 13px; font-weight: 800; letter-spacing: .02em; box-shadow: 0 8px 16px -8px rgba(168, 85, 247, .95); }

@media (max-width: 991.98px) {
    .nav-lt { display: none; }
}
@media (max-width: 767.98px) {
    /* each figure is one unbreakable token, so they set the row width */
    .price-row { gap: 8px 12px; }
}
@media (max-width: 479.98px) {
    .p-new { font-size: 62px; }
    .p-was { font-size: 30px; }
    .p-struck::after { height: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .nav-lt .lt-dot { animation: none; }
    .jv-wrap::after, .jv-button::after { animation: none; }
}

/* ==========================================================
   SECTION 2 — INTRODUCING THE PLATINUM BUNDLE
   A LIGHT band torn out of the night fold — the FE page's
   device — carrying the kicker and the headline. Everything
   else (the boxes, the copy, the CTA) lives inside a full-width
   DARK CARD sitting on that light band, so the dark fold is
   followed by light rather than by more dark.

   Six passes before this shape. The ones already ruled out, so
   they are not tried again: a dark section carrying straight on
   from the fold (no transition); a light band with a dark stage
   DOME rising out of it (read as a gap); a flat near-white
   ground (washed out); a mid royal violet (still a colour
   break); black matched to the cityscape with a lit torn edge
   (dark after dark); and the boxes arranged as an overlapping
   FAN, which never read cleanly at any tone.

   NOTE: .intro is overflow-x: clip, NOT overflow: hidden — the
   tear sits at top: -54px and has to bleed up into the fold,
   and the people cut-outs hang past the card's edges.
   ========================================================== */
/* z-index 3, not 2: the stage card's shadow overflows this section's box,
   and section 3 (.fe, z-index 2, later in the DOM) would otherwise paint its
   background straight over the overflowing part — which reads as a hard
   horizontal line across the join. Sitting above .fe lets the shadow bleed. */
.intro { position: relative; z-index: 3; isolation: isolate; overflow-x: clip; padding: 92px 0 72px; color: var(--ink-w); text-align: center;
    background: linear-gradient(180deg, #F6F0FD 0%, #F0E7FB 46%, #E9DEF8 100%); }

/* torn edge biting up into the night fold (shadow is baked into the SVG).
   The SVG's paper fill has to match .intro's TOP colour exactly. */
.tear { position: absolute; left: 0; right: 0; top: -54px; z-index: 3; height: 64px; pointer-events: none; background: url(../images/tear.svg?v5) 0 0 / 900px 64px repeat-x; }

/* NOTHING in here may reach the section's bottom edge. Section 3 continues
   this same light band, and any glow anchored at 100% tints .intro's last
   pixel rows but not .fe's first, which shows up as a hard line across the
   join. The old `at 50% 100%` glow did exactly that. The mask is the
   belt-and-braces: every layer fades out before the edge. */
.intro-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
    background:
        radial-gradient(ellipse 40% 24% at 6% 22%, rgba(199, 125, 255, .2), transparent 72%),
        radial-gradient(ellipse 40% 24% at 94% 30%, rgba(232, 92, 255, .16), transparent 72%),
        radial-gradient(ellipse 50% 20% at 50% 76%, rgba(122, 34, 245, .12), transparent 74%);
    -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 97%);
            mask-image: linear-gradient(180deg, #000 74%, transparent 97%); }

/* Pattern on the light band. Both layers are masked so they only exist
   where the card is NOT — they bloom out of the left and right edges and
   fade to nothing before they reach the middle, the torn edge or the
   bottom. That is what "properly merged" means here: the pattern never
   has a visible boundary of its own. */
.in-dots { position: absolute; inset: 0; background: radial-gradient(rgba(122, 34, 245, .3) 1.35px, transparent 1.85px) 0 0 / 17px 17px;
    -webkit-mask-image: radial-gradient(ellipse 30% 34% at 0% 30%, #000, transparent 72%), radial-gradient(ellipse 30% 34% at 100% 46%, #000, transparent 72%);
            mask-image: radial-gradient(ellipse 30% 34% at 0% 30%, #000, transparent 72%), radial-gradient(ellipse 30% 34% at 100% 46%, #000, transparent 72%); }
.in-grid { position: absolute; inset: 0; opacity: .5;
    background-image: linear-gradient(rgba(122, 34, 245, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(122, 34, 245, .16) 1px, transparent 1px);
    background-size: 68px 68px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 54%, transparent 86%);
            mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 54%, transparent 86%); }

/* The arrow sits ON the transition — half over the night fold, half over
   the light band — so the negative top has to clear .tear's own -54px.
   z-index must stay above .tear (3). */
.intro-arrow { position: absolute; left: 50%; top: -56px; z-index: 4; width: 88px; margin-left: -44px; 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 10px 18px rgba(20, 4, 40, .55)); }

/* ---------- 3D "Introducing" lettering (on the light band) ---------- */
.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(34px, 4.1vw, 60px); line-height: 1.1; letter-spacing: .05em; text-transform: uppercase; }
/* ORANGE, not violet. On this lavender ground the violet version had a
   mid-tone face over a mid-tone extrude, so the letterforms had no edge
   and the word did not read. A bright orange face over a DARK burnt
   extrude gives the letters an outline and lifts them off the ground. */
.ik-shadow { position: absolute; left: 0; top: 0; color: #7A2A00; text-shadow: 1px 1px 0 #732800, 2px 2px 0 #6B2500, 3px 3px 0 #632200, 4px 4px 0 #5A1F00, 5px 5px 0 #521C00, 6px 6px 0 #491900, 6px 11px 16px rgba(90, 35, 0, .35); }
.ik-front { position: relative; background: linear-gradient(180deg, #FFC46B 0%, #FF9021 36%, #F26B0F 70%, #C94609 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.intro .sparkle { position: absolute; fill: #F97316; 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-title { margin: 16px 0 0; font-family: var(--display); font-size: clamp(28px, 3.7vw, 54px); font-weight: 800; line-height: 1.14; letter-spacing: -.03em; color: var(--ink-w); text-wrap: balance; }
/* deep on purpose: anything lighter than ~#E85D0C stops reading against
   the lavender ground, even at display size */
.in-vio { background: linear-gradient(100deg, #A8350A 0%, #C94609 45%, #E85D0C 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

.intro-rule { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 26px auto 0; }
.intro-rule i { width: 110px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #A855F7); }
.intro-rule i:last-child { background: linear-gradient(90deg, #A855F7, transparent); }
.intro-rule svg { width: 20px; height: 27px; filter: drop-shadow(0 4px 8px rgba(122, 34, 245, .45)); }

/* ==========================================================
   THE DARK STAGE CARD
   Full container width. overflow stays VISIBLE so the people
   cut-outs can hang past its edges; the atmosphere is clipped
   by .st-bg instead, which inherits the card's radius.
   ========================================================== */
/* The card is shaped like the DOME the other pages' introducing sections
   use (Local Client Version / Local Directory / Pro / FE): a wide shallow
   arch across the top, softly rounded at the bottom, with a lit rim on the
   arch and a violet bloom spilling above it. */
.stage { position: relative; z-index: 2; margin: 58px auto 0; padding: 86px 44px 52px; color: #fff;
    border-radius: 50% 50% 46px 46px / 120px 120px 46px 46px;
    background: linear-gradient(180deg, #24123F 0%, #170B2B 34%, #0E0620 68%, #0A0517 100%);
    box-shadow: inset 0 1.5px 0 rgba(240, 182, 255, .55), 0 -20px 64px -14px rgba(168, 85, 247, .5), 0 40px 70px -44px rgba(40, 10, 70, .8); }

/* This section's card is allowed to run a little wider than the container.
   Margins, not width + transform: .stage also carries .reveal, whose
   transition animates transform, so a translate here would be clobbered. */
@media (min-width: 1200px) { .stage { margin-inline: -30px; } }
@media (min-width: 1400px) { .stage { margin-inline: -40px; } }

.st-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.st-glow { position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 46% 30% at 50% 92%, rgba(199, 125, 255, .26), transparent 72%),
        radial-gradient(ellipse 34% 26% at 4% 60%, rgba(232, 92, 255, .14), transparent 74%),
        radial-gradient(ellipse 34% 26% at 96% 66%, rgba(122, 34, 245, .24), transparent 74%); }

/* Two shafts falling from the TOP of the card onto the line-up — the same
   device as the other pages' introducing sections. Narrow at the top,
   widening downward. Violet, not white: a white shaft on this ground just
   reads as grey haze. */
.beam { position: absolute; top: 0; width: 430px; height: 900px; filter: blur(16px); transform-origin: 50% 0;
    background: linear-gradient(180deg, rgba(240, 220, 255, .38), rgba(168, 85, 247, .11) 55%, transparent 80%);
    clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%); mask-image: linear-gradient(180deg, transparent 0, #000 14%); }
.beam.b-l { left: 19%; transform: rotate(-20deg); }
.beam.b-r { right: 19%; transform: rotate(20deg); }

.st-city { position: absolute; left: 0; right: 0; bottom: 0; height: 320px; opacity: .3; background: url(../images/skyline-stage.svg) center bottom / auto 100% repeat-x; filter: var(--tint-vio) brightness(.8);
    -webkit-mask-image: linear-gradient(0deg, #000 30%, transparent 92%); mask-image: linear-gradient(0deg, #000 30%, transparent 92%); }
.st-floor { position: absolute; left: 50%; bottom: -70px; width: 2000px; height: 420px; margin-left: -1000px; transform: perspective(700px) rotateX(66deg); transform-origin: 50% 100%;
    background-image: linear-gradient(rgba(240, 182, 255, .24) 1px, transparent 1px), linear-gradient(90deg, rgba(240, 182, 255, .24) 1px, transparent 1px); background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 46% 80% at 50% 100%, #000 10%, transparent 70%);
            mask-image: radial-gradient(ellipse 46% 80% at 50% 100%, #000 10%, transparent 70%); }
.st-dust { position: absolute; inset: 0;
    background-image:
        radial-gradient(2px 2px at 10% 26%, rgba(240, 182, 255, .8), transparent),
        radial-gradient(1.5px 1.5px at 22% 64%, rgba(255, 255, 255, .55), transparent),
        radial-gradient(2px 2px at 34% 16%, rgba(240, 182, 255, .65), transparent),
        radial-gradient(1.5px 1.5px at 48% 74%, rgba(255, 255, 255, .5), transparent),
        radial-gradient(2px 2px at 62% 24%, rgba(240, 182, 255, .65), transparent),
        radial-gradient(1.5px 1.5px at 74% 58%, rgba(255, 255, 255, .55), transparent),
        radial-gradient(2px 2px at 86% 20%, rgba(240, 182, 255, .8), transparent),
        radial-gradient(1.5px 1.5px at 94% 70%, rgba(255, 255, 255, .55), transparent); }

/* People standing at the card's edges. They live inside .st-bg, so the
   card's own rounded shape CROPS them — no overhang to keep clear of the
   viewport, and they cannot collide with the light band behind the card. */
.person { position: absolute; bottom: 0; z-index: 1; display: block; width: clamp(210px, 19vw, 330px); pointer-events: none; filter: brightness(.92) drop-shadow(0 0 34px rgba(168, 85, 247, .35)); }
.person img { display: block; width: 100%; height: auto;
    -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 99%);
            mask-image: linear-gradient(180deg, #000 80%, transparent 99%); }
.person.p-left { left: -18px; }
.person.p-right { right: -18px; }

.st-in { position: relative; z-index: 2; }

/* ---------- the line-up ----------
   Bundle biggest in the centre, the inner pair a step smaller behind it,
   the outer pair a step smaller again — all bottom-aligned, so they read
   as standing on the same floor rather than floating. The captions are
   hidden here (they would collide across the overlaps) and come back in
   the stacked mobile layout. */
/* Widths and overlaps are PERCENTAGES of .line-up, not pixels, so the
   arrangement keeps its exact proportions at every screen size — phones
   included — instead of needing a different layout down there.
   They add up to exactly 100: 19.8+23.8+33+23.8+19.8 - (4.6+5.5+5.5+4.6). */
.line-up { display: flex; align-items: flex-end; justify-content: center; }
.lu { position: relative; flex: none; margin: 0; }
.lu img { display: block; width: 100%; height: auto; filter: drop-shadow(0 22px 28px rgba(6, 1, 16, .85)); }

.lu-1 { width: 19.8%; z-index: 2; margin-right: -4.6%; }
.lu-2 { width: 23.8%; z-index: 3; margin-right: -5.5%; }
.lu-c { width: 33%; z-index: 5; }
.lu-4 { width: 23.8%; z-index: 3; margin-left: -5.5%; }
.lu-5 { width: 19.8%; z-index: 2; margin-left: -4.6%; }

.lu-c::before { content: ""; position: absolute; inset: 6% -22% -6%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(232, 92, 255, .5), transparent 72%); }
.lu-c img { filter: drop-shadow(0 34px 44px rgba(6, 1, 16, .95)) drop-shadow(0 0 54px rgba(232, 92, 255, .45)); }

.lu-pill { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; padding: 9px 20px; border-radius: 999px; background: var(--grad-neon); color: #fff; font-family: var(--display); font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 16px 32px -12px rgba(232, 92, 255, .95), inset 0 1px 0 rgba(255, 255, 255, .45); }

/* ---------- closing copy ---------- */
/* kept narrower than the card on purpose: the people stand at the card's
   edges, and a wider copy column runs straight into them */
.in-copy { max-width: 700px; margin: 44px auto 0; }
.in-copy p { margin: 0 0 16px; color: #DCC9F2; font-family: var(--display); font-size: clamp(17px, 1.7vw, 23px); font-weight: 700; line-height: 1.42; letter-spacing: -.02em; text-wrap: balance; }
.in-copy p b { color: #fff; font-weight: 800; }
.in-copy .in-last { margin-bottom: 0; color: #fff; }
.in-mark { display: inline-block; padding: 0 .24em .06em; border-radius: .2em; background: var(--grad-neon); color: #fff; box-shadow: 0 14px 34px -14px rgba(232, 92, 255, .95), inset 0 1px 0 rgba(255, 255, 255, .4); }

.in-cta { width: fit-content; max-width: 100%; margin: 32px auto 0; padding-left: 34px; padding-right: 34px; }
.in-cta .bb-main i { margin-left: 10px; animation: nudge 2.2s ease-in-out infinite; }

/* ---------- responsive ---------- */
@media (max-width: 1199.98px) {
    .person { width: 200px; }
    .person.p-left { left: -12px; }
    .person.p-right { right: -12px; }
}
@media (max-width: 991.98px) {
    .intro { padding: 80px 0 52px; }
    .intro-arrow { width: 70px; margin-left: -35px; }
    .stage { padding: 62px 24px 42px; border-radius: 50% 50% 34px 34px / 70px 70px 34px 34px; }
    /* the cut-outs have nowhere to stand once the card narrows */
    .person { display: none; }
    .lu img { filter: drop-shadow(0 14px 18px rgba(6, 1, 16, .8)); }
}
@media (max-width: 575.98px) {
    .intro { padding-top: 70px; }
    .tear { top: -40px; height: 48px; background-size: 700px 48px; }
    .intro-arrow { top: -44px; width: 62px; margin-left: -31px; }
    .ik-sp1 { left: -28px; width: 19px; height: 19px; }
    .ik-sp2 { right: -20px; width: 13px; height: 13px; }
    .intro-rule i { width: 25vw; }
    /* full-bleed card on phones: break out of the container, keep the dome
       on top and drop the side radius since there are no side margins left.
       Safe against a scrollbar because .intro is overflow-x: clip. */
    .stage { margin-inline: calc(50% - 50vw); padding: 44px 14px 34px; border-radius: 50% 50% 0 0 / 44px 44px 0 0; }
    .lu-pill { font-size: 12px; padding: 8px 14px; }
    /* keep the arrow on the same line as the label */
    .in-cta .bb-main { font-size: 17px; white-space: nowrap; }
    .in-cta .bb-main i { margin-left: 7px; }
    .in-cta { padding-left: 20px; padding-right: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .intro-arrow, .intro .sparkle { animation: none; }
    .in-cta .bb-main i { animation: none; }
}

/* ==========================================================
   SECTION 3 — EVERYTHING YOU GET WITH LOCAL MEDIA PRO
   The front end of the funnel, which the Bundle includes.

   It CONTINUES section 2's light band rather than starting a
   new one: its first colour is exactly .intro's last colour, so
   there is no seam between them. It ends a step deeper than the
   pricing section's near-white, so .pr's curve still reads.

   The card pattern is the Pro page's feature rows, ported and
   re-themed: a glossy numbered square on the left, copy on the
   right, two per row, with the closing card running full width.
   ========================================================== */
.fe { position: relative; z-index: 2; overflow-x: clip; padding: 26px 0 150px; color: var(--ink-w);
    background: linear-gradient(180deg, #E9DEF8 0%, #EFE7FB 34%, #E8DCF7 74%, #E4D8F6 100%); }

/* ...and nothing here may reach the TOP edge, for the same reason. */
.fe-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
    background:
        radial-gradient(ellipse 36% 20% at 4% 24%, rgba(199, 125, 255, .22), transparent 72%),
        radial-gradient(ellipse 36% 22% at 96% 62%, rgba(232, 92, 255, .16), transparent 72%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%);
            mask-image: linear-gradient(180deg, transparent 0, #000 12%); }
/* same halftone as the section above, masked the same way so the two
   light bands share one texture rather than each having their own */
.fe-dots { position: absolute; inset: 0; background: radial-gradient(rgba(122, 34, 245, .28) 1.35px, transparent 1.85px) 0 0 / 17px 17px;
    -webkit-mask-image: radial-gradient(ellipse 28% 26% at 0% 12%, #000, transparent 72%), radial-gradient(ellipse 28% 26% at 100% 52%, #000, transparent 72%);
            mask-image: radial-gradient(ellipse 28% 26% at 0% 12%, #000, transparent 72%), radial-gradient(ellipse 28% 26% at 100% 52%, #000, transparent 72%); }

/* ---------- head: the FE box beside the title ---------- */
.fe-head { position: relative; z-index: 2; display: grid; grid-template-columns: 300px 1fr; align-items: center; gap: 48px; max-width: 1080px; margin: 0 auto; }
.fe-box { position: relative; margin: 0; }
.fe-box::before { content: ""; position: absolute; inset: 8% -14% -4%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(122, 34, 245, .34), transparent 72%); }
.fe-box img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(50, 14, 90, .45)); }
.fe-box figcaption { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; border-radius: 999px; background: #fff; box-shadow: 0 14px 28px -14px rgba(50, 14, 90, .7), inset 0 0 0 1px rgba(122, 34, 245, .2); color: #3D2359; font-family: var(--display); font-size: 12.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.fe-box figcaption i { color: #16A34A; }

.fe-kick { display: inline-flex; align-items: center; gap: 8px; padding: 6px 15px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(122, 34, 245, .2), 0 10px 20px -14px rgba(60, 20, 90, .6); color: #6B3FA0; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.fe-title { margin: 16px 0 0; font-family: var(--display); font-size: clamp(27px, 3.3vw, 46px); font-weight: 800; line-height: 1.14; letter-spacing: -.03em; color: var(--ink-w); text-wrap: balance; }
.fe-or { background: linear-gradient(100deg, #A8350A 0%, #C94609 45%, #E85D0C 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fe-lede { margin: 18px 0 0; color: #56417A; font-size: clamp(15.5px, 1.45vw, 18px); line-height: 1.68; }
.fe-lede b { color: var(--ink-w); font-weight: 800; }

/* ---------- the feature rows ---------- */
.fe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1140px; margin: 62px auto 0; padding: 0; list-style: none; }
.fe-card { display: grid; grid-template-columns: 116px 1fr; align-items: start; gap: 22px; padding: 22px; border-radius: 22px; background: #fff; box-shadow: 0 26px 46px -32px rgba(50, 14, 90, .55), inset 0 0 0 1px rgba(122, 34, 245, .1); }

.fe-sq { position: relative; display: grid; place-items: center; width: 116px; height: 116px; border-radius: 18px; overflow: hidden; background: linear-gradient(150deg, var(--a2), var(--a)); color: #fff; font-size: 38px;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -10px 18px rgba(0, 0, 0, .18), 0 16px 28px -14px color-mix(in srgb, var(--a) 85%, transparent); }
.fe-sq::before { content: ""; position: absolute; inset: 4px 5px 54%; border-radius: 15px 15px 40% 40%; background: linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0)); }
.fe-sq i { position: relative; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
.sq-no { position: absolute; left: 10px; top: 7px; font-family: var(--display); font-size: 13px; font-weight: 800; letter-spacing: .02em; opacity: .85; }
.sq-badge { position: absolute; right: 7px; bottom: 7px; padding: 2px 8px; border-radius: 999px; background: #fff; color: var(--a); font-size: 9.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }

.fe-body h3 { margin: 2px 0 0; font-family: var(--display); font-size: clamp(18px, 1.75vw, 22px); font-weight: 800; line-height: 1.22; letter-spacing: -.02em; color: var(--ink-w);
    background: linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--a2) 55%, transparent) 62%); display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.fe-body p { margin: 12px 0 0; color: #5B4780; font-size: 15.5px; line-height: 1.62; }
.fe-body p b { color: var(--ink-w); font-weight: 800; }
/* the bold line that sits under the heading, and the bold line that closes
   the card — both come straight from the copy */
.fe-body .fe-sub { margin-top: 12px; color: color-mix(in srgb, var(--a) 82%, #2B1348); font-size: 14.5px; font-weight: 800; line-height: 1.4; letter-spacing: .01em; }
.fe-body .fe-end { margin-top: 14px; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--a) 34%, transparent); color: var(--ink-w); font-family: var(--display); font-size: 16px; font-weight: 800; letter-spacing: -.01em; line-height: 1.35; }
.fe-body h3 s { text-decoration-color: var(--red); text-decoration-thickness: 3px; opacity: .75; }

/* the closing card runs the full width and is tinted, like the Pro page's
   "ALL future features" row */
.fe-wide { grid-column: 1 / -1; background: linear-gradient(120deg, #FFFDF4, #FFF8E4); box-shadow: 0 26px 46px -30px rgba(90, 60, 0, .4), inset 0 0 0 1px rgba(161, 98, 7, .22); }

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
    .fe { padding: 22px 0 110px; }
    .fe-head { grid-template-columns: 1fr; justify-items: center; gap: 34px; text-align: center; max-width: 620px; }
    .fe-box { width: 240px; }
    .fe-grid { grid-template-columns: 1fr; gap: 16px; max-width: 640px; margin-top: 46px; }
}
@media (max-width: 575.98px) {
    .fe { padding-bottom: 88px; }
    .fe-box { width: 200px; }
    .fe-card { grid-template-columns: 84px 1fr; gap: 16px; padding: 18px; border-radius: 18px; }
    .fe-sq { width: 84px; height: 84px; border-radius: 14px; font-size: 28px; }
    .sq-no { left: 8px; top: 5px; font-size: 11px; }
    .sq-badge { right: 5px; bottom: 5px; font-size: 8.5px; padding: 2px 6px; }
    .fe-body p { font-size: 15px; }
}

/* ==========================================================
   SECTION 4 — AND THAT'S JUST LOCAL MEDIA PRO / EVERY UPGRADE
   The dark bridge between the front-end section and the pricing
   table. It curves up over the light band exactly the way .pr
   does, and .pr then curves up over this — so the page runs
   light / dark / light and the pricing section's curve finally
   has a dark band to sit on, which is what it was designed for.

   z-index 4: above .fe (2) so the curve and its seam medallion
   paint over the light band, below .pr (11).
   ========================================================== */
/* overflow-x: clip, NOT overflow: hidden — the seam medallion is pulled up
   by -32px and `hidden` cuts its top half off. The atmosphere is clipped by
   .br-bg instead, which inherits the radius. Same reason .pr does it. */
/* NO overflow clip on this section. Its seam medallion hangs 32px ABOVE the
   section edge, and `overflow-x: clip` coerces `overflow-y: visible` to
   `clip` in spec-compliant browsers (Safari does this; Chrome does not),
   which sliced the medallion in half on real phones. Everything that
   actually bleeds lives inside the -bg wrapper, which clips on its own. */
.bridge { position: relative; z-index: 4; margin-top: -58px; padding: 128px 0 132px; border-radius: 64px 64px 0 0; color: #fff; text-align: center;
    background: linear-gradient(180deg, #1C0E33 0%, #150926 42%, #0C0619 78%, #0A0517 100%);
    box-shadow: inset 0 1.5px 0 rgba(232, 92, 255, .55), 0 -24px 60px -24px rgba(70, 25, 120, .5); }

.br-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.br-glow { position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 46% 26% at 50% 4%, rgba(199, 125, 255, .24), transparent 72%),
        radial-gradient(ellipse 34% 26% at 4% 56%, rgba(232, 92, 255, .14), transparent 74%),
        radial-gradient(ellipse 34% 26% at 96% 62%, rgba(122, 34, 245, .24), transparent 74%); }
.br-stars { position: absolute; left: 0; right: 0; top: 0; height: 620px; opacity: .3; background: url(../images/stars.svg) 0 0 / 100% 100% no-repeat; filter: var(--tint-vio); }
.br-beam { position: absolute; bottom: 0; width: 460px; height: 520px; opacity: .5; filter: blur(14px); transform-origin: 50% 100%;
    background: linear-gradient(0deg, rgba(199, 125, 255, .6), transparent 76%);
    clip-path: polygon(0 0, 100% 0, 60% 100%, 40% 100%); }
.br-beam.bb-l { left: 6%; transform: rotate(-14deg); }
.br-beam.bb-r { right: 6%; transform: rotate(14deg); }
.br-city { position: absolute; left: 0; right: 0; bottom: 0; height: 280px; opacity: .3; background: url(../images/skyline-stage.svg) center bottom / auto 100% repeat-x; filter: var(--tint-vio) brightness(.8);
    -webkit-mask-image: linear-gradient(0deg, #000 26%, transparent 92%); mask-image: linear-gradient(0deg, #000 26%, transparent 92%); }

/* the medallion sitting on the curve, ringed in the light band's colour */
.br-seam { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; justify-content: center; pointer-events: none; }
.br-seam span { display: grid; place-items: center; width: 64px; height: 64px; margin-top: -32px; border-radius: 50%; background: var(--grad-neon); color: #fff; font-size: 22px; box-shadow: 0 0 0 9px #E4D8F6, 0 0 0 10px rgba(122, 34, 245, .25), 0 18px 34px -12px rgba(168, 85, 247, .9); }
.br-seam i { animation: arrowDrop 1.8s ease-in-out infinite; }

/* ---------- act one ---------- */
.br-t1 { position: relative; z-index: 2; margin: 0; font-family: var(--display); font-size: clamp(26px, 3.1vw, 42px); font-weight: 800; line-height: 1.16; letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.br-or { background: linear-gradient(100deg, #FFC46B 0%, #FF9021 42%, #F26B0F 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.br-p1 { position: relative; z-index: 2; max-width: 760px; margin: 16px auto 0; color: #C9B6E6; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.66; text-wrap: balance; }
.br-p1 b { color: #fff; font-weight: 800; }

/* the "+" pivot between the two halves */
.br-div { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 18px; margin: 40px auto; }
/* CHILD combinator on purpose: a bare `.br-div i` also matches the Font
   Awesome <i> inside the medallion and flattens it into a 1px rule. */
.br-div > i { height: 1px; width: min(210px, 22vw); background: linear-gradient(90deg, transparent, rgba(199, 125, 255, .6)); }
.br-div > i:last-child { background: linear-gradient(90deg, rgba(199, 125, 255, .6), transparent); }
.br-div span { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: rgba(199, 125, 255, .12); box-shadow: inset 0 0 0 1.5px rgba(199, 125, 255, .5); color: var(--vio); font-size: 16px; }

/* ---------- act two ---------- */
.br-t2 { position: relative; z-index: 2; margin: 0; font-family: var(--display); font-size: clamp(30px, 4vw, 56px); font-weight: 800; line-height: 1.16; letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.br-p2 { position: relative; z-index: 2; max-width: 820px; margin: 22px auto 0; color: #C9B6E6; font-size: clamp(16px, 1.55vw, 20px); line-height: 1.66; text-wrap: balance; }
.br-p2 b { color: #fff; font-weight: 800; }

.br-chips { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; max-width: 900px; margin: 30px auto 0; padding: 0; list-style: none; }
.br-chips li { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px 11px 11px; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1px rgba(199, 125, 255, .35); color: #fff; font-family: var(--display); font-size: clamp(15px, 1.5vw, 19px); font-weight: 800; letter-spacing: -.01em; }
.brc-ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 11px; background: var(--grad-neon); color: #fff; font-size: 14px; box-shadow: 0 10px 20px -10px rgba(232, 92, 255, .9); }

.br-p3 { position: relative; z-index: 2; margin: 32px auto 0; font-family: var(--display); font-size: clamp(19px, 2.1vw, 28px); font-weight: 700; line-height: 1.4; letter-spacing: -.02em; color: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
    .bridge { margin-top: -46px; padding: 104px 0 100px; border-radius: 48px 48px 0 0; }
    .br-div { margin: 32px auto; }
}
@media (max-width: 575.98px) {
    .bridge { padding: 88px 0 84px; border-radius: 36px 36px 0 0; }
    .br-div > i { width: 22vw; }
    .br-chips { gap: 10px; }
    .br-chips li { padding: 9px 16px 9px 9px; font-size: 15px; }
    .brc-ic { width: 30px; height: 30px; font-size: 12.5px; }
    /* the neon mark makes this line wider than it looks — keep it off the edge */
    .br-p3 { font-size: 18px; padding: 0 4px; }
}
@media (prefers-reduced-motion: reduce) { .br-seam i { animation: none; } }

/* ==========================================================
   SECTION 5 — PLATINUM UPGRADE #1 (the Pro content)
   Light band curving up over the dark bridge, with the same
   seam medallion device the other curved sections use. The
   feature rows are section 3's `.fe-card` exactly — the two
   "everything you get" runs are meant to read as one system —
   plus a sub-headline (.fe-sub) and a closing line (.fe-end),
   which this copy has and section 3's did not.
   ========================================================== */
/* No curve, no negative margin and no seam medallion: the orange strip is
   itself the transition out of the dark bridge, so the section starts flush
   against it with the strip as its very first thing. */
.up { position: relative; z-index: 5; overflow-x: clip; padding: 0 0 140px; color: var(--ink-w);
    background: linear-gradient(180deg, #F6F0FD 0%, #EFE6FB 40%, #E9DEF8 76%, #E4D8F6 100%); }

.up-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
    background:
        radial-gradient(ellipse 34% 18% at 4% 20%, rgba(199, 125, 255, .2), transparent 72%),
        radial-gradient(ellipse 34% 20% at 96% 58%, rgba(232, 92, 255, .15), transparent 72%); }
.up-dots { position: absolute; inset: 0; background: radial-gradient(rgba(122, 34, 245, .26) 1.35px, transparent 1.85px) 0 0 / 17px 17px;
    -webkit-mask-image: radial-gradient(ellipse 26% 24% at 0% 16%, #000, transparent 72%), radial-gradient(ellipse 26% 24% at 100% 54%, #000, transparent 72%);
            mask-image: radial-gradient(ellipse 26% 24% at 0% 16%, #000, transparent 72%), radial-gradient(ellipse 26% 24% at 100% 54%, #000, transparent 72%); }

/* ---------- section opener: a full-bleed ORANGE strip ----------
   This headline introduces ALL the upgrades, not just the one under it,
   so it reads as a divider across the page. Full-bleed via negative
   inline margins off the container; safe because .up is overflow-x: clip,
   and it sits well below the 64px top radius so the curve is untouched. */
.up-open { position: relative; z-index: 2; margin-inline: calc(50% - 50vw); padding: 62px 24px 62px; overflow: hidden; color: #fff; text-align: center;
    background: linear-gradient(100deg, #9A3412 0%, #C2410C 34%, #E2560B 68%, #F97316 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 0, 0, .18), 0 24px 50px -30px rgba(120, 45, 5, .8); }
.up-open::before { content: ""; position: absolute; inset: 0; opacity: .3; pointer-events: none;
    background: repeating-linear-gradient(118deg, rgba(255, 255, 255, .13) 0 16px, transparent 16px 34px); }
.up-open::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 46% 70% at 50% 0%, rgba(255, 220, 160, .3), transparent 72%); }
.up-open-in { position: relative; max-width: 1120px; margin: 0 auto; }

.up-t1 { margin: 0; font-family: var(--display); font-size: clamp(35px, 5.1vw, 72px); font-weight: 800; line-height: 1.16; letter-spacing: -.03em; color: #fff; text-wrap: balance; text-shadow: 0 2px 10px rgba(90, 30, 0, .35); }
/* white slab so the accent still reads on an orange ground; nowrap keeps
   the two words together instead of breaking across the line */
.up-hl { display: inline-block; padding: 0 .2em .04em; border-radius: .16em; background: #fff; color: #C2410C; white-space: nowrap; text-shadow: none; box-shadow: 0 10px 24px -12px rgba(80, 25, 0, .8); }

/* ---------- the upgrade banner: section 3's box head, reused ---------- */
.up-head { margin-top: 58px; }
.up-head .fe-box::before { background: radial-gradient(closest-side, rgba(161, 98, 7, .36), transparent 72%); }

.up-grid { margin-top: 44px; }

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
    .up { padding: 0 0 104px; }
    .up-open { padding: 46px 18px 46px; }
    .up-head { margin-top: 44px; }
    .up-grid { margin-top: 34px; }
}
@media (max-width: 575.98px) {
    .up { padding: 0 0 84px; }
    .up-open { padding: 36px 14px 36px; }
}

/* ==========================================================
   SECTION 6 — AND THOSE ARE JUST THE PRO EDITION UPGRADES
   The second dark bridge. Same `.bridge` component as section
   4, just shorter — one headline and one line, no second act.
   `.bridge-sm` only changes the padding and the stacking: it
   has to sit above `.up` (z-index 5), not 4.
   ========================================================== */
/* Shaped like the ORANGE STRIP above it, on the dark ground: a flush
   full-width band with one oversized headline. So it drops the .bridge
   base's curve, negative margin and upward glow, and carries no seam
   medallion. z-index 6 — it has to sit above .up (5). */
.bridge-sm { z-index: 6; margin-top: 0; padding: 74px 0 130px; border-radius: 0;
    box-shadow: inset 0 1.5px 0 rgba(232, 92, 255, .55); }
/* type matched to the orange strip, not to a section heading */
.bridge-sm .br-t2 { max-width: 1120px; margin-inline: auto; font-size: clamp(35px, 5.1vw, 72px); }
.bridge-sm .br-p2 { margin-top: 20px; font-size: clamp(17px, 1.75vw, 23px); font-weight: 700; color: #D9C6F2; }
.bridge-sm .br-stars { height: 420px; }
.bridge-sm .br-beam { height: 380px; }

@media (max-width: 991.98px) { .bridge-sm { padding: 58px 0 108px; } }
@media (max-width: 575.98px) { .bridge-sm { padding: 46px 0 92px; } }

/* ==========================================================
   SECTION 7 — PLATINUM UPGRADE #2 (the Local Discovery Engine)
   The `.up` light band again, but this one follows a dark
   divider, so it puts the curve + seam medallion back on (the
   base `.up` is flush because upgrade #1 sits under the orange
   strip). The three pillars are the LOCAL DIRECTORY page's own
   `.pblock` system ported over — numbered chip, big gradient
   name, hero mockup, body — so they read the same way there.
   ========================================================== */
/* Curve + lit hairline mark the boundary; no seam medallion — the page
   has dropped those everywhere the copy starts right after the join. */
.up2 { z-index: 7; margin-top: -58px; padding-top: 68px; border-radius: 64px 64px 0 0;
    box-shadow: inset 0 1.5px 0 rgba(199, 125, 255, .9), 0 -24px 56px -24px rgba(12, 3, 28, .55); }
.up2 .up-bg { border-radius: inherit; }

/* ---------- the three pillars, named together first ---------- */
.trio { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 900px; margin: 46px auto 0; padding: 0; list-style: none; }
.trio li { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 16px; border-radius: 20px; background: #fff; box-shadow: 0 24px 44px -32px rgba(50, 14, 90, .55), inset 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent); color: var(--ink-w); font-family: var(--display); font-size: clamp(15px, 1.5vw, 19px); font-weight: 800; letter-spacing: -.01em; text-align: center; }
.trio-ic { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: linear-gradient(150deg, var(--c2), var(--c)); color: #fff; font-size: 21px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 14px 26px -14px color-mix(in srgb, var(--c) 88%, transparent); }

/* ---------- build it / claim it / monetise it ---------- */
.rev { position: relative; z-index: 2; max-width: 980px; margin: 62px auto 0; padding: 38px 34px 36px; border-radius: 26px; background: #fff; box-shadow: 0 30px 56px -36px rgba(50, 14, 90, .6), inset 0 0 0 1px rgba(122, 34, 245, .12); text-align: center; }
.rev-title { margin: 0; font-family: var(--display); font-size: clamp(22px, 2.5vw, 33px); font-weight: 800; line-height: 1.18; letter-spacing: -.025em; color: var(--ink-w); text-wrap: balance; }
.rev-lede { max-width: 720px; margin: 14px auto 0; color: #56417A; font-size: clamp(15.5px, 1.5vw, 18px); line-height: 1.64; }
.rev-lede b { color: var(--ink-w); font-weight: 800; }

.rev-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; text-align: left; }
.rev-steps li { padding: 18px 18px 20px; border-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--c2) 16%, #fff), #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 24%, transparent); }
.rev-steps b { display: block; margin-top: 12px; font-family: var(--display); font-size: 19px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--c); }
.rev-steps p { margin: 8px 0 0; color: #5B4780; font-size: 15px; line-height: 1.6; }
.rs-lvl { display: flex; gap: 5px; }
.rs-lvl i { width: 26px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--c) 16%, transparent); }
.rs-lvl i.on { background: linear-gradient(90deg, var(--c2), var(--c)); }

.rev-path-lead { margin: 26px 0 0; color: #56417A; font-size: 16px; }
.rev-path { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 12px 0 0; font-family: var(--display); font-size: clamp(17px, 1.9vw, 24px); font-weight: 800; letter-spacing: -.01em; color: #6B3FA0; }
.rev-path i { color: #A855F7; font-size: .8em; }
.rev-path span { padding: 6px 15px; border-radius: 999px; background: #F3ECFD; box-shadow: inset 0 0 0 1px rgba(122, 34, 245, .2); }
.rev-path span.on { background: var(--grad-neon); color: #fff; box-shadow: 0 12px 24px -12px rgba(232, 92, 255, .9); }

.rev-note { max-width: 760px; margin: 24px auto 0; color: #56417A; font-size: 16px; line-height: 1.64; }
.rev-note b { color: var(--ink-w); font-weight: 800; }
.rev-ways { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.rev-ways li { display: inline-flex; align-items: center; gap: 9px; padding: 9px 17px; border-radius: 999px; background: #F7F2FE; box-shadow: inset 0 0 0 1px rgba(122, 34, 245, .18); color: #3D2359; font-size: 15px; font-weight: 700; }
.rev-ways i { color: #8B2FE8; font-size: 13px; }
.rev-end { margin: 26px 0 0; padding-top: 22px; border-top: 1px dashed rgba(122, 34, 245, .24); font-family: var(--display); font-size: clamp(17px, 1.8vw, 22px); font-weight: 800; letter-spacing: -.015em; line-height: 1.35; color: var(--ink-w); text-wrap: balance; }

/* ---------- the pillar blocks (ported from the Local Directory page) ---------- */
.pblock { position: relative; z-index: 2; margin-top: 96px; }
.pblock::before { content: ""; position: absolute; left: 50%; top: -48px; width: 120px; height: 3px; margin-left: -60px; border-radius: 3px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 55%, transparent), transparent); }
.pb-head { text-align: center; }
.pb-no { display: inline-flex; align-items: center; gap: 10px; padding: 8px 20px 8px 9px; border-radius: 999px; background: linear-gradient(100deg, var(--c2), var(--c)); color: #fff; font-family: var(--display); font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 16px 30px -14px color-mix(in srgb, var(--c) 92%, transparent); }
.pb-no span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .24); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42); font-size: 14px; }
.pb-name { margin: 18px 0 0; font-family: var(--display); font-size: clamp(30px, 4.4vw, 60px); font-weight: 800; line-height: 1.04; letter-spacing: -.035em; text-transform: uppercase; color: var(--ink-w); }
.pb-name em { font-style: normal; background: linear-gradient(100deg, var(--c2), var(--c)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pb-sub { margin: 14px 0 0; color: color-mix(in srgb, var(--c) 78%, #2B1348); font-family: var(--display); font-size: clamp(16px, 1.7vw, 21px); font-weight: 800; letter-spacing: -.01em; }
.pb-hero { display: block; width: 100%; max-width: 820px; height: auto; margin: 32px auto 0; border-radius: 22px; box-shadow: 0 32px 60px -42px rgba(50, 14, 90, .55), 0 0 0 1px rgba(122, 34, 245, .12); }

.pb-body { max-width: 780px; margin: 0 auto; }
.pb-body p { margin: 16px 0 0; color: #5B4780; font-size: 17px; line-height: 1.68; text-align: center; }
.pb-body p b { color: var(--ink-w); font-weight: 800; }
.pb-body .pb-lead { margin-top: 34px; font-size: 18.5px; }
.pb-body .pb-cue { margin-top: 24px; color: var(--ink-w); font-weight: 700; }
.pb-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin: 16px 0 0; padding: 0; list-style: none; }
.pb-chips li { padding: 8px 16px; border-radius: 999px; background: color-mix(in srgb, var(--c2) 18%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 26%, transparent); color: color-mix(in srgb, var(--c) 86%, #2B1348); font-size: 14.5px; font-weight: 700; }
.pb-body .pb-end { margin-top: 26px; padding-top: 22px; border-top: 1px dashed color-mix(in srgb, var(--c) 30%, transparent); font-family: var(--display); font-size: clamp(17px, 1.8vw, 22px); font-weight: 800; letter-spacing: -.015em; line-height: 1.35; color: var(--ink-w); text-wrap: balance; }

/* ---------- the three working together ---------- */
.tog3 { position: relative; z-index: 2; max-width: 900px; margin: 96px auto 0; padding: 40px 34px 38px; border-radius: 26px; text-align: center;
    background: linear-gradient(160deg, #1E1038, #140926 55%, #0A0517);
    box-shadow: 0 40px 70px -44px rgba(40, 10, 70, .9), 0 0 70px -32px rgba(168, 85, 247, .5); }
.tog3-title { margin: 0; font-family: var(--display); font-size: clamp(24px, 2.8vw, 38px); font-weight: 800; line-height: 1.16; letter-spacing: -.03em; color: #fff; }
.tog3-title .fe-or { background: var(--grad-vio-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tog3-list { display: grid; gap: 10px; max-width: 640px; margin: 26px auto 0; padding: 0; list-style: none; text-align: left; }
.tog3-list li { display: flex; align-items: center; gap: 13px; padding: 13px 18px 13px 13px; border-radius: 15px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(199, 125, 255, .28); color: #DCC9F2; font-size: clamp(15px, 1.5vw, 17.5px); line-height: 1.4; }
.tog3-list li span { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; background: linear-gradient(150deg, var(--c2), var(--c)); color: #fff; font-size: 15px; }
.tog3-list li b { color: #fff; font-weight: 800; }
.tog3-list li em { font-style: normal; color: #fff; font-weight: 700; }
.tog3-p { margin: 24px 0 0; color: #C9B6E6; font-size: clamp(15.5px, 1.5vw, 18px); line-height: 1.6; text-wrap: balance; }
.tog3-end { margin: 14px 0 0; font-family: var(--display); font-size: clamp(18px, 2vw, 25px); font-weight: 800; letter-spacing: -.02em; color: #fff; }
.tog3-end b { background: var(--grad-vio-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
    .up2 { margin-top: -46px; padding-top: 56px; border-radius: 48px 48px 0 0; }
    .trio { grid-template-columns: 1fr; gap: 12px; max-width: 480px; margin-top: 34px; }
    .trio li { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 14px 18px; text-align: left; }
    .trio-ic { width: 44px; height: 44px; border-radius: 13px; font-size: 17px; }
    .rev { margin-top: 46px; padding: 30px 20px 30px; border-radius: 20px; }
    .rev-steps { grid-template-columns: 1fr; }
    .pblock { margin-top: 74px; }
    .tog3 { margin-top: 74px; padding: 32px 20px 30px; border-radius: 20px; }
}
@media (max-width: 575.98px) {
    .up2 { padding-top: 46px; border-radius: 36px 36px 0 0; }
    .pb-hero { border-radius: 16px; }
    .pb-chips li { padding: 7px 13px; font-size: 13.5px; }
    .pb-body p { font-size: 16px; }
    .rev-path { gap: 8px; }
    .rev-path span { padding: 5px 12px; }
}

/* ==========================================================
   SECTION 8 — AND THAT'S JUST PLATINUM UPGRADE #2
   The third divider band. Same `.bridge-sm` component as
   section 6; only the z-index changes.

   THE STACKING LADDER: every section from .fe onwards overlaps
   the one before it, so each new one needs the NEXT z-index up
   — .fe 2, .intro 3, .bridge 4, .up 5, .bridge-sm 6, .up2 7,
   .bridge-3 8, ... and .pr sits at 40 to stay on top of the lot.
   ========================================================== */
.bridge-3 { z-index: 8; }
/* one headline, no second line, so it does not need the extra bottom air */
.bridge-3 { padding: 74px 0 104px; }
@media (max-width: 991.98px) { .bridge-3 { padding: 58px 0 88px; } }
@media (max-width: 575.98px) { .bridge-3 { padding: 46px 0 76px; } }

/* ==========================================================
   SECTION 9 — PLATINUM UPGRADE #3 (Agency Edition)
   Same shape as upgrade #2 — light band curving up over a dark
   divider, no seam medallion — with the shared `.fe-card` rows.
   Next rung on the stacking ladder: z-index 9.
   ========================================================== */
.up3 { z-index: 9; margin-top: -58px; padding-top: 68px; border-radius: 64px 64px 0 0;
    box-shadow: inset 0 1.5px 0 rgba(199, 125, 255, .9), 0 -24px 56px -24px rgba(12, 3, 28, .55); }
.up3 .up-bg { border-radius: inherit; }

/* ---------- what removing the ceiling actually means ---------- */
.ag-open { position: relative; z-index: 2; max-width: 940px; margin: 52px auto 0; padding: 32px 34px 34px; border-radius: 24px; background: #fff; box-shadow: 0 28px 52px -36px rgba(50, 14, 90, .6), inset 0 0 0 1px rgba(122, 34, 245, .12); text-align: center; }
.ag-lede { margin: 0; color: #56417A; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.65; text-wrap: balance; }
.ag-lede b { color: var(--ink-w); font-weight: 800; }
.ag-cue { margin: 20px 0 0; color: var(--ink-w); font-family: var(--display); font-size: clamp(16px, 1.6vw, 19px); font-weight: 800; letter-spacing: -.01em; }
.ag-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.ag-chips li { display: inline-flex; align-items: center; gap: 9px; padding: 10px 17px; border-radius: 999px; background: #F7F2FE; box-shadow: inset 0 0 0 1px rgba(122, 34, 245, .18); color: #3D2359; font-size: 15px; font-weight: 700; }
.ag-chips i { color: #8B2FE8; font-size: 13px; }

/* ---------- pieces that only this upgrade's cards use ---------- */
.fe-body .ag-step { margin-top: 14px; padding: 12px 16px; border-radius: 12px; background: color-mix(in srgb, var(--a2) 20%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a) 22%, transparent); color: color-mix(in srgb, var(--a) 84%, #2B1348); font-family: var(--display); font-size: 16px; font-weight: 800; line-height: 1.5; }
.ag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.ag-list li { padding: 7px 14px; border-radius: 999px; background: color-mix(in srgb, var(--a2) 18%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a) 26%, transparent); color: color-mix(in srgb, var(--a) 86%, #2B1348); font-size: 14px; font-weight: 700; }
/* the question / answer beats in card 03 */
.ag-qa { margin: 14px 0 0; }
.ag-qa dt { margin-top: 14px; color: #6E5A8C; font-size: 15.5px; line-height: 1.5; }
.ag-qa dt:first-child { margin-top: 0; }
.ag-qa dd { margin: 4px 0 0; padding-left: 16px; border-left: 3px solid color-mix(in srgb, var(--a) 55%, transparent); color: var(--ink-w); font-family: var(--display); font-size: 17.5px; font-weight: 800; letter-spacing: -.015em; line-height: 1.35; }

/* ---------- the closing statement ---------- */
.up-close { position: relative; z-index: 2; max-width: 900px; margin: 56px auto 0; padding: 30px 34px; border-radius: 22px; text-align: center;
    background: linear-gradient(160deg, #1E1038, #140926 55%, #0A0517);
    box-shadow: 0 36px 64px -44px rgba(40, 10, 70, .9), 0 0 60px -30px rgba(168, 85, 247, .45);
    color: #fff; font-family: var(--display); font-size: clamp(19px, 2.3vw, 31px); font-weight: 800; line-height: 1.3; letter-spacing: -.025em; text-wrap: balance; }
.up-close span { background: var(--grad-vio-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
    .up3 { margin-top: -46px; padding-top: 56px; border-radius: 48px 48px 0 0; }
    .ag-open { margin-top: 40px; padding: 26px 20px 28px; border-radius: 20px; }
    .up-close { margin-top: 44px; padding: 26px 20px; border-radius: 18px; }
}
@media (max-width: 575.98px) {
    .up3 { padding-top: 46px; border-radius: 36px 36px 0 0; }
    .ag-chips li { padding: 8px 14px; font-size: 14px; }
    .ag-qa dd { font-size: 16px; }
}

/* ==========================================================
   SECTION 10 — THE VALUE STACK
   Dark band curving up over the last light upgrade section (lit
   hairline, no medallion). Four columns, one per edition, each
   closing on its own value; then the combined figure.
   Next rung on the stacking ladder: z-index 10.
   ========================================================== */
.val { position: relative; z-index: 10; overflow-x: clip; margin-top: -58px; padding: 116px 0 128px; border-radius: 64px 64px 0 0; color: #fff;
    background: linear-gradient(180deg, #1C0E33 0%, #150926 40%, #0C0619 78%, #0A0517 100%);
    box-shadow: inset 0 1.5px 0 rgba(232, 92, 255, .55), 0 -24px 60px -24px rgba(70, 25, 120, .5); }

.val-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.val-glow { position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 46% 24% at 50% 4%, rgba(199, 125, 255, .24), transparent 72%),
        radial-gradient(ellipse 32% 24% at 3% 52%, rgba(232, 92, 255, .13), transparent 74%),
        radial-gradient(ellipse 32% 24% at 97% 60%, rgba(122, 34, 245, .22), transparent 74%); }
.val-grid { position: absolute; inset: 0; opacity: .5;
    background-image: linear-gradient(rgba(199, 125, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(199, 125, 255, .12) 1px, transparent 1px);
    background-size: 68px 68px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 62%, transparent 92%);
            mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 62%, transparent 92%); }

/* ---------- header ---------- */
.val-head { position: relative; z-index: 2; max-width: 1000px; margin: 0 auto; text-align: center; }
.val-kick { display: inline-flex; align-items: center; gap: 9px; padding: 7px 17px; border-radius: 999px; background: rgba(232, 92, 255, .12); box-shadow: inset 0 0 0 1px rgba(232, 92, 255, .42); color: #F0B6FF; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.val-title { margin: 18px 0 0; font-family: var(--display); font-size: clamp(27px, 3.4vw, 46px); font-weight: 800; line-height: 1.16; letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.val-or { background: linear-gradient(100deg, #FFC46B 0%, #FF9021 42%, #F26B0F 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- the four columns ---------- */
.val-grid-wrap { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 52px auto 0; }
.vcol { display: flex; flex-direction: column; padding: 22px 20px 20px; border-radius: 22px; border: 1.5px solid transparent;
    background: linear-gradient(170deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)) padding-box,
                linear-gradient(160deg, color-mix(in srgb, var(--c2) 70%, transparent), color-mix(in srgb, var(--c) 30%, transparent) 55%, rgba(255, 255, 255, .06)) border-box;
    box-shadow: 0 30px 56px -38px rgba(0, 0, 0, .95); }
.vcol header { display: flex; align-items: center; gap: 11px; min-height: 62px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .1); }  /* the names are 1 or 2 lines long; the min-height keeps all four cards'
     tick lists starting on the same row */
.vc-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 13px; background: linear-gradient(150deg, var(--c2), var(--c)); color: #fff; font-size: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 12px 22px -12px color-mix(in srgb, var(--c) 88%, transparent); }
.vcol h3 { margin: 0; font-family: var(--display); font-size: clamp(16px, 1.6vw, 19px); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; color: #fff; }

.vcol ul { flex: 1; margin: 6px 0 0; padding: 0; list-style: none; }
/* the per-card $ plates were removed, so the list is now the card's last child */
.vcol ul:last-child { margin-bottom: 2px; }
.vcol li { position: relative; padding: 9px 0 9px 24px; border-bottom: 1px solid rgba(255, 255, 255, .06); color: #DCC9F2; font-size: 14.5px; line-height: 1.4; }
.vcol li::before { content: "\f00c"; position: absolute; left: 0; top: 10px; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 10.5px; color: color-mix(in srgb, var(--c2) 88%, #fff); }
.vcol li:last-child { border-bottom: 0; }

.vc-val { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 14px 0 0; padding: 13px 15px; border-radius: 14px; background: linear-gradient(120deg, color-mix(in srgb, var(--c) 42%, transparent), color-mix(in srgb, var(--c2) 22%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c2) 40%, transparent); }
.vc-val small { color: #E9DCF9; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.vc-val b { font-family: var(--display); font-size: clamp(20px, 2vw, 26px); font-weight: 800; letter-spacing: -.02em; color: #fff; }

/* ---------- the combined figure ---------- */
.val-total { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 18px; max-width: 840px; margin: 44px auto 0; padding: 26px 34px; border-radius: 22px; text-align: center;
    background: var(--grad-neon); color: #fff;
    box-shadow: 0 34px 62px -34px rgba(232, 92, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .35); }
.val-total span { font-family: var(--display); font-size: clamp(18px, 2vw, 27px); font-weight: 800; letter-spacing: -.02em; }
.val-total b { font-family: var(--display); font-size: clamp(34px, 4.4vw, 60px); font-weight: 800; line-height: 1; letter-spacing: -.04em; text-shadow: 0 4px 18px rgba(60, 10, 90, .5); }

/* ---------- responsive ---------- */
@media (max-width: 1199.98px) {
    .val-grid-wrap { grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 760px; }
}
@media (max-width: 991.98px) {
    .val { margin-top: -46px; padding: 96px 0 100px; border-radius: 48px 48px 0 0; }
    .val-grid-wrap { margin-top: 40px; }
}
@media (max-width: 575.98px) {
    .val { padding: 80px 0 84px; border-radius: 36px 36px 0 0; }
    .val-grid-wrap { grid-template-columns: 1fr; max-width: 420px; }
    .val-total { flex-direction: column; gap: 6px; padding: 22px 20px; border-radius: 18px; }
}

/* ==========================================================
   SECTION 11 — THE COMPLETE BONUS PACKAGE
   Light lavender band curving up over the value stack. The
   bonus cards are the FE page's `.bn-card` pattern ported over
   (box art + scattered 3D icons on one side, copy on the other,
   flipping every other card), re-themed to this page. All SEVEN
   bonuses use it — the workshop had its own dark card at first
   and the user folded it back into the run.
   Stacking ladder: z-index 11.
   ========================================================== */
.bn { position: relative; z-index: 11; overflow-x: clip; margin-top: -58px; padding: 116px 0 128px; border-radius: 64px 64px 0 0; color: var(--ink-w);
    background: linear-gradient(180deg, #F6F0FD 0%, #EFE6FB 40%, #E9DEF8 76%, #E4D8F6 100%);
    box-shadow: inset 0 1.5px 0 rgba(199, 125, 255, .9), 0 -24px 56px -24px rgba(12, 3, 28, .55); }
.bn-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none;
    background:
        radial-gradient(ellipse 34% 16% at 4% 14%, rgba(199, 125, 255, .2), transparent 72%),
        radial-gradient(ellipse 34% 18% at 96% 52%, rgba(232, 92, 255, .15), transparent 72%); }
.bn-dots { position: absolute; inset: 0; background: radial-gradient(rgba(122, 34, 245, .26) 1.35px, transparent 1.85px) 0 0 / 17px 17px;
    -webkit-mask-image: radial-gradient(ellipse 24% 20% at 0% 14%, #000, transparent 72%), radial-gradient(ellipse 24% 20% at 100% 46%, #000, transparent 72%);
            mask-image: radial-gradient(ellipse 24% 20% at 0% 14%, #000, transparent 72%), radial-gradient(ellipse 24% 20% at 100% 46%, #000, transparent 72%); }

/* ---------- header ---------- */
.bn-head { position: relative; z-index: 2; max-width: 1080px; margin: 0 auto 56px; text-align: center; }
/* 3D gift tiles flanking the headline, outside the container — only once
   there is genuinely room beside it, same rule the FE page uses */
.bnh-ic { --off: clamp(18px, 2.2vw, 46px); display: none; width: min(200px, 11vw, calc(50vw - 552px - var(--off))); top: 44px; }
.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-kick { display: inline-flex; align-items: center; gap: 9px; padding: 9px 19px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(122, 34, 245, .2), 0 12px 24px -14px rgba(60, 20, 90, .6); color: #6B3FA0; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.bn-kick i { color: #C026D3; font-size: 15px; }
/* deliberately BIG — this is the FE page's bonus headline scale, with the
   same hairline stroke that thickens it without going to a heavier weight */
.bn-title { margin: 22px 0 0; font-family: var(--display); font-size: clamp(31px, 4vw, 60px); font-weight: 800; line-height: 1.08; letter-spacing: -.045em; color: var(--ink-w); text-wrap: balance; -webkit-text-stroke: 1px var(--ink-w); }
.bn-mk { position: relative; padding: 0 6px; background: linear-gradient(180deg, transparent 60%, rgba(168, 85, 247, .26) 60%, rgba(232, 92, 255, .28) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.bn-lead { max-width: 820px; margin: 18px auto 0; color: #56417A; font-size: clamp(16px, 1.55vw, 18.5px); line-height: 1.65; text-wrap: balance; }
.bn-lead b { color: var(--ink-w); font-weight: 800; }

/* ---------- the seven bonuses, alternating sides ---------- */
.bn-list-wrap { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 28px; max-width: 1140px; margin: 0 auto; }
.bn-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); align-items: stretch; padding: 14px; overflow: hidden; border-radius: 30px; background: #fff;
    box-shadow: 0 40px 70px -44px color-mix(in srgb, var(--a) 55%, rgba(50, 14, 90, .6)), 0 0 0 1.5px color-mix(in srgb, var(--a) 14%, #fff); }
.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-flip { direction: rtl; }
.bn-flip > * { direction: ltr; }
.bn-body { position: relative; align-self: center; padding: 28px 34px 28px 40px; }
.bn-flip .bn-body { padding: 28px 40px 28px 34px; }

.bn-visual { position: relative; display: grid; place-items: center; min-height: 420px; padding: 52px 40px 46px; overflow: hidden; border-radius: 22px;
    background:
        radial-gradient(color-mix(in srgb, var(--a) 20%, transparent) 1.2px, transparent 1.6px) 0 0 / 20px 20px,
        linear-gradient(155deg, color-mix(in srgb, var(--a) 15%, #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) 13%, #fff); }
.bn-num { position: absolute; left: 20px; bottom: -34px; color: transparent; font-family: var(--display); font-size: 200px; font-weight: 800; letter-spacing: -.07em; line-height: 1;
    -webkit-text-stroke: 2px color-mix(in srgb, var(--a) 24%, 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: 12px; 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) 28%, rgba(50, 14, 90, .25)), transparent); }
.bn-glow { position: absolute; width: 92%; height: 76%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--a) 24%, transparent), transparent 74%); }
.bn-box { position: relative; z-index: 1; width: 100%; max-width: 320px; height: auto; filter: drop-shadow(0 26px 30px rgba(50, 14, 90, .35)); }
/* the workshop card carries the FE box, which is wider than the portrait bonus
   boxes and has no .bn-ic decorations beside it, so let it run larger */
.bn-solo .bn-box { max-width: 420px; }
@media (max-width: 991.98px) { .bn-solo .bn-box { max-width: 360px; } }

/* the generated 3D icons scattered round each box */
.bn-ic { position: absolute; z-index: 2; height: auto; pointer-events: none; filter: drop-shadow(0 16px 18px rgba(50, 14, 90, .22)); animation: floaty 8s ease-in-out infinite; }
.bn-visual .bn-ic { width: 92px; }
.bn-visual .bi-a { top: 58px; left: 22px; rotate: -8deg; }
.bn-flip .bn-visual .bi-a { left: auto; right: 22px; rotate: 8deg; }
.bn-visual .bi-b { bottom: 38px; right: 22px; rotate: 8deg; animation-delay: -3.5s; }
.bn-flip .bn-visual .bi-b { right: auto; left: 22px; rotate: -8deg; }

.bn-tag { display: inline-flex; align-items: center; gap: 12px; padding: 6px 6px 6px 20px; 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) 24%, #fff); vertical-align: middle; }
.bn-tag small { order: 1; color: color-mix(in srgb, var(--a) 80%, #000); font-size: 14px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.bn-tag b { order: 2; display: grid; place-items: center; min-width: 66px; height: 52px; padding: 0 14px; border-radius: 999px; background: linear-gradient(135deg, var(--a), var(--a2)); color: #fff; font-family: var(--display); font-size: 30px; 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-worth { display: inline-flex; align-items: center; margin-left: 12px; padding: 9px 16px; border-radius: 999px; vertical-align: middle;
    background: linear-gradient(120deg, #FFF4D6, #FFE8B0); color: #8A5A00; font-family: var(--display); font-size: 16px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap;
    box-shadow: inset 0 0 0 1.5px rgba(217, 119, 6, .28); }

.bn-body h3 { margin: 18px 0 0; color: var(--ink-w); font-family: var(--display); font-size: clamp(22px, 2.3vw, 30px); 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) 22%, transparent) 58%, color-mix(in srgb, var(--a2) 30%, transparent) 94%, transparent 94%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.bn-lede { margin: 12px 0 0; color: #5B4780; font-size: 16px; line-height: 1.64; }
.bn-lede b { color: var(--ink-w); font-weight: 800; }

/* ==========================================================
   SECTION 12 — LOCK IN THE PLATINUM PRICE BEFORE IT GOES UP
   The Pro / Local Client Version "remember, the launch special
   won't last" section ported over: seal + title, copy and a
   price ladder on the left, the box under a padlock on the
   right, then the close. Re-themed to RED urgency over this
   page's violet. Flush under the bonus band (no curve, no seam
   medallion). Stacking ladder: z-index 12.
   ========================================================== */
.rem { position: relative; z-index: 12; overflow-x: clip; padding: 96px 0 130px; color: #fff;
    background: linear-gradient(180deg, #1A0B24 0%, #120823 34%, #0C0619 76%, #0A0517 100%);
    box-shadow: inset 0 1.5px 0 rgba(255, 107, 127, .45); }
.rem-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.rem-glow { position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 44% 22% at 50% 2%, rgba(255, 46, 77, .22), transparent 70%),
        radial-gradient(ellipse 30% 20% at 3% 36%, rgba(255, 107, 127, .13), transparent 70%),
        radial-gradient(ellipse 30% 20% at 98% 54%, rgba(168, 85, 247, .2), transparent 70%),
        radial-gradient(ellipse 44% 22% at 50% 100%, rgba(122, 34, 245, .22), transparent 72%); }
.rem-rings { position: absolute; left: 50%; top: 4%; width: 1100px; height: 1100px; margin-left: -550px; border-radius: 50%; opacity: .5;
    background: repeating-radial-gradient(circle, rgba(255, 107, 127, .08) 0 1px, transparent 1px 76px);
    -webkit-mask-image: radial-gradient(circle, #000 16%, transparent 58%); mask-image: radial-gradient(circle, #000 16%, transparent 58%); }
.rem-stars { position: absolute; left: 0; right: 0; top: 0; height: 560px; opacity: .3; background: url(../images/stars.svg) 0 0 / 100% 100% no-repeat; filter: sepia(1) saturate(3) hue-rotate(310deg) brightness(1.1); }

/* ---------- header + seal ---------- */
.rem-head { position: relative; z-index: 2; max-width: 1000px; margin: 0 auto 52px; text-align: center; }
.rem-seal { display: inline-flex; align-items: center; gap: 13px; margin-bottom: 26px; padding: 9px 22px 9px 9px; border-radius: 999px; background: linear-gradient(100deg, #FF8A9B, #E01030 55%, #C10E32); color: #fff; box-shadow: 0 20px 40px -18px rgba(255, 46, 77, .95), inset 0 1px 0 rgba(255, 255, 255, .4); }
.rem-seal i { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); font-size: 15px; }
.rem-seal b { font-family: var(--display); font-size: clamp(16px, 1.7vw, 19px); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.rem-seal small { padding-left: 13px; border-left: 1px solid rgba(255, 255, 255, .38); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; opacity: .92; white-space: nowrap; }
.rem-title { margin: 0; font-family: var(--display); font-size: clamp(30px, 3.8vw, 56px); font-weight: 800; line-height: 1.14; letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.rem-title em { font-style: normal; background: linear-gradient(100deg, #FFC46B, #FF9021 44%, #F26B0F); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- copy + price ladder ---------- */
.rem-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr minmax(0, 540px); align-items: center; gap: 48px; max-width: 1140px; margin: 0 auto; }
.rem-left p { margin: 0 0 18px; color: #C9B6E6; font-size: clamp(16.5px, 1.5vw, 19px); line-height: 1.68; }
.rem-left p b { color: #fff; font-weight: 800; }

.nos { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 4px; padding: 0; list-style: none; }
.nos li { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: 12px; background: rgba(255, 46, 77, .09); box-shadow: inset 0 0 0 1px rgba(255, 107, 127, .3); color: #fff; font-family: var(--display); font-size: 15.5px; font-weight: 800; letter-spacing: -.015em; }
.nos li i { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 8px; background: rgba(255, 46, 77, .2); color: #FF8A9B; font-size: 10px; }

.ladder { position: relative; margin-top: 28px; padding: 26px 26px 22px; border-radius: 24px; background: linear-gradient(170deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1px rgba(199, 125, 255, .26); }
.ld-cap { display: block; margin-bottom: 18px; color: #B098CE; font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; text-align: center; }
.ld-steps { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 10px; }
.ld-step { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 9px; padding: 16px 8px 12px; border-radius: 16px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.ld-step:nth-child(1) { min-height: 104px; }
.ld-step:nth-child(2) { min-height: 132px; }
.ld-step:nth-child(3) { min-height: 160px; }
.ld-amt { font-family: var(--display); font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: #8A76A6; }
.ld-amt sup { top: -.7em; margin-right: 1px; font-size: .45em; }
.ld-amt.ld-up { color: #FF8A9B; font-size: 26px; }
.ld-amt.ld-sep { font-size: 18px; line-height: 1.16; letter-spacing: -.02em; text-align: center; }
.ld-lbl { color: #B098CE; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-align: center; line-height: 1.3; }
.ld-now { position: relative; background: linear-gradient(170deg, rgba(27, 178, 76, .26), rgba(14, 139, 60, .08)); box-shadow: inset 0 0 0 1.5px rgba(55, 212, 95, .6); }
.ld-now .ld-amt { color: #fff; text-shadow: 0 0 28px rgba(55, 212, 95, .6); }
.ld-now .ld-lbl { color: #9BF2B8; }
.ld-high { background: linear-gradient(170deg, rgba(255, 46, 77, .2), rgba(255, 46, 77, .05)); box-shadow: inset 0 0 0 1.5px rgba(255, 107, 127, .5); }
.ld-high .ld-amt { color: #FFD9DF; }
.ld-flag { position: absolute; left: 50%; bottom: -13px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: linear-gradient(100deg, #37D45F, #0E8B3C); color: #fff; font-size: 10px; font-weight: 900; letter-spacing: .04em; white-space: nowrap; transform: translateX(-50%); box-shadow: 0 10px 20px -10px rgba(27, 178, 76, .95); }
.ld-flag i { font-size: 9px; }

/* ---------- the urgency graphic ---------- */
.rem-art { position: relative; display: grid; place-items: center; min-height: 480px; }
.ra-halo { position: absolute; left: 50%; top: 50%; width: 118%; height: 106%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(168, 85, 247, .34), rgba(232, 92, 255, .1) 58%, transparent 74%); }
.ra-fb { position: relative; display: grid; place-items: center; width: 100%; padding: 22px 0 10px; }
.ra-bars { position: absolute; left: 50%; bottom: 8%; display: flex; align-items: flex-end; gap: 16px; width: 86%; height: 58%; transform: translateX(-50%); opacity: .4; }
.ra-bars i { flex: 1; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, rgba(168, 85, 247, .55), rgba(232, 92, 255, .08)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.ra-bars i:nth-child(1) { height: 38%; }
.ra-bars i:nth-child(2) { height: 64%; }
.ra-bars i:nth-child(3) { height: 100%; }
.ra-box { position: relative; z-index: 2; display: block; width: min(430px, 94%); height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .9)) drop-shadow(0 0 44px rgba(168, 85, 247, .45)); }
.ra-lock { position: absolute; z-index: 3; right: -2%; top: 4%; display: grid; place-items: center; width: 104px; height: 104px; border-radius: 30px; background: var(--grad-vio); color: #1A0A2E; font-size: 40px; rotate: 8deg;
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, .8), inset 0 -10px 18px rgba(60, 20, 90, .25), 0 24px 44px -16px rgba(199, 125, 255, .9); animation: floaty 6s ease-in-out infinite; }
.ra-tag { position: absolute; z-index: 3; left: -2%; bottom: 12%; display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 12px; background: linear-gradient(100deg, #37D45F, #0E8B3C); color: #fff; font-family: var(--display); font-size: 15px; font-weight: 800; letter-spacing: .02em; rotate: -5deg; box-shadow: 0 18px 34px -14px rgba(27, 178, 76, .95), inset 0 1px 0 rgba(255, 255, 255, .35); animation: floaty 6s ease-in-out infinite; animation-delay: -3s; }

/* ---------- close ---------- */
.rem-close { position: relative; z-index: 2; max-width: 960px; margin: 68px auto 0; text-align: center; }
.rem-warn { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 24px; padding: 13px 24px; border-radius: 16px; background: rgba(255, 46, 77, .12); box-shadow: inset 0 0 0 1px rgba(255, 46, 77, .45); color: #FFD9DF; font-family: var(--display); font-size: clamp(16.5px, 1.8vw, 22px); font-weight: 800; letter-spacing: -.015em; line-height: 1.3; text-align: left; }
.rem-warn i { flex: none; color: #FF6B7F; font-size: 17px; }
.rem-close h3 { margin: 0; font-family: var(--display); font-size: clamp(25px, 3.1vw, 42px); font-weight: 800; line-height: 1.18; letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.rem-close h3 u { text-decoration: none; background: var(--grad-vio-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rem-cta { width: fit-content; max-width: 460px; margin: 30px auto 0; }

/* the box was widened to 540px for desktop; at tablet-landscape that left the
   copy column at ~360px and the price ladder unreadably small, so give the
   art back some width here */
@media (max-width: 1199.98px) { .rem-grid { grid-template-columns: 1fr minmax(0, 400px); gap: 32px; } }
@media (max-width: 991.98px) {
    .rem { padding: 76px 0 108px; }
    .rem-head { margin-bottom: 40px; }
    .rem-grid { grid-template-columns: 1fr; gap: 34px; max-width: 620px; }
    .rem-left { text-align: center; }
    .nos { justify-content: center; }
    .rem-art { order: -1; min-height: 0; max-width: 520px; margin: 0 auto 6px; }
    .ra-lock { width: 76px; height: 76px; font-size: 29px; border-radius: 24px; right: 2%; }
    .ra-tag { font-size: 13px; padding: 7px 14px; }
    .rem-close { margin-top: 56px; }
}
@media (max-width: 767.98px) {
    .rem { padding: 62px 0 96px; }
    .rem-seal { margin-bottom: 20px; gap: 10px; padding: 8px 17px 8px 8px; }
    .rem-seal i { width: 31px; height: 31px; font-size: 13px; }
    .rem-seal small { padding-left: 10px; font-size: 10px; letter-spacing: .14em; }
    .nos li { font-size: 14.5px; padding: 8px 13px; }
    .ladder { padding: 22px 16px 20px; }
    .ld-steps { gap: 7px; }
    .ld-amt { font-size: 25px; }
    .ld-amt.ld-up { font-size: 20px; }
    .ld-amt.ld-sep { font-size: 14px; }
    .ld-lbl { font-size: 9.5px; letter-spacing: .03em; }
    .ld-step:nth-child(1) { min-height: 88px; }
    .ld-step:nth-child(2) { min-height: 110px; }
    .ld-step:nth-child(3) { min-height: 132px; }
    .ld-flag { font-size: 9px; padding: 3px 9px; }
    .rem-warn { padding: 12px 18px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .ra-lock, .ra-tag { animation: none; } }

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
    .bn { margin-top: -46px; padding: 96px 0 96px; border-radius: 48px 48px 0 0; }
    .bn-head { margin-bottom: 36px; }
    .bn-card { grid-template-columns: minmax(0, 1fr); 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: 58px 24px 42px; }
    .bn-box { max-width: 250px; }
    .bn-visual .bn-ic { width: 74px; }
    .bn-tag b { min-width: 58px; height: 46px; font-size: 26px; }
}
@media (max-width: 767.98px) {
    .bn { padding: 80px 0 80px; border-radius: 36px 36px 0 0; }
    .bn-title { font-size: 31px; -webkit-text-stroke: .5px var(--ink-w); }
    .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-visual .bn-ic { width: 60px; }
    .bn-flip .bn-free { left: auto; right: 18px; }
    .bn-worth { margin: 10px 0 0; font-size: 14.5px; padding: 7px 13px; }
}

/* ==========================================================
   SECTION 13 — PLUS, WE'RE TAKING THE RISK
   The Local Directory page's guarantee panel ported over and
   re-themed. It sits between two DARK bands (.rem above, and it
   is itself dark), so the join is FLUSH — no curve, no seam
   medallion; the white panel is what supplies the relief. Green
   is this page's "accept" colour, so the plaque and the 30-day
   pill are green while the steps run green -> violet -> magenta.
   Stacking ladder: z-index 13 (.pr above it stays at 40).
   ========================================================== */
.gt { position: relative; z-index: 13; overflow-x: clip; padding: 96px 0 118px; color: #fff;
    background: linear-gradient(180deg, #0A0517 0%, #100722 42%, #14092B 100%); }
.gt-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.gt-glow { position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 46% 24% at 50% 4%, rgba(27, 178, 76, .18), transparent 70%),
        radial-gradient(ellipse 30% 22% at 2% 46%, rgba(168, 85, 247, .16), transparent 70%),
        radial-gradient(ellipse 30% 22% at 98% 40%, rgba(232, 92, 255, .14), transparent 70%),
        radial-gradient(ellipse 50% 24% at 50% 100%, rgba(199, 125, 255, .2), transparent 72%); }
.gt-rings { position: absolute; left: 50%; top: 2%; width: 1000px; height: 1000px; margin-left: -500px; opacity: .45; border-radius: 50%;
    background: repeating-radial-gradient(circle, rgba(55, 212, 95, .09) 0 1px, transparent 1px 72px);
    -webkit-mask-image: radial-gradient(circle, #000 14%, transparent 56%); mask-image: radial-gradient(circle, #000 14%, transparent 56%); }

/* ---------- plaque headline ---------- */
.gt-head { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; text-align: center; }
.gt-plaque { display: inline-block; margin: 0; padding: 18px 44px; border-radius: 22px; background: linear-gradient(120deg, #37D45F, #1BB24C 56%, #0E8B3C); color: #03230F; 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 52px -20px rgba(27, 178, 76, .95), inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -8px 16px rgba(4, 60, 24, .3); }

/* ---------- the white panel ---------- */
.gt-panel { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); align-items: center; gap: 44px; max-width: 1140px; margin: 48px auto 0; padding: 44px 46px; overflow: hidden; border-radius: 34px; background: #fff; color: var(--ink-w);
    box-shadow: 0 44px 80px -30px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(255, 255, 255, .6); }
.gt-panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, #37D45F, #1BB24C 40%, #7A22F5 72%, #E85CFF); }

.gt-visual { position: relative; display: grid; place-items: center; }
.gt-visual-glow { position: absolute; inset: -8% 4% 2%; border-radius: 50%; background: radial-gradient(closest-side, rgba(55, 212, 95, .28), rgba(168, 85, 247, .12) 58%, transparent 78%); }
.gt-badge { position: relative; z-index: 2; width: min(330px, 82%); height: auto; filter: drop-shadow(0 26px 30px rgba(20, 8, 44, .4)); }
.gt-box { position: absolute; z-index: 4; left: 0; bottom: -2%; width: 31%; height: auto; rotate: -7deg; filter: drop-shadow(0 22px 26px rgba(20, 8, 44, .55)); }
.gt-shield { position: absolute; z-index: 3; right: 1%; top: -2%; width: 25%; height: auto; rotate: 8deg; animation: floaty 8s ease-in-out infinite; }

/* ---------- copy column ---------- */
.gt-copy p { margin: 0 0 15px; color: var(--ink-w-2); font-size: clamp(16px, 1.45vw, 17.5px); line-height: 1.66; }
.gt-copy p:last-child { margin-bottom: 0; }
.gt-copy p b { color: var(--ink-w); font-weight: 800; }
.gt-copy .gt-lede { color: var(--ink-w); font-family: var(--display); font-size: clamp(18px, 1.8vw, 23px); font-weight: 800; line-height: 1.34; letter-spacing: -.018em; }
.gt-copy .gt-lede b { background: var(--grad-neon); -webkit-background-clip: text; background-clip: text; color: transparent; }

.gt-30 { display: inline-flex; align-items: center; gap: 11px; margin: 4px 0 16px; padding: 11px 20px 11px 11px; border-radius: 999px; background: #F0FBF4; box-shadow: inset 0 0 0 1.5px rgba(14, 139, 60, .28); color: #0E7134; font-family: var(--display); font-size: clamp(15px, 1.45vw, 17.5px); font-weight: 800; letter-spacing: -.015em; line-height: 1.3; text-align: left; }
.gt-30 i { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: linear-gradient(150deg, #37D45F, #0E8B3C); color: #fff; font-size: 14px; }

.gt-try { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.gt-try li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 14px 13px 13px; border-radius: 14px; background: #F8F6FC; box-shadow: inset 0 0 0 1px #EBE5F5; color: var(--ink-w); font-size: 13.5px; font-weight: 800; line-height: 1.32; }
.gt-try i { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 10px; background: color-mix(in srgb, var(--g) 13%, #fff); color: var(--g); font-size: 13px; }
.gt-try b { position: absolute; right: 11px; top: 10px; font-family: var(--display); font-size: 15px; font-weight: 800; color: color-mix(in srgb, var(--g) 34%, #fff); }

.gt-close { position: relative; z-index: 2; max-width: 1000px; margin: 50px auto 0; font-family: var(--display); font-size: clamp(23px, 2.9vw, 40px); font-weight: 800; line-height: 1.2; letter-spacing: -.035em; text-align: center; text-wrap: balance; color: #fff; }
.gt-close b { background: var(--grad-vio-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gt-close u { text-decoration: none; background: linear-gradient(100deg, #37D45F, #1BB24C); -webkit-background-clip: text; background-clip: text; color: transparent; }

@media (max-width: 991px) {
    .gt { padding: 82px 0 96px; }
    .gt-plaque { padding: 16px 28px; }
    .gt-panel { grid-template-columns: 1fr; gap: 26px; max-width: 640px; padding: 32px 26px; border-radius: 26px; }
    .gt-visual { max-width: 420px; margin: 0 auto; }
    .gt-close { margin-top: 42px; }
}
@media (max-width: 575px) {
    .gt { padding: 68px 0 80px; }
    .gt-plaque { padding: 14px 18px; border-radius: 18px; font-size: 26px; }
    .gt-panel { padding: 24px 18px; border-radius: 22px; }
    .gt-try { grid-template-columns: 1fr; }
    .gt-try li { flex-direction: row; align-items: center; padding: 11px 13px; }
    .gt-try i { order: -1; }
    .gt-try b { position: static; order: 1; margin-left: auto; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .gt-shield { animation: none; } }

/* ==========================================================
   SECTION 13 — CHOOSE YOUR PLATINUM BUNDLE (pricing)
   The Pro page's pricing pattern (light ground curving up over
   the dark fold, so the dark cards carry maximum weight), but
   with TWO cards instead of one. The source copy is a feature
   COMPARISON table, so both cards list the same ten rows in the
   same order — the ticks and dashes are what differ. Read across
   the two cards and you are reading the original table.
   ========================================================== */
/* NO overflow clip on this section. Its seam medallion hangs 32px ABOVE the
   section edge, and `overflow-x: clip` coerces `overflow-y: visible` to
   `clip` in spec-compliant browsers (Safari does this; Chrome does not),
   which sliced the medallion in half on real phones. Everything that
   actually bleeds lives inside the -bg wrapper, which clips on its own. */
.pr { position: relative; z-index: 40; margin-top: -58px; padding: 112px 0 120px; border-radius: 64px 64px 0 0; color: var(--ink-w); background: linear-gradient(180deg, #FCFAFF 0%, #F6EFFD 46%, #F1E7FA 100%); /* a violet mid-tone, not near-black: sections keep getting inserted above
       this one, so the shadow has to sit well over a light band AND a dark one */
    box-shadow: inset 0 1.5px 0 rgba(199, 125, 255, .9), 0 -26px 52px -26px rgba(45, 12, 85, .5); }

:root { --ink-w: #1A0B2E; --ink-w-2: #5E4A7D; }

.pr-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.pr-glow { position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 42% 20% at 50% 3%, rgba(199, 125, 255, .26), transparent 70%),
        radial-gradient(ellipse 30% 20% at 3% 42%, rgba(232, 92, 255, .14), transparent 70%),
        radial-gradient(ellipse 30% 20% at 97% 58%, rgba(122, 34, 245, .13), transparent 70%),
        radial-gradient(ellipse 50% 24% at 50% 100%, rgba(168, 85, 247, .18), transparent 72%); }
.pr-dots { position: absolute; inset: 0; background: radial-gradient(rgba(110, 60, 170, .18) 1.3px, transparent 1.8px) 0 0 / 17px 17px;
    -webkit-mask-image: radial-gradient(ellipse 22% 24% at 0% 34%, #000, transparent 72%), radial-gradient(ellipse 22% 24% at 100% 66%, #000, transparent 72%);
            mask-image: radial-gradient(ellipse 22% 24% at 0% 34%, #000, transparent 72%), radial-gradient(ellipse 22% 24% at 100% 66%, #000, transparent 72%); }

.pr-seam { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; justify-content: center; pointer-events: none; }
.pr-seam span { display: grid; place-items: center; width: 64px; height: 64px; margin-top: -32px; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #F0DCFF, #C77DFF 48%, #7A22F5); color: #1A0A2E; font-size: 22px; box-shadow: 0 0 0 9px #FCFAFF, 0 0 0 10px rgba(122, 34, 245, .25), 0 18px 34px -12px rgba(168, 85, 247, .85); }

/* ---------- header ---------- */
.pr-head { position: relative; z-index: 2; max-width: 940px; margin: 0 auto; text-align: center; }
.pr-title { margin: 0; font-family: var(--display); font-size: clamp(28px, 3.4vw, 48px); font-weight: 800; line-height: 1.14; letter-spacing: -.03em; color: var(--ink-w); text-wrap: balance; }
.pr-vio { background: linear-gradient(100deg, #7A22F5 0%, #A855F7 42%, #C026D3 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pr-lede { max-width: 880px; margin: 20px auto 0; color: var(--ink-w-2); font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.68; text-wrap: balance; }
.pr-lede b { color: var(--ink-w); font-weight: 800; }

/* the "in both plans" strip, so the shared rows are not read as
   a feature of one card only */
.pr-both { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 10px; max-width: 900px; margin: 26px auto 0; padding: 0; list-style: none; }
.pr-both li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(122, 34, 245, .18), 0 8px 18px -12px rgba(60, 20, 90, .45); color: #3D2359; font-size: 14px; font-weight: 700; }
.pr-both i { color: #16A34A; font-size: 11px; }

/* ---------- the two plan cards ---------- */
/* stretch, not start: .pl-list is flex:1 inside each card, so equal
   card heights land both CTAs on the same line. */
.plans { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 28px; max-width: 1060px; margin: 54px auto 0; }

.plan { position: relative; display: flex; flex-direction: column; padding: 30px 30px 32px; border-radius: 30px; border: 1.5px solid transparent; color: #fff; text-align: left;
    background: linear-gradient(160deg, #1D1030, #130A21 58%, #0A0514) padding-box,
                linear-gradient(135deg, rgba(240, 220, 255, .55), rgba(168, 85, 247, .3) 38%, rgba(255, 255, 255, .06) 70%, rgba(232, 92, 255, .45)) border-box;
    box-shadow: 0 46px 90px -44px rgba(40, 10, 70, .9); }

/* the DFY card is the one being steered to, so it gets the neon */
.plan-best { background: linear-gradient(160deg, #2A1046, #180A2C 58%, #0C0618) padding-box,
                linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(232, 92, 255, .6) 38%, rgba(255, 255, 255, .08) 70%, rgba(168, 85, 247, .9)) border-box;
    box-shadow: 0 54px 96px -44px rgba(40, 10, 70, .95), 0 0 90px -26px rgba(168, 85, 247, .6); }
.plan-best::before { content: ""; position: absolute; inset: -20px; z-index: -1; border-radius: 44px; pointer-events: none;
    background: radial-gradient(ellipse 62% 60% at 50% 44%, rgba(168, 85, 247, .3), transparent 72%); }
/* below 576px the container is fluid with only 12px of side padding, so a -20px
   bloom reaches 8px past the viewport and adds horizontal scroll. This used to be
   swallowed by `overflow-x: clip` on .pr — which is gone, because that same clip
   was slicing the seam medallion in half on Safari. */
@media (max-width: 575.98px) { .plan-best::before { inset: -10px; border-radius: 36px; } }

.pl-ribbon { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 7px; padding: 7px 18px; border-radius: 999px; background: var(--grad-neon); color: #fff; font-family: var(--display); font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 14px 30px -12px rgba(232, 92, 255, .95), inset 0 1px 0 rgba(255, 255, 255, .45); }

.pl-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--grad-vio); color: #1A0A2E; font-size: 21px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .8), 0 16px 28px -14px rgba(199, 125, 255, .9); }
.plan-best .pl-ic { background: var(--grad-neon); color: #fff; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 16px 30px -12px rgba(232, 92, 255, .95); }
.pl-name { margin: 16px 0 0; font-family: var(--display); font-size: clamp(22px, 2.3vw, 29px); font-weight: 800; line-height: 1.18; letter-spacing: -.025em; color: #fff; }
.pl-sub { margin: 7px 0 0; color: #B098CE; font-size: 14.5px; font-weight: 600; line-height: 1.45; }

.pl-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-top: 20px; padding-top: 20px; border-top: 1px dashed rgba(168, 85, 247, .26); }
.pl-now { font-family: var(--display); font-size: clamp(52px, 5.4vw, 72px); font-weight: 800; line-height: .9; letter-spacing: -.045em; color: #fff; text-shadow: 0 0 44px rgba(232, 92, 255, .5); }
.pl-now sup { top: -.8em; margin-right: 2px; font-size: .4em; color: var(--vio); }
.pl-per { color: #C9B2E4; font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.pl-list { flex: 1; margin: 22px 0 0; padding: 0; list-style: none; }
.pl-list li { display: flex; align-items: flex-start; gap: 11px; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, .07); color: #E2D4F3; font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.pl-list li:first-child { border-top: 0; }
.pl-list li > i { display: grid; place-items: center; width: 22px; height: 22px; flex: none; margin-top: 1px; border-radius: 50%; background: rgba(34, 197, 94, .16); box-shadow: inset 0 0 0 1px rgba(34, 197, 94, .45); color: #4ADE80; font-size: 10px; }

/* a row the plan does NOT include: the copy shows an em dash */
.pl-list .pl-no { color: #7A6795; }
.pl-list .pl-no > i { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: #7A6795; font-size: 13px; font-weight: 800; }
/* the two rows that are the whole reason the second card exists */
.pl-list .pl-plus { color: #fff; font-weight: 800; }
.pl-list .pl-plus > i { background: var(--grad-neon); box-shadow: none; color: #fff; }
.pl-tag { display: block; width: fit-content; margin: 5px 0 0; padding: 2px 10px; border-radius: 999px; background: rgba(232, 92, 255, .14); box-shadow: inset 0 0 0 1px rgba(232, 92, 255, .45); color: #F0B6FF; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- coupon strip (sits directly above the JVZoo button) ----------
   Amber, so it reads as a discount rather than as part of the violet card or
   the green CTA. The code chip is click-to-copy: the [data-copy] handler in
   script.js adds .copied for 1.6s, which flips the copy icon to a check. */
.pl-coupon { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 24px; padding: 13px 16px; border-radius: 16px;
    background: linear-gradient(120deg, rgba(255, 144, 33, .18), rgba(255, 196, 107, .09));
    box-shadow: inset 0 0 0 1.5px rgba(255, 144, 33, .5); }
.plc-lab { display: inline-flex; align-items: center; gap: 8px; color: #FFC46B; font-family: var(--display); font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; }
.plc-lab i { font-size: 12px; opacity: .9; }
.plc-code { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border: 0; border-radius: 11px; background: #fff; color: #7A22F5;
    font-family: var(--display); font-size: 15px; font-weight: 800; letter-spacing: .04em; line-height: 1.1; cursor: pointer;
    box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .9), inset 0 0 0 1.5px rgba(122, 34, 245, .2); transition: background .18s ease, color .18s ease; }
.plc-code:hover { background: #F6EFFD; }
.plc-code i { font-size: 13px; opacity: .8; }
.plc-code.copied { background: #D9FBE6; color: #0E7134; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .9), inset 0 0 0 1.5px rgba(14, 139, 60, .35); }
.plc-code.copied i { opacity: 1; }
.plc-code.copied i::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.plc-off { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 9px; background: linear-gradient(100deg, #FFC46B, #FF9021 52%, #F26B0F); color: #3B1A00;
    font-family: var(--display); font-size: 13px; font-weight: 800; letter-spacing: .04em; white-space: nowrap;
    box-shadow: 0 12px 22px -12px rgba(255, 144, 33, .95), inset 0 1px 0 rgba(255, 255, 255, .5); }
.fin-card .jv-wrap, .pl-coupon + .jv-wrap { margin-top: 16px; }

@media (max-width: 575.98px) {
    .pl-coupon { gap: 8px; padding: 12px 12px; border-radius: 14px; }
    .plc-lab { font-size: 12.5px; }
    .plc-code { font-size: 14px; padding: 7px 12px; }
    .plc-off { font-size: 12px; padding: 5px 10px; }
}

.pl-foot { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 14px; color: #B098CE; font-size: 13.5px; font-weight: 600; }
.pl-foot i { color: #4ADE80; }

/* ---------- JVZoo buy button ----------
   Ported from the Pro / Local Client Version pages. Both of those keep
   the page's accept GREEN for the glow and ring, and so does this one.
   The <a> is supplied by JVZoo and must stay EXACTLY as given: no extra
   markup inside it, no classes on the anchor or the <img>. Everything
   visual is done from the wrappers, so the anchor is never touched.
     .jv-wrap   — un-clipped layer: outer glow + pulsing ring
     .jv-button — clipped layer: rounded corners + the shine sweep
   Both overlays are pointer-events: none so the whole button stays clickable.
   ------------------------------------------------------------------ */
.jv-wrap { position: relative; width: fit-content; max-width: 100%; margin: 24px auto 0; }
.jv-wrap::before { content: ""; position: absolute; inset: -10px; z-index: 0; border-radius: 22px; pointer-events: none;
    background: radial-gradient(closest-side, rgba(27, 178, 76, .42), transparent 76%); }
.jv-wrap::after { content: ""; position: absolute; inset: -4px; z-index: 2; border-radius: 16px; border: 2px solid rgba(55, 212, 95, .8); pointer-events: none; animation: ctaRing 2.2s ease-out infinite; }

.jv-button { position: relative; z-index: 1; overflow: hidden; border-radius: 12px; box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .9); }
.jv-button::after { content: ""; position: absolute; top: 0; left: -60%; z-index: 2; width: 40%; height: 100%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg); animation: shine 3.6s ease-in-out infinite; }
.jv-button a { display: block; line-height: 0; }
.jv-button img { display: block; width: 100%; max-width: 489px; height: auto; margin: 0 auto; }

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
    .pr { margin-top: -46px; padding: 94px 0 96px; border-radius: 48px 48px 0 0; }
    .plans { grid-template-columns: 1fr; gap: 46px; max-width: 560px; margin-top: 46px; }
}
@media (max-width: 767.98px) {
    .pr { padding: 78px 0 78px; border-radius: 36px 36px 0 0; }
    .plan { padding: 26px 20px 28px; border-radius: 24px; }
    .pl-list li { font-size: 14.5px; }
    .pr-both li { font-size: 13px; padding: 6px 12px; }
    .jv-wrap { margin-top: 20px; }
    .jv-wrap::after { inset: -3px; border-width: 1.5px; }
}

/* ==========================================================
   SECTION 15 — GET EVERYTHING IN THE COMPLETE PLATINUM BUNDLE
   The final close, as its own DARK section. It curves up over
   the light pricing table (curve + lit hairline, NO medallion)
   and then runs flush into the dark footer — see the note on
   .site-footer::before, whose wedge colour has to track this
   section's END colour. Stacking ladder: z-index 41 (.pr is 40).
   ========================================================== */
.fin { position: relative; z-index: 41; isolation: isolate; overflow-x: clip; margin-top: -58px; padding: 108px 0 130px; border-radius: 64px 64px 0 0; color: #fff; text-align: center;
    background: linear-gradient(180deg, #24123F 0%, #170B2B 30%, #0E0620 66%, #150826 100%);
    box-shadow: inset 0 1.5px 0 rgba(240, 182, 255, .7), 0 -28px 56px -26px rgba(45, 12, 85, .55); }
.fin-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.fin-glow { position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 46% 26% at 50% 2%, rgba(199, 125, 255, .3), transparent 72%),
        radial-gradient(ellipse 32% 26% at 3% 48%, rgba(232, 92, 255, .15), transparent 74%),
        radial-gradient(ellipse 32% 26% at 97% 54%, rgba(122, 34, 245, .24), transparent 74%),
        radial-gradient(ellipse 60% 26% at 50% 100%, rgba(168, 85, 247, .28), transparent 74%); }
/* one shaft falling from the top, the same device as .beam on the
   introducing card — violet, not white, on this ground */
.fin-beam { position: absolute; left: 50%; top: 0; width: 700px; height: 900px; margin-left: -350px; filter: blur(20px);
    background: linear-gradient(180deg, rgba(240, 220, 255, .3), rgba(168, 85, 247, .09) 55%, transparent 80%);
    clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%); mask-image: linear-gradient(180deg, transparent 0, #000 16%); }
.fin-stars { position: absolute; left: 0; right: 0; top: 0; height: 620px; opacity: .3; background: url(../images/stars.svg) 0 0 / 100% 100% no-repeat; filter: var(--tint-vio); }

.fin-title { max-width: 1060px; margin: 0 auto; font-family: var(--display); font-size: clamp(28px, 3.7vw, 54px); font-weight: 800; line-height: 1.14; letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.fin-title em { font-style: normal; background: var(--grad-vio-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

.fc-lede { margin: 22px auto 0; max-width: 820px; font-family: var(--display); font-size: clamp(19px, 2.1vw, 27px); font-weight: 800; line-height: 1.32; letter-spacing: -.02em; color: #EADCFA; text-wrap: balance; }
.fc-lede b { background: linear-gradient(100deg, #C77DFF 0%, #E85CFF 52%, #F6B9FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- the six PLUS rows ---------- */
.fc-plus { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 14px; max-width: 1040px; margin: 36px auto 0; padding: 0; list-style: none; }
.fc-plus li { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 17px; text-align: left;
    background: linear-gradient(180deg, color-mix(in srgb, var(--g) 16%, transparent), color-mix(in srgb, var(--g) 6%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g) 42%, transparent), 0 20px 36px -22px color-mix(in srgb, var(--g) 90%, transparent); }
.fc-plus b { flex: none; padding: 4px 9px; border-radius: 7px; background: color-mix(in srgb, var(--g) 90%, #fff); color: #14062B; font-family: var(--display); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.fc-plus i { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 11px; background: color-mix(in srgb, var(--g) 20%, transparent); color: color-mix(in srgb, var(--g) 80%, #fff); font-size: 14px; }
.fc-plus span { font-family: var(--display); font-size: clamp(15px, 1.4vw, 17px); font-weight: 800; letter-spacing: -.015em; line-height: 1.24; color: #fff; }

.fc-one { margin: 32px auto 0; max-width: 760px; color: #C6B2E2; font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.66; text-wrap: balance; }
.fc-one b { color: #fff; font-weight: 800; }

/* ---------- price ---------- */
.fc-price { display: inline-flex; align-items: center; justify-content: center; gap: 14px; margin: 28px 0 0; padding: 16px 30px 16px 26px; border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03));
    box-shadow: inset 0 0 0 1.5px rgba(199, 125, 255, .45), 0 26px 50px -26px rgba(168, 85, 247, .9); }
.fc-price em { font-style: normal; font-family: var(--display); font-size: clamp(19px, 2.1vw, 28px); font-weight: 800; letter-spacing: -.02em; color: #DCC8F5; }
.fc-price b { display: inline-flex; align-items: flex-start; font-family: var(--display); font-size: clamp(50px, 7.4vw, 96px); font-weight: 800; line-height: .88; letter-spacing: -.045em;
    background: var(--grad-vio-text); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 10px 26px rgba(199, 125, 255, .55)); }
.fc-price b sup { top: .12em; font-size: .42em; line-height: 1; }
.fc-price > span { padding-left: 15px; border-left: 1.5px solid rgba(199, 125, 255, .4); font-family: var(--display); font-size: clamp(15px, 1.5vw, 19px); font-weight: 800; letter-spacing: .02em; line-height: 1.2; text-align: left; color: #fff; }

.fc-cta { width: fit-content; max-width: 460px; margin: 32px auto 0; }
.fc-gt { display: inline-flex; align-items: center; gap: 10px; margin: 30px 0 0; padding: 10px 20px; border-radius: 999px; background: rgba(27, 178, 76, .14); box-shadow: inset 0 0 0 1px rgba(55, 212, 95, .42); color: #C7F3D5; font-size: clamp(14.5px, 1.4vw, 16.5px); font-weight: 700; line-height: 1.35; text-align: left; }
.fc-gt i { flex: none; color: #37D45F; font-size: 15px; }
.fc-gt b { color: #fff; font-weight: 800; }

@media (max-width: 1199px) {
    .fc-plus { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
}
@media (max-width: 991px) {
    .fin { margin-top: -46px; padding: 92px 0 108px; border-radius: 48px 48px 0 0; }
}
@media (max-width: 767px) {
    .fin { padding: 76px 0 100px; border-radius: 36px 36px 0 0; }
    .fc-plus { grid-template-columns: 1fr; gap: 11px; margin-top: 28px; }
    .fc-plus li { padding: 12px 14px; gap: 10px; }
    .fc-price { gap: 11px; padding: 14px 20px; border-radius: 20px; }
    .fc-price > span { padding-left: 11px; }
    .fc-one { margin-top: 26px; }
}

/* ==========================================================
   SECTION 16 — PLATINUM AGENCY + DFY ($797)
   Light band curving up over the dark close (curve + lit
   hairline, NO seam medallion). It is the LAST section before
   the footer, so .site-footer::before is un-hidden again and
   painted in this section's END colour, #F1E7FA.
   Stacking ladder: z-index 42 (.fin is 41).
   ========================================================== */
.ag { position: relative; z-index: 42; overflow-x: clip; margin-top: -58px; padding: 106px 0 104px; border-radius: 64px 64px 0 0; color: var(--ink-w); text-align: center;
    background: linear-gradient(180deg, #FCFAFF 0%, #F7F0FD 46%, #F1E7FA 100%);
    box-shadow: inset 0 1.5px 0 rgba(199, 125, 255, .9), 0 -26px 52px -26px rgba(45, 12, 85, .55); }
.ag-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.ag-glow { position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 44% 22% at 50% 2%, rgba(199, 125, 255, .3), transparent 70%),
        radial-gradient(ellipse 30% 22% at 2% 44%, rgba(232, 92, 255, .14), transparent 72%),
        radial-gradient(ellipse 30% 22% at 98% 56%, rgba(122, 34, 245, .13), transparent 72%); }
.ag-dots { position: absolute; inset: 0; background: radial-gradient(rgba(110, 60, 170, .18) 1.3px, transparent 1.8px) 0 0 / 17px 17px;
    -webkit-mask-image: radial-gradient(ellipse 22% 26% at 0% 30%, #000, transparent 72%), radial-gradient(ellipse 22% 26% at 100% 70%, #000, transparent 72%);
            mask-image: radial-gradient(ellipse 22% 26% at 0% 30%, #000, transparent 72%), radial-gradient(ellipse 22% 26% at 100% 70%, #000, transparent 72%); }

/* ---------- header ---------- */
.ag-head { position: relative; z-index: 2; max-width: 1000px; margin: 0 auto; }
.ag-kick { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 10px 22px; border-radius: 999px; background: var(--grad-neon); color: #fff; font-family: var(--display); font-size: clamp(13.5px, 1.35vw, 16px); font-weight: 800; letter-spacing: -.01em; line-height: 1.3; text-align: left; text-wrap: balance;
    box-shadow: 0 20px 38px -18px rgba(168, 85, 247, .95), inset 0 1px 0 rgba(255, 255, 255, .4); }
.ag-kick i { flex: none; font-size: 14px; opacity: .9; }
.ag-title { margin: 0; font-family: var(--display); font-size: clamp(29px, 3.8vw, 56px); font-weight: 800; line-height: 1.12; letter-spacing: -.032em; color: var(--ink-w); text-wrap: balance; }
.ag-title em { font-style: normal; background: var(--grad-neon); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ag-lede { max-width: 820px; margin: 20px auto 0; color: var(--ink-w-2); font-size: clamp(16.5px, 1.6vw, 19.5px); line-height: 1.64; text-wrap: balance; }
.ag-lede b { color: var(--ink-w); font-weight: 800; }

/* ---------- the two PLUS rows ---------- */
.ag-rows { position: relative; z-index: 2; display: grid; gap: 22px; max-width: 1060px; margin: 46px auto 0; }
.ag-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: 26px; padding: 30px 34px; border-radius: 26px; background: #fff; text-align: left;
    box-shadow: 0 30px 58px -34px rgba(45, 12, 85, .45), inset 0 0 0 1px rgba(122, 34, 245, .1); }
.agr-ic { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 28px; color: #fff; font-size: 36px;
    background: linear-gradient(150deg, color-mix(in srgb, var(--g) 70%, #fff), var(--g));
    box-shadow: 0 22px 38px -18px color-mix(in srgb, var(--g) 95%, transparent), inset 0 2px 0 rgba(255, 255, 255, .45); }
.agr-copy h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 4px 0 14px; font-family: var(--display); font-size: clamp(21px, 2.3vw, 31px); font-weight: 800; line-height: 1.16; letter-spacing: -.028em; color: var(--ink-w); }
.agr-tag { flex: none; padding: 5px 11px; border-radius: 8px; background: color-mix(in srgb, var(--g) 90%, #fff); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.agr-copy p { margin: 0 0 13px; color: var(--ink-w-2); font-size: clamp(16px, 1.5vw, 18px); line-height: 1.66; }
.agr-copy p:last-child { margin-bottom: 0; }
.agr-copy p b { color: var(--ink-w); font-weight: 800; }
.agr-call { display: flex; align-items: center; gap: 12px; margin: 0 0 15px; padding: 13px 18px; border-radius: 14px;
    background: color-mix(in srgb, var(--g) 9%, #fff); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--g) 32%, transparent);
    color: var(--ink-w); font-family: var(--display); font-size: clamp(16px, 1.6vw, 20px); font-weight: 800; letter-spacing: -.018em; line-height: 1.3; }
.agr-call i { flex: none; color: var(--g); font-size: 16px; }

/* ---------- price + CTA ---------- */
.ag-close { position: relative; z-index: 2; margin-top: 46px; }
.ag-price { display: inline-flex; align-items: center; justify-content: center; gap: 14px; margin: 0; padding: 16px 30px 16px 26px; border-radius: 24px; background: #fff;
    box-shadow: inset 0 0 0 1.5px rgba(122, 34, 245, .22), 0 28px 52px -28px rgba(45, 12, 85, .6); }
.ag-price em { font-style: normal; font-family: var(--display); font-size: clamp(19px, 2.1vw, 28px); font-weight: 800; letter-spacing: -.02em; color: var(--ink-w-2); }
.ag-price b { display: inline-flex; align-items: flex-start; font-family: var(--display); font-size: clamp(50px, 7.4vw, 96px); font-weight: 800; line-height: .88; letter-spacing: -.045em;
    background: var(--grad-neon); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ag-price b sup { top: .12em; font-size: .42em; line-height: 1; }
.ag-price > span { padding-left: 15px; border-left: 1.5px solid rgba(122, 34, 245, .22); font-family: var(--display); font-size: clamp(15px, 1.5vw, 19px); font-weight: 800; letter-spacing: .02em; line-height: 1.2; text-align: left; color: var(--ink-w); }

.ag-cta { width: fit-content; max-width: 480px; margin: 30px auto 0; }
.ag-sum { max-width: 800px; margin: 26px auto 0; color: var(--ink-w-2); font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.66; text-wrap: balance; }
.ag-sum b { color: var(--ink-w); font-weight: 800; }
.ag-gt { display: inline-flex; align-items: center; gap: 10px; margin: 22px 0 0; padding: 10px 20px; border-radius: 999px; background: #F0FBF4; box-shadow: inset 0 0 0 1.5px rgba(14, 139, 60, .26); color: #0E7134; font-size: clamp(14.5px, 1.4vw, 16.5px); font-weight: 700; line-height: 1.35; text-align: left; }
.ag-gt i { flex: none; color: #1BB24C; font-size: 15px; }
.ag-gt b { color: #08491F; font-weight: 800; }

@media (max-width: 991px) {
    .ag { margin-top: -46px; padding: 88px 0 90px; border-radius: 48px 48px 0 0; }
    .ag-rows { gap: 18px; margin-top: 38px; }
    .ag-row { grid-template-columns: 72px minmax(0, 1fr); gap: 20px; padding: 26px 24px; border-radius: 22px; }
    .agr-ic { width: 72px; height: 72px; border-radius: 22px; font-size: 28px; }
}
@media (max-width: 575px) {
    .ag { padding: 72px 0 76px; border-radius: 36px 36px 0 0; }
    .ag-kick { padding: 9px 16px; }
    .ag-row { grid-template-columns: 1fr; gap: 16px; padding: 24px 18px; }
    .agr-ic { width: 62px; height: 62px; border-radius: 19px; font-size: 25px; }
    .agr-copy h3 { gap: 9px; margin-bottom: 12px; }
    .agr-call { padding: 12px 14px; }
    .ag-price { gap: 11px; padding: 14px 20px; border-radius: 20px; }
    .ag-price > span { padding-left: 11px; }
}

/* ==========================================================
   STICKY BOTTOM BAR — both coupons + 30-minute clock + CTA
   Visible from the first fold down. Deliberately HOT ORANGE:
   the page runs violet-dark and lavender-light, and a bar in
   either of those palettes disappeared into the page. Orange
   is the one hue that stands off BOTH, and it already reads as
   urgency here. The CTA stays green because green is this
   page's buy colour everywhere else; a white ring separates it
   from the orange. z-index 100 (the section ladder tops at 42).
   ========================================================== */
.stickybar { position: fixed; left: 50%; bottom: 12px; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 18px;
    width: min(1140px, calc(100% - 24px)); padding: 10px 10px 10px 18px; border-radius: 20px; transform: translateX(-50%);
    background: linear-gradient(100deg, #FFA43A 0%, #FF8A12 38%, #F26B0F 72%, #DE4C07 100%);
    box-shadow: 0 0 0 2px rgba(255, 233, 199, .85), 0 -6px 46px -10px rgba(255, 138, 18, .5), 0 26px 54px -16px rgba(0, 0, 0, .95), inset 0 1.5px 0 rgba(255, 255, 255, .5);
    animation: sbPulse 3.4s ease-in-out infinite; }
@keyframes sbPulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(255, 233, 199, .85), 0 -6px 46px -10px rgba(255, 138, 18, .5), 0 26px 54px -16px rgba(0, 0, 0, .95), inset 0 1.5px 0 rgba(255, 255, 255, .5); }
    50%      { box-shadow: 0 0 0 2px rgba(255, 233, 199, 1),   0 -6px 60px -10px rgba(255, 138, 18, .8), 0 26px 54px -16px rgba(0, 0, 0, .95), inset 0 1.5px 0 rgba(255, 255, 255, .5); }
}

/* ---------- left: the two coupon codes ---------- */
.sb-coupons { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sb-lab { display: inline-flex; align-items: center; gap: 7px; flex: none; color: #4A1B00; font-family: var(--display); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sb-lab i { font-size: 11px; }
.sb-code { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 0; border-radius: 11px; background: #fff; color: #2A1046;
    font-family: var(--display); font-size: 14px; font-weight: 800; letter-spacing: .02em; line-height: 1.1; cursor: pointer; white-space: nowrap;
    box-shadow: 0 6px 14px -6px rgba(90, 30, 0, .8); transition: background .18s ease, color .18s ease, transform .18s ease; }
.sb-code:hover { transform: translateY(-1px); background: #FFF6E9; }
.sb-code em { flex: none; padding: 3px 7px; border-radius: 6px; background: #2A1046; color: #FFC46B; font-style: normal; font-size: 11px; letter-spacing: .04em; }
.sb-code i { font-size: 12px; opacity: .55; }
.sb-code.copied { background: #0E8B3C; color: #fff; }
.sb-code.copied em { background: rgba(255, 255, 255, .22); color: #fff; }
.sb-code.copied i { opacity: 1; }
.sb-code.copied i::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; }

/* ---------- centre: the clock ---------- */
.sb-timer { display: flex; align-items: center; gap: 12px; flex: none; }
.sb-lbl { color: #4A1B00; font-size: 11px; font-weight: 800; letter-spacing: .14em; line-height: 1.25; text-align: right; text-transform: uppercase; }
.cd { display: flex; align-items: center; gap: 5px; }
.cd-u { display: flex; flex-direction: column; align-items: center; min-width: 48px; padding: 5px 6px 4px; border-radius: 10px; background: #2A1046; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.cd-u b { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 23px; line-height: 1; color: #FFC46B; font-variant-numeric: tabular-nums; }
.cd-u small { margin-top: 2px; color: #C9A9F0; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.cd > i { font-family: 'Anton', sans-serif; font-style: normal; font-size: 18px; color: #4A1B00; }

/* ---------- right: CTA ---------- */
.sb-cta { display: inline-flex; align-items: center; gap: 10px; flex: none; padding: 14px 26px; border-radius: 14px; background: var(--grad-cta); color: #fff;
    font-family: var(--display); font-size: 16px; font-weight: 800; letter-spacing: -.01em; text-decoration: none; text-shadow: 0 1px 1px rgba(0, 60, 22, .5); white-space: nowrap;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 14px 26px -10px rgba(0, 60, 22, .9), inset 0 1px 0 rgba(255, 255, 255, .35); transition: box-shadow .2s ease, transform .2s ease; }
.sb-cta:hover { transform: translateY(-1px); box-shadow: 0 0 0 2px #fff, 0 18px 32px -10px rgba(0, 60, 22, 1), inset 0 1px 0 rgba(255, 255, 255, .45); }
.sb-cta i { font-size: 14px; }
.sb-cta-s { display: none; }

/* room so the bar never sits on top of the footer's last line */
.site-footer { padding-bottom: 104px; }

@media (max-width: 1199.98px) {
    .stickybar { gap: 12px; padding: 9px 9px 9px 14px; }
    .sb-lab { display: none; }
    .sb-cta { padding: 13px 20px; font-size: 15px; }
    .sb-cta-l { display: none; }
    .sb-cta-s { display: inline; }
}
@media (max-width: 991.98px) {
    /* the $297 / $797 tags stay: without them the two codes give no clue which
       one belongs to which plan */
    .sb-code { padding: 6px 10px; font-size: 13.5px; gap: 7px; }
    .sb-code em { padding: 2px 6px; font-size: 10px; }
    .cd-u { min-width: 42px; }
    .cd-u b { font-size: 20px; }
}
/* phones AND tablets: two rows — codes on top, clock + CTA underneath. This used
   to start at 767px, but once the chips carried "$297 after coupon" they stopped
   fitting on one row and the codes collided with the clock around 820px. */
@media (max-width: 991.98px) {
    .stickybar { flex-wrap: wrap; justify-content: center; gap: 9px; bottom: 8px; width: calc(100% - 16px); padding: 10px; border-radius: 18px; }
    .sb-coupons { order: 1; width: 100%; justify-content: center; gap: 8px; }
    /* "$297 after coupon" will not sit beside the code on a phone, so it takes a
       row of its own via wrap — which keeps the copy icon BESIDE the code rather
       than on a third row, saving the bar a whole line of height */
    .sb-code { flex: 1 1 0; flex-wrap: wrap; gap: 3px 8px; justify-content: center; padding: 7px 8px; font-size: 13.5px; }
    .sb-code em { flex: 0 0 100%; justify-content: center; padding: 2px 7px; font-size: 10px; }
    .sb-timer { order: 2; gap: 9px; }
    .sb-lbl { font-size: 10px; letter-spacing: .1em; }
    .sb-cta { order: 3; flex: 1 1 auto; justify-content: center; padding: 13px 16px; font-size: 15px; }
    .site-footer { padding-bottom: 176px; }  /* the bar is 141px tall once the chips stack */
}
@media (max-width: 400px) {
    .sb-lbl { display: none; }
    .cd-u { min-width: 38px; padding: 4px 5px 3px; }
    .cd-u b { font-size: 18px; }
    .cd-u small { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) { .stickybar { animation: none; } }

/* ==========================================================
   COUPON PRICING BITS (added with the Gold / Platinum split)
   Every price area states the same three things: the list
   price, the code, and what you actually pay.
   ========================================================== */
/* the "You pay $297" half of a .pl-coupon strip */
.plc-after { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 9px; background: rgba(255, 255, 255, .1);
    box-shadow: inset 0 0 0 1.5px rgba(255, 196, 107, .5); color: #FFE2BC; font-family: var(--display); font-size: 13px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.plc-after b { color: #fff; font-size: 15px; }

/* the standalone coupon line under a price plate */
.cpn-note { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0 0; padding: 9px 16px; border-radius: 999px;
    background: rgba(255, 144, 33, .14); box-shadow: inset 0 0 0 1.5px rgba(255, 144, 33, .5);
    color: #FFC46B; font-size: clamp(13.5px, 1.35vw, 15.5px); font-weight: 700; line-height: 1.35; text-align: left; }
.cpn-note i { flex: none; font-size: 12px; }
.cpn-note b { padding: 2px 9px; border-radius: 7px; background: #fff; color: #7A22F5; font-family: var(--display); font-size: 1em; font-weight: 800; letter-spacing: .03em; }
.cpn-note em { font-style: normal; font-family: var(--display); font-size: 1.16em; font-weight: 800; letter-spacing: -.01em; color: #fff; }
/* on the light offer card in the fold the amber has to darken to stay readable */
.offer .cpn-note { background: rgba(255, 144, 33, .16); color: #FFD9A8; }
.fc-cpn, .ag-cpn { margin-top: 22px; }
/* .ag lives on a LIGHT band */
.ag-cpn { background: #FFF3E4; box-shadow: inset 0 0 0 1.5px rgba(242, 107, 15, .4); color: #9A4408; }
.ag-cpn em { color: #7A2E04; }
.ag-cpn b { background: #2A1046; color: #FFC46B; }

/* the $47/month footnote inside a .ag-row */
.agr-note { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; padding: 11px 15px; border-radius: 12px; background: #F6F3FB;
    box-shadow: inset 0 0 0 1px rgba(122, 34, 245, .16); color: var(--ink-w-2); font-size: clamp(14px, 1.35vw, 15.5px); line-height: 1.55; }
.agr-note i { flex: none; margin-top: 3px; color: var(--g); font-size: 13px; }
.agr-note b { color: var(--ink-w); font-weight: 800; }

/* ==========================================================
   BONUS SECTION — the workshop is presented on its own, the
   six resources are numbered #1-#6 beneath a divider
   ========================================================== */
.bn-live { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border-radius: 999px; vertical-align: middle;
    background: linear-gradient(135deg, var(--a), var(--a2)); color: #fff; font-family: var(--display); font-size: clamp(14px, 1.5vw, 17px); font-weight: 800; letter-spacing: .02em;
    box-shadow: 0 16px 30px -14px color-mix(in srgb, var(--a) 95%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35); }
.bn-live i { font-size: 13px; opacity: .95; }

.bn-split { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 16px; margin: 8px 0 4px; }
.bn-split::before, .bn-split::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(122, 34, 245, .35)); }
.bn-split::after { background: linear-gradient(90deg, rgba(122, 34, 245, .35), transparent); }
.bn-split span { display: inline-flex; align-items: center; gap: 10px; flex: none; padding: 10px 22px; border-radius: 999px; background: var(--grad-neon); color: #fff;
    font-family: var(--display); font-size: clamp(14px, 1.5vw, 18px); font-weight: 800; letter-spacing: .02em; white-space: nowrap;
    box-shadow: 0 18px 34px -16px rgba(168, 85, 247, .95), inset 0 1px 0 rgba(255, 255, 255, .4); }
.bn-split span i { font-size: 14px; }

@media (max-width: 575.98px) {
    .cpn-note { gap: 6px; padding: 8px 13px; }
    .plc-after { font-size: 12.5px; padding: 5px 10px; }
    .bn-split { gap: 10px; }
    .bn-split span { padding: 9px 15px; font-size: 13.5px; }
}

/* ==========================================================
   FOOTER — ported from the Pro / Local Client Version pages
   and re-themed blue -> violet
   ========================================================== */
.site-footer { position: relative; isolation: isolate; overflow: hidden; padding: 150px 0 0; color: #DAC6F0; text-align: center;
    background: radial-gradient(ellipse 50% 40% at 50% 0%, rgba(168, 85, 247, .3), transparent 70%), linear-gradient(180deg, #150826 0%, #0B0518 60%, #08040F 100%); }
/* the slanted top edge, drawn as a wedge in the previous section's END
   colour. .ag (Platinum Agency + DFY) is the last section before the
   footer and finishes on #F1E7FA, so that is what this has to be.
   If a DARK section ever ends up directly above the footer instead,
   hide this (display: none) rather than recolouring it: a flat wedge
   painted over the footer's own top glow cuts a visible diagonal out
   of it when both sides of the join are already dark. */
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; z-index: 5; height: 80px; pointer-events: none;
    background: #F1E7FA; clip-path: polygon(0 0, 100% 0, 0 100%); }
.ft-map { position: absolute; inset: 0; z-index: -1; background: url(../images/map-dark.svg) center / cover no-repeat; opacity: .35; filter: var(--tint-vio);
    -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: #E85CFF; }
.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: #A491BE; }
.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(168, 85, 247, .26); border-bottom: 1px solid rgba(168, 85, 247, .26); }
.ft-links a { padding: 2px 18px; font-size: 14px; font-weight: 600; color: #E4D4F7; text-decoration: none; }
.ft-links a + a { border-left: 1px solid rgba(168, 85, 247, .32); }
.ft-links a:hover { color: #E85CFF; }
.ft-copy { margin: 18px 0 0; font-size: 13px; color: #8A76A6; }
/* bottom cityscape: far skyline -> giant wordmark -> near lit skyline */
.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(168, 85, 247, .34), 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: .3; filter: var(--tint-vio) brightness(.9); }
.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(240, 220, 255, .55) 0%, rgba(168, 85, 247, .3) 45%, rgba(109, 24, 232, .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; filter: saturate(.5) brightness(.55) contrast(1.1); }
.ft-pin { position: absolute; z-index: 3; width: 22px; height: 30px; transform: translateX(-50%); filter: drop-shadow(0 6px 10px rgba(168, 85, 247, .7)); }
.ft-pin svg { display: block; width: 100%; height: 100%; }

@media (max-width: 767.98px) {
    .site-footer { padding-top: 110px; }
    .site-footer::before { height: 48px; }
    .ft-tag { font-size: 22px; }
    .ft-legal { margin-top: 30px; }
    .ft-legal p { font-size: 12.5px; }
    .ft-links { gap: 4px 0; padding: 14px 0; }
    .ft-links a { padding: 12px 12px; font-size: 13px; }
}