/* Лендос Bimp · шар композиції.
   Тут ЛИШЕ ритм маркетингової сторінки: смуги секцій, ширина, герой, футер.
   Компоненти (скоркарти, cross-port, форми, пігулки) НЕ дублюються — вони
   приходять із kit.css дослівно з кіта Atelier v13.1.
   Свого :root немає (§0.2). Нуль hex, нуль rgba (§1). */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--page); color:var(--ink-0);
  font-family:var(--font-ui); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
h1,h2,h3{ margin:0; letter-spacing:-.025em; }

/* ── смуга секції ─────────────────────────────────────────────────────── */
.sec{ padding:clamp(56px,7vw,104px) 20px; }
.sec.paper{ background:var(--paper); border-block:1px solid var(--line-soft); }
.wrap{ max-width:1180px; margin:0 auto; }
.sec-h{ max-width:62ch; margin-bottom:clamp(28px,3.5vw,44px); }
.sec-h .eyebrow{
  display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:14px;
}
.sec-h h2{ font-size:clamp(26px,3.4vw,40px); font-weight:700; line-height:1.14; }
.sec-h p{ margin:14px 0 0; font-size:clamp(15px,1.5vw,17.5px); color:var(--ink-2); }

/* ── шапка ────────────────────────────────────────────────────────────── */
.top{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:16px;
  padding:14px 20px; background:var(--paper); border-bottom:1px solid var(--line-soft);
}
.top .wrap{ display:flex; align-items:center; gap:16px; width:100%; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.02em; }
.brand .x{ color:var(--ink-3); font-weight:500; }
.top nav{ margin-left:auto; display:flex; gap:22px; align-items:center; }
.top nav a{ color:var(--ink-2); text-decoration:none; font-size:14.5px; }
.top nav a:hover{ color:var(--ink-0); }

/* ── герой ────────────────────────────────────────────────────────────── */
.hero{ padding:clamp(60px,8vw,116px) 20px clamp(48px,6vw,84px); }
.hero h1{
  font-size:clamp(36px,6.4vw,76px); font-weight:750; line-height:1.03;
  letter-spacing:-.035em; max-width:19ch;
}
.hero h1 .soft{ color:var(--ink-3); }
.hero h1 em{
  font-family:var(--font-serif); font-style:italic; font-weight:600;
  color:var(--sage-0); letter-spacing:-.01em;
}
.hero .lede{ margin:26px 0 0; max-width:58ch; font-size:clamp(16px,1.7vw,19px); color:var(--ink-2); }

/* ── кнопки: пунктирна пігулка — закон §4 ─────────────────────────────── */
.acts{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:34px; }
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:13px 26px;
  border-radius:var(--r-pill); font-size:15px; font-weight:650; font-family:inherit;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
}
.btn.solid{ background:var(--sage-0); color:var(--on-sage); }
.btn.solid:hover{ background:var(--sage-1); }
.btn.dash{ border:1px dashed var(--line-strong); color:var(--ink-1); background:transparent; }
.btn.dash:hover{ border-color:var(--sage-line); color:var(--sage-0); }
.meta{ font-size:13.5px; color:var(--ink-3); }

/* ── сітки ────────────────────────────────────────────────────────────── */
.g4{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.g3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.g2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }

/* ── рядок «питання власника» ─────────────────────────────────────────── */
.qrow{
  display:grid; grid-template-columns:1fr auto; gap:18px; align-items:baseline;
  padding:18px 22px; border-bottom:1px solid var(--line-soft);
}
.qrow:last-child{ border-bottom:0; }
.qrow .q{ font-size:clamp(16px,1.9vw,20px); font-weight:600; }
.qrow .a{ font-size:14.5px; color:var(--ink-2); grid-column:1/-1; margin-top:-6px; max-width:70ch; }
.qrow .scr{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); white-space:nowrap;
}

/* ── доказ ────────────────────────────────────────────────────────────── */
.proof{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:var(--paper); box-shadow:var(--sh-mid); }
.proof figcaption{
  padding:12px 18px; border-top:1px solid var(--line-soft);
  font-size:12.5px; color:var(--ink-3); background:var(--paper-2);
}

/* ── тариф ────────────────────────────────────────────────────────────── */
.plan{
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper);
  padding:26px 24px; display:flex; flex-direction:column; gap:14px;
}
.plan.pick{ border-color:var(--sage-line); box-shadow:var(--sh-mid); }
.plan .nm{ font-size:18px; font-weight:700; }
.plan .price{
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:clamp(30px,3.4vw,40px); font-weight:700; letter-spacing:-.03em; line-height:1;
}
.plan .price small{ font-size:14px; font-weight:500; color:var(--ink-3); letter-spacing:0; }
.plan .for{ font-size:14.5px; color:var(--ink-2); }
.plan .not{ font-size:13.5px; color:var(--ink-3); padding-top:12px; border-top:1px solid var(--line-soft); }
.plan .btn{ margin-top:auto; justify-content:center; }

/* ── футер ────────────────────────────────────────────────────────────── */
.foot{ padding:34px 20px 52px; border-top:1px solid var(--line-soft); }
.foot .wrap{ display:flex; gap:18px 30px; flex-wrap:wrap; justify-content:space-between;
  font-size:13.5px; color:var(--ink-3); }
.foot a{ color:var(--ink-2); text-decoration:none; }
.foot a:hover{ color:var(--sage-0); }

/* ── точки зламу §14 ──────────────────────────────────────────────────── */
@media (max-width:1100px){
  .g4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px){
  .g3{ grid-template-columns:1fr; }
  .g2{ grid-template-columns:1fr; }
  .top nav{ display:none; }
  .hero h1{ max-width:none; }
}
@media (max-width:560px){
  .g4{ grid-template-columns:1fr; }
  .btn{ flex:1 1 auto; justify-content:center; }
  .qrow{ grid-template-columns:1fr; }
  .qrow .scr{ grid-row:1; justify-self:start; }
}