/* Lane public site
   Visual system: a technical broadsheet. Everything sits in a bordered cell on
   a near-black ground. Column edges align to the page margins, so the first
   cell in a row has no left padding and the last has no right padding.
   The three-card grid in .moments is the reference for every other section. */

:root{
  --bg:#090a08;
  --paper:#f0ede5;
  --muted:#92948c;
  --dim:#696b65;
  --line:rgba(240,237,229,.15);
  --lime:#d3ff45;
  --panel:#10110e;
  --wrap:min(1220px,calc(100vw - 48px));
  --gutter:28px;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--paper);
  background:var(--bg);
  font-synthesis:none;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:hidden;background:var(--bg);color:var(--paper)}
a{color:inherit}
h1,h2,h3,p{margin-top:0}

.wrap{width:var(--wrap);margin-inline:auto}

/* Shared cell label: small caps left, index right, rule underneath.
   Used by the moment cards and by every section head. */
.moment-top{
  display:flex;
  justify-content:space-between;
  color:var(--dim);
  font:9px monospace;
  letter-spacing:.13em;
}
.setup-copy .moment-top,
.plans-head .moment-top,
.faq-title .moment-top,
.closing-copy .moment-top{
  padding-bottom:14px;
  margin-bottom:34px;
  border-bottom:1px solid var(--line);
}

/* ---------- Navigation ---------- */

.nav{
  height:84px;
  display:flex;
  align-items:center;
  gap:48px;
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:20;
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;letter-spacing:.18em}
.brand img{width:34px;height:34px;object-fit:contain}
.brand b{font-size:15px}
.nav nav{display:flex;gap:28px}
.nav nav a,.nav-end a,footer a{font-size:12px;text-decoration:none;color:var(--muted);transition:color .2s}
.nav nav a:hover,footer a:hover{color:var(--paper)}
.nav-end{margin-left:auto;display:flex;align-items:center;gap:18px}
.language{
  border:0;background:transparent;color:#555;
  display:flex;gap:8px;font-size:10px;font-weight:700;cursor:pointer;
}
.language .on{color:var(--paper)}
.nav-cta{
  height:42px;padding:0 18px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:4px;
  color:var(--paper)!important;font-weight:700;
  /* Holds the widest label ("Открыть Lane") so the button does not resize when
     the language changes. Without this the whole right-hand group narrows and
     the language toggle slides out from under the cursor that just clicked it. */
  min-width:132px;
}
.nav-cta:hover{border-color:var(--paper)}

/* ---------- Hero ---------- */

.hero{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  border-bottom:1px solid var(--line);
}
.hero-copy{
  padding:86px 56px 86px 0;
}
.kicker{
  display:flex;gap:11px;align-items:center;
  color:var(--muted);font-size:10px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;
}
.kicker i{width:18px;height:1px;background:var(--lime)}
h1{
  margin:26px 0 26px;
  font-size:clamp(54px,6.4vw,88px);
  line-height:.92;
  letter-spacing:-.055em;
  font-weight:650;
}
/* One colour. A white line above a coloured line is the same two-tone formula
   the redesign set out to remove, whatever the second colour is. */
h1 em{font-style:normal;color:inherit}
.hero-text{max-width:520px;color:#adafa7;font-size:16px;line-height:1.7}
.hero-actions{
  display:flex;align-items:center;
  flex-wrap:wrap;gap:18px 32px;
  margin-top:38px;
}

.primary{
  height:56px;padding:0 25px;border-radius:4px;
  background:var(--lime);color:#090a08;text-decoration:none;
  font-size:13px;font-weight:800;
  white-space:nowrap;
  display:inline-flex;align-items:center;gap:28px;
  transition:transform .25s,background .25s;
}
.primary:hover{transform:translateY(-3px);background:var(--paper)}
.secondary,.text-link{
  display:inline-flex;align-items:center;gap:18px;
  padding:13px 0;border-bottom:1px solid var(--line);
  font-size:13px;font-weight:700;text-decoration:none;
  white-space:nowrap;
}
.secondary:hover,.text-link:hover{border-bottom-color:var(--paper)}
.secondary b,.text-link b{color:var(--lime)}

/* Hero mark: the shield in its own cell, no radar, no orbits. */
.hero-mark{
  padding:86px 0;
  display:grid;
  place-items:center;
}
.hero-mark img{
  width:min(100%,440px);
  filter:drop-shadow(0 34px 60px rgba(0,0,0,.85));
  animation:mark-float 7s ease-in-out infinite;
}
/* Fleet size. Deliberately a floor ("20+") rather than an exact count, so the
   page stays true as nodes are added and does not need editing each time. */
.mark-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  max-width:560px;
  border-top:1px solid var(--line);
  margin-top:58px;
  padding-top:22px;
  margin-bottom:30px;
}
.mark-stats b{
  display:block;
  font-size:36px;line-height:1;letter-spacing:-.045em;font-weight:650;
}
.mark-stats small{
  display:block;margin-top:7px;
  font-size:9px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em;
}
.mark-status{
  display:flex;align-items:center;gap:9px;
  font:9px monospace;letter-spacing:.18em;
  color:var(--lime);
}
.mark-status i{
  width:5px;height:5px;border-radius:50%;
  background:var(--lime);
  animation:blink 1.8s steps(2,end) infinite;
}

