/* ============================================================
   pawetta — page & section components
   ============================================================ */

/* ── Hero (index) ───────────────────────────────────────── */
.hero { padding-block: clamp(40px, 6vw, 64px) clamp(48px, 7vw, 76px); position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(32px, 6vw, 64px); align-items: center; }
.hero h1 { font-size: clamp(32px, 5.5vw, 58px); line-height: 1.08; letter-spacing: -0.02em; margin: 22px 0 24px; }
.hero h1 em { font-style: normal; color: var(--terracotta); font-weight: 600; }
.hero .lead { max-width: 30em; }
.hero-cta { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.hero-proof { display: flex; gap: clamp(20px, 4vw, 34px); margin-top: 44px; flex-wrap: wrap; }
.hero-proof .metric .num { font-size: clamp(28px, 4vw, 36px); }
.hero-proof .metric .lbl { margin-top: 4px; font-size: 13px; }
.hero-proof .num .cu { font-variant-numeric: tabular-nums; display: inline-block; text-align: right; }

.portrait-wrap { position: relative; max-width: 420px; margin: 0 auto; width: 100%; }
.portrait-wrap::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-2xl);
  border: 1.5px solid var(--terracotta); transform: translate(16px, 16px);
  opacity: 0.55; z-index: 0; pointer-events: none;
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
}
.portrait-wrap:hover::before { transform: translate(10px, 10px); opacity: 0.85; }
.portrait {
  position: relative; z-index: 1;
  border-radius: var(--r-2xl); overflow: hidden;
  box-shadow: var(--shadow-ring), var(--shadow-lift);
  background: var(--warm-sand); aspect-ratio: 4/5;
  transition: transform 0.4s var(--ease);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.02); transition: filter 0.5s var(--ease); }
.portrait::after {
  content: ""; position: absolute; inset: 0; background: var(--terracotta);
  mix-blend-mode: color; opacity: 0; transition: opacity 0.5s var(--ease); pointer-events: none;
}
.portrait-wrap:hover .portrait img { filter: grayscale(0.35) contrast(1.05); }
.portrait-wrap:hover .portrait::after { opacity: 0.20; }

/* inline-grid + скрытые сайзеры: ширина по самому длинному слову, подмена не двигает строку */
.rotator { position: relative; display: inline-grid; color: var(--terracotta); }
.rotator > * { grid-area: 1 / 1; }
.rot-sizer { visibility: hidden; pointer-events: none; }
.rotator .w { display: inline-block; transition: opacity 0.32s var(--ease), transform 0.32s var(--ease); }
.rotator.swap .w { opacity: 0; transform: translateY(-0.32em); }
.rotator .w { position: relative; }
.rotator .w::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.06em; height: 2px;
  background: var(--terracotta); opacity: 0.32; border-radius: 2px;
}

/* ── Clients marquee ────────────────────────────────────── */
.clients { padding: clamp(20px, 3vw, 30px) 0; }
.marquee { display: flex; align-items: center; gap: clamp(12px, 2vw, 22px); }
.marquee .lbl { font-size: 13px; color: var(--stone); white-space: nowrap; flex-shrink: 0; }
.mq-viewport {
  flex: 1; overflow: hidden; min-width: 0;
  -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.mq-track { display: flex; width: max-content; animation: mqscroll 110s linear infinite; }
.marquee:hover .mq-track { animation-play-state: paused; }
.mq-row { display: flex; align-items: center; gap: 14px; padding-right: 14px; }
.client {
  font-size: clamp(16px, 2.5vw, 21px); font-weight: 600; color: var(--charcoal);
  opacity: 0.58; transition: opacity var(--t), color var(--t);
  white-space: nowrap; letter-spacing: -0.01em;
}
.client:hover { opacity: 1; color: var(--near-black); }
.clients .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ring-deep); flex-shrink: 0; }
@keyframes mqscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Services cards ─────────────────────────────────────── */
.svc { display: flex; flex-direction: column; gap: 14px; min-height: 200px; }
.svc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.svc-ico { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--tint-sand); display: grid; place-items: center; color: var(--terracotta); flex-shrink: 0; }
.svc-ico svg { width: 21px; height: 21px; }
.svc h3 { font-size: 21px; line-height: 1.2; }
.svc p { font-size: 15px; color: var(--olive); line-height: 1.55; flex: 1; }
.svc .price { font-family: var(--mono); font-size: 13px; color: var(--charcoal); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.svc .price .arrow { color: var(--terracotta); opacity: 0; transform: translateX(-4px); transition: all var(--t); margin-left: auto; }
.card--link.svc:hover .price .arrow,
.card--link:hover .svc .price .arrow { opacity: 1; transform: none; }

/* ── Cases ──────────────────────────────────────────────── */
.case-feat { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); }
.case-proof {
  display: flex; gap: clamp(16px, 3vw, 52px); flex-wrap: wrap;
  padding: 24px 0 26px; margin-bottom: 30px;
  border-top: 1px solid var(--border-deep); border-bottom: 1px solid var(--border-deep);
}
.case-proof .metric .num { font-size: clamp(28px, 4.5vw, 40px); }
.case-proof .metric .lbl { margin-top: 6px; }
.case-card { display: flex; flex-direction: column; gap: 18px; padding: 0; overflow: hidden; }
.case-thumb { aspect-ratio: 16/8; background: var(--near-black); position: relative; overflow: hidden; display: grid; place-items: center; }
.case-thumb .glyph { position: absolute; inset: 0; opacity: 0.5; width: 100%; height: 100%; }
.case-thumb .big { position: relative; font-family: var(--serif); font-size: clamp(32px, 5vw, 52px); font-weight: 500; color: var(--ivory); letter-spacing: -0.02em; text-align: center; padding: 0 12px; }
.case-thumb .big .unit { color: var(--coral); font-size: clamp(20px, 3vw, 32px); }
.case-body { padding: 0 clamp(20px, 3vw, 28px) clamp(20px, 3vw, 28px); display: flex; flex-direction: column; gap: 12px; }
.case-body .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.case-body h3 { font-size: clamp(19px, 2.5vw, 23px); line-height: 1.2; }
.case-body p { font-size: 15px; color: var(--olive); }
.case-stats { display: flex; gap: clamp(16px, 3vw, 26px); margin-top: 4px; flex-wrap: wrap; }
.case-stats .s .v { font-family: var(--mono); font-size: 18px; font-weight: 500; color: var(--near-black); }
.case-stats .s .k { font-size: 12px; color: var(--stone); }
.case-thumb .glyph path:first-child { stroke-dasharray: 620; stroke-dashoffset: 620; }
html.js .reveal.in .case-thumb .glyph path:first-child { animation: chartDraw 1.5s var(--ease) 0.15s forwards; }
@keyframes chartDraw { to { stroke-dashoffset: 0; } }

.section-cases .sec-head--hero h2 { font-size: clamp(28px, 5vw, 46px); letter-spacing: -0.025em; }

/* ── Tools ──────────────────────────────────────────────── */
.tool { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.tool-head { display: flex; align-items: center; gap: 11px; }
.tool-head .ico { width: 34px; height: 34px; border-radius: var(--r-md); background: var(--near-black); color: var(--coral); display: grid; place-items: center; flex-shrink: 0; }
.tool-head .ico svg { width: 18px; height: 18px; }
.tool-head h3 { font-size: 18px; }
.tool-screen { background: var(--parchment); border-radius: var(--r-md); padding: 16px; box-shadow: inset 0 0 0 1px var(--border-deep); }
.rng { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 3px; background: var(--warm-sand); margin: 9px 0; outline: none; cursor: pointer; }
.rng::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--ivory); box-shadow: var(--shadow-ring), 0 1px 3px rgba(0,0,0,0.2); cursor: pointer; border: none; }
.rng::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--ivory); box-shadow: var(--shadow-ring); cursor: pointer; border: none; }
.tool-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; padding: 6px 0; }
.tool-row + .tool-row { border-top: 1px dashed var(--border-deep); }
.tool-row .k { color: var(--stone); }
.tool-row .v { font-family: var(--mono); color: var(--charcoal); text-align: right; }
.tool-result { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border-deep); flex-wrap: wrap; }
.tool-result .big { font-family: var(--serif); font-size: clamp(24px, 3.5vw, 30px); color: var(--near-black); }
.tool-result .big.pos { color: var(--green); }
.slider { height: 5px; background: var(--warm-sand); border-radius: 3px; position: relative; margin: 9px 0; }
.slider .fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--terracotta); border-radius: 3px; }
.slider .knob { position: absolute; top: 50%; width: 15px; height: 15px; border-radius: 50%; background: var(--ivory); box-shadow: var(--shadow-ring), 0 1px 3px rgba(0,0,0,0.18); transform: translate(-50%,-50%); }

/* ── Blog rows (index) ──────────────────────────────────── */
.post-row {
  display: grid; grid-template-columns: 64px 1fr auto; gap: clamp(12px, 2vw, 20px);
  align-items: center; padding: clamp(16px, 2.5vw, 20px) 8px;
  border-bottom: 1px solid var(--border-deep); transition: background var(--t);
  cursor: pointer; border-radius: var(--r-md);
}
.post-row:hover { background: var(--ivory); }
.post-date { font-family: var(--mono); font-size: 12px; color: var(--stone); text-align: center; line-height: 1.3; }
.post-date b { display: block; font-size: 22px; color: var(--charcoal); font-weight: 500; }
.post-main { min-width: 0; }
.post-main h3 { font-size: clamp(17px, 2.2vw, 20px); line-height: 1.25; transition: color var(--t); }
.post-row:hover .post-main h3 { color: var(--terracotta); }
.post-main .ex { font-size: 14px; color: var(--olive); margin-top: 4px; }
.post-side { text-align: right; flex-shrink: 0; }
.post-tags { display: flex; gap: 7px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.post-read { font-size: 13px; color: var(--stone); font-family: var(--mono); white-space: nowrap; margin-top: 8px; }

/* ── Courses ────────────────────────────────────────────── */
.course { padding: 0; overflow: hidden; display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.course-top { padding: 22px 24px 0; }
.course-cover {
  height: 118px; margin: 0; border-radius: 0;
  background: var(--tint-terra); position: relative; overflow: hidden;
  display: grid; place-items: center;
  border-bottom: 1px solid var(--border-deep);
}
.course-cover.g2 { background: var(--tint-green); }
.course-cover.g3 { background: var(--warm-sand); }
.course-cover .n {
  font-family: var(--serif); font-size: clamp(52px, 8vw, 72px);
  color: rgba(20,20,19,0.11); font-weight: 600; line-height: 1;
}
.course-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.course-badge {
  position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 5px;
  background: var(--terracotta); color: var(--ivory); font-family: var(--mono);
  font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
  padding: 5px 10px; border-radius: 999px; box-shadow: var(--shadow-whisper);
}
.course-badge svg { width: 12px; height: 12px; }
.course-badge--free { background: var(--near-black); }
.course--pro:hover { box-shadow: var(--shadow-lift), 0 0 0 1.5px var(--terracotta); }
.course-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border-deep);
  flex-wrap: wrap;
}
.course-progress {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border-deep);
}
.course-progress .muted { font-size: 12px; line-height: 1.35; }
.course-price { font-family: var(--mono); font-size: 16px; font-weight: 500; color: var(--terracotta-d); }
.course-result { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--green); font-weight: 500; text-align: right; }
.course-result svg { width: 14px; height: 14px; flex-shrink: 0; }
.course-body h3 { font-size: 20px; line-height: 1.22; margin: 0; }
.course-body p { font-size: 14px; color: var(--olive); line-height: 1.55; margin: 0; flex: 1; }
.course-meta { display: flex; align-items: center; gap: 10px 14px; font-size: 13px; color: var(--stone); flex-wrap: wrap; }
.course-meta .d { width: 3px; height: 3px; border-radius: 50%; background: var(--ring-deep); flex-shrink: 0; }
.progress { height: 5px; background: var(--warm-sand); border-radius: 3px; overflow: hidden; }
.progress .bar { height: 100%; background: var(--terracotta); border-radius: 3px; }
.courses-catalog { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); align-items: stretch; }
.courses-catalog.is-free { grid-template-columns: minmax(0, 420px); justify-content: center; margin-inline: auto; }
.courses-catalog.is-pro { grid-template-columns: repeat(2, 1fr); max-width: calc(2 * var(--card-max, 360px) + var(--grid-gap)); margin-inline: auto; }
.card--link.course:hover .course-foot .course-cta,
.card--link.course:hover .course-price { color: var(--terracotta); }
.course-cta {
  font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--charcoal);
  display: inline-flex; align-items: center; gap: 6px; transition: color var(--t);
}

/* ── About ──────────────────────────────────────────────── */
.about-band { background: var(--near-black); }
.about-band .eyebrow { color: var(--warm-silver); }
.about-band .eyebrow::before { background: var(--coral); }
.about-band h2 { color: var(--ivory); }
.about-band p { color: var(--warm-silver); }
.about-band .about-grid p { color: var(--warm-silver); }
.about-band .about-photo { box-shadow: 0 0 0 1px rgba(255,255,255,0.08), var(--shadow-lift); background: var(--dark-surface); }
.about-band .about-photo img { filter: grayscale(1) contrast(1.06); }
.about-band .chip { background: var(--dark-surface); color: var(--warm-silver); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09); }
.about-band .chip--dot::before { background: var(--coral); }
.about-band .sec-head .tlink { color: var(--warm-silver); }
.about-band .sec-head .tlink:hover { color: var(--ivory); }
.about-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 56px); align-items: center; }
.about-photo { border-radius: var(--r-2xl); overflow: hidden; aspect-ratio: 1/1; box-shadow: var(--shadow-ring); background: var(--warm-sand); max-width: 360px; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.about-grid h2 { font-size: clamp(26px, 4vw, 38px); margin-bottom: 18px; }
.about-grid p { font-size: 17px; color: var(--olive); margin-bottom: 14px; }
.about-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

/* ── Contact ────────────────────────────────────────────── */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 56px); align-items: center; }
.contact-l h2 { font-size: clamp(26px, 4vw, 38px); line-height: 1.1; letter-spacing: -0.02em; margin: 18px 0 16px; }
.contact-l h2 .accent { color: var(--terracotta); }
.contact-l p { font-size: 17px; color: var(--olive); max-width: 32em; }
.contact-l .eyebrow .av-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); position: relative; }
.contact-l .eyebrow .av-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid var(--green); opacity: 0.5; animation: ping 2.4s var(--ease) infinite;
}
@keyframes ping { 0%{transform:scale(0.6);opacity:0.6} 80%,100%{transform:scale(1.5);opacity:0} }
.contact-l .eyebrow::before { display: none; }
.contact-meta { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.contact-meta span { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--charcoal); }
.contact-meta svg { width: 17px; height: 17px; color: var(--stone); flex-shrink: 0; }
.contact-r { display: flex; flex-direction: column; gap: 12px; }
.ccard { display: flex; align-items: center; gap: 15px; padding: 18px 20px; background: var(--ivory); border-radius: var(--r-lg); box-shadow: var(--shadow-ring); transition: box-shadow var(--t), transform var(--t); }
.ccard:hover { box-shadow: var(--shadow-lift), 0 0 0 1px var(--ring-deep); transform: translateY(-2px); }
.ccard .ci { width: 46px; height: 46px; border-radius: 12px; background: var(--terracotta); color: var(--ivory); display: grid; place-items: center; flex-shrink: 0; }
.ccard .ci svg { width: 23px; height: 23px; }
.ccard .ci--mail { background: var(--near-black); }
.ccard .ci--ch { background: var(--warm-sand); color: var(--terracotta); }
.ccard .ct { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ccard .cn { font-size: 16px; font-weight: 600; color: var(--near-black); }
.ccard .cd { font-size: 13.5px; color: var(--stone); }
.ccard .carr { width: 18px; height: 18px; color: var(--stone); margin-left: auto; flex-shrink: 0; transition: transform var(--t), color var(--t); }
.ccard:hover .carr { color: var(--terracotta); transform: translate(2px, -2px); }

/* ── Uslugi page ────────────────────────────────────────── */
.svc-page { display: flex; flex-direction: column; gap: 18px; }
.svc-row { display: grid; grid-template-columns: 1fr auto; gap: clamp(16px, 3vw, 28px); align-items: start; padding: clamp(22px, 3vw, 30px); scroll-margin-top: calc(var(--nav-h) + 16px); }
.svc-row .sl h3 { font-size: clamp(20px, 2.5vw, 24px); margin-bottom: 8px; }
.svc-row .sl > p { font-size: 16px; color: var(--olive); max-width: 42em; margin-bottom: 16px; }
.svc-incl { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.svc-incl span { position: relative; padding-left: 22px; font-size: 14.5px; color: var(--charcoal); }
.svc-incl span::before { content: ""; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--terracotta); }
.svc-row .sr { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; min-width: 140px; flex-shrink: 0; }
.svc-row .price { font-family: var(--mono); font-size: clamp(18px, 2.5vw, 22px); font-weight: 500; color: var(--near-black); white-space: nowrap; }
.svc-row .price small { display: block; font-size: 12px; color: var(--stone); font-weight: 400; margin-top: 2px; }
.proc { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); counter-reset: p; }
.proc .step {
  counter-increment: p;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 3vw, 28px);
  border-radius: var(--r-xl);
  background: var(--ivory);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
  height: 100%;
}
.proc .step .n { width: 44px; height: 44px; border-radius: 50%; background: var(--tint-terra); color: var(--terracotta); display: grid; place-items: center; font-family: var(--mono); font-size: 17px; font-weight: 500; margin-bottom: 14px; flex-shrink: 0; }
.proc .step .n::before { content: counter(p); }
.proc .step h3 { font-size: 19px; margin-bottom: 8px; line-height: 1.2; }
.proc .step p { font-size: 15px; color: var(--olive); line-height: 1.55; margin: 0; flex: 1; }

/* ── Blog page ──────────────────────────────────────────── */
.feat { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 0; overflow: hidden; padding: 0; }
.feat .cover { background: var(--near-black); position: relative; min-height: 280px; display: grid; place-items: center; overflow: hidden; }
.feat .cover .big { font-family: var(--mono); font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--coral); position: relative; z-index: 1; padding: 0 16px; text-align: center; }
.feat .cover svg { position: absolute; inset: 0; opacity: 0.5; width: 100%; height: 100%; }
.feat .fb { padding: clamp(24px, 4vw, 38px) clamp(24px, 4vw, 40px); display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.feat .fb h2 { font-size: clamp(22px, 3vw, 30px); line-height: 1.15; }
.feat .fb p { font-size: 16px; color: var(--olive); }
.bgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.post { display: flex; flex-direction: column; gap: 13px; padding: 26px; }
.post .meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--stone); font-family: var(--mono); flex-wrap: wrap; }
.post h3 { font-size: 20px; line-height: 1.25; transition: color var(--t); }
.post:hover h3 { color: var(--terracotta); }
.post p { font-size: 14.5px; color: var(--olive); flex: 1; }
.post .more { font-size: 13.5px; color: var(--terracotta); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.post .more svg { width: 14px; height: 14px; transition: transform var(--t); }
.post:hover .more svg { transform: translateX(3px); }
.callout--dark { background: var(--near-black); }
.callout--dark .ico { color: var(--coral); }
.callout--dark p { color: var(--warm-silver); }
.callout--dark a { color: var(--coral); }

/* ── Video-cards (blog with видео) ──────────────────────── */
.vcard {
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
  transition: transform var(--t), box-shadow var(--t);
}
.vcard--feat {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 0;
  margin: 0 0 28px;
}
.vthumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: linear-gradient(135deg, #1f1f1d, #30302e);
  --vthumb-fade-1: rgba(0,0,0,0.05);
  --vthumb-fade-2: rgba(0,0,0,0.45);
}
.vcard--feat .vthumb { aspect-ratio: auto; height: 100%; min-height: 280px; }
.vthumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease), filter var(--t);
  filter: saturate(1.05);
}
/* затемняющий градиент — только на featured-карточке, где поверх обложки лежат
   бейдж и кнопка play; на обычных карточках обложки остаются чистыми */
.vcard--feat .vthumb::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}
.vcard:hover .vthumb img { transform: scale(1.04); filter: saturate(1.15); }
.vplay {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(56px, 8vw, 78px); height: clamp(56px, 8vw, 78px);
  border-radius: 50%;
  background: rgba(255,255,255,0.96);
  color: var(--terracotta);
  display: grid; place-items: center;
  box-shadow: 0 10px 36px rgba(0,0,0,0.32), 0 0 0 0 rgba(201,100,66,0.4);
  z-index: 2;
  transition: transform var(--t), box-shadow var(--t), background var(--t);
}
.vplay svg { width: 36%; height: 36%; transform: translateX(6%); }
.vcard:hover .vplay {
  transform: translate(-50%, -50%) scale(1.06);
  background: var(--ivory);
  box-shadow: 0 14px 44px rgba(0,0,0,0.36), 0 0 0 8px rgba(201,100,66,0.18);
}
.vbadge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(20,20,19,0.72); color: var(--ivory);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0,0,0,0.22);
}
.vbadge--solid { background: var(--terracotta); }

/* Theme tints for thumbs (extra fallback color if image fails) */
.vthumb--ai        { background: linear-gradient(135deg, #1c2530, #2c3848); }
.vthumb--seo       { background: linear-gradient(135deg, #2a2826, #3d3a35); }
.vthumb--marketing { background: linear-gradient(135deg, #322a23, #46402f); }
.vthumb--career    { background: linear-gradient(135deg, #243029, #34453a); }

.vbody {
  padding: clamp(18px, 2.6vw, 24px) clamp(20px, 3vw, 28px) clamp(20px, 3vw, 28px);
  display: flex; flex-direction: column; gap: 10px;
}
.vcard--feat .vbody { padding: clamp(28px, 4vw, 40px) clamp(28px, 4vw, 40px); justify-content: center; gap: 14px; }
.vmeta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--stone); font-family: var(--mono); flex-wrap: wrap; }
.vmeta-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--ring-deep); }
.vbody h2 { font-size: clamp(22px, 3vw, 30px); line-height: 1.18; letter-spacing: -0.02em; transition: color var(--t); }
.vbody h3 { font-size: 19px; line-height: 1.25; transition: color var(--t); }
.vcard:hover h2, .vcard:hover h3 { color: var(--terracotta); }
.vbody p { font-size: 15px; color: var(--olive); line-height: 1.55; flex: 1; }
.vcard--feat .vbody p { font-size: 16px; }
.vcard .tlink { font-size: 14px; color: var(--terracotta); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.vcard .tlink .arrow { width: 14px; height: 14px; transition: transform var(--t); }
.vcard:hover .tlink .arrow { transform: translateX(3px); }

/* ── Blog card v2: цветная плашка категории (цвет = раздел) ──────── */
.vhead {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 16px 8px; color: #fff; font-family: var(--mono);
}
.vhead-c { font-size: 12px; font-weight: 600; letter-spacing: 0.01em; line-height: 1.25;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vhead-r { font-size: 11px; opacity: 0.85; white-space: nowrap; flex-shrink: 0; }
.vhead--osnovy    { background: #c96442; }
.vhead--tehnika   { background: #45443f; }
.vhead--platformy { background: #5e5d59; }
.vhead--kontent   { background: #9c6230; }
.vhead--analitika { background: #47795d; }
.vhead--ai        { background: #655781; }
.vhead--nishi     { background: #8a5a37; }
.vhead--kanaly    { background: #52646f; }
.vhead--karera    { background: #756454; }
/* карточка тянется гридом на высоту ряда → .vbody должен заполнить остаток,
   иначе футер у коротких карточек всплывает вверх и ряд «неровный» */
.vcard:not(.vcard--feat) .vbody { flex: 1; min-height: 0; }
.vfoot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 2px; padding-top: 13px; border-top: 1px solid var(--border-cream);
}
.vfoot .vfoot-d { display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12px; color: var(--stone); }
.vcard .vfoot .tlink { margin-top: 0; }

/* ── Keysy page ─────────────────────────────────────────── */
.kgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); }
.kgrid .kcard[hidden] { display: none !important; }
.vcard[hidden] { display: none !important; }
.kgrid-empty { margin: 32px 0; text-align: center; color: var(--stone); font-size: 15px; }
.kcard { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; transition: transform var(--t), box-shadow var(--t); }
.kthumb {
  aspect-ratio: 21/9;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  --kthumb-bg-1: #1f1f1d;
  --kthumb-bg-2: #30302e;
  --kthumb-fg: var(--ivory);
  --kthumb-unit: var(--coral);
  --kthumb-stroke: var(--coral);
  background:
    radial-gradient(140% 100% at 100% 0%, rgba(255,255,255,0.10), transparent 55%),
    radial-gradient(120% 80% at 0% 100%, rgba(0,0,0,0.30), transparent 60%),
    linear-gradient(135deg, var(--kthumb-bg-1), var(--kthumb-bg-2));
}
.kthumb::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 24px 24px, 12px 12px;
  background-position: 0 0, 12px 12px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 60%, transparent 100%);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}
.kthumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.22) 100%),
    radial-gradient(80% 60% at 50% 110%, var(--kthumb-stroke, var(--coral)), transparent 70%);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}
.kthumb svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0.7;
  filter: drop-shadow(0 0 8px var(--kthumb-stroke, var(--coral)));
  transition: opacity var(--t), filter var(--t);
  z-index: 1;
}
.kthumb svg path[fill="none"] { stroke: var(--kthumb-stroke); stroke-width: 2.4; }
.kthumb .big {
  position: relative; z-index: 2;
  font-family: var(--serif); font-size: clamp(24px, 3.6vw, 38px); font-weight: 600;
  color: var(--kthumb-fg); letter-spacing: -0.025em; text-align: center; padding: 0 12px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.35);
  line-height: 1;
}
.kthumb .big .unit {
  color: var(--kthumb-unit); font-size: clamp(12px, 1.6vw, 16px);
  font-weight: 500; letter-spacing: 0.02em;
  text-shadow: none;
  display: block; margin-top: 3px;
  text-transform: uppercase;
  opacity: 0.9;
}
.kthumb-tag {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 7px;
  background: rgba(250, 249, 245, 0.96); color: var(--charcoal);
  box-shadow: 0 4px 14px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.6);
  min-width: 32px; text-align: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform var(--t), background var(--t);
}
.kcard:hover .kthumb svg { opacity: 0.95; filter: drop-shadow(0 0 14px var(--kthumb-stroke, var(--coral))); }
.kcard:hover .kthumb-tag { transform: translateY(-1px); background: var(--ivory); }
/* Thumb themes — different gradient + chart stroke per niche */
.kthumb--edtech    { --kthumb-bg-1: #2a2826; --kthumb-bg-2: #3d3a35; --kthumb-stroke: #d9c293; --kthumb-unit: #d9c293; }
.kthumb--travel    { --kthumb-bg-1: #3a2e2a; --kthumb-bg-2: #5a4138; --kthumb-stroke: #e89a78; --kthumb-unit: #e89a78; }
.kthumb--medicine  { --kthumb-bg-1: #3a2528; --kthumb-bg-2: #5a3537; --kthumb-stroke: #ee9a82; --kthumb-unit: #ee9a82; }
.kthumb--ecommerce { --kthumb-bg-1: #243029; --kthumb-bg-2: #34453a; --kthumb-stroke: #8fb592; --kthumb-unit: #8fb592; }
.kthumb--b2b       { --kthumb-bg-1: #1c2530; --kthumb-bg-2: #2c3848; --kthumb-stroke: #9ec0e0; --kthumb-unit: #9ec0e0; }
.kthumb--cro       { --kthumb-bg-1: #322a23; --kthumb-bg-2: #46402f; --kthumb-stroke: #e0c478; --kthumb-unit: #e0c478; }
.kthumb--services  { --kthumb-bg-1: #3a2724; --kthumb-bg-2: #5a3a30; --kthumb-stroke: #d97757; --kthumb-unit: #d97757; }
.kthumb--olive     { --kthumb-bg-1: #2a2e25; --kthumb-bg-2: #3d4332; --kthumb-stroke: #b9c08a; --kthumb-unit: #b9c08a; }

.kcard:hover .kthumb-tag { background: var(--ivory); }

.kbody { padding: 15px 17px 16px; display: flex; flex-direction: column; gap: 8px; }
.kbody .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kbody h3 { font-size: clamp(16px, 2vw, 18px); line-height: 1.25; }
.kbody p { font-size: 13.5px; color: var(--olive); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kstats { display: flex; gap: 16px; margin-top: 2px; flex-wrap: wrap; padding-top: 9px; border-top: 1px solid var(--border-cream); align-items: baseline; }
.kstats .s .v { font-family: var(--mono); font-size: 16px; font-weight: 500; color: var(--near-black); }
.kstats .s .k { font-size: 11px; color: var(--stone); }

/* Top stats summary on /cases/ */
.cases-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(20px, 4vw, 44px);
  margin: 0 0 24px; padding: 18px clamp(20px, 3vw, 28px);
  background: var(--ivory); border-radius: var(--r-xl);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
}
.cs-item { display: flex; flex-direction: column; gap: 4px; }
.cs-item .v { font-family: var(--serif); font-size: clamp(22px, 3vw, 28px); font-weight: 600; color: var(--near-black); line-height: 1; letter-spacing: -0.01em; }
.cs-item .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--stone); }

/* ── Case study pages ───────────────────────────────────── */
.case-page .case-layout,
.case-page .case-content,
.case-page .case-figure,
.case-page .case-table-block,
.case-page .case-table-wrap,
.case-page .case-code {
  min-width: 0;
}

.case-page .case-content {
  max-width: none;
  width: 100%;
}

.case-page .case-table-block {
  max-width: 100%;
}

.case-page .case-table-wrap,
.case-page .case-code {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.case-page .case-code pre {
  max-width: 100%;
  overflow-x: auto;
}

.case-page .section--after-case {
  padding-top: clamp(28px, 5vw, 44px);
  padding-bottom: clamp(28px, 5vw, 44px);
}

.case-page .section--after-case + .section--after-case {
  padding-top: clamp(16px, 4vw, 24px);
}

.case-page .sec-head { margin-bottom: 22px; }

/* ── Case page ──────────────────────────────────────────── */
.case-head { padding-block: clamp(28px, 5vw, 40px) 0; }
.case-head h1 { font-size: clamp(30px, 5vw, 48px); line-height: 1.08; letter-spacing: -0.024em; max-width: 16em; margin: 0 0 18px; }
.case-head .sub { font-size: clamp(17px, 2.2vw, 19px); color: var(--olive); max-width: 38em; line-height: 1.62; margin: 0; }
.case-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 18px 0 22px; }
.case-facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap);
  margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--border-deep);
}
.case-fact {
  padding: 16px 18px; border-radius: var(--r-lg); background: var(--ivory);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
}
.case-fact .k {
  display: block; font-size: 11px; font-family: var(--mono); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--stone); margin-bottom: 6px;
}
.case-fact .v { font-size: 15px; color: var(--near-black); font-weight: 500; line-height: 1.35; }

.case-metrics-section { padding-block: 28px 0; }
.case-metrics {
  background: var(--ivory); border-radius: var(--r-2xl);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
  padding: clamp(22px, 3.5vw, 32px) clamp(20px, 4vw, 36px);
}
.case-metrics-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--stone); margin-bottom: 18px;
}
.case-metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 3vw, 28px); }
.case-metric .v {
  font-family: var(--serif); font-size: clamp(28px, 4.5vw, 40px); font-weight: 600;
  letter-spacing: -0.02em; color: var(--near-black); line-height: 1;
}
.case-metric .v .u { color: var(--terracotta); font-size: 0.72em; }
.case-metric .k { font-size: 13px; color: var(--stone); margin-top: 8px; line-height: 1.35; }

.case-visual { padding-block: 28px 0; }
.case-visual-inner {
  position: relative; overflow: hidden; border-radius: var(--r-2xl);
  background: var(--near-black); min-height: 200px;
  display: grid; grid-template-columns: 1.2fr 0.8fr; align-items: center;
  box-shadow: var(--shadow-ring), var(--shadow-lift);
}
.case-visual-chart { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; }
.case-visual-copy { position: relative; z-index: 1; padding: clamp(28px, 5vw, 44px); color: var(--ivory); }
.case-visual-kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--warm-silver); display: block; margin-bottom: 10px;
}
.case-visual-num {
  font-family: var(--serif); font-size: clamp(36px, 6vw, 56px); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1; margin-bottom: 10px;
}
.case-visual-num .unit { color: var(--coral); font-size: 0.55em; font-weight: 500; }
.case-visual-copy p { font-size: 15px; color: var(--warm-silver); max-width: 22em; margin: 0; }

