/*!
 * Virtual Try On — landing page styles
 * Part of the vtofs-landing plugin. Regenerated on deploy; edit the source, not this file.
 * Scoped to .vt-vtofs-l so nothing here can leak into the theme or Elementor's own styles.
 */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(FONTPATH/Inter-Variable.woff2) format('woff2');}
@font-face{font-family:'Sora';font-style:normal;font-weight:100 900;font-display:swap;src:url(FONTPATH/Sora-Variable.woff2) format('woff2');}

/* ============================================================
   VIRTUAL TRY-ON FOR SHOPS — LANDING PAGE DESIGN SYSTEM
   Concept: "The Seam" — every section is organised around the
   vertical reveal line of a before/after slider. A 1px amber
   hairline is the recurring structural mark.
   ============================================================ */

:root{
  /* ground + ink */
  --vt-paper:#FAFAFB;
  --vt-paper-2:#F1F3F7;
  --vt-paper-3:#E8EBF2;
  --vt-ink:#0A1224;
  --vt-ink-2:#141E36;
  --vt-body:#525C72;
  --vt-muted:#7B8496;
  --vt-line:#E1E5EE;
  --vt-line-strong:#CBD2E0;

  /* brand */
  --vt-brand:#2563EB;
  --vt-brand-deep:#16308A;
  --vt-brand-soft:#E7EEFD;
  --vt-brand-ring:rgba(37,99,235,.22);

  /* the flare — used ONLY at reveal/seam moments */
  --vt-flare:#F59E0B;
  --vt-flare-soft:#FEF3C7;
  --vt-flare-deep:#92400E;

  /* semantic */
  --vt-good:#0F9D6E;
  --vt-good-soft:#DCF5EC;
  --vt-bad:#DC2626;
  --vt-bad-soft:#FDE7E7;

  /* type */
  --vt-display:'Sora',system-ui,-apple-system,sans-serif;
  --vt-text:'Inter',system-ui,-apple-system,sans-serif;

  --vt-btn-p-bg:#2563EB; --vt-btn-p-bg-h:#16308A; --vt-btn-p-fg:#fff;
  --vt-band:#0A1224; --vt-band-2:#141E36; --vt-band-line:rgba(255,255,255,.09);

  --vt-shadow-sm:0 1px 2px rgba(10,18,36,.06),0 1px 3px rgba(10,18,36,.04);
  --vt-shadow:0 4px 6px -2px rgba(10,18,36,.05),0 12px 24px -6px rgba(10,18,36,.10);
  --vt-shadow-lg:0 18px 48px -12px rgba(10,18,36,.22),0 4px 12px rgba(10,18,36,.06);

  --vt-r-sm:8px; --vt-r:14px; --vt-r-lg:22px; --vt-r-xl:30px;
  --vt-maxw:1200px;
  --vt-pad:84px;
}

