/* ==========================================================================
   NiblGo, niblgo.com
   One stylesheet. Amber / cream / cocoa, light + dark.
   ========================================================================== */

:root{
  --brand:#E8862E; --brand-2:#F5A623; --brand-dark:#C96D1B; --brand-ink:#fff;
  --bg:#FFF8EC; --bg-2:#FFF1DC; --surface:#FFFFFF; --surface-2:#FFFBF3;
  --text:#3D2409; --text-2:#7A5A38; --text-3:#A98F73;
  --line:rgba(74,46,18,.12); --line-2:rgba(74,46,18,.06);
  --shadow:0 18px 46px -18px rgba(74,46,18,.34);
  --shadow-sm:0 6px 18px -8px rgba(74,46,18,.28);
  --glow:radial-gradient(60% 60% at 50% 0%,rgba(232,134,46,.22),transparent 70%);
  --grain-op:.035;
  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:34px; --pill:999px;
  --maxw:1120px;
  --nav-h:70px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --brand:#F59A3E; --brand-2:#FFB65C; --brand-dark:#E8862E; --brand-ink:#20140A;
  --bg:#140E08; --bg-2:#1E150C; --surface:#2C1E11; --surface-2:#372716;
  --text:#FFF6E9; --text-2:#E8D7BE; --text-3:#C6B092;
  --line:rgba(252,239,219,.17); --line-2:rgba(252,239,219,.09);
  --shadow:0 22px 54px -20px rgba(0,0,0,.75);
  --shadow-sm:0 8px 22px -12px rgba(0,0,0,.7);
  --glow:radial-gradient(60% 60% at 50% 0%,rgba(245,154,62,.18),transparent 70%);
  --grain-op:.06;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Nunito,ui-rounded,"Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.62;font-weight:500;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--grain-op);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.1;letter-spacing:-.02em;font-weight:800}
p{margin:0}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:22px;position:relative;z-index:1}
.narrow{max-width:760px}
.eyebrow{
  font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand-dark);
}
:root[data-theme="dark"] .eyebrow{color:var(--brand-2)}

/* The wordmark's fork icon is embedded as a CSS custom property (--mark) in
   each page's head, so it renders even if /assets never resolves. */
.mark{display:block;flex:0 0 auto;background-image:var(--mark);
  background-size:contain;background-position:50%;background-repeat:no-repeat}

/* ---------- loading screen ---------- */
#loader{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:linear-gradient(160deg,#F5A623 0%,#E8862E 45%,#D9701C 100%);
  transition:opacity .5s ease,visibility .5s ease;
}
:root[data-theme="dark"] #loader{background:linear-gradient(160deg,#2A1B0C 0%,#1A1108 60%,#120C06 100%)}
#loader.done{opacity:0;visibility:hidden}
.loader-in{display:grid;justify-items:center;gap:20px;transform:translateY(-6px)}
.loader-mark{width:104px;height:104px;animation:pop .7s cubic-bezier(.2,1.5,.4,1) both}
.loader-word{
  font-family:"Baloo 2",Nunito,system-ui,sans-serif;font-weight:800;font-size:34px;
  letter-spacing:-.03em;color:#fff;opacity:0;animation:rise .5s ease .18s forwards;
}
:root[data-theme="dark"] .loader-word{color:var(--brand-2)}
.loader-bar{
  width:132px;height:5px;border-radius:99px;overflow:hidden;
  background:rgba(255,255,255,.28);opacity:0;animation:rise .5s ease .3s forwards;
}
:root[data-theme="dark"] .loader-bar{background:rgba(245,154,62,.2)}
.loader-bar i{display:block;height:100%;width:40%;border-radius:99px;background:#fff;animation:slide 1.05s ease-in-out infinite}
:root[data-theme="dark"] .loader-bar i{background:var(--brand-2)}
@keyframes pop{from{transform:scale(.55) rotate(-9deg);opacity:0}to{transform:none;opacity:1}}
@keyframes rise{to{opacity:1}}
@keyframes slide{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}
@media (prefers-reduced-motion:reduce){
  .loader-mark,.loader-word,.loader-bar{animation:none;opacity:1}
  .loader-bar i{animation:none;width:100%}
}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:80;
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  border-bottom:1px solid transparent;transition:border-color .25s,background .25s;
}
.nav.stuck{border-bottom-color:var(--line)}
.nav>.wrap{
  height:var(--nav-h);display:grid;grid-template-columns:44px 1fr 44px;
  align-items:center;gap:12px;
}
.brand{
  grid-column:2;justify-self:center;
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  border-radius:var(--pill);padding:6px 14px 6px 8px;transition:background .2s,transform .2s;
}
.brand:hover{background:color-mix(in srgb,var(--brand) 12%,transparent);transform:translateY(-1px)}
.brand:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.brand b{font-family:"Baloo 2",Nunito,sans-serif;font-weight:800;font-size:23px;letter-spacing:-.03em}
.nav-toggle{grid-column:1;justify-self:start}
.nav>.wrap>#themeToggle{grid-column:3;justify-self:end}

