/* В сети — vseti.io
   One stylesheet for every page. No @import, no external font, no third-party request:
   Russian ISPs throttle Cloudflare-fronted assets to roughly the first 16 KB, and this
   page is often the first thing a referred user loads on a bad network. Everything it
   needs must arrive in two requests.

   Type is set in the system serif for display and the system sans for text. Both stacks
   have real Cyrillic on every platform we ship to, which a webfont would have to be
   downloaded to match. */

/* ---------------------------------------------------------------- tokens */

:root {
  /* Light is the base. Every colour is defined here, so a token can never be
     defined only inside a media query. */
  --paper:        #f6f4ef;
  --paper-2:      #efece4;
  --surface:      #ffffff;
  --ink:          #16191b;
  --ink-2:        #3c4346;
  --muted:        #6a7276;
  --line:         #e2ddd2;
  --line-2:       #cec8b9;
  --signal:       #0d7a4e;   /* text-weight green, 4.9:1 on paper */
  --signal-dot:   #17a768;   /* the status dot: brighter than text ever should be */
  --signal-soft:  #e6f2ea;
  --amber:        #b5760f;
  --amber-dot:    #e0961d;
  --shadow:       0 1px 2px rgba(22, 25, 27, .05), 0 8px 24px -12px rgba(22, 25, 27, .16);

  --f-display: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --f-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale, ratio ~1.25 at 360px widening to ~1.33 at 1200px. */
  --t--1: clamp(.8125rem, .79rem + .1vw, .875rem);
  --t-0:  clamp(1rem, .97rem + .14vw, 1.0625rem);
  --t-1:  clamp(1.125rem, 1.07rem + .26vw, 1.3125rem);
  --t-2:  clamp(1.35rem, 1.24rem + .5vw, 1.75rem);
  --t-3:  clamp(1.65rem, 1.44rem + .95vw, 2.4rem);
  --t-4:  clamp(2.05rem, 1.6rem + 2vw, 3.4rem);
  --t-5:  clamp(2.4rem, 1.6rem + 3.6vw, 4.5rem);

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: clamp(64px, 9vw, 112px);
  --sp-10: clamp(88px, 12vw, 160px);

  --radius: 14px;
  --radius-sm: 9px;
  --measure: 34rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:       #101414;
    --paper-2:     #0b0e0e;
    --surface:     #171c1c;
    --ink:         #eceae3;
    --ink-2:       #c3c8c5;
    --muted:       #949c9a;
    --line:        #252c2c;
    --line-2:      #364040;
    --signal:      #4fd39a;
    --signal-dot:  #35c489;
    --signal-soft: #16241e;
    --amber:       #e0a94a;
    --amber-dot:   #d9931f;
    --shadow:      0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -14px rgba(0, 0, 0, .7);
  }
}

/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  /* Column layout so a short page — 404, or a legal page on a tall desktop screen — keeps its
     footer at the bottom of the viewport instead of stranding it halfway down. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--t-0);
  line-height: 1.6;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--signal-soft); color: var(--ink); }

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.018em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--signal); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .18em; }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 3px;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  color: var(--ink);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  z-index: 20;
}
.skip:focus { left: var(--sp-4); top: var(--sp-4); }

/* ---------------------------------------------------------------- layout */

.wrap {
  width: 100%;
  max-width: 1060px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

.section { padding-block: var(--sp-9); }
.section + .section { border-top: 1px solid var(--line); }
.section--tint { background: var(--paper-2); }

.measure { max-width: var(--measure); }

.eyebrow {
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.lede {
  font-size: var(--t-1);
  color: var(--ink-2);
  line-height: 1.5;
}

/* ---------------------------------------------------------------- header */

.masthead {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  position: sticky;
  top: 0;
  z-index: 10;
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 62px;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--f-display);
  font-size: 1.2rem;
  letter-spacing: -.01em;
  color: var(--ink);
}
.wordmark:hover { text-decoration: none; }
.wordmark::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--signal-dot);
  transform: translateY(-1px);
}

