/* TheraPPC toolkit stylesheet.
   One stylesheet for the guides, worksheets and one pagers, so a new asset is content rather than a re design.
   Design tokens are copied from index.html: Therapist/Sage. */

:root{
  --bg:#F5F0E8; --bg-2:#EDE8DC; --bg-3:#E0D8CC;
  --bg-dark:#1E2D2A; --bg-dark-2:#162320;
  --gold:#6B8F71; --gold-hover:#527060; --gold-dim:#8FAF95;
  --rust:#B87355; --rust-dim:#D49070;
  --gold-text:#4F6E5B; --rust-text:#9A5B3F;
  --ink:#2C2A26; --ink-soft:#5C5850; --muted:#8A8478;
  --on-dark:#EDE8DC; --on-dark-2:rgba(237,232,220,0.65); --on-dark-3:rgba(237,232,220,0.35);
  --line:rgba(107,143,113,0.22); --line-soft:rgba(44,42,38,0.08); --line-dark:rgba(237,232,220,0.12);
  --card:#FBF8F2;
  --shadow:0 20px 50px -15px rgba(30,45,42,0.15); --shadow-sm:0 4px 20px rgba(30,45,42,0.07);
  --radius:10px; --radius-lg:16px; --radius-pill:50px; --max-w:1080px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Plus Jakarta Sans",Inter,sans-serif; color:var(--ink); margin:0; line-height:1.18; letter-spacing:-0.02em}
h1{font-size:clamp(2rem,4.4vw,3.1rem); font-weight:800}
h2{font-size:clamp(1.5rem,2.7vw,2.1rem); font-weight:700}
h3{font-size:1.13rem; font-weight:700}
p{margin:0 0 1rem}
a{color:var(--gold-text)}
img{max-width:100%}

.skip-nav{position:absolute; left:-9999px; top:0; z-index:50}
.skip-nav:focus{position:static; display:block; background:var(--bg-dark); color:var(--on-dark); padding:11px 16px; text-align:center; font-weight:600}
.wrap{max-width:var(--max-w); margin:0 auto; padding:0 24px}
.narrow{max-width:760px; margin:0 auto}

/* Top navigation, same shape as the main pages */
.topnav{background:var(--bg-dark); color:var(--on-dark); position:sticky; top:0; z-index:20}
.topnav .wrap{display:flex; align-items:center; gap:26px; min-height:64px; padding:12px 24px}
.brand{font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; letter-spacing:0.01em; color:var(--on-dark); text-decoration:none; font-size:1.06rem; display:flex; align-items:center; gap:9px}
.brand .dot{width:16px; height:16px; border-radius:5px; background:var(--gold); display:inline-block}
.navlinks{display:flex; gap:20px; margin-left:auto; flex-wrap:wrap}
.navlinks a{color:var(--on-dark-2); text-decoration:none; font-size:0.9rem}
.navlinks a:hover{color:var(--on-dark)}
.navcta{background:var(--gold); color:#fff !important; padding:9px 18px; border-radius:var(--radius-pill); font-weight:600; text-decoration:none; font-size:0.88rem; white-space:nowrap}
.navcta:hover{background:var(--gold-hover)}

/* Hero */
.hero{padding:60px 0 44px; border-bottom:1px solid var(--line-soft)}
.hero .eyebrow{margin-bottom:14px}
.hero p.lead{font-size:1.12rem; color:var(--ink-soft); max-width:720px}
.meta{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:20px; font-size:0.82rem; color:var(--muted); letter-spacing:0.02em}

.eyebrow{font-size:0.74rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold-text)}

.section{padding:52px 0; border-bottom:1px solid var(--line-soft)}
.section.alt{background:var(--bg-2)}
.stepnum{font-family:"Plus Jakarta Sans",sans-serif; font-size:0.78rem; font-weight:800; letter-spacing:0.16em; text-transform:uppercase; color:var(--rust-text); margin-bottom:10px}
.section p{color:var(--ink-soft)}
.takeaway{margin-top:18px; padding:14px 18px; background:var(--card); border-left:3px solid var(--gold); border-radius:0 var(--radius) var(--radius) 0; color:var(--ink); font-size:0.97rem}
.takeaway strong{color:var(--gold-text)}

/* Infographic surfaces */
.viz{margin:26px 0 6px; padding:22px; background:var(--card); border:1px solid var(--line-soft); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm)}
.viz .caption{font-size:0.76rem; letter-spacing:0.02em; color:var(--muted); margin-top:14px}
.statrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px}
.stat{background:var(--bg); border:1px solid var(--line-soft); border-radius:var(--radius); padding:16px 16px 14px}
.stat .num{font-family:"Plus Jakarta Sans",sans-serif; font-size:1.95rem; font-weight:800; color:var(--gold-text); line-height:1}
.stat .num.rust{color:var(--rust-text)}
.stat .unit{font-size:0.78rem; color:var(--muted); margin-top:7px; letter-spacing:0.02em}
.stat .lbl{font-size:0.9rem; color:var(--ink); margin-top:4px}

