/* ==========================================================
   ProfitMaps AI Pro — upgrade page (OTO 1)
   The FE page's language in the Pro box palette: espresso black,
   molten amber + gold, lime only as the accent (the box's pin and
   logo). Lime pill = every "Yes" button. Light sections are warm
   creams with a pastel per topic; dark sections are espresso.
   Type: Bricolage Grotesque (Title Case headlines), Geist body,
   Geist Mono labels.
   ========================================================== */
/* Arial scaled to Geist's width, so body text wraps the same before and
   after Geist loads (no layout shift) */
@font-face { font-family: "Geist Fallback"; font-weight: 400 500; src: local("Arial"), local("ArialMT"); size-adjust: 102.6%; ascent-override: 98%; descent-override: 28%; line-gap-override: 0%; }
@font-face { font-family: "Geist Fallback"; font-weight: 600 900; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 99.5%; ascent-override: 98%; descent-override: 28%; line-gap-override: 0%; }

:root {
    --night: #0D0804;
    --night-2: #170D05;
    --cocoa: #24140A;
    --amber: #FFB23E;
    --amber-2: #FF9419;
    --gold: #FFC23D;
    --honey: #FFE08A;
    --acid: #D6F23C;
    --lime: #C6F689;
    --lime-2: #A8EB4B;
    --green: #2E9B3E;
    --coral: #F0614A;
    --ink: #1A0F06;
    --body-l: #4D3D2E;
    --muted-l: #7C6A57;
    --body-d: #EADBC8;
    --muted-d: #BFA88E;

    --f-display: "Bricolage Grotesque", "Geist", 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;
    --ease: cubic-bezier(.2, .7, .2, 1);
}

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


/* ==========================================================
   THE "YES" BUTTON (lime pill + price chip + dark arrow disc)
   ========================================================== */
