/* ==========================================================================
   Глобальний дизайн сайту — світла дизайн-система "Sentinel".
   Серіф-заголовки (Newsreader) + Inter, майже-чорні кнопки, помаранчевий акцент.
   ========================================================================== */

:root {
    --st-bg: #ffffff;             /* фон сторінки */
    --st-surface: #ffffff;        /* картки / поверхні */
    --st-soft: #fafafa;           /* ледь сіра секція */
    --st-fg: #1a1a1a;             /* заголовки / сильний текст */
    --st-text: #4b5563;           /* основний текст */
    --st-muted: #6b7280;          /* другорядний текст */
    --st-accent: #ff5722;         /* помаранчевий акцент */
    --st-accent-fg: #ffffff;
    --st-ink: #121212;            /* колір кнопок (майже чорний) */
    --st-border: #f3f4f6;         /* світла рамка */
    --st-border-strong: #d1d5db;  /* сильніша рамка */
    --st-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.1);
    --st-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --st-shadow-lg: 0 20px 60px -15px rgba(0, 0, 0, 0.08);
    --st-radius: 16px;            /* картки */
    --st-radius-sm: 4px;          /* кнопки / контролі */
    --st-max: 1180px;
    --st-font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --st-serif: 'Newsreader', Georgia, "Times New Roman", serif;
    /* сумісність зі старим ім'ям */
    --st-accent-fg: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Базовий розмір шрифту: +50% до бази Casper (62.5% → 93.75%).
   Масштабує одразу і контент статей, і наш каркас (рем-розміри). */
html { font-size: 93.75%; }

/* Обрізаємо будь-яке горизонтальне «протікання» (щоб не було свайпу вбік
   і порожнечі справа на мобільному). clip — НЕ ламає sticky-хедер.
   overscroll-behavior-x:none — гасить горизонтальний rubber-band (порожня
   область зліва/справа під час перетягування в iOS Safari). */
html, body {
    overflow-x: clip;
    max-width: 100%;
    overscroll-behavior-x: none;
}

