:root {
  --ice: #EAF1F5;
  --lake: #17384A;
  --lake-soft: #31586A;
  --teal: #007E87;
  --teal-soft: #D9EEF0;
  --ginger: #E7A14A;
  --ginger-soft: #FFF1DD;
  --white: #FFFFFF;
  --line: #C9D9E0;
  --muted: #5F7480;
  --danger: #A8463E;
  --shadow: 0 14px 38px rgba(23, 56, 74, 0.08);
  --radius: 16px;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: var(--ice);
  color: var(--lake);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
select {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 3px solid var(--ginger);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 20;
  top: 8px;
  left: 8px;
  padding: 8px 12px;
  transform: translateY(-160%);
  border-radius: 8px;
  background: var(--white);
  color: var(--lake);
  box-shadow: var(--shadow);
}

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

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 66px;
  padding: 12px 16px;
  background: var(--lake);
  color: var(--white);
}

.brand-lockup,
.header-actions,
.hero-meta,
.route-head,
.panel-heading,
.form-tabs,
.form-actions,
.receipt-row {
  display: flex;
  align-items: center;
}

.brand-lockup {
  gap: 10px;
  min-width: 0;
}

.brand-pin {
  position: relative;
  width: 28px;
  height: 36px;
  flex: 0 0 auto;
  clip-path: polygon(50% 100%, 0 40%, 0 0, 100% 0, 100% 40%);
  background: var(--ginger);
}

.brand-pin span {
  position: absolute;
  top: 7px;
  left: 9px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lake);
}

.brand-kicker,
.brand-name,
.eyebrow,
.section-kicker,
.hero-lede,
.hero-meta,
.route-status,
.form-intro,
.screening-note,
.loading-note,
.form-error,
.required-note,
.question-hint,
.field-error,
.privacy-footnote,
.site-footer,
.info-card p,
.privacy-list,
.node-label,
.question-status {
  margin: 0;
}

.brand-kicker,
.section-kicker,
.eyebrow,
.question-code,
.question-status,
.question-count,
.mode-badge,
.route-status,
.site-footer,
.required-note {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand-kicker {
  color: #BBD2DC;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.66rem;
}

.brand-name {
  max-width: 190px;
  overflow: hidden;
  color: var(--white);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-actions {
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  color: #DCE9EE;
  font-size: 0.75rem;
}

.header-actions select {
  min-height: 44px;
  max-width: 116px;
  padding: 6px 28px 6px 10px;
  border: 1px solid #7D9AA7;
  border-radius: 8px;
  background: var(--white);
  color: var(--lake);
}

.mode-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  color: #DCE9EE;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.6rem;
  line-height: 1.15;
  text-align: center;
  text-transform: none;
}

.mode-badge.is-open {
  border-color: #7DCCB9;
  color: #B8E9DC;
}

main {
  width: min(100%, 1120px);
  margin: 0 auto;
  padding: 0 14px 56px;
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: 330px;
  margin: 0 -14px;
  padding: 52px 22px 42px;
  overflow: hidden;
  border-radius: 0 0 26px 26px;
  background: var(--lake);
  color: var(--white);
}

.hero::before,
.hero::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: "";
}

.hero::before {
  right: -46px;
  bottom: -56px;
  width: 240px;
  height: 180px;
  border: 1px solid rgba(231, 161, 74, 0.4);
  border-radius: 50%;
  transform: rotate(-14deg);
}

.hero::after {
  right: 18px;
  bottom: 42px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ginger);
  box-shadow: 0 0 0 8px rgba(231, 161, 74, 0.16), 0 0 0 16px rgba(231, 161, 74, 0.08);
}

.hero-copy {
  position: relative;
  z-index: 1;
  max-width: 690px;
}

.eyebrow,
.section-kicker {
  color: var(--teal);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.69rem;
  font-weight: 700;
}

.hero .eyebrow {
  color: #9CD4D5;
}

h1,
h2,
h3 {
  margin-top: 0;
  color: var(--lake);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

h1 {
  max-width: 660px;
  margin: 16px 0 16px;
  color: var(--white);
  font-size: clamp(2.25rem, 9vw, 4.2rem);
}

h2 {
  margin-bottom: 0;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
}

h3 {
  margin-bottom: 10px;
  font-size: 1.35rem;
}

.hero-lede {
  max-width: 600px;
  color: #D6E4E9;
  font-size: 1rem;
}

.hero-meta {
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 26px;
  color: #AFC8D2;
  font-size: 0.74rem;
}

.meta-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ginger);
}

