/* ============================================================================
   Kometa — marketing landing page
   Extends the app's "Usta Flow" system (web/projects/shared/styles/tokens.css)
   at MARKETING scale: the app is dense 11-13px UI, this is read at arm's length.
   Same palette, same families, same pills, same one-accent discipline.
   ========================================================================= */

/* ── Fonts, self-hosted ───────────────────────────────────────────────────
   These were two <link>s to fonts.googleapis.com until 2026-09-02. The
   stylesheet there is render-blocking and cross-origin, so first paint waited
   on a DNS lookup, a TLS handshake and a round trip to a third party before it
   could even learn the font URLs. Same bytes now, from our own origin, already
   warm from index.html.

   BOTH FAMILIES ARE VARIABLE, which is what makes this cheap: one file per
   family covers every weight the page uses (400/600/700/800 heading,
   400/600/700 mono) instead of seven static files.

   Only three subsets ship, and that is exactly what a browser downloaded from
   Google before — it fetches by unicode-range, so latin-ext, vietnamese and
   greek were never requested. Verified rather than assumed: the only rendered
   character on the page outside these ranges is U+2248 (≈, 9 occurrences), and
   it is in NO subset of either family, so it fell back to a system font before
   this change and still does.

   The heading family is Manrope since 2026-09-23 (founder decision), replacing
   Hanken Grotesk, which has no Russian letters at all — Google publishes only
   cyrillic-EXT for it (U+0460-052F), which is not the Russian alphabet, so the
   Russian copy had always rendered in system-ui. Manrope's cyrillic subset is
   the basic one, so Russian now gets the same face as Uzbek and English.

   To add a subset back: take the URL from
   https://fonts.googleapis.com/css2?family=Manrope:wght@400..800&family=JetBrains+Mono:wght@400..700&display=swap
   (with a modern browser User-Agent, or you get .ttf), drop the file in
   fonts/, and copy its unicode-range verbatim. Getting the range wrong is
   silent: the browser simply never asks for the file.
   ─────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(fonts/manrope-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* The eyebrows, the eʼlon numbers and the queue mock are mono. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/jetbrains-mono-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  /* surfaces — a touch deeper than the app so the aurora has something to glow on */
  --bg:      #0D0F0F;
  --bg2:     #121414;
  --card:    #16191A;
  --card2:   #1E2020;

  --border:  #242728;
  --border2: #33383A;

  --text:    #F4F4F4;
  --text2:   #C4C7C7;
  --muted:   #8E9192;

  /* the one accent — spent on the single action per screen */
  --amber:   #FFBF00;
  --violet:  #A78BFA;
  --green:   #3ECF8E;
  --blue:    #54A9EB;

  --fh: 'Manrope', system-ui, -apple-system, sans-serif;
  --fm: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --r-pill: 9999px;
  --r-card: 16px;

  --wrap: 1180px;
  --gut: clamp(20px, 5vw, 40px);

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ── reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--fh);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; letter-spacing: -.025em; line-height: 1.06; font-weight: 800; text-wrap: balance; }
p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: fixed; top: -100px; left: 16px; z-index: 200;
  background: var(--amber); color: #121414; padding: 12px 20px;
  border-radius: var(--r-pill); font-weight: 700; transition: top .2s;
}
.skip:focus { top: 16px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

/* ── atmosphere: drifting aurora + grain ────────────────────────────────── */
.aurora { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
.b1 {
  width: 62vw; height: 62vw; max-width: 900px; max-height: 900px;
  top: -22vw; left: -14vw;
  background: radial-gradient(circle at 40% 40%, rgba(255,191,0,.20), rgba(255,191,0,0) 68%);
  animation: drift1 34s var(--ease) infinite alternate;
}
.b2 {
  width: 54vw; height: 54vw; max-width: 780px; max-height: 780px;
  top: 6vw; right: -18vw;
  background: radial-gradient(circle at 50% 50%, rgba(167,139,250,.20), rgba(167,139,250,0) 66%);
  animation: drift2 44s var(--ease) infinite alternate;
}
.b3 {
  width: 70vw; height: 46vw; max-width: 1000px;
  top: 92vh; left: 12vw;
  background: radial-gradient(ellipse at 50% 50%, rgba(84,169,235,.13), rgba(84,169,235,0) 70%);
  animation: drift3 52s var(--ease) infinite alternate;
}
@keyframes drift1 { to { transform: translate3d(14vw, 10vh, 0) scale(1.16); } }
@keyframes drift2 { to { transform: translate3d(-16vw, 16vh, 0) scale(.86); } }
@keyframes drift3 { to { transform: translate3d(10vw, -14vh, 0) scale(1.2); } }

.grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* ── type scale ─────────────────────────────────────────────────────────── */
.display {
  font-size: clamp(42px, 7.4vw, 88px);
  letter-spacing: -.035em;
  line-height: .98;
}
.display.sm { font-size: clamp(34px, 5.4vw, 62px); }
.display em, .h2 em {
  font-style: normal;
  background: linear-gradient(96deg, var(--amber) 12%, #FFD84D 42%, var(--violet) 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.h2 { font-size: clamp(28px, 3.8vw, 44px); letter-spacing: -.03em; line-height: 1.08; }
.lede { font-size: clamp(17px, 1.5vw, 20px); color: var(--text2); max-width: 56ch; text-wrap: pretty; }
.body { font-size: 16.5px; color: var(--text2); max-width: 62ch; text-wrap: pretty; }
.sub { margin-top: 14px; }
.center { text-align: center; margin-inline: auto; }

.eyebrow {
  font-family: var(--fm);
  font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 18px;
}
.eyebrow.center { text-align: center; }
.eyebrow b { font-weight: inherit; }
.num { font-family: var(--fm); font-weight: 700; font-feature-settings: "tnum" 1; }
.fineprint { font-size: 13.5px; color: var(--muted); margin-top: 26px; }

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn {
  --gx: 50%; --gy: 50%;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; min-height: 50px;
  border-radius: var(--r-pill);
  font-weight: 700; font-size: 15.5px; letter-spacing: -.005em;
  white-space: nowrap;
  transition: transform .25s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .35s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: 10px 18px; min-height: 40px; font-size: 14px; }
.btn-lg { padding: 18px 32px; min-height: 58px; font-size: 17px; }
.btn-full { width: 100%; margin-top: 26px; }

.btn-amber {
  background: var(--amber); color: #121414;
  box-shadow: 0 6px 24px -8px rgba(255,191,0,.55);
}
.btn-amber:hover { box-shadow: 0 14px 40px -10px rgba(255,191,0,.7); }
/* pointer-tracked sheen — the cursor drags a soft highlight across the pill */
.btn-amber.glow::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; opacity: 0; transition: opacity .3s;
  background: radial-gradient(120px circle at var(--gx) var(--gy), rgba(255,255,255,.65), transparent 62%);
}
.btn-amber.glow:hover::after { opacity: 1; }
/* A springy nudge: the transform curve overshoots, then settles. */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn-amber.glow { transition-timing-function: cubic-bezier(.34, 1.56, .64, 1), ease, ease, ease; }
  .btn-amber.glow:hover { transform: translateY(-2px) scale(1.035); }
}

.btn-ghost {
  color: var(--text); border: 1px solid var(--border2);
  background: rgba(255,255,255,.02);
}
.btn-ghost:hover { border-color: var(--muted); background: rgba(255,255,255,.05); }
.arr { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

/* ── nav ────────────────────────────────────────────────────────────────── */
.masthead { position: sticky; top: 0; z-index: 100; }
/* The masthead's measured height (54 + 1 + 68; 144 at <=680, below), so a nav anchor lands its
   section under the bar rather than behind it. Change it when either bar changes height. */
html { scroll-padding-top: 124px; }
.nav {
  transition: background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom: 1px solid transparent;
}
.nav.stuck {
  background: rgba(13,15,15,.72);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--border);
}
.nav { position: relative; }
.nav-in { display: flex; align-items: center; gap: 28px; height: 68px; }
/* flex: none — as `0 1 auto` holding an <img> at width:auto, the flex algorithm squeezed the
   lockup to 0-27px at 375 whenever the row ran over (the logo was missing on phones). */
.brand { display: inline-flex; align-items: center; gap: 9px; flex: none; }

.nav-links { display: flex; gap: 26px; margin-inline: auto; }
.nav-links a {
  font-size: 14.5px; font-weight: 600; color: var(--muted);
  position: relative; transition: color .2s;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 1.5px;
  background: var(--amber); transition: right .3s var(--ease);
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { right: 0; }

.nav-right { display: flex; align-items: center; gap: 14px; }
/* Amber is the CTA's, once per screen: the nav button is a ghost while the hero's own CTA is in
   view, and takes the amber only when that one has scrolled away (app.js sets .cta-hot). */
.nav.cta-hot .nav-cta {
  background: var(--amber); color: #121414; border-color: transparent;
  box-shadow: 0 6px 24px -8px rgba(255,191,0,.55);
}
/* The sign-in link is text, never amber (the nav CTA and hero CTA hold that). From 768 up. */
.nav-login { display: none; font-size: 14.5px; font-weight: 600; color: var(--text2); padding: 10px 6px; transition: color .2s; }
.nav-login:hover { color: var(--text); }
@media (min-width: 768px) { .nav-login { display: inline-flex; align-items: center; } }
.hero-signin { margin-top: 18px; font-size: 14.5px; color: var(--muted); }
.hero-signin a { display: inline-block; padding: 8px 4px; color: var(--text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border2); }
.hero-signin a:hover { text-decoration-color: var(--text); }
.foot-links a.signin:hover { color: var(--text); }
.nav-menu { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--border2); border-radius: var(--r-pill); color: var(--text); flex: none; }
.nav-menu svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.nav-menu:hover { border-color: var(--muted); }
.lang { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: var(--r-pill); }
.lang button {
  font-family: var(--fm); font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--muted); padding: 6px 10px; border-radius: var(--r-pill);
  transition: color .2s, background .2s;
}
.lang button:hover { color: var(--text2); }
.lang button.on { color: var(--text); background: var(--border2); }

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero { position: relative; padding: clamp(56px, 9vw, 104px) 0 clamp(60px, 8vw, 110px); }
.hero-in {
  display: grid; grid-template-columns: 1.08fr .92fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.hero-copy .display { margin-bottom: 24px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.facts {
  display: flex; flex-wrap: wrap; gap: 12px 34px;
  margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--border);
}
.facts li { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; color: var(--muted); max-width: 22ch; }
.facts .num { font-size: 30px; color: var(--text); line-height: 1; }

/* the device — the product's core idea shown, not described */
.hero-device { position: relative; justify-self: center; width: 100%; max-width: 380px; }
.device {
  position: relative;
  border: 1px solid var(--border2);
  border-radius: 30px;
  padding: 10px;
  background: linear-gradient(168deg, rgba(255,255,255,.07), rgba(255,255,255,.015));
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.03) inset;
  animation: floaty 9s ease-in-out infinite;
}
/* Element-qualified so it outranks the later `animation:` shorthands on .chip-a/.chip-b and
   .phone-front, which reset the play state. */
.device.is-off, .float-chip.is-off, .phone-front.is-off { animation-play-state: paused; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.device-glow {
  position: absolute; inset: -14%; z-index: -1; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 45%, rgba(255,191,0,.22), rgba(167,139,250,.12) 45%, transparent 70%);
  filter: blur(40px);
}
.screen {
  background: var(--bg2); border-radius: 22px;
  padding: 20px 16px 16px;
  border: 1px solid var(--border);
}
.scr-head { display: flex; align-items: center; justify-content: space-between; }
.scr-eyebrow { font-family: var(--fm); font-size: 10px; letter-spacing: .1em; color: var(--muted); }
.scr-clock { font-size: 12px; color: var(--amber); }
.scr-title { font-size: 21px; font-weight: 800; margin: 4px 0 16px; letter-spacing: -.015em; }

.q { display: flex; flex-direction: column; gap: 8px; }
.qi {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--border);
  animation: qin .45s var(--ease) both;
}
@keyframes qin { from { opacity: 0; transform: translateY(8px); } }
.qi-body { min-width: 0; flex: 1; }
/* both are spans, so they need to be told to stack */
.qi-name { display: block; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qi-meta { display: block; font-family: var(--fm); font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.qi-tail { font-family: var(--fm); font-size: 11px; font-weight: 700; color: var(--text2); }

.qi.is-live {
  border-color: rgba(255,191,0,.45);
  background: linear-gradient(100deg, rgba(255,191,0,.12), var(--card) 62%);
  box-shadow: -3px 0 0 0 var(--amber) inset;
}
.qi.is-live .qi-name { font-weight: 700; }
.qi.is-live .qi-meta, .qi.is-live .qi-tail { color: var(--amber); }
.qi.is-done { opacity: .48; }
.qi.is-done .qi-name { text-decoration: line-through; text-decoration-color: var(--muted); }
.qi.is-booked { border-style: dashed; }
.qi.is-booked .qi-tail { color: var(--blue); }

.dot { width: 6px; height: 6px; border-radius: 50%; flex: none; display: inline-block; }
.dot-amber { background: var(--amber); box-shadow: 0 0 0 0 rgba(255,191,0,.6); animation: pulse 2s infinite; }
.dot-green { background: var(--green); }
.dot-blue { background: var(--blue); }
.dot-muted { background: var(--border2); }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(255,191,0,0); } 100% { box-shadow: 0 0 0 0 rgba(255,191,0,0); } }

