/* Public site styles */

/* Defaults only: :where() has zero specificity, so the Theme Studio tokens
   (--bg, --text, --accent ... on a plain :root) win even though this file
   loads after them. */
:where(:root) {
    --bg: #ffffff;
    --surface: #f8fafc;
    --border: #e2e8f0;
    --text: #1e293b;
    --text-muted: #64748b;
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --anchor-scroll-offset: clamp(120px, 16vw, 168px);
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
    --max-width: 800px;
}

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

html { font-size: 16px; -webkit-font-smoothing: antialiased; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header */
.site-header {
    background: var(--header-bg, var(--bg));
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 50;
}

.site-header-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-logo {
    font-size: 20px;
    font-weight: 700;
    color: var(--header-text, var(--text));
    text-decoration: none;
    letter-spacing: -0.02em;
}

.site-nav a {
    color: var(--nav-text, var(--text-muted));
    text-decoration: none;
    font-size: 15px;
    margin-left: 24px;
    transition: color 0.15s;
}
.site-nav a:hover { color: var(--nav-hover, var(--accent)); }
.site-nav a.active { color: var(--nav-active, var(--text)); font-weight: 500; }

/* Hamburger button (hidden on desktop) */
.nav-hamburger {
    display: none;
    border: none;
    background: none;
    cursor: pointer;
    padding: 8px;
    width: 44px;
    height: 44px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    z-index: 60;
}
.nav-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--header-text, var(--text));
    border-radius: 2px;
    transition: transform 0.25s, opacity 0.2s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav */
@media (max-width: 768px) {
    .nav-hamburger { display: flex; }

    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--header-bg, var(--bg));
        border-bottom: 1px solid var(--border);
        padding: 12px 0;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        flex-direction: column;
    }
    .site-nav.open { display: flex; }
    .site-nav a {
        margin: 0;
        padding: 14px 24px;
        font-size: 16px;
        border-bottom: 1px solid var(--border);
    }
    .site-nav a:last-child { border-bottom: none; }
    .site-nav a:active { background: var(--surface); }

    .site-header { position: relative; }
    .site-header-inner { padding: 12px 16px; }

    /* Global mobile overflow prevention — public pages */
    html, body { overflow-x: hidden; max-width: 100vw; }

    /* Admin toolbar on public pages */
    #liqAdminToolbar { max-width: 100vw; overflow-x: hidden; }
    #liqAdminToolbar > div { overflow-x: auto; }

    /* Grid containers on the marketing homepage use 1fr but their
       children's min-content width can push the track wider than
       the viewport. Force grid items to shrink. */
    .founder-grid,
    .industry-grid,
    .btf-grid,
    .demo-strip,
    .eco-grid,
    .ai-grid,
    .hero-proof-grid,
    .hero-chip-row,
    .stats-row,
    .funnel-breadcrumbs {
        grid-template-columns: 1fr !important;
    }
    .founder-grid > *,
    .industry-grid > *,
    .btf-grid > *,
    .demo-strip > *,
    .eco-grid > *,
    .ai-grid > *,
    .hero-proof-grid > *,
    .stats-row > * {
        min-width: 0;
        max-width: 100%;
    }
    /* Bonus belt-and-suspenders: any fixed-width img that exceeds
       viewport snaps to fit. */
    img {
        max-width: 100%;
        height: auto;
    }
}

/* Main */
.site-main {
    flex: 1;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 48px 24px;
    width: 100%;
}

/* Article */
.page-article h1 {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
    color: var(--text);
}

.page-content {
    font-size: 17px;
    line-height: 1.8;
    color: #334155;
}

/* Constrain block-mode content (home, pests, etc.) to a centered readable column.
   Wide cards/sections inside can still break out using their own width if needed. */
.page-content--blocks {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 24px;
}
.page-content--blocks > h1,
.page-content--blocks > h2,
.page-content--blocks > p:first-of-type,
.page-content--blocks > p:nth-of-type(2) {
    text-align: center;
}
.page-content--blocks > h2 {
    margin-top: 48px;
}

/* Home page renders blocks directly inside <main class="site-main"> with no
   .page-content wrapper. Constrain prose-level direct children to a centered
   readable column. Smart blocks (pest grid, town grid, etc.) render as
   <div>, <section>, or <aside> and are intentionally NOT covered by this rule.

   Accordion and button blocks render as bare <div> at the top level too
   (block editor "accordion"/"button" -> render.rs), so on /pests the FAQ
   dropdowns and the closing CTA sat flush against the viewport edge on
   desktop while the "When to call" heading above them was already inset.
   The child combinator keeps accordions nested inside a .container
   untouched, so nothing gets double padding. */
.site-main > p,
.site-main > h1,
.site-main > h2,
.site-main > h3,
.site-main > ul,
.site-main > ol,
.site-main > blockquote,
.site-main > pre,
.site-main > table,
.site-main > .accordion,
.site-main > .btn-wrap {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}
.site-main > h1,
.site-main > h2,
.site-main > h3 {
    text-align: center;
}
.site-main > p:first-of-type,
.site-main > p:nth-of-type(2) {
    text-align: center;
}

.page-content h2 {
    font-size: 24px;
    font-weight: 600;
    margin: 40px 0 16px;
    color: var(--text);
}

.page-content h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 32px 0 12px;
    color: var(--text);
}

.page-content :is(h1, h2, h3, h4, h5, h6)[id] {
    scroll-margin-top: var(--anchor-scroll-offset);
}