.case-layout { display: block; padding-block: clamp(28px, 4vw, 40px) clamp(48px, 7vw, 64px); min-width: 0; }
.case-page .case-head .case-toc {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border-deep);
}
.case-page .toc { position: static; margin: 0; }
.case-page .toc-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.case-page .toc a { display: inline-flex; align-items: center; white-space: nowrap; font-size: 13px; font-weight: 500; line-height: 1.2; color: var(--olive); background: var(--ivory); border: 1px solid var(--border-warm); border-radius: 999px; padding: 5px 12px; box-shadow: none; transition: color var(--t), border-color var(--t), background var(--t); }

.case-page .toc a:hover { color: var(--terracotta-d); border-color: var(--terracotta); background: var(--tint-terra); }
.case-page .toc a.active { color: var(--terracotta-d); font-weight: 600; border-color: var(--terracotta); background: var(--tint-terra); box-shadow: none; }

.toc { position: sticky; top: calc(var(--nav-h) + 16px); }
.toc-inner {
  padding: 18px 16px 16px; border-radius: var(--r-xl); background: var(--parchment);
  box-shadow: inset 0 0 0 1px var(--border-deep);
}
.toc .tt { font-size: 11px; font-family: var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); margin-bottom: 12px; padding-left: 14px; }
.toc a { display: block; font-size: 14px; color: var(--olive); padding: 8px 0 8px 14px; border-left: 2px solid transparent; transition: all var(--t); line-height: 1.35; }
.toc a:hover { color: var(--near-black); border-left-color: var(--border-deep); }
.toc a.active { color: var(--terracotta); border-left-color: var(--terracotta); font-weight: 500; }

.case-content { max-width: none; min-width: 0; width: 100%; }
.case-content section { margin-bottom: 52px; scroll-margin-top: calc(var(--nav-h) + 16px); }
.case-content section:last-child { margin-bottom: 0; }
.case-content h2 { font-size: clamp(24px, 3.5vw, 30px); margin-bottom: 16px; letter-spacing: -0.02em; }
.case-content h3 { font-size: 20px; margin: 28px 0 12px; letter-spacing: -0.015em; line-height: 1.25; }
.case-content h3:first-child { margin-top: 0; }
.case-content p { font-size: clamp(16px, 2vw, 17px); line-height: 1.72; color: var(--charcoal); margin-bottom: 16px; }
.case-content p:last-child { margin-bottom: 0; }
.case-content .callout { margin: 22px 0; }
.case-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 0 0 4px; padding: 0; }
.case-list li { position: relative; padding-left: 26px; font-size: 16px; color: var(--charcoal); line-height: 1.6; }
.case-list li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--terracotta); }
.case-content strong { color: var(--near-black); font-weight: 600; }

.case-steps { display: flex; flex-direction: column; gap: 14px; margin: 22px 0 0; counter-reset: cstep; }
.case-step {
  counter-increment: cstep; display: grid; grid-template-columns: 44px 1fr; gap: 16px;
  padding: 20px 22px; border-radius: var(--r-xl); background: var(--ivory);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
  align-items: start;
}
.case-step .sn {
  width: 44px; height: 44px; border-radius: 50%; background: var(--tint-sand);
  color: var(--terracotta); display: grid; place-items: center;
  font-family: var(--mono); font-size: 16px; font-weight: 600; flex-shrink: 0;
}
.case-step .sn::before { content: counter(cstep); }
.case-step .sb h3 { margin: 2px 0 8px; font-size: 18px; line-height: 1.25; }
.case-step .sb p { font-size: 15px; color: var(--olive); line-height: 1.58; margin: 0; }

.case-results {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 22px 0;
}
.case-result-item {
  padding: 16px 18px; border-radius: var(--r-lg); background: var(--parchment);
  box-shadow: inset 0 0 0 1px var(--border-deep);
}
.case-result-item .v { display: block; font-family: var(--mono); font-size: 20px; font-weight: 500; color: var(--near-black); margin-bottom: 4px; }
.case-result-item .k { font-size: 13px; color: var(--stone); line-height: 1.35; }

.case-quote {
  margin: 8px 0 0; padding: clamp(24px, 4vw, 32px); border: none;
  border-radius: var(--r-2xl); background: var(--ivory);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
  border-left: 4px solid var(--terracotta);
}
.case-quote p {
  font-size: clamp(18px, 2.5vw, 21px); line-height: 1.58; color: var(--near-black);
  font-weight: 500; margin: 0 0 20px; font-style: normal;
}
.case-quote-who { display: flex; align-items: center; gap: 12px; }
.case-quote-who .av {
  width: 44px; height: 44px; border-radius: 50%; background: var(--tint-sand);
  display: grid; place-items: center; font-weight: 600; color: var(--terracotta); flex-shrink: 0;
}
.case-quote-who .nm { display: block; font-size: 14px; font-weight: 600; color: var(--near-black); }
.case-quote-who .ro { display: block; font-size: 13px; color: var(--stone); margin-top: 2px; }

.case-more { align-items: stretch; }
.case-more-card {
  display: flex; flex-direction: column; gap: 12px; padding: 22px 24px;
  color: inherit; text-decoration: none; height: 100%;
}
.case-more-card h3 { font-size: 19px; line-height: 1.25; margin: 0; transition: color var(--t); }
.case-more-card p { font-size: 14px; color: var(--olive); line-height: 1.5; margin: 0; flex: 1; }
.case-more-card:hover h3 { color: var(--terracotta); }
.case-more-tag {
  align-self: flex-start; font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em; color: var(--charcoal); background: var(--parchment);
  padding: 5px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--border-deep);
}
.case-more-tag--dot { display: inline-flex; align-items: center; gap: 6px; }
.case-more-tag--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--terracotta); }

/* === Case-page tables (revamped) === */
.case-table-block {
  margin: 32px 0 28px;
  border-radius: var(--r-xl);
  background: var(--ivory);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
  overflow: hidden;
  position: relative;
}
.case-table-block .case-table-caption,
.case-content .case-table-caption,
.case-table-caption {
  margin: 0 !important;
  padding: 16px 22px 14px;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--near-black);
  background: linear-gradient(180deg, var(--ivory) 0%, var(--parchment) 100%);
  border-bottom: 1px solid var(--border-deep);
  border-left: 3px solid var(--terracotta);
  letter-spacing: -0.005em;
}
.case-table-wrap {
  overflow-x: auto;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* Fade hint that there's more content to scroll */
  background-image:
    linear-gradient(to right, var(--ivory), var(--ivory)),
    linear-gradient(to right, var(--ivory), var(--ivory)),
    linear-gradient(to right, rgba(20,20,19,0.06), rgba(20,20,19,0)),
    linear-gradient(to left, rgba(20,20,19,0.06), rgba(20,20,19,0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-color: var(--ivory);
  background-size: 24px 100%, 24px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.case-table {
  width: 100%;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14.5px;
  background: var(--ivory);
  table-layout: auto;
}
.case-table th,
.case-table td {
  padding: 14px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-cream);
}
.case-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--charcoal);
  background: var(--parchment);
  white-space: nowrap;
  box-shadow: 0 1px 0 var(--border-deep);
  padding-top: 12px;
  padding-bottom: 12px;
}
.case-table tbody tr { transition: background var(--t); }
.case-table tbody tr:nth-child(even) td { background: rgba(245, 244, 237, 0.7); }
.case-table tbody tr:hover td { background: var(--tint-sand); }
.case-table tbody tr:last-child td { border-bottom: none; }
.case-table td {
  color: var(--charcoal);
  line-height: 1.55;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
  background: var(--ivory);
}
.case-table td:first-child {
  font-weight: 500;
  color: var(--near-black);
}
.case-table .vol,
.case-table td.num,
.case-table .num {
  font-family: var(--mono);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--near-black);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* Auto-color volume cells by their content via attribute selectors */
.case-table .vol[data-trend="up"],
.case-table .vol.is-up,
.case-table td.num.is-up { color: var(--green); }
.case-table .vol[data-trend="down"],
.case-table .vol.is-down,
.case-table td.num.is-down { color: var(--terracotta-d); }
/* Lightweight content-based color: cells containing '+' get up, '−'/'-' get down */
.case-table .vol { position: relative; }

.case-col-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 22px 0 0; }
.case-col-item {
  padding: 14px 16px; background: var(--parchment); border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--border-deep);
}
.case-col-item dt { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--near-black); margin-bottom: 4px; }
.case-col-item dd { font-size: 13px; color: var(--olive); line-height: 1.45; margin: 0; }

.case-code {
  margin: 18px 0 0; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep); background: var(--near-black);
}
.case-code-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--warm-silver); padding: 10px 16px; background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.case-code pre {
  margin: 0; padding: 16px 18px; overflow-x: auto; font-family: var(--mono); font-size: 12.5px;
  line-height: 1.55; color: #e8e6dc; -webkit-overflow-scrolling: touch; tab-size: 2;
}
.case-code + .case-code { margin-top: 14px; }

.case-sample {
  margin: 22px 0;
  padding: 20px 22px;
  border-radius: var(--r-xl);
  background: var(--ivory);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
  border-left: 3px solid var(--terracotta);
}
.case-sample-label {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-bottom: 12px;
  color: var(--near-black);
}
.case-sample p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--charcoal);
  margin: 0;
}
.case-sample p + p {
  margin-top: 12px;
}
.case-sample-next {
  margin-top: 16px !important;
  font-size: 15px;
  font-weight: 600;
  color: var(--green);
}
.case-sample--bad { border-left-color: var(--terracotta); }
.case-sample--bad .case-sample-label { color: var(--terracotta); }
.case-sample--good { border-left-color: var(--green); }
.case-sample--good .case-sample-label { color: var(--green); }
.case-sample + .case-sample { margin-top: 14px; }

/* Problem → Solution paired block */
.case-ps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 22px 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--ivory);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
}
.case-ps + .case-ps { margin-top: 14px; }
.case-ps-col { padding: 24px 26px; }
.case-ps-col--problem { border-right: 1px solid var(--border-deep); }
.case-ps-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 11px 4px 9px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.case-ps-col--problem .case-ps-head { color: var(--terracotta); background: var(--tint-terra); }
.case-ps-col--solution .case-ps-head { color: var(--green); background: var(--tint-green); }
.case-ps-head .ico { width: 14px; height: 14px; flex-shrink: 0; }
.case-ps p {
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--charcoal);
  margin: 0;
}
.case-ps p strong { color: var(--near-black); }

.case-ps-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.case-ps-list li {
  position: relative;
  padding-left: 18px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--charcoal);
}
.case-ps-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}
.case-ps p + .case-ps-list { margin-top: 12px; }

.svc-fit { margin-top: 22px; }
.svc-fit .case-ps-col--problem .case-ps-list li::before { background: var(--terracotta); }

