/* ============================================================
   Infrays website — skin inherited from the subscription page.
   Token block is copied VERBATIM from
   subscription-page/frontend/src/ru-theme.css so the marketing site
   and the app share one palette. When you retune the theme there,
   copy the two :root blocks below across.
   DARK = neutral professional grey (default) · LIGHT = pale latte.
   ============================================================ */

/* ---------- DARK (neutral, professional) : default ---------- */
:root{
  --bg:            #17181a;
  --surface:       #212327;
  --surface-2:     #292b30;
  --surface-hover: #26282c;
  --border:        #ffffff14;
  --border-strong: #ffffff2b;
  --text-main:     #e8eaed;
  --text-minor:    #9aa0a6;
  --accent:        #c6ccd4;
  --accent-soft:   #ffffff10;
  --red:           #ff5c60;
  --red-soft:      rgba(255,92,96,.16);
  --red-soft-hover:rgba(255,92,96,.26);
  --featured:      #c0a765;
  --vignette:      rgba(0,0,0,.42);
  --icon-glyph:    var(--text-main);

  /* site-only additions */
  --radius-md: .5rem;
  --radius-lg: .75rem;
  --radius-xl: 1rem;
  --maxw: 68rem;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- LIGHT (pale latte) ---------- */
:root[data-theme='light']{
  --bg:#efe7d9; --surface:#f7f1e7; --surface-2:#ece2d2; --surface-hover:#f1eadd;
  --border:#00000016; --border-strong:#0000002b; --text-main:#2a2723; --text-minor:#8a8377;
  --accent:#8a7355; --accent-soft:#00000010; --featured:#b07d1e;
  --red:#d6373c; --red-soft:rgba(214,55,60,.12); --red-soft-hover:rgba(214,55,60,.2);
  --vignette:rgba(0,0,0,.09); --icon-glyph:var(--text-main);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--font); background:var(--bg); color:var(--text-main);
  line-height:1.6; font-size:16px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(120% 120% at 50% 50%, transparent 58%, var(--vignette) 100%);
}
img{ max-width:100%; height:auto; }
a{ color:var(--text-main); text-decoration:none; }
a:hover{ color:var(--red); }
h1,h2,h3{ line-height:1.2; letter-spacing:-.02em; margin:0 0 .5em; font-weight:700; }
h1{ font-size:clamp(2rem,5.2vw,3.25rem); }
h2{ font-size:clamp(1.5rem,3.4vw,2.15rem); }
h3{ font-size:1.0625rem; }
p{ margin:0 0 1rem; }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 1.25rem; }
.muted{ color:var(--text-minor); }
.center{ text-align:center; }

/* skip link — keyboard + screen-reader users */
.skip{
  position:absolute; left:-9999px; top:0; background:var(--surface); color:var(--text-main);
  padding:.75rem 1rem; border:1px solid var(--border-strong); border-radius:var(--radius-md); z-index:100;
}
.skip:focus{ left:1rem; top:1rem; }
:focus-visible{ outline:2px solid var(--red); outline-offset:2px; border-radius:4px; }

/* ---------- header ---------- */
.hdr{
  position:sticky; top:0; z-index:50; background:var(--surface);
  border-bottom:1px solid var(--border);
}
.hdr-in{ display:flex; align-items:center; flex-wrap:wrap; gap:1rem 2rem; min-height:8rem; padding-block:.75rem; }
.brand{ display:flex; align-items:center; gap:1rem; font-weight:800; font-size:1.5rem; margin-right:auto; }
.brand:hover{ color:var(--text-main); }
.brand img{ width:3.5rem; height:3.5rem; border-radius:var(--radius-md); display:block; }
.nav{ display:flex; align-items:center; flex-wrap:wrap; gap:.75rem 1.25rem; }
.nav a{ color:var(--text-minor); font-size:1.125rem; font-weight:700; white-space:nowrap; }
.nav a:hover,.nav a[aria-current="page"]{ color:var(--text-main); }
.hdr-actions{ display:flex; align-items:center; gap:.75rem; }

/* icon button — matches the header buttons in the user area */
.iconbtn{
  width:3rem; height:3rem; display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  color:var(--text-main); cursor:pointer; padding:0; font:inherit; font-size:1.0625rem; font-weight:700;
}
.iconbtn:hover{ background:var(--surface-hover); border-color:var(--border-strong); color:var(--text-main); }
.iconbtn svg{ width:1.5rem; height:1.5rem; stroke:currentColor; fill:none; stroke-width:1.8; }