.langs {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--t--1);
}
.langs a, .langs span {
  padding: 9px 12px;
  border-radius: 999px;
  color: var(--muted);
  letter-spacing: .04em;
}
.langs [aria-current] {
  background: var(--surface);
  border: 1px solid var(--line-2);
  color: var(--ink);
}

/* ---------------------------------------------------------------- hero */

.hero { padding-block: var(--sp-10) var(--sp-8); }

.hero h1 {
  font-size: var(--t-5);
  max-width: 15ch;
  letter-spacing: -.03em;
}

.hero__sub {
  margin-top: var(--sp-5);
  font-size: var(--t-2);
  font-family: var(--f-display);
  color: var(--ink-2);
  max-width: 30ch;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.hero__note {
  margin-top: var(--sp-6);
  max-width: 46ch;
  color: var(--muted);
}

.hero__cta {
  margin-top: var(--sp-7);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-5);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-weight: 550;
  letter-spacing: .005em;
  cursor: pointer;
  transition: transform .12s ease, opacity .12s ease;
}
.btn:hover { text-decoration: none; opacity: .88; }
.btn:active { transform: translateY(1px); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.btn--ghost:hover { background: var(--surface); opacity: 1; }

/* The "iPhone — soon" promise: a button that opens an email form in place. The form is
   hidden until the button is pressed — the CTA stays one button, like the app. */
.btn-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
}

.soon {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: min(420px, 100%);
}
/* `display: flex` above would beat the browser's `[hidden] { display: none }` and
   leave the form permanently visible — the one bug this rule exists for. */
.soon[hidden] { display: none; }
.soon--open { display: flex; }

.soon__row {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

.soon input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: inherit;
  font: inherit;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.soon input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 12%, transparent);
}

.soon__hint {
  font-size: var(--t--1);
  color: var(--muted);
}

.soon__status {
  font-size: var(--t--1);
  color: var(--muted);
}
.soon__status[data-state="ok"] { color: var(--ink); }

/* ---------------------------------------------------------------- routes */

.routes {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

.route {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  box-shadow: var(--shadow);
}

.route__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.route__title { font-weight: 600; font-size: var(--t-0); }
.route__tag {
  font-size: var(--t--1);
  color: var(--muted);
  white-space: nowrap;
}

.path {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: var(--t--1);
}
.path__node {
  color: var(--ink-2);
  white-space: nowrap;
  padding: 5px 11px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--paper);
}
.path__node--start { border-style: dashed; color: var(--muted); }
.path__link {
  flex: 1;
  height: 1px;
  background: var(--line-2);
  min-width: 14px;
  position: relative;
}
.path__link::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--line-2);
  border-right: 1px solid var(--line-2);
  transform: rotate(45deg);
}

.route--via .path__link { background: var(--signal); }
.route--via .path__link::after { border-color: var(--signal); }
.route--via .path__node--hop {
  border-color: var(--signal);
  color: var(--signal);
  background: var(--signal-soft);
}

.route__foot {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: var(--t--1);
}

@media (max-width: 640px) {
  .path { flex-direction: column; align-items: flex-start; gap: 0; }
  .path__link {
    width: 1px;
    height: 20px;
    flex: none;
    min-width: 0;
    margin-left: 18px;
  }
  .path__link::after { right: -3px; top: auto; bottom: -1px; transform: rotate(135deg); }
}

/* ---------------------------------------------------------------- two-up */

.cols {
  display: grid;
  gap: var(--sp-7) var(--sp-8);
  align-items: start;
}
@media (min-width: 860px) {
  .cols--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cols--wide-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}

.stack > * + * { margin-top: var(--sp-5); }

/* ---------------------------------------------------------------- the button demo */

.demo {
  display: flex;
  justify-content: center;
}

