/* Scout for facilities.

   The survey metaphor earns its place here in a way it never quite did on the
   consumer side. A scout goes out ahead and maps the ground before anyone
   commits to crossing it, and that is exactly the job: a facility's electricity
   is terrain, and the single most expensive feature of that terrain is a peak.
   So the drawings are contour lines, ridge profiles and strata, and they are
   drawings of the customer's real data rather than decoration.

   Tokens are Scout's. What changes is the weight: a business owner reading this
   between jobs needs denser type, flatter surfaces and less air than a homeowner
   browsing on a sofa. */

/* The wordmark and headings are Instrument Sans, same as the rest of Scout.
   Declared here rather than imported so this stylesheet stands alone. */
@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}
@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}

:root{
  --ink:#14181A;          /* the brand ink */
  --ink2:#474C4F;
  --ink3:#6b7175;
  --canvas:#f4efe3;       /* survey paper */
  --panel:#fffdf8;
  --rule:#e3dccb;
  --rule2:#cfc5ae;
  --flare:#c4571f;        /* the mark's orange, used for what costs money */
  --flare-ink:#a04a1c;
  --slate:#3d4a52;        /* the professional counterweight */
  --trail:#5d6b4a;        /* what is fine, or already handled */
  --trail-ink:#46583a;
  --warn:#8a5a2b;
  --display:'Instrument Sans',Archivo,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,'Roboto Mono',monospace;
  --s1:6px; --s2:10px; --s3:16px; --s4:24px; --s5:38px; --s6:60px; --s7:92px;
  --measure:70ch;         /* one reading measure, set on containers only */
}

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

.wrap{max-width:1160px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.narrow{max-width:820px}

/* ── the survey band ───────────────────────────────────────────────────────
   Contour lines behind a section, so the page reads as a map even where there
   is no chart. Kept faint: it is ground, not content. */
.terrain{position:relative;overflow:hidden;background:var(--canvas)}
.terrain > .contours{position:absolute;inset:0;opacity:.5;pointer-events:none}
.terrain > *:not(.contours){position:relative}

/* ── type ──────────────────────────────────────────────────────────────────*/
h1,h2,h3{font-family:var(--display);letter-spacing:-.028em;line-height:1.1;
  text-wrap:balance;margin:0 0 var(--s3)}
h1{font-size:clamp(34px,5.6vw,60px);font-weight:800}
h2{font-size:clamp(25px,3.4vw,36px);font-weight:800}
h3{font-size:clamp(18px,2vw,21px);font-weight:600;letter-spacing:-.018em}
p{margin:0 0 var(--s3)}
.lede{font-size:clamp(18px,2.2vw,22px);line-height:1.5;color:var(--ink2)}
/* No measure here. The column is the measure: the page is narrow enough that a
   line inside it is comfortable, so text simply fills whatever contains it and
   every block on the page ends at the same place. Capping the paragraph instead
   is what leaves one block short of the one beside it for no visible reason. */
.prose{max-width:none}
.prose p:last-child{margin-bottom:0}

/* A survey stake: the label that marks a section, with the bearing tick. */
.stake{display:flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--flare-ink);margin:0 0 var(--s3)}
.stake::before{content:"";width:0;height:0;flex:none;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-bottom:9px solid var(--flare)}
.stake.q{color:var(--ink3)}
.stake.q::before{border-bottom-color:var(--rule2)}

section{padding:var(--s6) 0}
section + section{border-top:1px solid var(--rule)}
.tight{padding:var(--s5) 0}

