/* ============================================================
   Braindock design system
   One stylesheet for every page on braindock.co.

   Set 2026-09-06. Palette is Alex's call: platinum white on pitch
   black, no hue anywhere, so contrast and weight carry the accent
   role instead of colour. Reference read: clarifyyourbrain.com
   (warmth + typographic rhythm) and sellthemethod.com (window
   framing + stat structure), with Apple/Tesla restraint on top.
   Full spec: Brain Product/references/site-design-teardown.md

   Zero dependencies, system fonts. Do not add a build step.
   ============================================================ */

:root{
  --black:#000000;
  --near:#08080A;
  --panel:#0E0E11;
  --line:#1E1E22;
  --line2:#2A2A30;

  /* 2026-09-07, Alex's call: on the black sections the card outlines were
     drawn in --line (#1E1E22), which is nearly invisible against #000 - the
     cards read as floating text with no edge. Card borders on dark now use
     their own token so they can be dialled without touching the hairline
     dividers (.item, .faq details, footer), which should stay quiet.
     Turn the cards up or down here and nowhere else. */
  --card-line:rgba(255,255,255,.85);
  --card-line-hi:#FFFFFF;
  --platinum:#FFFFFF;
  --mute:rgba(255,255,255,.82);
  --faint:rgba(255,255,255,.68);

  --band:#E5E4E2;
  --band-ink:#0A0A0C;
  --band-mute:rgba(10,10,12,.72);
  --band-faint:rgba(10,10,12,.56);
  --band-line:rgba(10,10,12,.12);

  --ok:#7FD1A8;
  --no:rgba(229,228,226,.30);

  --serif:Georgia,'Iowan Old Style','Times New Roman',Times,serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;

  --grid-dark:rgba(229,228,226,.085);
  --grid-light:rgba(10,10,12,.055);
  --grid-size:56px;

  --maxw:860px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--black);color:var(--platinum);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.narrow{max-width:660px}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;line-height:1.08}
h1{font-size:clamp(38px,6.2vw,64px);max-width:16ch}
h2{font-size:clamp(28px,4.4vw,44px)}
h3{font-size:21px;line-height:1.25}
em{font-style:italic}
.lede{font-size:clamp(16px,2vw,18px);color:var(--mute);max-width:58ch;margin-top:26px}
.band .lede{color:var(--band-mute)}
p+p{margin-top:14px}

.label{
  font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--faint);display:block;margin-bottom:26px;
}
.band .label{color:var(--band-faint)}

/* ---------- sections ---------- */
section{padding:clamp(80px,11vw,150px) 0}
.band{background:var(--band);color:var(--band-ink)}
.band h1,.band h2,.band h3{color:var(--band-ink)}
.center{text-align:center}
.center .lede,.center .label,.center h1{margin-left:auto;margin-right:auto}


/* ---------- grid ground + content sheet ----------
   The full lattice is back. The earlier problem was not the grid, it was
   that text sat directly on it, so rules cut through paragraphs. Fix is
   a sheet: each section's content sits on an opaque panel floating over
   the grid, so the texture reads in the margins and between sections and
   never behind a line of text. */