body.site-shell {
    background: var(--st-bg);
    color: var(--st-text);
    font-family: var(--st-font);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Серіф-заголовки дизайн-системи */
.st-serif { font-family: var(--st-serif); }

.st-container {
    width: 100%;
    max-width: var(--st-max);
    margin: 0 auto;
    padding: 0 24px;
}

/* ========================== Бігучий бар ============================ */
.site-topbar {
    background: var(--st-ink);
    color: #ffffff;
    overflow: hidden;
    white-space: nowrap;
}

.site-topbar__track {
    display: flex;
    width: max-content;
    animation: st-marquee 37s linear infinite;
}

.site-topbar__group {
    display: flex;
    flex-shrink: 0;
}

.site-topbar__group span {
    padding: 9px 28px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
/* помаранчевий акцент на кожному другому написі */
.site-topbar__group span:nth-child(even) { color: var(--st-accent); }

@keyframes st-marquee {
    to { transform: translateX(-50%); }
}

/* Пауза анімації при наведенні */
.site-topbar:hover .site-topbar__track { animation-play-state: paused; }

/* ========================== Хедер ============================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--st-border);
}

.site-header__inner {
    max-width: var(--st-max);
    margin: 0 auto;
    padding: 9px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.site-header__brand {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-header__brand {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--st-fg);
    text-decoration: none;
}

.site-header__brand img {
    max-height: 28px;
    width: auto;
    display: block;
}

.site-header__nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.site-header__link {
    color: var(--st-text);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.92rem;
    padding: 7px 14px;
    border-radius: var(--st-radius-sm);
    transition: color 0.15s ease, background 0.15s ease;
}

.site-header__link:hover { color: var(--st-fg); background: var(--st-border); }

.site-header__btn {
    background: var(--st-ink);
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    padding: 8px 20px;
    border-radius: var(--st-radius-sm);
    transition: opacity 0.15s ease;
}

.site-header__btn:hover { opacity: 0.88; }

/* Селектор мов */
.site-lang {
    appearance: none;
    -webkit-appearance: none;
    background: #ffffff;
    color: var(--st-text);
    border: 1px solid var(--st-border-strong);
    border-radius: var(--st-radius-sm);
    font: inherit;
    font-weight: 500;
    font-size: 0.92rem;
    padding: 6px 12px;
    cursor: pointer;
}

.site-lang option {
    color: #000;
}

/* Адаптив: на малих екранах зменшуємо розміри, щоб нічого не налазило */
@media (max-width: 560px) {
    .site-header__inner { padding: 8px 16px; gap: 8px 10px; }
    .site-header__brand { font-size: 1rem; }
    .site-header__nav { gap: 6px; }
    .site-header__link,
    .site-header__btn { padding: 7px 14px; font-size: 0.9rem; }
    .site-topbar__group span { padding: 10px 18px; font-size: 0.78rem; }
}

/* <380px: назва «Andrew Academy» у 2 рядки, вписана у висоту хедера (width:min-content → «ANDREW»/«ACADEMY») */
@media (max-width: 379px) {
    .site-header__brand {
        white-space: normal;
        width: min-content;
        overflow: visible;
        text-overflow: clip;
        font-size: 0.95rem;
        line-height: 1.12;
        letter-spacing: 0.06em;
    }
}

/* ========================== Основний блок ============================ */
.site-main {
    flex: 1 0 auto;
    width: 100%;
    padding-top: 12px;
}
.site-main:has(> .hero:first-child) { padding-top: 0; }

/* ========================== Кнопки дизайн-системи ============================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1;
    padding: 13px 22px;
    border-radius: var(--st-radius-sm);
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn--primary { background: var(--st-ink); color: #fff; }
.btn--primary:hover { opacity: 0.88; }
.btn--ghost { background: #fff; color: var(--st-fg); border-color: var(--st-border-strong); }
.btn--ghost:hover { background: var(--st-soft); }
.btn__arrow { transition: transform 0.15s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ========================== HERO (головна) ============================ */
.hero { background: var(--st-bg); border-bottom: 1px solid var(--st-border); }
.hero__inner {
    max-width: var(--st-max);
    margin: 0 auto;
    padding: 56px 24px 64px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.hero__label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--st-muted);
    margin-bottom: 20px;
}
.hero__dot { width: 8px; height: 8px; background: var(--st-accent); border-radius: 2px; }
.hero__title {
    font-family: var(--st-serif);
    font-weight: 400;
    font-size: clamp(2.6rem, 5.2vw, 4rem);
    line-height: 1.04;
    letter-spacing: -0.025em;
    color: var(--st-fg);
    margin: 0 0 22px;
}
.hero__title em { color: var(--st-accent); font-style: italic; }
.hero__text {
    font-size: 1.02rem;
    color: var(--st-muted);
    max-width: 30em;
    margin: 0 0 28px;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.hero__trust {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--st-muted);
}
.hero__trust svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Права візуальна панель */
.hero__right { position: relative; }
.hero__panel {
    position: relative;
    height: 380px;
    border-radius: 24px;
    background: linear-gradient(160deg, #fafafa, #eef0f1);
    border: 1px solid var(--st-border);
    box-shadow: var(--st-shadow-lg);
    overflow: hidden;
}
/* крапкова сітка (верх-ліво) */
.hero__panel::before {
    content: "";
    position: absolute;
    top: 26px;
    left: 26px;
    width: 120px;
    height: 84px;
    background-image: radial-gradient(circle at 1px 1px, #cfd3d8 1.5px, transparent 0);
    background-size: 16px 16px;
    opacity: 0.8;
}
/* центральне «коло-радар» */
.hero__rings {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, #2b2b2e 0%, #161618 56%, transparent 57%);
    box-shadow: 0 0 0 16px rgba(255, 255, 255, 0.65), 0 0 0 34px rgba(255, 255, 255, 0.35);
}
.hero__rings::after {
    content: "";
    position: absolute;
    inset: 28%;
    border-radius: 50%;
    background: conic-gradient(from 200deg, transparent 0deg, rgba(255, 87, 34, 0.55) 45deg, transparent 90deg);
}
/* помаранчевий чвертькруг (низ-право) */
.hero__quarter {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 150px;
    height: 150px;
    background: var(--st-accent);
    border-top-left-radius: 100%;
    opacity: 0.92;
}
/* картки-метрики */
.hero__card {
    position: absolute;
    background: #fff;
    border: 1px solid var(--st-border);
    border-radius: 14px;
    box-shadow: var(--st-shadow);
    padding: 13px 16px;
    min-width: 148px;
}
.hero__card-label {
    font-size: 0.68rem;
    color: var(--st-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}
.hero__card-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--st-fg);
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.hero__trend { font-size: 0.78rem; font-weight: 600; color: var(--st-accent); }
.hero__card--1 { top: 26px; right: 22px; }
.hero__card--2 { bottom: 96px; left: 16px; }
.hero__card--3 { bottom: 24px; right: 58px; }

@media (max-width: 860px) {
    .hero__inner { grid-template-columns: 1fr; gap: 30px; padding: 32px 20px 40px; }
    .hero__right { order: -1; }
    .hero__panel { height: 300px; }
    .hero__rings { width: 180px; height: 180px; }
    .hero__card { min-width: 128px; padding: 10px 13px; }
    .hero__card-value { font-size: 1.25rem; }
}
@media (max-width: 480px) {
    .hero__panel { height: 270px; }
    .hero__card--2 { left: 8px; bottom: 74px; }
    .hero__card--3 { right: 40px; }
}

/* Прибираємо великі верхні відступи Casper для статей/сторінок,
   щоб заголовок був ближче до хедера */
.article { padding-top: 0; }
.article-header { padding-top: 0; }

/* Тимчасова заглушка порожнього блоку */
.site-main__placeholder {
    max-width: var(--st-max);
    margin: 0 auto;
    padding: 120px 24px;
    text-align: center;
    color: var(--st-muted);
}

/* ========================== Футер ============================ */
.site-footer {
    flex-shrink: 0;
    background: var(--st-soft);
    border-top: 1px solid var(--st-border);
    margin-top: 32px;
    /* Перекриваємо великі падінги Casper (padding-bottom:140px) */
    padding: 0;
}

.site-footer__inner {
    max-width: var(--st-max);
    margin: 0 auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

/* десктоп: nav зверху, під ним «© …  [🌐 мова]» одним рядком (мова праворуч від копірайту) */
.site-footer__top {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    gap: 12px 16px;
    grid-template-areas: "nav nav" "copy lang";
}

.site-footer__nav {
    grid-area: nav;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 28px;
}

.site-footer__nav a {
    color: var(--st-muted);
    text-decoration: none;
    font-size: 0.92rem;
    transition: color 0.15s ease;
}

.site-footer__nav a:hover { color: var(--st-fg); }

.site-footer__copy {
    grid-area: copy;
    justify-self: end;
    margin: 0;
    color: var(--st-muted);
    font-size: 0.82rem;
    letter-spacing: 0.03em;
}

/* Селектор мов у футері (перенесено з хедера) */
.site-footer__lang { grid-area: lang; justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 2px 4px; }
.site-footer__globe { width: 16px; height: 16px; color: var(--st-muted); flex-shrink: 0; }
.site-footer__inner .site-lang { font-size: 0.86rem; padding: 6px 12px; }

/* мобільний: посилання у 2 колонки, селектор мови — справа від них; © окремим рядком під ними */
@media (max-width: 560px) {
    .site-footer__top { grid-template-areas: "nav lang" "copy copy"; gap: 10px 14px; }
    .site-footer__nav { display: grid; grid-template-columns: auto auto; gap: 7px 16px; justify-content: start; text-align: left; }
    .site-footer__nav a { font-size: 0.86rem; } /* «Terms of Service» лишається в 1 рядок поруч із селектором мови */
    .site-footer__copy { justify-self: center; }
    .site-footer__lang { justify-self: end; }
}


/* ===================== Результати учнів ===================== */
.rs { padding: 72px 0; background: var(--st-soft); }
.rs__inner { max-width: var(--st-max); margin: 0 auto; padding: 0 24px; }
.rs__title {
    text-align: center; font-family: var(--st-serif);
    font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 400;
    letter-spacing: -0.02em; color: var(--st-fg); margin: 0 0 32px;
}

/* Картка (спільна для стрічки й каруселі) */
.rs-card {
    display: flex; flex-direction: column;
    background: var(--st-surface);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius);
    overflow: hidden;
    box-shadow: var(--st-shadow-sm);
}
/* Квадрат 1:1 — фото обрізається по центру */
.rs-photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: #f3f4f6; }
.rs-body { padding: 16px 18px; }
.rs-text { color: var(--st-text); line-height: 1.55; font-size: 0.95rem; }   /* повний текст, без обрізки */
.rs-name { margin-top: 10px; font-weight: 700; color: var(--st-fg); font-size: 0.9rem; }

/* ДЕСКТОП: одна лінія на ВСЮ ширину сторінки, нескінченний зациклений рух (rAF) */
.rs-marquee {
    overflow: hidden;
    width: 100vw; margin-left: calc(50% - 50vw);   /* full-bleed: від краю до краю */
    padding: 4px 0;
}
.rs-mq-track { display: flex; width: max-content; will-change: transform; }
.rs-mq-group { display: flex; gap: 24px; padding-right: 24px; flex-shrink: 0; align-items: stretch; }
.rs-marquee .rs-card { width: 320px; flex-shrink: 0; }

.rs-mq-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 22px; }

/* МОБІЛЬНИЙ: карусель (1 картка) + свайп. Ховається на десктопі. */
.rs-carousel { display: none; max-width: 440px; margin: 0 auto; touch-action: pan-y; }
.rs-cv-viewport { overflow: hidden; border-radius: var(--st-radius); }
.rs-cv-track { display: flex; transition: transform 0.5s ease; }
.rs-cv-slide { min-width: 100%; box-sizing: border-box; }
.rs-card .rs-photo { -webkit-user-drag: none; user-select: none; }

.rs-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.rs-nav {
    width: 40px; height: 40px; border-radius: 50%;
    background: #fff; border: 1px solid var(--st-border-strong);
    color: var(--st-fg); font-size: 1.2rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; box-shadow: var(--st-shadow-sm);
    transition: background 0.15s ease, color 0.15s ease;
}
.rs-nav:hover { background: var(--st-accent); color: #fff; border-color: transparent; }
.rs-mq-toggle { font-size: 0.78rem; letter-spacing: 1px; }
.rs-dots { display: flex; justify-content: center; gap: 8px; }
.rs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--st-border); border: 0; cursor: pointer; padding: 0; transition: width 0.2s ease, background 0.2s ease; }
.rs-dot.is-active { background: var(--st-accent); width: 22px; border-radius: 4px; }

@media (max-width: 720px) {
    .rs-marquee, .rs-mq-controls { display: none; }
    .rs-carousel { display: block; }
}

/* ========================== Стрічка фото-доказів ============================ */
/* Якщо стрічка перша в main — притискаємо її врівень під хедер */
.site-main:has(> .proof:first-child) { padding-top: 0; }

.proof {
    overflow: hidden;
    padding: 28px 0;
    cursor: grab;
    touch-action: pan-y;              /* горизонт — наш свайп, вертикаль — скрол сторінки */
    overscroll-behavior: contain;     /* свайп стрічки не «протікає» в bounce сторінки */
}
.proof.is-drag { cursor: grabbing; }
.proof img,
.proof video {
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
}

.proof-track {
    display: flex;
    width: max-content;
    animation: proof-scroll 45s linear infinite;
    /* Промотуємо на GPU-шар одразу — інакше на мобільному анімація гальмує,
       поки браузер не перемалює (напр. після згортання/повернення) */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.proof:hover .proof-track { animation-play-state: paused; }

.proof-set {
    display: flex;
    gap: 16px;
    padding-right: 16px;
    flex-shrink: 0;
}

.proof-img,
.proof-vid {
    height: 260px;
    width: auto;
    border-radius: 14px;
    object-fit: cover;
    display: block;
    background: #f3f4f6;
}
.proof-vid { pointer-events: none; }

/* Довгий скриншот, що сам прокручується вгору (ефект гортання) */
.proof-scroll {
    width: 150px;
    height: 260px;
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
}
.proof-scroll-inner {
    display: block;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.proof-scroll-inner img {
    width: 100%;
    display: block;
}

/* Картка акаунтів у стрічці (аватар + нік + підписники), редагується в proof-data.js */
.proof-acc {
    height: 260px;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 10px 22px;
}
.proof-acc-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.proof-acc-ava {
    width: 55px; height: 55px; border-radius: 50%;
    overflow: hidden; background: #f3f4f6;
    display: block;
}
.proof-acc-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proof-acc-name { margin-top: 5px; font-weight: 800; font-size: 0.82rem; color: var(--st-fg); line-height: 1.15; }
.proof-acc-handle { color: var(--st-muted); font-size: 0.7rem; }
.proof-acc-count { margin-top: 3px; font-weight: 800; font-size: 0.9rem; color: var(--st-fg); line-height: 1.1; }
.proof-acc-label { color: var(--st-muted); font-size: 0.64rem; }

@keyframes proof-scroll {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 600px) {
    .proof { padding: 9px 0; }        /* відступ зверху/знизу зменшено втричі (28→9) */
    .proof-img,
    .proof-vid { height: 250px; border-radius: 12px; }
    .proof-scroll { width: 140px; height: 250px; border-radius: 12px; }
    .proof-set { gap: 12px; padding-right: 12px; }
    .proof-acc { height: 250px; padding: 8px 18px; gap: 8px; }
    .proof-acc-ava { width: 55px; height: 55px; }
    .proof-acc-name { font-size: 0.8rem; }
    .proof-acc-count { font-size: 0.88rem; }
}

/* ====== Захист контенту (анти-копі + водяний знак + PrintScreen) ====== */
.no-copy, .no-copy * {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
/* поля форм лишаємо робочими (вхід, редагування імені, пошук) */
.no-copy input,
.no-copy textarea,
.no-copy select,
.no-copy [contenteditable=""],
.no-copy [contenteditable="true"] {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
}
.wm-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-repeat: repeat;
    z-index: 4;
}
.ss-guard {
    position: fixed;
    inset: 0;
    background: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .08s;
    z-index: 999999;
}
.ss-guard.is-on { opacity: 1; }

/* ====== Пошук по статтях (сторінка мовного розділу) ====== */
.blog-search {
    position: relative;
    max-width: 560px;
    margin: 24px auto 28px;
}
.blog-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--st-muted);
    pointer-events: none;
}
.blog-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 16px 13px 46px;
    font-size: 1rem;
    color: var(--st-fg);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--st-border);
    border-radius: 12px;
    outline: none;
    transition: border-color .15s, background .15s;
    -webkit-appearance: none;
    appearance: none;
}
.blog-search-input::placeholder { color: var(--st-muted); }
.blog-search-input:focus {
    border-color: var(--st-accent);
    background: rgba(255, 255, 255, 0.08);
}
/* прибрати нативний хрестик у деяких браузерах (свій Esc лишається) */
.blog-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Секція безкоштовних статей під цінами — ховаємо, якщо публічних постів немає */
.free-section:not(:has(.post-card)) { display: none; }