.scr-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
}
.scr-free { display: block; font-size: 20px; color: var(--blue); margin-top: 3px; }
.scr-pill {
  background: var(--amber); color: #121414; font-weight: 700; font-size: 12.5px;
  padding: 10px 16px; border-radius: var(--r-pill);
}

.float-chip {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: var(--r-pill);
  background: rgba(22,25,26,.86); border: 1px solid var(--border2);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-family: var(--fm); font-size: 11px; font-weight: 600; color: var(--text2);
  box-shadow: 0 12px 30px -14px rgba(0,0,0,.9);
  white-space: nowrap;
}
/* Anchored to the device's OWN edges, not by a fixed offset: these labels change
   width with the language, and a hardcoded left/right put them on top of the
   queue rows in Uzbek and off the card entirely in Russian. */
.chip-a { top: 38%; right: 100%; margin-right: -20px; animation: floaty 7s ease-in-out infinite .4s; }
.chip-b { bottom: 22%; left: 100%; margin-left: -20px; animation: floaty 8s ease-in-out infinite 1.2s; }

/* ── generic band ───────────────────────────────────────────────────────── */
.band { padding: clamp(64px, 9vw, 130px) 0; position: relative; }
.sec-head { margin-bottom: clamp(36px, 5vw, 60px); }

