/* ============================================================
   CareHaven — public.css
   Раскладки ТОЛЬКО публичного лица (лендинг, for-owners, build,
   guides, legal). Все значения — через tokens.css. Никаких новых
   цветов/акцентов. Реюз .btn/.field/.card/.site-header из components.css.
   ============================================================ */

/* -- Brand mark (inline SVG house glyph, sage) ----------------------- */
.brand-mark { flex: 0 0 auto; }

/* -- Публичная шапка: nav как ссылки (SEO-crawlable) ----------------- */
.site-header__nav a {
  display: inline-flex; align-items: center; min-block-size: var(--touch);
  padding-inline: var(--s-3); border-radius: var(--r-sm);
  color: var(--text); font-weight: var(--weight-medium); font-size: var(--fs-200);
}
.site-header__nav a:hover { background: var(--surface-2); text-decoration: none; }
.site-header__nav a[aria-current="page"] { color: var(--accent-text); font-weight: var(--weight-label); }
/* На узких экранах сворачиваем текстовую навигацию, оставляем brand + Sign in */
@media (max-width: 47.99rem) {
  .site-header__nav { display: none; }
}

/* -- HERO (маркетинговый, 2 колонки на десктопе) --------------------- */
.hero { padding-block: var(--s-8) var(--s-7); }
.hero__grid {
  display: grid; gap: var(--s-6); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 60rem) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--s-8); }
}
.hero__eyebrow { margin-block-end: var(--s-3); }
.hero__title { max-inline-size: 16ch; }
.hero__sub { margin-block-start: var(--s-4); color: var(--text-secondary); font-size: var(--fs-400); line-height: var(--lh-snug); max-inline-size: 46ch; }
.hero__fact { margin-block-start: var(--s-4); }
.hero__cta { margin-block-start: var(--s-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.hero__fearline { margin-block-start: var(--s-3); font-size: var(--fs-100); color: var(--text-secondary); }
.hero__media {
  border-radius: var(--r-lg); overflow: clip; box-shadow: var(--shadow-2);
  aspect-ratio: 4 / 5; background: var(--surface-2);
}
@media (min-width: 60rem) { .hero__media { aspect-ratio: 4 / 5; } }
.hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* -- Универсальный заголовок секции ---------------------------------- */
.section-head { max-inline-size: 44ch; margin-block-end: var(--s-6); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { margin-block-start: var(--s-3); color: var(--text-secondary); }

/* -- Сетки контента -------------------------------------------------- */
.cols {
  display: grid; gap: var(--gutter);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem)  { .cols--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 52rem)  {
  .cols--3 { grid-template-columns: repeat(3, 1fr); }
  .cols--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 68rem)  { .cols--4 { grid-template-columns: repeat(4, 1fr); } }

/* Обычная контент-панель (не дом-карточка) */
.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.panel--sunken { background: var(--surface-2); border-color: var(--border); }
.panel__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-400); }
.panel__text { color: var(--text-secondary); }

/* -- Шаги «как это работает» (нумерованные, НЕ три равные карточки) --- */
.steps { counter-reset: step; display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 52rem) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }
.step { position: relative; padding-inline-start: calc(var(--s-8) + var(--s-2)); }
/* Desktop: number circle sits at the top; the title must clear its full height (--s-8),
   not --s-7, or the circle overlaps the heading's first letter ("Create" → "Ureate"). */
@media (min-width: 52rem) { .step { padding-inline-start: 0; padding-block-start: calc(var(--s-8) + var(--s-3)); } }
.step__num {
  counter-increment: step; position: absolute;
  inset-inline-start: 0; inset-block-start: 0;
  inline-size: var(--s-8); block-size: var(--s-8); border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--accent-050); color: var(--accent-text);
  font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-400);
}
.step__num::before { content: counter(step); }
.step__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-400); margin-block-end: var(--s-2); }
.step__text { color: var(--text-secondary); }

/* -- Список «что мы никогда не сделаем» / доверие -------------------- */
.check-list { display: grid; gap: var(--s-3); }
.check-list li { display: flex; align-items: flex-start; gap: var(--s-3); }
.check-list .ico {
  flex: 0 0 auto; inline-size: 24px; block-size: 24px; border-radius: var(--r-pill);
  background: var(--accent-050); color: var(--accent-text);
  display: grid; place-items: center; margin-block-start: 2px;
}
.check-list .ico svg { inline-size: 14px; block-size: 14px; }

/* -- Ситуации «для кого» (строки, без обещаний исхода) --------------- */
.situations { display: grid; gap: var(--s-3); }
.situations li {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-4); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.situations .dot { flex: 0 0 auto; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--accent); margin-block-start: 9px; }

/* -- Полоса финального CTA ------------------------------------------- */
.cta-band {
  background: var(--accent-050); border: 1px solid var(--accent-100);
  border-radius: var(--r-xl); padding: var(--s-7) var(--s-5); text-align: center;
}
.cta-band__title { max-inline-size: 20ch; margin-inline: auto; }
.cta-band__sub { margin-block-start: var(--s-3); color: var(--text-secondary); }
.cta-band__actions { margin-block-start: var(--s-5); display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s-3); }
.cta-band__fearline { margin-block-start: var(--s-3); font-size: var(--fs-100); color: var(--text-secondary); }

