/* Vakeel on a phone. Loaded only at 760px and below.
   One idea per screen: a step number, a short heading and intro, swipe for the detail, then a clear "Next". */

.dt-only,.m-hide{display:none!important}
.mb-only{display:inline}

/* rhythm */
.v-sec{padding:62px 0 54px}
.v-sec .v-shead{margin-bottom:22px;gap:10px}
.v-h2{font-size:27px;line-height:1.16}
.v-sec .v-shead p{font-size:15.5px;line-height:1.55}
.v-more{margin-top:22px;gap:14px}
.v-more .v-btn{width:100%}

/* the step number and the next step */
.v-stepn{display:inline-grid;place-items:center;width:28px;height:28px;background:var(--hd);color:var(--bg);font-family:var(--text);font-size:12px;font-weight:500;letter-spacing:.06em;font-variant-numeric:tabular-nums;line-height:1}
.v-shead:has(.v-stepn){grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center}
.v-shead:has(.v-stepn)>*:not(.v-stepn):not(.v-k){grid-column:1/-1}
.v-shead:has(.v-stepn) .v-k::before{display:none}
.br-copy .v-stepn{margin-right:12px;vertical-align:middle}
.v-next{display:flex;align-items:center;gap:12px;margin-top:30px;padding-top:16px;border-top:1px solid var(--ln);color:var(--hd);text-decoration:none;font-family:var(--head);font-size:20px;line-height:1.2}
.v-next span{font-family:var(--text);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--mu)}
.v-next svg{width:22px;height:22px;margin-left:auto;flex:none;animation:vnx 1.8s ease-in-out infinite}
@keyframes vnx{50%{transform:translateY(4px)}}

/* hero: the promise, one line of how, two buttons, the bill as proof */
.v-hero{padding:90px 0 0}
.v-hero .v-k{font-size:10px;letter-spacing:.2em}
.v-hero .v-lede{font-size:15.5px}
.h-start{display:none!important}
.h-row{gap:24px}
.h-bill .bl li{grid-template-columns:minmax(0,1fr) auto 14px}
.h-bill .bl li:not(.hold) .st{grid-column:3;grid-row:1;font-size:0;gap:0}
.h-bill .bill-note{display:none}
.h-ind{margin-top:22px}
.h-ind .ind{grid-template-columns:1fr 1fr;border-bottom:0}
.h-ind .ind>div{padding:13px 10px 13px 0;border-top:1px solid var(--ln)!important;border-left:0!important}
.h-ind .ind>div:nth-child(even){padding-left:12px;border-left:1px solid var(--ln)!important}
.h-ind .ind .row{font-size:13.5px;gap:9px;align-items:flex-start;line-height:1.3}
.h-ind .ind svg{width:19px;height:19px}
.h-ind .ind .det{display:none}
.v-hero .v-next{margin-top:0;padding:18px 0 24px;border-top:1px solid var(--ln)}

/* swipe decks: one card at a time, the next one peeking in */
.v-swipe{display:grid!important;grid-auto-flow:column;grid-auto-columns:84%;grid-template-columns:none!important;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;margin:0 -18px;padding:4px 18px 8px;scroll-padding:0 18px;gap:12px;scrollbar-width:none;background:transparent!important;border:0!important}
.v-swipe::-webkit-scrollbar{display:none}
.v-swipe>*{scroll-snap-align:start}
.v-swipe-hint{display:none!important}
.ills.v-swipe .ill{display:flex;flex-direction:column;padding:18px 18px 16px}
.ills.v-swipe .ill svg{width:100%;margin:0 0 14px}
.ills.v-swipe .ill h3{font-size:21px;margin:0 0 6px}
.ills.v-swipe .ill p{font-size:14.5px;margin:0}
.ills.v-swipe .ill .hint{display:block;margin-top:auto;padding-top:12px}
.hbs.v-swipe .hb{border:1px solid var(--ln);padding:22px 20px 18px}
.sb-row.v-swipe{grid-auto-columns:88%}
.lv.v-swipe{grid-auto-columns:82%}
.i-choose.v-swipe>*,.i-made.v-swipe>*{min-height:100%}
.i-made.v-swipe>div{border:1px solid var(--ln)}

