/* Shared styles for the "Own the brain" one-pager series (/own-the-brain/*).
   Deliberate exception to the site's inline-style norm: these are templated
   collateral cuts that share identical chrome, so the brand tokens + print
   theme live here once. Change the look in ONE place, every cut updates.
   See README.md in this folder. */

:root{
  --bg:#08080A; --bg-card:#121216; --bg-2:#16161A;
  --ink:#FFFFFF; --muted:rgba(255,255,255,.62); --faint:rgba(255,255,255,.42);
  --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.20);
  --gold:#EDB55D; --blue:#58A1E2; --teal:#00C2A8; --green:#63B084;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg)}
body{font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased}

/* minimal top bar (web only) — mirrors the the-future/ logo-back pattern */
.topbar{max-width:780px;margin:0 auto;padding:18px 26px 0;display:flex;align-items:center;justify-content:space-between}
.topbar .logo{font-weight:800;font-size:19px;letter-spacing:-.5px;text-decoration:none;color:var(--ink)}
.topbar .logo .ac{color:var(--gold)}
.topbar .back{font-family:var(--mono);font-size:.72rem;color:var(--faint);text-decoration:none}
.topbar .back:hover{color:var(--ink)}

.wrap{max-width:780px;margin:0 auto;padding:24px 26px 48px;}
.kicker{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  border:1px solid var(--border);border-radius:999px;padding:6px 12px;display:inline-block;margin-bottom:16px}
h1{font-size:1.95rem;margin:0 0 12px;letter-spacing:-.028em;font-weight:800;line-height:1.08}
h1 .ac{color:var(--gold)}
.deck{font-size:1.06rem;color:var(--muted);margin:0;max-width:690px;line-height:1.42}
.deck b{color:var(--ink);font-weight:600}

.fig{margin:26px 0 22px;border:1px solid var(--border);border-radius:16px;background:
  radial-gradient(120% 90% at 50% 0,rgba(237,181,93,.05),transparent 60%),var(--bg-card);padding:18px 16px 10px}
.fig svg{width:100%;height:auto;display:block}

.steps{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:0 0 18px}
.step{border:1px solid var(--border);border-radius:12px;background:var(--bg-card);padding:13px 15px;position:relative}
.step .n{font-family:var(--mono);font-size:.62rem;font-weight:700;color:var(--gold);letter-spacing:.08em}
.step .t{font-weight:700;font-size:.92rem;margin:5px 0 3px}
.step .d{color:var(--muted);font-size:.8rem;margin:0;line-height:1.4}

.bens{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--muted);margin:0 0 6px;text-align:center}
.bens b{color:var(--ink);font-weight:600}

.clincher{font-size:1.06rem;font-weight:600;color:var(--ink);margin:24px 0 0;max-width:700px;line-height:1.4;
  border-left:3px solid var(--gold);padding-left:18px}
.clincher .ac{color:var(--gold)}

.cta{margin:26px 0 0;display:flex;gap:12px;flex-wrap:wrap}
.btn{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;padding:11px 18px;border-radius:9px;font-weight:600}
.btn.solid{background:var(--gold);color:#08080A}
.btn.ghost{border:1px solid var(--border-strong);color:var(--ink);background:transparent;cursor:pointer}

.foot{margin-top:30px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--border);padding-top:16px;font-size:.78rem}
.foot .tl{color:var(--ink);font-weight:700}.foot .tl .ac{color:var(--gold)}
.foot .rt{color:var(--faint);font-family:var(--mono);font-size:.7rem}

/* the standard — principle cards (hub) */
.tenets{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:24px 0 6px}
.tenet{border:1px solid var(--border);border-radius:12px;background:var(--bg-card);padding:15px 16px;border-top:2px solid var(--gold)}
.tenet .tn{font-family:var(--mono);font-size:.6rem;font-weight:700;color:var(--gold);letter-spacing:.1em}
.tenet .tt{font-weight:700;font-size:1rem;margin:6px 0 4px;letter-spacing:-.01em;line-height:1.18}
.tenet .td{color:var(--muted);font-size:.83rem;margin:0;line-height:1.4}
.divlabel{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  margin:32px 0 2px;display:flex;align-items:center;gap:14px}
.divlabel::after{content:"";flex:1;height:1px;background:var(--border)}

/* hub (index.html) */
.hub-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin:18px 0 6px}
.hcard{display:block;text-decoration:none;border:1px solid var(--border);border-radius:14px;background:var(--bg-card);
  padding:18px 18px 16px;transition:border-color .15s,transform .15s}
.hcard:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.hcard .who{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.hcard .ht{font-weight:700;font-size:1.02rem;margin:7px 0 5px;color:var(--ink);line-height:1.2}
.hcard .hd{color:var(--muted);font-size:.84rem;margin:0;line-height:1.4}
.hcard .go{font-family:var(--mono);font-size:.72rem;color:var(--faint);margin-top:12px}

@media(max-width:560px){h1{font-size:1.5rem}.wrap{padding:18px 16px 36px}.steps,.hub-cards,.tenets{grid-template-columns:1fr}}

@media print{
  @page{margin:13mm 15mm}
  :root{--bg:#fff;--bg-card:#fff;--bg-2:#f5f5f3;--ink:#0b0b0d;--muted:#3a3a40;--faint:#6a6a72;
    --border:rgba(0,0,0,.16);--border-strong:rgba(0,0,0,.30);--gold:#9a6b14}
  .topbar,.cta{display:none}
  .wrap{max-width:none;padding:0}
  /* keep the doctrine eyebrow on the download, but plain (no chip) */
  .kicker{border:none;padding:0;margin-bottom:10px;color:var(--faint)}
  h1{font-size:1.7rem}
  .fig{margin:18px 0 16px;padding:6px 4px 2px;break-inside:avoid}
  .steps{break-inside:avoid}
  .foot{margin-top:18px}
}