/* ============================================================================
   SHIPIFY — css/rates.css
   Owned by the RATES-PAGE cell. Loads after tokens.css + shared.css.
   Every colour and every length resolves to a token. Nothing ad-hoc.

   The page is a print shop counter: a provenance receipt, a calculator that
   re-prints its label on every keystroke, a rate sheet that feeds out of the
   printer, and a split-bar showing exactly which cent is ours.
   ========================================================================== */

:root {
  --rt-hair: rgb(var(--sy-shadow) / .18);
  --rt-hair-strong: rgb(var(--sy-shadow) / .34);
  --rt-lift: 0 14px 30px -26px rgb(var(--sy-shadow) / .95);
}

/* ================================================================ masthead */
.rt-masthead { padding-top: var(--sp-600); }

.rt-masthead__grid {
  display: grid;
  gap: clamp(var(--sp-400), 5vw, var(--sp-800));
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 980px) {
  .rt-masthead__grid { grid-template-columns: 1.25fr .75fr; }
}

.rt-masthead__grid > *,
.rt-calc__grid > *,
.rt-markup__grid > * { min-width: 0; }

.rt-masthead__copy > * + * { margin-top: var(--sp-300); }
.rt-masthead__lede { max-width: 46ch; }
.rt-masthead__jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-200);
  align-items: center;
  margin: 0;
}

/* the provenance receipt — same grammar as a label, narrower stock */
.rt-receipt {
  position: relative;
  background: var(--sy-stock);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 1px 0 var(--line), var(--rt-lift);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.rt-receipt::after {
  content: "";
  position: absolute;
  left: -2px; right: -2px; bottom: -2px;
  height: 12px;
  background-image: radial-gradient(circle at 50% 100%, var(--bg) 0 5px, transparent 5.5px);
  background-size: 14px 12px;
  background-repeat: repeat-x;
  pointer-events: none;
}
.rt-receipt__band {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-100);
  padding: var(--sp-150) var(--sp-200);
  background: var(--line);
  color: var(--bg);
}
.rt-receipt__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
}
.rt-receipt__sub {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kraft);
}
.rt-receipt__sub.is-good { color: var(--bg); }

