/* Clear Life Plans site styles for index.html, privacy.html, terms.html and 404.html.
   Colours, spacing and radii come from tokens.css (a byte copy of brand/tokens.css), which loads
   first: never write a hex value here. The dark theme is tokens.css's [data-theme="dark"], set on
   <html> by each page's inline head script when the phone prefers dark.
   Phone first at 390px with a space-4 gutter; from 768px the desktop sizes from the board
   (mockups/landing-v1.html, H1 and B1-B5). The quiz card's own rules (Q1-Q8, T1, X1-X3) are in
   the "Quiz" section at the end, next to the assets/quiz.js that builds them. */

*, *::before, *::after { box-sizing: border-box; }

/* Without the head script (JavaScript off) the page stays light, so keep the browser's own
   controls and scrollbars light too. tokens.css sets color-scheme: dark for the dark theme. */
:root:not([data-theme="dark"]) { color-scheme: light; }

html {
  background: var(--page);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--space-4);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* A column so the footer sits at the bottom of short pages (404). */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 27px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main { flex: 1 0 auto; }

h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { color: var(--heading); text-wrap: balance; }

::selection { background: var(--selected); color: var(--heading); }

/* The brand's one shadow: every control shows it on keyboard focus. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Lucide-style stroke icons: 2px at 24px, round caps and joins. */
.icon {
  flex: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.muted { color: var(--muted); }

/* ---------- Widths ---------- */

/* wide: the header bar and the legal pages (1120px puts the logo 80px in at 1280, as on the board).
   col: the one narrow column of the home page and 404, and the footer's content. */
.wrap-wide,
.col {
  width: min(1120px, 100% - 2 * var(--space-4));
  margin-inline: auto;
}

.col { width: min(760px, 100% - 2 * var(--space-4)); }

/* ---------- Header ---------- */

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap-wide {
  display: flex;
  align-items: center;
  height: 56px;
}

.logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  border-radius: var(--radius-md);
}

.logo img { width: 168px; height: auto; }

/* The primary logo on light grounds, the reversed one in the dark theme (brand book: Logo). */
.logo-dark { display: none; }
[data-theme="dark"] .logo .logo-light { display: none; }
[data-theme="dark"] .logo .logo-dark { display: block; }

@media (min-width: 768px) {
  .site-header .wrap-wide { height: 80px; }
  .logo img { width: 236px; }
}

/* ---------- Buttons ---------- */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control);
  padding: 0 var(--space-6);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  background: var(--action);
  color: var(--on-action);
  font: inherit;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn:hover,
.btn:active { background: var(--action-hover); }

@media (min-width: 768px) {
  .btn { min-height: var(--control-lg); }
}

/* ---------- Hero (H1): headline, lead line, the quiz card, the reassurance line ---------- */

.hero .col {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-block: var(--space-5) var(--space-8);
}

.hero-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Phones: the brand's title size. Desktop: display, the one desktop hero headline. */
.hero-title {
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: -0.005em;
}

/* Phones: body size. Desktop: lead. */
.hero-lead {
  font-size: 18px;
  line-height: 27px;
}

/* The quiz card. quiz.js renders into it and adds .is-live; until then it holds the space
   question 1 takes, so the sections below don't jump when it arrives. Its rules are in "Quiz". */
