/* ==========================================================
   ProfitMaps AI — pre-launch webinar page
   Structure: the Local Media Empire pre-launch page.
   Brand: the JV / thank-you system — lime #C6F689 on map-black,
   Archivo condensed uppercase, Geist body, Geist Mono labels,
   Caveat notes, amber→orange CTA, logo-squircle motif.
   Lime = highlights and "found" states. Amber = the one action.
   Rank tiers (same as the JV scan board):
     top 3 lime · 4–10 amber · 11–20 coral · 20+ grey
   ========================================================== */
/* Arial scaled to Geist's width (measured: regular 102.6%, bold 99.5%),
   so text wraps the same before and after Geist loads (no layout shift) */
@font-face { font-family: "Geist Fallback"; font-weight: 400 500; src: local("Arial"), local("ArialMT"); size-adjust: 102.6%; ascent-override: 98%; descent-override: 28%; line-gap-override: 0%; }
@font-face { font-family: "Geist Fallback"; font-weight: 600 900; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 99.5%; ascent-override: 98%; descent-override: 28%; line-gap-override: 0%; }

:root {
    --lime: #C6F689;
    --lime-2: #ACE664;
    --lime-ink: #0B130D;
    --ink: #070B08;
    --panel: #0F1712;
    --panel-2: #131D16;
    --text: #EEF3EA;
    --body: #B9C3B4;
    --muted: #9AA596;
    --dim: #7D8879;
    --line: rgba(255, 255, 255, .09);
    --line-lime: rgba(198, 246, 137, .22);

    --t-amber: #F6C945;
    --t-coral: #FF7A6B;
    --t-grey: #2A332D;

    /* light sheets */
    --paper: #F3F6EE;
    --mint: #E7F1D9;
    --t-ink: #0E1A10;
    --t-body: #46524A;
    --t-muted: #5B6957;
    --t-line: rgba(14, 26, 16, .1);
    --t-green: #3B7A14;

    /* the CTA */
    --amber-grad: linear-gradient(180deg, #FFD95A 0%, #FFB02E 52%, #FF8A1F 100%);
    --amber-ink: #2A1300;

    --f-display: "Archivo", "Inter Tight", system-ui, sans-serif;
    --f-body: "Geist", "Geist Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
    --f-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    --f-hand: "Caveat", cursive;
    --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; -webkit-text-size-adjust: 100%; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
body {
    margin: 0;
    background: var(--ink);
    color: var(--body);
    font-family: var(--f-body);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
.ic { width: 1em; height: 1em; flex: none; }
::selection { background: var(--lime); color: var(--lime-ink); }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 3000; padding: 10px 16px; border-radius: 10px; background: var(--lime); color: var(--lime-ink); font-weight: 600; }
.skip:focus { top: 16px; }

.wrap { position: relative; width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* logo-mark dot (tilted squircle with a hole) */
.mark-dot {
    position: relative;
    display: inline-block;
    width: 12px; height: 12px;
    flex: none;
    border-radius: 32%;
    background: radial-gradient(circle, var(--ink) 0 2.3px, transparent 2.9px), var(--lime);
    transform: rotate(-8deg);
}

/* reveal on scroll */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease) var(--d, 0s), transform .8s var(--ease) var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }


/* ==========================================================
   BUTTONS
   ========================================================== */
.btn-mega,
.btn-amber {
    position: relative;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border: 0;
    background: var(--amber-grad);
    color: var(--amber-ink);
    font-family: var(--f-display);
    font-stretch: 78%;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .01em;
    white-space: nowrap;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn-mega {
    gap: 20px;
    height: 78px;
    padding: 0 11px 0 34px;
    border-radius: 22px;
    font-size: 27px;
    box-shadow: 0 0 0 1px rgba(255, 245, 210, .6) inset, 0 -4px 0 rgba(150, 60, 0, .25) inset, 0 0 0 6px rgba(255, 160, 40, .14), 0 24px 60px -14px rgba(255, 140, 30, .75);
}
.btn-mega .ic {
    width: 56px; height: 56px;
    padding: 16px;
    border-radius: 30%;
    background: var(--amber-ink);
    color: #FFC94A;
    transform: rotate(-8deg);
    transition: transform .3s var(--ease);
}
.btn-mega:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(255, 245, 210, .7) inset, 0 -4px 0 rgba(150, 60, 0, .25) inset, 0 0 0 8px rgba(255, 160, 40, .2), 0 30px 70px -12px rgba(255, 140, 30, .9); }
.btn-mega:hover .ic { transform: rotate(0) translateX(3px); }
.btn-mega:focus-visible, .btn-amber:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.btn-mega::after,
.btn-amber::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .32), transparent);
    transform: translateX(-160%) skewX(-18deg);
    animation: shine 4.5s 1.4s infinite;
    pointer-events: none;
}
@keyframes shine {
    0% { transform: translateX(-160%) skewX(-18deg); }
    28%, 100% { transform: translateX(360%) skewX(-18deg); }
}
.btn-block { display: flex; width: 100%; justify-content: space-between; }
.btn-amber {
    justify-content: center;
    gap: 10px;
    border-radius: 14px;
    box-shadow: 0 0 0 1px rgba(255, 245, 210, .55) inset, 0 -3px 0 rgba(150, 60, 0, .22) inset, 0 14px 40px -12px rgba(255, 140, 30, .6);
}
.btn-amber:hover { transform: translateY(-2px); }
.btn-nav { height: 48px; padding: 0 22px; font-size: 17px; }


/* ==========================================================
   NAV
   ========================================================== */