.nav-links{
  position:absolute;left:0;right:0;top:100%;
  background:var(--bg);box-shadow:var(--shadow);
  max-height:0;overflow:hidden;opacity:0;visibility:hidden;border-bottom:0 solid var(--line);
  transition:max-height .32s cubic-bezier(.2,.8,.3,1),opacity .2s ease,visibility .32s,border-width 0s .32s;
}
.nav-links.open{
  max-height:min(74vh,560px);overflow:auto;opacity:1;visibility:visible;
  border-bottom-width:1px;transition:max-height .32s cubic-bezier(.2,.8,.3,1),opacity .2s ease,visibility 0s,border-width 0s;
}
.nav-links .wrap{display:grid;gap:2px;padding-top:12px;padding-bottom:18px}
.nav-links a{
  text-decoration:none;font-weight:700;font-size:16.5px;color:var(--text-2);
  padding:12px 14px;border-radius:12px;transition:.18s;
}
.nav-links a:hover{color:var(--text);background:var(--line-2)}
.nav-links a[aria-current="page"]{color:var(--text);background:var(--line-2)}
.icon-btn{
  width:42px;height:42px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--pill);background:var(--surface);color:var(--text);
  transition:.18s;
}
.icon-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);border-color:var(--brand)}
.icon-btn svg{width:19px;height:19px}
.icon-btn .moon{display:none}
:root[data-theme="dark"] .icon-btn .moon{display:block}
:root[data-theme="dark"] .icon-btn .sun{display:none}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:inherit;font-weight:800;font-size:16px;text-decoration:none;cursor:pointer;
  padding:14px 24px;border-radius:var(--pill);border:1.5px solid transparent;transition:.2s;
}
.btn-primary{background:linear-gradient(140deg,var(--brand-2),var(--brand));color:var(--brand-ink);box-shadow:var(--shadow-sm)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-ghost{border-color:var(--line);color:var(--text);background:var(--surface)}
.btn-ghost:hover{border-color:var(--brand);transform:translateY(-2px)}
.btn-sm{padding:10px 18px;font-size:14.5px}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(40px,7vw,84px) 0 clamp(56px,8vw,100px);overflow:hidden}
.hero::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:120%;background:var(--glow);pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none}
.blob.a{width:420px;height:420px;background:#F7C593;top:-120px;right:-80px}
.blob.b{width:340px;height:340px;background:#FFD9A0;bottom:-140px;left:-100px}
:root[data-theme="dark"] .blob{opacity:.22}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,5vw,60px);align-items:center}
.badge-new{
  display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 8px;border-radius:var(--pill);
  background:var(--surface);border:1px solid var(--line);font-size:13.5px;font-weight:700;color:var(--text-2);
  box-shadow:var(--shadow-sm);
}
.badge-new i{
  font-style:normal;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:linear-gradient(140deg,var(--brand-2),var(--brand));color:var(--brand-ink);
  padding:4px 10px;border-radius:var(--pill);
}
h1.hero-h{
  font-family:"Baloo 2",Nunito,sans-serif;
  font-size:clamp(42px,6.4vw,74px);line-height:.98;letter-spacing:-.035em;margin:0;
}
h1.hero-h .amber{
  background:linear-gradient(120deg,var(--brand-2),var(--brand) 55%,var(--brand-dark));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{margin-top:20px;font-size:clamp(17px,1.9vw,20px);color:var(--text-2);max-width:31em}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;align-items:center}
.store-badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.store{
  display:flex;align-items:center;gap:11px;padding:11px 22px 11px 17px;border-radius:15px;
  border:1px solid var(--line);background:var(--surface);position:relative;
  text-decoration:none;color:inherit;opacity:.9;cursor:not-allowed;transition:.2s;
}
.store:hover{opacity:1;border-color:var(--brand)}
.store svg{width:24px;height:24px;flex:0 0 auto;fill:var(--text)}
.store span{display:block;font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3);line-height:1.5;white-space:nowrap}
.store b{display:block;font-size:16.5px;font-weight:800;letter-spacing:-.02em;line-height:1.2;white-space:nowrap}
.hero-note{margin-top:16px;font-size:14px;color:var(--text-3);font-weight:600}
.hero-note a{color:var(--brand-dark);font-weight:800;text-underline-offset:3px}
:root[data-theme="dark"] .hero-note a{color:var(--brand-2)}

/* "Coming soon" label with the two store badges centred beneath it */
.soon{margin:34px auto 0;width:fit-content;text-align:center}
.soon-label{
  display:block;font-size:12.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:14px;
}
.soon .store-badges{margin-top:0;justify-content:center}
.soon.centered{margin-top:26px}