/* Inline links inside glossary article body */
.gl-body p > a,
.gl-body li > a {
  color: var(--terracotta);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(201, 100, 66, 0.45);
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
.gl-body p > a:hover,
.gl-body li > a:hover {
  color: var(--terracotta-d);
  text-decoration-color: var(--terracotta-d);
}

/* Yandex Neuro mockup — schematic UI inside glossary */
.gl-body figure.gl-neuro-mock { margin: 28px 0 32px; display: flex; flex-direction: column; gap: 10px; }
.gl-neuro-mock .nm-frame {
  background: #fff; border-radius: 16px;
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
  padding: 20px 22px 22px; font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}
.gl-neuro-mock .nm-bar {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid #d4d2cb; border-radius: 30px;
  padding: 10px 18px; margin-bottom: 18px; background: #fafaf6;
}
.gl-neuro-mock .nm-bar svg { width: 16px; height: 16px; color: #87867f; flex-shrink: 0; }
.gl-neuro-mock .nm-q { font-size: 14.5px; color: #1c1c1a; flex: 1; }
.gl-neuro-mock .nm-bar .nm-spark {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(135deg, #6b3fde 0%, #c44fb6 100%);
  color: #fff; padding: 4px 10px; border-radius: 14px;
  font-size: 11.5px; font-weight: 600;
}
.gl-neuro-mock .nm-spark svg { width: 11px; height: 11px; color: #fff; }
.gl-neuro-mock .nm-card {
  border: 1px solid #e8e6dc; border-radius: 14px;
  padding: 18px 20px; background: linear-gradient(180deg, #fbf8fe 0%, #f9f8f6 100%);
}
.gl-neuro-mock .nm-card-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.gl-neuro-mock .nm-card-head .nm-aiicon {
  width: 22px; height: 22px; border-radius: 6px;
  background: linear-gradient(135deg, #6b3fde 0%, #c44fb6 100%);
  display: inline-flex; align-items: center; justify-content: center;
}
.gl-neuro-mock .nm-card-head .nm-aiicon svg { width: 13px; height: 13px; color: #fff; }
.gl-neuro-mock .nm-card-head .nm-label {
  font-size: 12.5px; font-weight: 600; color: #6b3fde; letter-spacing: 0.01em;
}
.gl-neuro-mock .nm-ans p {
  font-size: 14px; line-height: 1.62; color: #2a2926; margin: 0 0 9px;
}
.gl-neuro-mock .nm-ans p:last-child { margin-bottom: 0; }
.gl-neuro-mock .nm-ans sup {
  display: inline-flex; align-items: center; justify-content: center;
  background: #ede8fa; color: #6b3fde;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 10.5px; font-weight: 600; margin: 0 1px;
  vertical-align: super; line-height: 1; font-family: var(--mono);
}
.gl-neuro-mock .nm-sources {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid #ece9e0;
  display: flex; flex-direction: column; gap: 7px;
}
.gl-neuro-mock .nm-sources .nm-sources-h {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em;
  color: #87867f; font-weight: 600;
}
.gl-neuro-mock .nm-sources ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.gl-neuro-mock .nm-sources li {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: #4d4c48;
}
.gl-neuro-mock .nm-sources .nm-num {
  display: inline-flex; align-items: center; justify-content: center;
  background: #ede8fa; color: #6b3fde;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 10.5px; font-weight: 600;
  font-family: var(--mono); flex-shrink: 0;
}
.gl-neuro-mock .nm-sources .nm-favicon {
  width: 14px; height: 14px; border-radius: 3px; background: #d4d2cb; flex-shrink: 0;
}
.gl-neuro-mock .nm-sources .nm-host { color: #87867f; font-family: var(--mono); font-size: 11.5px; }
.gl-neuro-mock figcaption {
  font-family: var(--mono); font-size: 12.5px; color: var(--stone);
  text-align: center; letter-spacing: 0.01em; line-height: 1.5;
}

/* Formula card — for metric terms */
.gl-body figure.gl-formula-card { margin: 24px 0 28px; display: flex; flex-direction: column; gap: 10px; }
.gl-formula-card .fc-frame {
  background: linear-gradient(180deg, #fbf9f3 0%, #f7f5ec 100%);
  border: 1px solid var(--border-deep);
  border-radius: var(--r-md);
  padding: 20px 24px;
  box-shadow: var(--shadow-whisper);
}
.gl-formula-card .fc-name {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  color: var(--terracotta); letter-spacing: 0.08em;
  text-transform: uppercase; margin-bottom: 10px;
}
.gl-formula-card .fc-eq {
  font-family: var(--mono); font-size: 18px; color: var(--near-black);
  margin-bottom: 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.gl-formula-card .fc-eq .fc-num, .gl-formula-card .fc-eq .fc-den {
  color: var(--charcoal);
}
.gl-formula-card .fc-eq .fc-op {
  color: var(--terracotta); font-weight: 600;
}
.gl-formula-card .fc-eq .fc-frac {
  display: inline-flex; flex-direction: column; align-items: center;
  font-size: 14px; line-height: 1.2;
}
.gl-formula-card .fc-eq .fc-frac .fc-num { border-bottom: 2px solid var(--charcoal); padding-bottom: 2px; }
.gl-formula-card .fc-eq .fc-frac .fc-den { padding-top: 2px; }
.gl-formula-card .fc-example {
  font-family: var(--mono); font-size: 14px; color: var(--olive);
  background: #fff; border: 1px dashed var(--border-deep);
  border-radius: var(--r-sm); padding: 11px 14px;
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.gl-formula-card .fc-example .fc-eq-result {
  margin-left: auto; color: var(--terracotta); font-weight: 600;
}
.gl-formula-card .fc-note {
  font-family: var(--mono); font-size: 11.5px; color: var(--stone);
  letter-spacing: 0.02em; line-height: 1.55;
}
.gl-formula-card figcaption {
  font-family: var(--mono); font-size: 12.5px; color: var(--stone);
  text-align: center; letter-spacing: 0.01em; line-height: 1.5;
}

/* SVG diagram figure — generic wrapper */
.gl-body figure.gl-svg-fig { margin: 26px 0 30px; display: flex; flex-direction: column; gap: 10px; }
.gl-svg-fig .svg-frame {
  background: #fff;
  border: 1px solid var(--border-deep);
  border-radius: var(--r-md);
  padding: 22px 24px;
  box-shadow: var(--shadow-whisper);
}
.gl-svg-fig svg { display: block; width: 100%; height: auto; max-height: 380px; }
.gl-svg-fig figcaption {
  font-family: var(--mono); font-size: 12.5px; color: var(--stone);
  text-align: center; letter-spacing: 0.01em; line-height: 1.5;
}

/* Generic concept card — 3-4 colored boxes with key facts */
.gl-body figure.gl-concept-card { margin: 26px 0 30px; display: flex; flex-direction: column; gap: 10px; }
.gl-concept-card .cc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.gl-concept-card .cc-grid--4 { grid-template-columns: repeat(4, 1fr); }
.gl-concept-card .cc-box {
  padding: 16px 18px; border-radius: 10px;
  border: 1px solid var(--border-deep);
  background: #fff;
  box-shadow: var(--shadow-whisper);
}
.gl-concept-card .cc-box.cc--terra { background: #fdebe6; border-color: rgba(201,100,66,0.3); }
.gl-concept-card .cc-box.cc--purple { background: #ede8fa; border-color: rgba(107,63,222,0.3); }
.gl-concept-card .cc-box.cc--green { background: #e7eee4; border-color: rgba(58,107,74,0.3); }
.gl-concept-card .cc-box.cc--sand { background: #efece1; border-color: rgba(138,96,64,0.3); }
.gl-concept-card .cc-box .cc-h {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px;
}
.gl-concept-card .cc-box .cc-h.cc-h--terra { color: var(--terracotta); }
.gl-concept-card .cc-box .cc-h.cc-h--purple { color: #6b3fde; }
.gl-concept-card .cc-box .cc-h.cc-h--green { color: var(--green); }
.gl-concept-card .cc-box .cc-h.cc-h--sand { color: #8a6040; }
.gl-concept-card .cc-box .cc-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; color: var(--near-black); }
.gl-concept-card .cc-box p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--charcoal); }
.gl-concept-card .cc-box ul { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.55; color: var(--charcoal); }
.gl-concept-card .cc-box ul li { margin-bottom: 3px; }
.gl-concept-card figcaption {
  font-family: var(--mono); font-size: 12.5px; color: var(--stone);
  text-align: center; letter-spacing: 0.01em; line-height: 1.5;
}
@media (max-width: 640px) {
  .gl-concept-card .cc-grid, .gl-concept-card .cc-grid--4 { grid-template-columns: 1fr; }
}

/* HTTP status table */
.gl-body figure.gl-http-table { margin: 26px 0 30px; display: flex; flex-direction: column; gap: 10px; }
.gl-http-table .ht-frame {
  background: #fff; border: 1px solid var(--border-deep); border-radius: var(--r-md);
  box-shadow: var(--shadow-whisper); overflow: hidden;
}
.gl-http-table table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 13px; }
.gl-http-table th, .gl-http-table td { padding: 9px 14px; text-align: left; border-bottom: 1px solid #ece9e0; }
.gl-http-table th { background: var(--warm-sand); color: var(--charcoal); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.gl-http-table td.ht-code { font-weight: 600; color: var(--near-black); width: 70px; }
.gl-http-table td.ht-code--ok { color: var(--green); }
.gl-http-table td.ht-code--redir { color: #6b3fde; }
.gl-http-table td.ht-code--err { color: var(--terracotta); }
.gl-http-table td.ht-name { color: var(--olive); width: 200px; }
.gl-http-table td.ht-desc { color: var(--charcoal); font-family: 'DM Sans', system-ui; font-size: 12.5px; }
.gl-http-table figcaption {
  font-family: var(--mono); font-size: 12.5px; color: var(--stone);
  text-align: center; letter-spacing: 0.01em; line-height: 1.5;
}

/* Persona card */
.gl-body figure.gl-persona-card { margin: 26px 0 30px; display: flex; flex-direction: column; gap: 10px; }
.gl-persona-card .pc-grid { display: grid; grid-template-columns: 200px 1fr; gap: 18px; }
.gl-persona-card .pc-avatar {
  background: linear-gradient(135deg, #c96442, #6b3fde);
  border-radius: 12px; padding: 24px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: #fff; text-align: center;
}
.gl-persona-card .pc-avatar .pc-initials {
  width: 70px; height: 70px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700;
}
.gl-persona-card .pc-avatar h4 { margin: 4px 0 0; font-size: 16px; font-weight: 600; }
.gl-persona-card .pc-avatar .pc-age { font-size: 12px; opacity: 0.85; }
.gl-persona-card .pc-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.gl-persona-card .pc-block {
  background: #fbf9f3; border: 1px solid var(--border-deep); border-radius: 8px;
  padding: 12px 14px;
}
.gl-persona-card .pc-block .pc-k {
  font-family: var(--mono); font-size: 10.5px; color: var(--stone);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 5px;
}
.gl-persona-card .pc-block ul { margin: 0; padding-left: 16px; font-size: 12px; line-height: 1.5; color: var(--charcoal); }
.gl-persona-card figcaption {
  font-family: var(--mono); font-size: 12.5px; color: var(--stone);
  text-align: center; letter-spacing: 0.01em; line-height: 1.5;
}
@media (max-width: 640px) {
  .gl-persona-card .pc-grid { grid-template-columns: 1fr; }
  .gl-persona-card .pc-body { grid-template-columns: 1fr; }
}

/* Google updates timeline — vertical card stack */
.gl-body figure.gl-updates-timeline { margin: 28px 0 32px; display: flex; flex-direction: column; gap: 10px; }
.gl-updates-timeline .ut-frame {
  background: #fbf9f3;
  border: 1px solid var(--border-deep);
  border-radius: var(--r-md);
  padding: 24px 22px;
  box-shadow: var(--shadow-whisper);
}
.gl-updates-timeline .ut-stack {
  display: flex; flex-direction: column;
  position: relative;
}
.gl-updates-timeline .ut-stack::before {
  content: ''; position: absolute;
  left: 90px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, #c96442 0%, #6b3fde 50%, #3a6b4a 100%);
  border-radius: 1px;
  z-index: 0;
}
.gl-updates-timeline .ut-row {
  display: grid;
  grid-template-columns: 70px 36px 1fr;
  gap: 16px;
  align-items: start;
  padding: 10px 0;
  position: relative;
}
.gl-updates-timeline .ut-row.ut-row--highlight .ut-card {
  border-color: var(--terracotta);
  box-shadow: 0 0 0 2px rgba(201, 100, 66, 0.15), var(--shadow-whisper);
}
.gl-updates-timeline .ut-year {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  color: var(--olive); padding-top: 12px; text-align: right;
}
.gl-updates-timeline .ut-row.ut-row--highlight .ut-year { color: var(--terracotta); font-weight: 700; }
.gl-updates-timeline .ut-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff;
  border: 2px solid var(--border-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; margin-top: 6px;
  position: relative; z-index: 1;
}
.gl-updates-timeline .ut-row.ut-row--highlight .ut-icon {
  border-color: var(--terracotta);
  box-shadow: 0 0 0 4px rgba(201,100,66,0.12);
}
.gl-updates-timeline .ut-card {
  background: #fff;
  border: 1px solid var(--border-deep);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  box-shadow: var(--shadow-whisper);
}
.gl-updates-timeline .ut-card .ut-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 5px;
}
.gl-updates-timeline .ut-card .ut-name {
  font-size: 15px; font-weight: 600; color: var(--near-black);
}
.gl-updates-timeline .ut-card .ut-tag {
  display: inline-block; font-family: var(--mono);
  font-size: 10.5px; font-weight: 600;
  padding: 2px 8px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.gl-updates-timeline .ut-tag--content { color: var(--terracotta); background: var(--tint-terra); }
.gl-updates-timeline .ut-tag--links { color: #6b3fde; background: #ede8fa; }
.gl-updates-timeline .ut-tag--domain { color: #8a6040; background: #efece1; }
.gl-updates-timeline .ut-tag--quality { color: var(--green); background: var(--tint-green); }
.gl-updates-timeline .ut-tag--user { color: #1a73e8; background: #e8f0fe; }
.gl-updates-timeline .ut-tag--spam { color: #b1543a; background: #fdebe6; }
.gl-updates-timeline .ut-card p {
  margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--charcoal);
}
.gl-updates-timeline figcaption {
  font-family: var(--mono); font-size: 12.5px; color: var(--stone);
  text-align: center; letter-spacing: 0.01em; line-height: 1.5;
}
@media (max-width: 640px) {
  .gl-updates-timeline .ut-stack::before { left: 14px; }
  .gl-updates-timeline .ut-row { grid-template-columns: 32px 1fr; gap: 12px; }
  .gl-updates-timeline .ut-year { display: none; }
  .gl-updates-timeline .ut-icon { width: 32px; height: 32px; font-size: 15px; }
  .gl-updates-timeline .ut-card .ut-head::before {
    content: attr(data-year); font-family: var(--mono); font-size: 11px;
    color: var(--olive); margin-right: 6px;
  }
}

/* Yandex Metrika dashboard widget */
.gl-body figure.gl-metrika-mock { margin: 26px 0 30px; display: flex; flex-direction: column; gap: 10px; }
.gl-metrika-mock .mm-frame {
  background: #fff; border-radius: 12px;
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
  overflow: hidden;
}
.gl-metrika-mock .mm-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; background: #fafaf6;
  border-bottom: 1px solid var(--border-deep);
  font-size: 13px;
}
.gl-metrika-mock .mm-head .mm-logo {
  display: inline-flex; align-items: center; gap: 6px;
  color: #ff0000; font-weight: 600;
}
.gl-metrika-mock .mm-head .mm-logo::before {
  content: 'Я'; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 4px;
  background: #ff0000; color: #fff; font-weight: 700; font-size: 13px;
}
.gl-metrika-mock .mm-head .mm-counter {
  color: var(--olive); font-family: var(--mono); font-size: 11.5px;
  margin-left: auto;
}
.gl-metrika-mock .mm-body { padding: 20px 22px; }
.gl-metrika-mock .mm-big {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px;
}
.gl-metrika-mock .mm-big .mm-val { font-size: 32px; font-weight: 600; color: var(--near-black); font-family: 'Inter', system-ui; }
.gl-metrika-mock .mm-big .mm-delta { color: var(--green); font-size: 14px; font-weight: 500; font-family: var(--mono); }
.gl-metrika-mock .mm-big .mm-delta--down { color: var(--terracotta); }
.gl-metrika-mock .mm-sub { font-size: 13px; color: var(--olive); margin-bottom: 16px; }
.gl-metrika-mock .mm-chart { width: 100%; height: 80px; }
.gl-metrika-mock .mm-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid #ece9e0;
}
.gl-metrika-mock .mm-stat .mm-stat-k {
  font-family: var(--mono); font-size: 10.5px; color: var(--stone);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px;
}
.gl-metrika-mock .mm-stat .mm-stat-v {
  font-size: 18px; font-weight: 500; color: var(--near-black);
  font-family: 'Inter', system-ui;
}
.gl-metrika-mock figcaption {
  font-family: var(--mono); font-size: 12.5px; color: var(--stone);
  text-align: center; letter-spacing: 0.01em; line-height: 1.5;
}

/* Webvisor playback UI */
.gl-body figure.gl-webvisor-mock { margin: 26px 0 30px; display: flex; flex-direction: column; gap: 10px; }
.gl-webvisor-mock .wv-frame {
  background: #fff; border-radius: 12px;
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
  overflow: hidden;
}
.gl-webvisor-mock .wv-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; background: #fafaf6;
  border-bottom: 1px solid var(--border-deep);
  font-size: 12.5px; color: var(--olive);
}
.gl-webvisor-mock .wv-head .wv-logo { color: #ff0000; font-weight: 600; }
.gl-webvisor-mock .wv-screen {
  position: relative;
  height: 220px; background: #f0eee5;
  border-bottom: 1px solid #ece9e0;
  overflow: hidden;
}
.gl-webvisor-mock .wv-screen .wv-page {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 86%; max-width: 540px;
  background: #fff; border: 1px solid var(--border-deep); border-radius: 6px;
  padding: 18px; box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}
.gl-webvisor-mock .wv-page .wv-line {
  height: 6px; background: #ece9e0; border-radius: 3px; margin-bottom: 8px;
}
.gl-webvisor-mock .wv-page .wv-line--w70 { width: 70%; }
.gl-webvisor-mock .wv-page .wv-line--w90 { width: 90%; }
.gl-webvisor-mock .wv-page .wv-line--w50 { width: 50%; }
.gl-webvisor-mock .wv-page .wv-btn {
  display: inline-block; padding: 6px 14px; background: var(--terracotta);
  color: #fff; font-size: 11px; border-radius: 4px; margin-top: 6px;
}
.gl-webvisor-mock .wv-cursor {
  position: absolute; left: 38%; top: 56%;
  width: 14px; height: 14px;
}
.gl-webvisor-mock .wv-cursor::before {
  content: ''; position: absolute; inset: -8px;
  border-radius: 50%; background: var(--terracotta); opacity: 0.25;
}
.gl-webvisor-mock .wv-cursor::after {
  content: ''; position: absolute; inset: 0;
  background: #1c1c1a; clip-path: polygon(0 0, 100% 50%, 50% 60%, 50% 100%);
}
.gl-webvisor-mock .wv-controls {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; background: #1c1c1a; color: #fff;
}
.gl-webvisor-mock .wv-controls .wv-play {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--terracotta); color: #fff; font-size: 10px;
}
.gl-webvisor-mock .wv-time { font-family: var(--mono); font-size: 12px; color: #cfcdc7; }
.gl-webvisor-mock .wv-progress {
  flex: 1; height: 4px; background: rgba(255,255,255,0.15); border-radius: 2px;
  position: relative;
}
.gl-webvisor-mock .wv-progress::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 35%; background: var(--terracotta); border-radius: 2px;
}
.gl-webvisor-mock .wv-speed {
  font-family: var(--mono); font-size: 11px; color: #cfcdc7;
}
.gl-webvisor-mock figcaption {
  font-family: var(--mono); font-size: 12.5px; color: var(--stone);
  text-align: center; letter-spacing: 0.01em; line-height: 1.5;
}

/* Yandex Webmaster sanction card */
.gl-body figure.gl-webmaster-card { margin: 26px 0 30px; display: flex; flex-direction: column; gap: 10px; }
.gl-webmaster-card .wc-frame {
  background: #fff; border-radius: 12px;
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
  overflow: hidden;
}
.gl-webmaster-card .wc-head {
  display: flex; align-items: center; gap: 10px;
  background: #fafaf6; border-bottom: 1px solid var(--border-deep);
  padding: 10px 16px; font-size: 12.5px; color: var(--olive);
}
.gl-webmaster-card .wc-head .wc-logo {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Inter', system-ui, sans-serif; font-weight: 600;
  color: #ff0000; font-size: 14px;
}
.gl-webmaster-card .wc-head .wc-logo::before {
  content: 'Я'; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 4px;
  background: #ff0000; color: #fff; font-weight: 700; font-size: 13px;
}
.gl-webmaster-card .wc-head .wc-section {
  color: #5e5d59; font-family: var(--mono); font-size: 11.5px;
}
.gl-webmaster-card .wc-body { padding: 18px 20px; }
.gl-webmaster-card .wc-alert {
  display: flex; gap: 12px; padding: 14px 16px;
  background: #fdebe6; border: 1px solid #f4c5b7;
  border-radius: 10px; margin-bottom: 14px;
}
.gl-webmaster-card .wc-alert .wc-icon {
  flex-shrink: 0; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--terracotta); border-radius: 50%; color: #fff;
}
.gl-webmaster-card .wc-alert .wc-icon svg { width: 12px; height: 12px; }
.gl-webmaster-card .wc-alert h4 {
  margin: 0 0 4px; font-size: 14.5px; font-weight: 600; color: var(--terracotta);
}
.gl-webmaster-card .wc-alert p {
  margin: 0; font-size: 13px; line-height: 1.5; color: #2a2926;
}
.gl-webmaster-card .wc-details {
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13px; color: var(--charcoal);
}
.gl-webmaster-card .wc-details .wc-row {
  display: flex; gap: 10px; align-items: baseline;
}
.gl-webmaster-card .wc-details .wc-row .wc-key {
  font-family: var(--mono); font-size: 11.5px; color: var(--stone);
  text-transform: uppercase; letter-spacing: 0.05em;
  min-width: 130px; flex-shrink: 0;
}
.gl-webmaster-card .wc-details .wc-row .wc-val { color: var(--near-black); }
.gl-webmaster-card figcaption {
  font-family: var(--mono); font-size: 12.5px; color: var(--stone);
  text-align: center; letter-spacing: 0.01em; line-height: 1.5;
}

/* SERP family — shared frame */
.gl-body figure.gl-serp-mock,
.gl-body figure.gl-featured-mock,
.gl-body figure.gl-paa-mock,
.gl-body figure.gl-kp-mock,
.gl-body figure.gl-aio-mock {
  margin: 28px 0 32px; display: flex; flex-direction: column; gap: 10px;
  font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
}
.gl-serp-mock .sm-frame,
.gl-featured-mock .sm-frame,
.gl-paa-mock .sm-frame,
.gl-kp-mock .sm-frame,
.gl-aio-mock .sm-frame {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
  padding: 20px 22px 22px;
}
.gl-serp-mock figcaption,
.gl-featured-mock figcaption,
.gl-paa-mock figcaption,
.gl-kp-mock figcaption,
.gl-aio-mock figcaption {
  font-family: var(--mono); font-size: 12.5px; color: var(--stone);
  text-align: center; letter-spacing: 0.01em; line-height: 1.5;
}

/* SERP extras: breadcrumbs, FAQ, review-stars */
.gl-serp-mock .sm-bread {
  font-size: 12px; color: #5e5d59; font-family: var(--mono); margin-bottom: 5px;
}
.gl-serp-mock .sm-bread .sm-fav { display: inline-block; vertical-align: middle; margin-right: 6px; }
.gl-serp-mock .sm-bread .sm-sep { color: #b2b1ab; margin: 0 5px; }
.gl-serp-mock .sm-stars {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: #4d4c48; margin-top: 4px;
}
.gl-serp-mock .sm-stars .sm-stars-row {
  letter-spacing: 0.5px; color: #f4b400;
}
.gl-serp-mock .sm-stars .sm-stars-meta { color: #5e5d59; font-size: 12.5px; }
.gl-serp-mock .sm-faq {
  margin-top: 8px; padding-top: 6px; border-top: 1px dashed #d4d2cb;
  display: flex; flex-direction: column; gap: 5px;
}
.gl-serp-mock .sm-faq .sm-faq-q {
  font-size: 12.5px; color: #4d4c48; display: flex; align-items: center; gap: 7px;
}
.gl-serp-mock .sm-faq .sm-faq-q svg { width: 11px; height: 11px; color: #87867f; flex-shrink: 0; }

/* SERP — search bar + 3 organic results */
.gl-serp-mock .sm-bar {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid #d4d2cb; border-radius: 28px;
  padding: 9px 16px; margin-bottom: 18px; background: #fafaf6;
  font-size: 13.5px; color: #1c1c1a;
}
.gl-serp-mock .sm-bar svg { width: 14px; height: 14px; color: #87867f; flex-shrink: 0; }
.gl-serp-mock .sm-result { padding: 12px 0; border-bottom: 1px solid #ece9e0; }
.gl-serp-mock .sm-result:last-child { border-bottom: none; padding-bottom: 0; }
.gl-serp-mock .sm-result .sm-url {
  font-size: 11.5px; color: #5e5d59; font-family: var(--mono); margin-bottom: 4px;
  display: flex; align-items: center; gap: 6px;
}
.gl-serp-mock .sm-result .sm-fav {
  width: 14px; height: 14px; border-radius: 50%;
  background: linear-gradient(135deg, #d97757, #c44fb6);
}
.gl-serp-mock .sm-result h4 {
  margin: 0 0 4px; font-size: 17px; font-weight: 400;
  color: #1a0dab; line-height: 1.3;
}
.gl-serp-mock .sm-result h4 .sm-em { background: #fff05a; padding: 0 2px; border-radius: 2px; }
.gl-serp-mock .sm-result .sm-desc {
  font-size: 13px; color: #4d4c48; line-height: 1.5;
}
.gl-serp-mock .sm-result .sm-desc .sm-em { background: #fff05a; padding: 0 2px; border-radius: 2px; }

/* Featured snippet — answer box at top */
.gl-featured-mock .fm-box {
  border: 1px solid #d4d2cb; border-radius: 12px;
  padding: 16px 18px; margin-bottom: 14px; background: #fafaf6;
}
.gl-featured-mock .fm-box .fm-tag {
  display: inline-block; font-size: 10.5px; font-weight: 600;
  color: var(--green); background: var(--tint-green);
  padding: 3px 8px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px;
}
.gl-featured-mock .fm-box h4 {
  margin: 0 0 8px; font-size: 16px; font-weight: 500; color: #1c1c1a;
}
.gl-featured-mock .fm-box p {
  margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; color: #2a2926;
}
.gl-featured-mock .fm-box ol {
  margin: 0; padding-left: 20px;
  font-size: 13.5px; line-height: 1.6; color: #2a2926;
}
.gl-featured-mock .fm-box ol li { margin-bottom: 3px; }
.gl-featured-mock .fm-box .fm-source {
  font-size: 11.5px; color: #5e5d59; font-family: var(--mono);
  margin-top: 10px; display: flex; align-items: center; gap: 6px;
}
.gl-featured-mock .fm-box .fm-source .sm-fav {
  width: 14px; height: 14px; border-radius: 50%;
  background: linear-gradient(135deg, #d97757, #c44fb6);
}
.gl-featured-mock .fm-rest .sm-result { padding-top: 0; }

/* PAA — expandable Q&A */
.gl-paa-mock .pm-h {
  font-size: 15px; font-weight: 500; color: #1c1c1a; margin-bottom: 12px;
}
.gl-paa-mock .pm-list { display: flex; flex-direction: column; }
.gl-paa-mock .pm-item {
  border-top: 1px solid #ece9e0; padding: 13px 0;
  display: flex; align-items: center; justify-content: space-between;
}
.gl-paa-mock .pm-item:first-child { border-top: none; padding-top: 6px; }
.gl-paa-mock .pm-item .pm-q { font-size: 14px; color: #1a0dab; }
.gl-paa-mock .pm-item .pm-caret {
  width: 18px; height: 18px; color: #87867f; flex-shrink: 0;
}
.gl-paa-mock .pm-item.pm-open .pm-caret { transform: rotate(90deg); color: var(--terracotta); }
.gl-paa-mock .pm-item.pm-open { flex-wrap: wrap; }
.gl-paa-mock .pm-item.pm-open .pm-answer {
  flex-basis: 100%; padding-top: 10px;
  font-size: 13px; line-height: 1.55; color: #4d4c48;
}

/* Knowledge panel — sidebar card */
.gl-kp-mock .kpm-grid {
  display: grid; grid-template-columns: 1fr 280px; gap: 18px;
}
.gl-kp-mock .kpm-results .sm-result { padding: 10px 0; border-bottom: 1px solid #ece9e0; }
.gl-kp-mock .kpm-results .sm-result:last-child { border-bottom: none; }
.gl-kp-mock .kpm-results h4 { margin: 0 0 4px; font-size: 15px; font-weight: 400; color: #1a0dab; line-height: 1.3; }
.gl-kp-mock .kpm-results .sm-url { font-size: 11px; color: #5e5d59; font-family: var(--mono); margin-bottom: 3px; }
.gl-kp-mock .kpm-results .sm-desc { font-size: 12.5px; color: #4d4c48; line-height: 1.5; }
.gl-kp-mock .kpm-card {
  border: 1px solid #d4d2cb; border-radius: 12px; padding: 16px;
  background: #fafaf6;
}
.gl-kp-mock .kpm-card .kpm-img {
  width: 100%; aspect-ratio: 16/9; border-radius: 8px;
  background: linear-gradient(135deg, #6b3fde 0%, #c44fb6 100%);
  margin-bottom: 12px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 24px; font-weight: 700;
}
.gl-kp-mock .kpm-card h4 { margin: 0 0 4px; font-size: 18px; font-weight: 500; color: #1c1c1a; }
.gl-kp-mock .kpm-card .kpm-cat { font-size: 12px; color: #5e5d59; margin-bottom: 10px; }
.gl-kp-mock .kpm-card p { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: #2a2926; }
.gl-kp-mock .kpm-card dl {
  margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 5px 12px;
  font-size: 12.5px;
}
.gl-kp-mock .kpm-card dt { color: #5e5d59; }
.gl-kp-mock .kpm-card dd { margin: 0; color: #1c1c1a; }
@media (max-width: 640px) {
  .gl-kp-mock .kpm-grid { grid-template-columns: 1fr; }
}

/* AIO — Google AI Overview */
.gl-aio-mock .am-box {
  border: 1px solid #d4d2cb; border-radius: 14px;
  padding: 18px 20px;
  background: linear-gradient(180deg, #f0f7ff 0%, #f9f8f6 100%);
  margin-bottom: 14px;
}
.gl-aio-mock .am-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
}
.gl-aio-mock .am-head .am-spark {
  width: 22px; height: 22px; border-radius: 6px;
  background: conic-gradient(from 180deg, #1a73e8, #34a853, #fbbc04, #ea4335, #1a73e8);
  display: inline-flex; align-items: center; justify-content: center;
}
.gl-aio-mock .am-head .am-spark svg { width: 13px; height: 13px; color: #fff; }
.gl-aio-mock .am-head .am-label {
  font-size: 13px; font-weight: 600; color: #1a73e8;
}
.gl-aio-mock .am-ans p {
  margin: 0 0 9px; font-size: 14px; line-height: 1.62; color: #2a2926;
}
.gl-aio-mock .am-ans p:last-child { margin-bottom: 0; }
.gl-aio-mock .am-ans sup {
  display: inline-flex; align-items: center; justify-content: center;
  background: #e8f0fe; color: #1a73e8;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 10.5px; font-weight: 600; margin: 0 1px;
  vertical-align: super; line-height: 1; font-family: var(--mono);
}
.gl-aio-mock .am-sources {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid #d4e3f5;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.gl-aio-mock .am-sources .am-src {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid #d4d2cb; border-radius: 16px;
  padding: 5px 10px; font-size: 11.5px; color: #4d4c48; font-family: var(--mono);
}
.gl-aio-mock .am-sources .sm-fav {
  width: 12px; height: 12px; border-radius: 50%;
  background: linear-gradient(135deg, #d97757, #c44fb6);
}

/* Code-mock — stylised code example as a figure */
.gl-body figure.gl-code-mock { margin: 26px 0 30px; display: flex; flex-direction: column; gap: 10px; }
.gl-code-mock .cm-frame {
  background: #faf9f5;
  border: 1px solid var(--border-deep);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-whisper);
  overflow: hidden;
}
.gl-code-mock .cm-head {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--warm-sand);
  padding: 9px 16px;
  border-bottom: 1px solid var(--border-deep);
  font-family: var(--mono);
  font-size: 12px; color: var(--charcoal);
  letter-spacing: 0.02em;
}
.gl-code-mock .cm-head .cm-dots { display: inline-flex; gap: 5px; }
.gl-code-mock .cm-head .cm-dots span {
  width: 9px; height: 9px; border-radius: 50%; background: rgba(0,0,0,0.12);
}
.gl-code-mock .cm-head .cm-dots span:first-child { background: #d97757; }
.gl-code-mock .cm-head .cm-file { color: var(--olive); }
.gl-code-mock pre {
  margin: 0; padding: 16px 18px;
  font-family: var(--mono); font-size: 13px; line-height: 1.6;
  color: #2b2a27; overflow-x: auto;
  background: #faf9f5;
}
.gl-code-mock pre .k { color: #6b3fde; font-weight: 500; }    /* keyword (rel, name, type) */
.gl-code-mock pre .s { color: #3a6b4a; }                       /* string value */
.gl-code-mock pre .c { color: #87867f; font-style: italic; }   /* comment */
.gl-code-mock pre .t { color: #b1543a; }                       /* tag name */
.gl-code-mock pre .a { color: #c44fb6; }                       /* attribute */
.gl-code-mock figcaption {
  font-family: var(--mono); font-size: 12.5px; color: var(--stone);
  text-align: center; letter-spacing: 0.01em; line-height: 1.5;
}

/* Inline figures (screenshots) inside glossary article body */
.gl-body figure.gl-fig {
  margin: 24px 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gl-body figure.gl-fig .gl-fig-wrap {
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
  background: var(--ivory);
}
.gl-body figure.gl-fig img {
  display: block;
  width: 100%;
  height: auto;
}
.gl-body figure.gl-fig figcaption {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--stone);
  text-align: center;
  letter-spacing: 0.01em;
  line-height: 1.5;
}

@media (max-width: 720px) {
  .case-ps { grid-template-columns: 1fr; }
  .case-ps-col { padding: 18px 20px; }
  .case-ps-col--problem { border-right: none; border-bottom: 1px solid var(--border-deep); }
}

/* Refinement-query cells inside case tables — pill style */
.case-table .case-q-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 6px;
}
.case-table .case-q {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  color: var(--charcoal);
  white-space: nowrap;
  padding: 5px 9px 5px 7px;
  background: var(--parchment);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--border-deep);
}
.case-table .case-q::before {
  content: "+";
  color: var(--terracotta);
  font-weight: 700;
  margin-right: 4px;
}
.case-table td .badge {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 999px;
  background: var(--tint-sand);
  color: var(--charcoal);
  box-shadow: inset 0 0 0 1px var(--border-deep);
}

.case-flow {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
}
.case-flow li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 10px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  background: var(--ivory);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
  font-size: 15px;
  line-height: 1.55;
  color: var(--charcoal);
}
.case-flow-from { font-weight: 600; color: var(--near-black); }
.case-flow-arrow { color: var(--terracotta); font-weight: 600; flex-shrink: 0; }
.case-flow-to { color: var(--olive); }

.case-figure {
  margin: 28px 0 22px;
  max-width: 100%;
}
.case-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  background: var(--parchment);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
}
.case-figure figcaption {
  margin-top: 12px;
  font-size: 13px;
  color: var(--stone);
  line-height: 1.55;
  text-align: center;
  max-width: 56em;
  margin-left: auto;
  margin-right: auto;
}

.case-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 22px;
  margin: 28px 0 22px;
  align-items: start;
}
.case-figures .case-figure {
  margin: 0;
}
.case-figures .case-figure img {
  height: 100%;
  max-height: 360px;
  object-fit: cover;
  object-position: top;
}
.case-figures--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.case-figures--3 .case-figure img {
  max-height: 300px;
}

.case-audience-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin: 22px 0 8px;
}
.case-audience-grid .case-chart-card--wide { grid-column: 1 / -1; }
.case-chart-card {
  background: var(--ivory);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
  padding: clamp(18px, 3vw, 24px);
}
.case-chart-card h4 {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
}
.case-bar-chart { display: flex; flex-direction: column; gap: 12px; }
.case-bar {
  display: grid;
  grid-template-columns: minmax(72px, 92px) 1fr auto;
  gap: 8px 14px;
  align-items: center;
}
.case-bar-label {
  font-size: 13px;
  line-height: 1.35;
  color: var(--charcoal);
}
.case-bar-label strong { color: var(--near-black); font-weight: 600; }
.case-bar-track {
  position: relative;
  height: 10px;
  background: var(--warm-sand);
  border-radius: 999px;
  overflow: hidden;
}
.case-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--terracotta);
}
.case-bar-fill--mid { background: #8a8f7a; }
.case-bar-fill--low { background: var(--ring-deep); }
.case-bar-track--affinity .case-bar-baseline {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--charcoal);
  opacity: 0.35;
}
.case-bar-val {
  min-width: 3.2em;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--near-black);
  text-align: right;
  white-space: nowrap;
}
.case-bar-val em {
  font-style: normal;
  font-size: 11px;
  color: var(--stone);
  font-weight: 400;
}
.case-chart-foot {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-deep);
  font-size: 13px;
  line-height: 1.55;
  color: var(--olive);
}
.case-chart-foot strong { color: var(--near-black); font-weight: 600; }
.case-gender-chart {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 18px;
  align-items: center;
}
.case-gender-donut {
  width: 120px;
  height: 120px;
  transform: rotate(-90deg);
}
.case-gender-donut circle { fill: none; stroke-width: 18; }
.case-gender-donut .seg-m { stroke: var(--terracotta); }
.case-gender-donut .seg-f { stroke: #d4d0c4; }
.case-gender-legend { display: flex; flex-direction: column; gap: 10px; }
.case-gender-item {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 14px;
  color: var(--charcoal);
}
.case-gender-item .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--terracotta);
}
.case-gender-item.is-secondary .dot { background: var(--warm-sand); box-shadow: inset 0 0 0 1px var(--border-deep); }
.case-gender-item .pct {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--near-black);
}

.case-funnel-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-top: 4px;
}
.case-funnel-stage {
  width: 100%;
  padding: 18px 20px;
  border-radius: var(--r-lg);
  background: var(--ivory);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
}
.case-funnel-stage--top { border-left: 4px solid var(--terracotta); }
.case-funnel-stage--mid {
  width: 92%;
  border-left: 4px solid #8a8f7a;
}
.case-funnel-stage--bot {
  width: 84%;
  border-left: 4px solid var(--near-black);
}
.case-funnel-connector {
  width: 2px;
  height: 16px;
  background: var(--border-deep);
  position: relative;
  flex-shrink: 0;
}
.case-funnel-connector::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--border-deep);
}
.case-funnel-stage-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 12px;
}
.case-funnel-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--terracotta);
  background: var(--tint-terra);
}
.case-funnel-stage--mid .case-funnel-num {
  color: #6b705c;
  background: rgba(138, 143, 122, 0.14);
}
.case-funnel-stage--bot .case-funnel-num {
  color: var(--near-black);
  background: rgba(20, 20, 19, 0.08);
}
.case-funnel-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--near-black);
}
.case-funnel-queries {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.case-funnel-queries li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--parchment);
  font-size: 14px;
  line-height: 1.5;
  color: var(--charcoal);
}
.case-funnel-queries li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--terracotta);
  flex-shrink: 0;
}
.case-funnel-stage--mid .case-funnel-queries li::before { background: #8a8f7a; }
.case-funnel-stage--bot .case-funnel-queries li::before { background: var(--near-black); }

.case-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
  margin: 22px 0 8px;
}
.case-meta-grid .case-chart-card--wide { grid-column: 1 / -1; }
.case-chart-lead {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--olive);
}
.case-serp-samples {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.case-serp {
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--parchment);
  box-shadow: inset 0 0 0 1px var(--border-deep);
}
.case-serp-url {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  line-height: 1.4;
  color: #2d6a4f;
}
.case-serp-title {
  display: block;
  font-size: clamp(16px, 2.2vw, 18px);
  line-height: 1.35;
  color: #1a4fd6;
  letter-spacing: -0.01em;
}
.case-serp-title strong { font-weight: 600; color: #153ea8; }
.case-meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.case-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 999px;
  background: var(--parchment);
  box-shadow: inset 0 0 0 1px var(--border-deep);
  font-size: 13px;
  line-height: 1.35;
  color: var(--charcoal);
}
.case-meta-pill strong { color: var(--near-black); font-weight: 600; }
.case-meta-splits {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.case-meta-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--parchment);
  box-shadow: inset 0 0 0 1px var(--border-deep);
  font-size: 13px;
  line-height: 1.4;
  color: var(--charcoal);
}
.case-meta-split-a,
.case-meta-split-b {
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--ivory);
  box-shadow: inset 0 0 0 1px var(--border-deep);
  text-align: center;
}
.case-meta-split-a { font-weight: 600; color: var(--near-black); }
.case-meta-split-sep {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--terracotta);
}

.case-figure--zoom {
  cursor: zoom-in;
}
.case-figure--zoom img {
  border-radius: var(--r-md);
  transition: box-shadow var(--t);
}
.case-figure--zoom:hover img {
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
}
.case-figure--zoom:focus-visible {
  outline: none;
}
.case-figure--zoom:focus-visible img {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

.case-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 32px);
  background: rgba(20, 20, 19, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
.case-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.case-lightbox-close {
  position: absolute;
  top: max(16px, env(safe-area-inset-top, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--ivory);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.2s ease;
}
.case-lightbox-close:hover { background: rgba(255, 255, 255, 0.2); }
.case-lightbox-close:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}
.case-lightbox-inner {
  margin: 0;
  max-width: min(96vw, 1280px);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.case-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 120px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lift);
  background: var(--parchment);
}
.case-lightbox-cap {
  margin: 0;
  max-width: min(680px, 96vw);
  font-size: 14px;
  line-height: 1.55;
  color: var(--warm-silver);
  text-align: center;
}
body.case-lightbox-open { overflow: hidden; }

.chartcard { background: var(--ivory); border-radius: var(--r-xl); box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep); padding: clamp(20px, 3vw, 26px) clamp(20px, 3vw, 28px); margin: 22px 0 0; }
.chartcard .ch-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.chartcard .ch-top .lbl { font-size: 13px; color: var(--stone); }
.chartcard .ch-top .big { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--near-black); }
.chartcard .ch-top .big .u { color: var(--terracotta); }
.xaxis { display: flex; justify-content: space-between; font-size: 11px; font-family: var(--mono); color: var(--stone); margin-top: 8px; }

/* legacy aliases (case cards on index) */
.case-facts .f .k { font-size: 12px; font-family: var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--stone); }
.case-facts .f .v { font-size: 16px; color: var(--near-black); font-weight: 500; margin-top: 5px; }
.result-band { background: var(--near-black); border-radius: var(--r-2xl); padding: clamp(24px, 4vw, 38px) clamp(20px, 4vw, 44px); margin: 34px 0 8px; }
.result-band .rb-h { font-size: 12px; font-family: var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--warm-silver); margin-bottom: 22px; }
.result-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 3vw, 28px); }
.result-grid .r .v { font-size: clamp(28px, 4.5vw, 44px); font-weight: 600; letter-spacing: -0.02em; color: var(--ivory); line-height: 1; }
.result-grid .r .v .u { color: var(--coral); }
.result-grid .r .k { font-size: 13.5px; color: var(--warm-silver); margin-top: 10px; }
.steps { counter-reset: step; display: flex; flex-direction: column; gap: 18px; margin: 18px 0; }
.steps .step { display: grid; grid-template-columns: 38px 1fr; gap: 16px; }
.steps .step .sn { counter-increment: step; width: 38px; height: 38px; border-radius: 50%; background: var(--tint-terra); color: var(--terracotta); display: grid; place-items: center; font-weight: 600; font-size: 16px; flex-shrink: 0; }
.steps .step .sn::before { content: counter(step); }
.steps .step .sb h3 { margin: 6px 0 6px; font-size: 18px; }
.steps .step .sb p { font-size: 15.5px; margin-bottom: 0; }
.quote { border-left: 3px solid var(--terracotta); padding: 6px 0 6px 24px; margin: 8px 0; }
.quote p { font-size: clamp(18px, 2.5vw, 20px); line-height: 1.55; color: var(--near-black); font-weight: 500; margin-bottom: 14px; }
.quote .who { display: flex; align-items: center; gap: 12px; }
.quote .who .av { width: 40px; height: 40px; border-radius: 50%; background: var(--warm-sand); display: grid; place-items: center; font-weight: 600; color: var(--charcoal); flex-shrink: 0; }
.quote .who .nm { font-size: 14px; font-weight: 600; color: var(--near-black); }
.quote .who .ro { font-size: 13px; color: var(--stone); }
.footer--compact { padding: clamp(32px, 5vw, 48px) 0 clamp(24px, 4vw, 36px); }

/* ── Article page ───────────────────────────────────────── */
.art-head { padding-block: clamp(24px, 4vw, 36px) 0; }
.art-head h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.1; letter-spacing: -0.026em; max-width: 17em; margin: 18px 0 18px; }
.art-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px 0; border-top: 1px solid var(--border-deep); border-bottom: 1px solid var(--border-deep); }
.art-author { display: flex; align-items: center; gap: 12px; }
.art-author img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; filter: grayscale(1); flex-shrink: 0; }
.art-author .nm { font-size: 15px; font-weight: 600; color: var(--near-black); }
.art-author .ro { font-size: 13px; color: var(--stone); }
.art-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ring-deep); }
.art-meta .mi { font-size: 13.5px; color: var(--stone); font-family: var(--mono); }
.art-layout { display: grid; grid-template-columns: 220px 1fr; gap: clamp(24px, 5vw, 56px); align-items: start; padding-block: clamp(28px, 4vw, 40px) clamp(48px, 7vw, 70px); }
.art-toc { position: sticky; top: calc(var(--nav-h) + 16px); }
.art-toc .tt { font-size: 12px; font-family: var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); margin-bottom: 14px; }
.art-toc a { display: block; font-size: 14px; color: var(--olive); padding: 7px 0 7px 14px; border-left: 2px solid var(--border-deep); transition: all var(--t); }
.art-toc a:hover { color: var(--near-black); }
.art-toc a.active { color: var(--terracotta); border-left-color: var(--terracotta); font-weight: 500; }
.art-body { max-width: 680px; min-width: 0; overflow-wrap: break-word; }
.art-body .dek { font-size: clamp(18px, 2.5vw, 21px); line-height: 1.6; color: var(--olive); margin-bottom: 28px; }
.art-body section { margin-bottom: 36px; scroll-margin-top: calc(var(--nav-h) + 16px); }
.art-body h2 { font-size: clamp(24px, 3.5vw, 28px); margin-bottom: 14px; letter-spacing: -0.02em; }
.art-body p { font-size: clamp(16px, 2vw, 18px); line-height: 1.78; color: var(--charcoal); margin-bottom: 18px; }
.art-body ul { list-style: none; display: flex; flex-direction: column; gap: 11px; margin: 0 0 18px; }
.art-body ul li { position: relative; padding-left: 28px; font-size: 17px; color: var(--charcoal); line-height: 1.6; }
.art-body ul li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--terracotta); }
.art-body ol { margin: 0 0 18px; padding-left: 26px; }
.art-body ol li { font-size: 17px; color: var(--charcoal); line-height: 1.6; padding-left: 6px; margin-bottom: 11px; }
.art-body ol li:last-child { margin-bottom: 0; }

/* Код в статьях: <pre><code> — блок, одиночный <code> — инлайн-плашка.
   Базовых стилей не было вовсе — код рендерился голым моноширинным текстом
   без фона и отступа, следующий абзац липнул вплотную. */
.art-body pre:not([style]) { margin: 0 0 20px; padding: 14px 16px; background: var(--parchment); border: 1px solid var(--border-deep); border-radius: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; tab-size: 2; }
.art-body pre:not([style]) code { display: block; font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--charcoal); background: none; padding: 0; border-radius: 0; box-shadow: none; white-space: pre; overflow-wrap: normal; }
.art-body code { font-family: var(--mono); font-size: 0.9em; background: var(--warm-sand); color: var(--near-black); padding: 2px 6px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--border-deep); overflow-wrap: anywhere; }
.art-body pre code { background: none; padding: 0; border-radius: 0; box-shadow: none; }
@media (max-width: 640px) {
  .art-body pre:not([style]) { padding: 13px 14px; }
  .art-body pre:not([style]) code { font-size: 12px; line-height: 1.6; }
}
.art-body p a, .art-body ul li a, .art-body ol li a { color: var(--terracotta-d); text-decoration: underline; text-decoration-color: rgba(201,100,66,.4); text-underline-offset: 3px; }
.art-body p a:hover, .art-body ul li a:hover, .art-body ol li a:hover { text-decoration-color: var(--terracotta); }
.art-body strong { color: var(--near-black); font-weight: 600; }
.art-body .callout { display: flex; gap: 14px; align-items: flex-start; border-radius: 14px; padding: 20px 22px; margin: 26px 0; background: var(--tint-terra); }
.art-body .callout .ico { flex-shrink: 0; width: 22px; height: 22px; color: var(--terracotta); margin-top: 1px; }
.art-body .callout p { font-size: 16.5px; margin: 0; }
.art-share { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 26px; border-top: 1px solid var(--border-deep); flex-wrap: wrap; }
.art-share span { font-size: 14px; color: var(--stone); }
.art-share .btn { margin-left: auto; width: auto; }

/* ── Article hero with video (bright/visual blog post) ───── */
.art-hero-tags {
  display: flex; align-items: center;
  gap: 14px; flex-wrap: wrap;
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--stone);
}
.art-hero-tag {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--terracotta);
  font-weight: 500;
}
.art-hero-tag svg { width: 14px; height: 14px; }
.art-hero-tag--ink,
.art-hero-tag--green,
.art-hero-tag--sand { color: var(--charcoal); font-weight: 400; }
.art-hero-tags > * + *::before {
  content: "·";
  margin-right: 14px;
  color: var(--ring-deep);
}

