/*
 * HolaPet! public-site.css
 * Canonical shared stylesheet for every public marketing/booking page.
 * Generated from the previous public style layers without changing cascade order.
 */

/* ===== Legacy public base/fixes (preserved for compatibility) | formerly public-fixes.css ===== */
/*
 * ServiceHub — точечные исправления публичных страниц.
 * Файл подключается после main.css и не затрагивает административную часть.
 */

/* Дочерние элементы grid не должны растягивать колонки своим содержимым. */
.public-hero-grid > * {
    min-width: 0;
    max-width: 100%;
}

/* Правую информационную карточку защищаем от горизонтального переполнения. */
.public-hero-card {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/*
 * Длинные слова («автоматизация», «индивидуально» и подобные)
 * теперь переносятся внутри карточки, а размер текста лучше соответствует
 * ширине правой колонки.
 */
.public-hero-card strong {
    width: 100%;
    max-width: 100%;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.08;
    letter-spacing: -0.5px;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
}

/* На планшетах карточка уже идёт отдельной строкой и может быть чуть крупнее. */
@media (max-width: 900px) {
    .public-hero-card strong {
        font-size: clamp(28px, 5vw, 40px);
    }
}

/* На узких телефонах сохраняем безопасные внутренние отступы. */
@media (max-width: 480px) {
    .public-hero-card {
        padding: 22px 18px;
    }

    .public-hero-card strong {
        font-size: clamp(25px, 8vw, 34px);
    }
}


/* =========================================================
   Отдельные страницы статей ServiceHub
   ========================================================= */

.article-page {
    background: #f4f7fb;
}

.article-hero {
    padding-bottom: 42px;
}

.article-hero .public-hero-card strong {
    font-size: clamp(30px, 3.4vw, 46px);
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-top: 24px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 15px;
}

.article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 36px;
    align-items: start;
}

.article-content {
    min-width: 0;
    padding: 42px;
    border: 1px solid rgba(15, 34, 61, 0.09);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 34, 61, 0.07);
}

.article-content h2 {
    margin: 46px 0 18px;
    font-size: clamp(27px, 3vw, 38px);
    line-height: 1.16;
    color: #15253d;
}

.article-content h2:first-child {
    margin-top: 0;
}

.article-content h3 {
    margin: 30px 0 12px;
    font-size: clamp(21px, 2.2vw, 27px);
    line-height: 1.25;
    color: #1d3456;
}

.article-content p,
.article-content li {
    font-size: 18px;
    line-height: 1.78;
    color: #45556c;
}

.article-content p {
    margin: 0 0 20px;
}

.article-content ul,
.article-content ol {
    margin: 16px 0 26px;
    padding-left: 25px;
}

.article-content li + li {
    margin-top: 10px;
}

.article-content strong {
    color: #243b5c;
}

.article-lead {
    margin-bottom: 30px !important;
    font-size: clamp(20px, 2.2vw, 24px) !important;
    line-height: 1.58 !important;
    color: #294464 !important;
}

.article-note {
    margin: 30px 0;
    padding: 24px 26px;
    border-left: 5px solid #4f8cff;
    border-radius: 0 18px 18px 0;
    background: #eef5ff;
}

.article-note p:last-child {
    margin-bottom: 0;
}

.article-checklist {
    list-style: none;
    padding-left: 0 !important;
}

.article-checklist li {
    position: relative;
    padding-left: 32px;
}

.article-checklist li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 800;
    color: #3479e8;
}

.article-sidebar {
    position: sticky;
    top: 104px;
    display: grid;
    gap: 20px;
}

.article-toc,
.article-sidebar-card {
    padding: 26px;
    border: 1px solid rgba(15, 34, 61, 0.09);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 14px 36px rgba(15, 34, 61, 0.06);
}

.article-toc strong,
.article-sidebar-card strong {
    display: block;
    margin-bottom: 15px;
    color: #172a46;
    font-size: 19px;
}

.article-toc a {
    display: block;
    padding: 8px 0;
    color: #52627a;
    line-height: 1.4;
    text-decoration: none;
}

.article-toc a:hover {
    color: #246bda;
}

.article-sidebar-card p {
    margin: 0 0 18px;
    color: #68768a;
    line-height: 1.6;
}

.article-sidebar-card .btn {
    width: 100%;
    text-align: center;
}

.article-related {
    margin-top: 42px;
}

.article-related .public-blog-card {
    height: 100%;
}

.article-card-meta {
    display: inline-flex;
    margin-top: 18px;
    color: #718097;
    font-size: 14px;
    font-weight: 600;
}

.blog-intro {
    max-width: 860px;
    margin: 0 auto 34px;
    text-align: center;
}

.blog-intro p {
    color: #617087;
    font-size: 18px;
    line-height: 1.7;
}

.blog-bottom-cta {
    margin-top: 38px;
}

@media (max-width: 980px) {
    .article-layout {
        grid-template-columns: 1fr;
    }

    .article-sidebar {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .article-content {
        padding: 28px 22px;
        border-radius: 22px;
    }

    .article-content p,
    .article-content li {
        font-size: 17px;
        line-height: 1.7;
    }

    .article-sidebar {
        grid-template-columns: 1fr;
    }

    .article-meta {
        font-size: 14px;
    }
}


/* =========================================================
   Коммерческая страница: CRM для ремонта телефонов
   ========================================================= */

.public-audience-link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.public-audience-link:hover {
    transform: translateY(-4px);
    border-color: rgba(55, 116, 214, 0.28);
    box-shadow: 0 18px 42px rgba(20, 43, 75, 0.11);
}

.industry-hero-list {
    display: grid;
    gap: 11px;
    margin: 25px 0 0;
    padding: 0;
    list-style: none;
}

.industry-hero-list li {
    position: relative;
    padding-left: 29px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 17px;
    line-height: 1.5;
}

.industry-hero-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #9ec7ff;
    font-weight: 800;
}

.industry-flow {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.industry-flow-card {
    position: relative;
    min-width: 0;
    padding: 24px 20px;
    border: 1px solid rgba(22, 47, 80, 0.1);
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(20, 43, 75, 0.06);
}

.industry-flow-card b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-bottom: 17px;
    border-radius: 50%;
    background: #eaf3ff;
    color: #2f72d2;
    font-size: 16px;
}

.industry-flow-card h3 {
    margin: 0 0 10px;
    color: #1b3150;
    font-size: 20px;
}

.industry-flow-card p {
    margin: 0;
    color: #66758a;
    line-height: 1.6;
}

.industry-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.industry-feature-card {
    min-width: 0;
    padding: 28px;
    border: 1px solid rgba(22, 47, 80, 0.1);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 15px 36px rgba(20, 43, 75, 0.06);
}

.industry-feature-card .public-card-icon {
    margin-bottom: 18px;
}

.industry-feature-card h3 {
    margin: 0 0 11px;
    color: #1a3151;
    font-size: 22px;
}

.industry-feature-card p {
    margin: 0;
    color: #657489;
    line-height: 1.68;
}

.industry-highlight {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
    gap: 32px;
    align-items: center;
    padding: 42px;
    border-radius: 30px;
    background:
        radial-gradient(circle at top right, rgba(69, 132, 226, 0.25), transparent 37%),
        linear-gradient(135deg, #13233a, #243f66);
    color: #ffffff;
    box-shadow: 0 22px 52px rgba(17, 37, 64, 0.18);
}

.industry-highlight h2 {
    margin: 8px 0 17px;
    color: #ffffff;
    font-size: clamp(29px, 3.5vw, 44px);
    line-height: 1.12;
}

.industry-highlight p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 18px;
    line-height: 1.7;
}

.industry-highlight-list {
    display: grid;
    gap: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.industry-highlight-list li {
    position: relative;
    padding: 15px 18px 15px 45px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
}

.industry-highlight-list li::before {
    content: "✓";
    position: absolute;
    left: 18px;
    color: #a9ceff;
    font-weight: 800;
}

.industry-role-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.industry-role-card {
    padding: 28px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(22, 47, 80, 0.1);
}

.industry-role-card h3 {
    margin: 0 0 15px;
    color: #19304f;
    font-size: 23px;
}

.industry-role-card ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.industry-role-card li {
    position: relative;
    padding-left: 25px;
    color: #637287;
    line-height: 1.55;
}

.industry-role-card li::before {
    content: "•";
    position: absolute;
    left: 5px;
    color: #3d7bd4;
    font-weight: 900;
}

.industry-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.industry-related-grid .public-blog-card {
    height: 100%;
}

@media (max-width: 1080px) {
    .industry-flow {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .industry-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .industry-highlight {
        grid-template-columns: 1fr;
        padding: 32px;
    }

    .industry-role-grid,
    .industry-related-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .industry-flow,
    .industry-feature-grid {
        grid-template-columns: 1fr;
    }

    .industry-highlight {
        padding: 27px 22px;
        border-radius: 24px;
    }

    .industry-feature-card,
    .industry-role-card {
        padding: 24px 21px;
    }
}


/* =========================================================
   Форма заявки ServiceHub
   ========================================================= */

.lead-section {
    position: relative;
}

.lead-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
    gap: 34px;
    align-items: start;
}

.lead-intro {
    min-width: 0;
    padding: 10px 0;
}

.lead-intro h2 {
    margin: 9px 0 18px;
    color: #172b48;
    font-size: clamp(31px, 4vw, 48px);
    line-height: 1.12;
}

.lead-intro > p {
    margin: 0 0 25px;
    color: #64748a;
    font-size: 18px;
    line-height: 1.72;
}

.lead-benefits {
    display: grid;
    gap: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lead-benefits li {
    position: relative;
    padding: 15px 18px 15px 48px;
    border: 1px solid rgba(30, 62, 101, 0.09);
    border-radius: 17px;
    background: #ffffff;
    color: #4f6076;
    line-height: 1.5;
    box-shadow: 0 11px 28px rgba(20, 43, 75, 0.045);
}

.lead-benefits li::before {
    content: "✓";
    position: absolute;
    left: 19px;
    top: 14px;
    color: #3477d7;
    font-weight: 900;
}

.lead-form-card {
    min-width: 0;
    padding: clamp(25px, 4vw, 42px);
    border: 1px solid rgba(22, 47, 80, 0.1);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(18, 41, 72, 0.09);
}

.lead-form-head {
    margin-bottom: 27px;
}

.lead-form-head h2 {
    margin: 0 0 9px;
    color: #172b48;
    font-size: clamp(27px, 3vw, 37px);
    line-height: 1.18;
}

.lead-form-head p {
    margin: 0;
    color: #6a788c;
    line-height: 1.65;
}

.lead-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 19px;
}

.lead-field {
    min-width: 0;
}

.lead-field-full {
    grid-column: 1 / -1;
}

.lead-field label,
.lead-field > span {
    display: block;
    margin-bottom: 8px;
    color: #263b59;
    font-size: 15px;
    font-weight: 700;
}

.lead-field .required {
    color: #d14343;
}

.lead-field input,
.lead-field select,
.lead-field textarea {
    display: block;
    width: 100%;
    min-width: 0;
    border: 1px solid #d8e0eb;
    border-radius: 13px;
    background: #fbfcfe;
    color: #1d304c;
    font: inherit;
    outline: none;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.lead-field input,
.lead-field select {
    min-height: 52px;
    padding: 0 15px;
}

.lead-field textarea {
    min-height: 132px;
    padding: 14px 15px;
    resize: vertical;
}

.lead-field input:focus,
.lead-field select:focus,
.lead-field textarea:focus {
    border-color: #4a83d6;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(54, 119, 215, 0.11);
}

.lead-field input.is-invalid,
.lead-field select.is-invalid,
.lead-field textarea.is-invalid {
    border-color: #d95a5a;
    background: #fffafa;
}

.lead-field-help {
    display: block;
    margin-top: 7px;
    color: #8390a2;
    font-size: 13px;
    line-height: 1.45;
}

.lead-field-error {
    display: block;
    margin-top: 7px;
    color: #c23939;
    font-size: 13px;
    line-height: 1.4;
}

.lead-form-errors {
    margin: 0 0 22px;
    padding: 16px 18px;
    border: 1px solid rgba(200, 57, 57, 0.22);
    border-radius: 15px;
    background: #fff4f4;
    color: #9f2f2f;
    line-height: 1.55;
}

.lead-consent {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 11px;
    align-items: start;
    grid-column: 1 / -1;
    margin-top: 2px;
}

.lead-consent input {
    width: 19px;
    height: 19px;
    margin-top: 3px;
    accent-color: #3375d5;
}

.lead-consent label {
    color: #617086;
    font-size: 14px;
    line-height: 1.55;
}

.lead-consent a {
    color: #2e6fcf;
}

.lead-submit-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    grid-column: 1 / -1;
    margin-top: 4px;
}

.lead-submit-row .btn {
    min-width: 220px;
}

.lead-submit-note {
    max-width: 360px;
    color: #8490a1;
    font-size: 13px;
    line-height: 1.5;
}

.lead-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.lead-thanks {
    min-height: 62vh;
    display: grid;
    align-items: center;
}

.lead-thanks-card {
    max-width: 820px;
    margin: 0 auto;
    padding: clamp(34px, 6vw, 66px);
    border: 1px solid rgba(22, 47, 80, 0.1);
    border-radius: 32px;
    background: #ffffff;
    text-align: center;
    box-shadow: 0 24px 60px rgba(18, 41, 72, 0.11);
}

.lead-thanks-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 24px;
    border-radius: 50%;
    background: #eaf4ff;
    color: #2e72d4;
    font-size: 36px;
    font-weight: 900;
}

.lead-thanks-card h1 {
    margin: 0 0 17px;
    color: #172b48;
    font-size: clamp(34px, 5vw, 55px);
    line-height: 1.08;
}

.lead-thanks-card p {
    max-width: 650px;
    margin: 0 auto 27px;
    color: #67768a;
    font-size: 18px;
    line-height: 1.7;
}

.lead-thanks-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 13px;
}

@media (max-width: 900px) {
    .lead-layout {
        grid-template-columns: 1fr;
    }

    .lead-intro {
        padding: 0;
    }
}

@media (max-width: 620px) {
    .lead-form-grid {
        grid-template-columns: 1fr;
    }

    .lead-field-full,
    .lead-consent,
    .lead-submit-row {
        grid-column: auto;
    }

    .lead-form-card {
        padding: 25px 20px;
        border-radius: 23px;
    }

    .lead-submit-row {
        align-items: stretch;
    }

    .lead-submit-row .btn {
        width: 100%;
        min-width: 0;
    }

    .lead-thanks-card {
        padding: 36px 22px;
        border-radius: 25px;
    }
}

/* =========================================================
   HolaPet! public design system — Stage 4A.5.2.1
   Unified with the approved 0.20.2 landing page.
   ========================================================= */

