/* ============================================================================
   page.css — shared stylesheet for Booost SUBPAGES (about, roadmap, legal/*).
   The home page (index.html) is a self-contained mock with its CSS inline and
   does NOT link this file. Everything here mirrors index.html's token system so
   the two look like one site: same :root tokens, same Atkinson type, same nav,
   same footer, same light/dark behaviour. Keep the token block in sync with
   index.html — no raw hex outside :root.
   ========================================================================== */

:root{
  /* constant brand */
  --ink:#0B0D13; --cream:#F3F2EF; --cream-sub:#E9E7E1; --ink-text:#191919;
  --pink:#FF2D6B; --pink-soft:rgba(255,45,107,.12); --pink-line:rgba(255,45,107,.42); --pink-glow:rgba(255,45,107,.35);
  --cyan:#00F0FF; --ok:#3FB950; --warn:#E3A008;
  /* fixed (non-theming) surfaces */
  --white:#fff; --text-fixed:#E8ECF4; --muted-fixed:#96A0B5;
  --ink-raised:#111319; --ink-overlay:#181B25;
  --fd:'Atkinson Hyperlegible Next','Segoe UI',system-ui,sans-serif;
  --fb:'Atkinson Hyperlegible Next',system-ui,-apple-system,sans-serif;
  --fm:'Atkinson Hyperlegible Next',ui-monospace,'SF Mono',Menlo,monospace;
  --maxw:1180px;
  /* themeable — DARK defaults */
  --page:var(--ink); --raised:var(--ink-raised); --overlay:var(--ink-overlay); --subtle:#1F2333;
  --text:var(--text-fixed); --muted:var(--muted-fixed); --faint:#6A7488;
  --line:rgba(140,155,190,.14); --line-2:rgba(140,155,190,.26);
  --nav-bg:rgba(11,13,19,.82);
}
:root[data-theme="dark"]{--page:var(--ink);--raised:var(--ink-raised);--overlay:var(--ink-overlay);--subtle:#1F2333;
  --text:var(--text-fixed);--muted:var(--muted-fixed);--faint:#6A7488;--line:rgba(140,155,190,.14);--line-2:rgba(140,155,190,.26);--nav-bg:rgba(11,13,19,.82)}
:root[data-theme="light"]{--page:var(--cream);--raised:var(--white);--overlay:var(--white);--subtle:#ECEAE4;
  --text:var(--ink-text);--muted:#565A66;--faint:#8A8E99;--line:rgba(20,24,40,.10);--line-2:rgba(20,24,40,.18);--nav-bg:rgba(243,242,239,.86)}
@media (prefers-color-scheme: light){
  :root:not([data-theme]){--page:var(--cream);--raised:var(--white);--overlay:var(--white);--subtle:#ECEAE4;
    --text:var(--ink-text);--muted:#565A66;--faint:#8A8E99;--line:rgba(20,24,40,.10);--line-2:rgba(20,24,40,.18);--nav-bg:rgba(243,242,239,.86)}
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:80px}
body{margin:0;background:var(--page);color:var(--text);font-family:var(--fb);line-height:1.65;text-wrap:pretty;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .3s,color .3s}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--fd);font-weight:600;letter-spacing:-.02em;text-wrap:balance;margin:0}
p{margin:0}img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.mono{font-family:var(--fm);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--fm);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pink)}

.wm{display:inline-flex;align-items:center;gap:0;font-family:var(--fd);font-weight:700;font-size:1.2rem;letter-spacing:-.02em}
.wm img{width:26px;height:26px;margin-right:.5rem}
.wm .oo{color:var(--pink)}

.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--fd);font-weight:600;font-size:.95rem;
  line-height:1;padding:.85rem 1.3rem;border-radius:11px;border:1px solid transparent;cursor:pointer;
  transition:transform .12s ease,box-shadow .2s ease,background .2s ease,filter .2s}
.btn:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.btn-pink{background:var(--pink);color:var(--white);box-shadow:0 12px 34px -14px var(--pink-glow)}
.btn-pink:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 18px 42px -14px var(--pink-glow)}
.btn-ghost{background:transparent;border-color:var(--line-2);color:var(--text)}
.btn-ghost:hover{border-color:var(--pink);color:var(--pink)}
.btn-sm{padding:.6rem .95rem;font-size:.85rem}

