/* =========================================================================
   Zen Accountants — Property Calculators (bond repayment, affordability,
   bond transfer). Scoped styles. Reuses the homepage design tokens
   (--forest, --sage, --cream, Fraunces + Plus Jakarta Sans). Everything is
   prefixed .zn-calc and lives inside <main class="zn-calc"> so nothing leaks
   to the rest of the site.
   ========================================================================= */

.zn-calc{overflow:hidden}
.zn-calc .zn-calc-narrow{max-width:900px}

/* ---- Hero ---- */
.zn-calc-hero{background:linear-gradient(180deg,var(--cream-deep) 0%,var(--cream) 100%);padding:70px 0 34px;text-align:center}
.zn-calc-hero .eyebrow{justify-content:center}
.zn-calc-hero h1{margin-bottom:18px}
.zn-calc-lede{font-size:1.15rem;max-width:660px;margin:0 auto 12px;color:var(--grey-warm)}
.zn-calc-updated{font-size:.85rem;color:var(--sage-deep);font-weight:600;margin-top:14px}

/* ---- Tabs ---- */
.zn-calc-tabs-wrap{position:sticky;top:0;z-index:20;background:rgba(253,254,251,.92);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--grey-line)}
.zn-calc-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:14px 0}
.zn-calc-tab{display:inline-flex;align-items:center;gap:9px;border:1.5px solid var(--grey-line);background:var(--white);color:var(--forest);border-radius:var(--radius-full);padding:11px 22px;font-family:var(--sans);font-weight:600;font-size:.96rem;cursor:pointer;transition:all .25s var(--ease)}
.zn-calc-tab svg{width:18px;height:18px;flex:none;color:var(--sage-deep);transition:color .25s}
.zn-calc-tab:hover{border-color:var(--sage-deep);transform:translateY(-1px)}
.zn-calc-tab.active{background:var(--forest);border-color:var(--forest);color:var(--cream);box-shadow:0 8px 22px rgba(27,114,106,.22)}
.zn-calc-tab.active svg{color:var(--sage)}

/* ---- Panels ---- */
.zn-calc-section{padding:36px 0 70px}
.zn-calc-panel{display:none}
.zn-calc-panel.active{display:block;animation:zn-calc-fade .4s var(--ease)}
@keyframes zn-calc-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.zn-calc-intro{text-align:center;max-width:680px;margin:0 auto 30px}
.zn-calc-intro h2{font-size:1.9rem;margin-bottom:10px}
.zn-calc-intro p{color:var(--grey-warm);font-size:1.02rem}

/* ---- Tool shell: two columns (inputs | results) ---- */
.zn-calc-tool{background:var(--white);border:1px solid var(--grey-line);border-radius:var(--radius-lg);box-shadow:0 24px 60px rgba(27,114,106,.10);overflow:hidden;display:grid;grid-template-columns:1fr 1fr}
.zn-calc-inputs{padding:34px 36px}
.zn-calc-inputs h3{font-family:var(--serif);font-size:1.35rem;color:var(--forest);margin-bottom:4px}
.zn-calc-inputs .zn-calc-sub{color:var(--grey-warm);font-size:.92rem;margin-bottom:22px}

/* ---- Fields ---- */
.zn-calc-field{margin-bottom:20px}
.zn-calc-field label{display:block;font-weight:600;color:var(--forest);font-size:.95rem;margin-bottom:8px}
.zn-calc-field label .zn-calc-q{color:var(--grey-soft);font-weight:500;font-size:.82rem}
.zn-calc-money,.zn-calc-pct{position:relative}
.zn-calc-money .zn-calc-affix,.zn-calc-pct .zn-calc-affix{position:absolute;top:50%;transform:translateY(-50%);color:var(--grey-warm);font-weight:600;font-size:1.05rem}
.zn-calc-money .zn-calc-affix{left:18px}
.zn-calc-pct .zn-calc-affix{right:18px}
.zn-calc-input{width:100%;font-family:var(--sans);font-weight:600;font-size:1.1rem;color:var(--forest);border:1.5px solid var(--grey-line);border-radius:var(--radius-md);background:var(--cream-deep);outline:none;transition:all .22s;padding:15px 18px}
.zn-calc-money .zn-calc-input{padding-left:40px}
.zn-calc-pct .zn-calc-input{padding-right:42px}
.zn-calc-input:focus{border-color:var(--sage-deep);background:var(--white);box-shadow:0 0 0 3px rgba(163,210,192,.32)}
.zn-calc-input::placeholder{color:var(--grey-soft);font-weight:500}