/* the three standing links at the foot of the home page */
.link-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:10px}
.link-row a{
  text-decoration:none;font-weight:800;font-size:15px;color:var(--text-2);
  padding:11px 20px;border-radius:var(--pill);border:1px solid var(--line);
  background:var(--surface);transition:.2s;
}
.link-row a:hover{color:var(--text);border-color:var(--brand);transform:translateY(-2px)}

/* ---------- phone ---------- */
.phone-stage{position:relative;display:grid;place-items:center;min-height:520px}
.phone{
  position:relative;z-index:1;width:min(300px,78vw);aspect-ratio:300/620;border-radius:44px;padding:11px;
  background:linear-gradient(160deg,#5c4426,#2e1d0c);box-shadow:var(--shadow),0 0 0 1.5px rgba(255,255,255,.08) inset;
  transform:rotate(-2.5deg);transition:transform .5s cubic-bezier(.2,.8,.3,1);
}
.phone:hover{transform:rotate(0deg) translateY(-6px)}
.phone-screen{
  position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;
  background:#FFF4DE;display:flex;flex-direction:column;
}
.phone-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:96px;height:24px;border-radius:99px;background:#2e1d0c;z-index:5}
.app-top{display:flex;align-items:center;gap:8px;padding:34px 15px 11px;background:#FFF4DE}
.app-top img{width:25px;height:25px}
.app-top b{font-family:"Baloo 2",sans-serif;font-size:19px;color:#3D2409;letter-spacing:-.03em}
.streak{margin-left:auto;display:flex;align-items:center;gap:5px;background:#fff;border-radius:99px;padding:5px 12px;font-size:13px;font-weight:800;color:#3D2409;box-shadow:0 2px 6px rgba(74,46,18,.1)}
.app-feed{flex:1;min-height:0;overflow:hidden;padding:0 12px 12px;background:#FFF4DE;display:grid;gap:12px;align-content:start;grid-auto-rows:max-content}
.pcard{background:#fff;border-radius:19px;overflow:hidden;box-shadow:0 4px 14px rgba(74,46,18,.09);animation:cardIn .6s ease both}
.pcard:nth-child(2){animation-delay:.15s}
@keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pcard-top{display:flex;align-items:center;gap:9px;padding:10px 12px}
.pcard-top>div:nth-child(2){min-width:0;flex:1}
.av{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;background:var(--brand)}
.pcard-top .nm{font-size:13.5px;font-weight:800;color:#3D2409;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard-top .hd{font-size:11.5px;color:#A98F73;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot{margin-left:auto;flex:0 0 auto;white-space:nowrap;font-size:11px;font-weight:800;padding:4px 10px;border-radius:99px}
.pcard-photo{aspect-ratio:1/.62;position:relative}
.pcard-body{padding:9px 12px 12px}
.acts{display:flex;gap:14px;align-items:center;color:#7A5A38;font-size:12px;font-weight:800;margin-bottom:7px}
.acts svg{width:15px;height:15px;stroke:#7A5A38;fill:none;stroke-width:2;vertical-align:-2px;margin-right:3px}
.acts .liked svg{fill:#E8862E;stroke:#E8862E}
.acts .liked{color:#C96D1B}
.pcap{font-size:12.8px;line-height:1.45;color:#3D2409;font-weight:600}
.rchip{margin-top:8px;display:inline-flex;align-items:center;gap:6px;border:1.4px solid #F7C593;color:#C96D1B;border-radius:99px;padding:5px 11px;font-size:11.5px;font-weight:800}
.app-tabs{display:flex;align-items:center;justify-content:space-around;padding:9px 8px 13px;background:#fff;border-top:1px solid rgba(74,46,18,.07)}
.app-tabs i{width:19px;height:19px;border-radius:5px;background:#D9C6AC;display:block}
.app-tabs i.on{background:var(--brand)}
.app-tabs .plus{width:41px;height:41px;border-radius:50%;background:linear-gradient(140deg,var(--brand-2),var(--brand));display:grid;place-items:center;color:#fff;font-size:23px;font-weight:700;box-shadow:0 5px 13px rgba(232,134,46,.45);line-height:0}
.float-card{
  position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:11px 15px;box-shadow:var(--shadow);font-size:13.5px;font-weight:800;display:flex;align-items:center;gap:10px;
  animation:bob 5s ease-in-out infinite;z-index:4;
}
.float-card small{display:block;font-size:11px;font-weight:700;color:var(--text-3);letter-spacing:.03em}
.float-card.f1{top:19%;left:-13%}
.float-card.f2{bottom:3%;right:-11%;animation-delay:1.6s}
.fc-ico{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--bg-2);font-size:16px}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media (prefers-reduced-motion:reduce){.float-card,.pcard{animation:none}}

/* ---------- meal strip ---------- */
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:8px}
.slot-card{
  border-radius:var(--r-lg);padding:20px 18px;border:1px solid var(--line);background:var(--surface);
  transition:.25s;position:relative;overflow:hidden;
}
.slot-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.slot-card .em{font-size:26px;line-height:1}
.slot-card b{display:block;margin-top:11px;font-size:17px;letter-spacing:-.02em}
.slot-card span{display:block;font-size:13.5px;color:var(--text-3);font-weight:700;margin-top:2px}
.slot-card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c)}

/* ---------- sections ---------- */
.section{padding:clamp(52px,8vw,104px) 0;position:relative}
.section.alt{background:var(--bg-2)}
.sec-head{max-width:640px;margin-bottom:clamp(28px,4vw,48px)}
.sec-head h2{font-family:"Baloo 2",Nunito,sans-serif;font-size:clamp(31px,4.4vw,50px);letter-spacing:-.035em;margin-top:12px}
.sec-head p{margin-top:14px;color:var(--text-2);font-size:clamp(16px,1.7vw,18.5px)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,26px);counter-reset:s}
.step{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:28px 26px 30px;
  position:relative;transition:.25s;
}
.step:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--brand)}
.step .n{
  counter-increment:s;font-family:"Baloo 2",sans-serif;font-size:15px;font-weight:800;
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--brand-2),var(--brand));color:var(--brand-ink);
}
.step .n::before{content:counter(s)}
.step h3{font-size:21px;margin-top:18px;letter-spacing:-.025em}
.step p{margin-top:9px;color:var(--text-2);font-size:15.5px}
.step .art{margin-top:20px;border-radius:var(--r);overflow:hidden;background:var(--bg-2);aspect-ratio:16/10}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px)}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;
  transition:.25s;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--brand)}
.card .ico{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:22px;font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(140deg,color-mix(in srgb,var(--brand) 20%,transparent),color-mix(in srgb,var(--brand) 6%,transparent));
  border:1px solid var(--line);
}
.card h3{font-size:18.5px;margin-top:17px;letter-spacing:-.02em}
.card p{margin-top:8px;color:var(--text-2);font-size:15px}
.card.wide{grid-column:span 2}
.grid.tight{grid-template-columns:repeat(4,1fr);gap:14px}
.grid.tight .card{padding:20px 19px;border-radius:var(--r)}
.grid.tight .card .ico{width:38px;height:38px;border-radius:11px;font-size:18px}
.grid.tight .card h3{font-size:16.5px;margin-top:14px}
.grid.tight .card p{font-size:14.2px;margin-top:6px}

/* privacy band */
.band{
  border-radius:var(--r-xl);padding:clamp(30px,4.6vw,54px);position:relative;overflow:hidden;
  background:linear-gradient(140deg,var(--brand-2),var(--brand) 55%,var(--brand-dark));color:#fff;
}
:root[data-theme="dark"] .band{background:linear-gradient(140deg,#3A2611,#241708 60%,#1A1008);border:1px solid var(--line)}
.band h2{font-family:"Baloo 2",sans-serif;font-size:clamp(28px,4vw,44px);letter-spacing:-.035em;max-width:14em}
.band p{margin-top:16px;font-size:clamp(16px,1.8vw,18.5px);opacity:.94;max-width:44em}
.band-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
.band-list div{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.22);border-radius:var(--r);padding:16px 18px;font-weight:800;font-size:15.5px;backdrop-filter:blur(4px)}
:root[data-theme="dark"] .band-list div{background:rgba(245,154,62,.1);border-color:rgba(245,154,62,.22)}
.band-list small{display:block;font-weight:700;font-size:13px;opacity:.85;margin-top:3px}

/* CTA */
.cta{text-align:center;display:grid;justify-items:center;gap:8px}
.cta img,.cta .mark{margin-bottom:6px}
.cta h2{font-family:"Baloo 2",sans-serif;font-size:clamp(32px,5vw,54px);letter-spacing:-.035em}
.cta p{color:var(--text-2);font-size:18px;max-width:34em}

/* ---------- article (legal + about + support) ---------- */
.page-head{padding:clamp(44px,7vw,84px) 0 clamp(20px,3vw,34px);position:relative;overflow:hidden}
.page-head::before{content:"";position:absolute;inset:-40% -10% auto -10%;height:150%;background:var(--glow)}
.page-head h1{font-family:"Baloo 2",sans-serif;font-size:clamp(36px,5.6vw,60px);letter-spacing:-.035em;margin-top:12px}
.page-head p.lede{margin-top:16px;color:var(--text-2);font-size:clamp(16px,1.8vw,19px);max-width:44em}
.doc{padding-bottom:clamp(56px,8vw,110px)}
.doc-inner{display:grid;grid-template-columns:236px minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.toc{position:sticky;top:calc(var(--nav-h) + 20px);max-height:calc(100vh - var(--nav-h) - 44px);overflow:auto;
  border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;background:var(--surface)}
.toc b{display:block;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:10px}
.toc a{display:block;text-decoration:none;font-size:14px;font-weight:700;color:var(--text-2);padding:6px 9px;border-radius:9px;line-height:1.35}
.toc a:hover{background:var(--line-2);color:var(--text)}
.toc a.active{background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--brand-dark)}
:root[data-theme="dark"] .toc a.active{color:var(--brand-2)}

.prose{max-width:74ch;font-size:16.5px}
.prose h1{display:none}
.prose h2{
  font-family:"Baloo 2",sans-serif;font-size:clamp(23px,3vw,31px);letter-spacing:-.03em;
  margin:46px 0 14px;padding-top:14px;scroll-margin-top:calc(var(--nav-h) + 18px);
}
.prose h2:first-of-type{margin-top:8px}
.prose h3{font-size:18.5px;margin:30px 0 10px;letter-spacing:-.02em;scroll-margin-top:calc(var(--nav-h) + 18px)}
.prose p{margin:14px 0;color:var(--text-2)}
.prose strong{color:var(--text);font-weight:800}
.prose a{color:var(--brand-dark);font-weight:700;text-underline-offset:3px}
:root[data-theme="dark"] .prose a{color:var(--brand-2)}
.prose ul,.prose ol{margin:14px 0;padding-left:22px;color:var(--text-2)}
.prose li{margin:7px 0}
.prose li::marker{color:var(--brand)}
.prose hr{border:0;border-top:1px solid var(--line);margin:38px 0}
.prose blockquote{
  margin:20px 0;padding:16px 20px;border-left:4px solid var(--brand);border-radius:0 var(--r) var(--r) 0;
  background:var(--surface);color:var(--text-2);
}
.prose blockquote p{margin:6px 0}
.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--bg-2);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--text)
}
.table-scroll{overflow-x:auto;margin:20px 0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.prose table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
.prose th,.prose td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line-2);vertical-align:top;color:var(--text-2)}
.prose th{font-weight:800;color:var(--text);background:var(--bg-2);white-space:nowrap}
.prose tr:last-child td{border-bottom:0}
.doc-meta{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;
}
.chip{
  display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:800;
  border:1px solid var(--line);background:var(--surface);border-radius:var(--pill);padding:7px 14px;color:var(--text-2);
}
.fillin{
  display:inline-block;background:#ffe08a;color:#5a3d00;border:1.5px dashed #b98a00;
  border-radius:6px;padding:0 7px;font-weight:800;
}