.art-video {
  position: relative;
  margin: 8px 0 28px;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--r-2xl);
  background: linear-gradient(135deg, #1f1f1d, #30302e);
  box-shadow: 0 12px 40px rgba(20,20,19,0.18), 0 0 0 1px var(--border-deep);
}
.art-video iframe {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  border: 0;
}
.art-video-cap {
  margin: -20px 0 28px;
  font-size: 13.5px;
  color: var(--stone);
  text-align: center;
  font-family: var(--mono);
  letter-spacing: 0.02em;
}
/* Ленивый facade для YouTube: превью грузится сразу, тяжёлый плеер — только по клику */
.yt-facade {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  cursor: pointer; background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
}
.yt-facade::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(20,20,19,0.12); transition: background .2s;
}
.yt-facade:hover::before, .yt-facade:focus-visible::before { background: rgba(20,20,19,0.26); }
.yt-facade .yt-play {
  position: relative; width: 68px; height: 48px; border-radius: 13px;
  background: rgba(20,20,19,0.72); display: flex; align-items: center;
  justify-content: center; transition: background .2s;
}
.yt-facade:hover .yt-play, .yt-facade:focus-visible .yt-play { background: #c96442; }
.yt-facade .yt-play::after {
  content: ""; border-style: solid; border-width: 11px 0 11px 19px;
  border-color: transparent transparent transparent #fff; margin-left: 4px;
}

.art-tldr {
  display: grid; grid-template-columns: 46px 1fr; gap: 14px;
  margin: 28px 0 28px;
  padding: 22px 24px;
  background: linear-gradient(135deg, var(--tint-terra), #f5e7df);
  border-radius: var(--r-xl);
  box-shadow: 0 8px 30px rgba(201,100,66,0.10), inset 0 0 0 1px rgba(201,100,66,0.18);
}
.art-tldr .ico {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--terracotta); color: var(--ivory);
  display: grid; place-items: center; flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(201,100,66,0.32);
}
.art-tldr .ico svg { width: 24px; height: 24px; }
.art-tldr .ttl {
  display: block;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--terracotta); margin-bottom: 8px;
}
.art-tldr p { font-size: 17px; line-height: 1.6; color: var(--near-black); margin: 0; font-weight: 500; }
.art-tldr ul { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 8px; }
.art-tldr ul li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.55; color: var(--near-black); }
.art-tldr ul li::before { content: ""; position: absolute; left: 0; top: 8px; width: 12px; height: 2px; background: var(--terracotta); border-radius: 2px; }

.art-body .callout--green {
  background: var(--tint-green);
  box-shadow: inset 0 0 0 1px rgba(58,107,74,0.16);
}
.art-body .callout--green .ico { color: var(--green); }
.art-body .callout--sand {
  background: var(--tint-sand);
  box-shadow: inset 0 0 0 1px var(--border-deep);
}
.art-body .callout--sand .ico { color: var(--charcoal); }

.art-body figure {
  margin: 26px 0;
}
.art-body figure img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-lg);
  box-shadow: 0 8px 28px rgba(20,20,19,0.10), inset 0 0 0 1px var(--border-deep);
  background: var(--parchment);
}
.art-body figure figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--stone);
  text-align: center;
  line-height: 1.5;
}

.art-takeaway {
  margin: 32px 0 24px;
  padding: 26px 28px;
  background: var(--near-black);
  color: var(--ivory);
  border-radius: var(--r-xl);
  box-shadow: 0 14px 40px rgba(20,20,19,0.22);
  position: relative;
  overflow: hidden;
}
.art-takeaway::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 60% at 100% 0%, rgba(217,119,87,0.20), transparent 60%);
  pointer-events: none;
}
.art-takeaway .ttl {
  display: block;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--coral); margin-bottom: 10px;
  position: relative; z-index: 1;
}
.art-takeaway p { font-size: 17.5px; line-height: 1.6; color: var(--ivory); margin: 0; position: relative; z-index: 1; }
.art-takeaway p + p { margin-top: 10px; }
.art-takeaway p a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255,253,248,.45); text-underline-offset: 3px; }
.art-takeaway strong { color: var(--coral); font-weight: 600; }

/* Bright article meta chip row */
.art-meta .badge--bright {
  background: var(--terracotta); color: var(--ivory);
  box-shadow: 0 3px 10px rgba(201,100,66,0.24);
}

/* ── KP (Коммерческие предложения) ───────────────────────── */
.kp-head { padding-block: clamp(24px, 4vw, 36px) 0; }
.kp-head h1 {
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.024em;
  margin: 18px 0 18px;
  max-width: 22em;
}
.kp-meta {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  padding: 18px 0;
  border-top: 1px solid var(--border-deep);
  border-bottom: 1px solid var(--border-deep);
}
.kp-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ring-deep); }
.kp-meta .mi { font-size: 13.5px; color: var(--stone); font-family: var(--mono); }

.kp-intro {
  font-size: clamp(17px, 2.2vw, 20px);
  line-height: 1.6;
  color: var(--charcoal);
  max-width: 38em;
  margin: 26px 0 0;
}

.kp-body { max-width: 820px; }
.kp-body .case-table-block { margin-left: -8px; margin-right: -8px; }
.kp-body section { margin-bottom: 40px; scroll-margin-top: calc(var(--nav-h) + 16px); }
.kp-body h2 {
  font-size: clamp(24px, 3.5vw, 30px);
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}
.kp-body h3 {
  font-size: 19px;
  margin: 24px 0 10px;
  letter-spacing: -0.015em;
}
.kp-body p {
  font-size: clamp(16px, 2vw, 17.5px);
  line-height: 1.72;
  color: var(--charcoal);
  margin-bottom: 16px;
}
.kp-body ul {
  list-style: none; display: flex; flex-direction: column; gap: 10px;
  margin: 0 0 18px; padding: 0;
}
.kp-body ul li {
  position: relative;
  padding-left: 24px;
  font-size: 16px;
  color: var(--charcoal);
  line-height: 1.6;
}
.kp-body ul li::before {
  content: "";
  position: absolute; left: 4px; top: 10px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--terracotta);
}
.kp-body strong { color: var(--near-black); font-weight: 600; }

/* Highlighted pricing block */
.kp-price {
  margin: 28px 0;
  padding: clamp(22px, 3vw, 28px);
  background: linear-gradient(135deg, var(--tint-terra), #f4e0d3);
  border-radius: var(--r-xl);
  box-shadow: 0 8px 28px rgba(201,100,66,0.10), inset 0 0 0 1px rgba(201,100,66,0.18);
}
.kp-price .kp-price-label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--terracotta); display: block; margin-bottom: 10px;
}
.kp-price .kp-price-amount {
  font-family: var(--serif); font-size: clamp(28px, 4vw, 36px);
  font-weight: 600; color: var(--near-black);
  line-height: 1.1; letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.kp-price p { font-size: 15.5px; color: var(--charcoal); margin: 0; }
.kp-price ul { margin-top: 14px; }

/* ============================================================
   KP SEO MATRIX — card-grid вместо широкой таблицы
   ============================================================ */

.kp-matrix {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px; margin: 24px 0;
}
.kp-matrix-card {
  display: flex; flex-direction: column;
  background: var(--ivory); border-radius: var(--r-lg);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
  overflow: hidden;
  transition: box-shadow var(--t), transform var(--t);
}
.kp-matrix-card:hover {
  box-shadow: var(--shadow-lift), inset 0 0 0 1px var(--ring-deep);
  transform: translateY(-1px);
}

/* Header: URL + type badge */
.kp-matrix-h {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding: 12px 16px;
  background: var(--parchment);
  border-bottom: 1px solid var(--border-deep);
}
.kp-matrix-h .url {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 12.5px;
  color: var(--terracotta-d); font-weight: 500;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kp-matrix-h .url svg { flex-shrink: 0; color: var(--stone); }
.kp-matrix-type {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
  background: var(--warm-sand); color: var(--charcoal);
  flex-shrink: 0; font-weight: 500;
}
.kp-matrix-type--commerce {
  background: rgba(201,100,66,0.14); color: var(--terracotta-d);
}
.kp-matrix-type--info {
  background: rgba(94, 134, 98, 0.16); color: #5e8662;
}
.kp-matrix-type--barrier {
  background: rgba(120, 130, 145, 0.16); color: #586176;
}

/* Meta dl (H1 / Title / Description) */
.kp-matrix-meta {
  display: grid; grid-template-columns: auto 1fr;
  gap: 6px 14px; padding: 14px 16px;
  margin: 0; border-bottom: 1px solid var(--border-deep);
}
.kp-matrix-meta dt {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--stone); font-weight: 500;
  padding-top: 2px;
}
.kp-matrix-meta dd {
  margin: 0; font-size: 13.5px; color: var(--near-black); line-height: 1.45;
}
.kp-matrix-meta dt:first-of-type + dd { font-weight: 600; }

/* Footer: keywords chips + why */
.kp-matrix-f {
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.kp-matrix-keys .lbl,
.kp-matrix-why .lbl {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--stone); font-weight: 500;
  display: block; margin-bottom: 6px;
}
.kp-matrix-keys .chips {
  display: flex; flex-wrap: wrap; gap: 5px;
}
.kp-matrix-keys .chip {
  font-family: var(--mono); font-size: 11.5px;
  color: var(--charcoal); background: var(--parchment);
  box-shadow: inset 0 0 0 1px var(--border-deep);
  padding: 3px 9px; border-radius: 999px;
}
.kp-matrix-why p {
  margin: 0; font-size: 13px; color: var(--charcoal);
  line-height: 1.5; font-style: italic;
}

@media (max-width: 820px) {
  .kp-matrix { grid-template-columns: 1fr; gap: 12px; }
}

/* ============================================================
   KP RECEIPT — paper-check / счёт-стиль для итогового блока
   ============================================================ */

.kp-receipt {
  margin: 36px 0;
  display: flex; justify-content: center;
  position: relative;
}
.kp-receipt-paper {
  width: 100%;
  max-width: 640px;
  background: #fefcf7;
  padding: clamp(26px, 4vw, 38px) clamp(24px, 4vw, 44px);
  position: relative;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.04),
    0 14px 30px -10px rgba(20,20,19,0.18),
    inset 0 0 0 1px rgba(0,0,0,0.04);
  font-family: var(--mono);
  color: var(--near-black);
}
/* Perforated top + bottom edges */
.kp-receipt-paper::before,
.kp-receipt-paper::after {
  content: "";
  position: absolute; left: 0; right: 0; height: 12px;
  background-image:
    radial-gradient(circle at 8px 8px, transparent 5px, #fefcf7 5.5px),
    radial-gradient(circle at 8px 8px, transparent 5px, transparent 5.5px);
  background-size: 16px 12px;
  background-repeat: repeat-x;
  pointer-events: none;
}
.kp-receipt-paper::before {
  top: -10px;
  background: radial-gradient(circle at 8px 0, transparent 5px, #fefcf7 5.5px) repeat-x 0 0/16px 12px;
  filter: drop-shadow(0 -2px 1px rgba(0,0,0,0.04));
}
.kp-receipt-paper::after {
  bottom: -10px;
  background: radial-gradient(circle at 8px 12px, transparent 5px, #fefcf7 5.5px) repeat-x 0 0/16px 12px;
  filter: drop-shadow(0 2px 1px rgba(0,0,0,0.04));
}

/* Header */
.kp-receipt-head {
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: 24px;
  padding-bottom: 18px;
  border-bottom: 2px dashed var(--border-deep);
  margin-bottom: 22px;
}
.kp-receipt-head--meta-only { justify-content: flex-end; }
.kp-receipt-logo .mark {
  display: block;
  font-family: var(--serif); font-size: 18px; font-weight: 600;
  color: var(--near-black); letter-spacing: -0.014em;
}
.kp-receipt-logo .sub {
  display: block; font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--stone); margin-top: 3px;
}
.kp-receipt-meta {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11.5px; text-align: right;
}
.kp-receipt-meta > div {
  display: flex; justify-content: flex-end; gap: 8px;
  align-items: baseline;
}
.kp-receipt-meta .lbl {
  color: var(--stone); text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px;
}
.kp-receipt-meta .val { color: var(--near-black); font-weight: 500; }

/* Title */
.kp-receipt-title { margin-bottom: 22px; }
.kp-receipt-title .lbl {
  display: block;
  font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--terracotta);
  margin-bottom: 4px;
}
.kp-receipt-title .nm {
  display: block;
  font-family: var(--serif); font-size: clamp(20px, 2.5vw, 24px);
  font-weight: 600; color: var(--near-black); letter-spacing: -0.014em;
  line-height: 1.18;
}

/* Items */
.kp-receipt-items {
  display: flex; flex-direction: column; gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--border-deep);
  border-bottom: 1px solid var(--border-deep);
}
.kp-receipt-item {
  display: grid; grid-template-columns: 1fr auto auto; gap: 8px;
  align-items: end;
}
.kp-receipt-item .desc {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
}
.kp-receipt-item .desc .nm {
  font-family: var(--sans); font-size: 15px;
  font-weight: 600; color: var(--near-black);
  line-height: 1.25;
}
.kp-receipt-item .desc .sub {
  font-family: var(--sans); font-size: 12.5px;
  color: var(--stone); line-height: 1.4;
}
.kp-receipt-item .leader {
  flex: 1; min-width: 20px;
  border-bottom: 1.5px dotted var(--ring-deep);
  margin: 0 4px 7px;
  align-self: end; min-height: 8px;
}
.kp-receipt-item .amount {
  font-family: var(--mono); font-size: 15.5px; font-weight: 500;
  color: var(--near-black); letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Totals (descriptive rows) */
.kp-receipt-totals {
  display: flex; flex-direction: column; gap: 9px;
  padding: 18px 0 20px;
  border-bottom: 1px solid var(--border-deep);
}
.kp-receipt-totals .row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px;
  font-family: var(--sans);
}
.kp-receipt-totals .k {
  font-size: 12px; letter-spacing: 0.04em;
  color: var(--olive); text-transform: uppercase;
  font-weight: 500;
}
.kp-receipt-totals .v {
  font-size: 14px; color: var(--near-black);
  text-align: right; font-weight: 500;
}

/* Grand total */
.kp-receipt-grand {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 20px 0;
  margin-top: 4px;
  border-top: 4px double var(--near-black);
  border-bottom: 4px double var(--near-black);
}
.kp-receipt-grand .lbl {
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  color: var(--near-black); text-transform: uppercase;
  letter-spacing: 0.06em;
}
.kp-receipt-grand .val {
  font-family: var(--mono); font-size: clamp(26px, 4vw, 32px);
  font-weight: 600; color: var(--terracotta-d);
  letter-spacing: 0.01em; line-height: 1;
}

/* Footer: signature + stamp */
.kp-receipt-foot {
  display: flex; justify-content: space-between; gap: 24px;
  padding-top: 24px; margin-top: 4px;
  align-items: flex-end;
}
.kp-receipt-sign { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kp-receipt-sign .lbl {
  font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--stone);
}
.kp-receipt-sign .signature {
  font-family: 'Segoe Script', 'Brush Script MT', cursive;
  font-size: 26px; color: var(--terracotta-d);
  line-height: 1; letter-spacing: 0.02em;
  margin-top: 2px;
  transform: rotate(-2deg);
  transform-origin: left center;
  display: inline-block;
}
.kp-receipt-sign .sub {
  font-size: 11px; color: var(--stone);
  font-family: var(--sans); margin-top: 8px;
}

/* Round stamp */
.kp-receipt-stamp {
  position: relative;
  width: 96px; height: 96px;
  border-radius: 50%;
  border: 2.5px solid var(--terracotta);
  display: grid; place-items: center;
  color: var(--terracotta);
  flex-shrink: 0;
  transform: rotate(-8deg);
  opacity: 0.75;
  filter: contrast(0.95);
}
.kp-receipt-stamp::before {
  content: "";
  position: absolute; inset: 6px;
  border: 1.5px solid var(--terracotta);
  border-radius: 50%;
}
.kp-receipt-stamp .ring {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.14em; font-weight: 600;
}
/* Curve "PAWETTA · SEO · 2026" around the top of the stamp via clip */
.kp-receipt-stamp .ring {
  background: conic-gradient(transparent 0deg, transparent 360deg);
}
.kp-receipt-stamp .middle {
  font-family: var(--serif);
  font-size: 22px; font-weight: 700;
  letter-spacing: 0.03em; line-height: 1;
  color: var(--terracotta);
}

@media (max-width: 640px) {
  .kp-receipt-head { flex-direction: column; gap: 12px; }
  .kp-receipt-meta > div { justify-content: flex-start; }
  .kp-receipt-item { grid-template-columns: 1fr; }
  .kp-receipt-item .leader { display: none; }
  .kp-receipt-item .amount {
    font-size: 16px; padding-top: 2px;
    border-top: 1px dashed var(--border-deep);
  }
  .kp-receipt-foot { flex-direction: column-reverse; align-items: flex-start; gap: 18px; }
  .kp-receipt-stamp { margin-left: auto; }
}

/* Source-link badge near title */
.kp-source {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 12px;
  color: var(--stone);
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--parchment);
  box-shadow: inset 0 0 0 1px var(--border-deep);
}
.kp-source svg { width: 12px; height: 12px; }

/* Inline tag list at top of KP card/page */
.kp-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 14px;
}

/* KP figures inside body */
.kp-body figure {
  margin: 24px 0;
}
.kp-body figure img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
  background: var(--parchment);
}
.kp-body figure figcaption {
  margin-top: 10px;
  font-size: 13px; color: var(--stone);
  text-align: center;
  line-height: 1.5;
}

/* Final CTA card on KP page */
.kp-cta {
  margin: 36px 0 0;
  padding: clamp(24px, 3vw, 32px);
  background: var(--near-black);
  color: var(--ivory);
  border-radius: var(--r-xl);
  box-shadow: 0 14px 40px rgba(20,20,19,0.22);
  position: relative; overflow: hidden;
}
.kp-cta::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 100% 0%, rgba(217,119,87,0.22), transparent 60%);
  pointer-events: none;
}
.kp-cta h3 {
  position: relative; z-index: 1;
  font-size: clamp(20px, 3vw, 24px);
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--ivory);
}
.kp-cta p {
  position: relative; z-index: 1;
  font-size: 16px;
  color: var(--warm-silver);
  margin: 0 0 20px;
}
.kp-cta .cta-actions {
  position: relative; z-index: 1;
  display: flex; gap: 12px; flex-wrap: wrap;
}
.kp-outro-wrap {
  margin: 36px 0 0;
  max-width: 58ch;
}
.kp-outro {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--olive);
}
.kp-outro-wrap .kp-outro + .kp-outro {
  margin-top: 12px;
  font-size: 14px;
  color: var(--stone);
}

/* KP listing on /kp/ */
.kp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--grid-gap);
}
.kp-card {
  display: flex; flex-direction: column;
  padding: 24px 26px;
  background: var(--ivory);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
  text-decoration: none;
  color: inherit;
  transition: transform var(--t), box-shadow var(--t);
  position: relative;
  overflow: hidden;
}
.kp-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--terracotta), var(--coral));
  opacity: 0.85;
}
.kp-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift), inset 0 0 0 1px var(--ring-deep);
}
.kp-card-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 14px;
}
.kp-card h3 {
  font-size: 18px;
  line-height: 1.3;
  margin: 0 0 10px;
  color: var(--near-black);
  transition: color var(--t);
}
.kp-card:hover h3 { color: var(--terracotta); }
.kp-card p {
  font-size: 14.5px;
  color: var(--olive);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}
.kp-card-foot {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border-cream);
  font-family: var(--mono); font-size: 12px;
  color: var(--stone);
  align-items: center;
}
.kp-card-foot .v { color: var(--near-black); font-weight: 500; }
.kp-card-arrow {
  margin-left: auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--tint-sand);
  display: grid; place-items: center;
  transition: background var(--t), transform var(--t);
}
.kp-card:hover .kp-card-arrow { background: var(--terracotta); }
.kp-card:hover .kp-card-arrow svg { color: var(--ivory); transform: translateX(2px); }
.kp-card-arrow svg { width: 12px; height: 12px; color: var(--charcoal); transition: color var(--t), transform var(--t); }
/* KP card — result/goal signal */
.kp-goal {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--terracotta); background: var(--tint-sand);
  padding: 3px 9px; border-radius: 999px; letter-spacing: .01em;
  white-space: nowrap;
}
.kp-goal svg { width: 12px; height: 12px; flex-shrink: 0; }