/* ── the idea + queue/calendar morph ────────────────────────────────────── */
.insight-in { display: grid; grid-template-columns: 1fr .9fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.insight-copy .h2 { margin-bottom: 22px; }
.ticks { display: flex; flex-direction: column; gap: 13px; margin-top: 30px; }
.ticks li {
  position: relative; padding-left: 30px;
  font-size: 15.5px; color: var(--text2);
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 15px; height: 8px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green);
  transform: rotate(-45deg); border-radius: 1px;
}

.morph {
  border: 1px solid var(--border); border-radius: var(--r-card);
  background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.01));
  padding: 20px;
}
.morph-labels { display: flex; gap: 6px; margin-bottom: 18px; }
.ml {
  font-family: var(--fm); font-size: 10.5px; font-weight: 600; letter-spacing: .12em;
  padding: 7px 13px; border-radius: var(--r-pill);
  color: var(--muted); border: 1px solid var(--border);
  transition: color .4s, border-color .4s, background .4s;
}
.ml.on { color: #121414; background: var(--amber); border-color: var(--amber); }

.morph-stage { position: relative; height: 268px; }
/* The same five visits in both states — that is the whole argument. Each keeps
   its own time label so the queue reads as an ordered stack and the calendar
   reads as those same visits placed at their real hours. */
.blk {
  position: absolute;
  display: flex; align-items: center;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--card2); border: 1px solid var(--border2);
  font-family: var(--fm); font-size: 11px; font-weight: 600; color: var(--muted);
  transition: all 1s var(--ease);
  left: var(--x); top: var(--y); width: var(--w); height: var(--h);
}
/* queue state: a stack of rows, top to bottom */
.morph-stage .k1 { --x: 0%;  --y: 0px;   --w: 100%; --h: 44px; }
.morph-stage .k2 { --x: 0%;  --y: 54px;  --w: 100%; --h: 44px; }
.morph-stage .k3 { --x: 0%;  --y: 108px; --w: 100%; --h: 44px; }
.morph-stage .k4 { --x: 0%;  --y: 162px; --w: 100%; --h: 44px; }
.morph-stage .k5 { --x: 0%;  --y: 216px; --w: 100%; --h: 44px; }
/* calendar state: same five blocks, now placed at their real hours */
.morph-stage.is-cal .k1 { --x: 4%;  --y: 6px;   --w: 42%; --h: 52px; }
.morph-stage.is-cal .k2 { --x: 52%; --y: 40px;  --w: 42%; --h: 34px; }
.morph-stage.is-cal .k3 { --x: 4%;  --y: 96px;  --w: 42%; --h: 74px; }
.morph-stage.is-cal .k4 { --x: 52%; --y: 122px; --w: 42%; --h: 44px; }
.morph-stage.is-cal .k5 { --x: 4%;  --y: 204px; --w: 90%; --h: 40px; }
/* blue = a promised time, dashed = still projected. Same vocabulary as the app. */
.morph-stage .k2 { border-color: rgba(84,169,235,.5); background: rgba(84,169,235,.1); color: var(--blue); }
.morph-stage .k4 { border-style: dashed; }
.morph-stage .k5 { border-color: rgba(84,169,235,.5); background: rgba(84,169,235,.1); color: var(--blue); }
.nowline {
  position: absolute; left: -6px; right: -6px; height: 1.5px;
  background: linear-gradient(90deg, var(--amber), rgba(255,191,0,.15));
  top: 96px; transition: top 1s var(--ease);
}
.nowline::before {
  content: ""; position: absolute; left: 0; top: -3px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--amber);
}
.morph-stage.is-cal .nowline { top: 186px; }
/* The blocks travel on a stagger, which reads far better than all five at once. */
.morph-stage .k2 { transition-delay: 70ms; }
.morph-stage .k3 { transition-delay: 140ms; }
.morph-stage .k4 { transition-delay: 210ms; }
.morph-stage .k5 { transition-delay: 280ms; }