body{
  background-color:var(--black);
  background-image:
    linear-gradient(var(--grid-dark) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-dark) 1px,transparent 1px);
  background-size:var(--grid-size) var(--grid-size);
  background-position:center top;
  background-attachment:fixed;
}
.band{
  background-color:transparent;
  background-image:
    linear-gradient(var(--grid-light) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-light) 1px,transparent 1px);
  background-size:var(--grid-size) var(--grid-size);
  background-position:center top;
  background-attachment:fixed;
}
/* the sheet the words live on */
section > .wrap{
  background:var(--black);
  border:1px solid var(--card-line);
  border-radius:18px;
  padding:clamp(34px,5vw,62px) clamp(24px,4vw,54px);
  box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.band > .wrap{
  background:var(--band);
  border-color:var(--band-line);
  box-shadow:0 30px 70px rgba(10,10,12,.10);
}
/* The platinum band is now a tinted ground the sheet sits on, rather than
   a solid block, so its grid stays visible around the edges. */
.band{background-color:#DCDBD8}

@media(max-width:640px){
  section > .wrap{border-radius:14px;padding:30px 20px}
}

/* ---------- nav ---------- */
header{
  position:sticky;top:0;z-index:60;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease;
}
header.stuck{background:rgba(0,0,0,.82);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
nav{max-width:var(--maxw);margin:0 auto;padding:15px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{font-family:var(--serif);font-size:19px;letter-spacing:-.01em;text-decoration:none}
.navlinks{display:flex;gap:24px}
.navlinks a{font-size:14px;color:var(--mute);text-decoration:none;transition:color .2s ease}
.navlinks a:hover{color:var(--platinum)}
@media(max-width:700px){.navlinks{display:none}}
/* Phones lose .navlinks, so the free guide keeps one visible link (2026-09-28:
   before this, a phone visitor first met it 14,315px down the home page). */
.navmobile{display:none;font-size:14px;color:var(--platinum);text-decoration:underline;text-underline-offset:3px;margin-left:auto}
@media(max-width:700px){.navmobile{display:inline}}

/* ---------- buttons ---------- */
.pill{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--platinum);color:var(--black);
  border:1px solid var(--platinum);border-radius:999px;
  font-size:15px;font-weight:600;padding:15px 30px;
  text-decoration:none;cursor:pointer;
  transition:transform .2s ease,opacity .2s ease;
}
.pill:hover{opacity:.9;transform:translateY(-2px)}
.pill:active{transform:translateY(0)}
.pill.sm{padding:10px 20px;font-size:14px}
.band .pill{background:var(--black);color:var(--platinum);border-color:var(--black)}
.ghost{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--mute);font-size:15px;text-decoration:none;padding:15px 2px;
  transition:color .2s ease;
}
.ghost:hover{color:var(--platinum)}
.band .ghost{color:var(--band-mute)}
.band .ghost:hover{color:var(--band-ink)}
.cta-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:38px}
.center .cta-row{justify-content:center}
.fine{font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-top:22px;line-height:1.9}
.band .fine{color:var(--band-faint)}

/* ---------- proof strip ---------- */
.proofstrip{display:flex;gap:11px;align-items:center;flex-wrap:wrap;margin-top:30px;
  font-family:var(--mono);font-size:13.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.proofstrip b{color:var(--platinum);font-weight:700}
.dot{width:3px;height:3px;border-radius:50%;background:var(--line2);flex:none}

/* ---------- window frame ---------- */
.window{
  margin-top:clamp(48px,7vw,84px);
  border:1px solid var(--card-line);border-radius:12px;overflow:hidden;
  background:var(--near);box-shadow:0 40px 90px rgba(0,0,0,.7);
}
.band .window{border-color:rgba(10,10,12,.16);box-shadow:0 40px 90px rgba(0,0,0,.16)}
.chrome{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--panel)}
.band .chrome{background:rgba(10,10,12,.05);border-bottom-color:var(--band-line)}
.chrome i{width:10px;height:10px;border-radius:50%;background:var(--line2);display:block;flex:none}
.band .chrome i{background:rgba(10,10,12,.18)}
.chrome span{flex:1;text-align:center;font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.band .chrome span{color:var(--band-faint)}
.cap{font-family:var(--serif);font-style:italic;font-size:16.5px;color:var(--faint);text-align:center;margin-top:18px;max-width:54ch;margin-left:auto;margin-right:auto}
.band .cap{color:var(--band-faint)}

/* ---------- stat quad ---------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(30px,5vw,54px);margin-top:clamp(50px,7vw,76px);text-align:left}
.stat .n{font-family:var(--serif);font-size:clamp(34px,5vw,50px);line-height:1;letter-spacing:-.02em}
.stat .k{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:11px;display:block;line-height:1.7}
.band .stat .k{color:var(--band-faint)}

/* ---------- numbered list ---------- */
.items{margin-top:clamp(44px,6vw,70px);border-top:1px solid var(--line);text-align:left}
.band .items{border-top-color:var(--band-line)}
.item{padding:28px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:42px 1fr;gap:20px;align-items:start}
.band .item{border-bottom-color:var(--band-line)}
.item .num{font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--faint);padding-top:6px}
.band .item .num{color:var(--band-faint)}
.item h3{margin-bottom:7px}
.item p{font-size:16px;color:var(--mute);max-width:58ch}
.band .item p{color:var(--band-mute)}

/* ---------- two-column verdict (get it / skip it) ---------- */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:clamp(44px,6vw,70px);text-align:left}
.col{border:1px solid var(--card-line);border-radius:12px;padding:26px;transition:transform .2s ease,border-color .2s ease}
.col:hover{transform:translateY(-2px);border-color:var(--card-line-hi)}
.band .col{border-color:var(--band-line)}
.col h3{margin-bottom:14px;font-size:19px}
.col li{list-style:none;font-size:16px;color:var(--mute);padding-left:24px;position:relative;margin-bottom:11px}
.band .col li{color:var(--band-mute)}
.col li::before{position:absolute;left:0;top:0;font-family:var(--mono);font-size:13px}
.col.yes li::before{content:'\2713';color:var(--ok)}
.col.no li::before{content:'\2715';color:var(--no)}
@media(max-width:640px){.cols{grid-template-columns:1fr}}

