/* Shared styles for the roitrack landing page.
   Used by / (index.html) and /ru/ — edit once, both pick it up. */
:root{
  --bg:#0f1117; --surface:#181c26; --raised:#1c212e; --border:#262a36; --border-2:#3a4150;
  --text:#f1f5f9; --text-2:#8b93a7; --text-3:#5b6478;
  --brand:#16a34a; --brand-text:#22c55e; --loss:#ef4444; --warn:#f59e0b;
  --r-sm:4px; --r-md:6px; --r-lg:8px; --r-xl:12px;
  --display:"Instrument Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text); font-family:var(--body);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
/* height:auto is load-bearing, not tidiness. Every img carries width and
   height attributes so the browser can reserve the right box before the file
   arrives (no layout shift). Without height:auto those attributes become a
   FIXED height while max-width scales the width down — which squashed every
   screenshot on this page vertically the moment the attributes were added. */
img{max-width:100%; height:auto; display:block}
a{color:inherit}
.wrap{max-width:1080px; margin:0 auto; padding:0 var(--pad)}
.narrow{max-width:660px}

/* ---------- signature device: mono column label + hairline claim rows ---------- */
.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-3); display:flex; align-items:center; gap:14px; margin:0 0 18px;
}
.eyebrow::after{content:""; flex:1; height:1px; background:var(--border)}
.rows{border-top:1px solid var(--border); margin:28px 0 0}
.row{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:14px 2px; border-bottom:1px solid var(--border);
}
.row .k{color:var(--text-2); font-size:14.5px}
.row .v{font-family:var(--mono); font-size:15px; font-weight:500; color:var(--text); white-space:nowrap}
.row .v.pos{color:var(--brand-text)}
.row .v.neg{color:var(--loss)}

/* ---------- nav ---------- */
/* Fixed (not sticky) so in-app browsers like Telegram render the nav pinned
   to viewport top with no gap between URL bar chrome and nav. body gets the
   nav height as padding-top so page content doesn't slide under. */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50; background:#0f1117;
  padding-top:env(safe-area-inset-top);
  border-bottom:1px solid var(--border);
}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:58px}
body{padding-top:calc(58px + env(safe-area-inset-top))}
.mark{font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:-.02em; text-decoration:none}
.mark i{color:var(--brand-text); font-style:normal}
.nav ul{display:flex; gap:26px; list-style:none; margin:0; padding:0}
.nav ul a{color:var(--text-2); text-decoration:none; font-size:14px}
.nav ul a:hover{color:var(--text)}
/* Left cluster: wordmark + section links sit together, CTAs stay right. */
.nav-l{display:flex; align-items:center; gap:30px}
.nav-r{display:flex; align-items:center; gap:22px}
/* Sign-in text link — muted so the primary CTA still owns the eye. */
.nav-signin{color:var(--text-2); text-decoration:none; font-size:14px}
.nav-signin:hover{color:var(--text)}
/* Language selector — text only. A flag names a country, not a language. */
.lang{display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12px; letter-spacing:.06em}
.lang a{color:var(--text-3); text-decoration:none}
.lang a:hover{color:var(--text-2)}
.lang a[aria-current]{color:var(--text)}
.lang s{color:var(--border-2); text-decoration:none}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; font-family:var(--body); font-size:14.5px; font-weight:500;
  padding:10px 18px; border-radius:var(--r-md); text-decoration:none; border:1px solid transparent;
  white-space:nowrap; /* "Начать трекинг" was wrapping to two lines in the nav */
  transition:background .15s ease,border-color .15s ease;
}
.btn-primary{background:var(--brand); color:#fff}
.btn-primary:hover{background:#15903f}
.btn-ghost{border-color:var(--border-2); color:var(--text)}
.btn-ghost:hover{border-color:var(--text-3); background:var(--surface)}
.btn-lg{font-size:16px; padding:13px 24px}

/* ---------- sections ---------- */
section{padding:88px 0}
section + section{border-top:1px solid var(--border)}
h1{
  font-family:var(--display); font-weight:700; font-size:clamp(38px,6vw,60px);
  line-height:1.04; letter-spacing:-.035em; margin:0 0 20px;
}
h2{
  font-family:var(--display); font-weight:600; font-size:clamp(26px,3.4vw,34px);
  line-height:1.16; letter-spacing:-.025em; margin:0 0 16px;
}
h3{font-family:var(--display); font-weight:600; font-size:21px; letter-spacing:-.015em;
   line-height:1.2; margin:0 0 10px}
p{margin:0 0 16px; color:var(--text-2)}
p.lead{font-size:18px; color:var(--text-2); line-height:1.62}
strong{color:var(--text); font-weight:500}

/* ---------- hero ---------- */
/* Centred copy, screenshot full width below it. The two-column version put a
   1400px table into a ~470px column, where the interface was unreadable —
   the screenshot is the proof, so it gets the full container. Centring the
   text also stops the copy hugging the left edge with dead space beside it,
   which is what the side-by-side layout was solving for. Gaps stay about a
   third tighter than the rest of the page. */
.hero{padding:64px 0 0}
.hero-copy{max-width:720px; margin:0 auto; text-align:center}
/* Caption belongs to the image, not the page: centred under a centred shot. */
.hero-shot .shot-cap{text-align:center}
.hero .tag{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-2);
  border:1px solid var(--border); border-radius:100px; padding:6px 14px; margin-bottom:18px;
}
.hero .tag b{color:var(--brand-text); font-weight:500}
.hero h1{margin-bottom:14px}
.hero p.lead b{color:var(--text); font-weight:600}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin:20px 0 0}
/* One micro line under the CTAs: trial terms, cancellation, latency. It names
   Telegram because the trial button opens it — a button that silently launches
   another app reads as bait-and-switch. */
