/* Upstream fix offer. Builds on the shared offer layout in brand/components.css. */
.upstream-main .hero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--wp-16); align-items: center; padding-top: var(--wp-12); padding-bottom: var(--wp-16); }
.upstream-main .hero-copy { display: grid; gap: var(--wp-6); }
.upstream-main .hero-copy h1 { max-width: 15ch; }
.upstream-main .lede b { font-weight: 600; color: var(--wp-ink); }
/* The address stays visible under the mailto button, for visitors whose browser has no mail app. */
.upstream-main .actions .via { order: 1; flex-basis: 100%; margin: calc(-1 * var(--wp-2)) 0 0; color: var(--wp-muted); font-size: 1rem; line-height: 1.45; text-wrap: pretty; }

/* The bill: every step owes $0 until the merge, then the path splits into the two outcomes. */
.upstream-main .bill-steps { list-style: none; margin: 0; padding: 0; }
.upstream-main .bill-steps li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: var(--wp-3); align-items: baseline; padding: var(--wp-3) var(--wp-4); border-bottom: var(--wp-rule) solid var(--wp-hair); font-size: var(--wp-text-ledger); line-height: 1.4; }
.upstream-main .bill-steps .n { font: 500 var(--wp-text-cite)/1.4 var(--wp-font-mono); color: var(--wp-muted); }
.upstream-main .bill-steps .t { font-weight: 600; }
.upstream-main .bill-steps small { display: block; margin-top: 2px; font-weight: 400; font-size: var(--wp-text-meta); color: var(--wp-muted); }
.upstream-main .owed { font: 500 var(--wp-text-ledger)/1.4 var(--wp-font-mono); color: var(--wp-muted); font-variant-numeric: tabular-nums; }
.upstream-main .bill-ends { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: var(--wp-rule) solid var(--wp-ink); }
.upstream-main .end { display: grid; gap: var(--wp-1); align-content: start; padding: var(--wp-4); }
.upstream-main .end + .end { border-left: var(--wp-rule) solid var(--wp-ink); }
.upstream-main .end.merged { background: var(--wp-cited); }
.upstream-main .end .label { color: var(--wp-ink); }
.upstream-main .end .amt { margin-top: var(--wp-2); font: 600 var(--wp-text-price)/1 var(--wp-font-display); letter-spacing: -0.02em; white-space: nowrap; }
.upstream-main .end .amt span { font: 500 var(--wp-text-meta)/1 var(--wp-font-body); letter-spacing: 0; color: var(--wp-muted); margin: 0 2px; }
.upstream-main .end .note { font-size: var(--wp-text-meta); line-height: 1.4; color: var(--wp-muted); }
.upstream-main .end.merged .note, .upstream-main .end.merged .amt span { color: var(--wp-ink); }

/* Public record: two GitHub records, the repository path first so a reader can check it. */
.upstream-main .records { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--wp-8); }
.upstream-main .records li { display: grid; gap: var(--wp-3); align-content: start; padding: var(--wp-6); background: var(--wp-panel); border-top: var(--wp-rule-strong) solid var(--wp-ink); }
.upstream-main .records .repo { font: 500 var(--wp-text-cite)/1.4 var(--wp-font-mono); letter-spacing: 0.02em; color: var(--wp-muted); overflow-wrap: anywhere; }
.upstream-main .records h3 { font: 600 var(--wp-text-h3)/1.3 var(--wp-font-body); }
.upstream-main .records h3 a { color: var(--wp-link); text-underline-offset: 0.18em; overflow-wrap: anywhere; }
.upstream-main .records .state { font-size: var(--wp-text-meta); color: var(--wp-muted); }
.upstream-main .records li > p:last-child { max-width: 36em; line-height: 1.55; }
.upstream-main .chip { display: inline-block; margin-right: var(--wp-2); padding: 0 6px; background: var(--wp-cited); font: 500 var(--wp-text-cite)/1.6 var(--wp-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp-ink); }
.upstream-main .mono { font-family: var(--wp-font-mono); font-size: 0.9em; overflow-wrap: anywhere; }
.upstream-main .record-limit { margin-top: var(--wp-8); max-width: 44em; }

/* Prices: name, what it covers, price. */
.upstream-main .ways li { grid-template-columns: 16rem minmax(0, 1fr) 9rem; grid-template-areas: "name what price"; }
.upstream-main .ways li > div { grid-area: name; }
.upstream-main .ways li > p:not(.price) { grid-area: what; }
.upstream-main .ways li > .price { grid-area: price; }
.upstream-main .ways .price { text-align: right; }
.upstream-main .included { margin-top: var(--wp-12); }
.upstream-main .included, .upstream-main .fit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.upstream-main .included h3, .upstream-main .fit h3 { margin-bottom: var(--wp-4); }
.upstream-main .service-list { display: grid; gap: var(--wp-4); list-style: none; margin: 0; padding: 0; max-width: 40em; }
.upstream-main .service-list li { border-left: var(--wp-rule-strong) solid var(--wp-bio); padding-left: var(--wp-4); }
.upstream-main .service-list.no li { border-left-color: var(--wp-rust); }

.upstream-main .closing h2 { max-width: 14ch; }
.upstream-main .closing .via { font-size: 1rem; color: var(--wp-paper); margin: var(--wp-4) 0 0; }
.upstream-main .closing { --wp-focus: var(--wp-paper); } /* the paper-edition ring is 1.31:1 on deep; paper is 7.07:1 */

@media (max-width: 1100px) {
  .upstream-main .ways li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "what what"; }
}
@media (max-width: 900px) {
  .upstream-main .hero .wrap, .upstream-main .included, .upstream-main .fit, .upstream-main .records { grid-template-columns: minmax(0, 1fr); gap: var(--wp-8); }
  .upstream-main .hero .wrap { padding-top: var(--wp-8); padding-bottom: var(--wp-12); }
}
@media (max-width: 600px) {
  .upstream-main .actions .via { order: 0; }
  .upstream-main .bill-steps li { padding: var(--wp-3); }
  .upstream-main .end { padding: var(--wp-3); }
  .upstream-main .end .amt { font-size: 1.625rem; }
  .upstream-main .records li { padding: var(--wp-4); }
}
@media (max-width: 359px) {
  .upstream-main .bill-ends { grid-template-columns: minmax(0, 1fr); }
  .upstream-main .end + .end { border-left: 0; border-top: var(--wp-rule) solid var(--wp-ink); }
}