.checkout-hero {
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(420px,1.15fr);
  gap:64px;
  align-items:center;
  min-height:680px;
  padding:70px max(24px,calc((100vw - 1120px) / 2));
  background:
    radial-gradient(circle at 12% 24%,rgba(212,162,76,.18),transparent 30%),
    linear-gradient(135deg,#071b31 0%,#0d2a49 100%);
}

.checkout-hero-copy { color:#fff; }

.checkout-hero-copy h1 {
  margin:0 0 22px;
  font-size:clamp(38px,5vw,62px);
  line-height:1.04;
}

.checkout-hero-copy > p:last-child {
  max-width:550px;
  margin:0;
  color:rgba(255,255,255,.82);
  font-size:18px;
}

.checkout-tool {
  width:100%;
  padding:28px;
  border:1px solid rgba(230,194,122,.48);
  border-radius:16px;
  background:#fff;
  box-shadow:0 26px 70px rgba(0,0,0,.28);
}

.tool-heading {
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:24px;
}

.tool-heading > span {
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--navy);
  color:var(--gold-light);
  font-size:24px;
}

.tool-heading p,
.tool-heading h2 { margin:0; }

.tool-heading p {
  color:#9a6411;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}

.tool-heading h2 {
  color:var(--navy);
  font-size:24px;
  line-height:1.2;
}

.score-field { display:block; }

.score-field > span,
.checkout-tool legend {
  display:block;
  margin-bottom:8px;
  color:var(--navy);
  font-size:13px;
  font-weight:800;
}

.score-field input {
  width:100%;
  height:72px;
  padding:8px 18px;
  border:2px solid #d9d5cc;
  border-radius:10px;
  color:var(--navy);
  font:800 36px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.score-field input:focus {
  border-color:var(--gold);
  outline:3px solid rgba(212,162,76,.2);
}

.checkout-tool fieldset {
  margin:20px 0 0;
  padding:0;
  border:0;
}

.segmented-control {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

.segmented-control label { cursor:pointer; }

.segmented-control input {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0;
}

.segmented-control span {
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 10px;
  border:1px solid #d9d5cc;
  border-radius:8px;
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  text-align:center;
}

.segmented-control input:checked + span {
  border-color:var(--navy);
  background:var(--navy);
  color:#fff;
}

.segmented-control input:focus-visible + span {
  outline:3px solid var(--gold);
  outline-offset:2px;
}

.calculate-button {
  width:100%;
  min-height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:22px;
  border:1px solid #a96f13;
  border-radius:8px;
  background:var(--gold);
  color:#17120b;
  font:800 15px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  cursor:pointer;
}

.calculate-button:hover { background:var(--gold-light); }

.calculate-button:focus-visible {
  outline:3px solid var(--navy);
  outline-offset:3px;
}

.checkout-results {
  margin-top:24px;
  padding:20px;
  border-radius:12px;
  background:#f3f1ec;
}

.results-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:14px;
}

.results-heading > div {
  display:flex;
  align-items:baseline;
  gap:8px;
}

.results-heading span,
.results-heading p {
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
}

.results-heading strong {
  color:var(--navy);
  font-size:28px;
}

.results-heading p { margin:0; }

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

.checkout-route {
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:12px 14px;
  border:1px solid #dedbd4;
  border-left:4px solid var(--gold);
  border-radius:8px;
  background:#fff;
}

.checkout-route span {
  color:#9a6411;
  font-size:16px;
  font-weight:900;
}

.checkout-route i {
  color:#8a909a;
  font-size:13px;
  font-style:normal;
}

.result-message {
  margin:0;
  padding:14px;
  border:1px solid #dedbd4;
  border-radius:8px;
  background:#fff;
  color:var(--muted);
  font-size:14px;
}

@media (max-width:900px) {
  .checkout-hero {
    grid-template-columns:1fr;
    gap:38px;
    padding-top:58px;
    padding-bottom:58px;
  }

  .checkout-hero-copy { max-width:700px; }
}

@media (max-width:560px) {
  .checkout-hero { padding:46px 16px; }
  .checkout-hero-copy h1 { font-size:38px; overflow-wrap:anywhere; }
  .checkout-hero-copy > p:last-child { font-size:16px; }
  .checkout-tool { padding:20px 16px; }
  .tool-heading h2 { font-size:21px; }
  .segmented-control { gap:6px; }
  .segmented-control span { padding:7px 5px; font-size:12px; }
  .checkout-results { padding:16px 12px; }
  .results-heading { align-items:flex-end; }
}