:root {
  --ink: #14181f;
  --muted: #5b6470;
  --faint: #8b939e;
  --line: #e2e5e9;
  --line-soft: #eef0f3;
  --surface: #ffffff;
  --canvas: #f5f6f8;
  --accent: #00558c;
  --accent-soft: #e8f0f6;
  --accent-line: #b3cde0;
  --miss: #111111;
  --miss-soft: #ededed;
  --warn: #003a61;
  --warn-soft: #e8f0f6;
  --radius: 10px;
  /* Vertical rhythm. Four steps, owned by containers, never by margins on the
     children: a margin on a child dies with the child, which is how a section
     ships flush against its neighbour. Tightened once in the phone block. The
     label step is for a caption on its own number or title, never between two
     boxes. */
  --gap-page: 18px;
  --gap-block: 12px;
  --gap-bind: 8px;
  --gap-label: 4px;
  /* The page step as the surface has it, kept here so a slide that sets its
     own --gap-page can still cap a gap at the surface's step. */
  --gap-surface-page: var(--gap-page);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--canvas); color: var(--ink);
  font-family: var(--sans);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, p, ul, ol, dl { margin: 0; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; }

button {
  font-family: inherit; font-size: 15px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: var(--radius); padding: 12px 16px; cursor: pointer;
  touch-action: manipulation;
}
button:active { transform: scale(0.985); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button:disabled { opacity: 0.45; cursor: default; }
button.wide { width: 100%; }
/* The one button that throws away a rehearsal. It should not look like
   the button next to it. */
button.danger { border-color: var(--miss); color: var(--miss); font-weight: 600; }
button.danger:hover { background: var(--miss-soft); }
button.link {
  border: 0; background: none; color: var(--accent); padding: 10px 0 0;
  font-size: 14px; font-weight: 600;
}

input, select, textarea {
  font-family: inherit; font-size: 16px; width: 100%; min-height: 44px;
  padding: 12px 13px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); color: var(--ink);
}
textarea { resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent-line); outline-offset: -1px;
}

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px;
}
.card.mt, .mt { margin-top: var(--gap-block); }

/* The two spacing primitives. Anything that stacks gets one of these instead of
   a margin on each child, so deleting a child cannot leave a section flush
   against its neighbour. */
.vstack { display: grid; gap: var(--gap-block); align-content: start; }
.card > .mt, .vstack > .mt, .card > .card.mt { margin-top: 0; }
.vbind { display: grid; gap: var(--gap-bind); align-content: start; }
.err:empty, .lede:empty, .empty:empty { display: none; }
.center { text-align: center; }
.card.center { display: grid; gap: var(--gap-block); justify-items: center; }
.pad-lg { padding: 34px 20px; }
.pad-xl { padding: 48px 20px; }
.muted { color: var(--faint); font-size: 14px; }
.empty { font-size: 13px; color: var(--faint); margin: 0; }

.label {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--faint); font-weight: 600;
}
.lede { font-size: 14px; color: var(--muted); line-height: 1.55; margin: 0; }
.lede.center { text-align: center; }
.err { font-size: 13px; color: var(--miss); margin: 10px 0 0; }
.cnt { font-size: 15px; font-weight: 700; }
.big { font-size: 26px; font-weight: 700; }
.rowb { display: flex; align-items: baseline; justify-content: space-between; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ------------------------------------------------------------ phone client */

.phone-wrap { max-width: 520px; margin: 0 auto; padding: 14px 14px 40px; min-height: 100vh; }
.phone-wrap .card { display: grid; gap: var(--gap-block); align-content: start; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 4px 2px 14px;
}
.topbar > div { display: grid; gap: var(--gap-label); }
.topbar .t1 { font-size: 15px; font-weight: 600; line-height: 1.25; }
.topbar .t2 { font-size: 12px; color: var(--faint); }
.chip {
  font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); white-space: nowrap;
}

.fields { display: grid; gap: var(--gap-block); }
.field { display: grid; gap: var(--gap-bind); }
.field > .label { display: block; }
.opts { display: grid; gap: var(--gap-bind); }
.opt {
  display: block; width: 100%; text-align: left; padding: 13px 14px;
  font-size: 15px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); line-height: 1.35;
}
.opt[aria-pressed="true"] {
  border-color: var(--accent); background: var(--accent-soft);
  color: var(--accent); font-weight: 600;
}

.hero { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.hero .pct { font-size: 24px; font-weight: 600; }
.hero-sm { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.bandname { font-size: 16px; font-weight: 600; color: var(--accent); }
.qtext { font-size: 17px; line-height: 1.45; font-weight: 500; }

.progress { margin: 0; height: 8px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.progress > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.25s; }

.sheet {
  display: grid;
  grid-template-columns: calc(7ch + 8px) calc(8ch + 8px) calc(8ch + 8px) calc(5ch + 8px) minmax(0, 1fr);
  gap: 3px; font-family: var(--mono); font-size: 11px; user-select: none;
}
.sheet .hd {
  font-family: var(--sans); font-size: 10px; font-weight: 600; color: var(--faint);
  padding: 4px 3px 6px; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.2;
}
.sheet .cl {
  padding: 12px 4px; min-height: 46px; display: flex; align-items: center;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 6px;
  color: var(--ink); white-space: nowrap; line-height: 1.3;
  touch-action: manipulation; cursor: pointer;
}
.sheet .cl.c5 { white-space: normal; word-break: break-word; }
.sheet .cl.hit { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.sheet .cl.miss { background: var(--miss-soft); border-color: var(--miss); color: var(--miss); }

.feedback { font-size: 13px; line-height: 1.5; color: var(--muted); min-height: 40px; }
.feedback.good { color: var(--accent); }
.feedback.bad { color: var(--miss); }
.misscount { font-size: 12px; color: var(--faint); }

.answer { border-top: 1px solid var(--line-soft); padding: 13px 0; display: grid; gap: var(--gap-bind); }
.answer:first-child { border-top: 0; }
.a-top { display: flex; align-items: center; gap: 8px; }
.a-mark {
  width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff; background: var(--accent);
}
.a-mark.no { background: var(--faint); }
.a-label { font-size: 14px; font-weight: 600; }
.a-why { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 0 0 0 28px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn {
  font-size: 13px; padding: 9px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
}
.chip-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

table.piv { width: 100%; border-collapse: collapse; font-size: 13px; }
table.piv th {
  text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--faint); font-weight: 600; padding: 0 6px 7px; border-bottom: 1px solid var(--line);
}
table.piv td { padding: 9px 6px; border-bottom: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; }
table.piv td.num, table.piv th.num { text-align: right; }
table.piv tr:last-child td { border-bottom: 0; }

.dq { border-top: 1px solid var(--line-soft); padding: 12px 0; }
.dq:first-child { border-top: 0; }
.dq-t { font-size: 14px; font-weight: 500; margin: 0 0 9px; line-height: 1.4; }

.refrow { border-top: 1px solid var(--line-soft); padding: 14px 0;
          display: grid; gap: var(--gap-block); }
.refrow:first-child { border-top: 0; }
.refq { font-size: 14px; line-height: 1.45; font-weight: 500; }
.stack { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--line-soft); }
.seg { height: 100%; }
.seg-allow { background: var(--accent); }
.seg-guardrail { background: #003a61; }
.seg-block { background: var(--miss); }
.reflg { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--muted); }
.reflg .votes { color: var(--faint); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.dot-allow { background: var(--accent); }
.dot-guardrail { background: #003a61; }
.dot-block { background: var(--miss); }
.mine { font-size: 12px; color: var(--accent); font-weight: 600; }
.bysize { display: flex; flex-wrap: wrap; gap: 8px; }
.bschip { font-size: 11px; color: var(--faint); background: var(--canvas); padding: 4px 8px; border-radius: 6px; }

.exrow { border-top: 1px solid var(--line-soft); padding: 10px 0;
         display: grid; gap: var(--gap-bind); }
.exrow:first-child { border-top: 0; }
.ex-t { font-size: 14px; line-height: 1.4; }
.ex-m { font-size: 12px; color: var(--faint); }

.promptbox {
  padding: 12px; background: var(--canvas);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  font-family: var(--mono); font-size: 11px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word; max-height: 300px; overflow-y: auto;
}

/* ----------------------------------------------------- phone: teach phases */

/* The idle screen while somebody is talking. One slow dot, nothing to read. */
.idledot {
  width: 12px; height: 12px; border-radius: 50%; margin: 0 auto;
  background: var(--accent); animation: idlepulse 2.4s ease-in-out infinite;
}
@keyframes idlepulse {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .idledot { animation: none; opacity: 0.7; }
}

/* ------------------------------------------------------ phone: roster join */

.hits { margin-top: 8px; display: grid; gap: 6px; }
/* NOT .hit: that is the autopsy grid's found-cell state, and reusing the name
   here restyled every found cell to 15px inside a column sized for 11px, which
   clipped the value the moment someone got one right. */
.namehit {
  display: block; width: 100%; text-align: left; padding: 11px 13px;
  font-size: 15px; line-height: 1.3;
}
.pn-co { display: block; font-size: 12px; color: var(--faint); margin-top: 2px; }
.taken { display: block; font-size: 11px; color: var(--warn); margin-top: 3px; font-weight: 600; }
.picked-name {
  padding: 12px 13px; border: 1px solid var(--accent); background: var(--accent-soft);
  border-radius: var(--radius); font-size: 16px; font-weight: 600; color: var(--accent);
}
.picked-name .pn-co { color: var(--accent); opacity: 0.75; font-weight: 500; }

/* An anchor that has to read as a button (the toolkit link opens a new tab,
   so it cannot be a real button). */
a.btn {
  display: block; text-align: center; text-decoration: none;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: var(--radius); padding: 12px 16px; font-size: 15px; font-weight: 600;
}

.brows { display: grid; gap: var(--gap-block); }
.brow { display: grid; gap: var(--gap-bind); }
.bh { display: flex; justify-content: space-between; font-size: 13px; }
.bp { font-weight: 700; font-variant-numeric: tabular-nums; }
.bt { height: 10px; background: var(--line-soft); border-radius: 5px; overflow: hidden; }
.bf { height: 100%; background: var(--accent); border-radius: 5px; transition: width 0.35s; }
.bf.cold { background: var(--miss); }

/* ------------------------------------------------------ presenter console */

/* Bottom padding clears the floating stepper. Without it the arrows sit on top
   of the last row of whatever board is on screen. */
.pres > .mt { margin-top: 0; }
.pfoot { font-size: 12px; color: var(--faint); }
.h-sub { font-size: 13px; color: var(--faint); }
.deepline { font-size: 15px; line-height: 1.6; }
.pres {
  padding: 16px 20px 108px; max-width: 1640px; margin: 0 auto;
  display: grid; gap: var(--gap-page); align-content: start;
}
.pres-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.phasebar { display: flex; gap: 6px; flex-wrap: wrap; }
.stagebtn {
  white-space: nowrap; padding: 9px 16px; font-size: 13px; font-weight: 600; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted); min-height: 44px;
}
.stagebtn.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.console { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--gap-page); align-items: start; }
#stage { display: grid; gap: var(--gap-block); align-content: start; min-width: 0; }
#stage > .card.mt, #stage > .mt { margin-top: 0; }
.rail { padding: 12px; position: sticky; top: 14px; display: grid; gap: var(--gap-block); align-content: start; }
.rail-head { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 6px 10px; }
.rail-clock { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rail-i {
  display: flex; align-items: center; gap: 8px; padding: 8px 6px;
  border-radius: 6px; cursor: pointer; border-left: 2px solid transparent;
}
.rail-i:hover { background: var(--canvas); }
.rail-i.on { background: var(--accent-soft); border-left-color: var(--accent); }
.rail-i.on .rl { color: var(--accent); font-weight: 600; }
.rail-n { width: 16px; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.rl { font-size: 13px; flex: 1; line-height: 1.25; }
.rsub { display: block; font-size: 11px; color: var(--faint); font-weight: 400; margin-top: 1px; }
.rown { display: block; font-size: 11px; color: var(--muted); font-weight: 600; }
.rm { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.rail-i.done .rl, .rail-i.done .rsub, .rail-i.done .rown, .rail-i.done .rm { color: var(--faint); }
.rail-foot { padding-top: 12px; border-top: 1px solid var(--line-soft); text-align: center;
             display: grid; gap: var(--gap-bind); }
.qr-mini img { width: 100%; max-width: 150px; height: auto; image-rendering: pixelated; }
.qrurl { font-family: var(--mono); font-size: 11px; font-weight: 600; word-break: break-all; }

.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-block); }
.metric { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  display: grid; gap: var(--gap-label); align-content: start; }
.metric .m-v { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.metric .m-l {
  font-size: 11px; color: var(--faint); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
}

.grid-2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--gap-block); align-items: start; }

.bars { display: grid; gap: var(--gap-block); }
.bar-row { display: grid; gap: var(--gap-bind); }
.bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; }
.bar-head .bl { font-weight: 500; }
.bar-track { height: 12px; background: var(--line-soft); border-radius: 6px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); border-radius: 6px; transition: width 0.4s; }
.bar-fill.cold { background: var(--miss); }
.bar-note { font-size: 12px; color: var(--faint); line-height: 1.45; }

table.lb { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: auto; }
table.lb th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--faint); font-weight: 600; padding: 0 8px 8px; border-bottom: 1px solid var(--line);
}
table.lb td { padding: 9px 8px; border-bottom: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; }
table.lb tr:last-child td { border-bottom: 0; }
table.lb td.num, table.lb th.num { text-align: right; }
table.lb tr.total td { border-top: 2px solid var(--line); font-weight: 700; border-bottom: 0; }

.dist { display: flex; align-items: flex-end; gap: 5px; height: 110px; }
.d-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
         align-items: center; gap: var(--gap-bind); height: 100%; }
.d-bar { width: 100%; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 2px; transition: height 0.4s; }
.d-n { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.d-v { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }

.bigclock { font-size: 92px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.bigq { font-size: 24px; line-height: 1.35; font-weight: 500; }
.pq { font-size: 14px; line-height: 1.5; color: var(--muted); }

.specrow { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line-soft); padding: 11px 0; }
.specrow:first-child { border-top: 0; }
.specrow.picked { background: var(--accent-soft); border-radius: 8px; padding-left: 10px; padding-right: 10px; }
.spec-b { flex: 1; min-width: 0; }
.spec-t { font-size: 14px; line-height: 1.4; }
.spec-m { font-size: 12px; color: var(--faint); }
.spec-a { display: flex; gap: 6px; flex: 0 0 auto; }
.spec-a button { padding: 8px 12px; font-size: 13px; }

.card.warn { border-color: var(--warn); background: var(--warn-soft); }

/* ------------------------------------------------------- console: the deck */

.stagebtn.teach { border-style: dashed; }
.stagebtn.teach.on { border-style: solid; }

.slide {
  --gap-page: 30px; --gap-block: 18px; --gap-bind: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 46px 52px 22px; min-height: 460px;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--gap-page);
}
.slide-body { flex: 1; display: grid; gap: var(--gap-page); align-content: start; }
.slide-head { display: grid; gap: var(--gap-block); }
.slide-t { font-size: 40px; line-height: 1.15; letter-spacing: -0.02em; }
.slide-lead { font-size: 21px; line-height: 1.45; color: var(--muted); margin: 0; max-width: 34em; }
.slide-pts { margin: 0; padding-left: 24px; display: grid; gap: var(--gap-block); }
.slide-pts li { font-size: 21px; line-height: 1.5; }

/* Words and figure side by side, both centred against each other. A 16:9
   projector is far wider than a comfortable reading measure, so a single
   column of text leaves half the wall empty and makes the lines break early
   and look cramped. Splitting it uses the width without stretching any line
   past about 30em. */

.slide-main.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 44px; align-items: center;
}
.slide-main.split .slide-pts { margin: 0; }
.slide-main.split .g-cols { flex-direction: column; }
.slide-fig { min-width: 0; }
/* Points over a figure (a steps graphic) stack in one column, and the
   container owns the space between them. It had no rule at all, so the list
   sat on the figure at 0px (Workshop II gap audit, October 1st, 2026). The
   split layout above keeps its own columns and gap. */
.slide-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-block); }

/* A slide whose whole body is a figure. It gets the full width, and a long
   definition list runs in two columns so it fills a 16:9 wall instead of
   sitting in a narrow strip with the right half empty. */
.slide-main.figonly .g-bars { max-width: none; }
.slide-main.figonly .g-terms {
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: 30px;
}
@media (max-width: 1180px) {
  .slide-main.figonly .g-terms { grid-template-columns: auto minmax(0, 1fr); }
}
body.screenmode .slide-main.figonly .g-terms {
  column-gap: clamp(20px, 2.6vw, 54px);
}
body.screenmode .slide-main.figonly .g-terms dt { font-size: clamp(16px, 2.7vh, 32px); }
body.screenmode .slide-main.figonly .g-terms dd { font-size: clamp(15px, 2.5vh, 30px); }

/* The room's own answers, sitting on the teaching slide. */
.livebox {
  border: 1px solid var(--accent-line); background: var(--accent-soft);
  border-radius: 12px; padding: 20px 22px;
  display: grid; gap: var(--gap-block); align-content: start;
}
.live-h {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--accent);
}
.live-q { font-size: 16px; line-height: 1.4; }
.live-cap { font-size: 13px; color: var(--muted); }
.livebox .bar-row:last-child { margin-bottom: 0; }
.slide-img { display: block; width: 100%; height: auto; border-radius: 8px; }

/* Slide diagrams. Three shapes, all built from the same tokens as the rest of
   the console so a slide never looks like it came from somewhere else. */
.g-steps { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.g-step {
  flex: 1 1 0; min-width: 120px; padding: 16px 18px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: 10px; font-size: 17px; line-height: 1.35; color: var(--ink);
  display: flex; align-items: center;
}
.g-arrow { align-self: center; color: var(--accent); font-size: 22px; flex: 0 0 auto; }

.g-cols { display: flex; gap: 12px; flex-wrap: wrap; }
.g-col {
  flex: 1 1 0; min-width: 150px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  display: grid; gap: var(--gap-bind); align-content: start;
}
.g-h {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 600; color: var(--accent);
}
.g-b { font-size: 16px; line-height: 1.45; color: var(--ink); }
.g-b.mono { font-family: var(--mono); font-size: 13px; line-height: 1.6; white-space: nowrap; }

/* A small bar chart on a slide. Same bones as the dashboard bars, sized to be
   read from the back of the room. */
.g-bars { max-width: 640px; display: grid; gap: var(--gap-block); }
.g-bar { display: grid; gap: var(--gap-bind); }
.g-bar-head {
  display: flex; justify-content: space-between; gap: 14px; font-size: 16px;
}
.g-bar-head b { font-variant-numeric: tabular-nums; }
.g-bar-track { height: 14px; background: var(--line-soft); border-radius: 7px; overflow: hidden; }
.g-bar-fill { height: 100%; background: var(--accent); border-radius: 7px; }
.g-bar-fill.soft { background: var(--accent-line); }
body.screenmode .g-bars { max-width: 900px; }
body.screenmode .g-bar-head { font-size: clamp(15px, 2.2vh, 21px); }
body.screenmode .g-bar-track { height: clamp(12px, 2.2vh, 20px); }

body.screenmode .g-step {
  font-size: clamp(15px, 2.2vh, 21px); padding: clamp(11px, 2.2vh, 20px) 22px;
}
/* The column graphic's heading and text read from the back of the room: 24.8px at
   1080 (they were 12px and 20px), the wall's floor for room-facing type. */
body.screenmode .g-h { font-size: clamp(16px, 2.3vh, 25px); }
body.screenmode .g-b { font-size: clamp(16px, 2.3vh, 25px); }
body.screenmode .g-b.mono { font-size: clamp(12px, 1.7vh, 16px); }

.slide-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: 16px; border-top: 1px solid var(--line-soft);
}
.slide-n { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.sdots { display: flex; gap: 6px; flex: 1; justify-content: center; }
.sdot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--line);
  cursor: pointer; transition: background 0.2s;
}
.sdot.on { background: var(--accent); }
.slide-nav { display: flex; gap: 8px; }
.slide-nav button { padding: 9px 18px; font-size: 14px; }
.pnote { font-size: 15px; line-height: 1.55; }

/* Screen mode is the projector: the deck takes the whole width and the run
   order rail gets out of the way. */
body.screenmode.teaching .console { grid-template-columns: minmax(0, 1fr); }
body.screenmode.teaching .rail { display: none; }
/* Sized off the viewport height, not off a fixed number. A five-bullet slide at
   27px runs off the bottom of a 760px screen, and the bottom of the screen is
   where the last bullet lives. Clamped so it still reads big on a real
   projector and never shrinks below legible on a laptop. */