.pm-nav-wrap { position: fixed; top: 14px; left: 0; right: 0; z-index: 1000; padding: 0 16px; }
.pm-nav {
    max-width: 1280px;
    height: 74px;
    margin: 0 auto;
    padding: 0 13px 0 26px;
    display: flex;
    align-items: center;
    gap: 18px;
    border-radius: 24px;
    border: 1px solid var(--line);
    background: rgba(11, 16, 12, .8);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 20px 50px -30px rgba(0, 0, 0, .9);
    transition: background-color .3s, border-color .3s;
}
.pm-nav-wrap.scrolled .pm-nav { background: rgba(9, 13, 10, .96); border-color: rgba(198, 246, 137, .14); }
.pm-logo { flex: none; margin-right: auto; }
.pm-logo img { display: block; height: 34px; width: auto; }
.pm-links { display: flex; gap: 4px; }
.pm-links a { display: block; padding: 10px 14px; border-radius: 12px; font-size: 15px; font-weight: 500; color: #B9C2B5; transition: color .2s, background-color .2s; }
.pm-links a:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.pm-links a.active { color: #fff; background: rgba(255, 255, 255, .08); }


/* ==========================================================
   1. FOLD
   ========================================================== */
.hero {
    position: relative;
    isolation: isolate;
    padding: 124px 0 150px;
    overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-aura {
    position: absolute;
    left: 50%; top: -220px;
    width: 1500px; height: 900px;
    margin-left: -750px;
    background:
        radial-gradient(closest-side at 50% 55%, rgba(198, 246, 137, .15), transparent 70%),
        radial-gradient(closest-side at 18% 45%, rgba(120, 220, 140, .07), transparent),
        radial-gradient(closest-side at 84% 40%, rgba(255, 176, 46, .05), transparent);
}
.hero-dots {
    position: absolute;
    inset: 0;
    background: radial-gradient(rgba(198, 246, 137, .08) 1.1px, transparent 1.6px) 0 0 / 28px 28px;
    -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 22%, #000, transparent 75%);
            mask-image: radial-gradient(ellipse 70% 50% at 50% 22%, #000, transparent 75%);
}
.ghost-mark {
    position: absolute;
    width: var(--w);
    aspect-ratio: 1;
    border-radius: 30%;
    border: 1.5px solid rgba(198, 246, 137, var(--a, .07));
    transform: rotate(var(--r, -8deg));
}
.ghost-mark::after {
    content: "";
    position: absolute;
    inset: 26%;
    border-radius: 50%;
    border: 1.5px solid rgba(198, 246, 137, var(--a, .07));
}
.ghost-mark.gm1 { --w: 520px; --r: -12deg; left: -270px; top: 70px; }
.ghost-mark.gm2 { --w: 560px; --r: 10deg; right: -300px; top: 30px; }

.floor-wrap {
    position: absolute;
    left: 0; right: 0;
    top: 640px; bottom: 0;
    overflow: hidden;
    perspective: 1000px;
    perspective-origin: 50% 0;
    -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 70%, transparent);
            mask-image: linear-gradient(transparent, #000 18%, #000 70%, transparent);
}
.map-floor {
    position: absolute;
    left: 50%; top: 0;
    width: 2800px; height: 1750px;
    margin-left: -1400px;
    background: url(../images/map-floor.svg) center top / 100% 100% no-repeat;
    opacity: .4;
    transform-origin: 50% 0;
    transform: rotateX(60deg);
}

/* edge art, pinned to the viewport edges beside the headline.
   Sized to the side space left by the headline: full size from 1600,
   scaled down 1280–1599 (where the headline also eases off a little),
   hidden below 1280. */
.edge-art { display: none; }
@media (min-width: 1280px) {
    .edge-art { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
    .ea-pin {
        position: absolute;
        left: max(4px, calc(50% - 900px)); top: 100px;
        width: var(--pin-w, 190px);
        opacity: .42;
        filter: saturate(.8);
        -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent);
                mask-image: radial-gradient(closest-side, #000 55%, transparent);
        animation: bob 7s ease-in-out infinite;
    }
    .ea-date {
        position: absolute;
        right: max(12px, calc(50% - 880px)); top: 128px;
        width: 150px;
        padding: 0 0 14px;
        border-radius: 24px;
        background: linear-gradient(160deg, #18261B, #0D150F);
        box-shadow: inset 0 0 0 1px rgba(198, 246, 137, .24), 0 30px 60px -28px rgba(0, 0, 0, .9);
        text-align: center;
        transform: rotate(7deg) scale(var(--date-s, 1));
        transform-origin: 100% 0;
        overflow: hidden;
        animation: bob 7s -3.5s ease-in-out infinite;
    }
}
@media (min-width: 1400px) and (max-width: 1599.98px) {
    .edge-art { --pin-w: 165px; --date-s: .8; }
    .hero .hero-h1 .h-a { font-size: 50px; }
    .hero .hero-h1 .h-b { font-size: 92px; }
    .hero .hero-h1 .h-c { font-size: 42px; }
}
@media (min-width: 1400px) and (max-width: 1439.98px) {
    .edge-art { --pin-w: 150px; --date-s: .7; }
}
@media (min-width: 1280px) and (max-width: 1399.98px) {
    .edge-art { --pin-w: 128px; --date-s: .68; }
    .ea-pin { top: 112px; }
    .hero .hero-h1 .h-a { font-size: min(3.65vw, 48px); }
    .hero .hero-h1 .h-b { font-size: min(6.7vw, 88px); }
    .hero .hero-h1 .h-c { font-size: min(3.1vw, 40px); }
}
@media (min-width: 1280px) and (max-width: 1365.98px) {
    .edge-art { --pin-w: 116px; --date-s: .56; }
}
@keyframes bob { 50% { translate: 0 -10px; } }
.ead-mon { display: block; padding: 9px 0 8px; background: var(--lime); color: var(--lime-ink); font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.ead-days { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; font-family: var(--f-display); font-stretch: 72%; font-weight: 900; font-size: 56px; line-height: 1; color: #fff; }
.ead-days i { width: 9px; height: 9px; border-radius: 32%; background: var(--lime); transform: rotate(-8deg); }
.ead-wd { display: block; margin-top: 4px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.hero-wrap { position: relative; z-index: 2; }
.hero-copy { text-align: center; }
/* entrance slides only (no fade): fading from opacity 0 delayed mobile LCP to 3.5s */
.hero-copy > * { animation: rise .9s var(--ease) both; }
.hero-copy > :nth-child(2) { animation-delay: .08s; }
.hero-copy > :nth-child(3) { animation-delay: .2s; }
@keyframes rise { from { transform: translateY(18px); } to { transform: none; } }

.dateline {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 9px 28px 9px 9px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(229, 50, 42, .4), rgba(198, 246, 137, .09));
    box-shadow: inset 0 0 0 1.5px rgba(255, 110, 96, .5), 0 14px 40px -18px rgba(229, 50, 42, .55);
    font-family: var(--f-display);
    font-stretch: 88%;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #FFDAD5;
}
.dateline b { color: #fff; font-weight: 900; }
.dl-sep { color: #8E998A; }
.dl-txt { text-wrap: balance; }
.nw { white-space: nowrap; }
.dl-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 999px;
    background: #E5322A;
    color: #fff;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: .14em;
    box-shadow: 0 0 20px rgba(255, 70, 60, .6);
}
.dl-live i, .cd-lbl i, .sw-status i { width: 8px; height: 8px; border-radius: 50%; background: #FF5A4E; box-shadow: 0 0 0 0 rgba(255, 90, 78, .6); animation: livePulse 1.8s infinite; }
.dateline .dl-live i { width: 9px; height: 9px; background: #fff; box-shadow: none; animation: blink 1.1s steps(2, start) infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 78, .55); } 100% { box-shadow: 0 0 0 9px rgba(255, 90, 78, 0); } }

.hero-h1 {
    margin: 38px 0 0;
    font-family: var(--f-display);
    font-stretch: 72%;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.06;
    color: #fff;
}
.hero-h1 > span { display: block; }
.fw .hero-h1, .fw .sc-title, .fw .dateline { visibility: hidden; }
.hero-h1 .h-a { font-size: clamp(28px, 3.65vw, 52px); letter-spacing: .005em; white-space: nowrap; }
.hero-h1 .h-b { margin-top: 24px; font-size: clamp(46px, 6.7vw, 96px); line-height: 1.1; white-space: nowrap; }
.hero-h1 .h-c { margin-top: 28px; font-size: clamp(24px, 3.1vw, 44px); color: #DCE4D8; letter-spacing: .01em; white-space: nowrap; }
.hero-h1 .h-c em { font-style: normal; color: var(--lime); }
.hero-h1 .dash { color: var(--lime); }
.hero-h1 .hl {
    display: inline-block;
    padding: .1em .16em .07em;
    border-radius: .11em;
    background: var(--lime);
    color: var(--lime-ink);
    transform: rotate(-1.6deg);
    box-shadow: 0 24px 70px -18px rgba(198, 246, 137, .55), 0 0 0 6px rgba(198, 246, 137, .12);
}
/* the word itself reads as "invisible": an outline with no fill */
.hero-h1 .inv { color: transparent; -webkit-text-stroke: .028em var(--lime-ink); paint-order: stroke; }
@supports not (-webkit-text-stroke: 1px #000) { .hero-h1 .inv { color: rgba(11, 19, 13, .4); } }

.hero-sub { max-width: 980px; margin: 34px auto 0; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.75; color: var(--body); }
.hero-sub b { color: #fff; font-weight: 600; }

/* --- split: scan preview + seat card --- */
.fold-split {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
    gap: 36px;
    align-items: start;
    margin-top: 56px;
    animation: rise .9s .32s var(--ease) both;
}

/* scan window, sitting on the tilted lime plate (JV video signature) */
.fs-visual { position: relative; }
.scan-win {
    position: relative;
    border-radius: 26px;
    background: #0D1510;
    box-shadow: inset 0 0 0 1px rgba(198, 246, 137, .2), 0 44px 80px -36px rgba(0, 0, 0, .95);
}
.scan-win::before {
    content: "";
    position: absolute;
    inset: -11px;
    z-index: -1;
    border-radius: 32px;
    background: linear-gradient(140deg, #D9FBA8, var(--lime) 45%, var(--lime-2));
    transform: rotate(-1.8deg);
    opacity: .9;
}
.scan-win::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    z-index: -2;
    width: 130%; height: 150%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(198, 246, 137, .18), transparent);
    pointer-events: none;
}
.sw-bar { display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.sw-search {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    height: 38px;
    padding: 0 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
}
.sw-search .ic { width: 16px; height: 16px; color: var(--lime); }
.sw-chip, .sw-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 12px;
    border-radius: 12px;
    font-family: var(--f-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.sw-chip { background: rgba(198, 246, 137, .12); color: var(--lime); box-shadow: inset 0 0 0 1px rgba(198, 246, 137, .3); }
.sw-chip .ic { width: 15px; height: 15px; }
.sw-status { color: var(--muted); }
.scan-win.done .sw-status i { background: var(--lime); animation: none; box-shadow: 0 0 10px rgba(198, 246, 137, .8); }

.sw-map {
    position: relative;
    aspect-ratio: 16 / 9.6;
    overflow: hidden;
    background:
        radial-gradient(60% 70% at 36% 50%, rgba(198, 246, 137, .08), transparent 70%),
        url(../images/map-city.svg) center / cover no-repeat,
        #0B110D;
}
.sw-map::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(5, 8, 6, .7));
    pointer-events: none;
}
.sw-radar {
    position: absolute;
    left: 36%; top: 50%;
    width: 120px; height: 120px;
    margin: -60px 0 0 -60px;
    border-radius: 50%;
    border: 2px solid rgba(198, 246, 137, .5);
    opacity: 0;
}
.scan-win.scanning .sw-radar { animation: radar 1.6s var(--ease) 2; }
@keyframes radar { 0% { transform: scale(.2); opacity: .9; } 100% { transform: scale(4.2); opacity: 0; } }

/* --- shared rank grid (built by JS from data-ranks) --- */
.sgrid {
    --t: 48px;
    --g: 12px;
    display: grid;
    grid-template-columns: repeat(5, var(--t));
    gap: var(--g);
}
.sgrid i {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--t); height: var(--t);
    border-radius: 30%;
    font-family: var(--f-display);
    font-stretch: 78%;
    font-style: normal;
    font-weight: 900;
    font-size: calc(var(--t) * .4);
    line-height: 1;
    color: var(--lime-ink);
    background: var(--c);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), inset 0 -3px 0 rgba(0, 0, 0, .14);
}
.sgrid i.g { --c: var(--lime); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 0 22px -4px rgba(198, 246, 137, .8); }
.sgrid i.a { --c: var(--t-amber); }
.sgrid i.r { --c: var(--t-coral); color: #2A0C08; }
.sgrid i.d { --c: var(--t-grey); color: #9AA596; font-size: calc(var(--t) * .3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.sgrid i.q { --c: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .08); border: 0; }
.sgrid i.you { z-index: 1; transform: scale(1.14); }
.sgrid i.you::after,
.sgrid i.far::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 34%;
    border: 2px solid var(--ring, var(--lime));
    animation: tileRing 2.2s var(--ease) infinite;
}
.sgrid i.far { --ring: var(--t-coral); }
@keyframes tileRing { 0% { transform: scale(.92); opacity: .9; } 100% { transform: scale(1.4); opacity: 0; } }
/* tiny badge on the two tiles the callouts talk about */
.sgrid i .tb {
    position: absolute;
    right: -9px; top: -9px;
    display: grid;
    place-items: center;
    width: 22px; height: 22px;
    border-radius: 30%;
    background: #fff;
    color: var(--lime-ink);
    box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .6);
}
.sgrid i .tb svg { width: 13px; height: 13px; }
.sgrid i.far .tb { background: var(--t-coral); color: #2A0C08; }

/* pop-in by distance from the centre (JS sets --dl) */
.js .sgrid[data-anim] i { opacity: 0; transform: scale(.4); transition: opacity .35s var(--ease) var(--dl, 0s), transform .5s cubic-bezier(.3, 1.5, .5, 1) var(--dl, 0s); }
.js .sgrid[data-anim].go i { opacity: 1; transform: none; }
.js .sgrid[data-anim].go i.you { transform: scale(1.14); }

.sgrid-hero { position: absolute; left: 36%; top: 50%; transform: translate(-50%, -50%); z-index: 1; }

/* the two callouts: a column on the right of the map (desktop),
   a 2-up row under it (phones) */
.sw-body { position: relative; }
.sw-calls {
    position: absolute;
    top: 0; bottom: 0; right: 16px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    width: 34%;
    max-width: 236px;
}
.sw-call {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 14px 13px 12px;
    border-radius: 18px;
    background: rgba(9, 14, 10, .92);
    box-shadow: inset 0 0 0 1px var(--cl), 0 20px 40px -18px rgba(0, 0, 0, .9);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.scan-win.done .sw-call { opacity: 1; transform: none; }
.scan-win.done .sw-cust { transition-delay: .25s; }
.sw-own { --cl: rgba(198, 246, 137, .45); --cc: var(--lime); }
.sw-cust { --cl: rgba(255, 122, 107, .5); --cc: var(--t-coral); }
.swc-ic {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border-radius: 30%;
    background: var(--cc);
    color: var(--lime-ink);
    transform: rotate(-8deg);
}
.swc-ic .ic { width: 19px; height: 19px; transform: rotate(8deg); }
.sw-call small { display: block; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1.3; }
.sw-call b { display: block; margin-top: 3px; font-family: var(--f-display); font-stretch: 75%; font-weight: 900; font-size: 25px; line-height: 1; text-transform: uppercase; color: var(--cc); }
.sw-call em { display: block; margin-top: 4px; font-style: normal; font-size: 13.5px; color: #DCE4D8; }

.sw-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-top: 1px solid var(--line); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--muted); }
.legend li { display: inline-flex; align-items: center; gap: 7px; }
.legend li::before { content: ""; width: 11px; height: 11px; border-radius: 30%; background: var(--c); transform: rotate(-8deg); }
.lg-g { --c: var(--lime); } .lg-a { --c: var(--t-amber); } .lg-r { --c: var(--t-coral); } .lg-d { --c: #4A5A4D; }
.sw-stat { font-size: 14px; color: var(--muted); white-space: nowrap; }
.sw-stat b { color: var(--t-coral); font-weight: 700; }
.sw-note { margin-top: 18px; text-align: center; font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }

.hero-trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hero-trust li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .035);
    box-shadow: inset 0 0 0 1px var(--line);
    font-size: 14px;
    font-weight: 500;
    color: #DCE4D8;
}
.hero-trust .ic { width: 16px; height: 16px; color: var(--lime); }

/* --- the seat card (LME opt-in card: countdown on top, then the form) --- */
.seat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 28px;
    background: #fff;
    color: var(--t-body);
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(198, 246, 137, .4), 0 50px 90px -40px rgba(0, 0, 0, .95), 0 0 80px -30px rgba(198, 246, 137, .35);
}
.seat-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 5px; background: linear-gradient(90deg, var(--lime), #FFD95A 45%, #FF8A1F); }
.sc-body { flex: 1; display: flex; flex-direction: column; padding: 22px 24px 24px; }
.sc-title {
    margin: 0;
    font-family: var(--f-display);
    font-stretch: 72%;
    font-weight: 900;
    font-size: clamp(25px, 1.95vw, 28px);
    line-height: 1.04;
    text-transform: uppercase;
    text-align: center;
    text-wrap: balance;
    color: var(--t-ink);
}
.sc-brand { white-space: nowrap; background: linear-gradient(90deg, #2F6A0E, #58A11E); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sc-lim { display: block; margin-top: 5px; font-size: .78em; color: #D2470F; }
.sc-priv { margin-top: 12px; text-align: center; font-size: 13px; font-weight: 600; color: var(--t-muted); }
.sc-priv .ic { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; color: var(--t-green); }
.sc-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 14px; padding: 0; list-style: none; }
.sc-meta li { padding: 9px 6px 8px; border: 1.5px dashed #C3D2B2; border-radius: 13px; text-align: center; }
.sc-meta small { display: block; font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--t-green); }
.sc-meta b { display: block; margin-top: 3px; font-size: 14.5px; font-weight: 800; line-height: 1.2; color: var(--t-ink); text-wrap: balance; }
.sc-scarce { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 10px; border-radius: 13px; background: rgba(229, 50, 42, .07); box-shadow: inset 0 0 0 1px rgba(229, 50, 42, .26); font-size: 13.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #C42B22; }
.sc-scarce i { width: 8px; height: 8px; border-radius: 50%; background: #E5322A; animation: seatPulse 1.8s ease-out infinite; }
@keyframes seatPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(229, 50, 42, .18); } 50% { box-shadow: 0 0 0 7px rgba(229, 50, 42, .04); } }

/* countdown strip (dark) at the top of the card */
.sc-cd {
    padding: 17px 20px 15px;
    background: radial-gradient(90% 120% at 50% 0%, rgba(198, 246, 137, .16), transparent 60%), linear-gradient(170deg, #15261A, #0A120C);
    text-align: center;
}
.cd-lbl { display: inline-flex; align-items: center; gap: 9px; font-family: var(--f-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--lime); }
.cd { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin-top: 10px; }
.cd > i { font-style: normal; font-family: var(--f-display); font-weight: 900; font-size: 28px; line-height: 50px; color: rgba(198, 246, 137, .4); }
.cd-u { display: grid; justify-items: center; }
.cd-u b {
    display: grid;
    place-items: center;
    min-width: 62px;
    height: 54px;
    padding: 0 6px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
    box-shadow: inset 0 0 0 1px rgba(198, 246, 137, .2);
    font-family: var(--f-display);
    font-stretch: 72%;
    font-weight: 900;
    font-size: 36px;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.cd-u:first-child b { color: var(--lime); }
.cd-u small { margin-top: 6px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cd.is-live .cd-u, .cd.is-live > i { display: none; }
.sc-cd .cd { margin-top: 9px; }
.sc-cd .cd-u b { min-width: 56px; height: 46px; font-size: 30px; border-radius: 12px; }
.sc-cd .cd > i { font-size: 24px; line-height: 44px; }
.sc-cd .cd-u small { margin-top: 4px; font-size: 9.5px; }
.cd.is-live::before { content: attr(data-live); font-family: var(--f-display); font-stretch: 75%; font-weight: 900; font-size: 30px; text-transform: uppercase; color: var(--lime); }


/* ==========================================================
   LIGHT SHEETS (shared)
   ========================================================== */
.sheet {
    position: relative;
    z-index: 2;
    isolation: isolate;
    margin-top: -48px;
    padding: 108px 0 120px;
    border-radius: 48px;
    background: var(--paper);
    color: var(--t-body);
}
.sheet.mint { background: var(--mint); }
.sheet-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(40% 30% at 0% 0%, rgba(198, 246, 137, .5), transparent 70%),
        radial-gradient(36% 30% at 100% 100%, rgba(198, 246, 137, .42), transparent 70%),
        radial-gradient(rgba(14, 26, 16, .13) 1.1px, transparent 1.6px) 0 0 / 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(0, 0, 0, .35), #000 85%);
            mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(0, 0, 0, .35), #000 85%);
}
.mint .sheet-bg {
    background:
        radial-gradient(40% 30% at 100% 0%, rgba(255, 255, 255, .7), transparent 70%),
        linear-gradient(rgba(59, 122, 20, .07) 1px, transparent 1px) 0 0 / 46px 46px,
        linear-gradient(90deg, rgba(59, 122, 20, .07) 1px, transparent 1px) 0 0 / 46px 46px;
}

.sec-head { position: relative; max-width: 1040px; margin: 0 auto; text-align: center; }
.sec-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px 9px 12px;
    border-radius: 999px;
    border: 1px solid var(--t-line);
    background: #fff;
    box-shadow: 0 10px 30px -18px rgba(14, 26, 16, .35);
    font-family: var(--f-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--t-ink);
}
.sec-pill .mark-dot { width: 14px; height: 14px; background: radial-gradient(circle, #fff 0 2.8px, transparent 3.4px), var(--t-green); }
.sec-pill i { font-style: normal; color: #A3AE9F; }
.sec-h2 {
    margin-top: 22px;
    font-family: var(--f-display);
    font-stretch: 72%;
    font-weight: 900;
    text-transform: uppercase;
    line-height: .95;
    color: var(--t-ink);
}
.sec-h2 > span { display: block; }
.sec-h2 .l1 { font-size: clamp(30px, 4.1vw, 52px); }
.sec-h2 .l2 { margin-top: 14px; font-size: clamp(42px, 6.4vw, 80px); }
.sec-h2 .hl {
    display: inline-block;
    padding: .05em .14em .03em;
    border-radius: .11em;
    background: var(--lime);
    color: var(--t-ink);
    transform: rotate(-1.6deg);
    box-shadow: 0 0 0 3px var(--t-ink), 8px 10px 0 var(--t-ink);
}
.sec-sub { max-width: 680px; margin: 28px auto 0; font-size: 19px; line-height: 1.6; color: var(--t-muted); }

/* dark section heads */
.dk-head { position: relative; max-width: 1060px; margin: 0 auto; text-align: center; }
.dk-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px 9px 12px;
    border-radius: 999px;
    background: rgba(198, 246, 137, .08);
    box-shadow: inset 0 0 0 1px rgba(198, 246, 137, .28);
    font-family: var(--f-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lime);
}
.dk-pill .mark-dot { width: 14px; height: 14px; background: radial-gradient(circle, #0D150F 0 2.8px, transparent 3.4px), var(--lime); }
.dk-h2 {
    margin-top: 22px;
    font-family: var(--f-display);
    font-stretch: 72%;
    font-weight: 900;
    text-transform: uppercase;
    line-height: .95;
    color: #fff;
}
.dk-h2 > span { display: block; }
.dk-h2 .l1, .dk-h2 .l3 { font-size: clamp(30px, 4.1vw, 52px); }
.dk-h2 .l2 { margin-top: 14px; font-size: clamp(42px, 6.4vw, 80px); }
.dk-h2 .l3 { margin-top: 14px; color: #DCE4D8; }
.dk-h2 .hl {
    display: inline-block;
    padding: .05em .14em .03em;
    border-radius: .11em;
    background: var(--lime);
    color: var(--lime-ink);
    transform: rotate(-1.6deg);
    box-shadow: 0 24px 70px -18px rgba(198, 246, 137, .5), 0 0 0 6px rgba(198, 246, 137, .12);
}
.dk-sub { max-width: 720px; margin: 26px auto 0; font-size: 19px; line-height: 1.65; color: var(--body); }
.dk-sub + .dk-sub { margin-top: 14px; }
.dk-sub b { color: #fff; font-weight: 600; }


/* ==========================================================
   2. THE GAP (light)
   ========================================================== */
.gap-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
    align-items: center;
    gap: 70px;
    max-width: 1080px;
    margin: 64px auto 0;
}
.gap-copy p { font-size: 18.5px; line-height: 1.65; color: var(--t-body); }
.gap-copy p + p { margin-top: 16px; }
.gap-copy b { color: var(--t-ink); font-weight: 600; }
.gap-lead { font-size: 22px !important; line-height: 1.55 !important; color: var(--t-ink) !important; }
.mk { padding: 0 .18em; border-radius: .2em; background: linear-gradient(transparent 52%, rgba(198, 246, 137, .9) 52%); color: var(--t-ink); font-weight: 600; }

.ladder { margin-top: 30px; border-radius: 20px; background: #fff; box-shadow: 0 30px 60px -40px rgba(14, 26, 16, .5), inset 0 0 0 1px var(--t-line); overflow: hidden; }
.ladder li { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 14px; padding: 15px 20px; }
.ladder li + li { border-top: 1px solid var(--t-line); }
.ladder i { width: 16px; height: 16px; border-radius: 30%; background: var(--c); transform: rotate(-8deg); }
.ladder b { font-family: var(--f-display); font-stretch: 78%; font-weight: 900; font-size: 21px; text-transform: uppercase; color: var(--t-ink); white-space: nowrap; }
.ladder span { justify-self: end; font-size: 14px; color: var(--t-muted); text-align: right; }
.ld-g { --c: #8BCB4C; } .ld-a { --c: var(--t-amber); } .ld-d { --c: #A6B0A3; }
.ld-d b { color: #8E998A; text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(14, 26, 16, .35); }

/* phone */
.gap-art { position: relative; display: grid; justify-items: end; padding-right: 20px; }
.ga-note {
    position: absolute;
    left: -30px; top: 170px;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 2px;
    max-width: 200px;
    font-family: var(--f-hand);
    font-size: 28px;
    line-height: 1;
    color: var(--t-green);
    transform: rotate(-7deg);
}
.ga-note svg { flex: none; width: 56px; height: 42px; margin-top: 18px; }
.phone {
    position: relative;
    width: 340px;
    max-width: 100%;
    padding: 46px 14px 18px;
    border-radius: 46px;
    background: #0E1611;
    box-shadow: inset 0 0 0 2px #26302A, 0 0 0 9px #E2E8DB, 0 60px 90px -40px rgba(14, 26, 16, .65);
    transform: rotate(3deg);
}
.ph-notch { position: absolute; left: 50%; top: 14px; width: 92px; height: 22px; margin-left: -46px; border-radius: 12px; background: #000; }
.ph-search { display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 14px; border-radius: 999px; background: #fff; color: var(--t-ink); font-size: 14.5px; font-weight: 500; }
.ph-search .ic { width: 16px; height: 16px; color: #5B6957; }
.ph-map {
    position: relative;
    height: 150px;
    margin-top: 10px;
    border-radius: 18px;
    background: url(../images/map-city.svg) 30% 40% / 260% auto no-repeat, #0B110D;
    overflow: hidden;
}
.ph-pin {
    position: absolute;
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 30%;
    background: var(--lime);
    color: var(--lime-ink);
    font-family: var(--f-display);
    font-stretch: 80%;
    font-weight: 900;
    font-size: 15px;
    transform: translate(-50%, -50%) rotate(-8deg);
    box-shadow: 0 0 20px -4px rgba(198, 246, 137, .9);
}
.ph-pin-x { background: #2A332D; color: #7D8879; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .12); }
.ph-list { margin-top: 10px; }
.ph-list li { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 14px; background: #fff; }
.ph-list li + li { margin-top: 7px; }
.ph-list li > b {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 30%;
    background: var(--t-ink);
    color: var(--lime);
    font-family: var(--f-display);
    font-stretch: 80%;
    font-weight: 900;
    font-size: 16px;
    transform: rotate(-6deg);
}
.ph-list strong { display: block; font-size: 14px; color: var(--t-ink); line-height: 1.25; }
.ph-list small { display: block; font-size: 12px; color: var(--t-muted); }
.ph-list .ph-gap { justify-content: center; gap: 6px; padding: 4px; background: none; }
.ph-gap i { width: 5px; height: 5px; border-radius: 50%; background: #5B6957; }
.ph-list .ph-you { background: #FFF1EE; box-shadow: inset 0 0 0 1.5px rgba(255, 122, 107, .55); }
.ph-you > b { background: var(--t-coral) !important; color: #2A0C08 !important; }
.ph-you strong { color: #9A2E22; }

/* owner vs customers */
.vs {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    max-width: 1000px;
    margin: 80px auto 0;
}
.vs-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 30px 28px;
    border-radius: 30px;
    text-align: center;
}
.vs-own { background: #fff; box-shadow: 0 34px 64px -40px rgba(14, 26, 16, .45), inset 0 0 0 1px var(--t-line); }
.vs-cust { background: linear-gradient(170deg, #16241A, #0A110C); color: var(--body); box-shadow: 0 40px 70px -36px rgba(14, 26, 16, .7); }
.vs-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border-radius: 999px;
    font-family: var(--f-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.vs-tag .ic { width: 15px; height: 15px; }
.vs-own .vs-tag { background: rgba(59, 122, 20, .1); color: var(--t-green); }
.vs-cust .vs-tag { background: rgba(255, 122, 107, .14); color: #FF9A8E; }
.vs-card h3 { margin-top: 14px; font-family: var(--f-display); font-stretch: 75%; font-weight: 900; font-size: 32px; line-height: 1; text-transform: uppercase; color: var(--t-ink); }
.vs-cust h3 { color: #fff; }
.sgrid-mini { --t: 40px; --g: 9px; margin: 24px 0; padding: 16px; border-radius: 22px; }
.vs-own .sgrid-mini { background: #EEF2E8; box-shadow: inset 0 0 0 1px var(--t-line); }
.vs-own .sgrid-mini i.q { --c: rgba(14, 26, 16, .06); box-shadow: inset 0 0 0 1.5px rgba(14, 26, 16, .08); color: rgba(14, 26, 16, .25); }
.vs-cust .sgrid-mini { background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--line); }
.vs-card p { font-size: 16px; line-height: 1.6; color: var(--t-body); }
.vs-card p b { color: var(--t-ink); }
.vs-cust p { color: var(--body); }
.vs-cust p b { color: #fff; }
.vs-verdict {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 10px 16px;
    border-radius: 14px;
    font-family: var(--f-display);
    font-stretch: 80%;
    font-weight: 800;
    font-size: 19px;
    text-transform: uppercase;
}
.vs-verdict .ic { width: 18px; height: 18px; }
.vs-verdict.ok { background: rgba(198, 246, 137, .45); color: var(--t-ink); }
.vs-verdict.bad { background: rgba(255, 122, 107, .16); color: #FF9A8E; }
.vs-badge {
    position: absolute;
    left: 50%; top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 66px; height: 66px;
    margin: -33px 0 0 -33px;
    border-radius: 30%;
    background: var(--lime);
    color: var(--t-ink);
    font-family: var(--f-display);
    font-stretch: 75%;
    font-weight: 900;
    font-size: 26px;
    transform: rotate(-8deg);
    box-shadow: 0 0 0 6px var(--paper), 0 20px 40px -16px rgba(14, 26, 16, .6);
}

.gap-close { max-width: 900px; margin: 80px auto 0; text-align: center; }
.gc-q { font-family: var(--f-display); font-stretch: 75%; font-weight: 900; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; text-transform: uppercase; color: var(--t-ink); text-wrap: balance; }
.gc-q .u { text-decoration: underline; text-decoration-color: var(--t-green); text-decoration-thickness: .08em; text-underline-offset: .12em; }
.gc-q .hl-s { padding: 0 .12em; border-radius: .1em; background: var(--lime); box-shadow: 0 0 0 2px var(--t-ink); }
.gc-q s { color: #8E998A; text-decoration-thickness: .08em; text-decoration-color: var(--t-coral); }
.gc-a { margin-top: 22px; font-size: 20px; color: var(--t-body); }
.gc-a b { color: var(--t-ink); }
.gc-arrow { display: block; width: 34px; height: 34px; margin: 22px auto 0; color: var(--t-green); animation: nudgeDown 1.8s ease-in-out infinite; }
@keyframes nudgeDown { 50% { transform: translateY(7px); } }


/* ==========================================================
   3. INTRODUCING PROFITMAPS AI (dark)
   ========================================================== */
.intro {
    position: relative;
    z-index: 1;
    isolation: isolate;
    margin-top: -48px;
    padding: 160px 0 150px;
    overflow: hidden;
}
.intro-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(40% 30% at 50% 46%, rgba(198, 246, 137, .1), transparent 70%),
        url(../images/map-hero.svg) center 30% / 1900px auto no-repeat;
}
.intro-bg::before { content: ""; position: absolute; inset: 0; background: rgba(7, 11, 8, .72); }
.ghost-mark.im1 { --w: 600px; --r: -14deg; --a: .06; left: -330px; top: 520px; }
.ghost-mark.im2 { --w: 520px; --r: 12deg; --a: .06; right: -280px; top: 1000px; }

.app-frame {
    position: relative;
    border-radius: 22px;
    background: #121B15;
    box-shadow: inset 0 0 0 1px rgba(198, 246, 137, .2), 0 50px 90px -40px rgba(0, 0, 0, .95);
}
.app-frame::before {
    content: "";
    position: absolute;
    inset: -11px;
    z-index: -1;
    border-radius: 30px;
    background: linear-gradient(140deg, #D9FBA8, var(--lime) 45%, var(--lime-2));
    transform: rotate(-1.8deg);
    opacity: .9;
}
.af-bar { display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.af-bar > i { width: 10px; height: 10px; border-radius: 50%; background: #2C3830; }
.af-bar > i:first-child { background: #FF7A6B; } .af-bar > i:nth-child(2) { background: #F6C945; } .af-bar > i:nth-child(3) { background: var(--lime); }
.af-bar > span { margin-left: 10px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-bar > span em { font-style: normal; color: var(--dim); margin: 0 4px; }
.af-bar > b { margin-left: auto; padding: 4px 10px; border-radius: 8px; background: rgba(198, 246, 137, .12); color: var(--lime); font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.app-frame > img { display: block; width: 100%; border-radius: 0 0 22px 22px; }

/* --- product stack: box + laptop + report + phone ---
   One picture: the stage is a size container and every part is
   sized in cqw, so the composition scales as a whole. It is wider
   than the text column (up to 1320px). */
.stack {
    position: relative;
    width: min(1320px, calc(100vw - 32px));
    margin: 76px 0 0 50%;
    translate: -50% 0;
    aspect-ratio: 1320 / 700;
    container-type: inline-size;
}
.stk-bg { position: absolute; inset: 0; pointer-events: none; }
.stk-glow { position: absolute; left: 12%; right: 12%; top: -6cqw; height: 52cqw; border-radius: 50%; background: radial-gradient(closest-side, rgba(198, 246, 137, .2), rgba(198, 246, 137, .05) 55%, transparent); }
.stk-floor {
    position: absolute;
    left: -6%; right: -6%;
    top: 33cqw; height: 26cqw;
    overflow: hidden;
    perspective: 50cqw;
    perspective-origin: 50% 0;
    -webkit-mask-image: radial-gradient(ellipse 50% 85% at 50% 0%, #000 35%, transparent 100%);
            mask-image: radial-gradient(ellipse 50% 85% at 50% 0%, #000 35%, transparent 100%);
}
.stk-map {
    position: absolute;
    left: 50%; top: 0;
    width: 170cqw; height: 110cqw;
    margin-left: -85cqw;
    background: url(../images/map-floor.svg) 30% 18% / 140% 140% no-repeat;
    opacity: .4;
    transform-origin: 50% 0;
    transform: rotateX(66deg);
}
.stk-ring { position: absolute; left: 50%; border-radius: 50%; transform: translateX(-50%); }
.stk-ring.r1 { top: 37.5cqw; width: 78cqw; height: 9cqw; border: 1.5px solid rgba(198, 246, 137, .32); box-shadow: 0 0 3cqw -1cqw rgba(198, 246, 137, .5), inset 0 0 3cqw -1cqw rgba(198, 246, 137, .4); }
.stk-ring.r2 { top: 34.5cqw; width: 104cqw; height: 15cqw; border: 1px solid rgba(198, 246, 137, .13); }

/* laptop */
.laptop { position: absolute; left: 50%; top: 2.5cqw; z-index: 2; width: 60cqw; margin-left: -30cqw; }
.lp-lid {
    position: relative;
    padding: .5cqw .5cqw .3cqw;
    border-radius: 1.7cqw 1.7cqw .5cqw .5cqw;
    background: linear-gradient(180deg, #3A4840 0%, #1A221C 40%, #111712 100%);
    box-shadow: inset 0 0 0 .1cqw rgba(198, 246, 137, .4), inset 0 .14cqw 0 rgba(255, 255, 255, .18), 0 3cqw 6cqw -2cqw rgba(0, 0, 0, .95), 0 0 7cqw -3cqw rgba(198, 246, 137, .35);
}
.lp-bezel { position: relative; padding: 1.25cqw 1.05cqw 1.15cqw; border-radius: 1.25cqw 1.25cqw .3cqw .3cqw; background: #040605; }
.lp-cam { position: absolute; left: 50%; top: .45cqw; width: .42cqw; height: .42cqw; margin-left: -.21cqw; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #4B5A50, #111712); }
.lp-display { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: .3cqw; background: #F4F6F2; }
.lp-display img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* glass glare */
.lp-display::after { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .04) 32%, transparent 46%); pointer-events: none; }
.lp-hinge { width: 57cqw; height: .55cqw; margin: 0 auto; border-radius: 0 0 .3cqw .3cqw; background: linear-gradient(180deg, #050806, #1A221C); }
.lp-base {
    position: relative;
    width: 72cqw;
    height: 2.1cqw;
    margin-left: -6cqw;
    border-radius: .25cqw .25cqw 1.6cqw 1.6cqw / .25cqw .25cqw 1.1cqw 1.1cqw;
    background: linear-gradient(180deg, #6C7E70 0%, #3A473D 16%, #1E2720 58%, #0C110D 100%);
    box-shadow: inset 0 .12cqw 0 rgba(255, 255, 255, .28), inset 0 -.15cqw 0 rgba(0, 0, 0, .6);
}
.lp-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 11cqw; height: .7cqw; margin-left: -5.5cqw; border-radius: 0 0 1cqw 1cqw; background: linear-gradient(180deg, #111712, #2A352D); }
.lp-base::after { content: ""; position: absolute; left: 3%; right: 3%; bottom: 0; height: .14cqw; border-radius: 50%; background: rgba(198, 246, 137, .35); }
.lp-shadow { width: 80cqw; height: 4cqw; margin: -1.6cqw 0 0 -10cqw; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .85), transparent); }

/* the branded report: front page + two pages fanned behind it */
.rep { position: absolute; right: 1cqw; top: 2.2cqw; z-index: 1; width: 17cqw; transform: rotate(6deg); }
.rep::before, .rep::after { content: ""; position: absolute; inset: 0; border-radius: 1cqw; background: #E9EEE4; box-shadow: 0 2cqw 3cqw -1.5cqw rgba(0, 0, 0, .8); }
.rep::before { transform: rotate(-5deg) translate(-.6cqw, .4cqw); }
.rep::after { transform: rotate(-2.5deg) translate(-.3cqw, .2cqw); background: #F3F6EF; }
.rep-page { position: relative; z-index: 1; overflow: hidden; border-radius: 1cqw; background: #fff; color: var(--t-ink); box-shadow: 0 3cqw 5cqw -1.5cqw rgba(0, 0, 0, .9); }
.rep-band { display: flex; align-items: center; gap: .8cqw; padding: 1.1cqw 1.3cqw; background: linear-gradient(120deg, #D9FBA8, var(--lime) 60%, var(--lime-2)); }
.rep-logo { flex: none; display: grid; place-items: center; width: 2.5cqw; height: 2.5cqw; border-radius: 30%; background: var(--t-ink); color: var(--lime); font-family: var(--f-display); font-stretch: 78%; font-weight: 900; font-size: 1.05cqw; transform: rotate(-8deg); }
.rep-band b { display: block; font-size: 1.15cqw; line-height: 1.2; }
.rep-band small { display: block; font-family: var(--f-mono); font-size: .68cqw; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #2F5A12; }
.rep-in { padding: 1.1cqw 1.3cqw 1.5cqw; }
.rep-for { display: block; font-family: var(--f-mono); font-size: .66cqw; letter-spacing: .1em; text-transform: uppercase; color: var(--t-muted); }
.rep-biz { display: block; margin-top: .2cqw; font-size: 1.32cqw; line-height: 1.2; }
.rep-kw { display: block; margin-top: .2cqw; font-size: .82cqw; color: var(--t-muted); }
.rep-row { display: flex; align-items: center; gap: 1cqw; margin-top: 1cqw; }
.sgrid-rep { --t: 1.45cqw; --g: .28cqw; flex: none; }
.sgrid-rep i { font-size: 0 !important; box-shadow: none !important; border-radius: 28%; }
.sgrid-rep i::after { display: none; }
.rep-score { font-size: .8cqw; line-height: 1.3; color: var(--t-muted); }
.rep-score b { display: block; font-family: var(--f-display); font-stretch: 78%; font-weight: 900; font-size: 2.9cqw; line-height: 1; color: #D2493B; }
.rep-h { display: flex; align-items: center; gap: .5cqw; margin-top: 1.1cqw; font-family: var(--f-mono); font-size: .74cqw; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #7B5CE0; }
.rep-h .ic { width: 1.05cqw; height: 1.05cqw; }
.rep-line { display: block; width: 100%; height: .5cqw; margin-top: .55cqw; border-radius: .3cqw; background: #E6EBE1; }

/* the product box, in front on the left */
.stk-boxwrap { position: absolute; left: .5cqw; bottom: 4cqw; z-index: 3; height: 37cqw; }
.stk-box { position: relative; z-index: 1; display: block; width: auto; height: 100%; filter: drop-shadow(0 2.2cqw 1.8cqw rgba(0, 0, 0, .85)) drop-shadow(0 0 3cqw rgba(198, 246, 137, .22)); }
.bx-pool { position: absolute; left: -10%; right: -14%; bottom: -3.4cqw; height: 7cqw; border-radius: 50%; background: radial-gradient(closest-side, rgba(198, 246, 137, .42), rgba(198, 246, 137, .1) 55%, transparent); }

/* phone, in front on the right */
.phone-m { position: absolute; right: 8.5cqw; bottom: 2.5cqw; z-index: 3; width: 15.5cqw; transform: rotate(5deg); }
.pm-body {
    position: relative;
    z-index: 1;
    padding: .75cqw;
    border-radius: 2.9cqw;
    background: linear-gradient(150deg, #56685B 0%, #222B24 18%, #0C110D 60%, #2A352D 100%);
    box-shadow: inset 0 0 0 .1cqw rgba(198, 246, 137, .45), inset 0 0 0 .3cqw #070A08, 0 3cqw 5cqw -1.5cqw rgba(0, 0, 0, .95), 0 0 5cqw -2cqw rgba(198, 246, 137, .35);
}
.pm-island { position: absolute; left: 50%; top: 1.4cqw; z-index: 2; width: 4.4cqw; height: 1.2cqw; margin-left: -2.2cqw; border-radius: .7cqw; background: #000; }
.pm-screen { position: relative; overflow: hidden; padding-top: 2.7cqw; border-radius: 2.2cqw; background: #F7F8F4; }
.pm-screen img { display: block; width: 100%; height: auto; }
.pm-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(125deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .05) 30%, transparent 45%); pointer-events: none; }
.pm-btn { position: absolute; z-index: 0; width: .45cqw; border-radius: .3cqw; background: linear-gradient(90deg, #3A473D, #1A221C); }
.pb1 { left: -.3cqw; top: 6cqw; height: 2.2cqw; }
.pb2 { left: -.3cqw; top: 9cqw; height: 3.6cqw; }
.pb3 { right: -.3cqw; top: 8cqw; height: 5cqw; }
.pm-pool { position: absolute; left: -30%; right: -30%; bottom: -3cqw; height: 6cqw; border-radius: 50%; background: radial-gradient(closest-side, rgba(198, 246, 137, .36), rgba(198, 246, 137, .08) 55%, transparent); }

.stk-toast {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: .9cqw;
    padding: .75cqw 1.5cqw .75cqw .75cqw;
    border-radius: 1.3cqw;
    background: rgba(12, 18, 14, .97);
    box-shadow: inset 0 0 0 .1cqw rgba(198, 246, 137, .35), 0 2cqw 3cqw -1cqw rgba(0, 0, 0, .9);
    font-size: max(12px, 1.15cqw);
    font-weight: 600;
    line-height: 1.25;
    color: #fff;
    white-space: nowrap;
    animation: bob 6s ease-in-out infinite;
}
.stk-toast i { flex: none; display: grid; place-items: center; width: 2.6cqw; height: 2.6cqw; border-radius: 30%; background: var(--lime); color: var(--lime-ink); transform: rotate(-8deg); }
.stk-toast i .ic { width: 1.3cqw; height: 1.3cqw; transform: rotate(8deg); }
.stk-toast small { display: block; font-family: var(--f-mono); font-size: max(9px, .76cqw); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.st-scan { left: 3cqw; top: 3.5cqw; }
.st-rep { right: 21cqw; top: .2cqw; animation-delay: -3s; }
.st-rep i { background: var(--t-amber); }
.stk-note { margin-top: 26px; text-align: center; font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }

/* the six parts, as cards */
.feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1100px; margin: 26px auto 0; }
.feat-grid li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 22px 20px 18px;
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
    transition: box-shadow .25s, transform .25s var(--ease);
}
.feat-grid li:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a) 55%, transparent); }
.fg-ic { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 30%; background: var(--a); color: var(--lime-ink); transform: rotate(-8deg); box-shadow: 0 12px 24px -12px var(--a); }
.fg-ic .ic { width: 22px; height: 22px; transform: rotate(8deg); }
.feat-grid li > span:last-child { font-size: 15px; line-height: 1.5; color: var(--muted); }
.feat-grid b { display: block; margin: 2px 0 5px; font-family: var(--f-display); font-stretch: 78%; font-weight: 900; font-size: 22px; line-height: 1.05; text-transform: uppercase; color: #fff; }

.intro-cap { max-width: 640px; margin: 58px auto 0; text-align: center; font-size: 18px; color: var(--body); }
.intro-cap b { color: #fff; }

.pitch {
    display: grid;
    grid-template-columns: minmax(0, .8fr) auto minmax(0, 1.2fr);
    align-items: stretch;
    gap: 18px;
    max-width: 920px;
    margin: 70px auto 0;
}
.pt-card { display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px; border-radius: 22px; }
.pt-card small { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.pt-card b { display: block; margin-top: 6px; font-family: var(--f-display); font-stretch: 78%; font-weight: 900; font-size: 24px; line-height: 1.05; text-transform: uppercase; }
.pt-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 30%; transform: rotate(-8deg); }
.pt-ic .ic { width: 18px; height: 18px; transform: rotate(8deg); }
.pt-no { background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--line); }
.pt-no small { color: var(--dim); }
.pt-no b { color: #8E998A; text-decoration: line-through; text-decoration-color: rgba(255, 122, 107, .7); text-decoration-thickness: 2px; }
.pt-no .pt-ic { background: rgba(255, 122, 107, .14); color: var(--t-coral); }
.pt-mail { display: grid; gap: 6px; margin-top: 14px; }
.pt-mail i { display: block; width: 100%; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .07); }
.pt-yes { background: linear-gradient(140deg, rgba(198, 246, 137, .16), rgba(198, 246, 137, .04)); box-shadow: inset 0 0 0 1.5px rgba(198, 246, 137, .45); }
.pt-yes small { color: var(--lime); }
.pt-yes b { color: #fff; }
.pt-yes .pt-ic { background: var(--lime); color: var(--lime-ink); }
.pt-arrow { align-self: center; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(198, 246, 137, .1); color: var(--lime); }
.pt-arrow .ic { width: 20px; height: 20px; }

.mantra { margin-top: 90px; text-align: center; font-family: var(--f-display); font-stretch: 70%; font-weight: 900; font-size: clamp(56px, 10vw, 150px); line-height: .88; text-transform: uppercase; }
.mantra span { display: block; }
.mn-a { color: #fff; }
.mn-b { color: transparent; -webkit-text-stroke: 2px var(--lime); }


/* ==========================================================
   4. WHAT YOU'LL DISCOVER (light)
   ========================================================== */
.dc-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 24px;
    margin-top: 62px;
}
.dc {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 2px 0 rgba(14, 26, 16, .03), 0 34px 64px -40px rgba(14, 26, 16, .45), inset 0 0 0 1px rgba(14, 26, 16, .08);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.dc-wide { grid-column: span 3; }
.dc:hover { transform: translateY(-5px); box-shadow: 0 2px 0 rgba(14, 26, 16, .03), 0 46px 78px -40px rgba(14, 26, 16, .55), inset 0 0 0 1px rgba(14, 26, 16, .12); }
.dc-art {
    position: relative;
    height: 236px;
    border-radius: 22px;
    overflow: hidden;
    background:
        radial-gradient(70% 80% at 50% 110%, color-mix(in srgb, var(--a) 26%, transparent), transparent 70%),
        url(../images/map-city.svg) center / cover no-repeat,
        #0C130E;
}
.dc-art::after { content: ""; position: absolute; inset: 0; background: rgba(8, 13, 9, .5); z-index: 0; }
.dc-art > * { position: relative; z-index: 1; }
.dc-body { display: flex; flex-direction: column; flex: 1; padding: 22px 18px 16px; }
.dc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dc-no {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 30%;
    background: linear-gradient(140deg, var(--a), var(--a2));
    color: var(--t-ink);
    font-family: var(--f-display);
    font-stretch: 78%;
    font-weight: 900;
    font-size: 20px;
    transform: rotate(-8deg);
}
.dc-live, .dc-tier {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border-radius: 999px;
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.dc-live { background: rgba(59, 122, 20, .09); color: var(--t-green); }
.dc-live .ic { width: 14px; height: 14px; }
.dc-tier { background: linear-gradient(135deg, #F8DC7A, #E9B23A); color: #2B1C00; }
.dc h3 { margin-top: 16px; font-family: var(--f-display); font-stretch: 75%; font-weight: 900; font-size: 30px; line-height: 1; text-transform: uppercase; color: var(--t-ink); }
.dc p { margin-top: 12px; font-size: 15.5px; line-height: 1.6; color: var(--t-body); }
.dc p b { color: var(--t-ink); font-weight: 600; }

/* art 01 — scan: chips + stat on the left, the grid on the right */
.art-scan { display: flex; align-items: center; justify-content: center; gap: 30px; padding: 0 22px; }
.sgrid-art { --t: 32px; --g: 8px; flex: none; }
.ac-stack { display: grid; justify-items: start; gap: 9px; }
.ac-stat { margin-top: 6px; font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.ac-stat b { display: block; font-family: var(--f-display); font-stretch: 78%; font-weight: 900; font-size: 38px; line-height: 1; color: var(--t-coral); }
.art-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border-radius: 10px;
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.art-chip .ic { width: 14px; height: 14px; }
.ac-tl { background: rgba(198, 246, 137, .14); color: var(--lime); box-shadow: inset 0 0 0 1px rgba(198, 246, 137, .32); }
.ac-gap { background: rgba(255, 122, 107, .16); color: #FF9A8E; box-shadow: inset 0 0 0 1px rgba(255, 122, 107, .4); }
.ac-gap i { width: 8px; height: 8px; border-radius: 50%; background: var(--t-coral); }

/* art 02 — report + reply */
.art-talk { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 0 20px; }
.at-report {
    width: 196px;
    padding: 14px 14px 12px;
    border-radius: 16px;
    background: #fff;
    color: var(--t-ink);
    transform: rotate(-4deg);
    box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .8);
}
.atr-k { display: block; font-family: var(--f-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--t-green); }
.at-report > b { display: block; margin-top: 4px; font-size: 14px; }
.atr-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.sgrid-tiny { --t: 15px; --g: 3px; }
.sgrid-tiny i { font-size: 0 !important; box-shadow: none !important; border-radius: 28%; }
.atr-stat { font-size: 10.5px; line-height: 1.3; color: var(--t-muted); }
.atr-stat b { display: block; font-family: var(--f-display); font-stretch: 78%; font-weight: 900; font-size: 30px; line-height: 1; color: #D2493B; }
.atr-brand { display: block; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--t-line); font-size: 10px; color: var(--t-muted); }
.atr-brand i { font-style: normal; font-weight: 700; color: var(--t-ink); }
.at-thread { display: grid; gap: 10px; max-width: 200px; }
.att-sent { display: inline-flex; align-items: center; gap: 7px; justify-self: start; padding: 6px 10px; border-radius: 9px; background: rgba(95, 212, 196, .15); color: #8EE6DA; font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.att-sent .ic { width: 13px; height: 13px; }
.att-bubble { position: relative; padding: 12px 14px; border-radius: 16px 16px 16px 4px; background: #E9F6F3; color: var(--t-ink); font-size: 14px; font-weight: 500; line-height: 1.4; box-shadow: 0 20px 30px -16px rgba(0, 0, 0, .7); }

/* art 03 — AI plan */
.art-ai { display: grid; align-content: center; justify-items: center; gap: 12px; padding: 0 18px; }
.ai-panel { width: 100%; max-width: 270px; padding: 14px 16px; border-radius: 16px; background: rgba(13, 20, 15, .95); box-shadow: inset 0 0 0 1px rgba(181, 156, 255, .35); }
.ai-h { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #C9B8FF; }
.ai-h .ic { width: 16px; height: 16px; }
.ai-panel ul { margin-top: 8px; }
.ai-panel li { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 13.5px; color: #DCE4D8; }
.ai-panel li + li { border-top: 1px solid var(--line); }
.ai-panel li i { width: 15px; height: 15px; border-radius: 30%; background: radial-gradient(circle, #0D150F 0 2.5px, transparent 3px), #B59CFF; transform: rotate(-8deg); }
.ai-outs { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.ai-outs span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: #fff; color: var(--t-ink); font-size: 12px; font-weight: 600; }
.ai-outs .ic { width: 14px; height: 14px; color: #7B5CE0; }

/* art 04 — business finder */
.art-find { display: grid; align-content: center; gap: 10px; padding: 0 18px; }
.af-search { display: flex; gap: 7px; }
.af-search span { display: inline-flex; align-items: center; gap: 7px; flex: 1; min-width: 0; padding: 9px 11px; border-radius: 11px; background: #fff; color: var(--t-ink); font-size: 13px; font-weight: 600; white-space: nowrap; }
.af-search .ic { width: 14px; height: 14px; color: #B88600; }
.af-rows { display: grid; gap: 6px; }
.af-rows li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(13, 20, 15, .94); box-shadow: inset 0 0 0 1px var(--line); }
.af-rows i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 30%; font-family: var(--f-display); font-stretch: 78%; font-style: normal; font-weight: 900; font-size: 14px; color: var(--lime-ink); }
.af-rows i.r { background: var(--t-coral); color: #2A0C08; } .af-rows i.a { background: var(--t-amber); } .af-rows i.d { background: var(--t-grey); color: #9AA596; font-size: 11px; }
.af-rows span { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-rows em { font-style: normal; padding: 3px 8px; border-radius: 7px; background: rgba(246, 201, 69, .16); color: #F6C945; font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* art 05 — service models */
.art-svc { display: grid; align-content: center; gap: 8px; padding: 0 18px; }
.sv { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(13, 20, 15, .94); box-shadow: inset 0 0 0 1px var(--line); }
.sv-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 30%; background: linear-gradient(140deg, #FFC37A, #FFA94D); color: #2A1300; transform: rotate(-8deg); }
.sv-ic .ic { width: 17px; height: 17px; transform: rotate(8deg); }
.sv span { font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.sv b { display: block; font-size: 14px; color: #fff; }

.disc-cta { display: grid; justify-items: center; gap: 22px; margin-top: 64px; text-align: center; }
.disc-cta p { font-size: 19px; color: var(--t-body); }
.disc-cta p b { color: var(--t-ink); }


/* ==========================================================
   5. HOW IT WORKS (dark tour)
   ========================================================== */
.flow {
    position: relative;
    z-index: 1;
    isolation: isolate;
    margin-top: -48px;
    padding: 160px 0 150px;
    overflow: hidden;
}
.flow-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(42% 34% at 70% 52%, rgba(198, 246, 137, .1), transparent 70%),
        radial-gradient(rgba(198, 246, 137, .07) 1.1px, transparent 1.6px) 0 0 / 28px 28px;
    -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}
.tour {
    display: grid;
    grid-template-columns: minmax(0, 390px) minmax(0, 1fr);
    gap: 52px;
    align-items: center;
    margin-top: 66px;
}
.tour-steps { position: relative; display: grid; gap: 6px; }
.tour-steps::before { content: ""; position: absolute; left: 30px; top: 24px; bottom: 24px; border-left: 2px dashed rgba(198, 246, 137, .2); }
.ts {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 12px 16px 12px 10px;
    border: 0;
    border-radius: 18px;
    background: none;
    text-align: left;
    color: var(--muted);
    transition: background .25s, color .25s;
}
.ts:hover { color: #fff; }
.ts-n {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border-radius: 30%;
    background: #18231B;
    box-shadow: inset 0 0 0 1.5px rgba(198, 246, 137, .25);
    color: var(--lime);
    font-family: var(--f-display);
    font-stretch: 78%;
    font-weight: 900;
    font-size: 19px;
    transform: rotate(-8deg);
    transition: background .25s, color .25s;
}
.ts-t { font-size: 16px; font-weight: 500; line-height: 1.4; }
.ts-bar { position: absolute; left: 68px; right: 16px; bottom: 6px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .06); overflow: hidden; opacity: 0; }
.ts-bar i { display: block; width: 100%; height: 100%; background: var(--lime); transform-origin: 0 50%; transform: scaleX(0); }
.ts.is-on { background: rgba(198, 246, 137, .07); box-shadow: inset 0 0 0 1px rgba(198, 246, 137, .22); color: #fff; }
.ts.is-on .ts-n { background: var(--lime); color: var(--lime-ink); box-shadow: 0 0 22px -4px rgba(198, 246, 137, .8); }
.ts.is-on .ts-t { font-weight: 600; }
.tour.auto .ts.is-on .ts-bar { opacity: 1; }
.tour.auto .ts.is-on .ts-bar i { animation: tsFill var(--tour-ms, 6000ms) linear forwards; }
.tour.paused .ts.is-on .ts-bar i { animation-play-state: paused; }
@keyframes tsFill { to { transform: scaleX(1); } }

.tour-stage { min-width: 0; }
.tf-screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 0 0 22px 22px; background: #F4F6F2; }
.tf-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0; transform: scale(1.02); transition: opacity .55s var(--ease), transform .8s var(--ease); }
.tf-screen img.on { opacity: 1; transform: none; }
.tour-cap { display: flex; align-items: baseline; gap: 14px; margin-top: 26px; font-size: 15.5px; color: var(--body); min-height: 3.2em; }
.tc-n { flex: none; font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--lime); }

.calm {
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 860px;
    margin: 70px auto 0;
    padding: 22px 26px;
    border-radius: 22px;
    background: linear-gradient(140deg, rgba(198, 246, 137, .12), rgba(255, 255, 255, .02));
    box-shadow: inset 0 0 0 1px rgba(198, 246, 137, .3);
}
.calm-ic { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 30%; background: var(--lime); color: var(--lime-ink); transform: rotate(-8deg); }
.calm-ic .ic { width: 24px; height: 24px; transform: rotate(8deg); }
.calm p { font-size: 17px; line-height: 1.6; color: var(--body); }
.calm b { color: #fff; }


/* ==========================================================
   6. WHO SHOULD ATTEND (mint)
   ========================================================== */
.attend { padding-bottom: 130px; }
.who { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin-top: 54px; }
.who li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 10px 24px;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 30px 60px -40px rgba(14, 26, 16, .5), inset 0 0 0 1px rgba(14, 26, 16, .07);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.who li:hover { transform: translateY(-5px); box-shadow: 0 40px 70px -40px rgba(14, 26, 16, .6), inset 0 0 0 1px rgba(14, 26, 16, .1); }
/* persona image across the top; the icon tile overlaps its corner */
.who-img { display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 19px; background: #0B110D; }
.who-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.who li:hover .who-img img { transform: scale(1.05); }
.who-ic { position: relative; z-index: 1; display: grid; place-items: center; width: 54px; height: 54px; margin: -27px 0 0 12px; border-radius: 30%; background: var(--a); color: #fff; transform: rotate(-8deg); box-shadow: 0 0 0 4px #fff, 0 14px 24px -12px var(--a); }
.who-ic .ic { width: 26px; height: 26px; transform: rotate(8deg); }
.who b { margin-top: 16px; padding: 0 10px; font-family: var(--f-display); font-stretch: 75%; font-weight: 900; font-size: 27px; line-height: 1; text-transform: uppercase; color: var(--t-ink); }
.who li > span:last-child { margin-top: 9px; padding: 0 10px; font-size: 15px; line-height: 1.5; color: var(--t-body); }

.honest {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    margin-top: 34px;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(170deg, #16241A, #0A110C);
    box-shadow: 0 40px 70px -40px rgba(14, 26, 16, .75);
}
.hn-a { display: flex; align-items: center; gap: 16px; padding: 28px 30px; background: rgba(198, 246, 137, .08); }
.hn-ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 30%; background: var(--lime); color: var(--lime-ink); transform: rotate(-8deg); }
.hn-ic .ic { width: 22px; height: 22px; transform: rotate(8deg); }
.hn-a p { font-size: 17.5px; line-height: 1.55; color: var(--body); }
.hn-a b { color: #fff; }
.hn-b { padding: 26px 30px; }
.hn-b p { font-size: 16px; color: var(--muted); }
.hn-b ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hn-b li { padding: 8px 13px; border-radius: 11px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line); font-size: 14.5px; font-weight: 600; color: #fff; }


/* ==========================================================
   6b. BONUSES (dark) — two cards tinted to each box's colour
   ========================================================== */
.bonus { position: relative; z-index: 1; isolation: isolate; margin-top: -48px; padding: 164px 0 176px; overflow: hidden; }
.bonus-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(34% 26% at 16% 40%, rgba(255, 150, 40, .1), transparent 70%),
        radial-gradient(34% 26% at 84% 72%, rgba(60, 140, 255, .11), transparent 70%),
        radial-gradient(rgba(198, 246, 137, .06) 1.1px, transparent 1.6px) 0 0 / 28px 28px;
}
.ghost-mark.bm1 { --w: 560px; --r: -12deg; --a: .06; left: -300px; top: 300px; }
.ghost-mark.bm2 { --w: 520px; --r: 10deg; --a: .06; right: -270px; top: 1150px; }
.dk-pill .ic { width: 15px; height: 15px; }
.bn-total-pill { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; margin-top: 26px; padding: 11px 20px; border-radius: 999px; background: rgba(246, 201, 69, .07); box-shadow: inset 0 0 0 1px rgba(246, 201, 69, .4); font-size: 16px; font-weight: 600; color: #F6C945; }
.bn-total-pill s { color: var(--dim); text-decoration-thickness: 2px; }
.bn-total-pill b { color: var(--lime); }

.bn-list { display: grid; gap: 34px; max-width: 1140px; margin: 64px auto 0; }
.bn {
    --a-ink: #2A1300;
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    padding: 28px 46px 28px 28px;
    border-radius: 34px;
    background: linear-gradient(155deg, rgba(var(--a-rgb), .11), rgba(255, 255, 255, .02) 42%, rgba(255, 255, 255, .015));
    box-shadow: inset 0 0 0 1px rgba(var(--a-rgb), .3), 0 50px 90px -50px rgba(0, 0, 0, .95);
}
.bn-flip { --a-ink: #03122B; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); padding: 28px 28px 28px 46px; }
.bn-flip .bn-visual { order: 2; }
.bn-visual {
    position: relative;
    display: grid;
    place-items: center;
    align-self: stretch;
    min-height: 480px;
    border-radius: 26px;
    overflow: hidden;
    background: radial-gradient(ellipse 70% 58% at 50% 46%, rgba(var(--a-rgb), .3), rgba(var(--a-rgb), .06) 60%, transparent 82%), #0A100C;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.bn-glow { position: absolute; left: 14%; right: 14%; top: 12%; bottom: 20%; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--a-rgb), .45), transparent); }
.bn-floor { position: absolute; left: 18%; right: 18%; bottom: 7%; height: 30px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--a-rgb), .6), transparent); }
.bn-art { position: relative; z-index: 1; display: block; width: auto; max-width: 86%; max-height: 440px; height: auto; filter: drop-shadow(0 30px 28px rgba(0, 0, 0, .75)); animation: bob 7s ease-in-out infinite; }
.bn-flip .bn-art { animation-delay: -3.5s; }
.bn-free { position: absolute; left: 16px; top: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: var(--lime); color: var(--lime-ink); font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.bn-free .ic { width: 14px; height: 14px; }
.bn-value {
    position: absolute;
    right: 18px; bottom: 18px;
    z-index: 2;
    display: grid;
    justify-items: center;
    padding: 10px 16px 9px;
    border-radius: 16px;
    background: linear-gradient(140deg, var(--a), var(--a2));
    color: var(--a-ink);
    transform: rotate(-6deg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 16px 30px -12px rgba(var(--a-rgb), .9);
}
.bn-value b { font-family: var(--f-display); font-stretch: 78%; font-weight: 900; font-size: 36px; line-height: 1; }
.bn-value small { font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }

.bn-body { min-width: 0; padding: 10px 0; }
.bn-no { display: inline-flex; padding: 6px 13px; border-radius: 10px; background: rgba(var(--a-rgb), .14); box-shadow: inset 0 0 0 1px rgba(var(--a-rgb), .42); color: var(--a); font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.bn h3 { margin-top: 14px; font-family: var(--f-display); font-stretch: 72%; font-weight: 900; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.02; text-transform: uppercase; color: #fff; text-wrap: balance; }
.bn-lead { margin-top: 12px; font-size: 18.5px; line-height: 1.55; font-weight: 500; color: #E3EADF; }
.bn-lbl { display: block; margin-top: 22px; font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--a); }
.bn-desc { margin-top: 6px; font-size: 16px; line-height: 1.65; color: var(--body); }
.bn-inc { margin-top: 6px; }
.bn-inc li { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: 16px; font-weight: 600; color: #fff; }
.bn-inc li + li { border-top: 1px solid var(--line); }
.bn-inc i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 30%; background: linear-gradient(140deg, var(--a), var(--a2)); color: var(--a-ink); transform: rotate(-8deg); }
.bn-inc i .ic { width: 13px; height: 13px; transform: rotate(8deg); }
.bn-meta { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; margin-top: 20px; }
.bn-meta > div { padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--line); }
.bn-meta .bn-lbl { margin-top: 0; }
.bn-meta p { margin-top: 5px; font-size: 14.5px; line-height: 1.55; color: var(--body); }
.bn-deliv { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 12px 16px; border-radius: 14px; background: rgba(198, 246, 137, .08); box-shadow: inset 0 0 0 1px rgba(198, 246, 137, .28); font-size: 14.5px; line-height: 1.5; color: var(--body); }
.bn-deliv .ic { width: 18px; height: 18px; margin-top: 1px; color: var(--lime); }
.bn-deliv b { color: #fff; }

.bn-total {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 34px;
    max-width: 1140px;
    margin: 44px auto 0;
    padding: 24px 24px 24px 36px;
    border-radius: 28px;
    background: linear-gradient(120deg, #15241A, #0B130D);
    box-shadow: inset 0 0 0 1px rgba(246, 201, 69, .35), 0 40px 70px -40px rgba(0, 0, 0, .9);
}
.bt-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.bt-n { font-family: var(--f-display); font-stretch: 72%; font-weight: 900; font-size: 64px; line-height: 1; color: #F6C945; }
.bt-t { font-size: 19px; font-weight: 600; color: #fff; }
.bt-t em { font-style: normal; color: var(--lime); }
.bn-total .btn-mega { height: 72px; padding-left: 26px; font-size: 22px; }
.bn-total .btn-mega .ic { width: 52px; height: 52px; padding: 15px; }

/* bonus mentions elsewhere on the page (LME pattern) */
.hero-trust li.ht-gift { background: rgba(246, 201, 69, .07); box-shadow: inset 0 0 0 1px rgba(246, 201, 69, .35); color: #F6C945; }
.hero-trust li.ht-gift .ic { color: #F6C945; }


/* ==========================================================
   7. SESSIONS (light, October calendar)
   ========================================================== */
.sessions {
    position: relative;
    z-index: 2;
    isolation: isolate;
    margin-top: -48px;
    padding: 150px 0 130px;
    border-radius: 48px 48px 0 0;
    background: var(--paper);
    color: var(--t-ink);
    overflow: hidden;
    overflow: clip;
}
.ses-bg {
    position: absolute;
    left: 50%; top: 40px;
    z-index: -1;
    width: 1500px; height: 964px;
    margin-left: -750px;
    background: url(../images/calendar-oct-20.svg) center top / 100% 100% no-repeat;
    -webkit-mask-image: linear-gradient(transparent 0, rgba(0, 0, 0, .35) 9%, #000 24%, #000 42%, transparent 92%);
            mask-image: linear-gradient(transparent 0, rgba(0, 0, 0, .35) 9%, #000 24%, #000 42%, transparent 92%);
    pointer-events: none;
}
.cal-prop, .cal-note, .onair { display: none; }
@media (min-width: 1280px) {
    .cal-prop {
        display: block;
        position: absolute;
        left: max(24px, calc(50% - 660px)); top: 150px;
        z-index: 1;
        width: 158px;
        padding: 0 0 14px;
        border-radius: 22px;
        background: #fff;
        box-shadow: 0 30px 50px -24px rgba(14, 26, 16, .4), 0 0 0 1px var(--t-line);
        text-align: center;
        transform: rotate(-8deg);
        overflow: hidden;
    }
    .cp-mon { display: block; padding: 10px 0 8px; background: var(--t-ink); color: var(--lime); font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
    .cp-day { display: block; margin-top: 6px; font-family: var(--f-display); font-stretch: 72%; font-weight: 900; font-size: 64px; line-height: 1; color: var(--t-ink); }
    .cp-day small { margin: 0 4px; font-size: .45em; color: var(--t-green); vertical-align: .4em; }
    .cp-wd { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--t-muted); }
    .cal-note { display: block; position: absolute; left: max(24px, calc(50% - 650px)); top: 342px; z-index: 1; font-family: var(--f-hand); font-size: 30px; line-height: 1; color: var(--t-green); transform: rotate(-6deg); }
    .onair {
        display: flex;
        position: absolute;
        right: max(24px, calc(50% - 650px)); top: 170px;
        z-index: 1;
        align-items: center;
        gap: 10px;
        padding: 12px 20px;
        border-radius: 14px;
        background: #1A0F0E;
        border: 2px solid #3A1B18;
        color: #FF5A4E;
        font-family: var(--f-display);
        font-stretch: 75%;
        font-weight: 900;
        font-size: 30px;
        text-transform: uppercase;
        letter-spacing: .06em;
        text-shadow: 0 0 14px rgba(255, 90, 78, .8);
        box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .6), 0 0 30px -6px rgba(255, 90, 78, .4);
        transform: rotate(6deg);
    }
    .onair i { width: 12px; height: 12px; border-radius: 50%; background: #FF5A4E; box-shadow: 0 0 12px #FF5A4E; animation: blink 1.4s steps(2) infinite; }
}
@keyframes blink { 50% { opacity: .25; } }

.cdown {
    max-width: 720px;
    margin: 50px auto 0;
    padding: 22px 28px 26px;
    border-radius: 28px;
    background: radial-gradient(90% 90% at 50% 0%, rgba(198, 246, 137, .16), transparent 60%), linear-gradient(170deg, #15261A, #0A120C);
    box-shadow: 0 40px 80px -40px rgba(14, 26, 16, .7);
    text-align: center;
}
.cd-lg { gap: 12px; margin-top: 16px; }
.cd-lg > i { font-size: 46px; line-height: 92px; }
.cd-lg .cd-u b { min-width: 120px; height: 96px; border-radius: 22px; font-size: 72px; }
.cd-lg .cd-u small { font-size: 11px; }

.tk {
    position: relative;
    display: grid;
    grid-template-columns: 136px minmax(0, 1fr);
    border-radius: 28px;
    background: linear-gradient(170deg, #142019, #0A110C);
    box-shadow: 0 46px 80px -40px rgba(14, 26, 16, .75), inset 0 0 0 1px rgba(198, 246, 137, .14);
    color: var(--body);
}
.tk-stub {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    padding: 20px 10px;
    border-radius: 28px 0 0 28px;
    background: linear-gradient(160deg, #D9FBA8, var(--lime) 50%, var(--lime-2));
    color: var(--t-ink);
    text-align: center;
}
/* perforation + notches */
.tk-stub::after { content: ""; position: absolute; right: -1px; top: 18px; bottom: 18px; border-right: 3px dotted rgba(10, 17, 12, .55); }
.tk-main::before, .tk-main::after { content: ""; position: absolute; left: -14px; width: 28px; height: 28px; border-radius: 50%; background: var(--paper); }
.tk-main::before { top: -14px; }
.tk-main::after { bottom: -14px; }
.tk-mon { font-family: var(--f-mono); font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.tk-day { margin-top: 2px; font-family: var(--f-display); font-stretch: 72%; font-weight: 900; font-size: 96px; line-height: .9; }
.tk-wd { margin-top: 6px; font-family: var(--f-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.tk-main { position: relative; display: flex; flex-direction: column; padding: 26px 28px 28px; }
.tk-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tk-no { padding: 6px 11px; border-radius: 9px; background: rgba(198, 246, 137, .1); color: var(--lime); font-family: var(--f-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.tk-status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tk-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px rgba(198, 246, 137, .8); }
.tk-status.soon i, .tk-status.live i { background: #FF5A4E; animation: livePulse 1.6s infinite; }
.tk-status.live, .tk-status.soon { color: #FF9A8E; }
.tk-status.ended i { background: #4A5A4D; box-shadow: none; }
.tk h3 { margin-top: 16px; font-family: var(--f-display); font-stretch: 72%; font-weight: 900; font-size: 46px; line-height: .95; text-transform: uppercase; color: #fff; }
.tk-time { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 12px; font-size: 16.5px; color: var(--body); }
.tk-time .ic { width: 18px; height: 18px; color: var(--lime); }
.tk-time b { color: var(--lime); font-weight: 700; }
.tk-time .lt { color: var(--muted); font-size: 14px; }
.tk-copy { margin-top: 14px; margin-bottom: 24px; font-size: 16px; line-height: 1.6; color: var(--body); }
.btn-tk { width: 100%; justify-content: space-between; height: auto; min-height: 76px; padding: 10px 11px 10px 24px; font-size: clamp(19px, 1.7vw, 23px); border-radius: 18px; }
.btn-tk span { white-space: normal; line-height: 1.02; text-align: left; }
.btn-tk .ic { width: 48px; height: 48px; padding: 14px; }
.tk.is-ended { opacity: .55; }
.tk.is-ended .btn-mega { filter: grayscale(1); pointer-events: none; }
/* the one session: stub | details | action, perforated between */
.tk-one { max-width: 1060px; margin: 46px auto 0; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 320px); }
.tk-one .tk-copy { margin-bottom: 0; }
.tk-act { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 28px 28px 28px 30px; border-left: 3px dotted rgba(198, 246, 137, .22); }
.tk-act::before, .tk-act::after { content: ""; position: absolute; left: -16px; width: 28px; height: 28px; border-radius: 50%; background: var(--paper); }
.tk-act::before { top: -14px; }
.tk-act::after { bottom: -14px; }
.tk-perks { display: grid; gap: 7px; font-size: 14px; color: var(--body); }
.tk-perks span { display: flex; align-items: center; gap: 8px; }
.tk-perks .ic { width: 16px; height: 16px; color: var(--lime); }


/* ==========================================================
   8. FINAL CTA (dark)
   ========================================================== */
.final {
    position: relative;
    z-index: 2;
    isolation: isolate;
    margin-top: -48px;
    padding: 140px 0 110px;
    border-radius: 48px 48px 0 0;
    background: var(--ink);
    overflow: hidden;
}
.final-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.fn-map {
    position: absolute;
    inset: 0;
    background: url(../images/map-hero.svg) center 20% / 1900px auto no-repeat;
    opacity: .3;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 20%, transparent 80%);
            mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 20%, transparent 80%);
}
.fn-aura { position: absolute; left: 50%; top: 30%; width: 1300px; height: 900px; margin-left: -650px; background: radial-gradient(closest-side, rgba(198, 246, 137, .14), transparent 70%); }
.ghost-mark.fm1 { --w: 520px; --r: -12deg; --a: .07; left: -260px; top: 160px; }
.ghost-mark.fm2 { --w: 560px; --r: 10deg; --a: .07; right: -290px; top: 380px; }

.last-card {
    position: relative;
    max-width: 780px;
    margin: 56px auto 0;
    padding: 36px 40px 34px;
    border-radius: 32px;
    border: 1.5px solid transparent;
    background: linear-gradient(170deg, #16241A 0%, #0E1811 60%, #0A110C 100%) padding-box, linear-gradient(135deg, #FFE08A, #F6C945 36%, rgba(198, 246, 137, .3) 70%, var(--lime)) border-box;
    box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .95), 0 0 90px -34px rgba(198, 246, 137, .4);
    text-align: center;
}
.lc-title { font-family: var(--f-display); font-stretch: 72%; font-weight: 900; font-size: clamp(30px, 3.4vw, 44px); line-height: 1; text-transform: uppercase; color: #fff; }
.lc-title span { display: block; margin-top: 6px; color: var(--lime); text-wrap: balance; }
.lc-when { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 14px; margin-top: 24px; }
.lc-when span { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 14px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); font-family: var(--f-display); font-stretch: 78%; font-weight: 900; font-size: 21px; text-transform: uppercase; color: #fff; }
.lc-when .ic { width: 18px; height: 18px; color: var(--lime); }
.lc-when .gd { background: rgba(246, 201, 69, .12); box-shadow: inset 0 0 0 1px rgba(246, 201, 69, .45); color: #FFE08A; }
.lc-when .gd .ic { color: var(--t-amber); }
.lc-when .is-ended { opacity: .45; }
.lc-cd { margin-top: 26px; }
.lc-cd .cd { gap: 10px; margin-top: 14px; }
.lc-cd .cd-u b { min-width: 86px; height: 74px; font-size: 52px; border-radius: 17px; background: linear-gradient(180deg, #1A2A1E, #0F1913); box-shadow: inset 0 0 0 1px rgba(198, 246, 137, .26), 0 14px 26px -16px rgba(0, 0, 0, .9); }
.lc-cd .cd > i { font-size: 34px; line-height: 72px; }
.lc-form { position: relative; max-width: 580px; margin: 26px auto 0; text-align: left; }
.lc-form .op-btn { padding: 15px 18px 14px; }
.lc-form .op-main { font-size: 28px; }
.lc-form .op-sub { font-size: 15px; }
.lc-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px dashed rgba(255, 255, 255, .16); list-style: none; font-size: 15px; font-weight: 600; color: #DCE4D8; }
.lc-trust li { display: inline-flex; align-items: center; gap: 7px; }
.lc-trust .ic { width: 16px; height: 16px; color: var(--lime); }
.lc-trust .gd .ic { color: var(--t-amber); }
.cta-note {
    position: absolute;
    left: calc(100% + 10px); top: 26px;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    font-family: var(--f-hand);
    font-size: 30px;
    line-height: 1;
    color: var(--lime);
    white-space: nowrap;
    transform: rotate(-5deg);
    transform-origin: left top;
}
.cta-note .hand { flex: none; width: 60px; height: 50px; margin-bottom: 8px; }
.lc-note { max-width: 520px; margin: 14px auto 0; font-size: 16px; color: var(--muted); }
.lc-priv { margin-top: 14px; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.lc-priv .ic { width: 14px; height: 14px; margin-right: 7px; vertical-align: -2px; color: var(--lime); }
.lc-form .cta-note { top: auto; bottom: 22px; left: calc(100% + 14px); }


/* ==========================================================
   FOOTER (JV)
   ========================================================== */
.pm-foot { position: relative; z-index: 1; padding: 30px 0 0; background: var(--ink); color: var(--muted); isolation: isolate; overflow: hidden; }
.ft-brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ft-brand img { width: 240px; height: auto; }
.ft-tag { margin-top: 10px; font-family: var(--f-hand); font-size: 30px; font-weight: 700; line-height: 1; color: var(--lime); transform: rotate(-2deg); }
.ft-legal { max-width: 860px; margin: 40px auto 0; text-align: center; }
.ft-h { margin: 0 0 10px; font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #fff; }
.ft-legal p { font-size: 12.5px; line-height: 1.75; color: #8E998A; }
.ft-legal p + p { margin-top: 8px; }
.ft-links { display: flex; flex-wrap: wrap; justify-content: center; max-width: 860px; margin: 34px auto 0; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ft-links a { padding: 4px 16px; font-size: 14px; font-weight: 600; color: #DCE4D8; }
.ft-links a + a { border-left: 1px solid var(--line); }
.ft-links a:hover { color: var(--lime); }
.ft-copy { margin-top: 20px; text-align: center; font-size: 13px; color: var(--dim); }
.ft-scene { position: relative; height: 340px; margin-top: 20px; }
.ft-floor {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 290px;
    overflow: hidden;
    perspective: 700px;
    perspective-origin: 50% 0;
    -webkit-mask-image: linear-gradient(transparent, #000 40%);
            mask-image: linear-gradient(transparent, #000 40%);
}
.ft-floor .map-floor { transform: rotateX(62deg); opacity: .42; }
.ft-word {
    position: absolute;
    left: 50%; bottom: 70px;
    z-index: 1;
    font-family: var(--f-display);
    font-stretch: 70%;
    font-weight: 900;
    font-size: min(17vw, 270px);
    line-height: .8;
    letter-spacing: -.01em;
    text-transform: uppercase;
    white-space: nowrap;
    background: linear-gradient(180deg, #6F8C4F, #18221A 85%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(#000 55%, transparent 100%);
            mask-image: linear-gradient(#000 55%, transparent 100%);
}
.ft-pins { position: absolute; inset: 0; z-index: 2; }
.fp {
    --c: var(--lime);
    position: absolute;
    left: var(--x);
    top: var(--y);
    display: grid;
    place-items: center;
    min-width: 36px; height: 36px;
    padding: 0 6px;
    border-radius: 30%;
    background: var(--c);
    font-family: var(--f-display);
    font-stretch: 80%;
    font-size: 15px;
    font-weight: 900;
    color: var(--lime-ink);
    transform: translate(-50%, -100%) scale(var(--s, 1));
    box-shadow: 0 0 26px -4px var(--c);
}
.fp::before { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 22px; margin-left: -1px; background: linear-gradient(var(--c), transparent); }
.fp::after { content: ""; position: absolute; left: 50%; top: calc(100% + 18px); width: 34px; height: 10px; margin-left: -17px; border-radius: 50%; background: radial-gradient(closest-side, var(--c), transparent); opacity: .5; }
.fp.r2 { --c: #A9E96C; }
.fp.r4 { --c: var(--t-amber); }
.fp.r14 { --c: var(--t-coral); }
.fp.r20 { --c: #3A453C; color: #9AA596; font-size: 13px; }
.ft-glow { position: absolute; left: 50%; bottom: -120px; width: 1200px; height: 260px; margin-left: -600px; border-radius: 50%; background: radial-gradient(closest-side, rgba(198, 246, 137, .3), transparent); }


/* ==========================================================
   STICKY BAR
   ========================================================== */
.sbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 900;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(9, 13, 10, .97);
    border-top: 1px solid rgba(198, 246, 137, .2);
    box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, .8);
    transform: translateY(110%);
    transition: transform .45s var(--ease);
}
.sbar.show { transform: none; }
.sb-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1240px; margin: 0 auto; }
.sb-when { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sb-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 30%; background: rgba(255, 90, 78, .14); color: #FF7A6B; transform: rotate(-8deg); }
.sb-ic .ic { width: 22px; height: 22px; transform: rotate(8deg); }
.sb-when small { display: block; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sb-when b { display: block; font-size: 16px; font-weight: 700; color: #fff; white-space: nowrap; }
.sb-timer { display: flex; align-items: center; gap: 12px; }
.sb-lbl { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); line-height: 1.3; text-align: right; }
.sbar .cd { margin: 0; gap: 5px; }
.sbar .cd > i { font-size: 20px; line-height: 40px; }
.sbar .cd-u b { min-width: 46px; height: 40px; border-radius: 11px; font-size: 25px; }
.sbar .cd-u small { margin-top: 3px; font-size: 9px; }
.sb-btn { height: 54px; padding: 0 22px; font-size: 20px; }
.sb-btn .ic { width: 20px; height: 20px; }
.sb-s { display: none; }


/* ==========================================================
   OPT-IN FORMS — on the page (hero seat card + final card)
   Both post to AWeber; js/script.js adds the hidden fields.
   ========================================================== */
.reg-form { position: relative; border-radius: 20px; }
.reg-fields { display: grid; gap: 10px; margin-top: 14px; }
.fld { position: relative; display: block; }
.fld .ic { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--t-muted); pointer-events: none; }
.fld input {
    width: 100%;
    height: 58px;
    padding: 0 16px 0 46px;
    border: 0;
    border-radius: 16px;
    background: #F6F8F2;
    box-shadow: inset 0 0 0 1.5px var(--t-line);
    color: var(--t-ink);
    font: 500 16.5px var(--f-body);
    transition: box-shadow .2s, background .2s;
}
.fld input::placeholder { color: #8A9586; }
.fld input:focus { outline: 0; background: #fff; box-shadow: inset 0 0 0 2px #6FA83A, 0 0 0 4px rgba(198, 246, 137, .45); }
.fld input.bad { box-shadow: inset 0 0 0 2px var(--t-coral), 0 0 0 4px rgba(255, 122, 107, .2); }
.op-btn {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 100%;
    margin-top: 14px;
    padding: 13px 18px 12px;
    border: 0;
    border-radius: 18px;
    background: var(--amber-grad);
    color: var(--amber-ink);
    text-align: center;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(255, 245, 210, .6) inset, 0 -4px 0 rgba(150, 60, 0, .25) inset, 0 22px 44px -16px rgba(255, 140, 30, .85);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.op-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; border: 2px solid rgba(255, 170, 50, .85); animation: ctaRing 2.2s ease-out infinite; pointer-events: none; }
@keyframes ctaRing { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.06, 1.4); opacity: 0; } }
.op-shine { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.op-shine::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .4), transparent); transform: translateX(-160%) skewX(-18deg); animation: shine 4.5s 1.4s infinite; }
.op-main { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-stretch: 78%; font-weight: 900; font-size: 25px; line-height: 1.05; letter-spacing: .01em; text-transform: uppercase; }
.op-main .ic { flex: none; width: 22px; height: 22px; transition: transform .25s var(--ease); }
.op-sub { font-size: 14px; font-weight: 600; line-height: 1.3; color: #5A2C00; }
.op-btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 245, 210, .7) inset, 0 -4px 0 rgba(150, 60, 0, .25) inset, 0 28px 54px -14px rgba(255, 140, 30, 1); }
.op-btn:hover .op-main .ic { transform: translateX(5px); }
.op-btn:focus-visible { outline: 3px solid var(--t-ink); outline-offset: 4px; }
.reg-dark .op-btn:focus-visible { outline-color: #fff; }
.reg-msg { margin-top: 12px; font-size: 14.5px; text-align: center; color: #B4372A; }
.reg-msg:empty { display: none; }
.reg-msg.ok { color: var(--t-green); }
/* jumping to a form from any other button pulses it once */
.reg-form.ping { animation: formPing 1.5s var(--ease); }
@keyframes formPing { 0%, 100% { box-shadow: 0 0 0 0 rgba(111, 168, 58, 0); } 25%, 60% { box-shadow: 0 0 0 7px rgba(111, 168, 58, .45); } }
.reg-dark.ping { animation-name: formPingDark; }
@keyframes formPingDark { 0%, 100% { box-shadow: 0 0 0 0 rgba(198, 246, 137, 0); } 25%, 60% { box-shadow: 0 0 0 7px rgba(198, 246, 137, .35); } }
/* after the session ends */
.reg-form.is-closed .reg-fields { opacity: .45; }
.reg-form.is-closed .reg-go { filter: grayscale(1); pointer-events: none; }
.reg-form.is-closed .op-btn::before, .reg-form.is-closed .op-shine { display: none; }
/* the dark variant in the final card: two fields side by side */
.reg-dark .reg-fields { margin-top: 0; }
.reg-dark .fld .ic { color: var(--muted); }
.reg-dark .fld input { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14); color: #fff; }
.reg-dark .fld input::placeholder { color: #8E998A; }
.reg-dark .fld input:focus { background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 2px var(--lime), 0 0 0 4px rgba(198, 246, 137, .18); }
.reg-dark .reg-msg { color: #FF9A8E; }
.reg-dark .reg-msg.ok { color: var(--lime); }


/* ==========================================================
   ?review — open CONFIG items tagged in place
   ========================================================== */
.tbc { position: relative; outline: 2px dashed #FFD60A !important; outline-offset: 4px; }
.tbc::before {
    content: "TO CONFIRM: " attr(data-tbc);
    position: absolute;
    left: 0; bottom: calc(100% + 8px);
    z-index: 5;
    padding: 3px 8px;
    border-radius: 6px;
    background: #FFD60A;
    color: #1A1400;
    font: 700 11px/1.3 var(--f-mono);
    letter-spacing: .04em;
    text-transform: none;
    white-space: nowrap;
}
.btn-mega.tbc { overflow: visible; }
.btn-mega.tbc::after { display: none; }


/* ==========================================================
   RESPONSIVE
   ========================================================== */
/* short laptop screens: keep the session card's button in the first screen */
@media (min-width: 992px) and (max-height: 880px) {
    .hero { padding-top: 114px; }
    .hero-h1 { margin-top: 30px; }
    .hero-h1 .h-b { margin-top: 20px; }
    .hero-h1 .h-c { margin-top: 22px; }
    .hero-sub { margin-top: 26px; font-size: 16.5px; }
    .fold-split { margin-top: 44px; }
    .sc-body { padding-top: 20px; }
}

/* very short screens (1366x768 laptops after browser chrome) */
@media (min-width: 992px) and (max-height: 760px) {
    .pm-nav { height: 64px; }
    .hero { padding-top: 102px; }
    .dateline { gap: 14px; padding: 7px 24px 7px 7px; font-size: 20px; }
    .dl-live { padding: 6px 14px; font-size: 15.5px; }
    .hero-h1 { margin-top: 24px; }
    .hero-h1 .h-b { margin-top: 16px; }
    .hero-h1 .h-c { margin-top: 18px; }
    .hero-sub { margin-top: 22px; font-size: 15.5px; line-height: 1.6; }
    .fold-split { margin-top: 36px; }
    .sc-body { padding: 18px 22px 20px; }
    .fld input { height: 52px; }
}

@media (max-width: 1199.98px) {
    .pm-links a { padding: 10px 10px; font-size: 14px; }
    .fold-split { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 30px; }
    .sw-calls { width: 36%; }
    .sgrid-hero { --t: 38px; --g: 9px; left: 33%; }
    .sw-radar { left: 33%; }
    .sw-call { padding: 10px 12px; }
    .sw-call b { font-size: 18px; white-space: nowrap; }
    .sw-call small { font-size: 9.5px; letter-spacing: .05em; }
    .sw-call em { display: none; }
    .sw-bar .sw-status { display: none; }
    .feat-grid b { font-size: 20px; }
    .dc h3 { font-size: 27px; }
    .bn { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 36px; padding-right: 34px; }
    .bn-flip { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); padding-left: 34px; padding-right: 28px; }
    .bn-visual { min-height: 440px; }
    .bn h3 { font-size: 34px; }
    .who { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .who li { grid-column: span 2; }
    .who li:nth-child(4) { grid-column: 2 / span 2; }
    .tk { grid-template-columns: 112px minmax(0, 1fr); }
    .tk-one { grid-template-columns: 112px minmax(0, 1fr) minmax(0, 280px); }
    .tk-act { padding: 24px 22px 24px 24px; }
    .tk-day { font-size: 78px; }
    .tk h3 { font-size: 38px; }
    .tk-main { padding: 24px 22px 24px; }
}

@media (max-width: 991.98px) {
    .dateline { gap: 12px; padding: 8px 22px 8px 8px; font-size: 18px; }
    .dl-live { padding: 6px 13px; font-size: 15px; }
    .pm-links { display: none; }
    .hero { padding-bottom: 130px; }
    .fold-split { grid-template-columns: minmax(0, 1fr); gap: 46px; max-width: 640px; margin-left: auto; margin-right: auto; }
    .seat-card { order: -1; }
    .floor-wrap { top: 900px; }
    .gap-split { grid-template-columns: minmax(0, 1fr); gap: 56px; max-width: 640px; }
    .gap-art { justify-items: center; padding-right: 0; }
    .ga-note { display: none; }
    .vs { gap: 22px; }
    .vs-card { padding: 26px 20px 24px; }
    .sgrid-mini { --t: 34px; --g: 8px; padding: 13px; }
    .pitch { grid-template-columns: minmax(0, 1fr); }
    .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stk-toast { display: none; }
    .pt-arrow { transform: rotate(90deg); justify-self: center; }
    .dc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dc, .dc-wide { grid-column: span 1; }
    .dc:last-child { grid-column: 1 / -1; }
    .art-scan { gap: 18px; padding: 0 14px; }
    .sgrid-art { --t: 26px; --g: 6px; }
    .ac-gap { display: none; }
    .ac-stat b { font-size: 30px; }
    .art-talk { gap: 10px; padding: 0 12px; }
    .at-report { width: 150px; padding: 10px; }
    .atr-k { font-size: 7.5px; letter-spacing: .06em; }
    .at-report > b { font-size: 12.5px; }
    .atr-brand { display: none; }
    .att-sent { font-size: 9px; padding: 5px 8px; }
    .tour { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .tour-stage { order: -1; }
    .tour-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
    .tour-steps::before { display: none; }
    .ts { padding: 10px 12px 12px 8px; gap: 12px; }
    .ts-n { width: 36px; height: 36px; font-size: 17px; }
    .ts-t { font-size: 14.5px; }
    .ts-bar { left: 56px; }
    .tour-cap { min-height: 0; }
    .honest { grid-template-columns: minmax(0, 1fr); }
    .tk-one { max-width: 640px; grid-template-columns: 112px minmax(0, 1fr); }
    .tk-act { grid-column: 1 / -1; border-left: 0; border-top: 3px dotted rgba(198, 246, 137, .22); padding: 22px; }
    .tk-act::before, .tk-act::after { top: -16px; bottom: auto; }
    .tk-act::before { left: -14px; }
    .tk-act::after { left: auto; right: -14px; }
    .bn-list { max-width: 680px; }
    .bn, .bn-flip { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 18px 18px 26px; }
    .bn-flip .bn-visual { order: 0; }
    .bn-visual { min-height: 400px; }
    .bn-body { padding: 0 10px; }
    .bn-total { max-width: 680px; flex-direction: column; justify-content: center; text-align: center; padding: 26px 24px; }
    .bt-sum { justify-content: center; }
    .cta-note { display: none; }
    .sb-lbl { display: none; }
}

@media (max-width: 767.98px) {
    body { font-size: 16px; }
    .wrap { padding: 0 16px; }
    .pm-nav-wrap { top: 10px; padding: 0 10px; }
    .pm-nav { height: 62px; padding: 0 8px 0 16px; border-radius: 18px; }
    .pm-logo img { height: 28px; }
    .btn-nav { height: 44px; padding: 0 16px; font-size: 15.5px; border-radius: 12px; }

    .hero { padding: 96px 0 110px; }
    .dateline { flex-wrap: wrap; justify-content: center; gap: 10px; padding: 10px 14px 13px; border-radius: 26px; background: linear-gradient(180deg, rgba(229, 50, 42, .34), rgba(198, 246, 137, .06)); font-size: 17px; letter-spacing: .02em; line-height: 1.3; text-align: center; }
    .dl-live { padding: 6px 14px; font-size: 14.5px; }
    .dl-txt { flex-basis: 100%; }
    .hero-h1 { margin-top: 28px; }
    .hero-h1 .h-a { font-size: 8.4vw; line-height: 1.1; text-wrap: balance; white-space: normal; }
    .hero-h1 .h-b { margin-top: 20px; font-size: 12.8vw; line-height: 1.26; white-space: normal; }
    .hero-h1 .hl { display: inline; padding: .02em .14em .0em; -webkit-box-decoration-break: clone; box-decoration-break: clone; transform: none; box-shadow: 0 0 0 4px rgba(198, 246, 137, .12); }
    .hero-h1 .h-c { margin-top: 20px; font-size: 7.2vw; line-height: 1.12; text-wrap: balance; white-space: normal; }
    .hero-sub { margin-top: 24px; font-size: 16px; line-height: 1.7; }
    .fold-split { margin-top: 40px; gap: 40px; }

    .sc-body { padding: 20px 16px 20px; }
    .sc-title { font-size: 25px; }
    .fld input { height: 54px; }
    .btn-mega span { white-space: normal; text-align: left; line-height: 1.02; }
    .op-main, .lc-form .op-main { font-size: 23px; }
    .op-sub, .lc-form .op-sub { font-size: 13.5px; }
    .sc-meta { gap: 6px; }
    .sc-meta b { font-size: 13px; }
    .sc-meta small { font-size: 9px; letter-spacing: .1em; }
    .sc-cd { padding: 15px 10px 13px; }
    .cd { gap: 5px; }
    .cd > i { font-size: 22px; line-height: 46px; }
    .cd-u b { min-width: 54px; height: 48px; font-size: 30px; border-radius: 12px; }

    .scan-win::before { inset: -6px; border-radius: 26px; transform: rotate(-1.4deg); }
    .sw-bar { height: 52px; padding: 0 8px; gap: 6px; }
    .sw-search { height: 36px; padding: 0 11px; font-size: 14px; }
    .sw-chip { height: 36px; padding: 0 9px; font-size: 10px; }
    .sw-map { aspect-ratio: auto; height: 300px; }
    .sgrid-hero { --t: 40px; --g: 10px; left: 50%; }
    .sw-radar { left: 50%; }
    .sw-calls { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: auto; max-width: none; padding: 10px; border-top: 1px solid var(--line); }
    .sw-call { padding: 10px; gap: 9px; flex-direction: column; opacity: 1; transform: none; }
    .swc-ic { width: 30px; height: 30px; }
    .swc-ic .ic { width: 16px; height: 16px; }
    .sw-call small { font-size: 9.5px; }
    .sw-call b { font-size: 20px; }
    .sw-foot { flex-direction: column; align-items: center; gap: 10px; padding: 12px; }
    .legend { justify-content: center; font-size: 10.5px; gap: 6px 12px; }
    .hero-trust li { font-size: 13px; padding: 8px 11px; }

    .sheet { margin-top: -30px; padding: 76px 0 84px; border-radius: 30px; }
    .sec-pill, .dk-pill { font-size: 10.5px; padding: 7px 12px 7px 10px; letter-spacing: .1em; }
    .sec-h2 .l1, .dk-h2 .l1, .dk-h2 .l3 { font-size: 7.6vw; text-wrap: balance; }
    .sec-h2 .l2, .dk-h2 .l2 { margin-top: 10px; font-size: 10.6vw; line-height: 1.12; }
    .sec-h2 .hl, .dk-h2 .hl { display: inline; padding: .02em .14em 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; transform: none; }
    .sec-h2 .hl { box-shadow: 0 0 0 2px var(--t-ink), 4px 5px 0 var(--t-ink); }
    .sec-sub, .dk-sub { margin-top: 22px; font-size: 16.5px; }

    .gap-split { margin-top: 42px; gap: 46px; }
    .gap-lead { font-size: 19px !important; }
    .gap-copy p { font-size: 16.5px; }
    .ladder li { grid-template-columns: auto minmax(0, 1fr); padding: 13px 16px; row-gap: 2px; }
    .ladder span { grid-column: 2; justify-self: start; text-align: left; }
    .ladder b { font-size: 19px; white-space: normal; }
    .ga-note { display: none; }
    .phone { width: 300px; transform: rotate(2deg); }
    .vs { grid-template-columns: minmax(0, 1fr); margin-top: 54px; gap: 40px; }
    .vs-badge { top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; font-size: 22px; }
    .vs-card h3 { font-size: 27px; }
    .sgrid-mini { --t: 38px; }
    .gap-close { margin-top: 56px; }
    .gc-q { font-size: 7vw; }
    .gc-a { font-size: 17px; }

    .intro, .flow { margin-top: -30px; padding: 110px 0 96px; }
    .stack { margin-top: 50px; aspect-ratio: 1 / 1.02; }
    .stk-glow { left: 0; right: 0; top: 0; height: 80cqw; }
    .stk-floor { top: 56cqw; height: 50cqw; }
    .stk-ring.r1 { top: 63cqw; width: 110cqw; height: 16cqw; }
    .stk-ring.r2 { display: none; }
    .laptop { top: 2cqw; width: 94cqw; margin-left: -47cqw; }
    .lp-lid { padding: .8cqw .8cqw .5cqw; border-radius: 2.6cqw 2.6cqw .8cqw .8cqw; }
    .lp-bezel { padding: 2cqw 1.6cqw 1.7cqw; border-radius: 2cqw 2cqw .5cqw .5cqw; }
    .lp-cam { top: .7cqw; width: .7cqw; height: .7cqw; margin-left: -.35cqw; }
    .lp-hinge { width: 89cqw; height: .9cqw; }
    .lp-base { width: 104cqw; height: 3cqw; margin-left: -5cqw; }
    .lp-base::before { width: 16cqw; margin-left: -8cqw; height: 1cqw; }
    .lp-shadow { width: 104cqw; margin-left: -5cqw; height: 6cqw; margin-top: -2.6cqw; }
    .rep, .stk-toast { display: none; }
    .stk-boxwrap { left: -2cqw; bottom: 3cqw; height: 56cqw; }
    .phone-m { right: 3cqw; bottom: 2cqw; width: 29cqw; }
    .pm-body { padding: 1.3cqw; border-radius: 5.2cqw; }
    .pm-island { top: 2.5cqw; width: 8cqw; height: 2.1cqw; margin-left: -4cqw; border-radius: 1.2cqw; }
    .pm-screen { padding-top: 4.8cqw; border-radius: 4cqw; }
    .pb1 { top: 11cqw; height: 4cqw; } .pb2 { top: 16.5cqw; height: 6.5cqw; } .pb3 { top: 14cqw; height: 9cqw; }
    .pm-btn { width: .8cqw; left: -.5cqw; } .pb3 { left: auto; right: -.5cqw; }
    .stk-note { margin-top: 14px; font-size: 10px; }
    .app-frame::before { inset: -6px; border-radius: 24px; transform: rotate(-1.4deg); }
    .af-bar { height: 34px; padding: 0 10px; }
    .af-bar > span { font-size: 10.5px; }
    .af-bar > b { font-size: 9px; padding: 3px 7px; }
    .feat-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 20px; }
    .feat-grid li { gap: 14px; padding: 15px 16px 15px 14px; border-radius: 18px; }
    .fg-ic { width: 42px; height: 42px; }
    .fg-ic .ic { width: 20px; height: 20px; }
    .feat-grid b { font-size: 19px; }
    .feat-grid li > span:last-child { font-size: 14.5px; }
    .intro-cap { font-size: 16px; margin-top: 40px; }
    .pitch { margin-top: 46px; gap: 12px; }
    .pt-card b { font-size: 21px; }
    .mantra { margin-top: 64px; font-size: 17vw; }
    .mn-b { -webkit-text-stroke: 1.5px var(--lime); }

    .dc-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 42px; }
    .dc { border-radius: 24px; }
    .dc-art { height: 210px; border-radius: 18px; }
    .dc h3 { font-size: 26px; }
    .dc p { font-size: 15px; }
    .sgrid-tiny { --t: 12px; }
    .atr-stat b { font-size: 24px; }
    .att-bubble { font-size: 12.5px; padding: 10px 11px; }
    .disc-cta { margin-top: 44px; }
    .disc-cta p { font-size: 17px; }
    .disc-cta .btn-mega { width: 100%; justify-content: space-between; height: auto; min-height: 68px; padding: 9px 10px 9px 20px; font-size: 22px; gap: 10px; border-radius: 18px; }
    .disc-cta .btn-mega .ic { width: 46px; height: 46px; padding: 13px; }

    .tour { margin-top: 42px; }
    .tour-steps { grid-template-columns: minmax(0, 1fr); }
    .tour-cap { margin-top: 18px; font-size: 14.5px; }
    .calm { flex-direction: column; text-align: center; margin-top: 46px; padding: 22px 18px; }
    .calm p { font-size: 15.5px; }

    .who { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 36px; }
    .who li, .who li:nth-child(4) { grid-column: auto; }
    .who li { padding: 7px 7px 16px; border-radius: 20px; }
    .who-img { border-radius: 14px; }
    .who-ic { width: 42px; height: 42px; margin: -21px 0 0 8px; box-shadow: 0 0 0 3px #fff, 0 12px 20px -10px var(--a); }
    .who-ic .ic { width: 20px; height: 20px; }
    .who b { margin-top: 12px; padding: 0 6px; font-size: 19px; }
    .who li > span:last-child { margin-top: 5px; padding: 0 6px; font-size: 13.5px; line-height: 1.45; }
    .who li:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr; column-gap: 14px; padding: 7px 14px 7px 7px; }
    .who li:last-child .who-img { grid-column: 1; grid-row: 1 / -1; }
    .who li:last-child .who-ic { grid-column: 2; grid-row: 2; margin: 0; }
    .who li:last-child b { grid-column: 2; grid-row: 3; margin-top: 10px; padding: 0; }
    .who li:last-child > span:last-child { grid-column: 2; grid-row: 4; padding: 0; }
    .hn-a, .hn-b { padding: 20px 18px; }
    .hn-a p { font-size: 16px; }

    .sessions { margin-top: -30px; padding: 110px 0 90px; border-radius: 30px 30px 0 0; }
    .bonus { margin-top: -30px; padding: 110px 0 120px; }
    .bn-total-pill { font-size: 14px; padding: 10px 16px; }
    .bn-list { margin-top: 42px; gap: 24px; }
    .bn, .bn-flip { padding: 10px 10px 22px; border-radius: 26px; }
    .bn-visual { min-height: 340px; border-radius: 20px; }
    .bn-art { max-height: 290px; }
    .bn-value { right: 12px; bottom: 12px; padding: 8px 13px 7px; }
    .bn-value b { font-size: 30px; }
    .bn-free { left: 12px; top: 12px; font-size: 10px; padding: 6px 11px; }
    .bn-body { padding: 0 8px; }
    .bn h3 { font-size: 30px; }
    .bn-lead { font-size: 17px; }
    .bn-desc, .bn-inc li { font-size: 15px; }
    .bn-meta { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .bn-total { margin-top: 30px; padding: 22px 14px; border-radius: 22px; }
    .bt-n { font-size: 52px; }
    .bt-t { font-size: 17px; }
    .bn-total .btn-mega { width: 100%; justify-content: space-between; height: auto; min-height: 68px; padding: 9px 10px 9px 20px; font-size: 22px; gap: 10px; border-radius: 18px; }
    .bn-total .btn-mega .ic { width: 46px; height: 46px; padding: 13px; }
    .ses-bg { width: 1100px; margin-left: -550px; height: 707px; }
    .cdown { margin-top: 36px; padding: 18px 10px 20px; border-radius: 22px; }
    .cd-lg > i { font-size: 24px; line-height: 60px; }
    .cd-lg .cd-u b { min-width: 64px; height: 62px; font-size: 40px; border-radius: 14px; }
    .cd-lg .cd-u small { font-size: 9px; letter-spacing: .1em; }
    .tk-one { margin-top: 30px; }
    .tk { grid-template-columns: minmax(0, 1fr); border-radius: 24px; }
    .tk-stub { grid-template-columns: auto auto auto; align-items: baseline; justify-content: center; gap: 10px; padding: 14px 10px; border-radius: 24px 24px 0 0; }
    .tk-stub::after { left: 18px; right: 18px; top: auto; bottom: -1px; border-right: 0; border-bottom: 3px dotted rgba(10, 17, 12, .55); }
    .tk-main::before, .tk-main::after { top: -14px; bottom: auto; }
    .tk-main::before { left: -14px; }
    .tk-main::after { left: auto; right: -14px; }
    .tk-day { font-size: 52px; }
    .tk-main { padding: 20px 18px 20px; }
    .tk h3 { font-size: 34px; }
    .tk-copy { font-size: 15px; }
    .btn-tk { min-height: 68px; padding-left: 20px; font-size: 22px; gap: 10px; }
    .btn-tk .ic { width: 44px; height: 44px; padding: 13px; }

    .final { margin-top: -30px; padding: 100px 0 100px; border-radius: 30px 30px 0 0; }
    .last-card { margin-top: 40px; padding: 26px 16px 24px; border-radius: 24px; }
    .lc-when { gap: 8px; }
    .lc-when span { padding: 9px 13px; font-size: 17px; gap: 8px; }
    .lc-when .ic { width: 15px; height: 15px; }
    .lc-cd .cd { gap: 5px; }
    .lc-cd .cd-u b { min-width: 60px; height: 56px; font-size: 36px; border-radius: 13px; }
    .lc-cd .cd > i { font-size: 24px; line-height: 54px; }
    .lc-note { font-size: 14.5px; }
    .lc-trust { flex-direction: column; align-items: center; gap: 9px; font-size: 14.5px; }

    .ft-brand img { width: 190px; }
    .ft-tag { font-size: 26px; }
    .ft-links a { padding: 4px 10px; font-size: 13px; }
    .ft-links a:nth-child(4) { border-left: 0; }
    .ft-scene { height: 190px; }
    .ft-floor { height: 170px; }
    .ft-word { bottom: 52px; font-size: 16vw; }
    .ft-pins .fp:nth-child(1), .ft-pins .fp:nth-child(3), .ft-pins .fp:nth-child(5) { display: none; }
    .ft-pins .fp { transform: translate(-50%, -100%) scale(calc(var(--s) * .7)); }
    .ft-floor .map-floor { opacity: .22; }
    .pm-foot { padding-bottom: 76px; }

    .sbar { padding: 9px 10px calc(9px + env(safe-area-inset-bottom, 0px)); }
    .sb-in { gap: 10px; }
    .sb-when { display: none; }
    .sb-timer { gap: 0; }
    .sbar .cd-u b { min-width: 38px; height: 36px; font-size: 21px; border-radius: 9px; }
    .sbar .cd > i { font-size: 16px; line-height: 36px; }
    .sbar .cd-u small { font-size: 8px; letter-spacing: .08em; }
    .sb-btn { flex: none; height: 50px; padding: 0 12px; gap: 7px; font-size: 17px; border-radius: 12px; }
    .sb-l { display: none; }
    .sb-s { display: inline; }

}

@media (max-width: 480px) {
    /* card 01 art: the grid alone (the label column doesn't fit) */
    .ac-stack { display: none; }
    /* final card: the FREE seat chip takes its own row */
    .lc-when .gd { order: 1; }
}

@media (max-width: 380px) {
    .dateline { padding: 10px 8px 13px; font-size: 15px; letter-spacing: 0; }
    .dl-live { font-size: 13.5px; }
    .btn-nav { padding: 0 12px; font-size: 14px; }
    .sw-chip { display: none; }
    .sbar .cd-u:first-child, .sbar .cd-u:first-child + i { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .js .reveal { opacity: 1; transform: none; }
}