:root {
    --petcrm-ink: #1B2B22;
    --petcrm-ink-soft: #455347;
    --petcrm-paper: #F2F5EE;
    --petcrm-paper-2: #E9F0E5;
    --petcrm-paper-warm: #F8F4ED;
    --petcrm-card: #FFFFFF;
    --petcrm-orange: #FF702D;
    --petcrm-coral: #FF6F52;
    --petcrm-sage: #7C8C7B;
    --petcrm-sage-line: #D7E0D1;
    --petcrm-green: #3F9257;
    --petcrm-blue: #DDECF7;
    --petcrm-lilac: #ECE5FF;
    --petcrm-peach: #FFE7DC;
    --petcrm-shadow: 0 22px 56px -30px rgba(27, 43, 34, .35);
    --petcrm-shadow-soft: 0 12px 36px -24px rgba(27, 43, 34, .25);
}

html {
    scroll-behavior: auto;
}

body {
    margin: 0;
    background: var(--petcrm-paper);
    color: var(--petcrm-ink);
    font-family: 'Yanone Kaffeesatz', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body h1,
body h2,
body h3,
body .display {
    font-family: 'Caveat', Arial, sans-serif;
    font-weight: 700;
    letter-spacing: -.035em;
}

/* Header: same floating capsule as the landing page. */
.site-header.petcrm-public-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    padding: 13px 0;
    background: linear-gradient(to bottom, rgba(242,245,238,.96), rgba(242,245,238,.72), transparent);
    box-shadow: none;
    pointer-events: none;
}

.site-header.petcrm-public-header .header-inner {
    position: relative;
    width: calc(100% - 48px);
    max-width: 1320px;
    min-height: 64px;
    margin: 0 auto;
    padding: 10px 18px 10px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 999px;
    background: rgba(255,255,255,.91);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 18px 50px -30px rgba(27,43,34,.45);
    pointer-events: auto;
}

.public-brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    color: var(--petcrm-ink) !important;
    font-family: 'Sora', Arial, sans-serif;
    font-size: 20px;
    font-weight: 750;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
}

.public-brand-mark {
    width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.public-brand-mark svg {
    width: 35px;
    height: 35px;
    fill: none;
    stroke: var(--petcrm-ink);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.site-header.petcrm-public-header .header-mobile-panel {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.site-header.petcrm-public-header .main-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    flex: 1;
    margin: 0;
}

.site-header.petcrm-public-header .main-nav a {
    position: relative;
    padding: 8px 0;
    color: #354239;
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
    transition: color .18s ease;
}

.site-header.petcrm-public-header .main-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--petcrm-orange);
    transition: right .2s ease;
}

.site-header.petcrm-public-header .main-nav a:hover,
.site-header.petcrm-public-header .main-nav a.active {
    color: var(--petcrm-ink);
}

.site-header.petcrm-public-header .main-nav a:hover::after,
.site-header.petcrm-public-header .main-nav a.active::after {
    right: 0;
    background: var(--petcrm-orange);
}

