/* ── BOOST MINDSET FAMILY WEB SYSTEM · the hub ─────────────────────────────
   boostmindset.org is the ONE ink-dark property in the family: the five apps
   sit on paper, the house they belong to sits on ink, in both schemes. Same
   type, same spacing, same motion budget as the five app sites. Every colour
   pair here is >= 4.5:1; see WEB-BASELINE.md section 7 in the Parent Mindset
   repo for the proof table. */
:root{
  --paper:#0B0F19; --paper-soft:#131826; --ink:#F1EFE9; --dim:#8A8578;
  --line:rgba(138,133,120,.24);
  --mark:#E6E3DA;        /* the hub has no single app accent: the marks carry the colour */
  --coach:#FF8E72; --parent:#E07A4D; --reps:#B57EFF; --officials:#9DD9B4; --pickle:#38A8D8;
  --cta-bg:#F1EFE9; --cta-fg:#0B0F19;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ease:cubic-bezier(0.32,0.72,0,1);
  --breathe-ease:cubic-bezier(0.37,0,0.63,1);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;color-scheme:dark}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px;box-shadow:0 0 0 6px var(--paper)}
img,svg{max-width:100%}

.skip{position:absolute;left:-9999px;top:0;background:var(--paper);color:var(--ink);padding:14px 20px;z-index:200;border:2px solid var(--ink);border-radius:0 0 8px 0}
.skip:focus{left:0}

/* Consent banner for the first-party analytics in assets/analytics.js. Uses the
   hub tokens so it inherits paper/ink. Touch targets >= 44px per the family a11y
   bar; the entrance is skipped under reduced motion. */
.bm-consent{position:fixed;left:0;right:0;bottom:0;z-index:150;display:flex;flex-wrap:wrap;
  gap:14px 20px;align-items:center;justify-content:space-between;
  padding:16px clamp(16px,4vw,32px);background:var(--paper-soft);color:var(--ink);
  border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(0,0,0,.35)}
.bm-consent-copy{font-size:.9375rem;line-height:1.5;max-width:62ch;margin:0}
.bm-consent-actions{display:flex;gap:10px;flex-shrink:0}
.bm-consent button{min-height:44px;padding:0 18px;border-radius:8px;font:inherit;
  font-weight:600;cursor:pointer;border:1px solid var(--line)}
.bm-consent .bm-consent-no{background:transparent;color:var(--ink)}
.bm-consent .bm-consent-yes{background:var(--cta-bg);color:var(--cta-fg);border-color:var(--cta-bg)}
.bm-consent button:hover{opacity:.9}
@media (prefers-reduced-motion: no-preference){
  .bm-consent{animation:bm-consent-in .24s ease both}
  @keyframes bm-consent-in{from{transform:translateY(100%)}to{transform:none}}
}


.wrap{max-width:680px;margin:0 auto;padding:0 28px}
.wide{max-width:1000px;margin:0 auto;padding:0 28px}

nav[aria-label="Primary"]{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 28px;max-width:1080px;margin:0 auto;flex-wrap:wrap}
.nav-mark{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:1.0625rem;color:var(--ink);min-height:44px}
.nav-mark:hover{text-decoration:none}
nav[aria-label="Primary"] .links{display:flex;gap:4px;font-size:0.875rem}
nav[aria-label="Primary"] .links a{color:var(--dim);padding:12px 10px;min-height:44px;display:inline-flex;align-items:center}
nav[aria-label="Primary"] .links a:hover{color:var(--ink)}

.hero{padding:130px 28px 150px;text-align:center}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.5rem, 7vw, 4rem);line-height:1.08;letter-spacing:-0.02em;max-width:16ch;margin:0 auto}
.sub{color:var(--dim);font-size:1.1875rem;margin:28px auto 48px;max-width:40ch}
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:52px;background:var(--cta-bg);color:var(--cta-fg);border-radius:12px;padding:16px 32px;font-weight:600;font-size:1rem;transition:transform .24s var(--ease)}
.cta:hover{transform:translateY(-1px);text-decoration:none;color:var(--cta-fg)}