.rt-receipt__lines { margin: 0; padding: var(--sp-200) var(--sp-200) var(--sp-100); }
.rt-receipt__line {
  display: flex;
  align-items: baseline;
  gap: var(--sp-100);
  padding-block: var(--sp-050);
}
.rt-receipt__line::before {
  content: "";
  order: 2;
  flex: 1 1 auto;
  align-self: center;
  height: 0;
  border-bottom: 2px dotted var(--rt-hair-strong);
  transform: translateY(2px);
}
.rt-receipt__line dt {
  order: 1;
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.rt-receipt__line dd {
  order: 3;
  flex: 0 0 auto;
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.rt-sources { margin: 0 var(--sp-200) var(--sp-400); }
.rt-sources > summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding-block: var(--sp-100);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
}
.rt-sources > summary:hover { color: var(--ink); }
.rt-sources__list {
  margin: var(--sp-100) 0 0;
  padding: 0;
  list-style: none;
  border-top: 2px dotted var(--rt-hair-strong);
}
.rt-sources__list li + li { border-top: 1px solid var(--rt-hair); }
.rt-sources__list a {
  display: block;
  min-height: 44px;
  padding-block: var(--sp-150);
  font-size: var(--fs-xs);
  line-height: 1.5;
  word-break: break-word;
  color: var(--ink-muted);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.rt-sources__list a:hover { color: var(--ink); }

/* -------------------------------------------- sample / dead-data notices */
.rt-sample,
.rt-dead {
  margin-top: var(--sp-400);
  padding: var(--sp-300);
  background: var(--surface);
  border: 2px solid var(--line);
  border-left-width: 6px;
  border-left-color: var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.rt-sample { font-family: var(--font-mono); font-size: var(--fs-sm); }
.rt-dead {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-300);
  align-items: flex-start;
}
.rt-dead__zip { width: 72px; }
.rt-dead p { margin-top: var(--sp-100); max-width: 56ch; }

/* body-level lockout when the table is missing: hide anything numeric */
body.rt-nodata .rt-calc__grid,
body.rt-nodata #tables,
body.rt-nodata #markup,
body.rt-nodata .rt-receipt,
body.rt-nodata .rt-masthead__jump { display: none; }

/* scripting off: shared.js never stamps html.sy-js, so the data-driven
   surfaces never render as empty shells. The <noscript> blocks explain. */
html:not(.sy-js) .rt-needs-js { display: none; }

/* ============================================================== the heads */
.rt-head { max-width: 62ch; margin-bottom: var(--sp-600); }
.rt-head .sy-lede { margin-top: var(--sp-200); }

.rt-noscript { margin-bottom: var(--sp-400); }

/* ============================================================ calculator */
.rt-calc__grid {
  display: grid;
  gap: clamp(var(--sp-400), 4vw, var(--sp-600));
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .rt-calc__grid { grid-template-columns: 1.05fr .95fr; }
}

.rt-form { padding: clamp(var(--sp-300), 3vw, var(--sp-400)); }
.rt-fieldset { margin: 0; padding: 0; border: 0; }
.rt-fieldset + .rt-fieldset {
  margin-top: var(--sp-400);
  padding-top: var(--sp-400);
  border-top: 2px dotted var(--rt-hair-strong);
}
.rt-fieldset > legend { padding: 0; }

/* ---- service picker: two stock cards, one gets the ink ---- */
.rt-services {
  display: grid;
  gap: var(--sp-150);
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
}
.rt-svc {
  display: block;
  position: relative;
  padding: var(--sp-200);
  padding-left: var(--sp-600);
  background: var(--bg);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background-color var(--dur-quick) linear, box-shadow var(--dur-quick) linear;
}
.rt-svc:hover { background: var(--surface); }
.rt-svc::before {
  content: "";
  position: absolute;
  left: var(--sp-200);
  top: var(--sp-200);
  width: 24px; height: 24px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--sy-stock);
}
.rt-svc::after {
  content: "";
  position: absolute;
  left: calc(var(--sp-200) + 6px);
  top: calc(var(--sp-200) + 6px);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
  transition: transform var(--dur-quick) var(--ease-stamp);
}
.rt-svc__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.2;
}
.rt-svc__meta {
  display: block;
  margin-top: var(--sp-050);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  color: var(--ink-muted);
}
.rt-services input:checked + .rt-svc {
  background: var(--sy-stock);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.rt-services input:checked + .rt-svc::after { transform: scale(1); }
.rt-services input:focus-visible + .rt-svc {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* ---- weight ---- */
.rt-weight { display: flex; gap: var(--sp-100); align-items: stretch; }
.rt-weight__num { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.rt-weight__unit { flex: 0 0 auto; width: 104px; }

.rt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-100);
  margin-top: var(--sp-150);
}
.rt-chip {
  min-height: 48px;
  padding: var(--sp-100) var(--sp-200);
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background-color var(--dur-quick) linear, color var(--dur-quick) linear;
}
.rt-chip:hover { background: var(--kraft); }
.rt-chip[aria-pressed="true"] {
  background: var(--line);
  border-color: var(--line);
  color: var(--bg);
}

/* ---- zone explainer ---- */
.rt-explain {
  margin-top: var(--sp-200);
  border: 2px solid var(--rt-hair-strong);
  border-radius: var(--r-md);
  background: var(--bg);
}
.rt-explain > summary {
  padding: var(--sp-150) var(--sp-200);
  min-height: 48px;
  display: flex;
  gap: var(--sp-150);
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.rt-explain > summary::-webkit-details-marker { display: none; }
/* display:flex removes the native marker, so we draw our own */
.rt-explain > summary::before {
  content: "+";
  flex: 0 0 auto;
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-weight: 700;
  line-height: 1;
}
.rt-explain[open] > summary::before { content: "–"; }
.rt-explain[open] > summary { border-bottom: 2px dotted var(--rt-hair-strong); }
.rt-explain__body { padding: var(--sp-200); font-size: var(--fs-sm); }
.rt-explain__body p { max-width: 54ch; }

.rt-zonelist { margin: var(--sp-200) 0 0; padding: 0; list-style: none; }
.rt-zonelist li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-050) var(--sp-150);
  align-items: baseline;
  padding-block: var(--sp-100);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  border-top: 1px solid var(--rt-hair);
}
.rt-zonelist li:first-child { border-top: 0; }
.rt-zonelist b {
  flex: 0 0 auto;
  min-width: 6.5em;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.rt-zonelist span { color: var(--ink-muted); }

/* ---- the printout column ---- */
@media (min-width: 900px) {
  .rt-out__stick { position: sticky; top: calc(var(--sy-nav-h) + var(--sp-300)); }
}
.rt-quote__note {
  margin: var(--sp-200) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink-muted);
}
.rt-quote__note:empty { display: none; }

