/* Canvas Audit. Identity v1.0. One family, weight and case carry hierarchy. */

@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/inter-400.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/inter-500.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/inter-600.woff2) format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/inter-700.woff2) format("woff2")}

:root{
  --ink:#0D1B33;
  --blue:#1E5BD6;
  --blue-dark:#164AAF;
  --sky:#6FA0FF;
  --green:#137A4C;
  --amber:#9A6510;
  --red:#A62121;
  --slate:#5A6577;
  --rule:#E4E8EF;
  --wash:#F6F8FB;
  --paper:#FFFFFF;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  --wrap:1160px;
  --gut:clamp(20px,5vw,48px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  font-family:var(--sans);
  font-size:17px;line-height:1.65;
  color:var(--ink);background:var(--paper);
  font-feature-settings:"cv05" 1,"ss01" 1;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:var(--blue);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--blue-dark)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.narrow{max-width:780px}

/* ---------------------------------------------------------------- type */
h1,h2,h3,h4{font-weight:600;letter-spacing:-.011em;line-height:1.14;color:var(--ink)}
h1{font-size:clamp(34px,5.1vw,58px);letter-spacing:-.021em;line-height:1.06}
h2{font-size:clamp(27px,3.5vw,40px);letter-spacing:-.017em;line-height:1.12}
h3{font-size:clamp(19px,2vw,23px);line-height:1.28}
h4{font-size:17px;line-height:1.35}
p{max-width:68ch}
.lede{font-size:clamp(18px,2.1vw,21px);line-height:1.6;color:var(--slate)}
.kicker{
  font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.11em;
  color:var(--slate);margin-bottom:14px
}
.kicker.on-ink{color:var(--sky)}
.num{font-variant-numeric:tabular-nums;font-weight:700}
.muted{color:var(--slate)}
.small{font-size:15px;line-height:1.6}
.tiny{font-size:13px;line-height:1.55;color:var(--slate)}
strong,b{font-weight:600}

/* ---------------------------------------------------------------- layout */
section{padding-block:clamp(56px,7vw,104px)}
section.tight{padding-block:clamp(40px,5vw,68px)}
.ink{background:var(--ink);color:#fff}
.ink h1,.ink h2,.ink h3,.ink h4{color:#fff}
.ink .lede,.ink .muted,.ink .tiny{color:#B7C0D0}
.ink a{color:var(--sky)}
.wash{background:var(--wash)}
.ruled{border-top:1px solid var(--rule)}
.grid{display:grid;gap:clamp(20px,2.6vw,34px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:start}
@media(max-width:940px){.g3,.g4,.g5,.split{grid-template-columns:1fr}.g2{grid-template-columns:1fr}}
@media(max-width:940px) and (min-width:620px){.g4,.g5{grid-template-columns:repeat(2,1fr)}}
.stack>*+*{margin-top:18px}
.stack-s>*+*{margin-top:10px}
.head{max-width:760px;margin-bottom:clamp(30px,4vw,52px)}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font:inherit;font-weight:600;font-size:16px;letter-spacing:-.005em;
  padding:15px 26px;border-radius:4px;border:1px solid transparent;
  cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s,color .15s;
}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-dark);color:#fff}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#16264a;color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.ink .btn-ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.ink .btn-ghost:hover{border-color:#fff;color:#fff}
/* .ink a{color:var(--sky)} outranks .btn-primary on specificity. Restore button labels. */
.ink a.btn-primary,.ink a.btn-primary:hover{color:#fff}
.ink a.btn-ink,.ink a.btn-ink:hover{color:#fff}
.ink a.btn-ghost{color:#fff}
.btn-lg{padding:18px 32px;font-size:17px}
.btn[disabled]{opacity:.4;cursor:not-allowed}
/* clear the sticky header when jumping to an anchor or a result */
:target,#result,#check,#buy,#apply,#sprint,#rebuild,#review,#self{scroll-margin-top:96px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:30px}
.cta-note{font-size:14px;color:var(--slate)}
.ink .cta-note{color:#96A2B6}

/* ---------------------------------------------------------------- header */
header.site{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--rule)
}
header.site .bar{display:flex;align-items:center;gap:28px;height:72px}
header.site .logo{display:flex;align-items:center}
header.site .logo img{height:26px;width:auto}
header.site .logo img.mono{display:none}
nav.main{display:flex;gap:26px;margin-left:auto;align-items:center}
nav.main a{
  font-size:15px;font-weight:500;color:var(--ink);text-decoration:none;white-space:nowrap
}
nav.main a:hover{color:var(--blue)}
header.site a.navcta{padding:11px 20px;font-size:15px;white-space:nowrap}
header.site a.navcta,header.site a.navcta:hover{color:#fff}
@media(max-width:900px) and (min-width:701px){nav.main a.hide-sm{display:none}}
/* below 700 the bar wraps: the monogram and the primary action on row one,
   the section links become a single scrollable strip on row two. the full
   wordmark is ~298px wide and would push the action to a third row. */
@media(max-width:700px){
  header.site .bar{flex-wrap:wrap;height:auto;padding-block:12px;gap:10px 14px}
  header.site .logo{margin-right:auto}
  header.site .logo img.full{display:none}
  header.site .logo img.mono{display:block;height:30px}
  header.site a.navcta{padding:10px 16px;font-size:14px}
  nav.main{
    order:3;width:100%;margin-left:0;gap:20px;overflow-x:auto;
    padding-bottom:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    border-top:1px solid var(--rule);padding-top:10px
  }
  nav.main::-webkit-scrollbar{display:none}
  nav.main a{font-size:14px}
}

/* ---------------------------------------------------------------- footer */
footer.site{background:var(--ink);color:#B7C0D0;padding-block:64px 40px;font-size:15px}
footer.site img.mark{height:24px;width:auto;margin-bottom:22px}
footer.site a{color:#B7C0D0;text-decoration:none}
footer.site a:hover{color:#fff}
footer.site h2.fh{font-size:12px;text-transform:uppercase;letter-spacing:.11em;color:#7C889D;font-weight:500;margin-bottom:14px}
footer.site .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
@media(max-width:860px){footer.site .cols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){footer.site .cols{grid-template-columns:1fr}}
footer.site ul{list-style:none}
footer.site li+li{margin-top:9px}
footer.site .base{
  margin-top:46px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:8px 24px;font-size:13px;color:#7C889D
}

/* ---------------------------------------------------------------- cards */
.card{background:#fff;border:1px solid var(--rule);border-radius:6px;padding:clamp(22px,2.4vw,30px)}
.card.on-ink{background:#14243F;border-color:rgba(255,255,255,.12)}
.card h3{margin-bottom:10px}
.card .tiny{margin-top:12px}
.tag{
  display:inline-block;font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.09em;padding:5px 9px;border-radius:3px;background:var(--wash);color:var(--slate)
}
.tag.blue{background:#E8F0FF;color:var(--blue)}
.tag.green{background:#E6F3EC;color:var(--green)}
.tag.amber{background:#FBF1DF;color:#7A5009}

/* ---------------------------------------------------------------- scorecard */
.score-panel{border:1px solid var(--rule);border-radius:6px;overflow:hidden;background:#fff}
.score-head{
  background:var(--ink);color:#fff;padding:22px 26px;
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap
}
.score-head .big{font-size:44px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.score-head .band{font-size:14px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--sky)}
.score-head .who{margin-left:auto;font-size:13px;color:#96A2B6}
.dim{display:grid;grid-template-columns:1fr 168px 44px;gap:16px;align-items:center;
  padding:13px 26px;border-top:1px solid var(--rule)}
.dim:first-of-type{border-top:none}
.dim .label{font-size:15px;font-weight:500}
.bar{height:7px;background:var(--rule);border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--blue);border-radius:4px}
.bar i.ok{background:var(--green)}
.bar i.warn{background:#C8901E}
.bar i.bad{background:var(--red)}
.dim .v{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right;color:var(--slate)}
@media(max-width:560px){.dim{grid-template-columns:1fr 90px 34px;padding-inline:18px;gap:10px}}

/* ---------------------------------------------------------------- lists */
ul.ticks{list-style:none}
ul.ticks li{position:relative;padding-left:28px;margin-top:11px;font-size:16px}
ul.ticks li::before{
  content:"";position:absolute;left:0;top:9px;width:12px;height:7px;
  border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg)
}
.ink ul.ticks li::before{border-color:var(--sky)}
ul.plain{list-style:none}
ul.plain li{position:relative;padding-left:20px;margin-top:9px}
ul.plain li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:1.5px;background:var(--slate)}
ol.steps{list-style:none;counter-reset:s}
ol.steps li{counter-increment:s;position:relative;padding-left:52px;margin-top:22px}
ol.steps li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--blue);
  font-variant-numeric:tabular-nums
}
ol.steps h3,ol.steps h4{font-size:17px;line-height:1.35;margin-bottom:4px}
ul.plain>li>h3,.dimlist h3{font-size:17px;line-height:1.35}

/* ---------------------------------------------------------------- table */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:15px}
th,td{text-align:left;padding:15px 16px;border-bottom:1px solid var(--rule);vertical-align:top}
thead th{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--slate);
  font-weight:600;border-bottom:1px solid var(--ink);white-space:nowrap
}
tbody tr:last-child td{border-bottom:none}
td.price{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------------------------------------------------------------- forms */
.field{margin-top:18px}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:7px}
.field .hint{font-size:13px;color:var(--slate);margin-bottom:7px;font-weight:400}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;
  border:1px solid #C8D0DE;border-radius:4px;padding:13px 14px
}
.field textarea{resize:vertical;min-height:88px}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--blue);outline:2px solid rgba(30,91,214,.18);outline-offset:0
}
.hp{position:absolute;left:-9999px}
.form-card{background:#fff;border:1px solid var(--rule);border-radius:6px;padding:clamp(24px,3vw,36px)}
fieldset{border:0}
legend{font-size:14px;font-weight:600;margin-bottom:8px}

/* ---------------------------------------------------------------- signal check */
.check{background:#fff;border:1px solid var(--rule);border-radius:6px;overflow:hidden}
.check-top{padding:22px 26px;border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.check-top .step{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--slate)}
.progress{flex:1;min-width:120px;height:5px;background:var(--rule);border-radius:3px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--blue);width:0;transition:width .25s ease}
.check-body{padding:clamp(24px,3vw,38px) clamp(22px,3vw,34px)}
.q-dim{font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.q-text{font-size:clamp(20px,2.4vw,26px);font-weight:600;line-height:1.25;letter-spacing:-.014em;margin-bottom:8px}
.q-help{color:var(--slate);font-size:15.5px;margin-bottom:22px;max-width:60ch}
.opts{display:grid;gap:10px}
.opt{
  display:flex;gap:13px;align-items:flex-start;width:100%;text-align:left;
  font:inherit;font-size:16px;padding:15px 17px;background:#fff;cursor:pointer;
  border:1px solid #C8D0DE;border-radius:5px;transition:border-color .12s,background .12s
}
.opt:hover{border-color:var(--blue);background:#F7FAFF}
.opt .key{
  flex:0 0 22px;height:22px;border-radius:50%;border:1.5px solid #C8D0DE;
  font-size:11.5px;font-weight:700;display:grid;place-items:center;color:var(--slate);margin-top:1px
}
.opt:hover .key{border-color:var(--blue);color:var(--blue)}
.check-foot{padding:16px 26px;border-top:1px solid var(--rule);display:flex;gap:14px;align-items:center;background:var(--wash)}
.check-foot .tiny{margin-left:auto;text-align:right}
.linkish{background:none;border:0;font:inherit;font-size:14px;color:var(--slate);cursor:pointer;text-decoration:underline;padding:0}
.linkish:hover{color:var(--ink)}
.hidden{display:none!important}
.result-band{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:26px;border-radius:6px;background:var(--ink);color:#fff;margin-bottom:26px
}
.result-band .n{font-size:56px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.result-band .of{font-size:15px;color:#96A2B6}
.result-band .txt strong{display:block;font-size:19px;color:#fff}
.flag{display:flex;gap:12px;padding:16px 18px;border-radius:5px;background:var(--wash);border-left:3px solid var(--blue);margin-top:12px}
.flag.risk{border-left-color:var(--red)}
.flag.watch{border-left-color:#C8901E}
.flag .fl{font-size:15.5px}
.flag .fl b{font-weight:600}

/* ---------------------------------------------------------------- misc */
.faq details{border-top:1px solid var(--rule);padding:20px 0}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{
  font-size:18px;font-weight:600;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:20px;align-items:flex-start
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:24px;color:var(--blue);line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin-top:12px;color:var(--slate)}
.quote{border-left:3px solid var(--blue);padding-left:22px;font-size:clamp(19px,2.2vw,24px);
  font-weight:500;line-height:1.4;letter-spacing:-.012em}
.ink .quote{border-left-color:var(--sky)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:100}
.skip:focus{left:12px;top:12px}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.doc{max-width:760px}
.doc h2{margin-top:44px;margin-bottom:12px}
.doc h3{margin-top:26px;margin-bottom:8px}
.doc p,.doc li{color:var(--slate)}
.doc ul{margin-left:20px;margin-top:8px}
.doc li{margin-top:6px}