/* ══════════════════════════════════════════════════════════════════════════
   SCAIL MOTION — the cinematic layer of scailapp.com.
   ──────────────────────────────────────────────────────────────────────────
   Every animated scene on the homepage is a pure function of its own clock,
   painted by seek(t) in /motion/scail-motion.js. Nothing here animates: these
   rules are layout and resting state only, so a scene can be drawn at any
   moment and reduced-motion visitors get the final frame of each one.

   Colours come from the page's skin variables (--ink, --rp1…) so every skin
   on the scheme picker still works. Wins are --rp1, the prism ramp is held to
   the halomark and one accent word per headline.
   ══════════════════════════════════════════════════════════════════════════ */

.mx-ramp{background:linear-gradient(100deg,var(--rp1) 0%,var(--rp2) 26%,var(--rp3) 48%,var(--rp5) 74%,var(--rp6) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.mx-display{font-family:var(--font-display,'Lufga','Urbanist',sans-serif); font-weight:200; letter-spacing:-.045em}
.mx-eyebrow{font-size:11px; letter-spacing:.17em; text-transform:uppercase; font-weight:500; color:var(--ink-2); margin:0}

/* kinetic words: each word rides up out of its own mask */
.mx-kin .mx-w{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.09em; margin-bottom:-.09em}
.mx-kin .mx-w>span{display:inline-block; will-change:transform}

/* ── HERO ─────────────────────────────────────────────────────────────── */
.mx-hero{padding:clamp(20px,3vw,44px) 0 clamp(40px,5vw,72px)}
.mx-herotop{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:end}
.mx-eye{display:inline-flex; flex-direction:column; gap:7px; margin-bottom:clamp(14px,2vw,24px)}
.mx-eye i{display:block; height:1.5px; background:var(--ink); transform-origin:0 50%}
.mx-h1{margin:0; font-size:clamp(44px,6.6vw,98px); line-height:1.02; color:var(--ink)}
.mx-herocopy{display:flex; flex-direction:column; gap:20px; padding-bottom:8px}
.mx-lede{margin:0; font-size:clamp(17px,1.5vw,19.5px); line-height:1.55; color:var(--ink-2)}
.mx-ctas{display:flex; gap:12px; flex-wrap:wrap}
.mx-tourbtn{display:inline-flex; align-items:center; gap:10px; padding-left:8px}
.mx-tourbtn .hmk{width:34px; height:34px}
.mx-proof{margin:0; font-size:12.5px; line-height:1.6; color:var(--ink-2)}

.mx-stagewrap{max-width:1300px; margin:clamp(28px,4vw,48px) auto 0; padding:0 var(--gut,24px)}
.mx-stage{position:relative; aspect-ratio:1200/720; border-radius:30px; overflow:hidden; background:rgba(255,255,255,.5);
  border:1px solid var(--sf-edge); box-shadow:0 40px 80px -50px rgba(14,14,16,.45); contain:layout paint}
.mx-world{position:absolute; left:0; top:0; width:1200px; height:720px; transform-origin:0 0}
.mx-world *{box-sizing:border-box}
.mx-a{position:absolute}
.mx-card{position:absolute; background:var(--sf-card); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid var(--sf-edge); border-radius:22px}
.mx-card>h3{position:absolute; left:18px; top:14px; margin:0; font-size:21px; font-weight:200; letter-spacing:-.032em;
  font-family:var(--font-display,'Lufga',sans-serif)}
.mx-tabs{display:flex; gap:4px; padding:4px; border-radius:999px; background:var(--sf-card); border:1px solid var(--sf-edge)}
.mx-tabs span{padding:7px 14px; font-size:13px; color:var(--ink-2); border-radius:999px}
.mx-tabs span:first-child{background:#fff; color:var(--ink); font-weight:500}
.mx-row{position:absolute; left:32px; width:276px; height:68px; border-radius:15px; background:#fff; border:1px solid var(--sf-edge);
  display:flex; align-items:center; gap:11px; padding:0 12px}
.mx-av{width:36px; height:36px; border-radius:50%; background:rgba(14,14,16,.08); color:var(--ink); display:flex; align-items:center;
  justify-content:center; font-size:12.5px; font-weight:500; flex:none}
.mx-row .t{display:flex; flex-direction:column; min-width:0; flex:1}
.mx-row .t b{font-size:14.5px; font-weight:500}
.mx-row .t small{font-size:12.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mx-tag{position:absolute; right:10px; top:7px; font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
  padding:3px 8px; border-radius:999px; background:var(--ink); color:#fff}
.mx-row.win{border-color:color-mix(in srgb,var(--rp1) 45%,transparent)}
.mx-row.win .mx-av,.mx-row.win .mx-tag{background:var(--rp1); color:#fff}
.mx-call{position:absolute; left:356px; top:86px; width:488px; height:80px; border-radius:18px; background:#fff; border:1px solid var(--sf-edge);
  display:flex; align-items:center; gap:14px; padding:0 16px}
.mx-call .hmk{width:46px; height:46px; flex:none}
.mx-call .t{display:flex; flex-direction:column; flex:1}
.mx-call .t b{font-size:14.5px; font-weight:500}
.mx-call .t small{font-size:12.5px; color:var(--ink-2)}
.mx-wave{display:flex; align-items:center; gap:3px; height:32px}
.mx-wave i{display:block; width:3px; height:4px; border-radius:3px; background:var(--ink)}
.mx-bub{position:absolute; max-width:380px; padding:9px 13px; border-radius:17px; font-size:14.5px; line-height:1.42; background:#fff;
  border:1px solid var(--sf-edge); color:var(--ink)}
.mx-bub.me{background:var(--ink); color:#fff}
.mx-filet{position:absolute; left:356px; top:368px; margin:0; font-size:22px; font-weight:200; letter-spacing:-.032em; font-family:var(--font-display,'Lufga',sans-serif)}
.mx-filet span{color:var(--ink-2)}
.mx-chip{position:absolute; left:0; top:0; width:236px; height:56px; border-radius:15px; background:#fff; border:1px solid var(--sf-edge);
  box-shadow:0 14px 30px -22px rgba(14,14,16,.7); display:flex; align-items:center; gap:10px; padding:0 13px}
.mx-chip svg{flex:none; stroke:var(--rp1)}
.mx-chip .t{display:flex; flex-direction:column; min-width:0}
.mx-chip .t small{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); font-weight:500}
.mx-chip .t b{font-size:14px; font-weight:400; white-space:nowrap}
.mx-next{position:absolute; left:356px; top:560px; width:488px; height:120px; border-radius:20px; background:var(--ink); color:#fff;
  padding:18px 20px; display:flex; flex-direction:column; gap:8px}
.mx-next small{font-size:11px; letter-spacing:.17em; text-transform:uppercase; font-weight:500; color:rgba(255,255,255,.72)}
.mx-next b{font-family:var(--font-display,'Lufga',sans-serif); font-size:22px; font-weight:200; letter-spacing:-.032em; line-height:1.25}
.mx-item{position:absolute; left:894px; width:272px; height:46px; border-radius:13px; background:#fff; border:1px solid var(--sf-edge);
  display:flex; align-items:center; gap:10px; padding:0 12px}
.mx-ck{position:relative; width:20px; height:20px; border-radius:6px; border:1.5px solid rgba(14,14,16,.25); flex:none}
.mx-ck i{position:absolute; inset:-1.5px; border-radius:6px; background:var(--ink); transform:scale(0); display:flex; align-items:center; justify-content:center}
.mx-item .t{display:flex; flex-direction:column}
.mx-item .t b{font-size:13.5px; font-weight:500}
.mx-item .t small{font-size:11.5px; color:var(--ink-2)}
.mx-paper{position:absolute; left:894px; top:344px; width:272px; height:220px; border-radius:14px; background:#fff; border:1px solid var(--sf-edge);
  box-shadow:0 24px 48px -32px rgba(14,14,16,.6); padding:16px; font-size:11.5px; line-height:1.5}
.mx-paper p{margin:0 0 6px}
.mx-lines{display:flex; flex-direction:column; gap:9px; margin-top:12px}
.mx-lines i{display:block; height:7px; border-radius:4px; background:rgba(14,14,16,.14); width:0}
.mx-mail{position:absolute; left:894px; top:578px; width:272px; height:42px; border-radius:999px; background:var(--ink); color:#fff;
  font-size:13.5px; font-weight:500; display:flex; align-items:center; justify-content:center}
.mx-trk{position:absolute; left:910px; top:642px; width:240px; height:3px; border-radius:3px; background:rgba(14,14,16,.1)}
.mx-trk i{display:block; height:3px; border-radius:3px; background:var(--ink); width:0}
.mx-trkl{position:absolute; left:902px; top:654px; width:256px; display:flex; justify-content:space-between; font-size:11px; color:var(--ink-2)}
.mx-env{position:absolute; left:0; top:0; width:32px; height:32px; border-radius:50%; background:var(--ink); display:flex; align-items:center; justify-content:center}
.mx-sample{position:absolute; right:14px; top:14px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:500; color:var(--ink-2);
  padding:5px 10px; border-radius:999px; background:var(--sf-pane); border:1px solid var(--sf-edge)}

/* ── MEET HALO ───────────────────────────────────────────────────────── */
.mx-halo{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,5vw,64px); align-items:center}
.mx-halo .mx-copy{display:flex; flex-direction:column; gap:20px}
.mx-h2{margin:0; font-size:clamp(36px,4.4vw,62px); line-height:1.04; color:var(--ink)}
.mx-caps{position:relative; display:flex; flex-direction:column; margin-top:4px}
.mx-caps .ind{position:absolute; left:0; right:0; top:0; height:60px; border-radius:18px; background:#fff; border:1px solid var(--sf-edge);
  box-shadow:0 18px 40px -30px rgba(14,14,16,.6)}
.mx-caps button{position:relative; min-height:60px; border:0; background:transparent; text-align:left; padding:0 18px; display:flex; align-items:center;
  gap:14px; font:inherit; font-size:17px; color:var(--ink-2); cursor:pointer; border-radius:18px}
.mx-caps button[aria-pressed="true"]{color:var(--ink)}
.mx-caps button span{font-family:var(--font-display,'Lufga',sans-serif); font-size:15px; width:22px; color:var(--ink-2)}
.mx-orbstage{position:relative; aspect-ratio:560/520; max-width:600px; width:100%; margin-left:auto}
.mx-orbworld{position:absolute; left:0; top:0; width:560px; height:520px; transform-origin:0 0}
.mx-ring{position:absolute; left:180px; top:30px; width:200px; height:200px; border-radius:50%; border:1.5px solid rgba(14,14,16,.16); opacity:0}
.mx-bigorb{position:absolute; left:180px; top:30px; width:200px; height:200px}
.mx-morph{position:absolute; background:#fff; border:1px solid rgba(14,14,16,.1); box-shadow:0 30px 60px -40px rgba(14,14,16,.7); overflow:hidden}
.mx-morph.dark{background:var(--ink)}
.mx-morph>div{position:absolute; inset:0; display:flex; opacity:0}
.mx-morph .st{flex-direction:column; justify-content:center; gap:8px; padding:18px 22px}
.mx-morph .st small{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); font-weight:500}
.mx-morph .st p{margin:0; font-size:16px; line-height:1.45; white-space:normal}
.mx-morph .row{align-items:center; gap:14px; padding:0 24px; font-size:16px}
.mx-morph .esc{align-items:center; gap:12px; padding:0 22px; color:#fff; font-size:16px}
.mx-morph .esc small{font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:500; padding:4px 9px; border-radius:999px; border:1px solid rgba(255,255,255,.4)}
.mx-orbnote{position:absolute; left:130px; top:486px; width:300px; text-align:center; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); font-weight:500}

/* ── HOW IT WORKS ────────────────────────────────────────────────────── */
.mx-howhead{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px}
.mx-howhead>div{display:flex; flex-direction:column; gap:16px}
.mx-num{font-family:var(--font-display,'Lufga',sans-serif); font-weight:200; letter-spacing:-.05em; font-size:clamp(64px,9vw,132px);
  line-height:1; height:1em; overflow:hidden; font-variant-numeric:tabular-nums}
.mx-num>div{display:flex; flex-direction:column}
.mx-rail{position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:5px; border-radius:999px; background:var(--sf-card);
  border:1px solid var(--sf-edge); margin-top:30px}
.mx-rail .ind{position:absolute; top:5px; bottom:5px; left:5px; border-radius:999px; background:var(--ink)}
.mx-rail button{position:relative; min-height:46px; border:0; background:transparent; border-radius:999px; font:inherit; font-size:15px; font-weight:500;
  color:var(--ink-2); cursor:pointer}
.mx-rail button[aria-selected="true"]{color:#fff}
.mx-howstage{position:relative; aspect-ratio:1000/440; min-height:280px; margin-top:24px}
.mx-howworld{position:absolute; left:50%; top:50%; width:1000px; height:440px; transform-origin:50% 50%}
.mx-shape{position:absolute; background:#fff; border:1px solid var(--sf-edge); box-shadow:0 40px 80px -50px rgba(14,14,16,.55); overflow:hidden}
.mx-shape.won{border-color:color-mix(in srgb,var(--rp1) 45%,transparent)}
.mx-shape>div{position:absolute; inset:0; opacity:0}
.mx-shape .s0{display:flex; flex-direction:column; justify-content:center; gap:14px; padding:22px 26px}
.mx-shape .s0 .h{display:flex; justify-content:space-between; gap:12px; font-size:15px}
.mx-shape .s0 .h b{font-weight:500}
.mx-shape .s0 .h span{color:var(--ink-2); font-variant-numeric:tabular-nums}
.mx-shape .bar{height:6px; border-radius:3px; background:rgba(14,14,16,.08)}
.mx-shape .bar i{display:block; height:6px; border-radius:3px; background:var(--ink); width:0}
.mx-shape .s0 small{font-size:13px; color:var(--ink-2)}
.mx-shape .s1{display:flex; flex-direction:column; justify-content:center; gap:10px; padding:22px}
.mx-shape .it{height:50px; border-radius:13px; border:1px solid var(--sf-edge); display:flex; align-items:center; gap:12px; padding:0 14px}
.mx-shape .it b{font-size:14.5px; font-weight:500; flex:1}
.mx-shape .it small{font-size:12.5px; color:var(--ink-2)}
.mx-shape .s2{display:flex; flex-direction:column; gap:8px; padding:22px; font-size:12.5px; line-height:1.5}
.mx-shape .s2 b{font-weight:500}
.mx-shape .s3{display:flex; align-items:center; gap:12px; padding:0 14px}
.mx-shape .s3 .dot{width:56px; height:56px; border-radius:50%; background:var(--ink); display:flex; align-items:center; justify-content:center; flex:none}
.mx-shape.won .s3 .dot{background:var(--rp1)}
.mx-shape .s3 .t{display:flex; flex-direction:column}
.mx-shape .s3 .t b{font-size:16px; font-weight:500; color:var(--rp1)}
.mx-shape .s3 .t small{font-size:12.5px; color:var(--ink-2)}
.mx-steps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:20px}
.mx-steps p{margin:0; font-size:15px; line-height:1.5; color:var(--ink-3)}
.mx-steps p.on{color:var(--ink)}

/* ── THE APP ─────────────────────────────────────────────────────────── */
.mx-app{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,5vw,64px); align-items:center}
.mx-app .mx-copy{display:flex; flex-direction:column; gap:20px}
.mx-app .storebadges{justify-content:flex-start; margin-top:4px}
.mx-phonestage{position:relative; aspect-ratio:600/640; max-width:620px; width:100%}
.mx-phoneworld{position:absolute; left:0; top:0; width:600px; height:640px; transform-origin:0 0}
.mx-phone{position:absolute; left:160px; top:20px; width:280px; height:600px; border-radius:44px; background:#0E0E10; padding:9px;
  box-shadow:0 50px 90px -50px rgba(14,14,16,.8)}
.mx-screen{width:100%; height:100%; border-radius:36px; overflow:hidden; background:var(--ground); position:relative; padding:34px 14px 0;
  display:flex; flex-direction:column; gap:9px}
.mx-screen .wm{align-self:center; font-size:13px; letter-spacing:.14em; font-family:var(--font-display,'Lufga',sans-serif)}
.mx-screen .hl{font-family:var(--font-display,'Lufga',sans-serif); font-size:25px; font-weight:200; letter-spacing:-.045em; line-height:1.05}
.mx-screen .callc{border-radius:16px; background:#fff; border:1px solid var(--sf-edge); padding:10px; display:flex; align-items:center; gap:9px}
.mx-screen .callc .hmk{width:30px; height:30px}
.mx-screen .callc span{display:flex; flex-direction:column; font-size:12px; font-weight:500}
.mx-screen .callc small{font-size:10.5px; color:var(--ink-2); font-weight:300}
.mx-q{border-radius:14px; background:#fff; border:1px solid var(--sf-edge); padding:9px 11px; display:flex; justify-content:space-between; align-items:center; font-size:11.5px}
.mx-q i{font-style:normal; padding:3px 8px; border-radius:999px; background:var(--ink); color:#fff; font-size:10px}
.mx-sheet{position:absolute; left:0; right:0; bottom:0; height:170px; border-radius:26px 26px 0 0; background:#fff; border-top:1px solid var(--sf-edge);
  padding:10px 14px; display:flex; flex-direction:column; gap:8px}
.mx-sheet .grab{align-self:center; width:34px; height:4px; border-radius:3px; background:rgba(14,14,16,.15)}
.mx-sheet b{font-family:var(--font-display,'Lufga',sans-serif); font-size:15px; font-weight:200}
.mx-sheet .ln{display:block; height:5px; border-radius:3px; background:rgba(14,14,16,.14); width:0}
.mx-sheet .go{margin-top:auto; margin-bottom:14px; height:36px; border-radius:999px; background:var(--ink); color:#fff; font-size:12px; font-weight:500;
  display:flex; align-items:center; justify-content:center}
.mx-toast{position:absolute; left:0; top:0; width:230px; padding:12px 14px; border-radius:16px; background:#fff; border:1px solid var(--sf-edge);
  box-shadow:0 24px 50px -30px rgba(14,14,16,.7); display:flex; flex-direction:column; gap:3px; opacity:0}
.mx-toast small{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:500; color:var(--ink-2)}
.mx-toast span{font-size:14px}
.mx-toast.win{border-color:color-mix(in srgb,var(--rp1) 40%,transparent)}
.mx-toast.win small{color:var(--rp1)}

/* ── FINALE BOARD ────────────────────────────────────────────────────── */
.mx-board{position:relative; aspect-ratio:920/170; max-width:920px; margin:26px auto 30px}
.mx-boardworld{position:absolute; left:0; top:0; width:920px; height:170px; transform-origin:0 0}
.mx-lane{position:absolute; top:0; width:172px; height:170px; border-radius:15px; background:rgba(255,255,255,.8); border:1px solid rgba(14,14,16,.07);
  padding:10px 12px; text-align:left; font-size:11px; letter-spacing:.17em; text-transform:uppercase; color:var(--ink-2); font-weight:500}
.mx-lane.win{background:color-mix(in srgb,var(--rp1) 7%,transparent); color:var(--rp1)}
.mx-tix{position:absolute; left:0; top:0; width:156px; height:34px; border-radius:11px; background:#fff; border:1px solid var(--sf-edge);
  display:flex; align-items:center; gap:8px; padding:0 10px; font-size:13px; box-shadow:0 8px 18px -14px rgba(14,14,16,.6); text-align:left}
.mx-tix i{width:20px; height:20px; border-radius:50%; background:var(--ink); color:#fff; font-size:9.5px; font-weight:500; font-style:normal;
  display:flex; align-items:center; justify-content:center; flex:none}
.mx-tix.won{background:#FFF0F7; border-color:color-mix(in srgb,var(--rp1) 40%,transparent)}
.mx-tix.won i{background:var(--rp1)}
/* the closing CTA is the page's one dark card: lanes go glassy so the tickets carry the colour */
.cta .mx-lane{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:rgba(255,255,255,.62)}
.cta .mx-lane.win{background:color-mix(in srgb,var(--rp1) 22%,transparent); border-color:color-mix(in srgb,var(--rp1) 45%,transparent); color:#fff}
.cta .mx-tix{color:var(--ink)}

/* ── HALO GUIDE ───────────────────────────────────────────── */
.mx-guide{position:fixed; z-index:46; left:50%; bottom:var(--fab-y,18px); width:min(680px,calc(100vw - 32px)); transform:translate(-50%,160%);
  min-height:58px; border-radius:999px; background:rgba(255,255,255,.95); border:1px solid var(--sf-edge); box-shadow:0 24px 60px -30px rgba(14,14,16,.55);
  display:flex; align-items:center; gap:12px; padding:7px 7px 7px 9px; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px)}
.mx-guide .hmk{width:40px; height:40px; flex:none}
.mx-guide .mx-wave{height:24px; gap:2px; flex:none}
.mx-guide .mx-wave i{width:2.5px}
.mx-guide .cap{flex:1; min-width:0; font-size:15px; line-height:1.4; font-weight:400; color:var(--ink)}
.mx-guide .cap span{color:var(--ink-3)}
.mx-guide .cap span.said{color:var(--ink)}
.mx-guide button{flex:none; min-height:44px; padding:0 16px; border-radius:999px; border:0; background:var(--ink); color:#fff; font:inherit; font-size:13.5px;
  font-weight:500; display:flex; align-items:center; gap:7px; cursor:pointer}
.mx-guide button.ghost{background:transparent; color:var(--ink-2); padding:0 12px}
.mx-guide button[hidden]{display:none}

/* ── RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width:900px){
  .mx-herotop,.mx-halo,.mx-app{grid-template-columns:minmax(0,1fr)}
  .mx-orbstage{margin:0 auto; max-width:420px}
  .mx-app .mx-phonestage{order:2; margin:0 auto}
}
@media (max-width:760px){
  .mx-stagewrap{padding:0 16px}
  .mx-stage{aspect-ratio:390/470; border-radius:22px}
  .mx-steps{grid-template-columns:minmax(0,1fr)}
  .mx-howstage{aspect-ratio:auto; height:330px; min-height:0}
  .mx-steps p:not(.on){display:none}
  .mx-rail button{font-size:13.5px}
  .mx-guide{border-radius:22px}
  .mx-guide .cap{font-size:13.5px}
  .mx-guide .mx-wave,.mx-guide .lbl{display:none}
  .mx-guide button{padding:0 12px}
}

/* docked: left edge to just short of Ask SCAIL (right is set by fitGuide in scail-motion.js) */
.mx-guide.mx-docked{left:12px; width:auto; transform:translateY(160%)}

/* The motion engine owns arrivals: no opacity fades, no CSS transitions on [data-a]. */
html.mx-on.anim [data-a]{opacity:1 !important; transition:none !important; transform:none}
@media (prefers-reduced-motion:reduce){
  .mx-guide{transform:translate(-50%,0)}
  .mx-kin .mx-w>span{will-change:auto}
}
@media (prefers-reduced-motion:reduce) and (max-width:760px){.mx-guide{transform:none}}

/* ── ESPAÑOL ─────────────────────────────────────────────────────────── */
.mx-lang{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(28px,5vw,64px); align-items:center}
.mx-lang .mx-copy{display:flex; flex-direction:column; gap:20px}
.mx-langsoon{margin:0; font-size:14px; color:var(--ink-2); letter-spacing:.02em}
.mx-langdemo{display:flex; flex-direction:column; gap:16px; align-items:flex-start}
.mx-langtoggle{position:relative; display:grid; grid-template-columns:1fr 1fr; padding:4px; border-radius:999px; background:var(--sf-pane);
  border:1px solid var(--sf-edge-2); width:240px}
.mx-langtoggle .ind{position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); border-radius:999px; background:var(--ink)}
.mx-langtoggle button{position:relative; min-height:44px; border:0; background:transparent; font:inherit; font-size:15px; font-weight:500;
  color:var(--ink); cursor:pointer; border-radius:999px}
.mx-langtoggle button[aria-checked="true"]{color:#fff}
.mx-portal{position:relative; width:100%; box-sizing:border-box; border-radius:26px; background:var(--sf-card); -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px); border:1px solid var(--sf-edge); box-shadow:0 40px 80px -50px rgba(14,14,16,.45); padding:18px; overflow:hidden;
  display:flex; flex-direction:column; gap:14px}
.mx-sweep{position:absolute; top:0; bottom:0; left:0; width:2px; background:var(--ink); opacity:0; pointer-events:none}
.mx-portal .pnav{display:flex; flex-wrap:wrap; gap:4px; padding:4px; border-radius:999px; background:#fff; border:1px solid var(--sf-edge); align-self:flex-start}
.mx-portal .pnav>.mx-tx{padding:7px 12px; font-size:13px; color:var(--ink-2); border-radius:999px}
.mx-portal .pnav>.mx-tx.on{background:var(--ink); color:#fff}
.mx-portal .ph{margin:2px 0 0; font-family:var(--font-display,'Lufga',sans-serif); font-weight:200; font-size:clamp(22px,2.2vw,28px); letter-spacing:-.032em; line-height:1.15}
.mx-portal .pname{margin:-6px 0 0; font-size:14px; color:var(--ink-2)}
.mx-portal .pname small{margin-left:6px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase}
.mx-portal .pmsg{display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:16px; background:#fff; border:1px solid var(--sf-edge)}
.mx-portal .pmsg .hmk{width:30px; height:30px; flex:none}
.mx-portal .pmsg p{margin:0; flex:1; min-width:0; font-size:15px; line-height:1.45}
.mx-portal .psteps{display:flex; flex-direction:column; gap:8px}
.mx-portal .psteps .lab{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); font-weight:500}
.mx-portal .prow{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; border-radius:13px; background:#fff;
  border:1px solid var(--sf-edge); font-size:14.5px}
.mx-portal .chip{font-size:12px; padding:4px 10px; border-radius:999px; background:var(--ink); color:#fff}
.mx-portal .pbtns{display:flex; gap:10px; flex-wrap:wrap}
.mx-portal .pbtn{display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:999px; border:1px solid var(--sf-edge-2);
  background:var(--sf-pane); font-size:14.5px; font-weight:500}
.mx-portal .pbtn.dark{background:var(--ink); color:#fff; border-color:var(--ink)}
/* a translated label: both languages stacked in one cell, each riding out of the same mask */
.mx-tx{display:inline-grid; overflow:hidden; vertical-align:bottom; white-space:nowrap}
.mx-tx>span{grid-area:1/1}
.mx-tx.wrap{display:grid; white-space:normal}
@media (max-width:900px){.mx-lang{grid-template-columns:minmax(0,1fr)}}

/* ── WHO BUILT IT ────────────────────────────────────────────────────── */
.mx-founder{display:grid; grid-template-columns:minmax(0,280px) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:center}
.mx-founder img{display:block; width:100%; height:auto; border-radius:30px; border:1px solid var(--sf-edge); box-shadow:0 40px 80px -50px rgba(14,14,16,.5)}
.mx-founder .mx-copy{display:flex; flex-direction:column; gap:18px}
.mx-founder .mx-proof a{color:var(--ink)}
@media (max-width:760px){.mx-founder{grid-template-columns:minmax(0,1fr)} .mx-founder picture{max-width:220px}}
.mx-trust{color:var(--ink)}
.mx-trust a{color:var(--ink)}