/* ServiceProof marketing site
   ---------------------------------------------------------------------------
   The palette, the type and the card edges are lifted from the APP ITSELF -
   ink navy chrome, an orange rule under it, warm paper body, mono for anything
   that is data. A contractor who sees this site and then opens the app should
   recognise the second from the first.

   Deliberately NOT the pastel-gradient SaaS look. The buyer is a plumbing or
   HVAC owner who has been sold to before; the visual argument is "built by
   people who have been in a crawlspace", not "series B".
   --------------------------------------------------------------------------- */

:root {
  --ink:        #15212b;
  --ink-2:      #1e2d3a;
  --ink-soft:   #46565f;
  --paper:      #f4f0e6;
  --paper-2:    #fbf9f4;
  --card:       #fffdf8;
  --line:       #ddd6c6;
  --line-hard:  #bfb6a2;
  --accent:     #d4541f;
  --accent-dk:  #b4441550;
  --steel:      #4a6d85;
  --ok:         #3d7a4e;
  --warn:       #b4560f;

  --wrap: 1180px;
  --radius: 3px;

  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ⚠️ `height: auto` IS LOAD-BEARING, NOT TIDINESS. Every <img> here carries
   width= and height= attributes (they reserve the right space so the page does
   not jump while images load). `max-width:100%` then shrinks the WIDTH to fit
   its container while the height attribute still applies literally - so a
   591x1280 phone screenshot inside a 340px frame rendered 322 wide by 1280 tall
   and every screenshot on the site was stretched into a squeezed, distorted
   version of itself. It looked like a bad crop; it was a bad aspect ratio.
   Caught on the live site by Kirk, 2026-09-15. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.wrap.narrow { max-width: 760px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 18px;
}
.skip:focus { left: 0; }

/* ── NAV ─────────────────────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--ink);
  border-bottom: 3px solid var(--accent);
}

.nav-in {
  max-width: var(--wrap); margin: 0 auto; padding: 0 22px;
  display: flex; align-items: center; gap: 18px; min-height: 62px;
}

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand:hover { text-decoration: none; }

.brand-mark {
  font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: .06em;
  color: var(--accent); border: 2px solid var(--accent);
  padding: 1px 7px; line-height: 1.25;
}

.brand-name {
  font-family: var(--display); font-size: 25px; letter-spacing: .04em;
  color: var(--paper); font-weight: 600; text-transform: uppercase;
}
.brand-name b { font-weight: 700; color: #fff; }

.nav-links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.nav-links a {
  font-family: var(--display); font-size: 17px; letter-spacing: .07em;
  text-transform: uppercase; color: #c9d3da; padding: 7px 11px;
  border-radius: var(--radius);
}
.nav-links a:hover { color: #fff; background: rgba(255,255,255,.07); text-decoration: none; }
.nav-links a.active { color: #fff; box-shadow: inset 0 -3px 0 var(--accent); }

.nav-cta {
  background: var(--accent); color: #fff !important; font-weight: 700;
  margin-left: 8px;
}
.nav-cta:hover { background: #e8621f; }

.nav-toggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--paper); margin: 5px 0; }

/* ── TYPE ────────────────────────────────────────────────────────────────── */

/* ⚠️ `text-wrap: balance` REPLACED ELEVEN HAND-PLACED <br> TAGS, and it is the
   only version of this that stays right.
   Those breaks were positioned against a container wider than the one that
   actually exists - .wrap.narrow measures 716px - so five of twelve headlines
   stranded a single word on its own line at EVERY desktop width ("REPLACE"
   alone, "HAVE" alone). A hand break is only ever correct at the one width its
   author had in mind, and it is silently wrong at all the others.
   Balance lets the browser even out the lines itself, at whatever width the
   reader actually has. Browsers without it just wrap normally, which is still
   better than a forced break in the wrong place.
   The home page keeps its <br> deliberately: "Keep ESC. / Replace the app." is
   two sentences answering each other, and that break is the argument, not
   typography. */
h1, h2, h3, h4 { font-family: var(--display); letter-spacing: .01em; line-height: 1.08; margin: 0 0 .5em; text-wrap: balance; }

h1 { font-size: clamp(38px, 6.2vw, 70px); font-weight: 700; text-transform: uppercase; }
h2 { font-size: clamp(28px, 3.9vw, 42px); font-weight: 700; text-transform: uppercase; }
h3 { font-size: clamp(21px, 2.3vw, 26px); font-weight: 600; }
h4 { font-size: 18px; font-weight: 600; }

p { margin: 0 0 1.1em; }

.kicker {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 14px; font-weight: 500;
}

.lede { font-size: clamp(18px, 2.1vw, 22px); line-height: 1.5; color: var(--ink-soft); max-width: 62ch; }

.muted { color: var(--ink-soft); }
.small { font-size: 14.5px; }

/* ── BANDS ───────────────────────────────────────────────────────────────── */

.band { padding: 74px 0; }
.band + .band { border-top: 1px solid var(--line); }
.band.tight { padding: 48px 0; }
.band.ink { background: var(--ink); color: var(--paper); border-top: 0; }
.band.ink h1, .band.ink h2, .band.ink h3 { color: #fff; }
.band.ink .lede, .band.ink p { color: #c3ccd3; }
.band.ink .kicker { color: #ff8a4c; }
.band.paper2 { background: var(--paper-2); }

/* ── HERO ────────────────────────────────────────────────────────────────── */

.hero { background: var(--ink); color: var(--paper); padding: 0; overflow: hidden; }

.hero-in {
  max-width: var(--wrap); margin: 0 auto; padding: 66px 22px 0;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 46px; align-items: center;
}

.hero h1 { color: #fff; margin-bottom: 18px; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lede { color: #c3ccd3; font-size: clamp(18px, 2.2vw, 23px); }

.hero-copy { padding-bottom: 66px; }

/* This used to be `height: 500px; overflow: hidden`, on the reasoning that the
   phone shown whole made the hero 1,364px tall and pushed the headline and the
   price below the fold.
   That measurement was taken while the site-wide `height: auto` bug was live
   (see the img rule above): the phone was being stretched to 1,298px when its
   true height at this width is 716px. So the hero was never too tall - the
   image was. With the ratio correct the whole phone is SHORTER than the copy
   column beside it and costs nothing to show, so there is no longer anything to
   clip and no half-a-device for a reader to puzzle over. A workaround outlived
   the bug it was working around, which is how most of them end. */
.hero-shot { display: flex; justify-content: center; align-items: center; padding-bottom: 66px; }

.hero-stats {
  display: flex; gap: 30px; flex-wrap: wrap; margin-top: 30px;
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14);
}
.hero-stat b {
  display: block; font-family: var(--display); font-size: 34px; color: #fff; font-weight: 700; line-height: 1;
}
.hero-stat span { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: #93a3ad; }

/* ── PHONE FRAME ─────────────────────────────────────────────────────────
   The screenshots are clean app captures; the device bezel is drawn in CSS
   rather than baked into the image, so the same file can be shown framed on
   a feature page and bare in a gallery. */

.phone {
  position: relative; width: 100%; max-width: 300px;
  border: 9px solid #0b1116; border-radius: 34px;
  box-shadow: 0 22px 48px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.06);
  overflow: hidden; background: #0b1116; flex: none;
}
.phone img { border-radius: 25px; }
.phone.sm { max-width: 232px; border-width: 7px; border-radius: 28px; }
.phone.lg { max-width: 340px; }

.shot-cap {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.45;
  color: var(--ink-soft); margin-top: 12px; text-align: center; max-width: 300px;
}
.band.ink .shot-cap { color: #93a3ad; }

/* A plain framed screenshot for desktop/web captures (eBizCharge). */
.screenshot {
  border: 1px solid var(--line-hard); border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(21,33,43,.13); overflow: hidden; background: #fff;
}

/* ── FEATURE ROWS ────────────────────────────────────────────────────────── */

.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
/* ⚠️ A GRID ITEM REFUSES TO SHRINK BELOW ITS MIN-CONTENT unless you say so.
   `1fr` is `minmax(auto, 1fr)`, and that `auto` minimum is min-content - so one
   wide child (the four-column pricing table) silently widened its whole column
   to 400px inside a 375px phone and pushed the entire document sideways. The
   table's own overflow-x does nothing until the column is allowed to be narrow. */
.feature > * { min-width: 0; }
.feature + .feature { margin-top: 82px; padding-top: 82px; border-top: 1px dashed var(--line-hard); }
.feature.flip .feature-media { order: -1; }
.feature-media { display: flex; gap: 22px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.feature-media figure { margin: 0; display: flex; flex-direction: column; align-items: center; }

/* ── LISTS ───────────────────────────────────────────────────────────────── */

.ticks { list-style: none; padding: 0; margin: 0 0 1.2em; }
.ticks li { position: relative; padding-left: 30px; margin-bottom: .68em; }
.ticks li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  color: var(--ok); font-weight: 700; font-size: 17px;
}
.band.ink .ticks li::before { color: #63b87a; }

.crosses { list-style: none; padding: 0; margin: 0 0 1.2em; }
.crosses li { position: relative; padding-left: 30px; margin-bottom: .68em; }
.crosses li::before {
  content: "✕"; position: absolute; left: 0; top: -1px;
  color: #b4451a; font-weight: 700; font-size: 16px;
}

/* ── CARDS ───────────────────────────────────────────────────────────────── */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--accent); border-radius: var(--radius);
  padding: 24px 24px 20px;
}
.card h3 { margin-bottom: .35em; }
.card p:last-child { margin-bottom: 0; }
.card .card-ico { font-size: 25px; line-height: 1; margin-bottom: 12px; display: block; }
.band.ink .card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }

.card.steel { border-left-color: var(--steel); }
.card.ok { border-left-color: var(--ok); }

/* ── CONTACT ─────────────────────────────────────────────────────────────── */
/* The phone and the email get the same weight. Giving the email top billing
   quietly says "we would rather you didn't ring" - the wrong message for a
   buyer who runs trucks and settles things by phone. Big tap targets, because
   half of them are reading this on a handset. */

.contact-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 20px 0 30px; max-width: 640px; }
.contact-way {
  display: block; text-decoration: none; background: var(--card);
  border: 2px solid var(--ink); border-radius: var(--radius); padding: 18px 22px;
}
.contact-way:hover { background: var(--paper-2); }
.contact-kind {
  display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 5px;
}
.contact-val {
  display: block; font-family: var(--display); font-weight: 700; color: var(--ink);
  font-size: clamp(19px, 2.3vw, 25px); line-height: 1.15; word-break: break-word;
}

.foot-contact { margin-top: 12px; font-family: var(--mono); font-size: 13.5px; }
.foot-contact a { color: #cdd6dc; text-decoration: none; }
.foot-contact a:hover { color: #fff; text-decoration: underline; }

/* ── PRICE NOTE ──────────────────────────────────────────────────────────── */
/* Each ESC Tool carries one of these. Deliberately loud rather than a muted
   footnote: an unpriced line item on a marketing page is the thing a buyer
   asks about first, so it should be obvious both to them AND to us that the
   number has not been filled in yet. */

.pricenote {
  display: block; margin: 22px 0 0;
  border: 1px dashed var(--line-hard); border-left: 4px solid var(--steel);
  border-radius: var(--radius); padding: 13px 16px;
  font-family: var(--mono); font-size: 13.5px; line-height: 1.5; color: var(--ink-soft);
}
.pricenote b { font-family: var(--display); font-size: 15px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink); display: block; margin-bottom: 3px; }
.band.ink .pricenote { border-color: rgba(255,255,255,.2); border-left-color: var(--accent); color: #b9c6ce; }
.band.ink .pricenote b { color: #fff; }

/* ── PULL QUOTE ──────────────────────────────────────────────────────────── */

.quote {
  border-left: 4px solid var(--accent); padding: 4px 0 4px 26px; margin: 34px 0;
  font-size: clamp(19px, 2.4vw, 25px); line-height: 1.42; font-weight: 500;
}
.quote cite { display: block; font-size: 14.5px; font-style: normal; font-weight: 400; color: var(--ink-soft); margin-top: 12px; font-family: var(--mono); }
.band.ink .quote cite { color: #93a3ad; }

/* ── STAT STRIP ──────────────────────────────────────────────────────────── */

.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 2px; background: var(--line); border: 1px solid var(--line); }
.stat { background: var(--paper-2); padding: 24px 20px; }
.stat b { display: block; font-family: var(--display); font-size: clamp(30px, 4vw, 44px); font-weight: 700; line-height: 1; color: var(--ink); }
.stat span { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); display: block; margin-top: 7px; }

/* ── COMPARE TABLE ───────────────────────────────────────────────────────── */

.compare { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: 16px; }
.compare th, .compare td { padding: 13px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font-family: var(--display); text-transform: uppercase; letter-spacing: .05em; font-size: 17px; border-bottom: 2px solid var(--ink); }
.compare td.yes { color: var(--ok); font-weight: 600; }
.compare td.no { color: #b4451a; }
.compare tbody tr:hover { background: var(--paper-2); }

/* ⚠️ THE COMPARE TABLE WAS ONLY EVER DESIGNED FOR THE PAPER BAND. Its palette
   is dark-on-light: --ok green, a rust red, hairline rules and an --ink header
   underline. Dropped onto a .band.ink section - which the home page now does,
   with a WHOLE COLUMN of body-length answer copy - the green goes dark-on-dark,
   the header underline disappears into the background, and the hover state
   flashes a light block. One or two words in that green survives it; five rows
   of sentences does not. */
.band.ink .compare th,
.band.ink .compare td { border-bottom-color: rgba(255,255,255,.14); }
.band.ink .compare thead th { color: #fff; border-bottom-color: rgba(255,255,255,.4); }
.band.ink .compare td.yes { color: #7ccb92; }
.band.ink .compare td.no { color: #e2794f; }
.band.ink .compare tbody tr:hover { background: rgba(255,255,255,.04); }

table.stats { width: 100%; border-collapse: collapse; font-size: 15px; margin-bottom: 30px; }
table.stats td { padding: 7px 10px; border-bottom: 1px solid var(--line); }
table.stats td:last-child { text-align: right; font-family: var(--mono); }

/* ── BUTTONS ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-block; font-family: var(--display); font-size: 19px;
  letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  padding: 13px 28px; border-radius: var(--radius); border: 2px solid var(--accent);
  background: var(--accent); color: #fff; cursor: pointer; text-align: center;
}
.btn:hover { background: #e8621f; border-color: #e8621f; text-decoration: none; }
.btn.ghost { background: transparent; color: var(--accent); }
.btn.ghost:hover { background: rgba(212,84,31,.09); }
.band.ink .btn.ghost { color: #ff8a4c; border-color: #ff8a4c; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }

/* ── SECTION HEAD + SHARE ────────────────────────────────────────────────── */

.sec-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.sec-head h2 { margin-bottom: 0; }

.share {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-soft); background: none; border: 1px solid var(--line-hard);
  border-radius: var(--radius); padding: 4px 10px; cursor: pointer;
}
.share:hover { color: var(--accent); border-color: var(--accent); }
.share.copied { color: var(--ok); border-color: var(--ok); }
.band.ink .share { color: #93a3ad; border-color: rgba(255,255,255,.2); }

/* ── ANCHOR NAV (in-page contents) ───────────────────────────────────────── */

.toc { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; margin: 0 0 12px; }
.toc h4 { font-family: var(--mono); font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; font-weight: 500; }
.toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 34px; }
.toc li { margin-bottom: 7px; break-inside: avoid; }

/* ── WALK (prev / next) ──────────────────────────────────────────────────── */

.walk {
  max-width: var(--wrap); margin: 0 auto; padding: 34px 22px 12px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.walk a {
  border: 1px solid var(--line-hard); border-radius: var(--radius);
  padding: 16px 20px; display: block; background: var(--card); color: var(--ink);
}
.walk a:hover { border-color: var(--accent); text-decoration: none; }
.walk-next { text-align: right; }
.walk-dir { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.walk-title { font-family: var(--display); font-size: 21px; font-weight: 600; text-transform: uppercase; }

/* ── FOOTER ──────────────────────────────────────────────────────────────── */

.foot { background: var(--ink); color: #9fadb6; margin-top: 40px; padding: 48px 0 0; }
.foot-in { max-width: var(--wrap); margin: 0 auto; padding: 0 22px 34px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; }
.foot .brand-name { margin-bottom: 12px; display: inline-block; }
.foot p { font-size: 15px; max-width: 46ch; }
.foot-links { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.foot-links a { color: #c9d3da; font-size: 15px; }
.foot-legal { border-top: 1px solid rgba(255,255,255,.1); padding: 18px 22px; font-size: 12.5px; color: #7b8992; max-width: var(--wrap); margin: 0 auto; }

/* ── GALLERY ─────────────────────────────────────────────────────────────── */

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 26px; }
.gallery figure { margin: 0; }
.gallery .phone { max-width: 100%; }
.gallery figcaption { font-family: var(--mono); font-size: 12px; line-height: 1.45; color: var(--ink-soft); margin-top: 10px; }
.band.ink .gallery figcaption { color: #93a3ad; }

/* ── INDEX PAGE ──────────────────────────────────────────────────────────── */

.index-page { border-top: 1px solid var(--line); padding: 22px 0; }
.index-page:first-of-type { border-top: 0; }
.index-page h3 { margin-bottom: 4px; }
.index-page .index-sections { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px 22px; }
.index-page .index-sections a { font-size: 15.5px; }

/* ── PRICE ───────────────────────────────────────────────────────────────── */

/* TWO SEATS SIT SIDE BY SIDE, never stacked as a "main price" and a footnote.
   $75/tech and $25/office user are both real line items on the first invoice,
   so the page gives them the same weight and the buyer does the arithmetic
   once, here, instead of discovering the second one later. */
.seats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 24px; margin-top: 34px; max-width: 800px;
}

.price-card {
  background: var(--card); border: 2px solid var(--ink); border-radius: var(--radius);
  padding: 34px; text-align: center;
}
.price-num { font-family: var(--display); font-size: 72px; font-weight: 700; line-height: 1; color: var(--ink); }
.price-num sup { font-size: 30px; vertical-align: super; }
.price-per { font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.seat-who { font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); margin: 16px 0 0; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */

@media (max-width: 1150px) {
  .hero-in { grid-template-columns: 1fr; gap: 30px; padding-top: 44px; }
  .hero-copy { padding-bottom: 0; }
  .hero-shot { height: auto; padding-bottom: 42px; align-items: center; }
  .feature { grid-template-columns: 1fr; gap: 28px; }
  .feature.flip .feature-media { order: 0; }
  .feature + .feature { margin-top: 52px; padding-top: 52px; }
  .foot-in { grid-template-columns: 1fr; }
  .toc ol { columns: 1; }

  .nav-toggle { display: block; }
  .nav-links {
    display: none; position: absolute; top: 62px; left: 0; right: 0;
    background: var(--ink-2); flex-direction: column; align-items: stretch;
    padding: 10px 14px 18px; gap: 2px; border-bottom: 3px solid var(--accent);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 10px; font-size: 19px; }
  .nav-cta { margin: 8px 0 0; }

  .walk { grid-template-columns: 1fr; }
  .walk-next { text-align: left; }

  .band { padding: 52px 0; }
}

@media (max-width: 560px) {
  body { font-size: 16.5px; }
  .feature-media { gap: 16px; }
  .phone { max-width: 260px; }
  .stat-strip { grid-template-columns: 1fr 1fr; }

  /* The hand-placed <br> in every H1 is a DESKTOP line break - it balances a
     two-line headline at 1200px. On a phone the line already wraps three times
     on its own, and the extra break strands a single word ("ABOUT") on a line
     of its own. Let the phone wrap it. */
  h1 br { display: none; }

  /* ⚠️ THE PRICING TABLE IS THE ONE THING WIDER THAN A PHONE. Four numeric
     columns have a min-content width of ~420px, so at 375px it was pushing the
     whole document sideways - every band, the nav, the lot - and the reader got
     a page that slid left-right under their thumb. Making the table its own
     scroll box confines that to the table: the page stays put and only the
     numbers slide. */
  .compare { display: block; overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media print {
  .nav, .walk, .share, .nav-toggle { display: none; }
  body { background: #fff; font-size: 12pt; }
  .band { padding: 18px 0; }
  .phone { box-shadow: none; }
}