:root {
  --v4-navy: #061334;
  --v4-ink: #17233a;
  --v4-muted: #5d6b82;
  --v4-blue: #075bd8;
  --v4-blue-2: #0c46a0;
  --v4-orange: #ff4b12;
  --v4-orange-dark: #dc3e0c;
  --v4-line: #dce6f2;
  --v4-soft: #f3f7fc;
  --v4-soft-blue: #eaf3ff;
  --v4-shadow: 0 24px 54px rgba(18, 48, 90, .13);
  --v4-shadow-soft: 0 12px 34px rgba(18, 48, 90, .08);
}

html {
  background: var(--v4-soft);
}

body.calculator-page {
  min-width: 0;
  background:
    radial-gradient(circle at 78% -10%, rgba(7, 91, 216, .12), transparent 34%),
    linear-gradient(180deg, #fff 0, #f6faff 170px, #edf4fb 100%) !important;
  color: var(--v4-ink);
  overflow-x: hidden !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

.calculator-page .header {
  background: rgba(255, 255, 255, .96) !important;
  border-bottom: 1px solid rgba(214, 225, 239, .95) !important;
  box-shadow: 0 10px 28px rgba(18, 48, 90, .06) !important;
  backdrop-filter: blur(14px);
}

.calculator-page .container {
  width: min(1370px, calc(100% - 72px));
}

.calculator-page .nav {
  min-height: 86px !important;
  padding: 0 !important;
}

.calculator-page .brand img {
  width: 176px !important;
  max-width: 176px;
}

.calculator-page .nav nav {
  display: flex;
  align-items: center;
  gap: 28px !important;
}

.calculator-page .nav nav a:not(.btn) {
  color: #0d1729 !important;
  font-size: 15px;
  font-weight: 750;
}

.calculator-page .nav nav .btn {
  min-height: 44px !important;
  padding: 0 17px !important;
  color: #fff !important;
  background: var(--v4-orange) !important;
  border-radius: 8px !important;
  box-shadow: 0 14px 28px rgba(255, 75, 18, .22);
}

.calc-shell {
  width: min(1370px, calc(100% - 72px));
  min-height: calc(100dvh - 86px) !important;
  max-width: none !important;
  grid-template-columns: minmax(600px, .98fr) minmax(460px, .78fr) !important;
  gap: 22px !important;
  margin: 0 auto !important;
  padding: 24px 0 34px !important;
  overflow: visible !important;
}

.calc-panel,
.calc-output {
  background: rgba(255, 255, 255, .98) !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 12px !important;
  box-shadow: var(--v4-shadow-soft) !important;
}

.calc-panel {
  padding: 22px !important;
  border-left: 0 !important;
}

.calc-output {
  position: sticky !important;
  top: 108px !important;
  max-height: calc(100dvh - 132px) !important;
  overflow: hidden !important;
}

.calc-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px !important;
  align-items: start !important;
  margin-bottom: 16px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid #e5edf6 !important;
}

.calc-head h1 {
  max-width: 520px;
  color: var(--v4-navy) !important;
  font-size: 38px !important;
  line-height: 1.03 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

.calc-head p {
  max-width: 720px;
  color: #4b5b72 !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.calc-badge {
  border-color: #efb5ac !important;
  background: #fff3f1 !important;
  color: #9f2f25 !important;
  border-radius: 999px !important;
  font-weight: 850 !important;
}

.calc-mode-banner {
  border-color: #ffd8cc !important;
  background: #fff7f4 !important;
  color: #8f2c24 !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  font-weight: 800 !important;
}

.calc-flow-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.calc-flow-tabs a {
  min-height: 62px !important;
  padding: 14px !important;
  border-radius: 10px !important;
  background: #fff !important;
  border-color: #d9e5f2 !important;
  box-shadow: 0 10px 24px rgba(18, 48, 90, .05) !important;
}

.calc-flow-tabs a.is-active {
  color: #fff !important;
  background: var(--v4-blue) !important;
  border-color: var(--v4-blue) !important;
}

.calc-flow-tabs a.freight {
  color: #9a3412 !important;
  background: #fff7ed !important;
  border-color: #fed7aa !important;
}

.calc-flow-tabs a strong {
  font-size: 15px !important;
}

.calc-flow-tabs a span {
  font-size: 12px !important;
}

.calc-trust-strip {
  gap: 8px !important;
}

.calc-trust-strip span {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #253955 !important;
  background: #f9fcff !important;
  border-color: #dae5f1 !important;
  border-radius: 8px !important;
  font-weight: 850 !important;
}

.calc-steps {
  top: 86px !important;
  margin: 14px 0 !important;
  padding: 6px !important;
  background: rgba(255, 255, 255, .96) !important;
  border-color: #d9e5f2 !important;
  border-radius: 9px !important;
  box-shadow: 0 10px 24px rgba(18, 48, 90, .06) !important;
}

.calc-steps span {
  min-height: 36px !important;
  background: #eef4fa !important;
  color: #52657a !important;
  border-radius: 7px !important;
  font-weight: 850 !important;
}

.calc-steps span.is-active {
  color: #fff !important;
  background: var(--v4-navy) !important;
  box-shadow: inset 0 -3px 0 var(--v4-orange) !important;
}

.calc-section {
  padding: 14px !important;
  border-color: #dfe9f4 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: 0 8px 20px rgba(18, 48, 90, .035);
}

.calc-section-title {
  margin-bottom: 12px !important;
}

.calc-section-title::before {
  width: 26px !important;
  height: 26px !important;
  color: var(--v4-blue) !important;
  background: var(--v4-soft-blue) !important;
}

.calc-section-title strong {
  color: var(--v4-navy) !important;
  font-size: 15px !important;
}

.calc-section-title span {
  color: var(--v4-muted) !important;
}

.calc-panel input,
.calc-panel select {
  min-width: 0 !important;
  width: 100%;
  min-height: 45px !important;
  color: #14233c !important;
  background: #fffdfb !important;
  border: 1px solid #d7dfe9 !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  font-size: 15px !important;
}

/* iOS Safari zooms the whole viewport when a focused input is under 16px, and
   the customer then has to pinch back out — on every field, on the cohort we
   buy the most traffic for. calculator.html already sets 16px under this
   breakpoint; this file loads later and was overriding it with !important. */
@media (max-width: 620px) {
  .calc-panel input,
  .calc-panel select,
  .calc-panel textarea {
    font-size: 16px !important;
    min-height: 47px !important;
  }
}

.calc-panel input[type="radio"],
.calc-panel input[type="checkbox"] {
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto;
}

.calc-panel input:focus,
.calc-panel select:focus {
  border-color: var(--v4-blue) !important;
  box-shadow: 0 0 0 3px rgba(7, 91, 216, .12) !important;
  outline: none !important;
}

.smart-unit-toggle {
  background: transparent !important;
  padding: 0 !important;
}

.smart-unit-toggle label,
.product-source-toggle label {
  position: relative !important;
  overflow: hidden !important;
  min-width: 0 !important;
  border-color: #dbe6f2 !important;
  background: #fff !important;
  border-radius: 9px !important;
}

.smart-unit-toggle label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
}

.smart-unit-toggle label:has(input:checked),
.product-source-toggle label:has(input:checked) {
  color: var(--v4-blue-2) !important;
  border-color: var(--v4-blue) !important;
  background: #eef6ff !important;
  box-shadow: inset 0 0 0 1px rgba(7, 91, 216, .16) !important;
}

.product-source-toggle {
  gap: 10px !important;
}

.product-source-toggle input {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.product-source-toggle label {
  min-height: 58px !important;
  padding: 12px 14px !important;
}

.product-source-toggle strong {
  color: var(--v4-navy) !important;
  font-size: 14px !important;
}

.product-source-toggle span,
.product-source-panel .small,
.smart-disclaimer {
  color: #64758b !important;
}

.calc-form-actions {
  margin-top: 8px !important;
}

.package-section .grid-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.calc-panel .btn.block {
  min-height: 50px !important;
  color: #fff !important;
  background: var(--v4-navy) !important;
  border-radius: 8px !important;
  font-weight: 900 !important;
}

.calc-panel .btn.block:hover {
  background: var(--v4-blue) !important;
}

/* Iteration 1 (mobile rates affordance): explicit selection heading, in-card
   CTA on the recommended rate, whole card stays clickable (label). */
.calculator-page .rate-choose-heading {
  display: block;
  font-size: 17px !important;
  color: var(--v4-navy) !important;
  font-weight: 900;
}

.calculator-page .rate-choose-sub {
  margin: 2px 0 8px !important;
  color: var(--v4-muted) !important;
  font-size: 13px !important;
  font-weight: 650;
}

/* Iteration 3: counter-price context for the whole list, shown only when the
   leading card cannot prove a saving on its own (UPS and FedEx never can —
   the carrier returns no retail price for our accounts). Quiet on purpose:
   it is a reference point, not a promotion, and it must not compete with the
   recommended card's CTA. */
.calculator-page .rate-counter-anchor {
  margin: 0 0 8px !important;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(20, 122, 74, .07);
  color: #14683f !important;
  font-size: 13px !important;
  font-weight: 700;
  line-height: 1.35;
}

.calculator-page .rate-card.rate-recommended {
  border-color: #f3b590 !important;
  box-shadow: 0 10px 24px rgba(255, 75, 18, .08);
}

.calculator-page .rate-card.rate-recommended {
  flex-wrap: wrap;
}

.calculator-page .rate-choose-btn {
  display: block;
  flex: 1 1 100%;
  width: 100%;
  margin-top: 9px;
  padding: 11px 12px;
  text-align: center;
  color: #fff !important;
  background: var(--v4-orange);
  border-radius: 8px;
  font-weight: 850;
  font-size: 14px;
}

.calculator-page .rate-card:has(input:checked) .rate-choose-btn::after {
  content: " ✓";
}

/* Primary form CTA only — policy-box and label-screen .btn.block stay navy.
   White 900-weight text on #ea580c passes WCAG large-text contrast. */
.calc-panel .btn.block.cta-primary {
  background: var(--v4-orange) !important;
  box-shadow: 0 14px 28px rgba(255, 75, 18, .22) !important;
}

.calc-panel .btn.block.cta-primary:hover {
  background: var(--v4-orange-dark) !important;
}

.calc-reset-inline {
  min-height: 50px !important;
  color: var(--v4-blue-2) !important;
  background: #fff !important;
  border-color: #bfd1e8 !important;
  border-radius: 8px !important;
}

.calc-output-head {
  padding: 18px 20px !important;
  background: #fff !important;
  border-bottom: 1px solid #e5edf6 !important;
}

.calc-output-head strong {
  color: var(--v4-navy) !important;
  font-size: 21px !important;
}

.calc-output-head span {
  color: var(--v4-muted) !important;
}

.calc-empty {
  background:
    linear-gradient(180deg, #fff 0, #f7fbff 100%) !important;
  padding: 18px !important;
}

.calc-empty-copy,
.calc-route-visual,
.calc-process-card,
.calc-trust-row div,
.quote-card,
.smart-policy-box,
.smart-rate-choice,
.smart-summary-grid div {
  border-radius: 10px !important;
}

.calc-empty-copy {
  border-color: #dfe9f4 !important;
  box-shadow: 0 14px 34px rgba(18, 48, 90, .06) !important;
}

.calc-empty h2 {
  color: var(--v4-navy) !important;
  font-size: 32px !important;
  line-height: 1.04 !important;
}

.calc-empty-eyebrow {
  color: var(--v4-blue) !important;
  background: var(--v4-soft-blue) !important;
  border-color: #d3e4fa !important;
}

.calc-signal-card {
  background: linear-gradient(135deg, #061334, #0d2e68) !important;
  border: 0 !important;
  box-shadow: 0 20px 42px rgba(6, 19, 52, .18) !important;
}

.calculator-page .smart-summary-grid {
  background: #fff !important;
  border-color: #e6eef7 !important;
}

.calculator-page .smart-rate-choice:has(input:checked),
.calculator-page .smart-rate-choice.selected {
  border-color: var(--v4-blue) !important;
  box-shadow: 0 0 0 2px rgba(7, 91, 216, .1) !important;
}

.calculator-page .smart-policy-box,
.calculator-page .insurance-readiness,
.shipment-tracking {
  border-color: #dfe9f4 !important;
  background: #fbfdff !important;
}

.label-screen-head {
  border-color: #d8e8dd !important;
  background: #f7fbf8 !important;
}

.label-stage {
  background: #f7fbff !important;
}

.calc-trust-footer {
  background: #061334 !important;
}

@media (max-width: 1180px) {
  .calculator-page .container,
  .calc-shell {
    width: min(100% - 44px, 980px);
  }

  .calc-shell {
    grid-template-columns: 1fr !important;
  }

  .calc-output {
    position: static !important;
    max-height: none !important;
  }
}

@media (max-width: 720px) {
  .calculator-page .container,
  .calc-shell {
    width: calc(100% - 18px);
  }

  .calculator-page .nav {
    min-height: 66px !important;
  }

  .calculator-page .brand img {
    width: 132px !important;
  }

  .calculator-page .nav nav {
    gap: 8px !important;
  }

  .calc-shell {
    padding: 10px 0 22px !important;
    gap: 12px !important;
  }

  .calc-panel {
    padding: 14px !important;
  }

  .calc-head {
    grid-template-columns: 1fr;
    gap: 10px !important;
  }

  .calc-head h1 {
    font-size: 29px !important;
  }

  .calc-head p {
    display: block !important;
    font-size: 14px !important;
  }

  .calc-trust-strip,
  .product-source-toggle {
    grid-template-columns: 1fr !important;
  }

  .calc-steps {
    top: 66px !important;
  }

  .calc-output-head {
    padding: 14px !important;
  }
}

/* Calculator header/footer cleanup */
.calculator-page .nav nav {
  display: flex;
  align-items: center;
  gap: 18px;
}

.calculator-page .nav nav a {
  color: #263548;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.calculator-page .nav nav a.btn {
  background: #ff4b12;
  color: #fff;
  border-radius: 8px;
  padding: 9px 15px;
}

.calculator-page .nav nav a.btn:hover {
  background: #dc3e0c;
  color: #fff;
}

@media (max-width: 760px) {
  .calculator-page .nav {
    min-height: auto !important;
    align-items: center !important;
    flex-direction: column;
    gap: 8px;
    padding: 10px 0 !important;
  }

  .calculator-page .nav nav {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    gap: 12px !important;
    padding-bottom: 2px;
  }

  .calculator-page .nav nav a {
    flex: 0 0 auto;
    font-size: 12px;
  }
}

/* Release 1 — Rates screen: carrier rate cards with comparison badges,
   estimated-package card with Edit, and the pre-payment order summary. */
.calculator-page [hidden] { display: none !important; }
.calculator-page .rate-card { align-items: center; padding: 12px !important; cursor: pointer; }
.calculator-page .rate-card input { position: absolute; opacity: 0; pointer-events: none; }
.calculator-page .rate-card { position: relative; }
.calculator-page .rate-card:has(input:focus-visible) { outline: 2px solid #075cf7; outline-offset: 2px; }
.calculator-page .rate-card-body { display: flex !important; align-items: center; gap: 10px; width: 100%; min-width: 0; }
.calculator-page .rate-carrier-mark { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 46px; padding: 7px 8px; border-radius: 8px; font-size: 10.5px; font-weight: 900; letter-spacing: .2px; color: #fff; }
.calculator-page .mark-usps { background: #1a4480; }
.calculator-page .mark-ups { background: #4b2c20; }
.calculator-page .mark-fedex { background: #4d148c; }
.calculator-page .mark-dhl { background: #ffcc00; color: #7a1400; }
.calculator-page .mark-other { background: #52657a; }
.calculator-page .rate-card-main { display: grid !important; gap: 2px; min-width: 0; flex: 1 1 auto; }
.calculator-page .rate-card-main strong { font-size: 13.5px; color: #0c2138; }
.calculator-page .rate-card-side { display: grid !important; gap: 4px; justify-items: end; flex: 0 0 auto; }
.calculator-page .rate-card-price { font-size: 15px; font-weight: 900; color: #0c2138; }
.calculator-page .rate-badge { border-radius: 999px; padding: 2px 8px; font-size: 10.5px; font-weight: 800; background: #eef5ff; color: #075cf7; border: 1px solid #d3e4fa; white-space: nowrap; }
.calculator-page .rate-badge-cheapest { background: #e8f6ee; color: #17633a; border-color: #cdeeda; }
.calculator-page .package-confirm-body { display: flex; align-items: center; gap: 14px; margin: 10px 0 8px; }
.calculator-page .package-cube { width: 46px; height: 46px; flex: 0 0 auto; }
.calculator-page .package-confirm-meta { display: grid; gap: 2px; }
.calculator-page .package-confirm-meta span { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: #607287; }
.calculator-page .package-confirm-meta span + strong { margin-bottom: 4px; }
.calculator-page .package-confirm-meta strong { font-size: 14.5px; color: #0c2138; line-height: 1.2; }
.calculator-page .package-edit-link { margin-left: auto; border: 0; background: none; color: #075cf7; font-size: 13px; font-weight: 800; cursor: pointer; padding: 2px 4px; }
.calculator-page .package-confirm-ok { margin: 0; font-size: 12px; color: #178a4c; }
.calculator-page .package-confirm-ok::before { content: "\2713"; margin-right: 6px; font-weight: 900; }
.calculator-page .order-summary { border: 1px solid #dfe9f4; background: #fbfdff; border-radius: 10px; padding: 14px; margin-top: 14px; }
.calculator-page .order-summary-title { color: #0c2138; }
.calculator-page .order-summary dl { margin: 10px 0 8px; display: grid; gap: 6px; }
.calculator-page .order-summary dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.calculator-page .order-summary dt { color: #607287; font-size: 12.5px; font-weight: 700; }
.calculator-page .order-summary dt small { display: block; font-weight: 400; color: #8794a4; font-size: 10.5px; line-height: 1.35; max-width: 230px; }
.calculator-page .order-summary dd { margin: 0; font-size: 13px; font-weight: 800; color: #0c2138; text-align: right; }
.calculator-page .order-summary-total { border-top: 1px solid #e2ebf5; padding-top: 8px; margin-top: 2px; }
.calculator-page .order-summary-total dd { font-size: 16px; color: #0b7a3e; }
.calculator-page .order-summary .small { margin: 0; color: #607287; }

/* Audit fixes: keep long labels ('Dimensional weight') inside their summary
   chips, and stop the header CTA from overlapping the logo on tablets. */
.calculator-page .smart-summary-grid div { padding: 9px 6px !important; min-width: 0; }
.calculator-page .smart-summary-grid span { letter-spacing: .2px !important; overflow-wrap: break-word; }
@media (min-width: 621px) and (max-width: 900px) {
  .calculator-page .header .nav { flex-wrap: wrap; row-gap: 6px; }
  .calculator-page .header .nav nav { flex-wrap: wrap; }
}

/* Release 2: rate freshness notices, estimate-confidence chips, badge reasons. */
.calculator-page .stale-rates-notice { display: grid; gap: 6px; border: 1px solid #efd17d; background: #fff9e9; border-radius: 10px; padding: 12px; margin: 10px 0; }
.calculator-page .stale-rates-notice strong { color: #684600; font-size: 13px; }
.calculator-page .stale-rates-notice span { color: #6d5410; font-size: 12.5px; line-height: 1.4; }
.calculator-page .stale-rates-notice button { justify-self: start; min-height: 38px; padding: 8px 14px; border: 0; border-radius: 8px; background: #075cf7; color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; }
.calculator-page .rerate-note { margin: 10px 0 !important; }
.calculator-page .confidence-chip { border-radius: 999px; padding: 3px 9px; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.calculator-page .conf-high, .calculator-page .conf-manual { background: #e8f6ee; color: #17633a; border: 1px solid #cdeeda; }
.calculator-page .conf-medium { background: #fff9e9; color: #684600; border: 1px solid #efd17d; }
.calculator-page .conf-low { background: #fff3f1; color: #8f2c24; border: 1px solid #efb5ac; }
.calculator-page .package-confirm-ok.needs-review { color: #684600; }
.calculator-page .package-confirm-ok.needs-review::before { content: "\26A0"; color: #b07800; }
.calculator-page .package-confirm-tip { margin: 6px 0 0; font-size: 12px; color: #4b5c72; }
.calculator-page .package-confirm-tip .package-edit-link { font-size: 12px; }
.calculator-page .rate-why { color: #178a4c !important; font-weight: 700; }
.calculator-page .rate-why::before { content: "\2713 "; font-weight: 900; }

/* Conversion pass: retail-price anchor with savings, and the trust strip
   under the rate list. */
.calculator-page .rate-retail-was { font-size: 11px; color: #8794a4; white-space: nowrap; }
.calculator-page .rate-retail-was s { text-decoration-color: #c2503f; }
.calculator-page .rate-save { font-size: 11px; font-weight: 800; color: #0b7a3e; background: #e8f6ee; border: 1px solid #cdeeda; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.calculator-page .rate-trust-row { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; padding: 10px 2px 0; border-top: 1px dashed #dfe9f4; }
.calculator-page .rate-trust-row li { font-size: 11.5px; font-weight: 700; color: #4a5d72; }
.calculator-page .rate-trust-row li::before { content: "\2713"; color: #178a4c; font-weight: 900; margin-right: 5px; }
@media (max-width: 620px) {
  /* Narrow screens: price block becomes a bottom row so the service name
     keeps the full card width instead of wrapping one word per line. */
  .calculator-page .rate-card-body { flex-wrap: wrap; }
  .calculator-page .rate-card-main { flex: 1 1 calc(100% - 60px); }
  .calculator-page .rate-card-side { display: flex !important; width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 8px; margin-top: 2px; }
}

/* First-screen form controls (all viewports): quantity stepper, payment
   review note, collapsed-by-default advanced section toggle (mobile only). */
.qty-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qty-label { font-size: 13px; font-weight: 800; color: #30465e; }
.qty-stepper { display: flex; align-items: center; border: 1px solid #cbd8e6; border-radius: 8px; overflow: hidden; background: #fff; }
.qty-stepper button { width: 42px; min-height: 40px; border: 0; background: #f3f7fb; color: #0c2138; font-size: 18px; font-weight: 900; cursor: pointer; }
.qty-stepper input { width: 58px; min-height: 40px; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-align: center; font-weight: 900; -moz-appearance: textfield; appearance: textfield; }
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-review-note { grid-column: 1 / -1; margin: 6px 0 0 !important; text-align: center; color: #607287 !important; }
/* First-estimate form = description/link + ZIPs on ALL viewports (owner
   decision 22.07: desktop mirrors the approved mobile layout). The Type
   chooser (single live option) and the US-defaulted country pair are
   hidden; package & service sections collapse behind the optional toggle.
   Restore together when international goes live. */
.calc-advanced-toggle { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; grid-column: 1 / -1; padding: 10px 12px; border: 1px dashed #cbd8e6; border-radius: 8px; background: #fbfdff; cursor: pointer; text-align: left; }
.calc-advanced-toggle strong { font-size: 13px; color: #0c2138; }
.calc-advanced-toggle span { font-size: 11.5px; color: #607287; font-weight: 700; }
.smart-quote-form.advanced-open .calc-advanced-toggle { border-style: solid; background: #eef6ff; }
.smart-quote-form:not(.advanced-open) .package-section,
.smart-quote-form:not(.advanced-open) .service-section { display: none; }
/* Scoped to the domestic phase rather than hidden outright. The note above says
   "restore together when international goes live", and leaving that as a manual
   step meant the country dropdown built on 2026-07-29 was display:none on every
   viewport — flipping the server flags would have changed nothing a customer
   could see. applyInternationalUi() now puts .intl-enabled on <body> from the
   same runtime flag that builds the options, so the two cannot fall out of step.
   With international off the form is exactly the layout approved on 22.07. */
body:not(.intl-enabled) .type-section { display: none; }
body:not(.intl-enabled) .route-section .grid-2 + .grid-2 { display: none; }
.calc-section.shipment-section, .calc-section.route-section { grid-column: 1 / -1 !important; }
.calc-noscale { display: none; }
.zip-field { display: grid; gap: 4px; }
.zip-field > span { font-size: 12.5px; font-weight: 800; color: #30465e; }
.calc-next-steps, .calc-why { display: none; }

/* Mobile ad-traffic compaction: 100% of paid clicks are phones — the form
   must be reachable without three screens of scrolling. Copy stays intact;
   secondary chrome (trust chips, step rail, flow cards) gets compact. */
@media (max-width: 520px) {
  /* Advanced-toggle, package/service collapse, type-section and country-pair
     hiding moved to the all-viewport block above (desktop mirrors mobile). */
  .product-source-toggle { grid-template-columns: 1fr 1fr !important; }
  .product-source-toggle span { display: none; }
  .product-source-toggle label { min-height: 42px; align-content: center; }
  .calc-form-actions .btn.block { min-height: 48px; font-size: 15px; }
  .calc-form-actions .btn.block::after { content: "\2192"; margin-left: 8px; }

  /* Panel order per the approved mobile mockup: step circles, centered
     headline, green reassurance line, form, then the two info blocks.
     Mode banner and the Parcel/Freight tab pair stay desktop-only. */
  .calc-panel { display: flex; flex-direction: column; }
  .calc-steps { order: 1; }
  .calc-head { order: 2; }
  .calc-status-row { order: 3; }
  .smart-quote-form { order: 4; }
  .calc-next-steps { order: 5; }
  .calc-why { order: 6; }
  .calc-disclaimer { order: 7; }
  .calc-mode-banner, .calc-flow-tabs, .calc-trust-strip { display: none !important; }

  .calc-head { justify-content: center; text-align: center; border-bottom: 0 !important; margin-bottom: 4px !important; padding-bottom: 0 !important; }
  .calc-head h1 { font-size: 24px !important; line-height: 1.2 !important; max-width: none; }
  .calc-head p { font-size: 13.5px !important; line-height: 1.45 !important; margin-bottom: 6px !important; }
  .calc-head p.small { display: none !important; }
  .calc-noscale { display: block !important; margin: 8px 0 0 !important; color: #178a4c !important; font-size: 14px !important; font-weight: 800; }
  .calc-noscale::before { content: "\2713"; margin-right: 7px; font-weight: 900; }
  .calc-status-row { justify-content: center; margin-bottom: 10px; }

  /* Step chips become numbered circles with the short ::after labels the
     page's inline 620px rules already provide (original text is font-size:0
     there — do not set a font-size on the span itself). */
  .calc-steps { position: static !important; gap: 0; margin: 2px 0 10px; padding: 0; border: 0; background: none; box-shadow: none; backdrop-filter: none; }
  .calc-steps span { flex-direction: column; gap: 4px; padding: 0; min-height: auto !important; background: none !important; box-shadow: none !important; color: #52657a !important; }
  .calc-steps span.is-active { background: none !important; box-shadow: none !important; color: #075cf7 !important; }
  .calc-steps span::before { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #e2e9f2; color: #52657a; font-size: 12px; font-weight: 900; }
  .calc-steps span.is-active::before { background: #075cf7; color: #fff; }
  .calc-steps [data-step="shipment"]::before { content: "1"; }
  .calc-steps [data-step="rate"]::before { content: "2"; }
  .calc-steps [data-step="pay"]::before { content: "3"; }
  .calc-steps [data-step="label"]::before { content: "4"; }

  .product-source-toggle label:has(input:checked) { background: #0b2744 !important; border-color: #0b2744 !important; }
  .product-source-toggle label:has(input:checked) strong { color: #fff !important; }
  .calc-status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

  .qty-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .qty-stepper { width: 58%; max-width: 210px; }
  .qty-stepper input { flex: 1 1 auto; width: auto; }

  .calc-next-steps, .calc-why { display: grid; gap: 10px; margin-top: 14px; padding: 14px; border-radius: 10px; background: #f4f7fb; }
  .calc-next-steps strong, .calc-why strong { text-align: center; font-size: 14px; color: #0c2138; }
  .calc-next-steps > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .calc-next-steps > div span { display: grid; gap: 6px; justify-items: center; text-align: center; font-size: 10.5px; line-height: 1.3; color: #52657a; font-weight: 700; }
  .calc-next-steps b { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #eef5ff; color: #075cf7; font-size: 12px; }
  .calc-why ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
  .calc-why li { position: relative; padding-left: 22px; font-size: 12.5px; font-weight: 700; color: #30465e; }
  .calc-why li::before { content: "\2713"; position: absolute; left: 0; color: #1a9c53; font-weight: 900; }

  .route-section .calc-section-title + .grid-2 { grid-template-columns: 1fr 1fr !important; }
}

/* Very narrow phones (320-360px): the runtime badge and sign-in chip push the
   form past 1.2 viewports — drop them there; the form itself explains the mode
   and sign-in stays available after the quote. */
@media (max-width: 360px) {
  .calc-status-row { display: none !important; }
  .calc-head p { font-size: 12.5px !important; }
}

/* Checkout compression (iteration 2, 22.07): Yes/No restricted gate and the
   single protection toggle. */
.dg-gate-question { font-weight: 800; color: #0c2138 !important; }
.dg-gate-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.dg-gate-options label { max-width: 100%; }
.dg-gate-options label { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid #cbd8e6; border-radius: 8px; font-weight: 700; font-size: 13px; color: #30465e; cursor: pointer; background: #fff; white-space: nowrap; min-width: 72px; justify-content: center; }
.dg-gate-options label:has(input:checked) { border-color: #075cf7; background: #eef5ff; color: #0c2138; }
.dg-gate-options input { width: auto !important; min-height: 0 !important; margin: 0; }
.protection-toggle input { width: auto !important; min-height: 0 !important; margin-top: 2px; }

/* Order summary: total-first, breakdown behind the arrow (owner 22.07). */
.order-summary-total[data-os-toggle] { cursor: pointer; }
.os-toggle { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-left: 4px; border-radius: 999px; background: var(--v4-soft-blue); font-size: 15px; color: var(--v4-blue); line-height: 1; }

/* Package summary on phones: five stats in a 2-col grid left the fifth
   (billable weight — the one that matters) dangling half-width; give it
   the full row. */
@media (max-width: 620px) {
  .calculator-page .smart-summary-grid div:last-child { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 8px; }
  .calculator-page .smart-summary-grid div:last-child strong { margin-top: 0; }
}

/* Rates-first results: telemetry folds under the rate list */
.calculator-page .quote-details-fold { margin: 12px 0 0; border: 1px solid #dbe5f0; border-radius: 10px; background: #fbfdff; }
.calculator-page .quote-details-fold > summary { cursor: pointer; padding: 11px 14px; font-size: 13px; font-weight: 700; color: #245fa8; list-style: none; }
.calculator-page .quote-details-fold > summary::before { content: "\25B8"; margin-right: 8px; transition: transform .15s; display: inline-block; }
.calculator-page .quote-details-fold[open] > summary::before { transform: rotate(90deg); }
.calculator-page .quote-details-fold > summary::-webkit-details-marker { display: none; }
.calculator-page .quote-details-fold[open] { padding-bottom: 12px; }
.calculator-page .quote-details-fold[open] > *:not(summary) { margin-left: 12px; margin-right: 12px; }
.calculator-page .quote-details-fold .smart-summary-grid { position: static !important; }

/* Post-rate-pick scroll must clear the sticky header: land with the
   section heading visible, not buried under the topbar. */
.calculator-page .smart-checkout-grid { scroll-margin-top: 132px; }
.calculator-page .package-confirm { scroll-margin-top: 132px; }

/* iOS flashes a dark horizontal scroll indicator for the scrollable top nav
   on every page scroll (looks like a stray bar mid-screen). Hide the bar,
   keep the scrolling. */
.calculator-page .nav-menu { scrollbar-width: none; -ms-overflow-style: none; }
.calculator-page .nav-menu::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Mobile: kill every inner scroll indicator - Safari flashes them at the
   visible bottom edge of any scrollable container on each scroll/keyboard
   resize, which reads as a stray dark bar over the form. Touch scrolling
   itself is unaffected; the page-level indicator stays (native overlay). */
@media (max-width: 768px) {
  .calculator-page *::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .calculator-page * { scrollbar-width: none; -ms-overflow-style: none; }
}

/* The calculator body is its own scroll container (overflow:auto), so WebKit
   draws ELEMENT scrollbars for it - including a horizontal indicator hovering
   above the keyboard whenever any child leaves a few px of sideways slack.
   Kill the sideways slack and the body-level indicators themselves; vertical
   touch scrolling is untouched. */
body.calculator-page { overflow-x: hidden !important; }
@media (max-width: 768px) {
  body.calculator-page { scrollbar-width: none; -ms-overflow-style: none; }
  body.calculator-page::-webkit-scrollbar { display: none; width: 0; height: 0; }
}

/* Estimate accuracy signal — status lamp (mockup 1b): a small colored dot,
   one short line, quiet inline actions. Color never carries the meaning
   alone — the lamp, the bold label and the words repeat the message. */
.calculator-page .estimate-signal { margin: 10px 0 0; font-size: 12px; line-height: 1.45; }
.calculator-page .estimate-signal-row { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.calculator-page .estimate-lamp { width: 8px; height: 8px; border-radius: 50%; flex: none; align-self: flex-start; margin-top: 5px; background: #9fb2c4; }
.calculator-page .signal-green .estimate-lamp { background: #0e8a3e; box-shadow: 0 0 0 3px rgba(14,138,62,.14); }
.calculator-page .signal-amber .estimate-lamp { background: #e8a13c; box-shadow: 0 0 0 3px rgba(232,161,60,.16); }
.calculator-page .signal-red .estimate-lamp { background: #d23c2a; box-shadow: 0 0 0 3px rgba(210,60,42,.14); }
.calculator-page .estimate-signal-msg { color: #3f5568; min-width: 0; }
.calculator-page .signal-green .estimate-signal-msg strong { color: #0e8a3e; }
.calculator-page .signal-amber .estimate-signal-msg strong { color: #8a5f0a; }
.calculator-page .signal-red .estimate-signal-msg strong { color: #a92e1f; }
.calculator-page .estimate-signal-link { font-size: 11px; color: #6b8199; text-decoration: underline; text-underline-offset: 2px; }
.calculator-page .estimate-signal-link:hover { color: #245fa8; }
.calculator-page .estimate-signal-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; margin: 3px 0 0 16px; }
.calculator-page .estimate-action { border: none; background: none; padding: 0; font-size: 12px; font-weight: 700; color: #075cf7; cursor: pointer; text-decoration: underline; text-decoration-color: rgba(7,92,247,.35); text-underline-offset: 2px; }
.calculator-page .estimate-action:hover { text-decoration-color: #075cf7; }
.calculator-page .estimate-action-sep { color: #c3d3e2; }
.calculator-page .package-confirm.adjust-highlight { outline: 2px solid #245fa8; outline-offset: 2px; transition: outline-color .3s; }
@media (max-width: 620px) {
  .calculator-page .estimate-signal-actions { gap: 10px; }
  .calculator-page .estimate-action { min-height: 34px; }
}


/* Package card leads the result: signal + numbers + edit in one place */
.calculator-page .package-confirm-lead { margin: 0 0 12px; border-width: 2px; }
.calculator-page .package-confirm-lead .estimate-signal { margin: 0 0 10px; }
.calculator-page .package-confirm-lead .package-confirm-head strong { font-size: 15px; }

/* ------------------------------------------------------------------ */
/* v5 stepper (owner decision 2026-08-10): one column, one screen per  */
/* step. This block loads last on purpose — everything above styles a  */
/* two-column layout that no longer exists, and the !important flags   */
/* here are what let the new layout win without rewriting the file.    */
/* ------------------------------------------------------------------ */
.calc-shell {
  width: min(880px, calc(100% - 32px)) !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  padding: 18px 0 34px !important;
}
.calc-output {
  position: static !important;
  top: auto !important;
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
}
.calc-stepbar {
  position: sticky;
  top: 86px;
  z-index: 30;
  display: flex !important;
  align-items: center;
  gap: 14px;
  border: 1px solid #d9e5f2;
  border-radius: 11px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 10px 24px rgba(18, 48, 90, .08);
  backdrop-filter: blur(12px);
  padding: 8px 12px;
}
.calc-stepbar .calc-steps {
  position: static !important;
  top: auto !important;
  flex: 1;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.calc-steps span.is-reached { cursor: pointer; }
.calc-steps span.is-done:not(.is-active) {
  background: #e6f2ea !important;
  color: #1d6b34 !important;
}
.calc-steps span.is-reached:not(.is-active):hover { background: #d7ecdd !important; }
.calc-steps span.is-done:not(.is-active)::before {
  content: "\2713";
  margin-right: 5px;
  font-weight: 900;
}
@media (max-width: 620px) {
  .calc-shell { width: calc(100% - 16px) !important; }
  .calc-stepbar { top: 58px; flex-wrap: wrap; gap: 8px; padding: 7px 9px; }
  .calc-stepbar-title { display: none; }
  .calc-stepbar .calc-steps { flex: 1 1 100%; order: 2; }
  .calc-stepbar-tools { margin-left: auto; order: 1; }
}
/* display:block above would beat the inline step rule without this. */
@media (min-width: 621px) {
  body.vstep-shipment .calc-output { display: none !important; }
  body.vstep-rate .calc-panel,
  body.vstep-pay .calc-panel,
  body.vstep-label .calc-panel { display: none !important; }
}

/* v5.1 wide screens (owner request 2026-08-10): stretch each step across the
   width so more fits above the fold. Column layouts are gated on :has() of a
   block that only the normal parcel path renders, so freight/blocked verdicts
   keep the plain single column. */
.calc-shell { width: min(1240px, calc(100% - 48px)) !important; }
@media (min-width: 900px) {
  /* Shipment: the two halves of the form side by side again (the v4 skin
     forced them full-width for the old narrow column). */
  .calc-section.shipment-section { grid-column: span 7 !important; }
  .calc-section.route-section { grid-column: span 5 !important; }

  /* Select rate (mockup 1b): one centered column — screen head, then the
     route/package context cards side by side, then the full-width rate list.
     The old side/main grid is gone with the sidebar it laid out. */

  /* Secure payment (owner call 2026-08-11): one full-width column — policy
     note, then the order-summary bar, then Shipping Protection, then the
     sender/recipient forms. No side rail. */
}

/* ------------------------------------------------------------------ */
/* v5.2 rate screen (owner mockup pick 2026-08-11, variant 1b screen  */
/* 2): centered head, route+package context cards, one-row-per-rate   */
/* list, lock line, sticky selected-service bar. Base layer for all   */
/* widths; the booking skin adds the desktop polish on top.           */
/* ------------------------------------------------------------------ */

/* Screen head */
.calculator-page .rate-screen-head { text-align: center; margin: 2px 0 14px; }
.calculator-page .rate-screen-head .rate-choose-heading { display: block; font-size: 26px; line-height: 1.15; color: #0c2138; letter-spacing: -.4px; }
.calculator-page .rate-screen-head .rate-choose-sub { margin: 6px 0 0; font-size: 13px; color: #5b6f84; }
.calculator-page .rate-screen-head .rate-counter-anchor { margin: 8px 0 0; font-size: 12px; color: #4b5c72; }

/* Context cards: route + package share one anatomy */
.calculator-page .rate-context-row { display: grid; gap: 10px; margin: 0 0 14px; align-items: stretch; }
@media (min-width: 900px) { .calculator-page .rate-context-row { grid-template-columns: minmax(260px, 5fr) minmax(0, 7fr); gap: 14px; } }
.calculator-page .ctx-card { position: relative; display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 14px 16px; border: 1.5px solid #d9e4ef; border-radius: 14px; background: #fff; }
.calculator-page .ctx-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: #eef4fd; }
.calculator-page .ctx-icon svg { width: 20px; height: 20px; }
.calculator-page .ctx-body { min-width: 0; flex: 1 1 auto; display: grid; gap: 2px; }
.calculator-page .ctx-kicker { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #6a7c90; }
.calculator-page .ctx-value { font-size: 15.5px; font-weight: 800; color: #0c2138; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.calculator-page .ctx-arrow { width: 15px; height: 15px; color: #075cf7; flex: none; }
.calculator-page .ctx-sub { font-size: 12px; color: #5b6f84; }
.calculator-page .ctx-edit { flex: 0 0 auto; border: 1.5px solid #d9e4ef; background: #fff; color: #0c2138; border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 800; cursor: pointer; transition: background .16s, color .16s, border-color .16s; }
.calculator-page .ctx-edit:hover { background: #075cf7; border-color: #075cf7; color: #fff; }
.calculator-page .est-chip { display: inline-block; border-radius: 999px; padding: 1px 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; background: #fdf3e2; color: #8a5f0a; border: 1px solid #f3ddb2; }
.calculator-page .package-confirm.ctx-card { border-width: 1.5px; scroll-margin-top: 132px; }
.calculator-page .package-confirm.ctx-card .estimate-signal { margin: 4px 0 0; }
.calculator-page .package-confirm.ctx-card .package-adjust-fields { flex: 1 1 100%; order: 10; margin-top: 10px; }

/* Rate rows */
.calculator-page .rate-pick { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #c6d4e2; background: #fff; color: #fff; transition: background .16s, border-color .16s; }
.calculator-page .rate-pick svg { width: 12px; height: 12px; opacity: 0; transform: scale(.5); transition: opacity .16s, transform .16s; }
.calculator-page .rate-card input:checked + .rate-card-body .rate-pick { background: #075cf7; border-color: #075cf7; }
.calculator-page .rate-card input:checked + .rate-card-body .rate-pick svg { opacity: 1; transform: scale(1); }
.calculator-page .rate-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.calculator-page .rate-name-row strong { font-size: 14.5px; color: #0c2138; }
.calculator-page .rate-fact { font-size: 12px; color: #5b6f84; }
.calculator-page .rate-badge-fastest { background: #fdeee7; color: #b4340a; border-color: #f7d2c2; }
/* Delivery reads as ONE line — "Get it by Wed, Aug 12 (est.) · 2-3 business
   days" — never a stack (owner call 2026-08-11). The base site sheet turns
   every .smart-rate-choice span into a grid (which blockifies strong/em into
   stacked rows), so the display here must be explicit. */
.calculator-page .rate-card-when { display: flex; align-items: baseline; gap: 5px; flex: 0 0 auto; white-space: nowrap; }
.calculator-page .rate-when-date { display: inline; font-size: 12.5px; color: #33475f; white-space: nowrap; }
.calculator-page .rate-when-date strong { display: inline; color: #0c2138; }
.calculator-page .rate-when-date em { display: inline; font-style: normal; font-size: 10.5px; color: #8794a4; }
.calculator-page .rate-when-window { display: inline; font-size: 11.5px; color: #5b6f84; white-space: nowrap; }
.calculator-page .rate-when-window::before { content: "\00B7\00A0"; color: #8794a4; }

/* Lock line */
.calculator-page .rate-lock-line { display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; margin: 12px 0 0; font-size: 12px; color: #4a5d72; }
.calculator-page .rate-lock-line svg { width: 14px; height: 14px; color: #6a7c90; flex: none; }
.calculator-page .rate-lock-line strong { color: #33475f; }

/* Sticky selected-service bar */
.calculator-page .rate-continue-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; border: 1.5px solid #d9e4ef; border-radius: 14px; background: #fff; box-shadow: 0 -10px 30px rgba(18, 39, 66, .10), 0 14px 30px rgba(18, 39, 66, .08); padding: 12px 14px; }
.calculator-page .rate-continue-info { display: grid; gap: 2px; min-width: 0; flex: 1 1 220px; }
.calculator-page .rate-continue-info small { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #6a7c90; }
.calculator-page .rci-line { font-size: 13.5px; color: #33475f; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.calculator-page .rci-line strong { color: #0c2138; }
.calculator-page .rci-meta { font-size: 12px; color: #5b6f84; }
.calculator-page .rci-save { font-style: normal; font-weight: 800; color: #0b7a3e; }
.calculator-page .rate-continue-bar .btn { flex: 0 0 auto; width: auto; min-width: 240px; }
@media (max-width: 620px) {
  /* The sticky continue bar is a desktop-steps control. The base rule above
     (specificity 0,2,0) was beating the page's inline phone hide (0,1,0) —
     on phones the bar rendered anyway and its tap jumped to a desktop step
     that phones never show (QA find 2026-08-11). */
  .calculator-page .rate-continue-bar { display: none !important; }
  .calculator-page .ctx-card { flex-wrap: wrap; }
  .calculator-page .ctx-edit { position: absolute; top: 12px; right: 12px; }
  /* Phone: the delivery line drops under the name and may wrap — nowrap on
     the two halves made them overlap-print inside the squeezed flex row */
  .calculator-page .rate-card-when { flex: 1 1 100%; order: 5; white-space: normal; }
  .calculator-page .rate-when-date, .calculator-page .rate-when-window { white-space: normal; }
}

/* ------------------------------------------------------------------ */
/* v5.3 payment screen (owner call 2026-08-11): the order summary is a */
/* full-width bar right after the policy note — Total chip opens the   */
/* price breakdown, savings vs the Post Office counter read green.     */
/* ------------------------------------------------------------------ */
.calculator-page .order-summary-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; }
.calculator-page .order-summary-bar .order-summary-title { margin: 0; font-size: 15px; color: #0c2138; }
.calculator-page .order-summary-total-chip { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid #d9e4ef; border-radius: 999px; background: #fff; padding: 8px 16px; font-size: 13.5px; font-weight: 800; color: #33475f; cursor: pointer; transition: border-color .16s, box-shadow .16s; }
.calculator-page .order-summary-total-chip:hover { border-color: #075cf7; box-shadow: 0 0 0 3px rgba(7, 92, 247, .12); }
.calculator-page .order-summary-total-chip strong { font-size: 17px; color: #0b7a3e; }
.calculator-page .order-summary-total-chip .os-toggle { color: #6a7c90; }
.calculator-page .os-saving { margin: 0; font-size: 13.5px; font-weight: 800; color: #0e8a3e; }
.calculator-page .os-note { margin: 0 0 0 auto; font-size: 11.5px; color: #6a7c90; max-width: 380px; }
.calculator-page .os-breakdown { margin: 12px 0 0; border-top: 1px dashed #d9e4ef; padding-top: 12px; }
@media (max-width: 620px) {
  .calculator-page .os-note { margin-left: 0; max-width: none; }
}

/* v5.4 mobile chrome (QA finds 2026-08-11): the two-row phone header is not
   sticky — it stacked under the 58px-anchored stepbar and together they ate
   ~180px of a 844px screen, hiding the top of whatever a tap scrolled to.
   Static header, stepbar owns the top edge, scroll anchors follow. */
@media (max-width: 620px) {
  .calculator-page .header { position: static !important; }
  .calc-stepbar { top: 0 !important; }
  .calculator-page .package-confirm { scroll-margin-top: 108px !important; }
}
/* Landscape phones and narrow desktop windows: the one-row stepbar's
   min-content (title + 4 steps + tools) is ~910px — let it wrap instead of
   widening the layout viewport into a sideways pan. */
@media (min-width: 621px) and (max-width: 1023px) {
  .calc-stepbar { flex-wrap: wrap; }
}