/* Scout — the design system.
 *
 * ONE file. Before this there were three: the home page carried the whole visual
 * identity in 436 lines of its own inline CSS, `p/provider.css` was a stripped
 * copy for the other public pages, and `app/app.css` a third for the signed-in
 * product. The tokens matched, so nobody noticed — but the shell drifted. The
 * top bar was 64px and transparent on the home page and padded and white
 * everywhere else, and the survey plate that IS the brand appeared on exactly
 * one page out of fifty.
 *
 * Anything that appears on more than one page belongs here. Page-specific
 * layout stays on the page. If you find yourself copying a rule between two
 * files, it belonged here instead.
 *
 * ── The visual idea ───────────────────────────────────────────────────────
 * A scout surveys. The whole identity is the archival topographic sheet:
 * contour lines, a section grid, and the little orange triangles that mark
 * triangulation stations — the fixed points a surveyor works from. That is
 * exactly what the product does. It tells you where you actually stand, from
 * fixed measured points, rather than from a brochure.
 *
 * So: `.plate` is the survey sheet. `.station` is the triangle. `.bearing` is a
 * ruled scale. They are used sparingly and always to mean something — a station
 * marks a fixed point in the argument, a bearing marks a measured range. Never
 * as decoration, because decoration is what everyone else in this market does.
 *
 * ── Sizing ────────────────────────────────────────────────────────────────
 * Mobile first. Every base rule is the phone rule; breakpoints only ever ADD.
 *   ≥ 700px  a large phone landscape / small tablet
 *   ≥ 900px  iPad portrait — two columns become available
 *   ≥ 1180px desktop — the full measure, and the plate can sit beside type
 */


/* ── Typefaces ──────────────────────────────────────────────────────────────
   These were declared inline in index.html, so ONLY the home page ever loaded
   them. Every other page on the site — the retailer directory, the business
   page, the results — fell back to Helvetica/Arial, which is why the titles
   looked like a different site from one page to the next. They belong with the
   stylesheet that uses them.

   Paths are relative to THIS file, which sits at the root, so they resolve the
   same way from /p/rhythm.html as from /.

   Archivo carries the display: it descends from American signage and newspaper
   grotesques, so it has the plain structural authority a survey sheet's title
   block has. Instrument Sans carries everything read at length, and is not
   Inter, which is what every tool like this defaults to. The utility face stays
   the system monospace.

   Latin subsets only, self-hosted, ~92 KB total, swap so text paints at once. */
@font-face{font-family:Archivo;src:url('fonts/archivo-800.woff2') format('woff2');
  font-weight:800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF}
