:root {
  --ink: #14303d;
  --ink-soft: #60727a;
  --primary: #0a789e;
  --primary-dark: #075c79;
  --primary-pale: #e3f4f7;
  --scene-ground: #e9f1f2;
  --accent: #f0642d;
  --accent-dark: #b94218;
  --paper: #f4f0e7;
  --surface: #ffffff;
  --surface-warm: #fbf8f1;
  --line: #d8e0df;
  --success: #18725c;
  --success-pale: #e9f5ef;
  --warning: #9a461f;
  --warning-pale: #fff0e8;
  --danger: #a82e31;
  --danger-pale: #fbe9e9;
  --shadow-sm: 0 2px 10px rgba(20, 48, 61, 0.06);
  --shadow-md: 0 16px 45px rgba(20, 48, 61, 0.1);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --max: 1200px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button {
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
}

[hidden] {
  display: none !important;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 10px 16px;
  color: white;
  background: var(--primary-dark);
  border-radius: 8px;
  transform: translateY(-160%);
}

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

:focus-visible {
  outline: 3px solid rgba(10, 120, 158, 0.35);
  outline-offset: 3px;
}

h2[tabindex="-1"]:focus {
  outline: none;
}

.site-header,
.hero,
.how,
.wizard-shell,
.disclaimer,
footer {
  width: min(calc(100% - 40px), var(--max));
  margin-inline: auto;
}

.site-header {
  display: flex;
  min-height: 86px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.market-picker {
  display: grid;
  grid-template-columns: auto auto;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
}

.market-picker select {
  min-height: 44px;
  max-width: 180px;
  padding: 8px 34px 8px 12px;
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--surface);
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.market-picker select:hover {
  border-color: var(--primary);
}

.market-picker select:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(10, 120, 158, 0.14);
}

.brand,
.wizard-brand {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.brand__mark,
.wizard-brand svg {
  width: 34px;
  height: 34px;
  fill: var(--primary);
}

.brand__mark .brand__wave {
  fill: none;
  stroke: white;
  stroke-linecap: round;
  stroke-width: 2.3;
}

.brand__accent {
  color: var(--primary);
}

.header-link,
.text-button {
  min-height: 44px;
  padding: 8px 2px;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--ink-soft);
  background: transparent;
  font-weight: 650;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease;
}

.header-link:hover,
.text-button:hover {
  color: var(--primary-dark);
  border-color: currentColor;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(520px, 1.12fr);
  min-height: 655px;
  align-items: center;
  gap: clamp(38px, 6vw, 84px);
  padding: 62px 0 86px;
}

.eyebrow,
.question-kicker {
  margin: 0 0 16px;
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
}

.eyebrow__dot {
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(240, 100, 45, 0.12);
}

h1,
h2,
h3,
p {
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  margin-top: 0;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

h1 {
  max-width: 660px;
  margin-bottom: 22px;
  font-size: clamp(42px, 5.4vw, 72px);
  font-weight: 820;
}

h1 span {
  color: var(--primary);
}

.hero__lead {
  max-width: 620px;
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(17px, 1.5vw, 20px);
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 32px;
}

.button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 20px;
  border: 1px solid transparent;
  border-radius: 14px;
  font-weight: 750;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.button svg,
.hero__time svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.button--primary {
  color: white;
  background: var(--accent);
  box-shadow: 0 8px 20px rgba(185, 66, 24, 0.2);
}

.button--primary:hover:not(:disabled) {
  background: var(--accent-dark);
  box-shadow: 0 10px 26px rgba(185, 66, 24, 0.25);
  transform: translateY(-1px);
}

.button:active:not(:disabled),
.option-card:active {
  transform: translateY(1px);
}

.button--primary:disabled {
  color: #8d989c;
  background: #e2e5e4;
  box-shadow: none;
  cursor: not-allowed;
}

.button--ghost {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}

.button--ghost:hover {
  border-color: var(--primary);
  color: var(--primary-dark);
  background: var(--primary-pale);
}

.hero__time {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 650;
}

.trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 28px 0 0;
  padding: 0;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 650;
  list-style: none;
}

.trust-list li {
  display: flex;
  align-items: center;
  gap: 5px;
}

.trust-list svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--success);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.hero__visual {
  min-width: 0;
}

.hero__image-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.15;
  background: #eee6d5;
  border: 8px solid rgba(255, 255, 255, 0.72);
  border-radius: 38px 38px 38px 120px;
  box-shadow: var(--shadow-md);
}

