/* ═══════════════════════════════════════════════════════════════════════════
   TUTIX FOR SCHOOLS  (/enterprise)

   Built on public-pages.css, the landing page's language: a statement per
   chapter proved by one object, paper (.leaf) on the desk, one raised paper per
   chapter, hairlines for structure, white-on-blue for the one filled button, and
   teal only for the tutor acting on a learner's work (a tick, a ring, a pen
   underline, a signature). Nothing loops. Every start state that hides
   something sits under html.js-motion, which js/public-pages.js adds only when
   the visitor has not asked for reduced motion, so no-script and reduced-motion
   visitors get the finished page.

   Class prefix: en-. The pieces the page draws that the shared sheet does not:
   the staff-room desk (hero, journey), the release ledger, role views, the
   source shelf, the tutor-style simulator, the term board, the past-paper page,
   the seating plan, the workspace preview, the permissions ledger, the budget
   ledger, the estimator, the full index and the enquiry form.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ============================ art tokens ============================ */
/* The house illustration hand (static/img/illustrations), as tokens, so artwork
   drawn inline turns dark with the page. Light values are the drawings' own;
   dark values are scripts/build_illustration_dark.py's repaint. The accents and
   the one blue dot do not change between modes. */
.page-enterprise{
  --en-ink:#3a332b; --en-paper:#fdfaf3; --en-mute:#c9beac; --en-fill:#e6e1da; --en-wash:#f3e4d6; --en-twine:#8a7a63;
  --en-clay:#c17a52; --en-rust:#a35f3c; --en-wood:#b56b43; --en-taupe:#a89a85;
  --en-sage:#8ba57f; --en-sage-deep:#5a7052; --en-ochre:#d4a054;
}
:root[class~="dark"] .page-enterprise{
  --en-ink:#e6dccb; --en-paper:#3d352c; --en-mute:#8c8171; --en-fill:#54493d; --en-wash:#58453a; --en-twine:#9c8b72;
}
@media (prefers-color-scheme:dark){
  :root:not([class~="cls-light"]) .page-enterprise{
    --en-ink:#e6dccb; --en-paper:#3d352c; --en-mute:#8c8171; --en-fill:#54493d; --en-wash:#58453a; --en-twine:#9c8b72;
  }
}

/* ============================ shared pieces ============================ */
.en-face{display:block;flex:none;border-radius:31%;background:var(--cls-tray)}
/* the school's monogram: a quiet near-black square, never a brand colour */
.en-crest{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:var(--cls-r-sm);background:var(--cls-ink);color:var(--cls-ground);
  font-size:12px;font-weight:700;letter-spacing:.02em;line-height:1}
/* sample data, in small type, wherever a made-up classroom is drawn */
.en-sample{display:inline-flex;align-items:center;min-height:20px;padding:0 8px;border-radius:var(--cls-pill);border:1px solid var(--cls-line-2);background:transparent;
  font-size:11.5px;font-weight:500;line-height:1;color:var(--cls-ink-3);white-space:nowrap;vertical-align:1px}
/* a short fact the paper offers to open */
.en-chip{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 12px;border-radius:var(--cls-pill);background:var(--cls-leaf);border:1px solid var(--cls-line-2);
  font-size:13px;font-weight:600;line-height:1;color:var(--cls-ink-2);white-space:nowrap}
.en-chip svg{width:14px;height:14px;color:var(--cls-ink-3);flex:none}
.en-chip{cursor:default;user-select:none}
summary .en-chip{cursor:pointer}
/* a task's state inside a sample (done, next, not started): a ring in neutral ink, never the coloured dots that mean a feature's release state */
.ts{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;line-height:1.2;color:var(--cls-ink-2);white-space:nowrap}
.ts::before{content:"";box-sizing:border-box;flex:none;width:11px;height:11px;border-radius:50%;border:1.6px solid var(--cls-ink-3)}
.ts--done::before{background:var(--cls-ink-3)}
.ts--doing::before{background:conic-gradient(var(--cls-ink-3) 0 50%,transparent 0)}
.ts--todo::before{border-style:dashed}
/* a feature's state: a word, with a dot that repeats it */
.st--available{color:var(--cls-green-ink)}
.st--available::before,.st--soon::before{content:"";width:7px;height:7px;border-radius:50%;flex:none}
.st--available::before{background:var(--cls-green)}
.st--soon{color:var(--cls-blue-deep)}
.st--soon::before{background:var(--cls-blue)}
/* a pen underline under a short run of words, and a ring around a short figure */
.en-under{position:relative;display:inline-block;white-space:nowrap}
.en-underline{position:absolute;left:-2px;width:calc(100% + 4px);bottom:-6px;height:10px;overflow:visible;pointer-events:none;max-width:none}
.en-underline .ink{stroke-width:2.2}
.en-ring{position:absolute;left:-10px;top:-8px;width:calc(100% + 20px);height:calc(100% + 16px);overflow:visible;pointer-events:none;max-width:none}
.en-ring .ink{stroke-width:2}
.en-struck{position:relative;display:inline-block;white-space:nowrap;text-decoration:none}
ins.en-fix{text-decoration:none}
.en-strikeline{position:absolute;left:-2px;top:50%;width:calc(100% + 4px);height:12px;margin-top:-6px;overflow:visible;pointer-events:none;max-width:none}
.en-strikeline .ink{stroke-width:2.2}
/* definition rows inside a paper: a short label, then its value on a hairline */
.en-kv{margin:16px 0 0;border-top:1px solid var(--cls-line)}
.en-kv > div{display:grid;grid-template-columns:5.2em minmax(0,1fr);gap:0 14px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--cls-line)}
.en-kv > div:last-child{border-bottom:0;padding-bottom:0}
.en-kv dt{font-size:12.5px;font-weight:500;line-height:1.4;color:var(--cls-ink-3)}
.en-kv dd{margin:0;font-size:14.5px;line-height:1.4;color:var(--cls-ink)}
.en-kv__stack{display:grid;gap:3px}
.en-kv__tutor{display:flex;align-items:center;gap:9px}
/* a ruled list of features, each with its honest state */
.en-feats{list-style:none;margin:0;padding:0;border-top:1px solid var(--cls-line-2)}
.en-feats li{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--cls-line-2);font-size:15.5px;line-height:1.4;color:var(--cls-ink-2)}
.en-feats .st{flex:none}

/* ============================ the live class (hero) ============================ */
.en-hero{padding-block:clamp(40px,5vw,80px) clamp(72px,8vw,120px)}
.en-hero__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,5vw,88px);align-items:center}
.en-hero__copy{align-self:center}
.en-hero__lead2{margin-top:14px}
.en-hero__state{max-width:48ch;margin-top:26px;font-size:14px;line-height:1.55;color:var(--cls-ink-3)}
.en-hero__state .st{margin-right:10px;vertical-align:baseline}
.en-hero__room{min-width:0;width:100%;max-width:660px;margin:0 0 0 auto}
.en-hero__tag{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:14px;font-size:13px;color:var(--cls-ink-3)}
/* what the tutor does, in three short lines: ruled, not carded */
.en-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3vw,48px);margin:clamp(40px,5vw,72px) 0 0;padding:0;list-style:none;border-top:1px solid var(--cls-line-2)}
.en-three li{padding-top:22px;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-content:start}
.en-three__ic{grid-row:1 / span 2;display:grid;place-items:center;width:40px;height:40px;border-radius:var(--cls-r-sm);background:var(--cls-tray);color:var(--cls-ink-2)}
.en-three__h{margin:0;font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.3;color:var(--cls-ink)}
.en-three p{margin:6px 0 0;font-size:15px;line-height:1.55;color:var(--cls-ink-3)}
@media (max-width:899px){
  .en-hero__grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .en-hero__room{margin:0;max-width:none}
  .en-three{grid-template-columns:minmax(0,1fr);margin-top:36px}
  .en-three li{padding-block:20px;border-bottom:1px solid var(--cls-line)}
  .en-three li:last-child{border-bottom:0}
}
.en-brief__text{margin-top:16px;font-size:17px;line-height:1.55;color:var(--cls-ink)}
.en-brief__foot{margin-top:18px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 12px}
.en-brief__foot .sig{display:block;height:44px;width:auto}
.signoff{display:block;margin:0;flex:none}
/* ============================ chapter index ============================ */
.en-index{position:sticky;top:var(--mk-chrome);z-index:40;background:var(--cls-ground);border-block:1px solid var(--cls-line)}
.en-index__in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:52px}
.en-index__list{list-style:none;margin:0;padding:0;display:flex;gap:4px;min-width:0;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.en-index__list::-webkit-scrollbar{display:none}
.en-index__list a{position:relative;display:inline-flex;align-items:center;min-height:52px;padding:0 14px;font-size:14px;font-weight:500;line-height:1;color:var(--cls-ink-3);text-decoration:none;white-space:nowrap;
  transition:color var(--cls-dur-fast) var(--cls-ease-out)}
.en-index__list a:hover{color:var(--cls-ink)}
.en-index__list a[aria-current]{color:var(--cls-ink);font-weight:600}
.en-index__list a[aria-current]::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--cls-ink)}
.en-index__list li:first-child a{padding-left:0}
.en-index__list li:first-child a[aria-current]::after{left:0}
.en-index__go{flex:none;min-height:52px}
.en-index__reg{display:none}
/* the focus ring stays inside the scrolling list, where an outer one would be clipped */
.en-index__list a:focus-visible{box-shadow:var(--cls-focus-inset)}
/* the bar is 54px with its borders: a link lands the chapter's first line clear of it, and the FAQ heading sticks under it */
.lp.page-enterprise .ch[id]:not(.ch--coda){scroll-margin-top:calc(-1 * var(--mk-section) + 54px)}
.en-faq .faq__head{top:calc(var(--mk-chrome) + 54px + var(--mk-sticky-gap))}
/* where the list scrolls sideways, its right edge fades instead of cutting a word in half */
@media (max-width:899px){
  .en-index__list{padding-right:28px;-webkit-mask-image:linear-gradient(to right,var(--cls-ink) calc(100% - 28px),transparent);mask-image:linear-gradient(to right,var(--cls-ink) calc(100% - 28px),transparent)}
}
/* a short window (a phone on its side, a page zoomed to 400%) cannot spare two sticky bars */
@media (max-height:560px){.en-index{position:static}}
/* a chapter's own breathing room, a little tighter than the landing's, on a page this long */
.page-enterprise{--mk-section:clamp(72px,calc(4vw + 48px),112px)}