/* ArtKelo KP — content blocks in site design */
.kp-artkelo .audit,
.kp-artkelo .steal { display: grid; gap: 14px; margin: 22px 0 8px; grid-template-columns: repeat(2, 1fr); }
.kp-artkelo .ac,
.kp-artkelo .stc {
  background: var(--ivory); border-radius: var(--r-lg);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
  overflow: hidden;
}
.kp-artkelo .ac,
.kp-artkelo .stc { padding: 18px; position: relative; border-left: 4px solid #c0392b; }
.kp-artkelo .ac.warn { border-left-color: #c08322; }
.kp-artkelo .ac h4,
.kp-artkelo .stc h4 { font-size: 16px; margin: 0 0 6px; }
.kp-artkelo .ac p,
.kp-artkelo .stc p { font-size: 14.5px; color: var(--olive); margin: 0; max-width: none; }
.kp-artkelo .ac code { font-family: var(--mono); font-size: 12px; background: var(--parchment); padding: 1px 5px; border-radius: 4px; }
.kp-artkelo .stc .n { font-family: var(--mono); font-size: 13px; color: var(--terracotta); font-weight: 600; margin-bottom: 8px; }
.kp-artkelo .stc .qs,
.kp-artkelo .keys { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.kp-artkelo .q,
.kp-artkelo .key { font-family: var(--mono); font-size: 11px; background: var(--parchment); border: 1px solid var(--border-deep); color: var(--stone); padding: 3px 8px; border-radius: 6px; }
.kp-artkelo .strat-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; margin: 22px 0 8px; align-items: stretch; }
.kp-artkelo .strat-col { background: var(--ivory); border-radius: var(--r-lg); box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep); padding: 22px; }
.kp-artkelo .strat-col .tag { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 400; margin-bottom: 10px; display: inline-block; padding: 4px 9px; border-radius: 6px; background: var(--tint-sand); color: var(--terracotta); }
.kp-artkelo .strat-col h4 { font-size: 18px; margin: 0 0 8px; }
.kp-artkelo .strat-col p { font-size: 14.5px; color: var(--olive); margin: 0; max-width: none; }
.kp-artkelo .strat-mid { display: grid; place-items: center; color: var(--terracotta); }
.kp-artkelo .pc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--border-deep); background: var(--parchment); }
.kp-artkelo .pc-url { font-family: var(--mono); font-size: 12px; color: var(--terracotta); display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-artkelo .badge { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; padding: 4px 8px; border-radius: 6px; background: var(--tint-sand); color: var(--terracotta); }
.kp-artkelo .b-info { background: var(--tint-green, #e0e8d6); color: #5d7a4a; }
.kp-artkelo .b-cmp { background: #d9e4ec; color: #3f6582; }
.kp-artkelo .b-tru { background: #ece0c4; color: #9a7b2e; }
.kp-artkelo .pc-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.kp-artkelo .row { display: grid; grid-template-columns: 78px 1fr; gap: 10px; }
.kp-artkelo .row .k { font-family: var(--mono); font-size: 10px; text-transform: uppercase; color: var(--stone); }
.kp-artkelo .row .v.h1 { font-weight: 600; }
.kp-artkelo .why { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--border-deep); font-size: 13px; font-style: italic; color: var(--stone); }
.kp-artkelo .ex { font-family: var(--mono); font-size: 9px; font-weight: 700; color: #5d7a4a; background: #e0e8d6; padding: 2px 6px; border-radius: 5px; margin-left: 6px; font-style: normal; }
.kp-artkelo .uni-note { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.kp-artkelo .pill { font-family: var(--mono); font-size: 12px; background: var(--ivory); border: 1px solid var(--border-deep); border-radius: 8px; padding: 7px 12px; color: var(--stone); }
.kp-artkelo .ba { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin: 20px 0 8px; }
.kp-artkelo .ba-box { border: 1px solid var(--border-deep); border-radius: var(--r-lg); background: var(--ivory); padding: 16px; }
.kp-artkelo .ba-box.old { border-left: 4px solid #c0392b; }
.kp-artkelo .ba-box.new { border-left: 4px solid #5d7a4a; }
.kp-artkelo .ba-box .t { font-family: var(--mono); font-size: 11px; text-transform: uppercase; font-weight: 600; margin-bottom: 8px; }
.kp-artkelo .ba-box.old .t { color: #c0392b; }
.kp-artkelo .ba-box.new .t { color: #5d7a4a; }
.kp-artkelo .ba-box .ln { font-size: 14px; margin-bottom: 6px; }
.kp-artkelo .ba-box .ln span { font-family: var(--mono); font-size: 10px; color: var(--stone); text-transform: uppercase; display: block; margin-bottom: 2px; }
/* Google SERP mockup — до/после на КП */
.kp-serp-compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin: 22px 0 8px;
}
.kp-serp-panel {
  background: var(--ivory); border-radius: var(--r-xl);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
  padding: 18px 20px 20px; overflow: hidden;
}
.kp-serp-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 400;
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 16px;
}
.kp-serp-panel--before .kp-serp-label { color: #c0392b; }
.kp-serp-panel--after .kp-serp-label { color: #5d7a4a; }
.kp-serp-pin {
  width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0;
}
.kp-google {
  background: #fff; border: 1px solid #ebebeb; border-radius: 12px;
  padding: 18px 18px 16px; font-family: Arial, Helvetica, sans-serif;
}
.kp-google-fav {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
}
.kp-google-ico {
  width: 28px; height: 28px; border-radius: 50%;
  background: #141413; color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px; flex-shrink: 0;
  font-family: var(--sans, system-ui, sans-serif);
}
.kp-google-site { line-height: 1.2; min-width: 0; }
.kp-google-name {
  display: block; font-size: 14px; font-weight: 400; color: #202124;
}
.kp-google-breadcrumb {
  display: block; font-size: 12px; color: #4d5156; margin-top: 1px;
}
.kp-google-title {
  font-size: 20px; line-height: 1.3; font-weight: 400;
  color: #1a0dab; letter-spacing: -.01em;
  margin: 2px 0 4px; cursor: default;
}
.kp-google-stars {
  display: flex; align-items: center; gap: 6px;
  margin: 2px 0 4px; font-size: 13px; color: #4d5156; line-height: 1.3;
}
.kp-google-stars-ico {
  color: #fbbc04; font-size: 15px; letter-spacing: 1px; line-height: 1;
}
.kp-google-stars-txt { color: #4d5156; }
.kp-google-stars-txt strong { color: #202124; font-weight: 600; }
.kp-google-desc {
  font-size: 14px; line-height: 1.58; color: #4d5156; margin: 0;
}
.kp-google-desc strong { color: #202124; font-weight: 600; }
.kp-google-desc--ghost { color: #9aa0a6; font-style: italic; }
@media (max-width: 760px) {
  .kp-serp-compare { grid-template-columns: 1fr; }
  .kp-google-title { font-size: 18px; }
}
/* KP catalog tree (ArtKelo and similar) */
.kp-catalog-legend {
  display: flex; flex-wrap: wrap; gap: 18px;
  margin: 16px 0 10px; font-size: 13px; color: var(--stone);
}
.kp-catalog-leg { display: inline-flex; align-items: center; gap: 8px; }
.kp-catalog-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block;
}
.kp-catalog-dot--g { background: #5d7a4a; }
.kp-catalog-dot--p { background: var(--terracotta); }
.kp-catalog-dot--n { background: var(--ring-deep); }
.kp-catalog {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin: 20px 0 8px;
}
.kp-catalog-branch {
  background: var(--ivory); border-radius: var(--r-xl);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
  overflow: hidden; display: flex; flex-direction: column;
}
.kp-catalog-branch--wide { grid-column: 1 / -1; }
.kp-catalog-branch-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px; background: var(--parchment);
  border-bottom: 1px solid var(--border-deep);
}
.kp-catalog-branch-head h4 {
  margin: 0; font-size: 16px; font-weight: 600; color: var(--near-black);
}
.kp-catalog-cnt,
.kp-catalog-slug {
  font-family: var(--mono); font-size: 11.5px; color: var(--stone);
}
.kp-catalog-slug { margin-left: auto; color: var(--terracotta-d); font-weight: 500; }
.kp-catalog-body { padding: 10px 12px 14px; flex: 1; }
.kp-catalog-groups {
  display: grid; grid-template-columns: 1fr; gap: 4px 0;
}
.kp-catalog-groups--2 {
  grid-template-columns: 1fr 1fr; gap: 4px 16px;
}
.kp-catalog-group-label {
  grid-column: 1 / -1;
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--stone); font-weight: 500;
  padding: 10px 8px 4px;
}
.kp-catalog-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.kp-catalog-item {
  position: relative; padding: 8px 8px 8px 22px;
  border-radius: 8px; transition: background .12s;
}
.kp-catalog-item:hover { background: var(--parchment); }
.kp-catalog-item::before {
  content: ""; position: absolute; left: 8px; top: 14px;
  width: 7px; height: 7px; border-radius: 50%;
}
.kp-catalog-item--g::before { background: #5d7a4a; }
.kp-catalog-item--p::before { background: var(--terracotta); }
.kp-catalog-item--n::before { background: var(--ring-deep); }
.kp-catalog-url {
  display: block; font-family: var(--mono); font-size: 13px;
  font-weight: 500; color: var(--near-black); line-height: 1.35;
}
.kp-catalog-q {
  display: block; font-size: 13px; color: var(--stone); line-height: 1.4; margin-top: 1px;
}
.kp-catalog-articles {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-deep);
}
.kp-catalog-articles .lbl {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--stone); font-weight: 500;
  display: block; margin-bottom: 8px;
}
.kp-catalog-articles .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kp-catalog-articles .chip {
  font-size: 13px; background: var(--parchment);
  box-shadow: inset 0 0 0 1px var(--border-deep);
  border-radius: 8px; padding: 7px 11px; color: var(--charcoal); line-height: 1.3;
}
@media (max-width: 820px) {
  .kp-catalog { grid-template-columns: 1fr; }
  .kp-catalog-groups--2 { grid-template-columns: 1fr; }
}
.kp-artkelo .demo { border: 1px solid var(--border-deep); border-radius: var(--r-lg); overflow: hidden; background: var(--ivory); margin: 16px 0 8px; }
.kp-artkelo .demo .dh { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--border-deep); background: var(--parchment); flex-wrap: wrap; }
.kp-artkelo .demo .db { padding: 20px; }
.kp-artkelo .seg { display: inline-flex; border: 1px solid var(--border-deep); border-radius: 9px; overflow: hidden; margin: 14px 0 4px; }
.kp-artkelo .seg button { border: none; background: var(--ivory); padding: 8px 16px; font-family: inherit; font-size: 14px; cursor: pointer; color: var(--stone); }
.kp-artkelo .seg button.on { background: var(--near-black); color: var(--ivory); }
.kp-artkelo .calc-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.kp-artkelo .calc-row .cl { font-size: 14px; color: var(--stone); }
.kp-artkelo .calc-row .cv { font-family: var(--mono); font-weight: 600; }
.kp-artkelo input[type=range] { width: 100%; accent-color: var(--terracotta); }
.kp-artkelo .calc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 20px 0 0; }
.kp-artkelo .calc-stats .cell { background: var(--parchment); border: 1px solid var(--border-deep); border-radius: 10px; padding: 12px; }
.kp-artkelo .calc-stats .cell .v { font-size: 22px; font-weight: 700; color: var(--terracotta); }
.kp-artkelo .calc-stats .cell .l { font-size: 12px; color: var(--stone); }
.kp-artkelo .calc-formula { font-family: var(--mono); font-size: 12px; color: var(--stone); margin: 14px 0 0; padding: 11px 14px; background: var(--parchment); border: 1px dashed var(--border-deep); border-radius: 9px; }
.kp-artkelo .forest-wrap { margin-top: 18px; background: var(--near-black); border-radius: 12px; padding: 16px; color: var(--ivory); }
.kp-artkelo .forest { display: flex; flex-wrap: wrap; gap: 3px; align-items: flex-end; min-height: 54px; }
.kp-artkelo .calc-out { margin-top: 14px; }
.kp-artkelo .calc-out .note { font-size: 12px; line-height: 1.5; color: var(--stone); margin: 0; }
.kp-artkelo .gsnip { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border-deep); }
.kp-artkelo .gsnip .gt { color: #1a4fd6; font-size: 15px; line-height: 1.35; }
.kp-artkelo .gsnip .gd { font-size: 12.5px; color: var(--olive); }
@media (max-width: 760px) {
  .kp-artkelo .audit, .kp-artkelo .steal, .kp-artkelo .ba, .kp-artkelo .strat-grid { grid-template-columns: 1fr; }
  .kp-serp-compare { grid-template-columns: 1fr; }
  .kp-artkelo .strat-mid { display: none; }
  .kp-artkelo .calc-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ── Utility bands ──────────────────────────────────────── */
.band-ivory { background: var(--ivory); border-top: 1px solid var(--border-deep); border-bottom: 1px solid var(--border-deep); }

/* ══ Responsive (pages) ═══════════════════════════════════ */

@media (max-width: 1100px) {
  .bgrid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-grid > .portrait-wrap { display: none; }
  .hero-cta .btn { width: auto; }
  .case-feat, .about-grid, .contact, .kgrid { grid-template-columns: 1fr; }
  .cases-summary { gap: 18px 28px; padding: 16px 18px; }
  .kthumb-tag { top: 10px; left: 10px; font-size: 10px; padding: 4px 8px; }
  .about-photo { max-width: 280px; }
  .about-grid .about-photo { margin: 0 auto; }
  .post-row { grid-template-columns: 56px 1fr; }
  .post-side { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; text-align: left; margin-top: 4px; padding-left: 56px; }
  .post-read { margin-top: 0; }
  .proc { grid-template-columns: 1fr 1fr; }
  .svc-row { grid-template-columns: 1fr; }
  .svc-row .sr { text-align: left; align-items: flex-start; flex-direction: row; flex-wrap: wrap; width: 100%; justify-content: space-between; }
  .feat { grid-template-columns: 1fr; }
  .vcard--feat { grid-template-columns: 1fr; }
  .vcard--feat .vthumb { aspect-ratio: 16/9; min-height: 0; }
  .feat .cover { min-height: 200px; }
  .feat .fb { padding: 28px 24px; }
  .case-layout, .art-layout { grid-template-columns: 1fr; gap: 24px; }
  .art-toc { display: none; }
  /* mobile overflow guard: wide tables/code scroll instead of stretching the column */
  .art-body table { display: block; max-width: 100%; overflow-x: auto; }
  .art-body pre { max-width: 100%; overflow-x: auto; }
  .art-body code { overflow-wrap: anywhere; }
  .case-facts, .case-metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .case-visual-inner { grid-template-columns: 1fr; min-height: 180px; }
  .case-results { grid-template-columns: 1fr; }
  .result-grid { grid-template-columns: 1fr 1fr; }
  .marquee { flex-direction: column; align-items: flex-start; gap: 12px; }
  .mq-viewport { width: 100%; }
  .courses-catalog { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .courses-catalog.is-pro { max-width: none; grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .hero h1 { font-size: clamp(28px, 8vw, 36px); }
  .hero-proof { gap: 16px 24px; }
  .hero-proof .metric { flex: 1 1 calc(50% - 12px); min-width: 120px; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; }
  .case-proof { gap: 16px 24px; }
  .case-proof .metric { flex: 1 1 calc(50% - 12px); }
  .case-stats, .kstats { gap: 16px; }
  .proc { grid-template-columns: 1fr; }
  .bgrid { grid-template-columns: 1fr; }
  .post-row { grid-template-columns: 1fr; padding: 16px 12px; }
  .post-date { display: flex; align-items: center; gap: 10px; text-align: left; }
  .post-date b { font-size: 18px; display: inline; }
  .post-side { padding-left: 0; flex-direction: column; align-items: flex-start; gap: 8px; }
  .result-grid { grid-template-columns: 1fr; gap: 20px; }
  .result-band { border-radius: var(--r-xl); }
  .case-facts, .case-metrics-grid { grid-template-columns: 1fr; }
  .case-more { grid-template-columns: 1fr; }
  .case-col-grid { grid-template-columns: 1fr; }
  .ccard { padding: 16px; gap: 12px; }
  .ccard .cn { font-size: 15px; }
  .art-share .btn { margin-left: 0; width: 100%; }
  .sec-head--hero { flex-direction: column; align-items: flex-start; }
  .sec-head--hero .tlink { align-self: flex-start; }

  /* Case page — mobile spacing */
  .case-page .wrap {
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }
  .case-head { padding-top: 22px; }
  .case-head h1 { font-size: clamp(26px, 7.5vw, 34px); }
  .case-facts { margin-top: 22px; padding-top: 22px; gap: 10px; }
  .case-fact { padding: 14px 16px; }
  .case-metrics-section { padding-top: 22px; }
  .case-metrics { padding: 20px 18px; border-radius: var(--r-xl); }
  .case-metrics-grid { gap: 18px; }
  .case-visual { padding-top: 22px; }
  .case-visual-inner { border-radius: var(--r-xl); min-height: 0; }
  .case-visual-copy { padding: 24px 20px; }
  .case-visual-num { font-size: clamp(36px, 10vw, 48px); }
  .case-layout { padding: 20px 0 36px; }
  .case-content { min-width: 0; max-width: none; width: 100%; }
  .case-content section { margin-bottom: 36px; }
  .case-content h2 { font-size: clamp(22px, 6vw, 28px); }
  .case-content h3 { font-size: 18px; margin-top: 28px; }
  .case-content p { font-size: 16px; line-height: 1.65; }
  .case-content .callout { padding: 16px; margin: 18px 0; gap: 12px; }
  .case-list li { font-size: 15px; padding-left: 22px; }
  .case-step { padding: 16px; gap: 12px; grid-template-columns: 40px 1fr; }
  .case-step .sn { width: 40px; height: 40px; font-size: 15px; }
  .case-results { gap: 10px; margin: 18px 0; }
  .case-result-item { padding: 14px 16px; }
  .case-figure { margin: 18px 0 18px; }
  .case-figure figcaption { margin-top: 8px; font-size: 12px; }
  .case-figures { grid-template-columns: 1fr; gap: 14px; margin: 18px 0; }
  .case-figures--3 { grid-template-columns: 1fr; }
  .case-figures .case-figure img,
  .case-figures--3 .case-figure img { max-height: none; object-fit: contain; }
  .case-audience-grid { grid-template-columns: 1fr; gap: 14px; margin: 18px 0 6px; }
  .case-gender-chart { grid-template-columns: 96px 1fr; gap: 14px; }
  .case-gender-donut { width: 96px; height: 96px; }
  .case-bar { grid-template-columns: minmax(64px, 76px) 1fr auto; gap: 8px 10px; }
  .case-funnel-stage--mid,
  .case-funnel-stage--bot { width: 100%; }
  .case-meta-grid { grid-template-columns: 1fr; gap: 14px; }
  .case-meta-split { grid-template-columns: 1fr; gap: 8px; text-align: center; }
  .case-meta-split-sep { justify-self: center; }
  .case-code { max-width: 100%; border-radius: var(--r-md); }
  .case-code-label { padding: 9px 14px; font-size: 10px; }
  .case-code pre { padding: 14px; font-size: 11px; line-height: 1.5; }
  .case-sample { padding: 16px 18px; margin: 18px 0; }
  .case-flow li { padding: 12px 14px; font-size: 14px; gap: 6px 8px; }
  .case-col-item { padding: 12px 14px; }
  .case-table-block { margin: 22px 0 20px; border-radius: var(--r-lg); }
  .case-table-wrap { max-width: 100%; }
  .case-table { min-width: 560px; font-size: 13px; }
  .case-table th,
  .case-table td { padding: 11px 14px; }
  .case-table th { font-size: 11.5px; }
  .case-table .vol,
  .case-table td.num,
  .case-table .num { font-size: 12.5px; }
  .case-table-caption { padding: 13px 16px; font-size: 13.5px; line-height: 1.45; border-left-width: 3px; }
  .case-table .case-q { font-size: 11px; padding: 4px 8px; }
  .case-quote { padding: 20px 18px; border-radius: var(--r-xl); }
  #verstka > section { margin-top: 8px; }
  .case-page .inline-code { word-break: break-word; overflow-wrap: anywhere; }
  .case-page .case-table { min-width: 520px; }
  .case-page .section--after-case { padding-top: 32px; padding-bottom: 32px; }
  .case-page .case-more-card { padding: 18px 16px; }
  .case-page .crumb { font-size: 13px; line-height: 1.5; }
}

@media (max-width: 480px) {
  .course-cover { height: 100px; }
  .course-cover .n { font-size: 48px; }
  .course-body { padding: 18px 18px 20px; }
  .about-links .chip { font-size: 12px; }
}

.courses-group { margin-bottom: 36px; }
.courses-group-title {
  font-size: clamp(18px, 2.5vw, 22px); font-weight: 600;
  margin-bottom: 18px; color: var(--charcoal);
  font-family: var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
}
.courses-grid { align-items: stretch; }

.course-landing { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 56px); align-items: start; padding-block: clamp(32px, 5vw, 48px) clamp(56px, 8vw, 80px); }
.course-landing-cover {
  position: relative; border-radius: var(--r-2xl); overflow: hidden;
  background: var(--tint-terra); aspect-ratio: 4/5; max-height: 560px;
  box-shadow: var(--shadow-ring), var(--shadow-lift);
  display: grid; place-items: center;
}
.course-landing-cover svg.deco { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.45; }
.course-landing-cover .n {
  position: relative; z-index: 1;
  font-family: var(--serif); font-size: clamp(80px, 14vw, 120px);
  font-weight: 600; color: rgba(20,20,19,0.12); line-height: 1;
}
.course-landing-cover .badge-free {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  background: var(--near-black); color: var(--ivory);
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 999px;
}
.course-landing-main { display: flex; flex-direction: column; gap: 18px; }
.course-landing-main h1 { font-size: clamp(30px, 4.5vw, 44px); line-height: 1.08; letter-spacing: -0.026em; }
.course-landing-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 14px; color: var(--stone); }
.course-landing-meta span { display: inline-flex; align-items: center; gap: 7px; }
.course-landing-meta svg { width: 16px; height: 16px; color: var(--terracotta); flex-shrink: 0; }
.course-landing-price {
  display: inline-flex; align-items: baseline; gap: 10px; margin-top: 4px;
}
.course-landing-price .val {
  font-family: var(--serif); font-size: clamp(32px, 4vw, 40px);
  font-weight: 600; color: var(--near-black); letter-spacing: -0.02em;
}
.course-landing-price .val.is-free { color: var(--green); }
.course-landing-price .note { font-size: 14px; color: var(--stone); }
.course-landing-lead { font-size: clamp(17px, 2vw, 19px); line-height: 1.62; color: var(--olive); max-width: 36em; }
.course-landing-list { list-style: none; display: flex; flex-direction: column; gap: 11px; margin: 8px 0 4px; }
.course-landing-list li {
  position: relative; padding-left: 28px; font-size: 16px; color: var(--charcoal); line-height: 1.5;
}
.course-landing-list li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--terracotta);
}
.course-landing-modules { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.course-landing-mod {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; background: var(--ivory); border-radius: var(--r-lg);
  box-shadow: var(--shadow-ring); font-size: 15px;
}
.course-landing-mod .nm { font-weight: 500; color: var(--near-black); }
.course-landing-mod .cnt { font-family: var(--mono); font-size: 12px; color: var(--stone); white-space: nowrap; }
.course-landing-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.course-landing-actions .btn { padding: 14px 24px; font-size: 16px; }

@media (max-width: 900px) {
  .course-landing { grid-template-columns: 1fr; }
  .course-landing-cover { aspect-ratio: 16/10; max-height: none; order: -1; }
  .course-landing-actions .btn { width: 100%; justify-content: center; }
  .course-landing-actions .btn--sand { width: auto; flex: 1; min-width: 140px; }
}

@media (prefers-reduced-motion: reduce) {
  .mq-track { animation: none; }
  .case-thumb .glyph path:first-child { stroke-dashoffset: 0; }
  .ccard:hover { transform: none; }
}

/* ── Tools page ─────────────────────────────────────────── */
.page-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.tools-proof {
  display: flex; gap: clamp(16px, 3vw, 52px); flex-wrap: wrap;
  padding: 22px 0 26px; margin-bottom: 24px;
  border-top: 1px solid var(--border-deep); border-bottom: 1px solid var(--border-deep);
}
.tools-proof .metric .num { font-size: clamp(28px, 4.5vw, 40px); }
.tools-proof .metric .lbl { margin-top: 6px; }
.tool-desc { font-size: 14px; color: var(--olive); line-height: 1.5; margin: -4px 0 0; }
.tool-head { position: relative; flex-wrap: wrap; }
.tool-head h3 { flex: 1; min-width: 120px; }
.tool-status {
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 4px 8px; border-radius: 999px; margin-left: auto;
}
.tool-status--live { background: rgba(45,106,79,0.12); color: var(--green); }
.tool-status--soon { background: var(--warm-sand); color: var(--stone); }
.tool--soon { opacity: 0.92; }
.tool-screen--ghost { opacity: 0.72; pointer-events: none; }

/* ── Blog page extras ───────────────────────────────────── */
.blog-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap);
  margin-bottom: 32px; padding-bottom: 28px;
  border-bottom: 1px solid var(--border-deep);
}
.blog-stat { text-align: center; padding: 16px 8px; }
.blog-stat .num { font-family: var(--serif); font-size: clamp(28px, 4vw, 36px); color: var(--near-black); }
.blog-stat .lbl { font-size: 13px; color: var(--stone); margin-top: 6px; }
.blog-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 36px 0 8px; }
.blog-list-head h2 { font-size: clamp(22px, 3vw, 28px); }
.blog-rows > a { display: block; color: inherit; text-decoration: none; }

/* ── About page ─────────────────────────────────────────── */
.about-hero {
  position: relative;
  padding-block: clamp(28px, 5vw, 40px) clamp(48px, 7vw, 72px);
}
.about-hero-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(32px, 6vw, 64px);
  align-items: center; margin-top: 22px;
}
.about-hero-copy h1 {
  font-size: clamp(32px, 5.5vw, 52px); line-height: 1.08; letter-spacing: -0.022em;
  margin-bottom: 20px;
}
.about-hero-copy h1 em { font-style: normal; color: var(--terracotta); }
.about-hero-copy .lead { max-width: 32em; margin-bottom: 0; }
.about-hero-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.about-hero .portrait-wrap { max-width: 400px; margin: 0 auto; width: 100%; }

.about-clients { padding-block: clamp(24px, 4vw, 36px); border-bottom: 1px solid var(--border-deep); }
.about-clients .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone); margin-bottom: 14px; }
.about-client-row { display: flex; flex-wrap: wrap; gap: clamp(12px, 2.5vw, 28px); align-items: center; }
.about-client-row span { font-family: var(--serif); font-size: clamp(17px, 2.5vw, 22px); color: var(--charcoal); opacity: 0.55; transition: opacity var(--t); }
.about-client-row span:hover { opacity: 1; }

.about-timeline { position: relative; padding-left: 28px; max-width: 640px; }
.about-timeline::before {
  content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px;
  background: linear-gradient(var(--terracotta), var(--border-deep));
}
.about-tl-item { position: relative; padding: 0 0 32px 24px; }
.about-tl-item:last-child { padding-bottom: 0; }
.about-tl-item::before {
  content: ""; position: absolute; left: -26px; top: 6px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--ivory); box-shadow: 0 0 0 2px var(--terracotta);
}
.about-tl-item .yr { font-family: var(--mono); font-size: 13px; color: var(--terracotta); margin-bottom: 4px; }
.about-tl-item h3 { font-size: 20px; margin-bottom: 6px; }
.about-tl-item p { font-size: 15px; color: var(--olive); }

.about-beliefs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.about-belief {
  padding: clamp(24px, 3vw, 32px); border-radius: var(--r-xl);
  background: var(--ivory); box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
  display: flex; flex-direction: column; gap: 12px;
}
.about-belief .ico {
  width: 44px; height: 44px; border-radius: var(--r-md); background: var(--tint-sand);
  color: var(--terracotta); display: grid; place-items: center;
}
.about-belief .ico svg { width: 22px; height: 22px; }
.about-belief h3 { font-size: 19px; }
.about-belief p { font-size: 15px; color: var(--olive); }

.about-stats-band {
  background: var(--near-black); border-radius: var(--r-3xl);
  padding: clamp(36px, 6vw, 56px) clamp(24px, 5vw, 48px);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); text-align: center;
}
.about-stats-band .num { font-family: var(--serif); font-size: clamp(32px, 5vw, 48px); color: var(--ivory); }
.about-stats-band .num .cu { font-variant-numeric: tabular-nums; }
.about-stats-band .lbl { font-size: 14px; color: var(--warm-silver); margin-top: 8px; }

.about-press { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.about-press-item {
  padding: 22px; border-radius: var(--r-lg); background: var(--parchment);
  box-shadow: inset 0 0 0 1px var(--border-deep);
}
.about-press-item .src { font-family: var(--mono); font-size: 12px; color: var(--stone); margin-bottom: 8px; }
.about-press-item p { font-size: 15px; color: var(--charcoal); line-height: 1.45; }

.about-links-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }
.about-link-card {
  padding: 22px; border-radius: var(--r-lg); background: var(--ivory);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
  transition: box-shadow var(--t), transform var(--t); color: inherit; text-decoration: none;
  display: flex; flex-direction: column; gap: 8px;
}
.about-link-card:hover { box-shadow: var(--shadow-lift), 0 0 0 1px var(--ring-deep); transform: translateY(-3px); }
.about-link-card .tag { font-family: var(--mono); font-size: 11px; color: var(--terracotta); text-transform: uppercase; letter-spacing: 0.06em; }
.about-link-card h3 { font-size: 18px; }
.about-link-card p { font-size: 14px; color: var(--olive); }

@media (max-width: 900px) {
  .blog-stats { grid-template-columns: repeat(2, 1fr); }
  .about-hero-grid { grid-template-columns: 1fr; }
  .about-hero .portrait-wrap { max-width: 320px; order: -1; }
  .about-beliefs, .about-press, .about-links-grid { grid-template-columns: 1fr; }
  .about-stats-band { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .blog-stats { grid-template-columns: 1fr 1fr; }
  .about-stats-band { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Calculators — hub & individual pages
   ============================================================ */

/* Hub catalog */
.calc-catalog { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.calc-card {
  display: flex; flex-direction: column; gap: 14px; padding: 24px;
  color: inherit; text-decoration: none;
  transition: box-shadow var(--t), transform var(--t);
}
.calc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift), 0 0 0 1px var(--ring-deep); }
.calc-card .head { display: flex; align-items: center; gap: 11px; }
.calc-card .ico {
  width: 38px; height: 38px; border-radius: var(--r-md);
  background: var(--near-black); color: var(--coral);
  display: grid; place-items: center; flex-shrink: 0;
}
.calc-card .ico svg { width: 19px; height: 19px; }
.calc-card h3 { font-size: 19px; line-height: 1.22; }
.calc-card .tag {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--terracotta);
}
.calc-card p { font-size: 14.5px; color: var(--olive); line-height: 1.55; flex: 1; margin: 0; }
.calc-card .foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px; border-top: 1px solid var(--border-deep);
  font-family: var(--mono); font-size: 12.5px; color: var(--stone);
}
.calc-card .foot .open {
  color: var(--terracotta); font-weight: 500; display: inline-flex; align-items: center; gap: 6px;
  transition: gap var(--t);
}
.calc-card .foot .open svg { width: 13px; height: 13px; transition: transform var(--t); }
.calc-card:hover .foot .open svg { transform: translateX(3px); }

/* Calculator page layout */
.calc-head { padding-block: clamp(28px, 5vw, 40px) clamp(16px, 3vw, 28px); }
.calc-head h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.08; letter-spacing: -0.024em; max-width: 18em; margin: 18px 0 16px; }
.calc-head .lead { max-width: 42em; }
.calc-head .meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

.calc-section { padding-block: clamp(18px, 3vw, 28px); }
.calc-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.5vw, 24px);
  align-items: start;
}
.calc-grid--wide { grid-template-columns: 1.05fr 0.95fr; }

.calc-panel {
  background: var(--ivory); border-radius: var(--r-2xl);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
  padding: clamp(22px, 3vw, 30px);
}
.calc-panel + .calc-panel { margin-top: var(--grid-gap); }
.calc-panel .ph {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
}
.calc-panel .ph h2 { font-size: clamp(18px, 2.5vw, 22px); letter-spacing: -0.014em; }
.calc-panel .ph .lbl {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone);
}

/* Fields */
.calc-fields { display: grid; gap: 14px; }
.calc-fields--2 { grid-template-columns: 1fr 1fr; }
.calc-field { display: flex; flex-direction: column; gap: 6px; }
.calc-field label {
  font-size: 13px; color: var(--charcoal); font-weight: 500;
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.calc-field label .h { font-size: 11.5px; font-family: var(--mono); color: var(--stone); font-weight: 400; }
.calc-input, .calc-select {
  font-family: var(--mono); font-size: 15px; color: var(--near-black);
  background: var(--parchment); border: 1px solid var(--border-deep);
  border-radius: var(--r-md); padding: 11px 13px; width: 100%;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
  appearance: none; -webkit-appearance: none;
}
.calc-input:focus, .calc-select:focus {
  outline: none; border-color: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(201,100,66,0.15); background: var(--ivory);
}
.calc-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2387867f' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
  padding-right: 36px; cursor: pointer;
}
.calc-input::placeholder { color: var(--warm-silver); }
.calc-input[type="number"]::-webkit-outer-spin-button,
.calc-input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-input[type="number"] { -moz-appearance: textfield; }

.calc-field .hint { font-size: 12.5px; color: var(--stone); line-height: 1.4; }

/* Segmented (presets / radios) */
.calc-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.calc-seg button, .calc-seg .opt {
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  background: var(--parchment); color: var(--charcoal);
  border: 1px solid var(--border-deep); border-radius: 999px;
  padding: 7px 14px; cursor: pointer; transition: all var(--t);
}
.calc-seg button:hover, .calc-seg .opt:hover { color: var(--near-black); }
.calc-seg button.active, .calc-seg .opt.active {
  background: var(--near-black); color: var(--ivory); border-color: var(--near-black);
}

/* Action row */
.calc-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.calc-actions .btn { font-size: 14.5px; padding: 10px 16px; }

/* Result panel */
.calc-result-panel {
  background: var(--near-black); color: var(--ivory);
  border-radius: var(--r-2xl); padding: clamp(22px, 3vw, 30px);
  position: sticky; top: calc(var(--nav-h) + 16px);
}
.calc-result-panel .lbl {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--warm-silver);
  margin-bottom: 14px;
}
.calc-kpi {
  font-family: var(--serif); font-size: clamp(38px, 6vw, 56px); font-weight: 600;
  letter-spacing: -0.025em; line-height: 1; color: var(--ivory);
  font-variant-numeric: tabular-nums;
}
.calc-kpi .u { color: var(--coral); font-size: 0.5em; font-weight: 500; letter-spacing: 0; margin-left: 6px; }
.calc-kpi.pos { color: #b9e3a8; }
.calc-kpi.neg { color: #f3a08c; }
.calc-result-panel .sub { margin-top: 10px; font-size: 14px; color: var(--warm-silver); max-width: 30em; }

.calc-meters {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--dark-warm);
}
.calc-meter { display: flex; flex-direction: column; gap: 4px; }
.calc-meter .v { font-family: var(--mono); font-size: 18px; font-weight: 500; color: var(--ivory); font-variant-numeric: tabular-nums; }
.calc-meter .v .u { color: var(--coral); font-size: 13px; }
.calc-meter .k { font-size: 12px; color: var(--warm-silver); }

.calc-bar {
  height: 6px; background: var(--dark-warm); border-radius: 4px; overflow: hidden;
  margin-top: 6px;
}
.calc-bar .fill { height: 100%; background: var(--coral); border-radius: 4px; transition: width 0.3s var(--ease); }

.calc-verdict {
  margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--dark-warm);
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 14.5px; color: var(--warm-silver); line-height: 1.55;
}
.calc-verdict .ico {
  width: 22px; height: 22px; flex-shrink: 0; color: var(--coral);
  display: grid; place-items: center; margin-top: 2px;
}
.calc-verdict .ico svg { width: 18px; height: 18px; }
.calc-verdict.ok .ico { color: #b9e3a8; }
.calc-verdict.warn .ico { color: #e6c067; }
.calc-verdict.bad .ico { color: #f3a08c; }
.calc-verdict strong { color: var(--ivory); font-weight: 600; }

/* Formula box */
.calc-formula {
  background: var(--parchment); border-radius: var(--r-md);
  padding: 14px 16px; box-shadow: inset 0 0 0 1px var(--border-deep);
  font-family: var(--mono); font-size: 13.5px; color: var(--charcoal);
  line-height: 1.6; margin-top: 8px;
}
.calc-formula b { color: var(--near-black); font-weight: 600; }
.calc-formula .op { color: var(--terracotta); }

/* Scenario table */
.calc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 12px; }
.calc-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }
.calc-table th, .calc-table td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-deep);
  font-family: var(--mono); color: var(--charcoal); white-space: nowrap;
}
.calc-table th {
  background: var(--parchment); color: var(--stone);
  font-weight: 500; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
  position: sticky; top: 0;
}
.calc-table td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--near-black); }
.calc-table td input, .calc-table td select {
  font-family: var(--mono); font-size: 13px; color: var(--near-black);
  background: transparent; border: 1px solid transparent;
  border-radius: 6px; padding: 6px 8px; width: 100%;
  transition: all var(--t);
}
.calc-table td input:hover, .calc-table td select:hover { border-color: var(--border-deep); background: var(--parchment); }
.calc-table td input:focus, .calc-table td select:focus { outline: none; border-color: var(--terracotta); background: var(--ivory); box-shadow: 0 0 0 2px rgba(201,100,66,0.15); }
.calc-table td.num input { text-align: right; }
.calc-table tr.is-optimal { background: rgba(201,100,66,0.07); }
.calc-table tr.is-optimal td { color: var(--terracotta-d); font-weight: 600; }
.calc-table tr.is-optimal td .badge {
  display: inline-block; background: var(--terracotta); color: var(--ivory);
  font-size: 10px; padding: 2px 7px; border-radius: 999px; margin-right: 6px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.calc-table td.delta-pos { color: var(--green); }
.calc-table td.delta-neg { color: var(--error); }
.calc-table .row-act { width: 28px; }
.calc-table .row-act button {
  width: 24px; height: 24px; border-radius: 6px; background: transparent;
  border: 1px solid var(--border-deep); color: var(--stone); cursor: pointer;
  display: grid; place-items: center; transition: all var(--t);
}
.calc-table .row-act button:hover { color: var(--error); border-color: var(--error); }
.calc-table .row-act button svg { width: 13px; height: 13px; }

/* Funnel stages */
.calc-funnel { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.calc-funnel .stage {
  background: var(--parchment); border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--border-deep);
  padding: 14px 16px; position: relative; overflow: hidden;
}
.calc-funnel .stage .fillbar {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--tint-terra); transition: width 0.35s var(--ease);
  z-index: 0;
}
.calc-funnel .stage .row {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}
.calc-funnel .stage .nm { font-size: 14px; font-weight: 600; color: var(--near-black); }
.calc-funnel .stage .nm small { display: block; font-weight: 400; color: var(--stone); font-size: 12px; margin-top: 2px; }
.calc-funnel .stage .v { font-family: var(--mono); font-size: 18px; font-weight: 500; color: var(--near-black); font-variant-numeric: tabular-nums; }
.calc-funnel .stage.is-drop .fillbar { background: rgba(229,160,140,0.25); }