.btn-yes {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 80px;
    padding: 10px 11px 10px 34px;
    border-radius: 999px;
    background: linear-gradient(90deg, #F0FFB0 0%, #C6F689 42%, #8FDB4A 100%);
    color: #0E1A06;
    font-family: var(--f-display);
    font-size: 27px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.015em;
    text-decoration: none;
    box-shadow: 0 24px 46px -16px rgba(128, 200, 40, .65), 0 0 0 1px rgba(70, 120, 10, .18), inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -3px 0 rgba(40, 90, 0, .22);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn-yes::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    border: 2px solid rgba(168, 235, 75, .9);
    animation: cta-ring 2.2s ease-out infinite;
    pointer-events: none;
}
@keyframes cta-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.06, 1.45); opacity: 0; } }
.bb-shine { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.bb-shine::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 30%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent);
    transform: translateX(-180%) skewX(-20deg);
    animation: shine 3.8s ease-in-out 1s infinite;
}
@keyframes shine { 0% { transform: translateX(-180%) skewX(-20deg); } 45%, 100% { transform: translateX(420%) skewX(-20deg); } }
.by-txt { flex: 1; min-width: 0; text-align: left; text-wrap: balance; }
.by-arrow { display: grid; place-items: center; flex: none; width: 58px; height: 58px; border-radius: 50%; background: #0E1A06; color: var(--lime); box-shadow: 0 6px 14px -4px rgba(20, 50, 0, .5); transition: transform .25s var(--ease); }
.by-arrow .ic { width: 26px; height: 26px; }
.btn-yes:hover { transform: translateY(-3px); box-shadow: 0 32px 56px -16px rgba(128, 200, 40, .8), 0 0 0 1px rgba(70, 120, 10, .2), inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -3px 0 rgba(40, 90, 0, .22); }
.btn-yes:hover .by-arrow { transform: translateX(4px); }



/* ==========================================================
   HERO
   ========================================================== */
.hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding-bottom: 160px;
    background:
        radial-gradient(ellipse 80% 70% at 50% 34%, rgba(8, 4, 1, 0) 55%, rgba(8, 4, 1, .55) 100%),
        linear-gradient(180deg, var(--night) 0, var(--night-2) 360px, #24130A 900px, #1D1007 1500px, #120A04 calc(100% - 140px), #120A04 100%);
}
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-aura {
    position: absolute;
    left: 50%; top: -220px;
    width: 1600px; height: 980px;
    margin-left: -800px;
    background:
        radial-gradient(closest-side at 50% 55%, rgba(255, 166, 40, .2), transparent 70%),
        radial-gradient(closest-side at 18% 40%, rgba(255, 120, 30, .1), transparent),
        radial-gradient(closest-side at 82% 40%, rgba(198, 246, 137, .06), transparent);
}
.ghost-mark {
    position: absolute;
    width: var(--w);
    aspect-ratio: 1;
    border-radius: 30%;
    border: 1.5px solid rgba(255, 178, 62, .09);
    transform: rotate(var(--r, -8deg));
}
.ghost-mark::after { content: ""; position: absolute; inset: 26%; border-radius: 50%; border: 1.5px solid rgba(255, 178, 62, .09); }
.ghost-mark.gm1 { --w: 520px; --r: -12deg; left: -260px; top: 90px; }
.ghost-mark.gm2 { --w: 560px; --r: 10deg; right: -290px; top: 50px; }
.floor-wrap {
    position: absolute;
    left: 0; right: 0;
    top: 820px; bottom: 120px;
    overflow: hidden;
    perspective: 1000px;
    perspective-origin: 50% 0;
    -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 70%, transparent);
            mask-image: linear-gradient(transparent, #000 14%, #000 70%, transparent);
}
.map-floor {
    position: absolute;
    left: 50%; top: 0;
    width: 2800px; height: 1750px;
    margin-left: -1400px;
    background: url(../images/map-floor-amber.svg) center top / 100% 100% no-repeat;
    opacity: .2;
    transform-origin: 50% 0;
    transform: rotateX(60deg);
}
.horizon { position: absolute; left: 50%; top: 760px; width: 1800px; height: 340px; margin-left: -900px; background: radial-gradient(closest-side, rgba(255, 166, 40, .12), transparent); }
.hero-grain {
    position: absolute;
    inset: 0 0 auto;
    height: 1000px;
    z-index: -1;
    opacity: .07;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    -webkit-mask-image: linear-gradient(#000 40%, transparent);
            mask-image: linear-gradient(#000 40%, transparent);
    pointer-events: none;
}


/* nav: logo + where the buyer is in the order */
.nav { position: relative; z-index: 6; padding-top: 14px; }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.nav-logo { flex: none; }
.nav-logo img { width: auto; height: 42px; }
.osteps { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.osteps li { display: flex; align-items: center; gap: 10px; color: #9C8873; font-size: 15px; font-weight: 600; white-space: nowrap; }
.osteps li + li::before { content: ""; width: 46px; height: 2px; margin: 0 14px; background: repeating-linear-gradient(90deg, rgba(255, 178, 62, .45) 0 5px, transparent 5px 10px); }
.osteps b { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2); font-family: var(--f-mono); font-size: 13px; }
.osteps .ic { width: 15px; height: 15px; }
.osteps .done { color: #CDEBC9; }
.osteps .done b { background: #3DCB5A; color: #062A0E; box-shadow: none; }
.osteps .now { color: #fff; }
.osteps .now b { background: linear-gradient(160deg, #FFE9A0, var(--gold) 55%, var(--amber-2)); color: #2B1600; box-shadow: 0 0 0 5px rgba(255, 194, 61, .18), 0 0 20px -2px rgba(255, 178, 62, .7); }

.hero-wrap { position: relative; }

/* --- copy --- */
.hero-copy { position: relative; z-index: 3; padding-top: 30px; text-align: center; }
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 5px 18px 5px 5px;
    border-radius: 999px;
    color: var(--body-d);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
}
.eb-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px 6px 10px; border-radius: 999px; background: linear-gradient(180deg, #FFEB9C, var(--gold) 60%, #F5A21B); color: #2B1600; font-size: 13.5px; font-weight: 800; box-shadow: inset 0 -2px 0 rgba(120, 60, 0, .2); }
.eb-chip .ic { width: 15px; height: 15px; }
.h-box {
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin: 22px auto 0;
    padding: 40px 58px 54px;
    border-radius: 30px;
    border: 1.5px solid transparent;
    background: linear-gradient(180deg, rgba(48, 26, 11, .82), rgba(20, 11, 5, .86)) padding-box, linear-gradient(135deg, rgba(255, 214, 120, .9), rgba(255, 148, 25, .4) 35%, rgba(255, 255, 255, .05) 62%, rgba(198, 246, 137, .7)) border-box;
    box-shadow: 0 50px 90px -50px #000, 0 0 110px -34px rgba(255, 166, 40, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.hb-c { position: absolute; width: 26px; height: 26px; border: 3px solid var(--amber); filter: drop-shadow(0 0 6px rgba(255, 178, 62, .55)); }
.hb-c.c1 { top: 12px; left: 12px; border-right: 0; border-bottom: 0; border-radius: 9px 0 0 0; }
.hb-c.c2 { top: 12px; right: 12px; border-left: 0; border-bottom: 0; border-radius: 0 9px 0 0; }
.hb-c.c3 { bottom: 12px; left: 12px; border-right: 0; border-top: 0; border-radius: 0 0 0 9px; }
.hb-c.c4 { bottom: 12px; right: 12px; border-left: 0; border-top: 0; border-radius: 0 0 9px 0; }
.h-box .eyebrow { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); white-space: nowrap; background: #2A170A; box-shadow: inset 0 0 0 1px rgba(255, 194, 61, .4), 0 10px 24px -10px #000; }
.hero-h1 {
    margin: 0 auto;
    font-family: var(--f-display);
    font-optical-sizing: auto;
    font-size: clamp(34px, 4.6vw, 76px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -.035em;
    color: #fff;
}
.hero-h1 > span { display: block; }
.hl-gold {
    position: relative;
    display: inline-block;
    background: linear-gradient(180deg, #FFF1B8 0%, #FFD45C 40%, #F59E1B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-right: .04em;
    filter: drop-shadow(0 0 .45em rgba(255, 178, 62, .35));
}
.hl-gold::after {
    content: "";
    position: absolute;
    left: -6%; right: -8%; bottom: -.16em;
    height: .3em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 30' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23FFE38A'/%3E%3Cstop offset='.55' stop-color='%23FFC23D'/%3E%3Cstop offset='1' stop-color='%23FF8F1F'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M3 20C80 10 180 5 297 6c2 0 3 3 1 5-98 2-188 9-286 17-7 1-12-4-9-8z' fill='url(%23g)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
html:not(.fw) .hl-gold::after { animation: brush .7s cubic-bezier(.3, .7, .2, 1) .45s both; }
@keyframes brush { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.hl-lime {
    background: linear-gradient(180deg, #F2FF9C 0%, var(--acid) 55%, #A9E13A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 26px rgba(214, 242, 60, .3));
}
/* the sub-line as one route capsule docked on the box's bottom edge */
.steps {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    margin: -28px auto 0;
    padding: 9px 26px 9px 9px;
    list-style: none;
    border-radius: 999px;
    border: 1.5px solid transparent;
    background: linear-gradient(180deg, #2D180A, #1C0F06) padding-box, linear-gradient(90deg, rgba(255, 194, 61, .75), rgba(255, 148, 25, .3) 50%, rgba(198, 246, 137, .75)) border-box;
    box-shadow: 0 22px 44px -18px #000, 0 0 44px -16px rgba(255, 166, 40, .45);
    color: #fff;
    font-size: 18.5px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.2;
    white-space: nowrap;
}
.steps li { position: relative; display: flex; align-items: center; gap: 12px; }
.steps li + li::before {
    content: "";
    width: 50px; height: 14px;
    margin: 0 14px 0 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFB23E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") right center / 13px 13px no-repeat, repeating-linear-gradient(90deg, rgba(255, 178, 62, .65) 0 6px, transparent 6px 11px) left center / calc(100% - 9px) 2px no-repeat;
}
.st-ic {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px; height: 36px;
    border-radius: 11px;
    background: linear-gradient(160deg, #FFE9A0, var(--gold) 55%, var(--amber-2));
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .16), 0 0 18px -4px rgba(255, 178, 62, .7);
    color: #2B1600;
}
.st-ic .ic { width: 19px; height: 19px; }
.steps li:last-child .st-ic { background: linear-gradient(160deg, #F2FF9C, var(--acid) 60%, #A9E13A); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .16), 0 0 18px -4px rgba(214, 242, 60, .65); color: #0B1D12; }


/* ==========================================================
   VIDEO (tilted gold plate)
   ========================================================== */
.stage { position: relative; z-index: 2; max-width: 820px; margin: 46px auto 0; padding: 0 24px; isolation: isolate; }
.stage::after { content: ""; position: absolute; z-index: -2; left: -240px; right: -240px; top: -60px; bottom: 40px; background: radial-gradient(closest-side, rgba(16, 8, 3, .9) 55%, rgba(16, 8, 3, .5) 78%, transparent); pointer-events: none; }
.vid-spot { position: absolute; z-index: -1; left: -16%; right: -16%; top: -22%; bottom: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 166, 40, .32), rgba(255, 166, 40, .08) 55%, transparent); pointer-events: none; }
.vsl-frame {
    position: relative;
    padding: 8px;
    border-radius: 26px;
    background: #160C05;
    box-shadow: 0 0 0 1px rgba(255, 194, 61, .5), 0 60px 140px -40px rgba(255, 166, 40, .45), 0 40px 80px -30px #000;
}
.vsl-frame::before { content: ""; position: absolute; inset: -14px; z-index: -1; border-radius: 38px; background: linear-gradient(140deg, #FFF0B8, var(--gold) 45%, var(--amber-2)); transform: rotate(-2.2deg); }
.vsl-player { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 19px; background: #0E0703; }
.vsl-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }


/* ==========================================================
   ACCOUNT LIMITS (Basic / Pro switch)
   ========================================================== */
.limits {
    position: relative;
    z-index: 3;
    max-width: 980px;
    margin: 80px auto 0;
    padding: 24px 28px 22px;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(44, 24, 10, .95), rgba(22, 12, 5, .96));
    box-shadow: inset 0 0 0 1px rgba(255, 178, 62, .24), 0 40px 80px -40px #000, 0 0 80px -40px rgba(255, 166, 40, .5);
}
.lm-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lm-label { display: inline-flex; align-items: center; gap: 10px; color: #F6E3C6; font-family: var(--f-mono); font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.lm-label i { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(255, 178, 62, .2), 0 0 12px var(--amber); }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.seg button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: #C7B095; font-size: 15px; font-weight: 700; cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
.seg .ic { width: 16px; height: 16px; }
.seg button[data-plan="basic"][aria-pressed="true"] { background: #4A3A2C; color: #fff; }
.seg button[data-plan="pro"][aria-pressed="true"] { background: linear-gradient(160deg, #FFE9A0, var(--gold) 55%, var(--amber-2)); color: #2B1600; box-shadow: 0 0 22px -4px rgba(255, 178, 62, .8); }
.lm-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.lm-tile { display: grid; gap: 2px; padding: 16px 18px 15px; border-radius: 18px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); transition: box-shadow .4s, background .4s; }
.lm-tile b { color: #fff; font-family: var(--f-display); font-size: 48px; font-weight: 800; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; transition: color .4s; }
.lm-tile span { color: var(--muted-d); font-size: 15px; font-weight: 600; line-height: 1.3; }
.limits.is-pro .lm-tile { background: rgba(255, 178, 62, .08); box-shadow: inset 0 0 0 1px rgba(255, 194, 61, .45), 0 0 30px -12px rgba(255, 166, 40, .6); }
.limits.is-pro .lm-tile b { background: linear-gradient(180deg, #FFF1B8, #FFD45C 45%, #F59E1B); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* 50 business slots, logo-squircles: 10 lime (Basic) + 40 that light amber (Pro) */
.lm-field { display: grid; grid-template-columns: repeat(25, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.lm-field i { aspect-ratio: 1; border-radius: 30%; background: rgba(255, 255, 255, .07); -webkit-mask: radial-gradient(circle, transparent 22%, #000 calc(22% + .5px)); mask: radial-gradient(circle, transparent 22%, #000 calc(22% + .5px)); transition: background .35s, transform .35s var(--ease); }
.lm-field i.on { background: linear-gradient(160deg, #F2FF9C, var(--acid) 60%, #A9E13A); }
.lm-field i.on.p { background: linear-gradient(160deg, #FFE9A0, var(--gold) 55%, var(--amber-2)); transform: rotate(-8deg); }
.lm-cap { margin: 16px 0 0; color: #F2DEC0; font-size: 15.5px; font-weight: 600; text-align: center; }


/* ==========================================================
   OFFER CARD (FE light box, Pro colours)
   ========================================================== */
.offer-card {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    align-items: center;
    gap: 44px;
    max-width: 980px;
    margin: 64px auto 0;
    padding: 32px 44px 30px 34px;
    border: 1.5px solid transparent;
    border-radius: 32px;
    background: linear-gradient(160deg, #FFFFFF, #FFFBF3 60%, #FFF3DE) padding-box, linear-gradient(135deg, #FFD36B, #FF9F1C 40%, rgba(255, 255, 255, .6) 68%, #B9EE6E) border-box;
    box-shadow: 0 0 0 8px rgba(255, 178, 62, .16), 0 0 100px -20px rgba(255, 166, 40, .5), 0 60px 100px -40px #000;
    color: var(--body-l);
}
.oc-box { position: relative; isolation: isolate; }
.oc-box img { width: 100%; height: auto; filter: drop-shadow(0 26px 30px rgba(90, 40, 0, .35)); }
.oc-ped { position: absolute; z-index: -1; left: 4%; right: 4%; bottom: -4%; height: 16%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 150, 30, .55), transparent); }
.oc-lead { margin: 0 0 4px; color: var(--ink); font-family: var(--f-display); font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.oc-price { display: flex; align-items: center; gap: 18px; margin: 0 0 18px; }
.oc-price b { color: var(--ink); font-family: var(--f-display); font-size: 68px; font-weight: 800; line-height: .95; letter-spacing: -.05em; }
.oc-rest { padding-left: 18px; border-left: 1.5px solid #EFDCC0; color: #B85F00; font-size: 15.5px; font-weight: 700; line-height: 1.4; }
.oc-trust { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; }
.guar { display: inline-flex; align-items: center; gap: 12px; text-align: left; }
.g-seal { flex: none; width: 76px; height: 76px; margin: -12px 0 -12px -6px; transform: rotate(-10deg); filter: drop-shadow(0 8px 12px rgba(90, 40, 0, .35)) drop-shadow(0 0 14px rgba(255, 194, 61, .3)); }
.guar-txt { display: grid; gap: 4px; }
.guar-txt b { color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.2; }
.secure { display: inline-flex; align-items: center; gap: 7px; color: var(--muted-l); font-size: 14px; font-weight: 600; }
.secure .ic { width: 16px; height: 16px; color: var(--green); }


/* ==========================================================
   HERO WINGS (decorative, ≥1280)
   ========================================================== */
.props-l, .props-r { position: absolute; z-index: 4; top: 520px; display: none; pointer-events: none; }
.props-l { left: 26px; width: 290px; }
.props-r { right: 26px; width: 300px; }
.wing { position: relative; }
.wing-l { transform: perspective(1400px) rotateY(16deg) rotateZ(-4deg); transform-origin: 0 50%; }
.wing-r { transform: perspective(1400px) rotateY(-16deg) rotateZ(4deg); transform-origin: 100% 50%; }
/* follow-up sequence */
.fu-card { overflow: hidden; border-radius: 18px; background: linear-gradient(180deg, #24150B, #160C05); box-shadow: 0 0 0 1px rgba(255, 194, 61, .3), 0 40px 70px -30px #000, 0 0 70px -24px rgba(92, 200, 255, .35); color: #F2E3CE; }
.fu-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: rgba(0, 0, 0, .3); font-size: 12px; font-weight: 700; }
.fu-bar i { width: 9px; height: 9px; border-radius: 50%; background: #FF6159; }
.fu-bar i:nth-child(2) { background: #FFBE2F; }
.fu-bar i:nth-child(3) { background: #2ACA44; margin-right: 8px; }
.fu-lead { display: flex; align-items: center; gap: 10px; margin: 12px 12px 4px; padding: 10px 12px; border-radius: 12px; background: rgba(92, 200, 255, .1); box-shadow: inset 0 0 0 1px rgba(92, 200, 255, .3); }
.fu-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #5CC8FF; box-shadow: 0 0 0 4px rgba(92, 200, 255, .2); }
.fu-lead > span:nth-child(2) { display: grid; flex: 1; line-height: 1.2; }
.fu-lead b { font-size: 13.5px; color: #fff; }
.fu-lead small { color: #B9C9D6; font-size: 11.5px; }
.fu-lead em { padding: 3px 8px; border-radius: 6px; background: #5CC8FF; color: #04223A; font-size: 11px; font-style: normal; font-weight: 800; }
.fu-steps { position: relative; display: grid; gap: 4px; margin: 0; padding: 8px 14px 16px; list-style: none; }
.fu-steps::before { content: ""; position: absolute; left: 29px; top: 26px; bottom: 34px; width: 2px; background: repeating-linear-gradient(rgba(255, 178, 62, .5) 0 4px, transparent 4px 8px); }
.fu-steps li { position: relative; display: flex; align-items: center; gap: 12px; padding: 7px 0; }
.fu-steps i { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: #3A2414; color: var(--amber); box-shadow: inset 0 0 0 1px rgba(255, 178, 62, .35); }
.fu-steps .sent i { background: linear-gradient(160deg, #F2FF9C, var(--acid) 60%, #A9E13A); color: #0B1D12; box-shadow: 0 0 16px -4px rgba(214, 242, 60, .7); }
.fu-steps .ic { width: 16px; height: 16px; }
.fu-steps span { display: grid; line-height: 1.2; }
.fu-steps b { font-size: 13px; color: #fff; }
.fu-steps small { color: var(--muted-d); font-size: 11.5px; }
/* callouts */
.callout { position: absolute; z-index: 2; padding: 12px 14px; border-radius: 16px; background: linear-gradient(180deg, #FFFFFF, #FFF8EC); box-shadow: 0 0 0 1px rgba(255, 194, 61, .35), 0 24px 44px -18px rgba(0, 0, 0, .75); color: var(--ink); font-size: 13.5px; line-height: 1.3; }
.co-label { display: inline-flex; align-items: center; gap: 7px; color: #B25B00; font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.co-label .ic { width: 13px; height: 13px; }
.co-sent { right: 40px; top: 318px; width: 230px; }
.co-sent p { margin: 6px 0 0; font-weight: 700; }

/* floor pins */
.floor-pins { position: absolute; inset: 0; z-index: 0; display: none; pointer-events: none; opacity: .28; filter: saturate(.7); }
.fp { position: absolute; left: var(--x); top: var(--y); display: grid; place-items: center; width: calc(34px * var(--s)); height: calc(34px * var(--s)); border-radius: 50% 50% 50% 0; background: linear-gradient(160deg, #6FE08A, #2FB25A); color: #04210C; font-size: calc(12px * var(--s)); font-weight: 800; transform: translateX(-50%) rotate(-45deg); box-shadow: 0 0 16px rgba(47, 178, 90, .45); }
.fp.r3 { background: linear-gradient(160deg, #F2FF9C, var(--acid)); }
.fp.r4, .fp.r5 { background: linear-gradient(160deg, #FFE9A0, var(--gold) 55%, var(--amber-2)); box-shadow: 0 0 16px rgba(255, 166, 40, .5); }
.fp.r-out { background: linear-gradient(160deg, #FF9C88, var(--coral)); box-shadow: 0 0 16px rgba(240, 97, 74, .45); font-size: calc(10px * var(--s)); }
.fp::after { content: ""; position: absolute; left: 50%; top: 50%; width: 120%; height: 40%; }

@media (min-width: 1280px) {
    .props-l, .props-r, .floor-pins { display: block; }
}
@media (min-width: 1280px) and (max-width: 1499px) {
    .props-l { left: 14px; transform: scale(.8); transform-origin: 0 0; }
    .props-r { right: 14px; transform: scale(.8); transform-origin: 100% 0; }
}


/* ==========================================================
   SECTIONS (shared)
   ========================================================== */
.sec { position: relative; isolation: isolate; padding: 130px 0 150px; color: var(--body-l); }
.sec.dark { color: var(--body-d); }
.sec-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.s-head { position: relative; z-index: 2; max-width: 920px; margin: 0 auto; text-align: center; }
.kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 7px 15px 7px 11px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 700; line-height: 1.25; }
.kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px rgba(255, 178, 62, .28); }
.dark .kicker { background: rgba(255, 178, 62, .1); box-shadow: inset 0 0 0 1px rgba(255, 178, 62, .4); color: #FFE2B0; }
.s-title { margin: 0; color: var(--ink); font-family: var(--f-display); font-size: clamp(38px, 5.2vw, 76px); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.dark .s-title { color: #fff; }
.mk { padding: 0 .06em; background: linear-gradient(transparent 58%, rgba(255, 196, 77, .9) 58%, rgba(255, 196, 77, .9) 90%, transparent 90%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hl-g { background: linear-gradient(180deg, #FFF1B8 0%, #FFD45C 45%, #F59E1B 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .03em; }
.s-lede { max-width: 640px; margin: 20px auto 0; font-size: 18.5px; line-height: 1.55; text-wrap: balance; }
.dark .s-lede { color: var(--muted-d); }
/* decorative floating squircles in light sections */
.sq { position: absolute; width: var(--w); aspect-ratio: 1; border-radius: 30%; border: 1.5px solid rgba(255, 159, 28, .16); transform: rotate(var(--r)); }
.sq::after { content: ""; position: absolute; inset: 27%; border-radius: 50%; border: 1.5px solid rgba(255, 159, 28, .16); }

/* "Real app" chip */
.real { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; padding: 3px 9px 3px 7px; border-radius: 999px; background: var(--ink); color: #fff; font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; vertical-align: 2px; }
.real::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #FF5A4E; box-shadow: 0 0 0 3px rgba(255, 90, 78, .25); }
.dark .real { background: rgba(255, 255, 255, .1); }

/* app window + looping clip */
.win { position: relative; overflow: hidden; border-radius: 16px; background: #120A05; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.win-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #1E130B; color: #CDB79C; font-family: var(--f-mono); font-size: 11px; font-weight: 500; white-space: nowrap; overflow: hidden; }
.win-bar i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #FF6159; }
.win-bar i:nth-child(2) { background: #FFBE2F; }
.win-bar i:nth-child(3) { background: #2ACA44; margin-right: 8px; }
.win-bar span { overflow: hidden; text-overflow: ellipsis; }
.win-vid { position: relative; aspect-ratio: 16 / 9; background: #F5F5F2; }
.win-vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-toggle { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.lp-toggle::before { content: ""; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 5.2c0-.8.9-1.3 1.6-.9l9.3 5.9c.6.4.6 1.3 0 1.7l-9.3 5.9c-.7.4-1.6-.1-1.6-.9z' fill='%230E1A06'/%3E%3C/svg%3E") 56% 50% / 26px 26px no-repeat; box-shadow: 0 0 0 8px rgba(198, 246, 137, .3), 0 12px 24px -8px rgba(0, 0, 0, .5); opacity: 0; transform: scale(.85); transition: opacity .25s, transform .25s var(--ease); }
[data-loop].is-paused .lp-toggle::before { opacity: 1; transform: none; }
[data-loop]:not(.is-paused) .lp-toggle:hover::before { opacity: .9; transform: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5h3v14H8zM13 5h3v14h-3z' fill='%230E1A06'/%3E%3C/svg%3E"); background-position: 50% 50%; }
.clip figcaption, .up-media figcaption { margin-top: 14px; font-size: 14.5px; line-height: 1.5; }
.clip { margin: 0; }

/* colour themes per card / row */
.c-sky { --c1: #9BD0FF; --c2: #4F8DF7; --tint: #EDF5FF; --deep: #1F5FD0; }
.c-peach { --c1: #FFC1A6; --c2: #FF7A59; --tint: #FFF0E9; --deep: #D2502F; }
.c-mint { --c1: #9FE8C0; --c2: #2FB27A; --tint: #E8F8EF; --deep: #1D8A57; }
.c-amber { --c1: #FFDA8F; --c2: #FF9F1C; --tint: #FFF4E0; --deep: #C26A00; }
.c-lime { --c1: #DDFA9A; --c2: #7BCB3A; --tint: #F1FAE2; --deep: #4E9A1C; }


/* ==========================================================
   SEAMS (FE HUD edge: cut corners, centre tab, rails, chevrons)
   ========================================================== */
.seam { --cut: 46px; --r1: #FFB23E; --r2: #C6F689; --chev: #FFB23E; --glow1: rgba(255, 178, 62, .7); --glow2: rgba(198, 246, 137, .6); position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: 60px; pointer-events: none; }
.seam-light { --r1: #E38A12; --r2: #7BCB3A; --chev: #E38A12; --glow1: transparent; --glow2: transparent; }
.seam-c { position: absolute; top: -1px; width: var(--cut); height: calc(var(--cut) + 1px); background: var(--above); }
.seam-cl { left: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
.seam-cr { right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.seam-c::after { content: ""; position: absolute; top: 50%; left: 50%; width: calc(var(--cut) * 1.42); height: 2px; margin: -1px 0 0 calc(var(--cut) * -.71); background: var(--r1); box-shadow: 0 0 10px var(--glow1); }
.seam-cl::after { transform: rotate(-45deg); }
.seam-cr::after { transform: rotate(45deg); background: var(--r2); box-shadow: 0 0 10px var(--glow2); }
.seam-tab { position: absolute; left: 50%; top: -1px; width: 400px; height: 19px; margin-left: -200px; background: var(--above); clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 18px 100%); }
.seam-tab::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--r1), var(--r2)); box-shadow: 0 0 10px var(--glow1); }
.seam-l, .seam-r { position: absolute; top: 12px; height: 8px; }
.seam-l { left: calc(var(--cut) + 14px); right: calc(50% + 214px); background: radial-gradient(circle, var(--r1) 0 3.5px, transparent 4px) right center / 8px 8px no-repeat, linear-gradient(var(--r1), var(--r1)) right 6px center / 36% 2px no-repeat, repeating-linear-gradient(110deg, var(--r1) 0 2px, transparent 2px 6px) left center / 56% 6px no-repeat; filter: drop-shadow(0 0 4px var(--glow1)); }
.seam-r { left: calc(50% + 214px); right: calc(var(--cut) + 14px); background: radial-gradient(circle, var(--r2) 0 3.5px, transparent 4px) left center / 8px 8px no-repeat, linear-gradient(var(--r2), var(--r2)) left 6px center / 36% 2px no-repeat, repeating-linear-gradient(110deg, var(--r2) 0 2px, transparent 2px 6px) right center / 56% 6px no-repeat; filter: drop-shadow(0 0 4px var(--glow2)); }
.seam-chev { position: absolute; left: 50%; top: -60px; width: 34px; height: 40px; margin-left: -17px; fill: none; stroke: var(--chev); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; animation: seam-chev 1.8s var(--ease) infinite; }
@keyframes seam-chev { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (max-width: 767px) {
    .seam { --cut: 26px; }
    .seam-tab { width: 180px; margin-left: -90px; height: 14px; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 14px 100%); }
    .seam-tab::after { left: 14px; right: 14px; }
    .seam-l { right: calc(50% + 100px); left: calc(var(--cut) + 10px); }
    .seam-r { left: calc(50% + 100px); right: calc(var(--cut) + 10px); }
    .seam-chev { top: -50px; width: 28px; height: 33px; margin-left: -14px; }
}


/* ==========================================================
   SECTION 2 — YOUR ACCOUNT, AS IT IS TODAY (light)
   ========================================================== */
.s2-bg { -webkit-mask-image: linear-gradient(#000 calc(100% - 300px), transparent calc(100% - 130px)); mask-image: linear-gradient(#000 calc(100% - 300px), transparent calc(100% - 130px)); background: radial-gradient(700px 420px at 12% 12%, rgba(255, 193, 166, .45), transparent 70%), radial-gradient(760px 460px at 90% 20%, rgba(155, 208, 255, .38), transparent 70%), radial-gradient(900px 500px at 50% 70%, rgba(255, 218, 143, .35), transparent 70%); }
.sq1 { --w: 300px; --r: -14deg; left: -120px; top: 420px; }
.sq2 { --w: 240px; --r: 12deg; right: -90px; top: 900px; }
@media (min-width: 1200px) { .s2-badge { display: flex; } }


/* ==========================================================
   SECTION 3 — FOUR UPGRADES (dark)
   ========================================================== */
.s-adds { background: #120A05; }
.s3-bg { -webkit-mask-image: linear-gradient(transparent, #000 160px, #000 calc(100% - 300px), transparent calc(100% - 130px)); mask-image: linear-gradient(transparent, #000 160px, #000 calc(100% - 300px), transparent calc(100% - 130px)); background: radial-gradient(900px 480px at 50% 6%, rgba(255, 166, 40, .2), transparent 70%), radial-gradient(700px 600px at 92% 30%, rgba(139, 92, 246, .14), transparent 70%), radial-gradient(700px 600px at 6% 55%, rgba(79, 141, 247, .13), transparent 70%), radial-gradient(700px 600px at 94% 80%, rgba(123, 203, 58, .12), transparent 70%); }
.gm3 { --w: 460px; --r: -12deg; left: -240px; top: 26%; }
.gm4 { --w: 520px; --r: 10deg; right: -280px; top: 62%; }
.up { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center; gap: 70px; margin-top: 120px; }
.s-head + .up { margin-top: 84px; }
.up-flip .up-copy { order: 2; }
.up-num { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.up-num b { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 30%; background: linear-gradient(160deg, var(--c1), var(--c2)); color: #150C04; font-family: var(--f-display); font-size: 26px; font-weight: 800; letter-spacing: -.04em; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), 0 0 30px -6px var(--c2); transform: rotate(-6deg); }
.up-num span { color: var(--c1); font-family: var(--f-mono); font-size: 13.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.up h3 { margin: 0; color: #fff; font-family: var(--f-display); font-size: clamp(30px, 3.2vw, 46px); font-weight: 800; line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
.up-copy > p { margin: 18px 0 0; font-size: 17.5px; }
.punch { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: 18px; background: linear-gradient(120deg, color-mix(in srgb, var(--c2) 22%, transparent), color-mix(in srgb, var(--c2) 6%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c1) 40%, transparent); color: #fff; font-size: 17.5px; font-weight: 700; line-height: 1.4; }
.punch i { display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin-top: -2px; border-radius: 50%; background: var(--c1); color: #150C04; }
.punch .ic { width: 16px; height: 16px; }
.up-copy > p.up-small { color: var(--muted-d); font-size: 15.5px; }
.note { display: flex; gap: 12px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 178, 62, .08); box-shadow: inset 0 0 0 1px rgba(255, 178, 62, .28); color: #E6D3BA; font-size: 15px !important; line-height: 1.5; }
.note .ic { width: 20px; height: 20px; margin-top: 1px; color: var(--amber); }
.note b { color: #FFE2B0; }
.up-media { position: relative; margin: 0; }
.up-frame { position: relative; padding: 12px; border-radius: 28px; background: linear-gradient(140deg, var(--c1), var(--c2)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 50px 100px -40px color-mix(in srgb, var(--c2) 75%, transparent), 0 30px 60px -30px #000; transform: rotate(1deg); }
.up-flip .up-frame { transform: rotate(-1deg); }
.up-media figcaption { padding: 0 6px; color: var(--muted-d); }
/* 01: the plan table crop, the Pro column ringed */
/* 02 */
/* 03 */
/* 04 */
.gridcmp { display: flex; align-items: flex-end; gap: 22px; margin: 22px 0 6px; }
.gc { display: grid; justify-items: center; gap: 10px; }
.gc-dots { display: block; border-radius: 12px; background-color: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.gc-5 .gc-dots { width: 76px; height: 76px; background-image: radial-gradient(circle, #C6F689 0 40%, transparent 44%); background-size: 20% 20%; padding: 4px; background-origin: content-box; }
.gc em { color: #F2DEC0; font-family: var(--f-mono); font-size: 12.5px; font-style: normal; font-weight: 600; letter-spacing: .06em; }
.gc-vs { margin-bottom: 64px; color: var(--muted-d); font-family: var(--f-display); font-size: 20px; font-weight: 800; }


/* ==========================================================
   SECTION 4 — LIMITS, SHARING, LEADS (light)
   ========================================================== */
.s4-bg { -webkit-mask-image: linear-gradient(#000 calc(100% - 300px), transparent calc(100% - 130px)); mask-image: linear-gradient(#000 calc(100% - 300px), transparent calc(100% - 130px)); background: radial-gradient(760px 460px at 10% 30%, rgba(205, 191, 255, .4), transparent 70%), radial-gradient(760px 460px at 92% 22%, rgba(255, 218, 143, .45), transparent 70%), radial-gradient(800px 500px at 60% 85%, rgba(155, 208, 255, .3), transparent 70%); }
.sq3 { --w: 280px; --r: 14deg; right: -100px; top: 120px; }
.sq4 { --w: 220px; --r: -10deg; left: -80px; top: 760px; }


/* ==========================================================
   SECTION 5 — SCREENS + BASIC VS PRO (dark)
   ========================================================== */
.s-look { background: #100905; }
.s5-bg { -webkit-mask-image: linear-gradient(transparent, #000 160px, #000 calc(100% - 300px), transparent calc(100% - 130px)); mask-image: linear-gradient(transparent, #000 160px, #000 calc(100% - 300px), transparent calc(100% - 130px)); background: radial-gradient(900px 460px at 50% 4%, rgba(255, 166, 40, .18), transparent 70%), radial-gradient(800px 600px at 8% 30%, rgba(139, 92, 246, .1), transparent 70%), radial-gradient(1000px 700px at 50% 76%, rgba(255, 166, 40, .14), transparent 70%); }
.shot { display: grid; gap: 12px; padding: 0; border: 0; background: none; text-align: left; cursor: zoom-in; }
.sh-win { position: relative; display: block; overflow: hidden; border-radius: 16px; background: #1E130B; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 0 0 4px color-mix(in srgb, var(--c2) 0%, transparent), 0 30px 50px -30px #000; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.sh-win .win-bar { height: 24px; }
.sh-win img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; }
.sh-win::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 3px; background: linear-gradient(90deg, var(--c1), var(--c2)); }
.sh-zoom { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--lime); color: #0E1A06; box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .6); transform: scale(.9); transition: transform .3s var(--ease); }
.sh-zoom .ic { width: 18px; height: 18px; }
.sh-cap { padding: 0 4px; color: #F2E3CE; font-size: 15px; font-weight: 600; line-height: 1.4; }
.shot:hover .sh-win { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 0 0 4px color-mix(in srgb, var(--c2) 55%, transparent), 0 40px 60px -30px #000, 0 0 50px -16px var(--c2); }
.shot:hover .sh-zoom { transform: scale(1.06); }
.vs-panel { position: relative; max-width: 1000px; margin: 56px auto 0; padding: 26px 22px 20px; border-radius: 28px; background: linear-gradient(180deg, #22140B, #160C06); box-shadow: inset 0 0 0 1px rgba(255, 178, 62, .24), 0 60px 110px -50px #000, 0 0 100px -50px rgba(255, 166, 40, .5); }
.hud-rail { position: absolute; top: -1px; height: 8px; width: 26%; }
.hr-l { left: 40px; background: repeating-linear-gradient(110deg, var(--amber) 0 2px, transparent 2px 6px); opacity: .6; }
.hr-r { right: 40px; background: linear-gradient(var(--lime), var(--lime)) left center / 70% 2px no-repeat, radial-gradient(circle, var(--lime) 0 3.5px, transparent 4px) right center / 8px 8px no-repeat; filter: drop-shadow(0 0 4px rgba(198, 246, 137, .6)); }
.vs-scroll { overflow-x: auto; }
.vs-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 16px; }
.vs-table th, .vs-table td { padding: 16px 18px; border-bottom: 1px solid rgba(255, 255, 255, .07); vertical-align: middle; }
.vs-table thead th { padding-top: 18px; padding-bottom: 18px; border-bottom: 0; }
.vt-f { color: var(--muted-d); font-family: var(--f-mono); font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-align: left; text-transform: uppercase; }
.vs-table thead .vt-b, .vs-table thead .vt-p { width: 30%; text-align: center; }
.vt-name { display: block; font-family: var(--f-display); font-size: 26px; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.vs-table thead small { display: block; font-size: 13px; font-weight: 600; }
.vs-table thead .vt-b { color: #E9D8C4; }
.vs-table thead .vt-b small { color: var(--muted-d); }
.vs-table thead .vt-p { position: relative; border-radius: 20px 20px 0 0; background: linear-gradient(180deg, #FFE9A0, var(--gold) 60%, #F5A21B); color: #2B1600; box-shadow: 0 -10px 40px -10px rgba(255, 166, 40, .55); }
.vt-crown { position: absolute; left: 50%; top: -20px; display: grid; place-items: center; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; background: #2B1600; color: var(--gold); box-shadow: 0 0 0 4px #FFD45C; }
.vt-crown .ic { width: 20px; height: 20px; }
.vs-table thead .vt-p .vt-name { margin-top: 8px; }
.vs-table tbody th { color: #F6E8D4; font-size: 16px; font-weight: 600; text-align: left; line-height: 1.35; }
.ti { display: inline-grid; place-items: center; width: 32px; height: 32px; margin: -4px 12px -4px 0; border-radius: 10px; vertical-align: middle; color: #150C04; }
.ti .ic { width: 17px; height: 17px; }
.t-amber { background: linear-gradient(160deg, #FFDA8F, #FF9F1C); }
.t-violet { background: linear-gradient(160deg, #CDBFFF, #8B5CF6); }
.t-sky { background: linear-gradient(160deg, #9BD0FF, #4F8DF7); }
.t-mint { background: linear-gradient(160deg, #9FE8C0, #2FB27A); }
.t-lime { background: linear-gradient(160deg, #DDFA9A, #7BCB3A); }
.t-gold { background: linear-gradient(160deg, #FFF0B8, #FFC23D); }
.t-rose { background: linear-gradient(160deg, #FFC2D6, #F2558A); }
.vs-table tbody td { text-align: center; line-height: 1.35; }
.vs-table tbody .vt-b { color: #CDB79C; font-size: 15px; }
.vs-table tbody .vt-b b { color: #E9D8C4; font-family: var(--f-display); font-size: 24px; font-weight: 800; }
.vs-table tbody .vt-p { background: rgba(255, 194, 61, .09); box-shadow: inset 1.5px 0 0 rgba(255, 194, 61, .45), inset -1.5px 0 0 rgba(255, 194, 61, .45); color: #fff; }
.vs-table tbody tr:last-child .vt-p { border-radius: 0 0 20px 20px; box-shadow: inset 1.5px 0 0 rgba(255, 194, 61, .45), inset -1.5px 0 0 rgba(255, 194, 61, .45), inset 0 -1.5px 0 rgba(255, 194, 61, .45); }
.vs-table tbody tr:last-child th, .vs-table tbody tr:last-child td { border-bottom: 0; }
.vs-table tbody .vt-p b { background: linear-gradient(180deg, #FFF1B8, #FFD45C 45%, #F59E1B); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: var(--f-display); font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.vs-table tbody .vt-p b.vt-sm { font-size: 19px; letter-spacing: -.01em; }
.vt-pill { display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(255, 194, 61, .16); box-shadow: inset 0 0 0 1px rgba(255, 194, 61, .4); color: #FFE08A; font-size: 14.5px; font-weight: 700; }
.vt-ck { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #E9D8C4; }
.vt-p .vt-ck { background: linear-gradient(160deg, #F2FF9C, var(--acid) 60%, #A9E13A); color: #0E1A06; box-shadow: 0 0 16px -4px rgba(214, 242, 60, .7); }
.vt-ck .ic { width: 16px; height: 16px; }
.vs-foot { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 0; color: var(--muted-d); font-size: 14px; }
.vs-foot .ic { width: 17px; height: 17px; color: var(--amber); }


/* ==========================================================
   SECTION 6 — DO THE MATH + TWO WAYS (light)
   ========================================================== */
.s-math { background: #FFFBF3; }
.s6-bg { -webkit-mask-image: linear-gradient(#000 calc(100% - 300px), transparent calc(100% - 130px)); mask-image: linear-gradient(#000 calc(100% - 300px), transparent calc(100% - 130px)); background: radial-gradient(800px 460px at 50% 14%, rgba(255, 218, 143, .5), transparent 70%), radial-gradient(700px 500px at 6% 60%, rgba(159, 232, 192, .35), transparent 70%), radial-gradient(700px 500px at 96% 70%, rgba(255, 193, 166, .35), transparent 70%); }
.sq5 { --w: 260px; --r: -10deg; left: -110px; top: 200px; }
.sq6 { --w: 300px; --r: 12deg; right: -120px; top: 1100px; }
.pace { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; max-width: 1060px; margin: 60px auto 0; }
.pc-in { position: relative; display: flex; flex-direction: column; padding: 34px 32px 28px; border-radius: 28px; background: radial-gradient(420px 260px at 20% 0, rgba(255, 166, 40, .25), transparent 70%), linear-gradient(160deg, #2E1A0C, #170D05); box-shadow: 0 0 0 1px rgba(255, 178, 62, .3), 0 50px 90px -40px rgba(60, 25, 0, .8); color: #F6E8D4; }
.hud-c { position: absolute; right: 18px; top: 18px; width: 22px; height: 22px; border-top: 3px solid var(--amber); border-right: 3px solid var(--amber); border-radius: 0 8px 0 0; filter: drop-shadow(0 0 5px rgba(255, 178, 62, .6)); }
.pc-label { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #fff; font-family: var(--f-display); font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.pc-label output { display: grid; place-items: center; flex: none; min-width: 64px; height: 64px; padding: 0 10px; border-radius: 30%; background: linear-gradient(160deg, #FFE9A0, var(--gold) 55%, var(--amber-2)); color: #2B1600; font-size: 34px; letter-spacing: -.04em; box-shadow: 0 0 30px -6px rgba(255, 166, 40, .8); transform: rotate(-6deg); }
input[type=range] { --p: 0%; width: 100%; height: 30px; margin: 30px 0 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--amber-2)) 0 0 / var(--p) 100% no-repeat, rgba(255, 255, 255, .12); }
input[type=range]::-moz-range-track { height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--amber-2)) 0 0 / var(--p) 100% no-repeat, rgba(255, 255, 255, .12); }
input[type=range]::-webkit-slider-thumb { width: 32px; height: 32px; margin-top: -10px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(255, 178, 62, .35), 0 6px 14px rgba(0, 0, 0, .45); -webkit-appearance: none; appearance: none; }
input[type=range]::-moz-range-thumb { width: 32px; height: 32px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(255, 178, 62, .35), 0 6px 14px rgba(0, 0, 0, .45); }
.pc-scale { display: flex; justify-content: space-between; margin: 10px 4px 0; color: #9C8873; font-family: var(--f-mono); font-size: 12px; }
.pc-scale i { width: 16px; font-style: normal; text-align: center; }
.pc-note { margin: auto 0 0; padding-top: 26px; color: var(--muted-d); font-size: 14.5px; line-height: 1.5; }
.pc-out { padding: 30px 32px 26px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px #F0E2CB, 0 50px 90px -50px rgba(120, 70, 0, .45); }
.meter + .meter { margin-top: 20px; }
.m-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.m-top b { color: var(--ink); font-size: 16px; }
.m-top em { font-size: 15px; font-style: normal; font-weight: 700; white-space: nowrap; }
.m-b em { color: #D93F2A; }
.m-p em { color: #2E8A2E; }
.m-track { display: block; height: 16px; overflow: hidden; border-radius: 999px; background: #F3E9DA; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08); }
.m-track i { display: block; width: 0; height: 100%; border-radius: inherit; transition: width .5s var(--ease); }
.m-b .m-track i { background: linear-gradient(90deg, #FF9C88, var(--coral)); }
.m-p .m-track i { background: linear-gradient(90deg, var(--gold), var(--amber-2)); box-shadow: 0 0 14px rgba(255, 166, 40, .6); }
.red { color: #D93F2A; }
.grn { color: #2E8A2E; }
.pc-pace { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: 18px; background: #FFF4E0; box-shadow: inset 0 0 0 1px #FFE0A8; font-size: 15px; line-height: 1.45; }
.pp-ic { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(160deg, #FFE9A0, var(--gold) 55%, var(--amber-2)); color: #2B1600; }
.pp-ic .ic { width: 19px; height: 19px; }
.pc-pace b { display: block; color: var(--ink); font-size: 15.5px; }
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; max-width: 1060px; margin: 56px auto 0; }
.way { position: relative; padding: 30px 32px 28px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px #F0E2CB, 0 50px 90px -50px rgba(120, 70, 0, .45); }
.way::before { content: ""; position: absolute; left: 32px; right: 32px; top: -1px; height: 4px; border-radius: 0 0 6px 6px; background: linear-gradient(90deg, var(--gold), var(--amber-2)); }
.way-k { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-family: var(--f-mono); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.way-k b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--ink); color: var(--gold); font-family: var(--f-display); font-size: 15px; letter-spacing: 0; }
.way-big { margin: 18px 0 6px; background: linear-gradient(180deg, #FFB02E, #D96C00); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: var(--f-display); font-size: 84px; font-weight: 800; line-height: 1; letter-spacing: -.05em; }
.slots40 { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 5px; margin: 20px 0 0; }
.slots40 i { aspect-ratio: 1; border-radius: 30%; background: linear-gradient(160deg, #FFE9A0, var(--gold) 55%, var(--amber-2)); -webkit-mask: radial-gradient(circle, transparent 22%, #000 calc(22% + .5px)); mask: radial-gradient(circle, transparent 22%, #000 calc(22% + .5px)); }
.way-txt { margin: 18px 0 0; font-size: 15.5px; line-height: 1.5; }
.way-fine { margin: 12px 0 0; color: var(--muted-l); font-size: 13.5px; }


/* ==========================================================
   SECTION 7 — IS PRO FOR YOU? (dark)
   ========================================================== */
.s-fit { background: #130B06; }
.s7-bg { -webkit-mask-image: linear-gradient(transparent, #000 160px, #000 calc(100% - 300px), transparent calc(100% - 130px)); mask-image: linear-gradient(transparent, #000 160px, #000 calc(100% - 300px), transparent calc(100% - 130px)); background: radial-gradient(900px 460px at 50% 6%, rgba(255, 166, 40, .18), transparent 70%), radial-gradient(700px 600px at 18% 60%, rgba(61, 203, 90, .12), transparent 70%), radial-gradient(700px 600px at 84% 60%, rgba(240, 97, 74, .1), transparent 70%); }
.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: 1020px; margin: 64px auto 0; }
.fc { position: relative; border-radius: 26px; background: linear-gradient(180deg, #22150C, #180E07); box-shadow: inset 0 0 0 1px var(--fc-line), 0 50px 90px -50px #000; }
.fc-yes { --fc: #3DCB5A; --fc2: #1F8A3C; --fc-line: rgba(61, 203, 90, .35); }
.fc-skip { --fc: #FF8A6B; --fc2: #D2502F; --fc-line: rgba(255, 138, 107, .3); }
.fc h3 { margin: 0; padding: 24px 30px 22px; border-radius: 26px 26px 0 0; background: linear-gradient(135deg, var(--fc), var(--fc2)); color: #fff; font-family: var(--f-display); font-size: 27px; font-weight: 800; letter-spacing: -.025em; text-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.fc-badge { position: absolute; right: 24px; top: -22px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 30%; background: #fff; color: var(--fc2); box-shadow: 0 0 0 5px color-mix(in srgb, var(--fc) 35%, transparent), 0 12px 24px -8px #000; transform: rotate(8deg); }
.fc-badge .ic { width: 24px; height: 24px; }
.fc ul { margin: 0; padding: 10px 30px 18px; list-style: none; }
.fc li { display: flex; align-items: flex-start; gap: 14px; padding: 15px 0; border-bottom: 1px dashed rgba(255, 255, 255, .1); color: #F2E3CE; font-size: 16.5px; font-weight: 600; line-height: 1.4; }
.fc li:last-child { border-bottom: 0; }
.fc li i { display: grid; place-items: center; flex: none; width: 26px; height: 26px; margin-top: -1px; border-radius: 50%; background: color-mix(in srgb, var(--fc) 22%, transparent); color: var(--fc); }
.fc-yes li i { background: var(--fc); color: #062A0E; }
.fc li .ic { width: 14px; height: 14px; }


/* ==========================================================
   SECTION 8 — SAME TRAINING + GUARANTEE (light)
   ========================================================== */
.s-safe { background: #FFF7EA; }
.s8-bg { -webkit-mask-image: linear-gradient(#000 calc(100% - 300px), transparent calc(100% - 130px)); mask-image: linear-gradient(#000 calc(100% - 300px), transparent calc(100% - 130px)); background: radial-gradient(800px 420px at 50% 10%, rgba(255, 218, 143, .5), transparent 70%), radial-gradient(700px 500px at 90% 70%, rgba(255, 193, 166, .35), transparent 70%); }
.cert { position: relative; display: grid; grid-template-columns: 270px minmax(0, 1fr); align-items: center; gap: 44px; max-width: 980px; margin: 54px auto 0; padding: 50px 56px; border-radius: 30px; background: linear-gradient(180deg, #FFFFFF, #FFFBF2); box-shadow: 0 0 0 1.5px #F2D9A6, inset 0 0 0 10px #FFFBF2, inset 0 0 0 11.5px #F4E2BE, 0 60px 100px -50px rgba(120, 70, 0, .5); }
.cert-c { position: absolute; width: 30px; height: 30px; border: 3px solid var(--amber-2); }
.cert-c.c1 { left: 22px; top: 22px; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.cert-c.c2 { right: 22px; top: 22px; border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; }
.cert-c.c3 { left: 22px; bottom: 22px; border-right: 0; border-top: 0; border-radius: 0 0 0 10px; }
.cert-c.c4 { right: 22px; bottom: 22px; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.cert-seal { display: grid; justify-items: center; gap: 4px; }
.g-seal-big { width: 230px; height: 230px; margin: 0; transform: rotate(-8deg); filter: drop-shadow(0 18px 24px rgba(120, 60, 0, .35)) drop-shadow(0 0 30px rgba(255, 194, 61, .35)); }
.cert-ribbon { position: relative; z-index: 1; margin-top: -24px; padding: 7px 16px; border-radius: 8px; background: #2B1600; color: var(--gold); font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 10px 20px -8px rgba(60, 25, 0, .7); }
.cert-txt .kicker { margin-bottom: 16px; }
.cert-title { margin: 0; color: var(--ink); font-family: var(--f-display); font-size: clamp(34px, 4vw, 54px); font-weight: 800; line-height: 1.04; letter-spacing: -.04em; }
.cert-txt p { margin: 18px 0 0; font-size: 17.5px; line-height: 1.6; }
.cert-txt a { color: #B85F00; font-weight: 700; text-underline-offset: 3px; }


/* ==========================================================
   SECTION 9 — FAQ (light)
   ========================================================== */
.s-faq { background: #F7FAEE; padding-bottom: 160px; }
.s9-bg { -webkit-mask-image: linear-gradient(#000 calc(100% - 300px), transparent calc(100% - 130px)); mask-image: linear-gradient(#000 calc(100% - 300px), transparent calc(100% - 130px)); background: radial-gradient(800px 400px at 50% 8%, rgba(198, 246, 137, .35), transparent 70%), radial-gradient(620px 520px at 4% 60%, rgba(255, 218, 143, .3), transparent 70%), radial-gradient(620px 520px at 96% 50%, rgba(255, 218, 143, .3), transparent 70%); }
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; max-width: 1140px; margin: 56px auto 0; }
.faq-col { display: grid; gap: 14px; }
.faq details { --cc: 16px; position: relative; isolation: isolate; padding: 1.5px; background: linear-gradient(135deg, #F0D9AE, #E7DDCB 45%, #E7DDCB); clip-path: polygon(var(--cc) 0, 100% 0, 100% calc(100% - var(--cc)), calc(100% - var(--cc)) 100%, 0 100%, 0 var(--cc)); transition: background .3s; }
.faq details::before { content: ""; position: absolute; inset: 1.5px; z-index: -1; background: #fff; clip-path: polygon(calc(var(--cc) - .6px) 0, 100% 0, 100% calc(100% - var(--cc) + .6px), calc(100% - var(--cc) + .6px) 100%, 0 100%, 0 calc(var(--cc) - .6px)); }
.faq details[open] { background: linear-gradient(135deg, var(--amber-2), #FFD36B 40%, #B9EE6E); }
.faq details[open]::before { background: linear-gradient(180deg, #FFFCF4, #fff); }
.faq summary { display: flex; align-items: center; gap: 14px; padding: 17px 54px 17px 18px; color: var(--ink); font-size: 16.5px; font-weight: 700; line-height: 1.35; list-style: none; cursor: pointer; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary b { display: grid; place-items: center; flex: none; width: 34px; height: 30px; border-radius: 9px; background: #F4EBDD; color: #8A6A3C; font-family: var(--f-mono); font-size: 12px; font-weight: 600; }
.faq details[open] summary b { background: linear-gradient(160deg, #FFE9A0, var(--gold) 55%, var(--amber-2)); color: #2B1600; }
.faq summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: #F4EBDD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%23B85F00' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%23FFC23D' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.fq-a p { margin: 0; padding: 0 22px 20px 66px; font-size: 15.5px; line-height: 1.6; }
.fq-a a { color: #B85F00; font-weight: 700; }


/* ==========================================================
   SECTION 10 — ADD PRO TO YOUR ACCOUNT (dark, final offer)
   ========================================================== */
.s-final { overflow: clip; background: #0D0804; padding-bottom: 170px; }
.s10-bg { background: radial-gradient(1000px 520px at 50% 6%, rgba(255, 166, 40, .22), transparent 70%), radial-gradient(900px 600px at 30% 60%, rgba(255, 140, 20, .16), transparent 70%), radial-gradient(700px 500px at 80% 50%, rgba(198, 246, 137, .07), transparent 70%); }
.fin-floor { position: absolute; left: -20%; right: -20%; bottom: 0; height: 520px; background: linear-gradient(rgba(255, 178, 62, .45) 1.5px, transparent 1.5px) 0 0 / 100% 46px, linear-gradient(90deg, rgba(255, 178, 62, .45) 1.5px, transparent 1.5px) 50% 0 / 84px 100%; transform: perspective(500px) rotateX(58deg); transform-origin: 50% 100%; -webkit-mask-image: linear-gradient(transparent, #000 70%); mask-image: linear-gradient(transparent, #000 70%); opacity: .4; }
.fin { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: 46px; max-width: 1080px; margin: 64px auto 0; }
.fin-box { position: relative; isolation: isolate; display: grid; justify-items: center; }
.fin-box img { position: relative; z-index: 1; width: min(100%, 420px); height: auto; filter: drop-shadow(0 40px 40px rgba(0, 0, 0, .55)) drop-shadow(0 0 60px rgba(255, 150, 30, .35)); animation: box-float 6s ease-in-out infinite; }
@keyframes box-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.fb-rings { position: absolute; left: 50%; bottom: -30px; width: 440px; height: 130px; margin-left: -220px; }
.fb-rings i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 178, 62, .55); box-shadow: 0 0 30px rgba(255, 166, 40, .35), inset 0 0 30px rgba(255, 166, 40, .25); }
.fb-rings i:nth-child(2) { inset: 18px 50px; border-color: rgba(198, 246, 137, .5); }
.fb-rings i:nth-child(3) { inset: 36px 100px; background: radial-gradient(closest-side, rgba(255, 178, 62, .6), transparent); border-color: rgba(255, 210, 120, .7); }
.fin-card { position: relative; padding: 40px 40px 30px; border: 1.5px solid transparent; border-radius: 32px; background: linear-gradient(160deg, #FFFFFF, #FFFBF3 60%, #FFF3DE) padding-box, linear-gradient(135deg, #FFD36B, #FF9F1C 40%, rgba(255, 255, 255, .6) 68%, #B9EE6E) border-box; box-shadow: 0 0 0 8px rgba(255, 178, 62, .16), 0 0 120px -20px rgba(255, 166, 40, .55), 0 60px 100px -40px #000; color: var(--body-l); }
.fin-price { display: flex; align-items: baseline; gap: 12px; margin: 6px 0 0; }
.fin-price b { color: var(--ink); font-family: var(--f-display); font-size: 74px; font-weight: 800; line-height: 1; letter-spacing: -.05em; }
.fin-price span { padding: 5px 12px; border-radius: 999px; background: var(--ink); color: var(--gold); font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; transform: translateY(-10px); }
.fin-list { display: grid; gap: 10px; margin: 20px 0 0; padding: 20px 0 0; border-top: 1px dashed #EADCC6; list-style: none; }
.fin-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.4; }
.fin-list li b { color: var(--ink); }
.fin-list i { display: grid; place-items: center; flex: none; width: 24px; height: 24px; margin-top: -1px; border-radius: 50%; background: linear-gradient(160deg, #F2FF9C, var(--acid) 60%, #A9E13A); color: #0E1A06; }
.fin-list .ic { width: 13px; height: 13px; }
/* JVZoo button wrappers (LME pattern): the <a><img> inside is never touched */
.jv-wrap { position: relative; width: fit-content; max-width: 100%; margin: 26px auto 0; }
.jv-wrap::before { content: ""; position: absolute; inset: -10px; z-index: 0; border-radius: 22px; background: radial-gradient(closest-side, rgba(255, 178, 62, .45), transparent 76%); pointer-events: none; }
.jv-wrap::after { content: ""; position: absolute; inset: -4px; z-index: 2; border-radius: 16px; border: 2px solid rgba(255, 159, 28, .85); pointer-events: none; animation: jv-ring 2.2s ease-out infinite; }
@keyframes jv-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.06, 1.4); opacity: 0; } }
.jv-button { position: relative; z-index: 1; overflow: hidden; border-radius: 12px; box-shadow: 0 22px 44px -18px rgba(90, 40, 0, .55); }
.jv-button::after { content: ""; position: absolute; top: 0; left: 0; z-index: 2; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); pointer-events: none; transform: translateX(-160%) skewX(-20deg); animation: jv-shine 3.6s ease-in-out infinite; }
@keyframes jv-shine { 0% { transform: translateX(-160%) skewX(-20deg); } 55%, 100% { transform: translateX(330%) skewX(-20deg); } }
.jv-button a { display: block; line-height: 0; }
.jv-button img { display: block; width: 100%; max-width: 492px; height: auto; margin: 0 auto; }
.fin-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin: 22px 0 0; padding: 0; list-style: none; }
.fin-trust li { display: inline-flex; align-items: center; gap: 7px; color: var(--body-l); font-size: 14px; font-weight: 700; }
.fin-trust .ic { width: 16px; height: 16px; color: var(--green); }
.nothanks { display: block; width: fit-content; margin: 18px auto 0; padding: 6px 8px; color: #8A7A66; font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(138, 122, 102, .45); transition: color .2s; }
.nothanks:hover { color: var(--ink); }


/* ==========================================================
   FOOTER
   ========================================================== */
.pf-foot { position: relative; isolation: isolate; overflow: clip; padding: 70px 0 0; background: linear-gradient(180deg, #0D0804, #110A05 50%, #0A0603); color: #B5A08A; border-top: 1px solid rgba(255, 178, 62, .14); }
.pf-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(800px 360px at 50% 120px, rgba(255, 166, 40, .1), transparent 70%); }
.pf-wrap { position: relative; z-index: 1; max-width: 1080px; text-align: center; }
.pf-brand { display: grid; justify-items: center; gap: 14px; }
.pf-brand img { width: 240px; height: auto; }
.pf-legal { display: grid; gap: 16px; max-width: 980px; margin: 40px auto 0; padding: 28px 32px; border-radius: 22px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); text-align: left; }
.pf-legal p { margin: 0; font-size: 13.5px; line-height: 1.7; }
.pf-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 6px; margin-top: 30px; }
.pf-links a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; color: #E6D6C2; font-size: 14.5px; font-weight: 600; text-decoration: none; transition: background .2s, color .2s; }
.pf-links a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.pf-links a + a::before { content: ""; width: 4px; height: 4px; margin: 0 6px 0 -14px; border-radius: 50%; background: rgba(255, 178, 62, .5); }
.pf-links .pf-sup { background: rgba(198, 246, 137, .12); box-shadow: inset 0 0 0 1px rgba(198, 246, 137, .35); color: var(--lime); }
.pf-sup i { width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .25); }
.pf-copy { margin: 22px 0 0; color: #8A7663; font-size: 13.5px; }
.pf-word { position: relative; display: block; height: .62em; overflow: hidden; margin-top: 30px; color: transparent; font-family: var(--f-display); font-size: clamp(90px, 17vw, 300px); font-weight: 800; line-height: .78; letter-spacing: -.06em; text-align: center; white-space: nowrap; -webkit-text-stroke: 1.5px rgba(255, 178, 62, .16); background: linear-gradient(180deg, rgba(255, 178, 62, .14), transparent 75%); -webkit-background-clip: text; background-clip: text; pointer-events: none; user-select: none; }


/* ==========================================================
   SCREENSHOT VIEWER
   ========================================================== */
.lb { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; background: rgba(10, 6, 3, .94); }
.lb[hidden] { display: none; }
.lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; color: #F2E3CE; font-size: 15px; font-weight: 600; }
.lb-x { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; }
.lb-x .ic { width: 20px; height: 20px; }
.lb-stage { position: relative; display: flex; flex: 1; align-items: center; justify-content: center; gap: 14px; min-height: 0; padding: 0 16px 24px; }
.lb-stage img { max-width: min(1400px, calc(100vw - 150px)); max-height: 100%; height: auto; border-radius: 12px; box-shadow: 0 30px 80px -20px #000; }
.lb-nav { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border: 0; border-radius: 50%; background: var(--lime); color: #0E1A06; cursor: pointer; }
.lb-nav .ic { width: 22px; height: 22px; }
.lb-prev .ic { transform: rotate(180deg); }
body.lb-open { overflow: hidden; }


/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1439px) {
    .steps { margin-top: -26px; padding-right: 20px; font-size: 16.5px; }
    .steps li + li::before { width: 34px; margin: 0 10px 0 12px; }
    .st-ic { width: 32px; height: 32px; border-radius: 10px; }
    .st-ic .ic { width: 17px; height: 17px; }
}
@media (max-width: 1199px) {
    .up { gap: 50px; }
}
@media (max-width: 991px) {
    .h-box { padding: 36px 34px 50px; }
    .lm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .offer-card { grid-template-columns: 200px minmax(0, 1fr); gap: 30px; padding: 30px 30px 26px 24px; }
    .oc-trust { flex-wrap: wrap; }
    .up, .up-flip { grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 680px; margin-left: auto; margin-right: auto; }
    .up-flip .up-copy { order: 0; }
    .pace, .ways, .fit { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
    .cert { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 26px; padding: 44px 34px 40px; text-align: center; }
    .g-seal-big { width: 190px; height: 190px; }
    .fin { grid-template-columns: minmax(0, 1fr); max-width: 600px; gap: 30px; }
    .fin-box img { width: min(70%, 320px); }
    .fb-rings { width: 340px; margin-left: -170px; height: 100px; }
}
@media (max-width: 899px) {
    .offer-card { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 10px; padding-top: 26px; }
    .oc-box { width: 180px; margin-top: -90px; }
    .hero-offer { margin-top: 120px; }
    .oc-price { justify-content: center; }
    .oc-trust { justify-content: center; }
    .faq { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
}
@media (max-width: 767px) {
    body { font-size: 16px; }
    .sec { padding: 100px 0 110px; }
    .nav-in { flex-direction: column; gap: 14px; }
    .nav-logo img { height: 30px; }
    .osteps li { font-size: 0; gap: 0; }
    .osteps li.now { font-size: 13.5px; gap: 8px; }
    .osteps li + li::before { width: 26px; margin: 0 8px; }
    .osteps b { width: 26px; height: 26px; font-size: 12px; }
    .stage { margin-top: 40px; padding: 0 18px; }
    .vsl-frame::before { inset: -9px; }
    .limits { margin-top: 56px; padding: 20px 16px 18px; }
    .lm-head { flex-wrap: wrap; justify-content: center; }
    .lm-tile { padding: 14px 14px 13px; }
    .lm-tile b { font-size: 38px; }
    .lm-tile span { font-size: 13.5px; }
    .lm-field { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
    .offer-card { padding: 22px 18px 22px; border-radius: 26px; }
    .oc-lead { font-size: 21px; }
    .oc-price { gap: 12px; }
    .oc-price b { font-size: 56px; }
    .oc-rest { font-size: 14px; text-align: left; padding-left: 12px; }
    .oc-trust { margin-top: 14px; }
    .btn-yes { min-height: 66px; gap: 10px; padding: 8px 8px 8px 20px; font-size: 19px; }
    .by-arrow { width: 46px; height: 46px; }
    .by-arrow .ic { width: 21px; height: 21px; }
    .s-lede { font-size: 16.5px; }
    .up { margin-top: 90px; }
    .s-head + .up { margin-top: 60px; }
    .up-num b { width: 52px; height: 52px; font-size: 22px; }
    .up-copy > p, .punch { font-size: 16px; }
    .up-frame { padding: 8px; border-radius: 22px; transform: none !important; }
    .callout { position: relative; left: auto !important; right: auto !important; bottom: auto !important; top: auto; width: auto; max-width: none; margin: 14px 0 0; }
    .gridcmp { gap: 14px; }
    .gc-5 .gc-dots { width: 60px; height: 60px; }
    .gc-vs { margin-bottom: 52px; }
    .vs-panel { padding: 20px 8px 14px; border-radius: 22px; }
    .vs-table { font-size: 14px; }
    .vs-table th, .vs-table td { padding: 12px 8px; }
    .vt-f { font-size: 10.5px; letter-spacing: .1em; }
    .vt-name { font-size: 20px; }
    .vs-table thead small { font-size: 11.5px; }
    .vs-table tbody th { font-size: 13.5px; }
    .ti { display: none; }
    .vs-table tbody .vt-b { font-size: 13px; }
    .vs-table tbody .vt-b b { font-size: 20px; }
    .vs-table tbody .vt-p b { font-size: 24px; }
    .vs-table tbody .vt-p b.vt-sm { font-size: 14.5px; }
    .vt-pill { padding: 4px 8px; font-size: 12.5px; }
    .pc-in, .pc-out, .way { padding: 26px 20px 22px; border-radius: 24px; }
    .pc-label { font-size: 19px; }
    .way-big { font-size: 66px; }
    .slots40 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .fc h3 { padding: 22px 22px 20px; font-size: 24px; }
    .fc ul { padding: 6px 22px 14px; }
    .fc li { font-size: 15.5px; }
    .cert { padding: 40px 22px 34px; }
    .cert-txt p { font-size: 16px; }
    .faq summary { padding: 15px 50px 15px 14px; font-size: 15.5px; }
    .fq-a p { padding: 0 18px 18px 18px; font-size: 15px; }
    .fin-card { padding: 36px 20px 24px; border-radius: 26px; }
    .fin-price b { font-size: 60px; }
    .fin-list li { font-size: 15px; }
    .pf-brand img { width: 190px; }
    .pf-legal { margin-top: 30px; padding: 20px 18px; border-radius: 18px; }
    .pf-legal p { font-size: 12.5px; }
    .pf-links a { padding: 7px 10px; font-size: 13.5px; }
    .pf-links a + a::before { display: none; }
    .pf-word { font-size: 20.5vw; }
    .lb-stage { padding: 0 8px 16px; }
    .lb-stage img { max-width: calc(100vw - 16px); }
    .lb-nav { position: absolute; bottom: 24px; width: 44px; height: 44px; }
    .lb-prev { left: calc(50% - 54px); }
    .lb-next { right: calc(50% - 54px); }
}
@media (max-width: 400px) {
    .btn-yes { font-size: 17px; padding-left: 16px; }
    .by-arrow { width: 42px; height: 42px; }
    .oc-price b { font-size: 50px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}

/* ---- pass 2 ---- */
.s-head { max-width: 1160px; }
.s-title { font-size: clamp(38px, 4.7vw, 70px); }
.vt-rh { display: inline-flex; align-items: center; gap: 12px; }
.vt-rh .ti { margin: 0; flex: none; }
/* do the math: the 10 Basic slots, filled week by week */
@media (max-width: 767px) {
    .vt-rh { gap: 0; }
}
/* floor pins: upright bubble markers (the number never rotates) */
.fp { width: auto; min-width: calc(30px * var(--s)); height: calc(30px * var(--s)); padding: 0 calc(7px * var(--s)); border-radius: 999px; transform: translateX(-50%); }
.fp::after { left: 50%; top: 100%; width: calc(10px * var(--s)); height: calc(7px * var(--s)); margin-left: calc(-5px * var(--s)); background: inherit; clip-path: polygon(0 0, 100% 0, 50% 100%); }
/* left wing: a tighter report */
.props-l { width: 262px; }
.vs-scroll { padding-top: 24px; margin-top: -24px; }
@media (max-width: 767px) { .co-cost { top: auto; } }


/* ---- pass 3 (user round 2): demo VSL, no white label, FAQ after pricing ---- */
.nav { padding-top: 20px; }
/* the video still: the demo's own thumbnail, a click loads the Vimeo player */
.vsl-still { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #0E0703; cursor: pointer; overflow: hidden; }
.vsl-still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.vsl-still::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 50%, rgba(12, 6, 2, .35), rgba(12, 6, 2, .05) 70%), linear-gradient(180deg, rgba(12, 6, 2, .35), transparent 30%); pointer-events: none; }
.vsl-still:hover img { transform: scale(1.02); }
/* left wing: a whole-city 20x20 scan */
.bm-card { overflow: hidden; border-radius: 18px; background: linear-gradient(180deg, #24150B, #160C05); box-shadow: 0 0 0 1px rgba(255, 194, 61, .3), 0 40px 70px -30px #000, 0 0 70px -24px rgba(123, 203, 58, .4); color: #F2E3CE; }
.bm-map { position: relative; margin: 12px 12px 10px; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: #1B120A; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.bm-streets { position: absolute; inset: 0; background: linear-gradient(32deg, transparent 47%, rgba(255, 178, 62, .28) 47.6% 49.4%, transparent 50%), linear-gradient(-58deg, transparent 63%, rgba(255, 178, 62, .2) 63.5% 64.6%, transparent 65%), linear-gradient(rgba(255, 178, 62, .1) 1px, transparent 1px) 0 0 / 100% 22px, linear-gradient(90deg, rgba(255, 178, 62, .1) 1px, transparent 1px) 0 0 / 30px 100%; }
.bm-dots { position: absolute; inset: 7px; background: radial-gradient(circle at 46% 54%, #3DCB5A 0 13%, #9BD45A 21%, #F5A524 32%, #F0614A 50%, #C2412F 72%); -webkit-mask: radial-gradient(circle, #000 0 34%, transparent 40%) 0 0 / 5% 5%; mask: radial-gradient(circle, #000 0 34%, transparent 40%) 0 0 / 5% 5%; }
.bm-pin { position: absolute; left: 46%; top: 54%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 30%; background: linear-gradient(160deg, #F2FF9C, var(--acid) 60%, #A9E13A); -webkit-mask: radial-gradient(circle, transparent 23%, #000 calc(23% + .5px)); mask: radial-gradient(circle, transparent 23%, #000 calc(23% + .5px)); transform: rotate(-9deg); filter: drop-shadow(0 0 8px rgba(214, 242, 60, .8)); }
.bm-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 14px 14px; }
.bm-foot b { color: #fff; font-size: 13.5px; }
.bm-foot span { padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--muted-d); font-size: 11px; font-weight: 700; white-space: nowrap; }
.co-city { left: 40px; top: 300px; width: 240px; }
.co-city p { margin: 6px 0 0; font-weight: 700; }
/* 01: the plan rows (no column blurbs) */
/* 02 email follow-up now sits media-left */
@media (max-width: 1199px) { .co-cost { left: -12px; } .up-flip .co-wait { right: -12px; } }
/* Limits and Leads: two wider cards */
/* gallery: four stills, two by two */
/* final offer: floor fades out before the seam into the FAQ */
.fin-floor { -webkit-mask-image: linear-gradient(transparent, #000 45%, #000 70%, transparent 96%); mask-image: linear-gradient(transparent, #000 45%, #000 70%, transparent 96%); bottom: 40px; }
.s10-bg { -webkit-mask-image: linear-gradient(#000 calc(100% - 260px), transparent calc(100% - 110px)); mask-image: linear-gradient(#000 calc(100% - 260px), transparent calc(100% - 110px)); }
/* after the questions: one last Yes, then the page's only No thanks */
.s-faq { padding-bottom: 150px; }
.faq-end { display: grid; justify-items: center; gap: 22px; max-width: 620px; margin: 80px auto 0; }
.nothanks { display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 52px; margin: 0; padding: 0 28px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px #DCCFBB; color: #6E5E4C; font-size: 16px; font-weight: 700; text-decoration: none; transition: box-shadow .2s, color .2s; }
.nothanks:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px #B9A88F; }
/* footer opens with the same HUD seam */
.pf-foot { padding-top: 120px; border-top: 0; }
@media (max-width: 767px) {
    .faq-end { margin-top: 60px; }
    .nothanks { font-size: 15px; }
    .pf-foot { padding-top: 96px; }
}
.co-city { top: 352px; }
@media (max-width: 767px) { .co-kw { position: absolute; left: 8px; top: 34px; margin: 0; } .co-kw .co-label { display: none; } }
@media (max-width: 767px) { .co-kw { display: none; } }


/* ---- pass 4: the headline in FE's three-line form ----
   1 white (logo mark for the o), 2 white + lime phrase, 3 gold payoff with
   the brush stroke. Each line is one upgrade: room, bigger maps, follow-up. */
.hero-h1 { font-size: clamp(34px, 5.2vw, 84px); line-height: 1.04; }
@media (min-width: 900px) { .hero-h1 > span { white-space: nowrap; } }
.nw { white-space: nowrap; }
.o-mark { display: inline-block; width: .54em; height: .58em; margin: 0 .02em 0 .03em; vertical-align: -.02em; border-radius: 30%; background: linear-gradient(160deg, #F2FF9C, var(--acid) 60%, #A9E13A); -webkit-mask: radial-gradient(circle, transparent .125em, #000 calc(.125em + .5px)); mask: radial-gradient(circle, transparent .125em, #000 calc(.125em + .5px)); transform: rotate(-9deg); filter: drop-shadow(0 0 .2em rgba(214, 242, 60, .35)); }
.hl-gold { margin-top: .1em; }
.hl-gold::after { left: -3%; right: -4%; bottom: -.2em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 30' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23FFE38A'/%3E%3Cstop offset='.55' stop-color='%23FFC23D'/%3E%3Cstop offset='1' stop-color='%23FF8F1F'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M3 20C80 10 180 5 297 6c2 0 3 3 1 5-98 2-188 9-286 17-7 1-12-4-9-8z' fill='url(%23g)'/%3E%3Cpath d='M40 14c70-5 140-7 210-7' stroke='%23FFF6D0' stroke-opacity='.55' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.h-box { padding: 36px 56px 54px; }
@media (max-width: 991px) { .h-box { padding: 36px 30px 50px; } }
/* phones: FE's compact version. The headline stays in the lit frame (top
   corners, pill on its top edge); the three steps dock on its bottom edge as
   one card of three columns joined by arrows */
@media (max-width: 767px) {
    .hero-copy { padding-top: 34px; }
    .h-box { width: 100%; margin-top: 18px; padding: 36px 12px 66px; border-radius: 24px; }
    .h-box .eyebrow { top: 0; transform: translate(-50%, -50%); gap: 8px; padding: 4px 13px 4px 4px; font-size: 13px; }
    .eb-chip { padding: 5px 10px 5px 8px; font-size: 12px; }
    .hb-c { width: 18px; height: 18px; border-width: 2.5px; }
    .hb-c.c1 { top: 10px; left: 10px; border-radius: 7px 0 0 0; }
    .hb-c.c2 { top: 10px; right: 10px; border-radius: 0 7px 0 0; }
    .hb-c.c3, .hb-c.c4 { display: none; }
    /* sized so "Scan The Whole City." (8.6em) still fits on one line:
       (100vw - page gutters 48px - frame padding 27px) / 8.75 */
    .hero-h1 { font-size: min(calc((100vw - 75px) / 8.75), 52px); line-height: 1.06; text-wrap: balance; }
    .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 12px; width: calc(100% - 24px); margin: -46px auto 0; padding: 12px 8px 13px; border-radius: 20px; font-size: 13px; font-weight: 700; line-height: 1.25; letter-spacing: 0; text-align: center; white-space: normal; }
    .steps li { flex-direction: column; justify-content: flex-start; gap: 8px; min-width: 0; }
    .steps li + li::before { position: absolute; left: -12px; top: 9px; width: 12px; height: 14px; margin: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFB23E' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / 12px 12px no-repeat; }
    .st-ic { width: 32px; height: 32px; border-radius: 10px; }
}
@media (max-width: 374px) {
    .h-box .eyebrow { gap: 6px; padding-right: 9px; font-size: 11.5px; }
    .eb-chip { padding: 4px 8px 4px 7px; font-size: 11px; }
}
@media (max-width: 767px) {
    /* phones: FE's 16px hero gutters; the font is sized so the widest line,
       "Scan The Whole City." (about 9.3em at phone sizes, where the optical
       size axis makes Bricolage wider), fits the frame on one line */
    .hero-copy { padding-left: 16px; padding-right: 16px; }
    .hero-h1 { font-size: min(calc((100vw - 64px) / 9.3), 52px); letter-spacing: -.04em; }
}
@media (max-width: 1365px) { .s2-badge { display: none; } }
/* fixed line breaks: the headline's height no longer depends on which font is
   showing while Bricolage loads, so nothing below it moves (CLS) */
.br-m { display: none; }
@media (min-width: 768px) { .hero-h1 > span { white-space: nowrap; } }
@media (max-width: 767px) {
    .br-m { display: inline; }
    .hero-h1 > span { white-space: nowrap; }
}
/* the frame's width is set in em of the headline (widest line is 12.2-12.9em),
   so it doesn't resize when Bricolage replaces the fallback font (CLS) */
@media (min-width: 768px) { .hero-h1 { width: 13em; max-width: 100%; } }
/* small tablets: the capsule is wider than the frame, so it sits just under it (FE) */
@media (min-width: 768px) and (max-width: 1023px) {
    .h-box { padding-bottom: 38px; }
    .steps { margin-top: 20px; font-size: 15.5px; }
}


/* ==========================================================
   PASS 5 — copy from profitmapsai.com/pro (18 Oct 2026)
   ========================================================== */
.c-violet { --c1: #CDBFFF; --c2: #8B5CF6; --tint: #F3EEFF; --deep: #6D3FE0; }
.c-rose { --c1: #FFC2D6; --c2: #F2558A; --tint: #FFEEF4; --deep: #C2185B; }
.t-peach { background: linear-gradient(160deg, #FFC1A6, #FF7A59); }
.seam-lightlight { --r1: rgba(227, 138, 18, .55); --r2: rgba(123, 203, 58, .55); --chev: #E38A12; --glow1: transparent; --glow2: transparent; }

/* "Illustration" chip (dark by default, light inside light sections) */
.ill { display: inline-flex; align-items: center; margin-right: 6px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 178, 62, .12); box-shadow: inset 0 0 0 1px rgba(255, 178, 62, .45); color: #FFD27A; font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; vertical-align: 2px; }
.sec:not(.dark) .ill { background: #FFF1D6; box-shadow: inset 0 0 0 1px #F2C886; color: #9A5200; }
.sec .ill.ill-d { background: rgba(255, 178, 62, .12); box-shadow: inset 0 0 0 1px rgba(255, 178, 62, .45); color: #FFD27A; }

/* headline: the logo mark stands in for the capital O of "One" */
.o-mark.o-cap { width: .64em; height: .7em; margin: 0 .03em 0 0; vertical-align: -.03em; -webkit-mask: radial-gradient(circle, transparent .15em, #000 calc(.15em + .5px)); mask: radial-gradient(circle, transparent .15em, #000 calc(.15em + .5px)); }
/* sub-line: two stops */
.steps-2 li:last-child .st-ic { background: linear-gradient(160deg, #F2FF9C, var(--acid) 60%, #A9E13A); }

/* the Pro VSL's own thumbnail has its own play circle: a pulsing ring on it */
.vsl-still::after { display: none; }
.vs-ring { position: absolute; z-index: 1; left: 7.9%; top: 65.7%; width: 6.4%; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 3px var(--lime), 0 0 26px rgba(198, 246, 137, .7); transform: translate(-50%, -50%); transition: transform .3s var(--ease); }
.vs-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 3px rgba(198, 246, 137, .8); animation: vs-pulse 1.8s ease-out infinite; }
@keyframes vs-pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }
.vsl-still:hover .vs-ring { transform: translate(-50%, -50%) scale(1.12); }

/* the six changes, each with a small picture of itself */
.perks6 { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 980px; margin: 64px auto 0; padding: 0; list-style: none; }
.pk { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 18px; background: linear-gradient(160deg, rgba(42, 24, 11, .95), rgba(20, 11, 5, .95)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c1) 32%, transparent), 0 26px 46px -26px #000; color: #fff; font-size: 15.5px; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.pv { position: relative; display: grid; place-items: center; flex: none; width: 58px; height: 58px; border-radius: 16px; background: linear-gradient(160deg, var(--c1), var(--c2)); color: #150C04; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .16), 0 0 22px -6px var(--c2); }
.pv .ic { width: 24px; height: 24px; }
.pv-num b { font-family: var(--f-display); font-size: 25px; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.pv-num s { position: absolute; right: -7px; top: -8px; padding: 2px 6px; border-radius: 8px; background: #2A170A; color: #C9B297; font-size: 11px; font-weight: 800; text-decoration-color: var(--coral); text-decoration-thickness: 2px; box-shadow: 0 0 0 2px #1A0F06; }
.pv-kw { display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.pv-kw i { width: 7px; height: 26px; border-radius: 3px; background: rgba(21, 12, 4, .32); }
.pv-kw i.n { background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, .8); }
.pv-web i { position: absolute; width: 30px; height: 22px; border-radius: 5px; background: #fff; border-top: 5px solid #150C04; box-shadow: 0 4px 8px -3px rgba(0, 0, 0, .4); }
.pv-web i:nth-child(1) { left: 8px; top: 10px; opacity: .55; }
.pv-web i:nth-child(2) { left: 14px; top: 17px; opacity: .8; }
.pv-web i:nth-child(3) { left: 20px; top: 24px; }
.pv-brand i { display: grid; place-items: center; width: 30px; height: 30px; margin-top: -8px; border-radius: 30%; background: #150C04; color: #FFC1A6; font-family: var(--f-display); font-size: 16px; font-style: normal; font-weight: 800; }
.pv-brand s { position: absolute; left: 13px; right: 13px; bottom: 9px; height: 3px; border-radius: 2px; background: rgba(21, 12, 4, .3); }
.pv-g9 i { width: 36px; height: 36px; background: radial-gradient(circle, #150C04 0 36%, transparent 42%) 0 0 / 11.111% 11.111%; }
.pv-mail em { position: absolute; right: 7px; bottom: 7px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #150C04; color: var(--lime); font-style: normal; }
.pv-mail em .ic { width: 11px; height: 11px; }
.hero-offer { margin-top: 56px; }

/* the price above every Yes button, the sub-line inside it */
.oc-rest em { display: block; width: fit-content; margin-bottom: 4px; padding: 2px 8px; border-radius: 6px; background: var(--ink); color: var(--gold); font-size: 11.5px; font-style: normal; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.by-txt { display: grid; }
.by-sub { margin-top: 3px; color: rgba(14, 26, 6, .66); font-family: var(--f-body); font-size: 13px; font-weight: 700; letter-spacing: 0; }

/* limits: the fourth tile is words, not a number */
.lm-brand b { font-size: 19px; line-height: 1.15; letter-spacing: -.015em; }
.limits { margin-top: 64px; }
.lm-note { max-width: 980px; margin: 14px auto 0; color: var(--muted-d); font-size: 13.5px; text-align: center; }

/* wings: 9x9 map grid + two emails */
.bm-dots.bm-9 { inset: 14px; -webkit-mask: radial-gradient(circle, #000 0 34%, transparent 40%) 0 0 / 11.111% 11.111%; mask: radial-gradient(circle, #000 0 34%, transparent 40%) 0 0 / 11.111% 11.111%; }
.bm-foot s { padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--muted-d); font-size: 11px; font-weight: 700; text-decoration-color: var(--coral); white-space: nowrap; }
.co-city { top: 352px; }

/* SECTION 2 — what happens at 10: three walls */
.s-ten { background: linear-gradient(180deg, #FFF8EE, #FFFDF8 70%); }
.walls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; max-width: 1180px; margin: 64px auto 0; }
.wall { position: relative; display: flex; flex-direction: column; padding: 14px 14px 20px; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c1) 70%, #fff), 0 40px 70px -40px color-mix(in srgb, var(--c2) 60%, transparent); }
.wl-vis { position: relative; height: 172px; overflow: hidden; border-radius: 18px; background: linear-gradient(160deg, var(--tint), #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c1) 60%, #fff); }
.wl-txt { padding: 18px 8px 0; }
.wl-txt p { margin: 0 0 10px; font-size: 16px; line-height: 1.55; }
.wl-txt p:last-child { margin-bottom: 0; }
.wl-punch { color: var(--ink); font-family: var(--f-display); font-size: 19px !important; font-weight: 800; line-height: 1.25 !important; letter-spacing: -.015em; }
.slots10 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-content: center; gap: 8px; padding: 16px; }
.sl { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 58px; padding: 6px 2px; border-radius: 12px; background: linear-gradient(160deg, #FFE9A0, var(--gold) 55%, var(--amber-2)); color: #2B1600; box-shadow: 0 6px 12px -6px rgba(180, 90, 0, .6); }
.sl .ic { width: 18px; height: 18px; }
.sl em { font-size: 10px; font-style: normal; font-weight: 800; }
.sl.off { background: transparent; box-shadow: none; border: 1.5px dashed #E8C98A; }
.kwchips { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 16px 18px; }
.kc { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 7px 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #E3D8F8; color: #8A7BA6; font-size: 13.5px; font-weight: 700; }
.kc.on { background: linear-gradient(160deg, #EDE6FF, #D9CCFF); box-shadow: inset 0 0 0 1px #B9A3FF; color: #3B1F9E; }
.kc .ic { width: 14px; height: 14px; }
.kc:nth-child(2) { margin-left: 18px; }
.kc:nth-child(3) { margin-left: 36px; }
.kc:nth-child(4) { margin-left: 18px; }
.repfoot { padding: 18px 18px 0; background: #fff; }
.rf-lines i { display: block; height: 8px; margin-bottom: 9px; border-radius: 4px; background: #F1E6D6; }
.rf-lines i:nth-child(1) { width: 92%; }
.rf-lines i:nth-child(2) { width: 70%; }
.rf-lines i:nth-child(3) { width: 82%; }
.rf-line { position: absolute; left: 18px; right: 18px; bottom: 26px; padding-top: 10px; border-top: 1px dashed #EAD9C2; color: #A8988A; font-size: 11.5px; font-weight: 600; }
.rf-lens { position: absolute; left: 22%; bottom: 8px; width: 78px; height: 78px; border-radius: 50%; border: 4px solid var(--c2); background: rgba(255, 122, 89, .06); box-shadow: 0 0 0 6px rgba(255, 122, 89, .15), 0 10px 20px -8px rgba(0, 0, 0, .3); }
.rf-lens::after { content: ""; position: absolute; right: -22px; bottom: -6px; width: 28px; height: 9px; border-radius: 5px; background: var(--c2); transform: rotate(40deg); }
.ten-end { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 50px; max-width: 1100px; margin: 90px auto 0; }
.te-txt p { margin: 0 0 12px; font-size: 18px; }
.te-txt .te-big { margin-top: 18px; color: var(--ink); font-family: var(--f-display); font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; }
.te-clip .win { box-shadow: 0 0 0 5px #FFE2A0, 0 40px 70px -40px rgba(120, 70, 0, .55); }

/* change rows: "from -> to" headlines */
.up h3 { font-size: clamp(28px, 2.9vw, 42px); }
.up h3 .fr { color: var(--muted-d); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--coral) 80%, transparent); text-decoration-thickness: .07em; }
.up h3 .ar { display: inline-block; margin: 0 .2em; color: var(--c1); font-style: normal; }
.up-num b { font-size: 28px; }
/* the light half of the changes (5-7) */
.s-adds2 { background: #FFF8EF; }
.s-adds2 .up h3 { color: var(--ink); }
.s-adds2 .up h3 .fr { color: #A8988A; }
.s-adds2 .up h3 .ar { color: var(--deep); }
.s-adds2 .up-num span { color: var(--deep); }
.s-adds2 .up-copy > p { color: var(--body-l); }
.s-adds2 .punch { background: linear-gradient(120deg, var(--tint), #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c1) 80%, #fff); color: var(--ink); }
.s-adds2 .punch i { background: var(--c2); color: #fff; }
.s-adds2 .up-copy > p.up-small { color: var(--muted-l); }
.s-adds2 .up-media figcaption { color: var(--muted-l); }
.s-adds2 .up:first-child { margin-top: 0; }
.up-copy > p + p.punch, .up-copy > .punch { margin-top: 18px; }

/* 2 · keywords: Mike's Plumbing */
.kwdemo { padding: 18px; border-radius: 24px; background: linear-gradient(180deg, #FFFFFF, #FBF8FF); box-shadow: 0 0 0 4px rgba(205, 191, 255, .35), 0 50px 100px -40px rgba(139, 92, 246, .6), 0 30px 60px -30px #000; color: var(--ink); }
.kd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.kd-biz { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.kd-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(160deg, #CDBFFF, #8B5CF6); color: #fff; }
.kd-ic .ic { width: 18px; height: 18px; }
.kwdemo .seg, .wldemo .rep .seg { background: #F1ECFA; box-shadow: inset 0 0 0 1px #E3D8F8; }
.kwdemo .seg button { color: #6C5A8F; }
.kwlist { display: grid; gap: 7px; }
.kw { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px 9px 14px; border-radius: 14px; background: #F7F3FF; transition: opacity .35s, background .35s; }
.kw-t { display: grid; gap: 1px; min-width: 0; }
.kw-t b { font-size: 14.5px; }
.kw-t small { color: var(--muted-l); font-size: 12.5px; font-weight: 600; }
.kw .lock { display: none; color: #8B5CF6; font-style: normal; }
.kw.locked { opacity: .5; background: #F3F0F7; }
.kw.locked .lock { display: inline; }
.kw .mini, .rep .mini { display: grid; flex: none; grid-template-columns: repeat(5, 1fr); gap: 2px; width: 54px; }
.mini i { aspect-ratio: 1; border-radius: 50%; background: #C3CCC0; transition: background .35s; }
.mini i.g { background: #22A34A; }
.mini i.a { background: #F0A42A; }
.mini i.r { background: #E5534B; }
.mini i.x { background: #C3CCC0; }
.kw.locked .mini i { background: #DCD6E4; }
.kwcap { margin: 12px 4px 0; color: #6D3FE0; font-size: 14px; font-weight: 700; }
.up-media .kwdemo + figcaption { margin-top: 16px; }

/* 4 · map grid: two real screens, stacked; a tap enlarges */
.gc-9 .gc-dots { width: 120px; height: 120px; padding: 5px; background-image: radial-gradient(circle, #FFB23E 0 34%, transparent 40%); background-size: 11.111% 11.111%; background-origin: content-box; box-shadow: inset 0 0 0 1px rgba(255, 178, 62, .35), 0 0 40px -10px rgba(255, 166, 40, .5); }
.gc-vs { color: var(--muted-d); }
.gc-vs .ic { width: 22px; height: 22px; }
.g9-stack { position: relative; padding-bottom: 17%; }
.g9-media .shot { position: relative; display: block; width: 86%; }
.g9-media .g9-b { position: absolute; right: 0; bottom: 0; width: 60%; transform: rotate(2.5deg); }
.g9-media .sh-win { border-radius: 16px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--c1) 80%, transparent), 0 40px 70px -30px #000; }
.g9-media .sh-win img { aspect-ratio: auto; object-fit: contain; }
.g9-media .sh-cap { position: absolute; left: 12px; top: 12px; z-index: 2; max-width: calc(100% - 70px); padding: 5px 10px; border-radius: 10px; background: rgba(13, 8, 4, .86); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.3; }
.g9-media .g9-b .sh-win { box-shadow: 0 0 0 5px color-mix(in srgb, var(--c2) 80%, transparent), 0 40px 70px -24px #000; }
.g9-media .shot:hover .sh-win { transform: translateY(-4px); }

/* 5 · reports: type a company name */
.wldemo { position: relative; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); max-width: 1000px; margin: 76px auto 0; overflow: hidden; border-radius: 28px; background: linear-gradient(180deg, #FFF8EE, #FFEFE3); box-shadow: 0 0 0 1.5px #F6C9B4, 0 50px 100px -50px rgba(160, 70, 30, .5); }
.wd-ctrl { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 32px 30px; background: radial-gradient(420px 260px at 20% 0, rgba(255, 122, 89, .3), transparent 70%), linear-gradient(160deg, #2E1A0C, #170D05); color: #fff; }
.wd-label { font-family: var(--f-display); font-size: 23px; font-weight: 800; letter-spacing: -.02em; }
.wd-in { height: 52px; padding: 0 16px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1.5px rgba(255, 178, 62, .45); color: #fff; font-family: var(--f-body); font-size: 17px; font-weight: 600; }
.wd-in::placeholder { color: #9C8873; }
.wd-in:focus { outline: none; box-shadow: inset 0 0 0 2px var(--lime), 0 0 0 4px rgba(198, 246, 137, .2); }
.wd-ctrl .seg { align-self: flex-start; }
.rep { display: grid; gap: 14px; align-content: center; margin: 28px; padding: 22px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px #EEDFC9, 0 24px 44px -24px rgba(120, 70, 0, .4); color: var(--ink); transition: box-shadow .4s; }
.rep__head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 2px solid #F1E6D6; transition: border-color .4s; }
.rep__logo { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 30%; background: linear-gradient(160deg, #F2FF9C, var(--acid) 60%, #A9E13A); font-family: var(--f-display); font-size: 21px; font-weight: 800; }
.rep__id { display: grid; min-width: 0; }
.rep__name { overflow: hidden; font-family: var(--f-display); font-size: 19px; font-weight: 800; letter-spacing: -.015em; text-overflow: ellipsis; white-space: nowrap; }
.rep__id small { color: var(--muted-l); font-size: 12.5px; font-weight: 600; }
.rep__body { display: flex; align-items: center; gap: 16px; }
.rep .mini { width: 84px; gap: 3px; }
.rep__facts { display: grid; gap: 3px; }
.rep__facts b { font-size: 15.5px; }
.rep__facts small { color: var(--muted-l); font-size: 13px; font-weight: 600; }
.rep__facts em { width: fit-content; margin-top: 4px; padding: 3px 9px; border-radius: 8px; background: #E9F8EA; color: #1D7A45; font-size: 12.5px; font-style: normal; font-weight: 800; }
.rep__foot { padding-top: 12px; border-top: 1px dashed #EAD9C2; color: #A8988A; font-size: 12.5px; font-weight: 600; transition: opacity .5s, transform .5s; }
.wldemo.is-pro .rep__foot { opacity: 0; transform: translateY(6px); }
.wldemo.is-pro .rep { box-shadow: 0 0 0 2px #FFC23D, 0 24px 44px -24px rgba(120, 70, 0, .5); }
.wldemo.is-pro .rep__head { border-color: #FFC23D; }
.wd-note { grid-column: 1 / -1; margin: 0; padding: 12px 22px; border-top: 1px solid #F3E4CF; background: #FFF8EE; color: var(--muted-l); font-size: 13.5px; }

/* price + Yes + trust, used between the sections */
.cta-block { display: grid; justify-items: center; gap: 14px; max-width: 620px; margin: 76px auto 0; text-align: center; }
.cta-block .oc-price { justify-content: center; margin: 0; text-align: left; }
.cta-trust, .cl-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 0; padding: 0; list-style: none; color: var(--body-l); font-size: 14px; font-weight: 700; }
.cta-trust li, .cl-trust li { display: inline-flex; align-items: center; gap: 7px; }
.cta-trust .ic, .cl-trust .ic { width: 16px; height: 16px; color: var(--green); }
.dark .oc-price b, .closer .oc-price b { color: #fff; }
.dark .oc-rest, .closer .oc-rest { border-color: rgba(255, 255, 255, .16); color: #FFD27A; }
.dark .oc-rest em, .closer .oc-rest em { background: linear-gradient(180deg, #FFEB9C, var(--gold) 60%, #F5A21B); color: #2B1600; }
.dark .cta-trust, .closer .cl-trust { color: #E6D3BA; }
.dark .cta-trust .ic, .closer .cl-trust .ic { color: var(--lime); }

/* SECTION 5 — table: long cells read left-aligned */
.vs-table td.vt-long { font-size: 14.5px; line-height: 1.45; text-align: left; }
.vt-strong { color: #FFE08A; font-weight: 800; }
.vs-table thead td.vt-f { border-bottom: 0; }

/* SECTION 6 — why only $67 */
.why67 { max-width: 760px; margin: 26px auto 0; text-align: center; }
.why67 p { margin: 0 0 10px; font-size: 19px; line-height: 1.55; }
.why67 p:first-child { color: var(--ink); font-family: var(--f-display); font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.sub-h { margin: 90px 0 0; color: var(--ink); font-family: var(--f-display); font-size: clamp(28px, 3vw, 40px); font-weight: 800; line-height: 1.1; letter-spacing: -.035em; text-align: center; }
.sub-lede { max-width: 620px; margin: 12px auto 0; font-size: 17.5px; text-align: center; }
.ways { margin-top: 40px; }
.way-big small { color: var(--muted-l); -webkit-text-fill-color: var(--muted-l); font-family: var(--f-body); font-size: 17px; font-weight: 700; letter-spacing: 0; }
.way-big small:first-child { margin-right: 8px; }
.way-words { font-size: 38px; line-height: 1.05; letter-spacing: -.035em; }
.w-job::before { background: linear-gradient(90deg, #9FE8C0, #2FB27A); }
.w-job .way-words { background: linear-gradient(180deg, #33B76D, #1D7A45); -webkit-background-clip: text; background-clip: text; }
.jobbar { display: grid; gap: 8px; margin: 22px 0 0; }
.jb-job { display: flex; align-items: center; height: 42px; padding: 0 14px; border-radius: 12px; background: linear-gradient(90deg, #DFF7E8, #BDEFD2); box-shadow: inset 0 0 0 1.5px #7FD8A6; }
.jb-job b { color: #1D7A45; font-family: var(--f-display); font-size: 20px; font-weight: 800; }
.jb-pro { display: flex; gap: 6px; width: 89.3%; }
.jb-pro i { display: grid; flex: 1; place-items: center; height: 42px; border-radius: 12px; background: linear-gradient(160deg, #FFE9A0, var(--gold) 55%, var(--amber-2)); color: #2B1600; font-family: var(--f-display); font-size: 17px; font-style: normal; font-weight: 800; box-shadow: 0 8px 16px -8px rgba(180, 90, 0, .6); }
.way-fine { max-width: 760px; margin: 20px auto 0; text-align: center; }
.pace-wrap { margin-top: 10px; }
.pace { margin-top: 40px; }
.pc-pace #paceOut { display: block; }
.pc-pace #paceOut b { display: inline; color: var(--ink); }
.pc-pace #paceOut b.grn { color: #2E8A2E; }
.pc-out .pc-pace { margin-top: 24px; font-size: 16px; }

/* SECTION 7 */
.fit-note { display: flex; align-items: center; justify-content: center; gap: 10px; width: fit-content; max-width: 100%; margin: 30px auto 0; padding: 13px 18px; border-radius: 16px; background: rgba(255, 178, 62, .1); box-shadow: inset 0 0 0 1px rgba(255, 178, 62, .3); color: #FFE2B0; font-size: 15.5px; font-weight: 700; }
.fit-note .ic { width: 20px; height: 20px; color: var(--amber); }

/* SECTION 8 — public proof: each card draws its numbers */
.s-proof { background: #FFF8EF; }
.s9g-bg { -webkit-mask-image: linear-gradient(#000 calc(100% - 300px), transparent calc(100% - 130px)); mask-image: linear-gradient(#000 calc(100% - 300px), transparent calc(100% - 130px)); background: radial-gradient(800px 420px at 50% 10%, rgba(255, 218, 143, .5), transparent 70%), radial-gradient(700px 500px at 90% 70%, rgba(255, 193, 166, .35), transparent 70%); }
.proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1180px; margin: 60px auto 0; }
.pc { display: flex; flex-direction: column; padding: 22px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c1) 70%, #fff), 0 40px 70px -40px color-mix(in srgb, var(--c2) 55%, transparent); }
.pc-src { color: var(--deep); font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.pc h3 { margin: 10px 0 16px; color: var(--ink); font-family: var(--f-display); font-size: 20px; font-weight: 800; line-height: 1.2; letter-spacing: -.015em; }
.pv-panel { position: relative; height: 150px; margin: auto 0 16px; padding: 16px; border-radius: 18px; background: radial-gradient(260px 160px at 100% 0, color-mix(in srgb, var(--c2) 30%, transparent), transparent 70%), linear-gradient(180deg, #24150B, #140B05); color: #fff; }
.pc p { flex: none; margin: 0 0 14px; font-size: 14.5px; line-height: 1.55; }
/* the source, named as plain text (no outbound links on sales pages) */
.pc .pc-cite { margin: auto 0 0; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--c1) 70%, #fff); color: var(--muted-l); font-size: 13.5px; font-weight: 600; }
.pc-cite b { color: var(--deep); font-weight: 800; }
.pv-bars { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: repeat(3, 1fr); align-content: center; gap: 8px 14px; }
.bar { display: flex; grid-column: 1; align-items: center; justify-content: space-between; gap: 6px; width: var(--w); min-width: 0; height: 30px; padding: 0 9px; border-radius: 8px; background: rgba(255, 255, 255, .1); font-size: 11.5px; }
.bar em { font-style: normal; font-weight: 700; white-space: nowrap; }
.bar b { font-weight: 800; }
.bar.on { background: linear-gradient(90deg, var(--gold), var(--amber-2)); color: #2B1600; }
.pv-ring { --p: 50; position: relative; display: grid; grid-template-rows: 70px auto; justify-items: center; gap: 4px; }
.pv-ring::before { content: ""; grid-row: 1; width: 70px; height: 70px; border-radius: 50%; background: conic-gradient(var(--c1) calc(var(--p) * 1%), rgba(255, 255, 255, .12) 0); -webkit-mask: radial-gradient(circle, transparent 26px, #000 27px); mask: radial-gradient(circle, transparent 26px, #000 27px); }
.pv-ring b { position: absolute; top: 0; left: 0; right: 0; display: grid; place-items: center; height: 70px; font-family: var(--f-display); font-size: 18px; font-weight: 800; }
.pv-ring small { max-width: 92px; color: #CDB79C; font-size: 10.5px; font-weight: 700; line-height: 1.2; text-align: center; }
.pv-bars .pv-ring { grid-column: 2; grid-row: 1 / 4; align-self: center; }
.pv-month { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.pm-big b { display: block; background: linear-gradient(180deg, #FFF1B8, #FFD45C 45%, #F59E1B); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: var(--f-display); font-size: 48px; font-weight: 800; line-height: 1; letter-spacing: -.05em; }
.pm-big small { display: block; margin-top: 6px; color: #CDB79C; font-size: 12px; font-weight: 700; }
.pm-cal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; width: 104px; }
.pm-cal i { height: 18px; border-radius: 5px; background: linear-gradient(160deg, var(--c1), var(--c2)); box-shadow: 0 0 10px -3px var(--c2); }
.pv-rings { display: flex; align-items: center; justify-content: space-around; gap: 6px; }
.pv-rings .pv-ring:nth-child(2)::before { background: conic-gradient(#9BD0FF calc(var(--p) * 1%), rgba(255, 255, 255, .12) 0); }
.pv-rings .pv-ring:nth-child(3)::before { background: conic-gradient(#FFDA8F calc(var(--p) * 1%), rgba(255, 255, 255, .12) 0); }
.proof-note { display: flex; gap: 10px; max-width: 900px; margin: 30px auto 0; padding: 14px 18px; border-radius: 16px; background: #FFF1DE; box-shadow: inset 0 0 0 1px #F6DDB3; color: var(--body-l); font-size: 14.5px; line-height: 1.55; }
.proof-note .ic { width: 20px; height: 20px; margin-top: 1px; color: #C26A00; }

/* SECTION 9 — guarantee */
.cert-txt .cert-title { margin-top: 0; }
.cert-ribbon { text-transform: uppercase; }

/* SECTION 10 — the offer card */
.fin-list { margin: 0; padding: 0; border-top: 0; }
.fin-price { align-items: center; gap: 16px; margin: 24px 0 0; padding-top: 20px; border-top: 1px dashed #EADCC6; }
.fin-price .fp-rest { padding: 0 0 0 16px; border-left: 1.5px solid #EFDCC0; border-radius: 0; background: none; color: #B85F00; font-size: 15px; font-weight: 700; line-height: 1.4; letter-spacing: 0; text-transform: none; transform: none; }
.fp-rest em { display: block; width: fit-content; margin-bottom: 4px; padding: 2px 8px; border-radius: 6px; background: var(--ink); color: var(--gold); font-size: 11.5px; font-style: normal; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.fin-sub { margin: 12px 0 0; color: var(--muted-l); font-size: 14px; font-weight: 700; text-align: center; }
.fin-trust { margin-top: 10px; }

/* SECTION 11 — your call: the last Yes, then the only No thanks */
.closer { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 30px 46px; max-width: 1080px; margin: 100px auto 0; overflow: hidden; padding: 46px 48px; border-radius: 32px; background: radial-gradient(600px 320px at 0 0, rgba(255, 166, 40, .28), transparent 70%), linear-gradient(160deg, #2A170A, #120A05); box-shadow: 0 0 0 1px rgba(255, 178, 62, .3), 0 60px 110px -50px rgba(60, 25, 0, .8); color: #E9D8C4; }
.cl-glow { position: absolute; right: -120px; bottom: -160px; z-index: -1; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(closest-side, rgba(198, 246, 137, .14), transparent); }
.cl-vs { position: absolute; right: 26px; top: -24px; z-index: -1; display: flex; align-items: baseline; gap: 6px; font-family: var(--f-display); font-size: 150px; font-weight: 800; line-height: 1; letter-spacing: -.06em; pointer-events: none; }
.cv-10 { color: rgba(255, 255, 255, .05); }
.cl-vs i { color: rgba(255, 255, 255, .05); font-style: normal; }
.cv-50 { color: rgba(255, 194, 61, .1); }
.cl-title { margin: 0 0 16px; color: #fff; font-family: var(--f-display); font-size: clamp(32px, 3.6vw, 50px); font-weight: 800; line-height: 1.04; letter-spacing: -.04em; }
.cl-txt p { margin: 0 0 10px; font-size: 17px; }
.cl-buy { display: grid; gap: 14px; }
.cl-price { margin: 0; }
.faq-end { margin-top: 34px; }

/* footer: the copy's four notes */
.pf-links { margin-top: 26px; }
.pf-legal { margin-top: 28px; }
.pf-blk + .pf-blk { padding-top: 16px; border-top: 1px dashed rgba(255, 255, 255, .1); }
.pf-blk h4 { margin: 0 0 6px; color: #F0E1CC; font-size: 14px; font-weight: 800; }
.pf-blk p { color: #B5A08A; }

/* responsive */
@media (max-width: 1099px) {
    .walls { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
    .proof { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
}
@media (max-width: 991px) {
    .perks6 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 680px; }
    .ten-end { grid-template-columns: minmax(0, 1fr); max-width: 640px; gap: 30px; }
    .wldemo { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
    .closer { grid-template-columns: minmax(0, 1fr); max-width: 640px; padding: 40px 34px; }
}
@media (max-width: 767px) {
    .perks6 { gap: 10px; margin-top: 44px; }
    .pk { gap: 10px; padding: 10px 12px 10px 10px; font-size: 14px; }
    .pv { width: 48px; height: 48px; border-radius: 14px; }
    .pv-num b { font-size: 21px; }
    .limits { margin-top: 48px; }
    .lm-brand b { font-size: 16px; }
    .wl-vis { height: 160px; }
    .te-txt p { font-size: 16.5px; }
    .kwdemo { padding: 14px; }
    .kd-head { flex-wrap: wrap; }
    .g9-stack { padding-bottom: 22%; }
    .g9-media .shot { width: 92%; }
    .g9-media .g9-b { width: 64%; }
    .g9-media .sh-cap { left: 8px; top: 8px; font-size: 11px; }
    .wd-ctrl { padding: 26px 20px; }
    .rep { margin: 18px; padding: 18px; }
    .cta-block { margin-top: 56px; }
    .vs-table td.vt-long { font-size: 12.5px; }
    .why67 p { font-size: 17px; }
    .why67 p:first-child { font-size: 20px; }
    .way-words { font-size: 30px; }
    .sub-h { margin-top: 70px; }
    .pv-panel { height: auto; min-height: 140px; }
    .closer { padding: 34px 20px 28px; border-radius: 26px; }
    .cl-vs { font-size: 100px; right: 10px; }
    .fit-note { font-size: 14.5px; }
}
@media (max-width: 480px) {
    .perks6 { grid-template-columns: minmax(0, 1fr); max-width: 400px; }
}
.cert-title .ln { display: block; }
.cl-vs { top: auto; right: auto; left: -8px; bottom: -34px; }
.bm-foot { flex-wrap: wrap; justify-content: flex-start; gap: 6px 8px; }
/* the new headline: line 1 is the widest, 13.6-14.3em (wider at smaller
   sizes, Bricolage's optical axis), so the frame is 14.4em wide; phones:
   "One Search Found" (8.06em) fills the frame */
.hero-h1 { font-size: clamp(34px, 4.9vw, 76px); }
@media (min-width: 768px) { .hero-h1 { width: 14.4em; } }
@media (max-width: 767px) { .hero-h1 { font-size: min(calc((100vw - 64px) / 8.2), 52px); } }
@media (max-width: 767px) { .steps.steps-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rep__name { overflow: visible; white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
@media (min-width: 1280px) and (max-width: 1365px) { .props-l .callout, .props-r .callout { display: none; } }
.nothanks { text-align: center; line-height: 1.3; }
@media (max-width: 767px) { .nothanks { padding: 10px 22px; } }