.hero__image-wrap::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(20, 48, 61, 0.06);
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.hero__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 49% center;
}

.hero__callout {
  position: absolute;
  z-index: 2;
  display: grid;
  grid-template-columns: 10px 1fr;
  column-gap: 9px;
  padding: 12px 15px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(20, 48, 61, 0.1);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.hero__callout--source {
  bottom: 9%;
  left: 5%;
}

.hero__callout--home {
  top: 8%;
  right: 5%;
}

.hero__callout strong {
  font-size: 13px;
  line-height: 1.2;
}

.hero__callout span:last-child {
  grid-column: 2;
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: 10px;
}

.callout-dot {
  width: 9px;
  height: 9px;
  margin-top: 3px;
  background: var(--accent);
  border-radius: 50%;
}

.how {
  padding: 88px 0 110px;
}

.section-heading {
  max-width: 620px;
  margin-bottom: 42px;
}

.section-heading h2 {
  margin-bottom: 0;
  font-size: clamp(34px, 4vw, 52px);
}

.how__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.how__grid li {
  position: relative;
  min-height: 250px;
  padding: 28px;
  background: var(--surface-warm);
  border: 1px solid rgba(20, 48, 61, 0.08);
  border-radius: var(--radius-lg);
}

.how__number {
  position: absolute;
  top: 24px;
  right: 24px;
  color: #bdc8c8;
  font-size: 15px;
  font-weight: 800;
}

.how__icon {
  width: 58px;
  height: 58px;
  margin-bottom: 30px;
  padding: 11px;
  color: var(--primary);
  background: var(--primary-pale);
  border-radius: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.how h3 {
  margin-bottom: 10px;
  font-size: 21px;
}

.how p {
  margin: 0;
  color: var(--ink-soft);
}

.wizard-section {
  padding: 22px 0 84px;
  background: #e8e3d8;
}

.wizard-shell {
  overflow: hidden;
  margin-top: 52px;
  background: var(--surface);
  border: 1px solid rgba(20, 48, 61, 0.08);
  border-radius: 30px;
  box-shadow: var(--shadow-md);
}

.wizard-topbar {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 34px;
  border-bottom: 1px solid var(--line);
}

.wizard-brand {
  font-size: 17px;
}

.wizard-brand svg {
  width: 26px;
  height: 26px;
}

.progress {
  padding: 18px 34px 0;
}

.progress__meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 750;
}

.progress__track {
  overflow: hidden;
  height: 7px;
  background: #e7eceb;
  border-radius: 999px;
}

.progress__track span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--primary);
  border-radius: inherit;
  transition: width 240ms ease;
}

.wizard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  gap: 40px;
  padding: 36px 34px 42px;
}

.wizard-main {
  min-width: 0;
}

.question-kicker {
  margin-bottom: 10px;
  font-size: 11px;
}

#wizard-title {
  max-width: 780px;
  margin-bottom: 9px;
  font-size: clamp(30px, 3.4vw, 44px);
}

.question-help {
  max-width: 680px;
  margin: 0 0 26px;
  color: var(--ink-soft);
}

.option-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* The drawing leads. At a card width of roughly 360px it renders about eight
   times the area it had beside the text, which is the difference between an
   illustration you look at and a thumbnail you skip. */
.option-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--ink);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: border-color 190ms ease, background-color 190ms ease, box-shadow 190ms ease, transform 190ms ease;
}

.option-card:hover {
  border-color: #82baca;
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

/* The card is a large hit area, so the ring is drawn on the card itself rather
   than relying on the global outline offset, which floats away from the edge. */
.option-card:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(10, 120, 158, 0.32);
}

/* Selection is carried by four signals at once — border, fill, ring and the
   check badge — so it never depends on colour alone. */
.option-card[aria-checked="true"] {
  border-color: var(--primary);
  background: var(--primary-pale);
  box-shadow: 0 0 0 3px rgba(10, 120, 158, 0.18);
}

.option-card[aria-checked="true"]:focus-visible {
  box-shadow: 0 0 0 4px rgba(10, 120, 158, 0.42);
}

.option-card[aria-checked="true"] .option-card__title {
  color: var(--primary-dark);
}

.option-card[aria-checked="true"] .option-card__visual {
  background: #d8ecf1;
  border-bottom-color: #a9d3dd;
}

