/* Стили страницы кейса. Общий макет и другие страницы используют styles.css. */
.case-article { overflow-wrap: break-word; }
.case-article h3 { font-size: 1.125rem; line-height: 1.5; margin: 0 0 12px; }
.case-article ul, .case-article ol { line-height: 1.65; padding-left: 23px; }
.case-article li + li { margin-top: 10px; }
.case-article .case-header { margin-bottom: 38px; }
.case-article .case-header h1 { max-width: 780px; font-size: 2rem; line-height: 1.3; }
.case-article .case-header p { max-width: 70ch; }
.case-article .case-header .case-intro-frame { padding: 16px 18px; border: 1px solid #222; border-radius: 12px; box-sizing: border-box; }
.case-article .case-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; width: fit-content; max-width: 100%; margin: 0 0 26px; padding: 14px 18px; border: 1px solid #ccc; border-radius: 12px; background: #fafafa; list-style: none; color: #555; font-size: .9375rem; line-height: 1.5; }
.case-article .case-meta li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.case-article .case-meta li + li { margin-top: 0; }
.case-article .case-meta__icon { display: block; width: 22px; height: 22px; flex: 0 0 22px; }
.case-article .case-meta a, .case-article .case-meta span, .case-article .case-meta time { min-width: 0; overflow-wrap: anywhere; }
.case-article .case-kicker, .case-article .case-eyebrow { font-size: .875rem; color: #555; margin-bottom: 14px; }
.case-article .case-lead { font-size: 1.125rem; line-height: 1.65; }
.case-article .case-toc { margin: 0 0 38px; padding: 24px 28px; border-radius: 18px; background: #f5f5f5; }
.case-article .case-toc summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 8px 0; font-size: 1.5rem; line-height: 1.4; font-weight: 600; cursor: pointer; list-style: none; }
.case-article .case-toc summary::-webkit-details-marker { display: none; }
.case-article .case-toc__chevron { width: 11px; height: 11px; flex: 0 0 11px; margin-right: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.case-article .case-toc[open] .case-toc__chevron { transform: rotate(225deg); }
.case-article .case-toc nav { padding-top: 20px; }
.case-article .case-toc ol { counter-reset: toc-item; padding: 0; margin: 0; list-style: none; }
.case-article .case-toc li { counter-increment: toc-item; }
.case-article .case-toc li + li { margin-top: 12px; }
.case-article .case-toc a { display: grid; grid-template-columns: 2.5em minmax(0, 1fr); gap: 8px; align-items: baseline; min-height: 40px; padding: 5px 0; font-size: 1.0625rem; line-height: 1.55; text-decoration: none; }
.case-article .case-toc a::before { content: counter(toc-item) "."; color: #666; }
.case-article .case-toc a:hover, .case-article .case-toc a[aria-current="location"] { text-decoration: underline; }
.case-article .case-toc a[aria-current="location"] { font-weight: 600; }
.case-article .case-toc ol ol { margin: 6px 0 0 2.5em; }
.case-article .case-toc ol ol a { font-size: .9375rem; }
.case-article .case-toc ol ol a::before { content: counters(toc-item, "."); }
.case-article h2[id], .case-article h3[id] { scroll-margin-top: 28px; }
.case-article .case-section { margin-top: 42px; padding-top: 32px; border-top: 1px solid #222; }
.case-article .case-section > p { max-width: 70ch; }
.case-article .case-note { color: #555; font-size: .9375rem; line-height: 1.6; }
.case-article .scenario-list { list-style: none; padding: 0; margin: 24px 0; }
.case-article .scenario-card { margin: 0; padding: 22px 0; border-bottom: 1px solid #ccc; }
.case-article .scenario-card:first-child { padding-top: 0; }
.case-article .scenario-card:last-child { border-bottom: 0; padding-bottom: 0; }
.case-article .scenario-card p:last-child { margin-bottom: 0; }
.case-article .solution-steps { margin: 24px 0; }
.case-article .solution-steps > section + section { margin-top: 32px; }
.case-article .crm-connection-figure { margin: 24px 0; }
.case-article .crm-connection-figure img { display: block; width: 100%; height: auto; }
.case-article .messenger-example { max-width: 420px; margin: 28px auto; }
.case-article .messenger-header { display: flex; align-items: center; gap: 10px; border: 1px solid #222; border-radius: 14px 14px 0 0; padding: 16px 20px; background: #f5f5f5; }
.case-article .messenger-header p { margin: 0; }
.case-article .message-bubble { padding: 24px; border: 1px solid #222; border-top: 0; border-radius: 0 0 14px 14px; }
.case-article .message-bubble p { line-height: 1.65; }
.case-article .message-bubble p:last-child { margin-bottom: 0; }
.case-article .message-meta { color: #555; font-size: .8125rem; line-height: 1.5; margin-top: 14px; }
.case-article figcaption { padding-top: 12px; font-size: .875rem; color: #555; line-height: 1.55; }
.case-article .result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 26px 0; }
.case-article .result-card { min-width: 0; border: 1px solid #222; padding: 24px; }
.case-article .result-value { display: block; font-size: 2rem; line-height: 1.25; font-weight: 700; margin: 0 0 14px; }
.case-article .result-card p { line-height: 1.6; }
.case-article .result-metric { font-weight: 600; margin-bottom: 18px; }
.case-article .result-stat + .result-stat { border-top: 1px solid #ccc; padding-top: 18px; }
.case-article .result-card details { font-size: .9375rem; line-height: 1.6; margin: 18px 0; }
.case-article .result-card summary { cursor: pointer; font-weight: 600; }
.case-article .result-source { font-size: .875rem; overflow-wrap: anywhere; }
.case-article .result-card > :last-child { margin-bottom: 0; }
.case-article .result-card--school { border-color: #999; border-radius: 28px; }
.case-article .result-card--school .result-metric { margin-bottom: 28px; }
.case-article .result-card--school h3 { font-size: 1.5rem; margin-bottom: 18px; }
.case-article .result-card--school details { margin-top: 0; }
.case-article .result-card--school summary { min-height: 44px; padding: 10px 18px; border-left: 1px solid #777; border-right: 1px solid #777; }
.case-article .result-card__steps { padding: 18px; }
.case-article .result-card__steps p:last-child { margin-bottom: 0; }
.case-article .result-card--supplier { border-color: #999; border-radius: 28px; }
.case-article .result-card--supplier .result-metric { margin-bottom: 28px; }
.case-article .result-card--supplier .result-stat + .result-stat { border-top: 0; padding-top: 0; }
.case-article .result-card--supplier h3 { font-size: 1.5rem; margin-bottom: 18px; }
.case-article .result-card--supplier details { margin-top: 0; }
.case-article .result-card--supplier summary { min-height: 44px; padding: 10px 18px; border-left: 1px solid #777; border-right: 1px solid #777; }
.case-article .result-card--b2b { border-color: #999; border-radius: 28px; }
.case-article .result-card--b2b .result-metric { margin-bottom: 28px; }
.case-article .result-card--b2b h3 { font-size: 1.5rem; margin-bottom: 18px; }
.case-article .result-card--b2b details { margin-top: 0; }
.case-article .result-card--b2b summary { min-height: 44px; padding: 10px 18px; border-left: 1px solid #777; border-right: 1px solid #777; }
.case-article .case-service-choice { margin-top: 42px; padding: 30px; border: 1px solid #222; border-radius: 16px; background: #f5f5f5; }
.case-article .case-service-choice h2 { max-width: 32em; }
.case-article .case-service-choice > p { max-width: 65ch; }
.case-article .case-service-choice__link { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 48px; max-width: 100%; margin-top: 6px; padding: 12px 18px; border: 1px solid #222; border-radius: 6px; background: #fff; font-size: 1rem; line-height: 1.5; font-weight: 600; text-decoration: none; }
.case-article .case-service-choice__link:hover { background: #eee; text-decoration: underline; }
.case-article .case-service-choice__link span { flex: 0 0 auto; }
.case-article .case-service-choice .case-service-choice__status { margin: 12px 0 0; font-size: .875rem; color: #555; }
.case-article .quiz-service-placeholder { margin-top: 42px; padding: 30px; border: 1px dashed #555; border-radius: 16px; }
.case-article .quiz-service-placeholder details { margin-top: 22px; }
.case-article .quiz-service-placeholder summary { cursor: pointer; font-weight: 600; line-height: 1.55; }
.case-article .quiz-service-placeholder details > p,
.case-article .quiz-service-placeholder details > ol { margin-top: 18px; }
.case-article .quiz-service-placeholder .draft-note { margin-top: 20px; }
.case-article a { text-underline-offset: .18em; }
.case-article #solution, .case-article #results, .case-article #service-quiz { scroll-margin-top: 28px; }

@media (max-width: 1040px) {
  .case-article .result-grid { gap: 14px; }
  .case-article .result-card { padding: 20px; }
  .case-article .case-header h1 { font-size: 1.8125rem; }
}
@media (max-width: 760px) {
  .case-article .case-header h1 { font-size: 1.5rem; line-height: 1.4; }
  .case-article .case-lead { font-size: 1rem; }
  .case-article .case-meta { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; gap: 12px; padding: 14px; }
  .case-article .case-toc { padding: 18px 16px; border-radius: 14px; }
  .case-article .case-toc summary { font-size: 1.25rem; }
  .case-article .case-toc a { grid-template-columns: 2em minmax(0, 1fr); gap: 6px; font-size: 1rem; }
  .case-article .case-toc ol ol { margin-left: 1em; }
  .case-article .case-toc ol ol a { font-size: .9375rem; }
  .case-article .case-section { margin-top: 32px; padding-top: 24px; }
  .case-article .result-grid { grid-template-columns: minmax(0, 1fr); }
  .case-article .result-value { font-size: 1.875rem; }
  .case-article .case-service-choice { margin-top: 32px; padding: 22px 18px; }
  .case-article .case-service-choice__link { width: 100%; gap: 12px; padding: 12px 14px; }
  .case-article .quiz-service-placeholder { padding: 22px 18px; }
  .case-article .messenger-header { padding: 14px 16px; }
  .case-article .message-bubble { padding: 20px 18px; }
}

/* Авторская статья: прежний макет, новая композиция из Markdown. */
.case-article--markdown .case-section > h2 { max-width: 34em; line-height: 1.4; }
.case-article--markdown #case-section-2>p:nth-of-type(4) { padding: 16px 18px; border: 1px solid #222; border-radius: 12px; box-sizing: border-box; }
.case-article--markdown .scenario-card h3 { font-size: 1.1875rem; }
.case-article--markdown .scenario-card p { max-width: 70ch; }
.case-article--markdown .solution-step { padding-left: 24px; border-left: 2px solid #ddd; }
.case-article--markdown .solution-step h3 { font-size: 1.1875rem; }
.case-article--markdown .solution-step p { max-width: 70ch; }
.case-article--markdown .crm-connection-figure { padding: 12px; border: 1px solid #ccc; border-radius: 18px; }
.case-article--markdown .messenger-example { max-width: 560px; margin: 26px 0; padding: 22px 24px; border: 1px solid #999; border-radius: 18px 18px 18px 4px; background: #f5f5f5; }
.case-article--markdown .messenger-example p { margin: 0; }
.case-article--markdown .case-comparison { margin: 26px 0; overflow-x: auto; border: 1px solid #ccc; border-radius: 16px; }
.case-article--markdown .case-comparison table { width: 100%; min-width: 540px; table-layout: fixed; border-collapse: collapse; }
.case-article--markdown .case-comparison th, .case-article--markdown .case-comparison td { width: 50%; padding: 18px 20px; text-align: left; vertical-align: top; line-height: 1.65; }
.case-article--markdown .case-comparison th { background: #f5f5f5; font-size: 1.0625rem; }
.case-article--markdown .case-comparison tbody tr { border-top: 1px solid #ddd; }
.case-article--markdown .case-comparison th + th, .case-article--markdown .case-comparison td + td { border-left: 1px solid #ddd; }
.case-article--markdown .result-card--author { border-color: #999; border-radius: 28px; }
.case-article--markdown .result-card--author h3 { margin-bottom: 22px; font-size: 1.125rem; line-height: 1.6; }
.case-article--markdown .result-card__name { display: block; margin-bottom: 14px; font-size: 1.25rem; line-height: 1.4; }
.case-article--markdown .result-card__metric { display: block; }
.case-article--markdown .result-card__number { font-size: 2rem; line-height: 1.3; white-space: nowrap; }
.case-article--markdown .case-section--quiz > .loss-quiz > h2,
.case-article--markdown .case-section--quiz > .loss-quiz > p:first-of-type,
.case-article--markdown .case-section--quiz > .service-quiz > h2,
.case-article--markdown .case-section--quiz > .service-quiz > .service-quiz__intro { display: none; }
.case-article--markdown .case-section--quiz > .loss-quiz,
.case-article--markdown .case-section--quiz > .service-quiz { margin-top: 24px; }

@media (max-width: 760px) {
  .case-article--markdown .solution-step { padding-left: 16px; }
  .case-article--markdown .messenger-example { padding: 18px; }
  .case-article--markdown .case-comparison th, .case-article--markdown .case-comparison td { padding: 14px 16px; font-size: .9375rem; }
  .case-article--markdown .result-card__number { font-size: 1.875rem; }
}