.quiz {
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.quiz:not(.is-live) { min-height: 392px; }

@media (min-width: 768px) {
  .hero .col {
    gap: var(--space-6);
    padding-block: var(--space-16) var(--space-8);
  }

  .hero-title {
    font-size: 48px;
    line-height: 54px;
    letter-spacing: -0.01em;
  }

  .hero-lead {
    font-size: 20px;
    line-height: 30px;
  }

  .quiz { padding: var(--space-8); }
  .quiz:not(.is-live) { min-height: 308px; }
}

/* ---------- Sections below the quiz (B1-B4) ---------- */

.section .col {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-top: var(--space-12);
}

.section:last-child .col { padding-bottom: var(--space-12); }

@media (min-width: 768px) {
  .section .col { padding-top: var(--space-16); }
  .section:last-child .col { padding-bottom: var(--space-16); }
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

@media (min-width: 768px) {
  .card { padding: var(--space-8); }
}

/* B1: how it works, a numbered sequence. */
.steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.steps li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.steps li > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid var(--heading);
  border-radius: var(--radius-full);
  color: var(--heading);
  font-size: 20px;
  font-weight: 700;
}

/* B1's step titles are h3s; T1's (in the quiz card) are paragraphs, so the colour is set here. */
.step-title {
  color: var(--heading);
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
}

/* B2: good to know. */
.facts {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.facts li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
}

.facts li + li { border-top: 1px solid var(--line); }

.facts .icon { margin-top: 2px; color: var(--heading); }

.facts strong {
  display: block;
  color: var(--heading);
  font-weight: 700;
}

/* B3: FAQ. Native <details>; faq.js adds the slide and keeps one answer open at a time. */
.faq {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.faq-item + .faq-item { border-top: 1px solid var(--line); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 64px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-lg);
  color: var(--heading);
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary .icon { transition: transform 0.2s ease; }

/* .is-closing (faq.js) turns the chevron back as soon as a close starts. */
.faq-item[open]:not(.is-closing) summary .icon { transform: rotate(180deg); }

.faq-answer { padding: 0 var(--space-5) var(--space-5); }

/* B4: back to the quiz. */
.cta-note { color: var(--muted); }

/* ---------- Footer (B5), on index, privacy, terms and 404 ---------- */

.site-footer {
  background: var(--brand);
  color: var(--on-brand);
}

.site-footer .col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-8) var(--space-12);
}

.site-footer .lockup { width: 180px; height: auto; }

.tagline {
  color: var(--on-brand-accent);
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  text-wrap: balance;
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-6);
}

.foot-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--on-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The standard ring's outer colour is the band's own colour in the light theme, so the band
   gets a ring in its text colour. */
.site-footer a:focus-visible { box-shadow: 0 0 0 3px var(--on-brand); }

.fine {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--on-brand-muted);
}

/* ---------- Legal pages (privacy.html, terms.html) ---------- */

/* Under 1024px: one column of running text. From 1024px: the text on the logo's edge and the
   "On this page" list sticky on the right. The list comes first in the source so keyboard users
   reach it first. */
.legal { padding-block: var(--space-8) var(--space-12); }

.legal-doc { max-width: 65ch; }

.legal-toc { display: none; }

