/* about_v3.css — page-CSS для порту About.dc.html (legal_v3.html при
   page_type=='about'). Лише About-локальні класи з helmet-<style> макета.
   Спільні cycle-2 примітиви (.ss-v*/.k) + .ss-lift беруться з home_v3.css та
   design-motion.css (About-гілка legal_v3 підключає обидва). Інші 4 legal-
   сторінки цей файл НЕ вантажать. */

/* Відступ секції About (Home.dc/About.dc .sec, тут неймспейснуто). */
.about-sec { margin-block-start: 64px; scroll-margin-block-start: 20px; }
.about-sec:first-of-type { margin-block-start: 0; }

/* TOC-рейка: нумерація CSS-лічильником — авто-підлаштування під ВИДИМІ пункти.
   Захардкоджені 01-06 лишали діру (секція coverage гейтиться proof_items). */
.about-toc { counter-reset: toc; }
.about-toc a { counter-increment: toc; }
/* колір читабельний на СВІТЛОМУ верху сцени (рейка тепер угорі; --text-faint
   там тоне) — канонічний тон eyebrow'ів. */
.about-toc a i { color: #6E93A0; }
.about-toc a[aria-current="true"] i { color: var(--petrol-100); }
.about-toc a i::before { content: counter(toc, decimal-leading-zero); }

/* CMS-проза (cms.main.content: <p>/<strong>/<h3>/<ul>/<li>/<hr>/<a>). */
.cms { font-size: 15.5px; line-height: 1.8; color: #C3D9E1; max-width: 68ch; }
.cms p { margin: 0 0 16px; }
.cms p:last-child { margin-block-end: 0; }
.cms strong { color: #EAF6F9; font-weight: 700; }
.cms h3 { font-size: 15px; font-weight: 700; color: #EAF6F9; margin: 26px 0 10px; }
.cms ul { margin: 0 0 18px; padding-inline-start: 22px; display: grid; gap: 8px; }
.cms li { padding-inline-start: 4px; }
.cms li::marker { color: #3FD3E8; }
.cms hr { border: 0; height: 1px; background: rgba(255,255,255,.09); margin: 26px 0; }
.cms a { color: #3FD3E8; text-decoration: underline; text-decoration-color: rgba(63,211,232,.4); text-underline-offset: 3px; }
.cms a:hover { color: #7BE8F5; text-decoration-color: rgba(123,232,245,.85); }

/* Крок конвеєра (How it works). */
.step { position: relative; padding: 20px 22px; border-radius: 20px; }
.step b { display: block; font-size: 14.5px; font-weight: 700; color: #EAF6F9; margin-block-start: 10px; }
.step p { margin: 8px 0 0; font-size: 12.5px; line-height: 1.65; color: #8FB6C2; }
.step i { font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: #3FD3E8; }

/* Хто за цим (human + AI картки). */
.who { display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px; border-radius: 20px; }
.who .m { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: rgba(255,255,255,.08); box-shadow: inset 1px 1px 0 rgba(214,248,255,.22); color: #7BE8F5; }
.who b { display: block; font-size: 15px; font-weight: 700; color: #EAF6F9; }
.who span.r { display: block; margin-block-start: 3px; }
.who p { margin: 10px 0 0; font-size: 12.5px; line-height: 1.65; color: #A9C8D2; }

/* Важливе застереження (теплий тон, окрема панель). */
.warn { padding: 26px 28px; border-radius: 22px; background: linear-gradient(135deg,rgba(194,112,31,.16),rgba(194,112,31,.05) 60%,rgba(255,255,255,.03)); box-shadow: inset 1.5px 1.5px 0 rgba(255,214,170,.28), 0 26px 60px -30px rgba(0,0,0,.9); }
.warn .cms { color: #E8DACB; max-width: 72ch; }
.warn .cms strong { color: #FFF1E0; }

/* Контакт-CTA. */
.cta { display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px; border-radius: 999px; font-size: 13px; font-weight: 600; font-family: var(--mono); }