/* John Antle payment calculator — colours/fonts from mortgage-alberta.com v2 */
:root{
  --navy:#0f2a43; --teal:#0d7c74; --teal-dark:#09605a; --gold:#f2b632; --pineapple:#036fa0;
  --ink:#1d2731; --muted:#4f5d6b; --line:#e1e8ee; --soft:#f5f8fa; --radius:14px; --max:1120px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --warn:#7a3b05; --warn-bg:#fff4ea; --warn-line:#f2c79f;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--font);font-size:1.0625rem;line-height:1.7;color:var(--ink);background:#fff;padding-bottom:72px}
@media (min-width:700px){body{padding-bottom:0}}
img,svg{max-width:100%;height:auto}
a{color:var(--teal-dark);text-underline-offset:3px}
a:hover{color:var(--navy)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
h1,h2,h3{line-height:1.2;color:var(--navy);margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(1.7rem,5.2vw,2.55rem);font-weight:800}
h2{font-size:clamp(1.35rem,3vw,1.75rem);font-weight:750}
h3{font-size:1.12rem}
p,ul,ol{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.25rem}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--navy);padding:.6rem 1rem;z-index:100;font-weight:700}
.skip:focus{left:0}
.sr-only,.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.icon{width:18px;height:18px;flex:none}