@font-face{font-family:'Instrument Sans';src:url('fonts/instrument-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF}
@font-face{font-family:'Instrument Sans';src:url('fonts/instrument-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF}

:root{
  --canvas:#f4efe3; --canvas2:#ece4d3; --panel:#fffdf8;
  --ink:#14181A; --ink2:#474C4F; --ink3:#606669;
  --rule:#d9cdb4; --rule2:#c3b493;
  --trail:#46583a; --trailbg:#e7ecdf; --trail-ink:#3a4a30;
  --flare:#c4571f; --flarebg:#fbeadc;
  /* The accent splits by job: --flare fills (rules, blazes, borders), --flare-ink
     is the text/button variant, darkened until it clears WCAG AA on every
     background we use. Never set orange text with --flare. */
  --flare-ink:#a74a1a; --flare-btn:#b24f1c;
  --good:#4a7238;
  /* One spacing scale. Before this every block set its own margins by feel,
     which is why a heading could sit 8px off the box above it in one place and
     40px in another. Sections use --s-6, blocks inside a section --s-4, and
     nothing hand-rolls a gap that one of these already names. */
  /* One reading measure for the whole site. Set on a CONTAINER, never on a
     paragraph, so everything in a column shares one right edge. */
  --measure:68ch;
  --s-1:6px; --s-2:10px; --s-3:16px; --s-4:24px; --s-5:34px; --s-6:52px; --s-7:76px;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --display:Archivo,"Helvetica Neue",Arial,sans-serif;
  --body:'Instrument Sans',-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--body);
  font-size:16.5px;line-height:1.58;-webkit-font-smoothing:antialiased}
a{color:var(--flare-ink)}
img{max-width:100%;height:auto}

/* The measure. Generous on a phone because thumbs need the edge, wider as the
   screen earns it. */
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 20px}
@media (min-width:700px){ .wrap{padding:0 32px} }
@media (min-width:1180px){ .wrap{padding:0 44px} }

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2.5px solid var(--flare);outline-offset:2px;border-radius:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ── the survey motif ───────────────────────────────────────────────────────
   Used to mean something, never as wallpaper. */

/* The plate: the archival sheet itself. On a phone it is a band under the type,
   because a phone headline needs the whole width and a wash behind it reads as
   a smudge. From tablet up it can sit beside the type where it belongs. */
.plate{position:relative;overflow:hidden}
.plate > .wrap{position:relative;z-index:1}
.plate::before{content:"";position:absolute;inset:auto 0 0 0;height:104px;
  background:url('/img/topo-hero.jpg') no-repeat 62% 46%/190% auto;opacity:1;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 84%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 84%,transparent 100%)}
@media (min-width:900px){
  .plate::before{inset:0;height:auto;
    background:url('/img/topo-hero.jpg') no-repeat right center/cover;opacity:.62;
    -webkit-mask-image:linear-gradient(100deg,transparent 0%,transparent 46%,#000 78%,#000 100%);
            mask-image:linear-gradient(100deg,transparent 0%,transparent 46%,#000 78%,#000 100%)}
}
/* A quieter version for pages that are not the front door: a thin ruled band
   rather than the whole sheet, so every page is recognizably the same survey
   without every page shouting. */
.plate.quiet::before{height:64px;opacity:.42}
@media (min-width:900px){ .plate.quiet::before{opacity:.30} }

/* The triangulation station. A fixed measured point. */
.station{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--flare-ink);
  font-weight:700;margin:0 0 10px}
.station::before{content:"";width:0;height:0;flex:none;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-bottom:9px solid var(--flare)}
.station.trail{color:var(--trail-ink)}
.station.trail::before{border-bottom-color:var(--trail)}
.station.plain{color:var(--ink3)}
.station.plain::before{border-bottom-color:var(--rule2)}

/* A bearing: a ruled scale with ticks, the way a map prints distance. Used as a
   section divider that carries the motif without adding an image. */
.bearing{height:9px;border-top:1px solid var(--rule2);position:relative;margin:var(--s-6) 0}
.bearing::after{content:"";position:absolute;inset:0 0 auto 0;height:5px;
  background-image:linear-gradient(90deg,var(--rule2) 1px,transparent 1px);
  background-size:28px 100%}

/* ── the shell ──────────────────────────────────────────────────────────────
   One header and one footer, injected at build time from web/_partials. */

header{background:var(--panel);border-bottom:1px solid var(--rule);
  position:relative}
/* A hairline of survey ticks under the bar, so even the chrome is on-brand. */
header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background-image:linear-gradient(90deg,var(--rule2) 1px,transparent 1px);
  background-size:28px 100%;opacity:.9}
header .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:14px;min-height:60px;flex-wrap:wrap}
/* ── the mark ───────────────────────────────────────────────────────────────
   The compass mark stands in for the O of SCOUT, so the lockup is live type
   with an SVG letter in the middle rather than an image. Three rules from the
   handoff drive the numbers here and none of them are arbitrary:

   · the mark renders at the CAP HEIGHT of the type (0.75em at Instrument Sans
     600), so its ring reads as the same weight as the letter stems;
   · its stroke-width of 11 in a 64 viewBox is what makes that true, so the two
     cannot be changed independently;
   · the pinhole is a KNOCKOUT, not a white dot — it takes the color of
     whatever surface the mark sits on, which is why it is a variable.

   Below 20px the pinhole fills in and the handoff says to drop it. */
:root{ --pin:var(--panel); }
.logo{display:inline-flex;align-items:center;color:var(--ink);
  text-decoration:none;flex:none}
/* Baseline, not centre. The mark stands in for the O, so it belongs on the same
   baseline as SC and UT, sized to the O's ink band rather than to the line box.
   Centring plus a flat `margin-bottom:1px` happened to look near-right at 19px and
   drifted everywhere else, because a 1px nudge does not scale with the font: the
   same rule left the 21px footer mark half a pixel high. Measured against a real
   typeset O on the page, over 8 sub-pixel phases x deviceScaleFactor 2 and 3:

                      centre + 1px            baseline + .76em/.02em
       header 19px    top -0.125  bot -0.438  top -0.125  bot -0.250
       footer 21px    top -0.458  bot -0.542  top -0.208  bot -0.042

   The sizing is the same as the facility wordmark and the reasoning is written out
   there, in facility.css: 0.76em tall, centred on the O's band, which is 0.02em of
   overshoot past the cap at each end. `.lk`'s own height does not change (19px and
   21px before and after), so no bar or footer moves. */
.lk{display:inline-flex;align-items:baseline;font-family:var(--body);
  font-weight:600;font-size:19px;letter-spacing:.1em;line-height:1;
  white-space:nowrap}
.lk .mk{width:.76em;height:.76em;flex:none;margin:0 .1em 0 0;display:block;
  position:relative;top:.02em}
/* The bar and the footer are panel-colored, so the knockout is too. */
header .logo,footer .logo{--pin:var(--panel)}
/* At every size we use the lockup the mark lands around 14-16px, under the
   handoff's 20px floor, and the pinhole fills in to a smudge that reads as a
   printing fault rather than a knockout. So it is dropped here by design. The
   standalone mark and the favicon keep it, because they are shown large. */
.lk .mk circle{display:none}
@media (max-width:420px){ .lk{font-size:17px} }

/* One menu, at every width.
   The first pass only turned the links into a menu below 900px, which left the
   row of five links in place on exactly the screens where it had grown too long
   — the thing that prompted the change. Now the bar carries the wordmark and a
   single control at all sizes, and the panel it opens is the same list
   everywhere. Adding a page means adding a line to the panel, not another item
   competing for the bar.
   Without JS the list renders inline, which is the correct fallback: a menu
   that cannot open is worse than a row of links. */
.navbtn{display:none;align-items:center;gap:8px;background:none;
  border:1px solid var(--rule2);color:var(--ink);padding:8px 12px;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  border-radius:2px;line-height:1}
.navbtn:hover{border-color:var(--flare);color:var(--flare-ink)}
.navbtn[aria-expanded="true"]{background:var(--flarebg);border-color:var(--flare);
  color:var(--flare-ink)}
.navbtn svg{display:block}
.navbtn .x{display:none}
.navbtn[aria-expanded="true"] .x{display:block}
.navbtn[aria-expanded="true"] .m{display:none}

.nav{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.nav a{font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;text-decoration:none;color:var(--ink2);white-space:nowrap}
.nav a:hover,.nav a[aria-current]{color:var(--flare-ink)}

.js-nav .navbtn{display:inline-flex}
.js-nav header .wrap{position:relative}
.js-nav .nav{display:none;position:absolute;top:calc(100% + 1px);right:0;
  z-index:60;min-width:250px;flex-direction:column;align-items:stretch;gap:0;
  background:var(--panel);border:1px solid var(--rule2);
  box-shadow:0 14px 34px rgba(36,31,22,.14);padding:6px 0}
.js-nav .nav.open{display:flex}
.js-nav .nav a{padding:13px 18px;font-size:11.5px;border-bottom:1px solid var(--rule)}
.js-nav .nav a:last-child{border-bottom:none}
.js-nav .nav a:hover{background:var(--canvas2)}
.js-nav .nav a[aria-current]{color:var(--flare-ink);
  box-shadow:inset 3px 0 0 var(--flare)}

/* On a phone the panel spans the bar rather than floating in a corner. */
@media (max-width:699px){
  .js-nav .nav{left:0;right:0;min-width:0}
  .navbtn{padding:9px 11px}
  .navbtn .lbl{display:none}
}

.who{font-family:var(--mono);font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink3)}

footer{background:var(--panel);border-top:1px solid var(--rule);margin-top:48px}
.fgrid{display:grid;grid-template-columns:1fr;gap:var(--s-5);
  padding-top:var(--s-5);padding-bottom:var(--s-4)}
@media (min-width:560px){
  /* The three link columns share equal tracks so their headings line up; the
     brand paragraph spans them rather than squeezing one narrow. */
  .fgrid{grid-template-columns:repeat(3,1fr);gap:var(--s-4) var(--s-4)}
  .fbrand{grid-column:1 / -1}
}
@media (min-width:900px){
  .fgrid{grid-template-columns:1.7fr repeat(3,1fr);gap:var(--s-5)}
  .fbrand{grid-column:auto}
}
.fcol{min-width:0}
.fbrand .logo{margin-bottom:var(--s-2)}
.fbrand .lk{font-size:21px}
.fdis{font-size:13.5px;color:var(--ink2);margin:0}
.fcol h2{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink3);margin:0 0 10px;border:none;padding:0;
  min-height:1.2em}
.fcol a{display:block;font-size:14.5px;text-decoration:none;color:var(--ink2);
  padding:4px 0}
.fcol a:hover{color:var(--flare-ink)}
.fbar{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;
  border-top:1px solid var(--rule);padding-top:14px;padding-bottom:22px}
.fbar p{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink3)}

/* ── type ───────────────────────────────────────────────────────────────── */

h1{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.06;
  font-size:clamp(30px,7vw,52px);margin:0 0 14px;text-wrap:balance}
h2{font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:1.14;
  font-size:clamp(22px,4.2vw,30px);margin:0 0 14px;text-wrap:balance}
h3{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.018em;
  margin:0 0 6px}
p{margin:0 0 13px}
p:last-child{margin-bottom:0}
.lede{font-size:clamp(17px,2.6vw,20px);color:var(--ink2);margin:0 0 18px}
/* The front door gets the one larger variant, tied to the plate being at full
   strength rather than to a second class somebody has to remember. */
.plate:not(.quiet) .lede{font-size:clamp(18px,3vw,21px)}
.note{color:var(--ink2);font-size:14.5px}
.muted{color:var(--ink3)}
.prose{}

/* ── surfaces ───────────────────────────────────────────────────────────── */

.card{background:var(--panel);border:1px solid var(--rule);padding:20px}
@media (min-width:700px){ .card{padding:24px 26px} }