/* ---------- buttons — red light-variant, as on the sub page ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.7rem 1.4rem; border-radius:var(--radius-md); font-weight:600; font-size:.9375rem;
  border:1px solid transparent; cursor:pointer; font-family:inherit; text-align:center;
  transition:background .15s ease, border-color .15s ease;
}
.btn-primary{ background:var(--red-soft); color:var(--red); border-color:transparent; }
.btn-primary:hover{ background:var(--red-soft-hover); color:var(--red); }
.btn-ghost{ background:var(--surface-2); color:var(--text-main); border-color:var(--border); }
.btn-ghost:hover{ background:var(--surface-hover); border-color:var(--border-strong); color:var(--text-main); }
.btn-lg{ padding:.9rem 1.9rem; font-size:1rem; }
.btn svg{ width:1.125rem; height:1.125rem; stroke:currentColor; fill:none; stroke-width:1.8; flex:none; }

/* ---------- panel — the .ru-onepane look ---------- */
.pane{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
}
.sep{ height:1px; background:var(--border); }

/* ---------- hero ---------- */
.hero{ padding:clamp(3rem,8vw,6rem) 0 clamp(2rem,5vw,3.5rem); text-align:center; }
.hero p.lead{ font-size:clamp(1rem,2.2vw,1.1875rem); color:var(--text-minor); max-width:44rem; margin:0 auto 2rem; }
.hero-cta{ display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }
.pill{
  display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .85rem; margin-bottom:1.5rem;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  font-size:.8125rem; color:var(--text-minor); font-weight:500;
}
.pill .dot{ width:.5rem; height:.5rem; border-radius:50%; background:var(--featured); flex:none; }
.trust{ display:flex; gap:2.5rem; justify-content:center; flex-wrap:wrap; margin-top:2.5rem; }
.trust div{ text-align:center; }
.trust b{ display:block; font-size:1.5rem; font-weight:700; }
.trust span{ font-size:.8125rem; color:var(--text-minor); }

/* ---------- sections ---------- */
.sect{ padding:clamp(2.5rem,6vw,4.5rem) 0; }
.sect-head{ max-width:40rem; margin:0 auto 2.5rem; text-align:center; }
.sect-head p{ color:var(--text-minor); margin:0; }

/* ---------- feature grid ---------- */
.grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); }
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.5rem;
  transition:border-color .2s ease;
}
.card:hover{ border-color:var(--border-strong); }
.card h3{ margin:0 0 .4rem; }
.card p{ margin:0; color:var(--text-minor); font-size:.9375rem; }

/* icon tile — matches the app tiles in the user area */
.tile{
  width:2.75rem; height:2.75rem; display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius-md); margin-bottom:1rem; color:var(--text-minor);
}
.tile svg{ width:1.375rem; height:1.375rem; stroke:currentColor; fill:none; stroke-width:1.7; }
/* Brand marks are solid shapes; see the matching rule on .app .glyph svg
   for why (outlined brand logos read as generic blobs at this size). */
.tile svg.solid{ fill:currentColor; stroke:none; }
.tile svg.solid .ln{ fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; }

/* Desktop guide card covers three OSes, so its tile holds three small
   glyphs side by side instead of picking one to stand for all of them. */
.tile-cluster{ gap:.3rem; }
.tile-cluster .mini{ display:flex; }
.tile-cluster .mini svg{ width:.95rem; height:.95rem; }

/* ---------- app tiles — phone home-screen, as on the sub page ---------- */
/* Centred row rather than a grid: with auto-fill the last row's empty
   tracks still took up width, so eight icons sat left of a gap. */
.apps{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; }
.app{ flex:0 1 5rem; display:flex; flex-direction:column; align-items:center; gap:.5rem; text-align:center; }
.app .glyph{
  width:3.5rem; height:3.5rem; display:flex; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--border); border-radius:1rem;
  color:var(--text-main); transition:border-color .2s ease, transform .2s ease;
}
.app:hover .glyph{ border-color:var(--border-strong); transform:translateY(-2px); }
.app .glyph svg{ width:1.75rem; height:1.75rem; stroke:currentColor; fill:none; stroke-width:1.6; }
/* Brand marks are solid shapes, not outlines — outlined brand logos read as
   generic blobs at this size. Icons that mix a drawn frame with a solid mark
   inside set stroke/fill per element instead. */