/* Header */
.hd{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.hd-in{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem .75rem;padding:.6rem 0}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--navy);margin-right:auto;min-width:0}
.brand svg{width:36px;height:36px;flex:none}
.brand-text{display:flex;flex-direction:column;line-height:1.2}
.brand-name{font-weight:800;font-size:1.05rem}
.brand-sub{font-size:.76rem;color:var(--muted);font-weight:600}
.btn-call{display:inline-flex;align-items:center;gap:.4rem;background:var(--navy);color:#fff;min-height:44px;padding:.5rem .9rem;border-radius:999px;text-decoration:none;font-weight:700;border:2px solid var(--navy)}
.btn-call:hover{background:var(--teal-dark);color:#fff;border-color:var(--teal-dark)}
.call-long{display:none}
@media (min-width:720px){
  .brand svg{width:40px;height:40px}
  .call-long{display:inline}.call-short{display:none}
}

/* Buttons */
.btns{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.15rem 0 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:50px;padding:.75rem 1.35rem;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid transparent;font-size:1rem;line-height:1.2}
.btn-primary{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.btn-primary:hover{background:#ffc94d;color:var(--navy);border-color:#ffc94d}
.btn-teal{background:var(--teal-dark);color:#fff;border-color:var(--teal-dark)}
.btn-teal:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-ghost{border-color:var(--navy);color:var(--navy);background:#fff}
.btn-ghost:hover{background:var(--soft);color:var(--navy)}
.btn-block{width:100%}

/* Hero / answer-first */
.hero{background:linear-gradient(180deg,#eef5f8 0%,#fff 100%);padding:1.75rem 0 1.25rem}
.eyebrow{display:inline-block;background:#e3f1ef;color:var(--teal-dark);font-weight:700;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;padding:.3rem .7rem;border-radius:999px;margin:0 0 .8rem}
.lead-ans{font-size:1.08rem;max-width:46rem;color:var(--ink);background:#fff;border:1px solid var(--line);border-left:5px solid var(--gold);border-radius:var(--radius);padding:1rem 1.15rem;box-shadow:0 8px 24px rgba(15,42,67,.06)}
.lead-ans .kicker{display:block;font-size:.78rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--teal-dark);margin:0 0 .35rem}
.lead-ans p{margin:0 0 .6rem}
.lead-ans .src{margin:0;font-size:.86rem;color:var(--muted)}

/* Calculator layout */
.calc-sec{padding:1.25rem 0 2.5rem}
.calc-grid{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media (min-width:900px){
  .calc-grid{grid-template-columns:1.05fr .95fr;align-items:start;gap:1.5rem}
  .results{position:sticky;top:5.25rem}
}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem 1.2rem;box-shadow:0 8px 24px rgba(15,42,67,.07)}
.card h2{margin-top:0;font-size:1.25rem}

.field{margin:0 0 1rem}
.field label,.field .lbl{display:block;font-weight:700;color:var(--navy);margin:0 0 .35rem}
.label-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin:0 0 .35rem}
.label-row label{margin:0}
.field input[type=number],.field input[type=text],.field select{
  width:100%;font:inherit;padding:.7rem .85rem;border:1px solid #c5d2db;border-radius:10px;background:#fff;color:var(--ink);min-height:48px
}
.field input:focus,.field select:focus{outline:3px solid var(--gold);outline-offset:1px;border-color:var(--teal)}
.input-affix{display:flex;align-items:stretch;border:1px solid #c5d2db;border-radius:10px;background:#fff;overflow:hidden}
.input-affix:focus-within{outline:3px solid var(--gold);outline-offset:1px;border-color:var(--teal)}
.input-affix .pre,.input-affix .down-suffix{position:static;transform:none;display:flex;align-items:center;padding:0 .75rem;font-weight:700;color:var(--muted);background:var(--soft);border-right:1px solid var(--line);pointer-events:none}
.input-affix input{border:0!important;border-radius:0;padding-left:.85rem;min-width:0;flex:1;outline:none}
.input-affix input:focus{outline:none}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.hint{font-size:.86rem;color:var(--muted);margin:.4rem 0 0}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--soft)}
.seg button{font:inherit;font-weight:700;font-size:.88rem;border:0;background:transparent;color:var(--muted);padding:.35rem .75rem;min-height:36px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--navy);color:#fff}
.chk{display:flex;gap:.55rem;align-items:flex-start;font-weight:600;color:var(--ink);margin:0}
.chk input{margin-top:.3rem;width:1.1rem;height:1.1rem;accent-color:var(--teal-dark)}

.big{background:var(--navy);color:#fff;border-radius:12px;padding:1.05rem 1.15rem;margin:0 0 1rem}
.big p{margin:0;color:#d7e3ee}
.big .v{font-size:clamp(1.9rem,4vw,2.4rem);font-weight:800;line-height:1.15;color:#fff}
.results.is-off .big{background:#6b7c86}
.results dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:.55rem 1rem;font-size:.95rem}
.results dt{color:var(--muted)}
.results dd{margin:0;font-weight:800;text-align:right;color:var(--navy)}
.notes{background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:10px;padding:.7rem 1rem .7rem 1.5rem;margin:0 0 1rem;color:var(--warn);font-size:.93rem}
.notes li{margin:.2rem 0}
.est{font-size:.86rem;color:var(--muted);border-top:1px solid var(--line);margin:1rem 0 0;padding-top:.85rem}
.est p{margin:0 0 .5rem}
.est p:last-child{margin:0}

/* Supporting sections */
.sec{padding:2.25rem 0}
.sec-soft{background:var(--soft)}
.prose{max-width:46rem}
.prose h2{margin-top:0}
.faq{max-width:46rem}
.faq details{border-bottom:1px solid var(--line);background:#fff}
.faq details:first-of-type{border-top:1px solid var(--line);border-radius:var(--radius) var(--radius) 0 0}
.faq details:last-of-type{border-radius:0 0 var(--radius) var(--radius)}
.faq summary{cursor:pointer;padding:1rem 2.2rem 1rem 0;font-weight:700;color:var(--navy);list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.25rem;top:.85rem;font-size:1.4rem;line-height:1;color:var(--teal-dark)}
.faq details[open] summary::after{content:"\2013"}
.faq .ans{padding:0 0 .9rem;color:var(--ink)}

/* CTA */
.cta{background:var(--navy);color:#e8f0f6;padding:2.5rem 0}
.cta h2{color:#fff}
.cta p,.cta li{color:#d7e3ee}
.cta a{color:#fff}
.cta .btn-ghost{border-color:#fff;color:#fff;background:transparent}
.cta .btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff}
.cta-grid{display:grid;gap:1.4rem;align-items:center}
@media (min-width:760px){.cta-grid{grid-template-columns:180px 1fr;gap:2rem}}
.couple{margin:0;text-align:center}
.couple img{display:block;width:100%;max-width:220px;margin:0 auto;border-radius:16px;background:linear-gradient(180deg,#1a3f5c,#0d7c74 120%);object-fit:contain;object-position:center bottom}
.couple figcaption{font-size:.82rem;color:#c5d4e0;margin:.45rem 0 0}

/* Footer */
.ft{background:#0c2236;color:#c5d4e0;font-size:.9rem;padding:2.25rem 0 2rem}
.ft a{color:#fff}
.ft h2,.ft-name{color:#fff;font-size:1.05rem;margin:0 0 .4rem}
.ft-logo{width:180px;height:auto;margin:1rem 0 .75rem;background:#fff;border-radius:8px;padding:.4rem .6rem}
.disc{border-top:1px solid #24405a;margin-top:1.25rem;padding-top:1rem;font-size:.82rem;color:#a9bfd0}
.disc p{margin:0 0 .6rem}
.flinks{margin:0 0 .6rem}

/* Mobile dock */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:.5rem;padding:.5rem .7rem calc(.5rem + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 14px rgba(15,42,67,.1)}
.dock .btn{flex:1;min-height:46px;padding:.55rem .6rem;font-size:.95rem}
@media (min-width:700px){.dock{display:none}}

@media print{
  .hd{position:static}
  .dock,.btn-call{display:none}
  body{padding:0;background:#fff}
  .card,.lead-ans{box-shadow:none}
}

/* RECA identification and results disclaimer */
.lic-bar{background:var(--navy);color:#d7e3ee;font-size:.8rem;line-height:1.45;padding:.45rem 0;font-weight:600}
.lic-bar strong{color:#fff;font-weight:700}
.reca-disc{background:#fff8e8;border:2px solid var(--gold);border-radius:12px;padding:1rem 1.1rem;margin:1rem 0 0;font-size:.92rem;color:var(--ink)}
.reca-disc p{margin:0 0 .55rem}
.reca-disc p:last-child{margin:0}
.reca-disc strong{color:var(--navy)}