/* ───────── service pages (first: מחזור משכנתא). Loaded after site.css + legal.css (shared shell). ───────── */
.svc{background:var(--sand)}
.svc .wrap{max-width:1240px}
.svc p{text-wrap:pretty}
.nowrap{white-space:nowrap}

/* 1 · hero */
.svc-hero{position:relative;overflow:hidden;isolation:isolate;background:var(--deep);color:var(--cream);padding-top:72px}
.svc-hero::after{content:"";position:absolute;inset:0;background:var(--noise);pointer-events:none;z-index:-1;opacity:.8}
.svc-k{position:absolute;z-index:-1;left:max(0px,calc(50% - 620px));bottom:0;width:min(46vw,560px);aspect-ratio:1;background:linear-gradient(160deg,rgba(235,196,107,.16),rgba(235,196,107,.03) 70%);clip-path:polygon(0 100%,0 38%,62% 100%)}
.svc-k::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--gold),var(--gold-deep));clip-path:polygon(0 38%,0 47%,53% 100%,62% 100%)}
.svc-hero-in{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.75fr);gap:clamp(24px,4vw,64px);align-items:end}
.svc-hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:clamp(40px,5vw,72px) 0 clamp(56px,6vw,88px)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:14px;color:var(--cream-70)}
.crumbs li+li::before{content:"‹";margin-inline-end:10px;color:var(--gold)}
.crumbs a{color:var(--cream-70);text-decoration:none;display:inline-block;padding:6px 0}
.crumbs [aria-current]{color:var(--cream)}
@media (hover:hover) and (pointer:fine){ .crumbs a:hover{color:var(--gold);text-decoration:underline;text-underline-offset:4px} }
.svc-hero h1{font-size:clamp(36px,4.3vw,64px);line-height:1.04;font-weight:800;letter-spacing:-.02em;max-width:17ch;text-wrap:balance}
.svc-hero .def{font-size:clamp(19px,1.55vw,22px);line-height:1.6;color:var(--cream);max-width:54ch;font-weight:300}
.personal{display:flex;flex-direction:column;gap:10px;padding-inline-start:20px;box-shadow:inset -2px 0 0 var(--gold-deep);max-width:56ch}
.personal p{font-size:17px;line-height:1.65;color:var(--cream-70)}
.svc-hero .start{font-size:18px;color:var(--cream);margin-top:4px}
.svc-hero .btn{margin-top:4px}
.svc-hero-fig{align-self:end;justify-self:center;width:100%;max-width:400px}
.svc-hero-fig img{width:100%;height:auto;filter:drop-shadow(0 24px 48px rgba(0,0,0,.4))}
.anim .svc-hero h1{animation:fadeUp .7s var(--ease-out) both .05s}
.anim .svc-hero-fig img{animation:figIn .9s var(--ease-out) both .1s;transform-origin:50% 100%}

