/* ============================================================================
   Storefront stylesheet (2026-09-28, revision 3)
   Direction: site/DESIGN_DIRECTION.md. Courses are told apart by name, unit
   and navigation, never by colour: there are no per-course tokens, tints or
   course classes. One ink, a warm paper tone, a yellow highlight and a green
   for savings. Serif titles, sans body; system fonts only, no scripts, no
   inline styles (the page CSP is style-src 'self'). The public announcement
   Worker also bundles this file, so the legacy variable names stay in :root.
   ============================================================================ */
:root{
  /* Ink and surfaces */
  --ink:#14213d;--ink-2:#334155;--muted:#556072;--faint:#8a93a3;
  --bg:#ffffff;--paper:#faf7f0;--paper-deep:#f2ecdf;--band:#f4f6f9;--band-2:#eef1f5;
  --line:#d9dde4;--line-2:#e8ebf0;--line-strong:#8a93a3;
  --primary:#14213d;--primary-hover:#0b1530;
  --hl:#ffe28a;--hl-line:#efc440;
  /* Text tones by role (DESIGN_DIRECTION section 6). --ink: page titles, product/course/file names, prices,
     totals, links and control signs. --ink-2: section headings, body copy, questions and control labels.
     --muted: eyebrows, labels, counts, metadata, captions and legal/support notes. */
  --save:#15803d;--save-soft:#e8f5ec;
  --warn:#8a5a12;--warn-soft:#fbf2dc;--danger:#a63a4b;--danger-soft:#fbe9ec;
  /* Type */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,"Liberation Sans",sans-serif;
  --serif:Charter,"Bitstream Charter","Sitka Text",Cambria,Georgia,"Noto Serif","Liberation Serif",serif;
  --mono:ui-monospace,SFMono-Regular,"Cascadia Mono",Consolas,"Liberation Mono",Menlo,monospace;
  --fs-display:clamp(2.2rem,1.5rem + 2.2vw,3.1rem);--fs-h1:clamp(1.9rem,1.5rem + 1.4vw,2.6rem);
  --fs-h2:clamp(1.45rem,1.25rem + .7vw,1.85rem);--fs-h3:1.125rem;--fs-small:.875rem;--fs-label:.75rem;
  /* Space, shape, depth */
  --max:1200px;--gutter:clamp(16px,4vw,40px);--section:clamp(52px,6.5vw,84px);--sticky:88px;
  --r-s:6px;--r-m:10px;--r-l:14px;
  --shadow-1:0 1px 2px rgba(20,33,61,.06),0 1px 1px rgba(20,33,61,.03);
  --shadow-2:0 10px 28px rgba(20,33,61,.09),0 2px 6px rgba(20,33,61,.05);
  /* Legacy names still read by the announcement stylesheet and older screens */
  --surface:#ffffff;--paper-2:var(--paper-deep);--accent:var(--primary);--accent-2:var(--ink);--accent-soft:var(--band-2);
  --ochre:#b8791f;--ochre-soft:var(--warn-soft);--rose:var(--danger);--rose-soft:var(--danger-soft);--green:var(--save);--green-soft:var(--save-soft);
  --grid:repeating-linear-gradient(0deg,transparent 0 23px,rgba(20,33,61,.05) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,rgba(20,33,61,.05) 23px 24px);
  font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--ink);background:var(--bg);
  -webkit-text-size-adjust:100%;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;height:auto}