.hero-contour {
  position: absolute;
  right: -74px;
  bottom: -20px;
  width: min(78vw, 480px);
  height: auto;
  opacity: 0.58;
}

.hero-contour path {
  fill: none;
  stroke: #4D7685;
  stroke-width: 1.3;
}

.hero-contour .hero-mountain {
  stroke: #88AAB4;
  stroke-width: 2.2;
}

.hero-contour .hero-lake {
  stroke: #6DC1C0;
  stroke-width: 1.8;
}

.hero-contour .hero-bowl {
  stroke: var(--ginger);
  stroke-width: 2.2;
}

.hero-contour .hero-steam {
  stroke: #F4CA8D;
  stroke-dasharray: 3 4;
  stroke-width: 1.4;
}

.hero-contour circle {
  fill: var(--ginger);
  stroke: #F7C986;
  stroke-width: 1.2;
}

.route-card,
.card-surface,
.info-card {
  background: var(--white);
  box-shadow: var(--shadow);
}

.route-card {
  position: relative;
  z-index: 2;
  margin: 18px 0 0;
  padding: 20px 18px 18px;
  border: 1px solid rgba(201, 217, 224, 0.8);
  border-radius: var(--radius);
}

.route-head {
  justify-content: space-between;
  gap: 12px;
}

.route-status {
  flex: 0 0 auto;
  color: var(--teal);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.71rem;
  font-weight: 700;
}

.route-rail {
  position: relative;
  margin-top: 22px;
}

.route-line {
  position: absolute;
  top: 14px;
  right: 6%;
  left: 6%;
  height: 2px;
  overflow: hidden;
  background: #D6E3E8;
}

.route-fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--teal);
  transition: width 220ms ease;
}

.route-nodes {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.route-node {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.72rem;
  text-align: center;
}

.node-marker {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid #C8D8DF;
  border-radius: 50%;
  background: var(--white);
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.65rem;
  font-weight: 700;
}

.route-node.is-active .node-marker,
.route-node.is-done .node-marker {
  border-color: var(--teal);
  background: var(--teal);
  color: var(--white);
}

.route-node.is-active {
  color: var(--teal);
  font-weight: 700;
}

.route-node.is-done {
  color: var(--lake-soft);
}

.workspace {
  margin-top: 24px;
}

.card-surface {
  border: 1px solid rgba(201, 217, 224, 0.8);
  border-radius: var(--radius);
}

.form-chooser {
  display: grid;
  gap: 18px;
  padding: 20px 18px;
}

.form-tabs {
  gap: 8px;
  width: 100%;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--ice);
}

.form-tab {
  min-height: 46px;
  flex: 1 1 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.2;
}

.form-tab.is-selected {
  background: var(--lake);
  color: var(--white);
  box-shadow: 0 3px 12px rgba(23, 56, 74, 0.16);
}

.form-tab:disabled {
  cursor: wait;
  opacity: 0.62;
}

.form-intro {
  color: var(--muted);
  font-size: 0.9rem;
}

.landing-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  color: var(--lake-soft);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.7rem;
}

.fact-divider {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ginger);
}

.landing-start {
  width: 100%;
}

.landing-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
}

