/* =====================================================================
   ViewsStream 2026 redesign layer
   Loads after app.css. Tokens, section rhythm, header behaviour and the
   components the redesigned pages use. Elementor style panels still win
   over everything here, so the client stays editable.
   ===================================================================== */
:root{
  --vs-bg:#0A0908; --vs-bg-deep:#060505; --vs-surface:#14120F; --vs-elevated:#1C1915;
  --vs-ink:#F4EFE5; --vs-muted:#9A9287; --vs-line:#2A2620;
  --vs-accent:#D8B478; --vs-accent-hi:#E6C48E; --vs-accent-deep:#8C6A33; --vs-on-accent:#17130D;
  --vs-s1:8px; --vs-s2:14px; --vs-s3:22px; --vs-s4:34px; --vs-s5:52px; --vs-s6:78px; --vs-s7:112px; --vs-s8:152px;
  --vs-r-sm:12px; --vs-r-md:18px; --vs-r-lg:24px; --vs-r-xl:32px; --vs-r-pill:999px;
  --vs-ease:cubic-bezier(.2,.8,.3,1);
  --vs-head-h:84px; --vs-head-h-sm:64px;
}

/* ---- section rhythm: the page breathes ---- */
.vs-sec{padding-block:var(--vs-s8);}
.vs-sec--tight{padding-block:var(--vs-s6);}
.vs-sec--flush-top{padding-top:0;}
@media (max-width:1024px){.vs-sec{padding-block:var(--vs-s7);}.vs-sec--tight{padding-block:var(--vs-s5);}}
@media (max-width:640px){.vs-sec{padding-block:var(--vs-s6);}.vs-sec--tight{padding-block:var(--vs-s5);}}

/* ---- eyebrow ---- */
.vs-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0;font-family:var(--vs-font-body,Manrope,sans-serif);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--vs-accent);}
.vs-eyebrow::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--vs-accent));}

/* ---- badge ---- */
.vs-badge{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 11px;border-radius:var(--vs-r-pill);border:1px solid rgba(216,180,120,.26);background:rgba(216,180,120,.08);font-family:var(--vs-font-body,Manrope,sans-serif);font-size:13px;font-weight:600;color:var(--vs-accent-hi);}
.vs-badge__dot{width:7px;height:7px;border-radius:50%;background:var(--vs-accent);box-shadow:0 0 0 3px rgba(216,180,120,.18);}

/* ---- stat strip ---- */
.vs-stat{display:flex;flex-direction:column;gap:6px;min-width:0;}
.vs-stat__k{font-family:var(--vs-font-display,"Bricolage Grotesque",sans-serif);font-weight:600;font-size:clamp(26px,3vw,36px);line-height:1;letter-spacing:-.02em;color:var(--vs-ink);}
.vs-stat__l{font-size:14px;line-height:1.45;color:var(--vs-muted);}

/* ---- scroll reveal ---- */

/* ---- sticky header: shrinks and frosts on scroll ---- */
body #masthead{position:sticky !important;top:0;z-index:9000;transition:background-color .3s var(--vs-ease),backdrop-filter .3s var(--vs-ease),border-color .3s var(--vs-ease),box-shadow .3s var(--vs-ease);border-bottom:1px solid transparent;}
body #masthead .e-con-inner,body #masthead > .e-con-inner{transition:padding .3s var(--vs-ease);}
body.vs-scrolled #masthead{background-color:rgba(10,9,8,.72);border-bottom-color:rgba(216,180,120,.16);box-shadow:0 12px 40px -28px rgba(0,0,0,.95);}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.vs-scrolled #masthead{background-color:rgba(10,9,8,.55);-webkit-backdrop-filter:saturate(150%) blur(18px);backdrop-filter:saturate(150%) blur(18px);}
}
body.vs-scrolled #masthead .elementor-element > .e-con-inner{padding-top:10px !important;padding-bottom:10px !important;}
body.vs-scrolled #masthead img{transform:scale(.88);transition:transform .3s var(--vs-ease);}
#masthead img{transition:transform .3s var(--vs-ease);}
@media (prefers-reduced-motion:reduce){body #masthead,body #masthead img,body #masthead .e-con-inner{transition:none;}}

/* nav: current page gets a gold underline that grows on hover */
.hfe-nav-menu .menu-item > a.hfe-menu-item{position:relative;}
.hfe-nav-menu .menu-item > a.hfe-menu-item::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:1.5px;background:var(--vs-accent);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--vs-ease);}
.hfe-nav-menu .menu-item > a.hfe-menu-item:hover::after,.hfe-nav-menu .menu-item.current-menu-item > a.hfe-menu-item::after{transform:scaleX(1);}
@media (prefers-reduced-motion:reduce){.hfe-nav-menu .menu-item > a.hfe-menu-item::after{transition:none;}}

/* ---- feature bento ---- */
.vs-bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--vs-s3);}
.vs-bento__cell{grid-column:span 2;}
.vs-bento__cell--wide{grid-column:span 3;}
@media (max-width:900px){.vs-bento{grid-template-columns:repeat(2,minmax(0,1fr));}.vs-bento__cell,.vs-bento__cell--wide{grid-column:span 1;}}
@media (max-width:560px){.vs-bento{grid-template-columns:minmax(0,1fr);}}

/* ---- category field cards ---- */
.vs-cat{position:relative;display:block;min-width:0;overflow:hidden;border-radius:var(--vs-r-lg);border:1px solid rgba(244,239,229,.10);text-decoration:none;isolation:isolate;transition:border-color .3s var(--vs-ease),transform .3s var(--vs-ease);}
.vs-cat:hover{border-color:rgba(216,180,120,.42);transform:translateY(-4px);}
.vs-cat img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;transition:transform .55s var(--vs-ease);}
.vs-cat:hover img{transform:scale(1.05);}
.vs-cat__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,5,5,0) 38%,rgba(6,5,5,.72) 78%,rgba(6,5,5,.93) 100%);}
.vs-cat__body{position:absolute;left:0;right:0;bottom:0;padding:22px 22px 24px;display:flex;flex-direction:column;gap:6px;}
.vs-cat__t{margin:0;font-family:var(--vs-font-display,"Bricolage Grotesque",sans-serif);font-weight:600;font-size:20px;line-height:1.2;letter-spacing:-.015em;color:var(--vs-ink);}
.vs-cat__d{margin:0;font-size:14px;line-height:1.5;color:rgba(244,239,229,.72);}
@media (prefers-reduced-motion:reduce){.vs-cat,.vs-cat img{transition:none;}.vs-cat:hover{transform:none;}.vs-cat:hover img{transform:none;}}

/* ---- device selector ---- */
.vs-devsel{display:inline-flex;padding:5px;gap:4px;border-radius:var(--vs-r-pill);border:1px solid rgba(244,239,229,.12);background:rgba(244,239,229,.045);}
.vs-devsel__b{appearance:none;border:0;cursor:pointer;padding:9px 17px;border-radius:var(--vs-r-pill);background:transparent;font-family:var(--vs-font-body,Manrope,sans-serif);font-size:14px;font-weight:600;color:rgba(244,239,229,.62);transition:background-color .24s var(--vs-ease),color .24s var(--vs-ease);}
.vs-devsel__b:hover{color:var(--vs-ink);}
.vs-devsel__b[aria-pressed="true"]{background:var(--vs-accent);color:var(--vs-on-accent);}
.vs-devsel__b:focus-visible{outline:2px solid var(--vs-accent-hi);outline-offset:2px;}
.vs-plan[hidden]{display:none !important;}

/* ---- pricing ---- */
.vs-price{position:relative;display:flex;flex-direction:column;gap:var(--vs-s2);min-width:0;height:100%;padding:30px 28px 32px;border-radius:var(--vs-r-lg);border:1px solid rgba(244,239,229,.10);background:rgba(244,239,229,.035);transition:border-color .3s var(--vs-ease),transform .3s var(--vs-ease),background-color .3s var(--vs-ease);}
.vs-price:hover{transform:translateY(-4px);border-color:rgba(216,180,120,.34);}
.vs-price--best{border-color:rgba(216,180,120,.55);background:rgba(216,180,120,.06);box-shadow:0 0 0 1px rgba(216,180,120,.18),0 30px 80px -48px rgba(216,180,120,.55);}
.vs-price__tag{position:absolute;top:-11px;left:28px;padding:4px 12px;border-radius:var(--vs-r-pill);background:var(--vs-accent);font-family:var(--vs-font-body,Manrope,sans-serif);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--vs-on-accent);}
.vs-price__term{margin:0;font-family:var(--vs-font-body,Manrope,sans-serif);font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--vs-accent);}
.vs-price__fig{display:flex;align-items:baseline;gap:7px;margin:2px 0 0;}
.vs-price__amt{font-family:var(--vs-font-display,"Bricolage Grotesque",sans-serif);font-weight:600;font-size:46px;line-height:1;letter-spacing:-.03em;color:var(--vs-ink);}
.vs-price__per{font-size:14px;color:var(--vs-muted);}
.vs-price__mo{margin:0;font-size:13px;color:var(--vs-muted);}
.vs-price__rule{height:1px;margin:var(--vs-s1) 0 var(--vs-s1);background:linear-gradient(90deg,rgba(244,239,229,.14),transparent);}
.vs-price__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.vs-price__list li{position:relative;padding-left:26px;font-size:15px;line-height:1.5;color:rgba(244,239,229,.80);}
.vs-price__list li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:8px;border-left:1.6px solid var(--vs-accent);border-bottom:1.6px solid var(--vs-accent);transform:rotate(-45deg);}
.vs-price__cta{margin-top:auto;padding-top:var(--vs-s3);}
.vs-price__note{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--vs-muted);}
@media (prefers-reduced-motion:reduce){.vs-price{transition:none;}.vs-price:hover{transform:none;}}

/* ---- numbered steps ---- */
.vs-step{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;padding:28px 26px 30px;border-radius:var(--vs-r-lg);border:1px solid rgba(244,239,229,.10);background:rgba(244,239,229,.035);overflow:hidden;}
.vs-step__n{font-family:var(--vs-font-display,"Bricolage Grotesque",sans-serif);font-weight:600;font-size:14px;letter-spacing:.14em;color:var(--vs-accent);}
.vs-step__t{margin:0;font-family:var(--vs-font-display,"Bricolage Grotesque",sans-serif);font-weight:600;font-size:19px;line-height:1.25;color:var(--vs-ink);}
.vs-step__d{margin:0;font-size:15px;line-height:1.6;color:rgba(244,239,229,.72);}
.vs-step::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(216,180,120,.16),transparent 68%);}

/* ---- platform pills ---- */
.vs-pill{display:inline-flex;align-items:center;gap:9px;padding:11px 19px;border-radius:var(--vs-r-pill);border:1px solid rgba(244,239,229,.12);background:rgba(244,239,229,.04);font-family:var(--vs-font-body,Manrope,sans-serif);font-size:14.5px;font-weight:600;color:rgba(244,239,229,.88);text-decoration:none;transition:border-color .24s var(--vs-ease),background-color .24s var(--vs-ease),transform .24s var(--vs-ease);}
.vs-pill:hover{border-color:rgba(216,180,120,.40);background:rgba(216,180,120,.09);transform:translateY(-2px);color:var(--vs-ink);}
@media (prefers-reduced-motion:reduce){.vs-pill{transition:none;}.vs-pill:hover{transform:none;}}

/* ---- hero stage ---- */
.vs-hero-sec{position:relative;overflow:clip;isolation:isolate;}
.vs-hero-sec::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:120%;z-index:-2;background:radial-gradient(60% 55% at 32% 26%,rgba(216,180,120,.16),transparent 68%),radial-gradient(48% 46% at 88% 78%,rgba(216,180,120,.09),transparent 70%);pointer-events:none;}
.vs-hero-sec::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(216,180,120,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(216,180,120,.045) 1px,transparent 1px);background-size:78px 78px;-webkit-mask-image:radial-gradient(58% 58% at 46% 34%,#000 0%,transparent 78%);mask-image:radial-gradient(58% 58% at 46% 34%,#000 0%,transparent 78%);}
.vs-hero-sec .elementor-widget-image img{filter:drop-shadow(0 40px 90px rgba(0,0,0,.65));}
.vs-hero-sec .elementor-icon-list-items.elementor-inline-items{row-gap:10px;}
@media (max-width:1024px){
  .vs-hero-sec::after{background-size:60px 60px;}
  .vs-hero-sec .elementor-widget-image img{filter:drop-shadow(0 26px 60px rgba(0,0,0,.6));}
}

/* the hero visual bleeds past the container so it reads at full scale */
.vs-hero-art{overflow:visible !important;}
.vs-hero-art .elementor-widget-image{width:100%;}
@media (min-width:1025px){.vs-hero-art img{width:134% !important;max-width:none !important;margin-right:-34%;}}
@media (max-width:1024px){.vs-hero-art img{width:100% !important;margin:0 auto;}}

/* ---- trust strip ---- */
.vs-trust > .e-con-inner, .vs-trust.e-con > .e-con-inner, .vs-trust > .elementor-element{border-top:1px solid rgba(244,239,229,.10);border-bottom:1px solid rgba(244,239,229,.10);padding-block:var(--vs-s5) !important;}
.vs-trust .vs-stat__k{margin:0;font-family:var(--vs-font-display,"Bricolage Grotesque",sans-serif);font-weight:600;font-size:clamp(22px,2.4vw,30px);line-height:1.05;letter-spacing:-.02em;color:var(--vs-ink);}
.vs-trust .vs-stat__l{margin:0;font-size:14px;line-height:1.5;color:var(--vs-muted);}
@media (max-width:1024px){.vs-trust > .e-con-inner, .vs-trust.e-con > .e-con-inner, .vs-trust > .elementor-element{padding-block:var(--vs-s4) !important;}}

/* ---- feature cards ---- */
.vs-fcard{transition:border-color .3s var(--vs-ease),background-color .3s var(--vs-ease),transform .3s var(--vs-ease);}
.vs-fcard:hover{border-color:rgba(216,180,120,.34) !important;background-color:rgba(216,180,120,.055) !important;transform:translateY(-4px);}
.vs-fcard .elementor-icon-box-icon{margin-bottom:16px !important;}
@media (prefers-reduced-motion:reduce){.vs-fcard{transition:none;}.vs-fcard:hover{transform:none;}}

/* ---- category cards: art with the label over it ---- */
.vs-cat{position:relative;overflow:hidden;isolation:isolate;transition:border-color .3s var(--vs-ease),transform .3s var(--vs-ease);}
.vs-cat::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(6,5,5,0) 34%,rgba(6,5,5,.70) 74%,rgba(6,5,5,.94) 100%);}
.vs-cat:hover{transform:translateY(-4px);border-color:rgba(216,180,120,.44) !important;}
.vs-cat .elementor-widget-image{margin:0;line-height:0;}
.vs-cat .elementor-widget-image img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;transition:transform .55s var(--vs-ease);}
.vs-cat:hover .elementor-widget-image img{transform:scale(1.05);}
.vs-cat__body{position:absolute !important;left:0;right:0;bottom:0;z-index:2;width:auto !important;}
@media (prefers-reduced-motion:reduce){.vs-cat,.vs-cat .elementor-widget-image img{transition:none;}.vs-cat:hover{transform:none;}.vs-cat:hover .elementor-widget-image img{transform:none;}}