/* Forecast / multi-month table — wider, sticky first col */
.calc-table--forecast { min-width: 760px; }
.calc-table--forecast th:first-child, .calc-table--forecast td:first-child {
  position: sticky; left: 0; background: var(--ivory);
  border-right: 1px solid var(--border-deep);
}
.calc-table--forecast tr.is-target td { color: var(--green); font-weight: 600; }

/* Explainer (the "why" section under the calculator) */
.calc-why {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(20px, 3vw, 32px);
  align-items: start; padding-top: clamp(20px, 3vw, 32px);
  border-top: 1px solid var(--border-deep);
}
.calc-why h2 { font-size: clamp(24px, 3.5vw, 30px); letter-spacing: -0.02em; margin-bottom: 14px; }
.calc-why p { font-size: 16px; color: var(--charcoal); line-height: 1.72; margin-bottom: 14px; }
.calc-why ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; }
.calc-why ul li { position: relative; padding-left: 24px; font-size: 15.5px; color: var(--charcoal); line-height: 1.6; }
.calc-why ul li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--terracotta); }

/* Other calculators teaser at the bottom */
.calc-more {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap);
  margin-top: 22px;
}

/* Link-style calculator card in tools-grid */
.tool--link { color: inherit; text-decoration: none; transition: box-shadow var(--t), transform var(--t); }
.tool--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift), 0 0 0 1px var(--ring-deep); }
.tool--link .tool-desc { flex: 1; }
.tool-status--calc { background: var(--tint-terra); color: var(--terracotta-d); }
.tool-cta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--border-deep);
  font-family: var(--mono); font-size: 13px; color: var(--charcoal);
}
.tool-cta .open { color: var(--terracotta); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.tool-cta .open svg { width: 13px; height: 13px; transition: transform var(--t); }
.tool--link:hover .tool-cta .open svg { transform: translateX(3px); }

/* Responsive */
@media (max-width: 960px) {
  .calc-catalog { grid-template-columns: 1fr 1fr; }
  .calc-more { grid-template-columns: 1fr 1fr; }
  .calc-grid, .calc-grid--wide { grid-template-columns: 1fr; }
  .calc-result-panel { position: static; }
  .calc-why { grid-template-columns: 1fr; }
  .calc-promo { flex-direction: column; align-items: flex-start; text-align: left; }
  .calc-promo .btn { width: 100%; justify-content: center; }
}
@media (max-width: 640px) {
  .calc-catalog { grid-template-columns: 1fr; }
  .calc-more { grid-template-columns: 1fr; }
  /* перебиваем inline grid-column:span 2 — иначе в 1 колонке создаётся неявная 2-я и карточка вылезает */
  .calc-catalog > .calc-card, .calc-more > .calc-card { grid-column: auto !important; }
  .calc-fields--2 { grid-template-columns: 1fr; }
  .calc-meters { grid-template-columns: 1fr; }
}

/* ============================================================
   Brief form (/brief.html) + brief CTA on index/uslugi
   ============================================================ */
.brief-section {
  display: grid; grid-template-columns: 1fr 320px;
  gap: clamp(24px, 4vw, 40px);
  padding-block: clamp(20px, 3vw, 32px) clamp(48px, 7vw, 72px);
  align-items: start;
  max-width: min(var(--maxw), 100%);
  margin: 0 auto;
  width: 100%;
  padding-inline: var(--gutter);
}
.brief-form { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 28px); }
.brief-step {
  background: var(--ivory); border-radius: var(--r-2xl);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
  padding: clamp(22px, 3vw, 30px);
}
.brief-step-h { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.brief-step-n {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--tint-sand); color: var(--terracotta);
  font-family: var(--mono); font-size: 15px; font-weight: 600;
  display: grid; place-items: center; flex-shrink: 0;
}
.brief-step-h h2 { font-size: clamp(18px, 2.5vw, 22px); letter-spacing: -0.014em; margin: 0; }

/* Collapsible step 3 — opt-in details */
.brief-step--collapsible { padding: 0; }
.brief-step--collapsible > summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: clamp(22px, 3vw, 30px);
  margin-bottom: 0;
  border-radius: var(--r-2xl);
  transition: background var(--t);
}
.brief-step--collapsible > summary::-webkit-details-marker { display: none; }
.brief-step--collapsible > summary:hover { background: var(--parchment); }
.brief-step--collapsible[open] > summary {
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  border-bottom: 1px solid var(--border-deep);
  margin-bottom: 0;
}
.brief-step-toggle {
  margin-left: auto;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--stone); font-weight: 500;
  display: inline-flex; align-items: center; gap: 7px;
  visibility: visible;
}
.brief-step-toggle::after {
  content: ""; width: 7px; height: 7px;
  border-right: 1.6px solid var(--stone);
  border-bottom: 1.6px solid var(--stone);
  transform: rotate(45deg);
  transition: transform var(--t);
}
.brief-step--collapsible[open] .brief-step-toggle::after {
  transform: rotate(-135deg) translate(-1.5px, -1.5px);
}
.brief-step--collapsible > .brief-fields {
  padding: clamp(22px, 3vw, 30px);
  padding-top: clamp(18px, 2.5vw, 24px);
}

.brief-fields { display: grid; gap: 14px; }
.brief-fields--2 { grid-template-columns: 1fr 1fr; }
.brief-field { display: flex; flex-direction: column; gap: 6px; }
.brief-field label { font-size: 13px; color: var(--charcoal); font-weight: 500; }
.brief-field .req { color: var(--terracotta); }
.brief-field .hint { font-size: 12.5px; color: var(--stone); line-height: 1.4; }
.brief-input, .brief-textarea, .brief-select {
  font-family: var(--sans); font-size: 15px; color: var(--near-black);
  background: var(--parchment); border: 1px solid var(--border-deep);
  border-radius: var(--r-md); padding: 11px 13px; width: 100%;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
  appearance: none; -webkit-appearance: none;
}
.brief-input:focus, .brief-textarea:focus, .brief-select:focus {
  outline: none; border-color: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(201,100,66,0.15); background: var(--ivory);
}
.brief-textarea { resize: vertical; min-height: 80px; line-height: 1.55; }
.brief-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2387867f' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
  padding-right: 36px; cursor: pointer;
}

.brief-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.brief-check {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--charcoal); cursor: pointer;
  background: var(--parchment); border: 1px solid var(--border-deep);
  border-radius: var(--r-md); padding: 10px 13px;
  transition: border-color var(--t), background var(--t);
}
.brief-check:hover { border-color: var(--ring-deep); background: var(--ivory); }
.brief-check input { width: 16px; height: 16px; accent-color: var(--terracotta); cursor: pointer; flex-shrink: 0; }
.brief-check input:checked + span { color: var(--near-black); font-weight: 500; }
.brief-check:has(input:checked) { border-color: var(--terracotta); background: var(--tint-terra); }

.brief-actions {
  background: var(--near-black); color: var(--ivory);
  border-radius: var(--r-2xl); padding: clamp(22px, 3vw, 28px);
}
.brief-privacy { font-size: 13px; color: var(--warm-silver); margin-bottom: 18px; }
.brief-privacy a { color: var(--coral); }
.brief-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.brief-buttons .btn { font-size: 15px; padding: 12px 18px; }
.brief-buttons .btn--ghost { color: var(--warm-silver); background: transparent; }
.brief-buttons .btn--ghost:hover { background: var(--dark-warm); color: var(--ivory); }

.brief-aside { position: sticky; top: calc(var(--nav-h) + 16px); display: flex; flex-direction: column; gap: 14px; }
.brief-aside-card {
  background: var(--ivory); border-radius: var(--r-2xl);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
  padding: 22px 24px;
}
.brief-aside-card h3 { font-size: 17px; margin-bottom: 12px; }
.brief-aside-card ol { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.brief-aside-card li { font-size: 14.5px; color: var(--charcoal); line-height: 1.55; }
.brief-aside-card--dark { background: var(--near-black); color: var(--ivory); box-shadow: none; }
.brief-aside-card--dark h3 { color: var(--ivory); }
.brief-aside-card--dark p { color: var(--warm-silver); font-size: 14.5px; margin-bottom: 14px; }
.brief-aside-links { display: flex; gap: 8px; flex-wrap: wrap; }
.brief-aside-links .btn { font-size: 14px; padding: 9px 14px; }

/* Compact brief CTA — for embedding in index.html / uslugi.html */
.brief-cta {
  background: var(--near-black); color: var(--ivory);
  border-radius: var(--r-2xl); padding: clamp(28px, 4vw, 40px);
  display: grid; grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(24px, 4vw, 40px); align-items: center;
}
.brief-cta-h h2 { color: var(--ivory); font-size: clamp(24px, 3.5vw, 32px); letter-spacing: -0.02em; margin-bottom: 12px; }
.brief-cta-h p { color: var(--warm-silver); font-size: 16px; margin-bottom: 22px; max-width: 32em; }
.brief-cta-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.brief-cta-list { background: var(--dark-warm); border-radius: var(--r-xl); padding: 22px 24px; }
.brief-cta-list h4 { color: var(--ivory); font-size: 14px; margin-bottom: 12px; }
.brief-cta-list ol { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.brief-cta-list li { font-size: 14px; color: var(--warm-silver); line-height: 1.5; }

@media (max-width: 960px) {
  .brief-section { grid-template-columns: 1fr; }
  .brief-aside { position: static; }
  .brief-fields--2 { grid-template-columns: 1fr; }
  .brief-checks { grid-template-columns: 1fr; }
  .brief-cta { grid-template-columns: 1fr; }
}

/* ============================================================
   Thanks page (/thanks.html)
   ============================================================ */
.thanks-wrap {
  min-height: 60vh; display: grid; place-items: center;
  padding-block: clamp(48px, 8vw, 96px); text-align: center;
}
.thanks-ico {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--tint-green); color: var(--green);
  display: grid; place-items: center; margin: 0 auto 24px;
}
.thanks-ico svg { width: 40px; height: 40px; }
.thanks-h1 { font-size: clamp(28px, 4.5vw, 40px); margin-bottom: 14px; }
.thanks-sub { font-size: 17px; color: var(--olive); max-width: 36em; margin: 0 auto 24px; line-height: 1.6; }
.thanks-card {
  max-width: 540px; margin: 32px auto 0; text-align: left;
  background: var(--ivory); border-radius: var(--r-2xl);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
  padding: 22px 26px;
}
.thanks-card h3 { font-size: 15px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.thanks-card pre {
  font-family: var(--mono); font-size: 13px; color: var(--charcoal);
  background: var(--parchment); padding: 14px 16px; border-radius: var(--r-md);
  white-space: pre-wrap; word-break: break-word; max-height: 280px; overflow: auto;
  box-shadow: inset 0 0 0 1px var(--border-deep);
}
.thanks-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 28px; }

/* SEO-cost calculator extras */
.calc-fixed {
  display: flex; flex-wrap: wrap; gap: 6px;
  font-family: var(--mono); font-size: 12.5px; color: var(--charcoal);
}
.calc-fixed span {
  background: var(--parchment); padding: 6px 11px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--border-deep);
}
.calc-checks {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 4px;
}
.calc-check {
  display: flex; align-items: center; gap: 12px;
  background: var(--parchment); border: 1px solid var(--border-deep);
  border-radius: var(--r-md); padding: 13px 14px;
  cursor: pointer; transition: border-color var(--t), background var(--t);
  min-height: 64px;
}
.calc-check:hover { border-color: var(--ring-deep); background: var(--ivory); }
.calc-check:has(input:checked) { border-color: var(--terracotta); background: var(--tint-terra); }
.calc-check:has(input:checked) .calc-check-pct {
  background: var(--terracotta); color: var(--ivory); box-shadow: none;
}
.calc-check input { width: 17px; height: 17px; accent-color: var(--terracotta); cursor: pointer; flex-shrink: 0; }
/* Legacy span fallback (covers cached HTML without .calc-check-body) */
.calc-check > span:not([class]),
.calc-check-body { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.calc-check b { display: block; font-weight: 600; font-size: 14px; color: var(--near-black); line-height: 1.25; }
.calc-check small { display: block; font-size: 12.5px; color: var(--stone); line-height: 1.4; }
.calc-check-pct {
  flex-shrink: 0;
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  color: var(--terracotta-d);
  background: var(--ivory);
  padding: 4px 9px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--ring-warm);
  transition: background var(--t), color var(--t);
  letter-spacing: 0.01em;
}
@media (max-width: 720px) {
  .calc-checks { grid-template-columns: 1fr; }
}
.calc-scope ul {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px;
  list-style: none; padding: 0; margin: 0;
}
.calc-scope li {
  position: relative; padding-left: 22px; font-size: 14.5px;
  color: var(--charcoal); line-height: 1.5;
}
.calc-scope li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 14px; height: 8px;
  border-left: 2px solid var(--terracotta); border-bottom: 2px solid var(--terracotta);
  transform: rotate(-45deg);
}
@media (max-width: 640px) { .calc-scope ul { grid-template-columns: 1fr; } }

/* ============================================================
   Ratings hub & topic pages (/ratings/)
   ============================================================ */
.rt-hero { padding-block: clamp(32px, 5vw, 48px) clamp(20px, 3vw, 28px); }
.rt-hero h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.08; letter-spacing: -0.024em; margin: 18px 0 16px; max-width: 18em; }
.rt-hero .lead { max-width: 42em; }
.rt-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; align-items: center; }
.rt-hero-extras {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 14px; padding: 12px 14px;
  background: var(--warm-sand); border-radius: var(--r-md);
}
.rt-hero-extras .extras-label {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  color: var(--olive); text-transform: uppercase; letter-spacing: 0.06em;
  margin-right: 4px;
}
.rt-hero-extras .extras-q {
  font-size: 14px; color: var(--charcoal);
  background: #fff; padding: 4px 12px;
  border-radius: var(--r-sm); border: 1px solid var(--border-deep);
}
.rt-hero-extras .extras-q::before { content: '«'; color: var(--stone); }
.rt-hero-extras .extras-q::after { content: '»'; color: var(--stone); }

.rt-banner {
  display: flex; gap: 14px; align-items: flex-start;
  margin: 18px 0 0; padding: 16px 18px;
  background: var(--tint-sand); border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--border-deep);
  font-size: 14px; color: var(--charcoal); line-height: 1.5;
}
.rt-banner .ico { flex-shrink: 0; width: 22px; height: 22px; color: var(--terracotta); margin-top: 1px; }
.rt-banner strong { color: var(--near-black); }

/* Hub grid */
.rt-catalog { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }

/* Ratings page — improved navigation */
.rt-nav { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.rt-nav-top {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.rt-search {
  flex: 1; min-width: 240px; max-width: 480px;
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--border-deep);
  border-radius: var(--r-md); padding: 10px 16px;
  box-shadow: var(--shadow-whisper);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rt-search:focus-within {
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(201,100,66,0.10), var(--shadow-whisper);
}
.rt-search svg { width: 16px; height: 16px; color: var(--stone); flex-shrink: 0; }
.rt-search input {
  flex: 1; border: none; outline: none; background: transparent;
  font: inherit; font-size: 14.5px; color: var(--near-black);
}
.rt-search input::placeholder { color: var(--stone); }
.rt-search-clear {
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--warm-sand); color: var(--olive); cursor: pointer;
  font-size: 14px; line-height: 1; user-select: none;
  opacity: 0; transition: opacity 0.15s ease;
}
.rt-search.has-q .rt-search-clear { opacity: 1; }
.rt-count {
  font-family: var(--mono); font-size: 12px; color: var(--olive);
  letter-spacing: 0.02em; white-space: nowrap;
}
.rt-count strong { color: var(--near-black); font-weight: 600; }

.rt-cats { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rt-cats .fchip {
  display: inline-flex; align-items: center; gap: 6px;
}
.rt-cats .fchip .cnt {
  font-family: var(--mono); font-size: 10.5px; opacity: 0.65;
  font-weight: 500;
}
.rt-cats .fchip.active .cnt { opacity: 0.85; }

/* Subcategory chips — show only when a parent cat with subs is active */
.rt-subcats {
  display: flex; gap: 7px; flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--warm-sand); border-radius: var(--r-md);
  margin-top: 2px;
}
.rt-subcats[hidden] { display: none; }
.rt-subcats .label {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  color: var(--olive); text-transform: uppercase; letter-spacing: 0.06em;
  align-self: center; margin-right: 4px;
}
.rt-subcats .schip {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff; border: 1px solid var(--border-deep); border-radius: 999px;
  padding: 5px 11px; font-size: 13px; color: var(--charcoal);
  cursor: pointer; user-select: none;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.rt-subcats .schip:hover { color: var(--near-black); border-color: var(--olive); }
.rt-subcats .schip.active {
  background: var(--terracotta); color: #fff; border-color: var(--terracotta);
}
.rt-subcats .schip .cnt { font-family: var(--mono); font-size: 10.5px; opacity: 0.7; }
.rt-subcats .schip.active .cnt { opacity: 0.9; }

.rt-empty {
  padding: 32px 24px; text-align: center;
  font-family: var(--mono); font-size: 13px; color: var(--olive);
  border: 1px dashed var(--border-deep); border-radius: var(--r-md);
}
.rt-empty[hidden] { display: none; }
.rt-card {
  display: flex; flex-direction: column; gap: 12px; padding: 22px;
  color: inherit; text-decoration: none;
  transition: box-shadow var(--t), transform var(--t);
}
.rt-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift), 0 0 0 1px var(--ring-deep); }
.rt-card .head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rt-card .cat {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--terracotta);
}
.rt-card .region {
  font-family: var(--mono); font-size: 11px; color: var(--stone);
}
.rt-card h3 { font-size: 19px; line-height: 1.2; }
.rt-card .key {
  font-family: var(--mono); font-size: 12.5px; color: var(--olive);
  background: var(--parchment); padding: 6px 10px; border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--border-deep);
  align-self: flex-start;
}
.rt-card .stats {
  display: flex; gap: 14px; margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--border-deep);
  font-family: var(--mono); font-size: 12px; color: var(--stone);
}
.rt-card .stats .v { color: var(--near-black); font-weight: 500; }
.rt-card .stats .up { color: var(--green); }
.rt-card .stats .down { color: var(--terracotta-d); }

/* Topic page summary */
.rt-summary {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap);
  margin: 24px 0;
}
.rt-sum-card {
  padding: 18px 20px; background: var(--ivory); border-radius: var(--r-lg);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
}
.rt-sum-card .k {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--stone); display: block; margin-bottom: 8px;
}
.rt-sum-card .v {
  font-family: var(--serif); font-size: clamp(22px, 3vw, 28px); font-weight: 600;
  color: var(--near-black); line-height: 1.1; letter-spacing: -0.01em;
}
.rt-sum-card .v.pos { color: var(--green); }
.rt-sum-card .v.neg { color: var(--terracotta-d); }
.rt-sum-card .sub { display: block; font-size: 12.5px; color: var(--olive); margin-top: 6px; }

/* Top-N table */
.rt-table-wrap {
  background: var(--ivory); border-radius: var(--r-xl);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
  overflow: hidden; margin: 24px 0;
}
.rt-table-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; gap: 14px;
  background: linear-gradient(180deg, var(--ivory) 0%, var(--parchment) 100%);
  border-bottom: 1px solid var(--border-deep);
  border-left: 3px solid var(--terracotta);
  flex-wrap: wrap;
}
.rt-table-head h2 { font-size: 17px; letter-spacing: -0.01em; margin: 0; }
.rt-table-head .updated { font-family: var(--mono); font-size: 12px; color: var(--stone); }
.rt-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rt-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 14px; background: var(--ivory);
}
.rt-table th, .rt-table td {
  text-align: left; padding: 12px 18px;
  border-bottom: 1px solid var(--border-cream); vertical-align: middle;
}
.rt-table th {
  font-family: var(--sans); font-weight: 600; font-size: 12.5px;
  color: var(--charcoal); background: var(--parchment); white-space: nowrap;
}
.rt-table td.pos {
  width: 50px; font-family: var(--serif); font-size: 18px; font-weight: 600;
  color: var(--near-black); font-variant-numeric: tabular-nums;
}
.rt-table tr.top-3 td.pos { color: var(--terracotta); }
.rt-table .brand {
  display: flex !important; align-items: center; gap: 12px;
}
.rt-table .brand > img.av,
.rt-table .brand > .av-letter {
  width: 32px; height: 32px; border-radius: 8px;
  flex-shrink: 0; box-sizing: border-box;
  box-shadow: inset 0 0 0 1px var(--border-deep);
}
.rt-table .brand > img.av {
  object-fit: contain;
  padding: 5px;
  background: var(--ivory);
}
.rt-table .brand > .av-letter {
  background: var(--tint-sand); color: var(--terracotta-d);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 14px; font-weight: 600;
}
.rt-table .brand > .info {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto;
}
.rt-table .brand > .info > .nm {
  display: block; font-weight: 500; color: var(--near-black);
  line-height: 1.25; word-break: break-word;
}
.rt-table .brand > .info > .dom {
  display: block; font-family: var(--mono); font-size: 11.5px; color: var(--stone);
  line-height: 1.2; word-break: break-all;
}
.rt-table td.delta {
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums;
}
.rt-table td.delta.up { color: var(--green); }
.rt-table td.delta.down { color: var(--terracotta-d); }
.rt-table td.delta.flat { color: var(--stone); }
.rt-table td.delta .arr { display: inline-block; margin-right: 3px; font-size: 11px; }
.rt-table td.share {
  font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums;
  text-align: right; color: var(--charcoal);
}
.rt-table .bar {
  display: block; height: 4px; background: var(--warm-sand); border-radius: 2px;
  margin-top: 5px; overflow: hidden; width: 80px; margin-left: auto;
}
.rt-table .bar .fill { display: block; height: 100%; background: var(--terracotta); border-radius: 2px; }
.rt-table tr:hover td:not(.pos) { background: rgba(245, 244, 237, 0.7); }
.rt-table .new-badge {
  display: inline-block; font-family: var(--mono); font-size: 10px;
  background: var(--green); color: var(--ivory); padding: 2px 6px;
  border-radius: 4px; letter-spacing: 0.05em; margin-left: 8px;
  vertical-align: middle; font-weight: 500;
}
.rt-table td.page { min-width: 160px; max-width: 300px; }
.rt-table .page-link {
  display: flex; flex-direction: column; gap: 2px;
  text-decoration: none; color: inherit; min-width: 0;
}
.rt-table .page-link:hover .page-title { color: var(--terracotta); }
.rt-table .page-link:hover .page-path { color: var(--charcoal); }
.rt-table .page-title {
  display: block; font-size: 13px; color: var(--charcoal);
  line-height: 1.25; word-break: break-word;
}
.rt-table .page-path {
  display: block; font-family: var(--mono); font-size: 11px;
  color: var(--stone); line-height: 1.2; word-break: break-all;
}
.rt-table .page-path.only { font-size: 12px; }
.rt-table .page-missing { color: var(--stone); font-family: var(--mono); }

