/* ===== SVG sprite (hidden defs holder) ===== */
.svg-sprite { display: none; }

/* ===== Layout ===== */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}
@media (max-width: 768px) {
  .container { padding: 0 var(--container-padding-mobile); }
}

.section {
  padding: var(--spacing-section) 0;
}
.section-alt {
  background: var(--color-surface-alt);
}
.section-dark {
  background: var(--color-dark);
  color: var(--color-on-dark);
}
.section-dark h1, .section-dark h2, .section-dark h3 {
  color: var(--color-on-dark);
}
.section-dark p {
  color: var(--color-on-dark);
}
@media (max-width: 768px) {
  .section { padding: var(--spacing-section-mobile) 0; }
}

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-unit); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-unit); }
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* Lede paragraph: same color as body copy, larger size for hierarchy. Capped at
   --prose-width so long ledes don't run past a comfortable reading measure on wide viewports. */
.section-lede {
  font-size: var(--text-3);
  margin-top: 1rem;
  max-width: var(--prose-width);
}
/* Short centered info line (e.g. the "we work across Russia" note above the footer).
   It's the sole child of its section (no heading above it), so cancel the
   .section-lede top margin that assumes a preceding heading in the same section —
   otherwise it stacks on top of the section's own padding and unbalances the block. */
.region-note {
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  border-radius: var(--radius-pill);
  font-weight: var(--weight-medium);
  font-size: var(--text-4);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary {
  background: var(--color-secondary);
  color: var(--color-on-dark);
}
.btn-primary:hover {
  background: var(--color-secondary-hover);
}
.btn-outline {
  background: transparent;
  border: 1px solid var(--color-text-muted); /* was --color-border (1.25:1) — 5.32:1 against surface */
  color: var(--color-text);
}
.btn-outline:hover {
  background: var(--color-surface-alt);
}
.btn-sm {
  padding: 8px 20px;
}
@media (max-width: 768px) {
  .btn { padding: 0.625rem 1.25rem; }
}
/* Short label shown instead of the full header CTA text below 480px so it
   never wraps to two lines next to the burger button (see components.css
   mobile header rules). Hidden by default; only the header button carries
   this markup, so it has no effect on other .btn-primary instances. */
.btn-text-short { display: none; }
.section-dark .btn-outline {
  border-color: rgba(245, 241, 234, 0.3);
  color: var(--color-on-dark);
}

/* ===== Header / primary nav ===== */
.site-header {
  position: sticky;
  top: 0;
  /* 900, not 1000: kept below .skip-link's z-index:1000 (base.css) so a
     keyboard user focusing the skip-to-content link still sees it above
     the header instead of hidden behind it. */
  z-index: 900;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  height: var(--header-height);
  display: flex;
  align-items: center;
  /* Own compositing layer, mitigates a known iOS Safari glitch where fast
     scrolling briefly repaints a sticky element's background late, letting
     page content show through underneath for a frame. */
  transform: translateZ(0);
}
.site-header-inner {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: var(--weight-bold);
  font-size: var(--text-3);
  color: var(--color-primary);
}
.nav-list {
  display: flex;
  gap: 2rem;
}
.nav-list a {
  font-weight: var(--weight-medium);
  font-size: var(--text-4);
  color: var(--color-text);
}
.nav-list a:hover {
  color: var(--color-secondary);
}
.nav-cta {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.nav-burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  position: relative;
}
.nav-burger span,
.nav-burger span::before,
.nav-burger span::after {
  content: '';
  position: absolute;
  left: 6px;
  right: 6px;
  height: 2px;
  background: var(--color-text);
}
.nav-burger span { top: 15px; }
.nav-burger span::before { top: -8px; }
.nav-burger span::after { top: 8px; }

.nav-mobile {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--color-surface);
  z-index: 200;
  padding: 6rem 2rem 2rem;
  overflow-y: auto;
}
.nav-mobile.is-open { display: block; }
.nav-mobile-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: none;
  border: none;
  font-size: var(--text-2);
  cursor: pointer;
  color: var(--color-text);
}
/* Expands the tap target to >=24x24px (WCAG 2.5.8) without resizing the visible glyph. */
.nav-mobile-close::after {
  content: '';
  position: absolute;
  inset: -10px;
}
.nav-mobile ul { display: flex; flex-direction: column; gap: 1.5rem; }
.nav-mobile a {
  font-size: var(--text-2);
  font-weight: var(--weight-medium);
}

