/* ============================================================
   VentasBoost Design System — visual override layer
   Applied site-wide on top of each page's existing inline <style>.
   Loaded LAST in <head> (via patch_head managed block), so equal-
   specificity rules win by source order — no !important needed for
   class-based elements. Inline style="" attributes are handled by
   scripts/apply_design_system.py.

   Scope: visual layer only — Manrope, red sharp CTAs, blue accent,
   10px hairline cards. Content/structure/infra untouched.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap');

:root {
  /* colors */
  --vb-blue: #1193de;  --vb-blue-600: #0f82c4;  --vb-blue-700: #0c6ba3;  --vb-blue-050: #e7f4fc;
  --vb-red:  #f94e4e;  --vb-red-600:  #ec3d3d;  --vb-red-700:  #d12f2f;  --vb-red-050:  #fdebeb;
  --vb-gold: #ffc103;  --vb-cream: #fffaea;  --vb-green: #1fae5a;
  --vb-ink:  #000;     --vb-text: #3e4042;   --vb-text-soft: #6c6f72;  --vb-text-mute: #9a9da0;
  --vb-line: #e4e6e8;  --vb-line-strong: #c2c2c2;  --vb-surface: #f6f7f8;  --vb-surface-2: #eef0f2;
  --vb-white: #fff;    --vb-black: #111314;  --vb-focus: #2015ff;
  /* type */
  --vb-font: 'Manrope', Arial, 'Helvetica Neue', sans-serif;
  --font-sans: 'Manrope', Arial, 'Helvetica Neue', sans-serif;
  --font-display: 'Manrope', Arial, sans-serif;
  --fs-display-fluid: clamp(34px, 5.6vw, 72px);
  --fs-h1-fluid: clamp(30px, 4.2vw, 52px);
  --fs-h2-fluid: clamp(26px, 3.4vw, 42px);
  --fs-lead: 24px;  --fs-lead-sm: 22px;
  /* spacing / radius / shadow / motion */
  --container-max: 1200px;
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 16px;  --r-pill: 1000px;
  --shadow-sm: 0 2px 8px rgba(17,19,20,.06);
  --shadow-md: 0 10px 30px rgba(17,19,20,.08);
  --shadow-cta: 0 8px 20px rgba(249,78,78,.28);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* — Typography: Manrope everywhere (the AI-chat keeps its own system-ui) — */
body { font-family: var(--vb-font); color: var(--vb-text); }
.vb-nav-logo span,
h1, h2, h3, h4, h5, h6,
.vb-hero h1, .vb-section-header h2, .vb-card h3 { font-family: var(--vb-font); }

/* — Buttons: red, UPPERCASE, sharp corners (class-based system) — */
.vb-btn {
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  transition: background .2s ease-in-out, color .2s ease-in-out, transform .15s ease;
}
.vb-btn--primary { background: var(--vb-red); color: #fff !important; }
.vb-btn--primary:hover { background: var(--vb-red-600); transform: translateY(-1px); }
.vb-btn--primary:active { transform: translateY(1px); }
.vb-btn--ghost {
  background: #fff; color: var(--vb-blue);
  border: 2px solid var(--vb-blue); border-radius: 0;
}
.vb-btn--ghost:hover { background: var(--vb-blue-050); color: var(--vb-blue-700); }
.vb-btn--wa { border-radius: 0; }            /* keep WhatsApp green, just square it */
.vb-btn--wa:hover { transform: translateY(-1px); }

/* — Cards: 10px radius on hairline borders, white surface, no heavy shadow — */
.vb-card,
.vb-case,
.vb-faq-item {
  border-radius: 10px;
  border: 1px solid var(--vb-line);
  background: #fff;
}
.vb-card { background: #fff; }
.vb-card:hover { box-shadow: 0 10px 30px rgba(17,19,20,.08); }
.vb-faq-item[open] { border-color: var(--vb-blue); }
.vb-case-badge { background: var(--vb-blue-050); color: var(--vb-blue); }
.vb-case-quote { border-left-color: var(--vb-green); }

/* — Accent recolor: brand blue replaces the old #2563eb on class elements — */
.vb-nav-contact a:hover,
.vb-nav-links a:hover,
.vb-case-link,
.vb-lang-menu a.active,
.vb-footer-copy a:hover { color: var(--vb-blue); }

/* — Hairline borders + surface tints align to the new palette — */
.vb-nav { border-bottom: 1px solid var(--vb-line); }
.vb-section--gray { background: var(--vb-surface); }
.vb-footer { border-top: 1px solid var(--vb-line); }

/* — Hero accent word uses brand blue — */
.vb-hero h1 span { color: var(--vb-blue); }

/* — Focus ring — */
a:focus-visible, button:focus-visible,
.vb-btn:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--vb-focus);
  outline-offset: 2px;
}

