/* Hosts for Hire — two doors. Hosts = magenta, Brands = teal. Dark-first. */
:root{
  --bg:#120f1a; --panel:#1a1626; --line:#2b2538; --fg:#f4f0f7; --mute:#a79fb3;
  --host:#ff4fa3; --host-ink:#1a0712; --brand:#38e0c4; --brand-ink:#04211c;
  --display:'Bricolage Grotesque',system-ui,sans-serif; --body:'Instrument Sans',system-ui,sans-serif;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --bg:#faf7fc; --panel:#ffffff; --line:#e8e0ef; --fg:#17121f; --mute:#6c6378; --host:#e0157e; --host-ink:#ffffff; --brand:#0f9c85; --brand-ink:#ffffff; color-scheme:light } }
:root[data-theme="light"]{ --bg:#faf7fc; --panel:#ffffff; --line:#e8e0ef; --fg:#17121f; --mute:#6c6378; --host:#e0157e; --host-ink:#ffffff; --brand:#0f9c85; --brand-ink:#ffffff; color-scheme:light }

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.55}
a{color:inherit}
h1,h2,h3{font-family:var(--display);line-height:1.05;margin:0;text-wrap:balance;letter-spacing:-.01em}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding-inline:20px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.eyebrow.h{color:var(--host)} .eyebrow.b{color:var(--brand)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;font-weight:600;text-decoration:none;font-size:15px;border:1px solid var(--line);background:transparent;color:var(--fg);cursor:pointer;font-family:inherit;transition:transform .15s}
.btn:hover{transform:translateY(-1px)} .btn:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.btn.host{background:var(--host);color:var(--host-ink);border-color:var(--host)}
.btn.brand{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.btn.sm{padding:9px 14px;font-size:14px}

/* nav */
nav.top{position:sticky;top:0;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);z-index:5}
nav.top .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;gap:16px}
.logo{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:.01em;text-decoration:none;white-space:nowrap}
.logo i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--host);margin-left:6px;animation:pulse 1.6s infinite;vertical-align:middle}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
nav.top ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;font-size:14px;color:var(--mute)}
nav.top ul a{text-decoration:none} nav.top ul a[aria-current]{color:var(--fg);font-weight:600}
nav.top .navcta{display:flex;gap:8px}
@media(max-width:760px){nav.top ul{display:none} nav.top .navcta .btn.ghost{display:none}}

/* hero doors (home) */
.doors{display:grid;grid-template-columns:1fr 1fr;min-height:540px}
.door{padding:56px 28px 44px;display:flex;flex-direction:column;justify-content:space-between;gap:36px;position:relative;overflow:hidden}
.door.hosts{background:linear-gradient(160deg,color-mix(in srgb,var(--host) 18%,var(--bg)),var(--bg) 70%)}
.door.brands{background:linear-gradient(200deg,color-mix(in srgb,var(--brand) 16%,var(--bg)),var(--bg) 70%);border-left:1px solid var(--line)}
.door h1{font-size:clamp(34px,4.6vw,60px);font-weight:800}
.door.hosts h1 em{color:var(--host);font-style:normal}
.door.brands h1 em{color:var(--brand);font-style:normal}
.door p{color:var(--mute);max-width:40ch;margin:14px 0 22px;font-size:17px}
.facts{display:flex;gap:22px;flex-wrap:wrap;font-size:14px;color:var(--mute)}
.facts b{display:block;font-family:var(--display);font-size:24px;color:var(--fg);font-variant-numeric:tabular-nums}
.live{position:absolute;top:18px;right:20px;font-size:11px;font-weight:700;letter-spacing:.1em;padding:4px 9px;border-radius:4px;background:var(--host);color:var(--host-ink)}
.door.brands .live{background:var(--brand);color:var(--brand-ink)}
@media(max-width:820px){.doors{grid-template-columns:1fr}.door.brands{border-left:0;border-top:1px solid var(--line)}}

