/* ==========================================================================
   VFTech extras, shared by every design: calculator, tier finder, FAQ, phone booking bar.
   Built only from each design's own tokens, so they take on that design's colour and type.
   ========================================================================== */
.x-sect{--x-accent:var(--accent,var(--blueline));--x-on-accent:var(--on-accent,var(--on-ink));--x-line:var(--rule-strong);--x-soft:var(--rule)}
.x-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,40px)}
.x-wrap > *,.x-calc > *,.x-finder > *,.x-fields > *{min-width:0}
.x-money input{width:100%}
.x-head{display:grid;gap:12px;max-width:44rem}
.x-head h2{margin:0}
.x-kicker{margin:0;font:500 11px/1.4 var(--f-note);letter-spacing:.14em;text-transform:uppercase;color:var(--blueline)}
.x-lede{margin:0;color:var(--graphite);max-width:40em}

/* ---- calculator ---- */
.x-calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.x-fields{display:grid;gap:18px}
.x-field{display:grid;gap:8px;font-size:15px;color:var(--ink)}
.x-field[hidden]{display:none}
.x-field > span:first-child{font:500 12px/1.4 var(--f-note);letter-spacing:.06em;text-transform:uppercase;color:var(--graphite)}
.x-money{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--x-line);padding-bottom:6px}
.x-money i{font-style:normal;color:var(--graphite)}
.x-money b{font-weight:400;font-size:13px;color:var(--graphite);white-space:nowrap}
.x-money input{flex:1;min-width:0;border:0;background:none;color:var(--ink);font:500 clamp(20px,2vw,26px)/1.2 var(--f-display);padding:4px 0;font-variant-numeric:tabular-nums}
.x-money input:focus{outline:none}
.x-money:focus-within{border-bottom-color:var(--blueline)}
.x-field select{width:100%;min-height:46px;padding:0 12px;border:1px solid var(--x-line);border-radius:0;background:var(--sheet,var(--paper));color:var(--ink);font:inherit;font-size:15px}
.x-field select:focus-visible,.x-field input[type=range]:focus-visible{outline:2px solid var(--blueline);outline-offset:2px}
.x-field input[type=range]{width:100%;accent-color:var(--blueline)}
.x-field output{color:var(--ink);font-weight:600}
.x-result{display:grid;gap:18px;padding:clamp(20px,2.4vw,32px);border:1px solid var(--x-line);background:var(--sheet,var(--paper))}
.x-bars{display:grid;gap:8px}
.x-bar{height:10px;background:var(--x-soft);position:relative;overflow:hidden}
.x-bar span{position:absolute;inset:0 auto 0 0;width:calc(var(--v,1) * 100%);background:var(--graphite);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.x-bar-own span{background:var(--x-accent)}
.x-totals{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0}
.x-totals > div{display:grid;gap:2px}
.x-totals dt{font:500 12px/1.4 var(--f-note);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite)}
.x-totals dd{margin:0;font:600 clamp(28px,3vw,40px)/1.1 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums}
.x-totals > div:last-child dd{color:var(--blueline)}
.x-totals small{font-size:13px;color:var(--graphite)}
.x-verdict{margin:0;font-size:clamp(16px,1.4vw,19px);line-height:1.45;color:var(--ink)}
.x-fine{margin:0;font-size:13px;line-height:1.55;color:var(--graphite)}

/* ---- tier finder ---- */
.x-finder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,3vw,48px);align-items:start}
.x-q{margin:0;padding:0;border:0;display:grid;gap:8px}
.x-q[hidden]{display:none}
.x-q legend{margin-bottom:8px;font:500 12px/1.4 var(--f-note);letter-spacing:.06em;text-transform:uppercase;color:var(--graphite)}
.x-q label{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--x-soft);cursor:pointer;font-size:15px;color:var(--ink);transition:border-color .15s,background-color .15s}
.x-q label:hover{border-color:var(--x-line)}
.x-q label:has(input:checked){border-color:var(--blueline);background:color-mix(in srgb,var(--blueline) 8%,transparent)}
.x-q input{accent-color:var(--blueline);width:16px;height:16px;flex:none;margin:0}
.x-finder > .x-q{grid-column:1}
.x-answer{grid-column:2;grid-row:1 / span 3;align-self:start;position:sticky;top:calc(var(--head-h,64px) + 24px);display:grid;gap:10px;padding:clamp(20px,2.4vw,32px);border:1px solid var(--blueline);background:var(--sheet,var(--paper))}
.x-answer h3{margin:0;font-size:clamp(26px,2.6vw,36px);line-height:1.1}
.x-price{margin:0;font:600 18px/1.3 var(--f-display);color:var(--blueline);font-variant-numeric:tabular-nums}
.x-answer p{margin:0}
.x-answer > p:not(.x-kicker):not(.x-price){color:var(--graphite)}

/* ---- FAQ ---- */
.x-faq{display:grid;border-top:1px solid var(--x-line);max-width:56rem}
.x-faq details{border-bottom:1px solid var(--x-line)}
.x-faq summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 0;cursor:pointer;list-style:none;font:500 clamp(17px,1.4vw,20px)/1.35 var(--f-display);color:var(--ink)}
.x-faq summary::-webkit-details-marker{display:none}
.x-faq summary::after{content:"+";flex:none;font:400 24px/1 var(--f-note);color:var(--blueline);transition:transform .25s ease}
.x-faq details[open] summary::after{transform:rotate(45deg)}
.x-faq summary:hover{color:var(--blueline)}
.x-faq summary:focus-visible{outline:2px solid var(--blueline);outline-offset:4px}
.x-faq details p{margin:0 0 22px;max-width:44em;color:var(--graphite);line-height:1.65}

/* ---- phones: the booking bar ---- */
.x-bookbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:1px solid var(--rule-strong);
  box-shadow:0 -10px 30px -18px rgb(0 0 0/.5);animation:x-bar-in .3s cubic-bezier(.2,.8,.2,1)}
.x-bookbar[hidden]{display:none}
.x-bookbar a{flex:1;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:0 18px;
  background:var(--accent,var(--ink));color:var(--on-accent,var(--paper));text-decoration:none;font:600 16px/1.2 var(--f-display)}
.x-bookbar small{flex:none;font:500 12px/1.3 var(--f-note);color:var(--graphite)}
@keyframes x-bar-in{from{transform:translateY(100%)}to{transform:none}}
/* the design switcher sits above the bar while it is showing */
.has-bookbar .design-switch{bottom:calc(84px + env(safe-area-inset-bottom,0px))!important;transition:bottom .3s ease}
.motion-paused .x-bookbar{animation:none}

@media (max-width:860px){
  .x-calc,.x-finder{grid-template-columns:1fr}
  .x-answer{grid-column:auto;grid-row:auto;position:static}
  .x-totals{grid-template-columns:1fr 1fr}
}
@media (max-width:420px){.x-totals{grid-template-columns:1fr}.x-bookbar small{display:none}}
@media print{.x-bookbar{display:none}}

.x-bookbar a{min-width:0;white-space:nowrap;font-size:clamp(13px,4.5vw,16px)}
.x-bookbar{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}