/* Newsreel Classroom section (Oct 22 2026): Cris Slotoroff's structure and writing, rebuilt in the newsreel.co
   design system. Every page under /classroom/ shares this file: the tab bar under the site nav, page heroes, and
   the interactive parts (the source feed, the story walkthrough, the assessment tabs, plans, the FAQ).
   Red is for the main button, the active tab and progress. Mono only for labels and small UI captions. */

.cx { color: var(--text); --rule: rgba(var(--ink-rgb), .14); --paper: #F4F0E8; --paper-ink: #17130F; --paper-mute: #5E564C; --paper-rule: rgba(23, 19, 15, .12); }
.cx-wrap { width: min(1152px, calc(100% - 48px)); margin: 0 auto; }
.cx-label { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; font-weight: 400; line-height: 1.6; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin: 0; }
.cx-h2 { font-family: 'Bree Serif', serif; font-weight: 400; font-size: clamp(32px, 3.3vw, 48px); line-height: 1.06; letter-spacing: -.015em; margin: 0; text-wrap: balance; }
.cx-h3 { font-family: 'Bree Serif', serif; font-weight: 400; font-size: 22px; line-height: 1.25; margin: 0; }
.cx-h3 span { font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--text-3); }
.cx-sub { font-size: 19px; line-height: 1.55; color: var(--text-2); margin: 18px 0 0; max-width: 36em; text-wrap: pretty; }
.cx-sec { padding: 120px 0; }
.cx-sec + .cx-sec { padding-top: 0; }
.cx-hero + .cx-sec { padding-top: 8px; }
.cx a.cx-link { color: var(--text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.cx a.cx-link:hover { color: var(--text-2); }

.cx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 26px; border: 0; border-radius: 8px; background: var(--red); color: #14100E; font: 500 16px/1 'DM Sans', sans-serif; text-decoration: none; cursor: pointer; transition: filter .15s; }
.cx-btn:hover { filter: brightness(1.06); }
.cx-btn-ghost { background: transparent; color: var(--text); border: 1px solid rgba(var(--ink-rgb), .35); }
.cx-btn-ghost:hover { filter: none; border-color: var(--text); }
.cx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 32px; }

/* the tab bar under the site nav */
.cx-tabs { position: sticky; top: var(--nav-h, 90px); z-index: 900; margin-top: var(--nav-h0, 90px); background: var(--nav-bg, rgba(5, 5, 5, .94)); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-bottom: 1px solid var(--rule); }
.cx-tabs-in { display: flex; align-items: center; gap: 28px; height: 56px; }
.cx-tabs-name { flex: none; font-family: 'Bree Serif', serif; font-size: 18px; color: var(--text); text-decoration: none; }
.cx-tabs nav { flex: 1; min-width: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.cx-tabs nav::-webkit-scrollbar { display: none; }
.cx-tabs nav a { position: relative; flex: none; display: flex; align-items: center; height: 56px; padding: 0 12px; font-size: 14px; color: var(--text-2); text-decoration: none; white-space: nowrap; }
body:has(.cx-tabs) .nav .nav-cta a.btn { display: none !important; }
.cx-tabs nav a:hover { color: var(--text); }
.cx-tabs nav a[aria-current="page"] { color: var(--text); }
.cx-tabs nav a[aria-current="page"]::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--red); }
.cx-tabs .cx-btn { flex: none; min-height: 36px; padding: 0 14px; font-size: 14px; border-radius: 7px; background: transparent; color: var(--text); border: 1px solid rgba(var(--ink-rgb), .35); }
.cx-tabs .cx-btn:hover { filter: none; border-color: var(--text); }

