/* ==========================================================================
   Project brief (/brief) — one question per screen. Loads after theme.css, so
   every colour mixes from the theme tokens and follows light / dark.
   House style: Archivo, IBM Plex Mono caps labels with the accent square,
   pill buttons, underlined fields, terracotta for numbers and picks.
   Written phone first; wider screens add to it.
   ========================================================================== */
.brief-page {
  --b-col: 720px;                       /* the one content column */
  --gutter: 24px;
  --b-radius: 4px;
  --b-line: var(--ink-line-15);
  --b-line-strong: color-mix(in srgb, var(--ink) 34%, transparent);
  --b-hover: color-mix(in srgb, var(--ink) 4%, var(--bg));
  --b-card: color-mix(in srgb, var(--bg) 94%, transparent);   /* lets the background line art show through, faintly */
  --b-picked: color-mix(in srgb, var(--accent) 13%, var(--bg));
  --b-stone: color-mix(in srgb, var(--accent) 5%, color-mix(in srgb, var(--ink) 4%, var(--bg)));
  --b-error: color-mix(in srgb, #c0432b 82%, var(--ink));
  --b-thumb: color-mix(in srgb, var(--bg) 35%, #fff);
  --b-thumb-line: color-mix(in srgb, var(--ink) 22%, transparent);
  --b-title: clamp(24px, 1.6vw + 17px, 38px);
  --b-title-xl: clamp(40px, 3.6vw + 22px, 72px);
  --b-lede: clamp(17px, 0.3vw + 16px, 19px);
  --b-figure: clamp(56px, 3vw + 42px, 80px);
  --b-answer: clamp(22px, 1vw + 18px, 30px);
  --art-tint: color-mix(in srgb, var(--accent) 26%, var(--bg));
  --art-muted: color-mix(in srgb, var(--ink) 38%, transparent);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
}
:root[data-theme="dark"] .brief-page {
  --b-picked: color-mix(in srgb, var(--accent) 17%, var(--bg));
  --b-stone: color-mix(in srgb, var(--ink) 6%, var(--bg));
  --b-error: #ff9a8a; --b-thumb: var(--ink); --b-thumb-line: var(--ink);
  --art-tint: color-mix(in srgb, var(--accent) 55%, color-mix(in srgb, var(--ink) 30%, var(--bg)));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .brief-page {
    --b-picked: color-mix(in srgb, var(--accent) 17%, var(--bg));
    --b-stone: color-mix(in srgb, var(--ink) 6%, var(--bg));
    --b-error: #ff9a8a; --b-thumb: var(--ink); --b-thumb-line: var(--ink);
    --art-tint: color-mix(in srgb, var(--accent) 55%, color-mix(in srgb, var(--ink) 30%, var(--bg)));
  }
}
@media (min-width: 961px) { .brief-page { --gutter: 48px; } }

.brief-page .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.brief-page .icon { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* --------------------------------------------------------------------------
   Header: the site's own header. Progress is its bottom line, in terracotta.
   -------------------------------------------------------------------------- */
.brief-page .site-header { position: sticky; }
.brief-page .site-nav .brief-exit { display: inline-block; }
.brief-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none; }
.brief-bar[hidden] { display: none; }
.brief-bar::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--done, 0%);
  background: var(--accent); transition: width 0.5s var(--ease-out);
}
@media (max-width: 480px) {
  .brief-page .header-inner { gap: 16px; }
  .brief-page .brand-name { display: none; }
}

/* --------------------------------------------------------------------------
   Stage: one screen at a time, centred in the window when it fits
   -------------------------------------------------------------------------- */
.brief { flex: 1; display: flex; flex-direction: column; }
.brief-stage {
  flex: 1; display: flex; flex-direction: column;
  width: 100%; max-width: calc(var(--b-col) + 2 * var(--gutter)); margin: 0 auto;
  padding: 36px var(--gutter) 104px;
}
.brief-screen { display: flex; flex-direction: column; }
/* Wider screens centre each question in the window; phones keep it at the top so the
   keyboard opening doesn't move it */
@media (min-width: 720px) and (min-height: 560px) { .brief-screen { margin: auto 0; } }
.brief-screen > * { margin: 0; }
.brief-screen.is-leaving { pointer-events: none; }
@media (min-width: 961px) { .brief-stage { padding-top: 56px; padding-bottom: 112px; } }