/* the constellation: five marks, breathing as one */
.constellation{display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap;margin:0 auto 64px;max-width:520px}
.constellation svg{border-radius:22.4%;animation:breathe 6s var(--breathe-ease) infinite}
.constellation a{display:inline-flex;border-radius:18px}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

section{padding:130px 0}
.kicker{display:block;font-size:0.75rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--dim);font-weight:600;margin-bottom:20px}
h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.75rem, 4.5vw, 2.5rem);line-height:1.15;letter-spacing:-0.01em;max-width:20ch}
h3{font-family:var(--serif);font-size:1.25rem;font-weight:600}

/* five app cards */
.apps{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-top:64px}
.app{flex:1 1 100%;max-width:100%;display:flex;gap:18px;align-items:flex-start;padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--paper-soft);transition:border-color .24s var(--ease)}
@media(min-width:640px){.app{flex:0 1 calc(50% - 10px);max-width:calc(50% - 10px)}}
@media(min-width:960px){.app{flex:0 1 calc(33.333% - 14px);max-width:calc(33.333% - 14px)}}
.app:hover{text-decoration:none;border-color:var(--dim)}
.app svg{border-radius:22.4%;flex:0 0 auto}
.app .who{display:block;font-size:0.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:600;margin-bottom:6px}
.app h3{margin-bottom:6px;color:var(--ink)}
.app p{color:var(--dim);font-size:0.875rem;line-height:1.5}

.proof{background:var(--paper-soft);text-align:center}
.proof blockquote{font-family:var(--serif);font-size:clamp(1.375rem, 3.5vw, 1.875rem);line-height:1.35;max-width:26ch;margin:0 auto;font-style:italic}
.proof cite{display:block;font-style:normal;font-size:0.875rem;color:var(--dim);margin-top:24px}

/* prose for the sub-pages */
.prose{padding:90px 0 40px}
.prose h1{text-align:left;max-width:22ch;font-size:clamp(2rem, 5vw, 2.875rem);margin:0 0 12px}
.prose h2{margin:44px 0 12px;max-width:30ch}
.prose h3{margin:28px 0 8px}
.prose p,.prose li{color:var(--dim);font-size:1rem;line-height:1.7}
.prose p{margin-bottom:16px}
.prose ul,.prose ol{margin:0 0 16px 22px}
.prose li{margin-bottom:8px}
.prose strong{color:var(--ink);font-weight:600}
.prose .lead{color:var(--ink);font-size:1.1875rem;line-height:1.6;margin-bottom:24px}
.prose p a,.prose li a,.legal a,.family-line a{text-decoration:underline}
.prose figure{margin:0 0 24px}
.prose img{border-radius:14px}

footer{border-top:1px solid var(--line);padding:80px 28px 60px;text-align:center}
.family{display:flex;justify-content:center;gap:12px;margin-bottom:32px;flex-wrap:wrap}
.family a{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px}
.family a:hover{text-decoration:none}
.family svg{border-radius:22.4%;opacity:.9;transition:opacity .24s var(--ease)}
.family a:hover svg{opacity:1}
.family-line{font-size:0.8125rem;color:var(--dim);margin-bottom:40px}
.legal{font-size:0.6875rem;color:var(--dim);line-height:2;max-width:70ch;margin:0 auto}
.legal a{color:var(--dim)}
.built{font-size:0.6875rem;letter-spacing:0.06em;color:var(--dim);margin-top:20px}

@media (max-width:719px){
  .hero{padding:120px 24px 140px}
  section{padding:120px 0}
  nav[aria-label="Primary"]{padding:18px 20px;flex-direction:column;align-items:flex-start;gap:4px}
  nav[aria-label="Primary"] .links{gap:0;margin-left:-10px}
  .constellation{gap:8px}
  .constellation svg{width:52px;height:52px}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .constellation svg{animation:none !important}
}

/* ── controls ──────────────────────────────────────────────────────────────
   The hub's HubSpot-wired forms and CTA buttons keep working exactly as they
   did; only their styling moves onto the system. Every control clears 44px. */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;
     padding:14px 28px;border-radius:12px;font-family:var(--sans);font-weight:600;font-size:1rem;
     background:var(--cta-bg);color:var(--cta-fg);border:0;cursor:pointer;
     transition:transform .24s var(--ease)}