/* page heroes */
.cx-hero { padding: 96px 0 104px; }
.cx-hero h1 { font-family: 'Bree Serif', serif; font-weight: 400; font-size: clamp(52px, 6.2vw, 88px); line-height: .98; letter-spacing: -.025em; margin: 0; }
.cx-hero-sm h1 { font-size: clamp(46px, 5.4vw, 72px); }
.cx-hero-sm { padding-bottom: 56px; }
.cx-tag { font-family: 'Bree Serif', serif; font-size: clamp(22px, 2.1vw, 28px); line-height: 1.25; margin: 20px 0 0; color: var(--text-2); }
.cx-lede { font-size: 19px; line-height: 1.55; color: var(--text-2); margin: 24px 0 0; max-width: 33em; text-wrap: pretty; }
.cx-lede strong { font-weight: 500; color: var(--text); }
.cx-free { font-size: 20px; line-height: 1.5; color: var(--text); margin: 22px 0 0; max-width: 33em; }
.cx-h2-2 { margin-top: 80px; }
.cx-plans-sec .cx-h2 { margin-bottom: 0; }
.cx-plans-sub { margin: 12px 0 36px; }
.cx-plans.cx-plans-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cx-band .cx-label { color: #6B6258; margin-bottom: 16px; }
.cx-hero-home { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 48px 80px; align-items: center; padding-top: 80px; }
.cx-hero-home .cx-label { margin-bottom: 18px; }
.cx-hero-home h1 { max-width: 11ch; }
.cx-today { border: 1px solid rgba(var(--ink-rgb), .12); border-radius: 16px; background: rgba(var(--ink-rgb), .03); padding: 8px 20px 10px; }
.cx-today-head { display: flex; justify-content: space-between; gap: 12px; white-space: nowrap; margin: 0; padding: 14px 0 12px; border-bottom: 1px solid var(--rule); font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.cx-today-head span:first-child { color: var(--text); }
.cx-today ul { margin: 0; padding: 0; list-style: none; }
.cx-today li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.cx-today li:last-child { border-bottom: 0; }
.cx-today img { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; }
.cx-today small { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
:root:not([data-theme="dark"]) .cx-today small { color: #B23016; }
.cx-today strong { display: block; margin-top: 3px; font-family: 'Bree Serif', serif; font-weight: 400; font-size: 15.5px; line-height: 1.3; }
.cx-assign { padding: 5px 10px; border-radius: 6px; border: 1px solid rgba(var(--ink-rgb), .3); color: var(--text-2); font-size: 12.5px; font-weight: 500; }

/* holographic words: an iridescent foil with a sheen that sweeps across. The foil is tiled in pixels and fixed to the
   viewport, so neighbouring words share one sheet and the colours shift within a line; the tiles loop seamlessly.
   Pastel on dark, deeper inks on light so it stays readable */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .cx-holo { --sheen: rgba(255, 255, 255, .95);
    background-image: linear-gradient(90deg, transparent 44%, var(--sheen) 50%, transparent 56%),
                      linear-gradient(90deg, #9EE7FF 0%, #CDBDFF 20%, #FFC2E4 40%, #FFEDB8 60%, #AEF5D8 80%, #9EE7FF 100%);
    background-size: 1400px 100%, 640px 100%; background-position: 0 0, 0 0; background-attachment: fixed, fixed;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
    -webkit-box-decoration-break: clone; box-decoration-break: clone; animation: cx-holo 9s linear infinite; }
  :root:not([data-theme="dark"]) .cx-holo { --sheen: rgba(255, 255, 255, .7);
    background-image: linear-gradient(90deg, transparent 44%, var(--sheen) 50%, transparent 56%),
                      linear-gradient(90deg, #0B7894 0%, #6438CC 20%, #B8286F 40%, #A86200 60%, #0F8259 80%, #0B7894 100%); }
}
@keyframes cx-holo { to { background-position: 1400px 0, 640px 0; } }
@media (prefers-reduced-motion: reduce) { .cx-holo { animation: none; } }

/* scroll reveals (classroom.js adds .cx-rv, then .is-in on screen; --rv staggers siblings) */
.cx-rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease var(--rv, 0ms), transform .8s cubic-bezier(.2, .7, .2, 1) var(--rv, 0ms); }
.cx-rv.is-in { opacity: 1; transform: none; }
.cx-today .cx-assign.is-done { background: #2F7A52; border-color: #2F7A52; color: #fff; animation: cx-tap .55s ease-out; }

/* the problem: one statement, then five kinds of source, each a short muted loop */
.cx-problem-a { font-family: 'Bree Serif', serif; font-weight: 400; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.18; letter-spacing: -.01em; margin: 0; max-width: 880px; text-wrap: pretty; }
.cx-sources { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 48px; }
.cx-who { margin: 0; }
.cx-who figcaption { margin: 0 0 12px; font-family: 'Bree Serif', serif; font-size: 17px; line-height: 1.2; color: var(--text); white-space: nowrap; }
.cx-who video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; background: #111; }

/* the story parts, on a cream band */
.cx-band { background: var(--paper); color: var(--paper-ink); padding: 112px 0 120px; }
.cx-band .cx-h2 { color: var(--paper-ink); }
.cx-promise { margin: 18px 0 0; font-size: 18px; line-height: 1.6; color: #3B342C; max-width: 40em; }
.cx-band .cx-fn button { color: var(--paper-mute); }
.cx-band .cx-fn button::before { background: var(--paper-rule); }
.cx-band .cx-fn b { color: var(--paper-ink); }
.cx-band .cx-fn button[aria-selected="true"] b { color: var(--paper-ink); }
.cx-band .cx-fn button:focus-visible { outline-color: var(--paper-ink); }
.cx-band + .cx-sec { padding-top: 120px; }

/* the story walkthrough */
.cx-fn { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 44px; padding: 0; list-style: none; }
.cx-fn button { position: relative; display: flex; flex-direction: column; justify-content: flex-start; width: 100%; height: 100%; padding: 16px 2px 2px; border: 0; background: none; color: var(--text-3); text-align: left; cursor: pointer; font: inherit; }
.cx-fn button::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--rule); }
.cx-fn button::before { height: 3px !important; }
.cx-fn button i { position: absolute; z-index: 1; top: 0; left: 0; height: 3px; width: 0; background: var(--red); }
.cx-fn button[aria-selected="true"] i { width: var(--p, 100%); }
.cx-fn b { display: block; font-size: 16px; font-weight: 500; color: var(--text-2); }
.cx-fn span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.4; }
.cx-fn button[aria-selected="true"] b { color: var(--text); }
.cx-fn button:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.cx-slide { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); margin-top: 28px; border-radius: 16px; overflow: hidden; background: #fff; color: #17130F; min-height: 440px; box-shadow: 0 1px 2px rgba(23, 19, 15, .06), 0 20px 50px rgba(23, 19, 15, .10); }
.cx-slide[hidden] { display: none; }
.cx-slide-media { display: flex; flex-direction: column; background: #000; }
.cx-slide-pic { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.cx-slide-pic img, .cx-slide-pic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.is-fit .cx-slide-pic > :not(.cx-fill) { object-fit: contain; }
.cx-slide-pic .cx-fill { filter: blur(24px) brightness(.5); transform: scale(1.2); }
.cx-slide-media small { display: block; padding: 9px 14px 10px; font-size: 12.5px; line-height: 1.3; color: rgba(255, 255, 255, .72); }
.cx-slide-body { display: flex; flex-direction: column; justify-content: center; padding: 48px 52px; }
.cx-slide-body .cx-pos { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #A33A1E; margin: 0; }
.cx-slide-body h3 { font-family: 'Bree Serif', serif; font-weight: 400; font-size: 30px; line-height: 1.15; margin: 12px 0 0; color: #17130F; }
.cx-slide-body p.cx-txt { font-size: 17px; line-height: 1.6; margin: 14px 0 0; color: #3B342C; }
.cx-slide-body strong { color: #17130F; font-weight: 600; }
.cx-by { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 14px; color: #6B6258; }
.cx-by img { width: 28px; height: 28px; border-radius: 50%; }

/* assessment options: tabs over a paper panel that looks like the product */
.cx-seg { display: inline-flex; gap: 4px; margin-top: 36px; padding: 4px; border-radius: 10px; background: rgba(var(--ink-rgb), .07); }
.cx-seg button { min-height: 40px; padding: 0 18px; border: 0; border-radius: 7px; background: none; color: var(--text-2); font: 500 15px/1 'DM Sans', sans-serif; cursor: pointer; }
.cx-seg button[aria-selected="true"] { background: var(--text); color: var(--bg); }
.cx-paper { margin-top: 20px; border-radius: 16px; background: var(--paper); color: var(--paper-ink); padding: 40px; min-height: 360px; }
.cx-paper[hidden] { display: none; }
.cx-paper .cx-cap { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #A33A1E; margin: 0; }
.cx-paper h4 { font-family: 'Bree Serif', serif; font-weight: 400; font-size: 22px; line-height: 1.25; margin: 10px 0 0; color: var(--paper-ink); }
.cx-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.cx-acts > div + div { padding-left: 32px; border-left: 1px solid var(--paper-rule); }
.cx-opts { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.cx-opts li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--paper-rule); border-radius: 8px; background: #fff; font-size: 15px; }
.cx-opts li b { flex: none; display: grid; place-content: center; width: 24px; height: 24px; border-radius: 50%; background: #EDE7DC; font-size: 12px; font-weight: 600; }
.cx-opts li.is-right { border-color: #2F7A52; }
.cx-key { margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #2F7A52; }
.cx-opts li.is-right b { background: #2F7A52; color: #fff; }
.cx-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.cx-two span { display: grid; place-content: center; min-height: 42px; border: 1px solid var(--paper-rule); border-radius: 8px; background: #fff; font-size: 15px; }
.cx-two span.is-on { background: #E26A47; border-color: #E26A47; color: #fff; font-weight: 600; }

/* assessment motion. The markup is the finished state (what reduced motion and no-JS see); .cx-mo, added by
   classroom.js, starts each piece hidden and .is-play builds it, with per-item delays in --d */
.cx-mo .cx-opts li, .cx-mo .cx-two span, .cx-mo .cx-lesson li, .cx-mo .cx-week li { opacity: 0; transform: translateY(10px); }
.cx-mo.is-play .cx-opts li, .cx-mo.is-play .cx-two span, .cx-mo.is-play .cx-lesson li, .cx-mo.is-play .cx-week li { opacity: 1; transform: none;
  transition: opacity .45s ease var(--d, 0ms), transform .5s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms), border-color .3s, background-color .3s, color .3s; }
.cx-mo .cx-key, .cx-mo .cx-ok { transition: opacity .3s, transform .3s; }
.cx-mo li:not(.is-right) .cx-key, .cx-mo .cx-ok:not(.is-in) { opacity: 0; transform: translateX(-6px); }
.cx-mo.is-play .cx-opts li.is-right, .cx-mo.is-play .cx-two span.is-on { animation: cx-tap .55s ease-out; }
@keyframes cx-tap { 0% { box-shadow: 0 0 0 0 rgba(226, 106, 71, .55); transform: scale(.97); } 60% { transform: scale(1.02); } 100% { box-shadow: 0 0 0 12px rgba(226, 106, 71, 0); transform: none; } }
.cx-mo [data-mo-type].is-typing::after { content: ''; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -.12em; background: currentColor; animation: cx-caret .8s steps(1) infinite; }
@keyframes cx-caret { 50% { opacity: 0; } }
.cx-poll { margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--paper-rule); }
.cx-poll p { display: flex; justify-content: space-between; margin: 10px 0 6px; font-size: 14px; color: var(--paper-mute); }
.cx-poll p b { color: var(--paper-ink); }
.cx-poll i { display: block; height: 8px; border-radius: 4px; background: #E7E0D4; position: relative; overflow: hidden; }
.cx-poll i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); background: #E26A47; border-radius: 4px; }
.cx-poll small { display: block; margin-top: 12px; font-size: 12.5px; color: var(--paper-mute); }
.cx-lesson { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.cx-lesson li { position: relative; padding-top: 34px; border-top: 2px solid #E26A47; }
.cx-lesson li::before { counter-increment: step; content: counter(step); position: absolute; top: -13px; left: 0; display: grid; place-content: center; width: 24px; height: 24px; border-radius: 50%; background: #E26A47; color: #fff; font-size: 12px; font-weight: 700; }
.cx-lesson img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; margin-top: 12px; }
.cx-lesson p { font-size: 15px; line-height: 1.45; margin: 10px 0 0; color: var(--paper-mute); }
.cx-lesson .cx-ok { color: #2F7A52; font-weight: 600; }
.cx-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.cx-week li { display: flex; flex-direction: column; border: 1px solid var(--paper-rule); border-radius: 10px; background: #fff; overflow: hidden; }
.cx-week .cx-day { padding: 10px 12px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-mute); border-bottom: 1px solid var(--paper-rule); }
.cx-week img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.cx-week .cx-pair { display: grid; grid-template-columns: 1fr 1fr; }
.cx-week strong { display: block; padding: 10px 12px 0; font-family: 'Bree Serif', serif; font-weight: 400; font-size: 15px; line-height: 1.3; }
.cx-week em { display: block; margin-top: auto; padding: 10px 12px 12px; font-style: normal; font-size: 13px; color: #A33A1E; }

/* the demo video */
.cx-demo { position: relative; margin-top: 40px; border-radius: 14px; overflow: hidden; border: 1px solid var(--rule); background: #fff; }
.cx-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #fff; }

/* the demo request (Netlify form classroom-sample) */
.cx-ask { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 28px 64px; align-items: start; scroll-margin-top: 150px; }
.cx-ask > div p { margin: 14px 0 0; font-size: 18px; line-height: 1.55; color: var(--text-2); max-width: 28em; }
.cx-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; scroll-margin-top: 150px; }
.cx-form input, .cx-form select { width: 100%; min-height: 50px; padding: 0 14px; border-radius: 8px; border: 1px solid rgba(var(--ink-rgb), .28); background: rgba(var(--ink-rgb), .04); color: var(--text); font: 16px/1.2 'DM Sans', sans-serif; }
.cx-form input::placeholder, .cx-form select:invalid { color: var(--text-3); }
.cx-form input:focus-visible, .cx-form select:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.cx-form .cx-full { grid-column: 1 / -1; }
.cx-form .cx-btn { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
.cx-form .cx-btn:disabled { opacity: .6; cursor: wait; }
[data-theme="dark"] .cx-form { color-scheme: dark; }
.cx-sent { margin: 0; padding: 18px 20px; border: 1px solid rgba(var(--ink-rgb), .22); border-radius: 10px; font-size: 18px; line-height: 1.5; color: var(--text); }

/* the K-12 request form (Cris's webforms spec, Form A; classroom-quote.js) */
.cx-q { display: grid; gap: 18px; min-width: 0; }
.cx-q-step, .cx-q-actions { display: grid; gap: 10px; min-width: 0; }
.cx-q [hidden] { display: none !important; }
.cx-q-label { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.cx-q-row, .cx-q-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cx-q-grid .cx-full { grid-column: 1 / -1; }
.cx-q input, .cx-q select, .cx-q textarea { width: 100%; min-height: 50px; padding: 0 14px; border-radius: 8px; border: 1px solid rgba(var(--ink-rgb), .28); background: rgba(var(--ink-rgb), .04); color: var(--text); font: 16px/1.2 'DM Sans', sans-serif; }
.cx-q textarea { padding: 14px; min-height: 76px; line-height: 1.45; resize: vertical; }
.cx-q input::placeholder, .cx-q textarea::placeholder, .cx-q select:invalid { color: var(--text-3); }
.cx-q input:focus-visible, .cx-q select:focus-visible, .cx-q textarea:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
[data-theme="dark"] .cx-q { color-scheme: dark; }
.cx-q-combo { position: relative; }
.cx-q-results { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; border-radius: 10px; border: 1px solid rgba(var(--ink-rgb), .2); background: var(--bg); box-shadow: 0 18px 40px rgba(0, 0, 0, .28); max-height: 360px; overflow-y: auto; }
.cx-q-hit { padding: 10px 12px; border-radius: 7px; cursor: pointer; }
.cx-q-hit strong { display: block; font-weight: 600; font-size: 15.5px; color: var(--text); }
.cx-q-hit span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--text-3); }
.cx-q-hit:hover, .cx-q-hit.is-active { background: rgba(var(--ink-rgb), .08); }
.cx-q-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-radius: 10px; border: 1px solid rgba(var(--ink-rgb), .22); background: rgba(var(--ink-rgb), .04); }
.cx-q-card strong { display: block; font-family: 'Bree Serif', serif; font-weight: 400; font-size: 19px; line-height: 1.25; color: var(--text); }
.cx-q-card span { display: block; margin-top: 4px; font-size: 14px; color: var(--text-3); }
.cx-q-change, .cx-q-mini { flex: none; padding: 0; border: 0; background: none; color: var(--text); font: 500 14.5px/1.4 'DM Sans', sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; justify-self: start; text-align: left; }
.cx-q-checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.cx-q-checks label { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 4px; cursor: pointer; font-size: 15px; }
.cx-q-checks input { width: 18px; min-height: 18px; height: 18px; padding: 0; accent-color: var(--red); }
.cx-q-checks small { font-size: 13px; color: var(--text-3); white-space: nowrap; }
.cx-q-minirow { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.cx-q-msg { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-3); }
.cx-q-msg:empty { display: none; }
.cx-q-msg.is-bad { color: #E26A47; }
.cx-q-msg.is-ok { color: #4FA77A; font-weight: 600; }
:root:not([data-theme="dark"]) .cx-q-msg.is-ok { color: #2F7A52; }
:root:not([data-theme="dark"]) .cx-q-msg.is-bad { color: #B23016; }
.cx-q-actions { grid-template-columns: auto auto auto; justify-content: start; align-items: center; gap: 12px 16px; }
.cx-q-actions .cx-q-msg { grid-column: 1 / -1; }
.cx-q-or { font-size: 14px; color: var(--text-3); }
.cx-q .cx-btn.is-busy { opacity: .6; cursor: wait; }
.cx-q-qid { font-family: 'IBM Plex Mono', monospace; font-size: 14px !important; color: var(--text-3) !important; }
.cx-sent .cx-btn { margin-top: 14px; }

/* the closing band and the recognition row */
.cx-close { padding: 112px 0; border-top: 1px solid var(--rule); }
.cx-close .cx-h2 { max-width: 20em; font-size: clamp(36px, 4.2vw, 60px); }
.cx-marks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--rule); }
.cx-marks div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.4; color: var(--text-3); }
.cx-mark { display: flex; align-items: center; height: 26px; }
.cx-marks img { flex: none; width: auto; height: 20px; filter: var(--logo-filter); }
.cx-marks img[alt="Google Classroom"] { filter: none; height: 22px; border-radius: 3px; }
.cx-marks-foot { padding-bottom: 96px; }
.cx-marks-foot .cx-marks { margin-top: 0; }

/* Access: two lists, then plans */
.cx-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 72px; }
.cx-cols p.cx-note { font-size: 16px; color: var(--text-3); margin: 6px 0 0; }
.cx-list { margin: 22px 0 0; padding: 0; list-style: none; }
.cx-list li { padding: 14px 0; border-top: 1px solid var(--rule); font-size: 17px; line-height: 1.5; }
.cx-list li:last-child { border-bottom: 1px solid var(--rule); }
.cx-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); column-gap: 16px; margin-top: 8px; }
.cx-plan { position: relative; display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; padding: 28px 24px 22px; border: 1px solid var(--rule); border-radius: 14px; }
.cx-plan.is-key { background: var(--paper); border-color: var(--paper); color: var(--paper-ink); }
.cx-plan.is-key h3, .cx-plan.is-key .cx-price small, .cx-plan.is-key .cx-fine, .cx-plan.is-key .cx-trial-note { color: var(--paper-mute); }
.cx-plan.is-key .cx-for, .cx-plan.is-key li { color: #3B342C; }
.cx-plan.is-key ul { border-top-color: var(--paper-rule); }
.cx-plan.is-key li::before { border-color: #A33A1E; }
.cx-plan.is-key .cx-trial { color: var(--paper-ink); }
.cx-no { color: var(--text-3); }
.cx-plan li:has(.cx-no)::before { width: 9px; height: 0; border-left: 0; transform: none; top: 10px; }
.cx-plan h3 { font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 16px; color: var(--text-2); margin: 0; }
.cx-price { margin: 16px 0 0; font-family: 'Bree Serif', serif; font-size: 44px; line-height: 1; }
.cx-price small { font-family: 'DM Sans', sans-serif; font-size: 16px; color: var(--text-3); }
.cx-plan .cx-for { font-size: 15px; color: var(--text-2); margin: 10px 0 0; }
.cx-plan ul { align-content: start; margin: 18px 0 26px; padding: 18px 0 0; border-top: 1px solid var(--rule); list-style: none; display: grid; gap: 10px; }
.cx-plan li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.45; color: var(--text-2); }
.cx-plan li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 9px; height: 5px; border-left: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(-45deg); }
.cx-plan .cx-btn { align-self: end; width: 100%; min-height: 46px; padding: 0 12px; font-size: 15px; white-space: nowrap; }
.cx-plan .cx-fine { font-size: 13.5px; line-height: 1.45; color: var(--text-3); margin: 10px 0 0; text-align: center; }
.cx-plans-sec { padding-top: 24px; }
.cx-trial { display: block; margin-top: 14px; text-align: center; font-size: 15px; color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.cx-trial-note { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text-3); text-align: center; }
.cx-buyer .cx-faq { margin-top: 28px; }
.cx-cols { padding-top: 0; }

/* Where it fits: three scales, departments, grades */
.cx-scale { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cx-scale > div { padding: 28px 26px 26px; border: 1px solid var(--rule); border-radius: 14px; }
.cx-scale .cx-bar { display: flex; gap: 4px; margin-bottom: 22px; }
.cx-scale .cx-bar i { height: 8px; flex: 1; border-radius: 2px; background: rgba(var(--ink-rgb), .12); }
.cx-scale .cx-bar i.on { background: var(--red); }
.cx-scale ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cx-scale li { font-size: 16px; line-height: 1.45; color: var(--text-2); }
.cx-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; padding: 0; list-style: none; }
.cx-chips li { padding: 10px 16px; border: 1px solid var(--rule); border-radius: 8px; font-size: 15.5px; }
.cx-grades { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.cx-grades div { padding: 26px 24px; border: 1px solid var(--rule); border-radius: 14px; font-family: 'Bree Serif', serif; font-size: 30px; }
.cx-grades small { display: block; margin-top: 6px; font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--text-3); }

/* Schools */
.cx-names { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; margin: 0; padding: 0; list-style: none; }
.cx-names li { padding: 18px 0; border-top: 1px solid var(--rule); font-family: 'Bree Serif', serif; font-size: 24px; line-height: 1.25; }
.cx-quote { margin: 0; padding: 0; }
.cx-quote p { font-family: 'Bree Serif', serif; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.2; letter-spacing: -.01em; margin: 0; max-width: 24em; text-wrap: balance; }
.cx-quote figcaption { margin-top: 22px; font-size: 16px; color: var(--text-3); }
.cx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 48px; margin-top: 44px; }
.cx-stats b { display: block; font-family: 'Bree Serif', serif; font-weight: 400; font-size: clamp(56px, 6vw, 88px); line-height: .95; letter-spacing: -.03em; }
.cx-stats span { display: block; margin-top: 12px; font-size: 17px; line-height: 1.45; color: var(--text-2); max-width: 15em; }
.cx-src { font-size: 14px; color: var(--text-3); margin: 32px 0 0; }

/* FAQ */
.cx-faq { max-width: 860px; margin: 0; }
.cx-faq details { border-top: 1px solid var(--rule); }
.cx-faq details:last-child { border-bottom: 1px solid var(--rule); }
.cx-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none; font-family: 'Bree Serif', serif; font-size: 22px; line-height: 1.3; }
.cx-faq summary::-webkit-details-marker { display: none; }
.cx-faq summary::after { content: '+'; flex: none; font-family: 'DM Sans', sans-serif; font-size: 26px; font-weight: 300; color: var(--text-3); transition: transform .2s; }
.cx-faq details[open] summary::after { transform: rotate(45deg); }
.cx-faq details p { margin: 0 0 24px; font-size: 17px; line-height: 1.65; color: var(--text-2); max-width: 46em; }

/* Events */
.cx-event { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 24px 40px; align-items: start; padding: 32px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.cx-event .cx-when b { display: block; font-family: 'Bree Serif', serif; font-weight: 400; font-size: 44px; line-height: 1; }
.cx-event .cx-when span { display: block; margin-top: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.cx-event + .cx-event { border-top: 0; }
.cx-none { font-size: 18px; color: var(--text-2); margin: 32px 0 0; }
.cx-event h3 { font-family: 'Bree Serif', serif; font-weight: 400; font-size: 30px; margin: 0; }
.cx-event p { font-size: 16px; color: var(--text-3); margin: 6px 0 0; }
.cx-event ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cx-event li { font-size: 17px; }
.cx-event li time { display: inline-block; width: 72px; font-family: 'IBM Plex Mono', monospace; font-size: 13.5px; color: var(--text-3); }

/* Teach */
.cx-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin: 0; padding: 0; list-style: none; counter-reset: st; }
.cx-steps li { padding-top: 22px; border-top: 1px solid var(--text); }
.cx-steps li::before { counter-increment: st; content: '0' counter(st); display: block; font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--text-3); margin-bottom: 14px; }
.cx-steps p { font-size: 17px; line-height: 1.6; color: var(--text-2); margin: 10px 0 0; }
.cx-res { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; margin-top: 32px; }
.cx-res div { padding: 22px 0; border-top: 1px solid var(--rule); }
.cx-res p { font-size: 16px; line-height: 1.55; color: var(--text-2); margin: 8px 0 0; }


@media (max-width: 1000px) {
  .cx-hero-home { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px 48px; }
  .cx-plans.cx-plans-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(12, auto); row-gap: 16px; }
  .cx-stories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-fn { grid-template-columns: repeat(5, minmax(150px, 1fr)); overflow-x: auto; scrollbar-width: none; }
  .cx-slide { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .cx-slide-pic { flex: none; aspect-ratio: 16 / 10; }
  .cx-ask { grid-template-columns: minmax(0, 1fr); }
  .cx-acts { grid-template-columns: minmax(0, 1fr); }
  .cx-acts > div + div { padding: 28px 0 0; border-left: 0; border-top: 1px solid var(--paper-rule); }
  .cx-lesson { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .cx-week { grid-template-columns: repeat(5, minmax(150px, 1fr)); overflow-x: auto; padding-bottom: 6px; }
  .cx-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-marks { grid-template-columns: minmax(0, 1fr); }
  .cx-names { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-event { grid-template-columns: 160px minmax(0, 1fr); }
  .cx-event .cx-btn { grid-column: 2; justify-self: start; }
}
@media (max-width: 760px) {
  .cx-tabs-name, .cx-tabs .cx-btn { display: none; }
  .cx-form { grid-template-columns: minmax(0, 1fr); }
  .cx-q-row, .cx-q-grid { grid-template-columns: minmax(0, 1fr); }
  .cx-q-actions { grid-template-columns: minmax(0, 1fr); }
  .cx-q-actions .cx-btn { width: 100%; }
  .cx-q-or { text-align: center; }
  .cx-q-card { align-items: flex-start; }
  .cx-q-checks label { grid-template-columns: 22px minmax(0, 1fr); row-gap: 2px; }
  .cx-q-checks small { grid-column: 2; white-space: normal; }
  .cx-form .cx-btn { justify-self: stretch; }
  .cx-tabs-in { gap: 0; height: 50px; }
  .cx-tabs nav { margin: 0 -12px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent 100%); }
  .cx-tabs nav a { height: 50px; }
  .cx-sec { padding: 80px 0; }
  .cx-hero { padding: 64px 0 72px; }
  .cx-hero h1 { font-size: 54px; }
  .cx-hero-sm h1 { font-size: 46px; }
  .cx-tag { font-size: 24px; }
  .cx-lede, .cx-free, .cx-sub { font-size: 17px; }
  .cx-sources { display: flex; gap: 10px; margin: 32px -24px 0; padding: 0 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 24px; scrollbar-width: none; }
  .cx-today { padding: 4px 16px 6px; }
  .cx-today li { grid-template-columns: 56px minmax(0, 1fr); }
  .cx-today .cx-assign { display: none; }
  .cx-today img { width: 56px; height: 44px; }
  .cx-fn { grid-template-columns: minmax(0, 1fr); gap: 0; overflow: visible; counter-reset: fn; }
  .cx-fn button { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 12px 0; }
  .cx-fn button span { flex-basis: 100%; }
  .cx-acts { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; scrollbar-width: none; }
  .cx-acts > div { flex: 0 0 100%; box-sizing: border-box; padding: 0 20px !important; border: 0 !important; scroll-snap-align: start; }
  .cx-sources::-webkit-scrollbar { display: none; }
  .cx-sources figure { flex: 0 0 240px; scroll-snap-align: start; }
  .cx-problem-a { font-size: 27px; line-height: 1.25; }
  .cx-hero-home { grid-template-columns: minmax(0, 1fr); padding-top: 48px; }
    .cx-band { padding: 80px 0; }
  .cx-plans .is-key { order: -1; }
  .cx-marks { gap: 12px; }
  .cx-marks div { font-size: 11.5px; }
  .cx-marks img { height: 16px; }
  .footer .container { padding-left: 24px !important; padding-right: 24px !important; }
  .cx ~ .footer .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 24px 20px !important; }
  .cx ~ .footer .footer-col:first-child, .cx ~ .footer .footer-col:last-child { grid-column: 1 / -1; }
  .cx-plans, .cx-plans.cx-plans-4 { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 16px; }
  .cx-plan { grid-row: auto; grid-template-rows: none; }
  .cx-stories { display: flex; gap: 16px; margin-left: -24px; margin-right: -24px; padding: 0 24px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 24px; scrollbar-width: none; }
  .cx-stories::-webkit-scrollbar { display: none; }
  .cx-story { flex: 0 0 78%; scroll-snap-align: start; }
  .cx-slide-body { padding: 26px 22px 28px; }
  .cx-slide-body h3 { font-size: 25px; }
  .cx-slide-body p.cx-txt { font-size: 16px; }
  .cx-seg { display: flex; width: 100%; }
  .cx-seg button { flex: 1; padding: 0 8px; font-size: 14px; }
  .cx-paper { padding: 26px 20px; }
  .cx-lesson { grid-template-columns: minmax(0, 1fr); }
  .cx-cols, .cx-scale, .cx-grades, .cx-stats, .cx-steps, .cx-res { grid-template-columns: minmax(0, 1fr); }
  .cx-plans { grid-template-columns: minmax(0, 1fr); }
  .cx-names { grid-template-columns: minmax(0, 1fr); }
  .cx-names li { font-size: 21px; padding: 14px 0; }
  .cx-faq summary { font-size: 19px; }
  .cx-faq details p { font-size: 16px; }
  .cx-event { grid-template-columns: minmax(0, 1fr); }
  .cx-event .cx-btn { grid-column: 1; }
  .cx-close { padding: 80px 0; }
  .cx-marks { padding-bottom: 80px; }
}

/* the site footer on Classroom pages */
.cx ~ .footer a[href="/merch/"] { display: none; }
.cx ~ .footer .footer-login { font-family: 'DM Sans', sans-serif !important; font-size: 14px !important; }

/* Dark mode (the site default): no bright blocks on the black page (Jack, Oct 23: "the white is hard on my eyes").
   The cream band, the story card, the quiz panel and the lead plan become warm dark surfaces; light mode keeps cream. */
[data-theme="dark"] .cx { --paper: #14120F; --paper-ink: #EEE8DE; --paper-mute: #A49B8E; --paper-rule: rgba(255, 255, 255, .10); --tile: #1D1A16; --accent-ink: #F07A5A; }
[data-theme="dark"] .cx-band { border-top: 1px solid var(--paper-rule); border-bottom: 1px solid var(--paper-rule); }
[data-theme="dark"] .cx-band .cx-label, [data-theme="dark"] .cx-promise { color: var(--paper-mute); }
[data-theme="dark"] .cx-slide { background: var(--tile); color: var(--paper-ink); box-shadow: none; border: 1px solid var(--paper-rule); }
[data-theme="dark"] .cx-slide-body .cx-pos, [data-theme="dark"] .cx-cap, [data-theme="dark"] .cx-week em { color: var(--accent-ink); }
[data-theme="dark"] .cx-slide-body h3, [data-theme="dark"] .cx-slide-body strong, [data-theme="dark"] .cx-paper h4 { color: #fff; }
[data-theme="dark"] .cx-slide-body p.cx-txt { color: rgba(238, 232, 222, .85); }
[data-theme="dark"] .cx-by { color: var(--paper-mute); }
[data-theme="dark"] .cx-paper { border: 1px solid var(--paper-rule); }
[data-theme="dark"] .cx-opts li, [data-theme="dark"] .cx-two span, [data-theme="dark"] .cx-week li { background: var(--tile); border-color: var(--paper-rule); color: var(--paper-ink); }
[data-theme="dark"] .cx-opts li b { background: rgba(255, 255, 255, .08); color: var(--paper-ink); }
[data-theme="dark"] .cx-opts li.is-right { border-color: #4FA77A; }
[data-theme="dark"] .cx-opts li.is-right b { background: #2F7A52; color: #fff; }
[data-theme="dark"] .cx-key, [data-theme="dark"] .cx-lesson .cx-ok { color: #6CC495; }
[data-theme="dark"] .cx-lesson p { color: var(--paper-mute); }
[data-theme="dark"] .cx-week .cx-day { color: var(--paper-mute); border-color: var(--paper-rule); }
[data-theme="dark"] .cx-week strong { color: var(--paper-ink); }
[data-theme="dark"] .cx-plan.is-key { background: var(--tile); border: 1.5px solid var(--red); color: var(--paper-ink); }
[data-theme="dark"] .cx-plan.is-key .cx-for, [data-theme="dark"] .cx-plan.is-key li { color: rgba(238, 232, 222, .85); }
[data-theme="dark"] .cx-plan.is-key li::before { border-color: var(--accent-ink); }
[data-theme="dark"] .cx-demo { background: #0d0d0d; }