/* ==========================================================================
   SMS Deliverer — single shared design system for the 20 English pages
   Tokens, type scale, grid and components. No third-party CSS.
   ========================================================================== */

/* ------------------------------ 1. Tokens ------------------------------- */
:root {
  /* brand */
  --brand-700: #24285b;
  --brand-800: #1c2049;
  --ink-900: #121643;
  --ink-600: #4b5080;
  --ink-400: #6b7095;
  --accent-500: #00b779;
  --accent-600: #00875a;
  --accent-100: #e8f5e9;
  --promo-400: #ffd200;
  --surface-0: #ffffff;
  --surface-50: #f5f6f8;
  --surface-100: #eef0f4;
  --border-200: #dee2e6;
  --border-300: #c9cee8;
  --danger-600: #b3261e;

  /* type */
  --f-display: clamp(36px, 5vw, 56px);
  --f-h1: clamp(32px, 4vw, 44px);
  --f-h2: clamp(26px, 3vw, 32px);
  --f-h3: 24px;
  --f-h4: 20px;
  --f-lead: 18px;
  --f-body: 17px;
  --f-sm: 15px;
  --f-xs: 13px;
  --f-mono: 14px;
  --font-sans: "Raleway", "Noto Sans JP", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  /* space */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* radii */
  --r-btn: 0px;
  --r-card: 8px;
  --r-media: 12px;
  --r-pill: 999px;

  /* layout */
  --container: 1200px;
  --content: 1120px;
  --prose: 720px;
  --gutter: 24px;
  --header-h: 76px;
  --shadow-1: 0 1px 2px rgba(18, 22, 67, .06), 0 8px 24px rgba(18, 22, 67, .05);
}

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

/* Cyrillic subset for the Russian edition. Without a separate face the
   browser falls back to Segoe UI for U+0400-04FF and the page mixes two
   typefaces. Same family, same weight range, URL from Google Fonts v37. */