.survey-layout {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.survey-panel {
  min-width: 0;
  padding: 22px 16px 18px;
}

.panel-heading {
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.step-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-top: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.step-heading:focus {
  outline: 0;
}

.step-heading h3 {
  margin: 5px 0 0;
  font-size: 1.5rem;
}

.step-status {
  flex: 0 0 auto;
  margin: 0;
  color: var(--teal);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.question-count {
  flex: 0 0 auto;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.67rem;
}

.screening-note,
.loading-note,
.form-error {
  margin-top: 16px;
  padding: 12px 13px;
  border-left: 3px solid var(--ginger);
  background: var(--ginger-soft);
  color: var(--lake);
  font-size: 0.86rem;
}

.screening-note.is-stop {
  border-left-color: var(--teal);
  background: var(--teal-soft);
}

.form-error {
  border-left-color: var(--danger);
  background: #FFF0EE;
  color: var(--danger);
}

.question-card {
  padding: 24px 0 25px;
  border-bottom: 1px solid var(--line);
}

.question-card:last-child {
  border-bottom: 0;
}

.question-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 13px;
}

.question-code {
  color: var(--teal);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  font-weight: 700;
}

.question-status {
  color: var(--muted);
  font-size: 0.65rem;
  text-transform: none;
}

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

.question-group legend {
  width: 100%;
  padding: 0;
  color: var(--lake);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
}

.question-hint {
  margin-top: 7px;
  color: var(--muted);
  font-size: 0.77rem;
}

.choice-list {
  display: grid;
  gap: 9px;
  margin-top: 15px;
}

.choice {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-height: 52px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #FBFDFE;
  color: var(--lake);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}

.choice:hover {
  border-color: #8AB8BC;
  background: #F5FBFC;
}

.choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.choice-marker {
  display: block;
  width: 22px;
  height: 22px;
  border: 2px solid #A4BBC4;
  border-radius: 50%;
  background: var(--white);
}

.choice input[type="checkbox"] + .choice-marker {
  border-radius: 5px;
}

.choice input:checked + .choice-marker {
  border-color: var(--teal);
  background: var(--teal);
  box-shadow: inset 0 0 0 4px var(--white);
}

.choice input:focus-visible + .choice-marker {
  outline: 3px solid var(--ginger);
  outline-offset: 3px;
}

.choice-copy {
  min-width: 0;
  font-size: 0.92rem;
  line-height: 1.35;
}

.text-label {
  display: grid;
  gap: 11px;
  color: var(--lake);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.45;
}

.text-label input,
.text-label textarea {
  width: 100%;
  min-height: 50px;
  padding: 11px 12px;
  border: 1px solid #A9C0C9;
  border-radius: 10px;
  outline: 0;
  background: #FBFDFE;
  color: var(--lake);
  resize: vertical;
}

.text-label textarea {
  min-height: 82px;
}

.text-label input:focus,
.text-label textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 126, 135, 0.16);
}

.field-error {
  margin-top: 9px;
  color: var(--danger);
  font-size: 0.8rem;
  font-weight: 600;
}

.form-actions {
  justify-content: space-between;
  gap: 14px;
  padding-top: 20px;
}

.step-nav {
  position: sticky;
  z-index: 4;
  bottom: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 18px -16px -18px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -8px 22px rgba(23, 56, 74, 0.07);
}

.step-nav-label {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.66rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-button {
  min-width: 88px;
  padding-right: 12px;
  padding-left: 12px;
}

.required-note {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.64rem;
  line-height: 1.4;
  text-transform: none;
}

.primary-button,
.secondary-button {
  min-height: 50px;
  padding: 10px 17px;
  border-radius: 10px;
  font-weight: 800;
  line-height: 1.2;
}

.primary-button {
  border: 2px solid var(--teal);
  background: var(--teal);
  color: var(--white);
}

.primary-button:hover:not(:disabled) {
  border-color: #00656C;
  background: #00656C;
}

.primary-button:disabled {
  cursor: wait;
  opacity: 0.6;
}

.secondary-button {
  border: 2px solid var(--lake);
  background: transparent;
  color: var(--lake);
}

.secondary-button:hover {
  background: var(--ice);
}

.result-card {
  margin-top: 22px;
  padding: 24px 18px;
  border: 1px solid #A9D4D5;
  border-radius: 13px;
  background: var(--teal-soft);
}

.result-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  font-size: 1.35rem;
  font-weight: 800;
}

.result-card .section-kicker {
  color: var(--teal);
}

.result-card p:not(.section-kicker) {
  color: var(--lake-soft);
}

.receipt-row {
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
  color: var(--lake);
  font-size: 0.8rem;
  font-weight: 700;
}

.receipt-row code {
  padding: 5px 8px;
  overflow-wrap: anywhere;
  border-radius: 6px;
  background: var(--white);
  color: var(--teal);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.78rem;
}

.side-notes {
  display: grid;
  align-content: start;
  gap: 14px;
}

.info-card {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  padding: 18px 16px;
  border: 1px solid rgba(201, 217, 224, 0.8);
  border-radius: var(--radius);
}

