/* elevo.click
   The brand's black, its blue and white; green only for "done", amber only
   for "waiting". Sora for what is said loud, Hanken Grotesk for the rest.
   The one piece of the app that the page borrows everywhere is its sunken
   panel: dark under the upper edge, a lip of light along the foot. */

@font-face {
  font-family: "Sora";
  src: url("/fonts/sora-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 800;
  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;
}
@font-face {
  font-family: "Sora";
  src: url("/fonts/sora-latin-ext-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  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;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-latin-ext-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-latin-wght-italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  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;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-latin-ext-wght-italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #030303;
  --floor: #0a0b11;
  --paper: #f4f5f9;
  --quiet: #a3a6b4;
  --faint: #6d707e;
  --blue: #0084fd;
  --green: #3dcc78;
  --amber: #ffb83d;
  --hair: rgba(255, 255, 255, 0.09);
  --card: rgba(255, 255, 255, 0.055);
  --loud: "Sora", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --plain: "Hanken Grotesk", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --page: 1160px;
  --gutter: clamp(20px, 4.4vw, 56px);
  color-scheme: dark;
}

/* Sora and Hanken Grotesk have no Cyrillic, Japanese, Korean or Chinese
   letters: those languages are set in the face of the system itself, which
   is the one its readers know best. */
:lang(ru), :lang(uk) {
  --loud: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --plain: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
:lang(ja) {
  --loud: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif;
  --plain: var(--loud);
}
:lang(ko) {
  --loud: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --plain: var(--loud);
}
:lang(zh-Hans) {
  --loud: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --plain: var(--loud);
}
:lang(zh-Hant-TW) {
  --loud: -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei UI", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  --plain: var(--loud);
}
:lang(zh-Hant-HK) {
  --loud: -apple-system, BlinkMacSystemFont, "PingFang HK", "PingFang TC", "Microsoft JhengHei UI", "Microsoft JhengHei", "Noto Sans HK", sans-serif;
  --plain: var(--loud);
}
/* The names of the languages, each in its own letters, wherever they show. */
[lang="en"], [lang="pt"], [lang="es"], [lang="fr"], [lang="de"], [lang="it"], [lang="tr"], [lang="sk"] {
  --loud: "Sora", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --plain: "Hanken Grotesk", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 400 1.0625rem/1.6 var(--plain);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

html.turning body { opacity: 0; }
body { transition: opacity 0.18s ease-out; }
html.sheet-open { overflow: hidden; }

h1, h2, h3 { font-family: var(--loud); margin: 0; text-wrap: balance; }
:lang(ja) h1, :lang(ko) h1, :lang(zh) h1, :lang(ja) h2, :lang(ko) h2, :lang(zh) h2 { word-break: keep-all; line-break: strict; letter-spacing: -0.01em; }
:lang(ru) h1, :lang(uk) h1 { letter-spacing: -0.025em; }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; height: auto; }

[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 30; padding: 10px 16px; border-radius: 10px;
  background: var(--blue); color: #fff; text-decoration: none; font-weight: 600;
}
.skip:focus { top: 12px; }

/* The top of the page */

.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px var(--gutter);
  background: rgba(3, 3, 3, 0.72);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.top.scrolled { border-bottom-color: var(--hair); }

.brand { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.brand-mark { width: 44px; height: 29px; }
.brand-word { width: 78px; height: 26px; }
.brand.small .brand-word { width: 66px; height: 22px; }

.top-links { display: flex; align-items: center; gap: clamp(14px, 2.6vw, 30px); font-size: 0.97rem; }
.top-links a { color: var(--quiet); text-decoration: none; transition: color 0.15s; }
.top-links a:hover { color: #fff; }
.top-links a.top-download {
  color: #fff; background: var(--blue); padding: 7px 16px; border-radius: 999px; font-weight: 600;
}
.top-links a.top-download:hover { background: #2a98ff; }

/* Buttons */

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px 20px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06); color: #fff;
  font: 600 1rem var(--plain); text-decoration: none; cursor: pointer; white-space: nowrap; flex: none;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.button:hover { background: rgba(255, 255, 255, 0.11); border-color: rgba(255, 255, 255, 0.26); }
.button:active { transform: translateY(1px); }
.button:disabled { opacity: 0.45; cursor: default; }
button { font-family: inherit; }
.button.primary { background: var(--blue); border-color: transparent; }
.button.primary:hover { background: #2a98ff; }
.button.large { padding: 15px 28px; font-size: 1.08rem; }
.button.small { padding: 7px 14px; font-size: 0.9rem; }
.button .version { font-weight: 400; opacity: 0.8; }

/* The hero */

.hero { padding: clamp(32px, 6vh, 68px) var(--gutter) 0; max-width: calc(var(--page) + 2 * var(--gutter)); margin: 0 auto; }

/* The line across the top, what it means on the left, the way in on the
   right: short, so the demonstration under it is on the first screen. */
.hero-words { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(28px, 5vw, 72px); align-items: start; }
.hero h1 {
  grid-column: 1 / -1;
  font-weight: 800;
  font-size: clamp(2.6rem, 6.7vw, 5.5rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.hero-lead { margin-top: 22px; max-width: 31em; font-size: clamp(1.08rem, 1.45vw, 1.26rem); line-height: 1.5; color: #d5d7e1; }
.hero-actions { margin-top: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.hero-fine { color: var(--quiet); font-size: 0.95rem; line-height: 1.45; max-width: 19em; }

.hero-claim {
  margin: clamp(26px, 4vw, 44px) 0 0;
  text-align: center; color: var(--quiet); font-style: italic; font-size: 1.02rem;
}

/* The demonstration */

.stage {
  position: relative;
  margin-top: clamp(40px, 5vw, 64px);
  display: grid; grid-template-columns: minmax(0, 384px) minmax(60px, 1fr) minmax(0, 384px);
  align-items: start; justify-content: space-between;
  isolation: isolate;
}
.stage::before {
  /* A breath of the brand's blue running into violet behind the two panels. */
  content: ""; position: absolute; z-index: -1; inset: -16% -10% -22%;
  background:
    radial-gradient(42% 52% at 22% 46%, rgba(0, 132, 253, 0.17), transparent 70%),
    radial-gradient(40% 52% at 80% 56%, rgba(108, 70, 255, 0.14), transparent 70%);
  pointer-events: none;
}

.device-name { margin: 0 0 12px 6px; color: var(--faint); font-size: 0.92rem; }
.device[data-side="to"] .device-name { text-align: right; margin: 0 6px 12px 0; }

.panel {
  position: relative; border-radius: 26px; padding: 14px;
  display: flex; flex-direction: column; gap: 11px;
  background: linear-gradient(135deg, #0b0d15, #0c0b14 60%, #0e0b15);
  /* the app's own edge: a frame dark above and bright along the foot, and
     the ground dropping away inside it */
  box-shadow:
    inset 0 0 0 2.5px #17181d,
    inset 0 3px 0 0 rgba(0, 0, 0, 0.9),
    inset 0 -2.5px 0 0 rgba(255, 255, 255, 0.22),
    inset 0 26px 34px -14px rgba(0, 0, 0, 0.95),
    inset 0 0 26px 6px rgba(0, 0, 0, 0.72),
    0 34px 70px -24px rgba(0, 0, 0, 0.9);
  min-height: 318px;
  font-size: 13px; line-height: 1.3;
  user-select: none;
}

.panel-head { display: flex; align-items: center; gap: 10px; padding: 4px 4px 2px; }
.panel-mark { width: 44px; height: 29px; color: #fff; flex: none; }
.panel-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.panel-word { width: 58px; height: 19px; color: #fff; }
.panel-slogan { color: var(--quiet); font-size: 10.5px; font-style: italic; white-space: nowrap; }
.panel-tools { margin-left: auto; display: flex; gap: 7px; }
.panel-tools i { width: 24px; height: 24px; border-radius: 7px; background: rgba(255, 255, 255, 0.08); }
.panel-tools i:nth-child(2), .panel-tools i:nth-child(1) { background: linear-gradient(#2c9bff, #0a6fe0); }
.panel-tools i:nth-child(1) { opacity: 0.9; }

.card {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 13px; border-radius: 16px;
  background: var(--card); border: 1px solid rgba(255, 255, 255, 0.08);
}
.card[hidden] { display: none; }
.card.dashed { border-style: dashed; border-color: rgba(255, 255, 255, 0.18); transition: background 0.25s, border-color 0.25s; }
.card.dashed.lit { background: rgba(0, 132, 253, 0.16); border-color: var(--blue); }
.tile { width: 34px; height: 34px; flex: none; opacity: 0.62; transition: opacity 0.3s, transform 0.3s; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); }
.tile.lit { opacity: 1; }
.card.dashed.lit .tile { transform: scale(1.08); }
.card-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.card-words strong { font: 600 14.5px var(--plain); color: #fff; }
.card-words > span { color: var(--quiet); font-size: 11.5px; }

.field-line { display: flex; gap: 8px; margin-top: 5px; }
.field {
  flex: 1; min-width: 0; height: 30px; display: flex; align-items: center; padding: 0 10px;
  border-radius: 9px; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.1);
  font: 12px ui-monospace, "SF Mono", Menlo, monospace; white-space: nowrap; overflow: hidden;
  transition: border-color 0.2s;
}
.field em { font-style: normal; color: var(--faint); overflow: hidden; text-overflow: ellipsis; }
.field b { font-weight: 400; color: #fff; display: none; overflow: hidden; text-overflow: ellipsis; }
.field.filled { border-color: rgba(255, 255, 255, 0.3); }
.field.filled em { display: none; }
.field.filled b { display: block; }

.pill {
  flex: none; height: 24px; display: inline-flex; align-items: center; padding: 0 11px; border-radius: 999px;
  background: var(--blue); color: #fff; font: 600 11.5px var(--plain); white-space: nowrap;
  transition: transform 0.15s, background 0.2s, opacity 0.2s;
}
.pill.solid { height: 30px; padding: 0 15px; font-size: 12.5px; opacity: 0.4; }
.pill.solid.ready { opacity: 1; }
.pill.pressed { transform: scale(0.94); background: #2a98ff; }

.card.row { flex-direction: column; align-items: stretch; gap: 9px; animation: arrive 0.35s ease-out; }
@keyframes arrive { from { opacity: 0; transform: translateY(6px); } }
.row-top { display: flex; align-items: flex-start; gap: 10px; }
.badge {
  width: 28px; height: 28px; border-radius: 50%; flex: none; background: rgba(0, 132, 253, 0.2); position: relative;
  transition: background 0.3s;
}
.badge::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 9px; height: 9px;
  border: solid var(--blue); border-width: 2px 0 0 2px; transform: translateY(2px) rotate(45deg); transition: border-color 0.3s;
}
.badge.down::after { transform: translateY(-2px) rotate(225deg); }
.badge.waiting { background: rgba(255, 184, 61, 0.2); }
.badge.waiting::after { border-color: var(--amber); }
.badge.done { background: rgba(61, 204, 120, 0.2); }
.badge.done::after { border-color: var(--green); border-width: 0 2px 2px 0; width: 6px; height: 11px; transform: translateY(-1px) rotate(45deg); }
.row-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row-words strong { font: 600 13px var(--plain); color: #fff; }
.row-words span { color: var(--quiet); font-size: 11.5px; font-variant-numeric: tabular-nums; min-height: 15px; transition: color 0.2s; }
.row-words span.waiting { color: var(--amber); }

.bar { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #2b9aff, var(--blue)); transition: background 0.3s; }
.bar i.waiting { background: var(--amber); }
.bar i.done { background: var(--green); }
.bar.big { height: 8px; }

.row-code { display: flex; align-items: center; gap: 8px; }
.row-code code {
  flex: 1; min-width: 0; height: 24px; display: flex; align-items: center; padding: 0 10px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.36); color: var(--quiet); font: 10.5px ui-monospace, "SF Mono", Menlo, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row-code[hidden] { display: none; }

.card.awake { margin-top: auto; padding: 11px 13px; }
.card.awake .tile { width: 30px; height: 30px; }
.switch { margin-left: auto; width: 38px; height: 22px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); position: relative; flex: none; transition: background 0.25s; }
.switch i { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.25s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
.switch.on { background: var(--blue); }
.switch.on i { transform: translateX(16px); }

/* The moment it arrives, as the app shows it: the elephant in its circle,
   a green light going round. */
.arrived {
  position: absolute; inset: 3px; border-radius: 23px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: rgba(8, 9, 14, 0.88); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  animation: settle 0.45s cubic-bezier(0.2, 1.3, 0.4, 1);
}
.arrived[hidden] { display: none; }
@keyframes settle { from { opacity: 0; transform: scale(0.92); } }
.halo { position: relative; width: 84px; height: 84px; border-radius: 50%; background: #030303; display: grid; place-items: center; margin-bottom: 10px; }
.halo::before {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 38%, rgba(61, 204, 120, 0.55) 74%, var(--green) 93%, #a8ffcc 99%, transparent);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.6px));
  animation: round 1.8s linear infinite;
  filter: drop-shadow(0 0 6px rgba(61, 204, 120, 0.8));
}
.halo::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1.5px solid rgba(61, 204, 120, 0.2); }
@keyframes round { to { transform: rotate(360deg); } }
.halo svg { width: 52px; height: 34px; color: #fff; }
.arrived strong { font: 700 20px var(--loud); }
.arrived em { color: var(--quiet); font-size: 12.5px; }

/* What crosses from one panel to the other */
.wire { position: relative; align-self: stretch; min-height: 60px; }
.wire-line {
  position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 6px, transparent 6px 12px);
}
.wire-flow {
  position: absolute; left: 6px; right: 6px; top: calc(50% - 1px); height: 4px; border-radius: 4px; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--blue) 30%, #7cc0ff 50%, var(--blue) 70%, transparent) 0 0 / 60% 100% no-repeat;
  transition: opacity 0.3s;
}
.wire-flow.on { opacity: 1; animation: flow 1.1s linear infinite; }
.wire-flow.waiting { opacity: 0.25; animation-play-state: paused; }
@keyframes flow { from { background-position: -150% 0; } to { background-position: 250% 0; } }
.wire-note {
  position: absolute; left: 0; right: 0; top: calc(50% + 14px); text-align: center; color: var(--faint); font-size: 0.82rem;
  min-height: 1.2em; transition: color 0.2s;
}
.wire-note.waiting { color: var(--amber); }

.chip {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; opacity: 0;
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 11px; border-radius: 12px;
  background: #1b1d27; border: 1px solid rgba(255, 255, 255, 0.16); color: #fff; font: 600 12.5px var(--plain); white-space: nowrap;
  box-shadow: 0 14px 30px -8px rgba(0, 0, 0, 0.7);
  will-change: transform, opacity;
}
.chip::before { content: ""; width: 13px; height: 16px; border-radius: 3px; background: linear-gradient(#fff, #cfd4e2); clip-path: polygon(0 0, 68% 0, 100% 26%, 100% 100%, 0 100%); }
.chip.code { font: 11.5px ui-monospace, "SF Mono", Menlo, monospace; color: #cfe6ff; background: #0d2440; border-color: rgba(0, 132, 253, 0.6); }
.chip.code::before { display: none; }

.confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }

/* Sections under the hero */

.between, .steps, .rest, .questions, .get, .text-page {
  max-width: calc(var(--page) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter);
}
.between { padding-top: clamp(96px, 13vw, 176px); }
.between h2, .steps h2, .rest h2, .questions h2, .get h2 {
  font-weight: 700; font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1.08; letter-spacing: -0.03em; max-width: 18em;
}

.show {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 6vw, 88px); align-items: center;
  padding: clamp(40px, 6vw, 72px) 0; border-top: 1px solid var(--hair);
}
.between h2 + .show { margin-top: clamp(36px, 5vw, 60px); }
.show h3 { font-weight: 700; font-size: clamp(1.3rem, 2.2vw, 1.7rem); letter-spacing: -0.02em; line-height: 1.15; }
.show-words p { margin-top: 14px; color: var(--quiet); max-width: 31em; }

.show-figure {
  border-radius: 24px; padding: clamp(20px, 3vw, 34px); min-height: 250px;
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
  background: linear-gradient(135deg, #0a0c13, #0c0b13);
  box-shadow:
    inset 0 0 0 2px #15161b,
    inset 0 2.5px 0 0 rgba(0, 0, 0, 0.9),
    inset 0 -2px 0 0 rgba(255, 255, 255, 0.17),
    inset 0 22px 30px -14px rgba(0, 0, 0, 0.9),
    inset 0 0 22px 4px rgba(0, 0, 0, 0.6);
}
.figure-key { display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--quiet); font-size: 0.88rem; }
.key { display: inline-flex; align-items: center; gap: 8px; }
.key::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--blue); }
.key.relayed::before { background: transparent; border: 1.5px dashed #8f7bff; }
.key.again::before { background: var(--amber); }

/* 1. straight there */
[data-figure="direct"] svg { width: 100%; height: auto; overflow: visible; }
[data-figure="direct"] .node { fill: #151824; stroke: rgba(255, 255, 255, 0.2); stroke-width: 1.5; }
[data-figure="direct"] .direct-path { stroke: var(--blue); stroke-width: 2.5; fill: none; stroke-linecap: round; }
[data-figure="direct"] .relay-path { stroke: #8f7bff; stroke-width: 2; fill: none; stroke-dasharray: 5 7; stroke-linecap: round; opacity: 0.55; }
[data-figure="direct"] .relay-node rect:first-child { fill: #151824; stroke: rgba(143, 123, 255, 0.6); stroke-width: 1.5; }
[data-figure="direct"] .relay-node path { fill: none; stroke: #b9adff; stroke-width: 1.8; }
[data-figure="direct"] .relay-node .lock { fill: #b9adff; stroke: none; }
[data-figure="direct"] .packet { fill: #fff; opacity: 0; }
[data-figure="direct"] .packet.direct { offset-path: path("M70 120 L350 120"); filter: drop-shadow(0 0 6px var(--blue)); }
[data-figure="direct"] .packet.relayed { offset-path: path("M70 120 C 130 20, 290 20, 350 120"); filter: drop-shadow(0 0 6px #8f7bff); }
[data-figure="direct"].play .packet.direct { animation: travel 6s cubic-bezier(0.5, 0, 0.5, 1) infinite; }
[data-figure="direct"].play .packet.relayed { animation: travel-relay 6s cubic-bezier(0.5, 0, 0.5, 1) infinite; }
[data-figure="direct"].play .direct-path { animation: path-direct 6s linear infinite; }
[data-figure="direct"].play .relay-path { animation: path-relay 6s linear infinite; }
@keyframes travel { 0% { offset-distance: 0%; opacity: 0; } 4% { opacity: 1; } 26% { offset-distance: 100%; opacity: 1; } 30%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes travel-relay { 0%, 52% { offset-distance: 0%; opacity: 0; } 56% { opacity: 1; } 88% { offset-distance: 100%; opacity: 1; } 92%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes path-direct { 0%, 40% { opacity: 1; } 48%, 94% { opacity: 0.14; } 100% { opacity: 1; } }
@keyframes path-relay { 0%, 44% { opacity: 0.3; } 52%, 92% { opacity: 1; } 100% { opacity: 0.3; } }

/* 2. where it stopped */
.resume { display: flex; flex-direction: column; gap: 12px; }
.resume-line { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.resume-line strong { font: 600 1.05rem var(--plain); }
.resume-line span { color: var(--quiet); font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.resume-line span.waiting { color: var(--amber); }
.resume-line span.done { color: var(--green); }
.resume-line.small span { font-size: 0.86rem; }

/* 3. checked */
.blocks { display: grid; grid-template-columns: repeat(16, 1fr); gap: 5px; }
.blocks i { aspect-ratio: 1; border-radius: 4px; background: rgba(255, 255, 255, 0.07); transition: background 0.25s, transform 0.25s; }
.blocks i.kept { background: var(--blue); }
.blocks i.again { background: var(--amber); transform: scale(0.8); }

/* 4. as big as it is */
.trees { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.tree { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 0.9rem; }
.tree li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 11px 7px 26px; border-radius: 9px; background: rgba(255, 255, 255, 0.05); white-space: nowrap; }
.tree li.folder { padding-left: 11px; font-weight: 600; background: rgba(0, 132, 253, 0.16); }
.tree li span { color: var(--faint); font-variant-numeric: tabular-nums; }
.tree[data-part="tree-to"] li { opacity: 0; transform: translateX(-10px); transition: opacity 0.4s, transform 0.4s; }
.tree[data-part="tree-to"] li.here { opacity: 1; transform: none; }
.trees-arrow { width: 26px; height: 2px; background: var(--blue); border-radius: 2px; position: relative; }
.trees-arrow::after { content: ""; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border: solid var(--blue); border-width: 2px 2px 0 0; transform: rotate(45deg); }

/* Three moves */
.steps { padding-top: clamp(72px, 10vw, 136px); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(16px, 4vw, 56px); align-items: center; }
/* The picture has no edge of its own: it fades into the page. A little of it
   is let run past the column so the elephant, not its margin, fills it. */
.steps-art { display: block; width: 116%; max-width: none; margin: -6% -8%; pointer-events: none; user-select: none; }
.steps ol { list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; display: flex; flex-direction: column; counter-reset: move; border-bottom: 1px solid var(--hair); }
.steps li { counter-increment: move; border-top: 1px solid var(--hair); padding: 20px 0 22px; display: grid; grid-template-columns: clamp(44px, 5vw, 64px) minmax(0, 1fr); column-gap: 8px; }
.steps li::before { content: counter(move); grid-row: 1 / span 2; font: 800 clamp(2.2rem, 3.6vw, 3rem)/1 var(--loud); color: var(--blue); letter-spacing: -0.04em; }
.steps h3 { font-weight: 600; font-size: 1.2rem; letter-spacing: -0.01em; }
.steps li p { margin-top: 6px; color: var(--quiet); }

/* The rest of it */
.rest { padding-top: clamp(88px, 12vw, 160px); }
.rest dl { margin: clamp(28px, 4vw, 48px) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 6vw, 88px); }
.rest dl > div { padding: 22px 0; border-top: 1px solid var(--hair); }
.rest dt { font: 600 1.1rem var(--loud); letter-spacing: -0.01em; }
.rest dd { margin: 6px 0 0; color: var(--quiet); max-width: 30em; }

/* Questions */
.questions { padding-top: clamp(88px, 12vw, 160px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.questions-list { border-bottom: 1px solid var(--hair); }
.questions details { border-top: 1px solid var(--hair); }
.questions summary {
  list-style: none; cursor: pointer; padding: 21px 44px 21px 0; position: relative;
  font: 600 1.12rem var(--loud); letter-spacing: -0.01em;
}
.questions summary::-webkit-details-marker { display: none; }
.questions summary::before, .questions summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 15px; height: 2px; border-radius: 2px; background: var(--quiet); transition: transform 0.2s, background 0.2s;
}
.questions summary::after { transform: rotate(90deg); }
.questions details[open] summary::after { transform: rotate(0deg); }
.questions summary:hover::before, .questions summary:hover::after { background: #fff; }
.questions details p { padding: 0 44px 24px 0; color: var(--quiet); max-width: 40em; }

/* Get it */
.get { padding-top: clamp(96px, 13vw, 176px); padding-bottom: clamp(72px, 9vw, 120px); }
.get-art { display: block; width: 100%; border-radius: 22px; }
.get-words { margin-top: clamp(36px, 5vw, 60px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0 clamp(24px, 5vw, 72px); align-items: start; }
.platforms { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--hair); }
.platforms li { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; border-top: 1px solid var(--hair); }
.platforms li div { display: flex; flex-direction: column; gap: 2px; }
.platforms strong { font: 600 1.2rem var(--loud); letter-spacing: -0.01em; }
.platforms li div span { color: var(--quiet); font-size: 0.97rem; }
.platforms li.later strong { color: var(--quiet); }
.platforms li { min-height: 86px; }
.get-free { margin-top: 12px; color: var(--quiet); max-width: 18em; }
.get-fine { grid-column: 2; margin-top: 18px; color: var(--faint); font-size: 0.92rem; max-width: 40em; }

/* The foot of the page: small print first, then where things are, then who
   and in which language. */
.foot { margin-top: clamp(24px, 4vw, 48px); background: #09090b; border-top: 1px solid var(--hair); color: var(--faint); font-size: 0.75rem; line-height: 1.45; }
.foot-inner { max-width: calc(var(--page) + 2 * var(--gutter)); margin: 0 auto; padding: 22px var(--gutter) 26px; }
.foot-notes { padding-bottom: 16px; border-bottom: 1px solid var(--hair); display: flex; flex-direction: column; gap: 6px; max-width: none; }
.foot-directory { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 240px)); gap: 20px clamp(24px, 6vw, 88px); padding: 24px 0 26px; border-bottom: 1px solid var(--hair); }
.foot-directory h3 { font: 600 0.75rem var(--plain); color: var(--paper); letter-spacing: 0; margin-bottom: 10px; }
.foot-directory ul, .foot-legal { list-style: none; margin: 0; padding: 0; }
.foot-directory li + li { margin-top: 8px; }
.foot a { color: var(--quiet); text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.foot-base { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; padding-top: 16px; }
.foot-rights { margin-right: 4px; }
.foot-legal { display: flex; flex-wrap: wrap; margin-right: auto; }
.foot-legal li + li { margin-left: 12px; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, 0.2); }
.foot-language {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px; margin: -6px -12px -6px 0;
  background: none; border: 0; border-radius: 999px; color: var(--quiet); font: inherit; cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.foot-language:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.globe { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; }

/* The sheets: the download and the languages */
.sheet {
  width: min(440px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); margin: auto; padding: 44px 36px 30px;
  border: 0; border-radius: 28px; overflow: auto; overscroll-behavior: contain;
  background: linear-gradient(160deg, #17181d, #101116 60%); color: var(--paper); text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 40px 90px -20px rgba(0, 0, 0, 0.9);
}
.sheet.wide { width: min(680px, calc(100vw - 28px)); padding: 46px 30px 30px; }
.sheet::backdrop { background: rgba(0, 0, 0, 0.62); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.sheet[open] { animation: sheet-in 0.34s cubic-bezier(0.2, 0.9, 0.25, 1); }
.sheet[open]::backdrop { animation: veil-in 0.3s ease-out; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(14px) scale(0.975); } }
@keyframes veil-in { from { opacity: 0; } }
.sheet-close {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.09); color: var(--quiet); cursor: pointer; display: grid; place-items: center;
  transition: background 0.15s, color 0.15s;
}
[dir="rtl"] .sheet-close { right: auto; left: 14px; }
.sheet-close:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.sheet-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.sheet-mark { width: 62px; height: 41px; color: #fff; margin-bottom: 18px; }
.sheet h2 { font-weight: 700; font-size: 1.6rem; line-height: 1.12; letter-spacing: -0.025em; }
.sheet-lead { margin-top: 10px; color: var(--quiet); font-size: 1rem; line-height: 1.45; }
.sheet form, .sheet-done { display: flex; flex-direction: column; align-items: center; }

.systems { margin: 22px 0 0; padding: 4px; border: 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-radius: 14px; background: rgba(0, 0, 0, 0.36); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), inset 0 -1px 0 rgba(255, 255, 255, 0.06); }
.systems label { position: relative; cursor: pointer; }
.systems input { position: absolute; inset: 0; opacity: 0; cursor: inherit; }
.systems span { display: flex; flex-direction: column; justify-content: center; min-height: 46px; padding: 6px 10px; border-radius: 10px; color: var(--quiet); transition: background 0.2s, color 0.2s; }
.systems strong { font: 600 0.98rem var(--plain); }
.systems em { display: none; font-style: normal; font-size: 0.74rem; color: var(--faint); }
.systems input:checked + span { background: rgba(255, 255, 255, 0.13); color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.systems input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 1px; }
.systems label.later { cursor: default; }
.systems label.later em { display: block; }
.systems label.later strong { color: var(--faint); }

.sheet-field {
  margin-top: 12px; width: 100%; height: 52px; padding: 0 16px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(0, 0, 0, 0.32); color: #fff;
  font: 400 1.0625rem var(--plain); text-align: start; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sheet-field::placeholder { color: var(--faint); }
.sheet-field:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0, 132, 253, 0.24); }
.sheet-field[aria-invalid="true"] { border-color: #ff5f57; box-shadow: 0 0 0 4px rgba(255, 95, 87, 0.18); }
.sheet-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sheet-error { margin-top: 10px; align-self: stretch; text-align: start; color: #ff8a84; font-size: 0.9rem; line-height: 1.4; }
.sheet form .button { margin-top: 14px; width: 100%; height: 52px; border-radius: 14px; }
.sheet-fine { margin-top: 16px; color: var(--faint); font-size: 0.78rem; line-height: 1.45; }
.sheet-fine a { color: var(--blue); text-decoration: none; white-space: nowrap; }
.sheet-fine a:hover { text-decoration: underline; text-underline-offset: 2px; }
.sheet-done h2 { outline: none; }
.sheet-check { width: 62px; height: 62px; border-radius: 50%; background: rgba(61, 204, 120, 0.16); position: relative; margin-bottom: 18px; }
.sheet-check::after { content: ""; position: absolute; left: 23px; top: 15px; width: 13px; height: 24px; border: solid var(--green); border-width: 0 3px 3px 0; border-radius: 1px; transform: rotate(42deg); }

.language-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; text-align: start; }
.language-list button {
  width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 14px; border: 0; border-radius: 12px; background: none; color: var(--paper);
  font: 400 1rem var(--plain); text-align: start; cursor: pointer; transition: background 0.15s;
}
.language-list button:hover { background: rgba(255, 255, 255, 0.07); }
.language-list button.chosen { background: rgba(0, 132, 253, 0.16); color: #fff; font-weight: 600; }
.language-list button.chosen::after { content: ""; flex: none; width: 6px; height: 11px; margin: -3px 4px 0 0; border: solid var(--blue); border-width: 0 2px 2px 0; transform: rotate(42deg); }

/* The pages that set elevo beside another service */
.versus, .pains, .sides, .closing { max-width: calc(var(--page) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.versus { padding-top: clamp(36px, 6vh, 72px); }
.versus-kicker { color: var(--blue); font: 600 0.95rem var(--plain); letter-spacing: 0.01em; margin-bottom: 18px; }
.versus h1 { font-weight: 800; font-size: clamp(2.3rem, 5.4vw, 4.4rem); line-height: 1.02; letter-spacing: -0.038em; max-width: 15em; }
.versus .hero-lead { max-width: 36em; }
.versus .hero-actions { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 28px; }
.versus .hero-fine { max-width: 22em; }
/* The picture has no edge: it fades into the page on every side. */
.versus-art { display: block; width: 100%; margin: clamp(-36px, -2vw, -8px) 0 clamp(-90px, -7vw, -30px); pointer-events: none; user-select: none; }

.pains { position: relative; padding-top: clamp(40px, 6vw, 72px); }
.pains h2, .sides h2, .closing h2 { font-weight: 700; font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1.08; letter-spacing: -0.03em; max-width: 18em; }
.pains ul { list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3.4vw, 48px); }
.pains li { border-top: 1px solid var(--hair); padding-top: 20px; color: var(--quiet); }
.pains li strong { display: block; margin-bottom: 8px; color: var(--paper); font: 700 1.5rem/1.15 var(--loud); letter-spacing: -0.02em; }
.compare .between { padding-top: clamp(72px, 10vw, 128px); }
.compare .between .show:first-child { margin-top: 0; }

.lane + .lane { margin-top: 22px; }
.lane-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 10px; }
.lane-head strong { font: 600 1.02rem var(--plain); }
.lane-head span { color: var(--quiet); font-size: 0.9rem; font-variant-numeric: tabular-nums; text-align: end; }
.lane-head span.waiting { color: var(--amber); }
.lane-head span.done { color: var(--green); }
.lane-track { position: relative; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); }
.lane-track i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #2b9aff, var(--blue)); transition: background 0.3s; }
.lane-track i.done { background: var(--green); }
.lane-track i.waiting { background: var(--amber); }
/* two legs, and the server they meet at */
.lane-track.two { background: none; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.lane-track.two i { position: relative; width: 0; }
.lane-track.two::before, .lane-track.two::after { content: ""; position: absolute; top: 0; height: 100%; width: calc(50% - 13px); border-radius: 999px; background: rgba(255, 255, 255, 0.1); }
.lane-track.two::before { left: 0; }
.lane-track.two::after { right: 0; }
.lane-track.two i { z-index: 1; }
/* the server the two legs meet at */
.lane-server { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 5px; border: 1.5px solid rgba(255, 255, 255, 0.34); background: #14161d; }
.lane-server::after { content: ""; position: absolute; left: 3px; right: 3px; top: 5px; height: 1.5px; background: rgba(255, 255, 255, 0.34); box-shadow: 0 3px 0 rgba(255, 255, 255, 0.34); }
.lane-mark { position: absolute; top: -7px; bottom: -7px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--amber); }
.figure-note { color: var(--faint); font-size: 0.82rem; }

.bills { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bills div { padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); display: flex; flex-direction: column; gap: 4px; }
.bills span { color: var(--quiet); font-size: 0.9rem; }
.bills strong { font: 700 clamp(1.4rem, 2.6vw, 1.9rem)/1.1 var(--loud); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--amber); }
.bills .ours { background: rgba(0, 132, 253, 0.14); }
.bills .ours strong { color: #fff; }

.sides { padding-top: clamp(88px, 12vw, 160px); }
.sides-scroll { margin-top: clamp(28px, 4vw, 48px); overflow-x: auto; }
.sides table { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 640px; }
.sides thead th { text-align: start; padding: 0 20px 14px; font: 700 1.2rem var(--loud); letter-spacing: -0.01em; }
/* Beside another service, elevo is its logo, not the word typed out. */
.word { display: inline-block; height: 1.02em; width: 3.16em; vertical-align: -0.1em; color: var(--paper); }
.sides thead th .word { height: 1.25em; width: 3.87em; }
.sides tbody td .word { display: none; }
.bills .ours .word { height: 1.15em; width: 3.56em; }
.sides thead td { width: 24%; }
.sides tbody th { text-align: start; vertical-align: top; padding: 18px 20px 18px 0; font: 600 1rem var(--plain); color: var(--paper); border-top: 1px solid var(--hair); }
.sides tbody td { vertical-align: top; padding: 18px 20px; color: var(--quiet); border-top: 1px solid var(--hair); }
.sides tbody td:nth-child(2) { color: var(--paper); background: rgba(0, 132, 253, 0.07); }
.sides tbody tr:first-child td:nth-child(2) { border-radius: 14px 14px 0 0; }
.sides tbody tr:last-child td:nth-child(2) { border-radius: 0 0 14px 14px; }
.fit { margin-top: clamp(32px, 5vw, 56px); padding: clamp(20px, 3vw, 30px); border-radius: 20px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--hair); max-width: 52em; }
.fit h3 { font-weight: 600; font-size: 1.2rem; letter-spacing: -0.01em; }
.fit p { margin-top: 8px; color: var(--quiet); }

.closing { padding-top: clamp(88px, 12vw, 160px); padding-bottom: clamp(64px, 8vw, 104px); display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.closing-source { color: var(--faint); font-size: 0.8rem; line-height: 1.5; max-width: 52em; padding-top: 22px; border-top: 1px solid var(--hair); align-self: stretch; }

/* A send code opened in the browser */
.arrival { min-height: calc(100vh - 160px); display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 20px var(--gutter) 72px; }
.arrival[hidden] { display: none; }
.arrival-inner { width: 100%; max-width: 620px; min-width: 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
.arrival-art { width: min(230px, 56vw); margin: -18px 0 -6px; pointer-events: none; user-select: none; }
.arrival h1 { font-weight: 800; font-size: clamp(2.1rem, 5.4vw, 3.5rem); letter-spacing: -0.035em; line-height: 1.02; max-width: 100%; overflow-wrap: anywhere; }
.arrival-lead { margin-top: 18px; color: #d5d7e1; font-size: 1.15rem; line-height: 1.5; }
.arrival-form { margin-top: 28px; width: min(540px, 100%); display: flex; gap: 10px; align-items: stretch; }
.arrival-form .sheet-field { margin-top: 0; flex: 1 1 0; min-width: 0; background: rgba(255, 255, 255, 0.05); }
.arrival-form .button { flex: none; height: 52px; padding: 0 24px; border-radius: 14px; white-space: nowrap; }
.arrival-fine { margin-top: 12px; max-width: 540px; color: var(--faint); font-size: 0.78rem; line-height: 1.45; }
.arrival-fine a { color: var(--blue); text-decoration: none; white-space: nowrap; }
.arrival-fine a:hover { text-decoration: underline; text-underline-offset: 2px; }
.arrival-steps { list-style: none; margin: 38px 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: move; text-align: start; }
.arrival-steps li { counter-increment: move; padding: 16px 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--hair); color: #d5d7e1; font-size: 0.95rem; line-height: 1.45; }
.arrival-steps li::before { content: counter(move); display: block; margin-bottom: 8px; font: 800 1.5rem/1 var(--loud); color: var(--blue); letter-spacing: -0.04em; }
.arrival-have { margin-top: 16px; color: var(--quiet); font-size: 0.95rem; }
.arrival-have[hidden] { display: none; }
.arrival-have a { color: var(--blue); text-decoration: none; font-weight: 600; }
.arrival-have a:hover { text-decoration: underline; text-underline-offset: 2px; }
.arrival-other { margin-top: 20px; color: var(--amber); }
.arrival-code { margin-top: 14px; display: flex; align-items: center; gap: 10px; max-width: 100%; padding: 8px 8px 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--hair); }
.arrival-code code { font: 0.86rem ui-monospace, "SF Mono", Menlo, monospace; color: var(--quiet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.arrival-note { margin-top: 18px; color: var(--faint); font-size: 0.93rem; }

/* Pages of text: security, privacy, terms */
.text-page { padding-top: clamp(44px, 7vw, 88px); padding-bottom: clamp(64px, 9vw, 112px); }
.text-page h1 { font-weight: 800; font-size: clamp(2.2rem, 5.2vw, 3.6rem); letter-spacing: -0.035em; line-height: 1.02; max-width: 15em; }
.text-page .lead { margin-top: 20px; color: #d5d7e1; font-size: 1.2rem; line-height: 1.5; max-width: 36em; }
.text-page .stamp { margin-top: 14px; color: var(--faint); font-size: 0.95rem; }
.text-body { margin-top: clamp(36px, 5vw, 60px); max-width: 46em; }
.text-body section { padding: 26px 0; border-top: 1px solid var(--hair); }
.text-body h2 { font-weight: 600; font-size: 1.3rem; letter-spacing: -0.015em; line-height: 1.25; }
.text-body p { margin-top: 12px; color: #c9ccd8; }
.text-body ul { margin: 12px 0 0; padding-left: 1.2em; color: #c9ccd8; }
.text-body li { margin-top: 6px; }
.text-body li::marker { color: var(--blue); }

/* Narrow screens */
@media (max-width: 900px) {
  .hero-words { grid-template-columns: minmax(0, 1fr); }
  .get-words { row-gap: 24px; }
  .stage { grid-template-columns: minmax(0, 420px); justify-content: center; }
  .wire { min-height: 86px; }
  .wire-line { left: calc(50% - 1px); right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0 6px, transparent 6px 12px); }
  .wire-flow { left: calc(50% - 2px); right: auto; top: 8px; bottom: 8px; width: 4px; height: auto; background: linear-gradient(180deg, transparent, var(--blue) 30%, #7cc0ff 50%, var(--blue) 70%, transparent) 0 0 / 100% 60% no-repeat; }
  @keyframes flow { from { background-position: 0 -150%; } to { background-position: 0 250%; } }
  .wire-note { top: calc(50% - 0.6em); left: calc(50% + 16px); right: auto; text-align: left; }
  .device[data-side="to"] .device-name { text-align: left; margin: 0 0 12px 6px; }
  .show, .questions, .get-words { grid-template-columns: minmax(0, 1fr); }
  .get-fine { grid-column: 1; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .pains ul { grid-template-columns: minmax(0, 1fr); }
  /* The table, one question at a time: what elevo does, then the other. */
  .sides table { min-width: 0; }
  .sides table, .sides tbody, .sides tr, .sides tbody th, .sides tbody td { display: block; }
  .sides thead { display: none; }
  .sides tbody tr { padding: 18px 0; border-top: 1px solid var(--hair); }
  .sides tbody th { padding: 0 0 10px; border: 0; font-size: 1.05rem; }
  .sides tbody td { padding: 10px 14px; border: 0; border-radius: 12px; }
  .sides tbody td + td { margin-top: 6px; background: rgba(255, 255, 255, 0.04); }
  .sides tbody tr td:nth-child(2) { border-radius: 12px; }
  .sides tbody td::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 600 0.8rem var(--plain); color: var(--faint); }
  .sides tbody td:nth-child(2)::before { content: none; }
  .sides tbody td .word { display: block; height: 0.95rem; width: 2.94rem; margin-bottom: 5px; }
  .steps-art { width: min(100%, 460px); margin: -4% auto -6%; }
  .language-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rest dl { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .top { padding-left: 16px; padding-right: 16px; gap: 10px; }
  .top-links { gap: 8px; }
  .top-links a:not(.top-download) { display: none; }
  .top-links a.top-download { padding: 7px 13px; }
  .brand { gap: 9px; }
  .brand-mark { width: 36px; height: 24px; }
  .brand-word { width: 62px; height: 21px; }
  .blocks { grid-template-columns: repeat(12, 1fr); }
  .trees { grid-template-columns: minmax(0, 1fr); }
  .trees-arrow { transform: rotate(90deg); justify-self: center; margin: 6px 0; }
  .tree li span { display: none; }
  .platforms li { flex-wrap: wrap; }
  .sheet { padding: 44px 22px 24px; border-radius: 24px; }
  .sheet.wide { padding: 46px 14px 18px; }
  .sheet h2 { font-size: 1.4rem; }
  .foot-base { gap: 10px 20px; }
  .foot-legal { margin-right: 0; flex-basis: 100%; order: 3; }
  .foot-rights { flex-basis: 100%; }
  .foot-language { margin: 0 0 0 -9px; order: 4; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
}

/* A send code, on a narrow screen */
@media (max-width: 620px) {
  .arrival-form { flex-direction: column; }
  .arrival-form .sheet-field { flex: none; width: 100%; }
  .arrival-form .button { width: 100%; }
  .arrival-steps { grid-template-columns: minmax(0, 1fr); }
  .arrival-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; padding: 14px 16px; }
  .arrival-steps li::before { margin-bottom: 0; }
}