/* Weather Data Research - Concept B hybrid. Zack, 2 Sep 2026.
   Palette matched to the report PDF, and defined in exactly one place: the
   report reads these values from wdr/report.py, the site from here, and
   test_identity.py asserts the two agree.

   The rule the whole system turns on: STEEL IS DATA, RED IS EXCEPTION.
   Steel marks counts, links, eyebrows, step numbers, storm-report markers.
   Red appears on the primary call to action and the parked map marker, and
   nowhere else. Two accents with one job each; the moment red becomes
   decoration, neither means anything.

   --green is kept as an alias pointing at steel so nothing that still asks for
   it renders invisible. It is not a second accent. */
:root{
  --navy:#0C2E4E; --steel:#3E6B87; --exception:#B23A2B;
  --green:#3E6B87;
  --ink:#0C2E4E; --sub:#8C8168;
  --rule:#DBD5C7; --bg:#F4F2EC; --paper:#fff;
  --onnavy:#F4F2EC; --onnavy-sub:#9FB3C6;
  --warn:#7a5a00; --warnbg:#faeccf; --bad:#7c2d1c; --badbg:#f4dede;
  --ok:#1d5c1d; --okbg:#e4f0e4;
  --slab:"Zilla Slab",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
/* Archivo, Zilla Slab and Plex Mono ship with the app rather than being pulled
   from a font CDN: the report PDF embeds the same files, and a site that renders
   in a different face from the document it sells is the kind of mismatch a
   customer notices before anything else. */
@font-face{font-family:"Archivo";font-weight:400;font-display:swap;src:url("/static/fonts/Archivo-Regular.ttf")}
@font-face{font-family:"Archivo";font-weight:500;font-display:swap;src:url("/static/fonts/Archivo-Medium.ttf")}
@font-face{font-family:"Archivo";font-weight:700;font-display:swap;src:url("/static/fonts/Archivo-Bold.ttf")}
@font-face{font-family:"Zilla Slab";font-weight:700;font-display:swap;src:url("/static/fonts/ZillaSlab-Bold.ttf")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url("/static/fonts/IBMPlexMono-Medium.ttf")}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.62 "Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased;
}
a{color:var(--steel)}
.wrap{max-width:1060px;margin:0 auto;padding:0 22px}
.narrow{max-width:760px}

