@font-face { font-family: "Onest"; font-weight: 400 800; font-display: swap; src: url("fonts/onest-latin.woff2") format("woff2");
    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; }
@font-face { font-family: "Onest"; font-weight: 400 800; font-display: swap; src: url("fonts/onest-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116, U+20BD; }
@font-face { font-family: "JetBrains Mono"; font-weight: 400 600; font-display: swap; src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
    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; }
@font-face { font-family: "JetBrains Mono"; font-weight: 400 600; font-display: swap; src: url("fonts/jetbrains-mono-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }



/*
 * After the big product sites (Linear, Signal, Superhuman): a calm descriptive headline, the product
 * itself on the first screen, a strip of what it does, a two-tone statement, three line-drawn
 * figures, two deep dives with working visuals, a closing call to action. Dark first, hairlines.
 */
:root {
    --bg: #fbfbfa; --bg-2: #f3f3f1; --panel: #ffffff; --ink: #0b0c0d; --muted: #6b6f76; --faint: #a3a7ad;
    --line: rgba(11, 12, 13, 0.09); --line-2: rgba(11, 12, 13, 0.16); --art: rgba(11, 12, 13, 0.55); --glow: rgba(11, 12, 13, 0.07);
    --app-bg: #ffffff; --app-2: #f2f3f5; --app-fg: #0b0c0d; --app-mu: #80858d; --app-line: #e8e9ec; --out: #0b0c0d; --out-fg: #ffffff;
    --font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
    --ease: cubic-bezier(0.2, 0.7, 0.1, 1); --gutter: clamp(1.25rem, 4vw, 3rem); --max: 76rem;
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #08090a; --bg-2: #0d0e10; --panel: #101113; --ink: #f7f8f8; --muted: #8a8f98; --faint: #5b6068;
        --line: rgba(255, 255, 255, 0.07); --line-2: rgba(255, 255, 255, 0.13); --art: rgba(255, 255, 255, 0.5); --glow: rgba(255, 255, 255, 0.09);
        --app-bg: #0f1012; --app-2: #1a1b1e; --app-fg: #f2f3f4; --app-mu: #858a92; --app-line: #1f2023; --out: #f2f3f4; --out-fg: #0b0c0d;
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --bg: #08090a; --bg-2: #0d0e10; --panel: #101113; --ink: #f7f8f8; --muted: #8a8f98; --faint: #5b6068;
    --line: rgba(255, 255, 255, 0.07); --line-2: rgba(255, 255, 255, 0.13); --art: rgba(255, 255, 255, 0.5); --glow: rgba(255, 255, 255, 0.09);
    --app-bg: #0f1012; --app-2: #1a1b1e; --app-fg: #f2f3f4; --app-mu: #858a92; --app-line: #1f2023; --out: #f2f3f4; --out-fg: #0b0c0d;
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1rem/1.55 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.mono { font: 500 0.7rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }

/* ---- header ---- */

.nav { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 94%, transparent); }    /* no backdrop blur: it was re-blurring the animated hero every frame */
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 4rem; }
.brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; letter-spacing: -0.025em; text-decoration: none; font-size: 1.2rem; }
/* the mark is the Alt key itself, no tile: black on the light page, white on the dark one */
.brand img { width: auto; height: 2.25rem; }
.brand .key-d { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand .key-l { display: none; } :root:not([data-theme="light"]) .brand .key-d { display: block; } }
:root[data-theme="dark"] .brand .key-l { display: none; } :root[data-theme="dark"] .brand .key-d { display: block; }
.links { display: flex; align-items: center; gap: 1.8rem; font-size: 0.88rem; color: var(--muted); }
.links a { text-decoration: none; transition: color 0.2s; } .links a:hover { color: var(--ink); }
/* language: the current code, a short list under it */
.lang { position: relative; }
.lang summary { display: flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.2rem; list-style: none; cursor: pointer; font: 500 0.78rem/1 var(--mono); letter-spacing: 0.06em; color: var(--muted); }
.lang summary::-webkit-details-marker { display: none; }
.lang summary::after { content: ""; width: 0.38rem; height: 0.38rem; margin-top: -0.2rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; rotate: 45deg; }
.lang[open] summary, .lang summary:hover { color: var(--ink); }
.lang div { position: absolute; right: -0.5rem; top: calc(100% + 0.5rem); z-index: 40; display: grid; min-width: 8.5rem; padding: 0.3rem; border: 1px solid var(--line-2); border-radius: 0.75rem; background: var(--panel); box-shadow: 0 1rem 2rem -1rem rgba(0, 0, 0, 0.5); }
.lang div a { padding: 0.5rem 0.7rem; border-radius: 0.5rem; color: var(--muted); font-size: 0.88rem; }
.lang div a:hover { background: var(--bg-2); color: var(--ink); }
.lang div a[aria-current] { color: var(--ink); }
.lang div a[aria-current]::after { content: " ✓"; color: var(--muted); }
/* Chinese: CJK text falls back to the system's Chinese fonts; Latin stays in Onest. No tight tracking on characters */
html[lang^="zh"] { --font: "Onest", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", system-ui, sans-serif; }
html[lang^="zh"] body :is(h1, h2, h3, p, b, span, small, a) { letter-spacing: 0; }
html[lang^="zh"] .mono { letter-spacing: 0.04em; }
.btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 2.35rem; padding-inline: 1rem; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 500; font-size: 0.88rem; text-decoration: none; transition: opacity 0.2s; }
.btn:hover { opacity: 0.94; }
/* a sheen crosses the button on hover; the download arrow dips */
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--bg) 35%, transparent) 50%, transparent 70%); transform: translateX(-110%); }
.btn:hover::after { transform: translateX(110%); transition: transform 0.85s var(--ease); }
.btn svg { transition: transform 0.35s var(--ease); }
.btn:hover svg { transform: translateY(2px); }
.btn svg { width: 1rem; height: 1rem; }
.btn-lg { height: 3rem; padding-inline: 1.4rem; font-size: 0.98rem; }
.links .btn { color: var(--bg); }

/* ---- hero ---- */

.hero { position: relative; padding-top: clamp(4.5rem, 10vw, 8rem); }
.hero-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem; }
.hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); font-weight: 560; line-height: 1.04; letter-spacing: -0.035em; }
.hero-sub { margin-top: 1.4rem; max-width: 36rem; color: var(--muted); font-size: clamp(1.02rem, 1.3vw, 1.15rem); }
.hero-cta { display: flex; align-items: center; gap: 1.25rem; margin-top: 2rem; }
.store { color: var(--muted); font-size: 0.9rem; text-decoration: none; display: inline-flex; gap: 0.4rem; align-items: center; }
.store b { color: var(--ink); font-weight: 500; }
.store:hover b { text-decoration: underline; text-underline-offset: 0.2em; }
.br-m { display: none; }
.bt small, .store small { font: inherit; }
.px, .down { display: none; }

/* the stage: three phones on a lit floor */
.stage { position: relative; margin-top: clamp(3rem, 6vw, 4.5rem); height: clamp(26rem, 52vw, 44rem); border: 1px solid var(--line); border-radius: 1.5rem; overflow: hidden; isolation: isolate;
    background: radial-gradient(120% 80% at 50% 110%, var(--glow), transparent 60%), linear-gradient(var(--bg-2), var(--bg)); }
.stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(70% 70% at 50% 30%, #000, transparent); mask-image: radial-gradient(70% 70% at 50% 30%, #000, transparent); opacity: 0.6; }
.stage::after { content: ""; position: absolute; inset: auto 0 0 0; height: 16%; background: linear-gradient(transparent, var(--bg)); z-index: 2; pointer-events: none; }
.phones { position: absolute; left: 50%; top: 9%; display: flex; align-items: flex-start; gap: clamp(1rem, 3vw, 2.5rem); translate: -50% 0; }
.ph:nth-child(1) .phone, .ph:nth-child(3) .phone { --u: clamp(0.62px, 0.075vw, 0.86px); }
.ph:nth-child(1), .ph:nth-child(3) { margin-top: 4.5%; }
.ph:nth-child(2) .phone { --u: clamp(0.72px, 0.088vw, 1px); }

/* ---- the phone (every size is a multiple of --u) ---- */

.phone { --u: 1px; flex: none; width: calc(300 * var(--u)); aspect-ratio: 9 / 19.5; padding: calc(7 * var(--u)); border-radius: calc(48 * var(--u));
    background: linear-gradient(150deg, #47494e, #1a1b1e 40%, #2a2b2f); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 calc(40 * var(--u)) calc(80 * var(--u)) calc(-30 * var(--u)) rgba(0, 0, 0, 0.55); }
.screen { position: relative; height: 100%; border-radius: calc(41 * var(--u)); overflow: hidden; background: var(--app-bg); color: var(--app-fg); font-size: calc(13 * var(--u)); line-height: 1.3; }
.island { position: absolute; z-index: 3; top: calc(10 * var(--u)); left: 50%; translate: -50% 0; width: calc(88 * var(--u)); height: calc(26 * var(--u)); border-radius: 999px; background: #000; }
.sb { display: flex; justify-content: space-between; align-items: center; height: calc(46 * var(--u)); padding: calc(6 * var(--u)) calc(26 * var(--u)) 0; font-weight: 600; font-size: calc(14 * var(--u)); }
.sb-i { display: flex; align-items: center; gap: calc(5 * var(--u)); }
.sb-bars { display: flex; align-items: flex-end; gap: calc(1.5 * var(--u)); height: calc(10 * var(--u)); }
.sb-bars i { width: calc(3 * var(--u)); background: currentColor; border-radius: 1px; }
.sb-bars i:nth-child(1) { height: 40%; } .sb-bars i:nth-child(2) { height: 60%; } .sb-bars i:nth-child(3) { height: 80%; } .sb-bars i:nth-child(4) { height: 100%; }
.sb-bat { width: calc(22 * var(--u)); height: calc(11 * var(--u)); border-radius: calc(3 * var(--u)); border: 1px solid currentColor; padding: 1px; opacity: 0.9; }
.sb-bat::after { content: ""; display: block; width: 72%; height: 100%; border-radius: 1px; background: currentColor; }
.ah { display: flex; align-items: center; justify-content: space-between; padding: calc(4 * var(--u)) calc(16 * var(--u)) calc(10 * var(--u)); }
.ah b { font-size: calc(19 * var(--u)); font-weight: 650; letter-spacing: -0.02em; }
.ah svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); color: var(--app-mu); }
.tabs { display: flex; gap: calc(18 * var(--u)); padding: 0 calc(16 * var(--u)); border-bottom: 1px solid var(--app-line); font-weight: 500; color: var(--app-mu); }
.tabs span { padding-bottom: calc(9 * var(--u)); }
.tabs span.on { color: var(--app-fg); box-shadow: inset 0 calc(-2.5 * var(--u)) 0 var(--app-fg); }
.tabs em { font-style: normal; margin-left: calc(4 * var(--u)); padding: 0 calc(5 * var(--u)); border-radius: 99px; background: var(--app-2); font-size: calc(10.5 * var(--u)); }
.cr { position: relative; display: flex; gap: calc(11 * var(--u)); align-items: center; height: calc(64 * var(--u)); padding: 0 calc(14 * var(--u)); background: var(--app-bg); }
.av { flex: none; width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: calc(16 * var(--u)); color: #fff; }
.g1 { background: linear-gradient(140deg, #6b6f76, #3b3e43); } .g2 { background: linear-gradient(140deg, #9aa0a6, #5d6167); } .g3 { background: linear-gradient(140deg, #4e5257, #26282b); }
.g4 { background: linear-gradient(140deg, #b2b6bb, #74787e); } .g5 { background: linear-gradient(140deg, #7d8187, #474a4f); }
.ct { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(2 * var(--u)); align-self: stretch; align-content: center; border-bottom: 1px solid var(--app-line); }
.ct-top { display: flex; justify-content: space-between; gap: calc(6 * var(--u)); }
.ct b { min-width: 0; font-weight: 600; font-size: calc(14.5 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct time { flex: none; color: var(--app-mu); font-size: calc(11.5 * var(--u)); }
.ct-bot { display: flex; justify-content: space-between; align-items: center; gap: calc(8 * var(--u)); }
.ct small { min-width: 0; color: var(--app-mu); font-size: calc(13 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct small i { font-style: normal; color: var(--app-fg); }
.ct em { flex: none; min-width: calc(20 * var(--u)); height: calc(20 * var(--u)); padding: 0 calc(6 * var(--u)); border-radius: 99px; display: grid; place-items: center; font-style: normal; font-size: calc(11.5 * var(--u)); font-weight: 600; background: var(--app-fg); color: var(--app-bg); }
.ct em.mu { background: var(--app-2); color: var(--app-mu); }
.fab { position: absolute; right: calc(16 * var(--u)); bottom: calc(26 * var(--u)); width: calc(52 * var(--u)); height: calc(52 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: var(--app-fg); color: var(--app-bg); }
.fab svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }

/* conversation */
.chh { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(4 * var(--u)) calc(14 * var(--u)) calc(10 * var(--u)); border-bottom: 1px solid var(--app-line); }
.chh svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); color: var(--app-mu); }
.chh .av { width: calc(38 * var(--u)); height: calc(38 * var(--u)); font-size: calc(14 * var(--u)); }
.chh b { display: block; font-size: calc(15 * var(--u)); font-weight: 600; } .chh small { color: var(--app-mu); font-size: calc(12 * var(--u)); }
.msgs { display: flex; flex-direction: column; gap: calc(6 * var(--u)); padding: calc(14 * var(--u)) calc(12 * var(--u)); }
.msgs .day { align-self: center; padding: calc(3 * var(--u)) calc(10 * var(--u)); border-radius: 99px; background: var(--app-2); color: var(--app-mu); font-size: calc(11.5 * var(--u)); margin-bottom: calc(4 * var(--u)); }
.m { position: relative; max-width: 78%; padding: calc(7 * var(--u)) calc(11 * var(--u)) calc(7 * var(--u)) calc(11 * var(--u)); border-radius: calc(17 * var(--u)); font-size: calc(14 * var(--u)); background: var(--app-2); }
.m small { float: right; margin: calc(5 * var(--u)) 0 0 calc(8 * var(--u)); font-size: calc(10.5 * var(--u)); color: var(--app-mu); }
.m.o { align-self: flex-end; background: var(--out); color: var(--out-fg); border-bottom-right-radius: calc(5 * var(--u)); }
.m.o small { color: inherit; opacity: 0.55; }
.m.i { align-self: flex-start; border-bottom-left-radius: calc(5 * var(--u)); }
.m.v { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.m.v .pl { width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 50%; background: var(--out-fg); display: grid; place-items: center; }
.m.v .pl::after { content: ""; width: calc(10 * var(--u)); height: calc(12 * var(--u)); margin-left: calc(2 * var(--u)); background: var(--out); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.wv { display: flex; align-items: center; gap: calc(2 * var(--u)); height: calc(20 * var(--u)); }
.wv i { width: calc(2.5 * var(--u)); border-radius: 2px; background: currentColor; opacity: 0.8; }
.comp { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(28 * var(--u)); border-top: 1px solid var(--app-line); background: var(--app-bg); color: var(--app-mu); }
.comp span { flex: 1; } .comp svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }

/* a group chat, a message every few seconds */
.gc { position: absolute; top: calc(98 * var(--u)); bottom: calc(63 * var(--u)); left: 0; right: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: calc(6 * var(--u)); padding: calc(12 * var(--u)) calc(10 * var(--u)); }
.gm { display: flex; align-items: flex-end; gap: calc(7 * var(--u)); }
.gm.o { justify-content: flex-end; }
.gm .av.s { width: calc(30 * var(--u)); height: calc(30 * var(--u)); font-size: calc(12 * var(--u)); }
.gb { position: relative; max-width: 78%; padding: calc(6 * var(--u)) calc(10 * var(--u)); border-radius: calc(16 * var(--u)); background: var(--app-2); font-size: calc(14 * var(--u)); line-height: 1.3; }
.gm.i .gb { border-bottom-left-radius: calc(5 * var(--u)); }
.gm.o .gb { background: var(--out); color: var(--out-fg); border-bottom-right-radius: calc(5 * var(--u)); }
.gb .n { display: block; margin-bottom: calc(1 * var(--u)); font-size: calc(12.5 * var(--u)); font-weight: 600; }
.gb .t { float: right; margin: calc(5 * var(--u)) 0 0 calc(8 * var(--u)); font-size: calc(10.5 * var(--u)); color: var(--app-mu); white-space: nowrap; transition: color 0.4s; }
.gm.o .gb .t { color: inherit; opacity: 0.55; }
.gb.ph { padding: calc(3 * var(--u)); }
.gb.ph .img { display: block; width: calc(170 * var(--u)); height: calc(108 * var(--u)); border-radius: calc(13 * var(--u)); background: linear-gradient(160deg, #8a8e94, #45484d 55%, #26282b); }
.gb.ph .t { position: absolute; right: calc(9 * var(--u)); bottom: calc(8 * var(--u)); margin: 0; padding: calc(1 * var(--u)) calc(6 * var(--u)); border-radius: 99px; background: rgba(0, 0, 0, 0.45); color: #fff; }
.gb .w { display: inline-block; }
.comp { z-index: 2; }

/* centre phone: the chat list; its channels and stories row leave, a bulletin says why */
.pages { position: absolute; top: calc(46 * var(--u)); left: 0; right: 0; bottom: 0; overflow: hidden; }
.pg { position: absolute; inset: 0; background: var(--app-bg); transition: transform 0.5s var(--ease); }
.stories { display: flex; gap: calc(12 * var(--u)); padding: calc(4 * var(--u)) calc(14 * var(--u)) calc(10 * var(--u)); border-bottom: 1px solid var(--app-line); overflow: hidden; height: calc(82 * var(--u)); }
.st { display: grid; justify-items: center; gap: calc(4 * var(--u)); width: calc(48 * var(--u)); flex: none; }
.st i { font-style: normal; width: calc(48 * var(--u)); height: calc(48 * var(--u)); border-radius: 50%; padding: calc(2.5 * var(--u)); border: calc(2 * var(--u)) solid var(--app-fg); display: grid; }
.st i .av { width: 100%; height: 100%; font-size: calc(15 * var(--u)); }
.st small { font-size: calc(10.5 * var(--u)); color: var(--app-mu); white-space: nowrap; }
.list2 .ct b svg { display: inline-block; width: calc(14 * var(--u)); height: calc(14 * var(--u)); margin: 0 calc(3 * var(--u)) calc(-2 * var(--u)) 0; color: var(--app-mu); }
.list2 .cr.gone { opacity: 0; transform: translateX(12%); transition: opacity 0.35s, transform 0.4s var(--ease); }
.stories.gone { opacity: 0; transition: opacity 0.35s; }
/* the bulletin at the bottom */
.bul { position: absolute; z-index: 9; left: calc(10 * var(--u)); right: calc(10 * var(--u)); bottom: calc(70 * var(--u)); display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(11 * var(--u)) calc(14 * var(--u)); border-radius: calc(12 * var(--u));
    background: rgba(28, 29, 32, 0.96); color: #fff; font-size: calc(13.5 * var(--u)); opacity: 0; transform: translateY(calc(20 * var(--u))); transition: opacity 0.3s, transform 0.35s var(--ease); }
.bul svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); color: #7dd27a; }
.screen.bulon .bul { opacity: 1; transform: none; }

/* drawer with accounts: a counter, a list that can run up to a hundred, and a mosaic of all of them */
.dr-top { position: relative; }
.acount { position: absolute; white-space: nowrap; right: calc(14 * var(--u)); top: calc(12 * var(--u)); padding: calc(4 * var(--u)) calc(9 * var(--u)); border-radius: 99px; border: 1px solid var(--app-line); background: var(--app-bg);
    font: 500 calc(11 * var(--u))/1.2 var(--mono); color: var(--app-mu); transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
.dr-top .acount b { display: inline; margin: 0; font-size: inherit; font-weight: 700; color: var(--app-fg); font-variant-numeric: tabular-nums; }
.acount.full { background: var(--app-fg); border-color: var(--app-fg); color: var(--app-bg); }
.dr-top .acount.full b { color: inherit; }
.dr-low { position: relative; }
.accwrap { height: calc(156 * var(--u)); overflow: hidden; }
/* Safari: the list slides on every added account while the phones tilt in 3D; on a layer of its own it
   stops the phone blinking. The mosaic above it then needs its own layer too, or Safari draws the list
   over it, whatever the z-index says */
.acclist { --n: 0; transform: translateY(calc(var(--n) * -52 * var(--u))); transition: transform 0.16s linear; will-change: transform; }
.accwrap .acc { height: calc(52 * var(--u)); padding-block: 0; }
.acc.add.press::after { content: ""; position: absolute; left: 30%; top: 50%; width: 140%; aspect-ratio: 1; border-radius: 50%; background: var(--app-fg); opacity: 0; transform: translate(-50%, -50%) scale(0); animation: tap 0.6s ease-out; pointer-events: none; }
.mosaic { position: absolute; inset: 0 0 calc(-60 * var(--u)) 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: calc(14 * var(--u)); background: var(--app-bg); opacity: 0; pointer-events: none; transition: opacity 0.35s;  will-change: opacity; }
.screen.mos .mosaic { opacity: 1; }
.mgrid { display: grid; grid-template-columns: repeat(10, calc(21 * var(--u))); gap: calc(4 * var(--u)); }
.mgrid i { width: calc(21 * var(--u)); height: calc(21 * var(--u)); border-radius: 50%; display: grid; place-items: center; font: 600 calc(8.5 * var(--u))/1 var(--font); font-style: normal; color: #fff; opacity: 0; transform: scale(0.3); }
.mgrid i.on { opacity: 1; transform: none; transition: opacity 0.25s, transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1); }
.mgrid i.me { box-shadow: 0 0 0 calc(2 * var(--u)) var(--app-bg), 0 0 0 calc(3.5 * var(--u)) var(--app-fg); }
.mosaic.wave i { animation: mwave 0.7s ease; }
@keyframes mwave { 45% { transform: scale(1.3); } }
.mcap { margin: 0; font-size: calc(13 * var(--u)); line-height: 1.35; text-align: center; color: var(--app-mu); opacity: 0; transform: translateY(calc(6 * var(--u))); transition: opacity 0.4s, transform 0.4s var(--ease); }
.mcap b { color: var(--app-fg); font-size: calc(15 * var(--u)); }
.mosaic.done .mcap { opacity: 1; transform: none; }

/* drawer with accounts */
.dr-top { padding: calc(8 * var(--u)) calc(18 * var(--u)) calc(14 * var(--u)); background: var(--app-2); }
.dr-top .av { width: calc(64 * var(--u)); height: calc(64 * var(--u)); font-size: calc(22 * var(--u)); }
.dr-top b { display: block; margin-top: calc(12 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 600; }
.dr-top small { color: var(--app-mu); font-size: calc(13 * var(--u)); }
.acc { display: flex; align-items: center; gap: calc(14 * var(--u)); padding: calc(10 * var(--u)) calc(18 * var(--u)); font-weight: 500; font-size: calc(14.5 * var(--u)); }
.acc .av { width: calc(32 * var(--u)); height: calc(32 * var(--u)); font-size: calc(12 * var(--u)); }
.acc em { margin-left: auto; font-style: normal; min-width: calc(20 * var(--u)); height: calc(20 * var(--u)); padding: 0 calc(6 * var(--u)); border-radius: 99px; display: grid; place-items: center; background: var(--app-fg); color: var(--app-bg); font-size: calc(11 * var(--u)); font-weight: 600; }
.acc.add { color: var(--app-mu); }
.acc.add i { width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 50%; border: 1px dashed var(--app-mu); display: grid; place-items: center; font-style: normal; font-size: calc(18 * var(--u)); }
.dr-sep { height: 1px; margin: calc(6 * var(--u)) 0; background: var(--app-line); }
.mi { display: flex; align-items: center; gap: calc(22 * var(--u)); padding: calc(11 * var(--u)) calc(20 * var(--u)); font-size: calc(14.5 * var(--u)); }
.mi svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); color: var(--app-mu); }

/* ---- what it does: a strip of icons ---- */

.strip { margin-top: clamp(3rem, 6vw, 5rem); }
.strip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.25rem; }
.strip-head p { color: var(--muted); font-size: 0.92rem; }
.feats { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 1.1rem; overflow: hidden; }
.feat { display: grid; justify-items: center; gap: 0.7rem; padding: 1.4rem 0.5rem 1.2rem; text-align: center; font-size: 0.84rem; color: var(--muted); }
.feat + .feat { border-left: 1px solid var(--line); }
.feat svg { width: 1.5rem; height: 1.5rem; color: var(--ink); }

/* ---- the statement ---- */

.statement { padding-block: clamp(6rem, 12vw, 10rem) clamp(3rem, 6vw, 5rem); }
.statement p { max-width: 54rem; font-size: clamp(1.7rem, 3.3vw, 2.75rem); font-weight: 520; line-height: 1.18; letter-spacing: -0.03em; color: var(--faint); }
.statement p b { font-weight: 520; color: var(--ink); }

/* ---- three figures ---- */

.figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.fig { position: relative; padding: 2rem 2rem 2.4rem; display: grid; gap: 0.6rem; align-content: start; overflow: hidden; }
.fig + .fig { border-left: 1px solid var(--line); }
.fig::before { content: ""; position: absolute; inset: 0; background: radial-gradient(22rem circle at var(--x, 50%) var(--y, 0%), var(--glow), transparent 60%); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.fig:hover::before { opacity: 1; }
.fart { position: relative; width: min(100%, 17.5rem); aspect-ratio: 240 / 170; margin: 0.5rem auto 1.5rem; color: var(--art); }
.fart .fl { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* no non-scaling-stroke here: with pathLength it breaks the draw-in dashes (strokes come out cut) */
.fig svg { stroke-width: 0.9; }
.fig svg .plate { fill: var(--bg); }
.fig h3 { font-size: 1.02rem; font-weight: 560; letter-spacing: -0.01em; }
.fig p { color: var(--muted); font-size: 0.92rem; max-width: 22rem; }
.draw { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--ease); }
.js .reveal:not(.in) .draw { stroke-dashoffset: 1; }
.reveal .draw:nth-child(2n) { transition-delay: 0.12s; }
.reveal .draw:nth-child(3n) { transition-delay: 0.24s; }

/* ---- deep dives ---- */

.deep { padding-top: clamp(6rem, 11vw, 9rem); }
.deep-head { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 4rem; align-items: start; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.deep-head h2 { font-size: clamp(2.1rem, 4vw, 3.3rem); font-weight: 560; line-height: 1.05; letter-spacing: -0.035em; }
.deep-head p { color: var(--muted); font-size: clamp(1.02rem, 1.3vw, 1.15rem); max-width: 30rem; padding-top: 0.4rem; }
.deep-head .mono { display: block; margin-bottom: 1rem; }
.panel { position: relative; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--panel); overflow: hidden; box-shadow: 0 2rem 4rem -3rem rgba(0, 0, 0, 0.45); }

/* chart */
.chart { padding: 1.5rem 1.75rem 1.25rem; }
.chart-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 1.25rem; }
.chart-top b { display: block; font-weight: 560; } .chart-top small { color: var(--muted); font-size: 0.85rem; }
.legend { display: flex; gap: 1.25rem; font-size: 0.82rem; color: var(--muted); }
.legend span { display: flex; align-items: center; gap: 0.5rem; }
.legend i { width: 1.4rem; height: 2px; background: var(--ink); }
.legend i.was { background: repeating-linear-gradient(90deg, var(--faint) 0 4px, transparent 4px 7px); }
.plot { position: relative; height: clamp(14rem, 26vw, 19rem); }
.plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.plot .grid line { stroke: var(--line); }
.plot .ax { fill: var(--faint); font: 400 11px var(--mono); }
.plot .was { stroke: var(--faint); stroke-dasharray: 4 3; fill: none; }
.plot .now { stroke: var(--ink); stroke-width: 2; fill: none; }
.plot .area { fill: url(#fade); opacity: 0.5; }
.plot .mark { fill: var(--ink); }
.plot .tag { fill: var(--ink); font: 500 12px var(--font); }
.plot .tag-mu { fill: var(--muted); font: 400 11px var(--mono); }
.grow { transform-box: fill-box; transform-origin: left center; transition: transform 2s var(--ease) 0.3s; }
.js .reveal:not(.in) .grow { transform: scaleX(0); }
.y3 { top: 4%; } .y2 { top: 31%; } .y1 { top: 58%; } .y0 { top: 85%; }
.yl { position: absolute; left: 0; font: 400 11px/1 var(--mono); color: var(--faint); }
.pin { position: absolute; right: 0; padding: 0.2rem 0.5rem; border-radius: 0.4rem; font: 500 0.75rem/1 var(--mono); border: 1px solid var(--line-2); background: var(--panel); }
.pin-was { top: 0; color: var(--muted); }
.pin-now { top: 78%; color: var(--ink); border-color: var(--ink); }
.foot-note { margin-top: 0.9rem; color: var(--faint); font: 400 0.72rem/1.5 var(--mono); }

/* cache: settings with a wheel */
.cache { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 22rem; }
.cache-set { padding: 1.5rem 1.75rem; border-right: 1px solid var(--line); display: grid; align-content: start; gap: 0.2rem; }
.cache-set h3 { font-size: 0.78rem; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.6rem; }
.set { display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.set:last-child { border-bottom: 0; }
.set i { width: 2.2rem; height: 2.2rem; border-radius: 0.65rem; display: grid; place-items: center; background: var(--bg-2); border: 1px solid var(--line); }
.set i svg { width: 1.05rem; height: 1.05rem; }
.set span { flex: 1; } .set b { font-weight: 500; color: var(--muted); font-size: 0.92rem; }
.set.on b { color: var(--ink); }
.wheel { position: relative; display: grid; place-items: center; padding: 1.5rem; overflow: hidden; }
.wheel::before { content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: 50%; height: 3rem; translate: 0 -50%; border-radius: 0.8rem; background: var(--bg-2); border: 1px solid var(--line); }
.wheel-mask { position: relative; height: 15rem; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.wheel-list { position: absolute; left: 0; right: 0; top: 6rem; display: grid; text-align: center; transition: transform 2.4s cubic-bezier(0.2, 0.8, 0.15, 1) 0.3s; transform: translateY(calc(var(--i, 13) * -3rem)); }
.js .reveal:not(.in) .wheel-list { transform: translateY(0); }
.wheel-list span { height: 3rem; display: grid; place-items: center; font-size: 1.15rem; color: var(--muted); }
.wheel-list span.sel { color: var(--ink); font-weight: 560; }

/* ---- closing ---- */

.end { margin-top: clamp(6rem, 12vw, 10rem); border-top: 1px solid var(--line); position: relative; overflow: hidden; }
.end::before { content: ""; position: absolute; left: 50%; top: 0; width: 60rem; height: 30rem; translate: -50% -55%; background: radial-gradient(closest-side, var(--glow), transparent); pointer-events: none; }
.end .wrap { position: relative; display: grid; justify-items: center; text-align: center; padding-block: clamp(5rem, 10vw, 8rem); }
.end img.icon { width: 5rem; height: 5rem; border-radius: 1.2rem; box-shadow: 0 1.5rem 3rem -1.5rem rgba(0, 0, 0, 0.6); }
.end h2 { margin-top: 2rem; font-size: clamp(2.2rem, 4.6vw, 3.8rem); font-weight: 560; letter-spacing: -0.035em; line-height: 1.05; }
.end-cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.25rem; margin-top: 2rem; }
.qr-box { display: none; align-items: center; gap: 0.75rem; padding: 0.4rem 0.9rem 0.4rem 0.4rem; border: 1px solid var(--line-2); border-radius: 0.9rem; color: var(--muted); font-size: 0.8rem; text-align: left; line-height: 1.35; }
/* the code is drawn at its large size and shown at 0.385 of it: under the pointer it grows back to its
   own size, big enough to scan from across the desk, and stays sharp (scaling a small drawing up blurs
   it). Only the transform moves; the shadow under it is a layer that fades in */
.qr-box .qr { position: relative; z-index: 1; flex: none; width: 4.5rem; aspect-ratio: 1; }
.qr-box .qr-in { position: absolute; left: 0; top: 0; width: 11.7rem; padding: 0.57rem; border-radius: 1.3rem; background: #fff;
    transform-origin: 0 0; transform: scale(0.3846); transition: transform 0.35s var(--ease); }
.qr-box .qr-in svg { display: block; width: 100%; height: auto; }
.qr-box .qr-in::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: 0 1.5rem 4rem -1rem rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.35s var(--ease); pointer-events: none; }
.qr-box .qr:hover { z-index: 5; }
.qr-box .qr:hover .qr-in { transform: translateY(-1.1rem); }    /* grows mostly downwards, clear of the heading */
.qr-box .qr:hover .qr-in::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .qr-box { display: flex; } }
.end .specs { margin-top: 1.4rem; }

.foot { border-top: 1px solid var(--line); }
.foot .wrap { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; padding-block: 3rem 2rem; font-size: 0.86rem; color: var(--muted); }
.foot h4 { margin: 0 0 0.8rem; color: var(--ink); font-weight: 500; font-size: 0.86rem; }
.foot a { display: block; margin-bottom: 0.5rem; text-decoration: none; } .foot a:hover { color: var(--ink); }
.foot a.brand { display: inline-flex; color: var(--ink); }
.foot .legal { grid-column: 1 / -1; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--faint); font-size: 0.78rem; }

/* ---- motion ---- */

@keyframes up { from { opacity: 0; transform: translateY(1rem); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes stage { from { opacity: 0; transform: perspective(1400px) rotateX(14deg) translateY(3rem) scale(0.97); } to { opacity: 1; transform: none; } }
.js .hero .ani { opacity: 0; animation: up 0.9s var(--ease) forwards; }
.js .hero .d1 { animation-delay: 0.08s; } .js .hero .d2 { animation-delay: 0.18s; } .js .hero .d3 { animation-delay: 0.28s; }
.js .stage { opacity: 0; animation: stage 1.3s var(--ease) 0.35s forwards; transform-origin: 50% 0; }
.js .reveal .fade { opacity: 0; transform: translateY(1.25rem); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js .reveal.in .fade { opacity: 1; transform: none; }

/* ==== motion ==== */

/* hero: the phones arrive one by one, lean towards the pointer, part a little as the page scrolls */
/* the script writes transform and translate on these four elements directly: a custom property on
   .phones would make every element inside the three phones recalculate its style on each frame */
.phones { transition: transform 0.9s var(--ease); }
.ph { transition: translate 0.9s var(--ease); }
@keyframes in-l { from { opacity: 0; transform: translateX(3.5rem) rotate(4deg) scale(0.94); } to { opacity: 0.92; transform: none; } }
@keyframes in-r { from { opacity: 0; transform: translateX(-3.5rem) rotate(-4deg) scale(0.94); } to { opacity: 0.92; transform: none; } }
.ph:nth-child(1), .ph:nth-child(3) { opacity: 0.92; }
.js .ph:nth-child(1) { opacity: 0; animation: in-l 1.2s var(--ease) 0.75s forwards; }
.js .ph:nth-child(3) { opacity: 0; animation: in-r 1.2s var(--ease) 0.85s forwards; }
.js .ph.here { opacity: 0.92; animation: none; }

/* left phone: the chat fills in */
/* only the five messages that are there on load; later ones come in with the script's own pop */
.js .gc > .g0 { opacity: 0; animation: msg 0.5s var(--ease) forwards; }
.js .gc > .g0:nth-child(1) { animation-delay: 1.2s; } .js .gc > .g0:nth-child(2) { animation-delay: 1.45s; }
.js .gc > .g0:nth-child(3) { animation-delay: 1.7s; } .js .gc > .g0:nth-child(4) { animation-delay: 1.95s; }
.js .gc > .g0:nth-child(5) { animation-delay: 2.2s; }

/* (kept for messages added by the script) */
@keyframes msg { from { opacity: 0; transform: translateY(0.5rem) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes typing-b { 0% { opacity: 0; transform: translateY(0.4rem); } 15%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.msgs .m.o { transform-origin: bottom right; } .msgs .m.i { transform-origin: bottom left; }
.js .msgs > * { opacity: 0; animation: msg 0.5s var(--ease) forwards; }
.js .msgs > :nth-child(1) { animation-delay: 1.3s; } .js .msgs > :nth-child(2) { animation-delay: 1.6s; }
.js .msgs > :nth-child(3) { animation-delay: 2.1s; } .js .msgs > :nth-child(4) { animation-delay: 2.6s; }
.js .msgs > :nth-child(5) { animation-delay: 3.1s; } .js .msgs > .slot { opacity: 1; animation: none; }
.slot { display: grid; } .slot > * { grid-area: 1 / 1; }
.tb { visibility: hidden; display: flex; gap: calc(4 * var(--u)); padding: calc(11 * var(--u)) calc(13 * var(--u)); width: max-content; }
.tb .dots i { display: inline-block; width: calc(6 * var(--u)); height: calc(6 * var(--u)); margin-right: calc(3 * var(--u)); border-radius: 50%; background: var(--app-mu); animation: dot 0.9s ease-in-out 3 3.6s; }
.tb .dots i:nth-child(2) { animation-delay: 3.75s; } .tb .dots i:nth-child(3) { animation-delay: 3.9s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(calc(-3 * var(--u))); opacity: 1; } }
.js .tb { visibility: visible; opacity: 0; animation: typing-b 1.3s var(--ease) 3.5s forwards; }
.js .slot > .m:not(.tb) { opacity: 0; animation: msg 0.5s var(--ease) 4.75s forwards; }

/* the press on "Добавить аккаунт": a ripple, clipped to that row only. Every row used to clip, and
   dozens of clipped rows in a list that slides while the phones tilt in 3D made Safari blink the phone */
.acc.add { position: relative; overflow: hidden; }
@keyframes tap { 0% { opacity: 0.22; transform: translate(-50%, -50%) scale(0); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }

/* the strip comes in as a wave; icons lift under the pointer */
.feat { transition: background-color 0.3s; }
.feat:hover { background: var(--bg-2); }
.feat svg { transition: transform 0.45s var(--ease); }
.feat:hover svg { transform: translateY(-3px) scale(1.08); }
.feat > * { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .strip:not(.in) .feat > * { opacity: 0; transform: translateY(0.75rem); }
.strip .feat:nth-child(2) > * { transition-delay: 0.05s; } .strip .feat:nth-child(3) > * { transition-delay: 0.1s; }
.strip .feat:nth-child(4) > * { transition-delay: 0.15s; } .strip .feat:nth-child(5) > * { transition-delay: 0.2s; }
.strip .feat:nth-child(6) > * { transition-delay: 0.25s; } .strip .feat:nth-child(7) > * { transition-delay: 0.3s; }
.strip .feat:nth-child(8) > * { transition-delay: 0.35s; }
.strip .feat:hover > * { transition-delay: 0s; }

/* the statement lights up word by word as it passes */
#words .w { transition: opacity 0.35s; }
.js #words .w { opacity: 0.16; }
.js #words .w.on { opacity: 1; }

/* the figures keep a small motion once drawn, only while on screen */
/* the figures' motion runs on separate layers (whole <svg> elements and HTML lines), never on
   shapes inside an <svg>: Chrome animates those on the main thread, with a layout every frame */
.breathe { animation: breathe-y 3.6s ease-in-out 2s infinite alternate; }
.breathe.b2 { animation-delay: 2.4s; }
@keyframes breathe-y { to { transform: translateY(-2.4%); } }
.plus { transform-origin: 81.67% 34.12%; animation: plus 2.6s ease-in-out 2.2s infinite; }
@keyframes plus { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
.moon2 { animation: breathe-y 4s ease-in-out 2s infinite alternate; }
.bars { position: absolute; left: 9.17%; width: 32.5%; bottom: 18.82%; height: 50.59%; transform-origin: 50% 100%; transition: transform 1.2s var(--ease) 0.2s; }
.js .reveal:not(.in) .bars { transform: scaleY(0); }
.bars i { position: absolute; bottom: 0; width: 1px; background: currentColor; transform-origin: 50% 100%; animation: busy 0.7s ease-in-out 1.8s infinite alternate; }
.bars .h0 { left: 0.00%; height: 65.1%; } .bars .h1 { left: 7.69%; height: 52.3%; } .bars .h2 { left: 15.38%; height: 70.9%; } .bars .h3 { left: 23.08%; height: 89.5%; } .bars .h4 { left: 30.77%; height: 45.3%; } .bars .h5 { left: 38.46%; height: 46.5%; } .bars .h6 { left: 46.15%; height: 81.4%; } .bars .h7 { left: 53.85%; height: 48.8%; } .bars .h8 { left: 61.54%; height: 68.6%; } .bars .h9 { left: 69.23%; height: 84.9%; } .bars .h10 { left: 76.92%; height: 45.3%; } .bars .h11 { left: 84.62%; height: 79.1%; } .bars .h12 { left: 92.31%; height: 57.0%; } .bars .h13 { left: 100.00%; height: 44.2%; } 
.bars i:nth-child(3n) { animation-duration: 0.55s; } .bars i:nth-child(3n+1) { animation-duration: 0.9s; animation-delay: 2s; }
.bars i:nth-child(4n) { animation-duration: 0.45s; } .bars i:nth-child(5n) { animation-duration: 1.1s; }
@keyframes busy { from { transform: scaleY(1); } to { transform: scaleY(0.55); } }
/* packets: a strip as wide as the visible line slides by its own width, a dot sits at its leading edge */
.pk { position: absolute; left: 34.58%; width: 25.42%; top: 50.59%; height: 0; }
.pk i { position: absolute; left: 0; top: 0; width: 100%; height: 0; opacity: 0; }
.pk i::before { content: ""; position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.figs.in .pk .go { animation: pk-go 2.4s ease-in-out 2.2s infinite; }
.figs.in .pk .back { animation: pk-back 2.4s ease-in-out 3.4s infinite; }
@keyframes pk-go { 0% { transform: translateX(0); opacity: 0; } 15%, 80% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }
@keyframes pk-back { 0% { transform: translateX(100%); opacity: 0; } 15%, 80% { opacity: 1; } 100% { transform: translateX(0); opacity: 0; } }

/* chart: the old line is drawn left to right, then the labels; a crosshair reads the values */
.rv { transform-box: fill-box; transform-origin: left center; transition: transform 1.8s var(--ease); }
.js .reveal:not(.in) .rv { transform: scaleX(0); }
.pin { transition: opacity 0.5s var(--ease) 2.1s, transform 0.5s var(--ease) 2.1s; }
.js .reveal:not(.in) .pin { opacity: 0; transform: translateY(0.4rem); }
.plot { cursor: crosshair; }
.xh { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--line-2); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.xh.on { opacity: 1; }
.xh b { position: absolute; top: 38%; left: 0.6rem; padding: 0.45rem 0.6rem; border-radius: 0.55rem; background: var(--panel); border: 1px solid var(--line-2); box-shadow: 0 0.75rem 1.5rem -0.75rem rgba(0, 0, 0, 0.5); font: 500 0.74rem/1.5 var(--mono); white-space: pre; color: var(--ink); }
.xh.flip b { left: auto; right: 0.6rem; }
.xh i { position: absolute; left: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); top: var(--ny, 86%); box-shadow: 0 0 0 4px var(--panel); }

/* wheel: chosen by click, drag or arrows; the setting on the left follows */
.wheel { cursor: grab; outline: none; }
.wheel:active { cursor: grabbing; }
.wheel:focus-visible::before { border-color: var(--ink); }
.wheel-list span { cursor: pointer; transition: color 0.25s, transform 0.25s var(--ease); user-select: none; }
.wheel-list span:hover { color: var(--ink); }
.wheel.ready .wheel-list { transition-duration: 0.45s; transition-delay: 0s; }
@keyframes swap { from { opacity: 0; transform: translateY(0.4rem); } to { opacity: 1; transform: none; } }
.set b.swap { animation: swap 0.4s var(--ease); }

/* closing: the icon floats and its light breathes, only while on screen */
.end.in img.icon { animation: float 5s ease-in-out 1s infinite; }
.end.in::before { animation: breathe 6s ease-in-out infinite alternate; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes breathe { from { opacity: 0.6; } to { opacity: 1; } }
.end:not(.live) img.icon, .end:not(.live)::before { animation-play-state: paused; }

.statement, .figs, .deep, .end { content-visibility: auto; contain-intrinsic-size: auto 640px; }
/* phones and small screens: the hero keeps its phones and their life, but drops the decoration
   that only adds compositing work on a weak GPU */
@media (max-width: 60rem) {
    .flick, .beams { display: none; }
    .rays i { animation: none; }
}

/* ==== ambient: things that keep happening while you look; each runs only while its section is on screen ==== */

:root { --app-gray: #eceef1; --ray: rgba(11, 12, 13, 0.035); --beamc: rgba(11, 12, 13, 0.45); --cell: rgba(11, 12, 13, 0.05); --sheen: rgba(11, 12, 13, 0.045); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --app-gray: #08090a; --ray: rgba(255, 255, 255, 0.05); --beamc: rgba(255, 255, 255, 0.75); --cell: rgba(255, 255, 255, 0.045); --sheen: rgba(255, 255, 255, 0.06); } }
:root[data-theme="dark"] { --app-gray: #08090a; --ray: rgba(255, 255, 255, 0.05); --beamc: rgba(255, 255, 255, 0.75); --cell: rgba(255, 255, 255, 0.045); --sheen: rgba(255, 255, 255, 0.06); }
/* only the loops pause off screen; one-time entrances must never wait */
[data-live]:not(.live) :is(.rays i, .flick i, .beams i, .phone, .orbit, .orbit span b, .rings i, .breathe, .plus, .bars i, .moon2, .pk i, .sw i, .px .tw),
[data-live]:not(.live) .bb::before, [data-live]:not(.live) .pulse::after { animation-play-state: paused; }

/* light rays from above the hero, swaying slowly */
.hero { overflow: hidden; }
.hero > .wrap { position: relative; z-index: 1; }
/* four soft searchlights from above the page, swaying slowly. Each beam is one radial gradient (bright at
   the top, fading out sideways and downwards), so neither the beams nor the group need a mask: the masks
   were what made the hero slow to composite. Only transform and opacity move. */
.rays { position: absolute; inset: 0 0 auto 0; height: 120vh; pointer-events: none; }
.rays i { position: absolute; top: -12%; width: 22rem; height: 125%; transform-origin: 50% 0;
    background: radial-gradient(50% 78% at 50% 0%, var(--ray) 0%, var(--ray) 18%, transparent 100%); }
.rays i:nth-child(1) { left: 2%; animation: sway-a 13s ease-in-out infinite alternate; }
.rays i:nth-child(2) { left: 24%; animation: sway-b 17s ease-in-out -4s infinite alternate; opacity: 0.8; }
.rays i:nth-child(3) { right: 22%; animation: sway-c 15s ease-in-out -7s infinite alternate; opacity: 0.8; }
.rays i:nth-child(4) { right: 0; animation: sway-d 19s ease-in-out -2s infinite alternate; }
@keyframes sway-a { from { transform: rotate(-26deg); } to { transform: rotate(-14deg); } }
@keyframes sway-b { from { transform: rotate(-12deg); opacity: 0.5; } to { transform: rotate(-3deg); opacity: 1; } }
@keyframes sway-c { from { transform: rotate(4deg); opacity: 1; } to { transform: rotate(13deg); opacity: 0.45; } }
@keyframes sway-d { from { transform: rotate(14deg); } to { transform: rotate(27deg); } }

/* the stage: cells of the grid flicker, light runs along its lines, a beam walks round the frame */
.stage { container-type: size; }
.flick, .beams { position: absolute; inset: 0; z-index: -1; pointer-events: none; }    /* no masks: cells and beams are placed in the lit middle instead */
.flick i { position: absolute; width: 47px; height: 47px; background: var(--cell); opacity: 0; animation: cell 6s ease-in-out infinite; }
@keyframes cell { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.beams i { position: absolute; }
.beams i.h { left: 0; height: 1px; width: 9rem; background: linear-gradient(90deg, transparent, var(--beamc), transparent); animation: run-x 7s linear infinite; }
.beams i.v { top: 0; width: 1px; height: 9rem; background: linear-gradient(180deg, transparent, var(--beamc), transparent); animation: run-y 7s linear infinite; }
@keyframes run-x { from { transform: translateX(-9rem); } to { transform: translateX(calc(100cqw + 9rem)); } }
@keyframes run-y { from { transform: translateY(-9rem); } to { transform: translateY(calc(100cqh + 9rem)); } }
/* light along the top edge of a frame: a short gradient that runs across. It used to be a huge
   conic layer turning under a mask, which cost more to composite than the rest of the hero. */
.bb { position: absolute; left: 1.5rem; right: 1.5rem; top: 0; z-index: 3; height: 1px; overflow: hidden; pointer-events: none; }
.bb::before { content: ""; position: absolute; top: 0; left: 0; width: 30%; height: 1px; background: linear-gradient(90deg, transparent, var(--beamc), transparent); animation: bb-run 7s linear infinite; }
.chart .bb::before { animation-duration: 10s; opacity: 0.7; }
@keyframes bb-run { from { transform: translateX(-100%); } to { transform: translateX(334%); } }
@keyframes spin { to { transform: rotate(1turn); } }

/* the phones breathe a little */
.phone { animation: bob 7s ease-in-out infinite; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.ph:nth-child(1) .phone { animation-duration: 8s; animation-delay: -3s; }
.ph:nth-child(3) .phone { animation-duration: 9s; animation-delay: -5s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
/* live messages added by the script */
.m.typing2 { display: flex; gap: calc(4 * var(--u)); padding: calc(11 * var(--u)) calc(13 * var(--u)); width: max-content; }
.m.typing2 i { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: var(--app-mu); animation: dot 0.9s ease-in-out infinite; }
.m.typing2 i:nth-child(2) { animation-delay: 0.15s; } .m.typing2 i:nth-child(3) { animation-delay: 0.3s; }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
.bump { animation: bump 0.45s var(--ease); }
.cr.lit { animation: flash 2.2s ease both; }


/* the chart is live: the end of the line pulses */
.pulse { position: absolute; right: -4px; top: calc(86.5% - 4px); width: 9px; height: 9px; border-radius: 50%; background: var(--ink); pointer-events: none; }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--ink); animation: pulse 2.2s ease-out infinite; }
@keyframes pulse { from { transform: scale(1); opacity: 0.8; } to { transform: scale(4.5); opacity: 0; } }
.pin-now { right: 1.4rem; }

/* closing: features orbit the icon, rings ripple out of it */
.orbits { position: relative; width: 24rem; max-width: 100%; aspect-ratio: 1; display: grid; place-items: center; margin-bottom: 0.5rem; }
.orbits > * { grid-area: 1 / 1; }
.orbit { --r: 7rem; position: relative; width: calc(2 * var(--r)); aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--line); animation: spin 36s linear infinite; }
.orbit.o2 { --r: 11rem; animation-duration: 54s; animation-direction: reverse; border-style: dashed; }
.orbit span { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.orbit span b { position: absolute; width: 2.6rem; height: 2.6rem; margin: -1.3rem; display: grid; place-items: center; border-radius: 50%; background: var(--panel); border: 1px solid var(--line-2); color: var(--ink); animation: spin 36s linear infinite reverse; }
.orbit.o2 span b { animation-duration: 54s; animation-direction: normal; width: 2.3rem; height: 2.3rem; margin: -1.15rem; color: var(--muted); }
.orbit span b svg { width: 1.1rem; height: 1.1rem; }
.o1 span:nth-child(1) { transform: rotate(0deg) translateX(7rem); } .o1 span:nth-child(2) { transform: rotate(90deg) translateX(7rem); }
.o1 span:nth-child(3) { transform: rotate(180deg) translateX(7rem); } .o1 span:nth-child(4) { transform: rotate(270deg) translateX(7rem); }
.o1 span > b { rotate: 0deg; } .o1 span:nth-child(2) > b { rotate: -90deg; } .o1 span:nth-child(3) > b { rotate: -180deg; } .o1 span:nth-child(4) > b { rotate: -270deg; }
.o2 span:nth-child(1) { transform: rotate(36deg) translateX(11rem); } .o2 span:nth-child(2) { transform: rotate(108deg) translateX(11rem); }
.o2 span:nth-child(3) { transform: rotate(180deg) translateX(11rem); } .o2 span:nth-child(4) { transform: rotate(252deg) translateX(11rem); }
.o2 span:nth-child(5) { transform: rotate(324deg) translateX(11rem); }
.o2 span:nth-child(1) > b { rotate: -36deg; } .o2 span:nth-child(2) > b { rotate: -108deg; } .o2 span:nth-child(3) > b { rotate: -180deg; }
.o2 span:nth-child(4) > b { rotate: -252deg; } .o2 span:nth-child(5) > b { rotate: -324deg; }
.rings { position: relative; width: 5rem; height: 5rem; }
.rings i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--line-2); animation: ring 4.5s ease-out infinite; }
.rings i:nth-child(2) { animation-delay: 1.5s; } .rings i:nth-child(3) { animation-delay: 3s; }
@keyframes ring { from { transform: scale(1); opacity: 0.9; } to { transform: scale(5.2); opacity: 0; } }
.end .orbits img.icon { position: relative; z-index: 1; }
@media (max-width: 40rem) {
    .orbits { width: 16rem; }
    .orbit { --r: 4.4rem; } .orbit.o2 { --r: 7rem; }
    .orbit span b { width: 2.2rem; height: 2.2rem; margin: -1.1rem; } .orbit.o2 span b { width: 2rem; height: 2rem; margin: -1rem; }
    .orbit span b svg { width: 0.95rem; height: 0.95rem; }
    .o1 span:nth-child(1) { transform: rotate(0deg) translateX(4.4rem); } .o1 span:nth-child(2) { transform: rotate(90deg) translateX(4.4rem); }
    .o1 span:nth-child(3) { transform: rotate(180deg) translateX(4.4rem); } .o1 span:nth-child(4) { transform: rotate(270deg) translateX(4.4rem); }
    .o2 span:nth-child(1) { transform: rotate(36deg) translateX(7rem); } .o2 span:nth-child(2) { transform: rotate(108deg) translateX(7rem); }
    .o2 span:nth-child(3) { transform: rotate(180deg) translateX(7rem); } .o2 span:nth-child(4) { transform: rotate(252deg) translateX(7rem); }
    .o2 span:nth-child(5) { transform: rotate(324deg) translateX(7rem); }
    .rings { width: 4rem; height: 4rem; }
}

@media (max-width: 60rem) {
    .links > a:not(.btn) { display: none; }
    .feats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .feat:nth-child(5) { border-left: 0; }
    .feat:nth-child(n + 5) { border-top: 1px solid var(--line); }
    .fig { padding: 1.5rem 1.25rem 1.75rem; }
    .deep-head { grid-template-columns: 1fr; }
    .cache-set { padding-inline: 1.25rem; }
    .foot .wrap { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 40rem) {
    .hero-head { grid-template-columns: 1fr; }
    .hero-cta { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .hero .ani, .js .stage { animation: none; opacity: 1; }
    .draw, .grow, .wheel-list, .js .reveal .fade { transition: none; }
    .js .reveal:not(.in) .draw { stroke-dashoffset: 0; }
    .js .reveal:not(.in) .grow { transform: none; }
    .js .reveal:not(.in) .wheel-list { transform: translateY(calc(var(--i, 13) * -3rem)); }
    .js .reveal .fade { opacity: 1; transform: none; }
    .phones, .ph { transition: none; }
    .js .ph:nth-child(1), .js .ph:nth-child(3), .js .gc > .g0 { animation: none; opacity: 1; transform: none; }
    .js .ph:nth-child(1), .js .ph:nth-child(3) { opacity: 0.92; }
    .js .tb { opacity: 0; animation: none; }
    .js .strip:not(.in) .feat > * { opacity: 1; transform: none; }
    .js #words .w { opacity: 1; }
    .pk i, .end.in img.icon, .end.in::before { animation: none !important; }
    .rv, .pin { transition: none; }
    .js .reveal:not(.in) .rv, .js .reveal:not(.in) .pin { transform: none; opacity: 1; }
    .btn::after { display: none; }
    .rays i, .flick i, .beams i, .bb::before, .phone, .pulse::after, .orbit, .orbit span b, .rings i, .breathe, .plus, .bars i, .moon2 { animation: none !important; }
    .bars { transition: none; } .js .reveal:not(.in) .bars { transform: none; }
    .qr-box .qr-in, .qr-box .qr-in::after { transition: none; }
    .acclist, .mosaic, .pg, .bul, .list2 .cr.gone, .stories.gone { transition: none; }
    .flick, .beams { display: none; }
}
/* ==== phones and tablets: the hero phones become a carousel ==== */
/* one phone in front plays its story, the others wait dimmed at the sides; the tabs show which story
   this is and fill up until the next one comes in */
.sw { display: none; }
@keyframes sw-run { to { transform: scaleX(1); } }
@media (max-width: 60rem) {
    /* the stage grows with its phone; the size container is only for the beams, which are off here */
    .stage { height: auto; container-type: normal; }
    .stage::after { display: none; }
    .phones { --pu: 0.95px; position: relative; left: 0; top: 0; translate: none; gap: 0; padding: 1.75rem 0 4.5rem; transition: none;
        overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
    .phones::-webkit-scrollbar { display: none; }
    /* room at both ends, so the first and the last phone can stand in the middle */
    .phones::before, .phones::after { content: ""; flex: 0 0 calc(50% - 150 * var(--pu) - 0.75rem); }
    .phones > .ph { flex: none; margin: 0; padding-inline: 0.75rem; scroll-snap-align: center; scroll-snap-stop: always; }
    .phones > .ph > .phone { --u: var(--pu); }
    .js .phones > .ph { animation: none; opacity: 0.3; transition: opacity 0.5s var(--ease); cursor: pointer; }
    .js .phones > .ph.on { opacity: 1; cursor: auto; }
    .phones > .ph:not(.on) > .phone { animation-play-state: paused; }
    .js .sw { position: absolute; z-index: 3; left: 50%; bottom: 1.1rem; translate: -50% 0; display: flex; gap: 0.15rem; padding: 0.22rem; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg-2); }
    .sw button { position: relative; overflow: hidden; padding: 0.55rem 0.85rem; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 500 0.8rem/1 var(--font); white-space: nowrap; cursor: pointer; transition: color 0.3s, background-color 0.3s; }
    .sw button.on { color: var(--ink); background: var(--line-2); }
    .sw i { position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.2rem; height: 1px; background: var(--ink); opacity: 0.55; transform: scaleX(0); transform-origin: 0 50%; }
    .sw .on i { animation: sw-run linear forwards; }
}
@media (max-width: 40rem) {
    .phones { --pu: 0.86px; padding-top: 1.25rem; }
    .sw button { padding-inline: 0.7rem; font-size: 0.76rem; }
    .sw i { left: 0.7rem; right: 0.7rem; }
}
@media (prefers-reduced-motion: reduce) {
    .sw i { display: none; }
    .js .phones > .ph { transition: none; }
}
/* ==== phones: one column, shorter. Every section keeps what it says; the layout is made for a thumb ==== */
@media (max-width: 40rem) {
    /* the first screen is a poster: a dithered moon, the title in the middle, one line of text and two
       badges, nothing else. The phones come with the first scroll. The rest of the hero text is what the
       three figures below say anyway. */
    .hero { padding-top: 0; }
    .hero-head { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; min-height: calc(100svh - 4rem); padding-block: 1.25rem 3.5rem; }
    .px { display: block; position: relative; width: min(100%, 22rem, 52svh); aspect-ratio: 360 / 280; margin-top: auto; color: var(--ink); }
    .px svg { position: absolute; inset: 0; width: 100%; height: 100%; }
    .hero-head > div { margin-bottom: auto; }
    .hero h1 { margin-top: 0.75rem; font-size: clamp(2.1rem, 10.4vw, 2.75rem); line-height: 1.04; }
    .br-m { display: inline; }
    .h-mu { color: var(--faint); }
    .hero-sub { margin: 1rem auto 0; max-width: 22rem; font-size: 1rem; text-wrap: balance; }
    .hero-sub .more { display: none; }
    /* two badges, the way stores draw theirs: a small caption over a name */
    .hero-cta { justify-content: center; gap: 0.6rem; margin-top: 1.75rem; flex-wrap: nowrap; }
    .hero-cta .btn-lg, .hero-cta .store { flex: none; height: 3.15rem; border-radius: 0.8rem; white-space: nowrap; }
    .hero-cta .btn-lg { gap: 0.6rem; padding: 0 1.1rem 0 0.9rem; }
    .hero-cta .btn-lg svg { width: 1.25rem; height: 1.25rem; }
    .bt { display: grid; text-align: left; font-size: 1.05rem; font-weight: 560; line-height: 1.1; letter-spacing: -0.01em; }
    .bt small, .store small { font: 500 0.6rem/1.25 var(--font); text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.72; }
    .hero-cta .store { flex-direction: column; justify-content: center; align-items: flex-start; gap: 0.05rem; padding: 0 1.1rem; border: 1px solid var(--line-2); color: var(--ink); }
    .store b { font-size: 1.05rem; font-weight: 560; line-height: 1.1; letter-spacing: -0.01em; }
    .store small { color: var(--muted); opacity: 1; }
    .store:hover b { text-decoration: none; }
    .down { display: block; position: absolute; left: 50%; bottom: 1rem; translate: -50% 0; width: 1.25rem; height: 1.25rem; color: var(--faint); }
    .js .px { opacity: 0; animation: px-in 1.6s var(--ease) 0.1s forwards; }
    .px .tw { animation: tw 3.2s ease-in-out infinite alternate; }
    .px .tw2 { animation-duration: 4.1s; animation-delay: -2s; }
    .stage { margin-top: 0; }

    .strip { margin-top: 2.5rem; }
    .strip-head { display: block; margin-bottom: 0.9rem; }
    .strip-head p { margin-top: 0.35rem; }
    .feat { gap: 0.5rem; padding: 0.95rem 0.2rem 0.85rem; font-size: 0.7rem; line-height: 1.25; }
    .feat svg { width: 1.25rem; height: 1.25rem; }

    .statement { padding-block: 3.75rem 2.25rem; }
    .statement p { font-size: 1.5rem; line-height: 1.22; }

    /* the three figures become rows: the drawing on the left, the words on the right */
    .figs { grid-template-columns: 1fr; }
    .fig { grid-template-columns: 6.75rem minmax(0, 1fr); column-gap: 1.1rem; row-gap: 0.3rem; align-items: center; padding: 1.25rem 0; }
    .fig + .fig { border-left: 0; border-top: 1px solid var(--line); }
    .fart { grid-row: 1 / 3; width: 100%; margin: 0; }
    .fig svg { stroke-width: 1.7; }
    .fig h3 { align-self: end; font-size: 0.98rem; }
    .fig p { align-self: start; font-size: 0.86rem; line-height: 1.45; }

    .deep { padding-top: 4rem; }
    .deep-head { gap: 0.9rem; margin-bottom: 1.5rem; }
    .deep-head h2 { font-size: 2rem; }
    .deep-head p { font-size: 1rem; padding-top: 0; }
    .deep-head .mono { margin-bottom: 0.7rem; }
    .chart { padding: 1.1rem 1.1rem 1rem; }
    .chart-top { gap: 0.6rem; margin-bottom: 0.9rem; }
    .legend { flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.76rem; }
    .plot { height: 11rem; }

    /* the cache settings, and under them the wheel lying on its side */
    .cache { grid-template-columns: 1fr; min-height: 0; }
    .cache-set { padding: 1.1rem 1.1rem 0.5rem; border-right: 0; border-bottom: 1px solid var(--line); }
    .set { padding: 0.65rem 0; }
    .set i { width: 2rem; height: 2rem; }
    .wheel { padding: 0.9rem 0; }
    .wheel::before { left: 50%; right: auto; width: 6.5rem; height: 2.75rem; translate: -50% -50%; }
    .wheel-mask { height: 2.75rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); }
    .wheel-list { display: flex; width: max-content; top: 0; left: 50%; right: auto; transform: translateX(calc(-3.25rem - var(--i, 13) * 6.5rem)); }
    .js .reveal:not(.in) .wheel-list { transform: translateX(-3.25rem); }
    .wheel-list span { flex: none; width: 6.5rem; height: 2.75rem; font-size: 1rem; }

    .end { margin-top: 4rem; }
    .end .wrap { padding-block: 2.75rem 3.25rem; }
    .end img.icon { width: 4rem; height: 4rem; border-radius: 1rem; }
    .end h2 { margin-top: 1.25rem; font-size: 2.1rem; }
    .end-cta { margin-top: 1.5rem; }

    .foot .wrap { gap: 1.5rem 1rem; padding-block: 2.25rem 1.5rem; }
    .foot .wrap > :first-child { grid-column: 1 / -1; }
    .foot .wrap > :nth-child(3) { grid-row: span 2; }    /* Документы on the right; Связь goes under Приложение */
}
@keyframes px-in { to { opacity: 1; } }
@keyframes tw { from { opacity: 1; } to { opacity: 0.12; } }
@media (max-width: 40rem) and (prefers-reduced-motion: reduce) {
    .js .px { opacity: 1; animation: none; }
    .px .tw { animation: none; }
    .js .reveal:not(.in) .wheel-list { transform: translateX(calc(-3.25rem - var(--i, 13) * 6.5rem)); }
}
/* ==== cookie consent ==== */
/* a bar at the bottom centre, never over the whole page: text on the left, the two buttons on the right. Accept and Decline weigh the same: saying no
   is as easy as saying yes, and nothing is loaded before the answer */
.cc { position: fixed; z-index: 50; left: 50%; bottom: 1.25rem; translate: -50% 0; display: flex; align-items: center; gap: 1.5rem; width: min(46rem, calc(100% - 2.5rem)); padding: 1rem 1rem 1rem 1.4rem; border: 1px solid var(--line-2); border-radius: 1rem;
    background: var(--panel); box-shadow: 0 1.5rem 3rem -1.25rem rgba(0, 0, 0, 0.55); font-size: 0.86rem; line-height: 1.5; color: var(--muted);
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.cc[hidden] { display: none; }
.cc.out { opacity: 0; transform: translateY(1rem); }
.cc a { color: var(--ink); text-underline-offset: 0.2em; }
.cc-b { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.cc-b button { height: 2.5rem; padding-inline: 1.4rem; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink); font: 500 0.86rem/1 var(--font); cursor: pointer; transition: background-color 0.2s, border-color 0.2s; }
.cc-b button:hover { border-color: var(--ink); }
.foot .cc-open { display: block; margin: 0 0 0.5rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.foot .cc-open:hover { color: var(--ink); }
@media (max-width: 40rem) {
    .cc { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; translate: none; width: auto; display: block; padding: 1.1rem 1.1rem 1rem; }
    .cc-b { margin-top: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) { .cc { transition: none; } }