.info-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--teal-soft);
  color: var(--teal);
  font-size: 1.25rem;
  font-weight: 800;
}

.info-icon.amber {
  background: var(--ginger-soft);
  color: #AF6818;
}

.info-card .section-kicker {
  margin-bottom: 7px;
}

.info-card h3 {
  margin-bottom: 8px;
  font-size: 1.23rem;
}

.info-card p {
  color: var(--muted);
  font-size: 0.84rem;
}

.privacy-list {
  display: grid;
  gap: 8px;
  margin-top: 15px;
}

.privacy-list div {
  display: grid;
  grid-template-columns: minmax(74px, auto) minmax(0, 1fr);
  gap: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
}

.privacy-list dt {
  color: var(--muted);
}

.privacy-list dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--lake);
  font-weight: 700;
  text-align: right;
}

.privacy-footnote {
  padding: 0 4px;
  color: var(--muted);
  font-size: 0.72rem;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 16px 30px;
  border-top: 1px solid rgba(23, 56, 74, 0.13);
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.62rem;
}

@media (min-width: 740px) {
  .site-header {
    padding-right: max(24px, calc((100vw - 1120px) / 2 + 14px));
    padding-left: max(24px, calc((100vw - 1120px) / 2 + 14px));
  }

  main {
    padding-right: 20px;
    padding-left: 20px;
  }

  .hero {
    margin-right: -20px;
    margin-left: -20px;
    padding: 72px 42px 56px;
  }

  .route-card {
    margin-top: 24px;
    padding: 24px 26px 22px;
  }

  .form-chooser {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 370px);
    align-items: center;
    padding: 24px 26px;
  }

  .form-intro {
    grid-column: 1 / -1;
  }

  .landing-facts {
    grid-column: 1;
  }

  .landing-start {
    grid-column: 2;
    grid-row: 3;
  }

  .landing-note {
    grid-column: 1 / -1;
  }

  .survey-layout {
    grid-template-columns: minmax(0, 1.55fr) minmax(270px, 0.8fr);
    align-items: start;
  }

  .survey-panel {
    padding: 28px 26px 22px;
  }

  .step-nav {
    position: static;
    margin-right: -26px;
    margin-left: -26px;
    padding-right: 26px;
    padding-left: 26px;
    box-shadow: none;
  }

  .side-notes {
    position: sticky;
    top: 18px;
  }
}

