/* ============================================================================
   Retirement Made Clear — shared design system
   Growth engine GE-8 / GE-9. Brand mini-kit per production spec (04) §1.3–1.4.
   Deliberately NOT the TFSC firm brand kit: warmer, plainer, "educational" look.
   Tokens locked; do not invent palette/type outside this file.
   ============================================================================ */

:root{
  /* §1.3 palette — evolved from the prototype, lighter and airier than Blueprint */
  --paper:#FAF9F5;   /* backgrounds — warmer than white, cleaner than cream */
  --ink:#28313B;     /* text — slate-ink, never pure black */
  --clear:#3272A8;   /* the brand color — sky-adjacent, trustworthy, NOT navy */
  --deep:#255A86;    /* hover / emphasis */
  --line:#E7E3DA;    /* rules, borders, the grid */
  --amber:#C8873A;   /* ONE use: the score and moments of insight. Never decorative */
  --ink-soft:#4A545E;/* secondary text */
  --white:#FFFFFF;

  /* §1.4 type — system serif now, Source Serif 4 as webfont later; Inter is banned */
  --f-display:Charter,'Iowan Old Style','Palatino Linotype',Georgia,'Times New Roman',serif;
  --f-body:system-ui,-apple-system,'Segoe UI',Roboto,'Public Sans',Helvetica,Arial,sans-serif;

  --maxw:680px;      /* corridor / reading measure */
  --maxw-wide:1000px;/* hubs (tools, learn, home sections) */
}

*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important; scroll-behavior:auto !important;}}

html{scroll-behavior:smooth;}
body{
  font-family:var(--f-body); color:var(--ink); background:var(--paper);
  line-height:1.6; -webkit-font-smoothing:antialiased; font-weight:400;
  min-height:100vh; display:flex; flex-direction:column;
  /* §1.4 texture: the faint 56px "graph paper under the conversation" grid */
  background-image:
    linear-gradient(to right, rgba(39,49,59,0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(39,49,59,0.028) 1px, transparent 1px);
  background-size:56px 56px;
}

/* ---- Typography ---- */
h1,h2,h3{font-family:var(--f-display); font-weight:600; line-height:1.15; letter-spacing:0.005em;}
h1{font-size:clamp(2rem,4.6vw,2.6rem); margin:0 0 1rem;}
h2{font-size:clamp(1.5rem,3.2vw,1.9rem); margin:0 0 0.9rem;}
h3{font-size:1.25rem; font-weight:500; margin:0 0 0.5rem;}
p{margin:0 0 1rem;}
a{color:var(--deep);}
strong{font-weight:600;}
.serif{font-family:var(--f-display);}

.eyebrow{
  font-family:var(--f-body); font-size:0.7rem; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--clear);
  margin:0 0 0.85rem;
}
.lede{font-size:1.125rem; color:var(--ink-soft);}
.muted{color:var(--ink-soft);}

/* ---- Header / wordmark (§1.1) ---- */
header.site{
  border-bottom:1px solid var(--line); background:rgba(250,249,245,0.9);
  backdrop-filter:saturate(1.1) blur(2px);
  padding:1.1rem 1.5rem; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; position:relative;
}
.wordmark{
  font-family:var(--f-body); font-weight:500; font-size:1.15rem; letter-spacing:0.005em;
  color:var(--ink); text-decoration:none; white-space:nowrap; display:inline-flex; gap:0.32em; align-items:baseline;
}
.wordmark .mc{font-family:var(--f-display); font-weight:600; color:var(--clear);}
.wordmark:hover .mc{color:var(--deep);}
/* stacked variant for avatars/hero */
.wordmark.stacked{flex-direction:column; gap:0; align-items:flex-start; line-height:1.05;}

nav.site-nav{display:flex; gap:1.4rem; align-items:center; font-size:0.95rem;}
nav.site-nav a{color:var(--ink); text-decoration:none;}
nav.site-nav a:hover{color:var(--clear);}
nav.site-nav a.nav-cta{
  color:var(--white); background:var(--clear); padding:0.5rem 1rem; border-radius:5px; font-weight:600;
}
nav.site-nav a.nav-cta:hover{background:var(--deep); color:var(--white);}
@media (max-width:640px){ nav.site-nav{gap:0.9rem; font-size:0.85rem;} nav.site-nav a.hide-sm{display:none;} }

/* ---- Layout ---- */
main{flex:1; width:100%;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:2.5rem 1.5rem 1.5rem;}
.wrap-wide{max-width:var(--maxw-wide); margin:0 auto; padding:2.5rem 1.5rem 1.5rem;}
.section{padding:2.5rem 0;}
.center{text-align:center;}