/* ========================== Стаття + картки постів (світла тема) ========================== */
.article-title { font-family: var(--st-serif); font-weight: 500; letter-spacing: -0.02em; color: var(--st-fg); }
.article-excerpt { color: var(--st-muted); }
.gh-content { color: var(--st-text); }
.gh-content a { color: var(--st-accent); }
.gh-content h1, .gh-content h2, .gh-content h3, .gh-content h4 { color: var(--st-fg); }
.gh-content h2, .gh-content h3 { font-family: var(--st-serif); font-weight: 500; letter-spacing: -0.01em; }

/* картки постів у списках блогу/тегів */
.post-card-primary-tag { color: var(--st-accent); }
.post-card-title { color: var(--st-fg); }
.post-card-excerpt { color: var(--st-muted); }
.post-card-featured { color: var(--st-accent); }

/* ============ Плашка гейту статті (власна, замість Ghost Portal) ============ */
/* Ховаємо дефолтну Ghost-плашку «Upgrade your account» (веде в Portal) — її замінює .post-gate */
.gh-post-upgrade-cta { display: none !important; }

.post-gate { margin: 32px auto 0; text-align: center; }
.post-gate__intro { max-width: 560px; margin: 0 auto 30px; }
.post-gate__ic { font-size: 2rem; line-height: 1; margin-bottom: 10px; }
.post-gate__title {
    color: var(--st-fg);
    font-family: var(--st-serif);
    font-weight: 500;
    font-size: 1.7rem;
    margin: 0 0 10px;
}
.post-gate__text {
    color: var(--st-muted);
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.55;
}
@media (max-width: 600px) {
    .post-gate__title { font-size: 1.4rem; }
}

