/* agenciy-language skin for the free tools (readiness / checklist / calculator).
   Maps the tools' existing class names onto the dark system — markup & JS untouched.
   Semantic good/warn/bad tints are the one sanctioned hue exception (muted, dark). */
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);line-height:1.55;font-size:15px;overflow-x:hidden}
@media(min-width:600px){}
@media(min-width:900px){}
.wrap{max-width:calc(860px + var(--gutter)*2);margin:0 auto;padding:48px var(--gutter) 90px;opacity:0;transform:translateY(40px);
  animation:rise .9s cubic-bezier(.22,1,.36,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}

.back{display:inline-block;margin:0 0 26px;font-family:var(--ui);font-size:14px;color:#ddd;
  text-decoration:none;padding:9px 16px;border-radius:999px;background:#161616;border:1px solid var(--line2)}
.back:hover{background:#222}
.kicker{font-family:var(--ui);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);font-weight:600}
h1{font-size:clamp(34px,4.5vw,52px);font-weight:500;letter-spacing:-1px;line-height:1.08;margin:10px 0 12px}
h1 .serif{font-family:var(--serif);font-style:italic;font-weight:500}
.sub{color:#b5b5b5;font-weight:300;margin-bottom:28px;max-width:680px}
h2{font-size:19px;font-weight:600;margin-bottom:14px}

.panel,.item{background:var(--panel);border:1px solid var(--line2);border-radius:18px;padding:26px;margin:16px 0}
.progress,.qnum{font-family:var(--ui);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:600;margin-bottom:10px}
.qtext{font-size:18px;font-weight:600;margin-bottom:4px}
.qwhy{font-size:13.5px;color:#b5b5b5;font-weight:300;margin-bottom:14px}

/* answer buttons */
.opt,.ans{display:block;width:100%;text-align:left;background:#101010;border:1px solid var(--line2);
  border-radius:12px;padding:13px 16px;margin:8px 0;font:inherit;font-size:14.5px;color:#e5e5e5;cursor:pointer;
  transition:border-color .3s,background .3s}
.opt:hover,.ans:hover{border-color:rgba(255,255,255,.35)}
.opt.picked{border-color:#f2f2f2;background:#181818}
.opt[disabled],.ans[disabled]{cursor:default;opacity:.55}
.opt.picked[disabled]{opacity:1}
.btns{display:flex;gap:10px}
.ans{flex:1;text-align:center;font-weight:600}
.ans.picked-yes{background:var(--good-bg);border-color:var(--good);color:var(--good);opacity:1}
.ans.picked-no{background:var(--bad-bg);border-color:var(--bad);color:var(--bad);opacity:1}

/* feedback tints */
.feedback,.detail{border-radius:12px;padding:13px 16px;margin-top:12px;font-size:14px;display:none;font-weight:300}
.feedback.good,.detail.good{display:block;background:var(--good-bg);color:var(--good)}
.feedback.warn{display:block;background:var(--warn-bg);color:var(--warn)}
.feedback.bad,.detail.bad{display:block;background:var(--bad-bg);color:var(--bad)}
.detail b{display:block;margin-bottom:3px;font-weight:600}

/* buttons */
.btn{background:var(--goldgrad);color:#111;border:0;border-radius:999px;
  padding:13px 26px;font:inherit;font-weight:600;cursor:pointer;margin-top:14px}
.btn:hover{filter:brightness(.92)}
.btn[disabled]{background:#1a1a1a;color:var(--dim);cursor:default}
.btn.ghost{background:#161616;color:#ddd;border:1px solid var(--line2)}
.btn.ghost:hover{background:#222;filter:none}
.restart{background:none;border:0;color:var(--dim);font:inherit;font-size:13px;cursor:pointer;
  text-decoration:underline;margin-top:16px;display:block}

/* score / bands */
.score-big{font-size:52px;font-weight:600;letter-spacing:-2px;line-height:1}
.band{display:inline-block;font-family:var(--ui);font-size:11.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:6px 14px;border-radius:999px;margin:12px 0;border:1px solid}
.band.ready{background:var(--good-bg);color:var(--good);border-color:var(--good)}
.band.near{background:var(--warn-bg);color:var(--warn);border-color:var(--warn)}
.band.notyet{background:var(--bad-bg);color:var(--bad);border-color:var(--bad)}
.urgent{background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad);border-radius:12px;
  padding:13px 16px;margin:12px 0;font-size:14px}
.actions li{margin:8px 0 8px 18px;font-size:14.5px;color:#d5d5d5;font-weight:300}

/* recommendation + summary cards */
.reco,.summary{background:#111;border:1px solid var(--line);border-radius:18px;padding:24px;margin-top:20px}
.summary{display:none;margin:16px 0}
.summary.open{display:block}
.summary h2{font-size:20px;margin-bottom:4px}
.summary p{margin:10px 0;color:#b5b5b5;font-size:14.5px;font-weight:300}
.summary ul{margin:8px 0 4px 18px}
.summary li{margin:7px 0;font-size:14px;color:#d5d5d5}
.count{font-size:44px;font-weight:600;letter-spacing:-1px}
.count small{font-size:16px;color:var(--dim);font-weight:400}
.reco .k{font-family:var(--ui);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:600}
.reco h3,.reco h4{font-size:17px;font-weight:600;margin:6px 0 4px}
.reco p{font-size:13.5px;color:#b5b5b5;font-weight:300;margin:4px 0 0}
.cta,.reco .cta{display:inline-block;background:var(--goldgrad);color:#111;
  font-weight:600;text-decoration:none;border-radius:999px;padding:11px 20px;margin-top:14px;font-size:14px}
.cta:hover{filter:brightness(.92)}
.reco .alt,.alt{font-size:12.5px;color:var(--dim);margin-top:12px;border-top:1px solid var(--line2);padding-top:12px}

/* calculator */
.row{display:flex;gap:10px;align-items:center;margin:8px 0;flex-wrap:wrap}
select,input[type=number]{font:inherit;font-size:14px;padding:11px 12px;border:1px solid var(--line2);
  border-radius:10px;background:#141414;color:var(--fg)}
select{flex:1;min-width:220px;
  appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:42px}
select:focus,input:focus{outline:none;border-color:rgba(255,255,255,.35)}
input[type=number]{width:80px;text-align:center}
.del{background:none;border:0;color:var(--bad);font-size:18px;cursor:pointer;padding:4px 8px}
.toolbar{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;align-items:center}
.toolbar .btn{margin-top:0}
.cur{margin-left:auto;font-family:var(--ui);font-size:13px;color:var(--dim)}
.cur button{background:none;border:1px solid var(--line2);border-radius:999px;padding:5px 12px;
  font:inherit;font-size:12.5px;cursor:pointer;color:#ddd;margin-left:4px}
.cur button.on{background:#f2f2f2;color:#111;border-color:#f2f2f2}
table{width:100%;border-collapse:collapse;margin-top:6px;font-size:14px}
th{font-family:var(--ui);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
  text-align:right;padding:8px 10px;border-bottom:1px solid var(--line)}
th:first-child{text-align:left}
td{padding:10px;border-bottom:1px solid var(--line2);text-align:right;white-space:nowrap;color:#d5d5d5}
td:first-child{text-align:left;white-space:normal;color:var(--fg)}
td .n{font-size:12px;color:var(--dim);display:block;font-weight:300}
tr.total td{font-weight:600;color:var(--fg);border-bottom:0;border-top:1px solid var(--line);font-size:15px}
.tablewrap{overflow-x:auto}
.note{font-size:12.5px;color:var(--dim);margin-top:12px;font-weight:300}
.about{font-size:14px;color:#d5d5d5;max-width:720px;font-weight:300}
.about p{margin:8px 0}
.about b{color:var(--fg);font-weight:600}

.disclaimer{font-size:12px;color:var(--dim);margin-top:30px;border-top:1px solid var(--line2);padding-top:16px;max-width:720px;font-weight:300}
.hide{display:none}

/* inline enquiry form on result cards */
.enq{margin-top:18px;border-top:1px solid var(--line2);padding-top:18px}
.enq .k{font-family:var(--ui);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:600;margin-bottom:12px}
.enq-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:10px 0 0}
.enq input,.enq textarea{flex:1;min-width:200px;width:100%;background:#141414;border:1px solid var(--line2);
  border-radius:10px;color:var(--fg);font-family:var(--sans);font-size:14px;padding:11px 12px;resize:vertical}
.enq textarea{margin-top:10px;font-weight:300;color:#d5d5d5}
.enq input:focus,.enq textarea:focus{outline:none;border-color:rgba(255,255,255,.35)}
.enq-note{font-size:12px;color:var(--dim);font-weight:300;flex:1;min-width:200px}

/* renewal calculator timeline */
.tl-badge{display:inline-block;font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid}
.tl-badge.due{background:var(--bad-bg);color:var(--bad);border-color:var(--bad)}
.tl-badge.soon{background:var(--warn-bg);color:var(--warn);border-color:var(--warn)}
.tl-badge.later{background:#141414;color:#b5b5b5;border-color:var(--line2)}

/* class finder */
.cls-chip{display:inline-block;font-family:var(--ui);font-size:13px;padding:8px 14px;border-radius:999px;
  background:#161616;border:1px solid var(--line);margin:4px 6px 4px 0}
.cls-chip b{color:var(--fg)}
.cls-hit{border:1px solid var(--line);border-radius:14px;background:#111;padding:20px 22px;margin:12px 0}
.cls-hit .num{font-size:22px;font-weight:600;letter-spacing:-1px}
.cls-hit .kind{font-family:var(--ui);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-left:10px}
.cls-hit p{color:#b5b5b5;font-weight:300;font-size:14px;margin-top:8px}
.cls-hit .why{font-size:12.5px;color:var(--dim);margin-top:8px;font-weight:300}
details.allcls{margin-top:22px}
details.allcls summary{cursor:pointer;font-family:var(--ui);font-size:14px;color:#ddd}
details.allcls .grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;margin-top:14px}
@media(max-width:700px){details.allcls .grid{grid-template-columns:1fr}}
details.allcls .grid div{font-size:13px;color:#b5b5b5;font-weight:300;padding:4px 0;border-bottom:1px solid var(--line2)}
details.allcls .grid b{color:var(--fg);font-weight:600}

/* ============================================================
   RESPONSIVE — down to 360px.
   .row / .toolbar / .enq-row already wrap and the results table
   already scrolls inside .tablewrap; this shrinks the boxes.
   ============================================================ */
@media(max-width:600px){
  .wrap{padding:28px var(--gutter) 64px}
  .back{padding:11px 16px;margin-bottom:20px}   /* 40px touch target */
  h1{font-size:clamp(26px,7vw,34px);letter-spacing:-.6px}
  .sub{font-size:14.5px;margin-bottom:22px}
  .panel,.item{padding:20px 18px;border-radius:16px;margin:14px 0}
  .qtext{font-size:16.5px}
  .opt,.ans{padding:14px 15px;font-size:14px}
  .btn{padding:14px 22px}
  .reco,.summary{padding:20px 18px;border-radius:16px}
  .score-big{font-size:44px}
  .count{font-size:38px}
  .cta,.reco .cta{padding:13px 20px}            /* 40px touch target */
  .cls-hit{padding:18px}
  .about,.disclaimer{max-width:none}

  /* calculator: the select takes its own line, qty + delete share the next */
  .row{gap:8px}
  select{min-width:100%}
  .toolbar{gap:8px}
  .cur{margin-left:0;width:100%}
  table{font-size:13.5px}
  th,td{padding:8px}
}

/* accessibility: visible keyboard focus + reduced motion */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid #cfcfcf;outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion: reduce){
  .rise,.rv{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}
  .track,.chev,.scroll-btn svg,.scrollcue .p{animation:none!important}
  html{scroll-behavior:auto}
}

/* Save-as-PDF: print only the results, keep their section structure */
@media print{
  body{background:#fff;color:#111;font-size:12pt}
  .back,.btn,.restart,.enq,.nl-sub,#nova,nav,.toolbar,.afilter,.cur,.mm-x{display:none!important}
  .wrap{animation:none;opacity:1;transform:none;max-width:100%;padding:0}
  .panel,.item,.summary,.reco,.cls-hit{background:#fff!important;border:1px solid #bbb!important;color:#111!important;break-inside:avoid}
  .summary{display:block!important}
  h1,h2,h3,.qtext,.count,.score-big,.wnum{color:#111!important}
  .sub,.qwhy,p,li,td,.detail,.feedback,.reco p,.summary p,.summary li{color:#333!important}
  .band,.tl-badge,.chip2,.price-chip{border:1px solid #666!important;color:#111!important;background:#fff!important}
  .detail.good,.feedback.good{background:#eef7ef!important}.detail.bad,.feedback.bad{background:#fbeeec!important}.feedback.warn{background:#fdf6e7!important}
  th{color:#111!important;border-bottom:1px solid #333!important}td{border-bottom:1px solid #ccc!important}
  .cta{display:none!important}
  .disclaimer{color:#555!important;border-top:1px solid #999!important}
  .pdf-head{display:block!important;border-bottom:2px solid #111;margin-bottom:14pt;padding-bottom:8pt;font-weight:700}
}
.pdf-head{display:none}
.pdfbtn{background:#161616;color:#ddd;border:1px solid rgba(255,255,255,.14);border-radius:999px;
  padding:11px 20px;font:inherit;font-family:'Urbanist',sans-serif;font-size:13.5px;cursor:pointer;margin-top:14px}
.pdfbtn:hover{background:#222}

/* gold-count */
.count{background:var(--goldtext);-webkit-background-clip:text;background-clip:text;color:transparent}
.count small{-webkit-text-fill-color:initial;background:none;color:rgba(255,255,255,.45)}
.kicker{color:var(--goldink)}
h1 .serif{background:var(--goldtext);-webkit-background-clip:text;background-clip:text;color:transparent}