/* ============================================================
   costandprofitability.com - Benchmark self-scorer (cv3)
   Turns the static "your number vs our range" table on
   /profitability-benchmark-framework/ into an interactive lead magnet.
   Enter 5 numbers -> position vs our observed ranges + widest gap + CTA.
   Instrument-styled. Scoped .cc-benchscore. Vanilla, no deps, no PII,
   nothing leaves the page. Accessible, keyboard, reduced-motion, light/dark.
   ============================================================ */
.cc-benchscore{
  --o:#C75B22; --o-br:#E2761A; --grn:#1C7A57; --amber:#C8821E; --red:#B23A2E;
  --ink:#1A1714; --ink2:#4A453E; --muted:#756859; --muted2:#9A8E7E;
  --paper:#F3EEE4; --paper2:#EDE6D8; --surface:#FBF9F3; --surface2:#FAF7F0;
  --line:#DCD3C2; --line2:#C9BEAA;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --serif:'Newsreader',Georgia,serif;
  --sans:'Hanken Grotesk',system-ui,sans-serif;
  font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);margin:32px 0;
}
.cc-benchscore *{box-sizing:border-box;}
.cc-benchscore .bs-head{padding:24px 28px 4px;}
.cc-benchscore .bs-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--o);display:flex;align-items:center;gap:10px;margin-bottom:11px;}
.cc-benchscore .bs-eyebrow::before{content:"";width:18px;height:1px;background:var(--o);}
.cc-benchscore .bs-title{font-family:var(--serif);font-weight:500;font-size:clamp(21px,2.5vw,26px);letter-spacing:-.01em;line-height:1.16;margin:0;color:var(--ink);}
.cc-benchscore .bs-sub{font-size:14.5px;line-height:1.55;color:var(--ink2);margin:10px 0 0;max-width:64ch;}

/* rows */
.cc-benchscore .bs-body{padding:14px 28px 6px;}
.cc-benchscore .bs-row{display:grid;grid-template-columns:1fr 148px 128px;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--line);}
.cc-benchscore .bs-row:first-child{border-top:none;}
.cc-benchscore .bs-lab{min-width:0;}
.cc-benchscore .bs-name{font-family:var(--serif);font-size:16.5px;line-height:1.25;color:var(--ink);margin:0;}
.cc-benchscore .bs-hint{font-size:12.5px;line-height:1.4;color:var(--muted);margin:3px 0 0;}
.cc-benchscore .bs-rangehint{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--muted2);margin:5px 0 0;}
.cc-benchscore .bs-field{display:flex;align-items:center;gap:8px;background:var(--surface2);border:1px solid var(--line2);border-radius:9px;padding:0 12px;transition:border-color .14s;}
.cc-benchscore .bs-field:focus-within{border-color:var(--o);}
.cc-benchscore .bs-field input{width:100%;border:none;background:transparent;font-family:var(--mono);font-size:16px;color:var(--ink);padding:11px 0;outline:none;-moz-appearance:textfield;}
.cc-benchscore .bs-field input::-webkit-outer-spin-button,
.cc-benchscore .bs-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.cc-benchscore .bs-unit{font-family:var(--mono);font-size:13px;color:var(--muted);flex:none;}
.cc-benchscore .bs-state{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;font-weight:600;text-align:right;line-height:1.35;}
.cc-benchscore .bs-state .chip{display:inline-flex;align-items:center;gap:6px;}
.cc-benchscore .bs-state .chip::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none;}
.cc-benchscore .bs-state.is-empty{color:var(--muted2);font-weight:500;}
.cc-benchscore .bs-state.is-clear{color:var(--grn);}
.cc-benchscore .bs-state.is-inside{color:var(--amber);}
.cc-benchscore .bs-state.is-beyond{color:var(--red);}
.cc-benchscore .bs-row.is-first .bs-name::after{content:"START HERE";font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;font-weight:600;color:#fff;background:var(--o);border-radius:4px;padding:2px 6px;margin-left:9px;vertical-align:middle;white-space:nowrap;}

/* result */
.cc-benchscore .bs-foot{padding:6px 28px 26px;}
.cc-benchscore .bs-verdict{background:var(--paper2);border-radius:11px;padding:18px 20px;margin:12px 0 18px;display:none;}
.cc-benchscore .bs-verdict.on{display:block;animation:bsIn .35s ease;}
.cc-benchscore .bs-verdict p{margin:0;font-size:15px;line-height:1.6;color:var(--ink2);}
.cc-benchscore .bs-verdict b{color:var(--ink);}
.cc-benchscore .bs-verdict em{font-style:italic;color:var(--o);font-weight:500;}
@keyframes bsIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.cc-benchscore .bs-cta{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:600;font-size:14.5px;background:var(--o);color:#fff;border-radius:8px;padding:13px 22px;text-decoration:none;transition:background .15s,gap .15s;}
.cc-benchscore .bs-cta:hover{background:var(--o-br);gap:12px;}
.cc-benchscore .bs-cta:focus-visible{outline:2px solid var(--o);outline-offset:3px;}
.cc-benchscore .bs-cta svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;}
.cc-benchscore .bs-reset{margin-left:14px;font-family:var(--sans);font-weight:600;font-size:13px;color:var(--muted);background:transparent;border:none;cursor:pointer;}
.cc-benchscore .bs-reset:hover{color:var(--o);}
.cc-benchscore .bs-reset:focus-visible{outline:2px solid var(--o);outline-offset:2px;border-radius:4px;}
.cc-benchscore .bs-note{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted2);margin-top:16px;}

@media(max-width:620px){
  .cc-benchscore .bs-head,.cc-benchscore .bs-body,.cc-benchscore .bs-foot{padding-left:18px;padding-right:18px;}
  .cc-benchscore .bs-row{grid-template-columns:1fr;gap:10px;}
  .cc-benchscore .bs-state{text-align:left;}
  .cc-benchscore .bs-reset{display:block;margin:12px 0 0;}
}

/* respect reduced motion */
@media(prefers-reduced-motion:reduce){
  .cc-benchscore .bs-verdict.on{animation:none;}
  .cc-benchscore .bs-field,.cc-benchscore .bs-cta{transition:none;}
}

/* legible if the OS/page is in dark mode */
@media(prefers-color-scheme:dark){
  .cc-benchscore{
    --ink:#F2ECE0; --ink2:#D3C9B8; --muted:#A69884; --muted2:#8B7F6E;
    --paper:#221D17; --paper2:#2C2620; --surface:#1C1813; --surface2:#241F19;
    --line:#3A3229; --line2:#4A4033;
    background:var(--surface);border-color:var(--line);
  }
  .cc-benchscore .bs-row.is-first .bs-name::after,
  .cc-benchscore .bs-cta{color:#fff;}
}
:root[data-theme="dark"] .cc-benchscore{
  --ink:#F2ECE0; --ink2:#D3C9B8; --muted:#A69884; --muted2:#8B7F6E;
  --paper:#221D17; --paper2:#2C2620; --surface:#1C1813; --surface2:#241F19;
  --line:#3A3229; --line2:#4A4033;
  background:var(--surface);border-color:var(--line);
}
:root[data-theme="light"] .cc-benchscore{
  --ink:#1A1714; --ink2:#4A453E; --muted:#756859; --muted2:#9A8E7E;
  --paper:#F3EEE4; --paper2:#EDE6D8; --surface:#FBF9F3; --surface2:#FAF7F0;
  --line:#DCD3C2; --line2:#C9BEAA;
}