/* the dots under a deck */
.v-dots{display:flex;align-items:center;gap:12px;margin-top:8px}
.v-dots .dd{display:flex;gap:6px;align-items:center}
.v-dots .dd i{display:block;width:6px;height:6px;border-radius:3px;background:var(--ln);transition:width .3s var(--ease),background .3s}
.v-dots .dd i.on{width:22px;background:var(--hd)}
.v-dots .ct{margin-left:auto;font-size:12px;letter-spacing:.14em;color:var(--mu);font-variant-numeric:tabular-nums}
.v-dots button{width:42px;height:42px;flex:none;border:1px solid var(--ln);background:transparent;color:var(--hd);display:grid;place-items:center;padding:0;transition:opacity .2s,border-color .2s}
.v-dots button:active{border-color:var(--hd)}
.v-dots button[disabled]{opacity:.3}
.v-dots button svg{width:17px;height:17px}

/* dashboard */
.db-bar{gap:10px;margin-bottom:16px}
.db-look{width:100%}
.db-look button{min-width:0;padding:11px 10px}
.db-desc{font-size:13.5px;flex-basis:100%}
.db-under{display:none}
.db-live{margin-top:22px}
.db-live .v-btn{width:100%}

/* comparison, brief, questions */
.cmp-score{font-size:13px}
.cmp-legend{font-size:12.5px;gap:8px 14px}
.br-list li span{display:none}
.br-list{gap:12px}
.brief{gap:30px}
.br-copy>p{font-size:15px}
.brief .phone{max-height:640px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent)}
.cmp-deck .mrow{margin:0;display:flex;flex-direction:column}
.cmp-deck .mrow .mc{flex:1}
.cmp-m .seg{margin-bottom:12px}
.v-faq summary{font-size:18px;padding:17px 0}
.h-note{font-size:13px}

