/* Marketplace Pro funnel pages. Tokens copied from marketplacepro.com (Astro build) so the
   funnel matches the marketing site. Self-contained: no external CSS, no fonts to load. */
:root{
  --color-bg-deep:#06080f;--color-bg-main:#090c17;--color-bg-card:#0e1220;--color-bg-border:#1a2035;
  --color-text:#d8dce8;--color-text-muted:#707c96;--color-text-faint:#8590a8;--color-white:#fff;
  --color-cyan:#00e5fc;--color-cyan-bright:#00fafc;
  --grad:linear-gradient(135deg,#00fafc 0%,#4cbbfc 45%,#a473fe 100%);
  --grad-btn:linear-gradient(135deg,#00d4f0 0%,#7a5be8 100%);
  --grad-text:linear-gradient(135deg,#00fafc 0%,#858cfd 60%,#a473fe 100%);
  --cyan-glow:#00e5fc12;--purple-glow:#a473fe12;
  --shadow-card:0 4px 40px #0009;
  --radius-sm:6px;--radius-md:12px;--radius-lg:20px;
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  --section-y:72px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--color-bg-main);color:var(--color-text);font-family:var(--font-sans);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--color-cyan);text-decoration:none}
h1,h2,h3{color:#fff;letter-spacing:-.02em;line-height:1.15;margin:0 0 16px}
h1{font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:800}
h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800}
h3{font-size:1.15rem;font-weight:700}
p{margin:0 0 16px}
.muted{color:var(--color-text-faint)}
.container{max-width:1140px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px;margin-left:auto;margin-right:auto}
.center{text-align:center}
.section{padding:var(--section-y) 0;position:relative}
.section.deep{background:var(--color-bg-deep)}
.hero{position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:
  radial-gradient(ellipse 70% 50% at 20% 30%,var(--cyan-glow) 0%,transparent 60%),
  radial-gradient(ellipse 60% 50% at 80% 60%,var(--purple-glow) 0%,transparent 60%),
  linear-gradient(180deg,var(--color-bg-deep) 0%,var(--color-bg-main) 100%)}
.hero .container{position:relative;z-index:1}

/* header */
.funnel-header{padding:18px 0;border-bottom:1px solid var(--color-bg-border);background:var(--color-bg-deep)}
.brand{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:700;color:#fff;font-size:1.1rem;letter-spacing:-.01em}
.brand img,.brand svg{width:36px;height:36px;display:block}
.brand sup{font-size:.55em;color:var(--color-text-faint)}

/* label + copy */
.label{display:inline-block;margin-bottom:16px;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sub{font-size:1.15rem;color:var(--color-text);max-width:720px;margin:0 auto 28px}
.bullets{list-style:none;padding:0;margin:0 auto 36px;max-width:760px;text-align:left;display:grid;gap:12px}
.bullets li{position:relative;padding-left:34px;color:var(--color-text)}
.bullets li::before{content:"";position:absolute;left:0;top:7px;width:18px;height:18px;border-radius:50%;background:var(--grad);mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/contain no-repeat}

/* video */
.vid-wrap{position:relative;aspect-ratio:16/9;max-width:960px;margin:0 auto 28px;border-radius:var(--radius-lg);border:1px solid var(--color-bg-border);background:#000;overflow:hidden;box-shadow:var(--shadow-card),0 0 80px #00e5fc0f,0 0 80px #a473fe0f}
.vid-wrap video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.vid-wrap.small{max-width:720px}

/* countdown + button */
.unlock{max-width:560px;margin:0 auto 12px;padding:18px 22px;border:1px solid var(--color-bg-border);border-radius:var(--radius-md);background:var(--color-bg-card);text-align:center}
.unlock .t{font-variant-numeric:tabular-nums;font-weight:800;font-size:1.6rem;color:#fff;letter-spacing:.02em}
.unlock .l{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-faint);margin-bottom:4px}
.unlock.done{display:none}
.cta{display:none;flex-direction:column;align-items:center;gap:10px}
.cta.show{display:flex;animation:pop .35s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:14px 28px;border:none;border-radius:var(--radius-sm);font:inherit;font-size:.95rem;font-weight:600;cursor:pointer;color:#fff;text-align:center;transition:all .25s;white-space:normal}
.btn-primary{background:var(--grad-btn)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 28px #00e5fc40,0 6px 28px #a473fe33}
.btn-lg{font-size:1.1rem;padding:18px 36px;min-height:60px;border-radius:10px}
.cta small{color:var(--color-text-faint);max-width:520px;text-align:center}
.under{font-size:.95rem;color:var(--color-text-faint);max-width:560px;margin:0 auto}

/* calendar frame */
.calendar-frame{border-radius:16px;overflow:hidden;border:1px solid rgb(255 255 255/.1);background:#fff;max-width:1000px;margin:0 auto}
.calendar-frame iframe{display:block;width:100%;min-height:760px;border:0}
@media(max-width:640px){.calendar-frame iframe{min-height:1050px}}

/* cards + lists */
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--color-bg-card);border:1px solid var(--color-bg-border);border-radius:var(--radius-md);padding:26px}
.card h3{margin-bottom:8px}
.card p:last-child{margin-bottom:0}
.steps{list-style:none;padding:0;margin:0;display:grid;gap:14px;max-width:760px}
.steps li{padding:16px 18px 16px 56px;position:relative;background:var(--color-bg-card);border:1px solid var(--color-bg-border);border-radius:var(--radius-md)}
.steps li b{color:#fff}
.steps li::before{content:attr(data-n);position:absolute;left:16px;top:14px;width:28px;height:28px;border-radius:50%;background:var(--grad-btn);color:#fff;font-weight:800;font-size:.85rem;display:flex;align-items:center;justify-content:center}
details{background:var(--color-bg-card);border:1px solid var(--color-bg-border);border-radius:var(--radius-md);padding:14px 18px;margin-bottom:10px}
details summary{cursor:pointer;color:#fff;font-weight:600;list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";float:right;color:var(--color-text-faint)}
details[open] summary::after{content:"–"}
details p{margin:10px 0 0;color:var(--color-text)}

/* sticky mini-nav (thank-you page) */
.subnav{position:sticky;top:0;z-index:5;background:#06080fe6;backdrop-filter:blur(8px);border-bottom:1px solid var(--color-bg-border)}
.subnav .container{display:flex;gap:6px;overflow-x:auto;padding:10px 24px;scrollbar-width:none}
.subnav a{flex:none;color:var(--color-text);font-size:.85rem;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid var(--color-bg-border)}
.subnav a:hover{border-color:var(--color-cyan);color:#fff}

/* callout */
.callout{border-left:3px solid transparent;border-image:var(--grad) 1;padding:4px 0 4px 18px;color:#fff;font-weight:600;font-size:1.1rem;max-width:720px;margin:0 auto 28px}

/* footer */
.footer{padding:40px 0;border-top:1px solid var(--color-bg-border);background:var(--color-bg-deep);color:var(--color-text-muted);font-size:.82rem;text-align:center}
.footer a{color:var(--color-text-faint);margin:0 8px}
.footer p{margin:6px 0}

@media(max-width:640px){:root{--section-y:52px}.btn-lg{width:100%}.sub{font-size:1.05rem}}

/* print: show the page in its final (unlocked) state so a PDF carries all the copy */
@media print{.unlock{display:none!important}.cta{display:flex!important;animation:none!important;opacity:1!important}.calendar-frame iframe{min-height:200px}}

/* demo page: 40% smaller headline (Ashar 2026-10-15) */
.h1-sm{font-size:clamp(1.26rem,2.64vw,1.92rem);line-height:1.25}
/* yellow highlighter on the sub-headline */
.hl{background:linear-gradient(transparent 12%,#ffe85a 12%,#ffe85a 92%,transparent 92%);color:#0b0e18;font-weight:600;padding:0 .3em;-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:1.75}

/* ---------- light theme (white background variant, /demo-light/) ---------- */
html.light{--color-bg-deep:#f4f6fb;--color-bg-main:#ffffff;--color-bg-card:#ffffff;--color-bg-border:#e2e7f0;--color-text:#2a3648;--color-text-muted:#5d6b84;--color-text-faint:#6b7991;--cyan-glow:#00e5fc1f;--purple-glow:#a473fe1a;--shadow-card:0 8px 40px #1c293822}
html.light body{background:var(--color-bg-main);color:var(--color-text)}
html.light h1,html.light h2,html.light h3{color:#1c2938}
html.light .funnel-header{background:#fff;border-bottom-color:var(--color-bg-border)}
html.light .brand{color:#1c2938}
html.light .hero-bg{background:radial-gradient(ellipse 70% 50% at 20% 30%,var(--cyan-glow) 0%,transparent 60%),radial-gradient(ellipse 60% 50% at 80% 60%,var(--purple-glow) 0%,transparent 60%),linear-gradient(180deg,#f7f9fd 0%,#fff 100%)}
html.light .bullets li,html.light .sub{color:#2a3648}
html.light .unlock{background:#f4f6fb}
html.light .unlock .t{color:#1c2938}
html.light .card,html.light .steps li,html.light details{background:#fff;box-shadow:0 2px 14px #1c293810}
html.light .steps li b,html.light details summary{color:#1c2938}
html.light .callout{color:#1c2938}
html.light .subnav{background:#ffffffe6;border-bottom-color:var(--color-bg-border)}
html.light .subnav a{color:#2a3648}
html.light .calendar-frame{border-color:var(--color-bg-border)}
html.light .footer{background:#f4f6fb;color:#5d6b84}
html.light .footer img{filter:invert(1) brightness(.2);opacity:.8}
html.light .hl{background:linear-gradient(transparent 12%,#fff08a 12%,#fff08a 92%,transparent 92%);color:#1c2938}
html.light .vid-wrap{border-color:var(--color-bg-border)}

@media(min-width:700px){.h1-sm .l1{white-space:nowrap}}

/* 2026-10-15 Ashar: tighter hero top, orange CTA, calendar like the original demo page */
.section.hero{padding-top:36px}
.btn-primary{background:#f97316}
.btn-primary:hover{background:#ea6a0c;box-shadow:0 6px 28px #f9731655}
.calendar-frame{max-width:none}

/* headline split test: html[data-hl] picks which h1 renders */
h1[data-hl]{display:none}
html[data-hl="a"] h1[data-hl="a"],html[data-hl="b"] h1[data-hl="b"]{display:block}
.h1-b{font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.15}
.h1-b .grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* footer with the logo (header removed 2026-10-16) */
.footer{padding:48px 0 40px}
.footer-logo img{height:60px;margin-bottom:20px}
.footer .logo-light{display:none}
html.light .footer .logo-dark{display:none}
html.light .footer .logo-light{display:inline}
html.light .footer img{filter:none;opacity:1}
.footer-links a{margin:0 10px;color:var(--color-text);font-weight:600}
.footer .fb{max-width:640px;margin:14px auto 0;font-size:.74rem;opacity:.8}
.section.hero{padding-top:48px}

/* two-minute video gate (Ashar 2026-10-16): CTA + calendar appear once the viewer reaches 2:00 */
.gated{display:none!important}
html.unlocked .gated{display:block!important}
html.unlocked .cta.gated,html.unlocked .center.gated{display:flex!important}
.unlock .sep{opacity:.4;margin:0 4px}
.unlock .bar{height:6px;border-radius:3px;background:#ffffff14;margin-top:12px;overflow:hidden}
.unlock .bar i{display:block;height:100%;width:0;background:var(--grad);transition:width .3s linear}
html.light .unlock .bar{background:#1c293814}
@media print{.gated{display:block!important}.unlock{display:none!important}}
/* variant B headline all black on the white page (Ashar 2026-10-16) */
html.light .h1-b{color:#111}
html.light .h1-b .grad{background:none;-webkit-text-fill-color:#111;color:#111}