body.screenmode .slide {
  --gap-page: clamp(18px, 3.4vh, 34px); --gap-block: clamp(10px, 2.2vh, 24px);
  --gap-bind: clamp(6px, 1.2vh, 12px);
  min-height: 72vh; padding: clamp(28px, 5vh, 60px) 68px 26px;
}
/* Centred down the page. Left to itself the content hugged the top and left a
   third of the wall empty underneath, which is most of what made it look
   unfinished. */
body.screenmode .slide-body { align-content: center; }
body.screenmode .slide-t { font-size: clamp(30px, 5.4vh, 56px); max-width: 20em; }
body.screenmode .slide-lead { font-size: clamp(17px, 2.7vh, 27px); max-width: 40em; }

body.screenmode .slide-main.split { gap: clamp(28px, 4vw, 64px); }
/* Capped at the surface's page step: the wall's own block step runs past it
   on a tall screen and lands between steps (23.8px at 1080). */
body.screenmode .slide-pts { gap: min(var(--gap-block), var(--gap-surface-page)); }
body.screenmode .slide-main:not(.split) { gap: min(var(--gap-block), var(--gap-surface-page)); }
body.screenmode .slide-pts li { font-size: clamp(17px, 2.9vh, 31px); line-height: 1.42; }
/* Cap the LINE, not the list. max-width on the ul resolves against the ul's own
   16px font, not the 31px of the bullets inside it, so a "44em" cap was landing
   at about 700px and wrapping every line less than half way across the wall.
   ch on the li is measured in the type actually being read. */
body.screenmode .slide-main:not(.split) .slide-pts { max-width: none; }
body.screenmode .slide-pts li { max-width: 62ch; }
body.screenmode .livebox { padding: clamp(16px, 2.6vh, 26px) clamp(18px, 2vw, 28px); }
body.screenmode .live-h { font-size: clamp(11px, 1.5vh, 15px); }
body.screenmode .live-q { font-size: clamp(15px, 2.2vh, 21px); }
body.screenmode .live-cap { font-size: clamp(12px, 1.7vh, 17px); }
body.screenmode .livebox .bar-head { font-size: clamp(14px, 2.1vh, 20px); }

/* ---------------------------------------------------- console: showcase Q&A */

.qlist { border-top: 1px solid var(--line-soft); padding-top: 4px; }
.qrow { font-size: 14px; line-height: 1.45; padding: 9px 0; border-bottom: 1px solid var(--line-soft);
        overflow-wrap: anywhere; }
.qrow:last-child { border-bottom: 0; }
.qt { font-size: 11px; color: var(--faint); font-weight: 600; margin-right: 8px;
      text-transform: uppercase; letter-spacing: 0.04em; }

body.screenmode .hide-on-screen { display: none !important; }
body.screenmode .metric .m-v { font-size: 42px; }
body.screenmode table.lb { font-size: 17px; }
body.screenmode .bar-head { font-size: 16px; }
body.screenmode .refq { font-size: 17px; }
body.screenmode .spec-t { font-size: 17px; }
body.screenmode .qrow { font-size: 17px; }

/* --------------------------------------------- phone: terms check (basics) */

/* Right and wrong stay legible after the buttons disable, or the feedback
   lands on three greyed-out options nobody can read. */
.opts .opt:disabled { opacity: 1; }
.opts .opt.right {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent);
  font-weight: 600;
}
.opts .opt.wrong {
  border-color: var(--miss); background: var(--miss-soft); color: var(--miss);
}

/* The five kinds of defect, above the grid the whole time. */
.kinds { margin: 0; padding-left: 20px; display: grid; gap: 7px; }
.kinds li { font-size: 14px; line-height: 1.35; }
.kinds li b { font-weight: 600; }
.kinds li span { display: block; color: var(--muted); }
.a-kind {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--accent);
}

/* Hallucination: what the AI was given, before what it answered. Without this
   the exercise is a guess about tone. */
.hgiven {
  margin-top: 14px; padding: 11px 13px; border-radius: var(--radius);
  background: var(--canvas); border: 1px solid var(--line-soft);
  font-size: 14px; line-height: 1.4;
}
.hgiven .hg-l {
  display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--faint); margin-bottom: 3px;
}
.briefsteps { margin: 0; padding-left: 20px; display: grid; gap: 9px; }
.briefsteps li { font-size: 15px; line-height: 1.45; }

/* --------------------------------------------------- phone: pulse ladders */

.ladq { font-size: 14px; color: var(--muted); line-height: 1.4; }
.rungs { display: grid; gap: var(--gap-bind); }
.rung {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  padding: 11px 12px; font-size: 14px; line-height: 1.35; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  min-height: 44px;
}
.rung .rn {
  flex: 0 0 auto; width: 19px; height: 19px; border-radius: 50%; font-size: 11px;
  font-weight: 700; display: grid; place-items: center; color: var(--faint);
  border: 1px solid var(--line);
}
.rung.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.rung.on .rn { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ------------------------------------------------- phone: prompt writing */

/* Step numbers, so a numbered form reads as steps and not as one wall. */
.stepn-in {
  display: inline-grid; place-items: center; width: 17px; height: 17px;
  border-radius: 50%; background: var(--accent); color: #fff; font-size: 10px;
  font-weight: 700; margin-right: 7px; vertical-align: middle;
}

/* ------------------------------------------------- console: prompt lab wall */

.promptwall {
  padding: 16px 18px; background: var(--canvas);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  font-family: var(--mono); font-size: 13px; line-height: 1.55; white-space: pre-wrap;
}
.promptwall.lazy { color: var(--muted); font-style: italic; }
.promptbox.big { font-size: 15px; line-height: 1.6; }
body.screenmode .promptwall { font-size: 18px; line-height: 1.6; }

/* Score spread, 0 to 5. A single average hides a room where half wrote three
   pieces and half wrote all five. */
.dist { display: flex; align-items: flex-end; gap: 8px; height: 130px; }
.dcol { flex: 1 1 0; display: flex; flex-direction: column; align-items: center;
        justify-content: flex-end; height: 100%; gap: var(--gap-bind); }
.dbar { width: 100%; min-height: 2px; background: var(--accent); border-radius: 4px 4px 0 0; }
.dcol .dn { font-size: 12px; font-weight: 700; }
.dcol .dl { font-size: 11px; color: var(--faint); }

/* One prompt on the console list: score chip, the text, what it is missing. */
.spec-t { flex: 1 1 auto; font-size: 14px; line-height: 1.4; min-width: 0;
          display: grid; gap: var(--gap-bind); }
.spec-t b { font-weight: 600; }
.spec-m { display: block; color: var(--faint); font-size: 12px; }

/* Reusable pager. One per surface, never per table. */
.pager {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: 13px; color: var(--muted);
}
.pager button { padding: 9px 14px; font-size: 13px; min-height: 44px; }
.blockrows { display: grid; gap: var(--gap-block); }
.blockrow { display: grid; gap: var(--gap-bind); }
.blk-h {
  display: flex; justify-content: space-between; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint);
  margin-bottom: 8px;
}

/* -------------------------------------------------- console: step-through */

/* Two arrows, always in the same place, that walk the run order. The presenter
   holds a clicker; this is what the clicker is pressing. */
.stepper {
  position: fixed; right: 18px; bottom: 18px; display: flex; align-items: center;
  gap: 8px; padding: 8px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 6px 20px rgba(15, 20, 30, 0.12); z-index: 40;
}
.stepper button { font-size: 18px; line-height: 1; padding: 10px 16px; min-height: 44px; }
.stepper button:disabled { opacity: 0.35; }
/* One plain line, "12 of 58": the same numbers the wall shows bottom right. */
.stepn {
  text-align: center; min-width: 44px; font-variant-numeric: tabular-nums;
  font-size: 15px; font-weight: 600; white-space: nowrap; padding: 0 4px;
}

.fullhint {
  position: fixed; right: 18px; bottom: 18px; padding: 8px 12px; z-index: 40;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  font-size: 12px; color: var(--muted); transition: opacity 0.6s;
}
.fullhint.gone { opacity: 0; pointer-events: none; }

/* ------------------------------------------------------- the projector view */

/* Everything the audience should never see is either absent from the payload
   or gone from the layout here. The rail carries the clock and the run order,
   which is the presenter's business and nobody else's. */
body.audience .rail { display: none; }
body.audience .console { grid-template-columns: minmax(0, 1fr); }
body.audience .pres { max-width: none; padding: 0; }
body.audience .stepper { display: none; }
/* No header on the wall. The module name and its one-liner are presenter
   furniture; a slide carries its own title. */
body.audience .pres-top { display: none; }
body.audience .slide { min-height: 96vh; border: 0; border-radius: 0; }
body.audience { cursor: default; }

/* The wall. Fills the projector and sits in the optical middle: a slide box
   sized to its content left a third of the screen as empty canvas underneath,
   which is what read as unfinished (MJ 2026-08-20). */
.slide.aud, body.screenmode .slide.aud {
  --gap-page: clamp(18px, 3.8vh, 38px);
  display: flex; flex-direction: column; justify-content: center;
  min-height: 88vh; padding: clamp(34px, 5vh, 60px) clamp(40px, 4vw, 72px);
}
.slide.aud > .slide-body { flex: 0 1 auto; }
.slide.aud .slide-t { font-size: clamp(32px, 6vh, 56px); }
.slide.aud .slide-lead { font-size: clamp(17px, 2.9vh, 27px); max-width: 46em; }
.aud-body { display: grid; gap: var(--gap-page); align-content: start; }
.slide.center-slide { display: grid; place-content: center; text-align: center; }

/* Big numbers, three at most. A wall can hold three numbers; a dashboard row
   of eight is something you read on a laptop. */
.audstats { display: flex; gap: 56px; flex-wrap: wrap; }
.audstats b {
  display: block; font-size: 62px; line-height: 1; letter-spacing: -0.03em;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.audstats span {
  display: block; margin-top: 8px; font-size: 15px; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--muted);
}

.audbars .bars { gap: var(--gap-block); }
.audbars .bar-head { font-size: 21px; }
.audbars .bar-track { height: 16px; }
.audbars .bar-note { font-size: 15px; line-height: 1.45; }

.audbig { font-size: 30px; line-height: 1.45; margin: 0; max-width: 30em; }
.audbig b { color: var(--accent); }

/* Best prompts (Workshop II call, October 1st, 2026). The wall: one prompt
   that hit all five, the writer's company and the words from it that earned
   each piece, all at 24px or more on a 1080-line projector. */
.feedwall, .feedhead, .feedgood, .feedrows { display: grid; }
.feedwall { gap: var(--gap-page); }
.feedhead, .feedrows { gap: var(--gap-bind); }
.feedgood { gap: var(--gap-block); }
.feedq {
  font-size: clamp(22px, 4.2vh, 46px); line-height: 1.35; font-weight: 500;
  white-space: pre-wrap; overflow-wrap: anywhere; max-width: 48em;
}
.feedq.feedq-m { font-size: clamp(20px, 3.4vh, 38px); }
.feedq.feedq-l { font-size: clamp(18px, 2.8vh, 32px); }
.feedq.feedq-xl { font-size: clamp(16px, 2.3vh, 26px); }
.feedby { font-size: clamp(18px, 2.6vh, 30px); color: var(--muted); }
.feedlab {
  font-size: clamp(16px, 2.3vh, 26px); font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.feedrow {
  display: grid; grid-template-columns: 10.5em minmax(0, 1fr); gap: var(--gap-block);
  align-items: baseline; font-size: clamp(18px, 2.6vh, 30px); line-height: 1.35;
}
.feedk { font-weight: 700; color: var(--accent); }
.feedw { overflow-wrap: anywhere; }

/* The console's copy of it: the same pieces, Back, Pause and Next, the list. */
.feedpieces { display: grid; gap: var(--gap-bind); }
.fp {
  display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: var(--gap-block);
  align-items: baseline;
}
.fp span { overflow-wrap: anywhere; }
.feedctl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-bind); }
.feedstate { color: var(--muted); font-size: 14px; }
.specrow.feedoff { opacity: 0.6; }
@media (max-width: 600px) {
  .fp { grid-template-columns: minmax(0, 1fr); gap: var(--gap-label); }
  .feedctl button { min-height: 44px; }
}

/* Join screen: the code has to be readable from the back of a ballroom. */
.joingrid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 60px;
  align-items: center;
}
.qrbig { display: grid; gap: var(--gap-block); justify-items: center; }
.qrbig img { width: 300px; height: 300px; display: block; }
/* The address people type, host only, in type the back row can read. */
.qrhost {
  font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em;
  text-align: center; overflow-wrap: anywhere;
}
body.screenmode .qrhost { font-size: clamp(24px, 3.6vh, 40px); }
.agenda-wrap { display: grid; gap: var(--gap-bind); }
.agenda-h {
  font-size: 14px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--faint);
}
.agenda {
  margin: 0; padding: 0; list-style: none; columns: 3; column-gap: 44px;
}
.agenda li {
  break-inside: avoid; margin-bottom: 12px; font-size: 17px; line-height: 1.3;
  padding-left: 14px; border-left: 2px solid var(--accent-line);
}
.agenda li b { display: block; font-weight: 600; }
.agenda li span { color: var(--muted); font-size: 15px; }

/* Padded panels, not naked blocks. A block sitting flush against its
   neighbour with no inset reads as an unfinished page on a projector
   (MJ 2026-08-20: "blocks with no outer padding, which should never be the
   case"). Spacing is owned by the grid gap here, never by a margin on the
   child, so deleting a wrapper cannot ship a flush section. */
.auddemos { display: grid; gap: var(--gap-page); }
.auddemo {
  padding: 24px 28px; border: 1px solid var(--line);
  border-left: 4px solid var(--line); border-radius: 14px;
  background: var(--surface); display: grid; gap: var(--gap-bind); align-content: start;
}
.auddemo.live { border-left-color: var(--accent); }
.auddemo .auddemo .stack { margin: 0; }
.ad-t { font-size: 24px; font-weight: 600; }
.auddemo .stack { height: 20px; }
.auddemo .reflg { font-size: 16px; }

/* The five checks, on the wall while the room writes. */
.audchecks { margin: 0; padding-left: 26px; display: grid; gap: var(--gap-block); }
.audchecks li { font-size: clamp(16px, 2.3vh, 23px); line-height: 1.35; }
.audchecks li b { display: block; font-weight: 600; }
.audchecks li span { color: var(--muted); font-size: 0.82em; }
.audrefs .refq { font-size: 22px; }
.audrefs .refrow { gap: var(--gap-bind); }
.audrefs { display: grid; gap: var(--gap-page); }
.audrefs .reflg { font-size: 16px; }
.audjobs { display: grid; gap: 12px; }
.audjob { font-size: 22px; line-height: 1.35; }
.audjob span { color: var(--faint); font-size: 15px; margin-left: 10px; }
.audvs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
.audvs-h {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--faint); margin-bottom: 10px;
}
.audvs .promptwall { margin-top: 0; font-size: clamp(13px, 1.9vh, 18px); }

/* A term against its meaning. Ten one-line definitions as bullets is the wall
   of words; two columns reads at projector distance. */
.g-terms { margin: 0; display: grid; grid-template-columns: auto 1fr;
           gap: 10px 20px; align-items: baseline; }
.g-terms dt { font-weight: 600; font-size: clamp(14px, 2vh, 21px); white-space: nowrap; }
.g-terms dd { margin: 0; color: var(--muted); font-size: clamp(13px, 1.9vh, 20px);
              line-height: 1.4; }
body.screenmode .g-terms { gap: clamp(9px, 1.6vh, 18px) clamp(18px, 2vw, 34px); }
@media (max-width: 700px) {
  .g-terms { grid-template-columns: 1fr; gap: 4px 0; }
  .g-terms dt { margin-top: 8px; }
}

@media (max-width: 1180px) {
  .stagebtn, .slide-nav button, .chip-btn { min-height: 44px; }
  .console { grid-template-columns: 1fr; }
  .rail { position: static; }
  .grid-2 { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .slide { padding: 30px 26px 18px; min-height: 380px; }
  .slide-t { font-size: 30px; }
  .slide-lead, .slide-pts li { font-size: 18px; }
}

/* Phones. Desktop is untouched: every rule for a small screen lives inside a
   media block. Floor is 44px on anything you tap and 16px on anything you type
   into, measured in the browser at 375px, not eyeballed. */
@media (max-width: 767px) {
  .phone-wrap .chip-btn, .phone-wrap button.link {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .phone-wrap .chips { gap: 8px; }

  /* The console is a laptop dashboard and the control room at /admin is the
     surface built for a handset. But MJ does open /present on his phone, and
     when he does it has to be usable rather than a sideways scroll: the top
     bar and the phase chips wrap, the rail drops under the stage, every table
     scrolls inside its own card, and nothing you tap is under 44px. */
  .pres { padding: 12px 12px 108px; }
  .pres-top { flex-wrap: wrap; gap: 10px; }
  .pres-top > div:last-child { flex-wrap: wrap; }
  .pres-top button, .pres-top .btn { min-height: 44px; }
  .phasebar { flex-wrap: wrap; width: 100%; }
  .stagebtn { min-height: 44px; }
  .stepper button { min-height: 44px; min-width: 56px; }
  .spec-a button { min-height: 44px; }
  .console { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; order: 2; }
  #stage { order: 1; min-width: 0; }
  /* minmax(0, 1fr), not 1fr: a plain 1fr track refuses to shrink below its
     content and pushes the whole page sideways by a pixel or two. */
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .pres .card, .pres .metric { max-width: 100%; min-width: 0; }
  /* Wide tables scroll inside the card instead of pushing the page sideways. */
  .card table.lb, .card table.piv { display: block; overflow-x: auto; }
  .slide { padding: 20px 16px 14px; min-height: 0; }
  .slide-t { font-size: 24px; }
  .slide-lead, .slide-pts li { font-size: 16px; }
}

@media (max-width: 400px) {
  .phone-wrap { padding-left: 10px; padding-right: 10px; }
  .phone-wrap .card { padding: 14px; }
}

/* ---------------------------------------------------------- table talk */

/* Two minutes of people talking to each other. Both screens carry the question
   and nothing else, because the whole point is that nobody is reading. */
.talkq { font-size: 21px; line-height: 1.35; font-weight: 600; }
.talk-lab {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--accent);
}
body.screenmode .talk-lab { font-size: clamp(12px, 1.7vh, 17px); }

/* The demo currently on stage, on the console and on the wall. */
.auddemo.live .ad-t { color: var(--accent); }
.nowtag {
  margin-left: 12px; font-size: 0.55em; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--accent); vertical-align: middle;
}

/* ------------------------------------------------------------ gate + admin */

/* Password gate. One card, centred, and the input is 16px so iOS does not zoom
   and leave a presenter typing a password they cannot see. */
.gatewrap {
  min-height: 100vh; padding: 24px 16px;
  display: grid; place-content: center;
  /* An explicit column, not justify-items: a max-content column sized each
     card to its own longest line, so the two gates came out different widths. */
  grid-template-columns: min(380px, 100%);
}
.gatecard { display: grid; gap: var(--gap-block); }
.gatehead { display: grid; gap: var(--gap-bind); }
.gatehead h1 { font-size: 22px; }
.gatehead .lede { margin: 0; }
.gatecard .err { margin: 0; }

/* The control room. Built for an iPad in portrait, works down to 375px.
   Vertical spacing is owned by this grid, never by margins on the children. */
.adminwrap {
  max-width: 720px; margin: 0 auto; padding: 16px 16px 48px;
  display: grid; gap: 12px; align-content: start;
}
.adminwrap > .card.mt, .adminwrap > .mt, .adminwrap > .lede { margin-top: 0; }
.adminwrap .card { display: grid; gap: var(--gap-block); align-content: start; }
.adminwrap button, .adminwrap .btn { min-height: 44px; }
.adm-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.adm-clock { text-align: right; line-height: 1.1; }
.adm-clock b { display: block; font-size: 30px; font-variant-numeric: tabular-nums; }
.adm-clock span { font-size: 12px; color: var(--faint); }

/* Two big targets. Driven mid-sentence with one thumb, so nothing here is
   smaller than 56px tall. */