/* shared section rhythm */
.sv{position:relative;padding:clamp(64px,8vw,112px) 0}
.sv h2{font-size:clamp(30px,3.3vw,48px);line-height:1.08;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.sv h3{font-size:21px;line-height:1.3;font-weight:800}
.sv p{font-size:18px;line-height:1.7;color:var(--ink-2)}
.sv p+p{margin-top:14px}
.sv-head{display:flex;flex-direction:column;gap:16px;max-width:780px;margin-bottom:clamp(36px,4.5vw,56px)}
.sv-head p{max-width:62ch}

/* 2 · before refinancing */
.sv-split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.sv-split h2{position:sticky;top:110px}
.prose{max-width:62ch}
.prose p{color:var(--ink)}
.prose .lift{margin:30px 0;font-size:clamp(23px,2.1vw,29px);line-height:1.3;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.prose .lift::before{content:"";display:block;width:44px;height:2px;margin-bottom:16px;background:var(--gold-deep)}

/* 3 · when to check */
.sv-when{background:var(--paper)}
.sv-when .tool{font-size:clamp(22px,2vw,28px);font-weight:300;color:var(--gold-ink);line-height:1.25}
.when-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.when{position:relative;padding:30px 32px 32px;background:var(--sand);clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
.when::before{content:"";position:absolute;top:0;right:32px;width:36px;height:2px;background:var(--gold-deep)}
.when h4{font-size:20px;line-height:1.3;font-weight:800;margin:0 0 10px}
.when p{font-size:17px}
.not-always{margin-top:clamp(40px,5vw,64px);max-width:860px;padding:32px 36px;background:var(--blush);box-shadow:inset -3px 0 0 var(--navy)}
.not-always h3{margin-bottom:12px}
.not-always p{color:var(--ink)}

/* 4 · case */
.sv-case{background:var(--navy)}
.case{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"h ." "a s" "b s";column-gap:clamp(40px,6vw,96px);align-items:start}
.case h2{grid-area:h;color:var(--cream);max-width:20ch;margin-bottom:clamp(28px,3.5vw,44px)}
.case-a{grid-area:a}.case-b{grid-area:b;margin-top:14px}
.case-sum{grid-area:s;position:sticky;top:110px}
.sv-case p{color:var(--cream-70)}
.case .turn{margin-top:22px;font-size:clamp(22px,2vw,27px);line-height:1.3;font-weight:700;color:var(--cream)}
.case .case-note{margin-top:28px;font-size:15px;color:var(--cream-70)}
.case-sum{padding:32px 32px 28px;background:var(--paper);color:var(--ink);clip-path:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%)}
.case-sum ol{position:relative;display:flex;flex-direction:column;gap:18px;padding-inline-start:24px}
.case-sum ol::before{content:"";position:absolute;top:10px;bottom:-30px;right:4px;width:1px;background:var(--gold-deep)}
.case-sum li{position:relative;font-size:17px;line-height:1.55;color:var(--ink)}
.case-sum li::before{content:"";position:absolute;top:8px;right:-24px;width:9px;height:9px;background:var(--gold-deep)}
.case-sum .k{display:block;font-size:14px;font-weight:700;color:var(--gold-ink)}
.case-sum .after{color:var(--ink-2)}
.case-sum .verdict{position:relative;margin-top:22px;padding:16px 20px;background:var(--navy);color:var(--gold);font-size:clamp(20px,1.7vw,23px);line-height:1.3}
.case-sum .verdict b{font-weight:800}

/* 5 · costs */
.costs{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.25fr) minmax(0,.8fr)}
.cost{padding-inline:clamp(20px,2.4vw,36px)}
.cost:first-child{padding-inline-start:0}
.cost:last-child{padding-inline-end:0}
.cost+.cost{box-shadow:inset -1px 0 0 var(--line)}
.cost h3{margin-bottom:14px}
.cost h3::before{content:"";display:block;width:36px;height:2px;margin-bottom:14px;background:var(--gold-deep)}
.cost p{font-size:17px}
.src{display:inline-block;margin-inline-start:2px;padding:0 6px;font-size:13px;line-height:22px;font-weight:600;color:var(--gold-ink);text-decoration:none;box-shadow:inset 0 0 0 1px rgba(128,98,29,.4);vertical-align:2px}
@media (hover:hover) and (pointer:fine){ .src:hover{background:var(--gold-ink);color:var(--paper)} }

/* 6 · banks + partial */
.sv-banks{background:var(--paper)}
.banks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bank{padding:32px clamp(24px,3vw,48px) 36px}
.bank:first-child{padding-inline-start:0}
.bank+.bank{box-shadow:inset -1px 0 0 var(--line);padding-inline-end:0}
.bank h3{margin-bottom:12px}
.bank p{font-size:17px}
.partial{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,80px);align-items:center;margin-top:clamp(48px,6vw,80px)}
.partial-txt h3{font-size:clamp(23px,2vw,28px);margin-bottom:14px}
.tracks{margin:0;padding:32px 34px 26px;background:var(--sand)}
.tracks-t b{font-size:20px;font-weight:800;color:var(--ink)}
.tracks .tracks-d{margin-top:6px;font-size:16px}
.tr-list{display:flex;flex-direction:column;gap:14px;margin:26px 0 22px}
.tr{display:grid;grid-template-columns:76px minmax(0,1fr) 116px;align-items:center;gap:14px;font-size:15px;color:var(--ink-2)}
.tr-name{font-weight:700;color:var(--ink)}
.tr-bar{height:16px;background:#d8c8bf}
.tr.on .tr-bar{background:linear-gradient(90deg,var(--gold-deep),var(--gold));box-shadow:0 0 0 4px rgba(235,196,107,.22)}
.tr.on .tr-state{font-weight:700;color:var(--gold-ink)}
.tracks figcaption{font-size:14px;line-height:1.55;color:var(--ink-2);padding-top:14px;border-top:1px solid var(--line)}

/* 7 · steps */
.steps{display:flex;flex-direction:column;max-width:920px}
.step{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);gap:clamp(16px,2.5vw,32px);padding-bottom:clamp(36px,4.5vw,52px)}
.step:not(:last-child)::before{content:"";position:absolute;top:66px;bottom:10px;right:20px;width:1px;background:var(--gold-deep);opacity:.55}
.step-n{font-size:clamp(48px,5vw,64px);line-height:1;font-weight:250;color:var(--gold-ink);font-variant-numeric:lining-nums}
.step-b{max-width:64ch;padding-top:8px}
.step-b h3{font-size:clamp(21px,1.9vw,25px);margin-bottom:12px}
.step-b p{font-size:17px}
.step-b .free{margin-top:16px;color:var(--ink)}
.fold{border-top:1px solid var(--line)}
.fold:last-child{border-bottom:1px solid var(--line)}
.fold summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;padding:12px 0;cursor:pointer;list-style:none}
.fold summary::-webkit-details-marker{display:none}
.fold summary h3{font-size:19px;line-height:1.35;font-weight:700}
.fold summary i{position:relative;flex:none;width:32px;height:32px;border:1.5px solid var(--gold-deep)}
.fold summary i::before,.fold summary i::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:var(--gold-ink);transition:transform .3s var(--ease-out)}
.fold summary i::after{transform:rotate(90deg)}
.fold[open] summary i::after{transform:rotate(0)}
.fold summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@media (hover:hover) and (pointer:fine){ .fold summary:hover h3{color:var(--gold-ink)} }
.fold-b{padding:0 0 24px;max-width:68ch}
.fold-b p{font-size:17px}
.anim .fold[open] .fold-b{animation:fadeUp .4s var(--ease-out) both}
.docs{max-width:920px;margin-top:8px;border-bottom:1px solid var(--line)}
.steps-cta{margin-top:clamp(36px,4.5vw,52px)}
.btn-navy{background:var(--navy);color:var(--cream)}
@media (hover:hover) and (pointer:fine){ .btn-navy:hover{background:var(--gold);color:var(--navy)} }

/* 8 · lifetime checks */
.sv-life{background:var(--blush);padding:clamp(56px,6.5vw,88px) 0}
.life-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,6vw,96px);align-items:start}
.life-in h2{font-size:clamp(26px,2.6vw,38px)}
.life-in p{color:var(--ink)}
.mark{font-weight:800;color:var(--ink);background:linear-gradient(transparent 62%,rgba(235,196,107,.6) 62%,rgba(235,196,107,.6) 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.life-link{margin-top:22px!important}

/* 9 · FAQ */
.sv-faq{background:var(--paper)}
.faq{max-width:920px}

/* 10 · closing + form */
.sv-close{padding:clamp(72px,9vw,128px) 0}
.close-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,96px);align-items:start}
.close-txt{position:sticky;top:110px}
.close-txt h2{color:var(--cream);margin-bottom:22px}
.close-txt p{color:var(--cream-70)}
.close-txt .free{color:var(--cream);margin-top:20px}
.close-txt .alt{text-align:start;margin-top:32px;font-size:16px}
.close-form{position:relative;padding:44px 44px 40px;box-shadow:inset 0 0 0 1px rgba(235,196,107,.5);clip-path:polygon(0 0,calc(100% - 36px) 0,100% 36px,100% 100%,0 100%)}
.close-form::before{content:"";position:absolute;top:0;right:0;width:36px;height:36px;background:linear-gradient(225deg,transparent 50%,rgba(235,196,107,.5) 50%,rgba(235,196,107,.5) calc(50% + 1px),transparent calc(50% + 1px))}
.close-form .send .btn{min-width:0}
.close-form .thanks h3{font-size:34px}

/* 11 · author */
.sv-author{padding:clamp(40px,5vw,64px) 0}
.author{display:flex;align-items:flex-start;gap:20px;max-width:640px;padding-top:28px;border-top:1px solid var(--line)}
.author-img{flex:none;display:block;width:88px;height:88px;background:var(--blush);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);overflow:hidden}
.author-img img{width:100%;height:100%;object-fit:cover}
.sv .author-b p{font-size:15px;line-height:1.55;margin:0;color:var(--ink-2)}
.sv .author-b p+p{margin-top:2px}
.sv .author-b .author-h{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--gold-ink)}
.sv .author-b .author-n{font-size:18px;font-weight:800;color:var(--ink);margin-top:4px}
.author-n a{color:inherit;text-decoration:underline;text-decoration-color:var(--gold-deep);text-underline-offset:5px;text-decoration-thickness:1px}
.sv .author-b .author-d{margin-top:8px;font-size:14px}

/* entrances: short, only when motion is allowed and JS is on; content is visible without them */
.sv-io .anim .rv{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)}
.sv-io .anim .rv.in{opacity:1;transform:none}

@media (max-width:1000px){
  .costs{grid-template-columns:1fr;gap:32px}
  .cost{padding-inline:0!important;box-shadow:none!important}
  .cost+.cost{padding-top:32px!important;border-top:1px solid var(--line)}
  .partial{grid-template-columns:1fr}
}
@media (max-width:900px){
  .svc-hero-in{grid-template-columns:1fr;gap:0}
  .svc-hero-copy{gap:16px;padding:28px 0 28px}
  .svc-hero h1{font-size:clamp(31px,8.4vw,40px);line-height:1.08}
  .svc-hero .def{font-size:18px}
  .personal{padding-inline-start:16px}
  .personal p{font-size:16.5px}
  .svc-hero .btn{width:100%}
  .svc-hero-fig{justify-self:start;max-width:none;height:300px;overflow:hidden;margin-inline:calc(var(--gut) * -1);width:auto}
  .svc-hero-fig img{width:auto;height:430px;margin-inline:auto}
  .svc-k{width:92vw;left:-10vw}
  .sv p{font-size:17px}
  .sv-split,.life-in,.close-in{grid-template-columns:1fr;gap:22px}
  .sv-split h2,.close-txt,.case-sum{position:static}
  .prose .lift{margin:24px 0}
  .when-grid{grid-template-columns:1fr;gap:14px}
  .when{padding:24px 22px 26px}
  .when::before{right:22px}
  .not-always{padding:26px 22px}
  .case{grid-template-columns:1fr;grid-template-areas:"h" "a" "s" "b"}
  .case-sum{margin-top:28px;padding:26px 22px 22px}
  .case-b{margin-top:30px}
  .banks{grid-template-columns:1fr}
  .bank{padding:26px 0 28px!important;box-shadow:none!important}
  .bank+.bank{border-top:1px solid var(--line)}
  .tracks{padding:24px 20px 20px;margin-inline:calc(var(--gut) * -1 + 4px)}
  .tr{grid-template-columns:64px minmax(0,1fr) auto;gap:10px;font-size:14px}
  .step{grid-template-columns:44px minmax(0,1fr);gap:14px}
  .step-n{font-size:44px}
  .step:not(:last-child)::before{right:12px;top:54px}
  .step-b{padding-top:4px}
  .fold summary h3{font-size:17.5px}
  .steps-cta .btn,.close-form .send .btn{width:100%}
  .close-form{padding:30px 20px 28px;margin-inline:calc(var(--gut) * -1 + 4px)}
  .author{gap:16px}
  .author-img{width:72px;height:72px}
}
@media (prefers-reduced-motion:reduce){
  .svc-hero h1,.svc-hero-fig img,.fold[open] .fold-b{animation:none!important}
  .sv-io .rv{opacity:1!important;transform:none!important;transition:none!important}
}

/* ═════════ משכנתא לרכישת דירה (.p-buy) ═════════ */
.p-buy .sv-faq{background:var(--sand)}
.srcline{margin-top:20px!important;font-size:15px!important}
.srcline a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold-deep);text-underline-offset:5px;text-decoration-thickness:1px}
.srcline a::after{content:"\00a0↗";font-size:.85em;color:var(--gold-ink)}
@media (hover:hover) and (pointer:fine){ .srcline a:hover{color:var(--gold-ink)} }
.srcline .sep{margin:0 10px;color:var(--gold-deep)}
.dark .srcline a{color:var(--cream)}
.dark .srcline a::after{color:var(--gold)}

/* how much: Bank of Israel limits as figures */
.limits{margin-top:clamp(48px,6vw,80px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--line)}
.limits h3{font-size:clamp(22px,2vw,27px);margin-bottom:24px}
.lim-figs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:32px}
.lim-figs li{display:flex;flex-direction:column;gap:8px;padding:6px clamp(14px,2vw,28px) 6px}
.lim-figs li:first-child{padding-inline-start:0}
.lim-figs li+li{box-shadow:inset -1px 0 0 var(--line)}
.lim-figs b{font-size:clamp(40px,4.6vw,66px);line-height:1;font-weight:250;color:var(--gold-ink);letter-spacing:-.02em;font-variant-numeric:lining-nums}
.lim-figs span{font-size:15px;line-height:1.4;color:var(--ink-2);max-width:16ch}
.lim-txt{max-width:66ch}
.lim-figs .pti em{margin-top:2px;padding-top:8px;border-top:1px solid var(--line);font-style:normal;font-size:14px;line-height:1.4;font-weight:700;color:var(--ink);max-width:18ch}
.lim-txt .note-40{margin:22px 0!important;padding:2px 18px 2px 0;box-shadow:inset -2px 0 0 var(--gold-deep);color:var(--ink)}
.lim-txt .note-40 b{font-weight:800}

/* equity: two bars */
.sv-equity{background:var(--paper)}
.appr{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,5vw,80px);align-items:center}
.appr-txt h3{font-size:clamp(22px,2vw,27px);margin-bottom:14px}
.eqfig{margin:0;padding:clamp(24px,3vw,40px);background:var(--sand);display:flex;flex-direction:column;gap:28px}
.eq-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-bottom:12px!important;font-size:15px!important;color:var(--ink-2)}
.eq-h b{font-size:17px;font-weight:800;color:var(--ink)}
.eq-bar{position:relative;display:flex;height:46px}
.eq-bar i{display:block;height:100%;width:var(--w);flex:none}
.eq-bar .m{background:var(--navy)}
.eq-bar .e{background:var(--gold)}
.eq-bar .x{background:repeating-linear-gradient(135deg,var(--gold-deep) 0 5px,var(--gold) 5px 10px)}
.eq-bar .tick{position:absolute;top:-8px;bottom:-8px;inset-inline-start:var(--at);width:0;border-inline-start:2px dashed var(--ink)}
.eq-bar .tick::before{content:attr(data-l);position:absolute;top:50%;left:6px;transform:translateY(-50%);font-size:11px;font-weight:700;white-space:nowrap;color:var(--navy)}
.eq-vals{display:flex;justify-content:space-between;gap:16px;margin:10px 0 0}
.eq-vals div{display:flex;flex-direction:column}
.eq-vals .ev{text-align:end}
.eq-vals dt{font-size:13px;color:var(--ink-2)}
.eq-vals dd{margin:0;font-size:19px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.eq-row.b .ev dd{color:var(--gold-ink)}
.eq-gap{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-top:18px;border-top:1px solid var(--line);margin:0!important}
.eq-gap span{font-size:16px;font-weight:700;color:var(--ink)}
.eq-gap b{font-size:clamp(30px,3vw,42px);line-height:1;font-weight:800;color:var(--gold-ink);letter-spacing:-.01em}
.eqfig figcaption{font-size:14px;color:var(--ink-2);margin-top:-14px}
/* the change from A to B, once, as the figure arrives */
.sv-io .anim .eqfig .b .m,.sv-io .anim .eqfig .b .x{transition:width .9s var(--ease-in-out) .5s}
.sv-io .anim .eqfig:not(.in) .b .m{width:75%}
.sv-io .anim .eqfig:not(.in) .b .x{width:0}

/* extra costs */
.extra{margin-top:clamp(56px,7vw,96px)}
.extra-head{max-width:780px;margin-bottom:28px}
.extra-head h3{font-size:clamp(22px,2vw,27px);margin-bottom:10px}
.extra-cols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,56px);align-items:start}
.grp-t{margin-bottom:12px!important;color:var(--ink)!important;font-size:17px!important}
.costlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;margin:0}
.costlist div{padding:16px 0;border-top:1px solid var(--line)}
.costlist dt{font-size:17px;font-weight:800;color:var(--ink)}
.costlist dd{margin:4px 0 0;font-size:16px;line-height:1.6;color:var(--ink-2)}
.costlist .tax{grid-column:1/-1;padding:18px 20px;margin:4px 0;background:var(--sand);border-top:0;box-shadow:inset -2px 0 0 var(--gold-deep)}
.costlist .tax dd{color:var(--ink)}
.taxlink{margin-top:16px!important;font-size:16px!important}
.taxlink a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--gold-deep);text-underline-offset:5px}
.taxlink a::after{content:"\00a0↗";color:var(--gold-ink)}
.ongoing{padding:28px 28px 30px;background:var(--blush)}
.ongoing ul{display:flex;flex-direction:column;gap:10px}
.ongoing li{position:relative;padding-inline-start:20px;font-size:16px;line-height:1.6;color:var(--ink)}
.ongoing li::before{content:"";position:absolute;top:10px;right:0;width:8px;height:8px;background:var(--gold-deep)}
.aside-keep{margin-top:28px;padding-top:24px;border-top:1px solid rgba(26,31,46,.14)}
.aside-keep h3{font-size:20px;margin-bottom:10px}
.aside-keep p{font-size:16px;color:var(--ink)}

/* approval in principle */
.sv-aip{background:var(--navy)}
.aip{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,96px);align-items:start}
.aip-main{position:sticky;top:110px}
.aip h2{color:var(--cream);margin-bottom:22px}
.sv-aip p{color:var(--cream-70)}
.aip-valid h3{color:var(--cream);font-size:clamp(21px,1.9vw,25px);margin-bottom:18px}
.days{display:flex;align-items:flex-end;gap:clamp(24px,4vw,56px);margin-bottom:24px;padding-bottom:22px;border-bottom:1px solid rgba(245,229,222,.12)}
.days p{display:flex;align-items:baseline;gap:12px;margin:0!important}
.days b{font-weight:200;line-height:.85;letter-spacing:-.04em;font-variant-numeric:lining-nums}
.d24 b{font-size:clamp(96px,10vw,148px);color:var(--gold)}
.d24 span{font-size:17px;font-weight:600;color:var(--cream)}
.d12 b{font-size:clamp(44px,4.4vw,64px);color:var(--cream-70)}
.d12 span{font-size:14px;color:var(--cream-70);max-width:14ch;line-height:1.35}
.aip .aip-not{margin:18px 0!important;padding:14px 18px;color:var(--cream);background:rgba(245,229,222,.05);box-shadow:inset -2px 0 0 var(--gold)}

/* approach */
.sv-approach{background:var(--blush);padding:clamp(56px,6.5vw,88px) 0}
.approach{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,6vw,96px);align-items:start}
.approach h2{font-size:clamp(26px,2.6vw,38px)}
.approach p{color:var(--ink)}
.approach .first{font-size:clamp(20px,1.8vw,24px);line-height:1.45;font-weight:300}

/* route: the seven stations. Phones and tablets: one compact vertical line. Desktop: the same line in the middle, stations alternating sides. */
.route{position:relative;display:flex;flex-direction:column}
.route::before,.route::after{content:"";position:absolute;top:20px;bottom:24px;right:17px;width:1px;background:var(--gold-deep);opacity:.35}
.route::after{width:2px;right:16.5px;opacity:1;transform-origin:top;transform:scaleY(var(--p))}
.stn{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:16px;align-items:start}
.stn-n{position:relative;z-index:1;display:grid;place-items:center;width:36px;height:36px;background:var(--sand);box-shadow:inset 0 0 0 1.5px var(--gold-deep);font-size:16px;font-weight:400;color:var(--gold-ink);clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%);transition:background-color .35s ease,color .35s ease}
.stn.sig .stn-n,.stn.lit .stn-n{background:var(--gold);color:var(--navy);box-shadow:none;font-weight:700}
.stn-b{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;padding:6px 0 14px}
.stn-b h3{font-size:18px;line-height:1.3}
.stn-b .who{font-size:12.5px!important;font-weight:700;letter-spacing:.05em;color:var(--gold-ink)!important;margin:0!important}
.stn-b p:not(.who){flex-basis:100%;margin-top:3px!important;font-size:15px;line-height:1.5}
.route-note{max-width:62ch;margin:8px 0 0;font-size:15px!important;font-style:italic}

@media (min-width:1000px){
  /* desktop: one vertical line in the middle; stations alternate sides (1 right, 2 left, …) and overlap by half,
     so seven stations take about the height of four */
  .route{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:112px;row-gap:14px;grid-auto-rows:auto;max-width:1060px;margin-inline:auto}
  .route::before,.route::after{top:8px;bottom:8px;right:50%;margin-right:-.5px}
  .route::after{margin-right:-1px}
  .stn{display:block;grid-row:var(--r)/span 2}
  .stn:nth-child(1){--r:1}.stn:nth-child(2){--r:2}.stn:nth-child(3){--r:3}.stn:nth-child(4){--r:4}.stn:nth-child(5){--r:5}.stn:nth-child(6){--r:6}.stn:nth-child(7){--r:7}
  .stn:nth-child(odd){grid-column:1;justify-self:end}
  .stn:nth-child(even){grid-column:2;justify-self:start}
  .stn-n{position:absolute;top:2px;width:36px;height:36px;font-size:16px}
  .stn:nth-child(odd) .stn-n{inset-inline-end:-74px}
  .stn:nth-child(even) .stn-n{inset-inline-start:-74px}
  .stn::after{content:"";position:absolute;top:20px;width:28px;height:1px;background:var(--gold-deep);opacity:.5}
  .stn:nth-child(odd)::after{inset-inline-end:-36px}
  .stn:nth-child(even)::after{inset-inline-start:-36px}
  .stn-b{max-width:440px;padding:6px 0 14px}
  .stn-b h3{font-size:19px}
  .stn-b p:not(.who){font-size:15.5px}
  .route-note{margin:20px auto 0;text-align:center}
}

/* junctions: whoever takes part in a step (bank, appraiser, lawyer, banks, insurance) closes in on the station
   as two tapered arms at the K's angle; with the main line each of these stations draws the logo's K. Steps 1 and 5 have none.
   As the reader scrolls: a light travels down the line, each station lights with a short pulse, its arms close in,
   and when the route reaches 7 the whole line glows once. */
.jn-defs{position:absolute;width:0;height:0;overflow:hidden}
.route-box{position:relative;--p:1}
.jn{position:absolute;z-index:0;top:3px;right:-16px;width:14px;height:30px;overflow:visible;pointer-events:none}
.jn polygon{fill:url(#jnFill);transform-box:fill-box;transform-origin:0% 50%}
.sv-io .anim .stn .jn polygon{transition:transform .7s cubic-bezier(.2,1.25,.35,1),opacity .35s ease}
.sv-io .anim .stn .jn .a2{transition-delay:.12s}
.sv-io .anim .stn:not(.lit) .jn polygon{opacity:0;transition:none}
.sv-io .anim .stn:not(.lit) .jn .a1{transform:translate(55%,-40%)}
.sv-io .anim .stn:not(.lit) .jn .a2{transform:translate(55%,40%)}
/* the pulse when a station lights */
.stn::before{content:"";position:absolute;z-index:0;top:0;right:0;width:36px;height:36px;box-shadow:inset 0 0 0 1.5px var(--gold);opacity:0;pointer-events:none;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)}
.sv-io .anim .stn.lit::before{animation:stnPulse .9s var(--ease-out) 1}
@keyframes stnPulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
/* the travelling light at the tip of the gold line */
.route-head{display:none}
.sv-io .anim .route-head{display:block;position:absolute;z-index:2;top:calc(20px + var(--p) * (100% - 44px));right:17px;width:10px;height:10px;margin:-5px -5px 0 0;border-radius:50%;background:#fff6dc;box-shadow:0 0 0 4px rgba(235,196,107,.35),0 0 18px 6px rgba(235,196,107,.55);pointer-events:none;transition:opacity .4s ease}
.sv-io .anim .route-head::before{content:"";position:absolute;bottom:5px;left:50%;width:2px;height:70px;margin-left:-1px;background:linear-gradient(to top,rgba(235,196,107,.95),rgba(235,196,107,0))}
.route-box.start .route-head,.route-box.end .route-head{opacity:0}
/* the route complete: one glow along the line */
.sv-io .anim .route-box.end .route::after{animation:routeGlow 1.4s ease-out 1}
@keyframes routeGlow{0%{box-shadow:0 0 0 0 rgba(235,196,107,0)}35%{box-shadow:0 0 14px 3px rgba(235,196,107,.75)}100%{box-shadow:0 0 0 0 rgba(235,196,107,0)}}
@media (min-width:1000px){
  .jn{top:-4px;right:auto;width:30px;height:48px}
  .stn:nth-child(odd) .jn{inset-inline-end:-38px}
  .stn:nth-child(even) .jn{inset-inline-start:-38px;transform:scaleX(-1)}
  .stn.j::after{display:none}
  .stn::before{top:2px;right:auto}
  .stn:nth-child(odd)::before{inset-inline-end:-74px}
  .stn:nth-child(even)::before{inset-inline-start:-74px}
  .sv-io .anim .route-head{top:calc(8px + var(--p) * (100% - 16px));right:50%}
}
/* the seal: after station 7 the line ends in the K itself (stem, arm, leg), drawn once, with a short glow */
.route-seal{display:block;width:48px;height:64px;margin:6px 0 0;margin-inline-start:5px;overflow:visible}
.route-seal path{fill:none;stroke:var(--gold-deep);stroke-width:4;stroke-linecap:square;stroke-dasharray:1;stroke-dashoffset:0}
.route-seal .s0{stroke-width:2;stroke:var(--gold-deep)}
.sv-io .anim .route-seal path{transition:stroke-dashoffset .5s var(--ease-in-out)}
.sv-io .anim .route-seal .s1{transition-delay:.35s}
.sv-io .anim .route-seal .s2{transition-delay:.6s}
.sv-io .anim .route-box:not(.end) .route-seal path{stroke-dashoffset:1;transition:none}
.sv-io .anim .route-box.end .route-seal{animation:sealGlow 1.6s ease-out .9s 1 both}
@keyframes sealGlow{0%{filter:drop-shadow(0 0 0 rgba(235,196,107,0))}40%{filter:drop-shadow(0 0 10px rgba(235,196,107,.9))}100%{filter:drop-shadow(0 0 0 rgba(235,196,107,0))}}
@media (max-width:999px){
  /* phones: the line moves in from the edge so the K arms have room */
  .route{padding-inline-start:20px}
  .route::before{right:37px}
  .route::after{right:36.5px}
  .sv-io .anim .route-head{right:37px}
  .jn{top:1px;right:-22px;width:20px;height:34px}
  .stn::before{right:0}
  .route-seal{margin-inline-start:2px;margin-top:-24px}
}
@media (min-width:1000px){ .route-seal{margin:-8px auto 0;transform:translateX(12px)} }
@media (prefers-reduced-motion:reduce){
  .route-seal path{stroke-dashoffset:0!important;transition:none!important}
  .route-seal{animation:none!important}
  .jn polygon{transition:none!important;opacity:1!important;transform:none!important}
  .stn::before,.route-head{display:none!important}
  .route-box.end .route::after{animation:none!important}
}

/* documents: four folders */
.sv-docs{background:var(--paper)}
.lift-s{font-size:clamp(20px,1.8vw,24px)!important;font-weight:700;color:var(--ink)!important;line-height:1.35!important}
.folders{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:20px}
.folder{position:relative;padding:34px clamp(16px,2vw,28px) 28px;border-top:2px solid var(--navy)}
.folder+.folder{box-shadow:inset -1px 0 0 var(--line)}
.folder:first-child{padding-inline-start:0}
.folder.later{border-top-style:dashed}
.folder .tab{position:absolute;top:-28px;right:0;display:grid;place-items:center;height:26px;padding:0 14px 0 18px;background:var(--navy);color:var(--gold);font-size:13px;font-weight:700;letter-spacing:.08em;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 100%)}
.folder+.folder .tab{right:clamp(16px,2vw,28px)}
.folder.later .tab{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy)}
.folder h3{font-size:19px;margin-bottom:12px}
.folder li{position:relative;padding-inline-start:16px;font-size:16px;line-height:1.55;color:var(--ink-2)}
.folder li+li{margin-top:8px}
.folder li::before{content:"";position:absolute;top:11px;right:0;width:8px;height:1.5px;background:var(--gold-deep)}
.docs-foot{display:flex;align-items:center;justify-content:space-between;gap:24px 48px;flex-wrap:wrap;margin-top:clamp(28px,3.5vw,44px);padding-top:28px;border-top:1px solid var(--line)}
.docs-foot p{font-size:17px}
.docs-foot p+p{margin-top:4px}