/* ---------- ask card ---------- */
.ask{margin-top:clamp(44px,6vw,68px);text-align:left}
.q{background:var(--panel);border:1px solid var(--card-line);border-radius:10px;padding:17px 19px;font-size:16px;color:var(--mute)}
.band .q{background:rgba(10,10,12,.04);border-color:var(--band-line);color:var(--band-mute)}
.a{background:var(--near);border:1px solid var(--card-line);border-radius:10px;padding:23px;margin-top:11px;font-size:16px}
.band .a{background:rgba(10,10,12,.03);border-color:var(--band-line)}
.a .who{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:15px}
.a p{color:var(--mute)}
.band .a p{color:var(--band-mute)}
.a b{color:var(--platinum);font-weight:600}
.band .a b{color:var(--band-ink)}

/* ---------- price ---------- */
.price{font-family:var(--serif);font-size:clamp(52px,9vw,82px);line-height:1;letter-spacing:-.03em;margin-top:30px}
.price sup{font-size:.4em;vertical-align:super;letter-spacing:0}
.price .ccy{font-family:var(--mono);font-size:.24em;font-weight:600;letter-spacing:.14em;
  vertical-align:middle;color:var(--band-faint);margin-left:.1em}
.was{font-family:var(--serif);font-size:.42em;vertical-align:middle;color:var(--band-faint);text-decoration:line-through;margin-right:14px;letter-spacing:-.01em}
.band .was{color:var(--band-faint)}
.once{font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--band-faint);margin-top:15px;display:block;line-height:1.9}
.includes{margin-top:34px;text-align:left;max-width:520px;margin-left:auto;margin-right:auto}
.includes li{list-style:none;font-size:16px;color:var(--band-mute);padding-left:24px;position:relative;margin-bottom:11px}
.includes li::before{content:'\2713';position:absolute;left:0;color:var(--band-ink);font-family:var(--mono);font-size:13px}

/* ---------- honest box ---------- */
.honest{margin-top:clamp(48px,6vw,74px);border:1px solid var(--card-line);border-radius:12px;padding:27px;font-size:16px;color:var(--mute);max-width:62ch}
.band .honest{border-color:var(--band-line);color:var(--band-mute)}
.honest b{color:var(--platinum)}
.band .honest b{color:var(--band-ink)}
.center .honest{margin-left:auto;margin-right:auto;text-align:left}

/* ---------- faq ---------- */
.faq{margin-top:clamp(44px,6vw,68px);text-align:left;border-top:1px solid var(--line)}
.band .faq{border-top-color:var(--band-line)}
.faq details{border-bottom:1px solid var(--line);padding:20px 0}
.band .faq details{border-bottom-color:var(--band-line)}
.faq summary{font-size:16px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;transition:opacity .2s ease}
.faq summary:hover{opacity:.75}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--faint);font-family:var(--mono);flex:none}
.band .faq summary::after{color:var(--band-faint)}
.faq details[open] summary::after{content:'\2212'}
.faq .body{overflow:hidden}
.faq p{margin-top:13px;font-size:16px;color:var(--mute);max-width:62ch}
.band .faq p{color:var(--band-mute)}