/* Funnel */
.funnel{display:grid; gap:10px}
.funnel .stage{display:grid; grid-template-columns:150px 1fr auto; gap:14px; align-items:center}
.funnel .name{font-size:0.85rem; color:var(--ink-soft)}
.funnel .bar{height:26px; border-radius:6px; background:var(--gold); opacity:0.9}
.funnel .bar.b2{background:var(--gold-dim)}
.funnel .bar.b3{background:var(--rust-dim)}
.funnel .bar.b4{background:var(--rust)}
.funnel .val{font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:0.95rem; color:var(--ink); white-space:nowrap}

/* Before and after bars */
.barchart{display:grid; gap:16px}
.barchart .row .label{font-size:0.85rem; color:var(--ink-soft); margin-bottom:6px}
.barchart .track{height:14px; background:var(--bg-3); border-radius:7px; overflow:hidden}
.barchart .fill{height:100%; background:var(--gold); border-radius:7px}
.barchart .fill.rust{background:var(--rust)}

/* Numbered steps */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; counter-reset:s}
.steps .step{background:var(--bg); border:1px solid var(--line-soft); border-radius:var(--radius); padding:18px}
.steps .step::before{
  counter-increment:s; content:counter(s);
  display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:50%; background:var(--gold); color:#fff; font-family:"Plus Jakarta Sans",sans-serif;
  font-weight:700; font-size:0.82rem; margin-bottom:10px;
}
.steps .step h4{font-size:0.98rem; margin-bottom:6px}
.steps .step p{font-size:0.88rem; margin:0; color:var(--ink-soft)}

/* Two column compare */
.compare{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.compare .col{background:var(--bg); border:1px solid var(--line-soft); border-radius:var(--radius); padding:18px}
.compare .col.no{background:#F7EFEA; border-color:rgba(184,115,85,0.28)}
.compare h4{font-size:0.95rem; margin-bottom:10px; color:var(--gold-text)}
.compare .col.no h4{color:var(--rust-text)}

/* Lists */
ul.plain,ul.check,ul.never{margin:0; padding:0; list-style:none}
ul.plain li{padding:6px 0 6px 18px; position:relative; font-size:0.95rem; color:var(--ink-soft)}
ul.plain li::before{content:""; position:absolute; left:0; top:15px; width:6px; height:6px; border-radius:50%; background:var(--gold-dim)}
ul.check li,ul.never li{padding:9px 0 9px 30px; position:relative; font-size:0.95rem; color:var(--ink-soft); border-bottom:1px solid var(--line-soft)}
ul.check li::before{content:""; position:absolute; left:0; top:14px; width:15px; height:15px; border:2px solid var(--gold); border-radius:4px}
ul.never li::before{content:""; position:absolute; left:0; top:14px; width:15px; height:15px; border:2px solid var(--rust); border-radius:50%}
ul.check li:last-child,ul.never li:last-child{border-bottom:none}

/* Table */
.tablewrap{overflow-x:auto}
table.tbl{width:100%; border-collapse:collapse; font-size:0.92rem; background:var(--card); border-radius:var(--radius); overflow:hidden}
table.tbl th,table.tbl td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--line-soft)}
table.tbl th{background:var(--bg-dark); color:var(--on-dark); font-family:"Plus Jakarta Sans",sans-serif; font-size:0.76rem; letter-spacing:0.08em; text-transform:uppercase; font-weight:700}
table.tbl td.num{font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink)}
table.tbl tr:last-child td{border-bottom:none}
table.tbl tr.total td{background:var(--bg-2); font-weight:700}

/* Callout and gate */
.callout{padding:18px 20px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); font-size:0.94rem; color:var(--ink-soft)}
.callout h4{margin-bottom:8px; font-size:0.95rem}

