/* ── Manrope, served from our own origin ──────────────────────────────────────
   Was two extra DNS+TLS handshakes to fonts.googleapis.com and fonts.gstatic.com before a single
   glyph could paint — worth 3.5s LCP on mobile, which is what kept Performance at 87. Same origin
   as the page means the connection is already open.

   Variable font, so one file per subset covers every weight we use. Cyrillic first because the page
   is Ukrainian; latin carries the wordmark, «Telegram» and the € sign. cyrillic-ext is deliberately
   not shipped — it holds historic glyphs this copy never uses.
   ────────────────────────────────────────────────────────────────────────── */
@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;
}
@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+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Tells the browser both themes exist, so form controls, scrollbars and the address bar
     follow the page instead of defaulting to light. */
  color-scheme: light dark;
  --bg: #ffffff;
  --surface: #f7f8fa;
  --text: #1a1c22;
  --muted: #5b6270;
  --border: #e4e7ec;
  --accent: #0057b7; /* UA blue */
  --accent-soft: #eef3fb;
  --yellow: #ffd700; /* UA yellow */
  --code-bg: #f0f2f5;
  --max: 720px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1115;
    --surface: #161922;
    --text: #e8eaef;
    --muted: #9aa2b1;
    --border: #262b36;
    --accent: #5b9bff;
    --accent-soft: #172234;
    --code-bg: #1c2030;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.7;
  font-size: 17px;
}

/* UA flag accent stripe at the very top */
.flagbar {
  height: 5px;
  background: linear-gradient(to bottom, var(--accent) 0 50%, var(--yellow) 50% 100%);
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 32px 20px 72px;
}

header.site {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 20px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border);
}

header.site .brand {
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  color: var(--text);
}

header.site .brand span { color: var(--accent); }

header.site nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  margin-left: 16px;
}

header.site nav a:hover { color: var(--accent); }

header.site nav .lang {
  margin-left: 16px;
  font-size: 14px;
  color: var(--border);
}
header.site nav .lang a { margin-left: 0; }
header.site nav .lang a.active { color: var(--text); font-weight: 700; }
header.site nav .lang .sep { color: var(--muted); margin: 0 4px; }

h1 {
  font-size: 30px;
  line-height: 1.25;
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}

.meta {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 28px;
}

h2 {
  font-size: 20px;
  margin: 36px 0 12px;
  letter-spacing: -0.01em;
}

p, li { color: var(--text); }

a { color: var(--accent); }

code {
  background: var(--code-bg);
  padding: 2px 6px;
  border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  word-break: break-word;
}

ul { padding-left: 22px; }
li { margin: 6px 0; }

.tablewrap { overflow-x: auto; }

table {
  border-collapse: collapse;
  width: 100%;
  margin: 16px 0;
  font-size: 15px;
}

th, td {
  border: 1px solid var(--border);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

th { background: var(--surface); font-weight: 600; }

.callout {
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 22px 0;
  font-size: 15px;
}

footer.site {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 14px;
}

footer.site a { color: var(--muted); }
footer.site a:hover { color: var(--accent); }

/* Index page cards */
.cards { display: grid; gap: 14px; margin: 28px 0; }

.card {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  background: var(--surface);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.card:hover { border-color: var(--accent); transform: translateY(-1px); }
.card .t { font-weight: 650; font-size: 17px; margin-bottom: 4px; }
.card .d { color: var(--muted); font-size: 14px; }

/* ══════════════════════════════════════════════════════════════════════════
   LANDING (cherga.app) — everything below is scoped to `.lp` / `.lp-*`.
   The four legal pages share this stylesheet and must not be touched by it:
   the only bare selectors used here are inside `.lp`.
   Tokens are the ones already defined at the top — no new palette. The accent
   is the Ukrainian blue this site has always used; a separate CTA colour was
   considered and dropped, since an orange in a blue/yellow palette reads as
   borrowed from another product.
   ══════════════════════════════════════════════════════════════════════════ */

.lp {
  /* Manrope carries the personality; the system stack stays as the fallback so
     text is readable before the font arrives (display=swap). */
  font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

.lp-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
}

.lp-section { padding: 56px 0; }
.lp-alt { background: var(--surface); }

.lp h1,
.lp h2,
.lp h3 { line-height: 1.25; letter-spacing: -0.02em; }

.lp h2 {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0 0 20px;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.lp-hero {
  padding: 40px 0 56px;
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--bg) 100%);
}

/* The mark sits beside the wordmark rather than above it: at 44px it reads as identity, and a
   larger logo above the headline would push the H1 — the one thing that has to be above the fold on
   a 375px screen — down out of view. `alt=""` because the wordmark next to it already says the
   name; announcing it twice is noise to a screen reader. */
.lp-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
}

.lp-brand img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
}

.lp-eyebrow {
  margin: 0 0 12px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.lp h1 {
  font-size: 1.95rem;
  font-weight: 800;
  margin: 0 0 16px;
}

.lp-lead {
  font-size: 1.08rem;
  color: var(--muted);
  margin: 0 0 20px;
}

/* The boundary line. Given a box because it is the sentence that separates us
   from the prohibited "acting on behalf of a government service" — it should
   read as a statement, not as fine print. */
.lp-boundary {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 28px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--bg);
  font-weight: 600;
}

