/* Cost Cutter demo, Direction A. Page-specific layer on top of kh-a.css (tokens, nav, consoles, offer card, footer).
   Colour meaning: green = bill still being paid, grey = money removed, amber = a failing quality check. Nothing else is amber. */
:root{color-scheme:dark;--cut:#4a5059;--cut2:#2b3037;--cutd:#171a1f}
main{display:block}
.kick{display:block;margin-bottom:18px}
.sec-h{display:block}

/* hero */
.hero{padding:72px 0 104px}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:center}
.hero h1{font-size:clamp(44px,5.4vw,78px)}
.hero h1 .was{color:var(--mute)}
.hero h1 .arr{color:var(--dim);font-weight:400;margin:0 .14em}
.hero h1 .per{display:block;margin-top:.12em;font-weight:500;color:var(--soft);font-size:.62em;letter-spacing:-.03em}
.hero .lead{max-width:50ch}
.qline{margin-top:22px;font-size:15.5px;color:var(--ink);max-width:56ch}
.qline b{font-weight:500}
.cpr{margin-top:8px;font:400 var(--xs)/1.5 var(--mono);color:var(--mute)}
.cpr b{color:var(--ink);font-weight:500}
.fine{margin-top:18px;font-size:14px;color:var(--mute);max-width:60ch}
.fine a{color:var(--soft);text-decoration:underline;text-underline-offset:3px}
.fine a:hover{color:var(--ink)}

/* receipt console */
.rcpt .pane{padding:18px 22px 22px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.tabs button{height:30px;padding:0 12px;font:500 var(--xs)/1 var(--mono);color:var(--soft);box-shadow:inset 0 0 0 1px var(--line2);transition:background .2s,color .2s}
.tabs button:hover{color:var(--ink);background:rgb(255 255 255 / .05)}
.tabs button[aria-pressed="true"]{background:var(--ink);color:#0a0b0d;box-shadow:none}
.rrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;padding:14px 0 13px;border-top:1px solid var(--line)}
.rrow:first-of-type{margin-top:10px}
.rrow .what{font-size:15.5px;font-weight:500}
.rrow .what small{display:block;margin-top:1px;font-weight:400;font-size:13px;color:var(--mute)}
.amt{align-self:start;display:flex;align-items:baseline;justify-content:flex-end;gap:8px;font:400 14px/1.3 var(--mono);white-space:nowrap}
.amt .was{color:var(--mute)}
.amt svg{width:11px;height:11px;color:var(--dim);align-self:center}
.amt b{font-weight:500;color:var(--ink)}
.rb{grid-column:1 / -1;height:6px;margin-top:9px;background:var(--cut);overflow:hidden}
.rb i{display:block;height:100%;background:var(--ok);transform-origin:0 50%;transform:scaleX(max(var(--k,1),.006));transition:transform 1.25s cubic-bezier(.2,.75,.25,1) var(--d,0s)}
.rtot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;padding:16px 0 0;border-top:1px solid var(--line2);align-items:baseline}
.rtot .what{font:500 var(--sm)/1.2 var(--mono);color:var(--mute)}
.rtot .amt{font-size:clamp(20px,2vw,26px);letter-spacing:-.02em}
.rtot .amt b{font-weight:500}
.rleg{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font:400 12.5px/1.3 var(--mono);color:var(--mute)}
.rleg span{display:inline-flex;align-items:center;gap:7px}
.rleg i{display:inline-block;width:14px;height:6px}
.rnote{margin-top:12px;font-size:13px;color:var(--dim);line-height:1.5}
.flash .amt,.flash .tot{animation:flash .7s cubic-bezier(.2,.75,.25,1) both}
@keyframes flash{from{opacity:.2;transform:translateY(5px)}to{opacity:1;transform:none}}