/* about */
.about-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,3vw,30px);align-items:start}
.quote{
  font-family:"Baloo 2",sans-serif;font-size:clamp(24px,3.6vw,38px);line-height:1.18;letter-spacing:-.03em;
  max-width:18em;
}
.stat{display:grid;gap:2px}
.stat b{font-family:"Baloo 2",sans-serif;font-size:clamp(30px,4vw,42px);letter-spacing:-.03em;color:var(--brand-dark)}
:root[data-theme="dark"] .stat b{color:var(--brand-2)}
.stat span{font-size:14px;font-weight:700;color:var(--text-3)}

/* people, and the bio dialogs they open */
.people{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,22px)}
.person{
  font:inherit;text-align:left;cursor:pointer;
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:16px;row-gap:10px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 24px;color:var(--text);transition:.25s;
}
.person:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--brand)}
.person:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.person-ph{
  grid-row:span 2;width:64px;height:64px;border-radius:18px;display:grid;place-items:center;
  font-family:"Baloo 2",Nunito,sans-serif;font-size:26px;font-weight:800;color:var(--brand-ink);
  background:linear-gradient(140deg,var(--brand-2),var(--brand));overflow:hidden;
}
.person-ph img{width:100%;height:100%;object-fit:cover}
.person-txt{display:grid;gap:1px}
.person-name{font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.person-role{font-size:14.5px;font-weight:700;color:var(--text-3)}
.person-more{
  grid-column:2;font-size:13.5px;font-weight:800;color:var(--brand-dark);
  display:inline-flex;align-items:center;gap:6px;
}
:root[data-theme="dark"] .person-more{color:var(--brand-2)}
.person-more::after{content:"\2192";transition:transform .2s}
.person:hover .person-more::after{transform:translateX(4px)}

.bio{
  border:0;padding:0;background:transparent;overflow:visible;
  width:min(520px,calc(100vw - 28px));max-width:none;
  position:fixed;inset:0;margin:auto;color:var(--text);
}
.bio::backdrop{background:rgba(38,22,8,.58);backdrop-filter:blur(6px)}
:root[data-theme="dark"] .bio::backdrop{background:rgba(0,0,0,.7)}
.bio-card{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);
}
.bio[open] .bio-card{animation:bioIn .34s cubic-bezier(.2,.9,.3,1)}
@keyframes bioIn{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bio[open] .bio-card{animation:none}}

