/* worvik.com homepage, phone layer (5 Nov 2026).
   Loaded with media="(max-width:640px)" on the link tag, after site.css, so nothing here can reach a wider screen.
   Scroll scenes use CSS sticky, not GSAP pin: pinning jumps on iOS, sticky runs in the browser.
   Folds, tickets, swipe rails and the step player are built by assets/m.js and assets/main.js. */

/* ---------- type, spacing, taps ---------- */
h2{font-size:clamp(32px,9.6vw,38px);line-height:1.02}
.lead{font-size:16px;line-height:1.45}
.eyebrow{margin-bottom:14px}
.eyebrow .ix{font-size:12px}
.sec{padding:60px 0}
.sec-head{gap:12px;margin-bottom:24px}
.btn{min-height:50px}
.btn-sm{min-height:44px}
.logo{min-height:44px}
.top{padding-block:10px}
.win-url{font-size:12px}
.sv-bar .win-url{height:18px;font-size:12px}
sup{font-size:12px}
.vs-t sup{font-size:12px}
.f-offers b,.menu-offers b{font-size:12px}
.show-step span{font-size:12px}
.fg b{font-size:12px}
.pf-steps b{font-size:12px;letter-spacing:.04em}
.note{font-size:14px;margin-top:18px}
.go-row{gap:0 22px;margin-top:14px}
.go-row .link{min-height:44px;padding-bottom:0;align-items:center;background-position:0 calc(100% - 8px)}
#free .go-row,#samples .go-row,#steps .go-row,#property .go-row,#faq .go-row{display:none}
#websites .go-row .link:nth-child(n+2),#pricing .go-row .link:nth-child(n+2){display:none}

/* ---------- hero: one headline, one line, one button; the journey stays, shorter ---------- */
.hm .hero{height:300vh}
.hero-first{padding-top:76px;padding-bottom:max(30px,env(safe-area-inset-bottom))}
.hero-eye,.offers,.hero-meta,.hero-btns .btn-ghost,.m-rest{display:none}
.hero-h{font-size:clamp(40px,min(13.6vw,7.6svh),60px);margin:0 0 14px}
.hero .sub{font-size:17px;line-height:1.4}
.hero-row{gap:20px}
.hero-btns .btn{padding:17px 26px;font-size:16px}
.st-n{font-size:12px}
.stx .st-h{font-size:clamp(26px,7.6vw,32px);margin:10px 0 0}
.stx-tags li{font-size:12px;padding:7px 10px}
.st-free{font-size:13px}