.rt-warn {
  display: flex;
  gap: var(--sp-150);
  align-items: flex-start;
  margin-top: var(--sp-200);
  padding: var(--sp-200);
  background: var(--surface);
  border: 2px solid var(--line);
  border-left-width: 6px;
  border-left-color: var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.rt-warn strong { display: block; color: var(--sy-ink-danger); }
.rt-warn__mark {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border: 2px solid var(--accent);
  border-radius: var(--r-sm);
  color: var(--sy-ink-danger);
  font-family: var(--font-display);
  font-weight: 700;
}

.rt-out__actions { margin: var(--sp-300) 0 0; }

/* ============================================================ rate sheet */
.rt-controls { margin-bottom: var(--sp-400); }
.rt-controls__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-300);
  align-items: flex-end;
  margin-top: var(--sp-300);
}

/* service tabs — two strips of label stock */
.rt-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  background: var(--sy-stock);
  overflow: hidden;
}
.rt-tab {
  min-height: 48px;
  padding: var(--sp-100) var(--sp-300);
  background: transparent;
  color: var(--ink);
  border: 0;
  border-right: 2px solid var(--line);
  border-radius: 0;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur-quick) linear, color var(--dur-quick) linear;
}
.rt-tab:last-child { border-right: 0; }
.rt-tab:hover { background: var(--surface); }
.rt-tab[aria-selected="true"] {
  background: var(--line);
  color: var(--bg);
  font-weight: 600;
}
.rt-tab:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }

/* axis segmented control */
.rt-axis {
  display: inline-flex;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  background: var(--sy-stock);
  overflow: hidden;
}
.rt-axis label {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  padding: var(--sp-100) var(--sp-200);
  border-right: 2px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background-color var(--dur-quick) linear, color var(--dur-quick) linear;
}
.rt-axis label:last-of-type { border-right: 0; }
.rt-axis label:hover { background: var(--surface); }
.rt-axis input:checked + label { background: var(--line); color: var(--bg); }
.rt-axis input:focus-visible + label { outline: 3px solid var(--ink); outline-offset: -3px; }

.rt-fixed { min-width: 224px; }
.rt-fixed .sy-field__label { margin-bottom: var(--sp-050); }

/* the sheet itself */
.rt-sheet {
  position: relative;
  margin: 0;
  background: var(--sy-stock);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 1px 0 var(--line), var(--rt-lift);
  overflow: hidden;
}
.rt-sheet__band {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-100) var(--sp-200);
  padding: var(--sp-200);
  background: var(--line);
  color: var(--bg);
}
.rt-sheet__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
}
.rt-sheet__sub {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kraft);
}

/* the table region scrolls, the sheet does not */
.rt-sheet__scroll {
  border: 0;
  border-radius: 0;
  max-height: min(70vh, 720px);
}
.rt-sheet__scroll:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }

.rt-table caption { border-bottom: 0; padding: 0; }
.rt-table th, .rt-table td { padding: var(--sp-150) var(--sp-200); }
.rt-table thead th { z-index: 2; }

/* first column holds context while the rest scrolls sideways */
.rt-table th[scope="row"],
.rt-table thead th:first-child {
  position: sticky;
  left: 0;
  text-align: left;
  font-weight: 700;
}
.rt-table thead th:first-child { z-index: 3; }
.rt-table th[scope="row"] {
  z-index: 1;
  background: var(--sy-stock);
  border-right: 2px solid var(--rt-hair-strong);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.rt-table tbody tr:nth-child(even) th[scope="row"] { background: var(--bg); }
.rt-table tbody tr:hover th[scope="row"] { background: var(--surface); }

.rt-table td { font-variant-numeric: tabular-nums; }
.rt-table .rt-col-retail { color: var(--ink-muted); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--accent); }
.rt-table .rt-col-keep { font-weight: 700; }
.rt-table .rt-col-pct { color: var(--ink-muted); }