/* ── numbers ────────────────────────────────────────────────────────────────
   Flex, not grid: a 1px-gap grid over a colored container draws the container
   wherever a cell is missing, so any tile count that does not fill the last row
   leaves a dead rectangle. Flex lets the final row stretch. */
.tiles{display:flex;flex-wrap:wrap;gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
.tiles > div{background:var(--panel);padding:15px 17px;flex:1 1 150px;min-width:0}
.tiles .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink3);margin:0 0 5px}
.tiles .v{font-family:var(--display);font-weight:800;font-size:24px;
  letter-spacing:-.025em;margin:0;line-height:1.05;font-variant-numeric:tabular-nums}
.tiles .s{font-size:12.5px;color:var(--ink3);margin:3px 0 0}
.v.bad{color:var(--flare-ink)} .v.good{color:var(--good)}

/* ── where you stand ────────────────────────────────────────────────────────
   The gauge is the map metaphor doing real work: a surveyed range with your
   position marked on it. It replaces "13.4¢ vs 12.6¢", which is two numbers a
   reader has to subtract themselves, with a picture of how far off you are and
   how wide the market actually is. */
.gauge{margin:18px 0 0}
.gauge .track{position:relative;height:46px;border:1px solid var(--rule2);
  background:var(--canvas);
  background-image:linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:calc(100% / 12) 100%}
.gauge .band{position:absolute;top:0;bottom:0;background:var(--trailbg);
  border-left:1px solid var(--trail);border-right:1px solid var(--trail)}
.gauge .you{position:absolute;top:-6px;bottom:-6px;width:2px;background:var(--flare-ink)}
.gauge .you::before{content:"";position:absolute;top:-1px;left:-5px;
  border-left:6px solid transparent;border-right:6px solid transparent;
  border-top:9px solid var(--flare-ink)}
.gauge .lbl{display:flex;justify-content:space-between;margin-top:7px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink3)}
.gauge .read{font-family:var(--display);font-weight:800;font-size:15px;
  color:var(--flare-ink);margin-top:8px}

/* ── the contract clock ────────────────────────────────────────────────────
   Distance still to run, with the stations we will speak to you at marked on
   it. A bar with a number over it says "later"; a bar with 90/60/30 marked says
   "and here is exactly when you will hear from me", which is the product. */
.clock .big{font-family:var(--display);font-weight:800;font-size:clamp(38px,9vw,52px);
  letter-spacing:-.04em;line-height:1;margin:0;font-variant-numeric:tabular-nums}
.clock .road{position:relative;height:10px;background:var(--canvas2);
  border:1px solid var(--rule);margin:16px 0 30px}
.clock .road i{position:absolute;inset:0 auto 0 0;background:var(--trail);display:block}
.clock .mark{position:absolute;top:-5px;bottom:-5px;width:1px;background:var(--rule2)}
.clock .mark span{position:absolute;top:16px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--ink3);
  white-space:nowrap}
.clock .mark.near{background:var(--flare)}
.clock .mark.near span{color:var(--flare-ink);font-weight:700}

/* ── pills, alerts, tables ─────────────────────────────────────────────── */

.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);
  font-size:10px;letter-spacing:.09em;text-transform:uppercase;padding:4px 9px;
  border:1px solid var(--rule2);color:var(--ink2);white-space:nowrap}
.pill.ok{border-color:var(--trail);color:var(--trail-ink);background:var(--trailbg)}
.pill.warn{border-color:var(--flare);color:var(--flare-ink);background:var(--flarebg)}
.pill.dead{color:var(--ink3)}

.alert{display:flex;gap:14px;justify-content:space-between;align-items:flex-start;
  background:var(--panel);border:1px solid var(--rule2);padding:16px 18px;margin:0 0 10px;
  flex-wrap:wrap}
.alert.new{border-left:3px solid var(--flare);background:var(--flarebg)}
.alert .body{flex:1 1 240px;min-width:0}
.alert h3{margin:0 0 4px;font-size:17px}
.alert p{margin:0;color:var(--ink2);font-size:14.5px}
.alert .amt{font-family:var(--display);font-weight:800;font-size:17px;
  color:var(--flare-ink);white-space:nowrap}

/* Any table wide enough to overflow scrolls inside its own box. The page body
   must never scroll sideways. */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:15px}
th{font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink3);text-align:left;font-weight:400;padding:0 12px 8px 0;
  border-bottom:1px solid var(--rule2);white-space:nowrap}
td{padding:11px 12px 11px 0;border-bottom:1px solid var(--rule);vertical-align:top}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.strong{font-weight:600}
tr:last-child td{border-bottom:none}

/* ── controls ───────────────────────────────────────────────────────────────
   16px on the control is not taste: below that, iOS Safari zooms the page when
   a field takes focus. */