/* ── nav ───────────────────────────────────────────────────────────────────*/
.top{position:sticky;top:0;z-index:40;background:rgba(255,253,248,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.topin{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);padding-top:13px;padding-bottom:13px}
.logo{display:inline-flex;align-items:baseline;gap:0;text-decoration:none;
  font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:.1em;
  color:var(--ink)}
/* The mark stands in for the letter O, so the target is not the cap height — it
   is the O's own ink band, which is taller at BOTH ends. Measured off rendered
   Instrument Sans 600 (320px, pixel-scanned, so these are the real outlines and
   not a font-table guess):

       cap height (H, T)   0.7203em
       O ink               0.7422em, i.e. 0.0109em of overshoot above the cap
                           AND 0.0109em below the baseline — 3.04% taller than
                           a flat-topped letter, which is what makes a circle
                           read the SAME height as one instead of smaller.

   The ring paints its box exactly edge to edge (r 26.5 + half of stroke 11 = 32
   in a 64 viewBox, verified 1.00000 painted/box), so box height IS ink height:
   0.742em. This is a flex line on `align-items:baseline`, and a replaced element's
   baseline is its BOTTOM margin edge, so the box bottom lands on the baseline by
   default and the mark has to be pushed DOWN by the O's bottom overshoot, not up.

   That is the bug that survived three fixes. `top:-1px` on a 22px wordmark lifted
   the ring 1.24px clear of the baseline the other four letters sit on, leaving a
   white gap under the O while its top pushed 1.4px past their caps. Nothing was
   the size of anything; the mark simply floated, and a letter that does not reach
   the baseline reads as a small letter. The height barely moved (16.50 → 16.33px);
   the offset moved 1.24px.

   Sizes: the box is 0.76em, not the O's 0.742em, and it is centred on the O's
   band (top = 0.76/2 - 0.3602 = 0.02em). The extra 0.009em at each end is an
   antialiasing allowance, measured rather than guessed: the ring's extremes are
   the tangent points of an arc, and Chromium's geometric antialiasing leaves that
   apex row too faint to read, while the font rasterizer's hinting keeps the O's
   apex solid. Same nominal height, and the ring still renders ~0.73px shorter.
   Averaged over 8 sub-pixel layout phases x deviceScaleFactor 2 and 3, against a
   real typeset O on the same page:

       0.75em / top:-1px   (shipped)  top -1.083px  bottom -1.625px   <- the bug
       0.742em / top:.011em (exact)   top +0.292    bottom -0.438
       0.76em  / top:.02em  (this)    top +0.042    bottom -0.042

   So the mark carries 0.0199em of overshoot above the cap and 0.0198em below the
   baseline — 2.8% of cap at each end, against the O glyph's own 1.5%. Round forms
   need the extra; that is the whole reason a well-drawn O is taller than an H, and
   an arc that is antialiased rather than hinted needs a little more of it again. */
.logo .mk{width:.76em;height:.76em;display:inline-block;vertical-align:baseline;
  position:relative;top:.02em;margin:0 .02em}
.logo .sub{font-family:var(--mono);font-weight:500;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);
  margin-left:11px;align-self:center}
.navl{display:flex;gap:var(--s4);align-items:center}
.navl a{font-size:15px;color:var(--ink2);text-decoration:none}
.navl a:hover{color:var(--ink)}
/* `.navl a` is more specific than `.btn`, so inside the nav the button lost its
   white and rendered dark ink on the dark orange, which is unreadable. The
   button keeps its own color wherever it is put. */
.navl a.btn,.navl a.btn:hover{color:#fff}
/* A flex child shrinks when its row runs out of room, so the same button wrapped
   onto two lines on the pages with more navigation links and stayed on one where
   there were fewer. A button keeps its shape wherever it is put. */
.navl .btn{flex:0 0 auto;white-space:nowrap}
.navl a{white-space:nowrap}
@media (max-width:1000px){ .navl a.hide-s{display:none} }

/* ── buttons ───────────────────────────────────────────────────────────────*/
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--flare-ink);
  color:#fff;text-decoration:none;font-weight:650;font-size:16.5px;
  padding:14px 24px;border-radius:3px;border:0;cursor:pointer;
  transition:background .14s ease}