@media (min-width: 1024px) {
  .legal {
    display: grid;
    grid-template-columns: minmax(0, 65ch) 18rem;
    grid-template-areas: "doc toc";
    justify-content: space-between;
    column-gap: var(--space-12);
    align-items: start;
    padding-block: var(--space-16);
  }

  .legal-doc { grid-area: doc; }

  .legal-toc {
    grid-area: toc;
    display: block;
    position: sticky;
    top: var(--space-8);
    max-height: calc(100vh - 2 * var(--space-8));
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

.legal-toc {
  padding: var(--space-4) var(--space-3) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.legal-toc-title {
  padding-inline: var(--space-3);
  color: var(--muted);
}

.legal-toc ul {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.legal-toc a {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--muted);
  font-size: 16px;
  line-height: 22px;
  text-decoration: none;
}

@media (hover: hover) {
  .legal-toc a:hover { background: var(--page); color: var(--ink); }
}

.legal-toc a[aria-current] {
  background: var(--selected);
  color: var(--heading);
  font-weight: 700;
}

.legal-doc h1 {
  font-size: 30px;
  line-height: 36px;
  letter-spacing: -0.005em;
}

.legal-date { margin-top: var(--space-2); color: var(--muted); }

.legal-doc h2 {
  margin-top: var(--space-8);
  font-size: 24px;
  line-height: 30px;
}

.legal-doc p,
.legal-doc ul,
.legal-doc blockquote { margin-top: var(--space-3); }

.legal-doc ul { padding-left: 1.2em; list-style: disc; }
.legal-doc li + li { margin-top: var(--space-2); }

.legal-doc strong { color: var(--heading); }

.legal-doc blockquote p { margin-top: 0; }

.legal-doc blockquote {
  margin-inline: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.legal-doc a {
  color: var(--action);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Page not found (404.html) ---------- */

.lost .col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding-block: var(--space-12);
}

.lost .btn { margin-top: var(--space-2); }

@media (min-width: 768px) {
  .lost .col { padding-block: var(--space-16); }
}

/* ---------- Quiz (inside the hero's .quiz card; built by assets/quiz.js) ---------- */

/* Sizes from the board's Q1-Q8 and X1-X3 artboards: a 16px gap down the card (20px on
   desktop and on the end screens), answers and boxes 56px tall (60px on desktop). */

/* While quiz.js animates the card to a new step's height, the card clips its content. */
.quiz.is-resizing { overflow: hidden; }

.qz,
.qz-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* .btn and .qz-back set a display, which would beat the hidden attribute. */
.qz [hidden] { display: none !important; }

/* Progress: Back on the left from Q2 on, the step label, then the bar. */
.qz-prog {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.qz-prog-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 24px;
}

.qz-prog-label {
  color: var(--muted);
  font-size: 15px;
  line-height: 20px;
}

/* A 44px tap target inside the 24px row: the negative margins keep the row's height. */
.qz-back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: var(--tap-min);
  margin: -10px 0 -10px -6px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--heading);
  font: inherit;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  cursor: pointer;
}

.qz-back .icon { width: 22px; height: 22px; }

.qz-track {
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--track);
  overflow: hidden;
}

.qz-fill {
  width: 0;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--action);
  transition: width 0.45s cubic-bezier(.2, .7, .2, 1);
}

/* The question: the brand's question style. Focused by quiz.js on each step, without a ring. */
.qz-title {
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
}

.qz-title:focus { outline: none; }

.qz-qgroup {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.qz-help { color: var(--muted); }

/* Answer tiles: stacked full width on phones, two columns on desktop. The chosen one gets the
   selected fill, the selected-line border and a check, so colour is never the only signal. */
.qz-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.qz-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--control);
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--control-line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.qz-option.is-on {
  background: var(--selected);
  border-color: var(--selected-line);
  color: var(--heading);
}

.qz-label { min-width: 0; }

.qz-check {
  width: 22px;
  height: 22px;
  stroke-width: 3;
  color: var(--action);
}

.qz-option:not(.is-on) .qz-check { visibility: hidden; }

/* Hover only where hover is real (touch screens leave it stuck on the last tap spot), and not
   while .is-hover-paused is on: after a step change, quiz.js holds it until the pointer moves,
   so whatever lands under a still cursor doesn't light up. */
@media (hover: hover) {
  :where(.qz-body:not(.is-hover-paused)) .qz-option:not(.is-on):hover { background: var(--page); }
}

/* The radio itself is hidden; the tile shows the focus ring. */
.qz-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.qz-option:has(.qz-input:focus-visible) { box-shadow: var(--focus-ring); }

@supports not selector(:has(*)) {
  .qz-option:focus-within { box-shadow: var(--focus-ring); }
}

/* Boxes (Q6, Q7): labels above, never inside. */
.qz-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.qz-row2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}

.qz-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.qz-field label {
  margin-bottom: 6px;
  color: var(--heading);
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
}

