/* swish site design system, v2: sleek, quiet, Mac-native. Inter everywhere (the face heyclicky.com uses), Geist Mono for tiny labels, a neutral light-grey page,
   medium weights with tight tracking, lowercase headings, glossy Mac buttons and window cards. Loaded after site.css, so it wins where they overlap.
   No inline styles anywhere (the pages' CSP forbids them). */
@font-face{font-family:"Inter";src:url(/fonts/Inter.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/fonts/GeistMono.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Sans Devanagari";src:url(/fonts/NotoDevanagari.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}
:root{
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Noto Sans Devanagari",system-ui,sans-serif;--round:var(--sans);
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --bg:#f5f5f5;--ink:#0a0a0a;--mute:rgba(0,0,0,.56);--line:rgba(0,0,0,.09);--line2:rgba(0,0,0,.14);--blue:#0a6cff;--card:#fff;
  --ok:#17803d;--bad:#b3261e;--violet:#6b4ef0;--spring:cubic-bezier(.2,.9,.3,1);
  --shadow:0 1px 2px rgba(0,0,0,.04),0 14px 40px rgba(0,0,0,.07);font-family:var(--sans)
}
html{scroll-behavior:smooth;scroll-padding-top:70px;max-width:100%;overflow-x:clip}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);font-size:16px;line-height:1.55;letter-spacing:-.014em;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;max-width:100%;overflow-x:clip}
h1,h2,h3,h4,.btn,.pill,.get,.wordmark,summary,.tabs-top a,.nav a,button{font-family:var(--sans)}
h1,h2,h3{font-weight:500;letter-spacing:-.04em;text-transform:lowercase;margin-top:0}
strong,b{font-weight:600}
:focus-visible{outline:2px solid #0a6cff;outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:12px;top:-60px;background:#000;color:#fff;padding:10px 16px;border-radius:10px;z-index:100}.skip:focus{top:10px}
.mute{color:var(--mute)}.small{font-size:13px}
a{color:inherit}

/* ---------- labels (Geist Mono, tiny, uppercase, like heyclicky's section tags) ---------- */
.pill{display:inline-flex;align-items:center;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);background:#fff;border:1px solid var(--line2);border-radius:999px;padding:6px 13px;box-shadow:0 1px 0 #fff inset,0 1px 2px rgba(0,0,0,.04)}

/* ---------- header: a slim Mac menu bar ---------- */
.nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;height:50px;padding:0 max(18px,calc((100vw - 1180px)/2));background:rgba(245,245,245,.82);backdrop-filter:saturate(1.6) blur(18px);border-bottom:1px solid var(--line);grid-template-columns:none}
.nav-l{display:flex;align-items:center;gap:4px;font-size:14px;color:var(--mute);letter-spacing:-.02em}
.nav-l a{padding:6px 11px;border-radius:8px;text-transform:lowercase;transition:color .15s,background .15s}.nav-l a:hover{color:var(--ink);background:rgba(0,0,0,.05)}
.nav-l .wordmark{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 0;margin-right:8px;color:var(--ink)!important;font-weight:600;font-size:16px;letter-spacing:-.04em}.nav-l .wordmark:hover{background:none}.nav-l .wordmark img{width:24px;height:24px;border-radius:7px;display:block}
.nav-l .nav-brands{color:var(--ink);font-weight:500;background:#fff;border:1px solid var(--line2);box-shadow:0 1px 2px rgba(0,0,0,.05)}.nav-l .nav-brands:hover{background:#fff;color:var(--ink)}
.nav-r{display:flex;align-items:center;gap:6px}
.nav-link{padding:6px 11px;border-radius:8px;font-size:14px;color:var(--ink);font-weight:500;text-transform:lowercase}.nav-link:hover{background:rgba(0,0,0,.05)}
.get-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 15px;border-radius:999px;font-weight:500;font-size:14px;color:#fff;text-transform:lowercase;background:linear-gradient(#4aa0ff,#0a6cff);border:1px solid #0858d6;box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 2px 8px rgba(10,108,255,.28);transition:transform .15s}
.get-btn:hover{transform:translateY(-1px)}
.mnav{display:none;position:relative}.mnav summary{list-style:none;cursor:pointer;padding:7px 13px;border-radius:999px;border:1px solid var(--line2);background:#fff;font-weight:500;font-size:14px;text-transform:lowercase}.mnav summary::-webkit-details-marker{display:none}
.mnav .sheet{position:absolute;right:0;top:44px;min-width:230px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:var(--shadow);display:grid;gap:2px;z-index:30}.mnav .sheet a{padding:11px 13px;border-radius:9px;font-weight:500;text-transform:lowercase}.mnav .sheet a:hover{background:#f3f3f3}
@media(max-width:900px){.nav-l a:not(.wordmark):not(.nav-brands){display:none}.nav-link{display:none}}
@media(max-width:620px){.nav-l .nav-brands{display:none}.mnav{display:block}}

/* ---------- ribbon ---------- */
.ribbon{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 18px;background:#fff;border-bottom:1px solid var(--line);font-size:13px;color:var(--mute);text-align:center}
.ribbon b{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.07em;color:var(--ink);background:#f0f0f0;border-radius:999px;padding:3px 9px}
.ribbon a{color:var(--blue);font-weight:500}.ribbon a:hover{text-decoration:underline}

/* ---------- buttons: glossy, Mac-like ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:999px;border:1px solid var(--line2);background:linear-gradient(#fff,#efefef);font-weight:500;font-size:15px;color:var(--ink);text-transform:lowercase;letter-spacing:-.02em;box-shadow:0 1px 0 #fff inset,0 1px 3px rgba(0,0,0,.08);transition:transform .15s,box-shadow .15s;position:relative;overflow:visible;cursor:pointer}
.btn::after{display:none}
.btn:hover{transform:translateY(-1px);box-shadow:0 1px 0 #fff inset,0 6px 16px rgba(0,0,0,.1)}.btn:active{transform:translateY(0) scale(.985)}
.btn.blue{color:#fff;background:linear-gradient(#4aa0ff,#0a6cff);border-color:#0858d6;box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 3px 10px rgba(10,108,255,.3)}
.btn.blue:hover{box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 8px 20px rgba(10,108,255,.38)}
.btn.dark{color:#fff;background:linear-gradient(#3a3a3a,#0a0a0a);border-color:#000}.btn small{opacity:.6;font-weight:400;font-size:12px}
.btn.big{padding:13px 26px;font-size:16.5px}.btn.small{padding:7px 14px;font-size:13.5px}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35);box-shadow:none}
.btn[disabled]{opacity:.5;pointer-events:none}
.cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.fine{color:var(--mute);font-size:13px;margin-top:14px;text-transform:none}.fine a{color:var(--blue)}

/* ---------- hero ---------- */
.hero2{position:relative;isolation:isolate;overflow:hidden;padding:clamp(40px,7vw,84px) 20px clamp(34px,5vw,56px);text-align:center;background-image:radial-gradient(rgba(0,0,0,.13) 1px,transparent 1px);background-size:24px 24px}
.hero2::after{content:"";position:absolute;inset:auto 0 0 0;height:90px;background:linear-gradient(transparent,var(--bg));z-index:-1}
.aurora{display:none}
.hero2 h1{margin:14px 0 0;font-size:clamp(76px,15vw,176px);line-height:.92;letter-spacing:-.07em;font-weight:500;color:#000;background:none;-webkit-background-clip:border-box;padding:0}
.tagline{margin:14px 0 0;font-size:clamp(20px,2.4vw,28px);font-weight:500;letter-spacing:-.04em}
.hero2 .lead-p{max-width:44ch;margin:12px auto 0;font-size:clamp(16px,1.8vw,19px);line-height:1.5;color:var(--mute);letter-spacing:-.02em}
.hero2 .cta{margin-top:26px}
.hero2 .cta-note{margin:12px 0 0;font-size:12.5px;color:var(--mute)}
.proof{display:flex;gap:6px 18px;flex-wrap:wrap;justify-content:center;margin:16px 0 0;padding:0;list-style:none;color:var(--mute);font-size:13px}.proof li::before{content:"✓";color:var(--ok);font-weight:700;margin-right:6px}
/* the collage of little windows around the hero, like heyclicky's desktop */
.fw{position:absolute;z-index:1;width:226px;background:#fff;border:1px solid var(--line2);border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 18px 40px rgba(0,0,0,.12);text-align:left;animation:bob 8s ease-in-out infinite}
.fw .fbar{display:flex;align-items:center;gap:6px;height:24px;padding:0 9px;background:linear-gradient(#f6f6f6,#e9e9e9);border-bottom:1px solid var(--line);border-radius:10px 10px 0 0}
.fw .fbar i{width:9px;height:9px;border-radius:50%;background:#ff5f57;border:.5px solid rgba(0,0,0,.18)}.fw .fbar i:nth-child(2){background:#febc2e}.fw .fbar i:nth-child(3){background:#28c840}
.fw .fbody{padding:12px 14px;font-size:13px;line-height:1.45;letter-spacing:-.015em}
.fw .fbody s{color:var(--mute);text-decoration-thickness:1px}.fw .fbody em{font-style:normal;background:#fff3a8;border-radius:3px;padding:0 2px}
.fw .cap{position:absolute;left:0;right:0;bottom:-22px;text-align:center;font-family:var(--mono);font-size:11px;color:var(--mute)}
.fw.a{left:max(16px,calc((100vw - 1180px)/2));top:44px;transform:rotate(-2deg)}.fw.b{right:max(16px,calc((100vw - 1180px)/2));top:30px;transform:rotate(1.5deg);animation-delay:-3s}
.fw.c{left:max(30px,calc((100vw - 1100px)/2));bottom:70px;transform:rotate(1.5deg);animation-delay:-5s}.fw.d{right:max(30px,calc((100vw - 1100px)/2));bottom:80px;transform:rotate(-1.5deg);animation-delay:-2s}
.fw .tones{display:flex;flex-wrap:wrap;gap:5px}.fw .tones span{padding:3px 9px;border-radius:999px;background:#f0f0f0;font-size:11.5px;font-weight:500}
@keyframes bob{50%{translate:0 -7px}}
@media(max-width:1180px){.fw{display:none}}
.ways{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:820px;margin:44px auto 0;text-align:left;position:relative;z-index:2}
.way{display:grid;gap:5px;padding:18px 20px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.04);transition:transform .2s,box-shadow .2s}
.way:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.way small{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;font-weight:500;color:var(--mute)}.way strong{font-size:18px;letter-spacing:-.035em;font-weight:500;text-transform:lowercase}.way span{color:var(--mute);line-height:1.45;font-size:14px}.way em{font-style:normal;color:var(--blue);font-weight:500;font-size:14px;margin-top:2px;text-transform:lowercase}
.way.brand{background:#101010;border-color:#101010}.way.brand small{color:rgba(255,255,255,.55)}.way.brand strong{color:#fff}.way.brand span{color:rgba(255,255,255,.62)}.way.brand em{color:#7fb8ff}
@media(max-width:700px){.ways{grid-template-columns:1fr}}

/* ---------- bands ---------- */
.wrap{max-width:1080px;margin:0 auto}
.band{padding:clamp(56px,8vw,96px) max(20px,calc((100vw - 1080px)/2));text-align:center;border:0}
.band.alt{background:#fff;border-block:1px solid var(--line)}
.band h2{margin:16px auto 14px;max-width:18ch;font-size:clamp(34px,5.4vw,60px);line-height:1.04;letter-spacing:-.045em;font-weight:500}
.band .sub{max-width:54ch;margin:0 auto 36px;color:var(--mute);font-size:clamp(16px,1.6vw,18.5px);line-height:1.55;letter-spacing:-.02em}
.band.left{text-align:left}.band.left h2,.band.left .sub{margin-left:0}

/* ---------- window cards (legacy .win/.card from site.css, restyled) ---------- */
.win,.card,.float{border-radius:12px;background:#fff;border:1px solid var(--line2);box-shadow:0 1px 2px rgba(0,0,0,.05),0 16px 40px rgba(0,0,0,.08)}
.bar,.card .bar,.win .bar{height:28px;background:linear-gradient(#f6f6f6,#e9e9e9)!important;border-bottom:1px solid var(--line);border-radius:12px 12px 0 0}
.bar .title{font-family:var(--mono);font-size:11px;color:var(--mute);text-transform:none}
.lights i{width:10px;height:10px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1040px;margin:0 auto;text-align:left}
.card{transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(0,0,0,.05),0 22px 50px rgba(0,0,0,.1)}
.card h3{margin:0 0 6px;font-size:19px;font-weight:500;letter-spacing:-.035em}.card p{margin:0;color:var(--mute);font-size:14.5px;line-height:1.55}
.card .body{padding:18px 20px 20px}
@media(max-width:900px){.cards{grid-template-columns:1fr 1fr}}@media(max-width:600px){.cards{grid-template-columns:1fr}}
.marquee{overflow:hidden;white-space:nowrap;background:#0a0a0a;color:#fff;padding:12px 0;border:0}
.marquee .track{display:inline-flex;gap:26px;animation:scroll 32s linear infinite;font-family:var(--mono);font-weight:500;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase}.marquee i{font-style:normal;opacity:.45}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- demo (kept from site.css, calmer) ---------- */
.stage{max-width:720px;margin:0 auto}
.win.big{box-shadow:0 1px 2px rgba(0,0,0,.05),0 28px 70px rgba(0,0,0,.11)}
.draft{font-size:21px;line-height:1.5;letter-spacing:-.025em;font-weight:400}
.ring{background:rgba(255,255,255,.92);backdrop-filter:none;border:1px solid var(--line2);box-shadow:0 18px 44px rgba(0,0,0,.16)}
.ring button{background:radial-gradient(circle at 30% 25%,#fff,var(--c,#e8e8ef));border:1px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.12);color:#000}
.ring .hub{background:#f5f5f5;border-color:var(--line2);color:#000;font-weight:500}
.chip{font-family:var(--sans)}
.controls{gap:8px}

/* ---------- how it works ---------- */
.taps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:960px;margin:0 auto;text-align:left}
.tap{padding:22px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.tap .n{display:inline-grid;place-items:center;min-width:46px;height:34px;padding:0 12px;border-radius:9px;font-family:var(--mono);font-weight:500;font-size:14px;background:#f0f0f0;color:#000}
.tap h3{margin:14px 0 6px;font-size:22px}.tap p{margin:0;color:var(--mute);line-height:1.55;font-size:15px}
@media(max-width:800px){.taps{grid-template-columns:1fr}}
.setup{display:flex;flex-wrap:wrap;gap:8px 10px;justify-content:center;margin:26px auto 0;max-width:820px;color:var(--mute);font-size:14px}.setup span{display:inline-flex;gap:8px;align-items:center;padding:7px 14px;border-radius:999px;background:#fff;border:1px solid var(--line)}.setup b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#000;color:#fff;font-size:11px;font-family:var(--mono)}

/* ---------- people ---------- */
.people{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:1040px;margin:0 auto;text-align:left}
.people.three{grid-template-columns:repeat(3,1fr);max-width:960px}
.person{padding:18px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}.band.alt .person{background:#fff}.person b{display:block;font-size:16px;margin-bottom:5px;font-weight:600;letter-spacing:-.025em}.person p{margin:0;color:var(--mute);font-size:14px;line-height:1.5}.person i{display:block;font-style:normal;margin-top:12px;padding:10px 12px;border-radius:9px;background:#f0f0f0;color:#222;font-size:13px;line-height:1.45}
@media(max-width:900px){.people{grid-template-columns:1fr 1fr}.people.three{grid-template-columns:1fr}}@media(max-width:560px){.people{grid-template-columns:1fr}}

/* ---------- two ways in ---------- */
.dual{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:1000px;margin:0 auto;text-align:left}
.pane{padding:26px;border-radius:16px;background:#fff;border:1px solid var(--line);display:grid;gap:12px;align-content:start;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.pane.brand{background:#0f0f0f;border-color:#0f0f0f;color:#fff}.pane.brand p,.pane.brand ul{color:rgba(255,255,255,.7)}.pane.brand .tag2{color:rgba(255,255,255,.5)}.pane.brand li::before{color:#7fb8ff}
.pane h3{margin:0;font-size:26px;line-height:1.08}.pane p{margin:0;color:var(--mute);line-height:1.55}
.pane ul{list-style:none;margin:2px 0 6px;padding:0;display:grid;gap:8px;font-size:14.5px;color:#333}.pane li::before{content:"→";color:var(--mute);margin-right:9px}
.pane .tag2{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;font-weight:500;color:var(--mute)}
@media(max-width:800px){.dual{grid-template-columns:1fr}}
.why-sponsor{max-width:740px;margin:22px auto 0;padding:16px 20px;border-radius:12px;background:#fff;border:1px dashed var(--line2);color:var(--mute);line-height:1.55;text-align:left;font-size:14.5px}.why-sponsor b{color:var(--ink)}

/* ---------- pricing ---------- */
.plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:1080px;margin:0 auto;text-align:left;align-items:stretch}
.tier{position:relative;display:grid;gap:8px;align-content:start;padding:22px 20px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.04);transition:transform .2s,box-shadow .2s}
.tier:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.tier.pop{border:1.5px solid #000;box-shadow:0 18px 44px rgba(0,0,0,.12)}
.tier .badge{position:absolute;top:-11px;left:18px;background:#000;color:#fff;border-radius:999px;padding:3px 10px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.tier h3{margin:0;font-size:21px}.tier .for{margin:0;color:var(--mute);font-size:13.5px;min-height:2.6em}
.tier .amt{margin:6px 0 0;font-size:44px;font-weight:500;letter-spacing:-.06em;line-height:1}.tier .amt small{font-size:14px;font-weight:400;color:var(--mute);letter-spacing:-.01em}
.tier .per{margin:0;color:var(--mute);font-size:12.5px;min-height:1.2em}
.tier ul{list-style:none;margin:8px 0 12px;padding:0;display:grid;gap:8px;font-size:14.5px;line-height:1.35}.tier li::before{content:"✓";color:var(--ok);font-weight:700;margin-right:8px}
.tier .btn{justify-content:center;margin-top:auto}
@media(max-width:1000px){.plan-grid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.plan-grid{grid-template-columns:1fr}}
.pack-line{max-width:1080px;margin:12px auto 0;padding:14px 20px;border-radius:12px;background:#fff;border:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;text-align:left;font-size:14.5px}
.calc{max-width:720px;margin:0 auto;padding:26px;border-radius:16px;background:#fff;border:1px solid var(--line);text-align:left;box-shadow:var(--shadow)}
.calc h3{margin:0 0 4px;font-size:24px}.calc input[type=range]{width:100%;accent-color:#000;margin:16px 0 6px;min-height:0;padding:0;border:0}
.calc .out{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:baseline;margin-top:12px}.calc .out b{font-size:26px;letter-spacing:-.04em;font-weight:500}.calc .out span{color:var(--mute)}
.compare{width:100%;max-width:1000px;margin:0 auto;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:14.5px;text-align:left}
.compare th,.compare td{padding:13px 16px;border-bottom:1px solid var(--line)}.compare tr:last-child td{border-bottom:0}.compare th{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);background:#fafafa;font-weight:500}
.compare td:not(:first-child),.compare th:not(:first-child){text-align:center}.compare .y{color:var(--ok);font-weight:700}
.scroll-x{overflow-x:auto;max-width:100%}

/* ---------- trust ---------- */
.trust{list-style:none;margin:0 auto;padding:0;max-width:860px;display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:left}
.trust li{padding:16px 18px;border-radius:12px;background:#fff;border:1px solid var(--line);line-height:1.5;font-size:14.5px;color:#222}
@media(max-width:700px){.trust{grid-template-columns:1fr}}

/* ---------- faq ---------- */
.faq{max-width:760px;margin:0 auto;display:grid;gap:0;text-align:left;border-top:1px solid var(--line)}
.faq-i{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0}
.faq-i summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:500;font-size:17px;letter-spacing:-.03em;display:flex;justify-content:space-between;gap:14px;text-transform:none}.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary::after{content:"+";font-size:22px;line-height:1;color:var(--mute);transition:transform .2s}.faq-i[open] summary::after{transform:rotate(45deg)}
.faq-i p{margin:0 0 18px;color:var(--mute);line-height:1.65;font-size:15px;max-width:62ch}.faq-i a{color:var(--blue)}

/* ---------- final call ---------- */
.final-wrap{padding:0 max(14px,calc((100vw - 1080px)/2)) 70px}
.final{background:#0a0a0a;color:#fff;text-align:center;border-radius:20px;padding:clamp(40px,6vw,68px) 22px;position:relative;overflow:hidden;background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1px);background-size:22px 22px}
.final h2{color:#fff;margin:0 auto 12px;max-width:16ch;font-size:clamp(34px,5.2vw,58px);line-height:1}.final p{color:rgba(255,255,255,.62);max-width:44ch;margin:0 auto 24px;line-height:1.5;font-size:17px}

/* ---------- footer ---------- */
footer.site{background:#fff;border-top:1px solid var(--line);padding:42px max(20px,calc((100vw - 1080px)/2)) 26px;display:block;color:var(--ink)}
.fcols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:24px}.fcols h4{margin:0 0 10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:500}
.fcols a{display:block;padding:4px 0;color:#333;text-decoration:none;font-size:14.5px;text-transform:lowercase}.fcols a:hover{color:var(--blue)}.fcols p{margin:8px 0 14px;color:var(--mute);font-size:14px;line-height:1.5;max-width:28ch}
.fcols .wordmark{font-size:20px;font-weight:600;letter-spacing:-.045em;padding:0}.fcols .get-btn{display:inline-flex;margin-top:2px;padding:7px 15px;color:#fff}.fcols .get-btn:hover{color:#fff}
.fbase{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:30px;padding-top:18px;border-top:1px solid var(--line);color:var(--mute);font-size:12.5px}
@media(max-width:860px){.fcols{grid-template-columns:1fr 1fr}.fcols>div:first-child{grid-column:1/-1}}

/* ---------- forms, dialog, notices ---------- */
.field{display:grid;gap:6px;font-size:13px;color:var(--mute);font-weight:500;letter-spacing:-.01em;text-transform:lowercase}
.field input,.field select,.field textarea,.copyrow input,.acct input,.acct select,.acct textarea{font:inherit;font-size:15.5px;padding:11px 13px;border:1px solid var(--line2);border-radius:10px;background:#fff;color:var(--ink);width:100%;min-height:44px;letter-spacing:-.015em}
.field textarea{min-height:88px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:#000;box-shadow:0 0 0 3px rgba(10,108,255,.18)}
.field input[aria-invalid=true]{border-color:var(--bad)}
.hint{font-size:12.5px;color:var(--mute);font-weight:400;display:flex;justify-content:space-between;gap:10px;text-transform:none}.hint .over{color:var(--bad);font-weight:600}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
dialog.lead{border:0;border-radius:18px;padding:0;max-width:min(440px,calc(100vw - 28px));width:100%;box-shadow:0 30px 90px rgba(0,0,0,.3);background:#fff;color:var(--ink)}
dialog.lead::backdrop{background:rgba(0,0,0,.4);backdrop-filter:blur(3px)}
.lead-in{padding:26px 24px 22px;display:grid;gap:13px;position:relative}.lead-in h2{margin:0;font-size:26px;line-height:1.05;padding-right:30px}.lead-in p{margin:0;line-height:1.5}
.lead-x{position:absolute;right:12px;top:10px;border:0;background:#f1f1f1;border-radius:50%;width:30px;height:30px;font-size:18px;line-height:1}
.copyrow{display:flex;gap:8px}.copyrow input{min-width:0}
.notice{margin:0 0 16px;padding:12px 16px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:14.5px}.notice.bad{border-color:#f0c4be;color:var(--bad);background:#fff7f6}.notice.good{border-color:#bfe3cb;color:var(--ok);background:#f4fbf6}

/* ---------- login ---------- */
.login{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:980px;margin:0 auto;padding:clamp(28px,5vw,64px) 20px 90px;align-items:start}
.login-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:var(--shadow);display:grid;gap:14px}
.login-card h1{margin:0;font-size:clamp(30px,4vw,40px);line-height:1.04}.login-card p{margin:0}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:999px;background:#eee}.seg button{border:0;background:transparent;padding:9px 12px;border-radius:999px;font-weight:500;font-size:14px;color:var(--mute);text-transform:lowercase}.seg button[aria-pressed=true]{background:#fff;color:#000;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.login-side{padding:6px;display:grid;gap:16px;align-content:start}.login-side h2{margin:0;font-size:28px;line-height:1.05}
.perk{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start}.perk i{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:#fff;border:1px solid var(--line);font-style:normal;font-size:17px}.perk b{display:block;font-weight:600;letter-spacing:-.02em}.perk span{color:var(--mute);font-size:14px;line-height:1.45}
.linkbtn{border:0;background:none;color:var(--blue);font-weight:500;padding:4px 0;text-align:left}
.sent{padding:16px;border-radius:12px;background:#f4fbf6;border:1px solid #bfe3cb;color:var(--ok);line-height:1.5}
#perks-writer,#perks-sponsor{display:grid;gap:16px}
.pw{border-top:1px solid var(--line);padding-top:12px}.pw summary{cursor:pointer;list-style:none}.pw summary::-webkit-details-marker{display:none}.pw[open] summary{margin-bottom:12px}
@media(max-width:860px){.login{grid-template-columns:1fr}.login-side{order:2}}

/* ---------- account switcher, panels, studio ---------- */
.acct{max-width:1000px;margin:0 auto;padding:30px 22px 80px;min-height:70vh}.acct-wide{max-width:1120px}
.acct h1{font-size:clamp(32px,4.5vw,46px);letter-spacing:-.045em;margin:0 0 6px;font-weight:500}.acct h2{font-size:26px;margin:36px 0 6px}
.tabs-top{display:flex;gap:4px;margin:0 0 24px;padding:4px;border-radius:999px;background:#ececec;width:max-content;max-width:100%}
.tabs-top-inner{display:flex;gap:4px;flex-wrap:wrap}
.tabs-top a{padding:8px 16px;border-radius:999px;font-weight:500;font-size:14px;color:var(--mute);text-transform:lowercase}.tabs-top a[aria-current=page]{background:#fff;color:#000;box-shadow:0 1px 3px rgba(0,0,0,.12)}.tabs-top a:not([aria-current]):hover{color:#000}
.head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.stack{display:grid;gap:12px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}@media(max-width:900px){.grid{grid-template-columns:1fr}}
.big{font-size:38px;font-weight:500;letter-spacing:-.05em;margin:0}
.facts{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px;font-size:14.5px}.facts li{display:flex;justify-content:space-between;gap:12px}.facts b{font-weight:600}
.acct .win .body{padding:20px}
.acct .plans{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}@media(max-width:900px){.acct .plans{grid-template-columns:1fr 1fr}}@media(max-width:560px){.acct .plans{grid-template-columns:1fr}}
.plan .price{font-size:32px;font-weight:500;letter-spacing:-.05em}.plan .price small{font-size:13px;color:var(--mute);letter-spacing:0;font-weight:400}.plan ul{list-style:none;padding:0;margin:8px 0;display:grid;gap:6px;color:var(--mute);font-size:14px}.plan h3{margin:0;font-size:19px}
.plan.current{outline:2px solid #000}
.brand-nudge{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:18px 0 0;padding:16px 20px;border-radius:14px;background:#0f0f0f;color:#fff}.brand-nudge div{display:grid;gap:2px}.brand-nudge span{color:rgba(255,255,255,.6);font-size:14px}
.studio{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:18px;align-items:start}
.panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;display:grid;gap:14px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.acct .panel h2,.acct .panel h3{margin:0}.acct .panel h2{font-size:22px}.panel h3{font-size:17px}
.two-c{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}.three-c{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:start}
@media(max-width:600px){.two-c,.three-c{grid-template-columns:1fr}}@media(max-width:980px){.studio{grid-template-columns:1fr}}
.sticky{position:sticky;top:70px;display:grid;gap:14px}
.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.chip2{border:1px solid var(--line2);background:#fff;color:#000;border-radius:999px;padding:6px 13px;font-size:13px;font-weight:500;text-transform:lowercase}.chip2:hover{background:#f3f3f3}
.est{padding:14px 16px;border-radius:12px;background:#f3f3f3;color:#222;line-height:1.5;font-size:14px}.est b{font-size:17px;font-weight:600}
.studio-list{margin-top:18px}.bal{float:right;font-size:24px;letter-spacing:-.04em;font-weight:500}
.campaign{display:grid;grid-template-columns:1fr auto;gap:8px 14px;align-items:center;padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:#fff}
.campaign strong{font-size:15.5px;font-weight:600;letter-spacing:-.02em}.campaign small{color:var(--mute);display:block;margin-top:3px;line-height:1.4}.campaign .acts{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}
.status{padding:4px 11px;border-radius:999px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;background:#eee;color:#555}
.status.approved{background:#dcf3e4;color:#17803d}.status.pending{background:#fff0cf;color:#8a5a00}.status.rejected{background:#fde0dc;color:#b3261e}.status.paused{background:#e4e7f6;color:#3a4488}
.timeline{display:flex;gap:6px;align-items:center;flex-wrap:wrap;color:var(--mute);font-size:12.5px;margin-top:4px}.timeline b{color:#000}.timeline i{font-style:normal;opacity:.5}
.empty{padding:24px;border-radius:12px;border:1.5px dashed var(--line2);text-align:center;color:var(--mute);line-height:1.6}

/* ---------- picker mock + sponsored line (advertise, studio, demo) ---------- */
.picker-mock{position:relative;display:grid;gap:14px;justify-items:center;padding:26px 18px;border-radius:16px;background:#fafafa;border:1px solid var(--line)}
.flower-mini{position:relative;width:210px;height:210px}
.flower-mini i{position:absolute;left:50%;top:50%;width:54px;height:88px;margin:-88px 0 0 -27px;border-radius:50% 50% 46% 46%;transform-origin:50% 88px;border:1.5px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.1);transform:rotate(var(--r,0deg))}
.flower-mini i span{position:absolute;left:50%;top:12px;width:24px;margin-left:-12px;text-align:center;font-size:18px;line-height:1;font-style:normal;transform:rotate(calc(var(--r,0deg) * -1))}
.flower-mini b{position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:#fff;border:1px solid var(--line2);display:grid;place-items:center;color:#000;font-size:19px}
.flower-mini .pt0{--r:0deg;background:#cdf0d9}.flower-mini .pt1{--r:30deg;background:#ffdecb}.flower-mini .pt2{--r:60deg;background:#c4e0f7}.flower-mini .pt3{--r:90deg;background:#f5cce0}
.flower-mini .pt4{--r:120deg;background:#e0d2fa}.flower-mini .pt5{--r:150deg;background:#cdf0d9}.flower-mini .pt6{--r:180deg;background:#ffdecb}.flower-mini .pt7{--r:210deg;background:#c4e0f7}
.flower-mini .pt8{--r:240deg;background:#f5cce0}.flower-mini .pt9{--r:270deg;background:#e0d2fa}.flower-mini .pt10{--r:300deg;background:#cdf0d9}.flower-mini .pt11{--r:330deg;background:#ffdecb}
.sponsor-line{display:flex;align-items:center;gap:8px;max-width:min(380px,100%);min-width:0;padding:7px 13px;border-radius:999px;background:#fff;border:1px solid var(--line2);box-shadow:0 6px 18px rgba(0,0,0,.08);font-size:12.5px}
.sponsor-line .lab{flex:none;padding:2px 7px;border-radius:999px;background:#0000000f;font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.05em;text-transform:uppercase}
.sponsor-line .tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.sponsor-line .tx small{font-weight:400;color:var(--mute);font-size:12px}
.demo-sp{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:6;width:max-content;max-width:calc(100% - 24px);text-decoration:none;color:var(--ink)}.demo-sp:hover{box-shadow:0 10px 26px rgba(0,0,0,.14)}.demo-sp[hidden]{display:none}
.market{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 auto;max-width:740px}
.mstat{padding:16px 18px;border-radius:12px;background:#fff;border:1px solid var(--line);text-align:left}.mstat b{display:block;font-size:30px;letter-spacing:-.05em;line-height:1.05;font-weight:500}.mstat span{color:var(--mute);font-size:13px}
@media(max-width:620px){.market{grid-template-columns:1fr}}
.format{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;max-width:1000px;margin:0 auto;text-align:left;align-items:center}@media(max-width:800px){.format{grid-template-columns:1fr}}
.specs{display:grid;gap:8px;padding:0;margin:0;list-style:none}.specs li{display:flex;justify-content:space-between;gap:14px;padding:12px 15px;border-radius:10px;background:#fff;border:1px solid var(--line);font-size:14.5px}.specs b{font-weight:600}.specs span{color:var(--mute);text-align:right}
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:1040px;margin:0 auto;text-align:left;counter-reset:s}
.flow .st{padding:20px;border-radius:14px;background:#fff;border:1px solid var(--line);counter-increment:s}.flow .st::before{content:counter(s);display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#000;color:#fff;font-family:var(--mono);font-size:13px;margin-bottom:12px}
.flow b{display:block;font-size:17px;letter-spacing:-.03em;margin-bottom:5px;font-weight:600}.flow p{margin:0;color:var(--mute);font-size:14px;line-height:1.5}
@media(max-width:900px){.flow{grid-template-columns:1fr 1fr}}@media(max-width:560px){.flow{grid-template-columns:1fr}}
.examples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:1040px;margin:0 auto;text-align:left}
.ex{min-width:0;padding:18px;border-radius:14px;background:#fff;border:1px solid var(--line);display:grid;gap:10px}.ex small{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;font-weight:500;color:var(--mute)}.ex p{margin:0;color:var(--mute);font-size:14px;line-height:1.5}
@media(max-width:860px){.examples{grid-template-columns:minmax(0,1fr)}}

/* print: the brands page is meant to be saved as a PDF */
@media print{.nav,.ribbon,footer.site,.final-wrap,.no-print,.mnav{display:none!important}body{background:#fff}.band{padding:24px 0}.hero2{padding:20px 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ======================= colour layer: pastel, chic, still quiet ======================= */
:root{--p-mint:#cdf0d9;--p-lilac:#e0d2fa;--p-peach:#ffdecb;--p-sky:#c4e0f7;--p-rose:#f5cce0;--p-lemon:#fff3b8;--g-brand:linear-gradient(120deg,#ff7ab8,#8a6bff 48%,#35b8ff)}
.hero2{background-color:var(--bg);background-image:radial-gradient(rgba(0,0,0,.11) 1px,transparent 1px),radial-gradient(60% 60% at 8% 12%,rgba(255,200,230,.55),transparent 70%),radial-gradient(55% 55% at 94% 8%,rgba(205,190,255,.55),transparent 70%),radial-gradient(60% 55% at 70% 100%,rgba(190,240,215,.55),transparent 70%),radial-gradient(45% 45% at 18% 96%,rgba(255,225,190,.5),transparent 70%);background-size:24px 24px,auto,auto,auto,auto}
.tagline{background:var(--g-brand);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:600;width:max-content;margin-left:auto;margin-right:auto}
.pill{border-color:rgba(0,0,0,.1);background:linear-gradient(#fff,#fbfaff)}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--g-brand);margin-right:8px}
.band.alt{background:linear-gradient(180deg,#fff,#fbf9ff 60%,#fff)}
.card.c1 .bar,.c1 .bar{background:linear-gradient(90deg,#cdeed3,#c4e8e6)!important}.c2 .bar{background:linear-gradient(90deg,#e0d2fa,#f5cce0)!important}.c3 .bar{background:linear-gradient(90deg,#ffdecb,#f9ecb8)!important}
.c4 .bar{background:linear-gradient(90deg,#c4e0f7,#e0d2fa)!important}.c5 .bar{background:linear-gradient(90deg,#f5cce0,#ffdecb)!important}.c6 .bar{background:linear-gradient(90deg,#cdeed3,#c4e0f7)!important}
.fw.a .fbar{background:linear-gradient(90deg,#cdeed3,#c4e8e6)}.fw.b .fbar{background:linear-gradient(90deg,#e0d2fa,#f5cce0)}.fw.c .fbar{background:linear-gradient(90deg,#ffdecb,#f9ecb8)}.fw.d .fbar{background:linear-gradient(90deg,#f5cce0,#ffdecb)}
.fw .tones span:nth-child(1){background:var(--p-mint)}.fw .tones span:nth-child(2){background:var(--p-peach)}.fw .tones span:nth-child(3){background:var(--p-sky)}.fw .tones span:nth-child(4){background:var(--p-rose)}.fw .tones span:nth-child(5){background:var(--p-lilac)}.fw .tones span:nth-child(6){background:var(--p-lemon)}
.tap:nth-child(1) .n{background:var(--p-mint)}.tap:nth-child(2) .n{background:var(--p-lilac)}.tap:nth-child(3) .n{background:var(--p-peach)}
.tier:nth-child(1){background:linear-gradient(180deg,#f3fcf6,#fff 40%)}.tier:nth-child(2){background:linear-gradient(180deg,#fff6ef,#fff 40%)}.tier:nth-child(3){background:linear-gradient(180deg,#f6f1ff,#fff 40%)}.tier:nth-child(4){background:linear-gradient(180deg,#eef6ff,#fff 40%)}
.tier.pop{border:1.5px solid transparent;background:linear-gradient(#f9f5ff,#fff 45%) padding-box,var(--g-brand) border-box}
.tier .badge{background:var(--g-brand)}
.way:nth-child(1){background:linear-gradient(135deg,#f1fbf5,#fff)}
.way.brand{background:linear-gradient(135deg,#1a1228,#0b0b10)}
.btn.sponsor{background:linear-gradient(#fff,#fff) padding-box,var(--g-brand) border-box;border:1.5px solid transparent}
.final{background-color:#0a0a0a;background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1px),radial-gradient(50% 80% at 12% 0,rgba(255,122,184,.35),transparent 70%),radial-gradient(50% 80% at 90% 100%,rgba(53,184,255,.3),transparent 70%),radial-gradient(40% 60% at 55% 0,rgba(138,107,255,.3),transparent 70%);background-size:22px 22px,auto,auto,auto}
.pane.brand{background:linear-gradient(135deg,#1c1230,#0b0b10)}
.flow .st::before{background:var(--g-brand)}
.person:nth-child(1) i{background:var(--p-mint)}.person:nth-child(2) i{background:var(--p-peach)}.person:nth-child(3) i{background:var(--p-sky)}.person:nth-child(4) i{background:var(--p-lilac)}
.login{background:radial-gradient(40% 50% at 8% 10%,rgba(255,200,230,.5),transparent 70%),radial-gradient(40% 50% at 95% 15%,rgba(205,190,255,.5),transparent 70%),radial-gradient(40% 50% at 70% 100%,rgba(190,240,215,.5),transparent 70%)}
.perk:nth-child(1) i{background:var(--p-lilac)}.perk:nth-child(2) i{background:var(--p-mint)}.perk:nth-child(3) i{background:var(--p-peach)}

/* ---------- stickers and the big animated showcase ---------- */
.stk{position:absolute;z-index:1;pointer-events:none;user-select:none}
.stk.hello{width:104px;background:#fff;border:1px solid rgba(0,0,0,.14);box-shadow:0 10px 24px rgba(0,0,0,.14);text-align:center;transform:rotate(-7deg);left:max(18px,calc((100vw - 1180px)/2 + 250px));top:34px;animation:wig 6s ease-in-out infinite}
.stk.hello small{display:block;background:#0b3bd8;color:#fff;font-family:var(--mono);font-weight:600;letter-spacing:.14em;font-size:11px;padding:4px 0}.stk.hello em{display:block;font-style:normal;color:#0b3bd8;font-size:8.5px;font-weight:600;margin-top:4px}.stk.hello strong{display:block;font-family:"Bradley Hand","Segoe Script",cursive;font-weight:400;font-size:27px;padding:0 0 9px;letter-spacing:0;text-transform:none}
.stk.flo{width:46px;height:46px;right:max(30px,calc((100vw - 1180px)/2 + 270px));top:56px;animation:spin 14s linear infinite}
.stk.k1{font-size:22px;left:14%;top:44%;color:#2b2830}.stk.k2{font-size:22px;right:15%;top:48%;color:#2b2830}.stk.sp1{font-size:26px;left:30%;bottom:34%;color:#ff7ab8}.stk.sp2{font-size:20px;right:27%;bottom:40%;color:#8a6bff}.stk.sp3{font-size:18px;left:9%;top:24%;color:#35b8ff}
@keyframes wig{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(-3deg) translateY(-6px)}}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:1180px){.stk{display:none}}
.showcase{max-width:720px;margin:34px auto 0;position:relative;z-index:2}
.sc-tabs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.sc-tabs button{border:1px solid var(--line2);background:#fff;border-radius:999px;padding:7px 15px;font-size:13.5px;font-weight:500;color:var(--mute);text-transform:lowercase;transition:all .15s}
.sc-tabs button:hover{color:#000}.sc-tabs button[aria-selected=true]{background:#0a0a0a;color:#fff;border-color:#0a0a0a;box-shadow:0 6px 16px rgba(0,0,0,.2)}
.sc-frame{position:relative;border-radius:20px;overflow:hidden;background:#fff;border:1px solid var(--line2);box-shadow:0 2px 4px rgba(0,0,0,.05),0 34px 80px rgba(60,30,120,.2);line-height:0}
.sc-frame img{display:block;width:100%;height:auto;aspect-ratio:16/10}
.sc-cap{position:absolute;left:0;right:0;bottom:-26px;text-align:center;font-family:var(--mono);font-size:11px;color:var(--mute);line-height:1}
.gif-card{border-radius:16px;overflow:hidden;border:1px solid var(--line2);box-shadow:0 20px 50px rgba(60,30,120,.14);line-height:0;background:#fff}.gif-card img{width:100%;height:auto;display:block;aspect-ratio:16/10}
.format .gif-card,.dual .gif-card{margin-top:4px}
.mail-links{margin:10px 0 8px}.sent .small{display:block;color:var(--mute);margin-top:6px;line-height:1.5}.sent .small .linkbtn{display:inline;padding:0}
.get-btn,.nav-link,.nav-l a{white-space:nowrap}
@media(max-width:620px){.ribbon .rb-long{display:none}.ribbon{padding:7px 14px}}

/* ---------- brand assets, ladder ---------- */
.sp-logo{flex:none;width:20px;height:20px;border-radius:6px;object-fit:cover;background:#f0f0f0}.sp-logo[hidden]{display:none}
.logo-drop{display:flex;gap:14px;align-items:center;padding:14px;border-radius:14px;border:1.5px dashed var(--line2);background:#fafafa;transition:border-color .15s,background .15s}.logo-drop.over{border-color:#0a6cff;background:#f0f6ff}
.logo-prev{flex:none;width:64px;height:64px;border-radius:16px;background:#fff;border:1px solid var(--line2);display:grid;place-items:center;font-size:26px;color:var(--mute);overflow:hidden;background-size:cover;background-position:center}
.logo-prev img{width:100%;height:100%;object-fit:cover;display:block}
.logo-copy{display:grid;gap:4px;min-width:0}.logo-copy b{font-weight:600}
.ladder{display:grid;gap:6px;margin:12px 0 0}.ladder .rung{display:grid;grid-template-columns:34px 1fr 64px;gap:10px;align-items:center;font-size:13px;color:var(--mute)}
.ladder .rung i{display:block;height:9px;border-radius:99px;background:linear-gradient(90deg,#ff7ab8,#8a6bff 55%,#35b8ff);width:var(--w,50%)}.ladder .rung b{color:var(--ink);font-weight:600;text-align:right}
.ladder.big{max-width:560px;margin:18px auto 0}.ladder.big .rung{font-size:14px}
.campaign .logo{width:36px;height:36px;border-radius:10px;object-fit:cover;background:#f0f0f0;margin-right:10px;float:left}
.campaign .cinfo{display:block;overflow:hidden}
.brand-pick select{font-weight:500}
.logo-thumb{width:44px;height:44px;border-radius:12px;object-fit:cover;float:left;margin:0 12px 6px 0;border:1px solid var(--line)}

/* ---------- brands page hero ---------- */
.hero2 h1.long{font-size:clamp(44px,8vw,108px);line-height:.98;letter-spacing:-.06em;max-width:11ch;margin:14px auto 0}
.stk.hello.adv{left:max(18px,calc((100vw - 1180px)/2 + 260px));top:20px}
.fw.b .fbody b{font-weight:600}.fw.d .fbody b{color:var(--ok)}
.fw .ladder{margin:0}.fw .ladder .rung{grid-template-columns:22px 1fr 40px;font-size:11.5px}.fw .ladder .rung i.w9{--w:90%}.fw .ladder .rung i.w6{--w:62%}.fw .ladder .rung i.w4{--w:44%}
.fw .sponsor-line{box-shadow:none;max-width:none}
.login{max-width:none;margin:0;padding-left:max(20px,calc((100vw - 980px)/2));padding-right:max(20px,calc((100vw - 980px)/2));min-height:calc(100vh - 120px)}

/* sponsored line: black so it is read, with a highlighted label (matches the Mac app) */
.sponsor-line{background:#0a0a0a;border-color:#0a0a0a;color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.28)}
.sponsor-line .lab{background:#ffe27a;color:#000;font-weight:700}
.sponsor-line .tx{color:#fff;font-weight:600}.sponsor-line .tx small{color:rgba(255,255,255,.62)}
.demo-sp:hover{box-shadow:0 12px 28px rgba(0,0,0,.35)}

/* ======================= the sponsorship message (ribbon): black, so it is read ======================= */
.ribbon{background:#0a0a0a;border-bottom:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.72)}
.ribbon b{background:#ffe27a;color:#000;font-weight:600}
.ribbon a{color:#fff;font-weight:600;text-decoration:underline;text-decoration-color:#ff7ab8;text-underline-offset:3px}.ribbon a:hover{color:#ffe27a}

/* ======================= dark pages: sign-in, brands, sponsor studio ======================= */
body.dark{--bg:#07070b;--ink:#fff;--mute:rgba(255,255,255,.64);--line:rgba(255,255,255,.1);--line2:rgba(255,255,255,.17);background:#07070b;color:#fff}
body.dark h1,body.dark h2,body.dark h3,body.dark strong,body.dark b{color:#fff}
body.dark a{color:inherit}
body.dark .nav{background:rgba(7,7,11,.8);border-bottom-color:rgba(255,255,255,.09)}
body.dark .nav-l,body.dark .nav-l a{color:rgba(255,255,255,.66)}body.dark .nav-l a:hover{color:#fff;background:rgba(255,255,255,.08)}
body.dark .nav-l .wordmark,body.dark .nav-link{color:#fff!important}body.dark .nav-link:hover{background:rgba(255,255,255,.08)}
body.dark .nav-l .nav-brands{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff;box-shadow:none}
body.dark .mnav summary{background:#17171f;color:#fff;border-color:rgba(255,255,255,.18)}body.dark .mnav .sheet{background:#14141c;border-color:rgba(255,255,255,.12)}body.dark .mnav .sheet a:hover{background:rgba(255,255,255,.08)}
body.dark .hero2{background-color:#07070b;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px),radial-gradient(55% 60% at 8% 8%,rgba(255,122,184,.32),transparent 70%),radial-gradient(55% 60% at 95% 6%,rgba(138,107,255,.38),transparent 70%),radial-gradient(60% 55% at 70% 100%,rgba(53,184,255,.26),transparent 70%);background-size:24px 24px,auto,auto,auto}
body.dark .hero2::after{background:linear-gradient(transparent,#07070b)}
body.dark .hero2 h1{color:#fff}body.dark .hero2 .lead-p,body.dark .band .sub{color:rgba(255,255,255,.66)}
body.dark .proof,body.dark .cta-note,body.dark .fine{color:rgba(255,255,255,.55)}
body.dark .pill{background:rgba(255,255,255,.08);color:rgba(255,255,255,.78);border-color:rgba(255,255,255,.16);box-shadow:none}
body.dark .btn{background:linear-gradient(#2a2a36,#1b1b24);color:#fff;border-color:rgba(255,255,255,.18);box-shadow:0 1px 0 rgba(255,255,255,.08) inset}
body.dark .btn.blue{background:linear-gradient(#4aa0ff,#0a6cff);border-color:#0858d6}
body.dark .btn.sponsor{background:linear-gradient(#0d0d13,#0d0d13) padding-box,var(--g-brand) border-box;border:1.5px solid transparent}
body.dark .band.alt{background:#0d0d14;border-color:rgba(255,255,255,.08)}
body.dark .person,body.dark .flow .st,body.dark .ex,body.dark .mstat,body.dark .specs li,body.dark .picker-mock,body.dark .panel,body.dark .login-card,body.dark .campaign,body.dark .calc,body.dark .tier,body.dark .logo-drop,body.dark .copyrow input{background:#12121a;border-color:rgba(255,255,255,.1);color:#fff;box-shadow:0 18px 50px rgba(0,0,0,.35)}
body.dark .person i{background:rgba(255,255,255,.08);color:#fff}
body.dark .person p,body.dark .flow p,body.dark .ex p,body.dark .mstat span,body.dark .specs span,body.dark .hint,body.dark .campaign small,body.dark .perk span,body.dark .mute{color:rgba(255,255,255,.6)}
body.dark .faq{border-top-color:rgba(255,255,255,.1)}body.dark .faq-i{border-bottom-color:rgba(255,255,255,.1)}body.dark .faq-i summary{color:#fff}body.dark .faq-i p{color:rgba(255,255,255,.66)}
body.dark .field{color:rgba(255,255,255,.7)}
body.dark .field input,body.dark .field select,body.dark .field textarea,body.dark .acct input,body.dark .acct select,body.dark .acct textarea{background:#0b0b11;color:#fff;border-color:rgba(255,255,255,.18)}
body.dark .field input::placeholder,body.dark .field textarea::placeholder{color:rgba(255,255,255,.32)}
body.dark .field input:focus,body.dark .field select:focus,body.dark .field textarea:focus{border-color:#8a6bff;box-shadow:0 0 0 3px rgba(138,107,255,.3)}
body.dark .seg{background:#1a1a23}body.dark .seg button{color:rgba(255,255,255,.6)}body.dark .seg button[aria-pressed=true]{background:#2d2d3a;color:#fff;box-shadow:none}
body.dark .sent{background:#0f2a1c;border-color:#1f5a3a;color:#8be6ab}
body.dark .notice{background:#14141c;border-color:rgba(255,255,255,.12);color:#fff}body.dark .notice.bad{background:#2a1214;border-color:#5a2227;color:#ff9a90}body.dark .notice.good{background:#0f2a1c;border-color:#1f5a3a;color:#8be6ab}
body.dark .chip2{background:#14141c;color:#fff;border-color:rgba(255,255,255,.16)}body.dark .chip2:hover{background:#1f1f2a}
body.dark .est{background:#16161f;color:#fff}
body.dark .linkbtn{color:#7fb8ff}body.dark .pw{border-top-color:rgba(255,255,255,.1)}
body.dark .perk i{background:#1a1a24;border-color:rgba(255,255,255,.12)}
body.dark .tabs-top{background:#14141c}body.dark .tabs-top a{color:rgba(255,255,255,.6)}body.dark .tabs-top a[aria-current=page]{background:#2d2d3a;color:#fff;box-shadow:none}
body.dark .status{background:#23232d;color:#ccc}body.dark .status.approved{background:#12391f;color:#8be6ab}body.dark .status.pending{background:#3a2c0a;color:#ffd47a}body.dark .status.rejected{background:#3a1416;color:#ff9a90}body.dark .status.paused{background:#1e2447;color:#a9b6ff}
body.dark .timeline b{color:#fff}body.dark .empty{border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.6)}
body.dark .flower-mini b{background:#14141c;border-color:rgba(255,255,255,.14);color:#fff}
body.dark .sponsor-line{border-color:transparent;background:linear-gradient(#0a0a0a,#0a0a0a) padding-box,var(--g-brand) border-box;border:1.5px solid transparent}
body.dark .login{background:radial-gradient(45% 55% at 8% 8%,rgba(255,122,184,.3),transparent 70%),radial-gradient(45% 55% at 95% 10%,rgba(138,107,255,.36),transparent 70%),radial-gradient(45% 55% at 70% 100%,rgba(53,184,255,.24),transparent 70%)}
body.dark .login-card h1{color:#fff}body.dark .login-side h2{color:#fff}
body.dark .acct h1,body.dark .acct h2{color:#fff}body.dark .panel h2,body.dark .panel h3{color:#fff}
body.dark .ladder .rung b{color:#fff}
body.dark footer.site{background:#07070b;border-top-color:rgba(255,255,255,.09);color:#fff}body.dark .fcols a{color:rgba(255,255,255,.7)}body.dark .fcols a:hover{color:#fff}body.dark .fcols h4,body.dark .fcols p,body.dark .fbase{color:rgba(255,255,255,.5)}
body.dark .lead-in,body.dark dialog.lead{background:#14141c;color:#fff}
body.dark .fw{background:#14141c;border-color:rgba(255,255,255,.14);color:#fff}body.dark .fw .fbar{background:linear-gradient(#2a2a34,#1d1d26);border-bottom-color:rgba(255,255,255,.08)}body.dark .fw .cap{color:rgba(255,255,255,.5)}
body.dark .sc-frame{background:#12121a;border-color:rgba(255,255,255,.12)}

/* ======================= the account dashboard: colourful ======================= */
.dash-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:0 0 22px;padding:26px;border-radius:24px;background:radial-gradient(60% 120% at 0 0,rgba(255,122,184,.35),transparent 60%),radial-gradient(60% 120% at 100% 0,rgba(138,107,255,.33),transparent 60%),radial-gradient(70% 120% at 60% 130%,rgba(53,184,255,.28),transparent 60%),#fff;border:1px solid var(--line2);box-shadow:var(--shadow)}
.dash-hero h1{margin:10px 0 2px;font-size:clamp(30px,4.4vw,48px)}
.plan-badge{display:grid;gap:2px;padding:12px 18px;border-radius:16px;background:#0a0a0a;color:#fff;min-width:150px}.plan-badge small{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55)}.plan-badge b{font-size:26px;letter-spacing:-.04em;font-weight:500;color:#fff;text-transform:lowercase}.plan-badge span{font-size:12px;color:#ffe27a}
.link-box{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 18px;padding:18px 22px;border-radius:18px;background:linear-gradient(135deg,#fff7d6,#ffe6f1);border:1px solid #f1d9a8}.link-box .lb-text{display:grid;gap:2px}.link-box span{color:#6b5a2a;font-size:14px}
.link-done{display:flex;gap:16px;align-items:center;margin:0 0 18px;padding:20px 22px;border-radius:18px;background:linear-gradient(135deg,#d9f7e4,#cdeefc);border:1px solid #9fd8b6}.link-done i{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#17803d;color:#fff;font-style:normal;font-size:22px;flex:none}.link-done b{display:block;font-size:19px;letter-spacing:-.03em}.link-done span{color:#2c5a3d;font-size:14.5px}
.dash-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}@media(max-width:900px){.dash-grid{grid-template-columns:1fr}}
.dcard{padding:20px;border-radius:20px;border:1px solid var(--line);display:grid;gap:10px;align-content:start}.dcard .dc-head span{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.dcard.c-mint{background:linear-gradient(160deg,#e3f8ea,#fff 70%)}.dcard.c-lilac{background:linear-gradient(160deg,#ece4ff,#fff 70%)}.dcard.c-ink{background:linear-gradient(135deg,#1c1230,#0b0b10);color:#fff;border-color:#0b0b10}.dcard.c-ink p{color:rgba(255,255,255,.72);margin:0}.dcard.c-ink .dc-head span{color:rgba(255,255,255,.55)}
.dcard .facts{margin:0}.dcard p{margin:0}
.acct .plans .win{background:linear-gradient(180deg,#fbf9ff,#fff 60%)}

/* ======================= admin: colourful tabs and cards ======================= */
.adm .tabs{background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px;gap:4px;display:flex;flex-wrap:wrap}
.adm .tab{border-radius:999px;border:0;background:transparent;font-weight:500;color:var(--mute);padding:8px 14px}.adm .tab.on{background:#0a0a0a;color:#fff}
.adm .kpis > *{background:linear-gradient(160deg,#fbf9ff,#fff 70%);border-radius:16px;border:1px solid var(--line)}
.adm .kpis > *:nth-child(3n+1){background:linear-gradient(160deg,#e3f8ea,#fff 70%)}.adm .kpis > *:nth-child(3n+2){background:linear-gradient(160deg,#ece4ff,#fff 70%)}.adm .kpis > *:nth-child(3n){background:linear-gradient(160deg,#ffeadb,#fff 70%)}
.adm .win .bar{background:linear-gradient(90deg,#cdeed3,#cfe8f7)!important}


/* ======================= sign in / sign up: a proper split screen ======================= */
.auth{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,5vw,72px);align-items:center;min-height:calc(100vh - 66px);padding:clamp(28px,5vw,64px) max(20px,calc((100vw - 1160px)/2)) 80px;background:radial-gradient(50% 60% at 6% 8%,rgba(255,122,184,.34),transparent 70%),radial-gradient(50% 60% at 96% 8%,rgba(138,107,255,.4),transparent 70%),radial-gradient(55% 55% at 70% 100%,rgba(53,184,255,.26),transparent 70%),#07070b}
.auth-side{display:grid;gap:18px;align-content:center}
.auth-side h2{margin:0;font-size:clamp(40px,6vw,78px);line-height:.98;letter-spacing:-.06em;font-weight:500;color:#fff}
.side-sub{margin:0;max-width:44ch;color:rgba(255,255,255,.7);font-size:clamp(16px,1.7vw,19px);line-height:1.5}
.auth-media{border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 80px rgba(0,0,0,.5);line-height:0;max-width:560px}.auth-media img{width:100%;height:auto;display:block;aspect-ratio:16/10}
.chips-row{display:flex;flex-wrap:wrap;gap:8px}.chips-row span{padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:13.5px;font-weight:500}
.auth-card{background:rgba(18,18,26,.82);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.14);border-radius:28px;padding:clamp(22px,3vw,34px);display:grid;gap:16px;box-shadow:0 40px 100px rgba(0,0,0,.55);max-width:520px;width:100%;justify-self:center}
.auth-card h1{margin:0;font-size:clamp(30px,4vw,40px);line-height:1.02;color:#fff}.auth-card p{margin:0}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.roles button{display:grid;gap:3px;justify-items:start;text-align:left;padding:14px 16px;border-radius:16px;border:1.5px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:rgba(255,255,255,.7);transition:all .15s}
.roles button i{font-style:normal;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.1);margin-bottom:4px}
.roles button b{color:#fff;font-weight:600;font-size:15.5px}.roles button span{font-size:12.5px}
.roles button:hover{border-color:rgba(255,255,255,.3)}
.roles button[aria-pressed=true]{border-color:transparent;background:linear-gradient(#16161f,#16161f) padding-box,var(--g-brand) border-box;color:#fff;box-shadow:0 10px 30px rgba(138,107,255,.25)}
.roles button[aria-pressed=true] i{background:linear-gradient(135deg,#ff7ab8,#8a6bff)}
.big-field input{min-height:56px;font-size:17px;padding:14px 16px;border-radius:14px}
.btn.full{width:100%;min-height:54px}
.typo{border:0;background:none;color:#ffe27a;font-weight:600;text-align:left;padding:0;font-size:14px}.typo[hidden]{display:none}
.how{list-style:none;display:flex;gap:6px 14px;flex-wrap:wrap;margin:2px 0 0;padding:0;color:rgba(255,255,255,.55);font-size:12.5px}.how li{display:flex;align-items:center;gap:6px}.how b{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:10.5px}
.sent-card{display:grid;gap:10px;text-align:center;justify-items:center;padding:8px 0}
.sent-card .mail-ico{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;font-size:30px;background:linear-gradient(135deg,#ff7ab8,#8a6bff 55%,#35b8ff);color:#fff;animation:float-in .6s var(--spring)}
.sent-card h3{margin:0;font-size:28px;color:#fff}.sent-card p{color:rgba(255,255,255,.7);line-height:1.5}.sent-card b{color:#fff}.sent-card .mail-links{justify-content:center}
@keyframes float-in{from{transform:translateY(10px) scale(.8);opacity:0}to{transform:none;opacity:1}}
.pwrap{position:relative;display:block}.pwrap input{padding-right:64px}.pwrap .show{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:0;background:none;color:#7fb8ff;font-weight:600;font-size:13px}
.legal-line{font-size:12px;color:rgba(255,255,255,.5);line-height:1.5}.legal-line a{color:#7fb8ff}
@media(max-width:900px){.auth{grid-template-columns:1fr}.auth-side{order:2}.auth-media{display:none}.auth-card{max-width:none}}
@media(max-width:520px){.roles{grid-template-columns:1fr}}


/* ======================= v3: calmer, closer to the front page and heyclicky. Lighter headings, fewer effects ======================= */
h1,h2,h3{font-weight:460}
.auth,.dash-hero{all:unset}
/* dashboard: window cards like the front page */
.d-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:0 0 22px}
.d-head h1{margin:0;font-size:clamp(30px,4vw,42px);letter-spacing:-.05em}.d-head .mute{margin:4px 0 0;font-size:14px}
.d-actions{display:flex;align-items:center;gap:10px}
.plan-pill{display:inline-flex;align-items:baseline;gap:8px;padding:7px 14px;border-radius:999px;background:#0a0a0a;color:#fff}.plan-pill b{font-weight:500;font-size:14px;text-transform:lowercase;color:#fff}.plan-pill small{font-size:12px;color:#ffe27a}
.d-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:6px}@media(max-width:900px){.d-grid{grid-template-columns:1fr}}
.wcard{background:#fff;border:1px solid var(--line2);border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 14px 36px rgba(0,0,0,.07);overflow:hidden}
.wbar{display:flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-bottom:1px solid var(--line)}
.wbar i{width:9px;height:9px;border-radius:50%;background:#ff5f57}.wbar i:nth-child(2){background:#febc2e}.wbar i:nth-child(3){background:#28c840}.wbar span{margin-left:8px;font-family:var(--mono);font-size:10.5px;color:var(--mute)}
.wbar.w1{background:linear-gradient(90deg,#cdeed3,#c4e8e6)}.wbar.w2{background:linear-gradient(90deg,#e0d2fa,#f5cce0)}.wbar.w3{background:linear-gradient(90deg,#ffdecb,#f9ecb8)}
.wbody{padding:18px;display:grid;gap:10px;align-content:start}.wbody p{margin:0}
.wcard.dark{background:#0d0d10;border-color:#0d0d10;color:#fff}.wcard.dark .wbody p{color:rgba(255,255,255,.75);font-size:14.5px;line-height:1.5}.wcard.dark .wbar{border-color:rgba(255,255,255,.1)}.wcard.dark .wbar span{color:rgba(255,255,255,.5)}
.link-box{background:#fff7e0;border-color:#f0dfa8}.link-done{background:#e6f7ec;border-color:#a8dcbb}

.hero2 h1.long{font-size:clamp(36px,5.8vw,78px);line-height:1;letter-spacing:-.05em;max-width:17ch}

/* fun loops everywhere */
.gif-card{border-radius:16px;overflow:hidden;border:1px solid var(--line2);box-shadow:0 20px 50px rgba(60,30,120,.14);line-height:0;background:#fff}.gif-card img{width:100%;height:auto;display:block;aspect-ratio:16/10}
.tap-gif{margin-top:14px;border-radius:10px;box-shadow:none}
.wide-gif{max-width:520px;margin:26px auto 0}


/* ================= v4: light, plain brand pages, split sign-in, live numbers ================= */
[hidden]{display:none!important}
.money-gif{max-width:520px;margin:0}
.stat-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:18px auto 0}
.st-chip{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 8px;border-radius:999px;background:#fff;border:1px solid var(--line2);box-shadow:0 1px 2px rgba(0,0,0,.05),0 8px 22px rgba(80,50,150,.09);font-size:13.5px;color:var(--mute)}
.st-chip i{font-style:normal;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--p-lilac);font-size:15px}
.st-chip:nth-child(2) i{background:var(--p-mint)}.st-chip:nth-child(3) i{background:var(--p-peach)}.st-chip:nth-child(4) i{background:var(--p-sky)}.st-chip:nth-child(5) i{background:var(--p-rose)}
.st-chip b{color:var(--ink);font-weight:600;font-size:16px;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.stat-strip.on-art,.stat-strip.left{justify-content:flex-start}

/* sign in: art on the left, the form on the right */
body.split-page .nav{position:relative}
.split{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);min-height:calc(100vh - 66px);background:#fff}
.sp-art{position:relative;overflow:hidden;display:grid;align-content:center;justify-items:start;gap:16px;padding:52px clamp(28px,5vw,72px);background:radial-gradient(60% 50% at 10% 5%,#ffd9ec,transparent 70%),radial-gradient(55% 55% at 95% 10%,#dccdfb,transparent 70%),radial-gradient(60% 60% at 70% 100%,#c9ecff,transparent 70%),radial-gradient(50% 50% at 0% 100%,#ffe8c9,transparent 70%),#f6f2fb}
.sp-art::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(60,30,120,.14) 1px,transparent 1px);background-size:22px 22px;pointer-events:none}
.sp-art>*{position:relative}
.sp-art h2{margin:6px 0 0;font-size:clamp(34px,4.4vw,60px);line-height:1;letter-spacing:-.055em;font-weight:560;max-width:15ch}
.sp-sub{margin:0;max-width:44ch;color:#4d4a55;font-size:16.5px;line-height:1.5}
.sp-hello{display:inline-grid;width:118px;background:#fff;border-radius:6px;box-shadow:0 8px 24px rgba(40,20,90,.18);transform:rotate(-4deg);overflow:hidden;text-align:center}
.sp-hello small{background:#1448dc;color:#fff;font-weight:800;letter-spacing:.14em;font-size:12px;padding:5px 0}.sp-hello em{font-style:normal;font-weight:700;color:#1448dc;font-size:9.5px;padding-top:6px}.sp-hello strong{font-family:"Caveat","Segoe Script",cursive;font-size:30px;font-weight:600;padding:0 0 8px;letter-spacing:-.02em}
.sp-gif{width:min(560px,100%);box-shadow:0 30px 70px rgba(60,30,140,.22);margin:6px 0}
.sp-perks{width:100%;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sp-perks li{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;border-radius:999px;background:rgba(255,255,255,.85);border:1px solid rgba(0,0,0,.06);font-size:14px;font-weight:500;color:#2b2833;text-transform:lowercase}
.sp-perks i{font-style:normal;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--p-lemon)}
.fl{position:absolute!important;font-size:30px;opacity:.9;animation:bob 6s ease-in-out infinite;pointer-events:none;user-select:none}
.fl.f1{top:9%;right:12%}.fl.f2{top:22%;right:6%;font-size:24px;color:#8a6bff;animation-delay:-2s}.fl.f3{bottom:12%;right:10%;animation-delay:-3s}.fl.f4{top:6%;left:46%;color:#35b8ff;animation-delay:-1s}.fl.f5{bottom:30%;right:4%;animation-delay:-4s}.fl.f6{bottom:6%;left:44%;font-size:20px;font-family:var(--mono);animation-delay:-5s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-14px) rotate(7deg)}}
@media(prefers-reduced-motion:reduce){.fl{animation:none}}
.sp-form{display:grid;align-content:center;justify-items:center;gap:16px;padding:48px 28px;background:#fff}
.sp-card{width:min(420px,100%);display:grid;gap:14px}
.sp-card h1{margin:4px 0 0;font-size:34px;letter-spacing:-.05em;font-weight:560}.sp-card p{margin:0}
.sp-card .field input{min-height:50px;font-size:16px;border-radius:12px}
.a2-tabs{display:flex;gap:4px;padding:4px;border-radius:999px;background:#f0eef4;width:max-content}
.a2-tabs button{border:0;background:transparent;color:var(--mute);padding:8px 16px;border-radius:999px;font-size:13.5px;font-weight:500;cursor:pointer;text-transform:lowercase}
.a2-tabs button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.a2-how{font-size:12.5px;color:var(--mute);text-align:center}
.sp-card .btn.full{min-height:50px;width:100%}
.sp-card .legal-line{font-size:12px;color:var(--mute);text-align:center}
.sp-back{margin:0;font-size:13.5px;color:var(--mute);text-align:center}.sp-back a{color:var(--blue);font-weight:600}
@media(max-width:900px){.split{grid-template-columns:1fr}.sp-art{padding:32px 22px;order:2}.sp-form{order:1;padding:32px 20px}.fl{display:none}.sp-gif{display:none}}

/* brands: three big steps, calculator, live market */
.steps-big{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:1040px;margin:26px auto 8px;text-align:left}@media(max-width:860px){.steps-big{grid-template-columns:1fr}}
.sb{position:relative;padding:24px 22px 22px;border-radius:20px;border:1px solid var(--line2);background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04),0 16px 40px rgba(80,50,150,.08)}
.sb.s1{background:linear-gradient(160deg,#fff,#f3ecff)}.sb.s2{background:linear-gradient(160deg,#fff,#e9f8ee)}.sb.s3{background:linear-gradient(160deg,#fff,#fff1e4)}
.sb-ico{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:#fff;box-shadow:0 6px 16px rgba(60,30,120,.14);font-size:28px;transform:rotate(-5deg)}
.sb em{display:block;margin:14px 0 2px;font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.sb h3{margin:0 0 6px;font-size:24px;letter-spacing:-.04em;font-weight:560}.sb p{margin:0;color:#55525c;line-height:1.55;font-size:15px}
.calc-brand{max-width:980px;margin:26px auto 6px;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;text-align:left}@media(max-width:820px){.calc-brand{grid-template-columns:1fr}}
.cb-left{padding:26px;border-radius:22px;background:#fff;border:1px solid var(--line2);box-shadow:0 16px 44px rgba(80,50,150,.1)}
.cb-q{margin:0 0 12px;font-weight:600;font-size:17px;letter-spacing:-.03em}
.budget{display:flex;gap:8px;flex-wrap:wrap}.budget button{flex:1;min-width:76px;padding:13px 10px;border-radius:14px;border:1.5px solid var(--line2);background:#fff;color:var(--ink);font-weight:600;font-size:17px;display:grid;gap:2px;cursor:pointer;transition:transform .2s,border-color .2s}
.budget button:hover{transform:translateY(-2px)}
.budget button small{font-size:11.5px;font-weight:400;color:var(--mute)}
.budget button[aria-pressed=true]{border-color:transparent;background:linear-gradient(#fff,#fff) padding-box,var(--g-brand) border-box;box-shadow:0 8px 20px rgba(138,107,255,.25)}
.cb-views{margin:18px 0 0;display:flex;align-items:baseline;gap:10px}.cb-views b{font-size:clamp(38px,5vw,56px);letter-spacing:-.06em;font-weight:560;font-variant-numeric:tabular-nums}.cb-views span{color:var(--mute);font-size:15px}
.cb-note{margin:4px 0 0;color:var(--mute);font-size:13.5px;line-height:1.5}
.mstat i{font-style:normal;font-size:22px;display:block;margin-bottom:4px}
.hero-brands .stat-strip{margin-top:4px}

/* the sponsor studio, light */
.steps3{display:flex;gap:8px 16px;flex-wrap:wrap;margin:0 0 8px;padding:12px 16px;border-radius:14px;background:#fff;border:1px solid var(--line2);font-size:13.5px;color:var(--mute);box-shadow:0 8px 22px rgba(80,50,150,.06)}
.steps3 b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--p-lilac);color:var(--ink);margin-right:7px;font-size:12px}
.steps3 a{margin-left:auto;color:var(--blue);font-weight:600}
.adv{border-top:1px solid var(--line);padding-top:12px}.adv summary{cursor:pointer;list-style:none;color:var(--blue);font-weight:500}.adv summary::-webkit-details-marker{display:none}.adv[open] summary{margin-bottom:12px}

/* dashboard fun */
.d-hello{display:flex;align-items:center;gap:12px}.d-emoji{font-size:34px;display:inline-block;animation:wave 2.6s ease-in-out infinite;transform-origin:70% 70%}
@keyframes wave{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(16deg)}20%,40%{transform:rotate(-8deg)}50%{transform:rotate(10deg)}}
@media(prefers-reduced-motion:reduce){.d-emoji{animation:none}}
.d-fun{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin:14px 0 18px;align-items:center}@media(max-width:820px){.d-fun{grid-template-columns:1fr}}.d-fun .d-gif{max-width:480px;justify-self:end;width:100%}.cheer{margin:12px 0 0}
.d-fun .gif-card{box-shadow:0 14px 40px rgba(60,30,120,.12)}
.get-app{display:grid;gap:10px;padding:20px;border-radius:18px;background:linear-gradient(135deg,#e7f0ff,#f1e9ff 55%,#ffeadc);border:1px solid var(--line2);align-content:center}
.get-app h3{margin:0;font-size:24px;letter-spacing:-.04em;font-weight:560}.get-app p{margin:0;color:#55525c;line-height:1.5;font-size:15px}
.get-app ol{margin:2px 0 4px;padding:0;list-style:none;display:grid;gap:8px}.get-app li{display:flex;align-items:center;gap:10px;font-size:14.5px}.get-app li i{font-style:normal;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(60,30,120,.14);font-size:14px}
.cheer{padding:12px 16px;border-radius:14px;background:#fff8e1;border:1px solid #f1e0a0;font-size:14.5px}

.hero2 .cta+.stat-strip{margin-top:22px}.hero2 .stat-strip+.proof{margin-top:16px}
.split>*,.sp-card,.sp-art>*{min-width:0}.sp-art ul,.sp-card .field input{max-width:100%}
@media(max-width:900px){.split{grid-template-columns:minmax(0,1fr)}.sp-art{justify-items:stretch}.sp-art h2{max-width:none}.stat-strip.on-art{justify-content:center}}

/* v5: the wordmark in Instrument Serif italic (SIL Open Font License), everything else stays Inter */
@font-face{font-family:"Instrument Serif";src:url(/fonts/InstrumentSerif-Italic.ttf) format("truetype");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/fonts/InstrumentSerif-Regular.ttf) format("truetype");font-style:normal;font-weight:400;font-display:swap}
#top h1{font-family:"Instrument Serif",Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;font-size:clamp(110px,21vw,260px);line-height:.8;letter-spacing:-.045em;color:#14111a;margin-top:6px;padding-right:.06em}
.nav-l .wordmark,.fcols .wordmark{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;font-size:27px;letter-spacing:-.02em}
.nav-l .wordmark img{width:30px;height:30px}
#top .tagline{margin-top:16px}
.gbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;width:100%;font-size:15.5px;background:#fff;border:1px solid var(--line2)}.gbtn:hover{background:#fafafa}
.or-line{margin:0;display:flex;align-items:center;gap:12px;color:var(--mute);font-size:12.5px}.or-line::before,.or-line::after{content:"";flex:1;height:1px;background:var(--line)}

/* dashboard: three colourful numbers first */
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 14px}@media(max-width:760px){.kpis{grid-template-columns:1fr}}
.kpi{display:grid;gap:2px;padding:16px 18px;border-radius:18px;border:1px solid rgba(255,255,255,.8);box-shadow:0 1px 2px rgba(0,0,0,.04),0 14px 34px rgba(80,50,150,.08)}
.kpi.k1{background:linear-gradient(150deg,#efe6ff,#fde5f1)}.kpi.k2{background:linear-gradient(150deg,#dff5e8,#d9eefb)}.kpi.k3{background:linear-gradient(150deg,#fff1d6,#ffe3ee)}
.kpi span{font-size:13px;color:#4d4a55;font-weight:500;text-transform:lowercase}.kpi b{font-size:clamp(30px,4vw,44px);letter-spacing:-.05em;font-weight:560;line-height:1.05;font-variant-numeric:tabular-nums}.kpi small{color:#5d5a65;font-size:12.5px}
.kpi span{display:flex;align-items:center;gap:7px}

.confirm-wrap{min-height:calc(100vh - 160px);display:grid;place-items:center;padding:40px 20px}
.confirm-card{width:min(440px,100%);text-align:center;padding:40px 28px;border-radius:24px;background:linear-gradient(150deg,#f3ecff,#e6f4ff 55%,#ffeedd);border:1.5px solid #fff;box-shadow:0 20px 60px rgba(80,50,150,.14);display:grid;gap:12px;justify-items:center}
.confirm-card h1{margin:0;font-size:30px;letter-spacing:-.05em;font-weight:560}.confirm-card p{margin:0}
.confirm-ico{width:64px;height:64px;border-radius:20px;background:#fff;display:grid;place-items:center;font-size:30px;box-shadow:0 8px 22px rgba(80,50,150,.16);animation:bob 3s ease-in-out infinite}