.phone {
  width: min(300px, 100%);
  border: 1px solid var(--line-2);
  border-radius: 30px;
  background: var(--surface);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  box-shadow: var(--shadow);
  text-align: center;
}

.phone__label {
  font-size: var(--t--1);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}

.dot {
  width: 66px;
  height: 66px;
  margin: var(--sp-6) auto var(--sp-5);
  border-radius: 50%;
  background: var(--line-2);
  position: relative;
  transition: background-color .35s ease;
}
.dot::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: border-color .35s ease;
}
.phone[data-state="connecting"] .dot { background: var(--amber-dot); }
.phone[data-state="connecting"] .dot::after {
  border-color: color-mix(in srgb, var(--amber-dot) 45%, transparent);
  animation: ring 1.5s ease-out infinite;
}
.phone[data-state="on"] .dot { background: var(--signal-dot); }
.phone[data-state="on"] .dot::after {
  border-color: color-mix(in srgb, var(--signal-dot) 40%, transparent);
}

@keyframes ring {
  0%   { transform: scale(.86); opacity: .9; }
  100% { transform: scale(1.18); opacity: 0; }
}

.phone__state {
  font-family: var(--f-display);
  font-size: var(--t-2);
  letter-spacing: -.015em;
  min-height: 1.3em;
}
.phone__hint {
  margin-top: var(--sp-2);
  font-size: var(--t--1);
  color: var(--muted);
  min-height: 2.6em;
}

.switch {
  margin-top: var(--sp-5);
  width: 100%;
  padding: 12px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 550;
  cursor: pointer;
}
.switch:hover { background: var(--paper-2); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dot, .dot::after { transition: none; animation: none; }
}

/* ---------------------------------------------------------------- steps */

.steps {
  counter-reset: step;
  display: grid;
  gap: var(--sp-6);
  margin-top: var(--sp-7);
}
@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-7); }
}

.step { counter-increment: step; }
.step__n {
  font-family: var(--f-display);
  font-size: var(--t-1);
  color: var(--signal);
  display: block;
  margin-bottom: var(--sp-3);
}
.step__n::before { content: counter(step, decimal-leading-zero); }
.step h3 { font-size: var(--t-1); margin-bottom: var(--sp-3); }
.step p { color: var(--muted); font-size: var(--t--1); line-height: 1.65; }

/* the system permission sheet, drawn rather than screenshotted — this is where
   first-run users stop, so they need to recognise it before they meet it */
.sheet {
  margin-top: var(--sp-5);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  max-width: 320px;
  box-shadow: var(--shadow);
}
.sheet__body {
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  text-align: center;
}
.sheet__title {
  font-weight: 600;
  font-size: var(--t-0);
  line-height: 1.3;
}
.sheet__text {
  margin-top: var(--sp-2);
  font-size: var(--t--1);
  color: var(--muted);
  line-height: 1.45;
}
.sheet__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
}
.sheet__actions span {
  padding: 11px 8px;
  text-align: center;
  font-size: var(--t--1);
  color: var(--muted);
}
.sheet__actions span + span {
  border-left: 1px solid var(--line);
  color: var(--signal);
  font-weight: 600;
}
.sheet__caption {
  margin-top: var(--sp-3);
  font-size: var(--t--1);
  color: var(--muted);
}

/* ---------------------------------------------------------------- pricing */

.plans {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-7);
}
@media (min-width: 760px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.plan {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
}
.plan--lead { border-color: var(--line-2); }

.plan__name {
  font-family: var(--f-display);
  font-size: var(--t-2);
  letter-spacing: -.015em;
}
.plan__price {
  margin-top: var(--sp-4);
  font-size: var(--t-3);
  font-family: var(--f-display);
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
.plan__price small {
  font-family: var(--f-text);
  font-size: var(--t--1);
  color: var(--muted);
  letter-spacing: 0;
  margin-left: 6px;
}
.plan__alt {
  margin-top: var(--sp-2);
  font-size: var(--t--1);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.plan ul { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); }
.plan li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--sp-3);
  font-size: var(--t--1);
  color: var(--ink-2);
  line-height: 1.55;
}
.plan li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal-dot);
  margin-top: .52em;
}
.plan li.is-off { color: var(--muted); }
.plan li.is-off::before { background: none; border: 1px solid var(--line-2); }

