/* Get MSP Leads - getmspleads.com
   Ink, brass and cool paper. Serif for argument, mono for labels and data.
   The look is an instrument readout, not a SaaS brochure, because that is what we sell. */

:root{
  --ink:#0E1620; --ink-2:#2B3742; --ink-3:#5A6773;
  --ground:#EDEFF1; --panel:#F7F8F9; --rule:#C6CCD2;
  --brass:#B0801E; --brass-lit:#C8952C;
  --good:#3F7D58; --warn:#A8761C; --bad:#A2453B;
  --serif:"Iowan Old Style","Charter",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",sans-serif;
  --measure:64ch;
}
@media (prefers-color-scheme:dark){
  :root{
    --ink:#DFE5EA; --ink-2:#AEB9C4; --ink-3:#7C8894;
    --ground:#0C131A; --panel:#131C25; --rule:#2A3742;
    --brass:#D2A03A; --brass-lit:#E3B44A;
    --good:#5E9E76; --warn:#C79433; --bad:#C26256;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--serif); font-size:19px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1040px; margin:0 auto; padding:0 24px}
.reading .wrap{max-width:760px}

.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; background:var(--ink); color:var(--ground); padding:10px 16px; z-index:10}

/* ---- chrome ---- */
header.site{border-bottom:1px solid var(--rule)}
.bar{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 24px; flex-wrap:wrap}
.mark{
  font-family:var(--mono); font-size:14px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:700; text-decoration:none; color:inherit;
}
.mark span{color:var(--brass)}
header.site nav{display:flex; gap:22px; align-items:center; flex-wrap:wrap}
header.site nav a{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); text-decoration:none;
}
header.site nav a:hover{color:var(--ink)}
header.site nav a.navcta{
  color:var(--ground); background:var(--ink); padding:10px 16px; border:1px solid var(--ink);
}
header.site nav a.navcta:hover{background:transparent; color:var(--ink)}

footer.site{border-top:1px solid var(--rule); margin-top:80px; padding:36px 0 64px;
  font-family:var(--sans); font-size:14.5px; color:var(--ink-3)}
footer.site nav{display:flex; gap:20px; flex-wrap:wrap; margin:16px 0}
footer.site a{color:var(--ink-2)}
footer.site .fine{font-size:13px; margin:0}

/* ---- type ---- */
h1,h2,h3{text-wrap:balance; margin:0}
h1{font-size:clamp(2.3rem,5.4vw,3.5rem); line-height:1.05; letter-spacing:-.022em; font-weight:400}
h2{font-size:clamp(1.6rem,3.2vw,2.15rem); line-height:1.14; letter-spacing:-.015em; font-weight:400; margin:2em 0 .55em}
h3{font-size:1.18rem; line-height:1.3; font-weight:700; margin:1.8em 0 .4em}
p{margin:1.05em 0; max-width:var(--measure)}
.lede,.standfirst{font-size:1.2rem; color:var(--ink-2)}
.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 12px}
.byline{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin:18px 0 34px; padding-bottom:18px; border-bottom:1px solid var(--rule)}
a{color:inherit}
strong{font-weight:700}
ul,ol{max-width:var(--measure); padding-left:1.15em}
li{margin:.5em 0}
li::marker{color:var(--brass)}
blockquote{margin:1.6em 0; padding-left:20px; border-left:3px solid var(--brass); color:var(--ink-2)}
blockquote p{margin:.4em 0}
code{font-family:var(--mono); font-size:.86em; background:color-mix(in srgb,var(--rule) 45%,transparent); padding:1px 5px}

.pagehead{padding:56px 0 8px; border-bottom:1px solid var(--rule); margin-bottom:8px}
main{padding-top:8px}

/* ---- structure ---- */
.band{border-top:1px solid var(--rule)}
.row{display:grid; grid-template-columns:150px minmax(0,1fr); gap:40px; padding:60px 0}
@media (max-width:820px){ .row{grid-template-columns:1fr; gap:16px; padding:42px 0} }
.tag{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); padding-top:.55em}
.col{max-width:var(--measure)}
.col.wide{max-width:none}
.hero{padding:44px 0 22px; border-bottom:1px solid var(--rule)}
.hero h1{max-width:13ch}

/* ---- tables ---- */
.scroll{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-family:var(--sans); font-size:15px; margin:1.2em 0}
th{text-align:left; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); font-weight:400;
  border-bottom:1px solid var(--rule); padding:0 12px 9px 0}
