/* ============================================================================
   DAS SURVEY — THE CLICK FUNNEL
   driverappreciationsolutions.com/surveys
   ----------------------------------------------------------------------------
   One question per screen, full-bleed, tap to answer, auto-advance. Built for a
   driver holding a phone in a truck stop and for a room of executives passing an
   iPad around — not for someone filling in a form at a desk.

   BRAND POSITION (BRAND-KIT.md is LOCKED — read this before "fixing" the color):
     • Anton for every headline, Chivo for UI. Unchanged, non-negotiable.
     • Brass #C8A14B is DAS's EARNED metal — engraving, medals, milestones.
       "Never a flat fill, never a background." It appears exactly ONCE in this
       file: the Commit state on the 2027 decision list, which is an earned mark
       by definition. Nothing else here is gold, deliberately, so brass keeps
       meaning something.
     • The added color is a per-SECTION ground world plus a vivid answer-tile
       deck. The brand's palette is not recolored; the survey gets its own
       color environment, the way a quiz does.

   No white space anywhere by design — every screen is a full-viewport colored
   ground with a prism wash and grain, the way the rest of the site kills dead
   space without inventing hues.
   ========================================================================== */

/* ══ Answer-tile deck — the Kahoot layer ═════════════════════════════════
   Six vivid, high-contrast tiles. No gold in the deck: gold is brass, brass is
   earned, and a gold answer tile would spend that meaning on nothing. */