a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(20,33,61,.35);text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}
button,input,select{font:inherit;color:inherit}
button,a,input,select,summary{touch-action:manipulation}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
::selection{background:var(--hl)}
.skip{position:absolute;top:-100px;left:12px;background:var(--bg);padding:10px 14px;z-index:30;border-radius:var(--r-s);box-shadow:var(--shadow-2)}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Type ---------- */
h1,h2,h3{font-family:var(--sans);font-weight:700;color:var(--ink);margin:0;text-wrap:balance}
h1,h2{font-family:var(--serif);letter-spacing:-.01em}
h1{font-size:var(--fs-h1);line-height:1.14;margin-bottom:14px}
h2{font-size:var(--fs-h2);line-height:1.22;margin-bottom:12px;color:var(--ink-2)}
h3{font-size:var(--fs-h3);line-height:1.35;letter-spacing:-.005em;margin-bottom:6px}
p{margin:0 0 16px;text-wrap:pretty}
.eyebrow,.kicker,.filters-label,.browse>span,.focus-block h2,.set-prices h2,.lines-head h2,.lines-head span,.nums dt{font-family:var(--sans);font-size:var(--fs-label);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.eyebrow,.kicker{display:block;margin:0 0 10px}
.intro{font-size:1.125rem;line-height:1.6;color:var(--ink-2);max-width:62ch}
.muted{color:var(--muted)}
.caption{font-size:var(--fs-small);line-height:1.5;color:var(--muted);margin:10px 0}
.small{font-size:var(--fs-small)}
code,.mono{font-family:var(--mono);overflow-wrap:anywhere}
.price,.price-small,.cart-count,.totals dd,.line-price,.order-lines .amt,.order-total,.summary-dl dd,.tax-summary,.history-row h2,.ladder,.set-prices,.nums,.specimen-list .n,.contents-total,.list-pricing,.pill-count,.entry-facts,.set-price{font-variant-numeric:tabular-nums lining-nums}

/* ---------- Layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
main{max-width:var(--max);margin:0 auto;padding:32px var(--gutter) 88px;min-height:60vh}
.heading{max-width:760px;margin-bottom:28px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin:0 0 22px}
.section-head h2{margin:0}
main>.section-head{margin-top:var(--section)}
.section-head .text-link{white-space:nowrap}
.section-head p{margin:8px 0 0;color:var(--ink-2);max-width:68ch}
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.actions.top{margin:28px 0 0}
.band{background:var(--band);border-radius:var(--r-l);padding:clamp(24px,4vw,44px)}

/* ---------- Buttons, links, inputs ---------- */
.button,button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 20px;border-radius:var(--r-s);border:1px solid var(--primary);background:var(--primary);color:#fff;font-weight:700;font-size:.95rem;line-height:1.2;cursor:pointer;text-align:center;text-decoration:none;transition:background .15s,border-color .15s,box-shadow .15s,transform .15s}
.button:hover,button:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:#fff;box-shadow:var(--shadow-2)}
.button:active,button:active{transform:translateY(1px)}
button:disabled{cursor:not-allowed;opacity:.55;box-shadow:none;transform:none}
.secondary{background:var(--bg);color:var(--ink);border-color:var(--line-strong)}
.secondary:hover{background:var(--band);border-color:var(--ink);color:var(--ink);box-shadow:none}
.danger{background:#fff;color:var(--danger);border-color:#d3a1a9}
.danger:hover{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}
.button.large,button.large{min-height:52px;padding:13px 26px;font-size:1rem}
.button.block,button.block{display:flex;width:100%}
.link-button{background:none;border:0;box-shadow:none;color:var(--ink-2);font-weight:500;font-size:.85rem;min-height:44px;padding:0 4px;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.link-button:hover{background:none;box-shadow:none;color:var(--danger);text-decoration-color:currentColor}
.text-link,.more,.entry-go{font-weight:500;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--hl-line);padding-bottom:1px}
.text-link:hover,.more:hover,.resource:hover .entry-go{border-bottom-color:var(--ink)}
input,select{border:1px solid var(--line-strong);border-radius:var(--r-s);padding:11px 13px;background:var(--bg);max-width:100%;color:var(--ink);min-height:46px}
input:focus,select:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px rgba(20,33,61,.18)}
input::placeholder{color:#6b7484}
label{display:block;font-size:.9rem;font-weight:600;margin-bottom:8px}
label input,label select{display:block;width:100%;margin-top:6px}
input[type="checkbox"]{display:inline-block;width:auto;min-height:0;margin-right:8px}
dl{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;margin:14px 0 22px}
dt{color:var(--muted)}dd{margin:0;overflow-wrap:anywhere;font-weight:600}
.icon{display:inline-flex;flex:none}.icon svg{width:100%;height:100%}

/* ---------- Site notes and header ---------- */
.site-banner{background:var(--band);color:var(--muted);font-size:.82rem;line-height:1.45;text-align:center}
.site-banner .wrap{padding-top:7px;padding-bottom:7px}
.site-banner.env{background:var(--warn-soft);color:#5f4518;border-bottom:1px solid #ead9b8;font-weight:700;letter-spacing:.02em}
.site-header{background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.site-header .wrap{display:flex;align-items:center;gap:20px;min-height:68px}
.wordmark{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;color:var(--ink);font-size:1.3rem;font-weight:700;letter-spacing:-.02em;line-height:1;flex:none;text-decoration:none}
.wordmark .mark{display:inline-flex;width:30px;height:30px;color:var(--ink);flex-shrink:0}
.wordmark .mark svg{width:100%;height:100%}
.wordmark .tag{display:block;font-size:.66rem;font-weight:600;letter-spacing:.04em;color:var(--muted);margin-top:4px}
.site-nav{display:flex;align-items:center;gap:2px;flex:1;min-width:0}
.site-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:6px 12px;border-radius:var(--r-s);color:var(--ink-2);font-weight:500;font-size:.93rem;white-space:nowrap;text-decoration:none}
.site-nav a:hover{background:var(--band);color:var(--ink)}
.site-nav a[aria-current=page]{color:var(--ink)}
.site-nav a[aria-current=page]::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:3px;border-radius:2px;background:var(--ink)}
.utility{display:flex;align-items:center;gap:12px}
.utility:empty{display:none}
.env-badge{display:inline-flex;align-items:center;gap:6px;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#7a5a25;background:var(--warn-soft);border:1px solid #ead9b8;border-radius:999px;padding:4px 10px;line-height:1.2;white-space:nowrap}
.env-badge span{font-weight:500;letter-spacing:0;text-transform:none}
.util-link{font-size:.84rem;font-weight:500;color:var(--ink-2);white-space:nowrap;text-decoration:none}
.util-link:hover{color:var(--ink);text-decoration:underline}
.cart-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px 6px 12px;border:1px solid var(--line-strong);border-radius:999px;background:var(--bg);color:var(--ink-2);font-weight:500;font-size:.93rem;white-space:nowrap;text-decoration:none;transition:border-color .15s,background .15s}
.cart-link:hover{border-color:var(--ink);background:var(--band);color:var(--ink)}
.cart-link[aria-current=page]{background:var(--ink);border-color:var(--ink);color:#fff}
.cart-link .icon{width:20px;height:20px}
.cart-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--hl);color:var(--ink);font-size:.74rem;font-weight:700;line-height:1}

/* ---------- Footer ---------- */
.site-footer{margin-top:24px;background:var(--ink);color:#d6dde6}
.site-footer .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;padding-top:52px;padding-bottom:36px}
.site-footer h3{color:#aab4c3;font-size:var(--fs-label);font-weight:500;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.site-footer a{color:#e8edf3;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.93rem}
.site-footer p{font-size:.93rem;color:#c3cbd8;max-width:40ch}
.site-footer p strong{font-weight:500;color:#e8edf3}
.site-footer .wordmark{color:#fff;margin-bottom:16px}
.site-footer .wordmark .mark{color:#fff}
.site-footer .wordmark .tag{color:#aab4c3}
.site-footer .legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.16);padding-top:18px;font-size:.84rem;color:#aab4c3;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.site-footer .util-link{color:#aab4c3}
.site-footer :focus-visible{outline-color:#ffd166}

/* ---------- Home: hero and the opened-up topic ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:start;padding:clamp(12px,3vw,40px) 0 0}
.hero-copy{padding-top:clamp(0px,1.6vw,20px)}
.hero-copy h1{font-size:var(--fs-display);line-height:1.08;letter-spacing:-.02em;margin-bottom:20px}
.hero-copy .intro{max-width:52ch;margin-bottom:26px}
.hero-note{font-size:.85rem;color:var(--muted);margin-top:22px}
.hero-search{max-width:520px;margin:0}
.hero-search label{font-size:.88rem;font-weight:500;color:var(--muted);margin-bottom:8px}
.search-field{display:flex;gap:8px}
.search-field input{flex:1;min-width:0;min-height:52px;font-size:1rem}
.search-field button{min-height:52px;padding:0 22px}
.browse{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 20px;max-width:520px;margin:24px 0 0;font-size:.97rem}
.browse>span{flex-basis:100%;margin-bottom:2px}
.browse a{display:inline-flex;align-items:center;min-height:36px;font-weight:500;color:var(--ink);text-decoration-color:var(--line-strong)}
.browse a:hover{text-decoration-color:var(--ink)}
.specimen{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(22px,2.6vw,30px) clamp(20px,2.6vw,32px) clamp(18px,2vw,24px)}
.specimen .kicker{margin-bottom:12px}
.specimen h3{font-family:var(--serif);font-size:clamp(1.35rem,1.2rem + .5vw,1.6rem);line-height:1.2;letter-spacing:-.01em;margin:0 0 4px}
.specimen h3 a{color:inherit;text-decoration:none}
.specimen h3 a:hover{text-decoration:underline;text-decoration-color:var(--hl-line);text-decoration-thickness:2px}
.specimen .where{font-size:.9rem;color:var(--muted);margin:0 0 16px}
.specimen-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.specimen-list li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:start;padding:11px 0;border-bottom:1px solid var(--line)}
.specimen-list .n{display:flex;flex-direction:column;align-items:flex-end;font-family:var(--serif);font-size:1.55rem;font-weight:400;line-height:1;color:var(--ink);padding-top:2px}
.specimen-list .n small{font-family:var(--sans);font-size:.66rem;font-weight:500;letter-spacing:.03em;color:var(--muted);margin-top:4px}
.specimen-list .n svg{width:30px;height:30px}
.specimen-list .t{font-size:.9rem;line-height:1.45;color:var(--ink-2)}
.specimen-list .t strong{display:block;font-size:.98rem;font-weight:600;line-height:1.35;color:var(--ink);margin-bottom:2px}
.specimen-foot{display:flex;justify-content:space-between;align-items:baseline;gap:8px 20px;flex-wrap:wrap;margin:16px 0 0;font-size:.93rem;color:var(--ink-2)}
.specimen-foot span:first-child{font-weight:600;color:var(--ink)}

/* ---------- Home: the opening ----------
   Two columns: headline and find actions on the left, one finished paper card on the right, in the
   specimen's family (paper, hairline border, serif title). The card holds the illustrative scene at its
   natural height; the yellow highlighter is its only accent. Below 980px the card follows the find actions. */
.opening{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:start;padding-top:clamp(12px,3vw,40px)}
.opening-copy h1{font-size:var(--fs-display);line-height:1.08;letter-spacing:-.02em;margin:0 0 20px}
.opening-lede{font-size:1.125rem;line-height:1.55;color:var(--ink-2);max-width:32em;margin:0 0 30px}
.scene-card{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(24px,2.8vw,40px) clamp(22px,2.8vw,40px) clamp(20px,2.2vw,32px)}
.scene-title{display:flex;align-items:center;gap:12px;font-size:clamp(1.4rem,1.2rem + .6vw,1.75rem);font-weight:400;line-height:1.2;color:var(--ink-2);margin:0 0 clamp(20px,2.4vw,32px)}
.scene-mark{display:inline-flex;flex:none;color:var(--muted)}
.scene-mark svg{width:.9em;height:.9em}
.scene-label{margin:0;font-size:1rem;color:var(--muted)}
.scene-math{margin:0;font-family:var(--serif);font-weight:400;line-height:1.25;color:var(--ink);font-variant-numeric:lining-nums}
.scene-math>span{white-space:nowrap}
.scene-card>.scene-math{font-size:clamp(2.25rem,1.2rem + 2.8vw,3.75rem);margin:4px 0 clamp(20px,2.4vw,32px)}
.scene-math mark{color:inherit;background:linear-gradient(transparent 16%,var(--hl) 16% 86%,transparent 86%);padding:0 .1em;margin:0 -.04em}
.scene-ask{margin:0 0 clamp(24px,2.4vw,32px);font-size:1.2rem;font-weight:400;line-height:1.4;color:var(--ink-2);text-wrap:balance}
.reasoning{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.reasoning summary{min-height:52px;padding:10px 0}
.reasoning .when-open,.reasoning[open] .when-closed{display:none}
.reasoning[open] .when-open{display:inline}
.reasoning-body{padding:0 0 16px}
.reasoning-note{margin:0 0 4px;color:var(--ink-2)}
.scene-math.chain{font-size:clamp(1.3rem,1.1rem + .6vw,1.6rem)}
.scene-caption{margin:20px 0 0;font-size:.85rem;line-height:1.45;color:var(--muted)}
.inside{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px);align-items:start;margin-top:var(--section)}
.inside-copy h2{margin-bottom:12px}
.inside-copy p{color:var(--ink-2);max-width:44ch}

/* ---------- Home: courses, sets, pricing, buying ---------- */
.courses,.sets,.buying,.faq-layout{margin-top:var(--section)}
.course-index{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px clamp(20px,3vw,40px)}
section.course{display:flex;flex-direction:column;min-width:0}
.course h3{font-family:var(--serif);font-size:1.35rem;line-height:1.2;letter-spacing:-.01em;margin:0 0 4px}
.course h3 a{color:inherit;text-decoration:none}
.course h3 a:hover{text-decoration:underline;text-decoration-color:var(--hl-line);text-decoration-thickness:2px}
.course .count{font-size:.88rem;color:var(--muted);margin:0 0 12px}
.course-topics{list-style:none;margin:0 0 14px;padding:0;border-top:1px solid var(--line)}
.course-topics li{border-bottom:1px solid var(--line-2)}
.course-topics a{display:block;padding:9px 0;font-size:.94rem;line-height:1.4;color:var(--ink-2);text-decoration:none}
.course-topics a:hover{color:var(--ink);text-decoration:underline}
.course .more{align-self:flex-start;margin-top:auto;font-size:.9rem}
.section-note{font-size:.88rem;color:var(--muted);margin:22px 0 0}
.sets .section-head{display:block}
.set-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px clamp(24px,4vw,56px)}
.set{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 24px;align-content:start;padding-top:18px;border-top:1px solid var(--line)}
.set h3{font-family:var(--serif);font-size:1.25rem;line-height:1.25;margin:0 0 4px}
.set h3 a{color:inherit;text-decoration:none}
.set h3 a:hover{text-decoration:underline;text-decoration-color:var(--hl-line);text-decoration-thickness:2px}
.set-meta{font-size:.88rem;color:var(--muted);margin:0}
.set-price{display:flex;flex-direction:column;align-items:flex-end;margin:0;text-align:right}
.set-price .per{font-size:.8rem;color:var(--muted);white-space:nowrap}
.set-topics{grid-column:1/-1;margin:12px 0 0;padding:0 0 0 1.5em;columns:2;column-gap:32px;font-size:.9rem;line-height:1.45;color:var(--ink-2)}
.set-topics li{break-inside:avoid;padding:3px 0}
.set-topics li::marker{color:var(--muted);font-variant-numeric:tabular-nums}
.pricing{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5vw,64px);align-items:center;margin-top:var(--section);padding:clamp(24px,4vw,48px);background:var(--paper);border-radius:var(--r-l)}
.pricing h2{max-width:20ch}
.pricing-copy p{color:var(--ink-2)}
.pricing .fine{font-size:.84rem;line-height:1.55;color:var(--muted);margin:0}
.steps-figure{margin:0}
.ladder{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end}
.ladder li{display:flex;flex-direction:column;min-width:0}
.ladder .each{padding:0 6px 8px;font-size:.72rem;line-height:1.2;color:var(--muted)}
.ladder .each strong{display:block;font-family:var(--serif);font-size:1.2rem;font-weight:400;color:var(--ink)}
.ladder .bar{display:block;background:#fff;border:1px solid var(--line);border-top:3px solid var(--ink);border-bottom:2px solid var(--ink);margin-right:-1px}
.ladder li:last-child .bar{background:var(--hl);margin-right:0}
.ladder .s1 .bar{height:24px}.ladder .s2 .bar{height:48px}.ladder .s3 .bar{height:72px}.ladder .s4 .bar{height:96px}.ladder .s5 .bar{height:120px}.ladder .s6 .bar{height:144px}
.ladder .qty{padding:8px 6px 0;font-size:.78rem;font-weight:500;line-height:1.3;white-space:nowrap;color:var(--ink-2)}
.ladder .total{padding:0 6px;font-size:.78rem;line-height:1.3;white-space:nowrap;color:var(--muted)}
.steps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:20px 28px;list-style:none;margin:0;padding:0;counter-reset:step}
.steps>*{position:relative;border-top:1px solid var(--line);padding-top:16px}
.steps>li{counter-increment:step}
.steps>li::before{content:counter(step);display:block;font-family:var(--serif);font-size:1.9rem;font-weight:400;line-height:1;color:var(--muted);margin-bottom:10px}
.steps strong{display:block;font-size:1.05rem;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.steps p{font-size:.93rem;color:var(--ink-2);margin:0}
.license-note{margin:28px 0 0;font-size:.93rem;color:var(--muted)}
.license-note strong{font-weight:500;color:var(--ink-2)}
.scenarios{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.scenarios article{background:var(--bg);border-radius:var(--r-m);padding:20px;border:1px solid var(--line)}
.scenarios h3{font-size:1.05rem}.scenarios p{margin:0;font-size:.93rem;color:var(--muted)}
.faq-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(24px,5vw,64px);align-items:start}
.faq-layout .section-head{display:block;margin:0}
.faq-layout .section-head p{font-size:.95rem;color:var(--muted);margin:10px 0 0}

/* Announcement Worker course links (a.course with span.body); neutral, no course colour */
a.course{display:block;padding:18px 0 20px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
a.course:hover strong{text-decoration:underline}
.course .spine{display:none}
.course .body{display:flex;flex-direction:column;gap:4px}
.course .idx{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.course .body>strong{font-family:var(--serif);font-size:1.3rem;line-height:1.2}
.hero-copy>.actions{margin-top:4px}

/* ---------- Empty and coming-soon states ---------- */
.coming{margin-top:28px;background:var(--paper);border-radius:var(--r-l);padding:28px 32px}
.coming h2,.coming h3{font-family:var(--serif);font-size:1.4rem}
.coming p{color:var(--ink-2);max-width:64ch}
.coming p:last-child{margin-bottom:0}
.empty{background:var(--bg);border:1px dashed var(--line-strong);border-radius:var(--r-m);padding:36px 28px;text-align:center}
.empty h2{font-size:1.3rem}
.empty p{color:var(--muted);max-width:52ch;margin:0 auto 16px}
.empty .actions{justify-content:center}
.empty-line{background:var(--bg);border:1px dashed var(--line-strong);border-radius:var(--r-m);padding:22px 24px;color:var(--muted)}

/* ---------- Library: heading, filters, entries ---------- */
.list-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:18px 48px;align-items:end;padding-bottom:24px;margin-bottom:28px;border-bottom:1px solid var(--line)}
.list-head .heading{margin:0}
.list-head h1{margin-bottom:8px}
.list-head .intro{font-size:1.02rem;margin:0}
.list-pricing{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;max-width:440px;margin:0;font-size:.88rem;color:var(--ink-2)}
.list-pricing .kicker{flex-basis:100%;margin:0 0 2px}
.list-pricing strong{color:var(--ink)}
.list-pricing .text-link{flex-basis:auto;margin-top:6px;font-size:.86rem}
.catalog{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.filters{position:sticky;top:var(--sticky);display:grid;gap:26px;min-width:0}
.search{display:grid;gap:12px;margin:0}
.search label{margin:0;font-size:.84rem;font-weight:700;color:var(--ink-2)}
.search input,.search select{min-height:44px;font-size:.95rem;font-weight:400}
.search button{min-height:44px;padding:9px 18px}
.subject-nav{display:grid;gap:2px}
.filters-label{margin:0 0 6px}
.pill{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:8px 12px;border-radius:var(--r-s);color:var(--ink-2);font-weight:600;font-size:.95rem;text-decoration:none}
.pill:hover{background:var(--band);color:var(--ink)}
.pill.active{background:var(--ink);color:#fff}
.pill-count{font-size:.8rem;font-weight:600;color:var(--muted)}
.pill.active .pill-count{color:#d5dbe6}
.catalog>section{min-width:0}
.results-summary{font-size:.9rem;color:var(--muted);margin:0 0 8px}
.group+.group{margin-top:44px}
.group-head{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap;font-size:1.55rem;margin:18px 0 10px}
.group-head .n{font-family:var(--sans);font-size:.86rem;font-weight:500;letter-spacing:0;color:var(--muted)}
.unit-head{display:flex;align-items:baseline;gap:10px;font-size:var(--fs-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:26px 0 0;padding-bottom:8px}
.unit-head .n{font-weight:600;letter-spacing:0;text-transform:none}
.resource-list{margin:0 -14px;border-top:1px solid var(--line)}
.resource{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 32px;padding:18px 14px;border-bottom:1px solid var(--line);transition:background .15s}
.resource:hover{background:var(--paper)}
.resource.has-thumb{grid-template-columns:60px minmax(0,1fr) auto}
.entry-thumb{display:block;align-self:start}
.entry-thumb img{display:block;width:60px;aspect-ratio:1360/1760;object-fit:cover;object-position:top;border:1px solid var(--line);background:#fff}
.entry-main{min-width:0}
.entry-kicker{font-size:.82rem;font-weight:500;color:var(--muted);margin:0 0 4px}
.entry-title{font-family:var(--serif);font-size:1.22rem;line-height:1.3;letter-spacing:-.005em;margin:0 0 4px}
.entry-title a{color:var(--ink);text-decoration:none}
.entry-title a::after{content:"";position:absolute;inset:0}
.resource:hover .entry-title a{text-decoration:underline;text-decoration-color:var(--hl-line);text-decoration-thickness:2px}
.entry-focus{font-size:.95rem;line-height:1.5;color:var(--ink-2);margin:0 0 6px;max-width:68ch}
.entry-facts{font-size:.86rem;line-height:1.5;color:var(--muted);margin:0}
.entry-facts strong{color:var(--ink);font-weight:700}
.entry-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;padding-top:3px;text-align:right}
.entry-side .price-source{margin:0}
.entry-go{font-size:.86rem;white-space:nowrap}
.price-small{font-size:1.2rem;font-weight:700;color:var(--ink)}
.price{font-size:2.2rem;font-weight:700;line-height:1.05;letter-spacing:-.02em;color:var(--ink)}
.price.muted{font-size:1.25rem;color:var(--muted)}
.price-small.muted{font-size:.95rem;color:var(--muted)}
.price-source{display:inline-block;margin-left:8px;background:var(--warn-soft);color:#7a5a25;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:3px;vertical-align:middle;font-weight:700}
.badge{display:inline-block;background:var(--warn-soft);color:#6d5020;padding:3px 9px;font-size:.75rem;line-height:1.5;border-radius:4px;font-weight:700}
.badge.pass{background:var(--save-soft);color:#1c5a3a}.badge.fail{background:var(--danger-soft);color:var(--danger)}
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:32px 0 0}

/* ---------- Product detail ---------- */
.breadcrumb{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:.88rem;color:var(--muted);margin-bottom:24px}
.breadcrumb .text-link{font-weight:600;border-bottom-width:1px;border-bottom-color:var(--line-strong)}
.detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"head buy" "body buy";gap:0 clamp(28px,4.5vw,64px);align-items:start}
.detail-head{grid-area:head}
.detail-head .kicker{margin-bottom:12px}
.detail-head h1{font-size:clamp(2rem,1.5rem + 1.8vw,2.9rem);line-height:1.1;letter-spacing:-.02em;max-width:22ch;margin-bottom:16px}
.detail-head .badge{margin:0 0 14px}
.detail-summary{font-size:1.15rem;line-height:1.55;color:var(--ink-2);max-width:58ch;margin:0 0 24px}
.focus-block{margin:0}
.focus-block h2{margin:0 0 8px}
.objectives{margin:0;padding:0 0 0 1.25em;display:grid;gap:6px;max-width:64ch;color:var(--ink-2)}
.objectives li::marker{color:var(--ink)}
.detail-body{grid-area:body;min-width:0}
.detail-body>section{margin-top:52px}
.detail-body>section:first-child{margin-top:40px}
.detail-body h2{font-size:1.55rem}
.buy-box{grid-area:buy;position:sticky;top:var(--sticky);background:var(--bg);border:1px solid var(--line);border-radius:var(--r-l);padding:24px;margin:0 0 22px}
/* Decision panels: the topic page's purchase box and the cart's order summary share this lift (DESIGN_DIRECTION
   section 6). Other panels, read-only summaries, file lists and explanatory boxes stay flat. */
.buy-box,.summary{box-shadow:var(--shadow-2)}
.price-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0}
.buy-box .per{font-size:.92rem;color:var(--muted);font-weight:600}
.buy-box form{margin:16px 0 0}.buy-box button{width:100%;min-height:52px;font-size:1rem}
.buy-box .caption{margin:10px 0 0}
.set-prices{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line-2)}
.set-prices h2{margin:0 0 6px}
.set-prices dl{display:block;margin:0}
.set-prices dl>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 0;border-bottom:1px solid var(--line-2);font-size:.9rem}
.set-prices dl>div:last-child{border-bottom:0}
.set-prices dt{color:var(--ink-2)}
.set-prices dd{margin:0;font-weight:700;color:var(--ink);text-align:right;white-space:nowrap}
.set-prices dd span{display:inline-block;min-width:6.4em;margin-left:10px;font-weight:500;font-size:.84rem;color:var(--muted)}
.set-prices p{font-size:.84rem;line-height:1.5;color:var(--muted);margin:8px 0 0}
.set-avg{margin:14px 0 0;font-size:.95rem;font-weight:600;color:var(--ink-2)}
.assurances{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line-2);display:grid;gap:10px;font-size:.86rem;color:var(--ink-2)}
.assurances li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start}
.assurances .icon{width:18px;height:18px;margin-top:2px;color:var(--ink)}
.unavailable{background:var(--band);border:1px solid var(--line);border-radius:var(--r-s);padding:13px 18px;margin-top:14px;color:var(--muted);font-weight:700;text-align:center}
.contents{margin-top:6px}
.contents-lead{font-size:.95rem;color:var(--ink-2);margin:0}
.contents-group{margin-top:22px}
.contents-group h3{font-size:1.02rem;margin:0 0 8px}
.contents-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.contents-list li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:4px 18px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line-2)}
.contents-list .sym{display:block;width:32px;height:32px;color:var(--ink)}
.contents-list .sym svg{width:100%;height:100%}
.contents-list .what strong{display:block;font-size:1.02rem;line-height:1.35}
.contents-list .what p{font-size:.9rem;line-height:1.5;color:var(--ink-2);margin:3px 0 0;max-width:62ch}
.contents-list .what .meta{font-size:.8rem;color:var(--muted)}
.nums{display:flex;gap:22px;margin:0}
.nums>div{min-width:60px;text-align:right}
.nums dt{font-size:.68rem}
.nums dd{font-family:var(--serif);font-size:1.4rem;font-weight:700;line-height:1.2;color:var(--ink)}
.contents-total{display:flex;justify-content:space-between;align-items:baseline;gap:6px 16px;flex-wrap:wrap;margin:16px 0 0;padding-top:12px;border-top:2px solid var(--ink);font-weight:700}
.contents-total span:first-child{font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.contents-note{font-size:.86rem;color:var(--muted);margin:10px 0 0}
.contents-empty{color:var(--muted)}
.not-included{margin:30px 0 0}
.not-included h3{font-size:1.02rem;margin-bottom:10px}
.not-included ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 32px;font-size:.92rem;color:var(--ink-2)}
.not-included li{position:relative;padding-left:20px}
.not-included li::before{content:"–";position:absolute;left:2px;color:var(--muted)}
.preview-status{padding:22px 24px;border:1px dashed var(--line-strong);border-radius:var(--r-m)}
.preview-status h2{font-size:1.25rem;margin-bottom:6px}
.preview-status p{color:var(--ink-2);margin:0 0 10px;max-width:66ch}
.preview-status .ps-links{display:flex;flex-wrap:wrap;gap:10px 20px;margin:4px 0 0}
.note-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 28px}
.note-grid>div{border-top:1px solid var(--line);padding-top:14px}
.note-grid h3{font-size:1rem}
.note-grid p{font-size:.9rem;color:var(--ink-2);margin:0}
.status-list{display:grid;margin:18px 0 18px;padding:0;list-style:none;font-size:.9rem;border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden}
.status-list li{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border-bottom:1px solid var(--line-2);background:var(--bg)}
.status-list li:last-child{border-bottom:0}
.status-list li span:last-child{text-align:right;color:var(--muted)}
.related{margin-top:var(--section)}
.jump{display:none}
.topic-list{list-style:none;margin:6px 0 18px;padding:0;border-top:1px solid var(--line);counter-reset:topic}
.topic-list li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:2px 14px;padding:14px 0;border-bottom:1px solid var(--line-2);counter-increment:topic}
.topic-list li::before{content:counter(topic);grid-row:span 2;font-family:var(--serif);font-size:1.45rem;font-weight:700;line-height:1.1;color:var(--ink);text-align:right}
.topic-list a{justify-self:start;font-family:var(--serif);font-size:1.15rem;font-weight:700;line-height:1.3;color:var(--ink);text-decoration:none}
.topic-list a:hover{text-decoration:underline;text-decoration-color:var(--hl-line);text-decoration-thickness:2px}
.topic-list span{font-size:.86rem;color:var(--muted)}
/* Operator-only bound page previews */
.preview-column{min-width:0}
.detail-stage{margin:0;background:var(--band);border:1px solid var(--line);border-radius:var(--r-m);padding:22px}
.detail-stage img{display:block;width:100%;height:auto;max-height:640px;object-fit:contain;background:#fff;box-shadow:var(--shadow-2);border:1px solid var(--line)}
.detail-stage figcaption{display:flex;justify-content:space-between;gap:12px;font-size:.82rem;color:var(--muted);margin-top:14px}
.preview-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0}
.preview-nav a{display:flex;flex-direction:column;gap:8px;padding:8px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--bg);color:var(--ink);font-size:.8rem;line-height:1.25;min-height:44px;text-decoration:none}
.preview-nav a:hover{border-color:var(--ink)}
.preview-nav a[aria-current=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.preview-nav img{display:block;width:100%;aspect-ratio:1360/1760;object-fit:cover;object-position:top;border:1px solid var(--line-2);background:#fff}
.preview-nav span{display:flex;flex-direction:column}.preview-nav small{font-size:.72rem;color:var(--muted)}
.reader-link{margin:2px 0 6px}
.file-table{width:100%;border-collapse:collapse;background:var(--bg);font-size:.9rem;margin-top:22px;border:1px solid var(--line)}
.file-table th,.file-table td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line-2)}
.file-table th{color:var(--muted);font-weight:700;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;background:var(--band)}
.file-table tr:last-child td{border-bottom:0}
.file-table caption{text-align:left;font-size:1.25rem;font-weight:700;margin:30px 0 12px;caption-side:top}
.table-wrap{overflow-x:auto}
.file-table.orders td,.file-table.orders th{white-space:nowrap}
.text-panel{border-top:1px solid var(--line);padding-top:18px;margin-bottom:26px}
.text-panel h2{font-size:1.15rem}
.text-panel p,.text-panel li{font-size:.93rem;color:var(--ink-2)}
.text-panel ul{padding-left:20px}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
/* Disclosure rows (the FAQ and the home example's reasoning). The label is a control, so it stays semibold in the
   secondary tone at rest, with the +/- sign in ink; the revealed text below is regular. The sign is hidden from the
   accessible name through empty CSS alt text (the plain declaration is the fallback). */
.faq summary,.reasoning summary{display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer;list-style:none;font-weight:600;color:var(--ink-2)}
.faq summary::-webkit-details-marker,.reasoning summary::-webkit-details-marker{display:none}
.faq summary::after,.reasoning summary::after{content:"+";content:"+" / "";flex:none;color:var(--ink);font-weight:400;font-size:1.3rem;line-height:1}
.faq details[open] summary::after,.reasoning[open] summary::after{content:"−";content:"−" / ""}
.faq summary:hover,.reasoning summary:hover{color:var(--ink)}
.faq summary{padding:16px 0;min-height:44px}
.faq p{margin:0 0 16px;color:var(--ink-2);font-size:.95rem;max-width:72ch}

/* ---------- Shared panels, notices, states ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
.panel{padding:28px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-m)}
.panel form+form{margin-top:12px}.panel .button,.panel button{margin-top:6px}
.notice{padding:12px 16px;border:1px solid #ead9b8;border-left:4px solid var(--ochre);background:var(--warn-soft);border-radius:var(--r-s);margin-bottom:22px;font-size:.93rem;color:#4a3a1c}
.notice.success,.success{border-color:#b9dcc6;border-left-color:#2f8a5b;background:var(--save-soft);color:#1c4a31}
.workspace-nav{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:26px;font-size:.95rem}
.fixture-art{background:var(--ink);color:#fff;border-radius:var(--r-m);padding:40px 32px;margin-bottom:24px}
.fixture-art .eyebrow{color:var(--hl)}
.fixture-art strong{display:block;font-size:2.1rem;line-height:1.15;max-width:380px;margin:18px 0}
.fixture-art p{margin:0;color:#c9d3de}
.state{display:inline-block;padding:4px 12px;border-radius:999px;background:var(--band-2);color:var(--ink);font-weight:700;margin-bottom:16px;font-size:.8rem;letter-spacing:.06em}
.state-paid{background:var(--save-soft);color:#1c5a3a}
.state-pending{background:var(--warn-soft);color:#6d5020}
.state-failed{background:var(--danger-soft);color:var(--danger)}
.state-closed{background:var(--band-2);color:var(--ink-2)}
.auth{max-width:480px}
.auth-card{max-width:460px;margin:28px auto 12px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-l);padding:34px 34px 30px;box-shadow:var(--shadow-2)}
.auth-card h1{font-size:2rem;margin-bottom:10px}
.auth-card .heading{margin-bottom:18px}
.auth-card form{margin-top:20px}
.auth-card label{margin-bottom:16px}
.error-state{max-width:640px;margin:48px auto 24px;text-align:center}
.error-state .intro{margin:0 auto 26px}
.error-state .actions{justify-content:center}
.sample-slot{display:grid;grid-template-columns:56px 1fr;gap:18px;align-items:start;background:var(--band);border-radius:var(--r-m);padding:18px;margin-bottom:18px}
.sample-slot .ps-icon{width:56px;height:56px;padding:12px;border-radius:50%;background:var(--bg);color:var(--ink)}
.sample-slot .ps-icon svg{width:100%;height:100%}
.sample-slot h3{margin-bottom:4px}.sample-slot p{margin:0;font-size:.9rem;color:var(--ink-2)}
.prose{max-width:68ch;border-top:0;padding-top:4px}
.text-panel.prose p{font-size:1.02rem;line-height:1.75;color:var(--ink-2);margin-bottom:18px}
.contact-card{max-width:640px}

/* ---------- Cart ---------- */
.cart-layout,.purchase-layout,.checkout-layout{grid-template-columns:minmax(0,1fr) 380px;gap:32px}
.lines-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:0 20px 10px}
.lines-head h2,.lines-head span{margin:0}
.cart-lines{list-style:none;margin:0 0 20px;padding:0;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.cart-line{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:0 20px;align-items:center;padding:0 18px 0 20px;border-bottom:1px solid var(--line-2)}
.cart-line:last-child{border-bottom:0}
.line-main{padding:16px 0;min-width:0}
.line-kind{font-size:.8rem;font-weight:600;color:var(--muted);margin:0 0 4px}
.line-title{font-family:var(--serif);font-size:1.12rem;line-height:1.3;margin:0}
.line-title a{color:var(--ink);text-decoration:none}
.line-title a:hover{text-decoration:underline}
.line-sub{font-size:.84rem;color:var(--muted);margin:3px 0 0}
.line-price{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.line-price .now{font-size:1.08rem;font-weight:700;white-space:nowrap}
.line-price .was{font-size:.78rem;color:var(--muted);white-space:nowrap}
.line-price .save::before{content:"· "}
.line-remove{margin:0}
.summary{position:sticky;top:var(--sticky)}
.summary h2{font-size:1.4rem;margin-bottom:8px}
.summary-count{margin:0 0 16px;color:var(--ink-2)}
.tier-reached{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px;padding:10px 12px;border-radius:var(--r-s);background:var(--save-soft);color:#1c4a31;font-size:.88rem;font-weight:600}
.tier-reached::before{content:"";flex:0 0 11px;height:6px;margin-top:6px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.tier-progress{display:block;width:100%;height:8px;margin:4px 0 10px;border:0;border-radius:999px;background:var(--band-2);color:var(--ink);overflow:hidden;-webkit-appearance:none;appearance:none}
.tier-progress::-webkit-progress-bar{background:var(--band-2);border-radius:999px}
.tier-progress::-webkit-progress-value{background:var(--ink);border-radius:999px}
.tier-progress::-moz-progress-bar{background:var(--ink);border-radius:999px}
.tier-note{font-size:.86rem;color:var(--ink-2);margin:0 0 18px}
.totals{grid-template-columns:1fr;gap:0;margin:6px 0 18px;border-top:1px solid var(--line)}
.totals>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px solid var(--line-2)}
.totals dt{color:var(--muted);font-weight:500}
.totals dd{margin:0;font-weight:600;white-space:nowrap}
.totals .saving dd{color:var(--save)}
.totals .grand{border-bottom:0;padding-top:14px}
.totals .grand dt{color:var(--ink);font-weight:700}
.totals .grand dd{font-size:1.75rem;font-weight:700;line-height:1}
.totals .grand strong{font-weight:inherit}
.tax-note{font-size:.84rem;color:var(--muted);margin:-6px 0 16px}
.checkout-form{margin:0}
.secure-note{display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;font-size:.8rem;line-height:1.45;color:var(--muted)}
.secure-note .icon{width:15px;height:15px;margin-top:1px}
.summary-fine{font-size:.8rem;line-height:1.55;color:var(--muted);margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line-2)}

/* ---------- Purchase and history ---------- */
.purchase-main>h2{font-size:1.5rem}
.file-list{list-style:none;margin:14px 0 8px;padding:0;border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.file-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 16px;background:var(--bg);border-bottom:1px solid var(--line-2)}
.file-row:last-child{border-bottom:0}
.file-icon{display:inline-flex;width:40px;height:40px;padding:8px;border-radius:var(--r-s);background:var(--band-2);color:var(--ink)}
.file-icon svg{width:100%;height:100%}
.file-info{display:flex;flex-direction:column;min-width:0}
.file-info strong{font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.file-info .muted{font-size:.82rem}
.panel .file-row .button{margin-top:0;min-height:42px;padding:8px 16px;white-space:nowrap}
.outcomes{display:flex;flex-wrap:wrap;gap:10px}
.panel .outcomes form+form{margin-top:0}
.recovery{margin:30px 0 0}
.recovery h2{font-size:1.15rem}
.order-lines{list-style:none;margin:12px 0 6px;padding:0;border-top:1px solid var(--line)}
.order-lines li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;padding:10px 0;border-bottom:1px solid var(--line-2);font-size:.9rem}
.order-lines .t{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.order-lines .meta{grid-column:1;font-size:.8rem;color:var(--muted)}
.order-lines .amt{grid-column:2;grid-row:1;font-weight:600;white-space:nowrap}
.summary-dl{gap:8px 16px;font-size:.9rem}
.summary-dl dd{text-align:right}
.summary-dl .mono{grid-column:1/-1;margin-top:-4px;text-align:left;font-size:.76rem;font-weight:500;color:var(--ink-2)}
.purchase-summary .state{margin-bottom:12px}
.history{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:12px}
.history-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 22px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-m)}
.history-main{min-width:0}
.history-meta{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-size:.82rem;color:var(--muted)}
.history-meta .state{margin:0;padding:3px 10px;font-size:.7rem}
.history-row h2{font-size:1.2rem;margin:0 0 4px}
.history-row .muted{margin:0;font-size:.88rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.history-row .button{flex:none}
.history-foot{margin-top:8px}

/* ---------- Secure payment (Stripe Elements) ---------- */
.checkout-head{margin-bottom:26px}
.checkout-head h1{margin:0}
.pay-panel h2{font-family:var(--sans);font-size:var(--fs-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.stripe-slot{min-height:44px;margin-bottom:24px}
.tax-summary{font-weight:600;padding:12px 14px;background:var(--band);border-radius:var(--r-s)}
.tax-summary:empty{display:none}
.payment-message{font-size:.9rem;color:var(--ink-2);min-height:1.6em}
.order-summary h2{font-size:1.3rem}
.order-total{padding-top:12px;border-top:1px solid var(--line)}
.order-summary form{margin-top:12px}

/* ---------- Responsive ---------- */
@media(max-width:1180px){
  .site-nav a{padding:6px 9px;font-size:.9rem}
  .site-nav a[aria-current=page]::after{left:9px;right:9px}
  .site-header .util-link{display:none}
}
@media(max-width:1100px){
  .course-index{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 40px}
  .set-list{grid-template-columns:1fr}
  .steps{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 28px}
  .detail-layout{grid-template-columns:minmax(0,1fr) 312px}
  .catalog{grid-template-columns:210px minmax(0,1fr)}
  .cart-layout,.purchase-layout,.checkout-layout{grid-template-columns:minmax(0,1fr) 340px;gap:24px}
  .list-head{grid-template-columns:1fr;align-items:start}
  .list-pricing{max-width:none}
}
@media(max-width:980px){
  .inside{grid-template-columns:1fr}
  .inside .specimen{max-width:640px}
  .site-header{position:relative}
  .site-header .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"brand util cart" "nav nav nav";align-items:center;column-gap:12px;row-gap:0;padding-top:10px;padding-bottom:2px;min-height:0}
  .site-header .wordmark{grid-area:brand}
  .utility{grid-area:util}
  .cart-link{grid-area:cart}
  .site-nav{grid-area:nav;overflow-x:auto;margin:6px calc(var(--gutter) * -1) 0;padding:0 var(--gutter) 4px;scrollbar-width:none}
  .site-nav::-webkit-scrollbar{display:none}
  :root{--sticky:16px}
  .hero{grid-template-columns:1fr;gap:36px}
  .hero-copy{padding-top:0}
  .hero-copy h1{max-width:18ch}
  .opening{grid-template-columns:1fr;gap:36px}
  .opening-copy h1{max-width:18ch}
  .scene-card{max-width:640px}
  .specimen{max-width:640px}
  .pricing{grid-template-columns:1fr;gap:28px}
  .site-footer .wrap{grid-template-columns:1fr 1fr}
  .catalog{grid-template-columns:1fr;gap:18px}
  .filters{position:static;gap:14px}
  .search{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
  .search label{flex:1 1 220px}
  .search label:has(select){flex:0 1 200px}
  .subject-nav{display:flex;gap:6px;overflow-x:auto;margin:0 calc(var(--gutter) * -1);padding:2px var(--gutter) 4px;scrollbar-width:none}
  .subject-nav::-webkit-scrollbar{display:none}
  .filters-label{display:none}
  .pill{flex:none;justify-content:flex-start;gap:8px;min-height:42px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:999px;white-space:nowrap}
  .pill.active{border-color:var(--ink)}
  .group-head{margin-top:10px}
  .detail-layout{grid-template-columns:1fr;grid-template-areas:"head" "buy" "body"}
  .buy-box{position:static;max-width:560px;margin:26px 0 0}
  .jump{display:inline-flex}
  .buy-box .jump{margin-top:14px}
  .faq-layout{grid-template-columns:1fr}
  .note-grid{grid-template-columns:1fr;gap:14px}
  .coming{padding:24px 22px}
}
@media(max-width:760px){
  main{padding:22px var(--gutter) 56px}
  .site-header .wordmark{font-size:1.18rem}
  .site-header .wordmark .tag{display:none}
  .site-header .util-link{display:none}
  .utility{gap:8px}
  .env-badge span{display:none}
  .site-banner{font-size:.78rem}
  .hero-copy h1,.opening-copy h1{font-size:clamp(2.05rem,1.5rem + 3vw,2.5rem);max-width:none}
  .intro{font-size:1.05rem}
  .search-field button{padding:0 16px}
  .specimen-list li{grid-template-columns:56px minmax(0,1fr);gap:12px}
  .specimen-list .n{font-size:1.35rem}
  .ladder .each{padding:0 3px 6px;font-size:.66rem}
  .ladder .each strong{font-size:1rem}
  .ladder .qty,.ladder .total{padding-left:3px;padding-right:3px;font-size:.7rem}
  .ladder .s1 .bar{height:16px}.ladder .s2 .bar{height:32px}.ladder .s3 .bar{height:48px}.ladder .s4 .bar{height:64px}.ladder .s5 .bar{height:80px}.ladder .s6 .bar{height:96px}
  .course-index,.scenarios,.steps{grid-template-columns:1fr}
  .course-index{gap:30px}
  .set{grid-template-columns:minmax(0,1fr)}
  .set-price{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 12px;text-align:left}
  .set-topics{columns:1}
  .section-head{align-items:start}
  .search label{flex:1 1 100%}
  .search label:has(select){flex:1 1 0}
  .search button{flex:1 1 0}
  .resource{grid-template-columns:minmax(0,1fr);gap:10px;padding:16px 14px}
  .resource.has-thumb{grid-template-columns:48px minmax(0,1fr)}
  .resource.has-thumb .entry-side{grid-column:1/-1}
  .entry-thumb img{width:48px}
  .entry-title{font-size:1.14rem}
  .entry-side{flex-direction:row;align-items:baseline;justify-content:space-between;flex-wrap:wrap;padding-top:0;text-align:left}
  .contents-list li{grid-template-columns:28px minmax(0,1fr);gap:4px 14px}
  .contents-list .sym{width:26px;height:26px}
  .nums{grid-column:2;gap:18px;margin-top:6px}
  .nums>div{display:flex;align-items:baseline;gap:6px;min-width:0;text-align:left}
  .nums dd{font-size:1.15rem}
  .not-included ul{grid-template-columns:1fr}
  .preview-status{padding:18px}
  .detail-stage{padding:14px}
  .detail-stage img{max-height:none}
  .preview-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .buy-box{max-width:none}
  .split,.cart-layout,.purchase-layout,.checkout-layout{grid-template-columns:1fr;gap:20px}
  .cart-layout>aside{grid-row:1}
  .summary{position:static}
  .lines-head{padding:0 14px 8px}
  .cart-line{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main price" "remove remove";gap:0 14px;padding:0 14px}
  .line-main{grid-area:main;padding:14px 0 2px}
  .line-price{grid-area:price;align-self:start;padding-top:14px}
  .line-price .was{display:flex;flex-direction:column;align-items:flex-end}
  .line-price .save::before{content:none}
  .line-remove{grid-area:remove;justify-self:start;margin:0 0 4px -4px}
  .panel{padding:20px}
  .file-row{grid-template-columns:36px minmax(0,1fr);gap:12px}
  .file-icon{width:36px;height:36px;padding:7px}
  .panel .file-row .button{grid-column:1/-1;width:100%}
  .history-row{flex-direction:column;align-items:stretch;gap:12px;padding:16px 18px}
  .history-row .button{width:100%}
  .site-footer .wrap{grid-template-columns:1fr;gap:26px}
  dl{grid-template-columns:1fr;gap:2px}
  dd{margin-bottom:10px}
  .set-prices dd,.nums dd{margin-bottom:0}
  .summary-dl{grid-template-columns:auto 1fr;gap:6px 12px}
  .summary-dl dd{margin:0}
  .sample-slot{grid-template-columns:1fr}
  .file-table th,.file-table td{padding:10px 8px}
  .auth-card{padding:26px 22px 22px;margin-top:8px}
  .error-state{margin-top:24px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Existing product artwork in the final opening card; preserve its proportions. */
.product-scene > a { display:block; }
.product-scene img { display:block; width:100%; height:auto; }
.product-scene figcaption { margin-top:1rem; }
.file-info { min-width:0; overflow-wrap:anywhere; }
.contents-list .what { min-width:0; overflow-wrap:anywhere; }