.site-header.petcrm-public-header .header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.site-header.petcrm-public-header .login-link {
    padding: 10px 8px;
    color: var(--petcrm-ink);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.site-header.petcrm-public-header .btn,
.public-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 12px 20px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.site-header.petcrm-public-header .btn:hover,
.public-page .btn:hover {
    transform: translateY(-2px);
}

.site-header.petcrm-public-header .btn-primary,
.public-page .btn-primary {
    border-color: transparent;
    background: linear-gradient(110deg, var(--petcrm-orange), var(--petcrm-coral));
    color: #fff;
    box-shadow: 0 12px 28px -18px rgba(255,111,82,.8);
}

.site-header.petcrm-public-header .btn-primary:hover,
.public-page .btn-primary:hover {
    background: linear-gradient(110deg, #ff6423, #ff684b);
    color: #fff;
    box-shadow: 0 18px 32px -18px rgba(255,111,82,.9);
}

.site-header.petcrm-public-header .mobile-menu-toggle {
    display: none;
    width: 42px;
    height: 42px;
    padding: 9px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.site-header.petcrm-public-header .mobile-menu-toggle span {
    display: block;
    width: 21px;
    height: 2px;
    margin: 4px auto;
    border-radius: 2px;
    background: var(--petcrm-ink);
    transition: transform .2s ease, opacity .2s ease;
}

/* Main public pages */
.public-page,
.article-page {
    min-width: 0;
    overflow: hidden;
    background: var(--petcrm-paper) !important;
    color: var(--petcrm-ink);
}

.public-page .container,
.article-page .container {
    max-width: 1220px;
}

.public-hero {
    padding: 48px 0 30px;
}

.public-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, .62fr);
    gap: 34px;
    align-items: stretch;
    padding: clamp(34px, 5vw, 54px);
    overflow: hidden;
    border: 1px solid rgba(215,224,209,.95);
    border-radius: 30px;
    background:
        radial-gradient(circle at 92% 8%, rgba(255,231,220,.88), transparent 31%),
        radial-gradient(circle at 8% 100%, rgba(221,236,247,.7), transparent 30%),
        rgba(255,255,255,.94);
    color: var(--petcrm-ink);
    box-shadow: var(--petcrm-shadow);
}

.public-hero-grid::before {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    right: -105px;
    bottom: -112px;
    border-radius: 50%;
    border: 1px solid rgba(255,112,45,.12);
    pointer-events: none;
}

.public-eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: 14px;
    color: var(--petcrm-orange);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.public-hero h1 {
    max-width: 820px;
    margin: 0 0 20px;
    color: var(--petcrm-ink);
    font-family: 'Sora', Arial, sans-serif;
    font-size: clamp(38px, 5vw, 62px);
    font-weight: 750;
    line-height: 1.03;
    letter-spacing: -.045em;
}

.public-hero p {
    max-width: 760px;
    margin: 0;
    color: var(--petcrm-ink-soft);
    font-size: 17px;
    line-height: 1.7;
}

.public-hero-actions,
.public-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.public-page .btn-light,
.public-hero .btn-light {
    border-color: var(--petcrm-sage-line);
    background: rgba(255,255,255,.82);
    color: var(--petcrm-ink);
    box-shadow: none;
}

.public-page .btn-light:hover,
.public-hero .btn-light:hover {
    border-color: var(--petcrm-ink);
    background: #fff;
    color: var(--petcrm-ink);
}

.public-hero-card {
    position: relative;
    display: flex;
    min-width: 0;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
    overflow: hidden;
    border: 1px solid rgba(215,224,209,.95);
    border-radius: 25px;
    background:
        radial-gradient(circle at 100% 0%, rgba(255,231,220,.85), transparent 45%),
        linear-gradient(145deg, #F8F4ED, #EDF3E8);
    box-shadow: var(--petcrm-shadow-soft);
}

.public-hero-card span {
    color: var(--petcrm-green);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    font-weight: 600;
}

.public-hero-card strong {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 11px 0 14px;
    color: var(--petcrm-ink);
    font-family: 'Sora', Arial, sans-serif;
    font-size: clamp(27px, 3vw, 38px);
    font-weight: 750;
    line-height: 1.08;
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
}

.public-hero-card p {
    color: var(--petcrm-ink-soft);
    font-size: 14px;
    line-height: 1.6;
}

.public-section {
    padding: 52px 0;
}

.public-section-muted {
    border-top: 1px solid rgba(215,224,209,.72);
    border-bottom: 1px solid rgba(215,224,209,.72);
    background: linear-gradient(180deg, rgba(233,240,229,.8), rgba(242,245,238,.68));
}

.public-section-head {
    max-width: 780px;
    margin: 0 auto 32px;
    text-align: center;
}

.public-section-head h2,
.public-split h2,
.public-cta h2,
.lead-intro h2,
.lead-form-head h2 {
    color: var(--petcrm-ink) !important;
    font-family: 'Sora', Arial, sans-serif;
    letter-spacing: -.035em;
}

.public-section-head h2,
.public-split h2,
.public-cta h2 {
    margin: 0 0 14px;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.1;
}

.public-section-head p,
.public-lead,
.public-cta p,
.lead-intro > p,
.lead-form-head p {
    color: var(--petcrm-ink-soft) !important;
}

.public-card,
.public-audience-card,
.public-blog-card,
.public-contact-card,
.public-price-card,
.public-metric-card,
.public-step,
.public-check-list-large,
.public-faq details,
.public-timeline article,
.public-article,
.article-content,
.article-toc,
.article-sidebar-card,
.industry-flow-card,
.industry-feature-card,
.industry-role-card,
.lead-benefits li,
.lead-form-card,
.lead-thanks-card {
    border-color: var(--petcrm-sage-line) !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: var(--petcrm-shadow-soft) !important;
}

.public-card,
.public-audience-card,
.public-blog-card,
.public-contact-card,
.public-price-card,
.industry-flow-card,
.industry-feature-card,
.industry-role-card {
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.public-link-card:hover,
.public-blog-card:hover,
a.public-contact-card:hover,
.public-audience-link:hover {
    transform: translateY(-4px);
    border-color: rgba(255,112,45,.32) !important;
    box-shadow: 0 22px 45px -28px rgba(27,43,34,.42) !important;
}

.public-card-icon,
.public-timeline article > span,
.industry-flow-card b,
.lead-thanks-icon {
    background: var(--petcrm-paper-2) !important;
    color: var(--petcrm-green) !important;
}

.public-card h3,
.public-audience-card h3,
.public-timeline h3,
.public-contact-card > strong,
.public-blog-card h2,
.public-article h2,
.industry-flow-card h3,
.industry-feature-card h3,
.industry-role-card h3,
.article-content h2,
.article-content h3,
.article-toc strong,
.article-sidebar-card strong,
.lead-thanks-card h1 {
    color: var(--petcrm-ink) !important;
    font-family: 'Sora', Arial, sans-serif;
}

.public-card p,
.public-audience-card p,
.public-timeline p,
.public-contact-card > p,
.public-blog-card p,
.public-article p,
.public-step span,
.public-check-list li,
.public-price-list li,
.public-metric-card span,
.public-faq details p,
.industry-flow-card p,
.industry-feature-card p,
.industry-role-card li,
.article-content p,
.article-content li,
.article-sidebar-card p,
.lead-benefits li,
.lead-thanks-card p {
    color: var(--petcrm-ink-soft) !important;
}

.public-contact-card > span,
.article-card-meta,
.article-meta {
    color: var(--petcrm-sage) !important;
}

.public-blog-card > span,
.public-price-name,
.public-audience-link,
.article-toc a,
.lead-consent a {
    color: var(--petcrm-orange) !important;
}

.article-toc a:hover {
    color: var(--petcrm-coral) !important;
}

.public-check-list li::before,
.public-price-list li::before,
.article-checklist li::before,
.industry-highlight-list li::before,
.industry-hero-list li::before,
.industry-role-card li::before,
.lead-benefits li::before {
    color: var(--petcrm-green) !important;
}

.public-step b {
    background: linear-gradient(135deg, var(--petcrm-orange), var(--petcrm-coral)) !important;
    color: #fff !important;
}

.public-cta {
    border-color: var(--petcrm-sage-line) !important;
    background:
        radial-gradient(circle at 92% 10%, rgba(255,231,220,.82), transparent 30%),
        rgba(255,255,255,.95) !important;
    box-shadow: var(--petcrm-shadow) !important;
}

.public-price-card.is-active {
    border-color: rgba(255,112,45,.72) !important;
    box-shadow: 0 24px 60px -32px rgba(255,112,45,.55) !important;
}

.public-price-card.is-active .btn {
    background: linear-gradient(110deg, var(--petcrm-orange), var(--petcrm-coral)) !important;
    color: #fff !important;
    box-shadow: 0 14px 30px -18px rgba(255,111,82,.8) !important;
}

.public-price-card:not(.is-active) .btn {
    border-color: var(--petcrm-sage-line) !important;
    background: #fff !important;
    color: var(--petcrm-ink) !important;
}

.public-price-badge {
    background: var(--petcrm-peach) !important;
    color: #B84E2E !important;
}

.public-price-note {
    background: #FFF4EC !important;
    color: #9A4F32 !important;
}

.public-price,
.public-metric-card strong,
.public-faq summary,
.public-step strong {
    color: var(--petcrm-ink) !important;
}

/* Contact form in the same warm/sage language. */
.lead-field label,
.lead-field > span {
    color: var(--petcrm-ink) !important;
}

.lead-field input,
.lead-field select,
.lead-field textarea {
    border-color: var(--petcrm-sage-line) !important;
    background: #FBFCF9 !important;
    color: var(--petcrm-ink) !important;
}

.lead-field input:focus,
.lead-field select:focus,
.lead-field textarea:focus {
    border-color: rgba(255,112,45,.65) !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(255,112,45,.10) !important;
}

.lead-consent input {
    accent-color: var(--petcrm-orange) !important;
}

.lead-consent label,
.lead-submit-note,
.lead-field-help {
    color: var(--petcrm-sage) !important;
}

/* Article and legacy public layouts also inherit the new visual system. */
.article-note {
    border-left-color: var(--petcrm-orange) !important;
    background: #FFF4EC !important;
}

.article-lead {
    color: var(--petcrm-ink-soft) !important;
}

.industry-highlight {
    border: 1px solid var(--petcrm-sage-line) !important;
    background:
        radial-gradient(circle at top right, rgba(255,231,220,.88), transparent 37%),
        linear-gradient(135deg, #FFFFFF, #EDF3E8) !important;
    color: var(--petcrm-ink) !important;
    box-shadow: var(--petcrm-shadow) !important;
}

.industry-highlight h2,
.industry-highlight p,
.industry-highlight-list li,
.industry-hero-list li {
    color: var(--petcrm-ink-soft) !important;
}

.industry-highlight h2 {
    color: var(--petcrm-ink) !important;
}

.industry-highlight-list li {
    border-color: var(--petcrm-sage-line) !important;
    background: rgba(255,255,255,.76) !important;
}

/* Privacy has an inline legacy palette, so overrides need higher specificity. */
.privacy-page .privacy-nav,
.privacy-page .privacy-document {
    border-color: var(--petcrm-sage-line) !important;
    background: #fff !important;
    box-shadow: var(--petcrm-shadow-soft) !important;
}

.privacy-page .privacy-nav strong,
.privacy-page .privacy-section h2,
.privacy-page .privacy-section h3,
.privacy-page .privacy-details dt {
    color: var(--petcrm-ink) !important;
    font-family: 'Sora', Arial, sans-serif !important;
}

.privacy-page .privacy-nav a,
.privacy-page .privacy-section p,
.privacy-page .privacy-section li,
.privacy-page .privacy-details dd {
    color: var(--petcrm-ink-soft) !important;
}

.privacy-page .privacy-nav a:hover,
.privacy-page .privacy-contact a {
    color: var(--petcrm-orange) !important;
}

.privacy-page .privacy-notice {
    border-color: #F2D7C7 !important;
    background: #FFF4EC !important;
    color: #7E503B !important;
}

.privacy-page .privacy-notice strong {
    color: #B84E2E !important;
}

.privacy-page .privacy-section + .privacy-section {
    border-top-color: var(--petcrm-sage-line) !important;
}

.privacy-page .privacy-details {
    border-color: var(--petcrm-sage-line) !important;
    background: var(--petcrm-sage-line) !important;
}

.privacy-page .privacy-details dt,
.privacy-page .privacy-details dd {
    background: #fff !important;
}

.privacy-page .privacy-contact {
    background: linear-gradient(135deg, #E9F0E5, #F8F4ED) !important;
    color: var(--petcrm-ink) !important;
}

.privacy-page .privacy-contact p,
.privacy-page .privacy-contact li {
    color: var(--petcrm-ink-soft) !important;
}

/* Footer: light, airy and identical in spirit to the landing page. */
.site-footer.petcrm-public-footer {
    margin-top: 42px;
    padding: 62px 0 30px;
    border: 0;
    background: transparent;
    color: var(--petcrm-ink);
}

.public-footer-wrap {
    width: calc(100% - 64px);
    max-width: 1220px;
    margin: 0 auto;
}

.public-footer-grid {
    display: grid;
    grid-template-columns: 1.45fr repeat(3, 1fr);
    gap: 42px;
    padding-bottom: 38px;
    border-bottom: 1px solid var(--petcrm-sage-line);
}

.public-footer-brand p {
    max-width: 270px;
    margin: 13px 0 0;
    color: var(--petcrm-sage);
    font-size: 13px;
    line-height: 1.6;
}

.public-footer-col h4 {
    margin: 0 0 14px;
    color: var(--petcrm-sage);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.public-footer-col a {
    display: block;
    margin-bottom: 10px;
    color: var(--petcrm-ink-soft);
    font-size: 13.5px;
    text-decoration: none;
    transition: color .18s ease;
}

.public-footer-col a:hover {
    color: var(--petcrm-orange);
}

.public-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding-top: 24px;
    color: var(--petcrm-sage);
    font-size: 11.5px;
}

@media (max-width: 1080px) {
    .site-header.petcrm-public-header .main-nav {
        gap: 18px;
    }
    .public-footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 900px) {
    .site-header.petcrm-public-header {
        padding: 10px 0;
    }
    .site-header.petcrm-public-header .header-inner {
        width: calc(100% - 28px);
        min-height: 62px;
        padding: 8px 10px 8px 16px;
    }
    .site-header.petcrm-public-header .mobile-menu-toggle {
        display: block;
        order: 3;
    }
    .site-header.petcrm-public-header .header-mobile-panel {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 18px;
        border: 1px solid rgba(255,255,255,.94);
        border-radius: 24px;
        background: rgba(255,255,255,.97);
        box-shadow: 0 22px 50px -25px rgba(27,43,34,.45);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }
    .site-header.petcrm-public-header .header-mobile-panel.is-open {
        display: flex;
    }
    .site-header.petcrm-public-header .main-nav {
        display: grid;
        gap: 4px;
        justify-content: stretch;
    }
    .site-header.petcrm-public-header .main-nav a {
        padding: 11px 12px;
        border-radius: 12px;
    }
    .site-header.petcrm-public-header .main-nav a::after {
        display: none;
    }
    .site-header.petcrm-public-header .main-nav a:hover,
    .site-header.petcrm-public-header .main-nav a.active {
        background: var(--petcrm-paper-2);
    }
    .site-header.petcrm-public-header .header-actions {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
    }
    .site-header.petcrm-public-header .header-actions .btn {
        width: 100%;
    }
    .public-hero-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .public-brand-logo {
        font-size: 17px;
    }
    .public-brand-mark,
    .public-brand-mark svg {
        width: 32px;
        height: 32px;
    }
    .site-header.petcrm-public-header .header-inner {
        width: calc(100% - 20px);
    }
    .site-header.petcrm-public-header .header-actions {
        grid-template-columns: 1fr;
    }
    .site-header.petcrm-public-header .login-link {
        text-align: center;
    }
    .public-hero {
        padding-top: 24px;
    }
    .public-hero-grid {
        padding: 28px 21px;
        border-radius: 24px;
    }
    .public-hero h1 {
        font-size: 35px;
    }
    .public-hero p {
        font-size: 16px;
    }
    .public-hero-card {
        padding: 23px 20px;
        border-radius: 21px;
    }
    .public-footer-wrap {
        width: calc(100% - 40px);
    }
    .public-footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .public-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================
   HolaPet! unified public footer — landing page design
   ========================================================= */
.site-footer.petcrm-public-footer.petcrm-landing-footer {
    margin-top: 42px !important;
    padding: 62px 0 30px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--petcrm-ink) !important;
}

.petcrm-landing-footer .public-footer-wrap {
    width: calc(100% - 64px);
    max-width: 1220px;
    margin: 0 auto;
}

.petcrm-landing-footer .foot-grid {
    display: grid !important;
    grid-template-columns: 1.45fr repeat(3, 1fr) !important;
    gap: 42px !important;
    padding: 0 0 38px !important;
    border-bottom: 1px solid var(--petcrm-sage-line) !important;
    background: transparent !important;
}

.petcrm-landing-footer .footer-landing-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--petcrm-ink) !important;
    font-family: 'Sora', sans-serif;
    font-size: 20px;
    font-weight: 750;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.petcrm-landing-footer .footer-landing-mark {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.petcrm-landing-footer .footer-landing-mark svg {
    width: 35px;
    height: 35px;
    fill: none;
    stroke: var(--petcrm-ink);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.petcrm-landing-footer .foot-brand p {
    max-width: 275px;
    margin: 13px 0 0 !important;
    color: var(--petcrm-sage) !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

.petcrm-landing-footer .foot-col h4 {
    margin: 0 0 14px !important;
    color: var(--petcrm-sage) !important;
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
}

.petcrm-landing-footer .foot-col a,
.petcrm-landing-footer .foot-col span {
    display: block !important;
    margin: 0 0 10px !important;
    color: var(--petcrm-ink-soft) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    text-decoration: none !important;
}

.petcrm-landing-footer .foot-col a:hover {
    color: var(--petcrm-orange) !important;
}

.petcrm-landing-footer .foot-contacts a:first-of-type {
    color: var(--petcrm-ink) !important;
    font-weight: 700 !important;
}

.petcrm-landing-footer .foot-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    flex-wrap: wrap !important;
    padding: 24px 0 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--petcrm-sage) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 11.5px !important;
}

.petcrm-landing-footer .foot-bottom a {
    color: var(--petcrm-sage) !important;
    text-decoration: none !important;
}

.petcrm-landing-footer .foot-bottom a:hover {
    color: var(--petcrm-orange) !important;
}

.petcrm-landing-footer .foot-designed {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap;
}

.petcrm-landing-footer .foot-designed strong {
    color: var(--petcrm-orange) !important;
    font-weight: 800 !important;
}

@media (max-width: 1000px) {
    .petcrm-landing-footer .foot-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 620px) {
    .site-footer.petcrm-public-footer.petcrm-landing-footer {
        padding-top: 48px !important;
    }
    .petcrm-landing-footer .public-footer-wrap {
        width: calc(100% - 40px);
    }
    .petcrm-landing-footer .foot-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        padding-bottom: 30px !important;
    }
    .petcrm-landing-footer .foot-bottom {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
}

/* =========================================================
   Stage 4A.5.2.4 — Public footer alignment hotfix
   Keep the shared footer aligned exactly like the landing page.
   ========================================================= */
.petcrm-landing-footer .foot-grid,
.petcrm-landing-footer .foot-grid > *,
.petcrm-landing-footer .foot-brand,
.petcrm-landing-footer .foot-col,
.petcrm-landing-footer .foot-contacts {
    text-align: left !important;
}

.petcrm-landing-footer .footer-landing-logo {
    justify-content: flex-start !important;
    text-align: left !important;
}

.petcrm-landing-footer .foot-brand p,
.petcrm-landing-footer .foot-col h4,
.petcrm-landing-footer .foot-col a,
.petcrm-landing-footer .foot-col span {
    text-align: left !important;
}


/* =========================================================
   HolaPet! — About page KPI & visual enhancement (0.21.5)
   ========================================================= */
.about-impact-section {
    padding-top: 34px;
}

.about-impact-heading {
    max-width: 850px;
    margin: 0 0 34px;
}

.about-impact-heading h2 {
    max-width: 820px;
    margin: 0 0 14px;
    color: var(--petcrm-ink);
    font-family: 'Sora', Arial, sans-serif;
    font-size: clamp(34px, 4.5vw, 54px);
    line-height: 1.08;
    letter-spacing: -.04em;
}

.about-impact-heading p {
    max-width: 760px;
    margin: 0;
    color: var(--petcrm-ink-soft);
    font-size: 17px;
    line-height: 1.7;
}

.about-impact-grid {
    display: grid;
    grid-template-columns: minmax(230px, .82fr) minmax(300px, 1.05fr) minmax(260px, .9fr);
    gap: 20px;
    align-items: stretch;
}

.about-impact-stack {
    display: grid;
    gap: 20px;
    min-width: 0;
}

.about-impact-stack-left {
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

.about-impact-stack-center {
    grid-template-rows: minmax(320px, 1.7fr) minmax(180px, .7fr);
}

.about-impact-stack-right {
    grid-template-rows: minmax(190px, .75fr) minmax(320px, 1.55fr);
}

.about-impact-stat,
.about-impact-photo {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--petcrm-sage-line);
    border-radius: 28px;
    box-shadow: var(--petcrm-shadow-soft);
}

.about-impact-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(25px, 3vw, 36px);
}

.about-impact-stat strong {
    display: block;
    margin-bottom: 5px;
    font-family: 'Sora', Arial, sans-serif;
    font-size: clamp(40px, 4.3vw, 64px);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.055em;
}

.about-impact-stat span {
    display: block;
    margin-bottom: 13px;
    font-family: 'Sora', Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
}

.about-impact-stat p {
    margin: 0;
    font-size: 18px;
    line-height: 1.55;
}

.about-impact-stat-light {
    background: rgba(255,255,255,.96);
    color: var(--petcrm-ink);
}

.about-impact-stat-light strong {
    color: var(--petcrm-orange);
}

.about-impact-stat-light p {
    color: var(--petcrm-ink-soft);
}

.about-impact-stat-dark {
    border-color: rgba(35,50,42,.08);
    background: #273029;
    color: #fff;
}

.about-impact-stat-dark strong {
    color: #fff;
}

.about-impact-stat-dark span,
.about-impact-stat-dark p {
    color: rgba(255,255,255,.82);
}

.about-impact-stat-orange {
    border-color: rgba(255,112,45,.24);
    background: linear-gradient(135deg, var(--petcrm-orange), var(--petcrm-coral));
    color: #1f2c25;
}

.about-impact-stat-orange strong,
.about-impact-stat-orange span {
    color: #1f2c25;
}

.about-impact-stat-orange p {
    color: rgba(31,44,37,.78);
}

.about-impact-photo {
    margin: 0;
    min-height: 280px;
    background: #e9efe6;
}

.about-impact-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-impact-photo-main img {
    object-position: 48% 50%;
}

.about-impact-photo-secondary img {
    object-position: 52% 48%;
}

.about-impact-note {
    max-width: 900px;
    margin: 22px 0 0;
    color: var(--petcrm-sage);
    font-size: 16px;
    line-height: 1.65;
}

.about-principles-grid .about-principle-card {
    position: relative;
    padding-top: 30px;
}

.about-principle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 22px;
    border-radius: 15px;
    background: linear-gradient(145deg, #f5efe6, #eef4e9);
    color: var(--petcrm-green);
}

.about-principle-card:nth-child(2) .about-principle-icon,
.about-principle-card:nth-child(5) .about-principle-icon {
    background: #fff0ea;
    color: var(--petcrm-orange);
}

.about-principle-card:nth-child(3) .about-principle-icon,
.about-principle-card:nth-child(6) .about-principle-icon {
    background: #edf2fb;
    color: #5075a8;
}

.about-principle-icon svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 980px) {
    .about-impact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-impact-stack-right {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
    }

    .about-impact-photo-secondary {
        min-height: 260px;
    }
}

@media (max-width: 680px) {
    .about-impact-section {
        padding-top: 22px;
    }

    .about-impact-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .about-impact-stack,
    .about-impact-stack-left,
    .about-impact-stack-center,
    .about-impact-stack-right {
        grid-column: auto;
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 14px;
    }

    .about-impact-photo {
        min-height: 300px;
    }

    .about-impact-stat {
        min-height: 220px;
        padding: 28px 24px;
    }

    .about-impact-stat strong {
        font-size: clamp(44px, 14vw, 58px);
    }

    .about-impact-note {
        margin-top: 16px;
        font-size: 11px;
    }

    .about-principle-icon {
        margin-bottom: 18px;
    }
}


/* =========================================================
   HolaPet! — System cards semantic background illustrations (0.21.7)
   ========================================================= */
.system-context-grid {
    gap: 20px;
}

.system-context-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 172px;
    padding: 28px 152px 28px 26px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.92)) !important;
}

.system-context-card::before,
.system-context-card::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.system-context-card::before {
    right: 14px;
    bottom: 10px;
    width: 148px;
    height: 132px;
    background-image: var(--system-card-illustration);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    opacity: .24;
    transform: translateZ(0);
}

.system-context-card::after {
    inset: auto 0 0 auto;
    width: 180px;
    height: 180px;
    border-radius: 999px;
    background: radial-gradient(circle, var(--system-card-glow, rgba(126,154,122,.14)) 0%, rgba(255,255,255,0) 72%);
    opacity: .9;
}

.system-context-card h3,
.system-context-card p {
    position: relative;
    z-index: 1;
}

.system-context-card h3 {
    margin-bottom: 14px;
}

.system-context-card p {
    max-width: 30ch;
}

.system-context-card-record {
    --system-card-glow: rgba(255,193,153,.28);
    --system-card-illustration: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 150'%3E%3Cg fill='none' stroke='%23f07d43' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='32' y='26' width='116' height='92' rx='18'/%3E%3Cpath d='M56 18v22M124 18v22M32 52h116M52 72h22M84 72h18M52 92h54M114 92h14'/%3E%3Cpath d='M120 95l10 10 18-21'/%3E%3C/g%3E%3C/svg%3E");
}