/* — Yellow highlighter — used SPARINGLY in long-reads to mark the one
   trigger/pain/hook line. Marker-stripe look (doesn't fill full line-height). — */
mark, .vb-hl {
  background: linear-gradient(180deg,
    transparent 10%, #fffca3 10%,
    #fffca3 88%, transparent 88%);
  color: inherit;
  padding: 0 .06em;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* — Article body unordered lists: branded red chevron bullet — */
.vb-article ul { list-style: none; padding-left: 0; margin: 14px 0; }
.vb-article ul li { position: relative; padding-left: 30px; margin-bottom: 9px; }
.vb-article ul li::before {
  content: '';
  position: absolute; left: 4px; top: 0.28em;
  width: 15px; height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 3l5 5-5 5' fill='none' stroke='%23f94e4e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* — Comparison-table pros (green) / cons (coral) — */
.vb-article .pro { color: var(--vb-green); font-weight: 600; }
.vb-article .con { color: #f9776a; font-weight: 600; }

/* — Content links must read as links —
   The global `a { text-decoration:none; color:inherit }` reset makes inline
   links invisible in body copy. Re-underline ONLY class-less inline links inside
   content containers, so nav / buttons / CTAs / cards (which carry classes) stay clean.
   Owner feedback 2026-06-25: "без подчёркивания не видно ссылок". */
.vb-article a:not([class]),
.guide-content a:not([class]),
.vb-related a:not([class]) { color: #e0473a; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.note a:not([class]),
.note--warn a:not([class]),
.note--green a:not([class]) { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }

/* — Site-wide: all body text links underlined (footer .fl & buttons/nav carry
   classes and stay clean; scoped to <main> so header/footer are excluded).
   Owner request 2026-07-07: "все текстовые ссылки с подчёркиванием кроме футера". */
.lnk { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
main a:not([class]) { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

/* — «По теме» see-also box: compact callout at the end of the article column.
   Light blue-grey bg, circular blue arrow, inline links in guillemets. Owner request 2026-06-26. */
.vb-article .vb-seealso {
  display: flex; align-items: flex-start; gap: 12px;
  background: #e8edf4; border-radius: 12px;
  padding: 16px 20px; margin: 40px 0 0;
  font-size: 15.5px; line-height: 1.65;
}
.vb-article .vb-seealso-ic { flex-shrink: 0; line-height: 0; margin-top: 1px; }
.vb-article .vb-seealso-tx strong { display: block; color: var(--vb-ink); font-weight: 700; }
.vb-article .vb-seealso-tx .vb-seealso-i { display: block; margin-top: 6px; }
.vb-article .vb-seealso a { color: #1193de; text-decoration: underline; text-underline-offset: 2px; }
.vb-article .vb-seealso a:hover { color: #0c6ba3; }

/* — Capsule callout: coral redesign (overrides the inline blue in _article_style.html;
   design-system.css loads after the inline <style>, so equal-specificity rules win).
   Owner request 2026-06-26: coral left bar + coral text + uppercase eyebrow. */
.vb-article .capsule {
  background: none;
  border: none;
  border-left: 3px solid var(--vb-red);
  border-radius: 0;
  color: var(--vb-text);
  font-size: 17.5px;
  line-height: 1.75;
  padding: 6px 0 6px 22px;
}
.vb-article .capsule strong { color: var(--vb-ink); }
/* leading label («Коротко», «Кратко», вопрос) → coral uppercase eyebrow.
   Rendered as <span class="cap-lead"> only when it is the capsule's first child,
   so mid-sentence <strong> (e.g. «2,5 млрд») is never affected. */
.vb-article .capsule .cap-lead {
  display: block;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--vb-red);
  margin-bottom: 7px;
}

/* ── Homepage #diagnostics — "check your sales dept in 5 min" hero redesign.
   Owner mockup 2026-06-27: asymmetric layout — left pitch + nav rows,
   right live "report preview" card with CRM-health gauge + status bars.
   Loads after inline <style>, so .diag-* override the old symmetric layout. */
.diag-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: stretch; }
.diag-rows { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.diag-row { display: flex; align-items: center; gap: 16px; padding: 16px 18px; text-decoration: none; }
.diag-row .tile { width: 44px; height: 44px; flex-shrink: 0; margin: 0; }
.diag-row .tile img { width: 22px; height: 22px; }
.diag-row b { display: block; font-size: 16px; font-weight: 700; color: var(--vb-ink); }
.diag-row .s { display: block; font-size: 13.5px; color: var(--vb-text-soft); margin-top: 2px; line-height: 1.4; }
.diag-txt { flex: 1; min-width: 0; }
.diag-acts { display: flex; gap: 8px; flex-shrink: 0; margin-left: auto; }
.diag-act { width: 38px; height: 38px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--vb-line); color: var(--vb-text-soft); background: #fff; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.diag-act:hover { border-color: var(--vb-blue); color: var(--vb-blue); }
.diag-act--install { background: var(--vb-blue); border-color: var(--vb-blue); color: #fff; }
.diag-act--install:hover { background: #0c6ba3; border-color: #0c6ba3; color: #fff; }
.diag-report { background: #fff; border: 1px solid var(--vb-line); border-radius: 12px; padding: 22px 24px; box-shadow: 0 6px 26px rgba(17,147,222,.07); }
.diag-report-head { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--vb-line); margin-bottom: 18px; }
.diag-eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vb-text-mute); margin-bottom: 3px; }
.diag-stat { margin-bottom: 15px; }
.diag-stat:last-of-type { margin-bottom: 0; }
.diag-stat-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; gap: 12px; }
.diag-stat-top b { font-size: 14.5px; font-weight: 600; color: var(--vb-ink); }
.diag-stat-top .v { font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.diag-stat-top .v::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.diag-bar { height: 6px; border-radius: 3px; background: var(--vb-line); overflow: hidden; }
.diag-bar i { display: block; height: 100%; border-radius: 3px; }
.diag-ok { color: var(--vb-green); }
.diag-warn { color: #ef8b2e; }
.diag-crit { color: var(--vb-red); }
.diag-tip { background: var(--vb-cream); border: 1px solid #f1dd9b; border-radius: 8px; padding: 13px 15px; margin-top: 20px; font-size: 13.5px; line-height: 1.55; color: var(--vb-text); }
.diag-tip b { color: var(--vb-ink); }
@media (max-width: 760px) { .diag-hero { grid-template-columns: 1fr; gap: 28px; } }

/* ============================================================
   Readability layer (2026-07-21) — larger & darker section / card /
   caption text site-wide. Loaded last, so wins by source order.
   ============================================================ */
/* section leads + hero subs (text under headings) */
.ap-lead { font-size: 19px; line-height: 1.62; }
.ap-sub { font-size: 19px; }
.kp-hero .kp-sub { font-size: 22px; line-height: 1.55; }
/* card / list body text (was 13.5–15px) */
.kpp-li p, .kit-free-card p, .kp-step p, .ap-pain p, .apv-pain-ed p,
.ap-benefits p, .ap-metric span { font-size: 15.5px; line-height: 1.58; }
/* small card titles */
.kit-free-card b { font-size: 16px; }
.kpp-li h3 { font-size: 18px; }
/* FAQ answers */
.ap-faq .a { font-size: 16.5px; line-height: 1.66; }
/* small captions / notes — bigger AND darker (were ~12.5px light-gray) */
.kp-note, .ap-cta-note, .ap-trust span, .ap-crumbs { font-size: 14.5px; }
.kp-note { color: var(--vb-text-soft); }
@media (max-width: 760px) {
  .ap-lead, .ap-sub { font-size: 17.5px; }
  .kp-hero .kp-sub { font-size: 19px; }
}
