:root {
  --paper: #f5f2ea;
  --panel: #fffdf8;
  --ink: #17211e;
  --muted: #68716d;
  --line: #d8d9d2;
  --accent: #e9684a;
  --accent-dark: #b94730;
  --green: #2e7465;
  --green-soft: #e2eee9;
  --shadow: 0 18px 50px rgba(30, 39, 35, 0.08);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 8% 7%, rgba(233, 104, 74, 0.08), transparent 25rem),
    radial-gradient(circle at 92% 28%, rgba(46, 116, 101, 0.07), transparent 28rem),
    var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
input:focus-visible,
summary:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(233, 104, 74, 0.35);
  outline-offset: 3px;
}

main {
  min-height: 100vh;
  overflow: hidden;
}

.site-header {
  width: min(1440px, calc(100% - 56px));
  margin: 0 auto;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(23, 33, 30, 0.15);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.brand-mark {
  width: 33px;
  height: 25px;
  border: 2px solid var(--ink);
  border-radius: 7px;
  display: grid;
  place-items: center;
  position: relative;
}

.brand-mark::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 5px;
  left: 3px;
  top: -6px;
  border: 2px solid var(--ink);
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
}

.brand-mark span {
  width: 11px;
  height: 11px;
  border: 2px solid var(--ink);
  border-radius: 50%;
}

.header-note,
.live-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.site-nav a {
  color: #4f5955;
  font-size: 12px;
  font-weight: 720;
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--accent-dark);
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 18px;
}

.status-dot,
.live-label span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(46, 116, 101, 0.11);
}

.intro {
  width: min(1180px, calc(100% - 56px));
  margin: 0 auto;
  padding: 82px 0 64px;
  position: relative;
}

.intro::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -170px;
  top: 20px;
  border: 1px solid rgba(23, 33, 30, 0.1);
  border-radius: 50%;
  box-shadow: 0 0 0 54px rgba(23, 33, 30, 0.025), 0 0 0 108px rgba(23, 33, 30, 0.018);
  pointer-events: none;
}

.eyebrow,
.section-kicker {
  margin: 0 0 14px;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.intro h1 {
  margin: 0;
  max-width: 830px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(43px, 6vw, 78px);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.intro-copy {
  max-width: 650px;
  margin: 28px 0 0;
  color: #56615c;
  font-size: 19px;
  line-height: 1.65;
}

.mode-picker {
  max-width: 920px;
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  position: relative;
  z-index: 1;
}

.mode-picker > a {
  min-height: 190px;
  padding: 24px;
  border: 1px solid rgba(23, 33, 30, 0.2);
  border-radius: 14px;
  background: rgba(255, 253, 248, 0.82);
  box-shadow: 0 8px 28px rgba(30, 39, 35, 0.05);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  cursor: pointer;
  color: inherit;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  text-align: left;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.mode-picker > a::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--accent);
}

.mode-picker > a:last-child::before {
  background: var(--green);
}

.mode-picker > a:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}

.mode-picker > a:first-child {
  border-color: var(--ink);
  background: var(--ink);
  color: #fffdf8;
}

.mode-picker small {
  color: var(--accent-dark);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.mode-picker > a:first-child small {
  color: #f5a08c;
}

.mode-picker b {
  margin-top: 9px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
  font-weight: 500;
  letter-spacing: -0.035em;
}

.mode-picker span {
  max-width: 350px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.mode-picker > a:first-child span {
  color: #cbd2cf;
}

.mode-picker em {
  margin-top: auto;
  padding-top: 18px;
  color: var(--green);
  font-size: 10px;
  font-style: normal;
  font-weight: 820;
}

.mode-picker > a:first-child em {
  color: #8ed1be;
}

.route-intro {
  padding-bottom: 48px;
}

.route-back {
  width: fit-content;
  margin-bottom: 44px;
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  text-decoration: none;
}

.route-back:hover {
  color: var(--accent-dark);
}

.intro-actions {
  margin-top: 30px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px 20px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.primary-link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  border-radius: 9px;
  background: var(--ink);
  color: #fffdf8;
  font-size: 12px;
  font-weight: 780;
  text-decoration: none;
}

.primary-link:hover {
  background: var(--accent-dark);
}

.promise-row {
  margin-top: 38px;
  max-width: 850px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  color: #46504c;
  font-size: 13px;
  font-weight: 700;
}

.promise-row a {
  min-height: 82px;
  padding: 13px;
  border: 1px solid rgba(23, 33, 30, 0.15);
  border-radius: 9px;
  background: rgba(255, 253, 248, 0.58);
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: center;
  gap: 3px 9px;
  color: inherit;
  text-decoration: none;
}

.promise-row a:hover {
  border-color: var(--ink);
  background: #fffdf8;
}

.promise-row a span {
  align-self: center;
  font-size: 11px;
}

.promise-row b {
  color: var(--accent-dark);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.promise-row em {
  grid-column: 2;
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
  font-weight: 650;
}

.retired-rail {
  display: none;
}

.notice-banner {
  width: min(1440px, calc(100% - 56px));
  margin: 0 auto 18px;
  padding: 12px 16px;
  border: 1px solid #e4c9a4;
  border-radius: 10px;
  background: #fff4df;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #67553c;
  font-size: 11px;
  line-height: 1.5;
}

.notice-banner strong {
  flex: 0 0 auto;
  color: #5b4022;
}

.app-shell {
  width: min(1440px, calc(100% - 56px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(520px, 0.95fr) minmax(520px, 1.05fr);
  gap: 24px;
  align-items: start;
}

.questionnaire {
  scroll-margin-top: 24px;
}

.questionnaire-panel {
  width: min(980px, calc(100% - 56px));
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
}

.questionnaire-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--accent) 0 34%, #efa67e 34% 67%, var(--green) 67%);
}

.priority-grid {
  grid-template-columns: repeat(3, 1fr);
}

.expert-five-grid {
  grid-template-columns: repeat(5, 1fr);
}

.advanced-pair {
  margin-top: 17px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.advanced-pair > div > b {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
}

.compact-options {
  grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));
}

.advanced-toggle-grid {
  margin-top: 15px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.advanced-toggle-grid button {
  min-height: 108px;
  padding: 17px;
  border: 1px solid #d5d6d0;
  border-radius: 11px;
  background: #faf8f2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  cursor: pointer;
  text-align: left;
}

.advanced-toggle-grid button.is-selected {
  border-color: var(--green);
  background: #edf6f2;
}

.advanced-toggle-grid b {
  font-size: 13px;
}

.advanced-toggle-grid span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.advanced-toggle-grid em {
  margin-top: auto;
  padding-top: 12px;
  color: var(--green);
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
  text-transform: uppercase;
}

.calculate-bar {
  margin: 30px -30px -30px;
  padding: 22px 30px;
  border-radius: 0 0 12px 12px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: #fffdf8;
}

.calculate-bar > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.calculate-bar b {
  font-size: 13px;
}

.calculate-bar span {
  color: #bdc7c2;
  font-size: 10px;
}

.calculate-bar button {
  min-width: 210px;
  padding: 14px 18px;
  border: 0;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font-size: 11px;
  font-weight: 850;
}

.calculate-bar button:hover {
  background: #f0785d;
}

.calculate-bar button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.result-stage {
  width: min(1240px, calc(100% - 56px));
  margin: 0 auto;
  scroll-margin-top: 24px;
}

.result-stage-heading {
  margin-bottom: 18px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.result-stage-heading .section-kicker {
  margin-bottom: 7px;
}

.result-stage-heading h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 4vw, 50px);
  font-weight: 500;
  letter-spacing: -0.045em;
}

.result-stage-heading button {
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid #a7aaa5;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 760;
}

.result-stage-heading button:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.result-cards {
  padding: 30px;
  position: static;
}

.offer-card-wide {
  width: 100%;
}

.preferences-panel,
.results-panel {
  background: var(--panel);
  border: 1px solid rgba(23, 33, 30, 0.13);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.preferences-panel {
  padding: 30px;
}

.results-panel {
  padding: 30px;
  position: sticky;
  top: 18px;
}

.panel-heading,
.results-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.panel-heading h2,
.results-heading h2,
.method-note h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 31px;
  font-weight: 500;
  letter-spacing: -0.035em;
}

.panel-heading .section-kicker,
.results-heading .section-kicker {
  margin-bottom: 7px;
}

.reset-button {
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid #a7aaa5;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.reset-button:hover {
  color: var(--ink);
  border-color: var(--ink);
}

fieldset {
  margin: 0;
  padding: 27px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
}

fieldset:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

legend {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  font-size: 15px;
  font-weight: 780;
  letter-spacing: -0.01em;
}

legend > span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  background: #ebe8df;
  color: #6c6c66;
  font-size: 11px;
}

.field-help {
  margin: 7px 0 14px 34px;
  color: var(--muted);
  font-size: 12px;
}

.choice-grid {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.uses-grid {
  grid-template-columns: repeat(3, 1fr);
}

.budget-grid,
.video-grid {
  grid-template-columns: repeat(5, 1fr);
}

.experience-grid,
.lens-grid {
  grid-template-columns: repeat(3, 1fr);
}

.camera-form-grid {
  grid-template-columns: repeat(4, 1fr);
}

.choice-button {
  min-height: 46px;
  padding: 11px 12px;
  border: 1px solid #d5d6d0;
  border-radius: 10px;
  background: #faf8f2;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.choice-button:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 18px rgba(30, 39, 35, 0.06);
  transform: translateY(-1px);
}

.choice-button.is-selected {
  border-color: var(--ink);
  background: linear-gradient(145deg, #17211e, #263b35);
  color: #fffdf8;
}

.choice-label {
  font-size: 12px;
  font-weight: 730;
  line-height: 1.25;
}

.choice-hint {
  margin-top: 4px;
  color: #7d8581;
  font-size: 10px;
  line-height: 1.3;
}

.choice-button.is-selected .choice-hint {
  color: #cbd1ce;
}

.range-fieldset {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 28px;
}

.range-fieldset legend {
  grid-column: 1 / -1;
}

.range-control {
  display: block;
  padding: 17px;
  border: 1px solid #d5d6d0;
  border-radius: 12px;
  background: #faf8f2;
}

.single-range {
  max-width: 820px;
}

.range-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

.range-label em {
  color: var(--accent-dark);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.range-help {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

input[type="range"] {
  width: 100%;
  height: 4px;
  margin: 20px 0 3px;
  border-radius: 10px;
  background: #d4d6d1;
  accent-color: var(--accent);
  cursor: pointer;
}

.range-scale {
  margin-top: 10px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  color: #7a827e;
}

.range-scale small {
  max-width: 105px;
  font-size: 8px;
  line-height: 1.25;
  text-align: center;
}

.range-scale small:first-child {
  text-align: left;
}

.range-scale small:last-child {
  text-align: right;
}

.weight-feedback {
  min-height: 35px;
  margin-top: 13px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--green-soft);
  display: block;
  color: var(--green);
  font-size: 10px;
  font-weight: 780;
  line-height: 1.45;
}

.results-heading {
  margin-bottom: 20px;
}

.recommendation-card {
  padding: 20px;
  border: 1px solid var(--line);
  background: #fff;
}

.recommendation-card.is-featured {
  padding: 24px;
  border: 1.5px solid var(--ink);
  background: #fcfaf5;
  box-shadow: 6px 6px 0 rgba(23, 33, 30, 0.09);
}

.card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.rank-label {
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.match-score {
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green);
  font-size: 11px;
  font-weight: 850;
}

.camera-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
}

.camera-mark {
  --camera-accent: #e9684a;
  width: 78px;
  height: 54px;
  border-radius: 9px 9px 12px 12px;
  background: var(--camera-accent);
  position: relative;
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, 0.08);
  flex: 0 0 auto;
}

.camera-top {
  position: absolute;
  width: 27px;
  height: 10px;
  left: 9px;
  top: -7px;
  border-radius: 5px 5px 1px 1px;
  background: var(--camera-accent);
}

.camera-lens {
  position: absolute;
  width: 38px;
  height: 38px;
  left: 20px;
  top: 8px;
  border: 5px solid #fffdf8;
  border-radius: 50%;
  background: #182522;
  display: grid;
  place-items: center;
}

.camera-lens span {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: -3px -3px 0 rgba(255, 255, 255, 0.1);
}

.camera-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  right: 9px;
  top: 9px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
}

.camera-brand {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.camera-heading h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.camera-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.camera-price strong {
  font-size: 17px;
  letter-spacing: -0.03em;
}

.camera-price span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

.spec-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 20px 0;
}

.spec-row span {
  padding: 6px 9px;
  border: 1px solid #dedfd9;
  border-radius: 999px;
  background: #f6f4ee;
  color: #505a56;
  font-size: 10px;
  font-weight: 700;
}

.fit-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.fit-grid h3 {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

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

.reason-list li,
.tradeoff-list li {
  position: relative;
  padding-left: 16px;
  color: #4f5955;
  font-size: 11px;
  line-height: 1.45;
}

.reason-list li::before,
.tradeoff-list li::before {
  position: absolute;
  left: 0;
  top: 1px;
  font-weight: 900;
}

.reason-list li::before {
  content: "+";
  color: var(--green);
}

.tradeoff-list li::before {
  content: "–";
  color: var(--accent-dark);
}

.score-details {
  margin-top: 15px;
}

.score-details summary {
  width: fit-content;
  color: #4f5955;
  cursor: pointer;
  font-size: 11px;
  font-weight: 780;
}

.score-parts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
  margin-top: 14px;
}

.score-part-label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.score-track {
  height: 4px;
  border-radius: 99px;
  background: #e4e5e0;
  overflow: hidden;
}

.score-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
}

.details-button {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #cfd2cc;
  border-radius: 8px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: #46504c;
  font-size: 10px;
  font-weight: 800;
}

.manufacturer-button {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--green);
  border-radius: 8px;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
}

.manufacturer-button:hover {
  border-color: #215a49;
  background: #215a49;
}

.details-button:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.card-actions {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.alternatives {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}

.alternatives .recommendation-card {
  min-width: 0;
}

.alternatives .camera-mark {
  width: 56px;
  height: 40px;
}

.alternatives .camera-top {
  width: 20px;
  height: 8px;
  top: -6px;
}

.alternatives .camera-lens {
  width: 29px;
  height: 29px;
  left: 14px;
  top: 6px;
  border-width: 4px;
}

.alternatives .camera-lens span {
  width: 9px;
  height: 9px;
}

.alternatives .camera-heading {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
}

.alternatives .camera-heading h2 {
  font-size: 21px;
}

.alternatives .camera-price {
  grid-column: 1 / -1;
  align-items: flex-start;
  margin-top: 3px;
}

.alternatives .camera-price strong {
  font-size: 15px;
}

.alternatives .fit-grid {
  grid-template-columns: 1fr;
  gap: 15px;
}

.alternatives .score-parts {
  grid-template-columns: 1fr;
}

.runners-section {
  width: min(1240px, calc(100% - 56px));
  margin: 72px auto 0;
}

.runners-heading {
  margin-bottom: 22px;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(280px, 0.55fr);
  align-items: end;
  gap: 32px;
}

.runners-heading h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 4vw, 50px);
  font-weight: 500;
  letter-spacing: -0.045em;
}

.runners-heading > p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.runners-track {
  padding: 2px 2px 17px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(270px, 31%);
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-color: #a8b5b0 transparent;
}

.runner-card {
  min-height: 342px;
  padding: 20px;
  border: 1px solid rgba(23, 33, 30, 0.14);
  border-radius: 14px;
  background: rgba(255, 253, 248, 0.92);
  box-shadow: 0 9px 26px rgba(23, 33, 30, 0.06);
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
}

