:root{
  --primary:#5a7c65;
  --primary-dark:#37503f;
  --primary-light:#eaf0eb;
  --accent:#b55d43;
  --accent-hover:#9c5039;
  --accent-soft:#fbf3ef;
  --bg-main:#f5f4f0;
  --bg-card:#ffffff;
  --text-main:#232b27;
  --text-muted:#4d5a52;
  --border-color:#e2e5df;
  --shadow-soft:0 10px 25px -5px rgba(90,124,101,.10),0 8px 10px -6px rgba(0,0,0,.04);
  --radius-lg:16px;
  --radius-md:8px;
  --maxw:1140px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Sticky-header offset for in-page jumps.
   The header is position:sticky, so without this every anchor target lands flush
   with the viewport top and sits *underneath* it — 62px of the heading swallowed on
   desktop, ~100px once the nav wraps on narrow screens. scroll-margin-top pushes the
   scroll stop down instead of moving the element, so nothing about the layout shifts. */
#main,#top,#about,#chapters,#toolkit,#buy,#planner,#app,#states,#get-the-book,.tab-content h3{scroll-margin-top:78px}
@media (max-width:900px){
  #main,#top,#about,#chapters,#toolkit,#buy,#planner,#app,#states,#get-the-book,.tab-content h3{scroll-margin-top:118px}
}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans",sans-serif;line-height:1.65;color:var(--text-main);background:var(--bg-main);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary-dark)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:var(--primary-dark);color:#fff;padding:.75rem 1.25rem;z-index:200;border-radius:0 0 8px 0}
.skip:focus{left:0}
.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}