@media (max-width: 768px) {
  .site-header-inner { padding: 0 var(--container-padding-mobile); }
  .nav-list, .nav-cta .btn-outline { display: none; }
  .nav-burger { display: block; flex-shrink: 0; }
  .nav-cta .btn-primary { flex-shrink: 0; white-space: nowrap; }
}
@media (max-width: 480px) {
  .nav-cta .btn-text-full { display: none; }
  .nav-cta .btn-text-short { display: inline; }
}

/* ===== Breadcrumb ===== */
.breadcrumb { padding: 1.25rem 0; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: var(--text-4); color: var(--color-text-muted); }
.breadcrumb li:not(:last-child)::after { content: '/'; margin-left: 0.5rem; }
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-secondary); }
.breadcrumb [aria-current="page"] { color: var(--color-text); }

/* ===== Hero ===== */
.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
}
/* No hero-visual column (e.g. biznes-assistent hero) */
.hero--single-col { grid-template-columns: 1fr; }
/* Content column: H1 -> lede -> actions, always in this order (see RULE fix: CTA must not precede H1). */
.hero-content {
  display: flex;
  flex-direction: column;
}
.hero-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
  order: 3;
}
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.25rem;
}
/* Real photo, compact, right-aligned in the hero column (not a generic placeholder block).
   Width tuned so the caption's bottom edge lines up with the hero-actions buttons' bottom edge. */
.hero-visual {
  max-width: 318px;
  margin-left: auto;
}
@media (max-width: 900px) {
  .hero-visual { margin: 0 auto; }
}
/* Warm backing mat behind the photo: the source photo has a grey/neutral background
   that clashed with the site's warm surface, this frames it in a tone a couple of
   shades darker than --color-surface instead of showing the photo's own bg directly. */
.hero-visual-frame {
  background: var(--color-surface-alt);
  border-radius: var(--radius-card);
  padding: 0.75rem;
}
.hero-visual-frame img {
  border-radius: calc(var(--radius-card) - 6px);
  width: 100%;
  height: auto;
  display: block;
}
.hero-visual-caption {
  margin-top: 0.6rem;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--text-4);
  color: var(--color-text-muted);
  text-align: center;
  max-width: 220px;
}

/* Audience split cards ("Для себя" / "Для бизнеса") */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-unit);
  margin-top: 2rem;
}
@media (max-width: 640px) {
  .audience-grid { grid-template-columns: 1fr; }
}
.audience-card {
  background: var(--color-card-bg);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.75rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.audience-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
@media (max-width: 768px) {
  .audience-card { padding: 1.25rem; }
}

/* ===== Generic card ===== */
.card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
@media (max-width: 768px) {
  .card { padding: 1.125rem; }
}
.card-icon {
  width: 40px;
  height: 40px;
  color: var(--color-secondary);
  margin-bottom: 0.75rem;
}
.card h3 { margin-bottom: 0.5rem; }
.card p { max-width: none; }
.callout-line { display: block; }
.callout-line + .callout-line { margin-top: 4px; }
/* Apply to the last element in a section's .container to halve the gap
   before the next section. Cancels this section's own padding-bottom via
   negative margin, leaving only the next section's padding-top as the
   visible gap — half of the normal double-padding gap between sections.
   Tied to --spacing-section so it stays "half" if that token ever changes.
   A deliberate per-instance exception — apply only where the standard
   double-section gap has been checked and confirmed too large; do not
   apply blanket-style to a whole section type. */
.section-gap-half {
  margin-bottom: calc(var(--spacing-section) * -1);
}

/* Task/service scope grid */
.task-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-unit); margin-top: 2rem; }
/* 2x2 variant: 4-card grids (e.g. audience cards) should not wrap 3+1 */
.task-grid--2col { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .task-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .task-grid { grid-template-columns: 1fr; } }

/* ===== Limit pairs ("не делаем / но делаем") ===== */
.limit-list { display: flex; flex-direction: column; gap: var(--gap-tight); margin-top: 1.5rem; }
.limit-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 768px) {
  .limit-pair { grid-template-columns: 1fr; }
}
.limit-no, .limit-yes {
  border-radius: var(--radius-card);
  padding: 1rem 1.25rem;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.limit-no { background: var(--color-danger-bg); color: var(--color-danger); border: 1px solid var(--color-danger); }
.limit-yes { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success); }
.limit-no .limit-icon, .limit-yes .limit-icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 0.15rem; }
.limit-no p, .limit-yes p { color: inherit; max-width: none; }