.option-card__check {
  position: absolute;
  top: 11px;
  right: 11px;
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  color: white;
  background: var(--primary);
  border: 2px solid var(--surface);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.72);
  transition: opacity 180ms ease, transform 180ms ease;
}

.option-card[aria-checked="true"] .option-card__check {
  opacity: 1;
  transform: scale(1);
}

.option-card__check svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

/* The drawing runs to the edge of the card instead of sitting in a second rounded
   box. Its panel is filled with the same colour as the scene's own ground, so the
   space above and below the artwork has no visible seam and the picture reads as
   one full-height panel. The hairline on the right is the division between a
   drawing and its title block. */
.option-card__visual {
  overflow: hidden;
  width: 100%;
  aspect-ratio: 160 / 112;
  background: var(--scene-ground);
  border-bottom: 1px solid var(--line);
  border-radius: 16px 16px 0 0;
  transition: background-color 190ms ease;
}

.option-card__visual svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Grid items refuse to shrink below their content by default, which pushed the
   title and hint outside the card on narrow widths. */
.option-card__body {
  min-width: 0;
  padding: 14px 16px 16px;
}

.option-card__title {
  overflow-wrap: break-word;
  display: block;
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 780;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* The product's whole promise is turning an everyday situation into a number.
   The callout says that number out loud, in the dimension-mark language the
   drawings already use, which is why orange is reserved for measurement here and
   never for selection. */
.option-card__spec {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 3px 10px 3px 8px;
  color: var(--accent-dark);
  background: #fdf0e8;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.option-card__spec::before {
  content: "";
  width: 13px;
  height: 8px;
  border-inline: 2px solid currentColor;
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
}

.option-card__description {
  overflow-wrap: break-word;
  display: block;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.4;
}

.wizard-actions {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.answer-summary {
  align-self: start;
  padding: 20px;
  background: var(--surface-warm);
  border: 1px solid #e2ddd3;
  border-radius: var(--radius-md);
}

.answer-summary__head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e2ddd3;
}

.answer-summary__head svg,
.summary-note svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--primary);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.answer-summary__head h3 {
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.answer-summary__content {
  display: grid;
  gap: 0;
}

.summary-empty {
  margin: 16px 0 4px;
  color: var(--ink-soft);
  font-size: 13px;
}

.summary-item {
  display: grid;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid #e2ddd3;
}

.summary-item span {
  color: var(--ink-soft);
  font-size: 11px;
}

.summary-item strong {
  font-size: 13px;
  line-height: 1.3;
}

.summary-note {
  display: flex;
  gap: 7px;
  margin: 16px 0 0;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.4;
}

.summary-note svg {
  width: 16px;
  height: 16px;
}

.result-hero {
  position: relative;
  overflow: hidden;
  padding: 30px;
  color: white;
  background: var(--primary-dark);
  border-radius: var(--radius-lg);
}

.result-hero::after {
  position: absolute;
  top: -55px;
  right: -45px;
  width: 190px;
  height: 190px;
  border: 34px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  content: "";
}

.result-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 17px;
  padding: 6px 10px;
  color: #d8f1f6;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.result-badge svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.result-hero h2 {
  position: relative;
  z-index: 1;
  max-width: 650px;
  margin-bottom: 10px;
  font-size: clamp(30px, 3.8vw, 48px);
}

.result-hero p {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0;
  color: #d7e7eb;
}

.result-section {
  margin-top: 32px;
}

.result-section__head {
  margin-bottom: 15px;
}

.result-section__head h3 {
  margin-bottom: 6px;
  font-size: 24px;
}

.result-section__head p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
}

.spec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.spec-card {
  padding: 18px;
  background: var(--primary-pale);
  border: 1px solid #cce8ed;
  border-radius: 16px;
}

.spec-card span {
  display: block;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}

.spec-card strong {
  display: block;
  margin: 5px 0 3px;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.2;
}

.spec-card small {
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.3;
}

.catalog-section {
  padding: 24px;
  background: #f8fbfb;
  border: 1px solid #cfe1e3;
  border-radius: 20px;
}

