/* MapleMind Resources — generated by scripts/gen-shop-pages.ts. Do not hand-edit.
   Builds on the course tree's tokens (--c-card, --c-border, --accent, …) so the
   store cannot drift from the rest of the site. Light + dark come free. */
/* An author display rule beats the UA's [hidden]{display:none}, which silently
   left the share menu open and the cart badge showing 0. Settle it once. */
.shop-page [hidden]{display:none !important}

/* ── Container and scale ───────────────────────────────────────────────────
   The store used the course tree's 920px reading column, which made a
   storefront look like a blog post and left the 1160px footer floating wider
   than the page above it. The store gets its own, wider container, and the
   footer is matched to it so the page reads as one object. */
.shop-page{--shop-max:1360px;--shop-max-rail:1480px;--shop-gutter:clamp(16px,3vw,36px);--shop-measure:72ch}
.shopwrap{max-width:var(--shop-max);margin:0 auto;padding:0 var(--shop-gutter);width:100%}
/* product pages manage their own width — a second container here would cap the
   rail grid at the narrower column width and double the side padding */
.shopmain{width:100%}
.prailgrid > .pmain, .prailgrid > .prail{min-width:0}
.shop-page footer .container{max-width:var(--shop-max);padding:0 var(--shop-gutter)}
.shop-page .block{margin:clamp(30px,3.4vw,48px) 0}
.shop-page h1{font-size:clamp(30px,3.2vw,46px)}
.shop-page h2{font-size:clamp(21px,1.9vw,29px);margin-bottom:12px}
.shop-page h3{font-size:clamp(16px,1.2vw,19px)}
.shop-page .block > p{font-size:17px;line-height:1.68;max-width:74ch}
.shop-page .chero .capsule{max-width:70ch;font-size:clamp(15.5px,1.25vw,18px)}

/* ── The page grid ─────────────────────────────────────────────────────────
   The rail is a real panel pinned to the left edge of the window, the way the
   web app's desktop sidebar sits. It used to be inside the page container, so
   it carried the page's own left padding and floated in the middle of a gap.
   Product content is first in the DOM and moved right by the grid. */
.shop-page{--rail-w:320px}
.prailgrid{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);align-items:start}
/* Side padding trimmed ~22% and the reclaimed width given to the content. */
.pmain{grid-column:2;grid-row:1;min-width:0;max-width:1340px;margin:0 auto;width:100%;
  padding:clamp(36px,4vw,72px) clamp(19px,2.5vw,47px) 0}
.prail{grid-column:1;grid-row:1;position:sticky;top:var(--nav-h,68px);
  max-height:calc(100vh - var(--nav-h,68px));overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  background:var(--c-card);border-right:1px solid var(--c-border);
  padding:clamp(28px,3vw,40px) 16px 34px;display:grid;gap:20px;align-content:start}
.prail::-webkit-scrollbar{width:6px}
.prail::-webkit-scrollbar-thumb{background:var(--c-border);border-radius:99px}
/* the rail's own sections must not inherit the page's big block rhythm */
.prail .block{margin:0}
.pmain > .block:first-child{margin-top:0}

/* product row */
.prow{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:clamp(24px,2.4vw,40px);align-items:start}

/* ── Gallery ───────────────────────────────────────────────────────────────
   A fixed square stage with object-fit:CONTAIN. The old rule forced every
   image into a square crop with object-fit:cover, which sliced the sides off
   every page that wasn't square — which is all of them. */
