:root{
  --fg:#1f2328; --muted:#5c6570; --line:#dfe3e8; --bg:#ffffff; --soft:#f6f8fa;
  --accent:#185fa5; --accent-soft:#e8f1fb; --warn:#8a5a00; --warn-bg:#fff6e0;
  --ok:#2b6a30; --ok-bg:#eaf5ec; --radius:10px;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font:16px/1.68 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--fg); background:var(--bg);
}
.wrap{max-width:960px;margin:0 auto;padding:0 20px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

header.site{border-bottom:1px solid var(--line);background:var(--bg)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
.brand{font-weight:600;font-size:17px;letter-spacing:-.2px;color:var(--fg)}
.brand span{color:var(--accent)}
nav.top{display:flex;gap:18px;flex-wrap:wrap;font-size:14px}
nav.top a{color:var(--muted)}
nav.top a.is-active{color:var(--accent);font-weight:600}

main{padding:32px 0 64px}
h1{font-size:29px;line-height:1.25;margin:0 0 12px;letter-spacing:-.5px}
h2{font-size:21px;margin:38px 0 12px;letter-spacing:-.2px}
h3{font-size:17px;margin:26px 0 8px}
p{margin:12px 0}
.lede{font-size:18px;color:var(--muted);margin:0 0 22px}
ul,ol{margin:12px 0;padding-left:22px}
li{margin:6px 0}
small,.small{font-size:13px;color:var(--muted)}
code{font-family:var(--mono);font-size:.9em;background:var(--soft);padding:1px 5px;border-radius:4px}

.tablewrap{overflow-x:auto;margin:18px 0;border:1px solid var(--line);border-radius:var(--radius)}
table{border-collapse:collapse;width:100%;font-size:14px;min-width:520px}
th,td{border-bottom:1px solid var(--line);padding:9px 12px;text-align:left;white-space:nowrap}
th{background:var(--soft);font-weight:600;font-size:13px;position:sticky;top:0}
tbody tr:nth-child(even) td{background:#fbfcfd}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:hover td{background:var(--accent-soft)}
tr.hl td{background:var(--accent-soft)!important;font-weight:600}

.card{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin:18px 0}
.note{border-left:4px solid #d9a400;background:var(--warn-bg);padding:12px 16px;margin:18px 0;border-radius:0 8px 8px 0;font-size:15px}
.good{border-left:4px solid #3f9142;background:var(--ok-bg);padding:12px 16px;margin:18px 0;border-radius:0 8px 8px 0;font-size:15px}
.note strong,.good strong{color:var(--fg)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:20px 0}
.tile{border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.tile h3{margin:0 0 6px;font-size:16px}
.tile p{margin:0;font-size:14px;color:var(--muted)}

form.capture{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
form.capture input[type=email]{flex:1 1 240px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:15px}
form.capture button{padding:10px 18px;border:0;border-radius:8px;background:var(--accent);color:#fff;font-size:15px;cursor:pointer}

.btn{display:inline-block;padding:9px 16px;border-radius:8px;background:var(--accent);color:#fff;font-size:14px;font-weight:500;line-height:1.4}
.btn:hover{background:#12497f;text-decoration:none}
.btn.ghost{background:var(--bg);color:var(--accent);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--accent-soft)}
.btn.soon{background:var(--soft);color:var(--muted);border:1px dashed var(--line);cursor:not-allowed}
.buylist{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.buylist .item{border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;min-width:230px;flex:1 1 230px}
.buylist .item .t{font-size:14px;font-weight:600;margin-bottom:2px}
.buylist .item .m{font-size:12.5px;color:var(--muted);margin-bottom:9px}

footer.site{border-top:1px solid var(--line);padding:26px 0 50px;font-size:13px;color:var(--muted)}
footer.site nav{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:8px}
@media(max-width:600px){
  h1{font-size:24px}.lede{font-size:16px}
  header.site .wrap{align-items:flex-start;flex-direction:column;gap:10px}
}

/* ---- v2: header / footer / breadcrumb / structured blocks ---- */
header.site{background:#0f1b2d;border-bottom:0}
header.site .wrap{padding-top:18px;padding-bottom:0}
.brandbar{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.brand{font-size:22px;font-weight:600;letter-spacing:-.5px;color:#fff;text-decoration:none}
.brand b{color:#5aa9ff;font-weight:600}
.tagline{font-size:13px;color:#9fb3cc;margin:0}
nav.top{display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin-top:14px;padding-bottom:0}
nav.top a{color:#c8d6e6;font-size:13.5px;padding:9px 12px;border-radius:8px 8px 0 0;text-decoration:none}
nav.top a:hover{background:#1b2c45;color:#fff;text-decoration:none}
nav.top a.is-active{background:#152238;color:#fff;box-shadow:inset 0 -3px 0 #5aa9ff}
.navlabel{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#6c8299;margin:0 8px 0 4px}
@media(max-width:600px){nav.top{gap:2px}nav.top a{padding:8px 9px;font-size:13px}.navlabel{display:none}}

main{padding-top:26px}
.bcrumb{font-size:13px;color:var(--muted);margin:0 0 14px}
.bcrumb a{color:var(--muted)}
.bcrumb span[aria-current]{color:var(--fg)}

footer.site{background:#0f1b2d;border-top:0;color:#9fb3cc;margin-top:20px;padding-top:34px}
.footgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:26px;padding-bottom:26px}
.fcol h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#6c8299;margin:0 0 10px;font-weight:600}
.fcol a{display:block;color:#c8d6e6;font-size:14px;padding:3px 0;text-decoration:none}
.fcol a:hover{color:#fff;text-decoration:underline}
.fcol p{font-size:13.5px;line-height:1.65;color:#9fb3cc;margin:0}
.footbottom{display:flex;gap:20px;flex-wrap:wrap;font-size:12.5px;color:#6c8299;border-top:1px solid #1e2f49;padding:16px 0 34px}
.footbottom a{color:#6c8299}

table caption{caption-side:top;text-align:left;font-size:13px;color:var(--muted);padding:0 0 8px}
.lead{font-size:18px;color:var(--muted);margin:0 0 20px}
.faq h3{margin:22px 0 4px;font-size:16px}
.pill{display:inline-block;font-size:11.5px;padding:2px 8px;border-radius:20px;background:var(--accent-soft);color:var(--accent);margin-left:6px;vertical-align:middle}

/* ---- v3: screenshot / print branding ----------------------------------
   Three things, all free at runtime (inline SVG, no network request):
     1. a faint tiled watermark over data tables  (what people screenshot)
     2. a fainter tiled watermark on the page body
     3. print rules that add the page URL to the printout
   To switch any of it off, delete the matching block below.
   Nothing here affects LCP or CLS: no requests, no layout, pointer-events none.
------------------------------------------------------------------------ */

.tablewrap{position:relative}
.tablewrap::after{
  content:"";
  position:absolute;top:0;left:0;right:0;bottom:0;
  border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='110'%3E%3Ctext%20x='8'%20y='62'%20font-family='Helvetica,Arial,sans-serif'%20font-size='15'%20fill='%230f1b2d'%20fill-opacity='0.07'%3Ecollettool.com%3C/text%3E%3C/svg%3E");
  background-repeat:repeat;
  background-size:300px 110px;
  pointer-events:none;
}

body{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='560'%20height='300'%3E%3Ctext%20x='20'%20y='150'%20font-family='Helvetica,Arial,sans-serif'%20font-size='20'%20fill='%230f1b2d'%20fill-opacity='0.035'%3Ecollettool.com%3C/text%3E%3C/svg%3E");
  background-repeat:repeat;
  background-size:560px 300px;
}

.printsrc{display:none}

@media print{
  nav.top,form.capture{display:none!important}
  .printsrc{display:block;margin:0 0 14px;font-size:11px;color:#555;border-bottom:1px solid #ccc;padding-bottom:6px}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:10px;color:#666}
  .tablewrap::after{background-size:220px 80px}
}

.tile h4{margin:0 0 6px;font-size:16px}

/* ---- v4: ad slots, tools, footer contact ------------------------------ */

/* three banner slots; when a slot is off, ads.js removes the placeholder
   so no empty box is left behind */
.adslot{margin:18px 0 6px;text-align:center}
.adlabel{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#9aa7b4;margin:0 0 4px}
.adslot img{max-width:100%;height:auto;max-height:180px;border:1px solid var(--line);border-radius:8px;display:inline-block}

/* calculators */
.tool{border:1px solid var(--line);border-radius:var(--radius);background:var(--soft);padding:16px 18px;margin:16px 0;max-width:640px}
.tform{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.trow{display:flex;flex-direction:column;gap:4px;flex:1 1 150px}
.tlab{font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:4px}
.tool input,.tool select{padding:9px 10px;border:1px solid var(--line);border-radius:8px;font-size:15px;font-family:inherit;background:var(--bg);color:var(--fg)}
.tbtn{padding:10px 18px;border:0;border-radius:8px;background:var(--accent);color:#fff;font-size:14.5px;cursor:pointer}
.tbtn:hover{background:#12497f}
.thint{font-size:13.5px;color:var(--muted);margin:0 0 10px}
.tout{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.tout:empty{display:none}
.tres{font-size:16.5px;font-weight:600;margin:2px 0 8px}
.tsub{font-size:13.5px;color:var(--muted);margin:6px 0}
.ttable{min-width:0;margin:10px 0 4px;font-size:13.5px}
.ttable th,.ttable td{padding:6px 10px;white-space:normal}

/* footer contact image */
.footcontact{padding:14px 0 2px;border-top:1px solid #1e2f49}
.footcontact img{display:inline-block}

/* minimal cookie consent bar (GA4 only; Cloudflare analytics needs none) */
.cookiebar{position:fixed;left:16px;right:16px;bottom:16px;z-index:50;display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;background:#0f1b2d;color:#c8d6e6;font-size:14px;padding:12px 16px;border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.cookiebar button{padding:8px 18px;border:0;border-radius:8px;background:#5aa9ff;color:#0f1b2d;font-size:14px;font-weight:600;cursor:pointer}

/* ---- v6: ad placement + layout stability -------------------------------- */
/* Reserve height for the AdSense containers so the page does not jump when
   the ad loads (CLS). Remove these two rules only if you switch AdSense off. */
[data-adsense]{margin:20px 0;text-align:center;min-height:100px}
@media (max-width:600px){[data-adsense]{min-height:90px}}
[data-ad]{margin:0}
.adslot{margin:20px 0 6px}