/* Layout: single column, score report card as the hero, then approach, first session, about, pricing, steps, FAQ, closing CTA */
:root{
  --bg:#F3F6F0; --surface:#FFFFFF; --ink:#15211A; --muted:#55665B; --line:#D6E0D5;
  --accent:#2F7A45; --accent-ink:#FFFFFF; --tint:#E1EFDF; --leaf:#7DB36A;
  --display:"Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  --body:"Newsreader", Georgia, "Times New Roman", serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0F1712; --surface:#17221B; --ink:#E5EEE6; --muted:#9DB0A2; --line:#283A2E;
  --accent:#6CC487; --accent-ink:#0B2414; --tint:#1A3324; --leaf:#4E9A5E; color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#0F1712; --surface:#17221B; --ink:#E5EEE6; --muted:#9DB0A2; --line:#283A2E;
  --accent:#6CC487; --accent-ink:#0B2414; --tint:#1A3324; --leaf:#4E9A5E; color-scheme:dark }

*{box-sizing:border-box}
body{background:var(--bg); color:var(--ink); font-family:var(--body); font-size:1.125rem; line-height:1.6; padding-inline:20px; padding-block:0}
.wrap{max-width:1040px; margin-inline:auto}
h1,h2,h3{font-family:var(--display); line-height:1.1; text-wrap:balance; margin:0}
h2{font-size:clamp(1.75rem,3.6vw,2.5rem); font-weight:800; letter-spacing:-.01em}
h3{font-size:1.2rem; font-weight:700}
p{margin:0}
a{color:var(--accent)}
.eyebrow{font-family:var(--mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:700}
section{padding-block:clamp(48px,6vw,80px); border-top:1px solid var(--line)}
.sec-head{display:grid; gap:12px; max-width:640px; margin-bottom:40px}
.lede{color:var(--muted)}

/* top bar */
.top{display:flex; justify-content:space-between; align-items:center; gap:16px; padding-block:22px; flex-wrap:wrap}
.brand{font-family:var(--display); font-weight:800; font-size:1.25rem; letter-spacing:-.01em; color:var(--ink); text-decoration:none}
.brand span{color:var(--accent)}
.top nav{display:flex; gap:20px; font-family:var(--display); font-size:.95rem}
.top nav a{color:var(--muted); text-decoration:none}
.top nav a:hover{color:var(--ink)}

/* buttons */
.btns{display:flex; gap:12px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--display); font-weight:700; font-size:1rem; padding:14px 22px; border-radius:10px; text-decoration:none; border:2px solid var(--accent); transition:transform .15s ease, background .15s ease}
.btn.primary{background:var(--accent); color:var(--accent-ink)}
.btn.ghost{color:var(--accent); background:transparent}
.btn.ghost:hover{background:var(--tint)}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible,.top nav a:focus-visible,summary:focus-visible{outline:3px solid var(--accent); outline-offset:3px}

/* hero */
.hero{display:grid; padding-block:clamp(28px,5vw,64px) clamp(28px,4vw,44px); max-width:760px}
.hero > *{min-width:0}
.hero h1{font-size:clamp(2.4rem,5.8vw,4.2rem); font-weight:800; letter-spacing:-.025em}
.hero h1 em{font-style:normal; color:var(--accent)}
.hero .copy{display:grid; gap:24px}
.hero .lede{font-size:1.25rem; max-width:44ch}
.note{font-size:.95rem; color:var(--muted)}

/* approach */
.pillars{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden}
.pillar{background:var(--surface); padding:28px; display:grid; gap:10px; align-content:start}
.pillar .tag{font-family:var(--mono); font-size:.72rem; color:var(--accent); font-weight:700; letter-spacing:.08em; text-transform:uppercase}
.pillar p{color:var(--muted)}

/* first session */
.kickoff{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,5vw,64px); align-items:start}
.kickoff > *{min-width:0}
.includes{list-style:none; margin:0; padding:0; display:grid; border-top:1px solid var(--line)}
.includes li{display:grid; gap:6px; padding-block:18px; padding-left:36px; border-bottom:1px solid var(--line); position:relative}
.includes li::before{content:""; position:absolute; left:4px; top:24px; width:14px; height:8px; border-left:3px solid var(--accent); border-bottom:3px solid var(--accent); transform:rotate(-45deg)}
.includes p{color:var(--muted)}