/* Site type badges */
.rt-table .brand > .info > .nm-row {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap; min-width: 0;
}
.rt-table .site-type {
  display: inline-block; font-family: var(--mono); font-size: 9px; font-weight: 500;
  padding: 0 4px; border-radius: 3px; letter-spacing: 0.02em;
  line-height: 1.45; white-space: nowrap; flex-shrink: 0;
}
.rt-table .brand > .info > .nm-row > .nm { display: inline; min-width: 0; }
.site-type--direct { background: rgba(74, 124, 89, 0.12); color: #4a7c59; }
.site-type--aggregator { background: rgba(184, 92, 56, 0.12); color: #b85c38; }
.site-type--marketplace { background: rgba(61, 107, 158, 0.12); color: #3d6b9e; }
.site-type--saas { background: rgba(107, 77, 138, 0.12); color: #6b4d8a; }
.site-type--catalog { background: rgba(154, 138, 74, 0.15); color: #7a6e38; }
.site-type--edtech { background: rgba(90, 122, 160, 0.12); color: #4a6a8a; }

/* Serp structure bar */
.rt-serp-mix {
  margin: 0 0 24px; padding: 18px 20px; background: var(--ivory);
  border-radius: var(--r-lg); box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
}
.rt-serp-mix-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px;
}
.rt-serp-mix-head span:first-child { font-weight: 600; font-size: 15px; color: var(--near-black); }
.rt-serp-mix-sub { font-family: var(--mono); font-size: 11px; color: var(--stone); text-transform: uppercase; letter-spacing: 0.06em; }
.rt-serp-mix-bar {
  display: flex; height: 14px; border-radius: 999px; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--border-deep);
}
.rt-serp-seg {
  display: block; min-width: 0; transition: filter .2s;
}
.rt-serp-seg:hover { filter: brightness(1.08); }
.rt-serp-seg--aggregator { background: #b85c38; }
.rt-serp-seg--direct { background: #4a7c59; }
.rt-serp-seg--marketplace { background: #3d6b9e; }
.rt-serp-seg--saas { background: #6b4d8a; }
.rt-serp-seg--catalog { background: #9a8a4a; }
.rt-serp-seg--edtech { background: #4a6a8a; }
.rt-serp-mix-legend {
  display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px;
  font-size: 13px; color: var(--charcoal);
}
.rt-serp-leg { display: inline-flex; align-items: baseline; gap: 7px; }
.rt-serp-leg i {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  align-self: center;
}
.rt-serp-leg b {
  font-weight: 600; color: var(--near-black); font-variant-numeric: tabular-nums;
}
.rt-serp-leg i.rt-serp-seg--aggregator { background: #b85c38; }
.rt-serp-leg i.rt-serp-seg--direct { background: #4a7c59; }
.rt-serp-leg i.rt-serp-seg--marketplace { background: #3d6b9e; }
.rt-serp-leg i.rt-serp-seg--saas { background: #6b4d8a; }
.rt-serp-leg i.rt-serp-seg--catalog { background: #9a8a4a; }
.rt-serp-leg i.rt-serp-seg--edtech { background: #4a6a8a; }

/* Volatility */
.rt-vol-bar {
  height: 4px; background: var(--warm-sand); border-radius: 2px; margin: 8px 0 6px; overflow: hidden;
}
.rt-vol-bar span {
  display: block; height: 100%; border-radius: 2px; background: var(--green); transition: width 0.3s;
}
.rt-vol--moderate .rt-vol-bar span { background: #c4923a; }
.rt-vol--high .rt-vol-bar span { background: var(--terracotta-d); }
.rt-vol--unknown .rt-vol-bar span { background: var(--stone); width: 8% !important; }

/* Position chart */
.rt-pos-chart-wrap {
  margin: 28px 0; padding: 20px 22px; background: var(--ivory);
  border-radius: var(--r-xl); box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
}
.rt-pos-chart-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px;
  margin-bottom: 16px;
}
.rt-pos-chart-head h3 { font-size: 16px; margin: 0; }
.rt-chart-note { font-size: 13px; color: var(--olive); max-width: 36em; line-height: 1.45; }
.rt-pos-chart { position: relative; }
.rt-chart-svg { width: 100%; height: auto; display: block; }
.rt-chart-bg { fill: var(--parchment); }
.rt-chart-grid { stroke: var(--border-cream); stroke-width: 1; }
.rt-chart-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.rt-chart-dot { cursor: pointer; stroke: var(--ivory); stroke-width: 2; transition: r 0.15s; }
.rt-chart-dot:hover, .rt-chart-dot:focus { r: 7; outline: none; }
.rt-chart-axis { font-family: var(--mono); font-size: 11px; fill: var(--stone); }
.rt-chart-axis-x { font-size: 10.5px; }
.rt-chart-axis-label { font-family: var(--mono); font-size: 10px; fill: var(--stone); letter-spacing: 0.04em; }
.rt-chart-legend {
  display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 14px;
  font-size: 13px; color: var(--charcoal);
}
.rt-chart-leg-item { display: inline-flex; align-items: center; gap: 7px; }
.rt-chart-leg-item i {
  display: inline-block; width: 12px; height: 3px; border-radius: 2px;
}
.rt-chart-tooltip {
  position: absolute; z-index: 5; pointer-events: none;
  font-family: var(--mono); font-size: 11.5px; color: var(--near-black);
  background: var(--ivory); border: 1px solid var(--border-deep);
  box-shadow: var(--shadow-lift); padding: 6px 10px; border-radius: 6px;
  white-space: nowrap;
}

/* Movers */
.rt-movers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); margin: 24px 0; }
.rt-mover-block {
  background: var(--ivory); border-radius: var(--r-xl);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
  padding: 20px 22px;
}
.rt-mover-block h3 {
  font-size: 15px; margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.rt-mover-block h3 .ico {
  width: 22px; height: 22px; border-radius: 6px;
  display: grid; place-items: center; flex-shrink: 0;
}
.rt-mover-block--up h3 .ico { background: var(--tint-green); color: var(--green); }
.rt-mover-block--down h3 .ico { background: var(--tint-terra); color: var(--terracotta-d); }
.rt-mover-list { display: flex; flex-direction: column; gap: 10px; }
.rt-mover-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; background: var(--parchment); border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--border-deep);
  font-size: 14px; gap: 12px;
}
.rt-mover-item .nm { color: var(--near-black); font-weight: 500; }
.rt-mover-item .dom { display: block; font-family: var(--mono); font-size: 11px; color: var(--stone); margin-top: 2px; }
.rt-mover-item .change {
  font-family: var(--mono); font-size: 13px; font-weight: 500; white-space: nowrap;
}
.rt-mover-item .change.up { color: var(--green); }
.rt-mover-item .change.down { color: var(--terracotta-d); }

/* History strip */
.rt-history {
  margin: 24px 0; padding: 22px;
  background: var(--ivory); border-radius: var(--r-xl);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
}
.rt-history h3 { font-size: 16px; margin-bottom: 14px; }
.rt-history-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.rt-history-day {
  flex-shrink: 0; min-width: 140px;
  padding: 12px 14px; background: var(--parchment); border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--border-deep);
}
.rt-history-day .d { font-family: var(--mono); font-size: 11px; color: var(--stone); }
.rt-history-day ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rt-history-day li { font-size: 12.5px; color: var(--charcoal); }
.rt-history-day li b { font-family: var(--mono); font-weight: 600; color: var(--near-black); }
.rt-history-day li.up b { color: var(--green); }
.rt-history-day li.down b { color: var(--terracotta-d); }

/* Movers — short interpretation note under the riser/dropper blocks */
.rt-mover-note {
  margin-top: 14px; padding: 16px 18px;
  background: var(--ivory); border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--border-deep);
  border-left: 3px solid var(--terracotta);
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 14.5px; line-height: 1.55; color: var(--charcoal);
}
.rt-mover-note .ico { font-size: 16px; line-height: 1.1; flex-shrink: 0; margin-top: 1px; }
.rt-mover-note strong { color: var(--near-black); font-weight: 600; }

/* Methodology — "Как мы считаем" */
.rt-method {
  margin-top: 28px; padding: 24px 26px;
  background: var(--ivory); border-radius: var(--r-lg);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
}
.rt-method h3 {
  font-size: 18px; font-family: var(--serif); font-weight: 600;
  color: var(--near-black); margin-bottom: 18px; letter-spacing: -0.015em;
}
.rt-method-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 24px;
}
.rt-method-item {
  display: flex; flex-direction: column; gap: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--border-deep);
}
.rt-method-item .lbl {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--stone); font-weight: 500;
}
.rt-method-item strong {
  font-size: 15px; color: var(--near-black); font-weight: 600;
  line-height: 1.3;
}
.rt-method-item p {
  font-size: 13px; color: var(--charcoal); line-height: 1.5; margin: 2px 0 0;
}

/* Buyer-bridge — "Кому какой сайт подойдёт" */
.rt-bridge {
  margin-top: 22px; padding: 24px 26px;
  background: linear-gradient(180deg, var(--tint-terra) 0%, var(--ivory) 60%);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
}
.rt-bridge h3 {
  font-size: 18px; font-family: var(--serif); font-weight: 600;
  color: var(--near-black); margin-bottom: 6px; letter-spacing: -0.015em;
}
.rt-bridge-sub {
  font-size: 14px; color: var(--olive); margin-bottom: 18px; max-width: 50em; line-height: 1.5;
}
.rt-bridge-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.rt-bridge-card {
  padding: 16px 18px; background: var(--ivory); border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--border-deep);
  display: flex; flex-direction: column; gap: 10px;
}
.rt-bridge-head {
  display: flex; align-items: center; gap: 12px;
}
.rt-bridge-head .av {
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
  box-shadow: 0 0 0 1px var(--border-deep);
}
.rt-bridge-head .av-letter {
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
  display: grid; place-items: center; background: var(--parchment);
  font-family: var(--serif); font-weight: 600; font-size: 14px;
  color: var(--near-black);
}
.rt-bridge-head .nm {
  display: block; font-size: 15px; font-weight: 600; color: var(--near-black);
  font-family: var(--serif); line-height: 1.2;
}
.rt-bridge-head .dom {
  display: block; font-family: var(--mono); font-size: 11.5px;
  color: var(--stone); margin-top: 2px;
}
.rt-bridge-card p {
  font-size: 13.5px; color: var(--charcoal); line-height: 1.5; margin: 0;
}

/* Author signals strip */
.rt-author {
  margin-top: 22px; padding: 22px 26px;
  background: var(--near-black); color: var(--warm-silver);
  border-radius: var(--r-lg);
}
.rt-author-card {
  display: flex; gap: 16px; align-items: flex-start;
}
.rt-author-ava {
  width: 64px; height: 64px; border-radius: 50%;
  object-fit: cover; object-position: center top;
  flex-shrink: 0;
  background: var(--warm-silver);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.12), 0 2px 8px rgba(0,0,0,0.3);
}
.rt-author-body { flex: 1 1 auto; }
.rt-author-name {
  font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ivory);
  letter-spacing: -0.012em;
}
.rt-author-role {
  font-size: 13px; color: var(--stone); margin-top: 2px;
}
.rt-author-note {
  font-size: 13.5px; color: var(--warm-silver); line-height: 1.55;
  margin-top: 10px; max-width: 50em;
}
.rt-author-note a { color: var(--coral); border-bottom: 1px dotted var(--coral); }
.rt-author-note a:hover { color: var(--ivory); border-bottom-color: var(--ivory); }
.rt-author-meta {
  display: flex; flex-wrap: wrap; gap: 10px 14px;
  align-items: center;
  padding-top: 16px; margin-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.rt-author-chip {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--warm-silver);
  padding: 5px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.06);
}
.rt-author-link {
  margin-left: auto; color: var(--coral); font-size: 14px; font-weight: 500;
  transition: color var(--t);
}
.rt-author-link:hover { color: var(--ivory); }

@media (max-width: 720px) {
  .rt-method { padding: 18px 18px; }
  .rt-method-grid { grid-template-columns: 1fr; gap: 14px; }
  .rt-bridge { padding: 18px 18px; }
  .rt-bridge-grid { grid-template-columns: 1fr; }
  .rt-author { padding: 18px; }
  .rt-author-card { flex-direction: column; gap: 12px; }
  .rt-author-meta { flex-direction: column; align-items: flex-start; gap: 8px; }
  .rt-author-link { margin-left: 0; }
}

/* Related */
.rt-related {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); margin-top: 22px;
}

@media (max-width: 960px) {
  .rt-catalog { grid-template-columns: 1fr 1fr; }
  .rt-summary { grid-template-columns: 1fr 1fr; }
  .rt-movers { grid-template-columns: 1fr; }
  .rt-related { grid-template-columns: 1fr 1fr; }
  .rt-table th, .rt-table td { padding: 11px 12px; font-size: 13px; }
  .rt-table .brand > img.av,
  .rt-table .brand > .av-letter { width: 30px; height: 30px; font-size: 13px; }
}

/* ===== Mobile: ratings page deep refit ===== */
@media (max-width: 640px) {
  .rt-catalog { grid-template-columns: 1fr; }
  .rt-summary { grid-template-columns: 1fr 1fr; gap: 10px; }
  .rt-sum-card { padding: 14px 16px; }
  .rt-sum-card .v { font-size: 22px; }
  .rt-related { grid-template-columns: 1fr; }

  .rt-hero h1 { font-size: clamp(26px, 7vw, 32px); }
  .rt-hero .lead { font-size: 16px; }
  .rt-hero-meta { gap: 6px; }
  .rt-hero-meta .chip { font-size: 12px; padding: 4px 10px; }

  .rt-table-head { padding: 14px 16px; flex-direction: column; align-items: flex-start; gap: 6px; }
  .rt-table-head h2 { font-size: 15px; }
  .rt-table-head .updated { font-size: 11px; }

  /* Convert table rows to stacked cards */
  .rt-table-scroll { overflow-x: visible; }
  .rt-table { font-size: 14px; }
  .rt-table thead { display: none; }
  .rt-table, .rt-table tbody { display: block; width: 100%; }
  .rt-table tr {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    grid-template-areas:
      "pos brand delta"
      "pos brand share";
    column-gap: 12px; row-gap: 4px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-cream);
    align-items: center;
  }
  .rt-table tr:last-child { border-bottom: none; }
  .rt-table tr:hover td,
  .rt-table tr:nth-child(even) td { background: transparent; }
  .rt-table td {
    display: block;
    padding: 0; border: none;
    background: transparent !important;
    vertical-align: baseline;
  }
  .rt-table td.pos {
    grid-area: pos;
    width: auto; font-size: 17px;
    align-self: center;
  }
  .rt-table tr > td:nth-child(2) { grid-area: brand; min-width: 0; }
  .rt-table .brand {
    gap: 10px;
    min-width: 0;
  }
  .rt-table .brand > img.av,
  .rt-table .brand > .av-letter { width: 30px; height: 30px; font-size: 13px; }
  .rt-table .brand > .info { min-width: 0; }
  .rt-table .brand > .info > .nm { font-size: 14px; }
  .rt-table .brand > .info > .dom { font-size: 11px; }
  .rt-table td.delta {
    grid-area: delta;
    text-align: right; align-self: start;
    font-size: 12.5px;
  }
  .rt-table td.share {
    grid-area: share;
    text-align: right; align-self: end;
    font-size: 11.5px; color: var(--stone);
    display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  }
  .rt-table .bar { width: 90px; margin: 0; height: 3px; }
  .rt-table .new-badge { font-size: 9px; padding: 1px 5px; margin-left: 5px; }

  /* History compact */
  .rt-history { padding: 16px; }
  .rt-history h3 { font-size: 14.5px; margin-bottom: 10px; }
  .rt-history-day { min-width: 130px; padding: 10px 12px; }
  .rt-history-day .d { font-size: 10.5px; }
  .rt-history-day li { font-size: 12px; }

  /* Movers compact */
  .rt-mover-block { padding: 16px 18px; }
  .rt-mover-block h3 { font-size: 14px; margin-bottom: 10px; }
  .rt-mover-item { padding: 8px 10px; font-size: 13px; }
  .rt-mover-item .dom { font-size: 10.5px; }
  .rt-mover-item .change { font-size: 12px; }

  /* Banner tighter */
  .rt-banner { padding: 14px 14px; font-size: 13.5px; gap: 10px; }
  .rt-banner .ico { width: 18px; height: 18px; }
}

@media (max-width: 380px) {
  .rt-summary { grid-template-columns: 1fr; }
  .rt-table tr { grid-template-columns: 24px 1fr auto; column-gap: 10px; padding: 12px 14px; }
  .rt-table .brand > img.av,
  .rt-table .brand > .av-letter { width: 28px; height: 28px; }
  .rt-table td.pos { font-size: 15px; }
}

/* Source chip with favicon (used on /ratings/<topic>/) */
.chip--src { padding-left: 8px; }
.chip--src img { display: inline-block; vertical-align: -2px; margin-right: 4px; border-radius: 3px; }

/* ============================================================
   Glossary hub & term pages (/glossary/)
   ============================================================ */
.gl-hero { padding-block: clamp(32px, 5vw, 48px) clamp(16px, 2.5vw, 24px); }
.gl-hero h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.08; letter-spacing: -0.024em; margin: 18px 0 16px; max-width: 18em; }
.gl-hero .lead { max-width: 42em; }

.gl-toolbar {
  display: flex; flex-direction: column; gap: 14px;
  margin: 22px 0 18px;
  padding: 18px 22px;
  background: var(--ivory); border-radius: var(--r-xl);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
}
.gl-search {
  display: flex; gap: 10px; align-items: center;
}
.gl-search input {
  flex: 1; padding: 11px 14px; font-size: 15px;
  font-family: inherit; color: var(--near-black);
  border: 1px solid var(--border-deep); border-radius: var(--r-md);
  background: var(--parchment);
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.gl-search input:focus {
  outline: none; border-color: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(201,100,66,0.15); background: var(--ivory);
}
.gl-search .count {
  font-family: var(--mono); font-size: 12.5px; color: var(--stone);
  flex-shrink: 0;
}
/* На узких экранах счётчик съедал половину строки и плейсхолдер обрезался
   («Поиск: «канонический»,»). Отдаём полю всю ширину, счётчик уводим под него. */
@media (max-width: 560px) {
  .gl-search { flex-wrap: wrap; row-gap: 6px; }
  .gl-search input { flex: 1 1 100%; }
  .gl-search .count { flex: 0 0 auto; }
}
.gl-alpha {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.gl-alpha button {
  background: transparent; border: 1px solid transparent;
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  color: var(--charcoal);
  padding: 5px 9px; border-radius: var(--r-md);
  cursor: pointer; transition: all var(--t);
}
.gl-alpha button:hover { background: var(--warm-sand); }
.gl-alpha button.active {
  background: var(--near-black); color: var(--ivory);
}
.gl-alpha button:disabled {
  color: var(--ring-warm); cursor: default; background: transparent;
}
.gl-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.gl-cat {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.04em; color: var(--charcoal);
  background: var(--parchment); border: 1px solid var(--border-deep);
  border-radius: 999px; padding: 5px 11px; cursor: pointer;
  transition: all var(--t);
}
.gl-cat:hover { color: var(--near-black); }
.gl-cat.active {
  background: var(--near-black); color: var(--ivory); border-color: var(--near-black);
}

.gl-section { margin-top: 24px; }
.gl-section-letter {
  display: flex; align-items: baseline; gap: 14px;
  margin: 24px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-deep);
}
.gl-section-letter .l {
  font-family: var(--serif); font-size: 28px; font-weight: 600;
  color: var(--terracotta); letter-spacing: -0.02em;
}
.gl-section-letter .c {
  font-family: var(--mono); font-size: 12px; color: var(--stone);
}

.gl-catalog {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.gl-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 18px;
  background: var(--ivory); border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--border-deep);
  color: inherit; text-decoration: none;
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.gl-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-whisper), 0 0 0 1px var(--ring-deep);
}
.gl-card .gl-card-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.gl-card .gl-card-h h3 {
  font-size: 17px; line-height: 1.2; margin: 0;
}
.gl-card .cat {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--stone); flex-shrink: 0;
}
.gl-card .sub {
  font-size: 12.5px; color: var(--olive); font-family: var(--mono);
}
.gl-card p {
  font-size: 13.5px; color: var(--olive); line-height: 1.5; margin: 0;
}
.gl-empty {
  padding: 32px; text-align: center; color: var(--stone); font-size: 14px;
}

/* Single term page */
.gl-page-head { padding-block: clamp(32px, 5vw, 48px) clamp(16px, 2.5vw, 24px); }
.gl-page-cat {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--terracotta);
  display: inline-block; margin-bottom: 12px;
}
.gl-page-head h1 {
  font-size: clamp(34px, 6vw, 54px); line-height: 1.05; letter-spacing: -0.026em;
  margin: 6px 0 8px;
}
.gl-page-head .sub {
  font-family: var(--mono); font-size: clamp(14px, 1.8vw, 17px); color: var(--olive);
  letter-spacing: 0.01em;
}
.gl-page-head .lead {
  font-size: clamp(17px, 2.2vw, 19px); line-height: 1.6;
  color: var(--charcoal); margin-top: 18px; max-width: 38em;
}

.gl-layout {
  display: grid; grid-template-columns: 1fr 280px;
  gap: clamp(24px, 4vw, 40px);
  padding-block: clamp(24px, 4vw, 36px) clamp(40px, 6vw, 56px);
  align-items: start;
}
/* grid-дети должны уметь сжиматься уже своего контента, иначе длинные строки
   (логи в <pre>, длинные URL) растягивают колонку шире вьюпорта на мобильном */
.gl-layout > * { min-width: 0; }
.gl-body { overflow-wrap: break-word; }

.gl-body p {
  font-size: 17px; line-height: 1.72; color: var(--charcoal);
  margin-bottom: 16px;
}
.gl-body p:last-child { margin-bottom: 0; }
.gl-body strong { color: var(--near-black); font-weight: 600; }
.gl-body ul {
  list-style: none; display: flex; flex-direction: column; gap: 10px;
  margin: 0 0 18px; padding: 0;
}
.gl-body ul li {
  position: relative; padding-left: 24px; font-size: 16px;
  color: var(--charcoal); line-height: 1.6;
}
.gl-body ul li::before {
  content: ""; position: absolute; left: 4px; top: 10px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--terracotta);
}
.gl-body h2 {
  font-size: clamp(20px, 2.8vw, 24px); margin: 28px 0 12px;
  letter-spacing: -0.015em;
}
.gl-body h2:first-child { margin-top: 0; }

.gl-formula {
  background: var(--ivory); border-radius: var(--r-lg);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
  border-left: 3px solid var(--terracotta);
  padding: 16px 22px;
  margin: 20px 0;
}
.gl-formula .lbl {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--stone); margin-bottom: 8px;
}
.gl-formula .val {
  font-family: var(--mono); font-size: 15px; color: var(--near-black);
  line-height: 1.6;
}
.gl-formula .val b { color: var(--terracotta-d); font-weight: 600; }
.gl-formula .val .op { color: var(--stone); }

.gl-example {
  background: var(--parchment); border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--border-deep);
  padding: 16px 22px; margin: 20px 0;
}
.gl-example .lbl {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--terracotta); margin-bottom: 8px;
}
.gl-example p { font-size: 15px; line-height: 1.6; margin: 0; color: var(--charcoal); }

.gl-aside {
  position: sticky; top: calc(var(--nav-h) + 16px);
  display: flex; flex-direction: column; gap: 14px;
}
.gl-aside-card {
  padding: 18px 20px;
  background: var(--ivory); border-radius: var(--r-lg);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
}
.gl-aside-card h3 {
  font-size: 13px;
  font-family: var(--mono); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--stone); margin-bottom: 12px;
}
.gl-aside-card ul { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; }
.gl-aside-card li { font-size: 14px; }
.gl-aside-card a {
  color: var(--charcoal); transition: color var(--t);
  display: inline-flex; align-items: center; gap: 6px;
}
.gl-aside-card a:hover { color: var(--terracotta); }
.gl-aside-card a::before {
  content: "→"; color: var(--terracotta); font-weight: 600;
}
.gl-aside-card--dark { background: var(--near-black); }
.gl-aside-card--dark h3 { color: var(--warm-silver); }
.gl-aside-card--dark p { font-size: 14px; color: var(--warm-silver); line-height: 1.55; margin-bottom: 12px; }
.gl-aside-card--dark .btn { width: 100%; justify-content: center; }

.gl-prev-next {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap); margin-top: 28px;
}
.gl-prev-next a {
  padding: 16px 20px; background: var(--ivory); border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--border-deep);
  color: inherit; text-decoration: none;
  transition: box-shadow var(--t), transform var(--t);
}
.gl-prev-next a:hover { box-shadow: var(--shadow-whisper), 0 0 0 1px var(--ring-deep); transform: translateY(-2px); }
.gl-prev-next .lbl {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--stone); display: block; margin-bottom: 6px;
}
.gl-prev-next .nm {
  font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--near-black);
}
.gl-prev-next .gl-pn-next { text-align: right; }

@media (max-width: 960px) {
  .gl-catalog { grid-template-columns: 1fr 1fr; }
  .gl-layout { grid-template-columns: 1fr; }
  .gl-aside { position: static; }
}
@media (max-width: 640px) {
  .gl-catalog { grid-template-columns: 1fr; }
  .gl-toolbar { padding: 14px 16px; }
  .gl-alpha button { padding: 4px 7px; font-size: 12px; }
  .gl-cats { gap: 5px; }
  .gl-cat { font-size: 11.5px; padding: 4px 9px; }
  .gl-page-head h1 { font-size: clamp(28px, 8vw, 38px); }
  .gl-prev-next { grid-template-columns: 1fr; }
  .gl-prev-next .gl-pn-next { text-align: left; }
}

/* Inline code in glossary body and examples */
.gl-body code,
.gl-example code,
.gl-formula code {
  font-family: var(--mono); font-size: 0.9em;
  background: var(--warm-sand); color: var(--near-black);
  padding: 2px 6px; border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--border-deep);
  white-space: nowrap;
}
.gl-example {
  padding: 18px 22px;
}
.gl-example p { line-height: 1.65; }
.gl-example pre {
  margin: 10px 0 0; padding: 12px 14px;
  background: var(--near-black); color: var(--ivory);
  border-radius: var(--r-md); overflow-x: auto;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.55;
}
.gl-example .lbl::before {
  content: ""; display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--terracotta);
  margin-right: 7px; vertical-align: 1px;
}

/* ============================================================
   Glossary — creative example & formula cards (final override)
   Example block looks like an IDE doc window.
   Formula block looks like a terminal pane.
   ============================================================ */

.gl-example {
  position: relative;
  margin: 28px 0 32px;
  padding: 0;
  background: var(--ivory);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
  overflow: hidden;
  border-left: none;
  transition: box-shadow var(--t), transform var(--t);
}
.gl-example:hover {
  box-shadow: var(--shadow-lift), inset 0 0 0 1px var(--ring-deep);
  transform: translateY(-1px);
}
/* "Window" header bar with macOS-style dots */
.gl-example .lbl {
  margin: 0;
  padding: 11px 18px;
  background: linear-gradient(180deg, var(--parchment) 0%, var(--ivory) 100%);
  border-bottom: 1px solid var(--border-deep);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terracotta-d);
  display: flex;
  align-items: center;
  gap: 12px;
}
.gl-example .lbl::before {
  content: "";
  display: inline-block;
  width: 36px; height: 10px;
  background:
    radial-gradient(circle at 5px 5px, #e8736a 4px, transparent 4.5px),
    radial-gradient(circle at 18px 5px, #e6c067 4px, transparent 4.5px),
    radial-gradient(circle at 31px 5px, #8fb592 4px, transparent 4.5px);
  background-repeat: no-repeat;
  flex-shrink: 0;
  opacity: 0.7;
  margin-right: 0;
  border-radius: 0;
}
.gl-example .lbl::after {
  content: "";
  margin-left: auto;
  width: 14px; height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c96442' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 2v3M12 19v3M5 12H2M22 12h-3M5 5l2 2M17 17l2 2M5 19l2-2M17 7l2-2'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
.gl-example p {
  margin: 0;
  padding: 20px 22px 22px;
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--charcoal);
}
.gl-example p:not(:last-child) { padding-bottom: 4px; }
.gl-example p + p { padding-top: 0; padding-bottom: 22px; }
.gl-example code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--parchment);
  color: var(--terracotta-d);
  padding: 2px 7px;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px var(--ring-warm);
  font-weight: 500;
  white-space: nowrap;
}
/* mobile: длинный inline-code не должен распирать/обрезаться (nowrap выше) */
@media (max-width: 640px) {
  .gl-example code, .gl-body code { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   ──── GLOSSARY · RICH VISUAL BLOCKS ────
   Stat hero · triage cards · vs-panel · timeline · checklist
   ============================================================ */

.gl-h2 {
  font-size: clamp(20px, 2.5vw, 24px);
  font-family: var(--serif); font-weight: 600;
  color: var(--near-black); letter-spacing: -0.014em;
  margin: 36px 0 16px;
}

/* Hero stat row — 3 big numbers */
.gl-hero-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin: 24px 0 8px;
}
.gl-stat {
  padding: 18px 20px;
  background: linear-gradient(180deg, var(--ivory) 0%, var(--parchment) 100%);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
  border-top: 3px solid var(--terracotta);
}
.gl-stat-v {
  font-family: var(--serif); font-size: clamp(28px, 4vw, 38px);
  font-weight: 600; color: var(--near-black); line-height: 1.05;
  letter-spacing: -0.022em;
}
.gl-stat-v span { font-size: 0.55em; color: var(--terracotta); font-weight: 500; margin-left: 2px; }
.gl-stat-k {
  font-size: 12.5px; color: var(--olive); margin-top: 6px; line-height: 1.4;
}

/* Triage 3-card layout (symptom / cure / prevent) — polished */
.gl-triage {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin: 14px 0 28px;
  counter-reset: triage;
}
.gl-triage-card {
  --tri-accent: var(--stone);
  --tri-bg-tint: rgba(135, 134, 127, 0.04);
  position: relative;
  padding: 26px 22px 22px;
  background: linear-gradient(180deg, var(--tri-bg-tint) 0%, var(--ivory) 70%);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
  overflow: hidden;
  transition: box-shadow var(--t), transform var(--t);
  counter-increment: triage;
}
.gl-triage-card:hover {
  box-shadow: var(--shadow-lift), inset 0 0 0 1px var(--tri-accent);
  transform: translateY(-2px);
}
/* Big accent stripe on top */
.gl-triage-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--tri-accent);
}
/* Watermark number in background */
.gl-triage-card::after {
  content: "0" counter(triage);
  position: absolute; top: 14px; right: 18px;
  font-family: var(--serif); font-size: 56px; font-weight: 700;
  color: var(--tri-accent); opacity: 0.07; line-height: 1;
  letter-spacing: -0.04em; pointer-events: none;
}
.gl-triage-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.gl-triage-ico {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--tri-accent) 14%, var(--ivory));
  color: var(--tri-accent);
  flex-shrink: 0;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02), inset 0 0 0 1px color-mix(in srgb, var(--tri-accent) 18%, transparent);
}
.gl-triage-ico svg { width: 22px; height: 22px; }
.gl-triage-lbl {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 500; color: var(--tri-accent);
  display: block;
}
.gl-triage-lbl-sub {
  display: block; margin-top: 3px;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--charcoal); letter-spacing: 0; text-transform: none;
}
.gl-triage-card ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.gl-triage-card li {
  position: relative; padding-left: 24px;
  font-size: 14.5px; line-height: 1.5; color: var(--charcoal);
}
.gl-triage-card li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 14px; height: 14px; border-radius: 50%;
  background: color-mix(in srgb, var(--tri-accent) 18%, var(--ivory));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tri-accent) 50%, transparent);
}
/* Variants — set accent via CSS var */
.gl-triage-card--symptom { --tri-accent: #c96442; --tri-bg-tint: rgba(201, 100, 66, 0.07); }
.gl-triage-card--cure    { --tri-accent: #5e8662; --tri-bg-tint: rgba(143, 181, 146, 0.10); }
.gl-triage-card--prevent { --tri-accent: #586176; --tri-bg-tint: rgba(88, 97, 118, 0.07); }
/* Cure cards: check icon instead of dot for list items */
.gl-triage-card--cure li::before {
  background: #5e8662;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 10 18 20 6'/%3E%3C/svg%3E");
  background-size: 9px;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
}
/* Prevent cards: shield-like square */
.gl-triage-card--prevent li::before {
  border-radius: 3px;
}

/* VS panel — bad vs good comparison */
.gl-vs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin: 14px 0 24px;
}
.gl-vs-card {
  padding: 20px 22px;
  background: var(--ivory);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
  border-top: 3px solid var(--ring-warm);
}
.gl-vs-card--bad { border-top-color: var(--terracotta); background: linear-gradient(180deg, rgba(201,100,66,0.04) 0%, var(--ivory) 60%); }
.gl-vs-card--good { border-top-color: #8fb592; background: linear-gradient(180deg, rgba(143,181,146,0.06) 0%, var(--ivory) 60%); }
.gl-vs-h {
  font-family: var(--serif); font-size: 16px; font-weight: 600;
  color: var(--near-black); margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.gl-vs-mark {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  font-family: var(--sans); font-size: 14px; font-weight: 700; line-height: 1;
}
.gl-vs-card--bad .gl-vs-mark { background: var(--terracotta); color: var(--ivory); }
.gl-vs-card--good .gl-vs-mark { background: #8fb592; color: var(--ivory); }
.gl-vs-card ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.gl-vs-card li {
  position: relative; padding-left: 18px;
  font-size: 14.5px; line-height: 1.55; color: var(--charcoal);
}
.gl-vs-card li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 10px; height: 2px; border-radius: 1px;
}
.gl-vs-card--bad li::before { background: var(--terracotta); }
.gl-vs-card--good li::before { background: #8fb592; }

/* Timeline */
.gl-timeline {
  position: relative;
  margin: 14px 0 24px;
  padding: 22px 24px 8px;
  background: var(--ivory);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
}
.gl-timeline::before {
  content: ""; position: absolute;
  left: 84px; top: 30px; bottom: 22px;
  width: 2px;
  background: linear-gradient(180deg, var(--terracotta) 0%, var(--ring-deep) 100%);
  opacity: 0.4;
}
.gl-tl-row {
  display: grid; grid-template-columns: 70px 1fr; gap: 14px;
  padding: 12px 0; position: relative;
  align-items: start;
}
.gl-tl-yr {
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  color: var(--terracotta-d); padding-top: 1px;
}
.gl-tl-dot {
  position: absolute; left: 79px; top: 18px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--terracotta); box-shadow: 0 0 0 3px var(--ivory), 0 0 0 4px rgba(201,100,66,0.2);
  z-index: 1;
}
.gl-tl-body {
  font-size: 14.5px; line-height: 1.6; color: var(--charcoal);
  padding-left: 18px;
}
.gl-tl-body strong { color: var(--near-black); font-weight: 600; }

/* Benchmark scale — for metric terms */
.gl-scale {
  margin: 14px 0 24px;
  padding: 22px 24px 24px;
  background: var(--ivory);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
}
.gl-scale-h {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--stone); margin-bottom: 14px;
}
.gl-scale-bar {
  display: grid; grid-template-columns: repeat(var(--zones, 4), 1fr);
  gap: 3px; margin-bottom: 10px;
}
.gl-scale-zone {
  height: 10px; border-radius: 3px; position: relative;
}
.gl-scale-zone--bad { background: #e8736a; }
.gl-scale-zone--meh { background: #e6c067; }
.gl-scale-zone--ok { background: #a2c8a7; }
.gl-scale-zone--good { background: #6ea676; }
.gl-scale-zone--great { background: #4d8a58; }
.gl-scale-labels {
  display: grid; grid-template-columns: repeat(var(--zones, 4), 1fr);
  gap: 3px;
}
.gl-scale-label {
  font-family: var(--mono); font-size: 11px;
  color: var(--charcoal); line-height: 1.3;
  text-align: center;
}
.gl-scale-label b {
  display: block; font-family: var(--sans);
  font-size: 13px; font-weight: 600;
  color: var(--near-black); margin-bottom: 2px;
}

/* Responsive */
@media (max-width: 720px) {
  .gl-hero-stats { grid-template-columns: 1fr; gap: 10px; }
  .gl-triage { grid-template-columns: 1fr; gap: 12px; }
  .gl-vs { grid-template-columns: 1fr; gap: 12px; }
  .gl-timeline::before { left: 60px; }
  .gl-tl-row { grid-template-columns: 50px 1fr; }
  .gl-tl-dot { left: 56px; }
  .gl-scale-label { font-size: 10px; }
  .gl-scale-label b { font-size: 11.5px; }
}

/* Formula block — looks like a terminal pane */
.gl-formula {
  position: relative;
  margin: 28px 0;
  padding: 0;
  background: var(--near-black);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-whisper);
  border: none;
  border-left: none;
  overflow: hidden;
}
.gl-formula .lbl {
  margin: 0;
  padding: 11px 18px;
  background: rgba(255,255,255,0.035);
  border-bottom: 1px solid var(--dark-warm);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coral);
  display: flex;
  align-items: center;
  gap: 10px;
}
.gl-formula .lbl::before {
  content: "ƒ(x)";
  font-family: var(--mono);
  font-size: 10.5px;
  font-style: normal;
  color: var(--coral);
  background: rgba(217,119,87,0.12);
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0;
  text-transform: none;
}
.gl-formula .lbl::after {
  content: "";
  margin-left: auto;
  width: 14px; height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97757' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M8 12h8M12 8v8'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
.gl-formula .val {
  margin: 0;
  padding: 18px 22px 20px;
  font-family: var(--mono);
  font-size: 15.5px;
  color: var(--ivory);
  line-height: 1.75;
  font-variant-numeric: tabular-nums;
}
.gl-formula .val b {
  color: var(--coral);
  font-weight: 600;
}
.gl-formula .val .op {
  color: var(--warm-silver);
  font-weight: 400;
}
.gl-formula .val code {
  background: rgba(255,255,255,0.06);
  color: var(--coral);
  padding: 2px 6px;
  border-radius: 4px;
  border: none;
  box-shadow: none;
}

/* Mobile tweaks */
@media (max-width: 640px) {
  .gl-example .lbl, .gl-formula .lbl { padding: 10px 14px; font-size: 10px; }
  .gl-example p { padding: 16px 16px 18px; font-size: 14.5px; }
  .gl-formula .val { padding: 16px 16px 18px; font-size: 14px; }
}

/* Centered 3-button CTA at end of main page */
.hero-cta-end {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  align-items: center;
  padding-block: clamp(40px, 6vw, 64px);
}
.hero-cta-end .btn {
  padding: 14px 26px;
  font-size: 15.5px;
}
@media (max-width: 640px) {
  .hero-cta-end { flex-direction: column; padding-block: 32px; }
  .hero-cta-end .btn { width: 100%; max-width: 320px; justify-content: center; }
}
/* Calculator FAQ */
.calc-faq-list { max-width: 42em; border-top: 1px solid var(--line); }
.calc-faq .sec-head { margin-bottom: 0; }

/* SEO client dashboard demo */
.dash-hero { padding-block: clamp(32px, 5vw, 48px) clamp(16px, 2.5vw, 24px); }
.dash-hero-row {
  display: grid; grid-template-columns: 1fr minmax(220px, 280px); gap: var(--grid-gap);
  align-items: start; margin-top: 18px;
}
.dash-hero h1 {
  font-size: clamp(28px, 5vw, 44px); line-height: 1.08; letter-spacing: -0.024em;
  margin: 0 0 14px; max-width: 16em;
}
.dash-hero .lead { max-width: 40em; margin: 0; }
.dash-client-card {
  background: var(--near-black); color: var(--ivory); border-radius: var(--r-xl);
  padding: 18px 20px; box-shadow: var(--shadow-lift);
}
.dash-client-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--warm-silver); display: block;
}
.dash-client-card strong { display: block; font-size: 22px; margin: 8px 0 4px; letter-spacing: -0.02em; }
.dash-client-meta { display: block; font-size: 13.5px; color: var(--warm-silver); }
.dash-client-upd {
  display: block; margin-top: 12px; font-family: var(--mono); font-size: 11px; color: var(--coral);
}
.dash-hero-meta {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 20px;
}
.dash-period { display: flex; gap: 6px; margin-left: auto; }
.dash-period .fchip {
  font-family: var(--mono); font-size: 12px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border-deep); background: var(--ivory); color: var(--charcoal);
  cursor: pointer; transition: all var(--t);
}
.dash-period .fchip:hover { color: var(--near-black); }
.dash-period .fchip.active { background: var(--near-black); color: var(--ivory); border-color: var(--near-black); }

.dash-grid {
  display: grid; grid-template-columns: 1fr minmax(280px, 340px); gap: var(--grid-gap);
  margin: 24px 0; align-items: stretch;
}
.dash-grid--2 { grid-template-columns: 1fr 1fr; align-items: stretch; }
.dash-grid--2 .dash-panel--chart { min-height: 100%; }
.dash-panel {
  background: var(--ivory); border-radius: var(--r-xl);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
  padding: 20px 22px;
}
.dash-page .wrap.section > .dash-panel { margin-bottom: 24px; }
.dash-panel--chart {
  display: flex; flex-direction: column; min-height: 100%; padding-bottom: 16px;
}
.dash-panel--chart .dash-panel-head { flex-shrink: 0; }
.dash-panel-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 16px;
}
.dash-panel-head h2 { font-size: 16px; margin: 0; letter-spacing: -0.01em; }
.dash-panel-sub { font-family: var(--mono); font-size: 11px; color: var(--stone); text-transform: uppercase; letter-spacing: 0.06em; }
.dash-chart-wrap {
  flex: 1 1 auto; min-height: 220px; display: flex; margin: 0 -6px -6px;
}
.dash-chart-wrap--main { min-height: clamp(260px, 36vh, 420px); }
.dash-chart-wrap--month { min-height: 300px; margin-top: 4px; }
.dash-chart-svg--month { width: 100%; height: auto; min-height: 280px; display: block; }
.dash-chart-wrap--month + .rt-table-scroll {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-cream);
}
.dash-month-legend-label { font-family: var(--mono); font-size: 11px; font-weight: 500; }
.dash-month-bar { fill: rgba(217, 119, 87, 0.82); transition: fill 0.2s; }
.dash-month-leads-area { fill: rgba(74, 124, 89, 0.1); }
.dash-month-leads-line { fill: none; stroke: #4a7c59; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.dash-month-leads-dot { fill: #4a7c59; stroke: var(--ivory); stroke-width: 2; }
.dash-chart-val--bar { font-family: var(--mono); font-size: 10.5px; font-weight: 600; fill: var(--charcoal); }
.dash-chart-val--leads { font-family: var(--mono); font-size: 12px; font-weight: 600; fill: #3d7350; }
.dash-chart-axis-y--right { fill: #4a7c59; font-size: 10px; }
.dash-chart-axis--month { font-size: 12px; font-weight: 600; fill: var(--charcoal); }
.dash-month-pos { font-family: var(--mono); font-size: 10px; fill: #3d6b9e; }
.dash-chart-svg { width: 100%; height: auto; display: block; }
.dash-chart-svg--fill { height: 100%; min-height: inherit; flex: 1; }
.dash-chart-svg--traffic,
.dash-chart-svg--leads { width: 100%; height: 100%; min-height: inherit; flex: 1; display: block; }

.dash-chart-stats { display: flex; gap: 28px; margin: 2px 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border-cream); }
.dash-cs-item { display: flex; flex-direction: column; gap: 3px; }
.dash-cs-item .v { font-family: var(--serif); font-size: 23px; font-weight: 600; color: var(--near-black); line-height: 1; }
.dash-cs-item .k { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--stone); }
.dash-cs-up { color: var(--green) !important; }
.dash-cs-down { color: var(--terracotta-d) !important; }
.dash-cs-flat { color: var(--stone) !important; }

.dash-bar { transition: opacity 0.2s; }
.dash-bar-val { font-family: var(--mono); font-size: 11px; font-weight: 600; fill: var(--charcoal); }
.dash-ax-grid { stroke: var(--border-cream); stroke-width: 1; }
.dash-ax-y { font-family: var(--mono); font-size: 10px; fill: var(--stone); }
.dash-ax-x { font-family: var(--mono); font-size: 10.5px; fill: var(--stone); }
.dash-chart-bg { fill: var(--parchment); }
.dash-chart-grid { stroke: var(--border-cream); stroke-width: 1; }
.dash-chart-axis { font-family: var(--mono); font-size: 10px; fill: var(--stone); }
.dash-chart-axis-y { font-size: 11px; fill: var(--charcoal); font-weight: 500; }
.dash-chart-val {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  fill: var(--near-black); pointer-events: none;
}
.dash-line { fill: none; stroke: var(--coral); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.dash-area { opacity: 1; }
.dash-dot { fill: var(--coral); stroke: var(--ivory); stroke-width: 2; }
.dash-pos-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dash-pos-legend {
  display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px;
  font-size: 12px; color: var(--charcoal);
}
.dash-pos-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dash-pos-legend i { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }

.dash-sidebar { margin: 0; height: fit-content; }
.dash-goal-bar {
  height: 6px; background: var(--dark-warm); border-radius: 3px; margin-top: 14px; overflow: hidden;
}
.dash-goal-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--green), #b9e3a8); border-radius: 3px; }

.dash-pages-featured { display: flex; flex-direction: column; gap: 0; }
.dash-pages-summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--border-cream);
}
.dash-pages-sum-item .k {
  display: block; font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--stone); margin-bottom: 6px;
}
.dash-pages-sum-item strong {
  display: block; font-family: var(--serif); font-size: 28px; font-weight: 600; color: var(--near-black); line-height: 1.1;
}
.dash-pages-sum-item strong.pos { color: var(--green); }
.dash-pages-sum-item .sub { display: block; font-size: 12px; color: var(--stone); margin-top: 4px; }

.dash-pages-head {
  display: grid; grid-template-columns: 32px 1.6fr 120px 110px 100px 120px 1fr 72px;
  gap: 12px; padding: 0 16px 10px;
  font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--stone);
}
.dash-pages-list { display: flex; flex-direction: column; gap: 10px; }
.dash-page-card {
  display: grid; grid-template-columns: 32px 1.6fr 120px 110px 100px 120px 1fr 72px;
  gap: 12px; align-items: center;
  padding: 16px; border-radius: var(--r-lg);
  background: var(--parchment); border: 1px solid var(--border-cream);
  transition: border-color var(--t), box-shadow var(--t);
}
.dash-page-card:hover { border-color: var(--border-deep); box-shadow: var(--shadow-whisper); }
.dash-page-card:first-child { border-color: rgba(184, 92, 56, 0.35); background: var(--tint-terra); }
.dash-page-rank {
  font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--stone); text-align: center;
}
.dash-page-card:first-child .dash-page-rank { color: var(--terracotta); }
.dash-page-title-row { margin-bottom: 10px; }
.dash-page-title { display: block; font-size: 15px; font-weight: 600; color: var(--near-black); margin-bottom: 4px; }
.dash-page-url {
  font-family: var(--mono); font-size: 11px; color: var(--stone); word-break: break-all;
}
.dash-page-bars { margin-top: 2px; }
.dash-page-bar-row { display: flex; align-items: center; gap: 8px; }
.dash-page-bar-row .lbl { font-family: var(--mono); font-size: 10px; color: var(--stone); width: 48px; flex-shrink: 0; }
.dash-page-bar-track {
  flex: 1; position: relative; height: 8px; background: var(--warm-sand); border-radius: 4px; overflow: hidden;
}
.dash-page-bar-track .prev {
  position: absolute; left: 0; top: 0; height: 100%; background: var(--border-deep); opacity: 0.5; border-radius: 4px;
}
.dash-page-bar-track .cur {
  position: absolute; left: 0; top: 0; height: 100%; background: var(--terracotta); border-radius: 4px; z-index: 1;
}
.dash-page-metric strong {
  display: block; font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--near-black); line-height: 1.1;
}
.dash-page-metric strong.pos { color: var(--green); }
.dash-page-metric .dash-delta { display: inline-block; margin: 2px 0 4px; }
.dash-page-metric .prev { display: block; font-family: var(--mono); font-size: 11px; color: var(--stone); }
.dash-page-metric .cr { display: block; font-family: var(--mono); font-size: 11px; color: var(--green); margin-top: 2px; }
.dash-page-metric--beh { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--charcoal); }
.dash-page-metric--beh strong { display: inline; font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--near-black); }
.dash-page-kw { font-size: 13px; font-weight: 500; color: var(--charcoal); line-height: 1.35; }
.dash-page-share strong {
  display: block; font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--near-black);
}
.dash-page-share span { font-family: var(--mono); font-size: 10px; color: var(--stone); }