.pgal-stage{position:relative;background:#fff;border:1px solid var(--c-border);border-radius:18px;box-shadow:var(--c-shadow);overflow:hidden}
.pgal-zoom{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;line-height:0}
.pgal-main{width:100%;height:auto;aspect-ratio:1;object-fit:contain;display:block;background:#fff;padding:10px}
.pgal-arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:1px solid var(--c-border);background:rgba(255,255,255,.94);color:var(--c-navy);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--c-shadow);opacity:0;transition:opacity .16s ease,transform .16s ease}
.pgal-prev{left:12px}
.pgal-next{right:12px}
.pgal-stage:hover .pgal-arrow,.pgal-arrow:focus-visible{opacity:1}
.pgal-arrow:hover{transform:translateY(-50%) scale(1.06)}
.pgal-idx{position:absolute;right:12px;bottom:12px;background:rgba(15,27,45,.78);color:#fff;font-family:'Inter',sans-serif;font-size:11.5px;font-weight:700;border-radius:999px;padding:5px 11px;line-height:1.4}
.pgal-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px}
.pgal-t{padding:0;border:1px solid var(--c-border);background:#fff;border-radius:11px;overflow:hidden;cursor:pointer;line-height:0;transition:border-color .15s ease,transform .15s ease}
.pgal-t img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;display:block;padding:3px}
.pgal-t.is-on{border-color:var(--accent,#1A5CFF);border-width:2px}
.pgal-t:hover{transform:translateY(-1px)}
.pgal-t:focus-visible{outline:3px solid var(--c-blue);outline-offset:2px}

/* ── Buy card ──────────────────────────────────────────────────────────────
   NOT sticky. It used to be, and because its siblings sit under it in the same
   column it slid over the share button and the spec list as you scrolled. The
   rail's mini card and the floating cart do that job without covering text. */
.buybox{background:var(--c-card);border:1px solid var(--c-border);border-radius:18px;padding:24px;box-shadow:var(--c-shadowlift);position:relative;overflow:hidden}
.buybox::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent,#1A5CFF)}
.bb-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bb-price{display:flex;align-items:baseline;gap:7px;font-family:'Sora',sans-serif}
.bb-amt{font-size:42px;font-weight:800;letter-spacing:-1px;line-height:1}
.bb-cur{font-size:13px;font-weight:700;color:var(--c-text3)}
.bb-tag{font-family:'Inter',sans-serif;font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-green);background:color-mix(in srgb,var(--c-green) 12%,transparent);border-radius:999px;padding:5px 11px;white-space:nowrap}
.bb-tax{font-size:12.5px;color:var(--c-text3);margin-top:7px}
.bb-actions{display:flex;flex-direction:column;gap:10px;margin:18px 0 14px}
.bb-add,.bb-now,.yp-add,.cart-go,.pcard-add,.rm-add,.rm-quick{font-family:'Inter',sans-serif;font-weight:700;border:0;cursor:pointer;border-radius:12px;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease}
.bb-add{background:var(--c-blue);color:#fff;font-size:16.5px;padding:16px 20px;box-shadow:0 2px 10px rgba(26,92,255,.26);position:relative;overflow:hidden}
.bb-add::before{content:'';position:absolute;top:0;left:-110%;width:60%;height:100%;background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.3) 50%,transparent 80%);transform:skewX(-20deg);transition:left .65s cubic-bezier(.25,.46,.45,.94);pointer-events:none}
.bb-add:hover::before{left:130%}
.bb-now{background:transparent;color:var(--c-text);font-size:15px;padding:13px 20px;border:1.5px solid var(--c-border)}
.bb-add:hover,.yp-add:hover,.cart-go:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(26,92,255,.3)}
.bb-now:hover{border-color:var(--accent,#1A5CFF);background:color-mix(in srgb,var(--accent,#1A5CFF) 6%,transparent)}
.bb-add:focus-visible,.bb-now:focus-visible,.yp-add:focus-visible,.cart-go:focus-visible,.pcard-add:focus-visible{outline:3px solid var(--c-blue);outline-offset:2px}
/* Brand green behind white text measures 2.59:1, under the 4.5:1 floor. The
   token stays as-is everywhere it's used as an accent on a light surface;
   filled buttons carrying white text use a darker step of the same hue. */
.shop-page{--c-green-btn:#12833A;--c-green-text:#12833A}
.bb-add.is-in{background:var(--c-green-btn);box-shadow:0 2px 10px rgba(18,131,58,.26)}
.bb-add.is-in:hover{box-shadow:0 8px 22px rgba(18,131,58,.3)}
.pcard-add.is-in,.rm-add.is-in{background:var(--c-green-btn)}
.sb-add.is-in{background:var(--c-green-btn)}
/* volume meter — shop.js fills this from the real cart, so the saving shown
   is always the saving the buyer would actually get */
.bb-meter{margin:0 0 14px}
.bb-meter-track{height:6px;border-radius:99px;background:var(--c-borderdim);overflow:hidden}
.bb-meter-fill{display:block;height:100%;border-radius:99px;background:var(--c-green);transition:width .3s cubic-bezier(.4,0,.2,1)}
.bb-meter-lab{font-size:13px;color:var(--c-text2);margin-top:8px;line-height:1.5}
.bb-meter.is-hit .bb-meter-lab{color:var(--c-green);font-weight:700}
.bb-fine{font-size:12px;color:var(--c-text3);margin-top:8px}
.bb-legal{font-size:11.5px;color:var(--c-text3);margin-top:12px;line-height:1.5}
.buybox-compact{padding:18px}
.pspecs{list-style:none;margin-top:18px;display:grid;gap:8px}
.pspecs li{font-size:14px;color:var(--c-text2);padding-left:20px;position:relative}
.pspecs li::before{content:'';position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;background:var(--accent,#1A5CFF);opacity:.5}

/* brand badge pills — bold label only, no sentence underneath */
.bpills{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.bpills li{display:inline-flex;align-items:center;gap:7px;font-family:'Inter',sans-serif;font-weight:700;font-size:12px;letter-spacing:.02em;color:var(--c-text);background:color-mix(in srgb,var(--accent,#1A5CFF) 9%,var(--c-card));border:1px solid color-mix(in srgb,var(--accent,#1A5CFF) 22%,transparent);border-radius:999px;padding:8px 14px}
.bp-ic{display:inline-flex;color:var(--accent,#1A5CFF)}

/* description + side column */
/* The right column is capped, so every pixel reclaimed from the page padding
   widens the reading column rather than stretching the spec panel. */
.pinfo{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,390px);gap:clamp(24px,2.6vw,46px);align-items:start}
.pdesc .block:first-child{margin-top:0}
.pside{position:sticky;top:calc(var(--nav-h,68px) + 14px)}
.pside .block:first-child{margin-top:0}
.pside h2{font-size:19px}
/* the spec table lives in a narrow column here — a 190px label column left the
   values about 130px wide and wrapped "PDF" onto four lines */
.pside .hrow{grid-template-columns:104px minmax(0,1fr);gap:10px;padding:10px 14px}
.pside .hrow dt{font-size:12px}
.pside .hrow dd{font-size:13.5px}
.pside .ilist li{font-size:14.5px}

/* trust row */
.trust-row{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.trust-row li{background:var(--c-card);border:1px solid var(--c-border);border-radius:14px;padding:14px 16px}
.trust-row b{display:block;font-family:'Sora',sans-serif;font-size:14.5px}
.trust-row span{display:block;font-size:12.5px;color:var(--c-text3);margin-top:3px;line-height:1.45}

/* ── Section devices for the pages that aren't product pages ───────────────
   These pages were <h2> + <p> stacked in a 1360px box, so the prose ran at
   760px and the right half of every screen was empty. The fix isn't a wider
   paragraph — 760px is the right measure for reading. It's giving each
   section a real layout: a head, then a grid, a shelf or a second column. */
.shead{margin-bottom:18px;max-width:var(--shop-measure,72ch)}
.shead-eye{font-family:'Inter',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--accent,#1A5CFF);margin-bottom:7px}
.shead h2{margin-bottom:0}
.shead-lead{color:var(--c-text2);font-size:16.5px;line-height:1.65;margin-top:9px}
/* a section head inside a flex .li-head must not also cap itself */
.li-head .shead{margin-bottom:0}

/* two-column section: prose and a supporting object */
.srow{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(26px,3.4vw,54px);align-items:start}
.srow-a p{color:var(--c-text2);font-size:16.5px;line-height:1.7;margin-bottom:13px;max-width:60ch}
.srow-b{position:sticky;top:calc(var(--nav-h,68px) + 18px)}

/* the ten components — the one genuinely distinctive thing about the product,
   and previously a paragraph on one page and a bullet list on another */
.cgrid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px;counter-reset:none}
.cgc{position:relative;background:var(--c-card);border:1px solid var(--c-border);border-radius:15px;padding:18px 18px 17px;box-shadow:var(--c-shadow);transition:border-color .16s ease,transform .16s ease}
.cgc:hover{border-color:color-mix(in srgb,var(--accent,#1A5CFF) 42%,var(--c-border));transform:translateY(-2px)}
.cgc-n{position:absolute;top:15px;right:17px;font-family:'Inter',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.06em;color:var(--c-text3);opacity:.62}
.cgc-ic{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:color-mix(in srgb,var(--accent,#1A5CFF) 11%,transparent);color:var(--accent,#1A5CFF);margin-bottom:13px}
.cgc-ic svg{width:20px;height:20px}
.cgc b{display:block;font-family:'Sora',sans-serif;font-weight:700;font-size:15.5px;line-height:1.3;margin-bottom:6px}
.cgc small{display:block;font-size:13.5px;line-height:1.58;color:var(--c-text2)}

/* real covers, running off the right edge because there are 764 of them */
.shelfblock{overflow:hidden}
.shelf{display:grid;grid-auto-flow:column;grid-auto-columns:186px;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 10px;scrollbar-width:none}
.shelf::-webkit-scrollbar{display:none}
.shelf:focus-visible{outline:3px solid var(--c-blue);outline-offset:4px;border-radius:14px}
.shelf-i{scroll-snap-align:start;text-decoration:none;color:inherit;display:block}
/* height:auto is load-bearing. The width/height attributes on the tag are
   presentational hints, and with BOTH set the browser ignores aspect-ratio —
   which stretched every square cover into a 186x260 box and cropped the course
   name off the sides. Same defect that hit the product gallery. */
.shelf-i img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#fff;border:1px solid var(--c-border);border-radius:13px;box-shadow:var(--c-shadow);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;display:block}
.shelf-i:hover img{transform:translateY(-3px);box-shadow:var(--c-shadowlift);border-color:color-mix(in srgb,var(--accent,#1A5CFF) 45%,var(--c-border))}
.shelf-i:focus-visible img{outline:3px solid var(--c-blue);outline-offset:3px}
.shelf-sub{display:block;font-family:'Inter',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent,#1A5CFF);margin:11px 0 3px}
.shelf-i b{display:block;font-family:'Sora',sans-serif;font-weight:700;font-size:14px;line-height:1.3}

/* price tiers */
.ptiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:16px;max-width:760px}
.ptier{background:var(--c-card);border:1px solid var(--c-border);border-radius:16px;padding:20px 22px;box-shadow:var(--c-shadow)}
.ptier-best{border-color:color-mix(in srgb,var(--c-green) 46%,var(--c-border));background:color-mix(in srgb,var(--c-green) 4%,var(--c-card))}
.ptier-lab{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-family:'Inter',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--c-text3)}
.ptier-tag{font-size:11px;letter-spacing:.04em;text-transform:none;color:#fff;background:var(--c-green-btn);border-radius:999px;padding:3px 9px}
.ptier-n{font-family:'Sora',sans-serif;font-weight:800;font-size:38px;line-height:1.1;margin:9px 0 8px;letter-spacing:-.02em}
.ptier-n small{font-family:'Inter',sans-serif;font-weight:600;font-size:14px;color:var(--c-text3);margin-left:8px;letter-spacing:0}
.ptier-d{font-size:14.5px;line-height:1.58;color:var(--c-text2)}
.ptier-fine{font-size:13px;color:var(--c-text3);margin-top:14px;max-width:70ch}

/* four true numbers */
.statbar{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:20px;background:var(--c-border);border:1px solid var(--c-border);border-radius:16px;overflow:hidden}
.statbar li{background:var(--c-card);padding:17px 19px}
.statbar b{display:block;font-family:'Sora',sans-serif;font-weight:800;font-size:26px;line-height:1.15;letter-spacing:-.02em}
.statbar small{display:block;font-size:12.5px;line-height:1.5;color:var(--c-text3);margin-top:4px}

/* province + grade tiles */
.provtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px}
.provtile{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--c-card);border:1px solid var(--c-border);border-left:4px solid var(--accent,#1A5CFF);border-radius:14px;padding:15px 17px 15px 15px;text-decoration:none;color:var(--c-text);box-shadow:var(--c-shadow);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.provtile:hover{transform:translateY(-2px);box-shadow:var(--c-shadowlift);border-color:color-mix(in srgb,var(--accent,#1A5CFF) 40%,var(--c-border));border-left-color:var(--accent,#1A5CFF)}
.provtile-b{min-width:0}
.provtile b{display:block;font-family:'Sora',sans-serif;font-weight:700;font-size:15.5px;line-height:1.3}
.provtile small{display:block;color:var(--c-text3);font-size:12.5px;margin-top:3px}
.provtile-n{flex:none;text-align:right;font-family:'Sora',sans-serif;font-weight:800;font-size:23px;line-height:1;letter-spacing:-.02em;color:var(--accent,#1A5CFF)}
.provtile-n small{display:block;font-family:'Inter',sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-text3);margin-top:4px}
.gradetiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:11px}
.gradetile{background:var(--c-card);border:1px solid var(--c-border);border-top:3px solid var(--accent,#1A5CFF);border-radius:13px;padding:14px 15px;text-decoration:none;color:var(--c-text);box-shadow:var(--c-shadow);transition:transform .15s ease,box-shadow .15s ease}
.gradetile:hover{transform:translateY(-2px);box-shadow:var(--c-shadowlift)}
.gradetile b{display:block;font-family:'Sora',sans-serif;font-weight:700;font-size:16px}
.gradetile small{display:block;color:var(--c-text3);font-size:12.5px;margin-top:2px}

/* the confidence tracker, drawn. an illustration of the printed page — the
   dots are decoration, so they carry no semantics for a screen reader; the
   caption and the note carry the meaning. */
.tdemo{background:var(--c-card);border:1px solid var(--c-border);border-radius:16px;padding:20px 22px;box-shadow:var(--c-shadow)}
.tdemo-cap{font-family:'Inter',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-text3);margin-bottom:15px;line-height:1.5}
.tdemo-head,.tdemo-row{display:grid;grid-template-columns:minmax(0,1fr) 78px 78px;gap:12px;align-items:center}
.tdemo-head{font-family:'Inter',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--c-text3);padding-bottom:9px;border-bottom:1px solid var(--c-border)}
.tdemo-head span+span,.tdemo-dots{justify-self:center}
.tdemo-row{padding:13px 0;border-bottom:1px solid var(--c-borderdim)}
.tdemo-lab{font-size:14.5px;line-height:1.45;color:var(--c-text)}
.tdemo-dots{display:flex;gap:6px}
.tdot{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--c-border)}
.tdot.is-on{border-color:transparent}
.tdot-a{background:color-mix(in srgb,var(--c-amber) 78%,transparent)}
.tdot-b{background:var(--c-green-btn)}
.tdemo-note{font-size:13px;line-height:1.6;color:var(--c-text2);margin-top:14px}

/* A policy page is prose, and prose belongs at a reading measure. Left-aligned
   in a 1360px column that reads as a page with something missing from the
   right, so the document centres itself under the full-width summary. */
.legalbody{max-width:min(100%,860px);margin:0 auto}
.legalbody h2{font-size:clamp(19px,1.6vw,25px)}
.legalbody .block>p{max-width:none;font-size:16px;line-height:1.72;margin-bottom:11px}

/* refunds: the policy in four figures, above the prose */
.glance{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:14px}
.glance li{background:var(--c-card);border:1px solid var(--c-border);border-radius:15px;padding:17px 18px;box-shadow:var(--c-shadow)}
.glance-ic{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;background:color-mix(in srgb,var(--accent,#1A5CFF) 12%,transparent);color:var(--accent,#1A5CFF);margin-bottom:12px}
.glance-ic svg{width:18px;height:18px}
.glance b{display:block;font-family:'Sora',sans-serif;font-weight:700;font-size:18px}
.glance small{display:block;font-size:13px;line-height:1.5;color:var(--c-text2);margin-top:3px}

.packlist{list-style:none;display:grid;gap:11px;margin:16px 0 18px;counter-reset:pk}
.packlist li{position:relative;padding-left:38px;font-size:15.5px;line-height:1.6;color:var(--c-text2)}
.packlist li b{color:var(--c-text)}
.packlist li::before{counter-increment:pk;content:counter(pk);position:absolute;left:0;top:1px;width:25px;height:25px;border-radius:50%;background:color-mix(in srgb,var(--accent,#1A5CFF) 12%,transparent);color:var(--accent,#1A5CFF);font-family:'Inter',sans-serif;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center}
.ilist{list-style:none;display:grid;gap:9px}
.ilist li{padding-left:26px;position:relative;font-size:15.5px}
.ilist li::before{content:'✓';position:absolute;left:0;color:var(--c-green);font-weight:700}
.honest{background:color-mix(in srgb,var(--c-amber) 7%,var(--c-card));border:1px solid var(--c-border);border-left:4px solid var(--c-amber);border-radius:16px;padding:20px 22px}
.honest h2{font-size:19px}

/* year pack */
.yearpack{background:color-mix(in srgb,var(--accent,#1A5CFF) 6%,var(--c-card));border:1px solid var(--c-border);border-left:4px solid var(--accent,#1A5CFF);border-radius:16px;padding:24px 26px}
.yp-eyebrow{font-family:'Inter',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent,#1A5CFF)}
.yp-head h2{margin:6px 0 8px}
.yp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0}
.yp-block{background:var(--c-card);border:1px solid var(--c-border);border-top:3px solid var(--accent,#1A5CFF);border-radius:12px;padding:14px 16px 12px}
.yp-bt{font-family:'Inter',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent,#1A5CFF);margin-bottom:9px}
.yp-opts{list-style:none;display:grid;gap:6px}
.yp-opt{display:flex;align-items:center;gap:10px;border-radius:8px;padding:3px 4px;transition:background .12s ease}
.yp-opt:hover{background:color-mix(in srgb,var(--accent,#1A5CFF) 7%,transparent)}
.yp-pick{display:flex;align-items:center;gap:10px;flex:1;cursor:pointer;min-width:0}
.yp-cb{width:18px;height:18px;accent-color:var(--accent,#1A5CFF);flex:none;cursor:pointer}
.yp-name{font-weight:600;font-size:14.5px;line-height:1.35}
.yp-link{font-size:12.5px;flex:none;opacity:.85}
.yp-nudge{background:color-mix(in srgb,var(--c-blue) 10%,transparent);color:var(--c-text2);font-weight:500;font-size:14.5px;border-radius:9px;padding:10px 13px;margin-top:12px}
.yp-nudge b{font-family:'Sora',sans-serif;font-weight:800;color:var(--c-blue)}
.yp-nudge.is-hit{background:color-mix(in srgb,var(--c-green) 12%,transparent);color:var(--c-green-text);font-weight:700}
.yp-nudge.is-hit b{color:var(--c-green-text)}
.yp-meter{margin-top:16px}
.yp-total s.yp-was{position:relative;text-decoration:none;color:var(--c-text3);font-size:17px}
.yp-total s.yp-was::after{content:'';position:absolute;left:-3px;right:-3px;top:52%;height:2px;background:var(--c-red);transform:rotate(-9deg);border-radius:2px}
.yp-total .yp-sum{color:var(--c-green-text)}
.yp-add[disabled]{background:var(--c-border);color:var(--c-text3);cursor:not-allowed;box-shadow:none}
.yp-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--c-border);padding-top:16px}
.yp-total{font-family:'Sora',sans-serif;font-size:15px}
.yp-total b{font-size:22px}
.yp-each{color:var(--c-green);font-weight:700}
.yp-add{background:var(--c-red);color:#fff;font-size:16px;padding:14px 24px;box-shadow:var(--c-shadow)}
.yp-fine{font-size:12.5px;color:var(--c-text3);margin-top:12px}

/* listing pages — same rail panel as the product page */
.pf-toggle{display:none}
.pf-body{display:grid;gap:0}
.rail-group{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--c-borderdim)}
.pf-search input,.pf-sort{width:100%;padding:11px 13px;border:1px solid var(--c-border);border-radius:10px;background:var(--c-bg);color:var(--c-text);font-size:15px;font-family:inherit}
.pf-sort{cursor:pointer}
.pf-hint{font-size:13px;color:var(--c-text3);margin-top:7px;line-height:1.45}
.pf-search input:focus-visible,.pf-sort:focus-visible{outline:3px solid var(--c-blue);outline-offset:2px}
.pf-group{border:0;margin:0;padding:0}
.pf-chk{display:flex;align-items:center;gap:9px;font-size:15px;padding:5px 0;cursor:pointer}
.pf-chk input{accent-color:var(--c-blue);width:18px;height:18px}
.pf-chk span::before{content:'';display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--accent,#1A5CFF);margin-right:8px;vertical-align:middle}
.pf-count{font-size:14px;color:var(--c-text3);border-top:1px solid var(--c-border);padding-top:13px;margin-top:14px}
.pf-clear{background:none;border:0;color:var(--c-link);font-size:14px;cursor:pointer;padding:7px 0;font-family:inherit}
/* grade links in the rail */
.rg-list{list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.rg-link{display:inline-flex;align-items:center;gap:7px;font-family:'Inter',sans-serif;font-weight:600;font-size:14px;color:var(--c-text2);text-decoration:none;border:1px solid var(--c-border);border-radius:9px;padding:7px 11px;transition:border-color .15s ease,color .15s ease}
.rg-link small{color:var(--c-text3);font-weight:500}
.rg-link:hover{border-color:var(--c-blue);color:var(--c-blue)}
.rg-link.is-on{border-color:var(--c-blue);color:var(--c-blue);background:color-mix(in srgb,var(--c-blue) 8%,transparent)}
/* active filter chips */
.pgrid-head{margin-bottom:14px}
.pf-chips{display:flex;flex-wrap:wrap;gap:8px}
.pf-chip{display:inline-flex;align-items:center;gap:8px;font-family:'Inter',sans-serif;font-weight:600;font-size:13.5px;color:var(--c-text);background:var(--c-card);border:1px solid var(--c-border);border-radius:999px;padding:7px 13px;cursor:pointer}
.pf-chip:hover{border-color:var(--c-blue);color:var(--c-blue)}
.pf-chip span{color:var(--c-text3);font-size:15px;line-height:1}
.pf-chip-all{background:transparent;border-style:dashed}
.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}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
.pcard{background:var(--c-card);border:1px solid var(--c-border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--c-shadow);transition:transform .15s ease,box-shadow .15s ease}
.pcard:hover{transform:translateY(-2px);box-shadow:var(--c-shadowlift)}
.pcard-link{display:block;text-decoration:none;color:inherit;padding-bottom:4px}
.pcard-img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;background:#fff;border-bottom:1px solid var(--c-border)}
.pcard-noimg{background:color-mix(in srgb,var(--accent,#1A5CFF) 12%,var(--c-card))}
.pcard-sub{display:block;font-family:'Inter',sans-serif;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent,#1A5CFF);padding:11px 13px 3px}
.pcard-name{display:block;font-family:'Sora',sans-serif;font-weight:700;font-size:15px;line-height:1.28;padding:0 13px 10px}
.pcard-buy{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 13px;border-top:1px solid var(--c-borderdim)}
.pcard-price{font-family:'Sora',sans-serif;font-weight:700;font-size:15px}
.pcard-add{background:var(--c-blue);color:#fff;font-size:13px;padding:7px 15px;border-radius:9px}
.pcard-add.is-in{background:var(--c-green)}
/* a real empty state: says what happened and offers the way out */
.pgrid-empty{text-align:center;padding:46px 24px;background:var(--c-card);border:1px dashed var(--c-border);border-radius:16px}
.pge-h{font-family:'Sora',sans-serif;font-weight:700;font-size:19px;margin-bottom:6px}
.pgrid-empty p{color:var(--c-text2);font-size:15px;max-width:46ch;margin:0 auto}
.pge-btn{margin-top:16px;font-family:'Inter',sans-serif;font-weight:700;font-size:14.5px;color:#fff;background:var(--c-blue);border:0;border-radius:11px;padding:11px 22px;cursor:pointer}
.pge-btn:hover{transform:translateY(-1px)}
.gtiles .card.is-on{border-color:var(--accent,#1A5CFF);border-width:2px}

/* finder + store home */
/* The finder is the fastest route to a specific course, and it was a small
   left-aligned input under a heading. It's the first thing on the hub now. */
.finderbox{background:var(--c-card);border:1px solid var(--c-border);border-radius:20px;padding:clamp(22px,2.6vw,34px);box-shadow:var(--c-shadow);position:relative;overflow:hidden}
.finderbox::before{content:'';position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--c-blue),var(--c-green))}
.finder-eye{font-family:'Inter',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--c-blue);margin-bottom:9px}
.finder-input{width:100%;max-width:620px;padding:15px 18px;border:1.5px solid var(--c-border);border-radius:13px;background:var(--c-bg);color:var(--c-text);font-size:17px;font-family:inherit;transition:border-color .15s ease}
.finder-input:hover{border-color:color-mix(in srgb,var(--c-blue) 40%,var(--c-border))}
.finder-lab{font-family:'Sora',sans-serif;font-size:clamp(19px,1.7vw,25px);font-weight:700;color:var(--c-text);display:block;margin-bottom:13px;letter-spacing:0;text-transform:none}
.finder-hint{font-size:13.5px;color:var(--c-text3);margin-top:10px}
.finder-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:14px}
.fx-hit{display:block;text-decoration:none;background:var(--c-card);border:1px solid var(--c-border);border-left:3px solid var(--accent,#1A5CFF);border-radius:11px;padding:11px 13px;color:inherit}
.fx-hit:hover{border-color:var(--accent,#1A5CFF)}
.fx-hit b{display:block;font-family:'Sora',sans-serif;font-size:14.5px}
.fx-hit small{display:block;color:var(--c-text3);font-size:12.5px;margin-top:2px}
/* The store's front door. It was a small card with a decorative thumbnail fan;
   it's the page's opening statement now, with the covers at a size you can
   actually read the course name on. */
.linecard{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,31vw,392px);gap:clamp(26px,3vw,50px);align-items:center;background:var(--c-card);border:1px solid var(--c-border);border-radius:22px;padding:clamp(26px,3vw,44px);box-shadow:var(--c-shadow);position:relative;overflow:hidden}
.linecard::before{content:'';position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--c-blue),var(--c-green))}
.lc-eyebrow{font-family:'Inter',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--c-blue)}
.linecard h2{margin:8px 0 12px;font-size:clamp(26px,2.7vw,38px);letter-spacing:-.015em}
.linecard-body>p{color:var(--c-text2);font-size:16.5px;line-height:1.68;max-width:56ch}
.lc-price{font-family:'Sora',sans-serif;font-weight:700;font-size:17px;margin:16px 0 20px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lc-price span{color:var(--c-text3);font-weight:400}
.lc-go{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.lc-go .btn-sm{font-size:15px;padding:12px 22px;border-radius:12px}
.lc-alt{font-size:14.5px;color:var(--c-link);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--c-link) 35%,transparent)}
.lc-alt:hover{border-bottom-color:var(--c-link)}
.linecard-art{position:relative;height:clamp(190px,18vw,238px);--lc-w:clamp(126px,13vw,168px)}
.lc-img{position:absolute;width:var(--lc-w);height:auto;aspect-ratio:1;object-fit:contain;border-radius:14px;border:1px solid var(--c-border);box-shadow:var(--c-shadowlift);background:#fff;top:50%}
.lc-img-0{left:0;transform:translateY(-50%) rotate(-6deg) scale(.92);z-index:1}
.lc-img-1{left:50%;margin-left:calc(var(--lc-w) / -2);transform:translateY(-50%);z-index:3}
.lc-img-2{right:0;transform:translateY(-50%) rotate(6deg) scale(.92);z-index:2}
.btn-sm-ghost{background:transparent;color:var(--c-text);border:1.5px solid var(--c-border)}

/* cart + thank-you */
.cart-lines{list-style:none;display:grid;gap:10px;margin-bottom:20px}
.cart-line{display:flex;align-items:center;gap:14px;background:var(--c-card);border:1px solid var(--c-border);border-radius:12px;padding:12px 14px}
.cart-line img{width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid var(--c-border);flex:none;background:#fff}
.cart-line-b{flex:1;min-width:0}
.cart-line-b b{display:block;font-family:'Sora',sans-serif;font-size:15px}
.cart-line-b small{color:var(--c-text3);font-size:12.5px}
.cart-line-p{font-family:'Sora',sans-serif;font-weight:700}
.cart-rm{background:none;border:0;color:var(--c-text3);cursor:pointer;font-size:13px;text-decoration:underline;font-family:inherit}
/* lines on the left, a summary that stays put on the right — the summary used
   to sit under the whole list, so a five-book cart pushed checkout off screen */
.cartgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,382px);gap:clamp(22px,2.6vw,40px);align-items:start}
.cart-lines-lab{font-family:'Inter',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--c-text3);margin-bottom:12px}
.cartgrid-b{position:sticky;top:calc(var(--nav-h,68px) + 18px)}
.cart-sum{background:var(--c-card);border:1px solid var(--c-border);border-radius:16px;padding:22px;box-shadow:var(--c-shadow)}
.cart-sum-h{font-family:'Sora',sans-serif;font-weight:700;font-size:17px;margin-bottom:15px;padding-bottom:14px;border-bottom:1px solid var(--c-border)}
.cart-assure{list-style:none;display:grid;gap:9px;margin-top:15px;padding-top:15px;border-top:1px solid var(--c-borderdim)}
.cart-assure li{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--c-text2);line-height:1.45}
.cart-assure svg{width:15px;height:15px;flex:none;color:var(--c-green-btn)}
.cart-assure a{color:var(--c-link)}
.cart-empty-ic{display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin:0 auto 18px;border-radius:16px;background:color-mix(in srgb,var(--c-blue) 10%,transparent);color:var(--c-blue)}
.cart-empty-ic svg{width:26px;height:26px}
.cart-empty-h{font-family:'Sora',sans-serif;font-weight:700;font-size:21px;margin-bottom:8px}
.cart-empty-p{color:var(--c-text2);font-size:15.5px;max-width:44ch;margin:0 auto 20px;line-height:1.6}
.cart-row{display:flex;justify-content:space-between;align-items:baseline;font-family:'Sora',sans-serif;font-size:16px;margin-bottom:6px}
.cart-row b{font-size:24px}
.cart-nudge{background:color-mix(in srgb,var(--c-green) 12%,transparent);color:var(--c-green);font-weight:700;font-size:13.5px;border-radius:9px;padding:9px 12px;margin-bottom:12px}
.cart-note{font-size:12.5px;color:var(--c-text3);margin-bottom:14px}
.cart-go{background:var(--c-red);color:#fff;font-size:17px;padding:15px;width:100%;box-shadow:var(--c-shadow)}
.cart-go[disabled]{opacity:.6;cursor:progress}
.cart-err{color:var(--c-red);font-size:13.5px;margin-top:10px}
.cart-fine{font-size:12px;color:var(--c-text3);margin-top:11px}
.cart-empty{text-align:center;padding:40px 0}
.ty-panel{display:flex;align-items:center;gap:15px;background:color-mix(in srgb,var(--c-green) 7%,var(--c-card));border:1px solid color-mix(in srgb,var(--c-green) 32%,var(--c-border));border-radius:16px;padding:18px 20px;margin-bottom:26px}
.ty-tick{display:flex;align-items:center;justify-content:center;width:42px;height:42px;flex:none;border-radius:50%;background:var(--c-green-btn);color:#fff}
.ty-tick svg{width:22px;height:22px}
.ty-panel-h{font-family:'Sora',sans-serif;font-weight:700;font-size:17px}
.ty-panel .ty-mail{margin:2px 0 0;font-size:14.5px}
.ty-lab{font-family:'Inter',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--c-text3);margin-bottom:11px}
.ty-files{list-style:none;display:grid;gap:9px;margin:16px 0}
.ty-dl{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--c-card);border:1px solid var(--c-border);border-radius:12px;padding:13px 16px;text-decoration:none;color:inherit}
.ty-dl:hover{border-color:var(--c-green)}
.ty-dl b{font-family:'Sora',sans-serif;font-size:15px}
.ty-dl span{font-family:'Inter',sans-serif;font-weight:700;color:var(--c-green);font-size:14px;flex:none}
.ty-mail{color:var(--c-text2);margin-bottom:6px}
.ty-sub,.ty-fine{color:var(--c-text3);font-size:13px}
.ty-resent{color:var(--c-green);font-weight:700;font-size:13.5px;margin-left:10px}

/* ── Floating cart ─────────────────────────────────────────────────────────
   Replaces the old utility bar. Hidden entirely while the cart is empty, so an
   empty store shows no chrome; opens and collapses on tap. Works on any page
   that loads shop.js. */
.mmcart{position:fixed;right:20px;bottom:20px;z-index:945;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.mmcart-pill{display:inline-flex;align-items:center;gap:9px;background:var(--c-navy);color:#fff;border:0;border-radius:999px;padding:14px 20px;font-family:'Inter',sans-serif;font-weight:700;font-size:15px;cursor:pointer;box-shadow:0 10px 30px rgba(15,27,45,.3);transition:transform .16s ease,box-shadow .16s ease}
.mmcart-pill:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(15,27,45,.36)}
.mmcart-pill:focus-visible{outline:3px solid var(--c-blue);outline-offset:3px}
.mmcart-n{background:var(--c-red);border-radius:999px;min-width:23px;height:23px;display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;padding:0 6px}
.mmcart.is-bump .mmcart-pill{animation:mmbump .45s cubic-bezier(.22,1,.36,1)}
@keyframes mmbump{0%,100%{transform:none}35%{transform:scale(1.08)}}
.mmcart-panel{width:min(360px,calc(100vw - 32px));background:var(--c-card);border:1px solid var(--c-border);border-radius:18px;box-shadow:0 24px 60px rgba(15,27,45,.28);padding:18px;transform-origin:bottom right;animation:mmpop .22s cubic-bezier(.22,1,.36,1)}
@keyframes mmpop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.mmc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.mmc-head b{font-family:'Sora',sans-serif;font-size:16px}
.mmc-x{background:none;border:0;color:var(--c-text3);cursor:pointer;display:flex;padding:4px;border-radius:7px}
.mmc-x:hover{color:var(--c-text);background:var(--c-bg)}
.mmc-lines{list-style:none;display:grid;gap:8px;max-height:38vh;overflow-y:auto;margin-bottom:12px}
.mmc-line{display:flex;align-items:center;gap:11px}
.mmc-line img{width:44px;height:44px;object-fit:contain;background:#fff;border:1px solid var(--c-border);border-radius:8px;flex:none}
.mmc-nm{flex:1;min-width:0;font-size:13.5px;line-height:1.35}
.mmc-nm b{display:block;font-family:'Sora',sans-serif;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mmc-nm small{color:var(--c-text3);font-size:12px}
.mmc-rm{background:none;border:0;color:var(--c-text3);cursor:pointer;font-size:12.5px;text-decoration:underline;font-family:inherit;flex:none}
.mmc-rm:hover{color:var(--c-red)}
.mmc-meter{height:6px;border-radius:99px;background:var(--c-borderdim);overflow:hidden;margin-bottom:8px}
.mmc-meter span{display:block;height:100%;background:var(--c-green);border-radius:99px;transition:width .3s ease}
.mmc-nudge{font-size:12.5px;color:var(--c-text2);margin-bottom:12px;line-height:1.5}
.mmc-nudge.is-hit{color:var(--c-green);font-weight:700}
.mmc-sum{display:flex;align-items:baseline;justify-content:space-between;font-family:'Sora',sans-serif;font-size:14px;border-top:1px solid var(--c-borderdim);padding-top:12px;margin-bottom:12px}
.mmc-sum b{font-size:22px}
.mmc-go{display:block;width:100%;text-align:center;background:var(--c-red);color:#fff;font-family:'Inter',sans-serif;font-weight:700;font-size:15.5px;border:0;border-radius:12px;padding:14px;cursor:pointer;text-decoration:none;box-shadow:0 2px 10px rgba(212,36,58,.24)}
.mmc-go:hover{transform:translateY(-1px)}
.mmc-view{display:block;text-align:center;font-family:'Inter',sans-serif;font-weight:600;font-size:13.5px;color:var(--c-text2);margin-top:9px;text-decoration:none}
.mmc-view:hover{color:var(--c-blue)}

/* the free-curriculum backlink that sits on every shop page */
.coursemap{display:flex;align-items:center;gap:18px;background:var(--c-card);border:1px solid var(--c-border);border-left:3px solid var(--c-blue);border-radius:16px;padding:20px 24px;flex-wrap:wrap}
.cm-ic{flex:none;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--c-blue) 12%,transparent);color:var(--c-blue)}
.cm-b{flex:1;min-width:240px}
.cm-lab{font-family:'Inter',sans-serif;font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--c-blue)}
.coursemap h2{font-size:19px;margin:5px 0 6px}
.coursemap h2 a{color:inherit;text-decoration:none}
.coursemap h2 a:hover{color:var(--c-blue)}
.coursemap p{font-size:14.5px;color:var(--c-text2);line-height:1.55;max-width:70ch}
.cm-go{flex:none;font-family:'Inter',sans-serif;font-weight:700;font-size:14.5px;color:var(--c-blue);text-decoration:none;border:1.5px solid var(--c-border);border-radius:11px;padding:11px 19px;transition:border-color .15s ease,background .15s ease}
.cm-go:hover{border-color:var(--c-blue);background:color-mix(in srgb,var(--c-blue) 7%,transparent)}

/* ── Meet MapleMind ────────────────────────────────────────────────────────
   Light card, so the closing navy band below it stays the only dark moment.
   The store buttons get a light variant of the landing hero treatment. */
.meetmm{background:var(--c-card);border:1px solid var(--c-border);border-radius:20px;padding:clamp(24px,2.6vw,40px);text-align:center;box-shadow:var(--c-shadow)}
/* every paragraph here inherits max-width from the page rule; without auto
   margins they sit left inside a centred block, which is what made the
   eyebrow and the fine print look misaligned */
.meetmm p{margin-left:auto;margin-right:auto}
.mm-eyebrow{font-family:'Inter',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--c-blue)}
.meetmm h2{margin:8px 0 12px}
.mm-lead{font-size:16.5px;color:var(--c-text2);line-height:1.66;max-width:66ch}
.mm-fine{font-size:12.5px;color:var(--c-text3);margin-top:16px}
.storetrio{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px}
.stbtn{display:inline-flex;align-items:center;gap:11px;background:var(--c-card);border:1.5px solid var(--c-border);border-radius:13px;padding:11px 20px;text-decoration:none;color:var(--c-text);transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}
.stbtn:hover{border-color:var(--c-blue);transform:translateY(-2px);box-shadow:var(--c-shadowlift)}
.stbtn:focus-visible{outline:3px solid var(--c-blue);outline-offset:2px}
.stbtn-web{background:var(--c-navy);border-color:var(--c-navy);color:#fff}
.stbtn-web:hover{border-color:var(--c-navy);opacity:.92}
.stbtn-lab{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2;font-family:'Inter',sans-serif}
.stbtn-sub{font-size:10.5px;font-weight:500;opacity:.75}
.stbtn-main{font-size:15px;font-weight:700}

/* ── Closing band — full-bleed, runs straight into the footer ─────────────
   It sits outside <main> so it is naturally the full width of the page. A
   100vw + negative-margin hack would sit a scrollbar's width off-centre. */
.closeband{background:var(--c-navy);color:#fff;padding:clamp(38px,4vw,62px) 0;margin-top:clamp(38px,4vw,60px)}
.closeband-in{text-align:center}
.closeband h2{color:#fff;font-size:clamp(23px,2.2vw,32px);margin-bottom:10px}
.closeband p{color:rgba(255,255,255,.76);font-size:16px;max-width:60ch;margin:0 auto}
.closeband-go{display:inline-block;margin-top:22px;background:var(--c-red);color:#fff;font-family:'Inter',sans-serif;font-weight:700;font-size:15.5px;border-radius:12px;padding:14px 30px;text-decoration:none;box-shadow:0 2px 12px rgba(212,36,58,.3);transition:transform .16s ease,box-shadow .16s ease}
.closeband-go:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(212,36,58,.38)}
.closeband-go:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* the footer sits directly under the band, so drop its own top rule */
.shop-page .closeband + footer,.shop-page footer{border-top:0}

/* highlights spec table */
.hlist{border:1px solid var(--c-border);border-radius:14px;overflow:hidden;background:var(--c-card)}
.hrow{display:grid;grid-template-columns:190px minmax(0,1fr);gap:14px;padding:11px 16px;border-bottom:1px solid var(--c-borderdim)}
.hrow:last-child{border-bottom:0}
.hrow dt{font-family:'Inter',sans-serif;font-weight:700;font-size:13px;color:var(--c-text3)}
.hrow dd{font-size:14.5px}

/* ── Look inside — a scroller, so the whole book fits without a 20-screen page */
.li-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:16px}
.li-head h2{margin-bottom:6px}
.li-nav{display:flex;align-items:center;gap:8px;flex:none}
.li-count{font-family:'Inter',sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-text3);margin-right:4px}
.li-arrow{width:38px;height:38px;border-radius:50%;border:1px solid var(--c-border);background:var(--c-card);color:var(--c-text);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s ease,transform .15s ease}
.li-arrow:hover{border-color:var(--c-blue);transform:translateY(-1px)}
.li-arrow[disabled]{opacity:.35;cursor:default;transform:none}
.li-arrow:focus-visible,.li-strip:focus-visible{outline:3px solid var(--c-blue);outline-offset:2px}
/* No visible scrollbar on either strip: the arrows and the half-cut card at
   the edge already say "there's more", and a raw scrollbar across a dark page
   looks like a rendering artefact. Still scrollable by wheel, swipe and key. */
.li-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,230px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 4px 6px;scrollbar-width:none;-ms-overflow-style:none}
.li-strip::-webkit-scrollbar,.rel-strip::-webkit-scrollbar{display:none;width:0;height:0}
.li-cell{scroll-snap-align:start;position:relative;padding:0;border:1px solid var(--c-border);background:#fff;border-radius:12px;overflow:hidden;cursor:zoom-in;line-height:0;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.li-cell:hover{transform:translateY(-2px);box-shadow:var(--c-shadowlift);border-color:var(--c-blue)}
/* real workbook pages are US Letter portrait */
.li-cell img{width:100%;height:auto;aspect-ratio:.773;object-fit:contain;display:block;background:#fff}
.li-cell:focus-visible{outline:3px solid var(--c-blue);outline-offset:2px}
.li-strip{grid-auto-columns:minmax(190px,210px)}

/* related products, same scroller so a grade's full shelf is reachable */
.rel-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,222px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 4px 6px;scrollbar-width:none;-ms-overflow-style:none}
.rel-strip .pcard{scroll-snap-align:start}
.rel-strip:focus-visible{outline:3px solid var(--c-blue);outline-offset:2px}

/* ── Reviews — verified purchases only, nothing published unmoderated ────── */
.reviews{background:var(--c-card);border:1px solid var(--c-border);border-radius:18px;padding:24px 26px}
.rv-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.rv-head h2{margin-bottom:0}
.rv-write{font-family:'Inter',sans-serif;font-weight:700;font-size:14px;color:var(--c-text);background:transparent;border:1.5px solid var(--c-border);border-radius:11px;padding:10px 18px;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.rv-write:hover{border-color:var(--c-blue);background:color-mix(in srgb,var(--c-blue) 6%,transparent)}
.rv-write:focus-visible,.rv-send:focus-visible,.rv-form input:focus-visible{outline:3px solid var(--c-blue);outline-offset:2px}
.rv-body{margin-top:14px}
.rv-empty{font-size:15.5px;color:var(--c-text2);max-width:70ch}
.rv-note{font-size:13.5px;color:var(--c-text3);margin-top:14px;border-top:1px solid var(--c-borderdim);padding-top:14px}
.rv-form{margin-top:16px;background:var(--c-bg);border:1px solid var(--c-border);border-radius:14px;padding:18px 20px}
.rv-form-lead{font-size:14px;color:var(--c-text2);max-width:66ch;line-height:1.6}
.rv-lab{display:block;font-family:'Inter',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--c-text3);margin:14px 0 7px}
.rv-row{display:flex;gap:10px;flex-wrap:wrap}
.rv-form input{flex:1;min-width:220px;padding:12px 14px;border:1px solid var(--c-border);border-radius:11px;background:var(--c-card);color:var(--c-text);font-size:15px;font-family:inherit}
.rv-send{font-family:'Inter',sans-serif;font-weight:700;font-size:15px;background:var(--c-blue);color:#fff;border:0;border-radius:11px;padding:12px 22px;cursor:pointer}
.rv-send[disabled]{opacity:.6;cursor:progress}
.rv-msg{font-size:13.5px;margin-top:12px;color:var(--c-green-text);font-weight:600}
/* the standalone review page */
.rv-form-page{background:transparent;border:0;padding:0}
.rv-form-page input[type=text],.rv-form-page textarea{width:100%;padding:12px 14px;border:1px solid var(--c-border);border-radius:11px;background:var(--c-card);color:var(--c-text);font-size:15px;font-family:inherit;margin-bottom:4px}
.rv-form-page textarea{resize:vertical;line-height:1.6}
.rvp-stars{border:0;padding:0;margin:0 0 18px}
.rvp-star-row{display:flex;flex-wrap:wrap;gap:9px}
.rvp-star{display:flex;flex-direction:column;align-items:center;gap:3px;border:1.5px solid var(--c-border);border-radius:12px;padding:11px 14px;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.rvp-star input{position:absolute;opacity:0;width:0;height:0}
.rvp-star span{color:var(--c-amber);font-size:17px;letter-spacing:2px}
.rvp-star small{font-size:11.5px;color:var(--c-text3)}
.rvp-star:hover{border-color:var(--c-blue)}
.rvp-star:has(input:checked){border-color:var(--c-blue);background:color-mix(in srgb,var(--c-blue) 8%,transparent)}
.rvp-star:has(input:focus-visible){outline:3px solid var(--c-blue);outline-offset:2px}
.rvp-opt{font-weight:500;text-transform:none;letter-spacing:0;color:var(--c-text3)}
.rvp-fine{font-size:12.5px;color:var(--c-text3);margin:12px 0 16px;line-height:1.55;max-width:62ch}
.rv-gate{font-size:15.5px;color:var(--c-text2);max-width:60ch}
.rv-msg.is-err{color:var(--c-red)}
/* the write form on the product page */
.rv-form input[type=text],.rv-form input[type=email],.rv-form textarea{width:100%;padding:12px 14px;border:1px solid var(--c-border);border-radius:11px;background:var(--c-card);color:var(--c-text);font-size:15px;font-family:inherit}
.rv-form textarea{resize:vertical;line-height:1.6}
.rv-form .rv-send{margin-top:18px}

/* real reviews, once they exist */
.rv-summary{display:flex;align-items:center;gap:clamp(20px,3vw,44px);flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--c-borderdim)}
.rv-avg{display:flex;align-items:center;gap:14px;font-family:'Sora',sans-serif}
.rv-avg b{font-size:44px;font-weight:800;line-height:1}
.rv-avg span{display:flex;flex-direction:column;gap:3px;color:var(--c-amber);font-size:17px;letter-spacing:2px}
.rv-avg small{font-family:'Inter',sans-serif;font-size:13px;letter-spacing:0;color:var(--c-text3);font-weight:500}
.rv-bars{display:grid;gap:5px;flex:1;min-width:220px;max-width:340px}
.rv-bar{display:flex;align-items:center;gap:9px}
.rv-bar-n{font-family:'Inter',sans-serif;font-size:12.5px;font-weight:700;color:var(--c-text3);width:10px}
.rv-bar-track{flex:1;height:7px;border-radius:99px;background:var(--c-borderdim);overflow:hidden}
.rv-bar-fill{display:block;height:100%;border-radius:99px;background:var(--c-amber)}
.rv-bar-c{font-size:12.5px;color:var(--c-text3);width:18px;text-align:right}
.rv-list{list-style:none;display:grid;gap:18px;margin-top:18px}
.rv-item{border-top:1px solid var(--c-borderdim);padding-top:18px}
.rv-item:first-child{border-top:0;padding-top:0}
.rv-item-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rv-stars{color:var(--c-amber);font-size:15px;letter-spacing:2px}
.rv-item b{font-family:'Sora',sans-serif;font-size:16px;display:block;margin:8px 0 5px}
.rv-item p{font-size:15px;color:var(--c-text2);line-height:1.65;max-width:74ch}
.rv-by{font-size:13px;color:var(--c-text3);margin-top:9px}
.rv-verified{display:inline-flex;align-items:center;gap:5px;font-family:'Inter',sans-serif;font-size:11.5px;font-weight:700;color:var(--c-green-text);background:color-mix(in srgb,var(--c-green) 12%,transparent);border-radius:999px;padding:3px 10px}
.brandblock{display:flex;gap:18px;align-items:flex-start;background:var(--c-card);border:1px solid var(--c-border);border-radius:16px;padding:22px 24px}
.bb-logo{flex:none;border-radius:10px}
.brandblock h2{font-size:19px;margin-bottom:7px}
/* the wordmark: Maple in the text colour, Mind in brand red, everywhere */
.wordmark{font-family:'Sora',sans-serif;font-weight:800;color:var(--c-text)}
.wordmark span{color:var(--c-red)}
.bb-links{font-size:13.5px;margin-top:9px;color:var(--c-text3)}

/* buy-box assurances + payment row */
.bb-assure{list-style:none;display:grid;gap:9px;margin:14px 0 12px;border-top:1px solid var(--c-borderdim);padding-top:14px}
.bb-assure li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--c-text2)}
.bb-ic{flex:none;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--c-green) 13%,transparent);color:var(--c-green)}
.payrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11px;color:var(--c-text3);border-top:1px solid var(--c-borderdim);padding-top:10px}
.payrow b{font-weight:700;font-size:10.5px;letter-spacing:.02em;border:1px solid var(--c-border);border-radius:5px;padding:3px 6px;color:var(--c-text2);background:var(--c-bg)}

/* sticky buy bar */
.stickybuy{position:fixed;left:0;right:0;bottom:0;z-index:930;background:var(--c-card);border-top:1px solid var(--c-border);box-shadow:0 -6px 24px rgba(15,27,45,.12)}
.stickybuy-in{display:flex;align-items:center;gap:16px;padding:11px 20px}
.sb-name{flex:1;min-width:0;font-family:'Sora',sans-serif;font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-name small{display:block;font-family:'Inter',sans-serif;font-weight:500;font-size:12px;color:var(--c-text3)}
.sb-price{font-family:'Sora',sans-serif;font-weight:800;font-size:19px;flex:none}
.sb-add{background:var(--c-red);color:#fff;font-family:'Inter',sans-serif;font-weight:700;font-size:15px;border:0;border-radius:11px;padding:12px 24px;cursor:pointer;flex:none}
.sb-add.is-in{background:var(--c-green)}

/* ── Image viewer — one component, used by the gallery AND the page strip ──
   Both axes are constrained and the image letterboxes itself, so a square
   cover and an 8.5x11 page both sit whole inside the same window. */
/* grid-template-COLUMNS is load-bearing: without it the implicit column sizes
   to max-content, the 10-thumb rail makes that wider than the screen, and the
   image centres against the wrong box and hangs off the right edge on mobile. */
.lightbox{position:fixed;inset:0;z-index:990;background:rgba(9,14,24,.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;grid-template-rows:1fr auto;grid-template-columns:minmax(0,1fr);padding:56px 20px 16px}
.lb-fig{display:flex;align-items:center;justify-content:center;min-height:0;min-width:0}
.lb-bar{min-width:0}
.lightbox img{max-width:min(1400px,92vw);max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:10px;background:#fff}
.lb-close{position:absolute;top:14px;right:18px;background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:999px;width:42px;height:42px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.lb-close:hover{background:rgba(255,255,255,.24)}
.lb-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:999px;width:46px;height:46px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.lb-arrow:hover{background:rgba(255,255,255,.26)}
.lb-prev{left:16px}
.lb-next{right:16px}
.lb-close:focus-visible,.lb-arrow:focus-visible,.lb-t:focus-visible{outline:3px solid #fff;outline-offset:2px}
.lb-bar{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:12px}
.lb-cap{color:rgba(255,255,255,.82);font-family:'Inter',sans-serif;font-size:13px}
.lb-rail{display:flex;gap:7px;overflow-x:auto;max-width:100%;padding:2px}
.lb-t{flex:none;width:48px;height:48px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:#fff;cursor:pointer;line-height:0;opacity:.5;transition:opacity .15s ease,border-color .15s ease}
.lb-t.is-on{opacity:1;border-color:#fff}
.lb-t:hover{opacity:1}
.lb-t img{width:100%;height:100%;object-fit:contain}
.pgal-zi{position:absolute;left:12px;bottom:12px;background:rgba(15,27,45,.72);color:#fff;font-family:'Inter',sans-serif;font-size:11.5px;font-weight:700;border-radius:999px;padding:5px 11px;line-height:1.4;opacity:0;transition:opacity .15s ease;pointer-events:none}
.pgal-stage:hover .pgal-zi{opacity:1}

/* ── Share popup — the homepage prompt, rebuilt on the store's tokens ────── */
.sharewrap{margin-top:16px}
.sharebtn{display:inline-flex;align-items:center;gap:8px;background:var(--c-card);border:1.5px solid var(--c-border);border-radius:11px;padding:11px 18px;font-family:'Inter',sans-serif;font-weight:700;font-size:14px;color:var(--c-text);cursor:pointer;transition:border-color .15s ease}
.sharebtn:hover{border-color:var(--c-blue)}
.sharebtn:focus-visible{outline:3px solid var(--c-blue);outline-offset:2px}
.shareback{position:fixed;inset:0;z-index:995;background:rgba(9,14,24,.62);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:20px}
.sharecard{position:relative;width:min(460px,100%);background:var(--c-card);border:1px solid var(--c-border);border-radius:20px;box-shadow:0 30px 70px rgba(9,14,24,.4);padding:26px;animation:shpop .3s cubic-bezier(.22,1,.36,1)}
@keyframes shpop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.share-x{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:9px;border:1px solid var(--c-border);background:var(--c-bg);color:var(--c-text3);display:flex;align-items:center;justify-content:center;cursor:pointer}
.share-x:hover{color:var(--c-text)}
.share-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;padding-right:34px}
.share-thumb{width:56px;height:56px;border-radius:11px;border:1px solid var(--c-border);object-fit:contain;background:#fff;flex:none}
.share-head h2{font-size:19px;margin-bottom:3px}
.share-head p{font-size:13px;color:var(--c-text3)}
.share-native{display:none;width:100%;align-items:center;justify-content:center;gap:9px;background:var(--c-red);color:#fff;font-family:'Inter',sans-serif;font-weight:700;font-size:15px;border:0;border-radius:12px;padding:14px;cursor:pointer;margin-bottom:12px;box-shadow:0 2px 10px rgba(212,36,58,.24)}
.share-native.is-on{display:flex}
.share-native:hover{transform:translateY(-1px)}
.share-copy{display:flex;gap:8px}
.share-url{flex:1;min-width:0;padding:11px 13px;border:1px solid var(--c-border);border-radius:11px;background:var(--c-bg);color:var(--c-text2);font-size:13.5px;font-family:inherit}
.share-copybtn{flex:none;background:var(--c-navy);color:#fff;font-family:'Inter',sans-serif;font-weight:700;font-size:13.5px;border:0;border-radius:11px;padding:11px 20px;cursor:pointer}
.share-copybtn:hover{opacity:.9}
.share-lab{font-family:'Inter',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-text3);margin:20px 0 11px}
/* Each destination in its own brand colour — the icon sits on a filled disc,
   the way every share sheet people already know does it. */
.share-nets{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.shnet{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 4px;border:1px solid var(--c-border);border-radius:12px;background:var(--c-bg);color:var(--c-text2);text-decoration:none;cursor:pointer;font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;transition:border-color .15s ease,transform .15s ease,background .15s ease}
.shnet-ic{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;transition:transform .15s ease}
.shnet:hover{transform:translateY(-2px);color:var(--c-text);background:var(--c-card)}
.shnet:hover .shnet-ic{transform:scale(1.06)}
.shnet:focus-visible{outline:3px solid var(--c-blue);outline-offset:2px}

/* quick row under the Share button */
.sharequick{display:flex;align-items:center;gap:9px;margin-top:14px}
.sq{width:38px;height:38px;border-radius:50%;border:0;padding:0;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease;box-shadow:var(--c-shadow)}
.sq:hover{transform:translateY(-2px);box-shadow:var(--c-shadowlift)}
.sq:focus-visible{outline:3px solid var(--c-blue);outline-offset:3px}

/* one brand palette, used by both the quick row and the popup */
.sq-fb,.shnet-fb .shnet-ic{background:#1877F2}
.sq-ig,.shnet-ig .shnet-ic{background:radial-gradient(circle at 30% 107%,#FDF497 0%,#FD5949 45%,#D6249F 60%,#285AEB 90%)}
.sq-th,.shnet-th .shnet-ic,.sq-tt,.shnet-tt .shnet-ic,.shnet-x .shnet-ic{background:#000}
.sq-pin,.shnet-pin .shnet-ic{background:#E60023}
.shnet-wa .shnet-ic{background:#25D366}
.shnet-mail .shnet-ic{background:var(--c-navy)}
.share-note{font-size:12.5px;color:var(--c-green);font-weight:600;margin-top:14px;text-align:center}

/* ── Left rail ─────────────────────────────────────────────────────────────
   Same shape as the web app's desktop sidebar: 11px uppercase labels, 10px
   radius rows, a hairline card per group. */
/* Grid items default to min-width:auto, so a nowrap course name inside a card
   made the card wider than the 300px track and overflow-x quietly clipped it. */
.prail > *,.rm-row,.rm-link,.rm-b{min-width:0}
/* Rail type runs 22% larger than the first pass — it was legible but felt like
   fine print next to the product. */
.rail-lab{font-family:'Inter',sans-serif;font-size:13.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--c-text3);margin-bottom:10px}
/* the rail is itself a panel now, so its sections are plain groups separated by
   a hairline rather than cards floating on a card */
.rail-jump,.rail-more,.rail-help,.rail-course{padding-bottom:18px;border-bottom:1px solid var(--c-borderdim)}
.rail-help{border-bottom:0;padding-bottom:0}
.rail-yp{background:var(--c-bg);border:1px solid var(--c-border);border-radius:14px;padding:16px 17px}
/* Full-width banner across the rail rather than a card floating over the text
   behind it — it now covers what it sits on. */
.rail-mini{background:var(--c-card);border-bottom:1px solid var(--c-border);padding:14px 16px;margin:calc(clamp(28px,3vw,40px) * -1) -16px 0;display:flex;align-items:center;gap:12px;position:sticky;top:calc(clamp(28px,3vw,40px) * -1);z-index:3;box-shadow:0 6px 18px rgba(15,27,45,.10)}
.rail-mini img{width:46px;height:46px;object-fit:contain;background:#fff;border:1px solid var(--c-border);border-radius:9px;flex:none}
.rm-b{flex:1;min-width:0}
.rm-b b{display:block;font-family:'Sora',sans-serif;font-size:16.5px;line-height:1.28;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm-b span{font-size:15px;color:var(--c-text3)}
.rm-add{flex:none;background:var(--c-blue);color:#fff;font-size:16px;padding:9px 17px;border-radius:10px}
.rm-add.is-in{background:var(--c-green)}
.rail-jump ul{list-style:none;display:grid;gap:1px}
.rail-jump a{display:block;font-size:16.5px;color:var(--c-text2);text-decoration:none;padding:8px 10px;border-radius:9px;transition:background .12s ease,color .12s ease}
.rail-jump a:hover{background:color-mix(in srgb,var(--c-blue) 8%,transparent);color:var(--c-text)}
.rm-list{list-style:none;display:grid;gap:3px}
.rm-row{display:flex;align-items:center;gap:10px;border-radius:9px;padding:6px 6px;transition:background .12s ease}
.rm-row:hover{background:color-mix(in srgb,var(--c-blue) 7%,transparent)}
.rm-link{display:flex;align-items:center;gap:10px;flex:1;min-width:0;text-decoration:none;color:inherit}
.rm-link img,.rm-noimg{width:40px;height:40px;object-fit:contain;background:#fff;border:1px solid var(--c-border);border-radius:8px;flex:none}
.rm-nm{min-width:0;font-family:'Sora',sans-serif;font-weight:600;font-size:15px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm-nm small{display:block;font-family:'Inter',sans-serif;font-weight:500;font-size:13.5px;color:var(--c-text3)}
.rm-quick{flex:none;background:transparent;border:1px solid var(--c-border);color:var(--c-text2);font-size:14px;padding:6px 12px;border-radius:8px}
.rm-quick:hover{border-color:var(--c-blue);color:var(--c-blue)}
.rm-quick.is-in{border-color:var(--c-green);color:var(--c-green)}
.rail-all{display:block;font-size:15px;margin-top:12px;padding-top:12px;border-top:1px solid var(--c-borderdim)}
.rail-help p{font-size:15px;color:var(--c-text2);line-height:1.55}
.rail-help-links{margin-top:10px;font-size:15px}
/* the backlink to the free course page — the outline this book is built from */
.rc-link{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;border:1px solid var(--c-border);border-radius:11px;padding:11px 12px;background:var(--c-bg);transition:border-color .15s ease,transform .15s ease}
.rc-link:hover{border-color:var(--accent,#1A5CFF);transform:translateY(-1px)}
.rc-ic{flex:none;width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--c-blue) 12%,transparent);color:var(--c-blue)}
.rc-b{min-width:0}
.rc-b b{display:block;font-family:'Sora',sans-serif;font-size:15px;line-height:1.3}
.rc-b small{display:block;font-size:13px;color:var(--c-text3);margin-top:2px}
.rc-note{font-size:13.5px;color:var(--c-text3);line-height:1.5;margin-top:9px}
/* ── Year Pack ─────────────────────────────────────────────────────────────
   Framed as a saving you're a few picks away from, not a total you're
   building up to. The meter and the "N to go" line count DOWN to the
   discount, which is the same mechanic as a free-shipping threshold and the
   reason those work. */
.rail-yp{border-left:3px solid var(--accent,#1A5CFF)}
.ryp-kicker{font-family:'Inter',sans-serif;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--c-blue)}
.ryp-head{font-family:'Sora',sans-serif;font-weight:700;font-size:18.5px;line-height:1.32;margin:7px 0 9px}
.ryp-lead{font-size:15px;color:var(--c-text2);line-height:1.55;margin-bottom:12px}
.ryp-lead-2{font-weight:600;color:var(--c-text);margin-bottom:10px}
.ryp-groups{display:grid;gap:13px}
.ryp-g .yp-bt{font-size:13px;margin-bottom:7px}
.ryp-g .yp-name{font-size:16px}
.ryp-g .yp-opt{padding:3px 3px}
.ryp-g .yp-cb{width:20px;height:20px;accent-color:var(--c-blue)}
.ryp-foot{border-top:1px solid var(--c-border);padding-top:14px;margin-top:14px;display:grid;gap:11px}
/* one colour, all the way across — a bar that changes hue reads as a warning */
.ryp-meter{height:8px;border-radius:99px;background:var(--c-borderdim);overflow:hidden}
.ryp-fill{display:block;height:100%;border-radius:99px;background:var(--c-blue);transition:width .32s cubic-bezier(.4,0,.2,1)}
.ryp-foot .yp-nudge{background:none;padding:0;margin:0;font-size:15px;font-weight:500;color:var(--c-text2)}
.ryp-foot .yp-nudge b{font-family:'Sora',sans-serif;font-weight:800;font-size:16.5px;color:var(--c-blue)}
.ryp-foot .yp-nudge.is-hit{color:var(--c-green);font-weight:700}
.ryp-foot .yp-nudge.is-hit b{color:var(--c-green)}
.ryp-foot .yp-total{font-size:16px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
/* the pack price is the point of the block, so it's the green number —
   --c-green-text is a darker step on light backgrounds because brand green
   behind text on white measures 2.4:1 */
.ryp-foot .yp-total b{font-size:24px;color:var(--c-green-text)}
/* the old price struck through on the diagonal, like a marker line */
.yp-was{position:relative;text-decoration:none;color:var(--c-text3);font-size:16px}
.yp-was::after{content:'';position:absolute;left:-3px;right:-3px;top:52%;height:2px;background:var(--c-red);transform:rotate(-9deg);border-radius:2px}
.ryp-foot .yp-add{width:100%;font-size:17px;padding:13px 16px;background:var(--c-blue)}
.ryp-foot .yp-add:hover{box-shadow:0 8px 22px rgba(26,92,255,.28)}

/* ── Responsive ────────────────────────────────────────────────────────────
   1180: the rail's blocks fall back into the page flow, same DOM, restacked. */
@media (max-width:1180px){
  .prailgrid{grid-template-columns:1fr}
  .pmain{grid-column:1;max-width:var(--shop-max);padding-left:var(--shop-gutter);padding-right:var(--shop-gutter)}
  .prail{grid-column:1;grid-row:2;position:static;max-height:none;overflow:visible;
    background:none;border-right:0;padding:0 var(--shop-gutter);
    margin:clamp(30px,3.4vw,48px) auto 0;max-width:var(--shop-max);
    grid-template-columns:repeat(2,minmax(0,1fr));display:grid;gap:20px;align-items:start}
  .rail-mini{display:none}
  .rail-jump,.rail-more,.rail-help{border-bottom:0;padding-bottom:0}
  .rail-yp{grid-column:1 / -1}
  .ryp-groups{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}
  .pside{position:static}
}
@media (max-width:900px){
  .prow{grid-template-columns:1fr;gap:22px}
  .pinfo{grid-template-columns:1fr;gap:0}
  .prail{grid-template-columns:1fr}
  .ryp-groups{grid-template-columns:1fr}
  .pgal-arrow{opacity:1}
  .pgal-thumbs{grid-template-columns:repeat(5,1fr);gap:7px}
  .trust-row{grid-template-columns:repeat(2,1fr)}
  .linecard{grid-template-columns:1fr}
  .linecard-art{display:none}
  .srow{grid-template-columns:1fr;gap:26px}
  .srow-b{position:static}
  .cartgrid{grid-template-columns:1fr}
  .cartgrid-b{position:static}
  .statbar{grid-template-columns:repeat(2,1fr)}
  .plist-row{grid-template-columns:1fr}
  .pfilter{position:static}
  .pf-toggle{display:block;width:100%;background:var(--c-card);border:1px solid var(--c-border);border-radius:12px;padding:12px;font-family:'Inter',sans-serif;font-weight:700;font-size:15px;color:var(--c-text);cursor:pointer}
  .pf-body{display:none;margin-top:10px}
  .pf-body.is-open{display:block}
  .yp-foot{flex-direction:column;align-items:stretch}
  .yp-add{width:100%}
  .yp-grid{grid-template-columns:1fr}
  .cart-sum{margin-left:0;max-width:none}
  .hrow{grid-template-columns:1fr;gap:2px}
  .brandblock{flex-direction:column}
  .stickybuy-in{gap:10px;padding:9px 14px}
  .sb-name small{display:none}
  .sb-price{font-size:16px}
  .sb-add{padding:11px 16px;font-size:14px}
  .mmcart{right:12px;bottom:78px}
  .storetrio{flex-direction:column;align-items:stretch}
  .stbtn{justify-content:center}
}
@media (min-width:901px){
  /* the sticky buy bar is a mobile affordance; on desktop the rail does it */
  .stickybuy{display:none !important}
}
@media (max-width:560px){
  .share-nets{grid-template-columns:repeat(4,1fr);gap:7px}
  .shnet{font-size:9.5px;padding:10px 2px}
  .bpills li{font-size:11.5px;padding:7px 12px}
  .lightbox{padding:52px 10px 12px}
  .lb-arrow{width:40px;height:40px}
  .statbar{grid-template-columns:1fr}
  .cgrid,.provtiles,.glance{grid-template-columns:1fr}
  .shelf{grid-auto-columns:154px}
  .tdemo{padding:17px 16px}
  .tdemo-head,.tdemo-row{grid-template-columns:minmax(0,1fr) 58px 58px;gap:8px}
  .tdot{width:9px;height:9px}
  .tdemo-dots{gap:4px}
  .ptier-n{font-size:33px}
}
@media (prefers-reduced-motion:reduce){
  .pcard,.bb-add,.bb-now,.yp-add,.cart-go,.pgal-t,.mmcart-pill,.stbtn,.closeband-go,.shnet,.li-cell{transition:none}
  .mmcart-panel,.sharecard{animation:none}
  .mmcart.is-bump .mmcart-pill{animation:none}
  .li-strip{scroll-behavior:auto}
}

/* ── Dark mode ─────────────────────────────────────────────────────────────
   LAST in the file on purpose: these are overrides, and an override placed
   before the rule it overrides simply loses. courses.css already flips the
   --c-* tokens under prefers-color-scheme, so most of the store follows by
   itself; what's left is every place that hard-coded a light value and would
   otherwise sit as a white slab in a dark window.
   Product art is drawn on white paper, so its plate stays light on purpose —
   the alternative is a dark ring around every page image. */
@media (prefers-color-scheme: dark){
  .pgal-stage,.pgal-main,.pgal-t,.pgal-t img,.li-cell,.li-cell img,
  .rail-mini img,.rm-link img,.rm-noimg,.pcard-img,.cart-line img,
  .mmc-line img,.share-thumb,.lc-img,.lightbox img,.lb-t{background:#F6F8FC}
  .pgal-arrow{background:rgba(19,29,46,.94);color:var(--c-text);border-color:var(--c-border)}
  .li-arrow{background:var(--c-card)}
  /* the band and the footer share the darkest surface; without a hairline the
     two merge into one undifferentiated slab */
  .closeband{border-top:1px solid var(--c-border)}
  .stbtn-web{background:var(--c-blue);border-color:var(--c-blue)}
  .shop-page{--c-green-text:#7DDBA0}
  .bb-tag,.rv-verified,.yp-each{color:#7DDBA0}
  .share-url{background:var(--c-bg);color:var(--c-text2)}
  .rv-form{background:color-mix(in srgb,var(--c-card) 60%,#000)}
  /* cover art is printed on white paper — keep the white behind it on dark,
     or every thumbnail sits in a grey box the shape of the page margin */
  .shelf-i img{background:#F6F8FC}
  .provtile-n{color:color-mix(in srgb,var(--accent,#1A5CFF) 58%,#fff)}
  /* the raw subject and province hues are chosen for white; on dark cards they
     read as near-black. Same lift the course tree gives its accent chips. */
  .cgc-ic,.glance-ic{color:color-mix(in srgb,var(--accent,#1A5CFF) 58%,#fff)}
  .shelf-sub,.shead-eye,.lc-eyebrow,.finder-eye{color:color-mix(in srgb,var(--accent,#1A5CFF) 55%,#fff)}
  .statbar{background:var(--c-border)}
  .ptier-best{background:color-mix(in srgb,var(--c-green) 9%,var(--c-card))}
  .tdot-a{background:color-mix(in srgb,var(--c-amber) 84%,transparent)}
  .finder-input{background:color-mix(in srgb,var(--c-card) 55%,#000)}
  /* The floating cart is navy, and so is the dark page behind it — the pill
     vanished and left white text hanging in space. It has to read as a raised
     control on every background, so on dark it gets its own lighter surface,
     a hairline and a deeper shadow. */
  .mmcart-pill{background:#1C2B44;border:1px solid #33445F;box-shadow:0 12px 34px rgba(0,0,0,.55)}
  .mmcart-pill:hover{box-shadow:0 16px 42px rgba(0,0,0,.62)}
}