@media (prefers-color-scheme:dark){
  :root{
    --vt-paper:#080D1A; --vt-paper-2:#0E1526; --vt-paper-3:#161F35;
    --vt-ink:#EDF0F7; --vt-ink-2:#FFFFFF;
    --vt-body:#A2ACC2; --vt-muted:#7A8499;
    --vt-line:#1E2942; --vt-line-strong:#2C3A5C;
    --vt-brand:#5B8DEF; --vt-brand-deep:#93B4F7; --vt-brand-soft:#131F3D; --vt-brand-ring:rgba(91,141,239,.28);
    --vt-flare:#FBBF24; --vt-flare-soft:#2A1F05; --vt-flare-deep:#FCD34D;
    --vt-good:#34D399; --vt-good-soft:#08281E;
    --vt-bad:#F87171; --vt-bad-soft:#2A1010;
    --vt-btn-p-bg:#5B8DEF; --vt-btn-p-bg-h:#84AAF6; --vt-btn-p-fg:#06101F;
    --vt-band:#03070F; --vt-band-2:#0D1526; --vt-band-line:rgba(255,255,255,.10);
    --vt-shadow-sm:0 1px 2px rgba(0,0,0,.5);
    --vt-shadow:0 8px 24px -6px rgba(0,0,0,.55);
    --vt-shadow-lg:0 24px 60px -16px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --vt-paper:#080D1A; --vt-paper-2:#0E1526; --vt-paper-3:#161F35;
  --vt-ink:#EDF0F7; --vt-ink-2:#FFFFFF;
  --vt-body:#A2ACC2; --vt-muted:#7A8499;
  --vt-line:#1E2942; --vt-line-strong:#2C3A5C;
  --vt-brand:#5B8DEF; --vt-brand-deep:#93B4F7; --vt-brand-soft:#131F3D; --vt-brand-ring:rgba(91,141,239,.28);
  --vt-flare:#FBBF24; --vt-flare-soft:#2A1F05; --vt-flare-deep:#FCD34D;
  --vt-good:#34D399; --vt-good-soft:#08281E;
  --vt-bad:#F87171; --vt-bad-soft:#2A1010;
  --vt-btn-p-bg:#5B8DEF; --vt-btn-p-bg-h:#84AAF6; --vt-btn-p-fg:#06101F;
  --vt-band:#03070F; --vt-band-2:#0D1526; --vt-band-line:rgba(255,255,255,.10);
  --vt-shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --vt-shadow:0 8px 24px -6px rgba(0,0,0,.55);
  --vt-shadow-lg:0 24px 60px -16px rgba(0,0,0,.7);
}
:root[data-theme="light"]{
  --vt-paper:#FAFAFB; --vt-paper-2:#F1F3F7; --vt-paper-3:#E8EBF2;
  --vt-ink:#0A1224; --vt-ink-2:#141E36;
  --vt-body:#525C72; --vt-muted:#7B8496;
  --vt-line:#E1E5EE; --vt-line-strong:#CBD2E0;
  --vt-brand:#2563EB; --vt-brand-deep:#16308A; --vt-brand-soft:#E7EEFD; --vt-brand-ring:rgba(37,99,235,.22);
  --vt-flare:#F59E0B; --vt-flare-soft:#FEF3C7; --vt-flare-deep:#92400E;
  --vt-good:#0F9D6E; --vt-good-soft:#DCF5EC;
  --vt-bad:#DC2626; --vt-bad-soft:#FDE7E7;
  --vt-btn-p-bg:#2563EB; --vt-btn-p-bg-h:#16308A; --vt-btn-p-fg:#fff;
  --vt-band:#0A1224; --vt-band-2:#141E36; --vt-band-line:rgba(255,255,255,.09);
  --vt-shadow-sm:0 1px 2px rgba(10,18,36,.06),0 1px 3px rgba(10,18,36,.04);
  --vt-shadow:0 4px 6px -2px rgba(10,18,36,.05),0 12px 24px -6px rgba(10,18,36,.10);
  --vt-shadow-lg:0 18px 48px -12px rgba(10,18,36,.22),0 4px 12px rgba(10,18,36,.06);
}

.vt-v,.vt-v *{box-sizing:border-box;}
.vt-v{overflow-x:clip;}
.vt-v{
  background:var(--vt-paper); color:var(--vt-body);
  font-family:var(--vt-text); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.vt-v img,.vt-v svg{max-width:100%;}
/* must not out-specify the button colours below */
.vt-v a:not([class*="vt-btn"]){color:inherit;}
.vt-v :focus-visible{outline:2px solid var(--vt-brand); outline-offset:3px; border-radius:4px;}
@media (prefers-reduced-motion:reduce){
  .vt-v,.vt-v *,.vt-v *::before,.vt-v *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
}

/* ============================================================
   LANDING PAGE COMPONENTS — shipped CSS lives in
   vtofs-landing/assets/vtofs-landing.vt-css on the server.
   Container queries are used so sections respond to their
   own width (the shipped file adds matching media queries).
   ============================================================ */

.vt-v{ --vt-pad:84px; background:var(--vt-paper); color:var(--vt-body); }
.vt-v *{box-sizing:border-box;}
.vt-wrap{max-width:var(--vt-maxw);margin:0 auto;padding:0 32px;}
.vt-sect{padding:var(--vt-pad) 0;position:relative;}
.vt-sect--tight{--vt-pad:56px;}
.vt-sect--ink{background:var(--vt-band);color:#A9B4CC;}
.vt-sect--ink h1,.vt-sect--ink h2,.vt-sect--ink h3,.vt-sect--ink h4,.vt-sect--ink .vt-h1{color:#fff;}
.vt-sect--alt{background:var(--vt-paper-2);}

/* the seam — the recurring structural mark */
.vt-seam-top{position:relative;}
.vt-seam-top::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:1px;height:44px;background:linear-gradient(180deg,var(--vt-flare),transparent);
}

/* — type — */
.vt-v h1,.vt-v h2,.vt-v h3,.vt-v h4,.vt-v .vt-h1{font-family:var(--vt-display);color:var(--vt-ink);letter-spacing:-.028em;margin:0;text-wrap:balance;line-height:1.08;font-weight:700;}
.vt-h1,.vt-v h1{font-size:clamp(38px,5.1vw,60px);}
.vt-v h2{font-size:clamp(29px,3.6vw,42px);}
.vt-v h3{font-size:20px;letter-spacing:-.018em;line-height:1.3;font-weight:600;}
.vt-v h4{font-size:15.5px;letter-spacing:-.01em;font-weight:600;line-height:1.4;}
.vt-v p{margin:0;}
.vt-lede{font-size:18.5px;line-height:1.62;color:var(--vt-body);max-width:56ch;}
.vt-lede--c{margin-inline:auto;}
.vt-eyebrow{
  font:600 11px/1 var(--vt-text);letter-spacing:.15em;text-transform:uppercase;
  color:var(--vt-brand);display:inline-flex;align-items:center;gap:9px;
}
.vt-eyebrow::before{content:"";width:20px;height:1px;background:var(--vt-flare);}
.vt-eyebrow--c{justify-content:center;}
.vt-eyebrow--c::after{content:"";width:20px;height:1px;background:var(--vt-flare);}
.vt-sect--ink .vt-eyebrow{color:var(--vt-flare);}
.vt-stack{display:flex;flex-direction:column;}
.vt-g8{gap:8px}.vt-g12{gap:12px}.vt-g14{gap:14px}.vt-g18{gap:18px}.vt-g24{gap:24px}.vt-g32{gap:32px}.vt-g44{gap:44px}.vt-g56{gap:56px}
.vt-center{text-align:center;align-items:center;}
.vt-head-c{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;margin-bottom:52px;}
.vt-head-l{display:flex;flex-direction:column;gap:16px;margin-bottom:52px;max-width:62ch;}

/* — buttons — */
.vt-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:600 15px/1 var(--vt-text);letter-spacing:-.005em;
  padding:15px 26px;border-radius:11px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .16s cubic-bezier(.2,.7,.3,1),box-shadow .16s,background .16s,border-color .16s;
  white-space:nowrap;
}
.vt-btn svg{width:17px;height:17px;flex:none;}
.vt-btn-p{background:#2148E8;color:#fff;box-shadow:0 1px 2px var(--vt-brand-ring),0 8px 20px -8px var(--vt-brand-ring);}
.vt-btn-p:hover{background:#1435B8;color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px var(--vt-brand-ring),0 14px 30px -10px var(--vt-brand-ring);}
.vt-btn-s{background:transparent;color:var(--vt-ink);border-color:var(--vt-line-strong);}
.vt-btn-s:hover{border-color:var(--vt-ink);transform:translateY(-1px);}
.vt-sect--ink .vt-btn-s{color:#fff;border-color:rgba(255,255,255,.28);}
.vt-sect--ink .vt-btn-s:hover{border-color:#fff;background:rgba(255,255,255,.06);}
.vt-btn-f{background:var(--vt-flare);color:#3B2503;box-shadow:0 8px 20px -8px rgba(245,158,11,.5);}
.vt-btn-f:hover{transform:translateY(-1px);box-shadow:0 12px 28px -8px rgba(245,158,11,.6);}
.vt-btn-g{background:transparent;color:var(--vt-brand);border:0;padding-inline:0;}
.vt-btn-g:hover{gap:13px;}
.vt-btn-sm{padding:11px 18px;font-size:13.5px;border-radius:9px;}
.vt-btn-lg{padding:17px 32px;font-size:16px;}
.vt-btn-row{display:flex;gap:12px;flex-wrap:wrap;}
.vt-btn-row--c{justify-content:center;}
.vt-microcopy{font-size:13px;color:var(--vt-muted);display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.vt-microcopy svg{width:14px;height:14px;color:var(--vt-good);flex:none;}

/* — surfaces — */
.vt-card{background:var(--vt-paper);border:1px solid var(--vt-line);border-radius:var(--vt-r-lg);padding:28px;transition:transform .2s,box-shadow .2s,border-color .2s;}
.vt-card--hov:hover{transform:translateY(-3px);box-shadow:var(--vt-shadow);border-color:var(--vt-line-strong);}
.vt-sect--ink .vt-card{background:var(--vt-band-2);border-color:var(--vt-band-line);}
.vt-sect--alt .vt-card{background:var(--vt-paper);}
.vt-pill{display:inline-flex;align-items:center;gap:7px;font:600 12px/1 var(--vt-text);padding:7px 13px;border-radius:999px;background:var(--vt-brand-soft);color:var(--vt-brand);}
.vt-pill--f{background:var(--vt-flare-soft);color:var(--vt-flare-deep);}
.vt-pill--g{background:var(--vt-good-soft);color:var(--vt-good);}
:root[data-theme="dark"] .vt-pill--f{color:var(--vt-flare-deep);}

/* — icon boxes — */
.vt-ibox{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex:none;background:var(--vt-brand-soft);color:var(--vt-brand);}
.vt-ibox svg{width:23px;height:23px;}
.vt-ibox--f{background:var(--vt-flare-soft);color:var(--vt-flare-deep);}
.vt-ibox--g{background:var(--vt-good-soft);color:var(--vt-good);}
.vt-ibox--ink{background:var(--vt-band);color:var(--vt-flare);}
.vt-ibox--lg{width:56px;height:56px;border-radius:16px;}
.vt-ibox--lg svg{width:27px;height:27px;}
.vt-sect--ink .vt-ibox{background:rgba(255,255,255,.07);color:var(--vt-flare);}

/* — grids — */
.vt-grid{display:grid;gap:22px;}
.vt-g-2{grid-template-columns:repeat(2,1fr);}
.vt-g-3{grid-template-columns:repeat(3,1fr);}
.vt-g-4{grid-template-columns:repeat(4,1fr);}
.vt-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
/* aspect-ratio boxes transfer a min-width through the ratio and blow out
   their grid track — these must be allowed to shrink */
.vt-split>*,.vt-grid>*,.vt-reveal,.vt-ph,.vt-stage,.vt-tbl-scroll{min-width:0;}
.vt-split--wide{grid-template-columns:1.05fr .95fr;}
.vt-split--narrow{grid-template-columns:.92fr 1.08fr;}

/* — stats — */
.vt-stat{display:flex;flex-direction:column;gap:5px;}
.vt-stat .vt-n{font:700 40px/1 var(--vt-display);color:var(--vt-ink);letter-spacing:-.04em;font-variant-numeric:tabular-nums;}
.vt-stat .vt-n em{font-style:normal;color:var(--vt-flare);}
.vt-stat .vt-l{font-size:13.5px;color:var(--vt-muted);line-height:1.45;}
.vt-sect--ink .vt-stat .vt-n{color:#fff;}

/* ============================================================
   THE REVEAL — before/after slider. The signature component.
   ============================================================ */
.vt-reveal{position:relative;border-radius:var(--vt-r-lg);overflow:hidden;background:var(--vt-paper-3);aspect-ratio:4/5;user-select:none;touch-action:pan-y;box-shadow:var(--vt-shadow-lg);}
.vt-reveal--wide{aspect-ratio:16/10;}
.vt-reveal .vt-lay{position:absolute;inset:0;}
.vt-reveal .vt-lay svg{width:100%;height:100%;display:block;}
.vt-reveal .vt-after{clip-path:inset(0 0 0 var(--vt-x,72%));}
.vt-reveal .vt-bar{position:absolute;top:0;bottom:0;left:var(--vt-x,72%);width:2px;background:var(--vt-flare);box-shadow:0 0 0 1px rgba(0,0,0,.12),0 0 22px rgba(245,158,11,.65);pointer-events:none;}
.vt-reveal .vt-knob{
  position:absolute;top:50%;left:var(--vt-x,72%);transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;background:var(--vt-flare);color:#3B2503;
  display:grid;place-items:center;box-shadow:0 4px 16px rgba(0,0,0,.28);cursor:ew-resize;
}
.vt-reveal .vt-knob svg{width:22px;height:22px;}
.vt-reveal input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;}
.vt-reveal .vt-tag{
  position:absolute;bottom:14px;font:600 11px/1 var(--vt-text);letter-spacing:.1em;text-transform:uppercase;
  padding:8px 13px;border-radius:999px;backdrop-filter:blur(8px);pointer-events:none;
}
.vt-reveal .vt-tag-b{left:14px;background:rgba(10,18,36,.62);color:#fff;}
.vt-reveal .vt-tag-a{right:14px;background:var(--vt-flare);color:#3B2503;}

/* photo placeholders — duotone figures, swap for real photography */
.vt-ph{position:relative;border-radius:var(--vt-r);overflow:hidden;background:var(--vt-paper-3);}
.vt-ph svg{width:100%;height:100%;display:block;}
.vt-ph-note{
  position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  font:600 9.5px/1 var(--vt-text);letter-spacing:.09em;text-transform:uppercase;
  background:rgba(10,18,36,.55);color:#fff;padding:5px 10px;border-radius:999px;backdrop-filter:blur(6px);white-space:nowrap;
}

/* — marquee — */
.vt-marq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);}
.vt-marq-t{display:flex;gap:44px;padding-left:4px;width:max-content;animation:marq 34s linear infinite;}
.vt-marq:hover .vt-marq-t{animation-play-state:paused;}
@keyframes marq{to{transform:translateX(-50%);}}

/* — table — */
.vt-tbl-scroll{overflow-x:auto;border:1px solid var(--vt-line);border-radius:var(--vt-r-lg);background:var(--vt-paper);}
table.vt-cmp{width:100%;border-collapse:collapse;min-width:660px;font-size:14.5px;}
table.vt-cmp th,table.vt-cmp td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--vt-line);vertical-align:middle;}
table.vt-cmp thead th{font:600 12px/1.3 var(--vt-text);letter-spacing:.06em;text-transform:uppercase;color:var(--vt-muted);background:var(--vt-paper-2);}
table.vt-cmp tbody th{font-weight:500;color:var(--vt-ink);}
table.vt-cmp tr:last-child td,table.vt-cmp tr:last-child th{border-bottom:0;}
table.vt-cmp .vt-own{background:var(--vt-brand-soft);border-left:1px solid var(--vt-brand);border-right:1px solid var(--vt-brand);position:relative;}
table.vt-cmp thead .vt-own{background:var(--vt-brand);color:#fff;}
table.vt-cmp .vt-num{font-variant-numeric:tabular-nums;font-weight:600;color:var(--vt-ink);}
.vt-yes{color:var(--vt-good);display:inline-flex;} .vt-yes svg{width:19px;height:19px;}
.vt-no{color:var(--vt-muted);opacity:.55;display:inline-flex;} .vt-no svg{width:19px;height:19px;}

/* — accordion — */
.vt-acc{border-top:1px solid var(--vt-line);}
.vt-acc details{border-bottom:1px solid var(--vt-line);}
.vt-acc summary{
  list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font:600 16.5px/1.4 var(--vt-display);color:var(--vt-ink);letter-spacing:-.015em;
}
.vt-acc summary::-webkit-details-marker{display:none;}
.vt-acc summary::after{
  content:"";position:absolute;right:8px;top:26px;width:9px;height:9px;
  border-right:1.8px solid var(--vt-muted);border-bottom:1.8px solid var(--vt-muted);
  transform:rotate(45deg);transition:transform .22s;
}
.vt-acc details[open] summary::after{transform:rotate(-135deg);border-color:var(--vt-brand);}
.vt-acc summary:hover{color:var(--vt-brand);}
.vt-acc .vt-ans{padding:0 44px 22px 0;font-size:15px;line-height:1.7;max-width:68ch;}

/* — form bits (live demo) — */
.vt-drop{
  border:1.5px dashed var(--vt-line-strong);border-radius:var(--vt-r-lg);background:var(--vt-paper-2);
  padding:30px 22px;text-align:center;cursor:pointer;transition:.18s;
  display:flex;flex-direction:column;align-items:center;gap:11px;
}
.vt-drop:hover,.vt-drop.vt-on{border-color:var(--vt-brand);background:var(--vt-brand-soft);}
.vt-drop .vt-ibox{margin-bottom:2px;}
.vt-drop b{font:600 14.5px/1.3 var(--vt-text);color:var(--vt-ink);}
.vt-drop span{font-size:12.5px;color:var(--vt-muted);}
.vt-field{display:flex;gap:9px;flex-wrap:wrap;}
.vt-field input{
  flex:1;min-width:180px;font:400 15px/1 var(--vt-text);color:var(--vt-ink);
  padding:15px 16px;border-radius:11px;border:1px solid var(--vt-line-strong);background:var(--vt-paper);
}
.vt-field input::placeholder{color:var(--vt-muted);}
.vt-field input:focus{outline:none;border-color:var(--vt-brand);box-shadow:0 0 0 4px var(--vt-brand-ring);}
.vt-stage{
  border-radius:var(--vt-r-lg);background:var(--vt-paper-2);border:1px solid var(--vt-line);
  display:grid;place-items:center;aspect-ratio:4/5;position:relative;overflow:hidden;text-align:center;padding:26px;
}
.vt-stage--wide{aspect-ratio:16/11;}
.vt-shimmer::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 38%,rgba(245,158,11,.16) 50%,transparent 62%);
  background-size:260% 100%;animation:sh 2.4s linear infinite;
}
@keyframes sh{to{background-position:-260% 0;}}
.vt-steps-dots{display:flex;gap:7px;align-items:center;}
.vt-steps-dots i{width:7px;height:7px;border-radius:50%;background:var(--vt-line-strong);display:block;}
.vt-steps-dots i.vt-on{background:var(--vt-flare);width:22px;border-radius:4px;}

/* — chips — */
.vt-chips{display:flex;gap:8px;flex-wrap:wrap;}
.vt-chip{
  font:500 13px/1 var(--vt-text);padding:9px 15px;border-radius:999px;
  border:1px solid var(--vt-line-strong);color:var(--vt-body);background:var(--vt-paper);cursor:pointer;transition:.15s;
}
.vt-chip:hover{border-color:var(--vt-brand);color:var(--vt-brand);}
.vt-chip[aria-pressed="true"]{background:var(--vt-ink);color:var(--vt-paper);border-color:var(--vt-ink);}

/* — nav — */
.vt-nav{display:flex;align-items:center;gap:28px;padding:17px 0;}
.vt-logo{display:flex;align-items:center;gap:10px;font:700 17.5px/1 var(--vt-display);color:var(--vt-ink);letter-spacing:-.03em;text-decoration:none;white-space:nowrap;}
.vt-logo .vt-mark{width:31px;height:31px;border-radius:9px;background:var(--vt-brand);display:grid;place-items:center;flex:none;position:relative;overflow:hidden;}
.vt-logo .vt-mark::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:1.5px;background:var(--vt-flare);}
.vt-logo .vt-mark svg{width:17px;height:17px;color:#fff;position:relative;z-index:1;}
.vt-nlinks{display:flex;gap:26px;align-items:center;}
.vt-nlinks a{font:500 14.5px/1 var(--vt-text);color:var(--vt-body);text-decoration:none;transition:.15s;white-space:nowrap;}
.vt-nlinks a:hover{color:var(--vt-brand);}
.vt-burger{display:none;width:40px;height:40px;border-radius:9px;border:1px solid var(--vt-line);background:none;cursor:pointer;place-items:center;color:var(--vt-ink);}
.vt-burger svg{width:19px;height:19px;}

/* — footer — */
.vt-foot{background:var(--vt-band);color:#8994AC;padding:64px 0 30px;}
.vt-foot h5{font:600 11px/1 var(--vt-text);letter-spacing:.13em;text-transform:uppercase;color:#fff;margin:0 0 16px;}
.vt-foot a{color:#8994AC;text-decoration:none;font-size:14.5px;transition:.15s;}
.vt-foot a:hover{color:var(--vt-flare);}
.vt-foot .vt-col{display:flex;flex-direction:column;gap:11px;align-items:flex-start;}
.vt-foot .vt-logo{color:#fff;}
.vt-foot-bot{border-top:1px solid rgba(255,255,255,.1);margin-top:44px;padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;}

/* ============================================================
   RESPONSIVE — container queries (preview-accurate)
   ============================================================ */
@media (max-width:900px){
  .vt-v{--vt-pad:60px;}
  .vt-wrap{padding:0 24px;}
  .vt-split,.vt-split--wide,.vt-split--narrow{grid-template-columns:1fr;gap:40px;}
  .vt-g-4{grid-template-columns:repeat(2,1fr);}
  .vt-g-3{grid-template-columns:repeat(2,1fr);}
  .vt-head-c,.vt-head-l{margin-bottom:36px;}
  .vt-nlinks{display:none;}
  .vt-burger{display:grid;}
  .vt-stat .vt-n{font-size:33px;}
}
@media (max-width:560px){
  .vt-v{--vt-pad:48px;}
  .vt-wrap{padding:0 18px;}
  .vt-g-2,.vt-g-3,.vt-g-4{grid-template-columns:1fr;}
  .vt-h1,.vt-v h1{font-size:clamp(30px,8.4vw,38px);}
  .vt-v h2{font-size:clamp(24px,6.6vw,30px);}
  .vt-lede{font-size:16.5px;}
  .vt-btn{width:100%;}
  .vt-btn-row{flex-direction:column;}
  .vt-grid{gap:16px;}
  .vt-card{padding:22px;border-radius:var(--vt-r);}
  .vt-acc summary{font-size:15.5px;}
  .vt-foot-bot{flex-direction:column;}
}

/* ============================================================
   BRAND LOCK — colours sampled from the supplied logo
   ============================================================ */
:root,:root[data-theme="light"]{
  --vt-brand:#2148E8; --vt-brand-deep:#1435B8; --vt-brand-soft:#E6EBFD; --vt-brand-ring:rgba(33,72,232,.22);
  --vt-btn-p-bg:#2148E8; --vt-btn-p-bg-h:#1435B8; --vt-btn-p-fg:#fff;
  --vt-wordmark:#17181C;
}
@media (prefers-color-scheme:dark){
  :root{ --vt-brand:#6C93F2; --vt-brand-deep:#9CB8F8; --vt-brand-soft:#111C3C; --vt-brand-ring:rgba(108,147,242,.28);
         --vt-btn-p-bg:#2148E8; --vt-btn-p-bg-h:#3C61EE; --vt-btn-p-fg:#fff; --vt-wordmark:#FFFFFF; }
}
:root[data-theme="dark"]{
  --vt-brand:#6C93F2; --vt-brand-deep:#9CB8F8; --vt-brand-soft:#111C3C; --vt-brand-ring:rgba(108,147,242,.28);
  --vt-btn-p-bg:#2148E8; --vt-btn-p-bg-h:#3C61EE; --vt-btn-p-fg:#fff; --vt-wordmark:#FFFFFF;
}

/* the mark is a fixed-colour asset — never tint it with theme tokens */
.vt-logo{color:var(--vt-wordmark);font-weight:700;letter-spacing:-.032em;}
.vt-logo .vt-mark{width:36px;height:36px;border-radius:50%;background:none;overflow:visible;}
.vt-logo .vt-mark::after{display:none;}
.vt-logo .vt-mark svg{width:36px;height:36px;}
.vt-foot .vt-logo{color:#fff;}

/* ============================================================
   PAGE-ONLY ADDITIONS
   ============================================================ */
.vt-page{background:var(--vt-paper);}

/* product + model pickers in the live demo */
.vt-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.vt-tile{
  position:relative;border:1px solid var(--vt-line);border-radius:var(--vt-r);overflow:hidden;
  background:var(--vt-paper);cursor:pointer;text-align:left;padding:0;font:inherit;
  transition:transform .16s,border-color .16s,box-shadow .16s;
}
.vt-tile:hover{transform:translateY(-2px);border-color:var(--vt-brand);box-shadow:var(--vt-shadow-sm);}
.vt-tile[aria-pressed="true"]{border-color:var(--vt-brand);box-shadow:0 0 0 3px var(--vt-brand-ring);}
.vt-tile[aria-pressed="true"]::after{
  content:"";position:absolute;top:7px;right:7px;width:19px;height:19px;border-radius:50%;
  background:var(--vt-brand) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.vt-w3.vt-org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center/12px no-repeat;
}
.vt-tile .vt-thumb{aspect-ratio:1/1;display:grid;place-items:center;background:var(--vt-paper-2);}
.vt-tile .vt-thumb svg{width:38%;height:38%;color:var(--vt-brand);}
.vt-tile.vt-model .vt-thumb{aspect-ratio:4/5;padding:0;}
.vt-tile.vt-model .vt-thumb svg{width:100%;height:100%;}
.vt-tile .vt-meta{padding:9px 11px;display:flex;flex-direction:column;gap:2px;}
.vt-tile .vt-meta b{font:600 12.5px/1.3 var(--vt-text);color:var(--vt-ink);}
.vt-tile .vt-meta span{font:500 11.5px/1 var(--vt-text);color:var(--vt-muted);font-variant-numeric:tabular-nums;}
.vt-tile.vt-up .vt-thumb{background:var(--vt-paper);border:1.5px dashed var(--vt-line-strong);border-radius:var(--vt-r);}
.vt-tile.vt-up .vt-thumb svg{color:var(--vt-muted);width:26px;height:26px;}
.vt-picker-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.vt-picker-head h4{font-size:15.5px;}
.vt-picker-head span{font-size:12.5px;color:var(--vt-muted);}

/* preview toolbar — review aid only, not part of the shipped page */}

/* the whole page lives in one container so the width toggle is truthful */

.vt-editnote{display:flex;gap:12px;align-items:flex-start;background:var(--vt-flare-soft);border:1px solid var(--vt-flare);border-radius:var(--vt-r);padding:16px 18px;}
.vt-editnote svg{width:19px;height:19px;color:var(--vt-flare-deep);flex:none;margin-top:2px;}
.vt-editnote p{font-size:13.5px;line-height:1.6;color:var(--vt-flare-deep);margin:0;}


/* ============================================================
   SECTION STYLES for the chosen variants
   ============================================================ */
.vt-v code{font:500 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--vt-paper-2);border:1px solid var(--vt-line);padding:2px 6px;border-radius:5px;color:var(--vt-ink);}

/* 03 · trust marquee */
.vt-mq{display:inline-flex;align-items:center;gap:11px;font:600 16px/1 var(--vt-display);color:var(--vt-muted);letter-spacing:-.02em;white-space:nowrap;}
.vt-mq svg{width:21px;height:21px;color:var(--vt-line-strong);flex:none;}

/* 05 · how it works */
.vt-hsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;position:relative;}
.vt-hsteps::before{content:"";position:absolute;top:19px;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,var(--vt-line-strong) 12%,var(--vt-line-strong) 88%,transparent);}
.vt-hstep{position:relative;display:flex;flex-direction:column;gap:10px;}
.vt-hstep .vt-hn{width:39px;height:39px;border-radius:50%;background:var(--vt-paper);border:1px solid var(--vt-line-strong);color:var(--vt-ink);display:grid;place-items:center;font:700 15px/1 var(--vt-display);position:relative;z-index:1;font-variant-numeric:tabular-nums;}
.vt-hstep:first-child .vt-hn{background:var(--vt-flare);border-color:var(--vt-flare);color:#3B2503;}
.vt-hstep p{font-size:15px;line-height:1.65;}

/* 06 · categories */
.vt-cat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
.vt-cat{background:var(--vt-paper);border:1px solid var(--vt-line);border-radius:var(--vt-r-lg);padding:22px;display:flex;flex-direction:column;gap:11px;transition:transform .2s,box-shadow .2s,border-color .2s;}
.vt-cat:hover{transform:translateY(-3px);box-shadow:var(--vt-shadow);border-color:var(--vt-line-strong);}
.vt-cat p{font-size:13px;line-height:1.5;color:var(--vt-muted);}

/* 09 · pricing tiers */
.vt-tier{border:1px solid var(--vt-line);border-radius:var(--vt-r-xl);padding:30px;background:var(--vt-paper);display:flex;flex-direction:column;gap:16px;position:relative;}
.vt-tier--on{border-color:var(--vt-brand);box-shadow:0 0 0 4px var(--vt-brand-ring);}
.vt-tflag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--vt-flare);color:#3B2503;font:700 10.5px/1 var(--vt-text);letter-spacing:.1em;text-transform:uppercase;padding:6px 13px;border-radius:999px;white-space:nowrap;}
.vt-tsub{font-size:14px;color:var(--vt-muted);}
.vt-tprice{display:flex;align-items:baseline;gap:9px;padding:6px 0 10px;border-bottom:1px solid var(--vt-line);}
.vt-pnum2{font:700 40px/1 var(--vt-display);color:var(--vt-ink);letter-spacing:-.04em;}
.vt-tunit{font-size:13.5px;color:var(--vt-muted);}
.vt-plist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:15px;flex:1;}
.vt-plist li{display:flex;gap:11px;align-items:center;}
.vt-plist svg{width:18px;height:18px;color:var(--vt-good);flex:none;}
.vt-plist b{color:var(--vt-ink);font-weight:600;}

/* 10 · testimonials */
.vt-quo{margin:0;background:var(--vt-paper);border:1px solid var(--vt-line);border-radius:var(--vt-r-lg);padding:26px;display:flex;flex-direction:column;gap:16px;}
.vt-stars{display:flex;gap:3px;}
.vt-stars svg{width:16px;height:16px;color:var(--vt-flare);}
.vt-quo p{font-size:15.5px;line-height:1.65;color:var(--vt-ink);}
.vt-quo footer{display:flex;gap:12px;align-items:center;margin-top:auto;padding-top:6px;}
.vt-av{width:40px;height:40px;border-radius:50%;background:var(--vt-paper-3);color:var(--vt-muted);display:grid;place-items:center;font:700 15px/1 var(--vt-display);flex:none;}
.vt-quo footer b{display:block;font:600 14.5px/1.3 var(--vt-text);color:var(--vt-ink);}
.vt-quo footer em{font-style:normal;font-size:13px;color:var(--vt-muted);}

/* 11 · FAQ cards */
.vt-qa{background:var(--vt-paper);border:1px solid var(--vt-line);border-radius:var(--vt-r-lg);padding:24px;display:flex;flex-direction:column;gap:9px;}
.vt-qa h4{font-size:16px;}
.vt-qa p{font-size:14.5px;line-height:1.62;color:var(--vt-muted);}

/* 12 · CTA card */
.vt-ctab{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;background:var(--vt-paper-2);border:1px solid var(--vt-line);border-radius:var(--vt-r-xl);padding:48px;position:relative;overflow:hidden;}
.vt-ctab>*{min-width:0;}
.vt-ctab::before{content:"";position:absolute;top:0;bottom:0;left:58%;width:1px;background:linear-gradient(180deg,transparent,var(--vt-flare),transparent);}

@media (max-width:900px){
  .vt-hsteps{grid-template-columns:1fr;gap:28px;}
  .vt-hsteps::before{top:8%;bottom:8%;left:19px;right:auto;width:1px;height:auto;background:linear-gradient(180deg,transparent,var(--vt-line-strong) 12%,var(--vt-line-strong) 88%,transparent);}
  .vt-cat-grid{grid-template-columns:repeat(3,1fr);}
  .vt-ctab{grid-template-columns:1fr;padding:32px;gap:32px;}
  .vt-ctab::before{display:none;}
}
@media (max-width:560px){
  .vt-cat-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .vt-cat{padding:16px;}
  .vt-ctab{padding:24px;}
  .vt-quo{padding:22px;}
  .vt-quo p{font-size:15px!important;}
}

/* ============================================================
   PLUGIN-ONLY ADDITIONS (not in the artifact preview)
   ============================================================ */

/* real photography drops into the same slots as the placeholder SVGs */
.vt-reveal .vt-lay img{width:100%;height:100%;object-fit:cover;display:block;}
.vt-ph img{width:100%;height:100%;object-fit:cover;display:block;}

/* mobile nav panel */
.vt-nmob{border-top:1px solid var(--vt-line);background:var(--vt-paper);}
.vt-nmob a{font:500 16px/1 var(--vt-text);color:var(--vt-ink);text-decoration:none;padding:6px 0;}
.vt-nmob a:hover{color:var(--vt-brand);}
.vt-nmob .vt-btn{margin-top:6px;}
@media (min-width:901px){.vt-nmob{display:none!important;}}

/* live demo result stage */
.vt-demo-out .vt-stage{padding:0;overflow:hidden;}
.vt-demo-img{width:100%;height:100%;object-fit:contain;display:block;background:var(--vt-paper-3);}
.vt-demo-msg{font-size:13.5px;line-height:1.5;margin:0;}
.vt-demo-wait{padding:26px;}

/* product tiles show real photos */
.vt-tile .vt-thumb img{display:block;}


/* Astra and Elementor both like to add their own list bullets and link colours */
.vt-v ul{list-style:none;}
.vt-v a{text-decoration:none;}
.vt-v img{height:auto;}

.vt-demo-dl{margin-inline:auto;}

/* ============================================================
   MOBILE PASS — 390px first
   ============================================================ */
@media (max-width:560px){
  .vt-v{--vt-pad:40px;}
  .vt-wrap{padding:0 16px;}

  /* headings were eating half the screen */
  .vt-h1,.vt-v h1{font-size:clamp(27px,7.6vw,34px);line-height:1.12;}
  .vt-v h2{font-size:clamp(22px,6vw,27px);}
  .vt-lede{font-size:16px;line-height:1.58;}
  .vt-head-c,.vt-head-l{margin-bottom:28px;gap:12px;}

  /* Setup / How it works — the rail sat miles from the text */
  .vt-hsteps{gap:22px;}
  .vt-hsteps::before{left:16px;top:4%;bottom:4%;}
  .vt-hstep{padding-left:44px;}
  .vt-hstep .vt-hn{position:absolute;left:0;top:0;width:33px;height:33px;font-size:13px;}
  .vt-hstep h3{font-size:18px;}
  .vt-hstep p{font-size:14.5px;}

  /* demo picker: three small tiles stay three across */
  .vt-pick{gap:8px;}
  .vt-tile .vt-meta{padding:7px 8px;}
  .vt-tile .vt-meta b{font-size:11.5px;line-height:1.25;}
  .vt-tile .vt-meta span{font-size:10.5px;}
  .vt-picker-head{margin-bottom:9px;gap:4px;}
  .vt-picker-head h4{font-size:14.5px;}
  .vt-picker-head span{font-size:11.5px;}
  .vt-card{padding:18px!important;}
  .vt-grid{gap:22px!important;}

  /* buttons stack full width, but stay readable */
  .vt-btn{width:100%;padding:14px 18px;font-size:15px;}
  .vt-btn-lg{padding:15px 20px;font-size:15px;}
  .vt-field{flex-direction:column;}
  .vt-field input{width:100%;min-width:0;}

  .vt-microcopy{font-size:12px;gap:5px;}
  .vt-stat .vt-n{font-size:30px;}
  .vt-cat{padding:14px;gap:8px;}
  .vt-cat p{font-size:12px;}
  .vt-quo{padding:20px;}
  .vt-quo p{font-size:15px!important;line-height:1.55;}
  .vt-tier{padding:22px;}
  .vt-qa{padding:18px;}
  .vt-reveal .vt-knob{width:38px;height:38px;}
  .vt-reveal .vt-tag{font-size:10px;padding:6px 9px;bottom:10px;}
}

/* ============================================================
   INLINE CTA after the setup steps
   ============================================================ */
.vt-howcta{
  margin-top:44px;padding-top:30px;border-top:1px solid var(--vt-line);
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
}
.vt-howcta p{font:600 17px/1.45 var(--vt-display);color:var(--vt-ink);letter-spacing:-.015em;max-width:38ch;margin:0;}
@media (max-width:700px){
  .vt-howcta{flex-direction:column;align-items:stretch;text-align:left;gap:16px;margin-top:32px;}
  .vt-howcta p{font-size:16px;}
}

/* Chatwoot's chat panel is ~813px tall and lives at the end of <body>.
   Until Chatwoot's own stylesheet loads it is a normal block in flow,
   which leaves a tall blank gap under the footer. Pin it immediately. */
.woot-widget-holder{position:fixed !important;}
.woot-widget-holder.woot--hide{visibility:hidden;pointer-events:none;}