/* viberomania.com. Ported from design_handoff_vibe_website/site/site.css (Vibe design system tokens). */
@font-face{font-family:'Open Sauce Sans';src:url('fonts/OpenSauceSans-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Open Sauce Sans';src:url('fonts/OpenSauceSans-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Open Sauce Sans';src:url('fonts/OpenSauceSans-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Open Sauce Sans';src:url('fonts/OpenSauceSans-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Open Sauce Heading';src:url('fonts/OpenSauceSans-Bold.woff2') format('woff2');font-weight:400;font-display:swap}

/* Design-system tokens used by the site (from _ds tokens/*.css) */
:root{
  --font-body:'Open Sauce Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --status-warning:#FBBF24;
  --vibe-default:linear-gradient(135deg,#1ACB1C 0%,#0058BB 25%,#29EAF6 50%,#FFECA9 75%,#FFD34D 100%);
  --vibe-nature:linear-gradient(135deg,#00695c 0%,#65a30d 50%,#facc15 100%);
  --vibe-fitness:linear-gradient(135deg,#4c0519 0%,#ff1744 50%,#d4ff3c 100%);
  --vibe-accent:var(--vibe-default);
}
[data-category="nature"]{--vibe-accent:var(--vibe-nature);--vibe-accent-solid:#65a30d}
[data-category="fitness"]{--vibe-accent:var(--vibe-fitness);--vibe-accent-solid:#ff1744}
@keyframes vibe-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
html,body{margin:0;background:#FFFEF3}
html{scroll-behavior:smooth}
.vs img{max-width:100%}
.vs .icon{flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;display:block}
.vs [hidden]{display:none!important}
.vs section,.vs #main{scroll-margin-top:64px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Theme. Light (cream paper) is the default; add .dark to .vs for the black version. */
.vs{--ink:#1B120B;--ink-rgb:27,18,11;--on-ink:#FFFEF3;--ink-hover:#3a2c21;--paper:#FFFEF3;--paper-rgb:255,254,243;--ring-fill:#FFFEF3;--field-bg:#FFFFFF;--border-glass:rgba(27,18,11,.14);--border-hairline:rgba(27,18,11,.1);--surface-card:rgba(27,18,11,.04);--status-danger:#C62828}
.vs.dark{--ink:#FFFEF3;--ink-rgb:255,254,243;--on-ink:#1B120B;--ink-hover:#fff9d9;--paper:#000;--paper-rgb:0,0,0;--ring-fill:rgba(10,10,10,.95);--field-bg:#151515;--border-glass:rgba(255,254,243,.14);--border-hairline:rgba(255,254,243,.1);--surface-card:rgba(255,254,243,.05);--status-danger:#EF4444}
.vs:not(.dark) .co-card,.vs:not(.dark) .offer,.vs:not(.dark) .step{box-shadow:0 8px 24px rgba(0,0,0,.08)}
.vs .shot{color-scheme:dark}
.vs .wm{display:block}.vs .wm-c{display:none}.vs.dark .wm-c{display:block}.vs.dark .wm-d{display:none}
/* Vibe website. One container (.vs) drives the responsive layout through container queries,
   so the same markup reflows in the live page and in fixed-width artboards on the board. */
.vs{container:site/inline-size;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:24px;-webkit-font-smoothing:antialiased;--font-display:'Open Sauce Heading','Open Sauce Sans',sans-serif;position:relative;overflow:hidden}
.vs *,.vs *::before,.vs *::after{box-sizing:border-box}
.vs a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:3px}
.vs a:hover{color:rgba(var(--ink-rgb),.72)}
.vs :focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.vs h1,.vs h2,.vs h3,.vs p{margin:0}
.vs p,.vs li{text-wrap:pretty}
.vs .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vs .wrap{max-width:1280px;margin:0 auto;padding:0 20px}
.vs .caps{font-size:12px;line-height:16px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(var(--ink-rgb),.72)}
.vs .t2{color:rgba(var(--ink-rgb),.72)}
.vs .t3{color:rgba(var(--ink-rgb),.5)}
.vs .display{font-family:var(--font-display);font-weight:400;letter-spacing:-.01em}
.vs .h2{font-family:var(--font-display);font-weight:400;letter-spacing:-.01em;font-size:28px;line-height:34px;text-wrap:balance}
.vs .lead{font-size:18px;line-height:26px;color:rgba(var(--ink-rgb),.72)}
.vs section{position:relative;padding:72px 0}
.vs .rule{height:1px;background:var(--border-hairline)}

/* placeholder tag for unverified claims */
.vs .ph{display:inline-flex;align-items:center;gap:6px;border:1px dashed rgba(var(--ink-rgb),.5);border-radius:6px;padding:0 6px;color:var(--ink);font-style:normal;line-height:1.5}
.vs .ph::before{content:"";width:6px;height:6px;border-radius:9px;background:var(--status-warning);flex:0 0 auto}
.vs.no-ph .ph{border:0;padding:0}.vs.no-ph .ph::before{display:none}

/* buttons */
.vs .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:28px;font:600 16px/20px var(--font-body);text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform 200ms var(--ease-out,cubic-bezier(.22,1,.36,1)),opacity 200ms,background 200ms}
.vs .btn:active{transform:scale(.97);opacity:.8}
.vs .btn-primary{background:var(--ink);color:var(--on-ink)}
.vs .btn-primary:hover{color:var(--on-ink);background:var(--ink-hover)}
.vs .btn-ghost{background:rgba(var(--ink-rgb),.06);border-color:var(--border-glass);color:var(--ink);backdrop-filter:blur(10px)}
.vs .btn-ghost:hover{background:rgba(var(--ink-rgb),.1);color:var(--ink)}
.vs .btn[disabled],.vs .btn[aria-disabled="true"]{cursor:not-allowed;background:rgba(var(--ink-rgb),.14);color:rgba(var(--ink-rgb),.5);transform:none;opacity:1}
.vs .spin{width:18px;height:18px;border-radius:99px;border:2px solid rgba(var(--paper-rgb),.3);border-top-color:var(--on-ink);animation:vs-spin 800ms linear infinite}
@keyframes vs-spin{to{transform:rotate(360deg)}}

/* header */
.vs .hdr{position:sticky;top:0;z-index:20;background:linear-gradient(180deg,rgba(var(--paper-rgb),.86),rgba(var(--paper-rgb),.66));backdrop-filter:blur(12px);border-bottom:1px solid var(--border-hairline)}
.vs .hdr .wrap{height:64px;display:flex;align-items:center;gap:16px}
.vs .hdr nav{display:none;gap:4px;margin-left:auto}
.vs .hdr nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:22px;text-decoration:none;font-size:15px;font-weight:500;color:rgba(var(--ink-rgb),.72)}
.vs .hdr nav a:hover{color:var(--ink);background:rgba(var(--ink-rgb),.1)}
.vs .hdr .end{display:flex;align-items:center;gap:10px;margin-left:auto}
.vs .lang{display:flex;padding:3px;border-radius:22px;border:1px solid var(--border-glass)}
.vs .lang button{min-width:44px;height:38px;border-radius:19px;border:0;background:transparent;color:rgba(var(--ink-rgb),.72);font:600 13px/1 var(--font-body);letter-spacing:.06em;cursor:pointer}
.vs .lang button[aria-pressed="true"]{background:rgba(var(--ink-rgb),.14);color:var(--ink)}
.vs .hdr .pro-link{display:inline-flex;white-space:nowrap;align-items:center;min-height:44px;padding:0 16px;border-radius:22px;border:1px solid var(--border-glass);font-size:14px;font-weight:600;text-decoration:none}
.vs .hdr .get{display:none;min-height:44px;padding:0 18px;font-size:14px}
.vs .skip{position:absolute;left:12px;top:-60px;z-index:30;background:var(--ink);color:var(--on-ink)!important;padding:10px 16px;border-radius:22px;text-decoration:none;font-weight:600}
.vs .skip:focus{top:10px}

/* hero */
.vs .hero{padding:40px 0 0}
.vs .atmo{position:absolute;inset:-10% -30% auto auto;width:130%;height:780px;background:radial-gradient(50% 46% at 64% 44%,rgba(41,234,246,.42) 0%,rgba(0,88,187,.36) 38%,rgba(26,203,28,.14) 64%,rgba(0,0,0,0) 86%);pointer-events:none;animation:vs-fill 800ms var(--ease-out,cubic-bezier(.22,1,.36,1)) both}
@keyframes vs-fill{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}
.vs .hero-grid{position:relative;display:grid;gap:40px}
.vs .hero h1{font-size:44px;line-height:48px;margin:16px 0 20px;text-wrap:balance}
.vs .hero .lead{max-width:34ch}
.vs .hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.vs .hero .note{margin-top:16px;font-size:14px;color:rgba(var(--ink-rgb),.72)}
.vs .shots{position:relative;height:calc(844px*var(--s));--s:.62;display:flex;justify-content:center;gap:0}
.vs .shot{position:relative;width:calc(390px*var(--s));height:calc(844px*var(--s));flex:0 0 auto;--font-display:'Open Sauce Display','Open Sauce Sans',sans-serif}
.vs .shot img{display:block;width:100%;height:auto}
.vs .shot.b{display:none}
.vs .shots::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(180deg,rgba(var(--paper-rgb),0),var(--paper));pointer-events:none}

/* how */
.vs .sec-head{display:grid;align-content:start;gap:14px;margin-bottom:40px;max-width:720px}
.vs .steps{display:grid;gap:12px;list-style:none;margin:0;padding:0}
.vs .step{border:1px solid var(--border-glass);background:var(--surface-card);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:10px;min-height:0}
.vs .step .n{font-family:var(--font-display);font-size:22px;line-height:28px;color:rgba(var(--ink-rgb),.5)}
.vs .step h3{font-size:20px;line-height:26px;font-weight:600}
.vs .step .demo{margin-top:auto;padding-top:20px}
.vs .mini-input{height:52px;border-radius:26px;background:var(--field-bg);border:1px solid var(--border-glass);display:flex;align-items:center;gap:10px;padding:0 6px 0 18px;font-size:15px}
.vs .mini-input span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vs .mini-input i{width:40px;height:40px;border-radius:99px;background:var(--ink);display:grid;place-items:center;flex:0 0 auto}
.vs .mark{display:block;background:var(--on-ink);-webkit-mask:url(img/mark-mask.png) center/contain no-repeat;mask:url(img/mark-mask.png) center/contain no-repeat}
.vs .pills{display:flex;flex-wrap:wrap;gap:8px}
.vs .pill{padding:1.5px;border-radius:999px;background:var(--vibe-accent)}
.vs .pill span{display:block;padding:7px 13px;border-radius:999px;background:var(--ring-fill);font-size:13px;line-height:18px}
.vs .go{display:flex;flex-direction:column;gap:8px}
.vs .go .btn{width:100%;pointer-events:none}

/* free */
.vs .free-grid{display:grid;gap:32px}
.vs .free-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--border-hairline)}
.vs .free-list li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:14px;align-items:start;padding:18px 0;border-bottom:1px solid var(--border-hairline)}
.vs .free-list .ic{width:36px;height:36px;border-radius:12px;border:1px solid var(--border-glass);display:grid;place-items:center;color:var(--ink)}
.vs .free-list b{display:block;font-weight:600;font-size:17px;line-height:24px}
.vs .free-list .tag{align-self:center;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:4px 10px;border-radius:999px;border:1px solid var(--border-glass);color:rgba(var(--ink-rgb),.72)}

/* pro */
.vs .pro{padding-top:88px}
.vs .pro-atmo{position:absolute;left:50%;top:0;width:1400px;height:900px;transform:translateX(-50%);background:radial-gradient(40% 38% at 50% 34%,rgba(255,236,169,.16),rgba(255,211,77,.08) 40%,rgba(0,0,0,0) 72%);pointer-events:none}
.vs .pro-grid{position:relative;display:grid;gap:40px}
.vs .pro h2{font-size:34px;line-height:40px}
.vs .points{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:18px}
.vs .points li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px}
.vs .points li>span:first-child{margin-top:2px}
.vs .points b{font-weight:600}
.vs .honest{margin-top:28px;padding-top:18px;border-top:1px solid var(--border-hairline);font-size:14px;line-height:20px;color:rgba(var(--ink-rgb),.72);display:flex;gap:10px}
.vs .offer{border-radius:20px;border:1px solid var(--border-glass);background:rgba(var(--ink-rgb),.05);overflow:hidden;max-width:460px;width:100%;justify-self:center}
.vs .offer .photo{position:relative;height:180px;background:var(--paper)}
.vs .offer .photo::before{content:"";position:absolute;inset:0;background:var(--vibe-accent);opacity:.3}
.vs .offer .photo em{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-style:normal;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(var(--ink-rgb),.5)}
.vs .offer .body{padding:20px;display:grid;gap:12px}
.vs .offer .ex{position:absolute;top:12px;left:12px;font-size:11px;line-height:16px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:4px 10px;border-radius:999px;background:rgba(var(--paper-rgb),.7);border:1px solid var(--border-glass);backdrop-filter:blur(8px)}
.vs .offer-t{font-size:17px;line-height:24px}
.vs .terms{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.vs .terms li{font-size:13px;line-height:18px;padding:5px 10px;border-radius:8px;border:1px solid var(--border-hairline);color:rgba(var(--ink-rgb),.72)}
.vs .offer .v{font-size:20px;line-height:26px;font-weight:600}
.vs .offer .code{display:flex;gap:6px}
.vs .offer .code span{flex:1;height:48px;border-radius:8px;border:1px solid var(--border-glass);display:grid;place-items:center;font:600 20px/1 var(--font-body);letter-spacing:.04em;background:rgba(var(--ink-rgb),.04)}
.vs .offer-label{justify-self:center;margin-bottom:-28px}

/* checkout */
.vs .co-grid{display:grid;gap:32px}
.vs .co-card{border-radius:20px;border:1px solid var(--border-glass);background:rgba(var(--ink-rgb),.05);padding:20px;display:grid;gap:24px;backdrop-filter:blur(12px)}
.vs fieldset{border:0;margin:0;padding:0;min-width:0}
.vs legend{padding:0;margin-bottom:12px}
.vs .plans{display:grid;gap:10px}
.vs .plan{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:14px;min-height:76px;padding:16px 18px;border-radius:16px;border:1px solid var(--border-glass);cursor:pointer;transition:border-color 200ms,background 200ms}
.vs .plan:hover{background:rgba(var(--ink-rgb),.04)}
.vs .plan input{position:absolute;opacity:0;width:1px;height:1px}
.vs .plan .dot{width:22px;height:22px;border-radius:99px;border:1.5px solid rgba(var(--ink-rgb),.5);display:grid;place-items:center}
.vs .plan .dot::after{content:"";width:10px;height:10px;border-radius:99px;background:var(--on-ink);opacity:0}
.vs .plan b{display:block;font-weight:600;font-size:17px;line-height:22px}
.vs .plan small{display:block;font-size:14px;line-height:20px;color:rgba(var(--ink-rgb),.72);margin-top:2px}
.vs .plan .price{text-align:right;white-space:nowrap}
.vs .plan .price strong{font-weight:700;font-size:24px;line-height:28px}
.vs .plan .price span{display:block;font-size:13px;line-height:18px;color:rgba(var(--ink-rgb),.72)}
.vs .plan.on{border:1.5px solid var(--ink);background:rgba(var(--ink-rgb),.07);padding:15.5px 17.5px}
.vs .plan.on .dot{background:var(--ink);border-color:var(--ink)}
.vs .plan.on .dot::after{opacity:1}
.vs .plan:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:3px}
.vs .skel{height:76px;border-radius:16px;border:1px solid var(--border-hairline);padding:18px;display:grid;grid-template-columns:24px 1fr 72px;gap:14px;align-items:center}
.vs .sh{border-radius:6px;background-image:linear-gradient(90deg,rgba(var(--ink-rgb),.06) 25%,rgba(var(--ink-rgb),.16) 50%,rgba(var(--ink-rgb),.06) 75%);background-size:200% 100%;animation:vibe-shimmer 1.4s linear infinite}
.vs .state{border-radius:16px;border:1px solid var(--border-glass);padding:18px;display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px}
.vs .state .btn{min-height:44px;padding:0 18px;font-size:15px;justify-self:start;margin-top:10px}
.vs .field{display:grid;gap:8px}
.vs .field label{font-size:12px;line-height:16px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(var(--ink-rgb),.72)}
.vs .field input{height:52px;border-radius:12px;border:1px solid var(--border-glass);background:rgba(var(--ink-rgb),.06);color:var(--ink);font:400 17px/24px var(--font-body);padding:0 16px;width:100%;transition:border-color 200ms}
.vs .field input::placeholder{color:rgba(var(--ink-rgb),.4)}
.vs .field input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.vs .field input[aria-invalid="true"]{border-color:var(--status-danger);box-shadow:0 0 0 1px var(--status-danger)}
.vs .hint{font-size:14px;line-height:20px;color:rgba(var(--ink-rgb),.72)}
.vs .err{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;font-size:14px;line-height:20px;color:var(--ink)}
.vs .err>span:first-child{color:var(--status-danger);margin-top:1px}
.vs .alert{border-radius:12px;border:1px solid rgba(239,68,68,.6);background:rgba(239,68,68,.08);padding:14px 16px;display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;font-size:14px;line-height:20px}
.vs .alert>span:first-child{color:var(--status-danger)}
.vs .notice{border-radius:12px;border:1px solid var(--border-glass);background:rgba(var(--ink-rgb),.06);padding:14px 16px;display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;align-items:start;font-size:14px;line-height:20px}
.vs .notice button{background:transparent;border:0;color:rgba(var(--ink-rgb),.72);cursor:pointer;width:44px;height:44px;margin:-12px -12px -12px 0;display:grid;place-items:center;border-radius:22px}
.vs .submit{display:grid;gap:12px}
.vs .submit .btn{width:100%;min-height:56px}
.vs .trust{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;line-height:20px;color:rgba(var(--ink-rgb),.72);flex-wrap:wrap;text-align:center}
.vs .fine{font-size:13px;line-height:18px;color:rgba(var(--ink-rgb),.5);text-align:center}
.vs .fine a{color:rgba(var(--ink-rgb),.72)}
.vs .recap{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px}
.vs .recap li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px}

/* faq */
.vs .faq{max-width:880px}
.vs details{border-bottom:1px solid var(--border-hairline)}
.vs details:first-of-type{border-top:1px solid var(--border-hairline)}
.vs summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:16px 0;font-weight:600;font-size:17px;line-height:24px}
.vs summary::-webkit-details-marker{display:none}
.vs summary .chev{transition:transform 300ms var(--ease-out,cubic-bezier(.22,1,.36,1));color:rgba(var(--ink-rgb),.72);flex:0 0 auto}
.vs details[open] summary .chev{transform:rotate(45deg)}
.vs details .a{padding:0 40px 22px 0;color:rgba(var(--ink-rgb),.72);max-width:68ch}

/* closing + footer */
.vs .closing{padding:96px 0 72px;text-align:center;position:relative}
.vs .closing .atmo2{position:absolute;inset:0;background:radial-gradient(50% 60% at 50% 60%,rgba(41,234,246,.22),rgba(0,88,187,.18) 40%,rgba(0,0,0,0) 75%);pointer-events:none}
.vs .closing .display{position:relative;font-size:48px;line-height:52px}
.vs .closing p{position:relative;margin-top:18px}
.vs footer{border-top:1px solid var(--border-hairline);padding:40px 0 32px}
.vs .foot{display:grid;gap:32px}
.vs .foot ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:2px}
.vs .foot ul a{display:inline-flex;align-items:center;min-height:36px;text-decoration:none;color:rgba(var(--ink-rgb),.72);font-size:15px}
.vs .foot ul a:hover{color:var(--ink);text-decoration:underline}
.vs .foot-b{margin-top:32px;padding-top:20px;border-top:1px solid var(--border-hairline);display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;font-size:13px;color:rgba(var(--ink-rgb),.5)}

/* success */
.vs .ok{min-height:100%;display:grid}
.vs .ok-main{position:relative;padding:56px 0 72px}
.vs .ok-card{position:relative;max-width:640px;margin:0 auto;display:grid;gap:28px}
.vs .ok-card h1{font-size:36px;line-height:42px;text-wrap:balance}
.vs .ok-mark{width:88px;height:88px;border-radius:99px;padding:1.5px;background:var(--vibe-default)}
.vs .ok-mark>div{width:100%;height:100%;border-radius:99px;background:var(--ring-fill);display:grid;place-items:center}
.vs .ok-mark .mark{width:40px;height:36px;background:var(--vibe-default)}
.vs .ok-steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;border-top:1px solid var(--border-hairline)}
.vs .ok-steps li{counter-increment:s;display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:16px 0;border-bottom:1px solid var(--border-hairline)}
.vs .ok-steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--font-display);color:rgba(var(--ink-rgb),.5);font-size:18px}
.vs .ok-actions{display:flex;flex-wrap:wrap;gap:12px}