/* leak map */
.leakmap{margin-top:52px;border-top:1px solid var(--line2)}
.lrow{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr) 150px;gap:28px;align-items:center;width:100%;padding:18px 12px;text-align:left;border-bottom:1px solid var(--line);transition:background .2s}
button.lrow:hover{background:var(--s1)}
.lrow[aria-expanded="true"]{background:var(--s2)}
.ln{font-weight:500;font-size:16.5px;line-height:1.3}
.ln small{display:block;margin-top:3px;font-weight:400;font-size:14px;color:var(--mute);line-height:1.4}
.track{position:relative;height:14px;box-shadow:inset 0 0 0 1px var(--line)}
.track span{position:absolute;top:0;bottom:0;transform-origin:0 50%;transform:scaleX(0);transition:transform .85s cubic-bezier(.2,.75,.25,1);transition-delay:calc(var(--i,0) * 110ms)}
.leakmap.on .track span{transform:scaleX(1)}
.track .left{background:var(--ok)}
.track .cut{background:#8a919b}
.track .rest{background:var(--cut2)}
.ls{text-align:right;font:500 15.5px/1.2 var(--mono)}
.ls small{display:block;margin-top:4px;font:400 13px/1.3 var(--sans);color:var(--mute)}
.lrow.total .ls b{color:var(--ink)}
.lrow.total{background:transparent;padding-top:22px;padding-bottom:22px}
.legend{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:18px;font:400 var(--xs)/1.3 var(--mono);color:var(--mute)}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend i{display:inline-block;width:18px;height:8px}
.detail{margin-top:28px}
.detail:empty{display:none}
.dpanel{padding:24px 26px 26px}
.dtitle{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px}
.dtitle h3{font-size:22px}
.rq{font:400 var(--xs)/1.3 var(--mono);color:var(--mute)}
.ddesc{margin-top:10px;color:var(--soft);font-size:15.5px;max-width:78ch}
.dcmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}
.side-card{padding:16px 16px 18px;background:var(--s2);box-shadow:inset 0 0 0 1px var(--line);min-width:0}
.side-card h4{font:500 var(--sm)/1 var(--mono);color:var(--ink)}
.side-card .how{margin-top:8px;font-size:14px;color:var(--mute)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px;font:500 15px/1.2 var(--mono)}
.stats span{display:block;margin-top:4px;font:400 12px/1.3 var(--sans);color:var(--mute)}
.ans-l{margin-top:16px;font:500 var(--xs)/1 var(--mono);color:var(--mute)}
.snip,.ans{margin-top:8px;max-height:200px;overflow:auto;padding:12px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);font:400 12.5px/1.55 var(--mono);color:var(--soft);white-space:pre-wrap;overflow-wrap:anywhere}
.ans{font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--ink)}
.fam-split{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:14px;color:var(--soft)}
.fam-split b{font-weight:500;color:var(--ink)}
.fam-split.sm{border:0;padding-top:0;margin-top:6px;font-size:13px;color:var(--dim)}