.btn:hover{transform:translateY(-1px);text-decoration:none;color:var(--cta-fg)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{color:var(--ink);border-color:var(--dim)}
.btn-lg{min-height:56px;padding:16px 32px}
.btn-soon{background:transparent;color:var(--dim);border:1px dashed var(--line);cursor:default}
.btn-soon:hover{transform:none}

form{margin:24px 0}
/* bare submit buttons inside the HubSpot-wired forms */
button[type=submit]{display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  padding:14px 28px;border-radius:12px;border:0;background:var(--cta-bg);color:var(--cta-fg);
  font-family:var(--sans);font-weight:600;font-size:1rem;cursor:pointer;
  transition:transform .24s var(--ease)}
button[type=submit]:hover{transform:translateY(-1px)}
label{display:block;font-size:0.875rem;font-weight:600;color:var(--ink);margin-bottom:6px}
input,select,textarea{width:100%;min-height:52px;padding:14px 16px;border-radius:12px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:1rem;line-height:1.4}
textarea{min-height:140px;resize:vertical}
input:hover,select:hover,textarea:hover{border-color:var(--dim)}
input::placeholder,textarea::placeholder{color:var(--dim)}
.field,.form-row{margin-bottom:18px}

/* blog filter tabs */
.blog-tab{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;
  border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--dim);
  font-family:var(--sans);font-size:0.875rem;font-weight:600;cursor:pointer}
.blog-tab:hover{color:var(--ink)}
.blog-tab.active{border-color:var(--ink);color:var(--ink)}
.blog-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:32px 0}

/* cards used by blog + programs */
.card,.blog-card{display:block;padding:24px;border:1px solid var(--line);border-radius:16px;
  background:var(--paper-soft);margin-bottom:16px}
.blog-card:hover{text-decoration:none;border-color:var(--dim)}
.grid{display:grid;gap:20px;margin:24px 0}
@media(min-width:720px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:repeat(3,1fr)}}

/* ── legacy hooks from the pre-rebuild hub markup ──────────────────────────
   The sub-pages were authored against the retired stylesheet. These 33 classes
   and 6 custom properties were referenced but undefined, which left the
   editorial pages rendering full-bleed with no column. Mapped onto the system
   rather than rewritten, so every word of the existing copy is preserved. */
:root{
  --ink-0:#0B0F19; --ink-2:#131826; --line-soft:rgba(138,133,120,.14);
  --athlete:#B57EFF; --official:#9DD9B4; --boost-flat:#E6E3DA;
}
/* the missing reading column — this is the one that mattered */
.wrap-narrow{max-width:620px;margin:0 auto;padding:0 28px}

/* Comparison tables inside .prose. Wide content scrolls inside its own
   container so the page body never scrolls horizontally on a phone. */
.table-scroll{overflow-x:auto;margin:0 0 24px;-webkit-overflow-scrolling:touch}
.prose table{border-collapse:collapse;width:100%;min-width:520px;font-size:.9375rem}
.prose th,.prose td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{color:var(--ink);font-weight:600;white-space:nowrap}
.prose td{color:var(--dim);line-height:1.55}
.prose tbody tr:last-child td{border-bottom:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.section{padding:130px 0}
.center{text-align:center}
.eyebrow{display:block;font-size:0.75rem;letter-spacing:.14em;text-transform:uppercase;
         color:var(--dim);font-weight:600;margin-bottom:20px}
.eyebrow-num{color:var(--pickle);font-weight:600}
.fw-p{color:var(--dim);font-size:1.0625rem;line-height:1.65;margin-bottom:16px}
.quote{font-family:var(--serif);font-size:clamp(1.25rem, 3vw, 1.625rem);line-height:1.4;
       font-style:italic;color:var(--ink);margin:32px 0;padding-left:22px;
       border-left:2px solid var(--line);text-wrap:balance}
.nm{font-family:var(--serif);font-size:1.25rem;font-weight:600;color:var(--ink)}
.t-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--pickle);margin-right:8px}
.arrow{margin-left:6px}
.f-portrait{border-radius:16px;margin-bottom:28px;max-width:280px}