.system-context-card-pet {
    --system-card-glow: rgba(139,184,124,.24);
    --system-card-illustration: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 150'%3E%3Cg fill='none' stroke='%237aa26c' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M88 114c-22 0-38-11-38-28 0-9 6-15 14-15 6 0 10 3 14 8 4-4 8-8 16-8 11 0 20 8 20 19 0 15-12 24-26 24Z'/%3E%3Cellipse cx='66' cy='54' rx='10' ry='14' transform='rotate(-26 66 54)'/%3E%3Cellipse cx='90' cy='42' rx='10' ry='14'/%3E%3Cellipse cx='116' cy='54' rx='10' ry='14' transform='rotate(26 116 54)'/%3E%3Cellipse cx='44' cy='76' rx='9' ry='12' transform='rotate(-20 44 76)'/%3E%3C/g%3E%3C/svg%3E");
}

.system-context-card-team {
    --system-card-glow: rgba(179,166,228,.22);
    --system-card-illustration: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 150'%3E%3Cg fill='none' stroke='%238975c8' stroke-width='3.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='90' cy='50' r='16'/%3E%3Ccircle cx='56' cy='60' r='12'/%3E%3Ccircle cx='124' cy='60' r='12'/%3E%3Cpath d='M66 114c3-19 17-30 24-30s21 11 24 30'/%3E%3Cpath d='M34 114c3-14 11-22 22-24M124 90c11 2 19 10 22 24'/%3E%3Cpath d='M54 34h-22M43 23v22M137 30h18M146 21v18' opacity='.78'/%3E%3C/g%3E%3C/svg%3E");
}

.system-context-card-materials {
    --system-card-glow: rgba(123,177,174,.2);
    --system-card-illustration: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 150'%3E%3Cg fill='none' stroke='%236a9b9b' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M28 118h124'/%3E%3Crect x='40' y='74' width='22' height='34' rx='6'/%3E%3Cpath d='M47 62h8v12h-8z'/%3E%3Crect x='72' y='62' width='26' height='46' rx='8'/%3E%3Cpath d='M80 50h10v12H80zM111 84h22v24h-22zM111 74h22'/%3E%3Cpath d='M130 48c-8 7-11 17-10 28M137 41c7 8 10 17 9 28'/%3E%3C/g%3E%3C/svg%3E");
}

.system-context-card-finance {
    --system-card-glow: rgba(234,200,112,.2);
    --system-card-illustration: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 150'%3E%3Cg fill='none' stroke='%23d49a28' stroke-width='3.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M36 108h108M48 92l22-22 18 14 24-30 20 14'/%3E%3Ccircle cx='133' cy='85' r='20'/%3E%3Cpath d='M133 74v22M124 79c4-4 14-4 18 0 4 4 1 10-7 12-8 2-10 8-4 12 4 3 12 3 17-1'/%3E%3Cpath d='M55 51h18M55 63h10' opacity='.75'/%3E%3C/g%3E%3C/svg%3E");
}

.system-context-card-communication {
    --system-card-glow: rgba(112,157,227,.2);
    --system-card-illustration: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 150'%3E%3Cg fill='none' stroke='%23688bcc' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M38 40h76a12 12 0 0 1 12 12v36a12 12 0 0 1-12 12H76l-22 18v-18H38a12 12 0 0 1-12-12V52a12 12 0 0 1 12-12Z'/%3E%3Cpath d='M144 56h10a10 10 0 0 1 10 10v32a10 10 0 0 1-10 10h-10v12l-14-12h-2' opacity='.9'/%3E%3Cpath d='M48 60h54M48 74h42M48 88h28'/%3E%3C/g%3E%3C/svg%3E");
}

@media (max-width: 860px) {
    .system-context-card {
        padding-right: 132px;
    }

    .system-context-card::before {
        width: 130px;
        height: 118px;
        right: 8px;
        bottom: 8px;
        opacity: .22;
    }
}

@media (max-width: 680px) {
    .system-context-grid {
        gap: 14px;
    }

    .system-context-card {
        min-height: 164px;
        padding: 24px 120px 24px 22px;
    }

    .system-context-card::before {
        width: 116px;
        height: 104px;
        right: 8px;
        bottom: 10px;
        opacity: .2;
    }

    .system-context-card::after {
        width: 140px;
        height: 140px;
    }

    .system-context-card p {
        max-width: 28ch;
    }
}

@media (max-width: 430px) {
    .system-context-card {
        padding: 22px 22px 112px;
    }

    .system-context-card::before {
        width: 110px;
        height: 90px;
        right: 14px;
        bottom: 12px;
        opacity: .18;
    }

    .system-context-card p {
        max-width: none;
    }
}


/* =========================================================
   HolaPet! — For whom interactive photo carousel (0.21.11)
   ========================================================= */
.audience-showcase-section {
    overflow: hidden;
    padding-top: 38px;
}

.audience-showcase-shell {
    position: relative;
}

.audience-showcase-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 26px;
}

.audience-showcase-heading h2 {
    max-width: 820px;
    margin: 8px 0 10px;
    color: var(--petcrm-ink);
    font-family: 'Sora', Arial, sans-serif;
    font-size: clamp(32px, 4vw, 50px);
    line-height: 1.08;
    letter-spacing: -.045em;
}

.audience-showcase-heading p {
    max-width: 700px;
    margin: 0;
    color: var(--petcrm-ink-soft);
    font-size: 16px;
    line-height: 1.65;
}

.audience-showcase-arrows {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
    padding-bottom: 4px;
}

.audience-showcase-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--petcrm-sage-line);
    border-radius: 999px;
    background: rgba(255,255,255,.94);
    color: var(--petcrm-ink);
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 12px 28px -22px rgba(25,42,33,.6);
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.audience-showcase-arrow:hover {
    transform: translateY(-2px);
    border-color: rgba(255,112,45,.42);
    background: #fff7f1;
}

.audience-showcase-viewport {
    display: flex;
    gap: 22px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 4px 24px;
    scroll-snap-type: none;
    scroll-padding-inline: 4px;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    scroll-behavior: auto;
}

.audience-showcase-viewport::-webkit-scrollbar {
    display: none;
}

.audience-photo-card {
    position: relative;
    flex: 0 0 clamp(280px, 23vw, 390px);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 28px;
    scroll-snap-align: start;
    background: #dfe8dc;
    box-shadow: 0 20px 44px -32px rgba(24,41,31,.62);
    isolation: isolate;
    transform: translateY(0) scale(1);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.audience-photo-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    border: 2px solid transparent;
    border-radius: inherit;
    pointer-events: none;
    transition: border-color .28s ease;
}

.audience-photo-card img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    transform: scale(1.02);
    transition: transform .45s ease, filter .3s ease;
    filter: saturate(.98) contrast(1.02);
}

.audience-photo-card-grooming img { object-position: 54% 48%; }
.audience-photo-card-mobile img { object-position: 54% 50%; }
.audience-photo-card-hotel img { object-position: 52% 50%; }
.audience-photo-card-daycare img { object-position: 50% 48%; }
.audience-photo-card-spa img { object-position: 50% 50%; }
.audience-photo-card-network img { object-position: 50% 50%; }

.audience-photo-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(17,31,24,.06) 5%, rgba(17,31,24,.2) 48%, rgba(17,31,24,.88) 100%),
        radial-gradient(circle at 50% 45%, rgba(255,255,255,.03), rgba(255,255,255,0) 55%);
    transition: opacity .28s ease, background .28s ease;
}

.audience-photo-icon-wrap {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: transform .28s ease;
}

.audience-photo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60x;
    height: 60px;
    border: 1px solid rgba(255,255,255,.58);
    border-radius: 999px;
    background: rgba(24,35,28,.25);
    color: #fff;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    box-shadow: 0 18px 36px -24px rgba(0,0,0,.56);
    font-size: 34px;
    line-height: 1;
    transition: transform .28s ease, background .28s ease;
}

.audience-photo-title {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 28px;
    z-index: 3;
    color: #fff;
    font-family: 'Sora', Arial, sans-serif;
    font-size: clamp(23px, 2.1vw, 32px);
    line-height: 1.08;
    letter-spacing: -.03em;
    text-align: center;
    text-shadow: 0 3px 20px rgba(6,13,9,.35);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .28s ease, transform .28s ease;
    pointer-events: none;
}

.audience-photo-card:hover,
.audience-photo-card.is-active,
.audience-photo-card:focus-within {
    transform: translateY(-10px);
    box-shadow: 0 34px 58px -36px rgba(24,41,31,.72);
}

.audience-photo-card:hover::after,
.audience-photo-card.is-active::after,
.audience-photo-card:focus-within::after {
    border-color: rgba(255,150,36,.9);
}

.audience-photo-card:hover img,
.audience-photo-card.is-active img,
.audience-photo-card:focus-within img {
    transform: scale(1.06);
    filter: saturate(1.05) contrast(1.03);
}

.audience-photo-card:hover .audience-photo-overlay,
.audience-photo-card.is-active .audience-photo-overlay,
.audience-photo-card:focus-within .audience-photo-overlay {
    background:
        linear-gradient(180deg, rgba(17,31,24,.08) 5%, rgba(17,31,24,.28) 44%, rgba(17,31,24,.95) 100%),
        radial-gradient(circle at 50% 42%, rgba(255,255,255,.08), rgba(255,255,255,0) 56%);
}

.audience-photo-card:hover .audience-photo-icon-wrap,
.audience-photo-card.is-active .audience-photo-icon-wrap,
.audience-photo-card:focus-within .audience-photo-icon-wrap {
    transform: translateY(-20px);
}

.audience-photo-card:hover .audience-photo-icon,
.audience-photo-card.is-active .audience-photo-icon,
.audience-photo-card:focus-within .audience-photo-icon {
    background: rgba(255,255,255,.2);
    transform: scale(1.03);
}

.audience-photo-card:hover .audience-photo-title,
.audience-photo-card.is-active .audience-photo-title,
.audience-photo-card:focus-within .audience-photo-title {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 980px) {
    .audience-showcase-heading {
        align-items: center;
    }

    .audience-photo-card {
        flex-basis: 300px;
    }
}

