/* Gomex landing. Structure and motion follow dial.software's page: a floating nav pill, a hero over a built
   window, a stat strip, scroll-lit statements, a bento, a plain list, two plan cards, FAQ and a dial at the foot.
   Everything shown is markup: nothing here is a screenshot.
   The look is the app's flow look (gomex-seed/DESIGN.md, tokens in packages/ui-common): true black on a phone,
   near-black on a monitor, type first in light weights, one filled shape (the white pill), hairlines instead of
   raised plates, no glass and no glow. */

@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;
  /* The app's tokens (DESIGN.md): the page and its text switch at 821px, as in the app's flows. */
  --void:#000;
  --surface:transparent;
  --surface-2:#0b0b0d;
  --elevated:#18181b;
  --ink-1:#fff;
  --ink-2:#c4c4ca;
  --ink-3:#a1a1aa;
  --ink-4:#71717a;
  --hair:rgba(255,255,255,.12);
  --wash:transparent;
  --outline:rgba(255,255,255,.3);
  --button:#f2f2f4;
  --button-ink:#0c0c0e;
  --brand:#1400ff;
  --accent-text:var(--ink-1);
  --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:24px;
  --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>");
}
/* Black everywhere (Metro); the app's black window stands on it as its panels, the way the link preview shows it. */
@media(min-width:821px){:root{--ink-1:#ededef}}
*{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)}
/* The scroll's three "acts" all stay dark: the flow look has no light page. */
body[data-bg=black],body[data-bg=light],body[data-bg=dark]{background:var(--void)}
/* Type first, in light weights: big headings speak by size, not by boldness. */
h1,h2,h3{margin:0;font-weight:400;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-block;font-size:15px;line-height:20px;font-weight:400;color:var(--ink-3);margin-bottom:12px}
.lede{color:var(--ink-2);font-size:clamp(17px,2vw,20px);text-wrap:pretty}
.link{display:inline-block;padding:6px 0;color:var(--ink-1);font-weight:400;text-decoration:underline;text-underline-offset:3px;transition:opacity .2s var(--ease-soft)}
.link:hover{opacity:.7}
.btn{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font-weight:500;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),border-color .2s var(--ease-soft)}
.btn:active{transform:scale(.96)}
/* The one filled shape: a flat white pill, dark ink. The other way round it is an outline, no fill. */
.btn-white{background:var(--button);color:var(--button-ink)}
@media(hover:hover)and (pointer:fine){.btn-white:hover{background:#fff}}
.btn-ghost{background:none;border-color:var(--outline);color:var(--ink-1)}
@media(hover:hover)and (pointer:fine){.btn-ghost:hover{border-color:var(--ink-1)}}
.btn.copied{background:#fff;color:var(--button-ink)}
.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:var(--void);box-shadow:inset 0 0 0 1px var(--hair);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:var(--void);box-shadow:inset 0 0 0 1px var(--hair)}
.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:var(--button);color:var(--button-ink)}
.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:var(--void);box-shadow:inset 0 0 0 1px var(--hair);transition:box-shadow .3s var(--ease-soft)}
.nav.scrolled{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.nav-brand{display:flex;align-items:center;gap:8px;font-weight:500;font-size:17px;letter-spacing:-.02em}
.logo{display:block;width:auto;height:16px;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:15px}.nav .btn-sm{padding:11px 16px;font-size:14.5px}}
@media(max-width:350px){.nav-lang .ic{display:none}.nav .logo{height:14px}.nav .btn-sm{padding:11px 13px;font-size:14px}}
@media(pointer:coarse){
  body{transition-duration:.45s}
}

/* ───────── Hero ───────── */
/* Metro: words on black, centred, and under them the app as it is, flat: its top half rising out of the dark. */
.hero{position:relative;padding:clamp(130px,19vh,190px) var(--page-pad) 0;text-align:center}
.hero:before,.sub-hero:before{display:none;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-copy{max-width:var(--maxw);margin:0 auto}
/* Two lines, one sentence: the second the same size, a tone quieter. */
.hero-h1{font-size:clamp(42px,5vw,72px);line-height:1.04;letter-spacing:-.04em;font-weight:300}
.hero-h1 span{display:block;color:var(--ink-4)}
.hero-sub{margin:28px auto 0;color:var(--ink-3);font-size:clamp(17px,1.4vw,19px);line-height:1.5;text-wrap:balance}
.hero-cta{margin-top:36px;display:flex;flex-direction:column;align-items:center;gap:14px}
.hero-shot{position:relative;width:min(1200px,100%);height:clamp(300px,38vw,520px);margin:clamp(56px,9vh,96px) auto 0;overflow:hidden;-webkit-mask-image:linear-gradient(#000 40%,transparent 96%);mask-image:linear-gradient(#000 40%,transparent 96%)}
.hero-shot img{display:block;width:100%;height:auto}
@media(max-width:820px){
  /* A phone shows the window's left side (the rail and the list), the rest off the edge. */
  .hero-shot{width:auto;height:min(118vw,480px);margin-right:calc(-1 * var(--page-pad))}
  .hero-shot img{width:250%;max-width:none}
}
.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}
/* The app's icon (the download pages): 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%}
.ai-gomex{--c:#e4e4e7;--c2:#fff;color:#0b0b0c}
.ai-gomex svg{width:62%;height:62%}
.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}

/* ───────── Stat strip ───────── */
.stats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,4vw,64px);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:0;border-block:1px solid var(--hair);background:none}
@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(30px,4.6vw,46px);line-height:1.04;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink-1);font-weight:300}
.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:900px;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:400;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}

