/* Gomex landing. Structure and motion follow dial.software's page: a floating nav pill, a hero over a built
   window, a glass stat strip, scroll-lit statements across three "acts" of background, a bento, a plain list,
   two plan cards, FAQ and a dial at the foot. Everything shown is markup: nothing here is a screenshot. */

@font-face{font-family:"Onest";src:url(fonts/onest-cyrillic-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";src:url(fonts/onest-latin-ext-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Onest";src:url(fonts/onest-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  color-scheme:dark;
  --void:oklch(.2 .004 285);
  --surface:oklch(.172 .004 285);
  --surface-2:oklch(.195 .004 285);
  --elevated:oklch(.235 .005 285);
  --ink-1:oklch(.975 .002 285);
  --ink-2:oklch(.84 .004 285);
  --ink-3:oklch(.775 .004 285);
  --ink-4:oklch(.7 .004 285);
  --hair:oklch(1 0 0 / .1);
  --wash:oklch(1 0 0 / .05);
  --brand:#1400ff;
  --accent-text:oklch(.86 .02 285);
  --p-rose:oklch(.709 .16 10);
  --p-amber:oklch(.709 .13 75);
  --p-green:oklch(.709 .14 150);
  --p-cyan:oklch(.709 .11 210);
  --p-indigo:oklch(.709 .14 275);
  --p-violet:oklch(.709 .15 310);
  /* The app's presence colours: green is you, pink is somewhere people are. */
  --on-you:oklch(.78 .19 150);
  --on-room:oklch(.74 .17 350);
  --danger:#ff453a;
  --ease-out-strong:cubic-bezier(.23,1,.32,1);
  --ease-soft:cubic-bezier(.2,0,0,1);
  --font-sans:"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --font-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --page-pad:clamp(20px,5vw,64px);
  --maxw:1120px;
  --cell-r:28px;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}
*{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%}
@media(hover:hover)and (pointer:fine){html{scroll-behavior:smooth}}
body{margin:0;background:var(--void);color:var(--ink-1);font-family:var(--font-sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;overflow-x:clip;transition:background-color .9s var(--ease-soft)}
body[data-bg=black]{background:#050506}
body[data-bg=light]{background:#ecebf0}
body[data-bg=dark]{background:var(--void)}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.02em}
p{margin:0}
a{color:inherit;text-decoration:none}
b{font-weight:650}
ul{margin:0;padding:0;list-style:none}
section[id],header[id]{scroll-margin-top:84px}
:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:6px}

/* Icons: the sprite's 24px symbols take stroke from here. */
.ic{display:inline-block;width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.gmk{display:block;width:22px;height:22px;flex:none;color:currentColor}
.gh{width:13px;height:13px;flex:none}

/* ───────── Kicker, lede, links, buttons ───────── */
.kicker{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--ink-2);border:1.5px solid color-mix(in oklch,var(--k,oklch(1 0 0)) 42%,transparent);border-radius:999px;padding:5px 13px;margin-bottom:18px}
.kicker:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--k,var(--ink-3))}
.lede{color:var(--ink-2);font-size:clamp(17px,2vw,20px);text-wrap:pretty}
.link{display:inline-block;padding:6px 0;color:var(--accent-text);font-weight:500;transition:color .2s var(--ease-soft)}
.link:hover{color:var(--ink-1)}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;padding:11px 20px;border-radius:999px;border:1px solid transparent;transition:transform .14s var(--ease-out-strong),background .2s var(--ease-soft),box-shadow .2s var(--ease-soft)}
.btn:active{transform:scale(.96)}
.btn-white{background:#f9fafb;color:#101215;box-shadow:0 1px #ffffff80 inset,0 1px 3px #00000059}
@media(hover:hover)and (pointer:fine){.btn-white:hover{background:#fff;box-shadow:0 1px #fff9 inset,0 2px 6px #0006}}
.btn-ghost{background:var(--wash);border-color:var(--hair);color:var(--ink-1);box-shadow:0 1px #ffffff0a inset}
@media(hover:hover)and (pointer:fine){.btn-ghost:hover{background:#ffffff17}}
.btn.copied{background:oklch(.86 .13 150);color:#06210f}
.btn-sm{padding:8px 16px;font-size:14px}
.btn-lg{padding:15px 28px;font-size:17px}
/* English labels are a few px longer: on phones the big buttons give up some side padding to stay on one line. */
@media(max-width:420px){html[lang=en] .btn-lg{padding-left:22px;padding-right:22px}}
.cta-note{font-size:13px;color:var(--ink-4)}

/* The install one-liner: the page's primary ask. A dark glass pill with the command and a white copy button. */
.cmd{display:flex;align-items:center;gap:14px;width:fit-content;min-width:min(100%,460px);max-width:min(100%,920px);padding:7px 7px 7px 24px;border-radius:999px;background:#19191b8c;-webkit-backdrop-filter:saturate(1.5) blur(22px);backdrop-filter:saturate(1.5) blur(22px);box-shadow:inset 0 0 0 1px #ffffff17,0 1px #ffffff0f inset;text-align:left}
.cmd code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-mono);font-size:clamp(12px,1.35vw,13.5px);color:var(--ink-2)}
.cmd-p{margin-right:1.1ch;color:var(--ink-4);user-select:none}
.cmd-tabs{display:inline-flex;gap:2px;padding:4px;border-radius:999px;background:#121214;box-shadow:inset 0 0 0 1px #ffffff1f,0 10px 30px #0000004d}
.cmd-tabs button{padding:8px 18px;border:0;border-radius:999px;background:none;color:var(--ink-2);font:500 14px/1.2 var(--font-sans);cursor:pointer;transition:background .2s var(--ease-soft),color .2s var(--ease-soft)}
.cmd-tabs button sup{margin-left:2px;font-size:9px;line-height:0;opacity:.6}
.cmd-tabs button:hover{color:var(--ink-1)}
.cmd-tabs button[aria-selected=true]{background:#ececef;color:#111}
.cmd-copy{flex:none;padding:10px 18px}
.cmd-copy .ic{font-size:16px}
@media(max-width:820px){.cmd{border-radius:26px}.cmd code{white-space:normal;overflow:visible;word-break:break-all;line-height:1.45}}
@media(max-width:520px){.cmd{padding-left:18px}.cmd code{font-size:12.5px}.cmd-copy{padding:11px}.cmd-copy span{display:none}}
.cta-note .sep{margin:0 .55em;opacity:.7}

/* One OS at a time: site.js sets html[data-os]; macOS is the default. */
.os-win{display:none!important}
html[data-os=win] .os-win{display:inline-block!important}
html[data-os=win] .os-mac{display:none!important}
.os-ico{display:block;flex:none;fill:currentColor;stroke:none}
svg.os-mac.os-ico{height:1.05em;width:.865em;translate:0 -.06em}
svg.os-win.os-ico{height:1em;width:1em}
.os-chip{display:inline-grid;place-items:center;height:1.7em;margin:-.5em -.85em -.5em -.1em;padding:0 1em;border-radius:999px;background:#08090a;color:#fff;font-size:.82em;font-weight:600;letter-spacing:.01em}
.os-chip span{white-space:nowrap}

/* ───────── Nav ───────── */
.nav{position:fixed;top:14px;left:50%;translate:-50% 0;z-index:50;display:flex;align-items:center;gap:26px;width:max-content;max-width:calc(100vw - 24px);padding:8px 8px 8px 17px;border-radius:999px;background:#19191b8c;-webkit-backdrop-filter:saturate(1.5) blur(22px);backdrop-filter:saturate(1.5) blur(22px);box-shadow:inset 0 0 0 1px #ffffff17,0 1px #ffffff0f inset;transition:background .3s var(--ease-soft),box-shadow .3s var(--ease-soft)}
.nav.scrolled{background:#121314b8;box-shadow:inset 0 0 0 1px #ffffff21,0 1px #ffffff0f inset}
.nav-brand{display:flex;align-items:center;gap:8px;font-weight:650;font-size:17px;letter-spacing:-.02em}
.logo{display:block;width:auto;height:24px;color:var(--ink-1)}
.nav-links{display:flex;gap:24px;margin-left:auto;font-size:14.5px;color:var(--ink-3)}
.nav-links a{transition:color .2s var(--ease-soft)}
.nav-links a:hover{color:var(--ink-1)}
/* The language switch: a line globe and the other language's short name, the same page in that language. */
.nav-lang{position:relative;top:1px;display:inline-flex;align-items:center;gap:6px;margin-right:-8px;font-size:13.5px;font-weight:500;letter-spacing:.02em;color:var(--ink-3);transition:color .2s var(--ease-soft)}
/* Capitals sit high next to the lowercase links: the code drops a pixel, the globe stays put. */
.nav-lang .ic{position:relative;top:-1px;font-size:16px}
.nav-lang:hover{color:var(--ink-1)}
.nav .btn{white-space:nowrap}
@media(max-width:900px){.nav{gap:18px}.nav-links{gap:18px}.nav-lang{margin-right:-4px}}
@media(max-width:720px){
  .nav-links{display:none}
  .nav-lang{margin-left:auto;margin-right:0}
  .nav{width:calc(100vw - 24px);max-width:none;justify-content:space-between;gap:14px}
  .nav .btn-sm{padding:11px 20px;font-size:15px}
}
/* Narrow phones: the switch and the longest button («Установить сервер») still fit on one line. */
@media(max-width:400px){.nav{gap:10px;padding-left:14px}.nav .logo{height:21px}.nav .btn-sm{padding:11px 16px;font-size:14.5px}}
@media(max-width:350px){.nav-lang .ic{display:none}.nav .logo{height:20px}.nav .btn-sm{padding:11px 13px;font-size:14px}}
@media(pointer:coarse){
  .nav,.nav.scrolled{-webkit-backdrop-filter:saturate(1.5) blur(10px);backdrop-filter:saturate(1.5) blur(10px)}
  body{transition-duration:.45s}
}

/* ───────── Hero ───────── */
.hero{position:relative;padding:clamp(120px,18vh,190px) var(--page-pad) 0;max-width:var(--maxw);margin:0 auto;text-align:center}
.hero:before,.sub-hero:before{content:"";position:absolute;z-index:-1;top:0;left:50%;width:100vw;height:100%;translate:-50% 0;pointer-events:none;background-image:radial-gradient(circle,#ffffff24 1px,transparent 1.4px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 72% 62% at 50% 34%,#000 25%,transparent 78%);mask-image:radial-gradient(ellipse 72% 62% at 50% 34%,#000 25%,transparent 78%)}
.hero-h1{font-size:clamp(34px,4.8vw,46px);line-height:1.08;letter-spacing:-.028em;font-weight:600}
.hero-h1 span{display:inline-block;color:var(--ink-1)}
.hero-sub{max-width:580px;margin:24px auto 0;color:var(--ink-2);font-size:clamp(16px,2vw,18px);line-height:1.45;text-wrap:balance}
.hero-cta{margin-top:36px;display:flex;flex-direction:column;align-items:center;gap:14px}
.rise{opacity:0;transform:translateY(26px);filter:blur(6px);transition:opacity .7s var(--ease-out-strong) var(--d,0s),transform .7s var(--ease-out-strong) var(--d,0s),filter .7s var(--ease-out-strong) var(--d,0s)}
body.ready .rise{opacity:1;transform:none;filter:none}
.stage.rise{filter:none}

.stage{position:relative;margin:clamp(48px,8vh,84px) auto 0;max-width:900px;container-type:inline-size}
.stage-glow{position:absolute;left:50%;bottom:-6%;width:86%;height:70%;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side at 50% 60%,oklch(.5 .26 268 / .5),oklch(.42 .22 285 / .2) 55%,transparent 100%);filter:blur(60px);pointer-events:none}
.appfit{position:relative;aspect-ratio:1000/600;overflow:hidden}
@media(max-width:720px){
  .stage{width:170vw;max-width:none;margin-left:0;margin-right:0}
  /* On the phone the hero reads from one left edge: a centred block of text breaks into ragged lines there. */
  .hero{text-align:left}
  .hero-sub{margin-left:0;text-wrap:pretty}
  .hero-cta{align-items:flex-start}
}

/* The window, drawn at 1000 x 620 and scaled by site.js (--s). Two surfaces only: the black window and a
   near-black card under each panel; graphite for everything you press. */
.appwin{position:absolute;left:0;top:0;width:1000px;height:600px;transform:scale(var(--s,.86));transform-origin:0 0;display:grid;grid-template-columns:60px 256px 1fr;gap:8px;padding:8px;background:#000;color:#fff;font-size:14px;line-height:1.3;text-align:left;user-select:none}
.appwin .ic{stroke-width:2}
.aw-lights{position:absolute;left:20px;top:15px;display:flex;gap:8px;z-index:3}
.aw-lights i{width:11px;height:11px;border-radius:50%;background:#ff5f57}
.aw-lights i:nth-child(2){background:#febc2e}
.aw-lights i:nth-child(3){background:#28c840}
.aw-rail{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:38px}
.aw-home svg{display:block;width:42px;height:42px;color:#fff}
.aw-rsep{width:24px;height:2px;border-radius:2px;background:#28282c}
.aw-srv{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:oklch(.34 .09 var(--h,270));color:oklch(.86 .1 var(--h,270));font-size:17px;font-weight:600}
.aw-srv.aw-add{background:#1e1e22;color:#a1a1aa;font-size:20px}
.aw-list,.aw-main{background:#101013;border-radius:24px;padding:12px;display:flex;flex-direction:column;min-width:0}
.aw-list{gap:3px}
.aw-search{display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:19px;background:#1e1e22;color:#71717a;font-size:13.5px}
.aw-search .ic{font-size:15px}
.aw-sec{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding:0 8px 4px;font-size:12px;font-weight:600;color:#a1a1aa}
.aw-sec .ic{font-size:14px}
.aw-row{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:18px}
.aw-row.on{background:#1e1e22}
.aw-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#1e1e22;color:#d4d4d8;flex:none}
.aw-row.on .aw-ic{background:#2a2a30}
.aw-ic .ic{font-size:17px}
.aw-t{display:grid;min-width:0}
.aw-t b{font-size:13.5px;font-weight:550;white-space:nowrap}
.aw-t small{font-size:11.5px;color:#8b8b96;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aw-av{--av:22px;display:grid;place-items:center;flex:none;width:var(--av);height:var(--av);border-radius:50%;background:oklch(.58 .14 var(--h,270));color:#fff;font-size:calc(var(--av)*.46);font-weight:600;line-height:1}
.aw-members{display:grid;gap:1px;margin:0 0 4px 34px}
.aw-members li{display:flex;align-items:center;gap:9px;padding:4px 8px;font-size:12.5px;color:#d4d4d8}
.aw-members em{margin-left:auto;font-style:normal;color:#a1a1aa;font-variant-numeric:tabular-nums}
.aw-dock{margin-top:auto;display:grid;gap:8px}
.aw-conn{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:16px;background:#18181c}
.aw-conn .ic{font-size:18px;color:var(--on-you)}
.aw-conn .aw-t b{color:var(--on-you);font-size:13px}
.aw-me{display:flex;align-items:center;gap:9px;padding:8px;border-radius:24px;background:#1e1e22}
.aw-me .aw-av{--av:34px}
.aw-btns{margin-left:auto;display:flex;gap:3px}
.aw-btns i{display:flex;align-items:center;gap:1px;height:30px;padding:0 7px;border-radius:15px;background:#ffffff0f;color:#e4e4e7}
.aw-btns i .ic{font-size:16px}
.aw-btns i .chev{font-size:10px;opacity:.7}
.aw-head{display:flex;align-items:center;gap:8px;height:42px}
.aw-spacer{flex:1}
.aw-pill{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 15px;border-radius:19px;background:#1e1e22;font-size:14px;font-weight:550}
.aw-pill .ic{font-size:16px;color:#d4d4d8}
.aw-pill.sm{padding:0 13px;color:#d4d4d8}

/* The screen: the app turned away into the dark, its far edge fading out, with grain and a glare on the glass. */
.scene{position:relative;padding-top:2%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 24%),linear-gradient(0deg,transparent 0%,#000 26%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0%,#000 24%),linear-gradient(0deg,transparent 0%,#000 26%);mask-composite:intersect}
.display:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background-image:var(--grain);background-size:180px 180px;opacity:.09;mix-blend-mode:overlay}
.display{position:relative;padding:14px 14px 20px;border-radius:30px;background:linear-gradient(180deg,#1f1f24,#0b0b0d 70%);box-shadow:inset 0 0 0 1px #ffffff12,inset 0 1px 0 #ffffff26;transform:perspective(2600px) rotateY(-17deg) rotateX(4deg) translateX(-3%);transform-origin:85% 40%}
.display-screen{position:relative;border-radius:16px;overflow:hidden;background:#000}
.display-screen .appwin{filter:saturate(.85) brightness(.88)}
.display-glare{position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,#ffffff17 0%,#ffffff07 26%,transparent 44%),radial-gradient(120% 90% at 100% 0%,#3a2bff26,transparent 60%)}

/* The text chat inside the window (drawn at the window's 1000px scale). */
.aw-chat{gap:0}
.aw-chat .aw-pill.sm{padding:0 12px}
.aw-msgs{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:16px;padding:10px 8px 14px;overflow:hidden}
.aw-day{align-self:center;padding:3px 10px;border-radius:10px;background:#1e1e22;font-size:11.5px;color:#a1a1aa}
.aw-msg{display:flex;gap:12px}
.aw-msg .aw-av{--av:38px}
.aw-msg b{font-size:14px;font-weight:600;margin-right:8px}
.aw-msg time{font-size:11.5px;color:#71717a}
.aw-msg p{margin-top:2px;font-size:14.5px;color:#e4e4e7}
.aw-msg u{text-decoration:none;color:#fff;background:#ffffff1f;border-radius:5px;padding:0 4px}
.aw-file{display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:9px 12px;border-radius:12px;background:#1e1e22;font-size:13px;color:#e4e4e7}
.aw-file .ic{font-size:14px;color:#a1a1aa}
.aw-file small{font-size:11.5px;color:#8b8b96}
.aw-reacts{display:flex;gap:6px;margin-top:8px}
.aw-reacts s{text-decoration:none;padding:2px 9px;border-radius:999px;background:#ffffff14;font-size:12.5px}
.aw-sys{display:flex;align-items:center;gap:8px;padding-left:50px;font-size:12.5px;color:var(--on-you)}
.aw-sys .ic{font-size:13px}
.aw-composer{display:flex;align-items:center;gap:12px;height:48px;padding:0 16px;border-radius:24px;background:#1e1e22;color:#71717a;font-size:14px}
.aw-composer span{flex:1}
.aw-composer .ic{font-size:17px}

/* The call, lifted off the screen onto its own card: the reference's floating panel. */
.lift{position:absolute;z-index:3;right:1%;top:12%;width:clamp(220px,34%,320px);opacity:0;transition:opacity .9s var(--ease-out-strong) .75s}
body.ready .lift{opacity:1}
.callcard{padding:12px;border-radius:24px;background:linear-gradient(180deg,#1a1a1e,#111114);box-shadow:inset 0 0 0 1px #ffffff17,inset 0 1px 0 #ffffff1a,0 34px 80px #000000c0,0 8px 22px #00000080;transform:perspective(1400px) rotateY(-9deg) rotateX(5deg);color:#fff;text-align:left}
.lc-top{display:flex;align-items:center;gap:7px;padding:3px 4px 11px;font-size:13px}
.lc-top .ic{font-size:15px;color:#d4d4d8}
.lc-top b{font-weight:600}
.lc-n{padding:1px 7px;border-radius:8px;background:#ffffff14;font-size:11px;color:#a1a1aa}
.lc-sig{margin-left:auto;display:inline-flex;align-items:center;gap:5px;color:var(--on-you);font:600 12px var(--font-mono);font-variant-numeric:tabular-nums}
.lc-sig .ic{font-size:13px;color:var(--on-you)}
.lc-tiles{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.lc-tile{position:relative;display:grid;place-items:center;aspect-ratio:1.2;border-radius:14px;background:oklch(.3 .075 var(--h,270))}
.lc-tile.speaking{box-shadow:inset 0 0 0 2.5px var(--on-you)}
.lc-tile i{display:grid;place-items:center;width:42%;aspect-ratio:1;border-radius:50%;background:oklch(.58 .15 var(--h,270));font:600 clamp(14px,2.2cqw,19px)/1 var(--font-sans);font-style:normal}
.lc-tile span{position:absolute;left:6px;bottom:6px;display:inline-flex;align-items:center;gap:4px;padding:2px 7px 2px 5px;border-radius:8px;background:#00000080;font-size:10.5px}
.lc-tile span .ic{font-size:10px}
.lc-tile span.muted .ic{color:var(--danger)}
.lc-ctrl{display:flex;justify-content:center;gap:8px;padding-top:12px}
.lc-ctrl i{display:grid;place-items:center;width:38px;height:38px;border-radius:19px;background:#26262b;color:#fff}
.lc-ctrl i .ic{font-size:17px}
.lc-ctrl i.muted{background:#fff;color:var(--danger)}
.lc-ctrl i.hang{width:52px;background:var(--danger)}

/* App-icon stickers: a squircle lit from above, a soft rim, a deep shadow. */
.appicon{display:grid;place-items:center;width:clamp(50px,8cqw,76px);aspect-ratio:1;border-radius:24%;color:#fff;background:linear-gradient(180deg,var(--c2),var(--c));box-shadow:inset 0 1px 0 #ffffff6b,inset 0 0 0 1px #ffffff1c,inset 0 -8px 14px #00000029,0 16px 34px #00000085}
.appicon svg{width:54%;height:54%}
.appicon .ic{stroke-width:1.9}
.ai-gomex{--c:#1400ff;--c2:#3325ff}
.ai-gomex svg{width:62%;height:62%}
.ai-pad{--c:oklch(.48 .2 292);--c2:oklch(.62 .19 292)}
.ai-head{--c:oklch(.64 .18 48);--c2:oklch(.76 .16 62)}
.ai-aim{--c:oklch(.54 .21 25);--c2:oklch(.66 .2 25)}
.ai-mic{--c:oklch(.64 .19 150);--c2:oklch(.76 .18 150)}
.ai-globe{--c:oklch(.58 .13 222);--c2:oklch(.7 .12 215)}
@media(max-width:720px){
  /* The phone shows the window's left side, the rail and the channel list, and lets the rest run off the right edge
     and fade there; the tilt turns on that left edge, so it stays put. */
  .display{transform:perspective(1800px) rotateY(-9deg) rotateX(3deg);transform-origin:0 40%}
  .scene{-webkit-mask-image:linear-gradient(90deg,#000 62%,transparent 96%),linear-gradient(0deg,transparent 0%,#000 26%);mask-image:linear-gradient(90deg,#000 62%,transparent 96%),linear-gradient(0deg,transparent 0%,#000 26%)}
  .lift{right:18%;top:16%;width:46%}
}

/* Things Gomex does, floating round the window. */
.sticker{position:absolute;z-index:2;rotate:calc(var(--r,0)*1deg);will-change:transform}
.s1{left:-8%;top:4%}
.s2{right:-7%;top:-2%}
.s3{left:-2%;top:50%}
.s4{right:-10%;top:66%}
.s5{left:-10%;top:80%}
.s6{right:6%;top:92%}
@media(max-width:1100px){.sticker{display:none}}

/* ───────── Stat strip ───────── */
.stats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,auto);justify-content:center;gap:clamp(24px,5vw,84px);max-width:min(var(--maxw),calc(100% - 2*var(--page-pad)));margin:-14px auto 0;padding:clamp(28px,4vh,44px) clamp(24px,4vw,56px);border-radius:var(--cell-r);background:#15161899;-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3)}
@media(max-width:880px){.stats{grid-template-columns:repeat(2,auto);gap:32px clamp(40px,12vw,96px)}}
/* English captions run longer: the two columns share the width evenly, never narrower than their number, so the short «1 link» doesn't squeeze its neighbour into a sliver. */
@media(max-width:880px){html[lang=en] .stats{grid-template-columns:repeat(2,minmax(min-content,1fr))}}
.stat{text-align:center}
.stat b{display:block;white-space:nowrap;font-size:clamp(26px,4.2vw,38px);line-height:1.04;letter-spacing:-.022em;font-variant-numeric:tabular-nums;color:#fff;font-weight:500}
.stat>span{display:block;max-width:20ch;margin:6px auto 0;font-size:15px;line-height:1.4;color:var(--ink-3);text-wrap:balance}

/* ───────── Feature statements ───────── */
#features{max-width:880px;margin:0 auto;padding:clamp(60px,10vh,120px) var(--page-pad) 0}
.feature{padding:clamp(48px,9vh,110px) 0;text-align:center;position:relative}
.feature h2{font-size:clamp(34px,5.5vw,60px);letter-spacing:-.024em;line-height:1.08;text-wrap:balance;color:var(--ink-1)}
.feature .lede{max-width:820px;margin:26px auto 0;font-size:clamp(20px,2.9vw,29px);font-weight:500;line-height:1.42;letter-spacing:-.008em;color:var(--ink-1);text-wrap:pretty}
.feature h2,.feature .lede,.feature .kicker{transition:color .9s var(--ease-soft)}
.sw .w{color:var(--ink-4);opacity:.5;transition:opacity .26s var(--ease-soft),color .26s var(--ease-soft)}
.sw .w.read{color:var(--ink-2);opacity:.9}
.sw .w.lit{color:var(--ink-1);opacity:1}
body[data-bg=light] .sw .w{color:#6e7276;opacity:.5}
body[data-bg=light] .sw .w.read{color:#3a3d42;opacity:1}
body[data-bg=light] .feature h2,body[data-bg=light] .feature .lede,body[data-bg=light] .sw .w.lit{color:#13161c}
body[data-bg=light] .feature .kicker{color:#494d54}

/* Ornaments: pills and chips beside each statement on wide screens, stacked and centred under it on narrower ones.
   No filter on them or their wrappers: Safari clips a filtered layer, children's shadows included, to a box. And no
   idle wobble: they tilt a little on wide screens only, and arrive once. */
.orn{display:none;position:absolute;z-index:1;pointer-events:none;rotate:calc(var(--r,0)*.35deg)}
.orn-l{right:calc(100% + 16px);top:14%}
.orn-r{left:calc(100% + 16px);top:58%}
.orn-low{top:62%}
@media(min-width:1360px){.orn{display:block}}
@media(max-width:1359px){
  .feature{display:flex;flex-direction:column;align-items:center}
  .feature>.kicker{order:0}
  .feature>h2{order:1}
  .feature>.lede{order:2}
  /* The pieces sit in the block's corners round the text, as on the wide page they sit at its sides: the first at the
     top left, the second at the bottom right, a third at the top right; a little smaller, tilted, running off the edge. */
  .feature{padding-block:clamp(150px,22vh,190px)}
  .orn{display:block;position:absolute;inset:auto;max-width:none;margin:0;rotate:calc(var(--r,0)*.8deg);scale:.78}
  .feature>.orn:nth-of-type(1){top:28px;left:-2%;transform-origin:0 0}
  .feature>.orn:nth-of-type(2){bottom:28px;right:-2%;transform-origin:100% 100%}
  .feature>.orn:nth-of-type(3){top:36px;right:-4%;transform-origin:100% 0}
}
.orn>*{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease-out-strong) .15s,transform .6s var(--ease-out-strong) .15s}
.reveal.in .orn>*{opacity:1;transform:none}
.orn:nth-of-type(2)>*{transition-delay:.27s}
.orn:nth-of-type(3)>*{transition-delay:.39s}
.ofloat{display:inline-flex}

.opill{display:inline-flex;align-items:center;gap:9px;font-size:13px;padding:10px 14px;border-radius:12px;background:#141516eb;border:1px solid oklch(1 0 0 / .1);box-shadow:0 14px 34px #00000073;white-space:nowrap;color:var(--ink-1);line-height:1.25;text-align:left}
.opill b{font-weight:550}
.opill .ic{font-size:15px}
.opill .ic.ok{color:var(--on-you)}
.opill .ot{font-size:12px;color:var(--ink-4)}
.opill .ot-mono{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--on-you);font-variant-numeric:tabular-nums}
.opill-t{display:grid}
.opill-t small{font-size:11.5px;color:var(--ink-4);font-weight:400}
.opill-switch{gap:20px;padding:13px 16px;border-radius:16px}
.opill-switch b{font-size:14px}
.opill-link .ot-mono{color:var(--ink-2)}
.ook{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:#ffffff1f;color:var(--ink-1);flex:none}
.ook .ic{font-size:12px}
.ook.live{background:oklch(.78 .19 150 / .18);color:var(--on-you);position:relative}
.ook.live:after{content:"";position:absolute;inset:-4px;border-radius:10px;border:1.5px solid var(--on-you);opacity:0;animation:pulse 2.2s ease-out infinite}
@keyframes pulse{0%{opacity:.7;transform:scale(.85)}100%{opacity:0;transform:scale(1.25)}}
.swc{position:relative;width:38px;height:22px;border-radius:11px;background:#3f3f46;flex:none;transition:background .2s var(--ease-soft)}
.swc:after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:translate .2s var(--ease-out-strong)}
.swc.on{background:#fff}
.swc.on:after{translate:16px 0;background:#111}
.oeq{display:inline-flex;align-items:center;justify-content:center;gap:4px;width:96px;height:96px;border-radius:50%;background:#141516eb;border:1px solid oklch(1 0 0 / .1);box-shadow:0 14px 34px #00000073}
.oeq i{display:block;width:5px;height:38px;border-radius:3px;background:var(--on-you);transform-origin:center;animation:eq 1.1s ease-in-out infinite}
.oeq i:nth-child(1){animation-delay:-.1s}.oeq i:nth-child(2){animation-delay:-.45s}.oeq i:nth-child(3){animation-delay:-.2s}.oeq i:nth-child(4){animation-delay:-.7s}.oeq i:nth-child(5){animation-delay:-.35s}.oeq i:nth-child(6){animation-delay:-.9s}.oeq i:nth-child(7){animation-delay:-.55s}
@keyframes eq{0%,100%{transform:scaleY(.2)}50%{transform:scaleY(1)}}
.okeys{display:inline-flex;gap:6px}
.okeys kbd{font-family:var(--font-sans);font-size:15px;font-weight:550;display:grid;place-items:center;min-width:42px;height:42px;padding:0 10px;border-radius:11px;background:linear-gradient(180deg,var(--elevated),var(--surface-2));border:1px solid oklch(1 0 0 / .12);box-shadow:0 3px #0006,0 14px 30px #00000059;color:var(--ink-1)}
.ocircles{display:inline-flex;align-items:center;padding:10px 16px 10px 22px;border-radius:999px;background:#141516eb;border:1px solid oklch(1 0 0 / .1);box-shadow:0 14px 34px #00000073}
.ocircles i{--ring:#fff;display:grid;place-items:center;width:52px;height:52px;margin-left:-8px;border-radius:50%;background:oklch(.58 .14 var(--h,270));border:3px solid #141516;box-shadow:0 0 0 3px var(--ring);color:#fff;font:600 19px/1 var(--font-sans);font-style:normal}
.ocircles i.you{--ring:var(--on-you)}
.ocircles i.room{--ring:var(--on-room)}
.emo{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:#ffffff14;font-size:13px;font-variant-numeric:tabular-nums}
.emo.plus{padding:4px 8px;color:var(--ink-3)}

/* ───────── Bento ───────── */
.bento-wrap{max-width:var(--maxw);margin:0 auto;padding:clamp(44px,6vh,88px) var(--page-pad);text-align:center}
.bento-title{font-size:clamp(34px,5.5vw,60px);letter-spacing:-.024em;margin-bottom:clamp(26px,4vh,44px);color:var(--ink-1)}
.bento{display:grid;grid-template-columns:2.06fr 1fr 1fr;gap:14px;text-align:left;max-width:1000px;margin:0 auto}
.cell{border-radius:var(--cell-r);background:var(--surface);box-shadow:0 1px #ffffff0a inset;padding:16px 0 16px 16px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;min-height:230px;overflow:hidden;position:relative}
.cell h3,.cell p{padding-right:16px}
.cell h3{font-size:16.5px;letter-spacing:-.015em;margin-top:auto;padding-top:14px}
.cell p{font-size:13.5px;color:var(--ink-3)}
.cell-big{grid-row:span 2}
.cell-violet{background:radial-gradient(85% 60% at 12% 0%,oklch(.34 .09 290 / .65),transparent 62%),var(--surface)}
.cell-blue{background:radial-gradient(120% 90% at 55% 0%,oklch(.31 .1 268 / .7),transparent 68%),var(--surface)}
.bmedia{flex:1;display:flex;align-items:flex-start;min-height:0;overflow:hidden}
.cell:not(.cell-big) .bmedia{padding-right:16px}
@media(max-width:900px){.bento{grid-template-columns:repeat(2,1fr)}.cell-big{grid-column:span 2}}
@media(max-width:560px){.bento{grid-template-columns:1fr}.cell,.cell-big{grid-column:span 1;grid-row:auto}}
@media(max-width:900px){.bmedia>*{width:100%!important}.cell-big .mini{border-right:1px solid #ffffff1a;border-radius:16px 0 0 0}}

/* The big cell: the window again, cut at the cell's right edge. */
.mini{width:540px;height:100%;min-height:310px;display:grid;grid-template-columns:34px 132px 1fr;gap:6px;padding:6px 0 0 6px;background:#000;border:1px solid #ffffff1a;border-right:0;border-bottom:0;border-radius:16px 0 0 0;font-size:10.5px;color:#d4d4d8;box-shadow:0 22px 48px #00000080}
.mini .ic{font-size:11px}
.mn-rail{display:flex;flex-direction:column;align-items:center;gap:7px;padding-top:6px}
.mn-home svg{display:block;width:26px;height:26px;color:#fff}
.mn-rail i{display:block;width:26px;height:26px;border-radius:50%;background:oklch(.34 .09 var(--h));}
.mn-list,.mn-chat{background:#101013;border-radius:14px 14px 0 0;padding:8px;display:flex;flex-direction:column;gap:2px;min-width:0}
.mn-search{display:block;padding:6px 9px;border-radius:9px;background:#1e1e22;color:#71717a;margin-bottom:5px}
.mn-sec{margin-top:7px;padding:0 4px;font-size:9.5px;font-weight:600;color:#8b8b96}
.mn-row{display:flex;align-items:center;gap:6px;padding:5px 6px;border-radius:9px}
.mn-row em{margin-left:auto;font-style:normal;color:#8b8b96}
.mn-row.on,.mn-row.sel{background:#1e1e22}
.mn-head{display:flex;align-items:center;gap:6px;padding:2px 2px 8px;margin-bottom:6px;border-bottom:1px solid #ffffff12;font-weight:600;color:#fff;font-size:11.5px}
.mn-msgs{flex:1;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.mn-msgs p{display:flex;gap:8px;margin-bottom:11px;line-height:1.35}
.mn-msgs .aw-av{--av:24px}
.mn-msgs b{color:#fff;font-weight:600;margin-right:6px}
.mn-msgs i{font-style:normal;font-size:9px;color:#71717a}
.mn-msgs u{text-decoration:none;color:var(--ink-1);background:#ffffff1c;border-radius:4px;padding:0 3px}
.mn-msgs s{display:inline-block;text-decoration:none;margin-top:4px;padding:1px 7px;border-radius:999px;background:#ffffff14}
.mn-msgs .file{display:inline-flex;align-items:center;gap:6px;margin-top:4px;padding:6px 9px;border-radius:9px;background:#1e1e22;color:#d4d4d8}
.mn-msgs .file small{color:#8b8b96;font-size:9.5px}
.mn-msgs .sys{display:block;margin:0 0 8px;color:#71717a;font-size:10px;text-align:center}
.mn-comp{display:flex;align-items:center;gap:8px;cursor:pointer;margin:6px 0 8px;padding:8px 10px;border-radius:12px;background:#1e1e22;color:#71717a}


.wh-head{display:flex;align-items:baseline;justify-content:space-between;font-size:11px;color:#b3b8c1}
.wh-total{color:#c7cbd2}

.vo{width:100%;display:grid;gap:10px}
.vo-seg{display:flex;gap:2px;padding:3px;border-radius:11px;background:#1e1e22;font-size:11px;color:#a1a1aa;margin-top:2px}
.vo-seg span{flex:1;padding:6px 0;border-radius:8px;text-align:center;white-space:nowrap}
.vo-seg .on{background:#3f3f46;color:#fff}
/* Two states. Noisy, as the card scrolls in: «Выкл» picked, the tile red, the waves tall and churning. Then the switch
   flips to «Шумоподавление» by itself, the tile turns green and the waves settle (site.js drops .noisy). Nothing
   running is restarted: the picked pill slides under the labels, and the waves' height and churn ease down through
   registered properties, so it all glides instead of jumping. */
@property --storm{syntax:'<number>';inherits:true;initial-value:0}
.vo-seg{position:relative;isolation:isolate}
.vo-seg span{position:relative;z-index:1;transition:color .4s}
.vo-seg .on{background:none}
.vo-seg:before{content:"";position:absolute;z-index:0;top:3px;bottom:3px;left:3px;width:calc(50% - 4px);border-radius:8px;background:#3f3f46;translate:calc(100% + 2px) 0;transition:translate .45s var(--ease-out-strong)}
.vo.noisy .vo-seg:before{translate:0 0}
.vo .seg-on,.vo.noisy .seg-off{color:#fff}
.vo.noisy .seg-on{color:#a1a1aa}
.vo .mic-tile{transition:background-color .8s var(--ease-soft),--storm 1.2s var(--ease-soft);--storm:0}
.vo.noisy .mic-tile{background:oklch(.63 .21 25);--storm:1}
.mt-waves{transform-origin:50% 100%;scale:1 calc(1 + var(--storm) * 1.4);animation:mt-churn .45s ease-in-out infinite alternate}
@keyframes mt-churn{to{translate:0 calc(var(--storm) * -6px)}}

/* The ring: a thin track with a lit arc and the ping inside it, after the score-ring reference. */
.pring{position:relative;display:grid;place-content:center;justify-items:center;width:150px;aspect-ratio:1;border-radius:50%;text-align:center}
.pring svg{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);rotate:-90deg;overflow:visible}
.pr-track{fill:none;stroke:#ffffff2e;stroke-width:1.6}
.pr-arc{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.4s var(--ease-out-strong) .35s}
.reveal.in .pr-arc{stroke-dashoffset:22}
.pring b{font-size:40px;font-weight:300;letter-spacing:-.03em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.pring b small{margin-left:3px;font-size:14px;font-weight:400;letter-spacing:0;color:var(--ink-3)}
.pring em{margin-top:6px;font-style:normal;font-size:11px;color:var(--ink-4)}
.pring-dark{background:#141516eb;border:1px solid oklch(1 0 0 / .1);box-shadow:0 14px 34px #00000073}
.pring-cell{width:126px}
.pring-cell b{font-size:32px}
.cc2{position:relative;width:100%;height:186px;overflow:hidden}
/* The ring as the card's backdrop: big, only its top half in view with the ping in it, the rest fading into the
   dark, and the chips lying on top of that. */
.cc2 .pring-cell{position:absolute;left:50%;top:-16px;translate:-50% 0;width:380px;place-content:start center;padding-top:72px;-webkit-mask:linear-gradient(#000 30%,transparent 50%);mask:linear-gradient(#000 30%,transparent 50%)}
.cc2 .pring-cell b{font-size:46px}
/* In ticks, like the dial at the foot: thin rounded ones all round, dim, and white for the part that's lit, which
   comes up when the card does. */
.cc2 .pr-ticks line{stroke:#ffffff33;stroke-width:1.2;stroke-linecap:round}
.cc2 .pr-ticks line.on{stroke:#fff;transition:stroke .9s var(--ease-out-strong) .35s}
.reveal:not(.in) .cc2 .pr-ticks line.on{stroke:#ffffff33}
.cc2-pills{position:absolute;z-index:1;left:0;right:0;bottom:16px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
/* White pills with a tick, laid over the ring. */
.wpills{display:grid;gap:8px;justify-items:center}
.wpill{display:inline-flex;align-items:center;gap:12px;padding:11px 16px 11px 20px;border-radius:999px;background:#fff;color:#16171a;font-size:14px;font-weight:500;white-space:nowrap;box-shadow:0 0 0 1px #0000000d,0 14px 34px #00000040}
.wpill .ic{font-size:14px;stroke-width:2.4}
.wpill-sm{gap:8px;padding:7px 11px 7px 13px;font-size:11.5px}
.wpill-sm .ic{font-size:11px}
.wpill-dim{background:#26272b;color:#c7cbd2;box-shadow:inset 0 0 0 1px #ffffff1f}

/* Friends in a row with a dashed "+" to call one more, after the messenger reference. */
.arow{display:inline-flex;align-items:flex-start;gap:12px}
.ar-item{display:grid;justify-items:center;gap:6px}
.ar-item i{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:oklch(.58 .14 var(--h,270));color:#fff;font:600 17px/1 var(--font-sans);font-style:normal;box-shadow:0 0 0 2px #ffffff26}
.ar-item small{font-size:11.5px;color:var(--ink-3)}
.ar-item i.ar-add{background:none;box-shadow:none;border:1.5px dashed #ffffff80}
.ar-add .ic{font-size:18px}
.arow-card{padding:14px 18px 12px;border-radius:22px;background:#141516eb;border:1px solid oklch(1 0 0 / .1);box-shadow:0 14px 34px #00000073}
.arow-flat{gap:min(10px,3cqw)}
.arow-flat .ar-item i{width:min(38px,20cqw);height:min(38px,20cqw);font-size:14px}

/* The green mic tile with a wave running under it, after the navigation reference. */
.mic-tile{position:relative;display:grid;place-items:center;height:168px;border-radius:22px;background:oklch(.74 .19 148);color:#fff;overflow:hidden}
.mic-tile>.ic{position:relative;z-index:1;margin-top:-12px;font-size:42px}
/* Reaching 12px under the tile's edge, so the churn lifting them never shows a gap below. */
.mt-waves{position:absolute;inset:auto 0 -12px;height:64px}
.mt-waves svg{position:absolute;left:0;bottom:0;width:200%;height:100%;fill:#fff;opacity:.28;animation:mt-flow 6s linear infinite}
.mt-waves svg:nth-child(2){opacity:.18;animation-duration:9s;animation-direction:reverse}
@keyframes mt-flow{to{translate:-50% 0}}

/* Who's where as big round tiles: green is the room you're in, pink is where friends are, grey is the rest. */
.st-wrap{width:100%;container-type:inline-size}
.st-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.st{display:grid;place-content:center;justify-items:center;gap:1px;aspect-ratio:1;border-radius:50%;text-align:center;line-height:1.15}
.st .ic{margin-bottom:3px;font-size:clamp(13px,8cqw,17px)}
.st b{font-size:clamp(11px,6.4cqw,13.5px);font-weight:600}
.st small{font-size:clamp(9.5px,5cqw,11px);opacity:.75}
.st-you{background:oklch(.8 .19 150);color:#06210f}
.st-room{background:oklch(.78 .15 350);color:#2b0718}
.st-more{background:#2a2a30;color:#fff}
.st-more b{font-size:clamp(14px,8cqw,18px)}
.st-list{margin:12px 0 0;display:grid;gap:2px}
.st-list li{display:flex;align-items:center;gap:9px;padding:5px 2px;font-size:12px;color:#c7cbd2;font-variant-numeric:tabular-nums}
.st-list i{width:8px;height:8px;border-radius:50%}
.st-list i.you{background:oklch(.8 .19 150)}
.st-list i.room{background:oklch(.78 .15 350)}
.st-list span{margin-left:auto;color:#f7f8f8}
.st-list time{width:38px;text-align:right;font-size:11px;color:#9a9fa6}

/* Invite. */
.iv{width:100%;display:grid;gap:10px;container-type:inline-size}
.iv-link{display:flex;align-items:center;gap:8px;padding:9px 10px 9px 12px;border-radius:12px;background:#1e1e22;font-family:var(--font-mono);font-size:12px;color:#d4d4d8}
.iv-link>.ic{font-size:14px;color:#a1a1aa}
.iv-link span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iv-link i{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:#ffffff1f}
.iv-link i .ic{font-size:13px}
.iv-bar{display:flex;gap:3px;height:6px;margin-top:2px}
.iv-bar i{flex:1;border-radius:999px;background:#fff}
.iv-bar i.free{background:#3f3f46}

/* ───────── Everything else ───────── */
.grid-feat{padding:clamp(56px,10vh,120px) var(--page-pad);border-top:1px solid var(--hair)}
.gf-head{max-width:calc(var(--maxw) - 2*var(--page-pad));margin-inline:auto}
.grid-feat h2{margin:10px 0 0;font-size:clamp(30px,4.4vw,46px);letter-spacing:-.024em;line-height:1.08;text-wrap:balance;color:var(--ink-1)}
.gfeat{max-width:calc(var(--maxw) - 2*var(--page-pad));margin:clamp(36px,5vh,60px) auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(30px,4vw,54px) clamp(28px,4vw,64px);text-align:left}
@media(max-width:900px){.gfeat{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.gfeat{grid-template-columns:minmax(0,1fr)}}
.gi{width:26px;height:26px;color:var(--ink-2);margin-bottom:16px;transition:color .2s var(--ease-soft)}
.gfeat li:hover .gi{color:var(--ink-1)}
.gfeat p{font-size:15px;line-height:1.55;color:var(--ink-4);max-width:34ch}
.gfeat b{font-weight:600;color:var(--ink-1)}

/* ───────── Privacy ───────── */
.privacy{text-align:center;padding:clamp(56px,9vh,100px) var(--page-pad)}
.privacy h2{font-size:clamp(28px,3.6vw,40px);letter-spacing:-.022em;line-height:1.14;text-wrap:balance;color:var(--ink-1)}
.h2-lock{width:1.05em;height:1.05em;vertical-align:-.17em;margin:0 .22em;stroke-width:1.7;color:var(--ink-1);animation:lock-nod 5s ease-in-out infinite}
@keyframes lock-nod{0%,86%,100%{rotate:0deg}90%{rotate:-8deg}94%{rotate:6deg}}
.privacy .lede{max-width:540px;margin:18px auto;font-size:16.5px;color:var(--ink-3)}

/* ───────── Install: two steps, one under the other ───────── */
.install{max-width:900px;margin:0 auto;padding:clamp(60px,10vh,120px) var(--page-pad);text-align:center}
.install>h2{font-size:clamp(32px,5vw,52px);letter-spacing:-.024em;line-height:1.1;text-wrap:balance;color:var(--ink-1)}
.install>.lede{margin:18px auto clamp(32px,5vh,48px);font-size:16.5px;color:var(--ink-3)}
.steps{display:grid;gap:14px;text-align:left}
/* Each step is a card in the reference's install anatomy: a line drawing, the number in the corner, the words,
   then the one thing to do. The drawings are isometric at 2:1 with a 0.9 stroke and a plate fill in the card's
   own colour, so shapes occlude instead of stacking into a silhouette. */
.step{--plate:var(--surface);position:relative;display:grid;grid-template-columns:132px minmax(0,1fr);gap:20px 30px;align-items:start;padding:26px 28px 28px;border-radius:var(--cell-r);background:var(--surface);box-shadow:0 1px #ffffff0a inset}
.step-art{display:block;width:132px;height:80px;color:var(--ink-3);overflow:visible}
.art-led{fill:var(--on-you);stroke:none;animation:art-led 2.4s ease-in-out infinite}
.art-float{animation:art-float 3.4s ease-in-out infinite alternate}
@keyframes art-float{from{translate:0 -1.5px}to{translate:0 1.5px}}
@keyframes art-led{0%,100%{opacity:1}50%{opacity:.35}}
.step-num{position:absolute;top:18px;right:18px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 1px #ffffff1f;font-size:11.5px;font-weight:500;color:var(--ink-3)}
.step-body{display:grid;gap:8px;justify-items:start;min-width:0;padding-right:28px}
.step h3{font-size:19px;letter-spacing:-.015em;line-height:1.3}
.step-body>p{max-width:52ch;font-size:15px;line-height:1.5;color:var(--ink-3);text-wrap:pretty}
.step-body>.step-fine{font-size:13px;color:var(--ink-4)}
.step-cmd{display:grid;gap:12px;justify-items:start;width:100%;margin-top:12px}
.step-cmd .cmd{max-width:100%;border-radius:26px}
/* The command is never cut here: it wraps inside the card instead. */
.step-cmd .cmd code{white-space:normal;overflow:visible;word-break:break-all;line-height:1.5}
.step-cmd .cta-note{padding-left:4px}
.step-dl{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;margin-top:14px}
.step-alt{padding:6px 0;font-size:13.5px;color:var(--ink-3);transition:color .2s var(--ease-soft)}
.step-alt:hover{color:var(--ink-1)}
@media(max-width:700px){
  .step{grid-template-columns:1fr}
  .step-body{padding-right:0}
}

/* ───────── Sub pages: server install and download, after the reference's download page ───────── */
body.sub .footer{margin-top:0}
.sub-hero{position:relative;max-width:900px;margin:0 auto;padding:clamp(120px,18vh,180px) var(--page-pad) clamp(40px,6vh,70px);display:grid;justify-items:center;gap:16px;text-align:center}
.sub-hero h1{font-size:clamp(34px,5vw,54px);letter-spacing:-.028em;line-height:1.08}
.sub-hero .hero-sub{margin-top:0}
.sub-hero .hero-cta{margin-top:12px;width:100%}
.dl-icon{position:relative;display:grid;place-items:center;width:150px;height:150px;margin-bottom:4px}
.dl-icon .appicon{width:90px}
.dl-ticks{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from -1deg,#ffffff4d 0 1.6deg,transparent 1.6deg 15deg);-webkit-mask:radial-gradient(closest-side,transparent 80%,#000 81%,#000 93%,transparent 94%);mask:radial-gradient(closest-side,transparent 80%,#000 81%,#000 93%,transparent 94%);animation:ticks-turn 90s linear infinite}
@keyframes ticks-turn{to{rotate:360deg}}
/* The download that /app-install?get starts: the clock's ticks light up one by one around the icon, white over the
   dim ones and turning with them (the browser doesn't tell a page how far a download is, so they go round in a few
   seconds and stay lit). The edge is soft, so each tick fades in rather than switching on. */
@property --dl-p{syntax:'<percentage>';inherits:false;initial-value:0%}
.dl-ticks::after{content:"";position:absolute;inset:0;border-radius:50%;opacity:0;background:repeating-conic-gradient(from -1deg,#fff 0 1.6deg,transparent 1.6deg 15deg);-webkit-mask:conic-gradient(#000 calc(var(--dl-p) - 5%),transparent var(--dl-p));mask:conic-gradient(#000 calc(var(--dl-p) - 5%),transparent var(--dl-p))}
.dl-icon.downloading .dl-ticks::after{opacity:1;animation:dl-fill 6s cubic-bezier(.3,.6,.3,1) forwards}
@keyframes dl-fill{to{--dl-p:105%}}
@media (prefers-reduced-motion:reduce){.dl-icon.downloading .dl-ticks::after{animation:none;--dl-p:105%}}
.status{display:inline-flex;align-items:center;gap:10px;font-size:16px;color:var(--ink-2)}
.status i{width:7px;height:7px;border-radius:50%;background:var(--on-you);animation:status-ping 2s ease-out infinite}
@keyframes status-ping{0%{box-shadow:0 0 0 0 oklch(.78 .19 150 / .6)}100%{box-shadow:0 0 0 10px oklch(.78 .19 150 / 0)}}
.dl-meta{font-size:13px;color:var(--ink-4)}
.dl-meta a{color:var(--ink-3);transition:color .2s var(--ease-soft)}
.dl-meta a:hover{color:var(--ink-1)}
.dl-meta .sep{margin:0 .55em;opacity:.7}
.cmd-block{display:grid;justify-items:center;gap:12px;width:100%}
/* On these pages the command wraps instead of being cut: what gets pasted on a server should be readable whole. */
.cmd-block .cmd{border-radius:26px}
.cmd-block .cmd code{white-space:normal;overflow:visible;word-break:break-all;line-height:1.5}
.sub-steps{max-width:1060px;margin:0 auto;padding:clamp(50px,8vh,100px) var(--page-pad);text-align:center}
.sub-steps h2{font-size:clamp(30px,4.6vw,48px);letter-spacing:-.024em;line-height:1.1;margin-bottom:clamp(30px,5vh,48px)}
.cards{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;text-align:left}
.cards-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{--plate:var(--surface);position:relative;padding:22px 22px 26px;border-radius:22px;background:var(--surface);box-shadow:inset 0 1px #ffffff0a,inset 0 0 0 1px #ffffff0d}
.card .step-art{margin:4px 0 22px}
.card h3{font-size:17.5px;letter-spacing:-.015em}
.card p{margin-top:8px;font-size:14.5px;line-height:1.55;color:var(--ink-3);text-wrap:pretty}
.card em{font-style:normal;font-family:var(--font-mono);font-size:.9em;color:var(--ink-1)}
@media(max-width:900px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.cards,.cards-4{grid-template-columns:1fr}}
.sub-update{max-width:900px;margin:0 auto;padding:clamp(40px,7vh,90px) var(--page-pad);display:grid;justify-items:center;text-align:center}
.sub-update h2{font-size:clamp(28px,4vw,40px);letter-spacing:-.022em}
.sub-update .lede{max-width:520px;margin:14px auto 26px;font-size:16.5px;color:var(--ink-3)}
.sub-alt{max-width:1060px;margin:0 auto;padding:0 var(--page-pad) clamp(70px,12vh,140px);display:grid;grid-template-columns:1fr 1fr;gap:14px}
.alt-card{display:flex;align-items:flex-start;gap:16px;padding:22px;border-radius:22px;background:var(--surface);box-shadow:inset 0 0 0 1px #ffffff0d}
.alt-card>.ic{margin-top:2px;font-size:22px;color:var(--ink-2)}
.alt-card h3{font-size:17px}
.alt-card p{margin-top:6px;font-size:14.5px;color:var(--ink-3)}
@media(max-width:700px){.sub-alt{grid-template-columns:1fr}}
.faq em{font-family:var(--font-mono);font-size:.92em}
.art-cursor{animation:art-blink 1.1s steps(1) infinite}
@keyframes art-blink{50%{opacity:0}}

/* ───────── FAQ ───────── */
.faq{max-width:900px;margin:0 auto;padding:clamp(40px,8vh,100px) var(--page-pad)}
.faq h2{text-align:left;font-size:clamp(30px,4.5vw,44px);margin-bottom:36px;color:var(--ink-1)}
.faq details{border-bottom:1px solid var(--hair);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;padding:16px 30px 16px 2px;font-weight:550;font-size:16.5px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:6px;top:50%;translate:0 -50%;font-size:22px;font-weight:300;color:var(--ink-4);transition:rotate .25s var(--ease-out-strong)}
.faq details[open] summary:after{rotate:45deg}
.faq details p{color:var(--ink-4);font-size:15px;padding:0 2px 18px;max-width:60ch;text-wrap:pretty}
.faq em{font-style:normal;color:var(--ink-2)}

/* ───────── Final CTA, dial, footer ───────── */
.cta-final{text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;padding:clamp(90px,14vh,160px) var(--page-pad) clamp(36px,5vh,64px)}
.cta-final h2{font-size:clamp(36px,6vw,64px);letter-spacing:-.028em;color:var(--ink-1)}
.fglow{position:relative;isolation:isolate;height:clamp(200px,30vh,300px);overflow:hidden}
.fglow-orb{position:absolute;left:50%;bottom:-55%;width:min(60vw,720px);height:75%;margin-left:calc(min(60vw,720px)/-2);border-radius:50%;background:radial-gradient(closest-side at 38% 45%,oklch(.62 0 0 / .16),oklch(.6 0 0 / .05) 55%,transparent 100%),radial-gradient(closest-side at 66% 60%,oklch(.7 0 0 / .06),transparent 100%);filter:blur(56px);animation:orb-drift 22s var(--ease-soft) infinite alternate;animation-play-state:paused}
.fglow-orb2{position:absolute;left:50%;bottom:-65%;width:min(72vw,860px);height:85%;margin-left:calc(min(72vw,860px)/-2);border-radius:50%;background:radial-gradient(closest-side at 30% 55%,oklch(.55 0 0 / .1),transparent 100%),radial-gradient(closest-side at 72% 40%,oklch(.65 0 0 / .05),transparent 100%);filter:blur(64px);animation:orb-drift2 31s var(--ease-soft) infinite alternate;animation-play-state:paused}
.fglow-horizon{position:absolute;inset:auto 0 0;height:100%;background:radial-gradient(62% 155% at 50% 116%,oklch(.55 0 0 / .14),oklch(.45 0 0 / .04) 52%,transparent 100%);animation:horizon-breathe 8s var(--ease-soft) infinite alternate;animation-play-state:paused}
.fglow.live .fglow-orb,.fglow.live .fglow-orb2,.fglow.live .fglow-horizon{animation-play-state:running}
/* Grey noise over the glow, like film grain on a light; only the glow fades out round it, the dial stays sharp. */
.fglow:after{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--grain);background-size:180px 180px;opacity:.12;mix-blend-mode:screen;-webkit-mask:radial-gradient(ellipse 50% 86% at 50% 100%,#000 20%,rgb(0 0 0 / .5) 55%,transparent 96%);mask:radial-gradient(ellipse 50% 86% at 50% 100%,#000 20%,rgb(0 0 0 / .5) 55%,transparent 96%)}
.fglow-orb,.fglow-orb2,.fglow-horizon{z-index:0}
.fdial{z-index:1}
@keyframes orb-drift{from{transform:translate(-6%,0) scale(1)}to{transform:translate(7%,-5%) scale(1.12)}}
@keyframes orb-drift2{from{transform:translate(8%,0) scale(1.05)}to{transform:translate(-9%,-4%) scale(.94)}}
@keyframes horizon-breathe{from{opacity:.75}to{opacity:1}}
.fdial{--R:min(52vw,620px);position:absolute;left:50%;top:calc(var(--R) + 44px);width:0;height:0}
.fdial-face{--R2:calc(var(--R) - 96px);position:absolute;left:calc(var(--R2)*-1);top:calc(var(--R2)*-1);width:calc(var(--R2)*2);height:calc(var(--R2)*2);border-radius:50%;background:radial-gradient(closest-side,oklch(1 0 0 / .035),oklch(1 0 0 / .012) 70%,transparent 100%)}
.fdial-ticks i{position:absolute;left:-1px;top:0;width:2px;height:17px;border-radius:2px;background:var(--ink-1);opacity:var(--o,.2);transform:rotate(var(--a)) translateY(calc(var(--R)*-1));transform-origin:0 0;will-change:opacity}
.fdial-ticks i.q{height:24px}
.fdial-ticks i.red{background:oklch(.66 .21 25)}
/* The needle: from the dial's centre (under the horizon) up to the ticks, fading in towards its tip. */
.fdial-needle{position:absolute;left:-2.5px;bottom:0;width:5px;height:calc(var(--R) - 78px);border-radius:3px;background:linear-gradient(to top,transparent 35%,oklch(1 0 0 / .85));transform-origin:50% 100%;rotate:-75deg;transition:rotate .35s cubic-bezier(.3,1.4,.5,1);pointer-events:none}
/* Pinned at the end: the limiter cuts in and the needle bounces back and forth, the red zone flashing with it. */
.fdial.redline .fdial-needle{background:linear-gradient(to top,transparent 35%,oklch(.72 .2 25));animation:limiter .24s steps(1) infinite}
.fdial.redline .fdial-ticks i.red{animation:redflash .24s steps(1) infinite}
@keyframes limiter{0%{transform:rotate(0)}25%{transform:rotate(-6deg)}50%{transform:rotate(-1deg)}75%{transform:rotate(-4deg)}}
@keyframes redflash{50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.fdial-needle{transition:none}.fdial.redline .fdial-needle,.fdial.redline .fdial-ticks i.red{animation:none}}
.fdial-label{position:absolute;left:0;top:calc(var(--R)*-1 + 56px);translate:-50% 0;font-size:15px;font-weight:500;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.footer{position:relative;z-index:1;border-top:1px solid var(--hair);margin-top:-64px;background:#0f1011;padding:clamp(60px,10vh,110px) var(--page-pad) 0;overflow:hidden}
.foot-grid{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;gap:clamp(40px,10vw,160px);padding:clamp(16px,4vh,40px) 0 clamp(48px,8vh,96px)}
.foot-lockup{display:block;margin-bottom:24px}
.foot-lockup .logo{height:30px}
.foot-brand p{color:var(--ink-4);font-size:14px}
.foot-col{display:grid;gap:14px;align-content:start;font-size:13.5px;letter-spacing:.005em}
.foot-col b{color:var(--ink-2);font-weight:500;margin-bottom:4px}
.foot-col a{color:#ffffff70;transition:color .2s var(--ease-soft)}
.foot-col a:hover{color:var(--ink-1)}
.foot-made-col{margin-left:auto;display:grid;gap:10px;align-content:start}
.foot-made{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-4)}
.foot-x{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:12px;color:var(--ink-3);transition:color .2s var(--ease-soft)}
.foot-x:hover{color:var(--ink-1)}
@media(max-width:700px){
  .foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px 20px}
  .foot-brand{grid-column:1/-1}
  .foot-col{gap:0}
  .foot-col a{padding:11px 0}
  .foot-col b{margin-bottom:6px}
  .foot-made-col{grid-column:1/-1;margin-left:0;padding-top:4px;border-top:1px solid var(--hair)}
  .foot-made{padding-top:20px}
}

/* ───────── Reveal ───────── */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease-out-strong),transform .8s var(--ease-out-strong)}
.reveal.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .rise,.reveal{opacity:1;transform:none;filter:none}
  .orn>*{opacity:1;transform:none}
}

/* The cards play along (site.js): what can be pressed shows it. */
.vo-seg span,.st-room,.st-more,.iv-link,.cc2-pills .wpill,.aw-row{cursor:pointer;-webkit-tap-highlight-color:transparent}
/* Hover lights a circle up instead of growing it: the card clips anything that grows past its edge. */
.st{transition:scale .25s var(--ease-out-strong),background-color .35s,color .35s,filter .2s}
.st-room:hover,.st-more:hover{filter:brightness(1.12)}
.st-room:active,.st-more:active{scale:.94}
.iv-link{transition:background-color .2s}
.iv-link:hover{background:#26262b}
.iv-link:active{scale:.98}
.iv-link.copied i{background:oklch(.74 .19 148);color:#06210f}
.cc2-pills .wpill{transition:background-color .3s,color .3s,box-shadow .3s,scale .2s var(--ease-out-strong)}
.cc2-pills .wpill:active{scale:.94}
.cell-blue{isolation:isolate}
.cell-blue:before{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 90% at 55% 0%,oklch(.3 .13 25 / .85),transparent 68%),var(--surface);opacity:0;transition:opacity .6s var(--ease-soft)}
.cell-blue.direct:before{opacity:1}
.cell-blue.direct .pr-ticks line.on{stroke:oklch(.68 .2 25)}
.aw-row{transition:background-color .2s}
.aw-row:not(.on):hover{background:#18181b}
.vo-seg span:not(:hover){transition:color .4s}
.mn-row,.mn-rail i,.mn-home{cursor:pointer;-webkit-tap-highlight-color:transparent}
.mn-row{transition:background-color .2s}
.mn-row:not(.on):not(.sel):hover{background:#18181b}
.mn-rail i{transition:border-radius .25s var(--ease-out-strong),scale .2s}
.mn-rail i:hover,.mn-rail i.picked{border-radius:9px}
.mn-rail i:active,.mn-home:active{scale:.92}
.mn-comp span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mn-comp:active{scale:.98}
.mn-msgs p.new{animation:msg-in .35s var(--ease-out-strong)}
@keyframes msg-in{from{opacity:0;translate:0 8px}}