.btn:hover{background:#8a3f16}
.btn.ghost{background:none;color:var(--ink);border:1.5px solid var(--rule2)}
.btn.ghost:hover{background:var(--panel);border-color:var(--ink3)}
.cta{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin:var(--s4) 0 0}
.cta .note{font-size:14.5px;color:var(--ink3);margin:0}

/* ── panels, grids ─────────────────────────────────────────────────────────*/
.grid{display:grid;gap:var(--s4)}
@media (min-width:760px){
  .g2{grid-template-columns:1fr 1fr;column-gap:var(--s6)}
  .g3{grid-template-columns:repeat(3,1fr)}
}
.card{background:var(--panel);border:1px solid var(--rule);border-radius:4px;
  padding:var(--s4)}
.card h3{margin-bottom:var(--s2)}
.card p:last-child{margin-bottom:0}
.card .fig{font-family:var(--display);font-weight:800;font-size:34px;
  letter-spacing:-.035em;line-height:1;margin:0 0 4px}
.card .cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink3);margin:0 0 var(--s2)}

/* the two-column contrast: them, then us */
.vs{display:grid;gap:1px;background:var(--rule2);border:1px solid var(--rule2);
  border-radius:4px;overflow:hidden}
@media (min-width:820px){ .vs{grid-template-columns:1fr 1fr} }
.vs > div{background:var(--panel);padding:var(--s4)}
.vs > div.them{background:#f7f2e7}
.vs h3{display:flex;align-items:center;gap:9px}
.vs ul{list-style:none;margin:var(--s3) 0 0;padding:0}
.vs li{position:relative;padding-left:22px;margin-bottom:11px;color:var(--ink2);
  font-size:15.5px;line-height:1.5}
.vs li::before{content:"";position:absolute;left:0;top:9px;width:11px;height:2px;
  background:var(--rule2)}
.vs .us li::before{background:var(--flare)}

/* ── the strata: a bill drawn as a cross-section ───────────────────────────*/
.strata{width:100%;border-collapse:collapse;font-size:15.5px;margin:var(--s3) 0 0}
.strata td{padding:11px 0;border-bottom:1px solid var(--rule);vertical-align:baseline}
.strata td.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.strata tr:last-child td{border-bottom:0}
.strata tr.sum td{border-top:2px solid var(--ink);border-bottom:0;font-weight:700}
.swatch{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:9px}

/* ── findings ──────────────────────────────────────────────────────────────*/
.find{border:1px solid var(--rule);border-radius:4px;background:var(--panel);
  padding:var(--s4);margin-bottom:var(--s3)}
.find .hd{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
  align-items:baseline;justify-content:space-between;margin-bottom:var(--s2)}
.find h3{margin:0}
.find .amt{font-family:var(--mono);font-weight:600;font-size:19px;color:var(--flare-ink);
  white-space:nowrap}
.find .amt.ok{color:var(--trail-ink)}
.find p{margin:0 0 var(--s2);color:var(--ink2);font-size:15.5px}
.find p:last-child{margin-bottom:0}
.tag{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;padding:3px 8px;border-radius:2px;background:var(--canvas);
  color:var(--ink3);border:1px solid var(--rule2)}
.tag.act{background:#fbeadc;color:var(--flare-ink);border-color:#e8c7ae}
.tag.no{background:#eef0e9;color:var(--trail-ink);border-color:#d3dac7}

/* ── steps ─────────────────────────────────────────────────────────────────*/
.steps{counter-reset:s;display:grid;gap:var(--s4)}
@media (min-width:820px){ .steps{grid-template-columns:repeat(3,1fr)} }
.step{position:relative;padding-top:var(--s4)}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:0;left:0;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--flare);
  font-weight:700}
.step::after{content:"";position:absolute;top:22px;left:0;right:0;height:1px;
  background:var(--rule2)}
.step h3{margin-top:var(--s3)}
.step p{font-size:15.5px;color:var(--ink2);margin:0}

/* ── report sheet ──────────────────────────────────────────────────────────*/
.sheet{background:var(--panel);border:1px solid var(--rule2);border-radius:4px;
  padding:clamp(22px,4vw,48px);margin:var(--s4) 0 0}
.sheet .head{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:baseline;
  justify-content:space-between;border-bottom:2px solid var(--ink);
  padding-bottom:var(--s3);margin-bottom:var(--s4)}
.meta{font-family:var(--mono);font-size:11.5px;color:var(--ink3);letter-spacing:.03em}
/* The label is small mono and the value is larger sans, so the two only line up
   if both sit in the same baseline group. Setting align-self on the term alone
   left the definition stretched, which put its text at the top of the row and
   the label six pixels above the value's baseline on every line. */
.kv{display:grid;grid-template-columns:auto 1fr;gap:7px var(--s3);
  font-size:15px;margin:0;align-items:baseline}
.kv dt{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink3)}
.kv dd{margin:0;font-weight:600}