@container site (min-width:760px){
  .vs .wrap{padding:0 40px}
  .vs section{padding:96px 0}
  .vs .h2{font-size:34px;line-height:40px}
  .vs .hdr nav{display:flex}
  .vs .hdr .end{margin-left:8px}
  .vs .hdr .pro-link{display:none}
  .vs .hdr .get{display:inline-flex}
  .vs .hero h1{font-size:60px;line-height:64px}
  .vs .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vs .shots{--s:.6}
  .vs .shot.b{display:block;margin-left:-40px;margin-top:60px}
  .vs .free-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px}
  .vs .foot{grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr))}
  .vs .co-card{padding:28px}
  .vs .closing .display{font-size:72px;line-height:76px}
  .vs .ok-card h1{font-size:48px;line-height:54px}
}
@container site (min-width:1100px){
  .vs .wrap{padding:0 56px}
  .vs .hero{padding:72px 0 0}
  .vs .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:32px}
  .vs .hero h1{font-size:80px;line-height:84px}
  .vs .hero .copy{padding-bottom:96px}
  .vs .atmo{inset:-120px -10% auto auto;width:80%;height:1000px}
  .vs .shots{--s:.66;justify-content:flex-end}
  .vs .pro-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px;align-items:center}
  .vs .pro h2{font-size:44px;line-height:50px}
  .vs .co-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:start}
  .vs .closing .display{font-size:96px;line-height:100px}
}
@media (prefers-reduced-motion:reduce){
  .vs *,.vs *::before,.vs *::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
}