/* Weather Data Research - palette matched to the report PDF. */
:root{
  --navy:#1d3f66; --green:#1f8f6b; --ink:#1c2733; --sub:#5a6673;
  --rule:#d7dde4; --bg:#f6f8fa; --paper:#fff;
  --warn:#7a5a00; --warnbg:#faeccf; --bad:#7c2d1c; --badbg:#f4dede;
  --ok:#1d5c1d; --okbg:#e4f0e4;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.62 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased;
}
a{color:var(--navy)}
.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:baseline;gap:9px;text-decoration:none;color:#fff}
.brand .mark{font-size:15px}
.brand .name{font-size:13px;letter-spacing:2.6px;font-weight:600}
header.site nav{margin-left:auto;display:flex;gap:22px;align-items:center}
header.site nav a{color:#c3cdda;text-decoration:none;font-size:14px}
header.site nav a:hover{color:#fff}
header.site nav a.cta{
  background:#fff;color:var(--navy);padding:8px 16px;border-radius:5px;font-weight:600
}
header.site nav a.cta:hover{background:#eef2f7}

/* ---- 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-size:38px;line-height:1.2;margin:0 0 16px;max-width:19ch;font-weight:650}
.hero p{font-size:17px;color:#c9d4e2;max-width:60ch;margin:0 0 26px}
.hero .btnrow{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.kicker{font-size:11px;letter-spacing:2.6px;color:#8fa6c2;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-size:25px;margin:0 0 8px;font-weight:650}
h3{font-size:17px;margin:0 0 6px;font-weight:650}
.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(--green);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(--green);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=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)}

/* ---- 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(--green)}
.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(--green);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(--green);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}