.banner{background:#fbeadc;border-radius:3px;padding:var(--s3) var(--s4);
  margin:0 0 var(--s4);font-size:15px;color:var(--ink2)}
.banner b{color:var(--ink)}

footer{border-top:1px solid var(--rule);padding:var(--s5) 0;margin-top:var(--s6);
  font-size:14.5px;color:var(--ink3)}
footer a{color:var(--ink2)}
.foot{display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between}

.fine{font-size:13.5px;color:var(--ink3);line-height:1.55}
.hr{height:1px;background:var(--rule);border:0;margin:var(--s5) 0}

/* On a phone the nav has room for the mark and one action, and nothing else.
   The descriptor and the section links are the first things to go: an owner
   opening this from a text message wants the button. */
@media (max-width:560px){
  .logo .sub{display:none}
  .topin{gap:var(--s2);padding-top:10px;padding-bottom:10px}
  .navl{gap:var(--s3)}
  .navl .btn{padding:11px 15px;font-size:15px}
  .logo{font-size:20px}
}


/* Three headline figures side by side. Used on the report and by the tool, so it
   lives here rather than in either page. */
.hero-num{display:grid;gap:var(--s3);margin:var(--s4) 0 0}
@media (min-width:700px){ .hero-num{grid-template-columns:repeat(3,1fr)} }
.hn{background:var(--panel);border:1px solid var(--rule);border-radius:4px;padding:var(--s4)}
.hn .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);margin:0 0 8px}
.hn .v{font-weight:800;font-size:clamp(26px,3.2vw,34px);letter-spacing:-.035em;line-height:1;margin:0}
.hn .s{font-size:13.5px;color:var(--ink3);margin:7px 0 0;line-height:1.45}
.hn.big{background:#fbeadc;border-color:#e8c7ae}
.hn.big .v{color:var(--flare-ink)}
.proj{background:var(--panel);border:1px solid var(--rule2);border-radius:4px;
  padding:var(--s4);margin:var(--s3) 0 0}
.proj table{width:100%;border-collapse:collapse;font-size:15.5px}
.proj td{padding:9px 0;border-bottom:1px solid var(--rule)}
.proj td.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.proj tr:last-child td{border-bottom:0}
.proj tr.big td{border-top:2px solid var(--ink);border-bottom:0;font-weight:800;font-size:19px;
  padding-top:var(--s3)}

.legend{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);font-family:var(--mono);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);
  margin:0 0 var(--s3)}

/* ── on paper ───────────────────────────────────────────────────────────────
   A report a business owner will print, file, and hand to a bookkeeper or a
   landlord. That is a different object from the page: no navigation, no calls to
   action, nothing that assumes a cursor. What it must keep is every figure and
   every qualification, because a printed report that quietly drops the caveats
   is worse than one that was never printed.

   The top and bottom margins are wide enough to hold a running band, which is
   drawn in a second pass and merged in, because Chrome implements none of the
   CSS paged-media margin boxes and counter(page) resolves to zero. */