/* ========================== Tag-сторінка (tag.hbs) ============================ */
.tag-hero { text-align: center; padding: 8px 0 32px; }
.tag-hero__kicker {
    margin: 0 0 8px;
    color: var(--st-accent);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.tag-hero__title {
    margin: 0;
    font-family: var(--st-serif);
    font-weight: 400;
    font-size: clamp(2rem, 5vw, 3.2rem);
    letter-spacing: -0.02em;
    color: var(--st-fg);
    text-transform: capitalize;
}
.tag-hero__desc { margin: 12px auto 0; max-width: 560px; color: var(--st-muted); line-height: 1.6; }
.tag-hero__count { margin: 10px 0 0; color: var(--st-muted); font-size: 0.9rem; }

/* ============== Пагінація списків (partials/pagination.hbs, .pg-*) ==============
   Навмисно НЕ .pagination — той клас Casper ховає (built/screen.css:
   .pagination{display:none} під infinite-scroll, якого на списках немає). */
.pg-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 40px 0 8px; }
.pg-link {
    padding: 10px 18px;
    border: 1px solid var(--st-border-strong);
    border-radius: var(--st-radius-sm);
    color: var(--st-fg);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pg-link:hover { background: var(--st-ink); color: #fff; border-color: var(--st-ink); }
.pg-info { color: var(--st-muted); font-size: 0.9rem; }

/* Футер: бізнес-ідентифікація + дисклеймер про доходи (додано для Stripe-комплаєнсу) */
.site-footer__biz{margin:10px 0 0; font-size:.8rem; color:var(--st-muted); line-height:1.5}
.site-footer__biz a{color:var(--st-muted); text-decoration:underline}
.site-footer__disclaimer{margin:8px auto 0; max-width:640px; font-size:.75rem; color:var(--st-muted); line-height:1.5; opacity:.85}