/* ---- Range sliders ---- */
.zn-calc-slider-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.zn-calc-slider-val{font-weight:700;color:var(--sage-deep)}
input[type=range].zn-calc-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:var(--sage-mist);outline:none;margin:6px 0}
input[type=range].zn-calc-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--forest);cursor:pointer;border:3px solid var(--white);box-shadow:0 2px 8px rgba(27,114,106,.35);transition:transform .15s}
input[type=range].zn-calc-range::-webkit-slider-thumb:hover{transform:scale(1.12)}
input[type=range].zn-calc-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--forest);cursor:pointer;border:3px solid var(--white);box-shadow:0 2px 8px rgba(27,114,106,.35)}
.zn-calc-scale{display:flex;justify-content:space-between;font-size:.76rem;color:var(--grey-soft);margin-top:2px}

/* ---- Segmented control (term chips, buyer type) ---- */
.zn-calc-seg{display:flex;gap:8px;flex-wrap:wrap}
.zn-calc-seg button{flex:1;min-width:64px;border:1.5px solid var(--grey-line);background:var(--cream-deep);color:var(--forest);border-radius:var(--radius-md);padding:11px 10px;font-family:var(--sans);font-weight:600;font-size:.92rem;cursor:pointer;transition:all .2s}
.zn-calc-seg button:hover{border-color:var(--sage-deep)}
.zn-calc-seg button.active{background:var(--sage);border-color:var(--sage-deep);color:var(--ink)}

.zn-calc-hint{font-size:.82rem;color:var(--grey-warm);margin-top:8px;line-height:1.5}

/* ---- Results panel ---- */
.zn-calc-out{background:var(--forest);color:var(--cream);padding:34px 36px;display:flex;flex-direction:column}
.zn-calc-out-eyebrow{font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sage);margin-bottom:10px}
.zn-calc-headline{font-family:var(--serif);font-weight:500;line-height:1;letter-spacing:-.5px;font-size:3.1rem;color:var(--white);margin-bottom:4px}
.zn-calc-headline .zn-calc-r{font-size:1.6rem;vertical-align:top;color:var(--sage);margin-right:4px;font-family:var(--sans);font-weight:600}
.zn-calc-headline-sub{color:rgba(253,254,251,.75);font-size:.95rem;margin-bottom:24px}

.zn-calc-rows{display:grid;gap:2px;margin-top:auto}
.zn-calc-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;border-top:1px solid rgba(163,210,192,.22)}
.zn-calc-row:first-child{border-top:none}
.zn-calc-row .zn-calc-k{color:rgba(253,254,251,.8);font-size:.94rem}
.zn-calc-row .zn-calc-k small{display:block;color:rgba(253,254,251,.5);font-size:.78rem;margin-top:2px}
.zn-calc-row .zn-calc-v{font-weight:700;font-size:1.06rem;color:var(--white);white-space:nowrap}
.zn-calc-row.zn-calc-row-total .zn-calc-k{color:var(--sage);font-weight:600}
.zn-calc-row.zn-calc-row-total .zn-calc-v{color:var(--sage);font-size:1.2rem}