.adm-drive { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.adm-drive button { min-height: 56px; font-size: 17px; font-weight: 600; }
.adm-people { display: flex; gap: 22px; }
.adm-people b { font-size: 22px; font-variant-numeric: tabular-nums; }
.adm-people span { display: block; font-size: 12px; color: var(--faint); }
.adm-timer { margin: 0; }
.adm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.adm-grid.two { grid-template-columns: 1fr 1fr; }
.adm-grid button, .adm-grid .btn { min-height: 48px; text-align: center; }
.adm-grid button.on, .adm-grid .btn.on {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent);
  font-weight: 600;
}
.adm-jump { display: grid; gap: var(--gap-bind); }
.adm-jumpi {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  min-height: 48px; padding: 8px 10px; font-size: 14px;
}
.adm-jumpi.on { border-color: var(--accent); background: var(--accent-soft); }
.adm-jumpi .aj-n {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; font-size: 11px;
  font-weight: 700; display: grid; place-items: center; color: var(--faint);
  border: 1px solid var(--line);
}
.adm-jumpi.on .aj-n { background: var(--accent); border-color: var(--accent); color: #fff; }
.adm-jumpi .aj-l { flex: 1 1 auto; font-weight: 600; min-width: 0; }
.adm-jumpi .aj-s { display: block; font-weight: 400; font-size: 12px; color: var(--faint); }
.adm-jumpi .aj-m { flex: 0 0 auto; font-size: 12px; color: var(--faint); }
.adm-specs { display: grid; gap: var(--gap-bind); }
.adm-spec {
  display: grid; gap: var(--gap-bind); width: 100%; text-align: left;
  padding: var(--gap-block) 12px; min-height: 48px;
}
.adm-spec.on { border-color: var(--accent); background: var(--accent-soft); }
.adm-spec .as-h { display: block; font-size: 12px; color: var(--faint); }
.adm-spec .as-h b { color: var(--accent); }
.adm-spec .as-p { display: block; font-size: 14px; line-height: 1.4; }

@media (max-width: 420px) {
  .adm-grid { grid-template-columns: 1fr 1fr; }
  .adm-clock b { font-size: 24px; }
}

/* -------------------------------------------------------------- settings */

.setwrap { max-width: 560px; margin: 0 auto; padding: 14px 14px 40px; }
.setwrap .topbar { align-items: flex-start; }
.setwrap a.chip { text-decoration: none; }
.setlist { padding-left: 20px; }
.setlist li { font-size: 14px; line-height: 1.5; color: var(--muted); margin-bottom: 7px; }
.setrow {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: 14px;
}
.setrow:first-of-type { border-top: 0; }
.setrow b { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------ hallucination game */

.hasked { font-size: 13px; color: var(--faint); }
/* The answer is styled like something that arrived in your inbox, because the
   decision being practised is whether to forward it. */
.hanswer {
  padding: 16px; border: 1px solid var(--line); border-left: 3px solid var(--accent-line);
  border-radius: var(--radius); background: var(--canvas);
  font-size: 16px; line-height: 1.5;
}
.hverdict {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--radius);
  font-size: 14px; line-height: 1.45;
}
.hverdict.good { background: var(--accent-soft); color: var(--accent); }
.hverdict.bad { background: var(--miss-soft); color: var(--miss); }

/* A short projector. Some venue outputs land at 1280x800 or 1366x768, and a
   reveal with six bars ran off the bottom of one: the row nobody caught is
   exactly what would have been cut. Tighten the scale rather than clip. */
@media (max-height: 840px) {
  body.screenmode .slide {
    --gap-page: clamp(12px, 2.4vh, 22px); --gap-block: clamp(8px, 1.6vh, 16px);
    padding: 22px 56px 16px; min-height: 0;
  }
  body.screenmode .slide.aud { --gap-page: clamp(12px, 2.6vh, 24px); min-height: 94vh; }
  body.screenmode .audstats { gap: 40px; }
  body.screenmode .audstats b { font-size: 46px; }
  body.screenmode .slide-t { font-size: clamp(26px, 4.6vh, 40px); }
}

/* Control room rows: who is here, what they did, who signed in. One shape for
   all three, spacing owned by the containers like everything else. */
.adm-row {
  display: flex; align-items: center; gap: var(--gap-block);
  padding: 10px 0; border-top: 1px solid var(--line-soft); min-height: 48px;
}
.adm-row:first-child { border-top: 0; }
.ar-dot {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
  background: var(--line);
}
.ar-dot.on { background: var(--accent); }
.ar-dot.bad { background: var(--miss); }
.ar-b { flex: 1 1 auto; min-width: 0; font-size: 14px; display: grid; gap: 2px; }
.ar-b b { font-weight: 600; }
.ar-b span { font-size: 12px; color: var(--faint); }
.ar-m {
  flex: 0 0 auto; font-size: 12px; color: var(--faint); text-align: right;
  white-space: nowrap;
}
/* 16px, or iOS zooms in on the paste box and stays zoomed. */
#a-rosterpaste { font-family: var(--mono); font-size: 16px; }

/* The activity page reuses the control room's row, plus a second line under the
   timestamp for what the device last did. */
.ar-m .ar-s { display: block; font-size: 11px; color: var(--faint); max-width: 13em; }
.adminwrap .btn.wide { text-align: center; }
.adminwrap .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 520px) {
  .adminwrap .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Live view. A pulsing dot and a brief highlight on a row that just arrived:
   on a page that refreshes every second, the only way to see WHAT changed is
   for the new thing to announce itself. */
.adm-topbtns { display: flex; gap: var(--gap-bind); flex-wrap: wrap; }
.live-head { border-color: var(--accent-line); background: var(--accent-soft); }
.livedot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); margin-right: 6px; vertical-align: baseline;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.25 } }
.adm-row.justin { animation: justin 1.8s ease-out 1; }
@keyframes justin {
  0% { background: var(--accent-soft); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .livedot, .adm-row.justin { animation: none; }
  .adm-row.justin { background: var(--accent-soft); }
}

/* ---- 2026-10-01: workshop changes from the 2026-09-29 call ---------------- */

/* Hands-on steps: the wall tells the room to look down. */
.phonecue {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--gap-bind) var(--gap-block); justify-self: start;
  padding: 10px 18px; border-radius: var(--radius);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--ink); font-size: clamp(15px, 2.3vh, 24px); line-height: 1.35;
}
.phonecue b { color: var(--accent); font-weight: 700; }

/* Blockers with the first move for each: the move is the big line. */
.actlist { display: grid; gap: var(--gap-block); }
.act-row { display: grid; gap: var(--gap-bind); }
.act-issue {
  display: flex; justify-content: space-between; gap: var(--gap-block);
  color: var(--muted); font-size: clamp(13px, 1.9vh, 19px);
}
.act-issue b { color: var(--accent); }
.act-move { font-size: clamp(18px, 3.1vh, 33px); line-height: 1.3; font-weight: 600; }

/* The join code on a teach slide. */
.slide-qr { justify-self: center; }
.slide-qr img { width: clamp(180px, 34vh, 340px); height: auto; aspect-ratio: 1 / 1; image-rendering: pixelated; }

/* One demo on stage: its steps read at projector distance. */
.aud-body .g-terms.story dt { font-size: clamp(16px, 2.6vh, 30px); }
.aud-body .g-terms.story dd { font-size: clamp(15px, 2.4vh, 28px); color: var(--ink); }

/* Phone: the demo's story under the vote. */
.story { display: grid; gap: var(--gap-block); }
.story-sec { display: grid; gap: var(--gap-bind); }
.story-sec p { margin: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }

/* --------------------------------------------- section breaks, page number */

/* A section break: one big centred title, the line under it, and a small line
   for what just ended. Nothing else goes on the wall with it. */
.slide.section-slide > .slide-body { align-content: center; }
.sect { display: grid; gap: var(--gap-page); justify-items: center; text-align: center; }
.sect-head { display: grid; gap: var(--gap-block); justify-items: center; }
.sect-top { display: grid; gap: var(--gap-bind); justify-items: center; }
.sect-lab {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--accent);
}
.sect .slide-t { font-size: 52px; max-width: 18em; text-wrap: balance; overflow-wrap: anywhere; }
.sect .slide-lead { max-width: 32em; text-wrap: balance; }
.sect-done { font-size: 15px; color: var(--faint); }
body.screenmode .sect .slide-t { font-size: clamp(44px, 9vh, 96px); }
body.screenmode .sect .slide-lead { font-size: clamp(20px, 3.4vh, 36px); }
body.screenmode .sect-lab, body.screenmode .sect-done { font-size: clamp(16px, 2.3vh, 26px); }
@media (max-width: 767px) {
  .sect .slide-t { font-size: 34px; }
}

/* The wall's page number, bottom right, small and muted: the same N of M as
   the console's counter. One counter on the wall, so the slide's own
   "n of m" goes in screen mode. The break screen hides it. */
.pageno { display: none; }
body.screenmode .pageno:not([hidden]) {
  display: block; position: fixed; z-index: 30; pointer-events: none;
  right: clamp(16px, 1.6vw, 30px); bottom: clamp(10px, 1.6vh, 20px);
  font-size: clamp(13px, 1.6vh, 18px); color: var(--faint); font-variant-numeric: tabular-nums;
}
body.screenmode .slide-n { display: none; }
body.audience .fullhint { right: auto; left: 18px; }

/* Who runs the module: console only, beside its name and in the run order. */
#h-mod { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
.h-owner { font-size: 13px; font-weight: 600; color: var(--muted); }

/* ------------------------------------------------- the break, at any step */

/* The console's break control: one row above the stage at every step. One
   height for the box and the buttons. */
.brkbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-block); padding: 10px 14px; }
.brkbar.on { border-color: var(--accent); background: var(--accent-soft); }
.brkrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-bind); }
.brkrow[hidden] { display: none; }
.brkbar input { width: 88px; height: 44px; min-height: 44px; padding: 0 12px; font-size: 16px; }
.brkbar button { height: 44px; min-height: 44px; padding: 0 16px; font-size: 15px; white-space: nowrap; }
.brkunit, .brkback { font-size: 14px; color: var(--muted); }
.brksay { font-size: 14px; color: var(--miss); font-weight: 600; }
.brkct { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* "Time is up" on the console's planned-break card. */
.brkup { font-size: 34px; font-weight: 700; line-height: 1.2; text-align: center; text-wrap: balance; }

/* The wall on a break: the word, the clock, the time the room is due back,
   all readable from the back of the room. */
/* Capped at the surface's page step: the wall's own page step grows to 38px
   at 1080, which is off the scale, and the clock's line box already carries
   its own air. */
.brkw { display: grid; gap: var(--gap-surface-page); justify-items: center; text-align: center; }
.brkw-t {
  font-size: clamp(32px, 6vh, 64px); font-weight: 700; color: var(--accent);
  letter-spacing: 0.02em; line-height: 1.1;
}
.brkw-clock { font-size: clamp(96px, 26vh, 300px); }
.brkw-back { font-size: clamp(24px, 4.4vh, 48px); color: var(--muted); line-height: 1.25; }
.brkw-up {
  font-size: clamp(36px, 8vh, 96px); font-weight: 700; line-height: 1.15;
  max-width: 14em; text-wrap: balance;
}

/* The phone's break card. */
.brkcard .brk-up { text-align: center; text-wrap: balance; }

/* Control room: the minutes box sits beside Start at the buttons' height. */
.adm-grid input { min-height: 48px; height: 48px; }

/* Wall floor (spec, October 1st, 2026): nothing the room reads is under 24px at 1920x1080 except the page number and footers. 2.3vh is 24.8px at 1080 and 16.6px at 720; each clamp's floor is the old size, so the 1280x720 wall never shrinks. Last in the file so it wins over the per-component wall sizes above. */
body.screenmode .agenda-h { font-size: clamp(14px, 2.3vh, 26px); }
body.screenmode .agenda li { font-size: clamp(17px, 2.6vh, 30px); }
body.screenmode .agenda li span { font-size: clamp(15px, 2.3vh, 26px); }
body.screenmode .audstats span { font-size: clamp(15px, 2.3vh, 26px); }
body.screenmode .reflg, body.screenmode .auddemo .reflg, body.screenmode .audrefs .reflg { font-size: clamp(16px, 2.3vh, 26px); }
body.screenmode .audvs-h { font-size: clamp(13px, 2.3vh, 26px); }
body.screenmode .ad-t { font-size: clamp(24px, 2.8vh, 32px); }
body.screenmode .nowtag { font-size: clamp(13px, 2.3vh, 26px); }
body.screenmode .bar-note, body.screenmode .audbars .bar-note { font-size: clamp(15px, 2.3vh, 26px); }
body.screenmode .live-h { font-size: clamp(11px, 2.3vh, 26px); }
body.screenmode .live-cap { font-size: clamp(12px, 2.3vh, 26px); }
body.screenmode .live-q { font-size: clamp(15px, 2.4vh, 28px); }
body.screenmode .bar-head, body.screenmode .audbars .bar-head { font-size: clamp(16px, 2.3vh, 26px); }
body.screenmode .livebox .bar-head { font-size: clamp(14px, 2.3vh, 26px); }
body.screenmode .talk-lab { font-size: clamp(12px, 2.3vh, 26px); }
body.screenmode .refq, body.screenmode .audrefs .refq { font-size: clamp(17px, 2.3vh, 26px); }
body.screenmode .promptwall, body.screenmode .audvs .promptwall { font-size: clamp(16px, 2.3vh, 26px); }
body.screenmode .audchecks li { font-size: clamp(16px, 2.6vh, 30px); }
body.screenmode .audchecks li span { font-size: max(0.82em, 2.3vh); }
body.screenmode .act-issue { font-size: clamp(13px, 2.3vh, 26px); }
body.screenmode .g-bar-head { font-size: clamp(15px, 2.3vh, 26px); }
body.screenmode .g-step { font-size: clamp(15px, 2.3vh, 26px); }
body.screenmode .g-arrow { font-size: clamp(22px, 2.6vh, 30px); }
body.screenmode .audrefs .refq { line-height: 1.3; }

/* ---- visual-b (October 6th, 2026) ---- */
/* The feature slides: the welcome screen, Five ways data breaks (as builds),
   How to spot one, the two discussion card slides and the prompt anatomy.
   Every size below is written in u (one design pixel at 1920x1080, the unit
   --u): the wall is calc(1784 * var(--u)) wide inside the slide, the console calc(1250 * var(--u)), a phone
   calc(640 * var(--u)). The Venn picture keeps its own unit (v, the unit --vu) so it can shrink
   alone on a phone. Spacing is owned by the containers (gap), never margins. */
.fg { container-type: inline-size; width: 100%; min-width: 0; }
.fg-root {
  --u: calc(100cqw / 1250);
  --vu: var(--u);
  --fg-teal: #00558c; --fg-teal-soft: #e8f0f6; --fg-teal-line: #b3cde0;
  --fg-red: #111111; --fg-red-soft: #ededed;
  --fg-gold: #00558c; --fg-gold-soft: #e8f0f6;
  /* Row gaps are the fixed steps of the :root scale (18, 12, 8, 4). The projector
     re-scales --gap-* on every slide (body.screenmode .slide) and the gap audit reads
     :root, so a feature slide takes its own copy of the steps instead. */
  --fg-g-page: 18px; --fg-g-block: 12px; --fg-g-bind: 8px; --fg-g-label: 4px;
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--fg-g-page); column-gap: calc(40 * var(--u));
  font-size: calc(26 * var(--u)); line-height: 1.3; color: var(--ink);
}
body.screenmode .fg-root { --u: min(100cqw / 1784, 100vh / 1080); --vu: var(--u); }
@media (max-width: 700px) {
  .fg-root, body.screenmode .fg-root { --u: calc(100cqw / 640); --vu: calc(100cqw / 940); }
}
.fg-root ul, .fg-root ol { margin: 0; padding: 0; list-style: none; }
.fg-root .ico, .fg-root .mark { display: block; }
.fg-over {
  font-size: calc(24 * var(--u)); font-weight: 800; letter-spacing: 0.12em; line-height: 1.2;
  text-transform: uppercase; color: var(--fg-teal);
}
.fg-badge {
  flex: 0 0 auto; display: grid; place-items: center; width: calc(72 * var(--u)); height: calc(72 * var(--u));
  border-radius: 50%; background: var(--fg-teal-soft); color: var(--fg-teal);
}
.fg-badge .ico { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }

/* Motion: one short rise or pop, then it holds. tick() repaints the stage every
   900 ms, so featureGraphic() passes the slide's age in --fg-age and the delay
   below starts a repaint partway through the motion instead of at the start. */
@keyframes fg-rise { from { opacity: 0; transform: translateY(calc(18 * var(--u))); } to { opacity: 1; transform: none; } }
@keyframes fg-pop { from { opacity: 0; transform: translateX(calc(44 * var(--u))) scale(0.93); } to { opacity: 1; transform: none; } }
@keyframes fg-flash { from { box-shadow: 0 0 0 0 rgba(17, 17, 17, 0.55); } to { box-shadow: 0 0 0 calc(18 * var(--u)) rgba(17, 17, 17, 0); } }
.fg-rise { animation: fg-rise 480ms cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--d, 0ms) - var(--fg-age, 0ms)); }
.fg-pop { animation: fg-pop 460ms cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--d, 0ms) - var(--fg-age, 0ms)); }
.fg-flash { animation: fg-flash 900ms ease-out both; animation-delay: calc(560ms - var(--fg-age, 0ms)); }
@media (prefers-reduced-motion: reduce) { .fg-rise, .fg-pop, .fg-flash { animation: none; } }