/* ---------- Signal band ----------
   The site's signature. A live waveform running the full width, built from
   bars in site.js. Base heights follow a sine so the band still reads as a
   waveform when animation is off, and the travelling motion comes from a
   per-bar animation-delay rather than from script. */

.signal{
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
/* Full bleed on purpose. The signal is the one element allowed to break the
   page margins, which is what makes it read as the site's mark. */
.signal-inner{
  height:132px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
}
.signal i{
  flex:0 0 3px;
  border-radius:1px;
  background:rgba(201,255,54,.58);
  /* --lift is set by the cursor handler in site.js and defaults to no lift,
     so the band behaves identically with script disabled. */
  --lift:1;
  transform:scaleY(calc(.4 * var(--lift)));
  animation:signal 2.6s ease-in-out infinite;
  transition:transform .18s ease-out;
}
.signal i.crest{background:var(--lime)}

/* ---------- Trial strip ---------- */

.trial{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid var(--line);
}
.trial-cell{
  padding:26px var(--gutter);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:6px;
}
.trial-cell:first-child{padding-left:0}
.trial-cell:last-child{padding-right:0;border-right:0}
.trial-cell b{font-size:22px;letter-spacing:-.03em}
.trial-cell small{
  font-size:9px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em;
}

/* ---------- Intro band ---------- */

.intro{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:var(--gutter);
  padding:64px 0;
  border-bottom:1px solid var(--line);
}
.intro-label{
  font:9px monospace;letter-spacing:.13em;color:var(--dim);
  padding-top:9px;
}
.intro h2{
  font-size:clamp(30px,3.4vw,44px);
  line-height:1.1;
  letter-spacing:-.04em;
  font-weight:600;
  margin-bottom:18px;
  max-width:820px;
}
.intro p{max-width:660px;color:var(--muted);font-size:16px;line-height:1.75;margin:0}

/* ---------- The three cards. Reference section, kept dense. ---------- */

.moments{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid var(--line);
}
.moment{
  min-height:430px;
  padding:28px var(--gutter);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
}
.moment:first-child{padding-left:0}
.moment:last-child{padding-right:0;border-right:0}
/* The figure above is a fixed height, so a fixed margin here puts all three
   headlines on the same line no matter how many lines each one wraps to.
   Anchoring the text block to the bottom instead only aligns them while every
   headline happens to wrap the same way, which Russian does not. */
.moment h3{
  margin:65px 0 12px;
  font-size:25px;line-height:1.05;letter-spacing:-.04em;
}
.moment p{color:var(--muted);font-size:13px;line-height:1.7;margin:0}

.ping-demo{height:190px;display:flex;align-items:center;justify-content:center;position:relative}
.ping-demo>b{font-size:78px;letter-spacing:-.08em}
.ping-demo>span{font:11px monospace;color:var(--lime);margin:35px 0 0 7px}
.ping-demo>div{position:absolute;bottom:24px;display:flex;align-items:end;gap:6px}
.ping-demo>div i{width:5px;background:var(--lime);animation:bars 1.6s ease-in-out infinite}
.ping-demo>div i:nth-child(1){height:9px}
.ping-demo>div i:nth-child(2){height:17px;animation-delay:.1s}
.ping-demo>div i:nth-child(3){height:26px;animation-delay:.2s}
.ping-demo>div i:nth-child(4){height:35px;animation-delay:.3s}
.ping-demo>div i:nth-child(5){height:44px;animation-delay:.4s}

.stream-demo{height:190px;display:flex;align-items:center;gap:14px;justify-content:center}
.stream-demo>span{font-size:48px;font-weight:800}
.stream-demo>b{font:9px monospace;color:var(--lime)}
.wave{height:72px;display:flex;align-items:center;gap:5px}
.wave i{width:4px;height:20px;background:#8b8d85;animation:wave 1.4s ease-in-out infinite}
.wave i:nth-child(2),.wave i:nth-child(6){animation-delay:.15s}
.wave i:nth-child(3),.wave i:nth-child(5){animation-delay:.3s}
.wave i:nth-child(4){animation-delay:.45s}

/* The third figure completes the set: rising bars for signal, an irregular
   waveform for media, and here an even, calm row for the day that passes
   without anything happening. Same bar language, same visual mass. */
.everyday-demo{
  height:190px;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:30px;
}
.steady{display:flex;align-items:center;gap:7px;height:72px}
.steady i{
  width:5px;height:56px;border-radius:1px;
  background:#6f7169;
  animation:steady 3.4s ease-in-out infinite;
}
.steady i:nth-child(6),
.steady i:nth-child(7),
.steady i:nth-child(8){background:var(--lime)}
.steady i:nth-child(1){animation-delay:0s}
.steady i:nth-child(2){animation-delay:.08s}
.steady i:nth-child(3){animation-delay:.16s}
.steady i:nth-child(4){animation-delay:.24s}
.steady i:nth-child(5){animation-delay:.32s}
.steady i:nth-child(6){animation-delay:.4s}
.steady i:nth-child(7){animation-delay:.48s}
.steady i:nth-child(8){animation-delay:.56s}
.steady i:nth-child(9){animation-delay:.64s}
.steady i:nth-child(10){animation-delay:.72s}
.steady i:nth-child(11){animation-delay:.8s}
.steady i:nth-child(12){animation-delay:.88s}
.steady i:nth-child(13){animation-delay:.96s}
.everyday-demo b{font:10px monospace;letter-spacing:.18em;color:var(--paper)}

/* ---------- Setup ---------- */

.setup{
  padding:88px 0;
  display:grid;
  grid-template-columns:1fr 380px;
  gap:80px;
  align-items:center;
  border-bottom:1px solid var(--line);
}
.setup h2{
  font-size:clamp(30px,3.4vw,44px);
  line-height:1.1;
  letter-spacing:-.04em;
  font-weight:600;
  max-width:640px;
  margin-bottom:0;
}
.setup-copy ol{list-style:none;padding:0;margin:38px 0 26px;max-width:560px}
.setup-copy li{
  height:62px;
  border-top:1px solid var(--line);
  display:flex;align-items:center;gap:25px;
}
.setup-copy li:last-child{border-bottom:1px solid var(--line)}
.setup-copy li b{font:9px monospace;color:var(--lime)}
.setup-copy li span{font-size:14px}

/* Supported devices and what the connection is good for. Two labelled rows
   in the same grammar as the rest of the page. */
.compat{margin:0 0 30px;max-width:560px}
.compat-row{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:var(--gutter);
  align-items:baseline;
  padding:15px 0;
  border-bottom:1px solid var(--line);
}
.compat-label{font:9px monospace;letter-spacing:.13em;color:var(--dim)}
.compat-row p{
  margin:0;
  display:flex;flex-wrap:wrap;gap:7px 8px;
}
.compat-row b{
  font-size:12px;font-weight:600;
  padding:6px 11px;
  border:1px solid var(--line);
  border-radius:3px;
  white-space:nowrap;
}
.compat-row b.on{
  border-color:var(--lime);
  color:var(--lime);
}

.phone{
  width:380px;min-height:640px;padding:18px;
  border:1px solid #383a34;border-radius:42px;
  background:var(--panel);
  box-shadow:0 40px 100px #000;
}
.phone-status{height:35px;display:flex;justify-content:space-between;font-size:9px;padding-inline:9px}
.phone-status i{width:70px;height:18px;border-radius:12px;background:#000;margin-top:-6px}
.phone-head{
  height:45px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  font-size:13px;font-weight:700;
}
.phone-head b{color:#6e7069;letter-spacing:3px}
.subscription{display:grid;grid-template-columns:48px 1fr auto;gap:11px;align-items:center;padding:18px 0}
.subscription img{width:48px;height:48px;object-fit:contain}
.subscription>div{display:flex;flex-direction:column;gap:3px}
.subscription>div small{font-size:9px;color:#787a73}
.subscription em{display:flex;align-items:center;gap:6px;color:var(--lime);font:8px monospace;font-style:normal}
.subscription em i{width:5px;height:5px;background:var(--lime);border-radius:50%}
.route-label{
  display:flex;justify-content:space-between;
  padding:11px 2px 9px;color:#74766f;
  font-size:9px;text-transform:uppercase;letter-spacing:.1em;
}
.route-label b{font-weight:500}
.routes{border-block:1px solid var(--line)}
.route{
  width:100%;height:68px;
  border:0;border-bottom:1px solid var(--line);
  background:transparent;color:var(--paper);padding:0 10px;
  display:grid;grid-template-columns:36px 1fr auto;gap:11px;align-items:center;
  text-align:left;cursor:pointer;transition:.25s;
}
.route:last-child{border-bottom:0}
.route-more{
  padding:13px 10px;
  border-top:1px solid var(--line);
  font:8px monospace;letter-spacing:.1em;
  color:#74766f;text-align:center;
}
.route>i{
  width:34px;height:34px;border:1px solid currentColor;border-radius:50%;
  display:grid;place-items:center;font:8px monospace;font-style:normal;
}
.route>span{display:flex;flex-direction:column;gap:4px}
.route>span b{font-size:12px}
.route>span small{font:8px monospace;opacity:.55}
.route>em{font:10px monospace;font-style:normal;color:var(--lime)}
.route.active{background:var(--paper);color:var(--panel);transform:scale(1.014)}
.route.active>em{color:#536600}
.connect{
  width:100%;height:56px;
  border:1px solid var(--lime);border-radius:4px;
  background:var(--lime);color:var(--panel);
  margin:18px 0 9px;
  display:grid;grid-template-columns:20px 1fr 28px;align-items:center;
  padding:0 15px;cursor:pointer;
}
.connect i{
  width:16px;height:16px;
  border:2px solid currentColor;border-top-color:transparent;border-radius:50%;
  animation:turn 5s linear infinite;
}
.connect span{font-size:11px;font-weight:800}
.connect b{font:9px monospace}
.connect.on{background:transparent;color:var(--lime)}
.phone>p{text-align:center;font-size:8px;color:#676962}

/* ---------- What is included ----------
   The section that carries the real product facts. Same cell grammar as
   .moments, two rows of three. */

.included{padding:88px 0 0;border-bottom:1px solid var(--line)}
.included-head h2{
  font-size:clamp(30px,3.4vw,44px);
  line-height:1.1;letter-spacing:-.04em;font-weight:600;
  max-width:760px;margin-bottom:0;
}
.fact-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  margin-top:52px;
}
.fact{
  padding:30px var(--gutter);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;
}
.fact:nth-child(3n){padding-right:0;border-right:0}
.fact:nth-child(3n+1){padding-left:0}
.fact:nth-last-child(-n+3){border-bottom:0}
.fact-mark{
  font:9px monospace;letter-spacing:.13em;
  line-height:1;color:var(--lime);
  margin-bottom:26px;
}
.fact h3{
  font-size:17px;line-height:1.25;letter-spacing:-.02em;
  font-weight:600;margin-bottom:10px;
}
.fact p{color:var(--muted);font-size:13px;line-height:1.7;margin:0}

/* ---------- Plans ---------- */

.plans{padding:88px 0 0;border-bottom:1px solid var(--line)}
.plans-head h2{
  font-size:clamp(30px,3.4vw,44px);
  line-height:1.1;letter-spacing:-.04em;font-weight:600;
  max-width:760px;margin-bottom:16px;
}
.plans-head p{max-width:620px;color:var(--muted);font-size:16px;line-height:1.75;margin:0}
/* Entry price. The figure is the per-month rate on the longest plan, and the
   note says so, because "from 199" against a 399 one-month plan is otherwise
   the kind of number a customer finds contradicted at checkout. */
.plans-from{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin:0 0 14px!important;
}
.plans-from b{
  font-size:38px;line-height:1;letter-spacing:-.04em;font-weight:650;
  color:var(--lime);
}
.plans-from span{
  font-size:12px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em;
}
.plan-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  margin-top:52px;
}
.plan{
  min-height:300px;
  padding:26px var(--gutter);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:relative;
}
.plan:first-child{padding-left:0}
.plan:last-child{padding-right:0;border-right:0}
.plan.featured{background:var(--paper);color:#11120f;padding-inline:var(--gutter)}
.plan>span{font-size:13px;margin-top:28px}
/* Struck full price above the actual one. Present but empty on the one-month
   plan, which has no discount, so the four big prices still share a baseline. */
.plan s{
  display:block;
  min-height:21px;
  margin-top:30px;
  font-size:17px;
  font-weight:500;
  color:inherit;opacity:.5;
  text-decoration-thickness:1px;
}
.plan strong{font-size:38px;margin-top:2px;letter-spacing:-.05em}
.plan strong i{font-style:normal;color:inherit;opacity:.45;font-size:26px}
.plan small{color:#777970;margin-top:6px}
.plan a{
  margin-top:auto;height:45px;
  border:1px solid currentColor;
  display:grid;place-items:center;
  text-decoration:none;font-size:12px;font-weight:700;
}
.plan.featured a{background:#11120f;color:var(--paper)}
.tag{
  position:absolute;right:var(--gutter);top:18px;
  color:var(--lime);
  font:700 12px/1.2 monospace;
  letter-spacing:.035em;
}
.plan:last-child .tag{right:0}
.featured .tag{color:#5a6b27}

/* ---------- FAQ ---------- */

.faq{
  padding:88px 0;
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:var(--gutter);
  border-bottom:1px solid var(--line);
}
.faq-title h2{
  font-size:clamp(32px,3.6vw,48px);
  line-height:1.05;letter-spacing:-.04em;font-weight:600;
  max-width:340px;
}
.faq-list{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{
  list-style:none;min-height:74px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  cursor:pointer;font-size:16px;font-weight:600;
}
summary::-webkit-details-marker{display:none}
summary i{font-style:normal;color:var(--lime);font-size:22px;font-weight:300;transition:transform .3s}
details[open] summary i{transform:rotate(45deg)}
details p{
  max-width:650px;padding:0 55px 25px 0;margin:0;
  color:var(--muted);font-size:14px;line-height:1.7;
  animation:answer .3s ease both;
}

/* ---------- Closing ---------- */

.closing{
  padding:88px 0;
  display:grid;
  grid-template-columns:1.35fr .65fr;
  border-bottom:1px solid var(--line);
}
.closing-copy{padding-right:56px;border-right:1px solid var(--line)}
.closing h2{
  font-size:clamp(38px,4.6vw,64px);
  line-height:1;letter-spacing:-.05em;font-weight:600;
  margin-bottom:20px;max-width:640px;
}
.closing-copy p{max-width:520px;color:var(--muted);font-size:16px;line-height:1.7;margin-bottom:24px}
.trial-price{display:flex;align-items:baseline;gap:12px;margin-bottom:28px}
.trial-price s{font-size:16px;color:var(--muted);opacity:.72;text-decoration-thickness:1px}
.trial-price i{font-style:normal;color:var(--muted);font-size:16px}
.trial-price strong{font-size:44px;line-height:1;letter-spacing:-.055em;font-weight:650;color:var(--lime)}
.closing-mark{padding-left:var(--gutter);display:grid;place-items:center}
.closing-mark img{width:min(100%,150px);opacity:.5;filter:drop-shadow(0 24px 44px rgba(0,0,0,.8))}

/* ---------- Footer ---------- */

footer{
  min-height:150px;
  display:grid;
  grid-template-columns:1fr 1.4fr 1fr;
  gap:var(--gutter);
  align-items:center;
}
footer p{margin:0;color:#6e7069;font-size:10px}
footer>div{display:flex;justify-content:flex-end;gap:24px;color:#6e7069;font-size:10px}

/* ---------- Motion ---------- */

.enter{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}
.enter.in{opacity:1;transform:none}

@keyframes mark-float{50%{transform:translateY(-10px)}}
@keyframes steady{0%,100%{transform:scaleY(.84)}50%{transform:scaleY(1)}}
@keyframes signal{0%,100%{transform:scaleY(calc(.28 * var(--lift)))}50%{transform:scaleY(var(--lift))}}
@keyframes blink{50%{opacity:.25}}
@keyframes bars{50%{opacity:.28;transform:scaleY(.65)}}
@keyframes wave{50%{height:62px;background:var(--lime)}}
@keyframes turn{to{transform:rotate(360deg)}}
@keyframes answer{from{opacity:0;transform:translateY(-5px)}}

/* ---------- Responsive ---------- */

@media(max-width:1200px){
  .hero-copy{padding-right:32px}
}

@media(max-width:1000px){
  /* Stacked: the copy carries the figures, and the shield sits under it as a
     standalone mark rather than being packed into a row beside them. */
  .hero{grid-template-columns:1fr}
  .hero-copy{padding:64px 0 8px}
  .hero-mark{padding:8px 0 48px}
  .hero-mark img{width:min(46vw,150px)}
  .mark-stats{max-width:none;margin-top:44px}
  .mark-stats b{font-size:30px}
  .closing{grid-template-columns:1fr}
  .closing-copy{padding-right:0;border-right:0}
  .closing-mark{display:none}
}

@media(max-width:900px){
  :root{--wrap:calc(100vw - 28px);--gutter:20px}
  .nav{height:72px}
  .nav nav,.nav-cta{display:none}
  .intro{grid-template-columns:1fr;gap:16px;padding:52px 0}
  .intro-label{padding-top:0}
  .signal-inner{height:88px}
  .included{padding-top:64px}
  .fact-grid{grid-template-columns:1fr 1fr}
  .fact{padding-inline:var(--gutter)}
  .fact:nth-child(3n),.fact:nth-child(3n+1){padding-inline:var(--gutter);border-right:1px solid var(--line)}
  .fact:nth-child(2n){padding-right:0;border-right:0}
  .fact:nth-child(2n+1){padding-left:0}
  .fact:nth-last-child(-n+3){border-bottom:1px solid var(--line)}
  .fact:last-child{border-bottom:0}
  .moments,.faq{grid-template-columns:1fr}
  .moment{
    min-height:390px;
    padding-inline:0;
    border-right:0;border-bottom:1px solid var(--line);
  }
  .moment:last-child{border-bottom:0}
  .setup{grid-template-columns:1fr;gap:52px;padding:64px 0}
  .compat-row{grid-template-columns:1fr;gap:11px}
  .phone{margin-inline:auto}
  .plans{padding-top:64px}
  .plan-grid{grid-template-columns:1fr 1fr}
  .plan{padding-inline:var(--gutter)}
  .plan:nth-child(odd){padding-left:0}
  .plan:nth-child(even){padding-right:0;border-right:0}
  .plan:nth-child(1),.plan:nth-child(2){border-bottom:1px solid var(--line)}
  .tag{right:var(--gutter)}
  .plan:nth-child(even) .tag{right:0}
  .faq{padding:64px 0}
  .faq-title h2{max-width:none}
  .faq-list{margin-top:34px}
  .closing{padding:64px 0}
  footer{grid-template-columns:1fr;padding:40px 0;gap:22px}
  footer>div{justify-content:flex-start}
}

@media(max-width:560px){
  h1{font-size:clamp(42px,12vw,58px)}
  .signal-inner{height:68px;gap:2px}
  .fact-grid{grid-template-columns:1fr}
  .fact,
  .fact:nth-child(3n),.fact:nth-child(3n+1),
  .fact:nth-child(2n),.fact:nth-child(2n+1){
    padding-inline:0;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .fact:last-child{border-bottom:0}
  .hero-actions{align-items:flex-start;flex-direction:column;gap:22px}
  .trial-cell{padding-inline:14px}
  .trial-cell b{font-size:18px}
  .phone{width:100%;max-width:330px;min-height:610px;padding:14px}
  .route{height:63px}
  .plan-grid{grid-template-columns:1fr}
  .plan{
    padding-inline:0;
    border-right:0;border-bottom:1px solid var(--line);
  }
  .plan:last-child{border-bottom:0}
  .plan.featured{padding-inline:var(--gutter)}
  .tag,.plan:nth-child(even) .tag,.plan:last-child .tag{right:0}
  .featured .tag{right:var(--gutter)}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
  .enter{opacity:1;transform:none}
}