/* ============================================================
   CALIBRATE — The Marketing Blind Spot design system
   Geist throughout. Space Grotesk for figures, counters and
   small labels only. Red / black / white. Radius 0. No cards.
   ============================================================ */

@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/geist-400.woff2') format('woff2');}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/geist-500.woff2') format('woff2');}

:root{
  --red:#D4331A;
  --amber:#B87914;              /* RAG amber, deep + desaturated to sit with the brand */
  --green:#2E7D57;              /* RAG green, forest not neon */
  --ink:#111114;
  --sub:#5B5B64;
  --rule:#E4E4E9;
  --track:#ECECEF;
  --fog:#F7F7F9;
  --paper:#FFFFFF;
  --tint:#FDF4F2;               /* selected option / red block wash */
  --font:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --figure:'Space Grotesk',var(--font);
  --maxw:1120px;
  --pad:5vw;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font);font-size:17px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;}
::selection{background:var(--tint);}

/* ---------------- Type ---------------- */
h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-0.03em;line-height:1.05;}
.eyebrow{font-size:12px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--sub);}
.label{font-family:var(--figure);font-size:12px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--sub);}
.lead{font-size:20px;line-height:1.55;color:var(--sub);font-weight:400;}
.small{font-size:14px;line-height:1.55;color:var(--sub);}

/* ---------------- Buttons + links ---------------- */
.btn{
  font-family:var(--font);font-size:15px;font-weight:500;letter-spacing:0;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:0;
  padding:14px 24px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;
  white-space:nowrap;text-decoration:none;transition:opacity .15s;
}
.btn:hover{opacity:.86;}
.btn[disabled]{opacity:.28;pointer-events:none;}
.link{
  font-size:15px;font-weight:500;color:var(--red);text-decoration:none;
  background:none;border:0;padding:0;cursor:pointer;font-family:var(--font);
  display:inline-flex;align-items:center;gap:7px;
}
.link:hover{text-decoration:underline;text-underline-offset:3px;}

/* ---------------- Screen shell ---------------- */
.screen{display:none;min-height:100vh;flex-direction:column;}
.screen.active{display:flex;}

/* ---------------- Header (every screen) ---------------- */
.cal-top{
  display:flex;align-items:center;gap:22px;padding:16px var(--pad);
  border-bottom:1px solid var(--rule);background:var(--paper);
  position:sticky;top:0;z-index:20;
}
.cal-brand{display:flex;align-items:center;gap:18px;flex:none;text-decoration:none;color:var(--ink);}
.cal-mark{width:24px;height:24px;flex:none;}
.cal-lock{display:flex;flex-direction:column;line-height:1.12;}
.cal-lock .n{font-weight:500;font-size:15px;letter-spacing:-0.01em;}
.cal-lock .s{font-size:12px;color:var(--sub);}
.cal-div{width:1px;height:30px;background:var(--rule);flex:none;}
.cal-name{font-weight:500;font-size:17px;letter-spacing:-0.01em;}
.cal-prog{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:16px;min-width:0;}
.cal-prog .pn{font-family:var(--figure);font-size:13px;letter-spacing:0.04em;color:var(--sub);white-space:nowrap;}
.cal-prog .track{width:180px;max-width:38vw;height:3px;background:var(--rule);overflow:hidden;flex:none;}
.cal-prog .track i{display:block;height:100%;background:var(--red);transition:width .4s ease;}

/* ---------------- Body wrappers ---------------- */
.cal-body{padding:64px var(--pad);flex:1;width:100%;}
.wrapq{max-width:840px;margin:0 auto;width:100%;}
.wrapn{max-width:720px;margin:0 auto;width:100%;}

/* ---------------- Landing ---------------- */
.h-hero{padding:76px var(--pad) 64px;}
.h-hero .eyebrow{margin-bottom:22px;}
.h-hero h1{font-size:clamp(38px,5.4vw,60px);letter-spacing:-0.035em;line-height:1.03;max-width:16ch;}
.h-hero .lead{margin-top:24px;max-width:52ch;}
.h-hero .cta-row{margin-top:40px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.h-hero .cta-note{color:var(--sub);font-size:15px;}

/* "What it looks at" band on fog */
.cov{background:var(--fog);border-top:1px solid var(--rule);padding:72px var(--pad);}
.cov-wrap{max-width:var(--maxw);margin:0 auto;}
.cov h2{font-size:clamp(26px,3vw,34px);}
.cov .cov-intro{max-width:66ch;color:var(--sub);font-size:17px;line-height:1.6;margin-top:18px;}
.cov-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:40px;border-top:1px solid var(--ink);}
.cov-col{padding:24px 26px 8px 0;border-right:1px solid var(--rule);}
.cov-col:last-child{border-right:0;padding-right:0;}
.cov-col .ce{font-family:var(--figure);font-size:11px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--sub);}
.cov-col .cn{font-weight:500;font-size:19px;letter-spacing:-0.02em;margin:10px 0 12px;}
.cov-col p{margin:0;color:var(--sub);font-size:15px;line-height:1.55;}