/* ---- setup pills ---- */
.vs-pillrow{display:flex;flex-wrap:wrap;gap:12px;margin:0;}

/* ---- pricing details ---- */
.vs-price__list .elementor-icon-list-item{padding-left:26px;position:relative;}
.vs-price__list .elementor-icon-list-item::before{content:"";position:absolute;left:0;top:8px;width:13px;height:7px;border-left:1.6px solid var(--vs-accent);border-bottom:1.6px solid var(--vs-accent);transform:rotate(-45deg);}
.vs-price__list .elementor-icon-list-icon{display:none !important;}
.vs-price .elementor-widget-button{margin-top:auto;}
.vs-price__fig{display:flex;align-items:baseline;gap:8px;margin:0;}
.vs-price__amt{font-family:var(--vs-font-display,"Bricolage Grotesque",sans-serif);font-weight:600;font-size:42px;line-height:1;letter-spacing:-.03em;color:var(--vs-ink);}
.vs-price__per,.vs-price__mo{font-size:13.5px;color:var(--vs-muted);}
.vs-price__mo{margin:0;}
.vs-price__term{margin:0;font-family:var(--vs-font-body,Manrope,sans-serif);font-size:13px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--vs-accent);}
.vs-price{position:relative;transition:border-color .3s var(--vs-ease),transform .3s var(--vs-ease);}
.vs-price:hover{transform:translateY(-4px);border-color:rgba(216,180,120,.34) !important;}
.vs-price--best{box-shadow:0 0 0 1px rgba(216,180,120,.16),0 34px 90px -56px rgba(216,180,120,.6);}
.vs-price__tag{display:inline-block;padding:4px 12px;border-radius:var(--vs-r-pill);background:var(--vs-accent);font-family:var(--vs-font-body,Manrope,sans-serif);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--vs-on-accent);}
@media (prefers-reduced-motion:reduce){.vs-price{transition:none;}.vs-price:hover{transform:none;}}

/* ---- faq ---- */
.vs-faq .e-n-accordion-item{border:1px solid rgba(244,239,229,.10);border-radius:var(--vs-r-md);background:rgba(244,239,229,.035);margin-bottom:12px;overflow:hidden;}
.vs-faq .e-n-accordion-item-title{padding:20px 24px;}
.vs-faq .e-n-accordion-item[open]{border-color:rgba(216,180,120,.30);}

/* ---- final cta ---- */
.vs-finalcta{position:relative;overflow:hidden;isolation:isolate;}
.vs-finalcta::before{content:"";position:absolute;inset:-40% -10% auto -10%;height:180%;z-index:-1;pointer-events:none;background:radial-gradient(52% 58% at 50% 8%,rgba(216,180,120,.22),transparent 70%);}

/* ---- section rhythm on the redesigned page ---- */
.vs-setup .vs-pillrow{justify-content:flex-start;}
@media (max-width:900px){
  .vs-trust .vs-stat{width:47% !important;}
  .vs-fcard{width:47% !important;}
  .vs-cat{width:47% !important;}
  .vs-price,.vs-step{width:47% !important;}
}
@media (max-width:600px){
  .vs-trust .vs-stat,.vs-fcard,.vs-cat,.vs-price,.vs-step{width:100% !important;}
}

/* vs-devsel wrap fix + equal-height pricing */
.vs-devsel{flex-wrap:wrap;max-width:100%;}
@media (max-width:560px){
  .vs-devsel{width:100%;justify-content:flex-start;}
  .vs-devsel__b{padding:9px 13px;font-size:13.5px;flex:1 1 auto;text-align:center;}
}
/* the Best value tag sits on the border so every card is the same height */
.vs-price{padding-top:34px !important;}
.vs-price .elementor-widget-text-editor:has(.vs-price__tag){position:absolute;top:-12px;left:28px;margin:0;width:auto;}
.vs-price__tag{white-space:nowrap;}
@supports not (selector(:has(*))){
  .vs-price--best > .e-con-inner > .elementor-widget-text-editor:first-child,
  .vs-price--best > .elementor-widget-text-editor:first-child{position:absolute;top:-12px;left:28px;margin:0;width:auto;}
}


/* Rise: content is visible by default and only animates when the script runs,
   so a script failure can never leave a section blank. */
@keyframes vsRise{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
.vs-js .vs-rise.vs-in{animation:vsRise .7s var(--vs-ease) both;}
@media (prefers-reduced-motion:reduce){.vs-js .vs-rise.vs-in{animation:none;}}

/* fcard align: cards read left, like the rest of the page */
.vs-fcard .elementor-icon-box-wrapper{text-align:left;}
.vs-fcard .elementor-icon-box-icon{margin-left:0 !important;margin-right:auto !important;}


/* PRICING-BLOCK-START */

/* --- Ambient light behind the plan grid --- */
.vs-pricing-sec { position: relative; overflow: hidden; }
.vs-pricing-sec::before,
.vs-pricing-sec::after { content: ""; position: absolute; pointer-events: none; z-index: 0; width: 620px; height: 620px; border-radius: 50%; }
.vs-pricing-sec::before { top: -180px; right: -140px; background: radial-gradient( circle, rgba( 216, 180, 120, 0.11 ), transparent 68% ); filter: blur( 40px ); }
.vs-pricing-sec::after { bottom: -260px; left: -180px; background: radial-gradient( circle, rgba( 140, 106, 51, 0.10 ), transparent 68% ); filter: blur( 50px ); }
.vs-pricing-sec > .e-con-inner, .vs-pricing-sec > .elementor-element { position: relative; z-index: 1; }

/* --- Billing display toggle --- */
.vs-bill { display: inline-flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; background: rgba( 244, 239, 229, 0.045 ); border: 1px solid rgba( 244, 239, 229, 0.10 ); backdrop-filter: blur( 10px ); }
.vs-bill__b { appearance: none; -webkit-appearance: none; cursor: pointer; font-family: "Manrope", system-ui, sans-serif; font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em; line-height: 1; white-space: nowrap; padding: 11px 20px; border-radius: 999px; border: 0; background: transparent; color: rgba( 244, 239, 229, 0.62 ); transition: background-color 0.22s var( --vs-ease ), color 0.22s var( --vs-ease ); min-height: 44px; }
.vs-bill__b:hover { color: var( --vs-ink ); background: rgba( 244, 239, 229, 0.05 ); }
.vs-bill__b[aria-pressed="true"] { background: var( --vs-accent ); color: var( --vs-on-accent ); box-shadow: 0 2px 14px rgba( 216, 180, 120, 0.26 ); }
.vs-bill__b:focus-visible { outline: 2px solid var( --vs-accent-hi ); outline-offset: 3px; }
.vs-bill__save { display: inline-block; margin-left: 7px; padding: 2px 7px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; border-radius: 999px; vertical-align: 1px; background: rgba( 216, 180, 120, 0.16 ); border: 1px solid rgba( 216, 180, 120, 0.30 ); color: var( --vs-accent-hi ); }
.vs-bill__b[aria-pressed="true"] .vs-bill__save { background: rgba( 23, 19, 13, 0.16 ); border-color: rgba( 23, 19, 13, 0.22 ); color: var( --vs-on-accent ); }

/* Price faces swap with the toggle. Total is the default. */
.vs-price__face--mo { display: none; }
body.vs-permo .vs-price__face--total { display: none; }
body.vs-permo .vs-price__face--mo { display: block; }

/* --- Savings tag --- */
.vs-save { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-family: "Manrope", system-ui, sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; background: rgba( 216, 180, 120, 0.12 ); border: 1px solid rgba( 216, 180, 120, 0.26 ); color: var( --vs-accent-hi ); }

/* --- Plan card refinements --- */
.vs-pricing-sec .vs-price { transition: transform 0.3s var( --vs-ease ), border-color 0.3s var( --vs-ease ), box-shadow 0.3s var( --vs-ease ); }
.vs-pricing-sec .vs-price:hover { transform: translateY( -5px ); }
.vs-pricing-sec .vs-price--best { background: linear-gradient( 180deg, #1C1915 0%, #0B0A08 100% ); box-shadow: 0 24px 60px rgba( 216, 180, 120, 0.11 ); }
.vs-price__eq { font-family: "Manrope", system-ui, sans-serif; font-size: 13px; color: rgba( 244, 239, 229, 0.52 ); letter-spacing: -0.004em; }
.vs-price__eq b { color: var( --vs-accent ); font-weight: 600; }

/* --- Comparison matrix --- */
.vs-cmp { display: grid; grid-template-columns: minmax( 168px, 1.5fr ) repeat( 4, minmax( 0, 1fr ) ); align-items: stretch; overflow: visible; width: 100%; }
.vs-cmp > .elementor-element { display: flex; align-items: center; padding: 15px 14px; border-bottom: 1px dashed rgba( 244, 239, 229, 0.10 ); font-variant-numeric: tabular-nums; }
.vs-cmp > .vs-c0 { justify-content: flex-start; padding-left: 0; color: rgba( 244, 239, 229, 0.72 ); }
.vs-cmp > .vs-c1, .vs-cmp > .vs-c2, .vs-cmp > .vs-c3, .vs-cmp > .vs-c4 { justify-content: center; text-align: center; border-left: 1px solid rgba( 244, 239, 229, 0.07 ); }
.vs-cmp > .vs-c4 { background: rgba( 216, 180, 120, 0.045 ); }
.vs-cmp .elementor-widget-container { width: 100%; }
.vs-cmp p:last-child { margin-bottom: 0; }
.vs-cmp > .vs-cmp__h { position: sticky; top: 76px; z-index: 3; align-items: flex-end; padding-top: 18px; padding-bottom: 14px; background: var( --vs-bg ); border-bottom: 1px solid rgba( 216, 180, 120, 0.22 ); }
.vs-cmp > .vs-cmp__h.vs-c4 { background: linear-gradient( 180deg, var( --vs-bg ) 0%, rgba( 216, 180, 120, 0.075 ) 100% ); }
.vs-cmp > .vs-cmp__g { grid-column: 1 / -1; padding: 30px 0 11px; border-bottom: 1px solid rgba( 244, 239, 229, 0.09 ); }
.vs-cmp > .vs-cmp__g--first { padding-top: 18px; }

.vs-mark { display: inline-grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; }
.vs-mark--yes { background: var( --vs-accent ); color: var( --vs-on-accent ); box-shadow: 0 0 10px rgba( 216, 180, 120, 0.28 ); }
.vs-mark--no { background: rgba( 244, 239, 229, 0.05 ); border: 1px solid rgba( 244, 239, 229, 0.13 ); color: rgba( 244, 239, 229, 0.34 ); }
.vs-mark svg { width: 11px; height: 11px; display: block; }

.vs-cmp-pick { display: none; }
@media ( max-width: 900px ) {
  .vs-cmp-pick { display: flex; }
  .vs-cmp { grid-template-columns: minmax( 0, 1.35fr ) minmax( 0, 1fr ); }
  .vs-cmp > .vs-c1, .vs-cmp > .vs-c2, .vs-cmp > .vs-c3, .vs-cmp > .vs-c4 { display: none; }
  .vs-cmp--p1 > .vs-c1, .vs-cmp--p2 > .vs-c2, .vs-cmp--p3 > .vs-c3, .vs-cmp--p4 > .vs-c4 { display: flex; }
  .vs-cmp > .vs-c4 { background: none; }
  .vs-cmp > .vs-cmp__h { top: 64px; }
  .vs-cmp > .vs-cmp__h.vs-c4 { background: var( --vs-bg ); }
}

/* --- Trust row --- */
.vs-tcard { padding: 26px 24px; border-radius: var( --vs-r-md ); background: rgba( 244, 239, 229, 0.022 ); border: 1px solid rgba( 244, 239, 229, 0.085 ); transition: border-color 0.3s var( --vs-ease ), background-color 0.3s var( --vs-ease ), transform 0.3s var( --vs-ease ); height: 100%; }
.vs-tcard:hover { border-color: rgba( 216, 180, 120, 0.30 ); background: rgba( 244, 239, 229, 0.04 ); transform: translateY( -3px ); }
.vs-tcard .elementor-icon-box-wrapper { text-align: left; }
.vs-tcard .elementor-icon-box-icon { margin-bottom: 14px; }

@media ( max-width: 1024px ) { .vs-pricing-sec::before, .vs-pricing-sec::after { width: 400px; height: 400px; } }
@media ( max-width: 767px ) {
  .vs-bill { width: 100%; justify-content: center; }
  .vs-bill__b { flex: 1 1 0; padding: 11px 12px; font-size: 13px; }
  .vs-bill__save { margin-left: 5px; font-size: 10px; }
  .vs-cmp > .elementor-element { padding: 13px 10px; font-size: 14px; }
}
@media ( prefers-reduced-motion: reduce ) { .vs-pricing-sec .vs-price:hover, .vs-tcard:hover { transform: none; } }


/* PRICING-SUPP-START */

.e-con.vs-pgrid, .vs-pgrid { --display: grid; display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: 20px; width: 100%; align-items: stretch; }
@media ( max-width: 1100px ) { .e-con.vs-pgrid, .vs-pgrid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 18px; } }
@media ( max-width: 560px ) { .e-con.vs-pgrid, .vs-pgrid { grid-template-columns: 1fr; } }
.e-con.vs-tgrid, .vs-tgrid { --display: grid; display: grid; grid-template-columns: repeat( 5, minmax( 0, 1fr ) ); gap: 16px; width: 100%; align-items: stretch; }
@media ( max-width: 1100px ) { .e-con.vs-tgrid, .vs-tgrid { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); } }
@media ( max-width: 700px ) { .e-con.vs-tgrid, .vs-tgrid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } }
@media ( max-width: 460px ) { .e-con.vs-tgrid, .vs-tgrid { grid-template-columns: 1fr; } }
.e-con.vs-cmp, .vs-cmp { --display: grid; display: grid; }
.vs-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect( 0 0 0 0 ); white-space: nowrap; border: 0; }
.vs-mark svg { display: none; }
.vs-mark::before { content: ""; display: block; }
.vs-mark--yes::before { width: 9px; height: 5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate( -45deg ) translate( 1px, -1px ); }
.vs-mark--no::before { width: 9px; height: 2px; background: currentColor; border-radius: 1px; }
.vs-pp__amt { display: block; font-family: "Bricolage Grotesque", Georgia, serif; font-size: 42px; font-weight: 600; line-height: 1; letter-spacing: -0.032em; color: var( --vs-ink ); }
.vs-pp__per { display: block; margin-top: 9px; font-size: 13.5px; line-height: 1.45; color: rgba( 244, 239, 229, 0.56 ); }
.vs-pp__eq { margin-top: 10px; font-size: 13px; color: rgba( 244, 239, 229, 0.52 ); }
.vs-pp__eq b { color: var( --vs-accent ); font-weight: 600; }
.vs-pp__save { margin-top: 14px; }
.vs-cmp__pn { display: block; font-family: "Bricolage Grotesque", Georgia, serif; font-size: 16px; font-weight: 600; color: var( --vs-ink ); line-height: 1.2; }
.vs-cmp__pp { display: block; margin-top: 4px; font-size: 13px; color: rgba( 244, 239, 229, 0.56 ); }
.vs-cmp__best { display: block; margin-top: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var( --vs-accent ); }
.vs-cmp .elementor-widget-button .elementor-button { width: 100%; }
.vs-price--best { border-color: rgba( 216, 180, 120, 0.42 ) !important; }