/* ---------- nav (always visible on subpages — no scroll reveal) ---------- */
.topnav{position:sticky;top:0;z-index:60;background:var(--nav-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topnav-in{max-width:var(--maxw);width:100%;margin:0 auto;min-height:60px;display:flex;align-items:center;gap:22px;padding:0 24px}
.topnav .links{display:flex;gap:20px;margin-left:6px}
.topnav .links a{font-size:.88rem;color:var(--muted);transition:color .15s}
.topnav .links a:hover,.topnav .links a[aria-current="page"]{color:var(--text)}
.topnav .right{margin-left:auto;display:flex;align-items:center;gap:12px}
@media(max-width:820px){.topnav .links{display:none}.topnav-in{gap:12px;padding:0 20px}}

.tgl{width:38px;height:38px;border-radius:10px;border:1px solid var(--line-2);background:transparent;color:var(--text);
  display:grid;place-items:center;cursor:pointer;transition:border-color .15s,color .15s;flex:none}
.tgl:hover{border-color:var(--pink);color:var(--pink)}
.tgl svg{width:18px;height:18px}
.tgl .moon{display:none}
:root[data-theme="light"] .tgl .sun{display:none}
:root[data-theme="light"] .tgl .moon{display:block}
@media(prefers-color-scheme:light){:root:not([data-theme]) .tgl .sun{display:none}:root:not([data-theme]) .tgl .moon{display:block}}

.lang{font-family:var(--fm);font-size:.72rem;color:var(--text);border:1px solid var(--line-2);
  border-radius:999px;padding:.4rem .7rem;white-space:nowrap;flex:none}
.lang a{color:inherit;opacity:.5;padding:0 .2rem;transition:opacity .15s,color .15s}
.lang a:hover{opacity:.85}
.lang a.on{opacity:1;color:var(--pink);font-weight:700}
.lang i{opacity:.35;font-style:normal}
@media(max-width:560px){.topnav .btn-pink{display:none}}

/* ---------- page header ---------- */
.phead{padding:70px 0 34px;border-bottom:1px solid var(--line);background:var(--raised)}
.phead h1{font-size:clamp(2.1rem,5vw,3.2rem);line-height:1.08;margin:.6rem 0 0}
.phead .sub{color:var(--muted);font-size:1.08rem;margin-top:1rem;max-width:62ch}
.phead .meta{margin-top:1.4rem;font-family:var(--fm);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
@media(max-width:820px){.phead{padding:48px 0 28px}}

/* ---------- body layout: prose + optional sticky TOC ---------- */
.pbody{padding:56px 0 90px}
/* minmax(0,...) — NOT 1fr — or the table's min-width blows the column out past
   the viewport on mobile (body's overflow-x:hidden then silently clips the text). */
.pgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:52px}
.pgrid.has-toc{grid-template-columns:minmax(0,1fr) 220px}
@media(max-width:980px){.pgrid.has-toc{grid-template-columns:minmax(0,1fr)}.toc{display:none}}
@media(max-width:820px){.pbody{padding:40px 0 64px}}

.toc{position:sticky;top:88px;align-self:start;max-height:calc(100vh - 120px);overflow-y:auto}
.toc h3{font-family:var(--fm);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 12px}
.toc a{display:block;font-size:.85rem;color:var(--muted);padding:5px 0 5px 12px;border-left:2px solid var(--line);line-height:1.4;transition:color .15s,border-color .15s}
.toc a:hover{color:var(--pink);border-left-color:var(--pink)}

/* ---------- prose ---------- */
.prose{min-width:0;font-size:1.02rem}
/* Cap the TEXT at a readable measure, but let cards and tables use the whole
   column — so the page header, the body and the footer all align on the same
   left edge instead of the body sitting in a narrower container. */
.prose>p,.prose>ul,.prose>ol,.prose>h2,.prose>h3,.prose>blockquote,.prose>.note{max-width:74ch}
.prose>*+*{margin-top:1.15rem}
.prose h2{font-size:1.55rem;margin-top:3.2rem;padding-top:.2rem;scroll-margin-top:80px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.12rem;margin-top:2.1rem;color:var(--text);scroll-margin-top:80px}
.prose p,.prose li{color:var(--muted)}
.prose strong{color:var(--text);font-weight:700}
.prose ul,.prose ol{margin-left:0;padding-left:1.25rem}
.prose li+li{margin-top:.45rem}
.prose li::marker{color:var(--pink)}
.prose a:not(.btn){color:var(--pink);border-bottom:1px solid var(--pink-line);transition:border-color .15s}
.prose a:not(.btn):hover{border-bottom-color:var(--pink)}
.prose code{font-family:var(--fm);font-size:.88em;background:var(--subtle);border:1px solid var(--line);border-radius:6px;padding:.12em .38em;color:var(--text)}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.6rem 0}
.prose blockquote{margin:1.6rem 0;padding:1rem 1.2rem;background:var(--pink-soft);border-left:3px solid var(--pink);border-radius:0 10px 10px 0}
.prose blockquote p{color:var(--text);font-size:.95rem}

/* tables (used heavily by the legal pages) */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--raised)}
.prose table{border-collapse:collapse;width:100%;font-size:.92rem;min-width:520px}
.prose th,.prose td{text-align:left;padding:.8rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
.prose thead th{font-family:var(--fm);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);background:var(--subtle);white-space:nowrap}
.prose tbody tr:last-child td{border-bottom:0}
.prose td{color:var(--muted)}
/* key/value table (no header row): fits any width, first column reads as a label */
.prose table.kv{min-width:0}
.prose table.kv td:first-child{color:var(--text);font-weight:700;white-space:nowrap}
/* on a phone the label may wrap — better than making a 2-column table scroll */
@media(max-width:560px){.prose table.kv td:first-child{white-space:normal}}

