/* pileweatherseal.com — design tokens */
:root{
  --primary:#1E3A5F; --secondary:#3B82A6; --accent:#F59E0B;
  --text:#1F2937; --muted:#6B7280; --bg:#F8FAFC; --surface:#FFFFFF;
  --border:#E2E8F0;
  --font-h:"IBM Plex Sans","Noto Sans SC",system-ui,sans-serif;
  --font-m:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  --container:1200px; --section:72px; --gap:24px;
  --r-card:10px; --r-btn:8px; --r-in:6px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-h);color:var(--text);background:var(--bg);line-height:1.65;font-size:16px}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary)}
.mono{font-family:var(--font-m)}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
/* header */
.site-header{background:var(--primary);color:#fff;position:sticky;top:0;z-index:50}
.header-in{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{color:#fff;text-decoration:none;font-weight:700;font-size:20px;letter-spacing:.5px}
.brand small{display:block;font-size:11px;font-weight:400;opacity:.75;letter-spacing:1.5px}
.nav-desktop{display:flex;gap:28px;align-items:center}
.nav-desktop a{color:#fff;text-decoration:none;font-size:15px;opacity:.9}
.nav-desktop a:hover{opacity:1;text-decoration:underline}
.btn{display:inline-block;background:var(--accent);color:#1a1a1a;font-weight:600;
  padding:12px 28px;border-radius:var(--r-btn);text-decoration:none;border:none;cursor:pointer;
  font-size:15px;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(245,158,11,.35)}
.btn:active{transform:scale(.97)}
.btn-outline{background:transparent;color:var(--primary);border:2px solid var(--primary)}
.btn-outline:hover{background:var(--primary);color:#fff;box-shadow:none}
.nav-toggle{display:none;background:none;border:none;color:#fff;font-size:26px;cursor:pointer}
.nav-mobile{display:none;background:var(--primary);padding:0 24px 16px}
.nav-mobile a{display:block;color:#fff;text-decoration:none;padding:10px 0;border-top:1px solid rgba(255,255,255,.15)}
/* hero */
.hero{background:linear-gradient(135deg,var(--primary) 0%,#16304f 60%,#10263d 100%);color:#fff;padding:64px 0}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.hero h1{font-size:40px;line-height:1.2;margin-bottom:16px;font-weight:700}
.hero p.sub{font-size:17px;opacity:.85;margin-bottom:28px;max-width:520px}
.hero .cta-row{display:flex;gap:16px;flex-wrap:wrap}
.hero-mini{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-card);padding:24px}
.hero-mini h3{font-size:16px;margin-bottom:14px;color:var(--accent)}
/* sections */
.section{padding:var(--section) 0}
.section h1{font-size:32px;margin-bottom:12px;color:var(--primary)}
.section h2{font-size:30px;margin-bottom:12px;color:var(--primary)}
.section .lede{color:var(--muted);max-width:720px;margin-bottom:36px;font-size:17px}
.two-col{display:grid;grid-template-columns:2fr 1fr;gap:40px;align-items:start}
.two-col>*{min-width:0}
/* selector */
.selector{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);
  padding:32px;display:grid;grid-template-columns:1fr 2fr;gap:32px}
.selector>*{min-width:0}
.field{margin-bottom:18px}
.field label{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.field select,.field input{width:100%;padding:10px 12px;border:1px solid var(--border);
  border-radius:var(--r-in);font-size:15px;font-family:var(--font-h);background:#fff}
.field .hint{font-size:12px;color:var(--muted);margin-top:4px}
.radio-row{display:flex;gap:8px;flex-wrap:wrap}
.radio-pill{border:1px solid var(--border);border-radius:20px;padding:8px 16px;font-size:14px;
  cursor:pointer;background:#fff;transition:all .15s var(--ease)}
.radio-pill[aria-pressed="true"]{background:var(--primary);color:#fff;border-color:var(--primary)}
.result-card{border:2px solid var(--secondary);border-radius:var(--r-card);padding:24px;margin-bottom:16px;background:#f0f7fb;color:var(--text)}
.result-card h3{color:var(--primary);margin-bottom:8px}
.result-card .match{font-family:var(--font-m);font-size:13px;color:var(--secondary);margin-bottom:8px}
.result-note{background:#fff8e6;border-left:4px solid var(--accent);padding:12px 16px;border-radius:0 8px 8px 0;font-size:14px;margin-top:16px}
/* spec diagram */
.spec-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.spec-cell{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);
  padding:18px 14px;text-align:center}
.spec-cell .k{font-family:var(--font-m);font-weight:700;color:var(--primary);font-size:20px}
.spec-cell .t{font-size:13px;font-weight:600;margin:6px 0 4px}
.spec-cell .v{font-family:var(--font-m);font-size:12px;color:var(--muted)}
/* product cards */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.card-grid>*{min-width:0}
.pcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.pcard:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(30,58,95,.12)}
.pcard img{aspect-ratio:1/1;object-fit:cover;width:100%}
.pcard-body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.pcard-body h3{font-size:18px;color:var(--primary)}
.pcard-body p{font-size:14px;color:var(--muted);flex:1}
.pcard-body .spec-line{font-family:var(--font-m);font-size:12px;color:var(--secondary)}
/* tables */
.spec-table{width:100%;border-collapse:collapse;background:var(--surface);border-radius:var(--r-card);overflow:hidden}
.spec-table th,.spec-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border);font-size:14px}
.spec-table th{background:var(--primary);color:#fff;font-weight:600}
.spec-table td.k{font-family:var(--font-m);font-weight:600;white-space:nowrap}
/* prose */
.prose-layout{display:grid;grid-template-columns:2fr 1fr;gap:48px;align-items:start}
.prose-layout>*{min-width:0}
.prose{font-size:16.5px;max-width:68ch}
.prose h2{font-size:24px;margin:36px 0 12px}
.prose h3{font-size:19px;margin:28px 0 10px;color:var(--primary)}
.prose p{margin-bottom:16px}
.prose ul{margin:0 0 16px 22px}
.prose li{margin-bottom:8px}
.sidebar{position:sticky;top:88px;display:flex;flex-direction:column;gap:20px}
.side-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:20px}
.side-box h4{font-size:15px;margin-bottom:12px;color:var(--primary)}
.side-box ul{list-style:none}
.side-box li{margin-bottom:8px;font-size:14px}
.quote-card{background:var(--primary);color:#fff;border-radius:var(--r-card);padding:24px}
.quote-card h4{margin-bottom:10px}
.quote-card p{font-size:14px;opacity:.85;margin-bottom:16px}
/* forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .full{grid-column:1/-1}
.honeypot{position:absolute;left:-9999px;top:-9999px;opacity:0;height:0;width:0}
/* footer */
.site-footer{background:var(--primary);color:#fff;padding:56px 0 28px;margin-top:var(--section)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:36px}
.foot-grid>*{min-width:0}
.foot-grid h4{font-size:15px;margin-bottom:14px;color:var(--accent)}
.foot-grid a{color:#fff;opacity:.8;text-decoration:none;font-size:14px;display:block;margin-bottom:8px}
.foot-grid a:hover{opacity:1;text-decoration:underline}
.foot-grid p{font-size:14px;opacity:.8;margin-bottom:8px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.15);padding-top:20px;font-size:13px;opacity:.7;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
/* reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
html.no-js .reveal{opacity:1;transform:none}
/* responsive */
@media (max-width:1024px){
  .spec-grid{grid-template-columns:repeat(4,1fr)}
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:899px){
  .nav-desktop{display:none}
  .nav-toggle{display:block}
  .nav-mobile.open{display:block}
}
@media (max-width:768px){
  .hero-grid,.two-col,.prose-layout,.selector{grid-template-columns:1fr}
  .sidebar{position:static}
  .card-grid{grid-template-columns:1fr}
  .spec-grid{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:30px}
  .section{padding:48px 0}
  .form-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
}
@media (hover: hover){
  a:hover{text-decoration:underline}
  .pcard:hover{transform:translateY(-3px)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}