.catalog-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.catalog-kicker,
.model-card__brand {
  display: block;
  color: var(--primary-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.catalog-count {
  flex: 0 0 auto;
  padding: 6px 10px;
  color: var(--ink-soft);
  background: white;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.catalog-intro {
  margin: 0 0 18px;
  color: var(--ink-soft);
  font-size: 13px;
}

.catalog-intro strong {
  color: var(--ink);
}

.model-grid {
  display: grid;
  gap: 13px;
}

.model-card {
  padding: 19px;
  background: white;
  border: 1px solid #ccdcde;
  border-radius: 17px;
  box-shadow: var(--shadow-sm);
}

.model-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.model-card h4 {
  margin: 3px 0 0;
  font-size: 22px;
  line-height: 1.2;
}

.fit-badge {
  flex: 0 0 auto;
  padding: 6px 9px;
  color: var(--success);
  background: var(--success-pale);
  border: 1px solid #c6e4d6;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.fit-badge--insufficient-head,
.fit-badge--insufficient-flow,
.fit-badge--condition,
.fit-badge--excessive {
  color: var(--warning);
  background: var(--warning-pale);
  border-color: #f0c9b5;
}

.model-card__status {
  margin-top: 13px;
  color: var(--success);
  font-size: 13px;
}

.model-card--compact .model-card__status {
  color: var(--warning);
}

.model-card--compact.model-card--fit .model-card__status {
  color: var(--success);
}

.model-usage-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.model-usage-tags li {
  padding: 6px 9px;
  color: #7b3d20;
  background: var(--warning-pale);
  border: 1px solid #efc9b5;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.model-facts {
  display: grid;
  grid-template-columns: 0.72fr 1.45fr 1fr;
  gap: 8px;
  margin: 14px 0;
}

.model-facts div {
  min-width: 0;
  padding: 10px;
  background: #f2f7f7;
  border-radius: 10px;
}

.model-facts dt {
  margin-bottom: 3px;
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.model-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 12px;
  font-weight: 720;
}

.model-reasons {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
  color: var(--ink-soft);
  font-size: 12px;
}

.model-source {
  margin: 13px 0 0;
  color: #78888e;
  font-size: 10px;
}

.control-combination {
  margin-top: 16px;
  padding: 18px;
  background: #eef8f8;
  border: 1px solid #bcdadd;
  border-radius: 17px;
}

.control-combination__head {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 13px;
  align-items: flex-start;
}

.control-combination__icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--primary-dark);
  background: white;
  border: 1px solid #c6dfe1;
  border-radius: 12px;
}

.control-combination__icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.control-combination__kicker {
  color: var(--primary-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.control-combination h4 {
  margin: 3px 0 4px;
  font-size: 18px;
  line-height: 1.25;
}

.control-combination__head p,
.control-bundle--alternative > p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
}

.control-bundle {
  margin-top: 14px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid #c9dfe1;
  border-radius: 13px;
}

.control-bundle__title {
  display: grid;
  gap: 3px;
}

.control-bundle__title strong {
  color: var(--ink);
  font-size: 14px;
}

.control-bundle__title span {
  color: var(--ink-soft);
  font-size: 12px;
}

.control-bundle__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.control-bundle__items li {
  display: grid;
  align-content: start;
  min-width: 0;
  padding: 10px;
  background: white;
  border: 1px solid #d5e4e5;
  border-radius: 10px;
}

.control-bundle__items span {
  color: var(--ink-soft);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.control-bundle__items strong {
  margin: 3px 0;
  overflow-wrap: anywhere;
  color: var(--primary-dark);
  font-size: 14px;
}

.control-bundle__items small {
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.35;
}

.control-bundle__source {
  margin-top: 5px;
  color: #7b898d !important;
  font-size: 9px !important;
}

.control-bundle__check,
.control-combination__note {
  margin: 12px 0 0;
  padding: 10px 11px;
  color: #5f593e;
  background: #fff9e8;
  border-left: 3px solid #c5a54a;
  border-radius: 0 9px 9px 0;
  font-size: 10px;
  line-height: 1.45;
}

.control-bundle--alternative {
  padding: 0 14px 14px;
}

.control-bundle--alternative summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 780;
  cursor: pointer;
}

.control-combination__note {
  color: #53666c;
  background: #f5f8f8;
  border-left-color: #9bafb2;
}

.supplier-empty {
  margin: 14px 0 0;
  padding: 11px 12px;
  color: #59696f;
  background: var(--surface-warm);
  border-left: 3px solid #b2a98f;
  border-radius: 0 9px 9px 0;
  font-size: 11px;
}

.supplier-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.supplier-links a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  color: white;
  background: var(--primary-dark);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  transition: background-color 180ms ease, transform 180ms ease;
}

.supplier-links a:hover {
  background: var(--primary);
  transform: translateY(-1px);
}

.supplier-links svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.catalog-empty {
  padding: 18px;
  background: white;
  border: 1px solid #d5e1e2;
  border-radius: 14px;
}

.catalog-empty--warning {
  background: var(--warning-pale);
  border-color: #efcab8;
}

.catalog-empty--market {
  border-color: #ebdba8;
  background: #fff9e9;
}

.catalog-market-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 22px;
  padding: 13px 15px;
  border: 1px solid #c7e2e8;
  color: #365967;
  background: #f0f9fa;
  border-radius: 12px;
  font-size: 13px;
}

.catalog-market-note svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--primary);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.catalog-empty p {
  margin: 5px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
}

