/*
Theme Name:   The Math Modernist
Theme URI:    https://www.themathmodernist.com
Author:       Aimless Adventure Media
Author URI:   https://aimlessadventuremedia.com
Description:  Purpose-built theme for The Math Modernist. The design system below is
              lifted verbatim from the v6 mockup approved in Ziflow on 8 October 2026,
              so the live site and the signed-off design cannot drift apart. Carries
              WooCommerce support without a page builder.
Version:      1.4.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License:      Proprietary — client work for The Math Modernist
Text Domain:  tmm
Tags:         custom-background, custom-logo, custom-menu, featured-images, e-commerce
*/

/* ==========================================================================
   Everything from here down is the approved mockup stylesheet, unmodified
   except for the WordPress admin-bar offset at the very bottom of the file.
   Do not hand-edit to "fix" a layout — change the mockup and re-run the
   converter, so design review and production stay in step.
   ========================================================================== */

/* ============================================================
   THE MATH MODERNIST — site direction built on the Aimless
   Adventure Media pitch page: her palette, her type, the green
   highlighter, the leaf field, rounded cards, operator glyphs.
   Single-theme by choice, painted explicitly.
   ============================================================ */
:root{
  --head:'Poppins',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --sans:'Open Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --blue:#6087C1; --blue-deep:#2F6CB1; --blue-tint:#EDF2FA; --navy:#1D3557;
  --green:#98BC70; --green-deep:#487636; --green-tint:#F1F7EA; --forest:#2C4A20;
  --plum:#985293; --plum-deep:#7A3F76; --plum-tint:#F6EDF5;
  --orange:#D96A2C; --orange-deep:#BF5620; --orange-tint:#FCEFE6;
  --ink:#1F2A37; --body:#454B55; --muted:#7A808A;
  --bg:#FFFFFF; --soft:#F7FAF3; --line:#E4E9DE;
  --shadow:0 24px 50px -28px rgba(29,53,87,.35);
  --shadow-sm:0 10px 28px -20px rgba(29,53,87,.30);
  --r:18px;

  /* aliases so every existing template keeps working */
  --ground:var(--bg); --surface:var(--bg); --text:var(--ink);
  --text-soft:var(--body); --text-faint:var(--muted);
  --border:var(--line); --border-soft:var(--line);
  --ink-soft:var(--body); --ink-faint:var(--muted); --rule:var(--line);
  --t-xs:.76rem; --t-sm:.9rem; --t-base:1rem; --t-md:1.1rem; --t-xl:1.7rem;
  --wrap:1140px; --r-sm:10px;
  --cat-1:#2F6CB1; --cat-2:#BF5620; --cat-3:#985293;
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--body);
  font-family:var(--sans); font-size:16.5px; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
h1,h2,h3,h4,h5{font-family:var(--head); color:var(--ink); font-weight:600;
  line-height:1.15; letter-spacing:-.02em; margin:0; text-wrap:balance}
h1{font-size:clamp(2.3rem,5.2vw,3.7rem); font-weight:700}
h2{font-size:clamp(1.8rem,3.8vw,2.7rem)}
h3{font-size:clamp(1.15rem,2vw,1.45rem)}
h4{font-size:1.08rem}
p{margin:0}
strong,b{font-weight:700; color:var(--ink)}
a{color:var(--blue-deep); text-underline-offset:3px}
img{max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--orange); outline-offset:3px; border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}
.num{font-variant-numeric:tabular-nums}