/* "What it won't do" — red left rule block (used on landing + result) */
.redblock{border-left:3px solid var(--red);padding:4px 0 4px 22px;max-width:64ch;}
.redblock h3{font-size:19px;letter-spacing:-0.02em;margin-bottom:10px;}
.redblock p{margin:0 0 12px;color:var(--sub);font-size:16px;line-height:1.6;}
.redblock p:last-child{margin-bottom:0;}
.landing-wont{max-width:var(--maxw);margin:56px auto 0;padding:0 var(--pad);}

/* ---------------- Question screen ---------------- */
.q-sec{font-family:var(--figure);font-size:12px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--sub);}
.q-explain{margin-top:14px;color:var(--sub);font-size:16px;line-height:1.6;max-width:64ch;}
.q-title{font-size:clamp(24px,3vw,30px);font-weight:500;letter-spacing:-0.02em;line-height:1.16;margin-top:34px;max-width:26ch;}
.opts{margin-top:34px;border-top:1px solid var(--rule);}
.opt{
  display:grid;grid-template-columns:30px 1fr;gap:18px;align-items:baseline;
  width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--rule);
  padding:20px 20px 20px 3px;cursor:pointer;font-family:var(--font);
  border-left:3px solid transparent;transition:background .12s;
}
.opt .k{font-family:var(--figure);font-size:14px;font-weight:500;color:var(--sub);}
.opt .t{font-size:17px;line-height:1.45;color:var(--ink);}
.opt:hover{background:var(--fog);}
.opt.sel{border-left-color:var(--red);background:var(--tint);padding-left:19px;}
.opt.sel .k{color:var(--red);}
.q-nav{display:flex;justify-content:space-between;align-items:center;margin-top:38px;}

/* ---------------- Score display (details + result) ---------------- */
.scoreline{display:flex;align-items:baseline;gap:12px;}
.score-big{font-family:var(--figure);font-size:clamp(56px,9vw,84px);font-weight:500;color:var(--red);letter-spacing:-0.03em;line-height:1;}
.score-out{font-family:var(--figure);font-size:22px;color:var(--sub);font-weight:400;}
.score-interp{margin-top:18px;font-size:19px;line-height:1.5;color:var(--ink);max-width:52ch;}

.rule2{height:0;border:0;border-top:2px solid var(--ink);margin:38px 0 0;max-width:320px;}
.rule1{height:0;border:0;border-top:1px solid var(--rule);margin:0;}

/* ---------------- Details form ---------------- */
.form-head{margin-top:38px;}
.form-head h2{font-size:24px;letter-spacing:-0.02em;}
.form-head p{margin-top:12px;color:var(--sub);font-size:16px;line-height:1.6;max-width:56ch;}
.form{margin-top:28px;}
.ff2{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}
.field label{font-family:var(--figure);font-size:12px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--sub);}
.field .inp,.field .sel{
  border:1px solid var(--rule);border-radius:0;padding:14px 15px;font-size:16px;
  color:var(--ink);background:var(--paper);font-family:var(--font);width:100%;outline:none;
  transition:border-color .12s;-webkit-appearance:none;appearance:none;
}
.field .sel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235B5B64' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:38px;}
.field .inp::placeholder{color:#A6A6AE;}
.field .inp:focus,.field .sel:focus{border-color:var(--ink);}
.field .inp.err,.field .sel.err{border-color:var(--red);}
.ferr{font-size:13px;color:var(--red);display:none;}
.ferr.show{display:block;}

/* consent checkboxes */
.consent{display:flex;flex-direction:column;gap:14px;margin:8px 0 4px;}
.ck{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;cursor:pointer;user-select:none;}
.ck input{position:absolute;opacity:0;width:0;height:0;}
.ck .box{width:20px;height:20px;border:1px solid var(--ink);border-radius:0;background:var(--paper);position:relative;flex:none;margin-top:2px;transition:background .12s;}
.ck .box::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid var(--paper);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .12s;}
.ck input:checked + .box{background:var(--ink);}
.ck input:checked + .box::after{transform:rotate(45deg) scale(1);}
.ck input:focus-visible + .box{box-shadow:0 0 0 3px rgba(212,51,26,.25);}
.ck .lab{font-size:15px;line-height:1.5;color:var(--sub);}
.ck .lab a{color:var(--red);text-decoration:none;}
.ck .lab a:hover{text-decoration:underline;}
.form-actions{display:flex;gap:18px;align-items:center;justify-content:space-between;margin-top:26px;flex-wrap:wrap;}