.hero .note{font-size:12.5px; color:var(--text-3); margin:12px 0 0; line-height:1.6}
.hero .note a{color:var(--brand-text); text-decoration:none}
.hero .note a:hover{text-decoration:underline}
.shot{
  border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden;
  background:var(--bg); box-shadow:0 24px 60px -24px rgba(0,0,0,.85);
}
.shot-cap{font-family:var(--mono); font-size:11.5px; color:var(--text-3); margin:12px 2px 0; letter-spacing:.04em}
.hero-shot{margin-top:76px}

/* ---------- features ---------- */
.feat{margin:0 0 76px}
.feat:last-child{margin-bottom:0}
.feat .shot{margin-top:30px}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:44px 56px; margin-top:8px}

/* ---------- comparison slider ---------- */
.compare{
  position:relative; border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden;
  user-select:none; touch-action:pan-y; cursor:ew-resize; margin-top:30px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.85);
}
.compare img{width:100%; pointer-events:none}
.compare .layer{position:absolute; inset:0}
.compare .layer img{position:absolute; inset:0; width:100%}
.divider{position:absolute; top:0; bottom:0; width:2px; background:var(--brand); z-index:5; pointer-events:none}
.handle{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40px; height:40px;
  border-radius:50%; background:var(--brand); display:flex; align-items:center; justify-content:center;
  gap:4px; box-shadow:0 3px 14px rgba(0,0,0,.6);
}
.handle s{display:block; width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent}
.handle .a{border-right:6px solid #fff} .handle .b{border-left:6px solid #fff}
.compare:focus-visible{outline:2px solid var(--brand-text); outline-offset:3px}
.cmp-hint{font-family:var(--mono); font-size:11.5px; color:var(--text-3); margin:12px 2px 0; letter-spacing:.04em}

/* ---------- "what we don't have" ---------- */

/* ---------- setup steps ---------- */
.steps{counter-reset:s; margin:30px 0 0; padding:0; list-style:none; border-top:1px solid var(--border)}
.steps li{
  counter-increment:s; display:flex; gap:20px; padding:18px 2px; border-bottom:1px solid var(--border);
  align-items:baseline;
}
.steps li::before{
  content:"0" counter(s); font-family:var(--mono); font-size:12px; color:var(--text-3);
  letter-spacing:.06em; flex:0 0 auto;
}
.steps .t{color:var(--text); font-size:15.5px}
.steps code{
  font-family:var(--mono); font-size:13px; background:var(--raised); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:2px 7px; color:var(--brand-text);
}

/* ---------- heading icons ----------
   Same construction as /fb: inline SVG, stroke-based at 1.75 in a 24 box, and
   .ico-part marks the one element carrying the meaning so motion can be added
   later without a re-draw.

   The icon lives inside the <h3> rather than on its own line above it, so it
   reads as part of the title. align-items:flex-start keeps it on the first
   line when a heading wraps; the text is wrapped in a span so it stays one
   flex item. --brand-text, not --brand: the style guide reserves the solid
   fill for buttons and checkboxes, and this is a thin stroke on a dark ground. */
/* h3 had no line-height and inherited body's 1.6, so a 24px icon aligned to
   flex-start sat ~5px above the text it belongs to. h1 and h2 were already
   tight (1.04 / 1.16); h3 was the outlier. */
h3{display:flex; align-items:flex-start; gap:10px}
h3 span{display:block}
.ico{
  width:24px; height:24px; flex:none;
  color:var(--brand-text);
  stroke:currentColor; fill:none;
  stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round;
}
.ico circle,.ico rect,.ico path,.ico line,.ico polyline{vector-effect:non-scaling-stroke}
@media(max-width:900px){.ico{width:22px; height:22px}}

/* ---------- pricing ---------- */
.price{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  padding:38px 36px; margin-top:32px; max-width:520px;
}
.price .amt{font-family:var(--mono); font-weight:500; font-size:46px; letter-spacing:-.03em; color:var(--brand-text); line-height:1}
.price .per{font-family:var(--mono); font-size:15px; color:var(--text-2); margin-left:6px}
.price ul{list-style:none; margin:26px 0 28px; padding:0}
.price li{padding:9px 0 9px 26px; position:relative; color:var(--text-2); font-size:15px; border-bottom:1px solid var(--border)}
.price li:last-child{border-bottom:0}
.price li::before{content:"✓"; position:absolute; left:2px; color:var(--brand-text); font-size:13px}
.fine{font-size:13px; color:var(--text-3); margin:18px 0 0; line-height:1.55}

/* ---------- faq ---------- */
.faq{margin-top:30px; border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{
  cursor:pointer; list-style:none; padding:18px 2px; font-size:16px; color:var(--text);
  display:flex; justify-content:space-between; gap:20px; align-items:center; font-weight:500;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--mono); color:var(--text-3); font-size:17px}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 20px; max-width:640px; font-size:15px}