.app .glyph svg.solid{ fill:currentColor; stroke:none; }
.app .glyph svg.solid .ln{ fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; }
.app span{ font-size:.75rem; color:var(--text-minor); line-height:1.3; }

/* ---------- steps ---------- */
.steps{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); counter-reset:s; }
.step{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.5rem; }
.step .num{
  width:2rem; height:2rem; border-radius:var(--radius-md); background:var(--red-soft); color:var(--red);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.875rem; margin-bottom:.9rem;
}
.step h3{ margin:0 0 .35rem; }
.step p{ margin:0; color:var(--text-minor); font-size:.9375rem; }

/* ---------- pricing ---------- */
.plans{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); align-items:start; }
.plan{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.75rem; position:relative; }
.plan.best{ border-color:var(--red); }
.plan .badge{
  /* top:0 + translateY(-100%) plants the badge's bottom edge on the card's
     top border, then margin-top lifts it clear by a fixed gap — so it never
     sits on/across the border line regardless of the badge's own height. */
  position:absolute; top:0; left:50%; transform:translate(-50%,-100%); margin-top:-.5rem;
  display:inline-flex; align-items:center; line-height:1;
  background:var(--red-soft); color:var(--red); font-size:.6875rem; font-weight:700;
  padding:.3rem .7rem; border-radius:999px; text-transform:uppercase; letter-spacing:.04em;
  border:1px solid var(--red-soft-hover); white-space:nowrap;
}
.plan h3{ margin:0 0 .25rem; font-size:1rem; color:var(--text-minor); font-weight:600; }
.plan .price{ font-size:2.25rem; font-weight:700; letter-spacing:-.03em; }
.plan .price small{ font-size:.875rem; font-weight:500; color:var(--text-minor); letter-spacing:0; }
.plan .note{ font-size:.8125rem; color:var(--text-minor); margin:.25rem 0 1.25rem; }
.plan ul{ list-style:none; padding:0; margin:0 0 1.5rem; font-size:.9375rem; }
.plan li{ display:flex; gap:.6rem; align-items:flex-start; padding:.3rem 0; color:var(--text-minor); }
.plan li svg{ width:1rem; height:1rem; flex:none; margin-top:.3rem; stroke:var(--red); fill:none; stroke-width:2.2; }
.plan .btn{ width:100%; }

/* ---------- FAQ ---------- */
.faq{ max-width:46rem; margin:0 auto; }
.faq details{ border-bottom:1px solid var(--border); }
.faq details:first-child{ border-top:1px solid var(--border); }
.faq summary{
  cursor:pointer; padding:1.1rem 2.5rem 1.1rem .25rem; font-weight:600; position:relative;
  list-style:none; font-size:1rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:.6rem; top:1.4rem; width:.55rem; height:.55rem;
  border-right:2px solid var(--text-minor); border-bottom:2px solid var(--text-minor);
  transform:rotate(45deg); transition:transform .2s ease;
}
.faq details[open] summary::after{ transform:rotate(-135deg); top:1.6rem; }
.faq details[open] summary{ color:var(--red); }
.faq .ans{ padding:0 2.5rem 1.2rem .25rem; color:var(--text-minor); }
.faq .ans p:last-child{ margin:0; }

/* ---------- CTA band ---------- */
.cta{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:clamp(2rem,5vw,3rem); text-align:center;
}
.cta h2{ margin-bottom:.5rem; }
.cta p{ color:var(--text-minor); max-width:36rem; margin:0 auto 1.75rem; }
/* Second contact route under a CTA button, for anyone who cannot use the
   first one. Needs the .cta p override to sit close under the button. */
.cta-alt, .cta .cta-alt{ font-size:.8125rem; color:var(--text-minor); max-width:36rem;
  margin:1.25rem auto 0; }

/* ---------- legal / article pages ---------- */
.doc{ max-width:46rem; margin:0 auto; padding:clamp(2rem,5vw,3.5rem) 0; }
.doc h1{ font-size:clamp(1.75rem,4vw,2.5rem); }
.doc h2{ font-size:1.375rem; margin-top:2.5rem; }
.doc h3{ font-size:1.0625rem; margin-top:1.75rem; }
.doc p,.doc li{ color:var(--text-minor); }
.doc ul,.doc ol{ padding-left:1.25rem; }
.doc li{ margin:.4rem 0; }
.doc strong{ color:var(--text-main); }
.doc .updated{ font-size:.875rem; color:var(--text-minor); margin-bottom:2.5rem; }
.doc table{ width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:.9375rem; }
.doc th,.doc td{ text-align:left; padding:.7rem .75rem; border-bottom:1px solid var(--border); color:var(--text-minor); }
.doc th{ color:var(--text-main); font-weight:600; }
.tablewrap{ overflow-x:auto; }