.bio-hero{
  height:104px;position:relative;overflow:hidden;
  background:linear-gradient(125deg,var(--brand-2) 0%,var(--brand) 52%,var(--brand-dark) 100%);
}
:root[data-theme="dark"] .bio-hero{
  background:linear-gradient(125deg,#8A4E14 0%,#6B3A0F 55%,#4A2809 100%);
}
.bio-hero::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 150% at 15% -20%,rgba(255,255,255,.32),transparent 60%);
}
.bio-hero-mark{
  position:absolute;right:-18px;bottom:-26px;width:126px;height:126px;opacity:.22;
  background-image:var(--mark);background-size:contain;background-repeat:no-repeat;
  transform:rotate(-10deg);
}
.bio-ph{
  position:absolute;top:46px;left:50%;transform:translateX(-50%);
  width:112px;height:112px;border-radius:32px;display:grid;place-items:center;overflow:hidden;
  font-family:"Baloo 2",Nunito,sans-serif;font-size:46px;font-weight:800;color:var(--brand-ink);
  background:linear-gradient(140deg,var(--brand-2),var(--brand));
  box-shadow:0 0 0 6px var(--surface),0 12px 26px -12px rgba(74,46,18,.55);
}
:root[data-theme="dark"] .bio-ph{box-shadow:0 0 0 6px var(--surface),0 12px 30px -12px rgba(0,0,0,.8)}
.bio-ph img{width:100%;height:100%;object-fit:cover}