/* The mid-page audience switch is gone: the fork now lives above the nav and
   governs the whole page. Its styles live under "AUDIENCE MODE" below. */
.card {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 26px 24px 28px;
  border: 1px solid var(--border); border-radius: var(--r-card);
  background: linear-gradient(168deg, rgba(255,255,255,.045), rgba(255,255,255,.008));
  transition: transform .4s var(--ease), border-color .4s;
}
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: radial-gradient(340px circle at 50% 0%, rgba(255,191,0,.10), transparent 70%);
  transition: opacity .4s;
}
.lift:hover { transform: translateY(-5px); border-color: var(--border2); }
.lift:hover::before { opacity: 1; }
.card h3 { font-size: 18.5px; font-weight: 700; margin-bottom: 9px; letter-spacing: -.02em; }
.card p { font-size: 14.5px; color: var(--muted); line-height: 1.62; }
.ci {
  display: grid; place-items: center;
  width: 42px; height: 42px; margin-bottom: 18px;
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(255,191,0,.16), rgba(167,139,250,.10));
  border: 1px solid rgba(255,191,0,.20);
}
.ci svg { width: 21px; height: 21px; fill: none; stroke: var(--amber); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ── how it works ───────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.step { position: relative; padding-top: 30px; border-top: 1px solid var(--border); }
.step::after {
  content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 2px;
  background: linear-gradient(90deg, var(--amber), transparent);
  transition: width 1s var(--ease) .15s;
}
.step.in::after { width: 100%; }
.step-n { display: block; font-size: 13px; color: var(--amber); letter-spacing: .1em; margin-bottom: 14px; }
.step h3 { font-size: 21px; font-weight: 700; margin-bottom: 10px; letter-spacing: -.02em; }
.step p { font-size: 15px; color: var(--muted); line-height: 1.62; }

/* ── free-forever manifesto ─────────────────────────────────────────────── */
.band-quote { padding-block: clamp(56px, 7vw, 100px); }
.manifesto {
  position: relative; overflow: hidden;
  border: 1px solid rgba(255,191,0,.24); border-radius: 26px;
  padding: clamp(34px, 5vw, 64px);
  background:
    radial-gradient(700px circle at 12% 0%, rgba(255,191,0,.14), transparent 62%),
    radial-gradient(600px circle at 92% 100%, rgba(167,139,250,.14), transparent 62%),
    var(--bg2);
}
.manifesto .h2 { max-width: 20ch; margin-bottom: 20px; }
.free-list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 22px;
  margin-top: 32px; padding-top: 28px; border-top: 1px solid rgba(255,191,0,.18);
}
.free-list li {
  position: relative; padding-left: 26px;
  font-size: 14.5px; font-weight: 600; color: var(--text2);
}
.free-list li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 13px; height: 7px; border-left: 2px solid var(--amber); border-bottom: 2px solid var(--amber);
  transform: rotate(-45deg);
}

/* ── founders programme ───────────────────────────────────────────────────── */
.founders-perks { list-style: none; padding: 0; display: grid; gap: 8px; margin: 18px 0; max-width: 46ch; }
.founders-perks li { font-size: 15px; color: var(--text2); }
.founders-left, .founders-full { font-family: var(--fm); font-size: 14px; color: var(--muted); }