/* page hero (inner pages) */
.hero{padding:64px 0 48px}
.hero.h{background:linear-gradient(160deg,color-mix(in srgb,var(--host) 18%,var(--bg)),var(--bg) 70%)}
.hero.b{background:linear-gradient(200deg,color-mix(in srgb,var(--brand) 16%,var(--bg)),var(--bg) 70%)}
.hero h1{font-size:clamp(34px,4.6vw,58px);font-weight:800;margin:10px 0 16px}
.hero.h h1 em{color:var(--host);font-style:normal} .hero.b h1 em{color:var(--brand);font-style:normal}
.hero p.lede{font-size:18px;max-width:52ch}
.hero .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}

.strip{border-block:1px solid var(--line);background:var(--panel)}
.strip .wrap{display:flex;gap:28px;overflow-x:auto;padding-block:14px;font-size:14px;color:var(--mute);white-space:nowrap}
.strip span b{color:var(--fg)}

section{padding-block:68px}
section.alt{background:var(--panel);border-block:1px solid var(--line)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media(max-width:820px){.two{grid-template-columns:1fr;gap:40px}}
h2{font-size:clamp(28px,3.4vw,42px);font-weight:700;margin-bottom:12px}
h3{font-size:22px;font-weight:700}
.lede{color:var(--mute);max-width:54ch;margin:0 0 28px}
p{margin:0 0 14px}
.prose p{color:var(--mute);max-width:62ch}
.prose p strong{color:var(--fg)}

.steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:s}
.steps li{display:grid;grid-template-columns:40px 1fr;gap:14px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel);counter-increment:s}
.steps li::before{content:counter(s);font-family:var(--display);font-weight:800;font-size:22px;width:40px;height:40px;border-radius:10px;display:grid;place-items:center}
.steps.h li::before{background:color-mix(in srgb,var(--host) 20%,transparent);color:var(--host)}
.steps.b li::before{background:color-mix(in srgb,var(--brand) 20%,transparent);color:var(--brand)}
.steps b{display:block;font-weight:600;margin-bottom:2px} .steps span{grid-column:2;color:var(--mute);font-size:14.5px}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
@media(max-width:820px){.grid3,.grid2{grid-template-columns:1fr}}
.card{border:1px solid var(--line);border-radius:14px;padding:22px;background:var(--bg)}
section.alt .card{background:var(--panel)}
.card .eyebrow{margin-bottom:8px} .card h3{margin-bottom:6px}
.card p{color:var(--mute);font-size:14.5px;margin:0 0 12px} .card p:last-child{margin-bottom:0}
.card.h{border-color:color-mix(in srgb,var(--host) 45%,var(--line))} .card.b{border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
.tag{display:inline-block;font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--mute)}
.check{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:9px;color:var(--mute);font-size:15px}
.check li{padding-left:26px;position:relative} .check li::before{content:"✓";position:absolute;left:0;font-weight:800}
.check.h li::before{color:var(--host)} .check.b li::before{color:var(--brand)}

.quote{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:820px){.quote{grid-template-columns:1fr}}
.q{border-radius:16px;padding:26px;border:1px solid var(--line);background:var(--panel)}
.q p{font-family:var(--display);font-size:20px;font-weight:500;margin:0 0 14px;line-height:1.3}
.q small{color:var(--mute)}

.ctas{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:820px){.ctas{grid-template-columns:1fr}}
.cta{border-radius:18px;padding:34px;color:var(--host-ink);background:var(--host)}
.cta.b{background:var(--brand);color:var(--brand-ink)}
.cta h3{font-size:30px;font-weight:800;margin-bottom:8px} .cta p{margin:0 0 18px;opacity:.85}
.cta a{display:inline-block;padding:12px 20px;border-radius:999px;background:var(--bg);color:var(--fg);text-decoration:none;font-weight:600}

/* faq */
details{border-top:1px solid var(--line);padding:14px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--mute);font-family:var(--display);font-size:22px;line-height:1}
details[open] summary::after{content:"–"}
details p{color:var(--mute);margin:10px 0 0;max-width:62ch}