td{border-bottom:1px solid var(--rule); padding:12px 12px 12px 0; vertical-align:top}

/* ---- readout ---- */
.readout{background:var(--panel); border:1px solid var(--rule); font-family:var(--mono);
  font-size:13px; line-height:1.5; padding:22px 24px; margin:34px 0 0; overflow-x:auto}
.readout-head{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  border-bottom:1px solid var(--rule); padding-bottom:11px; margin-bottom:16px}
.bar-row{display:grid; grid-template-columns:150px 46px minmax(120px,1fr); gap:12px; align-items:center; padding:4px 0}
.bar-row b{font-weight:400; color:var(--ink-2); white-space:nowrap}
.bar-row .n{text-align:right; font-variant-numeric:tabular-nums}
.track{height:9px; background:color-mix(in srgb,var(--rule) 55%,transparent)}
.fill{height:100%; background:var(--good)}
.fill.low{background:var(--bad)}
.verdict{border-top:1px solid var(--rule); margin-top:16px; padding-top:14px;
  display:flex; gap:22px; flex-wrap:wrap; align-items:baseline}
.verdict .big{font-size:26px}
.verdict .lab{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.caption{font-family:var(--sans); font-size:13.5px; color:var(--ink-3); margin-top:12px}
.note{font-family:var(--sans); font-size:14.5px; color:var(--ink-3)}

/* ---- price ---- */
.price{border:1px solid var(--ink-3); padding:30px 32px; background:var(--panel); max-width:var(--measure)}
.fig{font-family:var(--mono); font-size:clamp(2.3rem,5.6vw,3.2rem); letter-spacing:-.03em; line-height:1}
.fig small{font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  display:block; margin-top:12px}

/* ---- cta ---- */
.cta{display:inline-block; font-family:var(--mono); font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; padding:15px 26px;
  background:var(--ink); color:var(--ground); border:1px solid var(--ink); cursor:pointer}
.cta:hover{background:transparent; color:var(--ink)}
.cta.ghost{background:transparent; color:var(--ink)}
.cta.ghost:hover{background:var(--ink); color:var(--ground)}
.ctas{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px}
:focus-visible{outline:2px solid var(--brass); outline-offset:3px}

/* ---- blog ---- */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:1px;
  background:var(--rule); border:1px solid var(--rule); margin:0 0 44px}
.card{background:var(--ground); padding:24px; text-decoration:none; display:flex;
  flex-direction:column; gap:8px}
.card:hover{background:var(--panel)}
.card h3{margin:0; font-size:1.12rem}
.card p{margin:0; font-family:var(--sans); font-size:14.5px; color:var(--ink-2)}
.card .meta{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:var(--ink-3); margin-top:auto}

.post{padding:48px 0 0}
.post h1{font-size:clamp(2rem,4.6vw,3rem)}
.post h2{margin-top:2.2em}
.endcta{border-top:1px solid var(--rule); margin-top:56px; padding-top:28px}
.endcta p{max-width:var(--measure)}

/* ---- lead form ---- */
dialog#lead{border:none; padding:0; background:transparent; max-width:560px; width:calc(100% - 32px)}
dialog#lead::backdrop{background:rgba(6,10,15,.72)}
.sheet{background:var(--ground); border:1px solid var(--ink-3); padding:34px; position:relative}
.sheet h3{font-family:var(--serif); font-weight:400; font-size:1.65rem; margin:0 0 6px}
.sheet .why{font-family:var(--sans); font-size:14.5px; color:var(--ink-2); margin:0 0 22px}
.field{display:flex; flex-direction:column; gap:5px; margin-bottom:14px}
.field label{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.field input,.field select{font-family:var(--sans); font-size:16px; padding:11px 12px;
  color:var(--ink); background:var(--panel); border:1px solid var(--rule); border-radius:0}
.two{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:520px){ .two{grid-template-columns:1fr; gap:0} }
.sheet .cta{width:100%; text-align:center; border:none; margin-top:8px}
.sheet .fine{font-family:var(--sans); font-size:12.5px; color:var(--ink-3); margin:16px 0 0}
.closex{position:absolute; top:10px; right:14px; background:none; border:none; cursor:pointer;
  font-family:var(--mono); font-size:12px; color:var(--ink-3); padding:8px}