.lp-micro {
  margin: 12px 0 0;
  font-size: 0.92rem;
  color: var(--muted);
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;            /* > 44px touch target */
  padding: 14px 26px;
  border-radius: 10px;
  font-size: 1.05rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform 180ms ease-out, background-color 180ms ease-out, border-color 180ms ease-out;
}

.lp-btn + .lp-btn { margin-left: 8px; }

.lp-btn-primary {
  background: var(--accent);
  color: #fff;
  border: 2px solid var(--accent);
}

.lp-btn-ghost {
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
}

.lp-btn:hover { transform: translateY(-1px); }
.lp-btn-ghost:hover { background: var(--accent-soft); }

.lp-btn:focus-visible,
.lp a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── Steps ────────────────────────────────────────────────────────────── */

.lp-steps {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 20px;
}

.lp-steps li {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
}

.lp-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
}

.lp-steps h3 {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0 0 6px;
}

.lp-steps p { margin: 0; color: var(--muted); }

.lp-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
}

/* ── Price ────────────────────────────────────────────────────────────── */

.lp-price {
  padding: 28px 24px;
  border: 2px solid var(--accent);
  border-radius: 14px;
  background: var(--bg);
  text-align: center;
}

.lp-amount {
  margin: 0;
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.lp-incl {
  list-style: none;
  margin: 8px 0 16px;
  padding: 0;
  color: var(--muted);
}

.lp-incl li { display: inline; }
.lp-incl li + li::before { content: " · "; }

.lp-price .lp-btn { margin-top: 20px; }

/* ── Limits ───────────────────────────────────────────────────────────── */

.lp-big {
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0 0 20px;
}

.lp-limits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.lp-limits li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--muted);
}

/* ── Icons ────────────────────────────────────────────────────────────── */

.lp-i {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lp-boundary .lp-i,
.lp-limits .lp-i { color: var(--accent); margin-top: 3px; }

/* ── Footer ───────────────────────────────────────────────────────────── */

.lp-footer {
  padding: 36px 0 48px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.95rem;
}

.lp-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 12px 0;
}

/* 44px tall taps in a wrapping row of links, without visually spacing them out. */
.lp-links a,
.lp-contact a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.lp-contact { margin: 0; }

/* ── Wider screens ────────────────────────────────────────────────────── */

@media (min-width: 640px) {
  .lp h1 { font-size: 2.4rem; }
  .lp-section { padding: 72px 0; }
  .lp-hero { padding: 56px 0 72px; }
  .lp-steps { grid-template-columns: repeat(3, 1fr); }
}

/* ── Reduced motion ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .lp-btn { transition: none; }
  .lp-btn:hover { transform: none; }
}

/* A button following the muted note needs its own breathing room: `.lp-note` has no bottom margin
   (it is usually the last thing in a block), so without this the demo CTA sits flush against the
   sentence above it. */
.lp-note + .lp-btn { margin-top: 24px; }

/* Inside `.lp-brand` the eyebrow is a flex item; its bottom margin would misalign it. */
.lp-brand .lp-eyebrow { margin: 0; }

/* ── Hero photo ───────────────────────────────────────────────────────────
   Two columns from 900px, stacked below. The photo comes AFTER the copy in the
   DOM so a phone reads the headline, the boundary and the CTA before any image
   — and so a slow connection never pushes the fold down.
   ────────────────────────────────────────────────────────────────────────── */

.lp-photo {
  margin: 28px 0 0;
  max-width: 420px;
}

.lp-photo picture { display: block; }

.lp-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--border);
  /* Cropped to landscape on phones: at its native 720×748 the photo fills almost the whole screen
     and pushes everything below it out of reach. The full frame returns on wide screens, where it
     sits beside the copy rather than under it. `aspect-ratio` also reserves the space before the
     file arrives, so there is no layout shift. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 30%;
}

.lp-photo figcaption {
  margin-top: 10px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
}

@media (min-width: 900px) {
  .lp-hero-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 44px;
    align-items: center;
  }
  .lp-photo { margin-top: 0; max-width: none; }
  .lp-photo img { aspect-ratio: 720 / 748; }
}

/* ── Guideline fixes (audited 2026-09-06) ─────────────────────────────────── */

/* Removes the ~300ms tap delay on touch devices without disabling zoom, and stops the grey flash
   Safari paints over a tapped link — the flash reads as a rendering glitch on a dark background. */
.lp a,
.lp .lp-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Balances ragged line breaks in headings. The H1 is five lines on a phone, so an orphaned last
   word is very visible. Ignored by browsers that do not support it — no fallback needed. */
.lp h1,
.lp h2,
.lp h3 { text-wrap: balance; }

.lp-lead,
.lp-note,
.lp-big { text-wrap: pretty; }

/* The explicit way back to the landing.
   The wordmark has always linked home, but a wordmark is a signpost only to people who already know
   the convention — the owner walked into Умови and found no way back. This says it in words, sits
   first in the nav, and is visually distinct from the sibling document links so it does not read as
   a fourth legal page. */
header.site nav a.home {
  font-weight: 600;
  color: var(--accent);
}

/* First item in the row, so it carries no left margin of its own. */
header.site nav a.home { margin-left: 0; margin-right: 16px; }

@media (max-width: 520px) {
  /* The nav is inline links that wrap naturally. On a phone the way out should be on its own line
     rather than the item that happens to wrap off the end. */
  header.site nav a.home { display: block; margin: 0 0 6px; }
}