.page-content :is(h1, h2, h3, h4, h5, h6)[id]:target {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.14), rgba(37, 99, 235, 0.04) 72%, transparent);
    box-shadow: inset 4px 0 0 var(--luperiq-link, var(--accent));
    border-radius: 14px;
    margin-inline: -16px;
    padding-inline: 16px;
}

.page-content p {
    margin-bottom: 16px;
}

.page-content a {
    color: var(--luperiq-link, var(--accent));
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.page-content a:hover {
    color: var(--luperiq-accent-hover, var(--accent-hover));
}

.page-content ul, .page-content ol {
    margin: 16px 0;
    padding-left: 24px;
}

.page-content li {
    margin-bottom: 8px;
}

.page-content [data-anchor-nav] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding-left: 0;
}

.page-content [data-anchor-nav] li {
    margin-bottom: 0;
}

.page-content [data-anchor-nav] a {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    display: inline-flex;
    min-height: 44px;
    padding: 10px 14px;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.page-content [data-anchor-nav] a:hover {
    background: #ffffff;
    border-color: rgba(37, 99, 235, 0.35);
    color: var(--text);
    transform: translateY(-1px);
}

.page-content [data-anchor-nav] a.is-anchor-current {
    background: rgba(37, 99, 235, 0.12);
    border-color: rgba(37, 99, 235, 0.32);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.14);
    color: var(--text);
    font-weight: 600;
}

.page-content blockquote {
    border-left: 3px solid var(--accent);
    padding: 12px 20px;
    margin: 24px 0;
    background: var(--surface);
    border-radius: 0 6px 6px 0;
    color: var(--text-muted);
    font-style: italic;
}

.page-content pre {
    background: var(--code-bg, #0f172a);
    color: var(--code-text, #e2e8f0);
    padding: 20px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 24px 0;
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.6;
}

.page-content code {
    font-family: var(--mono);
    background: var(--surface);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

.page-content pre code {
    background: transparent;
    padding: 0;
}

.page-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 24px 0;
}

.page-content hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 40px 0;
}

.page-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
}