/* 20px text, so iOS doesn't zoom in on focus (it does under 16px). */
.qz-text {
  width: 100%;
  min-height: var(--control);
  padding: 0 14px;
  border: 2px solid var(--control-line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 20px;
  line-height: 24px;
}

.qz-text:focus {
  outline: none;
  border-color: var(--selected-line);
  box-shadow: var(--focus-ring);
}

.qz-text[aria-invalid="true"] { border-color: var(--danger); }

.qz-zip {
  font-size: 24px;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

/* Under a box: its error, or the email typo hint. Empty, it takes no room but stays in the page:
   it's a live region, and one that was display: none may not be read out when it fills.
   quiz.js slides the hint open and shut (.is-sliding clips it meanwhile). */
.qz-msg:not(:empty) { margin-top: 6px; }
.qz-msg.is-sliding { overflow: hidden; }

.qz-msg-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--danger);
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
}

.qz-msg-error .icon { width: 20px; height: 20px; margin-top: 1px; }

/* Q7b: "Did you mean …?", a suggestion rather than an error. */
.qz-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: var(--space-3) 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--page);
}

.qz-hint .icon { margin-top: 2px; color: var(--heading); }

.qz-link {
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--action);
  font: inherit;
  font-weight: 700;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  cursor: pointer;
}

/* The email field's border and fill pulse once when the hint opens, pointing at it. A colour
   fade, not motion, so it runs under reduced motion too. */
.qz-text.is-flagged { animation: qz-flag 2s ease; }

@keyframes qz-flag {
  12%, 50% {
    border-color: var(--selected-line);
    background-color: var(--selected);
  }
}

/* The board's error row (Q8b): a red border, an icon and words that say what to fix. */
.qz-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: var(--space-3) 14px;
  border: 2px solid var(--danger);
  border-radius: var(--radius-md);
  background: var(--danger-soft);
  color: var(--danger);
}

.qz-alert .icon { margin-top: 2px; }

/* Q8's status line ("We sent a new code"): the error row's shape in the typo hint's quiet
   colours. It is a live region that stays mounted (quiz.js), so while empty it takes back the
   gap the card's column puts before it instead of hiding (a hidden region may not be read out).
   The 1px border gives back its pixel in the padding, so the row matches the error row's size. */
.qz-status:empty { margin-top: calc(-1 * var(--space-4)); }

.qz-status:not(:empty) {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: calc(var(--space-3) + 1px) 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--page);
  color: var(--ink);
}

.qz-status .icon { margin-top: 2px; color: var(--heading); }

/* Q8: the code. One real input (quiz.js) lies transparent over six drawn boxes, so the phone's
   offer of the texted code, autofill and paste all go into one box; quiz.js copies its digits
   into the boxes. The box at the caret gets the focus ring while the input has focus. */
.qz-code { position: relative; }

.qz-boxes {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-2);
}

.qz-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--control-lg);
  border: 2px solid var(--control-line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--heading);
  font-size: 28px;
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.qz-code:focus-within .qz-box.is-active {
  border-color: var(--selected-line);
  box-shadow: var(--focus-ring);
}

/* Q8b: a wrong code turns every box red, the focused one too (it keeps its ring); the row above
   the button says why. */
.qz-code.is-error .qz-box,
.qz-code.is-error:focus-within .qz-box.is-active { border-color: var(--danger); }

.qz-caret {
  width: 2px;
  height: 26px;
  background: var(--heading);
  animation: qz-blink 1.1s steps(1) infinite;
}

.qz-code:not(:focus-within) .qz-caret { display: none; }

@keyframes qz-blink {
  50% { opacity: 0; }
}

/* 20px text so iOS doesn't zoom in on focus. Its text, caret, selection and any autofill tint
   are invisible: the boxes underneath show all of that. */
.qz-code-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  outline: none;
  background: transparent;
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: transparent;
  font: inherit;
  font-size: 20px;
  cursor: text;
}

.qz-code-input::selection { background: transparent; }

.qz-code-input:-webkit-autofill,
.qz-code-input:autofill {
  -webkit-text-fill-color: transparent;
  transition: background-color 600000s 0s;
}