/* ---- header ---- */
header.site{background:var(--navy);color:#fff}
header.site .wrap{display:flex;align-items:center;gap:26px;height:64px}
.brand{display:flex;align-items:center;text-decoration:none;color:var(--onnavy)}
/* The lockup, at the 30px mark height the identity sheet specifies. The
   wordmark inside it is vector paths, so it never waits on a webfont and never
   substitutes. */
/* Rings from the SVG; WDR and the full name set live, because the name inside
   the lockup file is a hairline drawn for a business card and unreadable in a
   64px nav. Same faces the lockup was drawn in. */
.brand{gap:10px}
.brand img{height:40px;width:40px;display:block}
.brand .words{display:flex;flex-direction:column;line-height:1}
.brand .wdr{font:700 22px "Archivo",sans-serif;letter-spacing:-.5px;color:var(--onnavy)}
.brand .full{font:500 10.5px var(--mono);letter-spacing:2.4px;text-transform:uppercase;
  color:var(--onnavy-sub);margin-top:4px;white-space:nowrap}
.brand .name{font-size:13px;letter-spacing:2.6px;font-weight:600}
header.site nav{margin-left:auto;display:flex;gap:20px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
header.site nav a{color:var(--onnavy-sub);text-decoration:none;font-size:14px}
header.site nav a:hover{color:var(--onnavy)}
/* The primary call to action - one of the two places red is allowed. */
header.site nav a.cta{
  background:var(--exception);color:#fff;padding:8px 16px;border-radius:5px;font-weight:600
}
header.site nav a.cta:hover{background:#9c3125}

/* ---- beta strip ---- */
.betabar{background:#fdf6e3;border-bottom:1px solid #e8dcb8;color:#6b5410;
  font-size:13px;padding:9px 0;text-align:center}

/* ---- hero ---- */
.hero{background:var(--navy);color:#fff;padding:58px 0 64px}
.hero h1{font-family:var(--slab);font-weight:700;font-size:40px;line-height:1.14;
  margin:0 0 16px;max-width:19ch;letter-spacing:-.4px}
.hero p{font-size:17px;color:#c9d4e2;max-width:60ch;margin:0 0 26px}
/* Links inside the navy hero need their own colour - the site link colour is
   picked for white paper and is close to unreadable on this background. */
.hero p a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.hero .btnrow{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:2.6px;
  color:var(--onnavy-sub);margin-bottom:14px}

/* ---- buttons ---- */
.btn{display:inline-block;background:var(--navy);color:#fff;text-decoration:none;
  padding:12px 22px;border-radius:5px;font-weight:600;font-size:15px;border:0;cursor:pointer}
.btn:hover{background:#17334f}
.btn.light{background:#fff;color:var(--navy)}
.btn.light:hover{background:#eef2f7}
.btn.ghost{background:transparent;border:1px solid #6d86a5;color:#d6e0ec}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---- sections ---- */
section{padding:52px 0}
section.paper{background:var(--paper);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
h2{font-family:var(--slab);font-weight:700;font-size:25px;margin:0 0 8px}
h3{font-family:var(--slab);font-weight:700;font-size:17px;margin:0 0 6px}
.lede{color:var(--sub);max-width:66ch;margin:0 0 30px}
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--rule);border-radius:7px;padding:20px}
.card .n{font-size:11px;letter-spacing:2px;color:var(--steel);font-weight:700;margin-bottom:8px}
.card p{margin:0;color:var(--sub);font-size:14.5px}

/* ---- pricing ---- */
.price{font-size:31px;font-weight:650;color:var(--navy)}
.price small{font-size:13px;color:var(--sub);font-weight:400}

/* ---- forms ---- */
form.wdr{background:var(--paper);border:1px solid var(--rule);border-radius:8px;padding:26px}
fieldset{border:0;padding:0;margin:0 0 26px}
legend{font-size:11px;letter-spacing:2.2px;color:var(--steel);font-weight:700;
  padding:0;margin-bottom:14px;text-transform:uppercase}
label{display:block;font-size:13.5px;font-weight:600;margin:0 0 5px}
.hint{font-weight:400;color:var(--sub);font-size:12.5px;margin:-2px 0 6px}
/* input:not([type]) matters: an <input> with no type attribute is a text input,
   but it does NOT match input[type=text], so it silently fell back to browser
   defaults and rendered shorter than its neighbours. Fixed height keeps every
   control on one line - selects and date inputs are otherwise a pixel or two
   off from text inputs in most browsers. */
input[type=text],input[type=email],input[type=tel],input[type=date],input:not([type]),
select,textarea{
  width:100%;height:42px;padding:10px 12px;border:1px solid #c3ccd6;border-radius:5px;
  font:inherit;font-size:15px;background:#fff;color:var(--ink);
  -webkit-appearance:none;appearance:none;box-sizing:border-box}
select{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235a6673' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
textarea{height:auto}
input:focus,select:focus,textarea:focus{outline:2px solid #b9cbe4;border-color:var(--navy)}
textarea{min-height:78px;resize:vertical}
.row{display:grid;gap:16px;margin-bottom:16px}
.row.two{grid-template-columns:1fr 1fr}
.row.three{grid-template-columns:1fr 1fr 1fr}
@media(max-width:720px){.row.two,.row.three{grid-template-columns:1fr}}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:400}
.check input{margin-top:4px}

/* ---- map ---- */
#map{height:380px;border:1px solid #c3ccd6;border-radius:6px;background:#eef1f4}
.maphelp{font-size:12.5px;color:var(--sub);margin:8px 0 0}
.pinstate{font-size:12.5px;margin-top:6px}
.pinstate.set{color:var(--ok)}
.pinstate.unset{color:var(--warn)}

/* The address the pin is standing on, offered when the typed one is partial.
   Steel, not red: it is data read off the map, not an exception. `display:flex`
   beats the `hidden` attribute on its own, so the hidden rule is explicit -
   without it the empty box sits on the page from first paint. */
.pinaddr{font-size:12.5px;margin:6px 0 0;padding:8px 10px;border-radius:6px;
  background:#eef3f7;border:1px solid #cfdde7;color:var(--ink);
  display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pinaddr[hidden]{display:none}
.pinaddr strong{font-weight:600}

/* ---- quote box ---- */
.quote{background:#f7f9fb;border:1px solid var(--rule);border-radius:6px;padding:16px 18px}
.quote .line{display:flex;justify-content:space-between;font-size:14px;padding:3px 0}
.quote .total{font-weight:700;font-size:18px;border-top:1px solid var(--rule);
  margin-top:8px;padding-top:9px}
.codemsg{font-size:13px;margin-top:8px}
.codemsg.ok{color:var(--ok)}
.codemsg.bad{color:var(--bad)}

/* ---- alerts ---- */
.alert{padding:12px 16px;border-radius:6px;font-size:14.5px;margin-bottom:20px}
.alert.bad{background:var(--badbg);color:var(--bad);border:1px solid #e2b8ae}
.alert.warn{background:var(--warnbg);color:var(--warn);border:1px solid #e0cd97}
.alert.ok{background:var(--okbg);color:var(--ok);border:1px solid #b3d3b3}

/* ---- tables ---- */
table.data{width:100%;border-collapse:collapse;font-size:13.5px;background:#fff}
table.data th{background:#f2f5f8;text-align:left;font-size:11px;letter-spacing:.8px;
  text-transform:uppercase;color:var(--sub);padding:9px 10px;border-bottom:1px solid var(--rule)}
table.data td{padding:9px 10px;border-bottom:1px solid #eaeef2;vertical-align:top}
.chip{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.5px;
  padding:2px 8px;border-radius:10px}
.chip.Certified,.chip.PASS{background:var(--okbg);color:var(--ok)}
.chip.Preliminary,.chip.FLAG{background:var(--warnbg);color:var(--warn)}
.chip.Unverified,.chip.UNVERIFIABLE{background:#eef1f4;color:#5a6673}
.chip.FAIL{background:var(--badbg);color:var(--bad)}

/* ---- verification page ---- */
.verdict{border-radius:8px;padding:22px 26px;color:#fff;margin-bottom:24px}
.verdict.ok{background:var(--steel)}
.verdict.bad{background:#8a3223}
.verdict.warn{background:#8a6a1a}
.verdict h1{margin:0 0 4px;font-size:23px}
.verdict p{margin:0;opacity:.92;font-size:14.5px}
.band{font-size:11px;letter-spacing:2.2px;text-transform:uppercase;font-weight:700;
  color:#fff;background:var(--navy);padding:8px 14px;border-radius:5px 5px 0 0;margin-top:30px}
.band + .card{border-radius:0 0 7px 7px;border-top:0}
dl.meta{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;margin:0;font-size:14px}
dl.meta dt{color:var(--sub)}
dl.meta dd{margin:0;font-weight:600}

/* ---- footer ---- */
footer.site{background:#16283d;color:#96a5b8;font-size:13px;padding:34px 0}
footer.site a{color:#c3cdda}
footer.site .disc{font-size:12px;line-height:1.65;max-width:78ch;margin-top:14px;color:#7f8fa3}

.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
.muted{color:var(--sub)}
.small{font-size:13px}

/* Inline action inside a table cell that must be a POST, not a link. */
.linklike{background:none;border:0;padding:0 0 0 10px;font:inherit;color:var(--bad);
  cursor:pointer;text-decoration:underline}
.linklike:hover{opacity:.75}

/* ---- one-page landing ---- */
h2.big{font-size:31px;line-height:1.2;letter-spacing:-.015em;margin:0 0 12px}
.sechead{font-size:12px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;
  color:var(--steel);margin:34px 0 10px;padding-bottom:7px;border-bottom:1px solid var(--rule)}
.qf{margin:0;padding-left:20px;color:var(--ink);font-size:15px;line-height:1.75}
.qf li{margin:5px 0}
/* A nine-column table has nowhere to go on a phone, so let it scroll rather than crush. */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.scroll table.data{min-width:660px}
.sampleimg{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:6px;
  background:#fff}
.center{text-align:center}

/* ---- the mid-page call to action ---- */
.cta-block{margin:34px 0 8px;padding:26px 24px;background:var(--paper);
  border:1px solid var(--rule);border-radius:8px;text-align:center}
.cta-block p{margin:0 0 6px;color:var(--sub)}
.ctalead{font-size:21px;font-weight:800;color:var(--ink) !important;letter-spacing:-.01em}
.cta-block .btn.wide{max-width:340px;margin:16px auto 0}

/* ---- order form ---- */
.opt{font-weight:400;font-size:11.5px;color:var(--sub);text-transform:none;letter-spacing:0}
.more{margin:18px 0 4px;padding:12px 14px;border:1px solid var(--rule);border-radius:6px;
  background:#fbfcfd}
.more summary{cursor:pointer;font-size:13.5px;font-weight:700;color:var(--ink)}
.more[open] summary{margin-bottom:8px}
.btn.wide{display:block;width:100%;text-align:center;margin-top:20px;border:0;
  font-size:15.5px;padding:14px 18px;cursor:pointer}
.hint.center{text-align:center}
#map{height:340px;border:1px solid var(--rule);border-radius:6px}

/* ---- floating call to action ---- */
.floatcta{position:fixed;right:20px;bottom:20px;z-index:50;
  background:var(--steel);color:#fff !important;text-decoration:none;font-weight:800;
  font-size:14.5px;letter-spacing:.02em;padding:14px 22px;border-radius:999px;
  box-shadow:0 6px 22px rgba(16,32,48,.28);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .22s ease,transform .22s ease}
.floatcta.show{opacity:1;transform:translateY(0);pointer-events:auto}
.floatcta:hover{filter:brightness(1.07)}
@media (max-width:560px){
  .floatcta{right:14px;bottom:14px;left:14px;text-align:center}
  h2.big{font-size:25px}
}
@media (prefers-reduced-motion:reduce){ .floatcta{transition:none} }

/* ---- hero with the sample report alongside ---- */
.herogrid{display:grid;grid-template-columns:1fr 320px;gap:44px;align-items:center}
.prodname{font-size:44px;line-height:1.1;font-weight:800;letter-spacing:-.025em;margin:0 0 14px}
.hero .herogrid p{font-size:18px;margin-bottom:26px}
.heroshot{display:block;text-decoration:none;position:relative}
.heroshot img{display:block;width:100%;height:auto;border-radius:5px;
  box-shadow:0 14px 40px rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.16);
  transition:transform .22s ease, box-shadow .22s ease}
.heroshot:hover img{transform:translateY(-4px);box-shadow:0 20px 52px rgba(0,0,0,.5)}
.shotcap{display:block;margin-top:12px;text-align:center;font-size:13px;font-weight:700;
  letter-spacing:.02em;color:#c9d4e2}
.heroshot:hover .shotcap{color:#fff}
@media (max-width:820px){
  .herogrid{grid-template-columns:1fr;gap:30px}
  .heroshot{max-width:300px;margin:0 auto}
  .prodname{font-size:34px}
}
@media (prefers-reduced-motion:reduce){ .heroshot img{transition:none} }

/* ---- scannable QR beside the verification copy ---- */
.qrblock{display:grid;grid-template-columns:154px 1fr;gap:26px;align-items:center;
  margin:6px 0 4px}
.qrshot{display:block;padding:10px;background:#fff;border:1px solid var(--rule);
  border-radius:8px;line-height:0}
.qrshot img{display:block;width:100%;height:auto}
@media (max-width:620px){
  .qrblock{grid-template-columns:1fr;justify-items:start;gap:18px}
  .qrshot{max-width:154px}
}

/* ---- windsock cursor ----
   Applied to the page, deliberately NOT to anything interactive: replacing the
   pointing hand over links and the I-beam in form fields costs people the only
   signal they have for what is clickable and what is typeable. A cursor is
   decoration; affordance is not. */
body{cursor:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48cGF0aCBkPSJNOSA0LjggTDE1IDUuOTQ5OTk5OTk5OTk5OTk5IEwxNSAxOC4wNSBMOSAxOS4yIFoiIGZpbGw9IiNlODYzMmEiLz48cGF0aCBkPSJNMTUgNS45NDk5OTk5OTk5OTk5OTkgTDIwLjUgNy4xIEwyMC41IDE2LjkgTDE1IDE4LjA1IFoiIGZpbGw9IiNmZmZmZmYiLz48cGF0aCBkPSJNMjAuNSA3LjEgTDI1LjUgOC4yNSBMMjUuNSAxNS43NSBMMjAuNSAxNi45IFoiIGZpbGw9IiNlODYzMmEiLz48cGF0aCBkPSJNMjUuNSA4LjI1IEwzMCA5LjM5OTk5OTk5OTk5OTk5OSBMMzAgMTQuNjAwMDAwMDAwMDAwMDAxIEwyNS41IDE1Ljc1IFoiIGZpbGw9IiNmZmZmZmYiLz48cGF0aCBkPSJNOSA0LjggTDMwIDkuNCBMMzAgMTQuNiBMOSAxOS4yIFoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzFkM2Y2NiIgc3Ryb2tlLXdpZHRoPSIxLjE1IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+") 9 12, default}
a, button, summary, label.check, .btn, [role="button"], select,
input[type="checkbox"], input[type="date"], input[type="submit"]{cursor:pointer}
input[type="text"], input[type="email"], input:not([type]), textarea{cursor:text}
#map, #map *{cursor:crosshair}
@media (hover:none){ body{cursor:auto} }

/* the verification block: centred, QR above the button */
.qrblock{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:18px;margin:6px 0 4px}
.qrblock .lede{margin:0 auto}
.qrshot{width:168px}

/* ---- submit-time required-field guidance ----
   The order button stays clickable; a click with anything missing marks each
   item with a red asterisk and a one-line instruction rather than leaving a
   dead grey button with no explanation. */
.wdr input.miss,.wdr select.miss{border-color:var(--bad) !important;background:#fdf4f2}
#map.miss{outline:2px solid var(--bad);outline-offset:2px}
.wdr .misslab,.wdr label.check.misslab,.wdr label.check.misslab a{color:var(--bad)}
.wdr .misstar{color:var(--bad);font-weight:700}
.wdr .missmsg{color:var(--bad);font-size:13px;font-weight:600;margin:6px 0 0;
  display:flex;gap:7px;align-items:flex-start}
/* The address row: the field, the Find button, and - when the address is not a
   whole one - the message and the pin's offer underneath.
   
   It is a class rather than the two different inline styles it was, because the
   message is inserted immediately after the field it belongs to, which puts it
   INSIDE this row. Left to itself it took the space between the input and the
   Find button and squeezed both. `flex-basis:100%` drops it onto its own line;
   the input carries an explicit basis so that wrapping does not push Find down
   with it. */
.wdr .addrrow{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start}
.wdr .addrrow input{flex:1 1 240px;width:auto;order:1}
.wdr .addrrow .btn{order:2}
/* `order` rather than markup: the message is inserted immediately after the
   field, which lands it between the input and Find. Told to wrap, it pushed
   Find onto a third line. Ordering fixes what the row LOOKS like without
   telling the validator to insert its messages somewhere special. */
.wdr .addrrow .missmsg,.wdr .addrrow .pinaddr{order:3;flex-basis:100%}
.wdr .missicon{width:15px;height:15px;flex:0 0 15px;margin-top:1px}

/* ---- the pin attestation ----
   Zack, 4 Sep 2026, after a browser validation bubble caught him out: the one
   box the server will refuse an order over should not read like a footnote
   under the map. It gets a border of its own, a "Required" chip, and - when an
   order is attempted without it - the red state and the alert icon that
   formcheck.js adds. Steel is data, red is exception: the resting state is
   quiet, the red only appears on the exception. */
.attest{position:relative;margin-top:14px;padding:12px 44px 12px 14px;
  border:1px solid var(--rule);border-left:3px solid var(--steel);
  border-radius:6px;background:#fbfaf7}
/* The icon is in the markup and hidden, not built and inserted, so appearing
   costs no reflow: it sits in its own gutter on the right, which the padding
   above reserves whether or not it is showing. Zack, 4 Sep 2026: "remove the
   Tick the box line" - the red border, the red chip and this are the warning,
   and the label already says what ticking the box means. */
.attest .attesticon{position:absolute;top:12px;right:14px;width:19px;height:19px;display:none}
.attest.bad .attesticon{display:block;color:var(--bad)}
.attest label.check{font-weight:500}
.attest .hint{margin:7px 0 0 28px}
.attest .req{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:9px;
  background:var(--steel);color:#fff;font-size:10.5px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;vertical-align:1px}
.attest.bad{border-color:var(--bad);border-left-color:var(--bad);background:var(--badbg)}
.attest.bad .req{background:var(--bad)}
.attest.bad label.check{color:var(--bad)}


/* ---- Find My Dates ------------------------------------------------------ */
.yearpick{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 6px}
.yearopt{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--rule,#d7dde4);
  border-radius:6px;padding:9px 14px;cursor:pointer;background:#fff;font-size:14px}
.yearopt:has(input:checked){border-color:#1d3f66;box-shadow:inset 0 0 0 1px #1d3f66;font-weight:600}
.yearhead{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#5a6673;
  margin:26px 0 8px;padding-bottom:6px;border-bottom:1px solid #d7dde4}
.datelist{list-style:none;padding:0;margin:0}
.datelist li{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 2px;border-bottom:1px solid #eef1f4}
.datelist li:last-child{border-bottom:none}
.datelist .d{min-width:190px}
.datelist .date{font-weight:650}
.datelist .f{flex:1;color:#5a6673;font-size:13.5px}
.datelist .tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;background:#eef1f4;color:#5a6673;border-radius:3px;
  padding:2px 7px;margin-right:5px;vertical-align:1px}
.datelist .tag.hail{background:#e6eefb;color:#1d3f66}
.datelist .tag.wind{background:#e6f4ee;color:#136b4f}
.datelist .split{display:block;margin-bottom:5px}
.btn.small{padding:6px 13px;font-size:13px}
/* The nearest-report table sits on its own row beneath the date it belongs to,
   so the flex row above it keeps working at every width. */
.nearest{flex-basis:100%;margin:10px 0 4px}
table.data.mini{font-size:12.5px;border:1px solid #e4e9ee;border-radius:5px;overflow:hidden}
table.data.mini th{padding:6px 10px;font-size:10px}
table.data.mini td{padding:6px 10px}
table.data.mini tbody tr:last-child td{border-bottom:none}
.nearest .small{margin:7px 0 0}
.totals{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 4px}
.totals .t{flex:1;min-width:150px;background:#fff;border:1px solid #d7dde4;
  border-radius:7px;padding:13px 15px;display:flex;align-items:center;gap:11px}
.totals .n{font-size:25px;font-weight:750;color:#1d3f66;line-height:1;letter-spacing:-.02em}
.totals .l{font-size:12px;color:#5a6673;line-height:1.35}
.count{margin:18px 0 0}
.lede .sub{color:#5a6673;font-size:14px}
.finenote{margin-top:34px;padding-top:16px;border-top:1px solid #d7dde4;
  color:#5a6673;font-size:13px;line-height:1.6}
.finenote p{margin:0 0 10px}

/* ---- Account ------------------------------------------------------------ */
.acctop{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:6px}
.acctop .sub{color:#5a6673;font-size:14px;margin:0}
.codebox{font-size:26px;letter-spacing:9px;text-align:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;max-width:260px}
.btn.ghost.small{padding:6px 13px;font-size:13px}

/* ---- pricing page ---- */
.pricebig{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 22px}
.pricebig > div{flex:1;min-width:210px;background:#fff;border:1px solid var(--rule,#d7dde4);
  border-radius:8px;padding:18px 20px}
.pricebig .amt{display:block;font-size:36px;font-weight:750;letter-spacing:-.02em;
  color:#1d3f66;line-height:1}
.pricebig .lab{display:block;margin-top:8px;font-size:14px;color:#5a6673;line-height:1.45}
.rulelist{background:#fff;border:1px solid var(--rule,#d7dde4);border-radius:8px;
  padding:2px 18px;margin:16px 0}
.rulelist > div{padding:13px 0;border-bottom:1px solid #eef1f4;font-size:14.5px;color:#3d444d}
.rulelist > div:last-child{border-bottom:none}
.rulelist strong{color:#16191d}

/* ---- plan cards on the pricing page ---- */
/* The cards break out of the narrow column so four sit across. The sections
   either side give up their padding so it still reads as one block. */
.pricetop{padding-bottom:0}
.plansband{padding:14px 0 0}
.plansafter{padding-top:18px}

/* Jumping to an anchor used to drop the heading at the very bottom of the
   window, with the rules it introduces below the fold - so the link appeared to
   go nowhere useful. This leaves room above the target and, on the last few
   sections, room below the page so the browser can actually scroll them up. */
.pricetop [id],.plansafter [id],.plansband [id]{scroll-margin-top:96px}
.plansafter{padding-bottom:22vh}
.plancards{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin:4px 0 8px}
@media(max-width:900px){.plancards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.plancards{grid-template-columns:1fr}}
.pc{background:#fff;border:1px solid var(--rule);border-radius:8px;padding:19px 18px;
  display:flex;flex-direction:column}
.pc.best{border:2px solid var(--navy);box-shadow:0 3px 14px rgba(29,63,102,.10)}
.pc.call{background:#152c47;border-color:#152c47;color:#fff}
.pcname{font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;font-weight:700;
  color:var(--sub);margin-bottom:11px}
.pc.call .pcname{color:#93a9c4}
.pcamt{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.pc.call .pcamt{font-size:22px;color:#fff}
.pcamt span{display:block;margin-top:6px;font-size:13px;font-weight:400;color:var(--sub)}
.pcwhat{margin-top:11px;font-size:14px;color:var(--ink);line-height:1.45}
.pc.call .pcwhat{color:#c3d0e0}
.pclow{margin-top:auto;padding-top:14px;border-top:1px solid #eef1f4;
  font-size:12.5px;color:var(--sub);line-height:1.5}
.pc.call .pclow{border-top-color:#2c4b70;color:#93a9c4;font-size:14px}
.pc.call .pclow a{color:#fff;font-weight:600}

/* ---- pricing page, second pass ---- */
.pcsub{font-weight:600;letter-spacing:.06em;color:#8a949f;font-size:10px}
.pc.best .pcsub{color:#7f92a8}
.howto{background:#fff;border:1px solid var(--rule);border-left:3px solid var(--steel);
  border-radius:6px;padding:13px 16px;font-size:14.5px;color:#3d444d}
.howto strong{color:var(--ink)}
.worked{background:#eef4fb;border:1px solid #cddcee;border-radius:6px;
  padding:13px 16px;font-size:14.5px;color:#3d444d;margin:14px 0}
.worked strong{color:var(--ink)}
.pricebig.one > div{flex:0 1 340px}
.rulelist > div.carve{color:#5a6673;font-size:13.5px;background:#f7f9fb;
  margin:0 -18px;padding:11px 18px}

/* ---- "not sure of the date?" on the order forms ----
   This was a 12.5px grey hint tucked under the date input, in a one-third column
   where it read as fine print and got skipped. Full width, tinted, and the size
   of real copy: it is the escape hatch for the exact person who cannot fill the
   field it sits under. */
.findcta{background:#EFEDE5;border:1px solid #D6CFC0;border-left:4px solid var(--steel);
  border-radius:6px;padding:15px 18px;margin:4px 0 20px}
.findcta .q{font-size:16px;font-weight:700;color:var(--ink);margin-right:8px}
.findcta a{font-size:16px;font-weight:700;color:#2f5468;text-decoration:underline;
  text-underline-offset:3px;white-space:nowrap}
.findcta a:hover{color:#24404f}
.findcta .sub{display:block;margin-top:7px;font-size:13.5px;color:#6b6350;line-height:1.5}

/* ---- the free trial ----
   One band, used on the search results, the order form and the confirmation
   page. Deliberately the same object in all three places: a customer who is
   inside a free trial should see the same thing saying so at every step, not
   three differently worded reassurances. */
.trialbar{background:#EFEDE5;border:1px solid #D6CFC0;border-left:4px solid var(--steel);
  border-radius:6px;padding:14px 18px;margin:0 0 18px}
.trialbar strong{display:block;font-size:16px;color:var(--ink);margin-bottom:5px}
.trialbar span{display:block;font-size:13.5px;color:#6b6350;line-height:1.55}
.trialbar a{font-weight:700;color:#2f5468;text-decoration:underline;text-underline-offset:3px}

/* Numbered steps on the free-trial page. */
ol.steps{counter-reset:step;list-style:none;margin:14px 0 22px;padding:0}
ol.steps li{counter-increment:step;position:relative;padding:0 0 16px 44px;
  font-size:15px;color:#3d444d;line-height:1.6}
ol.steps li::before{content:counter(step);position:absolute;left:0;top:-1px;
  width:29px;height:29px;border-radius:50%;background:var(--navy);color:#fff;
  font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
ol.steps strong{display:block;color:var(--ink);font-size:15.5px;margin-bottom:2px}

/* A ghost button outside the navy hero was light grey on white - the "Verify"
   and "Sign out" buttons on the account page have been close to invisible. The
   hero keeps the pale version; everywhere else it reads as ink on paper. */
.btn.ghost{color:var(--ink);border-color:#c3ccd6}
.btn.ghost:hover{background:#f2f5f8}
.hero .btn.ghost{color:#d6e0ec;border-color:#6d86a5}
.hero .btn.ghost:hover{background:rgba(255,255,255,.08)}

/* ---- account summary: three tiles above the history ---- */
.acctsum{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0 22px}
@media(max-width:640px){.acctsum{grid-template-columns:1fr}}
.acctsum .tile{background:#fff;border:1px solid var(--rule);border-radius:8px;padding:15px 16px 13px}
.acctsum .n{font:700 30px var(--slab);color:var(--steel);line-height:1;letter-spacing:-.02em}
.acctsum .n span{font:500 12px var(--mono);color:var(--sub);margin-left:6px;letter-spacing:.5px}
.acctsum .l{font:500 11px var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:var(--sub);margin-top:7px}
.acctsum .s{font-size:13.5px;color:#4d5661;line-height:1.5;margin-top:8px}
.acctsum .s a{display:block;margin-top:4px}

/* about page source list */
.srclist a{color:var(--steel);font-weight:700}
.srclist > div{font-size:14px;line-height:1.55}

/* The About page's opening statement - the one sentence the page exists for. */
.statement{font-family:var(--slab);font-weight:700;font-size:26px;line-height:1.3;color:var(--navy);
  margin:8px 0 22px;max-width:30ch}
.statement strong{color:var(--steel)}

/* ---- /start: the one question before either form ---- */
.start{padding:44px 22px 60px}
.choice{display:block;position:relative;background:var(--navy);color:var(--onnavy);text-decoration:none;
  border-radius:10px;padding:34px 88px 34px 34px;margin-top:18px;transition:transform .12s,box-shadow .12s}
.choice.alt{background:#fff;color:var(--navy);border:2px solid var(--navy)}
.choice:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(12,46,78,.18)}
.choice .k{display:block;font:700 26px var(--slab);line-height:1.2}
.choice .free{display:block;margin-top:10px;font:500 13px var(--mono);
  letter-spacing:2.6px;text-transform:uppercase;color:var(--steel)}
.choice .d{display:block;margin-top:8px;font-size:15px;line-height:1.5;color:var(--onnavy-sub);max-width:52ch}
.choice.alt .d{color:var(--sub)}
.choice .arrow{position:absolute;right:30px;top:50%;transform:translateY(-50%);font-size:34px;color:var(--exception)}
.choice.alt .arrow{color:var(--steel)}

/* ---- Contact us, above the footer on every page ---- */
.contactbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:#123a5f;border:1px solid #2a5078;border-radius:10px;padding:18px 24px;margin:0 0 26px;
  font-size:15px;color:var(--onnavy-sub)}
.contactbar .btn.cta{background:var(--exception);color:#fff;white-space:nowrap}
.contactbar .btn.cta:hover{background:#9c3125}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.wdr textarea{width:100%;box-sizing:border-box;border:1px solid #c3ccd6;border-radius:5px;padding:10px 12px;
  font:15px "Archivo",sans-serif;color:var(--ink);resize:vertical}