@media print{
  @page{ size:letter; margin:22mm 16mm 20mm 16mm; }

  html,body{background:#fff;font-size:10.2pt;line-height:1.5}
  .top,footer,.cta,.btn,#form,.err,nav{display:none !important}
  /* the closing section is a call to action, not part of the report */
  body > .wrap > section:last-of-type{display:none}

  .wrap{max-width:none;padding:0}
  .sheet{border:0;border-radius:0;padding:0;margin:0;background:#fff}
  section{padding:0 0 6mm;border:0}
  section + section{border-top:0}

  h1{font-size:20pt} h2{font-size:14pt} h3{font-size:11.5pt}
  .lede{font-size:11pt}
  .stake{font-size:8pt;letter-spacing:.16em;margin-bottom:2mm}
  .fine,.meta{font-size:8.4pt}
  p{margin:0 0 3mm}
  .hr{margin:7mm 0}

  /* Color is data here: the strata bars and the swatches beside them are the
     only thing tying a figure to a layer, so they have to survive the printer's
     default of dropping backgrounds. */
  *{ -webkit-print-color-adjust:exact; print-color-adjust:exact }

  /* Nothing that reads as one thought should be split across a page. */
  .find,.hn,.proj,.banner,figure,svg,table{break-inside:avoid;page-break-inside:avoid}
  h1,h2,h3{break-after:avoid;page-break-after:avoid}
  .stake{break-after:avoid}
  .hero-num{grid-template-columns:repeat(3,1fr);gap:4mm}
  .hn{padding:4mm;border:1px solid #d8cfbb}
  .find{padding:4mm;margin-bottom:4mm;border:1px solid #d8cfbb;background:#fff}
  .card{border:1px solid #d8cfbb;padding:4mm}
  .banner{background:#fbeadc;padding:4mm}
  .kv{font-size:10pt}
  .strata td,.proj td{padding:2.2mm 0}
  a{color:inherit;text-decoration:none}

  /* Each numbered part of the report starts its own page, so the printed copy
     has a structure somebody can refer to across a desk. */
  .pagebreak{break-before:page;page-break-before:always}
}

/* A list of what a price includes. Short lines, one idea each, marked with the
   same tick the section stakes use so the page reads as one system. */
.plist{list-style:none;margin:0;padding:0}
.plist li{position:relative;padding-left:20px;margin-bottom:9px;font-size:14.5px;
  line-height:1.45;color:var(--ink2)}
.plist li::before{content:"";position:absolute;left:0;top:8px;width:10px;height:2px;
  background:var(--flare)}
.card .fig + .psub{margin-top:2px}


/* ── the report column ──────────────────────────────────────────────────────
   A report is one column of evidence: prose, tables and drawings all arguing
   about the same figures, so they have to share one right edge. Capping the
   paragraphs alone left them 147px short of the tables beside them, which is
   the ragged, unfinished look that has no cause a reader can see.

   So the measure moves to the column. The page is narrowed until its own width
   is a comfortable line, and then everything inside simply fills it. If a block
   ever needs to be narrower than this, narrow its container, never the text. */

/* ── the footer ─────────────────────────────────────────────────────────────
   The last thing on the page should say what this is and who it is for, not
   trail off into leftovers from a product we no longer sell. */
footer{border-top:1px solid var(--rule);padding:var(--s6) 0 var(--s5);
  margin-top:var(--s6);background:var(--panel)}
.fcols{display:grid;gap:var(--s5) var(--s4)}
@media (min-width:760px){ .fcols{grid-template-columns:2fr 1fr 1fr 1.2fr} }
.fbrand .logo{font-size:20px;margin-bottom:var(--s3)}
.fbrand .fine{max-width:38ch}  /* a footer column, deliberately narrow */
.fh{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink3);margin:0 0 var(--s3);font-weight:700}
.flist{list-style:none;margin:0;padding:0}
.flist li{margin-bottom:9px;font-size:14.5px;color:var(--ink3);line-height:1.45}
.flist a{color:var(--ink2);text-decoration:none}
.flist a:hover{color:var(--flare-ink);text-decoration:underline}
.fbar{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);justify-content:space-between;
  margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--rule)}
.fbar p{margin:0}


/* ── quote and check tables ─────────────────────────────────────────────────
   The bid and the watch both put a row per reply or per bill. Wide tables get
   their own scroll rather than making the page scroll sideways. */
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:var(--s3) 0}
table.bid{width:100%;border-collapse:collapse;font-size:14.5px;min-width:620px}
table.bid th{font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink3);text-align:left;font-weight:700;
  padding:0 var(--s3) var(--s2) 0;border-bottom:1.5px solid var(--rule2)}
table.bid td{padding:10px var(--s3) 10px 0;border-bottom:1px solid var(--rule);
  vertical-align:top;color:var(--ink2)}
table.bid td:last-child,table.bid th:last-child{padding-right:0}
table.bid .n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;
  white-space:nowrap;color:var(--ink)}
