/* Website CSS below the hero (loaded after the hero in <body>): sections, running mock-ups, pricing, forms, inner pages, footer, motion. */

/* ------------------------------------------------------------------ sections */
.sec{position:relative;padding-block:clamp(52px,min(8vw,10vh),104px)}
.sec--white{background:var(--bg-2)}
.sec__head{max-width:760px;margin-bottom:clamp(22px,min(3.5vw,4.5vh),44px)}
.sec__head .lead{margin-top:14px}
.sec__head--c{margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.cv>section{content-visibility:auto;contain-intrinsic-size:auto 900px}
.lnk{display:inline-flex;align-items:center;gap:6px;color:var(--em-text);font-weight:500}
.lnk .i{width:18px;height:18px}
.tag{display:inline-block;vertical-align:middle;font-size:.72rem;font-weight:500;color:var(--gold-text);background:var(--gold-soft);border-radius:999px;padding:2px 9px;margin-inline-start:6px}
.ico{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;flex:none}
.ico .bi{width:24px;height:24px}
.ico--mint{background:var(--mint);color:var(--em-text)}
.ico--gold{background:var(--gold-soft);color:var(--gold-text)}
.ico--seal{background:var(--seal-soft);color:var(--seal)}
:root[data-theme="dark"] .ico--seal{color:#9DB9E6}
.ticks{display:grid;gap:12px}
.ticks li{display:flex;gap:10px;align-items:flex-start}
.ticks .i{width:20px;height:20px;margin-top:3px;color:#fff;background:var(--em);border-radius:50%;padding:3px;flex:none}

/* trust strip */
.trust{position:relative;z-index:2;border-block:1px solid var(--line);background:var(--bg-2)}
.trust__in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 26px;padding-block:18px}
.trust li{display:flex;align-items:center;gap:9px;font-size:.92rem;color:var(--ink-2);font-weight:500}
.trust .bi,.trust .i{width:22px;height:22px;color:var(--em-text)}
.trust b{font-weight:600;color:var(--ink)}

/* ------------------------------------------------------------------ story */
.story__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px)}
.story__steps{display:grid}
.step{min-height:clamp(300px,50svh,480px);display:flex;flex-direction:column;justify-content:center;padding-block:24px;transition:color .4s}
.step:not(.is-on) .h3,.step:not(.is-on) p{color:var(--ink-4)}
.step:not(.is-on) .step__n{filter:saturate(.3)}
.step:first-child{justify-content:flex-start;padding-top:8px}
.step.is-on{opacity:1}
.step__n{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--mint);color:var(--em-text);font-weight:600;margin-bottom:14px;font-size:.95rem}
.step .h3{font-size:clamp(1.3rem,1.1rem + .9vw,1.9rem);margin-bottom:10px}
.step p{color:var(--ink-3);max-width:40ch;font-size:1.04rem}
.step__mock{display:none}
.story__stage{position:relative}
.story__sticky{position:sticky;top:var(--stick);display:flex;gap:18px;align-items:stretch}
.story__rail{width:3px;border-radius:3px;background:var(--line);position:relative;overflow:hidden;flex:none}
.story__rail span{position:absolute;inset:0;background:linear-gradient(var(--em-light),var(--gold));transform-origin:top;transform:scaleY(var(--sp,.25));transition:transform .5s var(--ease)}
.story__stage .dev{flex:1;min-width:0}
.story__stage{--sf:clamp(10px,min(.95vw,1.55vh),14px)}
.win--story{--mf:var(--sf)}
[dir] .dev--flat{--rx:0deg;--ry:0deg;--rz:0deg}
.panels{display:grid;position:relative}
.panel{grid-area:1/1;opacity:0;transform:translateY(14px) scale(.985);transition:opacity .45s var(--ease),transform .6s var(--ease);pointer-events:none}
.panel.is-on{opacity:1;transform:none}
.jr--in{margin:0 1.5em 1.3em;padding:.9em 1.1em;border-radius:.9em;background:var(--m-em-soft);color:#0E1B2C;font-size:.86em}
.jr--in .jr__h{color:var(--m-em);font-size:1em}
.jr--in .jr__r{border-top-color:rgb(14 27 44/.1);color:#4A5560}
.jr--in .jr__r bdi{color:#0E1B2C}
@media (max-width:1023px){
	.story__grid{grid-template-columns:1fr}
	.story__stage{display:none}
	.step{min-height:0;opacity:1;padding-block:18px 30px}
	.step__mock{display:block;margin-top:18px;font-size:clamp(9.6px,2.84vw,13px);background:var(--m-bg);color:var(--m-ink);border-radius:1.1em;border:1px solid var(--line);box-shadow:var(--sh-2);overflow:hidden}
}

/* ------------------------------------------------------------------ mock-ups (always light screens) */
.mock{color:var(--m-ink)}
.rec,.bk,.pl,.ps,.py,.kp,.ai{padding:1.3em 1.5em}
.rec__top,.bk__top,.pl__top,.py__top{display:flex;justify-content:space-between;align-items:center;gap:1em;padding-bottom:.8em;border-bottom:1px dashed var(--m-line);margin-bottom:1em}
.rec__kind,.bk__kind,.pl__kind,.py__kind{font-weight:600;font-size:1.02em}
.rec__no{font-size:.8em;color:var(--m-ink-4)}
.rec__amt{display:grid;gap:.2em;padding:1em 1.2em;border-radius:.9em;background:linear-gradient(135deg,var(--m-em-soft),var(--m-em-soft-2));margin-bottom:1em}
.rec__amt span:first-child{font-size:.82em;color:var(--m-ink-3)}
.amt--xl{font-size:1.9em;font-weight:600;color:#0E7A5C;line-height:1.2}
.rec__grid{display:grid;grid-template-columns:1fr 1fr;gap:.8em 1.4em}
.rec__grid div{display:grid;font-size:.88em}
.rec__grid span{color:var(--m-ink-4);font-size:.86em}
.rec__ok,.bk__ok{display:flex;align-items:center;gap:.5em;margin-top:1.1em;font-weight:500;color:var(--m-inc);font-size:.92em}
.rec__ok .i,.bk__ok .i,.ps__done .i{width:1.3em;height:1.3em;background:#1F9D6B;color:#fff;border-radius:50%;padding:.18em}
.bk__count{font-size:.84em;color:var(--m-inc);background:var(--m-inc-soft);border-radius:999px;padding:.2em .8em;font-weight:500}
.bk__head{display:grid;grid-template-columns:1fr 2.6em .9fr;font-size:.76em;color:var(--m-ink-4);padding:0 .3em .5em}
.bk__head span:last-child{text-align:end}
.bk__row{display:grid;grid-template-columns:1fr 2.6em .9fr;align-items:center;margin-bottom:.6em}
.bk__l,.bk__r{display:grid;grid-template-columns:auto 1fr auto;gap:.6em;align-items:center;padding:.6em .8em;border-radius:.7em;border:1px solid var(--m-line);background:var(--m-bg);font-size:.82em;transition:background-color .4s,border-color .4s}
.bk__r{grid-template-columns:1fr auto}
.bk__d{color:var(--m-ink-4)}
.bk__t{line-height:1.35}
.bk__a{font-weight:500}
.bk__link{justify-self:center;display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;background:#1F9D6B;color:#fff;position:relative}
.bk__link::before{content:"";position:absolute;height:2px;width:2.6em;background:#1F9D6B;z-index:-1;opacity:.5}
.bk__link .i{width:1.1em;height:1.1em}
.bk__l,.bk__r{background:var(--m-em-soft-2);border-color:var(--m-em-line)}



.bk__l,.bk__link{transition:transform .6s var(--ease),background-color .4s}
.pl__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.7em;margin-bottom:.8em}
.pl__kpis div{display:grid;padding:.6em .8em;border-radius:.7em;background:var(--m-bg-2);font-size:.86em}
.pl__kpis span{color:var(--m-ink-4);font-size:.85em}
.pl__kpis .amt{font-weight:600;font-size:1.08em}
.pl__in .num{color:var(--m-inc)}.pl__ex .num{color:var(--m-exp)}
.pl__net{background:var(--m-em-soft)!important}
.pl__net .num{color:var(--m-em)}
.pl__chart{width:100%;height:auto;overflow:visible}
.pl__grid path{stroke:var(--m-line);stroke-width:1;stroke-dasharray:3 4}
[dir="rtl"] .pl__plot{transform:scaleX(-1);transform-origin:161px 0}
.pl__bi{fill:#1F9D6B;opacity:.85}
.pl__be{fill:var(--m-exp-soft)}
.pl__bi,.pl__be{transform-box:fill-box;transform-origin:bottom;transition:transform .8s var(--ease)}
.pl__line{fill:none;stroke:var(--m-em);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.4s var(--ease-io) .3s}
.pl__dot{fill:#E0A526;stroke:#fff;stroke-width:2}



.pl__chart.on .pl__plot rect:nth-of-type(2n+1){transition-delay:calc(var(--k,0)*1ms)}
.pl__axis{display:flex;justify-content:space-between;font-size:.72em;color:var(--m-ink-4);padding:.3em .4em 0}
.pl__tip{display:inline-flex;align-items:center;gap:.4em;margin-top:.7em;font-size:.82em;color:var(--m-inc);background:var(--m-inc-soft);border-radius:999px;padding:.25em .8em}
.i-up{transform:rotate(-45deg)}
[dir="rtl"] .i-up{transform:scaleX(-1) rotate(-45deg)}
.pl__tip .i,.ai__up .i{width:1.1em;height:1.1em}

/* POS */
.ps__scan{position:relative;display:flex;align-items:center;gap:.6em;padding:.75em 1em;border:1.5px solid var(--m-em);border-radius:.8em;color:var(--m-ink-4);font-size:.86em;overflow:hidden;background:var(--m-bg)}
.ps__scan .i{color:var(--m-em);width:1.4em;height:1.4em}
.ps__beam{position:absolute;inset-block:0;width:3px;background:linear-gradient(transparent,#E0A526,transparent);inset-inline-start:0;opacity:0}
.armed .ps__beam{animation:beam 1.6s var(--ease-io) 3}
@keyframes beam{0%{opacity:0;transform:translateX(0)}20%{opacity:1}100%{opacity:0;transform:translateX(30em)}}
[dir="rtl"] .armed .ps__beam{animation-name:beamr}
@keyframes beamr{0%{opacity:0;transform:translateX(0)}20%{opacity:1}100%{opacity:0;transform:translateX(-30em)}}
.ps__cart{display:grid;gap:.45em;margin:.9em 0}
.ps__item{display:grid;grid-template-columns:2.4em 1fr auto;gap:.6em;align-items:center;padding:.55em .8em;border-radius:.7em;background:var(--m-bg-2);font-size:.88em}
.ps__q{color:var(--m-em);font-weight:600}
.ps__item.on{animation:flash .9s var(--ease)}
@keyframes flash{0%{background:#FBF4E2}100%{background:var(--m-bg-2)}}
.ps__sum{display:grid;gap:.2em;border-top:1px solid var(--m-line);padding-top:.6em;font-size:.88em}
.ps__sum div{display:flex;justify-content:space-between}
.ps__sum div span{color:var(--m-ink-3)}
.ps__total{font-weight:600;font-size:1.25em}
.ps__total .num{color:var(--m-em)}
.ps__pay{display:flex;gap:.5em;margin-top:.8em;font-size:.86em}
.ps__btn{flex:1;text-align:center;background:linear-gradient(180deg,#16876A,#0B6B51);color:#fff;border-radius:.7em;padding:.6em;font-weight:600}
.ps__m{padding:.6em .9em;border-radius:.7em;border:1px solid var(--m-line);color:var(--m-ink-3);white-space:nowrap}
.ps__done{display:flex;align-items:center;gap:.5em;margin-top:.8em;font-size:.9em;font-weight:500;color:var(--m-inc)}

/* payroll */
.py__st{background:var(--m-inc-soft);color:var(--m-inc);border-radius:999px;padding:.2em .9em;font-size:.82em;font-weight:600}
.py__row{display:grid;grid-template-columns:minmax(0,1.6fr) 1fr .9fr 1fr;gap:.6em;align-items:center;padding:.5em .2em;border-top:1px solid var(--m-line);font-size:.84em}
.py__row--3{grid-template-columns:minmax(0,1.6fr) 1fr 1fr}
.py__row bdi{text-align:end}
.py__row--h{border-top:0;color:var(--m-ink-4);font-size:.74em;font-weight:500}
.py__row--h span:not(:first-child){text-align:end}
.py__who{display:grid;grid-template-columns:2.1em 1fr;column-gap:.6em;align-items:center}
.py__who i{grid-row:span 2;width:2.1em;height:2.1em;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:600;background:var(--m-seal-soft);color:var(--m-seal);font-size:.9em}
.py__who b{font-weight:500;line-height:1.2}
.py__who small{color:var(--m-ink-4);font-size:.82em;line-height:1.2}
.py__ded{color:var(--m-exp)}
.py__foot{display:flex;justify-content:space-between;align-items:center;gap:1em;flex-wrap:wrap;margin-top:.8em;padding:.7em 1em;border-radius:.8em;background:var(--m-bg-2);font-size:.84em}
.py__si{color:var(--m-ink-3)}
.py__net{font-weight:600}
.py__net .num{color:var(--m-em)}
.armed .py__st:not(.on){transform:scale(1.6) rotate(-6deg)}

/* KPIs */
.kp{display:grid;grid-template-columns:1fr 1fr;gap:.8em}
.kp__c{display:grid;padding:1em 1.1em;border-radius:.9em;border:1px solid var(--m-line);background:var(--m-bg);box-shadow:0 1px 2px rgb(14 27 44/.04)}
.kp__l{font-size:.82em;color:var(--m-ink-4)}
.kp__v{font-size:1.65em;font-weight:600;line-height:1.3}
.kp__sp{width:5em;height:2.3em;margin-top:.3em}
.kp__sp path{fill:none;stroke:var(--m-spark);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.2s var(--ease-io) .2s}
.kp__sp--up path{stroke:#1F9D6B}


/* AI */
.ai{display:grid;gap:.8em;align-content:start}
.ai__top{display:flex;align-items:center;gap:.6em;padding-bottom:.7em;border-bottom:1px dashed var(--m-line)}
.ai__perm{margin-inline-start:auto;display:inline-flex;align-items:center;gap:.3em;font-size:.76em;color:var(--m-ink-4);background:var(--m-bg-2);border-radius:999px;padding:.2em .7em}
.ai__perm .i{width:1em;height:1em}
.ai__q{justify-self:end;max-width:85%;background:#0E7A5C;color:#fff;padding:.6em 1em;border-radius:1em 1em .3em 1em;font-size:.9em}
[dir="rtl"] .ai__q{justify-self:start;border-radius:1em 1em 1em .3em}
.ai__a{display:grid;grid-template-columns:2.4em 1fr;gap:.6em;align-items:start}
.ai__a>div{background:var(--m-bg-2);border-radius:1em 1em 1em .3em;padding:.8em 1em;font-size:.88em;display:grid;gap:.35em}
[dir="rtl"] .ai__a>div{border-radius:1em 1em .3em 1em}
.ai__big{font-weight:600;color:var(--m-em)}
.ai__up{display:block;color:var(--m-ink-3);font-size:.94em}
.ai__up bdi{color:var(--m-inc);font-weight:600}
.ai__bars{display:flex;align-items:flex-end;gap:.5em;height:4.6em;margin-top:.3em}
.ai__bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.2em;height:100%}
.ai__bar i{display:block;width:100%;border-radius:.3em .3em 0 0;background:#9CD8BF;transform-origin:bottom;transition:transform .7s var(--ease)}
.ai__bar small{font-size:.66em;color:var(--m-ink-4)}
.ai__bar--1 i{height:52%}.ai__bar--2 i{height:62%}.ai__bar--3 i{height:58%}.ai__bar--4 i{height:70%}.ai__bar--5 i{height:80%}.ai__bar--6 i{height:92%;background:#0E7A5C}

.ai__dots{display:flex;gap:.3em;padding-inline-start:3em}
.ai__dots i{width:.45em;height:.45em;border-radius:50%;background:#A9B4C2;animation:dot 1s infinite alternate}
.ai__dots i:nth-child(2){animation-delay:.2s}.ai__dots i:nth-child(3){animation-delay:.4s}
@keyframes dot{to{opacity:.3;transform:translateY(-.25em)}}

.robot{width:2.4em;height:2.4em;flex:none}
.robot--sm{width:2.2em;height:2.2em}
.robot--xs{width:2.3em;height:2.3em}
.robot--ico{width:28px;height:28px}
.armed .robot__eyes{animation:blink 4s infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.robot__eyes{transform-origin:32px 26px}

/* ------------------------------------------------------------------ country */
.ctry{overflow:hidden}
.ctry__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);min-width:0;gap:clamp(32px,5vw,72px);align-items:start}
.ctry__copy .lead{margin-top:14px}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.facts>div{padding:11px 14px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.facts dt{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--ink-4);margin-bottom:4px}
.facts dt .bi{width:18px;height:18px;color:var(--em-text)}
.facts dd{font-weight:500;font-size:.9rem;line-height:1.5}
.facts small{color:var(--ink-4);font-weight:400}
.ctry__side{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;min-width:0}
.calc{border-radius:20px;padding:16px 18px;min-width:0}
.calc__h{display:flex;align-items:center;gap:8px;font-weight:600;margin-bottom:14px}
.calc__h .bi{color:var(--em-text)}
.calc__in{display:grid;gap:6px;font-size:.86rem;color:var(--ink-3)}
.calc__field{display:flex;align-items:center;gap:8px;height:50px;padding:0 14px;border-radius:12px;border:1px solid var(--field-line);background:var(--card)}
.calc__field:focus-within{border-color:var(--em-light);box-shadow:0 0 0 3px rgb(57 146 121/.18)}
.calc__field input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:1.25rem;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
[dir="rtl"] .calc__field input{text-align:right}
.calc__out{display:grid;gap:6px;margin-top:14px}
.calc__out p{display:flex;justify-content:space-between;gap:10px;font-size:.95rem;color:var(--ink-3)}
.calc__out .amt{color:var(--ink);font-weight:500}
.calc__total{padding-top:8px;border-top:1px solid var(--line);font-weight:600}
.calc__total .amt{color:var(--em-text);font-size:1.2rem}
.calc__nojs{font-size:.85rem;color:var(--ink-4)}
.flags__h{font-size:.92rem;color:var(--ink-3);margin-bottom:12px}
.flags__h b{color:var(--ink);font-size:1.1rem}
.flags__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px}
.flags__grid a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px 2px;border-radius:12px;font-size:.72rem;line-height:1.3;text-align:center;color:var(--ink-3);transition:background-color .2s,transform .2s var(--ease)}
.flags__grid a:hover{background:var(--card);transform:translateY(-2px)}
.flags__grid a[aria-current]{background:var(--mint);color:var(--em-text);font-weight:600}
.flag--lg{width:30px;height:30px}
@media (max-width:1023px){.ctry__grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}.facts dd{font-size:.84rem;overflow-wrap:anywhere}.flags__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ------------------------------------------------------------------ apps assemble */
.apps__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:center}
.apps__copy .lead{margin:14px 0 24px}
.appgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;perspective:1200px}
.app a{display:grid;gap:4px;justify-items:start;padding:16px;border-radius:18px;background:var(--bg);border:1px solid var(--line);height:100%;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.app a:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--line-2)}
.app__ico{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;margin-bottom:6px}
.app__ico .bi{width:24px;height:24px}
.app--mint .app__ico{background:var(--mint);color:var(--em-text)}
.app--gold .app__ico{background:var(--gold-soft);color:var(--gold-text)}
.app--seal .app__ico{background:var(--seal-soft);color:var(--seal)}
:root[data-theme="dark"] .app--seal .app__ico{color:#9DB9E6}
.app b{font-weight:600;font-size:.98rem}
.app small{color:var(--ink-4);font-size:.78rem;line-height:1.4}
.app--core{grid-column:span 2}
.app--core a{background:var(--grad-em);color:#fff;border-color:transparent}
.app--core small{color:#fff}
.app--core .app__ico{background:rgb(255 255 255/.16);color:#fff}
.app--core .bi .ac{stroke:#EBC572}
@media (max-width:1023px){.apps__grid{grid-template-columns:1fr}}
@media (max-width:560px){.appgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.app a{padding:12px}}

/* ------------------------------------------------------------------ role tabs */
.tabs__list{display:inline-flex;flex-wrap:wrap;gap:4px;padding:5px;border-radius:14px;background:var(--bg-3);border:1px solid var(--line);margin-bottom:24px}
.tabs__list button{padding:9px 18px;border-radius:10px;font-weight:500;color:var(--ink-3);transition:background-color .2s,color .2s,box-shadow .2s}
.tabs__list button[aria-selected="true"]{background:var(--card);color:var(--em-text);box-shadow:var(--sh-1)}
.tp{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:center}
.tp .ticks{font-size:1.05rem}
.tp__vis .mock{--mf:clamp(10px,.95vw,14px);font-size:var(--mf);background:var(--m-bg);border-radius:1.1em;border:1px solid var(--line);box-shadow:var(--sh-3)}
.tp:not([hidden]){animation:fadeup .35s var(--ease)}
@keyframes fadeup{from{opacity:0;transform:translateY(8px)}}
@media (max-width:1023px){.tp{grid-template-columns:1fr}.tp__vis .mock{--mf:clamp(9.6px,2.7vw,13px)}}
@media (max-width:560px){.tabs__list{display:grid;grid-template-columns:1fr 1fr;width:100%}.tabs__list button{padding:9px 6px}}

/* ------------------------------------------------------------------ how it starts */
.how__line{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;position:relative;counter-reset:how}
.how__line::before{content:"";position:absolute;top:22px;inset-inline:22px;height:2px;background:linear-gradient(90deg,var(--em-light),var(--gold));transform-origin:left;transform:scaleX(var(--hw,1));opacity:.6}
[dir="rtl"] .how__line::before{transform-origin:right}
.how__line li{position:relative}
.how__n{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--card);border:2px solid var(--em-light);color:var(--em-text);font-weight:600;margin-bottom:14px;box-shadow:0 0 0 6px var(--bg-2)}
.how__line .h3{margin-bottom:6px}
.how__line p{color:var(--ink-3);font-size:.95rem}
@media (max-width:860px){.how__line{grid-template-columns:1fr 1fr;row-gap:30px}.how__line::before{display:none}}
@media (max-width:480px){.how__line{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ plans */
.cyc{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:5px;border-radius:14px;background:var(--bg-3);border:1px solid var(--line);margin-top:22px;isolation:isolate}
.cyc button{position:relative;z-index:1;padding:9px 18px;border-radius:10px;font-weight:500;color:var(--ink-3);white-space:nowrap;transition:color .2s}
.cyc button[aria-checked="true"]{color:var(--ink)}
.cyc__pill{position:absolute;z-index:0;top:5px;bottom:5px;inset-inline-start:5px;width:calc(50% - 5px);border-radius:10px;background:var(--card);box-shadow:var(--sh-2);transition:transform .35s var(--ease)}
.cyc[data-on="yearly"] .cyc__pill{transform:translateX(100%)}
[dir="rtl"] .cyc[data-on="yearly"] .cyc__pill{transform:translateX(-100%)}
.cyc__save{font-size:.8125rem;color:var(--em-deep);font-weight:600}
:root[data-theme="dark"] .cyc__save{color:#7FD8B8}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch;perspective:1400px}
.plan{position:relative;display:flex;flex-direction:column;padding:26px;border-radius:22px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-2);transform:rotateX(var(--trx,0deg)) rotateY(var(--try,0deg));transition:transform .4s var(--ease),box-shadow .3s;transform-style:preserve-3d;overflow:hidden}
.plan:hover{box-shadow:var(--sh-3)}
.plan__shine{position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%),rgb(255 255 255/.55),transparent 45%);opacity:0;transition:opacity .3s}
:root[data-theme="dark"] .plan__shine{background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%),rgb(255 255 255/.07),transparent 45%)}
.plan:hover .plan__shine{opacity:1}
.plan--hi{border:2px solid var(--em);box-shadow:0 30px 60px -30px rgb(9 79 60/.45)}
.plan--hi::before{content:"";position:absolute;inset-inline:0;top:0;height:5px;background:var(--grad-gold)}
.plan__head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.plan__title{font-size:1.35rem;font-weight:600}
.plan__badge{font-size:.76rem;font-weight:600;color:var(--gold-text);background:var(--gold-soft);border:1px solid rgb(224 165 38/.35);padding:3px 10px;border-radius:999px;white-space:nowrap}
.plan__tag{color:var(--ink-3);font-size:.94rem;margin-top:6px;min-height:3.2em}
.plan__price{margin:18px 0}
.plan__amt{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px}
.amt--price{font-size:clamp(2.1rem,1.6rem + 1.4vw,2.8rem);font-weight:600;line-height:1.1;letter-spacing:-.01em}
.amt--price .cur{font-size:.42em;font-weight:500;opacity:.75}
.plan__per{color:var(--ink-4);font-size:.92rem}
.plan__note{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:.82rem;color:var(--ink-4);margin-top:6px}
.plan__save{color:var(--income);font-weight:500}
.plan__cta{margin-bottom:10px}
.plan__trial{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--income);margin-bottom:16px}
.plan__trial--pay{color:var(--ink-4)}
.plan__trial .i{width:16px;height:16px}
.plan__feats{display:grid;gap:10px;padding-top:18px;border-top:1px solid var(--line);font-size:.94rem}
.plan__feats li{display:flex;gap:9px;align-items:flex-start}
.plan__feats .i{width:18px;height:18px;margin-top:3px;color:var(--em-text);flex:none}
.plan__apps{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);font-size:.85rem;color:var(--ink-3)}
.plans__more{margin-top:28px;text-align:center}
.plans__more a{display:inline-flex;align-items:center;gap:6px;color:var(--em-text);font-weight:500}
.plans__more .i{width:18px;height:18px}
@media (max-width:960px){.plans{grid-template-columns:1fr;max-width:520px;margin-inline:auto}.plan__tag{min-height:0}}

/* ------------------------------------------------------------------ cards, faq */
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.card{padding:24px;border-radius:20px;background:var(--bg);border:1px solid var(--line)}
.card .ico{margin-bottom:14px}
.card .h3{margin-bottom:6px}
.card p{color:var(--ink-3);font-size:.95rem}
@media (max-width:860px){.cards3{grid-template-columns:1fr}}
.faq-sec__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,72px);align-items:start}
.faq-sec__grid .sec__head{position:sticky;top:var(--stick)}
@media (max-width:860px){.faq-sec__grid{grid-template-columns:1fr}.faq-sec__grid .sec__head{position:static}}
.faq{display:grid;gap:10px}
.faq__i{border-radius:16px;background:var(--card);border:1px solid var(--line);transition:border-color .2s,box-shadow .2s}
.faq__i[open]{border-color:var(--line-2);box-shadow:var(--sh-2)}
.faq__i summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;cursor:pointer;list-style:none;font-weight:500;font-size:1.02rem}
.faq__i summary::-webkit-details-marker{display:none}
.faq__pm{width:20px;height:20px;color:var(--em-text);transition:transform .3s var(--ease)}
.faq__i[open] .faq__pm{transform:rotate(45deg)}
.faq__a{padding:0 20px 18px;color:var(--ink-3)}
.faq__i[open] .faq__a{animation:fadeup .3s var(--ease)}

/* ------------------------------------------------------------------ final CTA band */
.final{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:#0B3B2E}
.final__bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 80% at 85% 10%,rgb(57 146 121/.65),transparent 60%),radial-gradient(50% 70% at 0% 100%,rgb(224 165 38/.22),transparent 60%),var(--grad-em)}
.final__bg::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgb(255 255 255/.06) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255/.06) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 70% 30%,#000,transparent 70%);mask-image:radial-gradient(ellipse at 70% 30%,#000,transparent 70%)}
.final__in{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,5vw,72px);align-items:center;padding-block:clamp(64px,9vw,110px)}
.final .lead{color:#fff;margin-top:12px;max-width:52ch}
.final__logo{perspective:900px}
.final__glass{width:clamp(120px,15vw,200px)}
.micro--light{color:rgb(255 255 255/.85)}
.micro--light .i{color:#EBC572}
@media (max-width:760px){.final__in{grid-template-columns:1fr;text-align:start}.final__glass{width:110px}}

/* ------------------------------------------------------------------ inner pages */
.phead{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(56px,8vw,104px) clamp(40px,6vw,72px)}
.phead__in{position:relative;z-index:1;max-width:860px}
.phead .lead{margin-top:16px;max-width:56ch}
.phead--c .phead__in{margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.chips a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:.9rem;font-weight:500;transition:border-color .2s,transform .2s var(--ease)}
.chips a:hover{border-color:var(--em-light);transform:translateY(-1px)}
.chips .bi,.chips .robot{width:18px;height:18px;color:var(--em-text)}
.subnav{position:sticky;top:calc(var(--stick) - 14px);transition:top .25s var(--ease);z-index:20;background:var(--hdr);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-block:1px solid var(--line)}
.subnav__in{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding-block:10px}
.subnav__in::-webkit-scrollbar{display:none}
.subnav a{flex:none;padding:7px 14px;border-radius:999px;font-size:.88rem;font-weight:500;color:var(--ink-3);transition:background-color .2s,color .2s}
.subnav a:hover{background:var(--bg-3)}
.subnav a.is-on{background:var(--mint);color:var(--em-text)}
.feat{padding-block:clamp(48px,7vw,96px);border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--hh) + 60px)}
.feat:nth-child(even){background:var(--bg-2)}
.feat__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:center}
.feat:nth-child(even) .feat__copy{order:2}
.feat__copy .h2{margin:12px 0}
.feat__copy>p{color:var(--ink-3);font-size:1.05rem;margin-bottom:20px}
.feat__needs{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:var(--gold-text);background:var(--gold-soft);border-radius:999px;padding:3px 12px;margin-inline-start:8px;vertical-align:middle}
.feat__vis{min-width:0}
.feat__vis .mock{--mf:clamp(10px,.95vw,14px);font-size:var(--mf);background:var(--m-bg);border-radius:1.1em;border:1px solid var(--line);box-shadow:var(--sh-3)}
@media (max-width:1023px){.feat__grid{grid-template-columns:1fr}.feat:nth-child(even) .feat__copy{order:0}.feat__vis .mock{--mf:clamp(9.6px,2.7vw,13px)}}
.shot{margin:0;border-radius:16px;overflow:hidden;background:var(--m-bg);border:1px solid rgb(14 27 44/.1);box-shadow:var(--sh-3);position:relative}
.shot__bar{height:34px;display:flex;align-items:center;gap:10px;padding:0 14px;background:linear-gradient(var(--m-bar-a),var(--m-bar-b));border-bottom:1px solid var(--m-line);font-size:13px}
.shot__bar .win__dots i{width:10px;height:10px}
.shot__bar .win__url{font-size:11px}
.shot img,.shot video{width:100%;height:auto;display:block;background:var(--m-bg-2)}
.shot img{aspect-ratio:1280/800}
.shot--tall{max-width:360px;margin-inline:auto}
.shot__cap{display:flex;align-items:center;gap:6px;justify-content:center;margin-top:10px;font-size:.8rem;color:var(--ink-4);text-align:center}
.shot__cap .i{width:12px;height:12px;color:var(--em-text)}
.clip__btn{position:absolute;bottom:12px;inset-inline-end:12px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgb(14 27 44/.72);color:#fff;backdrop-filter:blur(6px)}
.clip__btn .i{width:16px;height:16px}
.clip__btn .i-play{display:none}
.shot--clip.is-paused .clip__btn .i-play{display:block}
.shot--clip.is-paused .clip__btn .i-pause{display:none}
.everyone{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.everyone li{padding:18px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.everyone .ico{width:38px;height:38px;margin-bottom:10px}
.everyone b{display:block;font-weight:600;margin-bottom:4px}
.everyone p{color:var(--ink-3);font-size:.9rem}
@media (max-width:960px){.everyone{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.everyone{grid-template-columns:1fr}}

/* pricing page */
.pp-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 18px;margin-top:24px}
.pp-cur{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;color:var(--ink-3);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 14px}
.pp-cur .flag{width:20px;height:20px}
.pp-note{text-align:center;color:var(--ink-4);font-size:.86rem;margin-top:22px}
.builder{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px;align-items:start}
.builder__apps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.addon{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:14px 16px;border-radius:16px;background:var(--card);border:1px solid var(--line);cursor:pointer;transition:border-color .2s,background-color .2s}
.addon input{position:absolute;opacity:0;pointer-events:none}
.addon__box{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--line-2);display:grid;place-items:center;color:#fff;transition:background-color .2s,border-color .2s}
.addon__box .i{width:14px;height:14px;opacity:0}
.addon input:checked~.addon__box{background:var(--em);border-color:var(--em)}
.addon input:checked~.addon__box .i{opacity:1}
.addon input:focus-visible~.addon__box{outline:2px solid var(--em-light);outline-offset:2px}
.addon:has(input:checked){border-color:var(--em-light);background:var(--mint)}
.addon.is-inc{cursor:default}
.addon b{display:block;font-weight:600;font-size:.95rem}
.addon small{display:block;color:var(--ink-4);font-size:.78rem;line-height:1.4}
.addon__p{text-align:end;font-size:.88rem;font-weight:500;white-space:nowrap}
.addon__p small{display:inline;font-weight:400}
.sum{position:sticky;top:var(--stick);padding:22px;border-radius:20px}
.sum__plans{display:grid;gap:6px;margin:12px 0 16px}
.sum__plans label{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);cursor:pointer;font-weight:500;font-size:.94rem}
.sum__plans input{accent-color:var(--em);width:18px;height:18px}
.sum__plans label:has(input:checked){border-color:var(--em);background:var(--mint)}
.sum__row{display:flex;justify-content:space-between;gap:10px;font-size:.92rem;color:var(--ink-3);padding:4px 0}
.sum__total{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:10px 0 16px;padding-top:12px;border-top:1px solid var(--line);font-weight:600}
.sum__total .amt{font-size:1.6rem;color:var(--em-text)}
.sum__fine{font-size:.78rem;color:var(--ink-4);margin-top:10px}
@media (max-width:960px){.builder{grid-template-columns:1fr}.sum{position:static}}
@media (max-width:560px){.builder__apps{grid-template-columns:1fr}}
.cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:.94rem;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.cmp th,.cmp td{padding:13px 16px;text-align:center;border-bottom:1px solid var(--line)}
.cmp th:first-child,.cmp td:first-child{text-align:start}
.cmp thead th{background:var(--bg-3);font-weight:600}
.cmp tr:last-child td{border-bottom:0}
.cmp .i{width:20px;height:20px;color:var(--em-text);margin-inline:auto}
.cmp .no{color:var(--ink-4)}
.cmp-wrap{overflow:visible}
.cmpc{display:none}
@media (min-width:900px){
	.cmp-wrap{overflow:visible}
	.cmp{overflow:visible}
	.cmp thead th{position:sticky;top:var(--stick);z-index:2;transition:top .25s var(--ease);box-shadow:0 1px 0 var(--line)}
	.cmp thead th:first-child{border-start-start-radius:17px}
	.cmp thead th:last-child{border-start-end-radius:17px}
	:root[data-theme="dark"] .cmp thead th{background:#17283D}
}
/* phones / tablets: one card per plan with a vertical feature list (no sideways table) */
@media (max-width:899px){
	.cmp-wrap{display:none}
	.cmpc{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
	.cmpc__card{padding:18px;border-radius:22px;background:var(--glass);box-shadow:0 0 0 1px var(--glass-line) inset,var(--sh-2);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4)}
	.cmpc__card.is-hi{box-shadow:0 0 0 1.5px var(--em-light) inset,var(--sh-2)}
	.cmpc__card h3{font-size:1.15rem;font-weight:700;margin-bottom:10px}
	.cmpc__card dl{display:grid;grid-template-columns:minmax(0,1fr) auto;margin:0}
	.cmpc__card dt,.cmpc__card dd{margin:0;padding:9px 0;border-bottom:1px solid var(--line);font-size:.9rem;min-width:0}
	.cmpc__card dt{color:var(--ink-2);overflow-wrap:anywhere}
	.cmpc__card dd{text-align:end;font-weight:600;padding-inline-start:12px}
	.cmpc__card dt:nth-last-child(2),.cmpc__card dd:last-child{border-bottom:0}
	.cmpc__card dd .i{width:20px;height:20px;color:var(--em-text);display:inline-block;vertical-align:middle}
	.cmpc__card dd .no{font-weight:500;font-size:.84rem;color:var(--ink-4)}
}

/* contact */
.contact__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,48px);align-items:start}
.form{padding:clamp(20px,3vw,32px);border-radius:22px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-2)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{display:grid;gap:6px;margin-bottom:14px}
.fld>span{font-size:.88rem;font-weight:500;color:var(--ink-2)}
.fld input,.fld textarea{width:100%;border:1px solid var(--field-line);border-radius:12px;background:var(--bg);padding:12px 14px;font-size:1rem;outline:none;transition:border-color .2s,box-shadow .2s}
.fld textarea{min-height:130px;resize:vertical}
.fld input:focus,.fld textarea:focus{border-color:var(--em-light);box-shadow:0 0 0 3px rgb(57 146 121/.18);background:var(--card)}
.fld input[aria-invalid="true"],.fld textarea[aria-invalid="true"]{border-color:var(--stamp)}
.topics{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;border:0;padding:0}
.topics legend{font-size:.88rem;font-weight:500;color:var(--ink-2);margin-bottom:8px;padding:0}
.topics label{position:relative}
.topics input{position:absolute;opacity:0}
.topics span{display:inline-flex;min-height:44px;align-items:center;padding:8px 14px;border-radius:999px;border:1px solid var(--field-line);font-size:.9rem;cursor:pointer;transition:all .2s}
.topics input:checked+span{background:var(--mint);border-color:var(--em-light);color:var(--em-text);font-weight:500}
.topics input:focus-visible+span{outline:2px solid var(--em-light);outline-offset:2px}
.hp{position:absolute!important;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.form__msg{margin-top:12px;padding:12px 14px;border-radius:12px;font-size:.92rem}
.form__msg.is-err{background:var(--stamp-soft);color:var(--stamp)}
.form__ok{text-align:center;padding:30px 10px}
.form__ok .i{width:56px;height:56px;margin:0 auto 14px;color:#fff;background:var(--em);border-radius:50%;padding:12px;animation:popin .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes popin{from{transform:scale(.4);opacity:0}}
.channels{display:grid;gap:12px}
.channel{display:flex;gap:14px;align-items:center;padding:16px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.channel small{display:block;color:var(--ink-4);font-size:.8rem}
.channel b{font-weight:500}
@media (max-width:860px){.contact__grid{grid-template-columns:1fr}.form__row{grid-template-columns:1fr}}

/* prose (refund, security list) */
.prose{max-width:min(780px,70ch)}
.prose h2{font-size:1.25rem;font-weight:600;margin:32px 0 10px}
.prose p{color:var(--ink-3);margin-bottom:12px}
.draft{display:flex;gap:12px;align-items:flex-start;padding:14px 18px;border-radius:14px;background:var(--gold-soft);border:1px solid rgb(224 165 38/.35);color:var(--gold-text);margin-bottom:24px;font-size:.94rem}
.secgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.secgrid .card{background:var(--card)}
@media (max-width:760px){.secgrid{grid-template-columns:1fr}}
.matrix{border-radius:20px;overflow:hidden}
.principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:860px){.principles{grid-template-columns:1fr}}
.about__hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:center}
.about__logo{max-width:280px;margin-inline:auto;perspective:900px;width:100%}
@media (max-width:860px){.about__hero{grid-template-columns:1fr}.about__logo{max-width:170px}}
.notfound{min-height:calc(100svh - var(--hh) - 40px);display:grid;place-items:center;text-align:center}
.notfound__code{font-size:clamp(4rem,10vw,7rem);font-weight:600;line-height:1;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ------------------------------------------------------------------ footer + phone bar */
.ftr{background:var(--bg-2);border-top:1px solid var(--line);padding-top:clamp(48px,6vw,72px);padding-bottom:calc(20px + env(safe-area-inset-bottom))}
.ftr__grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:32px}
.ftr__slogan{margin-top:14px;font-weight:600;color:var(--gold-text)}
.ftr__about{color:var(--ink-3);font-size:.92rem;margin-top:6px;max-width:36ch}
.ftr__col h2{font-size:.95rem;font-weight:600;margin-bottom:12px}
.ftr__col ul{display:grid;gap:8px;font-size:.92rem;color:var(--ink-3)}
.ftr__col a:hover{color:var(--em-text)}
.ftr__apps{grid-template-columns:1fr 1fr;column-gap:14px}
.ftr__contact{display:inline-flex;align-items:center;gap:8px}
.ftr__contact .i{width:16px;height:16px}
.ftr__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:.85rem;color:var(--ink-4)}
.ftr__ctry{display:inline-flex;align-items:center;gap:8px}
.ftr__ctry a{color:var(--em-text)}
@media (max-width:860px){.ftr__grid{grid-template-columns:1fr 1fr}.ftr__brand{grid-column:1/-1}}
@media (max-width:480px){.ftr__grid{grid-template-columns:1fr}}
.mbar{display:none}
@media (max-width:720px){
	.mbar{position:fixed;inset-inline:0;bottom:0;z-index:40;display:grid;grid-template-columns:1fr 1.4fr;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--hdr);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .35s var(--ease)}
	.mbar.is-on{transform:none}
	.ftr{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
}

/* ------------------------------------------------------------------ reveals: CSS scroll-driven first, IO fallback */
@media (prefers-reduced-motion:no-preference){
	@supports (animation-timeline:view()){
		.rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 30vh}
		.appgrid[data-assemble] .app{animation:asm linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
		.how__line{animation:hw linear both;animation-timeline:view();animation-range:entry 30% cover 55%}
	}
	@supports not (animation-timeline:view()){
		.js .rv{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
		.js .rv.is-in{opacity:1;transform:none}
		.js .appgrid[data-assemble] .app{opacity:0;transform:translate3d(var(--ax,0),var(--ay,40px),0) rotate(var(--ar,0deg)) scale(.85);transition:opacity .6s var(--ease),transform .9s var(--ease)}
		.js .appgrid[data-assemble].is-in .app{opacity:1;transform:none}
	}
	.js .split .w{display:inline-block;opacity:0;transform:translateY(.35em);transition:opacity .45s var(--ease),transform .55s var(--ease)}
	.js .split.is-in .w{opacity:1;transform:none}
}
@keyframes rv{from{opacity:0;transform:translateY(22px)}}
@keyframes hw{from{--hw:0}}
@property --hw{syntax:"<number>";inherits:true;initial-value:1}
@keyframes asm{from{opacity:0;transform:translate3d(var(--ax,0),var(--ay,40px),0) rotate(var(--ar,0deg)) scale(.85)}}
.app:nth-child(1){--ax:-60px;--ay:50px;--ar:-8deg}.app:nth-child(2){--ax:40px;--ay:80px;--ar:6deg}.app:nth-child(3){--ax:90px;--ay:30px;--ar:10deg}
.app:nth-child(4){--ax:-90px;--ay:60px;--ar:-6deg}.app:nth-child(5){--ax:20px;--ay:110px;--ar:8deg}.app:nth-child(6){--ax:70px;--ay:70px;--ar:-10deg}
.app:nth-child(7){--ax:-40px;--ay:120px;--ar:5deg}.app:nth-child(8){--ax:50px;--ay:90px;--ar:-7deg}.app:nth-child(9){--ax:-70px;--ay:140px;--ar:9deg}
.app:nth-child(10){--ax:80px;--ay:120px;--ar:-5deg}.app:nth-child(11){--ax:0;--ay:150px;--ar:4deg}
@media (max-width:720px){.app{--ax:0!important;--ar:0deg!important}}
.split .w:nth-child(2){transition-delay:.03s}.split .w:nth-child(3){transition-delay:.06s}.split .w:nth-child(4){transition-delay:.09s}.split .w:nth-child(5){transition-delay:.12s}.split .w:nth-child(6){transition-delay:.15s}.split .w:nth-child(7){transition-delay:.18s}.split .w:nth-child(n+8){transition-delay:.21s}

/* payment return page (www/payment/return) on this layout */
.night{position:relative;padding-block:60px}
.phero .wrap{position:relative;z-index:1}
.glows{display:none}


/* role permission card */
.perm{padding:20px;border-radius:20px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-3)}
.perm__h{display:flex;align-items:center;gap:8px;padding-bottom:12px;margin-bottom:6px;border-bottom:1px dashed var(--line);color:var(--ink-3);font-size:.92rem}
.perm__h b{color:var(--ink)}
.perm__h .bi{color:var(--em-text)}
.perm__l{display:grid;gap:4px}
.perm__l li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:9px 10px;border-radius:12px;font-size:.94rem;transition:background-color .3s,opacity .3s}
.perm__l li.is-on{background:var(--mint)}
.perm__l li.is-off{color:var(--ink-4)}
.perm__l li.is-off .perm__ico{opacity:.6}
.perm__ico{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--bg-3);color:var(--ink-3)}
.perm__ico .bi{width:18px;height:18px}
.is-on .perm__ico{background:var(--card);color:var(--em-text)}
.perm__st{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;color:var(--ink-4);white-space:nowrap}
.perm__st .i{width:14px;height:14px}
.perm__st--on{color:var(--em-text);font-weight:500}
.tp:not([hidden]) .perm__l li{animation:fadeup .4s var(--ease) both}
.tp:not([hidden]) .perm__l li:nth-child(2){animation-delay:.05s}.tp:not([hidden]) .perm__l li:nth-child(3){animation-delay:.1s}.tp:not([hidden]) .perm__l li:nth-child(4){animation-delay:.15s}.tp:not([hidden]) .perm__l li:nth-child(5){animation-delay:.2s}.tp:not([hidden]) .perm__l li:nth-child(6){animation-delay:.25s}
@media (max-width:480px){.perm__st{font-size:0;gap:0}.perm__st .i{width:16px;height:16px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mock-box .mock{--mf:clamp(10px,min(.98vw,1.6vh),14px);font-size:var(--mf);background:var(--m-bg);border-radius:1.1em;border:1px solid var(--line);box-shadow:var(--sh-3)}
@media (max-width:1023px){.mock-box .mock{--mf:clamp(9.6px,2.7vw,13px)}}
.fhead__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,56px);align-items:center}
@media (max-width:1023px){.fhead__grid{grid-template-columns:1fr}}
.sec--tight{padding-top:clamp(20px,3vw,40px)}
.tp--static{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(24px,4vw,56px);align-items:center}
.tp--static .lead{margin-top:12px}
@media (max-width:860px){.tp--static{grid-template-columns:1fr}}
.about__story{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,64px);align-items:center}
.about__story .lead{margin-top:12px}
.checke{width:clamp(110px,14vw,170px);border-radius:28%;box-shadow:var(--sh-3)}
.checke__tick{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.2s var(--ease-io) .3s}
.js .about__mark:not(.is-in) .checke__tick{stroke-dashoffset:1}
@media (max-width:640px){.about__story{grid-template-columns:1fr}}
.form__country{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:.86rem;color:var(--ink-4);margin:0 0 14px}
.form__country b{color:var(--ink-2)}
.draft .i{width:20px;height:20px;flex:none;margin-top:2px}
.notfound .phead__in{margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.notfound .ctas{justify-content:center}
.plans--teaser .plan__feats li:nth-child(n+4){display:none}
.plans--teaser .plan{padding:22px}
.plans--teaser .plan__price{margin:12px 0}
.plans-sec{padding-block:clamp(40px,min(6vw,7vh),80px)}
.plans--teaser .plan__tag{min-height:0}
.plans--teaser .plan__feats{gap:8px;padding-top:14px}
.plans--teaser+.plans__more{margin-top:16px}
.shot--tall{width:min(360px,calc((100svh - 260px) * .4644));max-width:100%}
.pp-plans{padding-top:12px}
.cmp th,.cmp td{padding:10px 16px}
.secgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
.secgrid .card{padding:20px}
.secgrid .card p{font-size:.9rem}
@media (max-width:1100px){.secgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.secgrid{grid-template-columns:1fr}}
.feat--all .everyone li{padding:16px}
.plans-sec .sec__head{margin-bottom:18px}
.plans-sec .cyc{margin-top:14px}
.plans--teaser .plan__trial{margin-bottom:10px}
.hero__glass .glass3d__shadow{display:none}
.hero__glass .glass3d__body{filter:drop-shadow(0 14px 18px rgb(9 79 60/.35))}
.wrap.phead__in{max-width:none}
.phead__in>.h1{max-width:min(100%,10.4em)}
.phead__in>.lead{max-width:56ch}
/* short laptop screens (1366×768): every section still fits */
@media (min-width:1024px) and (max-height:820px){
	.sec{padding-block:clamp(36px,5.5vh,60px)}
	.sec__head{margin-bottom:18px}
	.h2{font-size:clamp(1.5rem,1rem + 1.5vw,2.3rem)}
	.kick{margin-bottom:12px}
	.perm{padding:14px 16px}
	.perm__l li{padding:6px 10px}
	.tabs__list{margin-bottom:16px}
	.plans--teaser .plan__feats li:nth-child(n+3){display:none}
	.plans--teaser .plan__tag{display:none}
	.facts{margin-top:14px}
	.flags__grid a{padding:5px 2px}
	.run__lead{margin:8px 0 14px}
}
.shot--tall{width:min(340px,calc((100svh - 360px) * .4644))}
.sec--cmp{padding-block:clamp(40px,6vh,64px)}
.sec--cmp .sec__head{margin-bottom:16px}
.cmp{font-size:.9rem}
.cmp th,.cmp td{padding:8px 16px}
.pp-plans{padding-bottom:clamp(40px,7vh,80px)}

/* ------------------------------------------------------------------ sticky scroll stories (shared): wide screens only */
.story__stage{--sf:clamp(10px,min(.92vw,1.45vh),14px)}
@media (min-width:1024px) and (min-height:600px){
	.story__steps{padding-block:4svh 18svh}
}
@media (max-width:1023px),(max-height:599px){
	.story__grid{grid-template-columns:1fr}
	.story__stage{display:none}
	.step{min-height:0;opacity:1;padding-block:18px 30px}
	.step__mock{display:block;margin-top:18px;font-size:clamp(9.6px,2.84vw,13px);background:var(--m-bg);color:var(--m-ink);border-radius:1.1em;border:1px solid var(--line);box-shadow:var(--sh-2);overflow:hidden}
}

/* the apps tour: text steps scroll past one sticky 3D frame that swaps clips / screens */
.scrolly{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px)}
.scrolly__stage,.story__stage{align-self:stretch}
.scrolly__steps{display:grid;padding-block:2svh 20svh}
.sstep{min-height:clamp(260px,44svh,420px);display:flex;flex-direction:column;justify-content:center;padding-block:20px}
.sstep:not(.is-on) .h3,.sstep:not(.is-on) p,.sstep:not(.is-on) .ticks li{color:var(--ink-4)}
.sstep:not(.is-on) .ico{filter:saturate(.3)}
.sstep:first-child{justify-content:flex-start;padding-top:8px}
.sstep.is-on{opacity:1}
.sstep__txt{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:6px;align-items:center}
.sstep__txt .ico{grid-row:span 2}
.sstep__txt p{color:var(--ink-3);font-size:.98rem}
.sstep__txt .ticks{grid-column:1/-1;margin-top:10px}
.ticks--sm{gap:8px;font-size:.92rem}
.ticks--sm .i{width:18px;height:18px}
.sstep__media{display:none}
.scrolly__sticky{position:sticky;top:var(--stick);display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start}
.arail{position:relative;display:grid;gap:6px;padding:6px;border-radius:18px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--sh-2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.arail__i{position:relative;z-index:1;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:var(--ink-4);transition:background-color .25s,color .25s,transform .25s var(--ease)}
.arail__i>span:first-child{display:grid;place-items:center;width:100%;height:100%;border-radius:inherit;background:none}
.arail__i .bi,.arail__i .robot{width:20px;height:20px}
.arail__i:hover{transform:scale(1.06);color:var(--ink)}
.arail__i.is-on{color:var(--em-text);background:var(--mint);box-shadow:0 0 0 1px rgb(14 122 92/.25) inset,0 6px 16px -8px rgb(14 122 92/.6)}
.arail__bar{position:absolute;inset-block:10px;inset-inline-end:-6px;width:3px;border-radius:3px;background:var(--line);overflow:hidden}
.arail__bar i{position:absolute;inset:0;background:linear-gradient(var(--em-light),var(--gold));transform-origin:top;transform:scaleY(var(--sp,.1));transition:transform .5s var(--ease)}
.frame3d{position:relative;border-radius:16px;background:var(--m-bg);border:1px solid rgb(14 27 44/.1);box-shadow:var(--sh-3);perspective:1600px;transform:perspective(1600px) rotateX(var(--trx,0deg)) rotateY(var(--try,0deg));transition:transform .5s var(--ease)}
.frame3d .shot__bar{border-radius:16px 16px 0 0}
.frame3d__panels{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:0 0 16px 16px;background:var(--m-bg-2);transform-style:preserve-3d}
.apanel{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:rotateY(-10deg) translateZ(-60px) scale(.96);transition:opacity .5s var(--ease),transform .7s var(--ease);backface-visibility:hidden}
[dir="rtl"] .apanel{transform:rotateY(10deg) translateZ(-60px) scale(.96)}
.apanel.is-on{opacity:1;transform:none}
.amedia,.amedia img{display:block;width:100%;height:100%;object-fit:contain;background:var(--m-bg-2)}
.fchip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;font-size:.82rem;font-weight:500;color:var(--ink);white-space:nowrap;pointer-events:none}
.fchip .bi,.fchip .i{width:16px;height:16px;color:var(--em-text)}
.fchip--a{top:-18px;inset-inline-start:22px}
.fchip--b{bottom:-46px;inset-inline-end:24px}
.fchip--c{top:-18px;inset-inline-end:110px;font-weight:600;color:var(--em-text)}
@media (prefers-reduced-motion:reduce){.apanel{transition:none;transform:none}}
@media (max-width:1023px),(max-height:599px){
	.scrolly{grid-template-columns:1fr}
	.scrolly__stage{display:none}
	.scrolly__steps{padding:0;gap:26px}
	.sstep{min-height:0;opacity:1;padding:0}
	.sstep__media{display:block;margin-top:14px}
}
.shot--inline .shot__box{aspect-ratio:16/10;background:var(--m-bg-2)}
.shot--inline .amedia{width:100%;height:100%}

/* ------------------------------------------------------------------ glass + depth everywhere (tasteful) */
.card,.facts>div,.faq__i,.channel,.everyone li,.addon,.perm{background:var(--glass);border-color:var(--glass-line);box-shadow:0 1px 0 rgb(255 255 255/.7) inset,var(--sh-2);backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4)}
:root[data-theme="dark"] .card,:root[data-theme="dark"] .facts>div,:root[data-theme="dark"] .faq__i,:root[data-theme="dark"] .channel,:root[data-theme="dark"] .everyone li,:root[data-theme="dark"] .addon,:root[data-theme="dark"] .perm,:root[data-theme="dark"] .plan,:root[data-theme="dark"] .form{border-color:#24364D;box-shadow:0 1px 0 rgb(255 255 255/.05) inset,0 30px 60px -30px rgb(0 0 0/.7)}
:root[data-theme="dark"] .plan,:root[data-theme="dark"] .form{background:linear-gradient(180deg,rgb(23 40 61/.9),rgb(14 27 44/.75))}
.card,.plan,.everyone li{transform:perspective(900px) rotateX(var(--trx,0deg)) rotateY(var(--try,0deg));transition:transform .35s var(--ease),box-shadow .3s,border-color .3s}
.card:hover,.everyone li:hover{border-color:rgb(57 146 121/.45)}
/* animated gradient border on the highlighted plan and the closing band */
.plan--hi::after,.final__in::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:conic-gradient(from var(--ang,0deg),transparent 0 60%,#E0A526 78%,#7FD8B8 88%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 7s linear 3;pointer-events:none}
.final__logo{position:relative}
.coin--f1{inset-inline-end:-18%;top:-6%}
.coin--f2{inset-inline-start:-14%;bottom:4%;width:32px;height:32px}
/* depth of field: headings and frames come into focus as they enter */
@media (prefers-reduced-motion:no-preference){
	@supports (animation-timeline:view()){
		.sec__head{animation:dof linear both;animation-timeline:view();animation-range:entry 0% cover 25%}
	}
}
@keyframes dof{from{opacity:.2;filter:blur(6px);transform:scale(.97)}}
:root[data-theme="dark"] .sec--white{background:rgb(14 27 44/.45)}
:root[data-theme="dark"] .trust,:root[data-theme="dark"] .ftr{background:rgb(14 27 44/.65);border-color:#24364D}
:root[data-theme="dark"] .kick{color:#E3F2EC;background:rgb(14 122 92/.15);border-color:rgb(57 146 121/.45)}
:root[data-theme="dark"] .hl{background:linear-gradient(100deg,#EBC572 0%,#E0A526 40%,#fff3d1 50%,#E0A526 60%,#B3841E 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;animation:goldsweep 10s linear 3}
@keyframes goldsweep{to{background-position:-250% 0}}

/* dark mode: real screenshots and clips (recorded in the app's light theme) sit in a dark glass bezel, softly dimmed with a vignette — never inverted */
:root[data-theme="dark"] .shot,:root[data-theme="dark"] .frame3d{background:#17283D;border-color:#24364D;box-shadow:0 1px 0 rgb(255 255 255/.05) inset,0 40px 80px -30px rgb(0 0 0/.8),0 0 60px -20px rgb(14 122 92/.35)}
:root[data-theme="dark"] .shot img,:root[data-theme="dark"] .shot video,:root[data-theme="dark"] .amedia,:root[data-theme="dark"] .amedia img{filter:brightness(.86) contrast(1.04) saturate(.95);background:#17283D}
:root[data-theme="dark"] .frame3d__panels,:root[data-theme="dark"] .shot__box{background:#17283D}
.frame3d__panels::after,.shot__box::after,.shot picture::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgb(14 27 44/.06)}
:root[data-theme="dark"] .frame3d__panels::after,:root[data-theme="dark"] .shot__box::after{box-shadow:inset 0 0 40px 6px rgb(14 27 44/.55),inset 0 0 0 1px rgb(255 255 255/.06)}
.shot__box,.shot picture{position:relative;display:block}
:root[data-theme="dark"] .shot picture::after{box-shadow:inset 0 0 40px 6px rgb(14 27 44/.55),inset 0 0 0 1px rgb(255 255 255/.06)}
:root[data-theme="dark"] .mock-box .mock,:root[data-theme="dark"] .feat__vis .mock,:root[data-theme="dark"] .step__mock,:root[data-theme="dark"] .tp__vis .mock{border-color:#24364D}
/* phones: details in the middle (owner rule); long legal text keeps start alignment inside a centred column */
@media (max-width:767px){
	.sec__head,.phead__in,.ctry__copy,.apps__copy,.final__copy,.feat__copy,.tp,.ftr__brand{text-align:center;margin-inline:auto}
	.sec__head,.phead__in,.ctry__copy,.apps__copy,.final__copy,.feat__copy{display:flex;flex-direction:column;align-items:center}
	.sec__head .lead,.phead .lead,.ctry__copy .lead,.apps__copy .lead,.final .lead,.feat__copy>p,.ftr__about{margin-inline:auto}
	.ctas,.chips,.micro,.pp-tools,.trust__in,.tabs__list{justify-content:center}
	.trust__in{flex-direction:column;align-items:center;text-align:center}
	.ticks{justify-items:start;text-align:start;margin-inline:auto;max-width:34ch}
	.feat__copy .ticks,.sstep__txt .ticks{margin-inline:auto}
	.sstep__txt{grid-template-columns:1fr;justify-items:center;text-align:center}
	.sstep__txt .ico{grid-row:auto}
	.step{text-align:center;align-items:center}
	.step p{margin-inline:auto}
	.card,.everyone li,.facts>div,.channel{text-align:center}
	.card .ico,.everyone .ico{margin-inline:auto}
	.facts dt{justify-content:center}
	.channel{flex-direction:column}
	.app a{justify-items:center;text-align:center}
	.plan__head,.plan__tag,.plan__price,.plan__trial{text-align:center;justify-content:center}
	.plan__amt,.plan__note{justify-content:center}
	.plan__feats{justify-items:start}
	.how__line li{text-align:center}
	.how__n{margin-inline:auto}
	.final__in{justify-items:center;text-align:center}
	.final__logo{margin-inline:auto}
	.prose{text-align:start;margin-inline:auto}
	.faq__i summary{text-align:start}
	.ftr__grid{text-align:center}
	.ftr__col ul{justify-items:center}
	.ftr__bottom{justify-content:center;text-align:center}
	.calc,.flags,.perm,.shot,.mock-box,.step__mock,.feat__vis{margin-inline:auto}
	.form{text-align:start}
	.cmp-wrap{margin-inline:auto}
}
/* section headers centred (owner); split layouts keep their start-aligned text column */
.sec__head{margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.sec__head .lead{margin-inline:auto}
.faq-sec__grid .sec__head{margin-inline:0;text-align:start;align-items:flex-start}
@media (max-width:767px){.faq-sec__grid .sec__head{margin-inline:auto;text-align:center;align-items:center}}
.ai__dots{display:none}
.pl__chart.on .pl__dot{animation:ping 1s var(--ease)}
@keyframes ping{50%{r:7}}

/* the closing call to action: the waiting page's contained card with the rotating gold border, in both themes */
.final{background:none;color:#fff;padding:clamp(40px,7vw,96px) var(--gut);overflow:visible}
.final__bg{display:none}
.final__in{position:relative;isolation:isolate;width:min(1000px,100%);margin-inline:auto;border-radius:36px;overflow:hidden;padding:clamp(32px,5vw,64px);background:radial-gradient(600px 300px at 50% 0%,rgb(57 146 121/.45),transparent 70%),linear-gradient(160deg,#094F3C,#06362a);box-shadow:0 50px 120px -40px rgb(14 122 92/.7)}
.final__in::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgb(255 255 255/.05) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255/.05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 70% 30%,#000,transparent 70%);mask-image:radial-gradient(ellipse at 70% 30%,#000,transparent 70%)}
.final__in::after{padding:2px;opacity:1}
.final__glass{width:clamp(96px,9vw,140px)}

/* dark: ONE night sky — sections are transparent over the fixed canvas, separated by emerald hairlines, with local glows */
:root[data-theme="dark"] .sec,:root[data-theme="dark"] .sec--white,:root[data-theme="dark"] .trust,:root[data-theme="dark"] .feat,:root[data-theme="dark"] .feat:nth-child(even),:root[data-theme="dark"] .phead,:root[data-theme="dark"] .subnav{background:transparent}
:root[data-theme="dark"] .subnav{background:rgb(14 27 44/.72)}
:root[data-theme="dark"] .trust{border-color:transparent}
:root[data-theme="dark"] .sec+.sec::before,:root[data-theme="dark"] .feat+.feat::before{content:"";position:absolute;top:0;inset-inline:10%;height:1px;background:linear-gradient(90deg,transparent,#24364D 20%,rgb(57 146 121/.5) 50%,#24364D 80%,transparent)}
:root[data-theme="dark"] .feat{position:relative;border-bottom:0}
:root[data-theme="dark"] .sec>.wrap{position:relative}
:root[data-theme="dark"] .sec>.wrap::before{content:"";position:absolute;inset:auto 0 -10% 0;height:60%;z-index:-1;background:radial-gradient(50% 60% at 30% 50%,rgb(14 122 92/.16),transparent 70%);pointer-events:none}
:root[data-theme="dark"] .ftr{background:transparent;border-top-color:#24364D}
:root[data-theme="dark"] .frame3d,:root[data-theme="dark"] .dev .win{box-shadow:0 1px 0 rgb(255 255 255/.06) inset,0 40px 90px -30px rgb(0 0 0/.85),0 0 120px -30px rgb(14 122 92/.55)}
@media (max-width:640px){.night__grain{display:none}}

/* the plan builder's custom toggles (no native inputs, owner rule) */
.addon{width:100%;text-align:start;font:inherit;color:inherit}
.addon[aria-checked="true"]{border-color:var(--em);background:var(--mint)}
.addon[aria-checked="true"] .addon__box{background:var(--em);border-color:var(--em)}
.addon[aria-checked="true"] .addon__box .i{opacity:1;color:#E0A526}
.addon__box{border-color:var(--field-line)}
.addon.is-inc .addon__box{visibility:hidden}
.addon__inc{display:inline-flex;align-items:center;gap:4px;font-size:.8125rem;font-weight:600;color:var(--em-text);background:var(--mint);border-radius:999px;padding:3px 10px;white-space:nowrap}
.addon__inc .i{width:14px;height:14px}
.addon small{font-size:.8125rem}
.builder__apps{grid-auto-rows:1fr}
.sum__plans [role="radio"]{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);font-weight:500;font-size:.94rem;text-align:start;width:100%}
.sum__pt{flex:1}
.sum__dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--field-line);flex:none}
.sum__plans [aria-checked="true"]{border-color:var(--em);background:var(--mint)}
.sum__plans [aria-checked="true"] .sum__dot{border:5px solid var(--em)}
.pp-note--cur{color:var(--ink-2);font-weight:500}
.facts__wide{grid-column:1/-1}
/* pricing: the plans overlap the page head so prices and CTAs are above the fold */
.pg-pricing .phead{padding-bottom:clamp(120px,16vh,150px)}
.pp-plans{margin-top:clamp(-130px,-14vh,-100px);padding-top:0;position:relative;z-index:2}
/* crowned plan */
.plan--hi{transform:perspective(900px) translateY(-12px) rotateX(var(--trx,0deg)) rotateY(var(--try,0deg));box-shadow:0 40px 80px -30px rgb(9 79 60/.45)}
.plan--hi::before{display:none}
.plans{align-items:stretch;padding-top:14px}
.plan__tag{min-height:2.9em}
.plans__more a{color:var(--em-text);font-weight:500}
/* reveal sooner: never leave text half-faded in view */
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){.rv{animation-range:entry 0% entry 70%}}}
.phead .rv{animation:none!important;opacity:1!important;transform:none!important}
/* English display type */
[lang="en"] .h1{line-height:1.04;letter-spacing:-.03em}
[lang="en"] .h2{line-height:1.12;letter-spacing:-.02em}
.faq-sec .sec__head .lnk{margin-top:16px;display:inline-flex}
/* phones: trust strip as wrapping chips (nothing on a phone scrolls sideways) */
@media (max-width:720px){
	.trust__in{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px}
	.trust li{padding:7px 12px;border-radius:999px;background:var(--bg-3);font-size:.86rem}
	.feat__copy .ticks li:nth-child(n+4){display:none}
	html{scroll-padding-bottom:calc(76px + env(safe-area-inset-bottom))}
	.ftr__col ul{gap:2px}.ftr__col a{display:inline-block;padding:10px 0}
	.cp__list a{padding:10px}
	.subnav a{padding:11px 14px}
}

.mbar{visibility:hidden;transition:transform .35s var(--ease),visibility 0s .35s}
.mbar.is-on{visibility:visible;transition-delay:0s}
.clip__btn{width:44px;height:44px}
.flags__grid a,.tag,.cp__cur,.mega__app small,.app small{font-size:.8125rem}
.sheet-open body{overflow:hidden}
.mnav{overscroll-behavior:contain;padding-top:calc(14px + env(safe-area-inset-top))}
:root[data-theme="dark"] .mega__ico.app--seal{color:#9DB9E6}
.fld input:focus,.fld textarea:focus{box-shadow:0 0 0 3px rgb(57 146 121/.45)}
.fld__err{font-size:.85rem;color:var(--stamp);font-weight:500}
.form__req{font-size:.85rem;color:var(--ink-4);margin-bottom:12px}
@media (forced-colors:active){.addon__box,.topics span,.sum__dot{forced-color-adjust:auto;border:1px solid CanvasText}.addon[aria-checked="true"] .addon__box,.sum__plans [aria-checked="true"] .sum__dot{background:Highlight}}
/* one display line before the closing call to action */
.statement{padding:clamp(48px,8vw,110px) var(--gut) 0;text-align:center}
.display{font-size:clamp(3rem,8vw,7.5rem);font-weight:600;line-height:1.1;text-wrap:balance}
[lang="en"] .display{letter-spacing:-.035em;line-height:1}
/* print */
@media print{
	.hdr,.mbar,.mnav,.prefs,.night,.aur,.ledger,.skip,.final,.subnav,.clip__btn,.coin,.glass3d,.arail,.fchip{display:none!important}
	*{animation:none!important;transition:none!important;opacity:1!important;filter:none!important;backdrop-filter:none!important}
	body{background:#fff;color:#000}
	main>section:first-child{padding-top:0}
	a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em}
}

/* ------------------------------------------------------------------ pinned stages (story, apps tour) */
.pinsec{position:relative}
.pin__head{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:clamp(14px,2.4vh,26px)}
.pin__head .kick{margin-bottom:10px}
.pin__head .h2{font-size:clamp(1.5rem,1rem + 1.5vw,2.4rem)}
.pin__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(20px,3vw,48px);align-items:center}
.pin__steps{display:grid;gap:6px;align-content:center}
.pstep{border-radius:16px;transition:background-color .3s,box-shadow .3s}
.pstep.is-on{background:var(--glass);box-shadow:0 0 0 1px var(--glass-line) inset,var(--sh-2)}
:root[data-theme="dark"] .pstep.is-on{box-shadow:0 0 0 1px #24364D inset,0 20px 40px -24px rgb(0 0 0/.7)}
.pstep__btn{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:8px 14px;text-align:start;font-weight:600;font-size:1rem;color:var(--ink-3);border-radius:16px}
.pstep.is-on .pstep__btn{color:var(--ink)}
.pstep__btn:hover{color:var(--ink)}
.pstep__n{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--bg-3);font-size:.85rem;color:var(--ink-4);flex:none}
.pstep.is-on .pstep__n{background:var(--grad-em);color:#fff;box-shadow:0 6px 14px -6px rgb(14 122 92/.7)}
.pstep__ico{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--bg-3);color:var(--ink-4);flex:none}
.pstep__ico .bi,.pstep__ico .robot{width:18px;height:18px}
.pstep.is-on .pstep__ico{background:var(--mint);color:var(--em-text)}
.pstep__body{display:none;padding:0 14px 14px;padding-inline-start:58px}
.pstep.is-on .pstep__body{display:block;animation:fadeup .35s var(--ease)}
.pstep__body p{color:var(--ink-3);font-size:.94rem;line-height:1.65}
.tag--plan{display:inline-block;margin:8px 0 0;color:var(--em-text);background:var(--mint)}
.pstep__bar{display:block;height:3px;margin-top:12px;border-radius:3px;background:var(--line);overflow:hidden}
.pstep__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--em-light),var(--gold));transform-origin:left;transform:scaleX(var(--p,0))}
[dir="rtl"] .pstep__bar i{transform-origin:right}
.pin__steps--apps{gap:2px}
.pin__steps--apps .pstep__btn{min-height:40px;padding-block:4px}
.pin__steps--apps .pstep__body{padding-bottom:12px}
.pstep__media{display:none}
.pin__stage{min-width:0;perspective:1600px}
.frame3d--mock .pin__panels{display:grid;background:var(--m-bg);border-radius:0 0 16px 16px;overflow:hidden}
.ppanel{grid-area:1/1;opacity:0;transform:rotateY(-8deg) translateZ(-50px) scale(.97);transition:opacity .45s var(--ease),transform .65s var(--ease);pointer-events:none;--mf:clamp(10px,min(.88vw,1.42vh),14px);font-size:var(--mf)}
[dir="rtl"] .ppanel{transform:rotateY(8deg) translateZ(-50px) scale(.97)}
.ppanel.is-on{opacity:1;transform:none}
.ppanel .mock{color:var(--m-ink)}
.jr--chip{font-size:.8rem;min-width:220px}
.pin__dots{display:none}
/* wide screens: pin */
@media (min-width:1024px) and (min-height:600px){
	.pinsec:not(.pin--static){height:calc(100svh + var(--n,4) * var(--per,50svh))}
	.pinsec--tour,.pinsec--roles{--per:26svh}
	/* the step list keeps the height of its tallest open step (site.js --lh): opening a step never moves the stage */
	.pinsec:not(.pin--static) .pin__steps{min-height:var(--lh,0);align-content:start}
	/* the pin is as tall as its content and sticks centred under the bar (site.js sets --ph): the section ends right
	   under the stage, no blank band before the next section */
	.pinsec:not(.pin--static) .pin{position:sticky;top:max(calc(var(--stick) - 12px),calc((100svh - var(--ph,100svh)) / 2));display:flex;align-items:center;padding-block:12px;transition:top .25s var(--ease)}
	.pinsec:not(.pin--static) + .sec{padding-top:clamp(24px,4vh,44px)}
	.pinsec--tour .frame3d{width:min(100%,calc((100svh - var(--stick) - 220px) * 1.6))}
	.pinsec--tour .pin__stage{display:flex;justify-content:center}
}
@media (min-width:1024px) and (min-height:600px){.pin--static{padding-block:clamp(48px,8vh,96px)}}
/* phones / tablets: the stage sticks on top and the step cards stack under it; the card at the centre drives it */
@media (max-width:1023px),(max-height:599px){
	.pinsec{padding-block:clamp(40px,7vw,72px)}
	.pin__grid{grid-template-columns:1fr;gap:14px}
	/* one stage on every layout (no second copy of the media): the frame on top, the swipe cards under it drive it */
	.pin__stage{display:block;order:-1;width:100%;max-width:640px;margin-inline:auto}
	.pin__stage .frame3d{transform:none}
	.pin__stage .ppanel{--mf:clamp(8.6px,2.35vw,12px)}
	.pin__stage .fchip{display:none}
	.pin__steps{display:flex;flex-direction:column;gap:12px;padding:4px 0 8px;max-width:640px;margin-inline:auto;width:100%}
	.pstep{display:flex;flex-direction:column;background:var(--glass);box-shadow:0 0 0 1px var(--glass-line) inset,var(--sh-2);padding:12px;opacity:.6;scale:.97;transition:opacity .35s,scale .45s var(--ease),box-shadow .35s}
	.pstep.is-on{opacity:1;scale:1;box-shadow:0 0 0 1.5px var(--em-light) inset,var(--sh-2)}
	.pstep__media{display:block;order:-1;margin-bottom:10px;font-size:clamp(8.6px,2.35vw,12px);background:var(--m-bg);border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
	.pstep__media .frame3d--inline{box-shadow:none;border:0;border-radius:14px}
	.pstep__btn{min-height:44px}
	.pstep__body{display:block;padding:0 6px 4px;padding-inline-start:58px}
	.pstep.is-on .pstep__body{animation:none}
	.pstep__bar{display:none}
	.pin__dots{display:none}
	/* progress of the steps along the stage's bottom edge */
	.pin__stage::after{content:"";display:block;height:4px;margin-top:8px;border-radius:4px;background:linear-gradient(90deg,var(--em-light),var(--gold)) 0 0/calc(var(--pp,0) * 100%) 100% no-repeat,var(--line);transition:background-size .45s var(--ease)}
	[dir="rtl"] .pin__stage::after{background-position:100% 0,0 0}
}
@media (max-width:1023px) and (min-height:600px){
	.pin__stage{position:sticky;top:calc(var(--stick) + 6px);z-index:3}
}

/* ------------------------------------------------------------------ footer: on the night canvas in both themes */
.ftr{position:relative;isolation:isolate;overflow:hidden;color:#E6ECF2;background:radial-gradient(900px 500px at 85% 0%,rgb(14 122 92/.28),transparent 60%),radial-gradient(700px 400px at 0% 100%,rgb(224 165 38/.07),transparent 60%),#0E1B2C;border-top:0;padding-top:clamp(48px,6vw,80px);padding-bottom:calc(24px + env(safe-area-inset-bottom));--ink:#fff;--ink-3:#A9B4C2;--ink-4:#8E9AAA;--line:#24364D;--em-text:#7FD8B8;--mint:rgb(14 122 92/.18);--gold-soft:rgb(224 165 38/.12);--gold-text:#EBC572;--seal-soft:rgb(120 160 220/.13);--bg-3:rgb(255 255 255/.06)}
.ftr::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgb(169 180 194/.05) 1px,transparent 1px),linear-gradient(90deg,rgb(169 180 194/.05) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 20%,transparent 70%);mask-image:radial-gradient(ellipse at 50% 0%,#000 20%,transparent 70%)}
.ftr__wm{position:absolute;z-index:-1;inset-inline:0;bottom:-.18em;text-align:center;font-weight:700;font-size:clamp(5rem,18vw,16rem);line-height:1;color:transparent;-webkit-text-stroke:1px rgb(255 255 255/.07);pointer-events:none;white-space:nowrap}
.ftr__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:28px}
.ftr__brand{display:grid;gap:12px;align-content:start}
.ftr__brand .logo__img{display:block;height:34px}
.ftr__slogan{font-weight:600;color:#EBC572;font-size:1.05rem}
.ftr__about{color:#A9B4C2;font-size:.92rem;max-width:36ch}
.ftr .prefs__btn{justify-self:start;background:rgb(255 255 255/.06);box-shadow:0 1px 0 rgb(255 255 255/.08) inset,0 0 0 1px rgb(255 255 255/.12) inset;color:#fff}
.ftr__chips{display:flex;flex-wrap:wrap;gap:6px}
.ftr__chips li{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:rgb(255 255 255/.05);box-shadow:0 0 0 1px rgb(255 255 255/.08) inset;font-size:.8125rem;color:#D2DAE3}
.ftr__chips .bi,.ftr__chips .i{width:15px;height:15px;color:#7FD8B8}
.ftr__col h2{font-size:.95rem;font-weight:600;margin-bottom:12px;color:#fff}
.ftr__acc{display:flex;align-items:center;justify-content:space-between;width:100%;font:inherit;color:inherit;cursor:default}
.ftr__acc .i{display:none;width:18px;height:18px;transition:transform .25s}
.ftr__list{display:grid;gap:4px;font-size:.92rem;color:#A9B4C2}
.ftr__list a{position:relative;display:inline-flex;align-items:center;gap:8px;padding:5px 0;transition:color .2s}
.ftr__list a::after{content:"";position:absolute;inset-inline:0;bottom:2px;height:1px;background:#7FD8B8;transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease)}
[dir="ltr"] .ftr__list a::after{transform-origin:left}
.ftr__list a:hover{color:#fff}
.ftr__list a:hover::after{transform:scaleX(1)}
.ftr__ico{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:rgb(255 255 255/.06);color:#7FD8B8}
.ftr__ico .bi,.ftr__ico .robot{width:15px;height:15px}
.ftr__price{color:#8E9AAA;font-size:.85rem}
.ftr__note{display:flex;gap:6px;align-items:center;font-size:.8125rem;color:#7FD8B8}
.ftr__note .i{width:14px;height:14px}
.ftr__card{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding:14px 18px;border-radius:18px;background:rgb(255 255 255/.04);box-shadow:0 0 0 1px rgb(255 255 255/.08) inset}
.ftr__card-h{font-weight:600;color:#fff}
.ftr__card a,.ftr__card span{display:inline-flex;align-items:center;gap:8px;color:#D2DAE3;font-size:.92rem}
.ftr__card .i{width:16px;height:16px;color:#7FD8B8}
.ftr__more{margin-inline-start:auto;color:#7FD8B8!important;font-weight:500}
.ftr__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:36px;padding-top:18px;border-top:1px solid #24364D;font-size:.85rem;color:#8E9AAA}
.ftr__legal{display:flex;gap:6px 16px;flex-wrap:wrap}
.ftr__legal a{display:inline-flex;align-items:center;min-height:36px}
.ftr__legal a:hover{color:#fff}
.ftr__top{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgb(255 255 255/.06);box-shadow:0 0 0 1px rgb(255 255 255/.12) inset;color:#fff}
.ftr__top .i{width:18px;height:18px;transform:rotate(180deg)}
:root[data-theme="dark"] .ftr{background:radial-gradient(900px 500px at 85% 0%,rgb(14 122 92/.22),transparent 60%),rgb(10 21 34/.6)}
@media (max-width:1100px){.ftr__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ftr__brand{grid-column:1/-1}}
@media (max-width:720px){
	.ftr__grid{grid-template-columns:1fr;gap:0;text-align:center}
	.ftr__brand{justify-items:center;margin-bottom:18px}
	.ftr__about{margin-inline:auto}
	.ftr .prefs__btn{justify-self:center}
	.ftr__chips{justify-content:center}
	.ftr__col{border-top:1px solid #24364D}
	.ftr__col h2{margin:0}
	.ftr__acc{min-height:52px;cursor:pointer}
	.ftr__acc .i{display:block}
	.ftr__acc[aria-expanded="true"] .i{transform:rotate(180deg)}
	.js .ftr__col .ftr__list{display:none;padding-bottom:12px;justify-items:center}
	.js .ftr__col.is-open .ftr__list{display:grid}
	.ftr__list a{padding:10px 0}
	.ftr__card{justify-content:center;margin-top:18px;text-align:center}
	.ftr__more{margin-inline-start:0}
	.ftr__bottom{flex-direction:column;justify-content:center;text-align:center}
	.ftr{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
}

/* about + contact */
.about-hero .about__logo{position:relative}
.coin--a1{inset-inline-end:2%;top:6%;width:48px;height:48px}
.why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.why .card .ico{margin-bottom:12px}
.arab__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.arab__grid a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border-radius:16px;background:var(--glass);box-shadow:0 0 0 1px var(--glass-line) inset,var(--sh-1);text-align:center;transition:transform .25s var(--ease),box-shadow .25s}
.arab__grid a:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgb(57 146 121/.45) inset,var(--sh-2)}
.arab__grid a[aria-current]{background:var(--mint);box-shadow:0 0 0 2px var(--em) inset,0 14px 30px -16px rgb(14 122 92/.6)}
.arab__grid b{font-weight:600;font-size:.92rem}
.arab__chips{display:flex;gap:4px;font-size:.78rem;color:var(--ink-4)}
.arab__chips>*{padding:1px 7px;border-radius:999px;background:var(--bg-3)}
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.bento__a{grid-column:span 4}.bento__b{grid-column:span 2}.bento__c{grid-column:span 2}.bento__d{grid-column:span 4}
.bento .card .ico{margin-bottom:12px}
.bento .lnk{margin-top:10px}
.channel--cta{box-shadow:0 0 0 1px rgb(224 165 38/.45) inset,var(--sh-2)}
@media (max-width:1023px){.why{grid-template-columns:repeat(2,minmax(0,1fr))}.bento__a,.bento__b,.bento__c,.bento__d{grid-column:span 3}}
@media (max-width:640px){.why{grid-template-columns:1fr}.bento{grid-template-columns:1fr}.bento__a,.bento__b,.bento__c,.bento__d{grid-column:auto}.arab__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* roles: a role's view of the app (menu with what it sees) */
.rv2{display:grid;grid-template-columns:auto minmax(0,1fr);min-height:22em;color:var(--m-ink);background:var(--m-bg)}
.rv2__menu{display:flex;flex-direction:column;gap:.25em;width:13em;padding:.9em .7em;background:var(--m-bg-2);border-inline-end:1px solid var(--m-line)}
.rv2__mark{margin:0 .3em .5em}
.rv2__mark img{width:1.9em;height:1.9em;border-radius:.5em}
.rv2__i{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.55em;padding:.45em .55em;border-radius:.6em;font-size:.9em}
.rv2__ic{display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:.5em;background:var(--m-bg)}
.rv2__ic .bi{width:1.15em;height:1.15em}
.rv2__st{display:inline-flex;align-items:center;font-size:.78em;color:var(--m-ink-4)}
.rv2__st .i{width:1.2em;height:1.2em}
.rv2__i--full{background:var(--m-em-soft);color:var(--m-em);font-weight:600}
.rv2__i--full .rv2__ic{color:var(--m-em)}
.rv2__i--part,.rv2__i--read{color:var(--m-ink)}
.rv2__i--part .rv2__st,.rv2__i--read .rv2__st{color:var(--m-em)}
.rv2__i--none{color:var(--m-ink-4)}
.rv2__i--none .rv2__ic{opacity:.5}
.rv2__i--none .rv2__l{text-decoration:line-through;text-decoration-color:var(--m-line)}
.rv2__main{padding:1.3em 1.5em;display:grid;align-content:start;gap:.35em}
.rv2__k{font-size:.78em;color:var(--m-ink-4);margin-top:.6em}
.rv2__name{font-size:1.5em;font-weight:600}
.rv2__name small{font-size:.55em;color:var(--m-ink-4);font-weight:500}
.rv2__txt{color:var(--m-ink-3);font-size:.95em;line-height:1.6;max-width:30em}
.rv2__chips{display:flex;flex-wrap:wrap;gap:.4em}
.rv2__chips span{display:inline-flex;align-items:center;gap:.3em;padding:.3em .75em;border-radius:999px;background:var(--m-em-soft);color:var(--m-em);font-size:.85em;font-weight:500}
.rv2__chips .i{width:1em;height:1em}
.rv2__legend{display:flex;flex-wrap:wrap;gap:.4em 1em;margin-top:auto;padding-top:1em;font-size:.78em;color:var(--m-ink-4)}
.rv2__legend span{display:inline-flex;align-items:center;gap:.35em}
.rv2__dot{width:.7em;height:.7em;border-radius:50%;display:inline-block}
.rv2__dot--full{background:var(--m-em)}.rv2__dot--part{background:var(--m-em-line)}.rv2__dot--none{background:var(--m-line)}
.roles__more{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;font-size:.88rem;color:var(--ink-3);text-align:center}
.roles__more .i{width:18px;height:18px;color:var(--em-text);flex:none}
.pin__steps--roles{gap:0}
.pin__steps--roles .pstep__btn{min-height:38px;padding-block:3px}
.pin__steps--roles .pstep__n{width:28px;height:28px;font-size:.78rem}
.rvbox{font-size:clamp(8.4px,2.3vw,12px)}
@media (max-width:1023px),(max-height:599px){.rv2{grid-template-columns:1fr}.rv2__menu{width:auto;flex-direction:row;flex-wrap:wrap;justify-content:center;border-inline-end:0;border-bottom:1px solid var(--m-line)}.rv2__mark{display:none}.rv2__i{font-size:.82em}.rv2__main{text-align:center;justify-items:center}.rv2__legend{justify-content:center}.roles__more{display:none}}

/* footer: the apps column spans two tracks with the apps in two columns */
@media (min-width:1101px){.ftr__grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1.7fr) repeat(3,minmax(0,1fr))}.ftr__list--apps{grid-template-columns:1fr 1fr;column-gap:16px}}
@media (min-width:721px) and (max-width:1100px){.ftr__grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ftr__col--apps{grid-column:1/-1}.ftr__list--apps{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:16px}}
@media (max-width:720px){.ftr__list--apps{grid-template-columns:1fr 1fr;justify-items:start;max-width:340px;margin-inline:auto}}

/* skip a pinned stage (wide screens, while it is pinned) */
.pin__skip{display:none}
@media (min-width:1024px) and (min-height:600px){
	.pinsec:not(.pin--static) .pin__skip{position:absolute;inset-inline-end:var(--gut);bottom:14px;z-index:3;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 14px;border-radius:999px;font-size:.85rem;color:var(--ink-3);background:var(--glass);box-shadow:0 0 0 1px var(--glass-line) inset,var(--sh-1,0 4px 12px -6px rgb(14 27 44/.25));opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s var(--ease),color .2s;pointer-events:none}
	.pinsec.is-pinned .pin__skip{opacity:1;transform:none;pointer-events:auto}
	.pin__skip:hover,.pin__skip:focus-visible{color:var(--ink)}
	.pin__skip .i{width:16px;height:16px}
	.pin__count{font-variant-numeric:tabular-nums;color:var(--ink-4)}
}

/* ------------------------------------------------------------------ section rail (home, wide screens) */
.rail{display:none}
@media (min-width:1280px) and (min-height:640px){
	.rail{position:fixed;z-index:40;inset-inline-end:12px;top:50%;display:grid;gap:2px;padding:8px 4px;border-radius:999px;transform:translateY(-50%);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
	.rail.is-shown{opacity:1;visibility:visible}
	.rail a{position:relative;display:grid;place-items:center;width:24px;height:24px;border-radius:999px}
	.rail i{display:block;width:6px;height:6px;border-radius:999px;background:var(--line-2);transition:height .3s var(--ease),background-color .3s}
	.rail a:hover i,.rail a:focus-visible i{background:var(--ink-3)}
	.rail a.is-on i{height:18px;background:var(--em)}
	.rail span{position:absolute;inset-inline-end:30px;top:50%;padding:5px 10px;border-radius:8px;white-space:nowrap;font-size:.8rem;font-weight:500;color:var(--ink);background:var(--card);box-shadow:0 0 0 1px var(--line),var(--sh-2);opacity:0;transform:translateY(-50%) translateX(var(--rx,6px));transition:opacity .2s,transform .2s var(--ease);pointer-events:none}
	[dir="rtl"] .rail span{--rx:-6px}
	.rail a:hover span,.rail a:focus-visible span{opacity:1;transform:translateY(-50%)}
	.sheet-open .rail{visibility:hidden}
}
@media print{.rail,.pin__skip{display:none!important}}

/* ------------------------------------------------------------------ screen viewer (site.js): real screens full size */
.shot__zoom{position:absolute;bottom:12px;inset-inline-start:12px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgb(14 27 44/.72);color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:.88;transition:opacity .2s,transform .2s var(--ease)}
.shot__zoom .i{width:20px;height:20px}
.shot:hover .shot__zoom,.shot__zoom:focus-visible{opacity:1;transform:scale(1.06)}
.shot picture img{cursor:zoom-in}
.lbx-open{overflow:hidden}
.lbx{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#fff}
.lbx::backdrop{background:rgb(8 16 26/.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lbx[open]{display:grid;animation:fadeup .25s var(--ease)}
.lbx__in{display:grid;place-items:center;align-content:center;gap:12px;padding:56px clamp(12px,6vw,88px) 20px;min-height:100%}
.lbx__media{width:min(100%,1600px)}
.lbx__media img,.lbx__media video{display:block;width:100%;height:auto;max-height:calc(100dvh - 130px);object-fit:contain;border-radius:12px;background:#fff;box-shadow:0 30px 80px -20px rgb(0 0 0/.6)}
.lbx__cap{display:flex;gap:14px;justify-content:center;align-items:center;max-width:80ch;text-align:center;font-size:.92rem;color:#D2DAE3}
.lbx__n{color:#8E9AAA;font-variant-numeric:tabular-nums}
.lbx__x,.lbx__nav{position:fixed;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgb(255 255 255/.12);color:#fff;box-shadow:0 0 0 1px rgb(255 255 255/.18) inset;transition:background-color .2s}
.lbx__x:hover,.lbx__nav:hover,.lbx__x:focus-visible,.lbx__nav:focus-visible{background:rgb(255 255 255/.24)}
.lbx__x{top:12px;inset-inline-end:12px}
.lbx__nav{top:50%;margin-top:-23px}
.lbx__prev{inset-inline-start:12px}
.lbx__next{inset-inline-end:12px}
.lbx__x .i,.lbx__nav .i{width:22px;height:22px}
.lbx__prev .i{transform:rotate(180deg)}
[dir="rtl"] .lbx__prev .i{transform:none}
[dir="rtl"] .lbx__next .i{transform:rotate(180deg)}
.lbx.is-single .lbx__nav{display:none}
@media (max-width:640px){.lbx__nav{top:auto;bottom:16px;margin:0}.lbx__in{padding-bottom:76px}}

/* ------------------------------------------------------------------ FAQ search */
.faqs{position:relative;z-index:2;margin-top:-28px;margin-bottom:8px}
.faqs__box{display:flex;align-items:center;gap:10px;max-width:640px;min-height:56px;padding:0 18px;border-radius:999px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-3);transition:border-color .2s,box-shadow .2s}
.faqs__box:focus-within{border-color:var(--em);box-shadow:0 0 0 4px var(--mint),var(--sh-3)}
.faqs__box .i{width:20px;height:20px;color:var(--ink-4);flex:none}
.faqs__box input{flex:1;min-width:0;height:54px;border:0;background:none;font:inherit;font-size:1rem;color:var(--ink);outline:0}
.faqs__box input::placeholder{color:var(--ink-4)}
.faqs__st{min-height:1.4em;margin:8px 18px 0;font-size:.85rem;color:var(--ink-4)}
.faqs__none{margin:6px 18px 0;color:var(--ink-3)}
@media (max-width:1023px){.faqs__box{margin-inline:auto}}
.form__again{margin-top:16px}

/* ------------------------------------------------------------------ card system v3 (owner 2026-10-17): every card's
   content centred, real glass in both themes (gradient border on the glass, top highlight, layered shadow, blur on
   wide screens only), a glow that follows the pointer (site.js --gx/--gy), price digits with a soft gradient. */
.plan,.card,.everyone li,.how__line li{text-align:center}
.plan__head{flex-direction:column;justify-content:center;gap:8px}
.plan__badge{order:-1;align-self:center;background:rgb(255 255 255/.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
:root[data-theme="dark"] .plan__badge{background:rgb(224 165 38/.14)}
.plan__amt,.plan__note,.plan__trial{justify-content:center}
.plan__trial{padding-bottom:16px;margin-bottom:0;border-bottom:1px solid var(--line)}
.plan__feats{align-self:center;width:max-content;max-width:100%;border-top:0;text-align:start}
.plan__apps,.plan__xa{text-align:center}
.plan__xu{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:14px;font-size:.86rem;color:var(--ink-3)}
.plan__xu .i{width:16px;height:16px;color:var(--em-text)}
.plan__xu .amt{font-weight:600;color:var(--ink-2)}
.plan__xa{margin-top:10px;font-size:.84rem;color:var(--ink-3)}
.plan__xa b{color:var(--ink-2);font-weight:600}
.card .ico,.everyone .ico{margin-inline:auto}
.how__n{margin-inline:auto}
/* the glass */
.plan,.card,.everyone li{
	--gf1:rgb(255 255 255/.86);--gf2:rgb(255 255 255/.6);--gb1:rgb(255 255 255/.95);--gb2:rgb(14 27 44/.06);--gb3:rgb(57 146 121/.22);--glow:rgb(255 255 255/.7);
	border:1px solid transparent;
	background:radial-gradient(360px circle at var(--gx,50%) var(--gy,-30%),var(--glow),transparent 48%) padding-box,linear-gradient(160deg,var(--gf1),var(--gf2)) padding-box,
		linear-gradient(145deg,var(--gb1),var(--gb2) 45%,var(--gb3)) border-box;
	box-shadow:0 1px 0 rgb(255 255 255/.9) inset,0 1px 2px rgb(14 27 44/.05),0 22px 44px -26px rgb(14 27 44/.32)}
:root[data-theme="dark"] .plan,:root[data-theme="dark"] .card,:root[data-theme="dark"] .everyone li{
	--gf1:rgb(28 48 72/.82);--gf2:rgb(16 30 48/.66);--gb1:rgb(255 255 255/.2);--gb2:rgb(255 255 255/.04);--gb3:rgb(127 216 184/.22);--glow:rgb(127 216 184/.09);
	box-shadow:0 1px 0 rgb(255 255 255/.07) inset,0 26px 50px -28px rgb(0 0 0/.75)}
@media (min-width:721px){.plan,.card,.everyone li{backdrop-filter:blur(14px) saturate(1.6);-webkit-backdrop-filter:blur(14px) saturate(1.6)}}
.plan:hover,.card:hover,.everyone li:hover{box-shadow:0 1px 0 rgb(255 255 255/.9) inset,0 1px 2px rgb(14 27 44/.05),0 30px 60px -28px rgb(14 122 92/.35)}
:root[data-theme="dark"] .plan:hover,:root[data-theme="dark"] .card:hover,:root[data-theme="dark"] .everyone li:hover{box-shadow:0 1px 0 rgb(255 255 255/.07) inset,0 30px 60px -28px rgb(127 216 184/.18)}
.plan--hi{--gb1:rgb(57 146 121/.9);--gb3:rgb(224 165 38/.7);border-width:2px;box-shadow:0 1px 0 rgb(255 255 255/.9) inset,0 40px 80px -32px rgb(9 79 60/.5),0 0 0 6px rgb(57 146 121/.07)}
/* price digits */
.plan .amt--price .num{background-image:linear-gradient(180deg,var(--ink) 30%,#2C6B58);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="dark"] .plan .amt--price .num{background-image:linear-gradient(180deg,#fff 35%,#7FD8B8)}
/* switching monthly / yearly: the new figures fade up */
[data-cycle-scope] [data-cycle-show]:not([hidden]){animation:fadeup .35s var(--ease)}
/* builder: an app the chosen plan can't add */
.addon.is-na{cursor:not-allowed;opacity:.55}
.addon.is-na .addon__box{visibility:hidden}
.addon__na{font-size:.78rem;color:var(--ink-4);white-space:nowrap}
@media (forced-colors:active){.plan .amt--price .num{color:CanvasText;background:none}}
/* plan price: the figure alone on its line, centred; currency + period on the line under it (owner) */
.plan__amt{flex-wrap:wrap;justify-content:center;align-items:baseline;column-gap:6px;row-gap:2px;text-align:center}
.plan__amt .amt--price{display:contents}
.plan__amt .amt--price .num{order:-1;flex-basis:100%;line-height:1.05}
.plan__amt .amt--price .cur{font-size:.95rem;font-weight:600;color:var(--ink-3)}

/* ------------------------------------------------------------------ glass v4 (owner): an ambient backdrop the glass reads
   against, one glass recipe on every surface, the plan builder rebuilt (plan cards · app tiles · extra users · receipt) */
:root:not([data-theme="dark"]) body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
	background:radial-gradient(900px 600px at 8% 12%,rgb(127 216 184/.30),transparent 60%),radial-gradient(800px 560px at 96% 38%,rgb(235 197 114/.22),transparent 60%),
		radial-gradient(900px 700px at 40% 100%,rgb(57 146 121/.16),transparent 62%),var(--bg)}
:root:not([data-theme="dark"]) .sec--white{background:linear-gradient(180deg,rgb(255 255 255/.55),rgb(255 255 255/.35))}
:root:not([data-theme="dark"]) body{background:transparent}
.faq__i,.form,.facts>div,.channel,.perm,.calc,.how__line li,.cmp-wrap,.pbp,.pba,.pbu,.subnav,.cyc{
	--gf1:rgb(255 255 255/.82);--gf2:rgb(255 255 255/.56);--gb1:rgb(255 255 255/.95);--gb2:rgb(14 27 44/.06);--gb3:rgb(57 146 121/.2);--glow:rgb(255 255 255/.65);
	border:1px solid transparent;
	background:radial-gradient(320px circle at var(--gx,50%) var(--gy,-30%),var(--glow),transparent 48%) padding-box,linear-gradient(160deg,var(--gf1),var(--gf2)) padding-box,
		linear-gradient(145deg,var(--gb1),var(--gb2) 45%,var(--gb3)) border-box;
	box-shadow:0 1px 0 rgb(255 255 255/.9) inset,0 1px 2px rgb(14 27 44/.04),0 18px 36px -26px rgb(14 27 44/.3)}
:root[data-theme="dark"] :is(.faq__i,.form,.facts>div,.channel,.perm,.calc,.how__line li,.cmp-wrap,.pbp,.pba,.pbu,.subnav,.cyc){
	--gf1:rgb(28 48 72/.8);--gf2:rgb(16 30 48/.62);--gb1:rgb(255 255 255/.18);--gb2:rgb(255 255 255/.04);--gb3:rgb(127 216 184/.2);--glow:rgb(127 216 184/.08);
	box-shadow:0 1px 0 rgb(255 255 255/.06) inset,0 22px 44px -28px rgb(0 0 0/.7)}
@media (min-width:721px){:is(.faq__i,.form,.facts>div,.channel,.perm,.calc,.how__line li,.cmp-wrap,.pbp,.pba,.pbu,.subnav,.cyc){backdrop-filter:blur(14px) saturate(1.6);-webkit-backdrop-filter:blur(14px) saturate(1.6)}}
.how__line li{padding:22px 18px;border-radius:20px}
.cmp-wrap{border-radius:18px}
.cmp{background:transparent;border:0}
.faq__i[open]{--gb3:rgb(57 146 121/.45)}

/* the builder */
.pb-sec .sec__head{margin-bottom:clamp(18px,3vh,28px)}
.pb{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(16px,2vw,28px);align-items:start}
.pb__main{display:grid;gap:26px}
.pb__h{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-weight:600;font-size:1.05rem}
.pb__n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--grad-em);color:#fff;font-size:.82rem;box-shadow:0 6px 14px -6px rgb(14 122 92/.7)}
/* 1 · plans */
.pb__plans{display:grid;grid-template-columns:repeat(var(--np,3),minmax(0,1fr));gap:12px}
.pb .pbp{position:relative;display:grid;justify-items:center;gap:4px;min-height:132px;padding:22px 14px 16px;border-radius:20px;font:inherit;color:var(--ink);text-align:center;transition:transform .3s var(--ease),box-shadow .3s}
.pb .pbp:hover{translate:0 -3px}
.pbp__badge{position:absolute;top:-11px;padding:3px 10px;border-radius:999px;background:var(--grad-gold);color:#2B1D02;font-size:.72rem;font-weight:600;white-space:nowrap}
.pbp__t{font-weight:700;font-size:1.08rem}
.pbp__p .amt{font-size:1.45rem;font-weight:700}
.pbp__p small{font-size:.8rem;color:var(--ink-4);font-weight:400}
.pbp__m{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;color:var(--ink-4)}
.pbp__m .i{width:14px;height:14px}
.pbp__ok{position:absolute;top:10px;inset-inline-end:10px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-2);color:transparent;transition:all .25s var(--ease)}
.pbp__ok .i{width:13px;height:13px}
.pb .pbp[aria-checked="true"]{--gb1:var(--em);--gb3:var(--gold);--gf1:rgb(232 246 240/.92);border-width:2px;translate:0 -4px;box-shadow:0 1px 0 rgb(255 255 255/.9) inset,0 26px 48px -26px rgb(14 122 92/.55)}
:root[data-theme="dark"] .pb .pbp[aria-checked="true"]{--gf1:rgb(14 74 58/.75)}
.pbp[aria-checked="true"] .pbp__ok{background:var(--em);border-color:var(--em);color:#fff}
/* 2 · apps */
.pb__apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.pb .pba{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ico txt" "p st";align-items:center;gap:10px 12px;width:100%;padding:14px;border-radius:18px;font:inherit;color:var(--ink);text-align:start;cursor:pointer;opacity:1;transition:transform .25s var(--ease),box-shadow .25s,opacity .25s}
.pb .pba:hover{translate:0 -2px}
.pba__ico{grid-area:ico;display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--bg-3);color:var(--ink-3)}
.pba__ico .bi,.pba__ico .robot{width:22px;height:22px}
.pba__txt{grid-area:txt;min-width:0}
.pb .pba b{display:block;font-weight:600;font-size:.98rem}
.pb .pba small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink-4);font-size:.8rem;line-height:1.45}
.pba__p{grid-area:p;font-size:.88rem;font-weight:600;color:var(--ink-2);white-space:nowrap;text-align:start}
.pba__p small{display:inline!important;font-weight:400;color:var(--ink-4)}
.pba__state{grid-area:st;justify-self:end;display:flex;align-items:center;gap:6px}
.pba__sw{position:relative;width:40px;height:23px;border-radius:999px;background:var(--line-2);transition:background-color .25s}
.pba__sw i{position:absolute;top:3px;inset-inline-start:3px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgb(14 27 44/.3);transition:transform .25s var(--ease)}
.pba[aria-checked="true"] .pba__sw{background:var(--em)}
.pba[aria-checked="true"] .pba__sw i{transform:translateX(17px)}
[dir="rtl"] .pba[aria-checked="true"] .pba__sw i{transform:translateX(-17px)}
.pb .pba[aria-checked="true"]{--gb1:var(--em);--gb3:var(--em-light);--gf1:rgb(232 246 240/.9);box-shadow:0 1px 0 rgb(255 255 255/.9) inset,0 18px 36px -22px rgb(14 122 92/.5)}
:root[data-theme="dark"] .pb .pba[aria-checked="true"]{--gf1:rgb(14 74 58/.7)}
.pba[aria-checked="true"] .pba__ico{background:var(--grad-em);color:#fff}
.pba.is-inc .pba__sw,.pba.is-na .pba__sw{display:none}
.pb .pba.is-inc{cursor:default}
.pb .pba.is-na{cursor:not-allowed;opacity:.58}
.pba .addon__inc,.pba .addon__na{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:.76rem;font-weight:600;white-space:nowrap}
.pba .addon__inc{background:var(--mint);color:var(--em-text)}
.pba .addon__na{background:var(--bg-3);color:var(--ink-4)}
.pba .addon__inc[hidden],.pba .addon__na[hidden]{display:none}
.pba .addon__inc .i,.pba .addon__na .i{width:13px;height:13px}
/* 3 · extra users */
.pbu{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:18px}
.pbu__txt{font-size:.9rem;color:var(--ink-3)}
.pbu__txt b{color:var(--ink);font-weight:600}
.pbu__step{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:14px;background:var(--bg-3)}
.pbu__step button{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;font:inherit;font-size:1.3rem;color:var(--ink);background:var(--card);box-shadow:var(--sh-1,0 1px 2px rgb(14 27 44/.08))}
.pbu__step button:disabled{opacity:.4}
.pbu__step output{min-width:44px;text-align:center;font-size:1.2rem;font-weight:700;font-variant-numeric:tabular-nums}
[data-xu-box][hidden]{display:none}
/* the receipt */
.pb .pb__sum{position:sticky;top:calc(var(--stick) + 8px);isolation:isolate;overflow:hidden;padding:24px;border-radius:26px;border:0;color:#fff;
	background:radial-gradient(420px 260px at 85% 0%,rgb(127 216 184/.24),transparent 70%),linear-gradient(160deg,#0B4F3C,#062E24 75%);
	box-shadow:0 0 0 1px rgb(255 255 255/.07) inset,0 40px 90px -40px rgb(14 122 92/.75);backdrop-filter:none;transition:top .25s var(--ease)}
.pb__sumglow{position:absolute;inset:auto -30% -60% auto;width:320px;height:320px;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgb(224 165 38/.22),transparent 65%);pointer-events:none}
.pb__sumk{font-weight:600;color:#A9C9BD;font-size:.9rem}
.pb__lines{display:grid;gap:0;margin:12px 0 4px}
.pb__lines li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed rgb(255 255 255/.14);font-size:.9rem;color:#D2E6DE;animation:fadeup .3s var(--ease) both}
.pb__lines li.is-plan{color:#fff;font-weight:600}
.pb__lines .money{white-space:nowrap}
.pb__total{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:14px}
.pb__totk{color:#A9C9BD;font-size:.9rem}
.pb__totk small{color:#8FB3A6}
.pb__totv .amt{font-size:clamp(1.9rem,1.5rem + 1vw,2.4rem);font-weight:700;color:#fff;letter-spacing:-.01em}
.pb__totv .cur{font-size:.5em;color:#A9C9BD;font-weight:500}
.pb.is-tick .pb__totv{animation:pbtick .35s var(--ease)}
@keyframes pbtick{40%{transform:scale(1.04)}}
.pb__pm{margin-top:2px;color:#7FD8B8;font-size:.85rem;font-weight:500;text-align:end}
.pb__vat{margin-top:6px;color:#8FB3A6;font-size:.8rem;text-align:end}
.pb .pb__sum .btn{margin-top:16px}
.pb .pb__sum .sum__fine{color:#8FB3A6}
@media (max-width:960px){
	.pb{grid-template-columns:1fr}
	.pb .pb__sum{position:static}
	.pb__plans{grid-template-columns:1fr}
	.pb .pbp{grid-template-columns:auto 1fr auto;grid-template-areas:"t t p" "m m p";justify-items:start;text-align:start;min-height:0;padding:16px}
	.pb .pbp[aria-checked="true"]{translate:none}
	.pbp__t{grid-area:t}.pbp__m{grid-area:m}.pbp__p{grid-area:p;align-self:center}
	.pbp__badge{inset-inline-start:14px}
	.pbp__ok{display:none}
}
@media (max-width:560px){.pb__apps{grid-template-columns:1fr}}
/* the closing statement: Arabic descenders (ي ر ف ل) hang below a 1.1 line box, and the .cv sections' paint containment
   clipped them at the section edge (owner) — room under it, no containment for this one line, a taller Arabic line box */
.statement{padding-bottom:clamp(16px,2.5vw,40px)}
.cv>.statement{content-visibility:visible;contain:none}
[lang="ar"] .display{line-height:1.3}
/* any big Arabic heading that ends a contained section keeps its tails too */
[lang="ar"] .cv>section .h1,[lang="ar"] .cv>section .h2{padding-bottom:.08em}

/* ------------------------------------------------------------------ motion v5 (owner: «everything glassy and 3D, more
   animated, richer section changes»): glass on the remaining surfaces, pointer tilt + light sheen on every card, depth
   layers in the hero, 3D section entrances with staggered children, word-flip headings, deeper panel flips, and
   page-to-page View Transitions. Reduced motion: everything final and still (the global rule + the guards below). */

/* 1 · glass on the remaining surfaces (blur only on wider screens, as everywhere) */
.ftr__card,.ftr__chips li,.trust li,.frame3d,.shot,.final__in{position:relative}
.ftr__card,.ftr__chips li{background:linear-gradient(160deg,rgb(255 255 255/.09),rgb(255 255 255/.03));box-shadow:0 1px 0 rgb(255 255 255/.1) inset,0 0 0 1px rgb(255 255 255/.1) inset,0 18px 40px -24px rgb(0 0 0/.6)}
@media (min-width:721px){.ftr__card,.trust li,.frame3d{backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5)}}
.frame3d,.shot{box-shadow:0 1px 0 rgb(255 255 255/.8) inset,0 0 0 1px rgb(14 27 44/.06),0 40px 80px -36px rgb(14 27 44/.45),0 12px 24px -16px rgb(14 27 44/.18)}
:root[data-theme="dark"] .frame3d,:root[data-theme="dark"] .shot{box-shadow:0 1px 0 rgb(255 255 255/.06) inset,0 0 0 1px rgb(255 255 255/.06),0 40px 80px -36px rgb(0 0 0/.8)}

/* 2 · 3D: every card tilts toward the pointer (site.js --trx/--try) and catches a light sheen (--gx/--gy) */
.how__line li,.facts>div,.channel,.pb .pbp,.pb .pba{transform:perspective(900px) rotateX(var(--trx,0deg)) rotateY(var(--try,0deg));transition:transform .35s var(--ease),box-shadow .3s,translate .3s var(--ease),opacity .25s}
.card::after,.plan:not(.plan--hi)::after,.everyone li::after,.how__line li::after,.facts>div::after,.channel::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
	background:radial-gradient(240px circle at var(--gx,50%) var(--gy,0%),rgb(255 255 255/.45),transparent 55%);mix-blend-mode:soft-light}
.card,.everyone li,.how__line li,.facts>div,.channel{position:relative}
@media (hover:hover) and (pointer:fine){.card:hover::after,.plan:not(.plan--hi):hover::after,.everyone li:hover::after,.how__line li:hover::after,.facts>div:hover::after,.channel:hover::after{opacity:1}}
/* hero depth layers: the floating journal, the chip and the coins drift at their own depth with the pointer */
.hero__stage .float--jr{translate:calc(var(--mx,0) * -26px) calc(var(--my,0) * -18px);transition:translate .4s var(--ease)}
.hero__stage .float--chip{translate:calc(var(--mx,0) * 34px) calc(var(--my,0) * 24px);transition:translate .4s var(--ease)}
.hero__stage .coin--h1{translate:calc(var(--mx,0) * 52px) calc(var(--my,0) * 40px);transition:translate .5s var(--ease)}
.hero__stage .coin--h2{translate:calc(var(--mx,0) * -44px) calc(var(--my,0) * -34px);transition:translate .5s var(--ease)}

/* 3 · section entrances: a 3D swing-in (tilted back, lower, deeper) instead of a fade-up; grids stagger their children */
.sec>.wrap,.pinsec .wrap,.phead .wrap{perspective:1400px}
@media (prefers-reduced-motion:no-preference){
	@supports (animation-timeline:view()){
		.rv{animation:rv3 linear both;animation-timeline:view();animation-range:entry calc(var(--i,0) * 4%) entry calc(30vh + var(--i,0) * 4vh)}
		.cards3>*,.secgrid>*,.everyone>li,.how__line>li,.principles>*,.plans>.plan,.pb__apps>.pba,.faq>.faq__i,.facts>div{animation:rv3 linear both;animation-timeline:view();
			animation-range:entry calc(var(--i,0) * 5%) entry calc(26vh + var(--i,0) * 5vh)}
	}
	@supports not (animation-timeline:view()){
		.js .rv{opacity:0;translate:0 34px;rotate:x 12deg;transition:opacity .7s var(--ease),translate .8s var(--ease),rotate .8s var(--ease)}
		.js .rv.is-in{opacity:1;translate:none;rotate:none}
	}
	/* headings: words flip up from below the line, one after another */
	.js .split{perspective:900px}
	.js .split .w{transform:translateY(.45em) rotateX(-70deg);transform-origin:50% 100%;opacity:0;transition:opacity .45s var(--ease),transform .6s cubic-bezier(.2,.9,.25,1.15)}
	.js .split.is-in .w{transform:none;opacity:1}
}
@keyframes rv3{from{opacity:0;translate:0 46px;rotate:x 14deg;scale:.96}}
/* stagger index for grids (CSS-only, no per-element styles) */
:is(.cards3,.secgrid,.everyone,.how__line,.principles,.plans,.pb__apps,.faq,.facts)>:nth-child(2){--i:1}
:is(.cards3,.secgrid,.everyone,.how__line,.principles,.plans,.pb__apps,.faq,.facts)>:nth-child(3){--i:2}
:is(.cards3,.secgrid,.everyone,.how__line,.principles,.plans,.pb__apps,.faq,.facts)>:nth-child(4){--i:3}
:is(.cards3,.secgrid,.everyone,.how__line,.principles,.plans,.pb__apps,.faq,.facts)>:nth-child(5){--i:1}
:is(.cards3,.secgrid,.everyone,.how__line,.principles,.plans,.pb__apps,.faq,.facts)>:nth-child(6){--i:2}
:is(.cards3,.secgrid,.everyone,.how__line,.principles,.plans,.pb__apps,.faq,.facts)>:nth-child(7){--i:3}
:is(.cards3,.secgrid,.everyone,.how__line,.principles,.plans,.pb__apps,.faq,.facts)>:nth-child(n+8){--i:2}
/* pinned stages: the screens flip in depth instead of a flat swap */
.ppanel{transform:rotateY(-28deg) translateZ(-140px) scale(.9);filter:blur(3px);transition:opacity .5s var(--ease),transform .8s cubic-bezier(.2,.8,.2,1),filter .5s}
[dir="rtl"] .ppanel{transform:rotateY(28deg) translateZ(-140px) scale(.9)}
.ppanel.is-on{transform:none;filter:none}
.pin__stage .frame3d{transform-style:preserve-3d}

/* 4 · page to page: the header and footer stay, the page content slides through a soft depth fade (Chromium MPA view
   transitions; other browsers simply load the page) */
@view-transition{navigation:auto}
.hdr{view-transition-name:eh-header}
.ftr{view-transition-name:eh-footer}
::view-transition-old(root){animation:vt-out .32s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in .48s cubic-bezier(.2,.8,.2,1) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-14px) scale(.985);filter:blur(4px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(22px) scale(1.01);filter:blur(4px)}}
@media (prefers-reduced-motion:reduce){
	@view-transition{navigation:none}
	.ppanel{filter:none}
	.hero__stage .float--jr,.hero__stage .float--chip,.hero__stage .coin--h1,.hero__stage .coin--h2{translate:none}
}
/* phones: no section may widen the page (decorative glows clip at their section; clip keeps sticky children working) */
main .sec,main section{overflow-x:clip}

/* no pause / play buttons on any video (owner, 2026-10-17): clips stop by themselves after 3 loops; reduced motion → posters */
.clip__btn,[data-clip-toggle]{display:none!important}
/* audit: comfortable tap targets on touch screens (≥ 40 px) and no text under 12 px */
@media (max-width:1100px){
	.ftr__card a{display:inline-flex;align-items:center;min-height:40px}
	.ftr__acc{min-height:44px}
	.lnk{min-height:40px}
}
.cur{font-size:max(.84em,12px)}
/* footer: the 22 country pages (SEO + a quick way to switch) */
.ftr__ctrys{padding-block:18px 6px;border-top:1px solid rgb(255 255 255/.08)}
.ftr__ctrys-h{font-size:var(--fs-xs);font-weight:600;color:#A9B4C2;margin-bottom:10px}
.ftr__ctrys ul{display:flex;flex-wrap:wrap;gap:6px 8px}
.ftr__ctrys a{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:4px 10px;border-radius:10px;font-size:var(--fs-xs);color:#C9D3DE;border:1px solid rgb(255 255 255/.08);transition:border-color .2s,color .2s}
.ftr__ctrys a:hover,.ftr__ctrys a[aria-current]{color:#fff;border-color:rgb(127 216 184/.45)}
.ftr__ctrys .flag{width:20px;height:20px}
@media (max-width:1100px){.ftr__ctrys a{min-height:40px}}
@media (max-width:639px){.ftr__ctrys{text-align:center}.ftr__ctrys ul{justify-content:center}}
.feat__more{margin-top:14px;font-weight:600}

/* ---------------------------------------------------------------- footer v2 (.fx, footer.html, owner 2026-10-19):
   compact — brand + five link groups in ONE row · one slim «talk to us» + plans row · trust row · the 22 countries as
   short links (one fold on phones) · legal line. Wider than the page container (no empty sides). */
.fx>.wrap{width:min(1440px,100% - 2*var(--gut))}
.fx.ftr{padding-top:clamp(36px,4vw,56px)}
.fx__cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1.7fr) repeat(4,minmax(0,1fr));gap:24px 28px;padding-bottom:clamp(20px,2.4vw,28px)}
.fx__cols--4{grid-template-columns:minmax(0,1.35fr) minmax(0,1.7fr) repeat(3,minmax(0,1fr))}
.fx__brand{display:grid;gap:10px;align-content:start;justify-items:start}
.fx__brand .logo__img{display:block;height:32px}
.fx .ftr__about{font-size:.88rem}
.fx .ftr__social{margin-top:4px}
.fx__col{min-width:0}
.fx .ftr__col h2{margin-bottom:8px}
.fx .ftr__list{gap:0}
.fx .ftr__list a{padding:4px 0}
.fx .fx__hl a{align-items:flex-start;color:#EBC572;font-weight:500}
.fx .fx__hl .bi{flex:none;width:16px;height:16px;margin-top:3px}
/* the slim row: talk to us (title + form link | tiles) and the plans card */
.fx__side{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:14px;min-width:0}
.fx__reach{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"h t" "f t";align-items:center;gap:2px 20px;padding:12px 14px 12px 18px;border-radius:20px;background:linear-gradient(160deg,rgb(255 255 255/.08),rgb(255 255 255/.03));box-shadow:0 1px 0 rgb(255 255 255/.1) inset,0 0 0 1px rgb(255 255 255/.1) inset}
.fx__reach-h{grid-area:h;align-self:end}
.fx__reach-t{font-size:1.05rem;font-weight:600;color:#fff}
.fx__reach-s{display:none}
.fx__tiles{grid-area:t;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px}
.fx__tiles>li{display:grid;min-width:0}
.fx__tile{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;min-height:56px;padding:8px 12px;border-radius:14px;background:rgb(255 255 255/.05);box-shadow:0 0 0 1px rgb(255 255 255/.09) inset;color:#fff;transition:background-color .2s,box-shadow .2s,translate .2s}
.fx__tile:hover{background:rgb(14 122 92/.28);box-shadow:0 0 0 1px rgb(127 216 184/.4) inset}
.fx__tile:focus-visible,.fx__plans:focus-visible{outline:2px solid #7FD8B8;outline-offset:2px}
.fx__tile-i{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;color:#fff;background:linear-gradient(145deg,#16876A,#0B6B51);box-shadow:0 1px 0 rgb(255 255 255/.25) inset}
.fx__tile--wa .fx__tile-i{background:linear-gradient(145deg,#2FD06E,#14A44D)}
.fx__tile-i .i{width:19px;height:19px}
.fx__tile-x{display:grid;min-width:0}
.fx__tile-x b{font-size:.78rem;font-weight:500;color:#A9B4C2}
.fx__tile-x bdi{font-size:.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx__reach-f{grid-area:f;align-self:start;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.84rem;color:#A9B4C2}
.fx__reach-f span{display:inline-flex;align-items:center;gap:6px}
.fx__reach-f .i{width:15px;height:15px}
.fx__more{display:inline-flex;align-items:center;gap:6px;min-height:28px;color:#7FD8B8;font-weight:500}
.fx__more:hover{color:#fff}
.fx__plans{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"i x" "i g";align-items:center;gap:2px 14px;padding:12px 18px;border-radius:20px;border:1px solid transparent;color:#fff;
	background:linear-gradient(160deg,#182A40,#122236) padding-box,linear-gradient(120deg,rgb(235 197 114/.55),rgb(255 255 255/.06) 50%,rgb(127 216 184/.35)) border-box;transition:translate .2s}
.fx__plans-i{grid-area:i;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:#fff;background:linear-gradient(145deg,#EBC572,#B3841E);box-shadow:0 1px 0 rgb(255 255 255/.35) inset}
.fx__plans-i .bi{width:20px;height:20px}
.fx__plans-x{grid-area:x;display:grid;min-width:0}
.fx__plans-x b{font-size:.95rem;font-weight:600}
.fx__plans-x small{font-size:.8rem;color:#A9B4C2}
.fx__plans-go{grid-area:g;display:inline-flex;align-items:center;gap:6px;font-size:.86rem;font-weight:600;color:#EBC572}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.fx__tile:hover,.fx__plans:hover{translate:0 -2px}}
.fx__reachrow{padding-block:4px 16px}
.fx__trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-block:12px;border-top:1px solid rgb(255 255 255/.08);border-bottom:1px solid rgb(255 255 255/.08)}
.fx__trust .ftr__chips{flex:1;min-width:0}
/* the 22 countries: short flag links, two lines on wide screens */
.fx .fx__ctrys{display:flex;align-items:baseline;gap:10px 18px;padding-block:14px 0}
.fx .fx__ctrys h2{flex:none;margin:0}
.fx__ctrys .ftr__acc{justify-content:flex-start;gap:8px;font-size:var(--fs-xs);color:#A9B4C2;white-space:nowrap}
.fx__ctrys .ftr__acc>span{display:inline-flex;align-items:center;gap:8px}
.fx__n{display:inline-grid;place-items:center;min-width:26px;height:20px;padding-inline:6px;border-radius:999px;font-size:.72rem;color:#0E1B2C;background:#7FD8B8}
.fx .fx__ctry-list{display:flex;flex-wrap:wrap;gap:2px 14px}
.fx .fx__ctry-list a{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0;font-size:var(--fs-xs);color:#C9D3DE}
.fx .fx__ctry-list a::after{bottom:3px}
.fx .fx__ctry-list a:hover,.fx .fx__ctry-list a[aria-current]{color:#fff}
.fx .fx__ctry-list a[aria-current]{color:#7FD8B8}
.fx .fx__ctry-list .flag{width:18px;height:18px}
.fx .ftr__bottom{margin-top:16px;padding-top:12px}
@media (min-width:721px) and (max-width:1100px){
	.fx__cols{grid-template-columns:repeat(4,minmax(0,1fr))}
	.fx__cols--4{grid-template-columns:repeat(3,minmax(0,1fr))}
	.fx__brand,.fx__col--apps{grid-column:1/-1}
	.fx .fx__col--apps .ftr__list--apps{grid-template-columns:repeat(4,minmax(0,1fr))}
	.fx__side{grid-template-columns:1fr}
	.fx .fx__ctrys{flex-direction:column;gap:8px}
	.fx .fx__ctry-list a{min-height:40px}
}
@media (max-width:720px){
	.fx__cols{grid-template-columns:1fr;gap:0;padding-bottom:12px}
	.fx__brand{justify-items:center;text-align:center;margin-bottom:16px}
	.fx__brand .ftr__social{justify-content:center}
	.fx__side{grid-template-columns:1fr;gap:12px}
	.fx__reach{grid-template-columns:1fr;grid-template-areas:"h" "t" "f";gap:10px;padding:16px;text-align:center}
	.fx__reach-h,.fx__reach-f{justify-self:center;justify-content:center}
	.fx__tiles{grid-auto-flow:row;grid-auto-columns:auto}
	.fx__tile{text-align:start;min-height:56px}
	.fx__plans{justify-content:center}
	.fx__trust{flex-direction:column;justify-content:center;border-top:0;padding-block:16px}
	.fx__trust .ftr__chips{justify-content:center}
	.fx .fx__ctrys{display:block;padding-block:0;border-bottom:1px solid #24364D}
	.fx__ctrys .ftr__acc{justify-content:space-between;font-size:inherit;color:inherit;font-weight:600}
	.js .fx .fx__ctrys .fx__ctry-list{display:none;justify-content:center;gap:4px 16px;padding-bottom:14px}
	.js .fx .fx__ctrys.is-open .fx__ctry-list{display:flex}
	.fx .fx__ctry-list a{display:inline-flex;min-height:40px;padding:0}
	.fx .ftr__legal{justify-content:center}
}
/* footer group titles in the logo's gold (owner 2026-10-19); the focus ring only for the keyboard */
.fx .ftr__col h2,.fx .ftr__col .ftr__acc{color:#EBC572}
.fx .fx__ctrys .ftr__acc{color:#EBC572}
.fx .fx__reach-t{color:#EBC572}
.fx .ftr__acc:focus:not(:focus-visible){outline:none;box-shadow:none}