/* ==========================================================================
   FileInize — mobile edition.

   A separate site, drawn for a phone held in one hand. It shares the brand
   (warm black, loggans violet, system fonts, no third-party requests) and the
   real screenshots with the desktop site, but nothing else: no WebGL, no
   pinned scroll scenes, no desktop window scaled down until it cannot be
   read. Every card is shown whole; anything too detailed to read at phone
   width opens full screen instead of being cropped.

   Sizing rule: --u is 1 % of the screen width, capped so the page stays a
   phone-shaped column when it is opened on a bigger screen.
   ========================================================================== */

:root{
  --bg:#06050B; --bg-2:#0C0A14;
  --ink:#F6F4FB; --ink-2:#B9B4CC; --ink-3:#8680A0;
  --o0:#4F4099; --o1:#8A66FF; --o2:#A98BFF; --o3:#E7B4FA; --pos:#4EE2A2;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.15);
  --card-a:rgba(40,31,70,.78); --card-b:rgba(14,11,26,.82);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --u:min(1vw,5.2px);
  --gut:max(20px,env(safe-area-inset-left));
  --k-audio:#FF453A; --k-video:#5E9BFF; --k-image:#FFB340; --k-archive:#C792EA; --k-code:#4FD1C5;
  --ease:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%; scroll-padding-top:76px; background:var(--bg); overflow-x:hidden; overscroll-behavior-x:none; max-width:100%}
