/* Sellblocks sales site design system. Premium, light, modern. Shared by every page. */
:root{
  --bg:#faf9f7; --surface:#ffffff; --ink:#15161c; --muted:#484b5b; --faint:#66697a;
  --line:#e9e7e2; --accent:#5b6cff; --accent-d:#4453e6; --accent-2:#13bd95;
  --dark:#101119; --dark-2:#171a24; --on-dark:#f3f4f8; --on-dark-muted:#a6aabb; --dark-line:#262a37;
  --gold:#e7b450; --warn:#ff5d49;
  --radius:18px; --radius-sm:12px; --radius-pill:999px;
  --wrap:1200px; --gut:24px;
  --shadow:0 14px 40px rgba(20,22,40,.10); --shadow-lg:0 30px 70px rgba(20,22,40,.16);
  --ff-display:'Plus Jakarta Sans',system-ui,sans-serif; --ff-text:'Inter',system-ui,sans-serif;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  /* TYPE SCALE: six sizes, use these everywhere. Keep real text >= var(--fs-6) (14px) so it stays readable on mobile. */
  --fs-1:clamp(34px,6vw,58px); --fs-2:clamp(25px,3.4vw,38px); --fs-3:clamp(20px,2vw,23px); --fs-4:clamp(17px,1.5vw,19px); --fs-5:16px; --fs-6:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ff-text);font-size:var(--fs-5);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:700;line-height:1.1;margin:0 0 .4em;letter-spacing:-.02em}