label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink3);margin:0 0 5px}
input,select,textarea{width:100%;font:inherit;font-size:16px;padding:11px 13px;
  border:1.5px solid var(--rule2);background:#fff;color:var(--ink);border-radius:3px}
textarea{resize:vertical;line-height:1.45}
input[type=checkbox]{width:17px;height:17px;padding:0}
select{-webkit-appearance:none;appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23606669' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px}
.field{margin-bottom:14px}

.btn{display:inline-block;border:none;cursor:pointer;font:inherit;font-size:16px;
  font-weight:600;padding:13px 22px;background:var(--flare-btn);color:#fff;
  text-decoration:none;text-align:center}
.btn:hover{background:var(--flare-ink)}
.btn.quiet{background:none;color:var(--ink);border:1.5px solid var(--ink)}
.btn.quiet:hover{background:var(--ink);color:var(--canvas)}
.btn.danger{background:none;color:var(--flare-ink);border:1.5px solid var(--flare)}
.btn.danger:hover{background:var(--flare);color:#fff}
.btn:disabled{opacity:.5;cursor:default}
/* On a phone a primary action is full width, because a thumb should not have to
   aim. From tablet up it sizes to its label. */
.btn.wide{width:100%}
@media (min-width:700px){ .btn.wide{width:auto} }

.rowend{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.grid2{display:grid;grid-template-columns:1fr;gap:14px}
.grid3{display:grid;grid-template-columns:1fr;gap:14px 16px}
@media (min-width:700px){
  .grid2{grid-template-columns:1fr 1fr}
  .grid3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
}

/* ── the page head ─────────────────────────────────────────────────────────
   EVERY public page opens with the same block, in the same order:

       <section class="plate quiet">        (the home page drops `quiet`)
         <div class="wrap headblock">
           <p class="station">eyebrow</p>
           <h1>…</h1>
           <p class="lede">…</p>

   Before this there were three different opening treatments and two separate
   implementations of the survey plate, so which pages showed the topographic
   lines — and how much air sat above the title — depended on which page you
   happened to land on. `.wrap.head` is kept as an alias only so the generated
   retailer pages did not all have to change at once. */
.plate > .wrap.headblock,
.plate > .wrap.head,
.wrap.headblock,.wrap.head{padding-top:var(--s-5);padding-bottom:var(--s-5)}
/* On a phone the plate is a band UNDER the type, so the block needs room
   beneath it for the band to sit in. From tablet up the sheet moves beside the
   type and that reserved space is no longer needed.

   This applies to EVERY plate, quiet or not. Scoping it to .quiet meant the
   home page's full-strength plate tied on specificity with .wrap.headblock,
   lost, and had its band land on top of the form. */
.plate > .wrap.headblock,
.plate > .wrap.head{padding-bottom:calc(var(--s-5) + 72px)}
@media (min-width:900px){
  .plate > .wrap.headblock,
  .plate > .wrap.head{padding-bottom:var(--s-5)}
}
.headblock .station{margin-bottom:var(--s-2)}
.headblock h1{margin-bottom:var(--s-3)}
.headblock .lede{margin-bottom:0}
.plate + .wrap > main,.plate + .wrap main{padding-top:var(--s-4)}
.plate + .wrap{padding-top:0}

/* ── the year chart ─────────────────────────────────────────────────────────
   Twelve months of usage, of which the customer measured exactly one. That is
   the whole honest story of the free tool, so the chart tells it directly: the
   month off their bill is a solid bar with a station triangle over it, and the
   eleven we inferred are hatched. Nobody has to read a caveat to see which is
   which.

   Bars are flex rather than a grid so a missing month cannot draw a dead cell,
   the same reason .tiles is flex. */
.ycurve{margin:16px 0 0}
.ycurve .bars{display:flex;align-items:flex-end;gap:3px;height:132px;
  border-bottom:1px solid var(--rule2);padding-bottom:0}
.ycurve .bar{flex:1 1 0;min-width:0;position:relative;display:flex;
  flex-direction:column;justify-content:flex-end;height:100%}
.ycurve .bar i{display:block;width:100%;background:var(--trailbg);
  border:1px solid var(--trail);border-bottom:none;
  background-image:repeating-linear-gradient(45deg,transparent 0 3px,rgba(70,88,58,.22) 3px 4px)}
/* The measured month. Solid, and marked. */
.ycurve .bar.anchor i{background:var(--flarebg);border-color:var(--flare);
  background-image:none}
.ycurve .bar.anchor::before{content:"";position:absolute;left:50%;top:-11px;
  transform:translateX(-50%);width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-bottom:9px solid var(--flare)}
.ycurve .lbls{display:flex;gap:3px;margin-top:6px}
.ycurve .lbls span{flex:1 1 0;min-width:0;text-align:center;font-family:var(--mono);
  font-size:9px;letter-spacing:.02em;color:var(--ink3);overflow:hidden}
.ycurve .lbls span.anchor{color:var(--flare-ink);font-weight:700}
.ycurve figcaption{font-size:13.5px;color:var(--ink2);margin:12px 0 0}

/* ── the traverse ───────────────────────────────────────────────────────────
   A surveyor's traverse: numbered stations joined by a bearing line. Used for
   any ordered sequence where the order is real — the steps of the service, in
   order, each one a fixed point. Not decoration and not for unordered lists. */
.traverse{list-style:none;margin:20px 0 0;padding:0;position:relative;
  display:flex;flex-direction:column;gap:18px}
/* The line runs behind the stations, down the left on a phone. */
.traverse::before{content:"";position:absolute;left:13px;top:9px;bottom:9px;
  width:1px;background-image:linear-gradient(180deg,var(--rule2) 3px,transparent 3px);
  background-size:100% 7px}
.traverse li{position:relative;padding-left:42px;min-width:0}
.traverse .n{position:absolute;left:0;top:-1px;width:27px;height:27px;
  display:flex;align-items:center;justify-content:center;background:var(--canvas);
  border:1px solid var(--rule2);border-radius:50%;font-family:var(--mono);
  font-size:11px;font-weight:700;color:var(--flare-ink);z-index:1}
.traverse h3{margin:0 0 3px;font-size:17px}
.traverse p{margin:0;color:var(--ink2);font-size:14.5px}
/* From tablet up the traverse runs left to right, the way it is drawn on a map. */
@media (min-width:900px){
  .traverse{flex-direction:row;gap:0}
  .traverse::before{left:13px;right:13px;top:13px;bottom:auto;width:auto;height:1px;
    background-image:linear-gradient(90deg,var(--rule2) 3px,transparent 3px);
    background-size:7px 100%}
  .traverse li{flex:1 1 0;padding:42px 16px 0 0}
  .traverse .n{top:0;left:0}
}

/* ── the day ────────────────────────────────────────────────────────────────
   Twenty-four hours across, so a free-nights window can be drawn over a real
   load shape rather than described in a sentence. This is the one picture that
   explains why a monthly total cannot price a time-of-use plan. */
.day{margin:14px 0 0}
.day .strip{position:relative;height:64px;border:1px solid var(--rule2);
  background:var(--canvas);
  background-image:linear-gradient(90deg,var(--rule) 1px,transparent 1px);
  background-size:calc(100% / 8) 100%;overflow:hidden}
.day .win{position:absolute;top:0;bottom:0;background:var(--trailbg);
  border-left:1px solid var(--trail);border-right:1px solid var(--trail)}
.day .win b{position:absolute;left:50%;top:6px;transform:translateX(-50%);
  font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--trail-ink);white-space:nowrap}
.day svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.day .lbl{display:flex;justify-content:space-between;margin-top:6px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--ink3)}

/* ── price tiers ────────────────────────────────────────────────────────────
   Two things Scout sells and one it does not charge for, side by side. The free
   one is listed first and given the same weight, because the argument only
   works if the free thing is genuinely the same quality. */
.tiers{display:grid;grid-template-columns:1fr;gap:14px;margin:20px 0 0}
@media (min-width:900px){ .tiers{grid-template-columns:repeat(3,1fr)} }
.tier{background:var(--panel);border:1px solid var(--rule);padding:22px 20px;
  display:flex;flex-direction:column}
.tier.lead{border-color:var(--flare);border-width:1.5px}
.tier .amt{font-family:var(--display);font-weight:800;letter-spacing:-.035em;
  font-size:38px;line-height:1;margin:8px 0 2px;font-variant-numeric:tabular-nums}
.tier .per{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink3);margin:0 0 14px}
.tier ul{list-style:none;margin:0 0 18px;padding:0;font-size:14.5px;
  color:var(--ink2);display:flex;flex-direction:column;gap:7px}
.tier li{padding-left:19px;position:relative}
.tier li::before{content:"";position:absolute;left:0;top:8px;width:0;height:0;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-bottom:7px solid var(--rule2)}
.tier.lead li::before{border-bottom-color:var(--flare)}
.tier .btn{margin-top:auto}


/* ══════════════════════════════════════════════════════════════════════════
   Moved out of index.html, 11 August 2026.

   These rules style the check form and the whole result — the answer card, the
   comparison table, the charts, the follow-ups. They were inline on the home
   page, which was fine while the home page WAS the result. Now the result has
   its own page (results.html) and the form appears on both, so they are shared
   UI by definition and belong in the one stylesheet.
   ═══════════════════════════════════════════════════════════════════════════ */

.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* "who are these people?" is a real question but never the main one, so the link
   stays quiet until you go looking for it. */
a.who{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule2)}
a.who:hover{border-bottom-color:var(--flare);color:var(--flare-ink)}