/* ============================ responsive: hero and index ============================ */
@media (max-width:899px){
  .en-hero__grid{grid-template-columns:minmax(0,1fr)}
  .en-desk{margin-inline:auto}
}
@media (max-width:640px){
  .en-index__go{display:none}
  .en-index__reg{display:list-item}
}

/* ============================ one lesson (pinned scene) ============================ */
.en-journey{--en-top:calc(var(--mk-chrome) + 52px)}
.en-scene{position:relative;margin-top:clamp(40px,4.5vw,64px)}
.en-stage{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:center}
.en-steps{list-style:none;margin:0;padding:0;position:relative}
.en-steps::before{content:"";position:absolute;left:15.5px;top:18px;bottom:34px;width:1px;background:var(--cls-line-2)}
.en-steps li{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);gap:0 20px;padding-bottom:clamp(24px,4vh,40px)}
.en-steps li:last-child{padding-bottom:0}
.en-steps__n{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--cls-ground);border:1px solid var(--cls-line-2);
  font-size:13px;font-weight:600;line-height:1;color:var(--cls-ink-3);font-variant-numeric:tabular-nums;transition:background-color var(--cls-dur) var(--cls-ease-out),color var(--cls-dur) var(--cls-ease-out),border-color var(--cls-dur) var(--cls-ease-out)}
.en-steps h3{font-size:var(--mk-d4);font-weight:var(--mk-w-solid);line-height:1.2;letter-spacing:var(--mk-track-d4);color:var(--cls-ink);transition:color var(--cls-dur) var(--cls-ease-out)}
.en-steps p{margin-top:8px;max-width:40ch;font-size:16px;line-height:1.55;color:var(--cls-ink-2);transition:color var(--cls-dur) var(--cls-ease-out)}
/* while pinned, the step being read is the only one at full strength */
.en-scene.is-pinned .en-steps li:not([aria-current="step"]) h3{color:var(--cls-ink-3)}
.en-scene.is-pinned .en-steps li:not([aria-current="step"]) p{color:var(--cls-ink-3)}
.en-steps li[aria-current="step"] .en-steps__n{background:var(--cls-ink);border-color:var(--cls-ink);color:var(--cls-ground)}

.en-lesson{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start;padding:clamp(16px,2vw,28px);border-radius:var(--mk-r-media);background:var(--cls-sunk);border:1px solid var(--cls-line)}
.en-pp{position:relative;padding:clamp(16px,1.6vw,20px);font-size:14px;line-height:1.5;color:var(--cls-ink-2);transform:rotate(var(--rot,0deg))}
.en-pp:nth-child(even){margin-top:24px}
.en-pp .lh__name{font-size:14.5px}
.en-pp .en-kv{margin-top:12px}
.en-pp .en-kv > div{padding:8px 0;grid-template-columns:4.4em minmax(0,1fr);gap:0 10px}
.en-pp .en-kv dt{font-size:12px}
.en-pp .en-kv dd{font-size:14px}
.en-pp .en-kv > div.en-kv__wide{grid-template-columns:minmax(0,1fr);gap:4px}
.en-srcs{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:5px}
.en-srcs li{display:flex;align-items:baseline;justify-content:space-between;gap:10px;color:var(--cls-ink)}
.en-srcs i{display:inline-flex;align-items:center;gap:5px;font-style:normal;font-size:12px;font-weight:600;color:var(--cls-ink-3);white-space:nowrap}
.en-srcs i::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cls-ink-3);flex:none}
/* the practice conversation: the tutor's turns on paper, the learner's in the blue fill with white ink */
.en-talk{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.en-talk li{max-width:88%;padding:9px 13px;border-radius:14px;font-size:14.5px;line-height:1.4}
.en-talk__tutor{justify-self:start;border-top-left-radius:5px;background:var(--cls-tray);border:1px solid var(--cls-line);color:var(--cls-ink)}
.en-talk__me{justify-self:end;border-top-right-radius:5px;background:var(--cls-blue);border:1px solid var(--cls-blue-deep);color:var(--cls-on-lead);font-variant-numeric:tabular-nums}
/* a marked page: the student's working in ink, the tutor's marks in the tutor's */
.en-marked__top{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;font-weight:600;line-height:1.3;color:var(--cls-ink-3)}
.en-marked__q{margin-top:10px;font-size:15.5px;font-weight:600;line-height:1.35;color:var(--cls-ink)}
.en-marked__work{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:0;margin-top:16px;padding:16px 74px 16px 16px;border:1px solid var(--cls-line-2);border-radius:var(--cls-r-sm);background:var(--cls-panel);
  font-size:19px;line-height:1.3;color:var(--cls-ink);font-variant-numeric:tabular-nums;white-space:pre}
.en-fix{margin-left:11px;color:var(--cls-teal-ink);font-weight:500}
.en-marked__score{position:absolute;right:14px;top:50%;display:grid;place-items:center;width:44px;height:32px;margin-top:-16px;font-size:15.5px;font-weight:700;line-height:1;color:var(--cls-teal-ink);white-space:normal}
.en-marked__note{margin-top:14px;font-size:14px;line-height:1.45}
.en-marked__meta{margin-top:12px;font-size:12.5px;line-height:1.4;color:var(--cls-ink-3)}
/* the brief's counted figures: numbers, not readings */
.en-counted{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:16px 0 0;border-block:1px solid var(--cls-line)}
.en-counted > div{min-width:0;padding:11px 10px 11px 0}
.en-counted > div + div{padding-left:12px;border-left:1px solid var(--cls-line)}
.en-counted dt{font-size:11.5px;font-weight:500;line-height:1.3;color:var(--cls-ink-3)}
.en-counted dd{margin:3px 0 0;font-size:13px;line-height:1.2;color:var(--cls-ink-3);white-space:nowrap}
.en-counted b{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--cls-ink);font-variant-numeric:tabular-nums}
.en-pp--brief .en-brief__text{margin-top:14px;font-size:15.5px;line-height:1.5}
.en-pp--brief .en-brief__foot{margin-top:14px}
.en-pp--brief .en-brief__foot .sig{height:38px}

/* pinned: the papers land one by one as the steps are read (js sets data-step) */
.en-scene.is-pinned{height:calc(100svh + 85svh)}
.en-scene.is-pinned .en-stage{position:sticky;top:calc(var(--en-top) + 12px);height:calc(100svh - var(--en-top) - 24px);align-content:center}
/* a short screen scales the desk to fit instead of cutting it off (js sets --en-fit, never below .84) */
.en-scene.is-pinned .en-lesson{zoom:var(--en-fit,1)}
html.js-motion .en-scene.is-pinned .en-pp{opacity:0;transform:translateY(34px) rotate(calc(var(--rot,0deg) + 1.2deg));
  transition:opacity var(--mk-dur-fade) var(--mk-ease),transform var(--mk-dur-rise) var(--mk-ease-rise)}
html.js-motion .en-scene.is-pinned:not(.is-single)[data-step="1"] .en-pp[data-n="1"],
html.js-motion .en-scene.is-pinned:not(.is-single)[data-step="2"] .en-pp:is([data-n="1"],[data-n="2"]),
html.js-motion .en-scene.is-pinned:not(.is-single)[data-step="3"] .en-pp:is([data-n="1"],[data-n="2"],[data-n="3"]),
html.js-motion .en-scene.is-pinned:not(.is-single)[data-step="4"] .en-pp{opacity:1;transform:rotate(var(--rot,0deg))}
/* the empty desk is not empty: each paper has a dashed slot until it lands (the full desk only) */
.en-slot{display:none}
html.js-motion .en-scene.is-pinned:not(.is-single) .en-pp--plan{grid-area:1 / 1}
html.js-motion .en-scene.is-pinned:not(.is-single) .en-pp--chat{grid-area:1 / 2}
html.js-motion .en-scene.is-pinned:not(.is-single) .en-pp--marked{grid-area:2 / 1}
html.js-motion .en-scene.is-pinned:not(.is-single) .en-pp--brief{grid-area:2 / 2}
html.js-motion .en-scene.is-pinned:not(.is-single) .en-slot{display:block;align-self:stretch;border:1.5px dashed var(--cls-line-2);border-radius:var(--cls-r);pointer-events:none;transition:opacity var(--mk-dur-fade) var(--mk-ease)}
html.js-motion .en-scene.is-pinned:not(.is-single) .en-slot--1{grid-area:1 / 1}
html.js-motion .en-scene.is-pinned:not(.is-single) .en-slot--2{grid-area:1 / 2;margin-top:24px}
html.js-motion .en-scene.is-pinned:not(.is-single) .en-slot--3{grid-area:2 / 1}
html.js-motion .en-scene.is-pinned:not(.is-single) .en-slot--4{grid-area:2 / 2;margin-top:24px}
html.js-motion .en-scene.is-pinned:not(.is-single):is([data-step="1"],[data-step="2"],[data-step="3"],[data-step="4"]) .en-slot--1,
html.js-motion .en-scene.is-pinned:not(.is-single):is([data-step="2"],[data-step="3"],[data-step="4"]) .en-slot--2,
html.js-motion .en-scene.is-pinned:not(.is-single):is([data-step="3"],[data-step="4"]) .en-slot--3,
html.js-motion .en-scene.is-pinned:not(.is-single)[data-step="4"] .en-slot--4{opacity:0}
/* a shorter screen: one paper on the pinned desk at a time, each step's replacing the last */
.en-scene.is-single .en-lesson{display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:clamp(24px,3vw,44px)}
.en-scene.is-single .en-pp{grid-area:1 / 1;width:min(100%,460px);margin:0}
html.js-motion .en-scene.is-pinned.is-single .en-pp{opacity:0;transform:translateY(26px) rotate(calc(var(--rot,0deg) + 1deg));pointer-events:none}
html.js-motion .en-scene.is-pinned.is-single[data-step="1"] .en-pp[data-n="1"],
html.js-motion .en-scene.is-pinned.is-single[data-step="2"] .en-pp[data-n="2"],
html.js-motion .en-scene.is-pinned.is-single[data-step="3"] .en-pp[data-n="3"],
html.js-motion .en-scene.is-pinned.is-single[data-step="4"] .en-pp[data-n="4"]{opacity:1;transform:rotate(var(--rot,0deg));pointer-events:auto}
@media (max-width:999px){
  .en-stage{grid-template-columns:minmax(0,1fr)}
  .en-lesson{grid-template-columns:minmax(0,1fr)}
  .en-pp:nth-child(even){margin-top:0}
  .en-pp{transform:none}
}