/* Section label: the site's eyebrow */
.brief-eyebrow {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px !important;
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-muted);
}
.brief-eyebrow-dot { width: 9px; height: 9px; background: var(--accent); flex: none; }

/* The question, with its number in terracotta */
.brief-title {
  position: relative; font-size: var(--b-title); line-height: 1.15; letter-spacing: -0.022em; font-weight: 600;
  text-wrap: balance;
}
.brief-title:focus { outline: none; }
.q-num {
  display: inline-flex; align-items: center; gap: 5px; margin-right: 10px; vertical-align: 0.2em;
  font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.q-num .icon { width: 13px; height: 13px; stroke-width: 1.8; }
/* Wide screens: the number hangs in the margin, centred on the first line */
@media (min-width: 1100px) {
  .q-num {
    position: absolute; right: 100%; top: 0; height: calc(var(--b-title) * 1.15);
    margin-right: 20px; vertical-align: baseline;
  }
}
.brief-title-xl { font-size: var(--b-title-xl); line-height: 1; letter-spacing: -0.035em; max-width: 14ch; }
.brief-hint {
  margin-top: 12px !important; max-width: 58ch; text-wrap: pretty;
  font-size: var(--b-lede); line-height: 1.5; color: var(--ink-muted-65);
}
.brief-lede { margin-top: 20px !important; max-width: 46ch; text-wrap: pretty; font-size: var(--b-lede); line-height: 1.5; color: var(--ink-muted-65); }
.brief-aside { margin: 20px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink-muted-65); }
.brief-lede a, .brief-aside a { text-decoration: underline; text-underline-offset: 3px; }
.brief-link {
  padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
  font: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.brief-link:hover { color: var(--ink); }

/* Line drawings on the welcome and thank-you screens */
.brief-art { margin-bottom: 36px !important; color: var(--ink); }
.art-lineup { display: block; width: 100%; max-width: 460px; height: auto; }
@media (min-width: 961px) { .brief-art { margin-bottom: 48px !important; } }

/* Background line art: two wireframe globules in terracotta hairlines, behind everything */
.brief-ambient { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; color: var(--accent); }
.brief, .brief-footer { position: relative; z-index: 1; }
.ambient { position: absolute; display: block; height: auto; overflow: visible; transition: transform 1.4s var(--ease-out); }
.ambient * { fill: none; stroke: currentColor; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.ambient-a {
  --size: 88vw; width: var(--size); top: 48px; right: calc(var(--size) * -0.6); opacity: 0.24;
  transform: rotate(calc(-28deg + var(--brief-turn, 0) * 3deg));
}
.ambient-b {
  --size: 60vw; width: var(--size); bottom: calc(var(--size) * -0.5); left: calc(var(--size) * -0.5); opacity: 0.2;
  transform: rotate(calc(52deg - var(--brief-turn, 0) * 2deg));
}
@media (min-width: 961px) {
  .ambient-a { --size: min(44vw, 600px); top: 14vh; right: calc(var(--size) * -0.46); opacity: 0.4; }
  .ambient-b { --size: min(30vw, 400px); bottom: calc(var(--size) * -0.45); left: calc(var(--size) * -0.4); opacity: 0.34; }
}

/* Line drawings: one ink line, terracotta for the closure or the product */
.art { overflow: visible; }
.art * { fill: none; stroke: currentColor; stroke-width: 1.3px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.art .a { fill: var(--accent); }
.art .t { fill: var(--art-tint); }
.art .clear { fill: color-mix(in srgb, var(--art-tint) 55%, transparent); }
.art .m { fill: var(--accent); stroke: none; }
.art .d { stroke: var(--art-muted); stroke-dasharray: 2 3; }
.art .g { stroke: var(--art-muted); }
.art .shine { stroke: var(--art-muted); }

/* --------------------------------------------------------------------------
   Fields
   -------------------------------------------------------------------------- */
.brief-fields { display: flex; flex-direction: column; gap: 28px; margin-top: 28px; }
@media (min-width: 961px) { .brief-fields { margin-top: 36px; } }
.brief-field { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.brief-label { margin: 0; font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--ink-muted); }
.brief-error { margin: 0; font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--b-error); }
.brief-error:empty { display: none; }

/* Several fields on one screen: contact details in two columns, text boxes stacked */
.brief-fields-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.brief-fields-stack { gap: 28px; }
@media (min-width: 640px) {
  .brief-fields-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 24px; }
  .brief-fields-grid .brief-field-consent { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Choice cards: a lettered key, the label, a tick when picked
   -------------------------------------------------------------------------- */
.choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 560px) { .choices-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

.choice, .scale-step, .picture {
  position: relative; cursor: pointer; border: 1px solid var(--b-line); border-radius: var(--b-radius); background: var(--b-card);
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.choice { display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 12px 14px; }
.choice input, .scale-step input, .picture input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.choice-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.choice-label { font-size: 17px; font-weight: 500; line-height: 1.35; }
.choice-note { font-size: 15px; line-height: 1.45; color: var(--ink-muted-65); }
.choices-notes .choice { align-items: flex-start; padding-top: 15px; padding-bottom: 15px; }
.choices-notes .choice .icon-check { margin-top: 1px; }

.choice-key {
  flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px;
  border: 1px solid var(--b-line-strong); border-radius: 3px; background: var(--bg);
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500; line-height: 1; color: var(--ink);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.choice .icon-check, .scale-step .icon-check {
  flex: none; width: 18px; height: 18px; margin-left: auto; stroke-width: 2;
  opacity: 0; transform: scale(0.6); transition: opacity 0.15s ease, transform 0.2s var(--ease-out);
}

@media (hover: hover) {
  .choice:hover, .scale-step:hover, .picture:hover { background: var(--b-hover); border-color: var(--b-line-strong); }
  .choice:hover .choice-key, .scale-step:hover .choice-key, .picture:hover .choice-key { border-color: var(--ink); }
}
.choice:has(input:checked), .scale-step:has(input:checked), .picture:has(input:checked) {
  background: var(--b-picked); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent);
}
input:checked ~ .choice-key, input:checked ~ .picture-foot .choice-key { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
input:checked ~ .icon-check { opacity: 1; transform: none; }
.choice:has(input:focus-visible), .scale-step:has(input:focus-visible), .picture:has(input:focus-visible) {
  outline: 2px solid var(--ink); outline-offset: 2px;
}
.is-invalid .choice, .is-invalid .scale-step, .is-invalid .picture { border-color: color-mix(in srgb, var(--b-error) 55%, transparent); }

/* "Which other?" under the cards */
.choice-other { display: flex; flex-direction: column; gap: 6px; max-width: 420px; margin-top: 6px; }
.choice-other[hidden] { display: none; }

/* Picture cards: a drawing on a stone panel, the key and label beneath */
.pictures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) {
  .pictures { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .pictures .picture-art { aspect-ratio: 3 / 2; }
}
.picture { display: flex; flex-direction: column; overflow: hidden; }
.picture-art {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--b-stone); color: var(--ink); transition: background-color 0.15s ease;
}
/* Out of the flow, so the drawing can't stretch the panel */
.picture-art .art { position: absolute; left: 50%; bottom: 0; height: 96%; width: auto; transform: translateX(-50%); }
.picture:has(input:checked) .picture-art { background: color-mix(in srgb, var(--accent) 9%, var(--bg)); }
.picture-foot { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 12px; border-top: 1px solid var(--b-line); }
.picture:has(input:checked) .picture-foot { border-top-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.picture .icon-check {
  position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; padding: 4px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); stroke-width: 2.2;
  opacity: 0; transform: scale(0.6); transition: opacity 0.15s ease, transform 0.2s var(--ease-out);
}
@media (max-width: 400px) { .picture-foot .choice-label { font-size: 16px; } .picture-foot { gap: 10px; padding: 10px; } }

/* Cost scale: a row of bands from low to high; phones get a list */
.scale { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.scale-step { display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 12px 14px; }
.scale-label { flex: 1; min-width: 0; }
.scale-ends { display: none; }
.scale-group .choice-aside { margin-top: 8px; }
@media (min-width: 640px) {
  .scale { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
  .scale-step {
    flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 18px;
    min-height: 112px; padding: 14px; border-radius: 0; margin-left: -1px;
  }
  .scale-step:first-child { margin-left: 0; border-radius: var(--b-radius) 0 0 var(--b-radius); }
  .scale-step:last-child { border-radius: 0 var(--b-radius) var(--b-radius) 0; }
  .scale-step:hover, .scale-step:has(input:checked), .scale-step:has(input:focus-visible) { z-index: 1; }
  .scale-step .icon-check { position: absolute; top: 15px; right: 14px; }
  .scale-step .choice-label { font-size: 16px; }
  .scale-ends {
    display: flex; align-items: center; gap: 12px; margin-top: 12px;
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted);
  }
  .scale-ends::before { content: ""; order: 1; flex: 1; height: 1px; background: var(--b-line); }
  .scale-ends span:last-child { order: 2; }
  .scale-group .choice-aside { margin-top: 24px; width: calc(40% - 1px); }
}

/* --------------------------------------------------------------------------
   Typed answers: an underline, as on the homepage form
   -------------------------------------------------------------------------- */
.brief-page .input {
  display: block; width: 100%; margin: 0; padding: 8px 0 10px;
  font-family: Archivo, sans-serif; font-size: 18px; line-height: 1.4; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--b-line-strong); border-radius: 0;
  outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.brief-page .input:focus { border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.brief-page .input::placeholder { color: color-mix(in srgb, var(--ink) 36%, transparent); }
.brief-page .input[aria-invalid="true"] { border-bottom-color: var(--b-error); }
.brief-page .input-lg { font-size: var(--b-answer); padding: 6px 0 12px; letter-spacing: -0.01em; }
.brief-page .input-area { resize: none; overflow: hidden; min-height: calc(1.4em + 20px); }
.brief-counter { align-self: flex-end; font-size: 13px; line-height: 1.4; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.brief-counter:empty { display: none; }

/* Date: Day / Month / Year */
.date { display: flex; align-items: flex-end; gap: 10px; }
.date-part { display: flex; flex-direction: column; gap: 4px; }
.brief-page .date-input { font-variant-numeric: tabular-nums; text-align: left; }
.brief-page .date-d, .brief-page .date-m { width: 2.7em; }
.brief-page .date-y { width: 4.4em; }
.date-sep { padding-bottom: 12px; font-size: var(--b-answer); line-height: 1.4; color: var(--ink-muted); }

/* Phone: the country code is a real select, drawn as just "+61" */
.phone { display: flex; align-items: stretch; gap: 14px; }
.phone-dial {
  position: relative; flex: none; display: flex; align-items: center; gap: 6px; padding: 8px 0 10px;
  border-bottom: 1px solid var(--b-line-strong); font-size: 18px; line-height: 1.4; font-variant-numeric: tabular-nums;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.phone-dial .icon { width: 14px; height: 14px; color: var(--ink-muted); }
.phone-select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.phone-dial:focus-within { border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.phone-dial:has(select:focus-visible) { outline: 2px solid var(--ink); outline-offset: 4px; }
.phone .input { flex: 1; min-width: 0; }

/* Tick boxes: consent, and "Not sure yet" under a number */
.tick { position: relative; display: inline-flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.45; cursor: pointer; }
.tick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tick-box {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 0.5px;
  border: 1px solid var(--b-line-strong); border-radius: 3px; color: var(--accent-ink);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.tick-box .icon { width: 14px; height: 14px; stroke-width: 2.2; opacity: 0; }
.tick:hover .tick-box { border-color: var(--ink); }
.tick input:checked + .tick-box { background: var(--accent); border-color: var(--accent); }
.tick input:checked + .tick-box .icon { opacity: 1; }
.tick input:focus-visible + .tick-box { outline: 2px solid var(--ink); outline-offset: 2px; }
.tick a { text-decoration: underline; text-underline-offset: 3px; }
.is-invalid .tick-box { border-color: var(--b-error); }
.tick-unsure { align-self: flex-start; margin-top: 18px; }

/* --------------------------------------------------------------------------
   Numbers: the stepper (a figure with − and +) and the slider
   -------------------------------------------------------------------------- */
.stepper {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--b-line-strong);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.stepper:focus-within { border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.stepper-figure { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.brief-page .stepper-input {
  width: 2.2ch; min-width: 0; padding: 0; margin: 0; border: 0; background: none; outline: none; color: var(--ink);
  font-family: Archivo, sans-serif; font-size: var(--b-figure); font-weight: 400; line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stepper-unit { font-size: 20px; color: var(--ink-muted); white-space: nowrap; }
.is-unsure .stepper-unit { color: var(--ink); }
.stepper-btns { display: flex; gap: 8px; flex: none; }
.stepper-btn {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%;
  border: 1px solid var(--b-line-strong); background: none; color: var(--ink); cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.stepper-btn .icon { width: 18px; height: 18px; }
.stepper-btn:hover:not(:disabled) { border-color: var(--ink); background: var(--b-hover); }
.stepper-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.stepper-btn:disabled { opacity: 0.3; cursor: default; }

.range { --thumb: 28px; display: flex; flex-direction: column; }
.range-value {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 14px; min-height: 1em;
  font-size: var(--b-figure); font-weight: 400; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.range-unit { font-size: 20px; letter-spacing: 0; color: var(--ink-muted); }
.range.is-unsure .range-num { color: var(--ink-muted); }
.range-track { --fill: 0%; position: relative; height: 44px; margin-top: 28px; }
/* The drawn track spans the column exactly; the input is a thumb wider so the
   thumb's centre lands on the first and last tick, which sit on the column edges */
.range-track::before, .range-track::after {
  content: ""; position: absolute; left: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; pointer-events: none;
}
.range-track::before { right: 0; background: var(--b-line); }
.range-track::after { width: var(--fill); background: var(--accent); }
.range-input {
  position: absolute; z-index: 1; top: 0; left: calc(var(--thumb) / -2); width: calc(100% + var(--thumb)); height: 100%;
  -webkit-appearance: none; appearance: none; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y;
}
.range-input::-webkit-slider-runnable-track { height: 3px; background: transparent; }
.range-input::-moz-range-track { height: 3px; background: transparent; }
.range-input::-webkit-slider-thumb {
  -webkit-appearance: none; width: var(--thumb); height: var(--thumb); margin-top: calc((3px - var(--thumb)) / 2); border-radius: 50%;
  background: var(--b-thumb); border: 1px solid var(--b-thumb-line);
  box-shadow: 0 1px 2px rgba(13, 13, 13, 0.2), 0 4px 12px rgba(13, 13, 13, 0.12);
  transition: transform 0.15s ease;
}
.range-input::-moz-range-thumb {
  width: var(--thumb); height: var(--thumb); border-radius: 50%; box-sizing: border-box;
  background: var(--b-thumb); border: 1px solid var(--b-thumb-line);
  box-shadow: 0 1px 2px rgba(13, 13, 13, 0.2), 0 4px 12px rgba(13, 13, 13, 0.12);
}
.range-input:active::-webkit-slider-thumb { transform: scale(1.08); }
.range-input:focus-visible { outline: none; }
.range-input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--ink); outline-offset: 3px; }
.range-input:focus-visible::-moz-range-thumb { outline: 2px solid var(--ink); outline-offset: 3px; }
.range.is-unsure .range-track { opacity: 0.4; }
.range-ticks { display: flex; justify-content: space-between; margin-top: -10px; }
.range-ticks span { width: 1px; height: 6px; background: var(--b-line-strong); }
.range-scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Next / Send, with the Enter hint beside it
   -------------------------------------------------------------------------- */
.brief-ok { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 32px; }
.brief-page button.btn { border: 0; font-family: inherit; cursor: pointer; }
.brief-page .btn-outline { border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); background: transparent; color: var(--ink); }
.brief-page .btn-accent:hover { opacity: 1; background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }
.brief-ok .btn { min-width: 132px; transition: background-color 0.15s ease, transform 0.15s ease; }
.brief-ok .btn:active { transform: scale(0.98); }
.brief-ok .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.brief-ok-btn:disabled { opacity: 0.6; cursor: progress; }
.brief-enter { font-size: 13px; line-height: 1.4; color: var(--ink-muted); }
.brief-enter kbd { font: inherit; font-weight: 600; color: var(--ink); }
.brief-enter-extra::before { content: "\00a0\00b7\00a0 "; }
@media (max-width: 720px) { .brief-enter-extra { display: none; } }
/* Touch screens: no keyboard hints */
@media (hover: none), (pointer: coarse) { .brief-enter { display: none; } }

/* Back and forward, bottom right */
.brief-arrows {
  position: fixed; z-index: 40; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; border: 1px solid var(--b-line-strong); border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.brief-arrows[hidden] { display: none; }
.brief-arrow {
  display: grid; place-items: center; width: 46px; height: 42px; padding: 0; border: 0; background: none;
  color: var(--ink); cursor: pointer; transition: background-color 0.15s ease;
}
.brief-arrow + .brief-arrow { border-left: 1px solid var(--b-line); }
.brief-arrow .icon { width: 18px; height: 18px; stroke-width: 1.8; }
.brief-arrow:hover:not(:disabled) { background: var(--b-hover); }
.brief-arrow:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; border-radius: 999px; }
.brief-arrow:disabled { color: color-mix(in srgb, var(--ink) 25%, transparent); cursor: default; }
@media (min-width: 961px) { .brief-arrows { right: 32px; bottom: 28px; } }

/* --------------------------------------------------------------------------
   Review: question on the left, answer on the right
   -------------------------------------------------------------------------- */
.review-list { display: flex; flex-direction: column; margin-top: 40px; }
.review-section {
  margin: 40px 0 12px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; line-height: 1.4; font-weight: 400; color: var(--ink-muted);
}
.review-section:first-child { margin-top: 0; }
.review-group { border-top: 1px solid var(--ink); }
.review-row {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 12px;
  align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--ink-line-15);
}
.review-n { grid-column: 1; grid-row: 1; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--accent); font-variant-numeric: tabular-nums; }
.review-q { margin: 0; grid-column: 2; grid-row: 1; font-size: 15px; line-height: 1.45; color: var(--ink-muted); }
.review-a { margin: 0; grid-column: 2; grid-row: 2; min-width: 0; font-size: 16px; line-height: 1.45; font-weight: 500; white-space: pre-line; overflow-wrap: anywhere; }
.review-a.is-empty { font-weight: 400; color: var(--ink-muted); }
.review-row.is-missing .review-a { color: var(--b-error); }
.review-edit {
  grid-column: 3; grid-row: 1; padding: 0; border: 0; background: none; color: var(--ink-muted); cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 500; line-height: 1.45;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.review-edit:hover { color: var(--ink); }
.review-row.is-missing .review-edit { color: var(--ink); }
.brief-assure { margin-top: 28px; max-width: 52ch; }
@media (min-width: 640px) {
  .review-row { grid-template-columns: 32px minmax(0, 5fr) minmax(0, 6fr) auto; gap: 4px 24px; padding: 16px 0; }
  .review-q { grid-column: 2; grid-row: 1; }
  .review-a { grid-column: 3; grid-row: 1; }
  .review-edit { grid-column: 4; grid-row: 1; }
}

/* --------------------------------------------------------------------------
   Thank-you screen
   -------------------------------------------------------------------------- */
.brief-done .brief-title-xl { font-size: clamp(36px, 2.6vw + 22px, 60px); max-width: 17ch; }
.brief-next-steps { counter-reset: next; margin: 36px 0 0; padding: 0; list-style: none; max-width: 56ch; border-top: 1px solid var(--ink); }
.brief-next-steps li {
  counter-increment: next; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid var(--ink-line-15); font-size: var(--b-lede); line-height: 1.5;
}
.brief-next-steps li::before {
  content: counter(next, decimal-leading-zero); font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--accent);
}

/* --------------------------------------------------------------------------
   Footer: only on the welcome, thank-you and error screens
   -------------------------------------------------------------------------- */
.brief-footer {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px;
  padding: 24px var(--gutter); font-size: 13px; line-height: 1.4; color: var(--ink-muted);
}
.brief-page:has(#brief[data-view="step"]) .brief-footer,
.brief-page:has(#brief[data-view="review"]) .brief-footer { display: none; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .brief-bar::after, .choice, .scale-step, .picture, .picture-art, .choice-key, .icon-check, .tick-box,
  .stepper, .stepper-btn, .brief-ok .btn, .range-input::-webkit-slider-thumb, .ambient { transition: none !important; }
}