/* ---------- closing ---------- */
.close{text-align:center; padding:100px 0}
.close h2{margin-bottom:14px}
.close p{max-width:520px; margin-left:auto; margin-right:auto}
footer{border-top:1px solid var(--border); padding:34px 0; color:var(--text-3); font-size:13.5px}
footer .wrap{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center}

/* ---------- motion + responsive ---------- */
.rise{opacity:0; transform:translateY(14px); transition:opacity .55s ease,transform .55s ease}
.rise.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{opacity:1; transform:none; transition:none}
}
/* Nav sheds the section links well above the body breakpoint: the Russian
   labels ("Возможности", "Документация") run ~40% longer than the English
   ones and collide with the language selector before 900px. */
@media (max-width:1080px){
  .nav-l{gap:20px}
  .nav ul{gap:18px}
  .nav-r{gap:14px}
}
/* Russian only — English labels still fit down to the 760px breakpoint. */
@media (max-width:900px){
  html[lang="ru"] .nav ul{display:none}
}
@media (max-width:760px){
  section{padding:64px 0}
  .nav ul{display:none}
  .grid2{grid-template-columns:1fr}
  .price{padding:30px 24px}
  .hero{padding-top:52px}
}
/* On the narrowest phones the language selector and the CTA won't both fit
   alongside "Sign in". Sign-in is still reachable from the portal, so it goes. */
@media (max-width:420px){
  .nav-signin{display:none}
}

/* ── Cookie consent banner ───────────────────────────────────────────────────
   Shown only to EEA/UK visitors (see consent.js). Sits above the fold's own
   z-index but below nothing else on the page; it must not be dismissable by
   scrolling past, or a "choice" is never actually made. */