.bio-body{padding:74px 32px 30px;text-align:center}
.bio-body h3{
  font-family:"Baloo 2",Nunito,sans-serif;font-size:clamp(28px,4vw,34px);
  letter-spacing:-.03em;line-height:1.05;
}
.bio-role{
  display:inline-block;margin-top:10px;padding:5px 14px;border-radius:var(--pill);
  font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-dark);background:color-mix(in srgb,var(--brand) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--brand) 30%,transparent);
}
:root[data-theme="dark"] .bio-role{color:var(--brand-2)}
.bio-text{
  margin-top:20px;padding-top:20px;border-top:1px solid var(--line-2);
  text-align:left;color:var(--text-2);font-size:16px;
}
.bio-text p+p{margin-top:13px}
.bio-chips{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  margin-top:18px;padding-top:18px;border-top:1px solid var(--line-2);
}
.bio-chips span{
  font-size:13px;font-weight:700;color:var(--text-2);
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--pill);
  padding:6px 13px;white-space:nowrap;
}
.bio-foot{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:24px}

.bio-x{
  position:absolute;top:14px;right:14px;z-index:3;width:34px;height:34px;border-radius:var(--pill);
  display:grid;place-items:center;cursor:pointer;color:#fff;
  background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.35);transition:.18s;
}
.bio-x svg{width:15px;height:15px}
.bio-x:hover{background:rgba(0,0,0,.38);transform:rotate(90deg)}
.bio-x:focus-visible{outline:2px solid #fff;outline-offset:2px}
body.bio-open{overflow:hidden}

/* faq */
details.faq{
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  padding:0;margin-bottom:12px;overflow:hidden;
}
details.faq summary{
  cursor:pointer;list-style:none;padding:18px 22px;font-weight:800;font-size:17px;
  display:flex;align-items:center;gap:14px;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";margin-left:auto;font-size:22px;font-weight:700;color:var(--brand);transition:transform .2s}
details.faq[open] summary::after{transform:rotate(45deg)}
details.faq .a{padding:0 22px 20px;color:var(--text-2);font-size:15.5px}
details.faq .a p+p{margin-top:12px}

/* 404 */
.nf{min-height:calc(100vh - var(--nav-h) - 220px);display:grid;place-items:center;text-align:center;padding:60px 0}
.nf-in{display:grid;justify-items:center;gap:6px;max-width:560px}
.nf-plate{position:relative;width:190px;height:190px;margin-bottom:10px}
.nf-plate svg{width:100%;height:100%;animation:tilt 6s ease-in-out infinite}
@keyframes tilt{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.nf h1{font-family:"Baloo 2",sans-serif;font-size:clamp(64px,12vw,120px);letter-spacing:-.05em;line-height:.9;
  background:linear-gradient(120deg,var(--brand-2),var(--brand) 50%,var(--brand-dark));-webkit-background-clip:text;background-clip:text;color:transparent}
.nf h2{font-family:"Baloo 2",sans-serif;font-size:clamp(24px,3.4vw,34px);letter-spacing:-.03em;margin-top:8px}
.nf p{color:var(--text-2);margin-top:12px;font-size:17px}
.nf .btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:26px}

/* ---------- email verification landing ---------- */
body.auth #loader{display:none}
body.auth .foot{display:none}
.auth{
  min-height:calc(100vh - var(--nav-h));display:grid;place-items:center;
  padding:clamp(28px,6vw,64px) 0;position:relative;overflow:hidden;
}
.auth::before{content:"";position:absolute;inset:-30% -10% auto -10%;height:140%;background:var(--glow);pointer-events:none}
.auth .wrap{max-width:520px;position:relative;z-index:1}
.auth-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--shadow);padding:clamp(30px,5vw,44px) clamp(24px,5vw,40px);text-align:center;
}
.auth-ico{
  width:74px;height:74px;margin:0 auto 22px;border-radius:26px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--brand-2),var(--brand));color:var(--brand-ink);
  box-shadow:0 12px 26px -14px rgba(232,134,46,.9);
}
.auth-ico svg{width:34px;height:34px}
.auth-ico.bad{background:linear-gradient(140deg,#E0785C,#C94F2E);color:#fff;box-shadow:0 12px 26px -14px rgba(201,79,46,.9)}
.auth-spin{
  width:28px;height:28px;border-radius:50%;
  border:3px solid rgba(255,255,255,.45);border-top-color:#fff;animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.auth-spin{animation-duration:2s}}
.auth-card h1{font-family:"Baloo 2",Nunito,sans-serif;font-size:clamp(28px,5vw,38px);letter-spacing:-.03em;line-height:1.05}
.auth-card>div>p{margin-top:12px;color:var(--text-2);font-size:17px}
.auth-btn{margin-top:26px;width:100%;max-width:280px;font-size:17px;padding:16px 26px}
.auth-note{margin-top:18px;font-size:14px;color:var(--text-3);font-weight:600;line-height:1.5}
.auth-note a{color:var(--brand-dark);font-weight:800}
:root[data-theme="dark"] .auth-note a{color:var(--brand-2)}
.auth-foot{
  display:flex;align-items:center;justify-content:center;gap:8px;margin-top:22px;
  font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);
}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);background:var(--bg-2);padding:clamp(40px,5vw,62px) 0 30px;position:relative;z-index:1}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.foot-brand p{margin-top:14px;color:var(--text-3);font-size:14.5px;max-width:30ch;font-weight:600}
.foot-brand .tagline{font-family:"Baloo 2",Nunito,sans-serif;font-weight:800;font-size:19px;
  letter-spacing:-.02em;color:var(--text-2);margin-top:12px}