/* ===== Trust / legal block ===== */
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-unit); margin-top: 2rem; }
@media (max-width: 768px) { .trust-grid { grid-template-columns: 1fr; } }
.trust-item { display: flex; flex-direction: column; gap: 0.5rem; }
.trust-item .card-icon { margin-bottom: 0; }
.trust-item p { max-width: none; }

/* ===== Metrics / stat proof row ===== */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-unit); margin-top: 2rem; }
@media (max-width: 768px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }
.stat-item .stat-number { font-size: var(--text-2); font-weight: var(--weight-bold); color: var(--color-primary); }
.stat-item .stat-label { color: var(--color-text-muted); font-size: var(--text-4); }
.section-dark .stat-item .stat-number { color: var(--color-on-dark); }

/* ===== Tariff cards (pricing teaser + /tseny/ full table) ===== */
.tariff-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr 1fr;
  gap: var(--spacing-unit);
  align-items: stretch;
  margin-top: 2rem;
}
@media (max-width: 900px) {
  .tariff-grid { grid-template-columns: 1fr; }
}
.tariff-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1.75rem;
  box-shadow: var(--shadow-card);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tariff-card--featured {
  border: 2px solid var(--color-secondary);
  box-shadow: var(--shadow-hover);
  padding: 2.25rem 1.75rem;
}
/* No badge on this instance: skip the extra top padding reserved for it, match the other tariff cards */
.tariff-card--no-badge { padding-top: 1.75rem; }
@media (max-width: 768px) {
  .tariff-card { padding: 1.25rem; }
  .tariff-card--featured { padding: 1.75rem 1.25rem; }
  .tariff-card--no-badge { padding-top: 1.25rem; }
}
.tariff-badge {
  position: absolute;
  top: -0.75rem;
  left: 1.75rem;
  background: var(--color-secondary);
  color: var(--color-on-dark);
  font-size: var(--text-4);
  font-weight: var(--weight-medium);
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-pill);
}
.tariff-name { font-weight: var(--weight-bold); font-size: var(--text-3); margin-bottom: 0.5rem; }
.tariff-subtitle { font-size: var(--text-4); color: var(--color-text-muted); margin-bottom: 0.5rem; }
.tariff-price { font-weight: var(--weight-bold); font-size: var(--text-2); color: var(--color-primary); margin: 0.5rem 0; }
.tariff-price small { font-weight: var(--weight-regular); font-size: var(--text-4); color: var(--color-text-muted); }
/* Fixed-width digits so the /tseny/ hour toggle doesn't reflow the price on switch. */
[data-tariff-price] { font-variant-numeric: tabular-nums; }
.tariff-price-note { font-size: var(--text-4); color: var(--color-text-muted); margin-bottom: 0.75rem; }
/* Optional heading above a .tariff-features list ("Что входит"/"Условия" on /tseny/),
   tightens the gap to the list it introduces on both sides. Cards without a label
   (biznes-assistent, homepage teaser) keep the single flat list, one line per fact. */
.tariff-list-label { font-size: var(--text-4); font-weight: var(--weight-medium); margin: 1rem 0 0.5rem; }
.tariff-list-label + .tariff-features { margin-top: 0; }
.tariff-features + .tariff-list-label { margin-top: 0; }
/* flex-grow pushes the CTA button in each card to the same baseline regardless of list length. */
.tariff-features {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 1rem 0 1.5rem;
  color: var(--color-text);
  font-size: var(--text-4);
  flex-grow: 1;
}
.tariff-features li {
  padding-left: 1.4rem;
  position: relative;
}
.tariff-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-secondary);
}
.tariff-toggle {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.25rem;
  margin-bottom: 1rem;
}
.tariff-toggle button {
  border: none;
  background: none;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  font-weight: var(--weight-medium);
  font-size: var(--text-4);
  cursor: pointer;
  color: var(--color-text-muted);
}
.tariff-toggle button[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-on-dark);
}

/* ===== FAQ (native <details>) ===== */
.faq-list { margin-top: 1.5rem; }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 0;
  cursor: pointer;
  font-weight: var(--weight-medium);
  font-size: var(--text-4);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { width: 20px; height: 20px; flex-shrink: 0; transition: transform 0.2s ease; }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-answer { padding: 0 0 0.85rem; color: var(--color-text); }
.faq-answer p { color: inherit; max-width: var(--prose-width); }