/* ---- 1. The welcome screen ---- */
.slide-body:has(.fg-welcome) > .slide-head { display: none; }
.fg-welcome { row-gap: var(--fg-g-page); }
.fg-hero {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: calc(24 * var(--u)) calc(44 * var(--u)); padding: calc(40 * var(--u)) calc(56 * var(--u)); border-radius: calc(40 * var(--u));
  background: linear-gradient(115deg, var(--fg-teal-soft) 0%, #ffffff 75%);
  border: calc(2 * var(--u)) solid var(--fg-teal-line);
}
.fg-mark { flex: 0 0 auto; width: calc(150 * var(--u)); height: calc(150 * var(--u)); }
.fg-mark svg { width: 100%; height: 100%; border-radius: calc(34 * var(--u)); box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0, 85, 140, 0.28); }
.fg-brand { font-size: calc(112 * var(--u)); font-weight: 800; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.fg-brand i { font-style: normal; color: var(--fg-teal); }
.fg-panels { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--fg-g-page); }
.fg-panel {
  display: grid; row-gap: var(--fg-g-page); align-content: start; padding: calc(40 * var(--u)) calc(48 * var(--u)); border-radius: calc(32 * var(--u));
  background: #ffffff; border: calc(2 * var(--u)) solid var(--line); box-shadow: 0 calc(10 * var(--u)) calc(32 * var(--u)) rgba(20, 24, 31, 0.07);
}
.fg-event { font-size: calc(60 * var(--u)); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.fg-chips { display: grid; row-gap: var(--fg-g-page); }
.fg-chips li { display: flex; align-items: center; gap: calc(24 * var(--u)); font-size: calc(32 * var(--u)); font-weight: 600; line-height: 1.25; }
.fg-people { display: grid; row-gap: var(--fg-g-page); }
.fg-people li { display: flex; align-items: center; gap: calc(28 * var(--u)); }
.fg-avatar {
  flex: 0 0 auto; display: grid; place-items: center; width: calc(96 * var(--u)); height: calc(96 * var(--u)); border-radius: 50%;
  background: var(--fg-teal); color: #ffffff; font-size: calc(38 * var(--u)); font-weight: 700; letter-spacing: 0.03em;
}
.fg-name { font-size: calc(42 * var(--u)); font-weight: 700; line-height: 1.15; }

/* ---- 2. Five ways data breaks (the list and the five builds) ---- */
.fg-breaks { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--fg-g-page); column-gap: calc(44 * var(--u)); align-items: center; }
body.screenmode .fg-breaks.fg-has-card { grid-template-columns: calc(780 * var(--u)) minmax(0, 1fr); column-gap: calc(56 * var(--u)); }
.fg-brk-list { display: grid; row-gap: var(--fg-g-block); }
.fg-brk {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  column-gap: calc(24 * var(--u)); row-gap: var(--fg-g-label); min-height: calc(108 * var(--u)); padding: calc(16 * var(--u)) calc(24 * var(--u)) calc(16 * var(--u)) calc(20 * var(--u)); border-radius: calc(30 * var(--u));
  background: #ffffff; border: calc(2 * var(--u)) solid var(--line);
}
.fg-brk-t { font-size: calc(34 * var(--u)); font-weight: 700; line-height: 1.15; }
.fg-brk-d { grid-column: 2; font-size: calc(26 * var(--u)); line-height: 1.25; color: var(--muted); }
.fg-breaks:not(.fg-has-card) .fg-brk { box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(20, 24, 31, 0.05); }
@media (min-width: 701px) {
  .fg-breaks:not(.fg-has-card) .fg-brk { grid-template-columns: auto minmax(0, 0.95fr) minmax(0, 1.05fr); column-gap: calc(28 * var(--u)); }
  .fg-breaks:not(.fg-has-card) .fg-brk-d { grid-column: auto; }
  .fg-breaks:not(.fg-has-card) .fg-brk-t { font-size: calc(38 * var(--u)); }
  .fg-breaks:not(.fg-has-card) .fg-brk-d { font-size: calc(30 * var(--u)); }
}
.fg-brk.fg-on { background: var(--fg-teal-soft); border-color: var(--fg-teal); box-shadow: 0 0 0 calc(5 * var(--u)) var(--fg-teal-line); }
.fg-brk.fg-on .fg-badge { background: var(--fg-teal); color: #ffffff; }
.fg-brk.fg-dim { opacity: 0.4; }
body.screenmode .fg-brk.fg-on::after {
  content: ''; position: absolute; top: 50%; right: calc(-30 * var(--u)); width: 0; height: 0; margin-top: calc(-20 * var(--u));
  border-left: calc(26 * var(--u)) solid var(--fg-teal); border-top: calc(20 * var(--u)) solid transparent; border-bottom: calc(20 * var(--u)) solid transparent;
}
.fg-card {
  display: grid; row-gap: var(--fg-g-page); align-content: center; padding: calc(36 * var(--u)) calc(40 * var(--u)); border-radius: calc(34 * var(--u));
  background: #ffffff; border: calc(3 * var(--u)) solid var(--fg-teal-line); box-shadow: 0 calc(18 * var(--u)) calc(52 * var(--u)) rgba(20, 24, 31, 0.14);
}
/* Only the red problem cells have a border. The rows sit 8px apart (the bind step); every
   other cell is plain text with a hairline drawn as a shadow, so no neighbour reads as a box. */
.fg-tbl { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); row-gap: var(--fg-g-bind); }
.fg-th {
  padding: calc(8 * var(--u)) calc(26 * var(--u)) calc(10 * var(--u)); font-size: calc(24 * var(--u)); font-weight: 700; letter-spacing: 0.08em; line-height: 1.2;
  text-transform: uppercase; color: var(--muted); box-shadow: inset 0 calc(-3 * var(--u)) 0 var(--line);
}
.fg-td {
  min-height: calc(80 * var(--u)); padding: calc(16 * var(--u)) calc(26 * var(--u)); display: flex; align-items: center; font-size: calc(34 * var(--u)); font-weight: 600;
  line-height: 1.2; overflow-wrap: anywhere; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 calc(-2 * var(--u)) 0 var(--line-soft);
}
.fg-td.fg-bad {
  padding: calc(13 * var(--u)) calc(23 * var(--u)); background: var(--fg-red-soft); color: var(--fg-red); font-weight: 800;
  border: calc(3 * var(--u)) solid var(--fg-red); border-radius: calc(14 * var(--u)); box-shadow: none;
}
.fg-td.fg-bad.fg-nl { padding-left: calc(26 * var(--u)); border-left-width: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.fg-td.fg-bad.fg-nr { padding-right: calc(26 * var(--u)); border-right-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.fg-line {
  display: flex; align-items: center; gap: calc(22 * var(--u)); padding: calc(22 * var(--u)) calc(28 * var(--u)); border-radius: calc(22 * var(--u));
  background: var(--fg-red-soft); color: #7a1a14; font-size: calc(32 * var(--u)); font-weight: 600; line-height: 1.3;
}
.fg-line .ico { flex: 0 0 auto; width: calc(48 * var(--u)); height: calc(48 * var(--u)); color: var(--fg-red); }

/* ---- 3. How to spot one ---- */
.fg-spot { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--fg-g-page); column-gap: calc(48 * var(--u)); align-items: center; justify-items: center; }
body.screenmode .fg-spot { grid-template-columns: calc(940 * var(--u)) minmax(0, 1fr); justify-items: stretch; }
.fg-venn { width: calc(940 * var(--vu)); max-width: 100%; }
.fg-venn > svg { display: block; width: 100%; height: auto; }
.fg-checks { display: grid; row-gap: var(--fg-g-page); align-content: center; width: 100%; }
.fg-steps { display: grid; row-gap: var(--fg-g-block); }
.fg-step {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: calc(28 * var(--u));
  min-height: calc(136 * var(--u)); padding: calc(20 * var(--u)) calc(30 * var(--u)) calc(20 * var(--u)) calc(28 * var(--u)); border-radius: calc(30 * var(--u)); background: #ffffff;
  border: calc(2 * var(--u)) solid var(--line); box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(20, 24, 31, 0.07);
}
.fg-stile {
  position: relative; display: grid; place-items: center; width: calc(96 * var(--u)); height: calc(96 * var(--u)); border-radius: calc(28 * var(--u));
  background: var(--fg-teal-soft); color: var(--fg-teal);
}
.fg-stile .ico { width: calc(54 * var(--u)); height: calc(54 * var(--u)); }
.fg-snum {
  position: absolute; left: calc(-16 * var(--u)); top: calc(-16 * var(--u)); display: grid; place-items: center; width: calc(42 * var(--u)); height: calc(42 * var(--u));
  border-radius: 50%; background: var(--fg-teal); color: #ffffff; border: calc(3 * var(--u)) solid #ffffff;
  font-size: calc(24 * var(--u)); font-weight: 800; line-height: 1;
}
.fg-st { font-size: calc(36 * var(--u)); font-weight: 700; line-height: 1.2; }
.fg-tip {
  display: flex; align-items: center; gap: calc(26 * var(--u)); padding: calc(24 * var(--u)) calc(32 * var(--u)); border-radius: calc(30 * var(--u));
  background: var(--fg-gold-soft); border: calc(3 * var(--u)) solid var(--fg-gold); color: #5c4208;
  font-size: calc(34 * var(--u)); font-weight: 700; line-height: 1.25;
}
.fg-tip .ico { flex: 0 0 auto; width: calc(64 * var(--u)); height: calc(64 * var(--u)); color: #b07d0a; }

/* ---- 4. Discussion cards ---- */
.fg-grid { display: grid; gap: var(--fg-g-page); }
.fg-c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fg-c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fg-tcard {
  position: relative; overflow: hidden; display: grid; border-radius: calc(38 * var(--u)); padding: calc(40 * var(--u));
  background: var(--tc-soft); border: calc(3 * var(--u)) solid var(--tc-line); box-shadow: 0 calc(12 * var(--u)) calc(34 * var(--u)) rgba(20, 24, 31, 0.08);
}
.fg-tcard::after {
  content: ''; position: absolute; right: calc(-70 * var(--u)); top: calc(-70 * var(--u)); width: calc(230 * var(--u)); height: calc(230 * var(--u)); border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
}
.fg-c3 .fg-tcard { justify-items: center; align-content: start; row-gap: var(--fg-g-page); min-height: calc(420 * var(--u)); text-align: center; }
.fg-c2 .fg-tcard { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: calc(36 * var(--u)); min-height: calc(200 * var(--u)); }
.fg-ib {
  position: relative; z-index: 1; display: grid; place-items: center; border-radius: 50%; color: var(--tc-fg);
  background: radial-gradient(circle closest-side, #ffffff var(--ring), rgba(255, 255, 255, 0.55) calc(var(--ring) + 0.5%));
}
.fg-c3 .fg-ib { --ring: 86%; width: calc(200 * var(--u)); height: calc(200 * var(--u)); }
.fg-c3 .fg-ib .ico { width: calc(94 * var(--u)); height: calc(94 * var(--u)); }
.fg-c2 .fg-ib { --ring: 82.5%; width: calc(160 * var(--u)); height: calc(160 * var(--u)); }
.fg-c2 .fg-ib .ico { width: calc(74 * var(--u)); height: calc(74 * var(--u)); }
.fg-tc-t { position: relative; z-index: 1; font-weight: 800; line-height: 1.18; letter-spacing: -0.01em; }
.fg-c3 .fg-tc-t { font-size: calc(44 * var(--u)); }
.fg-c2 .fg-tc-t { font-size: calc(42 * var(--u)); }
.fg-t-rose { --tc-soft: #ededed; --tc-line: #d6d6d6; --tc-fg: #111111; }
.fg-t-blue { --tc-soft: #e8f0f6; --tc-line: #c0d2f6; --tc-fg: #2a77b0; }
.fg-t-gold { --tc-soft: #e8f0f6; --tc-line: #b3cde0; --tc-fg: #946a06; }
.fg-t-teal { --tc-soft: #e8f0f6; --tc-line: #b3cde0; --tc-fg: #00558c; }
.fg-t-purple { --tc-soft: #ececec; --tc-line: #d2c2f2; --tc-fg: #0b0f14; }

/* ---- 5. Prompt anatomy ---- */
.fg-anatomy { row-gap: var(--fg-g-page); }
.fg-prompt {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: calc(22 * var(--u)) calc(18 * var(--u)); padding: calc(34 * var(--u)) calc(44 * var(--u));
  border-radius: calc(34 * var(--u)); background: #ffffff; border: calc(2 * var(--u)) solid var(--line); box-shadow: 0 calc(12 * var(--u)) calc(38 * var(--u)) rgba(20, 24, 31, 0.08);
}
.fg-piece { display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--fg-g-bind); min-width: 0; max-width: 100%; }
.fg-pchip {
  display: inline-flex; align-items: center; gap: calc(8 * var(--u));
  padding: calc(3 * var(--u)) calc(16 * var(--u)) calc(4 * var(--u)); border-radius: 999px; background: var(--k); color: var(--kt);
  font-size: calc(24 * var(--u)); font-weight: 800; line-height: 1.35;
}
.fg-pchip .ico, .fg-pchip svg { width: calc(26 * var(--u)); height: calc(26 * var(--u)); flex: 0 0 auto; }
.fg-ptext {
  padding: calc(8 * var(--u)) calc(18 * var(--u)) calc(10 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--ks); color: var(--ink);
  font-size: calc(42 * var(--u)); font-weight: 600; line-height: 1.25; box-shadow: inset 0 calc(-6 * var(--u)) 0 var(--k);
}
.fg-k-job { --k: #00558c; --ks: #cfe8e5; --kt: #ffffff; }
.fg-k-who { --k: #00558c; --ks: #e8f0f6; --kt: #14181f; }
.fg-k-from { --k: #2a77b0; --ks: #d9e4fb; --kt: #ffffff; }
.fg-k-back { --k: #0b0f14; --ks: #e6dcf8; --kt: #ffffff; }
.fg-k-rule { --k: #c9432f; --ks: #d6d6d6; --kt: #ffffff; }
.fg-legend { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: var(--fg-g-page); column-gap: calc(24 * var(--u)); }
.fg-legend li { display: grid; justify-items: center; align-content: start; row-gap: var(--fg-g-block); text-align: center; }
.fg-legend .fg-badge { width: calc(84 * var(--u)); height: calc(84 * var(--u)); background: var(--k); color: var(--kt); }
.fg-legend .fg-badge .ico { width: calc(46 * var(--u)); height: calc(46 * var(--u)); }
.fg-lg-t { font-size: calc(28 * var(--u)); font-weight: 700; line-height: 1.2; }

/* ---- the smaller surfaces: the console (stacked) and a phone ---- */
@media (max-width: 700px) {
  .fg-panels, .fg-c3, .fg-c2 { grid-template-columns: minmax(0, 1fr); }
  .fg-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fg-brand { font-size: calc(72 * var(--u)); white-space: normal; text-align: center; }
  .fg-event { font-size: calc(52 * var(--u)); }
  .fg-c3 .fg-tcard { min-height: 0; }
}
/* ---- end visual-b ---- */
/* ---- clean (October 6th, 2026) ---- */

/* One question, asked twice. Phone: a list, the question, five big buttons. */
.cnt-stack { display: grid; gap: var(--gap-block); align-content: start; }
.cnt-title { font-size: 17px; line-height: 1.35; font-weight: 600; }
table.cnt-list { width: 100%; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums; }
table.cnt-list th {
  padding: 0 0 8px; text-align: left; border-bottom: 1px solid var(--line);
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); font-weight: 600;
}
table.cnt-list td { padding: 9px 0; border-bottom: 1px solid var(--line-soft); overflow-wrap: anywhere; }
table.cnt-list th.num, table.cnt-list td.num { text-align: right; padding-left: 12px; white-space: nowrap; }
table.cnt-list tfoot td { padding-top: 10px; border-top: 1px solid var(--line); border-bottom: 0; font-weight: 700; }
.cnt-opts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap-bind); }
.cnt-btn {
  min-height: 60px; padding: 0; font-size: 28px; font-weight: 700; line-height: 1;
  color: var(--accent); background: var(--accent-soft); border: 2px solid var(--accent-line); border-radius: 12px;
}
.cnt-btn:disabled { opacity: 0.6; }
.cnt-ico {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
}
.cnt-ico .ico { width: 32px; height: 32px; }
.cnt-rows { display: grid; gap: var(--gap-bind); width: 100%; }
.cnt-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--gap-block);
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 16px;
}
.cnt-ans { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cnt-ans.ok { color: var(--accent); }

/* The wall while they answer: the question, very large, and two counts. */
body.screenmode .slide.aud.cnt-ask .slide-t { font-size: clamp(36px, 8.4vh, 96px); line-height: 1.1; max-width: 18em; }
.cnt-prog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-page); }
.cnt-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: min(var(--gap-block), var(--gap-surface-page)) var(--gap-page); padding: 3.2vh 2.4vw;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
}
.cnt-card .cnt-ico { width: clamp(56px, 10vh, 112px); height: clamp(56px, 10vh, 112px); }
.cnt-card .cnt-ico .ico { width: 50%; height: 50%; }
.cnt-num b {
  display: block; font-size: clamp(44px, 11vh, 120px); line-height: 1; letter-spacing: -0.03em;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.cnt-num span { display: block; font-size: clamp(16px, 2.6vh, 30px); line-height: 1.3; color: var(--muted); }
.cnt-track { grid-column: 1 / -1; height: 1.6vh; border-radius: 99px; background: var(--line-soft); overflow: hidden; }
.cnt-track i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.cnt-of { grid-column: 1 / -1; font-size: clamp(16px, 2.4vh, 28px); color: var(--muted); }

/* The wall reveal: two panels, why, and the line under them. */
body.screenmode .slide.aud.cnt-cmpslide .slide-t { font-size: clamp(28px, 4.6vh, 52px); }
.cnt-reveal { display: grid; gap: min(var(--gap-block), var(--gap-surface-page)); align-content: start; }
.cnt-cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-page); }
.cnt-panel {
  display: grid; gap: var(--gap-bind); align-content: start; padding: 2vh 1.8vw;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
}
.cnt-panel.messy { background: var(--miss-soft); border-color: #d6d6d6; }
.cnt-panel.clean { background: var(--accent-soft); border-color: var(--accent-line); }
.cnt-plab {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gap-block);
  font-size: clamp(16px, 2.6vh, 28px); font-weight: 700; color: var(--muted);
}
.cnt-plab span { display: flex; align-items: center; gap: var(--gap-bind); text-transform: uppercase; letter-spacing: 0.06em; }
.cnt-plab em { font-style: normal; font-weight: 600; }
.cnt-plab .ico { width: 1.3em; height: 1.3em; }
.cnt-head { font-size: clamp(28px, 6.2vh, 68px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
.cnt-panel.messy .cnt-head { color: var(--miss); }
.cnt-panel.clean .cnt-head { color: var(--accent); }
.cnt-chart { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap-bind); align-items: end; }
.cnt-col { display: grid; gap: var(--gap-bind); justify-items: center; }
.cnt-v, .cnt-n { font-size: clamp(16px, 3vh, 34px); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.cnt-n { display: flex; align-items: center; gap: var(--gap-label); }
.cnt-n .ico { width: 0.9em; height: 0.9em; stroke-width: 3; }
.cnt-well { display: flex; align-items: flex-end; width: 100%; height: 13vh; }
.cnt-well i { display: block; width: 100%; min-height: 3px; border-radius: 8px 8px 0 0; background: #b9c0c9; }
.cnt-col.right .cnt-well i { background: var(--accent); }
.cnt-col.right .cnt-n, .cnt-col.right .cnt-v { color: var(--accent); }
.cnt-why { display: grid; gap: var(--gap-bind); }
.cnt-whyh { font-size: clamp(16px, 2.6vh, 28px); font-weight: 700; line-height: 1.3; }
.cnt-chips { display: flex; flex-wrap: wrap; gap: var(--gap-bind); }
.cnt-chip {
  --gc: #8b939e; --gb: #eef0f3;
  padding: 0.5vh 0.9vw; font-size: clamp(15px, 2.4vh, 26px); line-height: 1.3; font-weight: 600;
  background: var(--gb); border: 2px solid var(--gc); border-radius: 10px;
}
.cnt-chip.g0 { --gc: #00558c; --gb: #e8f0f6; }
.cnt-chip.g1 { --gc: #c98f00; --gb: #e8f0f6; }
.cnt-chip.g2 { --gc: #3b5bb5; --gb: #e8eefb; }
.cnt-chip.g3 { --gc: #8b939e; --gb: #eef0f3; }
.cnt-foot { display: grid; gap: var(--gap-bind); }
.cnt-same { font-size: clamp(20px, 3.4vh, 38px); font-weight: 700; line-height: 1.25; }
.cnt-ai { font-size: clamp(16px, 2.6vh, 28px); line-height: 1.35; color: var(--muted); }
/* ---- demos (October 6th, 2026) ---- */
/* Console: the live-demo question list. Spacing is owned by the containers (gap). */
.qgroup { display: grid; gap: var(--gap-bind); align-content: start; }
.qghead { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-block); }
.qcount { min-width: 28px; padding: 2px 10px; border-radius: 999px; background: var(--accent-soft);
          color: var(--accent); font-size: 13px; font-weight: 700; text-align: center; }
.askbar { align-items: center; }
.askmsg { font-size: 13px; color: var(--warn); }
.qrow { display: flex; align-items: flex-start; gap: var(--gap-bind); }
.qbody { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; padding-top: 8px; }
.qstar { flex: 0 0 auto; width: 36px; height: 36px; min-height: 36px; padding: 0; border: 0;
         border-radius: 8px; background: transparent; color: var(--faint);
         display: inline-flex; align-items: center; justify-content: center; }
.qstar svg { width: 20px; height: 20px; }
.qstar:hover { background: var(--accent-soft); color: var(--accent); }
.qstar.on { color: #00558c; }
.qstar.on svg { fill: #00558c; }
.qa-list { border-color: #00558c; }
@media (max-width: 700px) {
  .qstar { width: 44px; height: 44px; min-height: 44px; }
  .qbody { padding-top: 12px; }
}

/* Phone: the questions this phone has sent. */
.myq { font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; padding: 9px 0;
       border-bottom: 1px solid var(--line-soft); }
.myq:first-child { padding-top: 0; }
.myq:last-child { border-bottom: 0; }
.myq .qt { display: block; margin: 0 0 2px; }

/* Projector: the three-up lineup, no verdict bars. */
.auddemos.three { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.auddemo .ad-ic { width: 72px; height: 72px; border-radius: 50%; background: var(--accent-soft);
                  color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.auddemo .ad-ic svg { width: 38px; height: 38px; }
.auddemo .ad-n { font-size: 24px; font-weight: 700; color: var(--faint); text-transform: uppercase;
                 letter-spacing: 0.08em; }
.auddemo .ad-o { font-size: 24px; color: var(--muted); }
.auddemo.live .ad-ic { background: var(--accent); color: #fff; }
body.screenmode .auddemo .ad-n { font-size: clamp(24px, 2.4vh, 28px); }
body.screenmode .auddemo .ad-o { font-size: clamp(24px, 2.6vh, 30px); }
body.screenmode .auddemo .ad-ic { width: clamp(72px, 9vh, 104px); height: clamp(72px, 9vh, 104px); }
body.screenmode .auddemo .ad-ic svg { width: 52%; height: 52%; }
@media (prefers-reduced-motion: no-preference) {
  .auddemo, .auddemo .ad-ic { transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease; }
}

/* ---- visual-a (October 6th, 2026) ---- */

/* The icon and graphic system for the teach slides: round icon badges, icon
   cards for terms, tinted panels, steps with icons, a hero illustration, the
   conversation mark and the light accent every slide wears. Spacing is owned by
   the containers and uses the surface's own scale. */
:root {
  --gap-surface-block: var(--gap-block);
  --gap-surface-bind: var(--gap-bind);
  --gap-surface-label: var(--gap-label);
}

/* The round badge: a soft teal circle with a teal icon in it. */
.va-badge {
  --va-d: clamp(40px, 6.4vh, 72px);
  flex: 0 0 auto; width: var(--va-d); height: var(--va-d); border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.va-badge .ico { width: 54%; height: 54%; }

/* The light accent on every teach slide: a thin teal rule across the top and
   a faint sparkle in the top right corner, behind the content. A slide with
   "flat": True wears neither. */
.slide.va { position: relative; overflow: hidden; isolation: isolate; }
.slide.va::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: clamp(5px, 0.7vh, 8px); background: var(--accent);
}
.slide.va::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: clamp(16px, 3vh, 34px); right: clamp(20px, 3vw, 56px);
  width: clamp(80px, 12vh, 150px); aspect-ratio: 1;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='7 6 36 36'><path fill='%2300558c' fill-opacity='.07' d='M25 7c2.1 10.9 5.9 14.7 16.8 16.8C30.9 25.9 27.1 29.7 25 40.6 22.9 29.7 19.1 25.9 8.2 23.8 19.1 21.7 22.9 17.9 25 7z'/></svg>") center / contain no-repeat;
}
.slide.va.va-hashero::after { display: none; }

/* Terms with icons: one soft tinted card per term, a teal rail on the left. */
.va-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-surface-page); }
.va-trow {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: var(--gap-surface-page);
  padding: clamp(12px, 2.4vh, 28px) clamp(16px, 1.8vw, 34px);
  background: linear-gradient(90deg, var(--accent-soft), #f2f6fa);
  border: 1px solid var(--accent-line); border-left: 6px solid var(--accent);
  border-radius: 12px;
}
.va-trow:last-child:nth-child(odd) { grid-column: 1 / -1; }
.va-trow .va-badge, .va-step .va-badge, .va-act-card .va-badge { background: #fff; }
.va-ttxt { display: grid; gap: var(--gap-surface-label); min-width: 0; }
.va-term { font-weight: 700; font-size: clamp(16px, 3.2vh, 38px); line-height: 1.2; overflow-wrap: anywhere; }
.va-def { color: var(--muted); font-size: clamp(15px, 2.7vh, 32px); line-height: 1.35; overflow-wrap: anywhere; }
.va-terms .va-badge { --va-d: clamp(48px, 9vh, 100px); }
.va-prow .va-badge { --va-d: clamp(48px, 8.4vh, 92px); }

/* Points with an icon each: an icon row instead of a bullet. */
.slide-pts.va-pic, body.screenmode .slide-pts.va-pic {
  padding-left: 0; list-style: none; gap: var(--gap-surface-page);
}
.va-prow {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: var(--gap-surface-page);
}
.va-ptxt { min-width: 0; overflow-wrap: anywhere; }

/* Panels with an icon in the heading; good is teal, bad is red. */
.g-col.va-col { gap: var(--gap-surface-block); border-top: 5px solid var(--accent); }
.va-h { display: flex; align-items: center; gap: var(--gap-surface-block); }
.va-h .va-badge { --va-d: clamp(34px, 5vh, 56px); }
.g-col.va-good { background: #f2f6fa; border-color: var(--accent-line); border-top-color: var(--accent); }
.g-col.va-bad { background: var(--miss-soft); border-color: #e6bdb9; border-top-color: var(--miss); }
.va-good .va-badge, .va-bad .va-badge { background: #fff; }
.va-bad .va-badge, .va-bad .g-h { color: var(--miss); }

/* Steps with an icon above the words and a chevron between them. */
.g-steps.va-steps { flex-wrap: nowrap; gap: var(--gap-surface-block); }
.g-step.va-step {
  flex-direction: column; justify-content: center; text-align: center;
  gap: var(--gap-surface-block); min-width: 0;
}
.va-stxt { min-width: 0; overflow-wrap: anywhere; }
.va-chev {
  align-self: center; flex: 0 0 auto; display: grid; place-items: center;
  width: clamp(28px, 4vh, 44px); height: clamp(28px, 4vh, 44px);
  border-radius: 50%; background: var(--accent); color: #fff;
}
.va-chev svg { width: 56%; height: 56%; }
.va-bico { display: inline-grid; place-items: center; vertical-align: middle; color: var(--accent); }
.va-bico .ico { width: 1.1em; height: 1.1em; }

/* The hero: a big icon in a soft teal circle with a gold sparkle or two. */
.slide-fig.va-figc { display: grid; justify-items: center; }
.va-hero {
  position: relative; display: grid; place-items: center;
  width: min(100%, clamp(200px, 40vh, 440px)); aspect-ratio: 1;
  padding: clamp(8px, 1.4vh, 16px); border-radius: 50%;
  background: rgba(0, 85, 140, 0.08);
}
.va-disc {
  width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 24%, #f2f6fa 0%, var(--accent-soft) 52%, #cfe5e2 100%);
  color: var(--accent);
}
.va-disc .ico { width: 46%; height: 46%; stroke-width: 1.5; }
.va-sp1, .va-sp2 { position: absolute; display: block; }
.va-sp1 { top: 3%; right: 5%; width: 21%; }
.va-sp2 { bottom: 11%; left: 1%; width: 10%; }
.va-sp { display: block; width: 100%; height: auto; }

/* The discussion mark, centred at the bottom of a slide where the room talks.
   MJ, October 6th, 2026: discussion slides "should be more evident", so the
   bare chat circle became a solid teal pill with the word in it. Same height
   the circle had, so nothing above it moves. */
.va-talk {
  --va-d: clamp(52px, 8vh, 88px);
  height: var(--va-d); border-radius: 999px;
  display: inline-flex; align-items: center; gap: calc(var(--va-d) * 0.2);
  padding: 0 calc(var(--va-d) * 0.45) 0 calc(var(--va-d) * 0.12);
  align-self: center; justify-self: center;
  background: var(--accent); color: #fff;
  box-shadow: 0 0 0 clamp(5px, 0.9vh, 10px) var(--accent-soft);
}
.va-talk-ic {
  width: calc(var(--va-d) * 0.76); height: calc(var(--va-d) * 0.76); border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, 0.18);
}
.va-talk .ico { width: 58%; height: 58%; }
.va-talk-t { font-size: calc(var(--va-d) * 0.4); font-weight: 700; line-height: 1; white-space: nowrap; }
/* A slide with the talk mark: the body on top, the mark centred under it, one
   container owning the gap between them. */
.va-stack {
  flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto; gap: var(--gap-surface-page);
}

/* "Share with the room" and the ground talk screen: one centred column, the
   conversation mark centred at the bottom. */
.slide.aud.va-talkscr, body.screenmode .slide.aud.va-talkscr {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
  place-content: stretch; justify-items: center; text-align: center;
  gap: var(--gap-surface-page);
}
.slide.aud.va-talkscr > :first-child { align-self: center; justify-self: stretch; }
.va-talkcol { display: grid; justify-items: center; gap: var(--gap-surface-page); text-align: center; }
/* The ground talk screen's heading sits centred over its bars, not centred in a
   box parked at the left (MJ, October 6th, 2026). */
.slide.aud.va-talkscr .slide-head { justify-items: center; }
.va-talkq { max-width: 22em; text-align: center; text-wrap: balance; }
.va-talksub { max-width: 40em; text-align: center; text-wrap: balance; }

/* Section breaks read as a chapter page: a soft teal wash, a big module icon
   in a teal circle above "Up next", a gold sparkle. */
.slide.va.section-slide { background: linear-gradient(180deg, var(--accent-soft) 0%, #f2f6fa 48%, #fff 100%); }
.slide.va.section-slide::after {
  top: auto; right: auto; left: 0; bottom: 0;
  width: clamp(160px, 34vh, 380px);
}
.va-sect-top { display: grid; justify-items: center; gap: var(--gap-surface-page); }
.va-sect-ico {
  position: relative; width: clamp(110px, 20vh, 220px); aspect-ratio: 1;
  display: grid; place-items: center; padding: clamp(8px, 1.5vh, 16px);
  border-radius: 50%; background: rgba(0, 85, 140, 0.14);
}
.va-sect-disc {
  width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff;
}
.va-sect-disc .ico { width: 50%; height: 50%; stroke-width: 1.6; }
.va-sect-ico .va-sp1 { top: -6%; right: -10%; width: 28%; }

/* Blockers with the first move for each: an icon, the blocker small, the move
   large and bold teal; the share only once somebody has answered. */
.actlist { gap: var(--gap-surface-block); }
.act-row {
  grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--gap-surface-page);
  padding: clamp(8px, 1.4vh, 16px) clamp(14px, 1.5vw, 26px);
  background: linear-gradient(90deg, var(--accent-soft), #f2f6fa);
  border: 1px solid var(--accent-line); border-left: 6px solid var(--accent); border-radius: 12px;
}
.act-row .va-badge { background: #fff; }
.va-atxt { display: grid; gap: var(--gap-surface-label); min-width: 0; }
.act-row > .va-atxt:first-child { grid-column: 1 / -1; }
.va-atxt .act-issue { justify-content: flex-start; align-items: center; gap: var(--gap-surface-block); }
.va-atxt .act-issue b {
  padding: 0 clamp(8px, 1vh, 12px); border-radius: 999px;
  background: #fff; border: 1px solid var(--accent-line);
}
.act-move { font-weight: 700; color: var(--accent); }
.livebox .bars, .slide.aud.va-talkscr .audbars .bars { gap: var(--gap-surface-page); }
.va-liveico { display: inline-grid; place-items: center; vertical-align: middle; color: var(--accent); }
.va-liveico .ico { width: 1.3em; height: 1.3em; }
.live-h { display: flex; align-items: center; gap: var(--gap-surface-bind); }

@media (max-width: 767px) {
  .va-terms { grid-template-columns: minmax(0, 1fr); }
  .slide.va .slide-main.split { grid-template-columns: minmax(0, 1fr); }
  .va-hero { width: min(100%, clamp(150px, 46vw, 240px)); }
  .g-steps.va-steps { flex-wrap: wrap; }
  .g-step.va-step { flex: 1 1 40%; }
  .va-chev { display: none; }
  .va-badge { --va-d: 44px; }
  .va-sect-ico { width: 120px; }
}
/* ---- device (October 6th, 2026) ---- */

/* "Look at your device" takeover. Projector only, built on demand on the body
   (outside #stage, which is rewritten on every poll). Gap owns the spacing. */
.takeover {
  position: fixed; inset: 0; z-index: 9000;
  display: grid; align-content: center; justify-items: center;
  gap: clamp(18px, 4vh, 44px); padding: 4vh 6vw; text-align: center;
  color: #fff;
  background: radial-gradient(ellipse at 50% 36%, #229a93 0%, var(--accent) 40%, #0c4643 100%);
  opacity: 1; transition: opacity 800ms ease;
}
.takeover.out { opacity: 0; pointer-events: none; }
.tk-art {
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(8px, 2vh, 24px);
}
.tk-disc {
  position: absolute; left: 50%; top: 50%; width: 170%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 66%);
}
.tk-lap, .tk-ph { position: relative; display: block; color: #fff; }
.tk-lap .ico { display: block; width: clamp(170px, 36vh, 400px); height: auto; stroke-width: 1.4; }
.tk-ph .ico { display: block; width: clamp(96px, 19vh, 215px); height: auto; stroke-width: 1.6; color: #00558c; }
.tk-ph::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid #00558c; opacity: 0;
  animation: tkRing 1.5s ease-out 500ms 2;
}
.tk-t {
  font-size: clamp(54px, 13vh, 150px); font-weight: 800; line-height: 1.02;
  letter-spacing: -0.025em;
}
.tk-s {
  max-width: 22em; font-size: clamp(26px, 4.6vh, 56px); line-height: 1.3;
  color: rgba(255,255,255,.92);
}
.tk-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: clamp(6px, 1vh, 10px);
  background: rgba(255,255,255,.16); overflow: hidden;
}
.tk-bar i {
  display: block; height: 100%; width: 100%; background: #00558c;
  transform-origin: left center; animation: tkDrain linear forwards;
}
.tk-lap, .tk-ph, .tk-t, .tk-s { animation: tkRise 560ms cubic-bezier(.2, .8, .2, 1) both; }
.tk-ph { animation-delay: 120ms; }
.tk-t { animation-delay: 160ms; }
.tk-s { animation-delay: 260ms; }
@keyframes tkRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes tkRing { 0% { opacity: .8; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes tkDrain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .takeover *, .takeover *::after { animation: none !important; }
  .takeover { transition-duration: 400ms; }
}

/* Repetitive work on the phone: one question a screen, then a check with the
   Add button pinned to the bottom of the screen (page 49). Container gaps own
   every space; the tap targets are 44px or more. */
.xw { display: grid; gap: var(--gap-page); align-content: start; padding-bottom: 96px; }
.xw-head { display: grid; gap: var(--gap-block); }
.xw-prog { display: flex; align-items: center; gap: var(--gap-block); }
.xw-stepn {
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); white-space: nowrap;
}
.xw-segs { display: flex; flex: 1; gap: var(--gap-bind); }
.xw-segs i { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.xw-segs i.on { background: var(--accent); }
.xw-back {
  display: inline-flex; align-items: center; gap: var(--gap-label);
  min-height: 44px; padding: 0 var(--gap-bind); border: 0; background: none;
  color: var(--accent); font-size: 15px; font-weight: 600;
}
.xw-back .ico { width: 18px; height: 18px; transform: scaleX(-1); }
.xw-q { font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; }
.xw-hint { font-size: 15px; line-height: 1.5; color: var(--muted); }
.xw-opts, .xw-sum { display: grid; gap: var(--gap-bind); }
.xw-row {
  display: grid; grid-template-columns: 40px 1fr 24px; align-items: center;
  gap: var(--gap-block); min-height: 56px; padding: 8px 14px 8px 8px;
  font-size: 16px; line-height: 1.3;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.xw-row[aria-pressed="true"] { font-weight: 600; }
.xw-ico {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
}
.xw-ico .ico { width: 22px; height: 22px; }
.xw-tick { display: grid; place-items: center; color: var(--accent); visibility: hidden; }
.xw-tick .ico { width: 22px; height: 22px; }
.xw-row[aria-pressed="true"] .xw-tick { visibility: visible; }
.xw-meter { display: flex; align-items: flex-end; gap: var(--gap-label); height: 20px; }
.xw-meter i { width: 4px; border-radius: 2px; background: currentColor; opacity: 0.25; }
.xw-meter i.on { opacity: 1; }
.xw-meter i:nth-child(1) { height: 7px; }
.xw-meter i:nth-child(2) { height: 11px; }
.xw-meter i:nth-child(3) { height: 15px; }
.xw-meter i:nth-child(4) { height: 20px; }
.xw-srow {
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center;
  gap: var(--gap-block); min-height: 64px; padding: 10px 6px 10px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
}
.xw-sv { display: grid; gap: var(--gap-label); min-width: 0; }
.xw-sk { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.xw-sl { font-size: 16px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.xw-chg {
  min-height: 44px; min-width: 64px; padding: 0 var(--gap-block); border: 0;
  background: none; color: var(--accent); font-size: 15px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.xw-name { padding: 0; }
.xw-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: var(--gap-block) var(--gap-block) calc(var(--gap-block) + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96); border-top: 1px solid var(--line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.xw-barin { max-width: 520px; margin: 0 auto; }
.xw-barin button { min-height: 52px; font-size: 17px; }
.xw-pot { justify-items: center; }
.xw-done {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
}
.xw-done .ico { width: 28px; height: 28px; }
@media (prefers-reduced-motion: reduce) {
  .xw-row { transition: none; }
}

/* Repetitive work on the projector: the room total as the hero number on the
   left, the kinds of job as icon rows with share bars on the right. */
.xwall {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  gap: var(--gap-page); align-items: center; align-content: start;
}
.xleft { display: grid; gap: var(--gap-page); align-content: center; }
.xhero { display: grid; gap: var(--gap-label); }
.xhero-n {
  font-size: clamp(72px, 17vh, 190px); font-weight: 800; line-height: 0.95;
  letter-spacing: -0.04em; color: var(--accent); font-variant-numeric: tabular-nums;
}
.xhero-l { font-size: clamp(24px, 3.4vh, 40px); font-weight: 600; color: var(--ink); }
.xsub { display: flex; flex-wrap: wrap; gap: var(--gap-page); }
.xsub > div { display: grid; gap: var(--gap-label); }
.xsub b {
  font-size: clamp(36px, 6vh, 68px); font-weight: 700; line-height: 1;
  letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.xsub span { font-size: clamp(24px, 2.6vh, 30px); color: var(--muted); }
.xrows { display: grid; gap: var(--gap-block); }
.xrow { display: grid; grid-template-columns: clamp(48px, 6.2vh, 68px) minmax(0, 1fr); align-items: center; gap: var(--gap-page); }
.xico {
  display: grid; place-items: center; width: clamp(48px, 6.2vh, 68px); aspect-ratio: 1;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent);
}
.xico .ico { width: 54%; height: 54%; }
.xmain { display: grid; gap: var(--gap-bind); min-width: 0; }
.xhead { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gap-page); font-size: clamp(24px, 2.8vh, 32px); line-height: 1.2; }
.xl { font-weight: 600; min-width: 0; }
.xp { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.xp b { color: var(--accent); font-weight: 700; }
.xtrack { height: clamp(14px, 1.8vh, 20px); border-radius: 10px; background: var(--line-soft); overflow: hidden; }
.xfill { height: 100%; border-radius: inherit; background: var(--accent); }
.xrow.zero .xp { display: none; }
.xrow.zero .xl { color: var(--muted); font-weight: 500; }
.xrow.zero .xico { background: var(--line-soft); color: var(--faint); }

/* ---- timers-wall (October 6th, 2026) ---- */
/* The step clock, governance one scenario at a time with a live donut, all
   eight at a glance, and the readiness ask (static/timers-wall.js draws them).
   Allow is teal, a written limit is gold, block is red, everywhere. Room text
   is 2.3vh or more: 24.8px on a 1080-line projector. Stacks use the gap scale. */
.tw-allow { --tw-c: var(--accent); --tw-soft: var(--accent-soft); --tw-ink: var(--accent); }
.tw-limit { --tw-c: #003a61; --tw-soft: #e8f0f6; --tw-ink: var(--warn); }
.tw-block { --tw-c: var(--miss); --tw-soft: var(--miss-soft); --tw-ink: var(--miss); }

.tw-ring { position: relative; width: clamp(96px, 17vh, 190px); aspect-ratio: 1; flex: none; }
.tw-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.tw-ring circle { fill: none; stroke-width: 10; }
.tw-ring-bg { stroke: var(--line-soft); }
.tw-ring-fg { stroke: var(--accent); stroke-dasharray: 100; stroke-linecap: round; transition: stroke-dashoffset .25s linear, stroke .3s; }
.tw-ring.tw-gold .tw-ring-fg { stroke: #003a61; }
.tw-ring-t { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; }
.tw-ring-t b { font-size: clamp(22px, 4.6vh, 50px); font-variant-numeric: tabular-nums; line-height: 1; }
.tw-ring-t span { font-size: clamp(13px, 2.3vh, 26px); color: var(--muted); line-height: 1; }
.tw-ring.tw-gold .tw-ring-t b { color: var(--warn); }

.tw-dwrap { position: relative; aspect-ratio: 1; flex: none; }
.tw-donut { width: 100%; height: 100%; transform: rotate(0deg); display: block; }
.tw-donut circle { fill: none; stroke-width: 6.5; }
.tw-seg-bg { stroke: var(--line-soft); }
.tw-seg { stroke: var(--tw-c); transition: stroke-dasharray .4s ease, stroke-dashoffset .4s ease; }
.tw-dlg { width: clamp(150px, 28vh, 300px); }
.tw-dmd { width: clamp(120px, 20vh, 220px); }
.tw-dsm { width: clamp(64px, 11vh, 124px); }
.tw-dt { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; }
.tw-dt b { font-size: clamp(22px, 4.4vh, 48px); line-height: 1; font-variant-numeric: tabular-nums; }
.tw-dt span { font-size: clamp(13px, 2.3vh, 26px); color: var(--muted); line-height: 1; }

.tw-side { display: grid; justify-items: center; align-content: start; gap: 18px; }
.tw-vote { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 56px); align-items: center; }
.tw-vote-main { display: grid; gap: 18px; min-width: 0; }
.tw-scen { margin: 0; font-size: clamp(22px, 4.4vh, 52px); line-height: 1.22; font-weight: 600; overflow-wrap: anywhere; }
.tw-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tw-choice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: clamp(10px, 1.6vh, 18px) clamp(12px, 1.2vw, 20px); border-radius: 14px;
  background: var(--tw-soft); border: 1px solid var(--tw-c); color: var(--ink); }
.tw-cico { width: clamp(30px, 5vh, 56px); height: clamp(30px, 5vh, 56px); color: var(--tw-c); display: grid; place-items: center; }
.tw-cico .ico, .tw-gico .ico, .tw-tico .ico { width: 100%; height: 100%; }
.tw-cl { font-size: clamp(14px, 2.4vh, 28px); line-height: 1.2; font-weight: 600; overflow-wrap: anywhere; }
.tw-cn { font-size: clamp(20px, 3.6vh, 40px); color: var(--tw-ink); font-variant-numeric: tabular-nums; }

.tw-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.tw-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px;
  padding: clamp(8px, 1.4vh, 16px); border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.tw-card.tw-hot { border: 3px solid #003a61; background: #f2f6fa; }
.tw-ctext { display: grid; gap: 4px; min-width: 0; }
.tw-short { font-size: clamp(14px, 2.3vh, 26px); line-height: 1.2; font-weight: 600; overflow-wrap: anywhere; }
.tw-win { font-size: clamp(14px, 2.3vh, 26px); color: var(--tw-ink, var(--muted)); line-height: 1.2; }
.tw-tag { justify-self: start; font-size: clamp(12px, 2.3vh, 24px); font-weight: 700; color: var(--warn); background: #e8f0f6; border-radius: 999px; padding: 2px 10px; }
.tw-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; font-size: clamp(14px, 2.3vh, 26px); color: var(--muted); }
.tw-legend span, .tw-live-lg span { display: inline-flex; align-items: center; gap: 8px; }
.tw-dot { width: 0.8em; height: 0.8em; border-radius: 50%; background: var(--tw-c); display: inline-block; flex: none; }

.tw-pulse { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 56px); align-items: center; }
.tw-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.tw-tile { display: grid; justify-items: center; gap: 12px; text-align: center;
  padding: clamp(14px, 2.6vh, 30px) 12px; border-radius: 16px;
  background: linear-gradient(160deg, var(--accent-soft), #f2f6fa); border: 1px solid var(--accent-line);
  font-size: clamp(16px, 3vh, 34px); font-weight: 700; }
.tw-tico { width: clamp(40px, 7vh, 76px); height: clamp(40px, 7vh, 76px); color: var(--accent); display: grid; place-items: center; }
.tw-count { display: grid; justify-items: center; gap: 4px; text-align: center; }
.tw-count b { font-size: clamp(28px, 6vh, 64px); line-height: 1; color: var(--accent); }
.tw-count span { font-size: clamp(14px, 2.3vh, 26px); color: var(--muted); }

.tw-gov { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.tw-gcard { display: grid; justify-items: center; align-content: center; gap: 12px; text-align: center;
  padding: clamp(18px, 4vh, 44px) clamp(12px, 1.4vw, 24px); border-radius: 18px;
  background: var(--tw-soft); border: 2px solid var(--tw-c); }
.tw-gico { width: clamp(48px, 10vh, 110px); height: clamp(48px, 10vh, 110px); color: var(--tw-c); display: grid; place-items: center; }
.tw-gt { font-size: clamp(18px, 3.4vh, 38px); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }

.tw-live-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.tw-live-lg { display: grid; gap: 8px; font-size: clamp(14px, 2.3vh, 26px); }
.tw-live-lg b { margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; }

.tw-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-block); padding: 10px 14px; border-color: var(--accent); }
.tw-bar[hidden] { display: none; }
.tw-bar-ct { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 4.5ch; }
.tw-bar-say { color: var(--muted); font-size: 14px; }
.tw-bar button { height: 44px; min-height: 44px; padding: 0 16px; font-size: 15px; white-space: nowrap; }

@media (max-width: 760px) {
  .tw-vote, .tw-pulse { grid-template-columns: minmax(0, 1fr); }
  .tw-choices, .tw-gov { grid-template-columns: minmax(0, 1fr); }
  .tw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .tw-ring-fg, .tw-seg { transition: none; }
}

/* ---- timers-phone (October 6th, 2026) ---- */

/* The step timer bar: a slim pill that sticks to the top of a timed phone screen
   (the readiness ask scrolls, and the time left is what nobody should lose). The
   dock owns the space under the pill; the shadow paints the page colour over the
   strip above it so cards do not show through while it is stuck. */
.tv-dock {
  position: sticky; top: 8px; z-index: 5;
  padding: 0 0 var(--gap-block);
  background: var(--canvas); box-shadow: 0 -8px 0 0 var(--canvas);
}
.tv-dock[hidden] { display: none; }
.tvbar {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: var(--gap-block); padding: 10px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 1px 3px rgba(20, 24, 31, 0.08);
}
.tvtxt {
  min-width: 5.6em; font-size: 15px; font-weight: 700; line-height: 1.3;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.tvtrack { height: 10px; border-radius: 5px; background: var(--line-soft); overflow: hidden; }
.tvtrack > i {
  display: block; height: 100%; width: 100%; border-radius: 5px; background: var(--accent);
  transition: width 0.3s linear, background-color 0.4s;
}
.tvbar[data-hot="1"] .tvtrack > i { background: #00558c; }
.tvbar[data-hot="1"] .tvtxt { color: var(--warn); }

/* The governance call on the phone: one scenario, three big buttons. The card is
   the phone page's own grid, so the 12px between its rows comes from the
   container; the three buttons stack on the 8px step and the segments of the
   place-in-the-run bar on the 4px step. */
.tvrow { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-block); }
.tvstate {
  display: inline-flex; align-items: center; gap: var(--gap-label);
  font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--muted); white-space: nowrap;
}
.tvstate.on { color: var(--accent); }
.tvstate .ico { width: 16px; height: 16px; stroke-width: 3; }

/* One segment per scenario: grey ahead, teal once this phone has answered it,
   taller for the one on screen (hollow until it is answered). */
.tvsteps {
  display: grid; grid-template-columns: repeat(var(--n, 8), minmax(0, 1fr));
  gap: var(--gap-label); align-items: center; height: 10px;
}
.tvsteps > i {
  display: block; height: 6px; border-radius: 3px; background: var(--line);
  transition: background-color 0.25s, height 0.25s;
}
.tvsteps > i.on { background: var(--accent); }
.tvsteps > i.now { height: 10px; border-radius: 5px; }
.tvsteps > i.now:not(.on) { background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent); }

.tvq { font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.tvopts { display: grid; gap: var(--gap-bind); }

/* Each button carries its own colour in four variables: the line and disc
   (--c), the unselected fill (--c-soft), the selected fill (--c-fill) and the
   text on it (--c-on). Gold takes dark text; teal and red take white. */
.tvc-allow { --c: var(--accent); --c-soft: var(--accent-soft); --c-fill: var(--accent); --c-on: #fff; }
.tvc-guardrail { --c: var(--warn); --c-soft: var(--warn-soft); --c-fill: #00558c; --c-on: var(--ink); }
.tvc-block { --c: var(--miss); --c-soft: var(--miss-soft); --c-fill: var(--miss); --c-on: #fff; }
.tvopt {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center;
  gap: var(--gap-block); width: 100%; min-height: 64px; padding: 10px 14px 10px 10px;
  font-size: 17px; font-weight: 600; line-height: 1.25; text-align: left; overflow-wrap: anywhere;
  color: var(--c); background: var(--c-soft); border: 2px solid var(--c); border-radius: 14px;
  transition: background-color 0.15s, color 0.15s;
}
.tvopt:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.tvopt[aria-pressed="true"] { background: var(--c-fill); color: var(--c-on); }
.tvdisc {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--c); color: #fff; transition: background-color 0.15s, color 0.15s;
}
.tvdisc .ico { width: 24px; height: 24px; }
.tvopt[aria-pressed="true"] .tvdisc { background: #fff; color: var(--c); }
.tverr { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--miss); }
/* Back and Next under the three buttons: each phone walks the eight at its own
   pace (MJ, October 6th, 2026). */
.tvnav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-bind); }
.tvnav button { min-height: 44px; font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
  .tvtrack > i, .tvsteps > i, .tvopt, .tvdisc { transition: none; }
  .tvopt:active { transform: none; }
}

/* ---- Hendrick Autoguard (October 15th, 2026) ---------------------------------
   hagworkshop.com: the AI lunch and learn. Hendrick blue, black and white only
   (2025 brand standards), Montserrat throughout, and motion that plays once per
   step: the wall repaints a new step fresh and patches the same step in place,
   so nothing here replays on a poll. The streaks behind the hero screens are the
   five speed lines from the Hendrick Autoguard logo. */

@font-face {
  font-family: "Montserrat"; src: url("/static/fonts/Montserrat-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat"; src: url("/static/fonts/Montserrat-Italic-var.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
}
:root {
  --hag-blue: #00558c; --hag-deep: #003a61; --hag-night: #001f36;
  --hag-ink: #0b0f14; --hag-tint: #e8f0f6; --hag-line: #dbe5ee;
  --ink: #0b0f14; --muted: #4f5b67; --faint: #7d8894;
  --accent: #00558c; --accent-soft: #e8f0f6; --accent-line: #b3cde0;
  --miss: #111111; --miss-soft: #ededed; --warn: #003a61; --warn-soft: #e8f0f6;
  --canvas: #f2f5f8;
  --sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
h1, h2, h3 { font-weight: 800; letter-spacing: -0.015em; }
button.primary, .btn.primary { background: var(--hag-blue); border-color: var(--hag-blue); }
.slide { position: relative; }

/* The workshop's sparkles are its own brand, not ours. */
.va-sp1, .va-sp2, .va-sp, .slide.va::after { display: none !important; }

/* ------------------------------------------------------------ content slides */

.hag-corner {
  position: absolute; z-index: 2; pointer-events: none;
  top: clamp(14px, 2.4vh, 30px); right: clamp(18px, 2.2vw, 46px);
  height: clamp(30px, 5.4vh, 62px); width: auto;
}
.slide:has(> .hag-corner) .slide-head { padding-right: clamp(120px, 15vw, 300px); }
.slide.va::before { background: linear-gradient(90deg, var(--hag-blue) 0 72%, var(--hag-ink) 72% 100%); }
body.screenmode .slide .slide-t { font-weight: 800; letter-spacing: -0.02em; }

/* ------------------------------------------------- blue hero screens */

.slide.hag-blue, body.screenmode .slide.hag-blue {
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 60%),
    linear-gradient(135deg, #0064a3 0%, var(--hag-blue) 40%, var(--hag-deep) 78%, var(--hag-night) 100%);
  color: #fff; border: 0; overflow: hidden; isolation: isolate;
}
.slide.hag-blue::before { display: none; }
.slide.hag-blue > .slide-body, .slide.hag-blue > .hl-grid, .slide.hag-blue > .hv-grid { position: relative; z-index: 1; }
.slide.hag-blue .slide-t, .slide.hag-blue .sect .slide-t { color: #fff; }
.slide.hag-blue .slide-lead { color: rgba(255, 255, 255, 0.86); }
.slide.hag-blue .sect-done { color: rgba(255, 255, 255, 0.62); }
.slide.hag-blue .slide-foot, .slide.hag-blue .slide-n { color: rgba(255, 255, 255, 0.7); }
.slide.hag-blue .sdot { background: rgba(255, 255, 255, 0.3); }
.slide.hag-blue .sdot.on { background: #fff; }

/* Section breaks: big italic capitals, the way the brand sets a title. */
.slide.section-slide .sect { justify-items: start; text-align: left; }
.slide.section-slide .sect-head, .slide.section-slide .sect-top { justify-items: start; }
.slide.hag-blue .sect-lab {
  display: inline-flex; align-items: center; gap: 14px;
  background: rgba(255, 255, 255, 0.14); color: #fff; border-radius: 999px;
  padding: 0.45em 1.1em; letter-spacing: 0.16em;
}
.sect-num { font-variant-numeric: tabular-nums; opacity: 0.75; letter-spacing: 0.08em; }
.slide.section-slide .sect .slide-t {
  font-style: italic; font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em;
  line-height: 0.95; max-width: 14em; text-wrap: balance;
}
body.screenmode .slide.section-slide .sect .slide-t { font-size: clamp(48px, 11vh, 128px); }
.slide.section-slide .sect .slide-lead { max-width: 30em; }
.slide.hag-blue .va-sect-top { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); }
.slide.hag-blue .va-sect-disc {
  background: rgba(255, 255, 255, 0.12); color: #fff; border: 2px solid rgba(255, 255, 255, 0.35);
}

/* The five streaks from the logo: they shoot in from the left once, then rest
   faint behind the screen while a soft light runs along them. */
.hag-speed {
  position: absolute; left: 0; bottom: 8%; width: 62%; height: 24%;
  pointer-events: none; z-index: 0; display: grid; align-content: space-between;
}
.hag-speed i {
  display: block; height: clamp(5px, 0.8vh, 10px); border-radius: 0 999px 999px 0;
  width: calc(46% + var(--s) * 13%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.22) 70%, rgba(255, 255, 255, 0.34));
  animation: hag-streak 900ms var(--ease) both; animation-delay: calc(var(--s) * 90ms + 120ms);
  position: relative; overflow: hidden;
}
.hag-speed i::after {
  content: ""; position: absolute; inset: 0; width: 30%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  animation: hag-shine 5.5s ease-in-out infinite; animation-delay: calc(1.4s + var(--s) * 0.25s);
  transform: translateX(-120%);
}
@keyframes hag-streak { from { transform: translateX(-105%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hag-shine { 0% { transform: translateX(-120%); } 45%, 100% { transform: translateX(420%); } }

/* ----------------------------------------------------------- welcome, finish */

.slide.hag-hero > .slide-body { align-content: center; }
.slide.hag-hero .fg-root { --u: 1px; }
.hw { display: grid; gap: clamp(18px, 3.2vh, 40px); justify-items: start; }
.hw-logo { height: clamp(96px, 16vh, 180px); width: auto; display: block; }
.hw-title {
  margin: 0; font-size: clamp(54px, 11.5vh, 140px); font-weight: 900; font-style: italic;
  text-transform: uppercase; line-height: 0.92; letter-spacing: -0.02em; color: #fff;
  text-wrap: balance;
}
.hw-ai {
  display: inline-block; background: #fff; color: var(--hag-blue);
  padding: 0 0.16em; border-radius: 0.08em; font-style: italic;
}
.hw-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(10px, 1.6vh, 18px); }
.hw-chips li {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 22px 10px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: clamp(17px, 2.6vh, 30px); font-weight: 600; color: #fff;
}
.hw-ci { width: 1.7em; height: 1.7em; border-radius: 50%; background: #fff; color: var(--hag-blue); display: grid; place-items: center; }
.hw-ci svg { width: 58%; height: 58%; }
.hf-sub { font-size: clamp(30px, 5.4vh, 64px); font-weight: 800; color: #fff; }
.hf-line { display: flex; align-items: center; gap: 12px; font-size: clamp(18px, 2.7vh, 30px); color: rgba(255, 255, 255, 0.9); }
.hf-line svg { width: 1.3em; height: 1.3em; }
.hf-flag {
  position: absolute; right: 7%; top: 50%; z-index: 0;
  width: clamp(180px, 34vh, 400px); aspect-ratio: 4 / 3; border-radius: 6px;
  background: repeating-conic-gradient(var(--hag-ink) 0 25%, #fff 0 50%) 0 0 / 25% 33.333%;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.35);
  animation: hag-wave 2.6s ease-in-out infinite; transform-origin: left center;
}
@keyframes hag-wave {
  0%, 100% { transform: translateY(-50%) perspective(800px) rotateY(-14deg) skewY(-5deg); }
  50% { transform: translateY(-53%) perspective(800px) rotateY(10deg) skewY(4deg); }
}

/* ---------------------------------------------------------------- the lobby */

.slide.aud.hag-lobby, .slide.aud.hag-live { min-height: 96vh; }
.hl-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 80px); align-items: center;
}
.hl-left { display: grid; gap: clamp(14px, 2.4vh, 28px); justify-items: start; }
.hl-logo { height: clamp(64px, 10vh, 118px); width: auto; display: block; }
.hl-t {
  margin: 0; font-size: clamp(40px, 8.4vh, 100px); font-weight: 900; font-style: italic;
  text-transform: uppercase; line-height: 0.92; letter-spacing: -0.02em; color: #fff;
}
.hl-sub { font-size: clamp(18px, 2.7vh, 30px); color: rgba(255, 255, 255, 0.88); margin: 0; }
.hl-qr {
  background: #fff; border-radius: 22px; padding: clamp(14px, 2.2vh, 26px);
  display: grid; gap: 10px; justify-items: center; width: max-content;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.hl-qr img { width: clamp(190px, 30vh, 340px); height: auto; display: block; }
.hl-qr .qrhost { color: var(--hag-ink); }
.hl-right { display: grid; gap: clamp(14px, 2.6vh, 30px); align-content: center; }
.hl-count { display: grid; gap: 6px; }
.hl-count b {
  font-size: clamp(84px, 17vh, 200px); font-weight: 900; line-height: 0.88;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: #fff;
}
.hl-count span {
  font-size: clamp(16px, 2.4vh, 28px); text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.82); font-weight: 700;
}
.hl-names {
  display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start;
  max-height: 44vh; overflow: hidden;
}
.hl-name {
  display: inline-flex; gap: 8px; align-items: baseline;
  background: rgba(255, 255, 255, 0.13); border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px; padding: 0.42em 0.95em; font-size: clamp(15px, 2.3vh, 26px); color: #fff;
  animation: hag-pop 600ms var(--ease) both;
}
.hl-name b { font-weight: 700; }
.hl-name i { font-style: normal; font-size: 0.7em; color: rgba(255, 255, 255, 0.74); }
@keyframes hag-pop { from { opacity: 0; transform: translateY(16px) scale(0.75); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- the track */

/* The run order: two columns of four, numbered (October 15th, 2026). Every
   size runs off the .fg container's width, so a name never outgrows its box. */
.fg-root.fg-track { --u: 1px; }
.ht2 {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows, 4), auto);
  column-gap: var(--gap-surface-page); row-gap: var(--gap-surface-block);
}
.ht2-i {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center;
  gap: clamp(10px, 1.4cqw, 20px);
  padding: clamp(10px, 1.3cqw, 18px) clamp(12px, 1.6cqw, 24px);
  background: #fff; border: 2px solid var(--hag-line); border-radius: 16px;
}
.ht2-n {
  width: clamp(34px, 3.6cqw, 56px); aspect-ratio: 1; border-radius: 50%;
  background: var(--hag-blue); color: #fff; font-weight: 900;
  font-size: clamp(16px, 1.9cqw, 28px); display: grid; place-items: center;
}
.ht2-ic { color: var(--hag-blue); display: grid; place-items: center; }
.ht2-ic svg { width: clamp(22px, 2.4cqw, 36px); height: clamp(22px, 2.4cqw, 36px); }
.ht2-t { font-weight: 800; font-size: clamp(16px, 2.2cqw, 34px); line-height: 1.2; overflow-wrap: break-word; }

/* -------------------------------------------------------------- data types */

.fg-root.fg-datatypes, .fg-root.fg-need, .fg-root.fg-shots, .fg-root.fg-connect, .fg-root.fg-stats { --u: 1px; }
.hd2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 48px); }
.hd-p {
  border-radius: 20px; padding: clamp(18px, 3vh, 36px); background: #fff;
  border: 2px solid var(--hag-line); display: grid; gap: clamp(12px, 2vh, 22px);
  align-content: start; box-shadow: 0 18px 44px rgba(0, 58, 97, 0.08);
}
.hd-p.hd-r { background: var(--hag-ink); color: #fff; border-color: var(--hag-ink); }
.hd-h { display: flex; gap: 14px; align-items: center; }
.hd-h b { display: block; font-size: clamp(22px, 3.6vh, 40px); font-weight: 900; }
.hd-h span { display: block; font-size: clamp(14px, 2vh, 22px); opacity: 0.72; font-weight: 600; }
.hd-i {
  flex: 0 0 auto; width: clamp(44px, 6.4vh, 70px); aspect-ratio: 1; border-radius: 16px;
  background: var(--hag-blue); color: #fff; display: grid; place-items: center;
}
.hd-i svg { width: 55%; height: 55%; }
.hd-r .hd-i { background: #fff; color: var(--hag-ink); }
.hd-tbl {
  display: grid; grid-template-columns: repeat(var(--cols), auto); border-radius: 12px;
  overflow: hidden; border: 1px solid #c9d8e5; font-size: clamp(14px, 2.2vh, 24px);
}
.hd-th { background: var(--hag-blue); color: #fff; font-weight: 700; padding: 0.55em 0.8em; }
.hd-td { padding: 0.55em 0.8em; border-top: 1px solid #e3eaf1; background: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hd-note {
  display: flex; gap: 12px; align-items: flex-start; background: #fff; color: var(--hag-ink);
  border-radius: 16px 16px 16px 4px; padding: clamp(14px, 2.4vh, 26px);
  font-size: clamp(16px, 2.5vh, 28px); line-height: 1.45; font-style: italic;
}
.hd-note p { margin: 0; }
.hd-note svg { flex: 0 0 auto; width: 1.2em; height: 1.2em; color: var(--hag-blue); }
.hd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hd-chips span {
  padding: 0.35em 0.9em; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.4);
  font-size: clamp(13px, 2vh, 22px); font-weight: 600;
}
.hd-line { margin: 0; font-size: clamp(15px, 2.3vh, 26px); font-weight: 700; }

/* ------------------------------------------------------------- the need */

.hn { display: grid; gap: clamp(22px, 4.4vh, 54px); justify-items: center; }
.hn-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 48px); width: 100%; }
.hn-logo { margin: 0; display: grid; gap: 12px; justify-items: center; text-align: center; }
.hn-art {
  width: 100%; aspect-ratio: 16 / 10; background: #fff; border-radius: 22px;
  display: grid; place-items: center; padding: clamp(14px, 2.6vh, 32px);
  box-shadow: 0 22px 54px rgba(0, 58, 97, 0.13); border: 1px solid #e3eaf1;
}
.hn-art img { max-width: 100%; max-height: clamp(110px, 20vh, 240px); object-fit: contain; display: block; }
.hn-logo figcaption { font-weight: 800; font-size: clamp(16px, 2.4vh, 28px); }
.hn-ask {
  display: inline-flex; align-items: center; gap: 14px; background: var(--hag-blue); color: #fff;
  border-radius: 999px; padding: 12px 30px 12px 12px; font-size: clamp(18px, 2.9vh, 34px); font-weight: 800;
}
.hn-qi { width: 1.8em; aspect-ratio: 1; border-radius: 50%; background: #fff; color: var(--hag-blue); display: grid; place-items: center; }
.hn-qi svg { width: 60%; height: 60%; }

/* ------------------------------------------------------- the screenshots */

.hs { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: clamp(18px, 2.6vw, 48px); align-items: center; }
.hs-frame { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 34px 80px rgba(0, 31, 54, 0.28); border: 1px solid #d6e1ea; }
.hs-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #eef2f6; border-bottom: 1px solid #d6e1ea; }
.hs-bar > i { width: 11px; height: 11px; border-radius: 50%; background: #c6d1db; }
.hs-url {
  margin-left: 10px; display: inline-flex; gap: 6px; align-items: center; background: #fff;
  border-radius: 999px; padding: 4px 16px; font-size: clamp(12px, 1.7vh, 17px); color: var(--hag-ink); font-weight: 700;
}
.hs-url svg { width: 1em; height: 1em; color: var(--hag-blue); }
.hs-view { position: relative; aspect-ratio: 16 / 10; background: #f6f8fa; }
.hs-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top;
  opacity: 0; animation: hag-shot 18s linear infinite; animation-delay: calc(var(--i) * 4.5s);
}
@keyframes hag-shot { 0% { opacity: 0; transform: scale(1.025); } 3% { opacity: 1; } 25% { opacity: 1; transform: scale(1); } 28%, 100% { opacity: 0; transform: scale(1); } }
.hs-caps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(10px, 1.8vh, 18px); }
.hs-cap {
  position: relative; overflow: hidden; display: flex; gap: 14px; align-items: center;
  padding: clamp(10px, 1.8vh, 18px) 16px; border-radius: 14px; background: #fff;
  border: 1px solid #e3eaf1; font-size: clamp(15px, 2.3vh, 26px); font-weight: 700; line-height: 1.25;
}
.hs-cap::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: var(--hag-blue);
  opacity: 0; animation: hag-capon 18s linear infinite; animation-delay: calc(var(--i) * 4.5s);
}
.hs-n {
  flex: 0 0 auto; width: 1.9em; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: var(--hag-tint); color: var(--hag-blue); font-weight: 900;
}
@keyframes hag-capon { 0% { opacity: 0; } 2%, 26% { opacity: 1; } 29%, 100% { opacity: 0; } }

/* --------------------------------------------------------- how it connects */

.hc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, 0.45fr) minmax(0, 1fr); align-items: center; gap: clamp(10px, 1.6vw, 30px); }
.hc-card {
  background: #fff; border-radius: 22px; padding: clamp(18px, 3.2vh, 38px); border: 2px solid #e3eaf1;
  display: grid; gap: 10px; box-shadow: 0 22px 54px rgba(0, 58, 97, 0.11);
}
.hc-card.to { border-color: var(--hag-blue); }
.hc-i { width: clamp(48px, 7vh, 76px); aspect-ratio: 1; border-radius: 18px; background: var(--hag-blue); color: #fff; display: grid; place-items: center; }
.hc-card.from .hc-i { background: var(--hag-ink); }
.hc-i svg { width: 55%; height: 55%; }
.hc-h { font-size: clamp(24px, 4vh, 46px); font-weight: 900; letter-spacing: -0.02em; }
.hc-s { font-size: clamp(14px, 2.1vh, 23px); color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; }
.hc-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hc-card li { display: flex; gap: 10px; align-items: center; font-size: clamp(16px, 2.5vh, 28px); font-weight: 600; }
.hc-card li svg { flex: 0 0 auto; width: 1em; height: 1em; color: var(--hag-blue); }
.hc-link { display: grid; justify-items: center; gap: 14px; }
.hc-wire { position: relative; width: 100%; height: 6px; border-radius: 999px; background: repeating-linear-gradient(90deg, var(--hag-blue) 0 14px, rgba(0, 85, 140, 0.2) 14px 24px); }
.hc-wire i {
  position: absolute; top: 50%; left: 0; width: 16px; height: 16px; border-radius: 50%;
  background: var(--hag-blue); box-shadow: 0 0 0 5px rgba(0, 85, 140, 0.18);
  transform: translate(-50%, -50%); animation: hag-flow 2.7s linear infinite;
}
.hc-wire i:nth-child(2) { animation-delay: 0.9s; }
.hc-wire i:nth-child(3) { animation-delay: 1.8s; }
@keyframes hag-flow { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.hc-pill { background: var(--hag-ink); color: #fff; border-radius: 999px; padding: 0.4em 1em; font-weight: 800; font-size: clamp(13px, 2vh, 22px); white-space: nowrap; }

/* ---------------------------------------------------------- proof points */

.hk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hk-i { display: grid; justify-items: start; align-content: start; gap: 10px; padding: 0 clamp(16px, 2.4vw, 46px); border-left: 3px solid var(--hag-line); }
.hk-i:first-child { border-left: 0; padding-left: 0; }
.hk-ic { width: clamp(44px, 6.4vh, 70px); aspect-ratio: 1; border-radius: 50%; background: var(--hag-tint); color: var(--hag-blue); display: grid; place-items: center; }
.hk-ic svg { width: 55%; height: 55%; }
.hk-v { font-size: clamp(46px, 9.4vh, 116px); font-weight: 900; line-height: 0.95; color: var(--hag-blue); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hk-l { font-size: clamp(16px, 2.5vh, 28px); font-weight: 600; max-width: 14em; line-height: 1.3; }

/* ------------------------------------------------- what is stopping you */

.h4t { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 30px); align-items: stretch; }
.h4t-i {
  background: #fff; border: 2px solid var(--hag-line); border-radius: 22px;
  padding: clamp(16px, 2.8vh, 32px); display: grid; gap: clamp(8px, 1.4vh, 14px); align-content: start;
  transition: border-color 400ms, box-shadow 400ms, transform 400ms var(--ease);
}
.h4t-i.lead { border-color: var(--hag-blue); box-shadow: 0 26px 64px rgba(0, 85, 140, 0.26); transform: translateY(-8px); }
.h4t-ic { width: clamp(46px, 6.6vh, 74px); aspect-ratio: 1; border-radius: 18px; background: var(--hag-blue); color: #fff; display: grid; place-items: center; }
.h4t-i:not(.lead) .h4t-ic { background: var(--hag-ink); }
.h4t-ic svg { width: 55%; height: 55%; }
.h4t-l { font-size: clamp(22px, 3.5vh, 40px); font-weight: 900; letter-spacing: -0.01em; }
.h4t-d { font-size: clamp(14px, 2.1vh, 22px); color: var(--muted); line-height: 1.35; min-height: 2.7em; }
.h4t-p { display: flex; align-items: baseline; gap: 2px; color: var(--hag-blue); }
.h4t-p b { font-size: clamp(54px, 10.4vh, 126px); font-weight: 900; line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.h4t-p span { font-size: clamp(22px, 3.7vh, 42px); font-weight: 800; }
.h4t-bar { height: clamp(8px, 1.3vh, 14px); border-radius: 999px; background: var(--hag-tint); overflow: hidden; }
.h4t-bar i { display: block; height: 100%; background: var(--hag-blue); border-radius: inherit; transition: width 900ms var(--ease); }

/* ------------------------------------------------- prompt writing wall */

.hg { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); gap: clamp(24px, 3.8vw, 72px); align-items: center; }
.hg-stats { display: grid; gap: clamp(14px, 2.8vh, 34px); }
.hg-stats div { display: grid; gap: 4px; }
.hg-stats b { font-size: clamp(50px, 9.4vh, 116px); font-weight: 900; color: var(--hag-blue); line-height: 0.95; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hg-stats span { font-size: clamp(14px, 2.2vh, 24px); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 700; }
.hg-five { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(10px, 1.8vh, 20px); }
.hg-five li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 2px; align-items: center;
  background: #fff; border: 2px solid var(--hag-line); border-radius: 18px; padding: clamp(10px, 1.8vh, 20px) clamp(14px, 1.6vw, 26px);
}
.hg-n { grid-row: span 2; width: clamp(40px, 5.8vh, 64px); aspect-ratio: 1; border-radius: 50%; background: var(--hag-blue); color: #fff; font-weight: 900; display: grid; place-items: center; font-size: clamp(18px, 2.9vh, 32px); }
.hg-five b { font-size: clamp(18px, 2.9vh, 33px); font-weight: 800; }
.hg-five li > span:last-child { font-size: clamp(14px, 2.2vh, 24px); color: var(--muted); }
.feedsc { color: var(--hag-blue); font-weight: 900; }

/* ------------------------------------------------------------ live demo */

.hv-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: clamp(28px, 4vw, 90px); align-items: center; }
.hv-left { display: grid; gap: clamp(14px, 2.6vh, 30px); justify-items: start; }
.hv-tag {
  display: inline-flex; align-items: center; gap: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.16em; font-size: clamp(14px, 2.1vh, 24px); background: rgba(255, 255, 255, 0.14);
  padding: 0.45em 1.1em; border-radius: 999px; color: #fff;
}
.hv-tag i { width: 0.7em; height: 0.7em; border-radius: 50%; background: #fff; animation: hag-blink 1.3s ease-in-out infinite; }
@keyframes hag-blink { 50% { opacity: 0.2; } }
.hv-t { margin: 0; font-size: clamp(56px, 12.5vh, 156px); font-weight: 900; letter-spacing: -0.035em; line-height: 0.95; color: #fff; }
.hv-sub { margin: 0; font-size: clamp(18px, 2.9vh, 34px); color: rgba(255, 255, 255, 0.9); }
.hv-btn {
  display: inline-flex; align-items: center; gap: 12px; background: #fff; color: var(--hag-blue);
  font-weight: 800; font-size: clamp(18px, 2.7vh, 32px); padding: 0.6em 1.2em; border-radius: 999px;
  text-decoration: none; box-shadow: 0 22px 54px rgba(0, 0, 0, 0.3);
}
.hv-btn svg { width: 1.1em; height: 1.1em; }

/* ------------------------------------------- bars and numbers that move */

.bar-fill, .xfill, .bf, .g-bar-fill, .progress > i { transition: width 900ms var(--ease); }
.cnt-well i { transition: height 900ms var(--ease); }
#stage.enter .bar-fill, #stage.enter .xfill, #stage.enter .g-bar-fill, #stage.enter .h4t-bar i {
  animation: hag-grow 1000ms var(--ease) both; transform-origin: left center;
}
@keyframes hag-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --------------------------------------------- entrances, once per step */

#stage.enter .slide:not(.section-slide):not(.hag-blue) .slide-head { animation: hag-title 700ms var(--ease) both; }
#stage.enter .slide.section-slide .sect-head { animation: hag-sweep 900ms var(--ease) both; }
#stage.enter .slide.section-slide .sect-done { animation: hag-rise 600ms var(--ease) 500ms both; }
#stage.enter .slide .slide-pts li,
#stage.enter .slide .va-trow,
#stage.enter .slide .g-step,
#stage.enter .slide .g-col,
#stage.enter .slide .act-row,
#stage.enter .slide .bar-row,
#stage.enter .slide .h4t-i,
#stage.enter .slide .xrow,
#stage.enter .slide .feedrow,
#stage.enter .slide .audstats > div,
#stage.enter .slide .hl-right,
#stage.enter .slide .hl-left > * { animation: hag-rise 620ms var(--ease) both; }
#stage.enter .slide :is(.slide-pts li, .va-trow, .g-step, .g-col, .act-row, .bar-row, .h4t-i, .xrow, .feedrow, .audstats > div, .hl-left > *):nth-child(2) { animation-delay: 90ms; }
#stage.enter .slide :is(.slide-pts li, .va-trow, .g-step, .g-col, .act-row, .bar-row, .h4t-i, .xrow, .feedrow, .audstats > div, .hl-left > *):nth-child(3) { animation-delay: 180ms; }
#stage.enter .slide :is(.slide-pts li, .va-trow, .g-step, .g-col, .act-row, .bar-row, .h4t-i, .xrow, .feedrow, .audstats > div, .hl-left > *):nth-child(4) { animation-delay: 270ms; }
#stage.enter .slide :is(.slide-pts li, .va-trow, .g-step, .g-col, .act-row, .bar-row, .h4t-i, .xrow, .feedrow, .audstats > div, .hl-left > *):nth-child(5) { animation-delay: 360ms; }
#stage.enter .slide :is(.slide-pts li, .va-trow, .g-step, .g-col, .act-row, .bar-row, .h4t-i, .xrow, .feedrow, .audstats > div, .hl-left > *):nth-child(6) { animation-delay: 450ms; }
#stage.enter .slide :is(.slide-pts li, .va-trow, .g-step, .g-col, .act-row, .bar-row, .h4t-i, .xrow, .feedrow, .audstats > div, .hl-left > *):nth-child(n+7) { animation-delay: 540ms; }
#stage.enter .slide .hl-right { animation-delay: 240ms; }
@keyframes hag-title { from { opacity: 0; transform: translateX(-44px) skewX(-8deg); } to { opacity: 1; transform: none; } }
@keyframes hag-sweep { from { opacity: 0; transform: translateX(14vw) skewX(-14deg); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes hag-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* The "Look at your device" takeover, in blue. */
.takeover {
  background: linear-gradient(135deg, #0064a3 0%, var(--hag-blue) 45%, var(--hag-deep) 85%, var(--hag-night) 100%) !important;
  color: #fff !important;
}
.takeover .tk-t { color: #fff !important; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -0.01em; }
.takeover .tk-s { color: rgba(255, 255, 255, 0.9) !important; }
.takeover .tk-disc { background: rgba(255, 255, 255, 0.14) !important; }
.takeover .tk-lap, .takeover .tk-ph { color: #fff !important; }
.takeover .tk-bar { background: rgba(255, 255, 255, 0.2) !important; }
.takeover .tk-bar i { background: #fff !important; }
.phonecue { background: var(--hag-blue) !important; color: #fff !important; border-color: var(--hag-blue) !important; }
.phonecue b { color: #fff !important; }

/* ------------------------------------------------------------------ phone */

.phone-wrap { display: grid; gap: var(--gap-block); align-content: start; }
.topbar.hag-top {
  background: linear-gradient(120deg, #0064a3, var(--hag-blue) 55%, var(--hag-deep));
  color: #fff; border-radius: 16px; padding: 12px 14px; justify-content: flex-start;
  box-shadow: 0 10px 26px rgba(0, 58, 97, 0.22);
}
.hag-logo { height: 34px; width: auto; display: block; flex: 0 0 auto; }
.hag-tt { flex: 1 1 auto; min-width: 0; display: grid; gap: var(--gap-label); padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, 0.3); }
.hag-top .t1 { font-size: 15px; font-weight: 800; color: #fff; }
.hag-top .t2 { font-size: 12px; color: rgba(255, 255, 255, 0.85); }
.hag-top .chip { background: rgba(255, 255, 255, 0.18); color: #fff; }
.hag-stripes { display: grid; gap: 4px; width: 58%; }
.hag-stripes i {
  display: block; height: 4px; border-radius: 0 999px 999px 0; background: var(--hag-blue);
  animation: hag-streak 700ms var(--ease) both;
}
.hag-stripes i:nth-child(1) { width: 62%; opacity: 0.35; }
.hag-stripes i:nth-child(2) { width: 81%; opacity: 0.6; animation-delay: 80ms; }
.hag-stripes i:nth-child(3) { width: 100%; animation-delay: 160ms; }
.phone-wrap .card { border-radius: 18px; border-color: var(--hag-line); box-shadow: 0 6px 18px rgba(0, 58, 97, 0.05); }
#view > .card { animation: hag-rise 420ms var(--ease) both; }
#view > .card:nth-child(2) { animation-delay: 70ms; }
#view > .card:nth-child(3) { animation-delay: 140ms; }
#view > .card:nth-child(n+4) { animation-delay: 200ms; }
.lede.small, .small { font-size: 12px; }
.hag-q { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; }
.hero { font-weight: 900; color: var(--hag-ink); }
.hero-sm { font-weight: 800; }

/* Join */
.hag-join-h { display: grid; gap: var(--gap-bind); }
.hag-join-h h2 { font-size: 24px; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -0.01em; color: var(--hag-blue); }
.phone-wrap select {
  -webkit-appearance: none; appearance: none; padding-right: 40px; font-size: 16px; min-height: 48px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300558c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") right 12px center / 20px no-repeat;
}
.phone-wrap input, .phone-wrap textarea { min-height: 48px; }
.phone-wrap button { min-height: 48px; }
.hag-in .hag-check, .hag-idle .hag-eye {
  width: 76px; height: 76px; border-radius: 50%; margin: 0 auto; display: grid; place-items: center;
  background: var(--hag-blue); color: #fff; box-shadow: 0 14px 30px rgba(0, 85, 140, 0.3);
}
.hag-idle .hag-eye { background: var(--hag-tint); color: var(--hag-blue); box-shadow: none; animation: hag-breathe 2.4s ease-in-out infinite; }
.hag-in .hag-check svg, .hag-idle .hag-eye svg { width: 40px; height: 40px; }
.hag-in.pop .hag-check { animation: hag-boom 700ms var(--ease) both; }
.hag-in .hero { font-size: 32px; }
@keyframes hag-boom { 0% { transform: scale(0.3); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes hag-breathe { 50% { transform: scale(1.08); } }

/* Glossary */
.hag-gloss { margin: 0; display: grid; gap: 12px; }
.hag-gloss > div { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.hag-gloss > div:last-child { border-bottom: 0; padding-bottom: 0; }
.hag-gloss dt { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; }
.hag-gloss dd { margin: 0 0 0 30px; font-size: 14px; color: var(--muted); line-height: 1.5; }
.hag-gi { width: 22px; height: 22px; border-radius: 6px; background: var(--hag-tint); color: var(--hag-blue); display: grid; place-items: center; flex: 0 0 auto; }
.hag-gi svg { width: 14px; height: 14px; }

/* What gets in the way */
.hag-tiles { display: grid; gap: var(--gap-bind); }
.hag-tile {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  text-align: left; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--hag-line);
  background: #fff; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.3; min-height: 64px;
  transition: border-color 200ms, background 200ms, transform 200ms;
}
.hag-tile:active { transform: scale(0.98); }
.hag-ti { width: 40px; height: 40px; border-radius: 12px; background: var(--hag-tint); color: var(--hag-blue); display: grid; place-items: center; }
.hag-ti svg { width: 22px; height: 22px; }
.hag-tk { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--hag-line); display: grid; place-items: center; color: transparent; }
.hag-tk svg { width: 16px; height: 16px; }
.hag-tile.on { border-color: var(--hag-blue); background: var(--hag-tint); }
.hag-tile.on .hag-ti { background: var(--hag-blue); color: #fff; }
.hag-tile.on .hag-tk { background: var(--hag-blue); border-color: var(--hag-blue); color: #fff; animation: hag-boom 450ms var(--ease) both; }

/* Live demo */
.hag-demo { background: linear-gradient(135deg, #0064a3, var(--hag-blue) 55%, var(--hag-deep)); color: #fff; border: 0 !important; }
.hag-demo .label, .hag-demo .lede { color: rgba(255, 255, 255, 0.88); }
.hag-demo-t { font-size: 28px; font-weight: 900; }
.hag-demo .btn.primary { background: #fff; color: var(--hag-blue); border-color: #fff; text-align: center; font-weight: 800; }

/* Prompt writing */
.hag-fivelist { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.hag-fivelist li { font-size: 14px; line-height: 1.4; }
.hag-fivelist b { display: block; font-weight: 800; }
.hag-fivelist span { color: var(--muted); }
.hag-grading { gap: 14px; }
.hag-gauge { width: 92px; height: 92px; margin: 0 auto; position: relative; }
.hag-gauge i {
  position: absolute; inset: 0; border-radius: 50%; border: 6px solid transparent; border-top-color: var(--hag-blue);
  animation: hag-spin 1.1s linear infinite;
}
.hag-gauge i:nth-child(2) { inset: 12px; border-top-color: var(--hag-ink); animation-duration: 1.5s; animation-direction: reverse; }
.hag-gauge i:nth-child(3) { inset: 24px; border-top-color: #7fb0d4; animation-duration: 0.9s; }
@keyframes hag-spin { to { transform: rotate(360deg); } }
.hag-scan { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.hag-scan span {
  font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 999px; background: var(--hag-tint); color: var(--hag-blue);
  animation: hag-scan 2.5s ease-in-out infinite; animation-delay: calc(var(--i) * 0.5s);
}
@keyframes hag-scan { 0%, 100% { background: var(--hag-tint); color: var(--hag-blue); } 20% { background: var(--hag-blue); color: #fff; } }
.hag-ring { position: relative; width: 150px; height: 150px; margin: 0 auto; }
.hag-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hag-ring circle { fill: none; stroke-width: 12; }
.hag-ring .trk { stroke: var(--hag-tint); }
.hag-ring .arc {
  stroke: var(--hag-blue); stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: calc(327 - 327 * var(--p) / 100);
}
.hag-ring.fresh .arc { animation: hag-arc 1.2s var(--ease) both; }
@keyframes hag-arc { from { stroke-dashoffset: 327; } }
.hag-ring-n { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.hag-ring-n b { font-size: 48px; font-weight: 900; line-height: 1; color: var(--hag-ink); }
.hag-ring-n span { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.hag-verdict { font-size: 16px; font-weight: 700; text-align: center; line-height: 1.4; }
.hag-fb { gap: 14px !important; }
.hag-fbrow { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.hag-fbrow p { margin: 0; font-size: 15px; line-height: 1.5; }
.hag-fbi { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--hag-tint); color: var(--hag-blue); }
.hag-fbrow.add .hag-fbi { background: var(--hag-blue); color: #fff; }
.hag-fbi svg { width: 20px; height: 20px; }
.hag-pieces { display: grid; gap: 10px; }
.hag-piece { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--canvas); animation: hag-rise 420ms var(--ease) both; animation-delay: calc(var(--i) * 70ms); }
.hag-ph { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hag-pl { font-weight: 800; font-size: 14px; }
.hag-pq { font-size: 13px; color: var(--hag-blue); font-style: italic; line-height: 1.4; overflow-wrap: anywhere; }
.hag-pa { font-size: 13px; color: var(--muted); line-height: 1.4; }
.hag-dots { display: inline-flex; gap: 5px; }
.hag-dots i { width: 22px; height: 8px; border-radius: 99px; background: var(--hag-line); }
.hag-dots i.on { background: var(--hag-blue); }
.hag-better { border-color: var(--hag-blue) !important; }
.hag-better .promptbox { background: var(--hag-tint); border-color: var(--accent-line); color: var(--hag-ink); }
.hag-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--gap-bind); }
.promptbox { font-family: var(--sans); font-size: 14px; line-height: 1.55; }

/* The data-quality list on the phone: five columns that fit 375px, words wrap
   between cells' lines, never inside a date. */
.sheet {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.15fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  font-family: var(--sans); font-size: 12px;
}
.sheet .hd { font-size: 10px; font-weight: 800; color: var(--muted); }
.sheet .cl { white-space: normal; overflow-wrap: anywhere; padding: 10px 4px; min-height: 48px; font-variant-numeric: tabular-nums; }
.sheet .cl.c3 { overflow-wrap: normal; white-space: nowrap; }
.sheet .cl.hit { background: var(--hag-blue); border-color: var(--hag-blue); color: #fff; font-weight: 700; animation: hag-boom 380ms var(--ease) both; }
.sheet .cl.miss { background: var(--hag-ink); border-color: var(--hag-ink); color: #fff; }

/* Room bars and answer marks, in brand colors. */
.a-mark { background: var(--hag-blue); }
.feedback.good { color: var(--hag-blue); font-weight: 600; }
.feedback.bad { color: var(--hag-ink); }

@media (max-width: 1180px) {
  .h4t { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hl-grid, .hv-grid, .hs, .hg, .hd2, .hc { grid-template-columns: minmax(0, 1fr); }
  .hk { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .hk-i { border-left: 0; padding-left: 0; }
  .hf-flag { display: none; }
}
@media (max-width: 767px) {
  .h4t, .hn-logos { grid-template-columns: minmax(0, 1fr); }
  .hag-speed { display: none; }
  .hd-tbl { font-size: 13px; }
  .hd-td { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .hag-speed i, .hag-speed i::after, .hf-flag, .hl-name, .hs-img, .hs-cap::before,
  .hc-wire i, .hv-tag i, .hag-stripes i, #view > .card, .hag-in.pop .hag-check, .hag-idle .hag-eye,
  .hag-gauge i, .hag-scan span, .hag-ring.fresh .arc, .hag-piece, .sheet .cl.hit,
  #stage.enter .slide *, #stage.enter .bar-fill, #stage.enter .xfill, #stage.enter .g-bar-fill {
    animation: none !important;
  }
  .hs-img { opacity: 0; }
  .hs-img:first-child { opacity: 1; }
}
/* ---- end Hendrick Autoguard ---- */

/* ---- Hendrick: the leadership view in the control room ---- */
.hag-lead { display: grid; gap: var(--gap-block); }
.hag-tblwrap { display: grid; gap: var(--gap-bind); overflow-x: auto; }
.hag-lt { min-width: 520px; }
.hag-notes { display: grid; gap: var(--gap-bind); }
.hag-note { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--canvas); font-size: 14px; line-height: 1.45; }
.hag-note .hn-who { font-size: 12px; font-weight: 700; color: var(--hag-blue); }

/* ---- Hendrick: fixes from the October 15th, 2026 sweep ---- */
.slide.hag-hero > .slide-body > .slide-head { display: none; }
.hag-speed { bottom: 2.5%; height: 12%; width: 52%; }
.slide.section-slide > .slide-body { padding-bottom: 12vh; }
body.screenmode .slide-main.figonly .va-terms { gap: clamp(14px, 2.8vh, 32px); }
body.screenmode .slide-main.figonly .va-trow { padding: clamp(18px, 4.8vh, 56px) clamp(20px, 2vw, 40px); }
.promptwall { font-family: var(--sans); }
/* Prompt anatomy, in the five pieces' own colors: blue, black and their shades. */
.fg-k-goal { --k: #00558c; --ks: #e1ecf5; --kt: #ffffff; }
.fg-k-context { --k: #0b0f14; --ks: #ececec; --kt: #ffffff; }
.fg-k-details { --k: #2a77b0; --ks: #e3eef7; --kt: #ffffff; }
.fg-k-format { --k: #003a61; --ks: #dde8f1; --kt: #ffffff; }
.fg-k-check { --k: #4f5b67; --ks: #eef0f2; --kt: #ffffff; }
/* The data hunt, live: five tiles. */
.h5k { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 26px); }
.h5k-i {
  background: #fff; border: 2px solid var(--hag-line); border-radius: 20px; padding: clamp(14px, 2.4vh, 28px);
  display: grid; gap: clamp(8px, 1.4vh, 14px); align-content: start;
}
.h5k-l { font-size: clamp(18px, 2.8vh, 32px); font-weight: 800; line-height: 1.2; min-height: 2.4em; }
.h5k-s { font-size: clamp(14px, 2vh, 22px) !important; font-weight: 700 !important; color: var(--muted); margin-left: 6px; }
.h5k-foot { display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 60px); font-size: clamp(18px, 2.6vh, 30px); color: var(--muted); font-weight: 600; }
.h5k-foot b { color: var(--hag-blue); font-weight: 900; font-size: 1.3em; }
@media (max-width: 1180px) { .h5k { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Short projectors (720 lines): the repeat-work rows and the prompt anatomy
   tighten so nothing runs off the bottom. */
@media (max-height: 800px) {
  body.screenmode .xrows { gap: 6px; }
  body.screenmode .xrow { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; }
  body.screenmode .xico { width: 38px; }
  body.screenmode .xhead { font-size: 18px; }
  body.screenmode .xtrack { height: 9px; }
  body.screenmode .xmain { gap: 4px; }
  body.screenmode .fg-legend { display: none; }
}
/* The phone's contract list: fixed widths for the number and the date so
   neither ever wraps mid-number; the three word columns share the rest and
   break only between words. */
.sheet {
  grid-template-columns: 44px minmax(0, 0.95fr) 74px minmax(0, 1fr) minmax(0, 1.1fr);
  font-size: 11px; gap: 3px;
}
.sheet .hd { font-size: 9px; letter-spacing: 0; padding: 4px 2px 6px; overflow-wrap: break-word; }
.sheet .cl { padding: 8px 3px; overflow-wrap: break-word; word-break: normal; }
.sheet .cl.c1, .sheet .cl.c3 { white-space: nowrap; overflow-wrap: normal; }
/* Every screen on the projector fills it, top to bottom: a teach slide at 72vh
   left a gray band under it (October 15th, 2026 sweep). */
body.audience #stage > .slide { min-height: 100vh; }
/* ---- Hendrick: spacing on the named steps (gap audit, October 15th, 2026) ----
   The projector scales its steps with the screen height. They now live on
   :root while the page is the wall, so every gap below is a named step and the
   audit reads the same scale the slides use. */
:root:has(body.screenmode) {
  --gap-page: clamp(18px, 3.4vh, 34px); --gap-block: clamp(10px, 2.2vh, 24px);
  --gap-bind: clamp(6px, 1.2vh, 12px); --gap-label: 4px;
}
body.screenmode .slide.aud { --gap-page: clamp(18px, 3.4vh, 34px); }
@media (max-height: 840px) {
  :root:has(body.screenmode) { --gap-page: clamp(12px, 2.4vh, 22px); --gap-block: clamp(8px, 1.6vh, 16px); }
  body.screenmode .slide.aud { --gap-page: clamp(12px, 2.4vh, 22px); }
}
.hag-speed { display: block; }
.hag-speed i { position: absolute; left: 0; top: calc(var(--s) * 22%); }
.hl-left, .hv-left { gap: var(--gap-block); }
.hl-qr { gap: var(--gap-bind); }
.hl-count { gap: var(--gap-label); }
.hl-right { gap: var(--gap-block); }
.hw { gap: var(--gap-page); }
body.screenmode .slide-main.figonly .va-terms { gap: var(--gap-block); }
.hd-p { gap: var(--gap-block); }
.h4t-i, .h5k-i { gap: var(--gap-bind); }
.hc-card, .hc-link, .hk-i { gap: var(--gap-bind); }
.hg-stats { gap: var(--gap-page); }
.hg-stats div { gap: var(--gap-label); }
.hg-five { gap: var(--gap-block); }
.hg-five li { row-gap: var(--gap-label); }
/* Phone */
.hag-gloss { gap: var(--gap-block); }
.hag-gloss > div { gap: var(--gap-label); padding-bottom: 0; border-bottom: 0; }
.hag-gloss dd { margin: 0; padding-left: 30px; }
.hag-fb { gap: var(--gap-block) !important; }
.hag-pieces { gap: var(--gap-bind); }
.hag-piece { gap: var(--gap-label); }
/* The contract list reads as a spreadsheet: filled cells on white gridlines,
   no four-sided borders, so two cells 3px apart are not two boxes. */
.sheet .cl { border: 0; background: var(--canvas); }
.sheet .cl.hit { background: var(--hag-blue); }
.sheet .cl.miss { background: var(--hag-ink); }
/* The spacing steps are lengths, so the browser resolves a clamp() on the
   wall to the pixels it actually uses, and the gap audit reads that number. */
@property --gap-page { syntax: '<length>'; inherits: true; initial-value: 18px; }
@property --gap-block { syntax: '<length>'; inherits: true; initial-value: 12px; }
@property --gap-bind { syntax: '<length>'; inherits: true; initial-value: 8px; }
@property --gap-label { syntax: '<length>'; inherits: true; initial-value: 4px; }
/* The five streaks are one element now (five bars in one background), so the
   decoration has no gaps of its own; it sweeps in once, then a light runs
   along it. */
.hag-speed {
  position: absolute; left: 0; bottom: 3%; width: 52%; height: 11%; pointer-events: none; z-index: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.3)) 0 0% / 46% 9% no-repeat,
    linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.3)) 0 25% / 59% 9% no-repeat,
    linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.3)) 0 50% / 72% 9% no-repeat,
    linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.3)) 0 75% / 85% 9% no-repeat,
    linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.3)) 0 100% / 98% 9% no-repeat;
  animation: hag-streak 1000ms var(--ease) 120ms both; overflow: hidden;
}
.hag-speed::after {
  content: ""; position: absolute; inset: 0; width: 26%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.35), rgba(255,255,255,0));
  -webkit-mask: inherit; transform: translateX(-120%);
  animation: hag-shine 6s ease-in-out 1.4s infinite;
}
.audstats > div { display: grid; gap: var(--gap-label); }
.audstats span { margin-top: 0; }
.hs-caps { gap: var(--gap-block); }
.hc-card ul { gap: var(--gap-bind); }
.cnt-list tfoot td { border-top: 2px solid var(--line); padding-top: 10px; }
@media (prefers-reduced-motion: reduce) { .hag-speed, .hag-speed::after { animation: none !important; } }
/* The light runs along the five streaks only: the streaks are a mask, and the
   light is a band in the background that slides under it. */
.hag-speed {
  --bars: linear-gradient(#000 0 0) 0 0% / 46% 9% no-repeat, linear-gradient(#000 0 0) 0 25% / 59% 9% no-repeat,
          linear-gradient(#000 0 0) 0 50% / 72% 9% no-repeat, linear-gradient(#000 0 0) 0 75% / 85% 9% no-repeat,
          linear-gradient(#000 0 0) 0 100% / 98% 9% no-repeat;
  -webkit-mask: var(--bars); mask: var(--bars);
  background:
    linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 70%) -150% 0 / 50% 100% no-repeat,
    linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.34));
  animation: hag-streak 1000ms var(--ease) 120ms both, hag-glow 6s ease-in-out 1.4s infinite;
}
.hag-speed::after { display: none; }
@keyframes hag-glow { 0% { background-position: -150% 0, 0 0; } 45%, 100% { background-position: 250% 0, 0 0; } }
/* The older feature diagrams (the hallucination picture, prompt anatomy) keep
   their own copy of the steps; on the wall they take the wall's. */
body.screenmode .fg-root {
  --fg-g-page: var(--gap-page); --fg-g-block: var(--gap-block);
  --fg-g-bind: var(--gap-bind); --fg-g-label: var(--gap-label);
}

/* ---- October 15th, 2026, second round ---- */

/* The contract list, marked up at the data-quality reveal: the sheet on the
   left, the five problems on the right, hardest to spot first. Problem cells
   are blue; the hardest one, when under half the room caught it, is black. */
.mwall { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--gap-surface-page); align-items: start; }
.msheet { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, auto)); gap: var(--gap-surface-bind); }
.ms-th {
  font-size: clamp(11px, 1.6vh, 20px); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); padding: 0 clamp(6px, 0.9vh, 12px);
}
.ms-td {
  position: relative; display: flex; align-items: center; min-height: clamp(30px, 5.4vh, 64px);
  padding: clamp(4px, 0.8vh, 10px) clamp(6px, 0.9vh, 12px); font-size: clamp(13px, 2.3vh, 28px); font-weight: 600;
  line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
  border: 2px solid transparent; border-radius: 10px; border-bottom-color: var(--line-soft);
}
.ms-td.bad { background: var(--accent-soft); border-color: var(--accent); color: var(--hag-deep); font-weight: 800; }
.ms-td.hard { background: var(--miss-soft); border-color: var(--miss); color: var(--miss); }
.ms-blank { font-style: italic; font-weight: 600; color: var(--faint); }
.ms-n {
  flex: 0 0 auto; display: inline-grid; place-items: center; width: clamp(20px, 3.2vh, 38px); aspect-ratio: 1;
  border-radius: 50%; background: var(--accent); color: #fff; font-size: clamp(11px, 1.8vh, 22px); font-weight: 900;
  font-style: normal;
}
.ms-td .ms-n { position: absolute; top: calc(-1 * clamp(8px, 1.3vh, 16px)); right: calc(-1 * clamp(6px, 1vh, 12px)); }
.ms-td.hard .ms-n, .mlist li.hard .ms-n { background: var(--miss); }
.mlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap-surface-block); }
.mlist li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--gap-surface-bind); align-items: start; }
.ml-main { display: grid; gap: var(--gap-surface-bind); min-width: 0; }
.ml-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: clamp(13px, 2.1vh, 26px); line-height: 1.25; }
.ml-head b { font-weight: 800; overflow-wrap: anywhere; }
.ml-head span { flex: 0 0 auto; color: var(--muted); font-weight: 600; white-space: nowrap; }
.ml-head span b { color: var(--hag-ink); }
.ml-bar { height: clamp(6px, 1vh, 12px); border-radius: 99px; background: var(--line-soft); overflow: hidden; }
.ml-bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.mlist li.hard .ml-bar i { background: var(--miss); }
/* The console's copy sits in a card, at card sizes. */
.mwall.sm .ms-th { font-size: 11px; padding: 0 6px 4px; }
.mwall.sm .ms-td { min-height: 30px; padding: 4px 6px; font-size: 13px; }
.mwall.sm .ms-n { width: 20px; font-size: 11px; }
.mwall.sm .ms-td .ms-n { top: -8px; right: -6px; }
.mwall.sm .ml-head { font-size: 13px; }
.mwall.sm .ml-bar { height: 6px; }
@media (max-width: 900px) { .mwall { grid-template-columns: minmax(0, 1fr); } }

/* Prompt grade on the phone: a big Rewrite it under the score, the pieces as
   a tick or a cross, and the pieces to add above the box when rewriting. */
.hag-rw { display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-bind); min-height: 52px; font-size: 17px; }
.hag-rw .ico, .hag-rw svg { width: 20px; height: 20px; }
.hag-ph { justify-content: flex-start; }
.hag-mark {
  flex: 0 0 auto; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--miss-soft); color: var(--muted);
}
.hag-mark svg { width: 15px; height: 15px; }
.hag-mark.on { background: var(--hag-blue); color: #fff; }
.hag-piece.off .hag-pl { color: var(--muted); }
.hag-retry { display: grid; gap: var(--gap-block); border: 2px solid var(--accent); background: var(--accent-soft); }
.hag-retry-h { margin: 0; font-size: 16px; font-weight: 800; }
.hag-misslist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap-bind); }
.hag-misslist li { display: grid; gap: var(--gap-label); padding: 10px 12px; border-radius: 12px; background: #fff; font-size: 14px; line-height: 1.4; }
.hag-misslist b { font-weight: 800; }
.hag-misslist span { color: var(--muted); }

/* The lobby's name list, when more have joined than fit: the bottom row fades
   out rather than being cut in half. */
.hl-names.over {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - clamp(44px, 7.5vh, 84px)), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - clamp(44px, 7.5vh, 84px)), transparent);
}