/* The marketing site (stage 6). The same studio world as the product: night
   navy, the red of the "live" light, Rubik for headings and Heebo for text,
   both with English and Hebrew in one design. Logical properties throughout,
   so one stylesheet serves left to right and right to left. */
:root{
  --navy:#0E1726; --set:#16233A; --panel:#1D2B44; --deep:#0A1220; --line:#2A3A57;
  --text:#FFFFFF; --soft:#D6DEEB; --muted:#9AAAC4; --red:#E8462B; --red-2:#FF8A5C; --on-red:#FFFFFF;
  --display:"Rubik",system-ui,sans-serif; --ui:"Heebo",system-ui,sans-serif;
  --wrap:1180px; --gut:max(20px,env(safe-area-inset-left,0px));
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--navy);color:var(--text);font:400 17px/1.6 var(--ui);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--red-2);outline-offset:3px}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--red);color:var(--on-red);padding:10px 16px;z-index:50;text-decoration:none;font-weight:700}
.skip:focus{top:12px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
h1,h2,h3{font-family:var(--display);line-height:1.1;margin:0}
h2{font-size:clamp(30px,4vw,46px);font-weight:900;letter-spacing:-.01em}
h3{font-size:20px;font-weight:700}
p{margin:0}
.lead{color:var(--soft);font-size:clamp(17px,1.6vw,20px);max-width:62ch}
section{padding-block:clamp(64px,9vw,120px)}
.sec-head{display:grid;gap:14px;margin-bottom:clamp(32px,4vw,52px)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;font:700 17px var(--ui);text-decoration:none;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--soft)}
.btn.p{background:var(--red);border-color:var(--red);color:var(--on-red)}
.btn.p:hover{background:#D23B21;border-color:#D23B21}
.btn.sm{min-height:40px;padding:0 16px;font-size:15px}
.arrow::after{content:"→";display:inline-block}
[dir="rtl"] .arrow::after{content:"←"}

/* the bar */
.bar{position:sticky;top:0;z-index:20;background:rgba(14,23,38,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar .wrap{height:68px;display:flex;align-items:center;gap:28px}
/* flex, not inline: an inline picture sits on the text line and leaves a gap below it, so the logo rode higher than the links */
.bar .logo{display:flex;align-items:center}
.bar .logo img{height:28px;width:auto}
.bar nav{display:flex;gap:24px;flex:1}
.bar nav a{text-decoration:none;color:var(--soft);font-weight:500;white-space:nowrap}
.bar .side a{white-space:nowrap}
.bar nav a:hover{color:var(--text)}
.bar .side{display:flex;align-items:center;gap:10px}
.bar .side .in{color:var(--soft);text-decoration:none;font-weight:500;padding:0 6px}
.bar .lang{font-size:14px;color:var(--muted);text-decoration:none;border:1px solid var(--line);padding:6px 10px}
.bar .nav-acts{display:none}
/* The hamburger: three bars that turn into an X. */
.bar .menu{display:none;place-items:center;width:44px;height:44px;padding:0;background:none;border:1px solid var(--line);color:var(--text);cursor:pointer;transition:border-color .2s}
.bar .menu:hover,.bar.open .menu{border-color:var(--soft)}
.burger{position:relative;width:20px;height:14px}
.burger i{position:absolute;inset-inline:0;height:2px;background:currentColor;transition:transform .25s ease,opacity .2s ease,top .25s ease}
.burger i:nth-child(1){top:0}
.burger i:nth-child(2){top:6px}
.burger i:nth-child(3){top:12px}
.bar.open .burger i:nth-child(1){top:6px;transform:rotate(45deg)}
.bar.open .burger i:nth-child(2){opacity:0;transform:scaleX(.2)}
.bar.open .burger i:nth-child(3){top:6px;transform:rotate(-45deg)}

/* hero */
.hero{padding-block:clamp(48px,7vw,96px) clamp(64px,8vw,110px);background:radial-gradient(ellipse 60% 70% at 70% 30%,#1B2A47 0%,transparent 70%)}
[dir="rtl"] .hero{background:radial-gradient(ellipse 60% 70% at 30% 30%,#1B2A47 0%,transparent 70%)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,13fr);gap:clamp(32px,5vw,72px);align-items:center}
.kicker{display:inline-flex;align-items:center;gap:10px;color:var(--soft);font-weight:500;font-size:15px}
.kicker::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(232,70,43,.25)}
.hero h1{font-size:clamp(44px,5.4vw,76px);font-weight:900;letter-spacing:-.02em;margin:18px 0 22px}
.hero .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero .note{color:var(--muted);font-size:15px;margin-top:16px}
.shot{position:relative;border:1px solid var(--line);background:var(--deep);box-shadow:0 30px 80px rgba(0,0,0,.45);aspect-ratio:16/10;overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.rot-h > span{display:block}
.rot{display:grid!important;color:var(--red-2)}
.rot > span{grid-area:1/1;opacity:0;animation:rot 7.5s infinite}
.rot > span:nth-child(2){animation-delay:2.5s}
.rot > span:nth-child(3){animation-delay:5s}
@keyframes rot{0%{opacity:0;transform:translateY(.3em)}5%,30%{opacity:1;transform:none}35%,100%{opacity:0;transform:translateY(-.3em)}}
@media (prefers-reduced-motion:reduce){.rot > span:first-child{opacity:1}}
.soon{display:inline-block;vertical-align:middle;font:700 13px/1 var(--ui);letter-spacing:.02em;color:var(--red-2);border:1px solid currentColor;padding:5px 8px;transform:translateY(-.15em)}
.hero h1 .soon{font-size:clamp(13px,1.2vw,17px)}

/* the products */
.prods{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.prod{background:var(--set);border:1px solid var(--line);border-top:3px solid var(--red);padding:26px 22px 24px;display:grid;gap:10px;align-content:start;text-decoration:none}
.prod p{color:var(--soft);font-size:16px}
a.prod:hover,a.card.link:hover{border-color:var(--soft);border-top-color:var(--red)}
.prod.later{border-top-color:var(--line);background:transparent;border-style:dashed}
.prod.later h3{color:var(--soft)}
.go{color:var(--red-2);font-weight:700;margin-top:6px;display:inline-flex;gap:8px}
a.card.link{text-decoration:none}
@media (max-width:1020px){.prods{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.prods{grid-template-columns:1fr}}

/* pictures (part 3 of Dubi's notes): devices, windows, photos */
.devices{position:relative;perspective:1800px;padding:2% 6% 9% 0}
[dir="rtl"] .devices{padding:2% 0 9% 6%}
.devices::before{content:"";position:absolute;inset:8% 4% 4%;background:radial-gradient(closest-side,rgba(232,70,43,.32),transparent);filter:blur(30px);z-index:-1}
.laptop{transform:rotateY(-9deg) rotateX(3deg);transform-style:preserve-3d}
[dir="rtl"] .laptop{transform:rotateY(9deg) rotateX(3deg)}
.laptop .screen{aspect-ratio:16/10;background:#05080F;border:9px solid #1B2433;border-bottom-width:12px;border-radius:14px 14px 0 0;overflow:hidden;box-shadow:0 0 0 1px #33415A}
.laptop .screen img{width:100%;height:100%;object-fit:cover;object-position:top}
.laptop .base{height:13px;margin-inline:-5%;background:linear-gradient(#3A465C,#151C29);border-radius:0 0 14px 14px;box-shadow:0 34px 60px rgba(0,0,0,.55)}
.phone{position:absolute;width:24%;inset-inline-end:0;bottom:0;aspect-ratio:390/844;background:#05080F;border:6px solid #1B2433;border-radius:28px;overflow:hidden;box-shadow:0 0 0 1px #33415A,0 30px 70px rgba(0,0,0,.6);transform:rotateY(-9deg) rotateX(3deg) translateZ(40px)}
[dir="rtl"] .phone{transform:rotateY(9deg) rotateX(3deg) translateZ(40px)}
.phone img{width:100%;height:100%;object-fit:cover;object-position:top}
.shot.win{padding-top:28px;border-radius:10px;background:#0A1220;transform:perspective(1800px) rotateY(-4deg);box-shadow:0 0 0 1px #33415A,0 40px 90px rgba(0,0,0,.5),0 0 80px rgba(232,70,43,.10)}
.shot.win::before{content:"";position:absolute;top:10px;inset-inline-start:14px;width:9px;height:9px;border-radius:50%;background:#E8462B;box-shadow:15px 0 0 #F5B83D,30px 0 0 #3CC4A4}
[dir="rtl"] .shot.win{transform:perspective(1800px) rotateY(4deg)}
[dir="rtl"] .shot.win::before{box-shadow:-15px 0 0 #F5B83D,-30px 0 0 #3CC4A4}
.row.alt .shot.win{transform:perspective(1800px) rotateY(4deg)}
[dir="rtl"] .row.alt .shot.win{transform:perspective(1800px) rotateY(-4deg)}
.shot.win img{border-top:1px solid var(--line)}
.banner{margin-top:clamp(28px,4vw,48px);aspect-ratio:21/9;overflow:hidden;border:1px solid var(--line)}
.banner img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.end.photo{background:linear-gradient(180deg,rgba(14,23,38,.80),rgba(14,23,38,.90)),var(--photo) center/cover;padding-block:clamp(90px,12vw,170px)}
@media (max-width:1020px){.shot.win,.row.alt .shot.win,[dir="rtl"] .shot.win,[dir="rtl"] .row.alt .shot.win{transform:none}}
@media (max-width:560px){.devices{padding-inline-end:10%}[dir="rtl"] .devices{padding-inline-end:10%}.phone{width:28%;border-width:4px;border-radius:18px}}

/* a photo on a product card; the questions beside a photo */
.prod .ph{margin:-26px -22px 8px;aspect-ratio:3/2;overflow:hidden;background:var(--deep)}
.prod .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
a.prod:hover .ph img{transform:scale(1.04)}
.prod.later .ph img{filter:saturate(.55) brightness(.8)}
.faq-side{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(28px,5vw,72px);align-items:start}
.side-photo{position:sticky;top:96px;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line)}
.side-photo img{width:100%;height:100%;object-fit:cover}
@media (max-width:820px){.faq-side{grid-template-columns:1fr}.side-photo{display:none}}

/* the inner pages' pictures, drawn in code (Dubi, 20.10) */
.mk{position:relative;container-type:inline-size;background:#0A1220;border-radius:10px;padding-top:28px;box-shadow:0 0 0 1px #33415A,0 40px 90px rgba(0,0,0,.5),0 0 80px rgba(232,70,43,.10)}
.mk::before{content:"";position:absolute;top:10px;inset-inline-start:14px;width:9px;height:9px;border-radius:50%;background:#E8462B;box-shadow:15px 0 0 #F5B83D,30px 0 0 #3CC4A4}
[dir="rtl"] .mk::before{box-shadow:-15px 0 0 #F5B83D,-30px 0 0 #3CC4A4}
.mk > div{border-top:1px solid var(--line);background:var(--navy);font-size:2.3cqw}
.mk small{color:var(--muted);font-size:1.9cqw}
.mk-h{font:700 3.2cqw/1.2 var(--display)}
.mk-f{display:block;border:1px solid #33415A;background:var(--deep);color:var(--soft);padding:1.4cqw 1.8cqw}
.mk-btn{display:inline-block;background:var(--red);color:#fff;font-weight:700;padding:1.5cqw 2.4cqw;text-align:center}
.mk-btn.sm{padding:.9cqw 1.6cqw;font-size:1.9cqw}
.mk-btn.ghost{background:transparent;border:1px solid #33415A;color:var(--text)}
.mk-pill{background:#123D33;color:#7FE0C4;font-weight:700;font-size:1.8cqw;padding:.5cqw 1.4cqw}
.mk-row{display:flex;justify-content:space-between;align-items:center;gap:2cqw;background:var(--set);border:1px solid var(--line);padding:1.4cqw 1.8cqw}
.mk-brand{display:grid;grid-template-columns:1fr 1.25fr;gap:3cqw;padding:3.4cqw}
.mk-set{display:grid;gap:1.3cqw;align-content:start;background:var(--set);border:1px solid var(--line);padding:2.6cqw}
.mk-logo{display:flex;align-items:center;justify-content:center;height:7cqw;border:1px dashed #33415A}
.mk-logo img{height:3cqw;width:auto}
.mk-sw{display:flex;gap:1.2cqw}
.mk-sw i{width:4cqw;height:4cqw;border-radius:50%;background:var(--c)}
.mk-sw i.on{box-shadow:0 0 0 .5cqw var(--set),0 0 0 .9cqw #fff}
.mk-set .mk-btn{justify-self:start;margin-top:1cqw}
.mk-prev{display:grid;gap:1.6cqw;align-content:start}
.mk-room{display:grid;background:#0B1322;border:1px solid #33415A}
.mk-rbar{display:flex;align-items:center;height:5.4cqw;padding:0 1.8cqw;border-bottom:1px solid #2A3A57}
.mk-rbar img{height:2.4cqw;width:auto}
.mk-rstage{position:relative;aspect-ratio:16/8;margin:1.6cqw;background:linear-gradient(135deg,#1F6FEB,#0E1726 80%)}
.mk .m-live{position:absolute;top:1.4cqw;inset-inline-start:1.4cqw;background:#E5202E;color:#fff;font:700 1.6cqw var(--ui);padding:.4cqw 1.1cqw}
.mk-rctl{display:flex;justify-content:center;gap:1cqw;padding:0 0 1.6cqw}
.mk-rctl i{width:3.6cqw;height:2.8cqw;background:#1D2B44;border:1px solid #2A3A57}
.mk-rctl i.acc{width:6cqw;background:#1F6FEB;border-color:#1F6FEB}
.mk-mail{display:grid;gap:1cqw;background:#fff;color:#141B2B;padding:2cqw;border-top:.8cqw solid #1F6FEB}
.mk-mail img{height:2.2cqw;width:auto;filter:invert(1) hue-rotate(180deg)}
.mk-mail .mk-btn{justify-self:start;background:#1F6FEB}
.mk-reg{display:grid}
.mk-reg .mk-rbar{height:6.4cqw}
.mk-regbody{display:grid;gap:1.8cqw;width:56%;margin:5cqw auto 6cqw}
.mk-regbody .mk-h{font-size:4.2cqw}
.mk-note{line-height:1.4}
.mk-after,.mk-files{display:grid;gap:1.8cqw;padding:3.4cqw}
.mk-ahead{display:flex;align-items:center;gap:2cqw}
.mk-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw}
.mk-stats span{display:grid;background:var(--set);border:1px solid var(--line);padding:2cqw}
.mk-stats b{font:900 5.6cqw/1 var(--display)}
.mk-tog{width:6cqw;height:3.2cqw;border-radius:2cqw;background:#3CC4A4;position:relative}
.mk-tog::after{content:"";position:absolute;top:.4cqw;inset-inline-end:.4cqw;width:2.4cqw;height:2.4cqw;border-radius:50%;background:#fff}
.mk-after .mk-btn.ghost{justify-self:start}
.mk-sub{margin-top:1cqw}
.mk-spk{display:grid;gap:1cqw;background:var(--set);border:1px solid var(--line);padding:1.8cqw}
.mk-spk .mk-row{background:var(--navy)}
@media (max-width:560px){.mk > div{font-size:2.8cqw}.mk small{font-size:2.4cqw}.mk-brand{grid-template-columns:1fr}}

/* "Try it": each thing to try with an icon */
.tries{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.try{background:var(--navy);border:1px solid var(--line);padding:26px 22px;display:grid;gap:10px;align-content:start}
.try p{color:var(--soft);font-size:16px}
.try-ic{width:56px;height:56px;display:grid;place-items:center;background:rgba(232,70,43,.14);border:1px solid rgba(232,70,43,.4);margin-bottom:6px}
.try-ic svg{fill:none;stroke:var(--red-2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1020px){.tries{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.tries{grid-template-columns:1fr}}

/* proof */
.proof{padding-block:36px;border-block:1px solid var(--line);background:var(--set)}
.proof .wrap{display:flex;align-items:center;gap:22px}
.proof img{height:56px;width:auto}
.proof p{color:var(--soft)}
/* what customers say (26.10): a card each, the logo, the words, who said them */
.quotes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.quote{margin:0;background:var(--set);border:1px solid var(--line);padding:24px 22px;display:flex;flex-direction:column;gap:14px}
.quote img{height:44px;width:auto;max-width:180px;object-fit:contain;align-self:flex-start}
.quote .org{font:700 18px var(--display)}
.quote blockquote{margin:0;font-size:17px;line-height:1.6}
.quote blockquote::before{content:"“";color:var(--red);font:900 34px/0 var(--display);vertical-align:-12px;margin-inline-end:4px}
.quote figcaption{color:var(--muted);font-size:14.5px}
/* articles (26.10): the list as cards, an article as a narrow column of text */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.post-card{display:flex;flex-direction:column;background:var(--set);border:1px solid var(--line);text-decoration:none;color:inherit;transition:border-color .2s}
.post-card:hover{border-color:var(--soft)}
.post-card .ph{aspect-ratio:16/9;background:var(--deep);overflow:hidden}
.post-card .ph img{width:100%;height:100%;object-fit:cover}
.post-card .t{padding:20px 20px 22px;display:grid;gap:8px}
.post-card time,.post time{color:var(--muted);font-size:14px}
.post-card h2{margin:0;font:700 21px/1.3 var(--display)}
.post-card p{margin:0;color:var(--soft)}
.posts .none{color:var(--muted)}
.post{max-width:760px;padding-block:clamp(36px,6vw,72px)}
.post .back{color:var(--soft);text-decoration:none;font-size:15px}
.post h1{font:900 clamp(30px,4.4vw,46px)/1.15 var(--display);margin:18px 0 10px}
.post .lead{margin-top:14px}
.post .cover{width:100%;height:auto;margin:28px 0 8px;border:1px solid var(--line)}
.prose{font-size:18px;line-height:1.8;margin-top:24px}
.prose h2{font:700 26px/1.3 var(--display);margin:36px 0 10px}
.prose h3{font:700 21px/1.3 var(--display);margin:28px 0 8px}
.prose p,.prose ul,.prose ol{margin:0 0 18px}
.prose ul,.prose ol{padding-inline-start:24px}
.prose li{margin-bottom:6px}
.prose a{color:var(--red-2)}
.prose blockquote{margin:24px 0;padding-inline-start:18px;border-inline-start:3px solid var(--red);color:var(--soft)}
.prose img{max-width:100%;height:auto;margin:10px 0;border:1px solid var(--line)}
.prose figure{margin:24px 0}.prose figcaption{color:var(--muted);font-size:14px;margin-top:6px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
.step{background:var(--set);border:1px solid var(--line);display:flex;flex-direction:column}
.step .pic{aspect-ratio:16/10;background:var(--deep);border-bottom:1px solid var(--line);overflow:hidden}
.step .pic img{width:100%;height:100%;object-fit:cover;object-position:top}
.step .txt{padding:22px 22px 26px;display:grid;gap:8px}
.step h3::before{counter-increment:s;content:counter(s);display:inline-grid;place-items:center;width:30px;height:30px;margin-inline-end:12px;background:var(--red);color:#fff;font:900 16px var(--display);vertical-align:2px}
.step p{color:var(--soft)}

/* the three steps, drawn in code (Dubi, 20.10) */
@property --acc{syntax:'<color>';inherits:true;initial-value:#1F6FEB}
.step .pic.v{container-type:inline-size;display:grid;place-items:center;position:relative;background:radial-gradient(ellipse 80% 90% at 50% 0%,#1E2D4B,var(--deep) 70%);aspect-ratio:16/11}
.v1 .m-card{width:64cqw;background:#16233A;border:1px solid #33415A;border-bottom:3px solid var(--red);padding:4.2cqw 4.6cqw 3.8cqw;display:grid;gap:2.2cqw;box-shadow:0 4cqw 10cqw rgba(0,0,0,.45)}
.v1 .m-logo{height:3.2cqw;width:auto;justify-self:start}
.v1 b{font:900 5.4cqw/1.1 var(--display)}
.v1 .m-field{border:1px solid #33415A;background:var(--deep);color:var(--muted);font-size:3.4cqw;padding:2.4cqw 2.8cqw;text-align:start}
[dir="rtl"] .v1 .m-field{text-align:right}
.v1 .m-btn{background:var(--red);color:#fff;font:700 3.6cqw var(--ui);padding:2.6cqw;text-align:center}
.v1 .m-note{color:var(--muted);font-size:3cqw;text-align:center}
.v2{grid-template-columns:auto auto;justify-content:center;gap:6%;padding:0 6%;animation:acc 6s infinite steps(1)}
@keyframes acc{0%{--acc:#1F6FEB}33.3%{--acc:#0F9D76}66.6%{--acc:#8E44AD}}
.v2 .m-sw{display:grid;gap:3cqw}
.v2 .m-sw i{width:7cqw;height:7cqw;border-radius:50%;background:var(--c);box-shadow:0 0 0 .6cqw var(--deep),0 0 0 1cqw transparent;animation:sw 6s infinite steps(1)}
.v2 .m-sw i:nth-child(1){animation-delay:0s}.v2 .m-sw i:nth-child(2){animation-delay:-4s}.v2 .m-sw i:nth-child(3){animation-delay:-2s}
@keyframes sw{0%{box-shadow:0 0 0 .6cqw var(--deep),0 0 0 1.2cqw #fff}33.3%,100%{box-shadow:0 0 0 .6cqw var(--deep),0 0 0 1.2cqw transparent}}
.v2 .m-room{width:62cqw;background:#0B1322;border:1px solid #33415A;box-shadow:0 4cqw 10cqw rgba(0,0,0,.45);display:grid}
.v2 .m-bar{height:7cqw;border-bottom:1px solid #2A3A57;display:flex;align-items:center;padding:0 2.4cqw}
.v2 .m-logos{display:grid;height:3.6cqw}
.v2 .m-logos img{grid-area:1/1;height:3.6cqw;width:auto;opacity:0;animation:lg 6s infinite steps(1)}
.v2 .m-logos img:nth-child(2){animation-delay:2s}.v2 .m-logos img:nth-child(3){animation-delay:4s}
@keyframes lg{0%{opacity:1}33.3%,100%{opacity:0}}
.v2 .m-stage{position:relative;aspect-ratio:16/9;margin:2.4cqw;background:linear-gradient(135deg,var(--acc),#0E1726 80%);transition:none}
.v .m-live{position:absolute;top:2cqw;inset-inline-start:2cqw;background:#E5202E;color:#fff;font:700 2.4cqw var(--ui);padding:.6cqw 1.6cqw}
.v2 .m-lower{position:absolute;bottom:2.4cqw;inset-inline-start:2.4cqw;width:30%;height:3.4cqw;background:var(--acc)}
.v2 .m-ctl{display:flex;justify-content:center;gap:1.6cqw;padding:0 0 2.4cqw}
.v2 .m-ctl i{width:5.6cqw;height:4.4cqw;background:#1D2B44;border:1px solid #2A3A57}
.v2 .m-ctl i.acc{background:var(--acc);border-color:var(--acc);width:9cqw}
.v3{grid-template-columns:auto auto auto;justify-content:center;gap:4%;padding:0 5%}
.v3 .m-msg{width:36cqw;background:#1D3B2F;border:1px solid #2F5A47;border-radius:3cqw 3cqw 3cqw .6cqw;padding:3cqw 3.4cqw;display:grid;gap:1.6cqw;font-size:3.4cqw;line-height:1.35;box-shadow:0 3cqw 8cqw rgba(0,0,0,.4)}
[dir="rtl"] .v3 .m-msg{border-radius:3cqw 3cqw .6cqw 3cqw}
.v3 .m-msg u{color:#7FD8B6;text-decoration:underline;font-size:3.2cqw;word-break:break-all}
.v3 .m-arrow{width:9cqw;height:auto;color:var(--red-2)}
[dir="rtl"] .v3 .m-arrow{transform:scaleX(-1)}
.v3 .m-phone{width:24cqw;aspect-ratio:9/18;background:#0B1322;border:1.2cqw solid #1B2433;border-radius:4cqw;box-shadow:0 0 0 1px #33415A,0 4cqw 10cqw rgba(0,0,0,.5);display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}
.v3 .m-pbar{height:6cqw;display:flex;align-items:center;padding:0 1.6cqw;border-bottom:1px solid #2A3A57}
.v3 .m-pbar img{height:2.6cqw;width:auto}
.v3 .m-pstage{position:relative;margin:1.6cqw;background:linear-gradient(160deg,#1F6FEB,#0E1726 85%)}
.v3 .m-in{margin:0 1.6cqw 2cqw;background:#3CC4A4;color:#0B1322;font:700 2.8cqw var(--ui);padding:1.4cqw;text-align:center;animation:pop 3s infinite}
@keyframes pop{0%,20%{transform:scale(.9);opacity:.4}30%,100%{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.v2 .m-logos img:first-child{opacity:1}.v2 .m-sw i:first-child{box-shadow:0 0 0 .6cqw var(--deep),0 0 0 1.2cqw #fff}}

/* brands */
.brands{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,4vw,64px);align-items:center}
.tabs{display:grid;gap:10px;margin-top:28px}
.tabs button{display:flex;align-items:center;gap:14px;text-align:start;background:transparent;border:1px solid var(--line);color:var(--soft);padding:14px 18px;font:500 17px var(--ui);cursor:pointer}
.tabs button i{width:16px;height:16px;flex:none}
.tabs button[aria-selected="true"]{border-color:var(--text);color:var(--text);background:var(--set)}
.brands .shot img{transition:opacity .25s}

/* who gets in */
.gates{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gate{border-top:3px solid var(--red);background:var(--set);padding:24px 22px 28px;display:grid;gap:10px;align-content:start}
.gate p{color:var(--soft);font-size:16px}

/* who gets in: the screen people meet (Dubi, 20.10) */
.gate{border-top:0;padding:0 0 24px;overflow:hidden;gap:12px}
.gate h3{display:flex;align-items:center;gap:10px;padding:0 20px}
.gate p{padding:0 20px}
.gi{fill:none;stroke:var(--red-2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.gp{width:62%;margin:26px auto 8px;aspect-ratio:9/15;background:#0B1322;border:6px solid #1B2433;border-bottom:0;border-radius:22px 22px 0 0;box-shadow:0 0 0 1px #33415A;display:grid;grid-template-rows:auto 1fr;overflow:hidden;container-type:inline-size}
.gate{background:linear-gradient(180deg,#1E2D4B 0,var(--set) 46%)}
.gp-bar{height:16cqw;display:flex;align-items:center;padding:0 7cqw;border-bottom:1px solid #2A3A57}
.gp-bar img{height:7cqw;width:auto}
.gp-body{display:flex;flex-direction:column;justify-content:center;gap:5cqw;padding:7cqw}
.gp-t{font:700 8cqw/1.15 var(--display);text-align:center}
.gp-f{border:1px solid #33415A;background:var(--deep);color:var(--muted);font-size:6.4cqw;padding:4cqw 5cqw}
.gp-b{background:var(--red);color:#fff;font:700 6.6cqw var(--ui);padding:4.4cqw;text-align:center}
.gp-stage{position:relative;flex:1;min-height:50cqw;background:linear-gradient(160deg,#1F6FEB,#0E1726 85%)}
.gp-live{position:absolute;top:4cqw;inset-inline-start:4cqw;background:#E5202E;color:#fff;font:700 5cqw var(--ui);padding:1.2cqw 3cqw}
.gp-ico{display:grid;place-items:center}
.gp-ico svg{width:22cqw;height:22cqw;fill:none;stroke:var(--red-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* while live and after: a mosaic of the room's pieces */
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(180px,auto);gap:16px}
.tile{background:var(--set);border:1px solid var(--line);padding:22px;display:grid;grid-template-rows:1fr auto;gap:16px;overflow:hidden}
.tile p{color:var(--soft);font-weight:500;font-size:16px}
.tile .tm{display:grid;align-content:center;gap:10px;min-height:0}
.live .t-poll{grid-column:span 2;grid-row:span 2}
.live .t-chat,.live .t-cap,.live .t-join{grid-column:span 2}
.live .t-guest,.live .t-share{grid-column:span 1}
.after .t-rec,.after .t-stars,.after .t-mail,.after .t-replay{grid-column:span 2}
.after .t-report{grid-column:span 2;grid-row:span 2}
.t-poll .q{font:700 22px/1.25 var(--display);margin-bottom:6px}
.t-poll .opt{position:relative;display:flex;justify-content:space-between;padding:14px 16px;border:1px solid #33415A;font-weight:500;overflow:hidden;isolation:isolate}
.t-poll .opt::before{content:"";position:absolute;inset:0;inset-inline-end:auto;width:var(--p);background:rgba(232,70,43,.28);z-index:-1;animation:grow 2.4s ease-out both}
.t-poll .opt:nth-of-type(2)::before{background:rgba(255,255,255,.08)}
.t-poll .opt em{font-style:normal;font-weight:700}
.t-poll small{color:var(--muted)}
@keyframes grow{from{width:0}}
.t-chat .msg{display:grid;gap:2px;background:#0B1322;border:1px solid #2A3A57;padding:9px 12px;justify-self:start;max-width:92%;font-size:15px}
.t-chat .msg b{font-size:13px;color:var(--muted)}
.t-chat .msg.me{justify-self:end;background:rgba(232,70,43,.14);border-color:rgba(232,70,43,.4)}
.t-cap .cap-stage{display:grid;align-items:end;height:120px;background:linear-gradient(160deg,#2B3F66,#0E1726);padding:10px}
.t-cap .cap{justify-self:center;background:rgba(0,0,0,.72);padding:6px 12px;font-size:15px;text-align:center}
.t-join .tm{position:relative;place-items:center}
.t-join .join{display:inline-flex;align-items:center;gap:10px;background:var(--red);color:#fff;font:700 18px var(--ui);padding:14px 22px;box-shadow:0 10px 30px rgba(232,70,43,.35);animation:pulse 2.4s infinite}
.t-join .join .arrow::after{content:"→"}
[dir="rtl"] .t-join .join .arrow::after{content:"←"}
.t-join .cursor{position:absolute;top:58%;left:58%}
[dir="rtl"] .t-join .cursor{left:auto;right:58%;transform:scaleX(-1)}
@keyframes pulse{50%{box-shadow:0 10px 40px rgba(232,70,43,.6)}}
.t-guest .avs{display:flex;justify-content:center}
.t-guest .avs i{width:52px;height:52px;border-radius:50%;background:var(--c);display:grid;place-items:center;font:700 20px var(--display);font-style:normal;border:3px solid var(--set);margin-inline-start:-10px}
.t-guest small{color:var(--muted);text-align:center;font-size:13px}
.t-share .slide{aspect-ratio:16/10;background:#F4F6FA;display:grid;grid-template-columns:repeat(4,1fr);align-items:end;gap:6px;padding:12px}
.t-share .slide i{background:#1F6FEB;height:30%}
.t-share .slide i:nth-child(2){height:55%}.t-share .slide i:nth-child(3){height:80%;background:var(--red)}.t-share .slide i:nth-child(4){height:65%}
.t-rec .file{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;background:#0B1322;border:1px solid #2A3A57;padding:14px}
.t-rec svg{fill:none;stroke:var(--red-2);stroke-width:1.8}
.t-rec .file > span:nth-child(2){display:grid}
.t-rec small{color:var(--muted)}
.t-rec .dl{border:1px solid #33415A;padding:8px 12px;font-weight:700;font-size:14px}
.t-report .bars{display:flex;align-items:end;gap:6px;height:150px;border-bottom:1px solid #33415A}
.t-report .bars i{flex:1;height:var(--h);background:linear-gradient(#FF8A5C,#E8462B);animation:rise 1.6s ease-out both}
@keyframes rise{from{height:0}}
.t-report .nums{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:4px 10px;margin-top:6px}
.t-report .nums b{font:900 34px var(--display)}
.t-report .nums small{color:var(--soft)}
.t-stars .tm{justify-items:center;text-align:center}
.t-stars .stars{color:#F5B83D;font-size:30px;letter-spacing:4px}
.t-stars b{font:900 40px var(--display)}
.t-stars small{color:var(--muted)}
.t-mail .env{display:grid;gap:6px;background:#fff;color:#141B2B;padding:16px;border-top:4px solid #1F6FEB}
.t-mail .env img{height:16px;width:auto;filter:invert(1) hue-rotate(180deg)}
.t-mail .env small{color:#4A5672}
.t-mail .mb{justify-self:start;background:#1F6FEB;color:#fff;font-weight:700;font-size:13px;padding:7px 12px;margin-top:4px}
.t-replay .tm{place-items:center;gap:16px}
.t-replay .play{width:64px;height:64px;border-radius:50%;background:var(--red);display:grid;place-items:center}
.t-replay .play svg{fill:#fff}
.t-replay .bar{width:100%;height:6px;background:#2A3A57}
.t-replay .bar i{display:block;width:38%;height:100%;background:var(--red-2)}
@media (max-width:1020px){.bento{grid-template-columns:repeat(4,1fr)}.live .t-guest,.live .t-share{grid-column:span 2}}
@media (max-width:560px){.gp{width:46%}.bento{grid-template-columns:1fr}.bento .tile{grid-column:auto!important;grid-row:auto!important}}

/* the Zoom table, as a card */
.cmp-card{border:1px solid var(--line);background:var(--navy);overflow-x:auto}
.cmp thead th.us img{height:20px;width:auto;margin-inline:auto}
.cmp th.us,.cmp td.us{text-align:center;background:linear-gradient(180deg,rgba(232,70,43,.16),rgba(232,70,43,.07));border-inline:1px solid rgba(232,70,43,.35)}
.cmp td.us:not(.cost)::before{content:"✓";display:inline-grid;place-items:center;width:24px;height:24px;margin-inline-end:8px;border-radius:50%;background:#3CC4A4;color:#0B1322;font-weight:900;font-size:14px}
.cmp td.them.no::before,.cmp td.them.part::before{display:inline-grid;place-items:center;width:24px;height:24px;margin-inline-end:8px;border-radius:50%;font-weight:900;font-size:13px}
.cmp td.them.no::before{content:"✕";background:#2A3A57;color:#9AAAC4}
.cmp td.them.part::before{content:"◐";background:#2A3A57;color:#F5B83D}
.cmp td.us.cost{font:900 22px var(--display);color:var(--text)}

/* home prices: the recommended plan stands out */
.price{position:relative}
.price .tag{position:absolute;top:-13px;inset-inline-start:20px;background:var(--red);color:#fff;font:700 13px var(--ui);padding:3px 10px}
.price.hot{background:linear-gradient(180deg,rgba(232,70,43,.16),var(--set) 60%);box-shadow:0 0 0 1px var(--red),0 20px 60px rgba(232,70,43,.18)}
.price b{font-size:40px}

/* live and after */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px)}
.ticks{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:14px}
.ticks li{display:flex;gap:14px;align-items:baseline;font-size:18px;border-bottom:1px solid var(--line);padding-bottom:14px}
.ticks li::before{content:"";flex:none;width:9px;height:9px;background:var(--red);transform:translateY(-2px)}

/* compare */
.cmp{width:100%;border-collapse:collapse;font-size:17px}
.cmp th,.cmp td{padding:16px 18px;border-bottom:1px solid var(--line);text-align:start}
.cmp thead th{font:700 15px var(--ui);color:var(--muted);text-transform:none}
.cmp thead th.us{color:var(--text)}
.cmp td.us{background:rgba(232,70,43,.08);font-weight:700}
.cmp td.them{color:var(--muted)}
.cmp tbody th{font-weight:500}

/* prices */
.prices{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.price{background:var(--set);border:1px solid var(--line);padding:26px 22px;display:grid;gap:10px;align-content:start}
.price.hot{border-color:var(--red)}
.price b{font:900 34px var(--display)}
.price b small{font:500 15px var(--ui);color:var(--muted);margin-inline-start:4px}
.price p{color:var(--soft);font-size:16px}
.more{margin-top:26px}

/* questions */
.faq{display:grid;gap:0;max-width:860px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;font:700 19px var(--display);display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 26px/1 var(--ui);color:var(--muted)}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 0 24px;color:var(--soft);max-width:70ch}

/* the end */
.end{text-align:center;background:linear-gradient(180deg,transparent,rgba(232,70,43,.10));border-top:1px solid var(--line)}
.end .wrap{display:grid;justify-items:center;gap:18px}
.end h2{font-size:clamp(34px,5vw,60px)}
.end p{color:var(--soft)}

/* footer */
footer{border-top:1px solid var(--line);padding-block:56px 40px;color:var(--muted);font-size:15px}
footer .wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:28px}
footer img{height:26px;width:auto;margin-bottom:12px}
footer h4{margin:0 0 12px;color:var(--soft);font:700 14px var(--ui)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a{text-decoration:none}
footer a:hover{color:var(--text)}
footer .rights{grid-column:1/-1;border-top:1px solid var(--line);padding-top:20px;margin-top:12px;display:flex;justify-content:space-between;gap:16px}
footer .lang-foot{color:var(--muted);font-size:.9em;text-decoration:none}
footer .lang-foot:hover{color:var(--soft);text-decoration:underline}

/* narrower screens */
@media (max-width:1020px){
  .hero .wrap,.brands{grid-template-columns:1fr}
  .gates,.prices{grid-template-columns:1fr 1fr}
  .bar nav{gap:16px}
}
/* The bar folds into "Menu" before its links crowd the logo (seven links since the user guide, 22.10). */
@media (max-width:1060px){
  .bar nav,.bar .side .in{display:none}
  .bar .menu{display:grid}
  .bar .wrap{justify-content:space-between}
  /* The open menu: a panel under the bar, to the bottom of the screen. */
  .bar.open nav{display:flex;flex-direction:column;position:fixed;top:68px;inset-inline:0;bottom:0;overflow-y:auto;overscroll-behavior:contain;
    padding:clamp(12px,3vw,28px) var(--gut) calc(28px + env(safe-area-inset-bottom,0px));gap:0;
    background:radial-gradient(ellipse 80% 50% at 50% 0%,#1B2A47 0%,transparent 70%),var(--navy);animation:navIn .22s ease-out}
  .bar.open nav > a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);
    font:700 clamp(22px,4.4vw,30px)/1.2 var(--display);color:var(--text);opacity:0;animation:linkIn .3s ease-out forwards}
  .bar.open nav > a::after{content:"→";font:400 20px var(--ui);color:var(--muted);transition:transform .2s,color .2s}
  [dir="rtl"] .bar.open nav > a::after{content:"←"}
  .bar.open nav > a:hover::after,.bar.open nav > a:focus-visible::after{color:var(--red-2);transform:translateX(4px)}
  [dir="rtl"] .bar.open nav > a:hover::after,[dir="rtl"] .bar.open nav > a:focus-visible::after{transform:translateX(-4px)}
  .bar.open nav > a[aria-current="page"]{color:var(--red-2)}
  .bar.open nav > a[aria-current="page"]::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--red)}
  .bar.open nav > a:nth-child(2){animation-delay:.03s}
  .bar.open nav > a:nth-child(3){animation-delay:.06s}
  .bar.open nav > a:nth-child(4){animation-delay:.09s}
  .bar.open nav > a:nth-child(5){animation-delay:.12s}
  .bar.open nav > a:nth-child(6){animation-delay:.15s}
  .bar.open nav > a:nth-child(7){animation-delay:.18s}
  .bar.open nav .nav-acts{display:grid;gap:10px;margin-top:28px}
  .bar.open nav .nav-acts .btn{width:100%}
  .bar.open nav .nav-acts .btn.p{display:none}
  /* A blurred bar would hold the fixed panel inside itself: solid while open. */
  .bar.open{background:var(--navy);backdrop-filter:none;-webkit-backdrop-filter:none}
  body.menu-open{overflow:hidden}
}
@keyframes navIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes linkIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bar.open nav,.bar.open nav > a{animation:none;opacity:1}.burger i{transition:none}}
@media (max-width:820px){
  .steps,.two{grid-template-columns:1fr}
  footer .wrap{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .bar .side .btn{display:none}
  .bar.open nav .nav-acts .btn.p{display:inline-flex}
  .gates,.prices{grid-template-columns:1fr}
  .hero .acts .btn{width:100%}
  .cmp{font-size:15px}
  .cmp th,.cmp td{padding:12px 8px}
  footer .wrap{grid-template-columns:1fr}
}

/* a page's own top (stage 6, the pages after home) */
.page-top{padding-block:clamp(48px,7vw,88px) clamp(28px,4vw,48px)}
.page-top h1{font-size:clamp(40px,5.4vw,68px);font-weight:900;letter-spacing:-.02em}

/* pricing: the switches, the plans */
.switches{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.seg{display:inline-flex;border:1px solid var(--line)}
.seg button{background:none;border:0;color:var(--soft);font:500 16px var(--ui);padding:10px 18px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--text);color:var(--navy)}
.seg em{font-style:normal;font-size:13px;color:var(--red-2);margin-inline-start:4px}
.seg button[aria-pressed="true"] em{color:#B5361E}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:start}
.plan{position:relative;background:var(--set);border:1px solid var(--line);padding:28px 22px;display:grid;gap:10px}
.plan.hot{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.plan .tag{position:absolute;top:-13px;inset-inline-start:20px;background:var(--red);color:#fff;font:700 13px var(--ui);padding:3px 10px}
.plan h2{font-size:24px}
.plan .for{color:var(--muted);font-size:15px}
.plan .amt{font:900 44px/1 var(--display);margin-top:8px}
.plan .per{color:var(--muted);font-size:15px;min-height:1.6em}
.plan .btn{margin-block:8px 6px}
.ticks.small{margin-top:8px;gap:10px}
.ticks.small li{font-size:15.5px;padding-bottom:10px}
.fine{color:var(--muted);font-size:14.5px;margin-top:22px;max-width:80ch}
.box{background:var(--navy);border:1px solid var(--line);padding:30px 28px;display:grid;gap:14px;align-content:start}
.box p{color:var(--soft)}
.box .btn{justify-self:start}
@media (max-width:1020px){.plans{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.plans{grid-template-columns:1fr}.seg{width:100%}.seg button{flex:1}}

/* features: rows of text and a picture, then cards */
.row.alt{background:var(--set);border-block:1px solid var(--line)}
.feat{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:center}
.row.alt .feat > :first-child{order:2}
.feat .lead{margin-top:14px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--set);border:1px solid var(--line);padding:26px 24px;display:grid;gap:10px;align-content:start}
.card p{color:var(--soft);font-size:16px}
@media (max-width:1020px){.feat{grid-template-columns:1fr}.row.alt .feat > :first-child{order:0}.cards{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}

/* questions: groups */
.faq-group{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(20px,4vw,64px);align-items:start}
.faq-group h2{font-size:clamp(24px,2.6vw,32px)}
@media (max-width:820px){.faq-group{grid-template-columns:1fr}}

/* contact: the form */
.contact{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:start}
.form{display:grid;gap:18px;max-width:640px}
.field{display:grid;gap:8px;color:var(--soft);font-weight:500}
.field input,.field select,.field textarea{font:400 17px var(--ui);color:var(--text);background:var(--deep);border:1px solid var(--line);padding:12px 14px;width:100%}
.field textarea{resize:vertical;min-height:150px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red-2)}
.form .btn{justify-self:start;min-width:160px}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.msg{padding:12px 16px;border:1px solid var(--line)}
.msg.ok{border-color:#3CC4A4;color:#BFF0E2}
.msg.err{border-color:var(--red);color:#FFC9BC}
@media (max-width:820px){.contact{grid-template-columns:1fr}}

/* legal pages */
.draft{display:inline-block;justify-self:start;background:#3A2A00;color:#FFE7A3;border:1px solid #8A6A00;padding:6px 12px;font-size:14.5px}
.legal{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,3fr);gap:clamp(24px,4vw,64px);align-items:start}
.legal article{display:grid;gap:30px;max-width:72ch}
.legal article section{padding:0}
.legal article h2{font-size:22px;margin-bottom:8px}
.legal article p{color:var(--soft)}
.legal nav{position:sticky;top:90px;gap:10px}
.legal nav a{color:var(--soft);text-decoration:none}
.legal nav a:hover{color:var(--text)}
@media (max-width:820px){.legal{grid-template-columns:1fr}.legal nav{position:static}}

/* The courses page (20.10): the course as a student watches it, its sales page, a certificate; drawn in code. */
.cards.two-cards{grid-template-columns:1fr 1fr}
ol.nums{list-style:none;counter-reset:n;margin:18px 0 0;padding:0;display:grid;gap:12px}
ol.nums li{counter-increment:n;display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;color:var(--soft);font-size:17px}
ol.nums li::before{content:counter(n);display:grid;place-items:center;width:30px;height:30px;background:var(--red);color:#fff;font:900 15px var(--display)}
.mk-learn > div{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:2.6cqw;padding:2.6cqw}
.ml-main{display:grid;gap:1.8cqw;align-content:start}
.ml-video{position:relative;aspect-ratio:16/9;background:radial-gradient(ellipse 70% 80% at 40% 35%,#2A3E63,#0A1220 75%);border:1px solid var(--line)}
.ml-play{position:absolute;top:50%;left:50%;width:7cqw;height:7cqw;margin:-3.5cqw;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3)}
.ml-play::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-style:solid;border-width:1.3cqw 0 1.3cqw 2.1cqw;border-color:transparent transparent transparent #fff}
.ml-wm{position:absolute;top:22%;left:12%;color:rgba(255,255,255,.3);font-size:1.6cqw}
.ml-bar{position:absolute;inset-inline:3%;bottom:6%;height:.5cqw;background:rgba(255,255,255,.2)}
.ml-bar i{display:block;height:100%;width:38%;background:var(--red)}
.ml-next{display:flex;justify-content:flex-end}
.ml-side{display:grid;gap:1.1cqw;align-content:start;background:var(--set);border:1px solid var(--line);padding:2cqw}
.ml-title{font:700 2.4cqw/1.25 var(--display)}
.ml-prog{height:.6cqw;background:var(--deep)}
.ml-prog i{display:block;height:100%;width:40%;background:var(--red)}
.ml-ch{margin-top:.8cqw;font-weight:700}
.ml-l{display:grid;grid-template-columns:3cqw 1fr;gap:1.2cqw;align-items:center;font-size:1.95cqw;color:var(--soft);padding:.6cqw .4cqw}
.ml-l i{font-style:normal;width:2.8cqw;height:2.8cqw;display:grid;place-items:center;border-radius:50%;border:1px solid #33415A;font-size:1.4cqw}
.ml-l.done i{background:#3CC4A4;border-color:#3CC4A4;color:#06231C}
.ml-l.on{background:#22335A;border-inline-start:.4cqw solid var(--red);color:#fff}
.ml-l.lock{opacity:.7}
.mk-sale > div{display:grid;gap:1.4cqw;padding:3cqw}
.ms-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:3cqw;align-items:center;margin-bottom:1.4cqw}
.ms-top > div{display:grid;gap:1cqw}
.ms-cover{aspect-ratio:16/10;background:linear-gradient(135deg,#E8462B 0%,#F5B83D 55%,#3CC4A4 120%);opacity:.85}
.ms-facts{border:1px solid #33415A;padding:.5cqw 1.2cqw;justify-self:start}
.ms-price{font:900 3.6cqw var(--display)}
.ms-ctas{display:flex;align-items:center;gap:2cqw;flex-wrap:wrap}
.ms-have{text-decoration:underline}
.ms-row{display:grid;grid-template-columns:3cqw 1fr auto;gap:1.6cqw;align-items:center;background:var(--set);border:1px solid var(--line);padding:1.4cqw 1.8cqw}
.ms-row i{font-style:normal;color:var(--muted);font-weight:700}
.ms-free{border:1px solid var(--red);font-size:1.7cqw;padding:.3cqw 1cqw}
.mk-cert > div{padding:4cqw;background:radial-gradient(ellipse 80% 90% at 50% 0%,#1E2D4B,var(--deep) 70%)}
.mc-paper{display:grid;justify-items:center;gap:1.4cqw;text-align:center;background:#fff;color:#141B2B;padding:6cqw 5cqw;outline:.5cqw solid var(--red);outline-offset:-2.4cqw;aspect-ratio:297/210;align-content:center}
.mc-paper small{color:#4A5672;font-size:2cqw}
.mc-k{font:900 4.6cqw var(--display);color:var(--red)}
.mc-name{font:900 4.4cqw var(--display);border-bottom:.2cqw solid #C9D3E5;padding:0 3cqw .8cqw}
.mc-course{font:700 3cqw var(--display)}
@media (max-width:820px){.cards.two-cards{grid-template-columns:1fr}.mk-learn > div{grid-template-columns:1fr}.ms-top{grid-template-columns:1fr}.ms-cover{display:none}}
.plan.plan-wide{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);align-items:center;gap:28px}
.plan.plan-wide > div{display:grid;gap:10px}
@media (max-width:820px){.plan.plan-wide{grid-template-columns:1fr}}
/* The help page (the user guide, docs/guide): where to start by role, then the guide itself. */
.help-roles{font-size:clamp(24px,2.6vw,32px);margin-bottom:18px}
.help-cards ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.help-cards a{color:var(--soft)}
.help-cards a:hover{color:var(--text)}
.guide{max-width:900px;counter-reset:part}
.guide section.part{counter-increment:part;padding-block:clamp(36px,5vw,56px) 0;border-top:1px solid var(--line);margin-top:clamp(36px,5vw,56px);scroll-margin-top:80px}
.guide h2{font-size:clamp(26px,3vw,36px);margin-bottom:16px}
.guide h2::before{content:counter(part);color:var(--red-2);margin-inline-end:12px}
.guide h3{font-size:clamp(19px,1.9vw,22px);margin:28px 0 10px}
.guide p,.guide li,.guide td{color:var(--soft)}
.guide ol,.guide ul{padding-inline-start:24px;display:grid;gap:6px}
.guide b,.guide .q{color:var(--text)}
.guide .q{font-weight:700}
.guide .who{display:inline-block;background:var(--red);color:var(--on-red);font:700 13px var(--ui);padding:2px 9px;margin-inline-end:8px;vertical-align:2px}
.guide figure{margin:20px 0 26px}
.guide figure img{display:block;max-width:100%;height:auto;max-height:720px;object-fit:contain;margin:0 auto;border:1px solid var(--line)}
.guide figure.small img{max-width:min(100%,560px)}
.guide figcaption{text-align:center;color:var(--muted);font-size:15px;margin-top:8px}
.guide .two{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.guide .tip,.guide .warn{background:var(--set);border-inline-start:4px solid #2BB58C;padding:12px 16px;margin:14px 0;color:var(--soft)}
.guide .warn{border-inline-start-color:#E7C04B}
.guide table{width:100%;border-collapse:collapse;margin:14px 0;font-size:16px;display:block;overflow-x:auto}
.guide th,.guide td{text-align:start;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.guide th{background:var(--set);color:var(--text)}
@media (max-width:820px){.help-cards{grid-template-columns:1fr}.guide .two{grid-template-columns:1fr}}
/* Comparison pages (22.10): our column can say "no" too, and theirs "yes" (honest rows). */
.cmp td.us.no::before{content:"✕";background:#2A3A57;color:#9AAAC4}
.cmp td.us.part::before{content:"◐";background:#2A3A57;color:#F5B83D}
.cmp td.them.yes::before{content:"✓";display:inline-grid;place-items:center;width:24px;height:24px;margin-inline-end:8px;border-radius:50%;background:#3CC4A4;color:#0B1322;font-weight:900;font-size:14px}
.cmp-page td.us.cost,.cmp-page td.them.cost{font:700 17px/1.4 var(--ui);color:var(--text)}
.cmp thead th.us{font:900 18px var(--display);color:var(--text)}
.cmp-note{color:var(--muted);font-size:14px;margin-top:14px}
.cmp-h{font-size:clamp(22px,2.4vw,28px)}
.cmp-list{margin:0;padding-inline-start:20px;display:grid;gap:8px;color:var(--soft)}
.cmp-others{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:14px}
.cmp-others a,.cmp-more a{color:var(--soft)}
.cmp-more{margin-top:18px}

/* ---- The light version (22.10, Dubi): by the visitor's device, or the sun/moon button (html[data-theme]).
   The product's own pictures and drawings stay dark: that is how the product looks. ---- */
:root[data-theme="light"]{
  --navy:#F5F7FB; --set:#FFFFFF; --panel:#EDF1F7; --deep:#E7ECF4; --line:#D5DCE8;
  --text:#0E1726; --soft:#3A4862; --muted:#5E6C86; --red:#E8462B; --red-2:#C2391E; --on-red:#FFFFFF;
  color-scheme:light;
}
:root[data-theme="light"] :is(.mk,.shot,.devices,.pic.v,.gp,.tile .tm,.end.photo){
  --navy:#0E1726; --set:#16233A; --panel:#1D2B44; --deep:#0A1220; --line:#2A3A57;
  --text:#FFFFFF; --soft:#D6DEEB; --muted:#9AAAC4; --red-2:#FF8A5C; color-scheme:dark; color:var(--text);
}
:root[data-theme="light"] .tile .tm{background:var(--navy);padding:14px;margin:-6px}
:root[data-theme="light"] .bar{background:rgba(245,247,251,.88)}
:root[data-theme="light"] .hero{background:radial-gradient(ellipse 60% 70% at 70% 30%,#E1E8F5 0%,transparent 70%)}
:root[data-theme="light"][dir="rtl"] .hero,:root[data-theme="light"] [dir="rtl"] .hero{background:radial-gradient(ellipse 60% 70% at 30% 30%,#E1E8F5 0%,transparent 70%)}
:root[data-theme="light"] .gate{background:linear-gradient(180deg,#E6ECF6 0,var(--set) 46%)}
:root[data-theme="light"] .shot,:root[data-theme="light"] .mk{box-shadow:0 0 0 1px #C9D3E5,0 30px 70px rgba(14,23,38,.18)}
:root[data-theme="light"] .cmp td.them.no::before,:root[data-theme="light"] .cmp td.us.no::before,
:root[data-theme="light"] .cmp td.them.part::before,:root[data-theme="light"] .cmp td.us.part::before{background:#E3E8F1}
:root[data-theme="light"] .cmp td.them.no::before,:root[data-theme="light"] .cmp td.us.no::before{color:#5E6C86}
:root[data-theme="light"] .cmp td.them.part::before,:root[data-theme="light"] .cmp td.us.part::before{color:#B7791F}
/* The logo: white on dark, navy on light. */
.logo-light{display:none}
:root[data-theme="light"] .logo-dark{display:none}
:root[data-theme="light"] .logo-light{display:inline-block}
/* The sun/moon button. */
.bar .theme{display:grid;place-items:center;width:40px;height:40px;padding:0;background:none;border:1px solid var(--line);color:var(--soft);cursor:pointer}
.bar .theme:hover{color:var(--text);border-color:var(--soft)}
.bar .theme svg{width:18px;height:18px}
.bar .theme .sun{display:none}
:root[data-theme="light"] .bar .theme .sun{display:block}
:root[data-theme="light"] .bar .theme .moon{display:none}