/* -- Узкая карточка «для владельцев» на лендинге --------------------- */
.owner-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding: var(--s-5);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
}
.owner-strip__links { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }

/* -- Форма (лид) ----------------------------------------------------- */
.lead-form { display: grid; gap: var(--s-4); max-inline-size: var(--measure-narrow); }
.lead-form__row { display: grid; gap: var(--s-4); }
@media (min-width: 40rem) { .lead-form__row--2 { grid-template-columns: 1fr 1fr; } }
.form-status { font-size: var(--fs-200); }
.form-status--ok { color: var(--accent-text); }
.form-status--err { color: var(--status-alert); }

/* -- Гид: лонгрид ---------------------------------------------------- */
.guide-hero { padding-block: var(--s-7) var(--s-5); }
.guide-hero__meta { margin-block-end: var(--s-3); }
.answer-first {
  margin-block: var(--s-5);
  padding: var(--s-5); border-inline-start: 4px solid var(--accent);
  background: var(--accent-050); border-radius: var(--r-md);
  font-size: var(--fs-400); line-height: var(--lh-snug); color: var(--text);
}
.guide-body h2 { margin-block-start: var(--s-7); margin-block-end: var(--s-3); }
.guide-body h3 { margin-block-start: var(--s-5); margin-block-end: var(--s-2); }
.guide-body :where(p, ul, ol) { color: var(--text); }
.guide-body ul, .guide-body ol { padding-inline-start: var(--s-5); display: grid; gap: var(--s-2); }
.guide-body li { padding-inline-start: var(--s-1); }
.verify-note {
  margin-block: var(--s-4); padding: var(--s-3) var(--s-4);
  background: var(--status-wait-bg); border: 1px solid var(--status-wait-border);
  border-radius: var(--r-md); font-size: var(--fs-100); color: var(--status-wait);
}
/* FAQ = <details> (1:1 с FAQPage JSON-LD) */
.faq { display: grid; gap: var(--s-3); }
.faq details {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
}
.faq summary {
  cursor: pointer; font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-400); list-style: none; display: flex; justify-content: space-between; gap: var(--s-3);
  min-block-size: var(--touch); align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--accent-text); font-size: var(--fs-500); }
.faq details[open] summary::after { content: "\2212"; }
.faq details[open] summary { margin-block-end: var(--s-3); }
.faq details > p { color: var(--text-secondary); }

/* Список гидов (карточки-панели) */
.guide-card { display: flex; flex-direction: column; gap: var(--s-2); block-size: 100%; }
.guide-card__kicker { font-size: var(--fs-100); }
.guide-card__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-500); }
.guide-card__title a { color: var(--text); }
.guide-card__title a:hover { color: var(--accent-text); text-decoration: none; }
.guide-card__text { color: var(--text-secondary); flex: 1; }

/* -- Юридические страницы -------------------------------------------- */
.legal-body h2 { margin-block-start: var(--s-6); margin-block-end: var(--s-2); }
.legal-body h3 { margin-block-start: var(--s-5); margin-block-end: var(--s-2); }
.legal-body :where(p, li) { color: var(--text); }
.legal-body ul { padding-inline-start: var(--s-5); display: grid; gap: var(--s-2); margin-block-start: var(--s-2); }
.legal-todo {
  display: inline-block; font-family: var(--font-mono); font-size: var(--fs-100);
  padding: 2px var(--s-2); border-radius: var(--r-xs);
  background: var(--status-wait-bg); color: var(--status-wait); border: 1px solid var(--status-wait-border);
}
.legal-meta { color: var(--text-secondary); font-size: var(--fs-200); }

/* -- ПОДВАЛ ----------------------------------------------------------- */
.site-footer {
  margin-block-start: var(--s-9);
  border-block-start: 1px solid var(--border);
  background: var(--surface);
}
.site-footer__inner { padding-block: var(--s-7); display: grid; gap: var(--s-5); }
.site-footer__top { display: grid; gap: var(--s-5); }
@media (min-width: 52rem) { .site-footer__top { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer__brandline { display: flex; align-items: center; gap: var(--s-2); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-400); color: var(--text); }
.site-footer__op { margin-block-start: var(--s-3); color: var(--text-secondary); font-size: var(--fs-200); max-inline-size: 40ch; }
.footer-col h4 { font-size: var(--fs-200); color: var(--text-secondary); text-transform: uppercase; letter-spacing: var(--tracking-caps); margin-block-end: var(--s-3); }
.footer-col ul { display: grid; gap: var(--s-2); }
.footer-col a { color: var(--text); font-size: var(--fs-200); }
.footer-col a:hover { color: var(--accent-text); }
.site-footer__legal {
  border-block-start: 1px solid var(--border); padding-block-start: var(--s-4);
  color: var(--text-secondary); font-size: var(--fs-100); line-height: var(--lh-snug);
  display: grid; gap: var(--s-2);
}

/* -- 404 / 500 / offline (брендовые) --------------------------------- */
.status-page {
  min-block-size: 70dvh; display: grid; place-items: center; text-align: center;
  padding-block: var(--s-8);
}
.status-page__inner { max-inline-size: 34rem; display: grid; gap: var(--s-4); justify-items: center; }
.status-page__code { font-family: var(--font-mono); font-size: var(--fs-200); color: var(--text-secondary); letter-spacing: var(--tracking-caps); }
.status-page__actions { margin-block-start: var(--s-3); display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }