/* Vakeel motion components. Shared by every page; each block only acts when its markup is on the page.
   Colours come from the band tokens (band-l, band-d) and the root tokens in the page CSS. */
.k{font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--mu)}
.ln{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bill svg,.ind svg,.ill svg,.hbs svg,.sc-art svg,.steps svg,.cx svg,.cx-est svg,.tw svg,.phone svg,.br-list svg,.fl-never svg,.cmp-wrap svg{display:block}
/* ---------- shared animation states ---------- */
.draw{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .7s var(--ease) var(--d,0s)}
.rv{transition:opacity .55s var(--ease) var(--d,0s),transform .55s var(--ease) var(--d,0s)}
.pre .draw{stroke-dashoffset:1;transition:none}
.pre .rv{opacity:0;transform:translateY(12px);transition:none}
.pre *{transition-duration:0s!important;animation:none!important}

/* ---------- 02 bill ---------- */
.bill{background:var(--esp2);border:1px solid rgba(184,182,174,.28);padding:22px 22px 18px;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.bill-top{display:flex;justify-content:space-between;gap:12px;white-space:nowrap;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mu);font-weight:500}
.bill-claim{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 0 12px;border-bottom:1px solid var(--ln)}
.bill-claim span{font-size:14px}.bill-claim b{font-family:var(--head);font-weight:400;font-size:23px;color:var(--hd);font-variant-numeric:tabular-nums}
.bl{list-style:none;margin:0;padding:0}
.bl li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 14px;padding:11px 0 11px 14px;border-bottom:1px solid var(--ln);transition:opacity .45s var(--ease) var(--d)}
.bl li::before{content:"";position:absolute;left:0;top:11px;bottom:11px;width:2px;background:var(--okc);transform-origin:top;transition:transform .45s var(--ease) var(--d)}
.bl li.hold::before{background:var(--wc)}
.bl .t{color:var(--hd);font-size:14.5px}
.bl .a{color:var(--hd);font-size:14.5px;text-align:right;font-variant-numeric:tabular-nums}
.bl .st{grid-column:1/-1;display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:var(--small);color:var(--okc);transition:opacity .35s var(--ease) calc(var(--d) + .25s),transform .35s var(--ease) calc(var(--d) + .25s)}
.bl li.hold .st{color:var(--wc)}
.bl .st svg{width:15px;height:15px;flex:none}
.bl .st .draw{--d:calc(var(--d0) + .3s)}
.pre .bl li{opacity:.32}.pre .bl li::before{transform:scaleY(0)}.pre .bl .st{opacity:0;transform:translateX(-6px)}
.bill-out{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;transition:opacity .5s var(--ease) 2.55s,transform .5s var(--ease) 2.55s}
.bill-out div{border:1px solid var(--ln);padding:12px 14px}
.bill-out span{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:500}
.bill-out b{display:block;font-family:var(--head);font-weight:400;font-size:clamp(20px,2.2vw,26px);margin-top:4px;font-variant-numeric:tabular-nums}
.bill-out .pay{border-color:rgba(93,187,132,.5)}.bill-out .pay span,.bill-out .pay b{color:var(--ok2)}
.bill-out .hl{border-color:rgba(207,156,69,.5)}.bill-out .hl span,.bill-out .hl b{color:var(--warn2)}
.pre .bill-out{opacity:0;transform:translateY(10px)}
.bill-note{font-size:12.5px;font-weight:var(--small);color:var(--mu);margin-top:12px}