/* ── pricing ────────────────────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1120px; margin-inline: auto; }
@media (max-width: 960px) { .plans { grid-template-columns: 1fr; max-width: 480px; } }
.plan {
  display: flex; flex-direction: column;
  padding: 34px 30px 34px;
  border: 1px solid var(--border); border-radius: 20px;
  background: linear-gradient(168deg, rgba(255,255,255,.04), rgba(255,255,255,.008));
}
.plan-pro {
  position: relative;
  border-color: rgba(255,191,0,.35);
  background:
    radial-gradient(520px circle at 50% -10%, rgba(255,191,0,.13), transparent 65%),
    linear-gradient(168deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  box-shadow: 0 30px 70px -40px rgba(255,191,0,.5);
}
.plan-badge {
  position: absolute; top: -11px; left: 30px;
  font-family: var(--fm); font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  color: #121414; background: var(--amber);
  padding: 4px 12px; border-radius: var(--r-pill);
}
.plan-name { font-size: 15px; font-weight: 700; color: var(--text2); letter-spacing: .01em; }
.plan-price { display: flex; align-items: baseline; gap: 9px; margin: 10px 0 6px; flex-wrap: wrap; }
.plan-price .num { font-size: 46px; line-height: 1; letter-spacing: -.03em; }
.cur { font-family: var(--fm); font-size: 13px; color: var(--muted); }
.plan-note { font-size: 14px; color: var(--muted); margin-bottom: 24px; }
.plan-list { display: flex; flex-direction: column; gap: 11px; margin-bottom: 24px; }
.plan-list li {
  position: relative; padding-left: 26px;
  font-size: 14.5px; color: var(--text2); line-height: 1.5;
}
.plan-list li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 13px; height: 7px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}
.plan-pro .plan-list li::before { border-color: var(--amber); }
.plan .btn { margin-top: auto; }
.plan-demo { display: block; margin-top: 12px; padding: 8px 4px; text-align: center; font-size: 14.5px; font-weight: 600; color: var(--text2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border2); transition: color .2s; }
.plan-demo:hover { color: var(--text); text-decoration-color: var(--text); }

/* ── faq (native details, no JS) ────────────────────────────────────────── */
.faq-in { max-width: 800px; }
.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 16px;
  padding: 22px 0;
  font-size: 17px; font-weight: 700; letter-spacing: -.015em;
  transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; margin-left: auto;
  width: 11px; height: 11px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .3s var(--ease), border-color .3s;
}
.faq summary:hover { color: var(--amber); }
.faq summary:hover::after { border-color: var(--amber); }
.faq details[open] summary { color: var(--amber); }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); border-color: var(--amber); }
.faq details p {
  padding: 0 40px 24px 0;
  font-size: 15.5px; color: var(--muted); line-height: 1.66;
  animation: faqin .35s var(--ease);
}
@keyframes faqin { from { opacity: 0; transform: translateY(-6px); } }

/* ── final CTA ──────────────────────────────────────────────────────────── */
.cta { padding: clamp(70px, 10vw, 140px) 0 clamp(60px, 8vw, 110px); }
.cta-in {
  max-width: 780px; text-align: center;
}
.cta-in .display { margin: 0 auto 22px; }
.cta-in .lede { margin-inline: auto; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 38px; }

/* ── footer ─────────────────────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--border); padding: 46px 0 60px; background: rgba(0,0,0,.25); }
.foot-in { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 30px; align-items: start; }
.foot-tag { font-size: 14px; color: var(--muted); margin-top: 14px; max-width: 34ch; }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.foot-links a { font-size: 14.5px; font-weight: 600; color: var(--muted); transition: color .2s; }
.foot-links a:hover { color: var(--amber); }
.foot-legal { font-size: 13px; color: var(--muted); }
.foot-legal .num { font-weight: 600; }

/* ── scroll reveal ──────────────────────────────────────────────────────── */
/* ── animation start states ─────────────────────────────────────────────────
   Scoped to .js on purpose: without JavaScript nothing can clear these, so an
   unscoped rule would serve a permanently invisible page. Element.animate()
   effects beat these; the `.in` fallback below is what runs when motion is off
   or the observer never fires, and it is !important so it wins over anything
   left behind. */
.js [data-anim] { opacity: 0; transform: translateY(24px); }
.js [data-anim="tile"]   { transform: translateY(30px) scale(.985); }
.js [data-anim="device"] { transform: translateY(30px) scale(.96); }
.js [data-anim].in { opacity: 1 !important; transform: none !important; }
/* A split heading animates its own word spans, so the block itself must not
   also be faded — otherwise the words animate inside an invisible parent. */
.js [data-split].is-split { opacity: 1; transform: none; }
/* The hero is the LCP and the first screen: it is never hidden by CSS, and app.js animates only
   its transform, so a slow or failed module leaves a readable page rather than a blank one. */
.js .hero [data-anim] { opacity: 1; transform: none; }
.word { display: inline-block; will-change: transform, opacity; }

/* ══════════════════════════════════════════════════════════════════════════
   AUDIENCE MODE
   The whole page is two pages sharing a shell. `data-mode` on <body> decides
   which half is in the document flow; both halves ship in the HTML so the
   switch costs no request and the URL (?for=) is deep-linkable.
   ═════════════════════════════════════════════════════════════════════════ */
[data-mode="biz"]   [data-only="mijoz"],
[data-mode="mijoz"] [data-only="biz"] { display: none !important; }

/* The audience cross-fade. A CSS transition rather than a JS animation because
   it must always resolve — see the note in app.js. */
main { transition: opacity .22s var(--ease); }
main.swapping { opacity: 0; }