/* THE HIGHLIGHTER — the signature move */
h1 em, h2 em, h3 em, .hl{
  font-style:normal; color:var(--blue-deep);
  background:linear-gradient(transparent 68%,rgba(152,188,112,.45) 68%,rgba(152,188,112,.45) 92%,transparent 92%);
  /* Without this the highlight is painted as ONE box spanning every line of a
     wrapped headline, so on a narrow screen the green bar runs past the last
     word to the edge of the viewport. clone gives each line its own. */
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.hl--plum{color:var(--plum)}
.hl--orange{color:var(--orange-deep);
  background:linear-gradient(transparent 68%,rgba(217,106,44,.28) 68%,rgba(217,106,44,.28) 92%,transparent 92%)}

/* ---------- layout ---------- */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; position:relative}
.band{padding-block:clamp(56px,7vw,96px); position:relative; overflow:hidden}
.band--tight{padding-block:clamp(34px,4vw,56px)}
.band--paper{background:var(--bg)}
.band--cream{background:var(--soft)}
.band--ink{background:linear-gradient(150deg,var(--forest) 0%,#1E3517 100%); color:#E3EDDA}
.band--ink h1,.band--ink h2,.band--ink h3,.band--ink h4{color:#fff}
.band--ink p,.band--ink .lede{color:#CADBBB}
.band--ink h2 em{color:#fff;
  background:linear-gradient(transparent 68%,rgba(217,106,44,.7) 68%,rgba(217,106,44,.7) 92%,transparent 92%)}
.stack{display:flex; flex-direction:column; gap:20px}
.stack--sm{gap:12px}
.stack--lg{gap:34px}
.measure{max-width:70ch}

/* the leaf field */
/* The leaf field runs the whole height of the band it sits in, on its own
   side. It is a repeating tile rather than one fixed patch, so a short band
   and a long one both get leaves at the same size — nothing stretches. */
/* The leaf field runs the whole height of the band it sits in, on its own
   side, as a repeating tile so short and long bands get leaves at the same
   size. It sits flush inside the page edge, and every leaf is placed a full
   half-length clear of all four tile edges, so none is ever sliced. */
/* The leaf field runs the whole height of the band it sits in, on its own
   side, as a repeating tile so short and long bands get leaves at the same
   size. It sits flush inside the page edge, in the gutter beside the content
   column, and every leaf is placed a full half-length clear of all four tile
   edges, so none is ever sliced. Hidden where the gutter is too narrow to
   hold it rather than letting it run under the text. */
.leaves{position:absolute; pointer-events:none; z-index:0; opacity:.95;
  top:0; height:100%; width:150px}
.leaves.l{left:0}
.leaves.r{right:0; transform:scaleX(-1)}
.band--ink .leaves{opacity:.18}
@media(max-width:1359px){.leaves{display:none}}

/* eyebrow with the tri-color dash */
.eyebrow,.stagemark{display:inline-flex; align-items:center; gap:10px;
  font-family:var(--head); font-size:.74rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--green-deep); align-self:flex-start}
.eyebrow::before,.stagemark::before{content:""; width:22px; height:3px; border-radius:3px; flex:none;
  background:linear-gradient(90deg,var(--blue) 0 33%,var(--green) 33% 66%,var(--plum) 66%)}
.stagemark i{display:none}
.stagemark b{font-weight:600; letter-spacing:inherit; color:inherit; font-size:inherit}
.band--ink .eyebrow,.band--ink .stagemark{color:#C5DDAA}
.lede{font-size:1.1rem; max-width:760px; color:var(--body)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:10px; font-family:var(--head); font-weight:600;
  font-size:.92rem; text-decoration:none; border:2px solid transparent; cursor:pointer;
  transition:transform .15s, box-shadow .15s; line-height:1.3; text-align:center}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--orange-deep); color:#fff; box-shadow:0 12px 24px -12px rgba(191,86,32,.7)}
.btn--blue{background:var(--navy); color:#fff; box-shadow:0 12px 24px -12px rgba(29,53,87,.6)}
.btn--ghost{border-color:var(--blue-deep); color:var(--blue-deep); background:#fff}
.btn--onInk{border-color:rgba(255,255,255,.6); color:#fff; background:transparent}
.band--cream .btn--onInk,.band--paper .btn--onInk{border-color:var(--green-deep); color:var(--green-deep)}
.btn--sm{padding:9px 17px; font-size:.76rem}
.btn--wide{width:100%}

/* ---------- cards ---------- */
.deck{background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:30px; box-shadow:var(--shadow-sm)}
.deck--flat{box-shadow:none; background:var(--soft)}

/* ---------- header ---------- */
.siteheader{position:sticky; top:env(safe-area-inset-top,0px); z-index:30;
  background:rgba(255,255,255,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.headbar{display:flex; align-items:center; gap:18px; padding-block:12px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); margin-right:auto}
.brandname{font-family:var(--head); font-weight:600; font-size:.98rem; line-height:1.1}
.brandname span{display:block; font-size:.62rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--green-deep); margin-top:3px}
.glyphs{display:inline-flex; gap:5px; flex:none}
.glyphs span{width:22px; height:22px; border-radius:6px; display:grid; place-items:center;
  font-family:var(--head); font-size:.74rem; font-weight:700; color:#fff}
.g-b{background:var(--blue)} .g-p{background:var(--plum)}
.g-g{background:var(--green-deep)} .g-o{background:var(--orange)}
.nav{display:flex; align-items:center; gap:22px; flex-wrap:wrap}
.nav a{font-family:var(--head); font-size:.78rem; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink); text-decoration:none}
.nav a:hover{color:var(--green-deep)}
.nav a[aria-current="page"]{color:var(--green-deep)}
.nav a.btn{text-transform:none; letter-spacing:0; color:#fff}
.nav a.btn--blue{color:#fff}
.reqbtn{position:relative}
.reqcount{display:inline-grid; place-items:center; min-width:21px; height:21px; padding:0 6px;
  background:rgba(255,255,255,.25); color:#fff; border-radius:100px;
  font-size:.7rem; font-weight:700; font-variant-numeric:tabular-nums}
.notice{background:var(--navy); color:#C9D6E8; font-size:.76rem; text-align:center;
  padding:8px 20px; font-family:var(--head); font-weight:500}
.notice b{color:#fff}

/* ---------- grids ---------- */
.grid{display:grid; gap:20px}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid--3,.grid--4{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.grid--3,.grid--4{grid-template-columns:1fr}}
.split{display:grid; gap:clamp(30px,5vw,56px); grid-template-columns:1fr; align-items:center; position:relative; z-index:1}
@media(min-width:900px){.split{grid-template-columns:1.12fr .88fr}
  .split--wide{grid-template-columns:1.3fr .7fr}
  .split--flip>*:first-child{order:2}}

/* ---------- hero ---------- */
.hero{background:linear-gradient(180deg,#fff 0%,var(--soft) 100%);
  padding:0; overflow:hidden; position:relative}
.hero-inner{padding-block:clamp(48px,6vw,80px); position:relative; z-index:1}
/* The emphasised phrase sits on its own line. It used to do that with
   display:block, which made it a full-width box — so the highlighter was
   painted across the whole column and overshot the last word by a wide margin
   (badly on a phone, where it ran to the edge of the screen). Staying inline
   and breaking the line with a generated newline keeps the same typography and
   lets the highlight hug the words, one stroke per line. */
/* NOTE (12 Oct): the highlighter overshoots the last word here, because the
   emphasised phrase is a full-width block and the gradient fills its box. Two
   fixes were tried and both cost more than the defect: shrink-wrapping does
   nothing once the phrase wraps, and going inline fixes the paint but reflows
   the whole headline, which changes a design Rachel has approved six times.
   Left as approved. Needs a deliberate decision, not a quiet change. */
.hero h1 em{display:block}
.herocta{display:flex; flex-wrap:wrap; gap:14px; margin-top:8px}
.herofigures{display:flex; flex-wrap:wrap; gap:30px; margin-top:12px;
  padding-top:24px; border-top:1px solid var(--line)}
.herofig b{display:block; font-family:var(--head); font-weight:600; font-size:1.05rem; color:var(--ink)}
.herofig span{font-size:.85rem; color:var(--muted)}

/* the rotated stat deck from the pitch page */
.fan{position:relative; min-height:430px}
.fancard{position:absolute; width:53%; background:#fff; border-radius:16px;
  box-shadow:var(--shadow); padding:20px 22px; border-top:8px solid var(--blue);
  font-family:var(--head)}
.fancard .fc-tag{display:block; font-family:var(--head); font-weight:700; font-size:1.9rem;
  line-height:1; color:var(--ink); letter-spacing:-.02em}
.fancard .fc-body{display:block; font-family:var(--sans); font-size:.86rem; line-height:1.45;
  color:var(--body); margin-top:8px; font-weight:400}
.fancard .fc-foot{display:none}
.fc1{left:0; top:34px; transform:rotate(-5deg); border-top-color:var(--blue); z-index:1}
.fc2{right:0; top:0; transform:rotate(4deg); border-top-color:var(--green); z-index:2}
.fc3{left:50%; top:232px; transform:translateX(-50%) rotate(-1deg); border-top-color:var(--plum); z-index:3}
@media(max-width:900px){.fan{min-height:0; display:grid; gap:16px}
  .fancard{position:static; transform:none; width:100%}}

/* ---------- tiles: navy, colored underline ---------- */
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.tile{background:var(--navy); color:#C9D6E8; border-radius:16px; padding:22px;
  border-bottom:5px solid var(--blue)}
.tile:nth-child(2){border-bottom-color:var(--orange)}
.tile:nth-child(3){border-bottom-color:var(--green)}
.tile:nth-child(4){border-bottom-color:var(--plum)}
.tile-num{display:block; font-family:var(--head); font-weight:700; font-size:2rem;
  color:#fff; line-height:1.05; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.tile-lbl{font-size:.85rem; line-height:1.45; display:block; margin-top:6px; color:#C9D6E8}
@media(max-width:900px){.tiles{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.tiles{grid-template-columns:1fr}}

/* ---------- the ladder ---------- */
ol.ladder{list-style:none; counter-reset:o; padding:0; margin:0; display:grid; gap:20px}
ol.ladder > li{counter-increment:o; display:grid; grid-template-columns:64px 1fr; gap:20px;
  align-items:start; background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:28px; box-shadow:var(--shadow-sm)}
ol.ladder > li::before{content:"0" counter(o); width:56px; height:56px; border-radius:14px;
  display:flex; align-items:center; justify-content:center; font-family:var(--head);
  font-size:1.15rem; font-weight:700; color:#fff; background:var(--blue)}
ol.ladder > li:nth-child(2)::before{background:var(--green-deep)}
ol.ladder > li:nth-child(3)::before{background:var(--plum)}
ol.ladder > li:nth-child(4)::before{background:var(--orange-deep)}
ol.ladder p{font-size:.95rem}
.ladder-price{font-family:var(--head); font-weight:700; font-size:1.7rem; color:var(--ink);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; white-space:nowrap}
@media(max-width:560px){ol.ladder > li{grid-template-columns:1fr; gap:14px}}

/* ---------- the promise & the math box ---------- */
.promise{margin:0; padding:24px 28px; border-radius:14px; background:var(--orange-tint);
  border-left:5px solid var(--orange); color:var(--ink)}
.promise p{font-family:var(--head); font-size:1.28rem; font-weight:500; line-height:1.4; color:var(--ink)}
.mathbox{font-variant-numeric:tabular-nums; background:var(--blue-tint);
  border-left:5px solid var(--blue); border-radius:0 14px 14px 0;
  padding:22px 26px; font-size:.97rem; color:var(--body); line-height:1.75}
.mathbox b{color:var(--ink)}

/* ---------- steps / gates ---------- */
.phase{display:grid; grid-template-columns:64px 1fr; gap:20px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r); padding:24px 26px;
  box-shadow:var(--shadow-sm); margin-bottom:16px}
.phase-when{display:flex; flex-direction:column; align-items:flex-start; gap:6px}
/* The step badge takes its number from data-step and its colour from a class.
   It used to key off :nth-of-type, which counts siblings of the same tag — so
   the headings and marker divs sitting beside the steps shifted every index and
   step four fell off the end of the rules and rendered as an empty swatch.
   Attribute + class means the markup is self-describing and order cannot break it. */
.phase-when .mo{width:56px; height:56px; border-radius:14px; display:flex; align-items:center;
  justify-content:center; font-family:var(--head); font-weight:700;
  color:#fff; background:var(--blue-deep); font-size:0}
.phase-when .mo::after{content:attr(data-step); font-size:1.1rem; letter-spacing:.01em}
.mo--blue{background:var(--blue-deep)!important}
.mo--green{background:var(--green-deep)!important}
.mo--plum{background:var(--plum)!important}
.mo--orange{background:var(--orange-deep)!important}
.phase-when .dates{font-size:.72rem; color:var(--muted); font-family:var(--head); font-weight:500}
.gate-tag{display:inline-block; font-family:var(--head); font-size:.66rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border-radius:100px}
.gate-1{background:var(--blue-tint); color:var(--blue-deep)}
.gate-2{background:var(--orange-tint); color:var(--orange-deep)}
.gate-3{background:var(--green-tint); color:var(--green-deep)}
.gate-4{background:var(--plum-tint); color:var(--plum-deep)}
@media(max-width:560px){.phase{grid-template-columns:1fr}}

/* ---------- checklist ---------- */
ul.asks{list-style:none; padding:26px; margin:0; background:#fff; border-radius:var(--r);
  box-shadow:var(--shadow-sm); border:1px solid var(--line)}
ul.asks li{padding:11px 0 11px 30px; position:relative; border-top:1px solid var(--line); font-size:.95rem}
ul.asks li:first-child{border-top:0}
ul.asks li::before{content:"✓"; position:absolute; left:0; top:11px; color:var(--green-deep); font-weight:700}

/* ---------- kit cards ---------- */
.kit{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); border-top:8px solid var(--blue)}
.grid--3 .kit:nth-child(3n+2){border-top-color:var(--green-deep)}
.grid--3 .kit:nth-child(3n+3){border-top-color:var(--plum)}
.kit-top{padding:18px 22px 0; display:flex; align-items:center; justify-content:space-between; gap:10px}
.kit-grade{font-family:var(--head); font-weight:600; font-size:1.2rem; color:var(--ink)}
.kit-body{padding:14px 22px 22px; display:flex; flex-direction:column; gap:12px; flex:1}
.kit-name{font-family:var(--head); font-weight:600; font-size:1.02rem; line-height:1.3; color:var(--ink)}
.kit-what{font-size:.92rem; color:var(--body)}
.kit-foot{margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap}
.price{font-family:var(--head); font-weight:700; font-size:1.9rem; color:var(--ink);
  font-variant-numeric:tabular-nums; line-height:1.05; letter-spacing:-.02em}
.price small{display:block; font-family:var(--sans); font-size:.78rem; font-weight:400;
  color:var(--muted); margin-top:4px; letter-spacing:0; text-transform:none}

.pill{display:inline-flex; align-items:center; gap:6px; font-family:var(--head);
  font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 12px; border-radius:100px}
.pill--stock{background:var(--green-tint); color:var(--green-deep)}
.pill--plum{background:var(--plum-tint); color:var(--plum-deep)}
.pill--blue{background:var(--blue-tint); color:var(--blue-deep)}
.pill--orange{background:var(--orange-tint); color:var(--orange-deep)}

/* ---------- feature cards with operator glyphs ---------- */
.feature{background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:28px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:10px;
  text-decoration:none}
.feature .fnum{display:flex; align-items:center; gap:12px; font-family:var(--head);
  font-weight:600; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--green-deep); margin-bottom:4px}
.feature .fnum::before{content:"+"; width:46px; height:46px; border-radius:12px; flex:none;
  display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:700;
  color:#fff; background:var(--blue); letter-spacing:0}
.grid .feature:nth-child(4n+2) .fnum::before{content:"−"; background:var(--green-deep)}
.grid .feature:nth-child(4n+3) .fnum::before{content:"×"; background:var(--plum)}
.grid .feature:nth-child(4n+4) .fnum::before{content:"÷"; background:var(--orange-deep)}
.feature p{font-size:.95rem}

/* ---------- quotes ---------- */
.quote{background:#fff; border-radius:16px; padding:26px 24px 24px; box-shadow:var(--shadow-sm);
  position:relative; border:1px solid var(--line); display:flex; flex-direction:column; gap:10px; margin:0}
.quote::before{content:"\201C"; position:absolute; top:-4px; left:18px; font-family:Georgia,serif;
  font-size:3.6rem; line-height:1; color:var(--green)}
.quote p{font-size:.99rem; color:var(--ink); margin-top:14px}
.quote cite{font-style:normal; font-size:.78rem; font-weight:700; color:var(--green-deep)}
.quote cite b{display:block; color:var(--ink); font-weight:700; font-family:var(--head)}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto; border-radius:14px; border:1px solid var(--line); background:#fff}
table{width:100%; border-collapse:collapse; font-size:.93rem; min-width:480px}
th{background:var(--navy); color:#fff; text-align:left; font-family:var(--head); font-weight:600;
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; padding:14px 18px}
td{padding:13px 18px; border-top:1px solid var(--line); vertical-align:top}
tr:nth-child(odd) td{background:var(--soft)}
td:first-child{font-weight:700; color:var(--ink)}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}

/* ---------- forms ---------- */
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-family:var(--head); font-weight:600; font-size:.76rem; color:var(--ink)}
.field input,.field select,.field textarea{font-family:inherit; font-size:.97rem; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px 14px; width:100%}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue-deep); outline:none}
.field .hint{font-size:.78rem; color:var(--muted)}
.formgrid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.formgrid .full{grid-column:1/-1}

/* ---------- accordion ---------- */
.acc{background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  margin-bottom:12px; box-shadow:var(--shadow-sm)}
.acc summary{cursor:pointer; padding:18px 22px; font-family:var(--head); font-weight:600;
  font-size:1rem; color:var(--ink); list-style:none; display:flex; justify-content:space-between;
  gap:14px; align-items:center}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+"; font-size:1.4rem; color:var(--green-deep); font-weight:700; flex:none; line-height:1}
.acc[open] summary::after{content:"–"}
.acc .accbody{padding:0 22px 20px; color:var(--body); font-size:.95rem}

/* ---------- photo placeholders ---------- */
.photoslot{display:grid; place-content:center; text-align:center; gap:6px; padding:26px;
  background:var(--green-tint); border:2px dashed var(--green); border-radius:var(--r);
  color:var(--green-deep); min-height:190px}
.photoslot b{font-family:var(--head); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase}
.photoslot span{font-size:.8rem; color:var(--body); max-width:34ch; line-height:1.5}

/* where the 6-8 film will sit once we have a file we can actually embed */
.videoslot{aspect-ratio:16/9; width:100%; max-width:820px; border-radius:var(--r); overflow:hidden;
  background:linear-gradient(140deg,#1D3557 0%,#2C4A20 100%); display:grid; place-content:center}
.videoslot-inner{display:grid; place-items:center; gap:10px; text-align:center; padding:26px; color:#fff}
.videoslot-play{display:grid; place-content:center; width:62px; height:62px; border-radius:50%;
  border:2px solid rgba(255,255,255,.55); font-size:1.35rem; padding-left:5px; line-height:1}
.videoslot-inner b{font-family:var(--head); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:#fff}
.videoslot-inner span{font-size:.84rem; color:rgba(255,255,255,.76); max-width:38ch; line-height:1.55}

.crumb{font-size:.76rem; color:var(--muted); font-family:var(--head); font-weight:500}
.crumb a{color:var(--muted); text-decoration:none}
.crumb a:hover{color:var(--green-deep)}

/* ---------- chart ---------- */
.chart{background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:26px; box-shadow:var(--shadow-sm)}
.chart-head{display:flex; justify-content:space-between; align-items:baseline; gap:14px; flex-wrap:wrap}
.chart-title{font-family:var(--head); font-weight:600; font-size:1.05rem; color:var(--ink)}
.chart-unit{font-size:.76rem; color:var(--muted)}
.chart-legend{display:flex; gap:18px; flex-wrap:wrap; margin:16px 0 22px}
.chart-legend span{display:inline-flex; align-items:center; gap:8px; font-size:.78rem; color:var(--body)}
.chart-legend i{width:12px; height:12px; border-radius:4px; flex:none}
.barrow{margin-bottom:22px}
.barrow:last-child{margin-bottom:0}
.barrow-top{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:8px}
.barrow-name{font-family:var(--head); font-weight:600; font-size:.92rem; color:var(--ink)}
.barrow-total{font-family:var(--head); font-weight:700; font-size:.95rem; color:var(--ink); font-variant-numeric:tabular-nums}
.bar{display:flex; gap:2px; height:32px}
.bar i{display:block; border-radius:3px; cursor:default}
.bar i:first-child{border-radius:8px 3px 3px 8px}
.bar i:last-child{border-radius:3px 8px 8px 3px}
.bar-zero{display:flex; align-items:center; gap:12px; height:32px}
.bar-zero::before{content:""; width:6px; height:32px; border-radius:4px; background:var(--green-deep)}
.bar-zero span{font-size:.92rem; color:var(--body)}
.seglabels{display:flex; gap:2px; margin-top:7px}
.seglabels span{font-size:.74rem; color:var(--muted); font-variant-numeric:tabular-nums;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.charttip{position:fixed; z-index:120; pointer-events:none; background:var(--navy); color:#fff;
  font-family:var(--head); font-size:.8rem; font-weight:500; padding:8px 12px; border-radius:8px;
  box-shadow:var(--shadow); opacity:0; transition:opacity .12s ease; white-space:nowrap}
.charttip.show{opacity:1}
.chart-foot{margin-top:20px; padding-top:16px; border-top:1px solid var(--line);
  font-size:.8rem; color:var(--muted)}

/* ---------- notes ---------- */
.note{background:var(--plum-tint); border-left:5px solid var(--plum); border-radius:0 14px 14px 0;
  padding:16px 20px; font-size:.86rem; color:var(--body)}
.note b{color:var(--plum-deep); font-family:var(--head); font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; font-size:.68rem}

.swatch{height:64px; border-radius:12px; border:1px solid var(--line)}
.tokenrow{display:flex; flex-direction:column; gap:7px; font-size:.78rem}
.tokenrow code{font-size:.74rem; color:var(--muted)}

/* ---------- quote request list ---------- */
.reqline{display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--line)}
.reqline:last-of-type{border-bottom:none}
.qty{display:flex; align-items:center; border:1px solid var(--line); border-radius:100px; overflow:hidden}
.qty button{background:var(--soft); border:none; width:36px; height:38px; cursor:pointer;
  font-size:1.1rem; color:var(--ink); font-family:var(--head); font-weight:600; line-height:1}
.qty button:hover{background:var(--green-tint); color:var(--green-deep)}
.qty input{width:46px; height:38px; border:none; text-align:center; font-variant-numeric:tabular-nums;
  background:#fff; color:var(--ink); font-family:var(--head); font-weight:600; font-size:.9rem}
.calcbar{height:14px; background:#EEF1EA; border-radius:10px; overflow:hidden}
.calcbar i{display:block; height:100%; border-radius:10px; background:var(--green)}

.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(140%);
  opacity:0; pointer-events:none;
  background:var(--navy); color:#fff; padding:14px 24px; border-radius:100px;
  font-family:var(--head); font-weight:600; font-size:.9rem; z-index:99;
  transition:transform .28s cubic-bezier(.2,.9,.3,1), opacity .2s linear; box-shadow:var(--shadow);
  max-width:calc(100vw - 40px); text-align:center}
.toast.show{transform:translateX(-50%) translateY(0); opacity:1; pointer-events:auto}

/* ---------- footer ---------- */
.sitefooter{background:#16283F; color:#9AA9BD; font-size:.86rem; padding-block:42px 28px;
  padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
.sitefooter h4{color:#fff; font-family:var(--head); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; margin-bottom:12px; font-weight:600}
.sitefooter a{color:#9AA9BD; text-decoration:none; font-size:.9rem; display:block; padding:3px 0}
.sitefooter a:hover{color:#fff}
.footbottom{border-top:1px solid #24405F; margin-top:30px; padding-top:20px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.8rem}
.footnote-soft{color:#7B8AA0}
.pillarlabel{font-family:var(--head); font-weight:600; font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--green-deep)}

/* ============================================================
   Product page — gallery + the scale selector
   The three tiers are NESTED, not parallel: each step contains
   the one below it. The UI says so, so nobody has to compare
   three columns to work out the difference.
   ============================================================ */
.gallery{display:flex; flex-direction:column; gap:12px; max-width:540px}
.gal-hero{background:#fff; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow-sm)}
.gal-hero img{display:block; width:100%; height:auto; background:#fff; image-rendering:auto}
.gal-thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.gal-thumbs button{padding:0; border:2px solid var(--line); border-radius:10px; overflow:hidden;
  background:#fff; cursor:pointer; aspect-ratio:1; transition:border-color .14s}
.gal-thumbs button[aria-current="true"]{border-color:var(--green-deep)}
.gal-thumbs button:hover{border-color:var(--blue)}
.gal-thumbs img{display:block; width:100%; height:100%; object-fit:contain; background:#fff; padding:4px}
.gal-cap{font-size:.82rem; color:var(--muted); text-align:center}

.buybox{display:flex; flex-direction:column; gap:18px}
.buy-head{display:flex; flex-direction:column; gap:10px}
.curric{display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  font-family:var(--head); font-weight:600; font-size:.74rem; letter-spacing:.08em;
  text-transform:uppercase; padding:6px 13px; border-radius:100px}
.curric--k5{background:var(--blue-tint); color:var(--blue-deep)}
.curric--v360{background:var(--plum-tint); color:var(--plum-deep)}

.scale{border:none; padding:0; margin:0}
.scale legend{font-family:var(--head); font-weight:600; font-size:.9rem;
  color:var(--ink); padding:0; margin-bottom:10px}
.scale legend span{font-weight:400; color:var(--muted); font-size:.84rem}
.scale-row{display:grid; grid-template-columns:22px 1fr auto; gap:14px; align-items:start;
  border:2px solid var(--line); border-radius:14px; padding:16px 18px; cursor:pointer;
  background:#fff; margin-bottom:10px; transition:border-color .14s, background .14s; position:relative}
.scale-row:hover{border-color:var(--blue)}
.scale-row:has(input:checked){border-color:var(--green-deep); background:var(--green-tint)}
.scale-row input{margin:0; width:20px; height:20px; accent-color:var(--green-deep); cursor:pointer}
.scale-body b{display:block; font-family:var(--head); font-weight:600; font-size:1rem; color:var(--ink)}
.scale-body span{display:block; font-size:.88rem; color:var(--body); margin-top:3px; line-height:1.5}
.scale-body .adds{color:var(--green-deep); font-weight:600}
.scale-price{font-family:var(--head); font-weight:700; font-size:1.25rem; color:var(--ink);
  font-variant-numeric:tabular-nums; white-space:nowrap}
.scale-flag{position:absolute; top:-10px; right:16px; background:var(--orange);
  color:#fff; font-family:var(--head); font-size:.62rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; padding:3px 10px; border-radius:100px}
@media(max-width:520px){.scale-row{grid-template-columns:22px 1fr; gap:10px}
  .scale-price{grid-column:2; margin-top:4px}}

.buy-total{display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  flex-wrap:wrap; padding-top:16px; border-top:2px solid var(--line)}
.buy-total .price{font-size:2.2rem}
.buy-actions{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap}

.factrow{display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.factrow div{background:#fff; padding:13px 15px}
.factrow b{display:block; font-family:var(--head); font-weight:600; font-size:.92rem; color:var(--ink)}
.factrow span{font-size:.78rem; color:var(--muted)}

/* catalog cards now lead with the box shot */
.kit-img{display:block; width:100%; aspect-ratio:5/4; object-fit:contain; background:var(--soft);
  padding:12px; border-bottom:1px solid var(--line)}
.kit-img--placeholder{display:grid; place-content:center; text-align:center; gap:5px; padding:18px;
  background:var(--green-tint); border-bottom:2px dashed var(--green); color:var(--green-deep)}
.kit-img--placeholder b{font-family:var(--head); font-size:.68rem; letter-spacing:.09em; text-transform:uppercase}
.kit-img--placeholder span{font-size:.74rem; color:var(--body); line-height:1.45}


/* ---------- the real logo ---------- */
.logomark{width:auto; height:48px; flex:none; display:block;
  transform-origin:50% 90%; animation:grow .75s cubic-bezier(.22,1,.3,1) both}
@keyframes grow{
  0%  {opacity:0; transform:scale(.72) rotate(-4deg)}
  60% {opacity:1; transform:scale(1.04) rotate(1.5deg)}
 100% {opacity:1; transform:scale(1) rotate(0)}
}
.brand:hover .logomark{animation:sway 1.6s ease-in-out}
@keyframes sway{0%,100%{transform:rotate(0)} 30%{transform:rotate(-2.5deg)} 65%{transform:rotate(1.8deg)}}
@media (prefers-reduced-motion:reduce){.logomark{animation:none}.brand:hover .logomark{animation:none}}

.footlogo{width:132px; height:auto; display:block; margin-bottom:16px;
  background:#fff; padding:10px 12px; border-radius:12px}

.herofig-art{margin:0; position:relative; z-index:1}
@keyframes artIn{from{opacity:0; transform:translateY(14px) scale(.97)} to{opacity:1; transform:none}}


/* ---- the hero stat cards, and the testimonial cards ------------------
   Both were flat PNGs. Rebuilt as markup so the words are words: editable,
   translatable, searchable, and readable by a screen reader. Same drawing —
   tilted cards on a colour-offset backing, sketch icons, leaf field. */
.statart{position:relative; aspect-ratio:520/470; container-type:inline-size}
.statart-bg{position:absolute; inset:0; width:100%; height:100%}
.statcard{position:absolute; background:var(--bg); border-radius:18px;
  padding:5cqw 5cqw 4.6cqw; animation:artIn .8s cubic-bezier(.22,1,.3,1) both;
  box-shadow:-2.1cqw 2.1cqw 0 0 var(--offset), 0 20px 40px -24px rgba(29,53,87,.42)}
.statcard-top{display:flex; align-items:center; justify-content:space-between; gap:2cqw}
.statcard-num{font-family:var(--head); font-weight:700; line-height:.92;
  font-size:11.5cqw; letter-spacing:-.03em}
.statcard-ico{width:8.4cqw; height:8.4cqw; fill:none; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round; flex:none}
.statcard p{font-size:3.05cqw; line-height:1.4; color:var(--body); margin-top:1.6cqw}
.statcard-spark{position:absolute; top:-2cqw; left:-1.4cqw; width:8cqw; height:8cqw}
.statcard-spark i{position:absolute; width:.9cqw; height:3.4cqw; border-radius:1cqw; display:block}
.statcard-spark i:nth-child(1){transform:rotate(-24deg); left:10%; top:6%}
.statcard-spark i:nth-child(2){transform:rotate(4deg);   left:44%; top:0}
.statcard-spark i:nth-child(3){transform:rotate(34deg);  left:76%; top:9%}

.statcard--blue{color:var(--navy)}
.statcard--blue{--offset:#5AA9E6}
.statcard--blue .statcard-num{color:var(--navy)}
.statcard--blue .statcard-ico{stroke:var(--blue-deep)}
.statcard--blue .statcard-spark i{background:var(--blue-deep)}
.statcard--green{--offset:#8DD05A}
.statcard--green .statcard-num{color:var(--forest)}
.statcard--green .statcard-ico{stroke:var(--green-deep)}
.statcard--green .statcard-spark i{background:var(--green-deep)}
.statcard--plum{--offset:#B57BD0}
.statcard--plum .statcard-num{color:var(--plum-deep)}
.statcard--plum .statcard-ico{stroke:var(--plum-deep)}
.statcard--plum .statcard-spark i{background:var(--plum-deep)}

.statart .s1{left:3%;  top:2%;   width:45%; transform:rotate(-4.5deg); animation-delay:.10s}
.statart .s2{right:0;  top:20%;  width:46%; transform:rotate(3.5deg);  animation-delay:.22s}
.statart .s3{left:11%; bottom:0;  width:47%; transform:rotate(-2deg);  animation-delay:.34s}
@media (prefers-reduced-motion:reduce){.statcard{animation:none}}

/* ---- testimonials ---- */
.quoteart{position:relative; display:grid; gap:24px; grid-template-columns:repeat(3,1fr);
  padding:40px 18px 30px}
.quoteart-bg{position:absolute; inset:0; width:100%; height:100%; z-index:0}
.qcard{position:relative; z-index:1; margin:0; background:var(--bg); border-radius:18px;
  padding:34px 26px 24px; box-shadow:0 18px 40px -26px rgba(29,53,87,.38)}
.qmark{position:absolute; top:-18px; left:22px; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--head); font-weight:700;
  font-size:2rem; line-height:1; padding-top:14px}
.qcard p{font-size:.98rem; line-height:1.62; color:var(--ink); margin:0}
.qcard .hl{color:inherit;
  background-image:linear-gradient(rgba(152,188,112,.45),rgba(152,188,112,.45));
  background-repeat:no-repeat;
  background-size:100% .88em; background-position:0 .22em;
  /* without this the highlight is painted as ONE box across every line of a
     wrapped headline, so it runs past the last word to the edge of the screen.
     clone gives each line fragment its own background. */
  -webkit-box-decoration-break:clone; box-decoration-break:clone}
.qcard cite{display:block; font-style:normal; margin-top:18px; padding-top:14px;
  border-top:2px solid var(--line)}
.qcard cite b{display:block; font-family:var(--head); font-weight:600; font-size:.9rem; color:var(--ink)}
.qloc{display:inline-flex; align-items:center; gap:5px; margin-top:4px;
  font-family:var(--head); font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase}
.qloc::before{content:""; width:11px; height:11px; border-radius:50% 50% 50% 0;
  transform:rotate(-45deg); flex:none}
.qcard--green .qmark{background:var(--green-tint); color:var(--green-deep)}
.qcard--green .qloc, .qcard--green .qloc::before{color:var(--green-deep); background-color:currentColor}
.qcard--green .qloc{background:none}
.qcard--blue .qmark{background:var(--blue-tint); color:var(--blue-deep)}
.qcard--blue .qloc{color:var(--blue-deep)} .qcard--blue .qloc::before{background:var(--blue-deep)}
.qcard--plum .qmark{background:var(--plum-tint); color:var(--plum-deep)}
.qcard--plum .qloc{color:var(--plum-deep)} .qcard--plum .qloc::before{background:var(--plum-deep)}
.qcard--green .qloc::before{background:var(--green-deep)}
@media(max-width:860px){.quoteart{grid-template-columns:1fr; gap:34px}}

.photoreal{margin:0; position:relative; border-radius:var(--r); overflow:hidden;
  box-shadow:var(--shadow-sm); background:#fff; border:1px solid var(--line)}
.photoreal img{display:block; width:100%; height:100%; aspect-ratio:4/3.4; object-fit:cover}
/* The two real classroom photographs are the only proof on the page that these
   kits exist in rooms. Three across rendered them at 349px, which is smaller
   than the source can survive; two across gives them 540px and the files are
   cut to match, so the browser resamples almost nothing. */
.photogrid{display:grid; gap:20px; grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.photogrid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.photogrid{grid-template-columns:1fr}}
/* a photoreal outside the proof grid: keep the frame at the source's own
   proportion so nothing is cropped, and let the caption sit under it */
.sidenote{border-left:3px solid var(--line); padding:4px 0 4px 18px;
  font-size:.86rem; line-height:1.65; color:var(--muted)}
.sidenote b{display:block; font-family:var(--head); font-weight:600; font-size:.7rem;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:5px}

/* ---- a question for Rachel ---------------------------------------
   Replaces the internal note boxes. Warm rather than red-flag: these
   are things only she can answer, not defects. */
.ask{border-left:4px solid var(--blue-deep); background:var(--blue-tint);
  border-radius:0 12px 12px 0; padding:16px 20px; font-size:.88rem;
  line-height:1.6; color:var(--body)}
.ask b{display:block; font-family:var(--head); font-weight:600; font-size:.7rem;
  letter-spacing:.11em; text-transform:uppercase; color:var(--blue-deep); margin-bottom:5px}
.ask em{font-style:normal; color:var(--ink); font-weight:600}
.ask .sig{display:block; margin-top:9px; font-size:.78rem; color:var(--muted)}

/* ---- Spanish page: the deck list ---- */
.eslist{list-style:none; padding:0; margin:0; display:grid; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden}
.eslist li{background:#fff; padding:9px 13px; font-size:.86rem; color:var(--body);
  display:grid; grid-template-columns:54px 1fr; gap:10px; align-items:baseline}
.eslist .num{font-family:var(--head); font-weight:600; color:var(--ink);
  font-variant-numeric:tabular-nums}

/* the Spanish flag on a contents row */
.es-tag{display:inline-block; margin-left:8px; font-family:var(--head); font-size:.6rem;
  font-weight:600; letter-spacing:.08em; text-transform:uppercase; vertical-align:middle;
  padding:2px 7px; border-radius:100px; background:var(--plum-tint); color:var(--plum-deep)}

/* ---- About: the portrait ----
   The dashed ring is the site's cut-line device wrapped round the founder --
   the person who does the cutting. The scissors badge sits on the ring where
   a cut would start, and three logo leaves break the circle so it reads as
   drawn rather than as a stock avatar frame. */
.portraitwrap{display:flex; flex-direction:column; align-items:center; gap:18px}
.portrait{position:relative; margin:30px 36px 34px; width:clamp(210px,24vw,290px); aspect-ratio:1}
.portrait img{position:relative; z-index:3; display:block; width:100%; height:100%;
  border-radius:50%; object-fit:cover; border:7px solid #fff;
  box-shadow:0 22px 46px -22px rgba(29,53,87,.45)}
.portrait::before{content:""; position:absolute; inset:-11px; border-radius:50%;
  border:3px solid var(--green); z-index:2}
.portrait::after{content:""; position:absolute; inset:-27px; border-radius:50%;
  border:2px dashed var(--orange); z-index:1}
.portrait-cut{position:absolute; z-index:4; top:9%; right:-34px; width:34px; height:34px;
  display:grid; place-items:center; border-radius:50%; background:var(--bg);
  border:2px solid var(--orange); color:var(--orange)}
.portrait-cut svg{width:17px; height:17px}
.portrait-leaf{position:absolute; z-index:4; width:58px; height:29px}
.portrait-leaf.pl1{top:-30px; left:4%;  transform:rotate(-38deg)}
.portrait-leaf.pl2{bottom:-16px; left:-32px; transform:rotate(26deg)}
.portrait-leaf.pl3{bottom:2%; right:-34px; width:46px; height:23px; transform:rotate(-14deg)}
.nameplate{text-align:center}
.nameplate b{display:block; font-family:var(--head); font-weight:700; font-size:1.3rem; color:var(--ink)}
.nameplate span{font-size:.84rem; color:var(--muted)}

/* ---- About: the pull quote ---- */
.bigquote{margin:0; border-left:4px solid var(--green-deep); padding:6px 0 6px 26px}
.bigquote p{font-family:var(--head); font-weight:500; line-height:1.34;
  font-size:clamp(1.35rem,3vw,2.1rem); letter-spacing:-.01em; color:var(--ink); margin:0; max-width:24ch}
.bigquote cite{display:block; margin-top:16px; font-style:normal; font-family:var(--head);
  font-weight:600; font-size:.8rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
@media(max-width:620px){.bigquote{padding-left:18px} .bigquote p{max-width:none}}

/* ---- quote totals and the ship-to block ---- */
.totals{border-top:2px solid var(--border); padding-top:16px; display:grid; gap:9px}
.totrow{display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap;
  font-size:var(--t-sm); color:var(--text-soft)}
.totrow small{display:block; font-size:var(--t-xs); color:var(--text-faint); font-weight:400}
.totrow .num{font-family:var(--head); font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.totrow--grand{border-top:1px solid var(--line); padding-top:11px; margin-top:2px;
  font-family:var(--head); font-weight:700; font-size:1rem; color:var(--ink)}
.totrow--grand .price{font-size:1.7rem}

.checkrow{display:grid; grid-template-columns:22px 1fr; gap:13px; align-items:start; cursor:pointer;
  border:2px solid var(--line); border-radius:14px; padding:15px 17px; background:#fff;
  transition:border-color .14s, background .14s}
.checkrow:hover{border-color:var(--blue)}
.checkrow:has(input:checked){border-color:var(--green-deep); background:var(--green-tint)}
.checkrow input{margin:0; width:20px; height:20px; accent-color:var(--green-deep); cursor:pointer}
.checkrow b{display:block; font-family:var(--head); font-weight:600; font-size:.95rem; color:var(--ink)}
.checkrow > span > span{display:block; font-size:.84rem; color:var(--body); margin-top:3px; line-height:1.5}
.splitbox{border-left:3px solid var(--green-deep); padding:16px 0 4px 18px; margin-left:10px}

/* ---- the contents listing: the whole point of the product page ----
   Her current site hides this in a linked sheet. A district buyer wants to
   find one lesson number and confirm the deck is in the box; search engines
   want the same text. Accordions keep 43 rows from swamping the page
   without moving a single row off it. */
.incl{display:grid; gap:10px}
.acc--big > summary{font-family:var(--head); font-weight:600; font-size:1rem;
  display:flex; align-items:center; justify-content:space-between; gap:14px}
.acccount{font-family:var(--head); font-weight:600; font-size:.72rem; letter-spacing:.04em;
  color:var(--green-deep); background:var(--green-tint); border-radius:100px;
  padding:4px 11px; white-space:nowrap; font-variant-numeric:tabular-nums}
.incl-note{font-size:.86rem; color:var(--body); line-height:1.55; margin-bottom:12px}
.incl-note b{color:var(--ink)}
table.contents{width:100%; border-collapse:collapse; font-size:.86rem}
table.contents th{text-align:left!important; background:transparent!important;
  font-family:var(--head); font-weight:600; font-size:.72rem;
  letter-spacing:.07em; text-transform:uppercase; color:var(--muted)!important;
  padding:0 12px 8px 0; border-bottom:2px solid var(--line)}
table.contents td{padding:8px 12px 8px 0; border-bottom:1px solid var(--line);
  vertical-align:top; text-align:left}
table.contents tr:last-child td{border-bottom:none}
/* the lesson reference reads as a label, not a figure: tabular digits, left aligned */
table.contents td.num{font-variant-numeric:tabular-nums; white-space:nowrap;
  font-family:var(--head); font-weight:600; color:var(--ink); width:1%}
table.contents th:last-child, table.contents td:last-child{text-align:right; padding-right:0;
  font-variant-numeric:tabular-nums; color:var(--body); font-weight:400}
table.contents tbody tr:hover{background:var(--green-tint)}
table.boards td.bcenter{font-family:var(--head); font-weight:600; color:var(--ink); white-space:nowrap}
table.boards td.bcenter--cont{border-bottom:none}
table.boards tr.bfirst td{border-top:2px solid var(--line)}
table.boards td.bstage{color:var(--body); white-space:nowrap}
.bnote{display:block; font-size:.76rem; color:var(--muted); line-height:1.45; margin-top:2px}
@media(max-width:620px){table.boards td.bcenter{white-space:normal}}

.kit--mini{display:block; text-decoration:none; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; background:#fff; box-shadow:var(--shadow-sm); transition:transform .14s, box-shadow .14s}
.kit--mini:hover{transform:translateY(-3px); box-shadow:0 18px 34px -22px rgba(29,53,87,.4)}
.kit--mini .kit-top{padding:12px 14px}
#pdSiblings{grid-template-columns:repeat(5,1fr)}
@media(max-width:900px){#pdSiblings{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){#pdSiblings{grid-template-columns:repeat(2,1fr)}}

#countTable th, #countTable td{padding-right:18px}
#countTable td.num:first-child, #countTable th:first-child{font-family:var(--head); font-weight:600; color:var(--ink); text-align:left}
#countTable th:not(:first-child), #countTable td:not(:first-child){text-align:right}
#countTable tbody tr:hover{background:var(--green-tint)}

.incl-legend{font-size:.78rem; color:var(--muted); line-height:1.6; margin-top:12px}

.photoreal--free{display:flex; flex-direction:column}
.photoreal--free img{height:auto; aspect-ratio:6/5; flex:none}
.photoreal--free figcaption{font-size:.78rem; color:var(--ink-faint); line-height:1.5;
  padding:11px 15px 13px; border-top:1px solid var(--line); background:var(--ground)}
.photogrid .photoreal{display:flex; flex-direction:column}
.photogrid .photoreal img{height:auto; aspect-ratio:4/3.4; flex:none}
.photogrid figcaption{font-size:.78rem; color:var(--ink-faint); line-height:1.5; padding:11px 15px 13px;
  border-top:1px solid var(--line); background:var(--ground); flex:1}

/* ==========================================================================
   WordPress / WooCommerce bridge — the only rules not in the mockup.
   ========================================================================== */
.admin-bar .siteheader{top:32px}
@media screen and (max-width:782px){.admin-bar .siteheader{top:46px}}

/* core block alignment classes, used by any page that falls back to the editor */
.entry-content{max-width:var(--wrap); margin-inline:auto}
.entry-content > *{max-width:72ch; margin-inline:auto}
.entry-content > .alignwide{max-width:var(--wrap)}
.entry-content > .alignfull{max-width:none}
.alignleft{float:left; margin:0 1.4rem 1rem 0}
.alignright{float:right; margin:0 0 1rem 1.4rem}
.aligncenter{display:block; margin-inline:auto}
.wp-caption-text,.wp-element-caption{font-size:var(--t-xs); color:var(--text-faint)}
.screen-reader-text{position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap}
.skip-link:focus{position:fixed; top:10px; left:10px; z-index:100; width:auto; height:auto;
  clip:auto; background:#fff; padding:10px 16px; border-radius:8px; box-shadow:var(--shadow-sm)}

/* ==========================================================================
   Mobile navigation.
   The mockup was reviewed as desktop-width PDF pages, so it never had one: at
   390px the eight links wrapped onto four rows and the header stood 264px tall,
   eating the first screen before the headline. Below 1100px the links collapse
   into a panel and a compact quote button stays in the bar, so the primary
   call to action is never behind a tap. Nothing above 1100px changes.
   ========================================================================== */
.navtoggle,.reqbtn--mobile{display:none}

@media (max-width:1100px){
  .headbar{flex-wrap:nowrap; gap:12px}
  .brand{margin-right:auto; min-width:0}
  .brandname{font-size:.88rem; line-height:1.18}

  .reqbtn--mobile{display:inline-flex; flex:none}
  .navtoggle{display:inline-flex; flex-direction:column; justify-content:center; gap:4px;
    width:44px; height:44px; flex:none; padding:0 11px; cursor:pointer;
    background:transparent; border:1px solid var(--line); border-radius:11px}
  .navtoggle span{display:block; height:2px; border-radius:2px; background:var(--ink);
    transition:transform .18s ease, opacity .18s ease}
  .navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  .nav{display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line); box-shadow:var(--shadow-sm);
    padding:4px 20px 18px; max-height:calc(100dvh - 100%); overflow-y:auto}
  .nav.is-open{display:flex}
  .nav a{padding:15px 2px; font-size:.84rem; border-bottom:1px solid var(--line)}
  .nav a[aria-current="page"]{color:var(--blue-deep)}
  /* the quote button lives in the bar on mobile, so the one inside the panel is
     redundant — hiding it rather than moving it keeps the desktop markup intact */
  .nav .reqbtn{display:none}
}

@media (max-width:460px){
  /* the strapline goes before the name does — "The Math Modernist" wrapping to
     two lines reads fine, "The Math Mo..." does not */
  .brandname span{display:none}
  .brandname{font-size:.82rem; max-width:11ch}
  .logomark{width:34px; height:auto}
  .reqbtn--mobile{padding-inline:.8em}
  .headbar{gap:9px}
}

/* WooCommerce: inherit the buttons and forms rather than shipping Woo's own look */
.woocommerce #respond input#submit,.woocommerce a.button,.woocommerce button.button,
.woocommerce input.button,.woocommerce #respond input#submit.alt,.woocommerce a.button.alt,
.woocommerce button.button.alt,.woocommerce input.button.alt{
  font-family:var(--head); font-weight:700; border-radius:999px; padding:.78em 1.4em;
  background:var(--blue-deep); color:#fff; border:0; line-height:1.15; text-transform:none}
.woocommerce #respond input#submit:hover,.woocommerce a.button:hover,
.woocommerce button.button:hover,.woocommerce input.button:hover{background:var(--navy); color:#fff}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.woocommerce form .form-row select,.woocommerce-page form .form-row input.input-text{
  font-family:var(--sans); border:1px solid var(--line); border-radius:var(--r-sm); padding:.7em .9em}
.woocommerce .woocommerce-message,.woocommerce .woocommerce-info{border-top-color:var(--green-deep)}
.woocommerce .woocommerce-message::before,.woocommerce .woocommerce-info::before{color:var(--green-deep)}
.woocommerce .woocommerce-error{border-top-color:var(--orange)}
.woocommerce-breadcrumb{font-size:var(--t-xs); color:var(--text-faint)}
.woo-shell{max-width:var(--wrap); margin-inline:auto; padding:48px 20px 72px}