/* ---------- start free: three tickets ---------- */
.free{padding-top:64px}
.fr-cards{gap:10px}
.fr{padding:0;border-radius:22px;overflow:hidden}
.fr:hover{transform:none}
.fr-hd{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;min-height:92px;padding:14px 14px 14px 16px}
.fr-big{margin:0;font-size:42px;line-height:1}
.fr h3{font-size:19px;line-height:1.15;letter-spacing:-.03em;margin:0}
.fr-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:6px}
.fr-was{font-size:14px;font-weight:500}
.fr-flag{position:static;padding:5px 8px;font-size:12px;letter-spacing:.04em}
.fr-tg{position:absolute;inset:0;z-index:2;border-radius:22px 22px 0 0}
.fr-tg:focus-visible{outline:2px solid var(--violet);outline-offset:-4px}
.fr.open .qi{background:var(--violet);border-color:var(--violet);transform:rotate(180deg)}
.fr.open .qi:after{transform:rotate(0)}
.fr-bd{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.fr.open .fr-bd{grid-template-rows:1fr}
.fr-bd>div{position:relative;min-height:0;overflow:hidden}
.fr-in{padding:18px 16px 12px;border-top:1px dashed var(--line2)}
.fr ul{gap:9px;margin-bottom:18px;font-size:15px}
.fr .btn{align-self:stretch;width:100%}
.fr-math{display:flex;min-height:44px;margin-top:4px;font-size:15px}

/* folds: a heading row that opens, used for plans, the calculator, the table, the sample grid */
.mfs{margin-top:22px;border-bottom:1px solid var(--line)}
.mf{border-top:1px solid var(--line)}
.mf-b{width:100%;display:flex;align-items:center;gap:14px;min-height:72px;padding:12px 0;text-align:left;color:var(--text)}
.mf-t{flex:1;min-width:0;font:700 20px/1.15 var(--display);letter-spacing:-.03em}
.mf-t small{display:block;margin-top:5px;font:500 14px/1.3 var(--sans);letter-spacing:0;color:var(--muted)}
.mf.open .qi{background:var(--violet);border-color:var(--violet);transform:rotate(180deg)}
.mf.open .qi:after{transform:rotate(0)}
.mf-c{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.mf.open .mf-c{grid-template-rows:1fr}
.mf-c>div{min-height:0;overflow:hidden}
.mf.open .mf-c>div{padding-bottom:18px}
.mf-pill{border:0;margin-top:20px}
.mf-pill .mf-b{justify-content:center;min-height:54px;padding:0 10px 0 22px;border:1px solid var(--line2);border-radius:999px;text-align:center}
.mf-pill .mf-t{font:600 16px/1 var(--sans);letter-spacing:0}
.mf-pill .qi{width:34px;height:34px}
.mf-pill .mf-c>div{padding-top:0}
.mf-pill.open .mf-c>div{padding-top:20px}

.p99{margin-top:0;padding:0;border:0;background:none;display:block}
.p99-head .eyebrow,.p99-head h3{display:none}
.p99-head>p:not(.eyebrow){font-size:15px;margin-bottom:16px}
.p99-head .btn{width:100%}
.p99-cols{gap:10px;margin-top:14px}
.p99-c{padding:16px}
.p99-c ul{font-size:15px}
.p99-n{font-size:12px}
.calc{margin-top:0;padding:0;border:0;background:none}
.calc-head{margin-bottom:14px}
.calc-head h3,.vs-head h3{display:none}
.ctabs{width:100%}
.ctab{min-height:44px}
.vs{margin-top:0}
.vs-head{margin-bottom:12px}
.vs-head p{font-size:15px}
.c-src{font-size:14px;line-height:1.45}
.c-row input[type=range]{height:44px}

/* ---------- ticker ---------- */
.ticker{padding:14px 0}
.ticker span{font-size:32px}

/* ---------- what we make: a deck, each card slides over the last ---------- */
.stack{gap:12px}
.sc{position:sticky;top:calc(68px + var(--i)*8px);padding:0;gap:0;grid-template-columns:minmax(0,1fr);border-radius:22px;overflow:hidden}
.sc-txt{padding:14px 16px 12px}
.sc-n{display:none}
.sc h3{font-size:27px;line-height:1;padding-top:0;margin:0 0 8px}
.sc p{font-size:15px;line-height:1.42;margin-bottom:4px}
.sc .link{min-height:44px;align-items:center;padding-bottom:0;background-position:0 calc(100% - 8px)}
.sc-niche{display:none}
.sc-media{order:-1;height:216px;aspect-ratio:auto;border:0;border-radius:0}
.vw{display:none}
.m-ugc{background:radial-gradient(70% 90% at 30% 40%,rgba(124,108,255,.24),transparent 70%),#0e0e13}
.beats li{font-size:12px;padding:6px 9px}
.m-ugc .beats{right:10px}
.m-phone{left:27%;height:92%;border-radius:20px}
.mp-frame{width:72%;left:5%;top:7%}
.mp-pip{width:42%;right:5%;left:auto;bottom:8%;top:auto}
.mp-strip{display:none}
.mw-tabs{display:none}
.m-web .win{top:8%;left:6%;width:76%}
.m-web .mini{width:22%;right:6%;bottom:6%}
.pf-tag,.mp-room{font-size:12px}
.mp-pip span{font-size:12px}

/* ---------- samples ---------- */
.samples{padding-top:60px}
.native .panel{flex:0 0 64vw}
.native .panel-meta{margin-top:12px}
.native .panel-meta .eyebrow{margin-bottom:6px}
.native .reel-ui{margin-top:16px}
.panel-meta b{font-size:24px}
.reel-count{font-size:13px}
.all{padding-top:0;margin-top:14px}
.all .note{margin-top:14px}
.all-head{margin:0 0 12px}
.fg{min-height:44px}
.fsc{min-height:44px}
.card .cat{font-size:12px}
.card .tag{font-size:12px}

/* ---------- the five beats: a sticky screen, paper opens over the dark, one word lights at a time ---------- */
.hm .flip{height:170vh}
.hm .flip-pin{position:sticky;top:0;height:100svh}
.hm .flip-in{justify-content:center;padding:44px var(--gut) 0}
.hm .flip-eye{position:static;margin-bottom:22px}
.hm .flip-track{display:grid;width:auto;white-space:normal}
.hm .fs{display:none}
.hm .fw{font-size:clamp(46px,min(16.6vw,9.4svh),70px);line-height:1.12;letter-spacing:-.055em;-webkit-text-stroke:1.5px rgba(11,11,15,.3)}
.hm .fw.on{-webkit-text-stroke-color:transparent}
.hm .fw.on:after{content:"";display:inline-block;width:.34em;height:.34em;margin-left:.16em;background:var(--violet);clip-path:polygon(0 0,100% 0,50% 100%);vertical-align:.08em}
.hm .flip-cap{position:static;margin-top:22px;font-size:16px;line-height:1.4;max-width:21em}
.no-pin .fw{font-size:15vw}

/* ---------- how it works: one screen, the stage plays the four steps ---------- */
.light{padding-top:30px;padding-bottom:72px}
#steps .sec-head{margin-bottom:18px}
.tl{display:block}
.tl-side{position:static;margin:0;padding:0;background:none}
.tl-stage{height:min(44svh,350px);border-radius:22px;touch-action:pan-y}
.tl-meter{display:none}
.tl-brief{width:80cqw;left:6cqw}
.tl-script{width:78cqw;right:7cqw}
.tl-files{width:62cqw}
.tl-voice{width:58cqw}
.tl-h{font-size:12px;letter-spacing:.1em}
.tl-rec{font-size:12px;letter-spacing:.06em}
.tl-hooks span,.tl-plat span{font-size:12.5px}
.tl-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:6px}
.tl-nav button{position:relative;min-height:44px;padding:10px 0 12px;text-align:left;font:600 13px/1 var(--sans);letter-spacing:.06em;color:#6a6a76}
.tl-nav button:before{content:"";position:absolute;left:0;right:0;bottom:6px;height:3px;border-radius:3px;background:rgba(11,11,15,.1)}
.tl-nav button i{position:absolute;left:0;right:0;bottom:6px;height:3px;border-radius:3px;background:var(--violet);transform:scaleX(0);transform-origin:0 50%}
.tl-nav button.on{color:var(--ink)}
.tl-nav button.done i{transform:none}
.tl-nav button.on i{animation:tlRun var(--d,4s) linear forwards}
.tl-nav.hold button.on i{animation:none;transform:none}
@keyframes tlRun{to{transform:none}}
.tl-list{display:grid;padding:0;margin-top:6px}
.tl-step{grid-area:1/1;display:block;min-height:0;padding:0;opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .6s var(--ease);pointer-events:none}
.tl-step.on{opacity:1;transform:none}
.tl-step .num,.tl-dot,.tl-rail{display:none}
.tl-step h3{font-size:26px;margin:0 0 6px}
.tl-step p{font-size:16px;line-height:1.42}

/* ---------- property: the photos, a band of light, one frame that fills the screen ---------- */
.prop-sec{padding-top:56px}
.tx{--vw:calc(100vw - 2 * var(--gut));--g:6px}
.hm .tx{height:185vh}
.hm .tx-pin{position:sticky;top:0;height:100svh;justify-content:center;gap:12px;padding:68px 0 14px}
.tx-steps{gap:8px}
.tx-steps li{padding-bottom:10px}
.tx-n{font-size:12px}
.tx-steps b{font-size:14.5px;margin:6px 0 0}
.tx-stage{flex:none}
.hm .tx-box{aspect-ratio:3/4;max-height:calc(100svh - 196px)}
.hm .tx-grid{top:0;bottom:0;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr)}
.txc{border-radius:10px}
.txc .tg{left:7px;top:7px;padding:5px 8px;font-size:12px;letter-spacing:.06em}
.hm .tx-video{clip-path:inset(0 0 0 0 round 0px)}
.tx-play{font-size:12px}
.tx-cap{font-size:14px}
.wall,.prop-foot{display:none}
.explore-head{margin-top:26px}
.explore-head .eyebrow{margin-bottom:12px}
.show-tabs{display:flex;margin-bottom:14px}
.show-tab{min-height:44px;padding:0 14px;font-size:14.5px}
.show-tab small{display:none}
.show-step{font-size:13px}
.cmp-bar{margin-top:10px}
.cmp-bar .seg{display:none}
.cmp-navs{margin-left:auto}
.cmp-navs .cmp-nav{width:44px;height:44px}
.thumbs{display:none}
.vid{margin-top:8px}
.vid-meta{margin-top:10px}
.vid .btn{width:100%}
.vid-sound{min-height:44px}
.cmp-lbl,.cmp-room,.cmp-hint{font-size:12px}
.show-note{font-size:14px;margin-top:14px}

/* ---------- swipe rails: websites and prices ---------- */
.rail,.plans.on{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);padding-inline:var(--gut);margin-inline:calc(-1 * var(--gut));scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.rail::-webkit-scrollbar,.plans.on::-webkit-scrollbar{display:none}
.rail>*,.plans.on>*{flex:0 0 84vw;min-width:0;scroll-snap-align:start}
.plans.rail:not(.on){display:none}
.plans.rail:not(.on)+.rail-ui{display:none}
.rail-ui{display:flex;align-items:center;gap:14px;margin-top:14px;font:600 13px/1 var(--sans);letter-spacing:.1em;color:var(--muted)}
.rail-ui b{color:var(--text);font-weight:600}
.rail-ui .rb{position:relative;flex:1;height:1px;background:var(--line2)}
.rail-ui .rb i{position:absolute;inset:0;background:var(--text);transform-origin:0 50%;transform:scaleX(.2);transition:transform .2s}

.cases.rail{gap:10px}
.case{display:flex;flex-direction:column;align-items:stretch;padding:12px;border-radius:22px;background:var(--surface);border:1px solid var(--line);gap:12px}
.case-vis{padding:0 7% 8% 0}
.case-meta{margin-bottom:8px;font-size:12px;letter-spacing:.08em}
.case-txt{display:flex;flex-direction:column;flex:1}
.case h3{font-size:25px;line-height:1.02;margin-bottom:8px}
.case-lede{font-size:15px;line-height:1.42;margin-bottom:10px}
.case-stats{margin-bottom:12px}
.case-stats div:nth-child(n+2){display:none}
.case-stats div{grid-template-columns:auto 1fr;gap:12px;padding:10px 0}
.case-stats b{font-size:26px}
.case-stats p{font-size:15px;line-height:1.35}
.case-btns{margin-top:auto;gap:2px 16px}
.case-open{width:100%;padding:15px 18px}
.case-site{min-height:44px;font-size:15px}

/* ---------- pricing ---------- */
#pricing .tabs{margin-bottom:16px}
.tab{min-height:54px;padding:9px 4px}
.tab b{font-size:13px;letter-spacing:-.01em;overflow:visible;text-overflow:clip}
.tab small{font-size:12px;margin-top:4px}
.plans.on{align-items:stretch;grid-template-columns:none}
.plans .pfree{padding:20px;gap:12px}
.plans .pfree .btn{width:100%}
.pfree-b{font-size:12px}
.pfree-big{font-size:68px}
.pfree-t p{font-size:15px;line-height:1.42}
.plan{padding:20px}
.plan h3{font-size:25px;margin-bottom:4px}
.plan .for{margin-bottom:16px;font-size:15px}
.plan .flag{right:14px;top:14px;font-size:12px;letter-spacing:.06em;padding:7px 10px}
.pv{margin:-4px 0 14px;font-size:12px}
.plan .price{font-size:50px}
.plan ul{margin:14px 0 18px;gap:9px;font-size:15px}
.web-extra{margin-top:0}
.web-extra .plan.care{margin-top:10px}
.incl{padding:0;background:none;border:0}
.incl h3{display:none}
.incl ul{font-size:15px}
.incl li{padding-bottom:10px}

/* ---------- who ---------- */
.rows{gap:8px;margin-top:18px}
.row-lbl{margin:6px 0 0}
.pill{padding:11px 16px;font-size:17px}
#who{padding-bottom:50px}

/* ---------- questions ---------- */
.faq-wrap{grid-template-columns:minmax(0,1fr);gap:18px}
.fq-cats{flex-wrap:nowrap;gap:6px;margin:16px calc(-1 * var(--gut)) 0;padding:0 var(--gut);overflow-x:auto;scrollbar-width:none}
.fq-cats::-webkit-scrollbar{display:none}
.fq-cats button{flex:none;min-height:44px;padding:0 15px;white-space:nowrap}
.fq-help{display:none}
.faq{gap:8px}
.qa{border-radius:18px}
.qa button{padding:12px 14px 12px 16px;min-height:60px;font-size:17px}
.ans p{padding:0 16px 16px;font-size:15px;line-height:1.45}
.faq:not(.m-all) .qa:nth-child(n+6){display:none}
.faq-more{width:100%;min-height:50px;margin-top:2px;border:1px solid var(--line2);border-radius:999px;font:600 16px/1 var(--sans);color:var(--text)}

/* ---------- contact ---------- */
#contact{padding-top:56px}
.contact{gap:20px}
.contact-l .lead{margin-top:8px}
.talk{gap:6px 18px;margin-top:12px}
.talk .btn{min-height:46px;padding:12px 16px;font-size:15px}
.mail{display:inline-flex;align-items:center;min-height:44px;padding-bottom:0;font-size:16px;background-position:0 calc(100% - 9px)}
.fsteps{margin-bottom:14px;padding-bottom:12px}
.fsteps span{font-size:13px;gap:6px}
.opts{grid-template-columns:1fr 1fr;gap:8px}
.opt{display:grid;grid-template-columns:minmax(0,1fr);gap:3px;padding:12px 30px 12px 12px;min-height:88px;align-content:center}
.opt-ic{display:none}
.opt b{font-size:15.5px;line-height:1.15}
.opt small{font-size:13px;line-height:1.25}
.opt-ck{right:9px;top:9px;width:20px;height:20px}
legend{font-size:23px}
.fnav .btn{min-height:50px}

/* ---------- footer ---------- */
.foot{padding:52px 0 18px}
.f-cta{position:relative;display:block;padding-bottom:30px}
.f-h{font-size:clamp(31px,9.2vw,36px);line-height:1;max-width:none}
.f-l{gap:14px}
.f-offers a{min-height:44px;display:inline-flex;align-items:center}
.f-offers{padding-right:0}
.f-orb{width:112px;margin:12px 0 -10px auto;display:grid}
.f-ring text{font-size:15px;letter-spacing:3px}
.f-cols{display:block;padding:24px 0 8px}
.f-brand{padding-bottom:16px}
.f-brand p{margin:12px 0 6px;font-size:15px}
.f-mail{display:inline-flex;align-items:center;min-height:44px;padding-bottom:0;background-position:0 calc(100% - 9px)}
.f-col,.f-col:last-child{display:block;border-top:1px solid var(--line)}
.f-col:last-child{border-bottom:1px solid var(--line)}
.f-col h2,.f-col h4{margin:0}
.f-col h2 button{width:100%;display:flex;align-items:center;justify-content:space-between;min-height:50px;font:600 15px/1 var(--sans);letter-spacing:0;text-transform:none;color:var(--text)}
.f-col h2 button i{position:relative;width:12px;height:12px}
.f-col h2 button i:before,.f-col h2 button i:after{content:"";position:absolute;left:0;right:0;top:5.2px;height:1.6px;background:var(--muted);transition:transform .45s var(--ease)}
.f-col h2 button i:after{transform:rotate(90deg)}
.f-col.open h2 button i:after{transform:rotate(0)}
.f-lk{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.f-col.open .f-lk{grid-template-rows:1fr}
.f-lk>div{min-height:0;overflow:hidden}
.f-col a{display:flex;align-items:center;width:auto;min-height:44px;padding:0;background-position:0 calc(100% - 9px)}
.f-col.open .f-lk>div{padding-bottom:8px}
.f-word{padding-top:26px}
.f-bot{gap:4px 14px;font-size:13.5px}
.totop{min-height:44px;display:inline-flex;align-items:center}

/* ---------- menu ---------- */
.menu-offers a,.menu-foot a{min-height:44px;display:inline-flex;align-items:center}
.menu-list small{font-size:12px}

/* ---------- endless repaints stop off screen; m.js adds .m-on while one is visible ---------- */
.fr-web,.plan.feat,.case-open{animation-play-state:paused}
.fr-web.m-on,.plan.feat.m-on,.case-open.m-on{animation-play-state:running}