.modebar {
  position: relative; z-index: 101;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.modebar-in { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 54px; }
.modebar-q {
  font-family: var(--fm); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.modeswitch {
  position: relative; display: flex; gap: 4px;
  padding: 4px; border: 1px solid var(--border2); border-radius: var(--r-pill);
  background: rgba(255,255,255,.03);
}
.modeswitch a {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px; border-radius: var(--r-pill);
  font-size: 13.5px; font-weight: 700; color: var(--muted);
  white-space: nowrap; transition: color .3s;
}
.modeswitch a svg {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.modeswitch a:hover { color: var(--text2); }
.modeswitch a.on { color: var(--text); }
.modeswitch-thumb {
  position: absolute; z-index: 0; top: 4px; bottom: 4px;
  left: var(--mx, 4px); width: var(--mw, 180px);
  background: var(--border2); border-radius: var(--r-pill);
}
.lockup { height: 26px; width: auto; }

/* ── hero photography ───────────────────────────────────────────────────── */
.hero { overflow: hidden; }
.hero-photo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 38%;
  /* graded here, not baked into the file, so real photography can be dropped
     in later without reprocessing to match */
  filter: grayscale(.35) contrast(1.05) brightness(.42) sepia(.22);
}
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, var(--bg) 4%, rgba(13,15,15,.86) 44%, rgba(13,15,15,.55) 78%),
    linear-gradient(to bottom, var(--bg), transparent 22%, rgba(13,15,15,.7) 72%, var(--bg));
}

/* ── the bento feature grid ─────────────────────────────────────────────── */
/* FOUR columns, not three, and that is arithmetic rather than taste: six tiles
   of which two are double-width is 8 cells, which fills two rows of four
   exactly. On a 3-column grid the same set leaves an orphan third row. */
.bento {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px; grid-auto-rows: 1fr;
}
.bento .span-2 { grid-column: span 2; }

.tile-photo, .tile-map { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
/* aspect-ratio, NEVER flex:1. A flex-grown <img> in an auto-height column has
   no definite height to grow into, so it falls back to its intrinsic size —
   which drove these tiles to 768px and the whole section to 2747px. */
/* `height: auto` is load-bearing: the <img> carries width/height attributes (so
   the layout is stable before the file loads), and a presentational height wins
   over aspect-ratio — a ratio only computes the height when height is auto.
   Without it these rendered at their full 842px intrinsic height. */
.tile-photo img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; flex: none; object-fit: cover;
  filter: grayscale(.3) brightness(.72) sepia(.16) contrast(1.04);
  transition: transform .8s var(--ease), filter .6s;
}
.span-2.tile-photo img { aspect-ratio: 20 / 9; }
.tile-body { margin-top: auto; }
.lift.tile-photo:hover img { transform: scale(1.05); filter: grayscale(0) brightness(.86) sepia(.06); }
.tile-body {
  padding: 22px 24px 26px;
  border-top: 1px solid var(--border);
  background: linear-gradient(to top, var(--card), rgba(22,25,26,.86));
}
.tile-body h3 { font-size: 18.5px; font-weight: 700; margin-bottom: 7px; letter-spacing: -.02em; }
.tile-body p { font-size: 14.5px; color: var(--muted); line-height: 1.6; }

/* a map drawn rather than photographed — the real one is a dark MapLibre style,
   and a light stock map screenshot would misrepresent the product */
.minimap {
  position: relative; flex: none; aspect-ratio: 20 / 9;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(84,169,235,.10), transparent 60%),
    var(--bg2);
  overflow: hidden;
}
.mm-road { position: absolute; background: var(--border2); opacity: .8; }
.mm-road.r1 { left: 0; right: 0; top: 34%; height: 2px; }
.mm-road.r2 { left: 0; right: 0; top: 68%; height: 3px; }
.mm-road.r3 { top: 0; bottom: 0; left: 28%; width: 2px; }
.mm-road.r4 { top: 0; bottom: 0; left: 71%; width: 3px; }
.mm-pin {
  position: absolute; width: 13px; height: 13px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); background: var(--amber);
  box-shadow: 0 3px 10px -2px rgba(255,191,0,.7);
}
.mm-pin.p1 { left: 24%; top: 26%; }
.mm-pin.p2 { left: 66%; top: 57%; }
.mm-me {
  position: absolute; left: 45%; top: 46%;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--blue); border: 2px solid var(--bg2);
  box-shadow: 0 0 0 0 rgba(84,169,235,.55); animation: pulse 2.4s infinite;
}