html:not(.no-smooth){scroll-behavior:smooth}
body{
  margin:0 auto; max-width:520px; min-height:100vh; background:var(--bg); color:var(--ink);
  font:400 16px/1.55 var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip; position:relative; width:100%;
}
@media (min-width:560px){
  html{background:#030208}
  body{box-shadow:0 0 0 1px var(--line), 0 0 120px rgba(138,102,255,.12)}
}
img,svg,canvas{max-width:100%; display:block}
img{height:auto}
p{margin:0}
a{color:inherit}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
h1,h2,h3{margin:0; font-weight:600; text-wrap:balance}
::selection{background:rgba(138,102,255,.35)}
.ic{width:1em; height:1em; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.wrap{padding-inline:var(--gut)}
a:focus-visible,button:focus-visible{outline:2px solid var(--o2); outline-offset:3px; border-radius:12px}
html.lock{overflow:hidden}
[inert]{pointer-events:none}

/* ---------- type ---------- */
.metal{
  background:linear-gradient(180deg,#fff 0%,#EEE9FA 40%,#9A94B6 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.metal em,h1 em,h2 em{
  font-style:normal; background:linear-gradient(100deg,#F3C4FA 0%,var(--o2) 45%,var(--o1) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
h1{font-size:clamp(38px,calc(var(--u)*11.4),60px); line-height:1; letter-spacing:-.046em}
h2{font-size:clamp(31px,calc(var(--u)*9),48px); line-height:1.04; letter-spacing:-.04em}
h3{font-size:18px; line-height:1.28; letter-spacing:-.015em}
.lede{font-size:clamp(16.5px,calc(var(--u)*4.5),19px); line-height:1.55; color:var(--ink-2); text-wrap:pretty}
.fine{font-size:13.5px; line-height:1.5; color:var(--ink-3)}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px; min-height:32px; padding:0 15px 0 12px; border-radius:99px;
  font:500 12.5px/1.2 var(--sans); letter-spacing:.02em; color:var(--ink-2);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.eyebrow .ic{font-size:14px; color:var(--o2)}
.dot{width:7px; height:7px; border-radius:50%; flex:none; background:var(--o2); box-shadow:0 0 0 3px rgba(160,124,255,.18),0 0 14px 2px rgba(138,102,255,.8); animation:pulse 2.8s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 5px rgba(160,124,255,.06),0 0 20px 4px rgba(138,102,255,.55)}}

section{position:relative}
.pad{padding-block:56px}
.sec-head{display:flex; flex-direction:column; align-items:flex-start; gap:18px; margin-bottom:34px}

/* ---------- reveal ---------- */
html.js .rv{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease) var(--d,0s), transform .9s var(--ease) var(--d,0s)}
html.js .rv.in{opacity:1; transform:none}

/* ---------- buttons ---------- */
.btn{
  position:relative; display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  min-height:56px; padding:0 24px; border-radius:99px; border:1px solid transparent;
  font:600 17px/1.1 var(--sans); letter-spacing:-.01em; text-decoration:none; overflow:hidden; text-align:center;
  transition:transform .2s var(--ease), box-shadow .25s;
}
.btn:active{transform:scale(.975)}
.btn .ic{font-size:19px}
.btn-primary{
  color:#fff; background:linear-gradient(180deg,#B08CFF 0%,#8B62F4 55%,#7648E8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 6px rgba(60,30,140,.35),0 12px 36px -8px rgba(138,102,255,.7),0 0 0 1px rgba(146,112,255,.5);
}
.btn-primary::after{
  content:""; position:absolute; top:0; bottom:0; width:50%; left:-70%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-18deg);
  animation:sheen 5.5s var(--ease) 1.4s infinite;
}
@keyframes sheen{0%{left:-70%}22%,100%{left:140%}}
.btn-primary .amt{font-weight:500; opacity:.72}
.btn-ghost{
  color:var(--ink); background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border-color:var(--line-2); box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.btn[aria-disabled=true]{opacity:.5; pointer-events:none}
.btn-sm{width:auto; min-height:40px; padding:0 18px; font-size:15px}

/* ---------- glass ---------- */
.gl{
  position:relative; border-radius:26px; overflow:hidden;
  background:linear-gradient(180deg,var(--card-a),var(--card-b));
  border:1px solid var(--line-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 24px 50px -28px #000;
}
.gl::after{
  content:""; position:absolute; left:-10%; right:-10%; bottom:-45%; height:70%; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(138,102,255,.22),transparent 70%);
}
.gl>*{position:relative; z-index:1}

/* ---------- top bar ---------- */
.bar{
  position:fixed; z-index:60; top:max(10px,env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
  width:min(500px,calc(100% - 20px)); height:56px; padding:0 8px 0 16px;
  display:flex; align-items:center; gap:8px; border-radius:99px;
  background:rgba(19,15,34,.55); backdrop-filter:blur(22px) saturate(170%); -webkit-backdrop-filter:blur(22px) saturate(170%);
  border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 40px -18px #000;
  transition:background .3s,border-color .3s;
}
.bar.scrolled{background:rgba(10,8,20,.82); border-color:var(--line-2)}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; margin-right:auto; font-weight:600; font-size:17px; letter-spacing:-.025em; min-height:44px}
.brand svg{width:26px; height:26px}
.menu-btn{flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-size:22px; background:rgba(255,255,255,.06); border:1px solid var(--line)}
.menu-btn .ic{transition:transform .35s var(--ease)}
.menu-btn[aria-expanded=true] .ic{transform:rotate(90deg)}

.sheet{
  position:fixed; inset:0; z-index:55; display:flex; flex-direction:column; justify-content:flex-start; gap:4px;
  padding:90px max(28px,env(safe-area-inset-left)) max(32px,env(safe-area-inset-bottom));
  background:radial-gradient(80% 50% at 50% 0%,rgba(138,102,255,.28),transparent 70%),rgba(6,5,11,.97);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s;
  max-width:520px; margin:0 auto; overflow-y:auto; overscroll-behavior:contain;
}
/* centred when it fits, from the top and scrollable when it does not (a plain centre would cut the first rows off) */
.sheet>:first-child{margin-top:auto}
.sheet>:last-child{margin-bottom:auto}
.sheet.open{opacity:1; visibility:visible; transition:opacity .3s,visibility 0s}   /* visible at once, so focus can move in as it opens */
.sheet a:not(.btn){
  display:flex; align-items:center; justify-content:space-between; padding:16px 2px; text-decoration:none;
  font-size:clamp(26px,calc(var(--u)*8),38px); font-weight:600; letter-spacing:-.035em; border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease),transform .6s var(--ease);
}
.sheet a:not(.btn) .ic{font-size:22px; color:var(--o2)}
.sheet.open a:not(.btn){opacity:1; transform:none}
.sheet.open a:nth-child(1){transition-delay:.04s}.sheet.open a:nth-child(2){transition-delay:.08s}.sheet.open a:nth-child(3){transition-delay:.12s}
.sheet.open a:nth-child(4){transition-delay:.16s}.sheet.open a:nth-child(5){transition-delay:.2s}.sheet.open a:nth-child(6){transition-delay:.24s}
.sheet .btn{margin-top:26px; flex:none}
.sheet a{flex:none}
.sheet .alt{align-self:center; display:inline-flex; align-items:center; min-height:44px; margin-top:12px; padding:0 14px; font-size:15px; color:var(--ink-3); text-decoration:none}
.sheet .alt:hover{color:var(--ink-2)}
@media (max-height:640px){
  .sheet{padding-top:78px; padding-bottom:18px}
  .sheet a:not(.btn){padding:10px 2px; font-size:clamp(22px,calc(var(--u)*7),30px)}
  .sheet .btn{margin-top:14px; min-height:50px}
  .sheet .alt{margin-top:4px}
}

/* ---------- sticky call to action ---------- */
.dock{
  position:fixed; z-index:50; left:50%; bottom:0; width:min(520px,100%); transform:translate(-50%,120%);
  padding:12px var(--gut) max(14px,env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:12px;
  background:linear-gradient(180deg,rgba(8,6,16,0),rgba(8,6,16,.96) 46%);
  transition:transform .5s var(--ease), visibility 0s linear .5s; pointer-events:none; visibility:hidden;
}
.dock.show{transform:translate(-50%,0); visibility:visible; transition-delay:0s}
.dock>*{pointer-events:auto}
.dock .txt{flex:1; min-width:0; font-size:13.5px; line-height:1.3; color:var(--ink-2)}
.dock .txt b{display:block; color:var(--ink); font-size:15px; font-weight:600}
.dock .btn{flex:none; width:auto; min-height:50px; padding:0 22px; font-size:16px}

/* ======================= HERO ======================= */
.hero{padding:108px 0 0; overflow:hidden}
.hero-fx{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.hero-fx .cone{
  position:absolute; left:50%; top:-14%; width:190%; height:92%; transform:translateX(-50%);
  background:conic-gradient(from 180deg at 50% 0%,transparent 146deg,rgba(169,139,255,.30) 180deg,transparent 214deg);
  -webkit-mask:linear-gradient(180deg,#000 10%,transparent 92%); mask:linear-gradient(180deg,#000 10%,transparent 92%);
  filter:blur(8px); animation:sway 14s ease-in-out infinite alternate;
}
.hero-fx .cone.b{animation-duration:19s; animation-direction:alternate-reverse; opacity:.55; width:150%}
@keyframes sway{from{transform:translateX(-52%) rotate(-3deg)}to{transform:translateX(-48%) rotate(3deg)}}
.hero-fx .lamp{position:absolute; left:50%; top:-120px; width:140%; height:340px; transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(176,140,255,.55),rgba(138,102,255,.14) 50%,transparent 72%)}
.hero-fx .dots{
  position:absolute; inset:0; opacity:.55;
  background-image:radial-gradient(rgba(255,255,255,.2) 1px,transparent 1.2px); background-size:22px 22px;
  -webkit-mask:radial-gradient(70% 55% at 50% 30%,#000,transparent 75%); mask:radial-gradient(70% 55% at 50% 30%,#000,transparent 75%);
}
.hero .wrap{position:relative; z-index:2}
.hero-fx + .wrap{text-align:center}   /* the opening: badge, headline and lede sit on the centre line, like the buttons under them */
html[dir=rtl] .hero-fx + .wrap :is(.eyebrow,h1,.lede){text-align:center}
.hero h1{margin:20px 0 18px}
.hero .cta{display:grid; gap:12px; margin-top:28px}
.hero .cta+.fine{margin-top:16px; text-align:center}

.fan{position:relative; height:calc(var(--u)*104); margin-top:34px; z-index:1}
.fan::before{
  content:""; position:absolute; left:50%; top:46%; width:130%; aspect-ratio:1; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(138,102,255,.38),rgba(138,102,255,.1) 55%,transparent);
}
.fan .c{position:absolute; height:auto; filter:drop-shadow(0 26px 34px rgba(0,0,0,.65))}
.fan .m{left:50%; top:0; width:calc(var(--u)*60); transform:translateX(-50%); z-index:3; animation:bob 7s ease-in-out infinite}
.fan .l{left:calc(var(--u)*1); top:calc(var(--u)*11); width:calc(var(--u)*47); transform:rotate(-8deg); z-index:2; opacity:.92; animation:bob 8s ease-in-out -2s infinite}
.fan .r{right:calc(var(--u)*1); top:calc(var(--u)*11); width:calc(var(--u)*47); transform:rotate(8deg); z-index:2; opacity:.92; animation:bob 9s ease-in-out -4s infinite}
@keyframes bob{50%{translate:0 -7px}}
.chip-f{
  position:absolute; z-index:4; display:flex; align-items:center; gap:10px; padding:10px 14px 10px 10px; border-radius:18px;
  background:rgba(22,17,40,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line-2); box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 18px 36px -14px #000;
  max-width:calc(var(--u)*62);
}
.chip-f .fi{width:34px; height:34px; border-radius:11px; display:grid; place-items:center; font-size:17px; background:rgba(138,102,255,.2); color:var(--o2); flex:none}
.chip-f .fi.g{background:rgba(78,226,162,.16); color:var(--pos)}
.chip-f b{display:block; font-size:13.5px; line-height:1.2; font-weight:600}
.chip-f small{display:block; font-size:11.5px; line-height:1.3; color:var(--ink-3)}
.chip-f.f1{left:0; top:calc(var(--u)*80); animation:bob 6s ease-in-out -1s infinite}
.chip-f.f2{right:0; top:calc(var(--u)*57); animation:bob 7s ease-in-out -3s infinite}
.fan-fade{position:absolute; left:0; right:0; bottom:-2px; height:90px; z-index:5; background:linear-gradient(180deg,transparent,var(--bg)); pointer-events:none}

.stats{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px}
.stats>div{padding:18px 16px 16px; border-radius:22px; background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); border:1px solid var(--line)}
.stats b{display:block; font-size:clamp(34px,calc(var(--u)*10),48px); font-weight:300; line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff,#B9A4F5); -webkit-background-clip:text; background-clip:text; color:transparent}
.stats span{display:block; margin-top:10px; font-size:13.5px; line-height:1.4; color:var(--ink-2)}

/* ---------- marquee ---------- */
.marquee{margin-top:46px; overflow:hidden; padding-block:6px}
.marquee small{display:block; padding:0 var(--gut) 16px; font-size:13px; color:var(--ink-3)}
.marquee .track{display:flex; width:max-content; animation:slide 46s linear infinite}
.marquee.off .track{animation-play-state:paused}
.marquee .chip{display:inline-flex; align-items:center; gap:9px; height:42px; margin-inline-end:10px; padding:0 18px 0 15px; border-radius:99px; white-space:nowrap; font-size:14.5px; color:var(--ink-2);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); border:1px solid var(--line)}
.marquee .chip .ic{color:var(--o2); font-size:17px}
@keyframes slide{to{transform:translateX(-50%)}}

/* ======================= CAROUSEL (shared) ======================= */
.rail{
  display:flex; gap:12px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding-inline:var(--gut);
  padding:6px var(--gut) 14px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start; flex:none}

/* ======================= FILE MANAGER ======================= */
.seg{
  position:relative; display:grid; grid-template-columns:repeat(3,1fr); padding:4px; border-radius:99px; margin-inline:var(--gut);
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.025)); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(20px) saturate(1.6); backdrop-filter:blur(20px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 18px 36px -18px rgba(0,0,0,.75);
  touch-action:pan-y; user-select:none; -webkit-user-select:none;
}
/* the puck: Liquid Glass — slides between views, swells and clears while it is held, follows the finger when dragged */
.seg::before{
  content:""; position:absolute; top:4px; bottom:4px; inset-inline-start:4px; width:calc((100% - 8px)/3); border-radius:99px;
  transform:translateX(calc(var(--i,0)*100%*var(--dir,1))) scale(var(--s,1)); transform-origin:50% 50%;
  transition:transform .6s cubic-bezier(.3,1.45,.5,1), background .35s, box-shadow .45s;
  background:
    radial-gradient(120% 90% at 22% -10%, rgba(255,255,255,.5), rgba(255,255,255,0) 52%),
    linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(176,150,255,.2) 48%, rgba(138,102,255,.38) 100%),
    rgba(30,22,60,.5);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.34), inset 0 1.5px 1px rgba(255,255,255,.8),
    inset 0 -12px 18px -10px rgba(170,135,255,.7), 0 10px 24px -10px rgba(0,0,0,.7), 0 0 30px -8px rgba(138,102,255,.8);
}
.seg.pressed{--s:1.16}
.seg.pressed::before{
  background:
    radial-gradient(120% 90% at 22% -10%, rgba(255,255,255,.62), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(176,150,255,.1) 50%, rgba(138,102,255,.26) 100%),
    rgba(30,22,60,.3);
  box-shadow:
    inset 0 0 0 1.2px rgba(255,255,255,.55), inset 0 2px 1.5px rgba(255,255,255,.95),
    inset 0 -14px 20px -10px rgba(190,160,255,.85), 0 18px 34px -12px rgba(0,0,0,.75), 0 0 46px -6px rgba(150,115,255,.95);
}
.seg.drag::before{transition:transform .1s linear, background .35s, box-shadow .45s}
@media (prefers-reduced-motion:reduce){ .seg::before{transition:transform .01s} }
.seg button{position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:7px; min-height:44px; font-size:15px; font-weight:500; color:var(--ink-2); transition:color .25s}
.seg button[aria-selected=true]{color:#fff}
.seg button:focus-visible{outline-offset:-3px; border-radius:99px}
.seg .ic{font-size:16px}

.fmshot{position:relative; margin:18px var(--gut) 0; border-radius:20px; overflow:hidden; border:1px solid var(--line-2); box-shadow:0 30px 60px -28px #000,0 0 80px -20px rgba(138,102,255,.4); background:#0A0814; display:block; width:calc(100% - var(--gut)*2)}
.fmshot .stack{position:relative; display:block; aspect-ratio:1440/900}
.fmshot picture{position:absolute; inset:0; opacity:0; transition:opacity .5s}
.fmshot picture.on{opacity:1}
.fmshot img{width:100%; height:100%; object-fit:cover}
.expand{
  position:absolute; right:10px; bottom:10px; display:flex; align-items:center; gap:7px; height:34px; padding:0 13px 0 11px; border-radius:99px;
  font-size:12.5px; font-weight:600; color:#fff; background:rgba(14,11,26,.78); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--line-2);
}
.expand .ic{font-size:15px}
.fmlist{list-style:none; margin:20px var(--gut) 0; padding:0; display:grid; gap:10px}
.fmlist[hidden]{display:none}
.fmlist li{display:flex; align-items:center; gap:14px; padding:14px 16px 14px 14px; border-radius:20px; background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02)); border:1px solid var(--line); animation:rise .6s var(--ease) both}
.fmlist li:nth-child(2){animation-delay:.05s}.fmlist li:nth-child(3){animation-delay:.1s}.fmlist li:nth-child(4){animation-delay:.15s}
@keyframes rise{from{opacity:0; transform:translateY(12px)}}
.fi{width:42px; height:42px; border-radius:14px; display:grid; place-items:center; font-size:20px; flex:none; background:rgba(138,102,255,.18); color:var(--o2); border:1px solid rgba(138,102,255,.25)}
.fi.g{background:rgba(78,226,162,.14); color:var(--pos); border-color:rgba(78,226,162,.25)}
.fmlist b{display:block; font-size:16px; font-weight:600; line-height:1.25}
.fmlist small{display:block; margin-top:2px; font-size:13.5px; line-height:1.4; color:var(--ink-3)}
.fmlist div{min-width:0}