/* ---------- 03 independence ---------- */
.ind{display:grid;border-top:1px solid var(--ln);border-bottom:1px solid var(--ln)}
@media(min-width:880px){.ind{grid-template-columns:repeat(4,1fr)}}
.ind>div{position:relative;padding:22px 20px 20px 0;cursor:default}
@media(min-width:880px){.ind>div+div{padding-left:20px;border-left:1px solid var(--ln)}}
@media(max-width:879px){.ind>div+div{border-top:1px solid var(--ln)}}
.ind .row{display:flex;align-items:center;gap:12px;color:var(--hd);font-size:16px;line-height:1.3}
.ind svg{width:26px;height:26px;flex:none;color:var(--okc);transition:transform .35s var(--ease)}
.ind .det{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.ind .det>span{overflow:hidden;font-size:13.5px;font-weight:var(--small);color:var(--fg);padding-left:38px}
.ind>div::after{content:"";position:absolute;left:0;right:20px;bottom:-1px;height:2px;background:var(--okc);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
@media(min-width:880px){.ind>div+div::after{left:20px}}
.ind>div:hover .det,.ind>div.act .det{grid-template-rows:1fr}
.ind>div:hover::after,.ind>div.act::after{transform:scaleX(1)}
.ind>div:hover svg,.ind>div.act svg{transform:scale(1.08)}
.ind .det>span>i{display:block;height:8px}

/* ---------- 04 illustrations ---------- */
.ills{display:grid;gap:14px}
@media(min-width:700px){.ills{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.ills{grid-template-columns:repeat(4,1fr)}}
.ill{background:var(--raise);border:1px solid var(--ln);padding:18px 18px 20px;cursor:default;transition:border-color .3s,transform .35s var(--ease),box-shadow .35s}
.ill:hover,.ill.act{border-color:var(--edge);transform:translateY(-3px);box-shadow:0 14px 30px rgba(36,34,32,.08)}
.ill svg{width:100%;height:auto;color:var(--hd);margin-bottom:12px;overflow:visible}
.ill h3{font-size:20px;margin-bottom:6px}
.ill p{font-size:14px;font-weight:var(--small)}
.ill .hint{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mu);margin-top:12px;font-weight:500}
.faint{stroke:var(--ln)}
.acc-ok{stroke:var(--okc)}.acc-w{stroke:var(--wc)}.acc-b{stroke:var(--bc)}
/* a: money leaves first */
.coin{transition:transform .9s var(--ease),opacity .9s var(--ease)}
.stamp{transform-box:fill-box;transform-origin:center;transform:scale(0);opacity:0;transition:transform .45s cubic-bezier(.3,1.4,.5,1) .7s,opacity .3s .7s}
.ill:hover .coin,.ill.act .coin{transform:translate(98px,-14px) scale(.7);opacity:0}
.ill:hover .stamp,.ill.act .stamp{transform:scale(1);opacity:1}
.flowarr{stroke-dasharray:4 5}
.ill:hover .flowarr,.ill.act .flowarr{animation:flowarr .9s linear infinite}
@keyframes flowarr{to{stroke-dashoffset:-18}}
/* b: buried */
.tile{fill:var(--raise);stroke:var(--edge);stroke-width:1;transition:transform .7s var(--ease) calc(var(--c)*70ms)}
.ill:hover .tile,.ill.act .tile{transform:translateY(-112px)}
.drip{transform-box:fill-box;opacity:0}
.ill:hover .drip,.ill.act .drip{animation:drip 1.4s ease-in .6s infinite}
@keyframes drip{0%{opacity:0;transform:translateY(0)}15%{opacity:1}80%{opacity:1;transform:translateY(22px)}100%{opacity:0;transform:translateY(26px)}}
/* c: gaps */
.gap{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);transition:transform .6s var(--ease) calc(var(--c)*120ms + .1s)}
.ill:hover .gap,.ill.act .gap{transform:scaleY(1)}
.glab{opacity:0;transition:opacity .4s .7s}
.ill:hover .glab,.ill.act .glab{opacity:1}
.hatch-l{stroke:var(--wc);stroke-width:1.2}
.bar-f{fill:none}
.lab{fill:var(--mu);font-family:var(--text);font-size:10px;letter-spacing:.12em;font-weight:500}
.lab2{fill:var(--wc);font-family:var(--text);font-size:9.5px;letter-spacing:.06em;font-weight:500}
/* d: the crop */
.scene{transition:transform 1.1s var(--ease)}
.ill:hover .scene,.ill.act .scene{transform:translateX(-112px)}
.out{stroke:var(--ln);stroke-dasharray:3 4}

/* ---------- 05 benefit cards ---------- */
.hbs{display:grid;gap:1px;background:var(--ln);border:1px solid var(--ln)}
@media(min-width:900px){.hbs{grid-template-columns:repeat(3,1fr)}}
.hb{--hbbg:var(--esp);position:relative;background:var(--esp);padding:30px 28px 24px;display:flex;flex-direction:column;cursor:default;transition:background .35s,transform .35s var(--ease)}
.hb::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--okc);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.hb:hover,.hb.act{--hbbg:var(--esp2);background:var(--esp2)}
.hb:hover::before,.hb.act::before{transform:scaleX(1)}
.hb .ic{width:44px;height:44px;color:var(--okc);margin-bottom:18px}
.hb h3{font-size:clamp(22px,2.1vw,27px);margin-bottom:10px}
.hb p{font-size:15px;margin-bottom:16px}
.hb .sv{margin-top:auto;padding-top:12px;border-top:1px solid var(--ln);font-size:14.5px;color:var(--hd);transition:transform .35s var(--ease)}
.hb .sv span{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--okc);font-weight:500;margin-bottom:3px}
.hb:hover .sv,.hb.act .sv{transform:translateX(4px)}
.ic .chk{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s var(--ease) .1s}
.hb:hover .ic .chk,.hb.act .ic .chk{stroke-dashoffset:0}
.ic .note{transition:transform .5s var(--ease)}
.hb:hover .ic .note,.hb.act .ic .note{transform:translateY(-1.5px)}
.ic .lens{transform-box:view-box}
.hb:hover .ic .lens,.hb.act .ic .lens{animation:lens 2.4s var(--ease) infinite}
@keyframes lens{0%,100%{transform:translate(0,0)}30%{transform:translate(9px,1px)}60%{transform:translate(4px,7px)}}
.ic .found{opacity:0;transition:opacity .3s}
.hb:hover .ic .found,.hb.act .ic .found{animation:found 2.4s infinite}
@keyframes found{0%,25%{opacity:0}35%,55%{opacity:1}65%,100%{opacity:0}}
.ic .trend{stroke-dasharray:1;stroke-dashoffset:0}
.hb:hover .ic .trend,.hb.act .ic .trend{animation:trend 1.2s var(--ease) both}
@keyframes trend{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.ic .pulse{transform-box:fill-box;transform-origin:center;opacity:0}
.hb:hover .ic .pulse,.hb.act .ic .pulse{animation:pulse 1.6s ease-out 1s infinite}
@keyframes pulse{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
.ic .key{transition:transform .5s var(--ease)}
.hb:hover .ic .key,.hb.act .ic .key{transform:translateX(4px)}
.ic .shk{transition:transform .4s var(--ease) .3s}
.hb:hover .ic .shk,.hb.act .ic .shk{transform:translateY(-3px)}
.ic .cn{opacity:0}
.hb:hover .ic .cn,.hb.act .ic .cn{animation:deflect 2.4s var(--ease) infinite}
@keyframes deflect{0%{opacity:0;transform:translate(3px,-3px)}20%{opacity:1;transform:translate(0,0)}42%{opacity:1;transform:translate(-4px,4px)}62%{opacity:1;transform:translate(1px,-1px)}82%,100%{opacity:0;transform:translate(5px,-5px)}}
.ic .rise{stroke-dasharray:1;stroke-dashoffset:0;opacity:.8}
.hb:hover .ic .rise,.hb.act .ic .rise{animation:trend 1.4s var(--ease) both}
.hb:hover .ic .fdot,.hb.act .ic .fdot{animation:fdot 1.4s var(--ease) both}
@keyframes fdot{from{transform:translateX(0)}to{transform:translateX(31px)}}

/* ---------- 06 comparison ---------- */
.cmp-wrap{position:relative}
.cmp{display:grid;grid-template-columns:minmax(190px,1.1fr) repeat(3,minmax(0,1fr));grid-template-rows:repeat(5,auto);position:relative;margin-top:18px}
.cmp .vkbg{grid-column:4;grid-row:1/-1;margin-top:-16px;background:var(--white);border-top:3px solid var(--ok);box-shadow:0 22px 50px rgba(36,34,32,.13),0 0 0 1px rgba(47,143,91,.18);z-index:0;transition:box-shadow .35s}
.cmp .c{position:relative;z-index:1;padding:16px 18px;border-top:1px solid var(--ln);transition:opacity .3s var(--ease),background .3s}
.cmp .c.h{border-top:0;padding-bottom:14px;display:flex;align-items:flex-end;gap:10px}
.cmp .c.h b{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--mu)}
.cmp .c.h.vk b{font-family:var(--head);font-size:21px;letter-spacing:.2em;color:var(--hd);font-weight:400}
.cmp .c.h.vk em{margin-left:auto;font-style:normal;font-size:10px;letter-spacing:.16em;color:var(--ok);border:1px solid var(--ok);padding:2px 6px;font-weight:500}
.cmp .c.a b{display:block;font-family:var(--head);font-weight:400;font-size:18px;color:var(--hd);line-height:1.25}
.cmp .c.a span{display:block;margin-top:3px;font-size:13px;line-height:1.45;font-weight:var(--small);color:var(--mu)}
.cmp .c.v{display:grid;grid-template-columns:22px minmax(0,1fr);gap:0 10px;align-content:start;cursor:help}
.cmp .c.v .s{font-size:14.5px;color:var(--fg);line-height:1.45}
.cmp .c.vk .s{color:var(--hd)}
.cmp .det{grid-column:2;display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.cmp .det>span{overflow:hidden;font-size:13px;font-weight:var(--small);color:var(--mu);line-height:1.5}
.cmp .det>span>i{display:block;height:7px}
/* hover: one band glides to the row, the answer's reason floats under it, nothing jumps */
.cmp .hl{position:absolute;left:-14px;right:-14px;top:0;height:0;z-index:0;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(36,34,32,.055),rgba(36,34,32,.03) 70%,rgba(47,143,91,.06));border-left:2px solid var(--hd);transition:transform .45s var(--ease),height .45s var(--ease),opacity .3s}
.cmp.on .hl{opacity:1}
.cmp .c.v .det{display:none}
.cmp .c .ci{transition:transform .35s var(--ease)}
.cmp .c.hot .ci{animation:cipop .5s var(--ease)}
@keyframes cipop{40%{transform:scale(1.28)}100%{transform:scale(1)}}
.cmp .c.v.cur .s{color:var(--hd)}
.cmp .c.v::after{content:"";position:absolute;left:18px;right:18px;bottom:8px;height:1px;background:currentColor;opacity:.35;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.cmp .c.v.cur::after{transform:scaleX(1)}
.cmp .c.vk.hot::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;background:var(--ok);animation:vkbar .4s var(--ease) both}
@keyframes vkbar{from{transform:scaleY(0)}}
.cmp .c.a b{transition:transform .35s var(--ease)}
.cmp .c.a.hot b{transform:translateX(6px)}
.cmp .c.h[data-col] b{position:relative;transition:color .3s}
.cmp .c.h[data-col] b::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--hd);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.cmp[data-focus="pm"] .c.h.pm b,.cmp[data-focus="rep"] .c.h.rep b{color:var(--hd)}
.cmp[data-focus="pm"] .c.h.pm b::after,.cmp[data-focus="rep"] .c.h.rep b::after{transform:scaleX(1)}
.cmp[data-focus="vk"] .vkbg{box-shadow:0 26px 60px rgba(36,34,32,.18),0 0 0 1px rgba(47,143,91,.35)}
.ci{width:22px;height:22px;margin-top:1px}
.ci.S circle{fill:var(--ok);stroke:var(--ok)}.ci.S path{stroke:#fff;stroke-width:2}
.ci.D circle{stroke:var(--warn)}.ci.D .half{fill:var(--warn);stroke:none;transition:opacity .4s var(--d,0s)}
.ci.W circle{stroke:var(--bad)}.ci.W path{stroke:var(--bad);stroke-width:2}
.ci circle,.ci path{fill:none;stroke-width:1.6;stroke-linecap:round}
.ci.S circle{transition:fill-opacity .4s var(--d,0s)}
.pre .ci.S circle{fill-opacity:0}.pre .ci.D .half{opacity:0}
.cmp-legend{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13.5px;font-weight:var(--small)}
.cmp-legend span{display:inline-flex;align-items:center;gap:7px}.cmp-legend .ci{width:18px;height:18px;margin:0}
.cmp-score{display:block;margin-top:10px;max-width:none;font-size:14px;font-weight:var(--small)}
.cmp-score b{font-weight:500;color:var(--hd)}
.cmp-m{display:none}
@media(max-width:820px){
  .cmp{display:none}.cmp-m{display:block;margin-top:18px}
  .seg{position:relative;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ln);background:var(--raise);margin-bottom:14px}
  .seg button{position:relative;z-index:1;border:0;background:none;font:inherit;font-size:13.5px;font-weight:400;padding:11px 8px;color:var(--fg);cursor:pointer;transition:color .3s}
  .seg button[aria-pressed="true"]{color:var(--ivory)}
  .seg i{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);background:var(--esp);transition:transform .4s var(--ease)}
  .seg[data-v="rep"] i{transform:translateX(100%)}
  .mrow{border:1px solid var(--ln);background:var(--raise);margin-bottom:10px}
  .mrow .ma{padding:13px 14px 11px;border-bottom:1px solid var(--ln)}
  .mrow .ma b{display:block;font-family:var(--head);font-weight:400;font-size:18px;color:var(--hd);line-height:1.25}
  .mrow .ma span{font-size:12.5px;font-weight:var(--small);color:var(--mu)}
  .mrow .mc{display:grid;grid-template-columns:1fr 1fr}
  .mrow .mc>div{padding:10px 12px 12px;display:grid;grid-template-columns:20px minmax(0,1fr);gap:4px 8px;align-content:start}
  .mrow .mc>div+div{border-left:1px solid var(--ln);background:rgba(47,143,91,.05)}
  .mrow .who{grid-column:1/-1;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mu);font-weight:500}
  .mrow .vkw{color:var(--ok)}
  .mrow .ci{width:20px;height:20px}
  .mrow .s{font-size:13.5px;color:var(--hd);line-height:1.4}
  .mrow .det{grid-column:1/-1;display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
  .mrow .det>span{overflow:hidden;font-size:13px;font-weight:var(--small);color:var(--mu);line-height:1.5}
  .mrow .det>span>i{display:block;height:6px}
  .mrow.open .det{grid-template-rows:1fr}
  .mrow .tap{font-size:11px;color:var(--mu);padding:0 14px 10px;letter-spacing:.06em}
  .mrow.open .tap{display:none}
  .mrow[hidden]{display:none}
}