.catalog-market-note--physical {
  color: #6a4a24;
  background: #fdf6ec;
  border-color: #ecd9bb;
}

.series-span {
  display: grid;
  gap: 8px;
  margin: 7px 0 6px;
}

.series-span__item {
  display: grid;
  gap: 1px;
  padding-left: 9px;
  border-left: 2px solid var(--primary-pale);
}

.series-span__label {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.series-span__item strong {
  font-size: 14px;
}

.series-span__item small {
  color: var(--ink-soft);
  font-size: 12px;
}

.traps {
  margin-top: 18px;
  padding: 20px;
  background: var(--surface-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.traps__head span {
  display: block;
  margin-bottom: 4px;
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.traps__head h4 {
  margin: 0 0 6px;
  font-size: 18px;
}

.traps__head p {
  margin: 0 0 16px;
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 1.55;
}

.traps__stage h5 {
  margin: 18px 0 8px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.trap {
  margin-bottom: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.trap summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 14px;
  cursor: pointer;
}

.trap summary strong {
  flex: 1;
  min-width: 200px;
  font-size: 14.5px;
  line-height: 1.35;
}

.trap[open] {
  border-color: #c6dbe0;
}

.trap__tag {
  flex: none;
  padding: 3px 9px;
  color: var(--primary-dark);
  font-size: 11.5px;
  font-weight: 750;
  background: var(--primary-pale);
  border-radius: 999px;
}

.trap__body {
  padding: 0 14px 14px;
  font-size: 13.5px;
  line-height: 1.6;
}

.trap__figure {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  margin: 0 0 12px;
}

.trap__body p {
  margin: 0 0 10px;
}

.trap__series {
  color: var(--ink-soft);
  font-size: 12.5px;
}

.trap__example {
  margin: 0 0 10px;
  padding: 10px 12px;
  background: var(--warning-pale);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.trap__body small {
  display: block;
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.5;
}

.fixtures {
  margin-top: 18px;
  padding: 0 18px 18px;
  background: var(--surface-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.fixtures summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  color: var(--primary-dark);
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
}

.fixtures__help {
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.55;
}

.fixtures__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fixtures__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.fixtures__label {
  display: grid;
  gap: 2px;
}

.fixtures__label strong {
  font-size: 14px;
}

.fixtures__label small {
  color: var(--ink-soft);
  font-size: 12px;
}

.counter {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
}

.counter button {
  width: 44px;
  height: 44px;
  color: var(--primary-dark);
  font-size: 20px;
  font-weight: 700;
  background: var(--primary-pale);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 180ms ease;
}

.counter button:hover {
  background: #d3ecf2;
}

.counter output {
  min-width: 30px;
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.fixtures__total {
  display: grid;
  gap: 3px;
  margin: 14px 0 0;
  padding: 12px 14px;
  background: var(--primary-pale);
  border-radius: var(--radius-sm);
  font-size: 14px;
}

.fixtures__total small {
  color: #365967;
  font-size: 12px;
  line-height: 1.5;
}

/* Shown only on the printed handout, where the sidebar with the answers is gone. */
.result-conditions {
  display: none;
}

.model-group {
  margin-top: 18px;
  padding: 18px;
  border-radius: 15px;
}

.model-group--verify {
  background: var(--warning-pale);
  border: 1px solid #efcab8;
}

.model-group--conditional {
  padding: 0 18px 18px;
  background: white;
  border: 1px solid #cddfe1;
}

.model-group--conditional summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  color: var(--primary-dark);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.model-group__head h4 {
  margin: 0;
  font-size: 15px;
}

.model-group p {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.55;
}

.model-group .model-grid {
  margin-top: 13px;
}

.model-alternatives {
  margin-top: 14px;
}

.model-alternatives summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.model-grid--alternatives {
  margin-top: 9px;
}

.series-overview {
  margin-top: 16px;
  padding: 0 16px 16px;
  background: white;
  border: 1px solid #cddfe1;
  border-radius: 15px;
}

.series-overview summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  color: var(--primary-dark);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.series-overview > p {
  margin: -2px 0 13px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.5;
}

.series-overview__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.series-overview__grid li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 9px;
  min-width: 0;
  padding: 11px 12px;
  background: #f2f7f7;
  border: 1px solid #dce8e9;
  border-radius: 11px;
}

.series-overview__series {
  align-self: start;
  grid-row: 1 / span 3;
  padding: 4px 7px;
  color: var(--primary-dark);
  background: #e1f1f3;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.035em;
}

.series-overview__grid strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 14px;
}

.series-overview__grid span:not(.series-overview__series),
.series-overview__grid small {
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.4;
}

.model-card--compact {
  box-shadow: none;
}

.catalog-data-note {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding-top: 15px;
  color: var(--ink-soft);
  border-top: 1px solid #d6e3e4;
  font-size: 11px;
}

.catalog-data-note svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--primary-dark);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.reason-list,
.check-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reason-list li,
.check-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 13px 15px;
  background: var(--success-pale);
  border-radius: 12px;
}

.reason-list svg,
.check-list svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  margin-top: 2px;
  fill: none;
  stroke: var(--success);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.reason-list span,
.check-list span {
  font-size: 14px;
}

.risk-list {
  display: grid;
  gap: 12px;
}

.risk-card {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  padding: 17px;
  background: var(--warning-pale);
  border: 1px solid #f4cfbc;
  border-radius: 16px;
}

.risk-card--danger {
  background: var(--danger-pale);
  border-color: #efc7c8;
}

.risk-card__icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: var(--warning);
  background: white;
  border-radius: 13px;
}

.risk-card--danger .risk-card__icon {
  color: var(--danger);
}

.risk-card__icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.risk-card h4 {
  margin: 1px 0 5px;
  font-size: 16px;
  line-height: 1.25;
}

.risk-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
}

.risk-card strong {
  color: var(--ink);
}

.result-note {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  padding: 16px;
  color: #4f5f65;
  background: #f4f5f3;
  border-left: 4px solid #9babae;
  border-radius: 0 12px 12px 0;
  font-size: 12px;
}

.result-note svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.disclaimer {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 50px;
  margin-bottom: 80px;
  padding: 22px 24px;
  background: #fff9e9;
  border: 1px solid #ebdba8;
  border-radius: var(--radius-md);
}

.disclaimer svg {
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  color: #8a6717;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.disclaimer p {
  margin: 0;
  color: #64593c;
  font-size: 14px;
}

footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 36px 0 44px;
  border-top: 1px solid rgba(20, 48, 61, 0.12);
}

footer p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
}