/* ---------------- Submitting ---------------- */
#screen-submitting{justify-content:center;align-items:center;gap:22px;background:var(--fog);}
.spinner{width:34px;height:34px;border:2px solid var(--rule);border-top-color:var(--red);border-radius:50%;animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.proc-text{font-family:var(--figure);font-size:13px;letter-spacing:0.06em;color:var(--sub);}

/* ---------------- Result screen ---------------- */
.res-h{font-size:24px;letter-spacing:-0.02em;margin-top:4px;}
.leaks{list-style:none;margin:24px 0 0;padding:0;counter-reset:leak;}
.leaks li{display:grid;grid-template-columns:38px 1fr;gap:16px;padding:22px 0;border-top:1px solid var(--rule);}
.leaks li:last-child{border-bottom:1px solid var(--rule);}
.leaks .ln{font-family:var(--figure);font-size:14px;font-weight:500;color:var(--red);padding-top:3px;}
.leaks h4{font-size:18px;font-weight:500;letter-spacing:-0.01em;margin:0 0 7px;}
.leaks p{margin:0;color:var(--sub);font-size:15.5px;line-height:1.6;max-width:70ch;}
.res-cant{margin-top:40px;}
.res-cta{margin-top:26px;display:flex;gap:22px;align-items:center;flex-wrap:wrap;}
.res-foot{margin-top:44px;padding-top:22px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;}
.res-foot .note{color:var(--sub);font-size:15px;}

/* section bars */
.sbars{margin-top:28px;}
.sbar{display:grid;grid-template-columns:200px 1fr 42px;gap:18px;align-items:center;padding:9px 0;}
.sbar-name{font-size:15px;color:var(--ink);}
.sbar-track{height:6px;background:var(--rule);width:100%;}
.sbar-track i{display:block;height:100%;}
.sbar-val{font-family:var(--figure);font-size:16px;font-weight:500;text-align:right;color:var(--ink);}
.sbars-note{margin-top:14px;font-size:14px;color:var(--sub);}

/* finding first action */
.leaks .fa{margin:10px 0 0;color:var(--ink);font-size:15px;line-height:1.55;max-width:70ch;}
.leaks .fa-lbl{font-weight:700;}

/* ---------------- RAG result system ---------------- */
.scoreline .score-big{color:var(--rag,var(--red));}
.rchip{display:inline-block;margin-left:14px;transform:translateY(-7px);
  font-family:var(--figure);font-size:12px;font-weight:600;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--paper);background:var(--rag,var(--red));padding:5px 11px;}
.meter{margin-top:26px;max-width:560px;}
.meter-bar{position:relative;display:flex;height:10px;width:100%;}
.meter-bar i{display:block;height:100%;}
.meter-bar .seg-r{width:40%;background:var(--red);}
.meter-bar .seg-a{width:20%;background:var(--amber);}
.meter-bar .seg-g{width:40%;background:var(--green);}
.meter-needle{position:absolute;top:-4px;width:3px;height:18px;background:var(--ink);transform:translateX(-1.5px);}
.meter-labels{display:flex;margin-top:8px;font-family:var(--figure);font-size:11px;font-weight:600;letter-spacing:0.02em;}
.meter-labels span{text-align:center;}
.meter-labels .ml-r{width:40%;color:var(--red);}
.meter-labels .ml-a{width:20%;color:var(--amber);}
.meter-labels .ml-g{width:40%;color:var(--green);}

.panel-h{margin-top:40px;font-size:16px;font-weight:600;}
.acards{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.acard{border-top:3px solid var(--rag,var(--ink));padding-top:12px;}
.acard-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.acard-name{font-size:15px;font-weight:500;color:var(--ink);}
.acard-status{font-family:var(--figure);font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--rag,var(--ink));}
.acard-score{margin:8px 0 12px;font-family:var(--figure);font-weight:500;color:var(--rag,var(--ink));font-size:34px;line-height:1;}
.acard-score small{font-size:14px;color:var(--sub);font-weight:400;margin-left:4px;}
.acard-bar{height:5px;background:var(--track);}
.acard-bar i{display:block;height:100%;background:var(--rag,var(--ink));}

