/* Shared public-page rhythm. Admin screens use their own layout. */
.cch-public-content {
    --page-section-space: 24px;
    --page-heading-gap: 24px;
    --page-detail-gap: 32px;
    --page-h1: clamp(28px, 7vw, 36px);
    --page-h2: clamp(24px, 6vw, 30px);
    --page-h3: 20px;
}
body, .site-header, footer,
.cch-public-content :where(div,section,article,aside,nav,form,h1,h2,h3,h4,h5,h6,p,li,a,label,button,input,select,textarea,span,strong,em,td,th,summary) {
    font-family: 'Poppins', sans-serif !important;
}
.cch-public-content :is(pre,code,kbd,samp) { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; }
.cch-public-content :is(h1,h2,h3,h4,h5,h6) { font-weight: 700; overflow-wrap: anywhere; }
.cch-public-content h1:not(.inline-flex) { font-size: var(--page-h1) !important; line-height: 1.2 !important; }
.cch-public-content h2 { font-size: var(--page-h2) !important; line-height: 1.3 !important; }
.cch-public-content h3 { font-size: var(--page-h3) !important; line-height: 1.35 !important; }
.cch-public-content h4 { font-size: 18px !important; line-height: 1.4 !important; }
.cch-public-content :is(h5,h6) { font-size: 16px !important; line-height: 1.45 !important; }
.cch-public-content .cch-page-hero .cch-hero-title { font-size: var(--page-h1) !important; line-height: 1.2 !important; }
.cch-public-content .cch-page-hero h1.inline-flex { font-size: 13px !important; line-height: 1.5 !important; }
.cch-public-content .cch-page-section {
    padding-top: var(--page-section-space) !important;
    padding-bottom: var(--page-section-space) !important;
}
.cch-public-content:not(.cch-domain-page) .cch-page-section {
    background-color: #fff !important;
    background-image: none !important;
}
/* Large decorative overlays belong to heroes; keep subsequent page canvases white. */
.cch-public-content:not(.cch-domain-page) .cch-page-section > :is(.absolute.inset-0, .hero-glow, .ambient-orb, .blob-1, .blob-2) { display: none !important; }
.cch-public-content .cch-page-section > :is(.container,.nj-wrap,.wcm-wrap,.max-w-3xl,.max-w-4xl,.max-w-5xl,.max-w-6xl,.max-w-7xl) > :is(.mb-10,.mb-12,.mb-14,.mb-16,.mb-20) {
    margin-bottom: var(--page-heading-gap) !important;
}
.cch-public-content .cch-page-section > :is(.container,.nj-wrap,.wcm-wrap,.max-w-3xl,.max-w-4xl,.max-w-5xl,.max-w-6xl,.max-w-7xl) > :is(.mt-12,.mt-16,.mt-20,.mt-24) {
    margin-top: var(--page-detail-gap) !important;
}
/* The articles have a separate compact reading layout, without padded content cards. */
.cch-public-content .cch-article-page .cch-page-section { padding-block: revert-layer !important; }
.cch-public-content .cch-article-page .article-author-card { padding: 24px !important; }
.cch-public-content .cch-article-page .article-feedback { padding-block: 24px !important; }
.cch-public-content .cch-article-page .article-related { padding-top: 32px !important; }
@media(min-width:768px) {
 .cch-public-content { --page-section-space:32px; --page-heading-gap:28px; --page-detail-gap:36px; --page-h1:40px; --page-h2:32px; --page-h3:22px; }
}
@media(min-width:1024px) {
 .cch-public-content { --page-section-space:40px; --page-heading-gap:32px; --page-detail-gap:40px; --page-h1:48px; --page-h2:36px; --page-h3:24px; }
}