/* ============================ three people, one lesson (under the pinned lesson) ============================ */
.en-people{margin-top:clamp(72px,8vw,120px)}
.en-people > h3{max-width:20ch}
.en-people .en-trio{margin-top:clamp(28px,3.5vw,44px)}
.en-who{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--cls-ink-2)}
.en-who b{font-weight:600;color:var(--cls-ink)}
.en-seg button[aria-checked="true"]:focus-visible,.en-filter button[aria-pressed="true"]:focus-visible{box-shadow:var(--cls-focus),var(--cls-raise),var(--cls-lit)}

/* ============================ teaching: four decisions ============================ */
.en-teach .mk-head{margin-bottom:clamp(36px,4.5vw,64px)}
.en-sub{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,104px);align-items:center;padding-block:clamp(40px,5vw,72px);border-top:1px solid var(--cls-line-2)}
.en-sub--rev{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
@media (min-width:900px){.en-sub--rev > .en-sub__words{order:2}}
.en-sub__words > .mk-copy{margin-top:14px}
.en-sub__words > .en-more{margin-top:24px}
.en-sub__object{min-width:0}
.en-feats li{padding:11px 0;font-size:15px}

/* the house hand, drawn inline: every colour is an art token, so it turns dark with the page */
.en-art{display:block;width:100%;height:auto;overflow:visible}
.en-art .a-shadow{fill:var(--en-fill);opacity:.6}
.en-art :is(.a-wood,.a-wood2,.a-back,.a-paper,.a-sage,.a-ochre,.a-taupe,.a-rust,.a-label){stroke:var(--en-ink);stroke-width:2;stroke-linejoin:round}
.en-art .a-wood{fill:var(--en-clay)}
.en-art .a-wood2{fill:var(--en-wood)}
.en-art .a-back{fill:var(--en-fill);stroke-width:1.6}
.en-art .a-paper{fill:var(--en-paper)}
.en-art .a-label{fill:var(--en-paper);stroke-width:1.5}
.en-art .a-sage{fill:var(--en-sage);stroke-width:1.8}
.en-art .a-ochre{fill:var(--en-ochre);stroke-width:1.8}
.en-art .a-taupe{fill:var(--en-taupe);stroke-width:1.8}
.en-art .a-rust{fill:var(--en-rust);stroke-width:1.8}
.en-art .a-mute{fill:none;stroke:var(--en-mute);stroke-width:1.6;stroke-linecap:round}
.en-art .a-rail{fill:none;stroke:var(--en-ink);stroke-width:1.6}
.en-art .a-stamp{fill:none;stroke:var(--en-sage-deep);stroke-width:2.2}
.en-art .a-stamp-tick{fill:none;stroke:var(--en-sage-deep);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.en-art .a-dot{fill:var(--cls-blue)}

/* sources: the shelf, and an answer that cites it */
.en-sub__object:has(.en-art--shelf){position:relative;container-type:inline-size}
.en-art--shelf{width:68cqw;max-width:440px}
.en-qa{position:relative;width:min(68cqw,430px);margin:calc(-1 * min(13cqw,100px)) 0 0 auto}
.en-qa__tag{justify-self:start;margin-bottom:-2px}
.en-qa__paper{display:grid;gap:12px;padding:20px 22px}
.en-qa__me{justify-self:end;max-width:86%;padding:9px 13px;border-radius:14px;border-top-right-radius:5px;background:var(--cls-blue);border:1px solid var(--cls-blue-deep);color:var(--cls-on-lead);font-size:14.5px;line-height:1.4}
.en-qa__tutor{display:flex;align-items:flex-start;gap:10px}
.en-qa__tutor > div{padding:10px 13px;border-radius:14px;border-top-left-radius:5px;background:var(--cls-tray);border:1px solid var(--cls-line);font-size:14.5px;line-height:1.45;color:var(--cls-ink)}
.en-src-chip{display:inline-flex;align-items:center;gap:7px;margin-top:8px;min-height:28px;padding:6px 10px;border-radius:var(--cls-r-sm);background:var(--cls-sunk);border:1px solid var(--cls-line);
  font-size:12.5px;font-weight:600;line-height:1.25;color:var(--cls-ink-2)}
.en-src-chip svg{width:14px;height:14px;color:var(--cls-ink-3);flex:none}
.en-src-chip--gap{background:color-mix(in srgb,var(--cls-amber) 14%,var(--cls-leaf));border-color:color-mix(in srgb,var(--cls-amber) 40%,var(--cls-leaf));color:var(--cls-amber-ink)}
.en-src-chip--gap svg{color:var(--cls-amber-ink)}

/* teaching style: a simulator */
.en-studio{padding:0;max-width:600px}
.en-studio__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:16px 22px;border-bottom:1px solid var(--cls-line)}
.en-who > span:last-child{color:var(--cls-ink-3);font-size:13px}
.en-studio__row{padding:18px 22px 0}
.en-studio__lbl{margin-bottom:9px;font-size:12.5px;font-weight:500;line-height:1.3;color:var(--cls-ink-3)}
.en-seg[hidden]{display:none}
.en-seg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--cls-pill);background:var(--cls-sunk);border:1px solid var(--cls-line-2);max-width:100%}
.en-seg button{min-height:36px;padding:0 14px;border:0;border-radius:var(--cls-pill);background:transparent;color:var(--cls-ink-3);font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background-color var(--cls-dur-fast) var(--cls-ease-out),color var(--cls-dur-fast) var(--cls-ease-out)}
.en-seg button:hover{color:var(--cls-ink)}
.en-seg button[aria-checked="true"]{background:var(--cls-leaf);color:var(--cls-ink);box-shadow:var(--cls-raise),var(--cls-lit)}
@media (pointer:coarse){.en-seg button{min-height:44px}.en-evidence > summary .en-chip{min-height:44px}.en-range{height:44px}}
.en-sim{display:grid;gap:12px;margin:16px 22px 0;padding:16px;border-radius:var(--cls-r-sm);background:var(--cls-tray);border:1px solid var(--cls-line)}
.en-sim__me{justify-self:end;max-width:88%;padding:9px 13px;border-radius:14px;border-top-right-radius:5px;background:var(--cls-blue);border:1px solid var(--cls-blue-deep);color:var(--cls-on-lead);font-size:14.5px;line-height:1.4}
.en-sim__tutor{display:flex;align-items:flex-start;gap:10px;min-height:7.6em}
.en-sim__tutor p{max-width:92%;padding:9px 13px;border-radius:14px;border-top-left-radius:5px;background:var(--cls-leaf);border:1px solid var(--cls-line);font-size:14.5px;line-height:1.45;color:var(--cls-ink)}
.en-sim__tutor p[hidden]{display:none}
.en-sim__tutor b{font-weight:600}
.en-rules{margin:16px 0 0;border-top:1px solid var(--cls-line)}
.en-rules > div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:11px 22px;border-bottom:1px solid var(--cls-line);font-size:14px}
.en-rules > div:last-child{border-bottom:0;padding-bottom:16px}
.en-rules dt{color:var(--cls-ink-3)}
.en-rules dd{margin:0;font-weight:600;color:var(--cls-ink)}

