/* Кейсы GEO/AEO — кит стилей, сведён из трёх макетов (build_css.py). Классы и переменные в неймспейсе case-, чтобы не пересекаться с темой. */ .case-wrap{--case-green:#16A34A; --case-green-dk:#145E30; --case-green-tint:#eef8f1; --case-green-line:#bfe6cd; --case-ink:#161b18; --case-ink-2:#33403a; --case-mute:#7c857f; --case-line:#e4e8e5; --case-line-soft:#eef1ef; --case-bg:#ffffff; --case-panel:#f7f9f8; --case-font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;} .case-wrap *{box-sizing:border-box} .case-wrap{font-family:var(--case-font,inherit);color:var(--case-ink-2);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased} {margin:0;padding:0} .case-accent{height:4px;background:linear-gradient(90deg,var(--case-green),#43d17f)} .case-wrap a{color:var(--case-green-dk)} .case-wrap strong{color:var(--case-ink)} .case-wrap h1, .case-wrap h2, .case-wrap h3{color:var(--case-ink);line-height:1.22;letter-spacing:-.01em} .case-wrap{max-width:1440px;margin:0 auto;padding:0 52px} .case-kicker{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 0;border-bottom:1px solid var(--case-line);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--case-mute);font-weight:700} .case-kicker a{color:var(--case-mute);text-decoration:none} .case-kicker .case-k-r{color:var(--case-green-dk)} .case-chead{padding:40px 0 30px;border-bottom:1px solid var(--case-line)} .case-chead .case-rel{font-size:14px;font-weight:800;color:var(--case-green-dk);letter-spacing:.02em;margin-bottom:14px} .case-chead h1{font-size:clamp(28px,4.2vw,44px);margin:0 0 18px;font-weight:800} .case-chead h1 em{font-style:normal;color:var(--case-green)} .case-chead .case-result{font-size:19px;color:var(--case-ink-2);max-width:820px;margin:0 0 20px} .case-chead .case-result b{color:var(--case-ink)} .case-chead .case-meta{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13.5px;color:var(--case-mute)} .case-chead .case-meta b{color:var(--case-ink-2);font-weight:700} .case-layout{display:grid;grid-template-columns:236px minmax(0,1fr);gap:64px;align-items:start;padding:38px 0 10px} .case-rail{position:sticky;top:26px;font-size:14px} .case-toc-t{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--case-mute);font-weight:800;margin:0 0 10px} .case-toc{list-style:none;margin:0 0 26px;padding:0} .case-toc a{display:flex;gap:10px;padding:6px 0;color:var(--case-ink-2);text-decoration:none;border-bottom:1px solid var(--case-line-soft)} .case-toc a:hover{color:var(--case-green-dk)} .case-toc a .case-tn{color:var(--case-green);font-weight:800;font-variant-numeric:tabular-nums} .case-qf{background:var(--case-panel);border:1px solid var(--case-line);border-radius:14px;padding:16px 18px} .case-qf h4{margin:0 0 12px;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--case-green-dk)} .case-qf dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:9px 12px} .case-qf dt{color:var(--case-mute);font-size:13px} .case-qf dd{margin:0;font-weight:800;color:var(--case-ink);font-size:14px;text-align:right;font-variant-numeric:tabular-nums} .case-article{max-width:800px;min-width:0} .case-lead{font-size:21px;line-height:1.6;color:var(--case-ink);border-left:3px solid var(--case-green);padding:2px 0 2px 22px;margin:0 0 30px} .case-article h2{font-size:24px;margin:44px 0 14px;font-weight:800} .case-article h2 .case-n{color:var(--case-green);font-weight:800;margin-right:8px;font-variant-numeric:tabular-nums} .case-article h3{font-size:17px;margin:26px 0 8px} .case-article p{margin:0 0 16px} .case-article ul, .case-article ol{margin:0 0 16px;padding-left:22px} .case-article li{margin:6px 0} .case-article code{background:#eef2f0;border-radius:5px;padding:1px 6px;font-size:.86em;word-break:break-word} .case-facts{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--case-line);border-radius:16px;overflow:hidden;margin:8px 0 6px;background:#fff} .case-facts .case-f{padding:18px 18px;border-right:1px solid var(--case-line-soft)} .case-facts .case-f:last-child{border-right:0} .case-facts .case-f .case-fl{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--case-mute);font-weight:700;margin-bottom:7px} .case-facts .case-f .case-fv{font-size:26px;font-weight:800;color:var(--case-ink);line-height:1;font-variant-numeric:tabular-nums} .case-facts .case-f .case-fv small{font-size:12px;font-weight:700;color:var(--case-mute);display:block;margin-top:5px;letter-spacing:0;text-transform:none} @media(max-width:760px){ .case-facts{grid-template-columns:repeat(2,1fr)} .case-facts .case-f{border-bottom:1px solid var(--case-line-soft)} .case-facts .case-f:nth-child(2n){border-right:0} .case-facts .case-f:last-child{grid-column:1/-1;border-right:0} } .case-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.05em;text-transform:uppercase;font-weight:800;padding:4px 10px;border-radius:999px;margin-bottom:12px} .case-tag--m{background:var(--case-green-tint);color:var(--case-green-dk)} .case-tag--o{background:#eef2f6;color:#3c5063} .case-tag--h{background:#fbf6ea;color:#8a6d1e} .case-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor} .case-hypo{border:1px dashed #c7cdc9;background:#fbfcfb;border-radius:12px;padding:18px 20px;margin:18px 0} .case-hypo p:last-child{margin-bottom:0} .case-hypo .case-big{font-size:18px;color:var(--case-ink);font-weight:600;line-height:1.5} .case-evidence{border:1px solid var(--case-green-line);border-left:4px solid var(--case-green);background:#f6fbf8;border-radius:12px;padding:18px 20px;margin:22px 0} .case-evidence-h{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--case-green-dk);font-weight:800;margin-bottom:12px;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center} .case-evidence-h .case-q{color:var(--case-ink-2);text-transform:none;letter-spacing:0;font-weight:600} .case-evidence-cap{font-size:12.5px;color:var(--case-mute);margin-top:10px} .case-wrap .aio{border:1px solid #dadce0;border-radius:14px;padding:18px 20px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.05)} .case-wrap .aio-h{display:flex;align-items:center;gap:9px;font-weight:600;color:#4285f4;font-size:14.5px;margin-bottom:10px} .case-wrap .aio-h .g{width:19px;height:19px;background:conic-gradient(from 180deg,#4285f4,#9b72cb,#d96570,#4285f4);border-radius:50%;flex:0 0 auto} .case-wrap .aio-body{color:#202124;font-size:15px;line-height:1.65} .case-wrap .aio-body .hl{background:#d2e3fc;border-radius:3px;padding:0 2px} .case-wrap .aio ul{margin:10px 0 0;padding:0;list-style:none} .case-wrap .aio ul li{padding:8px 0;border-top:1px solid #f1f3f4} .case-wrap .src{display:inline-flex;align-items:center;gap:5px;background:#f1f3f4;border-radius:8px;padding:2px 9px;font-size:12px;color:#5f6368;font-weight:600;margin:0 2px;vertical-align:middle} .case-wrap .src::before{content:"";width:13px;height:13px;border-radius:50%;background:#f5b301;flex:0 0 auto} .case-wrap .src.win::before{background:var(--case-green)} .case-wrap .imgnote{font-size:12.5px;color:var(--case-mute);border:1px dashed var(--case-line);border-radius:8px;padding:9px 12px;margin-top:12px} .case-qtab{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--case-line);border-radius:14px;overflow:hidden;font-size:14.5px;margin:6px 0} .case-qtab thead th{background:#f2faf5;color:#37503f;font-size:11px;letter-spacing:.04em;text-transform:uppercase;font-weight:700;text-align:left;padding:12px 16px;border-bottom:1px solid var(--case-line)} .case-qtab thead th.case-num{text-align:center} .case-qtab td{padding:12px 16px;border-bottom:1px solid var(--case-line-soft);vertical-align:middle} .case-qtab tr:last-child td{border-bottom:0} .case-qtab tr:nth-child(even) td{background:#fafcfb} .case-qtab td.case-num{text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap} .case-qtab .case-pos{display:inline-block;min-width:44px;padding:4px 10px;border-radius:999px;font-weight:800;font-size:13.5px;background:#edf0ee;color:#3f4b44} .case-qtab .case-pos--top{background:var(--case-green);color:#fff} @media(max-width:640px){ .case-qtab thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .case-qtab, .case-qtab tbody, .case-qtab tr, .case-qtab td{display:block;width:100%} .case-qtab tr{border:1px solid var(--case-line);border-radius:12px;margin:0 0 12px;overflow:hidden} .case-qtab tr:nth-child(even) td{background:#fff} .case-qtab td{display:flex;justify-content:space-between;gap:14px;text-align:right;border-bottom:1px solid var(--case-line-soft)} .case-qtab td.case-qcell{background:#f2faf5;text-align:left;font-weight:600} .case-qtab td[data-label]::before{content:attr(data-label);color:var(--case-mute);font-size:12px;text-transform:uppercase;letter-spacing:.03em;font-weight:700;text-align:left} } .case-method{background:var(--case-panel);border:1px solid var(--case-line);border-radius:16px;padding:24px 26px;margin:34px 0 0} .case-method h3{margin:0 0 14px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--case-green-dk)} .case-method dl{display:grid;grid-template-columns:180px 1fr;gap:10px 20px;margin:0} .case-method dt{color:var(--case-mute);font-size:13px;font-weight:700} .case-method dd{margin:0;font-size:14.5px;color:var(--case-ink-2);line-height:1.55} @media(max-width:560px){ .case-method dl{grid-template-columns:1fr;gap:2px 0} .case-method dd{margin:0 0 12px} } .case-endcta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin:26px 0 0;padding:24px 0 8px} .case-endcta .case-t{font-size:16px;color:var(--case-ink-2);max-width:560px} .case-endcta a.case-btn{display:inline-block;background:var(--case-green);color:#fff;font-weight:800;text-decoration:none;padding:13px 22px;border-radius:10px;white-space:nowrap} .case-endcta a.case-btn:hover{background:var(--case-green-dk)} .case-foot{border-top:1px solid var(--case-line);margin-top:34px;padding:22px 0 50px;font-size:12.5px;color:var(--case-mute)} @media(max-width:920px){ .case-wrap{padding:0 20px} .case-layout{grid-template-columns:1fr;gap:0;padding-top:26px} .case-rail{position:static;margin-bottom:30px} .case-toc, .case-toc-t{display:none} .case-article{max-width:none} } .case-toc li{margin:0} .case-qtab .case-mut{color:var(--case-mute)} .case-qtab .case-dash{color:#c2c9c3} .case-wrap .chart{display:flex;gap:20px;padding:34px 6px 0;margin:6px 0 4px} .case-wrap .chart .col{flex:1;display:flex;flex-direction:column;min-width:0} .case-wrap .chart .bar-area{height:230px;display:flex;align-items:flex-end;justify-content:center;border-bottom:2px solid #d7ddd8} .case-wrap .chart .bar{width:70%;max-width:88px;background:linear-gradient(180deg,#22C55E,var(--case-green));border-radius:8px 8px 0 0;position:relative;min-height:6px;box-shadow:0 3px 10px rgba(22,163,74,.2)} .case-wrap .chart .bar .v{position:absolute;top:-26px;left:50%;transform:translateX(-50%);font-weight:800;font-size:15px;color:var(--case-ink);white-space:nowrap} .case-wrap .chart .lb{padding-top:9px;text-align:center;font-size:13px;color:var(--case-mute);font-weight:600} @media(max-width:560px){ .case-wrap .chart .bar-area{height:170px} .case-wrap .chart{gap:12px} } /* Хлебные крошки на страницах кейсов: geo-стили сюда не подключаются (на лонгриде нет ни одного geo-блока), поэтому даём свои — в палитре кейса. */ .case-wrap .geo-breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--case-mute);margin:0 0 2px} .case-wrap .geo-breadcrumbs__item{color:var(--case-mute);text-decoration:none} .case-wrap .geo-breadcrumbs__item:hover{color:var(--case-green-dk)} .case-wrap .geo-breadcrumbs__item--current{opacity:.72;max-width:60ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .case-wrap .geo-breadcrumbs__sep{color:var(--case-mute);opacity:.5;font-weight:400} @media(max-width:920px){.case-wrap .geo-breadcrumbs{font-size:11px;gap:6px}} /* CTA в конце кейса — это