:root {
  --face: #c5c5c5;
  --face-light: #e6e6e1;
  --field: #e5e4e1;
  --paper: #ffffff;
  --ink: #101010;
  --muted: #565656;
  --line: #101010;
  --soft-line: #c8c8c3;
  --blue: #1010ff;
  --praxis-blue: #1f9cf0;
  --red: #d90022;
  --amber: #ffc962;
  --amber-ink: #795000;
  --green: #2f9229;
  /* Both keep the established ~41.7ms (24fps) frame grid, but commit on frame
     one (jump-start) instead of idling a frame first. Animated distances are
     sized so every frame lands on a whole pixel: 2 frames => 2px, 4 frames => 4px. */
  --motion-fast: 83.333ms steps(2, jump-start);
  --motion-standard: 350ms steps(4, jump-start);
  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--field);
  color: var(--ink);
  font-family: var(--sans);
  scrollbar-gutter: stable both-edges;
  scroll-behavior: auto;
}

body {
  min-width: 0;
  min-height: 100vh;
  margin: 0;
  background: var(--face-light);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

button,
a,
input {
  font: inherit;
}

a {
  color: inherit;
}

button,
label,
a {
  -webkit-tap-highlight-color: transparent;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--blue);
  font-family: var(--mono);
  font-size: 0.78rem;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.page-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 16px auto;
}

body[data-view="intro"] .page-shell,
body[data-view="question"] .page-shell {
  min-height: calc(100svh - 32px);
}

.quiz-shell {
  position: relative;
  display: flex;
  overflow: hidden;
  min-height: min(718px, calc(100svh - 32px));
  flex-direction: column;
  background: var(--paper);
}

/* The shell frame is drawn as an overlay rather than a border so the --field
   brandbar elements can sit on top of it and notch it out at the page edges. */
.quiz-shell::before {
  position: absolute;
  z-index: 5;
  border: 1px solid var(--ink);
  content: "";
  inset: 0;
  pointer-events: none;
}

body[data-view="intro"] .quiz-shell,
body[data-view="question"] .quiz-shell {
  height: calc(100svh - 32px);
}

.quiz-brandbar {
  display: flex;
  overflow: hidden;
  min-height: 47px;
  flex: 0 0 47px;
  align-items: center;
  justify-content: space-between;
  padding: 0px;
  border-bottom: 1px solid var(--line);
  background: var(--field);
}

.praxis-wordmark {
  position: relative;
  z-index: 6;
  display: inline-flex;
  align-self: stretch;
  align-items: center;
  padding-inline: 9px;
  border-right: 1px solid var(--ink);
  background: var(--field);
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  text-decoration: none;
}

.praxis-mark,
.quiz-mark {
  display: inline-flex;
  block-size: 28px;
  align-items: center;
}

.praxis-mark {
  padding-inline: 4px;
  border: 1px solid var(--praxis-blue);
  border-right: 0;
  border-radius: 4px 0 0 4px;
  background: var(--paper);
  color: var(--praxis-blue);
  font-weight: bold;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}

.quiz-mark {
  padding-inline: 6px;
  border: 0;
  background: var(--blue);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: normal;
  letter-spacing: 0;
}

.praxis-mark:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.praxis-mark:focus-visible {
  outline-color: var(--paper);
  outline-offset: -3px;
}

.brandbar-note,
.brandbar-note-short,
.brandbar-path,
.brandbar-progress,
.eyebrow,
.section-number,
.preview-label,
.progress-copy,
.result-kicker p {
  font-family: var(--mono);
  text-transform: uppercase;
}

.brandbar-note,
.brandbar-note-short,
.brandbar-path,
.brandbar-progress {
  position: relative;
  z-index: 6;
  align-self: flex-start;
  padding: 4px;
  border: 1px solid var(--ink);
  background: var(--field);
  color: var(--ink);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}

/* Mobile slots sit inside the bar rather than notching the shell frame: no
   border of their own, centred vertically, and below the frame overlay so it
   draws over them. The desktop note keeps its border and z-index. */
.brandbar-note-short,
.brandbar-path,
.brandbar-progress {
  z-index: 0;
  display: none;
  align-self: center;
  border: 0;
  padding-right: 8px;
}

/* One cell per question, mirroring the segmented progress track. */
.brandbar-progress {
  gap: 2px;
}

.brandbar-progress i {
  display: block;
  width: 7px;
  height: 12px;
  border: 1px solid var(--blue);
  background: var(--paper);
}