/* the term board */
.en-term{padding:0;max-width:640px}
.en-term__head{padding:18px 22px;border-bottom:1px solid var(--cls-line)}
.en-weeks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--cls-line)}
.en-weeks li{display:grid;align-content:start;gap:4px;padding:14px 16px;border-left:1px solid var(--cls-line)}
.en-weeks li:first-child{border-left:0}
.en-weeks span{font-size:12px;font-weight:500;color:var(--cls-ink-3)}
.en-weeks b{font-size:14px;font-weight:600;line-height:1.25;color:var(--cls-ink-3)}
.en-weeks li.is-open{background:var(--cls-panel);box-shadow:inset 0 -2px 0 var(--cls-ink)}
.en-weeks li.is-open b{color:var(--cls-ink)}
.en-slips{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:30px 22px 22px}
.en-thread{position:absolute;left:22px;top:11px;width:calc(100% - 44px);height:14px;overflow:visible;pointer-events:none;max-width:none}
.en-thread .ink{stroke-width:1.8}
.en-slip{display:grid;gap:3px;align-content:start;padding:12px 12px 14px;border-radius:var(--cls-r-sm);background:color-mix(in srgb,var(--cls-teal) 8%,var(--cls-leaf));border:1px solid color-mix(in srgb,var(--cls-teal) 24%,var(--cls-line))}
.en-slip span{font-size:11.5px;font-weight:600;line-height:1.2;color:var(--cls-teal-ink)}
.en-slip b{font-size:15px;font-weight:600;line-height:1.2;color:var(--cls-ink)}
.en-slip i{font-style:normal;font-size:12.5px;line-height:1.3;color:var(--cls-ink-3)}
.en-slip--gap{background:transparent;border-style:dashed;border-color:var(--cls-line-hover)}
html.js-motion .en-term:not(.is-drawn) .en-slip{opacity:0;transform:translateY(8px)}
html.js-motion .en-term.is-drawn .en-slip{opacity:1;transform:none;transition:opacity 520ms var(--mk-ease) calc(var(--i,0) * 110ms + 250ms),transform 640ms var(--mk-ease-rise) calc(var(--i,0) * 110ms + 250ms)}
.en-term__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 22px;border-top:1px solid var(--cls-line);font-size:13.5px;color:var(--cls-ink-2)}

/* a marked past paper beside its mark scheme */
.en-exam{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:start}
.en-exam__page{position:relative;padding:20px 22px 28px;font-size:14px}
.en-exam__lines{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.en-exam__lines li{position:relative;display:flex;align-items:center;gap:6px;padding:10px 12px;border:1px solid var(--cls-line-2);border-radius:var(--cls-r-sm);background:var(--cls-panel);font-size:16.5px;color:var(--cls-ink);font-variant-numeric:tabular-nums}
.en-exam__lines li > span{white-space:pre}
.en-exam__lines .tick{margin-left:auto}
.en-exam__mark{margin-left:auto;font-size:13px;font-weight:700;color:var(--cls-teal-ink)}
.en-fix--sm{margin-left:9px;font-size:inherit}
.en-nb{white-space:nowrap}
.en-exam__total{position:absolute;right:18px;bottom:16px;display:grid;place-items:center;width:52px;height:34px;margin:0;font-size:16px;font-weight:700;line-height:1;color:var(--cls-teal-ink)}
.en-exam .en-marked__note{margin-top:14px;padding-right:70px}
.en-scheme{padding:18px 18px 16px;font-size:14px}
.en-scheme__h{font-size:13px;font-weight:600;color:var(--cls-ink)}
.en-scheme ul{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--cls-line)}
.en-scheme li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:3px 8px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--cls-line)}
.en-scheme li b{font-size:12.5px;font-weight:700;color:var(--cls-ink-3)}
.en-scheme li span{color:var(--cls-ink-2);line-height:1.35}
.en-scheme li i{grid-column:2;font-style:normal}
.en-scheme__f{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;font-size:12.5px;color:var(--cls-ink-3)}

@media (max-width:640px){.en-sub{padding-block:40px}}
@media (max-width:899px){
  .en-sub,.en-sub--rev{grid-template-columns:minmax(0,1fr)}
  .en-sub__words{order:-1}
  .en-exam{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .en-sub__object:has(.en-art--shelf){display:grid;gap:16px}
  .en-art--shelf{width:100%}
  .en-qa{width:100%;margin:0}
  .en-weeks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .en-weeks li:nth-child(3){border-left:0}
  .en-weeks li:nth-child(n+3){border-top:1px solid var(--cls-line)}
  .en-slips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .en-slip:last-child{grid-column:1 / -1}
  .en-thread{display:none}
  .en-studio__head,.en-term__head,.en-term__foot{padding-inline:18px}
  .en-studio__row{padding-inline:18px}
  .en-sim{margin-inline:18px}
  .en-rules > div{padding-inline:18px}
  .en-seg button{padding:0 11px;font-size:13px}
}

/* ============================ insights: counted, and read ============================ */
.en-insights .mk-headrow{align-items:end}
.en-idesk{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:22px clamp(20px,3vw,40px);align-items:start;margin-top:clamp(40px,4.5vw,64px)}
.en-idesk__col{display:grid;gap:22px;min-width:0;align-content:start}
.en-map{padding:22px}
.en-map__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
.en-map__title{font-size:15.5px;font-weight:600;line-height:1.3;color:var(--cls-ink)}
.en-map__meta{font-size:12.5px;color:var(--cls-ink-3)}
.en-map__board{margin:16px 0 14px;padding:7px 0;border-radius:7px;background:var(--cls-tray);border:1px solid var(--cls-line);text-align:center;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--cls-ink-3)}
.en-seats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.en-seat{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:var(--cls-r-sm);background:var(--cls-leaf);border:1px solid var(--cls-line-2);font-size:12px;font-weight:600;color:var(--cls-ink-2)}
.en-seat.is-none{background:transparent;border-style:dashed;color:var(--cls-ink-3)}
.en-seat.is-flag{background:color-mix(in srgb,var(--cls-teal) 10%,var(--cls-leaf));border-color:color-mix(in srgb,var(--cls-teal) 32%,var(--cls-line-2));color:var(--cls-teal-ink)}
.en-seat .en-ring{left:-6px;top:-5px;width:calc(100% + 12px);height:calc(100% + 10px)}
.en-seat .en-ring .ink{stroke-width:1.7}
.en-map__key{display:flex;flex-wrap:wrap;gap:8px 18px;margin:18px 0 0;padding:14px 0 0;list-style:none;border-top:1px solid var(--cls-line);font-size:12.5px;color:var(--cls-ink-3)}
.en-map__key li{display:flex;align-items:center;gap:7px}
.en-map__key i{width:13px;height:13px;border-radius:var(--cls-pill);border:1px solid var(--cls-line-2);background:var(--cls-leaf)}
.en-map__key .k-none{background:transparent;border-style:dashed}
.en-map__key .k-flag{background:color-mix(in srgb,var(--cls-teal) 12%,var(--cls-leaf));border-color:color-mix(in srgb,var(--cls-teal) 40%,var(--cls-line-2))}
.en-map__key .ink-note{color:var(--cls-teal-ink)}
.en-brief2{position:relative;padding:22px}
.en-brief2 .en-brief__text{margin-top:14px;font-size:16.5px}
.en-evidence{margin-top:16px}
.en-evidence > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;cursor:pointer}
.en-evidence > summary::-webkit-details-marker{display:none}
.en-evidence__hint svg{display:block;color:var(--cls-ink-3);transition:transform var(--cls-dur) var(--cls-ease-out)}
.en-evidence[open] .en-evidence__hint svg{transform:rotate(180deg)}
.en-evidence__list{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--cls-line)}
.en-evidence__list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--cls-line);font-size:14px;color:var(--cls-ink-2)}
.en-evidence__list b{font-weight:600;color:var(--cls-ink)}
.en-evidence__more{color:var(--cls-ink-3);font-size:13.5px}
.en-attempt{font-size:16px;color:var(--cls-ink);font-variant-numeric:tabular-nums;white-space:pre}
.en-review{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--cls-line);font-size:13px;color:var(--cls-ink-3)}
.en-review__btns{display:inline-flex;flex-wrap:wrap;gap:8px}
.en-review .en-chip{min-height:30px;font-size:12.5px;color:var(--cls-ink-2)}
.en-brief2__sig{display:block;margin-top:10px;text-align:right}
.en-brief2__sig .sig{display:inline-block;height:40px;width:auto}
.en-counted2{padding:18px 22px}
.en-counted2__h{font-size:13px;font-weight:600;color:var(--cls-ink)}
.en-counted2 dl{margin:10px 0 0;border-top:1px solid var(--cls-line)}
.en-counted2 dl > div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--cls-line);font-size:14px;color:var(--cls-ink-2)}
.en-counted2 dd{margin:0;white-space:nowrap;color:var(--cls-ink-3)}
.en-counted2 b{font-size:17px;font-weight:700;color:var(--cls-ink);font-variant-numeric:tabular-nums}
.en-counted2__f{max-width:66ch;margin-top:12px;font-size:12.5px;color:var(--cls-ink-3)}

.en-insight-feats{margin-top:clamp(40px,5vw,64px)}
@media (max-width:899px){
  .en-idesk{grid-template-columns:minmax(0,1fr)}
  .en-insight-feats .en-feats{columns:1}
}
@media (max-width:520px){
  .en-seats{gap:7px}
  .en-map,.en-brief2{padding:18px}
}

/* a suggested group, set in the tutor's ink */
.en-group{padding:18px 22px}
.en-group__h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:14.5px;font-weight:600;color:var(--cls-ink)}
.en-group__h span{font-size:12.5px;font-weight:500;color:var(--cls-ink-3)}
.en-group__chips{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.en-group__chips li{display:grid;place-items:center;min-width:34px;height:30px;padding:0 8px;border-radius:9px;background:color-mix(in srgb,var(--cls-teal) 10%,var(--cls-leaf));border:1px solid color-mix(in srgb,var(--cls-teal) 32%,var(--cls-line-2));font-size:12px;font-weight:600;color:var(--cls-teal-ink)}
.en-group__f{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--cls-line);font-size:13px;color:var(--cls-ink-3)}
.en-group__f .en-chip{min-height:30px;font-size:12.5px;color:var(--cls-ink-2)}

/* ============================ every student, included (the one fixed-dark chapter) ============================ */
/* Always dark, in both themes, like the landing's live class: built only from the dark ramp's own values, stepped one deeper than the
   dark page ground so it stays distinct when the whole page is dark. */