/* forms */
form.app{border:1px solid var(--line);border-radius:18px;padding:26px;background:var(--panel);display:grid;gap:14px}
form.app .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:620px){form.app .row{grid-template-columns:1fr}}
label{display:grid;gap:5px;font-size:13.5px;font-weight:600}
label small{font-weight:400;color:var(--mute)}
input,select,textarea{width:100%;padding:11px 12px;border-radius:9px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:inherit;font-size:15px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--host);outline-offset:1px}
form.b input:focus,form.b select:focus,form.b textarea:focus{outline-color:var(--brand)}
textarea{min-height:110px;resize:vertical}
.send{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.send .or{color:var(--mute);font-size:14px}
.sent{display:none;padding:14px;border-radius:10px;background:var(--bg);border:1px solid var(--line);font-size:14.5px}
.sent.show{display:block}
.sent code{user-select:all;font-size:14px}
.contact-line{color:var(--mute);font-size:14px}
.contact-line b{color:var(--fg);user-select:all}

footer{padding:40px 0;color:var(--mute);font-size:13.5px;border-top:1px solid var(--line)}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
@media(max-width:720px){footer .wrap{grid-template-columns:1fr}}
footer .logo{font-size:17px;display:inline-block;margin-bottom:8px}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:6px} footer a{text-decoration:none} footer a:hover{color:var(--fg)}
footer .fine{grid-column:1/-1;border-top:1px solid var(--line);padding-top:16px;font-size:12.5px}
@media (prefers-reduced-motion: reduce){.logo i{animation:none}.btn:hover{transform:none}html{scroll-behavior:auto}}

/* form extras */
.sent.ok{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,var(--bg))}
.checks{display:flex;flex-wrap:wrap;gap:8px 14px;font-weight:400;font-size:14.5px}
.checks label{display:inline-flex;align-items:center;gap:6px;font-weight:400}
.checks input{width:auto}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* earnings calculator */
.calc{border:1px solid var(--line);border-radius:18px;padding:26px;background:var(--panel);display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center}
@media(max-width:820px){.calc{grid-template-columns:1fr}}
.calc label{font-weight:500;font-size:14px}
.calc label span{float:right;font-weight:600;font-variant-numeric:tabular-nums}
.calc input[type=range]{width:100%;accent-color:var(--host);padding:0;background:none;border:0}
.calc .out{border-radius:14px;padding:22px;background:var(--bg);border:1px solid var(--line)}
.calc .out .big{font-family:var(--display);font-size:44px;font-weight:800;line-height:1;color:var(--host);font-variant-numeric:tabular-nums}
.calc .out .row2{display:flex;gap:22px;margin-top:14px;flex-wrap:wrap}
.calc .out .row2 b{display:block;font-family:var(--display);font-size:22px;font-variant-numeric:tabular-nums}
.calc .out small{color:var(--mute);font-size:13px}
.calc .fine{grid-column:1/-1;color:var(--mute);font-size:13px;margin:0}

/* guides */
.gcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.gcards{grid-template-columns:1fr 1fr}} @media(max-width:620px){.gcards{grid-template-columns:1fr}}
.gcard{display:block;text-decoration:none;border:1px solid var(--line);border-radius:14px;padding:22px;background:var(--panel);transition:border-color .15s}
.gcard:hover{border-color:var(--fg)} .gcard.h:hover{border-color:var(--host)} .gcard.b:hover{border-color:var(--brand)}
.gcard .eyebrow{margin-bottom:8px} .gcard h3{font-size:20px;margin-bottom:8px} .gcard p{color:var(--mute);font-size:14.5px;margin:0}
.guide{min-width:0} .guide h2{font-size:24px;margin:30px 0 10px} .guide p{font-size:17px;line-height:1.65;max-width:62ch} .guide ul.check{margin:0 0 18px} .guide ul.check li{font-size:16px;line-height:1.6;color:var(--fg)} .guide ul.check li strong{color:var(--fg)}
.guide a{color:inherit;text-decoration-color:var(--host)}
.related{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:10px;font-size:15px} .related a{text-decoration:none;color:var(--fg)} .related a:hover{text-decoration:underline}
aside .cta h3{font-size:24px} aside .cta{padding:26px}