/* ---------- steps ---------- */
.steps{margin-top:clamp(44px,6vw,68px);display:grid;gap:16px;text-align:left}
.step{border:1px solid var(--card-line);border-radius:12px;padding:22px 24px;display:grid;grid-template-columns:40px 1fr;gap:18px;align-items:start;transition:transform .2s ease,border-color .2s ease}
.step:hover{transform:translateY(-2px);border-color:var(--card-line-hi)}
.band .step{border-color:var(--band-line)}
.step .num{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--faint);padding-top:4px}
.band .step .num{color:var(--band-faint)}
.step h3{font-size:18px;margin-bottom:6px}
.step p{font-size:16px;color:var(--mute)}
.band .step p{color:var(--band-mute)}

/* ---------- hero video ---------- */
.hero-video{
  position:relative;margin-top:clamp(48px,7vw,84px);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--near);box-shadow:0 40px 90px rgba(0,0,0,.7);
  /* The source is a phone clip with rotation metadata, so it renders
     portrait. Constrain to a landscape band and let the browser crop to
     the graph rather than re-encoding: keeps the desk, the second screen
     and any legible note text out of frame. */
  aspect-ratio:16/10;
}
.hero-video video,.hero-video img{width:100%;height:100%;object-fit:cover;object-position:50% 34%;display:block}
@media(max-width:640px){.hero-video{aspect-ratio:4/3}}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:40px 0 56px}
.band+footer{border-top-color:transparent}
footer p{font-size:13px;color:var(--faint);max-width:62ch}
footer a{color:var(--mute)}

/* ---------- scroll reveal ----------
   Opt-IN, gated on the .js class that braindock.js sets on <html> as its
   first action. Content is visible by default, so if the script fails to
   load, errors, or is blocked, the page still reads normally. Hiding by
   default and revealing with JS would make a broken script mean a blank
   page, which is not a trade worth making on a page that takes money. */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

@media(max-width:560px){
  .stats{grid-template-columns:1fr;gap:32px}
  .cta-row .pill{width:100%;justify-content:center}
  .item{grid-template-columns:1fr;gap:6px}
  .item .num{padding-top:0}
}

/* Motion off for anyone who asks for it. clarifyyourbrain does this too. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* ---------- two-tier pricing ----------
   Added 2026-09-07 with the $3.69 Starter Brain. The tripwire is deliberately
   the quieter card: same type, no accent, smaller CTA. It exists to remove the
   reason to leave without paying anything, not to out-shout the $19.95 kit. */
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:clamp(40px,5vw,60px);text-align:left}
/* The whole card is the click target. Implemented as a "stretched link": the
   card's own CTA gets a ::after that covers the card, so a click anywhere
   inside the outline follows that button. One real <a> per card - no nested
   anchors (invalid HTML) and no JS click handler. The button keeps its own
   hover lift because hovering the card IS hovering the anchor.
   Border width is a constant 1.5px in both states so the hover cannot shift
   layout; only the colour changes. */
.tier{position:relative;border:1.5px solid var(--band-line);border-radius:14px;
  padding:30px 28px;display:flex;flex-direction:column;cursor:pointer;
  transition:border-color .2s ease,box-shadow .2s ease}
.tier-main{border-color:var(--band-ink)}
.tier:hover{border-color:var(--band-ink);box-shadow:0 10px 30px rgba(10,10,12,.10)}
.tier .pill::after{content:'';position:absolute;inset:0;border-radius:14px;z-index:1}
.tier-name{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--band-faint);display:block}
.tier .price{font-size:clamp(38px,5.5vw,52px);margin-top:14px}
.tier .once{margin-top:10px;font-size:13px}
.tier .includes{margin-top:24px;margin-left:0;margin-right:0;max-width:none;flex:1}
.tier .includes li{font-size:15px;margin-bottom:9px}
.tier .pill,.tier .pill.sm{margin-top:26px;align-self:flex-start}
@media(max-width:700px){.tiers{grid-template-columns:1fr}}
.tier .why{font-size:14.5px;color:var(--band-mute);margin-top:14px;font-style:italic;max-width:34ch}
.tier .was{font-size:.62em;margin-right:16px;opacity:.75}