/* quality */
.qgrid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:48px;margin-top:52px;align-items:start}
.qbars{border-top:1px solid var(--line2)}
.qrow{padding:16px 0;border-bottom:1px solid var(--line)}
.qn{font-weight:500;font-size:16px}
.qn small{display:block;font-weight:400;font-size:13.5px;color:var(--mute)}
.qpair{display:grid;gap:7px;margin-top:10px}
.qbar{display:grid;grid-template-columns:minmax(0,1fr) 108px;gap:14px;align-items:center}
.qbar .t{display:flex;height:9px;background:var(--cutd);transform-origin:0 50%;transform:scaleX(0);transition:transform .95s cubic-bezier(.2,.75,.25,1);transition-delay:calc(var(--i,0) * 110ms)}
.qbars.on .t{transform:scaleX(1)}
.qbar .t i{display:block;height:100%}
.qbar .t .p{background:var(--ink)}
.qbar.b .t .p{background:#7d848e}
.qbar .t .m{background:var(--acc)}
.qbar .v{font:500 13.5px/1 var(--mono);color:var(--ink);white-space:nowrap}
.qbar .v em{font-style:normal;font-weight:400;color:var(--mute);margin-right:8px;display:inline-block;min-width:44px}
.qleg{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px 22px;font:400 var(--xs)/1.3 var(--mono);color:var(--mute)}
.qleg span{display:inline-flex;align-items:center;gap:8px}
.qleg i{display:inline-block;width:18px;height:8px}
.qside h3{font:500 var(--sm)/1 var(--mono);color:var(--mute);margin-bottom:14px}
.qside p{color:var(--soft);font-size:15.5px;margin-top:12px;max-width:60ch}
.qside b{color:var(--ink);font-weight:500}
.rule{margin-top:12px;padding:12px 14px;background:var(--s1);box-shadow:inset 0 0 0 1px var(--line);font:400 12.5px/1.6 var(--mono);color:var(--soft)}
.fails{margin-top:56px}
.fails h3{font-size:22px}
.fails > p{margin-top:8px;color:var(--soft);font-size:15.5px;max-width:80ch}
.fails .frows{margin-top:22px;border-top:1px solid var(--line2)}
.frow{border-bottom:1px solid var(--line)}
.frow summary{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:6px 18px;align-items:center;padding:15px 8px;cursor:pointer;list-style:none;transition:background .2s}
.frow summary::-webkit-details-marker{display:none}
.frow summary:hover,.frow[open] summary{background:var(--s1)}
.frow .tk{font:500 var(--xs)/1.3 var(--mono);color:var(--soft)}
.frow .q{font-size:14.5px;color:var(--soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pills{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.pill{display:inline-flex;align-items:center;height:22px;padding:0 8px;font:500 11.5px/1 var(--mono);white-space:nowrap}
.pill.ok{color:var(--soft);box-shadow:inset 0 0 0 1px var(--line2)}
.pill.no{color:var(--acc-ink);background:var(--acc)}
.fbody{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:6px 8px 22px}
.fbody h5{font:500 var(--xs)/1 var(--mono);color:var(--mute);margin:0 0 8px}
.fbody p{font-size:14px;color:var(--soft);white-space:pre-wrap;overflow-wrap:anywhere}
.fbody .note{grid-column:1 / -1;font-size:13.5px;color:var(--mute);padding-top:12px;border-top:1px solid var(--line)}

/* estimator */
.est{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:24px;margin-top:52px;align-items:start}
.est .pane{padding:22px}
.est-form{display:grid;gap:16px}
.f{display:grid;gap:7px;font-size:14px;color:var(--soft)}
.f b{font-family:var(--mono);font-weight:500;color:var(--ink);margin-left:6px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
input[type=text],input[inputmode],select{width:100%;height:44px;padding:0 12px;background:var(--bg);color:var(--ink);border:0;border-radius:0;box-shadow:inset 0 0 0 1px var(--line2);font:400 15px/1 var(--mono);transition:box-shadow .2s}
select{font-family:var(--sans);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%239aa0a9' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
input:hover,select:hover{box-shadow:inset 0 0 0 1px rgb(255 255 255 / .28)}
input:focus-visible,select:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
input[type=range]{width:100%;accent-color:#eceef1;height:24px;background:none;box-shadow:none;padding:0}
.rng span{display:flex;justify-content:space-between;gap:12px}
.drop{display:grid;gap:8px;padding:16px;border:1px dashed var(--line2);cursor:pointer;transition:background .2s,border-color .2s}
.drop:hover,.drop.over{background:var(--s2);border-color:rgb(255 255 255 / .34)}
.drop strong{font-weight:500;font-size:15px;color:var(--ink)}
.drop > span{font-size:13.5px;color:var(--mute)}
.drop .btn{justify-self:start;height:36px;font-size:14px;margin-top:4px}
.csvmsg{font-size:13.5px;color:var(--soft);min-height:0}
.csvmsg:empty{display:none}
.csvmsg.err{color:var(--acc)}
.est-out .big{font-size:clamp(26px,3vw,38px);font-weight:500;letter-spacing:-.03em;line-height:1.1}
.est-out .big b{font-weight:600}
.est-out .sub{margin-top:8px;color:var(--soft);font-size:15px}
.est-lev{margin-top:20px;border-top:1px solid var(--line2)}
.erow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 14px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.erow.off{color:var(--dim)}
.erow .ev{font:400 13.5px var(--mono);text-align:right;color:var(--soft)}
.erow .ev b{font-weight:500;color:var(--ink)}
.erow .eb{grid-column:1 / -1;height:4px;background:var(--cutd);overflow:hidden}
.erow .eb i{display:block;height:100%;background:#8a919b;transform-origin:0 50%;transition:width .5s cubic-bezier(.2,.75,.25,1)}
.est-foot{margin-top:16px;font-size:13.5px;color:var(--mute)}
.est-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.est-cta .btn{height:40px;font-size:14px}
.bc{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:15.5px;color:var(--soft)}

/* measured / pricing */
.meas{margin-top:48px}
.bc-lead{margin-top:34px;font-size:17px;color:var(--soft)}
.bc-lead .link{font-size:17px}
.offer{margin-top:40px}
.offer__card .offer__p small{display:inline-block}
.side li em{max-width:46ch}
.side .acts .btn{white-space:normal;text-align:center}

/* reveal safety: nothing stays hidden if the observer never fires (print, screenshots) */
@media print{.rv{opacity:1;transform:none}.track span,.qbar .t{transform:none}}

@media (max-width:1080px){
  .hero{padding:48px 0 80px}
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:44px}
  .qgrid,.est{grid-template-columns:minmax(0,1fr)}
  .qgrid{gap:36px}
  .lrow{grid-template-columns:minmax(0,1fr) 150px;gap:12px 20px}
  .lrow .track{grid-column:1 / -1;grid-row:2}
  .fbody{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .hero{padding:36px 0 72px}
  .rcpt .pane{padding:14px 14px 18px}
  .lrow{padding:16px 6px;grid-template-columns:minmax(0,1fr) auto}
  .ls{white-space:nowrap}
  .dpanel{padding:18px 14px 20px}
  .dcmp{grid-template-columns:minmax(0,1fr)}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr));font-size:14px}
  .frow summary{grid-template-columns:minmax(0,1fr);gap:8px;padding:14px 4px}
  .frow .q{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .pills{justify-content:flex-start}
  .qbar{grid-template-columns:minmax(0,1fr) 96px;gap:10px}
  .qbar .v em{min-width:40px;margin-right:6px}
  .est .pane{padding:16px 14px}
  .f2{grid-template-columns:1fr 1fr}
  .amt{font-size:13px}
  .side li span{white-space:normal}
}