/* The Situation Room — site styles.
* Extracted verbatim from index.html (2026-09-03). Google Fonts moved to
* as tags: an at-import inside an external sheet serializes an extra round trip.
* Loaded by every public page. Bump the ?v= query on the when you edit this. */
/* Palette — Phase A design-system swap (2026-09-04). Values sampled from the
* approved reference build, mapped by ROLE rather than by name so the 37
* existing var(--forest) call sites keep working:
* --forest is the near-black green used for BOTH dark bands and heading text
* (reference uses #1c2e29 for bands, #1c2826 for text — one value
* covers both, so the token did not need splitting)
* --green is the mid-tone brand green, new — reserved for Phase B accents
* --amber is now TERRACOTTA. Name kept deliberately: renaming it would
* touch 19 call sites for no visual gain. It is the primary CTA colour.
* Door 1/2/3 are the product's mental model and are intentionally unchanged. */
:root{
--forest:#1c2e29; /* dark bands + heading/nav text */
--forest2:#14211d; /* deepest band */
--green:#2e5a44; /* mid brand green — pills, accents (Phase B) */
--cream:#fdfbf7; /* paper */
--cream2:#f5f0e8; /* warm panel */
--ink:#1c2826; /* body text ink */
--door1:#1a3a5c; /* Face It — Door 1 */
--door2:#c45c2a; /* Step Away — Door 2 */
--door3:#2d6b4a; /* Accept — Door 3 */
--amber:#d96b43; /* terracotta — primary CTA, and text on LIGHT grounds */
--amber-l:#e07d52; /* terracotta lifted for text on DARK bands: --amber on
#1c2e29 is 4.17:1, this is 4.91:1 (WCAG AA) */
--amber-d:#b04f2c; /* terracotta, pressed / eyebrow labels — darkened from
the reference's #c15a34, which fell to 4.25:1 on cream
at the 11.5px label size. This is 4.77:1 (WCAG AA). */
--gold:#e69a38; /* measured off the reference; on-dark accent */ /* on-dark PILL text only. The pill's 10% cream wash lifts the
dark ground to ~rgb(51,67,62), where --amber-l falls to
3.62:1. The reference hits the same wall and switches to a
gold there (measuring 4.49:1); this is 4.84:1. */
--muted:#52635e; /* secondary text */
--card:#ffffff;
--border:rgba(46,90,68,.14);
--radius:16px; --radius-sm:12px;
--shadow:0 8px 26px rgba(20,33,29,.08);
--shadow-lg:0 18px 46px rgba(20,33,29,.14);
--fd:'Outfit',system-ui,sans-serif;
--fb:'Plus Jakarta Sans',system-ui,sans-serif;
--fa:'Fraunces',Georgia,serif; /* italic accent on in headings */
/* Weight of that italic accent, in ONE place. Four rules used to set it
* separately -- hero 600, section headings 800, page heads 600, and an
* 800 override on three of the seven pages -- so the same orange phrase
* rendered at two different weights depending on where you landed.
* Fraunces is loaded as a variable font across 400..800, so this is a
* real axis position and not a synthesised weight. */
--fa-em:400;
--fm:'Courier New',monospace;
/* Numeral face. Separate from --fm on purpose: the reference renders ONLY the
* manifesto numerals and the duration labels in JetBrains Mono. Its small
* uppercase labels are not mono at all, so repointing --fm would have changed
* six rules nobody measured. */
--fnum:'JetBrains Mono',ui-monospace,'Courier New',monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
/* scroll-padding-top, not a scroll-margin on each target. nav.top is position:sticky
* at top:0 and stands 80px tall on desktop, 74px below 1201px, so EVERY in-page anchor
* on this site was landing its target underneath the bar - #waitlist and #compare on
* /book, and #refunds on /terms. One rule on the scroll container fixes all of them
* and every anchor added later. 96px is the taller bar plus 16px of air. */
html{scroll-behavior:smooth;scroll-padding-top:96px;}
/* Body weight 400, not 600. Nunito at 600 read as normal; Plus Jakarta Sans at
* 600 reads semibold and made every paragraph shout. All 47 heading/button/label
* rules set their own weight, so this only affects body copy — which is the intent. */
body{font-family:var(--fb);background:var(--cream);color:var(--ink);line-height:1.6;font-weight:400;}
a{text-decoration:none;color:inherit;}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px;}
/* Buttons follow the reference: body font at 16px/700, not display font at
* 15.2px/800. Padding 16px 28px primary, 16px 24px secondary. */
.btn{display:inline-block;border-radius:999px;font-weight:700;font-family:var(--fb);cursor:pointer;border:none;transition:transform .15s,box-shadow .15s;font-size:1rem;}
/* Button ink is --forest2, not --forest: on terracotta the lighter ink measured
* 4.17:1, just under AA. --forest2 lifts it to 4.75:1 and is imperceptibly darker.
* (The reference build uses cream on terracotta — 3.31:1 — which fails outright.) */
.btn-amber{background:var(--amber);color:var(--forest2);padding:16px 28px;box-shadow:0 6px 16px rgba(217,107,67,.32);}
.btn-enroll{display:block;width:100%;background:var(--amber);color:var(--forest2);border:none;border-radius:999px;padding:14px 28px;font-weight:800;font-family:var(--fd);font-size:1rem;cursor:pointer;box-shadow:0 6px 16px rgba(217,107,67,.32);transition:transform .15s,box-shadow .15s;}
.btn-enroll:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(217,107,67,.42);}
.btn-enroll:disabled{opacity:.6;cursor:default;transform:none;}
.btn-amber:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(217,107,67,.42);}
/* Secondary button is brand green, matching the reference's "See how it works".
* --green on cream is 7.6:1, and cream on --green is the same on hover. */
.btn-ghost{background:transparent;color:var(--green);padding:16px 24px;border:2px solid rgba(46,90,68,.25);}
.btn-ghost:hover{background:var(--green);color:var(--cream);}
.btn-green{background:var(--door3);color:#fff;padding:14px 28px;}
.btn-green:hover{transform:translateY(-2px);}
/* Filled forest. The ghost button is right when it sits beside a primary and has to
* lose; "The full method" is alone under its section and was losing to nothing. */
.btn-solid{background:var(--forest);color:var(--cream);padding:16px 28px;}
.btn-solid:hover{background:var(--forest2);transform:translateY(-2px);}
/* ---- LOGO ---- */
.logo{display:flex;align-items:center;gap:12px;}
.logo .mark{width:44px;height:44px;flex-shrink:0;object-fit:contain;display:block;}
.logo .txt{font-family:var(--fd);font-weight:800;font-size:1.15rem;line-height:1;color:var(--forest);}
.logo .txt span{color:var(--amber-d);} /* logotypes are WCAG-exempt, but this
shade is visually identical to the old --door2 and clears 4.5:1 anyway */
/* Nav lockup: wordmark on one line with the tagline beneath. Scoped to nav.top so
* the footer lockup ("The Situation Room." on one line) is untouched. Sizes match
* the reference: 16px/800/-0.4px wordmark, 10px/700/1.8px uppercase tagline.
* The tagline is --amber-d, not --amber: the reference's terracotta is 3.31:1 on
* cream, which fails AA outright at 10px. This is 4.77:1. */
nav.top .logo .mark{width:40px;height:40px;}
nav.top .logo .txt{font-size:1rem;line-height:1.25;letter-spacing:-.025em;}
nav.top .logo .logo-sub{display:block;font-family:var(--fb);font-size:.625rem;font-weight:700;
letter-spacing:.18em;text-transform:uppercase;color:var(--amber-d);line-height:1.25;
margin-top:2px;white-space:nowrap;}
/* Below 600px the tagline's nowrap put a 209px floor under the lockup, forcing the
* mobile bar to 407px of content in 327px of space. Hidden here, the wordmark wraps
* to two lines as it did before and the bar fits. It returns on wider screens. */
@media(max-width:599px){ nav.top .logo .logo-sub{display:none;} }
/* ---- NAV ---- */
/* Floating nav card. Geometry measured from the reference build: 64px tall,
* 16px radius, 16px clear of the viewport top, cream at 85% behind a 24px blur.
* The bar itself is transparent — .inner is the card, and it is already the
* centred 1200px .wrap, so no extra wrapper is needed. */
nav.top{position:sticky;top:0;z-index:100;background:transparent;padding:16px 0 0;}
nav.top .inner{display:flex;align-items:center;justify-content:space-between;height:64px;
background:rgba(253,251,247,.85);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
border:1px solid var(--border);border-radius:var(--radius);
box-shadow:0 1px 2px rgba(20,33,29,.05),0 8px 24px rgba(20,33,29,.06);}
nav.top .links{display:flex;align-items:center;gap:12px;}
nav.top .links a{font-family:var(--fd);font-weight:600;font-size:.85rem;color:var(--forest);white-space:nowrap;}
nav.top .links a:hover{color:var(--door2);}
/* uniform nav link treatment: pill hover + animated underline */
nav.top .links a.nav-link{position:relative;padding:8px 12px;border-radius:999px;transition:background .18s,color .18s;}
nav.top .links a.nav-link::after{content:'';position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:var(--amber);border-radius:2px;transform:scaleX(0);transform-origin:center;transition:transform .22s ease;}
nav.top .links a.nav-link:hover{background:var(--cream2);color:var(--forest);}
nav.top .links a.nav-link:hover::after{transform:scaleX(1);}
/* Current-page pill. --green was reserved for this in the Phase A palette; it is
* the reference's exact active colour. Cream on it is 7.6:1. Same specificity as
* the :hover rule above (0-4-2), so it must stay after it to win. */
nav.top .links a.nav-link.is-active,
nav.top .links a.nav-link.is-active:hover{background:var(--green);color:var(--cream);}
nav.top .links a.nav-link.is-active::after{display:none;}
.nav-fb{display:inline-flex !important;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--amber);color:var(--ink);transition:transform .15s;}
.nav-fb:hover{transform:translateY(-2px);color:var(--ink);}
.nav-toggle{display:none;background:none;border:none;font-size:1.6rem;color:var(--forest);cursor:pointer;}
/* nav Reserve button: consistent sizing + lift + gentle attention pulse */
.nav-reserve{padding:9px 20px !important;font-size:.85rem;border-radius:999px;box-shadow:0 4px 12px rgba(217,107,67,.38);transition:transform .15s ease,box-shadow .15s ease;animation:navPulse 2.8s ease-in-out infinite;}
.nav-reserve:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(217,107,67,.5);animation:none;}
/* The nav CTA sits inside `nav.top .links a` (0-2-2), which out-specifies
* .btn-amber (0-1-0) and was forcing the lighter ink — 4.17:1 on terracotta.
* Matching that specificity restores the accessible button ink. */
nav.top .links a.nav-reserve{color:var(--forest2);}
@keyframes navPulse{0%,100%{box-shadow:0 4px 12px rgba(217,107,67,.38);}50%{box-shadow:0 4px 20px rgba(217,107,67,.6);}}
@media(prefers-reduced-motion:reduce){.nav-reserve{animation:none;}}
/* ---- HERO ---- */
.hero{padding:64px 0 40px;}
.hero .inner{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;}
/* Hero pills — replaces the single .eyebrow, which is now unreferenced.
* Geometry measured from the reference: 12px/700/.18em uppercase, 6px 14px
* padding, 6px icon gap, 14px lucide icons at stroke-width 2. */
.hero-pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px;}
.hpill{display:inline-flex;align-items:center;gap:6px;font-family:var(--fb);font-size:.75rem;
font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:6px 14px;
border-radius:999px;line-height:1.35;white-space:nowrap;}
.hpill svg{flex-shrink:0;}
.hpill-loc{background:var(--green);color:var(--cream);}
/* The reference's age pill is --amber on a 15% amber wash: 2.95:1, well under AA
* at 12px. Outlined instead — --amber-d on the plain ground is 4.77:1 and reads
* near-identically, since that wash is barely visible to begin with. The outline
* is an inset shadow rather than a border so both pills stay exactly 28px tall;
* the reference's bordered pill is 2px taller than its sibling. */
.hpill-age{color:var(--amber-d);box-shadow:inset 0 0 0 1px rgba(217,107,67,.45);}
@media(max-width:520px){ .hpill{font-size:.68rem;letter-spacing:.14em;padding:6px 12px;} }
.hero h1{font-family:var(--fd);font-weight:800;font-size:clamp(2.4rem,4.6vw,3.7rem);line-height:1.04;color:var(--forest);letter-spacing:-.01em;margin-bottom:20px;}
/* Signature accent: Fraunces italic in terracotta. Replaces the old amber
* highlight bar with a thin underline swash — the bar read as a marker pen
* behind a serif face. */
.hero h1 em{font-family:var(--fa);font-style:italic;font-weight:var(--fa-em);color:var(--amber);position:relative;letter-spacing:0;}
.hero h1 em::after{content:'';position:absolute;left:.02em;right:.02em;bottom:-.02em;height:.055em;background:rgba(217,107,67,.42);border-radius:2px;}
/* Desktop-only line breaks. They give the headline the reference's deliberate
* four-line rhythm and keep the italic phrase whole on its own line. Below 900px
* the columns are too narrow for forced breaks, so they collapse and it wraps. */
@media(max-width:900px){ .hero h1 br.hbd{display:none;} }
.hero p.sub{font-size:1.1rem;color:var(--muted);max-width:480px;margin-bottom:30px;line-height:1.6;}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:36px;}
/* Hero art — blob-masked session photo with three floating cards, replacing the
* bobbing owl. Geometry measured from the reference: 460px column, photo inset
* 24px sides / 32px top, cards at 16px radius on white-90% behind a 12px blur. */
.hero-art{position:relative;min-height:460px;}
.hero-photo{position:absolute;inset:32px 24px 0;}
.hero-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%;
border-radius:58% 42% 45% 55% / 52% 48% 55% 45%;
box-shadow:0 30px 80px -24px rgba(20,33,29,.5);}
.hcard{position:absolute;width:210px;background:rgba(255,255,255,.9);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
border:1px solid rgba(46,90,68,.15);border-radius:16px;padding:16px;
box-shadow:0 12px 32px -14px rgba(20,33,29,.3);}
.hcard-label{display:block;font-family:var(--fb);font-size:.625rem;font-weight:700;
letter-spacing:.18em;text-transform:uppercase;line-height:1.2;margin-bottom:6px;}
.hcard p{font-size:.875rem;font-weight:700;color:var(--ink);line-height:1.42;}
.hcard-situation{top:4px;left:-16px;}
.hcard-situation .hcard-label{color:var(--amber-d);}
.hcard-count{bottom:110px;left:-34px;width:176px;}
.hcard-count .hcard-label{color:var(--green);}
.hcard-count p{font-size:.875rem;font-weight:600;color:var(--muted);}
.hcard-count p strong{display:block;font-family:var(--fd);font-size:1.9rem;font-weight:800;
color:var(--green);line-height:1;margin-bottom:2px;}
/* Third card is the one that names the idea the whole page is selling, and on the
* reference it is the only dark object in the hero. Two white cards and one forest
* card reads as a point being made; three white cards read as a list. --gold on
* --forest is 6.1:1 and cream is 13.7:1, both clear of AA at these sizes. */
.hcard-hidden{bottom:6px;right:-12px;width:220px;background:var(--forest);
border-color:rgba(253,251,247,.12);}
.hcard-hidden .hcard-label{color:var(--gold);}
.hcard-hidden p{color:var(--cream);}
/* ---- FEATURE STRIP (MARQUEE) ---- */
/* Light band, not a dark strip: cream2 at 60% between hairline --forest/10 rules,
* 40px vertical padding, 42s loop. width:max-content stops the flex track
* collapsing; the two duplicated halves make translateX(-50%) seamless.
* Type is Fraunces italic 600 in --green, matching the reference and the house
* display pattern (.hero h1 em, .sec h2 em, .tp-quote). Fraunces is loaded on the
* ital@1 axis only, so the italic here is a real cut, never a synthesised oblique.
* An earlier revision set this to 16px Plus Jakarta 400 in --ink with no dots on
* the strength of a style diff that had silently matched nothing on the reference
* side; the amber dot separators below restore the original TSR treatment. */
.strip{background:rgba(245,240,232,.6);border-top:1px solid rgba(46,90,68,.1);
border-bottom:1px solid rgba(46,90,68,.1);padding:16px 0;overflow:hidden;}
.marquee{overflow:hidden;}
.mtrack{display:flex;align-items:center;gap:40px;width:max-content;
animation:marquee 42s linear infinite;font-family:var(--fa);font-style:italic;
font-weight:400;font-size:1.875rem;line-height:1.2;color:rgba(46,90,68,.7);}
.mtrack span{white-space:nowrap;display:inline-flex;align-items:center;gap:40px;}
/* The separator is a drawn circle, not a typographic bullet: on the reference it
* is an 8px element at 60% terracotta, which no font's bullet glyph matches for
* size or weight. It trails every phrase, so the seam between the duplicated
* halves is separated exactly like every other join. */
.mtrack span::after{content:'';flex:none;width:8px;height:8px;
border-radius:9999px;background:rgba(217,107,67,.6);}
@media(prefers-reduced-motion:reduce){.mtrack{animation:none;}}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.strip:hover .mtrack{animation-play-state:paused;}
@media(max-width:1200px){
/* Revert to the edge-to-edge bar below the desktop breakpoint. The dropdown is
absolutely positioned at top:74px across the full width, so it would escape a
floating card; a plain bar keeps that geometry intact. */
nav.top{padding:0;}
nav.top .inner{height:74px;background:rgba(253,251,247,.95);border:none;
border-bottom:1px solid var(--border);border-radius:0;box-shadow:none;}
nav.top .links{display:none;position:absolute;top:74px;left:0;right:0;background:var(--cream);flex-direction:column;padding:16px 24px;gap:14px;border-bottom:1px solid var(--border);}
nav.top .links.open{display:flex;}
.nav-toggle{display:block;}
}
@media(max-width:860px){
.hero .inner{grid-template-columns:1fr;}
/* Single column: the photo becomes an ordinary rounded image below the copy and
the floating cards drop — absolute positioning around a 460px column has no
meaning here, and the cards would cover the faces. The reference hides its
whole art column below 1024px; keeping the photo is strictly more than that. */
.hero-art{order:1;min-height:0;margin-top:32px;}
.hero-photo{position:static;inset:auto;}
.hero-photo img{height:280px;border-radius:var(--radius);box-shadow:var(--shadow-lg);}
.hcard{display:none;}
}
/* ---- SECTIONS ---- */
.sec{padding:80px 0;}
.sec-alt{background:var(--cream2);}
/* The reference's one dark band is pinedark (--forest2 #14211d), with any card
* on it a step lighter at --forest #1c2e29 so it reads as raised without a
* shadow. This class was the lighter of the two, which left nothing for a card
* to sit on. about.html and for-parents.html inherit the darker ground too. */
.sec-dark{background:var(--forest2);color:var(--cream);}
.sec-head{text-align:center;max-width:640px;margin:0 auto 44px;}
.sec-head-left{text-align:left;max-width:720px;margin:0 0 44px;}
.sec-head-left p{margin-left:0;}
/* Eyebrow pill. Was bare Courier mono at 11.5px in terracotta; the reference uses
* a pill: Plus Jakarta 12px/700, 0.2em tracking, green on a pale green ground with
* a hairline border. Measured diff was 8 properties - the biggest single gap left. */
.tag{display:inline-flex;align-items:center;font-family:var(--fb);font-size:.75rem;
font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--green);
background:#e8f0ec;border:1px solid rgba(46,90,68,.2);border-radius:999px;
padding:6px 14px;margin-bottom:16px;line-height:1.35;border-radius:9999px;}
/* On dark bands the pill inverts: cream wash, cream hairline, lifted terracotta.
* The reference uses a gold here that measures 3.9:1 on this ground; --amber-l is 4.9:1. */
.sec-dark .tag,.band-eyebrow{background:rgba(253,251,247,.1);
border-color:rgba(253,251,247,.15);color:var(--gold);}
.sec h2{font-family:var(--fd);font-weight:800;font-size:clamp(1.9rem,3.75vw,3rem);color:var(--forest);line-height:1.08;letter-spacing:-.025em;}
.sec-dark h2{color:var(--cream);}
/* Terracotta text needs lifting on the dark bands — see --amber-l. Buttons are
* excluded: they carry their own background, so their contrast is unaffected. */
/* Scoped down: .tag / .band-eyebrow were dropped from this list. They are pills now
* and are coloured by the rule above; listed here they matched at equal specificity
* but later in the file, so they silently won and kept the pre-pill colour. */
.sec-dark p a:not([class]),.footcol h5{color:var(--amber-l);}
/* 800, not 600: every h2 em on the reference inherits the heading's extrabold.
* The hero h1 em really is 600 there, so .hero h1 em is deliberately left alone. */
.sec-head h1{font-family:var(--fd);font-weight:800;font-size:clamp(1.9rem,3.75vw,3rem);
color:var(--forest);line-height:1.08;letter-spacing:-.025em;}
.sec h2 em,.sec-head h1 em{font-family:var(--fa);font-style:italic;font-weight:var(--fa-em);color:var(--amber);}
.sec-head p{color:var(--muted);margin-top:14px;font-size:1rem;}
/* three doors — clickable cards matching reference */
.doors3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.door{background:var(--card);border-radius:var(--radius);padding:0 30px 26px;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;cursor:pointer;position:relative;overflow:hidden;border-top:7px solid;display:flex;flex-direction:column;}
.door:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.door.d1{border-top-color:var(--door1);}
.door.d2{border-top-color:var(--door2);}
.door.d3{border-top-color:var(--door3);}
.door .dpill{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-family:var(--fd);font-weight:800;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:8px 16px;border-radius:999px;margin:30px 0 16px;}
.door .dpicon{width:22px;height:22px;flex-shrink:0;}
.door.d1 .dpill{background:#dde6ef;color:var(--door1);}
/* Door 2 alone fails AA as pill text: --door2 on its own #f7e2d6 tint is
* 3.42:1 at 11.5px. Darkened here only -- the token still passes in the
* larger type it is used for elsewhere. This one measures 4.66:1. */
.door.d2 .dpill{background:#f7e2d6;color:#a8481e;}
.door.d3 .dpill{background:#dbeee3;color:var(--door3);}
.door .dt{font-family:var(--fd);font-weight:800;font-size:1.7rem;color:var(--forest);line-height:1.08;margin-bottom:14px;}
.door .dd{font-size:.95rem;color:#555;line-height:1.6;}
.door .dbody{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.door.open .dbody{max-height:220px;}
.door .dexlabel{font-family:var(--fd);font-weight:800;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--forest);margin:18px 0 10px;padding-top:18px;border-top:2px dashed var(--border);}
.door .dex{list-style:none;}
.door .dex li{font-size:.92rem;color:#444;padding:5px 0;padding-left:20px;position:relative;}
.door.d1 .dex li::before{content:'●';position:absolute;left:0;color:var(--door2);font-size:.7rem;top:7px;}
.door.d2 .dex li::before{content:'●';position:absolute;left:0;color:var(--amber);font-size:.7rem;top:7px;}
.door.d3 .dex li::before{content:'●';position:absolute;left:0;color:var(--door3);font-size:.7rem;top:7px;}
.door .dfoot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:22px;}
.door .dlabel{font-family:var(--fd);font-weight:800;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;}
/* Was var(--door2) — Door 1's label painted in Door 2's colour. Pre-existing;
* it was also the last contrast failure (4.28:1). --door1 is both correct and 11.6:1. */
.door.d1 .dlabel{color:var(--door1);}
.door.d2 .dlabel{color:var(--amber-d);}
.door.d3 .dlabel{color:var(--door3);}
.door .darrow{font-size:1.2rem;color:var(--forest);transition:transform .2s;}
.door.open .darrow{transform:rotate(45deg);}
/* method — 2x2 numbered card grid */
/* Was a side-by-side: copy in .85fr, four cards in 1.15fr. That gave each card
* about 144px and wrapped the body to one or two words a line. Two-up inside
* the split only got it to 4.6 words a line, still half of what reads easily,
* so the split is gone: the copy sits above and the four phases take the full
* width two-up, which is how every other card grid on the site works. */
.method-split{display:grid;grid-template-columns:1fr;gap:36px;align-items:start;}
.method-left{max-width:720px;}
.method-left h2{font-family:var(--fd);font-weight:800;font-size:clamp(2rem,3.4vw,2.9rem);color:var(--forest);line-height:1.05;margin:6px 0 16px;}
.method-left p{color:var(--muted);margin-bottom:26px;font-size:1.05rem;}
.method-pill{display:inline-block;background:var(--forest);color:#fff;font-family:var(--fd);font-weight:700;font-size:.85rem;padding:14px 22px;border-radius:999px;}
.method-pill .pdot{color:var(--amber);margin-right:6px;font-size:.7rem;vertical-align:middle;}
/* Four-across process row. The manifesto already owns the 2x2 numbered grid, so
* the steps read as a sequence instead of echoing it. auto-fit keeps how-it-works
* (which carries much longer copy in the same component) from cramping. */
/* Two-up, not four. Four columns put each card at 273px on a 1152px page, which
* wrapped this body copy to between 3.7 and 5.7 words a line -- measured on both
* the home page and how-it-works. Two-up gives 566px and 8.5 to 11.5 words, which
* is the range prose actually reads in. The old 1080px fallback keyed off the
* VIEWPORT and so could never have helped: the viewport is widest exactly when a
* column inside it is narrowest. */
.method-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
/* Shared card. Gains the 1px border every card built since Phase A carries
* (track tabs, scenario card, hero cards), so the page reads as one system. */
.mcard{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
padding:26px 24px;box-shadow:var(--shadow);
transition:transform .2s,box-shadow .2s,border-color .2s;}
.mcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(46,90,68,.3);}
.mtop{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;}
/* Was a 1.4rem emoji tile. Emoji render as a different glyph on every OS and
* as full-colour artwork on most, which put four unmanaged illustrations on a
* page whose other icons are flat green line work. Now the same inline-SVG
* treatment used everywhere else on the site. */
.micon{width:48px;height:48px;border-radius:14px;background:#e8f0ec;color:var(--green);display:grid;place-items:center;}
.micon svg{width:24px;height:24px;}
/* The lock sits inline in a label, so it rides the text rather than a tile. */
.scn-lockico{display:inline-flex;vertical-align:-2px;color:var(--muted);}
.scn-lockico svg{width:13px;height:13px;}
/* Step badge, not a watermark: the manifesto's faint numerals are the argument,
* these are an ordered process. Was 2.2rem #eadfce - a tan left over from the
* pre-Phase-A amber palette, which no longer belongs to anything. Cream on
* --green is 7.6:1. */
.mnum{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
border-radius:50%;background:var(--green);color:var(--cream);font-family:var(--fd);
font-weight:800;font-size:1rem;line-height:1;margin-bottom:16px;}
.mcard h4{font-family:var(--fd);font-weight:700;font-size:1.15rem;color:var(--ink);
line-height:1.25;margin-bottom:10px;}
/* was #555 - a hardcoded grey that predates the palette and drifted off it */
.mcard p{font-size:.95rem;color:var(--muted);line-height:1.6;}
/* Outcome cards carry no number, so a short terracotta rule gives them the same
* designed feel without implying a sequence they do not have. */
.cardgrid .mcard h4::before{content:'';display:block;width:26px;height:3px;
border-radius:2px;background:var(--amber);margin-bottom:14px;}
@media(max-width:860px){.method-grid{grid-template-columns:1fr;}}
/* Illustrated variant of .mcard (How It Works, the four steps). The four cards were
* text only, which made the densest section on the page also the least readable.
*
* .mcard keeps its border, radius, shadow and hover; this only zeroes the padding so
* the picture can run to the card edge, and moves the padding onto .mbody. The number
* moves into the picture's bottom-left corner rather than sitting above the heading:
* it keeps its own solid --green ground, so it is measured against that and not
* against whatever pixels happen to be under it.
*
* 16/10 with object-fit:cover, not the source 4:3 - four 4:3 pictures two-up put the
* last card most of a screen below the first. The crop takes it off the top and
* bottom, where these scenes are ceiling and floor. */
/* White mount, matching the gallery tiles exactly - 4px of white and a 24px radius -
* because these are now the same kind of object: a picture set into the page rather
* than a panel with a picture in it. The 1px --border hairline goes with it; against
* cream the white ring plus the shadow is the edge, and a hairline outside a white
* mount reads as a second frame around the first. */
.mcard-ill{padding:0;overflow:hidden;border:4px solid #fff;border-radius:24px;
box-shadow:0 8px 30px -10px rgba(46,90,68,.25);}
/* .mcard:hover swings border-color to green, which on a 1px hairline is a hint and
* on a 4px mount is the whole frame changing colour. Held at white; the lift and the
* shadow still carry the hover, and the picture now creeps like a gallery tile. */
.mcard-ill:hover{border-color:#fff;}
.mcard-ill:hover .mshot img{transform:scale(1.04);}
.mshot{position:relative;margin:0;aspect-ratio:16/10;background:#efe9df;}
.mshot img{display:block;width:100%;height:100%;object-fit:cover;
transition:transform .5s ease;}
/* Top-left, not bottom-left. At the bottom the badge sat over the busiest part of
* every one of these illustrations - the floor, where the chairs and the children
* are - so a solid disc had to fight the picture to be read. The top strip of all
* four is wall and whiteboard.
*
* Terracotta is --amber-d, not --amber. Cream on --amber is 3.31:1 and the digit is
* 16px bold, which does not reach the large-text exemption, so it would need 4.5:1
* and miss. --amber-d is 5.11:1 and is the same terracotta the eyebrow labels use. */
.mcard-ill .mnum{position:absolute;left:14px;top:14px;margin-bottom:0;
background:var(--amber-d);box-shadow:0 2px 10px rgba(20,33,29,.35);}
.mbody{padding:22px 24px 26px;}
@media(max-width:600px){
.mshot{aspect-ratio:3/2;}
.mbody{padding:18px 20px 22px;}
}
/* tracks — matching reference: blob corner, tagline, topic list */
.trackgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.tcard{background:var(--card);border-radius:var(--radius);padding:26px 24px 28px;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;text-align:left;position:relative;overflow:hidden;}
.tcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.tblob{position:absolute;top:-30px;right:-30px;width:130px;height:130px;border-radius:0 0 0 130px;opacity:.5;}
.t-explorer .tblob{background:#f6d9c4;}
.t-navigator .tblob{background:#fbeecb;}
.t-strategist .tblob{background:#cfe8db;}
.t-architect .tblob{background:#f4d4ca;}
.ticon{width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;position:relative;z-index:1;}
.tcard .tage{font-family:var(--fd);font-weight:800;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;}
.tcard h4{font-family:var(--fd);font-weight:800;font-size:1.5rem;color:var(--forest);margin-bottom:10px;}
.tcard .ttag{font-style:italic;font-size:.9rem;color:#6a6558;line-height:1.5;margin-bottom:16px;min-height:2.6em;}
.ttopics{list-style:none;}
.ttopics li{font-size:.9rem;color:#444;padding:6px 0;padding-left:18px;position:relative;}
.t-explorer .ttopics li::before{content:'●';position:absolute;left:0;color:var(--door2);font-size:.62rem;top:9px;}
.t-navigator .ttopics li::before{content:'●';position:absolute;left:0;color:var(--amber);font-size:.62rem;top:9px;}
.t-strategist .ttopics li::before{content:'●';position:absolute;left:0;color:var(--door3);font-size:.62rem;top:9px;}
.t-architect .ttopics li::before{content:'●';position:absolute;left:0;color:var(--door2);font-size:.62rem;top:9px;}
/* quiz */
.quizbox{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:40px;margin-top:30px;min-height:210px;display:flex;align-items:center;justify-content:center;}
.qspark{font-size:1.8rem;color:var(--amber);margin-bottom:12px;}
.qq{font-family:var(--fd);font-weight:700;font-size:1.35rem;color:var(--forest);margin-bottom:20px;}
.qopts{display:flex;flex-direction:column;gap:10px;align-items:center;}
.qopts button.opt{background:var(--cream2);color:var(--forest);border:2px solid transparent;padding:13px 24px;border-radius:999px;font-family:var(--fd);font-weight:700;cursor:pointer;transition:all .15s;min-width:260px;}
.qopts button.opt:hover{border-color:var(--amber);transform:translateY(-2px);}
/* challenge */
/* scenario reveal */
.scncard{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:36px;max-width:960px;margin:0 auto;border-left:6px solid var(--amber);}
.scn-tag{font-family:var(--fm);font-size:.72rem;letter-spacing:.12em;color:var(--amber-d);text-transform:uppercase;margin-bottom:14px;}
.scn-quote{font-style:italic;font-size:1.15rem;color:var(--forest);line-height:1.55;margin-bottom:26px;}
.scn-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.scn-h{font-family:var(--fm);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;}
.scn-opt{background:var(--cream2);border-radius:10px;padding:12px 16px;margin-bottom:8px;font-size:.92rem;}
.scn-opt.hid{background:#eaf5ee;border:1px solid var(--door3);color:var(--door3);font-weight:700;filter:blur(5px);transition:filter .4s;}
.scn-hidden.shown .scn-opt.hid{filter:blur(0);}
.scn-more{font-size:.8rem;color:var(--amber-d);font-style:italic;margin-top:6px;}
.scn-reveal.done{display:none;}
/* band */
/* Removed: the pre-pill .band-eyebrow rule lived here and, being later in the file
* at equal specificity, overrode the pill's font, size and colour. .band-eyebrow is
* always paired with .tag in the markup, so it needs no base styling of its own. */
.band p{margin-top:16px;}
.diffgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px;}
.dcard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:26px 22px;transition:transform .2s,background .2s;}
.dcard:hover{transform:translateY(-5px);background:rgba(255,255,255,.08);}
.dcicon{width:48px;height:48px;border-radius:14px;background:var(--amber);display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.dcard h4{font-family:var(--fd);font-weight:800;font-size:1.2rem;color:#fff;margin-bottom:10px;}
.dcard p{font-size:.9rem;color:#c7c1b6;line-height:1.6;margin-top:0;}
@media(max-width:860px){.diffgrid{grid-template-columns:1fr 1fr;}}
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:8px;}
.pcard{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px 26px;transition:transform .2s;}
.pcard:hover{transform:translateY(-5px);}
.picon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.pcard h4{font-family:var(--fd);font-weight:800;font-size:1.2rem;color:var(--forest);margin-bottom:10px;}
.pcard p{font-size:.94rem;color:var(--muted);line-height:1.65;margin-top:0;}
@media(max-width:860px){.pgrid{grid-template-columns:1fr;}}
/* enrollment */
/* Three columns, not four. There are three offers and ground truth says there are
* only ever three, so the fourth track was leaving an empty column and pulling the
* cards off the width of everything else on the page.
*
* The rows are declared here and each card is a subgrid of them, so eyebrow, name,
* price, the highlight line, the feature list and the button each sit on a shared
* baseline across all three cards. They did not before: card 1 has .edesc where 2
* and 3 have .ehl, and card 2's eyebrow wraps to two lines where the others do not,
* so every card started its list at a different height. Matching heights by hand
* would have meant guessing at where text wraps. */
.enrollgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
grid-template-rows:auto auto auto auto 1fr auto;align-items:stretch;justify-content:center;}
.ecard{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:30px;
display:grid;grid-template-rows:subgrid;grid-row:span 6;border:2px solid transparent;}
.ecard.feat{border-color:var(--amber);box-shadow:var(--shadow-lg);position:relative;}
/* Pill, 2026-09-14. Two things changed and both are deliberate.
*
* FONT: was var(--fm), Courier. The token note at the top of this file records that the
* reference renders only numerals and duration labels in mono, and that "its small
* uppercase labels are not mono at all" - this was one such label, in mono, contradicting
* that. It now uses --fb like .tag, the site's other small uppercase pill.
*
* justify-self:start IS LOAD-BEARING. .etop is a direct child of .ecard, which is a
* subgrid; without it the pill stretches the full card width and reads as a banner
* rather than a label. The pill grows the shared eyebrow row, but equally on every
* card, so the subgrid baselines still line up. */
.etop{display:inline-flex;align-items:center;justify-self:start;
font-family:var(--fb);font-size:.65rem;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--amber-d);background:rgba(217,107,67,.1);
border:1px solid rgba(217,107,67,.22);border-radius:999px;padding:5px 12px;
margin-bottom:10px;line-height:1.35;}
/* The featured card already declares itself with a terracotta border, so the terracotta
* pill belongs to it. Every other card takes the green pill the section eyebrows use,
* which keeps "start here" visually singular instead of one of two identical labels. */
.ecard:not(.feat) .etop{color:var(--green);background:#e8f0ec;
border-color:rgba(46,90,68,.2);}
.ecard h3{font-family:var(--fd);font-weight:800;font-size:1.3rem;}
.eprice{font-family:var(--fd);font-weight:800;font-size:2.2rem;color:var(--forest);margin:8px 0 2px;}
.eprice .strike{text-decoration:line-through;color:var(--muted);opacity:.7;font-size:1.3rem;}
.eprice .per{font-size:.95rem;color:var(--muted);font-weight:600;}
.ehl{background:linear-gradient(120deg,#f3e3d2,#ecd5bd);color:var(--forest);font-weight:800;font-size:.82rem;padding:5px 10px;border-radius:6px;display:inline-block;justify-self:start;margin-bottom:12px;}
.edesc{color:var(--muted);font-size:.9rem;margin-bottom:12px;}
.ecard ul{list-style:none;margin:6px 0 20px;}
.ecard ul li{font-size:.88rem;padding:6px 0;border-bottom:1px solid var(--border);color:var(--muted);}
.ecard ul li::before{content:'✓ ';color:var(--green);font-weight:800;}
.efull{width:100%;text-align:center;}
/* Two-up. The subgrid rows are declared on .enrollgrid and consumed by .ecard, so the
* column count is the only thing that changes; the cards still align eyebrow to
* eyebrow and button to button. Capped at 880 so two cards do not stretch to the width
* three used to fill and turn into banners. */
.enrollgrid-2{grid-template-columns:repeat(2,1fr);max-width:880px;margin:0 auto;}
/* Screen-reader-only. The comparison table needs it and the site had no such class,
* which is why the ticks were going to be the only thing carrying the answer. Standard
* clip-rect pattern; not display:none, which removes it from the accessibility tree
* along with everything else. */
.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;}
/* ---- TRUST CHIPS (book) ---- */
/* Left, following the head above them. These are a caption on that lede, not a row of
* their own, so they start where its text starts. */
.trustchips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0 0 8px;}
.trustchips li{background:var(--card);border:1px solid var(--border);border-radius:999px;
padding:9px 18px;font-size:.82rem;font-weight:600;color:var(--forest);
box-shadow:0 2px 8px rgba(20,33,29,.05);}
/* ---- COMPARISON TABLE (book) ---- */
/* Scrolls inside its own box rather than pushing the page sideways: four columns need
* about 640px and the page goes to 375. The rounded frame is on the wrapper, not the
* table, so the corners survive the overflow clip. */
.cmpwrap{max-width:1024px;margin:0 auto;overflow-x:auto;background:var(--card);
border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);}
.cmp{width:100%;min-width:640px;border-collapse:collapse;font-size:.9rem;}
.cmp thead th{background:var(--forest);color:var(--cream);font-family:var(--fd);
font-weight:700;font-size:.85rem;text-align:center;padding:16px 14px;}
.cmp thead th:first-child{text-align:left;padding-left:22px;}
/* --gold, not --amber: this label sits on --forest, where terracotta is 3.0:1 and the
* honey is 6.1:1. Same swap every other dark band makes. */
.cmp thead th.cmp-hi{color:var(--gold);}
.cmp tbody th{text-align:left;font-weight:500;color:var(--ink);padding:14px 14px 14px 22px;}
.cmp tbody td{text-align:center;padding:14px;}
.cmp tbody tr:nth-child(even){background:var(--cream2);}
.cmp-yes{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;
background:rgba(28,46,41,.07);color:var(--forest);font-size:.78rem;font-weight:800;}
.cmp td.cmp-hi .cmp-yes{background:var(--amber-d);color:var(--cream);}
.cmp-no{color:var(--muted);}
.cmp tbody tr.cmp-price th,.cmp tbody tr.cmp-price td{font-family:var(--fd);font-weight:800;
font-size:1.05rem;color:var(--forest);border-top:1px solid var(--border);}
.cmp tbody tr.cmp-price td.cmp-hi{color:var(--amber-d);}
/* ---- BOOK EXTRAS ---- */
.price-save{display:inline-block;margin-top:10px;background:rgba(122,154,139,.15);
color:var(--forest);font-size:.78rem;font-weight:700;padding:5px 12px;border-radius:8px;}
.wrap-faq{max-width:768px;}
/* /faqs' question column: 768px wide but LEFT, not centred. The wrap keeps the site's
* normal 1200 so its left edge lines up with the .pagehead above it, and the cap goes
* on the children instead. Centring the column put it 216px further in than the title
* it belongs to, which reads as a mistake rather than a measure. /book's FAQ block
* keeps .wrap-faq and stays centred - its head is mid-page and centred too. */
.faqcol > *{max-width:768px;}
.faq-all{text-align:center;margin-top:28px;}
.faq-all a{color:var(--amber-d);font-weight:700;text-decoration:underline;
text-underline-offset:3px;}
@media(max-width:760px){
.enrollgrid-2{grid-template-columns:1fr;}
}
.ecard.disabled{opacity:.55;filter:grayscale(1);}
.ecard.disabled .eprice,.ecard.disabled h3{color:var(--muted);}
.ecard.disabled ul li::before{color:var(--muted);}
.btn[disabled]{cursor:not-allowed;pointer-events:none;background:#e2ded6;color:#98928a;border-color:#e2ded6;box-shadow:none;}
.esoldout{display:inline-block;font-family:var(--fd);font-weight:800;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:#98928a;border:1.5px solid #cfc9bd;border-radius:999px;padding:3px 10px;margin-bottom:8px;}
/* --sand was never defined; the fallback was doing all the work */
.emeta{margin:6px 0 14px;padding:12px 14px;background:var(--cream2);border-radius:12px;}
.emeta div{font-size:.85rem;color:var(--muted);padding:3px 0;display:flex;gap:8px;}
.emeta strong{color:var(--forest);font-weight:700;min-width:64px;display:inline-block;}
.bl{font-family:var(--fm);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.chips{display:flex;flex-direction:column;gap:8px;width:100%;}
.chip{height:40px;border-radius:10px;display:flex;align-items:center;padding:0 14px;}
.chip span{color:#fff;font-family:var(--fm);font-size:.72rem;letter-spacing:.05em;}
/* faq — two column matching reference */
.faq-split{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start;}
.faq-left h2{font-family:var(--fd);font-weight:800;font-size:clamp(2rem,3.4vw,2.9rem);color:var(--forest);line-height:1.05;margin:6px 0 16px;}
.faq-left p{color:var(--muted);margin-bottom:24px;font-size:1.05rem;}
/* Fourteen boxed cards became fourteen boxes. The card treatment is right for
* things that sit side by side and have to be told apart; a stacked list of
* questions is one object, and giving every row its own border, radius and 14px of
* air made the page read as a grid of unrelated tiles down a single column.
*
* A hairline between rows is all the separation a list needs. Nothing else changes
* about how it works - same button, same toggle, same open class. */
.faqi{border-bottom:1px solid rgba(28,46,41,.1);}
.faqq{width:100%;text-align:left;background:none;border:none;padding:20px 0;
font-family:var(--fd);font-weight:600;font-size:1.03rem;color:var(--forest);
cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
transition:color .2s;}
/* The open question turns terracotta, so the row you are reading is marked in the
* list itself rather than only by the answer hanging under it. --amber-d, not
* --amber: this is 16.5px at 600, which is normal text and needs 4.5:1. --amber on
* cream is 3.29:1. --amber-d is 5.11:1. */
.faqi.open .faqq{color:var(--amber-d);}
/* The +/- becomes a target rather than a glyph: a 32px disc, quiet when closed and
* solid terracotta when open. Cream on --amber-d is 5.11:1, so the mark holds up as
* text even though it is really an affordance. */
.faqq span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
flex-shrink:0;background:rgba(28,46,41,.05);color:var(--forest);
font-size:1.05rem;font-weight:700;line-height:1;transition:background .2s,color .2s;}
.faqi.open .faqq span{background:var(--amber-d);color:var(--cream);}
.faqa{max-height:0;overflow:hidden;transition:max-height .35s,padding .3s;color:var(--muted);font-size:.94rem;line-height:1.65;}
/* 280px fitted the twelve original answers and clipped the two safety ones added
* 2026-09-08 - the taller of them ran past the cap mid-sentence at 375px, where the
* same words wrap into far more lines than on a desktop. max-height has to stay a
* finite length for the transition to animate, so this is the measured worst case
* with headroom rather than an arbitrary large number. */
.faqa.open{max-height:640px;padding-bottom:22px;}
/* Group labels for the fourteen questions. These divide one list, they do not start
* three sections, so they are a label rather than a section head.
*
* WAS NOT RENDERING. .faq-group is (0,1,0) and .sec h2 is (0,1,1), so every property
* the two rules share went to .sec h2: these labels have been shipping at 38.4px/800
* Outfit in forest - measured on the live page - instead of the small uppercase mark
* this rule describes. Only text-transform, the margins and the old rule survived,
* which is why it looked deliberate. Written as .sec h2.faq-group at (0,2,1) it wins
* on specificity and stays won.
*
* Terracotta rather than green, and the underline goes: the rows carry hairlines of
* their own now, and a fourth line above three of them reads as a heavier division
* than the one it is marking. */
.sec h2.faq-group{font-family:var(--fd);font-size:.875rem;font-weight:700;
letter-spacing:.12em;line-height:1.3;text-transform:uppercase;color:var(--amber-d);
margin:44px 0 6px;padding-bottom:0;border-bottom:0;}
.sec h2.faq-group:first-child{margin-top:0;}
@media(max-width:860px){.faq-split{grid-template-columns:1fr;}}
/* footer */
.foot{background:var(--forest2);color:#fff;padding:56px 0 26px;}
.footgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px;}
.footcol h5{font-family:var(--fd);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);margin-bottom:14px;}
.footcol a{display:block;color:#c9c3d0;font-size:.9rem;padding:5px 0;}
.footcol a:hover{color:#fff;}
.footsocial{display:flex;gap:12px;margin-top:16px;}
.footsocial a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.08);color:#c9c3d0;transition:background .2s,color .2s;padding:0;}
.footsocial a:hover{background:var(--amber);color:var(--ink);}
.footsocial svg{width:18px;height:18px;}
/* Once the lockup gained its tagline (+111px) and Home was added (+61px), the nav
* ran 97px past the card and put a 41px horizontal scrollbar on the page. The
* social icons are the lowest-value items in a nav, are duplicated in the footer,
* and the reference nav carries none — so they drop on desktop and stay in the
* mobile dropdown, which has vertical room. Needs !important to beat .nav-fb's. */
/* 1200.02px, not 1201px. Its partner rule is @media(max-width:1200px), and a viewport
* whose layout width lands between the two - 1200.4px, say, which is what a 1201px
* window with a 15px scrollbar actually produces - satisfied NEITHER. In that 1px gap
* the desktop nav showed AND the social icons showed, which is the one combination the
* nav has no room for: measured 898px of links against a 1152px bar, sitting flush
* against the logo with 0px between them. Pre-existing, and invisible until the
* Pricing link took the last 76px of slack. The two rules tile the range now. */
@media(min-width:1200.02px){
nav.top .links .nav-fb,
nav.top .links .nav-social{display:none !important;}
}
.nav-social{display:inline-flex;align-items:center;justify-content:center;color:var(--forest);transition:color .2s;}
.nav-social:hover{color:var(--amber);}
@media(max-width:860px){
.doors3,.trackgrid,.enrollgrid,.footgrid{grid-template-columns:1fr;}
.enrollgrid{grid-template-rows:none;}
.ecard{grid-row:auto;grid-template-rows:none;}
.sec-split,.scn-cols{grid-template-columns:1fr;}
.trackgrid{grid-template-columns:1fr 1fr;}
}
/* ───── PILOT GALLERY (carousel + lightbox) — carried from live ───── */
.gallery-carousel { position: relative; max-width: 1000px; margin: 0 auto; }
.gallery-track { display: flex; gap: 14px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track .gallery-item { flex: 0 0 calc((100% - 28px) / 3); margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); cursor: pointer; background: var(--cream2); aspect-ratio: 1 / 1; scroll-snap-align: start; }
.gallery-track .gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease, filter .3s ease; }
.gallery-track .gallery-item:hover img { transform: scale(1.04); filter: brightness(1.05); }
.gal-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--ink); color: #fff; font-size: 1.5rem; cursor: pointer; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; opacity: .9; transition: opacity .2s; }
.gal-arrow:hover { opacity: 1; }
.gal-arrow:disabled { opacity: .25; cursor: default; }
.gal-prev { left: -22px; } .gal-next { right: -22px; }
@media (max-width: 900px) { .gallery-track .gallery-item { flex: 0 0 calc((100% - 14px) / 2); } .gal-prev { left: 6px; } .gal-next { right: 6px; } }
@media (max-width: 560px) { .gallery-track .gallery-item { flex: 0 0 85%; } }
/* lightbox */
#lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.92); display: none; align-items: center; justify-content: center; }
#lightbox.open { display: flex; }
#lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 8px; box-shadow: 0 10px 60px rgba(0,0,0,.5); }
#lightbox .lb-close { position: absolute; top: 20px; right: 26px; color: #fff; font-size: 2.2rem; background: none; border: none; cursor: pointer; line-height: 1; }
#lightbox .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 2.6rem; background: none; border: none; cursor: pointer; padding: 0 22px; user-select: none; opacity: .8; }
#lightbox .lb-nav:hover { opacity: 1; }
#lightbox .lb-prev { left: 8px; } #lightbox .lb-next { right: 8px; }
#lightbox .lb-caption { position: absolute; bottom: 46px; left: 0; right: 0; text-align: center; color: #fff; font-size: .95rem; padding: 0 20px; opacity: .92; }
#lightbox .lb-count { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; color: #fff; font-family: var(--fm); font-size: .8rem; opacity: .8; }
#enroll-modal {
position: fixed; inset: 0; z-index: 500;
background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center;
padding: 20px;
}
#enroll-modal.hidden { display: none; }
.enroll-box {
background: var(--card); border-radius: 16px; padding: 40px;
max-width: 460px; width: 100%; box-shadow: 0 24px 80px rgba(0,0,0,.3);
text-align: center;
}
.enroll-box h3 { font-family: var(--fd); font-size: 1.5rem; margin-bottom: 8px; }
.enroll-box p { color: var(--muted); font-size: .9rem; margin-bottom: 24px; }
.enroll-box input {
width: 100%; padding: 12px 16px; font-size: 1rem;
border: 1.5px solid var(--border); border-radius: 7px; margin-bottom: 10px;
background: var(--cream2); font-family: var(--fb);
}
.enroll-close { position: absolute; top: -10px; right: -10px; background: var(--ink); color: #fff; border: none; border-radius: 50%; width: 32px; height: 32px; font-size: 1.1rem; cursor: pointer; }
.enroll-outer { position: relative; }
.stripe-note { font-size: .75rem; color: var(--muted); margin-top: 8px; }
.stripe-note a { color: var(--door1); }
/* ───── RESPONSIVE ───── */
@media (max-width: 640px) {
#pub-nav { position: sticky; flex-wrap: wrap; height: auto; min-height: 60px; padding-top: 10px; padding-bottom: 10px; }
#pub-nav .logo { flex: 1; }
#pub-nav nav {
display: none; width: 100%; flex-direction: column; gap: 0;
margin-top: 14px; border-top: 1px solid rgba(255,255,255,.15);
}
#pub-nav nav.open { display: flex; }
#pub-nav nav a {
padding: 14px 4px; border-bottom: 1px solid rgba(255,255,255,.12); width: 100%;
}
#pub-nav nav a:last-child { border-bottom: none; }
.nav-toggle { display: inline-flex; color: var(--forest); padding: 8px; }
.hero-stats { display: none; }
.options-reveal { grid-template-columns: 1fr; }
.teaser-grid { grid-template-columns: 1fr; }
.gen-layout, .planner-layout { grid-template-columns: 1fr; }
#staff-nav .s-tabs { gap: 2px; }
.s-tab { padding: 6px 10px; font-size: .75rem; }
.enroll-box { padding: 28px 22px; }
}
/* ensure hidden Netlify form + hidden elements stay hidden */
[hidden]{display:none !important;}
/* ═══════════════════════════════════════════════════════════════════
MULTI-PAGE ADDITIONS (2026-09-03)
Added for the page split. Purely additive — no existing selector is
modified, so index.html renders exactly as it did before.
═══════════════════════════════════════════════════════════════════ */
/* Interior page header — no art column.
*
* It used to sit on a --cream2 band with a hairline under it, which made the first
* thing on every interior page a different colour from the page it introduces. The
* head now sits on the page ground; --cream2 is still there for the alternating
* bands FURTHER down, where a change of colour marks a change of section rather
* than separating a page from its own title. About, For Parents and Age Groups had
* already been given background:none one page at a time; this makes it the rule. */
.pagehead{padding:64px 0 0;}
/* A page head is not always the first thing on its page. /why-options leads with the
* evidence section and puts its head further down, where it introduces the chain panel
* rather than the page.
*
* A head that is not first belongs to the section BELOW it, not the one above -- it is
* that section's title. The band post-processor already runs on that principle: it
* starts the ground count at 1 when a page head is present precisely so the head and
* the section under it share a ground and read as one block. That worked only while the
* head was at the top, where both landed on the page cream. Moved down, the head still
* showed the body cream while the section under it was tinted, so the two read as
* separate blocks and the head looked orphaned above a band it introduces.
*
* So the head takes the ground of the section it introduces, and its top padding comes
* back -- 80px, matching .sec, because that space now sits INSIDE the tint instead of
* being a gap above it. The preceding section's 80px bottom plus this 80px top is the
* same 160px that separates any two adjacent sections on the site.
*
* Written with :has() rather than a blanket background so the head follows whatever
* ground the post-processor gave the section beneath it, instead of hardcoding today's
* answer. Only the tint case is handled: a head above a dark band would also need its
* text colours inverted, which is a bigger change than a ground swap, and no page does
* it. A head that IS first has no .sec before it and is untouched -- every other page. */
.sec + .pagehead{padding-top:80px;}
.sec + .pagehead:has(+ .sec-alt){background:var(--cream2);}
/* One gap, not two. Owned by the section so the number is in one place, and specific
* enough (0,2,0) to beat .sec-tight's padding-top:0 on About. */
.pagehead + .sec{padding-top:56px;}
/* A dark band directly after the page head used to sit flush against the head's
* illustration - .pagehead has padding:64px 0 0, no bottom, so the next section's
* BACKGROUND starts at the image's bottom edge even though that section has 56px
* of padding inside it. Padding cannot fix this: it is inside the dark. A margin
* can, because it falls outside the background and shows the page's cream.
*
* Scoped to the adjacency rather than added to .pagehead, which all ten interior
* pages use and where the following band is light on nine of them - there the
* existing 56px of padding is already the right separation and extra space would
* just be a gap. Written as a sibling selector so any future page that puts a
* dark band straight after the head inherits the fix. /how-it-works is the only
* page that does today. */
.pagehead + .sec-dark{margin-top:56px;}
.pagehead + .sec > .wrap > :first-child{margin-top:0;}
.pagehead h1{font-family:var(--fd);font-weight:800;font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.1;letter-spacing:-.02em;color:var(--forest);max-width:16ch;}
.pagehead h1 em{font-family:var(--fa);font-style:italic;font-weight:var(--fa-em);color:var(--amber);}
.pagehead .sub{font-size:1.08rem;color:var(--muted);max-width:620px;margin-top:18px;line-height:1.6;}
/* Light-background card grid. Uses .mcard for the cards themselves —
.dcard is dark-section only and renders near-invisible on cream. */
.cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
/* Three across suits the six-card grid on for-parents, but strands a lone fourth
* card on index and about. This matches a grid whose 4th child is also its last -
* i.e. exactly four cards - and balances those into 2x2. */
.cardgrid:has(.mcard:nth-child(4):last-child){grid-template-columns:repeat(2,1fr);}
@media(max-width:860px){.cardgrid,.cardgrid:has(.mcard:nth-child(4):last-child){grid-template-columns:1fr;}}
@media(max-width:980px){.cardgrid{grid-template-columns:1fr 1fr;}}
@media(max-width:620px){.cardgrid{grid-template-columns:1fr;}}
/* Age-track comparison table */
.tracktable{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);font-size:.95rem;}
.tracktable th{background:var(--forest);color:var(--cream);font-family:var(--fd);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:14px 18px;text-align:left;}
.tracktable td{padding:15px 18px;border-bottom:1px solid var(--border);vertical-align:top;color:#555;}
.tracktable tr:last-child td{border-bottom:none;}
.tracktable td:nth-child(2){font-family:var(--fd);font-weight:800;color:var(--door1);white-space:nowrap;}
.tracktable td:first-child{white-space:nowrap;color:var(--forest);}
@media(max-width:700px){
.tracktable,.tracktable tbody,.tracktable tr,.tracktable td{display:block;width:100%;}
.tracktable thead{display:none;}
.tracktable tr{border-bottom:1px solid var(--border);padding:14px 4px;}
.tracktable td{border:none;padding:3px 14px;}
}
/* First-session guarantee callout */
/* Was #f2f8f4 with a --door3 rule. Door 3 is the Three Doors model, not chrome. */
/* Icon and copy side by side on a neutral panel, replacing a green wash behind a green
* heading with a green rule down its left edge - three greens doing one job. The panel
* has to sit on either banding ground, so it is a neutral wash rather than a tint of
* one of them. */
.guarantee{display:flex;align-items:flex-start;gap:18px;background:rgba(28,46,41,.045);
border:1px solid rgba(28,46,41,.07);border-radius:20px;padding:24px 28px;margin:40px auto 0;
max-width:1024px;}
.guarantee-ico{flex:none;display:grid;place-items:center;width:44px;height:44px;
border-radius:14px;background:#e8f0ec;color:var(--green);}
.guarantee-ico svg{width:22px;height:22px;}
.guarantee h3{font-family:var(--fd);font-weight:800;font-size:1.12rem;color:var(--forest);margin-bottom:9px;}
.guarantee p{font-size:.95rem;color:var(--muted);line-height:1.65;}
.guarantee a{color:var(--green);font-weight:700;}
/* ═══════════════════════════════════════════════════════════════════
AUDIT FOLLOW-UPS (2026-09-04) — additive only.
═══════════════════════════════════════════════════════════════════ */
/* Mobile sticky CTA.
Below 1150px the entire .links block is display:none, which put the primary
conversion action behind the hamburger. The audit asks for it to stay visible
as a sticky CTA on desktop AND mobile. Hidden on desktop, where the in-nav
.nav-reserve button already serves that role. */
.nav-cta-mobile{display:none;}
@media(max-width:1200px){
.nav-cta-mobile{
display:inline-block;
padding:9px 17px !important;
font-size:.8rem;
white-space:nowrap;
box-shadow:0 4px 12px rgba(217,107,67,.32);
}
}
@media(max-width:430px){
/* At 375px the logo, CTA and hamburger have to share one bar. */
.nav-cta-mobile{padding:8px 12px !important;font-size:.72rem;}
nav.top .logo .txt{font-size:.82rem;}
nav.top .logo .mark{width:36px;height:36px;}
}
/* Founding-rate line under the hero CTAs — the only thing the reference carries
* there. Matched to its spec: 14px/600 muted, 24px above, price in terracotta.
* The price uses --amber-d, not --amber: the reference's terracotta is 3.31:1 on
* cream and 14px bold is not "large text", so it needs 4.5. This is 4.77. */
.hero-founding{
margin-top:24px;
font-size:.875rem;
color:var(--muted);
font-weight:600;
}
.hero-founding strong{color:var(--amber-d);font-weight:700;}
/* The sub closes on a bolded ink phrase in the reference, which gives the
* paragraph a hard stop instead of trailing off in muted grey. */
.hero p.sub strong{color:var(--ink);font-weight:700;}
/* "map every option" is the claim the whole page rests on, so it is marked rather
* than bolded. The paragraph has already spent its bold on "Rehearsal for life."
* one sentence later, and two bolds in four lines compete for the same rank
* instead of establishing one — so this takes the OTHER axis: the same soft
* terracotta rule the h1 accent carries two lines above (see .hero h1 em::after),
* which makes it read as part of the hero's existing vocabulary and not a new
* device invented for one phrase.
*
* Colour lifts to --ink, never to --amber. Terracotta measures 3.31:1 on this
* ground (the note at the --amber declaration says so), and coloured body text
* mid-paragraph also reads as a link. The bar carries the emphasis; the text
* colour only stops the phrase sitting in --muted while marked.
*
* Painted as a background gradient, NOT an absolutely-positioned ::after like the
* h1 does. The h1 accent is a short display line that never wraps; this phrase is
* body copy inside a 480px measure and DOES wrap at narrow widths, where one
* absolute bar would stretch across the whole bounding box and strike through the
* first line. box-decoration-break:clone gives each wrapped fragment its own bar.
*
* padding-bottom clears the descenders in "map every" — without it the rule cuts
* through the p and the y.
*
* Specificity is (0,3,1), one level deeper than the .hero p.sub (0,2,1) it must
* beat, rather than relying on source order. */
.hero p.sub .hl{
color:var(--ink);
padding-bottom:.1em;
background-image:linear-gradient(rgba(217,107,67,.55),rgba(217,107,67,.55));
background-repeat:no-repeat;
background-size:100% .11em;
background-position:0 100%;
-webkit-box-decoration-break:clone;
box-decoration-break:clone;
}
/* ---- MANIFESTO ---- */
/* Two-column argument block, measured against the reference at 1440px: grid
* mt-16 with 56/64px gaps, each chapter a flex row of a 48px JetBrains Mono
* numeral at 15% green beside a 24px/32px heading and a 16px/26px paragraph set
* 12px below it. The numeral sits BESIDE the text, not above it; an earlier
* revision stacked it and justified Courier New by saying --fm was "already the
* site's mono for .tag", which stopped being true when .tag became a pill.
* Numerals are aria-hidden and decorative: at 15% they carry no contrast and they
* duplicate the reading order, so they must not be announced. The hover tint is
* the reference's group-hover, and is dropped under reduced-motion. */
.manifesto{display:grid;grid-template-columns:1fr 1fr;gap:56px 64px;margin-top:64px;}
.mfitem{display:flex;align-items:flex-start;gap:24px;}
.mfnum{flex:none;font-family:var(--fnum);font-size:3rem;font-weight:700;line-height:1;
color:rgba(46,90,68,.15);padding-top:4px;transition:color .3s ease;}
.mfitem:hover .mfnum{color:var(--amber);}
/* The rule between numeral and text. Authored at 2px: Chrome snaps borders to
* whole device pixels, so at DPR 1.25 this and the reference both report 1.6px.
* It hovers to terracotta with the numeral, off the same .mfitem:hover. */
.mfbody{border-left:2px solid rgba(46,90,68,.15);padding-left:24px;
transition:border-color .3s ease;}
.mfitem:hover .mfbody{border-color:var(--amber);}
.mfitem h3{font-family:var(--fd);font-weight:700;font-size:1.5rem;color:var(--ink);
line-height:2rem;margin:0;}
.mfitem p{color:var(--muted);line-height:1.625;font-size:1rem;margin-top:12px;}
@media(max-width:860px){
.manifesto{grid-template-columns:1fr;gap:34px;margin-top:36px;}
.mfitem{gap:18px;}
.mfbody{padding-left:18px;}
.mfnum{font-size:2.4rem;}
.mfitem h3{font-size:1.3rem;line-height:1.75rem;}
}
@media(prefers-reduced-motion:reduce){.mfnum,.mfbody{transition:none;}}
/* ---- AGE TRACK TABS ---- */
/* Vertical rail + panel, matching the reference: 280px rail, 32px gap, 16px radius
* tabs, active tab in --green with cream text (7.6:1). */
/* Rail across the top, panel full width beneath, replacing a 280px left rail beside a
* narrow panel. The panel is the page: it carries a quote, two lists and the track's
* own call to action, and it was being asked to do that in the 800px left after the
* rail took its column. Across the top, the rail costs one row and gives the panel
* the whole measure back. It also puts the four tracks on one line, which is the
* comparison a parent came here to make. */
.trackpanel{margin-top:44px;}
.tracktabs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:40px;}
.ttab{display:flex;flex-direction:column;align-items:flex-start;gap:14px;width:100%;
background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
padding:16px 20px;cursor:pointer;text-align:left;font-family:var(--fd);
transition:background .18s,border-color .18s;}
.ttab{color:var(--ink);} /* explicit: the button's own colour is inherited
otherwise, so a bare text node would render
dark-on-green (2.66:1) inside an active tab */
.ttab.is-on{color:var(--cream);}
.ttab:hover{border-color:rgba(46,90,68,.38);}
.ttab-name{font-size:1rem;font-weight:700;color:var(--ink);line-height:1.25;}
.ttab-age{font-family:var(--fb);font-size:.78rem;font-weight:600;color:var(--muted);}
.ttab.is-on{background:var(--forest);border-color:var(--forest);}
.ttab.is-on .ttab-name{color:var(--cream);}
.ttab.is-on .ttab-age{color:#dce6e0;} /* 9.4:1 on --green; rgba would drop to ~5 */
.ttab:focus-visible{outline:3px solid var(--amber-d);outline-offset:2px;}
/* Tinted icon chip, one colour per track, as on the reference: 40px at 12px
* radius on the rail, 48px at 14px in the panel head. The glyphs are lucide
* paths inlined in build-pages.js; they carry no information the adjacent text
* does not already give, so they are aria-hidden and the tint is decorative. */
/* Sage wash by default, terracotta when this is the selected track. Both icons are
* aria-hidden and every tab names its track in text, so the tile is decoration; it is
* still drawn to our own dark-on-terracotta rule rather than the reference's white,
* so it matches .btn-amber and every other terracotta object on the site. */
.ttab-ico{background:rgba(122,154,139,.15);color:var(--forest);}
.ttab.is-on .ttab-ico,.tp-ico{background:var(--amber);color:var(--forest2);}
/* No colour here. It used to be cream, which was right when every tile carried a solid
* per-track tint; with the unselected tile a pale sage wash it put a cream glyph on a
* near-white ground at about 1.1:1 - invisible, and invisible SILENTLY, because this
* rule sits after the two state rules above and beat them on source order at equal
* specificity. Both states set their own colour now, so there is nothing to lose to. */
.ttab-ico,.tp-ico{flex:none;display:flex;align-items:center;justify-content:center;}
.ttab-ico{width:40px;height:40px;border-radius:12px;}
.ttab-ico svg{width:20px;height:20px;}
.ttab-txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
.tp-ico{width:48px;height:48px;border-radius:14px;}
.tp-ico svg{width:26px;height:26px;}
.tp-head{display:flex;align-items:center;gap:16px;}
.tp-head h2{margin-bottom:4px;}
.tp-head .tp-meta{margin-bottom:0;}
/* Two columns of list, each single-file, rather than one list wrapped into two. */
.tp-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px 32px;margin-bottom:0;}
/* Rehearse stays two-up inside its column - these are four short topic names and a
* single column of them is a list of scraps. Practice is three sentences and stacks. */
.tp-cols .tp-list{margin-bottom:0;}
.tp-cols .tp-check{grid-template-columns:1fr;}
.tp-cta{margin-top:26px;}
.tp-check li::before{content:'✓';position:absolute;left:0;top:0;
color:var(--amber-d);font-weight:800;font-size:.9em;line-height:1.55;}
/* White card, capped at 1024 and centred under a rail that runs the full 1200. The
* name, the meta line and the quote sit in a forest band across its top: those three
* are the track's identity and the rest of the card is its contents, and the band is
* what makes the panel read as one track's page rather than as four lists that
* happen to have changed. The old .tracktabs max-height/scrollbar rules are gone -
* a four-item row has nothing to scroll. */
.tpanel{background:var(--card);border:1px solid var(--border);border-radius:32px;
padding:0;overflow:hidden;box-shadow:var(--shadow-lg);max-width:1024px;margin:0 auto;}
.tp-top{background:var(--forest);padding:30px 34px;}
.tp-body{padding:32px 34px 34px;}
.tpanel h2{font-family:var(--fd);font-weight:800;font-size:1.85rem;color:var(--cream);
line-height:1.2;margin-bottom:6px;}
.tp-meta{font-size:.85rem;color:rgba(253,251,247,.72);font-weight:600;margin-bottom:0;}
/* --amber-l, not --amber: on this ground terracotta drops to 3.0:1 and the lifted
* tone is 4.6:1, which the quote needs at 1.15rem. Same swap the dark bands make. */
.tp-quote{font-family:var(--fa);font-style:italic;font-weight:600;font-size:1.15rem;
color:var(--amber-l);line-height:1.45;margin:18px 0 0;}
.tp-label{display:block;font-family:var(--fb);font-size:.75rem;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;}
/* The rehearse items are chips, not bullets: they are four named situation TYPES, a
* set rather than a sequence, and a bulleted list implies an order they do not have.
* The practice items keep the tick, which is the right mark for "and this, and this". */
.tp-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:0;}
.tp-list li{background:rgba(122,154,139,.12);border-radius:12px;padding:12px 16px;
color:var(--forest);font-size:.875rem;font-weight:500;line-height:1.4;}
.tp-check li{background:none;border-radius:0;padding:0 0 0 22px;position:relative;
color:var(--ink);font-size:.95rem;font-weight:400;line-height:1.5;}
.tp-check{gap:12px;}
@media(max-width:860px){
.tp-cols{grid-template-columns:1fr;gap:26px;}
.trackpanel{margin-top:32px;}
.tracktabs{grid-template-columns:repeat(2,1fr);margin-bottom:28px;}
.tpanel{border-radius:24px;}
.tp-top{padding:24px 22px;}
.tp-body{padding:24px 22px 26px;}
.ttab{padding:14px 16px;gap:10px;}
}
/* Chips stay two-up well past the point .tp-cols collapses: once the pair of columns
* becomes one, the chip column is ~750px at 860 and four full-width bars there is a
* worse read than two rows of two. They only stack when a chip would drop under about
* 230px, which is where "Playground Conflicts" starts to wrap. */
@media(max-width:520px){
.tp-list{grid-template-columns:1fr;}
}
/* ---- FACILITATOR ---- */
/* Styling ships ahead of the copy on purpose: the section markup is a fill-in
* template in build-pages.js, held back until the owner supplies a verified bio
* and photograph. These rules are inert until it is uncommented. Reference spec:
* --cream2 at 60%, 0.9fr/1.1fr grid, 56px gap, blob portrait matching the hero. */
/* .facil no longer sets its own ground: banding decides it, like every
* other section. It was a third tint, cream2 at 60%, matching nothing. */
.facil .inner{display:grid;grid-template-columns:1fr;gap:56px;align-items:center;max-width:780px;}
/* Two columns only once a portrait exists. :has() means dropping the in
* later switches the layout on its own - no CSS edit needed at that point.
* Until then the section is a centred single column, which reads as deliberate
* rather than as a two-column grid with an empty half. */
.facil .inner:has(.facil-photo){grid-template-columns:.9fr 1.1fr;max-width:1200px;}
.facil-photo{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
border-radius:58% 42% 45% 55% / 52% 48% 55% 45%;
box-shadow:0 24px 60px -24px rgba(20,33,29,.4);}
.facil h3{font-family:var(--fd);font-weight:800;font-size:1.7rem;color:var(--ink);
line-height:1.2;margin-bottom:4px;}
.facil-role{display:block;font-family:var(--fb);font-size:.75rem;font-weight:700;
letter-spacing:.2em;text-transform:uppercase;color:var(--green);margin-bottom:20px;}
.facil-quote{font-size:1rem;color:var(--muted);line-height:1.65;margin-bottom:24px;}
.facil-creds{list-style:none;display:grid;gap:10px;margin-bottom:28px;}
.facil-creds li{position:relative;padding-left:22px;color:var(--ink);font-size:.95rem;line-height:1.5;}
.facil-creds li::before{content:'';position:absolute;left:0;top:.55em;width:7px;height:7px;
border-radius:50%;background:var(--amber);}
@media(max-width:860px){
.facil .inner{grid-template-columns:1fr;gap:28px;}
.facil-photo{border-radius:var(--radius);aspect-ratio:16/10;}
}
/* ---- SCENARIO PICKER ---- */
/* Reuses the existing .scn-* styles (including the blur-until-revealed effect);
* this only adds the chip selector and the card wrapper. */
.scnpick{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:28px;}
.scnchip{background:var(--card);border:1px solid var(--border);border-radius:999px;
padding:10px 20px;font-family:var(--fd);font-size:.85rem;font-weight:700;color:var(--ink);
cursor:pointer;transition:background .18s,border-color .18s,color .18s;}
.scnchip:hover{border-color:rgba(46,90,68,.38);}
.scnchip.is-on{background:var(--green);border-color:var(--green);color:var(--cream);}
.scnchip:focus-visible,.scn-reveal:focus-visible{outline:3px solid var(--amber-d);outline-offset:2px;}
.scncard{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
padding:34px;box-shadow:var(--shadow);max-width:900px;margin:0 auto;}
@media(max-width:760px){
.scncard{padding:22px;}
.scn-cols{grid-template-columns:1fr;gap:22px;}
}
/* ---- CLOSING CTA ---- */
/* Light finish, matching the reference: 96px band, 48px/800 heading in ink,
* centred at a readable measure, primary + secondary actions side by side. */
/* ---- TRY A SITUATION, on the dark band ---- */
/* Scoped to #try throughout: how-it-works.html reuses every .scn-* component on a
* light background, so none of the base rules can move. Accent is --gold rather
* than --amber here -- terracotta on this ground is too dim, and the reference
* switches to honey for the same reason. */
#try h2 em{color:var(--gold);}
#try .sec-head p{color:rgba(253,251,247,.7);}
#try .scnchip{background:transparent;border-color:rgba(253,251,247,.2);
color:rgba(253,251,247,.7);}
#try .scnchip:hover{border-color:rgba(253,251,247,.45);color:var(--cream);}
/* The reference sets cream on terracotta here, which is 3.31:1 -- it fails AA for
* 13.6px bold. Dark text on the same terracotta is 4.85:1 and is already how
* .btn-amber works everywhere else on the site, so the selected chip matches our
* own primary rather than inheriting the reference's one accessibility miss. */
#try .scnchip.is-on{background:var(--amber);border-color:var(--amber);color:var(--forest2);}
/* The card is LIGHT on this dark band, which is the reference's arrangement and the
* reverse of what shipped. The dark-on-dark version passed contrast on every line -
* that was never the problem. The problem is hierarchy: this card is the only thing
* on the home page a parent can actually operate, and it was the least conspicuous
* object in its own section. A light card on a dark band is the loudest thing the
* page can say without another colour.
*
* Every #try override of the card interior is therefore gone rather than retuned:
* the base .scn-* rules already describe this component on a light ground, which is
* how /how-it-works has always drawn it. Only geometry and lift are set here. The
* chip rules above stay - the chips sit ON the band, not on the card. */
/* color:var(--ink) is load-bearing, not tidiness. .sec-dark sets color:var(--cream) on
* the section, and the base .scn-* rules only colour the elements that need a colour
* of their own - .scn-opt has none and inherits. On the old dark card that inheritance
* was correct and an #try override supplied cream anyway; with the card light it
* delivered cream text onto a cream2 row at about 1.05:1. Resetting the card, rather
* than patching .scn-opt, also covers anything added to this component later. */
#try .scncard{border-radius:24px;padding:40px;color:var(--ink);
box-shadow:0 28px 60px -24px rgba(0,0,0,.6);}
/* Numbered, like the reference: "most kids see first" is an ordered list of the
* obvious doors, and numbering it makes the unnumbered hidden column read as the
* thing that is not on the list. Counters rather than markup, so all four scenario
* panels get it without touching the copy. Scoped to #try: /how-it-works reuses
* .scn-* for a single worked example where the numbering would imply a sequence. */
#try .scn-col:first-child{counter-reset:scnopt;}
#try .scn-col:first-child .scn-opt{counter-increment:scnopt;
display:flex;align-items:center;gap:12px;}
#try .scn-col:first-child .scn-opt::before{content:counter(scnopt);flex:0 0 auto;
display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
background:#e8f0ec;color:var(--green);font-family:var(--fd);font-weight:800;
font-size:.8rem;line-height:1;}
#try .scnchip:focus-visible,#try .scn-reveal:focus-visible{outline-color:var(--gold);}
@media(max-width:700px){#try .scncard{padding:26px;}}
/* ---- ABOUT ---- */
/* The reference's About hero sits on the page ground, not a tinted band, at 60px
* over an 18px lede. Scoped to this page: .pagehead is shared by five other pages
* that have no counterpart on the reference to be matched against. */
[data-page="about"] .pagehead,[data-page="for-parents"] .pagehead,
[data-page="age-tracks"] .pagehead{padding:56px 0 0;}
[data-page="about"] .pagehead h1,[data-page="for-parents"] .pagehead h1,
[data-page="age-tracks"] .pagehead h1{
font-size:clamp(2.2rem,4.6vw,3.75rem);line-height:1;letter-spacing:-.025em;
color:var(--ink);max-width:768px;}
[data-page="about"] .pagehead .sub,[data-page="for-parents"] .pagehead .sub,
[data-page="age-tracks"] .pagehead .sub{
font-size:1.125rem;line-height:1.625;max-width:672px;margin-top:24px;}
/* For Parents puts the hallway illustration in its head (2026-09-06), where the
* shared rule above deliberately has no bottom padding - the standalone image
* section used to supply that gap. Give it back, and widen the text column: this
* page's h1 is 60px against About's, and 605px wraps it to five lines. */
/* for-parents no longer sets its own bottom padding: .pagehead + .sec owns that
* gap now, and keeping this stacked two 56s into 112. */
[data-page="for-parents"] .pagehead-split{grid-template-columns:1.25fr .75fr;gap:44px;}
@media(max-width:860px){
[data-page="for-parents"] .pagehead{padding-bottom:0;}
[data-page="for-parents"] .pagehead-split{grid-template-columns:1fr;gap:28px;}
}
/* Parent cards: 2x2, 48px icon tile in forest-light, no shadow -- unlike the
* Named .expcard, NOT .pcard: the frozen snapshot already ships a .pcard grid
* further down this same page with its own background, shadow, hover and type.
* These rules sit later in the file, so at equal specificity they were quietly
* restyling those four existing cards -- the collision only showed up because a
* check for four card bodies came back with eight.
* About cards, which do carry one. Measured, not assumed. */
.expcards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:56px;}
.expcard{background:var(--card);border:1px solid rgba(46,90,68,.15);border-radius:16px;
padding:28px;box-shadow:none;}
.expcard-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;
background:#e8f0ec;color:var(--green);}
.expcard-ico svg{width:24px;height:24px;}
.expcard h3{font-family:var(--fd);font-size:1.25rem;font-weight:700;line-height:1.4;
color:var(--ink);margin-top:16px;}
.expcard p{font-size:.875rem;line-height:1.625;color:var(--muted);margin-top:8px;}
@media(max-width:860px){
.expcards{grid-template-columns:1fr;gap:18px;margin-top:36px;}
}
/* .sec-tight zeroes the top padding for a section whose own first child brings
* its spacing -- About's card grid does, via margin-top.
*
* .sec-lead was its counterpart for a section that LED with an illustration
* (.illus has margin:0, so the image landed flush against the page head). Both
* of those illustrations moved into the page head itself on 2026-09-06, which
* left the class matching nothing on any of the seven pages, so it is gone. */
.sec-tight{padding-top:0;}
/* Three "not" cards: numeral, heading, body. The numeral is --fnum, the same
* JetBrains Mono the manifesto numerals use, at 14px rather than 48px. */
.notgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px;}
.notcard{background:var(--card);border:1px solid rgba(46,90,68,.15);border-radius:16px;
padding:28px;box-shadow:0 4px 20px -4px rgba(46,90,68,.08);}
/* --amber-d, not --amber: terracotta on white is 3.42:1 and fails AA for 14px
* bold, which is what the reference uses here. The darker token is 5.25:1 and is
* exactly what it exists for -- small amber text on a light ground. */
.notnum{display:block;font-family:var(--fnum);font-size:.875rem;font-weight:700;
line-height:1.43;color:var(--amber-d);}
.notcard h3{font-family:var(--fd);font-size:1.25rem;font-weight:700;line-height:1.4;
color:var(--ink);margin-top:8px;}
.notcard p{font-size:.875rem;line-height:1.625;color:var(--muted);margin-top:12px;}
@media(max-width:860px){
.notgrid{grid-template-columns:1fr;gap:18px;margin-top:36px;}
}
/* Session photographs on About: 2.1:1 pair, 24px corners, the reference's
* shadow-lg, and a 40px drop on the second so the row is staggered. The offset
* is dropped below 860px, where the pair stacks and a stagger would just read as
* an inconsistent gap. */
.aboutshots{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:56px;}
.aboutshots img{display:block;width:100%;height:288px;object-fit:cover;border-radius:24px;
box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);}
.aboutshots img:nth-child(2){margin-top:40px;}
@media(max-width:860px){
.aboutshots{grid-template-columns:1fr;gap:18px;margin-top:36px;}
.aboutshots img{height:220px;}
.aboutshots img:nth-child(2){margin-top:0;}
}
/* Qualifying checklist. Two columns of ticked traits, sized so a parent scans
* all four in one pass -- the point is recognition, not reading. */
.qual{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 32px;
margin:0 0 26px;max-width:860px;}
.qual li{position:relative;padding-left:34px;font-size:1.05rem;line-height:1.5;color:var(--ink);}
.qual li::before{content:'✓';position:absolute;left:0;top:-1px;width:22px;height:22px;
display:grid;place-items:center;border-radius:50%;background:#e8f0ec;color:var(--green);
font-size:.75rem;font-weight:800;}
.qual-note{font-family:var(--fa);font-style:italic;font-weight:600;font-size:1.15rem;
color:var(--green);line-height:1.5;max-width:640px;}
/* The four moments on /for-parents. Four columns under a terracotta rule, so the
* block reads as a band rather than the tall list it replaced - that one ran about
* 520px for four short lines, because a 1400x781 illustration sat beside them and
* set the height. Four across brings it to roughly 300px.
*
* Written one level deeper than the generic rules it sits among (.moments li, not
* li) so nothing here depends on source order against .qual, which styles a very
* similar-looking list further down the same page. */
.moments{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:30px;
margin:6px 0 0;}
.moments li{display:flex;flex-direction:column;gap:13px;padding-top:16px;
border-top:2px solid var(--amber);}
/* Bare icons, NOT .mcard-ico tiles. The cap rail directly below this section is a
* column of green icon tiles; wearing the same treatment here made the two
* adjacent sections read as one continuous texture.
*
* --amber-d rather than the --amber of the rule above it, and not for decoration:
* a 2px stroke needs more contrast than a solid 2px bar to read at the same
* weight. --amber on the cream2 tint measures about 3.2:1, --amber-d about 4.5:1.
* The icons are aria-hidden and the text carries the meaning, so this is
* legibility at 26px rather than a WCAG obligation. */
.moments .m-ico{color:var(--amber-d);}
.moments .m-ico svg{width:26px;height:26px;display:block;}
.moments p{font-size:1rem;line-height:1.5;color:var(--ink);}
.moments-note{margin-top:30px;}
/* 860 and 600 are the site's two dominant breakpoints (20 and 8 rules); this adds
* no new ones. Two-up before one-up matters here - four full-width rows on a
* tablet would give back the height the band exists to save. */
@media(max-width:860px){.moments{grid-template-columns:1fr 1fr;gap:26px;}}
/* One up, and the icon moves BESIDE the text rather than above it. Stacked, each
* row costs the icon's 26px plus its 13px gap on top of the text; measured on the
* dev deploy at 390px, that made the new section 883px against the old layout's
* 869px - i.e. the four-across band saved 72px on desktop and gave back MORE than
* that on a phone, which is where most parents meet this page. Running the icon
* inline puts the row height back to whatever the text needs. The terracotta rule
* stays: it is what makes four rows read as one set rather than four fragments. */
@media(max-width:600px){
.moments{grid-template-columns:1fr;gap:22px;}
.moments li{flex-direction:row;align-items:flex-start;gap:14px;padding-top:14px;}
.moments .m-ico{flex:none;padding-top:1px;}
.moments-note{margin-top:24px;}}
/* Straight answers. A plain definition list, not an accordion: on a page a parent
* is scanning for reasons to say no, hiding the answers behind a click is exactly
* the wrong default. The accordion stays on faqs.html, where the list is long. */
.qa{display:grid;grid-template-columns:1fr 1fr;gap:26px 32px;}
/* Cut from six answers to three on 2026-09-10, which strands one on a second row in a
* two-column grid. Same :has() idiom as .cardgrid above: match a list whose 3rd child
* is also its last - exactly three - and lay it out in one row of three. */
.qa:has(.qai:nth-child(3):last-child){grid-template-columns:repeat(3,1fr);}
@media(max-width:980px){.qa:has(.qai:nth-child(3):last-child){grid-template-columns:1fr;}}
.qai h3{font-family:var(--fd);font-size:1.1rem;font-weight:700;color:var(--ink);
line-height:1.35;margin-bottom:8px;}
.qai p{font-size:.95rem;line-height:1.65;color:var(--muted);}
@media(max-width:860px){
.qual,.qa{grid-template-columns:1fr;}
.qual{gap:12px;}
}
/* Icons on the six-capacity cards, and the doors diagram. Both exist to break a
* long text page into things an eye can land on. .has-ico is opt-in so the same
* .mcard on about.html is untouched. */
.mcard-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;
background:#e8f0ec;color:var(--green);margin-bottom:16px;}
.mcard-ico svg{width:22px;height:22px;}
.doors{margin:0;text-align:center;}
.doors svg{width:100%;max-width:660px;height:auto;display:block;margin:0 auto;}
.doors figcaption{max-width:640px;margin:22px auto 0;font-size:1.05rem;line-height:1.6;
color:var(--muted);text-align:center;}
.doors figcaption em{font-family:var(--fa);font-style:italic;font-weight:600;color:var(--green);}
@media(max-width:600px){.doors figcaption{font-size:1rem;text-align:left;}}
/* Generated illustration. Flat art, so no shadow and no border: both fight it,
* where a photograph needs them to sit on the page. TWO widths, because three
* identical full-bleed bands down one page reads as filler.
* .illus-narrow and .qualsplit went 2026-09-19: the qualifying split was the
* only thing using either, and it left /for-parents when the two recognition
* blocks swapped pages. */
.illus{margin:0;}
.illus img{display:block;width:100%;height:auto;border-radius:24px;}
.qual-stack{grid-template-columns:1fr;max-width:none;margin-bottom:22px;}
/* ---- ENROLMENT SPLIT (home) ---- */
/* Copy left, one dark founding card right: 2 equal columns, 48px gap, centred.
* book.html keeps the full three-offer table, so nothing is lost by showing one
* card here. Cream tints on --green are held at or above 70% because the audit
* runs to zero failures; the reference uses 50-60% for the same text and does
* not clear AA there. */
/* INVERTED. It was a dark card on a light band; it is now a light card in a dark
* panel, which is the reference's arrangement and the better one for a reason worth
* writing down: the price is the thing this section exists to show, and it was the
* only element on the page set in cream on green - the quietest ground available -
* while the copy beside it sat in full-strength ink. The card now holds the only
* light rectangle inside a dark panel, so the eye lands on $149 first.
*
* .enrolsplit IS the panel rather than sitting inside one, which is exactly what the
* reference does too, and it means no markup changed at all. Geometry deliberately
* matches .closing-panel - 1024px, 32px radius, forest - because the two are the same
* object doing the same job at different ends of a page. Change one, change both. */
.enrolsplit{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
max-width:1024px;margin:0 auto;background:var(--forest);border-radius:32px;padding:56px;}
/* The pill inverts the way it does on every dark band; --gold was tuned against
* exactly this 10%-cream-over-forest ground. */
.enrolsplit .tag{background:rgba(253,251,247,.1);border-color:rgba(253,251,247,.15);
color:var(--gold);}
/* Both written with .sec in front. .sec h2 is (0,1,1) and .sec h2 em is (0,1,2), so
* a bare .enrolsplit h2 em would tie the second and win only on source order. */
.sec .enrolsplit h2{color:var(--cream);}
.sec .enrolsplit h2 em{color:var(--amber-l);}
.enrolcopy p{color:rgba(253,251,247,.78);line-height:1.625;margin-top:16px;max-width:512px;}
.enrol-alt a{color:var(--amber-l);font-weight:700;text-decoration:underline;
text-underline-offset:3px;}
.pricecard{background:var(--cream);color:var(--ink);border-radius:16px;padding:28px;
box-shadow:0 24px 60px -24px rgba(0,0,0,.5);}
/* The honey bloom goes with the dark card it was drawn for: on cream it is a smudge. */
.price-badge{display:block;font-family:var(--fb);font-size:.75rem;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;color:var(--amber-d);}
.price-row{display:flex;align-items:flex-end;gap:12px;margin-top:14px;flex-wrap:wrap;}
.price-now{font-family:var(--fd);font-size:3rem;font-weight:800;line-height:1;
letter-spacing:-.025em;color:var(--forest);}
.price-per{padding-bottom:6px;font-weight:600;color:var(--muted);}
.price-was{padding-bottom:6px;font-weight:600;color:var(--muted);}
.price-list{list-style:none;margin:26px 0 0;display:grid;gap:12px;}
.price-list li{display:flex;align-items:flex-start;gap:12px;font-size:.875rem;
line-height:1.625;color:var(--ink);}
/* --amber-d, not the reference's sage: sage on cream is about 2.4:1 and this tick is
* text. Same mark the track panel's practice list uses. */
.price-list li::before{content:'✓';flex:none;color:var(--amber-d);font-weight:800;}
.pricecard .btn-amber{display:block;width:100%;margin-top:26px;padding:15px 0;
border-radius:14px;font-size:1.05rem;text-align:center;}
.price-note{margin-top:14px;text-align:center;font-size:.75rem;line-height:1.4;
color:var(--muted);}
@media(max-width:860px){
.enrolsplit{grid-template-columns:1fr;gap:32px;padding:36px 24px;border-radius:24px;}
.enrolcopy p{max-width:none;}
}
.closing{padding:96px 0;text-align:center;}
.closing .wrap{max-width:1200px;padding-left:24px;padding-right:24px;}
.closing h2{font-family:var(--fd);font-weight:800;font-size:clamp(2rem,4vw,3rem);
color:var(--ink);line-height:1;letter-spacing:-.025em;}
.closing p{color:var(--muted);margin:20px auto 0;font-size:1rem;line-height:1.625;max-width:600px;}
/* The closing is a dark panel INSIDE the band rather than a band of its own. Two
* things follow from that and both are the point: the panel keeps its shape whatever
* ground banding hands the section, so the last thing on every page looks the same
* even though the section under it alternates; and because it is inset rather than
* full-bleed it ends the page instead of running off it.
*
* Every override here is written .closing .closing-panel X, not .closing-panel X.
* The rules above are .closing h2 and .closing p at (0,1,1) - a bare .closing-panel
* h2 would tie them and win only on source order, which is the trap this file has
* fallen into three times. (0,2,1) wins on specificity and stays won. */
.closing-panel{max-width:1024px;margin:0 auto;background:var(--forest);
border-radius:32px;padding:80px 64px;}
.closing .closing-panel h2{color:var(--cream);}
.closing .closing-panel p{color:rgba(253,251,247,.78);}
.closing .closing-panel .btn-ghost{color:var(--cream);border-color:rgba(253,251,247,.32);}
.closing .closing-panel .btn-ghost:hover{background:var(--cream);color:var(--forest);}
@media(max-width:760px){
.closing{padding:72px 0;}
.closing-panel{border-radius:24px;padding:48px 24px;}
}
.closing-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:32px;}
/* The closing primary is wider than the hero's: px-8 against the hero's px-7,
* measured on the reference. Scoped so .btn-amber elsewhere keeps 16px 28px. */
.closing-cta .btn-amber{padding:16px 32px;}
/* The .closing-grad wash that used to sit here is gone: banding gives the closing
* band its ground now, so it is the page cream or the cream2 tint like every other
* section. Its border-top went with it - no other seam on this site draws a line,
* the change of ground IS the seam.
*
* The arrow is a span rather than an icon font or SVG sprite so it costs nothing,
* and it is aria-hidden: the button already reads as an action without it. */
.btn-arrow{display:inline-flex;align-items:center;gap:8px;
box-shadow:0 10px 30px -8px rgba(217,107,67,.55);}
.btn-arrow:hover{box-shadow:0 14px 34px -8px rgba(217,107,67,.6);}
.btn-arrow .btn-ico{transition:transform .2s ease;}
.btn-arrow:hover .btn-ico{transform:translateX(4px);}
@media(prefers-reduced-motion:reduce){.btn-arrow .btn-ico{transition:none;}
.btn-arrow:hover .btn-ico{transform:none;}}
@media(max-width:520px){.closing-cta .btn{width:100%;}}
/* ---- GALLERY MOSAIC ---- */
/* Asymmetric two-column grid, replacing the equal-thumbnail carousel. Aspect
* ratios follow the reference's rendered sizes (803x602 / 803x453 wide column,
* 391x327 / 391x254 narrow). Items are buttons so the grid is keyboard-reachable. */
/* Asymmetric mosaic, measured off the reference: three equal columns, 20px gap,
* 48px under the header. The first tile spans two columns AND two rows, the last
* spans two columns, which leaves the bottom-right cell empty on purpose -- that
* gap is the composition, not a bug. Tiles stay