.en-night{
  --n-bg:#1b1710;position:relative;background:var(--n-bg);color:var(--cls-ink);color-scheme:dark;
  --cls-well:#12100a;--cls-sunk:#12100a;--cls-tray:#12100a;--cls-ground:#1b1710;--cls-panel:#211d15;--cls-leaf:#2a251d;
  --cls-line:#332d24;--cls-line-2:#4a4236;--cls-line-hover:#5b5145;
  --cls-ink:#f4efe6;--cls-ink-2:#cec6b8;--cls-ink-3:#b0a795;--cls-ink-4:#9a9180;
  --cls-blue-deep:#63aef4;--cls-amber-ink:#ecb160;--cls-green-ink:#5cc684;--cls-teal-ink:#46cdbd;--cls-red-ink:#f18d88;
  --cls-lit:inset 0 1px 0 rgba(255,246,234,.03);
  --cls-raise:0 0 0 1px rgba(6,4,3,.55),0 1px 2px rgba(6,4,3,.35),0 6px 16px -6px rgba(6,4,3,.50);
  --cls-recess:inset 0 2px 5px rgba(6,4,3,.55),inset 0 -1px 0 rgba(255,246,234,.05),inset 0 0 0 1px rgba(6,4,3,.35);
  --en-ink:#e6dccb;--en-paper:#3d352c;--en-mute:#8c8171;--en-fill:#54493d;--en-wash:#58453a;--en-twine:#9c8b72;
}
:root[class~="dark"] .en-night{--n-bg:#12100a;border-block:1px solid #4a4236}
@media (prefers-color-scheme:dark){:root:not([class~="cls-light"]) .en-night{--n-bg:#12100a;border-block:1px solid #4a4236}}
.en-night__in{padding-block:var(--mk-section)}
.en-night .mk-headrow{align-items:end}
.en-live{display:grid;gap:14px;margin-top:clamp(40px,4.5vw,64px);padding:clamp(14px,2vw,22px);border-radius:var(--mk-r-media);background:var(--cls-panel);border:1px solid var(--cls-line-2);box-shadow:var(--cls-raise),var(--cls-lit)}
.en-live__stage{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:16px;align-items:stretch}
.en-live__q{min-height:250px;padding:24px 28px;border-radius:var(--cls-r);background:var(--cls-leaf);border:1px solid var(--cls-line)}
.en-live__stem{margin-top:14px;font-size:var(--mk-d3);font-weight:var(--mk-w-solid);line-height:1.15;letter-spacing:var(--mk-track-d3);color:var(--cls-ink)}
.en-ringed{position:relative;display:inline-block}
.en-ringed .en-ring{left:-12px;top:-10px;width:calc(100% + 24px);height:calc(100% + 20px)}
.en-ringed .en-ring .ink{stroke-width:2.4}
.en-live__work{margin-top:26px;padding:16px 18px;border:1px dashed var(--cls-line-hover);border-radius:var(--cls-r-sm);font-size:22px;color:var(--cls-ink-2);font-variant-numeric:tabular-nums}
.en-tile{display:grid;align-content:center;justify-items:center;gap:12px;padding:18px 12px;border-radius:var(--cls-r);background:var(--cls-leaf);border:2px solid color-mix(in srgb,var(--cls-blue) 50%,var(--cls-line-2))}
.en-tile .en-face{background:transparent}
.en-bars{display:flex;align-items:flex-end;gap:4px;height:22px}
.en-bars i{display:block;width:4px;border-radius:var(--cls-pill);background:var(--cls-blue)}
.en-bars i:nth-child(1){height:8px}.en-bars i:nth-child(2){height:16px}.en-bars i:nth-child(3){height:22px}.en-bars i:nth-child(4){height:12px}.en-bars i:nth-child(5){height:18px}
html.js-motion .en-live:not(.is-in) .en-bars i{transform:scaleY(.25)}
html.js-motion .en-live.is-in .en-bars i{transform:scaleY(1);transform-origin:50% 100%;transition:transform 520ms var(--mk-ease-rise) calc(var(--k,0) * 70ms + 500ms)}
.en-bars i:nth-child(2){--k:1}.en-bars i:nth-child(3){--k:2}.en-bars i:nth-child(4){--k:3}.en-bars i:nth-child(5){--k:4}
.en-tile__n{font-size:12.5px;font-weight:500;color:var(--cls-ink-3)}
.en-live__cap{padding:14px 18px;border-radius:var(--cls-r-sm);background:var(--cls-well);border:1px solid var(--cls-line);font-size:16.5px;line-height:1.45;color:var(--cls-ink)}
.en-live__cap b{display:inline-block;margin-right:10px;padding:2px 9px;border-radius:var(--cls-pill);background:var(--cls-line);font-size:12px;font-weight:600;line-height:1.5;color:var(--cls-ink-2);vertical-align:1px}
.en-live__ctl{display:flex;flex-wrap:wrap;gap:8px}
.en-ctl{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:var(--cls-pill);background:var(--cls-leaf);border:1px solid var(--cls-line-2);font-size:13.5px;font-weight:600;color:var(--cls-ink-2);white-space:nowrap}
.en-ctl svg{width:16px;height:16px;color:var(--cls-ink-3);flex:none}
.en-ctl.is-on{background:color-mix(in srgb,var(--cls-blue) 18%,var(--cls-leaf));border-color:color-mix(in srgb,var(--cls-blue) 50%,var(--cls-line-2));color:var(--cls-ink)}
.en-ctl.is-on svg{color:var(--cls-blue-deep)}
.en-ctl--person{margin-left:auto}
.en-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(56px,6vw,88px);border-top:1px solid var(--cls-line-2)}
.en-trio__col{min-width:0;padding:28px clamp(16px,2.4vw,32px) 8px 0}
.en-trio__col + .en-trio__col{padding-left:clamp(16px,2.4vw,32px);border-left:1px solid var(--cls-line-2)}
.en-trio h3{font-size:var(--mk-d4);font-weight:var(--mk-w-solid);line-height:1.2;letter-spacing:var(--mk-track-d4);color:var(--cls-ink)}
.en-trio ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.en-trio li,.en-voice__rules li{position:relative;padding-left:16px;font-size:15.5px;line-height:1.45;color:var(--cls-ink-2)}
.en-trio li::before,.en-voice__rules li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1.5px;background:var(--cls-ink-4)}
.en-voices{margin-top:clamp(56px,6vw,88px)}
.en-voice{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start;padding:clamp(22px,3vw,34px)}
.en-voice__h{font-size:15.5px;font-weight:600;color:var(--cls-ink)}
.en-faces{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.en-faces li{display:grid;justify-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--cls-ink-3)}
.en-voice__plain{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:18px 0 0;font-size:14px;line-height:1.4;color:var(--cls-ink-3)}
.en-voice__own{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;padding-left:clamp(24px,4vw,56px);border-left:1px solid var(--cls-line)}
.en-voice__mic{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--cls-r-sm);background:var(--cls-tray);border:1px solid var(--cls-line-2);color:var(--cls-ink-3)}
.en-voice__t{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:15.5px;font-weight:600;line-height:1.3;color:var(--cls-ink)}
.en-voice__rules{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.en-voice__rules li{font-size:14px;color:var(--cls-ink-3)}
.en-voices__feats{margin-top:24px}
@media (max-width:899px){
  .en-live__stage{grid-template-columns:minmax(0,1fr)}
  .en-tile{grid-template-columns:auto auto auto;justify-content:start;justify-items:start;align-items:center;gap:14px}
  .en-trio{grid-template-columns:minmax(0,1fr)}
  .en-trio__col,.en-trio__col + .en-trio__col{padding:24px 0 8px;border-left:0}
  .en-trio__col + .en-trio__col{border-top:1px solid var(--cls-line-2)}
  .en-voice{grid-template-columns:minmax(0,1fr)}
  .en-voice__own{padding-left:0;padding-top:20px;border-left:0;border-top:1px solid var(--cls-line)}
  .en-ctl--person{margin-left:0}
}
@media (max-width:560px){
  .en-faces{grid-template-columns:repeat(4,minmax(0,1fr))}
  .en-live__q{padding:18px}
}

/* ============================ control: address, roles, budget (drawn as the documents they produce) ============================ */
.en-control .mk-headrow{align-items:end;margin-bottom:clamp(36px,4.5vw,64px)}
.en-crest--lg{width:44px;height:44px;border-radius:var(--cls-r-sm);font-size:15px}
.en-ws__field{max-width:420px;margin-top:26px}
.en-ws__field + .en-feats{margin-top:28px}
.en-chips-note{margin-top:20px}
/* a neutral-ink signature: the school signs in its own hand, never in the tutor's teal */
.en-hand{display:block;width:92px;height:auto;overflow:visible}
.en-hand .ink{fill:none;stroke:var(--cls-ink-3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* the letter to staff: the school's name and address typed into its letterhead */
.en-letter{max-width:520px;margin-left:auto;padding:clamp(22px,3vw,32px)}
.en-letter .en-crest{transition:none}
.en-letter__head{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--cls-line)}
.en-letter__school{font-size:19px;font-weight:600;line-height:1.25;letter-spacing:-.015em;color:var(--cls-ink);overflow-wrap:anywhere}
.en-letter__meta{margin-top:3px;font-size:12.5px;color:var(--cls-ink-3)}
.en-letter__p{margin-top:16px;font-size:15.5px;line-height:1.55;color:var(--cls-ink-2)}
.en-letter__addr{margin-top:10px;padding:12px 16px;border-radius:var(--cls-r-sm);background:var(--cls-sunk);border:1px solid var(--cls-line);font-size:20px;font-weight:500;letter-spacing:-.01em;line-height:1.3;color:var(--cls-ink-3);overflow-wrap:anywhere}
.en-letter__addr b{font-weight:700;color:var(--cls-ink)}
.en-letter__sign{display:flex;align-items:flex-end;gap:14px;margin-top:22px}
.en-letter__sign span{padding-bottom:6px;font-size:13px;color:var(--cls-ink-3)}
/* the permissions page, signed for the school */
.en-perm{max-width:560px;margin-left:auto;padding:clamp(22px,3vw,30px)}
.en-perm .lh{padding-bottom:16px;border-bottom:1px solid var(--cls-line)}
.en-perm__roles{margin:0}
.en-perm__roles > div{display:grid;grid-template-columns:8.4em minmax(0,1fr);gap:0 18px;padding:14px 0;border-bottom:1px solid var(--cls-line)}
.en-perm__roles dt{font-size:14.5px;font-weight:600;color:var(--cls-ink)}
.en-perm__roles dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--cls-ink-2)}
.en-perm__policy{max-width:60ch;margin-top:14px;font-size:13px;line-height:1.5;color:var(--cls-ink-3)}
.en-perm__sign{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 14px;margin-top:20px}
.en-perm__sign span,.en-perm__sign time{padding-bottom:6px;font-size:13px;color:var(--cls-ink-3)}
.en-perm__sign time{margin-left:auto}
/* the invoice, with the month's usage behind it (counted figures in neutral ink) */
.en-invoice{max-width:560px;margin-left:auto;padding:clamp(22px,3vw,30px)}
.en-invoice__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--cls-line)}
.en-invoice__t{font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--cls-ink)}
.en-invoice__m{margin-top:3px;font-size:12.5px;color:var(--cls-ink-3)}
.en-invoice__mark{color:var(--cls-ink-3)}
.en-invoice__lines{width:100%;border-collapse:collapse;font-size:14.5px}
.en-invoice__lines :is(th,td){padding:12px 0;text-align:left;font-weight:500;color:var(--cls-ink-2);border-bottom:1px solid var(--cls-line)}
.en-invoice__lines thead th{font-size:12px;color:var(--cls-ink-3)}
.en-invoice__lines td,.en-invoice__lines thead th:last-child{padding-left:18px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.en-invoice__lines tfoot :is(th,td){font-weight:700;color:var(--cls-ink);border-bottom:0}
.en-invoice__use{margin-top:18px}
.en-invoice__h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;font-size:14px;color:var(--cls-ink-3)}
.en-invoice__h b{margin-right:3px;font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--cls-ink);font-variant-numeric:tabular-nums}
.en-stack{position:relative;display:flex;height:16px;margin-top:14px;border-radius:var(--cls-pill);background:var(--cls-well);box-shadow:var(--cls-recess)}
.en-stack > i{display:block;height:100%;width:var(--w);transform-origin:0 50%;border-radius:var(--cls-pill);background:var(--cls-ink-3);box-shadow:var(--cls-lit-fill,inset 0 1px 0 rgba(255,255,255,.3))}
.en-stack__alert,.en-stack__cap{position:absolute;top:-5px;bottom:-5px;left:var(--at);width:2px;background:var(--cls-ink-4)}
.en-stack__cap{background:var(--cls-ink)}
.en-stack__legend{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:12px;font-size:12px;color:var(--cls-ink-3)}
.en-stack__legend span{display:inline-flex;align-items:center;gap:7px}
.en-stack__legend span::before{content:"";width:2px;height:12px;background:var(--cls-ink-4)}
.en-stack__legend span:last-child::before{height:16px;background:var(--cls-ink)}
html.js-motion .en-invoice:not(.is-in) .en-stack > i{transform:scaleX(0)}
html.js-motion .en-invoice.is-in .en-stack > i{transition:transform 900ms var(--mk-ease-rise) 300ms}
.en-invoice__rows{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--cls-line)}
.en-invoice__rows li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--cls-line);font-size:14.5px;color:var(--cls-ink-2)}
.en-invoice__n{display:flex;align-items:center;gap:10px;min-width:0}
.en-invoice__rows b{font-weight:600;color:var(--cls-ink);font-variant-numeric:tabular-nums}
.en-invoice__f{margin-top:14px;font-size:13px;line-height:1.45;color:var(--cls-ink-3)}
@media (max-width:899px){
  .en-letter,.en-perm,.en-invoice{margin-left:0;max-width:none}
}
@media (max-width:520px){
  .en-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-radius:var(--cls-r-lg)}
  .en-filter button{justify-content:center;width:100%}
  .en-perm__roles > div{grid-template-columns:minmax(0,1fr);gap:4px}
  .en-perm__sign time{margin-left:0}
}