@font-face {
  font-family: "Raleway";
  src: url("../fonts/raleway-cyrillic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Japanese subset. Raleway has no kana or kanji, so Japanese text fell back
   to whichever CJK font the operating system offered - Noto Sans SC on the
   test machine, which renders Chinese glyph shapes. Two self-hosted faces
   cover the character set actually used by /ja/, one per weight, because
   bold chart labels and buttons also need Japanese. The unicode-range keeps
   Latin on Raleway, so ASCII stays byte-identical to the other editions. */
@font-face {
  font-family: "Noto Sans JP";
  src: url("../fonts/noto-sans-jp-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+3000-30FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF;
}
@font-face {
  font-family: "Noto Sans JP";
  src: url("../fonts/noto-sans-jp-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+3000-30FF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF;
}

/* Korean needs its own face: Malgun Gothic was the only Hangul fallback on the
   test machine and the hanja split between it and Noto Sans JP in the same
   paragraph. Noto Sans KR covers the 648 Hangul syllables plus the few hanja,
   arrows and dashes the forty pages actually use; Latin stays on Raleway. */
@font-face {
  font-family: "Noto Sans KR";
  src: url("../fonts/noto-sans-kr-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+1100-11FF, U+3130-318F, U+AC00-D7A3, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF, U+2010-201F, U+2026, U+20AC, U+2192, U+00A9, U+00B7;
}
@font-face {
  font-family: "Noto Sans KR";
  src: url("../fonts/noto-sans-kr-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+1100-11FF, U+3130-318F, U+AC00-D7A3, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF, U+2010-201F, U+2026, U+20AC, U+2192, U+00A9, U+00B7;
}

/* Hindi / Devanagari. No CJK face carries Devanagari, and the test machine
   fell back to Mangal, whose conjunct forms differ from the rest of the site.
   Two self-hosted faces cover the code points actually used by /hi/, one per
   weight, because bold navigation, buttons and card links also need it.
   Latin stays on Raleway; the unicode-range scopes the face to Devanagari
   plus the joiners that control half-forms and conjuncts. */
@font-face {
  font-family: "Noto Sans Devanagari";
  src: url("../fonts/noto-sans-devanagari-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CFF, U+A830-A83F, U+A8E0-A8FF, U+11B00-11B0A, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "Noto Sans Devanagari";
  src: url("../fonts/noto-sans-devanagari-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CFF, U+A830-A83F, U+A8E0-A8FF, U+11B00-11B0A, U+200C-200D, U+25CC;
}

/* ----------------------------- 3. Reset --------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface-0);
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: var(--f-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
a { color: var(--brand-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--brand-800); }
h1, h2, h3, h4 { color: var(--brand-700); margin: 0 0 var(--s-4); font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: var(--f-h1); line-height: 1.15; }
h2 { font-size: var(--f-h2); line-height: 1.2; }
h3 { font-size: var(--f-h3); line-height: 1.3; font-weight: 600; }
h4 { font-size: var(--f-h4); line-height: 1.35; font-weight: 600; }
p { margin: 0 0 var(--s-4); max-width: 72ch; }
ul, ol { margin: 0 0 var(--s-4); padding-inline-start: 22px; }
li { margin-bottom: var(--s-2); }
strong { color: var(--ink-900); font-weight: 700; }
code, .mono { font-family: var(--font-mono); font-size: var(--f-mono); }
hr { border: 0; border-top: 1px solid var(--border-200); margin: var(--s-7) 0; }
:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 2px; }

/* --------------------------- 4. Layout --------------------------------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding: 96px 0; }
.section--tight { padding: 64px 0; }
.section--tint { background: var(--surface-50); border-block: 1px solid var(--border-200); }
.section--dark { background: var(--ink-900); color: #fff; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark p, .section--dark li { color: #dfe2f2; }
.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--s-7); align-items: center; }
.stack > * + * { margin-top: var(--s-4); }
.section-head { max-width: 780px; margin-bottom: var(--s-7); }
.section-head p { color: var(--ink-600); font-size: var(--f-lead); }
.center { text-align: center; }
.center p, .center .section-head { margin-inline: auto; }

/* --------------------------- 5. Header --------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border-200);
}
.header-inner { display: flex; align-items: center; gap: var(--s-6); height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 0 auto; }
.brand img { width: 34px; height: 34px; display: block; }
.brand span { font-weight: 800; font-size: 19px; color: var(--ink-900); letter-spacing: -.01em; }
.main-nav { display: flex; gap: 2px; margin-inline-start: auto; }
.main-nav a {
  display: inline-block; padding: 8px 12px; font-size: var(--f-sm); font-weight: 600;
  color: var(--ink-600); text-decoration: none; border-radius: var(--r-btn); white-space: nowrap;
}
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--brand-700); background: var(--surface-50); }
.nav-soon {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px;
  font-size: var(--f-sm); font-weight: 600; color: var(--ink-400); cursor: not-allowed; white-space: nowrap;
}
.nav-soon .tag { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 5px; }

/* Help disclosure (header). The trigger deliberately reuses the plain nav
   link styling: same size, weight, colour, padding and line box, no caret,
   no border, no pill. Only :hover / open state adds the same tint as links. */
.nav-drop { position: relative; }
.nav-drop-btn {
  display: inline-block; padding: 8px 12px;
  font-family: var(--font-sans); font-size: var(--f-sm); font-weight: 600; line-height: inherit;
  color: var(--ink-600); background: transparent; border: 0; border-radius: var(--r-btn);
  cursor: pointer; white-space: nowrap; text-decoration: none;
}
.nav-drop-btn:hover, .nav-drop-btn[aria-expanded="true"], .nav-drop-btn.is-current {
  color: var(--brand-700); background: var(--surface-50);
}
.nav-drop-menu {
  list-style: none; margin: 0; padding: var(--s-2);
  position: absolute; inset-inline-start: 0; top: calc(100% + 6px); min-width: 200px;
  background: #fff; border: 1px solid var(--border-200); border-radius: var(--r-card);
  box-shadow: var(--shadow-1); z-index: 60;
}
.nav-drop-menu[hidden] { display: none; }
/* invisible bridge across the 6px trigger/panel gap: the pointer stays inside
   the panel while travelling down, so hover close is not triggered */
.nav-drop-menu::before {
  content: ""; position: absolute; inset-inline: 0; top: -8px; height: 8px;
}
.nav-drop-menu li { margin: 0; }
.nav-drop-menu a {
  display: block; padding: 9px 10px; border-radius: var(--r-btn);
  color: var(--brand-700); font-weight: 600; text-decoration: none;
}
.nav-drop-menu a:hover, .nav-drop-menu a[aria-current="page"] { background: var(--surface-50); }
.header-actions { display: flex; align-items: center; gap: var(--s-3); margin-inline-start: var(--s-2); }
.nav-toggle {
  display: none; width: 40px; height: 40px; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--border-200); border-radius: var(--r-btn); color: var(--brand-700);
}

/* language switcher */
.lang-wrap { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px;
  background: #fff; border: 1px solid var(--border-200); border-radius: var(--r-btn);
  color: var(--ink-600); font: 600 var(--f-sm)/1 var(--font-sans); cursor: pointer;
}
.lang-btn:hover { border-color: var(--border-300); color: var(--brand-700); }
.lang-btn svg { width: 18px; height: 18px; }
.lang-panel {
  display: none; position: absolute; inset-inline-end: 0; top: calc(100% + 8px); width: 260px;
  background: #fff; border: 1px solid var(--border-200); border-radius: var(--r-card);
  box-shadow: var(--shadow-1); padding: var(--s-2); z-index: 60;
}
.lang-panel.is-open { display: block; }
.lang-panel h3 { font-size: var(--f-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-400); padding: 6px 10px 4px; margin: 0; }
.lang-list { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow: auto; }
.lang-list li { margin: 0; }
.lang-list a, .lang-list span { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; font-size: var(--f-sm); border-radius: var(--r-btn); text-decoration: none; }
.lang-list a { color: var(--brand-700); font-weight: 600; }
.lang-list a:hover { background: var(--surface-50); }
.lang-list span { color: var(--ink-400); cursor: not-allowed; }
.lang-list a[aria-current="true"] { background: var(--accent-100); }
.lang-list .tag { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-400); }

/* --------------------------- 6. Buttons -------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 28px; border-radius: var(--r-btn);
  font: 700 16px/1 var(--font-sans); text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; transition: background-color .18s, border-color .18s, color .18s;
}
/* Button icons follow the button's own foreground colour, so the arrow on a
   filled primary button is white while the same arrow on a ghost or hero
   secondary button stays dark. The global .icon colour would otherwise paint
   a dark-blue arrow on a dark-blue fill. */
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; color: currentColor; }
.btn-primary { background: var(--brand-700); color: #fff; border-color: var(--brand-700); }
.btn-primary:hover { background: var(--brand-800); border-color: var(--brand-800); color: #fff; }
.btn-secondary { background: transparent; color: var(--brand-700); border-color: var(--brand-700); }
.btn-secondary:hover { background: var(--surface-50); color: var(--brand-800); }
/* secondary buttons inside the dark hero: white text and border for contrast */
.hero .btn-secondary { color: #fff; border-color: rgba(255, 255, 255, .72); }
.hero .btn-secondary:hover { background: rgba(255, 255, 255, .14); color: #fff; border-color: #fff; }
.btn-ghost { background: #fff; color: var(--brand-700); border-color: var(--border-200); }
.btn-ghost:hover { border-color: var(--border-300); color: var(--brand-800); }
.btn-on-dark { background: #fff; color: var(--brand-700); border-color: #fff; }
.btn-on-dark:hover { background: var(--promo-400); border-color: var(--promo-400); color: var(--ink-900); }
.btn-sm { height: 42px; padding: 0 18px; font-size: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.link-cta { font-weight: 700; color: var(--brand-700); text-decoration: none; border-bottom: 2px solid var(--accent-500); padding-bottom: 2px; }
.link-cta:hover { color: var(--brand-800); }

/* --------------------------- 7. Hero ----------------------------------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(1100px 520px at 82% -10%, rgba(0, 183, 121, .22), transparent 62%),
    linear-gradient(150deg, #121643 0%, #24285b 62%, #1c2049 100%);
  padding: 92px 0 76px;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
  background-size: 22px 22px; opacity: .35; pointer-events: none;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 72%);
}
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { color: #fff; font-size: var(--f-display); line-height: 1.05; font-weight: 800; letter-spacing: -.02em; max-width: 15ch; }
/* Cyrillic has taller ascenders and deeper descenders than Latin. At 1.05 the
   glyphs overrun the line box by ~3px at 56px, so the Russian hero gets a
   slightly taller line box instead of text touching the block edge. */
:lang(ru) .hero h1 { line-height: 1.12; padding-bottom: .05em; }
.hero .lead { font-size: 20px; line-height: 1.6; color: #dfe2f2; max-width: 54ch; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--s-5);
  font: 700 var(--f-xs)/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--accent-500); }
.hero .eyebrow { color: #bfe9d8; }
.hero .eyebrow::before { background: var(--accent-500); }
.hero-sub { margin-top: 28px; color: #b9bedf; font-size: var(--f-sm); }
.hero-art { width: 100%; height: auto; display: block; }
.hero-figure { width: 100%; }
.hero-figure svg { width: 100%; height: auto; display: block; }
/* Focus rings inside the dark hero. The global navy (#24285b) outline
   vanishes on the navy gradient (contrast ~1:1), so override with white
   here only. Header buttons keep the navy ring because the header is white
   and already contrast-compliant. Uses :focus-visible so mouse clicks are
   unaffected. */
.hero :focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}
/* Hero diagram switching. Default viewport shows the 780x520 desktop art; at
   <=560px the 360x752 mobile art takes over. The hidden variant is removed
   with display:none (not just visibility/opacity) so it is not announced
   twice by screen readers. 560px is chosen because below it the desktop
   figure narrows past ~520px, dropping its 15px labels under 10px effective. */
.hero-figure .hero-art-mobile { display: none; }
@media (max-width: 560px) {
  .hero-figure .hero-art-desktop { display: none; }
  .hero-figure .hero-art-mobile { display: block; }
}
/* two-column hero: copy left, diagram right. 1fr / 1.06fr gives the diagram
   ~560px at a 1200 viewport (within the 540-580px target) so its 15px labels
   land above 10px effective and the 14px card titles stay at ~10px.
   Declared inside a min-width query so the <=860px stacking rule still wins. */
@media (min-width: 861px) {
  .hero .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); }
}

/* fact chips */
.facts-wrap { background: #fff; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--border-200); border-block: 1px solid var(--border-200); }
.fact { background: #fff; padding: var(--s-5) var(--s-5); }
.fact h3 { font-size: 15px; margin: 0 0 4px; color: var(--brand-700); }
.fact p { margin: 0; font-size: var(--f-sm); color: var(--ink-600); line-height: 1.5; max-width: none; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22);
  color: #e6e8f5; border-radius: var(--r-pill); padding: 5px 12px; font-size: var(--f-xs); font-weight: 600; letter-spacing: .01em;
}
.chip--light { background: var(--surface-50); border-color: var(--border-200); color: var(--ink-600); }

/* --------------------------- 8. Cards ---------------------------------- */
.card {
  background: #fff; border: 1px solid var(--border-200); border-radius: var(--r-card);
  padding: var(--s-5); transition: border-color .18s, transform .18s;
}
.card:hover { border-color: var(--border-300); }
.card--accent { border-top: 3px solid var(--accent-500); }
.card h3 { margin: 14px 0 8px; }
.card p { font-size: var(--f-sm); color: var(--ink-600); margin-bottom: var(--s-3); }
.card .icon { width: 32px; height: 32px; color: var(--brand-700); }
.card-link { font-weight: 700; font-size: var(--f-sm); text-decoration: none; }

/* price cards */
.price-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border-200); border-radius: var(--r-card); padding: var(--s-6) var(--s-5) var(--s-5); }
.price-card--feature { border-color: var(--brand-700); box-shadow: 0 0 0 1px var(--brand-700); }
.price-card .badge-pop { position: absolute; top: -14px; inset-inline-start: var(--s-5); background: var(--promo-400); color: var(--ink-900); font: 700 var(--f-xs)/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; border-radius: var(--r-pill); padding: 7px 12px; }
.price-card h3 { font-size: var(--f-h3); margin: 0 0 4px; }
.price-card .price { font-size: 40px; font-weight: 800; color: var(--ink-900); line-height: 1; letter-spacing: -.02em; }
.price-card .price small { font-size: 15px; font-weight: 600; color: var(--ink-400); letter-spacing: 0; }
.price-card .price-alt { font-size: var(--f-sm); color: var(--ink-600); margin-top: 6px; }
.price-card ul { list-style: none; padding: 0; margin: var(--s-5) 0 var(--s-5); font-size: var(--f-sm); color: var(--ink-600); }
.price-card li { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; }
.price-card li svg { width: 16px; height: 16px; margin-top: 4px; flex: 0 0 auto; }
.price-card .btn { margin-top: auto; width: 100%; }

/* --------------------------- 9. Tables --------------------------------- */
.table-wrap { overflow-x: auto; margin: var(--s-5) 0; border: 1px solid var(--border-200); border-radius: var(--r-card); background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: var(--f-sm); }
th, td { text-align: start; padding: 12px 16px; border-bottom: 1px solid var(--border-200); vertical-align: top; }
th { background: var(--surface-50); color: var(--brand-700); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
tr:last-child td { border-bottom: 0; }
td code { font-size: 13px; background: var(--surface-50); padding: 1px 5px; border-radius: 3px; }
.table-note { font-size: var(--f-xs); color: var(--ink-400); margin-top: -8px; margin-bottom: var(--s-5); }
.chart { margin: var(--s-4) 0 0; background: #fff; border: 1px solid var(--border-200); border-radius: var(--r-card); padding: var(--s-4); }
.chart figcaption { margin-top: var(--s-2); font-size: var(--f-xs); color: var(--ink-400); }
.chart-svg { width: 100%; height: auto; display: block; }
.definition { background: #fff; border: 1px solid var(--border-200); border-inline-start: 4px solid var(--accent-500); border-radius: var(--r-card); padding: var(--s-5); max-width: 820px; }
.definition h2 { margin-top: 0; }
.definition p { margin-bottom: 0; }
.tick { color: var(--accent-600); font-weight: 700; }
.cross { color: var(--danger-600); font-weight: 700; }
.own-col { background: var(--accent-100); }
.own-col th { background: #d9f0e1; }
th.own-col-head { background: #d9f0e1; color: var(--accent-600); }
.shot { background: #fff; border: 1px solid var(--border-200); border-radius: var(--r-card); padding: var(--s-4); }
.shot h3 { margin: var(--s-4) 0 var(--s-2); }
.shot h2 { font-size: var(--f-h3); line-height: 1.3; margin: var(--s-4) 0 var(--s-2); }
.shot p { font-size: var(--f-sm); color: var(--ink-600); margin-bottom: var(--s-2); max-width: none; }
.shot p strong { color: var(--ink-900); }

/* --------------------------- 10. FAQ ----------------------------------- */
.faq { max-width: 860px; }
.faq details {
  background: #fff; border: 1px solid var(--border-200); border-radius: var(--r-card);
  padding: 0 20px; margin-bottom: 10px; overflow: hidden;
}
.faq details[open] { border-color: var(--border-300); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  cursor: pointer; list-style: none; padding: 18px 0; font-weight: 700; color: var(--brand-700); font-size: 17px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--ink-400); line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { color: var(--ink-600); font-size: var(--f-sm); padding-bottom: 6px; margin: 0 0 14px; }

/* --------------------------- 11. Callouts ------------------------------ */
.callout { display: grid; grid-template-columns: 40px 1fr; gap: var(--s-4); padding: var(--s-5); border-radius: var(--r-card); background: var(--surface-50); border: 1px solid var(--border-200); }
.callout svg { width: 28px; height: 28px; color: var(--brand-700); }
.callout h3 { font-size: var(--f-h4); margin: 0 0 4px; }
.callout p { margin: 0; font-size: var(--f-sm); color: var(--ink-600); }
.callout--warn { background: #fff8e1; border-color: #f0dc9a; }
.callout--warn svg { color: #8a6d00; }
.limits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border-200); border: 1px solid var(--border-200); border-radius: var(--r-card); overflow: hidden; margin: var(--s-5) 0; }
.limits div { background: #fff; padding: var(--s-4) var(--s-5); }
.limits h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-400); margin: 0 0 8px; }
.limits p { margin: 0; font-size: var(--f-sm); color: var(--ink-600); }
.limits .ok h4 { color: var(--accent-600); }
.limits .no h4 { color: var(--danger-600); }

/* --------------------------- 12. Code ---------------------------------- */
.code {
  position: relative; background: #0f1240; color: #e7ebff; border-radius: var(--r-card);
  padding: 18px 20px; font-family: var(--font-mono); font-size: var(--f-mono); line-height: 1.65;
  overflow-x: auto; margin: var(--s-4) 0;
}
.code .c { color: #8f97c9; }
.code .g { color: #5fe0ae; }
.code-label { display: flex; justify-content: space-between; align-items: center; font: 600 12px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-400); margin-bottom: -2px; }

/* --------------------------- 13. Steps --------------------------------- */
.steps { counter-reset: step; display: grid; gap: var(--s-4); }
.step { display: grid; grid-template-columns: 44px 1fr; gap: var(--s-4); padding: var(--s-5); background: #fff; border: 1px solid var(--border-200); border-radius: var(--r-card); }
.step .num { width: 44px; height: 44px; display: grid; place-items: center; background: var(--brand-700); color: #fff; border-radius: var(--r-pill); font-weight: 800; }
.step h3 { margin: 4px 0 6px; font-size: var(--f-h4); }
.step p { margin: 0; font-size: var(--f-sm); color: var(--ink-600); }
.step h3 .k { display: inline-block; margin-inline-start: 8px; font: 600 11px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-600); background: var(--accent-100); padding: 4px 7px; border-radius: 3px; vertical-align: 2px; }

/* --------------------------- 14. Breadcrumbs --------------------------- */
.crumbs { padding: 14px 0; border-bottom: 1px solid var(--border-200); background: #fff; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; font-size: var(--f-xs); }
.crumbs li { margin: 0; color: var(--ink-400); }
.crumbs li + li::before { content: "/"; margin-inline-end: 8px; color: var(--border-300); display: inline-block; }
.crumbs a { color: var(--ink-600); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* --------------------------- 15. Footer -------------------------------- */
.site-footer { background: var(--ink-900); color: #c9cee8; padding: 72px 0 28px; font-size: var(--f-sm); }

/* JivoSite bubble is fixed at bottom-right: keep the legal row clear of it. */
body:has(#jvLabelWrap) .site-footer { padding-bottom: 96px; }
@media (max-width: 860px) {
  body:has(#jvLabelWrap) .site-footer { padding-bottom: 128px; }
}
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: var(--s-6); }
.footer-brand .brand span { color: #fff; }
.footer-brand p { color: #9aa1c8; font-size: var(--f-sm); margin: var(--s-4) 0; max-width: 34ch; }
.footer-brand .chips .chip { font-size: 11px; }
.footer-col h4 { color: #fff; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--s-4); }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { color: #c9cee8; text-decoration: none; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-col .soon { color: #6b7095; }
.footer-col .soon span { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; border: 1px solid #3a3f6b; border-radius: 3px; padding: 2px 5px; margin-inline-start: 6px; }
.footer-lang { border-top: 1px solid #2c3060; margin-top: var(--s-7); padding-top: var(--s-5); display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.footer-lang .label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #7d84ad; }
.footer-lang a { color: #dfe2f2; text-decoration: none; font-size: 13px; }
.footer-lang a[aria-current="true"] { color: var(--accent-500); font-weight: 700; }
.footer-lang span { color: #565c8c; font-size: 13px; cursor: not-allowed; }
.footer-bottom { border-top: 1px solid #2c3060; margin-top: var(--s-5); padding-top: var(--s-5); display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; color: #7d84ad; font-size: var(--f-xs); }
.footer-bottom a { color: #b9bedf; text-decoration: none; }

/* --------------------------- 16. Tools --------------------------------- */
.tool { background: #fff; border: 1px solid var(--border-200); border-radius: var(--r-card); overflow: hidden; }
.tool-head { background: var(--surface-50); border-bottom: 1px solid var(--border-200); padding: var(--s-4) var(--s-5); display: flex; gap: 10px; align-items: center; }
.tool-head svg { width: 20px; height: 20px; color: var(--brand-700); }
.tool-head h2 { margin: 0; font-size: var(--f-h4); }
.tool-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
.tool-form { padding: var(--s-5); display: grid; gap: var(--s-4); align-content: start; border-inline-end: 1px solid var(--border-200); }
.tool-out { padding: var(--s-5); background: #0f1240; display: grid; gap: var(--s-3); align-content: start; }
.field { display: grid; gap: 6px; }
.field label { font: 700 12px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-400); }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--border-200); border-radius: var(--r-btn);
  padding: 11px 12px; font: 400 15px/1.5 var(--font-sans); color: var(--ink-900); background: #fff;
}
.field textarea { min-height: 92px; resize: vertical; font-family: var(--font-mono); font-size: 14px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand-700); box-shadow: 0 0 0 1px var(--brand-700); }
.field-hint { font-size: 12px; color: var(--ink-400); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.check { display: flex; align-items: center; gap: 8px; font-size: var(--f-sm); color: var(--ink-600); }
.check input { width: 16px; height: 16px; accent-color: var(--brand-700); }
.tool-out label, .tool-out .tool-label { color: #8f97c9; font: 700 12px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; margin: 0; }
.tool-out textarea {
  width: 100%; background: #161a4d; color: #e7ebff; border: 1px solid #343a72; border-radius: var(--r-btn);
  padding: 12px; font: 400 13px/1.7 var(--font-mono); min-height: 120px; resize: vertical;
}
.tool-out .err { color: #ffb4ae; font-size: 13px; font-family: var(--font-mono); }
.tool-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-copy { background: transparent; border: 1px solid #4a5090; color: #dfe2f2; height: 36px; padding: 0 12px; font-size: 12px; border-radius: var(--r-btn); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; font-family: var(--font-sans); font-weight: 600; }
.btn-copy:hover { border-color: #8f97c9; }
.btn-copy svg { width: 14px; height: 14px; }
.parse-out { background: #161a4d; border: 1px solid #343a72; border-radius: var(--r-btn); padding: 14px; font-family: var(--font-mono); font-size: 13px; line-height: 1.75; color: #e7ebff; white-space: pre-wrap; word-break: break-word; min-height: 120px; }
.parse-out .k { color: #8f97c9; }
.parse-out .v { color: #5fe0ae; }
.tool-note { color: #8f97c9; font-size: 12px; line-height: 1.6; margin: 0; }
.tool-out table { width: 100%; border-collapse: collapse; font-size: 13px; color: #e7ebff; }
.tool-out th, .tool-out td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #343a72; vertical-align: top; }
.tool-out th { color: #8f97c9; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.tool-out code { color: #5fe0ae; font-family: var(--font-mono); }
.hexcell { font-family: var(--font-mono); font-size: 12px; word-break: break-all; }

/* --------------------------- 17. Prose / legal ------------------------- */
.prose { max-width: var(--prose); }
.prose h2 { font-size: 26px; margin-top: var(--s-7); }
.prose h3 { margin-top: var(--s-5); }
.prose p, .prose li { color: var(--ink-600); font-size: var(--f-body); }
.prose ul { padding-inline-start: 20px; }
.prose .meta { font-size: var(--f-sm); color: var(--ink-400); }

/* --------------------------- 18. Misc --------------------------------- */
.badge { display: inline-block; background: var(--promo-400); color: var(--ink-900); font: 700 11px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; padding: 6px 9px; border-radius: var(--r-pill); }
.tag { display: inline-block; border: 1px solid var(--border-300); color: var(--ink-600); font-size: 12px; padding: 3px 8px; border-radius: 3px; }
.tag--ok { border-color: #a7dcc4; color: var(--accent-600); background: var(--accent-100); }
.tag--no { border-color: #f0c3bf; color: var(--danger-600); background: #fdeceb; }
.kpi { display: flex; gap: var(--s-5); flex-wrap: wrap; }
.kpi div { min-width: 120px; }
.kpi .n { font-size: 34px; font-weight: 800; color: var(--brand-700); line-height: 1; }
.kpi .l { font-size: 13px; color: var(--ink-400); margin-top: 6px; }
.icon { width: 24px; height: 24px; color: var(--brand-700); flex: 0 0 auto; }
.icon-16 { width: 16px; height: 16px; }
.icon-32 { width: 32px; height: 32px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.note-line { font-size: var(--f-xs); color: var(--ink-400); }

/* Contact section row: the 24px icon sits inside the inherited 1.7 line box,
   so the Telegram entry keeps the same line height, spacing and icon size as
   the email paragraph beside it. */
.contact-row { display: flex; align-items: center; gap: 10px; }
.contact-row .icon { flex: 0 0 auto; }
.mock { background: #fff; border: 1px solid var(--border-200); border-radius: var(--r-media); overflow: hidden; }
.mock-cap { font-size: var(--f-xs); color: var(--ink-400); padding: 10px 14px; border-top: 1px solid var(--border-200); background: var(--surface-50); }
.mock svg { display: block; width: 100%; height: auto; }

/* real screenshots: thin frame, soft background, never enlarged past 1:1 */
.shot-list { display: grid; gap: var(--s-5); }
.shot-fig { margin: 0 0 var(--s-4); width: fit-content; max-width: 100%; background: var(--surface-50);
  border: 1px solid var(--border-200); border-radius: var(--r-media); overflow: hidden; }
.shot-list .shot-fig { margin-inline: auto; }
.shot-fig picture { display: block; }
.shot-fig img { display: block; max-width: 100%; height: auto; }
.shot-fig figcaption { font-size: var(--f-xs); line-height: 1.5; color: var(--ink-400);
  padding: 8px 12px; border-top: 1px solid var(--border-200); }
.shot-gallery .shot-fig { width: fit-content; max-width: 100%; margin: 0 auto; }
details.more { border-top: 1px solid var(--border-200); margin-top: var(--s-4); }
details.more summary { cursor: pointer; padding: 12px 0; font-weight: 700; color: var(--brand-700); font-size: var(--f-sm); }
details.more p { font-size: var(--f-sm); color: var(--ink-600); }

/* --------------------------- 19. Responsive ---------------------------- */
@media (max-width: 1024px) {
  :root { --gutter: 20px; }
  .main-nav { display: none; position: absolute; top: var(--header-h); inset-inline: 0; background: #fff; border-bottom: 1px solid var(--border-200); padding: 12px var(--gutter); flex-direction: column; gap: 2px; box-shadow: var(--shadow-1); }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 12px; font-size: 16px; }
  /* inside the mobile drawer the Help panel is an inline group, never an overlay */
  .nav-drop { width: 100%; }
  .nav-drop-btn { display: block; width: 100%; text-align: start; padding: 12px; font-size: 16px; }
  .nav-drop-menu {
    position: static; margin: 2px 0 4px; padding-block: 0; padding-inline-start: 12px;
    min-width: 0; border: 0; box-shadow: none; background: transparent;
  }
  .nav-drop-menu a { padding: 10px 12px; font-size: 15px; }
  .nav-toggle { display: inline-flex; order: 3; }
  .header-inner { position: relative; gap: var(--s-3); }
  .header-actions { margin-inline-start: auto; }
  .header-actions .btn { display: none; }
  .section { padding: 64px 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .tool-body { grid-template-columns: 1fr; }
  .tool-form { border-inline-end: 0; border-bottom: 1px solid var(--border-200); }
}
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: var(--s-5); }
  .grid-3, .grid-4, .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { padding: 56px 0 48px; }
  .hero h1 { max-width: none; }
  .limits { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  :root { --gutter: 16px; }
  .section { padding: 48px 0; }
  .grid-2, .grid-3, .grid-4, .facts { grid-template-columns: 1fr; }
  .btn-row .btn { width: 100%; }
  .hero .lead { font-size: 18px; }
  .footer-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .price-card .price { font-size: 34px; }
  .step { grid-template-columns: 36px 1fr; }
  .step .num { width: 36px; height: 36px; font-size: 15px; }
}
@media print {
  .site-header, .site-footer, .crumbs, .btn-row, .lang-panel { display: none; }
  .section { padding: 24px 0; }
}

/* modem compatibility library */
.spec-table { width: 100%; border-collapse: collapse; font-size: var(--f-sm); }
.spec-table th, .spec-table td { text-align: start; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--border-200); }
.spec-table thead th { background: var(--surface-50); font-size: var(--f-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-400); }
.spec-table tbody th { width: 220px; color: var(--ink-900); font-weight: 600; }
.cmp-table td { min-width: 120px; }
.cmp-table td:first-child { min-width: 170px; }
.pill { display: inline-block; border-radius: var(--r-pill); padding: 4px 10px; font-size: var(--f-xs); font-weight: 600; line-height: 1.4; }
.pill--listed { background: var(--accent-100); color: var(--accent-600); }
.pill--untested { background: var(--surface-100); color: var(--ink-600); border: 1px solid var(--border-300); }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 var(--s-4); padding: 14px 16px; border: 1px solid var(--border-200); border-radius: var(--r-card); background: var(--surface-50); }
.filter-bar label { font-size: var(--f-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-400); }
.filter-bar input[type="search"] { flex: 1 1 220px; padding: 8px 12px; border: 1px solid var(--border-300); border-radius: var(--r-card); font-size: var(--f-sm); }
.filter-bar select { padding: 8px 10px; border: 1px solid var(--border-300); border-radius: var(--r-card); font-size: var(--f-sm); background: #fff; }

/* pricing buy forms */
.buy-form { display: grid; gap: 8px; margin-top: auto; }
.buy-label { font-size: var(--f-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-400); }
.buy-form select { width: 100%; padding: 9px 10px; border: 1px solid var(--border-300); border-radius: var(--r-card); font-size: var(--f-sm); background: #fff; }
.buy-actions { display: grid; gap: 10px; }
.buy-actions .btn { margin-top: 0; }
.buy-download { font-size: 14px; letter-spacing: 0; }
.buy-note { font-size: 12.5px; line-height: 1.45; color: var(--ink-400); margin: 0; }

/* TCO calculator */
.tco-grid { display: grid; grid-template-columns: 340px 1fr; gap: var(--s-5); align-items: start; }
.tco-form { display: grid; gap: 12px; margin: 0; }
.tco-form .field input { text-align: end; }
.tco-out-wrap { min-width: 0; }
.tco-bars { display: grid; gap: 8px; margin-top: var(--s-4); }
.tco-bar-row { display: grid; grid-template-columns: minmax(86px, max-content) 1fr 76px; gap: 10px; align-items: center; font-size: var(--f-xs); color: var(--ink-400); }
.tco-track { background: var(--surface-50); border: 1px solid var(--border-200); border-radius: 2px; height: 18px; overflow: hidden; }
.tco-bar { height: 100%; border-radius: 1px; }
.tco-bar--cloud { background: var(--brand-700); }
.tco-bar--ours { background: var(--accent-500); }
.tco-num { text-align: end; font-variant-numeric: tabular-nums; color: var(--ink-600); }
.tco-verdict { margin-top: var(--s-4); font-weight: 600; color: var(--ink-900); }
.tco-breakeven { font-size: var(--f-sm); color: var(--ink-600); }
@media (max-width: 860px) { .tco-grid { grid-template-columns: 1fr; } }

/* RTL languages (Arabic). Layout flips through the logical properties above;
   only direction-sensitive glyphs and runs of Latin text need explicit rules. */
html[dir=rtl] .icon-mirror { transform: scaleX(-1); }
html[dir=rtl] .crumbs li + li::before { transform: scaleX(-1); }
/* Latin/technical runs (PDU, SMPP, GSM-7, AT, URLs, mail addresses, prices)
   are isolated so an RTL paragraph cannot reorder "$99" into "99$" or drag a
   trailing currency sign to the start of the sentence. */
html[dir=rtl] a,
html[dir=rtl] code,
html[dir=rtl] bdi,
html[dir=rtl] .price,
html[dir=rtl] .hexcell { unicode-bidi: isolate; }
/* Diagrams, hex dumps and AT commands keep their LTR reading order: mirroring
   a technical drawing would reverse the data flow it describes. */
html[dir=rtl] [dir="ltr"] { direction: ltr; text-align: left; }

/* Japanese line breaking. Kana and long marks must not be split mid-word,
   so no anywhere/break-all anywhere in the Japanese text flow: strict
   kinsoku rules apply and only long unbreakable tokens (URLs, PDU hex)
   fall back to break-word. The SVG rule overrides the presentation
   attribute that inline charts carry. */
html[lang="ja"] { line-break: strict; }
html[lang="ja"] body { word-break: normal; overflow-wrap: break-word; }
html[lang="ja"] svg text { font-family: Raleway, "Noto Sans JP", sans-serif; }
/* CJK glyphs are taller than Latin at the same point size; the display
   line-height would cut the descender of kana and kanji. */
html[lang="ja"] .hero h1 { line-height: 1.14; padding-bottom: .06em; }

/* Korean line breaking. Hangul breaks between words, not inside them, so the
   Japanese strict kinsoku rules and break-all are both wrong here: keep-all
   plus break-word gives word-wise wrapping and lets only genuinely
   unbreakable tokens (URLs, hex) overflow their box. Long compounds are
   rewritten in the copy instead of adding anywhere. */
html[lang="ko"] body { word-break: keep-all; overflow-wrap: break-word; }
/* Buttons, tabs and chips use var(--font-sans) directly, so swap the stack on
   the root of the Korean pages rather than only on body. */
html[lang="ko"] { --font-sans: "Raleway", "Noto Sans KR", "Noto Sans JP", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; }
html[lang="ko"] svg text { font-family: Raleway, "Noto Sans KR", sans-serif; }
/* Hangul sits lower than Latin at the same point size; keep the display
   leading from clipping the final consonant. */
html[lang="ko"] .hero h1 { line-height: 1.16; padding-bottom: .04em; }

/* Hindi line breaking. Devanagari consonant clusters must never be split, so
   neither break-all nor anywhere is allowed: normal word wrapping with
   overflow-wrap: break-word keeps ksha/shra/jña/ṭra conjuncts and the
   pre-base i-matra reordering intact, and only lets URLs and PDU hex break.
   line-break stays auto so the danda (U+0964) and spaces keep their natural
   break opportunities. */
html[lang="hi"] body { word-break: normal; overflow-wrap: break-word; }
html[lang="hi"] { --font-sans: "Raleway", "Noto Sans Devanagari", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; }
html[lang="hi"] svg text { font-family: Raleway, "Noto Sans Devanagari", sans-serif; }
/* Matras sit above and below the base letter; the display leading that suits
   Latin clips them at the same point size. */
html[lang="hi"] .hero h1 { line-height: 1.26; padding-bottom: .06em; }
/* Buttons keep their fixed 52px height, so a wrapped label would collide with
   itself. Devanagari labels are longer than the English ones; let the pill
   grow instead of wrapping inside a fixed box. */
html[lang="hi"] .btn { height: auto; min-height: 52px; line-height: 1.35; padding-top: 8px; padding-bottom: 8px; }