.crisis-banner{background:#eef3ef;border-bottom:1px solid #d7e0da;color:#2f4436;padding:.75rem 1rem;text-align:center;font-size:.88rem}
.crisis-banner a{color:#2f4436;font-weight:700}

header{background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:100}
.nav-container{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 1.5rem}
.logo{font-size:1.05rem;font-weight:800;color:var(--primary-dark);text-decoration:none;letter-spacing:-.02em;line-height:1.15}
.logo span{display:block;font-size:.68rem;font-weight:600;color:var(--text-muted);letter-spacing:.02em;text-transform:uppercase}
nav ul{display:flex;list-style:none;gap:1.5rem;align-items:center;flex-wrap:wrap}
nav a{text-decoration:none;color:var(--text-muted);font-weight:600;font-size:.93rem}
nav a:hover{color:var(--primary-dark)}
.nav-cta{background:var(--accent);color:#fff!important;padding:.55rem 1.1rem;border-radius:30px}
.nav-cta:hover{background:var(--accent-hover);color:#fff!important}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.85rem 1.6rem;border-radius:30px;font-weight:700;text-decoration:none;cursor:pointer;border:none;transition:all .2s ease;font-size:.95rem;font-family:inherit;line-height:1.3;text-align:center}
.btn-buy{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(181,93,67,.30)}
.btn-buy:hover{background:var(--accent-hover);transform:translateY(-1px)}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--primary-dark);border:2px solid var(--primary)}
.btn-outline:hover{background:var(--primary-light)}
.btn-sm{padding:.6rem 1.15rem;font-size:.87rem}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.65;cursor:not-allowed;transform:none!important}

.hero{padding:3.5rem 1.5rem 4rem;background:linear-gradient(180deg,#fff 0%,var(--bg-main) 100%)}
.hero-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 360px;gap:3.5rem;align-items:center}
.hero-text h1{font-size:3rem;color:var(--primary-dark);line-height:1.12;margin-bottom:1rem;letter-spacing:-.03em}
.hero-text .subtitle{font-size:1.2rem;color:var(--text-muted);margin-bottom:1.75rem;line-height:1.5}
.hero-btns{display:flex;gap:.85rem;flex-wrap:wrap;margin-bottom:1.5rem}
.hero-trust{font-size:.9rem;color:var(--text-muted);display:flex;align-items:flex-start;gap:.5rem}
.hero-trust svg{flex:none;margin-top:.25rem}

.launch-notify{background:var(--bg-main);padding:2.5rem 1.5rem;margin-top:0;margin-bottom:4.5rem}
.notify-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:2rem;box-shadow:var(--shadow-soft);border:1px solid var(--border-color);max-width:480px;margin:0 auto;text-align:center}
.notify-card h2{font-size:1.35rem;color:var(--primary-dark);margin-bottom:.75rem;font-weight:600}
.notify-intro{color:var(--text-muted);font-size:.95rem;margin-bottom:1.5rem;line-height:1.6}

.buy-card{background:var(--bg-card);padding:1.5rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);border:1px solid var(--border-color);text-align:center}
.buy-card img.cover{width:100%;height:auto;max-width:280px;margin:0 auto 1.15rem;border-radius:4px;box-shadow:8px 12px 24px rgba(35,43,39,.22);border:1px solid rgba(0,0,0,.08)}
.buy-meta{font-size:.82rem;color:var(--text-muted);margin-bottom:.9rem;line-height:1.5}
.buy-status{display:inline-block;background:var(--primary-light);color:var(--primary-dark);font-size:.74rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:.3rem .8rem;border-radius:30px;margin-bottom:.9rem}
.buy-note{font-size:.78rem;color:var(--text-muted);margin-top:.7rem;line-height:1.45}
.notify-form{display:flex;gap:.5rem;margin-top:.85rem}
.notify-form input{flex:1;min-width:0;padding:.75rem .9rem;border:1px solid var(--border-color);border-radius:30px;font-size:.9rem;font-family:inherit;background:#fafbf9}
.formmsg{font-size:.85rem;margin-top:.6rem;line-height:1.45;padding:.6rem .8rem;border-radius:var(--radius-md);display:none}
.formmsg.show{display:block}
.formmsg.ok{background:var(--primary-light);color:var(--primary-dark)}
.formmsg.info{background:#f3f1ec;color:var(--text-muted)}
.formmsg.err{background:var(--accent-soft);color:var(--accent-hover)}

.container{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem}
section{margin-bottom:4.5rem}
.section-title{font-size:1.8rem;color:var(--primary-dark);margin-bottom:1.5rem;position:relative;display:inline-block;letter-spacing:-.02em}
.section-title::after{content:'';position:absolute;bottom:-6px;left:0;width:40%;height:3px;background:var(--accent);border-radius:2px}
.section-intro{color:var(--text-muted);margin-bottom:1.5rem;max-width:70ch}

.author-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:2.5rem;box-shadow:var(--shadow-soft);border:1px solid var(--border-color)}
/* The block of text is centred in the card; the text inside it stays left aligned.
   The heading carries the same 72ch measure and auto margins as the paragraphs, or it
   would start at the card's padding edge while every line under it sat further in. */
.author-card h3{color:var(--primary-dark);margin-bottom:1rem;font-size:1.35rem;max-width:72ch;margin-left:auto;margin-right:auto}
.author-card p{margin-bottom:1rem;max-width:72ch;margin-left:auto;margin-right:auto}
.author-card p:last-child{margin-bottom:0}
.author-sig{font-weight:800;color:var(--accent-hover)}

.chapters-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.25rem}
.chapter-card{background:var(--bg-card);border-radius:var(--radius-md);padding:1.6rem;border:1px solid var(--border-color);box-shadow:0 2px 5px rgba(0,0,0,.02);transition:transform .2s}
.chapter-card:hover{transform:translateY(-2px)}
.chapter-number{font-size:.76rem;font-weight:800;color:var(--accent-hover);text-transform:uppercase;letter-spacing:.09em}
.chapter-card h3{font-size:1.1rem;margin:.35rem 0 .6rem;color:var(--primary-dark)}
.chapter-card p{color:var(--text-muted);font-size:.93rem}

.tools-container{background:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);border:1px solid var(--border-color);overflow:hidden}
.tool-tabs{display:flex;background:var(--primary-light);border-bottom:1px solid var(--border-color);overflow-x:auto;scrollbar-width:thin}
.tab-btn{padding:1rem 1.35rem;background:none;border:none;font-weight:700;font-size:.9rem;font-family:inherit;color:var(--text-muted);cursor:pointer;white-space:nowrap;border-bottom:3px solid transparent;transition:all .2s}
.tab-btn[aria-selected="true"]{color:var(--primary-dark);border-bottom-color:var(--primary);background:var(--bg-card)}
.tab-hint{display:none;font-size:.78rem;color:var(--text-muted);padding:.5rem 1rem 0;text-align:center}
.tab-content{padding:2.25rem;display:none}
.tab-content.active{display:block}
.tab-content h3{color:var(--primary-dark);font-size:1.25rem;margin-bottom:.4rem}
.tab-desc{color:var(--text-muted);margin-bottom:1.25rem;max-width:68ch}