.blaze{display:inline-flex;flex-direction:column;gap:3px;vertical-align:middle;margin-right:9px}
.blaze i{display:block;width:9px;height:13px;background:var(--flare);border-radius:1px}
.blaze i:last-child{height:5px;opacity:.45}
.tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--ink3);text-transform:uppercase}
/* ---- site chrome: nav, the explainer, and a footer that is a footer ---- */
.mainnav{display:flex;gap:20px;align-items:center}
.mainnav a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink3);text-decoration:none;padding:3px 0;border-bottom:1.5px solid transparent}
.mainnav a:hover{color:var(--flare-ink);border-bottom-color:var(--flare)}
@media (max-width:720px){
  .fgrid{grid-template-columns:1fr;gap:22px}
  .mainnav{gap:14px}
  .mainnav a{font-size:10px}
}


/* The home page's opening block is the same .plate as every other page, at full
   strength rather than quiet because it is the front door. It used to be a
   second implementation (#contours) with its own copy of the image, its own
   masks, its own breakpoint at 820px and its own band height — which is exactly
   why the home page looked like a different site from the rest. */
.hero{position:relative}
.hero .wrap{position:relative;z-index:1}
/* The front door gets a little more air above the title; everything else about
   the block is the shared page head. */
.hero > .wrap.headblock{padding-top:var(--s-6)}
h1 span{display:block;color:var(--trail)}
.sub2{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--ink3);margin-top:12px}

/* ── the form ── */
form{background:var(--panel);border:1.5px solid var(--ink);margin:30px 0 0;padding:22px 24px}
.frow{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end}
.f{flex:1 1 190px;min-width:150px}
input,select{width:100%;font:inherit;font-size:17px;padding:11px 12px;border:1.5px solid var(--rule2);
  border-radius:3px;background:#fff;color:var(--ink);font-variant-numeric:tabular-nums}
input:focus,select:focus{outline:2px solid var(--flare);outline-offset:1px;border-color:var(--flare)}

/* A native select sizes itself by its own rules and reserves its own strip for
   the arrow, so sharing a padding rule with the text inputs leaves the two
   controls a few pixels apart in height and jams the chevron against the border.
   Draw the arrow ourselves: same box as an input, arrow where we put it.
   NOTE: the shorthand `background:#fff` above would wipe this image, so this
   rule has to stay after it, and any media query that re-sets `padding` on
   selects has to restore padding-right or the text runs under the chevron. */
select{-webkit-appearance:none;appearance:none;padding-right:34px;line-height:1.25;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23606669' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px}

.hint{font-size:13px;color:var(--ink3);margin-top:7px;line-height:1.45}
.wl{display:flex;flex-wrap:wrap;gap:10px;align-items:center;max-width:520px}
.wl input{flex:1 1 220px;width:auto;font-size:16.5px}
.wl .hint{flex:1 1 100%;margin-top:2px}
button{font:inherit;font-weight:700;font-size:16px;padding:12px 22px;border:none;border-radius:3px;
  background:var(--flare-btn);color:var(--canvas);cursor:pointer;white-space:nowrap}
button:disabled{background:var(--rule2);cursor:default}
button.ghost{background:none;color:var(--ink2);border:1.5px solid var(--rule2);font-size:14px;padding:8px 14px}
button.ghost[aria-pressed="true"]{background:var(--trailbg);border-color:var(--trail);color:var(--trail)}

fieldset{border:none;margin-top:18px;padding-top:16px;border-top:1px solid var(--rule)}
legend{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink3);font-weight:600;padding:0}
.chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:11px}

.err{background:var(--flarebg);border:1.5px solid var(--flare);padding:12px 15px;margin-top:16px;
  font-size:15px;color:var(--ink)}
[hidden]{display:none !important}

/* ── results ── */
#out{margin:38px 0 0}

.verdict{background:var(--panel);border:1.5px solid var(--ink);padding:22px 24px;margin-bottom:22px}
.verdict.win{border-color:var(--trail);background:var(--trailbg)}
.verdict.stay{border-color:var(--flare);background:var(--flarebg)}
.verdict .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:8px}
.verdict .big{font-size:31px;font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1.1;text-wrap:balance}
.verdict p{margin-top:10px;color:var(--ink2)}

.tbl{border:1.5px solid var(--ink);background:var(--panel);overflow-x:auto}
th.r,td.r{text-align:right}
td.r{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
tr.pick{background:var(--trailbg)}
tr.trap td{background:var(--flarebg)}
.adv{color:var(--ink3);text-decoration:line-through;font-weight:600}
.note::before{content:"";position:absolute;left:0;top:8px;width:8px;height:1.5px;background:var(--flare)}
.note.g{color:var(--good)}.note.g::before{background:var(--good)}
.surv{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--trail);margin-top:8px}


.astat .v small{display:block;font-size:12.5px;font-weight:600;letter-spacing:0;color:var(--ink3);margin-top:3px}
.astat.sv{background:var(--trailbg)}
.astat.sv .k{color:var(--trail)}
.astat.sv .v{color:var(--good)}
.astat.sv .v small{color:var(--trail)}
.astat.sv .n a{color:var(--trail)}

/* explanations, folded away until asked for */
.howh{font-family:var(--display);font-weight:800;letter-spacing:-.025em;font-size:26px;
  margin:46px 0 0}
#how{scroll-margin-top:18px}
.expl{margin-top:24px;border:1.5px solid var(--rule2);background:var(--panel)}
.expl details{border-bottom:1px solid var(--rule)}
.expl details:last-child{border-bottom:none}
.expl summary{cursor:pointer;padding:15px 20px;min-height:46px;font-size:15px;font-weight:600;color:var(--ink2);
  list-style:none;display:flex;align-items:center;gap:10px}
.expl summary::-webkit-details-marker{display:none}
.expl summary::before{content:"+";font-family:var(--mono);color:var(--flare-ink);font-weight:700;flex:none;width:11px}
.expl details[open] summary::before{content:"–"}
.expl summary:hover{color:var(--ink)}
.expl details > *:not(summary){padding:0 20px 4px 41px}
.expl details > p:last-child{padding-bottom:16px}
.expl p{font-size:14.5px;color:var(--ink2)}
.expl .tbl{margin:0 20px 14px 41px;width:auto}


td.cmp{font-size:13.5px;color:var(--ink2);line-height:1.45;font-weight:400}
tr.yard{background:var(--canvas2)}
tr.yard .pn{color:var(--ink2)}
td.cmp b{color:var(--ink)}
a.su{display:inline-block;font-size:12.5px;margin-top:6px;padding:4px 0;color:var(--flare-ink);font-weight:600;text-decoration:underline}
th.wide{width:29%}
th.narrow{width:34%}

/* ── the header row ─────────────────────────────────────────────────────────
   Three things were wrong with it, and all three were visible at a glance.

   1. The sort caret was an ::after INSIDE a right-aligned cell, so it took the
      rightmost position and shoved the label ~13px left of the data underneath.
      Only the two sortable columns did this, so those two labels floated while
      the other three sat correctly — which is what read as "they don't line up".
      The caret is now a ::before: the label's last character is the right edge,
      exactly like the number below it, and the caret hangs to its left.

   2. Only two of five columns carried any affordance, so the carets read as
      stray punctuation rather than a control. Every numeric column now sorts
      and every one shows the same mark. The rule is legible without a legend:
      numbers sort, prose does not.

   3. `.srt` set its own vertical padding, so sortable headers were taller than
      the rest and the row's text sat off-center. Headers are one height now. */