.page-content th, .page-content td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.page-content th {
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

@media (max-width: 760px) {
    .page-content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .page-content table::-webkit-scrollbar {
        display: none;
    }

    .page-content [style*="grid-template-columns:repeat(3,1fr)"],
    .page-content [style*="grid-template-columns: repeat(3,1fr)"],
    .page-content [style*="grid-template-columns: repeat(3, 1fr)"],
    .page-content [style*="grid-template-columns:repeat(2,1fr)"],
    .page-content [style*="grid-template-columns: repeat(2,1fr)"],
    .page-content [style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
    }

    .page-content [style*="display:flex"]:has(> input[style], > textarea[style], > select[style]) {
        flex-direction: column !important;
    }

    .page-content [style*="display:flex"]:has(> input[style], > textarea[style], > select[style]) > * {
        width: 100%;
    }
}

@media (max-width: 760px) {
    html[data-site-host="creator-demo-luperiq-com"] .page-content [style*="grid-template-columns:repeat(4,1fr)"],
    html[data-site-host="creator-demo-luperiq-com"] .page-content [style*="grid-template-columns: repeat(4,1fr)"],
    html[data-site-host="creator-demo-luperiq-com"] .page-content [style*="grid-template-columns: repeat(4, 1fr)"] {
        display: grid !important;
        grid-template-columns: none !important;
        grid-auto-flow: column;
        grid-auto-columns: minmax(248px, 78vw);
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        padding-bottom: 8px;
    }

    html[data-site-host="creator-demo-luperiq-com"] .page-content [style*="grid-template-columns:repeat(4,1fr)"]::-webkit-scrollbar,
    html[data-site-host="creator-demo-luperiq-com"] .page-content [style*="grid-template-columns: repeat(4,1fr)"]::-webkit-scrollbar,
    html[data-site-host="creator-demo-luperiq-com"] .page-content [style*="grid-template-columns: repeat(4, 1fr)"]::-webkit-scrollbar {
        display: none;
    }

    html[data-site-host="creator-demo-luperiq-com"] .page-content [style*="grid-template-columns:repeat(4,1fr)"] > *,
    html[data-site-host="creator-demo-luperiq-com"] .page-content [style*="grid-template-columns: repeat(4,1fr)"] > *,
    html[data-site-host="creator-demo-luperiq-com"] .page-content [style*="grid-template-columns: repeat(4, 1fr)"] > * {
        min-width: 0;
        scroll-snap-align: start;
    }

    html[data-site-host="family-demo-luperiq-com"] .page-content [style*="grid-template-columns:repeat(3,1fr)"],
    html[data-site-host="family-demo-luperiq-com"] .page-content [style*="grid-template-columns: repeat(3,1fr)"],
    html[data-site-host="family-demo-luperiq-com"] .page-content [style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 520px) {
    html[data-site-host="family-demo-luperiq-com"] .page-content [style*="grid-template-columns:repeat(3,1fr)"],
    html[data-site-host="family-demo-luperiq-com"] .page-content [style*="grid-template-columns: repeat(3,1fr)"],
    html[data-site-host="family-demo-luperiq-com"] .page-content [style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
}

/* Blog listing */
.blog-listing h1 {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 32px;
    color: var(--text);
}

.blog-card {
    padding: 24px 0;
    border-bottom: 1px solid var(--border);
}

.blog-card:last-child { border-bottom: none; }

.blog-card h2 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 4px;
}

.blog-card h2 a {
    color: var(--text);
    text-decoration: none;
}
.blog-card h2 a:hover { color: var(--accent); }

.blog-date {
    font-size: 13px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 8px;
}

.blog-excerpt {
    color: #475569;
    line-height: 1.6;
}

.blog-empty {
    color: var(--text-muted);
    padding: 40px 0;
    text-align: center;
}

.blog-post-date {
    font-size: 14px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 32px;
}

.blog-post-nav {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.blog-post-nav a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
}
.blog-post-nav a:hover { text-decoration: underline; }

/* 404 */
.error-page {
    text-align: center;
    padding: 80px 20px;
}

.error-page h1 {
    font-size: 72px;
    color: var(--border);
    margin-bottom: 8px;
}

.error-subtitle {
    font-size: 22px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.error-detail {
    color: var(--text-muted);
    font-size: 15px;
    margin-bottom: 24px;
}

.error-detail code {
    font-family: var(--mono);
    background: var(--surface);
    padding: 2px 8px;
    border-radius: 4px;
}

.btn-link {
    color: var(--luperiq-link, var(--accent));
    text-decoration: none;
    font-weight: 500;
}
.btn-link:hover { text-decoration: underline; }

/* Footer */
.site-footer {
    border-top: 1px solid var(--border);
    background: var(--footer-bg, var(--surface));
}

.site-footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 24px;
    text-align: center;
    color: var(--footer-text, var(--text-muted));
    font-size: 13px;
}

.site-footer-columns {
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    padding: 40px 24px 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.site-footer-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.site-footer-col strong {
    color: var(--footer-text, var(--text));
    font-size: 14px;
    margin-bottom: 4px;
}

.site-footer-col a {
    color: var(--footer-text, var(--text-muted));
    text-decoration: none;
    font-size: 13px;
}

.site-footer-col a:hover {
    color: var(--accent, #3b82f6);
    text-decoration: underline;
}

.site-footer-legal {
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    padding: 16px 24px 24px;
    border-top: 1px solid var(--border, #e2e8f0);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    font-size: 12px;
    color: var(--footer-text, var(--text-muted));
}

.site-footer-legal a {
    color: var(--footer-text, var(--text-muted));
    text-decoration: none;
}

.site-footer-legal a:hover {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .site-footer-columns {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px 16px 16px;
    }
    .site-footer-legal {
        padding: 12px 16px 16px;
        justify-content: center;
        text-align: center;
    }
}

/* Products */
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; padding: 20px 0; }
.product-card { background: var(--luperiq-surface, #fff); border: 1px solid var(--luperiq-border, #e2e8f0); border-radius: 8px; padding: 20px; transition: box-shadow 0.2s; }
.product-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.product-card h2 { font-size: 1.1rem; margin: 12px 0 8px; }
.product-card h2 a { color: inherit; text-decoration: none; }
.product-card h2 a:hover { color: var(--luperiq-primary, #3b82f6); }
.product-card-image { width: 100%; height: 180px; object-fit: cover; border-radius: 6px; }
.product-card-desc { color: var(--luperiq-muted, #64748b); font-size: 0.9rem; margin: 8px 0; }
.product-card-price { font-size: 1.25rem; font-weight: 700; color: var(--luperiq-primary, #3b82f6); }
.product-cat-badge { display: inline-block; background: var(--luperiq-primary, #3b82f6); color: #fff; font-size: 0.75rem; padding: 2px 8px; border-radius: 12px; margin: 4px 4px 0 0; }
.product-single { max-width: 800px; margin: 0 auto; padding: 20px; }
.product-single-image { width: 100%; max-height: 400px; object-fit: cover; border-radius: 8px; margin-bottom: 20px; }
.product-single-price { font-size: 1.5rem; font-weight: 700; color: var(--luperiq-primary, #3b82f6); margin: 16px 0; }
.product-description { line-height: 1.7; }

/* ── Product sale pricing + buy buttons ──────────────────────── */
.product-price-wrap { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.product-price-original { text-decoration: line-through; color: var(--luperiq-muted, #94a3b8); font-weight: 600; }
.product-price-sale { color: #dc2626; font-weight: 800; }
.product-sale-badge { display: inline-block; background: #dc2626; color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
.product-single-price .product-price-original { font-size: 1.1rem; }
.product-card-price .product-price-original { font-size: 1rem; }
.product-buy { margin: 20px 0 8px; }
.product-card-buy { margin-top: 12px; }
.btn-buy { display: inline-block; padding: 12px 28px; border-radius: 6px; font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; border: none; background: var(--luperiq-primary, #3b82f6); color: #fff; transition: filter 0.15s ease, box-shadow 0.15s ease; }
.btn-buy:hover { filter: brightness(0.94); box-shadow: 0 4px 14px rgba(0,0,0,0.12); }
.btn-buy-sm { padding: 8px 16px; font-size: 13px; width: 100%; text-align: center; }
.btn-buy[disabled], .btn-buy:disabled { opacity: 0.6; cursor: default; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-wrap { margin: 24px 0; }
.btn-wrap.align-center { text-align: center; }
.btn-wrap.align-right { text-align: right; }
.btn-wrap.align-left { text-align: left; }

.btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
    line-height: 1.4;
}

.btn,
a.btn,
button.btn {
    text-decoration: none;
}

.btn-primary,
a.btn-primary,
button.btn-primary,
.page-content a.btn-primary {
    background: var(--luperiq-accent, var(--accent));
    color: var(--luperiq-button-text, #ffffff);
}
.btn-primary:hover,
.btn-primary:focus,
.page-content a.btn-primary:hover,
.page-content a.btn-primary:focus {
    background: var(--luperiq-accent-hover, var(--accent-hover));
    color: var(--luperiq-button-text, #ffffff);
}
.btn-primary:visited,
.page-content a.btn-primary:visited {
    color: var(--luperiq-button-text, #ffffff);
}

.btn-outline {
    background: transparent;
    color: var(--luperiq-accent, var(--accent));
    border: 2px solid var(--luperiq-accent, var(--accent));
}
.btn-outline:hover,
.page-content a.btn-outline:hover {
    background: var(--luperiq-accent, var(--accent));
    color: var(--luperiq-button-text, #ffffff);
}
.page-content a.btn,
.page-content a.btn:hover,
.page-content a.btn:focus,
.page-content a.btn:visited {
    text-decoration: none;
}
.page-content a.btn,
.page-content button.btn {
    border-radius: 999px;
    border: 1px solid transparent;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}
.page-content a.btn-primary,
.page-content button.btn-primary {
    box-shadow: 0 14px 26px rgba(37, 99, 235, 0.2);
}
.page-content a.btn-outline,
.page-content button.btn-outline {
    background: #ffffff;
    color: var(--luperiq-accent, var(--accent));
    border-color: rgba(37, 99, 235, 0.28);
}
.page-content a.btn-outline:hover,
.page-content a.btn-outline:focus,
.page-content button.btn-outline:hover,
.page-content button.btn-outline:focus {
    background: #eff6ff;
    color: var(--luperiq-accent, var(--accent));
}

/* Example-page buttons: override .page-content a link color */
.page-content a.ex-btn {
    text-decoration: none;
}
.page-content a.ex-btn-primary,
.page-content a.ex-btn-primary:hover,
.page-content a.ex-btn-primary:focus,
.page-content a.ex-btn-primary:visited {
    color: #ffffff;
}
.page-content a.ex-btn-secondary,
.page-content a.ex-btn-secondary:hover,
.page-content a.ex-btn-secondary:focus,
.page-content a.ex-btn-secondary:visited {
    color: #ffffff;
}

.btn-ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--surface); }

/* ── Columns / Layout ────────────────────────────────────────── */
.columns {
    display: grid;
    gap: 24px;
    margin: 24px 0;
}
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Marketing Blocks ─────────────────────────────────────────── */
.mktg-block-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 24px 0 20px;
    padding: 58px 38px;
    border-radius: 28px;
    color: #fff;
    box-shadow: 0 30px 78px rgba(15, 23, 42, 0.2);
}
.mktg-block-hero::before,
.mktg-block-hero::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}
.mktg-block-hero::before {
    inset: auto -96px -112px auto;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(191, 219, 254, 0.26) 0%, rgba(191, 219, 254, 0) 72%);
}
.mktg-block-hero::after {
    inset: -120px auto auto -84px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.18) 0%, rgba(56, 189, 248, 0) 70%);
}
.mktg-block-hero--blue {
    background:
        radial-gradient(circle at 10% 0%, rgba(147, 197, 253, 0.15), transparent 30%),
        linear-gradient(138deg, #081327 0%, #12356b 48%, #2158cb 100%);
}
.mktg-block-hero--indigo {
    background:
        radial-gradient(circle at 12% 0%, rgba(96, 165, 250, 0.14), transparent 28%),
        linear-gradient(138deg, #081225 0%, #142f63 52%, #31408f 100%);
}
.mktg-block-hero--site {
    background: linear-gradient(
        138deg,
        var(--luperiq-header-bg, var(--color-primary, #14532d)) 0%,
        var(--luperiq-primary, var(--color-secondary, #16a34a)) 56%,
        var(--luperiq-accent, var(--color-accent, #22c55e)) 100%
    );
}
.mktg-block-hero--site::before,
.mktg-block-hero--site::after {
    display: none;
}
.mktg-block-hero__inner {
    position: relative;
    z-index: 1;
}
.mktg-block-hero__kicker {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
    color: #bfdbfe;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(191, 219, 254, 0.18);
}
.mktg-block-hero .mktg-block-hero__title {
    max-width: 19ch;
    margin: 0 0 14px;
    color: #ffffff;
    font-size: clamp(2.35rem, 4vw, 4.05rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.025em;
    text-wrap: balance;
    text-shadow: 0 10px 26px rgba(2, 6, 23, 0.26);
}
.mktg-block-hero__text {
    max-width: 66ch;
    margin: 0 0 22px;
    color: rgba(248, 251, 255, 0.96);
    font-size: 1.08rem;
    font-weight: 550;
    line-height: 1.82;
    text-wrap: pretty;
    text-shadow: 0 6px 18px rgba(2, 6, 23, 0.16);
}
.mktg-block-hero__chips,
.mktg-block-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.mktg-block-hero__chips {
    margin: 18px 0 0;
}
.mktg-block-hero__actions {
    margin-top: 18px;
}
.mktg-block-hero__actions .btn {
    border-radius: 999px;
    padding: 14px 24px;
    border: 1px solid transparent;
    box-shadow: 0 16px 30px rgba(8, 15, 33, 0.2);
}
.mktg-block-hero__actions .btn-primary,
.mktg-block-hero__actions a.btn-primary,
.mktg-block-hero__actions button.btn-primary {
    background: linear-gradient(180deg, #ffffff 0%, #dbeafe 100%);
    color: #0f172a;
    border-color: rgba(255, 255, 255, 0.55);
}
.mktg-block-hero__actions .btn-primary:hover,
.mktg-block-hero__actions .btn-primary:focus,
.mktg-block-hero__actions a.btn-primary:hover,
.mktg-block-hero__actions a.btn-primary:focus {
    background: linear-gradient(180deg, #ffffff 0%, #bfdbfe 100%);
    color: #0f172a;
}
.mktg-block-hero__actions .btn-primary:visited,
.mktg-block-hero__actions a.btn-primary:visited {
    color: #0f172a;
}
.mktg-block-hero__actions .btn-outline,
.mktg-block-hero__actions a.btn-outline {
    background: rgba(255, 255, 255, 0.08);
    color: #eff6ff;
    border-color: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(8px);
}
.mktg-block-hero__actions .btn-outline:hover,
.mktg-block-hero__actions .btn-outline:focus,
.mktg-block-hero__actions a.btn-outline:hover,
.mktg-block-hero__actions a.btn-outline:focus {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.58);
}
.mktg-block-hero__actions .btn-outline:visited,
.mktg-block-hero__actions a.btn-outline:visited {
    color: #eff6ff;
}
.mktg-block-hero__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 14px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(7, 18, 36, 0.24), rgba(17, 63, 122, 0.16));
    border: 1px solid rgba(191, 219, 254, 0.22);
    color: #eff6ff;
    font-size: 0.92rem;
    backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.mktg-feature-grid {
    display: grid;
    gap: 14px;
    margin: 20px 0 28px;
}
.mktg-feature-grid--cols-1 { grid-template-columns: 1fr; }
.mktg-feature-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mktg-feature-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mktg-feature-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mktg-feature-card {
    padding: 16px 18px;
    border: 1px solid rgba(191, 219, 254, 0.18);
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.04);
}
.mktg-feature-card__eyebrow {
    margin-bottom: 6px;
    color: var(--luperiq-accent, var(--accent));
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.mktg-feature-card__title {
    margin: 0 0 6px;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.3;
}
.mktg-feature-card__text {
    margin: 0;
    color: #475569;
    line-height: 1.65;
}
.mktg-note {
    margin: 20px 0 24px;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1e3a8a;
    line-height: 1.7;
}
.mktg-note strong {
    display: block;
    margin-bottom: 6px;
    color: #0f172a;
}
.mktg-note p {
    margin: 0;
    color: inherit;
}
.mktg-note--success {
    border-color: #86efac;
    background: #f0fdf4;
    color: #166534;
}
.mktg-note--warn {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

/* ── Dark context: hero block overrides page-article/page-content ── */
/* Hero blocks have their own dark gradient — ALL text inside must be light.
   These rules beat .page-article h1 (0,1,1) and .page-content h2 (0,1,1)
   because .mktg-block-hero h1 is also (0,1,1) but declared later.          */
.mktg-block-hero,
.mktg-block-hero h1,
.mktg-block-hero h2,
.mktg-block-hero h3 {
    color: #ffffff;
}
.mktg-block-hero p,
.mktg-block-hero li,
.mktg-block-hero span:not(.mktg-block-hero__kicker) {
    color: rgba(248, 251, 255, 0.96);
}
.mktg-block-hero strong {
    color: #ffffff;
}
.mktg-block-hero a:not(.btn):not(.btn-primary):not(.btn-outline) {
    color: #bfdbfe;
}

/* ── Dark-shell context: readable marketing blocks ──────────── */
/* Any dark shell page — feature cards, notes, and all text blocks
   rendered from managed CMS content need light-on-dark treatment. */
:is(.cat-shell, .wf-shell, .md-shell, .wd-shell) .mktg-feature-card {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(8px);
}
:is(.cat-shell, .wf-shell, .md-shell, .wd-shell) .mktg-feature-card__eyebrow {
    color: #93c5fd;
}
:is(.cat-shell, .wf-shell, .md-shell, .wd-shell) .mktg-feature-card__title {
    color: #f1f5f9;
}
:is(.cat-shell, .wf-shell, .md-shell, .wd-shell) .mktg-feature-card__text {
    color: rgba(255, 255, 255, 0.72);
}
:is(.cat-shell, .wf-shell, .md-shell, .wd-shell) .mktg-note {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.78);
}
:is(.cat-shell, .wf-shell, .md-shell, .wd-shell) .mktg-note strong {
    color: #f1f5f9;
}
:is(.cat-shell, .wf-shell, .md-shell, .wd-shell) .mktg-note--warn {
    background: rgba(251, 191, 36, 0.08);
    border-color: rgba(251, 191, 36, 0.2);
    color: #fde68a;
}
/* Managed-content areas inside dark shells (but NOT white module/workflow cards) */
:is(.cat-managed, .wf-managed, .md-managed, .wd-managed) :is(h1, h2, h3) {
    color: #ffffff;
}
:is(.cat-managed, .wf-managed, .md-managed, .wd-managed) :is(p, li, span) {
    color: rgba(248, 251, 255, 0.88);
}
:is(.cat-managed, .wf-managed, .md-managed, .wd-managed) strong {
    color: #ffffff;
}
:is(.cat-managed, .wf-managed, .md-managed, .wd-managed) a {
    color: #93c5fd;
}

/* ── Pricing Table ───────────────────────────────────────────── */
.pricing-table {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin: 32px 0;
}

.plan {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 32px 24px;
    text-align: center;
    transition: box-shadow 0.2s, transform 0.2s;
}
.plan:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); transform: translateY(-2px); }

.plan.highlighted {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent);
    position: relative;
}
.plan.highlighted::before {
    content: "Most Popular";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: #fff;
    padding: 2px 16px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.plan h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text);
}
.plan-pill {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.price-wrap {
    margin: 12px 0 18px;
}
.price-strike {
    color: var(--text-muted);
    font-size: 0.98rem;
    text-decoration: line-through;
    margin-bottom: 4px;
}

.price {
    font-size: 36px;
    font-weight: 800;
    color: var(--text);
    margin: 0;
}
.price span {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-muted);
}
.plan-meta {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 12px;
}
.plan-description {
    color: #475569;
    font-size: 0.97rem;
    line-height: 1.65;
    margin: 0 0 14px;
}

.plan ul {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    text-align: left;
}
.plan li {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    color: #475569;
}
.plan li:last-child { border-bottom: none; }

.plan .btn {
    width: 100%;
    text-align: center;
}

/* ── Stats Counter ───────────────────────────────────────────── */
.stat {
    text-align: center;
    padding: 16px;
}

.stat-number {
    font-size: 36px;
    font-weight: 800;
    color: var(--accent);
    line-height: 1.2;
}

.stat-label {
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Testimonial ─────────────────────────────────────────────── */
blockquote.testimonial {
    border-left: none;
    background: var(--surface);
    border-radius: 10px;
    padding: 28px;
    margin: 24px 0;
    font-style: normal;
    position: relative;
}
blockquote.testimonial::before {
    content: "\201C";
    font-size: 48px;
    color: var(--accent);
    position: absolute;
    top: 8px;
    left: 16px;
    line-height: 1;
}
blockquote.testimonial p {
    font-size: 16px;
    color: var(--text);
    margin-bottom: 16px;
    padding-left: 24px;
}
blockquote.testimonial footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 24px;
}
blockquote.testimonial footer img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
blockquote.testimonial cite {
    font-style: normal;
    display: flex;
    flex-direction: column;
    font-size: 14px;
}
blockquote.testimonial cite strong { color: var(--text); }
blockquote.testimonial cite span { color: var(--text-muted); font-size: 13px; }

/* ── Accordion ───────────────────────────────────────────────── */
.accordion { margin: 24px 0; }
.accordion details {
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 8px;
    overflow: hidden;
}
.accordion summary {
    padding: 14px 18px;
    font-weight: 600;
    cursor: pointer;
    background: var(--surface);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.accordion summary::after {
    content: "+";
    font-size: 18px;
    color: var(--text-muted);
    transition: transform 0.2s;
}
.accordion details[open] summary::after {
    content: "\2212";
}
.accordion details > div {
    padding: 14px 18px;
    color: #475569;
    line-height: 1.7;
}

/* ── Tabs ────────────────────────────────────────────────────── */
.tabs { margin: 24px 0; }
.tab-nav {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
}
.tab-btn {
    padding: 10px 20px;
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
}
.tab-btn.active, .tab-btn:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.tab-panel { display: none; padding: 20px 0; }
.tab-panel.active { display: block; }

/* ── Gallery ─────────────────────────────────────────────────── */
.gallery {
    display: grid;
    gap: 8px;
    margin: 24px 0;
}
.gallery-grid { grid-template-columns: repeat(var(--cols, 3), 1fr); }
.gallery img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 6px;
    margin: 0;
}

/* ── Video Embed ─────────────────────────────────────────────── */
.video-embed {
    position: relative;
    width: 100%;
    margin: 24px 0;
    border-radius: 8px;
    overflow: hidden;
}
.video-embed iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
}
.ratio-16-9 { padding-bottom: 56.25%; }
.ratio-4-3 { padding-bottom: 75%; }
.ratio-1-1 { padding-bottom: 100%; }

/* ── Before / After ──────────────────────────────────────────── */
.before-after {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 24px 0;
}
.before-after > div { text-align: center; }
.before-after img {
    width: 100%;
    border-radius: 6px;
    margin: 0 0 8px;
}
.before-after span {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ── Team Member ─────────────────────────────────────────────── */
.team-member {
    text-align: center;
    padding: 20px;
}
.team-member img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 12px;
}
.team-member h3 { font-size: 18px; margin-bottom: 4px; }
.team-member .role { color: var(--text-muted); font-size: 14px; margin-bottom: 8px; }
.team-member .social { display: flex; gap: 12px; justify-content: center; margin-top: 8px; }
.team-member .social a { color: var(--accent); text-decoration: none; font-size: 14px; }

/* ── Image Variants ──────────────────────────────────────────── */
figure { margin: 24px 0; }
figure.align-center { text-align: center; }
figure.align-center img { margin: 0 auto; display: block; }
figure.img-full img { width: 100%; }
figcaption { font-size: 13px; color: var(--text-muted); margin-top: 8px; text-align: center; }

/* ── Wide content (marketing pages) ──────────────────────────── */
.page-content .pricing-table,
.page-content .columns {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Page-generated content (catalog & marketing pages) ──────── */
/* Layout-only properties (no color) — safe on any background */
.page-content .kicker {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 12px;
    /* Default: readable on light backgrounds */
    background: rgba(37, 99, 235, 0.10);
    border: 1px solid rgba(37, 99, 235, 0.20);
    color: #1e40af;
}
.page-content .kicker strong { font-weight: 700; color: inherit; }

.page-content .subtitle {
    max-width: 66ch;
    font-size: 1.08rem;
    line-height: 1.74;
    text-wrap: pretty;
    /* Default: readable on light backgrounds */
    color: #475569;
}
.page-content .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 22px 0 8px;
}
.page-content .hero-actions .button,
.page-content .hero-actions a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    box-shadow: 0 16px 30px rgba(8, 15, 33, 0.2);
    transition: background .15s, color .15s;
}
.page-content .hero-actions .button.primary,
.page-content .hero-actions a.button.primary {
    background: var(--luperiq-accent, #2563eb);
    color: var(--luperiq-button-text, #fff);
    border-color: transparent;
}
.page-content .hero-actions .button.primary:hover {
    background: var(--luperiq-accent-hover, #1d4ed8);
}
.page-content .hero-actions .button.secondary,
.page-content .hero-actions a.button.secondary {
    background: var(--surface, #f8fafc);
    color: var(--text, #1e293b);
    border-color: var(--border, #e2e8f0);
}
.page-content .hero-actions .button.secondary:hover {
    background: #ffffff;
    border-color: rgba(37, 99, 235, 0.3);
}

.page-content .stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin: 22px 0 0;
}
.page-content .stat-item {
    border-radius: 20px;
    padding: 18px;
    /* Default: readable on light backgrounds */
    background: var(--surface, #f8fafc);
    border: 1px solid var(--border, #e2e8f0);
}
.page-content .stat-item strong {
    display: block;
    font-size: 1.1rem;
    line-height: 1.2;
    margin-bottom: 4px;
    color: var(--text, #0f172a);
}
.page-content .stat-item span {
    color: var(--text-muted, #64748b);
    font-size: .92rem;
}

/* Dark-hero override: kicker, subtitle, stats, buttons get light-on-dark treatment */
.page-article:has(.kicker) .page-content .kicker {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(191, 219, 254, 0.18);
    color: #bfdbfe;
}
.page-article:has(.kicker) .page-content .subtitle {
    color: rgba(248, 251, 255, 0.94);
}
.page-article:has(.kicker) .page-content .hero-actions .button.primary,
.page-article:has(.kicker) .page-content .hero-actions a.button.primary {
    background: linear-gradient(180deg, #ffffff 0%, #dbeafe 100%);
    color: #0f172a;
    border-color: rgba(255, 255, 255, 0.55);
}
.page-article:has(.kicker) .page-content .hero-actions .button.primary:hover {
    background: linear-gradient(180deg, #ffffff 0%, #bfdbfe 100%);
}
.page-article:has(.kicker) .page-content .hero-actions .button.secondary,
.page-article:has(.kicker) .page-content .hero-actions a.button.secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #eff6ff;
    border-color: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(8px);
}
.page-article:has(.kicker) .page-content .hero-actions .button.secondary:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.58);
}
.page-article:has(.kicker) .page-content .stat-item {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(12px);
}
.page-article:has(.kicker) .page-content .stat-item strong {
    color: #fff;
}
.page-article:has(.kicker) .page-content .stat-item span {
    color: rgba(255, 255, 255, 0.78);
}

/* ── Dark hero wrapper for pages with .kicker ────────────────── */
.page-article:has(.kicker) {
    position: relative;
    margin-top: -32px;
    padding: 0;
}
.page-article:has(.kicker)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 620px;
    background:
        radial-gradient(circle at 10% 0%, rgba(147, 197, 253, 0.15), transparent 30%),
        linear-gradient(138deg, #081327 0%, #12356b 48%, #2158cb 100%);
    z-index: -1;
    pointer-events: none;
}
.page-article:has(.kicker) > h1,
.page-article:has(.kicker) .page-content > h1:first-of-type {
    color: #ffffff;
    font-size: clamp(2.4rem, 6vw, 4rem);
    line-height: 1.04;
    max-width: 18ch;
    margin: 0 0 14px;
    text-shadow: 0 10px 26px rgba(2, 6, 23, 0.26);
    text-wrap: balance;
}

/* ── Category groups and feature cards ───────────────────────── */
.page-content .feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin: 18px 0 32px;
}
.page-content .feature-card {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
    transition: box-shadow .2s, transform .15s;
}
.page-content .feature-card:hover {
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.12);
    transform: translateY(-2px);
}
.page-content .feature-card h3 {
    margin: 0 0 8px;
    font-size: 1.1rem;
    color: #0f172a;
}
.page-content .feature-card em {
    display: block;
    color: #64748b;
    font-size: .92rem;
    margin-bottom: 8px;
}
.page-content .feature-card p {
    margin: 0;
    color: #475569;
    line-height: 1.65;
    font-size: .95rem;
}
.page-content .feature-card a {
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
}
.page-content .feature-card a:hover {
    text-decoration: underline;
}

/* Category h2 headings below the hero — first one pushed below the dark gradient */
.page-article:has(.kicker) .page-content > h2 {
    color: #0f172a;
    font-size: 1.7rem;
    margin: 36px 0 8px;
    padding-top: 12px;
}
/* Padding on stat-grid pushes subsequent content below the dark gradient edge */
.page-article:has(.kicker) .page-content > .stat-grid {
    margin-bottom: 160px;
}
.page-article:has(.kicker) .page-content > h2 ~ p {
    color: #475569;
    max-width: 72ch;
}

/* Final CTA section */
.page-article:has(.kicker) .page-content > h2:last-of-type {
    text-align: center;
    max-width: none;
}
.page-article:has(.kicker) .page-content > h2:last-of-type ~ p {
    text-align: center;
    max-width: none;
}
.page-article:has(.kicker) .page-content > h2:last-of-type ~ p a {
    display: inline-flex;
    padding: 14px 28px;
    border-radius: 999px;
    background: #0f172a;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
}
.page-article:has(.kicker) .page-content > h2:last-of-type ~ p a:hover {
    background: #1e293b;
}

/* Responsive */
@media (max-width: 640px) {
    .page-article h1 { font-size: 28px; }
    .page-content { font-size: 16px; }
    .site-main { padding: 32px 16px; }
    .site-header-inner { padding: 12px 16px; }
    .site-nav a { margin-left: 16px; font-size: 14px; }
    .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
    .mktg-block-hero { padding: 36px 22px; border-radius: 24px; }
    .mktg-block-hero__title { max-width: none; }
    .mktg-block-hero__text { font-size: 1rem; }
    .mktg-block-hero__actions .btn { width: 100%; text-align: center; justify-content: center; }
    .mktg-feature-grid--cols-2,
    .mktg-feature-grid--cols-3,
    .mktg-feature-grid--cols-4 { grid-template-columns: 1fr; }
    .before-after { grid-template-columns: 1fr; }
    .stat-number { font-size: 28px; }
    .price { font-size: 28px; }
    .plan { padding: 24px 16px; }
    .gallery { grid-template-columns: repeat(2, 1fr); }
    .page-article:has(.kicker)::before { height: 580px; }
    .page-content .feature-grid { grid-template-columns: 1fr; }
    .page-content .hero-actions .button { width: 100%; text-align: center; justify-content: center; }
    .page-content .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Public Footer ── */
.luperiq-public-footer {
    background: var(--footer-bg, #f8fafc);
    border-top: 1px solid var(--border);
    padding: 16px 24px;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
}
.luperiq-public-footer a { color: var(--accent); text-decoration: none; }
.luperiq-public-footer a:hover { text-decoration: underline; }

/* =====================================================================
 * v2 paper-cream overlay for WAL-stored sub-pages on luperiq.com only.
 *
 * Scoped via [data-site-host="luperiq-com"] (set on <html> by base.html
 * line 8: document.documentElement.dataset.siteHost = host.replace(/\./g,'-'))
 * so customer sites — which share pages/single.html and base.html — keep
 * their theme-studio chrome and color tokens intact.
 *
 * Pages affected: /hvac-scheduling/, /hvac-invoicing/,
 * /how-to-schedule-hvac-appointments/, all auto-rendered industry sub-pages
 * (~70+), and any block-built marketing page rendered by render_page()
 * instead of a typed handler. The 4 fully migrated v2 pages
 * (/pricing, /how-it-works, /migrate, /cms-industries) are unaffected
 * because they extend marketing-base-v2.html and don't use .page-content.
 *
 * Tokens inlined as hex on purpose — the v2 :root tokens live inside
 * .luperiq-v2 scope, which single.html doesn't have. These values are
 * stable LuperIQ brand colors, not theme-overridable.
 * ===================================================================== */
html[data-site-host="luperiq-com"] body {
    background: #f6f3ec;
}
html[data-site-host="luperiq-com"] .page-article,
html[data-site-host="luperiq-com"] .page-content--blocks {
    background: #f6f3ec;
}
html[data-site-host="luperiq-com"] .page-article h1,
html[data-site-host="luperiq-com"] .page-content--blocks > h1 {
    font-family: 'Source Serif Pro', 'Georgia', serif;
    font-weight: 700;
    font-size: clamp(34px, 5vw, 52px);
    line-height: 1.1;
    color: #0d0d0c;
}
html[data-site-host="luperiq-com"] .page-article h2,
html[data-site-host="luperiq-com"] .page-content--blocks > h2,
html[data-site-host="luperiq-com"] .page-content h2 {
    font-family: 'Source Serif Pro', 'Georgia', serif;
    font-size: clamp(24px, 3.5vw, 32px);
    line-height: 1.2;
    color: #0d0d0c;
}
html[data-site-host="luperiq-com"] .page-content,
html[data-site-host="luperiq-com"] .page-article p,
html[data-site-host="luperiq-com"] .page-content p {
    color: #2a2a26;
    line-height: 1.7;
}
html[data-site-host="luperiq-com"] .page-content a,
html[data-site-host="luperiq-com"] .page-article a {
    color: #1f4f6b;
    text-underline-offset: 3px;
}
html[data-site-host="luperiq-com"] .page-content hr,
html[data-site-host="luperiq-com"] .page-article hr {
    border: 0;
    border-top: 1px solid #d9d3c2;
    margin: 32px 0;
}
html[data-site-host="luperiq-com"] .related-pages {
    background: #ece7da;
    border-color: #d9d3c2;
}

/* Breadcrumbs on stored content pages (routes/breadcrumbs.rs) */
.liq-breadcrumbs { font-size: 14px; line-height: 1.5; margin: 0 0 18px; color: var(--luperiq-text, var(--text)); }
.liq-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; }
.liq-breadcrumbs li { display: inline-flex; align-items: center; }
.liq-breadcrumbs li + li::before { content: "\203A"; margin: 0 8px; opacity: 0.55; }
.liq-breadcrumbs a { color: var(--luperiq-link, var(--accent)); text-decoration: none; }
.liq-breadcrumbs a:hover, .liq-breadcrumbs a:focus-visible { text-decoration: underline; }
.liq-breadcrumbs [aria-current="page"] { opacity: 0.8; }