/* about */
.about{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,5vw,64px)}
.about > *{min-width:0}
.about .story{display:grid; gap:18px}
.facts{display:grid; border-top:1px solid var(--line)}
.fact{display:grid; grid-template-columns:9.5rem 1fr; gap:16px; padding-block:16px; border-bottom:1px solid var(--line)}
.fact dt{font-family:var(--mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding-top:4px}
.fact dd{margin:0}

/* pricing */
.free{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; background:var(--tint); border-radius:16px; padding:22px 26px; margin-bottom:20px}
.free p{max-width:56ch}
.free strong{font-family:var(--display); font-size:1.15rem; display:block}
.plans{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch}
.plan{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:28px; display:grid; gap:14px; grid-template-rows:auto auto auto 1fr auto}
.plan.featured{border:2px solid var(--accent)}
.plan-top{display:flex; justify-content:space-between; align-items:center; gap:10px; min-height:28px; flex-wrap:wrap}
.plan .name{font-family:var(--display); font-weight:700; font-size:1.1rem}
.price{font-family:var(--mono); font-weight:700; font-size:2.4rem; line-height:1; font-variant-numeric:tabular-nums}
.per{font-family:var(--mono); font-size:.85rem; color:var(--muted)}
.per b{color:var(--accent)}
.plan ul{margin:0; padding-left:1.1em; color:var(--muted); display:grid; gap:6px; font-size:1rem}
.pill{font-family:var(--mono); font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:var(--tint); color:var(--accent); padding:5px 10px; border-radius:99px}
.pill.solid{background:var(--accent); color:var(--accent-ink)}

/* steps */
.steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; counter-reset:s}
.step{display:grid; gap:10px; align-content:start}
.step::before{counter-increment:s; content:counter(s); font-family:var(--mono); font-weight:700; width:2.4rem; height:2.4rem; border-radius:50%; display:grid; place-items:center; background:var(--tint); color:var(--accent)}
.step p{color:var(--muted)}

/* faq */
.faq{display:grid; max-width:760px; border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line); padding-block:18px}
summary{font-family:var(--display); font-weight:700; font-size:1.1rem; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; font-family:var(--mono); color:var(--accent); font-size:1.3rem; line-height:1}
details[open] summary::after{content:"\2212"}
details p{color:var(--muted); margin-top:10px; max-width:65ch}

/* closing */
.closing{background:var(--accent); color:var(--accent-ink); border-radius:20px; padding:clamp(32px,6vw,64px); display:grid; gap:20px; justify-items:start; margin-block:clamp(40px,6vw,72px)}
.closing h2{max-width:20ch}
.closing p{max-width:52ch; opacity:.9}
.closing .eyebrow{color:inherit; opacity:.8}
.closing .btn.primary{background:var(--accent-ink); color:var(--accent); border-color:var(--accent-ink)}
.closing .btn.ghost{color:var(--accent-ink); border-color:var(--accent-ink)}
.closing .btn.ghost:hover{background:transparent}
footer{padding-block:28px 40px; color:var(--muted); font-size:.9rem; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid var(--line)}

@media (max-width:820px){
  .about,.kickoff{grid-template-columns:1fr}
  .plans,.steps{grid-template-columns:1fr}
}
@media (max-width:560px){
  .pillars{grid-template-columns:1fr}
  .fact{grid-template-columns:1fr; gap:4px}
  body{font-size:1.05rem}
}
@media (prefers-reduced-motion:reduce){ .btn{transition:none} }