.footer-meta {
  display: flex;
  align-items: center;
  gap: 22px;
}

.footer-admin-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 750;
  text-decoration: underline;
  text-decoration-color: rgba(7, 92, 121, 0.3);
  text-underline-offset: 4px;
}

.footer-admin-link:hover {
  text-decoration-color: currentColor;
}

.brand--footer {
  font-size: 17px;
}

@media (max-width: 1020px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .hero__copy {
    max-width: 750px;
  }

  .hero__visual {
    width: min(100%, 760px);
  }

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

  .answer-summary {
    order: -1;
  }

  .answer-summary__content {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 18px;
  }

  .summary-item {
    min-width: 0;
  }

  .summary-note {
    display: none;
  }
}

@media (max-width: 760px) {
  .site-header,
  .hero,
  .how,
  .wizard-shell,
  .disclaimer,
  footer {
    width: min(calc(100% - 28px), var(--max));
  }

  .site-header {
    min-height: 70px;
  }

  .header-actions {
    gap: 8px;
  }

  .market-picker {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .market-picker > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .market-picker select {
    max-width: 145px;
  }

  .header-link {
    display: none;
  }

  .hero {
    min-height: auto;
    padding: 42px 0 68px;
  }

  h1 {
    font-size: clamp(39px, 12vw, 56px);
  }

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

  .hero__actions .button {
    width: 100%;
  }

  .hero__image-wrap {
    aspect-ratio: 1 / 0.92;
    border-width: 5px;
    border-radius: 26px 26px 26px 70px;
  }

  .hero__callout {
    display: none;
  }

  .how {
    padding: 64px 0 74px;
  }

  .how__grid {
    grid-template-columns: 1fr;
  }

  .how__grid li {
    min-height: auto;
  }

  .wizard-shell {
    margin-top: 18px;
    border-radius: 20px;
  }

  .wizard-topbar,
  .progress,
  .wizard-layout {
    padding-right: 20px;
    padding-left: 20px;
  }

  .wizard-layout {
    gap: 28px;
    padding-top: 28px;
  }

  .wizard-brand {
    font-size: 15px;
  }

  .text-button {
    font-size: 13px;
  }

  .option-grid {
    grid-template-columns: 1fr;
  }

  /* A full-width drawing per option would turn five options into a very long
     scroll, so the phone keeps the compact row with the drawing beside the text. */
  .option-card {
    grid-template-rows: none;
    grid-template-columns: 116px 1fr;
    align-items: center;
    min-height: 116px;
  }

  .option-card__visual {
    width: 116px;
    align-self: stretch;
    aspect-ratio: auto;
    border-bottom: none;
    border-right: 1px solid var(--line);
    border-radius: 16px 0 0 16px;
  }

  .option-card__visual svg {
    height: auto;
  }

  .option-card[aria-checked="true"] .option-card__visual {
    border-right-color: #a9d3dd;
  }

  .option-card__body {
    padding: 12px 14px;
  }

  .wizard-actions .button {
    flex: 1;
    padding-inline: 14px;
  }

  .answer-summary__content {
    grid-template-columns: repeat(2, 1fr);
  }

  .answer-summary {
    order: 0;
  }

  .spec-grid {
    grid-template-columns: 1fr;
  }

    footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}

@media (max-width: 420px) {
  .wizard-topbar {
    min-height: 66px;
  }

  .wizard-brand svg {
    display: none;
  }

  .brand > span {
    display: none;
  }

  .brand--footer > span {
    display: inline;
  }

  .answer-summary__content {
    grid-template-columns: 1fr;
  }

  .risk-card {
    grid-template-columns: 1fr;
  }

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

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

  .catalog-section {
    padding: 17px;
  }

  .catalog-heading,
  .model-card__top {
    align-items: flex-start;
    flex-direction: column;
  }

  .model-facts {
    grid-template-columns: 1fr;
  }

      .control-combination__head {
    grid-template-columns: 1fr;
  }

  .control-bundle__items {
    grid-template-columns: 1fr;
  }

  .series-overview__grid {
    grid-template-columns: 1fr;
  }
}

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

@media print {
  body {
    background: white;
  }

  .site-header,
  .hero,
  .how,
  .wizard-topbar,
  .progress,
  #question-view,
  .wizard-actions,
  .answer-summary,
  .disclaimer,
  footer,
  .result-actions {
    display: none !important;
  }

  .supplier-empty,
  .supplier-links,
  .model-alternatives {
    display: none !important;
  }

  .wizard-section,
  .wizard-shell,
  .wizard-layout {
    width: 100%;
    margin: 0;
    padding: 0;
    background: white;
    border: 0;
    box-shadow: none;
  }

  #result-view {
    display: block !important;
  }

  .result-conditions {
    display: block;
    margin: 16px 0;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    break-inside: avoid;
  }

  .result-conditions h3 {
    margin: 0 0 10px;
    font-size: 13pt;
  }

  .result-conditions dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 20px;
    margin: 0;
  }

  .result-conditions dl div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px dotted var(--line);
  }

  .result-conditions dt {
    color: var(--ink-soft);
  }

  .result-conditions dd {
    margin: 0;
    font-weight: 700;
    text-align: right;
  }

  .result-conditions p {
    margin: 10px 0 0;
    color: var(--ink-soft);
    font-size: 9pt;
  }

  .model-group--conditional,
  .model-group--verify {
    break-inside: avoid;
  }

  .result-hero {
    color: var(--ink);
    background: white;
    border: 2px solid var(--primary);
  }

  .result-hero p {
    color: var(--ink-soft);
  }

  .risk-card,
  .spec-card,
  .reason-list li,
  .check-list li,
  }