/* 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:inset 0 0 0 1px var(--hair);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:17px;font-weight:500;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,.cell-blue{background: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}}

/* The big cell: the window again, cut at the cell's right edge. */
/* A piece of the real window: its top-left corner, bleeding off the cell to the right and bottom. */
.window-crop{display:block;width:640px;max-width:none;height:auto}
.cell:has(.window-crop){background:none;box-shadow:none;padding:0;border-radius:0}


.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}
/* 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}

/* 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{max-width:900px;margin:0 auto;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{margin-bottom:clamp(36px,6vh,56px);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(--void);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:inset 0 0 0 1px var(--hair)}
.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:20px;font-weight:500;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(--void);position:relative;padding:22px 22px 26px;border-radius:var(--cell-r);background:var(--surface);box-shadow:inset 0 0 0 1px var(--hair)}
.card .step-art{margin:4px 0 22px}
.card h3{font-size:18px;font-weight:500;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:var(--cell-r);background:var(--surface);box-shadow:inset 0 0 0 1px var(--hair)}
.alt-card>.ic{margin-top:2px;font-size:22px;color:var(--ink-2)}
.alt-card h3{font-size:17px;font-weight:500}
.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:400;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;opacity:0;translate:0 -6px;transition:opacity .35s var(--ease-out-strong),translate .35s var(--ease-out-strong)}
.faq details[open] p{opacity:1;translate:0 0}
@supports (interpolate-size:allow-keywords){
  .faq{interpolate-size:allow-keywords}
  .faq details::details-content{height:0;overflow:clip;transition:height .38s var(--ease-out-strong),content-visibility .38s allow-discrete}
  .faq details[open]::details-content{height:auto}
}
@media (prefers-reduced-motion:reduce){.faq details p{transition:none;translate:none}.faq details::details-content{transition:none}}
.faq em{font-style:normal;color:var(--ink-2)}

/* ───────── Final CTA, dial, footer ───────── */
.cta-final{max-width:900px;margin:0 auto;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(220px,36vh,380px);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(46vw,520px);position:absolute;left:50%;top:calc(var(--R) + 28px);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:var(--void);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:22px}
.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-list .room,.iv-link,.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. */
.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}
.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}
@keyframes msg-in{from{opacity:0;translate:0 8px}}

/* The install: two square cards side by side, the heading and the one thing to do at the top, the drawing big in the
   bottom-left corner, cut by the card's edge and dissolving towards it. */
.steps-art{grid-template-columns:repeat(2,minmax(0,1fr))}
.steps-art .step{grid-template-columns:1fr;align-content:start;aspect-ratio:1;padding:28px;overflow:hidden}
.steps-art .step-art{position:absolute;top:50%;left:14px;width:calc(100% - 28px);height:auto;color:var(--ink-3);pointer-events:none}
.steps-art .step:after{content:"";position:absolute;inset:auto 1px 1px;height:38%;border-radius:0 0 calc(var(--cell-r) - 1px) calc(var(--cell-r) - 1px);background:linear-gradient(transparent,var(--surface) 85%);pointer-events:none}
.steps-art .step-body{grid-column:1}
/* Only the heading keeps clear of the number in the corner: the button gets the card's full width. */
.steps-art .step-body h3{padding-right:36px}
.steps-art .step-dl{margin-top:16px}
@media(max-width:700px){
  .steps-art{grid-template-columns:1fr}
}

/* ───────── Metro: type leads ─────────
   Everything but the heroes and the closing call reads from one left edge instead of the centre, and the headings are the statements themselves, in light
   type. The small section labels go: next to a heading they only said it twice. One block, so it comes off in one
   move. */
.kicker{display:none}
h1,h2{font-weight:300}
.feature,.privacy,.install,.bento-wrap,.sub-steps,.sub-update{text-align:left}
.feature .lede,.privacy .lede,.install>.lede,.sub-update .lede{margin-left:0;margin-right:0}
.sub-update{justify-items:start}
.feature{display:flex;flex-direction:column;align-items:flex-start}