/* ── the consumer's vendor page, mocked ─────────────────────────────────── */
.screen-cli { padding: 0 0 14px; overflow: hidden; }
.vp-hero { height: 96px; overflow: hidden; }
.vp-hero img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.72) sepia(.14); }
.vp-head { padding: 12px 16px 0; }
.vp-meta { font-family: var(--fm); font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.vp-wait {
  margin: 12px 16px; padding: 10px 13px;
  border-radius: 12px; border: 1px solid rgba(84,169,235,.32);
  background: rgba(84,169,235,.08);
}
.vp-wait .scr-free { font-size: 19px; margin-top: 1px; }
.vp-list { padding: 0 16px; display: flex; flex-direction: column; gap: 7px; }
.vp-list li {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: 11px;
  border: 1px solid var(--border); background: var(--card);
}
.vp-list li.on { border-color: rgba(255,191,0,.5); background: rgba(255,191,0,.07); }
.vp-svc { flex: 1; font-size: 12.5px; font-weight: 600; }
.vp-dur { font-size: 10px; color: var(--muted); }
.vp-price { font-size: 11.5px; color: var(--text2); }
.vp-list li.on .vp-price { color: var(--amber); }
.vp-masters { display: flex; align-items: center; gap: 7px; padding: 14px 16px 12px; }
.vp-face { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.vp-ini {
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--card2); border: 1px solid var(--border2);
  font-family: var(--fm); font-size: 11px; font-weight: 700; color: var(--muted);
}
.vp-any { font-size: 11px; color: var(--muted); margin-left: 2px; }
.scr-pill.wide { display: block; margin: 0 16px; text-align: center; padding: 13px; }

/* ── the app band ───────────────────────────────────────────────────────── */
.app-in { display: grid; grid-template-columns: 1fr .82fr; gap: clamp(32px, 5vw, 70px); align-items: center; }
.app-copy .h2 { margin-bottom: 18px; }
.app-play { margin-top: 24px; }
.app-shot { justify-self: center; }
.phones { position: relative; width: min(340px, 76vw); }
.phone {
  border: 1px solid var(--border2); border-radius: 26px; overflow: hidden;
  background: var(--bg2);
  box-shadow: 0 34px 70px -34px rgba(0,0,0,.95);
}
/* Offset far enough to read as a SECOND phone. At -46px only a sliver cleared
   the front one and it looked like a rendering artifact. */
.phone-back {
  position: absolute; top: 44px; left: -32%; width: 70%;
  transform: rotate(-9deg); opacity: .7;
}
.phone-back img { width: 100%; height: 260px; object-fit: cover; filter: grayscale(.45) brightness(.55) sepia(.15); }
.phone-front { position: relative; animation: floaty 10s ease-in-out infinite; }
.ph-screen {
  padding: 30px 24px 26px;
  background: radial-gradient(120% 80% at 50% 0%, rgba(255,191,0,.12), transparent 62%), var(--bg2);
  min-height: 320px;
}
.ph-big { display: block; font-size: 66px; line-height: 1; margin: 10px 0 6px; letter-spacing: -.04em; }
.ph-cap { font-size: 13px; color: var(--muted); }
.ph-bars { display: flex; align-items: flex-end; gap: 7px; height: 92px; margin-top: 30px; }
.ph-bars i {
  flex: 1; border-radius: 5px 5px 2px 2px;
  background: linear-gradient(to top, rgba(255,191,0,.75), rgba(255,191,0,.25));
  height: 30%;
}
.ph-bars i:nth-child(2) { height: 55%; }
.ph-bars i:nth-child(3) { height: 78%; }
.ph-bars i:nth-child(4) { height: 46%; }
.ph-bars i:nth-child(5) { height: 96%; background: linear-gradient(to top, var(--amber), rgba(255,191,0,.45)); }

/* ── the other audience, always one click away ──────────────────────────── */
.cross { padding: 0 0 clamp(50px, 7vw, 90px); }
.cross-card {
  display: flex; align-items: center; gap: 18px;
  padding: 26px 28px;
  border: 1px solid var(--border); border-radius: 20px;
  background: linear-gradient(100deg, rgba(167,139,250,.10), rgba(255,255,255,.02) 55%);
  transition: border-color .35s, transform .35s var(--ease), background .35s;
}
.cross-card:hover { border-color: var(--violet); transform: translateY(-3px); }
.cross-eyebrow {
  font-family: var(--fm); font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--violet);
  flex: none;
}
.cross-title { flex: 1; font-size: clamp(17px, 2vw, 22px); font-weight: 700; letter-spacing: -.02em; }
.cross-arrow {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--border2); color: var(--text);
  transition: background .3s, color .3s, transform .3s var(--ease);
}
.cross-arrow svg { width: 18px; height: 18px; }
.cross-card:hover .cross-arrow { background: var(--violet); color: #121414; transform: translateX(4px); }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento .span-2 { grid-column: span 2; }
  .free-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* No room for the links in a row: they fold into a dropdown behind .nav-menu. The button
     exists only under .js, so without JavaScript this is what it always was. */
  .nav-links { display: none; }
  .nav-right { margin-left: auto; }
  .js .nav-menu { display: inline-flex; }
  .nav.open .nav-links {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%; margin: 0;
    padding: 8px var(--gut) 14px;
    background: var(--bg); border-bottom: 1px solid var(--border);
  }
  .nav.open .nav-links a { display: flex; align-items: center; min-height: 44px; font-size: 16px; }
  .nav.open .nav-links a::after { display: none; }
  .insight-in, .app-in { grid-template-columns: 1fr; }
  .morph { max-width: 460px; }
  .phone-back { display: none; }
}
@media (max-width: 860px) {
  .hero-in { grid-template-columns: 1fr; }
  .hero-device { max-width: 330px; }
  .steps { grid-template-columns: 1fr; gap: 30px; }
  .foot-in { grid-template-columns: 1fr; }
  .cross-card { flex-wrap: wrap; gap: 12px; }
  .cross-eyebrow { width: 100%; }
}
/* Below this the device fills the column and the chips have nowhere to sit
   outside it. They are decoration and the card already says both things. */
