/* StoMale R1 · responsive system 1.7.9
   Shared last-mile rules for iOS 16+, current Android browsers and fluid desktop layouts.
   This file changes presentation only: no clinical content or flow. */

html {
  min-width: 0;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 0;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
}

img, svg, video, canvas { max-width: 100%; }
button, input, select, textarea { max-width: 100%; }
button, a, summary, input, select, textarea { touch-action: manipulation; }
main, section, article, aside, header, footer, nav, form, fieldset, figure, div { min-width: 0; }

@supports (overflow: clip) {
  body { overflow-x: clip; }
}

@media (max-width: 900px) {
  /* The page header remains one compact row. Secondary links scroll instead of
     increasing the header height or forcing the CTA outside the viewport. */
  .site-header {
    width: 100%;
    min-height: 4.5rem;
    padding:
      max(.55rem, env(safe-area-inset-top))
      max(.75rem, env(safe-area-inset-right))
      .55rem
      max(.75rem, env(safe-area-inset-left));
    flex-wrap: nowrap;
  }

  .site-header nav { display: none; }
  .site-header .brand { flex: 0 1 auto; }
  .site-header .environment-pill { display: none; }
  .site-header .header-action { margin-left: auto; flex: 0 0 auto; }

  .editorial-hero {
    min-height: 0;
    padding-inline:
      max(.75rem, env(safe-area-inset-left))
      max(.75rem, env(safe-area-inset-right));
  }

  .site-footer {
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-bottom: max(2.25rem, env(safe-area-inset-bottom));
    padding-left: max(1rem, env(safe-area-inset-left));
  }

  /* App shell */
  .mobile-header {
    padding-top: max(.6rem, env(safe-area-inset-top));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-left: max(1rem, env(safe-area-inset-left));
  }

  .main {
    min-height: 100vh;
    min-height: 100svh;
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-left: max(1rem, env(safe-area-inset-left));
  }

  .bottom-nav {
    right: max(.6rem, env(safe-area-inset-right));
    bottom: max(.6rem, env(safe-area-inset-bottom));
    left: max(.6rem, env(safe-area-inset-left));
  }

  /* Reviewer surfaces: sticky desktop headers created stacked offsets on mobile. */
  .admin-header, .review-header, .lab-header {
    position: relative;
    top: auto;
    padding-top: max(.7rem, env(safe-area-inset-top));
    padding-right: max(.75rem, env(safe-area-inset-right));
    padding-left: max(.75rem, env(safe-area-inset-left));
  }

  .section-tabs { position: static; top: auto; }
}