/* callout: the honest "this is what it is" note */
.note{display:flex;gap:.9rem;padding:1rem 1.15rem;border:1px solid var(--line-2);border-radius:12px;background:var(--raised);
  color:var(--muted);font-size:.92rem;line-height:1.6}
.note b{color:var(--text)}
.note .ic{color:var(--pink);flex:none;font-size:1rem;line-height:1.5}

/* ---------- roadmap timeline ---------- */
.rmap{display:grid;gap:18px;margin-top:2rem}
.rcard{border:1px solid var(--line);border-radius:14px;background:var(--raised);padding:20px 22px;position:relative;overflow:hidden}
.rcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line-2)}
.rcard.now::before{background:var(--ok)}
.rcard.next::before{background:var(--pink)}
.rcard.later::before{background:var(--line-2)}
.rcard .rtag{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--fm);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);margin-bottom:.6rem}
.rcard.now .rtag{color:var(--ok)}
.rcard.next .rtag{color:var(--pink)}
.rcard h3{font-size:1.05rem;margin-bottom:.5rem}
.rcard ul{margin:.7rem 0 0;padding-left:1.15rem}
.rcard li{color:var(--muted);font-size:.94rem}
.rcard li+li{margin-top:.4rem}
.rcard li::marker{color:var(--pink)}

/* ---------- about: value cards ---------- */
.vals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:2rem}
@media(max-width:700px){.vals{grid-template-columns:minmax(0,1fr)}}
.val{border:1px solid var(--line);border-radius:14px;background:var(--raised);padding:20px}
.val h3{font-size:1rem;margin-bottom:.5rem}
.val p{color:var(--muted);font-size:.92rem}

/* ---------- article byline: a machine wrote this, and we say so ---------- */
.byline{display:flex;gap:.7rem;align-items:flex-start;margin-top:1.4rem;max-width:76ch;
  color:var(--muted);font-size:.88rem;line-height:1.6}
.byline .bot{flex:none;font-family:var(--fm);font-size:.62rem;font-weight:700;letter-spacing:.1em;
  border:1px solid var(--pink-line);color:var(--pink);border-radius:5px;padding:.15rem .35rem;
  margin-top:.15rem}

/* ---------- blog index ---------- */
.plist{display:grid;gap:16px}
.pcard{border:1px solid var(--line);border-radius:14px;background:var(--raised);transition:border-color .18s,transform .18s}
.pcard:hover{border-color:var(--pink-line);transform:translateY(-2px)}
.pcard a{display:block;padding:24px 26px}
.pcard h2{font-size:1.35rem;margin:.5rem 0 .6rem;max-width:38ch}
.pcard p{color:var(--muted);font-size:.96rem;max-width:70ch}
.pmeta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-family:var(--fm);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.ptags{display:flex;gap:6px;flex-wrap:wrap}
.ptags span{border:1px solid var(--line-2);border-radius:999px;padding:.15rem .55rem;color:var(--muted);letter-spacing:.06em}
.plink{display:inline-block;margin-top:1rem;color:var(--pink);font-weight:700;font-size:.9rem}
@media(max-width:820px){.pcard a{padding:20px}.pcard h2{font-size:1.15rem}}

/* ---------- article sources (the anti-invention receipt) ---------- */
.sources{margin-top:3.4rem;padding-top:1.6rem;border-top:1px solid var(--line-2)}
.sources h2{font-size:1.15rem;margin:0 0 .6rem}
.sources .grounded{color:var(--muted);font-size:.92rem;max-width:74ch;margin-bottom:1rem}
.sources ol{padding-left:1.25rem;margin:0}
.sources li{color:var(--muted);font-size:.9rem;word-break:break-word}
.sources li+li{margin-top:.4rem}
.sources li::marker{color:var(--pink)}
.sources a{color:var(--pink);border-bottom:1px solid var(--pink-line)}


