/* Публичный сайт (ghline.ru) — поверх переменных из style.css (--navy, --teal,
   --cyan, --bg, --card, --line и т.п.), только специфичные для лендинга блоки. */

body { background: var(--bg); }

.site-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.site-header-inner {
  max-width: 1100px; margin: 0 auto; padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.site-phone {
  font-weight: 800; font-size: 16px; color: var(--navy); letter-spacing: .01em;
}
.site-phone:hover { color: var(--teal); text-decoration: none; }

.hero {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-light) 100%);
  color: #fff;
}
.hero-inner { max-width: 760px; margin: 0 auto; padding: 56px 24px 48px; text-align: center; }
.hero h1 { font-size: 32px; font-weight: 800; line-height: 1.25; margin: 0 0 16px; text-wrap: balance; }
.hero-sub { font-size: 16px; color: #C7D2DC; line-height: 1.55; margin: 0; }

.calc-section { max-width: 640px; margin: -28px auto 0; padding: 0 24px 8px; position: relative; }
.calc-card { padding: 28px 26px; box-shadow: 0 12px 32px rgba(8, 34, 61, .12); }
.calc-card h2 { font-size: 20px; font-weight: 800; color: var(--navy); margin: 4px 0 18px; }

.calc-steps { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.calc-step {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--muted); padding: 5px 10px; border-radius: 999px; background: var(--line-2);
}
.calc-step.active { background: var(--navy); color: #fff; }
.calc-step.done { background: #E7F5EC; color: #15803D; }

.calc-hint { font-size: 12px; color: var(--muted); margin: 12px 0 0; text-align: center; }

.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

.opt { text-transform: none; font-weight: 500; color: var(--muted); letter-spacing: 0; }

.toggle-row { display: flex; gap: 8px; flex-wrap: wrap; }
.toggle-pill {
  position: relative; flex: 1; min-width: 140px; text-align: center;
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--muted-2); background: #fff;
}
.toggle-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-pill:has(input:checked) { border-color: var(--navy); background: var(--navy); color: #fff; }
.toggle-pill:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 1px; }

.price-range {
  background: var(--line-2); border-radius: 10px; padding: 20px 22px; margin: 4px 0 18px; text-align: center;
}
.price-range .lbl { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 8px; }
.price-range .range { font-size: 30px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.price-range .range-note { font-size: 12.5px; color: var(--muted); margin-top: 10px; line-height: 1.4; }

.thanks-card { text-align: center; }
.thanks-card .btn.secondary { margin-top: 8px; }

.features { max-width: 1100px; margin: 0 auto; padding: 56px 24px 64px; }
.features-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 20px 20px; }
.feature-title { font-weight: 800; color: var(--navy); font-size: 14.5px; margin-bottom: 8px; line-height: 1.35; }
.feature-text { font-size: 13px; color: var(--muted); line-height: 1.5; }

.site-footer { background: var(--navy); color: #C7D2DC; }
.site-footer-inner { max-width: 1100px; margin: 0 auto; padding: 22px 24px; font-size: 12.5px; line-height: 1.7; }
.site-footer-inner .muted { color: #7C90A6; }

@media (max-width: 720px) {
  .hero h1 { font-size: 26px; }
  .hero-inner { padding: 40px 20px 36px; }
  .calc-section { margin-top: -20px; padding: 0 16px; }
  .calc-card { padding: 22px 18px; }
  .features-inner { grid-template-columns: 1fr; }
}