/* new vs second-hand */
.kinds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.kind{padding:8px clamp(24px,3.5vw,56px) 8px}
.kind:first-child{padding-inline-start:0}
.kind+.kind{box-shadow:inset -1px 0 0 var(--line);padding-inline-end:0}
.kind h3{display:flex;align-items:center;gap:12px;font-size:clamp(22px,2vw,27px);margin-bottom:14px}
.kind h3::before{content:"";width:28px;height:2px;background:var(--gold-deep)}
.kind p{font-size:17px}
.both{margin:clamp(32px,4vw,52px) auto 0;max-width:860px;padding:26px 32px;background:var(--paper);box-shadow:inset 0 2px 0 var(--navy)}
.both p{color:var(--ink);font-size:17px}

/* discount */
.sv-discount{background:var(--blush)}
.sv-discount .mine{color:var(--ink);font-weight:700}

/* mix */
.sv-mix{background:var(--paper)}
.mix{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(36px,5vw,80px);align-items:center}
.mix-txt h2{margin-bottom:20px}
.mix-txt .lift{margin:22px 0;padding-inline-start:18px;box-shadow:inset -2px 0 0 var(--gold-deep);font-size:clamp(19px,1.6vw,22px);line-height:1.5;font-weight:700;color:var(--ink)}
.mixfig{margin:0;padding:28px 28px 22px;background:var(--sand)}
.mixfig svg{display:block;width:100%;height:auto;overflow:visible}
.mixfig .ax{stroke:var(--ink-2);stroke-width:1;opacity:.35}
.mixfig .l1,.mixfig .l2{fill:none;stroke-width:3;stroke-linecap:round}
.mixfig .l1{stroke:var(--navy)}
.mixfig .l2{stroke:var(--gold-deep)}
.mixfig .p0{fill:var(--navy)}
.mixfig figcaption{display:flex;flex-direction:column;gap:6px;margin-top:16px}
.mixfig figcaption b{font-size:17px;line-height:1.45;color:var(--ink)}
.mixfig figcaption span{font-size:13px;color:var(--ink-2)}
.sv-io .anim .mixfig .l1,.sv-io .anim .mixfig .l2{stroke-dasharray:400;stroke-dashoffset:0;transition:stroke-dashoffset 1.4s var(--ease-out) .3s}
.sv-io .anim .mixfig:not(.in) .l1,.sv-io .anim .mixfig:not(.in) .l2{stroke-dashoffset:400}
.mix-end{grid-column:1/-1;max-width:62ch;font-size:19px!important;font-weight:700;color:var(--ink)!important}

/* author + further reading */
.author-row{display:flex;align-items:flex-start;justify-content:space-between;gap:28px 56px;flex-wrap:wrap}
.author-row .author{flex:1 1 420px}
.more-read{flex:0 1 320px;padding-top:28px;border-top:1px solid var(--line)}
.sv .more-read .author-h{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--gold-ink);margin-bottom:6px}
.sv .more-read p{font-size:15px}

@media (max-width:1100px){
  .lim-figs{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:24px}
  .lim-figs li:nth-child(4){padding-inline-start:0;box-shadow:none}
  .folders{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:52px}
  .folder:nth-child(3){padding-inline-start:0;box-shadow:none}
  .folder:nth-child(3) .tab{right:0}
  .appr,.mix,.extra-cols{grid-template-columns:1fr}
}
@media (max-width:900px){
  .lim-figs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lim-figs li{padding-inline:0 14px!important;box-shadow:none!important}
  .lim-figs li:last-child{grid-column:1/-1}
  .costlist{grid-template-columns:1fr}
  .ongoing{padding:24px 20px 26px;margin-inline:calc(var(--gut) * -1 + 4px)}
  .eqfig{padding:22px 18px;margin-inline:calc(var(--gut) * -1 + 4px)}
  .eq-bar{height:38px}
  .eq-vals dd{font-size:17px}
  .aip{grid-template-columns:1fr;gap:28px}
  .aip-main{position:static}
  .days{gap:22px}
  .approach{grid-template-columns:1fr;gap:18px}
  .folders{grid-template-columns:1fr 1fr;column-gap:18px;row-gap:48px}
  .folder,.folder:nth-child(n){padding:26px 0 8px;box-shadow:none}
  .folder:nth-child(n) .tab{right:0}
  .docs-foot .btn{width:100%}
  .kinds{grid-template-columns:1fr}
  .kind,.kind:nth-child(n){padding:0 0 26px;box-shadow:none}
  .kind+.kind{padding-top:26px;border-top:1px solid var(--line)}
  .both{padding:22px 20px;margin-inline:calc(var(--gut) * -1 + 4px)}
  .mixfig{padding:22px 18px 18px}
  .srcline .sep{display:block;height:6px;overflow:hidden;color:transparent}
}
@media (prefers-reduced-motion:reduce){
  .route::after{transform:none!important}
  .stn-n{transition:none!important}
  .sv-io .eqfig .b .m,.sv-io .eqfig .b .x{transition:none!important}
}