.foot h4{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:12px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot a{text-decoration:none;color:var(--text-2);font-size:15px;font-weight:700}
.foot a:hover{color:var(--brand-dark)}
:root[data-theme="dark"] .foot a:hover{color:var(--brand-2)}
.foot-base{
  margin-top:40px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  font-size:13.5px;color:var(--text-3);font-weight:600;
}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .phone-stage{min-height:auto;order:2}
  .doc-inner{grid-template-columns:1fr}
  .toc{position:static;max-height:260px;order:-1}
  .grid,.steps{grid-template-columns:repeat(2,1fr)}
  .grid.tight{grid-template-columns:repeat(3,1fr)}
  .card.wide{grid-column:span 2}
.grid.tight{grid-template-columns:repeat(4,1fr);gap:14px}
.grid.tight .card{padding:20px 19px;border-radius:var(--r)}
.grid.tight .card .ico{width:38px;height:38px;border-radius:11px;font-size:18px}
.grid.tight .card h3{font-size:16.5px;margin-top:14px}
.grid.tight .card p{font-size:14.2px;margin-top:6px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
  .about-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  body{font-size:16.5px}
  .slots,.grid,.steps,.band-list,.people{grid-template-columns:1fr}
  .bio-hero{height:92px}
  .bio-ph{width:96px;height:96px;border-radius:28px;font-size:40px;top:42px}
  .bio-body{padding:64px 22px 26px}
  .grid.tight{grid-template-columns:repeat(2,1fr)}
  .card.wide{grid-column:span 1}
  .float-card.f1{left:-2%;top:2%;transform:scale(.9)}
  .float-card.f2{right:-2%;bottom:6%;transform:scale(.9)}
  .foot-grid{grid-template-columns:1fr}
  .phone{transform:none}
}
@media (max-width:440px){
  .grid.tight{grid-template-columns:1fr}
}
@media (max-width:400px){
  .wrap{padding-inline:17px}
  .float-card{display:none}
}
/* narrow desktop window / "minimized" */
@media (min-width:721px) and (max-width:900px){
  .slots{grid-template-columns:repeat(2,1fr)}
}

/* ---------- beta tester page ---------- */
.soon .beta-btn{font-size:17px;padding:16px 32px}
.soon-sub{margin-top:14px;font-size:14px;color:var(--text-3);font-weight:600}

.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:clamp(24px,4vw,38px)}
.perk{
  display:flex;gap:13px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;
}
.perk-ico{font-size:21px;line-height:1.25;flex:0 0 auto}
.perk b{display:block;font-size:16px;letter-spacing:-.01em}
.perk span{display:block;font-size:14.2px;color:var(--text-2);font-weight:600;margin-top:3px}

