/* shared.css — вынесено из index.html'а собственного inline <style>
   (docs/38-vertical-landings.md, по прямому запросу пользователя):
   общий дизайн-язык для главного лендинга и трёх вертикальных страниц
   (salons/courses/tutor) — правка бренд-цвета/шрифта в одном месте, не
   синхронно в N файлах. Контент/структура каждой страницы остаются
   отдельными самостоятельными HTML-файлами, как и предложил
   пользователь — общий только сам CSS-язык, не разметка.
*/
  :root {
    --bg: #102019;
    --bg-raised: #17281f;
    --bg-raised-2: #1e3227;
    --ink: #ece7d6;
    --ink-soft: #b7c1b4;
    --ink-faint: #6d8177;
    --line: #2a3c32;
    --line-soft: #223228;
    --accent: #e2812f;
    --accent-bright: #f0964b;
    --accent-soft: #3a2c18;
    --pine: #5c977a;
    --pine-soft: #1f3a2c;
    --bad: #c9705a;
    --bad-soft: #3a2420;
    --shadow: rgba(0,0,0,.35);
  }

  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
  }
  a { color: inherit; }
  h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; text-wrap: balance; margin: 0; letter-spacing: -0.01em; }
  p { color: var(--ink-soft); margin: 0; }
  .eyebrow {
    font-family: 'IBM Plex Mono', monospace;
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent-bright);
    display: flex;
    align-items: center;
    gap: .55rem;
  }
  .eyebrow::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    flex: none;
  }

  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 1.75rem; }
  section { padding: 5.5rem 0; }
  @media (max-width: 720px) { section { padding: 3.5rem 0; } }

  /* nav */
  nav.top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.4rem 1.75rem;
    max-width: 1120px; margin: 0 auto;
    position: sticky; top: 0; z-index: 20;
    background: rgba(16,32,25,.86); backdrop-filter: blur(10px);
  }
  .wordmark {
    font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.25rem;
    display: flex; align-items: center; gap: .5rem;
    letter-spacing: -0.01em;
  }
  .wordmark .flame { color: var(--accent); font-family: 'IBM Plex Mono', monospace; font-weight: 600; }
  .nav-links { display: flex; align-items: center; gap: 1.6rem; }
  .nav-links a.link { font-family: 'IBM Plex Mono', monospace; font-size: .8rem; color: var(--ink-faint); text-decoration: none; }
  .nav-links a.link:hover { color: var(--ink-soft); }
  @media (max-width: 720px) { .nav-links .link { display: none; } }
  .nav-cta {
    font-family: 'IBM Plex Mono', monospace; font-size: .82rem; font-weight: 500;
    padding: .55rem 1.1rem; border-radius: 8px;
    border: 1px solid var(--line); color: var(--ink-soft); text-decoration: none;
  }
  .nav-cta:hover { border-color: var(--pine); color: var(--ink); }

  /* vertical switch — переход между "типами" продукта (салоны/школы/
     репетиторы/весь продукт), виден на каждой из четырёх страниц, не
     только в разделе #verticals главного лендинга или в подвале */
  .vertical-switch-bar { border-bottom: 1px solid var(--line-soft); background: var(--bg-raised); }
  .vertical-switch {
    max-width: 1120px; margin: 0 auto; padding: .6rem 1.75rem;
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  }
  .vertical-switch .vs-label {
    font-family: 'IBM Plex Mono', monospace; font-size: .72rem; color: var(--ink-faint);
    margin-right: .2rem;
  }
  .vertical-switch a {
    font-family: 'IBM Plex Mono', monospace; font-size: .78rem;
    padding: .3rem .75rem; border-radius: 999px;
    border: 1px solid var(--line-soft); color: var(--ink-soft); text-decoration: none;
  }
  .vertical-switch a:hover { border-color: var(--pine); color: var(--ink); }
  .vertical-switch a.active { border-color: var(--accent); color: var(--accent-bright); background: var(--accent-soft); }

  /* hero */
  .hero { position: relative; overflow: hidden; padding-top: 3rem; padding-bottom: 6rem; }
  .hero-contours { position: absolute; inset: 0; z-index: 0; opacity: .55; pointer-events: none; }
  .hero-inner { position: relative; z-index: 1; max-width: 760px; }
  .hero h1 { font-size: 3.4rem; line-height: 1.06; margin: 1.1rem 0 1.4rem; }
  .hero h1 em { font-style: normal; color: var(--accent-bright); }
  @media (max-width: 720px) { .hero h1 { font-size: 2.3rem; } }
  .hero .lede { font-size: 1.12rem; max-width: 560px; margin-bottom: 2.1rem; }
  .hero-ctas { display: flex; gap: .9rem; flex-wrap: wrap; align-items: center; }
  .btn-primary {
    font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: .88rem;
    background: var(--accent); color: #1a1006; text-decoration: none;
    padding: .85rem 1.5rem; border-radius: 9px;
    box-shadow: 0 8px 20px -6px rgba(226,129,47,.45);
    display: inline-block;
  }
  .btn-secondary {
    font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: .88rem;
    color: var(--ink-soft); text-decoration: none;
    padding: .85rem 1.1rem; border-radius: 9px; border: 1px solid var(--line);
  }
  /* section headings */
  .section-head { max-width: 620px; margin-bottom: 2.6rem; }
  .section-head.wide { max-width: 760px; }
  .section-head h2 { font-size: 2.1rem; margin-top: .7rem; }
  .section-head p { margin-top: .9rem; font-size: 1.02rem; }
  .section-divider { border-top: 1px solid var(--line-soft); }

  /* problem */
  .problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
  @media (max-width: 860px) { .problem-grid { grid-template-columns: 1fr; } }
  .problem-card {
    background: var(--bg-raised); border: 1px solid var(--line-soft);
    border-radius: 14px; padding: 1.6rem 1.5rem;
  }
  .problem-card .mark { font-family: 'IBM Plex Mono', monospace; color: var(--ink-faint); font-size: .78rem; }
  .problem-card p { color: var(--ink-soft); margin-top: .7rem; font-size: .94rem; }

  /* how it works — waypoint flow */
  .route { position: relative; }
  .route-line {
    position: absolute; top: 27px; left: 40px; right: 40px; height: 2px;
    background: repeating-linear-gradient(to right, var(--line) 0 8px, transparent 8px 14px);
  }
  @media (max-width: 860px) { .route-line { display: none; } }
  .route-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; position: relative; }
  @media (max-width: 860px) { .route-steps { grid-template-columns: 1fr; } }
  .route-step { display: flex; flex-direction: column; gap: .9rem; }
  .route-badge {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--bg-raised); border: 1.5px solid var(--pine);
    display: flex; align-items: center; justify-content: center;
    font-family: 'IBM Plex Mono', monospace; font-weight: 600; color: var(--accent-bright);
    z-index: 1; font-size: .95rem;
  }
  .route-step h3 { font-size: 1.08rem; font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; }
  .route-step p { font-size: .9rem; }

  /* live example — a real conversation transcript, framed as a window */
  .live-example { margin-top: 3.2rem; display: grid; grid-template-columns: .8fr 1fr; gap: 2.6rem; align-items: center; }
  @media (max-width: 860px) { .live-example { grid-template-columns: 1fr; gap: 1.6rem; } }
  .live-example-note .eyebrow { margin-bottom: .7rem; }
  .live-example-note h3 { font-size: 1.3rem; line-height: 1.3; }
  .live-example-note p { font-size: .92rem; margin-top: .8rem; }
  .mockup-window {
    background: var(--bg-raised); border: 1px solid var(--line-soft); border-radius: 16px;
    overflow: hidden; box-shadow: 0 20px 44px -18px var(--shadow);
  }
  .mockup-titlebar {
    display: flex; align-items: center; gap: .5rem;
    padding: .7rem .9rem; border-bottom: 1px solid var(--line-soft); background: var(--bg-raised-2);
  }
  .mockup-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
  .mockup-titlebar .chan {
    margin-left: .5rem; font-family: 'IBM Plex Mono', monospace; font-size: .72rem; color: var(--ink-faint);
    background: var(--bg-raised); border: 1px solid var(--line-soft); border-radius: 999px; padding: .2rem .6rem;
  }
  .mockup-body { padding: 1.2rem 1.1rem; display: flex; flex-direction: column; gap: .7rem; }
  .mockup-msg { max-width: 84%; padding: .6rem .85rem; border-radius: 12px; font-size: .84rem; line-height: 1.5; }
  .mockup-msg.client { align-self: flex-end; background: var(--pine-soft); color: var(--ink); border-bottom-right-radius: 3px; }
  .mockup-msg.bot { align-self: flex-start; background: var(--bg-raised-2); color: var(--ink-soft); border: 1px solid var(--line-soft); border-bottom-left-radius: 3px; }
  .mockup-msg.bot.escalate { border-color: var(--accent); color: var(--ink); }
  .mockup-tag { font-family: 'IBM Plex Mono', monospace; font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); display: block; margin-bottom: .3rem; }

  /* capability grid */
  .cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
  @media (max-width: 900px) { .cap-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 620px) { .cap-grid { grid-template-columns: 1fr; } }
  .cap-card {
    background: var(--bg-raised); border: 1px solid var(--line-soft); border-radius: 14px;
    padding: 1.5rem 1.4rem; display: flex; flex-direction: column; gap: .7rem;
  }
  .cap-icon {
    width: 34px; height: 34px; border-radius: 9px; background: var(--pine-soft);
    display: flex; align-items: center; justify-content: center;
    color: var(--pine); flex: none;
  }
  .cap-icon svg { width: 19px; height: 19px; }
  .cap-card h3 { font-family: 'IBM Plex Sans', sans-serif; font-size: 1.02rem; font-weight: 600; }
  .cap-card p { font-size: .89rem; }
  .cap-card .cap-status {
    font-family: 'IBM Plex Mono', monospace; font-size: .68rem; text-transform: uppercase;
    letter-spacing: .06em; color: var(--ink-faint); margin-top: auto; padding-top: .4rem;
  }
  .cap-card .cap-status.verified { color: var(--pine); }

  /* principles */
  .principles { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
  @media (max-width: 860px) { .principles { grid-template-columns: 1fr; } }
  .principle-card {
    background: linear-gradient(165deg, var(--bg-raised-2), var(--bg-raised));
    border: 1px solid var(--line-soft);
    border-radius: 18px; padding: 2.2rem 2rem;
    position: relative;
  }
  .principle-card .pn { font-family: 'IBM Plex Mono', monospace; color: var(--pine); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
  .principle-card h3 { font-size: 1.5rem; margin: .8rem 0 1rem; line-height: 1.2; }
  .principle-card p { font-size: .96rem; }
  .principle-card p + p { margin-top: .8rem; }

  /* pricing */
  .pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
  @media (max-width: 1000px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 620px) { .pricing-grid { grid-template-columns: 1fr; } }
  .price-card {
    background: var(--bg-raised); border: 1px solid var(--line-soft); border-radius: 18px;
    padding: 1.9rem 1.6rem; display: flex; flex-direction: column; gap: 1.1rem; position: relative;
  }
  .price-card.featured {
    border-color: var(--accent);
    background: linear-gradient(165deg, var(--bg-raised-2), var(--bg-raised));
    box-shadow: 0 14px 34px -12px rgba(226,129,47,.3);
  }
  .price-card .badge {
    position: absolute; top: -13px; right: 1.4rem;
    background: var(--accent); color: #1a1006;
    font-family: 'IBM Plex Mono', monospace; font-size: .66rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    padding: .32rem .75rem; border-radius: 999px;
  }
  .price-card .tier-name { font-family: 'IBM Plex Mono', monospace; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }
  .price-card .tier-price { font-family: 'Fraunces', serif; font-size: 2rem; font-weight: 600; color: var(--ink); margin-top: .35rem; line-height: 1; }
  .price-card .tier-price small { font-family: 'IBM Plex Sans', sans-serif; font-size: .82rem; font-weight: 400; color: var(--ink-faint); }
  .price-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; }
  .price-card li { font-size: .87rem; color: var(--ink-soft); display: flex; gap: .55rem; align-items: baseline; }
  .price-card li::before { content: '—'; color: var(--pine); flex: none; }
  .price-card .per-msg {
    font-family: 'IBM Plex Mono', monospace; font-size: .74rem; color: var(--pine);
    margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--line-soft);
  }
  .pricing-flex-note {
    margin-top: 1.6rem; font-size: .86rem; color: var(--ink-faint); max-width: 760px;
  }
  .enterprise-strip {
    margin-top: 1.4rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
    background: var(--bg-raised); border: 1px solid var(--line-soft); border-radius: 16px;
    padding: 1.3rem 1.6rem;
  }
  .enterprise-strip .tier-name { display: block; margin-bottom: .3rem; }
  .enterprise-strip p { font-size: .88rem; max-width: 560px; }
  .price-callout {
    margin-top: 2.2rem;
    background: linear-gradient(135deg, var(--bg-raised-2), var(--bg-raised));
    border: 1px solid var(--line-soft); border-radius: 18px;
    padding: 2.1rem 2.2rem;
    display: grid; grid-template-columns: .95fr 1.15fr; gap: 2.4rem; align-items: center;
  }
  @media (max-width: 860px) { .price-callout { grid-template-columns: 1fr; gap: 1.6rem; } }
  .price-callout h3 { font-size: 1.35rem; line-height: 1.25; }
  .price-callout p { font-size: .9rem; margin-top: .8rem; }
  .price-compare-rows { display: flex; flex-direction: column; gap: .85rem; }
  .price-compare-row .top-line { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: .86rem; margin-bottom: .32rem; }
  .price-compare-row .who { font-family: 'IBM Plex Mono', monospace; color: var(--ink-soft); }
  .price-compare-row .val { font-family: 'IBM Plex Mono', monospace; font-weight: 600; color: var(--ink); }
  .price-compare-row.us .who, .price-compare-row.us .val { color: var(--pine); }
  .price-compare-bar { height: 9px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
  .price-compare-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--ink-faint); }
  .price-compare-row.us .price-compare-bar > span { background: var(--pine); }
  .price-callout .source-note { font-size: .74rem; color: var(--ink-faint); margin-top: 1rem; }

  /* competitive landscape */
  .comp-table-wrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: 16px; }
  table.comp-table { width: 100%; border-collapse: collapse; min-width: 720px; font-size: .88rem; }
  table.comp-table th, table.comp-table td { padding: .95rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line-soft); }
  table.comp-table th { font-family: 'IBM Plex Mono', monospace; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); font-weight: 500; background: var(--bg-raised); }
  table.comp-table td:first-child, table.comp-table th:first-child { position: sticky; left: 0; background: var(--bg); font-weight: 500; color: var(--ink); }
  table.comp-table th:first-child { background: var(--bg-raised); }
  table.comp-table tr:last-child td { border-bottom: none; }
  table.comp-table td.us { background: rgba(226,129,47,.07); }
  .chip { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; }
  .chip .d { width: 7px; height: 7px; border-radius: 50%; flex: none; }
  .chip.yes .d { background: var(--pine); }
  .chip.no .d { background: var(--bad); }
  .chip.part .d { background: var(--accent); }
  .comp-note { font-size: .84rem; margin-top: 1rem; color: var(--ink-faint); }
  .comp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 2.2rem; }
  @media (max-width: 860px) { .comp-cards { grid-template-columns: 1fr; } }
  .comp-card { border: 1px solid var(--line-soft); border-radius: 14px; padding: 1.4rem 1.4rem; }
  .comp-card .kind { font-family: 'IBM Plex Mono', monospace; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
  .comp-card h4 { font-family: 'IBM Plex Sans', sans-serif; font-size: 1rem; font-weight: 600; margin: .5rem 0; color: var(--ink); }
  .comp-card p { font-size: .87rem; }

  /* build story */
  .story { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
  @media (max-width: 860px) { .story { grid-template-columns: 1fr; gap: 2rem; } }
  .timeline { display: flex; flex-direction: column; gap: 1.5rem; }
  .timeline-item { display: flex; gap: 1rem; }
  .timeline-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-top: .5rem; flex: none; box-shadow: 0 0 0 3px var(--accent-soft); }
  .timeline-item h4 { font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: .98rem; margin: 0 0 .35rem; }
  .timeline-item p { font-size: .92rem; }
  .story-quote {
    background: var(--bg-raised); border-left: 3px solid var(--accent);
    border-radius: 0 14px 14px 0; padding: 1.7rem 1.8rem;
    font-family: 'Fraunces', serif; font-size: 1.25rem; line-height: 1.45; font-style: italic;
    color: var(--ink);
  }
  .story-quote cite { display: block; margin-top: 1.1rem; font-family: 'IBM Plex Mono', monospace; font-size: .76rem; font-style: normal; color: var(--ink-faint); letter-spacing: .04em; text-transform: uppercase; }

  /* channels */
  .channels { display: flex; gap: 1rem; flex-wrap: wrap; }
  .channel-pill {
    display: flex; align-items: center; gap: .6rem;
    background: var(--bg-raised); border: 1px solid var(--line-soft);
    border-radius: 999px; padding: .7rem 1.3rem .7rem 1rem;
    font-family: 'IBM Plex Mono', monospace; font-size: .84rem; color: var(--ink-soft);
  }
  .channel-pill .dot { width: 8px; height: 8px; border-radius: 50%; }
  .channel-pill.live .dot { background: var(--pine); }
  .channel-pill.soon .dot { background: var(--ink-faint); }
  .channel-pill .tag { font-size: .68rem; color: var(--ink-faint); }
  .channels-showcase { display: flex; gap: 2.4rem; align-items: center; margin-top: 1.8rem; flex-wrap: wrap; }
  .channels-showcase .channels { flex: 1; min-width: 240px; }
  .channels-shot {
    flex: none; width: 260px; border: 1px solid var(--line-soft); border-radius: 14px;
    overflow: hidden; background: var(--bg-raised); box-shadow: 0 20px 50px -30px rgba(0,0,0,.5);
  }
  .channels-shot img { display: block; width: 100%; height: auto; }
  .channels-shot figcaption { padding: .55rem .9rem; font-size: .78rem; color: var(--ink-faint); border-top: 1px solid var(--line-soft); }

  /* docs teaser */
  .docs-teaser {
    display: flex; gap: 2.4rem; align-items: center; justify-content: space-between;
    background: var(--bg-raised); border: 1px solid var(--line-soft); border-radius: 20px;
    padding: 2.2rem 2.4rem; flex-wrap: wrap;
  }
  .docs-teaser-topics { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
  .docs-teaser-topic {
    font-family: 'IBM Plex Mono', monospace; font-size: .78rem; color: var(--ink-soft);
    background: var(--bg-raised-2); border: 1px solid var(--line-soft); border-radius: 999px; padding: .4rem .9rem;
  }

  /* faq */
  .faq { display: flex; flex-direction: column; gap: .7rem; max-width: 760px; }
  .faq-item { border: 1px solid var(--line-soft); border-radius: 12px; background: var(--bg-raised); padding: 1.1rem 1.3rem; }
  .faq-item h4 { font-family: 'IBM Plex Sans', sans-serif; font-size: .96rem; font-weight: 600; color: var(--ink); margin: 0 0 .5rem; }
  .faq-item p { font-size: .89rem; }

  /* cta */
  .cta-band {
    background: linear-gradient(135deg, var(--bg-raised-2), var(--bg-raised));
    border: 1px solid var(--line-soft);
    border-radius: 22px;
    padding: 3.2rem 3rem;
    display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  }
  .cta-band h2 { font-size: 1.9rem; max-width: 460px; }
  .cta-band p { margin-top: .7rem; max-width: 420px; }

  footer { border-top: 1px solid var(--line-soft); padding: 2.4rem 0; }
  .footer-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
  footer .wordmark { font-size: 1rem; }
  footer .fine { font-family: 'IBM Plex Mono', monospace; font-size: .76rem; color: var(--ink-faint); }
  footer .footer-links { display: flex; gap: 1.1rem; flex-wrap: wrap; }
  footer .footer-links a { font-family: 'IBM Plex Mono', monospace; font-size: .76rem; color: var(--ink-faint); text-decoration: none; }
  footer .footer-links a:hover { color: var(--ink-soft); }

  /* verticals — "Решения по отраслям" cross-link cards (главный лендинг
     -> /salons, /courses, /tutor) и обратная ссылка-подвал на каждой из
     трёх страниц (docs/38-vertical-landings.md, Фаза 1) */
  .vertical-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
  @media (max-width: 860px) { .vertical-grid { grid-template-columns: 1fr; } }
  .vertical-card {
    background: var(--bg-raised); border: 1px solid var(--line-soft); border-radius: 16px;
    padding: 1.7rem 1.6rem; display: flex; flex-direction: column; gap: .8rem;
    text-decoration: none; transition: border-color .15s;
  }
  .vertical-card:hover { border-color: var(--pine); }
  .vertical-card .kind { font-family: 'IBM Plex Mono', monospace; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-bright); }
  .vertical-card h3 { font-size: 1.18rem; color: var(--ink); }
  .vertical-card p { font-size: .89rem; }
  .vertical-card .go { margin-top: auto; font-family: 'IBM Plex Mono', monospace; font-size: .8rem; color: var(--pine); }

  /* documentation — публичная документация о продукте (docs/40-
     documentation-platform.md), скрыта от индексации, но в общем
     дизайн-языке лендинга: тёмный сайдбар-дерево + область контента,
     дерево страниц приходит с /api/docs/tree, тело — рендерится из
     markdown маленькой ручной функцией (см. documentation.html). */
  .docs-shell { display: flex; gap: 2.2rem; align-items: flex-start; padding: 2.5rem 0 5rem; }
  @media (max-width: 860px) { .docs-shell { flex-direction: column; } }
  .docs-sidebar {
    flex: none; width: 260px; position: sticky; top: 90px;
    display: flex; flex-direction: column; gap: .2rem;
    max-height: calc(100vh - 120px); overflow-y: auto;
  }
  @media (max-width: 860px) { .docs-sidebar { width: 100%; position: static; max-height: none; } }
  .docs-tree-link {
    font-family: 'IBM Plex Mono', monospace; font-size: .82rem; color: var(--ink-faint);
    text-decoration: none; padding: .4rem .6rem; border-radius: 8px;
  }
  .docs-tree-link:hover { color: var(--ink-soft); background: var(--bg-raised); }
  .docs-tree-link.active { color: var(--accent-bright); background: var(--accent-soft); }
  .docs-tree-link.is-parent { color: var(--ink); font-weight: 600; margin-top: .8rem; }
  .docs-tree-link.is-child { padding-left: 1.4rem; }
  .docs-content {
    flex: 1; min-width: 0; max-width: 720px;
    background: var(--bg-raised); border: 1px solid var(--line-soft); border-radius: 18px;
    padding: 2.4rem 2.6rem;
  }
  @media (max-width: 720px) { .docs-content { padding: 1.6rem 1.4rem; } }
  .docs-content h1 { font-size: 1.9rem; margin-bottom: 1rem; }
  .docs-content h2 { font-size: 1.35rem; margin: 1.8rem 0 .7rem; }
  .docs-content h3 { font-size: 1.1rem; margin: 1.4rem 0 .5rem; font-family: 'IBM Plex Sans', sans-serif; }
  .docs-content p { margin: .8rem 0; font-size: .96rem; line-height: 1.7; }
  .docs-content ul, .docs-content ol { padding-left: 1.3rem; font-size: .96rem; line-height: 1.7; color: var(--ink-soft); }
  .docs-content li { margin: .3rem 0; }
  .docs-content code { font-family: 'IBM Plex Mono', monospace; font-size: .88em; background: var(--bg-raised-2); padding: .15rem .4rem; border-radius: 5px; }
  .docs-content pre { background: var(--bg-raised-2); border: 1px solid var(--line-soft); border-radius: 10px; padding: 1rem 1.1rem; overflow-x: auto; }
  .docs-content pre code { background: none; padding: 0; }
  .docs-content a { color: var(--pine); text-decoration: underline; text-decoration-color: var(--line); }
  .docs-content strong { color: var(--ink); }
  .docs-empty { color: var(--ink-faint); font-size: .92rem; }
  .docs-figure {
    margin: 1.4rem 0; padding: 0; border: 1px solid var(--line-soft);
    border-radius: 12px; overflow: hidden; background: var(--bg-raised-2);
  }
  .docs-figure img { display: block; width: 100%; height: auto; }
  .docs-figure figcaption {
    padding: .6rem 1rem; font-size: .82rem; color: var(--ink-faint);
    border-top: 1px solid var(--line-soft); text-align: center;
  }