h1{font-size:var(--fs-1);font-weight:800}
h2{font-size:var(--fs-2)}
h3{font-size:var(--fs-3)}
p{margin:0 0 1em}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.wrap-sm{max-width:880px;margin:0 auto;padding:0 var(--gut)}
.section{padding:var(--s7) 0}
@media(max-width:900px){.section{padding:var(--s6) 0}}
@media(max-width:560px){.section{padding:var(--s5) 0}}
.eyebrow{font-size:var(--fs-6);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.lead{font-size:var(--fs-4);color:var(--muted);max-width:60ch}
.center{text-align:center}.center .lead{margin-left:auto;margin-right:auto}
.muted{color:var(--muted)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--ff-text);font-weight:600;font-size:var(--fs-5);text-decoration:none;padding:14px 26px;border-radius:var(--radius-sm);border:1.5px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,var(--accent),#7b57ff);color:#fff;box-shadow:0 10px 30px rgba(91,108,255,.42),0 1px 0 rgba(255,255,255,.18) inset}
.btn-primary:hover{background:linear-gradient(135deg,var(--accent-d),#6a48f0);box-shadow:0 14px 38px rgba(91,108,255,.52),0 1px 0 rgba(255,255,255,.2) inset}

/* pop utilities: gradient text + soft neon glow (reusable, premium) */
.grad{background:linear-gradient(100deg,var(--accent) 8%,#8b7bff 46%,var(--accent-2) 96%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.glow{position:relative}
.glow::after{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent);pointer-events:none}
/* gradient text tuned for dark bands (the light .grad is too dark for AA on --dark) */
.grad-d{background:linear-gradient(100deg,#8ea0ff,#5ee6b8);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
/* .kick: the reusable non-eyebrow section intro (a short gradient tick above a heading) */
.kick{display:block;width:34px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2));margin:0 0 16px}
.center .kick{margin-left:auto;margin-right:auto}
.band-dark .kick{background:linear-gradient(90deg,#8ea0ff,#5ee6b8)}
/* neon status dot + reusable aurora field, both reduced-motion guarded */
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#5ee6b8;box-shadow:0 0 10px #5ee6b8;animation:sbPulse 2.4s ease-in-out infinite}
@keyframes sbPulse{50%{opacity:.45;transform:scale(.82)}}
.aurora{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(50% 55% at 14% 6%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 66%),radial-gradient(46% 54% at 90% 34%,color-mix(in srgb,var(--accent-2) 22%,transparent),transparent 66%),radial-gradient(44% 52% at 60% 78%,color-mix(in srgb,#5ee6b8 16%,transparent),transparent 68%);animation:auroraDrift 22s ease-in-out infinite alternate}
@keyframes auroraDrift{to{transform:translate3d(-2%,1.5%,0) scale(1.05)}}
.band-dark :focus-visible{outline-color:#5ee6b8}
@media(prefers-reduced-motion:reduce){.dot,.aurora{animation:none}}
/* deal note: keeps a price from ever reading bare, shows the honest saving beside a CTA */
.deal{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:5px 9px;font-size:13.5px;color:var(--muted);margin:12px 0 0;line-height:1.55}
.deal s{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--warn) 80%,transparent);text-decoration-thickness:2px;color:var(--muted)}
.deal .save{color:#0c7a5f;font-weight:800}
.band-dark .deal{color:var(--on-dark-muted)}
.band-dark .deal s{color:var(--on-dark-muted)}
.band-dark .deal .save{color:#5ee6b8}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-dark{background:var(--ink);color:#fff}
.btn-on-dark{background:#fff;color:var(--ink)}
.btn-lg{padding:17px 32px;font-size:var(--fs-5)}
.btn-sm{padding:10px 18px;font-size:14px}

/* pills + badges */
.pill{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-pill);padding:8px 15px;font-size:var(--fs-6);font-weight:600}
.tag{display:inline-block;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent-d);font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:5px 11px;border-radius:8px}
.stars{color:var(--gold);letter-spacing:2px}

/* header */
.site-head{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--line)}
.site-head .bar{display:flex;align-items:center;gap:18px;height:68px}
.site-head .logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-family:var(--ff-display);font-weight:800;font-size:21px;letter-spacing:-.02em;color:var(--ink)}
.site-head .logo .mk{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:inline-block;position:relative}
.site-head .logo .mk::after{content:"";position:absolute;inset:7px 7px auto auto;width:8px;height:8px;border-radius:2px;background:#fff;opacity:.9}
.site-head nav{display:flex;gap:6px;margin-left:14px}
.site-head nav a{text-decoration:none;color:var(--muted);font-weight:500;font-size:15px;padding:8px 12px;border-radius:9px}
.site-head nav a:hover,.site-head nav a[aria-current]{color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent)}
.site-head .right{margin-left:auto;display:flex;align-items:center;gap:12px}
.cur-select{font-family:var(--ff-text);font-size:14px;border:1px solid var(--line);border-radius:9px;padding:8px 10px;background:var(--surface);color:var(--ink);cursor:pointer}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:42px;height:42px;border-radius:10px}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);margin:4px auto;border-radius:2px}
@media(max-width:980px){
  .site-head nav{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;background:var(--surface);border-bottom:1px solid var(--line);padding:12px var(--gut);gap:2px;margin:0}
  .site-head nav.open{display:flex}
  .site-head nav a{padding:12px;font-size:16px}
  .nav-toggle{display:block}
  .site-head .right .btn{display:none}
}

/* footer */
.site-foot{background:var(--dark);color:var(--on-dark);padding:var(--s6) 0 var(--s4)}
.site-foot a{color:var(--on-dark-muted);text-decoration:none}
.site-foot a:hover{color:#fff}
.site-foot .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.site-foot .logo{display:inline-flex;align-items:center;gap:9px;font-family:var(--ff-display);font-weight:800;font-size:20px;color:#fff;text-decoration:none}
.site-foot .logo .mk{width:24px;height:24px;border-radius:7px;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.site-foot h4{color:#fff;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 14px;font-family:var(--ff-text);font-weight:700}
.site-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:14.5px}
.site-foot .pay{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.site-foot .pay span{font-size:10.5px;font-weight:700;letter-spacing:.03em;color:var(--on-dark-muted);border:1px solid var(--dark-line);border-radius:6px;padding:4px 8px}
.site-foot .bottom{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--dark-line);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--on-dark-muted)}
.site-foot .disclaimer{max-width:70ch;font-size:12.5px;color:var(--on-dark-muted);margin-top:10px;opacity:.85}
@media(max-width:760px){.site-foot .cols{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.site-foot .cols{grid-template-columns:1fr}}

/* generic cards + grids */
.grid{display:grid;gap:24px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}

/* theme card (gallery) */
.theme-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease;text-decoration:none;color:inherit;display:flex;flex-direction:column}
.theme-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.theme-card .shot{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--tint,linear-gradient(135deg,#e9ebff,#eafaf4));border-bottom:1px solid var(--line)}
.theme-card .shot iframe{position:absolute;top:0;left:0;width:1180px;height:812px;border:0;transform:scale(var(--shotscale,0.34));transform-origin:top left;pointer-events:none}
.theme-card .shot .veil{position:absolute;inset:0;background:transparent}
.theme-card .meta{padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.theme-card .meta .row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.theme-card .meta b{font-family:var(--ff-display);font-size:19px;font-weight:700}
.theme-card .meta .v{font-size:13px;color:var(--muted)}
.theme-card .meta .swatches{display:flex;gap:5px}
.theme-card .meta .swatches i{width:14px;height:14px;border-radius:50%;display:inline-block}
.theme-card .meta .open{margin-top:6px;font-size:14px;font-weight:600;color:var(--accent)}

/* dark band */
.band-dark{background:var(--dark);color:var(--on-dark)}
.band-dark h1,.band-dark h2,.band-dark h3{color:#fff}
.band-dark .lead,.band-dark .muted{color:var(--on-dark-muted)}
.band-dark .pill{background:var(--dark-2);border-color:var(--dark-line);color:var(--on-dark)}
/* white cards sitting on a dark band must keep dark, readable text
   (they were inheriting the light-on-dark colours, so copy went nearly invisible on white) */
.band-dark .card,.band-dark .plan{color:var(--ink)}
.band-dark .card h1,.band-dark .card h2,.band-dark .card h3,.band-dark .card h4,.band-dark .plan h1,.band-dark .plan h2,.band-dark .plan h3,.band-dark .plan h4{color:var(--ink)}
.band-dark .card .lead,.band-dark .card .muted,.band-dark .plan .lead,.band-dark .plan .muted{color:var(--muted)}

/* steps / features */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:s}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{counter-increment:s;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.step::before{content:counter(s);display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent-d);font-weight:800;font-family:var(--ff-display);margin-bottom:14px}
.feat{display:flex;gap:14px;align-items:flex-start}
.feat .ic{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 16%,var(--surface));color:var(--accent-d);font-size:22px}

/* pricing */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
@media(max-width:900px){.price-grid{grid-template-columns:1fr}}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px;display:flex;flex-direction:column;gap:14px;position:relative}
.plan.feature{border:2px solid var(--accent);box-shadow:var(--shadow-lg)}
.plan .badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:12px;font-weight:700;padding:5px 14px;border-radius:999px}
.plan .amt{font-family:var(--ff-display);font-size:44px;font-weight:800}
.plan .amt small{font-size:15px;font-weight:600;color:var(--muted)}
.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.plan li{position:relative;padding-left:28px;font-size:15px}
.plan li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:color-mix(in srgb,var(--accent-2) 18%,transparent)}
.plan li::after{content:"";position:absolute;left:6px;top:8px;width:5px;height:8px;border:2px solid var(--accent-2);border-top:0;border-left:0;transform:rotate(42deg)}

/* reveal */
html.js .rv{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease;transition-delay:calc(var(--d,0)*70ms)}
.in .rv,.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rv{opacity:1!important;transform:none!important;transition:none!important}.btn:hover,.theme-card:hover{transform:none}}

/* misc */
.note{font-size:var(--fs-6);color:var(--muted)}
.hr{height:1px;background:var(--line);border:0;margin:0}
.kbd{font-family:ui-monospace,Menlo,monospace;background:color-mix(in srgb,var(--ink) 6%,transparent);border:1px solid var(--line);border-radius:6px;padding:2px 7px;font-size:13px}
details.faq{border-bottom:1px solid var(--line);padding:18px 0}
details.faq summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:12px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";color:var(--accent);font-size:22px;line-height:1}
details.faq[open] summary::after{content:"\2212"}
details.faq p{margin:12px 0 0;color:var(--muted)}