/* breadcrumb */
.crumb{ font-size:.8125rem; color:var(--text-minor); padding-top:1.5rem; }
.crumb a{ color:var(--text-minor); }
.crumb a:hover{ color:var(--red); }

/* ---------- footer ---------- */
.ftr{ border-top:1px solid var(--border); margin-top:clamp(2rem,6vw,4rem); padding:2.5rem 0 2rem; }
.ftr-grid{ display:grid; gap:2rem; grid-template-columns:1.5fr repeat(3,1fr); }
.ftr h4{ font-size:.8125rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-main); margin:0 0 .9rem; font-weight:700; }
.ftr ul{ list-style:none; padding:0; margin:0; }
.ftr li{ margin:.45rem 0; }
.ftr a{ color:var(--text-minor); font-size:.9375rem; }
.ftr a:hover{ color:var(--red); }
.ftr .about p{ color:var(--text-minor); font-size:.875rem; margin:.75rem 0 0; max-width:22rem; }
.ftr-btm{
  margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.8125rem; color:var(--text-minor);
}

/* ---------- language switch ---------- */
/* Only the active language is rendered.

   We only ever set `display:none` on the INACTIVE language and never set
   `display` on the active one — so each element keeps whatever display its
   own rule gave it (.lead stays a block, .badge stays inline-flex, and so
   on). Using `display:revert` here instead would fall back to the UA default
   and silently break those layouts. */
:root[data-site-lang='ru'] [data-lang='en'],
:root[data-site-lang='en'] [data-lang='ru']{ display:none !important; }

/* ---------- responsive ---------- */
@media (max-width:52rem){
  .ftr-grid{ grid-template-columns:1fr 1fr; }
  .ftr .about{ grid-column:1 / -1; }
}
@media (max-width:44rem){
  .nav{ display:none; }
  .trust{ gap:1.5rem; }
  .hero-cta .btn{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ---------- notices ----------
   The "❗️" callouts that opened the Telegraph instructions page. Left rule
   plus a muted panel, so they read as asides rather than error states. */
.notices{ display:grid; gap:.65rem; margin:0 0 2rem; }
.notice{
  display:flex; gap:.7rem; align-items:flex-start;
  padding:.85rem 1rem; border-radius:.65rem;
  background:var(--surface-2); border:1px solid var(--border);
  border-left:3px solid var(--red); color:var(--text-soft);
  font-size:.9rem; line-height:1.55;
}
.notice svg{ flex:none; width:1.05rem; height:1.05rem; margin-top:.15rem;
  stroke:var(--red); fill:none; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }
.notice a{ color:var(--text-main); text-decoration:underline;
  text-underline-offset:2px; text-decoration-color:var(--border-strong); }
.notice a:hover{ text-decoration-color:var(--red); }

/* Two-plan pricing grid: centre the pair instead of stretching them across
   the full width the three-card layout used. */
.plans-2{ max-width:44rem; margin-inline:auto; }

/* In-step link down to the sign-up block, so step 1 is actionable rather
   than just describing what to do. */
.step-link{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.85rem;
  font-size:.875rem; font-weight:600; color:var(--red);
  text-decoration:none; transition:gap .2s ease;
}
.step-link svg{ width:.95rem; height:.95rem; stroke:currentColor; fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.step-link:hover{ gap:.6rem; }
.step-link:hover span{ text-decoration:underline; text-underline-offset:2px; }

/* Anchors scroll under the sticky header without this. `.anchor` is an
   empty marker: putting the id on a heading breaks when that heading is the
   hidden half of a RU/EN pair, since display:none elements are not scroll
   targets. */
#start{ scroll-margin-top:5rem; }
.anchor{ display:block; height:0; scroll-margin-top:5rem; }

/* Кодовое слово платёжного провайдера в подвале: видимое, но негромкое.
   Снимается вместе с ключом COPY_CODEWORD после регистрации кассы. */
.ftr-btm .codeword{opacity:.55;font-variant-numeric:tabular-nums}