/* the row you just priced */
.rt-table tbody tr.is-quoted th[scope="row"],
.rt-table tbody tr.is-quoted td { background: var(--kraft); }
.rt-table tbody tr.is-quoted { box-shadow: inset 3px 0 0 var(--accent); }
/* This caption is the only thing telling you which row is yours, and it sits on
   kraft — where --sy-ink-danger falls to 4.15:1. --sy-ink-deep clears AA (5.4:1)
   and holds at --fs-sm rather than 10.2px. */
.rt-table tbody tr.is-quoted th[scope="row"]::after {
  content: "your quote";
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sy-ink-deep);
}

/* rows where the counter beats us */
.rt-table tbody tr.is-worse .rt-col-keep { color: var(--sy-ink-danger); }
/* when the quoted row is also the losing row its cells go kraft — same fix */
.rt-table tbody tr.is-quoted.is-worse .rt-col-keep { color: var(--sy-ink-deep); }
.rt-table tbody tr.is-worse th[scope="row"] { box-shadow: inset 3px 0 0 var(--sy-ink-danger); }

.rt-sheet__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-200);
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-200);
  border-top: 2px solid var(--line);
  background: var(--bg);
}
.rt-sheet__note { max-width: 62ch; margin: 0; }
.rt-sheet__code { width: 168px; color: var(--ink); opacity: .75; }
.rt-sheet__code .sy-barcode { height: 26px; }

.rt-sheet__hint {
  display: block;
  margin-top: var(--sp-100);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sy-ink-danger);
}

.rt-tables__after { margin-top: var(--sp-300); max-width: 72ch; }
.rt-tables__after:empty { display: none; }

/* the sheet feeds out of the printer — opacity + a hot bar, never a clip,
   because the table header is position:sticky and a clip would break it */
.rt-feed { opacity: .001; }
.rt-feed.is-fed { opacity: 1; animation: rt-feed var(--dur-print) var(--ease-print) both; }
.rt-feed.is-fed::before {
  content: "";
  position: absolute;
  z-index: 5;
  left: 0; right: 0; top: 0;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent-bright) 20%, var(--sy-stock) 50%, var(--accent-bright) 80%, transparent);
  animation: rt-feedhead var(--dur-print) var(--ease-print) both;
}
@keyframes rt-feed {
  0%   { opacity: .4; filter: contrast(1.3) saturate(.5); }
  100% { opacity: 1;  filter: none; }
}
@keyframes rt-feedhead {
  0%   { top: 0;    opacity: 0; }
  12%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
@media (scripting: none) { .rt-feed { opacity: 1; } }

/* ================================================================ markup */
.rt-markup__grid {
  display: grid;
  gap: clamp(var(--sp-400), 5vw, var(--sp-800));
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .rt-markup__grid { grid-template-columns: .95fr 1.05fr; }
}

.rt-splitcard {
  background: var(--sy-stock);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 1px 0 var(--line), var(--rt-lift);
  overflow: hidden;
}
.rt-splitcard__band {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-100);
  padding: var(--sp-150) var(--sp-200);
  background: var(--line);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.rt-splitcard__body { padding: var(--sp-300) var(--sp-200) var(--sp-200); }

.rt-splitcard__pay {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-200);
  padding-bottom: var(--sp-200);
}
.rt-splitcard__paylabel {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.rt-splitcard__payvalue {
  font-family: var(--font-mono);
  font-size: var(--fs-2xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--accent);
}

.rt-bar {
  display: flex;
  height: 40px;
  border: 2px solid var(--line);
  border-radius: var(--r-none);
  overflow: hidden;
}
.rt-bar__seg { display: block; min-width: 6px; }
.rt-bar__seg--usps {
  background: var(--kraft);
  background-image: repeating-linear-gradient(135deg, rgb(var(--sy-shadow) / .12) 0 4px, transparent 4px 10px);
  border-right: 2px solid var(--line);
}
.rt-bar__seg--sy { background: var(--accent); }

.rt-bar__legend { margin: var(--sp-200) 0 0; padding: 0; list-style: none; }
.rt-bar__legend li {
  display: flex;
  gap: var(--sp-150);
  align-items: baseline;
  padding-block: var(--sp-100);
  border-top: 1px solid var(--rt-hair);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.rt-bar__legend li:first-child { border-top: 0; }
.rt-bar__key {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  align-self: center;
  border: 2px solid var(--line);
  border-radius: var(--r-none);
}
.rt-bar__key--usps { background: var(--kraft); }
.rt-bar__key--sy { background: var(--accent); }
.rt-bar__who { flex: 1 1 auto; }
.rt-bar__amt { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.rt-bar__note {
  margin: var(--sp-200) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink-muted);
}

/* the three hard facts, as tape */
.rt-facts { display: flex; flex-wrap: wrap; gap: var(--sp-300) var(--sp-400); }
.rt-fact { min-width: 144px; }
.rt-fact__v {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-2xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--ink);
}
.rt-fact__k {
  display: block;
  margin-top: var(--sp-100);
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--ink-muted);
  max-width: 24ch;
}