/* ============================ everything in the plan ============================ */
.en-all .mk-headrow{align-items:end}
.en-filter{display:inline-flex;flex-wrap:wrap;gap:2px;margin-top:clamp(32px,4vw,48px);padding:4px;border-radius:var(--cls-pill);background:var(--cls-sunk);border:1px solid var(--cls-line-2)}
.en-filter[hidden]{display:none}
.en-filter button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border:0;border-radius:var(--cls-pill);background:transparent;color:var(--cls-ink-3);font-size:14px;font-weight:600;cursor:pointer;
  transition:background-color var(--cls-dur-fast) var(--cls-ease-out),color var(--cls-dur-fast) var(--cls-ease-out)}
.en-filter button:hover{color:var(--cls-ink)}
.en-filter button[aria-pressed="true"]{background:var(--cls-leaf);color:var(--cls-ink);box-shadow:var(--cls-raise),var(--cls-lit)}
@media (pointer:coarse){.en-filter button{min-height:44px}}
.en-all__grid{columns:2;column-gap:clamp(40px,6vw,104px);margin-top:clamp(32px,4vw,48px)}
.en-all__group{break-inside:avoid;margin-bottom:clamp(40px,5vw,64px)}
.en-all__group[hidden]{display:none}
.en-all__group > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;cursor:default}
.en-all__group > summary::-webkit-details-marker{display:none}
.en-all__group > summary h3{display:flex;align-items:baseline;gap:10px;margin:0 0 14px;font-size:var(--mk-d4);font-weight:var(--mk-w-solid);line-height:1.2;letter-spacing:var(--mk-track-d4);color:var(--cls-ink)}
.en-all__group > summary h3 span{font-size:14px;font-weight:500;letter-spacing:0;color:var(--cls-ink-3);font-variant-numeric:tabular-nums}
.en-all__group > summary svg{display:none;width:18px;height:18px;flex:none;margin-bottom:14px;color:var(--cls-ink-3);transform:rotate(90deg);transition:transform var(--cls-dur) var(--cls-ease-out)}
.en-all__group[open] > summary svg{transform:rotate(-90deg)}
.en-all__group .en-feats li[hidden]{display:none}
.en-all__group .en-feats{margin-top:0}
@media (max-width:899px){
  .en-all__grid{columns:1}
  .en-all__group{margin-bottom:0;border-top:1px solid var(--cls-line-2)}
  .en-all__group > summary{min-height:64px;cursor:pointer}
  .en-all__group > summary h3{margin:0}
  .en-all__group > summary svg{display:block;margin-bottom:0}
  .en-all__group[open] > .en-feats{margin-bottom:24px}
}

/* ============================ the four stops (beside the register form) ============================ */
.en-track{list-style:none;margin:0;padding:0;position:relative}
.en-track::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:1px;background:var(--cls-line-2)}
.en-track li{position:relative;padding:0 0 30px 36px}
.en-track li:last-child{padding-bottom:0}
.en-track__dot{position:absolute;left:0;top:3px;width:15px;height:15px;border-radius:50%;box-sizing:border-box;background:var(--cls-ground);border:1.5px solid var(--cls-ink-3)}
.en-track li:first-child .en-track__dot{background:var(--cls-ink);border-color:var(--cls-ink)}
.en-track h3{font-size:var(--mk-d4);font-weight:var(--mk-w-solid);line-height:1.2;letter-spacing:var(--mk-track-d4);color:var(--cls-ink)}
.en-track p{margin-top:8px;max-width:40ch;font-size:15.5px;line-height:1.5;color:var(--cls-ink-2)}
.en-track dl{max-width:44ch;margin:14px 0 0;border-top:1px solid var(--cls-line-2)}
.en-track dl > div{display:grid;grid-template-columns:2.4em minmax(0,1fr);gap:0 10px;padding:9px 0;border-bottom:1px solid var(--cls-line);font-size:13.5px;line-height:1.4}
.en-track dt{font-weight:600;color:var(--cls-ink-3)}
.en-track dd{margin:0;color:var(--cls-ink-2)}

