/* ixorax home - the film (meeting room + interactive phone). State machine: data-st on .fstage = idle | prob | sol | q; data-s on .fdev = -1 | 0 | 1 | 2. */
.film{--w1:#EEF0FA;--w2:#DDE1F3;--frame:#fff;--floor:#C9CEE6;--base:#B3BAD6;--scr:#1B2340;--scr-in:#0E1530;--chair:#B7BDD8;--tt:#E7EAF6;--tf:#CBD0E8;--tag:#fff;--tag-ink:#16203A;--paper:#fff;--cup:#E8806A;--bubble:#fff;--bubble-ink:#16203A;--side1:#EEF0FA;--side2:#E2E6F7;
  max-width:1060px;margin:28px auto 0;border-radius:var(--r-l);background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-2,var(--sh-1));overflow:hidden;position:relative}
:root[data-theme=dark] .film{--w1:#18224A;--w2:#101938;--frame:#2A3566;--floor:#0C1330;--base:#1B2552;--scr:#0A1029;--scr-in:#070C20;--chair:#232E60;--tt:#2A3566;--tf:#18214A;--tag:#1E2A55;--tag-ink:#EEF1FF;--paper:#C9D2F2;--bubble:#1E2A55;--bubble-ink:#EEF1FF;--side1:#141D40;--side2:#0D1432}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .film{--w1:#18224A;--w2:#101938;--frame:#2A3566;--floor:#0C1330;--base:#1B2552;--scr:#0A1029;--scr-in:#070C20;--chair:#232E60;--tt:#2A3566;--tf:#18214A;--tag:#1E2A55;--tag-ink:#EEF1FF;--paper:#C9D2F2;--bubble:#1E2A55;--bubble-ink:#EEF1FF;--side1:#141D40;--side2:#0D1432}}
.fmain{display:grid;grid-template-columns:minmax(0,1fr) 300px}
.fwrap{position:relative;container-type:inline-size;min-width:0}
.fstage{position:relative;aspect-ratio:16/10;background:var(--w2);transition:opacity .4s}
.fstage.out{opacity:0}
.fsvg{position:absolute;inset:0;width:100%;height:100%;display:block}
.f-floor{fill:var(--floor)}.f-base{fill:var(--base)}.f-frame{fill:var(--frame)}.f-scr{fill:var(--scr)}.f-scr-in{fill:var(--scr-in)}
.f-chair{fill:var(--chair)}.f-tt{fill:var(--tt)}.f-tf{fill:var(--tf)}.f-paper{fill:var(--paper);opacity:.9}.f-cup{fill:var(--cup)}
.tag rect{fill:var(--tag);opacity:.85;transition:fill .3s,opacity .3s}.tag .tn{font:800 15px var(--font);fill:var(--tag-ink)}.tag .tr{font:600 11.5px var(--font);fill:var(--tag-ink);opacity:.65}
.tag.on rect{fill:var(--brand);opacity:1}.tag.on text{fill:#fff;opacity:1}

/* characters */
.act .bodyg{transform-box:fill-box;transform-origin:50% 100%;animation:fbob 3s ease-in-out infinite}
.act .armR{transform-box:view-box;transform-origin:94px 102px}
.act.talk .armR{animation:ftalk 1s ease-in-out infinite}
@keyframes fbob{50%{transform:translateY(-2px)}}
@keyframes ftalk{50%{transform:rotate(-30deg)}}
.act .br-s,.act .m-s,.act .m-h,.act .m-o{display:none}
.act.sad .br-n,.act.sad .m-n,.act.worry .m-n{display:none}.act.sad .br-s,.act.sad .m-s,.act.worry .br-s{display:inline}.act.worry .m-n{display:inline}
.act.worry .br-n{display:none}
.act.happy .m-n,.act.happy .m-s{display:none}.act.happy .m-h{display:inline}.act.happy .br-s{display:none}.act.happy .br-n{display:inline}
.act.laugh .m-n,.act.laugh .m-s{display:none}.act.laugh .m-h{display:inline}.act.laugh .br-s{display:none}.act.laugh .br-n{display:inline}
.act.laugh .bodyg{animation:fjoy .38s ease-in-out 4}
@keyframes fjoy{50%{transform:translateY(-5px)}}
.act.talk .m-n,.act.talk .m-s,.act.talk .m-h{display:none}
.act.talk .m-o{display:inline;transform-box:fill-box;transform-origin:center;animation:fmouth .3s ease-in-out infinite alternate}
@keyframes fmouth{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
.film:not(.is-visible) .bodyg,.film:not(.is-visible) .armR,.film:not(.is-visible) .m-o,.film:not(.is-playing) .bodyg,.film:not(.is-playing) .armR,.film:not(.is-playing) .m-o{animation-play-state:paused}

/* wall screen (HTML overlay on the svg frame) */
.fscr{position:absolute;left:29.75%;top:4.8%;width:40.5%;height:24.8%;border-radius:11px;overflow:hidden;color:#EAF0FF;container-type:size}
.sp{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.2cqh;text-align:center;opacity:0;transform:scale(.97);transition:opacity .4s,transform .45s var(--ease);pointer-events:none;padding:4cqh 5cqw}
.fstage[data-st=idle] .sp-idle,.fstage[data-st=prob] .sp-prob,.fstage[data-st=sol] .sp-sol,.fstage[data-st=q] .sp-q{opacity:1;transform:none;pointer-events:auto}
.sp .ic{width:22cqh;height:22cqh;color:#8EA2D6}
.sp b{font-weight:800;font-size:9cqh;line-height:1.15}
.sp span{font-size:6.4cqh;font-weight:600;opacity:.72}
.sp-prob .pi{position:relative}.sp-prob .ic{width:34cqh;height:34cqh;color:#F07178}
.sp-prob .bang{position:absolute;top:-2cqh;right:-6cqh;width:12cqh;height:12cqh;border-radius:50%;background:#E5484D;color:#fff;font:800 8cqh/12cqh var(--font);font-style:normal}
.fstage[data-st=prob] .sp-prob .pi{animation:fshake .55s .1s 1}
@keyframes fshake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.sp-sol{align-items:stretch;justify-content:center;gap:3cqh;padding:5cqh 5cqw}
.sp-sol .sh{display:flex;align-items:center;gap:3cqw}.sp-sol .sh img{width:22cqh;height:22cqh;border-radius:22%;flex:none}
.sp-sol .sh b{display:block;font-size:10cqh;color:#fff;text-align:start}.sp-sol .sh span{display:block;color:#7FE0B6;opacity:1;text-align:start}
.sp-sol ul{list-style:none;margin:0;padding:0;display:grid;gap:2.2cqh}
.sp-sol li{display:flex;align-items:center;gap:2.5cqw;font-weight:700;font-size:7.4cqh;padding:1.6cqh 2.4cqw;border-radius:2cqh;background:rgba(255,255,255,.07);opacity:.22;transform:translateX(-8px);transition:opacity .4s,transform .45s var(--spring);text-align:start}
.sp-sol li i{width:9cqh;height:9cqh;border-radius:50%;background:#2FB58A;color:#fff;display:grid;place-items:center;flex:none;transform:scale(.4);transition:transform .45s var(--spring)}
.sp-sol li i svg{width:60%;height:60%}
.sp-sol li.on{opacity:1;transform:none}.sp-sol li.on i{transform:scale(1)}
[dir=rtl] .sp-sol li{transform:translateX(8px)}[dir=rtl] .sp-sol li.on{transform:none}
.sp-q img{width:26cqh;height:26cqh;border-radius:22%}
.sp-q blockquote{margin:0;font-weight:700;font-size:8.6cqh;line-height:1.3;color:#fff;max-width:92%}
.sp-q .go{padding:1.6cqh 4cqh;border-radius:99px;background:var(--c);color:#fff;font-weight:800;font-size:6.4cqh;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.fstage.i-speaks .f-scr{filter:drop-shadow(0 0 14px var(--c))}

/* speech bubbles on the scene, above the speaker */
.fsub{position:absolute;left:0;right:0;top:27%;height:31%;pointer-events:none;z-index:3}
.fbub{position:absolute;bottom:0;left:50%;transform:translate(-50%,10px) scale(.97);width:max-content;max-width:66%;display:flex;align-items:center;gap:12px;padding:11px 16px 12px;border-radius:18px;background:var(--bubble);color:var(--bubble-ink);border:1.5px solid color-mix(in srgb,var(--c,var(--brand)) 40%,transparent);box-shadow:0 14px 34px rgba(8,12,34,.3);opacity:0;transition:opacity .3s,transform .45s var(--spring)}
.fbub:empty{visibility:hidden}
.fbub.in{opacity:1;transform:translate(-50%,0)}
.fbub::after{content:"";position:absolute;bottom:-8px;left:var(--tail,50%);margin-left:-8px;width:15px;height:15px;background:var(--bubble);border-right:1.5px solid color-mix(in srgb,var(--c,var(--brand)) 40%,transparent);border-bottom:1.5px solid color-mix(in srgb,var(--c,var(--brand)) 40%,transparent);transform:rotate(45deg);border-radius:0 0 4px 0}
.fbub.is-i{background:linear-gradient(135deg,color-mix(in srgb,var(--c) 20%,var(--bubble)),var(--bubble))}
.fbub.is-i::after{display:none}
.fbub .bt{min-width:0;flex:1}.fbub b{display:block;font-size:clamp(9.5px,1.45cqw,12px);font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--c);margin-bottom:2px}
.fbub span{display:block;font-size:clamp(12.5px,2cqw,17px);line-height:1.38;font-weight:600}
.fbub .av{width:clamp(34px,5.4cqw,46px);height:clamp(34px,5.4cqw,46px);border-radius:22%;flex:none;display:block}
.fbub .av.ini{border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font:800 19px var(--font)}
.fbub .eq{display:flex;align-items:flex-end;gap:3px;height:24px;flex:none}
.fbub .eq s{display:block;width:4px;height:100%;border-radius:3px;background:var(--c);transform-origin:bottom;animation:feq .7s ease-in-out infinite alternate}
.fbub .eq s:nth-child(2){animation-delay:.15s}.fbub .eq s:nth-child(3){animation-delay:.3s}.fbub .eq s:nth-child(4){animation-delay:.08s}
@keyframes feq{from{transform:scaleY(.2)}to{transform:scaleY(1)}}
.film:not(.is-visible) .eq s,.film:not(.is-playing) .eq s{animation-play-state:paused}

.fpill{position:absolute;top:12px;inset-inline-end:12px;z-index:6;display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:99px;border:0;background:var(--brand-grad);color:#fff;font:800 13px var(--font);cursor:pointer;box-shadow:0 10px 24px rgba(123,97,217,.45);animation:fpulse 2.2s ease-in-out infinite}
.fpill[hidden]{display:none}.fpill svg{width:18px;height:18px}
@keyframes fpulse{50%{box-shadow:0 10px 24px rgba(123,97,217,.45),0 0 0 8px rgba(123,97,217,.18)}}
.fprog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(127,127,160,.2);z-index:4}
.fprog i{display:block;height:100%;background:var(--c,var(--brand));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}

/* the device column */
.fside{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--side1),var(--side2));border-inline-start:1px solid var(--line);display:grid;place-items:center;padding:18px 14px;min-width:0}
.fdev{width:100%;max-width:262px;container-type:inline-size;transform:translateY(112%);opacity:0;transition:transform .85s cubic-bezier(.2,.9,.25,1.05),opacity .4s}
.fdev.show{transform:none;opacity:1}
.fdev.out{opacity:0}
.ph{position:relative;aspect-ratio:9/18.6;border-radius:13cqw;padding:2.6cqw;background:linear-gradient(145deg,#2A3050,#0B0F1F);box-shadow:0 24px 50px rgba(8,12,34,.38),inset 0 0 0 .5cqw rgba(255,255,255,.14)}
.ph-notch{position:absolute;top:4.2cqw;left:50%;transform:translateX(-50%);width:26cqw;height:6.4cqw;border-radius:9cqw;background:#05070f;z-index:6}
.ph-scr{position:relative;width:100%;height:100%;border-radius:10.6cqw;overflow:hidden;background:#F4F6FD;color:#16203A;container-type:inline-size}
.ph-lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:20cqw 6cqw 0;background:linear-gradient(160deg,#2B3470,#101635);color:#fff;transition:opacity .5s,transform .6s var(--ease)}
.lk-t{font-size:20cqw;font-weight:300;line-height:1;letter-spacing:-.03em}.lk-d{font-size:5cqw;font-weight:600;opacity:.75;margin:2cqw 0 9cqw}
.lk-n{width:100%;display:flex;align-items:center;gap:3cqw;padding:3.2cqw;border-radius:5cqw;background:rgba(255,255,255,.14);backdrop-filter:none;text-align:start}
.lk-n img{width:10cqw;height:10cqw;border-radius:22%;flex:none}.lk-n b{display:block;font-size:4.2cqw;font-weight:800}.lk-n span{display:block;font-size:3.8cqw;opacity:.85;line-height:1.3}
.lk-n i{width:2.6cqw;height:2.6cqw;border-radius:50%;background:#FF5C63;flex:none;margin-inline-start:auto;animation:fpulse2 1.6s ease-in-out infinite}
@keyframes fpulse2{50%{box-shadow:0 0 0 1.6cqw rgba(255,92,99,.3)}}
.fdev:not([data-s="-1"]) .ph-lock{opacity:0;transform:translateY(-6%) scale(.96);pointer-events:none}
.ph-app{position:absolute;inset:0;padding:11cqw 5cqw 5cqw;display:flex;flex-direction:column;gap:3cqw;opacity:0;transform:scale(.96);transition:opacity .5s .1s,transform .6s var(--ease) .1s;pointer-events:none}
.fdev:not([data-s="-1"]) .ph-app{opacity:1;transform:none;pointer-events:auto}
.ap-h{display:flex;align-items:center;gap:2.6cqw}.ap-h img{width:8.5cqw;height:8.5cqw;border-radius:22%;flex:none}.ap-h b{font-size:4.6cqw;font-weight:800}.ap-h small{margin-inline-start:auto;font-size:3.2cqw;font-weight:700;color:#6B7390}
.ap-steps{position:relative;flex:1;min-height:0}
.ap-step{position:absolute;inset:0;display:flex;flex-direction:column;gap:3cqw;opacity:0;transform:translateY(5%);transition:opacity .45s,transform .5s var(--ease);pointer-events:none}
.ap-step.on{opacity:1;transform:none;pointer-events:auto}.ap-step.past{transform:translateY(-4%)}
.ap-t h4{margin:0;font-size:6.2cqw;font-weight:800;line-height:1.15}.ap-t span{display:block;margin-top:.8cqw;font-size:3.8cqw;font-weight:600;color:#6B7390}
.ap-hero{display:flex;flex-direction:column;align-items:center;gap:1.6cqw;margin:1cqw 0}
.ap-hero .hc{width:27cqw;height:27cqw;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--c);box-shadow:inset 0 0 0 .9cqw color-mix(in srgb,var(--c) 40%,#fff)}
.ap-hero .hi{width:48%;height:48%}.ap-hero em{font-style:normal;font-size:7.4cqw;font-weight:300;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.ap-hero.h-check .hc{background:#DFF6EC;color:#1FA774;box-shadow:inset 0 0 0 .9cqw #9BE0C3}
.ap-step.on .h-check .hc{animation:fpop .6s var(--spring)}
@keyframes fpop{0%{transform:scale(.5)}100%{transform:scale(1)}}
.ap-step.on .h-mic .hc,.ap-step.on .h-timer .hc{animation:fbeat 1.4s ease-in-out infinite}
@keyframes fbeat{50%{transform:scale(1.07)}}
.ap-bars{display:flex;align-items:flex-end;gap:2.4cqw;height:20cqw;padding:2cqw 3cqw;border-radius:3.4cqw;background:#fff}
.ap-bars i{flex:1;height:var(--h);border-radius:1.2cqw;background:var(--c);transform-origin:bottom;animation:fgrow .8s var(--ease) both}
@keyframes fgrow{from{transform:scaleY(.1)}}
.ap-rows{list-style:none;margin:0;padding:0;display:grid;gap:1.8cqw}
.ap-rows li{display:flex;align-items:center;gap:2.4cqw;padding:2.4cqw 3cqw;border-radius:3.2cqw;background:#fff;font-size:3.9cqw;font-weight:700;box-shadow:0 .4cqw 1.4cqw rgba(30,40,90,.07)}
.ap-rows li .ri{width:5.2cqw;height:5.2cqw;flex:none;color:#6B7390}.ap-rows li span{flex:1;min-width:0}
.ap-rows li b{font-size:3.2cqw;font-weight:800;padding:.7cqw 2.2cqw;border-radius:9cqw;background:#EEF0FA;color:#4A5275;white-space:nowrap}
.ap-rows li.ok .ri{color:#1FA774}.ap-rows li.ok b{background:#DFF6EC;color:#14855D}
.ap-rows li.warn .ri{color:#E08A1E}.ap-rows li.warn b{background:#FFF0DA;color:#B3680B}
.ap-step.on .ap-rows li{animation:frow .5s var(--ease) both}.ap-step.on .ap-rows li:nth-child(2){animation-delay:.1s}.ap-step.on .ap-rows li:nth-child(3){animation-delay:.2s}.ap-step.on .ap-rows li:nth-child(4){animation-delay:.3s}
@keyframes frow{from{opacity:0;transform:translateY(6px)}}
.ap-cta{margin-top:auto;position:relative;border:0;border-radius:4cqw;padding:3.4cqw;background:var(--c);color:#fff;font:800 4.4cqw var(--font);cursor:pointer;box-shadow:0 1.4cqw 3.6cqw color-mix(in srgb,var(--c) 45%,transparent)}
.ap-cta.hot::before{content:"";position:absolute;inset:-1.6cqw;border-radius:5.4cqw;border:.8cqw solid var(--c);opacity:0;animation:fhot 1.5s ease-out infinite}
@keyframes fhot{0%{transform:scale(.94);opacity:.8}100%{transform:scale(1.08);opacity:0}}
.ap-cta:not(.hot){background:#C9CEE6;color:#5A6285;box-shadow:none;pointer-events:none}
.ap-cta:active{transform:scale(.97)}

/* Admin: laptop window */
.fdev[data-dev=web]{max-width:280px}
.lt{border-radius:3cqw 3cqw 0 0;background:#1A2140;padding:1.8cqw 1.8cqw 0;box-shadow:0 20px 44px rgba(8,12,34,.34)}
.lt-bar{display:flex;align-items:center;gap:1.4cqw;padding:1.6cqw 1.4cqw;background:#2A3260;border-radius:2cqw 2cqw 0 0;color:#B9C3F0;font-size:3.2cqw;font-weight:700}.lt-bar i{width:2cqw;height:2cqw;border-radius:50%;background:#FF6B72}.lt-bar i:nth-child(2){background:#FFC24B}.lt-bar i:nth-child(3){background:#3DD68C}.lt-bar span{margin-inline-start:2cqw}
.lt-body{position:relative;aspect-ratio:4/4.3;background:#F4F6FD;color:#16203A;overflow:hidden;container-type:inline-size}
.lt-body .ph-lock{padding-top:12cqw}.lt-body .lk-t{font-size:14cqw}.lt-body .ph-app{padding-top:5cqw}
.lt-base{height:2.6cqw;margin:0 -3cqw;border-radius:0 0 4cqw 4cqw;background:linear-gradient(#C8CEE6,#9BA3C6)}

/* controls */
.fctl{display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid var(--line);background:var(--card-2)}
.fplay,.fnav{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer;flex:none;transition:transform .25s var(--spring),background .2s}
.fplay{background:var(--brand-grad);color:#fff;border:0}.fplay:hover,.fnav:hover{transform:scale(1.07)}
.fplay svg,.fnav svg{width:18px;height:18px;display:block}
.fplay .ia{display:none}.fplay[data-state=playing] .ia{display:inline}.fplay[data-state=playing] .ip{display:none}
[dir=rtl] .fnav svg{transform:scaleX(-1)}
.fsel{flex:1;min-width:0;height:42px;padding:0 14px;border-radius:99px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:700 13.5px var(--font);cursor:pointer;text-overflow:ellipsis}
.fsnd{flex:none;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:99px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:800 13px var(--font);cursor:pointer;white-space:nowrap}
.fsnd svg{width:19px;height:19px}.fsnd .x{display:inline}.fsnd .w{display:none}
.fsnd[aria-pressed=true]{background:color-mix(in srgb,var(--brand) 16%,var(--card));border-color:var(--brand);color:var(--brand)}
.fsnd[aria-pressed=true] .x{display:none}.fsnd[aria-pressed=true] .w{display:inline}
.fsnd.nov{opacity:.75}

@media (max-width:900px){
  .fmain{grid-template-columns:1fr}
  .fwrap{display:flex;flex-direction:column}
  .fsub{position:static;height:auto;padding:10px 12px 12px;pointer-events:auto;border-top:1px solid var(--line);background:var(--card);order:2;min-height:104px;display:flex;align-items:center}
  .fbub{position:relative;left:auto!important;bottom:auto;transform:none;max-width:none;width:100%;opacity:1;transition:none}
  .fbub.in{transform:none}.fbub::after{display:none}
  .fbub b{font-size:11px}.fbub span{font-size:15px}.fbub .av{width:42px;height:42px}
  .fside{max-height:0;padding:0;border:0;transition:max-height .8s var(--ease),padding .8s}
  .film.dev-on .fside{max-height:620px;padding:18px;border-top:1px solid var(--line)}
  .fdev{max-width:250px}.fdev[data-dev=web]{max-width:290px}
  .fpill{top:8px;inset-inline-end:8px;padding:7px 11px;font-size:12px}
  .tag .tn{font-size:17px}.tag .tr{font-size:12.5px}
  .fctl{flex-wrap:wrap}.fsel{order:5;flex:1 1 100%}.fsnd{margin-inline-start:auto;padding:0 12px}.fsnd span{display:none}
}
@media (prefers-reduced-motion:reduce){.act .bodyg,.act.talk .armR,.act.talk .m-o,.fpill,.eq s,.ap-cta.hot::before,.lk-n i{animation:none}.fbub,.sp,.sp-sol li,.sp-sol li i,.ap-step,.ph-app,.ph-lock{transition:none}}

/* real app screenshots inside the phone + tap hotspot */
.fside::before{content:"";position:absolute;inset:0;background:url("../img/petals.svg") center 42%/46% no-repeat;opacity:.07;pointer-events:none}
.root-dev-off{}
.ph-scr{background:#fff}
.ph-scr .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .5s}
.ph-scr .shot.on{opacity:1}
.hs{position:absolute;width:15cqw;height:15cqw;margin:-7.5cqw 0 0 -7.5cqw;border:0;padding:0;background:none;cursor:pointer;display:none;z-index:4}
.hs.hot{display:block}
.hs i{position:absolute;inset:3.2cqw;border-radius:50%;background:color-mix(in srgb,var(--c) 70%,transparent);box-shadow:0 0 0 .8cqw rgba(255,255,255,.85),0 1.2cqw 3cqw rgba(0,0,0,.35)}
.hs::before{content:"";position:absolute;inset:0;border-radius:50%;border:.9cqw solid var(--c);opacity:0;animation:fhot 1.5s ease-out infinite}
.hs em{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:.6cqw;padding:.8cqw 2.6cqw;border-radius:9cqw;background:#16203A;color:#fff;font:800 3.4cqw var(--font);font-style:normal;white-space:nowrap;box-shadow:0 1cqw 2.4cqw rgba(0,0,0,.3)}
.hs:active i{transform:scale(.9)}
.film:not(.is-visible) .hs::before{animation-play-state:paused}
.lt-body .ph-app{position:absolute;inset:0;opacity:1;transform:none;pointer-events:auto}

/* device column sized by the stage height (the stage drives the row height, so speech-bubble percentages stay on the scene) */
.fmain{grid-template-columns:minmax(0,1fr) 262px}
.fside{contain:size;display:flex;align-items:center;justify-content:center;padding:16px 12px}
.fdev{height:100%;width:auto;aspect-ratio:9/18.6;max-width:100%}
.ph{height:100%;width:100%;aspect-ratio:auto}
.fdev[data-dev=web]{height:auto;width:100%;max-width:250px;aspect-ratio:auto}
@media (max-width:900px){
  .fmain{grid-template-columns:1fr}
  .fside{contain:none;display:block;padding:0}
  .film.dev-on .fside{padding:18px}
  .fdev{height:auto;width:240px;max-width:100%;margin:0 auto}
  .ph{height:auto;aspect-ratio:9/18.6}
  .fdev[data-dev=web]{width:290px}
}

/* end card: Before / After, quote, Subscribe */
.sp-q{display:none!important}
.fend{position:absolute;inset:0;z-index:7;display:grid;place-items:center;padding:3cqw;background:rgba(7,11,30,.78);opacity:0;pointer-events:none;transition:opacity .5s}
.fend.on{opacity:1;pointer-events:auto}
.fe-card{width:min(92%,640px);padding:clamp(14px,2.6cqw,26px);border-radius:clamp(16px,2.6cqw,26px);background:var(--card);border:1.5px solid color-mix(in srgb,var(--c) 45%,var(--line));box-shadow:0 24px 60px rgba(0,0,0,.45);text-align:center;transform:translateY(14px) scale(.97);transition:transform .6s var(--spring)}
.fend.on .fe-card{transform:none}
.fe-h{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:clamp(8px,1.8cqw,16px)}.fe-h img{width:clamp(34px,6cqw,56px);height:clamp(34px,6cqw,56px);border-radius:22%}.fe-h b{font-size:clamp(16px,3.2cqw,26px);font-weight:800;color:var(--c)}
.fe-ba{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:clamp(6px,1.4cqw,12px)}
.fe-ba>div{padding:clamp(8px,1.6cqw,14px);border-radius:14px;text-align:start}.fe-ba small{display:block;font-size:clamp(9.5px,1.5cqw,12px);font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px}.fe-ba span{display:block;font-size:clamp(12px,2.1cqw,16.5px);font-weight:700;line-height:1.35}
.fe-b{background:rgba(229,72,77,.1);border:1px solid rgba(229,72,77,.3)}.fe-b small{color:#E5484D}
.fe-a{background:rgba(47,181,138,.12);border:1px solid rgba(47,181,138,.4)}.fe-a small{color:#1FA774}
.fe-arr{display:grid;place-items:center;color:var(--c)}.fe-arr svg{width:clamp(18px,3cqw,26px);height:clamp(18px,3cqw,26px)}[dir=rtl] .fe-arr svg{transform:scaleX(-1)}
.fe-q{margin:clamp(8px,1.8cqw,16px) 0;font-weight:600;font-size:clamp(12px,2.1cqw,16.5px);line-height:1.45;color:var(--ink-2)}
.fe-btns{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.fe-sub,.fe-open{padding:clamp(8px,1.5cqw,12px) clamp(16px,2.8cqw,26px);border-radius:99px;font-weight:800;font-size:clamp(12.5px,2cqw,15.5px);text-decoration:none}
.fe-sub{background:var(--brand-grad);color:#fff;box-shadow:0 8px 22px rgba(123,97,217,.45)}.fe-open{border:1.5px solid var(--c);color:var(--c)}
.fe-ill{display:block;margin-top:10px;font-size:11px;font-weight:700;color:var(--ink-3)}

/* problem screen: the pains pile up, one per line */
.sp-prob{justify-content:flex-start;align-items:stretch;gap:2.4cqh;padding:5cqh 5cqw}
.ph0{display:flex;align-items:center;gap:3cqw}.ph0 b{display:block;font-size:9cqh;color:#fff;text-align:start}.ph0 span{display:block;color:#F07178;opacity:1;text-align:start}
.sp-prob .pi .ic{width:19cqh;height:19cqh}.sp-prob .bang{top:-1.5cqh;right:-3cqh;width:8cqh;height:8cqh;font:800 6cqh/8cqh var(--font)}
.pains{list-style:none;margin:0;padding:0;display:grid;gap:1.5cqh}
.pains li{display:flex;align-items:center;gap:2.2cqw;font-weight:700;font-size:6.5cqh;padding:1cqh 2.2cqw;border-radius:1.8cqh;background:rgba(229,72,77,.13);border:1px solid rgba(229,72,77,.3);opacity:0;transform:translateX(-10px);transition:opacity .45s,transform .5s var(--spring);text-align:start}
.pains li.on{opacity:1;transform:none}[dir=rtl] .pains li{transform:translateX(10px)}[dir=rtl] .pains li.on{transform:none}
.pains li i{width:7cqh;height:7cqh;border-radius:50%;background:#E5484D;color:#fff;display:grid;place-items:center;flex:none}.pains li i svg{width:58%;height:58%}

/* phone frame sized from the column itself, with the exact proportions of the app screenshots (643x1392 + bezel): the screenshot is shown whole, never cropped */
.fside{container-type:size;contain:none}
.fdev{height:min(calc(100cqh - 32px),calc((100cqw - 24px) * 2.104));width:auto;aspect-ratio:1/2.104;max-width:none}
.ph{height:100%;width:100%;aspect-ratio:auto}
.ph-scr .shot{object-fit:fill;object-position:center}
.fdev[data-dev=web]{height:auto;width:100%;max-width:250px;aspect-ratio:auto}
@media (max-width:900px){
  .fside{container-type:normal}
  .fdev{height:auto;width:240px;max-width:100%;aspect-ratio:auto}
  .ph{height:auto;aspect-ratio:1/2.104}
  .fdev[data-dev=web]{width:290px;max-width:100%}
}