/* KeyPlus brand guide v0.2: original assets, type scale, 8px spacing and interface recipe. */
:root{--navy:#00305E;--sky:#4EB7E3;--yellow:#FFCC00;--canvas:#F3F6F9;--muted:#526579;--line:#DCE4EB;--attention:#805500;--success:#177245;--font-brand:Capitana,Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;background:white;color:var(--navy);font:400 16px/1.6 var(--font-brand)}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,summary{cursor:pointer}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #007BBA;outline-offset:4px}header a:focus-visible,footer a:focus-visible,.hero a:focus-visible{outline-color:var(--yellow)}
.skip-link{position:fixed;top:-100px;left:16px;z-index:10;background:white;color:var(--navy);padding:16px}.skip-link:focus{top:16px}
header{background:var(--navy);color:white;padding:24px max(32px,calc((100vw - 1176px)/2));display:flex;justify-content:space-between;align-items:center;gap:32px}.brand{display:block;flex:0 0 auto;line-height:0}.brand img{display:block;width:200px;height:auto}nav{display:flex;flex-wrap:wrap;gap:24px;font-size:14px}nav a{padding:8px 0;border-bottom:2px solid transparent}nav a:hover{border-color:var(--sky)}.internal{font-size:12px;letter-spacing:1px;border:1px solid #7C9CB9;border-radius:4px;padding:8px 12px;white-space:nowrap}
main{max-width:1260px;margin:auto;padding:0 42px}section{padding:64px 0;border-bottom:1px solid var(--line)}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;background:var(--navy);color:white;padding:48px;margin-top:32px;border:0}.hero>*,.split>*,.simulator>*,.questions>*{min-width:0}
.eyebrow,.tag{font-size:12px;letter-spacing:1.5px;font-weight:700}.hero .eyebrow{color:var(--sky)}h1,h2,h3{font-weight:600;line-height:1.2}h1{font-size:64px;letter-spacing:-2px;margin:24px 0}h1 em{font-style:normal;color:var(--yellow)}h2{font-size:36px;letter-spacing:-1px;margin:16px 0 24px}h3{font-size:20px;margin:16px 0}p{color:var(--muted);margin:0 0 16px}.hero>div>p{color:white;max-width:56ch}.intro{font-size:18px;line-height:1.5}
.button,button{display:inline-block;min-height:44px;padding:12px 16px;border:1px solid var(--navy);border-radius:4px;background:var(--navy);color:white;font-size:14px;font-weight:600;line-height:1.5}button:hover{background:#174F80}.button{margin-top:8px;background:var(--yellow);color:var(--navy);border-color:var(--yellow)}.button:hover{background:white;border-color:white}
.hero-card{background:white;color:var(--navy);padding:32px;border-radius:4px}.hero-card .eyebrow{color:var(--muted)}.big{font-size:40px;line-height:1.2;font-weight:700;margin:24px 0 16px;letter-spacing:-1px}.mini{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:16px 0;border-top:1px solid var(--line);font-size:14px}.mini>div{min-width:0}.mini>strong{flex-shrink:0;font-size:16px}.amber{color:var(--attention)}.fine{font-size:13px;line-height:1.6}
.notice{padding:24px;margin-top:24px;background:var(--canvas);border-left:3px solid var(--sky);font-size:14px;color:var(--navy)}.section-head{max-width:720px;margin-bottom:32px}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.cards article{background:white;border:1px solid var(--line);border-top:3px solid var(--navy);border-radius:4px;padding:24px}.cards strong{display:block;font-size:32px;font-weight:700;line-height:1.3;margin-bottom:16px}.tag{font-size:12px;color:var(--muted);letter-spacing:.8px}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:24px}.panel{padding:32px;border:1px solid var(--line);border-radius:4px;background:white}.panel>h3:first-child{margin-top:0}.panel p:last-child{margin-bottom:0}.pale{background:var(--canvas)}.dark{background:var(--navy);color:white;border-color:var(--navy)}.dark p{color:white}.dark .eyebrow{color:var(--sky)}.timebar{display:flex;overflow:hidden;border-radius:4px;margin:24px 0;font-size:14px;color:white}.timebar span{text-align:center;background:var(--navy);padding:16px 8px}.timebar span+span{background:var(--sky);color:var(--navy)}
details{border-top:1px solid var(--line);padding:16px 0;font-size:14px}summary{min-height:44px;display:list-item;padding:8px 0;font-weight:600}details>p{margin:16px 0 0}.scenario-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}.scenario-buttons button{background:white;color:var(--navy);border-color:var(--line)}.scenario-buttons button:hover{background:var(--canvas);border-color:var(--navy)}
.simulator{display:grid;grid-template-columns:336px minmax(0,1fr);border:1px solid var(--line);border-radius:4px;overflow:hidden;background:white}.controls{padding:32px;background:var(--canvas)}.controls h3{margin-top:0}label{display:block;font-size:14px;font-weight:600;margin:16px 0}input,select{display:block;min-height:44px;width:100%;margin-top:8px;padding:8px;border:1px solid #A9BDCE;border-radius:4px;color:var(--navy);background:white;font-size:16px}input[type=range]{padding:0;accent-color:var(--navy);min-height:32px}output{float:right;font-weight:700}.results{padding:32px}.result-top{padding-bottom:24px;border-bottom:1px solid var(--line)}.result-top>strong{display:block;font-size:40px;line-height:1.2;font-weight:700;letter-spacing:-1px;margin:16px 0}.result-top>p{margin:16px 0 0;font-size:14px}
.gap{display:inline-block;padding:8px 12px;border-radius:4px;background:#FFF4D6;color:var(--attention);font-size:14px;font-weight:600}.gap.positive{background:#EDF6F0;color:var(--success)}.info{display:inline-block;position:relative;vertical-align:middle;padding:0;border:0}.info summary{display:inline-flex;align-items:center;justify-content:center;list-style:none;padding:0;min-height:32px;width:32px;background:#E2EBF1;border-radius:4px;color:var(--navy);font-size:14px}.info summary::-webkit-details-marker{display:none}.info[open]{display:inline}.info[open] p{display:block;padding:16px;margin:16px 0;background:var(--canvas);border:1px solid var(--line);border-radius:4px;color:var(--navy);font-weight:400;max-width:100%}
.chartrow{margin:24px 0}.chartlabel{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;margin-bottom:8px}.track{display:flex;height:32px;border-radius:4px;overflow:hidden;background:var(--canvas)}.seg{height:100%;min-width:0;transition:width .2s}.seg+.seg{border-left:2px solid white}.chart-values{font-size:14px}.chart-values caption{text-align:left;font-weight:600;padding-bottom:8px}.chart-values th{padding:8px;text-align:left;font-weight:400;border-bottom:1px solid var(--line)}.legend{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;margin:16px 0 24px}.legend span:nth-child(1){color:var(--navy)}.legend span:nth-child(2){color:#19739D}.legend span:nth-child(3){color:var(--muted)}.legend span:nth-child(4){color:var(--attention)}.srow{display:grid;grid-template-columns:112px minmax(0,1fr) 104px;align-items:center;gap:8px;margin:16px 0;font-size:13px}.srow strong{text-align:right}.sbar{height:16px;border-radius:2px;background:var(--sky)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:48px}.steps article{border-top:2px solid var(--navy);padding-top:16px}.steps b{font-size:14px;font-weight:400;color:var(--muted)}.steps h3{font-size:20px}.questions{display:grid;grid-template-columns:1fr 1.2fr;gap:64px}.questions label{margin-top:0}.questions input{margin-bottom:24px}.questions summary{font-size:16px}.questions details p{font-size:16px}
footer{background:var(--navy);color:white;margin:32px 0;padding:32px;display:grid;grid-template-columns:auto 1fr;gap:24px 48px;align-items:center}.footer-logo{width:168px;height:auto;display:block}.brand-promise{color:white;margin:0;font-size:14px;line-height:1.6}.edition{grid-column:1/-1;font-size:13px;color:white}.source-note{grid-column:1/-1;color:#DCE4EB;font-size:13px;max-width:85ch;margin:0}#formula{font-size:14px}table{width:100%;border-collapse:collapse}td{padding:8px;border-bottom:1px solid var(--line)}td:last-child{text-align:right;white-space:nowrap}
@media(max-width:1050px){header{padding:24px 32px;gap:24px}.internal{display:none}.hero{padding:32px;gap:32px}h1{font-size:56px}.simulator{grid-template-columns:288px minmax(0,1fr)}.controls,.results{padding:24px}.cards{gap:16px}.cards strong{font-size:28px}.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:850px){main{padding:0 24px}.hero{grid-template-columns:1fr;gap:32px}.hero-card{padding:32px}.hero-card>p{max-width:65ch}.simulator,.questions{grid-template-columns:1fr}.controls{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.controls h3,.controls .fine{grid-column:1/-1}.questions{gap:24px}.cards{grid-template-columns:1fr}}
@media(max-width:650px){header{padding:24px;flex-direction:column;align-items:flex-start;gap:24px}.brand img{width:168px}nav{gap:16px}nav a{padding:8px 0}main{padding:0 16px}section{padding:48px 0}.hero{padding:24px;margin-top:24px;gap:32px}h1{font-size:40px;letter-spacing:-1px;margin:24px 0}h2{font-size:28px;letter-spacing:-.5px}.intro{font-size:18px}.hero-card{padding:24px}.big,.result-top>strong{font-size:32px}.eyebrow{font-size:12px;letter-spacing:1px}.split,.steps,.controls{grid-template-columns:1fr}.split,.steps{gap:24px}.controls h3,.controls .fine{grid-column:auto}.panel,.controls,.results{padding:24px}.notice{padding:16px}.cards strong{font-size:32px}.mini{flex-wrap:wrap}.srow{grid-template-columns:88px minmax(0,1fr) 96px;font-size:12px;gap:8px}footer{margin:24px 0;padding:24px;grid-template-columns:1fr;gap:24px}.edition,.source-note{grid-column:auto}}
@media(max-width:360px){header{padding:24px}nav{gap:12px;font-size:14px}.hero,.hero-card,.panel,.controls,.results{padding:16px}.hero{gap:24px}.srow{grid-template-columns:84px minmax(0,1fr) 92px;gap:4px}.legend{font-size:12px}.big,.result-top>strong{font-size:30px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.seg{transition:none}}
/* Keep the original logo's clear space and data labels readable. */
.brand{padding:16px 0}.legend,.srow{font-size:14px}
@media(max-width:650px){.srow{grid-template-columns:minmax(0,1fr) auto;font-size:14px;gap:8px}.srow strong{grid-column:2;grid-row:1}.sbar{grid-column:1/-1;grid-row:2}.legend{font-size:14px}}
/* Quotation prices and the weekly cost-recovery explanation. */
.price-build{margin:24px 0 16px}.price-build>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}.price-build dt{font-weight:400}.price-build dd{margin:0;font-weight:600;white-space:nowrap}.price-build .selling-price{display:block;padding:16px 0;border-bottom:0}.selling-price dt{font-weight:600}.selling-price dd{font-size:32px;line-height:1.2;margin-top:8px}.cards .labour-card{display:flex;flex-direction:column}.labour-link{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--line);margin-top:auto;padding:16px 0 8px;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:4px}.labour-link svg{flex:0 0 48px;color:var(--navy);animation:point-to-costs 1.2s ease-in-out 4}.pricing-context{font-size:14px;max-width:95ch;margin:24px 0 32px}.rate-explainer{padding:32px;border:1px solid var(--line);border-radius:4px;background:var(--canvas);scroll-margin-top:24px}.rate-intro{max-width:78ch}.rate-intro h3{font-size:28px;margin:16px 0 24px}.weekly-model{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center;margin:32px 0}.weekly-pot{position:relative;background:var(--navy);color:white;border-radius:16px 16px 64px 64px;padding:32px 32px 40px;border-top:8px solid var(--sky)}.pot-rim{position:absolute;inset:-8px 16px auto;height:8px;background:var(--sky);border-radius:50%}.pot-caption{font-size:12px;font-weight:700;letter-spacing:1.4px;color:var(--sky);display:block;text-align:center}.pot-costs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:24px 0}.pot-costs span{padding:12px;background:#164875;border:1px solid #4E769C;border-radius:4px;font-size:14px;line-height:1.4}.weekly-pot>strong{display:block;text-align:center;font-size:32px;line-height:1.2;font-weight:600;margin:24px 0 16px}.weekly-pot>p{color:white;font-size:14px;text-align:center;margin:0}.hourly-model h4,.capacity-note h4{font-size:20px;line-height:1.3;margin:0 0 16px}.fraction{display:grid;text-align:center}.fraction>div{display:flex;align-items:center;justify-content:center;gap:16px;padding:16px}.fraction>div:first-child{border-bottom:3px solid var(--navy)}.fraction b{font-size:32px;line-height:1}.fraction span{font-size:16px;max-width:24ch}.cost-result{display:flex;align-items:center;gap:16px;padding:24px 0}.cost-result>span{font-size:32px}.cost-result p{margin:0;color:var(--navy);font-size:14px}.selling-equation{background:white;border-left:4px solid var(--sky);padding:16px;margin-bottom:16px;line-height:1.8}.selling-equation span{color:var(--muted)}.capacity-note{border-top:1px solid var(--line);padding-top:24px}.capacity-note p{max-width:90ch}.cost-detail{margin-top:24px}.cost-detail summary{font-size:16px}.cost-categories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px;margin:24px 0}.cost-categories h4{font-size:16px;margin:0 0 8px}.cost-categories p{font-size:14px;margin:0}.rate-explainer:focus{outline:3px solid #007BBA;outline-offset:4px}
@keyframes point-to-costs{0%,100%{transform:translateY(-4px)}50%{transform:translateY(6px)}}
@media(max-width:850px){.weekly-model{grid-template-columns:1fr;gap:32px}.weekly-pot{max-width:560px;width:100%;margin:auto}.hourly-model{max-width:560px;width:100%;margin:auto}.cards .labour-card{display:block}.labour-link{margin-top:24px}}
@media(max-width:650px){.rate-explainer{padding:24px}.rate-intro h3{font-size:24px}.weekly-pot{padding:24px 16px 32px;border-radius:8px 8px 40px 40px}.pot-costs{grid-template-columns:1fr}.pot-costs span{font-size:14px}.weekly-pot>strong{font-size:28px}.cost-categories{grid-template-columns:1fr}.fraction>div{padding:16px 0;gap:16px}.fraction span{font-size:14px}.selling-price dd{font-size:32px}}
@media(max-width:360px){.rate-explainer{padding:16px}.fraction>div{gap:8px}.pot-caption{letter-spacing:1px}.weekly-pot>strong{font-size:24px}}
@media(prefers-reduced-motion:reduce){.labour-link svg{animation:none;transform:none}}

/* Brian's IMR rule: orange on white; yellow on dark surfaces. */
:root{--imr-orange:#C65300}
.imr-text{color:var(--imr-orange)}
.imr-text--dark{color:var(--yellow)}
/* A short guided story, with technical detail available on demand. */
.opening-figures{margin:16px 0 24px}.opening-figures>div{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:16px 0;border-bottom:1px solid var(--line);font-size:14px}.opening-figures dt{max-width:27ch}.opening-figures dd{margin:0;font-weight:700;white-space:nowrap}.opening-figures>.remaining{display:block;border-bottom:0}.remaining dt{max-width:none}.opening-figures .remaining dd{font-size:40px;line-height:1.2;letter-spacing:-1px;margin-top:16px}.simple-picture{align-items:start}.time-story p{max-width:50ch}.timebar{font-size:14px}.time-story details p{margin-top:16px}.simple-rate .weekly-pot{margin:24px 0;padding:24px 24px 32px}.simple-rate .weekly-pot>strong{font-size:24px}.simple-rate .pot-costs{margin:16px 0}.simple-rate .pot-costs span{padding:8px 12px}.simple-rate .pot-caption{letter-spacing:1px}.simple-rate .weekly-model{display:block;margin:24px 0}.simple-rate .hourly-model{max-width:none}.simple-rate .capacity-note{margin-top:24px}.simple-rate .cost-categories{grid-template-columns:1fr}.rate-method summary{font-size:16px}.disclosure{margin-top:24px;border-bottom:1px solid var(--line)}.disclosure>summary{font-size:18px;padding:16px 0}.disclosure-body{padding:16px 0 8px}.disclosure-body>.cards{margin-bottom:24px}.comparison-equation{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:24px;margin:24px 0;background:var(--canvas);font-size:16px}.comparison-equation strong{font-size:24px}.disclosure table th,#idealFormula th{font-weight:400;text-align:left;padding:8px;border-bottom:1px solid var(--line)}table caption{text-align:left;font-weight:600;margin:16px 0}#standard-comparison table td{font-size:14px}
.ideal-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:32px;align-items:start}.ideal-quote{background:var(--canvas)}.ideal-quote .selling-price dd{font-size:40px}.ideal-playground{padding:24px 0}.ideal-playground>h3{margin-top:0;font-size:24px}.ideal-playground label{margin-top:24px}.ideal-playground input[type=range]{margin:16px 0}.ideal-chart{margin:24px 0}.ideal-bar-row{display:grid;grid-template-columns:64px minmax(0,1fr) 88px;gap:16px;align-items:center;margin:16px 0;font-size:14px}.ideal-bar-row strong{text-align:right;font-size:14px}.ideal-bar-row .track{height:24px}.ideal-outcome{padding:24px;background:var(--canvas);border-left:4px solid var(--sky);margin:24px 0}.ideal-outcome>strong{display:block;font-size:40px;font-weight:700;line-height:1.2;margin:16px 0}.ideal-outcome p{margin:0}.ideal-playground button{margin:8px 0 24px}.relationship-note{margin-top:32px;background:var(--navy);color:white;padding:32px}.relationship-note .eyebrow{color:var(--sky)}.relationship-note p{color:white;max-width:90ch;margin:0}.optional-section{padding:48px 0}.optional-section>.disclosure{margin-top:16px}.optional-section>.disclosure>summary{font-size:24px}.question-guide{border-bottom:1px solid var(--line)}.question-guide>summary{font-size:18px}.question-guide>label{margin-top:24px}.steps{margin-top:32px}#idealFormula{font-size:14px}#idealFormula table{table-layout:fixed}#idealFormula th{width:64%;overflow-wrap:anywhere}#idealFormula td{padding-left:4px;padding-right:4px}
@media(max-width:1050px){.ideal-layout{grid-template-columns:1fr 1fr}.ideal-quote{padding:24px}.ideal-quote .selling-price dd{font-size:32px}}
@media(max-width:850px){.simple-picture,.ideal-layout{grid-template-columns:1fr}.simple-rate .weekly-pot{max-width:560px;margin:24px auto}.ideal-playground{padding:0}.ideal-quote{max-width:none}.ideal-quote .selling-price dd{font-size:40px}.simple-rate .pot-costs{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.opening-figures>div{gap:16px;flex-wrap:wrap}.opening-figures .remaining dd{font-size:32px}.simple-rate .weekly-pot{padding:24px 16px 32px}.simple-rate .pot-costs{grid-template-columns:1fr 1fr}.simple-rate .pot-costs span{font-size:14px;padding:8px}.ideal-quote .selling-price dd{font-size:32px}.ideal-outcome{padding:16px}.ideal-outcome>strong{font-size:32px}.ideal-bar-row{grid-template-columns:56px minmax(0,1fr) 72px;gap:8px}.relationship-note{padding:24px}.comparison-equation{padding:16px}.optional-section>.disclosure>summary{font-size:20px}.disclosure>summary{font-size:16px}.simple-picture .panel{padding:24px}}
@media(max-width:360px){.simple-picture .panel{padding:16px}.simple-rate .pot-costs{grid-template-columns:1fr}.timebar{font-size:12px}.ideal-bar-row{grid-template-columns:52px minmax(0,1fr) 64px;font-size:13px}.ideal-bar-row strong{font-size:13px}.opening-figures .remaining dd{font-size:30px}.ideal-quote{padding:16px}.relationship-note{padding:16px}#idealFormula{font-size:12px}}
.opening-figures dd{font-size:24px;line-height:1.2}
@media(max-width:650px){.opening-figures dd{font-size:24px}}
/* Shared grid rows keep all quotation figures level as descriptions wrap. */
#pricing-details .quotation-cards{align-items:stretch;row-gap:16px}
#pricing-details .pricing-card{display:grid;grid-template-rows:subgrid;grid-row:span 7;row-gap:16px;padding:24px;min-width:0}
#pricing-details .card-heading h3{margin:16px 0 0}
#pricing-details .card-description{margin:0}
#pricing-details .pricing-breakdown{display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:0;margin:0;font-size:14px}
#pricing-details .pricing-breakdown>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
#pricing-details .pricing-breakdown dt{font-weight:400}
#pricing-details .pricing-breakdown dd{margin:0;font-weight:600;white-space:nowrap}
#pricing-details .pricing-price{margin:0;padding:8px 0 0}
#pricing-details .pricing-price dt{font-size:14px;font-weight:600}
#pricing-details .headline-amount{margin:8px 0 0;font-size:32px;line-height:1.2;font-weight:700;letter-spacing:-.5px;white-space:nowrap}
#pricing-details .pricing-note{margin:0}
#pricing-details .labour-link{margin:0;padding:16px 0 0}
.markup-action{margin:24px 0}
.markup-dialog{width:min(620px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow:auto;overscroll-behavior:contain;border:1px solid var(--line);border-top:4px solid var(--navy);border-radius:4px;padding:32px;color:var(--navy);background:white;font:400 16px/1.6 var(--font-brand)}
.markup-dialog::backdrop{background:rgba(0,24,48,.65)}
.markup-dialog h2{font-size:28px;margin:0 0 24px}
.markup-reasons{padding-left:24px;color:var(--muted);margin:24px 0}
.markup-reasons li{margin:16px 0;padding-left:4px}
.markup-reasons b{color:var(--navy)}
.markup-example{padding:24px;background:var(--canvas);border-left:4px solid var(--sky);margin:24px 0}
.markup-example p{margin:16px 0 0;font-size:14px}
.markup-dialog form{margin:24px 0 0;text-align:right}
@media(max-width:850px){#pricing-details .pricing-card{grid-row:auto;grid-template-rows:none;gap:16px}#pricing-details .pricing-breakdown{grid-row:auto;grid-template-rows:none;gap:0}}
@media(max-width:650px){.markup-dialog{padding:24px}.markup-dialog h2{font-size:24px}.markup-example{padding:16px}}
@media(max-width:360px){#pricing-details .pricing-card{padding:16px}.markup-dialog{padding:16px}}
/* Three-input selling-price builder. */
.quote-controls label{margin-top:24px}.quote-controls input[type=range]{margin:8px 0}.quote-controls>p.fine{margin-bottom:24px}.quote-buttons{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}.quote-buttons button{margin:0}.secondary-button{background:white;color:var(--navy);border-color:var(--line)}.secondary-button:hover{background:var(--canvas);border-color:var(--navy)}.quote-composition{margin:24px 0 8px}.quote-legend{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;margin:8px 0 24px;color:var(--muted)}.quote-builder #idealFormula{font-size:14px}.quote-builder .price-build dt{max-width:28ch}.quote-builder .price-build dd{white-space:nowrap}.quote-builder .ideal-quote .selling-price dt{max-width:none}
@media(max-width:650px){.quote-controls>h3{font-size:24px}.quote-buttons{display:grid;grid-template-columns:1fr}.quote-buttons button{width:100%}}

/* The markup also funds the gap between supplier payment and customer receipt. */
.markup-financing{padding:24px;background:var(--canvas);border-left:4px solid var(--sky);margin:24px 0}
.markup-financing h3{font-size:20px;margin:0 0 16px}
.markup-financing p{font-size:14px;margin:0 0 16px}
.markup-financing p:last-child{margin:0}
.funding-note{max-width:82ch;margin:16px 0 0;color:var(--navy)}
@media(max-width:650px){.markup-financing{padding:16px}}
/* Explanations open in panels; the main page stays short. */
.explanation-trigger,.faq-question{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:16px 24px;margin:24px 0;background:white;color:var(--navy);border:1px solid var(--line);border-radius:4px;font-size:16px;line-height:1.5;font-weight:600;text-align:left}
.explanation-trigger:hover,.faq-question:hover{background:var(--canvas);border-color:var(--navy)}
.explanation-trigger>span:last-child,.faq-question>span:last-child{flex-shrink:0}
.info-button{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;min-height:32px;width:32px;padding:0;background:#E2EBF1;color:var(--navy);border:0;border-radius:4px;font-size:14px}
.info-button:hover{background:#DCE4EB;color:var(--navy)}
dialog.explanation-panel{width:min(760px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:calc(100dvh - 48px);padding:0;margin:auto;overflow:hidden;border:1px solid var(--line);border-top:4px solid var(--navy);border-radius:4px;background:white;color:var(--navy);font:400 16px/1.6 var(--font-brand)}
dialog.explanation-panel[open]{display:flex;flex-direction:column}
dialog.explanation-panel--wide{width:min(1240px,calc(100vw - 32px))}
.explanation-panel::backdrop{background:rgba(0,24,48,.65)}
.popup-heading{display:flex;align-items:flex-start;justify-content:space-between;flex-shrink:0;gap:24px;padding:24px 32px;background:white;border-bottom:1px solid var(--line)}
.popup-heading .popup-title{font-size:24px;line-height:1.25;margin:0;letter-spacing:-.5px}
.popup-title:focus{outline:none}
.popup-close{margin:0;flex-shrink:0}.popup-close button{margin:0}
.popup-content{padding:24px 32px 32px;overflow:auto;overscroll-behavior:contain;min-height:0}
.popup-content>.disclosure-body,.popup-content>div>.disclosure-body{padding:0}
.popup-content .method-model{display:block}.popup-content .hourly-model{max-width:none}
.popup-content table th{font-weight:400;text-align:left;padding:8px;border-bottom:1px solid var(--line)}
.popup-content #search{margin-bottom:24px}
.popup-content .explanation-trigger{margin:16px 0}
.faq-question{margin:8px 0;padding:16px}
.simple-rate>.explanation-trigger,.time-story>.explanation-trigger{margin-bottom:0}
.optional-section>.explanation-trigger{font-size:20px;margin-top:16px}
@media(max-width:650px){.popup-heading{padding:16px;gap:16px}.popup-heading .popup-title{font-size:20px}.popup-content{padding:16px}.explanation-trigger{padding:16px}.popup-close button{padding:8px 12px}.optional-section>.explanation-trigger{font-size:18px}}

.popup-heading .popup-close{margin:0}
/* KPFS learning journey: visible example and practical reference checklist. */
.learning-outcomes{padding:32px 0;border-bottom:1px solid var(--line)}
.learning-outcomes h2{font-size:24px;letter-spacing:-.5px;margin:0 0 24px}
.learning-outcomes ul{display:grid;grid-template-columns:1fr 1fr;gap:16px 40px;margin:0 0 24px;padding-left:24px;color:var(--muted)}
.learning-outcomes li::marker{color:var(--navy)}
.learning-outcomes>.fine{max-width:95ch;margin:0}
.not-profit{font-size:14px}.not-profit b{color:var(--navy)}
.worked-example{border:1px solid var(--line);border-top:4px solid var(--navy);border-radius:4px;padding:32px;background:white}
.worked-heading{max-width:80ch}.worked-heading h3{font-size:28px;margin:16px 0}
.worked-lines{margin:24px 0}.worked-lines>div{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:16px 0;border-bottom:1px solid var(--line)}
.worked-lines dt span{display:block;font-size:14px;color:var(--muted);margin-top:4px}
.worked-lines dd{margin:0;font-size:24px;line-height:1.25;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.worked-lines .worked-total{padding:24px 16px;background:var(--navy);color:white;border:0}
.worked-total dt span{color:white}.worked-total dd{font-size:36px;color:var(--yellow)}
.worked-lines .worked-difference{border-bottom:0}.worked-difference dd{font-size:28px}
.worked-context{padding:24px;background:var(--canvas);border-left:4px solid var(--sky)}
.worked-context p{max-width:92ch;font-size:14px}.worked-context p:last-child{margin:0}
.builder-heading{margin:48px 0 24px;max-width:85ch}.builder-heading h3{font-size:28px;margin:0 0 16px}
.quote-presets{display:flex;flex-wrap:wrap;gap:8px}.quote-presets button{background:white;color:var(--navy);border-color:var(--line);text-align:left}
.quote-presets button[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:white}
.quote-presets button:hover{border-color:var(--navy)}.preset-note{margin:16px 0 32px;max-width:95ch}
.quote-difference{padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.quote-difference>span{font-size:14px;display:block;color:var(--muted)}
.quote-difference>strong{font-size:24px;display:block;margin:8px 0}.quote-difference p{margin:0}
.markup-margin{padding:32px;background:var(--canvas);border-left:4px solid var(--sky);margin-top:32px}
.markup-margin h3{font-size:24px;margin:0 0 16px}.markup-margin p{max-width:85ch}.markup-margin p:last-child{margin-bottom:0}
.margin-example{display:flex;flex-wrap:wrap;gap:8px 24px;margin:24px 0;color:var(--navy)}
.checklist-phase{margin:32px 0}.checklist-phase>h3{font-size:24px;padding-bottom:16px;border-bottom:2px solid var(--navy)}
.checklist-phase>h3>span{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--navy);color:var(--yellow);font-size:16px;margin-right:16px;border-radius:4px}
.checklist-grid{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:24px 0 0}
.checklist-grid.single{grid-template-columns:1fr}
.checklist-grid>li{padding:24px;border:1px solid var(--line);border-radius:4px;min-width:0}
.checklist-grid h4{font-size:20px;line-height:1.3;margin:0 0 12px}
.checklist-grid .role{font-size:14px;font-weight:700;color:var(--navy);margin:0 0 16px}
.checklist-grid p{font-size:16px;max-width:95ch}
.checklist-grid .record{font-size:14px;background:var(--canvas);padding:16px;margin:16px 0 0;color:var(--navy)}
.optional-section>h2{font-size:28px}.optional-section>.explanation-trigger{font-size:18px}
@media(max-width:650px){.learning-outcomes{padding:24px 0}.learning-outcomes ul,.checklist-grid{grid-template-columns:1fr;gap:16px}.worked-example{padding:24px}.worked-heading h3,.builder-heading h3{font-size:24px}.worked-lines>div{gap:16px;align-items:flex-start}.worked-lines dd{font-size:20px}.worked-lines .worked-total,.worked-lines .worked-difference{display:block}.worked-total dd{font-size:32px;margin-top:16px}.worked-difference dd{font-size:28px;margin-top:16px}.worked-context,.markup-margin,.checklist-grid>li{padding:24px}.markup-margin{margin-top:24px}.quote-presets{display:grid;grid-template-columns:1fr}.checklist-phase>h3{font-size:20px}.checklist-phase>h3>span{margin-right:8px}}
@media(max-width:360px){.worked-example,.worked-context,.markup-margin,.checklist-grid>li{padding:16px}.worked-lines>div:not(.worked-total):not(.worked-difference){display:block}.worked-lines dd{margin-top:8px}.worked-total dd{font-size:30px}.quote-difference>strong{font-size:22px}}

/* Colour markers keep the chart key clear as segment widths change. */
.quote-legend{font-size:14px;color:var(--navy);gap:8px 20px}
.quote-legend>span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.quote-key{display:inline-block;width:12px;height:12px;flex:0 0 12px;border-radius:2px}
.quote-key-equipment{background:var(--navy)}
.quote-key-contractor{background:var(--sky)}
.quote-key-labour{background:var(--muted)}

.relationship-note p+p{margin-top:16px}