/* ============================ pricing ============================ */
.en-pricing{padding-top:clamp(72px,8vw,128px)}
.en-bands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch;margin-top:8px}
.en-band-card{padding:clamp(22px,2.4vw,32px)}
.en-band-card .tier__amt{font-size:var(--mk-d3)}
.en-band-card .tier__list{margin-top:20px}
.en-every{margin-top:clamp(24px,3vw,32px)}
.en-est{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,4vw,56px);align-items:center;margin-top:clamp(32px,4vw,48px);padding:clamp(24px,3vw,36px)}
.en-est__h{font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.3;color:var(--cls-ink);margin-bottom:18px}
.en-est .mk-label{margin-bottom:10px}
.en-est__row{display:flex;align-items:center;gap:18px}
.en-est__row[hidden],.en-range[hidden]{display:none}
.en-est__n{flex:none;min-width:3.4ch;font-size:var(--mk-d3);font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--cls-ink);text-align:right}
.en-est__note{margin-top:16px;max-width:42ch;font-size:13.5px;line-height:1.5;color:var(--cls-ink-3)}
.en-est__out{display:grid;gap:0;margin:0;border-top:1px solid var(--cls-line)}
.en-est__out > div{display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:0 12px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--cls-line)}
.en-est__out dt{font-size:15.5px;font-weight:600;color:var(--cls-ink)}
.en-est__out dd{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.en-est__out b{font-size:var(--mk-d4);font-weight:700;letter-spacing:var(--mk-track-d4);line-height:1.15;color:var(--cls-ink)}
.en-est__out dd span{font-size:14px;color:var(--cls-ink-3)}
/* the slider: a recessed track, a blue fill up to the thumb, a raised leaf thumb */
.en-range{--p:5%;-webkit-appearance:none;appearance:none;flex:1;min-width:0;height:28px;margin:0;background:transparent;cursor:pointer}
.en-range::-webkit-slider-runnable-track{height:8px;border-radius:var(--cls-pill);background:linear-gradient(to right,var(--cls-blue) 0 var(--p),var(--cls-well) var(--p) 100%);box-shadow:var(--cls-recess)}
.en-range::-moz-range-track{height:8px;border-radius:var(--cls-pill);background:var(--cls-well);box-shadow:var(--cls-recess)}
.en-range::-moz-range-progress{height:8px;border-radius:var(--cls-pill);background:var(--cls-blue)}
.en-range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-9px;border-radius:50%;background:var(--cls-leaf);border:1px solid var(--cls-line-hover);box-shadow:var(--cls-raise),var(--cls-lit)}
.en-range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--cls-leaf);border:1px solid var(--cls-line-hover);box-shadow:var(--cls-raise),var(--cls-lit)}
.en-range:focus{outline:none}
.en-range:focus-visible::-webkit-slider-thumb{box-shadow:var(--cls-focus)}
.en-range:focus-visible::-moz-range-thumb{box-shadow:var(--cls-focus)}
@media (max-width:1099px){
  .en-bands{grid-template-columns:repeat(2,minmax(0,1fr))}
  .en-band-card--bank{grid-column:1 / -1}
}
@media (max-width:899px){
  .en-bands{grid-template-columns:minmax(0,1fr)}
  .en-est{grid-template-columns:minmax(0,1fr)}
}

/* ============================ proof ============================ */
.en-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(36px,4.5vw,60px);border-top:1px solid var(--cls-line-2)}
.en-fact{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 clamp(16px,2.4vw,32px);align-items:start;padding:clamp(22px,3vw,36px) clamp(16px,2.4vw,32px) clamp(22px,3vw,36px) 0}
.en-fact + .en-fact{padding-left:clamp(16px,2.4vw,32px);border-left:1px solid var(--cls-line-2)}
.en-fact__n{min-width:1.6em;font-size:var(--mk-d1);font-weight:700;letter-spacing:var(--mk-track-d1);line-height:.95;color:var(--cls-ink)}
.en-fact__t{font-size:19px;font-weight:600;line-height:1.35;letter-spacing:-.015em;color:var(--cls-ink)}
.en-fact__s{margin-top:10px;max-width:46ch;font-size:14.5px;line-height:1.5;color:var(--cls-ink-3)}
.en-fact__s .mk-a{overflow-wrap:anywhere}
.en-quotes-wrap{margin-top:clamp(40px,5vw,72px)}
.en-quotes__note{max-width:60ch;margin-bottom:18px;font-size:14.5px;line-height:1.5;color:var(--cls-ink-2)}
.en-quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.en-quote{display:grid;align-content:space-between;gap:18px;padding:clamp(22px,2.4vw,30px)}
.en-quote:first-child{grid-column:1 / -1}
.en-quote:first-child blockquote p{max-width:34ch;font-size:var(--mk-d4);line-height:1.35}
.en-quote blockquote{margin:0}
.en-quote blockquote p{font-size:18px;font-weight:600;letter-spacing:-.015em;line-height:1.4;color:var(--cls-ink)}
.en-quote figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--cls-ink-3)}
.en-quote figcaption b{display:block;font-size:14.5px;font-weight:600;color:var(--cls-ink-2)}
@media (max-width:899px){
  .en-facts{grid-template-columns:minmax(0,1fr)}
  .en-fact + .en-fact{padding-left:0;border-left:0;border-top:1px solid var(--cls-line-2)}
  .en-quotes{grid-template-columns:minmax(0,1fr)}
}

/* ============================ register ============================ */
.en-register__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto;grid-template-areas:"words panel";gap:clamp(28px,3vw,44px) clamp(40px,6vw,104px);align-items:start}
.en-register__words{grid-area:words}
.en-register__panel{grid-area:panel}
.en-register__words .mk-copy{margin-top:18px}
.en-note__hint{margin-top:8px;font-size:13px;line-height:1.45;color:var(--cls-ink-3)}
.en-register__state{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:22px;font-size:14.5px;color:var(--cls-ink-3)}
.en-register__panel{min-width:0}
.en-form{padding:clamp(24px,3vw,40px)}
.en-form[hidden],.en-receipt[hidden]{display:none}
.en-form__h{font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.3;color:var(--cls-ink)}
.en-trap{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.en-note{border-top:1px solid var(--cls-line);padding-top:6px}
.en-note > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;list-style:none;cursor:pointer;font-size:14px;font-weight:600;color:var(--cls-ink-2)}
.en-note > summary::-webkit-details-marker{display:none}
.en-note > summary i{font-style:normal;font-size:12.5px;font-weight:500;color:var(--cls-ink-3)}
.en-note[open] > summary{margin-bottom:10px}
.en-note textarea{min-height:110px}
.en-form__notice{margin-top:16px;max-width:52ch;font-size:13px;line-height:1.55;color:var(--cls-ink-3)}
.en-receipt{display:grid;justify-items:start;gap:14px;padding:clamp(28px,3.4vw,44px)}
.en-receipt p{max-width:38ch;font-size:17px;line-height:1.55;color:var(--cls-ink-2)}
.en-receipt__art img{display:block}
@media (max-width:899px){.en-register__grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"words" "panel"}}

/* ============================ close ============================ */
.en-close{padding-top:0}
.en-links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 28px;margin-top:clamp(40px,5vw,64px);padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--cls-line)}
.en-links .mk-link{font-size:15px;font-weight:500}

/* a chapter's features, closed to one line: how many, and where they stand */
.en-more{border-top:1px solid var(--cls-line-2);border-bottom:1px solid var(--cls-line-2)}
.en-more > summary{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;min-height:56px;padding:10px 0;list-style:none;cursor:pointer}
.en-more > summary::-webkit-details-marker{display:none}
.en-more__t{font-size:15.5px;font-weight:600;color:var(--cls-ink)}
.en-more > summary svg{flex:none;margin-left:auto;color:var(--cls-ink-3);transition:transform var(--cls-dur) var(--cls-ease-out)}
.en-more[open] > summary svg{transform:rotate(180deg)}
.en-more > .en-feats{margin:0 0 6px;border-top:1px solid var(--cls-line)}
.en-more > .en-feats li{border-bottom-color:var(--cls-line)}
.en-more > .en-feats li:last-child{border-bottom:0}
.en-insight-feats{max-width:760px}
.en-insight-feats .en-feats{columns:1}


/* ============================ the live class: share modes ============================ */
.en-seg button[aria-selected="true"]{background:var(--cls-leaf);color:var(--cls-ink);box-shadow:var(--cls-raise),var(--cls-lit)}
.en-seg button[aria-selected="true"]:focus-visible{box-shadow:var(--cls-focus),var(--cls-raise),var(--cls-lit)}
.en-modes{margin-top:clamp(32px,4vw,56px)}
.en-modes__tabs{display:flex;width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none}
.en-modes__tabs::-webkit-scrollbar{display:none}
.en-modes__tabs button{flex:none}
.en-modes__tabs[hidden]{display:none}
.en-mode{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:start;margin-top:clamp(28px,3.5vw,44px)}
.en-mode[hidden]{display:none}
.en-modes:not(.is-tabs) > .en-mode + .en-mode{margin-top:clamp(56px,7vw,96px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--cls-line)}
.en-mode__words{min-width:0}
.en-mode__dl{margin:22px 0 0;border-top:1px solid var(--cls-line-2)}
.en-mode__dl > div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:4px 18px;padding:13px 0;border-bottom:1px solid var(--cls-line)}
.en-mode__dl dt{font-size:12.5px;font-weight:600;line-height:1.55;letter-spacing:.01em;color:var(--cls-ink-3)}
.en-mode__dl dd{margin:0;font-size:15px;line-height:1.55;color:var(--cls-ink)}
.en-mode__styles{margin:14px 0 0;font-size:13.5px;line-height:1.5;color:var(--cls-ink-3)}
.en-mode__styles b{font-weight:600;color:var(--cls-ink-2)}
/* a screenshot of the real room, in a frame: light and dark are two pictures, swapped by the page's own theme switch */
.en-shot{margin:0;min-width:0}
.en-shot__pic{display:block;overflow:hidden;border-radius:var(--cls-r);border:1px solid var(--cls-line);box-shadow:var(--cls-raise),var(--cls-lit);background:var(--cls-leaf)}
.en-shot__img{display:block;width:100%;height:auto}
.en-shot__img--dark{display:none}
:root[class~="dark"] .en-shot__img--light{display:none}
:root[class~="dark"] .en-shot__img--dark{display:block}
@media (prefers-color-scheme:dark){
  :root:not([class~="cls-light"]) .en-shot__img--light{display:none}
  :root:not([class~="cls-light"]) .en-shot__img--dark{display:block}
}
.en-shot__cap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:12px;font-size:13px;color:var(--cls-ink-3)}
.en-menu{margin-top:clamp(64px,8vw,112px)}
.en-styles{margin-top:clamp(56px,7vw,96px)}
.en-styles__soon{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:20px 0 0;font-size:14.5px;line-height:1.55;color:var(--cls-ink-2)}
.en-ledger{margin:0;padding:6px 0;list-style:none}
.en-ledger li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:center;padding:14px 22px;border-bottom:1px solid var(--cls-line)}
.en-ledger li:last-child{border-bottom:0}
.en-ledger__n{grid-column:1;font-size:15.5px;font-weight:600;letter-spacing:-.005em;color:var(--cls-ink)}
.en-ledger__d{grid-column:1;font-size:13.5px;line-height:1.5;color:var(--cls-ink-3)}
.en-ledger .en-chip{grid-column:2;grid-row:1 / span 2;align-self:center}
@media (max-width:899px){
  .en-mode{grid-template-columns:minmax(0,1fr);gap:24px}
  .en-mode__shot{order:-1}
  .en-mode__dl > div{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .en-ledger li{padding-inline:16px}
}

/* ============================ Cog+: the learning memory ============================ */
.en-cogs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3vw,48px);margin:clamp(36px,4.5vw,64px) 0 0;padding:0;list-style:none;counter-reset:cog}
.en-cogs__step{display:grid;align-content:start;gap:0;padding-top:22px;border-top:1px solid var(--cls-line-2)}
.en-cogs__n{display:grid;place-items:center;width:28px;height:28px;margin-bottom:14px;border-radius:50%;background:var(--cls-ink);color:var(--cls-ground);font-size:13px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.en-cogs__h{margin:0;font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.25;color:var(--cls-ink)}
.en-cogs__p{margin:10px 0 0;font-size:15.5px;line-height:1.6;color:var(--cls-ink-3)}
.en-cogs__ex{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin:18px 0 0;padding:12px 14px;border-radius:var(--cls-r-sm);background:var(--cls-tray);font-size:14px;line-height:1.5;color:var(--cls-ink-2)}
/* a cog's strength, as the Cog+ page draws it: a thread that gets heavier each time the pattern repeats */
.en-cogs__meter{margin:16px 0 0}
.en-cogs__meter p{display:flex;justify-content:space-between;gap:12px;margin:0 0 7px;font-size:13px;line-height:1.3;color:var(--cls-ink-3)}
.en-cogs__meter b{font-weight:600;color:var(--cls-ink)}
.en-cogs__meter span{font-variant-numeric:tabular-nums}
.en-cogs__meter i{display:block;height:8px;border-radius:4px;background:var(--cls-well,var(--cls-tray));overflow:hidden;position:relative}
.en-cogs__meter i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--v);border-radius:inherit;background:var(--cls-teal)}
.en-memory__feats{margin:0;max-width:760px}
.en-memory__more{margin:18px 0 0}
@media (max-width:899px){
  .en-cogs{grid-template-columns:minmax(0,1fr);gap:28px}
}