/* ===== Footer ===== */
.site-footer {
  background: var(--color-dark);
  color: var(--color-on-dark);
  padding: var(--spacing-section) 0 1.5rem;
}
@media (max-width: 768px) {
  .site-footer { padding-top: var(--spacing-section-mobile); }
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--spacing-unit);
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer-brand { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-brand .nav-logo { color: var(--color-on-dark); }
.mt-lg { margin-top: 2rem; }
.mt-0 { margin-top: 0; }
@media (max-width: 768px) {
  .mt-lg,
  .audience-grid,
  .task-grid,
  .trust-grid,
  .stats-row,
  .tariff-grid,
  .review-grid {
    margin-top: 1.25rem;
  }
}
.nowrap { white-space: nowrap; }
.footer-tagline { color: rgba(245, 241, 234, 0.7); font-size: var(--text-4); max-width: 260px; }
.footer-heading { font-size: var(--text-4); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem; color: rgba(245, 241, 234, 0.6); }
.footer-col ul { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-col a { font-size: var(--text-4); color: var(--color-on-dark); }
.footer-col a:hover { color: var(--color-secondary); }
.footer-bottom {
  max-width: var(--max-width);
  margin: 3rem auto 0;
  padding: 1.5rem var(--container-padding) 0;
  border-top: 1px solid rgba(245, 241, 234, 0.15);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: var(--text-4);
  color: rgba(245, 241, 234, 0.6);
}
.footer-legal { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-legal a { color: rgba(245, 241, 234, 0.6); }
.footer-legal a:hover { color: var(--color-on-dark); }

/* ===== Badge (generic) ===== */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-4);
  font-weight: var(--weight-medium);
  background: var(--color-surface-alt);
  color: var(--color-text);
}

/* ===== Comparison table ===== */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
  font-size: var(--text-3);
}
.compare-table th, .compare-table td {
  text-align: left;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
@media (max-width: 768px) {
  .compare-table th, .compare-table td { padding: 0.6rem 0.75rem; }
}
.compare-table td:first-child,
.compare-table tbody th {
  font-weight: var(--weight-medium);
}
.compare-table thead th {
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}
.compare-table tbody tr:last-child td,
.compare-table tbody tr:last-child th {
  border-bottom: none;
}
.compare-table-wrap {
  position: relative;
  overflow-x: auto;
}
/* Right-edge fade signalling more columns beyond the visible area. A tinted
   shadow rather than a background-color match, so it reads correctly
   whether the table sits on --color-surface or --color-surface-alt. Faded
   out via JS (table-scroll-hint.js) once the wrap is scrolled to its end. */
.compare-table-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 28px;
  background: linear-gradient(to right, rgba(26, 26, 26, 0), rgba(26, 26, 26, 0.1));
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.2s ease;
}
.compare-table-wrap.is-scroll-end::after {
  opacity: 0;
}
.table-scroll-hint {
  display: none;
}
@media (max-width: 768px) {
  .table-scroll-hint {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--text-4);
    color: var(--color-text-muted);
    margin-top: 1.25rem;
    transition: opacity 0.2s ease;
  }
  .table-scroll-hint.is-hidden {
    opacity: 0;
  }
  .table-scroll-hint + .compare-table-wrap .compare-table {
    margin-top: 0.75rem;
  }
}

/* ===== Audience toggle tabs ===== */
.audience-tabs {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
.audience-tab {
  flex: 1;
  min-width: 220px;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1.25rem 1.5rem;
}
@media (max-width: 768px) {
  .audience-tab { padding: 1rem 1.125rem; }
}
.audience-tab.is-active {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-card);
}
.audience-tab h3 { font-size: var(--text-2); }
.audience-tab p { font-size: var(--text-3); color: var(--color-text-muted); margin-top: 0.35rem; max-width: none; }
.audience-tab a { color: var(--color-secondary); font-weight: var(--weight-medium); display: inline-block; margin-top: 0.5rem; font-size: var(--text-3); }

/* ===== Step list ("Как это работает") ===== */
.step-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-tight);
  margin-top: 1.5rem;
}
.step-list li {
  font-size: var(--text-3);
}

/* ===== Info list (H3 + p pairs in "как это работает" service-page blocks) ===== */
.info-list {
  display: flex;
  flex-direction: column;
}
h2 + .info-list {
  margin-top: var(--info-list-gap);
}
.info-list__item {
  border-left: 3px solid var(--color-secondary);
  border-radius: 0;
  padding-left: 16px;
  margin-bottom: var(--info-list-gap);
}
.info-list__item:last-child {
  margin-bottom: 0;
}
.info-list__item h3 {
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin-bottom: 6px;
}
.info-list__item p {
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: var(--prose-width);
}
@media (max-width: 640px) {
  .info-list__item { width: 100%; }
}