/* final CTA band */
.final{padding:120px 0;text-align:center;border-top:1px solid var(--line)}
.final-content{max-width:680px;margin:0 auto;padding:0 28px}
.final-buttons{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:32px}

/* FAQ disclosure list — was falling back to raw UA ▶ markers with no rhythm */
.faq-list{margin-top:56px}
.faq-item{border-bottom:1px solid var(--line);padding:4px 0}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;
                  justify-content:space-between;gap:20px;min-height:44px;padding:18px 0}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary h3{font-family:var(--serif);font-size:1.25rem;font-weight:600;margin:0;color:var(--ink)}
.faq-icon{flex:0 0 auto;width:14px;height:14px;margin-top:6px;position:relative}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;background:var(--dim);
  left:50%;top:50%;transform:translate(-50%,-50%)}
.faq-icon::before{width:14px;height:2px}
.faq-icon::after{width:2px;height:14px}
.faq-item[open] .faq-icon::after{display:none}
.faq-body{padding:0 0 22px}
.faq-body p{color:var(--dim);font-size:1.0625rem;line-height:1.65;margin-bottom:14px;max-width:62ch}

/* blog cards */
.blog-grid{display:grid;gap:22px;margin-top:48px}
@media(min-width:720px){.blog-grid{grid-template-columns:1fr 1fr}}
.blog-meta{font-size:0.8125rem;letter-spacing:.04em;color:var(--dim);margin-bottom:10px}
.blog-card h3{font-size:1.375rem;margin-bottom:10px;color:var(--ink)}
.blog-card p{font-size:1rem;color:var(--dim);margin-bottom:16px}
.blog-foot{display:flex;align-items:center;justify-content:space-between;gap:16px}
.blog-cta{display:inline-flex;align-items:center;min-height:44px;font-size:0.9375rem;font-weight:600;color:var(--ink)}
.is-feature{grid-column:1/-1}

/* HubSpot-wired forms (contact, programs, digest) — behaviour unchanged */
.bm-form{margin:28px 0}
.bm-form-card{padding:28px;border:1px solid var(--line);border-radius:16px;background:var(--paper-soft)}
.bm-form-intro{color:var(--dim);font-size:1.0625rem;margin-bottom:20px}
.bm-form-grid-2{display:grid;gap:16px}
@media(min-width:560px){.bm-form-grid-2{grid-template-columns:1fr 1fr}}
.bm-field{margin-bottom:16px}
.bm-form-inline{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.bm-form-note{font-size:0.8125rem;color:var(--dim);margin-top:12px}
.req{color:var(--pickle)}
.digest-band{padding:80px 0;border-top:1px solid var(--line);background:var(--paper-soft)}
.digest-band-inner{max-width:680px;margin:0 auto;padding:0 28px;text-align:center}

/* type laws, matched to the five app sites */
h1,h2,.quote,.proof blockquote{text-wrap:balance}
.sub,.prose .lead{text-wrap:pretty}
.prose h2{font-size:clamp(1.375rem, 2.4vw, 1.875rem);line-height:1.25}
.prose h3{font-size:1.1875rem}
.prose p,.prose li{font-size:1.0625rem;line-height:1.65}
.prose .wrap{max-width:620px}
.legal{font-size:0.8125rem;line-height:1.7;max-width:62ch}
.legal [data-word-exempt]{display:inline-block;text-align:left;margin-top:10px}
.built{font-size:0.75rem;letter-spacing:0}
/* align measure caps with the app sites (was 16ch/40ch/20ch/26ch) */
h1{max-width:14ch}
.sub{max-width:38ch}
h2{max-width:18ch}
.proof blockquote{max-width:24ch}
/* hover consistency: everything that changes colour eases at the same rate */
.blog-card,.btn-ghost,.blog-tab,nav[aria-label="Primary"] .links a,input,select,textarea{transition:border-color .24s var(--ease),color .24s var(--ease)}
@media (max-width:719px){
  h1,.prose h1,h2{max-width:none}
  .hero + section{padding-top:64px}
}
.prose th,.prose td{overflow-wrap:anywhere}
.prose td a{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:719px){.prose table{display:block;overflow-x:auto}}