.runner-topline,
.runner-specs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.runner-topline {
  justify-content: space-between;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.runner-topline b {
  color: var(--green);
}

.runner-camera {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.runner-camera p,
.runner-camera h3 {
  margin: 0;
}

.runner-camera p {
  color: var(--muted);
  font-size: 9px;
  font-weight: 760;
  text-transform: uppercase;
}

.runner-camera h3 {
  margin-top: 2px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.035em;
}

.runner-specs {
  margin-top: 17px;
}

.runner-specs span {
  padding: 5px 7px;
  border-radius: 99px;
  background: #efede5;
  color: #56605c;
  font-size: 8px;
  font-weight: 750;
}

.runner-reason,
.runner-tradeoff {
  margin: 15px 0 0;
  color: #53605b;
  font-size: 10px;
  line-height: 1.55;
}

.runner-tradeoff {
  margin-top: 8px;
  color: var(--muted);
}

.runner-card button {
  width: 100%;
  margin-top: auto;
  padding: 11px 12px;
  border: 1px solid #cfd2cc;
  border-radius: 8px;
  background: transparent;
  color: #46504c;
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
  text-align: left;
}

.runner-card button:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.deep-dive,
.wide-section,
.why-section {
  width: min(1240px, calc(100% - 56px));
  margin: 110px auto 0;
  scroll-margin-top: 24px;
}

.section-intro {
  max-width: 770px;
  margin-bottom: 34px;
}

.section-intro h2,
.why-heading h2,
.deep-dive h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(36px, 4vw, 54px);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.04;
}

.section-intro > p:last-child {
  max-width: 650px;
  margin: 16px 0 0;
  color: #56615c;
  font-size: 15px;
  line-height: 1.65;
}

.split-heading {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 30px;
}

.split-heading > div:first-child {
  max-width: 720px;
}

.camera-tabs {
  display: flex;
  gap: 8px;
}

.camera-tabs button {
  min-width: 112px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #faf8f2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
}

.camera-tabs button small {
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.camera-tabs button.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.camera-tabs button.is-active small {
  color: #bfc8c4;
}

.deep-dive-grid {
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  gap: 20px;
}

.advice-detail-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.advice-detail-grid article {
  min-height: 230px;
  padding: 24px;
  border: 1px solid rgba(23, 33, 30, 0.14);
  border-radius: 12px;
  background: rgba(255, 253, 248, 0.9);
  display: flex;
  flex-direction: column;
}

.advice-detail-grid h3 {
  margin: 9px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.advice-detail-grid article > p:not(.section-kicker) {
  margin: 15px 0 0;
  color: #53605b;
  font-size: 11px;
  line-height: 1.6;
}

.advice-detail-grid article > span {
  margin-top: auto;
  padding-top: 18px;
  color: var(--green);
  font-size: 9px;
  font-weight: 800;
}

.hero-camera-card,
.attributes-card,
.offer-card,
.history-card,
.kit-card {
  border: 1px solid rgba(23, 33, 30, 0.14);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.hero-camera-card,
.attributes-card {
  padding: 30px;
}

.hero-camera-card {
  background: var(--ink);
  color: #fffdf8;
}

.hero-camera-top {
  display: flex;
  align-items: center;
  gap: 22px;
}

.camera-mark.is-large {
  transform: scale(1.18);
  margin: 9px;
}

.hero-camera-top p {
  margin: 0 0 3px;
  color: #b8c1bd;
  font-size: 10px;
  font-weight: 780;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero-camera-top h3 {
  margin: 0 0 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 35px;
  font-weight: 500;
  letter-spacing: -0.04em;
}

.hero-camera-top > div span {
  padding: 5px 8px;
  border-radius: 99px;
  background: #dcebe5;
  color: var(--green);
  font-size: 10px;
  font-weight: 850;
}

.decision-copy {
  margin: 28px 0 0;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  color: #d7ddda;
  font-size: 15px;
  line-height: 1.65;
}

.decision-copy b {
  color: #fff;
}

.decision-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-top: 23px;
}

.decision-columns h4 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-camera-card .reason-list li,
.hero-camera-card .tradeoff-list li {
  color: #c7cfcb;
  font-size: 12px;
}

.hero-camera-card .reason-list li::before {
  color: #7ec3af;
}

.hero-camera-card .tradeoff-list li::before {
  color: #f39b86;
}

.source-link {
  width: fit-content;
  margin-top: 24px;
  display: inline-flex;
  gap: 10px;
  color: #fff;
  font-size: 11px;
  font-weight: 780;
  text-underline-offset: 4px;
}

.subsection-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 25px;
}

.subsection-heading .section-kicker {
  margin-bottom: 6px;
}

.subsection-heading h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
  font-weight: 500;
  letter-spacing: -0.035em;
}

.attribute-row {
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.attribute-label {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 10px;
}

.attribute-label > span {
  display: flex;
  flex-direction: column;
}

.attribute-label b {
  font-size: 12px;
}

.attribute-label small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.attribute-label strong {
  color: var(--green);
  font-size: 11px;
}

.attribute-track {
  height: 6px;
  border-radius: 99px;
  background: #e4e5df;
  overflow: hidden;
}

.attribute-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
}

.friendly-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 17px;
}

.friendly-specs span {
  min-height: 76px;
  padding: 12px;
  border-radius: 9px;
  background: #f0ede5;
  display: flex;
  flex-direction: column;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}

.friendly-specs b {
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 11px;
}

.comparison-scroll {
  overflow-x: auto;
  border: 1px solid rgba(23, 33, 30, 0.14);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.comparison-picker {
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid rgba(23, 33, 30, 0.14);
  border-radius: 13px;
  background: rgba(255, 253, 248, 0.88);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.comparison-picker label {
  min-width: 0;
}

.comparison-picker label > span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.comparison-picker select {
  width: 100%;
  min-height: 44px;
  padding: 10px 36px 10px 12px;
  border: 1px solid #cfd2cc;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 720;
}

.comparison-picker select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.comparison-empty {
  padding: 22px;
  border: 1px dashed #b9bdb7;
  color: var(--muted);
  text-align: center;
}

.comparison-table {
  width: 100%;
  min-width: 830px;
  border-collapse: collapse;
  table-layout: fixed;
}

.comparison-table th,
.comparison-table td {
  padding: 17px 20px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-size: 12px;
  line-height: 1.45;
}

.comparison-table th:last-child,
.comparison-table td:last-child {
  border-right: 0;
}

.comparison-table tbody tr:last-child th,
.comparison-table tbody tr:last-child td {
  border-bottom: 0;
}

.comparison-table thead th {
  padding-top: 21px;
  padding-bottom: 21px;
  background: var(--ink);
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 500;
}

.comparison-table thead th:first-child {
  color: #bfc8c4;
  font-family: inherit;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.compare-rank {
  display: block;
  margin-bottom: 3px;
  color: #aebbb6;
  font-family: Inter, sans-serif;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.comparison-table tbody th {
  background: #f4f1e9;
}

.comparison-table tbody th b,
.comparison-table tbody th small {
  display: block;
}

.comparison-table tbody th b {
  font-size: 11px;
}

.comparison-table tbody th small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 500;
}

.comparison-value {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.comparison-value b {
  font-size: 12px;
}

.comparison-value small {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}

.table-explainer {
  margin-top: 9px;
}

.table-explainer summary {
  width: fit-content;
  color: var(--accent-dark);
  cursor: pointer;
  font-size: 8px;
  font-weight: 800;
}

.table-explainer p {
  min-width: 170px;
  margin: 7px 0 0;
  color: #56615c;
  font-size: 8px;
  font-weight: 500;
  line-height: 1.5;
}

.purchase-section {
  scroll-margin-top: 24px;
}

.price-layout {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 20px;
}

.offer-card,
.history-card,
.kit-card {
  padding: 28px;
}

.catalog-pill,
.signal-pill {
  padding: 6px 9px;
  border-radius: 999px;
  background: #eeeae1;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}

.signal-goede-prijs {
  background: var(--green-soft);
  color: var(--green);
}

.signal-eerder-wachten {
  background: #fff0e8;
  color: var(--accent-dark);
}

.offer-list {
  display: grid;
  gap: 8px;
}

.offer-row {
  min-height: 70px;
  padding: 14px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  display: grid;
  grid-template-columns: minmax(130px, 1fr) auto 108px;
  align-items: center;
  gap: 12px;
  position: relative;
}

.offer-link {
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid var(--green);
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  color: var(--green);
  font-size: 8px;
  font-weight: 850;
  text-align: center;
  text-decoration: none;
}

.offer-link:hover {
  background: var(--green);
  color: #fff;
}

.offer-link.is-disabled {
  margin: 0;
  border-color: #d5d6d0;
  background: #f2f0e9;
  color: #858b87;
}

.offer-row.is-best {
  border-color: var(--green);
  background: #f3f9f6;
}

.offer-row > div {
  display: flex;
  flex-direction: column;
}

.offer-row > div:nth-child(2) {
  align-items: flex-end;
}

.offer-row b,
.offer-row strong {
  font-size: 12px;
}

.offer-row span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
}

.offer-row .old-price {
  margin: 0 0 1px;
  color: #8d5a4d;
  font-size: 8px;
  text-decoration: line-through;
}

.offer-row em {
  position: absolute;
  right: 8px;
  top: -7px;
  padding: 3px 6px;
  border-radius: 99px;
  background: var(--green);
  color: #fff;
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.feed-status {
  margin-top: 14px;
  padding: 14px;
  border: 1px dashed #a9c9bd;
  border-radius: 9px;
  background: #f4f8f6;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.feed-status .status-dot {
  margin-top: 4px;
  flex: 0 0 auto;
}

.feed-status b {
  font-size: 10px;
}

.feed-status p {
  margin: 4px 0 0;
  color: #59635f;
  font-size: 9px;
  line-height: 1.5;
}

@media (min-width: 1640px) {
  .retired-rail {
    width: 104px;
    min-height: 330px;
    padding: 13px 10px;
    border: 1px dashed rgba(23, 33, 30, 0.2);
    border-radius: 10px;
    background: rgba(255, 253, 248, 0.62);
    position: fixed;
    top: 160px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: var(--muted);
  }

  .retired-rail-left {
    left: 12px;
  }

  .retired-rail-right {
    right: 12px;
  }

  .retired-rail > span {
    position: absolute;
    left: 50%;
    top: 12px;
    transform: translateX(-50%);
    font-size: 7px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .retired-rail div {
    color: #59625e;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.35;
  }

  .retired-rail small {
    margin-top: 5px;
    font-size: 7px;
    line-height: 1.4;
  }
}

.history-chart {
  height: 170px;
  padding: 18px 4px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.history-column {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
}

.history-column > span {
  width: 100%;
  max-width: 36px;
  border-radius: 5px 5px 0 0;
  background: #c7dcd4;
}

.history-column:last-child > span {
  background: var(--green);
}

.history-column small {
  color: var(--muted);
  font-size: 8px;
}

.history-card > p {
  margin: 18px 0 5px;
  color: #4e5954;
  font-size: 12px;
  line-height: 1.55;
}

.history-card > small {
  color: var(--muted);
  font-size: 8px;
}

.kit-card {
  margin-top: 20px;
  scroll-margin-top: 24px;
}

.kit-heading {
  align-items: center;
}

.kit-total {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.kit-total span {
  color: var(--muted);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.kit-total strong {
  margin-top: 3px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  font-weight: 500;
}

.kit-intro {
  max-width: 680px;
  margin: -8px 0 22px;
  color: #56615c;
  font-size: 12px;
  line-height: 1.6;
}

.kit-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.kit-item {
  min-height: 80px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  cursor: pointer;
}

.kit-item.is-selected,
.kit-item.body-item {
  border-color: #a9c9bd;
  background: #f3f8f5;
}

.kit-item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.kit-check {
  width: 25px;
  height: 25px;
  border: 1px solid #bcc0bb;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.kit-item.is-selected .kit-check,
.kit-check.is-fixed {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

.kit-item > div {
  display: flex;
  flex-direction: column;
}

.kit-item b,
.kit-item > strong {
  font-size: 11px;
}

.kit-item > div span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.4;
}

.kit-item > strong {
  color: #46504c;
}

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

.jargon-card {
  border: 1px solid rgba(23, 33, 30, 0.14);
  background: var(--panel);
}

.jargon-card summary {
  min-height: 92px;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  cursor: pointer;
  list-style: none;
}

.jargon-card summary::-webkit-details-marker {
  display: none;
}

.jargon-card summary > span {
  display: flex;
  flex-direction: column;
}

.jargon-card summary b {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-weight: 500;
}

.jargon-card summary small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 9px;
}

.jargon-card summary em {
  color: var(--accent-dark);
  font-size: 20px;
  font-style: normal;
}

.jargon-card[open] summary em {
  transform: rotate(45deg);
}

.jargon-card p {
  margin: 0;
  padding: 0 18px 18px;
  color: #56615c;
  font-size: 11px;
  line-height: 1.6;
}

.why-section {
  padding: 48px;
  background: var(--ink);
  color: #fff;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 55px;
}

.why-heading .section-kicker {
  color: #f39b86;
}

.why-heading h2 {
  font-size: clamp(35px, 4vw, 51px);
}

.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.why-grid article {
  padding: 3px 24px 26px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.why-grid article:nth-child(n+3) {
  padding-top: 25px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.why-grid article > b {
  color: #f39b86;
  font-size: 9px;
  letter-spacing: 0.08em;
}

.why-grid h3 {
  margin: 7px 0 6px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-weight: 500;
}

.why-grid p {
  margin: 0;
  color: #bdc7c2;
  font-size: 10px;
  line-height: 1.55;
}

.method-note {
  width: min(880px, calc(100% - 56px));
  margin: 105px auto 90px;
  padding-left: 26px;
  border-left: 3px solid var(--accent);
}

.method-note p:last-child {
  margin: 15px 0 0;
  color: #56615c;
  font-size: 16px;
  line-height: 1.7;
}

footer {
  width: min(1440px, calc(100% - 56px));
  margin: 0 auto;
  padding: 28px 0 40px;
  border-top: 1px solid rgba(23, 33, 30, 0.17);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

footer p {
  max-width: 850px;
  margin: 0;
}

footer span {
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 1fr;
    max-width: 860px;
  }

  .questionnaire-panel,
  .result-stage {
    max-width: 860px;
  }

  .results-panel {
    position: static;
  }

  .intro {
    max-width: 860px;
  }

  .site-nav {
    display: none;
  }

  .header-tools {
    margin-left: auto;
  }

  .split-heading {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .runners-heading {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .deep-dive-grid,
  .price-layout {
    grid-template-columns: 1fr;
  }

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

  .why-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .site-header,
  .intro,
  .app-shell,
  .questionnaire-panel,
  .result-stage,
  .runners-section,
  footer,
  .method-note,
  .notice-banner,
  .deep-dive,
  .wide-section,
  .why-section {
    width: min(100% - 30px, 620px);
  }

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

  .header-note {
    font-size: 0;
  }

  .header-tools {
    gap: 10px;
  }

  .intro {
    padding: 54px 0 43px;
  }

  .intro::after {
    display: none;
  }

  .intro h1 {
    font-size: clamp(39px, 12vw, 58px);
    line-height: 1.01;
  }

  .intro-copy {
    margin-top: 22px;
    font-size: 16px;
    line-height: 1.6;
  }

  .mode-picker {
    grid-template-columns: 1fr;
    margin-top: 28px;
  }

  .mode-picker > a {
    min-height: 166px;
    padding: 20px;
  }

  .mode-picker b {
    font-size: 24px;
  }

  .notice-banner {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .promise-row {
    grid-template-columns: 1fr;
    gap: 7px;
    margin-top: 28px;
  }

  .promise-row a {
    min-height: 65px;
  }

  .preferences-panel,
  .results-panel {
    padding: 20px;
  }

  .calculate-bar {
    margin: 26px -20px -20px;
    padding: 20px;
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
  }

  .calculate-bar button {
    width: 100%;
    min-width: 0;
  }

  .result-stage-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .panel-heading,
  .results-heading {
    align-items: center;
  }

  .panel-heading h2,
  .results-heading h2 {
    font-size: 27px;
  }

  fieldset {
    padding: 24px 0;
  }

  .uses-grid,
  .budget-grid,
  .video-grid,
  .expert-five-grid,
  .camera-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .experience-grid,
  .lens-grid,
  .priority-grid,
  .advanced-pair,
  .advanced-toggle-grid {
    grid-template-columns: 1fr;
  }

  .range-fieldset {
    grid-template-columns: 1fr;
  }

  .camera-heading {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .camera-price {
    grid-column: 1 / -1;
    align-items: flex-start;
  }

  .fit-grid,
  .alternatives {
    grid-template-columns: 1fr;
  }

  .card-actions,
  .comparison-picker {
    grid-template-columns: 1fr;
  }

  .range-scale small:nth-child(2),
  .range-scale small:nth-child(4) {
    display: none;
  }

  .runners-track {
    grid-auto-columns: minmax(250px, 85vw);
  }

  .offer-row {
    grid-template-columns: 1fr auto;
  }

  .offer-link {
    grid-column: 1 / -1;
  }

  .deep-dive,
  .wide-section,
  .why-section {
    margin-top: 75px;
  }

  .section-intro h2,
  .deep-dive h2,
  .why-heading h2 {
    font-size: 37px;
  }

  .camera-tabs {
    width: 100%;
    overflow-x: auto;
  }

  .camera-tabs button {
    min-width: 105px;
  }

  .hero-camera-card,
  .attributes-card,
  .offer-card,
  .history-card,
  .kit-card {
    padding: 20px;
  }

  .hero-camera-top h3 {
    font-size: 29px;
  }

  .decision-columns,
  .friendly-specs,
  .advice-detail-grid,
  .kit-list,
  .jargon-grid {
    grid-template-columns: 1fr;
  }

  .subsection-heading {
    align-items: flex-start;
  }

  .subsection-heading h3 {
    font-size: 24px;
  }

  .kit-heading {
    align-items: flex-start;
  }

  .kit-total strong {
    font-size: 21px;
  }

  .why-section {
    padding: 28px 20px;
  }

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

  .why-grid article,
  .why-grid article:nth-child(n+3) {
    padding: 17px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    border-left: 0;
  }

  .score-parts {
    grid-template-columns: 1fr;
  }

  .method-note {
    margin-top: 72px;
    margin-bottom: 60px;
  }

  footer {
    flex-direction: column;
    padding-bottom: 30px;
  }
}

/* CAMERASTART v11: eligibility-first advice, complete kits and decision tools */
.budget-scope-block {
  max-width: 820px;
  margin: 0 0 18px;
  padding: 18px;
  border: 1px solid #c9d3cd;
  border-radius: 7px;
  background: #edf2ef;
}
.budget-scope-block > b {
  display: block;
  margin-bottom: 11px;
  color: #263a33;
  font-size: 10px;
  letter-spacing: .03em;
}
.scroll-questionnaire .budget-scope-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }

.eligibility-summary {
  width: min(100%,1080px);
  margin: 0 auto 18px;
  padding: 13px 16px;
  border: 1px solid #b9cec3;
  border-radius: 5px;
  background: #e8f1ec;
  color: #24483d;
  font-size: 10px;
  font-weight: 760;
  line-height: 1.5;
  box-sizing: border-box;
}
.eligibility-summary.has-conflicts {
  border-color: #d9b4a8;
  background: #f8e9e3;
  color: #7b382b;
}
.best-match-card {
  width: min(100%,980px);
  background: linear-gradient(145deg,#f8f4ec 0%,#e8f0eb 100%);
}
.data-status {
  width: fit-content;
  margin-top: 12px;
  padding: 6px 9px;
  border-radius: 999px;
  display: inline-flex;
  color: #4d6259;
  background: #e3ebe6;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.data-status.is-catalog { background: #efe8da; color: #705d39; }
.kit-summary {
  margin-top: 16px;
  padding: 15px 16px;
  border-left: 4px solid #2f6858;
  border-radius: 3px;
  background: rgba(255,255,255,.72);
}
.kit-summary > span {
  display: block;
  color: #6a756f;
  font-size: 7px;
  font-weight: 820;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.kit-summary > b { display: block; margin-top: 5px; color: #203a31; font-size: 11px; }
.kit-summary > p { margin: 6px 0 0; color: #5c6963; font-size: 8px; line-height: 1.55; }
.decision-verdict-grid {
  margin-top: 17px;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 9px;
}
.decision-verdict-grid p {
  margin: 0;
  padding: 13px;
  border: 1px solid #cbd4cf;
  border-radius: 4px;
  background: rgba(255,255,255,.62);
  color: #53615b;
  font-size: 8px;
  line-height: 1.55;
}
.decision-verdict-grid b { display: block; margin-bottom: 5px; color: #253c33; font-size: 8px; }

.decision-tools {
  width: min(100% - 40px,1180px);
  margin: 0 auto;
  padding: 88px 0;
  border-top: 1px solid #cbd3ce;
}
.decision-tool-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 12px;
}
.decision-tool {
  min-width: 0;
  padding: 22px;
  border: 1px solid #cbd3ce;
  border-radius: 6px;
  background: linear-gradient(155deg,#fdfcf9,#eef3ef);
  box-shadow: 0 10px 26px rgba(25,50,42,.05);
}
.decision-tool h3 { margin: 6px 0 13px; color: #1d342c; font-family: Georgia,"Times New Roman",serif; font-size: 22px; font-weight: 500; line-height: 1.12; }
.decision-tool > p:not(.section-kicker),
.why-not-empty p,
.upgrade-result p,
.why-not-answer p { color: #5c6963; font-size: 9px; line-height: 1.65; }
.decision-tool label { display: block; margin-bottom: 7px; color: #485850; font-size: 8px; font-weight: 780; }
.why-not-tool .advice-search-box { position: relative; }
.why-not-tool input {
  width: 100%;
  min-height: 44px;
  padding: 0 13px 0 38px;
  border: 1px solid #bcc9c2;
  border-radius: 4px;
  background: #fff;
  color: #18352c;
  font: inherit;
  font-size: 10px;
}
.why-not-tool input:focus { border-color: #3f7565; outline: 3px solid rgba(63,117,101,.12); }
.why-not-empty { margin-top: 16px; padding: 15px; background: #e8efeb; border-radius: 4px; }
.why-not-empty b { color: #23453a; font-size: 9px; }
.why-not-empty p { margin: 4px 0 0; }
.why-not-answer { margin-top: 18px; display: grid; gap: 12px; }
.why-not-answer > div { padding-top: 12px; border-top: 1px solid #d4dbd7; }
.why-not-answer h3 { margin: 3px 0; font-size: 17px; }
.why-not-answer span { color: #8b4939; font-size: 7px; font-weight: 850; text-transform: uppercase; }
.why-not-answer b { color: #294339; font-size: 9px; }
.why-not-answer ul { margin: 7px 0 0; padding-left: 16px; color: #5c6963; font-size: 8px; line-height: 1.6; }
.upgrade-result { padding-top: 14px; border-top: 1px solid #d0d9d4; }
.upgrade-result span { color: #8d4838; font-size: 8px; font-weight: 850; text-transform: uppercase; }
.upgrade-result b { display: block; margin-top: 7px; color: #254238; font-size: 11px; line-height: 1.35; }
.upgrade-result button,
.share-tool button {
  min-height: 42px;
  margin-top: 10px;
  padding: 0 14px;
  border: 1px solid #285e4e;
  border-radius: 4px;
  background: #285e4e;
  color: #fff;
  font-size: 8px;
  font-weight: 820;
  cursor: pointer;
}
.upgrade-result button:hover,
.share-tool button:hover { background: #1e493d; }
.share-tool span { display: block; min-height: 20px; margin-top: 9px; color: #2b6654; font-size: 8px; line-height: 1.45; }

.hero-camera-card .kit-summary { background: rgba(255,255,255,.08); border-left-color: #e7856d; }
.hero-camera-card .kit-summary > span,
.hero-camera-card .kit-summary > p { color: #cbd9d3; }
.hero-camera-card .kit-summary > b,
.hero-camera-card .kit-summary strong { color: #fff; }
.hero-camera-card .data-status { margin-bottom: 10px; }

@media (max-width: 980px) {
  .decision-tool-grid { grid-template-columns: 1fr 1fr; }
  .why-not-tool { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .scroll-questionnaire .budget-scope-grid,
  .decision-verdict-grid,
  .decision-tool-grid { grid-template-columns: 1fr; }
  .decision-tools { width: min(100% - 24px,680px); padding: 58px 0; }
  .why-not-tool { grid-column: auto; }
  .data-status { line-height: 1.4; }
}

/* Version 3 refinements */
.landing-intro {
  width: min(1280px, calc(100% - 56px));
  text-align: center;
}

.landing-intro h1,
.landing-intro .intro-copy {
  margin-left: auto;
  margin-right: auto;
}

.landing-intro h1 { max-width: 1040px; }
.landing-intro .intro-copy { max-width: 760px; }

.landing-intro .mode-picker {
  max-width: 1120px;
  margin: 52px auto 0;
  gap: 18px;
}

.landing-intro .mode-picker > a {
  min-height: 270px;
  padding: 38px 42px;
  align-items: center;
  text-align: center;
  transform-origin: center bottom;
}

.landing-intro .mode-picker > a:hover {
  transform: translateY(-7px) scale(1.012);
  box-shadow: 0 24px 55px rgba(30,39,35,.14);
}

.landing-intro .mode-picker b { font-size: clamp(31px,4vw,43px); }
.landing-intro .mode-picker span { max-width: 430px; margin-left: auto; margin-right: auto; font-size: 15px; line-height: 1.65; }
.landing-intro .mode-picker em { margin-top: auto; font-size: 12px; }

.universal-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  text-align: center;
}

.footer-brand { display: flex; flex-direction: column; align-items: center; }
.footer-brand p { margin-left: auto; margin-right: auto; }
.universal-footer nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(20px,4vw,48px);
}
.universal-footer .footer-fineprint { margin-left: auto; margin-right: auto; }
.universal-footer > span { justify-self: auto; }

.guide-hero,
.guide-article { width: min(1240px, calc(100% - 56px)); }
.guide-hero { padding-top: 120px; padding-bottom: 125px; }
.guide-hero h1 { max-width: 1050px; font-size: clamp(52px,8vw,98px); }
.guide-hero > p:not(.eyebrow) { max-width: 850px; font-size: 21px; }
.guide-article { padding-top: 120px; padding-bottom: 120px; }
.article-heading { max-width: 980px; }
.article-heading h2 { font-size: clamp(44px,6.6vw,78px); }
.article-heading > p:last-child { max-width: 850px; font-size: 20px; }
.article-body { max-width: 900px; }
.article-body p { font-size: 19px; line-height: 1.9; }
.guide-illustration { margin-top: 70px; margin-bottom: 70px; }
.guide-illustration svg { transition: transform 400ms ease, box-shadow 400ms ease; }
.guide-illustration:hover svg { transform: translateY(-4px); box-shadow: 0 28px 70px rgba(30,39,35,.15); }

.range-control { --range-thumb-size:20px; }
input[type="range"] {
  height: 26px;
  margin: 14px 0 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
}
input[type="range"]::-webkit-slider-runnable-track { height:6px; border-radius:999px; background:#d4d6d1; }
input[type="range"]::-webkit-slider-thumb { width:var(--range-thumb-size); height:var(--range-thumb-size); margin-top:-7px; border:2px solid #fff; border-radius:50%; background:var(--accent); box-shadow:0 1px 6px rgba(23,33,30,.25); appearance:none; -webkit-appearance:none; }
input[type="range"]::-moz-range-track { height:6px; border-radius:999px; background:#d4d6d1; }
input[type="range"]::-moz-range-progress { height:6px; border-radius:999px; background:var(--accent); }
input[type="range"]::-moz-range-thumb { width:16px; height:16px; border:2px solid #fff; border-radius:50%; background:var(--accent); box-shadow:0 1px 6px rgba(23,33,30,.25); }
.budget-ticks {
  height: 31px;
  margin: 0;
  position: relative;
  display: block;
  overflow: visible;
}
.budget-ticks button {
  width: 1px;
  height: 30px;
  padding: 0;
  border: 0;
  position: absolute;
  left: calc(var(--tick-left) + var(--tick-offset));
  top: 0;
  background: transparent;
  color: #707a75;
  cursor: pointer;
}
.budget-ticks button::before { content:""; width:1px; height:6px; position:absolute; left:0; top:0; background:#aeb4b0; }
.budget-ticks button span { position:absolute; left:0; top:11px; transform:translateX(-50%); white-space:nowrap; font-size:9px; font-weight:700; }
.budget-ticks button:hover span,
.budget-ticks button:focus-visible span { color:var(--accent-dark); text-decoration:underline; }

.buy-button {
  grid-column: 1 / -1;
  min-height: 50px;
  padding: 14px 18px;
  border: 1px solid var(--accent-dark);
  border-radius: 8px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.buy-button:hover { transform:translateY(-2px); background:var(--accent-dark); box-shadow:0 10px 24px rgba(185,71,48,.22); }
.buy-button.is-placeholder { cursor:default; }

.amazon-cta {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.amazon-cta .buy-button {
  min-height: 62px;
  padding: 13px 17px;
  border-color: #b84431;
  border-radius: 10px;
  background: linear-gradient(135deg, #ee6b51 0%, #c94b36 100%);
  box-shadow: 0 12px 26px rgba(150, 58, 41, 0.2);
  color: #fff;
  justify-content: space-between;
  text-align: left;
}

.amazon-cta .buy-button:hover {
  background: linear-gradient(135deg, #f47b62 0%, #b8402e 100%);
  box-shadow: 0 16px 32px rgba(150, 58, 41, 0.28);
}

.amazon-cta .buy-button span {
  display: grid;
  gap: 2px;
}

.amazon-cta .buy-button small {
  color: rgba(255,255,255,.78);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.amazon-cta .buy-button b {
  font-size: 20px;
}

.amazon-cta > p {
  margin: 7px 2px 0;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.45;
}

.amazon-cta--advice {
  margin-top: 24px;
}

.amazon-cta--advice .buy-button {
  color: #fff;
}

.amazon-cta--advice > p {
  color: rgba(255,255,255,.7);
}

.amazon-cta--runner {
  margin: 14px 0 8px;
}

.amazon-cta--runner .buy-button {
  min-height: 52px;
  padding: 10px 12px;
  font-size: 10px;
}

.amazon-cta--runner + button {
  margin-top: 0;
}

.table-buy-link {
  display: inline-block;
  color: var(--accent-dark);
  font-weight: 850;
  text-underline-offset: 3px;
}

.amazon-inline-link {
  margin-top: 4px;
  color: var(--accent-dark);
  font-size: 9px;
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.amazon-inline-link:hover { color: var(--ink); }

.price-context-note {
  margin: 0 0 20px;
  padding: 11px 14px;
  border-left: 3px solid var(--accent);
  background: #f3eee5;
  color: #56605c;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 10px;
  line-height: 1.5;
}

.price-context-note b { color: var(--ink); }

.table-paid-label,
.table-link-missing {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 8px;
}

.footer-fineprint p {
  margin: 0 0 5px;
}

.footer-fineprint p:last-child {
  margin-bottom: 0;
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 720ms cubic-bezier(.2,.7,.2,1), transform 720ms cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay,0ms);
}
.reveal-on-scroll.is-visible { opacity:1; transform:translateY(0); }
.brand-mark span { transition:transform 250ms ease, background 250ms ease; }
.brand:hover .brand-mark span { transform:scale(.72); background:var(--accent); }
.camera-mark { animation:camera-settle 560ms cubic-bezier(.2,.8,.2,1) both; }
.match-score { animation:score-arrive 600ms 120ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes camera-settle { from { opacity:0; transform:translateY(8px) scale(.94); } to { opacity:1; transform:none; } }
@keyframes score-arrive { from { opacity:0; transform:scale(.84); } to { opacity:1; transform:none; } }
@keyframes ambient-ring { 0%,100% { transform:scale(1); opacity:.75; } 50% { transform:scale(1.035); opacity:1; } }
.landing-intro::after { animation:ambient-ring 8s ease-in-out infinite; }

@media (max-width:760px) {
  .landing-intro,
  .guide-hero,
  .guide-article { width:min(100% - 30px,680px); }
  .landing-intro .mode-picker > a { min-height:220px; padding:28px 24px; }
  .universal-footer nav { width:100%; gap:16px; justify-content:space-between; }
  .universal-footer nav a { font-size:11px; }
  .budget-ticks button:nth-child(2),
  .budget-ticks button:nth-child(4) { display:block; }
  .budget-ticks button span { font-size:7px; }
}

/* CAMERASTART v4 refinements */
.weight-ticks {
  height: 31px;
  margin: 0;
  position: relative;
  display: block;
  overflow: visible;
}

.weight-ticks button {
  width: 1px;
  height: 30px;
  padding: 0;
  border: 0;
  position: absolute;
  left: calc(var(--tick-left) + var(--tick-offset));
  top: 0;
  background: transparent;
  color: #707a75;
  cursor: pointer;
}

.weight-ticks button::before {
  content: "";
  width: 1px;
  height: 6px;
  position: absolute;
  left: 0;
  top: 0;
  background: #aeb4b0;
}

.weight-ticks button span {
  position: absolute;
  left: 0;
  top: 11px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 9px;
  font-weight: 700;
}

.weight-ticks button:hover span,
.weight-ticks button:focus-visible span {
  color: var(--accent-dark);
  text-decoration: underline;
}

.comparison-picker {
  padding: 12px;
  background: rgba(245, 242, 234, .72);
}

.comparison-slot {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(23, 33, 30, .13);
  border-radius: 10px;
  background: rgba(255, 253, 248, .94);
  display: grid;
  gap: 13px;
}

.comparison-picker select:disabled {
  background: #eeece5;
  color: #7a827e;
  cursor: not-allowed;
}

.universal-footer {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 28px 70px;
  align-items: center;
  text-align: left;
}

.footer-identity {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 9px 18px;
}

.footer-identity .brand {
  grid-column: 1 / -1;
}

.footer-identity p {
  grid-column: 1 / -1;
  max-width: 480px;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.footer-copyright {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .04em;
}

.universal-footer nav {
  width: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.universal-footer nav a {
  padding: 9px 12px;
  border: 1px solid rgba(23, 33, 30, .18);
  border-radius: 999px;
  background: rgba(255, 253, 248, .65);
}

.universal-footer nav a:hover {
  border-color: var(--accent);
  background: #fffdf8;
}

.universal-footer .footer-fineprint {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid rgba(23, 33, 30, .12);
  text-align: left;
}

@media (max-width: 760px) {
  .weight-ticks button span { font-size: 7px; }
  .universal-footer {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 24px;
    text-align: left;
  }
  .universal-footer nav {
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
  }
  .universal-footer .footer-fineprint { text-align: left; }
}

@media (prefers-reduced-motion:reduce) {
  .reveal-on-scroll { opacity:1; transform:none; }
  .camera-mark,
  .match-score,
  .landing-intro::after { animation:none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* Shared site shell and editorial pages */
.universal-header {
  gap: 28px;
}

.universal-header .site-nav {
  margin-left: auto;
}

.site-nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 7px;
}

.header-cta,
.primary-link {
  padding: 11px 15px;
  border-radius: 9px;
  background: var(--ink);
  color: #fffdf8;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.header-cta:hover,
.primary-link:hover {
  background: var(--accent-dark);
}

.home-guide-teaser {
  width: min(1180px, calc(100% - 56px));
  margin: 10px auto 86px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #17211e;
  color: #fffdf8;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

.home-guide-teaser > div { max-width: 680px; }
.home-guide-teaser h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(28px, 4vw, 46px); font-weight: 500; line-height: 1.06; }
.home-guide-teaser p:not(.section-kicker) { margin: 14px 0 0; color: #cbd1ce; line-height: 1.65; }
.home-guide-teaser a { padding: 12px 0; color: #fff; font-size: 13px; font-weight: 800; text-decoration: none; border-bottom: 1px solid var(--accent); white-space: nowrap; }

.universal-footer {
  width: min(1180px, calc(100% - 56px));
  margin: 0 auto;
  padding: 46px 0 38px;
  border-top: 1px solid rgba(23,33,30,.18);
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 30px 70px;
  align-items: start;
}

.footer-brand p { max-width: 440px; margin: 15px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.universal-footer nav { display: grid; grid-template-columns: repeat(2, auto); gap: 12px 28px; }
.universal-footer nav a { color: var(--ink); font-size: 12px; font-weight: 750; text-decoration: none; }
.universal-footer nav a:hover { color: var(--accent-dark); }
.universal-footer .footer-fineprint { max-width: 740px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.universal-footer > span { justify-self: end; color: var(--muted); font-size: 9px; }

.content-page,
.guide-hero,
.guide-article,
.not-found {
  width: min(1120px, calc(100% - 56px));
  margin: 0 auto;
}

.content-page { padding: 96px 0 120px; }
.content-page > h1,
.guide-hero h1,
.not-found h1 {
  max-width: 900px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(46px, 7vw, 82px);
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: .98;
}
.prose-grid { margin-top: 65px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.prose-grid article,
.policy-page article { padding: 28px; border: 1px solid var(--line); background: rgba(255,253,248,.72); }
.prose-grid h2,
.policy-page h2 { margin: 0 0 14px; font-family: Georgia, serif; font-size: 27px; font-weight: 500; }
.prose-grid p,
.policy-page p { color: #56615c; font-size: 15px; line-height: 1.75; }
.page-lead { max-width: 700px; margin: 30px 0 0; color: #56615c; font-size: 18px; line-height: 1.65; }
.narrow-page { max-width: 820px; }
.policy-page { max-width: 900px; }
.policy-page article { margin-top: 45px; }
.policy-page article h2:not(:first-child) { margin-top: 32px; }
.policy-page a { color: var(--accent-dark); }
.page-cta { margin-top: 46px; padding: 26px 30px; border-radius: 14px; background: #dfece7; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.page-cta h2 { margin: 0; font-family: Georgia, serif; font-size: 30px; font-weight: 500; }
.page-cta a { color: var(--ink); font-size: 13px; font-weight: 800; text-decoration: none; border-bottom: 1px solid var(--ink); }
.contact-card { margin-top: 46px; padding: 28px; border: 1px solid var(--ink); border-radius: 14px; background: #fffdf8; display: flex; flex-direction: column; color: var(--ink); text-decoration: none; box-shadow: 7px 7px 0 rgba(23,33,30,.08); }
.contact-card small { color: var(--accent-dark); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.contact-card strong { margin-top: 12px; font-family: Georgia, serif; font-size: clamp(28px, 5vw, 48px); font-weight: 500; }
.contact-card span { margin-top: 20px; color: var(--muted); font-size: 12px; }
.contact-note { color: var(--muted); font-size: 10px; }

.guide-hero { padding: 92px 0 100px; }
.guide-hero > p:not(.eyebrow) { max-width: 700px; margin: 28px 0 0; color: #56615c; font-size: 18px; line-height: 1.7; }
.article-index { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 9px; }
.article-index a { padding: 10px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: 11px; font-weight: 750; text-decoration: none; background: rgba(255,253,248,.7); }
.guide-article { padding: 90px 0; border-top: 1px solid var(--line); scroll-margin-top: 20px; }
.article-heading { max-width: 820px; }
.article-heading h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(38px, 6vw, 66px); font-weight: 500; letter-spacing: -.045em; line-height: 1.02; }
.article-heading > p:last-child { margin: 24px 0 0; color: #56615c; font-size: 18px; line-height: 1.7; }
.guide-illustration { margin: 54px 0; }
.guide-illustration svg { width: 100%; height: auto; display: block; border-radius: 22px; box-shadow: var(--shadow); }
.guide-illustration figcaption { margin-top: 13px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.article-body { max-width: 780px; margin: 0 auto; }
.article-body h3 { margin: 42px 0 12px; font-family: Georgia, serif; font-size: 29px; font-weight: 500; }
.article-body p { margin: 0; color: #4f5a55; font-family: Georgia, serif; font-size: 18px; line-height: 1.8; }
.editorial-callout { margin: 40px 0; padding: 24px 28px; border-left: 4px solid var(--accent); background: #fff8ed; }
.editorial-callout b { color: var(--accent-dark); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.editorial-callout p { margin-top: 8px; color: var(--ink); font-size: 24px; line-height: 1.45; }
.article-cta { max-width: 780px; margin: 55px auto 0; padding: 22px 25px; border-radius: 12px; background: var(--ink); display: flex; justify-content: space-between; gap: 20px; color: #fff; text-decoration: none; }
.article-cta span { color: #aebbb5; font-size: 11px; }
.article-cta b { font-size: 12px; }
.three-notes { max-width: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.three-notes section { padding: 22px; border: 1px solid var(--line); background: #fffdf8; }
.three-notes section h3 { margin-top: 0; }
.three-notes section p { font-size: 15px; }
.three-notes > h3,
.three-notes > p { grid-column: 1 / -1; max-width: 780px; margin-left: auto; margin-right: auto; }
.feature-matrix { margin-top: 55px; display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.feature-matrix section { padding: 28px; border: 1px solid var(--line); background: #fffdf8; }
.feature-matrix section:first-child { background: #e2eee9; }
.feature-matrix h3 { margin: 0 0 22px; font-family: Georgia, serif; font-size: 31px; font-weight: 500; }
.feature-matrix ol { margin: 0; padding: 0; list-style: none; counter-reset: feature; }
.feature-matrix li { padding: 15px 0 15px 40px; border-top: 1px solid rgba(23,33,30,.13); position: relative; counter-increment: feature; }
.feature-matrix li::before { content: counter(feature, decimal-leading-zero); position: absolute; left: 0; top: 17px; color: var(--accent-dark); font-size: 10px; font-weight: 800; }
.feature-matrix li b,
.feature-matrix li span { display: block; }
.feature-matrix li b { font-size: 14px; }
.feature-matrix li span { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.5; }

.budget-ticks { align-items: center; }
.budget-ticks button { padding: 4px 0; border: 0; background: transparent; color: #707a75; cursor: pointer; font-size: 8px; }
.budget-ticks button:hover { color: var(--accent-dark); text-decoration: underline; }
.camera-video-slot { margin-top: 22px; padding: 26px; border: 1px dashed #aab4ae; border-radius: 14px; background: rgba(255,253,248,.68); display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.camera-video-slot h3 { margin: 0; font-family: Georgia, serif; font-size: 28px; font-weight: 500; }
.camera-video-slot p:not(.section-kicker) { max-width: 680px; margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.camera-video-slot > span { width: 60px; height: 60px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; color: #fff; font-size: 18px; }
.camera-video-slot.has-video { display: block; }
.video-frame { margin-top: 20px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: #111; }
.video-frame iframe { width: 100%; height: 100%; border: 0; }

.not-found { padding: 80px 0 120px; text-align: center; }
.not-found h1 { margin-left: auto; margin-right: auto; max-width: 760px; }
.not-found > p:not(.eyebrow) { color: var(--muted); font-size: 17px; }
.not-found > div:last-child { margin-top: 30px; display: flex; justify-content: center; align-items: center; gap: 24px; }
.not-found > div:last-child a:not(.primary-link) { color: var(--ink); font-size: 12px; font-weight: 750; }
.focus-frame { width: 170px; height: 120px; margin: 0 auto 35px; border: 2px solid var(--ink); position: relative; display: grid; place-items: center; }
.focus-frame::before,
.focus-frame::after { content: ""; position: absolute; background: var(--paper); }
.focus-frame::before { width: 110px; height: calc(100% + 8px); }
.focus-frame::after { width: calc(100% + 8px); height: 62px; }
.focus-frame span { position: relative; z-index: 1; color: var(--accent-dark); font-family: Georgia, serif; font-size: 45px; }

@media (max-width: 900px) {
  .universal-header { flex-wrap: wrap; padding: 15px 0; }
  .universal-header .site-nav { order: 3; width: 100%; margin: 0; justify-content: space-between; gap: 12px; overflow-x: auto; padding-top: 12px; border-top: 1px solid var(--line); }
  .site-nav a { white-space: nowrap; }
  .home-guide-teaser { align-items: flex-start; flex-direction: column; }
  .prose-grid,
  .feature-matrix { grid-template-columns: 1fr; }
  .three-notes { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .site-header,
  .content-page,
  .guide-hero,
  .guide-article,
  .not-found,
  .home-guide-teaser,
  .universal-footer { width: min(100% - 30px, 620px); }
  .header-cta { padding: 9px 10px; }
  .universal-header .site-nav { gap: 18px; justify-content: flex-start; }
  .content-page,
  .guide-hero { padding-top: 65px; padding-bottom: 75px; }
  .guide-article { padding: 68px 0; }
  .universal-footer { display: grid; grid-template-columns: 1fr; }
  .universal-footer > span { justify-self: start; }
  .page-cta,
  .article-cta { align-items: flex-start; flex-direction: column; }
  .contact-card strong { word-break: break-word; }
  .camera-video-slot { align-items: flex-start; }
  .camera-video-slot > span { width: 46px; height: 46px; flex: 0 0 auto; }
  .budget-ticks button:nth-child(2),
  .budget-ticks button:nth-child(4) { display: none; }
}

/* Final cascade for the expanded editorial layout */
.universal-footer {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:25px;
  text-align:center;
}
.footer-brand { display:flex; flex-direction:column; align-items:center; }
.footer-brand p { margin-left:auto; margin-right:auto; }
.universal-footer nav { display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; gap:clamp(20px,4vw,48px); }
.universal-footer .footer-fineprint { margin-left:auto; margin-right:auto; }
.universal-footer > span { justify-self:auto; }
.guide-hero,
.guide-article { width:min(1240px,calc(100% - 56px)); }
.guide-hero { padding:120px 0 125px; }
.guide-hero h1 { max-width:1050px; font-size:clamp(52px,8vw,98px); }
.guide-hero > p:not(.eyebrow) { max-width:850px; font-size:21px; }
.guide-article { padding:120px 0; }
.article-heading { max-width:980px; }
.article-heading h2 { font-size:clamp(44px,6.6vw,78px); }
.article-heading > p:last-child { max-width:850px; font-size:20px; }
.article-body { max-width:900px; }
.article-body p { font-size:19px; line-height:1.9; }
.guide-illustration { margin:70px 0; }
.budget-ticks { height:31px; margin:0; position:relative; display:block; overflow:visible; }
.budget-ticks button { width:1px; height:30px; padding:0; position:absolute; left:calc(var(--tick-left) + var(--tick-offset)); top:0; }
.budget-ticks button span { position:absolute; left:0; top:11px; transform:translateX(-50%); white-space:nowrap; font-size:9px; font-weight:700; }

@media (max-width:760px) {
  .guide-hero,
  .guide-article { width:min(100% - 30px,680px); }
  .universal-footer { display:flex; }
  .universal-footer nav { width:100%; gap:16px; justify-content:space-between; }
  .universal-footer > span { align-self:center; }
  .budget-ticks button:nth-child(2),
  .budget-ticks button:nth-child(4) { display:block; }
  .budget-ticks button span { font-size:7px; }
}

/* Keep the CAMERASTART footer layout last in the cascade. */
.universal-footer {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  flex-direction: initial;
  align-items: center;
  gap: 28px 70px;
  text-align: left;
}

.footer-identity {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 9px 18px;
}

.footer-identity .brand,
.footer-identity p,
.footer-copyright { grid-column: 1 / -1; }
.footer-identity p { margin: 0; }

.universal-footer nav {
  width: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.universal-footer .footer-fineprint {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
  margin: 0;
  text-align: left;
}

@media (max-width:760px) {
  .universal-footer {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 24px;
    text-align: left;
  }
  .universal-footer nav {
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
  }
}

.footer-link,.footer-button,.social-button{background:none!important;border:none!important;box-shadow:none!important;border-radius:0!important;padding:0!important;}
.footer-link:hover,.footer-button:hover,.social-button:hover{text-decoration:underline;}


/* CAMERASTART v5.0: footer links are plain text */
.universal-footer nav {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 22px !important;
}

.universal-footer nav a {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--muted) !important;
  text-decoration: none !important;
}

.universal-footer nav a:hover,
.universal-footer nav a:focus-visible {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
}

@media (max-width: 760px) {
  .universal-footer nav {
    justify-content: flex-start !important;
    gap: 16px 22px !important;
  }
}

/* CAMERASTART v5.3: structured choices without artificial category labels */
.use-case-grid {
  margin-top: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.use-case-grid .choice-button { min-height: 70px; }

.camera-form-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.budget-range-modes {
  max-width: 820px;
  margin: 15px 0 9px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.budget-range-modes button {
  padding: 12px 14px;
  border: 1px solid #d5d6d0;
  border-radius: 10px;
  background: #f5f2ea;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.budget-range-modes button:hover { border-color: var(--accent); }
.budget-range-modes button.is-selected {
  border-color: var(--ink);
  background: linear-gradient(145deg, #17211e, #263b35);
  color: #fffdf8;
}
.budget-range-modes b { font-size: 12px; }
.budget-range-modes span {
  margin-top: 3px;
  color: #727b77;
  font-size: 9px;
  line-height: 1.4;
}
.budget-range-modes .is-selected span { color: #cbd1ce; }

.budget-switch-note {
  max-width: 820px;
  margin: 8px 0 2px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}

.spec-row .battery-spec,
.runner-specs .battery-spec {
  border-color: rgba(47, 109, 89, 0.28);
  background: #e6efe9;
  color: #254f40;
}

@media (max-width: 1100px) {
  .use-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .camera-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .use-case-grid,
  .camera-form-grid,
  .budget-range-modes { grid-template-columns: 1fr; }
  .budget-range-modes button { min-height: 54px; }
}

/* CAMERASTART v7.0: professional finder and advice experience */
:root {
  --paper: #f3f1eb;
  --panel: #fffefa;
  --ink: #14201d;
  --muted: #65706b;
  --line: #d8dcd7;
  --accent: #df674c;
  --accent-dark: #a9422e;
  --green: #296b5b;
  --green-soft: #e4f0eb;
  --shadow: 0 20px 55px rgba(20,32,29,.07);
}

body {
  background: linear-gradient(180deg,#f8f7f3 0,#f3f1eb 460px,#f3f1eb 100%);
}

main { overflow: clip; }

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

[hidden] { display: none !important; }

.universal-header {
  width: 100%;
  min-height: 72px;
  padding: 0 max(28px,calc((100vw - 1380px) / 2));
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(20,32,29,.12);
  background: rgba(248,247,243,.94);
  box-shadow: 0 7px 30px rgba(20,32,29,.035);
  backdrop-filter: blur(16px);
}

.universal-header .brand { letter-spacing: -.02em; }
.universal-header .site-nav a { padding: 27px 0 24px; position: relative; }
.universal-header .site-nav a[aria-current="page"]::after {
  content: "";
  height: 2px;
  position: absolute;
  right: 0;
  bottom: 16px;
  left: 0;
  background: var(--accent);
}
.header-cta {
  border-radius: 8px;
  background: var(--ink);
  box-shadow: none;
}
.header-cta:hover { transform: translateY(-1px); background: #25342f; }

.landing-intro {
  width: min(1240px,calc(100% - 56px));
  padding: 112px 0 88px;
}
.landing-intro::after { opacity: .45; }
.landing-intro h1 { max-width: 980px; font-size: clamp(58px,7.4vw,102px); }
.landing-intro .intro-copy { max-width: 750px; color: #52605a; font-size: 19px; }
.landing-intro .mode-picker {
  width: min(1080px,100%);
  max-width: none;
  margin-top: 48px;
  gap: 16px;
}
.landing-intro .mode-picker > a {
  min-height: 270px;
  padding: 32px;
  border: 1px solid #d5d9d4;
  border-radius: 16px;
  background: rgba(255,254,250,.9);
  box-shadow: 0 14px 40px rgba(20,32,29,.055);
}
.landing-intro .mode-picker > a:first-child {
  border-color: #294c42;
  background: linear-gradient(145deg,#17251f,#2b463d);
}
.landing-intro .mode-picker > a:hover {
  border-color: var(--accent);
  box-shadow: 0 20px 52px rgba(20,32,29,.1);
  transform: translateY(-4px);
}
.landing-intro .mode-picker b { font-size: clamp(30px,3.6vw,44px); }
.landing-intro .mode-picker em { letter-spacing: .01em; }

.trust-strip {
  width: min(1080px,100%);
  margin: 18px auto 0;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  border: 1px solid #d7dad5;
  border-radius: 14px;
  background: rgba(255,254,250,.7);
  box-shadow: 0 10px 30px rgba(20,32,29,.035);
  text-align: left;
}
.trust-strip article {
  min-height: 100px;
  padding: 24px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
}
.trust-strip article + article { border-left: 1px solid #d7dad5; }
.trust-strip article > span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--green-soft);
  color: var(--green);
  font-size: 10px;
  font-weight: 850;
}
.trust-strip b { display: block; margin: 1px 0 5px; font-size: 13px; }
.trust-strip p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }

.route-intro { width: min(1160px,calc(100% - 56px)); padding: 80px 0 66px; }
.route-intro h1 { max-width: 1000px; }
.route-assurance {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.route-assurance span {
  padding: 9px 13px;
  border: 1px solid #cfd5d0;
  border-radius: 999px;
  background: rgba(255,254,250,.72);
  color: #42534d;
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.route-assurance span::before { content: "✓"; margin-right: 7px; color: var(--green); }

.questionnaire {
  width: min(1160px,calc(100% - 56px));
  margin: 0 auto 110px;
  padding: 0;
}
.finder-process {
  margin-bottom: 14px;
  padding: 15px 18px;
  border: 1px solid #d5d9d4;
  border-radius: 12px;
  background: rgba(255,254,250,.72);
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
}
.finder-process span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #45534e;
  font-size: 11px;
  font-weight: 730;
}
.finder-process b {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #fff;
  font-size: 9px;
}
.questionnaire-panel {
  padding: 0 44px 44px;
  border: 1px solid #d7dad5;
  border-radius: 18px;
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.questionnaire-panel::before { display: none; }
.panel-heading {
  margin: 0 -44px 8px;
  padding: 36px 44px 31px;
  border-bottom: 1px solid #dfe2de;
  background: linear-gradient(135deg,#f7f5ef,#fcfbf7);
}
.panel-heading h2 { margin-bottom: 8px; }
.panel-heading p:not(.section-kicker) { max-width: 620px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.reset-button { background: #fff; border-color: #ccd2cd; }

.questionnaire fieldset {
  margin: 0;
  padding: 35px 0 39px;
  border: 0;
  border-bottom: 1px solid #e1e3df;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.questionnaire fieldset legend { padding: 0; font-size: 21px; letter-spacing: -.02em; }
.questionnaire fieldset legend > span {
  width: 29px;
  height: 29px;
  margin-right: 10px;
  border-radius: 7px;
  display: inline-grid;
  place-items: center;
  background: var(--ink);
  color: #fff;
  font-size: 10px;
  vertical-align: middle;
}
.field-help { margin: 10px 0 0 42px; max-width: 760px; }

.use-selection-summary {
  margin: 20px 0 14px;
  padding: 13px 15px;
  border: 1px solid #d7ddd8;
  border-radius: 10px;
  background: #f4f8f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.use-selection-summary b { color: var(--green); font-size: 11px; }
.use-selection-summary span { color: var(--muted); font-size: 10px; }
.use-case-groups { display: grid; gap: 12px; }
.use-group {
  padding: 18px;
  border: 1px solid #daddd9;
  border-radius: 12px;
  background: #fbfaf6;
}
.use-group-heading {
  margin-bottom: 13px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
}
.use-group-heading > span {
  color: var(--accent-dark);
  font-family: Georgia,"Times New Roman",serif;
  font-size: 20px;
}
.use-group-heading h3 { margin: 0 0 2px; font-size: 13px; }
.use-group-heading p { margin: 0; color: var(--muted); font-size: 9px; }
.use-group-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.use-group-grid .choice-button,
.questionnaire .choice-button {
  min-height: 74px;
  padding: 15px;
  border-color: #d5d9d5;
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
}
.questionnaire .choice-button:hover { border-color: #789086; transform: translateY(-1px); }
.questionnaire .choice-button.is-selected {
  border-color: #285f51;
  background: #e9f2ee;
  box-shadow: inset 3px 0 0 #296b5b;
}
.questionnaire .choice-button.is-selected::after { background: var(--green); }
.calculate-bar {
  margin: 35px 0 0;
  padding: 22px;
  border-radius: 12px;
  background: var(--ink);
  box-shadow: none;
}
.calculate-bar button { border-radius: 8px; box-shadow: none; }

.advice-nav {
  width: min(1240px,calc(100% - 56px));
  margin: 24px auto 0;
  padding: 9px;
  position: sticky;
  top: 83px;
  z-index: 30;
  border: 1px solid rgba(20,32,29,.14);
  border-radius: 11px;
  background: rgba(255,254,250,.94);
  box-shadow: 0 10px 35px rgba(20,32,29,.07);
  backdrop-filter: blur(14px);
  display: flex;
  justify-content: center;
  gap: 6px;
}
.advice-nav a {
  padding: 9px 16px;
  border-radius: 7px;
  color: #4f5e58;
  font-size: 10px;
  font-weight: 780;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.advice-nav a:hover { background: #eef2ef; color: var(--ink); }

.result-stage,
.deep-dive,
.wide-section,
.runners-section,
.method-note {
  width: min(1240px,calc(100% - 56px));
}
.result-stage { padding: 92px 0 100px; }
.result-stage-heading {
  margin-bottom: 28px;
  padding-bottom: 26px;
  border-bottom: 1px solid #d7dad6;
  align-items: end;
}
.result-stage-heading h2 { max-width: 770px; font-size: clamp(43px,5vw,68px); }
.result-stage-heading p:last-child { max-width: 640px; margin: 14px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.result-stage-heading button { border-radius: 8px; background: #fff; }
.advice-confidence {
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  border: 1px solid #d6dad6;
  border-radius: 13px;
  background: #fffefa;
}
.advice-confidence article { padding: 20px 22px; }
.advice-confidence article + article { border-left: 1px solid #dfe2df; }
.advice-confidence b { display: block; margin-bottom: 4px; color: var(--green); font-size: 18px; }
.advice-confidence span { color: var(--muted); font-size: 10px; line-height: 1.5; }
.price-context-note {
  margin: 0 0 22px;
  padding: 12px 16px;
  border-color: #ded8c8;
  border-radius: 9px;
  background: #faf7ee;
  box-shadow: none;
}

.result-cards {
  display: grid;
  grid-template-columns: minmax(0,1.08fr) minmax(380px,.92fr);
  gap: 18px;
  align-items: start;
}
.alternatives { display: grid; grid-template-columns: 1fr; gap: 18px; }
.recommendation-card,
.alternatives .recommendation-card {
  min-width: 0;
  padding: 27px;
  border: 1px solid #d4d9d5;
  border-radius: 15px;
  background: #fffefa;
  box-shadow: 0 13px 35px rgba(20,32,29,.055);
}
.recommendation-card.is-featured {
  border: 1px solid #244f43;
  border-top: 5px solid #296b5b;
  background: linear-gradient(180deg,#fbfefa 0,#fffefa 170px);
  box-shadow: 0 20px 48px rgba(26,69,57,.1);
}
.card-topline { margin-bottom: 22px; }
.rank-label { border-radius: 6px; }
.camera-heading { align-items: center; }
.camera-heading h2,
.alternatives .camera-heading h2 { font-size: clamp(23px,2.3vw,34px); }
.camera-price { min-width: 105px; }
.spec-row { gap: 6px; }
.spec-row > span { border-radius: 6px; }
.fit-grid {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e0e3df;
  gap: 18px;
}
.card-actions {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
}
.card-actions > button,
.card-actions > a { min-height: 45px; border-radius: 8px; }

.amazon-cta {
  width: auto;
  max-width: 100%;
  margin: 2px 0 0;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 11px;
}
.amazon-cta .buy-button {
  width: auto;
  min-width: 190px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #d6c89f;
  border-radius: 7px;
  background: #fbf7ea;
  box-shadow: none;
  color: #2f342f;
  gap: 12px;
}
.amazon-cta .buy-button:hover { border-color: #9f8953; background: #f5ecd3; box-shadow: none; transform: none; }
.amazon-cta .buy-button span { gap: 0; font-size: 11px; }
.amazon-cta .buy-button small { color: #82734d; font-size: 7px; letter-spacing: .07em; }
.amazon-cta .buy-button b { font-size: 13px; }
.amazon-cta > p { max-width: 430px; margin: 0; font-size: 8px; line-height: 1.5; }
.amazon-cta--advice { margin-top: 18px; padding: 0; border: 0; background: transparent; }
.amazon-cta--advice .buy-button { width: auto; }
.amazon-cta--runner { margin-top: auto; }
.amazon-cta--runner .buy-button { min-width: 0; min-height: 36px; }

.deep-dive {
  margin-top: 0;
  padding: 100px 0;
  border-top: 1px solid #d4d9d4;
}
.split-heading { margin-bottom: 28px; align-items: end; }
.camera-tabs { padding: 4px; border: 1px solid #d4d9d5; border-radius: 10px; background: #eeefea; }
.camera-tabs button { border-radius: 7px; }
.deep-dive-grid { grid-template-columns: 1.08fr .92fr; gap: 18px; }
.hero-camera-card,
.attributes-card {
  border: 1px solid #d5dad5;
  border-radius: 15px;
  background: #fffefa;
  box-shadow: 0 12px 34px rgba(20,32,29,.05);
}
.hero-camera-card { background: linear-gradient(145deg,#17251f,#2a443b); }
.advice-detail-grid { margin-top: 18px; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.advice-detail-grid article { min-height: 210px; border: 1px solid #d9ddd9; border-radius: 12px; background: #fbfaf6; box-shadow: none; }
.camera-video-slot { margin-top: 18px; border-radius: 14px; border-color: #d4d9d5; box-shadow: none; }

.comparison-section {
  margin-top: 0;
  padding: 100px 0;
  border-top: 1px solid #d4d9d4;
  overflow: visible;
}
.comparison-picker {
  margin: 30px 0 22px;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
  overflow: visible;
}
.comparison-slot {
  min-width: 0;
  padding: 16px;
  display: block;
  border: 1px solid #d2d8d3;
  border-radius: 12px;
  background: #fffefa;
  box-shadow: 0 9px 26px rgba(20,32,29,.045);
  overflow: visible;
}
.comparison-slot-topline {
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.comparison-slot-topline > span { color: #4f5c57; font-size: 9px; font-weight: 820; letter-spacing: .08em; text-transform: uppercase; }
.comparison-slot-topline button { padding: 0; border: 0; background: transparent; color: var(--accent-dark); font-size: 9px; cursor: pointer; }
.comparison-search-box { position: relative; }
.comparison-search-icon {
  width: 12px;
  height: 12px;
  position: absolute;
  z-index: 1;
  top: 15px;
  left: 14px;
  border: 2px solid #66736d;
  border-radius: 50%;
  pointer-events: none;
}
.comparison-search-icon::after {
  content: "";
  width: 6px;
  height: 2px;
  position: absolute;
  right: -5px;
  bottom: -3px;
  background: #66736d;
  transform: rotate(45deg);
}
.comparison-search-box input {
  width: 100%;
  height: 44px;
  padding: 0 13px 0 38px;
  border: 1px solid #cbd2cd;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  font-weight: 680;
}
.comparison-search-box input:focus { border-color: #4b7a6d; box-shadow: 0 0 0 3px rgba(41,107,91,.11); outline: 0; }
.comparison-search-results {
  width: 100%;
  max-height: 340px;
  padding: 5px;
  position: absolute;
  z-index: 80;
  top: calc(100% + 6px);
  left: 0;
  overflow-y: auto;
  border: 1px solid #cbd2cd;
  border-radius: 10px;
  background: #fffefa;
  box-shadow: 0 20px 50px rgba(20,32,29,.18);
}
.comparison-search-results button {
  width: 100%;
  padding: 11px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  cursor: pointer;
}
.comparison-search-results button:hover,
.comparison-search-results button:focus-visible { background: #edf3f0; outline: 0; }
.comparison-search-results button span { min-width: 0; }
.comparison-search-results button b { display: block; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.comparison-search-results button small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; }
.comparison-search-results button em { color: var(--green); font-size: 8px; font-style: normal; font-weight: 820; text-transform: uppercase; }
.comparison-search-hint { margin: 0; padding: 15px 12px; color: var(--muted); font-size: 9px; line-height: 1.55; }
.comparison-search-hint b,
.comparison-search-hint span { display: block; }
.comparison-slot > p { min-height: 30px; margin: 10px 2px 0; display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 8px; }
.comparison-slot > p b { color: var(--green); }
.comparison-scroll { border: 1px solid #d4d9d5; border-radius: 12px; box-shadow: 0 12px 32px rgba(20,32,29,.05); }

.runners-section {
  padding: 100px 0;
  border-top: 1px solid #d4d9d4;
}
.runners-heading { align-items: end; }
.runners-track {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  grid-auto-flow: row;
  grid-auto-columns: auto;
  gap: 12px;
  overflow: visible;
}
.runner-card {
  width: auto;
  min-height: 460px;
  padding: 21px;
  border: 1px solid #d6dad6;
  border-radius: 12px;
  background: #fffefa;
  box-shadow: 0 9px 26px rgba(20,32,29,.045);
}
.runner-card > button { border-radius: 7px; }

.jargon-section { padding: 100px 0; border-top: 1px solid #d4d9d4; }
.method-note {
  margin-top: 0;
  padding: 90px 0 110px;
  border-top: 1px solid #d4d9d4;
  background: transparent;
  box-shadow: none;
}
.method-note > p:not(.section-kicker) { max-width: 850px; }
.method-principles {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
}
.method-principles span { padding: 18px; border: 1px solid #d6dbd6; border-radius: 10px; background: #fffefa; color: var(--muted); font-size: 10px; line-height: 1.6; }
.method-principles b { display: block; margin-bottom: 5px; color: var(--ink); font-size: 12px; }

.universal-footer {
  width: min(1380px,calc(100% - 56px));
  padding-top: 45px;
  border-top-color: #cdd2ce;
}

@media (max-width: 1040px) {
  .universal-header { padding: 0 22px; }
  .result-cards { grid-template-columns: 1fr; }
  .alternatives { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .use-group-grid { grid-template-columns: 1fr; }
  .comparison-picker { grid-template-columns: 1fr; }
  .comparison-slot { position: relative; }
  .runners-track { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .universal-header { min-height: 64px; }
  .universal-header .site-nav { display: none; }
  .landing-intro,
  .route-intro,
  .questionnaire,
  .advice-nav,
  .result-stage,
  .deep-dive,
  .wide-section,
  .runners-section,
  .method-note,
  .universal-footer { width: min(100% - 30px,680px); }
  .landing-intro { padding: 72px 0 60px; }
  .landing-intro h1 { font-size: clamp(47px,15vw,69px); }
  .landing-intro .mode-picker { grid-template-columns: 1fr; }
  .landing-intro .mode-picker > a { min-height: 230px; }
  .trust-strip { grid-template-columns: 1fr; }
  .trust-strip article + article { border-top: 1px solid #d7dad5; border-left: 0; }
  .route-intro { padding: 55px 0 50px; }
  .finder-process { grid-template-columns: 1fr; }
  .questionnaire-panel { padding: 0 18px 24px; border-radius: 13px; }
  .panel-heading { margin: 0 -18px; padding: 27px 18px 24px; align-items: flex-start; }
  .field-help { margin-left: 0; }
  .use-selection-summary { align-items: flex-start; flex-direction: column; gap: 4px; }
  .use-group { padding: 14px; }
  .calculate-bar { align-items: stretch; }
  .advice-nav { top: 72px; justify-content: flex-start; overflow-x: auto; }
  .advice-nav a { flex: 0 0 auto; }
  .result-stage { padding: 65px 0 75px; }
  .result-stage-heading { align-items: flex-start; }
  .advice-confidence { grid-template-columns: 1fr; }
  .advice-confidence article + article { border-top: 1px solid #dfe2df; border-left: 0; }
  .alternatives { grid-template-columns: 1fr; }
  .recommendation-card,
  .alternatives .recommendation-card { padding: 20px; }
  .camera-heading { grid-template-columns: auto 1fr; }
  .camera-price { grid-column: 2; justify-self: start; text-align: left; }
  .card-actions { grid-template-columns: 1fr; }
  .amazon-cta { grid-column: 1; align-items: flex-start; flex-direction: column; }
  .deep-dive,
  .comparison-section,
  .runners-section,
  .jargon-section { padding: 72px 0; }
  .deep-dive-grid,
  .advice-detail-grid { grid-template-columns: 1fr; }
  .camera-tabs { width: 100%; }
  .runners-track { grid-template-columns: 1fr; }
  .runner-card { min-height: 0; }
  .method-principles { grid-template-columns: 1fr; }
}

/* CAMERASTART v8.0: focused step-by-step experience */
:root {
  --paper: #f5f5f2;
  --panel: #ffffff;
  --ink: #10221d;
  --muted: #60706a;
  --line: #d6dcd8;
  --accent: #ed6a4d;
  --accent-dark: #a63f2b;
  --green: #174f40;
  --green-soft: #e8f0ed;
  --shadow: 0 22px 65px rgba(14,34,28,.08);
}

body {
  background: #f5f5f2;
  color: var(--ink);
}

.universal-header {
  min-height: 68px;
  border-bottom: 1px solid #d9ddda;
  background: rgba(255,255,255,.96);
  box-shadow: none;
}
.universal-header .site-nav a { padding-top: 25px; padding-bottom: 22px; }
.header-cta { border-radius: 3px; }

/* A visibly new, editorial homepage */
.landing-intro {
  width: min(1280px,calc(100% - 64px));
  min-height: 670px;
  padding: 105px 0 72px;
  display: grid;
  grid-template-columns: minmax(0,1.08fr) minmax(420px,.92fr);
  grid-template-rows: auto auto auto 1fr auto;
  column-gap: clamp(55px,8vw,120px);
  align-items: start;
  text-align: left;
}
.landing-intro::after { display: none; }
.landing-intro .eyebrow { grid-column: 1; grid-row: 1; }
.landing-intro h1 {
  max-width: 720px;
  grid-column: 1;
  grid-row: 2;
  font-size: clamp(60px,7vw,96px);
  line-height: .94;
}
.landing-intro .intro-copy {
  max-width: 630px;
  margin: 31px 0 0;
  grid-column: 1;
  grid-row: 3;
  font-size: 18px;
}
.landing-intro .mode-picker {
  width: 100%;
  margin: 0;
  grid-column: 2;
  grid-row: 1 / 5;
  grid-template-columns: 1fr;
  gap: 12px;
}
.landing-intro .mode-picker > a,
.landing-intro .mode-picker > a:first-child {
  min-height: 245px;
  padding: 31px;
  border: 1px solid #ccd4cf;
  border-radius: 4px;
  background: #fff;
  box-shadow: none;
  color: var(--ink);
}
.landing-intro .mode-picker > a:first-child {
  border-color: #174f40;
  background: #12372e;
  color: #fff;
}
.landing-intro .mode-picker > a:hover { transform: translateY(-2px); box-shadow: 0 16px 35px rgba(14,34,28,.09); }
.landing-intro .mode-picker b { font-family: Georgia,"Times New Roman",serif; font-size: clamp(31px,3.2vw,43px); font-weight: 500; }
.landing-intro .mode-picker > a:not(:first-child) span { color: #5c6a65; }
.landing-intro .mode-picker > a:not(:first-child) small,
.landing-intro .mode-picker > a:not(:first-child) em { color: var(--accent-dark); }
.landing-intro .trust-strip {
  width: 100%;
  margin: 55px 0 0;
  grid-column: 1 / -1;
  grid-row: 5;
  border-radius: 4px;
  box-shadow: none;
  background: #fff;
}
.trust-strip article > span { border-radius: 3px; }

.route-intro {
  width: min(1180px,calc(100% - 56px));
  padding: 56px 0 42px;
}
.route-intro h1 { max-width: 890px; font-size: clamp(48px,5.7vw,75px); }
.route-intro .intro-copy { max-width: 690px; margin-top: 20px; font-size: 16px; }
.route-assurance { margin-top: 22px; }
.route-assurance span { border-radius: 3px; background: #fff; }

/* Focused finder shell */
.questionnaire {
  width: min(1180px,calc(100% - 56px));
  margin: 0 auto 110px;
}
.finder-shell {
  min-height: 690px;
  display: grid;
  grid-template-columns: 255px minmax(0,1fr);
  border: 1px solid #ccd4cf;
  background: #fff;
  box-shadow: 0 24px 70px rgba(14,34,28,.075);
}
.finder-sidebar {
  padding: 29px 22px 22px;
  border-right: 1px solid #d7ddd9;
  background: #f0f2ef;
  display: flex;
  flex-direction: column;
}
.finder-sidebar-heading { padding: 0 5px 21px; border-bottom: 1px solid #d4dad6; }
.finder-sidebar-heading > p {
  margin: 0 0 7px;
  color: var(--accent-dark);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.finder-sidebar-heading h2 {
  margin: 0;
  font-family: Georgia,"Times New Roman",serif;
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -.025em;
}
.finder-progress {
  height: 4px;
  margin-top: 19px;
  overflow: hidden;
  background: #d5dbd7;
}
.finder-progress span { height: 100%; display: block; background: var(--green); transition: width .28s ease; }
.finder-sidebar-heading small { display: block; margin-top: 8px; color: var(--muted); font-size: 9px; }
.step-navigation {
  margin: 17px -5px 20px;
  display: grid;
  gap: 2px;
}
.step-navigation button {
  width: 100%;
  min-height: 35px;
  padding: 5px 8px;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 6px;
  align-items: center;
  text-align: left;
  cursor: pointer;
}
.step-navigation button:hover { background: #e5e9e6; }
.step-navigation button.is-current { border-left-color: var(--accent); background: #fff; }
.step-navigation button span {
  width: 21px;
  height: 21px;
  border: 1px solid #bac4be;
  display: grid;
  place-items: center;
  color: #68766f;
  font-size: 8px;
  font-weight: 800;
}
.step-navigation button.is-current span { border-color: var(--green); background: var(--green); color: #fff; }
.step-navigation button.is-complete span { border-color: #86a298; color: var(--green); }
.step-navigation button.is-complete span::after { content: "✓"; }
.step-navigation button.is-complete span { font-size: 0; }
.step-navigation button.is-complete span::after { font-size: 9px; }
.step-navigation button b { color: #65716c; font-size: 10px; font-weight: 690; }
.step-navigation button.is-current b { color: var(--ink); font-weight: 820; }
.finder-save-note {
  margin: auto 4px 0;
  padding-top: 17px;
  border-top: 1px solid #d4dad6;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.5;
}
.finder-save-note span { margin-right: 5px; color: var(--green); }

.finder-shell .questionnaire-panel {
  min-width: 0;
  min-height: 690px;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: visible;
}
.step-toolbar {
  min-height: 59px;
  padding: 0 36px;
  border-bottom: 1px solid #e0e4e1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.step-toolbar > span { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.step-toolbar .reset-button { padding: 7px 10px; border: 0; background: transparent; color: #6a746f; font-size: 9px; text-decoration: underline; text-underline-offset: 3px; }
.question-content {
  width: 100%;
  padding: 55px clamp(34px,6vw,72px) 45px;
  align-self: start;
}
.question-group {
  margin: 0 0 12px;
  color: var(--accent-dark);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.questionnaire .question-step {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.questionnaire .question-step legend {
  max-width: 720px;
  margin: 0 0 32px;
  padding: 0;
  color: var(--ink);
  font-family: Georgia,"Times New Roman",serif;
  font-size: clamp(36px,4.3vw,54px);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.05;
}
.selection-rule { margin: -18px 0 18px; color: var(--muted); font-size: 10px; }
.questionnaire .choice-grid {
  max-width: 820px;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
}
.questionnaire .camera-form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.questionnaire .choice-button {
  min-height: 112px;
  padding: 19px;
  position: relative;
  border: 1px solid #cfd6d2;
  border-radius: 3px;
  background: #fff;
  box-shadow: none;
  color: var(--ink) !important;
  text-align: left;
  transition: border-color .16s ease,background .16s ease,transform .16s ease;
}
.questionnaire .choice-button::before {
  content: "";
  width: 17px;
  height: 17px;
  position: absolute;
  top: 14px;
  right: 14px;
  border: 1px solid #b8c2bc;
  background: #fff;
}
.questionnaire .choice-button::after { display: none !important; }
.questionnaire .choice-button:hover { border-color: #638277; transform: translateY(-1px); }
.questionnaire .choice-button .choice-label {
  max-width: calc(100% - 20px);
  display: block;
  color: var(--ink) !important;
  font-size: 13px;
  font-weight: 790;
  line-height: 1.25;
}
.questionnaire .choice-button .choice-hint {
  max-width: 95%;
  margin-top: 8px;
  display: block;
  color: #68756f !important;
  font-size: 9px;
  line-height: 1.5;
}
.questionnaire .choice-button.is-selected,
.questionnaire .choice-button[aria-pressed="true"] {
  border-color: #12372e !important;
  background: #12372e !important;
  box-shadow: inset 4px 0 0 var(--accent) !important;
  color: #fff !important;
}
.questionnaire .choice-button.is-selected::before,
.questionnaire .choice-button[aria-pressed="true"]::before {
  content: "✓";
  border-color: #fff;
  background: #fff;
  color: #12372e;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 900;
}
.questionnaire .choice-button.is-selected .choice-label,
.questionnaire .choice-button[aria-pressed="true"] .choice-label { color: #fff !important; }
.questionnaire .choice-button.is-selected .choice-hint,
.questionnaire .choice-button[aria-pressed="true"] .choice-hint { color: #cedbd6 !important; }

.question-content .budget-range-modes {
  max-width: 760px;
  margin: 0 0 34px;
  gap: 9px;
}
.question-content .budget-range-modes button {
  min-height: 82px;
  padding: 17px;
  border-radius: 3px;
  background: #fff;
  color: var(--ink);
}
.question-content .budget-range-modes button.is-selected {
  border-color: #12372e;
  background: #12372e;
  color: #fff;
}
.question-content .budget-range-modes button.is-selected span { color: #d5dfdb; }
.question-content .range-control { max-width: 760px; margin-top: 10px; padding: 26px 26px 42px; border: 1px solid #d3d9d5; border-radius: 3px; background: #f8f9f7; }
.question-content .range-label em { color: #fff; background: var(--green); border-radius: 2px; }
.question-content input[type="range"] { accent-color: var(--green); }

.question-content .advanced-toggle-grid button {
  border-radius: 3px;
  color: var(--ink);
}
.question-content .advanced-toggle-grid button.is-selected {
  background: #12372e;
  color: #fff;
}
.question-content .advanced-toggle-grid button.is-selected span,
.question-content .advanced-toggle-grid button.is-selected em { color: #d5dfdb; }

.step-controls {
  min-height: 76px;
  padding: 13px 36px;
  border-top: 1px solid #dce1dd;
  background: #fafbf9;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
}
.step-controls > span { color: var(--muted); font-size: 9px; }
.step-back,
.step-primary {
  min-height: 45px;
  padding: 0 17px;
  border: 1px solid #c7cfca;
  border-radius: 3px;
  background: #fff;
  font-size: 11px;
  font-weight: 780;
  cursor: pointer;
}
.step-back { justify-self: start; }
.step-back:disabled { opacity: .35; cursor: default; }
.step-primary {
  min-width: 145px;
  justify-self: end;
  border-color: var(--green);
  background: var(--green);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.step-primary:hover { background: #0f392f; }
.step-primary.is-finish { min-width: 220px; background: var(--accent); border-color: var(--accent); }

/* Simplified advice hierarchy */
.advice-nav {
  width: min(1240px,calc(100% - 56px));
  margin-top: 18px;
  top: 78px;
  padding: 7px;
  border-radius: 3px;
  justify-content: flex-start;
  box-shadow: 0 8px 24px rgba(14,34,28,.07);
}
.advice-nav a,
.advice-nav button {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #4d5e57;
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}
.advice-nav a:hover,
.advice-nav button:hover { background: #edf1ee; color: var(--ink); }
.advice-nav button { margin-left: auto; color: var(--accent-dark); }

.result-stage { padding: 72px 0 96px; }
.result-stage-heading {
  margin: 0 0 28px;
  padding: 0;
  border: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 35px;
  align-items: end;
}
.result-stage-heading h2 {
  max-width: 760px;
  margin: 0;
  font-family: Georgia,"Times New Roman",serif;
  font-size: clamp(47px,5.6vw,72px);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: .98;
}
.result-stage-heading p:last-child { margin-top: 14px; }
.result-trust-note { display: grid; gap: 7px; justify-items: start; }
.result-trust-note span { color: #4f625b; font-size: 9px; font-weight: 730; }

.best-match-hero {
  min-height: 575px;
  border: 1px solid #0f3028;
  background: #102f27;
  display: grid;
  grid-template-columns: minmax(0,1.38fr) minmax(320px,.62fr);
  overflow: hidden;
  box-shadow: 0 24px 65px rgba(16,47,39,.18);
}
.best-match-main { padding: clamp(36px,5vw,65px); color: #fff; }
.best-match-label { margin-bottom: 34px; display: flex; align-items: center; gap: 13px; }
.best-match-label span {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255,255,255,.35);
  display: grid;
  place-items: center;
  color: #fff;
  font-family: Georgia,"Times New Roman",serif;
  font-size: 16px;
}
.best-match-label b { color: #ff947b; font-size: 11px; letter-spacing: .11em; text-transform: uppercase; }
.best-match-title { display: grid; grid-template-columns: auto 1fr; gap: 21px; align-items: center; }
.best-match-title .camera-mark { background: #fff; }
.best-match-title p { margin: 0 0 5px; color: #c3d2cc; font-size: 11px; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
.best-match-title h3 { margin: 0; color: #fff; font-family: Georgia,"Times New Roman",serif; font-size: clamp(46px,5.7vw,78px); font-weight: 500; letter-spacing: -.045em; line-height: .92; }
.best-match-intro { max-width: 660px; margin: 28px 0 0; color: #d4dfdb; font-size: 14px; line-height: 1.7; }
.best-match-reasons { max-width: 700px; margin-top: 30px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.16); }
.best-match-reasons > p { margin: 0 0 12px; color: #ff947b; font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.best-match-reasons ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.best-match-reasons li { color: #fff; font-size: 11px; line-height: 1.55; }
.best-match-reasons li::before { content: "✓"; display: block; margin-bottom: 6px; color: #ff947b; font-weight: 900; }
.best-match-actions { margin-top: 31px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.best-match-actions > button,
.best-match-actions > a {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 2px;
  background: transparent;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  font-weight: 770;
  text-decoration: none;
  cursor: pointer;
}
.best-match-actions > button { border-color: #fff; background: #fff; color: var(--ink); }
.best-match-actions .amazon-cta { width: auto; margin: 0; grid-column: auto; }
.best-match-actions .buy-button { min-height: 44px; border-color: #cbb783; background: #f6edcf; }

.best-match-summary {
  margin: 24px 24px 24px 0;
  padding: clamp(28px,4vw,45px);
  background: #fff;
  color: var(--ink);
  display: flex;
  flex-direction: column;
}
.hero-match-score { padding-bottom: 27px; border-bottom: 1px solid #d9dfdb; }
.hero-match-score strong { display: block; color: var(--green); font-family: Georgia,"Times New Roman",serif; font-size: clamp(67px,8vw,100px); font-weight: 500; letter-spacing: -.06em; line-height: .85; }
.hero-match-score span { display: block; margin-top: 12px; color: var(--muted); font-size: 9px; font-weight: 830; letter-spacing: .1em; text-transform: uppercase; }
.best-match-summary dl { margin: 12px 0 25px; }
.best-match-summary dl > div { padding: 13px 0; border-bottom: 1px solid #e3e6e3; display: flex; justify-content: space-between; gap: 15px; }
.best-match-summary dt { color: var(--muted); font-size: 9px; }
.best-match-summary dd { margin: 0; max-width: 62%; text-align: right; font-size: 10px; font-weight: 780; }
.best-match-summary > p { margin: auto 0 0; color: var(--muted); font-size: 8px; line-height: 1.55; }

.alternative-section { margin-top: 62px; }
.alternative-heading { margin-bottom: 22px; display: grid; grid-template-columns: 1fr minmax(300px,.6fr); gap: 35px; align-items: end; }
.alternative-heading h3 { margin: 0; font-family: Georgia,"Times New Roman",serif; font-size: clamp(34px,4vw,50px); font-weight: 500; letter-spacing: -.035em; line-height: 1; }
.alternative-heading > p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.alternative-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.alternative-summary { padding: 27px; border: 1px solid #ccd4cf; background: #fff; box-shadow: none; }
.alternative-rank { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.alternative-rank span { width: 31px; height: 31px; border: 1px solid #bbc5bf; display: grid; place-items: center; color: var(--muted); font-family: Georgia,"Times New Roman",serif; font-size: 13px; }
.alternative-rank b { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.alternative-rank em { color: var(--green); font-size: 10px; font-style: normal; font-weight: 820; }
.alternative-camera { margin-top: 26px; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
.alternative-camera p { margin: 0 0 3px; color: var(--muted); font-size: 9px; font-weight: 760; text-transform: uppercase; }
.alternative-camera h3 { margin: 0; font-family: Georgia,"Times New Roman",serif; font-size: 30px; font-weight: 500; letter-spacing: -.03em; }
.alternative-camera > strong { font-size: 15px; }
.alternative-specs { margin-top: 21px; padding: 13px 0; border-top: 1px solid #e0e4e1; border-bottom: 1px solid #e0e4e1; display: flex; flex-wrap: wrap; gap: 7px; }
.alternative-specs span { padding: 5px 7px; background: #eef1ef; color: #495951; font-size: 8px; }
.alternative-verdict { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.alternative-verdict p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.alternative-verdict b { display: block; margin-bottom: 5px; color: var(--ink); font-size: 9px; }
.alternative-summary .score-details { margin-top: 19px; }
.alternative-actions { margin-top: 19px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.alternative-actions > button,
.alternative-actions > a { min-height: 40px; padding: 0 12px; border: 1px solid #bbc6c0; border-radius: 2px; background: #fff; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 760; text-decoration: none; }
.alternative-actions > button { border-color: var(--green); background: var(--green); color: #fff; }
.alternative-actions .amazon-cta { margin: 0; grid-column: 1 / -1; }
.alternative-actions .amazon-cta .buy-button { min-height: 36px; }
.result-price-note { margin: 18px 0 0; color: var(--muted); font-size: 8px; text-align: right; }

.deep-dive,
.comparison-section { border-top: 1px solid #cbd3ce; }
.deep-dive { padding: 88px 0; }
.deep-dive .section-intro h2,
.comparison-section .section-intro h2 { font-size: clamp(42px,5vw,64px); }
.deep-dive-grid { gap: 12px; }
.hero-camera-card,
.attributes-card,
.advice-detail-grid article,
.camera-video-slot { border-radius: 3px; box-shadow: none; }
.advice-detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.advice-detail-grid article { min-height: 180px; }
.camera-tabs { border-radius: 3px; }
.camera-tabs button { border-radius: 2px; }
.comparison-section { padding: 88px 0; }
.comparison-slot,
.comparison-search-box input,
.comparison-search-results,
.comparison-scroll { border-radius: 3px; }

.method-note {
  width: min(1240px,calc(100% - 56px));
  margin: 0 auto 90px;
  padding: 0;
  border: 1px solid #ccd4cf;
  background: #fff;
}
.method-note > summary {
  min-height: 92px;
  padding: 21px 27px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  list-style: none;
}
.method-note > summary::-webkit-details-marker { display: none; }
.method-note > summary small { display: block; margin-bottom: 5px; color: var(--accent-dark); font-size: 8px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.method-note > summary b { font-family: Georgia,"Times New Roman",serif; font-size: 24px; font-weight: 500; }
.method-note > summary em { color: var(--green); font-size: 9px; font-style: normal; font-weight: 800; }
.method-body { padding: 0 27px 27px; border-top: 1px solid #e0e4e1; }
.method-body > p { max-width: 850px; margin: 25px 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.runners-section,
.jargon-section { display: none; }

@media (max-width: 980px) {
  .landing-intro { grid-template-columns: 1fr; }
  .landing-intro .eyebrow,
  .landing-intro h1,
  .landing-intro .intro-copy,
  .landing-intro .mode-picker,
  .landing-intro .trust-strip { grid-column: 1; grid-row: auto; }
  .landing-intro .mode-picker { margin-top: 42px; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .finder-shell { grid-template-columns: 215px minmax(0,1fr); }
  .questionnaire .choice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .best-match-hero { grid-template-columns: 1fr; }
  .best-match-summary { margin: 0 24px 24px; }
  .best-match-reasons ul { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .landing-intro { width: min(100% - 30px,680px); min-height: 0; padding: 65px 0 55px; }
  .landing-intro h1 { font-size: clamp(48px,15vw,70px); }
  .landing-intro .mode-picker { grid-template-columns: 1fr; gap: 9px; }
  .landing-intro .mode-picker > a,
  .landing-intro .mode-picker > a:first-child { min-height: 215px; }
  .landing-intro .trust-strip { margin-top: 28px; }
  .questionnaire { width: min(100% - 20px,680px); }
  .finder-shell { min-height: 0; grid-template-columns: 1fr; }
  .finder-sidebar { padding: 18px 15px 12px; border-right: 0; border-bottom: 1px solid #d7ddd9; }
  .finder-sidebar-heading { display: grid; grid-template-columns: 1fr auto; column-gap: 15px; align-items: end; }
  .finder-sidebar-heading > p { grid-column: 1 / -1; }
  .finder-sidebar-heading h2 { font-size: 21px; }
  .finder-progress { width: 110px; margin: 0; }
  .finder-sidebar-heading small { grid-column: 2; text-align: right; }
  .step-navigation { margin: 12px 0 0; display: flex; overflow-x: auto; scrollbar-width: none; }
  .step-navigation::-webkit-scrollbar { display: none; }
  .step-navigation button { width: auto; min-width: 52px; grid-template-columns: 1fr; justify-items: center; border-left: 0; border-bottom: 2px solid transparent; }
  .step-navigation button.is-current { border-bottom-color: var(--accent); }
  .step-navigation button b { display: none; }
  .finder-save-note { display: none; }
  .finder-shell .questionnaire-panel { min-height: 570px; }
  .step-toolbar { padding: 0 18px; }
  .question-content { padding: 38px 18px 34px; }
  .questionnaire .question-step legend { margin-bottom: 25px; font-size: clamp(34px,10vw,47px); }
  .questionnaire .choice-grid,
  .questionnaire .camera-form-grid { grid-template-columns: 1fr; }
  .questionnaire .choice-button { min-height: 91px; }
  .question-content .budget-range-modes { grid-template-columns: 1fr; }
  .question-content .range-control { padding: 22px 15px 38px; }
  .step-controls { min-height: 70px; padding: 11px 16px; }
  .step-controls > span { display: none; }
  .step-controls { grid-template-columns: 1fr 1fr; }
  .step-primary { grid-column: 2; }
  .step-primary.is-finish { min-width: 0; }
  .advice-nav { width: calc(100% - 20px); top: 70px; overflow-x: auto; }
  .advice-nav button { margin-left: 0; }
  .result-stage,
  .deep-dive,
  .comparison-section,
  .method-note { width: min(100% - 24px,680px); }
  .result-stage-heading { grid-template-columns: 1fr; }
  .result-trust-note { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .best-match-hero { min-height: 0; }
  .best-match-main { padding: 28px 21px; }
  .best-match-title { grid-template-columns: 1fr; }
  .best-match-title h3 { font-size: clamp(47px,14vw,67px); }
  .best-match-summary { margin: 0 12px 12px; padding: 27px 22px; }
  .alternative-heading { grid-template-columns: 1fr; }
  .alternative-grid { grid-template-columns: 1fr; }
  .alternative-summary { padding: 21px; }
  .alternative-camera { grid-template-columns: auto 1fr; }
  .alternative-camera > strong { grid-column: 2; }
  .alternative-verdict { grid-template-columns: 1fr; }
  .advice-detail-grid { grid-template-columns: 1fr; }
  .method-note > summary { padding: 19px; }
  .method-body { padding: 0 19px 20px; }
}

/* CAMERASTART v9: calm landing page and continuous finder */
.landing-intro {
  width: min(1180px,calc(100% - 56px));
  min-height: 0;
  padding: 96px 0 72px;
  display: block;
  text-align: center;
}
.landing-intro .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.landing-intro h1 {
  max-width: 1000px;
  margin: 20px auto 0;
  font-size: clamp(59px,7.2vw,96px);
  line-height: .94;
}
.landing-intro .intro-copy {
  max-width: 750px;
  margin: 28px auto 0;
  color: #52605a;
  font-size: 18px;
  line-height: 1.7;
}
.landing-intro .mode-picker {
  width: min(100%,1040px);
  margin: 48px auto 0;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 14px;
}
.landing-intro .mode-picker > a,
.landing-intro .mode-picker > a:first-child {
  min-height: 255px;
  padding: 34px;
  border: 1px solid #cbd3ce;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(14,34,28,.055);
  color: var(--ink);
  align-items: center;
  text-align: center;
}
.landing-intro .mode-picker > a:first-child {
  border-color: #174f40;
  background: #12372e;
  color: #fff;
}
.landing-intro .mode-picker > a:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 48px rgba(14,34,28,.1);
}
.landing-intro .mode-picker b {
  font-size: clamp(32px,3.4vw,45px);
}
.landing-intro .mode-picker span {
  max-width: 430px;
  margin-right: auto;
  margin-left: auto;
}
.landing-intro .mode-picker > a:not(:first-child) span { color: #5c6a65; }
.landing-intro .mode-picker > a:not(:first-child) small,
.landing-intro .mode-picker > a:not(:first-child) em { color: var(--accent-dark); }
.landing-intro .trust-strip {
  width: min(100%,1040px);
  margin: 18px auto 0;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  text-align: left;
}

.scroll-questionnaire {
  width: min(1120px,calc(100% - 56px));
  margin: 0 auto 110px;
}
.scroll-finder-header {
  padding: 8px 0 35px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 36px;
  align-items: end;
}
.scroll-finder-header h2 {
  max-width: 800px;
  margin: 10px 0 0;
  font-family: Georgia,"Times New Roman",serif;
  font-size: clamp(45px,5.4vw,67px);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: .98;
}
.scroll-finder-header > div > p:last-child {
  max-width: 720px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}
.scroll-finder-header .reset-button {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #c7cfca;
  border-radius: 3px;
  background: #fff;
  color: #52605a;
  font-size: 9px;
  font-weight: 780;
  cursor: pointer;
}
.scroll-finder-header .reset-button:hover { border-color: var(--green); color: var(--green); }
.finder-overview {
  min-height: 58px;
  padding: 0 28px;
  border: 1px solid #ccd4cf;
  border-bottom: 0;
  background: #eef1ee;
  display: flex;
  align-items: center;
  gap: 28px;
}
.finder-overview span {
  color: #6a756f;
  font-size: 9px;
}
.finder-overview span + span {
  padding-left: 28px;
  border-left: 1px solid #cbd2cd;
}
.finder-overview b { color: var(--ink); font-weight: 820; }
.scroll-questionnaire-panel {
  padding: 0 52px 52px;
  border: 1px solid #ccd4cf;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 24px 70px rgba(14,34,28,.065);
}
.scroll-question {
  margin: 0;
  padding: 49px 0;
  border: 0;
  border-bottom: 1px solid #dce1dd;
}
.scroll-question legend {
  width: 100%;
  margin: 0 0 27px;
  padding: 0;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  gap: 15px;
  align-items: start;
}
.scroll-question legend > span {
  width: 38px;
  height: 38px;
  border: 1px solid #b9c4be;
  border-radius: 2px;
  display: grid;
  place-items: center;
  color: var(--green);
  font-family: Georgia,"Times New Roman",serif;
  font-size: 14px;
}
.scroll-question legend > b {
  max-width: 820px;
  padding-top: 2px;
  color: var(--ink);
  font-family: Georgia,"Times New Roman",serif;
  font-size: clamp(28px,3vw,39px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.05;
}
.scroll-question .selection-rule {
  margin: -11px 0 24px 57px;
  color: var(--muted);
  font-size: 10px;
}
.scroll-questionnaire .choice-grid {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 9px;
}
.scroll-questionnaire .camera-form-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.scroll-questionnaire .choice-button {
  min-height: 98px;
  padding: 18px;
  border: 1px solid #cfd6d2;
  border-radius: 3px;
  background: #fff;
  box-shadow: none;
  color: var(--ink) !important;
  text-align: left;
}
.scroll-questionnaire .choice-button:hover { border-color: #638277; transform: translateY(-1px); }
.scroll-questionnaire .choice-button .choice-label { color: var(--ink) !important; }
.scroll-questionnaire .choice-button .choice-hint { color: #68756f !important; }
.scroll-questionnaire .choice-button.is-selected,
.scroll-questionnaire .choice-button[aria-pressed="true"] {
  border-color: #12372e !important;
  background: #12372e !important;
  box-shadow: inset 4px 0 0 var(--accent) !important;
  color: #fff !important;
}
.scroll-questionnaire .choice-button.is-selected .choice-label,
.scroll-questionnaire .choice-button[aria-pressed="true"] .choice-label { color: #fff !important; }
.scroll-questionnaire .choice-button.is-selected .choice-hint,
.scroll-questionnaire .choice-button[aria-pressed="true"] .choice-hint { color: #cedbd6 !important; }
.scroll-questionnaire .choice-button.is-selected::before,
.scroll-questionnaire .choice-button[aria-pressed="true"]::before {
  content: "✓";
  border-color: #fff;
  background: #fff;
  color: #12372e;
}
.use-category-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 11px;
}
.use-category {
  min-width: 0;
  padding: 18px;
  border: 1px solid #d4dad6;
  border-radius: 3px;
  background: #f7f8f6;
}
.use-category-heading {
  min-height: 49px;
  margin-bottom: 15px;
  padding-bottom: 13px;
  border-bottom: 1px solid #d7dcd8;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  align-items: start;
}
.use-category-heading > span {
  color: var(--accent-dark);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .08em;
}
.use-category-heading h3 {
  margin: 0;
  color: var(--ink);
  font-size: 11px;
  font-weight: 820;
  line-height: 1.35;
}
.scroll-questionnaire .use-category .choice-grid { grid-template-columns: 1fr; gap: 7px; }
.scroll-questionnaire .use-category .choice-button { min-height: 84px; padding: 15px; }
.scroll-questionnaire .budget-range-modes { max-width: 780px; }
.scroll-questionnaire .range-control { max-width: 820px; }
.scroll-questionnaire .advanced-pair { gap: 22px; }
.calculate-bar {
  margin: 0 -52px -52px;
  padding: 25px 30px;
  background: #12372e;
  color: #fff;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 30px;
  align-items: center;
}
.calculate-bar small {
  display: block;
  margin-bottom: 6px;
  color: #b8cbc4;
  font-size: 8px;
  font-weight: 820;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.calculate-bar b {
  font-family: Georgia,"Times New Roman",serif;
  font-size: 22px;
  font-weight: 500;
}
.calculate-bar button {
  min-height: 48px;
  min-width: 235px;
  padding: 0 18px;
  border: 1px solid var(--accent);
  border-radius: 2px;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  font-size: 10px;
  font-weight: 820;
  cursor: pointer;
}
.calculate-bar button:hover { background: #e9684e; }
.calculate-bar button:disabled { opacity: .65; cursor: wait; }

@media (max-width: 980px) {
  .landing-intro .mode-picker { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .use-category-grid { grid-template-columns: 1fr; }
  .scroll-questionnaire .use-category .choice-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .scroll-questionnaire .camera-form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .landing-intro { width: min(100% - 30px,680px); padding: 68px 0 55px; }
  .landing-intro h1 { font-size: clamp(47px,15vw,70px); }
  .landing-intro .intro-copy { font-size: 16px; }
  .landing-intro .mode-picker { margin-top: 38px; grid-template-columns: 1fr; gap: 9px; }
  .landing-intro .mode-picker > a,
  .landing-intro .mode-picker > a:first-child { min-height: 220px; padding: 27px 22px; }
  .landing-intro .trust-strip { grid-template-columns: 1fr; }
  .scroll-questionnaire { width: min(100% - 20px,680px); }
  .scroll-finder-header { grid-template-columns: 1fr; gap: 20px; }
  .scroll-finder-header .reset-button { justify-self: start; }
  .finder-overview { min-height: 0; padding: 13px 16px; flex-wrap: wrap; gap: 8px 15px; }
  .finder-overview span + span { padding-left: 15px; }
  .scroll-questionnaire-panel { padding: 0 18px 18px; }
  .scroll-question { padding: 37px 0; }
  .scroll-question legend { grid-template-columns: 36px minmax(0,1fr); gap: 11px; }
  .scroll-question legend > span { width: 34px; height: 34px; }
  .scroll-question legend > b { font-size: clamp(27px,8vw,35px); }
  .scroll-question .selection-rule { margin-left: 47px; }
  .scroll-questionnaire .choice-grid,
  .scroll-questionnaire .camera-form-grid,
  .scroll-questionnaire .use-category .choice-grid { grid-template-columns: 1fr; }
  .scroll-questionnaire .choice-button,
  .scroll-questionnaire .use-category .choice-button { min-height: 88px; }
  .use-category { padding: 13px; }
  .calculate-bar { margin: 0 -18px -18px; padding: 22px 18px; grid-template-columns: 1fr; gap: 18px; }
  .calculate-bar button { width: 100%; min-width: 0; }
}

/* CAMERASTART v10: compact questions, aligned controls and glossary */
.scroll-question {
  margin: 0;
  padding: 36px 0 38px;
  border: 0;
  border-bottom: 1px solid #dce1dd;
}
.question-heading {
  width: 100%;
  margin: 0 0 24px;
  display: grid;
  grid-template-columns: 40px minmax(0,1fr);
  gap: 14px;
  align-items: center;
}
.question-heading > span {
  width: 38px;
  height: 38px;
  border: 1px solid #aebbb5;
  border-radius: 3px;
  background: #12372e;
  color: #fff;
  display: grid;
  place-items: center;
  font-family: Georgia,"Times New Roman",serif;
  font-size: 13px;
  font-weight: 700;
}
.question-heading h3 {
  max-width: 880px;
  margin: 0;
  color: var(--ink);
  font-family: Georgia,"Times New Roman",serif;
  font-size: clamp(29px,3vw,40px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.06;
}
.scroll-question .selection-rule {
  margin: -8px 0 20px 54px;
  color: var(--muted);
  font-size: 10px;
}
.scroll-questionnaire .choice-button {
  min-height: 68px;
  padding: 15px 48px 15px 16px;
  justify-content: center;
}
.scroll-questionnaire .choice-button::before {
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
}
.scroll-questionnaire .choice-button .choice-label {
  max-width: 100%;
  font-size: 12px;
  line-height: 1.3;
}
.scroll-questionnaire .choice-hint { display: none !important; }
.scroll-questionnaire .use-category .choice-button {
  min-height: 62px;
  padding: 13px 43px 13px 14px;
}
.use-category { padding: 15px; }
.use-category-heading {
  min-height: 0;
  margin-bottom: 11px;
  padding: 0 0 11px;
  align-items: center;
}
.use-category-heading h3 { font-size: 11px; }
.scroll-questionnaire .camera-form-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.scroll-questionnaire .budget-range-modes,
.scroll-questionnaire .range-control {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
.scroll-questionnaire .budget-range-modes {
  margin: 0 0 12px;
}
.scroll-questionnaire .budget-range-modes button {
  min-height: 68px;
  padding: 14px 18px;
}
.scroll-questionnaire .range-control {
  margin: 0;
  padding: 23px 28px 43px;
  border-radius: 4px;
  background: #f8f8f5;
}
.scroll-questionnaire .range-control input[type="range"],
.scroll-questionnaire .budget-ticks,
.scroll-questionnaire .weight-ticks { width: 100%; }
.scroll-questionnaire .range-control input[type="range"] { display: block; }
.scroll-questionnaire .advanced-toggle-grid button {
  min-height: 82px;
  padding: 17px;
  justify-content: space-between;
}
.scroll-questionnaire .advanced-toggle-grid em { padding-top: 8px; }

.calculate-bar {
  margin: 0 -52px -52px;
  padding: 28px 30px;
  border-radius: 0;
  background: linear-gradient(135deg,#102f27 0%,#17463a 100%);
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 34px;
  align-items: center;
}
.calculate-copy > span {
  display: inline-flex;
  min-height: 25px;
  padding: 0 9px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 99px;
  color: #ff9a83;
  align-items: center;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.calculate-copy > b {
  display: block;
  margin-top: 10px;
  color: #fff;
  font-family: Georgia,"Times New Roman",serif;
  font-size: clamp(25px,2.5vw,33px);
  font-weight: 500;
  line-height: 1.05;
}
.calculate-copy > p {
  margin: 7px 0 0;
  color: #bfd0ca;
  font-size: 10px;
}
.calculate-bar > button {
  min-width: 270px;
  min-height: 62px;
  padding: 0 20px;
  border: 1px solid #ff795f;
  border-radius: 5px;
  background: linear-gradient(135deg,#f17359,#df5c43);
  box-shadow: 0 13px 28px rgba(4,21,17,.2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  font-size: 12px;
  font-weight: 840;
}
.calculate-bar > button:hover {
  background: linear-gradient(135deg,#fa8067,#d95038);
  box-shadow: 0 16px 34px rgba(4,21,17,.28);
  transform: translateY(-1px);
}
.calculate-bar > button > b { font-size: 20px; font-weight: 500; }

.comparison-workspace {
  margin-top: 30px;
  border-radius: 6px;
  box-shadow: 0 15px 42px rgba(14,34,28,.065);
}
.comparison-workspace .comparison-picker {
  margin: 0;
  padding: 14px;
  border: 1px solid #cbd3ce;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: #f2f3f0;
  gap: 10px;
}
.comparison-workspace .comparison-slot {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.comparison-workspace .comparison-slot-topline {
  margin: 0 2px 7px;
}
.comparison-workspace .comparison-search-box {
  border: 1px solid #c7d0ca;
  border-radius: 4px;
  background: #fff;
}
.comparison-workspace .comparison-search-box:focus-within {
  border-color: #4b7a6d;
  box-shadow: 0 0 0 3px rgba(41,107,91,.11);
}
.comparison-workspace .comparison-search-box input {
  height: 68px;
  padding: 0 36px 20px 39px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  font-size: 11px;
}
.comparison-workspace .comparison-search-box input:focus { border: 0; box-shadow: none; }
.comparison-workspace .comparison-search-icon { top: 18px; }
.comparison-search-meta {
  height: 18px;
  position: absolute;
  right: 12px;
  bottom: 7px;
  left: 39px;
  color: #6b7772;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  font-size: 8px;
  pointer-events: none;
}
.comparison-search-meta b { color: var(--green); font-size: 8px; }
.comparison-workspace .comparison-search-results { top: calc(100% + 5px); }
.comparison-workspace .comparison-scroll {
  margin: 0;
  border: 1px solid #cbd3ce;
  border-radius: 0 0 6px 6px;
  box-shadow: none;
}
.comparison-workspace .comparison-table thead th {
  padding-top: 15px;
  padding-bottom: 15px;
  background: #12372e;
  color: #e6efeb;
  font-family: inherit;
  font-size: 9px;
  font-weight: 820;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.comparison-workspace .comparison-table thead th:first-child { color: #bfcfc9; }
.comparison-workspace .comparison-empty {
  margin: 0;
  border: 1px solid #cbd3ce;
  border-radius: 0 0 6px 6px;
  background: #fff;
}
.comparison-missing { color: var(--muted); font-size: 9px; }
.comparison-value small,
.table-explainer { display: none; }

span.term-help {
  position: relative;
  z-index: 12;
  display: inline;
  margin: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  cursor: help;
  outline: none;
}
span.term-help > .term-help-label {
  display: inline;
  margin: 0;
  padding: 0;
  border-bottom: 1px dotted currentColor;
  color: inherit;
  font: inherit;
  line-height: inherit;
}
span.term-help > span.term-tooltip {
  width: min(245px,calc(100vw - 30px));
  max-width: none;
  margin: 0;
  padding: 12px;
  position: absolute;
  z-index: 1000;
  top: calc(100% + 9px);
  left: 50%;
  border: 1px solid #c7d0ca;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 14px 35px rgba(10,31,25,.18);
  color: #183029;
  display: grid;
  grid-template-columns: 22px minmax(0,1fr);
  gap: 9px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-2px);
  text-align: left;
  white-space: normal;
  pointer-events: none;
  transition: opacity .14s ease,visibility 0s linear .14s,transform .14s ease;
}
span.term-help > span.term-tooltip > i {
  width: 20px;
  height: 20px;
  margin: 0;
  border-radius: 50%;
  background: #12372e;
  color: #fff;
  display: grid;
  place-items: center;
  font-family: Georgia,"Times New Roman",serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}
span.term-help > span.term-tooltip > span {
  max-width: none;
  margin: 0;
  padding: 0;
  color: #56635d;
  display: block;
  font-family: Arial,sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
  text-transform: none;
}
span.term-help > span.term-tooltip > span > b,
span.term-help > span.term-tooltip > span > span {
  max-width: none;
  margin: 0;
  padding: 0;
  color: #183029;
  display: block;
  font-family: Arial,sans-serif;
  font-size: 10px;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}
span.term-help > span.term-tooltip > span > b { margin-bottom: 4px; font-weight: 820; }
span.term-help > span.term-tooltip > span > span { color: #5e6b65; font-weight: 400; line-height: 1.45; }
span.term-help:hover > span.term-tooltip,
span.term-help:focus > span.term-tooltip,
button:focus-visible span.term-help--embedded > span.term-tooltip,
a:focus-visible span.term-help--embedded > span.term-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: .45s,.45s,.45s;
}
.advanced-toggle-grid span.term-help,
.advanced-toggle-grid span.term-help > span.term-help-label {
  margin: 0;
  color: inherit;
  display: inline;
  font: inherit;
  line-height: inherit;
}

@media (max-width: 980px) {
  .scroll-questionnaire .camera-form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .scroll-question { padding: 30px 0 32px; }
  .question-heading { grid-template-columns: 35px minmax(0,1fr); gap: 10px; margin-bottom: 20px; }
  .question-heading > span { width: 34px; height: 34px; font-size: 11px; }
  .question-heading h3 { font-size: clamp(26px,8vw,34px); }
  .scroll-question .selection-rule { margin: -5px 0 17px 45px; }
  .scroll-questionnaire .budget-range-modes { grid-template-columns: 1fr; }
  .scroll-questionnaire .range-control { padding: 21px 17px 40px; }
  .calculate-bar { margin: 0 -18px -18px; padding: 23px 18px; grid-template-columns: 1fr; gap: 19px; }
  .calculate-bar > button { width: 100%; min-width: 0; }
  .comparison-workspace .comparison-picker { grid-template-columns: 1fr; border-bottom: 0; }
  .comparison-workspace .comparison-scroll { border-radius: 0 0 6px 6px; }
  span.term-help > span.term-tooltip { left: 0; transform: translateX(0) translateY(-2px); }
  span.term-help:hover > span.term-tooltip,
  span.term-help:focus > span.term-tooltip,
  button:focus-visible span.term-help--embedded > span.term-tooltip,
  a:focus-visible span.term-help--embedded > span.term-tooltip { transform: translateX(0) translateY(0); }
}

/* CAMERASTART v10.1: richer finder, clearer results and viewport-safe glossary */
body {
  background:
    radial-gradient(circle at 8% 10%,rgba(20,72,58,.055),transparent 27rem),
    linear-gradient(180deg,#f2f3ef 0%,#f7f7f4 48%,#eef1ed 100%);
}

.scroll-finder-header {
  padding: clamp(34px,5vw,58px);
  border: 1px solid #c3ccc6;
  border-bottom: 0;
  background: linear-gradient(135deg,#f8faf7 0%,#e8eeea 100%);
}
.finder-overview {
  border-color: #b8c5be;
  background: #173c32;
}
.finder-overview span,
.finder-overview b { color: #f2f7f4; }
.finder-overview span + span { border-left-color: rgba(255,255,255,.17); }
.scroll-questionnaire-panel {
  border-color: #b8c4bd;
  background: rgba(251,252,249,.94);
  box-shadow: 0 24px 64px rgba(20,48,39,.09);
}
.scroll-question {
  border-bottom-color: #cbd3ce;
}
.scroll-question:nth-child(even) {
  position: relative;
}
.scroll-question:nth-child(even)::before {
  content: "";
  position: absolute;
  inset: 1px -26px;
  z-index: -1;
  background: rgba(228,234,229,.36);
}
.question-heading > span,
.use-category-heading > span {
  border-color: #a9b9b0;
  background: #e2e9e4;
  color: #173e34;
}
.use-category {
  border-color: #b8c4bd;
  background: #edf1ed;
}
.scroll-questionnaire .choice-button {
  border-color: #b4c0b9;
  background: #e7ece8;
  box-shadow: inset 0 1px rgba(255,255,255,.55);
}
.scroll-questionnaire .choice-button:hover {
  border-color: #718b7e;
  background: #dde6e0;
}
.scroll-questionnaire .choice-button.is-selected {
  border-color: #173e34;
  background: linear-gradient(135deg,#173e34,#245749);
  box-shadow: 0 9px 22px rgba(20,63,52,.14);
}
.scroll-questionnaire .budget-range-modes button,
.scroll-questionnaire .range-control {
  border-color: #b9c5be;
  background: #e9eeea;
}
.scroll-questionnaire .budget-range-modes button:hover { background: #dfe8e2; }
.scroll-questionnaire .budget-range-modes button.is-selected {
  border-color: #173e34;
  background: #173e34;
}
.calculate-bar > button > span {
  color: #fff;
  font-size: clamp(16px,1.55vw,20px);
  font-weight: 870;
  letter-spacing: -.015em;
}

.result-stage {
  position: relative;
}
#results-title,
#full-advice,
#compare { scroll-margin-top: 132px; }
.result-stage::before {
  content: "";
  position: absolute;
  top: 98px;
  right: -10vw;
  bottom: -30px;
  left: -10vw;
  z-index: -1;
  background: linear-gradient(180deg,rgba(226,234,228,.7),rgba(245,246,243,0));
}
.best-match-hero {
  min-height: 0;
  border: 1px solid #93a99d;
  border-top: 8px solid #173e34;
  border-radius: 15px;
  background: linear-gradient(135deg,#eef4f0 0%,#e1eae4 100%);
  grid-template-columns: minmax(0,1.4fr) minmax(315px,.6fr);
  overflow: visible;
  box-shadow: 0 25px 64px rgba(17,58,47,.13);
}
.best-match-main {
  padding: clamp(34px,5vw,60px);
  color: var(--ink);
}
.best-match-label { margin-bottom: 31px; }
.best-match-label span {
  border-color: #173e34;
  border-radius: 50%;
  background: #173e34;
  color: #fff;
}
.best-match-label b { color: #bd4934; }
.best-match-title .camera-mark { background: #fff; box-shadow: 0 8px 22px rgba(23,62,52,.1); }
.best-match-title p { color: #5b6d64; }
.best-match-title h3 { color: #132a24; }
.best-match-intro { color: #55665e; }
.best-match-reasons {
  max-width: none;
  border-top-color: #bdc9c2;
}
.best-match-reasons > p { color: #a43d2c; }
.best-match-reasons li {
  min-height: 92px;
  padding: 15px;
  border: 1px solid #c7d1cb;
  border-radius: 8px;
  background: rgba(255,255,255,.78);
  color: #263a33;
  box-sizing: border-box;
}
.best-match-reasons li::before { color: #bd4934; }
.best-match-actions { gap: 9px; }
.best-match-actions > button,
.best-match-actions > a {
  border-color: #899d92;
  border-radius: 6px;
  background: rgba(255,255,255,.72);
  color: #17352d;
}
.best-match-actions > button {
  border-color: #173e34;
  background: #173e34;
  color: #fff;
}
.best-match-actions .amazon-cta {
  width: 100%;
  order: -1;
}
.best-match-actions .amazon-cta .buy-button,
.alternative-actions .amazon-cta .buy-button,
.hero-camera-card .amazon-cta .buy-button {
  border: 1px solid #b83f2d;
  border-radius: 7px;
  background: linear-gradient(135deg,#e4644d,#c84331);
  box-shadow: 0 10px 24px rgba(170,58,40,.19);
  color: #fff;
}
.best-match-actions .amazon-cta .buy-button {
  min-height: 58px;
  padding: 0 19px;
  font-size: 13px;
}
.best-match-actions .amazon-cta .buy-button small,
.alternative-actions .amazon-cta .buy-button small,
.hero-camera-card .amazon-cta .buy-button small { color: rgba(255,255,255,.76); }
.best-match-actions .amazon-cta .buy-button:hover,
.alternative-actions .amazon-cta .buy-button:hover,
.hero-camera-card .amazon-cta .buy-button:hover {
  border-color: #9e3122;
  background: linear-gradient(135deg,#ed6e55,#b93827);
  box-shadow: 0 14px 30px rgba(157,48,32,.25);
}
.best-match-summary {
  margin: 0;
  padding: clamp(31px,4vw,47px);
  border-radius: 0 7px 7px 0;
  background: linear-gradient(155deg,#173e34,#0e2d25);
  color: #fff;
}
.hero-match-score { border-bottom-color: rgba(255,255,255,.18); }
.hero-match-score strong { color: #fff; }
.hero-match-score span,
.best-match-summary dt,
.best-match-summary > p { color: #bdd0c7; }
.best-match-summary dl > div { border-bottom-color: rgba(255,255,255,.14); }
.best-match-summary dd { color: #fff; }

.alternative-summary {
  border-color: #aebeb5;
  border-radius: 10px;
  background: linear-gradient(145deg,#edf3ef 0%,#e3ebe6 100%);
  box-shadow: 0 13px 35px rgba(21,57,47,.07);
}
.alternative-rank span { border-color: #88a095; background: #173e34; color: #fff; }
.alternative-specs { border-color: #c0ccc5; }
.alternative-specs span { background: rgba(255,255,255,.73); }
.alternative-actions { grid-template-columns: 1fr 1fr; }
.alternative-actions .amazon-cta {
  grid-column: 1 / -1;
  grid-row: 1;
}
.alternative-actions .amazon-cta .buy-button { min-height: 48px; font-size: 11px; }
.alternative-actions > button,
.alternative-actions > a {
  border-radius: 5px;
  border-color: #9aada3;
  background: rgba(255,255,255,.7);
}
.alternative-actions > button { border-color: #173e34; background: #173e34; }

.deep-dive-grid { align-items: stretch; }
.hero-camera-card,
.attributes-card {
  border-color: #aebeb5;
  border-radius: 11px;
  background: #f7faf7;
}
.hero-camera-card {
  border-color: #173e34;
  background: linear-gradient(145deg,#173e34,#25584a);
  color: #fff;
}
.attributes-card { background: #e7eee9; }
.advice-detail-grid {
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
}
.advice-detail-grid article {
  min-height: 235px;
  border-color: #b6c4bc;
  border-radius: 10px;
  background: linear-gradient(155deg,#f9faf7,#e8eee9);
}
.advice-detail-grid article > p:not(.section-kicker) {
  overflow-wrap: anywhere;
}
.advice-detail-grid article > span {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.friendly-specs { display: none; }

body span.term-help {
  z-index: auto;
}
body span.term-help:hover,
body span.term-help:focus,
body span.term-help:focus-within { z-index: 3000; }
body span.term-help > span.term-tooltip {
  width: min(280px,calc(100vw - 24px));
  position: fixed;
  z-index: 4000;
  top: var(--tooltip-top,12px);
  left: var(--tooltip-left,12px);
  transform: translateY(-2px);
}
body span.term-help:hover > span.term-tooltip,
body span.term-help:focus > span.term-tooltip,
body button:focus-visible span.term-help--embedded > span.term-tooltip,
body a:focus-visible span.term-help--embedded > span.term-tooltip {
  transform: translateY(0);
}

@media (max-width: 980px) {
  .best-match-hero { grid-template-columns: 1fr; }
  .best-match-summary { margin: 0; border-radius: 0 0 7px 7px; }
  .advice-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .scroll-finder-header { padding: 30px 20px; }
  .finder-overview { grid-template-columns: 1fr; }
  .finder-overview span + span { border-top: 1px solid rgba(255,255,255,.15); border-left: 0; }
  .scroll-question:nth-child(even)::before { right: -18px; left: -18px; }
  .best-match-main { padding: 29px 20px; }
  .best-match-reasons li { min-height: 0; }
  .best-match-summary { padding: 28px 22px; }
  .best-match-actions > button,
  .best-match-actions > a { width: 100%; justify-content: space-between; }
  .alternative-actions { grid-template-columns: 1fr; }
  .alternative-actions .amazon-cta { grid-column: 1; }
  body span.term-help > span.term-tooltip { transform: translateY(-2px); }
  body span.term-help:hover > span.term-tooltip,
  body span.term-help:focus > span.term-tooltip,
  body button:focus-visible span.term-help--embedded > span.term-tooltip,
  body a:focus-visible span.term-help--embedded > span.term-tooltip { transform: translateY(0); }
}

/* CAMERASTART v10.2: calmer recommendation, clearer weight and flexible comparison */
.scroll-questionnaire .weight-range {
  padding-bottom: 24px;
}
.weight-context {
  margin-top: 38px;
  padding: 11px 13px;
  border: 1px solid #c3cec7;
  border-radius: 5px;
  background: rgba(255,255,255,.66);
  color: #51625a;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 9px;
  line-height: 1.45;
}
.weight-context b {
  flex: 0 0 auto;
  color: #173e34;
  font-size: 8px;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.best-match-hero {
  grid-template-columns: minmax(0,1.42fr) minmax(250px,.58fr);
}
.best-match-main {
  padding: clamp(22px,2.35vw,31px);
}
.best-match-label { margin-bottom: 14px; }
.best-match-label span { width: 28px; height: 28px; font-size: 12px; }
.best-match-title { gap: 11px; }
.best-match-title .camera-mark.is-large { transform: scale(.68); transform-origin: left center; margin-right: -8px; }
.best-match-title h3 { font-size: clamp(28px,3.2vw,40px); line-height: 1; }
.best-match-intro { max-width: 570px; margin-top: 12px; font-size: 10px; line-height: 1.5; }
.best-match-reasons { margin-top: 13px; padding-top: 12px; }
.best-match-reasons > p { margin-bottom: 7px; }
.best-match-reasons ul { gap: 7px; }
.best-match-reasons li {
  min-height: 0;
  padding: 8px 9px;
  font-size: 8px;
  line-height: 1.4;
}
.best-match-reasons li::before { display: inline; margin: 0 6px 0 0; }
.best-match-actions { margin-top: 13px; }
.best-match-actions .amazon-cta .buy-button { min-height: 44px; font-size: 10px; }
.best-match-actions > button,
.best-match-actions > a { min-height: 40px; }
.best-match-summary { padding: 22px; }
.hero-match-score { padding-bottom: 13px; }
.hero-match-score strong { font-size: clamp(42px,4.2vw,55px); }
.hero-match-score span { margin-top: 7px; }
.best-match-summary dl { margin: 6px 0 11px; }
.best-match-summary dl > div { padding: 7px 0; }

.advice-switcher {
  width: min(100%,620px);
  display: grid;
  gap: 9px;
}
.advice-switcher .camera-tabs { width: 100%; box-sizing: border-box; }
.advice-camera-search > label {
  display: block;
  margin: 0 0 6px;
  color: #53635c;
  font-size: 8px;
  font-weight: 810;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.advice-search-box { position: relative; }
.advice-search-box .comparison-search-icon { top: 13px; }
.advice-search-box > input {
  width: 100%;
  height: 42px;
  padding: 0 13px 0 39px;
  border: 1px solid #b9c5be;
  border-radius: 4px;
  background: #f8faf7;
  color: var(--ink);
  font-size: 10px;
  font-weight: 690;
  box-sizing: border-box;
}
.advice-search-box > input:focus {
  border-color: #4b7a6d;
  box-shadow: 0 0 0 3px rgba(41,107,91,.11);
  outline: 0;
}
.advice-search-results { top: calc(100% + 5px); }

.comparison-workspace .comparison-scroll {
  border-radius: 6px;
}
.comparison-camera-heading {
  position: relative;
  overflow: visible;
  text-transform: none !important;
}
.comparison-camera-heading > label {
  display: block;
  margin-bottom: 6px;
  color: #a9c0b7;
  font-size: 7px;
  font-weight: 820;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.comparison-header-search { position: relative; }
.comparison-header-search > input {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 4px;
  background: rgba(255,255,255,.075);
  color: #fff;
  font-family: Georgia,"Times New Roman",serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.15;
  box-sizing: border-box;
}
.comparison-header-search > input::placeholder { color: #c1d0ca; }
.comparison-header-search > input:hover { background: rgba(255,255,255,.12); }
.comparison-header-search > input:focus {
  border-color: #fff;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.16);
  color: #173e34;
  outline: 0;
}
.comparison-header-search > span {
  display: block;
  margin-top: 5px;
  color: #adc0b8;
  font-size: 7px;
  font-weight: 570;
  letter-spacing: 0;
  text-transform: none;
}
.comparison-header-search .comparison-search-results {
  width: max(100%,260px);
  top: calc(100% + 7px);
  color: var(--ink);
  font-family: Arial,sans-serif;
  letter-spacing: 0;
  text-transform: none;
}

.choice-button .term-help { pointer-events: auto; }
.choice-button .term-help:hover > .term-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: .08s,.08s,.08s;
}

@media (min-width: 831px) {
  .comparison-workspace .comparison-scroll { overflow: visible; }
}

@media (max-width: 980px) {
  .best-match-hero { grid-template-columns: 1fr; }
  .best-match-summary { border-radius: 0 0 7px 7px; }
  .split-heading { align-items: start; }
  .advice-switcher { width: 100%; }
}

@media (max-width: 760px) {
  .weight-context { align-items: flex-start; flex-direction: column; gap: 4px; }
  .best-match-title h3 { font-size: clamp(30px,9vw,42px); }
  .best-match-title .camera-mark.is-large { transform: scale(.74); margin-right: 0; }
  .best-match-reasons ul { grid-template-columns: 1fr; }
  .comparison-header-search .comparison-search-results { width: 250px; }
}

/* CAMERASTART v10.3: focused questionnaire ending and warmer compact result */
.calculate-bar {
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 26px 30px 30px;
}
.calculate-copy { max-width: 760px; }
.calculate-bar > button {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 66px;
  justify-content: center;
  border-color: #d45f47;
  background: linear-gradient(135deg,#ca5a44,#a94435);
  box-shadow: 0 12px 28px rgba(4,21,17,.22);
}
.calculate-bar > button:hover {
  background: linear-gradient(135deg,#d86850,#97392d);
}
.calculate-bar > button > b {
  position: absolute;
  right: 22px;
}

.best-match-hero {
  border-color: #b8ae9f;
  border-top-color: #34463f;
  background: linear-gradient(135deg,#f8f3e9 0%,#eee5d8 100%);
  grid-template-columns: minmax(0,1.44fr) minmax(245px,.56fr);
  box-shadow: 0 18px 46px rgba(55,46,37,.11);
}
.best-match-main {
  padding: clamp(19px,2vw,27px);
}
.best-match-label { margin-bottom: 12px; }
.best-match-label span {
  width: 26px;
  height: 26px;
  border-color: #34463f;
  background: #34463f;
  font-size: 11px;
}
.best-match-label b { color: #8e4d3c; }
.best-match-title { gap: 9px; }
.best-match-title .camera-mark.is-large {
  transform: scale(.62);
  margin-right: -12px;
}
.best-match-title p { color: #66736d; }
.best-match-title h3 {
  color: #25342e;
  font-size: clamp(26px,2.9vw,36px);
}
.best-match-intro {
  margin-top: 10px;
  color: #5d6862;
  font-size: 9px;
}
.best-match-reasons {
  margin-top: 11px;
  padding-top: 10px;
  border-top-color: #cec3b4;
}
.best-match-reasons > p { color: #8e4d3c; }
.best-match-reasons ul { gap: 6px; }
.best-match-reasons li {
  padding: 7px 8px;
  border-color: #d6ccbd;
  background: rgba(255,252,246,.86);
  color: #35413c;
  font-size: 7.5px;
}
.best-match-reasons li::before { color: #a85844; }
.best-match-actions { margin-top: 11px; }
.best-match-actions .amazon-cta .buy-button {
  min-height: 42px;
  border-color: #a64938;
  background: linear-gradient(135deg,#bd5b46,#9f4132);
  box-shadow: 0 8px 19px rgba(117,52,39,.17);
}
.best-match-actions > button,
.best-match-actions > a { min-height: 38px; }
.best-match-summary {
  padding: 19px;
  background: linear-gradient(155deg,#354941,#22332d);
}
.hero-match-score { padding-bottom: 11px; }
.hero-match-score strong { font-size: clamp(38px,3.8vw,49px); }
.hero-match-score span { color: #d3ded9; }
.best-match-summary dl { margin: 5px 0 9px; }
.best-match-summary dl > div { padding: 6px 0; }
.best-match-summary dt,
.best-match-summary > p { color: #c8d5cf; }

@media (max-width: 980px) {
  .best-match-hero { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .calculate-bar { padding: 23px 18px 25px; }
  .calculate-bar > button { min-height: 60px; }
  .best-match-title h3 { font-size: clamp(28px,8.5vw,39px); }
  .best-match-title .camera-mark.is-large { transform: scale(.68); margin-right: 0; }
  .best-match-reasons li { font-size: 8px; }
}

/* CAMERASTART v10.4: equal recommendation cards and always-visible scores */
.score-details {
  margin-top: 20px;
  padding-top: 17px;
  border-top: 1px solid #c0ccc5;
}
.score-details h4 {
  margin: 0;
  color: #263a33;
  font-size: 9px;
  font-weight: 820;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.score-parts { margin-top: 13px; }
.score-part-label span:last-child {
  color: #173e34;
  font-variant-numeric: tabular-nums;
}

.best-match-card {
  width: min(100%,1080px);
  margin: 0 auto;
  padding: clamp(22px,2.4vw,30px);
  border: 1px solid #a6b9ae;
  border-top: 5px solid #a95542;
  background: linear-gradient(145deg,#f6f0e7 0%,#e8eee9 100%);
  box-shadow: 0 15px 38px rgba(31,54,45,.09);
  box-sizing: border-box;
}
.best-match-card .alternative-rank span {
  border-color: #994b3b;
  background: #994b3b;
}
.best-match-card .alternative-rank b { color: #7d4034; }
.best-match-card .alternative-camera { margin-top: 20px; }
.best-match-card .alternative-camera h3 {
  font-size: clamp(26px,3vw,36px);
}
.best-match-card-intro {
  margin: 15px 0 0;
  color: #58665f;
  font-size: 9px;
  line-height: 1.55;
}
.best-match-card-actions .amazon-cta .buy-button {
  min-height: 50px;
  font-size: 11px;
}

.camera-price-stack {
  min-width: 132px;
  display: grid;
  justify-items: end;
  gap: 3px;
  text-align: right;
}
.camera-price-stack > strong {
  color: #1f3029;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.camera-price-stack > span,
.camera-price-stack > em {
  color: #6a756f;
  font-size: 7px;
  font-style: normal;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.camera-price-stack > a {
  margin-top: 3px;
  color: #984433;
  font-size: 8px;
  font-weight: 820;
  text-underline-offset: 3px;
}
.camera-price-stack > a:hover { color: #6f2c20; }

@media (max-width: 760px) {
  .best-match-card { padding: 20px; }
  .score-parts { grid-template-columns: 1fr; }
  .alternative-camera { grid-template-columns: auto 1fr; }
  .camera-price-stack {
    min-width: 0;
    grid-column: 2;
    justify-items: start;
    text-align: left;
  }
}

/* v11 final cascade adjustments */
.best-match-card { width: min(100%,980px); }
.best-match-card .decision-verdict-grid { margin-top: 17px; }
.best-match-card .kit-summary { margin-top: 14px; }
@media (max-width: 760px) {
  .best-match-card { width: 100%; }
}

/* v11.1 launch readiness: accessibility, legal pages and deferred media */
.skip-link {
  position: fixed;
  z-index: 10000;
  top: 12px;
  left: 12px;
  padding: 12px 16px;
  border-radius: 6px;
  background: #102b23;
  color: #fff;
  font-size: .875rem;
  font-weight: 800;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform .15s ease;
}
.skip-link:focus { transform: translateY(0); }

.faq-page { max-width: 940px; }
.faq-list { margin-top: 46px; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  min-height: 64px;
  padding: 20px 44px 20px 0;
  position: relative;
  display: flex;
  align-items: center;
  color: var(--ink);
  cursor: pointer;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.15rem,2vw,1.4rem);
  font-weight: 600;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  color: var(--accent-dark);
  font-family: Arial,sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
}
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p {
  max-width: 760px;
  margin: -4px 0 24px;
  color: #4f5d57;
  font-size: 1rem;
  line-height: 1.7;
}
.legal-review-note {
  margin: 26px 0 0;
  padding: 18px 20px;
  border-left: 4px solid var(--accent);
  background: #fff8ed;
  color: #4f5a55;
  font-size: .875rem;
  line-height: 1.6;
}
.inline-privacy-action {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--ink);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-size: .875rem;
  font-weight: 800;
}
.inline-privacy-action:hover { background: #edf3f0; }
.privacy-action-status {
  display: inline-block;
  margin-left: 12px;
  color: #245f50;
  font-size: .875rem;
  font-weight: 700;
}

.video-frame--consent {
  border: 1px solid #53635d;
  background: linear-gradient(145deg,#17211e,#29423a);
}
.video-frame--consent button {
  width: 100%;
  height: 100%;
  padding: 28px;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  text-align: center;
}
.video-frame--consent button > span {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--accent);
  display: grid;
  place-items: center;
  font-size: 1.15rem;
}
.video-frame--consent button > b { font-size: 1rem; }
.video-frame--consent button > small { color: #c7d2cd; font-size: .8rem; }
.video-frame--consent button:hover { background: rgba(255,255,255,.06); }

/* Keep essential working text readable without changing the established visual hierarchy. */
.universal-header .site-nav a,
.header-cta,
.universal-footer nav a,
.page-cta a,
.article-index a,
.article-cta b { font-size: .875rem; }
.universal-footer .footer-fineprint,
.contact-note,
.guide-illustration figcaption,
.editorial-callout b,
.feature-matrix li::before,
.feature-matrix li span { font-size: .75rem; }
.choice-button .choice-label,
.budget-range-modes button,
.budget-range-modes button span,
.budget-scope-block > b,
.range-label,
.weight-context,
.selection-rule,
.calculate-copy p,
.calculate-copy span,
.result-stage-heading p,
.eligibility-summary,
.kit-summary > p,
.decision-verdict-grid p,
.alternative-verdict p,
.result-price-note,
.decision-tool p,
.decision-tool label,
.method-body > p,
.method-principles span,
.camera-video-slot p:not(.section-kicker) { font-size: .875rem; }
.data-status,
.kit-summary > span,
.decision-verdict-grid b,
.alternative-rank b,
.alternative-rank em,
.alternative-camera p,
.alternative-specs span,
.alternative-verdict b,
.score-details h4,
.score-part-label,
.result-trust-note span,
.why-not-answer span,
.why-not-answer b,
.why-not-answer ul,
.upgrade-result span,
.share-tool span,
.comparison-search-results button small,
.comparison-search-results button em,
.comparison-search-hint,
.comparison-slot > p { font-size: .75rem; }
.alternative-actions > a,
.alternative-actions > button,
.best-match-card-actions .buy-button,
.details-button,
.manufacturer-button,
.decision-tool button { font-size: .875rem; }
.choice-button,
.budget-range-modes button,
.reset-button,
.alternative-actions > a,
.alternative-actions > button,
.decision-tool button { min-height: 44px; }

.guide-article,
.deep-dive,
.decision-tools,
.comparison-section,
.runners-section,
.method-note {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
img,
svg,
video { max-width: 100%; }
button,
a { touch-action: manipulation; }

/* Keep range shortcuts comfortably tappable without changing the scale layout. */
.scroll-questionnaire .budget-ticks button,
.scroll-questionnaire .weight-ticks button {
  width: 44px;
  height: 44px;
  left: clamp(0px, calc(var(--tick-left) - 22px), calc(100% - 44px));
}
.scroll-questionnaire .budget-ticks button::before,
.scroll-questionnaire .weight-ticks button::before,
.scroll-questionnaire .budget-ticks button span,
.scroll-questionnaire .weight-ticks button span { left: 50%; }
.scroll-questionnaire .budget-ticks,
.scroll-questionnaire .weight-ticks { min-height: 44px; }

@media (max-width: 760px) {
  .universal-header {
    height: auto;
    min-height: 64px;
    padding: 12px 15px 0;
    flex-wrap: wrap;
  }
  .universal-header .site-nav {
    order: 3;
    width: 100%;
    margin: 0;
    padding: 0 0 9px;
    border-top: 1px solid var(--line);
    display: flex;
    gap: 22px;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .universal-header .site-nav a {
    min-height: 44px;
    padding: 14px 0 10px;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
  }
  .faq-list summary { min-height: 58px; padding-right: 38px; }
  .privacy-action-status { display: block; margin: 10px 0 0; }
}

/* CAMERASTART v12: Sky Bento visual system */
:root {
  --paper: #eef5f3;
  --panel: #ffffff;
  --ink: #20292b;
  --muted: #667476;
  --line: #cfded9;
  --accent: #8edbc3;
  --accent-dark: #246b59;
  --green: #246b59;
  --green-soft: #def3ec;
  --sky: #dfeff2;
  --sky-strong: #b9dfe5;
  --graphite: #20292b;
  --graphite-soft: #334043;
  --shadow: 0 18px 48px rgba(37, 67, 63, 0.09);
}

html { background: var(--paper); }

body {
  background:
    radial-gradient(circle at 6% 5%, rgba(142, 219, 195, 0.28), transparent 27rem),
    radial-gradient(circle at 95% 18%, rgba(185, 223, 229, 0.34), transparent 30rem),
    linear-gradient(180deg, #f7faf9 0, var(--paper) 34rem);
  color: var(--graphite);
}

button:focus-visible,
input:focus-visible,
summary:focus-visible,
a:focus-visible {
  outline-color: rgba(36, 107, 89, 0.38);
}

.universal-header {
  width: min(1440px, calc(100% - 32px));
  min-height: 68px;
  margin: 16px auto 0;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 17px;
  background: rgba(32, 41, 43, 0.97);
  box-shadow: 0 14px 38px rgba(32, 41, 43, 0.15);
  color: #f8fcfb;
  backdrop-filter: blur(16px);
}

.universal-header .brand,
.universal-header .site-nav a { color: #f8fcfb; }

.universal-header .brand-mark,
.universal-header .brand-mark::before,
.universal-header .brand-mark span { border-color: #9be2cc; }

.universal-header .site-nav a:hover,
.universal-header .site-nav a[aria-current="page"] { color: #a9e6d3; }

.universal-header .header-cta {
  border: 1px solid #a9e6d3;
  border-radius: 999px;
  background: #a9e6d3;
  color: #172523;
  box-shadow: none;
}

.universal-header .header-cta:hover {
  background: #c0efdf;
  color: #172523;
}

.intro {
  width: min(1180px, calc(100% - 40px));
  padding: 68px 0 54px;
}

.intro::after { display: none; }

.intro h1 {
  max-width: 900px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(42px, 5.3vw, 68px);
  font-weight: 790;
  letter-spacing: -0.06em;
  line-height: 0.98;
}

.route-intro {
  margin-top: 22px;
  padding: clamp(32px, 5vw, 56px);
  border: 1px solid rgba(36, 107, 89, 0.16);
  border-radius: 26px;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0.94), rgba(223, 239, 242, 0.82)),
    var(--panel);
  box-shadow: var(--shadow);
}

.route-intro h1 { font-size: clamp(40px, 5vw, 62px); }

.route-back {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--graphite);
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
}

.route-back:hover { border-color: var(--green); }

.eyebrow,
.section-kicker {
  color: var(--accent-dark);
  font-size: 12px;
  letter-spacing: 0.11em;
}

.intro-copy {
  max-width: 720px;
  color: var(--muted);
  font-size: clamp(17px, 1.7vw, 20px);
}

.route-assurance {
  gap: 8px;
  margin-top: 25px;
}

.route-assurance span {
  min-height: 38px;
  padding: 9px 13px;
  border-color: rgba(36, 107, 89, 0.17);
  border-radius: 999px;
  background: rgba(222, 243, 236, 0.72);
  color: #265c50;
  font-size: 13px;
}

/* Landing page: compact hero followed by two clear route cards. */
.landing-intro { padding-bottom: 44px; }

.mode-picker {
  max-width: none;
  margin-top: 34px;
  gap: 16px;
}

.mode-picker > a {
  min-height: 178px;
  padding: 26px;
  border-color: rgba(32, 41, 43, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow);
}

.mode-picker > a::before { height: 6px; background: var(--accent); }
.mode-picker > a:last-child::before { background: var(--sky-strong); }

.mode-picker > a:first-child {
  border-color: var(--graphite);
  background: var(--graphite);
  color: #ffffff;
}

.mode-picker > a:first-child small { color: #9be2cc; }
.mode-picker > a:last-child small { color: var(--accent-dark); }
.mode-picker b { font-family: inherit; font-weight: 780; letter-spacing: -0.035em; }

.trust-strip article,
.home-guide-teaser {
  border-color: rgba(32, 41, 43, 0.11);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 34px rgba(37, 67, 63, 0.06);
}

/* Questionnaire: a genuine bento grid, without changing any answers or logic. */
.scroll-questionnaire {
  width: min(1240px, calc(100% - 40px));
  margin-top: 22px;
}

.scroll-finder-header {
  margin-bottom: 16px;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(32, 41, 43, 0.11);
  border-radius: 22px;
  background: linear-gradient(110deg, #ffffff, #edf7f4);
  box-shadow: var(--shadow);
}

.scroll-finder-header h2 {
  font-family: inherit;
  font-size: clamp(29px, 3.2vw, 42px);
  font-weight: 790;
  letter-spacing: -0.045em;
}

.scroll-finder-header > div > p:last-child {
  max-width: 760px;
  color: var(--muted);
  font-size: 16px;
}

.reset-button {
  border-radius: 999px;
  border-color: var(--line);
  background: #ffffff;
  color: var(--graphite);
}

.scroll-questionnaire-panel {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body[data-route="guided"] .scroll-questionnaire-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.scroll-question {
  margin: 0;
  padding: clamp(22px, 2.7vw, 30px);
  border: 1px solid rgba(32, 41, 43, 0.11);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 13px 34px rgba(37, 67, 63, 0.06);
}

.scroll-question::before,
.scroll-question:nth-child(even)::before { display: none; }

body[data-route="guided"] #question-1,
body[data-route="guided"] #question-3,
body[data-route="guided"] #question-8,
body[data-route="guided"] #question-12,
body[data-route="guided"] .calculate-bar { grid-column: 1 / -1; }

.question-heading { align-items: flex-start; }

.question-heading > span {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border: 0;
  border-radius: 11px;
  background: var(--graphite);
  color: #ffffff;
  font-size: 12px;
}

.question-heading h3 {
  font-family: inherit;
  font-size: clamp(22px, 2.25vw, 30px);
  font-weight: 770;
  letter-spacing: -0.035em;
}

.question-heading p,
.question-note,
.question-support { color: var(--muted); font-size: 14px; }

body[data-route="guided"] .scroll-question:not(#question-1):not(#question-3):not(#question-8):not(#question-12) .choice-grid,
body[data-route="guided"] .scroll-question:not(#question-1):not(#question-3):not(#question-8):not(#question-12) .priority-grid {
  grid-template-columns: 1fr;
}

.use-group,
.choice-button,
.budget-range-card,
.weight-range-card,
.advanced-question {
  border-color: rgba(32, 41, 43, 0.12);
  border-radius: 15px;
  background: #f8fbfa;
}

.choice-button {
  min-height: 58px;
  color: var(--graphite);
  font-size: 14px;
}

.choice-button:hover {
  border-color: #76bda8;
  background: #edf8f4;
  transform: translateY(-1px);
}

.choice-button.is-selected,
.questionnaire .choice-button.is-selected,
.budget-range-modes button.is-selected {
  border-color: var(--green) !important;
  background: var(--green-soft) !important;
  color: #173e34 !important;
  box-shadow: inset 0 0 0 1px rgba(36, 107, 89, 0.15) !important;
}

.questionnaire .choice-button.is-selected::before {
  background: var(--green) !important;
  color: #ffffff !important;
}

.scroll-questionnaire .choice-button.is-selected .choice-label,
.scroll-questionnaire .choice-button[aria-pressed="true"] .choice-label {
  color: #173e34 !important;
}

.scroll-questionnaire .choice-button.is-selected .choice-hint,
.scroll-questionnaire .choice-button[aria-pressed="true"] .choice-hint {
  color: #4a6961 !important;
}

.use-group h4,
.range-value,
.weight-value { color: var(--accent-dark); }

input[type="range"] { accent-color: var(--green); }

.calculate-bar {
  width: 100%;
  margin-top: 0;
  padding: clamp(22px, 3vw, 30px);
  border: 0;
  border-radius: 20px;
  background: linear-gradient(120deg, var(--graphite), var(--graphite-soft));
  color: #ffffff;
  box-shadow: 0 16px 38px rgba(32, 41, 43, 0.18);
}

.calculate-copy span { color: #9be2cc; }
.calculate-copy b { color: #ffffff; }
.calculate-copy p { color: #cbd6d4; }

.calculate-bar > button {
  border: 1px solid #a9e6d3;
  border-radius: 14px;
  background: #a9e6d3;
  color: #172523;
  box-shadow: none;
}

.calculate-bar > button:hover { background: #c2efdf; }

/* Results: one consistent card family with a prominent, fully visible score. */
.results-shell {
  width: min(1240px, calc(100% - 40px));
}

.results-hero,
.result-stage,
.result-trust-note,
.alternative-summary,
.deep-dive,
.decision-tools,
.comparison-section,
.runners-section,
.method-note {
  border-color: rgba(32, 41, 43, 0.12);
  border-radius: 20px;
  box-shadow: 0 14px 38px rgba(37, 67, 63, 0.07);
}

.results-hero,
.result-stage { background: rgba(255, 255, 255, 0.86); }

.result-stage-heading h2,
.results-hero h2,
.alternative-heading h3,
.split-heading h2,
.section-intro h2,
.deep-dive h2,
.decision-tools h2,
.comparison-section h2,
.runners-section h2 {
  font-family: inherit;
  font-weight: 790;
  letter-spacing: -0.04em;
}

.alternative-heading h3 { font-size: clamp(29px, 3.2vw, 42px); }

.decision-tool h3,
.advice-detail-grid h3,
.attributes-card h3,
.camera-video-slot h3,
.method-note > summary b,
.home-guide-teaser h2 {
  font-family: inherit;
  font-weight: 760;
  letter-spacing: -0.03em;
}

.best-match-card,
.alternative-summary,
.best-match-card.alternative-summary {
  width: 100%;
  padding: clamp(21px, 2.4vw, 28px);
  border: 1px solid rgba(32, 41, 43, 0.13);
  border-top: 0;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 15px 42px rgba(37, 67, 63, 0.08);
  overflow: hidden;
  position: relative;
}

.best-match-card::before,
.alternative-summary::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: var(--accent);
}

.alternative-grid .alternative-summary::before { background: var(--sky-strong); }

.alternative-rank span,
.best-match-card .alternative-rank span {
  border-color: var(--graphite);
  border-radius: 10px;
  background: var(--graphite);
  color: #ffffff;
}

.alternative-rank b,
.best-match-card .alternative-rank b { color: var(--accent-dark); }

.alternative-rank em {
  border-radius: 999px;
  background: var(--green-soft);
  color: #205b4c;
}

.alternative-camera h3,
.best-match-card .alternative-camera h3 {
  font-family: inherit;
  font-size: clamp(25px, 2.75vw, 34px);
  font-weight: 790;
  letter-spacing: -0.045em;
}

.alternative-grid .alternative-camera h3 { font-size: clamp(22px, 2.2vw, 29px); }

.camera-mark {
  border-color: rgba(36, 107, 89, 0.3);
  background: var(--green-soft);
}

.alternative-specs span {
  border-color: rgba(32, 41, 43, 0.1);
  border-radius: 999px;
  background: #f2f7f6;
  color: #3b4a4c;
  font-size: 13px;
}

.kit-summary,
.decision-verdict-grid > p,
.data-status-badge {
  border-color: rgba(32, 41, 43, 0.11);
  border-radius: 14px;
  background: #f6faf9;
}

.decision-verdict-grid > p:first-child { background: #eaf7f2; }
.decision-verdict-grid > p:last-child { background: #edf4f6; }

.score-details {
  margin-top: 20px;
  padding: 18px;
  border: 1px solid rgba(36, 107, 89, 0.18);
  border-radius: 15px;
  background: linear-gradient(120deg, #eef9f5, #eef6f7);
}

.score-details h4 {
  color: #204f44;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

.score-parts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px 20px;
  margin-top: 16px;
}

.score-part-label {
  gap: 8px;
  color: #3a4b4c;
  font-size: 13px;
}

.score-part-label span:last-child {
  color: #173e34;
  font-size: 14px;
  font-weight: 850;
}

.score-track {
  height: 7px;
  border-radius: 999px;
  background: #cfded9;
  overflow: hidden;
}

.score-track span {
  border-radius: inherit;
  background: linear-gradient(90deg, #27715e, #7fcfb6);
}

.alternative-grid {
  gap: 16px;
}

.alternative-grid .score-parts { grid-template-columns: 1fr; }

.alternative-actions > a,
.alternative-actions > button,
.best-match-card-actions .buy-button,
.details-button,
.manufacturer-button,
.decision-tool button {
  min-height: 48px;
  border-radius: 12px;
  font-size: 14px;
}

.amazon-cta .buy-button,
.best-match-card-actions .amazon-cta .buy-button {
  border-color: var(--green);
  background: var(--green);
  color: #ffffff;
  box-shadow: 0 9px 20px rgba(36, 107, 89, 0.18);
}

.amazon-cta .buy-button:hover,
.best-match-card-actions .amazon-cta .buy-button:hover {
  border-color: #174f42;
  background: #174f42;
}

.manufacturer-button,
.alternative-actions > button {
  border-color: var(--line);
  background: #ffffff;
  color: var(--graphite);
}

.camera-price-stack > a { color: var(--accent-dark); }

.advice-nav {
  border-color: rgba(32, 41, 43, 0.1);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.86);
}

.advice-nav button.is-active,
.advice-nav button:hover {
  background: var(--green-soft);
  color: #194b40;
}

.deep-dive,
.decision-tools,
.comparison-section,
.runners-section,
.method-note {
  background: rgba(255, 255, 255, 0.9);
}

.deep-dive-head,
.decision-tools-head,
.comparison-head,
.runners-head {
  border-bottom-color: var(--line);
  background: linear-gradient(110deg, #ffffff, #edf7f4);
}

.hero-camera-card {
  border-radius: 18px;
  background: linear-gradient(135deg, var(--graphite), #36504c);
}

.attributes-card,
.detail-card,
.comparison-slot,
.runner-card,
.decision-tool {
  border-color: rgba(32, 41, 43, 0.11);
  border-radius: 16px;
  background: #f7faf9;
}

.attributes-card { background: var(--green-soft); }

.site-footer {
  border-top-color: rgba(32, 41, 43, 0.12);
  background: rgba(234, 243, 240, 0.78);
}

@media (max-width: 980px) {
  body[data-route="guided"] .scroll-questionnaire-panel { grid-template-columns: 1fr; }
  body[data-route="guided"] .scroll-question,
  body[data-route="guided"] .calculate-bar { grid-column: 1; }
  .mode-picker { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .universal-header {
    width: calc(100% - 20px);
    margin-top: 10px;
    padding: 10px 13px 0;
    border-radius: 15px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 10px;
  }

  .universal-header .brand { font-size: 16px; }

  .universal-header .header-cta {
    min-height: 42px;
    padding: 0 12px;
    font-size: 13px;
    white-space: nowrap;
  }

  .universal-header .site-nav {
    grid-column: 1 / -1;
    border-top-color: rgba(255, 255, 255, 0.15);
  }

  .intro,
  .scroll-questionnaire,
  .results-shell { width: min(100% - 24px, 1240px); }

  .route-intro {
    margin-top: 12px;
    padding: 26px 21px;
    border-radius: 20px;
  }

  .route-intro h1 { font-size: clamp(36px, 12vw, 52px); }
  .route-assurance { display: grid; grid-template-columns: 1fr; }

  .scroll-finder-header {
    padding: 22px 19px;
    border-radius: 18px;
    align-items: flex-start;
  }

  .scroll-question {
    padding: 21px 18px;
    border-radius: 17px;
  }

  .use-groups,
  .camera-form-grid,
  .choice-grid,
  .priority-grid { grid-template-columns: 1fr; }

  .calculate-bar {
    padding: 22px 18px;
    border-radius: 17px;
  }

  .calculate-bar > button { width: 100%; }

  .best-match-card,
  .alternative-summary,
  .best-match-card.alternative-summary { padding: 21px 18px; }

  .score-parts,
  .alternative-grid .score-parts { grid-template-columns: 1fr; }

  .alternative-camera h3,
  .best-match-card .alternative-camera h3 { font-size: clamp(25px, 8vw, 32px); }

  .alternative-actions,
  .best-match-card-actions { grid-template-columns: 1fr; }

  .alternative-actions > a,
  .alternative-actions > button,
  .best-match-card-actions > * { width: 100%; }
}

/* CAMERASTART v12.1: warmer Sky Bento and final cascade repairs */
:root {
  --paper: #f3efe7;
  --panel: #fffdf9;
  --ink: #292e2f;
  --muted: #6c716f;
  --line: #d9d2c6;
  --accent: #91d6c0;
  --accent-dark: #286b5a;
  --green: #286b5a;
  --green-soft: #e0f2eb;
  --sky: #dcebee;
  --sky-strong: #b9dce2;
  --warm: #efe1d3;
  --warm-soft: #faf4ec;
  --warm-accent: #b96650;
  --graphite: #292e2f;
  --graphite-soft: #3d4545;
  --shadow: 0 16px 42px rgba(55, 52, 46, 0.09);
}

html { background: var(--paper); }

body {
  background:
    radial-gradient(circle at 4% 5%, rgba(145, 214, 192, 0.22), transparent 29rem),
    radial-gradient(circle at 93% 14%, rgba(239, 225, 211, 0.72), transparent 34rem),
    linear-gradient(180deg, #fbf8f2 0, var(--paper) 38rem);
}

.universal-header {
  background: rgba(42, 47, 47, 0.97);
  box-shadow: 0 13px 34px rgba(48, 45, 40, 0.15);
}

.route-intro {
  border-color: rgba(111, 99, 83, 0.16);
  background:
    radial-gradient(circle at 90% 18%, rgba(145, 214, 192, 0.22), transparent 19rem),
    linear-gradient(112deg, #fffdf9 0%, #f7eee4 56%, #e9f2f2 100%);
}

.route-assurance span {
  border-color: rgba(62, 101, 91, 0.18);
  background: rgba(255, 253, 249, 0.78);
}

.scroll-finder-header {
  border-color: rgba(111, 99, 83, 0.16);
  background: linear-gradient(115deg, #fffdf9, #f5ecdf 58%, #e7f2ef);
}

.scroll-question {
  border-color: rgba(111, 99, 83, 0.16);
  background: rgba(255, 253, 249, 0.96);
  box-shadow: 0 13px 32px rgba(55, 52, 46, 0.065);
}

.use-group,
.use-category,
.choice-button,
.budget-range-card,
.weight-range-card,
.advanced-question,
.scroll-questionnaire .choice-button,
.scroll-questionnaire .budget-range-modes button,
.scroll-questionnaire .range-control {
  border-color: #d7d0c4;
  background: #f7f1e9;
}

.use-category:nth-child(2) { background: #eef5f3; }
.use-category:nth-child(3) { background: #edf3f4; }

.choice-button:hover,
.scroll-questionnaire .choice-button:hover {
  border-color: #7eb8a7;
  background: #edf6f1;
}

.scroll-questionnaire .choice-button.is-selected,
.scroll-questionnaire .choice-button[aria-pressed="true"],
.scroll-questionnaire .budget-range-modes button.is-selected {
  border-color: #286b5a !important;
  background: #dff2ea !important;
  box-shadow: inset 4px 0 0 #286b5a !important;
}

/* Remove all inherited negative margins from the full-width final action. */
.scroll-questionnaire-panel > .calculate-bar,
body[data-route="guided"] .scroll-questionnaire-panel > .calculate-bar,
body[data-route="expert"] .scroll-questionnaire-panel > .calculate-bar {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: clamp(22px, 3vw, 30px) !important;
  grid-column: 1 / -1 !important;
  justify-self: stretch;
  box-sizing: border-box;
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 20%, rgba(145, 214, 192, 0.2), transparent 17rem),
    linear-gradient(120deg, #2d3333, #3d4545);
}

.scroll-questionnaire-panel > .calculate-bar > button {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  justify-self: stretch;
  justify-content: center;
  border: 1px solid #bce8da;
  border-radius: 14px;
  background: #a9dfce;
  color: #1d3330;
  box-shadow: 0 9px 23px rgba(20, 46, 41, 0.18);
}

.scroll-questionnaire-panel > .calculate-bar > button:hover {
  border-color: #cdf0e4;
  background: #c2eadc;
  color: #162724;
}

.scroll-questionnaire-panel > .calculate-bar > button > span { color: inherit; }

/* One shared, comfortable page gutter for every result section. */
.advice-nav,
.result-stage,
.deep-dive,
.decision-tools,
.comparison-section,
.runners-section,
.method-note {
  width: min(1200px, calc(100% - 48px));
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
}

.advice-nav {
  padding: 9px 12px;
  border-color: rgba(111, 99, 83, 0.15);
  background: rgba(255, 253, 249, 0.95);
}

.result-stage {
  padding: clamp(28px, 4vw, 46px);
  border: 1px solid rgba(111, 99, 83, 0.15);
  background:
    radial-gradient(circle at 95% 4%, rgba(220, 235, 238, 0.65), transparent 24rem),
    #fbf8f2;
}

.result-stage-heading {
  margin-bottom: 24px;
  padding-bottom: 22px;
  border-bottom-color: #dcd4c8;
}

.price-context-note,
.result-eligibility-note {
  border-color: #ddd2c4;
  border-radius: 13px;
  background: #f7eee3;
}

.best-match-card,
.alternative-summary,
.best-match-card.alternative-summary {
  border-color: #d8d0c4;
  background: #fffdf9;
  box-shadow: 0 15px 38px rgba(55, 52, 46, 0.075);
}

.best-match-card::before { background: linear-gradient(90deg, #78cbb1, #d7b6a1); }
.alternative-grid .alternative-summary::before { background: linear-gradient(90deg, #b6dce2, #d9c8b8); }

.alternative-specs span {
  border-color: #e5ded4;
  background: #f6f1ea;
}

.data-status,
.data-status-badge { background: #ede8e0; }

.kit-summary,
.decision-verdict-grid > p {
  border-color: #e0d8cc;
  background: #faf5ee;
}

.decision-verdict-grid > p:first-child { background: #eaf5ef; }
.decision-verdict-grid > p:last-child { background: #eef3f4; }

.score-details {
  border-color: #c8d8d2;
  background: linear-gradient(120deg, #f7f2ea, #edf6f3 58%, #eef4f5);
}

/* The exact selectors below beat the older orange CTA rules. */
.alternative-actions .amazon-cta .buy-button,
.best-match-card-actions .amazon-cta .buy-button,
.hero-camera-card .amazon-cta .buy-button,
.amazon-cta--advice .buy-button,
.amazon-cta--alternative .buy-button {
  width: 100%;
  min-height: 50px;
  border: 1px solid #286b5a;
  border-radius: 12px;
  background: #286b5a;
  color: #ffffff;
  box-shadow: 0 9px 22px rgba(40, 107, 90, 0.19);
}

.alternative-actions .amazon-cta .buy-button:hover,
.best-match-card-actions .amazon-cta .buy-button:hover,
.hero-camera-card .amazon-cta .buy-button:hover,
.amazon-cta--advice .buy-button:hover,
.amazon-cta--alternative .buy-button:hover {
  border-color: #1f594b;
  background: #1f594b;
  box-shadow: 0 11px 25px rgba(31, 89, 75, 0.23);
}

.alternative-actions,
.best-match-card-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.alternative-actions .amazon-cta,
.best-match-card-actions .amazon-cta {
  width: 100%;
  grid-column: 1 / -1;
}

.alternative-actions > button,
.best-match-card-actions > button {
  border: 1px solid var(--graphite);
  border-radius: 12px;
  background: var(--graphite);
  color: #ffffff;
  box-shadow: 0 7px 17px rgba(41, 46, 47, 0.12);
}

.alternative-actions > button:hover,
.best-match-card-actions > button:hover {
  background: #444b4b;
  color: #ffffff;
}

.alternative-actions > a:not(.buy-button),
.best-match-card-actions > a:not(.buy-button) {
  border: 1px solid #d2c1af;
  border-radius: 12px;
  background: #efe1d3;
  color: #443d37;
  box-shadow: 0 7px 17px rgba(89, 69, 52, 0.08);
}

.alternative-actions > a:not(.buy-button):hover,
.best-match-card-actions > a:not(.buy-button):hover {
  border-color: #b99f87;
  background: #e8d4c1;
}

.deep-dive,
.decision-tools,
.comparison-section {
  margin-top: 24px;
  padding: clamp(28px, 4vw, 44px);
  overflow: hidden;
  border: 1px solid rgba(111, 99, 83, 0.15);
  background: #fffdf9;
}

.deep-dive .section-intro,
.decision-tools .section-intro,
.comparison-section .section-intro {
  margin-bottom: 26px;
  padding-bottom: 24px;
  border-bottom: 1px solid #ded7cc;
  background: transparent;
}

.deep-dive-grid { gap: 16px; }

.hero-camera-card,
.attributes-card,
.advice-detail-grid article,
.camera-video-slot,
.decision-tool,
.comparison-slot {
  border-radius: 17px;
  box-shadow: none;
}

.hero-camera-card {
  border-color: #394b47;
  background: linear-gradient(145deg, #303938, #48615b);
}

.attributes-card {
  border-color: #d7c9ba;
  background: linear-gradient(145deg, #f6eadf, #edf4f1);
}

.advice-detail-grid {
  gap: 14px;
}

.advice-detail-grid article {
  min-height: 0;
  border-color: #ddd4c7;
  background: #faf4ec;
}

.advice-detail-grid article:nth-child(2) { background: #edf5f4; }
.advice-detail-grid article:nth-child(3) { background: #eef3f4; }

.advice-detail-grid article > p:not(.section-kicker),
.decision-tool > p:not(.section-kicker),
.upgrade-result p,
.why-not-empty p,
.camera-video-slot p:not(.section-kicker) {
  font-size: 14px;
  line-height: 1.6;
}

.advice-detail-grid article > span,
.alternative-verdict p,
.decision-verdict-grid > p,
.kit-summary p { font-size: 13px; }

.camera-video-slot {
  border-color: #d8cbbb;
  background: #f7efe5;
}

.decision-tool-grid { gap: 14px; }

.decision-tool {
  border-color: #dcd3c6;
  background: #faf5ee;
}

.decision-tool:nth-child(2) { background: #edf5f3; }
.decision-tool:nth-child(3) { background: #eef3f5; }

.decision-tool button {
  border-color: var(--graphite);
  background: var(--graphite);
  color: #ffffff;
}

.comparison-workspace {
  border-radius: 16px;
  box-shadow: 0 13px 32px rgba(55, 52, 46, 0.07);
}

.comparison-workspace .comparison-picker {
  border-color: #d8cfc2;
  border-radius: 16px 16px 0 0;
  background: #f6eee4;
}

.comparison-workspace .comparison-search-box { border-radius: 10px; }

.comparison-workspace .comparison-scroll {
  max-width: 100%;
  overflow-x: auto !important;
  border-color: #d8cfc2;
  border-radius: 0 0 16px 16px;
}

.comparison-workspace .comparison-table thead th { background: #303938; }

.method-note {
  margin-top: 24px;
  overflow: hidden;
  border-color: #d8cfc2;
  border-radius: 18px;
  background: #fffdf9;
}

.method-note > summary { background: linear-gradient(110deg, #f8f1e8, #edf5f2); }

@media (max-width: 980px) {
  .result-stage,
  .deep-dive,
  .decision-tools,
  .comparison-section { padding: 28px 22px; }

  .alternative-heading { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 760px) {
  .advice-nav,
  .result-stage,
  .deep-dive,
  .decision-tools,
  .comparison-section,
  .runners-section,
  .method-note {
    width: calc(100% - 24px);
  }

  .result-stage,
  .deep-dive,
  .decision-tools,
  .comparison-section { padding: 22px 17px; }

  .alternative-actions,
  .best-match-card-actions { grid-template-columns: 1fr; }

  .alternative-actions .amazon-cta,
  .best-match-card-actions .amazon-cta { grid-column: 1; }
}

/* Third route: alternatives and the complete research guide. */
.landing-intro .mode-picker { grid-template-columns: repeat(3,minmax(0,1fr)); }
.landing-intro .mode-picker > a { min-height: 275px; }
.landing-intro .mode-picker > a:nth-child(3) {
  background: linear-gradient(145deg,#e9f1ee,#f8f2e9);
  border: 1px solid #becdc7;
  color: #243a36;
}
.landing-intro .mode-picker > a:nth-child(3)::before { background: #84ab9f; }
.landing-intro .mode-picker > a:nth-child(3) small,
.landing-intro .mode-picker > a:nth-child(3) em { color: #345e56; }
.alternative-finder { width: min(1160px,calc(100% - 56px)); margin: 0 auto 90px; }
.alternative-finder-heading { margin-bottom: 26px; }
.alternative-finder-heading h2,
.alternative-catalogue h2,
.alternative-results h2 { margin: 6px 0 10px; font-size: clamp(27px,3vw,39px); letter-spacing: -.035em; }
.alternative-finder-heading p:last-child,
.alternative-catalogue-heading p,
.alternative-results-heading p { max-width: 720px; color: var(--muted); line-height: 1.65; }
.alternative-form { overflow: hidden; border: 1px solid #d5d9d2; border-radius: 19px; background: #fffdf9; box-shadow: 0 16px 42px rgba(31,43,38,.06); }
.alternative-step { padding: clamp(25px,3.4vw,42px); border-bottom: 1px solid #dedfd8; }
.alternative-step-heading { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 25px; }
.alternative-step-heading > span { flex: 0 0 auto; display: grid; place-items: center; width: 39px; height: 39px; border-radius: 12px; background: #dcece6; color: #27584d; font-size: 12px; font-weight: 800; }
.alternative-step-heading h3 { margin: 0 0 6px; font-size: clamp(21px,2.4vw,29px); letter-spacing: -.025em; }
.alternative-step-heading p { margin: 0; color: var(--muted); line-height: 1.55; }
.alternative-search-label { display: block; margin-bottom: 9px; font-weight: 750; }
.alternative-source-search { position: relative; max-width: 740px; }
.alternative-source-search input,
.alternative-catalogue-heading input,
.alternative-control select { width: 100%; min-height: 51px; border: 1px solid #abbcb4; border-radius: 11px; padding: 12px 15px; background: white; color: var(--ink); }
.alternative-source-search input:focus,
.alternative-catalogue-heading input:focus,
.alternative-control select:focus { outline: 3px solid #b2d4c8; outline-offset: 2px; }
.alternative-suggestions { position: absolute; z-index: 12; top: calc(100% + 6px); left: 0; right: 0; max-height: 310px; overflow-y: auto; border: 1px solid #b4c8bf; border-radius: 12px; background: #fff; box-shadow: 0 16px 34px rgba(21,46,39,.15); }
.alternative-suggestions button { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px; border: 0; border-bottom: 1px solid #edf0ed; padding: 12px 15px; background: white; text-align: left; cursor: pointer; }
.alternative-suggestions button:hover { background: #eaf4ef; }
.alternative-suggestions small { color: #64766f; }
.alternative-suggestions p { margin: 0; padding: 14px; color: var(--muted); }
.alternative-source-empty,
.alternative-source-card { margin-top: 20px; padding: 22px; border: 1px solid #d9e2db; border-radius: 14px; background: #f2f7f3; }
.alternative-source-empty p { margin: 6px 0 0; color: var(--muted); }
.alternative-source-card { display: flex; justify-content: space-between; gap: 25px; align-items: flex-start; }
.alternative-source-kicker { color: #3d7465; font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.alternative-source-card h3 { margin: 7px 0; font-size: clamp(20px,2.3vw,29px); }
.alternative-source-card p { margin: 0; color: var(--muted); }
.alternative-source-card dl { display: grid; gap: 8px; margin: 0; min-width: 235px; }
.alternative-source-card dl div { display: flex; justify-content: space-between; gap: 16px; }
.alternative-source-card dt { color: var(--muted); }
.alternative-source-card dd { margin: 0; font-weight: 700; text-align: right; }
.alternative-control-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.alternative-control { min-width: 0; padding: 21px; border: 1px solid #dce0da; border-radius: 14px; background: #f9faf7; }
.alternative-control:nth-child(2),.alternative-control:nth-child(3) { background: #f5f8f6; }
.alternative-control > label:first-child:not(.alternative-check) { display: grid; gap: 6px; margin-bottom: 14px; }
.alternative-control > label:first-child span { color: var(--muted); line-height: 1.4; }
.alternative-control p { margin: 11px 0 0; color: #69756f; font-size: 13px; line-height: 1.5; }
.alternative-check { display: flex; align-items: center; gap: 10px; font-weight: 750; cursor: pointer; }
.alternative-check input { width: 19px; height: 19px; accent-color: #2e7465; }
.alternative-check-secondary { margin-top: 16px; font-size: 14px; }
.alternative-slider { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 19px; font-size: 14px; }
.alternative-slider b { color: #245849; }
.alternative-slider input { grid-column: 1 / -1; width: 100%; accent-color: #2e7465; }
.alternative-slider.is-disabled { opacity: .46; }
.alternative-submit { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 23px clamp(25px,3.4vw,42px); background: #263e38; color: white; }
.alternative-submit > div { display: grid; gap: 4px; }
.alternative-submit > div span { color: #b8d1c6; font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.alternative-submit > div b { font-size: 20px; }
.alternative-submit button { border: 0; border-radius: 10px; padding: 15px 20px; background: #f1e5cc; color: #243831; font-weight: 800; cursor: pointer; }
.alternative-submit button:hover:not(:disabled) { background: #fff0d4; }
.alternative-submit button:disabled { opacity: .45; cursor: not-allowed; }
.alternative-submit button span { margin-left: 14px; }
.alternative-results,
.alternative-catalogue { margin-top: 25px; padding: clamp(24px,3vw,38px); border: 1px solid #d8ddd7; border-radius: 18px; background: #fffdf9; }
.alternative-results-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; }
.alternative-results-heading > p { max-width: 340px; margin: 10px 0 0; font-size: 13px; }
.alternative-result-list { display: grid; gap: 15px; margin-top: 22px; }
.alternative-result-card { padding: 23px; border: 1px solid #d5e0d8; border-radius: 15px; background: linear-gradient(135deg,#eef5ef,#fffaf2); }
.alternative-result-card:nth-child(2) { background: #f6f8f5; }
.alternative-result-card:nth-child(3) { background: #f9f3eb; }
.alternative-result-top,.alternative-result-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.alternative-number { color: #386958; font-size: 12px; font-weight: 900; letter-spacing: .1em; }
.alternative-score { border-radius: 999px; padding: 7px 10px; background: #dbece1; color: #245849; font-size: 12px; font-weight: 800; }
.alternative-result-card h3 { margin: 12px 0 3px; font-size: clamp(20px,2.1vw,27px); }
.alternative-facts { margin: 0; color: var(--muted); font-size: 14px; }
.alternative-result-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 18px; }
.alternative-result-grid > div { padding: 14px 17px; border-radius: 11px; background: rgba(255,255,255,.7); }
.alternative-result-grid b { font-size: 14px; }
.alternative-result-grid ul { margin: 8px 0 0; padding-left: 20px; color: #45564f; font-size: 14px; line-height: 1.55; }
.alternative-result-footer { flex-wrap: wrap; margin-top: 17px; padding-top: 15px; border-top: 1px solid #d7dfd8; font-size: 13px; font-weight: 700; }
.alternative-result-footer > div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.alternative-result-footer a { color: #245d50; text-decoration: underline; text-underline-offset: 3px; }
.alternative-result-footer .alternative-amazon-link { border-radius: 7px; padding: 9px 12px; background: #254d42; color: white; text-decoration: none; }
.alternative-method { margin-top: 19px; color: #45564f; font-size: 14px; line-height: 1.55; }
.alternative-method summary { width: fit-content; cursor: pointer; font-weight: 800; }
.alternative-method p { max-width: 820px; }
.alternative-catalogue-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 25px; }
.alternative-catalogue-heading label { display: grid; gap: 8px; width: min(300px,100%); font-size: 13px; font-weight: 800; }
.alternative-catalogue-count { margin: 20px 0 11px; color: var(--muted); font-size: 13px; }
.alternative-catalogue-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.alternative-catalogue-list button { display: grid; gap: 5px; align-content: start; min-width: 0; min-height: 105px; border: 1px solid #dce2dc; border-radius: 10px; padding: 14px; background: #f8faf7; text-align: left; cursor: pointer; }
.alternative-catalogue-list button:hover { border-color: #8cad9e; background: #edf5ef; }
.alternative-catalogue-list b { line-height: 1.28; }
.alternative-catalogue-list span { color: var(--muted); font-size: 12px; }
.alternative-catalogue-list em { color: #2e6758; font-size: 12px; font-style: normal; font-weight: 800; }
.alternative-pagination { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
.alternative-pagination button { border: 1px solid #b6c8bb; border-radius: 8px; padding: 10px 14px; background: white; cursor: pointer; }
.alternative-pagination button:disabled { opacity: .4; cursor: not-allowed; }
.alternative-load-error { padding: 24px; border: 1px solid #d9aaa2; border-radius: 12px; background: #fff5f1; }
.alternative-load-error p { color: var(--muted); }

.guide-research { width: min(1280px,calc(100% - 56px)); margin: 38px auto 74px; padding: clamp(23px,3vw,38px); border: 1px solid #d8ddd7; border-radius: 18px; background: #fffdf8; box-shadow: var(--shadow); scroll-margin-top: 24px; }
.guide-research-heading { display: flex; justify-content: space-between; gap: 30px; }
.guide-research-heading > div { max-width: 760px; }
.guide-research-heading h2 { margin: 5px 0 10px; font-size: clamp(27px,3vw,40px); line-height: 1.1; }
.guide-research-heading p:not(.section-kicker) { margin: 0; color: var(--muted); line-height: 1.6; }
.guide-research-heading > a { align-self: start; flex: none; color: #245d50; font-weight: 800; text-underline-offset: 3px; }
.guide-research-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 16px 24px; margin-top: 26px; }
.guide-research-controls > label:first-child { display: grid; gap: 7px; min-width: min(320px,100%); font-size: 13px; font-weight: 800; }
.guide-research-controls input[type="search"] { width: 100%; border: 1px solid #bdcac2; border-radius: 9px; padding: 12px 13px; background: white; }
.guide-research-recent { display: inline-flex; align-items: center; gap: 8px; min-height: 45px; font-size: 14px; font-weight: 700; }
.guide-research-recent input { width: 18px; height: 18px; accent-color: #2e7465; }
.guide-research-status { margin: 16px 0 13px; color: var(--muted); font-size: 13px; }
.guide-research-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.guide-research-card { display: grid; align-content: start; min-width: 0; border: 1px solid #dbe2db; border-radius: 12px; padding: 16px; background: #f7f9f5; }
.guide-research-card-top { display: flex; justify-content: space-between; gap: 7px; color: #456253; font-size: 12px; }
.guide-research-card-top b { color: #235b4d; }
.guide-research-card h3 { margin: 13px 0 6px; font-size: 19px; line-height: 1.25; }
.guide-research-card p { margin: 0 0 10px; color: #5d6961; font-size: 13px; line-height: 1.45; }
.guide-research-breakdown { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0 12px; }
.guide-research-breakdown span { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 7px; border-radius: 7px; background: #e9f1e9; color: #315548; font-size: 12px; }
.guide-research-breakdown b { color: #204b3c; }
.guide-research-card .guide-research-issues { color: #364b40; }
.guide-research-card > div:last-child { display: grid; align-self: end; gap: 8px; padding-top: 10px; border-top: 1px solid #dbe2db; color: #56655a; font-size: 12px; }
.guide-research-card a { color: #225f50; font-weight: 800; }
.guide-research-pages { display: flex; justify-content: flex-end; gap: 9px; margin-top: 17px; }
.guide-research-pages button { border: 1px solid #b6c8bb; border-radius: 8px; padding: 9px 13px; background: #fff; cursor: pointer; }
.guide-research-pages button:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 900px) { .guide-research-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px) { .guide-research { width: calc(100% - 24px); padding: 20px 15px; } .guide-research-heading { display: block; } .guide-research-heading > a { display: inline-block; margin-top: 15px; } .guide-research-grid { grid-template-columns: 1fr; } }
@media (max-width: 1100px) {
  .landing-intro .mode-picker { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .landing-intro .mode-picker > a:nth-child(3) { grid-column: 1 / -1; min-height: 220px; }
}
@media (max-width: 760px) {
  .landing-intro .mode-picker { grid-template-columns: 1fr; }
  .landing-intro .mode-picker > a:nth-child(3) { grid-column: auto; }
  .alternative-finder { width: calc(100% - 24px); margin-bottom: 50px; }
  .alternative-source-card,.alternative-results-heading,.alternative-catalogue-heading,.alternative-submit { flex-direction: column; }
  .alternative-source-card dl { min-width: 0; width: 100%; }
  .alternative-control-grid,.alternative-result-grid { grid-template-columns: 1fr; }
  .alternative-catalogue-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .alternative-submit button { width: 100%; }
}
@media (max-width: 470px) {
  .alternative-catalogue-list { grid-template-columns: 1fr; }
  .alternative-step,.alternative-results,.alternative-catalogue { padding: 21px 16px; }
  .alternative-result-card { padding: 18px 15px; }
}

/* Trust and usability pass: primary route, readable evidence and optional detail. */
.mobile-menu-toggle { display: none; }
.landing-intro { padding-bottom: 28px; }
.landing-intro h1 { max-width: 780px; }
.home-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin: 30px 0 18px; }
.home-actions a { font-weight: 800; color: #295f54; text-underline-offset: 4px; }
.home-actions .home-primary-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; min-width: 248px; min-height: 58px; padding: 12px 21px; border-radius: 13px; background: #2b5f54; box-shadow: 0 9px 20px rgba(30,75,64,.19); color: #fff; text-decoration: none; font-size: 17px; }
.home-actions .home-primary-cta:hover { background: #214e45; }
.home-secondary-routes { margin: 0 0 28px; color: #566b63; font-size: 15px; }
.home-secondary-routes a { color: #275a50; font-weight: 700; }
.home-sample { width: min(1180px,calc(100% - 40px)); margin: 18px auto 44px; padding: clamp(24px,3.5vw,42px); border: 1px solid #d4ded7; border-radius: 24px; background: #f7f8f3; box-shadow: 0 12px 30px rgba(44,71,62,.07); }
.home-sample-heading { max-width: 800px; }
.home-sample h2 { margin: 5px 0 12px; color: #263a35; font-size: clamp(28px,3.4vw,42px); line-height: 1.1; letter-spacing: -.035em; }
.home-sample-heading > p:last-child,.home-sample-method { color: #53645d; font-size: 15px; line-height: 1.55; }
.home-sample-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; margin: 22px 0 17px; }
.home-sample-grid article { display: flex; flex-direction: column; gap: 11px; min-width: 0; padding: 23px; border: 1px solid #d8e2da; border-radius: 17px; background: #fff; }
.home-sample-grid article > span { align-self: flex-start; padding: 5px 9px; border-radius: 999px; background: #e2f0e9; color: #235c4e; font-size: 12px; font-weight: 800; }
.home-sample-grid h3 { margin: 0; font-size: 22px; color: #253e36; }
.home-sample-grid p { margin: 0; color: #40534b; line-height: 1.45; }
.home-sample-grid small { color: #714f45; font-size: 14px; line-height: 1.4; }
.home-sample-grid a { margin-top: auto; color: #235c4e; font-size: 14px; font-weight: 800; }
.home-sample-method { margin-bottom: 0; }
.home-sample-method a,.archive-exit a { color: #235c4e; font-weight: 800; }
.route-intro { padding: 28px 34px; }
.route-intro .intro-copy { margin-bottom: 0; }
.scroll-finder-header { padding: 20px 25px; }
.scroll-finder-header h2 { font-size: clamp(27px,3vw,36px); }
.optional-questions { grid-column: 1 / -1; min-width: 0; border: 1px solid #cbdcd2; border-radius: 18px; background: #f5f9f5; overflow: hidden; }
.optional-questions > summary { display: flex; justify-content: space-between; gap: 15px; padding: 20px 24px; color: #264f44; font-size: 17px; font-weight: 800; cursor: pointer; }
.optional-questions > summary span { color: #53665c; font-size: 14px; font-weight: 500; }
.optional-questions > .scroll-question { margin: 10px 15px 15px; }
.scroll-question h4 { margin: 12px 0; color: #2b4b40; font-size: 15px; }
.score-explanation { margin: 0 0 13px; color: #53685f; font-size: 13px; line-height: 1.5; }
.score-part-label span,.alternative-specs span,.alternative-rank em,.data-status,.result-trust-note span { font-size: max(12px,1em); }
.data-status { line-height: 1.4; }
.correction-link { color: #315e54; font-size: 13px; font-weight: 750; text-underline-offset: 3px; }
.amazon-cta p { margin: 7px 0 0; color: #5c6b63; font-size: 12px; line-height: 1.4; }
.archive-exit { width: min(1180px,calc(100% - 40px)); margin: 22px auto 54px; color: #53665c; }
.alternative-error { margin: 15px 0; padding: 13px 16px; border: 1px solid #c4786a; border-radius: 10px; background: #fff3ee; color: #763d33; font-weight: 700; }
.guide-index-page { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; width: min(1120px,calc(100% - 40px)); margin: 0 auto 60px; }
.guide-index-page > a { display: block; padding: 27px; border: 1px solid #d7e1d9; border-radius: 18px; background: #fffdf8; color: #263b33; text-decoration: none; }
.guide-index-page > a:hover { border-color: #578b75; box-shadow: 0 10px 24px rgba(40,70,58,.1); }
.guide-index-page span { color: #496f60; font-size: 12px; font-weight: 800; }
.guide-index-page h2 { margin: 10px 0; font-size: 24px; line-height: 1.2; }
.guide-index-page p { color: #53665d; line-height: 1.5; }
.guide-index-page b { color: #245b4c; }
.guide-single-nav,.guide-next { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; width: min(1120px,calc(100% - 40px)); margin: 28px auto; color: #566c60; font-size: 14px; }
.guide-single-nav a,.guide-next a { color: #245b4c; font-weight: 800; }
.guide-next { justify-content: flex-start; margin-bottom: 60px; }
.guide-next a { padding: 10px 13px; border: 1px solid #d1ddd3; border-radius: 9px; background: #fff; text-decoration: none; }
.guide-article .article-heading h1 { font-size: clamp(28px,3.5vw,43px); line-height: 1.13; }
@media (max-width: 760px) {
  .universal-header { grid-template-columns: minmax(0,1fr) auto; padding: 10px 13px; align-items: center; }
  .mobile-menu-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 12px; border: 1px solid #8faea1; border-radius: 9px; background: transparent; color: #fff; font-size: 14px; font-weight: 800; cursor: pointer; }
  .universal-header .site-nav { display: none; grid-column: 1 / -1; width: 100%; margin: 10px 0 0; padding: 9px 0 2px; border-top: 1px solid rgba(255,255,255,.18); overflow: visible; white-space: normal; }
  .universal-header.menu-open .site-nav { display: grid; gap: 2px; }
  .universal-header .site-nav a { display: block; min-height: 43px; padding: 10px 12px; font-size: 15px; }
  .universal-header .header-cta { display: none; }
  .home-sample-grid { grid-template-columns: 1fr; }
  .home-sample { width: calc(100% - 24px); padding: 21px 17px; }
  .home-actions { align-items: stretch; flex-direction: column; gap: 14px; }
  .home-actions .home-primary-cta { min-width: 0; }
  .route-intro { padding: 18px 19px; }
  .route-intro h1 { font-size: clamp(32px,9vw,44px); }
  .scroll-finder-header { padding: 17px 18px; }
  .optional-questions > summary { display: block; padding: 17px; }
  .optional-questions > summary span { display: block; margin-top: 5px; }
  .optional-questions > .scroll-question { margin: 8px; }
  .guide-index-page { grid-template-columns: 1fr; width: calc(100% - 24px); }
}

/* Three unmistakable routes and a calmer guided flow. */
.landing-choice {
  width: min(1160px, calc(100% - 40px));
  padding: clamp(42px, 6vw, 78px) 0 45px;
  text-align: left;
}
.landing-choice h1 {
  max-width: none;
  margin: 12px 0 0;
  font-size: clamp(38px, 5.5vw, 66px);
  line-height: 1.04;
}
.landing-choice .intro-copy { max-width: none; margin: 12px 0 0; font-size: 17px; line-height: 1.45; }
.landing-choice .mode-picker {
  width: 100%;
  max-width: none;
  margin: 32px 0 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.landing-choice .mode-picker > a,
.landing-choice .mode-picker > a:first-child,
.landing-choice .mode-picker > a:nth-child(3) {
  min-width: 0;
  min-height: 254px;
  padding: 27px;
  align-items: flex-start;
  text-align: left;
  border-radius: 19px;
}
.landing-choice .mode-picker > a:nth-child(2) { background: #fffdf9; }
.landing-choice .mode-picker > a:nth-child(3) { background: #eaf3f1; }
.landing-choice .mode-picker > a small { font-size: 12px; letter-spacing: .06em; }
.landing-choice .mode-picker > a b {
  max-width: 100%;
  margin-top: 20px;
  font-family: inherit;
  font-size: clamp(27px, 2.9vw, 34px);
  font-weight: 790;
  line-height: 1.08;
  overflow-wrap: anywhere;
}
.landing-choice .mode-picker > a span {
  max-width: 27ch;
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.45;
}
.landing-choice .mode-picker > a em { padding-top: 22px; font-size: 14px; }
.landing-choice .mode-picker > a:focus-visible,
.optional-questions > summary:focus-visible { outline: 3px solid #226956; outline-offset: 4px; }
.landing-guide-link { margin: 25px 0 0; color: #5b6962; font-size: 15px; }
.landing-guide-link a { color: #255d50; font-weight: 760; text-underline-offset: 4px; }

body[data-route="guided"] .route-intro { padding: 20px 24px 12px; }
body[data-route="guided"] .route-intro h1 { font-size: clamp(32px, 4vw, 46px); }
body[data-route="guided"] .route-back { margin-bottom: 10px; }
body[data-route="guided"] .scroll-questionnaire { width: min(940px, calc(100% - 32px)); margin-top: 14px; }
body[data-route="guided"] .scroll-questionnaire-panel { grid-template-columns: minmax(0, 1fr); gap: 14px; }
body[data-route="guided"] .scroll-questionnaire-panel > .scroll-question,
body[data-route="guided"] .scroll-questionnaire-panel > .optional-questions,
body[data-route="guided"] .scroll-questionnaire-panel > .calculate-bar {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
body[data-route="guided"] .scroll-question { padding: clamp(20px, 2.5vw, 27px); }
body[data-route="guided"] .scroll-question h4 { margin: 16px 0 8px; }
body[data-route="guided"] #question-5 .priority-grid,
body[data-route="guided"] #question-6 .priority-grid,
body[data-route="guided"] #question-8 .lens-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
body[data-route="guided"] .scroll-finder-header { margin-bottom: 14px; }
.optional-questions { border: 0; background: transparent; overflow: visible; }
.optional-questions > summary {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  min-height: 74px;
  align-items: center;
  padding: 17px 22px;
  border: 2px solid #8db6a7;
  border-radius: 16px;
  background: #dcefe7;
  box-shadow: 0 7px 17px rgba(33, 92, 71, .1);
  color: #204c40;
  list-style: none;
  transition: background .15s ease, border-color .15s ease;
}
.optional-questions > summary::-webkit-details-marker { display: none; }
.optional-questions > summary:hover { border-color: #286b5a; background: #d0e8dd; }
.optional-questions > summary > span { flex: 1; color: #204c40; font-size: 18px; font-weight: 800; }
.optional-questions > summary small { display: block; margin-top: 3px; color: #4c665b; font-size: 13px; font-weight: 550; }
.optional-questions > summary .optional-toggle {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #286b5a;
  color: #fff;
  font-size: 23px;
  font-weight: 500;
}
.optional-questions[open] > summary .optional-toggle { font-size: 0; }
.optional-questions[open] > summary .optional-toggle::after { content: "−"; font-size: 23px; }
.optional-questions > .scroll-question { margin: 12px 0 0; }

.result-stage { width: min(1080px, calc(100% - 32px)); padding: clamp(22px, 3vw, 34px); }
.result-stage-heading { display: block; margin-bottom: 21px; padding-bottom: 18px; }
.result-stage-heading h2 { font-size: clamp(29px, 3.5vw, 42px); }
.result-stage-heading p:last-child { max-width: none; margin-top: 7px; font-size: 14px; line-height: 1.45; }
.result-stage .alternative-section { margin-top: 30px; }
.result-stage .alternative-heading { display: block; margin-bottom: 15px; }
.result-stage .alternative-heading h3 { font-size: clamp(23px, 2.8vw, 30px); }
.result-stage .alternative-summary { min-width: 0; }
.result-stage .alternative-camera { grid-template-columns: auto minmax(0, 1fr) minmax(120px, auto); }
.result-stage .alternative-camera > div { min-width: 0; }
.result-stage .alternative-camera h3,
.result-stage .camera-price-stack { overflow-wrap: anywhere; }
.result-stage .score-part-label span:first-child { min-width: 0; overflow-wrap: anywhere; }
.result-stage .score-details { padding: 16px; }
.result-stage .score-parts { gap: 10px 16px; }
.result-stage .result-price-note { margin-top: 20px; font-size: 13px; line-height: 1.45; text-align: left; }

@media (max-width: 900px) {
  .landing-choice .mode-picker { grid-template-columns: 1fr; }
  .landing-choice .mode-picker > a,
  .landing-choice .mode-picker > a:first-child,
  .landing-choice .mode-picker > a:nth-child(3) { min-height: 170px; }
  .result-stage .alternative-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .landing-choice { width: calc(100% - 28px); padding-top: 30px; }
  .landing-choice .mode-picker { margin-top: 23px; gap: 11px; }
  .landing-choice .mode-picker > a,
  .landing-choice .mode-picker > a:first-child,
  .landing-choice .mode-picker > a:nth-child(3) { min-height: 154px; padding: 21px; }
  .landing-choice .mode-picker > a b { margin-top: 12px; font-size: 26px; }
  .landing-choice .mode-picker > a span { margin-top: 7px; }
  body[data-route="guided"] #question-5 .priority-grid,
  body[data-route="guided"] #question-6 .priority-grid,
  body[data-route="guided"] #question-8 .lens-grid { grid-template-columns: 1fr !important; }
  .optional-questions > summary { display: flex; gap: 10px; padding: 15px 16px; }
  .optional-questions > summary > span { flex: 1; }
  .optional-questions > summary small { margin-top: 3px; }
  .result-stage { width: calc(100% - 24px); padding: 18px; }
  .result-stage .alternative-camera { grid-template-columns: auto minmax(0, 1fr); }
  .result-stage .camera-price-stack { grid-column: 2; }
  .result-stage .score-parts { grid-template-columns: 1fr; }
}