/* ==========================================================
   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-price { flex: none; padding: 7px 13px 8px; border-radius: 14px; background: #10200A; color: var(--lime); font-size: 22px; letter-spacing: -.01em; box-shadow: inset 0 0 0 1px rgba(198, 246, 137, .25); }
.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); }

.cta-row { display: grid; justify-items: center; gap: 16px; margin-top: 70px; }
.cta-row .btn-yes { max-width: 620px; }
.cta-sub { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; margin: 0; color: var(--muted-l); font-size: 14.5px; font-weight: 600; }
.cta-sub span + span::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 12px 2px; border-radius: 50%; background: var(--amber-2); vertical-align: middle; }
.dark .cta-sub { color: var(--muted-d); }


/* ==========================================================
   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; }
.vs-bar { position: absolute; left: 18px; top: 16px; display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px 6px 10px; border-radius: 999px; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(255, 194, 61, .25); color: #F4DFC0; font-family: var(--f-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.vs-bar i { width: 8px; height: 8px; border-radius: 50%; background: #FF5A4E; box-shadow: 0 0 0 3px rgba(255, 90, 78, .25); }
.vs-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 30%; background: linear-gradient(160deg, #FFF0B8, var(--gold) 55%, var(--amber-2)); color: #2B1600; transform: rotate(-9deg); box-shadow: 0 0 0 10px rgba(255, 194, 61, .16), 0 0 50px rgba(255, 166, 40, .55), 0 18px 30px -10px #000; }
.vs-play .ic { width: 40px; height: 40px; margin-left: 4px; transform: rotate(9deg); }


/* ==========================================================
   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; }
.s-title-sm { font-size: clamp(34px, 4.2vw, 60px); }
.s-title-xl { font-size: clamp(42px, 6.4vw, 96px); }
.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-light .win-bar { background: #F2ECE2; color: #6E5E4C; }
.win-vid, .win-img { position: relative; aspect-ratio: 16 / 9; background: #F5F5F2; }
.win-vid video, .win-img img { 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)
   ========================================================== */
