/* prolyftapp.com · site.css — the site's one hand-written stylesheet (Docs/39 §3.1, Docs/51).
   Tokens from design/web/tokens.css at the top (values ← constants/design/tokens.js; the build
   checks the colours against it). Plain CSS, no framework, no build step: scripts/build-legal.mjs
   copies this file to /assets/site.css and fails above 20 KB gzipped.
   Sections: 1 tokens · 2 fonts · 3 base · 4 layout · 5 type · 6 controls · 7 chrome ·
   8 hero · 9 pillars + features · 10 home sections · 11 pages · 12 motion. */

/* ── 1 · Tokens ── */
:root {
  color-scheme: light dark;
  --bg: #F4F6F8; --card: #FFFFFF; --sunken: #E9EDF1;
  --ink: #2B303A; --ink-2: #4B5563; --ink-3: #9CA3AF;
  --hairline: #E5E7EB; --strong: #D1D5DB; --chip: #394354; --on-chip: #F4F6F8;
  --accent: #FF9200; --accent-strong: #E07C00; --accent-soft: #FFF3E0;
  --accent-ink: #B45309; --on-accent: #1A1D22;
  --grid: #DCE1E7; --focus: #2B303A; --glow: rgba(255, 146, 0, .20); --frame: #1A1D22; --done: #D97706;
  --chart-1: #FF9200; --chart-2: #394354; --chart-3: #F59E0B; --chart-4: #D97706;
  --heat-1: #FFE1B8; --heat-2: #FFC97D; --heat-3: #FFAE42; --heat-4: #FF9200; --heat-5: #D97706;
  --heat-base: #E9EDF1; --heat-neutral: #E5E7EB; --heat-outline: #94A3B8;
  --brand-gradient: linear-gradient(135deg, #FF9200 0%, #F7901A 5%, #E28A35 10%, #C58148 15%, #A37656 20%,
    #836B5F 25%, #676065 30%, #535867 35%, #4B5568 40%, #424C5E 54%, #394354 68%, #292F3A 84%, #1A1D22 100%);
  --glass: rgba(22, 24, 29, .84); --glass-edge: rgba(255, 255, 255, .16);
  --font: 'ProLyft Sans', 'ProLyft Sans Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-caps: 11px; --fs-body: 17px; --fs-lead: clamp(16px, 1.35vw, 19px); --fs-h3: 20px;
  /* Headings follow the prototype between the drawn widths (its cqi as vw; tokens.css agrees at 390 and 1440) */
  --fs-h2: clamp(28px, 3.2vw, 42px); --fs-h1: clamp(34px, 4.3vw, 60px);
  --fs-h1-page: clamp(32px, 3.6vw, 48px);
  --lh-body: 1.6; --lh-tight: 1.06; --lh-heading: 1.1; --tracking-display: -.02em; --tracking-caps: .08em;
  --measure: 44rem;
  --section-y: clamp(64px, 8vw, 112px); --gutter: clamp(20px, 4vw, 48px);
  --r-btn: 12px; --r-btn-sm: 10px; --target: 44px;
  --hex-card: polygon(7.76px 1.76px,12px 0,calc(100% - 12px) 0,calc(100% - 7.76px) 1.76px,calc(100% - 1.76px) 7.76px,100% 12px,100% calc(100% - 12px),calc(100% - 1.76px) calc(100% - 7.76px),calc(100% - 7.76px) calc(100% - 1.76px),calc(100% - 12px) 100%,12px 100%,7.76px calc(100% - 1.76px),1.76px calc(100% - 7.76px),0 calc(100% - 12px),0 12px,1.76px 7.76px);
  --hex-card-in: polygon(7.46px 1.46px,11px 0,calc(100% - 11px) 0,calc(100% - 7.46px) 1.46px,calc(100% - 1.46px) 7.46px,100% 11px,100% calc(100% - 11px),calc(100% - 1.46px) calc(100% - 7.46px),calc(100% - 7.46px) calc(100% - 1.46px),calc(100% - 11px) 100%,11px 100%,7.46px calc(100% - 1.46px),1.46px calc(100% - 7.46px),0 calc(100% - 11px),0 11px,1.46px 7.46px);
  --hex-card-in2: polygon(7.32px 1.32px,10.5px 0,calc(100% - 10.5px) 0,calc(100% - 7.32px) 1.32px,calc(100% - 1.32px) 7.32px,100% 10.5px,100% calc(100% - 10.5px),calc(100% - 1.32px) calc(100% - 7.32px),calc(100% - 7.32px) calc(100% - 1.32px),calc(100% - 10.5px) 100%,10.5px 100%,7.32px calc(100% - 1.32px),1.32px calc(100% - 7.32px),0 calc(100% - 10.5px),0 10.5px,1.32px 7.32px);
  --hex-card-top: polygon(7.46px 1.46px,11px 0,calc(100% - 11px) 0,calc(100% - 7.46px) 1.46px,calc(100% - 1.46px) 7.46px,100% 11px,100% 100%,0 100%,0 11px,1.46px 7.46px);
  --hex-chip: polygon(3.83px 1.17px,6.66px 0,calc(100% - 6.66px) 0,calc(100% - 3.83px) 1.17px,calc(100% - 1.17px) 3.83px,100% 6.66px,100% calc(100% - 6.66px),calc(100% - 1.17px) calc(100% - 3.83px),calc(100% - 3.83px) calc(100% - 1.17px),calc(100% - 6.66px) 100%,6.66px 100%,3.83px calc(100% - 1.17px),1.17px calc(100% - 3.83px),0 calc(100% - 6.66px),0 6.66px,1.17px 3.83px);
  --hex-chip-in: polygon(3.54px .88px,5.66px 0,calc(100% - 5.66px) 0,calc(100% - 3.54px) .88px,calc(100% - .88px) 3.54px,100% 5.66px,100% calc(100% - 5.66px),calc(100% - .88px) calc(100% - 3.54px),calc(100% - 3.54px) calc(100% - .88px),calc(100% - 5.66px) 100%,5.66px 100%,3.54px calc(100% - .88px),.88px calc(100% - 3.54px),0 calc(100% - 5.66px),0 5.66px,.88px 3.54px);
  --hex-tag: polygon(5.22px 6.5%,7.66px 0,calc(100% - 7.66px) 0,calc(100% - 5.22px) 6.5%,calc(100% - .78px) 43.5%,calc(100% - .78px) 56.5%,calc(100% - 5.22px) 93.5%,calc(100% - 7.66px) 100%,7.66px 100%,5.22px 93.5%,.78px 56.5%,.78px 43.5%);
  --hex-coin: polygon(43.5% 3.25%,56.5% 3.25%,93.5% 21.75%,100% 31.5%,100% 68.5%,93.5% 78.25%,56.5% 96.75%,43.5% 96.75%,6.5% 78.25%,0 68.5%,0 31.5%,6.5% 21.75%);
  --hex-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='76.2'%3E%3Cpath d='M22 0L44 12.7V38.1L22 50.8L0 38.1V12.7ZM22 50.8V76.2' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
  --hex-grid-size: 44px 76.2px;
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 350ms; --ease: cubic-bezier(.22, 1, .36, 1);
  --container: 1200px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #181A1F; --card: #282C34; --sunken: #22252B;
    --ink: #F4F6F8; --ink-2: #9AA3B2; --ink-3: #6B7280;
    --hairline: #3A4150; --strong: #4A5462; --chip: #4B5568;
    --accent: #FFA012; --accent-strong: #FF9200; --accent-soft: #3D3423; --accent-ink: #FFA012;
    --grid: #262B33; --focus: #FFA012; --glow: rgba(255, 160, 18, .22); --frame: #0E1013;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}

/* ── 2 · Fonts: WOFF2 subsets (scripts/web/prepare_assets.py), swap, metric-matched fallback ── */
@font-face { font-family: 'ProLyft Sans'; src: url(/assets/fonts/prolyft-sans-400-latin.woff2) format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+0160-0161, U+017D-017E, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: 'ProLyft Sans'; src: url(/assets/fonts/prolyft-sans-400-cyrillic.woff2) format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'ProLyft Sans'; src: url(/assets/fonts/prolyft-sans-600-latin.woff2) format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+0160-0161, U+017D-017E, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: 'ProLyft Sans'; src: url(/assets/fonts/prolyft-sans-600-cyrillic.woff2) format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'ProLyft Sans'; src: url(/assets/fonts/prolyft-sans-800-latin.woff2) format('woff2'); font-weight: 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+0160-0161, U+017D-017E, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: 'ProLyft Sans'; src: url(/assets/fonts/prolyft-sans-800-cyrillic.woff2) format('woff2'); font-weight: 800; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
/* FALLBACK-METRICS — values from assets/web/fonts/fallback.json */
@font-face { font-family: 'ProLyft Sans Fallback'; src: local('Arial'); size-adjust: 98.14%; ascent-override: 89.47%; descent-override: 21.40%; line-gap-override: 0.00%; }
/* Cyrillic and the heavy weights get their own fallback (Arial alone is 11–15 % narrower than ProLyft Sans 800, so a late
   font reflowed the headings): size-adjust = text width in ProLyft Sans / in Arial (Bold), en · et · ru copy, Chrome
   2026-10-12; the overrides keep fallback.json's ascent / descent */
@font-face { font-family: 'ProLyft Sans Fallback'; src: local('Arial'); size-adjust: 99.89%; ascent-override: 87.90%; descent-override: 21.03%; line-gap-override: 0%; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'ProLyft Sans Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 600 700; size-adjust: 94.49%; ascent-override: 92.93%; descent-override: 22.23%; line-gap-override: 0%; }
@font-face { font-family: 'ProLyft Sans Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 600 700; size-adjust: 96.82%; ascent-override: 90.69%; descent-override: 21.69%; line-gap-override: 0%; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'ProLyft Sans Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 800 900; size-adjust: 102.84%; ascent-override: 85.38%; descent-override: 20.42%; line-gap-override: 0%; }
@font-face { font-family: 'ProLyft Sans Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 800 900; size-adjust: 104.55%; ascent-override: 83.99%; descent-override: 20.09%; line-gap-override: 0%; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

/* ── 3 · Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; overflow-wrap: anywhere;
}
img, svg, video { max-width: 100%; }
img { height: auto; }
picture { display: contents; }
source { display: none; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
:where(ul, ol)[role="list"] { list-style: none; padding: 0; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -200px; z-index: 40; display: flex; align-items: center;
  height: 44px; padding: 0 16px; border-radius: var(--r-btn-sm); background: var(--chip); color: var(--on-chip);
  font-size: 15px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }
.draft-banner {
  max-width: var(--container); margin: 16px auto; padding: 12px 16px; border: 1px solid #B91C1C; border-radius: 8px;
  color: #B91C1C; background: #FEF2F2; font-size: 14px; font-weight: 600;
}
@media (prefers-color-scheme: dark) { .draft-banner { background: #2A1113; border-color: #F87171; color: #FCA5A5; } }

/* ── 4 · Layout ── */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--sunken { background: var(--sunken); }
.section--rule { border-top: 1px solid var(--hairline); }
.section--band { background: var(--brand-gradient); color: #F4F6F8; }
.section__head { display: flex; flex-direction: column; gap: 12px; max-width: 46rem; }
.section__head .lead { margin-top: 4px; }

/* ── 5 · Type ── */
.caps { font-size: var(--fs-caps); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--accent-ink); line-height: var(--lh-body); }
/* On sunken sections #B45309 is 4.3:1; 8 % darker keeps it orange and ≥ 4.5:1 (WCAG AA, 11 px caps) */
.section--sunken .caps { color: color-mix(in srgb, var(--accent-ink) 92%, #000); }
@media (prefers-color-scheme: dark) { .section--sunken .caps { color: var(--accent-ink); } }
.h1-hero { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); font-weight: 800; text-wrap: balance; }
/* Page H1 (FAQ, Press, Legal, Beta): line-height 1.08 and natural wrapping, as F1 / F2 / L1 / L2 draw it */
.h1 { font-size: var(--fs-h1-page); line-height: 1.08; letter-spacing: var(--tracking-display); font-weight: 800; }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--tracking-display); font-weight: 800; text-wrap: balance; }
.h3 { font-size: var(--fs-h3); line-height: 1.2; font-weight: 800; }
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.prose { max-width: var(--measure); }
.muted { color: var(--ink-2); }
.small { font-size: 14px; }
.num { font-variant-numeric: tabular-nums; }
.trust-line { font-size: 14px; color: var(--ink-2); }

/* ── 6 · Controls ── */
/* Buttons are rounded (r 12 / small r 10), never hex */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border: 0; border-radius: var(--r-btn);
  font-size: 16px; font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  min-height: 52px; padding: 0 24px; background: var(--accent); color: var(--on-accent); font-size: 17px;
  box-shadow: 0 10px 28px -10px rgba(255, 146, 0, .7);
}
.btn--primary:hover { background: var(--accent-strong); color: var(--on-accent); }
.btn--primary:focus-visible { outline-offset: 3px; }
.btn--secondary { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--strong); }
.btn--secondary:hover { background: var(--sunken); }
.btn--chip { min-height: 44px; padding: 0 18px; border-radius: var(--r-btn-sm); background: var(--chip); color: var(--on-chip); font-size: 15px; white-space: nowrap; }
.btn--chip:hover { filter: brightness(1.12); color: var(--on-chip); }
.btn--sm { min-height: 44px; padding: 0 14px; border-radius: var(--r-btn-sm); font-size: 15px; }
.btn svg { flex: none; }
.link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); font-size: 16px; font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.link:hover { text-decoration-color: var(--ink); }

/* Tags: the pointed cell, static */
.tag {
  display: inline-flex; align-items: center; height: 22px; padding: 0 10px; clip-path: var(--hex-tag);
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  background: var(--sunken); color: var(--ink-2);
}
.tag--free { background: var(--accent-soft); color: var(--accent-ink); }
.tag--premium { background: var(--chip); color: var(--on-chip); }
.tag--soon { background: var(--sunken); color: var(--ink-2); }
.tag--meta { height: 24px; font-size: 12px; letter-spacing: 0; text-transform: none; }

/* Coins: pointy-top hexagon, h = w × 1.1547 */
.coin { display: inline-grid; place-items: center; flex: none; aspect-ratio: 1 / 1.1547; clip-path: var(--hex-coin); }
.coin--dot { width: 9px; background: var(--accent); }
.coin--rim { position: relative; isolation: isolate; background: var(--strong); }
.coin--rim::before { content: ""; position: absolute; inset: 1.5px; z-index: -1; background: var(--card); clip-path: var(--hex-coin); }
.coin--done { background: var(--done); color: #FFFFFF; }
.coin--today { background: var(--accent); }

/* Hex card: edge-coloured clipped parent + inner fill inset by the edge width (never border + clip-path) */
.card { position: relative; isolation: isolate; background: var(--strong); clip-path: var(--hex-card); }
.card::before { content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--card); clip-path: var(--hex-card-in); }
.card--active { background: var(--accent); }
.card--active::before { inset: 1.5px; clip-path: var(--hex-card-in2); }
.card--sunken::before { background: var(--sunken); }

/* Filter chip: clipped edge + fill; the ring sits on the unclipped <button> */
.chip { display: inline-flex; padding: 1px; background: var(--strong); clip-path: var(--hex-chip); }
.chip__fill { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px; background: var(--card); clip-path: var(--hex-chip-in); font-size: 14px; font-weight: 600; color: var(--ink); }

/* Segmented control (tabs, screen-language toggle): rounded track, rounded buttons */
.seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: 12px; background: var(--sunken); }
.seg__btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
  border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font-size: 15px; font-weight: 600; cursor: pointer;
}
/* Selected: the white pill with a 1.5 px ink-2 edge (the pill alone is 1.2:1 on the track; WCAG 1.4.11 needs 3:1) */
.seg__btn[aria-selected="true"], .seg__btn[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink-2); }