@media (max-width: 620px) {
  :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    font-size: 1rem; /* prevents focus zoom on iOS */
  }

  :where(.button, button, summary, nav a, .header-action) { min-height: 2.75rem; }

  /* Public site */
  .hero, .page-hero, .section {
    width: 100%;
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-left: max(1rem, env(safe-area-inset-left));
  }

  .hero h1, .editorial-hero h1, .page-hero h1 {
    max-width: 100%;
    font-size: clamp(2.3rem, 11.5vw, 3.35rem);
    line-height: 1.04;
    overflow-wrap: normal;
  }

  h2 { font-size: clamp(1.9rem, 9vw, 2.65rem); }
  h1, h2, h3 { text-wrap: balance; }

  .editorial-hero {
    padding-top: 2rem;
    padding-bottom: 14.5rem;
  }

  .editorial-hero .editorial-media { height: 16.5rem; }
  .editorial-hero .editorial-media figcaption,
  .page-hero figure figcaption {
    right: max(.75rem, env(safe-area-inset-right));
    bottom: .5rem;
    width: min(78%, 23rem);
    padding: .4rem 0;
    font-size: .72rem;
    line-height: 1.35;
  }

  .page-hero {
    margin-inline: auto;
    padding-top: 2rem;
    padding-bottom: 14.5rem;
    border-radius: 0;
  }

  .page-hero figure { height: 16rem; }
  .image-story, .team-teaser {
    width: calc(100% - 1rem);
    padding: 14.5rem 1rem 2rem;
  }
  .image-story figure, .team-teaser figure { height: 17rem; }

  .recognition, .value-section, .reassurance-story, .continuity,
  .limits, .empathy-band, .soft-band, .depth-section, .professional-purpose {
    width: calc(100% - 1rem);
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .authority-strip { width: calc(100% - 1rem); }
  .hero-actions, .input-row, .callout > div:last-child { gap: .75rem; }
  .hero-actions .button, .input-row .button, .callout .button { min-height: 3.25rem; }
  .site-footer nav a, .site-footer nav button { width: 100%; justify-content: flex-start; }

  .status-dialog, .dialog, .reset-dialog {
    width: calc(100% - 1rem);
    max-height: calc(100dvh - max(1rem, env(safe-area-inset-top)) - max(1rem, env(safe-area-inset-bottom)));
    margin: auto;
    padding: 1.1rem;
    overflow: auto;
    border-radius: 1rem;
  }

  /* Assessment */
  .assessment-header {
    min-height: 4rem;
    padding:
      max(.55rem, env(safe-area-inset-top))
      max(.75rem, env(safe-area-inset-right))
      .55rem
      max(.75rem, env(safe-area-inset-left));
  }
  .assessment-header nav { margin-left: auto; }
  .assessment-header nav a { max-width: 10rem; line-height: 1.2; text-align: right; }
  .assessment-main {
    width: 100%;
    padding: 1rem max(.75rem, env(safe-area-inset-right)) 3rem max(.75rem, env(safe-area-inset-left));
  }
  .intro-panel h1, .result-heading h1 {
    max-width: 100%;
    font-size: clamp(2.3rem, 11vw, 3.1rem);
    line-height: 1.04;
  }
  .assessment-expectations { gap: 1rem; }
  .warm-card { min-height: 22rem; }
  .start-form label, .answer-list > label { min-height: 3.75rem; }
  .runner { min-height: 0; }
  .runner-rail {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .55rem .75rem;
    padding: .85rem;
    border-radius: 1rem 2rem 1rem 1rem;
  }
  .runner-rail > strong { grid-column: 1; grid-row: 1; }
  .runner-rail > span { grid-column: 2; grid-row: 1; align-self: center; white-space: nowrap; }
  .runner-rail progress { grid-column: 1 / -1; grid-row: 2; margin: 0; }
  .rail-action { grid-row: 3; min-width: 0; padding-inline: .35rem; }
  .rail-action[data-pause] { grid-column: 1; }
  .rail-action.danger { grid-column: 2; }
  .question-stage {
    padding: 1.1rem max(1rem, env(safe-area-inset-right)) 1rem max(1rem, env(safe-area-inset-left));
    border-radius: 1rem 2.5rem 1rem 1rem;
  }
  .question-meta { align-items: flex-start; flex-direction: column; gap: .2rem; }
  .question-stage legend {
    max-width: 100%;
    font-size: clamp(1.75rem, 8.4vw, 2.25rem);
    line-height: 1.14;
  }
  .question-helper { grid-template-columns: 1.75rem minmax(0, 1fr); gap: .65rem; }
  .answer-list > label { grid-template-columns: 1.4rem minmax(0, 1fr); padding: .9rem; }
  .runner-actions {
    bottom: 0;
    margin: 1rem -.2rem -.2rem;
    padding: 1rem .2rem max(.35rem, env(safe-area-inset-bottom));
  }
  .runner-actions .button { min-height: 3.15rem; flex: 1 1 8rem; }
  .result-heading, .trace-panel { gap: 1rem; }
  .result-actions { display: grid; grid-template-columns: 1fr; }
  .result-actions .button { min-height: 3.15rem; }

  /* Onboarding */
  .onboarding-body, .onboarding-layout { min-height: 100svh; }
  .onboarding-header {
    width: 100%;
    padding-right: max(.75rem, env(safe-area-inset-right));
    padding-left: max(.75rem, env(safe-area-inset-left));
  }
  .onboarding-layout { min-height: calc(100svh - 4.25rem); }
  .journey-sidebar ol { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .journey-sidebar li { min-width: 0; }
  .journey-sidebar li > span { width: 1.75rem; height: 1.75rem; }
  .stage-shell { padding-right: max(1rem, env(safe-area-inset-right)); padding-left: max(1rem, env(safe-area-inset-left)); }
  .scenario-grid button { width: 100%; min-height: 7.5rem; }
  .otp-panel > div { justify-content: space-between; gap: .25rem; }
  .otp-panel > div span { width: min(2.45rem, 13vw); }

  /* Personal area */
  .mobile-header nav {
    right: max(.75rem, env(safe-area-inset-right));
    left: max(.75rem, env(safe-area-inset-left));
    max-height: calc(100dvh - 5rem);
    overflow: auto;
  }
  .main { padding-inline: max(.75rem, env(safe-area-inset-left)); }
  .bottom-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bottom-nav a { min-width: 0; overflow-wrap: anywhere; line-height: 1.15; text-align: center; }
  .chart { max-width: 100%; overscroll-behavior-inline: contain; }

  /* BO, Lab and review */
  .admin-header, .review-header, .lab-header { flex-wrap: wrap; }
  .admin-header .mode-pill { order: 3; }
  .admin-header nav, .review-header nav, .lab-header nav {
    width: 100%;
    margin-left: 0;
    display: flex;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  .admin-header nav::-webkit-scrollbar,
  .review-header nav::-webkit-scrollbar,
  .lab-header nav::-webkit-scrollbar { display: none; }
  .admin-header nav a, .review-header nav a, .lab-header nav a { flex: 0 0 auto; }

  .admin-main, .review-main, .brand-lab main, .lab-intro { min-width: 0; }
  .admin-main, .review-main {
    width: 100%;
    padding-right: max(.75rem, env(safe-area-inset-right));
    padding-left: max(.75rem, env(safe-area-inset-left));
  }
  .section-tabs { width: 100%; overscroll-behavior-inline: contain; }
  .section-tabs a { min-height: 2.75rem; display: inline-flex; align-items: center; }
  .console-section, .module-browser, .module-detail, .feedback-register,
  .brand-workspace, .interface-workspace, .communication-workspace,
  .illustration-workspace, .release-workspace { min-width: 0; }
  .review-intro h1, .lab-intro h1 { max-width: 100%; font-size: clamp(2.3rem, 11vw, 3.15rem); }
  .browser-heading, .detail-heading, .role-picker, .release-meta,
  .release-help, .feedback-register { align-items: flex-start; flex-direction: column; }
  .module-row { grid-template-columns: 3.4rem minmax(0, 1fr); }
  .module-row .module-status, .module-row .feedback-dot { grid-column: 2; }
  .module-status { white-space: normal; }
  .feedback-register { display: flex; }
  .feedback-register > * { width: 100%; }
  .area-switch { grid-template-columns: 1fr; }
  .graphic-release > img { aspect-ratio: 16 / 10; object-fit: cover; }
  .release-composition-preview { min-height: 28rem; }
  .graphic-copy, .graphic-review { padding: 1rem; }
  .brief-card > p, .brief-card > dl, .brief-editor, .brief-notes, .brief-document { margin-inline: .85rem; }
  .table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
}

@media (max-width: 370px) {
  .site-header .brand span, .assessment-header .brand span,
  .onboarding-header .brand span, .mobile-header .brand span { display: none; }
  .header-action { padding-inline: .7rem; }
  .hero h1, .editorial-hero h1, .page-hero h1,
  .intro-panel h1, .result-heading h1,
  .review-intro h1, .lab-intro h1 { font-size: 2.25rem; }
  .runner-rail { grid-template-columns: minmax(0, 1fr); }
  .runner-rail > strong, .runner-rail > span, .runner-rail progress,
  .rail-action[data-pause], .rail-action.danger { grid-column: 1; }
  .runner-rail > span { grid-row: 2; }
  .runner-rail progress { grid-row: 3; }
  .rail-action[data-pause] { grid-row: 4; }
  .rail-action.danger { grid-row: 5; }
  .bottom-nav { left: .3rem; right: .3rem; }
  .bottom-nav a { padding-inline: .1rem; font-size: .64rem; }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
  .editorial-hero { padding-bottom: 10.5rem; }
  .editorial-hero .editorial-media { height: 13rem; }
  .page-hero { padding-bottom: 11rem; }
  .page-hero figure { height: 13rem; }
  .mobile-header { position: relative; }
  .bottom-nav { position: sticky; margin: 1rem .6rem .6rem; }
  .main { padding-bottom: 1rem; }
  .runner-actions { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Desktop composition · UX-CONTENT-1.6.1
   One fluid page measure, symmetric gutters and a deliberate vertical rhythm.
   Reading measures remain bounded inside the wider composition. */
@media (min-width: 901px) {
  :root {
    --desktop-gutter: clamp(1.5rem, 3.2vw, 4.5rem);
    --desktop-content-max: 108rem;
    --desktop-section-gap: clamp(1.5rem, 2.25vw, 2.75rem);
    --desktop-panel-padding: clamp(3rem, 4.6vw, 5rem);
  }

  /* Public pages: all primary surfaces use the same fluid width and equal margins. */
  .site-header,
  .hero,
  .section,
  .authority-strip,
  .page-hero {
    width: min(
      calc(100% - var(--desktop-gutter) - var(--desktop-gutter)),
      var(--desktop-content-max)
    );
    margin-inline: auto;
  }

  .site-header { padding-block: .7rem; }

  .editorial-hero {
    max-width: var(--desktop-content-max);
    min-height: clamp(40rem, 72vh, 50rem);
    margin-block: 0 var(--desktop-section-gap);
    padding-inline: clamp(2.5rem, 5vw, 6rem);
    grid-template-columns: minmax(0, .95fr) minmax(24rem, 1.05fr);
    border-radius: clamp(1.75rem, 3vw, 3.25rem);
  }

  .editorial-hero .hero-copy { max-width: 46rem; }
  .editorial-hero h1 {
    max-width: 12ch;
    font-size: clamp(3.7rem, 5.15vw, 6.2rem);
  }
  .editorial-hero .editorial-media,
  .editorial-hero .editorial-media img { max-width: none; }
  .editorial-hero .editorial-media figcaption {
    right: clamp(1.5rem, 3.5vw, 4rem);
    bottom: 1.4rem;
    width: min(27rem, 34%);
    padding: .55rem .75rem;
    border: 0;
    border-radius: .65rem;
    background: linear-gradient(90deg, rgba(255,250,244,.18), rgba(255,250,244,.88));
    color: #4f3440;
  }

  .page-hero {
    min-height: clamp(32rem, 61vh, 40rem);
    margin-block: 0 var(--desktop-section-gap);
    padding: var(--desktop-panel-padding) clamp(2.5rem, 5vw, 6rem);
    grid-template-columns: minmax(0, .95fr) minmax(24rem, 1.05fr);
  }
  .page-hero h1 { font-size: clamp(3.4rem, 4.9vw, 5.8rem); }
  .page-hero figure,
  .page-hero figure img { max-width: none; }
  .page-hero figure figcaption {
    right: clamp(1.5rem, 3.5vw, 4rem);
    width: min(27rem, 34%);
    padding: .5rem .7rem;
    border: 0;
    border-radius: .55rem;
    background: linear-gradient(90deg, rgba(249,231,218,.16), rgba(249,231,218,.9));
    color: #4f3440;
  }

  /* Boxed editorial sections need visible separation and balanced inner alignment. */
  :where(
    .recognition, .value-section, .reassurance-story, .continuity,
    .team-teaser, .limits, .empathy-band, .soft-band, .depth-section,
    .professional-purpose, .dark-band, .validation-note, .emergency-note
  ) {
    margin-block: var(--desktop-section-gap);
    margin-inline: auto;
    padding-block: var(--desktop-panel-padding);
  }

  :where(
    .continuity, .limits, .empathy-band, .depth-section, .professional-purpose,
    .dark-band, .validation-note, .content-columns, .purpose-grid, .control-grid
  ) { align-items: center; }

  .empathy-band {
    grid-template-columns: minmax(22rem, .9fr) minmax(28rem, 1.1fr);
    gap: clamp(3rem, 6vw, 7rem);
  }
  .empathy-band h2 { max-width: 16ch; }
  .empathy-band > div:last-child { max-width: 48rem; }
  .empathy-band > div:last-child p { font-size: clamp(1rem, 1.05vw, 1.18rem); }

  .image-story,
  .team-teaser { min-height: clamp(34rem, 62vh, 43rem); }

  .authority-strip { margin-block: var(--desktop-section-gap); }
  .section + .callout { margin-top: var(--desktop-section-gap); }

  .site-footer {
    padding-inline: max(
      var(--desktop-gutter),
      calc((100% - var(--desktop-content-max)) / 2)
    );
  }

  /* Product and reviewer surfaces share the same wider, centered desktop canvas. */
  .assessment-main,
  .onboarding-header,
  .onboarding-layout,
  .admin-main,
  .review-main,
  .lab-header + main {
    width: min(
      calc(100% - var(--desktop-gutter) - var(--desktop-gutter)),
      100rem
    );
    margin-inline: auto;
  }

  .lab-header {
    padding-inline: max(
      var(--desktop-gutter),
      calc((100% - 100rem) / 2)
    );
  }

  .main .preview-banner,
  .main .view { max-width: 100rem; }

  .intro-panel,
  .assessment-expectations,
  .result-heading { align-items: center; }

  .console-section + .console-section,
  .graphic-release + .graphic-release { margin-top: 1.25rem; }
}

/* Separated editorial composition · UX-CONTENT-1.6.1
   Illustration and copy share one composition but never share the same layer. */
.editorial-hero::before,
.page-hero::before,
.image-story::before,
.team-teaser::before,
.image-story figure::after,
.team-teaser figure::after { content: none !important; }

.editorial-hero .editorial-media,
.page-hero figure,
.image-story figure,
.team-teaser figure {
  position: relative !important;
  z-index: auto !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 1.35rem 4.25rem 1.35rem 1.35rem;
  background: #f4ddd0;
}

.editorial-hero .editorial-media,
.page-hero figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.editorial-hero .editorial-media img,
.page-hero figure img,
.image-story figure img,
.team-teaser figure img {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  object-fit: cover;
  box-shadow: none !important;
}

.editorial-hero .editorial-media figcaption,
.page-hero figure figcaption {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: .8rem 1rem !important;
  border: 0 !important;
  border-top: 1px solid rgba(74, 37, 55, .12) !important;
  border-radius: 0 !important;
  color: #5f424d !important;
  background: #fff4e9 !important;
  box-shadow: none !important;
  text-align: left !important;
}

.image-story > div,
.team-teaser > div {
  position: relative !important;
  z-index: auto !important;
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
}

/* Assessment artwork is contextual, never a text background. */
.warm-card,
.participant-result {
  isolation: auto !important;
  min-height: 0 !important;
  display: block !important;
  padding: 0 0 1.5rem !important;
  overflow: hidden;
  background: linear-gradient(145deg, #321827, #5d2e43) !important;
}

.warm-card::after,
.participant-result::after { content: none !important; }

.warm-card > img,
.participant-result > img {
  position: static !important;
  z-index: auto !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 16 / 10;
  margin: 0 0 1.35rem !important;
  border-radius: 0 !important;
  object-fit: cover;
  box-shadow: none !important;
}

.warm-card blockquote,
.warm-card > p,
.warm-card dl,
.participant-result > strong,
.participant-result > p {
  display: block;
  max-width: none !important;
  margin-right: 1.5rem !important;
  margin-left: 1.5rem !important;
}

.warm-card blockquote { margin-top: 0 !important; }

/* Assessment controls: branded, generous and aligned to their copy. */
.start-form fieldset {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.start-form label,
.answer-list > label,
.answer-ranked > label {
  min-width: 0;
  min-height: 5rem;
  grid-template-columns: 1.65rem minmax(0, 1fr) !important;
  gap: 1rem !important;
  align-items: center;
  padding: 1.15rem 1.25rem !important;
}

.start-form input[type="radio"],
.answer-list input[type="radio"],
.answer-list input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.55rem !important;
  height: 1.55rem !important;
  margin: 0;
  border: 2px solid #a96655;
  background: #fffaf4;
  box-shadow: inset 0 0 0 .28rem #fffaf4;
  cursor: pointer;
}

.start-form input[type="radio"],
.answer-list input[type="radio"] { border-radius: 50%; }
.answer-list input[type="checkbox"] { border-radius: .42rem; }

.start-form input[type="radio"]:checked,
.answer-list input[type="radio"]:checked,
.answer-list input[type="checkbox"]:checked {
  border-color: #b85f43;
  background: #b85f43;
}

.answer-list input[type="checkbox"]:checked {
  box-shadow: inset 0 0 0 .2rem #fffaf4;
}

.start-form input[type="radio"]:focus-visible,
.answer-list input[type="radio"]:focus-visible,
.answer-list input[type="checkbox"]:focus-visible {
  outline: 3px solid #eea66f;
  outline-offset: 3px;
}

.answer-list > .number-answer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: .75rem !important;
  align-items: start;
  min-height: 0;
  cursor: default;
}

.answer-ranked {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 15rem);
  gap: .85rem;
  align-items: stretch;
}

.answer-ranked > label {
  cursor: pointer;
  border: 1px solid #e2cfc4;
  border-radius: 1.1rem;
  background: rgba(255,255,255,.78);
}

.answer-ranked > label:hover {
  border-color: #d5a28c;
  box-shadow: 0 .45rem 1.2rem rgba(74,37,55,.05);
}

.answer-ranked > label:has(input:checked) {
  border-color: #b85f43;
  background: linear-gradient(135deg,#fff0e2,#ffe3d0);
  box-shadow: inset 0 0 0 1px #b85f43;
}

.answer-ranked > select {
  width: 100%;
  min-height: 4rem;
  margin: 0;
  padding: .75rem 2.4rem .75rem .9rem;
  border: 1px solid #d9b3a1;
  border-radius: 1rem;
  color: #321827;
  background-color: #fffaf4;
}

.answer-ranked > select:disabled { opacity: .5; cursor: not-allowed; }
.answer-ranked.is-incomplete > select,
.answer-ranked > select[aria-invalid="true"] {
  border-color: #9d4a43;
  box-shadow: 0 0 0 3px rgba(157,74,67,.14);
}

.answer-list > .number-answer input[type="number"],
.answer-list > .number-answer input[type="text"] {
  width: min(100%, 32rem) !important;
  min-height: 4rem !important;
  margin: 0;
  padding: .85rem 1rem !important;
  border: 2px solid #d9b3a1 !important;
  border-radius: .9rem !important;
  color: #321827;
  background: #fffaf4;
  font-size: 1.05rem;
}

.start-actions,
.runner-actions,
.result-actions { gap: .85rem !important; }
.start-actions { margin-top: 1.5rem !important; }
.start-form > p { margin: 1.25rem 0 0; max-width: 62rem; line-height: 1.6; }

.start-form .resume-reminder-choice {
  display: grid;
  grid-template-columns: 1.65rem minmax(0, 1fr) !important;
  gap: 1rem !important;
  align-items: start;
  min-height: 0;
  margin-top: 1.25rem;
  padding: 1.15rem 1.25rem !important;
  border: 1px solid #d9b3a1;
  border-radius: 1rem;
  background: #fff8f1;
}

.resume-reminder-choice input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.55rem !important;
  height: 1.55rem !important;
  margin: .1rem 0 0;
  border: 2px solid #a96655;
  border-radius: .42rem;
  background: #fffaf4;
  box-shadow: inset 0 0 0 .28rem #fffaf4;
}

.resume-reminder-choice input[type="checkbox"]:checked {
  border-color: #b85f43;
  background: #b85f43;
  box-shadow: inset 0 0 0 .2rem #fffaf4;
}

.resume-reminder-choice input[type="checkbox"]:focus-visible {
  outline: 3px solid #eea66f;
  outline-offset: 3px;
}

.resume-reminder-choice span { display: grid; gap: .3rem; }
.resume-reminder-choice small { color: #705a64; line-height: 1.55; }
.start-form .preview-boundary { margin-top: .65rem; font-size: .78rem; }
.autosave-status { margin-top: 1rem !important; color: rgba(255,247,237,.74) !important; }

@media (min-width: 901px) {
  .editorial-hero,
  .page-hero {
    display: grid !important;
    grid-template-columns: minmax(0, .92fr) minmax(26rem, 1.08fr) !important;
    gap: clamp(2.5rem, 4.5vw, 5rem) !important;
    align-items: center;
    min-height: 0 !important;
  }

  .editorial-hero .editorial-media,
  .page-hero figure { align-self: stretch; }
  .editorial-hero .editorial-media img,
  .page-hero figure img { aspect-ratio: 5 / 4; }

  .image-story,
  .team-teaser {
    display: grid !important;
    grid-template-columns: minmax(24rem, .95fr) minmax(0, 1.05fr) !important;
    gap: clamp(2.75rem, 5vw, 6rem) !important;
    align-items: center !important;
    min-height: 0 !important;
  }

  .image-story figure img,
  .team-teaser figure img { aspect-ratio: 5 / 4; }

  main > .section + .section,
  main > .authority-strip + .section { margin-top: var(--desktop-section-gap) !important; }

  .question-stage {
    padding-top: clamp(2.5rem, 4vw, 4.5rem);
    padding-bottom: clamp(2.5rem, 4vw, 4.5rem);
  }

  /* The assessment guide remains visible while the question column scrolls. */
  .runner {
    display: grid !important;
    grid-template-columns: 18.5rem minmax(0, 1fr) !important;
    gap: clamp(1rem, 2vw, 1.6rem) !important;
    align-items: start;
  }

  .runner-rail {
    position: sticky;
    top: 1rem;
    min-height: min(42rem, calc(100vh - 2rem));
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow: auto;
    padding: 1.4rem;
    border-radius: 1.25rem 3.5rem 1.25rem 1.25rem;
  }

  .runner-rail .brand { margin: 0 0 2.5rem; }
  .runner-rail > .eyebrow { display: block; }
  .runner-rail > strong { font-size: 1.35rem; }
  .runner-rail progress {
    width: 100%;
    margin: 1.5rem 0 .55rem;
  }
  .runner-rail > span,
  .runner-rail > p:not(.eyebrow),
  .rail-reassurance,
  .rail-action {
    grid-column: auto;
    grid-row: auto;
  }
  .runner-rail > p:not(.eyebrow) { display: block; margin-top: 1.25rem; }
  .rail-reassurance { display: block; margin: 1.25rem 0; }
  .rail-reassurance > span { display: block; }
  .rail-action { min-height: 3rem; margin-top: auto; text-align: left; }
  .rail-action + .rail-action { margin-top: 0; }
}

@media (max-width: 900px) {
  .editorial-hero,
  .page-hero,
  .image-story,
  .team-teaser {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
    padding-bottom: clamp(1.25rem, 4vw, 2rem) !important;
  }

  .editorial-hero .editorial-media,
  .page-hero figure,
  .image-story figure,
  .team-teaser figure {
    height: auto !important;
    order: 0;
  }

  .editorial-hero .hero-copy,
  .page-hero > div { order: -1; }
  .image-story > div,
  .team-teaser > div { padding-inline: clamp(.25rem, 3vw, 1rem); }
  .editorial-hero .editorial-media img,
  .page-hero figure img,
  .image-story figure img,
  .team-teaser figure img { aspect-ratio: 16 / 10; }

  .start-form fieldset { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .editorial-hero .editorial-media,
  .page-hero figure,
  .image-story figure,
  .team-teaser figure,
  .warm-card,
  .participant-result { border-radius: 1rem 2.6rem 1rem 1rem; }

  .warm-card blockquote,
  .warm-card > p,
  .warm-card dl,
  .participant-result > strong,
  .participant-result > p {
    margin-right: 1.15rem !important;
    margin-left: 1.15rem !important;
  }

  .start-form label,
  .answer-list > label,
  .answer-ranked > label {
    min-height: 4.65rem;
    padding: 1rem !important;
  }

  .start-actions .button,
  .runner-actions .button { min-height: 3rem; }
  .answer-ranked { grid-template-columns: minmax(0, 1fr); }

  /* The assessment summary has one row per information layer and action.
     Long route labels and three controls never compete for the same grid cell. */
  .runner-rail {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-auto-flow: row;
    gap: .5rem .75rem;
  }
  .runner-rail > strong {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.2;
  }
  .runner-rail > span {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    font-size: .72rem;
    line-height: 1.25;
    white-space: nowrap;
  }
  .runner-rail progress {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    margin: .1rem 0 .25rem;
  }
  .runner-rail .rail-action,
  .runner-rail .rail-action[data-pause],
  .runner-rail .rail-action[data-reminder-toggle],
  .runner-rail .rail-action.danger {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-height: 2.6rem;
    margin: 0;
    padding: .55rem .25rem;
    line-height: 1.25;
    white-space: normal;
    text-align: left;
  }
}