/* ============================ spoken, not typed ============================ */
/* The tutor talks. Wherever the page shows what it says, it is drawn as the room draws captions (a dark bubble with the
   tutor's name), and what a student says or writes is a labelled line, never a chat bubble. */
.page-enterprise{--en-cap-bg:color-mix(in srgb,var(--cls-ink) 92%,transparent);--en-cap-ink:var(--cls-leaf);--en-cap-edge:transparent;--en-cap-tag:color-mix(in srgb,var(--cls-leaf) 18%,transparent)}
@media (prefers-color-scheme:dark){:root:not([class~="cls-light"]) .page-enterprise{--en-cap-bg:color-mix(in srgb,var(--cls-shadow-ink) 72%,var(--cls-leaf));--en-cap-ink:var(--cls-ink);--en-cap-edge:var(--cls-line-2);--en-cap-tag:color-mix(in srgb,var(--cls-ink) 16%,transparent)}}
:root[class~="dark"] .page-enterprise{--en-cap-bg:color-mix(in srgb,var(--cls-shadow-ink) 72%,var(--cls-leaf));--en-cap-ink:var(--cls-ink);--en-cap-edge:var(--cls-line-2);--en-cap-tag:color-mix(in srgb,var(--cls-ink) 16%,transparent)}
.en-talk li{max-width:none}
.en-talk__tutor,.en-qa__tutor > div,.en-sim__tutor p{background:var(--en-cap-bg);color:var(--en-cap-ink);border:1px solid var(--en-cap-edge);border-radius:var(--cls-r-sm)}
.en-talk__tutor{justify-self:stretch;max-width:94%}
.en-talk__who{display:inline-block;margin-right:8px;padding:1px 8px;border-radius:var(--cls-pill);background:var(--en-cap-tag);font-size:11.5px;font-weight:600;line-height:1.5;vertical-align:1px}
.en-talk__me,.en-qa__me,.en-sim__me{justify-self:end;max-width:86%;background:transparent;border:1px dashed var(--cls-line-hover);border-radius:var(--cls-r-sm);color:var(--cls-ink);font-variant-numeric:tabular-nums}
.en-said{display:flex;align-items:center;gap:5px;margin-bottom:2px;font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--cls-ink-3)}
.en-said .pi{width:13px;height:13px}
.en-qa__live{font-size:12.5px;color:var(--cls-ink-3)}
.en-bars--sm{height:16px;margin-left:auto;align-self:center}
.en-bars--sm i{width:3px}
.en-bars--sm i:nth-child(1){height:6px}.en-bars--sm i:nth-child(2){height:12px}.en-bars--sm i:nth-child(3){height:16px}.en-bars--sm i:nth-child(4){height:9px}.en-bars--sm i:nth-child(5){height:13px}

/* ============================ less on the page: expanders, tabs and tips ============================
   Detail the page keeps but does not lead with sits behind a row (.en-more, the same row a chapter's features use), a tab
   (.en-tabs, the share modes' tab look) or an info tip (.en-tip). Without the script every row is a native <details> and
   every tab panel is open, one under another. */
.en-more--block{margin-top:clamp(28px,3.5vw,44px)}
.en-more__body{padding:6px 0 28px}
.en-more__body > :first-child{margin-top:0}
/* rows that follow one another share their rule instead of leaving a gap between two */
.en-more--block + .en-more--block{margin-top:-1px}
.en-sub__words > .en-more--block,.en-mode__words > .en-more--block{margin-top:22px}
.en-more--block .en-more{margin-top:20px}
.en-more--block .en-more > summary{min-height:48px}
.en-more__body .en-sub{border-top:0;padding-block:clamp(16px,2vw,28px)}
.en-more__body .en-trio{margin-top:0;border-top:0}
.en-more__body .en-all__grid{margin-top:clamp(24px,3vw,36px)}
.en-more__body .en-filter{margin-top:8px}
.en-more__body .en-voices{margin-top:0}
.en-more__body .en-track{padding-top:6px}
.en-more__body .en-quotes{margin-top:0}
.en-people{margin-top:clamp(40px,5vw,72px)}

/* tabs for stacked samples: the share modes' own look, one sample on view */
.en-tabs{margin-top:clamp(32px,4vw,56px)}
.en-tabs__list{display:flex;width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none}
.en-tabs__list::-webkit-scrollbar{display:none}
.en-tabs__list button{flex:none}
.en-tabs__list[hidden]{display:none}
.en-tabs__panel[hidden]{display:none}
.en-tabs.is-tabs .en-sub{border-top:0;padding-block:clamp(28px,3.5vw,48px) 0}
.en-tabs.is-tabs .en-tabs__panel:focus{outline:none}

/* info tips: a fact kept out of the running text */
.en-tip{position:relative;display:inline-block;margin:-8px 0 -8px 2px;vertical-align:middle;line-height:0}
.en-tip__btn{position:relative;display:inline-grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--cls-ink-3);cursor:help}
.en-tip__btn::after{content:"";position:absolute;inset:-10px}
.en-tip__btn .pi{width:16px;height:16px}
.en-tip__btn:hover,.en-tip__btn[aria-expanded="true"]{color:var(--cls-ink)}
.en-tip__btn:focus-visible{outline:none;box-shadow:var(--cls-focus)}
/* closed, the bubble has no size at all, so it cannot widen the line or the page it hangs in */
.en-tip__bubble{position:absolute;z-index:30;left:50%;bottom:calc(100% + 6px);width:0;max-width:0;height:0;padding:0;border:0;overflow:hidden;border-radius:var(--cls-r-sm);background:var(--cls-leaf);color:var(--cls-ink);box-shadow:var(--cls-raise);font-size:13.5px;font-weight:500;line-height:1.45;letter-spacing:0;text-align:left;white-space:normal;transform:translateX(calc(-50% + var(--en-tip-shift,0px)));visibility:hidden;opacity:0;transition:opacity var(--cls-dur) var(--cls-ease-out),visibility 0s linear var(--cls-dur)}
/* the bridge over the gap, so the pointer can travel from the button onto the bubble and keep it open */
.en-tip__bubble::before{content:"";position:absolute;left:0;right:0;top:100%;height:8px}
.en-tip:hover .en-tip__bubble,.en-tip:focus-within .en-tip__bubble,.en-tip.is-open .en-tip__bubble,.en-tip__bubble.is-measuring{width:max-content;max-width:min(280px,calc(100vw - 32px));height:auto;padding:9px 13px;border:1px solid var(--cls-line-2);overflow:visible}
.en-tip:hover .en-tip__bubble,.en-tip:focus-within .en-tip__bubble,.en-tip.is-open .en-tip__bubble{visibility:visible;opacity:1;transition-delay:0s}
/* Escape dismisses without taking the focus away; a new hover or focus brings it back */
.en-tip.is-dismissed .en-tip__bubble:not(.is-measuring){width:0;max-width:0;height:0;padding:0;border:0;overflow:hidden;visibility:hidden;opacity:0}
.en-tip__bubble.is-below{bottom:auto;top:calc(100% + 6px)}
.en-tip__bubble.is-below::before{top:auto;bottom:100%}
@media (prefers-reduced-motion:reduce){.en-tip__bubble{transition:none}}
@media (pointer:coarse){.en-tip__btn{width:28px;height:28px}}
/* the hero strip's tip sits at the end of its line */
.en-three p .en-tip{margin-left:4px}