.brandbar-progress i.is-done {
  background: var(--blue);
}

#app {
  min-height: 0;
  flex: 1;
}

.intro-layout {
  display: grid;
  min-height: 100%;
  grid-template-columns: minmax(0, 1.55fr) minmax(290px, 0.72fr);
}

.intro-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 4.5vw, 4.25rem);
}

.eyebrow,
.section-number,
.preview-label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--paper);
  background: var(--blue);
  padding: 4px;
}

/* Pixel marks, both on a 12px box sized to the 12px kicker text so every edge
   lands on a whole pixel. Painted in currentColor, so they pick up --paper on
   the blue eyebrow block and --result-accent in the result kicker. */
.eyebrow::before,
.result-symbol {
  width: 12px;
  height: 12px;
  flex: none;
}

/* Quad: four 5px blocks with a 2px gutter. */
.eyebrow::before {
  background:
    linear-gradient(currentColor 0 0) 0 0 / 5px 5px no-repeat,
    linear-gradient(currentColor 0 0) 100% 0 / 5px 5px no-repeat,
    linear-gradient(currentColor 0 0) 0 100% / 5px 5px no-repeat,
    linear-gradient(currentColor 0 0) 100% 100% / 5px 5px no-repeat;
  content: "";
}

/* Plus: two 4px bars crossing on a 4:4:4 grid. */
.result-symbol {
  background:
    linear-gradient(currentColor 0 0) 4px 0 / 4px 12px no-repeat,
    linear-gradient(currentColor 0 0) 0 4px / 12px 4px no-repeat;
}

h1,
h2,
p {
  text-wrap: pretty;
}

h1,
h2 {
  margin: 0;
}

.intro-copy h1 {
  max-width: 720px;
  margin-top: 1rem;
  font-family: var(--serif);
  font-size: clamp(3.2rem, 5.3vw, 4.85rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.93;
}

.lede {
  max-width: 670px;
  margin: 1.25rem 0 0;
  color: var(--ink);
  font-size: clamp(0.94rem, 1.25vw, 1.05rem);
  line-height: 1.55;
}

.intro-actions,
.result-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.25rem;
}

.duration {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.7rem;
  display: none;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 42px;
  padding: 0.65rem 1rem;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  /* Geometry moves, paint snaps. */
  transition:
    transform var(--motion-fast),
    box-shadow var(--motion-fast);
}

.button-primary {
  border-color: var(--blue);
  background: var(--paper);
  box-shadow: 3px 3px 0 var(--blue);
  color: var(--blue);
}

.button:not(:disabled):active {
  transition-duration: 0s;
  transform: translate(2px, 2px);
}

.button-primary:not(:disabled):active {
  box-shadow: 1px 1px 0 var(--ink);
}

.button-primary:disabled {
  border-color: #8b8b87;
  background: #8b8b87;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.6;
}

.button-quiet {
  border-color: var(--field);
  background: var(--field);
}

.path-preview {
  position: relative;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.75rem, 3vw, 3rem);
  border-left: 1px solid var(--line);
  background: var(--field);
}

.path-preview::before {
  position: absolute;
  top: -150px;
  right: -135px;
  width: 290px;
  height: 290px;
  border: 1px solid #c0c0bc;
  border-radius: 50%;
  content: "";
}

.path-preview ol {
  position: relative;
  z-index: 1;
  margin: 0 0 1rem;
  padding: 0;
  border: 1px solid var(--blue);
  border-bottom: 0;
  list-style: none;
}

.preview-path {
  display: grid;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--blue);
  grid-template-columns: 30px 1fr;
}

.preview-path span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid currentColor;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
}

.preview-path strong {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 400;
}

/* Temporarily flattened to one accent — restore --red/--amber-ink/--green
   on the individual rules to bring the per-path colours back. */
.preview-blue,
.preview-red,
.preview-amber,
.preview-green {
  padding: 14px;
  background: var(--paper);
  color: var(--blue);
}

.question-view {
  height: 100%;
  min-height: 0;
  padding: clamp(1.5rem, 3.5vw, 3rem) clamp(1.25rem, 7vw, 6rem);
}

.progress-region,
.question-card {
  max-width: 900px;
  margin-right: auto;
  margin-left: auto;
}

.progress-copy {
  display: flex;
  justify-content: space-between;
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: normal;
  letter-spacing: 0.08em;
}