/* ---- Buttons ---- */
.btn{
  display:inline-block; font-family:var(--f-body); font-weight:600; font-size:1rem;
  cursor:pointer; border:1px solid var(--clear); background:var(--clear); color:var(--white);
  padding:0.85rem 1.5rem; border-radius:5px; text-decoration:none; text-align:center;
  transition:background .18s ease, border-color .18s ease, transform .12s ease;
}
.btn:hover{background:var(--deep); border-color:var(--deep);}
.btn:focus-visible{outline:3px solid var(--amber); outline-offset:2px;}
.btn.secondary{background:transparent; color:var(--clear);}
.btn.secondary:hover{background:var(--paper); color:var(--deep);}
.btn.block{display:block; width:100%;}
.btn[disabled]{opacity:.45; cursor:not-allowed;}

/* ---- Trust strip (ad-landing pages, §3.2) ---- */
.trust-strip{
  display:flex; flex-wrap:wrap; gap:0.4rem 1.4rem; justify-content:center;
  font-size:0.8rem; font-weight:600; letter-spacing:0.03em; color:var(--ink-soft);
  margin:1.1rem 0 0;
}
.trust-strip span{display:inline-flex; align-items:center; gap:0.4rem;}
.trust-strip span::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--clear);}

/* ---- Quiz intro strip ---- */
.quiz-intro{
  border:1px solid var(--line); background:var(--white); border-radius:8px;
  padding:1.1rem 1.3rem; margin:1.6rem 0 0.75rem;
}
.quiz-intro b{font-family:var(--f-display); font-weight:600;}
.no-email{font-size:0.9rem; color:var(--ink-soft); font-style:italic; margin:0.35rem 0 0;}

/* pre-capture disclosure — visible above the fold, not only in the footer (§3.5) */
.precapture{font-size:0.82rem; color:var(--ink-soft); font-style:italic; margin:0.6rem 0 0;}

/* ---- Progress meter ---- */
.progress-wrap{margin-bottom:1.6rem;}
.progress-meta{
  display:flex; justify-content:space-between; font-size:0.72rem; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:0.5rem;
}
.progress-track{height:3px; background:var(--line); border-radius:2px; overflow:hidden;}
.progress-fill{height:100%; background:var(--clear); width:0; transition:width .3s ease;}

/* ---- Quiz question ---- */
.q-text{font-family:var(--f-display); font-weight:600; font-size:1.5rem; line-height:1.25; margin:0 0 0.4rem;}
.q-help{font-size:0.9rem; color:var(--ink-soft); margin:0 0 1.2rem;}
.options{display:flex; flex-direction:column; gap:0.6rem;}
.opt{
  text-align:left; font-family:var(--f-body); font-size:1rem; font-weight:500; color:var(--ink);
  background:var(--white); border:1px solid var(--line); border-radius:8px; padding:0.95rem 1.1rem;
  cursor:pointer; transition:border-color .15s ease, background .15s ease, transform .1s ease; width:100%;
  min-height:48px; /* mobile tap target §3.6 */
}
.opt:hover{border-color:var(--clear); background:#fff;}
.opt:focus-visible{outline:3px solid var(--amber); outline-offset:2px;}
.opt[aria-pressed="true"]{background:var(--clear); color:var(--white); border-color:var(--clear);}
.nav-row{display:flex; justify-content:space-between; align-items:center; margin-top:1.5rem;}
.back{
  background:none; border:none; font-size:0.72rem; font-weight:600; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--ink-soft); cursor:pointer; padding:0.5rem;
}
.back:hover{color:var(--ink);}
.back:focus-visible{outline:2px solid var(--amber); outline-offset:2px;}

/* ---- Score reveal ---- */
.score-band{text-align:center; padding:0.5rem 0;}
.score-num{
  font-family:var(--f-display); font-weight:600; font-size:5.2rem; line-height:1;
  color:var(--amber); position:relative; display:inline-block; /* amber = the one sanctioned insight color */
}
.score-outof{font-size:0.75rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); margin-top:1rem;}
.score-label{font-family:var(--f-display); font-style:italic; font-size:1.4rem; color:var(--ink); margin-top:0.35rem;}
.pillars{margin:1.9rem 0 0.5rem; display:flex; flex-direction:column; gap:1rem;}
.pillar-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:0.35rem;}
.pillar-name{font-size:0.72rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink);}
.pillar-score{font-weight:600; font-size:0.9rem; color:var(--ink-soft);}
.pillar-track{height:10px; background:var(--line); border-radius:5px; overflow:hidden;}
.pillar-fill{height:100%; width:0; border-radius:5px; background:var(--clear); transition:width .6s ease;}
.reflect{
  background:var(--white); border-left:3px solid var(--amber); padding:1rem 1.2rem;
  margin:1.5rem 0; font-size:1rem;
}