.plan__foot {
  margin-top: auto;
  padding-top: var(--sp-5);
  font-size: var(--t--1);
  color: var(--muted);
}

.note {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  font-size: var(--t--1);
  color: var(--ink-2);
  max-width: 62ch;
}

/* ---------------------------------------------------------------- faq */

.faq { margin-top: var(--sp-6); border-top: 1px solid var(--line); }
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  padding: var(--sp-5) 34px var(--sp-5) 0;
  cursor: pointer;
  list-style: none;
  font-weight: 550;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq p {
  padding: 0 var(--sp-6) var(--sp-5) 0;
  color: var(--muted);
  max-width: 68ch;
  font-size: var(--t--1);
  line-height: 1.7;
}
.faq p + p { padding-top: 0; margin-top: calc(var(--sp-3) * -1); }

/* ---------------------------------------------------------------- contact */

.contact {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
@media (min-width: 760px) {
  .contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5);
  background: var(--surface);
}
.card h3 { font-size: var(--t-1); margin-bottom: var(--sp-2); }
.card p { font-size: var(--t--1); color: var(--muted); }
.card a { font-weight: 550; }

/* ---------------------------------------------------------------- footer */

.foot {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-block: var(--sp-7) var(--sp-8);
  font-size: var(--t--1);
  color: var(--muted);
}
.foot__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-5);
  align-items: center;
  justify-content: space-between;
}
.foot nav { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-5); }
.foot nav a { display: inline-block; padding-block: 9px; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--ink); }
.foot__legal { margin-top: var(--sp-5); max-width: 62ch; line-height: 1.6; }

/* ---------------------------------------------------------------- legal pages */

.doc { padding-block: var(--sp-8) var(--sp-9); }
/* "Конфиденциальность" is one 18-character word and it is wider than a 320px phone at this
   size. Nothing else on the site has a token that long, so the page looked fine everywhere
   except the one URL Apple's reviewer opens on a device: the whole document picked up a
   horizontal scroll from a single heading. Let it break rather than push the viewport. */
.doc h1 { font-size: var(--t-4); max-width: 20ch; overflow-wrap: break-word; hyphens: auto; }
.doc__meta { margin-top: var(--sp-4); color: var(--muted); font-size: var(--t--1); }
.doc h2 {
  font-size: var(--t-2);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-4);
  max-width: 26ch;
}
.doc h3 {
  font-size: var(--t-1);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-3);
}
.doc p, .doc li { max-width: 68ch; color: var(--ink-2); line-height: 1.7; }
.doc p + p { margin-top: var(--sp-4); }
.doc ul { margin-top: var(--sp-4); display: grid; gap: var(--sp-3); }
/* A list has a margin above it and nothing below, so prose resuming after one used to sit
   flush against the last bullet — visible on the privacy page since it shipped, and on every
   step-by-step list of the support page. Slightly wider than paragraph-to-paragraph, because
   this transition is a level change and not just a new sentence. */
.doc ul + p, .doc ol + p { margin-top: var(--sp-5); }
.doc ul li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: var(--sp-3);
}
.doc ul li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line-2);
  margin-top: .62em;
}
.doc__toc {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.doc__toc ol {
  counter-reset: toc;
  display: grid;
  font-size: var(--t--1);
}
.doc__toc li { counter-increment: toc; }
.doc__toc a { padding-block: 7px; }
.doc__toc li::before {
  content: counter(toc) ". ";
  color: var(--muted);
}