/* The confirmed number in Q8's question, the resent note and T1, kept on one line. */
.qz-nowrap { white-space: nowrap; }

/* Resend code and Edit number, on either side under Confirm code. */
.qz-code-links {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}

.qz-code-links .qz-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

/* Resend code for 30 s after a resend. */
.qz-link[aria-disabled="true"] {
  color: var(--muted);
  text-decoration: none;
  cursor: default;
}

.qz-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Q7's consent line under the button, with Terms and Privacy as links. */
.qz-consent {
  color: var(--muted);
  font-size: 15px;
  line-height: 22px;
}

.qz-consent a {
  position: relative;
  color: var(--action);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: 4px;
}

/* 44px tap targets for these in-line links without changing the line: an invisible box around
   each. The consent links are the paragraph's last words, so theirs reaches down into the card's
   padding rather than up over the line above. The hint's suggestion sits in its own box, so
   its tap area is centred. */
.qz-consent a::after,
.qz-hint .qz-link::after {
  content: "";
  position: absolute;
  left: 50%;
  width: max(100%, var(--tap-min));
  height: var(--tap-min);
}

.qz-consent a::after {
  top: -4px;
  transform: translateX(-50%);
}

.qz-hint .qz-link { position: relative; }

.qz-hint .qz-link::after {
  top: 50%;
  transform: translate(-50%, -50%);
}

/* End screens (X1-X3): an icon, the brand's title size, and a way back. T1 shares the sizes. */
.qz-body.is-exit,
.qz-body.is-done { gap: var(--space-5); }

.qz-body.is-exit .qz-title,
.qz-body.is-done .qz-title {
  font-size: 30px;
  line-height: 36px;
  letter-spacing: -0.005em;
}

/* T1: the photo edge to edge across the card's top (the negative margins undo the card's
   padding; its corners follow the card's, inside the 1px border), the brand mark for "done",
   the title and lead, B1's numbered steps, and the one-agent line. */
.qz-photo {
  width: calc(100% + 2 * var(--space-5));
  max-width: none;
  height: 176px;
  margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) 0;
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  background: var(--line);
  object-fit: cover;
  object-position: 50% 30%;
}

.qz-done-mark img { width: 56px; height: 56px; }

.qz-done-mark .mark-dark { display: none; }
[data-theme="dark"] .qz-done-mark .mark-light { display: none; }
[data-theme="dark"] .qz-done-mark .mark-dark { display: block; }

.qz-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.qz-lead {
  font-size: 20px;
  line-height: 30px;
}

.qz-cap {
  color: var(--muted);
  font-size: 15px;
  line-height: 22px;
}

.qz-exit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--page);
  color: var(--heading);
}

.qz-exit-icon .icon { width: 28px; height: 28px; }

.btn-sec {
  border-color: var(--control-line);
  background: var(--surface);
  color: var(--heading);
}

.btn-sec:hover,
.btn-sec:active { background: var(--page); }

@media (min-width: 768px) {
  .qz,
  .qz-body { gap: var(--space-5); }

  .qz-status:empty { margin-top: calc(-1 * var(--space-5)); }

  .qz-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .qz-option,
  .qz-text { min-height: var(--control-lg); }

  /* The wider strip shows less of the photo's height, so it sits higher to keep her face in. */
  .qz-photo {
    width: calc(100% + 2 * var(--space-8));
    height: 240px;
    margin: calc(-1 * var(--space-8)) calc(-1 * var(--space-8)) 0;
    object-position: 50% 14%;
  }

  /* Six boxes of about 64px, not stretched across the desktop card. */
  .qz-code { max-width: 424px; }
}

@media (prefers-reduced-motion: no-preference) {
  .qz-body.is-entering { animation: qz-in 0.28s ease both; }

  @keyframes qz-in {
    from { opacity: 0; transform: translateY(6px); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .faq-item summary .icon,
  .qz-fill,
  .qz-option { transition: none; }

  .qz-caret { animation: none; }
}