@media (max-width: 739px) {
  .hero {
    min-height: 0;
    padding: 32px 18px 28px;
  }

  .hero h1 {
    margin: 10px 0;
    font-size: clamp(2rem, 9vw, 3rem);
  }

  .hero-lede {
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .hero-meta {
    margin-top: 14px;
    font-size: 0.68rem;
  }

  .form-chooser {
    gap: 12px;
    padding: 16px 14px;
  }
}

@media (max-width: 520px) {
  .site-header {
    align-items: flex-start;
  }

  .header-actions {
    flex-wrap: wrap;
  }

  .header-actions label {
    width: 100%;
    text-align: right;
  }

  .mode-badge {
    max-width: 114px;
  }

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

  .primary-button {
    width: 100%;
  }
}

@media (max-width: 360px) {
  .site-header {
    padding: 10px 10px;
  }

  .brand-name {
    max-width: 108px;
    font-size: 0.92rem;
  }

  .header-actions {
    gap: 5px;
  }

  .header-actions select {
    max-width: 92px;
    padding-right: 21px;
    padding-left: 7px;
  }

  .mode-badge {
    max-width: 97px;
    padding-right: 5px;
    padding-left: 5px;
    font-size: 0.55rem;
  }

  main {
    padding-right: 10px;
    padding-left: 10px;
  }

  .hero {
    margin-right: -10px;
    margin-left: -10px;
    padding-right: 16px;
    padding-left: 16px;
  }

  h1 {
    font-size: 2.05rem;
  }

  .route-card,
  .form-chooser,
  .survey-panel,
  .info-card {
    padding-right: 12px;
    padding-left: 12px;
  }

  .step-nav {
    margin-right: -12px;
    margin-left: -12px;
    padding-right: 12px;
    padding-left: 12px;
  }

  .node-label {
    font-size: 0.65rem;
  }

  .route-status {
    font-size: 0.62rem;
  }
}

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

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Main-session acceptance refinements: concise mobile flow and visible selections. */
.choice:has(input:checked) { border-color: var(--teal); background: #E9F5F4; }
.is-answering .form-chooser > div:first-child, .is-answering .form-intro,
.is-answering .landing-facts, .is-answering .landing-note { display: none; }
.is-answering .form-chooser { padding: 8px; display: block; }
.is-answering .workspace { margin-top: 12px; }
.is-answering .route-card { padding: 14px 16px; }
.is-answering .route-head h2, .is-answering .route-head .section-kicker { display: none; }
.is-answering .route-rail { margin-top: 10px; }
.is-answering .survey-layout { margin-top: 12px; }
.screening-note { display: none; }
.screening-note.is-stop { display: block; }
.is-answering .panel-heading { padding-bottom: 12px; }
.is-answering .step-heading { margin-top: 14px; scroll-margin-top: 12px; }
.is-answering .step-heading h3 { font-family: system-ui, sans-serif; font-weight: 650; }
@media(max-width:739px) {
  .is-answering main { padding-bottom: 105px; }
  .step-nav { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; }
  .is-answering .panel-heading { display: none; }
  .hero-meta { font-size: .75rem; }
  .landing-facts, .landing-note, .question-hint { font-size: .8rem; }
  .hero-contour { right: -28px; opacity: .4; }
}

/* 2026 alpine photographic collage direction */
:root{--lake:#061b46;--lake-soft:#18446b;--teal:#006e96;--ginger:#d89b40;--ice:#f2f7fc;--radius:14px;--shadow:0 7px 28px rgba(6,27,70,.06)}
body{background:#f2f7fc;color:#18324c}
h1,h2,h3,.brand-name{font-family:"Microsoft YaHei","Segoe UI",Arial,sans-serif;font-weight:650;letter-spacing:-.035em}
.site-header{background:#061b46}.brand-pin{background:#82d4e8}
.hero{background:linear-gradient(90deg,rgba(6,27,70,.15),rgba(6,27,70,.03)),url("20260903_尚佩湖共同体背景.webp") center/cover;min-height:310px;padding:36px 32px 50px;border-radius:0 0 16px 16px}
.hero-copy{max-width:54%}.hero h1{font-size:clamp(2rem,4.2vw,3.35rem);line-height:1.2;margin:14px 0}.hero-lede{font-size:1rem;line-height:1.8;color:white}.hero-meta{font-size:.875rem;color:#d4ebf5;margin-top:14px}.hero::before,.hero::after{display:none}.art-credit{position:absolute;bottom:10px;right:14px;font-size:12px;background:rgba(6,27,70,.8);padding:3px 8px;color:#dcecf5}
.brand-kicker,.section-kicker,.eyebrow,.question-count,.mode-badge,.route-status,.required-note,.question-status,.question-code,.landing-facts,.landing-note,.node-label,.step-status,.header-actions{font-size:.875rem;letter-spacing:.015em}
.question-code{display:none}.form-intro{font-size:1rem}.form-chooser{padding:26px}.form-tab{min-height:48px}.primary-button{background:#006e96;min-height:48px}.site-footer{font-size:.875rem}
.hero .eyebrow{color:#a8e5f3} .survey-panel{padding:24px}.question-hint,.privacy-footnote,.info-card p,.privacy-list{font-size:.875rem;line-height:1.7}
@media(max-width:640px){.hero{min-height:280px;padding:26px 20px 42px;background-position:68% center;background-image:linear-gradient(90deg,rgba(6,27,70,.89),rgba(6,27,70,.35)),url("20260903_尚佩湖共同体背景.webp")}.hero-copy{max-width:95%}.hero h1{font-size:2rem;max-width:300px}.hero-lede{max-width:320px;font-size:1rem}.hero-meta{gap:5px;margin-top:10px}.site-header{padding:10px 14px}.brand-name{max-width:135px}.form-chooser{padding:20px}.survey-panel{padding:18px}.hero-meta span:last-child{display:none}.art-credit{font-size:12px}}

.hero h1{font-size:clamp(32px,4.2vw,52px);text-wrap:balance;max-width:11em}.hero-lede{max-width:46ch}@media(max-width:600px){.hero h1{max-width:11em}.hero-lede{max-width:100%}}