/* A bare caret next to a label is not self-explanatory — it reads as stray
   punctuation, which is exactly what it was taken for. Sortable headers are now
   drawn as what they are: a small control with a border, a hover state and a
   cursor, so the affordance is the shape rather than a glyph you have to
   interpret. One line of instruction sits above the table for the first time. */
/* Do NOT zero the padding here: it is what keeps the header's right edge on the
   same line as the figure below it. */
th.srt{cursor:pointer;user-select:none;position:relative;
  border-bottom:1px solid var(--rule2);box-shadow:inset 0 -3px 0 -2px var(--rule2)}
th.srt::before{content:"\2195";display:inline-block;font-size:9px;opacity:.5;
  margin-right:5px;vertical-align:1px}
th.srt.on::before{content:"\25B4";opacity:1}
th.srt.on[data-dir="desc"]::before{content:"\25BE"}
th.srt:hover{color:var(--ink)}
th.srt:hover::before{opacity:.9}
th.srt.on{color:var(--flare-ink)}
/* the underline is the control: quiet when available, accented when active */
th.srt:hover,th.srt.on{box-shadow:inset 0 -3px 0 -2px var(--flare)}

/* The numeric columns were crowding each other once three of them sorted. */
#cmp th.r,#cmp td.r,#allcmp th.r,#allcmp td.r{padding-left:20px}
.sorthint{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink3);margin:0 0 var(--s-2)}

/* Nothing should touch the card's rule. The row lines still run the full width;
   only the text is inset. */
#cmp th:first-child,#cmp td:first-child,
#allcmp th:first-child,#allcmp td:first-child{padding-left:16px}
#cmp th:last-child,#cmp td:last-child,
#allcmp th:last-child,#allcmp td:last-child{padding-right:16px}

/* The one recommendation the page makes beyond "this is cheapest". Marked with a
   trail blaze rather than an icon, because that is the mark this whole thing is
   named after. */
.nudge{display:flex;gap:14px;align-items:flex-start;border:1.5px solid var(--trail);
  background:var(--trailbg);padding:15px 18px;margin-top:18px;font-size:15px;color:var(--ink2)}
.nudge strong{color:var(--ink)}
.nudge a{color:var(--trail);font-weight:600;white-space:nowrap}
.nb{flex:none;width:11px;height:26px;margin-top:2px;border-radius:1px;background:var(--flare);
  box-shadow:0 30px 0 -6px var(--flare)}

/* The offer panel is the one place the brand gets to be itself at full strength,
   so it carries the instrument the whole thing is named after. Decorative, so it
   is aria-hidden and drops out entirely on a narrow screen. */