/* Store badges: official artwork only, 48 px tall, App Store first, clear space ¼ of the height */
.store-badges { display: flex; flex-wrap: wrap; gap: 12px; }
.store-badge { display: inline-flex; border-radius: 9px; }
.store-badge img { height: 48px; width: auto; }

/* ── 7 · Chrome ── */
.status-strip { background: var(--sunken); border-bottom: 1px solid var(--hairline); }
.status-strip p {
  max-width: var(--container); margin: 0 auto; padding: 7px var(--gutter); display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--ink-2); text-align: center; text-wrap: balance;
}
.status-strip .coin--dot { height: 10.4px; }

.site-header { position: relative; z-index: 30; background: var(--bg); border-bottom: 1px solid var(--hairline); }
.site-header__bar { display: flex; align-items: center; gap: 28px; height: 72px; }
.site-header__home { display: flex; align-items: center; height: 44px; border-radius: 8px; flex: none; }
.site-header__home img { display: block; height: 34px; width: auto; }
.site-header__home:focus-visible { outline-offset: 4px; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.site-nav a {
  display: flex; align-items: center; height: 44px; padding: 0 12px; border-radius: 10px;
  color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none;
}
.site-nav a:hover { background: var(--sunken); }
.site-nav a:focus-visible { outline-offset: 0; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.site-header .lang-switch { margin-left: auto; }
.lang-switch { display: flex; flex-wrap: wrap; align-items: center; }
.lang-switch a {
  display: flex; align-items: center; justify-content: center; min-width: 34px; height: 44px; padding: 0 4px; border-radius: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--ink-2); text-decoration: none;
}
.lang-switch a[aria-current="true"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.lang-switch a:focus-visible { outline-offset: 0; }
.site-header .lang-switch a { min-width: 42px; }
.site-nav a { white-space: nowrap; }
/* Desktop: 72 px, one row; when the row does not fit (ru at 900–915 px, larger text) it wraps to a right-aligned
   second row instead of splitting labels mid-word or spilling out of the bar */
@media (min-width: 900px) {
  .site-header__bar { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; height: auto; min-height: 72px; padding-block: 8px; }
  .site-nav { margin-right: auto; }
  .site-header__cta { margin-left: -14px; }
}
.lang-switch__sep { color: var(--ink-3); font-size: 13px; }
.lang-switch--full a { padding: 0 8px; font-size: 14px; letter-spacing: 0; }
.site-header__cta { flex: none; }
.site-menu { display: none; }
.site-menu summary {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; cursor: pointer; color: var(--ink);
}
.site-menu summary:focus-visible { outline-offset: 0; }
.site-menu__close, .site-menu[open] .site-menu__open { display: none; }
/* Closed: out of layout. Chrome keeps a closed <details>' content laid out (contained), where the
   absolute panel anchors at the button and, at large text sizes, widens the page */
.site-menu:not([open]) .site-menu__panel { display: none; }
.site-menu[open] .site-menu__close { display: block; }
.site-menu__panel {
  position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-bottom: 1px solid var(--hairline);
  box-shadow: 0 24px 40px -24px rgba(20, 22, 26, .35); padding: 8px 16px 20px;
}
.site-menu__panel ul { list-style: none; margin: 0; padding: 0; }
.site-menu__panel li { border-bottom: 1px solid var(--hairline); }
.site-menu__panel li a {
  display: flex; align-items: center; justify-content: space-between; min-height: 52px;
  color: var(--ink); font-size: 18px; font-weight: 600; text-decoration: none;
}
.site-menu__panel li a svg { color: var(--ink-2); }
.lang-switch--menu { flex-wrap: wrap; gap: 4px 6px; margin-top: 14px; }
.lang-switch--menu a { height: 44px; padding: 0 10px; border-radius: 10px; font-size: 15px; letter-spacing: 0; }
.lang-switch--menu a[aria-current="true"] { background: var(--sunken); text-decoration: none; }
@media (max-width: 899.98px) {
  /* 60 px tall; larger text may wrap the button label to two lines instead of widening the page */
  .site-header__bar { height: auto; min-height: 60px; gap: 6px; padding-inline: 16px 12px; }
  .site-header__home { margin-right: auto; }
  .site-header__home img { height: 27px; }
  .site-header .site-nav, .site-header .lang-switch:not(.lang-switch--menu) { display: none; }
  .site-header__cta { flex: 0 1 auto; min-width: 0; padding: 0 14px; white-space: normal; }
  .site-header__cta:lang(et), .site-header__cta:lang(ru) { font-size: 14px; }
  .site-menu { display: block; }
}
/* The narrowest phones (320 px) and large text: the button label may take two lines rather than push the menu off-screen */
@media (max-width: 379.98px) {
  .site-header__bar { height: auto; min-height: 60px; padding-block: 8px; }
  .site-header__cta { flex: 0 1 auto; min-width: 0; padding: 4px 10px; white-space: normal; line-height: 1.15; font-size: 13px; }
  .site-header__cta:lang(et), .site-header__cta:lang(ru) { font-size: 13px; }
}

.site-footer { background: var(--sunken); border-top: 1px solid var(--hairline); color: var(--ink); }
.site-footer > .container { padding-block: 56px 32px; }
.site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 36px 32px; }
.site-footer__about { display: flex; flex-direction: column; gap: 14px; }
.site-footer__about img { display: block; height: 34px; width: auto; align-self: flex-start; }
.site-footer__about p { max-width: 24rem; font-size: 15px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
@media (min-width: 900px) { .site-footer__about { grid-column: span 2; } }
.site-footer__grid nav, .site-footer__community { display: flex; flex-direction: column; gap: 2px; }
.site-footer h2.caps { margin: 0 0 8px; color: var(--ink-2); }
.site-footer__grid a {
  display: flex; align-items: center; gap: 8px; min-height: 36px; border-radius: 6px;
  color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none;
}
.site-footer__grid a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer__note { font-weight: 400; color: var(--ink-2); font-size: 13px; overflow-wrap: anywhere; }
.site-footer__legal { min-width: 0; overflow-wrap: anywhere; }
.site-footer__base {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 40px;
}
.site-footer__legal { display: flex; flex-direction: column; gap: 6px; max-width: 44rem; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.site-footer__legal a { color: var(--ink); }
.site-footer__nocookies { color: var(--ink); font-weight: 600; }
.site-footer .lang-switch--full { gap: 2px; }

/* ── 8 · Hero ── */
/* Hero (Mix): static A; site.js adds B and C */
.hero { position: relative; overflow: hidden; isolation: isolate; }
/* Hex grid layer */
.hexes { background: var(--grid); -webkit-mask: var(--hex-grid) 0 0 / var(--hex-grid-size) repeat; mask: var(--hex-grid) 0 0 / var(--hex-grid-size) repeat; }
.hero__grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  --m: radial-gradient(ellipse 70% 68% at 50% 82%, #000 22%, transparent 80%); -webkit-mask-image: var(--m); mask-image: var(--m);
}
.hero__grid .hexes { position: absolute; inset: -160px 0; }
.hero__in { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(28px, 4vw, 48px); padding-top: clamp(28px, 5vw, 72px); }
.hero__text { flex: 1 1 400px; min-width: 0; max-width: 600px; }

/* Mark: SVG inlined for the intro */
.hero__mark { position: relative; width: clamp(44px, 4.4vw, 56px); aspect-ratio: 1; margin-bottom: clamp(16px, 2vw, 24px); }
.hero__mark-glow { position: absolute; inset: -34px; border-radius: 50%; background: radial-gradient(closest-side, var(--glow), transparent); }
.hero__mark img { position: relative; display: block; width: 100%; height: 100%; }
.hero__mark-svg { position: absolute; inset: 0; display: none; }
.hero__mark-svg svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hero__mark[data-inline] img { visibility: hidden; }
.hero__mark[data-inline] .hero__mark-svg { display: block; }

.hero__sub { margin-top: 18px; max-width: 34rem; line-height: 1.55; }
.hero__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 28px; }
.hero__btn { min-height: 60px; min-width: min(100%, 240px); padding: 0 34px; gap: 10px; font-size: 19px; box-shadow: 0 12px 32px -10px rgba(255, 146, 0, .75); }
.hero__launch { font-size: 16px; font-weight: 600; }
/* Each item carries its "·"; the row is pulled left by one separator and clipped, so no line starts or ends with a dot.
   An item that wraps inside itself hangs its first line instead, so its later lines start inside the clip */
.hero__trust { margin-top: 16px; line-height: 1.5; overflow: hidden; }
.hero__trust-in { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-left: calc(-.34em - 10px); }
.hero__trust-in > span { padding-left: calc(.34em + 10px); text-indent: calc(-.34em - 10px); }
.hero__trust-sep { display: inline-block; width: .34em; margin-right: 10px; text-align: center; text-indent: 0; }
/* et / ru below 600 px: 31 px, line-height 1.08 (ProLyft Web Home · W5) */
@media (max-width: 599.98px) { html:is(:lang(et), :lang(ru)) .h1-hero { font-size: 31px; line-height: 1.08; } }


/* Phones */
.hero__visual { position: relative; flex: 1 1 100%; height: 400px; }
.hero__glow {
  position: absolute; left: 50%; top: 52%; width: 560px; height: 560px; translate: -50% -50%;
  border-radius: 50%; background: radial-gradient(closest-side, var(--glow), transparent); pointer-events: none;
}
/* Phone frame: --w width, --p bezel, --r radius, --sh shadow */
.device {
  position: relative; width: var(--w, 300px); padding: var(--p, 7px); border-radius: var(--r, 35px); background: var(--frame);
  box-shadow: 0 0 0 1px var(--hairline), var(--sh, 0 50px 90px -36px rgba(20, 22, 26, .55));
}
.device__screen { position: relative; overflow: hidden; aspect-ratio: 390 / 844; border-radius: calc(var(--r, 35px) - var(--p, 7px)); background: var(--bg); }
.device__screen img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity var(--dur-3) var(--ease); }
.device__screen [data-screen]:not([data-screen="0"]) { opacity: 0; }
.hero__front { position: absolute; left: 50%; top: 6px; translate: -50% 0; --w: 284px; --r: 32px; --sh: 0 40px 70px -34px rgba(20, 22, 26, .5); }
.hero__back { display: none; }

/* Pause (JS + motion) */
.hero__pause {
  position: absolute; right: 0; bottom: 16px; z-index: 3; display: none; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 12px;
  border: 1px solid var(--strong); border-radius: 10px; background: var(--card); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer;
}
:root[data-js] .hero__pause { display: flex; }
.hero__pause svg { display: none; }
.hero__pause[data-state="playing"] .i-pause, .hero__pause[data-state="paused"] .i-play, .hero__pause[data-state="done"] .i-again { display: block; }

@media (min-width: 960px) {
  .hero__grid { --m: radial-gradient(ellipse 70% 68% at 74% 40%, #000 22%, transparent 80%); }
  .hero__text { padding-bottom: 64px; }
  .hero__visual { flex: 1 1 400px; height: 600px; }
  .hero__glow { top: 46%; width: 780px; height: 780px; }
  .hero__front { left: 4%; top: 0; translate: none; --w: 314px; --r: 35px; --sh: 0 50px 90px -36px rgba(20, 22, 26, .55); }
  .hero__back { display: block; position: absolute; right: 0; top: 86px; --w: 264px; --r: 30px; --sh: 0 40px 70px -34px rgba(20, 22, 26, .5); }
  .hero__pause { bottom: 24px; }
}
@media (max-width: 359.98px) { .hero__btn { padding-inline: 20px; } }
@media (prefers-reduced-motion: reduce) { :root[data-js] .hero__pause { display: none; } }

/* C parallax (else scrollStory) */
@supports (animation-timeline: view()) {
  @media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
    :root[data-js] .hero__grid .hexes { animation: hero-par auto linear both; animation-timeline: scroll(root); animation-range: 0 1000px; }
  }
}
@keyframes hero-par { to { translate: 0 150px; } }

/* ── 9 · Pillars + features ── */
/* Pillars */
.pillars { border-top: 1px solid var(--hairline); }
.pillars .pillars__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; padding: clamp(40px, 5vw, 72px) var(--gutter); }
.pillar { display: block; height: 100%; border-radius: 14px; color: inherit; text-decoration: none; }
.pillar:focus-visible { outline-offset: 3px; }
/* flow-root keeps the crop's 1 px top margin inside the card (it collapsed out, hiding the top edge) */
.pillar .card { display: flow-root; height: 100%; }
.pillar__crop { position: relative; height: 150px; margin: 1px 1px 0; overflow: hidden; background: var(--sunken); clip-path: var(--hex-card-top); }
.pillar__crop .hexes { position: absolute; inset: 0; }
.pillar__coin { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 56px; background: var(--card); color: var(--ink); }
.pillar__crop img { position: absolute; left: 0; top: 0; width: 100%; transform: translateY(var(--shift)); transition: opacity var(--dur-2) var(--ease); }
.pillar__body { padding: 18px 20px 22px; }
.pillar__body .caps, .frow__text .caps { line-height: inherit; }
.pillar__title { display: flex; align-items: center; gap: 8px; margin-top: 6px; line-height: 1.25; letter-spacing: -.01em; }
.pillar__title svg { flex: none; color: var(--ink-2); }
.pillar__line { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
@media (min-width: 960px) {
  .pillar__crop img { opacity: 0; }
  .pillar:hover img, .pillar:focus img, .pillar[data-shown] img { opacity: 1; }
}

/* Rows: A stacked; C = JS ≥ 960 px */
.features { padding-block: clamp(24px, 4vw, 56px) clamp(24px, 3vw, 40px); }
.frow { display: grid; column-gap: 28px; padding-block: clamp(40px, 5vw, 72px); scroll-margin-top: 16px; }
.frow__rail, .features__side { display: none; }
.frow__body { display: flex; flex-wrap: wrap; align-items: center; gap: 40px 64px; min-width: 0; }
.frow--flip .frow__body { flex-direction: row-reverse; }
.frow__text { flex: 1 1 360px; min-width: 0; max-width: 500px; }
.frow__text .h2 { margin-top: 8px; }
.frow__p { margin-top: 14px; font-size: 17px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.frow__list { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; padding: 0; font-size: 16px; }
.frow__list li { display: flex; gap: 12px; align-items: flex-start; }
.frow__check { width: 20px; margin-top: 1px; background: var(--accent-soft); color: var(--accent-ink); }
.frow__note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 18px; font-size: 15px; color: var(--ink-2); }
.frow__visual { flex: 1 1 440px; min-width: 0; }
.frow__visual--log { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 28px; }
.frow__phones { display: flex; justify-content: center; align-items: flex-start; }
.frow__phones .device { --w: min(47%, 250px); --p: 6px; --r: 28px; --sh: 0 0 #0000; }
.frow__phones .device + .device { margin: 56px 0 0 -14px; --sh: 0 30px 60px -30px rgba(20, 22, 26, .5); }
.frow__peek { flex: 0 0 240px; }
.frow__peek .device { --w: 240px; --r: 30px; --sh: 0 0 #0000; height: 400px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }

/* C rail */
.frow__coin { position: absolute; left: 8px; top: 0; width: 40px; background: var(--rim, var(--strong)); color: var(--ci, var(--ink-2)); font-size: 14px; font-weight: 800; }
.frow__coin::before { inset: 2px; background: var(--fill, var(--card)); }
[data-rail="now"] .frow__coin { --rim: var(--accent); --ci: var(--accent-ink); }
[data-rail="done"] .frow__coin { --rim: var(--accent); --fill: var(--chip); --ci: #FFA012; }
@media (prefers-color-scheme: dark) { [data-rail="done"] .frow__coin { --fill: #1A1D22; } }
.frow__line, .frow__seg { position: absolute; top: 58px; bottom: -60px; }
.frow__line { left: 27px; width: 2px; background: repeating-linear-gradient(var(--strong) 0 3px, transparent 3px 10px); }
.frow__seg { left: 26px; width: 4px; border-radius: 2px; background: var(--accent); transform-origin: top; transform: scaleY(0); }
.features__side .device { --sh: 0 50px 90px -40px rgba(20, 22, 26, .55); }
.features__side img { transition-duration: var(--dur-2); }
.features__cap { margin-top: 14px; text-align: center; font-size: 13px; color: var(--ink); }
@media (prefers-color-scheme: dark) { .features__cap { color: var(--ink-2); } }
@media (min-width: 960px) {
  .frow__peek .device { height: auto; -webkit-mask-image: none; mask-image: none; }
  :root[data-js] .features__in { display: flex; gap: 56px; align-items: flex-start; }
  :root[data-js] .features__rows { flex: 1; min-width: 0; }
  :root[data-js] .frow { grid-template-columns: 56px minmax(0, 1fr); }
  :root[data-js] .frow--tall { box-sizing: content-box; min-height: 62vh; }
  :root[data-js] .frow__rail { display: block; position: relative; }
  :root[data-js] .frow--flip .frow__body { flex-direction: row; }
  :root[data-js] .frow__phones, :root[data-js] .frow__peek { display: none; }
  :root[data-js] .features__side { display: block; flex: 0 0 300px; position: sticky; top: 96px; padding-top: clamp(40px, 5vw, 72px); }
}
/* Rail fill: row vs a line at 45 % */
@supports (animation-timeline: view()) {
  @media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
    .frow { view-timeline: --frow block; view-timeline-inset: 45% 55%; }
    .frow__seg { animation: frow-seg auto linear both; animation-timeline: --frow; }
  }
}
@keyframes frow-seg { to { transform: scaleY(1); } }

/* Path widget */
.path-card { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 24px; padding: 20px; }
.path { position: relative; flex: 1 1 230px; max-width: 290px; margin: 0 auto; aspect-ratio: 390 / 668; }
.path > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.path__dots, .path__trail { fill: none; stroke-linecap: round; }
.path__dots { stroke: var(--strong); stroke-width: 5; stroke-dasharray: .1 12; }
.path__trail { stroke: var(--accent); stroke-width: 9; stroke-dasharray: 1 1; }
.path__glow, .path__node { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; }
.path__glow { width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(closest-side, var(--glow), transparent); }
.path__node { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 12px; background: none; cursor: pointer; --lab: 27px; }
.path__node:focus-visible { outline-offset: 1px; }
.path__coin { width: 40px; background: var(--rim, var(--strong)); color: var(--ink-2); }
.path__coin::before { inset: var(--rw, 1.5px); background: var(--fill, var(--sunken)); }
.path__label { position: absolute; left: 50%; top: 50%; translate: -50% 0; margin-top: var(--lab); padding: 0 4px; border-radius: 4px; background: var(--card); font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--ink-2); white-space: nowrap; }
[data-status="done"] .path__coin { --rim: var(--accent); --rw: 2px; --fill: var(--chip); color: #FFA012; }
.path__node[data-status="rest"] { width: 44px; height: 44px; --lab: 19px; }
.path__node[data-status="rest"] .path__coin { width: 26px; --fill: var(--card); }
.path__node[aria-pressed="true"] .path__coin { --rim: var(--ink); --rw: 2.5px; }
.path__node[aria-pressed="true"] .path__label { font-weight: 800; color: var(--ink); }
.path__node[data-status="today"] { width: 64px; height: 64px; --lab: 36px; }
.path__node[data-status="today"] .path__coin { width: 56px; --rim: var(--accent); --rw: 3px; --fill: var(--card); color: var(--accent-ink); }
.path__node[data-status="today"] .path__label { font-weight: 800; color: var(--accent-ink); background: none; }
.path__side { display: flex; flex: 1 1 220px; flex-direction: column; gap: 10px; min-width: 0; }
.path__card-in { padding: 16px 18px 18px; }
.path__kicker { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.card--active .path__kicker { color: var(--accent-ink); }
.path__title { letter-spacing: -.01em; }
.path__meta { margin-top: 3px; font-size: 14px; color: var(--ink-2); }
.card .path__ex { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; padding: 12px 0 0; border-top: 1px solid var(--hairline); list-style: none; }
.path__ex li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 1.35; }
.path__ex li span + span { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.path__hint, .log-demo__hint { font-size: 13px; color: var(--ink-2); }

/* Log demo: static → empty → resting → rested */
.log-demo { flex: 1 1 320px; min-width: 0; max-width: 430px; font-size: 16px; container-type: inline-size; }
.log-demo__head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 10px; }
.log-demo__icon { width: 36px; background: var(--sunken); color: var(--ink); }
.log-demo__title { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; }
/* Rows as subgrids */
.set-table { display: grid; grid-template-columns: minmax(52px, max-content) minmax(0, 1fr) 66px minmax(58px, max-content) 57.5px; column-gap: 8px; }
.set-row { grid-column: 1 / -1; display: grid; grid-template-columns: 36px minmax(0, 1fr) 66px 58px 44px; grid-template-columns: subgrid; align-items: center; column-gap: 8px; margin: 0 1.5px; padding: 4px 12px 4px 16px; }
.set-row--head { margin: 0; padding-block: 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); overflow-wrap: normal; }
.set-row--head > :not(:nth-child(2)) { white-space: nowrap; }
.set-row--head:lang(et), .set-row--head:lang(ru) { font-size: 10px; letter-spacing: .02em; }
.set-row--head :nth-child(n+3) { text-align: center; }
.set-row--done { background: var(--accent-soft); }
.set-row + .set-row:not(.set-row--w) { border-top: 1px solid var(--card); }
.set-row--live { transition: background-color var(--dur-2) ease-out; }
.set-row__n { font-weight: 800; }
.set-row__w { color: var(--accent-ink); }
.set-row__prev { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; color: var(--ink-2); white-space: nowrap; }
.set-row__rec { display: none; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--accent-ink); }
/* Value boxes grow with the text (34 px at 16 px); a number never wraps */
.set-row__val { display: grid; place-items: center; height: 2.125em; background: var(--card); clip-path: var(--hex-chip); font-weight: 600; white-space: nowrap; }
.set-row__val--edit { background: var(--accent); }
.set-row__val--edit span { display: grid; place-items: center; width: calc(100% - 3px); height: calc(100% - 3px); background: var(--card); clip-path: var(--hex-chip-in); }
.set-row__reps { color: var(--ink-2); }
.set-row__ok { display: grid; place-items: center; height: 44px; }
.set-row__ok > .coin { width: 28px; background: var(--done); color: #FFFFFF; }
.set-tick { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: none; cursor: pointer; }
.set-tick:focus-visible { outline-offset: 0; }
.set-tick .coin { width: 28px; color: var(--ink-2); transform: scale(.92); transition: transform var(--dur-2) var(--ease); }
.log-demo:not([data-state="empty"]) .set-row--live { background: var(--accent-soft); }
.log-demo:not([data-state="empty"]) .set-row__rec { display: inline-flex; }
.log-demo:not([data-state="empty"]) .set-row__reps { color: var(--ink); }
.log-demo:not([data-state="empty"]) .set-tick { cursor: default; }
.log-demo:not([data-state="empty"]) .set-tick .coin { background: var(--done); color: #FFFFFF; transform: none; }
.log-demo:not([data-state="empty"]) .set-tick .coin::before { background: var(--done); }
.rest-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 1.5px 0; padding: 14px 16px 16px; border-top: 1px solid var(--hairline); font-size: 14px; font-weight: 600; }
.rest-bar > svg { flex: none; color: var(--ink-2); }
.rest-bar__time { min-width: 38px; white-space: nowrap; }
.rest-bar__track { flex: 1 1 60px; height: 8px; border-radius: 4px; background: var(--sunken); overflow: hidden; }
.rest-bar__fill { display: block; height: 100%; border-radius: 4px; background: var(--accent); transform-origin: left; }
/* 44 px hit area */
.rest-bar__replay { position: relative; display: none; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid var(--strong); border-radius: 10px; background: var(--card); color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; }
.rest-bar__replay::after { content: ""; position: absolute; inset: -5px -1px; }
.log-demo[data-state^="rest"] .rest-bar__replay { display: flex; }
.log-demo__hint { margin-top: 10px; }
/* A table narrow for its text (phones below 375 px, the 640–654 px two-column squeeze, larger text): tighter
   columns; kg widens with the text so 100 still fits */
@container (max-width: 20.9em) {
  .set-table { grid-template-columns: minmax(36px, max-content) minmax(0, 1fr) max(44px, 2.5em) minmax(46px, max-content) 49.5px; column-gap: 4px; }
  .set-row { grid-template-columns: 26px minmax(0, 1fr) max(44px, 2.5em) 46px 44px; grid-template-columns: subgrid; column-gap: 4px; padding-inline: 10px 4px; }
}
/* Large text: five columns no longer fit, so the previous set moves under kg · reps, each header label gets room
   and the title a full line beside the icon */
@container (max-width: 17.2em) {
  .set-table { grid-template-columns: minmax(max-content, 1fr) repeat(2, minmax(2.25em, 4.125em)) max-content; }
  .set-row { grid-template-columns: max-content 1fr 1fr max-content; grid-template-columns: subgrid; }
  .set-row > :nth-child(1) { grid-area: 1 / 1; }
  .set-row > :nth-child(2) { grid-area: 2 / 2 / auto / -1; }
  .set-row > :nth-child(3) { grid-area: 1 / 2; }
  .set-row > :nth-child(4) { grid-area: 1 / 3; }
  .set-row > :nth-child(5) { grid-area: 1 / 4; }
  .set-row--head > :nth-child(1) { grid-column: 1 / -1; }
  .set-row--head > :nth-child(2) { grid-row: 3; }
  .set-row--head > :nth-child(n+3) { grid-row: 2; text-align: start; }
  .set-row--head > :nth-child(4) { grid-column: 3 / -1; }
  .log-demo__head { flex-wrap: wrap; }
  .log-demo__title { flex-basis: calc(100% - 48px); }
  .log-demo__head .tag { margin-left: auto; }
}

/* ── 10 · Home sections ── */
/* Home sections: programs, analytics, languages, privacy, FAQ teaser, community (homePrograms / homeAnalytics / homeSections.mjs) */

/* JS-only controls: invisible (space kept: no shift when site.js boots, e.g. a /#programs landing) until [data-js]; gone with JS off */
html:not([data-js]) [data-js-only] { visibility: hidden; }
@media (scripting: none) { :root [data-js-only] { display: none; } }

/* Section head: label → 8 → H2 → 14 → intro 17 px; split = text column + content column */
.hs-head { max-width: 42rem; }
.hs-head--wide { max-width: 44rem; }
.hs-head .caps { line-height: 1.6; }
.hs-head .h2 { margin-top: 8px; }
.hs-head__p { margin-top: 14px; font-size: 17px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.hs-more { margin-top: 9px; font-size: 16px; }
.hs-more svg { flex: none; }
.hs-split { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px 64px; }

/* Segmented tabs / toggle, full width with equal buttons; wraps rather than truncating */
.seg--fill { display: flex; flex-wrap: wrap; gap: 4px; }
.seg--fill .seg__btn { flex: 1; padding: 0 10px; white-space: nowrap; }
.seg__btn:hover:not([aria-selected="true"], [aria-pressed="true"]) { color: var(--ink); background: rgba(127, 127, 127, .12); }
.seg__btn:focus-visible { outline-offset: 0; }

/* ── Programs ── */
.program-filter { display: flex; flex-wrap: wrap; gap: 14px 32px; margin-top: 32px; }
.program-filter__group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.program-filter__label { margin-right: 2px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
/* Chip: the ring sits on the unclipped button; edge + fill clipped inside */
.chip-btn { display: inline-flex; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.chip-btn .chip__fill { gap: 7px; height: 38px; font-size: 14px; white-space: nowrap; }
.chip__n { font-size: 12px; opacity: .75; font-variant-numeric: tabular-nums; }
.chip-btn:hover:not(:disabled, [aria-pressed="true"]) .chip { background: var(--ink-2); }
.chip-btn:hover:not(:disabled, [aria-pressed="true"]) .chip__fill { background: var(--sunken); }
.chip-btn[aria-pressed="true"] .chip, .chip-btn[aria-pressed="true"] .chip__fill { background: var(--chip); color: var(--on-chip); }
.chip-btn:disabled { opacity: .45; cursor: not-allowed; }
.program-status { margin-top: 18px; font-size: 14px; color: var(--ink-2); }
.program-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; margin-top: 14px; }
.program-card { display: flex; flex-direction: column; container-type: inline-size; }
.program-card__body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 16px 20px 20px; }
.program-card .h3 { letter-spacing: -.01em; }
.program-card__tagline { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
ul.program-card__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
/* Cover, Program Covers 1b: brand gradient + hex grid, one outlined coin with the icon, the key number · where */
.program-cover { order: -1; position: relative; height: 150px; margin: 1px 1px 0; overflow: hidden; background: var(--brand-gradient); clip-path: var(--hex-card-top); color: #F4F6F8; }
.program-cover::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .07); -webkit-mask: var(--hex-grid) 0 0 / var(--hex-grid-size) repeat; mask: var(--hex-grid) 0 0 / var(--hex-grid-size) repeat; }
.program-cover .tag { position: absolute; left: 16px; top: 18px; }
.program-cover .coin { position: absolute; }
.program-cover__coin { width: 76px; right: 30px; top: 50%; translate: 0 -50%; background: #FFA012; color: #FFA012; }
.program-cover__coin::before { inset: 2.5px; background: #1A1D22; }
.program-cover__dot { width: 28px; right: 112px; bottom: 16px; background: rgba(255, 255, 255, .25); }
.program-cover__dot::before { background: rgba(26, 29, 34, .6); }
.program-cover__dot + .program-cover__dot { width: 20px; right: 16px; top: 12px; bottom: auto; }
.program-cover__kicker { position: absolute; left: 16px; right: 146px; bottom: 14px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
/* Large text: the kicker no longer fits beside the coin, so the cover grows: tag + coin on top (wrapping if need be), kicker full width */
@container (max-width: 15.5em) {
  .program-cover { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: space-between; gap: 8px; height: auto; min-height: 150px; padding: 18px 16px 14px; }
  .program-cover .tag, .program-cover__kicker { position: static; }
  .program-cover__art { position: relative; width: 76px; aspect-ratio: 1 / 1.1547; margin: 0 14px 0 auto; }
  .program-cover__coin { right: 0; top: 0; translate: none; }
  .program-cover__dot { display: none; }
  .program-cover__kicker { flex-basis: 100%; }
}
.programs-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 24px; font-size: 16px; }
.programs-line strong { font-weight: 600; }
.programs-line .tag--soon { background: var(--card); }

/* ── Analytics ── */
.analytics { margin-top: 32px; padding: clamp(16px, 2.4vw, 28px); }
.analytics .seg { max-width: 528px; }
.analytics__grid { display: flex; flex-wrap: wrap; gap: 28px 48px; margin-top: 24px; }
.analytics__body { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.heatmap { display: flex; justify-content: center; gap: clamp(16px, 3vw, 40px); }
.heatmap__fig { flex: 0 1 130px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
/* The static <img> and the drawn <svg> take the same 130 × 260 box (no shift when site.js swaps them) */
.heatmap img, .heatmap svg { display: block; width: 130px; max-width: 100%; height: auto; aspect-ratio: 1 / 2; overflow: visible; }
.heatmap path { stroke-linejoin: round; cursor: pointer; transition: fill var(--dur-2) var(--ease); }
.heatmap .heatmap__outline { fill: var(--heat-neutral); stroke: var(--heat-outline); stroke-width: 3; cursor: auto; }
.heatmap [data-on] { stroke: var(--ink); stroke-width: 9; }
.heat-legend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); }
.heat-legend i { width: 22px; height: 8px; border-radius: 2px; background: var(--heat-1); }
.heat-legend i + i { background: var(--heat-2); }
.heat-legend i + i + i { background: var(--heat-3); }
.heat-legend i + i + i + i { background: var(--heat-4); }
.heat-legend i + i + i + i + i { background: var(--heat-5); }
.an-sel { max-width: 24rem; text-align: center; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.an-sel strong { color: var(--ink); font-weight: 600; }
/* Panels: stacked without JS; with JS they share one grid cell (one size, no shift on a tab swap) */
.an-panels { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 28px; container-type: inline-size; }
[data-js] .an-panels { display: grid; grid-template-columns: minmax(0, 1fr); }
[data-js] .an-panel { grid-area: 1 / 1; }
[data-js] .an-panel[data-off] { visibility: hidden; }
.an-panel__title { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.an-panel__sub { margin: 2px 0 12px; font-size: 14px; color: var(--ink-2); }
.muscle-list { display: flex; flex-direction: column; gap: 2px; }
.muscle-list button, .an-col { border: 0; border-radius: 10px; background: none; cursor: pointer; }
.muscle-list button { width: 100%; display: grid; grid-template-columns: 76px minmax(0, 1fr) 100px; align-items: center; gap: 12px; min-height: 44px; padding: 4px 10px; text-align: left; }
[data-js] .muscle-list [aria-pressed="true"], [data-js] .an-col[aria-pressed="true"] { background: var(--sunken); }
/* The selected (sunken) row: a 1.5 px ink-2 edge marks it (the fill alone is 1.2:1, WCAG 1.4.11, as on the segmented
   controls); its empty cells and coins turn card-coloured, so the scale stays readable */
[data-js] .muscle-list [aria-pressed="true"] { --base: var(--card); box-shadow: inset 0 0 0 1.5px var(--ink-2); }
[data-js] .muscle-list [aria-pressed="true"] .cells i:not(.on) { background: var(--card); }
.muscle-list button:focus-visible, .an-col:focus-visible { outline-offset: 0; }
.muscle-list__name { font-size: 15px; font-weight: 600; }
.muscle-list__val { text-align: right; font-size: 14px; line-height: 1.3; color: var(--ink-2); }
/* Muscle focus: five pointed cells, 14 px, gap 3.5; filled cells take the owner's ramp in order */
.cells { display: flex; align-items: center; gap: 3.5px; }
.cells i { flex: 1; height: 14px; background: var(--sunken); clip-path: polygon(4.07px 6.5%, 5.38px 0, calc(100% - 5.38px) 0, calc(100% - 4.07px) 6.5%, calc(100% - .61px) 43.5%, calc(100% - .61px) 56.5%, calc(100% - 4.07px) 93.5%, calc(100% - 5.38px) 100%, 5.38px 100%, 4.07px 93.5%, .61px 56.5%, .61px 43.5%); }
.cells .on { background: var(--heat-2); }
.cells .on + .on { background: var(--heat-3); }
.cells .on + .on + .on { background: var(--heat-4); }
.cells .on + .on + .on + .on { background: var(--heat-5); }
/* Recovery: ten hex coins (one per 10 %, whole coins), amber below 50 %; 13 px tiles at full width, smaller in a narrow column, never overflowing it */
.coins { width: 100%; max-width: 130px; height: 14px; background: linear-gradient(to right, var(--c, var(--chart-3)) 0 calc(var(--p) - 1.15%), var(--base, var(--sunken)) 0); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 12'%3E%3Cpath d='M5 0L10 2.89V8.66L5 11.55L0 8.66V2.89Z'/%3E%3C/svg%3E") 0 50% / 10% 12px repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 12'%3E%3Cpath d='M5 0L10 2.89V8.66L5 11.55L0 8.66V2.89Z'/%3E%3C/svg%3E") 0 50% / 10% 12px repeat-x; }
.coins--low { --c: var(--heat-5); }
/* Weekly sets: hex-coin columns */
.an-cols { display: flex; gap: 4px; min-height: 242px; padding-top: 6px; }
.an-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; padding: 4px 0; }
.an-col .coin { width: 32px; background: var(--accent); font-size: 12px; font-weight: 800; }
.an-col .coin::before { inset: 2px; }
[data-js] .an-col[aria-pressed="true"] .coin { background: var(--ink); color: var(--on-chip); }
[data-js] .an-col[aria-pressed="true"] .coin::before { background: var(--chip); }
.an-col__bar { width: min(76%, 30px); height: var(--h); background: var(--c); clip-path: polygon(0 4px, 4px 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 0 100%); }
.an-col__label { font-size: 11px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
/* Narrow panel (< ~375 px phones): name + value, then the cells / coins full width; columns use the card padding, smaller labels */
@container (max-width: 299.98px) {
  .muscle-list button { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; padding-block: 8px; }
  .muscle-list [aria-hidden] { grid-area: 2 / 1 / 3 / 3; }
  .an-cols { gap: 2px; margin-inline: -8px; }
  .an-col__label { font-size: 10px; }
}
/* Large text: seven names no longer fit side by side, so each column becomes a row (name, then bar and count) */
@container (max-width: 14em) or ((min-width: 300px) and (max-width: 16em)) {
  .an-cols { flex-direction: column; min-height: 0; }
  .an-col { flex-flow: row wrap; justify-content: flex-start; gap: 4px 8px; padding: 6px 10px; }
  .an-col .coin { order: 1; width: max(32px, 2em); }
  .an-col__bar { width: var(--h); height: 12px; clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%); }
  .an-col__label { order: -1; flex-basis: 100%; text-align: start; white-space: normal; }
}
/* Premium block: text + two overlapped phone screens (.device frame: hero part) */
.an-premium { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 56px; margin-top: clamp(40px, 5vw, 64px); }
.an-premium__text { flex: 1 1 320px; max-width: 30rem; font-size: 16px; }
.an-premium__h { margin-top: 10px; font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
.an-premium__text p { margin-top: 8px; font-size: 16px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.phone-pair { flex: 1 1 380px; min-width: 0; display: flex; justify-content: center; align-items: flex-start; }
.phone-pair .device { --w: min(47%, 230px); --p: 6px; --r: 26px; --sh: 0 0 #0000; }
.phone-pair .device + .device { margin: 48px 0 0 -14px; --sh: 0 30px 60px -30px rgba(20, 22, 26, .5); }
.an-note { margin-top: clamp(32px, 4vw, 48px); font-size: 14px; color: var(--ink-2); }

/* ── Languages ── */
.languages { display: flex; flex-wrap: wrap; align-items: center; gap: 40px 64px; }
.languages__text { flex: 1 1 340px; min-width: 0; max-width: 30rem; }
.languages__toggle { max-width: 408px; margin-top: 24px; background: var(--bg); }
.languages__note { margin-top: 10px; font-size: 13px; color: var(--ink-2); }
/* No JS: the three screens side by side (a swipe row on phones); JS: one screen, same box */
.lang-shots { flex: 1 1 420px; min-width: 0; display: flex; gap: 16px; padding-bottom: 4px; overflow-x: auto; scroll-snap-type: x proximity; }
.lang-shots__fig { flex: 0 0 78%; scroll-snap-align: start; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.lang-shots img { display: block; width: 100%; }
.lang-shots figcaption { margin-top: 8px; }
@media (min-width: 960px) { .lang-shots__fig { flex-basis: 31%; } }
[data-js] .lang-shots { justify-content: center; overflow: visible; }
[data-js] .lang-shots__fig { flex-basis: min(100%, 460px); }
[data-js] .lang-shots__fig:not([data-on]) { display: none; }
[data-js] .lang-shots figcaption { display: none; }

/* ── Privacy ── */
.privacy__head { flex: 1 1 300px; min-width: 0; max-width: 26rem; }
.privacy-list { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.privacy-list li { display: flex; align-items: center; gap: 16px; padding: 12px 0; font-size: 17px; }
.privacy-list li:not(:last-child) { border-bottom: 1px solid var(--hairline); }
.privacy-list .coin { width: 40px; background: var(--sunken); }

/* ── FAQ teaser: the shared faq-item (hex card + <details>, faq-press part) at the Home prototype's size ── */
.faq-teaser__head { flex: 1 1 280px; min-width: 0; max-width: 24rem; }
.faq-teaser .hs-more { margin-top: 18px; }
.faq-teaser__list { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.faq-teaser .faq-item summary { min-height: 80px; padding-block: 10px; }
.faq-teaser .faq-item p { max-width: 44rem; }

/* ── Community band: dark glass tile on the brand gradient (same in both themes) ── */
.community { --focus: #FFA012; }
.community > .container { padding-block: clamp(72px, 9vw, 128px) clamp(56px, 7vw, 96px); }
.community-tile { position: relative; isolation: isolate; display: flex; flex-wrap: wrap; gap: 32px 56px; padding: clamp(24px, 4vw, 48px); background: var(--glass-edge); clip-path: var(--hex-card); }
.community-tile::before { content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--glass); clip-path: var(--hex-card-in); }
.community__intro { flex: 1 1 320px; min-width: 0; max-width: 30rem; }
.community .caps { color: #FFA012; line-height: 1.6; }
.community .h2 { margin-top: 8px; }
.community__p { margin-top: 14px; font-size: 17px; line-height: 1.6; color: #C3C9D3; text-wrap: pretty; }
.community__intro .btn, .community .store-badges { margin-top: 26px; }
.community .btn--primary { background: #FF9200; }
.community .btn--primary:hover { background: #FFA012; }
.community-rows { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.community-row { display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .06); color: #F4F6F8; text-decoration: none; }
.community-row:hover { background: rgba(255, 255, 255, .11); }
.community-row .coin { width: 40px; background: #FFA012; color: #FFA012; }
.community-row .coin::before { background: #1A1D22; }
.community-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.community-row__name { font-size: 16px; font-weight: 600; }
.community-row__note, .community-row > svg, .qr-card p { color: #B8BFCA; }
.community-row__note { font-size: 14px; }
.community-row > svg { flex: none; }
.qr-card { display: none; }
@media (min-width: 960px) { .qr-card { flex: 0 0 150px; display: flex; flex-direction: column; align-items: center; gap: 10px; } }
.qr-card__code { width: 150px; height: 150px; padding: 10px; border-radius: 12px; background: #FFFFFF; }
.qr-card img { display: block; width: 130px; height: 130px; }
.qr-card p { font-size: 13px; text-align: center; }

/* View Transitions (filter + screen swap): a 200 ms cross-fade */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-2); }

/* ── 11 · Pages ── */
/* Legal + beta (H1: long ru words) */
.legal, .beta { padding-block: clamp(32px, 5vw, 64px) clamp(56px, 7vw, 96px); }
.legal .h1, .beta .h1 { font-size: clamp(24px, 10.3vw - 8px, clamp(32px, 3.6vw, var(--h1, 46px))); line-height: 1.08; hyphens: auto; }
html:lang(ru) .legal .h1 { font-size: clamp(24px, 9vw - 4px, clamp(32px, 3.6vw, var(--h1, 46px))); }

/* L1 · Legal */
.legal { display: grid; gap: 24px 72px; align-items: start; }
.legal__doc { min-width: 0; max-width: var(--measure); }
.legal__updated { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.legal section { margin-top: 36px; }
.legal h2 { margin-bottom: 10px; font-size: 22px; line-height: 1.3; font-weight: 800; letter-spacing: -.01em; scroll-margin-top: 16px; }
.legal section p { margin-bottom: 14px; line-height: 1.65; text-wrap: pretty; }
.toc { display: flex; flex-direction: column; gap: 1px; }
.toc a { display: flex; gap: 10px; align-items: baseline; min-height: 36px; padding: 3px 10px; border-radius: 8px; color: var(--ink-2); font-size: 14px; line-height: 1.4; text-decoration: none; }
.toc a:hover { background: var(--sunken); color: var(--ink); }
.toc a:focus-visible { outline-offset: -2px; }
.toc .num { flex: none; width: 20px; }
.legal-toc { display: none; }
.legal-toc__label { margin-bottom: 9px; line-height: 1.6; color: var(--ink-2); }
.legal-toc-m { margin-top: 22px; padding: 2px 16px; border-radius: 12px; background: var(--sunken); font-size: 16px; }
.legal-toc-m summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; min-height: 48px; font-weight: 600; }
.legal-toc-m summary span { display: inline-flex; align-items: center; gap: 2px; flex: none; color: var(--ink-2); }
.legal-toc-m .toc a { padding-block: 12px; }
.legal-also { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--hairline); font-size: 16px; color: var(--ink-2); }
.legal-also a { display: inline-block; padding-block: 9px; margin-block: -9px; }
.legal-also__doc { font-weight: 600; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (min-width: 1024px) {
  .legal { grid-template-columns: 280px minmax(0, 1fr); }
  .legal-toc { display: block; position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; padding-top: 6px; }
  .legal-toc-m { display: none; }
}

/* L2 · Beta */
.beta { --h1: 48px; max-width: 1100px; display: flex; flex-direction: column; gap: 28px; }
.beta__intro { max-width: var(--measure); }
.beta__sub { margin-top: 10px; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.beta__pitch { margin-top: 14px; font-size: 18px; text-wrap: pretty; }
.beta__cards { display: grid; gap: 16px; }
.beta-card::before { background: linear-gradient(var(--sunken) 200px, var(--card) 0); }
.beta-card__visual { position: relative; overflow: hidden; height: 200px; margin: 1px 1px 0; }
.beta-card__visual::before, .beta-card__visual::after, .page-nf::before, .page-nf::after, .pf__mark::before { content: ""; position: absolute; }
.beta-card__visual::before, .page-nf::before { inset: 0; background: var(--grid); -webkit-mask: var(--hex-grid) 0 0 / var(--hex-grid-size); mask: var(--hex-grid) 0 0 / var(--hex-grid-size); }
.beta-card__visual::after { inset: calc(50% - 150px); border-radius: 50%; background: radial-gradient(closest-side, var(--glow), transparent); }
.beta-card__phone { position: absolute; z-index: 1; left: 50%; top: 24px; width: 150px; translate: -50%; padding: 6px; border-radius: 28px; background: var(--frame); box-shadow: 0 30px 50px -28px rgba(20, 22, 26, .55); }
.beta-card__phone img { display: block; width: 100%; border-radius: 22px; }
/* L2's store-icon slots as neutral ProLyft coins (Apple and Google allow only their official badges, owner 2026-10-13):
   a download coin on the phone's corner, a phone coin by the platform name */
.beta-card__badge { position: absolute; right: -30px; bottom: calc(100% - 150px); filter: drop-shadow(0 8px 10px rgba(20, 22, 26, .3)); }
.beta-card__badge .coin { width: 58px; color: var(--accent); }
.beta-card__icon { width: 32px; color: var(--ink); }
.beta-card__body { display: flex; flex-direction: column; gap: 18px; padding: clamp(20px, 2.4vw, 28px); }
.beta-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
.beta-card h2 { font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.beta-card__head span, .beta-step__note { font-size: 14px; color: var(--ink-2); }
.beta-card__note { margin-top: -6px; font-size: 15px; color: var(--ink-2); }
.beta-steps { display: flex; flex-direction: column; gap: 18px; }
.beta-steps > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
.beta-steps > li > .coin { width: 40px; background: var(--strong); font-size: 16px; font-weight: 800; }
.beta-steps > .beta-step--go > .coin, .status-card__coin--ok { background: var(--accent); color: var(--on-accent); }
.beta-steps > .beta-step--gift > .coin, .status-card__coin--alert { background: var(--accent-soft); color: var(--accent-ink); }
.beta-steps > li > div { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 8px; font-size: 16px; line-height: 1.55; }
.beta-steps .btn--primary { padding: 0 22px; font-size: 16px; box-shadow: none; }
.beta-channels { display: flex; flex-direction: column; gap: 8px; align-self: stretch; }
.beta-channel { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 6px 12px; border-radius: 12px; background: var(--sunken); line-height: 1.35; text-decoration: none; }
.beta-channel .coin { width: 34px; background: var(--accent); color: var(--accent-ink); }
.beta-channel__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.beta-channel__name { font-weight: 600; }
.beta-channel__note { font-size: 13px; color: var(--ink-2); }
.beta-channel__go { color: var(--ink-2); }
.beta-card__after { padding-top: 14px; border-top: 1px solid var(--hairline); font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.beta__questions { font-size: 14px; color: var(--ink-2); }
.beta__questions a { font-weight: 600; }
@media (min-width: 760px) {
  .beta-card { display: grid; grid-template-columns: 301px minmax(0, 1fr); }
  .beta-card::before { background: linear-gradient(90deg, var(--sunken) 300px, var(--card) 0); }
  .beta-card__visual { height: auto; margin: 1px 0 1px 1px; }
  .beta-card__phone { top: 50%; width: 190px; translate: -50% -50%; }
  .beta-card__badge { bottom: -18px; }
  .beta-card__badge .coin { width: 72px; }
}

/* L3 · Status */
.status { display: flex; flex-direction: column; align-items: center; min-height: 100vh; padding: 40px 20px; }
.status__logo img, .nf-page__logo img { display: block; }
.status-card { width: 100%; max-width: 440px; margin-block: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 28px 28px; text-align: center; font-size: 16px; color: var(--ink-2); }
.status-card__coin { width: 64px; font-size: 22px; font-weight: 600; }
.status-card__coin svg { width: 30px; height: 30px; stroke-width: 2.4; }
.status-card h1 { margin-top: 6px; font-size: 24px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.status-card__cta { display: flex; margin-top: 8px; }
.status-card__cta .btn { padding: 0 26px; box-shadow: none; }
.status-card__close { margin-top: 4px; font-size: 14px; }

/* N1 · 404, profile */
.page-nf { position: relative; isolation: isolate; min-height: 100vh; padding: 32px clamp(20px, 12.3vw, 48px) 48px; }
.page-nf::before, .page-nf::after { inset: 0; z-index: -1; }
.page-nf::after { background: radial-gradient(ellipse 80% 55% at 50% 0, transparent 20%, var(--bg) 75%); }
.nf-page, .nf { display: flex; flex-direction: column; gap: 28px; }
.nf-page { max-width: 560px; margin-inline: auto; }
.nf-page__logo { align-self: flex-start; }
.nf-block { padding-top: 22px; border-top: 1px solid var(--hairline); }
.nf-block h1, .nf-block h2 { font-size: 24px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.nf-block h1 { font-size: 30px; }
.nf-block p:first-of-type { margin: 8px 0 12px; font-size: 16px; color: var(--ink-2); }
.nf-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.nf-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 600; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
/* picked by <html lang> */
.nf-pick { display: none; }
html[lang="en"] .nf-pick[lang="en"], html[lang="et"] .nf-pick[lang="et"], html[lang="ru"] .nf-pick[lang="ru"] { display: contents; }
html[lang="en"] .nf-alt[lang="en"], html[lang="et"] .nf-alt[lang="et"], html[lang="ru"] .nf-alt[lang="ru"] { display: none; }
.pf { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 24px; text-align: center; }
.page-nf:has(.pf:not([hidden])) :is(.nf-page__logo, .nf-foot) { align-self: center; text-align: center; }
.pf__mark { position: relative; width: 96px; height: 96px; }
.pf__mark::before { inset: -40px; border-radius: 50%; background: radial-gradient(closest-side, var(--glow), transparent); }
.pf__mark img { position: relative; display: block; }
.pf h1 { margin-top: 8px; font-size: clamp(28px, 10.3vw, 40px); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }
.pf__lead { font-size: 17px; color: var(--ink-2); }
.pf .btn--primary { margin-top: 6px; padding: 0 28px; }
.pf__note, .nf-foot { font-size: 14px; color: var(--ink-2); }
.pf__desktop:not([hidden]) + .pf__note { display: none; }
.pf__get { width: 100%; margin-top: 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px; }
.pf__get h2 { font-size: 20px; font-weight: 800; }
.pf__get p { font-size: 15px; color: var(--ink-2); }
.pf__get p:empty { display: none; }
.pf__get .btn { padding: 0 20px; }
.nf-foot { margin-top: 40px; }
.nf-foot a { display: inline-flex; align-items: center; min-height: 44px; }
.nf-foot .sep { padding: 0 8px; }
/* FAQ + Press (F1, F2) */
.faq, .press { padding-block: clamp(36px, 5vw, 72px) clamp(56px, 7vw, 96px); }
.faq .h1, .press .h1 { margin-top: 8px; }
.faq h2, .press h2 { font-size: 22px; letter-spacing: -.01em; }
.faq-item a, .faq__stuck a, .press__contact a { font-weight: 600; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.faq, .press__top, .press__cols, .press__dl, .press__brand, .press-quote, .logo-tiles { display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: flex-start; }
.faq__main, .faq-group, .faq-index, .press, .press__boiler, .press__logos, .press__contact, .download-tile .card, .download-tile__text { display: flex; flex-direction: column; }
.faq__stuck, .press__contact, .press-quote { padding: 18px 20px; border-radius: 12px; background: var(--sunken); font-size: 16px; }

.faq { column-gap: 64px; }
.faq__side { flex: 1 1 260px; max-width: 300px; min-width: 0; }
.faq__updated { margin-top: 10px; }
.faq-index { gap: 2px; margin-top: 22px; }
.faq-index a { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 10px; font-size: 15px; font-weight: 600; text-decoration: none; }
.faq-index a:first-child { background: var(--sunken); }
@media (max-width: 899.98px) { .faq-index { display: none; } }
.faq__main { flex: 1 1 520px; max-width: 760px; min-width: 0; gap: 36px; }
.faq__intro { text-wrap: pretty; }
.faq-group { gap: 10px; }
.faq h2 { margin-bottom: 4px; }

/* FAQ item (also Home): ring inside the clip */
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 74px; padding: 8px 20px; border-radius: 12px; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline-offset: -5px; }
.faq-item h3 { font-size: 17px; line-height: 1.35; font-weight: 600; }
.faq-item svg { flex: none; color: var(--ink-2); }
.faq-item[open] svg { rotate: 180deg; }
.faq-item p { padding: 0 20px 20px; font-size: 16px; color: var(--ink-2); }
.faq-item strong { font-weight: 600; color: var(--ink); }

/* Press (flags.press); download tiles: ring on the unclipped <a> */
.press { gap: clamp(40px, 5vw, 64px); overflow-wrap: anywhere; }
.press h2 { font-size: 24px; }
.press__top { row-gap: 20px; align-items: flex-end; justify-content: space-between; }
.press__top > div { max-width: 40rem; }
.press .h1 + p { margin-top: 12px; }
.press__contact { gap: 4px; padding: 14px 18px; font-size: 17px; }
.press__cols > * { flex: 1 1 420px; min-width: 0; }
.press__boiler { gap: 16px; }
.fact-sheet { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.fact-sheet tr { border-top: 1px solid var(--hairline); }
.fact-sheet th { width: 34%; padding: 12px 16px 12px 0; text-align: left; vertical-align: top; font-weight: 600; color: var(--ink-2); }
.fact-sheet td { padding: 12px 0; }
.boiler { padding: 18px 20px; font-size: 15px; }
.boiler .caps { margin-bottom: 6px; }
.press-quote { gap: 20px 32px; align-items: center; padding: clamp(20px, 3vw, 32px); border-radius: 14px; }
.press img.coin { object-fit: cover; }
.press-quote blockquote { flex: 1 1 320px; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.45; font-weight: 600; letter-spacing: -.01em; text-wrap: pretty; }
.press__dl { gap: 12px 24px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.press__dl .btn { white-space: normal; }

.press__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.press__tiles li, .download-tile { display: grid; }
.download-tile { border-radius: 12px; text-decoration: none; }
.download-tile__thumb { display: grid; place-items: center; height: 132px; margin: 1px 1px 0; background: var(--sunken); }
.download-tile__text { gap: 2px; padding: 14px 16px 16px; font-size: 13px; color: var(--ink-2); }
.press b { font-size: 16px; font-weight: 600; color: var(--ink); }
.press__brand { gap: 24px 40px; margin-top: 14px; }
.press__brand > * { flex: 1 1 360px; }
.press__swatches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.press__swatches li { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--hairline); font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.press__swatches .coin { width: 40px; box-shadow: inset 0 0 0 1px #00000014; }
.press__swatches b { font-size: 15px; }
.press__logos { gap: 12px; }
.logo-tiles { gap: 10px; }
.logo-tiles span { display: grid; place-items: center; width: 200px; height: 96px; border-radius: 12px; }
.press__logos ul { padding-left: 18px; font-size: 15px; }
.press__logos strong { color: var(--ink); }

/* ── 12 · Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 0ms !important; scroll-behavior: auto !important; }
}