@media (max-width: 680px) {
    .audience-showcase-section {
        padding-top: 24px;
    }

    .audience-showcase-heading {
        display: block;
        margin-bottom: 20px;
    }

    .audience-showcase-heading h2 {
        font-size: clamp(30px, 9vw, 40px);
    }

    .audience-showcase-arrows {
        display: none;
    }

    .audience-showcase-viewport {
        margin-right: calc(-1 * var(--public-mobile-side, 18px));
        padding-right: 20px;
        gap: 14px;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
    }

    .audience-photo-card {
        flex-basis: min(78vw, 288px);
        border-radius: 24px;
    }

    .audience-photo-icon-wrap {
        transform: translateY(-14px);
    }

    .audience-photo-title,
    .audience-photo-card.is-static-mobile .audience-photo-title {
        opacity: 1;
        transform: translateY(0);
        font-size: clamp(20px, 5.4vw, 26px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .audience-photo-card,
    .audience-photo-card img,
    .audience-photo-icon-wrap,
    .audience-photo-icon,
    .audience-photo-title,
    .audience-showcase-viewport {
        scroll-behavior: auto !important;
        animation: none !important;
        transition: none !important;
    }
}




/* =========================================================
   HolaPet! 0.21.18 — mobile public header = landing mobile header
   Desktop public header is intentionally left unchanged.
   ========================================================= */
.mobile-header-cta,
.mobile-main-nav {
    display: none !important;
}

@media (max-width: 900px) {
    body.petcrm-public-body {
        padding-top: 78px !important;
    }

    .site-header.petcrm-public-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 5000 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 8px 12px !important;
        border-radius: 0 !important;
        background: linear-gradient(to bottom, rgba(242,245,238,.98), rgba(242,245,238,.82), transparent) !important;
        box-shadow: none !important;
        pointer-events: none;
    }

    .site-header.petcrm-public-header .header-inner {
        width: 100% !important;
        max-width: 1320px !important;
        min-height: 58px !important;
        height: auto !important;
        margin: 0 auto !important;
        padding: 8px 10px 8px 16px !important;
        gap: 10px !important;
        border: 1px solid rgba(255,255,255,.92) !important;
        border-radius: 999px !important;
        background: rgba(255,255,255,.94) !important;
        box-shadow: 0 18px 50px -30px rgba(27,43,34,.48) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
        pointer-events: auto;
    }

    .site-header.petcrm-public-header .public-brand-logo {
        flex: 0 0 auto;
        min-width: 0;
    }

    .site-header.petcrm-public-header .mobile-header-cta {
        display: inline-flex !important;
        width: auto !important;
        min-height: 42px !important;
        margin-left: auto !important;
        padding: 10px 15px !important;
        border-radius: 999px !important;
        white-space: nowrap;
        font-size: 12px !important;
        line-height: 1.15 !important;
        box-shadow: 0 12px 28px -18px rgba(255,111,82,.8) !important;
    }

    .site-header.petcrm-public-header .mobile-menu-toggle {
        display: flex !important;
        flex: 0 0 42px !important;
        width: 42px !important;
        height: 42px !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        order: initial !important;
        padding: 8px !important;
        border-radius: 50% !important;
        background: transparent !important;
    }

    .site-header.petcrm-public-header .mobile-menu-toggle span {
        width: 20px !important;
        height: 2px !important;
        margin: 3px auto !important;
        background: var(--petcrm-ink) !important;
    }

    .site-header.petcrm-public-header .header-mobile-panel {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        left: 0 !important;
        right: 0 !important;
        display: none !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 14px !important;
        border: 1px solid rgba(255,255,255,.96) !important;
        border-radius: 20px !important;
        background: rgba(255,255,255,.98) !important;
        box-shadow: 0 22px 50px -25px rgba(27,43,34,.48) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
    }

    .site-header.petcrm-public-header .header-mobile-panel.is-open {
        display: flex !important;
    }

    .site-header.petcrm-public-header .desktop-main-nav,
    .site-header.petcrm-public-header .header-actions {
        display: none !important;
    }

    .site-header.petcrm-public-header .mobile-main-nav {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 4px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .site-header.petcrm-public-header .mobile-main-nav a {
        display: block !important;
        width: 100% !important;
        padding: 11px 12px !important;
        border-radius: 12px !important;
        color: #354239 !important;
        font-size: 14px !important;
        font-weight: 650 !important;
        text-decoration: none !important;
    }

    .site-header.petcrm-public-header .mobile-main-nav a::after {
        display: none !important;
    }

    .site-header.petcrm-public-header .mobile-main-nav a:hover,
    .site-header.petcrm-public-header .mobile-main-nav a.active {
        background: var(--petcrm-paper-2) !important;
        color: var(--petcrm-ink) !important;
    }
}

@media (max-width: 640px) {
    body.petcrm-public-body {
        padding-top: 74px !important;
    }

    .site-header.petcrm-public-header {
        padding: 8px 10px !important;
    }

    .site-header.petcrm-public-header .header-inner {
        min-height: 56px !important;
        padding: 7px 8px 7px 13px !important;
        gap: 7px !important;
    }

    .site-header.petcrm-public-header .public-brand-logo {
        gap: 7px !important;
        font-size: 17px !important;
    }

    .site-header.petcrm-public-header .public-brand-mark,
    .site-header.petcrm-public-header .public-brand-mark svg {
        width: 30px !important;
        height: 30px !important;
    }

    .site-header.petcrm-public-header .mobile-header-cta {
        min-height: 40px !important;
        padding: 9px 12px !important;
        font-size: 11.5px !important;
    }

    .site-header.petcrm-public-header .mobile-menu-toggle {
        flex-basis: 40px !important;
        width: 40px !important;
        height: 40px !important;
    }

    .site-header.petcrm-public-header .header-mobile-panel {
        top: calc(100% + 7px) !important;
    }
}

@media (max-width: 410px) {
    .site-header.petcrm-public-header .public-brand-logo {
        font-size: 15px !important;
    }
    .site-header.petcrm-public-header .public-brand-mark,
    .site-header.petcrm-public-header .public-brand-mark svg {
        width: 27px !important;
        height: 27px !important;
    }
    .site-header.petcrm-public-header .mobile-header-cta {
        padding-inline: 10px !important;
        font-size: 10.5px !important;
    }
}

/* =========================================================
   HolaPet! — shared public scroll reveal (0.21.20)
   Mirrors the landing-page reveal motion on all shared public pages.
   ========================================================= */
.petcrm-scroll-reveal {
    opacity: 0;
    will-change: opacity, transform;
}

.petcrm-scroll-reveal.petcrm-reveal-delay-1 { transition-delay: .08s; }
.petcrm-scroll-reveal.petcrm-reveal-delay-2 { transition-delay: .16s; }
.petcrm-scroll-reveal.petcrm-reveal-delay-3 { transition-delay: .24s; }

/* Modern browsers: individual translate keeps existing card hover transforms intact. */
@supports (translate: 0 0) {
    .petcrm-scroll-reveal {
        translate: 0 22px;
        transition:
            opacity .75s cubic-bezier(.2,.7,.2,1),
            translate .75s cubic-bezier(.2,.7,.2,1);
    }
    .petcrm-scroll-reveal.is-visible {
        opacity: 1;
        translate: 0 0;
        will-change: auto;
    }
}

/* Conservative fallback for older browsers. */
@supports not (translate: 0 0) {
    .petcrm-scroll-reveal {
        transform: translateY(22px);
        transition:
            opacity .75s cubic-bezier(.2,.7,.2,1),
            transform .75s cubic-bezier(.2,.7,.2,1);
    }
    .petcrm-scroll-reveal.is-visible {
        opacity: 1;
        transform: none;
        will-change: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .petcrm-scroll-reveal,
    .petcrm-scroll-reveal.is-visible {
        opacity: 1 !important;
        transform: none !important;
        translate: none !important;
        transition: none !important;
    }
}

/* =========================================================
   HolaPet! — blog article viewport/readability fix (0.21.48)
   Long article containers must never depend on IntersectionObserver:
   at 100–120% browser zoom the visible share of a long article can be
   smaller than the observer threshold, leaving the whole article hidden.
   ========================================================= */
.article-page .article-content.petcrm-scroll-reveal,
.article-page .article-sidebar.petcrm-scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    transition: none !important;
    will-change: auto !important;
}


/* =========================================================
   HolaPet! — privacy document viewport/readability fix (0.21.55)
   The full privacy document is much taller than the viewport. It must never
   depend on the scroll-reveal IntersectionObserver, otherwise at 100–120%+
   browser zoom the required visible share may never be reached and the
   document can remain transparent. Individual privacy sections may still
   reveal normally as the reader scrolls.
   ========================================================= */
.privacy-page .privacy-document.petcrm-scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    transition: none !important;
    will-change: auto !important;
}

/* Articles without a sidebar should not keep an empty 300px grid column.
   The card becomes almost as wide as the hero while retaining comfortable
   inner reading margins. */
.article-layout > .article-content:only-child {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 1120px;
    margin-inline: auto;
    padding-inline: clamp(46px, 5vw, 64px);
}

/* Slightly more room for the main text even on articles that do have
   a sidebar, without making the sidebar visually heavy. */
@media (min-width: 981px) {
    .article-layout {
        grid-template-columns: minmax(0, 1fr) 270px;
        gap: 30px;
    }
}

.article-page > .public-section {
    padding-top: 38px;
}

@media (max-width: 680px) {
    .article-layout > .article-content:only-child {
        max-width: none;
        padding: 28px 22px;
    }

    .article-page > .public-section {
        padding-top: 28px;
    }
}



/* ===== Unified public header | formerly public-header-unified.css ===== */
/* HolaPet! 0.21.22 — one public header for landing and all public pages. */
.petcrm-unified-header,
.petcrm-unified-header * {
    box-sizing: border-box;
}

.petcrm-unified-header {
    position: sticky;
    top: 0;
    z-index: 5000;
    width: 100%;
    padding: 13px 0;
    background: linear-gradient(to bottom, rgba(242,245,238,.96), rgba(242,245,238,.72), transparent);
    pointer-events: none;
    font-family: 'Comfortaa', Arial, sans-serif;
}

.petcrm-unified-nav {
    position: relative;
    width: calc(100% - 32px);
    max-width: 1320px;
    min-height: 64px;
    margin: 0 auto;
    padding: 10px 18px 10px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: rgba(255,255,255,.91);
    border: 1px solid rgba(255,255,255,.90);
    border-radius: 999px;
    box-shadow: 0 18px 50px -30px rgba(27,43,34,.45);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    pointer-events: auto;
}

.petcrm-unified-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #1B2B22;
    font-family: 'Sora', Arial, sans-serif;
    font-size: 20px;
    font-weight: 750;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    flex: 0 0 auto;
}

.petcrm-unified-logo-image {
    display: block;
    width: 180px;
    max-width: 24vw;
    max-height: 46px;
    height: auto;
}

.petcrm-unified-logo-mark {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 35px;
}

.petcrm-unified-logo-mark svg {
    display: block;
    width: 35px;
    height: 35px;
    max-width: none;
    fill: none;
    stroke: #1B2B22;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.petcrm-unified-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex: 1 1 auto;
    min-width: 0;
}

.petcrm-unified-links a {
    position: relative;
    display: inline-block;
    padding: 0;
    color: #354239;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 16px;
    font-weight: 650;
    line-height: 1.35;
    text-decoration: none;
    white-space: nowrap;
}

.petcrm-unified-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -7px;
    height: 2px;
    background: #FF702D;
    transition: right .2s ease;
}

.petcrm-unified-links a:hover::after,
.petcrm-unified-links a.active::after {
    right: 0;
}

.petcrm-unified-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.petcrm-unified-login {
    padding: 10px 8px;
    color: #1B2B22;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.petcrm-unified-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 20px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    background: linear-gradient(110deg, #FF702D, #FF6F52);
    box-shadow: 0 12px 28px -18px rgba(255,111,82,.8);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .18s ease, box-shadow .18s ease;
}

.petcrm-unified-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 32px -18px rgba(255,111,82,.9);
    color: #fff;
}

.petcrm-unified-menu-toggle {
    display: none;
    width: 42px;
    height: 42px;
    padding: 8px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #1B2B22;
    cursor: pointer;
}

.petcrm-unified-menu-toggle span,
.petcrm-unified-menu-toggle::before,
.petcrm-unified-menu-toggle::after {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    margin: 3px auto;
    border-radius: 2px;
    background: #1B2B22;
    transition: transform .2s ease, opacity .2s ease;
}

.petcrm-unified-menu-toggle.is-open span {
    opacity: 0;
}
.petcrm-unified-menu-toggle.is-open::before {
    transform: translateY(5px) rotate(45deg);
}
.petcrm-unified-menu-toggle.is-open::after {
    transform: translateY(-5px) rotate(-45deg);
}

@media (max-width: 1000px) {
    .petcrm-unified-links {
        gap: 18px;
    }
}