/* ---------- 07 claimed / verified / paid ---------- */
.cvp{position:relative;display:grid;gap:22px;padding-top:32px}
.cvp .r{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:center}
@media(max-width:560px){.cvp .r{grid-template-columns:1fr;gap:6px}}
.cvp .nm{font-size:14px;color:var(--fg)}.cvp .nm b{display:block;font-family:var(--head);font-weight:400;font-size:28px;color:var(--hd);line-height:1;font-variant-numeric:tabular-nums}
.cvp .tr{position:relative;height:26px;background:rgba(184,182,174,.08)}
.cvp .bar{position:absolute;left:0;top:0;bottom:0;transform-origin:left;transition:transform 1.1s var(--ease) var(--d)}
.pre .cvp .bar{transform:scaleX(0)}
.bar.cl{width:62%;background:#6E6A62}.bar.ve{width:47%;background:var(--ok2)}.bar.pa{width:40%;background:var(--plat2)}
.nv{position:absolute;left:47%;width:15%;top:0;bottom:0;background:repeating-linear-gradient(135deg,rgba(207,156,69,.85) 0 2px,transparent 2px 7px);border:1px solid rgba(207,156,69,.7);transition:opacity .5s 1.5s}
.pre .nv{opacity:0}
.nvl{position:absolute;left:47%;top:-24px;font-size:11.5px;letter-spacing:.06em;color:var(--warn2);font-weight:var(--small);white-space:nowrap;transition:opacity .5s 1.7s}
.pre .nvl{opacity:0}
.vline{position:absolute;top:22px;bottom:-8px;left:calc(120px + 16px + (100% - 136px)*.47);border-left:1px dashed rgba(93,187,132,.8);transition:opacity .5s 1.9s}
@media(max-width:560px){.vline{display:none}}
.pre .vline{opacity:0}
.safe{display:inline-flex;align-items:center;gap:10px;margin-top:26px;border:1px solid rgba(93,187,132,.45);padding:10px 14px;color:var(--ok2);font-size:14.5px;transition:opacity .5s 2.2s,transform .5s var(--ease) 2.2s}
.safe svg{width:18px;height:18px}
.pre .safe{opacity:0;transform:translateY(8px)}

/* ---------- 08 steps ---------- */
.steps{position:relative;display:grid;gap:0}
@media(min-width:900px){.steps{grid-template-columns:repeat(5,1fr)}}
.steps .rail{position:absolute;left:0;right:0;top:21px;height:1px;background:var(--ln)}
.steps .rail i{position:absolute;inset:0;background:var(--okc);transform-origin:left;transition:transform 2s var(--ease) .2s}
.pre .steps .rail i{transform:scaleX(0)}
@media(max-width:899px){.steps .rail{left:21px;right:auto;top:0;bottom:0;width:1px;height:auto}.steps .rail i{transform-origin:top}.pre .steps .rail i{transform:scaleY(0)}}
.stp{position:relative;padding:0 20px 26px 0;cursor:default}
@media(max-width:899px){.stp{display:grid;grid-template-columns:42px minmax(0,1fr);gap:16px;padding:0 0 26px}}
.nd{position:relative;width:42px;height:42px;border:1px solid var(--edge);background:var(--raise);display:grid;place-items:center;font-family:var(--head);font-size:19px;color:var(--hd);margin-bottom:18px;transition:background .45s var(--ease) var(--d),border-color .45s var(--d),color .45s var(--d),box-shadow .3s}
.pre .nd{background:var(--raise)!important;border-color:var(--edge)!important;color:var(--mu)!important}
.played .nd{background:var(--okc);border-color:var(--okc);color:var(--fillfg)}
.stp:hover .nd{box-shadow:0 0 0 7px rgba(47,143,91,.14)}
.stp .ti{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.stp .ti svg{width:22px;height:22px;color:var(--okc);transition:transform .35s var(--ease)}
.stp:hover .ti svg{transform:translateY(-2px) rotate(-6deg)}
.stp b{font-family:var(--head);font-weight:400;font-size:20px;color:var(--hd);line-height:1.2}
.stp p{font-size:14.5px;font-weight:var(--small)}

/* ---------- 09 visit levels ---------- */
.lv{display:grid;gap:14px}
@media(min-width:900px){.lv{grid-template-columns:repeat(3,1fr)}}
.lvc{border:1px solid var(--ln);background:var(--raise);padding:24px 22px 20px;cursor:default;transition:transform .35s var(--ease),box-shadow .35s,border-color .3s}
.lvc.mid{border-color:var(--hd)}
.lvc:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(36,34,32,.1)}
.lvc .n{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.lvc .n b{font-family:var(--head);font-weight:400;font-size:48px;line-height:.9;color:var(--hd)}
.lvc .n span{font-size:15px;color:var(--mu)}
.wk{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:16px}
.wk i{font-style:normal;text-align:center;font-size:11.5px;font-weight:var(--small);border:1px solid var(--ln);padding:6px 0;color:var(--mu);transition:background .3s,color .3s}
.wk i.on{background:var(--esp);border-color:var(--esp);color:var(--ivory);font-weight:500}
.played .wk i{animation:sweep .55s var(--ease) calc(var(--j)*90ms) backwards}
@keyframes sweep{0%{background:transparent;color:var(--mu);border-color:var(--ln)}45%{background:rgba(47,143,91,.25);border-color:var(--ok)}100%{background:transparent;color:var(--mu);border-color:var(--ln)}}
.played .wk i.on{animation:sweep .55s var(--ease) calc(var(--j)*90ms) backwards,land .4s var(--ease) calc(var(--j)*90ms + .55s) backwards}
@keyframes land{0%{background:transparent;color:var(--mu);transform:scale(.9)}100%{transform:scale(1)}}
.lvc:hover .wk i.on{animation:bob 1.2s var(--ease) calc(var(--j)*120ms) infinite}
@keyframes bob{0%,100%{transform:none}40%{transform:translateY(-3px)}}
.lvc dl{display:grid;grid-template-columns:1fr auto;gap:7px 12px;margin:0 0 16px;font-size:14px}
.lvc dt{color:var(--mu);font-weight:var(--small)}.lvc dd{margin:0;color:var(--hd);text-align:right}
.lvc .fee{font-family:var(--head);font-size:30px;color:var(--hd);font-variant-numeric:tabular-nums;border-top:1px solid var(--ln);padding-top:14px}
.lvc .fee small{font-family:var(--text);font-size:13px;color:var(--mu);margin-left:6px}

/* ---------- 12 fee calculator, step by step ---------- */
.calc{display:grid;gap:18px;align-items:start}
@media(min-width:980px){.calc{grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr)}}
.cx{background:var(--raise);border:1px solid var(--ln);padding:26px 28px 22px;min-height:560px;display:flex;flex-direction:column}
.cx-prog{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cx-prog button{all:unset;cursor:pointer;display:block;width:100%}
.cx-prog button:focus-visible{outline:2px solid var(--okc);outline-offset:3px}
.cx-prog i{display:block;height:3px;background:var(--ln);position:relative;overflow:hidden}
.cx-prog i::after{content:"";position:absolute;inset:0;background:var(--okc);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.cx-prog li.done i::after,.cx-prog li.cur i::after{transform:scaleX(1)}
.cx-prog li.cur i::after{background:var(--hd)}
.cx-prog span{display:block;margin-top:8px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mu);font-weight:500}
.cx-prog li.cur span{color:var(--hd)}
.cx-prog li.locked button{cursor:default;opacity:.5}
.cx-step{display:none}
.cx-step.on{display:block;animation:stepIn .45s var(--ease)}
.cx-step.on.back{animation-name:stepBack}
@keyframes stepIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes stepBack{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
.cx-step h3{font-size:clamp(24px,2.4vw,31px);margin-bottom:6px}
.cx-step .q{font-size:15px;color:var(--mu);font-weight:var(--small);margin-bottom:24px}
.cx-tiles{display:grid;gap:12px}
@media(min-width:640px){.cx-tiles{grid-template-columns:repeat(3,1fr)}}
.cx-tile,.cx-vc{all:unset;box-sizing:border-box;cursor:pointer;border:1px solid var(--ln);background:var(--raise);transition:border-color .25s,transform .3s var(--ease),box-shadow .3s,background .25s}
.cx-tile{padding:20px 18px;display:grid;gap:8px}
.cx-tile svg{width:56px;height:56px;color:var(--hd);transition:transform .4s var(--ease)}
.cx-tile b{font-family:var(--head);font-weight:400;font-size:21px;color:var(--hd)}
.cx-tile span{font-size:13.5px;color:var(--mu);font-weight:var(--small)}
.cx-tile:hover,.cx-vc:hover{border-color:var(--edge);transform:translateY(-3px);box-shadow:0 12px 26px rgba(36,34,32,.08)}
.cx-tile:hover svg{transform:translateY(-3px)}
.cx-tile[aria-pressed="true"],.cx-vc[aria-pressed="true"]{border-color:var(--hd);box-shadow:inset 0 0 0 1px var(--hd);background:var(--sunk)}
.cx-tile:focus-visible,.cx-vc:focus-visible{outline:2px solid var(--okc);outline-offset:2px}
.cx-big{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.cx-big b{font-family:var(--head);font-weight:400;font-size:clamp(38px,4.6vw,56px);color:var(--hd);line-height:1;font-variant-numeric:tabular-nums}
.cx-big span{color:var(--mu);font-size:15px}
.cx-unit{display:inline-flex;border:1px solid var(--ln);margin-left:auto;align-self:center}
.cx-unit button{border:0;background:none;font:inherit;font-size:12.5px;padding:6px 11px;color:var(--mu);cursor:pointer}
.cx-unit button[aria-pressed="true"]{background:var(--fill);color:var(--fillfg)}
input[type=range].cx-r{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:transparent;cursor:pointer;margin:6px 0 2px}
.cx-r::-webkit-slider-runnable-track{height:3px;background:linear-gradient(var(--okc),var(--okc)) 0/var(--p,50%) 100% no-repeat,var(--ln)}
.cx-r::-moz-range-track{height:3px;background:var(--ln)}
.cx-r::-moz-range-progress{height:3px;background:var(--okc)}
.cx-r::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:-10.5px;background:var(--raise);border:2px solid var(--hd);border-radius:50%;transition:transform .2s;box-shadow:0 2px 8px rgba(36,34,32,.15)}
.cx-r::-moz-range-thumb{width:20px;height:20px;background:var(--raise);border:2px solid var(--hd);border-radius:50%}
.cx-r:active::-webkit-slider-thumb{transform:scale(1.15)}
.cx-ends{display:flex;justify-content:space-between;font-size:12px;color:var(--mu);font-weight:var(--small)}
.cx-house{height:130px;display:flex;align-items:flex-end;justify-content:center;margin:6px 0 10px;border-bottom:1px solid var(--ln)}
.cx-house svg{height:120px;width:auto;color:var(--hd);overflow:visible}
.cx-house .hs{transform-box:fill-box;transform-origin:50% 100%;transition:transform .5s var(--ease)}
.cx-note{font-size:13.5px;color:var(--wc);margin-top:10px;font-weight:var(--small)}
.cx-presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.cx-presets button{border:1px solid var(--ln);background:none;font:inherit;font-size:13px;padding:8px 13px;color:var(--fg);cursor:pointer;transition:border-color .25s,background .25s,color .25s}
.cx-presets button:hover{border-color:var(--hd)}
.cx-presets button[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--fillfg)}
.cx-scale{position:relative;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--ln);margin-top:24px}
.cx-scale span{position:relative;z-index:1;text-align:center;font-size:12.5px;padding:10px 4px;color:var(--mu);transition:color .35s}
.cx-scale span.on{color:var(--fillfg)}
.cx-scale i{position:absolute;top:0;bottom:0;left:0;width:25%;background:var(--fill);transition:transform .5s var(--ease)}
.cx-specl{font-size:14.5px;margin-top:10px;font-weight:var(--small)}
.cx-specl b{font-weight:500;color:var(--hd)}
.cx-vis{display:grid;gap:12px}
@media(min-width:680px){.cx-vis{grid-template-columns:repeat(3,1fr)}}
.cx-vc{padding:16px 15px 14px;display:grid;gap:10px}
.cx-vc .n{display:flex;align-items:baseline;gap:8px}.cx-vc .n b{font-family:var(--head);font-weight:400;font-size:40px;line-height:.9;color:var(--hd)}.cx-vc .n span{font-size:14px;color:var(--mu)}
.cx-vc .wk{margin:0}
.cx-vc .g{font-size:13px;color:var(--mu);font-weight:var(--small)}
.cx-vc .pr{font-family:var(--head);font-size:22px;color:var(--hd);border-top:1px solid var(--ln);padding-top:10px;font-variant-numeric:tabular-nums}
.cx-vc .pr small{font-family:var(--text);font-size:12px;color:var(--mu);margin-left:4px}
.cx-opts{display:grid;gap:10px}
.cx-opt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:3px 14px;align-items:start;border:1px solid var(--ln);padding:14px 16px;cursor:pointer;transition:border-color .25s,background .25s}
.cx-opt:hover{border-color:var(--edge)}
.cx-opt:focus-visible{outline:2px solid var(--okc);outline-offset:2px}
.cx-opt .sw{width:40px;height:22px;border:1px solid var(--edge);border-radius:11px;position:relative;transition:background .3s,border-color .3s;margin-top:1px;grid-row:span 2}
.cx-opt .sw::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--mu);transition:transform .3s var(--ease),background .3s}
.cx-opt[aria-checked="true"]{border-color:var(--hd);background:var(--sunk)}
.cx-opt[aria-checked="true"] .sw{background:var(--ok);border-color:var(--ok)}
.cx-opt[aria-checked="true"] .sw::after{transform:translateX(18px);background:var(--white)}
.cx-opt b{font-weight:500;color:var(--hd);font-size:15px}
.cx-opt b em{font-style:normal;font-weight:500;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ok);border:1px solid var(--ok);padding:2px 6px;margin-left:8px;vertical-align:2px}
.cx-opt p{font-size:13.5px;font-weight:var(--small);color:var(--mu);grid-column:2}
.cx-opt .p{font-size:14px;color:var(--hd);text-align:right;white-space:nowrap;grid-row:span 2}
.cx-opt .p small{display:block;color:var(--mu);font-size:12px}
.cx-cams{grid-column:2;display:flex;gap:6px;margin-top:8px}
.cx-cams button{border:1px solid var(--ln);background:var(--raise);font:inherit;font-size:12.5px;padding:5px 10px;color:var(--fg);cursor:pointer}
.cx-cams button[aria-pressed="true"]{border-color:var(--hd);color:var(--hd);box-shadow:inset 0 0 0 1px var(--hd)}
.cx-two{display:grid;gap:18px;margin-top:22px}
@media(min-width:640px){.cx-two{grid-template-columns:1fr 1fr}}
.cx-two label{display:flex;justify-content:space-between;font-size:14px;color:var(--hd)}
.cx-two label span{color:var(--mu);font-weight:var(--small)}
.cx-sub{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mu);font-weight:500;margin:24px 0 10px}
.cx-nav{margin-top:auto;padding-top:24px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.cx-count{font-size:12.5px;color:var(--mu);font-weight:var(--small)}
.cx-nav .v-btn[hidden]{display:none}
.cx-res .fee{font-family:var(--head);font-size:clamp(44px,5.4vw,66px);color:var(--hd);line-height:1;font-variant-numeric:tabular-nums}
.cx-res .fee small{font-family:var(--text);font-size:15px;color:var(--mu);margin-left:8px}
.cx-res .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ln);border:1px solid var(--ln);margin:22px 0}
.cx-res .tiles div{background:var(--raise);padding:14px 14px 12px}
.cx-res .tiles b{display:block;font-family:var(--head);font-weight:400;font-size:21px;color:var(--hd);font-variant-numeric:tabular-nums}
.cx-res .tiles span{font-size:12.5px;color:var(--mu);font-weight:var(--small)}
@media(max-width:560px){.cx-res .tiles{grid-template-columns:1fr}}
.cx-vs .r{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px;align-items:center;margin:8px 0;font-size:13.5px}
.cx-vs .b{position:relative;height:16px}
.cx-vs .b i{position:absolute;left:0;top:0;bottom:0;background:#C9C2B3;transform-origin:left;transition:transform .9s var(--ease) var(--d,0s)}
.cx-vs .r.us .b i{background:var(--ok)}
.cx-vs .b em{position:absolute;top:-1px;font-style:normal;font-size:12.5px;color:var(--hd);white-space:nowrap;transition:opacity .4s var(--d,0s)}
.cx-res.pre2 .cx-vs .b i{transform:scaleX(0)}.cx-res.pre2 .cx-vs .b em{opacity:0}
.cx-vs .fine{font-size:12.5px;color:var(--mu);font-weight:var(--small);margin-top:8px}
@media(max-width:560px){.cx-vs .r{grid-template-columns:1fr;gap:4px}}
.cx-res .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;align-items:center}
.cx-est{position:sticky;top:84px;background:var(--esp);color:var(--d-fg);padding:24px 22px 20px;--hd:var(--ivory);--mu:var(--d-mu);--ln:var(--d-ln);--fg:var(--d-fg);--okc:var(--ok2)}
.cx-est .k{color:var(--d-mu)}
.cx-est .sub{font-size:13px;font-weight:var(--small);color:var(--d-mu);margin:4px 0 16px}
.cx-est .fee{font-family:var(--head);font-size:clamp(34px,3.6vw,46px);color:var(--ivory);line-height:1;margin:6px 0 4px;font-variant-numeric:tabular-nums}
.cx-est .fee small{font-family:var(--text);font-size:13px;color:var(--d-mu);margin-left:6px}
.cx-est .fee.pend{color:rgba(249,247,242,.25)}
.cx-l{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;border-top:1px solid var(--d-ln);font-size:14px;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.cx-l .lb{font-weight:var(--small)}
.cx-l .v{color:var(--ivory);font-variant-numeric:tabular-nums;text-align:right}
.cx-l.pend{opacity:.3}
.cx-l.tot{border-top-color:rgba(184,182,174,.45)}.cx-l.tot .lb{color:var(--ivory);font-weight:400}.cx-l.tot .v{font-family:var(--head);font-size:21px}
.cx-l.fl1{animation:cxin .5s var(--ease)}
@keyframes cxin{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.cx-share{height:5px;background:rgba(184,182,174,.15);margin-top:4px;position:relative}
.cx-share i{position:absolute;left:0;top:0;bottom:0;background:var(--ok2);transition:width .7s var(--ease)}
.cx-est .ctas{margin-top:18px;display:grid;gap:8px}
.cx-est .v-btn{--hd:var(--ivory);--acc:var(--plat2);--btn:var(--ivory);--btnfg:var(--esp);width:100%}
.flash{animation:flashv .9s var(--ease)}
@keyframes flashv{0%{color:var(--ok2)}100%{}}
@media(max-width:979px){.cx-est{position:static}}
@media(max-width:560px){.cx-opt{grid-template-columns:auto minmax(0,1fr)}.cx-opt .sw{grid-row:span 3}.cx-opt .p{grid-row:auto;grid-column:2;text-align:left;white-space:normal}.cx-opt .p small{display:inline;margin-left:6px}}
@media(max-width:640px){.cx{padding:20px 16px 16px;min-height:0}.cx-prog span{display:none}.cx-prog{margin-bottom:22px}}

/* ---------- 13 hands-off weekly brief ---------- */
.brief{display:grid;gap:44px;align-items:center}
@media(min-width:980px){.brief{grid-template-columns:minmax(0,1fr) 360px;gap:72px}}
.br-copy h3,.br-copy .br-h{font-size:clamp(28px,3.1vw,40px);margin:12px 0 16px}
.br-copy>p{font-size:16.5px}
.br-list{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
.br-list li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;font-size:15.5px;color:var(--hd)}
.br-list li span{display:block;color:var(--fg);font-size:14px;font-weight:var(--small)}
.br-list svg{width:24px;height:24px;color:var(--okc)}
.br-price{margin-top:24px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.br-price b{font-family:var(--head);font-weight:400;font-size:28px;color:var(--hd)}
.br-price span{font-size:14px;color:var(--mu);font-weight:var(--small)}
.phone{width:min(340px,100%);margin:0 auto;border:10px solid #0F0E0D;border-radius:42px;background:var(--esp);box-shadow:0 34px 70px rgba(36,34,32,.28);padding:16px 14px 20px;color:var(--d-fg);--hd:var(--ivory);--mu:var(--d-mu);--ln:var(--d-ln);--okc:var(--ok2);--wc:var(--warn2);--fg:var(--d-fg)}
.ph-bar{display:flex;justify-content:space-between;font-size:11px;color:var(--d-mu);padding:0 6px 10px;font-variant-numeric:tabular-nums}
.ph-head{padding:4px 4px 6px}
.ph-head .k{font-size:9.5px;color:var(--d-mu)}
.ph-head b{display:block;font-family:var(--head);font-weight:400;font-size:24px;color:var(--ivory);margin-top:4px}
.ph-head span{font-size:12px;color:var(--d-mu);font-weight:var(--small)}
.bc{background:var(--esp2);border:1px solid var(--d-ln);padding:12px 13px;margin-top:9px;transition:opacity .5s var(--ease) var(--d,0s),transform .5s var(--ease) var(--d,0s)}
.pre .bc{opacity:0;transform:translateY(14px)}
.bc .k{font-size:9.5px;letter-spacing:.2em;color:var(--d-mu);display:flex;align-items:center;gap:8px}
.bc .k .pd{width:7px;height:7px;border-radius:50%;background:var(--warn2);box-shadow:0 0 0 0 rgba(207,156,69,.6);animation:pd 1.8s infinite}
@keyframes pd{0%{box-shadow:0 0 0 0 rgba(207,156,69,.55)}80%,100%{box-shadow:0 0 0 8px rgba(207,156,69,0)}}
.bc .row2{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:6px}
.bc .row2 b{font-family:var(--head);font-weight:400;font-size:19px;font-variant-numeric:tabular-nums}
.bc .pay{color:var(--ok2)}.bc .hold{color:var(--warn2)}
.bc p{font-size:12.5px;font-weight:var(--small);margin-top:4px;color:var(--d-fg)}
.bc .ti{font-size:15px;color:var(--ivory);margin-top:6px}
.bc .meta{font-size:12.5px;color:var(--warn2);margin-top:2px}
.bc .bar{height:4px;background:rgba(184,182,174,.15);margin-top:9px;position:relative}
.bc .bar i{position:absolute;left:0;top:0;bottom:0;width:47%;background:var(--ok2)}
.bc .bar em{position:absolute;top:-3px;bottom:-3px;left:52%;width:1px;background:var(--plat)}
.dec .btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px}
.dec .btns button{border:1px solid var(--d-ln);background:none;color:var(--ivory);font:inherit;font-size:13.5px;padding:10px;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.dec .btns button:hover{border-color:var(--plat2)}
.dec .btns .yes{border-color:var(--ok2);color:var(--ok2)}
.dec .btns .yes:hover{background:var(--ok2);color:var(--esp)}
.dec .done{display:none;gap:10px;align-items:flex-start;margin-top:10px;font-size:13px;color:var(--ivory)}
.dec .done svg{width:20px;height:20px;flex:none;color:var(--ok2)}
.dec.decided .ask{display:none}
.dec.decided .done{display:flex;animation:cxin .45s var(--ease)}
.dec.decided .k .pd{display:none}
.chips2{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chips2 span{font-size:11.5px;border:1px solid var(--d-ln);padding:3px 8px;color:var(--d-fg)}
.chips2 .ok{border-color:rgba(93,187,132,.5);color:var(--ok2)}.chips2 .wn{border-color:rgba(207,156,69,.5);color:var(--warn2)}


/* ---------- 11 how vakeel works: three scenes ---------- */
.sb{display:grid;gap:22px}
.sb-prog{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sb-prog span{display:block;height:2px;background:var(--d-ln);position:relative;overflow:hidden}
.sb-prog b{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--ok2)}
.sb-row{display:grid;gap:14px}
@media(min-width:900px){.sb-row{grid-template-columns:repeat(3,1fr)}}
.scene{position:relative;background:var(--esp2);border:1px solid var(--d-ln);cursor:pointer;transition:opacity .45s var(--ease),border-color .45s,transform .45s var(--ease)}
.scene:focus-visible{outline:2px solid var(--ok2);outline-offset:3px}
.sb[data-cur] .scene{opacity:.5}
.sb[data-cur] .scene.cur{opacity:1;border-color:rgba(184,182,174,.5);transform:translateY(-4px)}
.sb[data-cur] .scene.seen{opacity:.8}
.sc-art{background-color:#1F1D1B;background-image:radial-gradient(rgba(184,182,174,.16) 1px,transparent 1px);background-size:14px 14px;border-bottom:1px solid var(--d-ln);padding:14px 10px 8px}
.sc-art svg{width:100%;height:auto;color:var(--plat2);overflow:visible}
.sc-cap{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;padding:16px 18px 18px}
.sc-cap .n{width:28px;height:28px;border:1px solid var(--edge);display:grid;place-items:center;font-family:var(--head);color:var(--ivory);transition:background .4s,border-color .4s,color .4s}
.scene.cur .sc-cap .n{background:var(--ok2);border-color:var(--ok2);color:var(--esp)}
.sc-cap b{display:block;font-family:var(--head);font-weight:400;font-size:19px;color:var(--ivory);line-height:1.25;margin-bottom:4px}
.sc-cap p{font-size:14px;font-weight:var(--small)}
.sc-art .faint{stroke:rgba(184,182,174,.22)}
.sc-art .lbl{font-family:var(--text);font-size:10.5px;letter-spacing:.06em;stroke:none;fill:var(--d-fg)}
.sc-art .lbl.fnt{fill:var(--d-mu);font-size:9.5px;letter-spacing:.14em}
.sc-art .lbl.iv{fill:var(--ivory)}.sc-art .lbl.wv{fill:var(--warn2)}
.sc-art .num{font-family:var(--head);font-size:16px;stroke:none}
.sc-art .num.ok{fill:var(--ok2)}.sc-art .num.wv{fill:var(--warn2)}.sc-art .num.iv{fill:var(--ivory);font-size:14px}
.sk{stroke-dasharray:1;stroke-dashoffset:0}
.mem{stroke:var(--ok2);stroke-width:2.2;stroke-dasharray:1;stroke-dashoffset:0}
.need{stroke:rgba(184,182,174,.45);stroke-dasharray:3 4}
.dim path{stroke:var(--warn2)}
.flsh{fill:var(--ivory);stroke:none;opacity:0;transform-box:fill-box;transform-origin:center}
.bd{transform-box:fill-box;transform-origin:center}
.bd circle{stroke:none}.bd path{stroke:var(--esp);stroke-width:2}
.bd.ok circle{fill:var(--ok2)}.bd.hold circle{fill:var(--warn2)}
.vfpos{transform:translate(130px,148px)}
.vf{stroke:var(--ivory);stroke-width:2;transform-box:fill-box;transform-origin:center}
.arc{stroke:var(--ok2);opacity:.35}
.cd rect{stroke:rgba(184,182,174,.35);fill:#2E2B28}
.cd.c1 rect{stroke:rgba(93,187,132,.6)}.cd.c2 rect{stroke:rgba(207,156,69,.6)}
.ph2{transform-box:fill-box;transform-origin:center}
.ping{fill:var(--warn2);stroke:none;transform-box:fill-box;transform-origin:center}
.vkm path{stroke:var(--ok2)}
.cpy{stroke:var(--ok2);stroke-dasharray:3 4;transform-box:fill-box;transform-origin:top}
.yesb{stroke:var(--ok2);fill:rgba(93,187,132,.22)}
.yes-t{font-family:var(--text);font-size:12px;fill:var(--ok2);stroke:none;font-weight:500}
.tap{fill:var(--ok2);stroke:none;opacity:0;transform-box:fill-box;transform-origin:center}
.dec2{stroke:var(--plat);stroke-dasharray:6 5;transform-box:fill-box;transform-origin:left}
.pay2{stroke:var(--ivory);stroke-width:2.2;stroke-dasharray:1;stroke-dashoffset:0}
.ah{stroke:var(--plat)}.ah2{stroke:var(--ivory);stroke-width:2.2}
.tokp{transform:translate(198px,150px)}
.tok rect{fill:var(--ivory);stroke:none}.tok text{fill:var(--esp);font-weight:500;font-size:9px;letter-spacing:.08em}
/* scene animations: they run when the scene gets .run; at rest every scene shows its finished state */
@keyframes skd{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
@keyframes vfin{from{opacity:0;transform:scale(1.35)}to{opacity:1;transform:scale(1)}}
@keyframes vfmove{from{transform:translate(182px,48px)}to{transform:translate(130px,148px)}}
@keyframes flashA{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(2.8)}}
@keyframes arcP{0%{opacity:0}35%{opacity:1}100%{opacity:.35}}
@keyframes cdIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes buzz{0%,100%{transform:rotate(0)}20%{transform:rotate(-2.5deg)}45%{transform:rotate(2.5deg)}70%{transform:rotate(-1.5deg)}}
@keyframes tapA{0%{opacity:.85;transform:scale(.5)}100%{opacity:0;transform:scale(3.6)}}
@keyframes yesF{from{fill:rgba(93,187,132,0)}to{fill:rgba(93,187,132,.22)}}
@keyframes wipeX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes wipeY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes noteMove{from{transform:translate(120px,150px)}to{transform:translate(198px,150px)}}
.scene.run .sk{animation:skd .9s var(--ease) both}
.scene.run .sc1 .mem{animation:skd .8s var(--ease) .5s both}
.scene.run .vf{animation:vfin .4s var(--ease) .8s both}
.scene.run .vfpos{animation:vfmove .8s var(--ease) 2.2s both}
.scene.run .flsh{animation:flashA .6s ease-out 1.3s both}
.scene.run .b1{animation:popIn .4s cubic-bezier(.3,1.5,.5,1) 1.55s both}
.scene.run .tag1{animation:fadeIn .4s 1.75s both}
.scene.run .dim,.scene.run .need,.scene.run .sc1 .lbl.fnt{animation:fadeIn .5s 3.0s both}
.scene.run .b2{animation:popIn .4s cubic-bezier(.3,1.5,.5,1) 3.4s both}
.scene.run .tag2{animation:fadeIn .4s 3.6s both}
.scene.run .a1{animation:arcP 1.2s ease-out .35s both}.scene.run .a2{animation:arcP 1.2s ease-out .5s both}.scene.run .a3{animation:arcP 1.2s ease-out .65s both}
.scene.run .ph2{animation:buzz .45s 1.1s both}
.scene.run .c1{animation:cdIn .5s var(--ease) 1.2s both}.scene.run .c2{animation:cdIn .5s var(--ease) 1.6s both}.scene.run .c3{animation:cdIn .5s var(--ease) 2.0s both}
.scene.run .ping{animation:popIn .4s cubic-bezier(.3,1.5,.5,1) 2.3s both}
.scene.run .tap{animation:tapA .7s ease-out .5s both}
.scene.run .yesb{animation:yesF .3s .6s both}
.scene.run .dec2{animation:wipeX .7s var(--ease) 1s both}
.scene.run .ah1,.scene.run .l1{animation:fadeIn .3s 1.6s both}
.scene.run .cpy{animation:wipeY .5s var(--ease) 1.8s both}
.scene.run .cpyt{animation:fadeIn .3s 2.1s both}
.scene.run .pay2{animation:skd .8s var(--ease) 2.3s both}
.scene.run .ah2,.scene.run .l2{animation:fadeIn .3s 2.9s both}
.scene.run .tokp{animation:noteMove 1s var(--ease) 2.5s both}
.scene.run .tok{animation:fadeIn .3s 2.4s both}
.scene.run .b3{animation:popIn .4s cubic-bezier(.3,1.5,.5,1) 3.5s both}

/* ---------- 12: finish classes you can tap, and the drawn villa ---------- */
.cx-cls{position:relative;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--ln);margin-top:24px}
.cx-cls button{position:relative;z-index:1;border:0;background:none;font:inherit;text-align:left;padding:12px 12px 11px;cursor:pointer;color:var(--hd);display:grid;gap:3px;transition:color .35s}
.cx-cls button+button{border-left:1px solid var(--ln)}
.cx-cls button b{font-weight:500;font-size:14.5px;color:inherit}
.cx-cls button span{font-size:11.5px;color:var(--mu);font-weight:var(--small);transition:color .35s}
.cx-cls button:hover:not([aria-checked="true"]){background:var(--sunk)}
.cx-cls button[aria-checked="true"]{color:var(--fillfg)}
.cx-cls button[aria-checked="true"] span{color:rgba(249,247,242,.72)}
.cx-cls button:focus-visible{outline:2px solid var(--okc);outline-offset:-2px}
.cx-cls i{position:absolute;top:0;left:0;width:25%;height:100%;background:var(--fill);transition:transform .5s var(--ease)}
@media(max-width:560px){.cx-cls{grid-template-columns:1fr 1fr}.cx-cls i{width:50%;height:50%}.cx-cls button:nth-child(4){border-left:0}.cx-cls button:nth-child(4),.cx-cls button:nth-child(5){border-top:1px solid var(--ln)}}
.cx-psf{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:18px}
.cx-psf b{font-family:var(--head);font-weight:400;font-size:26px;color:var(--hd);font-variant-numeric:tabular-nums}
.cx-psf span{font-size:14px;color:var(--mu)}
.cx-house{height:auto;min-height:150px;padding-top:4px}
.cx-house svg{height:auto;width:100%;max-width:560px}
.mzw{transform-box:fill-box;transform-origin:50% 100%;transition:transform .55s var(--ease)}
.mz .opt{transition:opacity .5s var(--ease),transform .55s var(--ease);transform-box:fill-box;transform-origin:50% 100%}
.mz .opt.off{opacity:0;transform:scaleY(.4)}
.mz .wtr{stroke:var(--okc);opacity:.8}
.mz .fin{stroke-width:1}
.mz .hatch{stroke-width:.9;opacity:.55}
.cxsv .crane{opacity:0;transition:opacity .5s}
.cxsv.build .crane{opacity:1}
.cxsv.build .mz path,.cxsv.build .mz rect{stroke-dasharray:5 4}
.cxsv .ofc{opacity:0;transition:opacity .5s}
.cxsv.office .ofc{opacity:1}
.cxsv.office .mzw{opacity:0}
.cxsv .mzw{transition:transform .55s var(--ease),opacity .5s}

/* ---------- 14 two ways ---------- */
.tw{--lab:170px}
.tw-ctl{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.tw-play{width:46px;height:46px;flex:none;border:1px solid var(--hd);background:var(--raise);display:grid;place-items:center;cursor:pointer;color:var(--hd);transition:background .25s,color .25s}
.tw-play:hover{background:var(--fill);color:var(--fillfg)}
.tw-play svg{width:16px;height:16px}.tw-play .tw-i-pause{display:none}
.tw.playing .tw-play .tw-i-pause{display:block}.tw.playing .tw-play .tw-i-play{display:none}
.tw-ctl .cx-r{flex:1;margin:0}
.tw-m{font-family:var(--head);font-size:21px;color:var(--hd);min-width:110px;text-align:right;font-variant-numeric:tabular-nums}
.tw-tracks{display:grid;gap:10px}
.tw-lane{display:grid;grid-template-columns:var(--lab) minmax(0,1fr);align-items:center;gap:16px}
.tw-lab{display:flex;align-items:center;gap:9px;font-size:15px;color:var(--hd)}
.tw-lab i{width:9px;height:9px;border-radius:50%}
.wo .tw-lab i{background:var(--bad)}.wi .tw-lab i{background:var(--ok)}
.tw-tr{position:relative;height:34px}
.wo .tw-tr{color:var(--bad)}.wi .tw-tr{color:var(--ok)}
.tw-tr::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--ln)}
.tw-fill{position:absolute;left:0;top:50%;height:2px;margin-top:-1px;width:100%;background:currentColor;opacity:.55}
.tw-head{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;left:100%;background:var(--hd)}
.tw-mk{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:1.5px solid currentColor;background:var(--ivory);border-radius:50%;transition:background .3s,transform .35s var(--ease)}
.tw-mk.on{background:currentColor;transform:scale(1.15)}
.tw-mk.now{box-shadow:0 0 0 6px color-mix(in srgb,currentColor 18%,transparent)}
.tw-axis{display:grid;grid-template-columns:var(--lab) minmax(0,1fr);gap:16px}
.tw-axis div{position:relative;height:20px}
.tw-axis b{position:absolute;top:0;transform:translateX(-50%);font-weight:var(--small);font-size:11.5px;color:var(--mu)}
.tw-axis b.ev{color:var(--hd);font-weight:500}
.tw-cards{display:grid;gap:12px;margin-top:24px}
@media(min-width:820px){.tw-cards{grid-template-columns:1fr 1fr}}
.tw-card{background:var(--raise);border:1px solid var(--ln);border-top:3px solid var(--bad);padding:18px 20px 18px;min-height:150px}
.tw-card.wi{border-top-color:var(--ok)}
.tw-card .k{display:block;margin-bottom:8px}
.tw-card b{display:block;font-family:var(--head);font-weight:400;font-size:21px;color:var(--hd);line-height:1.25;margin-bottom:6px}
.tw-card p{font-size:15px}
.tw-card.swap{animation:cxin .45s var(--ease)}
.tw-sum{display:grid;gap:1px;background:var(--ln);border:1px solid var(--ln);margin-top:14px}
@media(min-width:820px){.tw-sum{grid-template-columns:repeat(3,1fr)}}
.tw-sum>div{background:var(--raise);padding:14px 16px}
.tw-sum .vals{display:flex;justify-content:space-between;gap:12px;margin-top:6px;font-size:15px;font-variant-numeric:tabular-nums}
.wo-v{color:var(--bad)}.wi-v{color:var(--ok);text-align:right}
.tw-sum .vals span.flash2{animation:flashv2 .9s var(--ease)}
@keyframes flashv2{0%{transform:scale(1.08)}100%{transform:none}}
.tw-note{font-size:12.5px;color:var(--mu);margin-top:12px;font-weight:var(--small)}
@media(max-width:640px){.tw-lane,.tw-axis{grid-template-columns:1fr;gap:4px}.tw-axis>span{display:none}.tw-lab{font-size:13.5px}.tw-ctl{gap:10px}.tw-m{min-width:84px;font-size:18px}}


/* ---------- links ---------- */
.tlink{display:inline-flex;align-items:center;gap:8px;color:var(--hd);text-decoration:none;font-size:14.5px;border-bottom:1px solid var(--ln);padding:6px 0;transition:border-color .3s}
.tlink svg{width:15px;height:15px;transition:transform .35s var(--ease)}
.tlink:hover{border-color:var(--hd)}
button.tlink{background:none;border:0;border-bottom:1px solid var(--ln);border-radius:0;cursor:pointer;font:inherit;font-size:14.5px}
.v-more .tlink{margin-right:10px}.tlink:hover svg{transform:translateX(4px)}
.sb[data-cur] .scene.wait .sc-art svg{opacity:.16;transition:opacity .3s}
.sc-art svg{transition:opacity .35s}
.fl-never{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13.5px;font-weight:var(--small);color:var(--d-mu)}
.fl-never span{display:inline-flex;align-items:center;gap:7px}
.fl-never svg{width:14px;height:14px;color:var(--bad2)}

/* site fit */
@media(max-width:760px){.bill{padding:18px 16px 14px}
  .ill{display:grid;grid-template-columns:118px minmax(0,1fr);gap:4px 14px;align-items:start;padding:14px}
  .ill svg{grid-row:1/4;margin:0;align-self:center}.ill h3{font-size:18px;margin:0}.ill p{margin:0;font-size:13.5px}.ill .hint{display:none}
  .hb{padding:22px 18px 18px}.hb .ic{width:38px;height:38px;margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){[data-anim] *,[data-anim] *::before,[data-anim] *::after,.cx *,.sb *{animation:none!important;transition:none!important}}
.v-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cx-mini{display:none}
@media(max-width:979px){.cx-mini{display:flex;position:fixed;left:0;right:0;top:66px;z-index:25;justify-content:space-between;align-items:center;gap:12px;padding:10px 18px;background:rgba(36,34,32,.97);border-bottom:1px solid rgba(184,182,174,.25);transform:translateY(-150%);transition:transform .25s}
  .cx-mini.on{transform:none}.cx-mini b{font-family:var(--head);font-weight:400;font-size:20px;color:#F9F7F2}.cx-mini b small{font-family:var(--text);font-size:12px;color:#9A9486}
  .cx-mini span>small{display:block;font-size:12px;color:#C8C2B5}.cx-mini a{color:#F9F7F2;font-size:13px;border:1px solid rgba(184,182,174,.45);padding:8px 12px;text-decoration:none;white-space:nowrap}}
/* phone: compact calculator tiles */
@media(max-width:639px){.cx-tile{grid-template-columns:44px minmax(0,1fr);gap:2px 14px;align-items:center;padding:14px 16px}.cx-tile svg{grid-row:1/3;width:44px;height:44px}.cx-tile b{font-size:19px}}

/* ---------- a check, start to finish: as found / after the fix ---------- */
.evd{display:grid;gap:34px}
@media(min-width:1000px){.evd{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:56px;align-items:start}}
.ev-seg{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;border:1px solid var(--hd);background:var(--raise);margin-bottom:14px}
.ev-seg i{position:absolute;top:0;bottom:0;left:0;width:50%;background:var(--hd);transition:transform .45s var(--ease)}
.ev-seg[data-v="fixed"] i{transform:translateX(100%)}
.ev-seg button{position:relative;z-index:1;background:transparent;border:0;padding:10px 16px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--hd);transition:color .35s}
.ev-seg button[aria-pressed="true"]{color:var(--bg)}
.ev-frame{position:relative;aspect-ratio:3/2;overflow:hidden;border:1px solid var(--ln);background:#E9DFCC;cursor:ew-resize;touch-action:pan-y;user-select:none;box-shadow:0 30px 60px rgba(36,34,32,.14)}
.ev-layer{position:absolute;inset:0}
.ev-layer>svg.ev-svg,.ev-layer>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ev-layer.found{clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.ev-ann{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ev-ann circle{fill:none;stroke:#E0533D;stroke-width:2.5}
.ev-ann path{fill:none;stroke:#E0533D;stroke-width:1.5}
.ev-chip{position:absolute;transform:translate(-50%,-100%);margin-top:-16px;background:rgba(26,24,22,.88);color:#F9F7F2;font-size:12px;letter-spacing:.02em;padding:5px 9px;white-space:nowrap;pointer-events:none;transition:opacity .4s var(--ease) var(--d),transform .4s var(--ease) var(--d);border-left:2px solid #E0533D}
.pre .ev-chip{opacity:0;transform:translate(-50%,-80%)}
.ev-tag{position:absolute;top:14px;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:#fff}
.ev-tag svg{width:14px;height:14px}
.ev-tag.bad{left:14px;background:#A3402F}
.ev-tag.ok{right:14px;background:#2F8F5B}
.ev-handle{position:absolute;top:0;bottom:0;left:var(--x);width:0;z-index:3;outline:0}
.ev-handle::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:#F9F7F2;box-shadow:0 0 0 1px rgba(26,24,22,.25)}
.ev-handle i{position:absolute;top:50%;left:0;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;background:#F9F7F2;box-shadow:0 6px 18px rgba(26,24,22,.3)}
.ev-handle i::before,.ev-handle i::after{content:"";position:absolute;top:50%;width:7px;height:7px;border-left:2px solid #242220;border-bottom:2px solid #242220;margin-top:-4px}
.ev-handle i::before{left:11px;transform:rotate(45deg)}.ev-handle i::after{right:11px;transform:rotate(-135deg)}
.ev-handle:focus-visible i{outline:2px solid var(--ok);outline-offset:2px}
.ev-legend{display:none;list-style:none;margin:12px 0 0;padding:0;gap:6px 14px;flex-wrap:wrap;font-size:13px;color:var(--hd)}
.ev-legend li{display:inline-flex;align-items:center;gap:7px}.ev-legend li::before{content:"";width:10px;height:10px;border:2px solid #E0533D;border-radius:50%}
.ev-cap{font-size:13px;color:var(--mu);font-weight:var(--small);margin:12px 0 0}
.ev-steps{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative}
.ev-steps::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:1px;background:var(--ln)}
.ev-steps li{position:relative;padding:0 0 26px 34px;transition:opacity .55s var(--ease) var(--d),translate .55s var(--ease) var(--d)}
.pre .ev-steps li{opacity:0;translate:0 12px}
.ev-steps li::before{content:"";position:absolute;left:0;top:5px;width:15px;height:15px;border-radius:50%;background:var(--bg);border:2px solid var(--acc)}
.ev-steps li.bad::before{border-color:var(--bc);background:var(--bc)}
.ev-steps li.hold::before{border-color:var(--wc);background:var(--wc)}
.ev-steps li.ok::before{border-color:var(--okc);background:var(--okc)}
.ev-when{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mu);font-weight:500;margin-bottom:5px}
.ev-steps b{display:block;font-family:var(--head);font-weight:400;font-size:clamp(19px,1.7vw,22px);color:var(--hd);line-height:1.25}
.ev-steps p{margin:6px 0 0;font-size:15px;font-weight:var(--small)}
.ev-amt{display:inline-block;margin-top:9px;font-family:var(--head);font-size:17px;color:var(--hd);border:1px solid var(--ln);padding:4px 10px}
.bad .ev-amt{color:var(--bc)}.hold .ev-amt{color:var(--wc);border-color:var(--wc)}.ok .ev-amt{color:var(--okc);border-color:var(--okc)}
.ev-out{margin-top:6px;font-family:var(--head);font-size:clamp(19px,1.8vw,23px);color:var(--hd);line-height:1.3;max-width:34ch}
@media(max-width:760px){.ev-chip{display:none}.ev-legend{display:flex}.evd{gap:24px}.ev-seg{display:grid;width:100%}.ev-seg button{padding:10px 6px;font-size:11px;letter-spacing:.08em}.ev-chip{font-size:10.5px;padding:4px 7px}.ev-tag{top:10px;font-size:10px;padding:5px 8px}.ev-tag.bad{left:10px}.ev-tag.ok{right:10px}.ev-steps li{padding-bottom:22px}.ev-steps p{font-size:14.5px}}

/* ---------- the full fee estimate: a report in its own window ---------- */
.fr{--k:#1A1816;--m:#77736B;--l:#E4DED3;--pg:#FFFFFF;--g:#2F8F5B;--gb:#E3F0E7;--a:#B07C22;
  position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(14,13,12,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:frf .3s ease;color:#3F3B33;font-family:var(--text)}
.fr[hidden]{display:none}
@keyframes frf{from{opacity:0}}
.fr *{box-sizing:border-box}
.fr-w{position:relative;width:min(860px,100%);height:min(900px,100%);display:flex;flex-direction:column;background:#F4F1EA;border-radius:14px;overflow:hidden;box-shadow:0 50px 120px rgba(0,0,0,.5);animation:frw .45s var(--ease)}
@keyframes frw{from{opacity:0;transform:translateY(18px) scale(.98)}}
.fr-bar{flex:none;display:flex;align-items:center;gap:12px;height:58px;padding:0 12px 0 18px;background:var(--k);color:#F2EFE8}
.fr-m{display:grid;place-items:center;width:28px;height:28px;border:1px solid #6A665F;font-family:var(--head);font-size:14px}
.fr-bar>b{font-family:var(--head);font-weight:400;font-size:18px;white-space:nowrap}
.fr-sp{flex:1}
.fr-pdf{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border:1px solid #4A4640;border-radius:20px;background:none;color:#F2EFE8;font:inherit;font-size:13px;letter-spacing:.02em;cursor:pointer;transition:background .2s,opacity .3s}
.fr-pdf:hover{background:#2C2925}.fr-pdf svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fr.running .fr-pdf{opacity:.3;pointer-events:none}
.fr-x{width:38px;height:38px;display:grid;place-items:center;border:1px solid #3C3934;border-radius:50%;background:none;color:#F2EFE8;cursor:pointer}
.fr-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}.fr-x:hover{background:#2C2925}
.fr-b{flex:1;position:relative;overflow:hidden}
/* the calculation */
.fr-run{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:48px;padding:30px;background:radial-gradient(600px 380px at 35% 45%,rgba(93,187,132,.12),transparent 60%),#141210;color:#E9E4DA}
.fr-run[hidden]{display:none}
.fr-ring{position:relative;width:200px;height:200px;flex:none}
.fr-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.fr-ring circle{fill:none;stroke-width:7}.fr-ring .tk{stroke:#2A2724}
.fr-ring .pg{stroke:#5DBB84;stroke-linecap:round;stroke-dasharray:0 100;filter:drop-shadow(0 0 8px rgba(93,187,132,.5))}
.fr-ring .orb{stroke:#4A4640;stroke-width:1;stroke-dasharray:2 6;transform-origin:60px 60px;animation:frsp 8s linear infinite}
@keyframes frsp{to{transform:rotate(360deg)}}
.fr-pct{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--head);font-weight:400;font-size:40px;color:#F2EFE8;font-variant-numeric:tabular-nums}
.fr-pct small{font-family:var(--text);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#8E897F;margin-top:6px}
.fr-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;max-width:360px}
.fr-steps li{display:flex;align-items:center;gap:12px;font-size:15px;color:#5E5A53;transition:color .3s}
.fr-steps li i{position:relative;width:18px;height:18px;border-radius:50%;border:1.5px solid #4A4640;flex:none}
.fr-steps li.go{color:#F2EFE8}.fr-steps li.go i{border-color:#5DBB84;border-top-color:transparent;animation:frsp .8s linear infinite}
.fr-steps li.dn{color:#B9B3A7}.fr-steps li.dn i{border-color:#5DBB84;background:#5DBB84}
.fr-steps li.dn i::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #141210;border-width:0 2px 2px 0;transform:rotate(45deg)}
.fr-steps li em{font-style:normal;color:#8E897F}
/* the report */
.fr-doc{position:absolute;inset:0;overflow:auto;padding:26px 30px 34px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.fr-doc[hidden]{display:none}
.fr-doc>*{animation:frin .55s var(--ease) both}
.fr-doc>*:nth-child(2){animation-delay:.07s}.fr-doc>*:nth-child(3){animation-delay:.14s}.fr-doc>*:nth-child(4){animation-delay:.21s}.fr-doc>*:nth-child(n+5){animation-delay:.28s}
@keyframes frin{from{opacity:0;transform:translateY(10px)}}
.fr-page{background:var(--pg);border:1px solid var(--l);border-radius:12px;padding:26px 28px;margin-bottom:14px}
.fr-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;border-bottom:1px solid var(--l);padding-bottom:16px;margin-bottom:18px}
.fr-logo{display:flex;align-items:center;gap:10px;font-family:var(--head);letter-spacing:.22em;font-size:16px;color:var(--k)}
.fr-logo i{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--k);font-style:normal;font-size:14px;letter-spacing:0}
.fr-meta{text-align:right;font-size:12px;color:var(--m);line-height:1.6}.fr-meta b{display:block;color:var(--k);font-weight:500;letter-spacing:.06em}
.fr-k{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--m);font-weight:500}
.fr-h{font-family:var(--head);font-weight:400;font-size:24px;color:var(--k);margin:4px 0 2px;line-height:1.2}
.fr-big{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:14px 0 4px}
.fr-big b{font-family:var(--head);font-weight:400;font-size:clamp(40px,6vw,58px);line-height:1;color:var(--k);font-variant-numeric:tabular-nums}
.fr-big span{font-size:15px;color:var(--m)}
.fr-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--l);border:1px solid var(--l);border-radius:10px;overflow:hidden;margin-top:18px}
.fr-tiles div{background:#FAF8F3;padding:14px 16px}
.fr-tiles b{display:block;font-family:var(--head);font-weight:400;font-size:22px;color:var(--k);font-variant-numeric:tabular-nums}
.fr-tiles span{font-size:12.5px;color:var(--m)}
.fr-two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.fr-two>.fr-page{margin:0}
.fr-sec h4{font-family:var(--head);font-weight:400;font-size:19px;color:var(--k);margin:0 0 12px}
.fr-dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0;font-size:14px}
.fr-dl dt{color:var(--m)}.fr-dl dd{margin:0;text-align:right;color:var(--k);font-weight:500}
.fr-wk{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin:4px 0 10px}
.fr-wk i{display:grid;place-items:center;height:38px;border:1px solid var(--l);border-radius:7px;font-style:normal;font-size:12px;color:var(--m)}
.fr-wk i.on{background:var(--k);border-color:var(--k);color:#F2EFE8;font-weight:500}
.fr-note{margin:8px 0 0;font-size:13px;color:var(--m);line-height:1.5}
.fr-tb{width:100%;border-collapse:collapse;font-size:14px}
.fr-tb td{padding:10px 0;border-bottom:1px solid #EFEAE1;vertical-align:top}
.fr-tb td small{display:block;font-size:12.5px;color:var(--m);margin-top:2px}
.fr-tb td.r{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--k);padding-left:14px}
.fr-tb tr.cr td.r{color:var(--g)}
.fr-tb tr.sum td{border-bottom:0;padding-top:12px;font-family:var(--head);font-size:18px;color:var(--k)}
.fr-tl{margin:6px 0 2px}
.fr-tl .bar{display:flex;height:34px;border-radius:8px;overflow:hidden;background:#EFEAE1}
.fr-tl .bar i{display:flex;align-items:center;padding:0 10px;font-style:normal;font-size:11.5px;color:#fff;white-space:nowrap;overflow:hidden;transform-origin:left;animation:frgx .9s var(--ease) .3s both}
.fr-tl .bar .p{background:#9A9486}.fr-tl .bar .b{background:var(--k)}
@keyframes frgx{from{transform:scaleX(0)}}
.fr-tl .ax{display:flex;justify-content:space-between;font-size:11px;color:var(--m);margin-top:5px}
.fr-tl .lg{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;color:var(--m);margin-top:10px}
.fr-tl .lg span{display:inline-flex;align-items:center;gap:7px}.fr-tl .lg i{width:12px;height:12px;border-radius:3px}
.fr-vs .r{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;align-items:center;margin:10px 0;font-size:13.5px}
.fr-vs .r.us{font-weight:500;color:var(--k)}
.fr-vs .b{position:relative;height:18px}
.fr-vs .b i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:#C9C2B3;transform-origin:left;animation:frgx .9s var(--ease) var(--d,0s) both}
.fr-vs .r.us .b i{background:var(--g)}
.fr-vs .b i.lt{opacity:.45}
.fr-disc p{margin:6px 0 0;font-size:12.5px;line-height:1.55;color:var(--m)}
.cx-fine{margin:-6px 0 18px;font-size:12px;line-height:1.5;color:var(--mu);font-weight:var(--small);max-width:62ch}.cx-est .cx-fine{margin:12px 0 0;font-size:11.5px;color:inherit;opacity:.7}
.fr-vs .b em{position:absolute;top:0;font-style:normal;font-size:12.5px;line-height:18px;color:var(--k);white-space:nowrap}
.fr-ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px}
.fr-ul li{display:flex;gap:10px;align-items:baseline}.fr-ul li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--g);flex:none;transform:translateY(-2px)}
.fr-end{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;justify-content:space-between;padding:4px 2px 0}
.fr-end p{margin:0;font-size:12.5px;color:var(--m);max-width:60ch}
.fr-acts{display:flex;gap:10px;flex-wrap:wrap}
.fr-btn.busy,.fr-pdf.busy{opacity:.55;pointer-events:none;cursor:progress}
.fr-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 18px;border-radius:10px;border:1px solid var(--k);background:transparent;color:var(--k);font:inherit;font-size:14.5px;text-decoration:none;cursor:pointer;transition:background .2s,color .2s}
.fr-btn.go{background:var(--k);color:#F2EFE8}.fr-btn:hover{background:#ECE7DE}.fr-btn.go:hover{background:#2C2925}
.fr-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
body.fr-on{overflow:hidden}
@media(max-width:760px){
  .fr{padding:0}.fr-w{width:100%;height:100%;border-radius:0}
  .fr-bar{height:54px;padding:0 10px 0 14px;gap:9px}.fr-bar>b{font-size:16px}
  .fr-pdf{height:34px;padding:0 11px;font-size:12px}
  .fr-run{flex-direction:column;gap:28px;justify-content:center}.fr-ring{width:160px;height:160px}.fr-pct{font-size:34px}.fr-steps li{font-size:14px}
  .fr-doc{padding:14px 12px 28px}
  .fr-page{padding:18px 16px;border-radius:10px;margin-bottom:12px}
  .fr-hd{flex-direction:column;gap:8px}.fr-meta{text-align:left}
  .fr-tiles{grid-template-columns:1fr}.fr-tiles div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:11px 14px}.fr-tiles b{font-size:19px;order:2}
  .fr-two{grid-template-columns:1fr;gap:12px;margin-bottom:12px}
  .fr-vs .r{grid-template-columns:1fr;gap:4px}
  .fr-end .fr-acts{width:100%;flex-direction:column}.fr-end .fr-btn{width:100%}
}
@media print{
  body.fr-on>*:not(.fr){display:none!important}
  body.fr-on{overflow:visible!important;background:#fff!important}
  body.fr-on .fr{position:static;display:block;padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;animation:none}
  body.fr-on .fr-w{width:100%;height:auto;border-radius:0;box-shadow:none;background:#fff;overflow:visible;animation:none}
  body.fr-on .fr-bar,body.fr-on .fr-run,body.fr-on .fr-acts{display:none!important}
  body.fr-on .fr-b{overflow:visible}
  body.fr-on .fr-doc{position:static;overflow:visible;padding:0}
  body.fr-on .fr-doc>*{animation:none!important}
  .fr-page{break-inside:avoid;border-color:#ddd;padding:16px 20px;margin-bottom:9px}.fr-two{gap:9px;margin-bottom:9px}.fr-end{break-inside:avoid}.fr-tb td{padding:7px 0}.fr-vs .r{margin:6px 0}.fr-big{margin:8px 0 2px}.fr-tiles{margin-top:12px}
  .fr-tl .bar i,.fr-vs .b i{animation:none!important}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  @page{margin:10mm}
}