/* header actions + theme toggle */
.top-right{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.top nav a[aria-current="page"]{color:var(--accent)}
.theme-btn{width:40px; height:40px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink); display:grid; place-items:center; cursor:pointer; padding:0}
.theme-btn:hover{border-color:var(--accent); color:var(--accent)}
.theme-btn:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
.theme-btn svg{width:18px; height:18px}
.theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:block}
:root[data-theme="dark"] .theme-btn .moon{display:none}
@media (max-width:560px){ .top nav{gap:14px; font-size:.9rem} .top-right{gap:12px} }
/* about page */
.about-page{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(28px,5vw,64px); align-items:center; padding-block:clamp(28px,5vw,64px) clamp(28px,4vw,44px)}
.portrait{display:block; width:100%; max-width:380px; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:16px; justify-self:end}
@media (max-width:820px){ .about-page{grid-template-columns:1fr} .portrait{justify-self:start; max-width:320px; order:-1} }
.about-page > *{min-width:0}
.about-page h1{font-size:clamp(2.4rem,5.8vw,4rem); font-weight:800; letter-spacing:-.025em}
.about-page h1 em{font-style:normal; color:var(--accent)}
.about-page .story{display:grid; gap:20px; max-width:62ch}

/* score strip */
.scores{margin:0; display:grid; grid-template-columns:1.3fr repeat(4,minmax(0,1fr)); border-top:1px solid var(--line);}
.scores .cell{display:grid; gap:2px; align-content:center; padding:18px 20px; border-left:1px solid var(--line); min-width:0}
.scores .cell:first-child{border-left:0; padding-left:0}
.scores .k{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.scores .v{font-family:var(--mono); font-weight:700; font-size:1.7rem; line-height:1.15; font-variant-numeric:tabular-nums}
.scores .total-cell .v{font-size:2.6rem; color:var(--accent)}
.scores .p{font-family:var(--mono); font-size:.75rem; color:var(--accent); font-weight:700}
.scores figcaption{grid-column:1/-1; font-size:.8rem; color:var(--muted); padding-block:10px; border-top:1px dashed var(--line)}
@media (max-width:820px){
  .scores{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scores .total-cell{grid-column:1/-1; border-bottom:1px solid var(--line); padding-left:0}
  .scores .cell{border-left:0; padding-left:0}
  .scores .cell:nth-child(3),.scores .cell:nth-child(5){border-left:1px solid var(--line); padding-left:20px}
}

/* hero with score on the right */
.hero-split{max-width:none; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(32px,6vw,88px); align-items:center; padding-block:clamp(28px,5vw,64px) clamp(48px,6vw,80px)}
.score-side{margin:0; display:grid; gap:6px; padding-left:clamp(20px,3vw,40px); border-left:1px solid var(--line)}
.score-side .k{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.score-side .big{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:10px}
.score-side .big .v{font-family:var(--mono); font-weight:700; font-size:clamp(3.4rem,6vw,4.4rem); line-height:1; color:var(--accent); font-variant-numeric:tabular-nums}
.score-side .big .p{font-family:var(--mono); font-size:.78rem; font-weight:700; color:var(--accent)}
.score-side ul{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.score-side li{display:grid; grid-template-columns:1fr auto 3.6rem; gap:12px; align-items:baseline; padding-block:11px; border-bottom:1px solid var(--line)}
.score-side li .v{font-family:var(--mono); font-weight:700; font-size:1.15rem; font-variant-numeric:tabular-nums}
.score-side li .p{font-family:var(--mono); font-size:.75rem; font-weight:700; color:var(--accent); text-align:right}
.score-side figcaption{font-size:.78rem; color:var(--muted); margin-top:8px; line-height:1.5}
@media (max-width:820px){
  .hero-split{grid-template-columns:1fr}
  .score-side{padding-left:0; border-left:0}
}
.score-side li .k{font-size:.9rem; letter-spacing:.06em; color:var(--ink)}
.score-side li{padding-block:14px}
.pillar.wide{grid-column:1/-1}
.pillar.wide p{max-width:70ch}