@media (max-width: 900px) {
    body {
        padding-top: 78px;
    }

    .petcrm-unified-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        margin: 0;
        padding: 8px 12px;
        background: linear-gradient(to bottom, rgba(242,245,238,.98), rgba(242,245,238,.82), transparent);
        box-shadow: none;
    }

    .petcrm-unified-nav {
        width: 100%;
        max-width: 1320px;
        min-height: 58px;
        margin: 0 auto;
        padding: 8px 10px 8px 16px;
        gap: 10px;
        border: 1px solid rgba(255,255,255,.92);
        border-radius: 999px;
        background: rgba(255,255,255,.94);
        box-shadow: 0 18px 50px -30px rgba(27,43,34,.48);
    }

    .petcrm-unified-links {
        position: absolute;
        top: calc(100% + 7px);
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 4px;
        width: 100%;
        padding: 14px;
        border: 1px solid rgba(255,255,255,.96);
        border-radius: 20px;
        background: rgba(255,255,255,.98);
        box-shadow: 0 22px 50px -25px rgba(27,43,34,.48);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .petcrm-unified-links.is-open {
        display: flex;
    }

    .petcrm-unified-links a {
        display: block;
        width: 100%;
        padding: 11px 12px;
        border-radius: 12px;
        font-size: 14px;
    }

    .petcrm-unified-links a::after {
        display: none;
    }

    .petcrm-unified-links a:hover,
    .petcrm-unified-links a.active {
        background: #E9F0E5;
        color: #1B2B22;
    }

    .petcrm-unified-actions {
        margin-left: auto;
        gap: 7px;
    }

    .petcrm-unified-login {
        display: none;
    }

    .petcrm-unified-cta {
        width: auto;
        min-height: 42px;
        padding: 10px 15px;
        font-size: 12px;
        line-height: 1.15;
    }

    .petcrm-unified-menu-toggle {
        display: flex;
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    body {
        padding-top: 74px;
    }

    .petcrm-unified-header {
        padding: 8px 10px;
    }

    .petcrm-unified-nav {
        min-height: 56px;
        padding: 7px 8px 7px 13px;
        gap: 7px;
    }

    .petcrm-unified-logo {
        gap: 7px;
        font-size: 17px;
    }

    .petcrm-unified-logo-image {
        width: 148px;
        max-width: 38vw;
        max-height: 38px;
    }

    .petcrm-unified-logo-mark,
    .petcrm-unified-logo-mark svg {
        width: 30px;
        height: 30px;
    }

    .petcrm-unified-logo-mark {
        flex-basis: 30px;
    }

    .petcrm-unified-cta {
        min-height: 40px;
        padding: 9px 12px;
        font-size: 11.5px;
    }

    .petcrm-unified-menu-toggle {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 410px) {
    .petcrm-unified-logo {
        font-size: 15px;
    }

    .petcrm-unified-logo-image {
        width: 138px;
        max-height: 36px;
    }

    .petcrm-unified-logo-mark,
    .petcrm-unified-logo-mark svg {
        width: 27px;
        height: 27px;
    }

    .petcrm-unified-logo-mark {
        flex-basis: 27px;
    }

    .petcrm-unified-cta {
        padding-inline: 10px;
        font-size: 10.5px;
    }
}

/* HolaPet! 0.21.29 — contextual dropdown for SEO audience landing pages. */
.petcrm-unified-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.petcrm-unified-nav-item > .petcrm-unified-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.petcrm-unified-dropdown-chevron {
    display: inline-block;
    margin-top: -2px;
    font-size: 16px;
    line-height: 1;
    color: #7C8C7B;
    transition: transform .2s ease, color .2s ease;
}

.petcrm-unified-nav-item-dropdown:hover .petcrm-unified-dropdown-chevron,
.petcrm-unified-nav-item-dropdown:focus-within .petcrm-unified-dropdown-chevron {
    transform: translateY(1px) rotate(180deg);
    color: #FF702D;
}

.petcrm-unified-nav-item.active > .petcrm-unified-nav-link::after {
    right: 0;
}

.petcrm-unified-dropdown {
    position: absolute;
    top: calc(100% + 15px);
    left: 50%;
    z-index: 5100;
    width: 360px;
    padding: 10px;
    border: 1px solid rgba(215,224,209,.9);
    border-radius: 20px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 24px 56px -30px rgba(27,43,34,.55);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -7px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.petcrm-unified-dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -16px;
    height: 16px;
}

.petcrm-unified-nav-item-dropdown:hover .petcrm-unified-dropdown,
.petcrm-unified-nav-item-dropdown:focus-within .petcrm-unified-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.petcrm-unified-links .petcrm-unified-dropdown-link {
    position: relative;
    display: block;
    width: 100%;
    padding: 12px 13px;
    border-radius: 14px;
    color: #1B2B22;
    text-decoration: none;
    white-space: normal;
    transition: background .18s ease, transform .18s ease;
}

.petcrm-unified-links .petcrm-unified-dropdown-link::after {
    display: none;
}

.petcrm-unified-dropdown-link strong,
.petcrm-unified-dropdown-link span {
    display: block;
}

.petcrm-unified-dropdown-link strong {
    font-size: 16px;
    line-height: 1.25;
    font-weight: 750;
}

.petcrm-unified-dropdown-link span {
    margin-top: 3px;
    color: #7C8C7B;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 600;
}

.petcrm-unified-dropdown-link:hover,
.petcrm-unified-dropdown-link.active {
    background: #F2F5EE;
    transform: translateX(2px);
}

.petcrm-unified-dropdown-link:hover strong,
.petcrm-unified-dropdown-link.active strong {
    color: #FF702D;
}

@media (max-width: 900px) {
    .petcrm-unified-nav-item {
        width: 100%;
        display: block;
    }

    .petcrm-unified-nav-item > .petcrm-unified-nav-link {
        display: flex;
        width: 100%;
        justify-content: space-between;
        padding: 11px 12px;
        border-radius: 12px;
        font-size: 14px;
    }

    .petcrm-unified-nav-item.active > .petcrm-unified-nav-link {
        background: #E9F0E5;
        color: #1B2B22;
    }

    .petcrm-unified-nav-item > .petcrm-unified-nav-link::after {
        display: none;
    }

    .petcrm-unified-dropdown-chevron {
        transform: none !important;
        transition: transform .2s ease, color .2s ease;
    }

    /* Mobile dropdowns work as an accordion: collapsed by default,
       while the section for the current page is opened by JS. */
    .petcrm-unified-dropdown {
        position: static;
        display: none;
        width: auto;
        margin: 0 0 4px 12px;
        padding: 0 0 3px 8px;
        border: 0;
        border-left: 1px solid #D7E0D1;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none !important;
    }

    .petcrm-unified-nav-item-dropdown.mobile-submenu-open > .petcrm-unified-dropdown {
        display: block;
        margin-top: 2px;
        padding-top: 3px;
    }

    .petcrm-unified-nav-item-dropdown.mobile-submenu-open > .petcrm-unified-nav-link {
        background: #F2F5EE;
    }

    .petcrm-unified-nav-item-dropdown.mobile-submenu-open > .petcrm-unified-nav-link .petcrm-unified-dropdown-chevron {
        transform: translateY(1px) rotate(180deg) !important;
        color: #FF702D;
    }

    .petcrm-unified-dropdown::before {
        display: none;
    }

    .petcrm-unified-links .petcrm-unified-dropdown-link {
        padding: 9px 11px;
        border-radius: 10px;
    }

    .petcrm-unified-dropdown-link strong {
        font-size: 14px;
    }

    .petcrm-unified-dropdown-link span {
        font-size: 12px;
    }

    .petcrm-unified-dropdown-link:hover,
    .petcrm-unified-dropdown-link.active {
        transform: none;
    }
}


/* =========================================================
   HolaPet! 0.21.52 — mobile menu viewport scroll fix
   The expanded menu can be taller than a phone viewport because
   both contextual dropdown groups are visible on mobile. Keep the
   header fixed, but make the menu itself a touch-scrollable panel.
   ========================================================= */
@media (max-width: 900px) {
    .petcrm-unified-links.is-open {
        max-height: calc(100vh - 92px);
        max-height: calc(100dvh - 92px);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        padding-bottom: max(14px, env(safe-area-inset-bottom));
        scrollbar-width: thin;
    }
}


/* =========================================================
   HolaPet! 0.21.53 — mobile accordion navigation
   Contextual groups can now be expanded/collapsed independently.
   ========================================================= */
@media (max-width: 900px) {
    .petcrm-unified-nav-item-dropdown > .petcrm-unified-nav-link {
        cursor: pointer;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
}


/* ===== Unified public footer | formerly public-footer-unified.css ===== */
/* HolaPet! 0.21.23 — one physical public footer on every public page. */
.petcrm-unified-footer,
.petcrm-unified-footer * {
    box-sizing: border-box;
}

.petcrm-unified-footer {
    margin-top: 42px;
    padding: 62px 0 30px;
    border: 0;
    background: transparent;
    color: #1B2B22;
    font-family: 'Yanone Kaffeesatz', Arial, sans-serif;
}

.petcrm-unified-footer-wrap {
    width: calc(100% - 64px);
    max-width: 1220px;
    margin: 0 auto;
}

.petcrm-unified-footer .foot-grid {
    display: grid;
    grid-template-columns: 1.45fr repeat(3, 1fr);
    gap: 42px;
    padding: 0 0 38px;
    border-bottom: 1px solid #D7E0D1;
    text-align: left;
}

.petcrm-unified-footer .foot-grid > *,
.petcrm-unified-footer .foot-brand,
.petcrm-unified-footer .foot-col,
.petcrm-unified-footer .foot-contacts {
    min-width: 0;
    text-align: left;
}

.petcrm-footer-logo {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    color: #1B2B22;
    font-family: 'Sora', Arial, sans-serif;
    font-size: 20px;
    font-weight: 750;
    line-height: 1;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
}

.petcrm-footer-logo-image {
    display: block;
    width: 190px;
    max-width: 100%;
    max-height: 50px;
    height: auto;
}

.petcrm-footer-logo-mark {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 35px;
}

.petcrm-footer-logo-mark svg {
    display: block;
    width: 35px;
    height: 35px;
    max-width: none;
    fill: none;
    stroke: #1B2B22;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.petcrm-unified-footer .foot-brand p {
    max-width: 255px;
    margin: 13px 0 0;
    color: #7C8C7B;
    font-size: 17px;
    line-height: 1.6;
    text-align: left;
}

.petcrm-unified-footer .foot-col h4 {
    margin: 0 0 14px;
    color: #7C8C7B;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .05em;
    text-align: left;
    text-transform: uppercase;
}

.petcrm-unified-footer .foot-col a,
.petcrm-unified-footer .foot-col span {
    display: block;
    margin: 0 0 10px;
    color: #455347;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    text-decoration: none;
}

.petcrm-unified-footer .foot-col a:hover {
    color: #FF702D;
}

.petcrm-unified-footer .foot-contacts a:first-of-type {
    color: #1B2B22;
    font-weight: 700;
}

.petcrm-unified-footer .foot-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 24px 0 0;
    border: 0;
    background: transparent;
    color: #7C8C7B;
    font-size: 15px;
}

.petcrm-unified-footer .foot-bottom a {
    color: #7C8C7B;
    text-decoration: none;
}

.petcrm-unified-footer .foot-bottom a:hover {
    color: #FF702D;
}

.petcrm-unified-footer .foot-designed {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.petcrm-unified-footer .foot-designed strong {
    color: #FF702D;
    font-weight: 800;
}

@media (max-width: 1000px) {
    .petcrm-unified-footer .foot-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 620px) {
    .petcrm-unified-footer {
        margin-top: 34px;
        padding: 48px 0 26px;
    }

    .petcrm-unified-footer-wrap {
        width: calc(100% - 40px);
    }

    .petcrm-unified-footer .foot-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-bottom: 30px;
    }

    .petcrm-unified-footer .foot-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
}


/* ===== HolaPet public typography | formerly public-typography-holapet.css ===== */
/* =========================================================
   HolaPet! public typography — 0.21.25
   Mirrors the approved homepage typography without changing
   the CRM/admin interface or the shared header/footer identity.

   Display / section / card headings: Caveat
   Main public-page copy and controls: Yanone Kaffeesatz
   Technical labels / eyebrows: IBM Plex Mono (unchanged)
   Header/footer identity and numeric UI accents: unchanged
   ========================================================= */

/* Public content only. The internal CRM/admin UI is intentionally untouched. */
body.petcrm-public-body main.public-page,
body.petcrm-public-body main.public-page button,
body.petcrm-public-body main.public-page input,
body.petcrm-public-body main.public-page select,
body.petcrm-public-body main.public-page textarea {
    font-family: 'Yanone Kaffeesatz', Arial, sans-serif;
}

/* Main action buttons on public pages follow the homepage body typeface. */
body.petcrm-public-body main.public-page .btn {
    font-family: 'Yanone Kaffeesatz', Arial, sans-serif !important;
}

/* Display hierarchy: same handwritten heading face as the homepage. */
body.petcrm-public-body main.public-page h1,
body.petcrm-public-body main.public-page h2,
body.petcrm-public-body main.public-page h3,
body.petcrm-public-body main.public-page .display,
body.petcrm-public-body main.public-page .public-hero-card strong,
body.petcrm-public-body main.public-page .public-contact-card > strong,
body.petcrm-public-body main.public-page .audience-photo-title {
    font-family: 'Caveat', Arial, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -.035em;
    overflow: visible;
}

/* Give the handwritten font a little vertical breathing room so
   Cyrillic tails and soft-sign forms are never clipped. */
body.petcrm-public-body main.public-page .public-hero h1 {
    line-height: 1.08;
    padding-bottom: .045em;
}

body.petcrm-public-body main.public-page .public-section-head h2,
body.petcrm-public-body main.public-page .public-section-heading h2,
body.petcrm-public-body main.public-page .public-split h2,
body.petcrm-public-body main.public-page .public-cta h2,
body.petcrm-public-body main.public-page .lead-intro h2,
body.petcrm-public-body main.public-page .lead-form-head h2,
body.petcrm-public-body main.public-page .about-impact-heading h2,
body.petcrm-public-body main.public-page .audience-showcase-heading h2,
body.petcrm-public-body main.public-page .article-content h2,
body.petcrm-public-body main.public-page .article-content h3,
body.petcrm-public-body main.public-page .privacy-section h2,
body.petcrm-public-body main.public-page .privacy-section h3 {
    font-family: 'Caveat', Arial, sans-serif !important;
    font-weight: 700 !important;
    line-height: 1.12;
    letter-spacing: -.035em;
}

/* Hero side cards are visual headings too. */
body.petcrm-public-body main.public-page .public-hero-card strong {
    line-height: 1.1;
    padding-bottom: .035em;
}

/* Keep the small technical labels exactly as on the homepage. */
body.petcrm-public-body main.public-page .public-eyebrow,
body.petcrm-public-body main.public-page .mono {
    font-family: 'IBM Plex Mono', monospace !important;
}

/* The homepage keeps numeric/metric accents in Sora. Preserve that
   convention on the other public pages as well. */
body.petcrm-public-body main.public-page .public-metric-card strong,
body.petcrm-public-body main.public-page .about-impact-stat strong,
body.petcrm-public-body main.public-page .about-impact-stat span {
    font-family: 'Sora', Arial, sans-serif !important;
}

/* Navigation-like article helpers remain UI typography rather than display text. */
body.petcrm-public-body main.public-page .article-toc strong,
body.petcrm-public-body main.public-page .article-sidebar-card strong,
body.petcrm-public-body main.public-page .privacy-nav strong,
body.petcrm-public-body main.public-page .privacy-details dt {
    font-family: 'Sora', Arial, sans-serif !important;
}

@media (max-width: 640px) {
    body.petcrm-public-body main.public-page .public-hero h1 {
        line-height: 1.1;
    }
}

/* =========================================================
   HolaPet! public typography sizing — 0.21.25
   Aligns the readable type scale of the remaining public pages
   with the approved homepage while preserving page layouts.
   ========================================================= */

/* Main readable scale from the homepage. */
body.petcrm-public-body main.public-page {
    font-size: 19px;
    line-height: 1.58;
}

/* Hero: homepage uses 82–98 px Caveat and a 25 px lead. */
body.petcrm-public-body main.public-page .public-hero h1 {
    font-size: clamp(82px, 5.2vw, 98px);
    line-height: 1.08;
}
body.petcrm-public-body main.public-page .public-hero > .container p,
body.petcrm-public-body main.public-page .public-hero-grid > div:first-child > p {
    font-size: 25px;
    line-height: 1.65;
}
body.petcrm-public-body main.public-page .public-hero .public-eyebrow {
    font-size: 18px;
}
body.petcrm-public-body main.public-page .public-hero-card strong {
    font-size: 35px;
    line-height: 1.1;
}
body.petcrm-public-body main.public-page .public-hero-card p {
    font-size: 18px;
    line-height: 1.55;
}

/* Primary section headings and leads match the homepage section scale. */
body.petcrm-public-body main.public-page .public-section-head h2,
body.petcrm-public-body main.public-page .public-section-heading h2,
body.petcrm-public-body main.public-page .public-split h2,
body.petcrm-public-body main.public-page .lead-intro h2,
body.petcrm-public-body main.public-page .about-impact-heading h2,
body.petcrm-public-body main.public-page .audience-showcase-heading h2,
body.petcrm-public-body main.public-page .article-related > h2 {
    font-size: clamp(55px, 3.8vw, 60px);
    line-height: 1.12;
}
body.petcrm-public-body main.public-page .public-section-head p,
body.petcrm-public-body main.public-page .public-section-heading p,
body.petcrm-public-body main.public-page .public-lead,
body.petcrm-public-body main.public-page .public-split > div > p,
body.petcrm-public-body main.public-page .lead-intro > p,
body.petcrm-public-body main.public-page .about-impact-heading p,
body.petcrm-public-body main.public-page .audience-showcase-heading p {
    font-size: 23px;
    line-height: 1.65;
}

/* Cards use the same scale as the homepage feature cards. */
body.petcrm-public-body main.public-page .public-card h3,
body.petcrm-public-body main.public-page .public-audience-card h3,
body.petcrm-public-body main.public-page .public-timeline h3,
body.petcrm-public-body main.public-page .public-contact-card > strong,
body.petcrm-public-body main.public-page .public-blog-card h2,
body.petcrm-public-body main.public-page .public-blog-card h3,
body.petcrm-public-body main.public-page .public-article h2,
body.petcrm-public-body main.public-page .industry-flow-card h3,
body.petcrm-public-body main.public-page .industry-feature-card h3,
body.petcrm-public-body main.public-page .industry-role-card h3,
body.petcrm-public-body main.public-page .lead-thanks-card h1 {
    font-size: 33px;
    line-height: 1.15;
}
body.petcrm-public-body main.public-page .public-card p,
body.petcrm-public-body main.public-page .public-audience-card p,
body.petcrm-public-body main.public-page .public-timeline p,
body.petcrm-public-body main.public-page .public-contact-card > p,
body.petcrm-public-body main.public-page .public-blog-card p,
body.petcrm-public-body main.public-page .public-article p,
body.petcrm-public-body main.public-page .public-step span,
body.petcrm-public-body main.public-page .public-check-list li,
body.petcrm-public-body main.public-page .public-price-list li,
body.petcrm-public-body main.public-page .public-metric-card span,
body.petcrm-public-body main.public-page .public-faq details p,
body.petcrm-public-body main.public-page .industry-flow-card p,
body.petcrm-public-body main.public-page .industry-feature-card p,
body.petcrm-public-body main.public-page .industry-role-card li,
body.petcrm-public-body main.public-page .article-sidebar-card p,
body.petcrm-public-body main.public-page .lead-benefits li,
body.petcrm-public-body main.public-page .lead-thanks-card p {
    font-size: 19px;
    line-height: 1.58;
}

/* Form text is brought up to the same comfortable reading size. */
body.petcrm-public-body main.public-page .lead-form-head h2 {
    font-size: clamp(40px, 3vw, 48px);
    line-height: 1.15;
}
body.petcrm-public-body main.public-page .lead-form-head p,
body.petcrm-public-body main.public-page label,
body.petcrm-public-body main.public-page input,
body.petcrm-public-body main.public-page select,
body.petcrm-public-body main.public-page textarea {
    font-size: 19px;
}

/* Long-form articles: use the homepage showcase/card hierarchy so text
   stays large without making every subsection a 60 px display heading. */
body.petcrm-public-body main.public-page .article-content h2,
body.petcrm-public-body main.public-page .privacy-section h2 {
    font-size: clamp(40px, 3vw, 48px);
    line-height: 1.15;
}
body.petcrm-public-body main.public-page .article-content h3,
body.petcrm-public-body main.public-page .privacy-section h3 {
    font-size: 33px;
    line-height: 1.2;
}
body.petcrm-public-body main.public-page .article-content p,
body.petcrm-public-body main.public-page .article-content li,
body.petcrm-public-body main.public-page .privacy-section p,
body.petcrm-public-body main.public-page .privacy-section li {
    font-size: 20px;
    line-height: 1.7;
}
body.petcrm-public-body main.public-page .article-lead {
    font-size: 23px !important;
    line-height: 1.65 !important;
}

/* CTA on the homepage is deliberately more compact than normal section H2. */
body.petcrm-public-body main.public-page .public-cta h2 {
    font-size: clamp(28px, 3.5vw, 42px);
    line-height: 1.12;
}
body.petcrm-public-body main.public-page .public-cta p {
    font-size: 18px;
    line-height: 1.6;
}

/* Homepage action buttons are 25 px in the approved version. */
body.petcrm-public-body main.public-page .btn {
    font-size: 25px;
    line-height: 1.1;
}

/* Smaller UI/meta text stays subordinate but not tiny. */
body.petcrm-public-body main.public-page .article-meta,
body.petcrm-public-body main.public-page .article-card-meta,
body.petcrm-public-body main.public-page .public-contact-card > span,
body.petcrm-public-body main.public-page .public-price-name,
body.petcrm-public-body main.public-page .public-step strong,
body.petcrm-public-body main.public-page .public-faq summary {
    font-size: 18px;
}

@media (max-width: 1000px) {
    body.petcrm-public-body main.public-page .public-hero h1 {
        font-size: clamp(58px, 8vw, 82px);
    }
}

@media (max-width: 640px) {
    body.petcrm-public-body main.public-page {
        font-size: 18px;
    }
    body.petcrm-public-body main.public-page .public-hero h1 {
        font-size: clamp(38px, 10vw, 58px);
        line-height: 1.1;
    }
    body.petcrm-public-body main.public-page .public-hero > .container p,
    body.petcrm-public-body main.public-page .public-hero-grid > div:first-child > p {
        font-size: 21px;
    }
    body.petcrm-public-body main.public-page .public-section-head h2,
    body.petcrm-public-body main.public-page .public-section-heading h2,
    body.petcrm-public-body main.public-page .public-split h2,
    body.petcrm-public-body main.public-page .lead-intro h2,
    body.petcrm-public-body main.public-page .about-impact-heading h2,
    body.petcrm-public-body main.public-page .audience-showcase-heading h2,
    body.petcrm-public-body main.public-page .article-related > h2 {
        font-size: clamp(42px, 12vw, 55px);
    }
    body.petcrm-public-body main.public-page .public-section-head p,
    body.petcrm-public-body main.public-page .public-section-heading p,
    body.petcrm-public-body main.public-page .public-lead,
    body.petcrm-public-body main.public-page .lead-intro > p,
    body.petcrm-public-body main.public-page .about-impact-heading p,
    body.petcrm-public-body main.public-page .audience-showcase-heading p {
        font-size: 20px;
    }
    body.petcrm-public-body main.public-page .public-card h3,
    body.petcrm-public-body main.public-page .public-audience-card h3,
    body.petcrm-public-body main.public-page .public-timeline h3,
    body.petcrm-public-body main.public-page .public-contact-card > strong,
    body.petcrm-public-body main.public-page .public-blog-card h2,
    body.petcrm-public-body main.public-page .public-blog-card h3,
    body.petcrm-public-body main.public-page .public-article h2,
    body.petcrm-public-body main.public-page .industry-flow-card h3,
    body.petcrm-public-body main.public-page .industry-feature-card h3,
    body.petcrm-public-body main.public-page .industry-role-card h3,
    body.petcrm-public-body main.public-page .article-content h3,
    body.petcrm-public-body main.public-page .privacy-section h3 {
        font-size: 30px;
    }
    body.petcrm-public-body main.public-page .article-content h2,
    body.petcrm-public-body main.public-page .privacy-section h2 {
        font-size: 38px;
    }
    body.petcrm-public-body main.public-page .article-content p,
    body.petcrm-public-body main.public-page .article-content li,
    body.petcrm-public-body main.public-page .privacy-section p,
    body.petcrm-public-body main.public-page .privacy-section li,
    body.petcrm-public-body main.public-page .public-card p,
    body.petcrm-public-body main.public-page .public-audience-card p,
    body.petcrm-public-body main.public-page .public-timeline p,
    body.petcrm-public-body main.public-page .public-contact-card > p,
    body.petcrm-public-body main.public-page .public-blog-card p,
    body.petcrm-public-body main.public-page .public-article p,
    body.petcrm-public-body main.public-page .public-step span,
    body.petcrm-public-body main.public-page .public-check-list li,
    body.petcrm-public-body main.public-page .public-price-list li,
    body.petcrm-public-body main.public-page .public-metric-card span,
    body.petcrm-public-body main.public-page .public-faq details p,
    body.petcrm-public-body main.public-page .industry-flow-card p,
    body.petcrm-public-body main.public-page .industry-feature-card p,
    body.petcrm-public-body main.public-page .industry-role-card li,
    body.petcrm-public-body main.public-page .lead-benefits li {
        font-size: 18px;
    }
    body.petcrm-public-body main.public-page .btn {
        font-size: 21px;
    }
}


/* ===== Unified public component styling | formerly public-style-unified.css ===== */
/* =========================================================
   HolaPet! — public visual unification pass 0.21.54
   Reference: approved homepage + current SEO landing pages.
   Scope: PUBLIC pages only. CRM/admin interface is untouched.
   ========================================================= */

body.petcrm-public-body {
    --hp-ink: #1B2B22;
    --hp-soft: #455347;
    --hp-paper: #F2F5EE;
    --hp-paper-2: #E9F0E5;
    --hp-warm: #F8F4ED;
    --hp-card: #FFFFFF;
    --hp-line: #D7E0D1;
    --hp-orange: #FF702D;
    --hp-coral: #FF6F52;
    --hp-gold: #F2A93B;
    --hp-green: #3F9257;
    --hp-sage: #7C8C7B;
    --hp-blue: #DDECF7;
    --hp-lilac: #ECE5FF;
    --hp-peach: #FFE7DC;
    --hp-shadow: 0 22px 56px -30px rgba(27,43,34,.35);
    --hp-shadow-soft: 0 14px 38px -28px rgba(27,43,34,.30);
    background: var(--hp-paper);
    color: var(--hp-ink);
}

body.petcrm-public-body main.public-page {
    min-width: 0;
    overflow: clip;
    background: var(--hp-paper) !important;
    color: var(--hp-ink);
}

/* One content width everywhere: homepage, landing pages, blog, footer. */
body.petcrm-public-body main.public-page .container {
    width: min(1220px, calc(100% - 64px));
    max-width: 1220px;
    margin-inline: auto;
}

/* ---------------------------------------------------------
   Small labels / actions
   --------------------------------------------------------- */
body.petcrm-public-body main.public-page .public-eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 16px;
    padding: 7px 11px;
    border: 1px solid var(--hp-line);
    border-radius: 999px;
    background: rgba(255,255,255,.74);
    box-shadow: 0 10px 26px -24px rgba(27,43,34,.34);
    color: var(--hp-soft);
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .035em;
    text-transform: none;
}

body.petcrm-public-body main.public-page .btn {
    min-height: 50px;
    padding: 12px 22px;
    border-radius: 999px;
}

body.petcrm-public-body main.public-page .btn-primary {
    border-color: transparent !important;
    background: linear-gradient(110deg, var(--hp-orange), var(--hp-coral)) !important;
    color: #fff !important;
    box-shadow: 0 14px 30px -20px rgba(255,111,82,.85) !important;
}

body.petcrm-public-body main.public-page .btn-primary:hover {
    box-shadow: 0 18px 36px -18px rgba(255,111,82,.92) !important;
}

body.petcrm-public-body main.public-page .btn-light,
body.petcrm-public-body main.public-page .btn-secondary {
    border: 1px solid var(--hp-line) !important;
    background: rgba(255,255,255,.86) !important;
    color: var(--hp-ink) !important;
    box-shadow: none !important;
}

body.petcrm-public-body main.public-page .btn-light:hover,
body.petcrm-public-body main.public-page .btn-secondary:hover {
    border-color: rgba(255,112,45,.38) !important;
    background: #fff !important;
}

body.petcrm-public-body main.public-page .public-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}