/* PRICING-FIX-START */

.vs-sec h1, .vs-sec h2 { text-wrap: balance; }
.vs-price .elementor-widget-text-editor:has( .vs-pp__amt ) { min-height: 158px; }
@media ( max-width: 560px ) { .vs-price .elementor-widget-text-editor:has( .vs-pp__amt ) { min-height: 0; } }
.vs-cmp > .vs-cmp__h { background: #060505; }
.vs-cmp > .vs-cmp__h.vs-c4 { background: linear-gradient( 180deg, #060505 0%, rgba( 216, 180, 120, 0.075 ) 100% ); }
@media ( max-width: 900px ) { .vs-cmp > .vs-cmp__h.vs-c4 { background: #060505; } }
.vs-tcard .elementor-icon-box-wrapper { text-align: left; }
.vs-tcard .elementor-icon-box-icon { justify-content: flex-start; display: flex; }
.vs-price > .elementor-widget-button { margin-top: auto; }


/* PRICING-FIX2-START */

.vs-price .elementor-widget-text-editor:has( .vs-pp__amt ) + .elementor-widget-text-editor { min-height: 84px; }
@media ( max-width: 560px ) { .vs-price .elementor-widget-text-editor:has( .vs-pp__amt ) + .elementor-widget-text-editor { min-height: 0; } }


/* PRICING-FIX3-START */

/* Ribbon on the recommended card needs clearance when the grid wraps. */
.e-con.vs-pgrid, .vs-pgrid { column-gap: 20px; row-gap: 40px; }
@media ( max-width: 1100px ) { .e-con.vs-pgrid, .vs-pgrid { column-gap: 18px; row-gap: 40px; } }
/* Sticky matrix header clears the real site header. */
.vs-cmp > .vs-cmp__h { top: 90px; }
@media ( max-width: 900px ) { .vs-cmp > .vs-cmp__h { top: 116px; } }

/* PRICING-FIX4-START */

/* Grid children size from the track. The home page sets flex widths with !important. */
.e-con.vs-pgrid > .vs-price, .vs-pgrid > .vs-price,
.e-con.vs-tgrid > .vs-tcard, .vs-tgrid > .vs-tcard { width: 100% !important; max-width: none !important; }


/* PRICING-FIX5-START */

.vs-save--muted { background: rgba( 244, 239, 229, 0.05 ); border-color: rgba( 244, 239, 229, 0.14 ); color: rgba( 244, 239, 229, 0.58 ); }


/* CONTACT-BLOCK-START */

/* --- Contact hero --------------------------------------------------- */
.vs-chero { position: relative; overflow: hidden; }
.vs-chero::before { content: ""; position: absolute; inset: -30% -10% auto; height: 150%; z-index: 0; pointer-events: none; background: radial-gradient( 48% 54% at 50% 0%, rgba( 216, 180, 120, 0.15 ), transparent 68% ); }
.vs-chero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.4; background-image: linear-gradient( rgba( 244, 239, 229, 0.045 ) 1px, transparent 1px ), linear-gradient( 90deg, rgba( 244, 239, 229, 0.045 ) 1px, transparent 1px ); background-size: 64px 64px; -webkit-mask-image: radial-gradient( 60% 50% at 50% 0%, #000, transparent 72% ); mask-image: radial-gradient( 60% 50% at 50% 0%, #000, transparent 72% ); }
.vs-chero > .e-con-inner, .vs-chero > .elementor-element { position: relative; z-index: 1; }
.vs-meta { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 999px; background: rgba( 244, 239, 229, 0.04 ); border: 1px solid rgba( 244, 239, 229, 0.10 ); font-family: "Manrope", system-ui, sans-serif; font-size: 13px; color: rgba( 244, 239, 229, 0.74 ); }
.vs-meta b { color: var( --vs-ink ); font-weight: 600; }
.vs-meta__dot { width: 7px; height: 7px; border-radius: 50%; background: var( --vs-accent ); box-shadow: 0 0 0 4px rgba( 216, 180, 120, 0.16 ); flex: none; }

/* --- Contact route cards -------------------------------------------- */
.e-con.vs-rgrid, .vs-rgrid { --display: grid; display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: 18px; width: 100%; align-items: stretch; }
@media ( max-width: 1100px ) { .e-con.vs-rgrid, .vs-rgrid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } }
@media ( max-width: 560px ) { .e-con.vs-rgrid, .vs-rgrid { grid-template-columns: 1fr; } }
.e-con.vs-rgrid > .vs-route, .vs-rgrid > .vs-route { width: 100% !important; max-width: none !important; }
.vs-route { position: relative; padding: 26px 24px 24px; border-radius: var( --vs-r-md ); background: rgba( 244, 239, 229, 0.026 ); border: 1px solid rgba( 244, 239, 229, 0.09 ); backdrop-filter: blur( 8px ); transition: border-color 0.3s var( --vs-ease ), background-color 0.3s var( --vs-ease ), transform 0.3s var( --vs-ease ), box-shadow 0.3s var( --vs-ease ); height: 100%; }
.vs-route:hover, .vs-route:focus-within { border-color: rgba( 216, 180, 120, 0.36 ); background: rgba( 244, 239, 229, 0.045 ); transform: translateY( -4px ); box-shadow: 0 18px 44px rgba( 0, 0, 0, 0.36 ); }
.vs-route .elementor-icon-box-wrapper { text-align: left; }
.vs-route .elementor-icon-box-icon { display: flex; justify-content: flex-start; margin-bottom: 15px; }
.vs-route .elementor-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: rgba( 216, 180, 120, 0.11 ); border: 1px solid rgba( 216, 180, 120, 0.24 ); transition: background-color 0.3s var( --vs-ease ); }
.vs-route:hover .elementor-icon { background: rgba( 216, 180, 120, 0.2 ); }
.vs-route .elementor-button { padding: 0 !important; background: none !important; border: 0 !important; color: var( --vs-accent ) !important; font-size: 14.5px !important; font-weight: 600 !important; min-height: 44px; display: inline-flex; align-items: center; }
.vs-route .elementor-button:hover { color: var( --vs-accent-hi ) !important; text-decoration: underline; text-underline-offset: 4px; }
.vs-route .elementor-widget-button { margin-top: auto; }

/* --- Form panel and MetForm ----------------------------------------- */
.vs-formpanel { padding: 34px; border-radius: var( --vs-r-lg ); background: linear-gradient( 180deg, rgba( 244, 239, 229, 0.045 ) 0%, rgba( 244, 239, 229, 0.018 ) 100% ); border: 1px solid rgba( 244, 239, 229, 0.10 ); backdrop-filter: blur( 12px ); box-shadow: 0 28px 70px rgba( 0, 0, 0, 0.40 ); }
.vs-formpanel .mf-input-wrapper { margin-bottom: 20px; }
.vs-formpanel .mf-input-label { display: block; margin-bottom: 9px; font-family: "Manrope", system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba( 244, 239, 229, 0.60 ); transition: color 0.22s var( --vs-ease ); }
.vs-formpanel .mf-input-required-indicator { color: var( --vs-accent ); margin-left: 3px; }
.vs-formpanel .mf-input, .vs-formpanel .mf-textarea { width: 100%; display: block; background: rgba( 244, 239, 229, 0.035 ); border: 1px solid rgba( 244, 239, 229, 0.12 ); border-radius: 12px; color: var( --vs-ink ); font-family: "Manrope", system-ui, sans-serif; font-size: 15.5px; line-height: 1.5; padding: 15px 16px; min-height: 54px; box-shadow: none; -webkit-appearance: none; appearance: none; transition: border-color 0.22s var( --vs-ease ), background-color 0.22s var( --vs-ease ), box-shadow 0.22s var( --vs-ease ); }
.vs-formpanel .mf-input::placeholder, .vs-formpanel .mf-textarea::placeholder { color: rgba( 244, 239, 229, 0.32 ); }
.vs-formpanel .mf-input:hover { border-color: rgba( 244, 239, 229, 0.22 ); }
.vs-formpanel .mf-input:focus, .vs-formpanel .mf-textarea:focus { outline: none; border-color: var( --vs-accent ); background: rgba( 244, 239, 229, 0.06 ); box-shadow: 0 0 0 3px rgba( 216, 180, 120, 0.20 ); }
.vs-formpanel .mf-input-wrapper:has( .mf-input:focus ) .mf-input-label { color: var( --vs-accent-hi ); }
.vs-formpanel .mf-textarea { min-height: 156px; resize: vertical; }
.vs-formpanel .mf-input[aria-invalid="true"], .vs-formpanel .mf-field-error .mf-input { border-color: #E0705F; background: rgba( 224, 112, 95, 0.06 ); box-shadow: 0 0 0 3px rgba( 224, 112, 95, 0.14 ); }
.vs-formpanel .mf-input-wrapper:has( .mf-input[aria-invalid="true"] ) .mf-input-label { color: #F09384; }
.vs-formpanel .mf-error-message, .vs-formpanel .mf-error-res { display: block; margin-top: 8px; font-family: "Manrope", system-ui, sans-serif; font-size: 13px; line-height: 1.45; color: #F09384; }
.vs-formpanel .mf-btn-wraper { margin-top: 4px; }
.vs-formpanel .metform-btn, .vs-formpanel .metform-submit-btn { width: 100%; cursor: pointer; background: var( --vs-accent ); color: var( --vs-on-accent ); border: 0; border-radius: 999px; font-family: "Manrope", system-ui, sans-serif; font-size: 15.5px; font-weight: 700; letter-spacing: -0.005em; padding: 17px 28px; min-height: 56px; box-shadow: 0 12px 30px rgba( 216, 180, 120, 0.18 ); transition: background-color 0.22s var( --vs-ease ), transform 0.22s var( --vs-ease ), box-shadow 0.22s var( --vs-ease ); }
.vs-formpanel .metform-btn span { color: inherit; }
.vs-formpanel .metform-btn:hover { background: var( --vs-accent-hi ); transform: translateY( -2px ); box-shadow: 0 16px 38px rgba( 216, 180, 120, 0.26 ); }
.vs-formpanel .metform-btn:active { transform: none; }
.vs-formpanel .metform-btn:focus-visible { outline: 2px solid var( --vs-accent-hi ); outline-offset: 3px; }
.vs-formpanel .mf-main-response-wrap { background: none; padding: 0; border: 0; }
.vs-formpanel .mf-response-msg { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 22px; padding: 16px 18px; border-radius: 14px; background: rgba( 216, 180, 120, 0.10 ); border: 1px solid rgba( 216, 180, 120, 0.32 ); color: var( --vs-ink ); font-family: "Manrope", system-ui, sans-serif; font-size: 15px; line-height: 1.55; }
.vs-formpanel .mf-response-msg:has( p:empty ) { display: none; }
.vs-formpanel .mf-success-icon { color: var( --vs-accent ); margin-top: 3px; }
.vs-formpanel .mf-response-msg p { margin: 0; }
.vs-formpanel .mf-response-msg-wrap.mf-error-res .mf-response-msg { background: rgba( 224, 112, 95, 0.10 ); border-color: rgba( 224, 112, 95, 0.36 ); }

/* --- What to include aside ------------------------------------------ */
.vs-aside { padding: 28px 26px; border-radius: var( --vs-r-md ); background: rgba( 244, 239, 229, 0.022 ); border: 1px solid rgba( 244, 239, 229, 0.085 ); }
.vs-aside .vs-price__list li::before, .vs-aside .elementor-icon-list-item::before { color: var( --vs-accent ); }

/* --- WhatsApp band --------------------------------------------------- */
.vs-waband { position: relative; overflow: hidden; border-radius: var( --vs-r-lg ); border: 1px solid rgba( 216, 180, 120, 0.26 ); background: linear-gradient( 120deg, rgba( 216, 180, 120, 0.10 ) 0%, rgba( 244, 239, 229, 0.02 ) 46%, rgba( 140, 106, 51, 0.10 ) 100% ); padding: 34px 36px; }
.vs-waband::before { content: ""; position: absolute; width: 420px; height: 420px; right: -120px; top: -180px; border-radius: 50%; background: radial-gradient( circle, rgba( 216, 180, 120, 0.16 ), transparent 68% ); filter: blur( 34px ); pointer-events: none; }
.vs-waband > * { position: relative; }
.vs-wapreview { margin-top: 4px; padding: 13px 16px; border-radius: 14px 14px 14px 4px; background: rgba( 244, 239, 229, 0.05 ); border: 1px solid rgba( 244, 239, 229, 0.10 ); font-family: "Manrope", system-ui, sans-serif; font-size: 14px; line-height: 1.5; color: rgba( 244, 239, 229, 0.78 ); max-width: 420px; }
.vs-wapreview span { display: block; margin-top: 6px; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba( 244, 239, 229, 0.42 ); }

/* --- Support categories ---------------------------------------------- */
.e-con.vs-sgrid, .vs-sgrid { --display: grid; display: grid; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: 16px; width: 100%; align-items: stretch; }
@media ( max-width: 900px ) { .e-con.vs-sgrid, .vs-sgrid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } }
@media ( max-width: 520px ) { .e-con.vs-sgrid, .vs-sgrid { grid-template-columns: 1fr; } }
.e-con.vs-sgrid > .vs-scard, .vs-sgrid > .vs-scard { width: 100% !important; max-width: none !important; }
.vs-scard { padding: 22px 22px; border-radius: var( --vs-r-sm ); background: rgba( 244, 239, 229, 0.022 ); border: 1px solid rgba( 244, 239, 229, 0.08 ); transition: border-color 0.3s var( --vs-ease ), background-color 0.3s var( --vs-ease ); height: 100%; }
.vs-scard:hover { border-color: rgba( 216, 180, 120, 0.3 ); background: rgba( 244, 239, 229, 0.04 ); }
.vs-scard .elementor-icon-box-wrapper { text-align: left; }
.vs-scard .elementor-icon-box-icon { display: flex; justify-content: flex-start; margin-bottom: 12px; }

/* --- Responsive ------------------------------------------------------ */
@media ( max-width: 767px ) {
  .vs-formpanel { padding: 22px 18px; border-radius: 18px; }
  .vs-waband { padding: 26px 20px; }
  .vs-aside { padding: 22px 18px; }
  .vs-route { padding: 22px 20px; }
}
@media ( prefers-reduced-motion: reduce ) {
  .vs-route:hover, .vs-route:focus-within, .vs-formpanel .metform-btn:hover { transform: none; }
}


/* CONTACT-FIX-START */

/* MetForm ships button.metform-btn:not(.toggle), so match its weight and win. */
.vs-formpanel button.metform-btn, .vs-formpanel button.metform-submit-btn, .vs-formpanel button.metform-btn:not( .toggle ), .vs-formpanel button.metform-btn:hover, .vs-formpanel button.metform-btn:focus {
  width: 100%; cursor: pointer;
  background-color: #D8B478 !important; color: #17130D !important;
  border: 0; border-radius: 999px;
  font-family: "Manrope", system-ui, sans-serif; font-size: 15.5px; font-weight: 700; letter-spacing: -0.005em;
  padding: 17px 28px; min-height: 56px;
  box-shadow: 0 12px 30px rgba( 216, 180, 120, 0.18 );
  transition: background-color 0.22s var( --vs-ease ), transform 0.22s var( --vs-ease ), box-shadow 0.22s var( --vs-ease );
}
.vs-formpanel button.metform-btn span { color: inherit !important; font: inherit; }
.vs-formpanel button.metform-btn:hover { background-color: #E6C48E !important; transform: translateY( -2px ); box-shadow: 0 16px 38px rgba( 216, 180, 120, 0.26 ); }
.vs-formpanel button.metform-btn:active { transform: none; }
.vs-formpanel button.metform-btn:focus-visible { outline: 2px solid #E6C48E; outline-offset: 3px; }
@media ( prefers-reduced-motion: reduce ) { .vs-formpanel button.metform-btn:hover { transform: none; } }


/* CONTACT-FIX2-START */

.vs-sec--tight-bottom { padding-bottom: var( --vs-s5 ); }
@media ( max-width: 1024px ) { .vs-sec--tight-bottom { padding-bottom: var( --vs-s4 ); } }
.vs-chero::after { opacity: 0.3; }


/* CONTACT-FIX3-START */

/* Section headers line up with the grid or list they introduce. */
.e-con.vs-headl, .vs-headl { align-self: flex-start; margin-right: auto; }
/* MetForm paints the required mark red; the brand mark is gold. */
.vs-formpanel .mf-input-wrapper .mf-input-label .mf-input-required-indicator,
.vs-formpanel span.mf-input-required-indicator { color: #D8B478 !important; }


/* CONTACT-FIX4-START */

/* A boxed Elementor container centres its inner wrapper; headers hug the left. */
.e-con.vs-headl > .e-con-inner, .vs-headl > .e-con-inner { margin-inline: 0; }


/* CONTACT-FIX5-START */

/* MetForm paints invalid fields pure red; warm it to the palette. */
.vs-formpanel .mf-input[aria-invalid="true"],
.vs-formpanel input.mf-input[aria-invalid="true"],
.vs-formpanel textarea.mf-input[aria-invalid="true"],
.vs-formpanel .mf-field-error .mf-input { border-color: #E0705F !important; background-color: rgba( 224, 112, 95, 0.06 ) !important; box-shadow: 0 0 0 3px rgba( 224, 112, 95, 0.14 ) !important; }
.vs-formpanel .mf-error-message, .vs-formpanel .mf-error-res { color: #F09384 !important; font-size: 13.5px !important; margin-top: 8px !important; }
/* Focus still reads, even on a field being corrected. */
.vs-formpanel .mf-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba( 224, 112, 95, 0.26 ) !important; }


/* CONTACT-FIX6-START */

/* Focus, invalid and the error line sit above the per-widget Elementor CSS. */
.vs-formpanel .mf-input-wrapper .mf-input:focus, .vs-formpanel .mf-input-wrapper .mf-textarea:focus { border-color: #D8B478 !important; background-color: rgba( 244, 239, 229, 0.06 ) !important; box-shadow: 0 0 0 3px rgba( 216, 180, 120, 0.20 ) !important; outline: none !important; }
.vs-formpanel .mf-input-wrapper:has( .mf-input:focus ) .mf-input-label { color: #E6C48E !important; }
.vs-formpanel .mf-input-wrapper .mf-input[aria-invalid="true"], .vs-formpanel .mf-input-wrapper .mf-input.mf-invalid { border-color: #E0705F !important; background-color: rgba( 224, 112, 95, 0.06 ) !important; box-shadow: 0 0 0 3px rgba( 224, 112, 95, 0.14 ) !important; }
.vs-formpanel .mf-input-wrapper .mf-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba( 224, 112, 95, 0.28 ) !important; }
.vs-formpanel .mf-error-message { color: #F09384 !important; font-size: 13.5px !important; margin-top: 8px !important; display: block !important; }


/* CONTACT-FIX7-START */

.vs-formpanel .mf-input-wrapper .mf-input, .vs-formpanel .mf-input-wrapper .mf-textarea { border-radius: 12px !important; }
.vs-formpanel .mf-input-wrapper .mf-textarea { min-height: 156px !important; resize: vertical; }

/* ANCHOR-OFFSET-START */

[id="contact-form"] { scroll-margin-top: 110px; }
/* The meta pill is one line of text, not a row of flex items. */
.vs-meta { display: inline-block; line-height: 1.55; text-align: left; }
.vs-meta__dot { display: inline-block; vertical-align: 1px; margin-right: 9px; }
@media ( max-width: 600px ) { .vs-meta { text-align: center; padding: 12px 18px; font-size: 12.5px; } }


/* MOTION-GUARD-START */

@media ( prefers-reduced-motion: reduce ) { html { scroll-behavior: auto; } }


/* DOCS-BLOCK-START */

/* --- Documentation layout ------------------------------------------- */
.e-con.vs-doc, .vs-doc { --display: grid; display: grid; grid-template-columns: 236px minmax( 0, 1fr ); gap: 52px; width: 100%; align-items: start; }
@media ( max-width: 1100px ) { .e-con.vs-doc, .vs-doc { grid-template-columns: 1fr; gap: 26px; } }
.e-con.vs-doc > .elementor-element { width: 100% !important; max-width: none !important; }

/* Sticky rail */
.vs-toc { position: sticky; top: 108px; align-self: start; }
@media ( max-width: 1100px ) { .vs-toc { position: static; } }
.vs-toc__k { display: block; margin-bottom: 14px; font-family: "Manrope", system-ui, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba( 244, 239, 229, 0.42 ); }
.vs-toc__bar { position: relative; height: 3px; border-radius: 99px; background: rgba( 244, 239, 229, 0.09 ); overflow: hidden; margin-bottom: 18px; }
.vs-toc__bar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 99px; background: linear-gradient( 90deg, var( --vs-accent-deep ), var( --vs-accent ) ); transition: width 0.18s linear; }
.vs-toc__list { list-style: none; margin: 0; padding: 0; border-left: 1px solid rgba( 244, 239, 229, 0.10 ); }
.vs-toc__list li { margin: 0; }
.vs-toc__link { display: block; position: relative; padding: 8px 0 8px 16px; margin-left: -1px; border-left: 2px solid transparent; font-family: "Manrope", system-ui, sans-serif; font-size: 14px; line-height: 1.4; color: rgba( 244, 239, 229, 0.58 ); text-decoration: none; transition: color 0.2s var( --vs-ease ), border-color 0.2s var( --vs-ease ); }
.vs-toc__link:hover { color: var( --vs-ink ); }
.vs-toc__link.is-active { color: var( --vs-accent-hi ); border-left-color: var( --vs-accent ); font-weight: 600; }
.vs-toc__link:focus-visible { outline: 2px solid var( --vs-accent-hi ); outline-offset: 2px; border-radius: 4px; }

/* Mobile table of contents */
.vs-tocm { display: none; }
@media ( max-width: 1100px ) {
  .vs-tocm { display: block; position: sticky; top: 96px; z-index: 6; }
  .vs-tocm__btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 13px 18px; border-radius: 14px; cursor: pointer; background: rgba( 20, 18, 15, 0.92 ); backdrop-filter: blur( 14px ); border: 1px solid rgba( 216, 180, 120, 0.26 ); color: var( --vs-ink ); font-family: "Manrope", system-ui, sans-serif; font-size: 14.5px; font-weight: 600; }
  .vs-tocm__btn span.vs-tocm__cur { color: var( --vs-accent ); font-weight: 600; }
  .vs-tocm__btn::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate( 45deg ) translateY( -2px ); flex: none; transition: transform 0.2s var( --vs-ease ); }
  .vs-tocm.is-open .vs-tocm__btn::after { transform: rotate( -135deg ) translateY( -2px ); }
  .vs-tocm__panel { display: none; margin-top: 8px; padding: 8px; border-radius: 14px; background: rgba( 12, 11, 9, 0.97 ); backdrop-filter: blur( 14px ); border: 1px solid rgba( 244, 239, 229, 0.12 ); max-height: 58vh; overflow-y: auto; }
  .vs-tocm.is-open .vs-tocm__panel { display: block; }
  .vs-tocm__panel a { display: block; padding: 12px 14px; min-height: 44px; border-radius: 10px; color: rgba( 244, 239, 229, 0.78 ); text-decoration: none; font-family: "Manrope", system-ui, sans-serif; font-size: 14.5px; }
  .vs-tocm__panel a.is-active { background: rgba( 216, 180, 120, 0.12 ); color: var( --vs-accent-hi ); }
}

/* --- Device chooser -------------------------------------------------- */
.e-con.vs-dgrid, .vs-dgrid { --display: grid; display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: 14px; width: 100%; align-items: stretch; }
@media ( max-width: 1100px ) { .e-con.vs-dgrid, .vs-dgrid { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); } }
@media ( max-width: 720px ) { .e-con.vs-dgrid, .vs-dgrid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } }
@media ( max-width: 430px ) { .e-con.vs-dgrid, .vs-dgrid { grid-template-columns: 1fr; } }
.vs-devcard { display: flex; flex-direction: column; gap: 6px; min-height: 108px; padding: 18px 16px; border-radius: 14px; text-decoration: none; background: rgba( 244, 239, 229, 0.026 ); border: 1px solid rgba( 244, 239, 229, 0.09 ); transition: border-color 0.26s var( --vs-ease ), background-color 0.26s var( --vs-ease ), transform 0.26s var( --vs-ease ); }
.vs-devcard:hover { border-color: rgba( 216, 180, 120, 0.36 ); background: rgba( 244, 239, 229, 0.05 ); transform: translateY( -3px ); }
.vs-devcard:focus-visible { outline: 2px solid var( --vs-accent-hi ); outline-offset: 3px; }
.vs-devcard b { display: block; font-family: "Bricolage Grotesque", Georgia, serif; font-size: 15.5px; font-weight: 600; color: var( --vs-ink ); line-height: 1.25; }
.vs-devcard em { font-style: normal; font-family: "Manrope", system-ui, sans-serif; font-size: 13px; color: rgba( 244, 239, 229, 0.56 ); }
.vs-devcard u { text-decoration: none; margin-top: auto; font-family: "Manrope", system-ui, sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var( --vs-accent ); }

/* --- Step timeline ---------------------------------------------------- */
.vs-steps { position: relative; padding-left: 52px; }
.vs-steps::before { content: ""; position: absolute; left: 17px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient( 180deg, rgba( 216, 180, 120, 0.34 ), rgba( 244, 239, 229, 0.07 ) ); }
@media ( max-width: 600px ) { .vs-steps { padding-left: 40px; } .vs-steps::before { left: 13px; } }
.vs-dstep { position: relative; padding-bottom: 30px; }
.vs-dstep:last-child { padding-bottom: 0; }
.vs-dstep__n { position: absolute; left: -52px; top: 0; display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; background: var( --vs-bg ); border: 1px solid rgba( 216, 180, 120, 0.4 ); color: var( --vs-accent ); font-family: "Manrope", system-ui, sans-serif; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
@media ( max-width: 600px ) { .vs-dstep__n { left: -40px; width: 27px; height: 27px; font-size: 11.5px; } }
.vs-dstep h3, .vs-dstep .vs-dstep__t { margin: 0 0 6px; font-family: "Bricolage Grotesque", Georgia, serif; font-size: 17px; font-weight: 600; line-height: 1.3; color: var( --vs-ink ); letter-spacing: -0.012em; }
.vs-dstep p { margin: 0; font-family: "Manrope", system-ui, sans-serif; font-size: 15px; line-height: 1.62; color: rgba( 244, 239, 229, 0.72 ); }
.vs-dstep p + p { margin-top: 8px; }
.vs-dstep code, .vs-code { display: inline-block; padding: 2px 8px; border-radius: 6px; background: rgba( 216, 180, 120, 0.11 ); border: 1px solid rgba( 216, 180, 120, 0.24 ); color: var( --vs-accent-hi ); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; word-break: break-all; }

/* --- Callouts --------------------------------------------------------- */
.vs-note, .vs-warn { display: flex; gap: 11px; margin-top: 12px; padding: 13px 16px; border-radius: 12px; font-family: "Manrope", system-ui, sans-serif; font-size: 14px; line-height: 1.55; }
.vs-note { background: rgba( 216, 180, 120, 0.08 ); border: 1px solid rgba( 216, 180, 120, 0.24 ); color: rgba( 244, 239, 229, 0.82 ); }
.vs-warn { background: rgba( 224, 112, 95, 0.08 ); border: 1px solid rgba( 224, 112, 95, 0.26 ); color: rgba( 244, 239, 229, 0.82 ); }
.vs-note::before { content: "TIP"; flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; color: var( --vs-accent ); padding-top: 3px; }
.vs-warn::before { content: "NOTE"; flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; color: #F09384; padding-top: 3px; }
.vs-note p, .vs-warn p { margin: 0; font-size: inherit; color: inherit; }

/* --- Screenshot frame -------------------------------------------------- */
.vs-shot { margin-top: 16px; }
.vs-shot figure { margin: 0; }
.vs-shot img, .vs-shot .vs-shot__empty { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid rgba( 244, 239, 229, 0.12 ); background: rgba( 244, 239, 229, 0.02 ); box-shadow: 0 18px 44px rgba( 0, 0, 0, 0.42 ); cursor: zoom-in; transition: border-color 0.26s var( --vs-ease ), transform 0.26s var( --vs-ease ); }
.vs-shot img:hover { border-color: rgba( 216, 180, 120, 0.4 ); transform: translateY( -2px ); }
.vs-shot figcaption { margin-top: 9px; font-family: "Manrope", system-ui, sans-serif; font-size: 13px; color: rgba( 244, 239, 229, 0.48 ); }
.vs-shot__empty { display: grid; place-items: center; min-height: 140px; cursor: default; border-style: dashed; color: rgba( 244, 239, 229, 0.34 ); font-family: "Manrope", system-ui, sans-serif; font-size: 13px; text-align: center; padding: 20px; }

/* --- Lightbox ---------------------------------------------------------- */
.vs-lb { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 28px; background: rgba( 4, 4, 3, 0.94 ); backdrop-filter: blur( 8px ); }
.vs-lb.is-open { display: flex; }
.vs-lb img { max-width: min( 1200px, 94vw ); max-height: 86vh; border-radius: 12px; border: 1px solid rgba( 244, 239, 229, 0.16 ); box-shadow: 0 30px 90px rgba( 0, 0, 0, 0.6 ); }
.vs-lb__cap { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; font-family: "Manrope", system-ui, sans-serif; font-size: 13.5px; color: rgba( 244, 239, 229, 0.62 ); padding: 0 24px; }
.vs-lb button { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; background: rgba( 244, 239, 229, 0.08 ); border: 1px solid rgba( 244, 239, 229, 0.16 ); color: var( --vs-ink ); font-size: 20px; line-height: 1; transition: background-color 0.2s var( --vs-ease ); }
.vs-lb button:hover { background: rgba( 216, 180, 120, 0.22 ); }
.vs-lb button:focus-visible { outline: 2px solid var( --vs-accent-hi ); outline-offset: 3px; }
.vs-lb__x { top: 20px; right: 20px; }
.vs-lb__p { left: 20px; top: 50%; margin-top: -24px; }
.vs-lb__n { right: 20px; top: 50%; margin-top: -24px; }
@media ( max-width: 640px ) { .vs-lb { padding: 14px; } .vs-lb__p { left: 10px; } .vs-lb__n { right: 10px; } }

/* --- Device section heading -------------------------------------------- */
.vs-dev { scroll-margin-top: 112px; }
.vs-dev + .vs-dev { margin-top: 62px; padding-top: 52px; border-top: 1px solid rgba( 244, 239, 229, 0.08 ); }
.vs-dev__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.vs-dev__time { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; background: rgba( 244, 239, 229, 0.05 ); border: 1px solid rgba( 244, 239, 229, 0.11 ); font-family: "Manrope", system-ui, sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba( 244, 239, 229, 0.6 ); }

@media ( prefers-reduced-motion: reduce ) { .vs-devcard:hover, .vs-shot img:hover { transform: none; } }


/* DOCS-FIX-START */

/* The step rail is a column, whatever Elementor defaults the container to. */
.e-con.vs-steps, .vs-steps { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; }
.e-con.vs-steps > .elementor-element, .vs-steps > .vs-dstep { width: 100% !important; max-width: none !important; flex: 0 0 auto !important; }
.e-con.vs-dev, .vs-dev { display: flex !important; flex-direction: column !important; align-items: stretch !important; }
.e-con.vs-dev > .elementor-element { width: 100% !important; max-width: none !important; }


/* DOCS-FIX2-START */

/* One set of navigation per breakpoint. */
@media ( max-width: 1100px ) { .e-con.vs-toc, .vs-toc { display: none !important; } }
@media ( min-width: 1101px ) { .vs-tocm { display: none !important; } }
/* Compact device cards once they go full width. */
@media ( max-width: 560px ) {
  .vs-devcard { min-height: 0; padding: 14px 16px; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
  .vs-devcard b { flex: 1 1 auto; font-size: 15px; }
  .vs-devcard u { margin-top: 0; flex: 0 0 auto; font-size: 11px; }
  .vs-devcard em { flex: 1 1 100%; font-size: 12.5px; }
}


/* MOBILE-NAV-START */

/* =========================================================================
   Mobile flyout menu. Header Footer Elementor paints the menu links white
   by default, which left ivory text on white. Scoped to .hfe-dropdown, the
   class the plugin only adds while the menu is in flyout mode.
   ====================================================================== */
nav.hfe-dropdown, nav.hfe-dropdown-expandible {
  background-color: #14120F !important;
  border: 1px solid rgba( 244, 239, 229, 0.10 );
  border-top: 0;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 26px 60px rgba( 0, 0, 0, 0.5 );
  overflow: hidden;
}
.hfe-dropdown .hfe-nav-menu li.menu-item { border-bottom: 1px solid rgba( 244, 239, 229, 0.08 ) !important; }
.hfe-dropdown > ul.hfe-nav-menu > li.menu-item:last-child { border-bottom: 0 !important; }
.hfe-dropdown a.hfe-menu-item, .hfe-dropdown a.hfe-sub-menu-item {
  background-color: transparent !important;
  color: #F4EFE5 !important;
  display: flex; align-items: center;
  min-height: 52px;
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 16px; font-weight: 500; line-height: 1.3;
  transition: background-color 0.2s var( --vs-ease ), color 0.2s var( --vs-ease );
}
.hfe-dropdown a.hfe-menu-item:hover, .hfe-dropdown a.hfe-menu-item:focus,
.hfe-dropdown a.hfe-sub-menu-item:hover, .hfe-dropdown a.hfe-sub-menu-item:focus {
  background-color: rgba( 216, 180, 120, 0.10 ) !important;
  color: #E6C48E !important;
}
.hfe-dropdown .menu-item.current-menu-item > a.hfe-menu-item,
.hfe-dropdown .menu-item.current-menu-ancestor > a.hfe-menu-item,
.hfe-dropdown .menu-item.current-menu-item > a.hfe-sub-menu-item {
  color: #D8B478 !important;
  background-color: rgba( 216, 180, 120, 0.07 ) !important;
  box-shadow: inset 3px 0 0 #D8B478;
}
.hfe-dropdown a.hfe-menu-item:focus-visible, .hfe-dropdown a.hfe-sub-menu-item:focus-visible {
  outline: 2px solid #E6C48E; outline-offset: -3px;
}
.hfe-dropdown .sub-menu { background-color: rgba( 0, 0, 0, 0.22 ) !important; }
.hfe-dropdown .sub-menu a.hfe-sub-menu-item {
  padding-left: 34px !important; font-size: 15px;
  color: rgba( 244, 239, 229, 0.82 ) !important;
}
.hfe-dropdown .hfe-has-submenu-container a.hfe-menu-item .hfe-menu-toggle,
.hfe-dropdown .hfe-menu-toggle { color: #D8B478 !important; }

/* The toggle itself: a proper touch target, no stray default border. */
.hfe-nav-menu__toggle {
  background: transparent !important; border: 0 !important;
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; cursor: pointer;
}
.hfe-nav-menu__toggle .hfe-nav-menu-icon { background: transparent !important; border: 0 !important; padding: 0 !important; }
.hfe-nav-menu__toggle .hfe-nav-menu-icon svg { fill: #F4EFE5; transition: fill 0.2s var( --vs-ease ); }
.hfe-nav-menu__toggle:hover .hfe-nav-menu-icon svg { fill: #D8B478; }
.hfe-nav-menu__toggle:focus-visible { outline: 2px solid #E6C48E; outline-offset: 2px; }


/* MOBILE-NAV-2-START */

/* Close control: the plugin default is a boxed cross glyph. Draw a clean one. */
.hfe-nav-menu-icon:has( svg.e-far-window-close ) { position: relative; width: 22px; height: 22px; display: inline-block; }
.hfe-nav-menu-icon:has( svg.e-far-window-close ) svg { display: none; }
.hfe-nav-menu-icon:has( svg.e-far-window-close )::before,
.hfe-nav-menu-icon:has( svg.e-far-window-close )::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 20px; height: 2px; border-radius: 2px; background: #F4EFE5;
  transition: background-color 0.2s var( --vs-ease );
}
.hfe-nav-menu-icon:has( svg.e-far-window-close )::before { transform: translate( -50%, -50% ) rotate( 45deg ); }
.hfe-nav-menu-icon:has( svg.e-far-window-close )::after { transform: translate( -50%, -50% ) rotate( -45deg ); }
.hfe-nav-menu__toggle:hover .hfe-nav-menu-icon:has( svg.e-far-window-close )::before,
.hfe-nav-menu__toggle:hover .hfe-nav-menu-icon:has( svg.e-far-window-close )::after { background: #D8B478; }

/* You are here. The menu items are custom links, so WordPress never flags one. */
.hfe-dropdown a.hfe-menu-item.vs-navcur, .hfe-dropdown a.hfe-sub-menu-item.vs-navcur {
  color: #D8B478 !important;
  background-color: rgba( 216, 180, 120, 0.07 ) !important;
  box-shadow: inset 3px 0 0 #D8B478;
  font-weight: 600;
}


/* CHECKOUT-BLOCK-START */

/* =========================================================================
   Checkout. A single premium panel on the dark page, two steps.
   ====================================================================== */
.vs-co { display: grid; grid-template-columns: minmax( 0, 1fr ) 330px; gap: 28px; align-items: start; max-width: 1100px; margin: 0 auto; }
@media ( max-width: 1000px ) { .vs-co { grid-template-columns: 1fr; gap: 20px; } }

.vs-co__panel { position: relative; padding: 34px; border-radius: var( --vs-r-lg ); background: linear-gradient( 180deg, #16141100 0%, #0000001a 100% ), #141210; border: 1px solid rgba( 244, 239, 229, 0.11 ); box-shadow: 0 34px 90px rgba( 0, 0, 0, 0.55 ); }
@media ( max-width: 640px ) { .vs-co__panel { padding: 22px 18px; border-radius: 20px; } }

.vs-co__head { position: relative; margin-bottom: 24px; text-align: center; }
.vs-co__title { margin: 0; font-family: "Bricolage Grotesque", Georgia, serif; font-size: 30px; font-weight: 600; letter-spacing: -0.028em; color: var( --vs-ink ); line-height: 1.15; }
@media ( max-width: 640px ) { .vs-co__title { font-size: 24px; } }
.vs-co__x { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; text-decoration: none; font-size: 22px; line-height: 1; color: rgba( 244, 239, 229, 0.66 ); border: 1px solid rgba( 244, 239, 229, 0.12 ); transition: color 0.2s var( --vs-ease ), border-color 0.2s var( --vs-ease ), background-color 0.2s var( --vs-ease ); }
.vs-co__x:hover { color: var( --vs-ink ); border-color: rgba( 216, 180, 120, 0.4 ); background: rgba( 216, 180, 120, 0.1 ); }
.vs-co__x:focus-visible { outline: 2px solid var( --vs-accent-hi ); outline-offset: 2px; }

.vs-co__steps { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 14px 0 0; }
.vs-co__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba( 244, 239, 229, 0.18 ); transition: background-color 0.3s var( --vs-ease ), box-shadow 0.3s var( --vs-ease ); }
.vs-co__dot.is-on { background: var( --vs-accent ); box-shadow: 0 0 0 4px rgba( 216, 180, 120, 0.16 ); }
.vs-co__rule { width: 42px; height: 1px; background: rgba( 244, 239, 229, 0.18 ); }
.vs-co__stepn { margin-left: 8px; font-family: "Manrope", system-ui, sans-serif; font-size: 13px; color: rgba( 244, 239, 229, 0.6 ); }

.vs-co__bar { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 10px; margin-bottom: 26px; padding: 18px 20px; border-radius: 16px; background: #0A0908; border: 1px solid rgba( 244, 239, 229, 0.09 ); }
.vs-co__bar span { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; position: relative; }
.vs-co__bar span + span::before { content: ""; position: absolute; left: -5px; top: 10%; bottom: 10%; width: 1px; background: rgba( 244, 239, 229, 0.1 ); }
.vs-co__bar strong { font-family: "Bricolage Grotesque", Georgia, serif; font-size: 19px; font-weight: 600; color: var( --vs-ink ); letter-spacing: -0.02em; }
.vs-co__bar span:last-child strong { color: var( --vs-accent ); }
.vs-co__bar em { font-style: normal; font-family: "Manrope", system-ui, sans-serif; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba( 244, 239, 229, 0.46 ); }
@media ( max-width: 480px ) { .vs-co__bar { padding: 14px 10px; } .vs-co__bar strong { font-size: 16px; } .vs-co__bar em { font-size: 10px; } }

.vs-co__step { display: flex; flex-direction: column; gap: 18px; }
.vs-co__step[hidden] { display: none; }
.vs-js .vs-co__step:not([hidden]) { animation: vsRise 0.4s var( --vs-ease ) both; }
@media ( prefers-reduced-motion: reduce ) { .vs-js .vs-co__step:not([hidden]) { animation: none; } }
.vs-co__h2 { margin: 0; font-family: "Bricolage Grotesque", Georgia, serif; font-size: 20px; font-weight: 600; color: var( --vs-ink ); }

.vs-co__to { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; background: rgba( 244, 239, 229, 0.03 ); border: 1px solid rgba( 244, 239, 229, 0.09 ); font-family: "Manrope", system-ui, sans-serif; font-size: 14.5px; color: rgba( 244, 239, 229, 0.74 ); }
.vs-co__to > span { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.vs-co__to strong { color: var( --vs-ink ); word-break: break-all; }
.vs-co__to svg { width: 17px; height: 17px; flex: none; color: var( --vs-accent ); }

.vs-co__total { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-radius: 16px; background: rgba( 216, 180, 120, 0.07 ); border: 1px solid rgba( 216, 180, 120, 0.26 ); font-family: "Manrope", system-ui, sans-serif; font-size: 15px; color: rgba( 244, 239, 229, 0.8 ); }
.vs-co__total strong { font-family: "Bricolage Grotesque", Georgia, serif; font-size: 26px; font-weight: 600; color: var( --vs-accent ); letter-spacing: -0.02em; }

.vs-co__secure { display: flex; align-items: flex-start; gap: 9px; margin: 0; font-family: "Manrope", system-ui, sans-serif; font-size: 13px; line-height: 1.5; color: rgba( 244, 239, 229, 0.5 ); }
.vs-co__secure svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var( --vs-accent ); }
.vs-co__chev { width: 17px; height: 17px; margin-left: 6px; }

/* Aside */
.vs-co__aside { position: sticky; top: 108px; padding: 26px 24px; border-radius: var( --vs-r-md ); background: rgba( 244, 239, 229, 0.022 ); border: 1px solid rgba( 244, 239, 229, 0.085 ); }
@media ( max-width: 1000px ) { .vs-co__aside { position: static; } }
.vs-co__aside h2 { margin: 0 0 16px; font-family: "Bricolage Grotesque", Georgia, serif; font-size: 17px; font-weight: 600; color: var( --vs-ink ); }
.vs-co__next { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.vs-co__next li { display: flex; gap: 12px; }
.vs-co__next span { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba( 216, 180, 120, 0.12 ); border: 1px solid rgba( 216, 180, 120, 0.3 ); color: var( --vs-accent ); font-family: "Manrope", system-ui, sans-serif; font-size: 12px; font-weight: 700; }
.vs-co__next p { margin: 0; font-family: "Manrope", system-ui, sans-serif; font-size: 14px; line-height: 1.55; color: rgba( 244, 239, 229, 0.72 ); }
.vs-co__aside-note { margin: 8px 0 0; font-family: "Manrope", system-ui, sans-serif; font-size: 13px; line-height: 1.55; color: rgba( 244, 239, 229, 0.52 ); }

/* Fields inside the panel */
.vs-co .vs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media ( max-width: 640px ) { .vs-co .vs-row { grid-template-columns: 1fr; } }
.vs-co .vs-field { display: flex; flex-direction: column; gap: 7px; margin: 0; }
.vs-co .vs-field[hidden] { display: none; }
.vs-co label, .vs-co .vs-label, .vs-co legend { font-family: "Manrope", system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba( 244, 239, 229, 0.62 ); }
.vs-req { font-weight: 500; letter-spacing: 0.02em; text-transform: none; color: rgba( 244, 239, 229, 0.4 ); }
.vs-co input[type="text"], .vs-co input[type="email"], .vs-co input[type="tel"], .vs-co input[type="number"], .vs-co select, .vs-co textarea {
  width: 100%; display: block; background: rgba( 244, 239, 229, 0.035 ); border: 1px solid rgba( 244, 239, 229, 0.12 ); border-radius: 12px; color: var( --vs-ink ); font-family: "Manrope", system-ui, sans-serif; font-size: 15.5px; line-height: 1.5; padding: 14px 16px; min-height: 52px; appearance: none; -webkit-appearance: none; transition: border-color 0.2s var( --vs-ease ), background-color 0.2s var( --vs-ease ), box-shadow 0.2s var( --vs-ease ); }
.vs-co textarea { min-height: 96px; resize: vertical; }
.vs-co select { background-image: linear-gradient( 45deg, transparent 50%, rgba( 244, 239, 229, 0.5 ) 50% ), linear-gradient( 135deg, rgba( 244, 239, 229, 0.5 ) 50%, transparent 50% ); background-position: calc( 100% - 20px ) 23px, calc( 100% - 14px ) 23px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.vs-co ::placeholder { color: rgba( 244, 239, 229, 0.32 ); }
.vs-co input:focus, .vs-co select:focus, .vs-co textarea:focus { outline: none; border-color: var( --vs-accent ); background: rgba( 244, 239, 229, 0.06 ); box-shadow: 0 0 0 3px rgba( 216, 180, 120, 0.2 ); }
.vs-co .has-error input, .vs-co .has-error select, .vs-co .has-error textarea { border-color: #E0705F; background: rgba( 224, 112, 95, 0.06 ); box-shadow: 0 0 0 3px rgba( 224, 112, 95, 0.14 ); }
.vs-co .vs-field__error { margin: 0; font-family: "Manrope", system-ui, sans-serif; font-size: 13px; color: #F09384; }
.vs-co .vs-field__error:empty { display: none; }
.vs-co .vs-field__hint { margin: 0; font-family: "Manrope", system-ui, sans-serif; font-size: 13px; line-height: 1.5; color: rgba( 244, 239, 229, 0.5 ); }
.vs-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; letter-spacing: 0.06em; }

.vs-input-ic { position: relative; display: block; }
.vs-input-ic svg { position: absolute; left: 16px; top: 50%; transform: translateY( -50% ); width: 18px; height: 18px; color: rgba( 244, 239, 229, 0.42 ); pointer-events: none; }
.vs-input-ic input { padding-left: 46px !important; }

/* Quantity stepper */
.vs-co .vs-qty { display: inline-flex; align-items: center; gap: 0; border: 1px solid rgba( 244, 239, 229, 0.12 ); border-radius: 12px; overflow: hidden; background: rgba( 244, 239, 229, 0.035 ); }
.vs-co .vs-qty button { width: 48px; min-height: 52px; cursor: pointer; background: transparent; border: 0; color: var( --vs-ink ); font-size: 18px; line-height: 1; transition: background-color 0.2s var( --vs-ease ), color 0.2s var( --vs-ease ); }
.vs-co .vs-qty button:hover { background: rgba( 216, 180, 120, 0.14 ); color: var( --vs-accent ); }
.vs-co .vs-qty input { width: 64px; text-align: center; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; -moz-appearance: textfield; }
.vs-co .vs-qty input::-webkit-outer-spin-button, .vs-co .vs-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Segmented control */
.vs-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media ( max-width: 480px ) { .vs-seg { grid-template-columns: 1fr; } }
.vs-seg__o { position: relative; display: block; cursor: pointer; }
.vs-seg__o input { position: absolute; opacity: 0; pointer-events: none; }
.vs-seg__o span { display: flex; flex-direction: column; gap: 3px; min-height: 64px; justify-content: center; padding: 13px 16px; border-radius: 14px; background: rgba( 244, 239, 229, 0.03 ); border: 1px solid rgba( 244, 239, 229, 0.11 ); transition: border-color 0.2s var( --vs-ease ), background-color 0.2s var( --vs-ease ); }
.vs-seg__o strong { font-family: "Manrope", system-ui, sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var( --vs-ink ); }
.vs-seg__o em { font-style: normal; font-family: "Manrope", system-ui, sans-serif; font-size: 12.5px; color: rgba( 244, 239, 229, 0.54 ); }
.vs-seg__o:hover span { border-color: rgba( 244, 239, 229, 0.2 ); }
.vs-seg__o input:checked + span { border-color: var( --vs-accent ); background: rgba( 216, 180, 120, 0.1 ); }
.vs-seg__o input:checked + span strong { color: var( --vs-accent-hi ); }
.vs-seg__o input:focus-visible + span { outline: 2px solid var( --vs-accent-hi ); outline-offset: 2px; }

/* Toggle */
.vs-toggle { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; border-radius: 14px; background: rgba( 244, 239, 229, 0.025 ); border: 1px solid rgba( 244, 239, 229, 0.09 ); }
.vs-toggle__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; margin: 0; }
.vs-toggle__txt { display: flex; flex-direction: column; gap: 2px; }
.vs-toggle__txt strong { font-family: "Manrope", system-ui, sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var( --vs-ink ); }
.vs-toggle__txt em { font-style: normal; font-family: "Manrope", system-ui, sans-serif; font-size: 13px; letter-spacing: 0; text-transform: none; color: rgba( 244, 239, 229, 0.54 ); }
.vs-switch { position: absolute; opacity: 0; width: 0; height: 0; }
.vs-switch__ui { position: relative; flex: none; width: 50px; height: 29px; border-radius: 999px; background: rgba( 244, 239, 229, 0.12 ); border: 1px solid rgba( 244, 239, 229, 0.14 ); transition: background-color 0.24s var( --vs-ease ), border-color 0.24s var( --vs-ease ); }
.vs-switch__ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: var( --vs-ink ); transition: transform 0.24s var( --vs-ease ), background-color 0.24s var( --vs-ease ); }
.vs-switch:checked + .vs-switch__ui { background: var( --vs-accent ); border-color: var( --vs-accent ); }
.vs-switch:checked + .vs-switch__ui::after { transform: translateX( 21px ); background: var( --vs-on-accent ); }
.vs-switch:focus-visible + .vs-switch__ui { outline: 2px solid var( --vs-accent-hi ); outline-offset: 3px; }
@media ( prefers-reduced-motion: reduce ) { .vs-switch__ui, .vs-switch__ui::after { transition: none; } }

/* Payment preference */
.vs-co .vs-fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vs-co .vs-pay { display: flex; flex-direction: column; gap: 10px; }
.vs-co .vs-pay__option { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 14px; cursor: pointer; background: rgba( 244, 239, 229, 0.03 ); border: 1px solid rgba( 244, 239, 229, 0.11 ); transition: border-color 0.2s var( --vs-ease ), background-color 0.2s var( --vs-ease ); }
.vs-co .vs-pay__option:hover { border-color: rgba( 244, 239, 229, 0.2 ); }
.vs-co .vs-pay__option:has( input:checked ) { border-color: var( --vs-accent ); background: rgba( 216, 180, 120, 0.09 ); }
.vs-co .vs-pay__option input { flex: none; width: 19px; height: 19px; margin-top: 2px; accent-color: #D8B478; }
.vs-co .vs-pay__option > span { display: flex; flex-direction: column; gap: 2px; }
.vs-co .vs-pay__option strong { font-family: "Manrope", system-ui, sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var( --vs-ink ); }
.vs-co .vs-pay__option > span > span { font-family: "Manrope", system-ui, sans-serif; font-size: 13px; color: rgba( 244, 239, 229, 0.54 ); }
.vs-co .vs-pay__panel { padding: 0 2px; }
.vs-co .vs-pay__notice { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 12px 14px; border-radius: 12px; background: rgba( 216, 180, 120, 0.07 ); border: 1px solid rgba( 216, 180, 120, 0.2 ); font-family: "Manrope", system-ui, sans-serif; font-size: 13px; line-height: 1.55; color: rgba( 244, 239, 229, 0.74 ); }
.vs-co .vs-pay__notice svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var( --vs-accent ); }

/* Buttons and status */
.vs-co .vs-btn--wide { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-height: 58px; padding: 18px 28px; border: 0; border-radius: 999px; cursor: pointer; background: var( --vs-accent ); color: var( --vs-on-accent ); font-family: "Manrope", system-ui, sans-serif; font-size: 16px; font-weight: 700; box-shadow: 0 14px 34px rgba( 216, 180, 120, 0.2 ); transition: background-color 0.2s var( --vs-ease ), transform 0.2s var( --vs-ease ); }
.vs-co .vs-btn--wide:hover { background: var( --vs-accent-hi ); transform: translateY( -2px ); }
.vs-co .vs-btn--wide:active { transform: none; }
.vs-co .vs-btn--wide:disabled { opacity: 0.6; cursor: progress; transform: none; }
.vs-co .vs-btn--wide:focus-visible { outline: 2px solid var( --vs-accent-hi ); outline-offset: 3px; }
@media ( prefers-reduced-motion: reduce ) { .vs-co .vs-btn--wide:hover { transform: none; } }
.vs-co .vs-form__status { margin: 0; padding: 13px 16px; border-radius: 12px; background: rgba( 216, 180, 120, 0.1 ); border: 1px solid rgba( 216, 180, 120, 0.28 ); font-family: "Manrope", system-ui, sans-serif; font-size: 14px; color: var( --vs-ink ); }
.vs-co .vs-form__status--error { background: rgba( 224, 112, 95, 0.1 ); border-color: rgba( 224, 112, 95, 0.32 ); color: #F09384; }
.vs-co .vs-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vs-co .vs-textlink { background: none; border: 0; padding: 0; cursor: pointer; font-family: "Manrope", system-ui, sans-serif; font-size: 14px; font-weight: 600; color: var( --vs-accent ); text-decoration: underline; text-underline-offset: 4px; }
.vs-co .vs-textlink:hover { color: var( --vs-accent-hi ); }

/* Success */
#vs-success .vs-success { max-width: 680px; margin: 0 auto; padding: 40px 34px; border-radius: var( --vs-r-lg ); background: #141210; border: 1px solid rgba( 216, 180, 120, 0.26 ); box-shadow: 0 34px 90px rgba( 0, 0, 0, 0.55 ); text-align: center; }
#vs-success .vs-success__seal { display: inline-grid; place-items: center; width: 58px; height: 58px; margin-bottom: 18px; border-radius: 50%; background: rgba( 216, 180, 120, 0.14 ); border: 1px solid rgba( 216, 180, 120, 0.4 ); color: var( --vs-accent ); }
#vs-success .vs-success__seal svg { width: 26px; height: 26px; }
#vs-success .vs-h2 { margin: 0 0 8px; font-family: "Bricolage Grotesque", Georgia, serif; font-size: 30px; font-weight: 600; color: var( --vs-ink ); }
#vs-success .vs-lead { margin: 0 0 18px; font-family: "Manrope", system-ui, sans-serif; font-size: 16px; line-height: 1.6; color: rgba( 244, 239, 229, 0.72 ); }
#vs-success .vs-success__number { display: inline-block; margin: 0 0 8px; padding: 10px 18px; border-radius: 999px; background: rgba( 216, 180, 120, 0.1 ); border: 1px solid rgba( 216, 180, 120, 0.3 ); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 16px; letter-spacing: 0.08em; color: var( --vs-accent ); }
#vs-success .vs-summary__note { margin: 0 0 22px; font-family: "Manrope", system-ui, sans-serif; font-size: 14px; color: rgba( 244, 239, 229, 0.6 ); }
#vs-success .vs-success__next { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 13px; text-align: left; }
#vs-success .vs-success__next li { display: flex; gap: 11px; font-family: "Manrope", system-ui, sans-serif; font-size: 14.5px; line-height: 1.55; color: rgba( 244, 239, 229, 0.74 ); }
#vs-success .vs-success__next svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var( --vs-accent ); }
#vs-success .vs-success__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* CHECKOUT-FIX-START */

/* A display rule outranks the hidden attribute, so say it explicitly. */
.vs-co[hidden], #vs-success[hidden], .vs-co .vs-pay__panel[hidden], .vs-co .vs-toggle .vs-field[hidden] { display: none !important; }

/* CHECKOUT-FIX2-START */
/* iOS zooms a focused control whose text measures under 16px, which throws
   the panel out of the viewport mid-form. */
@media ( max-width: 1024px ) {
    #vs-checkout-form input,
    #vs-checkout-form select,
    #vs-checkout-form textarea { font-size: 16px; }
}
/* The dismiss control needs a full touch target on phones. */
@media ( max-width: 767px ) {
    .vs-co__x { width: 44px; height: 44px; }
}
/* CHECKOUT-FIX2-END */

/* CHECKOUT-FIX3-START */
/* Edit is the only way back to step one, so it gets a real touch target
   without moving where it sits in the row. */
.vs-co__to .vs-textlink {
    padding-block: 12px; padding-inline: 14px 8px;
    margin-block: -12px; margin-inline: -14px -8px;
}
/* CHECKOUT-FIX3-END */

/* PRICING-FIX6-START */
/* =========================================================================
   LANDMARK-FIX
   A main landmark now wraps the page content. That brings the header
   clearance rule in app.css into play for the first time, and it was never
   meant for the breadcrumb bar, which carries its own spacing.
   ====================================================================== */
.vs-main > .vs-crumbs-bar:first-child { padding-top: 0; }
.vs-main:focus { outline: none; }

/* =========================================================================
   FAQ-FIX
   Corrections to the nested accordion used on the Plans and FAQ pages.
   ====================================================================== */

/* The open/close icon colour is set on the widget itself, under Style,
   Header, Icon, so it stays editable in Elementor. */

/* The answer sat flush against the card edge while the question was inset by
   the icon and the summary padding, so the two never lined up. 48px plus the
   card border puts the answer under the first letter of its question. */
.vs-faq .e-n-accordion-item > .e-con {
    padding-inline: 48px 24px;
}
.vs-faq .e-n-accordion-item > .e-con p { max-width: 68ch; }

@media ( max-width: 767px ) {
    .vs-faq .e-n-accordion-item > .e-con { padding-inline: 44px 18px; }
}

/* =========================================================================
   PRICING-FIX6
   ====================================================================== */

/* The two halves of the billing toggle were 88px and 174px on a phone,
   because the savings badge set the second one's minimum width. Stacking the
   badge under its label gives the control two equal halves. */
@media ( max-width: 767px ) {
    .vs-bill__b {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 8px 10px;
        min-height: 52px;
    }
    .vs-bill__save { margin-left: 0; vertical-align: baseline; }
}

/* The two closing buttons differed by 2px in height because only one carries
   a border. Matching the box keeps the pair level. */
.vs-finalcta .elementor-button { min-height: 49px; }
/* PRICING-FIX6-END */

/* DISCOVERY-START: FAQ and Blog search, topic chips, featured guide */
.vs-find { display: none; width: 100%; max-width: 720px; }
.vs-js .vs-find { display: block; }
.vs-find__form { margin: 0; }
.vs-find__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.vs-find__field { position: relative; display: block; }
.vs-find__icon { position: absolute; top: 50%; left: 18px; transform: translateY(-50%); color: #9A9287; pointer-events: none; }
.vs-find__input { display: block; width: 100%; height: 56px; margin: 0; padding: 0 56px 0 52px; border: 1px solid #2A2620; border-radius: 10px; background: #14120F; color: #F4EFE5; font-family: "Manrope", sans-serif; font-size: 16px; font-weight: 500; line-height: 1.2; -webkit-appearance: none; appearance: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.vs-find__input::placeholder { color: #9A9287; opacity: 1; }
.vs-find__input::-webkit-search-cancel-button, .vs-find__input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.vs-find__input:hover { border-color: rgba(216, 180, 120, 0.4); }
.vs-find__input:focus { outline: none; border-color: #D8B478; box-shadow: 0 0 0 2px rgba(216, 180, 120, 0.55); }
.vs-find__clear { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: #9A9287; cursor: pointer; transition: color 0.2s ease, background-color 0.2s ease; }
.vs-find__clear[hidden] { display: none; }
.vs-find__clear:hover { color: #F4EFE5; background: rgba(244, 239, 229, 0.08); }
.vs-find__clear:focus-visible { outline: 2px solid #D8B478; outline-offset: 2px; }
.vs-find__status { margin: 12px 2px 0; min-height: 1.4em; font-family: "Manrope", sans-serif; font-size: 14px; line-height: 1.4; color: #9A9287; }
.vs-find__empty { padding: 28px; border: 1px solid #2A2620; border-radius: 20px; background: rgba(244, 239, 229, 0.035); color: rgba(244, 239, 229, 0.74); font-family: "Manrope", sans-serif; font-size: 16px; line-height: 1.6; }
.vs-find__empty[hidden] { display: none; }
.vs-find__empty p { margin: 0 0 6px; }
.vs-find__empty a { color: #D8B478; text-decoration: underline; text-underline-offset: 3px; }
.vs-find__empty a:hover { color: #E6C48E; }
.vs-chip-btn .elementor-button:focus-visible { outline: 2px solid #D8B478; outline-offset: 3px; }

.vs-faq-group { scroll-margin-top: 110px; }
.vs-faq-group[hidden], .vs-faq .e-n-accordion-item[hidden], .vs-pc[hidden] { display: none !important; }
.vs-faq-group__aside { align-self: flex-start; min-width: 0; }
.vs-faq-group__main { min-width: 0; }
@media (min-width: 1025px) { .vs-faq-group__aside { position: sticky; top: 112px; } }
.vs-faq .elementor-widget-text-editor a { color: #D8B478; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.vs-faq .elementor-widget-text-editor a:hover { color: #E6C48E; }
.vs-faq .elementor-widget-text-editor a:focus-visible { outline: 2px solid #D8B478; outline-offset: 2px; border-radius: 4px; }

.vs-pc__flag { display: inline-block; align-self: flex-start; margin: 0; padding: 4px 11px; border: 1px solid rgba(216, 180, 120, 0.4); border-radius: 999px; font-family: "Manrope", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #E6C48E; }
.vs-pc--featured { grid-column: 1 / -1; flex-direction: row; }
.vs-pc--featured .vs-pc__media { position: relative; flex: 0 0 52%; max-width: 52%; min-height: 340px; }
.vs-pc-wrap .vs-pc--featured .vs-pc__media img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto !important; object-fit: cover; }
.vs-pc--featured .vs-pc__body { justify-content: center; gap: 16px; padding: clamp(28px, 4vw, 56px); }
.vs-pc--featured .vs-pc__title { font-size: clamp(26px, 3vw, 38px); line-height: 1.1; letter-spacing: -0.025em; }
.vs-pc--featured .vs-pc__excerpt { max-width: 52ch; font-size: 17px; }
@media (max-width: 900px) {
  .vs-pc--featured { flex-direction: column; }
  .vs-pc--featured .vs-pc__media { flex: none; max-width: none; min-height: 0; }
  .vs-pc-wrap .vs-pc--featured .vs-pc__media img { position: static; height: auto; aspect-ratio: 16 / 9 !important; }
  .vs-pc--featured .vs-pc__body { padding: 24px 22px 28px; }
}
/* DISCOVERY-END */

/* DISCOVERY-FIX1 */
.vs-find .vs-find__input[type="search"] { padding: 0 56px 0 52px; height: 56px; border-radius: 10px; }

/* BRAND-MARK-START */
/* The mark is square and its slots are square, but contain keeps it true to
   its proportions if a slot is ever resized to something else. */
#masthead .elementor-widget-image img,
#colophon .elementor-widget-image img {
    object-fit: contain;
    object-position: center;
}
/* BRAND-MARK-END */

/* GEO-BLOCK-START */
/* =========================================================================
   GEO-BLOCK — the IPTV Canada and IPTV USA landing pages.
   Builds on the tokens, rhythm and card language already defined above; the
   two pages share this layer and differ only in content.
   ====================================================================== */

/* --- Hero ------------------------------------------------------------- */
/* Two lights, warm at the top right and deep at the lower left, so the
   opening viewport has depth without a decorative graphic in it. */
.vs-geo-hero { position: relative; overflow: hidden; }
.vs-geo-hero::before,
.vs-geo-hero::after {
    content: ""; position: absolute; pointer-events: none; z-index: 0;
    border-radius: 50%;
}
.vs-geo-hero::before {
    width: 720px; height: 720px; top: -300px; right: -200px;
    background: radial-gradient( circle, rgba( 216, 180, 120, 0.13 ), transparent 68% );
    filter: blur( 46px );
}
.vs-geo-hero::after {
    width: 560px; height: 560px; bottom: -280px; left: -180px;
    background: radial-gradient( circle, rgba( 140, 106, 51, 0.10 ), transparent 70% );
    filter: blur( 54px );
}
.vs-geo-hero > .e-con-inner,
.vs-geo-hero > .elementor-element { position: relative; z-index: 1; }
.vs-geo-hero .elementor-widget-text-editor p { max-width: 62ch; }

/* --- Section intros --------------------------------------------------- */
/* A boxed container centres its inner wrapper; a left aligned intro needs that
   centring removed or the heading floats away from the grid beneath it. */
.vs-geo .vs-headl { align-self: flex-start; width: 100%; }
.vs-geo .vs-headl > .e-con-inner { margin-inline: 0; }
.vs-geo .vs-headl p { max-width: 68ch; }

/* --- Feature cards ---------------------------------------------------- */
.vs-geo .vs-tcard .elementor-icon-box-wrapper { text-align: left; }
.vs-geo .vs-tcard .elementor-icon-box-icon { margin-bottom: 14px; }

/* --- Device and channel tiles ----------------------------------------- */
.vs-tile {
    padding: 22px 20px; border-radius: var( --vs-r-md );
    background: rgba( 244, 239, 229, 0.022 );
    border: 1px solid rgba( 244, 239, 229, 0.08 );
    transition: border-color 0.3s var( --vs-ease ),
                background-color 0.3s var( --vs-ease ),
                transform 0.3s var( --vs-ease );
    height: 100%;
}
.vs-tile:hover {
    border-color: rgba( 216, 180, 120, 0.28 );
    background: rgba( 244, 239, 229, 0.038 );
    transform: translateY( -3px );
}

/* --- Numbered steps --------------------------------------------------- */
/* A column, not the squashed horizontal columns the grid default produces
   once a step carries more than a line of text. */
.vs-geo .vs-flow { display: flex !important; flex-direction: column !important; gap: 0 !important; }
.vs-geo .vs-flow > .elementor-element {
    position: relative;
    padding: 26px 0;
    border-top: 1px solid rgba( 244, 239, 229, 0.09 );
}
.vs-geo .vs-flow > .elementor-element:first-child { border-top: 0; padding-top: 0; }
.vs-geo .vs-flow > .elementor-element:last-child { padding-bottom: 0; }

/* --- Imagery ---------------------------------------------------------- */
/* Framed rather than floating: a hairline and a radius put a photograph in the
   same material language as the cards around it. */
.vs-geo .vs-shotframe img {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: var( --vs-r-md );
    border: 1px solid rgba( 244, 239, 229, 0.10 );
    display: block;
}

/* --- Pricing ---------------------------------------------------------- */
/* A legacy rule further up sets .vs-price to 47% below 900px. It was written
   for a flex row and squeezes a grid child. */
.vs-geo .vs-pgrid > .vs-price { width: 100% !important; }
.vs-geo .vs-pgrid { row-gap: 40px; }
.vs-geo .vs-price { position: relative; height: 100%; }
.vs-geo .vs-price:hover { transform: translateY( -4px ); }
.vs-geo .vs-price--best { box-shadow: 0 24px 60px rgba( 216, 180, 120, 0.11 ); }
.vs-geo .vs-price__head { min-height: 132px; }

/* --- Rate note -------------------------------------------------------- */
.vs-note {
    display: block;
    padding: 16px 20px; border-radius: var( --vs-r-md );
    background: rgba( 244, 239, 229, 0.028 );
    border: 1px solid rgba( 244, 239, 229, 0.09 );
}
.vs-note p:last-child { margin-bottom: 0; }

/* --- Responsive ------------------------------------------------------- */
@media ( max-width: 1024px ) {
    .vs-geo-hero::before, .vs-geo-hero::after { width: 420px; height: 420px; }
}
@media ( max-width: 767px ) {
    .vs-geo .vs-flow > .elementor-element { padding-block: 22px; }
    .vs-geo .vs-price__head { min-height: 0; }
}

@media ( prefers-reduced-motion: reduce ) {
    .vs-geo .vs-tile:hover,
    .vs-geo .vs-price:hover { transform: none; }
}
/* GEO-BLOCK-END */

/* GEO-FIX-START */
/* GEO-FIX --------------------------------------------------------------- */
/* Inline links sat at 4.01:1 against the page, just under the 4.5:1 floor for
   body sized text. The brighter accent clears it and still reads as gold. */
.vs-geo .elementor-widget-text-editor a,
.vs-geo .elementor-widget-icon-list a,
.vs-geo p a {
    color: var( --vs-accent-hi );
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.vs-geo .elementor-widget-text-editor a:hover,
.vs-geo p a:hover { color: #F0D6A8; }

/* The section label was 12px, under the floor this design system sets for any
   text that carries meaning. */
.vs-geo .vs-geo-hero .elementor-widget-heading .elementor-heading-title[class],
.vs-geo .vs-eyebrow .elementor-heading-title { font-size: 13px; letter-spacing: 0.14em; }
/* GEO-FIX-END */


/* =========================================================================
   LEGAL-BLOCK — Privacy Policy, Terms of Service and Refund Policy.
   One text-editor widget per page holds the whole document, so the wording
   stays editable in Elementor; this layer only gives that prose the site's
   typography on a dark background.
   ====================================================================== */

.vs-legal h2 {
    margin: 46px 0 14px;
    color: var( --vs-ink );
    font-family: "Bricolage Grotesque", Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

/* 860px of 16px Manrope runs to about 100 characters a line; legal prose is
   read in full, so it gets a proper measure while keeping the left edge
   aligned with the heading above it. */
.vs-legal.vs-legal .e-con-inner > .elementor-widget-text-editor { max-width: 70ch; }

.vs-legal .elementor-widget-container > *:first-child { margin-top: 0; }

.vs-legal p { margin: 0 0 16px; }
.vs-legal p:last-child { margin-bottom: 0; }

/* Markers in the accent rather than browser discs, and a hanging indent so
   wrapped lines stay aligned with the first. */
.vs-legal ul { margin: 0 0 22px; padding: 0; list-style: none; }
.vs-legal li { position: relative; margin: 0 0 11px; padding-left: 22px; }
.vs-legal li:last-child { margin-bottom: 0; }
.vs-legal li::before {
    content: "";
    position: absolute;
    top: 11px;
    left: 3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var( --vs-accent );
}
.vs-legal ul ul { margin: 12px 0 0; }
.vs-legal ul ul li::before { background: rgba( 244, 239, 229, 0.34 ); }

.vs-legal strong { color: var( --vs-ink ); font-weight: 600; }
.vs-legal em { color: rgba( 244, 239, 229, 0.62 ); font-style: italic; }

.vs-legal a {
    color: var( --vs-accent-hi );
    text-decoration: underline;
    text-underline-offset: 2px;
}
.vs-legal a:hover { color: var( --vs-accent ); }

.vs-legal__meta p { margin: 0; }

@media ( max-width: 767px ) {
    .vs-legal h2 { margin-top: 36px; font-size: 20px; }
}

/* The footer's bottom bar is a wrapping flex row. Giving the long catalogue
   note a full-width basis drops it onto its own line, leaving the copyright
   and the legal links a clean row of their own. */
.vs-footer-legal { flex-basis: 100%; }


/* =========================================================================
   FORM-CONTROLS — the option list of a native <select>.

   The popup a <select> opens is painted by the browser, not by the page, so
   page CSS cannot reach it directly. Without a declared colour scheme the
   browser paints that popup in light mode — a white panel — while the
   options keep the cream text they inherit from the page. Cream on white.

   `color-scheme: dark` is the part that actually fixes it: it tells the
   browser to paint the native popup, its scrollbar and its highlight dark.
   The `option` rules below then pin the exact colours on the engines that
   honour them (Chrome and Edge on Windows and Linux, Firefox everywhere).
   Literal hex is deliberate here — custom properties are not reliably
   resolved inside a natively painted popup.
   ====================================================================== */

select {
    color-scheme: dark;
}

select option {
    background-color: #1C1915;
    color: #F4EFE5;
}

/* The placeholder row ("Choose a device") reads as secondary. */
select option[value=""],
select option:disabled {
    color: rgba( 244, 239, 229, 0.48 );
}

/* The row already chosen, when the list is reopened. */
select option:checked {
    background-color: #2A2620;
    color: #F4EFE5;
}


/* =========================================================================
   ASSURE-BLOCK — "Before you buy".

   Four commitments, each traceable to something the site already publishes:
   the checkout copy, the Terms of Service, the Refund Policy and the support
   hours in the footer. Nothing here is a new claim. The existing .vs-trust
   bar near the top covers what the product does; this one covers what buying
   it commits you to, which is a different question and belongs near the end.
   ====================================================================== */

.vs-assure__grid.vs-assure__grid {
    display: grid;
    grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
    gap: 20px;
    width: 100%;
}

.vs-acard.vs-acard {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    height: 100%;
    padding: 26px 24px 24px;
    border: 1px solid rgba( 244, 239, 229, 0.09 );
    border-radius: var( --vs-r-md );
    background: rgba( 244, 239, 229, 0.022 );
    transition: border-color 0.3s var( --vs-ease ),
                background-color 0.3s var( --vs-ease ),
                transform 0.3s var( --vs-ease );
}

.vs-acard:hover {
    border-color: rgba( 216, 180, 120, 0.28 );
    background: rgba( 244, 239, 229, 0.038 );
    transform: translateY( -3px );
}

.vs-acard .elementor-widget-icon { margin-bottom: 2px; }
.vs-acard .elementor-icon { color: var( --vs-accent ); font-size: 19px; }

/* The policy link sits at the card's foot whatever the copy length above. */
.vs-acard .vs-acard__link { margin-top: auto; padding-top: 12px; }

.vs-acard__link a {
    color: var( --vs-accent-hi );
    font-size: 13px;
    text-decoration: none;
    border-bottom: 1px solid rgba( 216, 180, 120, 0.32 );
    padding-bottom: 1px;
    transition: border-color 0.25s var( --vs-ease ), color 0.25s var( --vs-ease );
}

.vs-acard__link a:hover {
    color: var( --vs-accent );
    border-bottom-color: var( --vs-accent );
}

@media ( max-width: 1024px ) {
    .vs-assure__grid.vs-assure__grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}

@media ( max-width: 600px ) {
    .vs-assure__grid.vs-assure__grid { grid-template-columns: 1fr; gap: 14px; }
    .vs-acard.vs-acard { padding: 22px 20px 20px; }
}


/* =========================================================================
   VOICES-BLOCK — "What Our Users Say About Us".

   The cards are built and styled but the section is hidden from visitors
   until real, consented testimonials replace the placeholder copy. Turn the
   three "Hide On" toggles off in Elementor to publish it. Deliberately no
   review schema: fabricated aggregateRating is a manual-action risk and the
   ratings here are not real yet.
   ====================================================================== */

.vs-voices__grid.vs-voices__grid {
    display: grid;
    grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
    gap: 24px;
    width: 100%;
}

.vs-vcard.vs-vcard {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    padding: 30px 28px;
    border: 1px solid rgba( 244, 239, 229, 0.10 );
    border-radius: var( --vs-r-lg );
    background:
        linear-gradient( 180deg, rgba( 216, 180, 120, 0.05 ), rgba( 216, 180, 120, 0 ) 58% ),
        var( --vs-surface );
    transition: border-color 0.35s var( --vs-ease ),
                transform 0.35s var( --vs-ease ),
                box-shadow 0.35s var( --vs-ease );
}

.vs-vcard:hover {
    border-color: rgba( 216, 180, 120, 0.3 );
    transform: translateY( -4px );
    box-shadow: 0 22px 54px rgba( 0, 0, 0, 0.45 );
}

/* Stars */
.vs-vcard .elementor-star-rating { --vs-star: var( --vs-accent ); }
.vs-vcard .elementor-star-rating i { color: rgba( 244, 239, 229, 0.16 ); }
.vs-vcard .elementor-star-rating i.elementor-star-full::before,
.vs-vcard .elementor-star-rating i.elementor-star-full { color: var( --vs-accent ); }

/* The quote carries the card. */
.vs-vcard__quote p {
    margin: 0;
    color: rgba( 244, 239, 229, 0.88 );
    font-size: 16.5px;
    line-height: 1.68;
}

/* Author row sits at the foot, above a hairline, however long the quote. */
.vs-vcard__who.vs-vcard__who {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 13px;
    width: 100%;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid rgba( 244, 239, 229, 0.09 );
}

.vs-vcard__who .elementor-icon-wrapper { line-height: 0; }

.vs-vcard__who .elementor-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba( 216, 180, 120, 0.3 );
    border-radius: 50%;
    background: rgba( 216, 180, 120, 0.1 );
    color: var( --vs-accent );
    font-size: 16px;
}

.vs-vcard__name p { margin: 0; color: var( --vs-ink ); font-size: 15px; font-weight: 600; line-height: 1.35; }
.vs-vcard__name p + p,
.vs-vcard__meta p { margin: 2px 0 0; color: var( --vs-muted ); font-size: 13px; font-weight: 400; }

/* The editor-only notice. It is styled to be impossible to mistake for
   finished copy, so it cannot be published by accident. */
.vs-voices__notice.vs-voices__notice {
    width: 100%;
    margin-bottom: 4px;
    padding: 14px 18px;
    border: 1px dashed rgba( 216, 180, 120, 0.5 );
    border-radius: var( --vs-r-md );
    background: rgba( 216, 180, 120, 0.06 );
}

.vs-voices__notice p {
    margin: 0;
    color: var( --vs-accent-hi );
    font-size: 13.5px;
    line-height: 1.6;
}

@media ( max-width: 1024px ) {
    .vs-voices__grid.vs-voices__grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}

@media ( max-width: 680px ) {
    .vs-voices__grid.vs-voices__grid { grid-template-columns: 1fr; gap: 16px; }
    .vs-vcard.vs-vcard { padding: 26px 22px; }
    .vs-vcard__quote p { font-size: 16px; }
}

@media ( prefers-reduced-motion: reduce ) {
    .vs-acard:hover,
    .vs-vcard:hover { transform: none; }
}

/* Draft state. The section is hidden from visitors but stays visible and
   editable inside the Elementor canvas, so it can be finished in place.
   Remove the vs-voices--draft class from the section's CSS Classes field to
   publish it. */
.vs-voices--draft { display: none; }

body.elementor-editor-active .vs-voices--draft {
    display: flex;
    outline: 1px dashed rgba( 216, 180, 120, 0.45 );
    outline-offset: -1px;
}


/* =========================================================================
   SHOTCARD — the testimonial cards hold a customer screenshot rather than
   typed-out copy. The frame keeps portrait phone captures of any height in
   the same material language as the rest of the site.
   ====================================================================== */

.vs-shot .elementor-widget-container { line-height: 0; }

.vs-shot img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid rgba( 244, 239, 229, 0.10 );
    border-radius: var( --vs-r-md );
}

.vs-shotcard.vs-shotcard { gap: 14px; padding: 16px 16px 18px; }

.vs-shotcap p {
    margin: 0;
    color: var( --vs-muted );
    font-size: 13.5px;
    line-height: 1.5;
    text-align: center;
}

@media ( max-width: 680px ) {
    .vs-shotcard.vs-shotcard { padding: 14px 14px 16px; }
}


/* CHECKLIST-START: bulleted steps in a text-editor widget (Contact page, 'Before you contact IPTV support'). */
.vs-checklist ul { list-style: disc; margin: 0 0 18px; padding-left: 1.25em; }
.vs-checklist li { margin-bottom: 12px; padding-left: 4px; }
.vs-checklist li::marker { color: #D8B478; }
.vs-checklist li strong { color: #F4EFE5; font-weight: 600; }
/* CHECKLIST-END */

/* HERO-NO-RISE-START
   The first section is on screen at load, so it skips the scroll reveal. The
   reveal starts at opacity 0; when redesign.js ran before the first paint the
   hero image (the page's LCP element) stayed hidden for the 0.7s fade, which
   delayed Largest Contentful Paint. Sections further down keep the effect. */
.vs-js [data-elementor-type="wp-page"] > .e-con:first-child .vs-rise.vs-in,
.vs-js [data-elementor-type="wp-page"] > .e-con:first-child.vs-rise.vs-in { animation: none; }
/* HERO-NO-RISE-END */