/* Verdict badge (affordability) */
.zn-calc-badge{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:7px 16px;border-radius:var(--radius-full);font-weight:700;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:16px}
.zn-calc-badge-good{background:var(--sage);color:var(--ink)}
.zn-calc-badge-tight{background:#f3ead6;color:#8a6d2f}
.zn-calc-badge-over{background:#f6d9d2;color:#8f3a24}

/* Mini bar visualisation */
.zn-calc-bar{height:12px;border-radius:999px;background:rgba(253,254,251,.18);overflow:hidden;display:flex;margin:6px 0 4px}
.zn-calc-bar span{height:100%;display:block}
.zn-calc-bar .seg-principal{background:var(--sage)}
.zn-calc-bar .seg-interest{background:var(--gold)}
.zn-calc-legend{display:flex;gap:18px;font-size:.8rem;color:rgba(253,254,251,.8);margin-top:8px}
.zn-calc-legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:middle}
.zn-calc-legend .dot-principal{background:var(--sage)}
.zn-calc-legend .dot-interest{background:var(--gold)}

.zn-calc-cta-btn{margin-top:26px}
.zn-calc-out .btn{width:100%;justify-content:center}

/* ---- Assumptions / disclaimer ---- */
.zn-calc-assump{font-size:.82rem;color:var(--grey-warm);background:var(--cream-deep);border-left:3px solid var(--gold);padding:14px 18px;border-radius:8px;margin-top:22px;line-height:1.6}
.zn-calc-assump strong{color:var(--forest)}

/* ---- Info strip below the tool ---- */
.zn-calc-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.zn-calc-note{background:var(--white);border:1px solid var(--grey-line);border-radius:var(--radius-md);padding:22px 22px}
.zn-calc-note h4{font-family:var(--serif);font-size:1.1rem;color:var(--forest);margin-bottom:6px}
.zn-calc-note p{font-size:.9rem;color:var(--grey-warm);line-height:1.6}

/* ---- Closing CTA band ---- */
.zn-calc-cta{background:var(--ink);color:var(--cream);text-align:center;padding:78px 0}
.zn-calc-cta .eyebrow{justify-content:center;color:var(--sage)}
.zn-calc-cta h2{color:var(--cream);max-width:20ch;margin:0 auto 16px}
.zn-calc-cta p{color:rgba(253,254,251,.85);max-width:600px;margin:0 auto 28px;font-size:1.06rem}
.zn-calc-cta-note{margin-top:18px;font-size:.9rem;color:var(--sage)}

/* ---- Responsive ---- */
@media(max-width:860px){
  .zn-calc-tool{grid-template-columns:1fr}
  .zn-calc-out{order:-1}
  .zn-calc-notes{grid-template-columns:1fr}
  .zn-calc-headline{font-size:2.6rem}
}
@media(max-width:520px){
  .zn-calc-inputs,.zn-calc-out{padding:26px 22px}
  .zn-calc-tab{padding:10px 16px;font-size:.9rem}
}

/* ===== VAT REGISTRATION CHECKER (4th tab) ===== */
.zn-vatchk{background:var(--white);border:1px solid var(--grey-line);border-radius:var(--radius-lg);box-shadow:0 24px 60px rgba(27,114,106,.10);overflow:hidden;max-width:680px;margin:0 auto}
.zn-vatchk-head{background:var(--forest);color:var(--cream);padding:26px 32px}
.zn-vatchk-head h3{font-family:var(--serif);font-size:1.4rem;color:var(--cream);margin:0}
.zn-vatchk-progress{display:flex;gap:6px;margin-top:16px}
.zn-vatchk-progress span{height:4px;flex:1;background:rgba(253,254,251,.25);border-radius:2px;transition:background .3s}
.zn-vatchk-progress span.done{background:var(--sage)}
.zn-vatchk-body{padding:32px}
.zn-vatchk-q{display:none}
.zn-vatchk-q.active{display:block;animation:zn-calc-fade .4s var(--ease)}
.zn-vatchk-step{font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sage-deep);margin-bottom:8px}
.zn-vatchk-title{font-family:var(--serif);font-size:1.4rem;color:var(--forest);margin-bottom:6px;line-height:1.15}
.zn-vatchk-help{font-size:.92rem;color:var(--grey-warm);margin-bottom:22px}
.zn-vatchk-opts{display:grid;gap:12px}
.zn-vatchk-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--cream-deep);border:1.5px solid var(--grey-line);border-radius:var(--radius-md);padding:17px 20px;cursor:pointer;transition:all .25s var(--ease);font-family:var(--sans);font-size:1rem;color:var(--forest)}
.zn-vatchk-opt:hover{border-color:var(--sage-deep);background:var(--white);transform:translateX(2px)}
.zn-vatchk-opt.selected{border-color:var(--sage-deep);background:var(--white);box-shadow:0 0 0 3px rgba(163,210,192,.35)}
.zn-vatchk-opt-main{font-weight:600}
.zn-vatchk-opt-sub{display:block;font-size:.82rem;color:var(--grey-warm);margin-top:2px;font-weight:400}
.zn-vatchk-tick{margin-left:auto;width:22px;height:22px;border-radius:50%;border:2px solid var(--grey-line);display:flex;align-items:center;justify-content:center;flex:none;transition:all .25s;color:var(--white)}
.zn-vatchk-opt.selected .zn-vatchk-tick{background:var(--sage-deep);border-color:var(--sage-deep)}
.zn-vatchk-tick svg{opacity:0;transition:opacity .2s}
.zn-vatchk-opt.selected .zn-vatchk-tick svg{opacity:1}
.zn-vatchk-nav{display:flex;justify-content:space-between;align-items:center;margin-top:26px;padding-top:22px;border-top:1px solid var(--grey-line)}
.zn-vatchk-nav .btn-ghost{background:transparent;border:1.5px solid var(--grey-line);color:var(--forest)}
.zn-vatchk-nav .btn-ghost:hover{border-color:var(--forest)}
.zn-vatchk-nav .btn-ghost[disabled]{opacity:0;pointer-events:none}
/* Result */
.zn-vatchk-result{display:none}
.zn-vatchk-result.active{display:block;animation:zn-calc-fade .5s var(--ease)}
.zn-vatchk-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:var(--radius-full);font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px}
.zn-vatchk-badge-must{background:var(--forest);color:var(--cream)}
.zn-vatchk-badge-yes,.zn-vatchk-badge-stay{background:var(--sage);color:var(--ink)}
.zn-vatchk-badge-no{background:var(--cream-deep);color:var(--forest-soft);border:1.5px solid var(--grey-line)}
.zn-vatchk-badge-consider{background:#f3ead6;color:#8a6d2f;border:1.5px solid var(--gold)}
.zn-vatchk-verdict{font-family:var(--serif);font-size:1.7rem;margin-bottom:14px;line-height:1.14;color:var(--forest)}
.zn-vatchk-why{background:var(--cream-deep);border-radius:var(--radius-md);padding:22px 24px;margin:20px 0}
.zn-vatchk-why h4{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sage-deep);margin-bottom:12px;font-family:var(--sans);font-weight:700}
.zn-vatchk-why ul{list-style:none;display:grid;gap:12px;margin:0;padding:0}
.zn-vatchk-why li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;color:var(--forest-soft)}
.zn-vatchk-why li svg{flex:none;margin-top:3px;color:var(--sage-deep)}
.zn-vatchk-next{background:var(--forest);color:var(--cream);border-radius:var(--radius-md);padding:24px 26px;margin-top:22px}
.zn-vatchk-next h4{color:var(--cream);font-family:var(--serif);font-size:1.2rem;margin-bottom:8px}
.zn-vatchk-next p{color:rgba(253,254,251,.85);font-size:.94rem;margin-bottom:18px}
.zn-vatchk-next-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.zn-vatchk-restart{background:none;border:none;color:var(--sage);font-family:var(--sans);font-weight:600;font-size:.9rem;cursor:pointer;text-decoration:underline;padding:0}

