/* ==========================================================
   ProfitMaps AI Finder Lite — downsell page ($47)
   A clone of the Business Finder page (Finder/), adjusted to the
   Finder Lite copy. The FE / Pro page language in the Business
   Finder box palette:
   wine black, neon red + coral, lime only as the accent (the box's
   pin and logo). Lime pill = every "Yes" button. Light sections are
   blush creams with a pastel per topic; dark sections are wine black.
   Score colours follow the app: red = no rankings, then orange,
   amber, green = found almost everywhere.
   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: #0E0506;
    --night-2: #170709;
    --wine: #2A0B0E;
    --red: #FF3B3F;
    --red-2: #E5222A;
    --coral: #FF6B57;
    --rose: #FF9A8A;
    --blush: #FFD3CB;
    --acid: #D6F23C;
    --lime: #C6F689;
    --lime-2: #A8EB4B;
    --green: #2E9B3E;
    --ink: #1F080A;
    --body-l: #523739;
    --muted-l: #8A6B6B;
    --body-d: #F2DAD6;
    --muted-d: #C9A6A2;
    /* the box's neon red as a solid chip */
    --g-red: linear-gradient(160deg, #FFD3CA, #FF6F5E 52%, #E5262D);
    --g-lime: linear-gradient(160deg, #F2FF9C, var(--acid) 60%, #A9E13A);
    /* score colours */
    --s-z: linear-gradient(160deg, #FF8E82, #E5262D);
    --s-lo: linear-gradient(160deg, #FFC08A, #F2701E);
    --s-mid: linear-gradient(160deg, #FFE79A, #F2B10C);
    --s-hi: linear-gradient(160deg, #A6F0B7, #25A847);

    --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; }

/* score badges used across the page (0 = no rankings) */
.sc0, .sc-lo, .sc-mid, .sc-hi { display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 7px; border-radius: 8px; color: #fff; font-family: var(--f-mono); font-size: 12.5px; font-style: normal; font-weight: 600; line-height: 1; }
.sc0 { background: #E5262D; box-shadow: 0 0 12px -2px rgba(229, 38, 45, .55); }
.sc-lo { background: #F2701E; }
.sc-mid { background: #F2B10C; color: #3A2600; }
.sc-hi { background: #25A847; }


/* ==========================================================
   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(--coral); 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, 2, 3, 0) 55%, rgba(8, 2, 3, .55) 100%),
        linear-gradient(180deg, var(--night) 0, var(--night-2) 360px, #2A0B0E 900px, #220A0C 1500px, #160708 calc(100% - 140px), #160708 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, 59, 63, .22), transparent 70%),
        radial-gradient(closest-side at 18% 40%, rgba(255, 107, 87, .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, 90, 80, .1);
    transform: rotate(var(--r, -8deg));
}
.ghost-mark::after { content: ""; position: absolute; inset: 26%; border-radius: 50%; border: 1.5px solid rgba(255, 90, 80, .1); }
.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-red.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, 59, 63, .13), 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: 20px; }
.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: #A68481; 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, 107, 87, .5) 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: var(--g-red); color: #2A0306; box-shadow: 0 0 0 5px rgba(255, 90, 80, .2), 0 0 20px -2px rgba(255, 59, 63, .75); }

.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: 600;
    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, #FFCFC5, #FF7D6B 60%, #F0444A); color: #2A0306; font-size: 13.5px; font-weight: 800; box-shadow: inset 0 -2px 0 rgba(120, 0, 10, .2); }
.eb-chip .ic { width: 15px; height: 15px; }
.h-box {
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin: 22px auto 0;
    padding: 36px 56px 54px;
    border-radius: 30px;
    border: 1.5px solid transparent;
    background: linear-gradient(180deg, rgba(54, 14, 18, .82), rgba(22, 7, 9, .86)) padding-box, linear-gradient(135deg, rgba(255, 176, 160, .9), rgba(255, 59, 63, .45) 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, 59, 63, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.hb-c { position: absolute; width: 26px; height: 26px; border: 3px solid #FF5A4E; filter: drop-shadow(0 0 6px rgba(255, 74, 74, .6)); }
.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: #2C0B0E; box-shadow: inset 0 0 0 1px rgba(255, 130, 112, .45), 0 10px 24px -10px #000; }
.hero-h1 {
    margin: 0 auto;
    font-family: var(--f-display);
    font-optical-sizing: auto;
    font-size: clamp(34px, 5.2vw, 84px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.035em;
    color: #fff;
}
.hero-h1 > span { display: block; white-space: nowrap; }
.nw { white-space: nowrap; }
/* the logo mark stands in for the o of "Allowance" */
.o-mark { display: inline-block; width: .54em; height: .58em; margin: 0 .02em 0 .03em; vertical-align: -.02em; border-radius: 30%; background: var(--g-lime); -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)); }
.niche {
    display: inline-block;
    width: 6.9em;
    margin-left: .04em;
    padding: .03em .16em .07em .15em;
    border-radius: .2em;
    background: linear-gradient(180deg, rgba(198, 246, 137, .1), rgba(198, 246, 137, .03));
    box-shadow: inset 0 0 0 .03em rgba(198, 246, 137, .62), 0 0 .55em -.18em rgba(198, 246, 137, .5);
    line-height: 1;
    text-align: left;
    white-space: nowrap;
    transform: rotate(-1.5deg);
}
.nq-w {
    padding-right: .03em;
    border-right: .05em solid var(--lime);
    background: linear-gradient(180deg, #F2FF9C 0%, var(--acid) 55%, #A9E13A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: caret 1.05s steps(1) infinite;
}
.hl-lime {
    background: linear-gradient(180deg, #F2FF9C 0%, var(--acid) 55%, #A9E13A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* line 3: the payoff, neon red with a brush stroke under it */
.hl-red {
    position: relative;
    display: inline-block;
    margin-top: .1em;
    padding-right: .04em;
    background: linear-gradient(180deg, #FFE3DC 0%, #FF8B79 42%, #F2343C 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 .45em rgba(255, 59, 63, .4));
}
.hl-red::after {
    content: "";
    position: absolute;
    left: -3%; right: -4%; bottom: -.2em;
    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='%23FFB3A6'/%3E%3Cstop offset='.55' stop-color='%23FF4A4A'/%3E%3Cstop offset='1' stop-color='%23D9202A'/%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='%23FFE1DA' stroke-opacity='.55' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
html:not(.fw) .hl-red::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); } }

/* the sub-line as one route capsule docked on the frame'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, #300C10, #1C0709) padding-box, linear-gradient(90deg, rgba(255, 150, 132, .8), rgba(255, 59, 63, .35) 50%, rgba(198, 246, 137, .75)) border-box;
    box-shadow: 0 22px 44px -18px #000, 0 0 44px -16px rgba(255, 59, 63, .5);
    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='%23FF6B57' 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, 107, 87, .7) 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: var(--g-red);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .16), 0 0 18px -4px rgba(255, 59, 63, .75);
    color: #2A0306;
}
.st-ic .ic { width: 19px; height: 19px; }
.steps li:last-child .st-ic { background: var(--g-lime); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .16), 0 0 18px -4px rgba(214, 242, 60, .65); color: #0B1D12; }


/* ==========================================================
   VIDEO (tilted red 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(18, 5, 7, .9) 55%, rgba(18, 5, 7, .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, 59, 63, .34), rgba(255, 59, 63, .08) 55%, transparent); pointer-events: none; }
.vsl-frame {
    position: relative;
    padding: 8px;
    border-radius: 26px;
    background: #170708;
    box-shadow: 0 0 0 1px rgba(255, 130, 112, .5), 0 60px 140px -40px rgba(255, 59, 63, .5), 0 40px 80px -30px #000;
}
.vsl-frame::before { content: ""; position: absolute; inset: -14px; z-index: -1; border-radius: 38px; background: linear-gradient(140deg, #FFCFC5, #FF5A4E 45%, #D41F28); transform: rotate(-2.2deg); }
.vsl-player { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 19px; background: #100405; }
.vsl-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* the still is 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: #100405; 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(14, 3, 4, .35), rgba(14, 3, 4, .05) 70%), linear-gradient(180deg, rgba(14, 3, 4, .35), transparent 30%); pointer-events: none; }
.vsl-still .vs-bar, .vsl-still .vs-play { z-index: 1; }
.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, 130, 112, .3); color: #F8DCD6; 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: var(--g-lime); color: #0E1A06; transform: rotate(-9deg); box-shadow: 0 0 0 10px rgba(198, 246, 137, .2), 0 0 50px rgba(198, 246, 137, .5), 0 18px 30px -10px #000; transition: transform .3s var(--ease); }
.vs-play .ic { width: 40px; height: 40px; margin-left: 4px; transform: rotate(9deg); }
.vsl-still:hover img { transform: scale(1.02); }
.vsl-still:hover .vs-play { transform: rotate(-9deg) scale(1.06); }
/* the Finder Lite still has its own play cue ("Watch Chad explain it"): a pulsing ring sits on its play icon */
.vs-ring { position: absolute; z-index: 1; left: 7.9%; top: 65.7%; width: 6.4%; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 3px var(--lime), 0 0 26px rgba(198, 246, 137, .7); transform: translate(-50%, -50%); transition: transform .3s var(--ease); }
.vs-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 3px rgba(198, 246, 137, .8); animation: vs-pulse 1.8s ease-out infinite; }
@keyframes vs-pulse { from { transform: scale(1); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
.vsl-still:hover .vs-ring { transform: translate(-50%, -50%) scale(1.12); }


/* ==========================================================
   ONE SEARCH (tiles + 50 businesses + the two filters)
   ========================================================== */
.fpanel {
    position: relative;
    z-index: 3;
    max-width: 980px;
    margin: 80px auto 0;
    padding: 24px 28px 22px;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(50, 13, 17, .96), rgba(22, 7, 9, .97));
    box-shadow: inset 0 0 0 1px rgba(255, 110, 95, .26), 0 40px 80px -40px #000, 0 0 80px -40px rgba(255, 59, 63, .55);
}
.lm-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lm-label { display: inline-flex; align-items: center; gap: 10px; color: #FBE1DC; 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: #FF5A4E; box-shadow: 0 0 0 4px rgba(255, 90, 78, .22), 0 0 12px #FF5A4E; }
/* 50 businesses, logo squircles coloured by score. The tray is solid so
   the squircle's hole can be painted (a mask would also cut the ring that
   marks the few left when both filters are on) */
.slots79 i { --cc: var(--s-z); aspect-ratio: 1; border-radius: 30%; }
.slots79 .lo { --cc: var(--s-lo); }
.slots79 .mid { --cc: var(--s-mid); }
.slots79 .hi { --cc: var(--s-hi); }
.lm-cap { margin: 0; color: #FBE3DE; font-size: 16px; font-weight: 700; text-align: center; }
.lm-cap b { color: var(--lime); }


/* ==========================================================
   OFFER CARD (FE light box, Business Finder 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, #FFF8F6 60%, #FFEEE9) padding-box, linear-gradient(135deg, #FFB4A6, #FF4A4A 40%, rgba(255, 255, 255, .6) 68%, #B9EE6E) border-box;
    box-shadow: 0 0 0 8px rgba(255, 74, 74, .16), 0 0 100px -20px rgba(255, 59, 63, .55), 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(110, 10, 15, .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, 59, 63, .5), 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 #F2D4CE; color: #C8262D; 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(110, 10, 15, .35)) drop-shadow(0 0 14px rgba(255, 90, 80, .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): the real Find businesses form
   on the left, Finder Lite next to Business Finder on the right
   ========================================================== */
.props-l, .props-r { position: absolute; z-index: 4; top: 520px; display: none; pointer-events: none; }
.props-l { left: 26px; width: 262px; }
.props-r { right: 26px; width: 290px; }
.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%; }
.fw-card { overflow: hidden; border-radius: 18px; background: linear-gradient(180deg, #2A0B0E, #170709); box-shadow: 0 0 0 1px rgba(255, 130, 112, .32), 0 40px 70px -30px #000, 0 0 70px -24px rgba(255, 59, 63, .45); color: #F6DCD7; }
.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; white-space: nowrap; }
.fu-bar i { flex: none; 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; }
.fw-body { display: grid; gap: 6px; padding: 14px 14px 16px; }
.fw-k { margin-top: 4px; color: var(--muted-d); font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.fw-k:first-child { margin-top: 0; }
.fw-in { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 10px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: #fff; font-size: 14px; font-weight: 700; }
.fw-in .ic { width: 15px; height: 15px; color: var(--rose); }
.fw-on { box-shadow: inset 0 0 0 1.5px rgba(198, 246, 137, .7), 0 0 18px -6px rgba(198, 246, 137, .6); }
.fw-on .ic { color: var(--lime); }
.fw-row { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; padding-top: 10px; border-top: 1px dashed rgba(255, 255, 255, .12); color: var(--muted-d); font-size: 12px; font-weight: 600; }
.fw-row b { color: #fff; }
.fw-go { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; margin-top: 6px; border-radius: 10px; background: var(--g-lime); color: #0E1A06; font-size: 13.5px; font-weight: 800; box-shadow: 0 0 22px -6px rgba(198, 246, 137, .7); }
.fw-go .ic { width: 15px; height: 15px; }
/* callouts */
.callout { position: absolute; z-index: 2; padding: 12px 14px; border-radius: 16px; background: linear-gradient(180deg, #FFFFFF, #FFF5F2); box-shadow: 0 0 0 1px rgba(255, 130, 112, .4), 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: #C8262D; 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; }
.callout p { margin: 6px 0 0; font-weight: 700; }
.props-l .callout, .props-r .callout { position: relative; width: 236px; margin-top: -14px; }
.props-l .callout { margin-left: 44px; }
.props-r .callout { margin-left: 22px; }

/* floor pins: upright score bubbles */
.floor-pins { position: absolute; inset: 0; z-index: 0; display: none; pointer-events: none; opacity: .3; filter: saturate(.75); }
.fp { position: absolute; left: var(--x); top: var(--y); display: grid; place-items: center; min-width: calc(30px * var(--s)); height: calc(30px * var(--s)); padding: 0 calc(7px * var(--s)); border-radius: 999px; background: var(--s-z); color: #fff; font-size: calc(12px * var(--s)); font-weight: 800; transform: translateX(-50%); box-shadow: 0 0 16px rgba(229, 38, 45, .5); }
.fp::after { content: ""; position: absolute; 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%); }
.fp.s-lo { background: var(--s-lo); box-shadow: 0 0 16px rgba(242, 112, 30, .45); }
.fp.s-mid { background: var(--s-mid); color: #3A2600; box-shadow: 0 0 16px rgba(242, 177, 12, .4); }
.fp.s-hi { background: var(--s-hi); color: #04210C; box-shadow: 0 0 16px rgba(37, 168, 71, .45); }

@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; }
/* light sections: glows fade out before the seam at the bottom */
.sec:not(.dark) > .sec-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)); }
/* dark sections: also clear of the seam at the top */
.sec.dark > .sec-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)); }
.s-head { position: relative; z-index: 2; max-width: 1160px; 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: #FF5A4E; box-shadow: 0 0 0 3px rgba(255, 90, 78, .3); }
.dark .kicker { background: rgba(255, 90, 80, .1); box-shadow: inset 0 0 0 1px rgba(255, 110, 95, .42); color: #FFD9D1; }
.s-title { margin: 0; color: var(--ink); font-family: var(--f-display); font-size: clamp(38px, 4.7vw, 70px); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.dark .s-title { color: #fff; }
.s-title-2l .ln { display: block; }
.s-title-xl { font-size: clamp(42px, 6vw, 88px); }
.mk { padding: 0 .06em; background: linear-gradient(transparent 58%, rgba(255, 128, 108, .62) 58%, rgba(255, 128, 108, .62) 90%, transparent 90%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hl-r { background: linear-gradient(180deg, #FFE3DC 0%, #FF8B79 45%, #F2343C 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .03em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.s-lede { max-width: 660px; 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, 74, 74, .14); transform: rotate(var(--r)); }
.sq::after { content: ""; position: absolute; inset: 27%; border-radius: 50%; border: 1.5px solid rgba(255, 74, 74, .14); }

/* "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: #170708; 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: #24090C; color: #D9B6B0; 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 { background: #fff; }
.win-light .win-bar { background: #F6EDEB; color: #7A5D5C; }
.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 { margin: 0; }
.clip figcaption { margin-top: 14px; font-size: 14.5px; line-height: 1.5; }

/* 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; }
.c-rose { --c1: #FFB8AC; --c2: #FF4A4A; --tint: #FFF0EE; --deep: #C8262D; }
.c-violet { --c1: #CDBFFF; --c2: #8B5CF6; --tint: #F3EFFF; --deep: #6B3FD6; }
/* small icon tiles */
.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-peach { background: linear-gradient(160deg, #FFC1A6, #FF7A59); }
.t-rose { background: linear-gradient(160deg, #FFB8AC, #FF4A4A); }
.t-lime { background: linear-gradient(160deg, #DDFA9A, #7BCB3A); }
/* checkbox */
.cb { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px #CDBDBB; color: transparent; }
.cb.on { background: #2E9B3E; box-shadow: none; color: #fff; }
.cb .ic { width: 12px; height: 12px; }


/* ==========================================================
   SEAMS (FE HUD edge: cut corners, centre tab, rails, chevrons)
   ========================================================== */
.seam { --cut: 46px; --r1: #FF5A4E; --r2: #C6F689; --chev: #FF5A4E; --glow1: rgba(255, 90, 78, .75); --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: #E0353B; --r2: #7BCB3A; --chev: #E0353B; --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); } }


/* ==========================================================
   SECTION 2 — THE SAME TOOL, IN THE REAL APP (light)
   ========================================================== */
.s-real { background: linear-gradient(180deg, #FFF4F1, #FFFCFA 70%); }
.s2-bg { background: radial-gradient(700px 420px at 12% 12%, rgba(255, 184, 172, .45), transparent 70%), radial-gradient(760px 460px at 90% 20%, rgba(155, 208, 255, .38), transparent 70%), radial-gradient(900px 500px at 50% 72%, rgba(255, 218, 143, .3), 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: 0; top: 206px; display: none; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px #F4DCD7, 0 26px 44px -20px rgba(140, 20, 25, .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: #F3E7E5; color: #A3807C; }
.sb-from .ic { width: 28px; height: 28px; }
.sb-to { background: var(--g-red); color: #2A0306; box-shadow: 0 0 24px -4px rgba(255, 59, 63, .75); }
.sb-arr { width: 22px; height: 22px; color: var(--coral); }
@media (min-width: 1366px) { .s2-badge { display: flex; } }
.td { position: relative; align-self: stretch; 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; }
.td .clip { margin-top: 18px; }


/* ==========================================================
   SECTION 3 — WHAT'S THE SAME. WHAT'S SMALLER. (dark)
   ========================================================== */
.s3-bg { background: radial-gradient(900px 480px at 50% 6%, rgba(255, 59, 63, .22), transparent 70%), radial-gradient(700px 600px at 6% 55%, rgba(255, 107, 87, .12), transparent 70%), radial-gradient(700px 600px at 94% 60%, rgba(139, 92, 246, .12), transparent 70%), radial-gradient(800px 500px at 50% 92%, rgba(198, 246, 137, .08), transparent 70%); }
.gm3 { --w: 460px; --r: -12deg; left: -240px; top: 22%; }
.gm4 { --w: 520px; --r: 10deg; right: -280px; top: 58%; }
/* HUD corner (used on light cards) and the range sliders */
.hud-c { position: absolute; right: 18px; top: 18px; width: 22px; height: 22px; border-top: 3px solid #FF5A4E; border-right: 3px solid #FF5A4E; border-radius: 0 8px 0 0; filter: drop-shadow(0 0 5px rgba(255, 90, 78, .55)); }
input[type=range] { --p: 0%; width: 100%; height: 30px; margin: 22px 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, #FF8B79, #E5262D) 0 0 / var(--p) 100% no-repeat, #F3E1DE; }
input[type=range]::-moz-range-track { height: 12px; border-radius: 999px; background: linear-gradient(90deg, #FF8B79, #E5262D) 0 0 / var(--p) 100% no-repeat, #F3E1DE; }
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, 74, 74, .3), 0 6px 14px rgba(60, 0, 5, .35); -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, 74, 74, .3), 0 6px 14px rgba(60, 0, 5, .35); }
.red { color: #D2262C; }
.grn { color: #2E8A2E; }
.wall-punch { max-width: 900px; margin: 70px auto 0; color: #fff; font-family: var(--f-display); font-size: clamp(30px, 3.6vw, 50px); font-weight: 800; line-height: 1.1; letter-spacing: -.035em; text-align: center; text-wrap: balance; }
.wall-punch .hl-lime { filter: drop-shadow(0 0 24px rgba(214, 242, 60, .25)); }


/* ==========================================================
   SECTION 6 — A QUICK REMINDER: SEARCH. SCORE. PICK. (light)
   ========================================================== */
.s-how { background: #FFF9F6; }
.s4-bg { background: radial-gradient(760px 460px at 10% 30%, rgba(205, 191, 255, .38), transparent 70%), radial-gradient(760px 460px at 92% 22%, rgba(255, 184, 172, .42), transparent 70%), radial-gradient(800px 500px at 60% 85%, rgba(159, 232, 192, .3), transparent 70%); }
.sq3 { --w: 280px; --r: 14deg; right: -100px; top: 120px; }
.sq4 { --w: 220px; --r: -10deg; left: -80px; top: 640px; }
.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; max-width: 1180px; margin: 70px auto 0; padding: 0; list-style: none; }
.hw { position: relative; display: flex; flex-direction: column; padding: 28px 26px 30px; 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); }
/* the route: an arrow disc in each gap */
.hw + .hw::before { content: ""; position: absolute; left: -32px; top: 54px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 6l6 6-6 6'/%3E%3C/svg%3E") center / 15px no-repeat; box-shadow: 0 0 0 5px #FFF9F6; }
.hw-num { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 30%; background: linear-gradient(160deg, var(--c1), var(--c2)); color: #fff; font-family: var(--f-display); font-size: 30px; font-weight: 800; text-shadow: 0 1px 2px rgba(0, 0, 0, .15); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15), 0 12px 24px -10px var(--c2); transform: rotate(-6deg); }
.hw h3 { margin: 0; color: var(--ink); font-family: var(--f-display); font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.035em; }
.hw p { margin: 10px 0 0; font-size: 16.5px; line-height: 1.55; }
.hw-vis { display: grid; align-content: center; gap: 8px; min-height: 170px; margin: 22px 0 24px; padding: 16px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--c1) 70%, #fff), 0 18px 34px -22px color-mix(in srgb, var(--c2) 80%, transparent); }
/* 1: two fields, then the list comes back */
.hv-field { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: 12px; background: #F5F9FF; box-shadow: inset 0 0 0 1px #CFE2FB; color: var(--ink); font-size: 15.5px; font-weight: 700; }
.hv-field .ic { width: 17px; height: 17px; color: var(--deep); }
.hv-field:nth-child(2) { box-shadow: inset 0 0 0 1.5px #4F8DF7, 0 0 0 4px rgba(79, 141, 247, .14); }
.hv-back { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 4px; padding: 9px 12px; border-radius: 12px; background: var(--ink); color: #DCEBFF; font-size: 14px; font-weight: 600; }
.hv-back b { color: #fff; font-family: var(--f-display); font-size: 17px; }
/* 2: the 0-99 scale, a marker runs along it */
/* 3: tick the weak ones */


/* ==========================================================
   SECTION 4 — ONE NICHE. ONE TOWN. (light) — background; the planner is in the Finder Lite block
   ========================================================== */
.s6-bg { background: radial-gradient(800px 460px at 50% 12%, rgba(255, 184, 172, .42), transparent 70%), radial-gradient(700px 500px at 6% 60%, rgba(155, 208, 255, .32), transparent 70%), radial-gradient(700px 500px at 96% 70%, rgba(205, 191, 255, .32), transparent 70%); }
.sq5 { --w: 260px; --r: -10deg; left: -110px; top: 200px; }
.sq6 { --w: 300px; --r: 12deg; right: -120px; top: 1000px; }


/* ==========================================================
   SECTION 7 — SCREENS (dark)
   ========================================================== */
.s-look { background: #110506; }
.s7-bg { background: radial-gradient(900px 460px at 50% 4%, rgba(255, 59, 63, .2), transparent 70%), radial-gradient(800px 600px at 8% 40%, rgba(139, 92, 246, .1), transparent 70%), radial-gradient(800px 600px at 92% 70%, rgba(79, 141, 247, .1), transparent 70%); }
.shot { display: grid; align-content: start; 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: #24090C; 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; }
.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); }


/* ==========================================================
   SECTION 5 — STEP 4 + LITE FITS IF... (dark): the fit cards and little maps
   ========================================================== */
.s9-bg { background: radial-gradient(900px 460px at 50% 6%, rgba(255, 59, 63, .2), transparent 70%), radial-gradient(700px 600px at 18% 60%, rgba(255, 107, 87, .1), transparent 70%), radial-gradient(700px 600px at 84% 60%, rgba(61, 203, 90, .12), transparent 70%); }
.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: 1060px; margin: 64px auto 0; }
.fc { position: relative; border-radius: 26px; background: linear-gradient(180deg, #24090C, #170709); 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, .38); }
.fc-skip { --fc: #FF7A66; --fc2: #C8262D; --fc-line: rgba(255, 122, 102, .32); }
.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: 6px 30px 18px; list-style: none; }
.fc li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px dashed rgba(255, 255, 255, .1); color: #F6E2DE; 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, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: #F2D6D1; font-size: 15px; font-weight: 600; line-height: 1.4; }
.fc-note .ic { width: 20px; height: 20px; color: var(--rose); }
/* the little map: where the scans land */
.sm { position: relative; height: 176px; margin: 22px 22px 6px; overflow: hidden; border-radius: 16px; background: #1E080B; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.sm-streets { position: absolute; inset: 0; background: linear-gradient(28deg, transparent 47%, rgba(255, 107, 87, .28) 47.6% 49.2%, transparent 49.8%), linear-gradient(-62deg, transparent 58%, rgba(255, 107, 87, .2) 58.5% 59.6%, transparent 60.2%), linear-gradient(rgba(255, 107, 87, .1) 1px, transparent 1px) 0 0 / 100% 26px, linear-gradient(90deg, rgba(255, 107, 87, .1) 1px, transparent 1px) 0 0 / 34px 100%; }
.smp { position: absolute; left: var(--x); top: var(--y); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--s-z); box-shadow: 0 0 0 3px rgba(0, 0, 0, .35), 0 0 12px rgba(229, 38, 45, .6); }
.smp.p-mid { background: var(--s-mid); box-shadow: 0 0 0 3px rgba(0, 0, 0, .35); }
.smp.p-hi { background: var(--s-hi); box-shadow: 0 0 0 3px rgba(0, 0, 0, .35), 0 0 12px rgba(37, 168, 71, .5); }
.sx { position: absolute; left: var(--x); top: var(--y); width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; border: 2px dashed rgba(255, 190, 178, .85); }
.sx::before, .sx::after { content: ""; position: absolute; left: 50%; top: 50%; background: rgba(255, 190, 178, .85); }
.sx::before { width: 52px; height: 2px; margin: -1px 0 0 -26px; }
.sx::after { width: 2px; height: 52px; margin: -26px 0 0 -1px; }
.sx-on { border: 2px solid var(--lime); box-shadow: 0 0 14px rgba(198, 246, 137, .7); animation: lock 2.2s ease-in-out infinite; }
.sx-on::before, .sx-on::after { background: var(--lime); }
@keyframes lock { 0%, 100% { transform: scale(1); } 50% { transform: scale(.82); } }
.sm-tag { position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 8px; background: rgba(10, 2, 3, .78); color: #F6E2DE; font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.sm-aim .sm-tag { color: var(--lime); }
.gtk { display: flex; align-items: center; gap: 12px; max-width: 760px; margin: 34px auto 0; padding: 14px 18px; border-radius: 16px; background: rgba(198, 246, 137, .07); box-shadow: inset 0 0 0 1px rgba(198, 246, 137, .3); color: #ECF6DC; font-size: 15.5px; line-height: 1.5; }
.gtk i { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--g-lime); color: #0E1A06; }
.gtk .ic { width: 18px; height: 18px; }
.gtk b { color: var(--lime); }


/* ==========================================================
   SECTION 8 — TWO WAYS + GUARANTEE (light)
   ========================================================== */
.s-math { background: #FFF8F4; }
.s10-bg { background: radial-gradient(800px 460px at 50% 12%, rgba(255, 184, 172, .45), transparent 70%), radial-gradient(700px 500px at 6% 50%, rgba(159, 232, 192, .35), transparent 70%), radial-gradient(700px 500px at 96% 72%, rgba(255, 218, 143, .38), transparent 70%); }
.sq9 { --w: 260px; --r: -10deg; left: -110px; top: 200px; }
.sq10 { --w: 300px; --r: 12deg; right: -120px; top: 900px; }
.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 #F4DDD8, 0 50px 90px -50px rgba(140, 20, 25, .4); }
.way::before { content: ""; position: absolute; left: 32px; right: 32px; top: -1px; height: 4px; border-radius: 0 0 6px 6px; background: linear-gradient(90deg, #FF8B79, #E5262D); }
.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: #FF8B79; font-family: var(--f-display); font-size: 15px; letter-spacing: 0; }
.way-big { margin: 18px 0 6px; background: linear-gradient(180deg, #FF6B57, #C8262D); -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: #FFF0ED; box-shadow: inset 0 0 0 1px #F8D3CC; }
.way-eq i { color: var(--coral); font-size: 20px; font-style: normal; font-weight: 800; }
.slots79 { display: grid; grid-template-columns: repeat(25, minmax(0, 1fr)); gap: 5px; margin: 20px 0 0; }
.slots79 i { background: var(--cc); -webkit-mask: radial-gradient(circle, transparent 22%, #000 calc(22% + .5px)); mask: radial-gradient(circle, transparent 22%, #000 calc(22% + .5px)); }
.way-txt { margin: 18px 0 0; font-size: 15.5px; line-height: 1.5; }
.way-txt b { color: var(--ink); }
.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, #F1E4E1; }
.w-client input[type=range]::-moz-range-track { background: linear-gradient(90deg, #9FE8C0, #2FB27A) 0 0 / var(--p) 100% no-repeat, #F1E4E1; }
.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); }
.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; }
/* the guarantee certificate */
.cert { position: relative; display: grid; grid-template-columns: 270px minmax(0, 1fr); align-items: center; gap: 44px; max-width: 980px; margin: 120px auto 0; padding: 50px 56px; border-radius: 30px; background: linear-gradient(180deg, #FFFFFF, #FFF8F6); box-shadow: 0 0 0 1.5px #F5CCC4, inset 0 0 0 10px #FFF8F6, inset 0 0 0 11.5px #F6DCD6, 0 60px 100px -50px rgba(140, 20, 25, .45); }
.cert-c { position: absolute; width: 30px; height: 30px; border: 3px solid #FF5A4E; }
.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, 10, 15, .32)) drop-shadow(0 0 30px rgba(255, 90, 80, .3)); }
.cert-ribbon { position: relative; z-index: 1; margin-top: -24px; padding: 7px 16px; border-radius: 8px; background: #3A0609; color: #FFB9AC; 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, 5, 10, .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: #C8262D; font-weight: 700; text-underline-offset: 3px; }


/* ==========================================================
   SECTION 9 — FINAL OFFER (dark, the only buy button)
   ========================================================== */
.s-final { overflow: clip; background: #0E0506; padding-bottom: 170px; }
.s11-bg { -webkit-mask-image: linear-gradient(#000 calc(100% - 260px), transparent calc(100% - 110px)) !important; mask-image: linear-gradient(#000 calc(100% - 260px), transparent calc(100% - 110px)) !important; background: radial-gradient(1000px 520px at 50% 6%, rgba(255, 59, 63, .24), transparent 70%), radial-gradient(900px 600px at 30% 60%, rgba(255, 74, 74, .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: 40px; height: 520px; background: linear-gradient(rgba(255, 90, 80, .45) 1.5px, transparent 1.5px) 0 0 / 100% 46px, linear-gradient(90deg, rgba(255, 90, 80, .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 45%, #000 70%, transparent 96%); mask-image: linear-gradient(transparent, #000 45%, #000 70%, transparent 96%); 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, 59, 63, .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, 90, 80, .55); box-shadow: 0 0 30px rgba(255, 59, 63, .35), inset 0 0 30px rgba(255, 59, 63, .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, 90, 80, .6), transparent); border-color: rgba(255, 170, 155, .7); }
.fin-card { position: relative; padding: 40px 40px 30px; border: 1.5px solid transparent; border-radius: 32px; background: linear-gradient(160deg, #FFFFFF, #FFF8F6 60%, #FFEEE9) padding-box, linear-gradient(135deg, #FFB4A6, #FF4A4A 40%, rgba(255, 255, 255, .6) 68%, #B9EE6E) border-box; box-shadow: 0 0 0 8px rgba(255, 74, 74, .16), 0 0 120px -20px rgba(255, 59, 63, .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, #FFCFC5, #FF7D6B 60%, #F0444A); color: #2A0306; font-size: 14px; font-weight: 800; box-shadow: 0 10px 20px -8px rgba(120, 0, 10, .7), inset 0 -2px 0 rgba(120, 0, 10, .2); }
.fin-badge .ic { width: 16px; height: 16px; }
.fin-name { margin: 0; color: var(--ink); font-family: var(--f-display); font-size: 32px; font-weight: 800; line-height: 1.1; 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: #FFB3A6; 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 #F0D3CD; 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: var(--g-lime); 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, 74, 74, .42), transparent 76%); pointer-events: none; }
.jv-wrap::after { content: ""; position: absolute; inset: -4px; z-index: 2; border-radius: 16px; border: 2px solid rgba(255, 74, 74, .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(110, 10, 15, .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); }


/* ==========================================================
   SECTION 10 — FAQ + the one "No thanks" (light)
   ========================================================== */
.s-faq { background: #F7FAF0; padding-bottom: 150px; }
.s12-bg { background: radial-gradient(800px 400px at 50% 8%, rgba(198, 246, 137, .35), transparent 70%), radial-gradient(620px 520px at 4% 60%, rgba(255, 184, 172, .3), transparent 70%), radial-gradient(620px 520px at 96% 50%, rgba(255, 184, 172, .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, #F2CFC8, #E7DEDC 45%, #E7DEDC); 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, #FF4A4A, #FF9A8A 40%, #B9EE6E); }
.faq details[open]::before { background: linear-gradient(180deg, #FFFAF8, #fff); }
.faq summary { position: relative; 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; }
.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: #F8EAE7; color: #9A4A44; font-family: var(--f-mono); font-size: 12px; font-weight: 600; }
.faq details[open] summary b { background: var(--g-red); color: #2A0306; }
.faq summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: #F8EAE7 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='%23C8262D' 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='%23FF8B79' 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: #C8262D; font-weight: 700; }
/* after the questions: one last Yes, then the page's only No thanks */
.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; min-height: 52px; padding: 0 28px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px #E2CFCB; color: #735E5D; 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 #BFA6A2; }


/* ==========================================================
   FOOTER (opens with the same HUD seam)
   ========================================================== */
.pf-foot { position: relative; isolation: isolate; overflow: clip; padding: 120px 0 0; background: linear-gradient(180deg, #0E0506, #130608 50%, #0A0304); color: #BC9F9B; }
.pf-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(800px 360px at 50% 120px, rgba(255, 59, 63, .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(--coral); 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: #D8C0BC; }
.pf-disc { padding-top: 16px; border-top: 1px dashed rgba(255, 255, 255, .1); color: #A88A86; }
.pf-disc b { color: #F0DEDA; }
.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: #EAD7D3; 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, 107, 87, .55); }
.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: #8E7370; 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, 90, 80, .17); background: linear-gradient(180deg, rgba(255, 90, 80, .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(12, 3, 4, .94); }
.lb[hidden] { display: none; }
.lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; color: #F6E2DE; 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; }


/* ==========================================================
   HEADLINE SIZING (CLS): fixed line breaks, and the frame's width is
   set in em of the headline so it never resizes when Bricolage
   replaces the fallback font
   ========================================================== */
.br-m { display: none; }
/* the hero column is a little wider than the page so the big type still fits;
   the h1's width in em is set in the Finder Lite block */
.hero-copy { max-width: 1300px; }


/* ==========================================================
   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: 1099px) {
    .how { gap: 22px; }
    .hw + .hw::before { left: -26px; }
    .hw { padding: 24px 20px 26px; }
}
@media (max-width: 991px) {
    .h-box { padding: 36px 30px 50px; }
    .offer-card { grid-template-columns: 200px minmax(0, 1fr); gap: 30px; padding: 30px 30px 26px 24px; }
    .oc-trust { flex-wrap: wrap; }
    .how { grid-template-columns: minmax(0, 1fr); max-width: 560px; gap: 40px; }
    .hw + .hw::before { left: 50%; top: -36px; margin-left: -15px; transform: rotate(90deg); }
    .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; }
}
/* small tablets: the capsule is wider than the frame, so it sits just under it (FE) */
@media (min-width: 768px) and (max-width: 1279px) {
    .h-box { padding-bottom: 38px; }
    .steps { margin-top: 20px; font-size: 15.5px; }
}
@media (max-width: 767px) {
    body { font-size: 16px; }
    .sec { padding: 100px 0 110px; }
    .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; }
    .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; }
    /* phones: FE's compact hero. The headline stays in the lit frame; the
       three steps dock on its bottom edge as one card of three columns */
    .hero-copy { padding: 34px 16px 0; }
    .h-box { width: 100%; margin-top: 18px; padding: 36px 12px 66px; border-radius: 24px; }
    .h-box .eyebrow { 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; }
    .br-m { display: inline; }
    .hero-h1 { font-size: min(calc((100vw - 64px) / 7.6), 52px); line-height: 1.06; letter-spacing: -.04em; }
    .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='%23FF6B57' 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; }
    .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; }
    .lm-head { flex-direction: column; gap: 14px; }
    .offer-card { padding: 22px 18px 22px; border-radius: 26px; }
    .oc-lead { font-size: 20px; }
    .oc-price { gap: 12px; }
    .oc-price b { font-size: 56px; }
    .oc-rest { padding-left: 12px; font-size: 14px; text-align: left; }
    .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; }
    .wall-punch { margin-top: 56px; }
    .hw h3 { font-size: 30px; }
    .fc h3 { padding: 22px 22px 20px; font-size: 24px; }
    .sm { margin: 18px 16px 4px; height: 150px; }
    .fc ul { padding: 4px 22px 14px; }
    .fc li { font-size: 15.5px; }
    .fc-note { margin: 0 22px 22px; }
    .gtk { align-items: flex-start; font-size: 14.5px; }
    .way { padding: 26px 20px 22px; border-radius: 24px; }
    .way-big { font-size: 66px; }
    .slots79 { 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; }
    .cert { margin-top: 90px; 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; }
    .faq-end { margin-top: 60px; }
    .nothanks { font-size: 15px; }
    .fin-card { padding: 36px 20px 24px; border-radius: 26px; }
    .fin-badge { left: 20px; }
    .fin-name { font-size: 26px; }
    .fin-price b { font-size: 60px; }
    .fin-list li { font-size: 15px; }
    .pf-foot { padding-top: 96px; }
    .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: 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: 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; }
}


/* ==========================================================
   FINDER LITE (downsell) — a clone of Finder/, rebuilt on the
   profitmapsai.com/finder-lite copy: the 10-of-30 searches meter,
   the Ocoee proof, the 2-column table, the four steps for tonight,
   the message to the owner, the fit maps, the guarantee steps and
   the two math cards.
   ========================================================== */

/* headline: three lines, the frame width is set in em so it never
   resizes when Bricolage replaces the fallback */
.hero-h1 { font-size: clamp(38px, 6.6vw, 100px); }
@media (min-width: 768px) { .hero-h1 { width: 10.6em; max-width: 100%; } }
@media (min-width: 1280px) { .h-box { padding-left: 70px; padding-right: 70px; } }
.hl-c .hl-red { margin-top: .06em; }
/* capsule: the last disc is a zero */
.st-zero { font-family: var(--f-display); font-size: 19px; font-weight: 800; line-height: 1; }

/* hero: searches a month, 10 of 30 */
.sp { position: relative; z-index: 3; max-width: 980px; margin: 80px auto 0; padding: 24px 28px 20px; border-radius: 26px; background: linear-gradient(180deg, rgba(50, 13, 17, .96), rgba(22, 7, 9, .97)); box-shadow: inset 0 0 0 1px rgba(255, 110, 95, .26), 0 40px 80px -40px #000, 0 0 80px -40px rgba(255, 59, 63, .55); }
.sp-tags { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.sp-tags > span { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px 0 9px; border-radius: 999px; background: rgba(198, 246, 137, .1); box-shadow: inset 0 0 0 1px rgba(198, 246, 137, .5); color: #fff; font-size: 14.5px; font-weight: 700; }
.sp-tags i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--g-lime); color: #0E1A06; }
.sp-tags .ic { width: 13px; height: 13px; }
.sp-row { display: grid; grid-template-columns: 172px minmax(0, 1fr) 62px 74px; align-items: center; gap: 18px; margin-top: 16px; padding: 16px 20px; border-radius: 18px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.sp-lite { background: rgba(198, 246, 137, .06); box-shadow: inset 0 0 0 1.5px rgba(198, 246, 137, .5), 0 0 44px -20px rgba(198, 246, 137, .55); }
.sp-name { display: grid; line-height: 1.2; }
.sp-name b { color: #fff; font-family: var(--f-display); font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.sp-name small { color: var(--muted-d); font-size: 13px; font-weight: 600; }
.sp-slots { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 5px; }
.sp-slots i { aspect-ratio: 1; border-radius: 30%; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14); transition: background .3s, box-shadow .3s, transform .35s var(--ease); }
.sp-slots i.on { box-shadow: none; -webkit-mask: radial-gradient(circle, transparent 22%, #000 calc(22% + .5px)); mask: radial-gradient(circle, transparent 22%, #000 calc(22% + .5px)); }
.sp-lite .sp-slots i { transform: scale(.86); }
.sp-lite .sp-slots i.on { background: var(--g-lime); transform: rotate(-8deg); }
.sp-full .sp-slots i.on { background: var(--g-red); }
.sp-n { color: #fff; font-family: var(--f-display); font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -.04em; text-align: right; font-variant-numeric: tabular-nums; }
.sp-lite .sp-n { background: linear-gradient(180deg, #F2FF9C, var(--acid) 55%, #A9E13A); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp-price { color: var(--lime); font-family: var(--f-display); font-size: 27px; font-weight: 800; letter-spacing: -.03em; text-align: right; }
.sp-full .sp-price s { color: #A88A86; text-decoration-color: var(--red); text-decoration-thickness: 3px; }
.sp .lm-cap { margin-top: 16px; }

/* offer card: $97 struck out next to the price, sub-line under the button */
.oc-was { color: #B49390; font-family: var(--f-display); font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.04em; text-decoration: line-through; text-decoration-color: #FF4A4A; text-decoration-thickness: 3px; margin-right: -6px; }
.oc-rest b { color: var(--ink); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.by-sub { margin: 10px 0 0; color: var(--muted-l); font-size: 14px; font-weight: 600; text-align: center; }
.dark .by-sub { color: var(--muted-d); }
.guar-txt .secure + .secure { margin-top: -1px; }

/* hero wings: the Ocoee search (left), 10 against 30 (right) */
.pz-card { overflow: hidden; border-radius: 18px; background: linear-gradient(180deg, #2A0B0E, #170709); box-shadow: 0 0 0 1px rgba(255, 130, 112, .32), 0 40px 70px -30px #000, 0 0 70px -24px rgba(198, 246, 137, .3); color: #F6DCD7; }
.pz-row { display: flex; align-items: center; gap: 12px; margin: 12px 12px 0; padding: 11px 14px; border-radius: 12px; }
.pz-row > span:first-child { display: grid; flex: 1; line-height: 1.25; }
.pz-row b { color: #fff; font-size: 15px; }
.pz-row small { color: var(--muted-d); font-size: 11.5px; }
.pz-n { padding: 3px 8px; border-radius: 8px; background: rgba(255, 255, 255, .08); color: #fff; font-family: var(--f-mono); font-size: 13px; font-weight: 600; }
.pz-lite .pz-n { background: rgba(198, 246, 137, .16); color: var(--lime); }
.pz-full { background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.pz-full b { color: #D2B5B0; }
.pz-full s { color: #9E807C; font-family: var(--f-display); font-size: 24px; font-weight: 800; text-decoration-color: var(--red); text-decoration-thickness: 3px; }
.pz-lite { background: rgba(198, 246, 137, .07); box-shadow: inset 0 0 0 1.5px rgba(198, 246, 137, .6), 0 0 26px -10px rgba(198, 246, 137, .6); }
.pz-lite em { background: linear-gradient(180deg, #F2FF9C, var(--acid) 55%, #A9E13A); -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: var(--g-red); color: #2A0306; font-family: var(--f-display); font-size: 17px; font-weight: 800; }
.pz-save .ic { width: 15px; height: 15px; }

/* section 2: $97 felt like a lot? + the Ocoee search */
.s2-badge .sb-from { font-size: 24px; text-decoration: line-through; text-decoration-color: var(--coral); text-decoration-thickness: 3px; }
.s2-badge .sb-to { font-size: 25px; }
.s-lede-2 { margin-top: 8px; }
.one-list { margin: 26px 0 0; color: var(--ink); font-family: var(--f-display); font-size: clamp(30px, 3.4vw, 48px); font-weight: 800; line-height: 1.1; letter-spacing: -.035em; }
.felt { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 34px; max-width: 1160px; margin: 64px auto 0; }
.oc-fig { margin: 0; }
.oc-shot { display: block; width: 100%; padding: 12px; border: 1.5px solid transparent; border-radius: 26px; 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); }
.oc-shot .sh-win { background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c1) 55%, transparent); }
.oc-shot .sh-win .win-bar { height: 30px; }
.oc-shot .sh-win img { aspect-ratio: auto; }
.oc-shot:hover .sh-win { transform: translateY(-4px); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c2) 45%, transparent), 0 26px 40px -24px rgba(140, 20, 25, .5); }
.oc-fig figcaption { margin-top: 14px; padding: 0 6px; font-size: 14.5px; line-height: 1.5; }
.proof { position: relative; padding: 28px 28px 24px; border-radius: 28px; background: radial-gradient(420px 260px at 20% 0, rgba(255, 59, 63, .28), transparent 70%), linear-gradient(160deg, #2A0B0E, #170709); box-shadow: 0 0 0 1px rgba(255, 110, 95, .35), 0 50px 90px -40px rgba(60, 5, 10, .7); color: #F6E2DE; }
.pr-q { display: flex; align-items: center; gap: 10px; width: fit-content; max-width: calc(100% - 30px); margin: 0; padding: 9px 14px; border-radius: 14px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1.5px rgba(198, 246, 137, .55), 0 0 22px -10px rgba(198, 246, 137, .5); color: #fff; font-family: var(--f-display); font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.pr-q .ic { width: 18px; height: 18px; color: var(--lime); }
.pr-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.pr-stats > span { display: grid; gap: 4px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); color: var(--muted-d); font-size: 14px; font-weight: 700; line-height: 1.2; }
.pr-stats b { color: #fff; font-family: var(--f-display); font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -.045em; }
.pr-stats .pr-zero { background: rgba(229, 38, 45, .14); box-shadow: inset 0 0 0 1.5px rgba(255, 90, 80, .55), 0 0 30px -12px rgba(255, 59, 63, .6); color: #FFC7BE; }
.pr-zero b { background: linear-gradient(180deg, #FFE3DC, #FF8B79 45%, #F2343C); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pr-field { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 4px; margin-top: 14px; padding: 10px; border-radius: 14px; background: #1C0709; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.pr-field i, .hf-field i { --cc: var(--s-z); aspect-ratio: 1; border-radius: 30%; background: var(--cc); }
.pr-field i { -webkit-mask: radial-gradient(circle, transparent 22%, #000 calc(22% + .5px)); mask: radial-gradient(circle, transparent 22%, #000 calc(22% + .5px)); }
.pr-field .lo, .hf-field .lo { --cc: var(--s-lo); }
.pr-field .mid, .hf-field .mid { --cc: var(--s-mid); }
.pr-field .hi, .hf-field .hi { --cc: var(--s-hi); }
.pr-field i:not(.z) { opacity: .4; }
.pr-txt { margin: 16px 0 0; font-size: 16px; line-height: 1.55; }
.pr-txt b { color: #fff; }
.pr-fine { margin: 10px 0 0; color: var(--muted-d); font-size: 13.5px; line-height: 1.5; }

/* section 3: same tool, one difference */
.s-same { background: #130607; }
.solo { max-width: 860px; margin: 64px auto 0; }
.solo .td .clip { margin-top: 0; }
.duo-dark .td { background: linear-gradient(180deg, #24090C, #170709) padding-box, linear-gradient(160deg, var(--c1), rgba(255, 255, 255, .08) 50%, var(--c2)) border-box; box-shadow: 0 50px 90px -50px #000, 0 0 70px -36px var(--c2); }
.duo-dark .td .win { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c1) 30%, transparent); }
.duo-dark figcaption { color: #F2DAD6; }

/* the 2-column table: Finder Lite (lit) / Business Finder */
.vs { margin-top: 70px; }
.vs-panel { position: relative; max-width: 900px; margin: 0 auto; padding: 26px 22px 20px; border-radius: 28px; background: linear-gradient(180deg, #24090C, #160608); box-shadow: inset 0 0 0 1px rgba(255, 110, 95, .26), 0 60px 110px -50px #000, 0 0 100px -50px rgba(255, 59, 63, .5); }
.hud-rail { position: absolute; top: -1px; height: 8px; width: 26%; }
.hr-l { left: 40px; background: repeating-linear-gradient(110deg, var(--coral) 0 2px, transparent 2px 6px); opacity: .7; }
.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; padding-top: 24px; margin-top: -24px; }
.vs-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 16px; }
.vs-table th, .vs-table td { padding: 15px 18px; border-bottom: 1px solid rgba(255, 255, 255, .07); vertical-align: middle; }
.vs-table thead th, .vs-table thead td { padding-top: 18px; padding-bottom: 18px; border-bottom: 0; }
.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: 25px; font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.vs-table thead small { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; }
.vs-table thead .vt-b { color: #EBD3CF; }
.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, #FFD3CA, #FF7A66 60%, #E5262D); color: #2A0306; box-shadow: 0 -10px 40px -10px rgba(255, 59, 63, .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: #2A0306; color: var(--lime); box-shadow: 0 0 0 4px #FF8B79; }
.vt-crown .ic { width: 19px; height: 19px; }
.vs-table thead .vt-p .vt-name { margin-top: 8px; }
.vs-table tbody th { color: #F6E2DE; font-size: 16px; font-weight: 600; text-align: left; line-height: 1.35; }
.vt-rh { display: inline-flex; align-items: center; gap: 12px; }
.ti { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; color: #1F080A; }
.ti .ic { width: 17px; height: 17px; }
.vs-table tbody td { text-align: center; line-height: 1.35; }
.vs-table td small { display: block; color: var(--muted-d); font-size: 12.5px; font-weight: 600; }
.vs-table tbody .vt-b { color: #D9B8B3; font-size: 15px; }
.vs-table tbody .vt-b b { color: #EBD3CF; font-family: var(--f-display); font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.vs-table tbody .vt-p { background: rgba(255, 90, 80, .08); box-shadow: inset 1.5px 0 0 rgba(255, 110, 95, .5), inset -1.5px 0 0 rgba(255, 110, 95, .5); 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, 110, 95, .5), inset -1.5px 0 0 rgba(255, 110, 95, .5), inset 0 -1.5px 0 rgba(255, 110, 95, .5); }
.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, #FFE3DC, #FF8B79 45%, #F2343C); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: var(--f-display); font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
/* the one row that differs */
.vt-key th, .vt-key td { background: rgba(198, 246, 137, .05); }
.vt-key th { color: #fff !important; font-weight: 800 !important; }
.vs-table tbody .vt-key .vt-p b { background: linear-gradient(180deg, #F2FF9C, var(--acid) 55%, #A9E13A); -webkit-background-clip: text; background-clip: text; font-size: 40px; }
.vs-table tbody .vt-key .vt-b b { font-size: 30px; }
.vt-ck { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #EBD3CF; }
.vt-p .vt-ck { background: var(--g-lime); color: #0E1A06; box-shadow: 0 0 16px -4px rgba(214, 242, 60, .7); }
.vt-ck .ic { width: 16px; height: 16px; }
.s-same .wall-punch { margin-top: 64px; }
.wall-sub { margin: 12px auto 0; color: #F2DAD6; font-family: var(--f-display); font-size: clamp(20px, 2vw, 27px); font-weight: 800; letter-spacing: -.02em; text-align: center; }
.s-same .gtk { margin-top: 30px; }
/* the price block: price line, button, sub-line, trust */
.buy-row { display: grid; justify-items: center; gap: 14px; max-width: 640px; margin: 60px auto 0; text-align: center; }
.br-price { margin: 0; color: var(--muted-d); font-size: 16px; font-weight: 600; }
.br-price b { margin-right: 6px; color: #fff; font-family: var(--f-display); font-size: 34px; font-weight: 800; letter-spacing: -.03em; vertical-align: -3px; }
.buy-row .by-sub { margin: 0; }
.br-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 4px 0 0; padding: 0; list-style: none; }
.br-trust li { display: inline-flex; align-items: center; gap: 7px; color: #F2DAD6; font-size: 14px; font-weight: 700; }
.br-trust .ic { width: 16px; height: 16px; color: var(--lime); }

/* section 4: here's what you do tonight (four steps) */
.how-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; max-width: 1240px; }
.how-4 .hw { padding: 24px 20px 26px; }
.how-4 .hw + .hw::before { left: -28px; }
.how-4 .hw h3 { font-size: 30px; }
.how-4 .hw-vis { min-height: 200px; }
.c-lime .hw-num { color: #10240A; text-shadow: none; }
.hv-back .ic { width: 15px; height: 15px; color: var(--lime); }
.hf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hf-chips > span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 6px; border-radius: 999px; background: #FFF0EE; box-shadow: inset 0 0 0 1.5px #FF8B79; color: var(--ink); font-size: 13px; font-weight: 800; }
.hf-chips i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: #E0353B; color: #fff; }
.hf-chips .ic { width: 11px; height: 11px; }
.hf-field { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; margin-top: 6px; }
.hf-field i:not(.z) { opacity: .16; }
.hv-pick { gap: 5px; }
.hk-sort { display: inline-flex; align-items: center; gap: 7px; justify-self: start; margin-bottom: 3px; padding: 5px 10px; border-radius: 9px; background: #EAF7EF; box-shadow: inset 0 0 0 1px #BFE3CC; color: #1D6B44; font-size: 12.5px; font-weight: 800; }
.hk-sort .ic { width: 14px; height: 14px; }
.hk-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 9px; background: #F6FBF8; box-shadow: inset 0 0 0 1px #D8EFE2; }
.hk-blur { flex: 1; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #C3D5CA, #E3EEE7); filter: blur(1.4px); }
.hk-row .sc0 { min-width: 26px; height: 20px; font-size: 11px; }
.ha-btn { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; color: #fff; font-size: 14px; font-weight: 800; line-height: 1.2; text-shadow: 0 1px 1px rgba(0, 0, 0, .15); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12), 0 10px 18px -12px rgba(0, 0, 0, .45); }
.ha-btn .ic { width: 17px; height: 17px; }
/* then: the message to the owner (dark card on the light section) */
.nx { position: relative; display: grid; grid-template-columns: 330px minmax(0, 1fr); align-items: center; gap: 40px; max-width: 1060px; margin: 56px auto 0; padding: 32px 44px 32px 32px; border-radius: 28px; background: radial-gradient(480px 280px at 10% 0, rgba(255, 59, 63, .24), transparent 70%), linear-gradient(160deg, #2A0B0E, #170709); box-shadow: 0 0 0 1px rgba(255, 110, 95, .35), 0 50px 90px -40px rgba(60, 5, 10, .7); color: #F2DAD6; }
.nx-chat { display: grid; gap: 12px; padding: 18px; border-radius: 20px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.nx-out { position: relative; justify-self: end; display: grid; gap: 8px; width: 220px; padding: 9px; border-radius: 16px 16px 4px 16px; background: var(--g-lime); box-shadow: 0 14px 24px -14px rgba(198, 246, 137, .7); }
.nx-map { position: relative; display: block; height: 92px; overflow: hidden; border-radius: 10px; background: linear-gradient(28deg, transparent 46%, rgba(210, 190, 170, .9) 46.6% 49%, transparent 49.6%), linear-gradient(-62deg, transparent 58%, rgba(210, 190, 170, .7) 58.5% 60%, transparent 60.6%), #F4EFE6; }
.nx-map i { position: absolute; inset: 10px 40px; background: radial-gradient(circle at 50% 50%, #3DCB5A 0 9%, #F2B10C 17%, #E5262D 30%); -webkit-mask: radial-gradient(circle, #000 0 30%, transparent 37%) 0 0 / 20% 20%; mask: radial-gradient(circle, #000 0 30%, transparent 37%) 0 0 / 20% 20%; }
.nx-link { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 6px 11px; border-radius: 999px; background: #0E1A06; color: var(--lime); font-size: 12.5px; font-weight: 800; }
.nx-link .ic { width: 13px; height: 13px; }
.nx-sent { position: absolute; right: 10px; bottom: 9px; width: 18px; height: 18px; color: #0E1A06; }
.nx-in { justify-self: start; padding: 9px 18px; border-radius: 16px 16px 16px 4px; background: #fff; color: var(--ink); font-family: var(--f-display); font-size: 19px; font-weight: 800; box-shadow: 0 12px 22px -14px #000; }
.nx-tag { justify-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; background: var(--g-red); color: #2A0306; font-size: 14px; font-weight: 800; box-shadow: 0 10px 22px -10px rgba(255, 59, 63, .7); transform: rotate(-4deg); }
.nx-tag .ic { width: 15px; height: 15px; }
.nx-txt p { margin: 0 0 10px; font-size: 16.5px; line-height: 1.55; }
.nx-txt .nx-lead { color: #fff; font-family: var(--f-display); font-size: 27px; font-weight: 800; line-height: 1.15; letter-spacing: -.025em; }
.nx-txt .nx-fine { color: var(--muted-d); font-size: 14.5px; }
.nx-txt .nx-warn { display: inline-flex; align-items: center; gap: 9px; margin: 6px 0 0; padding: 9px 14px; border-radius: 12px; background: rgba(255, 59, 63, .14); box-shadow: inset 0 0 0 1.5px rgba(255, 90, 80, .6); color: #FFD3CB; font-weight: 800; }
.nx-warn .ic { width: 18px; height: 18px; color: #FF5A4E; }

/* section 5: the fit cards with little maps, then the search clip */
.s-step { background: #130708; }
.lite-fit { margin-top: 10px; }
.sr { position: absolute; left: var(--x); top: var(--y); width: calc(var(--r) * 2); height: calc(var(--r) * 2); margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1); border-radius: 50%; border: 2px dashed rgba(255, 150, 132, .65); background: radial-gradient(closest-side, rgba(255, 90, 80, .14), transparent); }
.sr-on { border: 2px solid var(--lime); background: radial-gradient(closest-side, rgba(198, 246, 137, .16), transparent); box-shadow: 0 0 24px rgba(198, 246, 137, .35), inset 0 0 22px rgba(198, 246, 137, .14); animation: sr-pulse 2.8s ease-in-out infinite; }
@keyframes sr-pulse { 50% { transform: scale(1.07); } }
.smp.p-dim { background: #4A2226; box-shadow: 0 0 0 3px rgba(0, 0, 0, .35); }
.sm-one .sm-tag { color: var(--lime); }
.fc-skip .fc-note { align-items: flex-start; }
.solo-2 { margin-top: 90px; }

/* section 6: guarantee steps + the math */
.cert-top { margin-top: 0; }
.cert-top .cert-title { font-size: clamp(30px, 3.2vw, 44px); }
.cert-top .cert-title .ln { display: block; }
.g-steps { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.g-steps li { display: flex; align-items: center; gap: 12px; color: var(--ink); font-size: 17px; font-weight: 700; line-height: 1.3; }
.g-steps i { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 30%; background: var(--g-red); color: #2A0306; box-shadow: 0 0 14px -4px rgba(255, 59, 63, .6); transform: rotate(-6deg); }
.g-steps .ic { width: 16px; height: 16px; transform: rotate(6deg); }
.math-k { margin: 110px 0 0; text-align: center; }
.math-k .kicker { margin: 0; }
.s-math .ways { margin-top: 30px; }
.w-slot .way-big { font-size: clamp(44px, 5vw, 66px); }
.slots79 { grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 4px; }
.wx b { display: grid; place-items: center; width: 108px; height: 108px; border-radius: 30%; background: linear-gradient(160deg, #9FE8C0, #2FB27A); color: #fff; font-family: var(--f-display); font-size: 40px; font-weight: 800; letter-spacing: -.03em; text-shadow: 0 1px 2px rgba(0, 0, 0, .15); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12), 0 18px 30px -14px rgba(47, 178, 122, .8); transform: rotate(-6deg); }
.wx-tiles { display: grid; grid-template-columns: repeat(21, minmax(0, 1fr)); gap: 4px; margin-top: 18px; }
.wx-tiles i { height: 22px; border-radius: 6px; background: #F1E4E1; transition: background .3s; }
.wx-tiles i.on { background: linear-gradient(160deg, #9FE8C0, #2FB27A); }

/* final card */
.fin-price em { color: var(--muted-l); font-size: 15px; font-style: normal; font-weight: 700; transform: translateY(-10px); }
.fin-list .fin-save i { background: var(--g-red); color: #2A0306; }
.fin-one { margin: 14px 0 0; color: var(--ink); font-size: 15px; font-weight: 700; text-align: center; }

/* FAQ: three questions, one column; under the No thanks */
.faq-1 { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.faq-end .by-sub { margin: -10px 0 0; }
.nt-note { margin: -8px 0 0; color: var(--muted-l); font-size: 14px; font-weight: 600; text-align: center; }

/* footer: three titled blocks */
.pf-links { margin-top: 26px; }
.pf-blk + .pf-blk { padding-top: 16px; border-top: 1px dashed rgba(255, 255, 255, .1); }
.pf-legal .pf-h { margin: 0 0 6px; color: #F0DEDA; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

@media (max-width: 1199px) {
    .how-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; gap: 40px 26px; }
    .how-4 .hw + .hw::before { display: none; }
}
@media (max-width: 991px) {
    .felt { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
    .nx { grid-template-columns: minmax(0, 1fr); max-width: 640px; padding: 28px 26px; gap: 26px; }
    .nx-chat { width: 100%; max-width: 360px; justify-self: center; }
}
@media (max-width: 767px) {
    .hero-h1 { font-size: min(calc((100vw - 64px) / 7.1), 52px); }
    .sp { margin-top: 56px; padding: 18px 14px 16px; }
    .sp-tags { justify-content: center; }
    .sp-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px 14px; padding: 14px; }
    .sp-slots { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 5px; }
    .sp-name b { font-size: 18px; }
    .sp-n { font-size: 34px; }
    .sp-price { font-size: 21px; }
    .oc-was { font-size: 26px; margin-right: -4px; }
    .oc-price { flex-wrap: wrap; justify-content: center; row-gap: 6px; }
    .one-list { margin-top: 20px; }
    .felt { margin-top: 50px; }
    .oc-shot { padding: 8px; border-radius: 22px; }
    .proof { padding: 22px 16px 18px; border-radius: 24px; }
    .pr-q { font-size: 17px; }
    .pr-stats b { font-size: 46px; }
    .solo { margin-top: 50px; }
    .vs { margin-top: 50px; }
    .vs-panel { padding: 20px 8px 14px; border-radius: 22px; }
    .vs-table { font-size: 14px; }
    .vs-table th, .vs-table td { padding: 12px 8px; }
    .vt-name { font-size: 18px; }
    .vs-table thead small { font-size: 11.5px; }
    .vs-table tbody th { font-size: 13.5px; }
    .ti { display: none; }
    .vt-rh { gap: 0; }
    .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-key .vt-p b { font-size: 32px; }
    .vs-table tbody .vt-key .vt-b b { font-size: 24px; }
    .s-same .wall-punch { margin-top: 50px; }
    .buy-row { margin-top: 50px; }
    .br-price b { font-size: 28px; }
    .how-4 { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
    .nx { margin-top: 44px; padding: 22px 16px; border-radius: 24px; }
    .nx-txt .nx-lead { font-size: 22px; }
    .nx-txt p { font-size: 15.5px; }
    .solo-2 { margin-top: 64px; }
    .g-steps li { font-size: 16px; }
    .math-k { margin-top: 80px; }
    .w-slot .way-big { font-size: min(10.4vw, 46px); white-space: nowrap; }
    .slots79 { grid-template-columns: repeat(16, minmax(0, 1fr)); }
    .wx b { width: 84px; height: 84px; font-size: 32px; }
    .wx-tiles { gap: 3px; }
    .wx-tiles i { height: 16px; border-radius: 4px; }
}
@media (max-width: 991px) {
    .cert-top .g-steps { justify-items: center; }
}
@media (max-width: 400px) {
    .vs-panel { padding-left: 4px; padding-right: 4px; }
    .vs-table th, .vs-table td { padding: 10px 5px; }
    .vt-name { font-size: 16px; }
    .vs-table tbody th { font-size: 12.5px; }
}