/* ============================================================
   AI Maturity Scan.

   Read on the visitor's own phone, reached from the QR on the
   table, and the same build is the page on texterous.com. So the
   light skin is the default and the layout is written phone first.

   body.stand is the dark version behind ?dark: matches the roll-up
   and reads from two metres in a lit hall, for a screen at the
   stand rather than a device in a hand.

   Sits on top of texterous.css. The token block there is untouched.
   ============================================================ */

[hidden] { display: none !important; }

body { font-size: 17px; }

/* ---------- Light is the base, dark is the stand ---------- */

.mark-light { display: block; }
.mark-dark  { display: none; }

body.stand {
  background-color: var(--bg-dark);
  background-image: none;            /* the 72px grid reads as noise on ink */
  color: rgba(255, 255, 255, 0.72);
}
body.stand::before { opacity: 0.05; }
body.stand .mark-light { display: none; }
body.stand .mark-dark  { display: block; }

body.stand h1, body.stand h2, body.stand h3, body.stand h4, body.stand strong, body.stand b { color: #fff; }
body.stand .lead { color: rgba(255, 255, 255, 0.78); }
body.stand { --line: rgba(255, 255, 255, 0.14); }

/* The old build pinned the app to the viewport and scrolled inside
   each screen, which is right for a kiosk that must never look like
   a web page. On a phone it fights the browser: the URL bar never
   collapses and momentum scrolling feels wrong. So the document
   scrolls, and only the attract screen claims a full viewport. */
.app {
  position: relative;
  z-index: 2;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ---------- Head ---------- */

.k-head {
  position: sticky;
  top: 0;
  z-index: 5;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 40px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
body.stand .k-head { background: var(--bg-dark); }
.k-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.12rem;
}
body.stand .k-brand { color: #fff; }
.k-brand img { width: 21px; height: 36px; }
.k-head-right { display: flex; align-items: center; gap: 20px; }
.k-where { font-size: 0.82rem; color: var(--muted); letter-spacing: 0.03em; }
body.stand .k-where { color: rgba(255,255,255,0.42); }
.k-restart {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  color: inherit;
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 8px 15px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.k-restart:hover { border-color: var(--accent); }

/* ---------- Screens ---------- */

.screen {
  display: none;
  flex: 1 1 auto;
  position: relative;
  overflow-x: clip;
  padding: 38px 40px 34px;
}
.screen.is-active { display: block; animation: fade 0.34s var(--ease-out) both; }
@keyframes fade { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

.narrow { position: relative; z-index: 2; max-width: 820px; }
.screen h2 { font-size: clamp(1.6rem, 2.3vw, 2.15rem); line-height: 1.16; margin: 0 0 14px; max-width: 24ch; }
.screen .lead { max-width: 66ch; font-size: 1.04rem; }
.screen .ascii-owl { z-index: 0; }
.screen .ascii-owl pre { font-size: 12px; }
/* texterous.css only turns the owl blue inside .on-dark, and this
   page carries its dark skin on the body instead. Without this the
   owl renders ink-on-ink and disappears. */
body.stand .ascii-owl pre { color: var(--accent); opacity: 0.30; }

/* Needs to outrank `.screen h2`, which sets the display size. */
.screen .sub {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
  max-width: none;
  line-height: 1.4;
}
.btn-lg { padding: 15px 30px; font-size: 1.05rem; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

body.stand .btn-ghost { color: rgba(255,255,255,0.7); border-color: var(--line); }
body.stand .btn-ghost:hover { color: #fff; border-color: #fff; }
body.stand .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.3); background: transparent; }
body.stand .btn-secondary:hover { border-color: var(--accent); background: rgba(0,155,255,0.12); }

/* ---------- Attract ----------
   On a wide screen this has to fit without scrolling, because nobody
   at a stand scrolls to find the start button. On a phone it is a
   landing page and scrolling is what people expect, so it just runs
   from the top. */

#s-attract.is-active { display: flex; align-items: flex-start; }
.attract { position: relative; z-index: 2; width: 100%; max-width: 900px; }
.attract h1 {
  font-size: clamp(1.9rem, 2.9vw, 2.8rem);
  line-height: 1.1;
  margin: 0 0 14px;
  max-width: 18ch;
}
.attract .lead { max-width: 62ch; margin-bottom: 24px; }

.whois {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.whois p { margin: 0; font-size: 0.94rem; max-width: 46ch; }

/* Hairline rows and a middot, not a row of pills. Boxes are the
   thing this brand rejects hardest. */
.offer { margin: 0; padding: 0; list-style: none; }
.offer li {
  padding: 7px 0;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  display: flex;
  gap: 14px;
  align-items: baseline;
}
.offer li:last-child { border-bottom: 1px solid var(--line); }
.offer .lbl {
  flex: 0 0 62px;
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}
body.stand .offer .lbl { color: rgba(255,255,255,0.42); }
.offer .val { color: var(--ink); }
body.stand .offer .val { color: rgba(255,255,255,0.86); }

.proof {
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-size: 0.94rem;
  color: var(--muted);
  max-width: 78ch;
  min-height: 2.8em;
  transition: opacity 0.45s var(--ease-out);
}
body.stand .proof { color: rgba(255,255,255,0.6); }
.proof.is-out { opacity: 0; }
.proof b { color: var(--ink); font-weight: 600; }
body.stand .proof b { color: #fff; }

/* ---------- Progress and questions ---------- */

.progress { height: 2px; background: rgba(128,128,128,0.22); margin-bottom: 26px; max-width: 820px; }
.progress span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.4s var(--ease-out); }
.qhint { margin: -4px 0 0; font-size: 0.94rem; color: var(--muted); }
body.stand .qhint { color: rgba(255,255,255,0.55); }

.answers { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--line); }
.answer {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  position: relative;
  transition: padding-left 0.28s var(--ease-out), background 0.22s ease;
}
.answer::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--accent);
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.28s var(--ease-out);
}
.answer:focus-visible { background: rgba(0,155,255,0.06); padding-left: 20px; outline: none; }
.answer:focus-visible::before { transform: scaleY(1); }
/* Guarded, because a touch browser otherwise leaves the last tapped
   row stuck in its hover state behind the next question. */
@media (hover: hover) {
  .answer:hover { background: rgba(0,155,255,0.06); padding-left: 20px; }
  .answer:hover::before { transform: scaleY(1); }
}
.answer { align-items: center; }
.answer .key { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); width: 1.3em; flex: 0 0 auto; }
body.stand .answer .key { color: rgba(255,255,255,0.34); }

/* The pictogram. Muted until the row is chosen or hovered, so a column
   of them reads as texture rather than as eight competing symbols. */
.answer .ic {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  color: var(--muted);
  opacity: 0.75;
  transition: color 0.2s ease, opacity 0.2s ease;
}
body.stand .answer .ic { color: rgba(255,255,255,0.5); }
/* The dark rule above carries an extra element selector, so the accent
   states have to be written for both skins or the picked icon stays
   grey on the stand screen. */
.answer.is-on .ic,
body.stand .answer.is-on .ic { color: var(--accent); opacity: 1; }
@media (hover: hover) {
  .answer:hover .ic,
  body.stand .answer:hover .ic { color: var(--accent); opacity: 1; }
}
.answer:focus-visible .ic,
body.stand .answer:focus-visible .ic { color: var(--accent); opacity: 1; }

.answer .txt { font-size: 1.08rem; color: var(--ink); flex: 1 1 auto; }
body.stand .answer .txt { color: #fff; }

/* ---------- Multi-select (the blockers question) ----------
   Same rows, but they stay picked instead of advancing. A persistent
   accent bar and a tick on the right make "chosen" unmistakable, since
   there is no page turn to confirm the tap landed. */
.answer .tick {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--line); position: relative; align-self: center;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.answer.is-on .tick { border-color: var(--accent); background: var(--accent); }
.answer.is-on .tick::after {
  content: ""; position: absolute; left: 6px; top: 2.5px;
  width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.answer.is-on::before { transform: scaleY(1); }
.answer.is-on { padding-left: 20px; }
.answers.is-missing { border-color: #e2725b; }

/* ---------- Tiles ----------
   For questions that are a set of things rather than a set of
   sentences. The picture leads and the words sit under it, which is the
   whole reason the pictograms exist. */
.answers.is-tiles {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: 12px;
  border-top: 0;
  margin-top: 24px;
}
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  min-height: 116px;
  transition: border-color 0.18s var(--ease-out), background 0.18s ease, transform 0.18s var(--ease-out);
}
@media (hover: hover) {
  .tile:hover { border-color: var(--accent); transform: translateY(-2px); }
}
.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tile.is-on { border-color: var(--accent); background: rgba(0,155,255,0.07); }
body.stand .tile.is-on { background: rgba(0,155,255,0.16); }
.tile-ic { display: block; color: var(--muted); transition: color 0.18s ease; }
body.stand .tile-ic { color: rgba(255,255,255,0.5); }
.tile.is-on .tile-ic, body.stand .tile.is-on .tile-ic { color: var(--accent); }
@media (hover: hover) {
  .tile:hover .tile-ic, body.stand .tile:hover .tile-ic { color: var(--accent); }
}
.tile-ic .ic { width: 30px; height: 30px; opacity: 1; }
.tile-t { font-size: 1rem; line-height: 1.3; color: var(--ink); }
body.stand .tile-t { color: #fff; }
/* The letter is a keyboard affordance, not decoration, so it goes small
   and out of the way in the corner. */
.tile .key { position: absolute; top: 10px; right: 12px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); opacity: 0.6; }
.tile .tick { position: absolute; bottom: 12px; right: 12px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line); }
.tile.is-on .tick { border-color: var(--accent); background: var(--accent); }
.tile.is-on .tick::after {
  content: ""; position: absolute; left: 5px; top: 2px;
  width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---------- Scale ----------
   For the questions that are actually an axis. Rendering a headcount or
   a maturity progression as an unordered list throws away the one thing
   it has, which is the order.

   The line is a pseudo element on `.stops` rather than a node of its
   own, inset by half a step at each end so it starts and finishes under
   the outer dots instead of dangling past them. */
.answers.is-scale { display: block; border-top: 0; margin-top: 42px; }
.stops {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--of, 4), 1fr);
  align-items: start;
}
.stops::before {
  content: "";
  position: absolute;
  left: calc(100% / var(--of, 4) / 2);
  right: calc(100% / var(--of, 4) / 2);
  top: 5px; height: 2px;
  background: var(--line);
}
.stop {
  position: relative;
  padding: 0 6px;
  cursor: pointer;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.stop-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--line);
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s var(--ease-out);
}
body.stand .stop-dot { background: var(--bg-dark); }
.stop-t { font-size: 0.9rem; line-height: 1.35; color: var(--muted); }
body.stand .stop-t { color: rgba(255,255,255,0.6); }
.stop .key { display: none; }
@media (hover: hover) {
  .stop:hover .stop-dot { border-color: var(--accent); transform: scale(1.25); }
  .stop:hover .stop-t { color: var(--ink); }
  body.stand .stop:hover .stop-t { color: #fff; }
}
.stop:focus-visible { outline: none; }
.stop:focus-visible .stop-dot { outline: 2px solid var(--accent); outline-offset: 3px; }
.stop.is-on .stop-dot { border-color: var(--accent); background: var(--accent); transform: scale(1.3); }
.stop.is-on .stop-t { color: var(--ink); font-weight: 500; }
body.stand .stop.is-on .stop-t { color: #fff; }

/* Not a point on the axis, so it does not pretend to be one. */
.stop-aside {
  display: flex; align-items: center; gap: 14px;
  margin-top: 36px; padding: 14px 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
}
.stop-aside .ic { width: 22px; height: 22px; color: var(--muted); flex: 0 0 auto; }
body.stand .stop-aside .ic { color: rgba(255,255,255,0.5); }
.stop-aside .txt { font-size: 1rem; color: var(--ink); }
body.stand .stop-aside .txt { color: #fff; }
.stop-aside .key { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); margin-left: auto; }
.stop-aside.is-on { border-color: var(--accent); }
.stop-aside.is-on .ic, body.stand .stop-aside.is-on .ic { color: var(--accent); }
@media (hover: hover) {
  .stop-aside:hover .ic, body.stand .stop-aside:hover .ic { color: var(--accent); }
}
.stop-aside:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- The swipe deck ----------
   One statement at a time. The card is big because it is the only
   screen in the scan that is meant to be enjoyed rather than got
   through. Swipe is the flourish; the buttons underneath do the same
   job and are what most people at a stand will actually press. */
.answers.is-swipe { display: block; border-top: 0; margin-top: 20px; }
.deck-count {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.deck-stack { position: relative; height: 210px; max-width: 460px; }
.card {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
  padding: 28px 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  box-shadow: 0 2px 14px rgba(5,5,5,0.05);
  touch-action: pan-y;
  user-select: none;
}
body.stand .card { background: #1c1c1c; box-shadow: 0 2px 18px rgba(0,0,0,0.4); }
.card.is-behind { transform: scale(0.955) translateY(12px); opacity: 0.55; z-index: 1; }
.card.is-top { z-index: 2; cursor: grab; transition: transform 0.3s var(--ease-out), opacity 0.3s ease; }
.card.is-dragging { transition: none; cursor: grabbing; }
.card-ic .ic { width: 34px; height: 34px; color: var(--muted); }
body.stand .card-ic .ic { color: rgba(255,255,255,0.5); }
.card-t {
  font-family: var(--font-display);
  font-size: 1.32rem;
  line-height: 1.28;
  color: var(--ink);
}
body.stand .card-t { color: #fff; }

/* Which way it is going, shown before you let go. */
.card.lean-yes { border-color: var(--accent); }
.card.lean-yes .card-ic .ic { color: var(--accent); }
.card.lean-no { border-color: var(--muted); opacity: 0.7; }
.card.fly-yes { transform: translateX(130%) rotate(14deg); opacity: 0; }
.card.fly-no  { transform: translateX(-130%) rotate(-14deg); opacity: 0; }

.deck-actions { display: flex; gap: 12px; margin-top: 22px; }
.deck-btn {
  flex: 1 1 0;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: transparent;
  color: inherit;
  font-family: var(--font-body);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color 0.18s var(--ease-out), background 0.18s ease, color 0.18s ease;
}
.deck-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.deck-yes, .deck-confirm { border-color: var(--accent); color: var(--accent); font-weight: 500; }
@media (hover: hover) {
  .deck-yes:hover, .deck-confirm:hover { background: var(--accent); color: #fff; }
  .deck-no:hover, .deck-again:hover { border-color: var(--ink); }
  body.stand .deck-no:hover, body.stand .deck-again:hover { border-color: #fff; }
}
.deck-done-q { margin: 0; font-size: 1.06rem; color: var(--ink); }
body.stand .deck-done-q { color: #fff; }

/* Continue sits bottom right, Back bottom left, so the thumb that is
   already on the right of the phone never travels. Every question gets
   the button, including the single select ones: tapping an answer and
   watching the screen jump on its own is the thing that made this feel
   like a form being filled in rather than a decision being made. */
.qnav { display: flex; align-items: center; justify-content: space-between;
        gap: 14px; margin-top: 26px; }
.qnav .next { margin-top: 0; }
.qnav .next:disabled { opacity: 0.38; cursor: default; }
.back { margin-top: 26px; }

/* ---------- Result ---------- */

.result { position: relative; z-index: 2; max-width: 1040px; }
.result-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 44px; }
.result-head h2 { max-width: none; margin-bottom: 12px; }
#stageName { font-size: clamp(1.9rem, 3vw, 2.7rem); }
.result .lead { font-size: 1.02rem; max-width: 60ch; }

.gauge { flex: 0 0 auto; width: 210px; padding-top: 8px; }
.gauge .seg {
  display: inline-block;
  width: 46px; height: 5px;
  margin-right: 4px;
  background: rgba(128,128,128,0.26);
  border-radius: 3px;
}
.gauge .seg.on { background: var(--accent); }
.gauge-label {
  display: block;
  margin-top: 10px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}
body.stand .gauge-label { color: rgba(255,255,255,0.45); }

/* ---------- Agentic ladder: the path to agentic AI ----------
   A thin five rung spine, not a grid of cards. The visitor's rung is
   in accent, the rungs below it are filled ink, the ones above are
   dimmed. Reads at a glance and echoes the Atlas adoption ladder. */
.agentic { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.ag-kicker {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.rungs {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0;
}
.rungs li {
  display: flex; align-items: center;
  font-family: var(--font-display); font-size: 1rem;
  color: var(--muted); opacity: 0.5;
}
.rungs li::after {
  content: ""; width: 22px; height: 1px; margin: 0 8px; background: var(--line);
}
.rungs li:last-child::after { display: none; }
.rungs li.done { opacity: 1; color: var(--ink); }
body.stand .rungs li.done { color: #fff; }
.rungs li.here { opacity: 1; color: var(--accent); font-weight: 700; }
.rungs li.here span { border-bottom: 2px solid var(--accent); padding-bottom: 3px; }
.ag-here { margin: 0 0 6px; max-width: 66ch; color: var(--ink); }
body.stand .ag-here { color: rgba(255,255,255,0.85); }
.ag-step { margin: 0; max-width: 66ch; color: var(--muted); }
body.stand .ag-step { color: rgba(255,255,255,0.62); }
.ag-here b, .ag-step b { font-weight: 600; }
.ag-step b.ag-lead { color: var(--accent); }

.result-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 50px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.result-cols.is-single { display: block; }
.moves { margin: 0; padding: 0; list-style: none; counter-reset: mv; }
.moves li {
  counter-increment: mv;
  position: relative;
  padding: 0 0 16px 40px;
  max-width: 56ch;
  font-size: 0.99rem;
}
.moves li::before {
  content: counter(mv);
  position: absolute; left: 0; top: -1px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--accent);
}

/* Each move is a headline plus a reason. Left as one paragraph it read
   as a wall of text, which is exactly what the sync called out. The
   headline is already wrapped in <b> by the content, so promoting that
   to its own line and dropping the reason back to small and muted
   halves the perceived weight without cutting a word. */
.moves li b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.04rem;
  line-height: 1.32;
  color: var(--ink);
  margin-bottom: 4px;
}
body.stand .moves li b { color: #fff; }
.moves li { color: var(--muted); font-size: 0.94rem; line-height: 1.55; }
body.stand .moves li { color: rgba(255,255,255,0.62); }

.usecase { border-left: 2px solid var(--accent); padding-left: 20px; }
.uc-tag {
  margin: 0 0 8px;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
body.stand .uc-tag { color: rgba(255,255,255,0.5); }
.uc-big {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.85rem;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 10px;
}
body.stand .uc-big { color: #fff; }
.usecase p { margin: 0 0 10px; font-size: 0.95rem; }
.uc-how { font-style: italic; color: var(--muted); }
body.stand .uc-how { color: rgba(255,255,255,0.55); }

/* ---------- Form ---------- */

.form { margin-top: 24px; max-width: 620px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
body.stand .field label { color: rgba(255,255,255,0.5); }
.field .opt { text-transform: none; letter-spacing: 0; opacity: 0.7; }
.field input {
  width: 100%;
  background: rgba(128,128,128,0.07);
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.02rem;
  padding: 11px 15px;
}
body.stand .field input { background: rgba(255,255,255,0.05); color: #fff; }
.field input::placeholder { color: var(--muted); opacity: 0.7; }
.field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: transparent; }
/* Only mark a field wrong once they have tried to send. */
.form.was-tried .field input:invalid { border-color: #e2725b; }

/* ---------- Who did you speak to ----------
   A fieldset with no border, because the brand's rule against boxes
   applies here too. The faces carry it. */

/* ---------- The giveaway strip ----------
   Sits directly under the start button so the scan and the prize land in
   one look, with the scan first. Deliberately small: a thumbnail and two
   lines. Big enough to be seen without scrolling, not big enough to make
   the page read as a prize draw with a quiz attached.

   Our mark goes on the photo rather than beside it, so an image lifted
   for a LinkedIn post still says who built the thing. */
.giveaway {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 22px;
  align-items: center;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.giveaway-media { position: relative; }
.giveaway-media img { display: block; width: 100%; height: auto; border-radius: 3px; }
.giveaway-mark {
  position: absolute;
  right: 7px; bottom: 7px;
  width: 18px !important;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.55));
}
.giveaway-head {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 1.06rem;
  line-height: 1.3;
  color: var(--ink);
  max-width: 44ch;
}
body.stand .giveaway-head { color: #fff; }
.giveaway-line { margin: 0 0 6px; font-size: 0.92rem; color: var(--muted); max-width: 62ch; }
body.stand .giveaway-line { color: rgba(255,255,255,0.6); }
.giveaway .prize-mechanic { margin: 0; font-size: 0.88rem; }
.prize-catch { margin: 14px 0 0; font-size: 0.86rem; color: var(--muted); }

/* "See what you can win" and the terms link. Both are quiet on purpose:
   the offer is the sentence, these are the proof and the small print. */
.giveaway-see, .terms-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,155,255,0.4);
  white-space: nowrap;
}
.giveaway-see:hover, .terms-link:hover { border-bottom-color: var(--accent); }
.terms-link { font-size: 0.92em; }
body.stand .prize-catch { color: rgba(255,255,255,0.55); }

/* ---------- The giveaway detail ----------
   Editorial, not a promo card: a photo of the real thing next to a
   plain description of what it does. It is a genuinely good object, so
   it does not need a badge and a starburst to sell it. */
.prize {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  align-items: start;
  margin-top: 44px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}
/* Two images, side by side, no overlap. The first version floated the
   screen shot over the corner of the photo and it landed straight on
   the device, hiding the one thing the photo is for. */
.prize-media { display: grid; gap: 10px; }
.prize-media img {
  display: block; width: 100%; height: auto;
  border-radius: 3px;
}
.prize-screen { justify-self: start; width: 62%; }
.prize-title { margin: 6px 0 10px; }
.prize-list { list-style: none; margin: 16px 0 0; padding: 0; }
.prize-list li {
  position: relative;
  padding: 7px 0 7px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 0.96rem;
}
.prize-list li:first-child { border-top: 1px solid var(--line); }
.prize-list li::before {
  content: ""; position: absolute; left: 0; top: 15px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.prize-mechanic { margin: 16px 0 0; font-size: 0.94rem; color: var(--muted); }
body.stand .prize-mechanic { color: rgba(255,255,255,0.6); }

.cap-prize {
  margin: -6px 0 0;
  font-size: 0.94rem;
  color: var(--accent);
  font-weight: 500;
}

/* Confirmation on the result screen that the PDF is already going, so
   the follow-up form does not read as a second toll gate. */
.sent-note {
  flex: 1 1 100%;
  margin: 0 0 12px;
  font-size: 0.92rem;
  color: var(--muted);
}
body.stand .sent-note { color: rgba(255,255,255,0.6); }

/* ---------- The two qualifying taps ---------- */
.qual { margin: 20px 0 0; }
.qual-q { margin: 0 0 10px; font-weight: 500; }
.qual.is-missing .qual-q { color: #e2725b; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--font-body);
  font-size: 0.92rem;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.18s var(--ease-out), background 0.18s ease, color 0.18s ease;
}
.chip:hover { border-color: var(--accent); }
.chip.is-on { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 500; }
body.stand .chip.is-on { color: #04121d; }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.who { border: 0; padding: 0; margin: 20px 0 18px; }
.who legend {
  padding: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
body.stand .who legend { color: rgba(255,255,255,0.5); }
.who-hint { margin: 6px 0 0; font-size: 0.88rem; color: var(--muted); }
body.stand .who-hint { color: rgba(255,255,255,0.5); }
.who.is-missing legend { color: #e2725b; }

.who-list { list-style: none; display: flex; gap: 12px; margin: 14px 0 0; padding: 0; }
.who-list li { flex: 1 1 0; min-width: 0; }

.who-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 6px 2px 10px;
  cursor: pointer;
  font-family: var(--font-body);
  color: inherit;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
}
.who-card.is-on { border-bottom-color: var(--accent); }
.who-list:has(.is-on) .who-card:not(.is-on) { opacity: 0.45; }

.who-face {
  position: relative;
  width: 74px; height: 74px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(0,155,255,0.10);
  display: grid;
  place-items: center;
  filter: grayscale(1);
  transition: filter 0.2s var(--ease-out);
}
.who-card.is-on .who-face { filter: none; }
.who-face img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Sits under the photo and shows through only when the img is
   removed because the file is not there yet. */
.who-initials {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--accent);
}
.who-name { font-size: 0.92rem; font-weight: 600; color: var(--ink); text-align: center; line-height: 1.25; }
body.stand .who-name { color: #fff; }
.who-role { font-size: 0.76rem; color: var(--muted); text-align: center; line-height: 1.3; }
body.stand .who-role { color: rgba(255,255,255,0.5); }

.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 0.92rem; color: var(--muted); cursor: pointer; margin-top: 4px; }
body.stand .consent { color: rgba(255,255,255,0.62); }
.consent input { margin-top: 4px; accent-color: var(--accent); width: 17px; height: 17px; flex: 0 0 auto; }

/* ---------- Thanks and admin ---------- */

.thanks { position: relative; z-index: 2; }
.signoff { color: var(--muted); max-width: 56ch; margin-top: 22px; }
body.stand .signoff { color: rgba(255,255,255,0.55); }
.thanks .btn { margin-top: 24px; }

.admin-stats { display: flex; gap: 54px; flex-wrap: wrap; margin: 26px 0 6px; }
.admin-stats .value { font-size: 2.1rem; }
body.stand .admin-stats .value { color: #fff; }
.admin-danger { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); }

/* ---------- Phone, which is the default case ----------

   Everything above is written for the wide screen because that is
   how the file grew. This block is what actually ships to most
   visitors, so it is worth reading as the primary layout rather
   than as an afterthought. */

@media (max-width: 900px) {
  .k-head { padding: 13px 20px; }
  .k-where { display: none; }
  .screen { padding: 24px 20px 40px; }

  .whois, .result-cols, .grid2 { grid-template-columns: 1fr; gap: 24px; }
  .result-head { flex-direction: column; gap: 18px; }
  .gauge { width: 100%; }
  .gauge .seg { width: 20%; max-width: 62px; margin-right: 3px; }

  /* Tiles: three across is too tight on a phone, two is right. The
     four-button question keeps its 2x2 either way. */
  .answers.is-tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tile { min-height: 104px; padding: 15px 13px 14px; }
  .tile-t { font-size: 0.94rem; }
  .tile-ic .ic { width: 26px; height: 26px; }

  /* The scale turns vertical. Four labels side by side on 375px is
     unreadable, and a vertical track reads as an axis just as well.
     The line insets by half a row so it runs dot to dot rather than
     past them. */
  .answers.is-scale { margin-top: 24px; }
  .stops { grid-template-columns: 1fr; padding-left: 3px; }
  .stops::before {
    left: 5px; right: auto;
    top: 24px; bottom: 24px;
    height: auto; width: 2px;
  }
  .stop {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    text-align: left;
    padding: 13px 0;
  }
  .stop-t { font-size: 1rem; }
  .stop-aside { margin-top: 20px; }

  /* Five rungs on a 375px phone: shrink the label and the connector so
     the spine still fits without wrapping into a mess. */
  .agentic { margin-top: 24px; padding-top: 20px; }
  .rungs li { font-size: 0.9rem; }
  .rungs li::after { width: 12px; margin: 0 5px; }

  /* The prize photo stacks above the words, and the inset screen shot
     comes inline rather than overlapping, because at 375px an overlap
     eats the thing it is sitting on. */
  .prize { grid-template-columns: 1fr; gap: 22px; margin-top: 34px; padding-top: 26px; }
  .prize-media { grid-template-columns: 1fr; align-items: start; }
  .prize-screen { width: 68%; }
  .chip { padding: 11px 16px; font-size: 0.95rem; }

  /* Hero stacks: photo first, then the offer and the button. Cap the
     container, not the image, or the mark anchors to the empty space
     beside the photo instead of to its corner. */
  /* The strip stays side by side even on a phone. Stacking it would
     push the whole thing below the fold, and being seen without
     scrolling is the entire point of it being a strip. */
  .giveaway { grid-template-columns: 96px 1fr; gap: 16px; margin-top: 24px; padding-top: 20px; }
  .giveaway-head { font-size: 1rem; }
  .giveaway-mark { width: 15px !important; right: 5px; bottom: 5px; }

  /* Thumb-sized, and wide enough that the whole row is the target
     rather than the words in it. 15px of padding on a 1.08rem line
     came to about 45px, which is under the 48px anyone can reliably
     hit while standing up and holding a coffee. */
  .answer { padding: 17px 0; gap: 13px; }
  .answer .txt { font-size: 1.04rem; }
  .answers { margin-top: 18px; }

  /* No hover on a touch screen, so the blue bar and the shift have
     to happen on press instead, otherwise a tap gives no feedback
     at all before the next question paints. */
  .answer:active { background: rgba(0,155,255,0.10); padding-left: 16px; }
  .answer:active::before { transform: scaleY(1); }

  .btn { padding: 14px 22px; }
  .btn-lg { width: 100%; padding: 16px 24px; }
  .actions { gap: 10px; }
  .actions .btn { flex: 1 1 auto; text-align: center; justify-content: center; }

  .attract h1 { font-size: clamp(1.75rem, 7.4vw, 2.3rem); max-width: 14ch; }
  .screen h2 { font-size: clamp(1.5rem, 6.4vw, 2rem); }
  #stageName { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .uc-big { font-size: 1.5rem; }
  .moves li { padding-left: 32px; }

  /* 16px or the phone zooms the whole page in on focus. */
  .field input { font-size: 16px; padding: 13px 14px; }
  .form { max-width: none; }

  .who-list { gap: 8px; }
  .who-face { width: 64px; height: 64px; }
  .who-name { font-size: 0.85rem; }
  .who-role { display: none; }
}

/* ---------- Wide screen: the stand, and the site on a laptop ----------
   Only here does the attract screen have to fit without scrolling. */

@media (min-width: 901px) {
  body { font-size: 18px; }
  #s-attract.is-active { align-items: center; }
}

@media (min-width: 901px) and (max-height: 880px) {
  .k-head { padding: 14px 40px; }
  .screen { padding: 26px 40px 24px; }
  .attract h1 { font-size: clamp(1.7rem, 2.4vw, 2.2rem); margin-bottom: 11px; }
  .attract .lead { font-size: 0.98rem; margin-bottom: 18px; }
  .whois { margin-top: 22px; padding-top: 18px; gap: 34px; }
  .whois p { font-size: 0.9rem; }
  .proof { margin-top: 16px; font-size: 0.88rem; min-height: 2.6em; }
  .result-cols { margin-top: 20px; padding-top: 18px; gap: 40px; }
  .moves li { padding-bottom: 12px; }
  .actions { margin-top: 20px; }
}

@media (min-width: 901px) and (max-height: 700px) {
  .attract .lead { display: none; }
  .proof { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .screen.is-active { animation: none; }
  .proof { transition: none; }
  .answer { transition: none; }
}