.uinner{position:relative;z-index:1}
.transit{position:absolute;right:-26px;bottom:-46px;width:330px;height:auto;
  mix-blend-mode:multiply;opacity:.42;pointer-events:none;user-select:none;
  /* The plate is printed on cream, so its corners would show as a rectangle against
     the panel. Feathered on both axes so only the engraving itself survives. */
  -webkit-mask-image:radial-gradient(ellipse 62% 62% at 62% 55%,#000 42%,transparent 78%);
  mask-image:radial-gradient(ellipse 62% 62% at 62% 55%,#000 42%,transparent 78%)}
@media (max-width:900px){ .transit{display:none} }


.warn{border:1.5px solid var(--flare);background:var(--flarebg);padding:16px 20px;margin-bottom:22px;font-size:15px}
.warn p{margin-top:9px;color:var(--ink2);font-size:14.5px}
/* Logos vary wildly in aspect ratio, so they get a fixed-width slot rather than
   their natural width, otherwise a wide logo shunts its company name right and
   the column stops being a column. The slot is always rendered, logo or not. */
.co{display:flex;gap:14px;align-items:flex-start}
.logobox{width:78px;flex:0 0 78px;height:24px;display:flex;align-items:center;
  justify-content:flex-start;padding-left:4px}
.tlogo{max-width:78px;max-height:24px;width:auto;height:auto;object-fit:contain;object-position:left center;
  /* Retailers supply whatever they supply. Most give SVG or PNG with alpha, but a
     few (Cirro among them) give a JPEG, which cannot be transparent and shows as a
     white card on any tinted row. Multiply drops the white and keeps the mark. */
  mix-blend-mode:multiply}
.cotext{min-width:0}
.why{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink3);margin-top:4px}
tr.pick .why{color:var(--trail)}
.foot-note{font-size:14px;color:var(--ink3);margin-top:12px;line-height:1.55}
.foot-note strong{color:var(--ink2)}
.caveat{border:1.5px solid var(--rule2);background:var(--canvas2);padding:16px 18px;margin-top:22px;font-size:14.5px;color:var(--ink2)}
.caveat b{color:var(--ink)}
.verdict p.rng{font-size:14px;color:var(--ink3);border-top:1px solid var(--rule);padding-top:11px;margin-top:13px}
.verdict p.rng strong{color:var(--ink2)}
footer p{;margin-bottom:8px}

/* ── the answer ── */
.answer{border:1.5px solid var(--trail);background:var(--panel);margin-bottom:26px}
.ahead{display:flex;align-items:center;gap:16px;padding:18px 22px;background:var(--trailbg);
  border-bottom:1.5px solid var(--trail);flex-wrap:wrap}
.alogo{height:34px;width:auto;max-width:150px;object-fit:contain;mix-blend-mode:multiply}
.aco{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--trail);font-weight:700}
.aplan{font-size:23px;font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.15}
.abody{display:grid;grid-template-columns:repeat(3,1fr)}
.astat{padding:18px 22px;border-right:1px solid var(--rule)}
.astat:last-child{border-right:none}
.astat .k{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:6px;line-height:1.35}
.astat .v{font-size:31px;font-family:var(--display);font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.astat .n{font-size:13px;color:var(--ink3);margin-top:5px;line-height:1.4}
.apre{padding:0 22px 4px;font-size:14.5px;color:var(--ink2)}
.aacts{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:16px 22px 4px;border-top:1px solid var(--rule)}
a.btn{display:inline-block;text-decoration:none;background:var(--flare-btn);color:var(--canvas);
  font-weight:700;font-size:15.5px;padding:12px 20px;border-radius:3px}
.lnk{font-size:14px;color:var(--ink2)}
.lnk a,a.lnk{color:var(--ink2)}
.adis{padding:10px 22px 18px;font-size:13px;color:var(--ink3)}

table.bill{min-width:0}
table.bill td{padding:11px 18px}
table.bill tr.tot td{border-top:1.5px solid var(--ink);border-bottom:none;font-weight:800;font-size:17px}

/* ── the pitch ── */
.upsell{border:1.5px solid var(--trail);background:var(--trailbg);color:var(--ink);
  padding:26px 26px 22px;margin-top:34px;position:relative;overflow:hidden}
.upsell .k{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--trail);font-weight:700;margin-bottom:9px}
.upsell h3{font-size:24px;font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.18;margin-bottom:12px;
  text-wrap:balance}
.upsell p{color:var(--ink2);margin-bottom:14px}
.upsell ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:12px}
.upsell li{color:var(--ink2);padding-left:19px;position:relative;line-height:1.55}
.upsell li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:2px;background:var(--trail)}
.upsell strong{color:var(--ink)}
.upsell .pitch{border-top:1px solid #c6d2b8;padding-top:15px}
.uacts{display:flex;gap:15px;align-items:center;flex-wrap:wrap;margin-top:4px}
.uacts .lnk{color:var(--ink3);font-size:13.5px}

@media(max-width:640px){
  .abody{grid-template-columns:1fr}
  .astat{border-right:none;border-bottom:1px solid var(--rule)}
  .astat:last-child{border-bottom:none}
  .astat .v{font-size:27px}
  .expl details > *:not(summary){padding-left:20px}
  .expl .tbl{margin-left:20px;margin-right:20px}
  .aplan{font-size:20px}
  .upsell{padding:20px 18px}
  .upsell h3{font-size:20px}
  a.btn{display:block;text-align:center;width:100%}
}

@media(max-width:640px){
  form{padding:18px 16px}
  .verdict{padding:18px 16px}
  .verdict .big{font-size:25px}
}/* One theme, on purpose. The page is a warm paper survey sheet; that is the whole
   visual idea, and a dark version of it would be a different document. color-scheme
   is pinned to light so the browser does not dark-ify form controls underneath us. */
/* Keyboard focus. Visible on every interactive thing, in both themes. */

button:focus-visible,a:focus-visible,summary:focus-visible,th.srt:focus-visible{outline-offset:3px}
summary{outline-offset:3px}

/* Motion is minimal here by design, but the contour drawing and the smooth scroll
   both respect a stated preference for less of it. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ── Phones ───────────────────────────────────────────────────────────────────
   A five-column comparison table cannot survive a 375px screen. Scrolled
   sideways it hid 394px of itself, including the entire column explaining why
   you would pick each plan, which is the only reason the table exists. Below
   720px every row becomes its own small card: identity on top, the three figures
   on one labelled line, then the reason in full. Nothing scrolls sideways and
   nothing is hidden. */
@media (max-width:720px){
  .wide-only{display:none}

  /* ── header ──
     The tagline sat beside a 19px wordmark and wrapped into it. Below the fold
     it is decoration, so it goes. */
  header .wrap{height:56px}
  .tag{display:none}
  .logo{font-size:18px}

  /* ── hero ──
     Eight lines of serif-length prose before anyone reaches the form is too much
     on a 375px screen. Tighter scale, tighter measure, and the second line drops
     to a footnote size. */
  /* room for the survey band pinned to the bottom of the hero (see the 820px
     block above, which this rule would otherwise override) */
  .hero{padding:30px 0 122px}
  h1{font-size:clamp(28px,8.4vw,36px);letter-spacing:-.03em;max-width:none}
  .sub2{font-size:11.5px;margin-top:10px;line-height:1.5}

  /* ── form ──
     Every control goes full width and the primary action becomes a full-width
     button. A half-width CTA floating left reads as secondary on a phone. */
  form{margin-top:22px;padding:16px 15px}
  .frow{gap:13px}
  .f{flex:1 1 100%;min-width:0}
  .frow > div:last-child{flex:1 1 100%}
  .frow button[type=submit]{width:100%;padding:14px 20px;font-size:16.5px}
  input,select{font-size:16.5px;padding:12px 12px}   /* >=16px stops iOS zooming on focus */
  select{padding-right:38px}                         /* the shorthand above drops it */
  label{font-size:9.5px}
  legend{font-size:9.5px;line-height:1.5}
  .hint{font-size:12.5px}
  fieldset{margin-top:15px;padding-top:14px}
  .chips{gap:8px}
  .chips button{flex:1 1 calc(50% - 4px);font-size:13.5px;padding:10px 8px}

  /* the offer panel's instrument is decoration and costs 86 KB on a phone */
  .upsell{padding:20px 17px}
  .upsell h3{font-size:21px}
  .upsell li,.upsell p{font-size:15px}

  #cmp, #cmp thead, #cmp tbody, #cmp tr, #cmp td,
  #allcmp, #allcmp thead, #allcmp tbody, #allcmp tr, #allcmp td{display:block;width:auto;min-width:0}
  #cmp thead, #allcmp thead{position:absolute;left:-9999px}          /* headers become the data-l labels */
  .tbl{overflow-x:visible}
  #cmp, #allcmp{min-width:0}
  #cmp tr, #allcmp tr{border-bottom:1px solid var(--rule);padding:16px 16px 18px}
  #cmp tr:last-child, #allcmp tr:last-child{border-bottom:none}
  #cmp tr.yard, #allcmp tr.yard{background:var(--canvas2)}
  #cmp td, #allcmp td{border:none;padding:0}
  /* The stacked row owns its own inset, so the desktop first/last-cell padding
     must not stack on top of it. */
  #cmp td:first-child, #allcmp td:first-child{padding-left:0}
  #cmp td:last-child, #allcmp td:last-child{padding-right:0}
  #cmp td.r, #allcmp td.r{text-align:left;display:inline-block;margin:12px 22px 0 0}
  #cmp td.r::before, #allcmp td.r::before{content:attr(data-l);display:block;font-family:var(--mono);font-size:9.5px;
    letter-spacing:.11em;text-transform:uppercase;color:var(--ink3);font-weight:600;margin-bottom:3px}
  #cmp td.cmp, #allcmp td.cmp{margin-top:14px;padding-top:13px;border-top:1px solid var(--rule);font-size:14.5px}
  .co{gap:11px}
  .logobox{width:56px;flex:0 0 56px;height:20px}
  .tlogo{max-width:56px;max-height:20px}

  /* the answer card was 721px tall on a phone; tighten it so the recommendation
     and the first alternatives are reachable without a long scroll */
  .astat{padding:13px 16px}
  .astat .v{font-size:25px}
  .astat .n{font-size:12.5px}
  .ahead{padding:14px 16px}
  .aacts{padding:14px 16px 4px;gap:10px}
  .adis{padding:8px 16px 14px;font-size:12.5px}
  .aplan{font-size:19px}
  h2{font-size:22px}
  .s2{font-size:15px}
}


/* ── vertical rhythm ────────────────────────────────────────────────────────
   The spacing complaint was real and it was everywhere: headings sat almost on
   top of the box above them, and two sections could run together with no more
   air than two paragraphs. These are the only rules that set the gaps between
   blocks; individual components no longer do it themselves. */
main > section,
.wrap > section{margin-bottom:var(--s-6)}
main > section:last-child,
.wrap > section:last-child{margin-bottom:var(--s-7)}

/* A run-in heading inside the result needs real air above it and a little
   below, or it reads as a caption for the thing it is actually introducing. */
h3.sec,.sec{font-size:19px;font-family:var(--display);font-weight:800;
  letter-spacing:-.025em;margin:var(--s-6) 0 var(--s-2)}
.sec:first-child{margin-top:0}
.s2{margin-bottom:var(--s-4);color:var(--ink2)}
.caveat + .sec,
.tbl + .sec,
figure + .sec,
table + .sec{margin-top:var(--s-6)}

/* Blocks that follow one another inside a section. */
.answer,.caveat,.tbl,.nextup,.allbtn,.ycurve,.gauge,.clock{margin-bottom:var(--s-4)}

/* ── the comparison row ─────────────────────────────────────────────────────
   Three fixes from a real read of the page: the logo sat flush on the cell's
   left rule, the retailer name was set in the display face at a size that read
   as shouting next to the plan name, and the exit fee was printed twice in the
   same row — once under the name and again in the column headed "to leave
   early". */
