/* Pichincha Móvil — a Quito taxi cooperative run over WhatsApp.
 *
 * Three columns: the passenger's phone, the city, the driver's phone. Both
 * phones move from one clock, which is the whole reason to show them together —
 * a message on one visibly moves the other.
 *
 * The WhatsApp look is evoked, not copied: bubble geometry, tick marks and the
 * pale chat field, with none of Meta's marks or wordmarks.
 */

:root {
  --ink: #101b14;
  --muted: #4a5a51;
  --line: #dfe6e0;
  --bg: #eef2ee;
  --card: #ffffff;
  --rail: #0f2419;
  --accent: #0b6640;
  --accent-soft: #e4f3ec;
  --out: #dcf8c6;
  --chat: #ece5dd;
  --good: #147a52;
  --warn: #a35b06;
  --warn-soft: #fdf2e0;
  --risk: #b5301c;
  --risk-soft: #fdecea;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

/* The UA rule for [hidden] is display:none at zero specificity, so any element
   given display:grid or display:flex by a class ignores it. .stage and the
   transport bar are both laid out that way, and hiding them for the fleet view
   silently did nothing until this. */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { letter-spacing: -0.015em; line-height: 1.2; }

/* ------------------------------------------------------------- topbar */

.topbar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 13px clamp(14px, 3vw, 28px);
  background: var(--rail); color: #fff;
}
.brand { display: flex; align-items: center; gap: 11px; }
.mark {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 11px; background: #085230; color: #fff;
  font: 700 13px/1 var(--font);
}
.brand h1 { display: block; margin: 0; font-size: 15px; font-weight: 700; }
/* Scoped to the text block on purpose. As a bare `.brand span` this rule also
   matched .mark -- at (0,1,1) it outranked (0,1,0) -- and quietly turned the
   logo tile from a centred white monogram into pale green text jammed into its
   top-left corner. */