.cch-contrast-adjusted { transition-property: background-color, border-color, box-shadow, transform !important; }
.cch-public-content:not(.cch-domain-page),
.cch-public-content:not(.cch-domain-page) > div,
.cch-public-content:not(.cch-domain-page) :is(.nj-page,.wcm-page) { background-color:#fff !important; }
.cch-public-content [class*="fa-"]:not(i) { font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important; }

/* Reading pages do not need a full-height marketing hero. */
.cch-public-content .cch-policy-page { padding-block:var(--page-section-space) !important; }
.cch-public-content .cch-policy-page .prose > section { padding-bottom:0 !important; margin-top:var(--page-detail-gap) !important; }
@media(max-width:639px) {
 .cch-public-content .security-status-metrics { gap:12px; }
 .cch-public-content .security-status-metrics > div { padding:16px; min-width:0; }
 .cch-public-content .security-status-metrics .text-3xl { font-size:clamp(18px,5vw,24px); overflow-wrap:anywhere; }
 .cch-public-content .cch-policy-page .prose { overflow-wrap:anywhere; }
 .cch-public-content .cch-policy-page :is(.md\:col-span-3,.lg\:col-span-3) { padding:20px; }
}

body:has(.cch-public-content:not(.cch-domain-page)) footer { background-color:#fff !important; background-image:none !important; }
/* Keep the brand-blue button labels white across desktop and mobile navigation. */
:is(.site-header,.cch-public-content) :is(.cch-btn,.btn-accent,.btn-primary,a.bg-primary,button.bg-primary,a.bg-primary-hover,button.bg-primary-hover),
:is(.site-header,.cch-public-content) :is(.cch-btn,.btn-accent,.btn-primary,a.bg-primary,button.bg-primary,a.bg-primary-hover,button.bg-primary-hover) :is(span,strong,em) { color:#fff !important; }

/* Plan savings and featured pills follow the same white-on-blue style. */
.cch-public-content .discount-badge { background-color:#0ea5e9 !important; }
.cch-public-content :is(.discount-badge,.discount-badge *, .plan-card > .absolute.top-0 span) { color:#fff !important; }
/* Hero savings badge uses a soft green treatment. */
.cch-public-content .hero-discount-badge {
    background-color:#dcfce7 !important;
    color:#166534 !important;
}
.cch-public-content .hero-discount-badge :is(span,strong,em) { color:#166534 !important; }

/* Hero copy stays left-aligned; actions center only on phones. */
.cch-public-content .hosting-hero-copy,
.cch-public-content .hosting-hero-copy :is(h1,h2,p,ul) { text-align:left !important; }
.cch-public-content .hosting-hero-copy > :is(h1,h2,p,ul) { margin-inline:0 !important; }
.cch-public-content .hosting-hero-price { display:flex; justify-content:flex-start !important; flex-wrap:wrap; }
.cch-public-content .hosting-hero-actions { display:flex; width:100%; align-items:center; justify-content:center !important; }
.cch-public-content .hosting-hero-actions > a { width:auto !important; max-width:100%; text-align:center !important; }

/* One top inset on phones: do not stack section and inner-wrapper spacing. */
@media (max-width: 767px) {
    .cch-public-content .cch-page-hero {
        padding-top: 24px !important;
        height: auto !important;
        min-height: 0 !important;
    }
    .cch-public-content .cch-page-hero > :is(.container,.nj-wrap,.wcm-wrap,[class*="max-w-"]) {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    .cch-public-content .cch-page-hero :is(.hosting-hero-copy,h1,.cch-hero-title) {
        margin-top: 0 !important;
    }
}

/* VPS benefits cards fit narrow phones without squeezing the terminal artwork. */
@media (max-width: 767px) {
    .cch-public-content .vps-benefits-grid { grid-template-columns:minmax(0,1fr); gap:20px; }
    .cch-public-content .vps-benefits-grid > div { min-width:0; padding:20px; border-radius:20px; gap:20px; }
    .cch-public-content .vps-benefits-grid > div > div { min-width:0; max-width:100%; }
    .cch-public-content .vps-benefits-grid img { width:180px; max-width:80%; margin-inline:auto; }
    .cch-public-content .vps-benefits-grid .h-48 { height:auto; min-height:0; flex-grow:0; margin-bottom:0; }
    .cch-public-content .vps-benefits-terminal { width:100%; max-width:280px; }
    .cch-public-content .vps-benefits-terminal .flex { flex-wrap:wrap; }
    .cch-public-content .vps-benefits-terminal :is(div,span) { font-size:12px !important; overflow-wrap:anywhere; }
    .cch-public-content .vps-benefits-terminal .font-mono { padding:12px; }
    .cch-public-content .vps-benefits-grid .mt-auto { margin-top:0; }
    .cch-public-content .vps-benefits > .container > h2 { margin-bottom:24px; }
}

/* Domain search keeps the field left-aligned and centers its action below it. */
.cch-public-content .domain-hero .search-wrap { margin-inline:0; }
.cch-public-content .domain-hero #domainSearchForm { display:flex; flex-direction:column; gap:16px; align-items:center; }
.cch-public-content .domain-hero .search-input { padding-inline:24px; text-align:left; }
.cch-public-content .domain-hero .search-btn { position:static; width:auto; max-width:100%; padding:16px 24px; text-align:center; }

@media (min-width: 768px) {
    .cch-public-content .hosting-hero-actions {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start !important;
        align-items: center;
    }
    .cch-public-content .hosting-hero-actions > .self-start { align-self: center; }
    .cch-public-content .domain-hero #domainSearchForm { align-items: flex-start; }
}