/* ============================================================================
   THE ARTICLE PAGE — laid out to convert, in the order the sales manual argues for.
   Its most repeated idea (6 of 8 sources): neutralise the objections BEFORE you name
   the price. Almost every company blog does the reverse — a priced button dropped
   mid-article, asking for the sale while the reader still has three doubts. So the
   price appears exactly once, at the end, after those doubts are answered.
   ========================================================================== */

/* the short version — for the reader who will not read (and for the machines that quote us) */
.tldr{border:1px solid var(--line-2);border-left:3px solid var(--pink);border-radius:0 14px 14px 0;
  background:var(--raised);padding:20px 24px;margin:0 0 2.4rem;max-width:74ch}
.tldr h2{font-size:.72rem!important;font-family:var(--fm);letter-spacing:.14em;text-transform:uppercase;
  color:var(--pink);margin:0 0 .7rem!important;padding:0!important}
.tldr ul{margin:0;padding-left:1.15rem}
.tldr li{color:var(--text);font-size:.97rem;line-height:1.6}
.tldr li+li{margin-top:.5rem}
.tldr li::marker{color:var(--pink)}

/* the quiet mid-article ask. No price. One line. It is a door, not a salesman. */
.softcta{margin:2.6rem 0;padding:14px 18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  max-width:74ch}
.softcta p{color:var(--muted);font-size:.94rem}
.softcta a{color:var(--pink);font-weight:700;white-space:nowrap}
.softcta a:hover{text-decoration:underline}

/* the objections — answered before a single price is mentioned */
.convert{margin-top:3.6rem;padding-top:2.2rem;border-top:1px solid var(--line-2)}
.convert>h2{font-size:1.5rem;margin:0 0 1.4rem}
.objs{display:grid;gap:14px;margin-bottom:2.2rem}
.obj{border:1px solid var(--line);border-radius:13px;background:var(--raised);padding:18px 20px}
.obj h3{font-size:1rem;margin:0 0 .5rem;color:var(--text)}
.obj p{color:var(--muted);font-size:.94rem;line-height:1.65;margin:0}
@media(min-width:760px){.objs{grid-template-columns:repeat(3,1fr)}}

/* the offer. It appears once, and only here. */
.offer{border:1px solid var(--pink-line);border-radius:16px;background:var(--raised);padding:28px 30px;
  box-shadow:0 40px 90px -50px var(--pink-glow)}
.offer h3{font-size:1.35rem;margin:0 0 .6rem;max-width:26ch}
.offer>p{color:var(--muted);font-size:.96rem;max-width:62ch;margin:0 0 1.2rem}
.offer ul{list-style:none;padding:0;margin:0 0 1.6rem;display:grid;gap:10px}
.offer li{position:relative;padding-left:18px;color:var(--muted);font-size:.94rem;line-height:1.6}
.offer li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;
  background:var(--pink)}
.offer li b{color:var(--text)}
@media(max-width:820px){.offer{padding:22px}}

/* read next — a reader who stays is a reader who comes back */
.next{margin-top:3.2rem;padding-top:1.8rem;border-top:1px solid var(--line)}
.next h2{font-size:1.1rem;margin:0 0 1rem}
.nextgrid{display:grid;gap:12px}
@media(min-width:760px){.nextgrid{grid-template-columns:1fr 1fr}}
.nextgrid a{display:block;border:1px solid var(--line);border-radius:12px;background:var(--raised);
  padding:16px 18px;transition:border-color .18s,transform .18s}
.nextgrid a:hover{border-color:var(--pink-line);transform:translateY(-2px)}
.nextgrid span{display:block;font-family:var(--fm);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin-bottom:.4rem}
.nextgrid b{font-family:var(--fd);font-weight:600;font-size:1rem;line-height:1.35;color:var(--text)}

/* ---------- final CTA strip ---------- */
.cta-strip{border-top:1px solid var(--line);background:var(--raised)}
.cta-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:44px 0}
.cta-in h2{font-size:1.5rem}
.cta-in p{color:var(--muted);font-size:.95rem;margin-top:.5rem}
@media(max-width:820px){.cta-in{flex-direction:column;align-items:flex-start;padding:36px 0}}

/* ---------- footer (identical to index.html) ---------- */
footer{border-top:1px solid var(--line);padding:54px 0 40px;background:var(--page)}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
.foot h3{font-family:var(--fm);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 14px}
.foot a{display:block;color:var(--muted);font-size:.9rem;padding:4px 0}
.foot a:hover{color:var(--text)}
.foot .tag{color:var(--muted);font-size:.9rem;margin-top:12px;max-width:34ch;line-height:1.6}
.legal-line{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;margin-top:38px;padding-top:22px;
  border-top:1px solid var(--line);color:var(--faint);font-family:var(--fm);font-size:.72rem}
@media(max-width:820px){.foot{grid-template-columns:1fr 1fr}}