.form-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--shadow);padding:clamp(16px,3vw,26px);max-width:720px;margin-inline:auto;
}
.form-card iframe{display:block;width:100%;border:0;min-height:529px;background:transparent}
.form-fallback{color:var(--text-2);font-size:15.5px;padding:14px 10px}
.form-fallback a{color:var(--brand-dark);font-weight:800}
:root[data-theme="dark"] .form-fallback a{color:var(--brand-2)}

.done{
  max-width:640px;margin-inline:auto;text-align:center;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow);
  padding:clamp(32px,5vw,48px) clamp(24px,4vw,40px);
}
.done-ico{
  width:76px;height:76px;margin:0 auto 22px;border-radius:26px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--brand-2),var(--brand));color:var(--brand-ink);
  box-shadow:0 12px 26px -14px rgba(232,134,46,.9);
}
.done-ico svg{width:36px;height:36px}
.done h2{font-family:"Baloo 2",Nunito,sans-serif;font-size:clamp(28px,4.4vw,38px);letter-spacing:-.03em}
.done p{margin-top:14px;color:var(--text-2);font-size:17px}
.done .done-small{font-size:14.5px;color:var(--text-3);font-weight:600}
.done a{color:var(--brand-dark);font-weight:800}
:root[data-theme="dark"] .done a{color:var(--brand-2)}
.done-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.done-btns a{color:inherit;text-decoration:none}
@media (max-width:860px){.perks{grid-template-columns:1fr}}

/* The Tally form paints its own light background, so the card around it stays
   light in dark mode too. A dark card behind a light form looks like a bug. */
:root[data-theme="dark"] .form-card{background:#FFF8EC;border-color:rgba(74,46,18,.18)}
.form-card iframe{border-radius:14px;overflow:hidden}

/* ---------- dark mode legibility ----------
   Light type on a dark ground blooms: the strokes spread and thin weights go
   mushy. The fix is a touch more weight, a touch more letter spacing, and more
   contrast, applied only in the dark theme so the light theme keeps its airier
   setting. */
:root[data-theme="dark"] body{letter-spacing:.006em}
:root[data-theme="dark"] .hero-sub,
:root[data-theme="dark"] .lede,
:root[data-theme="dark"] .sec-head p,
:root[data-theme="dark"] .card p,
:root[data-theme="dark"] .step p,
:root[data-theme="dark"] .perk span,
:root[data-theme="dark"] .prose p,
:root[data-theme="dark"] .prose li,
:root[data-theme="dark"] .prose td,
:root[data-theme="dark"] .done p,
:root[data-theme="dark"] .bio-text,
:root[data-theme="dark"] details.faq .a{font-weight:600}

:root[data-theme="dark"] .note,
:root[data-theme="dark"] .auth-note,
:root[data-theme="dark"] .hero-note,
:root[data-theme="dark"] .soon-sub,
:root[data-theme="dark"] .done .done-small,
:root[data-theme="dark"] .foot-brand p,
:root[data-theme="dark"] .person-role,
:root[data-theme="dark"] .slot-card span{font-weight:700}

/* The small print was set too small to carry a muted colour on a dark ground.
   Nudged in both themes so the two stay identical in layout. */
.perk span{font-size:15px}
.hero-note,.soon-sub{font-size:15px}
.done .done-small{font-size:15px}
.foot a{font-size:15.5px}
.slot-card span{font-size:14.5px}

/* ---------- the Tally form in dark mode ----------
   The form lives in a cross-origin iframe, so its text colour cannot be reached
   with CSS, and Tally has no dark-theme embed parameter. What it does have is a
   transparent background, which leaves only ink on the page. Inverting that ink
   flips the dark letters to light while the transparent areas stay transparent,
   so the form sits on our own dark card. The hue-rotate puts the colours back
   where they started, otherwise the amber button would come out blue. */
:root[data-theme="dark"] .form-card{
  /* Near black, because an inverted white canvas lands on black. If Tally's
     transparent background comes through instead, this still reads as an inset
     well rather than a mismatched panel. */
  background:#0A0806;
  border-color:rgba(252,239,219,.14);
  box-shadow:inset 0 1px 0 rgba(252,239,219,.06),0 22px 54px -22px rgba(0,0,0,.8);
  padding:clamp(10px,2vw,16px);
}
:root[data-theme="dark"] .form-card iframe{
  /* contrast() pulls the extremes in a little so the inverted field outlines
     lift off the background instead of disappearing into it. */
  filter:invert(1) hue-rotate(180deg) contrast(.9);
  border-radius:12px;
}