/* ---- Gate ---- */
.field{margin-bottom:0.9rem;}
.field label{display:block; font-size:0.72rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:0.35rem;}
.field input{width:100%; font-family:var(--f-body); font-size:1rem; padding:0.8rem 0.9rem; border:1px solid var(--line); border-radius:6px; background:var(--white); color:var(--ink);}
.field input:focus-visible{outline:3px solid var(--amber); outline-offset:1px; border-color:var(--clear);}
.row-2{display:flex; gap:0.75rem;}
.row-2 .field{flex:1;}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.consent{font-size:0.8rem; color:var(--ink-soft); margin-top:0.7rem;}

/* ---- Booking (post-gate) ---- */
.booking-embed{
  border:1px dashed var(--clear); border-radius:10px; background:var(--white);
  padding:1.6rem; text-align:center; margin:1.2rem 0;
}
.booking-embed .cal-note{font-size:0.8rem; color:var(--ink-soft); margin-top:0.8rem;}
.release-line{font-style:italic; color:var(--ink-soft); margin-top:0.5rem;}

/* ---- Report pillars (email preview / in-page) ---- */
.report-pillar{border-top:1px solid var(--line); padding:1.1rem 0;}
.report-pillar h3{margin-bottom:0.3rem;}
.report-pillar .ps{color:var(--amber); font-weight:600; font-family:var(--f-body); font-size:1rem;}
.report-pillar .nonadvice{color:var(--ink-soft); font-style:italic; font-size:0.82rem; margin-top:0.4rem;}

/* ---- Cards (tools / learn / home) ---- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.1rem;}
.card{
  display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line);
  border-radius:8px; padding:1.4rem 1.5rem; text-decoration:none; color:inherit;
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
a.card:hover{border-color:var(--clear); transform:translateY(-2px); box-shadow:0 8px 24px rgba(39,49,59,.06);}
.card .tag{font-size:0.62rem; font-weight:700; letter-spacing:0.13em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:0.6rem;}
.card h3{margin-bottom:0.4rem;}
.card p{font-size:0.9rem; color:var(--ink-soft); flex:1; margin-bottom:0.9rem;}
.card .go{font-size:0.75rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink);}
.card .go .arr{color:var(--amber);}
.card.soon{background:var(--paper); border-style:dashed; cursor:default;}
.card.soon h3,.card.soon p,.card.soon .go{color:var(--ink-soft);}
.section-label{font-size:0.72rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); margin:2.2rem 0 1rem; padding-bottom:0.5rem; border-bottom:1px solid var(--line);}

/* ---- How-it-works strip ---- */
.how{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:1.5rem 0;}
.how .step{background:var(--white); border:1px solid var(--line); border-radius:8px; padding:1.1rem 1.2rem;}
.how .n{font-family:var(--f-display); font-weight:600; font-size:1.4rem; color:var(--amber);}
@media (max-width:640px){ .how{grid-template-columns:1fr;} }

/* ---- Advisor lead-in band ---- */
.advisor{max-width:var(--maxw-wide); margin:2.4rem auto 0; padding:0 1.5rem;}
.advisor-inner{background:var(--ink); color:var(--paper); border-radius:10px; padding:2rem;}
.advisor-inner .eyebrow{color:var(--amber);}
.advisor-inner h2{color:var(--paper);}
.advisor-inner p{color:#C7CCD1; max-width:62ch;}

/* ---- Footer + persistent disclosure (§1.7) ---- */
footer.site{background:var(--ink); color:#AAB2BA; padding:2rem 1.5rem 2.5rem; font-size:0.78rem; line-height:1.7; margin-top:2.5rem;}
footer.site .inner{max-width:var(--maxw-wide); margin:0 auto;}
footer.site .disclosure{max-width:80ch; margin:0 auto 1rem;}
footer.site a{color:var(--amber); text-decoration:none;}
footer.site a:hover{text-decoration:underline;}
footer.site .foot-links{display:flex; gap:1.2rem; flex-wrap:wrap; margin-top:0.8rem;}
.microline{font-style:italic; font-size:0.82rem; color:var(--ink-soft); text-align:center; margin:1.5rem 0 0;}

/* ---- Screen switching (quiz) ---- */
.screen{display:none;}
.screen.active{display:block; animation:fade .35s ease;}
@keyframes fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

@media (max-width:560px){
  .q-text{font-size:1.3rem;} .score-num{font-size:4.2rem;} .row-2{flex-direction:column; gap:0;}
  .wrap,.wrap-wide{padding-top:1.8rem;}
}