.cc{
  position:fixed; left:0; right:0; bottom:0; z-index:9999;
  background:var(--raised); border-top:1px solid var(--border-2);
  box-shadow:0 -8px 32px rgba(0,0,0,.35);
  padding:14px var(--pad) calc(14px + env(safe-area-inset-bottom));
}
.cc-in{
  max-width:1080px; margin:0 auto;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.cc-txt{margin:0; flex:1 1 320px; font-size:13px; line-height:1.5; color:var(--text-2)}
.cc-txt a{color:var(--brand-text); text-decoration:underline}
.cc-btns{display:flex; gap:10px; flex-shrink:0}
/* Both buttons carry the same size and weight on purpose — an eye-catching
   Accept next to a faint Decline is the usual way these fail a review. */
.cc-b{
  font:inherit; font-size:13px; font-weight:600; line-height:1;
  padding:10px 18px; border-radius:var(--r-md); cursor:pointer;
  border:1px solid var(--border-2); min-width:104px;
}
.cc-b-n{background:transparent; color:var(--text)}
.cc-b-n:hover{border-color:var(--text-3)}
.cc-b-y{background:var(--brand); border-color:var(--brand); color:#fff}
.cc-b-y:hover{filter:brightness(1.08)}
@media(max-width:560px){
  .cc-in{gap:12px}
  .cc-btns{width:100%}
  .cc-b{flex:1}
}

/* ---------- ad-account diagram ----------
   One SVG, two pages. roitrack.app and /fb/ name their colours differently,
   so the diagram reads --d-* aliases and each page points those at tokens it
   already owns. No new palette value is introduced, and the markup stays byte
   for byte identical on both pages — which is what stops the numbers in it
   from drifting apart.

   The viewBox is 312 units wide because that is the content width inside
   .wrap at a 360px viewport, the narrowest case that matters. One unit is one
   pixel there, so a 14-unit label really is 14px. Capped at 390 rather than
   filling the column: at full desktop width the same label would render near
   30px. */
.dgm-fig{max-width:390px;margin:34px auto 0}
.dgm{display:block;width:100%;height:auto}
.dgm{--d-surface:var(--surface); --d-line:var(--border); --d-fg:var(--text);
     --d-mid:var(--text-2); --d-dim:var(--text-3); --d-go:var(--brand-text)}
.dgm text{font-family:var(--mono);font-size:14px}
.dgm .b{font-size:16px}
.dgm .n{font-size:15px}
.dgm .lb{fill:var(--d-dim)}
.dgm .md{fill:var(--d-mid)}
.dgm .fg{fill:var(--d-fg)}
.dgm .go{fill:var(--d-go)}
.dgm rect{fill:var(--d-surface);stroke:var(--d-line);stroke-width:1.5}
.dgm .rule{stroke:var(--d-line);stroke-width:1.5}
.dgm .rail{stroke:var(--d-go);stroke-width:2;fill:none;stroke-linecap:round}
.dgm .tick{stroke:var(--d-go);stroke-width:1.5}
.dgm .arw{fill:var(--d-go);stroke:none}
.dgm .hd{fill:var(--d-fg);font-weight:600}
.dgm .wait{stroke:var(--d-go);stroke-width:2;fill:none;stroke-dasharray:3 7;stroke-linecap:round}

/* The desktop arrangement is a second SVG, not the same one reflowed: a
   horizontal layout needs a different viewBox aspect, and viewBox is the one
   thing CSS cannot set. Both ship inline; picking one per visitor would mean
   either JS or two extra requests, and 4KB of markup is cheaper than both.
   display:none takes the inactive one out of the accessibility tree, which
   aria-hidden could not do here — which layout is inactive depends on the
   media query, and CSS cannot toggle an ARIA attribute.

   960px, not the more usual 900: below it the /fb/ column is under 880px, and
   the horizontal layout needs 880 units to hold three columns of monospace at
   14px. Under that the labels shrink rather than the layout breaking, which is
   the worse failure. */
/* On desktop the takeaway lives inside the loop, so the caption that
   carries it on mobile would be a duplicate. */
.dgm-d{display:none}
@media(min-width:960px){
  .dgm-fig{max-width:1000px}
  .dgm-fig.loop figcaption{display:none}
  .dgm-m{display:none}
  .dgm-d{display:block}
}