/* The pricing calculator. Builds on the tokens, buttons and tiles in hub.css. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
[hidden]{display:none!important}
.pr{padding-bottom:20px}

.pr-modes{border:0;padding:0;margin:0 0 22px;max-width:420px}
.pr-layout{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:24px;align-items:start}
.pr-panel{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:24px;margin:0}
.pr-panel h2,.pr-guide h2{font-size:19px;font-weight:750;letter-spacing:-.02em;color:var(--navy);margin-bottom:16px}

.pr-field{margin-bottom:18px}
.pr-field label,.pr-label-row>label{display:block;font-size:14px;font-weight:650;color:var(--navy);margin-bottom:6px}
.pr-label-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}
.pr-label-row>label{margin:0}
.pr-optional{font-weight:500;color:var(--muted)}
.pr-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.pr input:not([type=radio]):not([type=checkbox]),.pr select{width:100%;font:inherit;font-size:16px;color:var(--navy);background:var(--white);border:1px solid #b9c4d2;border-radius:9px;padding:11px 12px;font-variant-numeric:tabular-nums}
.pr input:focus-visible,.pr select:focus-visible{outline:3px solid var(--gold);outline-offset:1px;border-color:var(--navy)}
/* An amount box with its R or % sign inside the border. */
.pr-money{display:flex;align-items:center;border:1px solid #b9c4d2;border-radius:9px;background:var(--white)}
.pr-money:focus-within{outline:3px solid var(--gold);outline-offset:1px;border-color:var(--navy)}
.pr-money>span{flex:none;font-size:16px;font-weight:600;color:var(--muted);padding:0 0 0 12px}
.pr-money.after>span{padding:0 12px 0 0}
.pr .pr-money input:not([type=radio]):not([type=checkbox]){border:0;background:none;outline:0;min-width:0;padding-left:8px}
.pr .pr-money.after input:not([type=radio]):not([type=checkbox]){padding-left:12px;padding-right:6px}
.pr-help{font-size:13.5px;line-height:1.55;color:var(--muted);margin-top:7px}
.pr-row+.pr-help{margin:-8px 0 18px}

.pr-switch{display:flex;border:1px solid #b9c4d2;border-radius:8px;overflow:hidden}
.pr-switch label{margin:0;cursor:pointer}
.pr-switch input{position:absolute;opacity:0;width:1px;height:1px}
.pr-switch span{display:block;font-size:12.5px;font-weight:650;color:var(--ink);padding:5px 11px}
.pr-switch input:checked+span{background:var(--green);color:var(--white)}
.pr-switch label:focus-within{outline:3px solid var(--gold);outline-offset:-1px}
.pr-check{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:var(--navy);cursor:pointer;margin-top:4px}
.pr-check input{width:18px;height:18px;accent-color:var(--green);flex:none}
.pr-text-button{font:inherit;font-size:14px;font-weight:650;color:var(--green);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-align:left}
#pr-clear{margin-top:18px}
.pr-text-button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

.pr-result{position:sticky;top:calc(var(--site-header,63px) + 16px)}
.pr-empty{font-size:16px;line-height:1.6;color:var(--muted)}
.pr-headline{background:#eaf4ee;border-radius:12px;padding:18px 20px;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
.pr-headline span{font-size:15px;font-weight:650;color:var(--green-dark)}
.pr-headline strong{font-size:clamp(30px,5vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--navy);font-variant-numeric:tabular-nums}
.pr-lines{display:grid;grid-template-columns:minmax(0,1fr) auto;margin:14px 0 0}
.pr-lines dt,.pr-lines dd{margin:0;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.pr-lines dd{text-align:right;font-variant-numeric:tabular-nums;padding-left:16px}
.pr-lines .strong{font-weight:700;color:var(--navy)}
.pr-note{font-size:13.5px;line-height:1.55;color:#7a4b00;background:#fff6dc;border-radius:8px;padding:9px 11px;margin-top:14px}
.pr-result h3{font-size:14px;font-weight:700;color:var(--navy);margin:24px 0 8px}
.pr-ladder{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.pr-ladder th,.pr-ladder td{text-align:right;padding:8px 0 8px 12px;border-bottom:1px solid var(--line);font-weight:400}
.pr-ladder th:first-child{text-align:left;padding-left:0}
.pr-ladder thead th{font-size:12.5px;font-weight:650;color:var(--muted)}
.pr-ladder tbody th{font-weight:650;color:var(--navy)}

.pr-guide{max-width:720px;margin-top:32px}
.pr-guide ul{margin:0;padding-left:20px}
.pr-guide li{font-size:15.5px;line-height:1.65;margin-bottom:10px}
.pr-guide strong{color:var(--navy)}

@media (max-width:900px){
  .pr-layout{grid-template-columns:minmax(0,1fr)}
  .pr-result{position:static}
}
@media (max-width:560px){
  .pr-panel{padding:18px 16px}
}