/* ======================= PLAYER ======================= */
.pl{--c:#C9B8FF; overflow:hidden}
.pl .glowbg{position:absolute; left:50%; top:210px; width:150%; aspect-ratio:1; transform:translate(-50%,-30%); pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 34%,transparent),transparent); transition:background .8s; opacity:.9}
.pl .rail{padding-inline:calc(50% - var(--u)*31); scroll-padding-inline:0; gap:calc(var(--u)*4); padding-block:20px 26px}
.pl .rail>*{scroll-snap-align:center; scroll-snap-stop:always}
.pl-c{width:calc(var(--u)*62); aspect-ratio:1; border-radius:18px; overflow:hidden;
  /* the covers are a coverflow driven by the rail's own scroll (see `fan` in m.js): each leans away and shrinks with its distance from the middle */
  transform:perspective(900px) translateX(calc(var(--tx,0) * 1px)) rotateY(calc(var(--ry,0) * 1deg)) scale(var(--sc,.84)); opacity:var(--op,.5);
  transition:box-shadow .5s var(--ease); will-change:transform,opacity;
  box-shadow:0 20px 40px -18px #000; border:1px solid var(--line)}
.pl-c.on{box-shadow:0 34px 70px -22px color-mix(in srgb,var(--c) 70%,#000),0 0 0 1px rgba(255,255,255,.12)}
.pl-c img{width:100%; height:100%; object-fit:cover}
.pl-deck{margin:0 var(--gut); padding:20px 18px 18px; border-radius:26px; position:relative; z-index:1}
.pl-now b{display:block; font-size:21px; font-weight:600; letter-spacing:-.025em; line-height:1.2}
.pl-now span.a{display:block; margin-top:3px; font-size:14.5px; color:var(--ink-2)}
.pill{display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px; border-radius:99px; font-size:12px; font-weight:600; color:var(--ink-2); background:rgba(255,255,255,.07); border:1px solid var(--line)}
.pill.hot{color:#E0D4FF; background:rgba(138,102,255,.24); border-color:rgba(160,128,255,.4)}
.pill .ic{font-size:13px}
.pl-now .pill{margin-top:12px}
.pl-time{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; margin-top:18px; font:500 12.5px/1 var(--mono); color:var(--ink-3)}
.pl-time .tr{height:5px; border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden}
.pl-time .tr i{display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,var(--c),#fff)}
.pl-ctl{display:flex; align-items:center; justify-content:center; gap:22px; margin-top:16px}
.pl-ctl button{width:54px; height:54px; border-radius:50%; display:grid; place-items:center; color:var(--ink); background:rgba(255,255,255,.07); border:1px solid var(--line)}
.pl-ctl button svg{width:22px; height:22px; fill:currentColor}
.pl-ctl .main{width:68px; height:68px; color:#0B0818; background:linear-gradient(180deg,#fff,#D8CCFF); border:0; box-shadow:0 14px 34px -10px color-mix(in srgb,var(--c) 80%,transparent)}
.pl-ctl .main svg{width:26px; height:26px}
.pl-spec{width:100%; height:calc(var(--u)*34); max-height:170px; margin-top:26px}
.pl-note{margin:14px var(--gut) 0; text-align:center}

/* ======================= DASHBOARD ======================= */
.tag{font-size:11.5px; font-weight:600; letter-spacing:.02em; padding:3px 9px; border-radius:99px; color:var(--pos); background:rgba(78,226,162,.12); border:1px solid rgba(78,226,162,.28); white-space:nowrap}
.tag.o{color:#E8C27A; background:rgba(232,194,122,.1); border-color:rgba(232,194,122,.28)}
.tag.e{color:#C7B5FF; background:rgba(160,128,255,.12); border-color:rgba(160,128,255,.3)}
.honest{margin:30px var(--gut) 0; display:grid; gap:10px}
.honest>div{display:flex; gap:14px; align-items:flex-start; padding:16px; border-radius:20px; background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); border:1px solid var(--line)}
.honest .tag{margin-top:1px}
.honest p{font-size:14.5px; line-height:1.5; color:var(--ink-2); min-width:0}
.honest p b{color:var(--ink); font-weight:600}

/* ======================= FEATURES ======================= */
.feat{display:grid; gap:16px; padding-inline:var(--gut)}
.feat .gl .viz{padding:16px 16px 6px}
.feat .gl .txt{padding:14px 20px 24px}
.feat .gl .txt h3{font-size:19px}
.feat .gl .txt p{margin-top:8px; font-size:15px; line-height:1.55; color:var(--ink-2)}
.mini{border-radius:16px; background:rgba(8,6,16,.62); border:1px solid var(--line); overflow:hidden; font-size:13.5px}
.mut{color:var(--ink-3)}

.fl .r{display:flex; align-items:center; gap:11px; padding:10px 12px; min-width:0}
.fl .r+.r{border-top:1px solid var(--line)}
.fl .r.sel{background:rgba(138,102,255,.16); box-shadow:inset 2px 0 0 var(--o1)}
.ki{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:none; font-size:16px; color:var(--c); background:color-mix(in srgb,var(--c) 15%,transparent)}
.fl .nm{flex:1; min-width:0}
.fl .nm b{display:block; font-weight:500; font-size:14px; line-height:1.3; overflow-wrap:anywhere}
.fl .nm small{display:block; font-size:11.5px; color:var(--ink-3)}
.fl .sz{font-size:12.5px; color:var(--ink-2); white-space:nowrap; font-variant-numeric:tabular-nums}
.fl .pill{height:22px; font-size:11px; padding:0 8px}

.qv{display:grid; gap:10px}
.qv .mini{padding:14px}
.qv .top{display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-weight:600; font-size:14.5px}
.qv .top small{font-weight:400; font-size:12px; color:var(--ink-3); white-space:nowrap}
.pb{height:6px; border-radius:99px; background:rgba(255,255,255,.1); margin:12px 0 14px; overflow:hidden}
.pb i{display:block; height:100%; width:62%; border-radius:99px; background:linear-gradient(90deg,var(--o1),var(--o3)); animation:prog 4.8s ease-in-out infinite}
@keyframes prog{0%{width:12%}70%,100%{width:92%}}
.qv .row{display:flex; gap:8px}
.toast{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 12px 11px 14px; border-radius:14px; font-size:13.5px; background:rgba(30,23,52,.9); border:1px solid var(--line-2)}
.toast b{display:inline-flex; align-items:center; gap:6px; color:var(--o2); font-weight:600; white-space:nowrap}

.rn .steps{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px}
.rn .mini{padding:4px 12px}
.rn .pair{padding:10px 0; min-width:0}
.rn .pair+.pair{border-top:1px solid var(--line)}
.rn .pair s{display:block; font-size:12px; color:var(--ink-3); text-decoration-color:rgba(255,255,255,.25); overflow-wrap:anywhere}
.rn .pair span{display:flex; align-items:center; gap:7px; margin-top:3px; font-size:13.5px; color:var(--ink); min-width:0}
.rn .pair span .ic{color:var(--o2); font-size:14px}
.rn .pair span em{font-style:normal; line-height:1.35; overflow-wrap:anywhere}

.sl{position:relative; height:132px; display:flex; align-items:center; justify-content:center}
.sleeve{position:absolute; width:92px; height:92px; border-radius:14px; display:grid; place-items:center; font-size:30px; color:rgba(255,255,255,.85); border:1px solid var(--line-2); box-shadow:0 14px 26px -12px #000}
.sleeve:nth-child(1){transform:translateX(-62px) rotate(-9deg); background:linear-gradient(145deg,#6B4BD6,#2A1B63)}
.sleeve:nth-child(2){transform:translateX(62px) rotate(9deg); background:linear-gradient(145deg,#3E5CC8,#16225E)}
.sleeve:nth-child(3){z-index:2; background:linear-gradient(145deg,#C86BE0,#5A2A93)}
.sl-label{display:flex; justify-content:center; margin-top:8px}

.pv .meta{display:flex; align-items:center; gap:12px; padding:12px 12px 6px}
.pv .art{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-size:22px; color:#fff; background:linear-gradient(145deg,#9B6BFF,#4A2BA8); flex:none}
.pv .t{font-weight:600; font-size:15px}
.pv .s{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.wave{display:flex; align-items:center; gap:3px; height:54px; padding:0 12px}
.wave i{flex:1; min-width:0; border-radius:3px; background:linear-gradient(180deg,var(--o3),var(--o1)); opacity:.85; height:var(--h); animation:wv 1.6s ease-in-out var(--dl) infinite alternate}
.wave i:nth-child(n+14){opacity:.3; background:#fff}
@keyframes wv{from{transform:scaleY(.55)}to{transform:scaleY(1)}}
.pv .tm{display:flex; justify-content:space-between; gap:8px; padding:6px 12px 12px; font-size:11.5px; color:var(--ink-3)}

.ck .in{display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); font-size:14.5px}
.ck .in .ic{color:var(--ink-3); font-size:17px}
.ck .in span{flex:1}
.caret{display:inline-block; width:1.5px; height:15px; margin-left:2px; vertical-align:-2px; background:var(--o2); animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
kbd{font:600 11.5px/1 var(--mono); padding:5px 7px; border-radius:7px; background:rgba(255,255,255,.08); border:1px solid var(--line); color:var(--ink-2)}
.ck .grp{padding:10px 14px 4px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.ck .it{display:flex; align-items:center; gap:10px; margin:0 6px; padding:9px 8px; border-radius:10px; font-size:14px; min-width:0}
.ck .it.on{background:rgba(138,102,255,.2)}
.ck .it .ic{color:var(--o2); font-size:16px}
.ck .it span{flex:1; min-width:0; line-height:1.3; overflow-wrap:anywhere}
.ck .it em{font-style:normal; font-size:12px; color:var(--ink-3); white-space:nowrap; flex:none}
.ck .end{height:8px}

.gv .hd{display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px 12px 10px; border-bottom:1px solid var(--line); font-weight:600}
.gv .hd .ic{color:var(--o2)}
.gv .hd small{font-weight:400; font-size:12px; color:var(--ink-3); margin-left:auto}
.gv .f{display:flex; align-items:center; gap:10px; padding:10px 12px; font-size:13.5px; min-width:0}
.gv .f+.f{border-top:1px solid var(--line)}
.gv .f b{width:20px; height:20px; border-radius:6px; display:grid; place-items:center; font:700 11px/1 var(--mono); flex:none}
.gv .f b.m{color:#E8C27A; background:rgba(232,194,122,.16)}.gv .f b.a{color:var(--pos); background:rgba(78,226,162,.15)}.gv .f b.u{color:var(--ink-3); background:rgba(255,255,255,.08)}
.gv .f span.n{flex:1; min-width:0; line-height:1.3; overflow-wrap:anywhere}
.gv .f small{font-size:12px; color:var(--ink-3); white-space:nowrap}
.gv .ev{display:flex; flex-wrap:wrap; gap:6px; padding-bottom:4px}

/* ======================= DUPLICATES ======================= */
.dsteps{margin:26px var(--gut) 0; display:grid; gap:10px}
.dstep{
  display:block; text-align:left; width:100%; padding:16px 18px 16px 20px; border-radius:22px; position:relative; overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012)); border:1px solid var(--line); transition:border-color .4s,background .4s;
}
.dstep::before{content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:3px; background:var(--o1); transform:scaleY(0); transition:transform .5s var(--ease)}
.dstep.on{border-color:rgba(160,128,255,.4); background:linear-gradient(180deg,rgba(138,102,255,.14),rgba(255,255,255,.02))}
.dstep.on::before{transform:none}
.dstep .no{display:block; font:600 11.5px/1 var(--sans); letter-spacing:.09em; text-transform:uppercase; color:var(--o2); margin-bottom:9px}
.dstep .h,.dstep .p{display:block}
.dstep .h{font-size:17.5px; font-weight:600; line-height:1.28; letter-spacing:-.015em; color:var(--ink-2); text-wrap:balance; transition:color .4s}
.dstep .p{margin-top:7px; font-size:14.5px; line-height:1.5; color:var(--ink-3); transition:color .4s}
.dstep.on .h{color:var(--ink)}
.dstep.on .p{color:var(--ink-2)}
.dview{margin:0 var(--gut); padding:18px 16px 18px}
.dv-cap{display:flex; flex-direction:column; gap:3px; margin-bottom:14px; min-height:44px}
.dv-cap b{font-size:16px; letter-spacing:-.01em}
.dv-cap span{font-size:13.5px; color:var(--ink-3)}
.dv-grid{display:grid; grid-template-columns:repeat(8,1fr); gap:6px}
.dv-grid i{aspect-ratio:1; border-radius:8px; background:linear-gradient(145deg,rgba(200,184,255,.34),rgba(150,128,230,.2)); border:1px solid rgba(200,184,255,.32); transition:opacity .6s,transform .6s var(--ease),background .6s,border-color .6s,box-shadow .6s}
.dv-grid i.out{opacity:.1; transform:scale(.7)}
.dv-grid i.g0{background:linear-gradient(145deg,#C9A7FF,#7A52EE); border-color:rgba(255,255,255,.4); box-shadow:0 0 18px -2px rgba(150,110,255,.8)}
.dv-grid i.g1{background:linear-gradient(145deg,#8CEBC5,#2DB887); border-color:rgba(255,255,255,.4); box-shadow:0 0 18px -2px rgba(78,226,162,.7)}
.dv-res{display:flex; align-items:center; gap:13px; margin-top:16px; padding:14px; border-radius:18px; background:rgba(78,226,162,.1); border:1px solid rgba(78,226,162,.28); opacity:.25; transform:scale(.98); transition:opacity .6s,transform .6s var(--ease)}
.dv-res.on{opacity:1; transform:none}
.dv-res .ico{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-size:19px; color:#06140E; background:var(--pos); flex:none}
.dv-res b{display:block; font-size:15px; line-height:1.3}
.dv-res small{display:block; font-size:13px; line-height:1.4; color:var(--ink-2); margin-top:2px}
.dv-note{display:block; margin-top:12px; text-align:right; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}

/* ======================= PRIVACY ======================= */
.eclipse-wrap{position:relative; width:calc(var(--u)*66); max-width:340px; aspect-ratio:1; margin:0 auto 38px}
.eclipse-wrap .ring{position:absolute; inset:-9%; border-radius:50%; border:1px solid rgba(160,128,255,.22)}
.eclipse-wrap .ring.r2{inset:-22%; border-color:rgba(160,128,255,.1)}
.eclipse{position:absolute; inset:0; border-radius:50%; display:grid; place-items:center; text-align:center;
  background:radial-gradient(circle at 50% 38%,#0E0B1C 0 62%,#05040A 63%);
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 0 70px 6px rgba(138,102,255,.4),inset 0 0 50px rgba(0,0,0,.9)}
.eclipse::before{content:""; position:absolute; inset:-1px; border-radius:50%; padding:2px;
  background:conic-gradient(from 210deg,transparent 0 40%,#E7B4FA 58%,#8A66FF 70%,transparent 86%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
.eclipse b{display:block; font-size:calc(var(--u)*26); line-height:1; font-weight:200; letter-spacing:-.05em; background:linear-gradient(180deg,#fff,#B9A4F5); -webkit-background-clip:text; background-clip:text; color:transparent}
.eclipse span{display:block; max-width:70%; margin:8px auto 0; font-size:12.5px; line-height:1.35; color:var(--ink-2)}
.pts{display:grid; gap:12px; margin-top:28px}
.pt{display:flex; gap:14px; padding:18px 16px}
.pt h3{font-size:17px}
.pt p{margin-top:6px; font-size:14.5px; line-height:1.5; color:var(--ink-2)}
.pt>div{min-width:0}
.specs{display:grid; gap:10px; margin-top:44px}
.spec{padding:16px 18px; border-radius:20px; background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); border:1px solid var(--line)}
.spec small{display:block; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--o2); margin-bottom:6px; font-weight:600}
.spec p{font-size:14.5px; line-height:1.5; color:var(--ink-2)}
.spec p b{color:var(--ink); font-weight:600}
code{font:500 12.5px/1.5 var(--mono); padding:2px 6px; border-radius:6px; background:rgba(255,255,255,.08); color:var(--o3); overflow-wrap:anywhere}

/* ======================= PRICING ======================= */
.buy{padding:70px 0 130px; overflow:hidden; text-align:center}
.horizon{position:absolute; left:50%; top:-190px; width:200%; aspect-ratio:1; transform:translateX(-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side,rgba(10,8,20,.9) 94%,transparent);
  box-shadow:inset 0 2px 0 rgba(176,140,255,.55),inset 0 40px 90px -20px rgba(138,102,255,.4)}
.buy .wrap{position:relative; z-index:1}
.buy-card{padding:34px 22px 26px}
.price{display:flex; justify-content:center; align-items:flex-start; gap:4px; margin:22px 0 14px; line-height:.9; font-weight:200; letter-spacing:-.06em; font-size:calc(var(--u)*34);
  background:linear-gradient(180deg,#fff,#B9A4F5); -webkit-background-clip:text; background-clip:text; color:transparent}
.price sup{font-size:.36em; font-weight:400; margin-top:.2em; letter-spacing:0}
.buy .lede{font-size:16px}
.ticks{list-style:none; margin:24px 0 26px; padding:0; display:grid; gap:12px; text-align:left}
.ticks li{display:flex; align-items:flex-start; gap:12px; font-size:15.5px; line-height:1.4}
.ticks .ic{width:22px; height:22px; padding:4px; border-radius:50%; margin-top:-1px; color:#06140E; background:var(--pos); stroke-width:2.6}
.avail{margin-top:20px; font-size:13.5px; line-height:1.6; color:var(--ink-3)}
.avail b{color:var(--o2); font-weight:600}
.avail a,.tryact .note a{color:var(--ink-2); overflow-wrap:anywhere; display:inline-block; padding:13px 4px; margin:-13px -4px}

/* ======================= FOOTER ======================= */
footer{padding:36px var(--gut) calc(40px + env(safe-area-inset-bottom)); border-top:1px solid var(--line)}
footer .brand{margin-bottom:6px}
footer nav{display:flex; flex-wrap:wrap; gap:0 22px}
footer nav a{display:inline-flex; align-items:center; min-height:44px; font-size:15px; color:var(--ink-2); text-decoration:none}
footer small{display:block; margin-top:18px; font-size:13px; line-height:1.5; color:var(--ink-3)}

/* ======================= LIGHTBOX ======================= */
.lb{position:fixed; inset:0; z-index:90; display:flex; flex-direction:column; background:rgba(4,3,9,.96); opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s}
.lb.open{opacity:1; visibility:visible; transition:opacity .3s,visibility 0s}
.lb-top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:max(14px,env(safe-area-inset-top)) var(--gut) 12px}
.lb-top span{font-size:13.5px; color:var(--ink-2)}
.lb-x{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-size:20px; background:rgba(255,255,255,.1); border:1px solid var(--line-2); flex:none}
.lb-body:focus-visible{outline:2px solid var(--o2); outline-offset:-4px}
.lb-body{flex:1; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-x pan-y pinch-zoom; padding:0 0 max(24px,env(safe-area-inset-bottom))}
.lb-body img{max-width:none; height:auto; margin:0 auto}
.lb-body.wide img{width:min(280vw,1900px); margin:0}
.lb-body.tall img{width:min(100vw,520px)}

/* ======================= try.html ======================= */
.hero.compact{padding-bottom:30px}
.hero.compact h1{margin-bottom:16px}
.tryact{margin:0 var(--gut); padding:24px 20px 22px}
.tryact h3{font-size:20px; margin-bottom:18px}
.tryact .or{display:flex; align-items:center; gap:12px; margin:16px 0; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.tryact .or::before,.tryact .or::after{content:""; flex:1; height:1px; background:var(--line-2)}
.tryact .note{margin-top:18px; padding-top:18px; border-top:1px solid var(--line); font-size:14px; line-height:1.6; color:var(--ink-2)}
.tryact .note b{color:var(--ink)}
.tnotes{display:grid; gap:12px; margin:16px var(--gut) 0}
.tnote{display:flex; gap:14px; padding:18px 16px}
.tnote h3{font-size:17px}
.tnote p{margin-top:6px; font-size:14.5px; line-height:1.5; color:var(--ink-2)}
.tnote>div{min-width:0}
.tshot{margin:26px var(--gut) 0}

/* very small phones */
@media (max-width:350px){
  .hs{display:none}
  .seg button .ic{display:none}
  .stats b{font-size:32px}
  .dock .txt small{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition-duration:.01ms!important}
  html:not(.no-smooth){scroll-behavior:auto}
  html.js .rv{opacity:1; transform:none}
}

/* ===== top bar: Liquid Glass — a lit rim and a sheen, the same material as the view switcher ===== */
.bar{
  background:
    radial-gradient(130% 240% at 16% -70%, rgba(255,255,255,.2), rgba(255,255,255,0) 56%),
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.02)),
    rgba(19,15,34,.5);
  -webkit-backdrop-filter:blur(26px) saturate(1.9) brightness(1.08); backdrop-filter:blur(26px) saturate(1.9) brightness(1.08);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2), inset 0 -12px 20px -14px rgba(170,135,255,.3), inset 0 12px 20px -14px rgba(255,255,255,.2),
    0 16px 40px -18px #000, 0 0 60px -28px rgba(138,102,255,.7);
}
.bar.scrolled{
  background:
    radial-gradient(130% 240% at 16% -70%, rgba(255,255,255,.17), rgba(255,255,255,0) 56%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.015)),
    rgba(10,8,20,.72);
  border-color:rgba(255,255,255,.08)}
.menu-btn{background:radial-gradient(120% 90% at 22% -10%, rgba(255,255,255,.32), rgba(255,255,255,0) 55%), rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.18); box-shadow:inset 0 1.5px 1px rgba(255,255,255,.5), inset 0 -8px 12px -8px rgba(170,135,255,.5)}
.bar .btn-primary, .bar .cta{box-shadow:inset 0 1.5px 1px rgba(255,255,255,.55), inset 0 -8px 14px -8px rgba(60,30,160,.5), 0 8px 24px -8px rgba(138,102,255,.8)}

/* ======================= HERO: cords out of the cards ======================= */
/* the same cords as the desktop hero — a glow, a dark channel, the colour and a bright core, round corners, a flare where one forks —
   cropped to the middle and drawn a little finer; they surface from the foot of the cards and are gone before they end */
.fan-cords{position:relative; margin:-44px calc(var(--gut) * -1) -64px; z-index:1; pointer-events:none}
.mbranches{display:block; width:100%; height:auto; overflow:visible; mix-blend-mode:screen; opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0.000) 0.0%,rgba(0,0,0,0.074) 4.3%,rgba(0,0,0,0.259) 8.7%,rgba(0,0,0,0.500) 13.0%,rgba(0,0,0,0.741) 17.3%,rgba(0,0,0,0.926) 21.7%,rgba(0,0,0,1.000) 26.0%,rgba(0,0,0,1.000) 34.0%,rgba(0,0,0,0.876) 37.7%,rgba(0,0,0,0.750) 41.4%,rgba(0,0,0,0.627) 45.1%,rgba(0,0,0,0.509) 48.9%,rgba(0,0,0,0.401) 52.6%,rgba(0,0,0,0.304) 56.3%,rgba(0,0,0,0.220) 60.0%,rgba(0,0,0,0.150) 63.7%,rgba(0,0,0,0.094) 67.4%,rgba(0,0,0,0.053) 71.1%,rgba(0,0,0,0.025) 74.9%,rgba(0,0,0,0.009) 78.6%,rgba(0,0,0,0.001) 82.3%,rgba(0,0,0,0.000) 86.0%); mask-image:linear-gradient(180deg,rgba(0,0,0,0.000) 0.0%,rgba(0,0,0,0.074) 4.3%,rgba(0,0,0,0.259) 8.7%,rgba(0,0,0,0.500) 13.0%,rgba(0,0,0,0.741) 17.3%,rgba(0,0,0,0.926) 21.7%,rgba(0,0,0,1.000) 26.0%,rgba(0,0,0,1.000) 34.0%,rgba(0,0,0,0.876) 37.7%,rgba(0,0,0,0.750) 41.4%,rgba(0,0,0,0.627) 45.1%,rgba(0,0,0,0.509) 48.9%,rgba(0,0,0,0.401) 52.6%,rgba(0,0,0,0.304) 56.3%,rgba(0,0,0,0.220) 60.0%,rgba(0,0,0,0.150) 63.7%,rgba(0,0,0,0.094) 67.4%,rgba(0,0,0,0.053) 71.1%,rgba(0,0,0,0.025) 74.9%,rgba(0,0,0,0.009) 78.6%,rgba(0,0,0,0.001) 82.3%,rgba(0,0,0,0.000) 86.0%)}
.mbranches path{fill:none; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke}
.mbranches g{opacity:var(--k,1)}
.mbranches .c-glow{stroke:#8A66FF; stroke-width:6; opacity:.5}
.mbranches .c-dark{stroke:#000; stroke-width:4.5; opacity:.55}
.mbranches .c-halo{stroke:#A98BFF; stroke-width:2.4; opacity:.6}
.mbranches .c-core{stroke:#F3EAFF; stroke-width:1; opacity:.85}
.mbranches .flare path{stroke:#EBDDFF; stroke-width:1.6; opacity:.7}

/* ======================= DASHBOARD: the tour, one topic at a time ======================= */
.mtour{list-style:none; margin:0; padding:0 var(--gut); position:relative; display:grid; gap:42px}
.mtour::before{content:""; position:absolute; left:calc(var(--gut) + 5px); top:10px; bottom:10px; width:2px; background:var(--line); border-radius:2px}
.mtour::after{content:""; position:absolute; left:calc(var(--gut) + 5px); top:10px; width:2px; height:var(--mp,0px); max-height:calc(100% - 20px); border-radius:2px;
  background:linear-gradient(180deg,var(--o2),var(--o1)); box-shadow:0 0 14px 2px rgba(138,102,255,.7)}
.mtour li{position:relative; padding-left:32px}
.mtour li::before{content:""; position:absolute; left:0; top:6px; width:12px; height:12px; border-radius:50%; background:#251D3E; border:2px solid #3B3070; transition:all .4s; z-index:1}
.mtour li.pass::before{background:var(--o2); border-color:var(--o3)}
.mtour li.on::before{background:var(--o2); border-color:var(--o3); box-shadow:0 0 0 4px rgba(160,124,255,.18), 0 0 18px 3px rgba(138,102,255,.85)}
.mtour h3{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; font-size:19px}
.mtour p{margin-top:8px; font-size:14.5px; line-height:1.55; color:var(--ink-2)}
/* a card is drawn in: wiped on from the left as its topic comes up the screen */
.mshot{display:block; width:100%; margin-top:16px}
.mshot img{width:100%; height:auto; filter:drop-shadow(0 20px 28px rgba(0,0,0,.55))}
html.js .mtour .mshot{clip-path:inset(-30px 100% -40px 0); transition:clip-path 1.25s var(--ease) .12s}
html.js .mtour li.in .mshot{clip-path:inset(-30px -30px -40px -30px)}
@media (prefers-reduced-motion:reduce){html.js .mtour .mshot{clip-path:none; transition:none}}

/* ======================= DASHBOARD: the pinned scene ======================= */
/* The same scene as the desktop site: the dashboard's cards fly in and settle as the section arrives, then a camera
   travels the page one card at a time while the topic under it changes. Off until the script has started it —
   without it, or with reduced motion, the plain list above stands instead. */
.mscene{display:none}
html.mscene-on .mscene{display:block; height:620vh; height:620svh; position:relative; margin-top:calc(-56px - var(--slack,0px)); margin-bottom:calc(-60px - var(--slack,0px))}   /* --slack (script): the empty space the centring leaves above and below the cards on a tall screen, taken back while the scene is not pinned */
.mscene-stick>*{pointer-events:auto}   /* the pinned box keeps 84 px for the bar above its cards; pulling it up closes that gap while the scene is still scrolling in */
html.mscene-on .mtour{display:none}
.mscene-stick{position:sticky; top:0; height:100vh; height:100svh; display:flex; flex-direction:column; justify-content:center; gap:12px; pointer-events:none;   /* centred on the screen while it is pinned */
  padding:84px var(--gut) calc(86px + env(safe-area-inset-bottom))}
/* the view takes what the topic text leaves, never less than a card can be read at; the bar (66 px) is above it, the dock (76 px) below */
.mview{position:relative; flex:0 1 auto; width:calc(100% + var(--gut) * 2); margin-inline:calc(var(--gut) * -1); height:clamp(190px,48vh,520px); height:clamp(190px,48svh,520px); min-height:150px; overflow:hidden;
  /* no frame: the cards stand on the page, and fade out towards the edges of their space instead of being cut by a box */
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent), linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  -webkit-mask-composite:source-in; mask-image:linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent), linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-composite:intersect}
.mview .persp{position:absolute; inset:0; perspective:1100px; perspective-origin:50% 42%}
.mview .tilt{position:absolute; inset:0; transform-style:preserve-3d; will-change:transform}
.mview .rig{position:absolute; left:0; top:0; transform-origin:0 0; transform-style:preserve-3d; will-change:transform}
.mview .rig .topbar{display:none}
.mview .lyr{position:absolute; transform-style:preserve-3d; will-change:transform,opacity; opacity:0; cursor:pointer}
.mview .lyr img{position:absolute; inset:0; width:100%; height:100%; display:block; max-width:none}
.mview .lyr .dim{position:absolute; inset:0; border-radius:var(--r,10px); background:#07060E; opacity:var(--d,0); pointer-events:none}
.mview .lyr::after{content:""; position:absolute; inset:-1px; border-radius:calc(var(--r,10px) + 1px); pointer-events:none; opacity:var(--g,0);
  box-shadow:0 0 0 1.2px rgba(200,170,255,.75), 0 0 30px 2px rgba(138,102,255,.55), 0 20px 50px -10px rgba(0,0,0,.8)}
.mview .glare{display:none}
/* the topics sit on top of each other in one grid cell, so the box is as tall as the longest of them in any language */
.mtopics{position:relative; flex:none; display:grid}
.mtopic{position:relative; grid-area:1 / 1; min-width:0; opacity:0; transform:translateY(10px); transition:opacity .45s var(--ease), transform .55s var(--ease); pointer-events:none}
.mtopic.on{opacity:1; transform:none; pointer-events:auto}
.mtopic h3{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; font-size:19px; padding-inline-end:52px; min-height:44px}
.mopen{position:absolute; inset-inline-end:0; top:-4px; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-size:18px; color:var(--ink); background:radial-gradient(120% 90% at 22% -10%,rgba(255,255,255,.28),rgba(255,255,255,0) 55%),rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.18)}
.mtopic p{margin-top:8px; font-size:14px; line-height:1.5; color:var(--ink-2)}
.mdots{flex:none; display:flex; justify-content:center; gap:7px; margin-top:-4px}
.mdots i{width:7px; height:7px; border-radius:99px; background:rgba(255,255,255,.2); transition:width .35s var(--ease), background .3s}
.mdots i.on{width:24px; background:var(--o2)}
@media (max-height:700px){ .mtopic p{font-size:13.5px; line-height:1.45} .mscene-stick{gap:8px} }
/* a short screen (an iPhone SE in Safari is about 550 px high): the dock steps aside while the scene is up (the bar still has the button),
   and the room it kept goes to the card and its text */
@media (max-height:660px){
  .mscene-stick{padding-top:76px; padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .mtopic p{font-size:13px; line-height:1.42; margin-top:5px}
  .mtopic h3{font-size:17.5px}
  .mview{height:clamp(150px,44svh,520px)}
}
@media (max-height:520px){ .mdots{display:none} .mview{min-height:130px} }

/* ======================= TOP BAR: other languages ======================= */
/* the call to action stays on one line and gives way before the bar does: a longer word than "Try free" must not push the
   language and menu buttons out of the bar */
.bar .btn-sm{white-space:nowrap; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; padding-inline:14px; min-height:44px}
.bar .brand{flex:none}
.bar .lang-btn{flex:none; width:44px; height:44px}
.lang-pop .lang-x{width:44px; height:44px}
/* 320 px: the mark alone stands for the name (it keeps its label and a 44 px target), so the button and the two round ones fit */
@media (max-width:359px){
  .bar{padding-left:8px; gap:6px}
  .bar .brand{font-size:0; gap:0; min-width:44px; justify-content:center}
  .bar .brand svg{width:30px; height:30px}
}
/* a longer word than "Try free" on a narrow phone: the bar keeps the mark and gives the room that the name took to the button */
@media (max-width:430px){
  html:not([lang=en]) .bar:has(.lang) .brand{font-size:0; gap:0}
  html:not([lang=en]) .bar:has(.lang) .brand svg{width:30px; height:30px}
}

/* ======================= right to left (Arabic, Persian, Urdu) ======================= */
/* the page flips by itself where it uses flex, grid and text-align:start; these are the places where a physical left or right
   was drawn into the design */
html[dir=rtl] .brand{margin-right:0; margin-left:auto}
html[dir=rtl] .eyebrow,html[dir=rtl] .sec-head,html[dir=rtl] h1,html[dir=rtl] h2,html[dir=rtl] h3{text-align:right}
html[dir=rtl] .mtour::before,html[dir=rtl] .mtour::after{left:auto; right:calc(var(--gut) + 5px)}
html[dir=rtl] .mtour li{padding-left:0; padding-right:32px}
html[dir=rtl] .mtour li::before{left:auto; right:0}
html[dir=rtl] .mtopic{text-align:right}
html[dir=rtl] .sheet a{text-align:right}

/* playback stays left to right, as it does in macOS; numbers with a unit are not turned around */
html[dir=rtl] .pl-ctl,html[dir=rtl] .pl-time,html[dir=rtl] .pl-spec,html[dir=rtl] #plbpm{direction:ltr}
html[dir=rtl] [data-roll]{direction:ltr; unicode-bidi:isolate; display:block; text-align:right}

/* ======================= centred text ======================= */
/* all running text sits on the centre line: headings and ledes, the scene's topics, the feature cards, the privacy points, the specs
   and the footer. Rows of an icon and a line of text are centred as a group; the small interface drawings keep their own alignment. */
.sec-head{align-items:center; text-align:center}
.mtopic,.feat .gl .txt,.pts>*,.spec,.dv-cap,.pl-now,.honest>div,.dv-res,.fmlist li,footer{text-align:center}
.mtopic h3{justify-content:center; padding-inline:52px}
.fmlist li,.dv-res{flex-direction:column; justify-content:center; align-items:center; gap:10px}
.honest>div,.pt{flex-direction:column; align-items:center; gap:10px}
.dv-cap{align-items:center}
.tryact{text-align:center}
footer .brand{justify-content:center; margin-right:0}
footer nav{justify-content:center}
html[dir=rtl] :is(.eyebrow,.sec-head,h1,h2,h3,.mtopic,.feat .gl .txt,.pts>*,.spec,footer){text-align:center}