/* Page styles for /calculator. Split out of calculator.html on 20 Aug 2026 so the
   browser can cache it between visits and does not have to parse 20KB of CSS inside
   the HTML on every load. Shared site styles still live in styles.css. */
  /* ---------- Calculator, themed to the house style ---------- */
  :root{
    /* P3-01: aliases only. Canonical values live in styles.css :root. */
    /* --card now comes from styles.css; a local --card:var(--card) would be cyclic. */
    --muted:var(--soft);
    --brand:var(--teal);
    --brand-dark:var(--teal-d);
    --brand-tint:var(--teal-tint);
    --shadow:var(--sh-card);   /* P3-04 */
    --radius:var(--r-card);   /* P3-03 */
  }
  .calc-head{text-align:center;padding-top:48px;padding-bottom:8px}
  .calc-head .sec-eyebrow{font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--teal);font-weight:600;margin-bottom:10px}
  .calc-head h1{font-size:var(--fs-h1);letter-spacing:-.02em;margin-bottom:8px}
  .calc-head p{color:var(--ink-body);font-size:var(--fs-base)}

  .app{width:100%;max-width:680px;margin:0 auto;padding:8px 24px 64px}

  /* progress */
  .progress{display:flex;gap:8px;margin:26px 0 22px}
  /* P3-07: three states, not two. The bar could only say 'done' or 'not done', so the step you
     were actually on was indistinguishable from the ones ahead of it. .now gets height and
     the brand colour at full strength; upcoming steps stay hairline. */
  .progress .seg{flex:1;height:6px;border-radius:var(--r-pill);background:var(--line);transition:.3s}
  .progress .seg.done{background:var(--brand)}
  .progress .seg.now{background:var(--brand);height:8px;margin-top:-1px;box-shadow:0 0 0 3px rgba(42,107,151,.16)}

  /* ---- running price panel (16 Aug, itemised 16 Aug p.m.) ----
     Sticks just under the nav so the price follows you down the questions. --navh is measured
     in JS on load and resize, because the nav is 64px on mobile and ~72px on desktop and a
     hard-coded offset would leave a gap or overlap at one of them. z-index sits below the
     nav's 20 on purpose, so it slides under rather than over it.

     It started as a single figure. Richard's note: when a discount is applied we should be
     showing the rate AND the pounds it takes off, as it happens, the way a basket does. He was
     right and the gap was concrete: at step 2 with four rooms the bar read "£4,060, saving
     £1,320", while a 12% multi-room discount worth £720 was already live and appeared nowhere
     except a grey line under the room grid with no pound figure on it. The customer had earned
     £720 and we had not told them.

     Two states. Expanded is the full receipt. Once it pins under the nav it collapses to one
     line, which is SHORTER than the old single-figure bar was (about 44px against 74px), so on
     the screens where space is tightest this is a net gain rather than a cost. */
  .pricebar{position:sticky;top:calc(var(--navh,64px) + 6px);z-index:15;margin-bottom:18px}
  .pb-in{background:var(--brand-tint);border:1px solid #CBDDEC;border-radius:var(--r-card);
    padding:13px 16px 12px;box-shadow:0 6px 18px -14px rgba(33,30,26,.5)}
  .pb-wait{color:var(--muted);font-size:var(--fs-sm);text-align:center;line-height:1.45;
    background:var(--bg);border-color:var(--line)}

  /* the receipt */
  .pb-rows{margin-bottom:10px}
  .pb-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    font-size:var(--fs-sm);line-height:1.5;padding:2px 0;font-variant-numeric:tabular-nums}
  .pb-row .pb-l{color:var(--ink-body);min-width:0}
  .pb-row .pb-n{font-weight:600;color:var(--ink);white-space:nowrap}
  /* Discounts are the only thing in here allowed to use the brand colour, so the eye finds
     them without any need for a badge or a flash. */
  .pb-row.off .pb-l,.pb-row.off .pb-n{color:var(--brand-dark)}
  .pb-row.off .pb-n{font-weight:700}
  .pb-row.add .pb-l,.pb-row.add .pb-n{color:var(--muted);font-weight:500}

  /* A line that has just been earned. One quiet highlight, no bounce, no counter spinning up:
     this is a three thousand pound decision, not a slot machine. */
  @keyframes pbIn{
    0%  {opacity:0;transform:translateY(-4px);background:rgba(42,107,151,.20)}
    60% {opacity:1;transform:none;background:rgba(42,107,151,.20)}
    100%{opacity:1;transform:none;background:rgba(42,107,151,0)}
  }
  .pb-row.is-new{animation:pbIn .9s ease-out;border-radius:var(--r-in);
    margin-left:-6px;margin-right:-6px;padding-left:6px;padding-right:6px}
  @keyframes pbPulse{0%{color:var(--brand-dark)}40%{color:var(--brand)}100%{color:var(--brand-dark)}}
  .pb-saved b.is-bump{animation:pbPulse .9s ease-out}
  @media(prefers-reduced-motion:reduce){
    .pb-row.is-new,.pb-saved b.is-bump{animation:none}
  }

  .pb-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
    border-top:1px solid #CBDDEC;padding-top:10px}
  .pb-main{flex:1 1 auto;min-width:0}
  .pb-k{font-size:var(--fs-xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase;
    color:var(--muted);display:block;margin-bottom:3px;white-space:nowrap}
  .pb-v{display:block;font-family:'Fraunces',serif;font-size:26px;line-height:1;letter-spacing:-.02em;
    color:var(--brand-dark);font-variant-numeric:tabular-nums;white-space:nowrap}
  .pb-u{font-size:var(--fs-xs);color:var(--muted);display:block;margin-top:5px;line-height:1.4}
  .pb-alt{text-align:right;font-size:var(--fs-xs);color:var(--muted);
    line-height:1.45;font-variant-numeric:tabular-nums;flex:0 1 auto;max-width:46%}
  .pb-alt b{color:var(--ink);font-weight:600;display:block;font-size:var(--fs-sm)}
  .pb-tail{display:block}

  /* "Taken off", not "saved". It describes what the mechanism did rather than implying there
     was a higher price we were otherwise going to charge you for this job. */
  .pb-saved{margin-top:9px;font-size:var(--fs-xs);color:var(--brand-dark);line-height:1.45;
    font-variant-numeric:tabular-nums}
  .pb-saved b{font-weight:700}

  /* collapsed, once it pins */
  .pricebar.is-pinned .pb-rows,
  .pricebar.is-pinned .pb-saved{display:none}
  .pricebar.is-pinned .pb-in{padding:9px 16px}
  .pricebar.is-pinned .pb-foot{border-top:0;padding-top:0;align-items:center}
  .pricebar.is-pinned .pb-k{display:none}
  .pricebar.is-pinned .pb-v{display:inline;font-size:20px}
  .pricebar.is-pinned .pb-u{display:inline;margin-top:0;margin-left:6px}
  .pricebar.is-pinned .pb-alt b{display:inline}
  /* Pinned, the alternative keeps its figure and drops the explanation. Without this the tail
     ("over 12 months, interest free") wrapped the collapsed bar onto three lines, which defeats
     the point of collapsing it. */
  .pricebar.is-pinned .pb-tail{display:none}

  @media(max-width:440px){
    .pb-in{padding:12px 13px 11px}
    .pb-v{font-size:22px}
    .pb-row{font-size:var(--fs-xs)}
    .pricebar.is-pinned .pb-v{font-size:18px}
  }
  @media print{.pricebar{display:none!important}}

  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px}
  .step-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
  .step-head .num{width:26px;height:26px;border-radius:50%;background:var(--brand-tint);color:var(--brand-dark);display:grid;place-items:center;font-size:var(--fs-xs);font-weight:700;flex:none}
  .step-head h2{font-family:'Fraunces',serif;font-weight:500;font-size:var(--fs-lg);margin:0;letter-spacing:-.01em}
  .step-sub{color:var(--muted);font-size:var(--fs-sm);margin:2px 0 20px 36px}

  .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .opt{display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;border:2px solid var(--line);background:#fff;border-radius:var(--r-in);padding:14px;transition:.15s;font:inherit;color:inherit;width:100%}
  .opt:hover{border-color:var(--brand);transform:translateY(-1px)}
  .opt.sel{border-color:var(--brand);background:var(--brand-tint)}
  .opt .ico{width:38px;height:38px;flex:none;color:var(--brand-dark);display:grid;place-items:center}
  /* P3-02: these inherited the 16px UA/body default rather than sitting on the scale. */
  .opt .lbl{font-weight:600;line-height:1.15;font-size:var(--fs-base)}
  .opt .lbl small{display:block;font-weight:500;color:var(--muted);font-size:var(--fs-xs);margin-top:2px}
  /* P3-07 (15 Aug): this was a 20px rounded SQUARE with a 2px border, used for a choice where
     only one option can be picked. A square reads as 'tick all that apply' and it also looked
     like an unstyled browser checkbox dropped into an otherwise designed card. Circle = radio
     = pick one, which is what this control actually does. */
  .opt .check{margin-left:auto;width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex:none;display:grid;place-items:center;color:#fff;transition:.15s}
  .opt.sel .check{background:var(--brand);border-color:var(--brand)}

  .bedrooms{margin-top:14px;border:2px solid var(--line);border-radius:var(--r-in);padding:14px;display:flex;align-items:center;gap:12px}
  .bedrooms.active{border-color:var(--brand);background:var(--brand-tint)}
  .bedrooms .ico{width:38px;height:38px;color:var(--brand-dark);display:grid;place-items:center}
  .bedrooms .lbl{font-weight:600}
  .stepper{margin-left:auto;display:flex;align-items:center;gap:14px}
  .stepper button{width:34px;height:34px;border-radius:50%;border:2px solid var(--brand);background:#fff;color:var(--brand-dark);font-size:var(--fs-lg);line-height:1;cursor:pointer;display:grid;place-items:center}
  .stepper button:hover{background:var(--brand);color:#fff}
  .stepper .val{min-width:24px;text-align:center;font-weight:700;font-size:var(--fs-md)}

  .nav-btns{display:flex;justify-content:space-between;margin-top:24px;gap:12px}
  /* P3-02: Back/Continue sit side by side and wrapped at 320px once they were put on the
     scale. nowrap plus tighter padding on the narrowest screens. */
  .btn{border:none;font:inherit;font-size:var(--fs-base);font-weight:600;white-space:nowrap;border-radius:var(--r-in);padding:13px 22px;cursor:pointer;transition:.15s}
  .btn.primary{background:var(--brand);color:#fff}
  .btn.primary:hover{background:var(--brand-dark)}
  .btn.primary:disabled{background:var(--line);color:var(--muted);cursor:not-allowed}
  .btn.ghost{background:transparent;color:var(--muted)}
  .btn.ghost:hover{color:var(--ink)}

  .result{text-align:center}
  .result .ico-badge{width:64px;height:64px;border-radius:50%;background:var(--brand-tint);color:var(--brand-dark);display:grid;place-items:center;margin:0 auto 14px}
  .result h2{font-family:'Fraunces',serif;font-weight:500;margin:0 0 4px}
  /* P1-12: recomputes live as options change, so lock the digit widths. */
.price{font-size:3rem;font-weight:800;letter-spacing:-.02em;margin:10px 0 2px;color:var(--brand-dark);font-variant-numeric:tabular-nums}
  .price small{font-size:var(--fs-base);font-weight:600;color:var(--muted)}
  .subprice{color:var(--muted);margin-bottom:18px}
  .breakdown{text-align:left;border-top:1px solid var(--line);margin-top:8px;padding-top:14px}
  .breakdown .row{display:flex;justify-content:space-between;padding:7px 0;font-size:var(--fs-sm)}
  .breakdown .row.total{border-top:1px solid var(--line);margin-top:6px;padding-top:12px;font-weight:700;font-size:var(--fs-base);font-variant-numeric:tabular-nums}
  .breakdown .muted{color:var(--muted)}
  .badge-save{display:inline-block;background:#E4EEF6;color:var(--teal-d);font-weight:600;font-size:var(--fs-xs);padding:4px 10px;border-radius:var(--r-pill);margin-top:6px}
  /* The other way to pay, on the result page. Always present, whichever one was chosen. */
  .alt-price{max-width:420px;margin:16px auto 0;background:var(--bg);border-radius:var(--r-in);
    padding:12px 16px;font-size:var(--fs-sm);line-height:1.6;color:var(--ink-body);text-align:center}
  .alt-price b{color:var(--brand-dark);font-weight:700}
  .result .followup{margin-top:22px;font-size:var(--fs-sm);color:var(--muted)}
  .result .followup a{color:var(--brand);font-weight:600}
  /* ---- discount toggles ---- */
  .toggles{display:flex;flex-direction:column;gap:10px;margin-top:14px}
  .tog-row{display:flex;align-items:center;gap:12px;border:2px solid var(--line);border-radius:var(--r-in);padding:13px 14px;cursor:pointer;transition:.15s;background:#fff}
  .tog-row:hover{border-color:var(--brand)}
  .tog-row.on{border-color:var(--brand);background:var(--brand-tint)}
  .tog-row .ico{width:34px;height:34px;flex:none;color:var(--brand-dark);display:grid;place-items:center}
  .tog-row .lbl{font-weight:600;line-height:1.2}
  .tog-row .lbl small{display:block;font-weight:500;color:var(--muted);font-size:var(--fs-xs);margin-top:2px}
  .tog-row .sw{margin-left:auto;width:42px;height:24px;border-radius:var(--r-pill);background:var(--line);position:relative;flex:none;transition:.18s}
  .tog-row .sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.18s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
  .tog-row.on .sw{background:var(--brand)}
  .tog-row.on .sw::after{transform:translateX(18px)}

  /* ---- payment term slider ---- */
  .term-val{text-align:center;margin-bottom:6px}
  .term-val .big{font-family:'Fraunces',serif;font-size:2.4rem;line-height:1;color:var(--brand-dark);font-variant-numeric:tabular-nums}
  .term-val .cap{color:var(--muted);font-size:var(--fs-sm);margin-top:6px}
  .term-slider{width:100%;-webkit-appearance:none;appearance:none;height:8px;border-radius:var(--r-pill);background:var(--line);outline:none;cursor:pointer;margin:18px 0 6px}
  .term-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:26px;width:26px;border-radius:50%;background:var(--brand);border:3px solid #fff;box-shadow:0 2px 8px rgba(33,30,26,.35);cursor:pointer}
  .term-slider::-moz-range-thumb{height:20px;width:20px;border-radius:50%;background:var(--brand);border:3px solid #fff;cursor:pointer}
  .term-ends{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--muted);font-weight:600}
  .upfront-flag{margin-top:14px;background:var(--brand-tint);color:var(--brand-dark);border-radius:var(--r-in);padding:11px 14px;font-size:var(--fs-sm);font-weight:600;text-align:center;line-height:1.5}
  /* The mirror of .upfront-flag, shown when the visitor is on a spread term. Quieter, because
     it is a suggestion rather than a confirmation, but it still carries the pounds. */
  .term-nudge{margin-top:14px;background:var(--bg);border:1px dashed var(--line);color:var(--ink-body);
    border-radius:var(--r-in);padding:11px 14px;font-size:var(--fs-sm);text-align:center;line-height:1.5}
  .term-nudge b{color:var(--brand-dark);font-weight:700}
  /* Why the 25% exists. Without this the number reads as a gimmick, and a gimmick is the last
     thing a three thousand pound trust purchase needs. */
  .term-why{margin-top:14px;font-size:var(--fs-xs);color:var(--muted);line-height:1.6;text-align:center}

  /* ---- result: discount lines ---- */
  .breakdown .row.save span:last-child{color:var(--brand-dark);font-weight:600}
  .incl{margin-top:18px;border:1px solid var(--line);border-radius:var(--r-in);padding:14px 16px;text-align:left;background:var(--bg)}
  .incl h3{font-family:'Inter';font-size:var(--fs-xs);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:8px}
  .incl ul{margin:0;padding-left:18px;font-size:var(--fs-sm);color:var(--ink-body);line-height:1.65}
  .trustrow{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
  .trustrow span{background:var(--brand-tint);color:var(--brand-dark);border-radius:var(--r-pill);padding:6px 12px;font-size:.76rem;font-weight:600}

  /* what you are actually buying, shown before the questions start */

  /* P6 (16 Aug): supporting copy under the tool. Reuses the guide article measure and rhythm so
     it reads as the same publication, and sits BELOW the calculator so it can never get between
     someone and the number they came for. */
  .calc-body{border-top:1px solid var(--line);margin-top:52px;background:var(--bg)}
  .cb-wrap{max-width:690px;margin:0 auto;padding:44px 24px 8px}
  .calc-body h2{font-family:'Fraunces',serif;font-weight:400;font-size:var(--fs-h3);
    letter-spacing:-.015em;margin:30px 0 10px}
  .calc-body h2:first-child{margin-top:0}
  .calc-body p{font-size:var(--fs-md);line-height:1.75;color:var(--ink-body);margin-bottom:16px}
  .calc-body a{color:var(--brand-dark);font-weight:600;text-decoration:underline}
  .cb-more{border-top:1px solid var(--line);padding-top:18px;margin-top:26px;
    font-size:var(--fs-base);color:var(--soft)}
  @media(max-width:560px){.cb-wrap{padding:34px 20px 4px}.calc-body h2{font-size:var(--fs-lg)}}

  .unit-strip{display:flex;align-items:center;gap:18px;background:linear-gradient(160deg,#fff,var(--brand-tint));
    border:1px solid var(--line);border-radius:var(--r-card);padding:16px 20px;margin-bottom:8px}
  .unit-strip img{width:150px;height:auto;flex:none;filter:drop-shadow(0 10px 14px rgba(30,81,116,.18))}
  .unit-strip b{display:block;font-size:var(--fs-sm);margin-bottom:3px}
  .unit-strip span{font-size:var(--fs-sm);line-height:1.55;color:var(--muted)}
  .unit-strip a{color:var(--brand-dark);font-weight:600}
  @media(max-width:560px){.unit-strip{flex-direction:column;text-align:center;gap:10px}.unit-strip img{width:180px}}

  .uplift-note{margin-top:14px;font-size:var(--fs-xs);color:var(--muted);line-height:1.55;
    background:var(--bg);border-radius:var(--r-in);padding:11px 14px}

  /* P8 (16 Aug): what this answer just earned you, said at the control that earned it.
     Tinted rather than grey, because it is the one line on the step carrying good news. */
  .earned{margin-top:16px;background:var(--brand-tint);border-radius:var(--r-in);
    padding:11px 14px;font-size:var(--fs-sm);line-height:1.6;color:var(--ink-body)}
  .earned b{color:var(--brand-dark);font-weight:700}
  /* Money named inside a toggle row, so flipping it shows what it is worth in pounds and not
     only as a rate. */
  .tog-row .lbl small .amt{color:var(--brand-dark);font-weight:700}

  @media(max-width:400px){.btn{padding-left:14px;padding-right:14px;font-size:var(--fs-sm)}}
  @media(max-width:520px){.grid{grid-template-columns:1fr}.card{padding:20px}.calc-head h1{font-size:var(--fs-h1-m)}}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
  /* Room size chips (pricing pass). Each selected room carries its own S/M/L;
     medium is pre-picked so the question never blocks anyone. */
  .sizes{margin-top:14px;border:1px solid var(--line);border-radius:var(--r-in);padding:14px 16px}
  .sizes-head{font-size:var(--fs-sm);font-weight:600;margin-bottom:6px}
  .sizes-head .sizes-sub{font-weight:400;color:var(--muted)}
  .size-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0}
  .size-row + .size-row{border-top:1px solid var(--line)}
  .size-lbl{font-size:var(--fs-sm)}
  .size-chips{display:flex;gap:6px;flex:none}
  .szchip{border:1.5px solid var(--line);background:var(--bg);border-radius:var(--r-pill);
    padding:5px 13px;font:inherit;font-size:var(--fs-xs);font-weight:600;cursor:pointer;color:var(--muted)}
  .szchip.sel{border-color:var(--brand);background:var(--brand-tint);color:var(--brand-dark)}
  @media(max-width:480px){.size-chips{gap:4px}.szchip{padding:5px 10px}}

  /* The (i) explanations, same pattern as the homepage guarantee tooltip. */
  .itip{position:relative;display:inline-block;vertical-align:-3px;margin-left:1px}
  .itip-btn{border:0;background:none;padding:0;cursor:pointer;color:var(--cool,var(--brand));display:inline-flex}
  .itip-btn svg{width:16px;height:16px}
  .itip-tip{position:absolute;bottom:calc(100% + 11px);right:-10px;
    width:min(270px,74vw);background:var(--bg);border:1px solid var(--line);border-radius:var(--r-in);
    padding:12px 14px;font-size:var(--fs-sm);line-height:1.5;color:var(--ink);text-align:left;
    box-shadow:var(--sh-float,0 10px 30px rgba(15,40,60,.14));
    opacity:0;visibility:hidden;transition:opacity .15s ease;z-index:6;pointer-events:none}
  .itip-tip:after{content:"";position:absolute;top:100%;right:11px;
    border:7px solid transparent;border-top-color:var(--line)}
  .itip-tip:before{content:"";position:absolute;top:calc(100% - 1.5px);right:11px;
    border:7px solid transparent;border-top-color:var(--bg);z-index:1}
  .itip:hover .itip-tip,.itip-btn:focus-visible + .itip-tip,.itip.open .itip-tip{opacity:1;visibility:visible}

  .unitline{margin:16px 0 2px;font-size:var(--fs-sm);color:var(--muted)}