td .co{padding-left:2px}
.pn{font-family:var(--body);font-weight:600;font-size:15px;letter-spacing:0}
.pr{font-size:13.5px;color:var(--ink2);margin-top:1px}
/* .fee is gone from the row entirely — the column already says it. */

/* ── buttons where a button belongs ─────────────────────────────────────────
   "Want to see the rest?" and the follow-ups were anchors styled as text. If it
   performs an action, it looks like a control. */
.btnrow{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}
.btnrow .btn{flex:1 1 auto}
@media (min-width:700px){ .btnrow .btn{flex:0 0 auto} }

/* ── the blocks that were never styled ─────────────────────────────────────
   `.btn2`, `.btn3`, `.allbtn`, `.allcopy`, `.nextup`, `.nx`, `.biz`, `.wl2`,
   `.wlfile`, `.bizq`, `.opt` and `.tiedline` were used in the result markup and
   defined nowhere. That is why "See all 159 plans" and "Send it to me" rendered
   as bare links, and why the follow-up blocks ran together with no spacing —
   the complaint about both was exactly right. `.btn2`/`.btn3` are now aliases
   of the real button so there is one control style, not three. */
.btn2,.btn3{display:inline-block;border:none;cursor:pointer;font:inherit;
  font-size:16px;font-weight:600;padding:13px 22px;background:var(--flare-btn);
  color:#fff;text-decoration:none;text-align:center}
.btn2:hover,.btn3:hover{background:var(--flare-ink)}
.btn2{background:none;color:var(--ink);border:1.5px solid var(--ink);padding:11.5px 20.5px}
.btn2:hover{background:var(--ink);color:var(--canvas)}

/* "Want to see the rest?" — a card with a real control in it. */
.allbtn{background:var(--panel);border:1px solid var(--rule);padding:20px;
  display:flex;flex-direction:column;gap:var(--s-3)}
.allcopy h3{margin:0 0 var(--s-1)}
.allcopy p{margin:0;color:var(--ink2);font-size:14.5px}
.allbtn .btn2{align-self:stretch}
@media (min-width:700px){
  .allbtn{flex-direction:row;align-items:center;justify-content:space-between;
    gap:var(--s-5);padding:22px 24px}
  .allbtn .btn2{align-self:auto;flex:none}
}

/* The two follow-ups, side by side once there is room. */
.nextup{display:grid;grid-template-columns:1fr;gap:var(--s-3)}
@media (min-width:900px){ .nextup{grid-template-columns:1fr 1fr;gap:var(--s-4)} }
.nx{background:var(--panel);border:1px solid var(--rule);padding:20px;
  display:flex;flex-direction:column}
.nx h4{font-family:var(--display);font-weight:800;font-size:18px;
  letter-spacing:-.02em;margin:0 0 var(--s-2)}
.nx p{color:var(--ink2);font-size:14.5px;margin:0 0 var(--s-3)}
.nx .btn2{margin-top:auto;align-self:flex-start}
.nx.biz{border-left:1px solid var(--rule)}

/* Email + button: stacked on a phone so the thumb gets the full width. */
.wl2{display:flex;flex-direction:column;gap:var(--s-2);margin-bottom:var(--s-3)}
.wl2 input{width:100%}
.wl2 .btn3{width:100%}
@media (min-width:700px){
  .wl2{flex-direction:row}
  .wl2 input{flex:1 1 auto}
  .wl2 .btn3{width:auto;flex:none}
}
.wlfile{margin-bottom:var(--s-3)}
.wlfile input[type=file]{font-size:14px;padding:9px 11px;background:var(--canvas)}
.opt{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink3);margin-left:6px}
.bizq{display:flex;gap:9px;align-items:flex-start;text-transform:none;
  font-family:var(--body);font-size:14.5px;letter-spacing:0;color:var(--ink2);
  margin-bottom:var(--s-2);cursor:pointer}
.bizq input{flex:none;margin-top:2px}

.tiedline{background:var(--trailbg);border:1px solid var(--trail);
  padding:14px 16px;margin:0 0 var(--s-4);font-size:14.5px;color:var(--trail-ink)}
.tiedline b{color:var(--ink)}

/* Restated last so it wins: section headings step down on a phone. */
@media (max-width:699px){ h3.sec,.sec{font-size:17px} }

/* The source column is a label, not a control. It used to render the measured
   month as a `.pill` — a bordered chip in the button family — next to eleven
   rows of plain muted text, so one cell in the table looked pressable and
   twelve times heavier than its neighbors. It is the same emphasis the chart
   gives that month: color and weight, no box. */
.measured{color:var(--flare-ink);font-weight:600}

/* ── the rating ─────────────────────────────────────────────────────────────
   The Commission's complaint scorecard, shown as five stars because everybody
   can already read one. Its scale runs 5 = lowest complaint rate to 1 = highest,
   so more stars is better and nothing is inverted. */
.stars{letter-spacing:1px;color:var(--rule2);white-space:nowrap;vertical-align:middle}
.stars .on{color:var(--flare)}
.ct{font-family:var(--mono);font-size:11px;color:var(--ink3);margin-left:7px}
.norate{color:var(--ink3);font-size:13.5px}


/* ── the measure ────────────────────────────────────────────────────────────
   Long-form text gets a container that caps its width. Everything inside then
   fills that container, so no paragraph stops short of its neighbor. Cards and
   panels set no measure of their own: they are already narrow enough to be one,
   which is why boxed text always looked right while open prose did not. */
.headblock .lede,
.measure{max-width:var(--measure)}
.prose{max-width:var(--measure)}
.plate:not(.quiet) .headblock .lede{max-width:calc(var(--measure) - 8ch)}
.expl details p,.s2,.allcopy p,.upsell p,.upsell li,.warn p,.adis,
.foot-note,.verdict p,.fdis,footer p,.sub2{max-width:none}

/* ── the ceiling ────────────────────────────────────────────────────────────
   The most a plan change can be worth, said before the recommendation rather
   than after it. Tinted so it reads as the site talking rather than as another
   number in the result, and no measure of its own: it fills the answer card. */
.ceil{background:var(--canvas);padding:var(--s-3) var(--s-4);
  font-size:15px;line-height:1.55;color:var(--ink2);border-top:1px solid var(--rule)}
.ceil b{color:var(--ink);font-weight:650}
.ceil a{display:inline-block;margin-top:6px;color:var(--flare);font-weight:600;
  text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:1px}
.ceil a:hover{color:var(--ink)}

/* ── the verification line ──────────────────────────────────────────────────
   Only appears on a plan whose price we recomputed from the retailer's own fact
   label. It carries the date and the age, and sends the reader to the retailer's
   live document rather than our copy, because theirs is the one that governs. */
.vchk{padding:var(--s-2) var(--s-4) 0;font-size:14px;line-height:1.55;color:var(--ink2)}
.vchk b{color:var(--ink);font-weight:650}
.vchk a{color:var(--flare);font-weight:600;text-decoration:none;
  border-bottom:1.5px solid currentColor}
.vchk a:hover{color:var(--ink)}

/* The quiet way into a field almost nobody needs. */
.lk2{color:var(--ink3);text-decoration:none;border-bottom:1px dotted var(--ink3)}
.lk2:hover{color:var(--flare);border-bottom-color:currentColor}