.progress-track {
  position: relative;
  overflow: hidden;
  height: 6px;
  margin-top: 0.55rem;
  border: 1px solid var(--blue);
  background: var(--paper);
}

/* Cell dividers, drawn over the fill. --progress-steps is set inline from the
   question count; the fallback keeps the bar sane if that ever goes missing. */
.progress-track::after {
  position: absolute;
  background: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc(100% / var(--progress-steps, 7) - 1px),
    var(--blue) calc(100% / var(--progress-steps, 7) - 1px),
    var(--blue) calc(100% / var(--progress-steps, 7))
  );
  content: "";
  inset: 0;
  pointer-events: none;
}

/* Advances a whole cell at a time -- no interpolation. */
.progress-track span {
  display: block;
  height: 100%;
  background: var(--blue);
}

.question-card {
  margin-top: clamp(1.6rem, 3.2vh, 2.5rem);
}

.question-card fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.question-title {
  max-width: 840px;
  padding: 0;
  font-family: var(--serif);
  font-size: clamp(2rem, 3.4vw, 3.15rem);
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.answer-grid {
  display: grid;
  gap: 0.6rem;
  margin-top: clamp(1rem, 2.4vh, 1.75rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.answer-option {
  cursor: pointer;
}

.answer-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.option-content {
  display: grid;
  align-items: center;
  min-height: 82px;
  padding: 0.85rem 1rem;
  border: 1px solid var(--soft-line);
  background: var(--paper);
  grid-template-columns: 30px 1fr;
  gap: 0.8rem;
  font-size: 0.9rem;
  line-height: 1.4;
  transition: transform var(--motion-fast);
}

.option-letter {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--soft-line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.7rem;
}

.answer-option:hover .option-content {
  border-color: var(--line);
  transform: translateY(-2px);
}

.answer-option input:focus-visible + .option-content {
  outline: 2px dotted var(--blue);
  outline-offset: 3px;
}

.answer-option input:checked + .option-content {
  border-color: var(--blue);
  background: var(--blue);
  box-shadow: inset 4px 0 0 var(--blue);
  color: var(--paper);
  transition: transform var(--motion-fast);
}

.answer-option input:checked + .option-content .option-letter {
  border-color: var(--paper);
  background: var(--blue);
  color: var(--paper);
}

.answer-option:hover .option-content {
  /* Enter immediately; the resting or checked state controls the animated exit. */
  transition-duration: 0s;
}

.question-actions {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(1rem, 2.5vh, 1.6rem);
  padding-top: clamp(0.8rem, 2vh, 1.2rem);
  border-top: 1px solid var(--soft-line);
}

/* Temporarily flattened to one accent — see .preview-* above. */
.result-view,
.result-red,
.result-amber,
.result-green {
  --result-accent: var(--blue);
}

.result-hero {
  padding: clamp(2.5rem, 5vw, 5rem);
  border-bottom: 1px solid var(--line);
  box-shadow: inset 6px 0 0 var(--result-accent);
  background: var(--paper);
}

.result-kicker {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--result-accent);
}

.result-kicker p {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
}

.result-hero h1 {
  max-width: 950px;
  margin-top: 1rem;
  font-family: var(--serif);
  font-size: clamp(2.8rem, 6vw, 5.6rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.95;
}

.result-description {
  max-width: 750px;
  margin: 1.15rem 0 0;
  color: var(--ink);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.55;
}

.result-story-grid {
  display: grid;
  border-bottom: 1px solid var(--line);
  grid-template-columns: minmax(0, 1.1fr) minmax(330px, 0.9fr);
}

/* width: 100% is load-bearing. aspect-ratio resolves in whichever axis is left
   auto, so with a definite min-height and an auto width it derived width from
   height (360 * 16/9 = 640px) and overflowed the grid track, painting the black
   placeholder over the fit-card's black body copy. Pinning the width to the
   track forces the ratio to resolve height instead. */
.video-placeholder,
.video-frame {
  width: 100%;
  min-width: 0;
  min-height: 360px;
  aspect-ratio: 16 / 9;
}

.video-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  background: var(--ink);
  color: var(--paper);
}

.play-mark {
  position: relative;
  display: grid;
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid var(--paper);
}

.play-mark::after {
  margin-left: 4px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid var(--paper);
  content: "";
}

.video-placeholder div {
  display: grid;
  gap: 0.3rem;
}

.video-placeholder strong {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
}

.video-placeholder div span {
  color: #bdbdb7;
  font-family: var(--mono);
  font-size: 0.68rem;
}

.video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.fit-card {
  padding: clamp(2.25rem, 4vw, 4rem);
  border-left: 1px solid var(--line);
}

.section-number {
  color: var(--result-accent, var(--blue));
}

.fit-card h2,
.roadmap-section h2 {
  margin-top: 0.75rem;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 2.8vw, 2.7rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.fit-card > p:not(.section-number) {
  margin: 1rem 0 0;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.65;
}

.fit-card ul {
  margin: 1.2rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--soft-line);
  list-style: none;
}

.fit-card li {
  position: relative;
  margin-top: 0.55rem;
  padding-left: 1.1rem;
  font-size: 0.82rem;
  line-height: 1.45;
}

.fit-card li::before {
  position: absolute;
  top: 0.45rem;
  left: 0;
  width: 5px;
  height: 5px;
  background: var(--result-accent);
  content: "";
}

.roadmap-section {
  padding: clamp(2.75rem, 5vw, 5rem);
  background: var(--field);
}

.section-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.section-heading-row > p {
  max-width: 350px;
  margin: 0 0 0.2rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.course-roadmap {
  display: grid;
  margin: 2.3rem 0 0;
  padding: 0;
  grid-template-columns: repeat(var(--course-count, 6), minmax(140px, 1fr));
  list-style: none;
}

.course-roadmap li {
  position: relative;
  min-width: 0;
}

.course-roadmap li:not(:last-child)::after {
  position: absolute;
  z-index: 2;
  top: 30px;
  right: -7px;
  width: 14px;
  height: 14px;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: var(--field);
  transform: rotate(45deg);
  content: "";
}

.course-roadmap a {
  display: flex;
  min-height: 200px;
  height: 100%;
  flex-direction: column;
  padding: 1.1rem;
  border: 1px solid var(--line);
  border-right: 0;
  background: var(--paper);
  text-decoration: none;
  transition:
    transform var(--motion-fast),
    box-shadow var(--motion-fast);
}

.course-roadmap li:last-child a {
  border-right: 1px solid var(--line);
}

.course-roadmap a:hover {
  z-index: 3;
  /* 4px rather than 3px so the exit resolves at a whole 2px per frame. */
  box-shadow: 4px 4px 0 var(--result-accent);
  color: var(--result-accent);
  transition-duration: 0s;
  transform: translate(-2px, -2px);
}

.course-number {
  color: var(--result-accent);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
}

.course-title {
  margin-top: 0.8rem;
  font-family: var(--serif);
  font-size: clamp(0.98rem, 1.4vw, 1.2rem);
  line-height: 1.22;
}

.course-link-label {
  margin-top: auto;
  padding-top: 0.8rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* The label sets its own colour, so it needs its own hover rule -- the accent
   on the parent anchor can't reach it by inheritance. */
.course-roadmap a:hover .course-link-label,
.course-roadmap a:focus-visible .course-link-label {
  color: var(--result-accent);
  text-decoration: underline;
}

.membership-link {
  color: var(--blue);
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 700;
  text-underline-offset: 3px;
}

.result-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2rem;
  padding: 1.6rem clamp(2rem, 5vw, 5rem);
  border-top: 1px solid var(--line);
}

/* A top-down wipe in four hard bands rather than a fade, so content is never
   drawn semi-transparent. `backwards` (not `both`) so the clip is dropped once
   the animation finishes -- holding inset(0) would clip descendant shadows. */
.view-enter {
  animation: view-in var(--motion-standard) backwards;
}

@keyframes view-in {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

:focus-visible {
  outline: 2px dotted var(--blue);
  outline-offset: 3px;
}

[data-focus-heading]:focus {
  outline: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  border: 0;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@media (min-width: 901px) {
  body[data-view="intro"],
  body[data-view="question"] {
    height: 100svh;
    min-height: 0;
    overflow: hidden;
  }
}

@media (max-width: 900px) {
  body[data-view="intro"] .quiz-shell,
  body[data-view="question"] .quiz-shell {
    height: auto;
  }

  .intro-layout {
    grid-template-columns: 1fr;
  }

  .path-preview {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .path-preview ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
  }

  .result-story-grid {
    grid-template-columns: 1fr;
  }

  .fit-card {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .course-roadmap {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .course-roadmap li:nth-child(3n) a,
  .course-roadmap li:last-child a {
    border-right: 1px solid var(--line);
  }

  .course-roadmap li:nth-child(3n)::after {
    display: none;
  }

  .course-roadmap li:nth-child(n + 4) a {
    border-top: 0;
  }
}

@media (max-width: 700px) {
  html {
    scrollbar-gutter: auto;
  }

  .page-shell {
    width: min(100% - 18px, 1180px);
    margin: 9px auto;
  }

  .quiz-shell {
    min-height: 0;
  }

  /* The full note doesn't fit, so the bar carries a shortened tagline instead --
     and swaps to the question counter while the quiz is running. */
  .brandbar-note {
    display: none;
  }

  body[data-view="intro"] .brandbar-note-short,
  body[data-view="result"] .brandbar-path {
    display: block;
  }

  body[data-view="question"] .brandbar-progress {
    display: flex;
  }

  .quiz-brandbar {
    min-height: 43px;
    flex-basis: 43px;
  }

  .intro-copy {
    padding: 2.75rem 1.25rem;
  }

  .intro-copy h1 {
    font-size: clamp(3rem, 16vw, 4.6rem);
  }

  .path-preview {
    padding: 2rem 1.25rem;
  }

  .path-preview ol {
    display: block;
    margin: 0 0 1.1rem;
  }

  /* At 375x667 the answers overflow a shell that is pinned to the viewport and
     can't scroll, so the actions end up clipped. Let the shell grow and the page
     scroll instead, then keep the buttons pinned to the bottom of the viewport
     so they're reachable without scrolling at all. */
  body[data-view="question"] .quiz-shell {
    overflow: visible;
    height: auto;
  }

  .question-view {
    height: auto;
    padding: 1.6rem 1rem;
  }

  .question-actions {
    position: sticky;
    bottom: 0;
    padding-bottom: 1rem;
    background: var(--paper);
  }

  .question-card {
    margin-top: 1.75rem;
  }

  .answer-grid {
    grid-template-columns: 1fr;
    margin-top: 1.35rem;
  }

  .option-content {
    min-height: 76px;
  }

  .question-actions,
  .result-footer,
  .section-heading-row {
    align-items: stretch;
    flex-direction: column;
  }

  .question-actions {
    flex-direction: row;
  }

  .question-actions .button {
    flex: 1;
  }

  .result-hero {
    padding: 3rem 1.25rem;
    box-shadow: inset 4px 0 0 var(--result-accent);
  }

  .result-hero h1 {
    font-size: clamp(2.8rem, 14vw, 4.7rem);
  }

  .video-placeholder,
  .video-frame {
    min-height: 230px;
  }

  .fit-card,
  .roadmap-section {
    padding: 2.5rem 1.25rem;
  }

  .section-heading-row > p {
    margin-top: 0.8rem;
  }

  .course-roadmap {
    grid-template-columns: 1fr;
    margin-top: 1.75rem;
  }

  .course-roadmap a {
    min-height: 0;
    padding: 1.1rem 1.1rem 1.1rem 3.8rem;
    border-top: 0;
    border-right: 1px solid var(--line);
  }

  .course-roadmap li:first-child a {
    border-top: 1px solid var(--line);
  }

  .course-roadmap li:not(:last-child)::after {
    top: auto;
    right: 50%;
    bottom: -7px;
    display: block;
    transform: translateX(50%) rotate(135deg);
  }

  .course-number {
    position: absolute;
    top: 1.2rem;
    left: 1.1rem;
  }

  .course-title {
    margin-top: 0;
  }

  .course-link-label {
    margin-top: 0.55rem;
  }

  .result-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .membership-link {
    text-align: center;
  }

  .result-footer {
    padding: 1.6rem 1.25rem;
  }
}

@media (max-width: 430px) {
  .quiz-mark {
    display: none;
  }

  /* The base rule drops the right border so the badge butts against .quiz-mark.
     That's hidden here, so the badge needs closing off again. */
  .praxis-mark {
    border-right: 1px solid var(--praxis-blue);
    border-radius: 4px;
  }

  .progress-copy span:last-child {
    display: none;
  }

  .question-actions {
    flex-direction: column-reverse;
  }

  .question-actions .button {
    width: 100%;
  }

  .video-placeholder {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}


p.preview-label {
    padding: 4px;
    background: var(--blue);
    color: var(--paper);
    padding-left: 18px;
}