/* ===== VAT AMOUNT CALCULATOR (add / remove 15%) ===== */
.zn-vatamt-wrap{max-width:680px;margin:56px auto 0}
.zn-vatamt{background:var(--white);border:1px solid var(--grey-line);border-radius:var(--radius-lg);box-shadow:0 24px 60px rgba(27,114,106,.10);overflow:hidden;max-width:520px;margin:22px auto 0}
.zn-vatamt-toggle{display:flex;background:var(--cream-deep);padding:6px;gap:6px;border-bottom:1px solid var(--grey-line)}
.zn-vatamt-tab{flex:1;padding:12px 16px;border:none;background:transparent;font-family:var(--sans);font-weight:600;font-size:.95rem;color:var(--grey-warm);border-radius:var(--radius-md);cursor:pointer;transition:all .25s var(--ease)}
.zn-vatamt-tab.active{background:var(--forest);color:var(--cream)}
.zn-vatamt-body{padding:30px 32px}
.zn-vatamt-label{display:block;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sage-deep);margin-bottom:10px}
.zn-vatamt-results{margin-top:24px;border-top:1px solid var(--grey-line);padding-top:6px}
.zn-vatamt-row{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid var(--grey-line);font-size:.95rem;color:var(--forest-soft)}
.zn-vatamt-val{font-family:var(--serif);font-size:1.12rem;color:var(--forest);font-weight:500}
.zn-vatamt-row-vat .zn-vatamt-val{color:var(--sage-deep)}
.zn-vatamt-row-total{border-bottom:none;border-top:2px solid var(--forest);margin-top:4px;padding-top:15px}
.zn-vatamt-row-total{color:var(--forest);font-weight:700}
.zn-vatamt-row-total .zn-vatamt-val{font-size:1.5rem;font-weight:600}

@media(max-width:600px){
  .zn-vatchk-body{padding:24px 20px}
  .zn-vatamt-body{padding:24px 22px}
}