.dash-pages { display: flex; flex-direction: column; gap: 14px; }
.dash-page-row code {
  font-family: var(--mono); font-size: 12px; color: var(--near-black); word-break: break-all;
}
.dash-page-stats { display: block; font-size: 12px; color: var(--stone); margin-top: 4px; }
.dash-page-bar {
  height: 4px; background: var(--warm-sand); border-radius: 2px; margin-top: 8px; overflow: hidden;
}
.dash-page-bar span { display: block; height: 100%; background: var(--terracotta); border-radius: 2px; }

.dash-kw-table .q { font-weight: 500; max-width: 220px; }
.dash-kw-table .pos { font-family: var(--serif); font-size: 17px; font-weight: 600; width: 48px; }
.dash-kw-table .vol { font-family: var(--mono); font-size: 12px; color: var(--stone); white-space: nowrap; }
.dash-kw-table .url code { font-size: 11px; color: var(--stone); }
.dash-kw-table tr.top-3 td.pos { color: var(--terracotta); }
.dash-kw-table tr.top-10 td.pos { color: var(--green); }
.dash-delta { font-family: var(--mono); font-size: 12px; font-weight: 500; white-space: nowrap; }
.dash-delta.up { color: var(--green); }
.dash-delta.down { color: var(--terracotta-d); }
.dash-delta.flat { color: var(--stone); }

.dash-tasks-grid {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--grid-gap); margin-top: 24px;
}
.dash-task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.dash-task-list li {
  display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--r-lg);
  background: var(--parchment); border: 1px solid var(--border-cream);
}
.dash-task-list li.active { border-color: var(--terracotta); background: var(--tint-terra); }
.dash-task-list li.done { opacity: 0.72; }
.dash-task-check {
  font-family: var(--mono); font-size: 13px; color: var(--terracotta); flex-shrink: 0; width: 18px;
}
.dash-task-list li.done .dash-task-check { color: var(--green); }
.dash-task-list strong { display: block; font-size: 14px; margin-bottom: 3px; }
.dash-task-list span { font-size: 12.5px; color: var(--olive); line-height: 1.4; }

.dash-health-list { display: flex; flex-direction: column; gap: 14px; }
.dash-health-item {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: center;
}
.dash-health-item .k { font-size: 13px; color: var(--charcoal); }
.dash-health-bar {
  height: 6px; background: var(--warm-sand); border-radius: 3px; overflow: hidden;
}
.dash-health-bar span { display: block; height: 100%; border-radius: 3px; }
.dash-health-bar.good span { background: var(--green); }
.dash-health-bar.mid span { background: #c4923a; }
.dash-health-bar.warn span { background: var(--terracotta-d); width: 100% !important; opacity: 0.35; }
.dash-health-item .v { font-family: var(--mono); font-size: 12px; font-weight: 500; min-width: 52px; text-align: right; }
.dash-health-item .v.good { color: var(--green); }
.dash-health-item .v.mid { color: #a67c3d; }
.dash-health-item .v.warn { color: var(--terracotta-d); }

@media (max-width: 960px) {
  .dash-hero-row { grid-template-columns: 1fr; }
  .dash-grid, .dash-grid--2, .dash-grid--3, .dash-tasks-grid { grid-template-columns: 1fr; }
  .dash-sidebar { position: static; }
  .dash-period { margin-left: 0; width: 100%; }
}

.dash-summary-2 { margin-top: calc(-1 * var(--grid-gap) + 8px); }
.dash-nav {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; padding: 10px 12px;
  background: var(--ivory); border-radius: var(--r-lg);
  box-shadow: var(--shadow-whisper), inset 0 0 0 1px var(--border-deep);
  position: sticky; top: calc(var(--nav-h) + 8px); z-index: 20;
}
.dash-nav a {
  font-family: var(--mono); font-size: 12px; padding: 6px 12px; border-radius: 999px;
  color: var(--charcoal); text-decoration: none; transition: all var(--t);
}
.dash-nav a:hover { color: var(--near-black); background: var(--parchment); }
.dash-nav a.active { background: var(--near-black); color: var(--ivory); }
.dash-anchor { scroll-margin-top: calc(var(--nav-h) + 56px); }

.dash-grid--3 { grid-template-columns: repeat(3, 1fr); margin: 24px 0; }

.dash-hbars { display: flex; flex-direction: column; gap: 12px; }
.dash-hbar-row {
  display: grid; grid-template-columns: minmax(120px, 1fr) 1fr auto; gap: 10px; align-items: center;
}
.dash-hbar-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--charcoal); min-width: 0; }
.dash-hbar-label span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-hbar-track {
  height: 8px; background: var(--warm-sand); border-radius: 4px; overflow: hidden;
}
.dash-hbar-track span { display: block; height: 100%; border-radius: 4px; min-width: 4px; }
.dash-hbar-val { font-family: var(--mono); font-size: 11.5px; color: var(--stone); white-space: nowrap; }

.dash-cluster-row { padding: 10px 0; border-bottom: 1px solid var(--border-cream); }
.dash-cluster-row:last-child { border-bottom: none; padding-bottom: 0; }
.dash-cluster-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px;
}
.dash-cluster-name { font-size: 13px; font-weight: 500; color: var(--charcoal); }
.dash-cluster-val { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--near-black); }
.dash-cluster-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
  font-size: 12px;
}
.dash-cluster-prev { font-family: var(--mono); color: var(--stone); font-size: 11px; }
.dash-cluster-bars { position: relative; height: 10px; background: var(--warm-sand); border-radius: 5px; overflow: hidden; }
.dash-cluster-bar { position: absolute; left: 0; top: 0; height: 100%; border-radius: 5px; transition: width 0.3s; }
.dash-cluster-bar--prev { background: var(--border-deep); opacity: 0.45; z-index: 1; }
.dash-cluster-bar--cur { z-index: 2; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); }

.dash-donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.dash-donut {
  width: 100px; height: 100px; border-radius: 50%; flex-shrink: 0;
  box-shadow: inset 0 0 0 8px var(--ivory);
}
.dash-donut-legend { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 8px; }
.dash-donut-item {
  display: grid; grid-template-columns: 10px 1fr auto; gap: 6px 8px; align-items: center; font-size: 13px;
}
.dash-donut-item i { width: 10px; height: 10px; border-radius: 3px; display: block; }
.dash-donut-item strong { font-family: var(--mono); font-size: 12px; }
.dash-donut-item .sub { grid-column: 2 / -1; font-size: 11px; color: var(--stone); margin-top: -4px; }

.dash-compare-table td, .dash-engine-table td, .dash-pages-table td,
.dash-gsc-table td, .dash-comp-table td, .dash-content-table td, .dash-links-table td,
.dash-month-table td { font-size: 13px; }
.dash-compare-table td strong, .dash-engine-table td strong { color: var(--near-black); }
.dash-pct-cell { min-width: 100px; }
.dash-pct-bar {
  height: 4px; background: var(--warm-sand); border-radius: 2px; overflow: hidden;
  display: inline-block; width: 56px; vertical-align: middle; margin-right: 6px;
}
.dash-pct-bar span { display: block; height: 100%; background: var(--green); border-radius: 2px; }
.dash-pct-bar.mid span { background: #c4923a; }
.dash-pct-val { font-family: var(--mono); font-size: 11px; color: var(--stone); }

.dash-type {
  display: inline-block; font-family: var(--mono); font-size: 9px; font-weight: 500;
  padding: 0 5px; border-radius: 3px; white-space: nowrap;
}
.dash-type--comm { background: rgba(184, 92, 56, 0.12); color: #b85c38; }
.dash-type--info { background: rgba(74, 124, 89, 0.12); color: #4a7c59; }
.dash-type--brand { background: rgba(61, 107, 158, 0.12); color: #3d6b9e; }

.dash-kw-table--full .q { max-width: 200px; }
.dash-comp-table tr.dash-you td { background: var(--tint-terra); }
.dash-comp-table tr.dash-you td:first-child { box-shadow: inset 3px 0 0 var(--terracotta); }

.dash-pages-table .url code, .dash-links-table .url code { font-size: 11px; word-break: break-all; }
.dash-link-src { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.dash-link-fav {
  width: 20px; height: 20px; border-radius: 4px; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); object-fit: contain; background: var(--ivory);
}
.dash-link-fav-letter {
  width: 20px; height: 20px; border-radius: 4px; flex-shrink: 0;
  display: grid; place-items: center; font-family: var(--mono); font-size: 10px; font-weight: 600;
  background: var(--warm-sand); color: var(--stone);
}
.dash-link-src strong { font-size: 13px; color: var(--near-black); font-weight: 600; }
.dash-links-table td:first-child { min-width: 148px; }
.dash-month-table td.pos { color: var(--green); font-weight: 600; }

@media (max-width: 960px) {
  .dash-nav { position: static; overflow-x: auto; flex-wrap: nowrap; }
  .dash-hbar-row { grid-template-columns: 1fr; gap: 4px; }
  .dash-donut-wrap { justify-content: center; }
  .dash-pages-summary { grid-template-columns: 1fr; }
  .dash-pages-head { display: none; }
  .dash-page-card {
    grid-template-columns: 1fr; gap: 10px; padding: 14px;
  }
  .dash-page-rank { text-align: left; font-size: 14px; }
  .dash-page-metric, .dash-page-kw, .dash-page-share {
    padding-top: 8px; border-top: 1px solid var(--border-cream);
  }
}


/* Rating page — table toolbar with CSV download */
.rt-table-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding: 14px 18px;
  background: #fbf9f3;
  border: 1px solid var(--border-cream);
  border-radius: var(--r-lg);
}
.rt-table-actions-info { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rt-table-actions-lbl {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--olive);
  padding: 3px 8px;
  background: #efece1;
  border-radius: 999px;
}
.rt-table-actions-note { font-family: var(--mono); font-size: 12.5px; color: var(--stone); }
.rt-table-actions-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rt-download-csv, .rt-download-xlsx {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  padding: 10px 18px;
  white-space: nowrap;
}
.rt-download-csv svg, .rt-download-xlsx svg { stroke-width: 2.2; }
.rt-download-csv[disabled], .rt-download-xlsx[disabled] { opacity: .6; cursor: progress; }
.rt-spin {
  width: 12px; height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: rt-spin .7s linear infinite;
  margin-right: 4px;
}
@keyframes rt-spin { to { transform: rotate(360deg); } }
@media (max-width: 560px) {
  .rt-table-actions { padding: 12px 14px; }
  .rt-table-actions-btns { width: 100%; }
  .rt-download-csv, .rt-download-xlsx { flex: 1; justify-content: center; }
}

/* ============================================================
   Service landing pages (semantic core, e-com SEO, local SEO,
   SEO consultation, Tilda SEO, SERM) — shared template
   ============================================================ */
/* Override глобальных огромных padding'ов: десктопные секции на услугах слишком разрежены */
.service-page .section { padding-block: clamp(28px, 3.5vw, 48px); }
.service-page .sec-head { display: block; margin-bottom: 18px; }
.service-page .sec-head h2 { margin-bottom: 8px; max-width: 28em; font-size: clamp(22px, 2.5vw, 30px); }
.service-page .sec-head .lead { max-width: 54em; font-size: 16px; color: var(--charcoal); line-height: 1.55; }

.svc-hero { padding-block: clamp(20px,2.5vw,32px) clamp(16px,2vw,24px); }
.svc-hero h1 { font-size: clamp(34px,5vw,52px); line-height: 1.05; letter-spacing: -0.022em; margin: 14px 0 18px; max-width: 16em; }
.svc-hero .lead { font-size: clamp(17px,2vw,19px); max-width: none; color: var(--charcoal); line-height: 1.55; }
.svc-hero-trust { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.svc-hero-trust .chip { background: var(--ivory); border: 1px solid var(--border-deep); padding: 6px 12px; border-radius: 999px; font-family: var(--mono); font-size: 12px; color: var(--charcoal); }
.svc-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; align-items: center; }
.svc-hero-cta .small { color: var(--stone); font-family: var(--mono); font-size: 12.5px; }

.svc-triggers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.svc-trigger {
  background: #fff; border: 1px solid var(--border-deep); border-radius: var(--r-md);
  padding: 16px 18px; box-shadow: var(--shadow-whisper);
  display: flex; flex-direction: column; gap: 6px;
}
.svc-trigger .num {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--terracotta); text-transform: uppercase; letter-spacing: 0.07em;
}
.svc-trigger h3 { font-size: 16px; font-weight: 600; color: var(--near-black); margin: 0; }
.svc-trigger p { margin: 0; font-size: 13.5px; color: var(--charcoal); line-height: 1.55; }

.svc-process { display: flex; flex-direction: column; gap: 12px; counter-reset: stp; }
.svc-step {
  background: #fff; border: 1px solid var(--border-deep); border-radius: var(--r-md);
  padding: 22px 26px; box-shadow: var(--shadow-whisper);
  display: grid; grid-template-columns: 60px 1fr; gap: 18px; align-items: start;
}
.svc-step::before {
  counter-increment: stp; content: "0" counter(stp);
  font-family: var(--mono); font-size: 28px; font-weight: 600;
  color: var(--terracotta); line-height: 1; margin-top: 2px;
}
.svc-step h3 { margin: 0 0 8px; font-size: 19px; color: var(--near-black); }
.svc-step p { margin: 0 0 10px; font-size: 14.5px; color: var(--charcoal); line-height: 1.55; }
.svc-step .tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.svc-step .tools span {
  font-family: var(--mono); font-size: 11.5px; padding: 3px 9px;
  background: var(--cream-deep); color: var(--olive); border-radius: 4px;
}

.svc-tariffs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.svc-tariff {
  background: #fff; border: 1px solid var(--border-deep); border-radius: var(--r-md);
  padding: 22px 24px; box-shadow: var(--shadow-whisper);
  display: flex; flex-direction: column; gap: 10px;
}
.svc-tariff.is-mid { border-color: var(--terracotta); position: relative; }
.svc-tariff.is-mid::after {
  content: "Чаще всего"; position: absolute; top: -10px; right: 16px;
  background: var(--terracotta); color: #fff; font-family: var(--mono);
  font-size: 11px; padding: 3px 10px; border-radius: 999px; letter-spacing: 0.04em;
}
.svc-tariff h3 { margin: 0; font-size: 17px; color: var(--near-black); }
.svc-tariff .price { font-size: 26px; font-weight: 600; color: var(--terracotta); }
.svc-tariff .price small { font-size: 13px; color: var(--olive); font-weight: 400; display: block; margin-top: 2px; }
.svc-tariff ul { list-style: none; padding: 0; margin: 8px 0 0; }
.svc-tariff ul li { font-size: 14px; color: var(--charcoal); padding: 5px 0; line-height: 1.45; padding-left: 22px; position: relative; }
.svc-tariff ul li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 600; }

.svc-deliver { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.svc-deliver-item {
  background: #fff; border: 1px solid var(--border-deep); border-radius: var(--r-md);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 6px;
}
.svc-deliver-item .meta { font-family: var(--mono); font-size: 11px; color: var(--olive); text-transform: uppercase; letter-spacing: 0.06em; }
.svc-deliver-item h3 { margin: 0; font-size: 16px; color: var(--near-black); }
.svc-deliver-item p { margin: 0; font-size: 13.5px; color: var(--charcoal); line-height: 1.5; }

/* Блок «Пример: вход → результат» на страницах инструментов */
.tx-ex{display:flex;flex-direction:column;gap:14px}
.tx-ex-io{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch}
@media(max-width:680px){.tx-ex-io{grid-template-columns:1fr}.tx-ex-arrow{transform:rotate(90deg)}}
.tx-ex-col{min-width:0;display:flex;flex-direction:column;gap:6px}
.tx-ex-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--olive)}
.tx-ex-col pre{margin:0;background:var(--ivory);border:1px solid var(--border-deep);border-radius:10px;padding:12px 14px;font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--charcoal);overflow-x:auto;white-space:pre-wrap;word-break:break-word}
.tx-ex-col.out pre{background:#fff}
.tx-ex-arrow{align-self:center;justify-self:center;color:var(--terracotta);font-size:22px;font-weight:700}
.tx-ex-note{margin:0;font-size:14px;color:var(--olive);line-height:1.6}
.tx-cases{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.tx-cases li{position:relative;padding-left:24px;font-size:15px;color:var(--charcoal);line-height:1.6}
.tx-cases li::before{content:"";position:absolute;left:4px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--terracotta)}

/* Релевантные кейсы на страницах услуг */
.svc-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 760px) { .svc-cases { grid-template-columns: 1fr; } }
.svc-case-card {
  display: flex; flex-direction: column; gap: 9px; min-width: 0;
  background: var(--ivory); border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--border-deep);
  padding: 18px 20px; text-decoration: none; color: inherit;
  transition: box-shadow var(--t), transform var(--t);
}
.svc-case-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift), 0 0 0 1px var(--ring-deep); }
.svc-case-card .scc-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--terracotta); font-weight: 600; }
.svc-case-card .scc-title { font-family: var(--serif); font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--near-black); flex: 1; }
.svc-case-card .scc-go { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--olive); font-weight: 500; }
.svc-case-card .scc-go svg { width: 14px; height: 14px; transition: transform var(--t); }
.svc-case-card:hover .scc-go svg { transform: translateX(3px); }

.svc-faq details {
  background: #fff; border: 1px solid var(--border-deep); border-radius: var(--r-md);
  padding: 16px 20px; margin-bottom: 10px;
}
.svc-faq summary {
  cursor: pointer; font-weight: 600; font-size: 16px; color: var(--near-black);
  list-style: none; display: flex; justify-content: space-between; gap: 10px; align-items: center;
}
.svc-faq summary::after { content: "+"; font-family: var(--mono); color: var(--terracotta); font-size: 22px; line-height: 1; }
.svc-faq details[open] summary::after { content: "−"; }
.svc-faq details p { margin: 12px 0 0; font-size: 14.5px; color: var(--charcoal); line-height: 1.55; }

.svc-final {
  background: var(--near-black); color: var(--warm-silver);
  padding: clamp(28px,4vw,40px); border-radius: var(--r-xl);
}
.svc-final h2 { color: var(--ivory); margin: 0 0 12px; font-size: clamp(24px,3.5vw,36px); max-width: 18em; }
.svc-final p { color: var(--warm-silver); margin: 0 0 22px; max-width: 36em; font-size: 16px; line-height: 1.55; }
.svc-final .cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 640px) {
  .svc-step { grid-template-columns: 1fr; gap: 6px; padding: 18px 20px; }
  .svc-step::before { font-size: 22px; }
}

/* Related services block on service landings */
.svc-related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.svc-related-card {
  display: block;
  background: #fff;
  border: 1px solid var(--border-deep);
  border-radius: var(--r-md);
  padding: 20px 22px;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  box-shadow: var(--shadow-whisper);
}
.svc-related-card:hover {
  transform: translateY(-2px);
  border-color: var(--terracotta);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.svc-related-card h3 {
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--near-black);
  font-weight: 600;
}
.svc-related-card p {
  margin: 0;
  font-size: 13.5px;
  color: var(--charcoal);
  line-height: 1.5;
}
.svc-related-card .arr {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--terracotta);
  letter-spacing: 0.02em;
}

/* ── Skip-to-content link (a11y) ───────────────────────── */
.skip-link{position:absolute;left:8px;top:-48px;z-index:200;background:var(--terracotta);color:#fff;padding:10px 16px;border-radius:0 0 10px 10px;font-family:var(--sans,system-ui,sans-serif);font-size:14px;font-weight:500;transition:top .18s ease;text-decoration:none}
.skip-link:focus{top:0;outline:2px solid #fff;outline-offset:-4px}

/* кейсы: FAQ на дефолтных 92px .section «проваливался» между контентом и «Ещё кейсы».
   ВАЖНО: держать НА ВЕРХНЕМ УРОВНЕ, не внутри @media — иначе фикс только на моб. (16.07.2026) */
.case-page section[data-screen-label="Частые вопросы"]{padding-top:40px;padding-bottom:40px;}

/* ── Глоссарий: FAQ по термину (переиспользует .toggle) ── */
.gl-faq{margin-top:36px;padding-top:28px;border-top:1px solid var(--border-cream)}
.gl-faq>h2{font-size:22px;line-height:1.2;margin:0 0 6px;color:var(--near-black)}
.gl-faq .toggle:first-of-type{border-top:1px solid var(--border-deep)}

/* Отступ перед FAQ: блок «По теме» имеет инлайновый margin-bottom:8px,
   из-за чего аккордеон прилипал к нему вплотную (правка 04.08.2026). */
.art-body #faq{margin-top:38px}
.art-body .art-related{margin-bottom:14px}