/* The best reply is marked by tint alone. It had an inset rule down the left edge
   of the first cell, which sat on top of the retailer's name because that cell
   carries no left padding, and a one-sided accent edge is against the house rules
   regardless. */
table.bid tr.best td{background:#fbf3ea}
table.bid tr.best td:first-child{padding-left:10px;border-radius:2px 0 0 2px}
table.bid tr.best td:last-child{border-radius:0 2px 2px 0}

.samp{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;color:var(--flare-ink);text-decoration:none;
  border-bottom:1.5px solid currentColor;padding-bottom:2px}
.samp:hover{color:var(--ink)}

/* When money changes hands, said plainly. It is the question that stalls a sale
   and it belongs beside the prices rather than in a terms page nobody opens. */
.howpay{background:var(--panel);border:1px solid var(--rule);border-radius:4px;
  padding:var(--s4);margin:var(--s5) 0 0}
.howpay p{font-size:15px;color:var(--ink2);margin:0}
.howpay b{color:var(--ink)}

/* Sending the actual bill is the real next step, so it gets its own block rather
   than a line of small print under a calculator. */
.sendbill{display:grid;gap:var(--s4);background:var(--panel);border:1px solid var(--rule2);
  border-radius:4px;padding:clamp(22px,3.4vw,38px);margin:var(--s6) 0 0}
@media (min-width:860px){ .sendbill{grid-template-columns:1.5fr 1fr;column-gap:var(--s6)} }
.sendbox{background:var(--canvas);border-radius:3px;padding:var(--s4);align-self:start}
.sendbill h2{font-size:clamp(21px,2.6vw,28px)}

/* A finding we flagged but could not price does not get to look like money. */
.find .amt.flag{color:var(--ink3);font-weight:600}

.sendbox .fld{margin-bottom:var(--s3)}
.sendbox .fld:last-of-type{margin-bottom:var(--s3)}
.sendbox input[type=file]{width:100%;font-size:14px;padding:9px;background:#fff;
  border:1px solid var(--rule2);border-radius:3px}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink2);
  line-height:1.45;cursor:pointer}
.chk input{margin:3px 0 0;flex:none;width:16px;height:16px;accent-color:var(--flare)}

/* Two doors, side by side, so nobody has to read the page to find out there is a
   choice. The second is marked because it is the one that actually answers the
   question; the first exists so somebody can check our arithmetic before
   trusting us with a document. */
.paths{display:grid;gap:var(--s4);margin:var(--s5) 0 0}
@media (min-width:820px){ .paths{grid-template-columns:1fr 1fr;column-gap:var(--s4)} }
.path{display:block;background:var(--panel);border:1px solid var(--rule2);border-radius:4px;
  padding:var(--s4);text-decoration:none;color:var(--ink2);transition:border-color .14s ease}
.path:hover{border-color:var(--ink3)}
.path.lead{border-color:var(--flare);border-width:1.5px;background:#fffaf5}
.path .pk{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);margin:0 0 var(--s2)}
.path.lead .pk{color:var(--flare-ink)}
.path h3{color:var(--ink);margin:0 0 var(--s2)}
.path p{font-size:15px;margin:0 0 var(--s3)}
.path .go{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;color:var(--flare-ink);margin:0}

/* The three price cards carry lists of different lengths, so a link placed after
   the list lands at a different height in each one. The card becomes a column and
   the link is pushed to the bottom, which lines all three up along the same rule
   however much sits above them. */
#pricing .card{display:flex;flex-direction:column}
#pricing .card .plist{margin-bottom:var(--s4)}
.cardfoot{margin:auto 0 0;padding-top:var(--s3);border-top:1px solid var(--rule)}