/* CTA band */
.cta{background:var(--bg-dark); color:var(--on-dark); padding:52px 0}
.cta h2{color:var(--on-dark)}
.cta p{color:var(--on-dark-2); max-width:640px}
.btn{display:inline-block; background:var(--gold); color:#fff; padding:13px 26px; border-radius:var(--radius-pill); text-decoration:none; font-weight:600; font-size:0.95rem}
.btn:hover{background:var(--gold-hover)}
.btn.ghost{background:transparent; border:1px solid var(--line-dark); color:var(--on-dark)}
/* The ghost button is drawn for the dark bands. Seven toolkit pages place it in a
   light section, where cream on cream measured 1.08:1. Reported by Mauricio Macal in
   Discord, 9 Oct 2026. Same fix as the contact block on the home page. */
.section .btn.ghost{color:var(--ink); border-color:var(--line)}
.section .btn.ghost:hover{background:var(--bg-2); border-color:var(--gold-dim); color:var(--ink)}

/* Cards used on the hub */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px}
.card{background:var(--card); border:1px solid var(--line-soft); border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column}
.card .when{font-size:0.74rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--rust-text); margin-bottom:10px}
.card h3{margin-bottom:8px}
.card p{font-size:0.93rem; color:var(--ink-soft); flex:1}
.card .morelinks{display:flex; gap:16px; flex-wrap:wrap}
.card a.more{color:var(--gold-text); font-weight:600; text-decoration:none; font-size:0.93rem}
.card.pending{opacity:0.72}

/* Worksheet inputs */
.field{display:grid; gap:6px; margin-bottom:16px}
.field label{font-size:0.85rem; color:var(--ink-soft)}
.field input,.field select{
  font-family:Inter,sans-serif; font-size:1rem; padding:11px 13px; border:1px solid var(--line);
  border-radius:var(--radius); background:#fff; color:var(--ink); width:100%;
}
.out{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-top:8px}

/* Footer */
.foot{background:var(--bg-dark-2); color:var(--on-dark-3); padding:34px 0; font-size:0.85rem}
.foot a{color:var(--on-dark-2); text-decoration:none; margin-right:16px}
.foot .row{display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center}

@media (max-width:720px){
  .funnel .stage{grid-template-columns:1fr; gap:4px}
  .compare{grid-template-columns:1fr}
  .topnav .wrap{flex-wrap:wrap}
  .navlinks{gap:14px}
}

@media print{
  .topnav,.cta,.foot{display:none}
  body{background:#fff; font-size:11.5pt}
  .section{page-break-inside:avoid; padding:18px 0}
  .viz{box-shadow:none}
}

/* ===== Offer page (hub) ===== */
.offer{margin-top:24px; padding:26px; background:var(--bg-dark); color:var(--on-dark); border-radius:var(--radius-lg); box-shadow:var(--shadow)}
.offer .row{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line-dark)}
.offer .row:last-of-type{border-bottom:none}
.offer .lbl{font-size:0.95rem; color:var(--on-dark-2)}
.offer .was{font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; color:var(--on-dark-2); text-decoration:line-through; margin-right:12px}
.offer .now{font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; font-size:1.9rem; color:var(--on-dark)}
.offer .save{display:inline-block; margin-top:8px; background:var(--gold); color:#fff; border-radius:var(--radius-pill); padding:5px 13px; font-size:0.76rem; font-weight:700; letter-spacing:0.06em}
.offer .note{font-size:0.84rem; color:var(--on-dark-3); margin-top:14px}
.price{font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; color:var(--ink); white-space:nowrap}
.price .was{font-weight:600; color:var(--muted); text-decoration:line-through; margin-right:6px; font-size:0.86rem}
.ico{width:34px; height:34px; border-radius:9px; background:var(--bg-2); border:1px solid var(--line-soft); display:flex; align-items:center; justify-content:center; font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; color:var(--gold-text); font-size:0.95rem; margin-bottom:12px}
.pull{margin:26px 0 0; padding:22px 26px; border-left:4px solid var(--gold); background:var(--card); border-radius:0 var(--radius-lg) var(--radius-lg) 0; font-size:1.06rem; color:var(--ink); box-shadow:var(--shadow-sm)}
.pull cite{display:block; margin-top:10px; font-size:0.84rem; font-style:normal; color:var(--muted)}
.related{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
.relcard{border:1px solid var(--line-soft); border-radius:var(--radius); padding:16px; background:var(--bg)}
.relcard .tag{font-size:0.72rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--rust-text)}
.relcard a{display:block; font-weight:600; margin-top:8px; color:var(--ink); text-decoration:none}
.relcard a:hover{text-decoration:underline}
.herocta{margin-top:24px}
.src{font-size:0.82rem; color:var(--muted)}
@media(max-width:700px){.compare{grid-template-columns:1fr}}