@media (max-width: 760px) { .float-chip { display: none; } }
@media (max-width: 680px) {
  body { font-size: 16px; }
  .bento, .plans { grid-template-columns: 1fr; }
  .bento .span-2 { grid-column: span 1; }
  .free-list { grid-template-columns: 1fr; }
  .facts { gap: 14px 22px; }
  .facts li { max-width: none; width: 100%; }
  /* Three fixed full-viewport 90px blurs and their drift loops are too heavy for a cheap phone. */
  .aurora { display: none; }
  /* Wrap rather than overflow: "Sartaroshxonamni qoʻshish" + arrow ran ~340px in a 335px pill. */
  .btn { width: 100%; white-space: normal; text-wrap: balance; text-align: center; }
  /* The nav row at 375 holds the lockup and the three language pills, and nothing else fits
     (L1/L16). Both halves' hero carries the CTA within the first screen, and the tablet menu
     is a 681-1000 control. */
  .nav-cta, .js .nav-menu { display: none; }
  .nav-in { gap: 12px; }
  /* The fork stacks rather than shrinking: it is the first decision on the page
     and must stay legible and thumb-sized. */
  .modebar-in { flex-direction: column; gap: 10px; height: auto; padding-block: 8px; }
  /* The fork sticks with the nav now, and stacked with its question it made a 180px band on a
     375x812 phone. The two buttons already say who each half is for; the question goes. */
  .modebar-q { display: none; }
  html { scroll-padding-top: 144px; }
  .modeswitch { width: 100%; }
  .modeswitch a { flex: 1; justify-content: center; padding: 12px 10px; font-size: 13px; }
  .hero-photo img { object-position: center 30%; }
  .hero-scrim { background: linear-gradient(to bottom, rgba(13,15,15,.72), rgba(13,15,15,.93) 45%, var(--bg)); }
  .hero-cta, .cta-actions { flex-direction: column; }
  .plan-price .num { font-size: 40px; }
  .faq summary { font-size: 16px; }
  /* (The 48px min-heights below moved to `(pointer: coarse)` after this block, 2026-09-30, L12; the
     padding stays here.) Touch targets. At desktop these are mouse-sized; on a phone they are the
     controls a visitor has to hit FIRST, so they carry the floor rather than the
     big obvious buttons, which were already 55-63px.

     The floor is 48, not 44 — standards §3 takes Material's 48x48 as the shared
     minimum because it also satisfies iOS's 44, so no screen needs revisiting
     later. This block already existed and already named the right three controls;
     it aimed at 44 and left all three of them measuring 44-45.

     HEIGHT ONLY on the language pills, and that is a constraint rather than a
     preference. `min-width: 48px` was tried and reverted: measured at 375px, it
     takes .lang from 128.2 to 156 and pushes .nav-right to 340.5 in a 307px
     slot, so the document scrolls sideways — strictly worse than a 39px-wide
     pill. The header has no room to give. It is ALREADY 5.7px over its own
     content box at 375 (20 padding + 28 gap + 312.7 = 360.7 against a 355 edge),
     which is why `.brand` — flex `0 1 auto`, holding an <img> at `width: auto` —
     is squeezed to ZERO and the Kometa lockup does not render on a phone at all.
     That predates this change; it is measured on the unmodified page too, and it
     is in docs/audits/2026-09-10/fixes/M1.md as a design question, because one
     row at 375 cannot hold the brand, three language pills and a CTA at any
     target size. */
  .lang button { padding: 13px 12px; }
}
/* At 375 the two fork labels plus their icons run ~342px in a 335px pill, and the Uzbek pair
   pushed the whole document 8-10px sideways (L16). The words say who each half is for; the icons
   are decoration. */
@media (max-width: 420px) { .modeswitch a svg { display: none; } }
/* The 48px floor follows the pointer, not the viewport (L12): a phone is coarse at any width and a
   tablet is coarse at 768, where these were 27-40px; a mouse at 375 does not need it. */
@media (pointer: coarse) {
  .btn-sm, .lang button, .modeswitch a, .nav-menu, .nav-login, .hero-signin a, .foot-links a, .plan-demo { min-height: 48px; }
  .hero-signin a, .foot-links a, .plan-demo { display: inline-flex; align-items: center; justify-content: center; }
  .nav-menu { min-width: 48px; }
  .nav.open .nav-links a { min-height: 48px; }
}
/* the masthead measures 128 here (54 -> 58 fork bar), against 124 for a mouse */
@media (pointer: coarse) and (min-width: 681px) { html { scroll-padding-top: 136px; } }

/* ── the app panel (app.js opens it) ─────────────────────────────────────── */
.apanel {
  display: none; position: fixed; z-index: 150;
  left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
  align-items: center; gap: 12px; padding: 12px 6px 12px 14px;
  border: 1px solid var(--border2); border-radius: var(--r-card);
  background: rgba(22, 25, 26, .94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .75);
}
.apanel.on { display: flex; animation: apanel-up .5s var(--ease); }
@keyframes apanel-up { from { transform: translateY(28px); opacity: 0; } }
.apanel-icon { width: 44px; height: 44px; flex: none; border-radius: 12px; }
.apanel-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; line-height: 1.35; color: var(--text2); }
.apanel-copy b { font-size: 14.5px; color: var(--text); }
.apanel .btn { width: auto; flex: none; } /* not the 680px rule's full-width pill */
.apanel-qr { width: 96px; height: 96px; flex: none; border-radius: 8px; }
.apanel-x { flex: none; width: 44px; height: 44px; border-radius: var(--r-pill); font-size: 22px; line-height: 1; color: var(--muted); }
.apanel-x:hover { color: var(--text); }
.apanel:not(.is-android) .apanel-and,
.apanel:not(.is-desktop) .apanel-desk { display: none; }
/* 375px has no room for the icon beside the copy, the button and the ×. */
@media (max-width: 419px) { .apanel-icon { display: none; } }
/* Right, over the hero's phone mock-up — on the left it covered the hero's CTA. */
@media (min-width: 720px) { .apanel { left: auto; right: 24px; bottom: 24px; width: 420px; } }

/* ── reduced motion: keep the layout, drop the movement ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .device { animation: none; }
}