:root {
  --t1: #E8543F;  --t1d: #BF3F2D;   /* coral  */
  --t2: #2E86C8;  --t2d: #1F6BA6;   /* blue   */
  --t3: #2FA36B;  --t3d: #218253;   /* green  */
  --t4: #8B5CD6;  --t4d: #6E45B4;   /* violet */
  --t5: #17A2A8;  --t5d: #0F8288;   /* teal   */
  --t6: #D9457F;  --t6d: #B33465;   /* rose   */

  --brass: #C8A14B;
  --ink:   #0B1020;

  --sv-head: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --sv-ui:   'Chivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ══ Illustrations ═══════════════════════════════════════════════════════
   css/das-illustrations.css carries the per-drawing aspect ratios but NOT the
   stroke: those three declarations live in css/styles.css:5480, which this page
   deliberately does not load. Without them every drawing computes stroke:none
   (the SVG initial value) and renders as an empty box — the drawings were
   invisible here until this was added. Values copied to match the site exactly.

   The sprite is injected inline by js/das-sprite.js and referenced with LOCAL
   fragments (#das-medal). Never use href="/images/…svg#id" here — iOS Safari has
   never supported external SVG <use>, and drivers on iPhones are the audience. */
.svq .das-ill { stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ══ The stage ═══════════════════════════════════════════════════════════ */
.svq {
  position: relative;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  overflow: hidden;
  color: #fff;
  font-family: var(--sv-ui);
  background: linear-gradient(165deg, var(--g1) 0%, var(--g2) 52%, var(--g3) 100%);
  transition: background 620ms cubic-bezier(.4, 0, .2, 1);
}

/* Section color worlds. The ground changes as you move through the instrument,
   so progress is felt before it is read. */
.svq[data-accent="0"] { --g1:#0B1430; --g2:#16264F; --g3:#2E4FA8; --gl:#7FB0FF; }
.svq[data-accent="1"] { --g1:#0B1430; --g2:#1A2E6E; --g3:#3A5FC0; --gl:#9CC4F5; }
.svq[data-accent="2"] { --g1:#04262A; --g2:#0B4F53; --g3:#14A0A6; --gl:#7FE3E8; }
.svq[data-accent="3"] { --g1:#150F35; --g2:#2E2566; --g3:#6E52C8; --gl:#C4B2FF; }
.svq[data-accent="4"] { --g1:#2B0F0D; --g2:#6E2A26; --g3:#D3603E; --gl:#FFC0A8; }
.svq[data-accent="5"] { --g1:#06210F; --g2:#10402C; --g3:#2E8C5A; --gl:#9EE6BE; }
.svq[data-accent="6"] { --g1:#04182B; --g2:#0A3550; --g3:#1E7FB8; --gl:#A6D8F5; }
.svq[data-accent="7"] { --g1:#240E22; --g2:#4A1F45; --g3:#A2478F; --gl:#F2B4DE; }
.svq[data-accent="8"] { --g1:#0D1220; --g2:#232B3D; --g3:#5A6C8C; --gl:#C3CEE0; }

/* The DAS prism, dark variant — layered radials + grain so a big colored
   ground never reads as a flat fill. */
.svq::before {
  content: ''; position: absolute; inset: -20% -10%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 38% at 18% 8%,  rgba(255,255,255,.16), transparent 62%),
    radial-gradient(50% 44% at 88% 22%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(60% 50% at 50% 108%, rgba(0,0,0,.34), transparent 64%);
}
.svq::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

/* While the funnel is running it owns the viewport — the site chrome would only
   compete with it and eat the screen a driver is answering on. */
body.svq-run .nav,
body.svq-run .footer,
body.svq-run .das-dock { display: none !important; }
body.svq-run { background: #0B1430; }

/* ══ Top bar — progress ══════════════════════════════════════════════════ */
.svq-top { position: relative; z-index: 3; padding: 14px clamp(16px, 4vw, 40px) 0; flex: none; }
.svq-rail { height: 4px; border-radius: 99px; background: rgba(255,255,255,.18); overflow: hidden; }
.svq-rail-fill {
  height: 100%; width: 0%; border-radius: 99px;
  background: linear-gradient(90deg, #fff, var(--gl));
  transition: width 420ms cubic-bezier(.4, 0, .2, 1);
}
.svq-meta {
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  margin-top: 11px; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}
.svq-meta-left { color: rgba(255,255,255,.92); display: flex; align-items: center; gap: 10px; min-width: 0; }
.svq-chip {
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22);
  padding: 5px 10px; border-radius: 99px; white-space: nowrap;
}
.svq-section-name {
  color: rgba(255,255,255,.62); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.svq-exit {
  appearance: none; background: none; border: 0; cursor: pointer; color: rgba(255,255,255,.6);
  font: inherit; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; padding: 6px;
}
.svq-exit:hover { color: #fff; }
@media (max-width: 560px) { .svq-section-name { display: none; } }

/* ══ Screen body ═════════════════════════════════════════════════════════ */
.svq-stage {
  position: relative; z-index: 3; flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  /* Extra bottom padding lifts the block above dead centre so the eye lands on
     the question immediately on a tall phone, and the answers stay in the
     thumb zone rather than floating mid-screen. */
  padding: clamp(20px, 4vw, 44px) clamp(16px, 4vw, 40px) clamp(40px, 11vh, 130px);
  max-width: 940px; width: 100%; margin: 0 auto;
}
/* THE ILLUSTRATION FIELD — the ground, replacing the ghosted word (Jayden, 2026-08-30:
   the word was weak, "we can do a better job with a better branded background").
   The 16 DAS drawings blown up huge and quiet. On-brand by construction, no new assets,
   and unlike a word it says what the survey is ABOUT. Marks are pushed to the edges and
   held at 8-13% so they never compete with the answer stack. */
/* NAMED .svq-ill, NOT .svq-field. It was .svq-field until 2026-08-31 and that class
   already belonged to the text inputs, so every input inherited `position:absolute;
   inset:0` and stacked into one invisible full-card box — three fields on top of each
   other, impossible to see or aim at — while this container inherited the input's
   translucent background and border and read as a washed-out card over the content.
   One duplicated class name broke the entire identity screen on a phone. */
.svq-ill {
  position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none;
}
.svq-ill svg {
  position: absolute; color: #fff;
  stroke: currentColor; stroke-width: 2.4; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Sizes are CAPPED in px, not left as pure percentages: .svq grows with a tall
   screen's content, so a 30%-height mark rendered 388px tall on a 375px phone and
   swamped the answer stack. Percentage for placement, pixels for scale. */
.svq-ill .m1 { left: -15%; top: 7%;   width: 78%;  max-width: 420px; opacity: .12; }
.svq-ill .m2 { right: -8%; top: 40%;  height: 26%; max-height: 210px; opacity: .10; }
.svq-ill .m3 { left: 3%;   bottom: 4%; height: 22%; max-height: 180px; opacity: .09; }
/* On a phone the drawings sit directly behind the text rather than beside it, so they
   have to drop back further or the two read as one mush. */
@media (max-width: 560px) {
  .svq-ill .m1 { width: 86%; opacity: .07; }
  .svq-ill .m2 { opacity: .06; max-height: 168px; }
  .svq-ill .m3 { opacity: .05; max-height: 140px; }
}
.svq-screen { animation: svqIn 420ms cubic-bezier(.2, .7, .3, 1) both; }
@keyframes svqIn { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }

.svq-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gl); margin: 0 0 14px;
}
.svq-h {
  font-family: var(--sv-head); font-weight: 400; text-transform: uppercase;
  /* De-shouted, 2026-08-30. Anton at 38px+ with tight tracking reads as a poster and
     Jayden called it "too bold and bulky". Wider tracking, more line-height and 92%
     white keep the DAS display face without it hammering the reader. */
  letter-spacing: .07em; line-height: 1.08; color: rgba(255,255,255,.92); margin: 0;
  text-wrap: balance;
}
.svq-h1 { font-size: clamp(23px, 3.6vw, 34px); }
.svq-h2 { font-size: clamp(20px, 2.9vw, 28px); }
/* Question text stays sentence-case: uppercasing a 20-word question is unreadable. */
.svq-qtext {
  font-family: var(--sv-ui); font-weight: 300; text-transform: none;
  font-size: clamp(24px, 3.1vw, 34px); line-height: 1.28; letter-spacing: -.01em;
  color: #fff; margin: 0 0 clamp(20px, 3vw, 32px); text-wrap: balance;
}
.svq-lede { font-size: clamp(15px, 1.8vw, 17px); line-height: 1.7; color: rgba(255,255,255,.82); margin: 16px 0 0; max-width: 58ch; }
.svq-help {
  font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,.78);
  border-left: 2px solid var(--gl); padding: 8px 0 8px 14px; margin: 0 0 22px; max-width: 62ch;
}

/* ══ Answer tiles — tap to answer, auto-advance ══════════════════════════ */
.svq-tiles { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
.svq-tiles[data-count="1"], .svq-tiles[data-count="2"], .svq-tiles[data-count="3"] { grid-template-columns: 1fr; }
@media (max-width: 700px) { .svq-tiles { grid-template-columns: 1fr; } }

.svq-tile {
  appearance: none; cursor: pointer; font: inherit; text-align: left; color: #fff;
  border: 0; border-radius: 12px; padding: 20px 20px 20px 18px;
  min-height: clamp(74px, 11.5vh, 104px); display: flex; align-items: center; gap: 15px;
  background: var(--tile); box-shadow: 0 5px 0 var(--tiled), 0 14px 28px rgba(0,0,0,.24);
  transform: translateY(0);
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
  animation: svqTile 380ms cubic-bezier(.2, .7, .3, 1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes svqTile { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.svq-tile:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--tiled), 0 20px 36px rgba(0,0,0,.3); }
.svq-tile:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--tiled), 0 8px 18px rgba(0,0,0,.26); }
.svq-tile:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.svq-tile-key {
  flex: none; width: 32px; height: 32px; border-radius: 8px;
  background: rgba(0,0,0,.22); display: grid; place-items: center;
  font-family: var(--sv-head); font-size: 16px; line-height: 1;
}
.svq-tile-label { font-size: 17px; font-weight: 400; line-height: 1.35; }
.svq-tile-check {
  margin-left: auto; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.95); display: grid; place-items: center;
  opacity: 0; transform: scale(.4); transition: opacity 160ms ease, transform 220ms cubic-bezier(.2, 1.5, .4, 1);
}
.svq-tile-check svg { width: 15px; height: 15px; stroke: var(--tiled); }
.svq-tile[aria-pressed="true"] .svq-tile-check { opacity: 1; transform: scale(1); }
.svq-tile[aria-pressed="true"] { filter: saturate(1.15) brightness(1.06); }
/* Everything not chosen recedes the instant a choice is made. */
.svq-tiles.is-committed .svq-tile[aria-pressed="false"] { filter: saturate(.35) brightness(.72); opacity: .62; }

/* The 2027 decision list. Brass = Commit, the one earned mark in this file. */
.svq-tile[data-decision="Commit"][aria-pressed="true"] {
  background: linear-gradient(180deg, #D9B45E, var(--brass));
  box-shadow: 0 5px 0 #8A6D24, 0 14px 28px rgba(0,0,0,.28);
  color: #2A2008;
}
.svq-tile[data-decision="Commit"][aria-pressed="true"] .svq-tile-key { background: rgba(0,0,0,.16); }
.svq-tile[data-decision="Commit"][aria-pressed="true"] .svq-tile-check svg { stroke: #8A6D24; }

/* ══ Scales — intensity ramp, no implied good/bad ════════════════════════
   A red-to-green ramp would tell someone that "1 — not important" is a bad
   answer. These questions have no bad answer, so the ramp reads as AMOUNT:
   one hue, climbing weight. */
.svq-anchors {
  display: flex; justify-content: space-between; gap: 14px; margin-bottom: 12px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.svq-scale { display: flex; flex-wrap: wrap; gap: 9px; }
.svq-step {
  appearance: none; cursor: pointer; font-family: var(--sv-head); font-size: 21px; color: #fff;
  flex: 1 1 60px; min-width: 58px; min-height: clamp(74px, 13vh, 118px); border-radius: 11px;
  /* --i is 0→1 across the scale. The climb has to be VISIBLE — at a 0.07 spread
     the ramp read as five identical boxes, which is the paper problem again. */
  border: 1.5px solid rgba(255,255,255, calc(.26 + var(--i) * .5));
  background: linear-gradient(180deg,
                rgba(255,255,255, calc(.10 + var(--i) * .34)),
                rgba(255,255,255, calc(.04 + var(--i) * .26)));
  transition: transform 140ms ease, background 160ms ease, border-color 160ms ease;
  display: grid; place-items: center;
}
.svq-step:hover { transform: translateY(-3px); border-color: #fff; }
.svq-step[aria-pressed="true"] {
  background: #fff; color: var(--g2); border-color: #fff; transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0,0,0,.3);
}
.svq-step:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* An escape hatch beside a scale ("Not applicable", "No program"). */
.svq-escape { margin-top: 11px; }
.svq-escape .svq-step {
  flex: 0 0 auto; min-height: 48px; padding: 0 20px; font-family: var(--sv-ui);
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
}

/* Agreement scales DO have a direction, so they diverge — and that is a
   meaningful signal, not decoration. */
.svq-likert { display: grid; gap: 10px; }
.svq-likert .svq-tile { min-height: 62px; padding: 14px 18px; }
.svq-likert .svq-tile[data-pos="0"] { --tile: #C24634; --tiled: #9A3527; }
.svq-likert .svq-tile[data-pos="1"] { --tile: #D57C4E; --tiled: #AC6039; }
.svq-likert .svq-tile[data-pos="2"] { --tile: #6B7793; --tiled: #525C73; }
.svq-likert .svq-tile[data-pos="3"] { --tile: #4E9E6B; --tiled: #3C7D54; }
.svq-likert .svq-tile[data-pos="4"] { --tile: #2C8C55; --tiled: #206B40; }

/* ══ Typed answers — same stage, no form-field feeling ═══════════════════ */
.svq-field {
  width: 100%; font-family: var(--sv-ui);
  /* 16px FLOOR: iOS Safari zooms the whole page when a focused input is below 16px,
     which on this full-bleed layout throws the user out of the funnel. */
  font-size: 17px; color: #fff;
  /* Opaque enough to read as a FIELD against a bright ground. At 9% white the input
     disappeared into the gradient and people could not tell where to type. */
  background: rgba(4,10,26,.55); border: 1.5px solid rgba(255,255,255,.42);
  border-radius: 12px; padding: 15px 16px; line-height: 1.45;
  min-height: 54px; -webkit-appearance: none; appearance: none;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
textarea.svq-field { min-height: 148px; resize: vertical; }
.svq-field::placeholder { color: rgba(255,255,255,.42); }
.svq-field:focus {
  outline: none; border-color: #fff; background: rgba(4,10,26,.72);
  box-shadow: 0 0 0 4px rgba(255,255,255,.22);
}
.svq-field::placeholder { color: rgba(255,255,255,.5); }
.svq-field.is-invalid { border-color: #FF9C8A; box-shadow: 0 0 0 4px rgba(255,120,100,.18); }
.svq-label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gl); margin: 0 0 8px;
}
.svq-label small { color: rgba(255,255,255,.55); font-weight: 400; letter-spacing: .08em; text-transform: none; }
.svq-fields { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.svq-fields .svq-full { grid-column: 1 / -1; }
@media (max-width: 640px) { .svq-fields { grid-template-columns: 1fr; } }

/* ══ Matrix — the workstream / census / commitment grids ═════════════════ */
.svq-matrix { display: grid; gap: 11px; }
.svq-mrow {
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px; padding: 15px 16px;
  display: grid; gap: 11px; grid-template-columns: 1.25fr repeat(var(--cols, 2), 1fr); align-items: end;
}
@media (max-width: 760px) { .svq-mrow { grid-template-columns: 1fr; } }
.svq-mrow-label { font-size: 15px; font-weight: 600; color: #fff; line-height: 1.35; }
.svq-mrow-note { display: block; font-size: 12.5px; font-weight: 400; color: rgba(255,255,255,.66); margin-top: 3px; line-height: 1.45; }
.svq-mrow .svq-field { font-size: 16px; padding: 11px 13px; }
.svq-computed {
  font-family: var(--sv-head); font-size: 26px; color: #fff; line-height: 1.1;
  padding: 8px 0 4px; display: block;
}
.svq-mtotal { background: rgba(255,255,255,.17); border-color: rgba(255,255,255,.3); }

/* ══ Footer controls ═════════════════════════════════════════════════════ */
.svq-foot {
  position: relative; z-index: 3; flex: none;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 0 clamp(16px, 4vw, 40px) clamp(18px, 3vw, 30px);
  max-width: 940px; width: 100%; margin: 0 auto;
}
.svq-spacer { flex: 1; }
.svq-btn {
  appearance: none; cursor: pointer; font-family: var(--sv-ui); font-weight: 700;
  font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 16px 30px; min-height: 52px; border-radius: 10px; border: 1.5px solid transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: transform 140ms ease, box-shadow 140ms ease, background 160ms ease;
}
.svq-btn-primary { background: #fff; color: var(--g2); box-shadow: 0 5px 0 rgba(0,0,0,.22); }
.svq-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 0 rgba(0,0,0,.22); }
.svq-btn-primary:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.22); }
.svq-btn-ghost { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.3); }
.svq-btn-ghost:hover { background: rgba(255,255,255,.18); }
.svq-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.svq-skip {
  appearance: none; background: none; border: 0; cursor: pointer; color: rgba(255,255,255,.62);
  font-family: var(--sv-ui); font-size: 12.5px; letter-spacing: .06em; padding: 12px 6px; text-decoration: underline;
}
.svq-skip:hover { color: #fff; }

.svq-alert {
  font-size: 14px; line-height: 1.6; padding: 13px 16px; border-radius: 10px;
  margin: 0 0 18px; display: none; max-width: 62ch;
}
.svq-alert.is-on { display: block; }
.svq-alert--err  { background: rgba(255,120,100,.18); border: 1px solid rgba(255,160,145,.5); color: #FFE2DC; }
.svq-alert--info { background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.26); color: rgba(255,255,255,.94); }

/* ══ Section interstitial ════════════════════════════════════════════════ */
.svq-sect { text-align: center; }
.svq-sect-num {
  font-family: var(--sv-head); font-size: clamp(72px, 17vw, 168px); line-height: .82;
  color: rgba(255,255,255,.16); margin: 0 0 4px;
}
.svq-sect .svq-lede { margin-inline: auto; }

/* ══ Role / instrument cards on the opening screen ═══════════════════════ */
.svq-picks { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; margin-top: 30px; }
@media (max-width: 760px) { .svq-picks { grid-template-columns: 1fr; } }
.svq-pick {
  appearance: none; cursor: pointer; text-align: left; font: inherit; color: #fff;
  /* A navy card, not 10% glass. The glass let the bright ground through and the label
     disappeared into it — "probably white so we can actually see it". */
  background: rgba(8,14,32,.55); border: 1.5px solid rgba(255,255,255,.30);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 14px; padding: 26px 24px;
  transition: transform 160ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.svq-pick:hover {
  transform: translateY(-4px); background: rgba(255,255,255,.17);
  border-color: #fff; box-shadow: 0 18px 40px rgba(0,0,0,.28);
}
.svq-pick:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.svq-pick .das-ill { height: 54px; color: #fff; margin-bottom: 16px; display: block; }
.svq-pick-title {
  /* Chivo, not Anton: these are the two labels a driver reads first and they must be
     legible at arm's length in a cab. Title Case comes from the copy in survey-app.js. */
  font-family: var(--sv-ui); font-weight: 700; letter-spacing: -.005em;
  font-size: 20px; line-height: 1.2; margin: 0 0 9px; color: #fff;
}
.svq-pick-desc { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.8); margin: 0; }
.svq-pick-tag {
  display: inline-block; margin-top: 15px; font-size: 10px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gl);
  border: 1px solid rgba(255,255,255,.3); border-radius: 99px; padding: 5px 11px;
}

/* ══ Driver opt-in ═══════════════════════════════════════════════════════
   Unticked by default. Asking for an email at the END rather than up front:
   requesting it before someone answers an anonymous survey reads as "we will
   contact you" and suppresses honesty; asking after reads as an offer. */
.svq-optin {
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px; padding: 16px 18px; margin: 20px 0 0;
}
.svq-optin-row {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.92);
}
.svq-optin-row input {
  appearance: none; flex: none; width: 22px; height: 22px; margin-top: 1px;
  border: 1.5px solid rgba(255,255,255,.5); border-radius: 5px;
  background: transparent; cursor: pointer; transition: all .15s;
}
.svq-optin-row input:checked {
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230B1430' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") center/13px no-repeat;
  border-color: #fff;
}
.svq-optin-row input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ══ Review + done ═══════════════════════════════════════════════════════ */
.svq-summary {
  background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.22);
  border-radius: 14px; padding: 22px 24px; margin: 24px 0 0;
  font-size: 15px; line-height: 2; color: rgba(255,255,255,.85);
}
.svq-summary b { color: #fff; font-weight: 700; }
.svq-done { text-align: center; }
.svq-done .das-ill { height: 88px; color: #fff; margin: 0 auto 22px; display: block; }
.svq-done .svq-summary { text-align: left; max-width: 480px; margin-inline: auto; }

/* ══ Static / no-JS fallback ═════════════════════════════════════════════ */
.svq-noscript {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.26);
  border-radius: 12px; padding: 22px; font-size: 15px; line-height: 1.7;
}
.svq-noscript a { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .svq, .svq-screen, .svq-tile, .svq-step, .svq-btn, .svq-pick { transition: none !important; animation: none !important; }
}



/* ══ LAPTOP / DESKTOP ═════════════════════════════════════════════════════
   Built phone-first and only ever measured at 375-390px, which produced two
   defects nobody sees on a phone (found 2026-08-31):

   1. The organisation input rendered **847px wide** — a text field the width of a
      runway. `.svq-fields` is a two-column grid and the full-width row spanned
      both, so it inherited the whole 940px stage. A form field should never be
      wider than the text a person types into it.
   2. The drawings sat INSIDE the centred content column between roughly 1000 and
      1300px, because they are positioned against the full-width stage while the
      content is capped at 940 and centred. On a phone they are at the edges; on a
      laptop the column pulls away from them and they end up underneath the text.

   The fix is to give the content a real measure and push the drawings outside it. */
@media (min-width: 760px) {
  /* A funnel reads as a column, not a stretched page. */
  .svq-screen { max-width: 720px; margin-inline: auto; }
  .svq-foot   { max-width: 720px; }

  /* Fields sized to their content, not to the stage. */
  .svq-fields { max-width: 640px; }
  .svq-fields .svq-full .svq-field { max-width: 100%; }
  .svq-field  { max-width: 640px; }
  textarea.svq-field { max-width: 720px; }

  /* Marks move OUT of the column and drop back — they are texture at this size,
     not illustration. Anchored to the viewport edges so a wider screen pushes them
     further away rather than dragging them across the reading area. */
  .svq-ill .m1 { left: -8%;  width: 46%;  max-width: 520px; opacity: .085; }
  .svq-ill .m2 { right: -3%; top: 34%;  max-height: 260px; opacity: .075; }
  .svq-ill .m3 { left: -3%;  bottom: 3%; max-height: 230px; opacity: .06; }
}

@media (min-width: 1200px) {
  /* Wide enough that the drawings can breathe at the far edges again. */
  .svq-ill .m1 { left: -6%; width: 40%; opacity: .10; }
  .svq-ill .m2 { right: 1%; opacity: .09; }
  .svq-ill .m3 { left: 1%;  opacity: .075; }
}

/* ══ NATIVE iOS BEHAVIOUR ═════════════════════════════════════════════════
   A full-bleed web flow on an iPhone gives itself away in four specific ways.
   Each rule below kills one of them.

   1. SAFE AREA. The home indicator and the notch overlap fixed edges. Without
      env(safe-area-inset-*) the Continue button sits under the indicator bar and
      the lockup tucks under the notch on an X-class phone.
   2. TAP FLASH. Mobile Safari paints a grey box over anything tappable. Nothing
      native does that.
   3. HOVER STICK. A :hover style latches after a tap on touch devices and stays
      lit until you tap elsewhere — a tile still highlighted after you have moved
      on reads as a bug. Hover now applies only where a real pointer exists, and
      touch gets a press state instead, which it can actually produce.
   4. LONG-PRESS SELECTION and the 300ms double-tap delay on controls.
   ════════════════════════════════════════════════════════════════════════ */
.svq-top  { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
.svq-foot { padding-bottom: calc(clamp(18px, 3vw, 30px) + env(safe-area-inset-bottom, 0px)); }
.svq-stage {
  padding-left:  calc(clamp(16px, 4vw, 40px) + env(safe-area-inset-left, 0px));
  padding-right: calc(clamp(16px, 4vw, 40px) + env(safe-area-inset-right, 0px));
}

.svq-tile, .svq-step, .svq-btn, .svq-pick, .svq-skip, .svq-exit, .svq-optin-row {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.svq-field { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

@media (hover: none) {
  .svq-tile:hover, .svq-step:hover, .svq-pick:hover,
  .svq-btn-primary:hover, .svq-btn-ghost:hover { transform: none; }
  .svq-tile:active { transform: translateY(2px) scale(.995); }
  .svq-step:active, .svq-pick:active { transform: scale(.985); }
  .svq-btn:active { transform: translateY(1px); }
}

/* Rubber-band scrolling exposes the page behind a full-bleed stage. */
.svq { overscroll-behavior: none; }

/* ══ Print — the 2027 guide has to survive "Save as PDF" ═════════════════ */
@media print {
  .svq { background: #fff !important; color: #000; min-height: 0; }
  .svq::before, .svq::after, .svq-foot, .svq-top { display: none !important; }
  .svq-h, .svq-qtext, .svq-summary, .svq-summary b { color: #000 !important; }
  .svq-summary { border-color: #CCC; background: #fff; }
}