.brand > div span { display: block; color: #b6cfc2; font-size: 11.5px; }

.scenarios { display: flex; gap: 3px; padding: 3px; border-radius: 10px; background: rgba(255,255,255,.09); }
.scenarios button {
  appearance: none; border: 0; border-radius: 8px; min-height: 34px; padding: 0 13px;
  background: transparent; color: #d7e6de; font: 600 12.5px/1 var(--font); cursor: pointer;
}
.scenarios button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.scenarios button:focus-visible, .transport button:focus-visible { outline: 3px solid #7fd7b0; outline-offset: 2px; }

/* The shared language toggle is fixed to the top-right, so the tag needs to
   stop short of it rather than sliding underneath. */
.tag {
  margin: 0 96px 0 auto; padding: 5px 11px; border-radius: 20px;
  border: 1px dashed rgba(255,255,255,.42); color: #cfe0d8; font-size: 11.5px;
}

/* ---------------------------------------------------------- transport */

.transport {
  display: flex; align-items: center; gap: 12px;
  padding: 9px clamp(14px, 3vw, 28px);
  background: #16311f; color: #dceae3;
}
.transport button {
  appearance: none; min-height: 32px; padding: 0 12px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 8px;
  background: rgba(255,255,255,.08); color: #e6f0ea;
  font: 600 12px/1 var(--font); cursor: pointer;
}
.transport button:hover { background: rgba(255,255,255,.16); }
#playBtn { min-width: 42px; font-size: 13px; }
.bar-track { flex: 1; height: 4px; border-radius: 3px; background: rgba(255,255,255,.16); overflow: hidden; }
.bar { height: 100%; width: 0; background: var(--accent); transition: width .12s linear; }
.speeds { display: flex; gap: 3px; }
.speeds button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

/* -------------------------------------------------------------- stage */

.stage {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
  padding: clamp(14px, 2vw, 22px) clamp(14px, 3vw, 28px);
  align-items: start;
}
.col-h {
  margin: 0 0 8px; color: var(--muted);
  font: 650 9.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}

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

.phone {
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: var(--card); box-shadow: 0 10px 28px rgba(16, 40, 28, .08);
}
.wa-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; background: var(--rail); color: #fff;
}
.wa-av {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  background: #085230; font: 700 11px/1 var(--font);
}
.wa-head strong { display: block; font-size: 13px; }
.wa-head small { display: block; color: #b6cfc2; font-size: 10.5px; }

.wa-log {
  height: 460px; overflow-y: auto; padding: 12px;
  background: var(--chat);
  background-image:
    radial-gradient(rgba(0,0,0,.03) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,.03) 1px, transparent 1px);
  background-size: 22px 22px, 22px 22px;
  background-position: 0 0, 11px 11px;
}

.msg {
  max-width: 88%; margin-bottom: 9px; padding: 7px 9px 5px;
  border-radius: 9px; background: var(--card);
  box-shadow: 0 1px 1px rgba(0,0,0,.09);
  font-size: 12.8px; line-height: 1.45;
}
.msg.out { margin-left: auto; background: var(--out); }
.msg-text { white-space: normal; }
.msg-meta {
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  margin-top: 3px; color: #5f6f66; font-size: 9.5px;
}
.tick { color: #12607f; font-size: 10px; }

.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.chip {
  padding: 5px 10px; border: 1px solid #cfe0d5; border-radius: 14px;
  background: #f5faf7; color: var(--accent); font: 600 11px/1.3 var(--font);
}

/* --------------------------------------------------------- cards */

[class^="card-"] { margin-top: 6px; }
.card-btn {
  padding: 8px; border-top: 1px solid #d6e4dc; margin-top: 6px;
  text-align: center; color: var(--accent); font: 650 12px/1.3 var(--font);
}
.card-note { text-align: center; color: #5f6f66; font-size: 9.5px; margin-top: 2px; }

.mini-map {
  height: 62px; border-radius: 7px; display: grid; place-items: center;
  background: linear-gradient(135deg, #dfe9e2, #cfded4);
  border: 1px solid #c9d9d0; margin-bottom: 5px;
}
.mini-pin { font-size: 20px; }
.card-loc strong { display: block; font-size: 12.2px; }
.card-loc small { display: block; color: var(--muted); font-size: 10.5px; }

.card-list strong { display: block; margin-bottom: 5px; font-size: 12.2px; }
.card-list ul { margin: 0; padding: 0; list-style: none; }
.card-list li {
  padding: 7px 0; border-top: 1px solid #e6eee9; color: var(--ink); font-size: 12px;
}

.fare-total { font: 800 26px/1 var(--font); letter-spacing: -0.02em; }
.fare-break { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; color: var(--muted); font: 500 10.5px/1.4 var(--mono); }
.fare-src { display: block; margin-top: 6px; color: #5f6f66; font-size: 9.5px; }

.drv-top { display: flex; align-items: center; gap: 9px; }
.drv-av {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  background: var(--rail); color: #fff; font: 700 11px/1 var(--font);
}
.drv-top strong { display: block; font-size: 12.6px; }
.drv-top small { display: block; color: var(--muted); font-size: 10.5px; }
.drv-meta { display: flex; gap: 12px; margin-top: 6px; color: var(--muted); font-size: 11px; }

.pay-head { font: 700 15px/1.2 var(--font); }
.pay-btn { background: var(--accent-soft); border-radius: 7px; border-top: 0; margin-top: 7px; }
.pay-gw {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  margin-top: 5px; color: #5f6f66; font: 500 9.5px/1.3 var(--mono);
}
.pay-off {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 6px; padding: 5px; border-radius: 6px;
  background: #eceeed; color: #6b7a72;
  font: 600 10.5px/1.3 var(--font); text-decoration: line-through;
}
.pay-off small { text-decoration: none; font-size: 9px; }

.stars { display: flex; gap: 4px; font-size: 20px; color: #d8b73a; }

/* ---------------------------------------------------------------- map */

.mid-col { display: flex; flex-direction: column; gap: 14px; }
.map-wrap { position: relative; }
.map {
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: #f4f7f4; height: 380px;
}
.map-svg { width: 100%; height: 100%; display: block; }
.map-hill { fill: #e3ebe2; }
.road-case { fill: none; stroke: #d3ddd5; stroke-linecap: round; stroke-linejoin: round; }
.road-fill { fill: none; stroke: #ffffff; stroke-linecap: round; stroke-linejoin: round; }
.place-dot { fill: #98a8a0; }
.place-lbl { fill: #4a5a51; font: 500 8.5px var(--font); }
.route { fill: none; stroke: var(--accent); stroke-width: 3.4; stroke-linecap: round; opacity: .85; }
.pin { fill: var(--risk); stroke: #fff; stroke-width: 2; }
.car-halo { fill: rgba(18, 140, 90, .22); }
.car-dot { fill: var(--accent); stroke: #fff; stroke-width: 2; }
.map-note {
  position: absolute; left: 10px; bottom: 10px;
  padding: 4px 9px; border-radius: 6px;
  background: rgba(255,255,255,.92); border: 1px solid var(--line);
  color: var(--muted); font: 500 10px/1.3 var(--font);
}

/* ------------------------------------------------------------- ledger */

.ledger {
  height: 132px; overflow-y: auto; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 11px; background: #0f2419;
}
.led-row { display: flex; gap: 9px; padding: 3px 0; font: 500 10.5px/1.5 var(--mono); color: #cfe0d8; }
.led-ms { flex: none; width: 74px; color: #9ab5a7; text-align: right; }
.led-row.win .led-txt { color: #64e3a6; font-weight: 700; }
.led-row.lose .led-txt { color: #ff9d8a; }

.bcast {
  margin-top: 8px; padding: 7px 11px; border-radius: 9px;
  border: 1px dashed var(--line); background: var(--card);
  color: var(--muted); font-size: 11.5px; opacity: .45;
}
.bcast.on { opacity: 1; border-style: solid; border-color: var(--accent); color: var(--accent); }
.bcast.taken { border-color: var(--line); color: var(--muted); text-decoration: line-through; opacity: .6; }

/* ---------------------------------------------------------- op strip */

.op-strip {
  margin: 0 clamp(14px, 3vw, 28px) clamp(14px, 2vw, 20px);
  padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--card);
}
.op-strip h2 {
  margin: 0 0 11px; color: var(--muted);
  font: 650 9.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
.op-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)); gap: 12px; }
.op-cell { text-align: center; padding: 10px; border-radius: 10px; background: #f5f8f6; }
.op-cell strong { display: block; font: 800 24px/1 var(--font); letter-spacing: -0.02em; }
.op-cell small { display: block; margin-top: 4px; color: var(--muted); font-size: 10.5px; }
.op-cell strong.bump { animation: bump .5s ease; }
@keyframes bump {
  0% { transform: scale(1); color: var(--ink); }
  35% { transform: scale(1.22); color: var(--accent); }
  100% { transform: scale(1); color: var(--ink); }
}

/* -------------------------------------------------------------- panels */

.panels {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  padding: 0 clamp(14px, 3vw, 28px) clamp(30px, 5vw, 60px);
}
.panel { padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.panel h2 { margin: 0 0 4px; font-size: 15px; }
.panel-sub { margin: 0 0 12px; color: var(--muted); font-size: 12px; line-height: 1.5; }

.trace { max-height: 300px; overflow-y: auto; }
.tr-row { display: flex; gap: 9px; padding: 9px 0; border-top: 1px solid var(--line); }
.tr-row:first-child { border-top: 0; }
.tr-tag {
  flex: none; padding: 2px 7px; border-radius: 5px; height: fit-content;
  font: 700 8.5px/1.5 var(--mono); letter-spacing: .05em; text-transform: uppercase;
}
.t-rule  .tr-tag { background: #eef1f5; color: #56646d; }
.t-limit .tr-tag { background: var(--risk-soft); color: #8f2416; border: 1px solid #eab4ab; }
.t-ai    .tr-tag { background: #ede9fd; color: #4a34c4; }
.t-money .tr-tag { background: var(--accent-soft); color: #0d6b45; }
.tr-txt { font-size: 12px; line-height: 1.5; color: var(--ink); }
.t-limit .tr-txt { color: #7a2517; }

.lim { display: flex; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); }
.lim:first-child { border-top: 0; }
.lim-mark {
  flex: none; display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: 6px; font: 700 11px/1 var(--mono);
}
.lim.ok .lim-mark { background: var(--accent-soft); color: #0d6b45; }
.lim.no .lim-mark { background: var(--risk-soft); color: #8f2416; }
.lim-b strong { display: block; font-size: 12.5px; }
.lim.no .lim-b strong { color: #8f2416; }
.lim-dice { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.lim-hace { display: block; margin-top: 3px; color: var(--accent); font-size: 11px; line-height: 1.45; font-weight: 500; }

/* ------------------------------------------------------------- narrow */

@media (max-width: 1100px) {
  .stage { grid-template-columns: 1fr 1fr; }
  .mid-col { grid-column: 1 / -1; order: -1; }
  .wa-log { height: 380px; }
}
@media (max-width: 720px) {
  .stage { grid-template-columns: 1fr; }
  .tag { margin-left: 0; }
  .wa-log { height: 320px; }
  .map { height: 300px; }
}

/* ------------------------------------------------ driver cards + fleet */

.modes { display: flex; gap: 3px; padding: 3px; border-radius: 10px; background: rgba(255,255,255,.09); }
.modes button {
  appearance: none; border: 0; border-radius: 8px; min-height: 34px; padding: 0 13px;
  background: transparent; color: #d7e6de; font: 600 12.5px/1 var(--font); cursor: pointer;
}
.modes button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.modes button:focus-visible { outline: 3px solid #7fd7b0; outline-offset: 2px; }

.optin { display: flex; align-items: flex-start; gap: 8px; font-size: 11.8px; line-height: 1.4; }
.optin-box {
  flex: none; display: grid; place-items: center; width: 17px; height: 17px;
  border-radius: 4px; background: var(--accent); color: #fff; font: 700 10px/1 var(--mono);
}

.earn-head {
  color: var(--muted); font: 650 9px/1.2 var(--mono);
  letter-spacing: .08em; text-transform: uppercase;
}
.earn-net { font: 800 30px/1 var(--font); letter-spacing: -0.02em; color: var(--accent); }
.earn-net-lbl { margin-top: 1px; color: var(--muted); font-size: 10.5px; }
.earn-rows { margin-top: 8px; border-top: 1px solid #e6eee9; }
.earn-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 5px 0; font-size: 11.5px; color: var(--muted);
}
.earn-v { color: var(--ink); font: 600 11.5px/1.3 var(--mono); }

/* -------------------------------------------------------- fleet view */

.fleet { padding: clamp(14px, 2vw, 22px) clamp(14px, 3vw, 28px) 0; }
.fleet-grid {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: clamp(12px, 1.6vw, 20px); align-items: start;
}
.fleet-table-wrap { overflow-x: auto; }
.fleet-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.fleet-table th {
  padding: 8px 9px; text-align: left; background: #f2f5f3; color: var(--muted);
  font: 650 9px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
.fleet-table td { padding: 9px; border-top: 1px solid var(--line); font-size: 12.2px; vertical-align: middle; }
.fleet-table td strong { display: block; font-size: 12.2px; }
.fleet-table td small { display: block; color: var(--muted); font-size: 10.5px; }
.fl-plate { font: 600 11.5px/1.3 var(--mono); color: var(--muted); }
.fl-num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.fl-net { font-weight: 700; color: var(--accent); }
.fl-chip {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  font: 650 10px/1.5 var(--font);
}
.fl-chip.on  { background: var(--accent-soft); color: #0a5836; }
.fl-chip.off { background: #eef1ef; color: var(--muted); }

.doc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px; margin-bottom: 6px; border-radius: 9px;
  border: 1px solid var(--line); background: #f7faf8;
}
.doc-b strong { display: block; font-size: 12.2px; }
.doc-b small { display: block; color: var(--muted); font-size: 10.5px; }
.doc-days { flex: none; font: 700 11.5px/1.3 var(--mono); }
.doc-row.ok   .doc-days { color: var(--muted); }
.doc-row.warn { background: var(--warn-soft); border-color: #f0d9ae; }
.doc-row.warn .doc-days { color: #7a4405; }
.doc-row.bad  { background: var(--risk-soft); border-color: #eab4ab; }
.doc-row.bad  .doc-days { color: #8f2416; }

@media (max-width: 900px) { .fleet-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------- narrator + explainer
 *
 * The people this demo is for run taxi cooperatives, not software. The trace
 * panel explains the mechanism to someone technical; this strip explains the
 * story to everyone else, and it sits above the phones because that is where
 * the eye lands first.
 */

/* The narrator is the one thing on this page a non-technical viewer must not
   miss, so it is built to be looked at: its own card, an accent rule down the
   left, and a flash of the accent each time the line changes. A left border on
   bare page background was too quiet to compete with two phones filling up. */
.say-wrap {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(12px, 2vw, 24px);
  margin: 0 clamp(14px, 3vw, 28px) 4px; padding: 12px 16px 12px 14px;
  border: 1.5px solid var(--accent); border-left-width: 6px;
  border-radius: 13px; background: var(--accent-soft);
  box-shadow: 0 2px 10px rgba(11, 102, 64, .09);
  box-sizing: border-box;
}
.say {
  flex: 1; margin: 0;
  display: flex; align-items: flex-start; gap: 12px;
  font-size: clamp(15px, 1.5vw, 18px); line-height: 1.45; font-weight: 550;
  color: var(--ink); min-height: 2.9em;
}

/* A live marker, so the card reads as something that is happening rather than
   a static caption. Purely decorative: the text carries the meaning. */
.say::before {
  content: ""; flex: none;
  /* Sits on the first line rather than centred against the whole block, which
     drifts to the middle of a paragraph once the text wraps to three lines. */
  align-self: flex-start; margin-top: .52em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  animation: sayPulse 1.9s ease-in-out infinite;
}
@keyframes sayPulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .35; transform: scale(.78); }
}

/* Before the demo starts there is nothing to announce, so the card recedes
   rather than sitting there shouting an empty box. */
.say:empty::before { display: none; }

.say.in { animation: sayIn .45s ease; }
@keyframes sayIn {
  from { opacity: 0; transform: translateY(6px); box-shadow: 0 0 0 5px rgba(11, 102, 64, .16); }
  to   { opacity: 1; transform: none;            box-shadow: 0 2px 10px rgba(11, 102, 64, .09); }
}

@media (prefers-reduced-motion: reduce) {
  .say::before { animation: none; }
  .say.in { animation: none; }
  .say-go { animation: none; }
  .outro { animation: none; }
}

/* ------------------------------------------------------------ closing card
 *
 * When a scenario runs out, this appears inside the narrator card: one line on
 * what was just shown, one way to talk to Obranext. It shares the narrator's
 * accent language rather than bringing a style of its own.
 */

.outro {
  width: 100%;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  padding-top: 11px; border-top: 1px solid rgba(11, 102, 64, .25);
  animation: sayIn .45s ease;
}
.outro-line {
  flex: 1 1 280px; margin: 0;
  font-size: 13.5px; line-height: 1.5; font-weight: 550; color: var(--ink);
}
.outro-actions { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.outro-cta {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 17px; border-radius: 10px;
  background: var(--accent); color: #fff;
  font: 650 13.5px/1 var(--font); text-decoration: none; white-space: nowrap;
}
.outro-cta:hover { background: #084d2f; }
.outro-cta:focus-visible { outline: 3px solid #7fd7b0; outline-offset: 2px; }
.outro-mail {
  color: var(--accent); font: 600 12.5px/1.3 var(--font);
  text-decoration: underline; text-underline-offset: 2px; white-space: nowrap;
}
.outro-mail:focus-visible { outline: 3px solid #7fd7b0; outline-offset: 2px; border-radius: 4px; }

@media (max-width: 720px) {
  .outro-actions { width: 100%; justify-content: space-between; }
}

.intro-back {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: 20px;
  background: rgba(10, 26, 18, .62);
}
.intro-back.gone { display: none; }
.intro {
  width: min(560px, 100%); max-height: 90vh; overflow-y: auto;
  padding: clamp(22px, 3vw, 32px);
  border-radius: 18px; background: var(--card);
  box-shadow: 0 24px 64px rgba(8, 24, 16, .34);
}
.intro:focus { outline: none; }
.intro h2 { margin: 0 0 10px; font-size: clamp(19px, 2.4vw, 24px); }
.intro p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: #2c3a33; }
.intro-h3 {
  margin: 18px 0 8px; font-size: 12px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--accent);
}
.intro-steps {
  margin: 0 0 4px; padding-left: 20px;
  font-size: 13.5px; line-height: 1.55; color: #2c3a33;
}
.intro-steps li { margin-bottom: 7px; }
.intro-steps li::marker { color: var(--accent); font-weight: 700; }

.intro-list { margin: 0 0 16px; padding: 0; list-style: none; }
.intro-list li {
  display: flex; gap: 10px; align-items: baseline;
  padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px;
}
.intro-list strong { flex: none; min-width: 118px; color: var(--accent); }
.intro-note { color: var(--muted) !important; font-size: 13px !important; }
.intro-go {
  width: 100%; min-height: 46px; border: 0; border-radius: 11px;
  background: var(--accent); color: #fff;
  font: 650 14.5px/1 var(--font); cursor: pointer;
}
.intro-go:hover { background: #084d2f; }
.intro-go:focus-visible { outline: 3px solid #7fd7b0; outline-offset: 3px; }

@media (max-width: 620px) {
  .intro-list li { flex-direction: column; gap: 2px; }
  .intro-list strong { min-width: 0; }
}


/* ---------------------------------------------- stepping through the story
 *
 * Left to run on its own the narration moved on before a non-technical viewer
 * had finished reading, so the player stops at every beat and waits. That only
 * works if it is obvious the demo is waiting for them, which is what the
 * spotlight is for -- and it fires exactly once. Somebody who has never seen a
 * demo that waits needs telling; after their first click, a screen-wide dim
 * would just be standing in front of the thing they came to look at.
 */

.say-nav { flex: none; display: flex; align-items: center; gap: 9px; }
.say-count {
  font-size: 12px; font-weight: 600; color: var(--accent);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.say-nav button {
  min-height: 40px; padding: 0 15px; border-radius: 10px;
  border: 1.5px solid var(--accent); background: var(--card);
  color: var(--accent); font: 650 13.5px/1 var(--font);
  cursor: pointer; white-space: nowrap;
}
.say-nav button:hover:not(:disabled) { background: #d7ece1; }
.say-nav button:disabled { opacity: .38; cursor: default; }
.say-nav button:focus-visible { outline: 3px solid #7fd7b0; outline-offset: 2px; }

.say-go { background: var(--accent) !important; color: #fff !important; padding: 0 19px !important; }
.say-go:hover:not(:disabled) { background: #084d2f !important; }

/* While the demo is waiting, the button asks to be pressed. */
body.cueing .say-go:not(:disabled) { animation: goPulse 1.7s ease-in-out infinite; }
@keyframes goPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(11, 102, 64, .42); }
  55%      { box-shadow: 0 0 0 9px rgba(11, 102, 64, 0); }
}

/* The one-time spotlight. The narrator sits above it at z-index 2. */
.spot {
  position: fixed; inset: 0; z-index: 1;
  background: rgba(10, 26, 18, .55);
  animation: spotIn .35s ease;
  /* Dims, does not detain. Covering the viewport swallowed every click that
     was not on the narrator, so a viewer who reached for the speed control or
     a different scenario first found the page dead under the mouse. The point
     was to point, not to lock the doors. */
  pointer-events: none;
}
.spot[hidden] { display: none; }
@keyframes spotIn { from { opacity: 0; } to { opacity: 1; } }

body.teaching .say-wrap {
  box-shadow: 0 0 0 5px rgba(127, 215, 176, .5), 0 18px 44px rgba(8, 24, 16, .4);
}
/* Said in words as well as in light, because a glow is not an instruction. */
body.teaching .say-wrap::after {
  content: attr(data-cue);
  position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%);
  padding: 5px 13px; border-radius: 999px;
  background: var(--accent); color: #fff;
  font: 650 12.5px/1.4 var(--font); white-space: nowrap;
}

@media (max-width: 720px) {
  .say-wrap { flex-direction: column; align-items: stretch; gap: 10px; }
  .say-nav { justify-content: space-between; }
  .say-nav button { flex: 1; }
  .say-count { order: -1; width: 100%; text-align: center; }
}


/* While the opening explainer is up, its CTA is the only thing on screen worth
   touching — and at phone width the watermark tab was sitting on top of it, so
   the demo could not be started at all. Lift the watermark for exactly as long
   as the modal is there, then give the corner back. */
body.intro-open { --obx-wm-inset-bottom: 96px; }

/* On a phone the 96px lift traded one occlusion for another: the tab moved off
   the CTA and onto the explainer's last paragraph. So below tablet width the
   dock keeps its corner and the modal is made to end above it instead: bottom
   padding reserves the dock's strip of screen and the height cap stops the
   centred modal from reaching into it. Every line stays readable and the CTA
   stays tappable, with nothing layered over either. */
@media (max-width: 720px) {
  body.intro-open { --obx-wm-inset-bottom: 12px; }
  .intro-back { padding: 14px 14px 72px; }
  .intro {
    max-height: calc(100vh - 86px);
    max-height: calc(100dvh - 86px);
  }
}