/* Version 4 — Fresh. Version 2's layout and colour balance (white and beige
   paper, vanguard green as the one strong colour, a grey frame for the real
   lesson) wearing Version 1's look: tight Manrope display type, mono labels,
   framed panels, beige highlight cards and green feature cards. Headings use
   Version 2's serif (Fraunces). The big panels are a faint vanguard green. */

:root {
  /* paper: white and beige */
  --paper: #f8f6f0;
  --paper-2: #efe8d8;
  --paper-3: #e6dcc5;
  --white: #ffffff;
  --edge: #ddd6c6;
  --edge-2: #c8bea9;
  /* ink and grey */
  --ink: #1b1d1b;
  --ink-soft: #4c504b;
  --ink-faint: #82847c;
  --grey: #1b1c1a;
  --grey-2: #262724;
  --grey-line: #3a3c38;
  /* vanguard green */
  --vg: #1f4e3c;
  --vg-2: #2f6b52;
  --vg-lite: #8fc6a8;
  --vg-soft: rgba(31,78,60,.08);
  /* faint vanguard green, for the big panels */
  --mist: #e4ede7;
  --mist-2: #d2e1d7;
  --mist-3: #b9cfc1;
  /* beige highlight */
  --beige: #e8dcc2;
  --beige-2: #f1e3bd;
  --beige-ink: #1d1c17;

  --r: 22px;
  --r-sm: 16px;
  --sans: "Manrope", system-ui, sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --page: min(1240px, 100% - 36px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55;
       -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: -.015em; line-height: 1.05; text-wrap: balance; }
h1 { letter-spacing: -.03em; line-height: .95; }
h1 i, h2 i { color: var(--vg); }
h1 b { color: var(--vg); font-weight: 700; }
p { margin: 0; }
a { color: inherit; }
.wrap { width: var(--page); margin-inline: auto; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 99; background: var(--vg); color: #fff; padding: 8px 12px; border-radius: 8px; }
.eb { font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--vg); }

/* ---------- lockup ---------- */
.lk { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
/* the mark is a live brain of dots on the paper itself: no tile behind it */
.lk__mark { display: grid; place-items: center; flex: none; }
.lk__mark canvas { display: block; }
.th .lk__mark { animation: lk-float 7s ease-in-out infinite; }
@keyframes lk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.lk__name { display: block; font: 500 20px/1 var(--serif); letter-spacing: -.01em; }
.lk__sub { display: block; font: 500 10px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }

/* ---------- the entrance ----------
   The brain builds itself in the middle of the screen, flies into the corner to
   become the header mark, and the page opens up behind it. index.html sets
   .intro-on before the first paint; shared/brain.js takes it from there. */
.th, main, .tf { transition: opacity .6s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
html.intro-on { overflow: hidden; }
html.intro-on .th, html.intro-on main, html.intro-on .tf { opacity: 0; }
html.intro-on main, html.intro-on .tf { transform: translateY(16px); }
html.intro-open .th { transition-duration: .35s; }
.intro {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: var(--paper); transition: background-color .55s ease .15s;
}
.intro.is-landing { background-color: rgba(248, 246, 240, 0); pointer-events: none; }
.intro__stage { display: grid; justify-items: center; gap: 22px; }
.intro__logo { display: block; transition: transform .95s cubic-bezier(.65, 0, .25, 1); will-change: transform; }
.intro__word { display: grid; justify-items: center; gap: 10px; transition: opacity .3s ease; }
.intro.is-landing .intro__word, .intro.is-landing .intro__skip { opacity: 0; }
.intro__name { font: 400 clamp(38px, 8vw, 62px)/1 var(--serif); letter-spacing: -.03em; color: var(--ink); }
.intro__sub { font: 500 11px var(--mono); letter-spacing: .34em; text-transform: uppercase; color: var(--vg); padding-left: .34em; }
.intro__skip {
  position: absolute; right: 22px; bottom: 22px; background: none; border: 0; cursor: pointer;
  font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
  padding: 8px 10px; transition: opacity .3s ease;
}
.intro__skip:hover { color: var(--vg); }
@media (prefers-reduced-motion: reduce) {
  .th .lk__mark { animation: none; }
  .th, main, .tf { transition: none; }
}

/* ---------- header ---------- */
.th { position: sticky; top: 0; z-index: 50; background: rgba(248,246,240,.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--edge); }
.th__in { width: var(--page); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 0; }
.th__nav { display: flex; align-items: center; gap: 4px; }
.th__nav a { padding: 8px 13px; border-radius: 99px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); text-decoration: none; }
.th__nav a:hover { color: var(--ink); background: var(--paper-2); }
.th__nav a.is-on { color: var(--vg); }
.th__nav a.th__cta { background: var(--vg); color: #fff; margin-left: 6px; }
.th__nav a.th__cta:hover { background: var(--vg-2); }
.th__burger { display: none; background: var(--white); border: 1px solid var(--edge-2); color: var(--ink); border-radius: 10px; padding: 7px; cursor: pointer; }
@media (max-width: 820px) {
  .th__burger { display: grid; place-items: center; }
  .th__nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch;
             padding: 10px 18px 16px; background: var(--paper); border-bottom: 1px solid var(--edge); }
  .th__nav.is-open { display: flex; }
  .th__nav a { padding: 12px; font-size: 16px; }
  .th__nav a.th__cta { margin: 6px 0 0; text-align: center; }
}

/* ---------- buttons ---------- */
.bt { display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: 12px; font: 700 14px var(--sans);
      text-decoration: none; background: var(--vg); color: #fff; border: 1px solid var(--vg); cursor: pointer; transition: background .2s, border-color .2s; }
.bt:hover { background: var(--vg-2); border-color: var(--vg-2); }
.bt--line { background: var(--white); color: var(--ink); border-color: var(--edge-2); }
.bt--line:hover { background: var(--beige); border-color: var(--beige); }

/* ---------- hero ---------- */
.hero { padding: clamp(50px, 8vw, 96px) 0 20px; display: grid; gap: 30px; }
@media (min-width: 960px) { .hero { grid-template-columns: 1.1fr .9fr; align-items: end; } }
.hero h1 { font-size: clamp(44px, 7.4vw, 104px); }
.hero__l { color: var(--ink-soft); font-size: clamp(16px, 1.9vw, 19px); line-height: 1.55; max-width: 46ch; }
.hero__cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }

.hero__h { font-size: clamp(44px, 7.4vw, 104px); letter-spacing: -.03em; line-height: .95; }
.hero.line-top { padding-top: clamp(64px, 9vw, 110px); padding-bottom: clamp(64px, 9vw, 110px); }

/* ---------- the quiz hero (from Version 3) ---------- */
.hero--quiz { padding-bottom: clamp(50px, 7vw, 90px); }
@media (min-width: 1000px) { .hero--quiz { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 56px; } }
.hero--quiz h1 { font-size: clamp(46px, 7.2vw, 108px); margin-top: 18px; letter-spacing: -.035em; }
.hero--quiz h1 .w { display: inline-block; }
.hero--quiz .hero__l { margin-top: 22px; }
.hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; min-height: 36px; }
.pchip { display: inline-flex; gap: 6px; align-items: center; background: var(--beige); border-radius: 99px; padding: 7px 13px;
         font-size: 13px; font-weight: 600; color: var(--beige-ink); }
.pchip b { color: var(--vg); }
.quiz { background: var(--white); border: 1px solid var(--edge); border-radius: 26px; padding: clamp(22px, 3vw, 34px);
        box-shadow: 0 30px 60px -40px rgba(31,78,60,.35); }
.quiz__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.quiz__top span { font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.quiz__bar { display: flex; gap: 5px; margin-top: 14px; }
.quiz__bar i { flex: 1; height: 4px; border-radius: 4px; background: var(--mist-2); transition: background .3s; }
.quiz__bar i.on { background: var(--vg); }
.quiz__q { font: 400 clamp(22px, 2.5vw, 30px)/1.15 var(--serif); letter-spacing: -.015em; margin: 22px 0 18px; }
.quiz__opts { display: grid; gap: 9px; }
.quiz__opts button { text-align: left; background: var(--paper); border: 1px solid var(--edge); border-radius: 14px; padding: 15px 16px;
                     font: 600 15px var(--sans); color: var(--ink); cursor: pointer; display: flex; gap: 12px; align-items: baseline;
                     transition: background .2s, border-color .2s, transform .2s; }
.quiz__opts button:hover { border-color: var(--vg); background: var(--mist); transform: translateX(3px); }
.quiz__opts button i { font: 500 11px var(--mono); font-style: normal; color: var(--vg); width: 18px; flex: none; }
.quiz__opts button small { display: block; font-weight: 500; color: var(--ink-faint); font-size: 13px; margin-top: 2px; }
.quiz__step { transition: opacity .25s, transform .25s; }
.quiz__step.out { opacity: 0; transform: translateX(-10px); }
.res { display: grid; gap: 14px; }
.res h3 { font-size: 32px; }
.res__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.res__grid div { background: var(--paper); border: 1px solid var(--edge); border-radius: 12px; padding: 12px 14px; }
.res__grid div:nth-child(1), .res__grid div:nth-child(4) { background: var(--beige); border-color: var(--beige); }
.res__grid span { display: block; font: 500 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.res__grid b { display: block; font-size: 16px; margin-top: 3px; }
.res__why { background: var(--mist); color: var(--vg); border-radius: 12px; padding: 12px 14px; font-size: 14.5px; }

/* ---------- rebuilt for you (from Version 3), in the light palette ---------- */
.spot { --bg: var(--paper); --panel: #fff; --panel-2: #f6f9f7; --raised: #edf3ef; --line: var(--mist-2); --line-strong: var(--mist-3);
        --ink: #1b1d1b; --ink-soft: #4c504b; --ink-faint: #6f7a73;
        --green: var(--vg); --green-hover: var(--vg-2); --on-green: #fff; --green-soft: rgba(31,78,60,.1);
        --orange: #a8742a; --orange-soft: rgba(168,116,42,.12); --on-orange: #fff;
        --radius-sm: 14px; --font-ui: var(--sans); --font-mono: var(--mono);
        background: var(--mist); border: 1px solid var(--mist-2); border-radius: 26px; padding: clamp(22px, 4vw, 44px);
        display: grid; gap: 28px; margin-bottom: clamp(40px, 6vw, 70px); scroll-margin-top: 80px; animation: spotIn .6s cubic-bezier(.2,.8,.2,1); }
.spot[hidden] { display: none; }
@keyframes spotIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) { .spot { grid-template-columns: .9fr 1.1fr; align-items: center; } .spot.spot--wide { grid-template-columns: 1fr; } }
.spot h2 { font-size: clamp(30px, 4vw, 50px); margin-top: 12px; }
.spot .l { color: var(--ink-soft); font-size: 17px; line-height: 1.6; margin-top: 14px; max-width: 52ch; }
.spot__stage { background: var(--white); border: 1px solid var(--mist-2); border-radius: 20px; min-height: 300px; padding: 20px; position: relative; overflow: hidden; }
.spot--wide .spot__stage { min-height: 0; padding: clamp(10px, 2vw, 20px); }
.spot .demo__gate { background: rgba(228,237,231,.78); }

/* visual: a diagram that draws itself */
.dg { position: absolute; inset: 20px; }
.dg__n { position: absolute; transform: translate(-50%, -50%); background: var(--paper); border: 1px solid var(--edge); border-radius: 12px;
         padding: 10px 14px; text-align: center; font-weight: 700; font-size: 14px; opacity: 0; transition: opacity .5s, border-color .4s, transform .5s, background .4s; }
.dg__n small { display: block; font: 500 10px var(--mono); color: var(--ink-faint); letter-spacing: .08em; margin-top: 2px; }
.dg__n.on { opacity: 1; }
.dg__n.lit { border-color: var(--vg); background: var(--beige); color: var(--vg); transform: translate(-50%, -50%) scale(1.06); }
.dg svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dg path { stroke: var(--mist-3); stroke-width: 2; fill: none; stroke-dasharray: 300; stroke-dashoffset: 300; transition: stroke-dashoffset .9s ease; }
.dg path.on { stroke-dashoffset: 0; stroke: var(--vg); }
.dg__cap { position: absolute; left: 0; right: 0; bottom: 0; font-size: 15px; color: var(--ink-soft); }
.dg__cap b { color: var(--vg); }

/* hands-on: a real check-in */
.ck { display: grid; gap: 10px; }
.ck p.q { font: 400 22px/1.2 var(--serif); letter-spacing: -.015em; }
.ck button { text-align: left; background: var(--paper); border: 1px solid var(--edge); color: var(--ink); border-radius: 12px; padding: 13px 15px;
             font: 600 15px var(--sans); cursor: pointer; transition: border-color .2s, background .2s; }
.ck button:hover:not(:disabled) { border-color: var(--vg); background: var(--mist); }
.ck button.ok { background: var(--mist); border-color: var(--vg); color: var(--vg); }
.ck button.no { background: var(--beige); border-color: #b99d5f; color: #6b5526; }
.ck .v { color: var(--ink-soft); font-size: 14.5px; min-height: 1.2em; }

/* ---------- the shelf ---------- */
.room { margin-top: 30px; background: var(--paper-2); border: 1px solid var(--edge); border-radius: 26px; padding: clamp(18px, 3vw, 34px);
        position: relative; overflow: hidden; }
.room__cap { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: baseline; }
.room__cap h2 { font-size: clamp(22px, 2.6vw, 30px); }
.room__cap p { color: var(--ink-faint); font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; }

.shelf { margin-top: 26px; position: relative; }
.shelf__row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: end; padding: 0 10px; min-height: 150px; }
.shelf__board { height: 16px; background: linear-gradient(#cfae7e, #b48f5f); border-radius: 4px; box-shadow: 0 10px 18px rgba(80,60,30,.16); }
.shelf__board::after { content: ""; display: block; height: 4px; margin: 0 14px; background: #9c7a4c; border-radius: 0 0 4px 4px; transform: translateY(16px); }
.mat-item { background: none; border: 0; padding: 0 0 2px; cursor: pointer; display: grid; justify-items: center; gap: 10px;
            transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.mat-item svg { width: 100%; max-width: 132px; height: auto; overflow: visible; filter: drop-shadow(0 6px 6px rgba(80,60,30,.14)); }
.mat-item span { font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); order: 2; }
.mat-item:hover { transform: translateY(-8px); }
.mat-item.on { transform: translateY(-14px); }
.mat-item.on span { color: var(--vg); }
.mat-item.on svg { filter: drop-shadow(0 16px 14px rgba(31,78,60,.25)); }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.mat-item:not(.on) svg { animation: bob 5s ease-in-out infinite; }
.mat-item:nth-child(2) svg { animation-delay: -.8s; } .mat-item:nth-child(3) svg { animation-delay: -1.6s; }
.mat-item:nth-child(4) svg { animation-delay: -2.4s; } .mat-item:nth-child(5) svg { animation-delay: -3.2s; } .mat-item:nth-child(6) svg { animation-delay: -4s; }
@media (max-width: 700px) {
  .shelf__row { grid-template-columns: repeat(3, 1fr); row-gap: 26px; }
  .mat-item span { font-size: 9.5px; }
}

/* ---------- the work mat ---------- */
.mat { margin-top: 44px; display: grid; gap: 12px; }
@media (min-width: 900px) { .mat { grid-template-columns: .9fr 1.1fr; align-items: stretch; } }
.mat__rug { background: var(--mist); border-radius: var(--r); border: 1px solid var(--mist-2); min-height: 320px; display: grid; place-items: center;
            position: relative; overflow: hidden; }
/* the wheel's rim and ticks, behind whatever is on the mat */
.mat__rug::after { content: ""; position: absolute; width: 150%; aspect-ratio: 1; border-radius: 50%; left: -25%; top: -25%;
                   background: repeating-conic-gradient(from 0deg, rgba(31,78,60,.16) 0 .4deg, transparent .4deg 22.5deg);
                   -webkit-mask: radial-gradient(circle, transparent 38%, #000 38.2%, #000 49.6%, transparent 50%);
                           mask: radial-gradient(circle, transparent 38%, #000 38.2%, #000 49.6%, transparent 50%); }
.mat__rug::before { content: "the work mat"; position: absolute; top: 16px; left: 18px; font: 500 10px var(--mono); letter-spacing: .14em;
                    text-transform: uppercase; color: var(--ink-faint); z-index: 1; }
.mat__big { width: 64%; max-width: 300px; position: relative; z-index: 1; transition: transform .55s cubic-bezier(.2,.9,.2,1.1), opacity .35s; }
.mat__big svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 16px 16px rgba(31,78,60,.2)); }
.mat__big.enter { transform: translateY(-120px) scale(.55) rotate(-6deg); opacity: 0; }
.mat__txt { background: var(--white); border: 1px solid var(--edge); border-radius: var(--r); padding: clamp(22px, 3vw, 32px); display: grid; gap: 16px; align-content: start;
            transition: opacity .3s; }
.mat__txt.out { opacity: 0; }
.mat__tag { justify-self: start; font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--vg); }
.mat__txt h3 { font-size: clamp(30px, 3.4vw, 44px); }
.mat__row { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--r-sm); border: 1px solid var(--edge); }
.mat__row b { font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.mat__row p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; }
.mat__row.now { background: var(--beige); border-color: var(--beige); }
.mat__row.now b { color: var(--vg); }
.mat__row.now p { color: var(--beige-ink); }

/* ---------- sections ---------- */
section.s { padding: clamp(64px, 9vw, 110px) 0; }
.line-top { border-top: 1px solid var(--edge); }
.s h2 { font-size: clamp(36px, 5.6vw, 76px); margin: 14px 0 18px; max-width: 16ch; letter-spacing: -.025em; }
.s .l { color: var(--ink-soft); font-size: clamp(16px, 1.9vw, 19px); line-height: 1.6; max-width: 58ch; }
.rise { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; } .mat-item svg { animation: none !important; } }

/* ---------- her story: sticky year, chapters as cards ---------- */
.story { display: grid; gap: 24px; margin-top: 40px; }
@media (min-width: 900px) { .story { grid-template-columns: 360px 1fr; gap: 40px; } }
.story__year { position: sticky; top: 90px; align-self: start; background: var(--mist); border: 1px solid var(--mist-2); border-radius: var(--r);
               padding: 26px 26px 24px; color: var(--vg); overflow: hidden; }
.story__year::before { content: attr(data-cap); display: block; font: 500 10.5px var(--mono); letter-spacing: .14em;
                       text-transform: uppercase; color: var(--vg-2); margin-bottom: 30px; }
.story__year b { display: block; font: 300 clamp(72px, 8.4vw, 132px)/.85 var(--serif); white-space: nowrap; letter-spacing: -.04em; color: var(--vg);
                 transition: opacity .3s; font-variant-numeric: oldstyle-nums; }
.story__year span { display: block; font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-top: 16px; }
.story__bar { height: 3px; background: var(--mist-3); border-radius: 3px; margin-top: 22px; overflow: hidden; }
.story__bar i { display: block; height: 100%; width: 0; background: var(--vg); transition: width .4s; }
@media (max-width: 899px) { .story__year { top: 61px; z-index: 5; padding: 16px 20px; display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: 16px; }
  .story__year::before { display: none; }
  .story__year b { font-size: 52px; grid-row: span 2; }
  .story__year span { margin-top: 0; }
  .story__bar { margin-top: 10px; } }

.chs { display: grid; gap: 12px; }
.ch { display: grid; gap: 8px; padding: 24px; border-radius: var(--r-sm); border: 1px solid var(--edge); background: var(--white);
      opacity: .45; transition: opacity .5s, background .5s, border-color .5s, color .5s; }
@media (min-width: 760px) { .ch { grid-template-columns: 110px 1fr; column-gap: 24px; align-items: baseline; }
  .ch small { grid-row: span 2; } }
.ch.act { opacity: 1; background: var(--beige); border-color: var(--beige); color: var(--beige-ink); }
.ch small { font: 300 clamp(30px, 3.2vw, 42px)/1 var(--serif); letter-spacing: -.03em; color: var(--edge-2); transition: color .5s; font-variant-numeric: oldstyle-nums; }
.ch.act small { color: var(--vg); }
.ch h3 { font-size: clamp(24px, 2.6vw, 32px); }
.ch p { color: var(--ink-soft); font-size: 16px; line-height: 1.65; max-width: 58ch; }
.ch.act p { color: #3a372f; }
.ch.us { background: var(--vg); border-color: var(--vg); color: #fff; }
.ch.us small { color: var(--beige); }
.ch.us p { color: #d8eadf; }

/* ---------- bento boxes (Version 1's layout) ---------- */
.bento { display: grid; gap: 12px; margin-top: 34px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.bx { border-radius: var(--r-sm); border: 1px solid var(--edge); background: var(--white); padding: 22px; display: grid; gap: 10px; align-content: start;
      transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, background .3s, border-color .3s; }
.bx.hl { background: var(--beige); border-color: var(--beige); }
.bx__k { font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.bx h3 { font-size: 24px; }
.bx p { color: var(--ink-soft); font-size: 15px; line-height: 1.55; }
.bx .bx__then { font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--vg); border-bottom: 1px dashed var(--edge-2); padding-bottom: 10px; }
.bx .bx__then:has(+ .bx__was) { border: 0; padding-bottom: 0; margin-bottom: -4px; }
.bx .bx__was { color: var(--ink-faint); font-size: 14px; border-bottom: 1px dashed var(--edge-2); padding-bottom: 10px; }
.bx.hl p { color: #3a372f; } .bx.hl .bx__then { color: var(--vg); border-color: rgba(0,0,0,.18); }
/* hover: grow a little and light up */
.bx:hover { transform: translateY(-4px) scale(1.03); background: var(--mist); border-color: var(--vg); box-shadow: 0 18px 34px -18px rgba(31,78,60,.45); }
.bx.hl:hover { background: var(--beige-2); }
.bx:hover .bx__k { color: var(--vg); }
@media (prefers-reduced-motion: reduce) { .bx:hover { transform: scale(1.03); } }

/* checkerboard of squares: fixed columns so the pattern can alternate per row */
.bento--check { grid-template-columns: 1fr; }
/* one per row on a phone: a square would be mostly empty, so it fits its text */
.bento--check .bx { align-content: start; }
.bento--check .bx:nth-child(odd) { background: var(--beige); border-color: var(--beige); }
@media (min-width: 560px) {
  .bento--check { grid-template-columns: repeat(2, 1fr); }
  .bento--check .bx { aspect-ratio: 1; }
  .bento--check .bx:nth-child(odd) { background: var(--white); border-color: var(--edge); }
  .bento--check .bx:nth-child(4n+1), .bento--check .bx:nth-child(4n+4) { background: var(--beige); border-color: var(--beige); }
}
@media (min-width: 1000px) {
  .bento--check { grid-template-columns: repeat(4, 1fr); }
  .bento--check .bx:nth-child(4n+1), .bento--check .bx:nth-child(4n+4) { background: var(--white); border-color: var(--edge); }
  .bento--check .bx:nth-child(8n+1), .bento--check .bx:nth-child(8n+3),
  .bento--check .bx:nth-child(8n+6), .bento--check .bx:nth-child(8n+8) { background: var(--beige); border-color: var(--beige); }
}
.bento--check .bx:hover { background: var(--mist); border-color: var(--vg); }

/* ---------- why we took her name (story page) ---------- */
.name { padding-bottom: clamp(30px, 4vw, 50px); }
.name h2 { font-size: clamp(32px, 3.9vw, 54px); line-height: 1.12; letter-spacing: -.02em; max-width: 28ch; color: var(--vg); }
.name .l { font-size: 17px; line-height: 1.7; }
.name__grid { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: center; }
.bx--still { padding: 26px; }
.bx--still:hover { transform: none; background: var(--beige); border-color: var(--beige); box-shadow: none; }
.bx--still:hover .bx__k { color: var(--ink-faint); }
.name__disc { font-size: 13px !important; color: #6b6450 !important; }

/* ---------- rooms (audiences) ---------- */
.rooms { display: grid; gap: 12px; margin-top: 36px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.door { background: var(--white); border: 1px solid var(--edge); border-radius: 160px 160px var(--r-sm) var(--r-sm); padding: 72px 24px 26px; text-decoration: none;
        display: grid; gap: 10px; align-content: start; transition: transform .3s, border-color .3s; min-height: 330px; position: relative; }
/* no card is highlighted until the mouse is on it: then it grows a little and turns green */
.door { transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s, border-color .3s, color .3s, box-shadow .3s; }
.door:hover { transform: translateY(-4px) scale(1.03); background: var(--vg); border-color: var(--vg); color: #fff;
              box-shadow: 0 22px 40px -22px rgba(31,78,60,.6); }
.door:hover p, .door:hover li { color: #cfe0d6; }
.door:hover .door__n { color: var(--beige); }
.door:hover li { border-color: rgba(255,255,255,.2); }
@media (prefers-reduced-motion: reduce) { .door:hover { transform: scale(1.03); } }
.door__n { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); font: italic 400 26px var(--serif); color: var(--vg); }
.door h3 { font-size: 24px; text-align: center; }
.door p { color: var(--ink-soft); font-size: 15px; text-align: center; }
.door ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 7px; }
.door li { font-size: 13.5px; color: var(--ink-soft); border-top: 1px dashed var(--edge-2); padding-top: 7px; }
.door.alt { background: var(--vg); border-color: var(--vg); color: #fff; }
.door.alt p, .door.alt li { color: #cfe0d6; }
.door.alt .door__n { color: var(--beige); }
.door.alt li { border-color: rgba(255,255,255,.2); }

/* ---------- principle cards ---------- */
.pr { display: grid; gap: 12px; margin-top: 36px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.pr > div { background: var(--white); border: 1px solid var(--edge); border-radius: var(--r-sm); padding: 22px; display: grid; gap: 10px; align-content: start; }
.pr > div:nth-child(4n+1) { background: var(--beige); border-color: var(--beige); }
.pr h3 { font-size: 24px; }
.pr small { font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.pr .then { color: var(--ink-faint); font-size: 14px; border-bottom: 1px dashed var(--edge-2); padding-bottom: 10px; }
.pr .now { color: var(--ink); font-size: 15px; }

/* ---------- quote ---------- */
.q { font: italic 300 clamp(26px, 3.6vw, 46px)/1.2 var(--serif); letter-spacing: -.02em; max-width: 26ch; color: var(--ink); }
.q cite { display: block; font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-top: 18px; font-style: normal; }

/* ---------- faint green frame for the real lesson ---------- */
.dk { --bg: var(--paper); --panel: #fff; --panel-2: #f6f9f7; --raised: #edf3ef; --line: var(--mist-2); --line-strong: var(--mist-3);
      --ink: #1b1d1b; --ink-soft: #4c504b; --ink-faint: #6f7a73;
      --green: var(--vg); --green-hover: var(--vg-2); --on-green: #fff; --green-soft: rgba(31,78,60,.1);
      --orange: #a8742a; --orange-soft: rgba(168,116,42,.12); --on-orange: #fff;
      --radius-sm: 14px; --font-ui: var(--sans); --font-mono: var(--mono);
      background: var(--mist); color: var(--ink); border: 1px solid var(--mist-2); border-radius: 26px; padding: clamp(14px, 2.4vw, 26px); margin-top: 34px; }
.dk .eyebrow { color: var(--ink-faint); }
.dk .demo__gate { background: rgba(228,237,231,.78); }

ul.hon { list-style: none; padding: 0; margin: 26px 0 0; display: grid; }
ul.hon li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--edge); color: var(--ink-soft); }
ul.hon svg { color: var(--vg); margin-top: 3px; }

/* ---------- page head ---------- */
.ph { padding: clamp(56px, 9vw, 110px) 0 20px; }
.ph h1 { font-size: clamp(42px, 6.8vw, 92px); margin-top: 14px; max-width: 14ch; }
.ph p { color: var(--ink-soft); font-size: clamp(16px, 2vw, 20px); max-width: 54ch; margin-top: 22px; line-height: 1.55; }

/* ---------- footer ---------- */
.tf { border-top: 1px solid var(--edge); background: var(--paper-2); }
.tf__in { width: var(--page); margin-inline: auto; padding: 50px 0 96px; display: grid; gap: 24px; }
@media (min-width: 860px) { .tf__in { grid-template-columns: 1.2fr 1fr; } }
.tf__note { color: var(--ink-faint); margin-top: 12px; max-width: 36ch; font-size: 14.5px; }
.tf__nav { display: flex; flex-wrap: wrap; gap: 20px; align-content: start; }
.tf__nav a { color: var(--ink-soft); text-decoration: none; font-size: 14.5px; }
.tf__nav a:hover { color: var(--vg); }
.tf__disc { grid-column: 1 / -1; color: var(--ink-faint); font-size: 12.5px; line-height: 1.6; max-width: 90ch; }
.tf__bot { grid-column: 1 / -1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; border-top: 1px solid var(--edge);
           padding-top: 18px; color: var(--ink-faint); font-size: 12.5px; }

/* ---------- waitlist on paper ---------- */
.wl__input { background: var(--paper) !important; border-color: var(--edge-2) !important; color: var(--ink) !important; }
.wl__input:focus { border-color: var(--vg) !important; outline: none; }
.wl__input::placeholder { color: var(--ink-faint) !important; }
.wl .eyebrow { color: var(--ink-faint); }
.wl .eyebrow--green { color: var(--vg); }
.wl__h { font-family: var(--serif) !important; font-weight: 400 !important; color: var(--ink); }
.wl__lede, .wl__msg { color: var(--ink-soft) !important; }
.wl .chip { background: var(--white); border: 1px solid var(--edge-2); color: var(--ink-soft); border-radius: 99px; padding: 8px 13px; font-size: 13px; font-weight: 600; }
.wl .chip.is-on { background: var(--beige); border-color: var(--beige); color: var(--beige-ink); }
.wl__go { background: var(--vg) !important; border-color: var(--vg) !important; color: #fff !important; border-radius: 12px !important; padding: 13px 22px !important; }


/* =====================================================================
   The bolder layer: texture, a frame, one full-width green band, a live
   lesson strip, a huge quote, and motion that shows what Tessorio does.
   ===================================================================== */

/* 6. paper grain over everything, and a thin printed frame */
body::before { content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .09; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (min-width: 900px) {
  body::after { content: ""; position: fixed; inset: 10px; z-index: 71; pointer-events: none; border: 1px solid rgba(31,78,60,.22); border-radius: 18px; }
}

/* buttons for dark green ground */
.bt--beige { background: var(--beige); color: var(--vg); border-color: var(--beige); }
.bt--beige:hover { background: #fff; border-color: #fff; }
.bt--ghostlight { background: transparent; color: var(--beige); border-color: rgba(232,220,194,.45); }
.bt--ghostlight:hover { background: rgba(232,220,194,.12); border-color: var(--beige); }

/* 3. the live lesson strip */
.live { display: grid; gap: 18px; align-items: center; margin: 0 0 clamp(40px, 6vw, 70px); padding: 14px; border-radius: 26px;
        background: var(--white); border: 1px solid var(--edge); box-shadow: 0 30px 60px -45px rgba(31,78,60,.45); }
@media (min-width: 900px) { .live { grid-template-columns: 260px 1fr 150px; } }
.live__txt { padding: 12px 14px; }
.live__txt h3 { font-size: clamp(24px, 2.4vw, 30px); margin-top: 10px; }
.live__dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #c0392b; margin-right: 8px; vertical-align: 1px;
             animation: livePulse 1.6s ease-in-out infinite; }
@keyframes livePulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.live__stage { position: relative; height: 190px; background: var(--mist); border-radius: 18px; overflow: hidden; }
.live__stage .dg { inset: 16px 20px; }
.live__go { display: grid; place-content: center; gap: 4px; height: 100%; min-height: 90px; border-radius: 18px; background: var(--vg); color: var(--beige);
            text-decoration: none; font: 400 20px/1.15 var(--serif); padding: 16px; transition: background .25s; }
.live__go span { font-size: 26px; transition: transform .25s; }
.live__go:hover { background: var(--vg-2); }
.live__go:hover span { transform: translateX(6px); }

/* 1. the bold band: solid vanguard green, full width, huge beige type */
.band { position: relative; overflow: hidden; background: var(--vg); color: var(--beige); padding: clamp(80px, 12vw, 170px) 0; }
.band__in { position: relative; z-index: 1; }
.band .eb { color: var(--vg-lite); }
.band__h { font: 400 clamp(56px, 10.5vw, 168px)/.9 var(--serif); letter-spacing: -.04em; margin-top: 22px; max-width: 11ch; color: var(--beige); }
.band__h i { color: #fff; font-weight: 300; }
.band__foot { display: grid; gap: 26px; margin-top: clamp(34px, 5vw, 60px); align-items: end; }
@media (min-width: 900px) { .band__foot { grid-template-columns: 1fr auto; } }
.band__foot p { color: #cfe0d6; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.6; max-width: 52ch; }
.band .hero__cta { margin-top: 0; }

/* 5. the wheel from Version 1, turning very slowly behind it */
.band__wheel { position: absolute; width: min(1100px, 130vw); aspect-ratio: 1; right: -22%; top: 50%; transform: translateY(-50%); opacity: .55; }
.band__wheel svg { width: 100%; height: 100%; animation: wheelTurn 140s linear infinite; }
@keyframes wheelTurn { to { transform: rotate(360deg); } }
.bw__rim, .bw__spoke { fill: none; stroke: rgba(232,220,194,.2); stroke-width: 1; }
.bw__tick { stroke: rgba(232,220,194,.2); stroke-width: 1; }
.bw__label { font: 500 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; fill: rgba(232,220,194,.45); }
.bw__glyph { font: italic 400 16px var(--serif); fill: rgba(232,220,194,.35); }
@media (max-width: 700px) { .band__wheel { right: -60%; opacity: .4; } }

/* 7. a different shape for the close: one huge quote across the page */
.bigq { padding: clamp(70px, 9vw, 120px) 0 clamp(80px, 11vw, 150px); background: var(--paper-2); border-block: 1px solid var(--edge); position: relative; overflow: hidden; }
.bigq .wrap { position: relative; }
.bigq__mark { display: block; height: .42em; margin-left: -.06em; font: 400 clamp(180px, 20vw, 320px)/.82 var(--serif); color: var(--vg); opacity: .9; pointer-events: none; }
.bigq__t { position: relative; font: italic 300 clamp(34px, 5.4vw, 80px)/1.08 var(--serif); letter-spacing: -.03em; max-width: 20ch; color: var(--ink); }
.bigq__c { position: relative; margin-top: 30px; font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--vg); }
.bigq__c i { font-style: normal; }
.close { display: grid; gap: 44px; }
@media (min-width: 900px) { .close { grid-template-columns: .9fr 1.1fr; align-items: start; } }
.close h2 { max-width: 14ch; }
.close ul.hon { margin-top: 0; border-top: 1px solid var(--edge); }

/* 5. motion that shows the idea */
.hero--quiz h1 .w { display: inline-block; }
/* the shelf materials drop into place when the shelf comes into view (story page) */
.shelf.drop .mat-item { opacity: 0; transform: translateY(-60px) rotate(-4deg); }
.shelf.drop.in .mat-item { opacity: 1; transform: none; transition: opacity .5s, transform .8s cubic-bezier(.3,1.4,.5,1); }
.shelf.drop.in .mat-item:nth-child(2) { transition-delay: .08s; } .shelf.drop.in .mat-item:nth-child(3) { transition-delay: .16s; }
.shelf.drop.in .mat-item:nth-child(4) { transition-delay: .24s; } .shelf.drop.in .mat-item:nth-child(5) { transition-delay: .32s; }
.shelf.drop.in .mat-item:nth-child(6) { transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
  .band__wheel svg { animation: none; }
  .shelf.drop .mat-item { transform: none; }
  .live__dot { animation: none; }
}


/* ---------- hands-on labs ---------- */
.lab { display: grid; gap: 18px; margin-top: 38px; background: var(--white); border: 1px solid var(--edge); border-radius: 26px;
       padding: clamp(18px, 2.6vw, 30px); box-shadow: 0 30px 60px -45px rgba(31,78,60,.4); }
@media (min-width: 900px) { .lab { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 34px; } }
.lab__tag { font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--vg); }
.lab__panel h3 { font-size: clamp(26px, 3vw, 38px); margin: 12px 0 18px; }
.lab__say { color: var(--ink-soft); font-size: 17px; line-height: 1.6; min-height: 3.2em; max-width: 42ch; }
.lab__say.is-right { color: var(--vg); }
.lab__say.is-right b { font-weight: 700; }
.lab__say.is-wrong { color: #8a6a1f; }
.lab__steps { display: flex; gap: 8px; margin-top: 20px; }
.lab__steps i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font: 500 12px var(--mono);
                background: var(--paper); border: 1px solid var(--edge); color: var(--ink-faint); font-style: normal; transition: background .3s, color .3s, border-color .3s; }
.lab__steps i.on { background: var(--vg); border-color: var(--vg); color: var(--beige); }
.lab__again { margin-top: 22px; }
.lab__again[hidden] { display: none; }
.lab__stage { background: var(--mist); border-radius: 20px; padding: clamp(10px, 2vw, 22px); display: grid; place-items: center; }
.lab__stage svg { width: 100%; max-width: 360px; height: auto; }
.lw__tyre { fill: #2b2e2b; }
.lw__rim { fill: var(--paper-3); }
.lw__hub { fill: var(--edge-2); }
.lw__nut circle { fill: var(--white); stroke: var(--edge-2); stroke-width: 2; transition: fill .3s, stroke .3s, opacity .4s; cursor: pointer; }
.lw__nut text { font: 600 16px var(--sans); fill: var(--ink); pointer-events: none; transition: fill .3s, opacity .4s; }
.lw__nut:hover circle { stroke: var(--vg); fill: var(--mist); }
.lw__nut:focus-visible circle { stroke: var(--vg); outline: none; }
.lw__nut.off circle { fill: var(--vg); stroke: var(--vg); }
.lw__nut.off text { fill: var(--beige); }
.lw__nut.no circle { fill: var(--beige-2); stroke: #b99d5f; }
.labgrid { display: grid; gap: 12px; margin-top: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.labx { background: var(--paper-2); border: 1px solid var(--edge); border-radius: var(--r-sm); padding: 22px; display: grid; gap: 8px; align-content: start;
        transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s, border-color .3s; }
.labx:hover { transform: translateY(-3px) scale(1.02); background: var(--mist); border-color: var(--vg); }
.labx__k { font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--vg); }
.labx h3 { font-size: 22px; }
.labx p { color: var(--ink-soft); font-size: 15px; line-height: 1.55; }
@media (prefers-reduced-motion: reduce) { .labx:hover { transform: scale(1.02); } }


/* ---------- written pages: privacy, terms, cookies, accessibility ---------- */
.doc { padding: clamp(50px, 7vw, 90px) 0 clamp(60px, 8vw, 110px); }
.doc h1 { font-size: clamp(34px, 4.6vw, 62px); margin-top: 14px; max-width: 18ch; color: var(--vg); }
.doc__meta { margin-top: 18px; font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.doc__body { max-width: 68ch; margin-top: clamp(34px, 5vw, 54px); }
.doc__body p, .doc__body li { color: var(--ink-soft); font-size: 17px; line-height: 1.75; }
.doc__body p + p { margin-top: 16px; }
.doc__lede { font-size: 19px !important; color: var(--ink) !important; }
.doc__body h2 { font-size: clamp(24px, 2.6vw, 32px); margin: 46px 0 14px; padding-top: 22px; border-top: 1px solid var(--edge); }
.doc__body h3 { font-size: 19px; margin: 26px 0 8px; }
.doc__body ul { margin: 14px 0 0; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.doc__body ul li { position: relative; padding-left: 26px; }
.doc__body ul li::before { content: ""; position: absolute; left: 6px; top: .68em; width: 7px; height: 7px; border-radius: 50%; background: var(--vg); }
.doc__quick { background: var(--beige); border-radius: var(--r-sm); padding: 24px 24px 24px 10px; }
.doc__quick li { color: var(--beige-ink) !important; }
.doc__body a { color: var(--vg); text-decoration: underline; text-underline-offset: 3px; }
.doc__body a:hover { text-decoration-thickness: 2px; }
.doc__t { width: 100%; border-collapse: collapse; margin-top: 18px; background: var(--white); border: 1px solid var(--edge); border-radius: var(--r-sm); overflow: hidden; }
.doc__t th { text-align: left; font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--vg); padding: 14px; background: var(--mist); }
.doc__t td { padding: 14px; border-top: 1px solid var(--edge); color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; vertical-align: top; }
.doc__note { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--edge); font-size: 13.5px !important; color: var(--ink-faint) !important; }
.tf__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 18px; margin-top: -6px; }
.tf__legal a { color: var(--ink-soft); text-decoration: none; font-size: 13.5px; }
.tf__legal a:hover { color: var(--vg); text-decoration: underline; }

/* ---------- phones: the live strip, and every diagram that draws itself ---------- */
@media (max-width: 700px) {
  .live { padding: 10px; gap: 12px; }
  .live__txt { padding: 10px 8px 0; }
  .live__txt h3 { font-size: 23px; }
  .live__stage { height: 156px; }
  .live__go { min-height: 0; padding: 15px; font-size: 18px; display: flex; align-items: center; justify-content: center; gap: 10px; }
  .live__go br { display: none; }
  .live__go span { font-size: 20px; }
  /* three labels have to fit across a phone, wherever the diagram appears */
  .dg { inset: 8px 10px 4px; }
  .dg__n { padding: 6px 8px; font-size: 11.5px; border-radius: 10px; }
  .dg__n small { font-size: 8.5px; letter-spacing: .04em; margin-top: 1px; }
  .dg__cap { font-size: 12.5px; line-height: 1.45; }
  /* the panel the quiz builds: no tall empty stage */
  .spot { padding: 18px; gap: 20px; }
  .spot h2 { font-size: 28px; }
  .spot .l { font-size: 16px; }
  .spot__stage { min-height: 190px; padding: 14px; }
}

/* ---------- phones: her shelf becomes one row you swipe ---------- */
@media (max-width: 700px) {
  .shelf__row { display: flex; gap: 14px; overflow-x: auto; padding: 0 4px 4px; min-height: 140px;
                scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .shelf__row::-webkit-scrollbar { display: none; }
  .shelf__row .mat-item { flex: 0 0 106px; scroll-snap-align: center; }
  .shelf__row .mat-item svg { max-width: 106px; }
  .mat__rug { min-height: 240px; }
  .mat__big { width: 58%; }
  .room__cap p::after { content: " · swipe"; }
}

/* ---------- phones: tables in the written pages stack into blocks ---------- */
@media (max-width: 640px) {
  .doc__t thead { position: absolute; left: -9999px; }
  .doc__t, .doc__t tbody, .doc__t tr, .doc__t td { display: block; width: 100%; }
  .doc__t tr { padding: 4px 0 8px; }
  .doc__t td { border-top: 0; padding: 10px 16px 0; }
  .doc__t td + td { border-top: 1px solid var(--edge); margin-top: 12px; padding-top: 12px; }
  .doc__t td::before { content: attr(data-l); display: block; font: 500 10.5px var(--mono); letter-spacing: .14em;
                       text-transform: uppercase; color: var(--vg); margin-bottom: 4px; }
  .doc__t td:last-child { padding-bottom: 14px; }
}

/* a finger-sized target on the lab nuts, invisible on screen */
.lw__hit { fill: transparent; stroke: none; cursor: pointer; }


/* after the quiz a visual learner gets the same diagram in the panel above,
   so the live strip would be the second copy of it on the page */
body.spot-visual .live { display: none; }