/* ---------- the fee calculator on a phone: compact steps, a sticky bar with the running fee ---------- */
.cx-mini{display:none!important}
.calc{gap:14px}
.cx{padding:18px 16px 0;min-height:0}
.cx-prog{margin-bottom:16px}
.cx-step h3{font-size:22px;line-height:1.2}
.cx-step .q{font-size:13.5px;margin:6px 0 14px}
.cx-nav{position:sticky;bottom:0;z-index:6;margin:18px -16px 0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--raise);border-top:1px solid var(--ln);box-shadow:0 -10px 24px rgba(36,34,32,.06)}
.cx-nav .v-btn{min-height:42px;padding:8px 16px}
.cx-count{display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center;line-height:1.2}
.cx-nfee{font-family:var(--head);font-size:18px;color:var(--hd);white-space:nowrap}
.cx-nfee small{font-family:var(--text);font-size:11px;color:var(--mu);margin-left:4px}
.cx-est{display:none!important}
.cx-res .tiles{margin:16px 0;grid-template-columns:1fr!important}.cx-res .tiles div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:11px 14px}.cx-res .tiles b{order:2;font-size:19px}.cx-res .fee{font-size:44px}.cx-res .ctas{gap:10px}.cx-res .ctas .v-btn{width:100%}.cx-res .ctas .tlink{margin:4px auto 0}
/* step 1 */
.cx-tiles{gap:8px}
.cx-tile{padding:11px 14px!important;grid-template-columns:38px minmax(0,1fr)!important}
.cx-tile svg{width:38px!important;height:38px!important}
.cx-tile b{font-size:18px!important}
/* step 2 */
.cx-big b{font-size:34px}
.cx-house svg{max-height:130px;width:100%}
/* step 3 */
.cx-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.cx-presets button{padding:8px 4px;font-size:13px;text-align:center}
.cx-cls button{padding:9px 10px}
.cx-cls button span{font-size:11px}
.cx-specl{display:none}
.cx-psf{margin-top:10px}
/* step 4: three choices side by side, details of the chosen one underneath */
.cx-vis{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cx-vc{padding:12px 10px!important;text-align:center;display:flex!important;flex-direction:column;align-items:center;gap:6px}
.cx-vc .n{display:flex;flex-direction:column;align-items:center;gap:0}
.cx-vc .n b{font-size:34px!important;line-height:1}
.cx-vc .n span{font-size:11.5px}
.cx-vc .wk,.cx-vc .g{display:none!important}
.cx-vc .pr{font-size:15px!important;line-height:1.2;border:0!important;padding:0!important;margin:0!important}
.cx-vc .pr small{display:block;font-size:10.5px;margin:0!important}
.cx-vdet{margin-top:12px;border:1px solid var(--ln);padding:12px 14px;background:var(--sunk)}
.cx-vdet .wk{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:8px}
.cx-vdet .wk i{display:grid;place-items:center;height:30px;border:1px solid var(--ln);font-style:normal;font-size:11px;color:var(--mu);background:var(--raise)}
.cx-vdet .wk i.on{background:var(--hd);border-color:var(--hd);color:var(--bg);font-weight:500}
.cx-vdet p{margin:0;font-size:13.5px;color:var(--fg)}
/* step 5: switches stay short until you turn one on */
.cx-opts{gap:8px}
.cx-opt{padding:12px 14px!important}
.cx-opt[aria-checked="false"] p,.cx-opt[aria-checked="false"] .cx-cams{display:none!important}
.cx-opt p{font-size:13px}
/* step 6 */
.cx-two{gap:14px}
.cx-sub{margin-top:14px}


/* ---------- header: one slim line, booking lives in the menu ---------- */
html{scroll-padding-top:62px}
.v-hdr .v-wrap{height:54px;gap:12px}
.v-hcta{display:none!important}
.v-burger{margin-left:auto!important}
.v-logo{font-size:15px;letter-spacing:.2em;gap:9px}.v-mark{width:28px;height:28px}
.v-nav.open{top:54px;padding:4px 18px 20px;max-height:calc(100vh - 54px);overflow:auto}
.v-nav.open a{padding:13px 0;font-size:17px}
.v-nav.open .v-mob{border-bottom:0}
.v-nav.open .v-mcta{display:flex;align-items:center;justify-content:center;margin-top:14px;min-height:50px;padding:12px;background:#F9F7F2;color:#1A1816;border:0;font-size:15px;letter-spacing:.04em}
.v-hero{padding-top:78px}
.v-phero{padding-top:88px}

/* ---------- footer: tight ---------- */
.v-foot{padding-bottom:28px}
.v-fcols{padding-top:26px;gap:16px 20px;grid-template-columns:1fr 1fr}
.v-fcols>div:first-child{grid-column:1/-1}
.v-ftalk{display:none}
.v-foot .v-logo{font-size:16px}.v-foot .v-mark{width:30px;height:30px}
.v-mline{margin:10px 0 0;font-size:12.5px;line-height:1.5}
.v-foot h4{font-size:10px;letter-spacing:.2em;margin-bottom:4px;color:var(--mu)}
.v-fcols a{padding:5px 0;font-size:14px;border:0}
.v-legal{margin-top:16px;padding-top:10px;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:0 16px;font-size:12px}
.v-legal>div:first-child{display:contents}
.v-legal::before{content:"";order:2;flex-basis:100%;height:0}
.v-legal a,.v-legal a.mb-only{display:inline-block;padding:4px 0;margin:0;order:1}
.v-copy{order:3;margin:0}
.v-legal .v-soc{order:4;gap:0;margin-left:-2px}
.v-legal .v-soc a{padding:5px}
.v-legal .v-soc svg{width:15px;height:15px}