/* ---------------------------------------------------------
   Legacy/public hero -> same airy composition as new SEO pages
   --------------------------------------------------------- */
body.petcrm-public-body main.public-page .public-hero {
    padding: 62px 0 72px;
    overflow: visible;
}

body.petcrm-public-body main.public-page .public-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(300px, .82fr);
    gap: clamp(38px, 5vw, 62px);
    align-items: center;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--hp-ink);
}

body.petcrm-public-body main.public-page .public-hero-grid::before {
    display: none;
}

body.petcrm-public-body main.public-page .public-hero h1 {
    max-width: 820px;
    margin: 0 0 20px;
    padding-bottom: .08em;
    color: var(--hp-ink);
    font-size: clamp(68px, 5vw, 92px);
    line-height: 1.06;
    overflow: visible;
}

body.petcrm-public-body main.public-page .public-hero-grid > div:first-child > p,
body.petcrm-public-body main.public-page .public-hero > .container > p {
    max-width: 720px;
    margin: 0;
    color: var(--hp-soft) !important;
    font-size: 24px;
    line-height: 1.62;
}

body.petcrm-public-body main.public-page .public-hero-actions {
    gap: 12px;
    margin-top: 28px;
}

body.petcrm-public-body main.public-page .public-hero .public-hero-card {
    position: relative;
    min-height: 300px;
    padding: 34px;
    overflow: hidden;
    border: 1px solid var(--hp-line);
    border-radius: 28px;
    background:
        radial-gradient(circle at 95% 0%, rgba(255,231,220,.95), transparent 42%),
        linear-gradient(145deg, #fff, #EEF4EA);
    box-shadow: var(--hp-shadow);
}

body.petcrm-public-body main.public-page .public-hero .public-hero-card::after {
    content: '';
    position: absolute;
    right: -55px;
    bottom: -70px;
    width: 150px;
    height: 150px;
    border: 1px solid rgba(255,112,45,.16);
    border-radius: 50%;
    pointer-events: none;
}

body.petcrm-public-body main.public-page .public-hero .public-hero-card > span:not(.public-eyebrow) {
    color: var(--hp-green);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

body.petcrm-public-body main.public-page .public-hero .public-hero-card strong {
    position: relative;
    z-index: 1;
    margin: 11px 0 14px;
    color: var(--hp-ink) !important;
    font-size: clamp(33px, 3vw, 42px) !important;
    line-height: 1.08 !important;
    overflow-wrap: normal;
}

body.petcrm-public-body main.public-page .public-hero .public-hero-card p {
    position: relative;
    z-index: 1;
    max-width: 520px;
    color: var(--hp-soft) !important;
    font-size: 19px !important;
    line-height: 1.55 !important;
}

/* Compact callout when the same component is reused inside content. */
body.petcrm-public-body main.public-page .public-section .public-hero-card {
    min-height: 0;
    padding: 32px 34px;
    border: 1px solid var(--hp-line);
    border-radius: 26px;
    background: linear-gradient(135deg, #fff, #F3F6EF);
    box-shadow: var(--hp-shadow-soft);
}

body.petcrm-public-body main.public-page .public-section .public-hero-card strong {
    margin: 8px 0 10px;
    color: var(--hp-ink) !important;
    font-size: clamp(34px, 3vw, 46px) !important;
}

body.petcrm-public-body main.public-page .public-section .public-hero-card p {
    color: var(--hp-soft) !important;
    font-size: 19px !important;
}

/* ---------------------------------------------------------
   Sections / headings
   --------------------------------------------------------- */
body.petcrm-public-body main.public-page .public-section {
    padding: 82px 0;
}

body.petcrm-public-body main.public-page .public-section-muted {
    border: 0;
    background: var(--hp-paper-2) !important;
}

body.petcrm-public-body main.public-page .public-section-heading,
body.petcrm-public-body main.public-page .public-section-head {
    max-width: 860px;
    margin: 0 auto 42px;
    text-align: center;
}

body.petcrm-public-body main.public-page .public-section-heading h2,
body.petcrm-public-body main.public-page .public-section-head h2 {
    margin: 0;
    color: var(--hp-ink) !important;
    font-size: clamp(54px, 3.8vw, 62px);
    line-height: 1.08;
}

body.petcrm-public-body main.public-page .public-section-heading p,
body.petcrm-public-body main.public-page .public-section-head p {
    max-width: 780px;
    margin: 14px auto 0;
    color: var(--hp-soft) !important;
    font-size: 22px;
    line-height: 1.62;
}

body.petcrm-public-body main.public-page .about-impact-heading {
    max-width: 880px;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}

body.petcrm-public-body main.public-page .about-impact-heading p {
    margin-left: 0;
}

/* ---------------------------------------------------------
   Cards / grids / steps
   --------------------------------------------------------- */
body.petcrm-public-body main.public-page .public-card-grid,
body.petcrm-public-body main.public-page .public-audience-grid,
body.petcrm-public-body main.public-page .public-blog-grid,
body.petcrm-public-body main.public-page .public-contact-grid,
body.petcrm-public-body main.public-page .public-metric-grid,
body.petcrm-public-body main.public-page .public-price-grid {
    gap: 18px;
}

body.petcrm-public-body main.public-page .public-card,
body.petcrm-public-body main.public-page .public-audience-card,
body.petcrm-public-body main.public-page .public-blog-card,
body.petcrm-public-body main.public-page .public-contact-card,
body.petcrm-public-body main.public-page .public-metric-card,
body.petcrm-public-body main.public-page .public-price-card,
body.petcrm-public-body main.public-page .public-step,
body.petcrm-public-body main.public-page .public-check-list-large,
body.petcrm-public-body main.public-page .public-faq details,
body.petcrm-public-body main.public-page .public-timeline article {
    border: 1px solid var(--hp-line) !important;
    background: rgba(255,255,255,.95) !important;
    box-shadow: var(--hp-shadow-soft) !important;
}

body.petcrm-public-body main.public-page .public-card,
body.petcrm-public-body main.public-page .public-audience-card {
    display: flex;
    min-height: 238px;
    flex-direction: column;
    padding: 27px 25px;
    border-radius: 24px;
}

body.petcrm-public-body main.public-page .public-card-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: #FFF0E8 !important;
    color: var(--hp-orange) !important;
    font-size: 23px;
}

body.petcrm-public-body main.public-page .public-card h3,
body.petcrm-public-body main.public-page .public-audience-card h3 {
    margin: 0 0 10px;
    color: var(--hp-ink) !important;
}

body.petcrm-public-body main.public-page .public-card p,
body.petcrm-public-body main.public-page .public-audience-card p {
    margin: 0;
    color: var(--hp-soft) !important;
}

body.petcrm-public-body main.public-page .public-link-card > span:last-child {
    margin-top: auto !important;
    padding-top: 18px;
    color: var(--hp-ink) !important;
    transition: color .2s ease;
}

body.petcrm-public-body main.public-page .public-link-card:hover > span:last-child {
    color: var(--hp-orange) !important;
}

body.petcrm-public-body main.public-page .public-link-card:hover,
body.petcrm-public-body main.public-page .public-blog-card:hover,
body.petcrm-public-body main.public-page a.public-contact-card:hover {
    border-color: rgba(255,112,45,.34) !important;
    box-shadow: 0 22px 46px -28px rgba(27,43,34,.44) !important;
}

body.petcrm-public-body main.public-page .public-steps {
    gap: 12px;
}

body.petcrm-public-body main.public-page .public-step {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 15px;
    padding: 20px;
    border-radius: 20px;
}

body.petcrm-public-body main.public-page .public-step b {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--hp-orange), var(--hp-coral)) !important;
}