/* ===== Blog article (byline, prose body, closer) — text-only byline, no avatar image yet ===== */
.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-4);
  color: var(--color-text-muted);
}
.byline-name {
  color: var(--color-text);
  font-weight: var(--weight-medium);
}
.byline a { color: inherit; }
.byline a:hover .byline-name { color: var(--color-secondary); }
.byline-sep { color: var(--color-border); }

.article-body {
  max-width: var(--prose-width);
  margin-top: var(--spacing-unit);
}
.article-body h2 {
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}
.article-body h2:first-child {
  margin-top: 0;
}
.article-body p {
  margin-top: 1rem;
}
.article-body p:first-of-type {
  margin-top: 0;
}

.article-closer {
  max-width: var(--prose-width);
  margin-top: var(--spacing-unit);
  padding-top: var(--spacing-unit);
  border-top: 1px solid var(--color-border);
}
.article-closer p {
  margin-top: 0.75rem;
}
.article-closer p:first-child {
  margin-top: 0;
}

/* ===== Inline link inside ordinary body text (a sentence that references another
   page or article mid-paragraph, e.g. "подробнее в статье ...", "странице цен") =====
   Underline only — no color change, no bold, no icon. Blends with surrounding text,
   distinguishable only by the underline. Reuse this class for every future inline
   link inside prose; do not restyle per-instance. Not for buttons, nav, or card CTAs. */
.inline-link {
  text-decoration: underline;
}

/* ===== Bulleted list inside body prose (legal/policy documents) =====
   base.css resets ul { list-style: none } sitewide; every other list on the
   site draws its own marker via a component class. This restores plain
   disc bullets with body-copy spacing for itemized clauses that don't
   belong to a specific component (e.g. /oferta/). */
.legal-list {
  list-style: disc;
  padding-left: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
  max-width: var(--prose-width);
}

/* ===== Post list (blog index page) ===== */
.post-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: var(--spacing-unit);
  max-width: var(--prose-width);
}
.post-list__item {
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-border);
}
.post-list__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.post-list__title {
  font-size: var(--text-2);
  margin-bottom: 0.5rem;
}
.post-list__title a {
  color: var(--color-text);
}
.post-list__title a:hover {
  color: var(--color-secondary);
}
.post-list__excerpt {
  color: var(--color-text-muted);
}

/* ===== Reviews grid (/otzyvy/) ===== */
.review-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-unit);
  margin-top: 2rem;
}
@media (max-width: 768px) {
  .review-grid { grid-template-columns: 1fr; }
}
.review-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1.75rem;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (max-width: 768px) {
  .review-card { padding: 1.25rem; }
}
.review-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
.review-card p {
  color: var(--color-text);
  max-width: none;
}
.review-author {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}
.review-author-name {
  font-weight: var(--weight-medium);
  color: var(--color-text);
}
.review-author-meta {
  font-size: var(--text-4);
  color: var(--color-text-muted);
}

/* ===== City list (geo hub page) — linked cities vs. not-yet-built cities ===== */
.city-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  margin-top: var(--spacing-unit);
  list-style: none;
}
.city-list__item {
  font-size: var(--text-3);
}
.city-list__item a {
  text-decoration: underline;
}
.city-list__item--plain {
  color: var(--color-text-muted);
}

/* ===== Contact form (/kontakty/) ===== */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: var(--prose-width);
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.form-field label {
  font-weight: var(--weight-medium);
  font-size: var(--text-4);
}
.form-field input,
.form-field textarea {
  font-family: var(--font-body);
  font-size: var(--text-4);
  color: var(--color-text);
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 0.75rem 1rem;
}
.form-field textarea {
  resize: vertical;
  min-height: 6rem;
}
.form-hint {
  color: var(--color-text-muted);
  font-size: var(--text-4);
}
.contact-form .btn {
  align-self: flex-start;
}
/* Reuses the same soft-tinted box pattern as .limit-no/.limit-yes on /tseny/ */
.form-status {
  border-radius: var(--radius-card);
  padding: 1rem 1.25rem;
  font-size: var(--text-4);
}
.form-status--success {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success);
}
.form-status--error {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
}