.acon{margin-top:20px;}
.acon-item{padding:20px 0;border-top:1px solid var(--rule);}
.acon-item:last-child{border-bottom:1px solid var(--rule);}
.acon-h{display:flex;align-items:center;gap:10px;}
.acon-sw{width:10px;height:10px;background:var(--rag,var(--ink));flex:none;}
.acon-name{font-size:16px;font-weight:500;letter-spacing:-0.01em;}
.acon-score{margin-left:auto;font-family:var(--figure);font-size:13px;font-weight:600;color:var(--rag,var(--ink));}
.acon-mean{margin:12px 0 0;font-size:15.5px;line-height:1.6;color:var(--ink);max-width:72ch;}
.acon-why{margin:9px 0 0;font-size:15px;line-height:1.6;color:var(--sub);max-width:72ch;}

.sc-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--rag,var(--ink));margin-right:7px;vertical-align:middle;}
@media(max-width:640px){.acards{grid-template-columns:1fr;}}

/* ---------------- Scorecard (print only) ---------------- */
#scorecard-print{display:none;}
.sc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-bottom:16px;border-bottom:1px solid var(--rule);margin-bottom:30px;}
.sc-brand .sc-n{display:block;font-weight:700;font-size:15px;color:var(--ink);}
.sc-brand .sc-s{display:block;font-size:12px;color:var(--sub);margin-top:1px;}
.sc-meta{text-align:right;font-size:12px;color:var(--sub);line-height:1.6;}
.sc-eyebrow{font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--sub);margin-bottom:12px;}
.sc-title{font-size:24px;font-weight:500;letter-spacing:-0.02em;margin-bottom:6px;}
.sc-foot-line{margin-top:40px;font-size:14px;color:var(--sub);}
.sc-grp{margin-top:12px;}
.sc-grp-h{display:flex;justify-content:space-between;font-family:var(--figure);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink);font-weight:500;border-bottom:1px solid var(--ink);padding-bottom:5px;}
.sc-tbl{width:100%;border-collapse:collapse;}
.sc-tbl td{border-bottom:1px solid var(--rule);padding:4px 0;vertical-align:top;font-size:10.5px;line-height:1.35;}
.sc-q{color:var(--ink);padding-right:16px;}
.sc-q .sc-a{display:block;color:var(--sub);margin-top:1px;font-size:10px;}
.sc-sc{width:34px;text-align:right;font-family:var(--figure);font-weight:500;color:var(--ink);white-space:nowrap;}
.sc-links{margin-top:14px;font-size:13px;color:var(--sub);word-break:break-all;}
.sc-method{margin-top:34px;padding-top:16px;border-top:1px solid var(--rule);}
.sc-method h3{font-size:16px;font-weight:500;margin-bottom:8px;}
.sc-method p{margin:0;font-size:14px;color:var(--sub);line-height:1.6;max-width:70ch;}

/* ---------------- Responsive ---------------- */
@media (max-width:820px){
  .ff2{grid-template-columns:1fr;}
  .cov-grid{grid-template-columns:1fr 1fr;}
  .cov-col{border-bottom:1px solid var(--rule);padding-bottom:22px;}
  .cov-col:nth-child(odd){padding-right:22px;}
  .cov-col:last-child{border-bottom:0;}
}
@media (max-width:560px){
  :root{--pad:22px;}
  body{font-size:16px;}
  .cov-grid{grid-template-columns:1fr;}
  .cal-name{display:none;}
  .cal-prog .track{max-width:30vw;}
}

/* ---------------- Print: the four-page scorecard ---------------- */
@media print{
  *{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important;}
  @page{margin:16mm 18mm;size:A4;}
  body{font-size:13px;}
  .cal-top,#result-inner{display:none !important;}
  #screen-landing,#screen-details,#screen-quiz,#screen-submitting{display:none !important;}
  #screen-result{display:block !important;min-height:auto;}
  .cal-body{padding:0 !important;}
  #scorecard-print{display:block !important;}
  .sc-page{break-after:page;}
  .sc-page:last-child{break-after:auto;}
  .sc-page .score-big{font-size:64px;}
  .leaks li{break-inside:avoid;}
  .sc-grp-h{break-after:avoid;}
}