/* brands: how it actually runs */
.runs{display:grid;gap:12px;margin-top:28px}
.run{border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:var(--panel)}
.run-h{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.run h3{font-size:19px} .run p{color:var(--mute);font-size:15px;margin:0;max-width:72ch}
.tag.who{font-weight:600;white-space:nowrap} .tag.who.people{border-color:var(--host);color:var(--host)} .tag.who.software{border-color:var(--brand);color:var(--brand)} .tag.who.both{border-color:var(--fg);color:var(--fg)}
.measure{margin-top:22px;border:1px solid color-mix(in srgb,var(--brand) 45%,var(--line));border-radius:14px;padding:22px;background:var(--bg)}
.measure h3{font-size:20px;margin-bottom:8px} .measure p{color:var(--mute);margin:0;max-width:72ch}

/* kit page */
.bundles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
@media(max-width:900px){.bundles{grid-template-columns:1fr}}
.bundle{border:1px solid var(--line);border-radius:14px;padding:22px;background:var(--bg);display:flex;flex-direction:column;gap:10px}
.bundle ul{margin:0;padding-left:18px;color:var(--mute);font-size:14px;line-height:1.6}
.bundle p{color:var(--mute);font-size:14.5px;margin:0}
.ksec{padding-block:48px;border-top:1px solid var(--line)} .ksec h2{font-size:30px}
.kits{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
@media(max-width:900px){.kits{grid-template-columns:1fr 1fr}} @media(max-width:620px){.kits{grid-template-columns:1fr}}
.kit{border:1px solid var(--line);border-radius:14px;padding:20px;background:var(--panel);display:flex;flex-direction:column;gap:10px}
.kit h3,.bundle h3{font-size:18px} .kit p{color:var(--mute);font-size:14.5px;margin:0;flex:1}
.kit-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px} .kit-h .tag{flex-shrink:0}
.kit-f{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:6px}
.price{font-family:var(--display);font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}

/* basket */
.basket-btn{position:fixed;right:18px;bottom:18px;z-index:8;padding:12px 18px;border-radius:999px;border:0;background:var(--host);color:var(--host-ink);font:inherit;font-weight:600;font-size:15px;cursor:pointer;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.basket{position:fixed;top:0;right:0;bottom:0;width:min(480px,100%);background:var(--panel);border-left:1px solid var(--line);padding:24px;overflow-y:auto;transform:translateX(100%);transition:transform .2s;z-index:10}
.basket.open{transform:none} .basket h3{font-size:22px;margin-bottom:12px} .basket .close{position:absolute;top:14px;right:14px}
.bline{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.bline .qty{display:inline-flex;align-items:center;gap:6px} .bline .qty button{width:26px;height:26px;border-radius:6px;border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer;font:inherit}
.bline .amt{font-variant-numeric:tabular-nums;font-weight:600;min-width:60px;text-align:right}
.basket-sum{padding:12px 0 18px;font-size:14.5px;color:var(--mute)} .basket-sum b{color:var(--fg);font-size:18px;font-family:var(--display)}
.basket form.app{padding:18px;background:var(--bg)}
.kit .add{white-space:nowrap} .mute{color:var(--mute)}
@media (prefers-reduced-motion: reduce){.basket{transition:none}}

.kit .custom{display:grid;gap:8px;margin:4px 0 2px} .kit .custom label{font-size:13px;font-weight:600;display:grid;gap:4px} .kit .custom input,.kit .custom select{padding:8px 10px;font-size:14px}
.kit.made{border-color:color-mix(in srgb,var(--host) 45%,var(--line))}