.install>h2:has(+ .lede){margin-bottom:0}
.install>.lede{margin:14px 0 clamp(36px,6vh,56px)}
/* One column for the whole page: every section starts and ends where "Everything else" does (the page's width less
   its side padding), so the left edge is one line from the top to the footer. */
#features,.privacy,.install,.faq,.cta-final,.sub-hero,.sub-steps,.sub-update,.sub-alt{max-width:var(--maxw)}
.bento{max-width:none;margin:0}
.foot-grid{max-width:calc(var(--maxw) - 2*var(--page-pad))}
/* The statements alternate: the words on one side, their picture on the other, the sides swapping row by row; on a
   phone the picture comes under the words. The pictures stand in full instead of hiding in the corners. */
.feature{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:start;padding-block:clamp(56px,10vh,110px)}
.feature .lede{margin-top:18px}
.feature-art{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.feature-art .orn{display:block;position:static;inset:auto;margin:0;scale:1;rotate:calc(var(--r,0)*.35deg)}
@media(min-width:900px){
  .feature{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(40px,6vw,96px);align-items:center}
  .feature:nth-of-type(even) .feature-copy{order:2}
  .feature-art{justify-content:center}
}
/* A statement's picture is its card from the app: the live mock, framed by a hairline, the whole column wide. */
.feature-art .cell{width:100%;min-height:340px;justify-content:center}
.feature-art .cell-big{min-height:330px;padding:16px 0 0 16px;justify-content:flex-end}
.feature-art .cell-big{max-height:420px}
/* Anti-lag as a tab, like noise suppression's: the pill on «Direct» while it's bad, sliding to «Anti-lag» when it
   switches itself on (site.js drops .bad). */
.cc2-seg{position:absolute;z-index:1;left:16px;right:16px;bottom:16px;margin:0}
.cc2 .seg-on,.cc2.bad .seg-off{color:#fff}
.cc2.bad .seg-on{color:#a1a1aa}
.cc2.bad .cc2-seg:before{translate:0 0}

/* Header: one width with the page column */
@media(min-width:721px){.nav{width:calc(min(var(--maxw),100vw) - 2*var(--page-pad));max-width:none}}
/* Feature cards: even padding, picture centred */
.feature-art .cell:not(.cell-big){padding:28px}
.feature-art .cell:not(.cell-big) .bmedia{padding-right:0;align-items:center}
.cc2-seg{left:0;right:0}
/* Who's in voice: rows, no circles */
.st-list{margin:14px 0 0;display:grid;gap:4px}
.st-list li{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;font-size:15px;color:var(--ink-3);font-variant-numeric:tabular-nums;transition:background-color .25s var(--ease-soft),color .25s var(--ease-soft)}
.st-list li.you{background:#ffffff14;color:var(--ink-1)}
.st-list li.room:hover{background:#ffffff0a;color:var(--ink-1)}
.st-list .ic{font-size:16px}
.st-list b{font-weight:500}
.st-list small{font-size:12.5px;color:var(--ink-3)}
.st-list span{margin-left:auto;color:var(--ink-1)}
.st-list time{width:42px;text-align:right;font-size:13px;color:var(--ink-3)}
.st-list .more{font-size:13.5px}
/* Install cards: the whole card is the main link; the side link stays on top */
.steps-art .step-go:after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.steps-art .step-alt{position:relative;z-index:2}
.steps-art .step{transition:box-shadow .25s var(--ease-soft)}
.steps-art .step:has(.step-go:hover){box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
/* Sub-page heroes and the closing call: centred (the home page's hero keeps to the left, see Hero) */
.sub-hero,.cta-final{text-align:center}
.sub-hero .hero-cta,.cta-final{align-items:center}
/* Server page: the command sits folded under the download button, one quiet line until it's opened */
.hero-cmd{width:100%;margin-top:6px;text-align:center}
.hero-cmd summary{display:inline-flex;align-items:center;gap:6px;padding:6px 2px;list-style:none;cursor:pointer;font-size:13.5px;color:var(--ink-3);transition:color .2s var(--ease-soft)}
.hero-cmd summary::-webkit-details-marker{display:none}
.hero-cmd summary:hover,.hero-cmd[open] summary{color:var(--ink-1)}
.hero-cmd summary .ic{font-size:14px;transition:rotate .25s var(--ease-out-strong)}
.hero-cmd[open] summary .ic{rotate:180deg}
.hero-cmd>p{max-width:520px;margin:10px auto 18px;font-size:13.5px;color:var(--ink-3);text-wrap:balance}