body.petcrm-public-body main.public-page .public-step strong {
    display: block;
    margin-bottom: 3px;
    color: var(--hp-ink) !important;
}

body.petcrm-public-body main.public-page .public-check-list li::before,
body.petcrm-public-body main.public-page .public-price-list li::before,
body.petcrm-public-body main.public-page .article-checklist li::before,
body.petcrm-public-body main.public-page .lead-benefits li::before {
    color: var(--hp-green) !important;
}

/* CTA is the same warm finishing block across the site. */
body.petcrm-public-body main.public-page .public-cta {
    gap: 30px;
    padding: 38px 42px;
    border: 1px solid #F0D8C9 !important;
    border-radius: 28px;
    background: linear-gradient(110deg, #FFF0DD, #FFE2D4) !important;
    box-shadow: var(--hp-shadow-soft) !important;
}

body.petcrm-public-body main.public-page .public-cta h2 {
    margin: 0 0 8px;
    color: var(--hp-ink) !important;
    font-size: clamp(38px, 3.1vw, 52px);
}

body.petcrm-public-body main.public-page .public-cta p {
    max-width: 760px;
    color: var(--hp-soft) !important;
    font-size: 19px;
    line-height: 1.55;
}

/* ---------------------------------------------------------
   Pricing page (legacy markup had no dedicated layout styles)
   --------------------------------------------------------- */
body.petcrm-public-body main.public-page .pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 1040px;
    margin: 0 auto;
    align-items: stretch;
}

body.petcrm-public-body main.public-page .pricing-card {
    display: flex;
    min-width: 0;
    min-height: 100%;
    flex-direction: column;
    padding: 34px;
    border: 1px solid var(--hp-line);
    border-radius: 28px;
    background: #fff;
    box-shadow: var(--hp-shadow-soft);
}

body.petcrm-public-body main.public-page .pricing-card.featured {
    border-color: rgba(255,112,45,.34);
    background: linear-gradient(145deg, #fff, #FFF5ED);
    box-shadow: 0 22px 52px -30px rgba(255,112,45,.38);
}

body.petcrm-public-body main.public-page .pricing-card h2 {
    margin: 0 0 18px;
    color: var(--hp-ink);
    font-size: clamp(46px, 4vw, 62px);
    line-height: 1.04;
}

body.petcrm-public-body main.public-page .pricing-card h2 small {
    font-family: 'Yanone Kaffeesatz', Arial, sans-serif;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--hp-soft);
}

body.petcrm-public-body main.public-page .pricing-card > p {
    margin: 0 0 22px;
    color: var(--hp-soft);
    font-size: 20px;
    line-height: 1.58;
}

body.petcrm-public-body main.public-page .pricing-card .public-check-list {
    margin-bottom: 28px;
}

body.petcrm-public-body main.public-page .pricing-card .btn {
    width: 100%;
    margin-top: auto;
}

/* ---------------------------------------------------------
   Blog index + articles
   --------------------------------------------------------- */
body.petcrm-public-body main.public-page .public-blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.petcrm-public-body main.public-page .public-blog-card {
    display: flex;
    min-height: 250px;
    flex-direction: column;
    padding: 29px;
    border-radius: 24px;
}

body.petcrm-public-body main.public-page .public-blog-card > span {
    color: var(--hp-orange) !important;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .025em;
    text-transform: none;
}

body.petcrm-public-body main.public-page .public-blog-card h2,
body.petcrm-public-body main.public-page .public-blog-card h3 {
    margin: 12px 0 11px;
    color: var(--hp-ink) !important;
}

body.petcrm-public-body main.public-page .public-blog-card p {
    color: var(--hp-soft) !important;
}

body.petcrm-public-body main.article-page {
    background: var(--hp-paper) !important;
}

body.petcrm-public-body main.article-page > .public-section {
    padding-top: 34px;
}

body.petcrm-public-body main.article-page .article-meta {
    gap: 10px 22px;
    margin-top: 23px;
    color: var(--hp-sage) !important;
    font-size: 16px;
}

body.petcrm-public-body main.article-page .article-content,
body.petcrm-public-body main.article-page .article-toc,
body.petcrm-public-body main.article-page .article-sidebar-card {
    border-color: var(--hp-line) !important;
    background: #fff !important;
    box-shadow: var(--hp-shadow-soft) !important;
}

body.petcrm-public-body main.article-page .article-content {
    border-radius: 28px;
}

body.petcrm-public-body main.article-page .article-content h2,
body.petcrm-public-body main.article-page .article-content h3 {
    color: var(--hp-ink) !important;
}

body.petcrm-public-body main.article-page .article-content p,
body.petcrm-public-body main.article-page .article-content li {
    color: var(--hp-soft) !important;
}

body.petcrm-public-body main.article-page .article-content a:not(.btn) {
    color: #D95F28;
    text-decoration: underline;
    text-decoration-color: rgba(217,95,40,.26);
    text-underline-offset: .16em;
}

body.petcrm-public-body main.article-page .article-content a:not(.btn):hover {
    color: var(--hp-orange);
    text-decoration-color: currentColor;
}

body.petcrm-public-body main.article-page .article-note {
    border-left-color: var(--hp-orange) !important;
    background: #FFF4EC !important;
}

body.petcrm-public-body main.article-page .article-toc a {
    color: var(--hp-soft) !important;
}

body.petcrm-public-body main.article-page .article-toc a:hover {
    color: var(--hp-orange) !important;
}

/* Native tables in older articles get the same treatment as newer tables. */
body.petcrm-public-body main.article-page .article-content table {
    width: 100%;
    border-collapse: collapse;
}

body.petcrm-public-body main.article-page .article-content th,
body.petcrm-public-body main.article-page .article-content td {
    border-color: var(--hp-line);
}

/* ---------------------------------------------------------
   Contacts / form
   --------------------------------------------------------- */
body.petcrm-public-body main.public-page .lead-layout {
    grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
    gap: 46px;
}

body.petcrm-public-body main.public-page .lead-benefits {
    gap: 11px;
}

body.petcrm-public-body main.public-page .lead-benefits li {
    padding: 15px 18px 15px 48px;
    border-color: var(--hp-line) !important;
    border-radius: 17px;
    background: rgba(255,255,255,.88) !important;
    color: var(--hp-soft) !important;
}

body.petcrm-public-body main.public-page .lead-form-card {
    padding: clamp(28px, 4vw, 42px);
    border-color: var(--hp-line) !important;
    border-radius: 28px;
    background: #fff !important;
    box-shadow: var(--hp-shadow) !important;
}

body.petcrm-public-body main.public-page .lead-field input,
body.petcrm-public-body main.public-page .lead-field select,
body.petcrm-public-body main.public-page .lead-field textarea {
    border-color: var(--hp-line) !important;
    border-radius: 14px;
    background: #FBFCF9 !important;
    color: var(--hp-ink) !important;
}

body.petcrm-public-body main.public-page .lead-field input:focus,
body.petcrm-public-body main.public-page .lead-field select:focus,
body.petcrm-public-body main.public-page .lead-field textarea:focus {
    border-color: rgba(255,112,45,.62) !important;
    box-shadow: 0 0 0 4px rgba(255,112,45,.10) !important;
}

/* ---------------------------------------------------------
   Contact cards / FAQ / privacy / success
   --------------------------------------------------------- */
body.petcrm-public-body main.public-page .public-contact-card {
    padding: 27px;
    border-radius: 24px;
}

body.petcrm-public-body main.public-page .public-faq {
    max-width: 920px;
    gap: 12px;
}

body.petcrm-public-body main.public-page .public-faq details {
    border-radius: 18px;
}

body.petcrm-public-body main.public-page .lead-thanks-card {
    border-color: var(--hp-line) !important;
    background: #fff !important;
    box-shadow: var(--hp-shadow) !important;
}

body.petcrm-public-body main.public-page .lead-thanks-icon {
    background: #E1F0DC !important;
    color: #28592B !important;
}

body.petcrm-public-body main.privacy-page .privacy-layout {
    gap: 28px;
}

body.petcrm-public-body main.privacy-page .privacy-nav,
body.petcrm-public-body main.privacy-page .privacy-document {
    border-color: var(--hp-line) !important;
    border-radius: 24px;
    box-shadow: var(--hp-shadow-soft) !important;
}

/* ---------------------------------------------------------
   New SEO landing pages: do not redesign them, just normalize
   shared width and label rhythm. Their own visuals remain intact.
   --------------------------------------------------------- */
body.petcrm-public-body main[class*="seo-"] .public-eyebrow {
    margin-bottom: 16px;
}

/* ---------------------------------------------------------
   Responsive rhythm
   --------------------------------------------------------- */
@media (max-width: 1050px) {
    body.petcrm-public-body main.public-page .public-hero-grid {
        grid-template-columns: 1fr;
    }

    body.petcrm-public-body main.public-page .public-hero .public-hero-card {
        min-height: 0;
        max-width: 760px;
    }

    body.petcrm-public-body main.public-page .public-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    body.petcrm-public-body main.public-page .container {
        width: min(1220px, calc(100% - 40px));
    }

    body.petcrm-public-body main.public-page .public-hero {
        padding: 44px 0 60px;
    }

    body.petcrm-public-body main.public-page .public-hero h1 {
        font-size: clamp(56px, 9vw, 76px);
    }

    body.petcrm-public-body main.public-page .public-section {
        padding: 68px 0;
    }

    body.petcrm-public-body main.public-page .pricing-grid,
    body.petcrm-public-body main.public-page .lead-layout {
        grid-template-columns: 1fr;
    }

    body.petcrm-public-body main.public-page .lead-layout {
        gap: 34px;
    }
}

@media (max-width: 700px) {
    body.petcrm-public-body main.public-page .public-card-grid,
    body.petcrm-public-body main.public-page .public-audience-grid,
    body.petcrm-public-body main.public-page .public-contact-grid,
    body.petcrm-public-body main.public-page .public-blog-grid,
    body.petcrm-public-body main.public-page .public-metric-grid,
    body.petcrm-public-body main.public-page .public-price-grid,
    body.petcrm-public-body main.public-page .public-steps-horizontal {
        grid-template-columns: 1fr;
    }

    body.petcrm-public-body main.public-page .public-card,
    body.petcrm-public-body main.public-page .public-audience-card,
    body.petcrm-public-body main.public-page .public-blog-card {
        min-height: 0;
    }

    body.petcrm-public-body main.public-page .public-section-heading,
    body.petcrm-public-body main.public-page .public-section-head {
        margin-bottom: 32px;
        text-align: left;
    }

    body.petcrm-public-body main.public-page .public-section-heading p,
    body.petcrm-public-body main.public-page .public-section-head p {
        margin-left: 0;
    }

    body.petcrm-public-body main.public-page .public-cta {
        align-items: stretch;
        flex-direction: column;
        padding: 30px 24px;
    }

    body.petcrm-public-body main.public-page .public-cta > .btn,
    body.petcrm-public-body main.public-page .public-cta-actions .btn {
        width: 100%;
    }
}

@media (max-width: 640px) {
    body.petcrm-public-body main.public-page .container {
        width: calc(100% - 32px);
    }

    body.petcrm-public-body main.public-page .public-hero {
        padding: 34px 0 52px;
    }

    body.petcrm-public-body main.public-page .public-hero-grid {
        gap: 28px;
    }

    body.petcrm-public-body main.public-page .public-hero h1 {
        margin-bottom: 16px;
        font-size: clamp(45px, 12vw, 60px);
        line-height: 1.08;
    }

    body.petcrm-public-body main.public-page .public-hero-grid > div:first-child > p,
    body.petcrm-public-body main.public-page .public-hero > .container > p {
        font-size: 20px;
        line-height: 1.58;
    }

    body.petcrm-public-body main.public-page .public-hero .public-hero-card {
        padding: 25px 22px;
        border-radius: 24px;
    }

    body.petcrm-public-body main.public-page .public-hero .public-hero-card strong {
        font-size: 32px !important;
    }

    body.petcrm-public-body main.public-page .public-section {
        padding: 58px 0;
    }

    body.petcrm-public-body main.public-page .public-section-heading h2,
    body.petcrm-public-body main.public-page .public-section-head h2 {
        font-size: clamp(42px, 12vw, 54px);
    }

    body.petcrm-public-body main.public-page .public-section-heading p,
    body.petcrm-public-body main.public-page .public-section-head p {
        font-size: 19px;
    }

    body.petcrm-public-body main.public-page .public-card,
    body.petcrm-public-body main.public-page .public-audience-card,
    body.petcrm-public-body main.public-page .public-blog-card,
    body.petcrm-public-body main.public-page .public-contact-card,
    body.petcrm-public-body main.public-page .pricing-card {
        padding: 22px 20px;
        border-radius: 20px;
    }

    body.petcrm-public-body main.public-page .public-actions .btn,
    body.petcrm-public-body main.public-page .public-hero-actions .btn {
        width: 100%;
    }

    body.petcrm-public-body main.article-page > .public-section {
        padding-top: 26px;
    }
}

@media (max-width: 430px) {
    body.petcrm-public-body main.public-page .container {
        width: calc(100% - 24px);
    }

    body.petcrm-public-body main.public-page .public-hero h1 {
        font-size: clamp(42px, 13vw, 55px);
    }

    body.petcrm-public-body main.public-page .public-cta {
        padding: 26px 20px;
        border-radius: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.petcrm-public-body main.public-page *,
    body.petcrm-public-body main.public-page *::before,
    body.petcrm-public-body main.public-page *::after {
        scroll-behavior: auto !important;
    }
}


/* Features cards: match homepage card-link behavior. */
body.petcrm-public-body main.public-page .public-card-more {
    display: inline-block;
    margin-top: auto !important;
    padding-top: 18px;
    font-weight: 800;
    color: var(--hp-ink) !important;
    transition: color .2s ease;
}
body.petcrm-public-body main.public-page .public-link-card:hover .public-card-more {
    color: var(--hp-orange) !important;
}