.rt-list { margin: var(--sp-200) 0 0; padding: 0; list-style: none; max-width: 60ch; }
.rt-list li {
  position: relative;
  padding: var(--sp-100) 0 var(--sp-100) var(--sp-400);
  border-top: 1px solid var(--rt-hair);
}
.rt-list li:first-child { border-top: 0; }
.rt-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--sp-100) + 12px);
  width: 24px; height: 4px;
  background: var(--accent);
}

/* ---- the block where we admit we lose ---- */
.rt-honest {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-400);
  align-items: flex-start;
  margin-top: clamp(var(--sp-600), 7vw, var(--sp-1200));
  padding: clamp(var(--sp-300), 4vw, var(--sp-600));
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
}
.rt-honest__zip { width: clamp(96px, 14vw, 144px); }
.rt-honest__body { flex: 1 1 min(420px, 100%); min-width: 0; }
.rt-honest__body > * + * { margin-top: var(--sp-200); }

.rt-cheaper:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.rt-cheaper {
  overflow-x: auto;
  background: var(--sy-stock);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  -webkit-overflow-scrolling: touch;
}
.rt-cheaper table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.rt-cheaper th, .rt-cheaper td { padding: var(--sp-100) var(--sp-200); text-align: right; white-space: nowrap; }
.rt-cheaper th:first-child, .rt-cheaper td:first-child { text-align: left; }
.rt-cheaper thead th {
  background: var(--line);
  color: var(--bg);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.rt-cheaper tbody tr + tr { border-top: 1px solid var(--rt-hair); }
.rt-cheaper .rt-col-gap { color: var(--sy-ink-danger); font-weight: 700; }

.rt-disclaimer {
  margin-top: var(--sp-600);
  padding-top: var(--sp-300);
  border-top: 2px dotted var(--rt-hair-strong);
  max-width: 78ch;
}
.rt-disclaimer:empty { display: none; }

/* =================================================================== cta */
.rt-cta__card {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(var(--sp-300), 4vw, var(--sp-600));
  align-items: center;
  padding: clamp(var(--sp-400), 5vw, var(--sp-800));
  background: var(--kraft);
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 0 var(--line);
}
.rt-cta__zip { width: clamp(120px, 18vw, 200px); }
.rt-cta__copy { flex: 1 1 min(440px, 100%); min-width: 0; }
.rt-cta__copy > * + * { margin-top: var(--sp-300); }
.rt-cta__copy .sy-lede { color: var(--ink); }

/* ======================================================= reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rt-feed { opacity: 1; }
  .rt-feed.is-fed { animation: none; filter: none; }
  .rt-feed.is-fed::before { display: none; }
  .rt-svc::after { transition: none; }
}

/* ================================================================ print */
@media print {
  .rt-out__actions,
  .rt-explain,
  .rt-sources,
  .rt-controls,
  .rt-cta { display: none !important; }
  .rt-feed { opacity: 1 !important; animation: none !important; }
  .rt-sheet__scroll { max-height: none; overflow: visible; }
  .rt-sheet, .rt-receipt, .rt-splitcard { box-shadow: none; }
}