.teaser{background:var(--accent-soft);border-left:4px solid var(--accent);padding:1.2rem 1.35rem;border-radius:0 var(--radius-md) var(--radius-md) 0;margin-top:1.75rem;font-size:.93rem;color:#5c453d;display:flex;flex-direction:column;gap:.85rem;align-items:flex-start}
.teaser strong{color:var(--accent-hover)}
.teaser-app{display:block;margin-top:.55rem;font-size:.88rem;color:var(--primary-dark)}
.teaser-app::before{content:"";display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:var(--primary);margin-right:.45rem;vertical-align:middle}

.timer-display{font-size:4rem;font-weight:800;color:var(--primary-dark);text-align:center;margin:1.25rem 0 .5rem;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.timer-controls{text-align:center;display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.timer-msg{text-align:center;margin-top:1rem;font-weight:700;color:var(--primary-dark);background:var(--primary-light);padding:.85rem 1rem;border-radius:var(--radius-md);display:none}
.timer-msg.show{display:block}

.form-group{margin-bottom:1.1rem;max-width:420px}
.form-group label{display:block;font-weight:700;margin-bottom:.4rem;font-size:.92rem}
.form-group input{width:100%;padding:.8rem;border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:1rem;font-family:inherit;background:#fafbf9}
.form-group input[aria-invalid="true"]{border-color:var(--accent);background:var(--accent-soft)}
.field-hint{font-size:.8rem;color:var(--text-muted);margin-top:.3rem}
.result-box{background:var(--primary-light);border:1px solid #cbdccf;color:var(--primary-dark);padding:1.15rem 1.25rem;border-radius:var(--radius-md);margin-top:1.4rem;display:none;max-width:640px}
.result-box.show{display:block}
.result-box .big{font-size:1.35rem;font-weight:800;display:block;margin-bottom:.35rem}
.result-box .cav{font-size:.85rem;font-weight:400;color:#40584a;margin-top:.6rem;display:block;line-height:1.5}

.helplist{list-style:none;margin-top:1.5rem;display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.helplist li{background:#fafbf9;border:1px solid var(--border-color);border-radius:var(--radius-md);padding:.85rem 1rem;font-size:.88rem;color:var(--text-muted)}
.helplist strong{color:var(--primary-dark);display:block}

.state-toolbar{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem}
.state-toolbar input{flex:1;min-width:240px;padding:.8rem 1rem;border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:1rem;font-family:inherit;background:#fafbf9}
.state-count{font-size:.85rem;color:var(--text-muted)}
.state-tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.75rem;max-height:420px;overflow-y:auto;padding:.6rem;border:1px solid var(--border-color);border-radius:var(--radius-md);background:#fafbf9}
.state-tile{background:#fff;border:1px solid var(--border-color);border-radius:var(--radius-md);padding:.9rem;display:flex;flex-direction:column;gap:.4rem;align-items:flex-start;text-align:left;text-decoration:none;color:var(--text-main);cursor:pointer;font-family:inherit;transition:all .18s ease;width:100%}
.state-tile:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-soft);background:var(--primary-light)}
.state-tile-name{font-weight:800;color:var(--primary-dark);font-size:.98rem}
.state-tile-action{font-size:.78rem;font-weight:700;color:var(--accent-hover)}
.state-empty{padding:2rem 1rem;text-align:center;color:var(--text-muted);font-size:.92rem}

.guide{border:1px solid var(--border-color);border-radius:var(--radius-md);background:#fff;padding:1.5rem;display:none}
.guide.show{display:block}
.guide-back{background:none;border:none;font-family:inherit;font-size:.88rem;font-weight:700;color:var(--primary-dark);cursor:pointer;padding:.35rem 0;margin-bottom:.85rem}
.guide h4{font-size:1.35rem;color:var(--primary-dark);margin-bottom:.5rem;line-height:1.25}
.guide .lede{color:var(--text-muted);margin-bottom:1.1rem;max-width:72ch}
.guide-card{background:#fafbf9;border:1px solid var(--border-color);border-radius:var(--radius-md);padding:1.1rem 1.25rem;margin-bottom:.9rem}
.guide-card h5{font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:var(--primary-dark);margin-bottom:.5rem}
.guide-card p{font-size:.93rem;margin-bottom:.6rem}
.guide-card p:last-child{margin-bottom:0}
.guide-card ul{margin:0;padding-left:1.15rem;font-size:.93rem}
.guide-card li{margin-bottom:.35rem}
.guide-tiny{font-size:.82rem;color:var(--text-muted);margin-top:.65rem}
.guide-official{display:inline-flex;align-items:center;gap:.4rem;background:var(--primary);color:#fff;font-weight:700;text-decoration:none;padding:.75rem 1.3rem;border-radius:30px;font-size:.92rem;margin-bottom:1.1rem}
.guide-official:hover{background:var(--primary-dark);color:#fff}
.guide-disclaimer{font-size:.82rem;color:var(--text-muted);border-top:1px solid var(--border-color);padding-top:.9rem;margin-top:.5rem;line-height:1.5}

.prompt-box{background:#fafbf9;border:1px solid var(--border-color);border-radius:var(--radius-md);padding:1.15rem 1.15rem 1.15rem;margin-bottom:.85rem;position:relative}
.prompt-box pre{white-space:pre-wrap;font-size:.92rem;color:var(--text-main);font-family:inherit;padding-right:5.5rem}
.copy-btn{position:absolute;top:.7rem;right:.7rem;background:var(--primary);color:#fff;border:none;padding:.35rem .85rem;border-radius:20px;font-size:.75rem;font-weight:700;font-family:inherit;cursor:pointer}
.copy-btn:hover{background:var(--primary-dark)}

.flashcard{background:#fafbf9;padding:2rem;border-radius:var(--radius-md);text-align:center;border:1px solid var(--border-color)}
.flashcard .count{font-size:.8rem;font-weight:800;color:var(--accent-hover);letter-spacing:.06em;text-transform:uppercase}
.flashcard h4{font-size:1.3rem;margin:.9rem 0 1.3rem;color:var(--primary-dark);min-height:2.6em;display:flex;align-items:center;justify-content:center}
.flash-controls{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}

.lead-magnet{background:var(--bg-card);border:1px solid var(--border-color);border-left:4px solid var(--primary);border-radius:var(--radius-md);padding:1.75rem;max-width:760px}
.lead-magnet h3{font-size:1.15rem;color:var(--primary-dark);margin-bottom:.5rem}
.lead-magnet p{color:var(--text-muted);font-size:.93rem;margin-bottom:1rem}
.lead-form{display:flex;gap:.6rem;flex-wrap:wrap;max-width:480px}
.planner-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:.75rem}
.app-only-intro{font-weight:700;color:var(--primary-dark);margin-bottom:.35rem!important}
.app-only{list-style:none;padding:0;margin:0 0 1.1rem;font-size:.9rem;color:var(--text-muted)}
.app-only li{padding:.28rem 0 .28rem 1.1rem;position:relative}
.app-only li::before{content:"";position:absolute;left:0;top:.72em;width:.45rem;height:.45rem;border-radius:50%;background:var(--accent)}
.planner-alt{font-size:.85rem;color:var(--text-muted);margin:0}
.planner-alt a{color:var(--primary-dark);font-weight:600}
.lead-form input{flex:1;min-width:220px;padding:.8rem 1rem;border:1px solid var(--border-color);border-radius:30px;font-size:.93rem;font-family:inherit;background:#fafbf9}

.final-cta{background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 100%);color:#fff;padding:3rem 2.5rem;border-radius:var(--radius-lg);text-align:center;box-shadow:var(--shadow-soft)}
.final-cta h3{font-size:1.75rem;margin-bottom:.65rem}
.final-cta p{max-width:600px;margin:0 auto 1.6rem;opacity:.94}
.final-cta .btn-buy{box-shadow:0 4px 14px rgba(0,0,0,.2)}
.final-cta .fine{font-size:.82rem;opacity:.8;margin-top:1rem}
/* 1.9.0: the "Coming soon" box inside the dark final CTA inherited the light-theme
   text colors (.buy-meta muted green, .buy-status green-on-mint), which vanished
   against the green gradient. Everything inside that box is now explicitly light. */
.final-cta .buy-box{max-width:460px;margin:0 auto;text-align:left;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);padding:1.25rem;border-radius:12px}
.final-cta .buy-box .buy-status{background:rgba(255,255,255,.92);color:var(--primary-dark)}
.final-cta .buy-box .buy-meta,.final-cta .buy-box p{color:#fff;opacity:1;margin-left:0;margin-right:0;max-width:none}
.final-cta .buy-box .formmsg.ok{background:rgba(255,255,255,.92);color:var(--primary-dark)}
.final-cta .buy-box .formmsg.info{background:rgba(255,255,255,.92);color:var(--text-main)}
.final-cta .buy-box .formmsg.err{background:#fff;color:var(--accent-hover)}

footer{background:var(--primary-dark);color:rgba(255,255,255,.86);text-align:center;padding:3rem 1.5rem;margin-top:5rem}
footer p{font-size:.9rem;margin-bottom:.5rem}
footer .fine{opacity:.72;font-size:.8rem;max-width:70ch;margin:0 auto}
footer a{color:#fff}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:2.5rem}
  .hero-text{text-align:center}
  .hero-btns{justify-content:center}
  .hero-trust{justify-content:center;text-align:left}
  .hero-text h1{font-size:2.15rem}
  .nav-container{flex-direction:column;gap:.85rem}
  nav ul{justify-content:center;gap:1.1rem}
  .tab-content{padding:1.5rem}
  .author-card{padding:1.75rem}
  .final-cta{padding:2.25rem 1.5rem}
  .tab-hint{display:block}
}
@media (max-width:600px){
  .crisis-banner{font-size:.8rem;padding:.6rem .9rem;text-align:left}
  .crisis-banner .cb-long{display:none}
  .nav-container{padding:.7rem 1rem}
  nav{width:100%}
  nav ul{flex-wrap:nowrap;overflow-x:auto;gap:.9rem;justify-content:flex-start;padding-bottom:.15rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  nav ul::-webkit-scrollbar{display:none}
  nav li{flex:none}
  /* Removed in 1.9.2. This pulled the buy CTA to the front of the mobile menu, but
     since 1.9.1 that link is taken out of the DOM until the book is on sale, so
     :last-child began matching State Benefits and jumped it above About. */
  nav a{font-size:.85rem}
  .nav-cta{padding:.45rem .9rem;white-space:nowrap}
  .hero{padding:2.25rem 1.25rem 3rem}
  .hero-text h1{font-size:1.95rem}
  .hero-text .subtitle{font-size:1.05rem;margin-bottom:1.35rem}
  .hero-btns{flex-direction:column;align-items:stretch}
  .container{padding:0 1.25rem}
  .timer-display{font-size:3rem}
  .notify-card{padding:1.5rem}
  .notify-card h2{font-size:1.15rem}
  .notify-form{flex-direction:column;gap:.6rem}
  .notify-form input{min-width:auto}
}


/* ---------- Honeypot (1.6.0) ----------
   Off-canvas rather than display:none. A bot that checks for hidden fields skips the
   obvious ones; this is still unreachable by pointer, keyboard or screen reader thanks
   to tabindex="-1" and aria-hidden on the wrapper. */
.hp{
  position:absolute !important;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* ---------- Footer links (1.6.0) ---------- */
footer .footer-links{margin:.35rem 0 .5rem}

/* Fixed in 1.6.4. These were color:inherit at opacity .85, which resolved dimmer than
   the plain footer text beside them -- so the only clickable things down here were the
   least visible things down here. Pure white against the sage puts them a step above
   the surrounding copy, which is the right way round. */
footer .footer-links a{
  color:#fff;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
}
footer .footer-links a:hover,
footer .footer-links a:focus-visible{text-decoration-thickness:2px}

/* ---------- Footer crisis line (1.6.3) ----------
   Lifted out of the disclaimer and given its own line. Full opacity while .fine stays
   at .72, so it reads first without needing the danger red -- which is reserved for the
   toolkit's 988 button, where someone is acting rather than reading. */
footer .crisis{
  font-weight:600;
  margin:1.2rem auto .9rem;
}
footer .crisis a{
  color:#fff;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
}
footer .crisis a:hover,
footer .crisis a:focus-visible{text-decoration-thickness:2px}