.s-today { background: linear-gradient(180deg, #FFF8EE, #FFFDF8 70%); }
.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; }
.s2-badge { position: absolute; right: 2%; top: 40px; display: none; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px #F2E3CC, 0 26px 44px -20px rgba(120, 70, 0, .45); transform: rotate(6deg); }
.s2-badge span { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 30%; font-family: var(--f-display); font-size: 28px; font-weight: 800; letter-spacing: -.04em; }
.sb-from { background: #EFE7DC; color: #9C8873; }
.sb-to { background: linear-gradient(160deg, #FFE9A0, var(--gold) 55%, var(--amber-2)); color: #2B1600; box-shadow: 0 0 24px -4px rgba(255, 166, 40, .8); }
.s2-badge .ic { width: 22px; height: 22px; color: var(--amber-2); }
@media (min-width: 1200px) { .s2-badge { display: flex; } }
.today { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; max-width: 1240px; margin: 64px auto 0; }
.td { position: relative; padding: 12px 12px 16px; border: 1.5px solid transparent; border-radius: 28px; background: linear-gradient(180deg, #FFFFFF, var(--tint)) padding-box, linear-gradient(160deg, var(--c1), rgba(255, 255, 255, .7) 50%, var(--c2)) border-box; box-shadow: 0 40px 70px -40px color-mix(in srgb, var(--c2) 70%, transparent), 0 2px 0 rgba(255, 255, 255, .8) inset; }
.td .win { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c1) 55%, transparent); }
.td figcaption { padding: 0 6px; }
.tie { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; padding: 7px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c1) 70%, #fff); font-size: 14.5px; line-height: 1.3; }
.t-b { flex: 1; padding: 6px 4px 6px 8px; color: var(--muted-l); }
.t-b b { color: var(--body-l); }
.t-arr { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--c2); color: #fff; }
.t-arr .ic { width: 14px; height: 14px; }
.t-p { flex: 1.1; padding: 8px 12px; border-radius: 12px; background: linear-gradient(160deg, #FFF3CF, #FFE2A0); color: #5C3300; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(255, 159, 28, .45), 0 6px 16px -8px rgba(255, 140, 20, .6); }
.t-p b { color: #B85F00; }


/* ==========================================================
   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 */
.plan-crop { aspect-ratio: 776 / 740; background: #fff; }
.plan-crop img { object-fit: contain; }
.pc-hi { position: absolute; left: 64.5%; right: 1.5%; top: 3%; bottom: 2.5%; border: 3px solid #FF9F1C; border-radius: 14px; box-shadow: 0 0 0 5px rgba(255, 159, 28, .18), 0 0 26px rgba(255, 159, 28, .45); }
.pc-hi em { position: absolute; left: 50%; bottom: -15px; padding: 5px 11px; border-radius: 999px; background: linear-gradient(160deg, #FFE9A0, var(--gold) 55%, var(--amber-2)); color: #2B1600; font-size: 12px; font-style: normal; font-weight: 800; white-space: nowrap; transform: translateX(-50%); box-shadow: 0 8px 16px -6px rgba(120, 60, 0, .6); }
.co-kw { left: -34px; bottom: 120px; display: grid; gap: 8px; width: 214px; }
.kw-dots { display: flex; gap: 6px; }
.kw-dots i { width: 26px; height: 26px; 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)); }
.kw-dots i.b { background: #CDBFAE; }
.kw-txt { font-size: 13.5px; font-weight: 600; }
.kw-txt b { font-family: var(--f-display); font-size: 17px; }
.kw-txt .g { color: #C26A00; }
/* 02 */
/* 03 */
.co-wait { left: -30px; bottom: 70px; display: grid; gap: 8px; width: 226px; padding: 10px; }
.cw-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; font-weight: 700; }
.cw-row i { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; }
.cw-row .ic { width: 16px; height: 16px; }
.cw-row > span { display: grid; line-height: 1.2; }
.cw-row small { font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.cw-b { background: #F3EEE7; color: #8A7A66; }
.cw-b i { background: #E3D9CB; color: #8A7A66; }
.cw-p { background: #E8F2FF; color: #164C9E; box-shadow: inset 0 0 0 1px #A9CBFF; }
.cw-p i { background: #4F8DF7; color: #fff; }
/* 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-20 .gc-dots { width: 168px; height: 168px; background-image: radial-gradient(circle, #FFB23E 0 34%, transparent 40%); background-size: 5% 5%; padding: 5px; 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 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; }
.co-cost { right: -26px; bottom: 76px; display: grid; gap: 6px; width: 228px; }
.cc-row { display: flex; justify-content: space-between; gap: 10px; padding-top: 6px; border-top: 1px dashed #EADCC6; font-size: 13px; }
.cc-row span { color: var(--muted-l); }
.cc-row .g { color: #3E8E16; }


/* ==========================================================
   SECTION 4 — LIMITS, SHARING, LEADS (light)
   ========================================================== */
.s-more { background: #FFF8EF; }
.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; }
.more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; max-width: 1240px; margin: 76px auto 0; }
.mc { position: relative; display: flex; flex-direction: column; padding: 30px 14px 16px; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c1) 80%, #fff), 0 40px 70px -40px color-mix(in srgb, var(--c2) 60%, transparent); }
.mc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 120px; border-radius: 26px 26px 0 0; background: linear-gradient(180deg, var(--tint), transparent); pointer-events: none; }
.mc-tab { position: absolute; left: 22px; top: -17px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px 7px 11px; border-radius: 12px; background: linear-gradient(160deg, var(--c1), var(--c2)); color: #fff; font-family: var(--f-display); font-size: 16px; font-weight: 800; letter-spacing: -.01em; text-shadow: 0 1px 1px rgba(0, 0, 0, .15); box-shadow: 0 10px 20px -8px var(--c2); }
.c-amber .mc-tab, .c-amber .mc-tab .ic { color: #2B1600; text-shadow: none; }
.mc-tab .ic { width: 17px; height: 17px; }
.mc .clip { position: relative; flex: 1; }
.mc figcaption { padding: 0 4px; }
.mc .win { box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 16px 30px -18px rgba(0, 0, 0, .5); }
.mc-pro { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 0; padding: 12px 14px; border-radius: 16px; background: var(--ink); color: #F6E8D4; font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.mc-pro .ic { width: 18px; height: 18px; margin-top: 1px; color: var(--gold); }
.mc-pro b { color: var(--gold); }


/* ==========================================================
   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%); }
.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 24px; max-width: 1200px; margin: 64px auto 0; }
.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); }
.shots-note { max-width: 760px; margin: 30px auto 0; color: var(--muted-d); font-size: 14.5px; text-align: center; }
.vs { margin-top: 150px; }
.vs-x { color: var(--muted-d); font-size: .6em; vertical-align: .14em; }
.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); }
.pc-res { margin: 24px 0 18px; color: var(--ink); font-family: var(--f-display); font-size: 25px; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; }
.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; }
.worth { margin-top: 140px; }
.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)); }
.w-client::before { background: linear-gradient(90deg, #9FE8C0, #2FB27A); }
.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; }
.way-eq { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; color: var(--ink); font-size: 15px; font-weight: 700; }
.way-eq span { padding: 6px 12px; border-radius: 10px; background: #FFF4E0; box-shadow: inset 0 0 0 1px #FFE0A8; }
.way-eq i { color: var(--amber-2); font-size: 20px; font-style: normal; font-weight: 800; }
.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; }
.wc-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 22px; margin-top: 20px; }
.wc-ctrl label { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.3; }
.wc-ctrl output { color: #2E8A2E; font-family: var(--f-display); font-size: 34px; font-weight: 800; letter-spacing: -.03em; }
.w-client input[type=range] { margin-top: 14px; }
.w-client input[type=range]::-webkit-slider-runnable-track { background: linear-gradient(90deg, #9FE8C0, #2FB27A) 0 0 / var(--p) 100% no-repeat, #EFE6D8; }
.w-client input[type=range]::-moz-range-track { background: linear-gradient(90deg, #9FE8C0, #2FB27A) 0 0 / var(--p) 100% no-repeat, #EFE6D8; }
.w-client input[type=range]::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(47, 178, 122, .3), 0 6px 14px rgba(0, 0, 0, .3); }
.w-client input[type=range]::-moz-range-thumb { box-shadow: 0 0 0 6px rgba(47, 178, 122, .3), 0 6px 14px rgba(0, 0, 0, .3); }
.ring { --p: 27; position: relative; display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; background: conic-gradient(#2FB27A calc(var(--p) * 1%), #EFE6D8 0); }
.ring::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px #F0E2CB; }
.ring b { position: relative; color: var(--ink); font-family: var(--f-display); font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
.wc-res { margin: 22px 0 0; color: var(--ink); font-family: var(--f-display); font-size: 23px; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; }
.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; }
.fc-note { display: flex; align-items: center; gap: 10px; margin: 0 30px 24px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 178, 62, .1); box-shadow: inset 0 0 0 1px rgba(255, 178, 62, .3); color: #FFE2B0; font-size: 15px; font-weight: 700; }
.fc-note .ic { width: 20px; height: 20px; color: var(--amber); }


/* ==========================================================
   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-badge { position: absolute; left: 40px; top: -18px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px 8px 12px; border-radius: 999px; background: linear-gradient(180deg, #FFEB9C, var(--gold) 60%, #F5A21B); color: #2B1600; font-size: 14px; font-weight: 800; box-shadow: 0 10px 20px -8px rgba(120, 60, 0, .7), inset 0 -2px 0 rgba(120, 60, 0, .2); }
.fin-badge .ic { width: 16px; height: 16px; }
.fin-name { margin: 0; color: var(--ink); font-family: var(--f-display); font-size: 34px; font-weight: 800; letter-spacing: -.03em; }
.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-tag { color: var(--amber); font-size: 13px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.pf-legal { display: grid; gap: 16px; max-width: 980px; margin: 40px auto 0; padding: 28px 32px; border-radius: 22px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); text-align: left; }
.pf-legal p { margin: 0; font-size: 13.5px; line-height: 1.7; }
.pf-note { color: #D2BFA8; }
.pf-disc { padding-top: 16px; border-top: 1px dashed rgba(255, 255, 255, .1); color: #A08B74; }
.pf-disc b { color: #EEDFCB; }
.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; }
    .co-kw, .co-wait { left: -12px; }
}
@media (max-width: 1099px) {
    .today, .more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .today > :last-child, .more > :last-child { grid-column: 1 / -1; max-width: calc(50% - 13px); justify-self: center; width: 100%; }
    .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@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; }
    .vs-play { width: 70px; height: 70px; margin: -35px 0 0 -35px; }
    .vs-play .ic { width: 30px; height: 30px; }
    .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-price { padding: 5px 9px 6px; border-radius: 10px; font-size: 16px; }
    .by-arrow { width: 46px; height: 46px; }
    .by-arrow .ic { width: 21px; height: 21px; }
    .cta-row { margin-top: 50px; }
    .cta-sub { font-size: 13.5px; }
    .cta-sub span + span::before { margin: 0 8px 2px; }
    .s-lede { font-size: 16.5px; }
    .today, .more, .shots { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-top: 46px; }
    .today > :last-child, .more > :last-child { max-width: none; }
    .more { gap: 40px; margin-top: 56px; }
    .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-20 .gc-dots { width: 136px; height: 136px; }
    .gc-vs { margin-bottom: 52px; }
    .vs { margin-top: 110px; }
    .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; }
    .pc-res { font-size: 21px; }
    .way-big { font-size: 66px; }
    .slots40 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .wc-in { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .wc-ctrl { width: 100%; }
    .wc-res { font-size: 20px; }
    .fc h3 { padding: 22px 22px 20px; font-size: 24px; }
    .fc ul { padding: 6px 22px 14px; }
    .fc li { font-size: 15.5px; }
    .fc-note { margin: 0 22px 22px; }
    .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-badge { left: 20px; }
    .fin-name { font-size: 28px; }
    .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-2l .ln { display: block; }
.s-title { font-size: clamp(38px, 4.7vw, 70px); }
.s-title-xl { font-size: clamp(42px, 6.2vw, 92px); }
.up-media-plan .up-frame { max-width: 470px; margin: 0 auto; }
.up-media-plan figcaption { max-width: 470px; margin-left: auto; margin-right: auto; }
.co-kw { left: -6px; top: 92px; bottom: auto; }
.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 */
.pc-slots { margin-top: 26px; padding: 16px 16px 14px; border-radius: 18px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.ps-k { display: block; margin-bottom: 12px; color: var(--muted-d); font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.ps-row { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 7px; }
.ps-row span { display: grid; justify-items: center; gap: 5px; }
.ps-row i { width: 100%; aspect-ratio: 1; border-radius: 30%; background: var(--wk); -webkit-mask: radial-gradient(circle, transparent 22%, #000 calc(22% + .5px)); mask: radial-gradient(circle, transparent 22%, #000 calc(22% + .5px)); transition: background .3s; }
.ps-row em { color: #CDB79C; font-family: var(--f-mono); font-size: 10px; font-style: normal; font-weight: 600; }
.ps-row .last i { box-shadow: none; background: linear-gradient(160deg, #FF9C88, var(--coral)); }
.ps-row .last em { color: #FF9C88; }
@media (max-width: 767px) {
    .co-kw { top: auto; }
    .up-media-plan .up-frame { max-width: none; }
    .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; }
.pc-hi em { top: -14px; bottom: auto; }
.vs-scroll { padding-top: 24px; margin-top: -24px; }
.co-cost { left: -30px; right: auto; top: -26px; bottom: auto; }
@media (max-width: 767px) { .co-cost { top: auto; } }
.s2-badge { top: 206px; right: 0; }
.pc-hi em { top: -42px; }


/* ---- 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 .vs-bar, .vsl-still .vs-play { z-index: 1; }
.vsl-still:hover img { transform: scale(1.02); }
.vsl-still:hover .vs-play { transform: rotate(-9deg) scale(1.06); }
.vs-play { transition: transform .3s var(--ease); }
/* 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) */
.up-media-plan .up-frame, .up-media-plan figcaption { max-width: none; }
.plan-crop { aspect-ratio: 776 / 388; }
.co-kw { left: -30px; top: 36px; width: 196px; padding: 10px 12px; gap: 6px; }
.kw-dots i { width: 22px; height: 22px; }
/* 02 email follow-up now sits media-left */
.up-flip .co-wait { left: auto; right: -30px; }
@media (max-width: 1199px) { .co-cost { left: -12px; } .up-flip .co-wait { right: -12px; } }
/* Limits and Leads: two wider cards */
.more-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1060px; }
/* gallery: four stills, two by two */
.shots-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 980px; gap: 30px 28px; }
/* 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: 1099px) {
    .more-2 > :last-child { grid-column: auto; max-width: none; }
}
@media (max-width: 767px) {
    .more-2, .shots-4 { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
    .faq-end { margin-top: 60px; }
    .nothanks { font-size: 15px; }
    .pf-foot { padding-top: 96px; }
}
.co-city { top: 352px; }
.co-kw { left: 10px; top: 40px; width: auto; padding: 8px 11px 9px; border-radius: 12px; gap: 5px; }
.co-kw .co-label { font-size: 9.5px; letter-spacing: .1em; }
.kw-row { display: flex; align-items: center; gap: 10px; }
.kw-dots { gap: 4px; }
.kw-dots i { width: 17px; height: 17px; }
.kw-txt b { font-size: 16px; }
@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; }
}


/* ==========================================================
   PRO STARTER (downsell) — this page is a clone of Pro/.
   Everything below adapts the Pro components to the Pro Starter
   copy: a 3-way limits switch, new hero wings, light "what you
   get" cards, a 3-column table, pick cards and price bars.
   ========================================================== */

/* headline: three short lines (widest 7.9-8.4em), so the type runs bigger
   than on Pro and the frame is set to 8.45em (no resize when the font swaps) */
.hero-h1 { font-size: clamp(36px, 6.6vw, 100px); }
@media (min-width: 768px) { .hero-h1 { width: 8.45em; } }
@media (min-width: 1280px) { .h-box { padding-left: 80px; padding-right: 80px; } }
/* below 1280 the capsule is wider than the frame, so it sits just under it */
@media (min-width: 768px) and (max-width: 1279px) {
    .h-box { padding-bottom: 38px; }
    .steps { margin-top: 20px; }
}
/* phones: "Not Ready For Pro?" is about 8.45em at phone sizes */
@media (max-width: 767px) { .hero-h1 { font-size: min(calc((100vw - 64px) / 8.7), 52px); } }
.s2-badge { top: 96px; }

/* limits: Basic / Pro Starter / Pro */
.seg button[data-plan="starter"][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); }
.seg button[data-plan="pro"][aria-pressed="true"] { background: #4A3A2C; color: #FFE2B0; }
.limits.is-st .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-st .lm-tile b { background: linear-gradient(180deg, #FFF1B8, #FFD45C 45%, #F59E1B); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lm-field i.on.q { background: rgba(255, 178, 62, .3); transform: rotate(-8deg); }

/* hero wings: the Plans page's limits (left), Pro Starter next to Pro (right) */
.us-card, .pz-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; }
.pz-card { box-shadow: 0 0 0 1px rgba(255, 194, 61, .3), 0 40px 70px -30px #000, 0 0 70px -24px rgba(255, 166, 40, .5); }
.us-rows { display: grid; gap: 15px; margin: 0; padding: 16px 16px 20px; list-style: none; }
.us-rows li { display: grid; gap: 7px; }
.us-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: #E6D3BA; font-size: 12.5px; font-weight: 600; }
.us-top 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: 26px; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.us-bar { position: relative; display: block; height: 10px; overflow: hidden; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--amber-2)); box-shadow: 0 0 12px -2px rgba(255, 166, 40, .6); }
.us-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--b); background: linear-gradient(160deg, #F2FF9C, var(--acid) 60%, #A9E13A); box-shadow: 2px 0 0 #1B1007; }
.us-rows small { display: flex; justify-content: space-between; color: var(--muted-d); font-size: 11.5px; font-weight: 600; }
.us-rows small em { color: var(--gold); font-style: normal; font-weight: 800; }
.pz-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 12px 0; padding: 11px 14px; border-radius: 12px; }
.pz-row > span { display: grid; line-height: 1.25; }
.pz-row b { color: #fff; font-size: 15px; }
.pz-row small { color: var(--muted-d); font-size: 11.5px; }
.pz-pro { background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.pz-pro b { color: #CDB79C; }
.pz-pro s { color: #9C8873; font-family: var(--f-display); font-size: 24px; font-weight: 800; text-decoration-color: var(--coral); text-decoration-thickness: 3px; }
.pz-st { background: rgba(255, 178, 62, .1); box-shadow: inset 0 0 0 1.5px rgba(255, 194, 61, .6), 0 0 26px -10px rgba(255, 166, 40, .7); }
.pz-st em { background: linear-gradient(180deg, #FFF1B8, #FFD45C 45%, #F59E1B); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: var(--f-display); font-size: 32px; font-style: normal; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.pz-save { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px; padding: 9px 12px; border-radius: 10px; background: linear-gradient(160deg, #F2FF9C, var(--acid) 60%, #A9E13A); color: #0B1D12; font-size: 13.5px; font-weight: 800; }
.pz-save .ic { width: 15px; height: 15px; }
.co-room, .co-half { position: relative; width: 250px; margin-top: -22px; }
.co-room { margin-left: 14px; }
.co-half { margin-left: auto; margin-right: 14px; }
.co-room p, .co-half p { margin: 6px 0 0; font-weight: 700; }

/* section 2: what you get / what you don't, as light cards */
.fit-light { margin-top: 70px; }
.fit-light .fc { background: #fff; box-shadow: 0 0 0 1.5px var(--fc-line), 0 50px 90px -50px rgba(120, 70, 0, .45); }
.fit-light .fc-yes { --fc-line: rgba(61, 203, 90, .45); }
.fit-light .fc-skip { --fc-line: rgba(255, 138, 107, .5); }
.fit-light .fc-badge { box-shadow: 0 0 0 5px color-mix(in srgb, var(--fc) 30%, transparent), 0 12px 24px -10px rgba(90, 40, 0, .5); }
.fit-light .fc li { border-bottom-color: #F0E5D6; color: var(--body-l); }
.fit-light .fc li b { color: var(--ink); font-weight: 800; }
.fit-light .fc-skip li { color: var(--ink); }
.fit-light .fc-skip li i { background: #FFE6DE; color: #D2502F; }
.fit-light .fc-note { align-items: flex-start; background: #FFF4E0; box-shadow: inset 0 0 0 1px #FFE0A8; color: #7A4300; line-height: 1.4; }
.fit-light .fc-note .ic { margin-top: 1px; color: var(--amber-2); }

/* the 3-column table (dark panel on the light section) */
.vs-3 { margin-top: 96px; }
.vs-k { margin: 0; text-align: center; }
.vs-3 .vs-panel { margin-top: 12px; box-shadow: inset 0 0 0 1px rgba(255, 178, 62, .24), 0 60px 110px -50px rgba(70, 30, 0, .75), 0 0 100px -50px rgba(255, 166, 40, .5); }
.vs-3 .vs-table thead .vt-b, .vs-3 .vs-table thead .vt-p, .vs-3 .vs-table thead .vt-x { width: 22%; text-align: center; }
.vs-table thead .vt-x { color: #E9D8C4; }
.vs-table thead .vt-x small { color: var(--muted-d); }
.vs-table tbody .vt-x { color: #CDB79C; font-size: 15px; }
.vs-table tbody .vt-x b { color: #E9D8C4; font-family: var(--f-display); font-size: 24px; font-weight: 800; }
.vt-no { color: #7C6A57; font-size: 20px; font-weight: 700; }

/* section 3: two real-app screens side by side */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; max-width: 1140px; margin: 84px auto 0; }
.duo .up-frame { transform: rotate(-1deg); }
.duo-b .up-frame { transform: rotate(1deg); }
.duo-tie { display: flex; align-items: flex-start; gap: 12px; margin: 16px 0 0; padding: 14px 16px; border-radius: 16px; 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: 16px; font-weight: 600; line-height: 1.4; }
.duo-tie i { display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin-top: -2px; border-radius: 50%; background: var(--c1); color: #150C04; }
.duo-tie .ic { width: 15px; height: 15px; }
.duo-tie b { color: var(--c1); }

/* section 4: who picks this */
.picks { max-width: 1140px; }
@media (min-width: 1100px) { .picks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pick { padding: 34px 24px 28px; }
.pick .mc-tab b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: rgba(255, 255, 255, .3); font-size: 14px; }
.pick h3 { position: relative; margin: 22px 0 0; color: var(--ink); font-family: var(--f-display); font-size: 25px; font-weight: 800; line-height: 1.1; letter-spacing: -.025em; }
.pick p { position: relative; margin: 10px 0 0; font-size: 16.5px; line-height: 1.5; }
.pk-art { position: relative; display: flex; align-items: center; justify-content: center; height: 120px; margin-top: 8px; border-radius: 18px; background: var(--tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c1) 60%, #fff); }
.pk-slots { display: grid; grid-template-columns: repeat(10, 17px); gap: 6px; align-content: center; justify-content: center; }
.pk-slots i { width: 17px; height: 17px; 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)); transform: rotate(-8deg); }
.pk-slots i.b { background: linear-gradient(160deg, #F2FF9C, var(--acid) 60%, #A9E13A); transform: none; }
.pk-lead { gap: 10px; }
.pk-lead .ic { width: 16px; height: 16px; }
.pl-in, .pl-you { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 12px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.pl-in { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c1) 70%, #fff), 0 10px 20px -12px var(--c2); }
.pl-in .ic { color: var(--c2); }
.pl-you { background: var(--ink); color: #fff; }
.pl-you .ic { color: var(--gold); }
.pk-lead .pl-arr { width: 20px; height: 20px; color: var(--c2); }
.pk-grid { gap: 18px; }
.pg-9 { position: relative; display: block; flex: none; width: 88px; height: 88px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--c1) 70%, #fff), 0 12px 22px -14px var(--c2); }
.pg-9 i { position: absolute; inset: 7px; background: radial-gradient(circle at 50% 50%, #3DCB5A 0 12%, #9BD45A 22%, #F5A524 38%, #F0614A 60%, #C2412F 80%); -webkit-mask: radial-gradient(circle, #000 0 30%, transparent 36%) 0 0 / calc(100% / 9) calc(100% / 9); mask: radial-gradient(circle, #000 0 30%, transparent 36%) 0 0 / calc(100% / 9) calc(100% / 9); }
.pg-k { display: grid; color: var(--muted-l); font-size: 14px; font-weight: 600; line-height: 1.15; }
.pg-k b { color: var(--ink); font-family: var(--f-display); font-size: 32px; font-weight: 800; letter-spacing: -.03em; }
.pick-note { display: flex; align-items: center; justify-content: center; gap: 10px; width: fit-content; max-width: 100%; margin: 44px auto 0; padding: 13px 22px; border-radius: 999px; background: var(--ink); color: #F6E8D4; font-size: 16px; font-weight: 600; line-height: 1.4; }
.pick-note .ic { width: 19px; height: 19px; color: var(--gold); }
.pick-note b { color: var(--gold); }

/* section 7: two ways, white cards on the dark section */
.s-fit .ways { margin-top: 60px; }
.dark .way { color: var(--body-l); box-shadow: 0 0 0 1px rgba(255, 194, 61, .35), 0 50px 90px -40px #000, 0 0 80px -40px rgba(255, 166, 40, .45); }
.pz-bars { display: grid; gap: 10px; margin: 20px 0 0; }
.pzb { display: grid; grid-template-columns: 92px minmax(0, 1fr) 48px; align-items: center; gap: 12px; }
.pzb em { color: var(--ink); font-size: 14px; font-style: normal; font-weight: 700; }
.pzb i { display: block; height: 14px; border-radius: 999px; }
.pzb-pro i { width: 100%; background: #EADFCF; }
.pzb-st i { width: 70.1%; background: linear-gradient(90deg, var(--gold), var(--amber-2)); box-shadow: 0 0 14px rgba(255, 166, 40, .5); }
.pzb b { color: var(--ink); font-family: var(--f-display); font-size: 20px; font-weight: 800; letter-spacing: -.02em; text-align: right; }
.pzb-pro b { color: #9C8873; text-decoration: line-through; text-decoration-color: var(--coral); text-decoration-thickness: 2px; }

/* final card: the "not included" line */
.fin-list .fin-out { color: var(--muted-l); font-size: 14.5px; }
.fin-list .fin-out i { background: #F4EBDD; color: #8A6A3C; }

@media (max-width: 991px) {
    .duo { grid-template-columns: minmax(0, 1fr); max-width: 640px; gap: 80px; }
}
@media (max-width: 767px) {
    .seg button { padding: 0 14px; }
    .fit-light { margin-top: 56px; }
    .vs-3 { margin-top: 76px; }
    .vs-3 .vt-name { font-size: 17px; }
    .vs-3 .vs-table tbody .vt-p b, .vs-3 .vs-table tbody .vt-x b, .vs-3 .vs-table tbody .vt-b b { font-size: 20px; }
    .vs-3 .vs-table tbody .vt-p b.vt-sm { font-size: 14.5px; }
    .duo { margin-top: 56px; gap: 64px; }
    .duo .up-frame { transform: none; }
    .duo-tie { font-size: 15px; }
    .picks { gap: 40px; }
    .pick h3 { font-size: 23px; }
    .pick-note { align-items: flex-start; border-radius: 18px; font-size: 15px; text-align: left; }
    .w-pro .way-big { font-size: clamp(44px, 15vw, 66px); }
    .pzb { grid-template-columns: 84px minmax(0, 1fr) 44px; gap: 10px; }
}
@media (max-width: 374px) {
    .seg button { padding: 0 10px; font-size: 14px; }
    .seg .ic { display: none; }
}
@media (max-width: 400px) {
    .vs-3 .vs-panel { padding-left: 6px; padding-right: 6px; }
    .vs-3 .vs-table th, .vs-3 .vs-table td { padding: 10px 4px; }
    .vs-3 .vt-name { font-size: 15px; }
    .vs-3 .vs-table thead small { font-size: 10.5px; }
    .vs-3 .vs-table tbody th { font-size: 12.5px; }
    .vs-3 .vt-f { font-size: 9.5px; letter-spacing: .06em; }
}


/* ==========================================================
   COPY V2 (2026-10-18): profitmapsai.com/pro-starter
   New headline, own VSL, Yes buttons without a price chip,
   hero notes, brand tile, owners section with the report demo,
   single-column FAQ, new footer order.
   ========================================================== */

/* headline: a small gold "Fair Enough." over three lines */
.hl-pre { display: block; margin-bottom: .1em; font-size: .52em; letter-spacing: .03em; text-transform: uppercase; background: linear-gradient(180deg, #FFF1B8 0%, #FFD45C 45%, #F59E1B 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 .45em rgba(255, 178, 62, .3)); }
.hl-pre .nw { background: inherit; -webkit-background-clip: text; background-clip: text; }
.hl-pre .o-mark { width: .7em; height: .74em; margin: 0 .03em; vertical-align: -.07em; -webkit-mask: radial-gradient(circle, transparent .17em, #000 calc(.17em + .5px)); mask: radial-gradient(circle, transparent .17em, #000 calc(.17em + .5px)); }

/* the VSL thumbnail carries its own play button: ring it */
.vs-ring { position: absolute; z-index: 1; left: 7.9%; top: 56.25%; 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 { from { transform: scale(1); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
.vsl-still:hover .vs-ring { transform: translate(-50%, -50%) scale(1.12); }
.vsl-still::after { background: linear-gradient(90deg, rgba(12, 6, 2, .18), transparent 45%); }

/* Yes buttons: the action and a small line under it, no price inside */
.by-txt { display: grid; }
.by-sub { margin-top: 3px; color: rgba(14, 26, 6, .66); font-family: var(--f-body); font-size: 14px; font-weight: 700; letter-spacing: 0; }

/* hero offer card: price line */
.oc-price { align-items: center; }
.oc-rest { display: grid; gap: 2px; }
.oc-rest em { color: var(--ink); font-family: var(--f-mono); font-size: 12.5px; font-style: normal; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

/* the two lines under the button, as cards */
.hero-notes { position: relative; z-index: 3; display: grid; grid-template-columns: 1.08fr 1fr; gap: 16px; max-width: 980px; margin: 28px auto 0; }
.hn { display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 16px 18px; border-radius: 18px; color: #E6D3BA; font-size: 16px; line-height: 1.5; }
.hn i { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 11px; }
.hn .ic { width: 18px; height: 18px; }
.hn b { color: #fff; }
.hn-step { background: linear-gradient(120deg, rgba(255, 178, 62, .14), rgba(255, 178, 62, .04)); box-shadow: inset 0 0 0 1px rgba(255, 194, 61, .35); }
.hn-step i { background: linear-gradient(160deg, #FFE9A0, var(--gold) 55%, var(--amber-2)); color: #2B1600; box-shadow: 0 0 18px -4px rgba(255, 178, 62, .7); }
.hn-not { background: linear-gradient(120deg, rgba(240, 97, 74, .14), rgba(240, 97, 74, .04)); box-shadow: inset 0 0 0 1px rgba(255, 138, 107, .35); }
.hn-not i { background: linear-gradient(160deg, #FFB4A2, var(--coral)); color: #3A0C04; }
.hn-not b { color: #FFB4A2; }

/* limits: the 4th tile is a line of text (brand) */
.hero-offer + .hero-notes + .limits { margin-top: 56px; }
.lm-brand b { align-self: end; color: #CDB79C; font-family: var(--f-body); font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: 0; transition: color .3s; }
.limits.is-st .lm-brand b, .lm-brand.is-on b { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--lime); font-family: var(--f-display); font-size: 25px; font-weight: 800; letter-spacing: -.02em; }
.lm-tag { display: table; margin: 12px auto 0; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: var(--muted-d); font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

/* CTA rows: the copy's trust line under the button */
.cta-sub span + span::before { background: var(--lime-2); }
.buy-row { display: grid; justify-items: center; gap: 16px; max-width: 620px; margin: 80px auto 0; }
.br-price { display: flex; align-items: center; gap: 14px; margin: 0; color: #E6D3BA; font-size: 15.5px; font-weight: 600; }
.br-price 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: 54px; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.br-price em { color: var(--gold); font-family: var(--f-mono); font-size: 12.5px; font-style: normal; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

/* section 3: the part owners notice */
.own { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: 64px; max-width: 1140px; margin: 80px auto 0; }
.own-copy > p { margin: 0 0 18px; font-size: 18px; line-height: 1.6; }
.own-copy > p:first-child { color: #fff; font-family: var(--f-display); font-size: 25px; font-weight: 700; line-height: 1.3; letter-spacing: -.015em; }
.own-punch { --c1: #DDFA9A; --c2: #7BCB3A; }
.own-math { margin: 0; }
.own-math em { color: var(--muted-d); }
.wl-demo { position: relative; margin: 0; }
.wd-in { padding: 22px; border-radius: 26px; background: linear-gradient(180deg, #FFFFFF, #FFF8EC); box-shadow: 0 0 0 1px rgba(255, 194, 61, .45), 0 0 0 8px rgba(255, 178, 62, .1), 0 50px 90px -40px #000, 0 0 90px -40px rgba(255, 166, 40, .55); color: var(--body-l); transform: rotate(1deg); }
.wd-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wd-label { color: var(--ink); font-size: 16px; font-weight: 800; }
.wd-seg { background: #F2E9DC; box-shadow: inset 0 0 0 1px #E8D9C2; }
.wd-seg button { min-height: 36px; padding: 0 16px; color: #7C6A57; font-size: 14px; }
.wd-seg button[data-plan="basic"][aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 2px 6px rgba(60, 30, 0, .15); }
.wd-seg button[data-plan="starter"][aria-pressed="true"] { background: var(--ink); color: var(--gold); box-shadow: 0 4px 14px -4px rgba(60, 30, 0, .6); }
.wd-input { display: block; width: 100%; margin-top: 14px; padding: 13px 16px; border: 0; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px #E8D9C2; color: var(--ink); font: 600 16px var(--f-body); }
.wd-input::placeholder { color: #A8957E; }
.wd-input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--amber-2), 0 0 0 4px rgba(255, 178, 62, .2); }
.rep { overflow: hidden; margin-top: 16px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px #EADCC6, 0 24px 40px -26px rgba(60, 30, 0, .5); }
.rep-top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: linear-gradient(90deg, #1A0F06, #2B1A0C); color: #fff; }
.rep-logo { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(160deg, #F2FF9C, var(--acid) 60%, #A9E13A); color: #0B1D12; font-family: var(--f-display); font-size: 17px; font-weight: 800; }
.rep-name { flex: 1; min-width: 0; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.rep-top small { flex: none; color: #CDB79C; font-size: 12.5px; font-weight: 600; }
.rep-body { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 16px; }
.rep-txt { display: grid; gap: 4px; line-height: 1.3; }
.rep-txt b { color: var(--ink); font-family: var(--f-display); font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.rep-txt span { color: var(--muted-l); font-size: 14px; }
.rep-txt em { margin-top: 4px; color: #D93F2A; font-size: 14.5px; font-style: normal; font-weight: 800; }
.rep-map { display: grid; flex: none; grid-template-columns: repeat(5, 18px); gap: 5px; padding: 9px; border-radius: 14px; background: #1A0F06; }
.rep-map i { width: 18px; height: 18px; border-radius: 50%; }
.rep-map .g { background: #3DCB5A; box-shadow: 0 0 8px rgba(61, 203, 90, .6); }
.rep-map .a { background: #F5A524; }
.rep-map .r { background: #F0614A; }
.rep-map .x { background: #4A3A2C; }
.rep-foot { overflow: hidden; max-height: 44px; padding: 11px 16px; border-top: 1px dashed #EADCC6; color: #8A7663; font-size: 13px; font-weight: 600; text-align: center; transition: max-height .45s var(--ease), padding .45s var(--ease), opacity .3s, border-color .3s; }
.wl-demo.is-st .rep-foot { max-height: 0; padding-top: 0; padding-bottom: 0; border-color: transparent; opacity: 0; }
.wl-demo figcaption { margin-top: 18px; color: var(--muted-d); font-size: 14.5px; }
.real.ill::before { background: var(--amber); box-shadow: 0 0 0 3px rgba(255, 178, 62, .25); }
.own-clip { max-width: 860px; margin: 96px auto 0; }
.own-clip .up-frame { transform: rotate(-.6deg); }

/* final card: no name line (the section title carries it) */
.fin-card { padding-top: 46px; }
.fin-list { margin-top: 0; padding-top: 0; border-top: 0; }
.fin-price { flex-wrap: wrap; margin: 22px 0 0; padding-top: 18px; border-top: 1px dashed #EADCC6; }
.fin-price em { color: #B85F00; font-size: 15.5px; font-style: normal; font-weight: 700; }
.fin-list .fin-out i { background: #FFE6DE; color: #D2502F; }
.fin-list .fin-out b { color: #D2502F; }

/* FAQ: three questions, one column */
.faq-1 { grid-template-columns: minmax(0, 1fr); max-width: 860px; }

/* footer: logo, links, then the legal notes */
.pf-brand + .pf-links { margin-top: 24px; }
.pf-src { color: #C2AE97; }

@media (max-width: 991px) {
    .own { grid-template-columns: minmax(0, 1fr); max-width: 640px; gap: 48px; }
}
@media (max-width: 767px) {
    .by-sub { font-size: 12.5px; }
    .oc-price { justify-content: center; }
    .oc-rest { text-align: left; }
    .hero-notes { grid-template-columns: minmax(0, 1fr); margin-top: 20px; gap: 12px; }
    .hn { padding: 14px; font-size: 15px; }
    .hero-offer + .hero-notes + .limits { margin-top: 40px; }
    .lm-brand b { font-size: 15px; }
    .limits.is-st .lm-brand b, .lm-brand.is-on b { font-size: 21px; }
    .buy-row { margin-top: 60px; }
    .br-price b { font-size: 46px; }
    .own { margin-top: 56px; }
    .own-copy > p { font-size: 16.5px; }
    .own-copy > p:first-child { font-size: 21px; }
    .wd-in { padding: 16px; transform: none; }
    .rep-body { padding: 14px 12px; gap: 12px; }
    .rep-txt b { font-size: 18px; }
    .rep-map { grid-template-columns: repeat(5, 13px); gap: 4px; padding: 7px; }
    .rep-map i { width: 13px; height: 13px; }
    .rep-top small { display: none; }
    .own-clip { margin-top: 64px; }
    .fin-card { padding-top: 40px; }
}
/* the capsule's longer copy: keep it inside the frame at full width */
@media (min-width: 1440px) { .steps { font-size: 17px; } }
.cert-title .ln { display: block; }
@media (max-width: 991px) { .cert-title .ln { display: inline; } }
/* the 4-line headline frame is taller than Pro's: wings start beside the video */
.props-l, .props-r { top: 600px; }
.nothanks { text-align: center; line-height: 1.35; }
@media (max-width: 767px) {
    /* the badge wraps on phones: centre it across the card and start the list below it */
    .fin-card { padding-top: 66px; }
    .fin-badge { left: 18px; right: 18px; justify-content: center; text-align: center; line-height: 1.3; }
    .nothanks { padding: 10px 22px; }
}