/* The Teached case (started 2026-10-14; v2 the same day). Structure and experiments: 40-Marketing/Cases/Teached/.
   Hero + From keep the house pattern (a 1920 frame scaled by --u); everything after is v2, full-bleed chapters.
   Ground = Teached paper #F5F2EA; ink #111214; faces Instrument Sans + Instrument Serif italic. v1: experiments/02-case-v2/v1/. */
:root { --tc-cap: calc(1440px / 1760); --tc-paper: #F5F2EA; --tc-ink: #111214; }
.tc-hero, .tc-from { background: var(--tc-paper); container-type: inline-size; }
main > section.tc-hero, main > section.tc-from { --u: min(var(--tc-cap), 100cqw / 1920); }/* ---------- 01 · Hero (Figma 47:275): a 1840×720 black card inset 40, under the fixed 60 px header ---------- */

.tc-hero { --hu: calc(100cqw / 1920); padding: calc(60px + 40 * var(--hu)) calc(40 * var(--hu)) calc(40 * var(--hu)); }
.tc-hero__frame { position: relative; aspect-ratio: 1840 / 720; background: #000; overflow: hidden; }
.tc-hero__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) {
  .tc-hero { padding: 72px 0 0; }
  .tc-hero__frame { aspect-ratio: 1240 / 720; }/* phones keep the middle of the film: the mark and the panels */   
}/* ---------- 02 · From SMD (Figma 47:277) ---------- */

.tc-from { --btn-ground: var(--tc-paper); --btn-mute-a: 5%; position: relative; }
.tc-from::before { content: ""; position: absolute; inset: 0; background: url(assets/case/teached/from-grid.webp) center / cover; opacity: .02; pointer-events: none; }
.tc-from__frame { position: relative; max-width: calc(1920 * var(--tc-cap)); margin: 0 auto; box-sizing: border-box;
  padding: calc(80 * var(--u)) calc(81 * var(--u)) calc(80 * var(--u)) calc(228 * var(--u)); transition: padding .5s cubic-bezier(.2, .7, .2, 1); }
.tc-from__head { position: relative; display: flex; align-items: flex-start; gap: calc(166 * var(--u)); }
.tc-from__by { flex: none; margin: 0; display: flex; align-items: center; gap: max(8px, calc(16 * var(--u))); }
.tc-from__logo { display: block; width: clamp(120px, calc(223 * var(--u)), 223px); height: auto; }
.tc-from__and { font: 400 clamp(26px, calc(48 * var(--u)), 48px) / 1 "PT Serif", Georgia, serif; color: #000; opacity: .5; }
.tc-from__smd { position: relative; display: inline-block; width: clamp(44px, calc(80 * var(--u)), 80px); aspect-ratio: 2; border-radius: 45px; background: #f61515; }
.tc-from__smd img { position: absolute; left: 13.8%; top: 9.85%; width: 72.2%; height: 80%; }
.tc-from__title { margin: 0; font: 700 clamp(26px, calc(48 * var(--u)), 48px) / 1 "Instrument Sans", system-ui, sans-serif; color: #000; }
.tc-from__toggle { position: absolute; right: 0; top: 0; }
.tc-from__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .5s cubic-bezier(.2, .7, .2, 1), opacity .35s ease; }
.tc-from__body > div { min-height: 0; overflow: hidden; }
.tc-from.is-hidden .tc-from__body { grid-template-rows: 0fr; opacity: 0; }/* 712 | 40 | 709 from x 228: Why at y +136, the film at +427, How at +522, What at +1150 (from the head's top) */

.tc-from__grid { display: grid; grid-template-columns: calc(712 * var(--u)) calc(709 * var(--u)); column-gap: calc(40 * var(--u));
  padding-top: calc(40 * var(--u)); align-items: start; }
.tc-from__why { grid-column: 1; grid-row: 1; margin-left: calc(2 * var(--u)); width: calc(706 * var(--u)); }
.tc-from__film { grid-column: 1; grid-row: 2; margin: calc(56 * var(--u)) 0 0; aspect-ratio: 1; overflow: hidden; background: #FFD60A; }
.tc-from__film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.tc-from__how { grid-column: 2; grid-row: 2; padding-top: calc(151 * var(--u)); display: flex; flex-direction: column; gap: calc(20 * var(--u)); }
.tc-from__what { grid-column: 2; grid-row: 3; margin-top: calc(11 * var(--u)); display: flex; flex-direction: column; gap: calc(20 * var(--u)); }
.tc-from__block h3 { margin: 0; font: 700 clamp(28px, calc(40 * var(--u)), 40px) / .9 "Instrument Sans", system-ui, sans-serif; color: #000; }
.tc-from__why h3 { margin-bottom: calc(8 * var(--u)); }
.tc-from__block h4 { margin: 0 0 calc(8 * var(--u)); font: 700 clamp(18px, calc(25 * var(--u)), 25px) / 1.44 "Instrument Sans", system-ui, sans-serif; color: #000; opacity: .5; }
.tc-from__block p { margin: 0; font: 500 clamp(17px, calc(25 * var(--u)), 25px) / 1.532 "Instrument Sans", system-ui, sans-serif; color: var(--tc-ink); letter-spacing: -.0059em; text-wrap: pretty; }
.tc-from .tc-from__tags { justify-content: flex-start; max-width: none; margin: 0; gap: calc(6 * var(--u)) calc(14 * var(--u)); }
.tc-from .tc-from__tags ul { justify-content: flex-start; }
.tc-from .tc-from__tags li { font-size: clamp(13px, calc(20 * var(--u)), 20px); }
.tc-from.is-hidden .tc-from__frame { padding-bottom: calc(80 * var(--u)); }
@media (prefers-reduced-motion: reduce) { .tc-from__frame, .tc-from__body { transition: none; } }/* ======================================================================================================
   v2 (2026-10-14): the case in Teached's own world. Full-bleed chapters on the Spectrum colours, Teached's
   own lines set big in Instrument Sans with the label box, the brand pieces as page elements.
   ====================================================================================================== */

:root {
  --tc-red: #FF453A; --tc-orange: #FF9F0A; --tc-yellow: #FFD60A; --tc-green: #32D74B; --tc-sky: #64D2FF; --tc-blue: #0A84FF; --tc-violet: #BF5AF2;
  --tc-lilac: #CF9DF4; --tc-paper-2: #EEEAE2;
  --tc-side: clamp(16px, 6.25vw, 112px);
  --tc-gap: clamp(96px, 11vw, 200px);
  --tc-ease: cubic-bezier(.65, 0, .35, 1);
}
.tc-open,.tc-scene,.tc-bip,.tc-xr,.tc-seen,.tc-camp,.tc-prod,.tc-site { position: relative; overflow: hidden; }
.tc-wrap { position: relative; max-width: 1440px; margin: 0 auto; padding: 0 var(--tc-side); box-sizing: border-box; }
.tc-ink { background: var(--tc-ink); color: var(--tc-paper); }/* type: the big line (Teached's own lines, poster weight), the label (serif italic) and the body *//* the label box from the posters: "One system." on paper, "finally" on ink *//* media reveal: a wipe up, only once the images inside have decoded (statements never animate) */

.tc-reveal-on [data-tc-reveal] { clip-path: inset(100% 0 0 0); transition: clip-path 1s cubic-bezier(.22, 1, .36, 1); }
.tc-reveal-on [data-tc-reveal].is-in { clip-path: inset(0 0 0 0); }/* a product screen in its browser window: the UI keeps its own corner, section frames stay square *//* ---------- 03 · The line ---------- *//* Figma 83:11728 on the 1920 grid, scaled by --u like the From block */

.tc-open { background: var(--tc-paper); container-type: inline-size; }
main > section.tc-open { --u: min(var(--tc-cap), 100cqw / 1920); }
.tc-open::before { content: ""; position: absolute; inset: 0; background: url(assets/case/teached/from-grid.webp) center / cover; opacity: .02; pointer-events: none; }
.tc-open__frame { position: relative; max-width: calc(1920 * var(--tc-cap)); margin: 0 auto; box-sizing: border-box; padding: calc(120 * var(--u)) 0 0 calc(228 * var(--u));
  /* the floor runs to the section's foot (screen top 514, floor top 1108.5, field 503 tall) */
  padding-bottom: calc(233.5 * var(--u)); }
.tc-open__title { margin: 0; font: 600 max(40px, calc(108 * var(--u))) / .98 "Instrument Sans", system-ui, sans-serif; letter-spacing: -.035em; color: var(--tc-ink); }
.tc-open__l1 { white-space: nowrap; }
.tc-open__box { position: relative; display: inline-block; margin-top: .093em; padding: .065em .296em .407em .278em; color: var(--tc-paper); }
.tc-open__box::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url(assets/case/teached/open-strip.svg) 0 0 / 100% 100% no-repeat; rotate: -1deg; }
.tc-open__title { position: relative; z-index: 0; }
.tc-open__stage { position: relative; width: calc(1384 * var(--u)); margin: calc(121 * var(--u)) 0 0 calc(40 * var(--u)); }
.tc-open__screen { position: relative; z-index: 1; margin: 0; overflow: hidden; background: #fff; }
.tc-open__screen video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.tc-open__floor { position: absolute; z-index: 0; top: 68.81%; left: calc(50% - 1260 / 1384 * 100%); width: calc(2520 / 1384 * 100%); max-width: none; height: auto; }
.tc-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; max-width: 1100px; margin: 0 auto; }
.tc-tags ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.tc-tags li { padding: 3px 10px; background: rgba(17, 18, 20, .07); color: rgba(17, 18, 20, .75); font: 500 clamp(13px, 1.1vw, 17px) / 1.25 "Instrument Sans", system-ui, sans-serif; white-space: nowrap; }
.tc-tags .tc-tags__lead { background: var(--tc-ink); color: #fff; }/* ---------- 04 · The system (Figma 84:11947) ---------- */

.tc-sys { position: relative; overflow: hidden; background: var(--tc-ink); color: #fff; container-type: inline-size; }
main > section.tc-sys { --u: min(var(--tc-cap), 100cqw / 1920); }
.tc-sys::before { content: ""; position: absolute; inset: 0; background: url(assets/case/teached/from-grid.webp) center / cover; opacity: .02; filter: invert(1); pointer-events: none; }/* the drawing's viewBox puts the mark (364 wide) at y 110; at 836u the mark is 253.6 wide and its top lands at 168.8 */

.tc-sys__build { position: relative; width: calc(836 * var(--u)); margin: calc(92 * var(--u)) auto 0; }
.tc-sys__build svg { display: block; width: 100%; height: auto; }
.tc-sys__build svg [stroke="#111214"] { stroke: #fff; }
.tc-sys__build svg .tc-build__guides { stroke-opacity: .22; }
.tc-sys__build svg [fill="#111214"] { fill: #fff; }
.tc-sys__build svg text, .tc-sys__build svg text.n { fill: #fff; font: 500 12px "Instrument Sans", system-ui, sans-serif; }
.tc-sys .tc-sys__spec { position: relative; gap: 0; margin-top: calc(157.6 * var(--u)); }
.tc-sys .tc-sys__palette { position: relative; height: calc(280 * var(--u)); min-height: 220px; margin-top: calc(200 * var(--u)); }
.tc-sys .tc-sys__palette > div { padding: 24px; }
.tc-sys .tc-sys__palette b { font: 600 28px / 1 "Instrument Sans", system-ui, sans-serif; letter-spacing: -.02em; }
.tc-sys .tc-sys__palette span { font: 500 15px / 1 "Instrument Sans", system-ui, sans-serif; }
.tc-sys .tc-sys__palette em { font: normal 700 28px / 1 "Instrument Sans", system-ui, sans-serif; }/* ---------- 04 · Seven parts ---------- *//* ---------- 05 · The language ---------- */
.tc-spec { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 1vw, 16px); }
.tc-spec__tile { position: relative; aspect-ratio: 1; background: var(--g); overflow: hidden; }
.tc-spec__tile canvas { position: absolute; inset: 0; width: 100%; height: 100%; }/* the seven colours, one per part */

.tc-palette { display: flex; height: clamp(300px, 34vw, 560px); margin-top: var(--tc-gap); }
.tc-palette > div { position: relative; flex: 1 1 0; background: var(--c); color: var(--tc-ink); transition: flex-grow .7s var(--tc-ease); overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; padding: clamp(14px, 1.4vw, 24px); box-sizing: border-box; min-width: 0; }
.tc-palette > div.is-dark { color: #fff; }
.tc-palette > div::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .7s var(--tc-ease); pointer-events: none;
  --p: clamp(56px, 6vw, 96px);
  background-image: radial-gradient(circle, var(--tc-ink) 3.5px, transparent 4.5px), linear-gradient(var(--tc-ink) 2px, transparent 2px), linear-gradient(90deg, var(--tc-ink) 2px, transparent 2px);
  background-size: var(--p) var(--p); background-position: calc(var(--p) / -2 + 1px) calc(var(--p) / -2 + 1px), 0 0, 0 0; }
.tc-palette > div:hover { flex-grow: 2.6; }
.tc-palette > div:hover::before { opacity: 1; }
.tc-palette b, .tc-palette span, .tc-palette em { position: relative; display: block; white-space: nowrap; }
.tc-palette b { font: 600 clamp(18px, 1.7vw, 28px) / 1 "Instrument Sans", system-ui, sans-serif; letter-spacing: -.02em; }
.tc-palette span { margin-top: 6px; font: 500 clamp(12px, .95vw, 15px) / 1 "Instrument Sans", system-ui, sans-serif; opacity: .75; font-variant-numeric: tabular-nums; }
.tc-palette em { font: italic 400 clamp(18px, 1.7vw, 28px) / 1 "Instrument Serif", Georgia, serif; }
.tc-palette b, .tc-palette span { writing-mode: initial; }
.tc-palette > div > b + span + em { margin-top: auto; }/* ---------- 06 · Every student seen ---------- */

.tc-seen { container-type: inline-size; min-height: max(640px, calc(1166.4 * var(--u))); }
main > section.tc-seen { --u: min(var(--tc-cap), 100cqw / 1920); }
.tc-seen__stage { position: absolute; inset: 0; }
.tc-seen .tc-seen__in { position: relative; max-width: calc(1920 * var(--tc-cap)); margin: 0 auto; padding: calc(108.35 * var(--u)) 0 0 calc(105 * var(--u)); box-sizing: border-box; pointer-events: none; }
.tc-seen__title { margin: 0; font: 600 max(64px, calc(164 * var(--u))) / 1 "Instrument Sans", system-ui, sans-serif; color: var(--tc-paper); }/* "seen." on the strip: the strip starts at the span's left and 9.6 below its em box; the word sits 32.6 in */

.tc-seen__box { position: relative; z-index: 0; display: inline-block; margin-top: .118em; padding-left: .199em; color: var(--tc-ink); }
.tc-seen__box::before { content: ""; position: absolute; z-index: -1; left: 0; top: .0585em; width: 2.888em; height: 1.165em;
  background: url(assets/case/teached/seen-strip.svg) 0 0 / 100% 100% no-repeat; rotate: 1deg; }/* ---------- 07 · Campaign ---------- */

.tc-camp { background: var(--tc-paper); padding: var(--tc-gap) 0 0; color: var(--tc-ink); }/* the 1216 × 1279 field of Figma 84:12227, every poster placed in per cent of it */

.tc-mosaic { position: relative; max-width: 1216px; margin: 0 auto; aspect-ratio: 1216 / 1279; }
.tc-mosaic figure { position: absolute; margin: 0; }
.tc-mosaic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tc-mosaic__a { left: 0; top: 4.61%; width: 40.9%; aspect-ratio: 497.3 / 621.7; }
.tc-mosaic__e { left: 49.34%; top: 0; width: 32.48%; aspect-ratio: 395 / 493; }
.tc-mosaic__d { left: 57.81%; top: 46.36%; width: 32.48%; aspect-ratio: 395 / 593; }
.tc-mosaic__c { left: 9.13%; top: 61.14%; width: 40.87%; aspect-ratio: 1; }
.tc-bleed { margin: var(--tc-gap) 0 0; }
.tc-bleed img { display: block; width: 100%; height: auto; }
.tc-camp .tc-row { margin-top: var(--tc-gap); }
.tc-row { position: relative; overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: none; }
.tc-row.is-drag { cursor: grabbing; }
.tc-row__track { display: flex; gap: clamp(8px, 1vw, 16px); width: max-content; will-change: transform; }
.tc-camp .tc-row__track img { display: block; height: clamp(320px, 34vw, 600px); width: auto; pointer-events: none; -webkit-user-drag: none; }
.tc-row:focus-visible { box-shadow: inset 0 0 0 2px var(--tc-ink); }/* ---------- 07b · Icons (Figma 87:12467): 4 × 2 cards of 400, 40 apart, in 1720 ---------- */

.tc-ico { background: var(--tc-paper); padding: var(--tc-gap) 0; }
.tc-ico__wrap { position: relative; max-width: 1720px; margin: 0 auto; padding: 0 var(--tc-side); box-sizing: content-box; }
.tc-ico__grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2.08vw, 40px); margin: 0; padding: 0; list-style: none; }
.tc-ico__card { position: relative; aspect-ratio: 1; background: #fff; border-radius: calc(36 / 400 * 100%); container-type: inline-size; }
.tc-ico__label { position: absolute; left: 0; right: 0; top: calc(24 / 400 * 100cqw); margin: 0; text-align: center; white-space: nowrap;
  font: 700 calc(34 / 400 * 100cqw) / normal "Instrument Sans", system-ui, sans-serif; color: #141517; opacity: .2; }
.tc-ico__stage { position: absolute; left: calc(20 / 400 * 100%); top: calc(85 / 400 * 100%); width: calc(360 / 400 * 100%); height: calc(291 / 400 * 100%); }
.tc-ico__stage img { position: absolute; left: 50%; top: 50%; height: 100%; width: auto; translate: -50% -50%; display: block; }
.tc-ico__gl { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tc-ico.is-3d .tc-ico__stage img { visibility: hidden; }
@media (max-width: 900px) { .tc-ico__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }/* ---------- 08 · The product opens on blue ---------- *//* ---------- 09 · One Friday: each hour on its ground; the time holds while the screen passes ---------- *//* ---------- 10 · Every block has a job ---------- *//* ---------- 11 · Every office ---------- *//* ---------- 12 · Students on lilac ---------- *//* ---------- 13 · Website ---------- *//* ---------- 14 · What we did ---------- */

@media (prefers-reduced-motion: reduce) {
  .tc-reveal-on [data-tc-reveal] { clip-path: none; transition: none; }
  .tc-palette > div, .tc-palette > div::before { transition: none; }
}/* ---------- phones ---------- */

@media (max-width: 900px) {
  .tc-spec { grid-template-columns: 1fr 1fr; }
  .tc-palette { height: auto; flex-direction: column; }
  .tc-palette > div { flex: none; height: 64px; flex-direction: row; align-items: center; gap: 12px; }
  .tc-palette > div > b + span + em { margin: 0 0 0 auto; }
  .tc-palette span { margin: 0; }
  .tc-palette > div:hover { flex-grow: 0; }
  .tc-sys .tc-sys__palette { height: auto; min-height: 0; }   /* the stacked rows take their own height (pre-launch QA: at 768 four colours hid under the next section) */
  .tc-sys .tc-sys__palette > div { padding: 0 20px; }
}
@media (min-width: 901px) and (max-width: 1280px) {   /* seven columns at a laptop width: the words must fit ("Attendance", "Enrolment") */
  .tc-sys .tc-sys__palette > div { padding: 16px 12px; }
  .tc-sys .tc-sys__palette b, .tc-sys .tc-sys__palette em { font-size: clamp(15px, 1.65vw, 28px); }
  .tc-sys .tc-sys__palette span { font-size: clamp(11px, 1vw, 15px); }
}
@media (max-width: 700px) {
  .tc-sys .tc-sys__build { width: calc(100% - 32px); margin-top: 48px; }
  .tc-sys .tc-sys__spec { margin-top: 48px; }
  .tc-sys .tc-sys__palette { height: auto; min-height: 0; margin-top: 48px; }
  .tc-sys .tc-sys__palette > div { padding: 0 16px; }
  .tc-sys .tc-sys__palette b, .tc-sys .tc-sys__palette em { font-size: 18px; }
  .tc-open__frame { padding: 56px 16px calc((100cqw - 32px) * 233.5 / 1384); }
  .tc-open__l1 { white-space: normal; }
  .tc-open__stage { width: 100%; margin: 40px 0 0; }
  .tc-from__frame { padding: 56px 16px 64px; }
  .tc-from__head { flex-direction: column; align-items: flex-start; gap: 16px; padding-right: 72px; }
  .tc-from__title { font-size: 26px; }
  .tc-from__grid { grid-template-columns: 1fr; row-gap: 32px; padding: 32px 0 0; }
  .tc-from__why, .tc-from__film, .tc-from__how, .tc-from__what { grid-column: 1; grid-row: auto; margin: 0; padding: 0; width: auto; }
  .tc-from__how, .tc-from__what { gap: 16px; }
  .tc-mosaic { aspect-ratio: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: start; }
  .tc-mosaic figure { position: static; width: 100%; }
  .tc-mosaic img { height: auto; }
}/* ---------- 05 · Construction: the mark on one unit (DixonBaxi-style spec drawing, our geometry from lockup-ink.svg) ---------- */
.tc-build__svg { display: block; width: 100%; height: auto; }
.tc-build__svg text { stroke: none; font: 500 21px "Instrument Sans", system-ui, sans-serif; letter-spacing: -.01em; }
.tc-build__svg text.n { font: italic 400 30px "Instrument Serif", Georgia, serif; }
.tc-build__ann path, .tc-build__ann circle { fill: none; }/* ---------- 08 · Product (Figma 87:25960, top part), on the 1920 grid scaled by --u ---------- */

.tc-prod { background: var(--tc-blue); color: #fff; container-type: inline-size; }
main > section.tc-prod { --u: min(var(--tc-cap), 100cqw / 1920); }
.tc-prod__floor { position: absolute; left: 0; right: 0; bottom: 0; height: calc(776.72 * var(--u)); }
.tc-prod__frame { position: relative; max-width: calc(1920 * var(--tc-cap)); height: calc(1471 * var(--u)); margin: 0 auto; }/* Figma 1595, everything 124 higher: the title starts 120 down like every scene */   
.tc-prod__head { position: absolute; z-index: 2; left: calc(112 * var(--u)); top: calc(120 * var(--u)); display: flex; align-items: flex-start; gap: calc(80 * var(--u)); }
.tc-prod__title { position: relative; z-index: 0; flex: none; width: calc(682 * var(--u)); margin: 0; font: 600 calc(164 * var(--u)) / 1.2732 "Instrument Sans", system-ui, sans-serif; color: var(--tc-ink); white-space: nowrap; }
.tc-prod__box { position: relative; display: inline-block; margin-left: .128em; }/* the strip, 678.35 × 214.9, mirrored and tilted 1° (Figma: rotate -179°, flip y) */

.tc-prod__box::before { content: ""; position: absolute; z-index: -1; left: -.117em; top: .0782em; width: 4.1363em; height: 1.3103em;
  background: url(assets/case/teached/prod-strip.svg) 0 0 / 100% 100% no-repeat; transform: rotate(1deg) scaleX(-1); }
.tc-prod__text { flex: none; width: calc(748 * var(--u)); margin: 0; font: 500 calc(25 * var(--u)) / 1.35 "Instrument Sans", system-ui, sans-serif; letter-spacing: -.0059em; text-wrap: pretty; }
.tc-prod__stage { position: absolute; z-index: 1; left: calc(268 * var(--u)); top: calc(449.5 * var(--u)); width: calc(1384 * var(--u)); }
.tc-prod__win { position: relative; z-index: 1; margin: 0; background: #fff; }
.tc-prod__win img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }/* ---------- 09–10 · A day at school, Color theory lab (Figma 87:12363, 87:25677) ---------- */

.tc-scene { container-type: inline-size; color: var(--tc-ink); }
main > section.tc-scene { --u: min(var(--tc-cap), 100cqw / 1920); }
.tc-scene--day { background: var(--tc-paper); }
.tc-scene--lab { background: #8EE39C; }
.tc-scene--att { background: #A8E4FA; }
.tc-scene--aid { background: #FFC266; }
.tc-scene::before { content: ""; position: absolute; inset: 0; background: url(assets/case/teached/from-grid.webp) center / cover; opacity: .02; pointer-events: none; }
.tc-scene__frame { position: relative; max-width: calc(1920 * var(--tc-cap)); margin: 0 auto; box-sizing: border-box; padding: calc(120 * var(--u)) 0 0 calc(228 * var(--u)); }
.tc-scene--day .tc-scene__frame { padding-bottom: calc(246.7 * var(--u)); }
.tc-scene--lab .tc-scene__frame, .tc-scene--att .tc-scene__frame, .tc-scene--aid .tc-scene__frame { padding-bottom: calc(100.2 * var(--u)); }
.tc-scene__head { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: calc(10 * var(--u)); width: calc(1463 * var(--u)); }
.tc-scene__title { flex: 1 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: calc(10 * var(--u)); margin: 0;
  font: 600 calc(108 * var(--u)) / .98 "Instrument Sans", system-ui, sans-serif; letter-spacing: -.035em; white-space: nowrap; }/* "at school": paper on the ink strip, 491.9 × 136.4, mirrored and tilted 1° (Figma: rotate -179°, flip y) */

.tc-scene__box { position: relative; z-index: 0; display: inline-block; box-sizing: border-box; width: 4.5757em; height: 1.3422em; padding: .0648em 0 0 .2758em; color: var(--tc-paper); }
.tc-scene__box::before { content: ""; position: absolute; z-index: -1; left: .0107em; top: .0396em; width: 4.5543em; height: 1.2629em;
  background: url(assets/case/teached/day-strip.svg) 0 0 / 100% 100% no-repeat; transform: rotate(1deg) scaleX(-1); }
.tc-scene__note { flex: none; width: calc(533 * var(--u)); margin: 0; font: 500 calc(25 * var(--u)) / 1.35 "Instrument Sans", system-ui, sans-serif; }
.tc-scene__stage { position: relative; width: calc(1384 * var(--u)); margin: calc(120.5 * var(--u)) 0 0 calc(40 * var(--u)); }
.tc-scene--lab .tc-scene__stage, .tc-scene--att .tc-scene__stage, .tc-scene--aid .tc-scene__stage { margin-top: calc(120.5 * var(--u)); }/* one gap from title to frame on every scene (Figma: 111 to 121) */   
.tc-scene__screen { position: relative; z-index: 1; margin: 0; overflow: hidden; background: #fff; }
.tc-scene__screen video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.tc-scene__floor { position: absolute; z-index: 0; top: 70.31%; left: calc(50% - 1260 / 1384 * 100%); width: calc(2520 / 1384 * 100%); max-width: none; height: auto; }
.tc-scene__art { position: absolute; z-index: 2; height: auto; max-width: none; }
.tc-scene__cal { left: calc(1077.6 * var(--u)); top: calc(647.7 * var(--u)); width: calc(431 * var(--u)); rotate: -6deg; }
.tc-scene__art--door { left: calc(182 * var(--u)); top: calc(649 * var(--u)); width: calc(340 * var(--u)); rotate: 6deg; }/* Figma 88:36618 */     
.tc-scene__art--circle { left: calc(-128 * var(--u)); top: calc(689 * var(--u)); width: calc(240 * var(--u)); rotate: -7deg; }/* Figma 88:36719 */ 

@media (max-width: 700px) {
  .tc-prod__frame { height: auto; padding: 56px 16px 0; }
  .tc-prod__head { position: static; flex-direction: column; gap: 20px; }
  .tc-prod__title { width: auto; font-size: 64px; }
  .tc-prod__text { width: auto; font-size: 17px; }
  .tc-prod__stage { position: relative; left: auto; top: auto; width: 100%; margin: 40px 0 0; }
  .tc-prod__floor { height: 300px; }
  .tc-prod__frame::after { content: ""; display: block; height: 140px; }
  .tc-scene__frame { padding: 56px 16px 48px; }
  .tc-scene--day .tc-scene__frame { padding-bottom: calc((100cqw - 32px) * 246.7 / 1384); }
  .tc-scene__head { flex-direction: column; align-items: flex-start; gap: 16px; width: auto; }
  .tc-scene__title { font-size: 44px; gap: 6px; }
  .tc-scene__note { width: auto; font-size: 17px; }
  .tc-scene__stage { width: 100%; margin: 32px 0 0; }
  .tc-scene__cal { left: auto; right: -4%; top: 62%; width: 30%; }
  .tc-scene__art--door { left: 10%; top: 70%; width: 24%; }
  .tc-scene__art--circle { left: -6%; top: 74%; width: 18%; }
}/* every product frame on the page (03, 08, 09, 10): one size (1384 × 865 at 1920), one radius, one outline, one shadow
   beneath (the Product frame's: a 1300 × 30 ellipse at 30 %, blurred 8, 37.5 under the frame) */

.tc-frame { aspect-ratio: 1384 / 865; overflow: hidden; border-radius: max(8px, calc(14 * var(--u))); box-shadow: 0 0 0 1px rgba(17, 18, 20, .08); }
.tc-shadow { position: absolute; z-index: 0; left: 1.879%; top: 100%; width: 96.243%; height: auto; max-width: none; margin-top: 1.5535%; pointer-events: none; }/* ---------- 12 · Brand in product, top (Figma 87:25961): on black, the log-in screen in the page's product frame ---------- */

.tc-bip { background: #000; color: var(--tc-paper); container-type: inline-size; }
main > section.tc-bip, main > section.tc-xr { --u: min(var(--tc-cap), 100cqw / 1920); }
.tc-bip::before, .tc-xr::before { content: ""; position: absolute; inset: 0; background: url(assets/case/teached/from-grid.webp) center / cover; opacity: .02; pointer-events: none; }
.tc-bip__frame { position: relative; max-width: calc(1920 * var(--tc-cap)); margin: 0 auto; box-sizing: border-box; padding: calc(120 * var(--u)) 0 calc(100.2 * var(--u)) calc(228 * var(--u)); }
.tc-bip__title { color: var(--tc-paper); }/* "in product": black on the paper strip, 551.4 × 148.4, tilted -1° (not mirrored) */

.tc-bip__box { position: relative; z-index: 0; display: inline-block; box-sizing: border-box; width: 5.1289em; height: 1.4634em; padding: .0702em 0 0 .2778em; color: #000; }
.tc-bip__box::before { content: ""; position: absolute; z-index: -1; left: .0116em; top: .0444em; width: 5.1057em; height: 1.3745em;
  background: url(assets/case/teached/bip-strip.svg) 0 0 / 100% 100% no-repeat; rotate: -1deg; }
.tc-bip__stage { position: relative; width: calc(1384 * var(--u)); margin: calc(120.5 * var(--u)) 0 0 calc(40 * var(--u)); }
.tc-bip__screen { position: relative; z-index: 1; margin: 0; background: #fcfcfc; }
.tc-bip__screen .tc-login__s { display: block; width: 100%; height: 100%; object-fit: cover; }/* ---------- 13 · Brand in product, the cards (Figma 88:27365): eight cards on paper, placed on the 1920 × 1673 frame ---------- */

.tc-xr { background: var(--tc-paper); color: var(--tc-ink); container-type: inline-size; }
.tc-xr__board { position: relative; max-width: calc(1920 * var(--tc-cap)); height: calc(1673 * var(--u)); margin: 0 auto; }
.tc-xr__it { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); margin: 0; }
.tc-xr__it img { display: block; width: 100%; height: 100%; }/* the loader's blocks (the log-in frame uses them) */

.tc-xr__t { --b: calc(26 * var(--u)); flex: none; display: grid; grid-template-columns: repeat(3, var(--b)); grid-template-rows: repeat(4, var(--b)); gap: calc(var(--b) * .156); }
.tc-xr__t i { border-radius: calc(var(--b) * .156); }
.tc-xr__t i:nth-child(1) { grid-area: 1 / 2; background: #FF453A; --dx: -40%; --dy: -160%; --r: -24deg; }
.tc-xr__t i:nth-child(2) { grid-area: 2 / 1; background: #FF9F0A; --dx: -170%; --dy: -40%; --r: 18deg; --i: 1; }
.tc-xr__t i:nth-child(3) { grid-area: 2 / 2; background: #FFD60A; --dx: 60%; --dy: -120%; --r: 30deg; --i: 2; }
.tc-xr__t i:nth-child(4) { grid-area: 2 / 3; background: #32D74B; --dx: 170%; --dy: -60%; --r: -20deg; --i: 3; }
.tc-xr__t i:nth-child(5) { grid-area: 3 / 2; background: #64D2FF; --dx: -150%; --dy: 80%; --r: 26deg; --i: 4; }
.tc-xr__t i:nth-child(6) { grid-area: 4 / 2; background: #0A84FF; --dx: -60%; --dy: 170%; --r: -30deg; --i: 5; }
.tc-xr__t i:nth-child(7) { grid-area: 4 / 3; background: #BF5AF2; --dx: 150%; --dy: 120%; --r: 22deg; --i: 6; }

@media (max-width: 700px) {
  .tc-bip__frame { padding: 56px 16px 72px; }
  .tc-bip__stage { width: 100%; margin: 32px 0 0; }
  .tc-xr__board { height: auto; padding: 56px 16px 72px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
  .tc-xr__it { position: relative; left: auto; top: auto; width: 100%; height: auto; max-width: calc(var(--w) * 1px); aspect-ratio: var(--w) / var(--h); }
}/* the log-in flow (on his note, 2026-10-15): the real Teached log-in (assets/case/teached/login-demo, a copy of the prototype)
   runs in the frame, driven by its demo.js: Log in → the second step (email code typed wrong once, then right; or the app) →
   "You're in"; then here the t assembles while the school opens, Elena's overview arrives, and it starts again. */

.tc-bip__screen > * { position: absolute; inset: 0; }
.tc-bip__screen .tc-login__s { position: relative; }
.tc-login__live { overflow: hidden; opacity: 0; }
.tc-login__live.is-ready { opacity: 1; transition: opacity .4s ease; }/* out at once (the old run never shows), in softly */   
.tc-login__live iframe { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; border: 0; transform-origin: 0 0; background: #fcfcfc; }
.tc-login__load { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(28 * var(--u)); background: #fcfcfc; opacity: 0; transition: opacity .35s ease; }
.tc-login__load .tc-xr__t { --b: calc(30 * var(--u)); }
.tc-login__load b { font: 500 max(14px, calc(22 * var(--u))) / 1.2 "Instrument Sans", system-ui, sans-serif; color: #646464; letter-spacing: -.01em; }
[data-login][data-step="load"] .tc-login__load { opacity: 1; }
[data-login][data-step="load"] .tc-login__load .tc-xr__t i { animation: tc-asm-in 1.1s both; animation-delay: calc(.25s + var(--i, 0) * 70ms); }
@keyframes tc-asm-in { from { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } to { opacity: 1; transform: none; } }
.tc-login__load .tc-xr__t i { animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
.tc-login__home { width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0; transition: opacity .6s cubic-bezier(.45, 0, .2, 1); }
[data-login][data-step="home"] .tc-login__home { opacity: 1; }/* ---------- 14 · Website (Figma 90:48069): on yellow, the site scrolling in a browser window ---------- */

.tc-site { background: #F9D309; color: var(--tc-ink); container-type: inline-size; }
main > section.tc-site { --u: min(var(--tc-cap), 100cqw / 1920); }
.tc-site::before { content: ""; position: absolute; inset: 0; background: url(assets/case/teached/from-grid.webp) center / cover; opacity: .02; pointer-events: none; }
.tc-site__frame { position: relative; max-width: calc(1920 * var(--tc-cap)); margin: 0 auto; box-sizing: border-box; padding: calc(120 * var(--u)) 0 calc(272.4 * var(--u)) calc(228 * var(--u)); }/* "Website": paper on the red strip, 498.7 × 137.2, tilted -1° */

.tc-site__box { position: relative; z-index: 0; display: inline-block; box-sizing: border-box; width: 4.6389em; height: 1.3511em; padding: .0616em 0 0 .2778em; color: var(--tc-paper); }
.tc-site__box::before { content: ""; position: absolute; z-index: -1; left: .0107em; top: .0402em; width: 4.6174em; height: 1.2707em;
  background: url(assets/case/teached/site-strip.svg) 0 0 / 100% 100% no-repeat; rotate: -1deg; }
.tc-site__win { position: relative; overflow: hidden; box-sizing: border-box; width: calc(1364 * var(--u)); height: calc(853 * var(--u)); margin: calc(99.64 * var(--u)) 0 0 calc(50 * var(--u));
  border: max(4px, calc(8 * var(--u))) solid rgba(0, 0, 0, .1); border-radius: max(8px, calc(14 * var(--u))); background: #fff; box-shadow: 0 0 0 1px rgba(17, 18, 20, .08); }
.tc-site__win img { position: absolute; left: 0; top: 0; display: block; width: 100%; height: auto; will-change: transform; }
@media (max-width: 700px) {
  .tc-site__frame { padding: 56px 16px 72px; }
  /* phones get the phone-width capture of the site in a portrait window */
  .tc-site__win { width: min(100%, 320px); height: auto; aspect-ratio: 390 / 700; margin: 32px 0 0; }
}/* More projects closes the case (as on Daisy and MyVault); the footer 200 under it (the site default 400 is too much) */

footer.site-footer { padding-top: 200px; }