:root{
  --bg:#fbfaf6;--bg-alt:#f4f1e7;--surface:#fff;--ink:#253128;--muted:#5f6a62;--line:#e7e3d9;
  --sage:#e4ede2;--green:#365c43;--lav:#eee9f7;
  --radius-lg:22px;--radius-md:16px;--radius-sm:10px;
  --shadow:0 14px 35px rgba(40,52,44,.08);
  /* Shared colour wash so every illustration reads as one consistent
     palette, regardless of each image's own background colour. */
  --img-tint:linear-gradient(160deg,rgba(54,92,67,.24),rgba(228,237,226,.28) 55%,rgba(251,250,246,.05))
}
*{box-sizing:border-box}
/* Smooth scrolling is added by nav.js only after the page has fully loaded
   (see nav.js). Turning it on from the start breaks the browser's own
   scroll-to-#anchor on page load/hash change in Chromium and WebKit, which
   would silently strand deep links to a specific book at the top of the
   page instead of scrolling to it. */
html.smooth-scroll{scroll-behavior:smooth}
/* Every #anchor target site-wide needs room for the sticky header, or the
   browser scrolls it to sit exactly behind the header instead of below it. */
[id]{scroll-margin-top:90px}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink);line-height:1.65}
a{color:inherit}.container{width:min(1120px,calc(100% - 40px));margin:auto}
.site-header{position:sticky;top:0;z-index:20;background:rgba(251,250,246,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{position:relative;min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:22px}
/* Same rounded face and green as the game's header, so the brand looks
   identical on every page. */
.brand{text-decoration:none;font-size:1.35rem;font-weight:900;letter-spacing:-.03em;font-family:ui-rounded,"Trebuchet MS",system-ui,sans-serif;color:#254537}.brand span{display:block;font-size:.75rem;color:var(--muted);font-weight:650;letter-spacing:0}
.nav-links{display:flex;gap:16px;align-items:center}.nav-links a{text-decoration:none;font-weight:700;font-size:.9rem;white-space:nowrap}
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;font-size:1.1rem;line-height:1;cursor:pointer}
.button,.nav-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;border-radius:999px;padding:12px 20px;font-weight:800;border:1px solid transparent;transition:.15s ease}
.nav-cta{white-space:nowrap}
.cta-icon{width:1.05em;height:1.05em;flex:none;fill:currentColor}
.primary,.nav-cta{background:var(--green);color:#fff}.primary:hover,.nav-cta:hover{background:#2a4735}
.secondary{background:#fff;border-color:var(--line);color:var(--ink)}.secondary:hover{border-color:var(--green)}
.hero{padding:80px 0 56px}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.eyebrow{text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;font-weight:800;color:#58715c}
h1,h2,h3{line-height:1.15;letter-spacing:-.03em;font-weight:800}
h1{font-size:clamp(2.4rem,5.4vw,4.4rem);margin:.25em 0}
h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}
h3{font-size:1.2rem;margin:0 0 .4em}
.hero p,.muted{color:var(--muted)}.hero p{font-size:1.15rem;max-width:600px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero-visual{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:12px;box-shadow:var(--shadow)}
.hero-visual img{width:100%;height:auto;border-radius:calc(var(--radius-lg) - 8px);display:block}
.hero-visual::after{content:"";position:absolute;top:12px;left:12px;right:12px;bottom:12px;background:var(--img-tint);mix-blend-mode:multiply;pointer-events:none;border-radius:calc(var(--radius-lg) - 8px)}
.big-cta{font-size:1.05rem;padding:16px 28px;box-shadow:0 10px 26px rgba(54,92,67,.28)}
.big-cta.secondary{box-shadow:var(--shadow)}
.reassurance{color:var(--muted);font-size:.88rem;margin:14px 0 6px}
.hero-offer{list-style:none;padding:0;margin:18px 0 20px;display:flex;flex-wrap:wrap;gap:10px}
.hero-offer a{display:inline-flex;align-items:center;gap:7px;background:var(--sage);color:var(--green);font-weight:700;font-size:.98rem;line-height:1.3;padding:9px 16px;border-radius:999px;border:1px solid transparent;text-decoration:none;transition:background .15s,border-color .15s}
.hero-offer a:hover,.hero-offer a:focus-visible{background:#d6e5d3;border-color:var(--green)}
.gw-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}
.quiet-link{display:inline-block;margin-top:6px;color:var(--muted);font-weight:700;text-decoration:underline;font-size:.92rem}
.quiet-link:hover{color:var(--green)}
.section{padding:56px 0}.section-alt{background:var(--bg-alt)}
/* Two sections with the same background read as one band, so the second
   one needs far less top space than a change of colour does. */
.section:not(.section-alt)+.section:not(.section-alt){padding-top:16px}
.section-alt+.section-alt{padding-top:16px}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:36px}.section-head p{max-width:630px;color:var(--muted);margin-top:10px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.card{position:relative;display:block;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);transition:.18s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card::before{content:"";position:absolute;top:0;left:0;right:0;aspect-ratio:4/3;background:var(--img-tint);mix-blend-mode:multiply;pointer-events:none;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.card-image{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 20%;display:block;background:#eee;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.card-image-top{object-position:center top}
.card-body{padding:20px}.card-body h3{margin-bottom:.3em}.card-body p{color:var(--muted);margin:0}
.card-body .tag{margin-bottom:12px}
.card-link{display:inline-block;margin-top:14px;font-weight:800;color:var(--green);font-size:.92rem}
.tag{display:inline-block;background:var(--sage);color:#52705b;padding:5px 10px;border-radius:999px;font-size:.75rem;font-weight:800}

/* Problems section: flat pastel cards with a serif display heading, distinct
   from the illustrated .card used elsewhere (guides, etc). */
.problems-heading{font-family:"Playfair Display",Georgia,"Times New Roman",serif}
.section-lede{max-width:560px;color:var(--muted);margin:10px 0 28px;font-size:1.05rem}
.problems-grid{margin-top:0}
.problem-card{display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:230px;text-decoration:none;color:var(--ink);border-radius:var(--radius-lg);padding:28px 26px;transition:.18s ease}
.problem-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.problem-card h3{margin:0;font-size:1.35rem}
.problem-card p{margin:0;color:#4b463f;font-size:.98rem}
.problem-card.tone-peach{background:#f3ddd3}
.problem-card.tone-yellow{background:#f3edc4}
.problem-card.tone-blue{background:#dfeaf0}
.problem-card.tone-lavender{background:var(--lav)}

/* Topic sections: one per problem card, each a question, a game CTA, a
   quieter "see books" CTA, and three book recommendations. The coloured
   badge echoes the problem card above it so the connection is obvious. */
.topic-badge{display:inline-block;padding:6px 14px;border-radius:999px;font-size:.78rem;font-weight:800;margin-bottom:16px}
.topic-badge.tone-peach{background:#f3ddd3;color:#8a5a3f}
.topic-badge.tone-yellow{background:#f3edc4;color:#7a6a1f}
.topic-badge.tone-blue{background:#dfeaf0;color:#3a5f72}
.topic-badge.tone-lavender{background:var(--lav);color:#5a4f8a}
.topic-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:26px 0 40px}
.topic-books{margin-top:8px}
.book-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:18px;display:flex;flex-direction:column;gap:8px}
.book-cover-link{display:block}
.book-cover-img{width:100%;height:210px;object-fit:contain;background:var(--bg-alt);border-radius:var(--radius-sm);padding:10px;box-sizing:border-box;display:block}
.book-card h4,.classics-row .book-card h3{margin:6px 0 0;font-size:1.05rem;line-height:1.3}
.book-card p{margin:0;color:var(--muted);font-size:.92rem;flex:1}
.book-card .button{align-self:flex-start;margin-top:6px}
.book-card .book-fields{flex:1}
.situation-label{display:block;font-weight:800;color:var(--green);font-size:.88rem;margin:0 0 4px;order:-1}
.book-author{color:var(--muted);font-weight:500;font-size:.9rem}

/* Trust strip */
.trust-strip{padding:16px 0;text-align:center;font-size:.85rem;letter-spacing:.01em;color:var(--muted);background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* How it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:12px}
.step-number{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--sage);color:var(--green);font-weight:800;margin-bottom:14px}
.step h3{margin-bottom:.3em}.step p{color:var(--muted);margin:0}
.steps-note{max-width:620px;margin:36px auto 0;text-align:center;color:var(--muted);font-size:1.05rem}
.steps-cta{text-align:center;margin-top:22px}

/* CTA banner */
.cta-banner{background:var(--sage);border-radius:var(--radius-lg);padding:64px 40px;text-align:center}
.cta-banner h2{margin-top:0}
.cta-banner p{max-width:560px;margin:16px auto 28px;color:#3d5744;font-size:1.08rem}

/* Game preview: a teaser, not the real game. No scenario logic lives here. */
.preview-card{position:relative;display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);cursor:pointer;max-width:560px}
.preview-card::before{content:"";position:absolute;top:0;left:0;right:0;aspect-ratio:4/3;background:var(--img-tint);mix-blend-mode:multiply;pointer-events:none;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.preview-card-image{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;display:block;background:var(--bg-alt)}
.preview-card-body{padding:28px}
.preview-card-body .question{font-size:1.15rem;font-weight:800;margin:0 0 16px;line-height:1.4}
.preview-options{display:grid;gap:10px;margin-bottom:22px}
.preview-option{display:block;width:100%;text-align:left;border:1px solid var(--line);background:var(--bg-alt);border-radius:var(--radius-sm);padding:12px 16px;font-weight:700;font-family:inherit;font-size:1rem;color:var(--ink);cursor:pointer;transition:.15s ease}
.preview-option:hover{border-color:var(--green);background:#fff}
.preview-option:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.preview-option.is-selected{border-color:var(--green);background:var(--sage);color:#2a4735}
.preview-response{animation:preview-response-in .2s ease}
.preview-response-text{font-weight:700;margin:0 0 16px;line-height:1.5}
@keyframes preview-response-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.preview-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;text-decoration:none;border-radius:999px;padding:14px 20px;font-weight:800;background:var(--green);color:#fff;transition:.15s ease}
.preview-cta:hover{background:#2a4735}

/* About */
.about-block{max-width:700px}
.about-block p{margin:18px 0}
.about-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.about-split-image{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow);display:block}
.about-split p{margin:14px 0}
.about-kicker{font-weight:800;color:var(--green);margin:4px 0 12px}

/* Featured workbook: Little Decision Makers given slightly more weight
   than third-party picks on the resources page, without looking like an
   ad - same card language as .product, just larger and on a tinted card. */
.featured-workbook{display:grid;grid-template-columns:180px 1fr;gap:32px;align-items:center;background:var(--sage);border-radius:var(--radius-lg);padding:32px;margin:28px 0 44px}
.featured-workbook-cover{width:100%;height:auto;object-fit:contain;background:#fff;border-radius:var(--radius-sm);border:1px solid var(--line);padding:10px;display:block}
.featured-workbook h2{margin:0 0 .2em}
.featured-workbook p{margin:0 0 6px}

/* Article */
.article{width:min(760px,calc(100% - 40px));margin:auto;padding:56px 0 72px}
.article h1{font-size:clamp(2rem,4.6vw,3.1rem)}
.lede{font-size:1.18rem;color:var(--muted);margin-top:14px}
.article-hero{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 15%;border-radius:var(--radius-lg);margin:28px 0 40px;box-shadow:var(--shadow);display:block;filter:saturate(.92) sepia(.06)}
.article h2{margin-top:48px;font-size:1.55rem}
.article p{font-size:1.07rem;line-height:1.72}
.article ul{padding-left:1.2em}.article li{margin:.45em 0;line-height:1.72}

/* Quick answer: sits right after the hero image, summarises the whole article */
.quick-answer{background:var(--sage);border-radius:var(--radius-md);padding:22px 26px;margin:36px 0}
.quick-answer .label{display:block;text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;font-weight:800;color:#52705b;margin-bottom:8px}
.quick-answer p{margin:0;font-size:1.05rem}

/* Callout: an editorial aside, deliberately lighter than a "card"; used for scripts/phrases */
.note{border-left:4px solid var(--green);background:var(--sage);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:18px 22px;margin:32px 0}
.note strong{color:var(--green)}
.note p{margin:.5em 0;font-size:1.02rem}
.note p:first-child{margin-top:0}.note p:last-child{margin-bottom:0}

/* "Try this" 5-minute situation: a small hands-on activity, visually distinct from a script callout */
.try-this{border:1px dashed var(--line);border-radius:var(--radius-md);padding:20px 24px;margin:32px 0;background:var(--bg-alt)}
.try-this p{margin:.5em 0}.try-this p:first-child{margin-top:0}.try-this p:last-child{margin-bottom:0}

/* End-of-article furniture */
.sources{color:var(--muted);font-size:.95rem;padding-left:1.2em}
.sources li{margin:.4em 0}
.reviewed{color:var(--muted);font-size:.85rem;margin-top:44px}
.disclaimer{color:var(--muted);font-size:.85rem;border-top:1px solid var(--line);padding-top:20px;margin-top:10px}

.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}

/* Email capture: a single reusable component used on the homepage preview
   and near the end of every guide page. Deliberately plain (no icons, no
   drop shadow) so it reads as a quiet, useful offer rather than a popup. */
.game-to-book-label{font-weight:800;margin:0 0 6px;font-size:1.05rem}
.game-to-book-intro{color:var(--muted);margin:0 0 16px;font-size:.94rem}
.email-capture{background:var(--sage);border-radius:var(--radius-lg);padding:26px 28px;margin:32px 0}
.email-capture h3{margin:0 0 6px;font-size:1.15rem}
.email-capture p{margin:0 0 16px;color:#3d5744;font-size:.96rem}
.email-form{display:flex;gap:10px;flex-wrap:wrap}
/* display:flex would otherwise beat the browser's [hidden] rule, leaving the
   form on screen next to its own success message. */
.email-form[hidden]{display:none}
.email-form input[type="email"]{
  flex:1 1 220px;min-width:0;padding:12px 18px;border-radius:999px;
  border:1px solid var(--line);font:inherit;font-size:.96rem;background:#fff;color:var(--ink)
}
.email-form input[type="email"]:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.email-form button{flex:0 0 auto;border:none;cursor:pointer;font-family:inherit;font-size:inherit;line-height:inherit}
.email-form-note{margin:10px 0 0;font-size:.8rem;color:var(--muted)}
.email-form-error{margin:8px 0 0;font-size:.85rem;font-weight:700;color:#b3261e}
/* Shown in place of the form after a successful signup (email-capture.js).
   Was previously declared but unused. */
.email-form-success{display:grid;gap:8px;justify-items:start}
.email-form-success:focus{outline:none}
.email-success-title{margin:0;font-weight:800;font-size:1.05rem;color:var(--green)}
.email-success-text{margin:0;font-size:.92rem;color:var(--muted)}
.email-success-cta{margin-top:4px}
@media(max-width:480px){
  .email-form{flex-direction:column}
  /* flex-basis applies to the main axis, which switches to vertical in
     column mode, so the row layout's "220px" would otherwise inflate the
     input's height instead of its width: reset it explicitly here. */
  .email-form input[type="email"],.email-form button{width:100%;flex:none}
}

.contact-form{max-width:560px;margin:28px 0}
.contact-form .field{margin-bottom:18px}
.contact-form label{display:block;font-weight:700;margin-bottom:6px}
.contact-form input,.contact-form textarea{
  width:100%;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--line);
  font:inherit;font-size:1rem;background:#fff;color:var(--ink)
}
.contact-form textarea{resize:vertical;min-height:140px}
.contact-form .field-label{font-weight:700;margin:0 0 6px}
.contact-form label.file-add{display:inline-flex;margin:0;padding:9px 16px;font-weight:700;cursor:pointer}
.contact-form label.file-add[hidden]{display:none}
.contact-form .file-input:focus-visible+.file-add{outline:2px solid var(--green);outline-offset:2px}
.contact-form .file-list{list-style:none;margin:0 0 10px;padding:0}
.contact-form .file-list li{display:flex;align-items:center;gap:12px;padding:8px 8px 8px 14px;margin-bottom:6px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm)}
.file-list .file-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-list .file-size{color:var(--muted);font-size:.85rem;white-space:nowrap}
.contact-form .file-remove{background:none;border-radius:var(--radius-sm);padding:6px 10px;color:#b3261e;font-weight:700;font-size:.9rem}
.contact-form .file-remove:hover{background:#fbeeed}
.contact-form .file-remove:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.field-optional{font-weight:400;color:var(--muted)}
.contact-form input:focus-visible,.contact-form textarea:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.contact-form button{border:none;cursor:pointer;font-family:inherit;font-size:inherit;line-height:inherit}
.contact-form button:disabled{opacity:.6;cursor:wait}
.field-hint{margin:6px 0 0;font-size:.85rem;color:var(--muted)}
.hp-field{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.contact-form-status{margin:14px 0 0;font-weight:700;color:var(--green)}
.contact-form-status.is-error{color:#b3261e}

/* Product / affiliate: kept visually quieter than editorial content */
.product{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:20px;margin:28px 0;display:grid;grid-template-columns:130px 1fr;gap:20px;align-items:start}
.product-cover{width:130px;height:180px;object-fit:contain;background:#fff;border-radius:var(--radius-sm);border:1px solid var(--line);padding:6px}
.product .tag{background:var(--bg-alt);color:var(--muted);font-weight:700}
.product h3{margin:10px 0 6px}.product p{color:var(--muted);margin-top:8px;font-size:.96rem}
.product-meta{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.pill{font-size:.75rem;font-weight:700;padding:5px 9px;background:var(--lav);border-radius:999px;color:var(--ink)}
.book-fields{margin:14px 0}
.book-fields>div{margin:7px 0;font-size:.96rem}
.book-fields dt{display:inline;font-weight:800;color:var(--ink)}
.book-fields dt::after{content:": "}
.book-fields dd{display:inline;margin:0;color:var(--muted)}
.buy-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.product .tag.tag-own{background:var(--lav);color:#5a4f8a}
.product .tag.tag-parent{background:#f7e9d7;color:#8a5a2b}




.tools-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.tool-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:20px}
.tool-card h3{margin-bottom:.3em}.tool-card p{color:var(--muted);margin:.4em 0;font-size:.94rem}
.no-cover-note{font-size:.78rem;color:var(--muted);margin-top:8px;font-style:italic}
.cover-fallback{width:130px;height:180px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--sage);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px;gap:6px}
.cover-fallback .cf-label{font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#52705b}
.cover-fallback .cf-title{font-size:.82rem;font-weight:800;color:var(--ink);line-height:1.25}
.cover-fallback .cf-author{font-size:.75rem;color:var(--muted)}
.reco-grid .cover-fallback{width:100%;height:240px;margin-bottom:15px}
.game-fallback{width:130px;height:180px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--lav);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px;gap:6px}
.game-fallback .cf-label{font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#5a4f8a}
.game-fallback .cf-title{font-size:.82rem;font-weight:800;color:var(--ink);line-height:1.25}
.game-fallback .cf-author{font-size:.75rem;color:var(--muted)}
.tool-fallback{width:130px;height:180px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--bg-alt);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px;gap:6px}
.tool-fallback .cf-label{font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8a5a2b}
.tool-fallback .cf-title{font-size:.82rem;font-weight:800;color:var(--ink);line-height:1.25}
.own-disclosure{font-size:.82rem;color:var(--muted);margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.product-cover-link{display:block}

/* Decision-support page template: quick picks, comparison table, and the
   "useful if / choose something else if" trust signals. */
.breadcrumb-nav{font-size:.82rem;color:var(--muted);margin-bottom:18px}
.breadcrumb-nav a{color:var(--muted);text-decoration:none}
.breadcrumb-nav a:hover{color:var(--green)}
.breadcrumb-nav .sep{margin:0 6px;color:var(--line)}
.quick-picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:28px 0}
.quick-pick{background:var(--sage);border-radius:var(--radius-sm);padding:14px 16px}
.quick-pick .qp-label{display:block;font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#52705b;margin-bottom:4px}
.quick-pick a{color:var(--ink);font-weight:800;text-decoration:none;font-size:.98rem}
.quick-pick a:hover{text-decoration:underline}
.compare-table-wrap{overflow-x:auto;margin:28px 0;border:1px solid var(--line);border-radius:var(--radius-md)}
.compare-table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:480px}
.compare-table th,.compare-table td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line)}
.compare-table thead th{background:var(--bg-alt);font-weight:800;color:var(--ink)}
.compare-table tbody tr:last-child td{border-bottom:0}
.compare-table td a{color:var(--green);font-weight:700;text-decoration:none}
.compare-table td a:hover{text-decoration:underline}
.reco-signals{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
.reco-signal{background:var(--bg-alt);border-radius:var(--radius-sm);padding:12px 14px;font-size:.9rem}
.reco-signal .rs-label{display:block;font-weight:800;font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:6px}
.reco-signal.rs-not{background:#fbeee6}
@media(max-width:640px){.reco-signals{grid-template-columns:1fr}}
.together-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-bottom:32px}
.together-item{position:relative}
.together-img{position:relative;display:block;margin-bottom:14px}
.together-img::after{content:"";position:absolute;inset:0;background:var(--img-tint);mix-blend-mode:multiply;pointer-events:none;border-radius:var(--radius-md)}
.together-item img{width:100%;height:auto;border-radius:var(--radius-md);display:block}
.together-item h3{margin-bottom:.3em}
.together-item p{color:var(--muted);margin:0;font-size:.94rem}
.mt-24{margin-top:24px}
.reco-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.reco-grid .product{display:block;margin:0}.reco-grid .product-cover{width:100%;height:240px;margin-bottom:15px}
.footer{border-top:1px solid var(--line);padding:40px 0;margin-top:40px;color:var(--muted)}
.footer-grid{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:start}.small{font-size:.85rem}
.footer-links{display:flex;gap:18px;flex-wrap:wrap;font-size:.88rem;font-weight:700}
.footer-links a{text-decoration:none;color:var(--muted)}.footer-links a:hover{color:var(--ink)}

/* Sticky mobile CTA: shown only below 700px, and only on the homepage (the
   only page that includes the element). Hidden automatically near the
   footer via a "near-footer" class toggled by a small IntersectionObserver
   in home.js. */
.sticky-cta{display:none}

@media(max-width:1024px){.container,.article{width:min(100%,calc(100% - 40px))}}
@media(max-width:900px){.hero-grid,.grid4,.grid3,.reco-grid,.tools-grid{grid-template-columns:1fr}.section{padding:48px 0}.steps,.together-grid,.about-split{grid-template-columns:1fr}.about-split-image{max-height:280px}}
@media(max-width:640px){.featured-workbook{grid-template-columns:1fr;text-align:center}.featured-workbook-cover{max-width:160px;margin:0 auto}}
@media(max-width:700px){
  .nav-toggle{display:inline-flex;order:3}
  .nav-cta{order:2}
  /* The header CTA is redundant weight on mobile: its long label wraps the
     brand and crowds the menu button, and every page that has this problem
     also already has the persistent bottom .sticky-cta with the same
     destination, so the game is never actually out of reach. */
  body:has(.sticky-cta) .nav-cta{display:none}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 var(--radius-md) var(--radius-md);padding:10px 20px 16px;box-shadow:var(--shadow)}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 4px;border-top:1px solid var(--line)}
  .nav-links a:first-child{border-top:0}
  .hero-grid,.grid4,.grid3,.grid2{grid-template-columns:1fr}
  .hero{padding-top:40px}
  /* The persistent bottom .sticky-cta already offers this exact action
     from the moment the page loads, so a second identical green button
     inside the hero is pure duplication: remove it here and let the
     "Find something that may help" link stand alone as a quiet secondary
     action instead of a second competing button. */
  .hero .actions .primary{display:none}
  .hero .actions .secondary{background:none;border-color:transparent;box-shadow:none;padding:12px 0;color:var(--green);text-decoration:underline;font-weight:700}
  .section{padding:40px 0}
  .product{grid-template-columns:1fr}
  .product-cover{width:140px;height:200px;margin:0 auto}
  .cover-fallback{width:140px;height:200px;margin:0 auto}
  .game-fallback{width:140px;height:200px;margin:0 auto}
  .tool-fallback{width:140px;height:200px;margin:0 auto}
  .topic-actions{flex-direction:column;align-items:stretch;margin:18px 0 24px}
  .topic-actions .button{width:100%}
  /* The three topic sections and the recommendations section each stack
     three full-width book cards, which alone adds up to roughly ten
     screens of scrolling on a phone. Books are supporting material here
     (the primary action in every one of these sections is the game/guide
     link above), so on mobile they become a swipeable row instead of a
     tall stack, nothing is removed or hidden: it's just laid out
     sideways, and every card, link and paragraph stays exactly as
     crawlable as before. */
  .topic-books{
    display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding:2px 20px 10px;
    margin:8px -20px 0;scrollbar-width:thin;
  }
  .topic-books .book-card{flex:0 0 auto;width:76vw;max-width:280px;scroll-snap-align:start}
  .book-cover-img{height:150px}
  #recommendations,#guides{padding:40px 0}
  /* Guide cards stay a stacked, fully-scannable list (this is core
     editorial content, not a supporting recommendation), just shorter per
     card so three of them do not dominate the screen. */
  .guide-card .card-image{aspect-ratio:16/9}
  .guide-card .card-body{padding:16px}
  .guide-card .card-body p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .problem-card{min-height:0;padding:22px 20px;gap:10px}
  .cta-banner{padding:44px 24px}
  .trust-strip{font-size:.78rem;padding:14px 0}
  .sticky-cta{
    display:flex;align-items:center;justify-content:center;
    position:fixed;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom));
    z-index:30;min-height:52px;background:var(--green);color:#fff;font-weight:800;
    text-decoration:none;border-radius:999px;box-shadow:0 10px 24px rgba(0,0,0,.2);
    transition:opacity .2s ease,transform .2s ease
  }
  .sticky-cta.is-hidden{opacity:0;transform:translateY(16px);pointer-events:none}
  body:has(.sticky-cta){padding-bottom:78px}
}
@media(max-width:700px){
  /* On a phone the illustration filled the first screen and pushed the
     problem cards below it; the offer list now carries the hero. */
  .hero .hero-visual{display:none}
  .hero-offer{flex-direction:column;align-items:flex-start;gap:8px}
  .section.problems-lead{padding-top:24px}
  .problems-lead .problems-grid{padding-top:0}
}
@media(max-width:480px){
  .brand{font-size:1.15rem}
  .nav-cta{padding:10px 14px;font-size:.85rem}
  .hero{padding:28px 0 32px}
  .hero p{font-size:1.05rem}
  .actions{margin-top:22px}
  .article{padding:40px 0 56px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .card,
  .card:hover,
  .preview-response{animation:none}
}

.about-hero{max-width:640px;height:auto;aspect-ratio:auto;object-fit:contain;margin:28px auto 8px}
.about-next{background:var(--sage);border-radius:var(--radius-lg);padding:26px 28px;margin:48px 0 32px}
.about-next h2{margin-top:0}
.about-next .button{margin:4px 0}
@media(max-width:480px){
  .about-next{padding:22px 18px}
  .about-next .button{display:flex;justify-content:center;text-align:center}
}

/* Header: the full link row plus the long CTA needs about 1180px, so smaller
   laptops get the short CTA label, tablets get the menu button too, and
   phones keep the short label so it never sits on top of the menu button. */
.nav-cta-short{display:none}
.nav-toggle,.nav-cta{flex:none}
.brand{min-width:0}
@media(max-width:1180px){
  .nav-cta-long{display:none}
  .nav-cta-short{display:inline}
}
@media(max-width:1000px){
  .nav-toggle{display:inline-flex;order:3}
  .nav-cta{order:2;margin-left:auto}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;z-index:25;flex-direction:column;align-items:stretch;gap:2px;background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 var(--radius-md) var(--radius-md);padding:10px 20px 16px;box-shadow:var(--shadow)}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 4px;border-top:1px solid var(--line)}
  .nav-links a:first-child{border-top:0}
}
@media(max-width:560px){
  .nav{gap:12px}
  .brand span{white-space:nowrap}
  .nav-cta-long{display:none}
  .nav-cta-short{display:inline}
}
@media(max-width:430px){.brand span{display:none}}

.product-feature{grid-template-columns:200px 1fr}
.product-feature .product-cover{width:200px;height:280px}
@media(max-width:700px){
  .product-feature{grid-template-columns:1fr}
  .product-feature .product-cover{width:140px;height:200px;margin:0 auto}
}

/* Solid header so page text doesn't show through it while scrolling. */
.site-header{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}

/* Homepage "practise this idea another way" books: one full-width row per
   book (cover beside the details), stacked one after another, instead of
   narrow columns squeezed inside the preview card. */
.game-to-book .topic-books{display:grid;grid-template-columns:1fr;gap:14px;margin:0;padding:0;overflow:visible}
.game-to-book .situational-book-card{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:18px;row-gap:2px;align-items:start;padding:18px;width:auto;max-width:none}
.game-to-book .situation-label{grid-column:1/-1;font-size:.95rem;line-height:1.4;margin:0 0 10px}
.game-to-book .book-cover-link{grid-column:1;grid-row:2/span 4;align-self:start}
.game-to-book .book-cover-img{height:136px;padding:6px}
.game-to-book .situational-book-card>h4,
.game-to-book .situational-book-card>.book-fields,
.game-to-book .situational-book-card>.button,
.game-to-book .situational-book-card>.small{grid-column:2}
.game-to-book .situational-book-card>h4{margin:0;font-size:1.05rem}
.game-to-book .book-fields{margin:6px 0 0}
.game-to-book .book-fields>div{margin:4px 0;font-size:.92rem;line-height:1.5}
.game-to-book .situational-book-card>.button{justify-self:start;margin-top:10px}
@media(max-width:700px){
  .game-to-book .topic-books{display:grid;overflow:visible;margin:0;padding:0}
  .game-to-book .topic-books .book-card{width:auto;max-width:none}
}
@media(max-width:420px){
  .game-to-book .situational-book-card{grid-template-columns:72px minmax(0,1fr);column-gap:14px;padding:16px}
  .game-to-book .book-cover-img{height:104px}
  .game-to-book .situational-book-card>.button,
  .game-to-book .situational-book-card>.small{grid-column:1/-1}
  .game-to-book .situational-book-card>.button{justify-self:stretch;text-align:center}
}
@media(max-width:380px){.game-to-book .situational-book-card>.button{padding:12px 10px;font-size:.88rem}}

/* ---------- Book of the Week ---------- */
.botw-section{padding:32px 0;background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.botw-card{display:grid;grid-template-columns:132px minmax(0,1fr);gap:28px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 32px;box-shadow:var(--shadow)}
.botw-body{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.botw-cover{display:block;border-radius:var(--radius-sm);background:var(--bg-alt);padding:8px}
.botw-cover-img{display:block;width:100%;height:180px;object-fit:contain}
.botw-label{margin:0 0 6px;font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#58715c}
.botw-title{margin:0;font-size:clamp(1.4rem,2.4vw,1.8rem);letter-spacing:-.02em}
.botw-author{margin:2px 0 8px;color:var(--muted);font-size:.95rem}
.botw-desc{margin:0 0 12px;font-size:1.02rem;line-height:1.55}
.botw-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.botw-main .botw-desc{margin-bottom:12px}
.botw-ask{background:var(--sage);border-radius:var(--radius-md);padding:12px 16px;margin:0 0 10px}
.botw-ask-label{margin:0;font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#3d5744}
.botw-ask-text{margin:4px 0 0;font-weight:700;line-height:1.45}
.botw-activity{margin:0 0 14px;color:var(--muted);font-size:.95rem;line-height:1.5}
.botw-activity strong{color:var(--ink)}
.botw-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.botw-amazon{font-size:.92rem}
.botw-amazon a{display:inline-flex;align-items:center;min-height:44px;color:var(--green);font-weight:700;text-underline-offset:3px}
.botw-note{margin:12px 0 0;font-size:.85rem;color:var(--muted)}
@media(min-width:1000px){
  .botw-body{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:36px;align-items:center}
  .botw-side{border-left:1px solid var(--line);padding-left:36px}
}
@media(max-width:700px){
  .botw-section{padding:20px 0}
  .botw-card{grid-template-columns:76px minmax(0,1fr);gap:14px 16px;padding:18px 16px}
  .botw-cover{padding:4px;grid-column:1;grid-row:1 / span 3;align-self:start}
  .botw-cover-img{height:104px}
  .botw-body,.botw-main,.botw-side{display:contents}
  .botw-label,.botw-title,.botw-author{grid-column:2}
  .botw-label{grid-row:1;margin:0}
  .botw-title{grid-row:2;font-size:1.25rem;line-height:1.2}
  .botw-author{grid-row:3;margin:0;font-size:.88rem}
  .botw-card{row-gap:6px}
  .botw-desc{margin-top:8px}
  .botw-desc,.botw-tags,.botw-ask,.botw-actions,.botw-note{grid-column:1/-1}
  .botw-desc{margin:0;font-size:.98rem}
  .botw-tags{margin:0}
  .botw-ask{margin:0}
  .botw-activity{display:none}
  .botw-actions .botw-explore{flex:1 1 100%}
  .botw-note{margin:0}
}

/* ---------- Explore more books (Find a Book page) ---------- */
.book-collection-section{margin:40px 0 8px}
.book-collection-intro{color:var(--muted);max-width:640px}
.book-collection{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.book-collection-link{display:flex;gap:14px;align-items:center;height:100%;min-height:44px;padding:12px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);text-decoration:none;color:var(--ink);transition:border-color .15s ease}
.book-collection-link:hover{border-color:var(--green)}
.book-collection-link .botw-cover-img{flex:none;width:60px;height:84px;object-fit:contain;background:var(--bg-alt);border-radius:8px;padding:4px}
.book-collection-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.book-collection-title{font-weight:800;line-height:1.3}
.book-collection-author{color:var(--muted);font-size:.88rem}
.book-collection-skills{color:#3d5744;font-size:.85rem;font-weight:650}
.book-collection-badge{align-self:flex-start;background:var(--sage);color:#3d5744;border-radius:999px;padding:2px 10px;font-size:.75rem;font-weight:800;margin-bottom:2px}
.book-collection-item.is-featured .book-collection-link{border-color:#9bb59f;box-shadow:var(--shadow)}
@media(max-width:480px){.book-collection{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- Welcome popup
   Built by email-popup.js on first visit. A centred card from 640px up and a
   bottom sheet below that: on a phone a full-screen overlay is both harder to
   dismiss and the pattern Google penalises on mobile search landings. */
.gw-popup{
  border:none;padding:28px;width:min(440px,calc(100% - 32px));
  background:var(--surface);color:var(--ink);border-radius:var(--radius-lg);
  box-shadow:0 24px 60px rgba(40,52,44,.22);
  /* Centred by the browser's own top-layer positioning. */
  margin:auto
}
.gw-popup::backdrop{background:rgba(37,49,40,.45)}
/* Gate mode: the backdrop has to actually hide the page, not tint it, or the
   content the gate protects can simply be read through it. */
.gw-popup--gate::backdrop{background:rgba(37,49,40,.97)}
/* No ✕ in gate mode, so the title reclaims the space reserved for it. */
.gw-popup--gate .gw-popup-title{margin-right:0}
/* Browsers with no <dialog> support: a plain fixed overlay holds the gate. */
html.gw-gated,html.gw-gated body{overflow:hidden}
.gw-popup--fallback{
  position:fixed;inset:0;z-index:1000;display:block;
  height:100%;width:100%;max-width:none;border-radius:0;
  overflow:auto;padding:28px;
  /* The card styling collapses into a full-screen panel here, so the page
     behind it is covered rather than merely dimmed. */
  box-shadow:none
}
/* The card is focused on open so the heading is announced first; it is not
   itself an interactive control, so it should not draw a focus ring. Its
   buttons and field keep their own :focus-visible outlines. */
.gw-popup:focus{outline:none}
/* The only way to close the popup by pointer, so it is given a visible
   button shape rather than a faint glyph floating in the corner. */
.gw-popup-close{
  position:absolute;top:10px;right:12px;width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--bg-alt);cursor:pointer;
  font-size:1.5rem;line-height:1;color:var(--ink);border-radius:50%
}
.gw-popup-close:hover{background:var(--line)}
.gw-popup-close:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.gw-popup-title{margin:0 44px 8px 0;font-size:1.3rem}
.gw-popup-text{margin:0 0 18px;color:var(--muted);font-size:.96rem}
.gw-popup-form{flex-direction:column;align-items:stretch}
.gw-popup-form input[type="email"]{
  /* The shared rule is flex:1 1 220px, which grows along the main axis; in
     this column layout that stretched the field to fill the card. */
  flex:0 0 auto;width:100%;min-width:0
}
.gw-popup-form button[type="submit"]{width:100%;padding:14px 20px}
.gw-popup-note{margin:12px 0 0;font-size:.78rem;color:var(--muted)}
.gw-popup-note a{color:var(--green);font-weight:700}
/* A plain way out for anyone who wants to read first; styled as text so the
   signup stays the obvious choice. */
.gw-popup-later{
  display:block;margin:10px auto 0;padding:10px 12px;min-height:44px;
  background:none;border:0;cursor:pointer;font:inherit;font-size:.88rem;
  color:var(--muted);text-decoration:underline;text-underline-offset:3px
}
.gw-popup-later:hover{color:var(--ink)}
.gw-popup-later:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:6px}
@media(min-width:640px){
  .gw-popup[open]{animation:gw-popup-in .22s ease-out}
}
@media(max-width:639px){
  /* Bottom sheet: sits above the fold's content rather than covering it. */
  .gw-popup{
    width:100%;max-width:none;margin:auto auto 0;
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    padding:24px 20px calc(20px + env(safe-area-inset-bottom))
  }
  .gw-popup[open]{animation:gw-sheet-in .24s ease-out}
  .gw-popup-title{font-size:1.15rem}
  .gw-popup-text{font-size:.92rem;margin-bottom:14px}
  /* The bottom sheet exists to leave the page readable behind it, which is
     the opposite of what a gate is for: centre it instead. */
  .gw-popup--gate{
    margin:auto;width:calc(100% - 32px);
    border-radius:var(--radius-lg);
    padding:24px 20px calc(24px + env(safe-area-inset-bottom))
  }
  .gw-popup--gate[open]{animation:gw-popup-in .22s ease-out}
}
/* Visual popup: real pages of the pack beside (wide screens) or above
   (narrow screens) a short outcome-led offer. Sized to fit any screen: it
   never grows past the viewport and scrolls inside itself if it must. */
.gw-popup.gw-popup--visual{
  padding:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;width:min(780px,calc(100% - 32px));
  max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);
  grid-template-columns:1fr
}
/* Only while open: a display rule on the closed dialog would override the
   browser's own display:none and leave it sitting at the end of the page. */
.gw-popup.gw-popup--visual[open]{display:grid}
.gw-popup--visual .gw-popup-body{padding:26px 26px 18px;min-width:0}
.gw-popup--visual .gw-popup-close{z-index:2;background:var(--surface)}
.gw-popup-media{position:relative;background:var(--sage);overflow:hidden;height:118px}
.gw-popup-page{
  position:absolute;width:96px;height:auto;border-radius:6px;background:#fff;
  box-shadow:0 6px 16px rgba(40,52,44,.18);transform-origin:50% 100%
}
.gw-popup-page-1{left:calc(50% - 118px);top:30px;transform:rotate(-9deg)}
.gw-popup-page-2{left:calc(50% + 22px);top:30px;transform:rotate(8deg)}
.gw-popup-page-3{left:calc(50% - 48px);top:16px;transform:rotate(-1deg);box-shadow:0 10px 24px rgba(40,52,44,.25)}
.gw-popup-kicker{margin:0 52px 6px 0;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.gw-popup--visual .gw-popup-title{margin:0 0 12px;font-size:1.45rem;line-height:1.2}
.gw-popup-points{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:7px}
.gw-popup-points li{position:relative;padding-left:26px;font-size:.95rem;line-height:1.4}
.gw-popup-points li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;background:var(--sage)}
.gw-popup-points li::after{content:"";position:absolute;left:6.5px;top:6px;width:4px;height:8px;border:solid var(--green);border-width:0 2px 2px 0;transform:rotate(45deg)}
.gw-popup-trust{margin:0 0 14px;font-size:.86rem;color:var(--muted)}
.gw-popup--visual .gw-popup-later{margin-top:4px}
/* Wide screens (iPad landscape, laptops, desktops): pages on the left. */
@media(min-width:720px){
  .gw-popup.gw-popup--visual{grid-template-columns:270px 1fr}
  .gw-popup-media{height:auto;min-height:100%}
  .gw-popup-page{width:150px}
  .gw-popup-page-1{left:30px;top:calc(50% - 130px);transform:rotate(-7deg)}
  .gw-popup-page-2{left:92px;top:calc(50% - 112px);transform:rotate(7deg)}
  .gw-popup-page-3{left:56px;top:calc(50% - 86px);transform:rotate(-2deg)}
  .gw-popup--visual .gw-popup-body{padding:32px 32px 20px}
  .gw-popup-kicker{margin-right:40px}
}
/* Phones: the bottom sheet keeps its shape, just without the outer padding,
   so the page strip runs edge to edge. */
@media(max-width:639px){
  .gw-popup.gw-popup--visual{width:100%;max-height:calc(100vh - 12px);max-height:calc(100dvh - 12px)}
  .gw-popup--visual .gw-popup-body{padding:20px 20px calc(16px + env(safe-area-inset-bottom))}
  .gw-popup--visual .gw-popup-title{font-size:1.22rem}
  .gw-popup-points li{font-size:.9rem}
  .gw-popup-kicker{margin-right:0}
  .gw-popup--visual.gw-popup--gate{width:calc(100% - 32px)}
}
/* Very narrow phones (320px): smaller strip so the form stays in view. */
@media(max-width:359px){
  .gw-popup-media{height:96px}
  .gw-popup-page{width:80px}
  .gw-popup-page-1{left:calc(50% - 98px)}
  .gw-popup-page-2{left:calc(50% + 18px)}
  .gw-popup-page-3{left:calc(50% - 40px);top:14px}
}
/* Short screens (a phone on its side): drop the pictures, keep the offer. */
@media(max-height:520px){
  .gw-popup.gw-popup--visual{grid-template-columns:1fr}
  .gw-popup-media{display:none}
  .gw-popup-kicker{margin-right:52px}
}
/* Corner tab left after a "not now": one tap reopens the offer. */
.gw-teaser{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:40;animation:gw-teaser-in .3s ease-out}
.gw-teaser-open{
  display:block;border:0;cursor:pointer;background:var(--green);color:#fff;
  font:inherit;font-weight:800;font-size:.95rem;letter-spacing:.02em;line-height:1.2;
  padding:14px 20px 14px 18px;border-radius:14px;box-shadow:0 10px 26px rgba(40,52,44,.28)
}
.gw-teaser-open::before{content:"\1F381";margin-right:8px}
.gw-teaser-open:hover{background:#2b4a36}
.gw-teaser-open:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.gw-teaser-close{
  position:absolute;top:-10px;left:-10px;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  border:2px solid #fff;background:var(--ink);color:#fff;font-size:1rem;line-height:1;padding:0
}
.gw-teaser-close::after{content:"";position:absolute;inset:-9px}
.gw-teaser-close:focus-visible{outline:3px solid var(--green);outline-offset:2px}
@media(max-width:700px){
  body:has(.sticky-cta) .gw-teaser{bottom:calc(78px + env(safe-area-inset-bottom))}
  .gw-teaser-open{font-size:.88rem;padding:12px 16px 12px 14px}
}
@keyframes gw-teaser-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.gw-teaser--leaving{animation:gw-teaser-out .28s cubic-bezier(.4,0,1,1) forwards;pointer-events:none}
@keyframes gw-teaser-out{0%{transform:none}80%{opacity:1}100%{opacity:0;transform:translateX(calc(-100% - 40px))}}
@media(prefers-reduced-motion:reduce){.gw-teaser{animation:none}}
@keyframes gw-popup-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes gw-sheet-in{from{transform:translateY(100%)}to{transform:none}}
@media(prefers-reduced-motion:reduce){
  .gw-popup[open]{animation:none}
}

/* ---------------------------------------------------------------- /game
   Introduction shown before the game itself, so the page opens as part of
   Growing Wise rather than dropping straight into a scenario. */
.game-brandbar{background:var(--sage);padding:14px 0}
.game-brandbar-inner{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.game-brandbar-title{margin:0;font-weight:800;font-size:1.05rem;letter-spacing:-.02em}
.game-brandbar-sub{margin:0;color:#3d5744;font-size:.88rem;flex:1 1 auto}
/* The game's own screens carry the page's visible title once it starts. */
.gw-screen-title{font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1.15;letter-spacing:-.03em;font-weight:800;margin:.25em 0}
.game-parent-btn{margin:0;background:none;border:none;cursor:pointer;font:inherit;font-size:.9rem;font-weight:700;color:var(--green);text-decoration:underline;padding:10px 12px;min-height:44px}
.game-parent-btn:hover{color:#2a4735}
.game-parent-btn:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* ------------------------------------------------- Homepage funnel layout
   The problem cards now lead the page, so they get room to breathe rather
   than reading as a secondary band. */
.problems-lead{padding-top:34px}
.problems-lead .problems-grid{margin-top:18px}

.email-capture-wide{margin:0}
/* Game completion: the next step for the grown-up, kept visually quieter
   than the child's own "play another" button and clearly labelled. */
.gw-parent-next{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);display:grid;gap:4px;justify-items:center}
.gw-parent-next-label{margin:0 0 4px;font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.gw-parent-next-link{color:var(--green);font-weight:700;font-size:.95rem;padding:10px 12px;min-height:44px;display:inline-flex;align-items:center}

/* ------------------------------------------------ Growing Wise own books
   Visually distinct from "Growing Wise picks" (books we recommend) and from
   Book of the Week, so it is always clear which books are ours. */
.gw-book-badge{display:inline-block;margin:0 0 10px;padding:5px 13px;border-radius:999px;
  background:var(--lav);color:#4a3d6b;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.breadcrumb{padding:18px 0 0}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;font-size:.85rem;color:var(--muted)}
.breadcrumb li+li::before{content:"→";margin-right:6px;color:var(--line)}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--green)}
.book-detail-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:start}
.book-detail-cover{background:var(--bg-alt);border-radius:var(--radius-lg);padding:20px;display:flex;justify-content:center}
/* Never crop or stretch a book cover. */
.book-detail-cover img{width:100%;height:auto;max-height:520px;object-fit:contain;border-radius:var(--radius-sm);display:block}
.book-detail-subtitle{margin:.2em 0 0;font-size:1.05rem;font-weight:700;color:#3d5744}
.book-detail-lede{margin:.9em 0 0;color:var(--muted)}
.book-detail-actions{margin:24px 0 0}
.book-detail-actions .button{min-height:52px;padding:15px 26px}
.book-detail-note{margin:10px 0 0;font-size:.8rem;color:var(--muted);max-width:52ch}
.book-detail-pending{margin:24px 0 0;font-weight:700;color:var(--muted)}
.book-detail-secondary{margin:16px 0 0}
.book-detail-secondary a{color:var(--green);font-weight:700}
.container.narrow{max-width:720px}
/* "From Growing Wise" cards, used on the homepage and the books page. */
.gw-own-books{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:18px}
.gw-own-card{display:flex;gap:16px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-left:4px solid #b9a3e0;border-radius:var(--radius-md);padding:18px}
.gw-own-card img{width:92px;height:118px;object-fit:contain;border-radius:var(--radius-sm);background:var(--bg-alt);flex:none}
.gw-own-card h3{margin:0 0 4px;font-size:1.05rem}
.gw-own-card p{margin:0 0 10px;color:var(--muted);font-size:.9rem}
.gw-own-card .gw-own-link{color:var(--green);font-weight:800;font-size:.9rem;display:inline-flex;align-items:center;min-height:44px}
@media(max-width:820px){
  /* Mobile order: cover, then title, description and the CTA. */
  .book-detail-grid{grid-template-columns:1fr;gap:24px}
  .book-detail-cover{padding:14px}
  .book-detail-cover img{max-height:360px}
  .book-detail-actions .button{width:100%;justify-content:center}
}
/* A Growing Wise original sits in the same card as the books we recommend,
   with a quiet label rather than promotional styling. */
.gw-original-label{display:inline-block;align-self:flex-start;padding:3px 10px;border-radius:999px;
  background:var(--lav);color:#4a3d6b;font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase}

/* ------------------------------------------------- Book row scrollers
   Three books visible, the rest reached with the arrows or a swipe. */
.book-scroller-wrap{position:relative}
.book-scroller{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 40px)/3);
  gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:4px 2px 12px;margin-top:18px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.book-scroller>.book-card{scroll-snap-align:start;height:100%}
.book-scroll-btn{position:absolute;top:calc(50% - 22px);z-index:2;display:none;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);
  color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer;box-shadow:var(--shadow)}
.book-scroller-wrap.has-overflow .book-scroll-btn{display:flex;align-items:center;justify-content:center}
.book-scroll-prev{left:-14px}
.book-scroll-next{right:-14px}
.book-scroll-btn:hover:not(:disabled){border-color:var(--green);color:var(--green)}
.book-scroll-btn:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.book-scroll-btn:disabled{opacity:.35;cursor:default}
@media(max-width:900px){
  .book-scroller{grid-auto-columns:calc((100% - 20px)/2)}
}
@media(max-width:560px){
  /* A peek of the next card is the clearest hint that the row scrolls. */
  .book-scroller{grid-auto-columns:82%}
  .book-scroll-prev{left:-6px}
  .book-scroll-next{right:-6px}
}
@media(prefers-reduced-motion:reduce){.book-scroller{scroll-behavior:auto}}
/* Homepage classics row: four books in view on wide screens, since each
   card is short (age, one line, one button). */
.section-intro{color:var(--muted);max-width:640px;margin:6px 0 0}
.classics-row .tag{align-self:flex-start}
.classics-author{font-weight:500;color:var(--muted)}
@media(min-width:901px){.classics-row.book-scroller{grid-auto-columns:calc((100% - 60px)/4)}}

/* --------------------------------------------- Grouped book categories
   Six groups instead of fourteen equal buttons. Native <details>, so it
   works without JS and is announced correctly by screen readers. */
.cat-groups{display:grid;gap:12px;margin:18px 0 32px}
.cat-group{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md)}
.cat-group summary{cursor:pointer;list-style:none;padding:16px 20px;min-height:44px;
  display:flex;flex-direction:column;gap:2px;border-radius:var(--radius-md)}
.cat-group summary::-webkit-details-marker{display:none}
.cat-group summary::after{content:"+";position:absolute;right:22px;font-size:1.3rem;font-weight:800;color:var(--green)}
.cat-group[open] summary::after{content:"–"}
.cat-group summary{position:relative;padding-right:52px}
.cat-group summary:hover{background:var(--bg-alt)}
.cat-group summary:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
.cat-group-title{font-weight:800;font-size:1.05rem}
.cat-group-blurb{color:var(--muted);font-size:.9rem}
.cat-group-links{display:flex;flex-wrap:wrap;gap:10px;padding:0 20px 18px}
.cat-chip{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;
  border:1px solid var(--line);border-radius:999px;background:var(--bg-alt);
  text-decoration:none;font-weight:700;font-size:.92rem;color:var(--ink)}
.cat-chip:hover{border-color:var(--green);color:var(--green);background:var(--surface)}
.cat-chip:focus-visible{outline:2px solid var(--green);outline-offset:2px}
/* A heading that only signposts elsewhere should look like a signpost. */
.signpost-card{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:20px 22px;margin:0 0 28px;display:grid;gap:8px;justify-items:start}
.signpost-card h2{margin:0;font-size:1.25rem}
.signpost-card p{margin:0;color:var(--muted)}
/* Support sits here rather than in a child's game-completion screen. */
.about-support{color:var(--muted);font-size:.92rem}
/* Game completion: one clear next action, then a quieter grown-up step. */
.gw-end-secondary{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);display:grid;gap:2px;justify-items:center}
/* Our own book, distinguished from the picks we recommend. */
.product-own{border-left:4px solid #b9a3e0}

/* ------------------------------------- Situational book recommendations
   One book per row, cover beside the details, rather than tall narrow
   columns where the text is squeezed into a few words per line. */
.situational-books{display:grid;gap:20px;margin:18px 0 28px}
.situational-book-card{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:20px}
.situational-cover{display:block}
.situational-cover img{width:150px;height:200px;object-fit:contain;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:6px;display:block}
.situational-body{min-width:0}
.situational-body h4{margin:6px 0 10px;font-size:1.1rem;line-height:1.3}
.situational-body .button{margin-top:14px}
@media(max-width:640px){
  .situational-book-card{grid-template-columns:110px 1fr;gap:16px;padding:16px}
  .situational-cover img{width:110px;height:148px}
  .situational-body .button{width:100%;justify-content:center}
}

/* ------------------------------------------ Parent problem page sections
   Used by the "upset when they lose" page, and intended for the other
   problem pages as they are built out. */
.try-first{background:var(--sage);border-radius:var(--radius-md);padding:20px 22px;margin:22px 0}
.try-first-label{margin:0 0 6px;font-size:.75rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#3d5744}
.try-first p{margin:0 0 8px}
.try-first-phrase{margin:12px 0 0!important;font-size:1.05rem;font-weight:700;color:var(--ink);line-height:1.5}
/* A concrete moment, so a parent recognises their own week immediately. */
.scenario-box{border-left:4px solid var(--green);background:var(--bg-alt);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:16px 20px;margin:22px 0}
.scenario-box p{margin:0;font-style:italic;color:var(--ink)}
.phrase-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:18px 0}
.phrase-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:16px 18px}
.phrase-when{margin:0 0 6px;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.phrase-text{margin:0;font-size:1rem;line-height:1.5;color:var(--ink);font-weight:600}
.small-note{font-size:.88rem;color:var(--muted)}
.five-minute{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius-md);padding:22px;margin:22px 0}
.five-minute h3{margin:0 0 10px}
.five-minute-setup{font-style:italic;color:var(--ink)}
.option-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;list-style:none;padding:0;margin:12px 0}
.option-list li{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:10px 16px;font-size:.94rem}
.five-minute-note{font-size:.88rem;color:var(--muted)}
.five-minute .button{margin-top:8px}
.related-links{display:grid;gap:10px;padding-left:20px}
.related-links a{color:var(--green);font-weight:700}
@media(max-width:560px){
  .phrase-cards,.option-list{grid-template-columns:1fr}
  .five-minute .button,.try-first .button{width:100%;justify-content:center}
}
/* A recommendation we have no licensed cover for still needs to look
   deliberate rather than broken. */
.situational-book-card.no-cover{grid-template-columns:1fr}
/* game.css sets ".gw-game a" to a dark green, which out-specifies .nav-cta
   and left this button's label unreadable on its own dark background.
   Two classes beat one class plus an element, so this wins wherever the
   stylesheets happen to load in. */
.gw-game .game-exit{color:#fff}
.gw-game .game-exit:hover,.gw-game .game-exit:focus-visible{color:#fff}

/* Book search on Find a Book (book-search.js) */
.book-search{background:var(--sage);border-radius:var(--radius-lg);padding:22px 24px;margin:24px 0 8px}
.book-search-label{display:block;font-weight:800;font-size:1.05rem;margin-bottom:10px;color:var(--ink)}
.book-search-row{display:flex;gap:10px}
.book-search-input{flex:1;min-width:0;font:inherit;font-size:1rem;padding:13px 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink)}
.book-search-input:focus{outline:2px solid var(--green);outline-offset:1px}
.book-search-chips,.book-search-ages{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.book-search-chip,.book-search-age{font:inherit;font-size:.85rem;font-weight:700;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.book-search-chip:hover,.book-search-age:hover{border-color:var(--green)}
.book-search-ages::before{content:"Age:";align-self:center;font-size:.85rem;font-weight:700;color:var(--muted);margin-right:2px}
.book-search-age[aria-checked="true"]{background:var(--green);border-color:var(--green);color:#fff}
.book-search-status{margin:14px 0 0;font-weight:700;color:var(--ink)}
.book-search-status:empty{display:none}
.book-search-results .product{margin:16px 0}
.book-search-results .buy-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
@media (max-width:560px){.book-search{padding:18px 16px}.book-search-chips{flex-wrap:nowrap;overflow-x:auto;margin-right:-16px;padding-right:16px;padding-bottom:4px;scrollbar-width:none}.book-search-chips::-webkit-scrollbar{display:none}.book-search-chip{flex:none}.book-search-row .button{padding-left:16px;padding-right:16px}.book-search-results .product{grid-template-columns:84px 1fr;gap:14px}.book-search-results .product-cover{width:84px;height:116px}}

/* Book guides hub (/books) */
.book-guide-nav{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 8px}
.book-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0 8px}
.book-guide-card{display:flex;gap:14px;align-items:flex-start;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);text-decoration:none;color:var(--ink);transition:border-color .15s ease}
.book-guide-card:hover{border-color:var(--green)}
.book-guide-card img{width:64px;height:88px;object-fit:contain;background:#fff;border-radius:6px;flex:none}
.book-guide-card span{display:flex;flex-direction:column;gap:2px;min-width:0}
.book-guide-card strong{font-size:.98rem;line-height:1.25}
.book-guide-card small{color:var(--muted);font-size:.8rem}
.book-guide-card em{font-style:normal;color:var(--muted);font-size:.85rem;line-height:1.35;margin-top:4px}
@media (max-width:560px){.book-guide-grid{grid-template-columns:1fr}}

/* Authors (/authors and /authors/<name>) */
.authors-page{padding:28px 0 64px}
.authors-page h1{margin:12px 0 8px}
.authors-head{display:flex;align-items:center;gap:20px;margin:36px 0 22px;flex-wrap:wrap}
.authors-head h2{margin:0;font-size:1.15rem;font-weight:600}
.authors-head .authors-all{padding-left:20px;border-left:1px solid var(--line);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.85rem;color:var(--green);text-decoration:none}
.author-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 24px;margin-bottom:40px}
.author-grid-small{gap:16px 20px;margin-bottom:12px}
.author-tile{display:flex;align-items:center;gap:16px;text-decoration:none;color:var(--ink);font-family:Georgia,"Times New Roman",serif;font-size:1.15rem;font-weight:600;line-height:1.25}
.author-tile:hover span:last-child{text-decoration:underline}
.author-avatar{flex:none;width:92px;height:92px;border-radius:50%;overflow:hidden;background:var(--sage);border:1px solid var(--line)}
.author-avatar img{width:100%;height:100%;object-fit:cover}
.author-grid-small .author-tile{font-size:1rem}
.author-grid-small .author-avatar{width:56px;height:56px}
.author-letter{margin:24px 0 10px;color:var(--muted);font-size:.95rem;letter-spacing:.08em}
.author-az-nav{display:flex;flex-wrap:wrap;gap:6px 12px;font-weight:800}
.author-az-nav a{color:var(--green);text-decoration:none}
.author-hero{display:grid;grid-template-columns:minmax(0,360px) 1fr;gap:48px;align-items:center;background:var(--bg-alt);border-radius:var(--radius-lg);padding:36px;margin:20px 0 36px}
.author-hero-avatar{display:block;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#fff}
.author-hero-avatar img{width:100%;height:100%;object-fit:cover}
.author-hero-text p{margin:0 0 4px;color:var(--muted)}
.author-hero-text p a{color:var(--green)}
.author-hero-text .author-meta-label{margin-top:16px;color:var(--ink);font-weight:700}
@media (max-width:900px){.author-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.author-hero{grid-template-columns:1fr;gap:20px;padding:20px}.author-hero-avatar{max-width:220px;margin:0 auto}.author-grid{grid-template-columns:1fr;gap:16px}.author-avatar{width:72px;height:72px}}
.author-search{margin:8px 0 6px;max-width:560px}
.author-search input{width:100%;font:inherit;font-size:1rem;padding:13px 18px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink)}
.author-search input:focus{outline:2px solid var(--green);outline-offset:1px}
.author-search-status{min-height:1.4em;margin:6px 0 0;font-weight:700;color:var(--ink)}
.author-search-status:empty{display:none}
.author-search-status a{color:var(--green)}
.author-tile[hidden],.author-letter-group[hidden],.author-az-nav[hidden]{display:none!important}
.author-hero-text .author-bio{margin:6px 0 4px;color:var(--ink);font-size:1.05rem;line-height:1.55;max-width:560px}

/* Support page: one-off PayPal amounts */
.support-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:26px 28px;margin:28px 0 40px}
.support-box h2{margin:0 0 4px}
.support-sub{color:var(--muted);margin:0 0 20px}
.support-amounts{display:flex;flex-wrap:wrap;gap:10px}
.support-amount{position:relative;display:inline-flex;align-items:center;justify-content:center;width:76px;height:60px;border:1.5px solid var(--line);border-radius:var(--radius-md);background:var(--bg);color:var(--ink);font-weight:800;font-size:1.15rem;text-decoration:none;box-shadow:0 2px 6px rgba(40,52,44,.05);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease,background .15s ease}
.support-amount:hover,.support-amount:focus-visible{border-color:var(--green);background:var(--sage);transform:translateY(-2px);box-shadow:0 8px 18px rgba(40,52,44,.1)}
.support-amount:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.support-other{width:auto;padding:0 16px;font-size:.95rem;color:var(--green)}
.support-fine{display:flex;align-items:flex-start;gap:8px;color:var(--muted);font-size:.86rem;margin:20px 0 0}
.support-fine::before{content:"\1F512";font-size:.9rem}
@media (max-width:560px){
  .support-box{padding:22px 18px}
  .support-amounts{display:grid;grid-template-columns:repeat(3,1fr)}
  .support-amount{width:auto}
  .support-other{grid-column:span 3}
}

/* Homepage: small support card under "Why Growing Wise?" */
.home-support{display:flex;align-items:center;justify-content:space-between;gap:18px 24px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:20px 22px;margin:26px 0 18px}
.home-support h3{margin:0 0 4px;font-size:1.1rem}
.home-support p{margin:0;color:var(--muted)}
.home-support>div{flex:1 1 300px}
@media (max-width:560px){.home-support .button{width:100%}}

/* Game end screens: a quiet line pointing to the support page */
.gw-support-note{margin:22px auto 0;max-width:420px;text-align:center;color:var(--muted);font-size:.9rem;line-height:1.5}
.gw-support-note a{color:var(--green);font-weight:700}

/* Homepage "Read, play, practise": one well-loved book to try the tip with */
.featured-read{display:grid;grid-template-columns:150px 1fr;gap:28px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 28px}
.featured-read-cover img{width:100%;height:auto;display:block;border-radius:8px;box-shadow:0 10px 24px rgba(40,52,44,.16)}
.featured-read-body h3{margin:6px 0 8px}
.featured-read-body p{margin:0 0 10px;color:var(--muted)}
.featured-read-ask{background:var(--sage);color:var(--ink)!important;padding:10px 14px;border-radius:var(--radius-sm)}
.featured-read-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
@media(max-width:640px){
  .featured-read{grid-template-columns:1fr;gap:14px;padding:20px}
  .featured-read-cover img{width:104px}
  .featured-read-actions .button{flex:1 1 100%;justify-content:center}
}

/* Homepage topic tabs: Losing / Friendships / Change in one section */
.topic-tabs{display:flex;gap:8px;margin:18px 0 22px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px}
.topic-tabs::-webkit-scrollbar{display:none}
.topic-tab{flex:0 0 auto;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-weight:800;font-size:.95rem;padding:10px 18px;border-radius:999px;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
.topic-tab:hover{border-color:var(--green)}
.topic-tab[aria-selected="true"]{background:var(--green);border-color:var(--green);color:#fff}
.topic-tab:focus-visible{outline:3px solid var(--green);outline-offset:2px}
/* Without the script the tabs do nothing, so hide them and show every panel. */
.topic-tabs-section:not(.tabs-ready) .topic-tabs{display:none}
.topic-tabs-section:not(.tabs-ready) .topic-panel+.topic-panel{margin-top:40px}
.topic-question{font-size:1.35rem;margin:0 0 14px}
.topic-panel .topic-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-bottom:24px}
.topic-links{display:flex;flex-wrap:wrap;gap:6px 18px}
@media(max-width:700px){
  .topic-question{font-size:1.15rem}
  .topic-panel .topic-actions{gap:10px 16px;margin-bottom:18px}
  .topic-panel .topic-actions .big-cta{width:100%;justify-content:center}
}

/* Homepage: Growing Wise's own books, always visible (not inside a tab) */
.own-books{margin-top:28px}
.own-books-row{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:10px}
.own-book{display:grid;grid-template-columns:92px 1fr;gap:16px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:16px}
.own-book-cover img{width:100%;height:auto;display:block;border-radius:6px;box-shadow:0 6px 16px rgba(40,52,44,.14)}
.own-book-body h4{margin:0 0 6px}
.own-book-body p{margin:0 0 12px;color:var(--muted);font-size:.92rem}
@media(max-width:700px){.own-books-row{grid-template-columns:1fr}.own-book{grid-template-columns:76px 1fr}}

/* Donation prompt after a contact message or a pack download (donate-prompt.js) */
.gw-donate{border:none;padding:30px 28px 22px;width:min(440px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow-y:auto;background:var(--surface);color:var(--ink);border-radius:var(--radius-lg);box-shadow:0 24px 60px rgba(40,52,44,.22);text-align:center;margin:auto}
.gw-donate::backdrop{background:rgba(37,49,40,.45)}
.gw-donate[open]{animation:gw-popup-in .22s ease-out}
.gw-donate:focus{outline:none}
.gw-donate-close{position:absolute;top:10px;right:12px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--bg-alt);cursor:pointer;font-size:1.5rem;line-height:1;color:var(--ink);border-radius:50%}
.gw-donate-close:hover{background:var(--line)}
.gw-donate-close:focus-visible,.gw-donate-later:focus-visible,.gw-donate-amount:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.gw-donate-heart{margin:0 auto 8px;width:48px;height:48px;border-radius:50%;background:var(--sage);color:#c4566c;display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.gw-donate-title{margin:0 24px 8px;font-size:1.3rem;line-height:1.25}
.gw-donate-lead{margin:0 0 18px;color:var(--muted);font-size:.95rem}
.gw-donate-amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gw-donate-amount{display:flex;align-items:center;justify-content:center;height:56px;border:1.5px solid var(--line);border-radius:var(--radius-md);background:var(--bg);color:var(--ink);font-weight:800;font-size:1.15rem;text-decoration:none;transition:transform .15s ease,border-color .15s ease,background .15s ease}
.gw-donate-amount:hover{border-color:var(--green);background:var(--sage);transform:translateY(-2px)}
.gw-donate-other{grid-column:1/-1;height:46px;font-size:.95rem;color:var(--green)}
.gw-donate-fine{margin:14px 0 4px;font-size:.8rem;color:var(--muted)}
.gw-donate-later{margin-top:6px;padding:10px 12px;min-height:44px;background:none;border:0;cursor:pointer;font:inherit;font-size:.88rem;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.gw-donate-later:hover{color:var(--ink)}
@media(prefers-reduced-motion:reduce){.gw-donate[open]{animation:none}}
/* "Try it with a favourite": room between the section intro and the card. */
#featured-read .featured-read{margin-top:18px}
/* Find a Book: paged sections with a search box (book-pager.js) */
.product[hidden],.pager-nav[hidden]{display:none}
.pager-tools{margin:18px 0 8px;padding:14px 16px;background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius-md)}
.pager-label{display:block;font-weight:700;margin-bottom:6px}
.pager-search{width:100%;max-width:420px;padding:10px 12px;font:inherit;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink)}
.pager-count{color:var(--muted);font-size:.9rem;margin:8px 0 0}
.pager-nav{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:18px 0 28px}
.pager-btn{min-width:40px;min-height:40px;padding:6px 12px;font:inherit;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);cursor:pointer}
.pager-btn:hover:not(:disabled){border-color:var(--green)}
.pager-btn.is-current{background:var(--green);border-color:var(--green);color:#fff;font-weight:700}
.pager-btn:disabled{opacity:.45;cursor:default}
.pager-gap{padding:0 4px;color:var(--muted)}
/* Find a Book hub: topic grid (scripts/build-find-a-book.js) */
.topic-grid{display:grid;grid-template-columns:1fr;gap:14px;margin:16px 0 36px}
@media(min-width:720px){.topic-grid{grid-template-columns:1fr 1fr}}
.topic-card{display:flex;gap:14px;align-items:center;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);color:var(--ink);text-decoration:none;box-shadow:var(--shadow)}
.topic-card:hover{border-color:var(--green)}
.topic-covers{display:flex;flex:none}
.topic-covers img{width:42px;height:58px;object-fit:cover;border-radius:4px;border:2px solid var(--surface);margin-left:-12px;background:var(--bg-alt)}
.topic-covers img:first-child{margin-left:0}
.topic-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.topic-title{font-weight:700;font-size:1.08rem}
.topic-blurb{color:var(--muted);font-size:.92rem}
.topic-meta{font-size:.82rem;color:var(--green);font-weight:600}
/* Find a Book topic pages */
.topic-chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 8px}
.chip-count,.section-count,.band-count{font-weight:400;color:var(--muted);font-size:.8em}
.topic-section{margin-top:36px}
.book-band{margin:26px 0 6px}
.book-list{display:grid;grid-template-columns:1fr;gap:12px;margin:12px 0}
@media(min-width:760px){.book-list{grid-template-columns:1fr 1fr}}
.product.product-compact{grid-template-columns:76px 1fr;gap:14px;padding:14px;margin:0}
.product-compact .product-cover{width:76px;height:auto}
.product-compact h3{font-size:1rem;margin:0 0 4px;line-height:1.3}
.product-by{display:block;font-weight:400;color:var(--muted);font-size:.88rem}
.product-meta{font-size:.86rem;color:var(--muted);margin:0 0 6px}
.product-why{font-size:.9rem;margin:0 0 8px}
.product-why summary{cursor:pointer;color:var(--green);font-weight:600}
.product-why p{margin:6px 0 0}
.product-compact .buy-row{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
/* Authors index (scripts/build-authors.js, authors-page.js) */
.author-spotlight{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;margin:20px 0 36px}
.spotlight-item[hidden]{display:none}
.spotlight-head{display:flex;gap:20px;align-items:center}
.spotlight-avatar{width:96px;height:96px}
.spotlight-head h3{margin:6px 0 6px;font-size:1.5rem}
.spotlight-head h3 a{color:var(--ink);text-decoration:none}
.spotlight-head p{margin:0;color:var(--muted);max-width:620px}
.spotlight-books{display:flex;gap:14px;overflow-x:auto;padding:16px 2px 6px;scroll-snap-type:x mandatory}
.spotlight-book{flex:none;width:92px;scroll-snap-align:start;color:var(--ink);text-decoration:none;font-size:.8rem;line-height:1.3}
.spotlight-book img{width:92px;height:126px;object-fit:cover;border-radius:6px;display:block;margin-bottom:6px;box-shadow:var(--shadow)}
.spotlight-book:hover span{text-decoration:underline}
.spotlight-more{margin:8px 0 0}
.spotlight-controls{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.author-controls{display:flex;flex-direction:column;gap:10px;margin:8px 0 10px}
.filter-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filter-label{font-weight:700;font-size:.9rem;min-width:44px}
.filter-chip{font:inherit;font-size:.88rem;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.filter-chip:hover{border-color:var(--green)}
.filter-chip[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.author-controls select{font:inherit;padding:6px 10px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.filter-clear{background:none;border:0;cursor:pointer;font:inherit;color:var(--green);text-decoration:underline}
.author-cards{display:grid;grid-template-columns:1fr;gap:12px;margin:0 0 12px}
@media(min-width:640px){.author-cards{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.author-cards{grid-template-columns:1fr 1fr 1fr}}
.author-card{display:flex;gap:12px;align-items:flex-start;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);color:var(--ink);text-decoration:none}
.author-card:hover{border-color:var(--green)}
.author-card[hidden],.author-letter-group[hidden],[data-author-groups][hidden],[data-author-flat][hidden],.filter-clear[hidden]{display:none!important}
.author-card-covers{display:flex;flex:none}
.author-card-covers img{width:40px;height:56px;object-fit:cover;border-radius:4px;border:2px solid var(--surface);margin-left:-14px;background:var(--bg-alt)}
.author-card-covers img:first-child{margin-left:0}
.author-card-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.author-card-name{font-weight:700}
.author-card-meta{font-size:.82rem;color:var(--green);font-weight:600}
.author-card-bio{font-size:.85rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:640px){.spotlight-head{flex-direction:column;align-items:flex-start}}
.spotlight-controls [data-surprise]{background:var(--green);border-color:var(--green);color:#fff}
@media(max-width:640px){.author-controls .filter-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}.filter-chip,.filter-label{flex:none}.spotlight-controls .button{flex:1 1 auto;text-align:center}}
.author-card.is-paged-out{display:none!important}
/* Page feedback above the footer (nav.js) */
.page-feedback{border-top:1px solid var(--line);background:var(--bg-alt);padding:18px 0;margin-top:40px}
.page-feedback-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px}
.page-feedback-ask{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.page-feedback-q{font-weight:700;margin-right:4px}
.pf-btn{font:inherit;font-size:.92rem;padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.pf-btn:hover{border-color:var(--green)}
.page-feedback-thanks{margin:0;font-weight:600}
.pf-report-link{background:none;border:0;padding:4px 0;font:inherit;font-size:.92rem;color:var(--ink);text-decoration:underline;cursor:pointer}
.pf-report-link[aria-expanded="true"]{font-weight:700}
.page-feedback-form{margin-top:16px;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);max-width:640px}
.page-feedback-form[hidden],.page-feedback-ask[hidden],.page-feedback-thanks[hidden]{display:none}
.pf-title{font-size:1.15rem;margin:0 0 10px}
.pf-title:focus{outline:none}
.pf-reasons{border:0;padding:0;margin:0 0 14px;display:flex;flex-wrap:wrap;gap:8px}
.pf-reasons legend{font-weight:700;margin-bottom:8px;padding:0}
.pf-chip{position:relative;cursor:pointer}
.pf-chip input{position:absolute;opacity:0;width:1px;height:1px}
.pf-chip span{display:inline-block;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg);font-size:.9rem}
.pf-chip input:checked+span{background:var(--green);border-color:var(--green);color:#fff}
.pf-chip input:focus-visible+span{outline:2px solid var(--green);outline-offset:2px}
.pf-label{display:block;font-weight:700;font-size:.92rem;margin:10px 0 6px}
.pf-optional{font-weight:400;color:var(--muted)}
.page-feedback-form textarea,.page-feedback-form input[type=email]{width:100%;font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);box-sizing:border-box}
.pf-note{font-size:.85rem;color:var(--muted);margin:10px 0 12px}
.pf-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:16px}
.pf-cancel{background:none;border:0;font:inherit;color:var(--ink);text-decoration:underline;cursor:pointer}
.pf-status{margin:10px 0 0;font-weight:600}
.pf-status:empty{display:none}
/* "Why I like this one": a personal note on the main book pages */
.my-take{margin:28px 0;padding:20px 22px;background:var(--bg-alt);border-left:4px solid var(--green);border-radius:var(--radius-md)}
.my-take h2{margin:0 0 10px;font-size:1.2rem}
.my-take p{margin:0 0 10px}
.my-take .my-take-sign{margin:12px 0 0;font-style:italic;color:var(--muted)}
/* Top menu: the page or homepage section you're on (nav.js sets aria-current) */
.nav-links a[aria-current]{color:var(--green);box-shadow:inset 0 -2px 0 var(--green)}
@media(max-width:1000px){.nav-links a[aria-current]{box-shadow:none;color:var(--green);border-left:3px solid var(--green);padding-left:10px}}
.similar-intro{color:var(--muted);margin:-4px 0 14px}
/* Book guides: buying step after the activities (scripts/add-book-buy-buttons.js) */
.next-step{border:1px solid var(--line);border-radius:var(--radius-md);padding:18px 22px;margin:32px 0;background:var(--bg-alt)}
.next-step .next-step-text{margin:0}
.next-step .buy-row{margin-top:12px}
/* "Print these questions": the questions and activities only */
@media print{
  .site-header,.footer,.breadcrumb,.buy-row,.next-step,.email-capture,.page-feedback,.gw-teaser,.gw-popup,
  h2:has(+ .product),h2:has(+ .product) ~ *{display:none!important}
  body{background:#fff;color:#000}
  .product-cover{max-width:90px;height:auto}
}