/* --on-chalk is the text colour that sits ON the chalk fill. Chalk inverts
     between modes (deep blue on light, pale blue on dark), so a fixed white
     would be unreadable in dark. Any new chalk-filled control must use it. */
  :root{
    --zinc:#c9ced2; --panel:#fff; --ink:#14171a; --chalk:#1a49d6; --on-chalk:#fff;
    --patina:#5d6b6a; --rule:#aab2b8; --shadow:rgba(20,23,26,.13);
  }
  @media (prefers-color-scheme:dark){
    :root{ --zinc:#191c1f; --panel:#232830; --ink:#eef1f4; --chalk:#7d9bff; --on-chalk:#0e1116;
           --patina:#98a4ab; --rule:#39414a; --shadow:rgba(0,0,0,.4); }
  }
  html[data-theme="light"]{ --zinc:#c9ced2; --panel:#fff; --ink:#14171a; --chalk:#1a49d6; --on-chalk:#fff;
                            --patina:#5d6b6a; --rule:#aab2b8; --shadow:rgba(20,23,26,.13); }
  html[data-theme="dark"]{ --zinc:#191c1f; --panel:#232830; --ink:#eef1f4; --chalk:#7d9bff; --on-chalk:#0e1116;
                           --patina:#98a4ab; --rule:#39414a; --shadow:rgba(0,0,0,.4); }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--zinc);color:var(--ink);
    font:17px/1.6 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
  .wrap{max-width:1120px;margin:0 auto;padding:0 26px}
  a{color:var(--chalk)}

  /* panels pinned to the board */
  .panel{
    background:var(--panel);border:1px solid var(--rule);
    box-shadow:0 1px 0 var(--shadow);padding:30px;
  }

  /* ---- masthead ---- */
  header{padding:22px 0 0}
  .mrow{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap}
  .logo{font-size:20px;font-weight:800;letter-spacing:-.035em}
  .logo span{color:var(--chalk)}
  .tag{font-size:13.5px;color:var(--patina)}

  /* ---- hero: promise and proof side by side ----
     A single narrow column centred in a wide viewport reads as a scaled-up
     phone. Two columns use the width, fill the first screen, and put the live
     board next to the claim it backs up. */
  .hero{display:grid;grid-template-columns:1fr;gap:26px;padding:34px 0 24px;align-items:start}
  @media (min-width:920px){
    .hero{grid-template-columns:minmax(0,1fr) 400px;gap:46px;padding:52px 0 40px;align-items:center}
  }
  /* ONE heading size for the whole page. The hero used to sit at 52px while
     every section heading under it sat at 31px, which read as the page losing
     conviction after the first screen. h1 and h2 now share a scale; only the
     measure differs. Panel titles (.ctitle, .blabel, h3) are a separate rank
     and stay small — they label a component, they don't head a section. */
  h1,h2{
    font-size:clamp(31px,4.6vw,52px);line-height:1.04;letter-spacing:-.038em;
    font-weight:800;
  }
  h1{margin:0 0 18px}
  /* Rotating hazard clause: the h1 text ships real (the hail line) for SEO and
     first paint; JS swaps only this span, one line per active trigger. Holds
     still under reduced-motion. */
  .rot{transition:opacity .5s ease}
  @media (prefers-reduced-motion:reduce){ .rot{transition:none} }
  .lede{font-size:clamp(17px,1.5vw,19px);max-width:52ch;margin:0;color:var(--ink)}
  .lede b{font-weight:700}

  /* ---- BOLD MOVE: live board ---- */
  /* Same centred structure as the comparison panel: stated title, one hero
     number, then a divided row of columns. Consistency between the two heaviest
     elements on the page is doing real work — they should read as a set. */
  /* Fills the content column. An auto-centred panel inside a wider wrap left
     every other element on a different left edge — measured at 232px vs 430px,
     which is what made the desktop layout read as disjointed. */
  .board{padding:22px 18px;text-align:center}
  .bhead{margin-bottom:14px}
  .blabel{display:inline-flex;align-items:center;gap:8px;font-size:19px;line-height:1.2;font-weight:800;letter-spacing:-.025em}
  .pulse{
    width:9px;height:9px;border-radius:50%;background:var(--chalk);flex:none;
    animation:beat 2.4s ease-in-out infinite;
  }
  @keyframes beat{0%,100%{opacity:1}50%{opacity:.25}}
  @media (prefers-reduced-motion:reduce){ .pulse{animation:none} }
  .bsrc{font-size:13px;color:var(--patina);margin-top:4px}
  .btotal{padding:2px 0 15px;border-bottom:1px solid var(--rule);margin-bottom:15px}
  .btotal .n{font-size:clamp(46px,9vw,62px);font-weight:800;letter-spacing:-.05em;line-height:1}
  .btotal .l{font-size:14px;color:var(--patina);margin-top:4px}
  .bgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(74px,1fr))}
  .cell{padding:2px 6px}
  .cell + .cell{border-left:1px solid var(--rule)}
  .cell .n{font-size:27px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
  .cell .l{font-size:12.5px;color:var(--patina);margin-top:2px}
  .bfoot{font-size:12.5px;color:var(--patina);margin:14px auto 0;max-width:40ch;line-height:1.45}

  /* ---- generic sections ----
     Body copy stays in a readable measure and shares the hero's left edge;
     only the hero spans the full width. */
  main > section:not(.hero){padding:30px 0;max-width:760px}
  main > section.wide{max-width:none}
  h2{margin:0 0 14px;max-width:20ch}
  h3{font-size:18px;line-height:1.25;letter-spacing:-.02em;margin:0 0 7px;font-weight:700}
  p{max-width:62ch}
  .muted{color:var(--patina)}

  /* the arbitrage comparison — deliberately the heaviest thing after the board.
     Per-click prices are abstract; the same budget spent two days apart is money. */
  /* split section — panel on the opposite side to the hero's */
  .split{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
  @media (min-width:920px){
    /* default: panel left, copy right. .flip mirrors it. Source order is always
       copy-then-panel so mobile reads the heading first — the side swap is grid
       placement, never DOM order. */
    .split{grid-template-columns:434px minmax(0,1fr);gap:46px;align-items:center}
    .split > .splitcopy{grid-column:2;grid-row:1}
    .split > .panel{grid-column:1;grid-row:1;margin:0}
    /* the flipped sections pair short copy with a tall panel — centring left the
       heading floating in dead space, so these align to the top instead. */
    .split.flip{grid-template-columns:minmax(0,1fr) 470px;align-items:start}
    .split.flip > .splitcopy{grid-column:1}
    .split.flip > .panel{grid-column:2}
  }
  .splitcopy h2{margin-bottom:14px}
  .splitcopy p{max-width:52ch}

  .compare{margin:20px 0 10px;padding:22px;text-align:center}
  .ctitle{font-size:19px;line-height:1.2;font-weight:800;letter-spacing:-.025em;margin:0 0 16px}
  .cgrid{display:grid;grid-template-columns:1fr 1fr}
  .ccol{padding:4px 8px 2px}
  .ccol + .ccol{border-left:1px solid var(--rule)}
  .chead{font-size:15px;font-weight:700;line-height:1.2}
  .cprice{font-size:13.5px;color:var(--patina);margin-bottom:10px}
  .cbig{font-size:clamp(46px,13vw,62px);font-weight:800;letter-spacing:-.045em;line-height:1}
  .cunit{font-size:14.5px;font-weight:600;margin-top:1px}
  .cdetail{font-size:12.5px;color:var(--patina);margin-top:8px}
  .ccol.win .chead, .ccol.win .cbig, .ccol.win .cunit{color:var(--chalk)}
  .cfoot{font-size:12.5px;color:var(--patina);margin:15px auto 0;line-height:1.45;max-width:42ch}
  .cfoot b{color:var(--ink);font-weight:700}

  .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:20px 22px}
  .step{border-left:3px solid var(--chalk);padding-left:14px}
  .step .k{font-size:12.5px;color:var(--patina);margin-bottom:3px}
  .step p{font-size:15px;line-height:1.5}
  .steps{padding:24px}
  .terms{padding:8px 24px 20px}
  .terms ul.plain{margin:0}
  .terms ul.plain li{max-width:none;font-size:15.5px;line-height:1.5}
  .terms ul.plain li:first-child{border-top:0;padding-top:2px}

  /* ---- ground reports: the specificity claim, shown rather than asserted ----
     Real NWS Local Storm Reports from the 28 July outbreak, verbatim. Two
     cleared the 1.25" bar and activated a ZIP; two did not and were ignored.
     Printing the misses is the whole point — any tool can list what it caught. */
  .reports{padding:22px 24px}
  .rtitle{font-size:19px;font-weight:800;letter-spacing:-.025em;line-height:1.2;margin:0 0 3px}
  .rsub{font-size:12.5px;color:var(--patina);margin-bottom:6px}
  .rrow{display:grid;grid-template-columns:66px minmax(0,1fr);gap:14px;padding:11px 0;border-top:1px solid var(--rule)}
  .rsize{font-size:19px;font-weight:800;letter-spacing:-.03em;line-height:1.3}
  .rwhere{font-size:14.5px;line-height:1.35}
  .rmeta{font-size:12.5px;color:var(--patina);margin-top:2px}
  .rrow.hit .rsize{color:var(--chalk)}
  .rrow.hit .rmeta b{color:var(--chalk);font-weight:700}
  .rrow.miss .rsize,.rrow.miss .rwhere{color:var(--patina)}
  .rfoot{font-size:12.5px;color:var(--patina);margin-top:14px;line-height:1.45}

  /* ---- how it runs: full bleed ----
     The only section that spans the page edge to edge. The four steps are the
     product's sequence, so they get the width and read left-to-right as time. */
  /* Heading block centred over the full-width step row. The steps themselves
     stay left-aligned inside their columns — the chalk rule down the left edge
     is the motif, and centring the text would leave it floating. */
  .runhead{margin-bottom:26px;text-align:center}
  .runhead h2{max-width:none;margin-left:auto;margin-right:auto}
  .runhead p{max-width:58ch;margin-left:auto;margin-right:auto}
  /* Four across only once each column clears ~215px. Forcing four from 920px
     squeezed them to 188px; auto-fit was worse, dropping the fourth onto its
     own row with a stray divider. 2x2 covers the band between. */
  @media (min-width:920px){ .runs .cols{grid-template-columns:repeat(2,1fr)} }
  @media (min-width:1040px){ .runs .cols{grid-template-columns:repeat(4,1fr)} }


  ul.plain{list-style:none;padding:0;margin:14px 0 0}
  ul.plain li{padding:9px 0;border-top:1px solid var(--rule);max-width:62ch}

  /* Centred at every width. This is the one place on the page asking for an
     action rather than making an argument, and the copy is short enough that
     centring costs nothing in readability. */
  .ctasection{display:flex;justify-content:center}
  .cta{background:var(--ink);color:var(--zinc);border-color:var(--ink);
       text-align:center;max-width:740px;width:100%}
  .cta h2{color:var(--zinc);max-width:none;margin-left:auto;margin-right:auto}
  .cta p{color:var(--zinc);opacity:.86;margin-left:auto;margin-right:auto}
  .btn{
    display:inline-block;background:var(--chalk);color:var(--on-chalk);text-decoration:none;
    font-weight:700;padding:14px 26px;margin-top:8px;
  }
  .btn:hover{filter:brightness(1.1)}

  /* ---- request form ----
     The CTA panel inverts (ink ground, zinc text) and inverts again between
     colour schemes, so every border and placeholder is mixed from currentColor
     rather than hard-coded — a fixed white is invisible in one of the four
     combinations. Inputs are 16px because anything smaller makes iOS Safari
     zoom the viewport on focus. */
  .cform{display:grid;gap:10px;max-width:430px;margin:20px auto 0;text-align:left}
  .cform input{
    width:100%;padding:13px 14px;font:inherit;font-size:16px;border-radius:0;
    background:transparent;color:inherit;
    border:1px solid color-mix(in srgb, currentColor 34%, transparent);
  }
  .cform input::placeholder{color:color-mix(in srgb, currentColor 58%, transparent)}
  .cform input:focus{outline:2px solid var(--chalk);outline-offset:1px;border-color:transparent}
  .cform input:disabled{opacity:.5}
  /* Honeypot. Off-screen rather than display:none — some bots skip hidden
     fields but happily fill positioned ones. */
  .cform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
  .cform button{width:100%;margin-top:4px;border:0;cursor:pointer;font:inherit;font-size:17px;font-weight:700}
  .cform button:disabled{cursor:progress;filter:saturate(.5)}
  .cnote{font-size:13.5px;line-height:1.45;margin:12px auto 0;max-width:44ch;min-height:1.3em}
  .cnote a{color:inherit;text-decoration:underline}
  .cdone{font-size:16.5px;line-height:1.5;margin:20px auto 0;max-width:40ch}

  footer{padding:30px 0 46px;font-size:13.5px;color:var(--patina)}
  footer p{margin:0 0 6px;max-width:none}

  /* ---- sticky CTA: mobile only ----
     Contractors read this on a phone between jobs. The only CTA used to be at
     the very bottom of a long scroll; now it travels with them. */
  .stickycta{
    display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--chalk);border-top:1px solid rgba(0,0,0,.2);
  }
  .stickycta a{
    display:block;text-align:center;color:var(--on-chalk);text-decoration:none;
    font-weight:700;font-size:17px;padding:17px 14px;
  }

  @media (max-width:720px){
    .panel{padding:22px}
    .compare{padding:18px 14px}
    .ccol{padding:4px 4px 2px}
    .cfoot{font-size:12.5px}
  }

  @media (max-width:620px){
    body{font-size:18px;line-height:1.58;padding-bottom:66px}
    .stickycta{display:block}
    .tag{display:none}                       /* wraps to two lines and earns nothing */
    header{padding:18px 0 0}
    .hero{padding:26px 0 18px}
    h1,h2{font-size:clamp(33px,8.6vw,46px);letter-spacing:-.032em;max-width:none}
    .lede{font-size:18.5px;margin-bottom:22px}
    section{padding:24px 0}
    h3{font-size:19px}
    .cols{gap:24px}
    /* Centring the run heading exists to sit it over a wide row of steps. On
       mobile the steps stack, so there is nothing to centre over — and the
       intro runs five or six lines here, which is past where a ragged left
       edge starts costing reading speed. Back to left. */
    .runhead{text-align:left}
    .runhead p{margin-left:0;margin-right:0}
    .reports{padding:20px 16px}
    .rrow{grid-template-columns:54px minmax(0,1fr);gap:11px}
    .board{padding:20px 12px}
    /* Always four across. At minmax(74px) the fourth wrapped to its own row and
       picked up a stray left border from the .cell + .cell rule. */
    .bgrid{grid-template-columns:repeat(4,1fr)}
    .cell{padding:2px 2px}
    .cell .n{font-size:23px}
    .cell .l{font-size:12px}
    .fnum{font-size:46px}
    ul.plain li{padding:11px 0}
    .btn{width:100%;text-align:center;padding:16px 20px;font-size:17px}
    /* Centred where the content is short and action-shaped. Body prose stays
       left-aligned deliberately — centred paragraphs give every line a ragged
       start, which measurably slows reading past two or three lines. */
    .cta{text-align:center}
    .cta p{margin-left:auto;margin-right:auto}
  }

  /* ================================================================
     Vertical + about pages. Added 2026-07-30.
     These pages answer four questions in a fixed order — can I trust
     you, do you do what I need, are you the right choice, what now —
     so the components below are named for the job, not the shape.
     ================================================================ */

  /* Trade nav. Only appears on the inner pages; the homepage masthead
     keeps its tagline. Current page is marked, not linked — a link to
     where you already are is a small lie about what will happen. */
  .subnav{display:flex;flex-wrap:wrap;gap:2px 20px;padding:12px 0 0;font-size:14.5px}
  .subnav a,.subnav span{text-decoration:none;color:var(--patina)}
  .subnav a:hover{color:var(--ink)}
  .subnav [aria-current="page"]{color:var(--ink);font-weight:700}

  /* The four questions. Each section is labelled with the buyer's
     question in their own words, above the heading that answers it.
     Small, muted, and set in the mono face so it reads as a tab on a
     file rather than as marketing copy. */
  .qlead{
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--patina);margin:0 0 8px;
  }

  /* Fit / not-fit. Shown as a pair on purpose — a page that only lists
     who it is for reads as a brochure. The disqualifiers are the more
     persuasive column and they are deliberately not softened. */
  .fitgrid{display:grid;grid-template-columns:1fr;gap:22px;margin-top:18px}
  @media (min-width:820px){ .fitgrid{grid-template-columns:1fr 1fr;gap:26px} }
  .fitgrid h3{margin-bottom:10px}
  .fitgrid ul{list-style:none;padding:0;margin:0}
  .fitgrid li{padding:8px 0 8px 20px;position:relative;font-size:15.5px;line-height:1.5;max-width:none}
  .fit li::before{content:"";position:absolute;left:0;top:15px;width:9px;height:2px;background:var(--chalk)}
  .unfit li{color:var(--patina)}
  .unfit li::before{content:"";position:absolute;left:0;top:15px;width:9px;height:2px;background:var(--rule)}

  /* Trigger list — the events that actually fire for this trade. The
     threshold is the point, so it carries the mono face and the accent. */
  .trig{padding:22px 24px}
  .trigrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:baseline;
           padding:11px 0;border-top:1px solid var(--rule)}
  .trigrow:first-of-type{border-top:0}
  .trigname{font-size:15.5px;line-height:1.35}
  .trigbar{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
           font-size:14px;font-weight:700;color:var(--chalk);white-space:nowrap}
  .trigfoot{font-size:12.5px;color:var(--patina);margin-top:14px;line-height:1.45}

  /* A single number pulled out of prose. Used sparingly — one per page
     at most, or it stops meaning anything. */
  .fact{border-left:3px solid var(--chalk);padding:2px 0 2px 16px;margin:22px 0}
  .fact .fnum{font-size:clamp(34px,6vw,46px);font-weight:800;letter-spacing:-.04em;line-height:1.05}
  .fact .fsub{font-size:14.5px;color:var(--patina);margin-top:4px;max-width:46ch}

  @media (max-width:620px){
    .subnav{gap:2px 16px;font-size:15px;padding-top:10px}
    .trig{padding:20px 16px}
    .trigrow{grid-template-columns:1fr;gap:2px}
  }

  /* Stat panel — a single number given the same weight as the live board's
     total, so the two heaviest numeric elements on the site read as a set.
     Used on the vertical pages where one measured figure carries the section. */
  /* .split.flip aligns to the top because it was built for the tall ground-
     reports panel beside short copy — centring left the heading floating in
     dead space. The stat panel is the exact inverse: a short panel beside a
     tall column of prose, where top-aligning strands it against six inches of
     nothing. Re-centre only the sections holding one.
     No build step processes this file, so :has() reaches the browser intact. */
  @media (min-width:920px){
    .split:has(> .statpanel), .split.flip:has(> .statpanel){align-items:center}
  }

  .statpanel{padding:28px 22px;text-align:center}
  .statpanel .n{font-size:clamp(46px,9vw,62px);font-weight:800;letter-spacing:-.05em;line-height:1}
  .statpanel .l{font-size:14.5px;color:var(--patina);margin-top:6px}
  .statpanel .sub{
    font-size:14px;line-height:1.5;color:var(--patina);
    margin:16px auto 0;padding-top:16px;border-top:1px solid var(--rule);max-width:34ch;
  }

  /* Full-width fit/unfit row under a centred heading. Same structure as the
     .runs step row — heading block centred over the width, columns left-aligned
     inside it. At 760px the two columns were 367px each and read as cramped
     footnotes; at full width they carry the weight the comparison deserves. */
  .fitwide .fitgrid{margin-top:0}
  @media (min-width:820px){ .fitwide .fitgrid{gap:46px} }

  /* Prose row — for sections that carry an argument but have no card or table
     to sit beside. Heading in a left column, body in a right column. This is
     how a prose-only section uses the full width without setting a 1068px
     measure, which would be roughly 160 characters and unreadable. Centring
     the prose instead was rejected: every line would get a ragged start. */
  .proserow{display:grid;grid-template-columns:1fr;gap:6px}
  @media (min-width:920px){
    .proserow{grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:46px;align-items:start}
    .proserow h2{margin-bottom:0}
  }
  .proserow .prosebody p{max-width:62ch}
  .proserow .prosebody p:first-child{margin-top:0}

  /* Trade select. The CTA panel inverts between ink and zinc grounds AND
     between colour schemes, so — same rule as the inputs — every colour is
     mixed from currentColor rather than named. The native arrow is left alone;
     a custom one would need a background-image that survives four combinations
     of ground and scheme, which is not worth it for one control. */
  .cform select{
    width:100%;padding:13px 14px;font:inherit;font-size:16px;border-radius:0;
    background:transparent;color:inherit;
    border:1px solid color-mix(in srgb, currentColor 34%, transparent);
  }
  .cform select:focus{outline:2px solid var(--chalk);outline-offset:1px;border-color:transparent}
  .cform select:invalid{color:color-mix(in srgb, currentColor 58%, transparent)}
  /* The options render in the OS menu, not on our ground, so they need real
     colours — inheriting the inverted panel's makes them invisible. */
  .cform select option{color:#14171a;background:#fff}
  @media (prefers-color-scheme:dark){ .cform select option{color:#eef1f4;background:#232830} }