/* BTTR Space site v2 (21 Oct 2026). Tokens, nav, footer and buttons shared by every public page, from the approved
   home (studies/home-v2-2026-10-21, docs/62-brand-kit.md). Palette 6, Manrope and Geist Mono, Phosphor Regular icons,
   rounded shapes. Loaded after each page's own stylesheet, so the family sections below restyle older templates. */
:root{--bg:#F2F5FA;--surface:#FFFFFF;--ink:#1A1A1C;--apricot:#FFB68D;--deep:#C04812;--muted:#5A6070;--line:#DCE1E9;
 --dark:#141416;--dark2:#222226;--dark3:#2E2E33;--ok:#2F9E5F;--bad:#E04A2B;
 --font:Manrope,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;--mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;
 --max:1250px;--gut:max(16px,env(safe-area-inset-left,0px));--gutr:max(16px,env(safe-area-inset-right,0px));color-scheme:light}
body{font-family:var(--font);-webkit-font-smoothing:antialiased}
.wrap{box-sizing:border-box;width:100%;max-width:calc(var(--max) + 64px);margin-inline:auto;padding-left:max(var(--gut),32px);padding-right:max(var(--gutr),32px)}
.i{width:20px;height:20px;flex:none;display:block}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0}
.logo{display:block;height:auto;aspect-ratio:560/120}
.l-ink{--logo-word:var(--ink);--logo-mark:var(--ink)}
.l-dark{--logo-word:#FFFFFF;--logo-mark:var(--apricot)}
.skip{position:absolute;left:16px;top:-100px;z-index:60;background:var(--surface);color:var(--ink);padding:10px 16px;border-radius:999px;font-weight:600}
.skip:focus{top:16px}

/* buttons: pill with a round icon well */
.btn{box-sizing:border-box;display:inline-flex;align-items:center;gap:12px;height:48px;padding:4px 22px 4px 4px;border-radius:999px;font:600 16px/1 var(--font);white-space:nowrap;text-decoration:none;letter-spacing:0}
.btn .dot{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;transition:transform .2s}
.btn .dot .i{width:18px;height:18px}
.btn:hover .dot{transform:translateX(2px)}
.btn-dark{background:var(--ink);color:#fff}.btn-dark .dot{background:var(--apricot);color:var(--ink)}
.btn-light{background:var(--surface);color:var(--ink)}.btn-light .dot{background:var(--ink);color:#fff}
.btn-line{box-sizing:border-box;display:inline-flex;align-items:center;height:48px;padding:0 22px;border-radius:999px;border:1px solid var(--line);font:500 16px/1 var(--font);color:var(--ink);text-decoration:none}
.btn:focus-visible,.btn-line:focus-visible,.nav a:focus-visible,.nav-menu:focus-visible,.foot-band a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:999px}

/* nav: floating pill */
.nav-wrap{position:sticky;top:calc(env(safe-area-inset-top,0px) + 8px);z-index:40;box-sizing:border-box;padding-left:max(var(--gut),32px);padding-right:max(var(--gutr),32px);font-family:var(--font)}
.nav{box-sizing:border-box;position:relative;max-width:var(--max);margin:0 auto;height:64px;background:var(--surface);border-radius:999px;display:flex;align-items:center;padding:0 8px 0 24px;box-shadow:0 1px 2px rgba(26,26,28,.04),0 8px 24px rgba(26,26,28,.06);color:var(--ink)}
.nav a{text-decoration:none}.nav a:not(.btn){color:inherit}
.nav-logo .logo{width:124px}
.nav-links{display:flex;gap:30px;margin-inline:auto;font-size:16px;font-weight:500}
.nav-links a:hover{color:var(--muted)}
.nav-login{display:none}
.nav-right{display:flex;align-items:center;gap:8px}
.nav-menu{all:unset;box-sizing:border-box;display:none;cursor:pointer;width:46px;height:46px;border-radius:50%;place-items:center;border:1px solid var(--line);color:var(--ink)}

/* footer: dark band */
.foot-band{background:var(--ink);color:#fff;margin-top:128px;font-family:var(--font)}
.foot{padding-block:80px 40px;display:grid;gap:56px}
.foot a{color:inherit;text-decoration:none}
.foot-top{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap}
.foot-brand{display:grid;gap:16px;align-content:start;max-width:320px}
.foot-brand .logo{width:150px}
.foot-brand p{margin:0;color:#A7ADB8;font-size:16px}
.foot-social{display:flex;gap:8px;margin-top:4px}
.foot-social a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--dark2);color:#D9DCE2;transition:background .2s,color .2s}
.foot-social a:hover{background:var(--apricot);color:var(--ink)}
.foot-social svg{width:19px;height:19px;fill:currentColor}
.foot-cols{display:flex;gap:72px;flex-wrap:wrap}
.foot-cols div{display:grid;gap:12px;align-content:start;font-size:16px}
.foot-cols b{font-weight:600}
.foot-cols a{color:#A7ADB8}
.foot-cols a:hover{color:#fff}
.foot-b{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:28px;border-top:1px solid var(--dark3);color:#A7ADB8;font-size:15px}

@media (max-width:1100px){
 .nav-links{display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);flex-direction:column;gap:0;margin:0;background:var(--surface);border-radius:24px;padding:10px;box-shadow:0 20px 50px -12px rgba(26,26,28,.25)}
 .nav-links a{padding:14px 16px;border-radius:14px;font-size:17px}
 .nav-links a:hover{background:var(--bg);color:var(--ink)}
 .nav-wrap.open .nav-links{display:flex}
 .nav-login{display:block}
 .nav-right{margin-left:auto}
 .nav-menu{display:grid}
}
@media (max-width:560px){
 .wrap,.nav-wrap{padding-left:var(--gut);padding-right:var(--gutr)}
 .nav{padding-left:18px}.nav-logo .logo{width:104px}.btn-line{display:none}.nav .btn{padding-right:16px}
 .foot-cols{gap:40px}.foot{padding-top:64px}
}
@media (prefers-reduced-motion:reduce){.btn .dot{transition:none}}

/* ---------- family restyles: older templates take the v2 look until they are rebuilt ---------- */

/* secondary pages (about, legal, contact, pricing, team, 404): light page, white paper card */
body.v2-secondary{background:var(--bg);color:var(--ink);font-size:17px}
.v2-secondary .heading{color:var(--ink);padding:96px 0 64px}
.v2-secondary .heading h1{font-family:var(--font);font-weight:600;letter-spacing:-.04em;font-size:clamp(40px,6vw,64px);line-height:1.02}
.v2-secondary .heading p{color:var(--muted);font-size:19px}
.v2-secondary .eyebrow{color:var(--deep);letter-spacing:.08em;font-weight:600}
.v2-secondary .paper{background:var(--surface);border-radius:28px;margin:0 max(var(--gut),32px);max-width:var(--max);margin-inline:auto;padding:72px 0}
.v2-secondary h2{font-weight:600;letter-spacing:-.03em}
.v2-secondary .article p,.v2-secondary .article li,.v2-secondary .toc a,.v2-secondary .meta{color:var(--muted)}
.v2-secondary .article section+section{border-top-color:var(--line)}
.v2-secondary .button{border-radius:999px;background:var(--ink);color:#fff;padding:13px 22px}
.v2-secondary a:focus-visible,.v2-secondary summary:focus-visible{outline-color:var(--ink)}
.v2-secondary th{background:var(--bg)}
.v2-secondary td,.v2-secondary th{border-bottom-color:var(--line)}
.v2-secondary .draft{border-left-color:var(--apricot);background:#FFF1E8;border-radius:0 16px 16px 0}

/* editorial pages (journal, guides, hubs, tools): same tokens, rounded shapes */
body.v2-editorial{background:var(--surface);color:var(--ink)}
.v2-editorial{--paper:var(--surface);--soft:var(--bg);--accent:var(--deep);--tint:#FFF1E8}
.v2-editorial h1,.v2-editorial h2,.v2-editorial h3{letter-spacing:-.03em}
.v2-editorial .button{border-radius:999px}

/* pricing page packs: same cards as the home */
.v2-secondary .pack{background:var(--bg);border:2px solid transparent;border-radius:24px;padding:28px 24px 24px}
.v2-secondary .pack.popular{border-color:var(--ink);background:var(--bg)}
.v2-secondary .pack-badge{top:16px;left:auto;right:16px;background:var(--apricot);color:var(--ink);font-weight:700}
.v2-secondary .pack h3,.v2-secondary .pack-price,.v2-secondary .free-list strong,.v2-secondary .questions h3{color:var(--ink)}
.v2-secondary .pack-price{font-weight:600;letter-spacing:-.04em;font-size:40px}
.v2-secondary .pack-alt,.v2-secondary .pack-unit{color:var(--muted)}
.v2-secondary .pack-unit{border-top-color:var(--line)}
.v2-secondary .free-list li:before{border-color:var(--deep)}
.v2-secondary .callout{border-left-color:var(--apricot);background:#FFF1E8;border-radius:0 16px 16px 0}
.v2-secondary .article .callout p{color:var(--ink)}
.v2-secondary .error-plan{border-color:var(--ink);background-color:var(--bg)}
.v2-secondary .error-plan span{color:var(--deep)}