/* Global CSS Reset */
*,
*::before,
*::after { box-sizing: border-box; }
html { margin: 0; padding: 0; }
body { margin: 0; padding: 0; }

/* Page: home */
/* ============================================================
   PUB-NAV-1008 — Clarity SaaS Nav
   Series 1008 · Full-width sticky nav · Light theme · Inter font
   State: data-scrolled on .navBar  |  data-open on .mobileDrawer/.drawerOverlay
   ============================================================ */

/* ── Root ────────────────────────────────────────────────── */
.pub_nav_1008_navRoot {
    /* Scoped design tokens — not user-controlled */
    --t: 0.2s ease;
    --t-slow: 0.32s ease;
    --r: 6px;
    --r-lg: 10px;
    --r-btn: 8px;
    --fs-brand: clamp(15px, 1.5vw, 17px);
    --fs-nav: clamp(13px, 1.3vw, 14px);
    --fs-dd: clamp(12px, 1.2vw, 13.5px);
    --fs-drawer: clamp(14px, 1.4vw, 15px);
    --fs-icon: clamp(18px, 1.5vw, 20px);
    --fs-caret: 11px;
    --hover-bg: rgba(37, 99, 235, 0.06);

    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    isolation: isolate;
    /* ✅ Ensure nav stacking context sits above page content */
    position: relative;
    z-index: var(--z-nav, 1000);
    background-image: var(--texture-bg, none);
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Full-width Bar ──────────────────────────────────────── */
.pub_nav_1008_navBar {
    position: var(--navbar-position, fixed);
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav, 1000);
    /* above page content, below drawer overlay */
    background-color: var(--bg, #ffffff);
    border-bottom: 1px solid var(--border, #e5e7eb);
    transition:
        border-color var(--t, 0.2s ease),
        box-shadow var(--t, 0.2s ease);
    padding-top: var(--pt, 0);
    padding-bottom: var(--pb, 0);
}

.pub_nav_1008_navBar[data-scrolled='true'] {
    border-color: var(--border, #e5e7eb);
}

/* ── Inner container ─────────────────────────────────────── */
.pub_nav_1008_navInner {
    max-width: var(--max-w, 1200px);
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 40px);
    min-height: var(--nav-h, 72px);
    display: flex;
    align-items: center;
    justify-content: space-between;
gap: var(--space-gap, 32px);
}

/* ── Logo ────────────────────────────────────────────────── */
.pub_nav_1008_logo {
  /* composed: logo from NavBase.module.css */
  display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity var(--t, 0.22s ease);
    /* gap, margin, color: set in component */
    gap: var(--space-content-gap, 8px);
    color: var(--text, #374151);
    text-decoration: none;
}

.pub_nav_1008_logoMark {
    font-size: var(--fs-icon, clamp(18px, 1.5vw, 20px));
    color: var(--cta-bg, #2563eb);
    line-height: var(--leading, 1);
}

.pub_nav_1008_logoWord {
    font-size: var(--fs-brand, clamp(15px, 1.5vw, 17px));
    font-weight: 700;
    letter-spacing: var(--tracking, -0.02em);
    color: var(--text, #374151);
    white-space: nowrap;
}

.pub_nav_1008_logoImg {
  /* composed: logoImg from NavBase.module.css */
  object-fit: contain;
    display: block;
    /* width, height: set via CSS vars in component */
    width: var(--brand-image-width, 160px);
    height: var(--brand-image-height, 40px);
}

/* ── Center: Desktop nav links ───────────────────────────── */
.pub_nav_1008_navCenter {
    flex: 1;
    display: flex;
    justify-content: center;
}

.pub_nav_1008_navLinks {
  /* composed: navLinks from NavBase.module.css */
  display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    /* gap: set in component */
    gap: var(--space-content-gap, 4px);
}

.pub_nav_1008_dropWrap {
    position: relative;
}

.pub_nav_1008_navLink {
  /* composed: navLink from NavBase.module.css */
  display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: color var(--t, 0.22s ease), background-color var(--t, 0.22s ease);
    /* padding, font-size, font-weight, color, border-radius: set in component */
    padding: 6px 10px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 500;
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
}

.pub_nav_1008_navLink:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_navLinkBtn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 4px);
    padding: 6px 10px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 500;
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    background: none;
    border: none;
    cursor: pointer;
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
}

.pub_nav_1008_navLinkBtn:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_navCaret {
    font-size: var(--fs-caret, 11px);
    transition: transform var(--t, 0.2s ease);
}

/* ── Dropdown panel ──────────────────────────────────────── */
.pub_nav_1008_navDropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 160px;
    background-color: var(--bg, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--r-lg, 10px);
    padding: 6px;
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* open/close via data-open */
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-6px);
    transition:
        opacity var(--t, 0.2s ease),
        transform var(--t, 0.2s ease);
    z-index: var(--z-dropdown, 1200);
    /* above nav links, below sticky bar */
}

.pub_nav_1008_navDropdown[data-open='true'] {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.pub_nav_1008_ddItem {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    padding: 8px 12px;
    font-size: var(--fs-dd, clamp(12px, 1.2vw, 13.5px));
    font-weight: 500;
    color: var(--text, #374151);
    text-decoration: none;
    border-radius: var(--r, 6px);
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
    white-space: nowrap;
}

.pub_nav_1008_ddItem:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

/* ── Right area ──────────────────────────────────────────── */
.pub_nav_1008_navRight {
  /* composed: navRight from NavBase.module.css */
  display: flex;
    align-items: center;
    flex-shrink: 0;
    /* gap, margin: set in component */
    gap: var(--space-content-gap, 8px);
}

.pub_nav_1008_loginBtn {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 500;
    color: var(--text, #374151);
    text-decoration: none;
    border-radius: var(--r, 6px);
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
    white-space: nowrap;
}

.pub_nav_1008_loginBtn:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_navCta {
  /* composed: navCta from NavBase.module.css */
  display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: background-color var(--t, 0.22s ease), transform var(--t, 0.22s ease);
    /* padding, background, color, border-radius, font: set in component */
    padding: 7px 18px;
    background-color: var(--cta-bg, #2563eb);
    color: var(--cta-text, #ffffff);
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 600;
    border-radius: var(--r-btn, 8px);
    white-space: nowrap;
}

.pub_nav_1008_navCta:hover {
    background-color: var(--cta-hover, rgba(37, 99, 235, 0.88));
    transform: translateY(-1px);
}

/* ── Hamburger ───────────────────────────────────────────── */
.pub_nav_1008_hamburger {
  /* composed: hamburger from NavBase.module.css */
  display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    transition: background-color var(--t, 0.22s ease);
    width: 36px;
    min-height: var(--hamburger-h, 36px);
    font-size: var(--fs-icon, clamp(18px, 1.5vw, 20px));
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    display: none;
    /* visible on mobile via media query */
}

.pub_nav_1008_hamburger:hover {
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_hamburgerLine {
  /* composed: hamburgerLine from NavBase.module.css */
  display: block;
    transition: transform var(--t, 0.22s ease), opacity var(--t, 0.22s ease);
    width: 20px;
    height: 2px;
    background-color: var(--text, #374151);
    border-radius: 2px;
}

/* ── Drawer Overlay ──────────────────────────────────────── */
.pub_nav_1008_drawerOverlay {
  /* composed: drawerOverlay from NavBase.module.css */
  inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t, 0.22s ease), visibility var(--t, 0.22s ease);
    /* position, z-index, background-color: set in component */
    position: var(--drawer-position, fixed);
    z-index: var(--z-drawer, 1100);
    /* above sticky navbar, below drawer panel */
    background-color: var(--overlay-bg, rgba(17, 24, 39, 0.4));
}

.pub_nav_1008_drawerOverlay[data-open='true'] {
    opacity: 1;
    visibility: visible;
}

/* ── Mobile Drawer ───────────────────────────────────────── */
.pub_nav_1008_mobileDrawer {
  /* composed: mobileDrawer from NavBase.module.css */
  top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--t-slow, 0.36s ease);
    overflow-y: auto;
    /* position, z-index, width, background-color, border, box-shadow: set in component */
    position: var(--drawer-position, fixed);
    z-index: var(--z-drawer, 1100);
    /* above overlay, topmost drawer layer */
    width: min(320px, 85vw);
    background-color: var(--bg, #ffffff);
    border-left: 1px solid var(--border, #e5e7eb);
}

.pub_nav_1008_mobileDrawer[data-open='true'] {
    transform: translateX(0);
}

/* ── Drawer Header ───────────────────────────────────────── */
.pub_nav_1008_drawerHeader {
  /* composed: drawerHeader from NavBase.module.css */
  display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    /* padding, border: set in component */
    padding: 18px 20px;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.pub_nav_1008_drawerBrand {
  /* composed: drawerBrand from NavBase.module.css */
  display: flex;
    align-items: center;
    /* gap, font-family, font-size, color: set in component */
    gap: var(--space-content-gap, 8px);
    font-size: var(--fs-brand, clamp(15px, 1.5vw, 17px));
    font-weight: 700;
    color: var(--text, #374151);
}

.pub_nav_1008_drawerBrandMark {
    font-size: var(--fs-icon, clamp(18px, 1.5vw, 20px));
    color: var(--cta-bg, #2563eb);
}

.pub_nav_1008_drawerCloseBtn {
  /* composed: drawerCloseBtn from NavBase.module.css */
  display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color var(--t, 0.22s ease);
    /* width, height, font-size, color: set in component */
    width: 32px;
    min-height: var(--close-btn-h, 32px);
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
}

.pub_nav_1008_drawerCloseBtn:hover {
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

/* ── Drawer Links ────────────────────────────────────────── */
.pub_nav_1008_drawerLinks {
  /* composed: drawerLinks from NavBase.module.css */
  flex: 1;
    display: flex;
    flex-direction: column;
    /* padding: set in component */
    padding: 12px 12px;
    gap: 2px;
}

.pub_nav_1008_drawerLink {
  /* composed: drawerLink from NavBase.module.css */
  display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: color var(--t, 0.22s ease), background-color var(--t, 0.22s ease);
    /* padding, font-size, font-weight, color, font-family, border-radius: set in component */
    padding: 10px 12px;
    font-size: var(--fs-drawer, clamp(14px, 1.4vw, 15px));
    font-weight: 500;
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
}

.pub_nav_1008_drawerLink:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_drawerCaret {
  /* composed: drawerCaret from NavBase.module.css */
  transition: transform var(--t, 0.22s ease);
    /* font-size: set in component */
    font-size: var(--fs-caret, 11px);
}

.pub_nav_1008_drawerSub {
  /* composed: drawerSub from NavBase.module.css */
  max-height: 0;
    overflow: hidden;
    transition: max-height var(--t-slow, 0.36s ease);
    padding-left: 12px;
}

.pub_nav_1008_drawerSubLink {
  /* composed: drawerSubLink from NavBase.module.css */
  display: block;
    text-decoration: none;
    transition: color var(--t, 0.22s ease), background-color var(--t, 0.22s ease);
    /* padding, font-size, color: set in component */
    padding: 8px 12px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    display: block;
}

.pub_nav_1008_drawerSubLink:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

/* ── Drawer Footer ───────────────────────────────────────── */
.pub_nav_1008_drawerFooter {
  /* composed: drawerFooter from NavBase.module.css */
  flex-shrink: 0;
    /* padding, border: set in component */
    padding: 16px 20px;
    border-top: 1px solid var(--border, #e5e7eb);
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 10px);
}

.pub_nav_1008_drawerSecondaryBtn {
    display: block;
    text-align: center;
    padding: 10px 20px;
    font-size: var(--fs-drawer, clamp(14px, 1.4vw, 15px));
    font-weight: 500;
    color: var(--text, #374151);
    text-decoration: none;
    border-radius: var(--r-btn, 8px);
    border: 1px solid var(--border, #e5e7eb);
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
}

.pub_nav_1008_drawerSecondaryBtn:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_drawerCta {
  /* composed: drawerCta from NavBase.module.css */
  display: block;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--t, 0.22s ease);
    /* padding, background, color, border-radius, font: set in component */
    padding: 11px 20px;
    background-color: var(--cta-bg, #2563eb);
    color: var(--cta-text, #ffffff);
    font-size: var(--fs-drawer, clamp(14px, 1.4vw, 15px));
    font-weight: 600;
    border-radius: var(--r-btn, 8px);
    text-align: center;
}

.pub_nav_1008_drawerCta:hover {
    background-color: var(--cta-hover, rgba(37, 99, 235, 0.88));
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */

/* ── Focus states (accessibility — required) ─────────────── */
.pub_nav_1008_navLink:focus-visible,
.pub_nav_1008_navLinkBtn:focus-visible,
.pub_nav_1008_loginBtn:focus-visible,
.pub_nav_1008_navCta:focus-visible,
.pub_nav_1008_hamburger:focus-visible,
.pub_nav_1008_drawerCloseBtn:focus-visible,
.pub_nav_1008_drawerLink:focus-visible,
.pub_nav_1008_drawerSubLink:focus-visible,
.pub_nav_1008_drawerSecondaryBtn:focus-visible,
.pub_nav_1008_drawerCta:focus-visible {
    outline: 2px solid var(--accent, #2563eb);
    outline-offset: 3px;
    border-radius: var(--r, 6px);
}

/* ── Tablet (1100px) ─────────────────────────────────────── */
@media (max-width: 1100px) {
    .pub_nav_1008_navInner {
gap: var(--space-content-gap, 12px);
    }

    .pub_nav_1008_navLinks {
        gap: 2px;
    }

    .pub_nav_1008_navLink,
    .pub_nav_1008_navLinkBtn {
        padding: 6px 6px;
    }

    .pub_nav_1008_navRight {
        gap: var(--space-content-gap, 4px);
    }

    .pub_nav_1008_loginBtn {
        padding: 5px 8px;
    }

    .pub_nav_1008_navCta {
        padding: 5px 10px;
    }
}

/* ── Tablet / Mobile (768px) ─────────────────────────────── */
@media (max-width: 768px) {
    .pub_nav_1008_navCenter {
        display: none;
    }

    .pub_nav_1008_loginBtn {
        display: none;
    }

    .pub_nav_1008_navCta {
        display: none;
    }

    .pub_nav_1008_hamburger {
        display: flex;
    }
}

/* ── Mobile (480px) ──────────────────────────────────────── */
@media (max-width: 480px) {
    .pub_nav_1008_navInner {
        padding: 0 clamp(12px, 4vw, 16px);
gap: var(--space-content-gap, 12px);
    }
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .pub_nav_1008_navBar,
    .pub_nav_1008_navLink,
    .pub_nav_1008_navLinkBtn,
    .pub_nav_1008_navDropdown,
    .pub_nav_1008_ddItem,
    .pub_nav_1008_loginBtn,
    .pub_nav_1008_navCta,
    .pub_nav_1008_drawerOverlay,
    .pub_nav_1008_mobileDrawer,
    .pub_nav_1008_drawerLink,
    .pub_nav_1008_drawerSubLink,
    .pub_nav_1008_drawerSecondaryBtn,
    .pub_nav_1008_drawerCta {
        transition: none;
    }
}

/* ────────────────────────────────────────────────────────────
   PUB-HERO-1008 · Radiant Hero
   Light SaaS hero · centered layout · typewriter headline
   ──────────────────────────────────────────────────────────── */

/* ── Section ────────────────────────────────────────────────── */
.pub_hero_1008_section {
    /* tokens */
    --radial-1: rgba(99, 102, 241, 0.12);
    --radial-2: rgba(168, 85, 247, 0.07);
    --chip-bg: rgba(99, 102, 241, 0.08);
    --chip-border: rgba(99, 102, 241, 0.2);
    --accent-alt: rgba(168, 85, 247, 0.9);
    --accent-alt-2: rgba(168, 85, 247, 0.85);
    --btn-border: rgba(15, 23, 42, 0.15);
    --btn-hover-bg: rgba(99, 102, 241, 0.04);
    --surface-border: rgba(15, 23, 42, 0.08);
    --surface-bg: rgba(15, 23, 42, 0.04);
    --stats-bg: rgba(255, 255, 255, 0.7);
    --divider: rgba(15, 23, 42, 0.1);
    --shadow-1: rgba(15, 23, 42, 0.06);
    --shadow-2: rgba(15, 23, 42, 0.18);
    width: 100%;
    padding: var(--pt, 96px) 24px var(--pb, 80px);
    background: var(--texture-bg, none),
        radial-gradient(ellipse 80% 55% at 50% -5%, var(--radial-1, rgba(99, 102, 241, 0.12)) 0%, transparent 65%),
        radial-gradient(ellipse 45% 35% at 95% 95%, var(--radial-2, rgba(168, 85, 247, 0.07)) 0%, transparent 55%),
        color-mix(in srgb, color-mix(in srgb, var(--bg, #ffffff) calc(var(--material-bg-opacity, 1) * 100%), transparent) calc(var(--material-bg-opacity, 1) * 100%), transparent);
    font-family: var(--font-body, system-ui, -apple-system, sans-serif);
    color: var(--text, #0f172a);
    overflow: hidden;
    min-height: 500px;
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Container ──────────────────────────────────────────────── */
.pub_hero_1008_container {
    max-width: var(--max-w, 1080px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-gap, 32px);
}

/* ── Announcement chip ──────────────────────────────────────── */
.pub_hero_1008_chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    padding: 6px 14px 6px 10px;
    background: var(--chip-bg, rgba(99, 102, 241, 0.08));
    border: var(--border-card, 1px solid var(--chip-border, rgba(99, 102, 241, 0.2)));
    border-radius: var(--radius-full, 999px);
    font-size: calc(0.8125rem * var(--body-scale, 1));
    color: var(--text, #0f172a);
}

.pub_hero_1008_chipText {
    font-weight: 500;
}

.pub_hero_1008_chipLink {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 4px);
    color: var(--accent, #6366f1);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.pub_hero_1008_chipLink:hover {
    text-decoration: underline;
}

/* ── Headline ───────────────────────────────────────────────── */
.pub_hero_1008_headlineWrap {
    text-align: center;
    max-width: 760px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-content-gap, 20px);
}

.pub_hero_1008_title {
    font-family: var(--font-heading, var(--font-body, system-ui, sans-serif));
    font-size: calc(clamp(2.5rem, 6vw, 4rem) * var(--heading-scale, 1));
    font-weight: 800;
    line-height: var(--leading, 1.1);
    letter-spacing: var(--tracking, -0.03em);
    color: var(--text, #0f172a);
    margin: 0;
    /* Stack static line + typewriter line so height never shifts */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.pub_hero_1008_titleLine1 {
    display: block;
}

/* ── Typewriter ─────────────────────────────────────────────── */
.pub_hero_1008_typewriterWrap {
    display: block;
    min-height: 2.2em;
}

.pub_hero_1008_typewriterWord {
    background: linear-gradient(135deg,
            var(--accent, #6366f1) 0%,
            var(--accent-alt, rgba(168, 85, 247, 0.9)) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pub_hero_1008_cursor {
    display: inline-block;
    width: 3px;
    color: var(--accent, #6366f1);
    -webkit-text-fill-color: var(--accent, #6366f1);
    animation: pub_hero_1008_cursorBlink 0.9s step-start infinite;
    margin-left: 2px;
}

@keyframes pub_hero_1008_cursorBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* Static accent fallback (single word) — block so height matches typewriter line */
.pub_hero_1008_accent {
    display: block;
    min-height: 1.1em;
    background: linear-gradient(135deg,
            var(--accent, #6366f1) 0%,
            var(--accent-alt, rgba(168, 85, 247, 0.9)) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Description ────────────────────────────────────────────── */
.pub_hero_1008_description {
    font-size: calc(clamp(1rem, 1.5vw, 1.125rem) * var(--body-scale, 1));
    line-height: var(--leading, 1.7);
    color: var(--text-muted, #64748b);
    max-width: 600px;
    margin: 0;
}

/* ── CTA row ────────────────────────────────────────────────── */
.pub_hero_1008_ctaRow {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 12px);
    flex-wrap: wrap;
    justify-content: center;
}

.pub_hero_1008_primaryBtn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    padding: var(--space-card-padding, 24px) 28px;
    background: var(--cta-bg, var(--accent, #6366f1));
    color: var(--cta-text, #ffffff);
    font-size: calc(0.9375rem * var(--body-scale, 1));
    font-weight: 600;
    border-radius: var(--radius-full, 999px);
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-sm, none);
    transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}

.pub_hero_1008_primaryBtn:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

.pub_hero_1008_secondaryBtn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    padding: calc(var(--space-card-padding, 24px) - 2px) 26px;
    background: transparent;
    color: var(--text, #0f172a);
    font-size: calc(0.9375rem * var(--body-scale, 1));
    font-weight: 600;
    border-radius: var(--radius-full, 999px);
    border: var(--border-card, 1.5px solid var(--btn-border, rgba(15, 23, 42, 0.15)));
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow-sm, none);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}

.pub_hero_1008_secondaryBtn:hover {
    border-color: var(--accent, #6366f1);
    background: var(--btn-hover-bg, rgba(99, 102, 241, 0.04));
}

/* ── Trust bar ──────────────────────────────────────────────── */
.pub_hero_1008_trustRow {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 12px);
    flex-wrap: wrap;
    justify-content: center;
}

.pub_hero_1008_trustLabel {
    font-size: calc(0.8125rem * var(--body-scale, 1));
    font-weight: 500;
    color: var(--text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: var(--tracking, 0.06em);
    white-space: nowrap;
}

.pub_hero_1008_trustLogo {
    padding: 5px 14px;
    background: var(--surface-bg, rgba(15, 23, 42, 0.04));
    border: var(--border-card, 1px solid var(--surface-border, rgba(15, 23, 42, 0.08)));
    border-radius: var(--radius-md, 6px);
    font-size: calc(0.8125rem * var(--heading-scale, 1));
    font-weight: 600;
    color: var(--text-muted, #64748b);
    letter-spacing: var(--tracking, 0.02em);
}

/* ── Stats row ──────────────────────────────────────────────── */
.pub_hero_1008_statsRow {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex-wrap: wrap;
    justify-content: center;
    border: var(--border-card, 1px solid var(--surface-border, rgba(15, 23, 42, 0.08)));
    border-radius: var(--radius-xl, 16px);
    overflow: hidden;
    background: var(--stats-bg, rgba(255, 255, 255, 0.7));
    backdrop-filter: blur(12px);
}

.pub_hero_1008_statItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-content-gap, 4px);
    padding: var(--space-card-padding, 24px) 40px;
    position: relative;
}

.pub_hero_1008_statItem+.pub_hero_1008_statItem::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: var(--divider, rgba(15, 23, 42, 0.1));
}

.pub_hero_1008_statNumber {
    font-size: calc(clamp(1.375rem, 2.5vw, 1.75rem) * var(--heading-scale, 1));
    font-weight: 800;
    line-height: var(--leading, 1);
    letter-spacing: var(--tracking, -0.02em);
    background: linear-gradient(135deg,
            var(--accent, #6366f1) 0%,
            var(--accent-alt-2, rgba(168, 85, 247, 0.85)) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pub_hero_1008_statLabel {
    font-size: calc(0.8125rem * var(--body-scale, 1));
    font-weight: 500;
    color: var(--text-muted, #64748b);
    white-space: nowrap;
}

/* ── Hero image ─────────────────────────────────────────────── */
.pub_hero_1008_imageWrap {
    width: 100%;
    max-width: var(--max-w, 900px);
    border-radius: var(--radius-xl, 16px);
    overflow: hidden;
    box-shadow:
        var(--shadow-sm, 0 0 0 1px rgba(15, 23, 42, 0.06)),
        var(--shadow-xl, 0 20px 60px -10px rgba(15, 23, 42, 0.18)),
        var(--shadow-md, 0 4px 16px -4px rgba(15, 23, 42, 0.1));
    position: relative;
}

.pub_hero_1008_heroImg {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
    .pub_hero_1008_container {
        gap: var(--space-gap, 24px);
    }

    .pub_hero_1008_splitOuter {
        padding: 0 16px;
    }

    .pub_hero_1008_splitWrap {
        gap: var(--space-gap, 24px);
    }

    .pub_hero_1008_statItem {
        padding: var(--space-card-padding, 24px) 24px;
    }

    .pub_hero_1008_ctaRow {
        flex-direction: column;
        width: 100%;
    }

    .pub_hero_1008_primaryBtn,
    .pub_hero_1008_secondaryBtn {
        width: 100%;
        justify-content: center;
    box-shadow: var(--shadow-sm, none);
    }

    .pub_hero_1008_trustRow {
        gap: var(--space-content-gap, 8px);
    }
}

/* PUB-SERVICE-1008 — Clarity Services
 * 1008 series: white bg + indigo #6366f1 accent · clean minimal SaaS
 * JS states: [data-visible='true'] for scroll reveal (SSR only).
 */

/* ── Root / Section ─────────────────────────────────────────────────────── */
.pub_service_1008_root {
    --radial-1: rgba(99, 102, 241, 0.07);
    --radial-2: rgba(168, 85, 247, 0.05);
    --badge-border: rgba(99, 102, 241, 0.2);
    --title-grad-start: #6366f1;
    --title-grad-end: #a78bfa;
    --card-shadow: rgba(99, 102, 241, 0.12);
    --card-hover-border: rgba(99, 102, 241, 0.35);
    --badge-white: #ffffff;
    --icon-h: 52px;
    --link-hover: #8b5cf6;
    --btn-white: #ffffff;
    width: 100%;
    padding: var(--pt, 96px) 24px var(--pb, 96px);
    background: var(--texture-bg, none),
        radial-gradient(ellipse 60% 45% at 100% 0%, var(--radial-1, rgba(99, 102, 241, 0.07)) 0%, transparent 60%),
        radial-gradient(ellipse 45% 35% at 0% 100%, var(--radial-2, rgba(168, 85, 247, 0.05)) 0%, transparent 55%),
        color-mix(in srgb, color-mix(in srgb, var(--bg, #ffffff) calc(var(--material-bg-opacity, 1) * 100%), transparent) calc(var(--material-bg-opacity, 1) * 100%), transparent);
    font-family: var(--font-body, system-ui, -apple-system, sans-serif);
    color: var(--text, #0f172a);
    overflow: hidden;
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Container ──────────────────────────────────────────────────────────── */
.pub_service_1008_container {
    max-width: var(--max-w, 1200px);
    margin-inline: auto;
    padding-inline: 24px;
}

/* ── Section Header ─────────────────────────────────────────────────────── */
.pub_service_1008_headerWrap {
    text-align: center;
    margin-bottom: 56px;
}

.pub_service_1008_sectionHeader {
    display: flex;
    flex-direction: column;
    align-items: center;
gap: var(--space-content-gap, 12px);
}

.pub_service_1008_badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 6px);
    background: var(--badge-bg, rgba(99, 102, 241, 0.08));
    color: var(--badge-text, #6366f1);
    border: 1px solid var(--badge-border, rgba(99, 102, 241, 0.2));
    font-size: calc(0.8125rem * var(--heading-scale, 1));
    font-weight: 600;
    letter-spacing: var(--tracking, 0.04em);
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: var(--radius-full, 999px);
    margin-bottom: 4px;
}

.pub_service_1008_title {
    font-family: var(--font-heading, var(--font-body, system-ui, sans-serif));
    font-weight: 800;
    color: var(--text, #0f172a);
    line-height: var(--leading, 1.15);
    margin: 0;
    letter-spacing: var(--tracking, -0.03em);
}

.pub_service_1008_titleAccent {
    display: block;
    font-weight: 900;
    background: linear-gradient(110deg, var(--title-grad-start, #6366f1) 0%, var(--primary, #8b5cf6) 55%, var(--title-grad-end, #a78bfa) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: var(--leading, 1.2);
    letter-spacing: var(--tracking, -0.035em);
    margin-top: 0.06em;
    padding-bottom: 0.1em;
}

.pub_service_1008_description {
    color: var(--text-muted, #64748b);
    line-height: var(--leading, 1.7);
    max-width: 600px;
    margin: 0 auto;
}

/* ── Services Grid ──────────────────────────────────────────────────────── */
.pub_service_1008_grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), 1fr);
gap: var(--space-gap, 24px);
}

/* ── Service Card ───────────────────────────────────────────────────────── */
.pub_service_1008_card {
    background-color: var(--card-bg, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-xl, 16px);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
gap: var(--space-content-gap, 12px);
    position: relative;
    transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
    will-change: transform;
}

.pub_service_1008_card:hover {
    transform: translateY(-3px);
    border-color: var(--card-hover-border, rgba(99, 102, 241, 0.35));
}

/* Icon wrapper */
.pub_service_1008_iconWrap {
    width: var(--icon-h, 52px);
    min-height: var(--icon-h, 52px);
    border-radius: var(--radius-lg, 12px);
    background: var(--icon-bg, rgba(99, 102, 241, 0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 4px;
}

.pub_service_1008_icon {
    font-size: calc(1.5rem * var(--body-scale, 1));
    color: var(--icon, #6366f1);
    line-height: var(--leading, 1);
}

/* Card badge */
.pub_service_1008_cardBadge {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: var(--accent, #f59e0b);
    color: var(--badge-white, #ffffff);
    letter-spacing: var(--tracking, 0.06em);
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 100px;
}

/* Card title */
.pub_service_1008_cardTitle {
    font-family: var(--font-heading, var(--font-body, system-ui, sans-serif));
    font-weight: 700;
    color: var(--text, #0f172a);
    line-height: var(--leading, 1.3);
    margin: 0;
}

/* Card description */
.pub_service_1008_cardDesc {
    font-size: calc(0.9375rem * var(--body-scale, 1));
    color: var(--text-muted, #64748b);
    line-height: var(--leading, 1.65);
    margin: 0;
    flex-grow: 1;
}

/* Feature list */
.pub_service_1008_featureList {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 8px);
    margin-top: 4px;
}

.pub_service_1008_featureItem {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    font-size: calc(0.875rem * var(--body-scale, 1));
    color: var(--text, #0f172a);
}

.pub_service_1008_featureItem i {
    font-size: calc(1rem * var(--body-scale, 1));
    color: var(--primary, #6366f1);
    flex-shrink: 0;
}

/* Card link */
.pub_service_1008_cardLink {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 6px);
    margin-top: 8px;
    font-size: calc(0.875rem * var(--body-scale, 1));
    font-weight: 600;
    color: var(--primary, #6366f1);
    text-decoration: none;
    transition: gap 0.18s ease, color 0.18s ease;
}

.pub_service_1008_cardLink:hover {
    gap: var(--space-content-gap, 10px);
    color: var(--link-hover, #8b5cf6);
}

.pub_service_1008_cardLink i {
    font-size: calc(1rem * var(--body-scale, 1));
    transition: transform 0.18s ease;
}

.pub_service_1008_cardLink:hover i {
    transform: translateX(3px);
}

/* ── Scroll reveal ──────────────────────────────────────────────────────── */
.pub_service_1008_root [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.pub_service_1008_root [data-reveal][data-visible='true'] {
    opacity: 1;
    transform: translateY(0);
}

/* ── CTA Row ────────────────────────────────────────────────────────────── */
.pub_service_1008_ctaWrap {
    margin-top: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
gap: var(--space-gap, 24px);
    background-color: var(--card-bg, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-xl, 16px);
    padding: 32px 40px;
    flex-wrap: wrap;
}

.pub_service_1008_ctaText {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 6px);
}

.pub_service_1008_ctaHeadline {
    font-family: var(--font-heading, var(--font-body, system-ui, sans-serif));
    font-weight: 700;
    color: var(--text, #0f172a);
    margin: 0;
}

.pub_service_1008_ctaDesc {
    font-size: calc(0.9375rem * var(--body-scale, 1));
    color: var(--text-muted, #64748b);
    margin: 0;
}

.pub_service_1008_ctaBtns {
    display: flex;
    align-items: center;
gap: var(--space-content-gap, 12px);
    flex-wrap: wrap;
}

/* Primary button */
.pub_service_1008_btnPrimary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    background-color: var(--cta-bg, #6366f1);
    color: var(--cta-text, #ffffff);
    font-size: calc(0.9375rem * var(--body-scale, 1));
    font-weight: 600;
    border-radius: var(--radius-lg, 8px);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.pub_service_1008_btnPrimary:hover {
    background-color: var(--cta-hover, #4f46e5);
    transform: translateY(-1px);
}

/* Secondary button */
.pub_service_1008_btnSecondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    background-color: transparent;
    color: var(--cta2-text, #6366f1);
    border: 2px solid var(--cta2-border, #6366f1);
    font-size: calc(0.9375rem * var(--body-scale, 1));
    font-weight: 600;
    border-radius: var(--radius-lg, 8px);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.pub_service_1008_btnSecondary:hover {
    background-color: var(--cta2-border, #6366f1);
    color: var(--btn-white, #ffffff);
    transform: translateY(-1px);
}

/* ── Responsive — 1024px ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .pub_service_1008_grid[data-cols='4'] {
        grid-template-columns: repeat(2, 1fr);
    }

    .pub_service_1008_grid[data-cols='3'] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Responsive — 768px ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .pub_service_1008_headerWrap {
        margin-bottom: 36px;
    }

    .pub_service_1008_grid,
    .pub_service_1008_grid[data-cols='4'],
    .pub_service_1008_grid[data-cols='3'],
    .pub_service_1008_grid[data-cols='2'] {
        grid-template-columns: 1fr;
    }

    .pub_service_1008_ctaWrap {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--space-card-padding, 24px);
    }

    .pub_service_1008_ctaBtns {
        width: 100%;
    }

    .pub_service_1008_btnPrimary,
    .pub_service_1008_btnSecondary {
        width: 100%;
        justify-content: center;
    }
}

/* ── Responsive — 480px ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .pub_service_1008_container {
        padding-inline: 16px;
    }

    .pub_service_1008_card {
        padding: 24px 20px;
    }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pub_service_1008_card {
        transition: none;
    }

    .pub_service_1008_cardLink,
    .pub_service_1008_cardLink i {
        transition: none;
    }

    .pub_service_1008_btnPrimary,
    .pub_service_1008_btnSecondary {
        transition: none;
    }

    .pub_service_1008_root [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ============================================================
   PUB-TESTIMONIAL-1008 — Clarity Testimonials
   Light SaaS | 3-column card grid · star ratings · avatars
   1008 series: #ffffff bg · #6366f1 accent · clean minimal
   ============================================================ */

/* ── Section ─────────────────────────────────────────────────── */
.pub_testimonial_1008_section {
    --radial-1: rgba(99, 102, 241, 0.07);
    --radial-2: rgba(168, 85, 247, 0.05);
    --badge-border: rgba(99, 102, 241, 0.2);
    --accent-start: #6366f1;
    --accent-light: #a78bfa;
    --card-hover-shadow: rgba(99, 102, 241, 0.12);
    --card-hover-border: rgba(99, 102, 241, 0.3);
    --card-badge-bg: rgba(99, 102, 241, 0.07);
    --card-badge-border: rgba(99, 102, 241, 0.15);
    --avatar-bg: rgba(99, 102, 241, 0.1);
    --avatar-border: rgba(99, 102, 241, 0.15);
    --avatar-size: 44px;
    width: 100%;
    padding: var(--pt, 96px) 24px var(--pb, 96px);
    background: var(--texture-bg, none),
        radial-gradient(ellipse 70% 50% at 100% 0%, var(--radial-1, rgba(99, 102, 241, 0.07)) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 0% 100%, var(--radial-2, rgba(168, 85, 247, 0.05)) 0%, transparent 55%),
        color-mix(in srgb, color-mix(in srgb, var(--bg, #ffffff) calc(var(--material-bg-opacity, 1) * 100%), transparent) calc(var(--material-bg-opacity, 1) * 100%), transparent);
    font-family: var(--font-body, system-ui, -apple-system, sans-serif);
    color: var(--text, #0f172a);
    overflow: hidden;
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Container ──────────────────────────────────────────────── */
.pub_testimonial_1008_container {
    max-width: var(--max-w, 1200px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 56px;
}

/* ── Section Header ─────────────────────────────────────────── */
.pub_testimonial_1008_headerWrap {
    text-align: center;
}

.pub_testimonial_1008_sectionHeader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 680px;
    margin: 0 auto;
}

.pub_testimonial_1008_badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 6px);
    padding: 4px 14px;
    background: var(--badge-bg, rgba(99, 102, 241, 0.08));
    color: var(--badge-text, #6366f1);
    border: 1px solid var(--badge-border, rgba(99, 102, 241, 0.2));
    border-radius: var(--radius-full, 999px);
    font-size: calc(0.8125rem * var(--heading-scale, 1));
    font-weight: 600;
    letter-spacing: var(--tracking, 0.04em);
    text-transform: uppercase;
}

.pub_testimonial_1008_sectionTitle {
    font-family: var(--font-heading, var(--font-body, system-ui, sans-serif));
    font-weight: 800;
    line-height: var(--leading, 1.25);
    letter-spacing: var(--tracking, -0.03em);
    color: var(--text, #0f172a);
    margin: 0;
}

.pub_testimonial_1008_titleAccent {
    display: block;
    font-weight: 900;
    line-height: var(--leading, 1.2);
    letter-spacing: var(--tracking, -0.035em);
    margin-top: 0.1em;
    padding-bottom: 0.12em;
    background: linear-gradient(110deg, var(--accent-start, #6366f1) 0%, var(--accent, #8b5cf6) 55%, var(--accent-light, #a78bfa) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pub_testimonial_1008_sectionDesc {
    line-height: var(--leading, 1.7);
    color: var(--text-muted, #64748b);
    max-width: 600px;
    margin: 0;
}

/* ── Grid ────────────────────────────────────────────────────── */
.pub_testimonial_1008_grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), 1fr);
gap: var(--space-gap, 24px);
    align-items: start;
}

/* ── Card ────────────────────────────────────────────────────── */
.pub_testimonial_1008_card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border, rgba(99, 102, 241, 0.12));
    border-radius: var(--radius-xl, 16px);
    padding: 28px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 16px);
    position: relative;
    transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
    will-change: transform;
}

.pub_testimonial_1008_card:hover {
    transform: translateY(-3px);
    border-color: var(--card-hover-border, rgba(99, 102, 241, 0.3));
}

/* ── Card badge (top-right) ──────────────────────────────────── */
.pub_testimonial_1008_cardBadge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 3px 10px;
    background: var(--card-badge-bg, rgba(99, 102, 241, 0.07));
    color: var(--accent, #6366f1);
    border: 1px solid var(--card-badge-border, rgba(99, 102, 241, 0.15));
    border-radius: var(--radius-full, 999px);
    font-size: calc(0.6875rem * var(--heading-scale, 1));
    font-weight: 700;
    letter-spacing: var(--tracking, 0.05em);
    text-transform: uppercase;
}

/* ── Star rating ─────────────────────────────────────────────── */
.pub_testimonial_1008_ratingWrap {
    display: flex;
    gap: 3px;
    font-size: calc(1rem * var(--body-scale, 1));
    color: var(--accent, #f59e0b);
}

/* ── Quote ───────────────────────────────────────────────────── */
.pub_testimonial_1008_quoteWrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 6px);
    flex: 1;
}

.pub_testimonial_1008_quoteMark {
    font-size: calc(2.25rem * var(--body-scale, 1));
    line-height: var(--leading, 0.8);
    font-family: var(--font-heading, Georgia, 'Times New Roman', serif);
    background: linear-gradient(110deg, var(--accent-start, #6366f1) 0%, var(--accent, #8b5cf6) 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    user-select: none;
}

.pub_testimonial_1008_quoteText {
    line-height: var(--leading, 1.72);
    color: var(--text-muted, #475569);
    margin: 0;
}

/* ── Card footer ─────────────────────────────────────────────── */
.pub_testimonial_1008_cardFooter {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 10px);
    padding-top: 16px;
    border-top: 1px solid var(--border, rgba(15, 23, 42, 0.07));
}

/* ── Author row ──────────────────────────────────────────────── */
.pub_testimonial_1008_authorRow {
    display: flex;
    align-items: center;
gap: var(--space-content-gap, 12px);
}

.pub_testimonial_1008_avatar {
    width: var(--avatar-size, 44px);
    min-height: var(--avatar-size, 44px);
    border-radius: var(--radius-full, 50%);
    flex-shrink: 0;
    background: var(--avatar-bg, rgba(99, 102, 241, 0.1));
    border: 2px solid var(--avatar-border, rgba(99, 102, 241, 0.15));
    /* flex centering so initials div is centred inside the circle */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* img filled by AvatarBlock when src is present */
.pub_testimonial_1008_avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-full, 50%);
    display: block;
}

/* initials div rendered by AvatarBlock when no image */
.pub_testimonial_1008_avatar>div {
    font-size: calc(0.8125rem * var(--body-scale, 1));
    font-weight: 700;
    line-height: var(--leading, 1);
    color: var(--accent, #6366f1);
    letter-spacing: var(--tracking, 0.04em);
    text-align: center;
    user-select: none;
}

.pub_testimonial_1008_authorName {
    display: block;
    font-size: calc(0.9375rem * var(--heading-scale, 1));
    font-weight: 700;
    color: var(--text, #0f172a);
    line-height: var(--leading, 1.3);
}

.pub_testimonial_1008_authorRole {
    display: block;
    font-size: calc(0.8125rem * var(--body-scale, 1));
    color: var(--text-muted, #64748b);
    line-height: var(--leading, 1.4);
    margin-top: 1px;
}

/* ── Company name ────────────────────────────────────────────── */
.pub_testimonial_1008_companyName {
    font-size: calc(0.8125rem * var(--heading-scale, 1));
    font-weight: 600;
    color: var(--accent, #6366f1);
    letter-spacing: var(--tracking, 0.02em);
}

/* ── Company logo ────────────────────────────────────────────── */
.pub_testimonial_1008_companyLogo {
    max-height: 28px;
    width: auto;
    object-fit: contain;
    opacity: 0.65;
    filter: grayscale(0.3);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .pub_testimonial_1008_grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .pub_testimonial_1008_grid {
        grid-template-columns: 1fr;
    }

    .pub_testimonial_1008_card {
        padding: 24px 20px 20px;
    }
}

/* ── Scroll Reveal ─────────────────────────────────────────────────────── */
.pub_testimonial_1008_section [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.pub_testimonial_1008_section [data-reveal][data-visible='true'] {
    opacity: 1;
    transform: none;
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pub_testimonial_1008_section [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .pub_testimonial_1008_card {
        transition: none;
    }

    .pub_testimonial_1008_card:hover {
        transform: none;
    }
}

/* ─────────────────────────────────────────────────────────────
   PUB-CTA-1008 — Clarity CTA
   1008 series: deep indigo gradient bg · centered layout
   Pairs with: PUB-HERO-1008, PUB-NAV-1008, PUB-SERVICE-1008,
               PUB-GALLERY-1008, PUB-MENU-1008
   ───────────────────────────────────────────────────────────── */

/* ── Root ───────────────────────────────────────────────────── */
.pub_cta_1008_root {
    --radial-1: rgba(139, 92, 246, 0.38);
    --radial-2: rgba(99, 102, 241, 0.28);
    --radial-3: rgba(167, 139, 250, 0.22);
    --badge-bg: rgba(165, 180, 252, 0.15);
    --badge-border: rgba(165, 180, 252, 0.3);
    --accent-start: #a78bfa;
    --accent-mid: #c4b5fd;
    --accent-end: #e0d7ff;
    --desc-color: rgba(248, 250, 252, 0.72);
    --trust-color: rgba(248, 250, 252, 0.82);
    --btn-primary-bg: #ffffff;
    --btn-primary-text: #1e1b4b;
    --btn-primary-hover-bg: #ede9fe;
    --btn-primary-shadow: rgba(165, 180, 252, 0.4);
    --btn-secondary-border: rgba(248, 250, 252, 0.35);
    --btn-secondary-hover-bg: rgba(248, 250, 252, 0.08);
    --btn-secondary-hover-border: rgba(248, 250, 252, 0.6);
    --stars-color: #fbbf24;
    --review-color: rgba(248, 250, 252, 0.8);
    width: 100%;
    padding: var(--pt, 96px) 24px var(--pb, 96px);
    background: var(--texture-bg, none),
        radial-gradient(ellipse 70% 55% at 50% 0%, var(--radial-1, rgba(139, 92, 246, 0.38)) 0%, transparent 65%),
        radial-gradient(ellipse 50% 40% at 0% 100%, var(--radial-2, rgba(99, 102, 241, 0.28)) 0%, transparent 55%),
        radial-gradient(ellipse 40% 35% at 100% 80%, var(--radial-3, rgba(167, 139, 250, 0.22)) 0%, transparent 55%),
        color-mix(in srgb, color-mix(in srgb, var(--bg, #1e1b4b) calc(var(--material-bg-opacity, 1) * 100%), transparent) calc(var(--material-bg-opacity, 1) * 100%), transparent);
    font-family: var(--font-body, system-ui, -apple-system, sans-serif);
    color: var(--text, #f8fafc);
    overflow: hidden;
    position: relative;
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Container ──────────────────────────────────────────────── */
.pub_cta_1008_container {
    max-width: var(--max-w, 860px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-gap, 40px);
    text-align: center;
    position: relative;
    z-index: var(--z-base, 1);
    /* above decorative radial gradients */
}

/* ── Badge ──────────────────────────────────────────────────── */
.pub_cta_1008_badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 6px);
    padding: 5px 16px;
    background: var(--badge-bg, rgba(165, 180, 252, 0.15));
    border: 1px solid var(--badge-border, rgba(165, 180, 252, 0.3));
    border-radius: var(--radius-full, 999px);
    font-size: calc(0.8125rem * var(--heading-scale, 1));
    font-weight: 600;
    letter-spacing: var(--tracking, 0.04em);
    text-transform: uppercase;
    color: var(--text, #f8fafc);
}

/* ── Header Wrap ────────────────────────────────────────────── */
.pub_cta_1008_headerWrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-content-gap, 16px);
    max-width: 680px;
}

/* ── Title ──────────────────────────────────────────────────── */
.pub_cta_1008_title {
    font-family: var(--font-heading, var(--font-body, system-ui, sans-serif));
    font-weight: 800;
    line-height: var(--leading, 1.1);
    letter-spacing: var(--tracking, -0.03em);
    color: var(--text, #f8fafc);
    margin: 0;
}

/* ── Title Accent (gradient light purple) ───────────────────── */
.pub_cta_1008_titleAccent {
    display: block;
    font-weight: 900;
    line-height: var(--leading, 1.1);
    letter-spacing: var(--tracking, -0.035em);
    margin: 0;
    background: linear-gradient(110deg, var(--accent-start, #a78bfa) 0%, var(--accent-mid, #c4b5fd) 50%, var(--accent-end, #e0d7ff) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-bottom: 0.1em;
}

/* ── Description ────────────────────────────────────────────── */
.pub_cta_1008_description {
    line-height: var(--leading, 1.7);
    color: var(--desc-color, rgba(248, 250, 252, 0.72));
    max-width: 560px;
    margin: 0;
}

/* ── Trust Row ──────────────────────────────────────────────── */
.pub_cta_1008_trustRow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 28px;
}

.pub_cta_1008_trustItem {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: calc(0.875rem * var(--body-scale, 1));
    font-weight: 500;
    color: var(--trust-color, rgba(248, 250, 252, 0.82));
}

/* ── Button Group ───────────────────────────────────────────── */
.pub_cta_1008_btnGroup {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
gap: var(--space-content-gap, 12px);
}

.pub_cta_1008_btnPrimary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    padding: 14px 32px;
    background: var(--btn-primary-bg, #ffffff);
    color: var(--btn-primary-text, #1e1b4b);
    font-size: calc(1rem * var(--body-scale, 1));
    font-weight: 700;
    border-radius: var(--radius-lg, 8px);
    text-decoration: none;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

.pub_cta_1008_btnPrimary:hover {
    background: var(--btn-primary-hover-bg, #ede9fe);
    transform: translateY(-2px);
}

.pub_cta_1008_btnSecondary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    padding: 14px 32px;
    background: transparent;
    color: var(--text, #f8fafc);
    font-size: calc(1rem * var(--body-scale, 1));
    font-weight: 600;
    border-radius: var(--radius-lg, 8px);
    border: 1.5px solid var(--btn-secondary-border, rgba(248, 250, 252, 0.35));
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

.pub_cta_1008_btnSecondary:hover {
    background: var(--btn-secondary-hover-bg, rgba(248, 250, 252, 0.08));
    border-color: var(--btn-secondary-hover-border, rgba(248, 250, 252, 0.6));
    transform: translateY(-2px);
}

/* ── Social Proof Badge ─────────────────────────────────────── */
.pub_cta_1008_socialProof {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 10px);
    opacity: 0.85;
}

.pub_cta_1008_stars {
    color: var(--stars-color, #fbbf24);
}

.pub_cta_1008_reviewCount {
    font-size: calc(0.875rem * var(--body-scale, 1));
    font-weight: 500;
    color: var(--review-color, rgba(248, 250, 252, 0.8));
}

/* ── Scroll Reveal ──────────────────────────────────────────── */
.pub_cta_1008_root [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.pub_cta_1008_root [data-reveal][data-visible='true'] {
    opacity: 1;
    transform: none;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 576px) {

    .pub_cta_1008_btnPrimary,
    .pub_cta_1008_btnSecondary {
        width: 100%;
        justify-content: center;
    }

    .pub_cta_1008_btnGroup {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
    }
}

/* ── Reduced Motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pub_cta_1008_root [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .pub_cta_1008_btnPrimary,
    .pub_cta_1008_btnSecondary {
        transition: none;
    }
}

/* ============================================================
   PUB-FOOTER-1008 — Universal Footer (4-column grid layout)
   1008 series: #0f172a bg · #6366f1 accent · Inter font
   Layouts: grid | stacked | minimal  (via data-layout attr)
   ============================================================ */

/* ── Root / Section wrapper ─────────────────────────────── */
.pub_footer_1008_root {
    --newsletter-input-bg: rgba(255, 255, 255, 0.06);
    --newsletter-focus-shadow: rgba(99, 102, 241, 0.2);
    --alert-color: #f87171;
    --btn-text: #fff;
    background: var(--texture-bg, none),
        color-mix(in srgb, color-mix(in srgb, var(--bg, #0f172a) calc(var(--material-bg-opacity, 1) * 100%), transparent) calc(var(--material-bg-opacity, 1) * 100%), transparent);
    color: var(--text, #e2e8f0);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    padding-top: var(--pt, 80px);
    padding-bottom: var(--pb, 40px);
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Container ───────────────────────────────────────────── */
.pub_footer_1008_container {
    max-width: var(--max-w, 1200px);
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 3rem);
}

/* ── Main grid ───────────────────────────────────────────── */
.pub_footer_1008_mainGrid {
    display: grid;
    grid-template-columns: 1.8fr 2fr 1fr 1.4fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
}

/* stacked layout overrides */
.pub_footer_1008_root[data-layout="stacked"] .pub_footer_1008_mainGrid {
    grid-template-columns: 1fr;
    gap: var(--space-gap, 2rem);
}

/* minimal layout overrides */
.pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_mainGrid {
    grid-template-columns: 1fr auto;
    gap: var(--space-gap, 2rem);
    align-items: center;
}

.pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_contactCol,
.pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_newsletterCol {
    display: none;
}

/* ── Brand Column ────────────────────────────────────────── */
.pub_footer_1008_brandCol {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.75rem);
}

.pub_footer_1008_brandLogo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 0.5rem);
    color: var(--accent, #6366f1);
    font-family: var(--font-heading, var(--font-body, 'Inter', system-ui, sans-serif));
    font-weight: 700;
    letter-spacing: var(--tracking, -0.02em);
    text-decoration: none;
    margin-bottom: 0.25rem;
    border-radius: var(--radius-sm, 4px);
}

.pub_footer_1008_brandLogo:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 3px;
}

.pub_footer_1008_brandLogo i {
    color: var(--accent, #6366f1);
}

.pub_footer_1008_brandDesc {
    color: var(--text-muted, #94a3b8);
    line-height: var(--leading, 1.65);
    margin: 0;
}

/* ── Social Icons ────────────────────────────────────────── */
.pub_footer_1008_socialRow {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 0.5rem);
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.pub_footer_1008_socialLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-height: 36px;
    border-radius: var(--radius-lg, 8px);
    background: var(--social-bg, rgba(255, 255, 255, 0.08));
    color: var(--text-muted, #94a3b8);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    border: 1px solid var(--footer-border, rgba(255, 255, 255, 0.08));
}

.pub_footer_1008_socialLink:hover {
    background: var(--accent, #6366f1);
    color: var(--social-hover-text, #fff);
    transform: translateY(-2px);
    border-color: var(--accent, #6366f1);
}

.pub_footer_1008_socialLink i {
    font-size: calc(1rem * var(--body-scale, 1));
    line-height: var(--leading, 1);
}

/* ── Links Grid ──────────────────────────────────────────── */
.pub_footer_1008_linksArea {
    /* wrapper for the links grid zone */
}

.pub_footer_1008_linksGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: clamp(1rem, 2vw, 2rem);
}

.pub_footer_1008_linksCol {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Reset browser list defaults inside FooterLinksColumn */
.pub_footer_1008_linksCol ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.25rem);
}

.pub_footer_1008_linksCol li {
    margin: 0;
    padding: 0;
}

/* ── Column Headings ─────────────────────────────────────── */
.pub_footer_1008_colHeading {
    color: var(--text, #e2e8f0);
    font-family: var(--font-heading, var(--font-body, 'Inter', system-ui, sans-serif));
    font-weight: 700;
    letter-spacing: var(--tracking, 0.1em);
    text-transform: uppercase;
    margin: 0 0 0.875rem;
}

/* ── Nav Column Links ────────────────────────────────────── */
.pub_footer_1008_footerLink {
    display: inline-block;
    color: var(--text-muted, #94a3b8);
    text-decoration: none;
    line-height: var(--leading, 1.5);
    padding: 0.125rem 0;
    border-radius: var(--radius-sm, 4px);
    transition: color 180ms ease;
}

.pub_footer_1008_footerLink:hover {
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_footerLink:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 2px;
    color: var(--text, #e2e8f0);
}

/* ── Contact Column ──────────────────────────────────────── */
.pub_footer_1008_contactCol {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.25rem);
}

.pub_footer_1008_contactItem {
    display: flex;
    align-items: flex-start;
    gap: var(--space-content-gap, 0.5rem);
    color: var(--text-muted, #94a3b8);
    line-height: var(--leading, 1.5);
    margin-bottom: 0.5rem;
}

.pub_footer_1008_contactIcon {
    color: var(--accent, #6366f1);
    font-size: calc(1rem * var(--body-scale, 1));
    margin-top: 0.1em;
    flex-shrink: 0;
}

.pub_footer_1008_contactText {
    color: var(--text-muted, #94a3b8);
    text-decoration: none;
    border-radius: var(--radius-sm, 4px);
    transition: color 180ms ease;
}

.pub_footer_1008_contactText:hover {
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_contactText:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 2px;
    color: var(--text, #e2e8f0);
}

/* ── Newsletter Column ───────────────────────────────────── */
.pub_footer_1008_newsletterCol {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.75rem);
}

/* Space out the input and button inside the newsletter form */
.pub_footer_1008_newsletterCol form {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.625rem);
}

/* Email validation error message — min-height reserves 1 line always to prevent CLS */
.pub_footer_1008_newsletterCol form span[role="alert"] {
    display: block;
    min-height: calc(0.8125rem * 1.4);
    color: var(--alert-color, #f87171);
    font-size: calc(0.8125rem * var(--body-scale, 1));
    line-height: var(--leading, 1.4);
}

.pub_footer_1008_newsletterInput {
    width: 100%;
    background: var(--newsletter-input-bg, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
    border-radius: var(--radius-md, 6px);
    color: var(--text, #e2e8f0);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: calc(0.9375rem * var(--body-scale, 1));
    padding: 0.625rem 0.875rem;
    outline: none;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.pub_footer_1008_newsletterInput:focus {
    border-color: var(--accent, #6366f1);
}

.pub_footer_1008_newsletterInput::placeholder {
    color: var(--text-muted, #64748b);
}

.pub_footer_1008_newsletterBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent, #6366f1);
    color: var(--btn-text, #fff);
    border: none;
    border-radius: var(--radius-md, 6px);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: calc(0.9375rem * var(--body-scale, 1));
    font-weight: 600;
    letter-spacing: var(--tracking, -0.01em);
    padding: 0.625rem 1.25rem;
    cursor: pointer;
    transition: opacity 150ms ease;
}

.pub_footer_1008_newsletterBtn:hover {
    opacity: 0.88;
}

.pub_footer_1008_newsletterBtn:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 3px;
    opacity: 0.88;
}

/* ── Map ─────────────────────────────────────────────────── */
.pub_footer_1008_mapWrapper {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: var(--radius-lg, 8px);
    overflow: hidden;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

/* ── App Badges ──────────────────────────────────────────── */
.pub_footer_1008_appBadges {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 1rem);
    flex-wrap: wrap;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* ── Divider ─────────────────────────────────────────────── */
.pub_footer_1008_divider {
    border: none;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    margin: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(1rem, 2vw, 1.5rem);
}

/* ── Bottom Bar ──────────────────────────────────────────── */
.pub_footer_1008_bottomBarWrapper {
    background: var(--bottom-bg, transparent);
}

.pub_footer_1008_bottomBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-content-gap, 0.75rem);
}

.pub_footer_1008_copyright {
    color: var(--text-muted, #64748b);
    margin: 0;
    line-height: var(--leading, 1.5);
}

.pub_footer_1008_legalLinks {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.125rem;
}

.pub_footer_1008_legalLink {
    color: var(--text-muted, #64748b);
    text-decoration: none;
    border-radius: var(--radius-sm, 4px);
    padding: 0.125rem 0.25rem;
    transition: color 180ms ease;
}

.pub_footer_1008_legalLink:hover {
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_legalLink:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 2px;
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_legalSep {
    color: var(--text-muted, #475569);
    font-size: calc(0.875rem * var(--body-scale, 1));
    user-select: none;
}

/* ── Certifications Row ──────────────────────────────────── */
.pub_footer_1008_certsRow {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 1rem);
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* ── Interactive states ──────────────────────────────────── */

/* ── @media 1024px ───────────────────────────────────────── */
@media (max-width: 1024px) {
    .pub_footer_1008_mainGrid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-gap, 2rem);
    }

    .pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_mainGrid {
        grid-template-columns: 1fr;
    }
}

/* ── @media 768px ────────────────────────────────────────── */
@media (max-width: 768px) {
    .pub_footer_1008_mainGrid {
        grid-template-columns: 1fr;
        gap: var(--space-gap, 1.75rem);
    }

    .pub_footer_1008_linksGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pub_footer_1008_bottomBar {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-content-gap, 0.5rem);
    }
}

/* ── @media 480px ────────────────────────────────────────── */
@media (max-width: 480px) {
    .pub_footer_1008_linksGrid {
        grid-template-columns: 1fr;
    }

    .pub_footer_1008_appBadges {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── prefers-reduced-motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .pub_footer_1008_footerLink,
    .pub_footer_1008_contactText,
    .pub_footer_1008_legalLink,
    .pub_footer_1008_brandLogo,
    .pub_footer_1008_newsletterInput,
    .pub_footer_1008_newsletterBtn {
        transition: none;
    }
}

/* Page: about */
/* ============================================================
   PUB-NAV-1008 — Clarity SaaS Nav
   Series 1008 · Full-width sticky nav · Light theme · Inter font
   State: data-scrolled on .navBar  |  data-open on .mobileDrawer/.drawerOverlay
   ============================================================ */

/* ── Root ────────────────────────────────────────────────── */
.pub_nav_1008_navRoot {
    /* Scoped design tokens — not user-controlled */
    --t: 0.2s ease;
    --t-slow: 0.32s ease;
    --r: 6px;
    --r-lg: 10px;
    --r-btn: 8px;
    --fs-brand: clamp(15px, 1.5vw, 17px);
    --fs-nav: clamp(13px, 1.3vw, 14px);
    --fs-dd: clamp(12px, 1.2vw, 13.5px);
    --fs-drawer: clamp(14px, 1.4vw, 15px);
    --fs-icon: clamp(18px, 1.5vw, 20px);
    --fs-caret: 11px;
    --hover-bg: rgba(37, 99, 235, 0.06);

    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    isolation: isolate;
    /* ✅ Ensure nav stacking context sits above page content */
    position: relative;
    z-index: var(--z-nav, 1000);
    background-image: var(--texture-bg, none);
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Full-width Bar ──────────────────────────────────────── */
.pub_nav_1008_navBar {
    position: var(--navbar-position, fixed);
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav, 1000);
    /* above page content, below drawer overlay */
    background-color: var(--bg, #ffffff);
    border-bottom: 1px solid var(--border, #e5e7eb);
    transition:
        border-color var(--t, 0.2s ease),
        box-shadow var(--t, 0.2s ease);
    padding-top: var(--pt, 0);
    padding-bottom: var(--pb, 0);
}

.pub_nav_1008_navBar[data-scrolled='true'] {
    border-color: var(--border, #e5e7eb);
}

/* ── Inner container ─────────────────────────────────────── */
.pub_nav_1008_navInner {
    max-width: var(--max-w, 1200px);
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 40px);
    min-height: var(--nav-h, 72px);
    display: flex;
    align-items: center;
    justify-content: space-between;
gap: var(--space-gap, 32px);
}

/* ── Logo ────────────────────────────────────────────────── */
.pub_nav_1008_logo {
  /* composed: logo from NavBase.module.css */
  display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity var(--t, 0.22s ease);
    /* gap, margin, color: set in component */
    gap: var(--space-content-gap, 8px);
    color: var(--text, #374151);
    text-decoration: none;
}

.pub_nav_1008_logoMark {
    font-size: var(--fs-icon, clamp(18px, 1.5vw, 20px));
    color: var(--cta-bg, #2563eb);
    line-height: var(--leading, 1);
}

.pub_nav_1008_logoWord {
    font-size: var(--fs-brand, clamp(15px, 1.5vw, 17px));
    font-weight: 700;
    letter-spacing: var(--tracking, -0.02em);
    color: var(--text, #374151);
    white-space: nowrap;
}

.pub_nav_1008_logoImg {
  /* composed: logoImg from NavBase.module.css */
  object-fit: contain;
    display: block;
    /* width, height: set via CSS vars in component */
    width: var(--brand-image-width, 160px);
    height: var(--brand-image-height, 40px);
}

/* ── Center: Desktop nav links ───────────────────────────── */
.pub_nav_1008_navCenter {
    flex: 1;
    display: flex;
    justify-content: center;
}

.pub_nav_1008_navLinks {
  /* composed: navLinks from NavBase.module.css */
  display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    /* gap: set in component */
    gap: var(--space-content-gap, 4px);
}

.pub_nav_1008_dropWrap {
    position: relative;
}

.pub_nav_1008_navLink {
  /* composed: navLink from NavBase.module.css */
  display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: color var(--t, 0.22s ease), background-color var(--t, 0.22s ease);
    /* padding, font-size, font-weight, color, border-radius: set in component */
    padding: 6px 10px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 500;
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
}

.pub_nav_1008_navLink:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_navLinkBtn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 4px);
    padding: 6px 10px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 500;
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    background: none;
    border: none;
    cursor: pointer;
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
}

.pub_nav_1008_navLinkBtn:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_navCaret {
    font-size: var(--fs-caret, 11px);
    transition: transform var(--t, 0.2s ease);
}

/* ── Dropdown panel ──────────────────────────────────────── */
.pub_nav_1008_navDropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 160px;
    background-color: var(--bg, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--r-lg, 10px);
    padding: 6px;
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* open/close via data-open */
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-6px);
    transition:
        opacity var(--t, 0.2s ease),
        transform var(--t, 0.2s ease);
    z-index: var(--z-dropdown, 1200);
    /* above nav links, below sticky bar */
}

.pub_nav_1008_navDropdown[data-open='true'] {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.pub_nav_1008_ddItem {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    padding: 8px 12px;
    font-size: var(--fs-dd, clamp(12px, 1.2vw, 13.5px));
    font-weight: 500;
    color: var(--text, #374151);
    text-decoration: none;
    border-radius: var(--r, 6px);
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
    white-space: nowrap;
}

.pub_nav_1008_ddItem:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

/* ── Right area ──────────────────────────────────────────── */
.pub_nav_1008_navRight {
  /* composed: navRight from NavBase.module.css */
  display: flex;
    align-items: center;
    flex-shrink: 0;
    /* gap, margin: set in component */
    gap: var(--space-content-gap, 8px);
}

.pub_nav_1008_loginBtn {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 500;
    color: var(--text, #374151);
    text-decoration: none;
    border-radius: var(--r, 6px);
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
    white-space: nowrap;
}

.pub_nav_1008_loginBtn:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_navCta {
  /* composed: navCta from NavBase.module.css */
  display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: background-color var(--t, 0.22s ease), transform var(--t, 0.22s ease);
    /* padding, background, color, border-radius, font: set in component */
    padding: 7px 18px;
    background-color: var(--cta-bg, #2563eb);
    color: var(--cta-text, #ffffff);
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 600;
    border-radius: var(--r-btn, 8px);
    white-space: nowrap;
}

.pub_nav_1008_navCta:hover {
    background-color: var(--cta-hover, rgba(37, 99, 235, 0.88));
    transform: translateY(-1px);
}

/* ── Hamburger ───────────────────────────────────────────── */
.pub_nav_1008_hamburger {
  /* composed: hamburger from NavBase.module.css */
  display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    transition: background-color var(--t, 0.22s ease);
    width: 36px;
    min-height: var(--hamburger-h, 36px);
    font-size: var(--fs-icon, clamp(18px, 1.5vw, 20px));
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    display: none;
    /* visible on mobile via media query */
}

.pub_nav_1008_hamburger:hover {
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_hamburgerLine {
  /* composed: hamburgerLine from NavBase.module.css */
  display: block;
    transition: transform var(--t, 0.22s ease), opacity var(--t, 0.22s ease);
    width: 20px;
    height: 2px;
    background-color: var(--text, #374151);
    border-radius: 2px;
}

/* ── Drawer Overlay ──────────────────────────────────────── */
.pub_nav_1008_drawerOverlay {
  /* composed: drawerOverlay from NavBase.module.css */
  inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t, 0.22s ease), visibility var(--t, 0.22s ease);
    /* position, z-index, background-color: set in component */
    position: var(--drawer-position, fixed);
    z-index: var(--z-drawer, 1100);
    /* above sticky navbar, below drawer panel */
    background-color: var(--overlay-bg, rgba(17, 24, 39, 0.4));
}

.pub_nav_1008_drawerOverlay[data-open='true'] {
    opacity: 1;
    visibility: visible;
}

/* ── Mobile Drawer ───────────────────────────────────────── */
.pub_nav_1008_mobileDrawer {
  /* composed: mobileDrawer from NavBase.module.css */
  top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--t-slow, 0.36s ease);
    overflow-y: auto;
    /* position, z-index, width, background-color, border, box-shadow: set in component */
    position: var(--drawer-position, fixed);
    z-index: var(--z-drawer, 1100);
    /* above overlay, topmost drawer layer */
    width: min(320px, 85vw);
    background-color: var(--bg, #ffffff);
    border-left: 1px solid var(--border, #e5e7eb);
}

.pub_nav_1008_mobileDrawer[data-open='true'] {
    transform: translateX(0);
}

/* ── Drawer Header ───────────────────────────────────────── */
.pub_nav_1008_drawerHeader {
  /* composed: drawerHeader from NavBase.module.css */
  display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    /* padding, border: set in component */
    padding: 18px 20px;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.pub_nav_1008_drawerBrand {
  /* composed: drawerBrand from NavBase.module.css */
  display: flex;
    align-items: center;
    /* gap, font-family, font-size, color: set in component */
    gap: var(--space-content-gap, 8px);
    font-size: var(--fs-brand, clamp(15px, 1.5vw, 17px));
    font-weight: 700;
    color: var(--text, #374151);
}

.pub_nav_1008_drawerBrandMark {
    font-size: var(--fs-icon, clamp(18px, 1.5vw, 20px));
    color: var(--cta-bg, #2563eb);
}

.pub_nav_1008_drawerCloseBtn {
  /* composed: drawerCloseBtn from NavBase.module.css */
  display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color var(--t, 0.22s ease);
    /* width, height, font-size, color: set in component */
    width: 32px;
    min-height: var(--close-btn-h, 32px);
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
}

.pub_nav_1008_drawerCloseBtn:hover {
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

/* ── Drawer Links ────────────────────────────────────────── */
.pub_nav_1008_drawerLinks {
  /* composed: drawerLinks from NavBase.module.css */
  flex: 1;
    display: flex;
    flex-direction: column;
    /* padding: set in component */
    padding: 12px 12px;
    gap: 2px;
}

.pub_nav_1008_drawerLink {
  /* composed: drawerLink from NavBase.module.css */
  display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: color var(--t, 0.22s ease), background-color var(--t, 0.22s ease);
    /* padding, font-size, font-weight, color, font-family, border-radius: set in component */
    padding: 10px 12px;
    font-size: var(--fs-drawer, clamp(14px, 1.4vw, 15px));
    font-weight: 500;
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
}

.pub_nav_1008_drawerLink:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_drawerCaret {
  /* composed: drawerCaret from NavBase.module.css */
  transition: transform var(--t, 0.22s ease);
    /* font-size: set in component */
    font-size: var(--fs-caret, 11px);
}

.pub_nav_1008_drawerSub {
  /* composed: drawerSub from NavBase.module.css */
  max-height: 0;
    overflow: hidden;
    transition: max-height var(--t-slow, 0.36s ease);
    padding-left: 12px;
}

.pub_nav_1008_drawerSubLink {
  /* composed: drawerSubLink from NavBase.module.css */
  display: block;
    text-decoration: none;
    transition: color var(--t, 0.22s ease), background-color var(--t, 0.22s ease);
    /* padding, font-size, color: set in component */
    padding: 8px 12px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    display: block;
}

.pub_nav_1008_drawerSubLink:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

/* ── Drawer Footer ───────────────────────────────────────── */
.pub_nav_1008_drawerFooter {
  /* composed: drawerFooter from NavBase.module.css */
  flex-shrink: 0;
    /* padding, border: set in component */
    padding: 16px 20px;
    border-top: 1px solid var(--border, #e5e7eb);
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 10px);
}

.pub_nav_1008_drawerSecondaryBtn {
    display: block;
    text-align: center;
    padding: 10px 20px;
    font-size: var(--fs-drawer, clamp(14px, 1.4vw, 15px));
    font-weight: 500;
    color: var(--text, #374151);
    text-decoration: none;
    border-radius: var(--r-btn, 8px);
    border: 1px solid var(--border, #e5e7eb);
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
}

.pub_nav_1008_drawerSecondaryBtn:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_drawerCta {
  /* composed: drawerCta from NavBase.module.css */
  display: block;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--t, 0.22s ease);
    /* padding, background, color, border-radius, font: set in component */
    padding: 11px 20px;
    background-color: var(--cta-bg, #2563eb);
    color: var(--cta-text, #ffffff);
    font-size: var(--fs-drawer, clamp(14px, 1.4vw, 15px));
    font-weight: 600;
    border-radius: var(--r-btn, 8px);
    text-align: center;
}

.pub_nav_1008_drawerCta:hover {
    background-color: var(--cta-hover, rgba(37, 99, 235, 0.88));
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */

/* ── Focus states (accessibility — required) ─────────────── */
.pub_nav_1008_navLink:focus-visible,
.pub_nav_1008_navLinkBtn:focus-visible,
.pub_nav_1008_loginBtn:focus-visible,
.pub_nav_1008_navCta:focus-visible,
.pub_nav_1008_hamburger:focus-visible,
.pub_nav_1008_drawerCloseBtn:focus-visible,
.pub_nav_1008_drawerLink:focus-visible,
.pub_nav_1008_drawerSubLink:focus-visible,
.pub_nav_1008_drawerSecondaryBtn:focus-visible,
.pub_nav_1008_drawerCta:focus-visible {
    outline: 2px solid var(--accent, #2563eb);
    outline-offset: 3px;
    border-radius: var(--r, 6px);
}

/* ── Tablet (1100px) ─────────────────────────────────────── */
@media (max-width: 1100px) {
    .pub_nav_1008_navInner {
gap: var(--space-content-gap, 12px);
    }

    .pub_nav_1008_navLinks {
        gap: 2px;
    }

    .pub_nav_1008_navLink,
    .pub_nav_1008_navLinkBtn {
        padding: 6px 6px;
    }

    .pub_nav_1008_navRight {
        gap: var(--space-content-gap, 4px);
    }

    .pub_nav_1008_loginBtn {
        padding: 5px 8px;
    }

    .pub_nav_1008_navCta {
        padding: 5px 10px;
    }
}

/* ── Tablet / Mobile (768px) ─────────────────────────────── */
@media (max-width: 768px) {
    .pub_nav_1008_navCenter {
        display: none;
    }

    .pub_nav_1008_loginBtn {
        display: none;
    }

    .pub_nav_1008_navCta {
        display: none;
    }

    .pub_nav_1008_hamburger {
        display: flex;
    }
}

/* ── Mobile (480px) ──────────────────────────────────────── */
@media (max-width: 480px) {
    .pub_nav_1008_navInner {
        padding: 0 clamp(12px, 4vw, 16px);
gap: var(--space-content-gap, 12px);
    }
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .pub_nav_1008_navBar,
    .pub_nav_1008_navLink,
    .pub_nav_1008_navLinkBtn,
    .pub_nav_1008_navDropdown,
    .pub_nav_1008_ddItem,
    .pub_nav_1008_loginBtn,
    .pub_nav_1008_navCta,
    .pub_nav_1008_drawerOverlay,
    .pub_nav_1008_mobileDrawer,
    .pub_nav_1008_drawerLink,
    .pub_nav_1008_drawerSubLink,
    .pub_nav_1008_drawerSecondaryBtn,
    .pub_nav_1008_drawerCta {
        transition: none;
    }
}

/* ============================================================
   PUB-ABOUT-1008 — Clarity About
   Light SaaS | story-left + image-right · stats · values grid
   1008 series: #ffffff bg · #6366f1 accent · clean minimal
   ============================================================ */

/* ── Section ─────────────────────────────────────────────────── */
.pub_about_1008_section {
    /* tokens */
    --radial-1: rgba(99, 102, 241, 0.07);
    --radial-2: rgba(168, 85, 247, 0.05);
    --badge-border: rgba(99, 102, 241, 0.2);
    --accent-start: #6366f1;
    --accent-end: #a78bfa;
    --stat-bg: rgba(99, 102, 241, 0.04);
    --sec-hover-bg: rgba(99, 102, 241, 0.05);
    --shadow-1: rgba(0, 0, 0, 0.07);
    --shadow-2: rgba(99, 102, 241, 0.14);
    --exp-bg: rgba(255, 255, 255, 0.92);
    --exp-border: rgba(99, 102, 241, 0.15);
    --exp-shadow: rgba(0, 0, 0, 0.08);
    --card-bg: #ffffff;
    --card-shadow: rgba(0, 0, 0, 0.04);
    --card-hover-shadow: rgba(99, 102, 241, 0.1);
    width: 100%;
    padding: var(--pt, 96px) 24px var(--pb, 96px);
    background: var(--texture-bg, none),
        radial-gradient(ellipse 70% 50% at 100% 0%, var(--radial-1, rgba(99, 102, 241, 0.07)) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 0% 100%, var(--radial-2, rgba(168, 85, 247, 0.05)) 0%, transparent 55%),
        color-mix(in srgb, color-mix(in srgb, var(--bg, #ffffff) calc(var(--material-bg-opacity, 1) * 100%), transparent) calc(var(--material-bg-opacity, 1) * 100%), transparent);
    font-family: var(--font-body, system-ui, -apple-system, sans-serif);
    color: var(--text, #0f172a);
    overflow: hidden;
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Container ──────────────────────────────────────────────── */
.pub_about_1008_container {
    max-width: var(--max-w, 1200px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 72px;
}

/* ── Section Header ─────────────────────────────────────────── */
.pub_about_1008_headerWrap {
    text-align: center;
}

.pub_about_1008_sectionHeader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 680px;
    margin: 0 auto;
}

.pub_about_1008_badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 6px);
    padding: 4px 14px;
    background: var(--badge-bg, rgba(99, 102, 241, 0.08));
    color: var(--badge-text, #6366f1);
    border: 1px solid var(--badge-border, rgba(99, 102, 241, 0.2));
    border-radius: var(--radius-full, 999px);
    font-size: calc(0.8125rem * var(--heading-scale, 1));
    font-weight: 600;
    letter-spacing: var(--tracking, 0.04em);
    text-transform: uppercase;
}

.pub_about_1008_sectionTitle {
    font-family: var(--font-heading, var(--font-body, system-ui, sans-serif));
    font-weight: 800;
    line-height: var(--leading, 1.15);
    letter-spacing: var(--tracking, -0.03em);
    color: var(--text, #0f172a);
    margin: 0;
}

.pub_about_1008_titleAccent {
    display: block;
    font-weight: 900;
    line-height: var(--leading, 1.08);
    letter-spacing: var(--tracking, -0.035em);
    margin-top: 0.06em;
    background: linear-gradient(110deg, var(--accent-start, #6366f1) 0%, var(--accent, #8b5cf6) 55%, var(--accent-end, #a78bfa) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pub_about_1008_sectionDesc {
    line-height: var(--leading, 1.7);
    color: var(--text-muted, #64748b);
    max-width: 600px;
    margin: 0;
}

/* ── Story Grid ─────────────────────────────────────────────── */
.pub_about_1008_storyGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

/* ── Story Content (left column) ────────────────────────────── */
.pub_about_1008_storyContent {
    display: flex;
    flex-direction: column;
    gap: var(--space-gap, 32px);
}

.pub_about_1008_storyText {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pub_about_1008_storyHeadline {
    font-family: var(--font-heading, var(--font-body, system-ui, sans-serif));
    font-weight: 700;
    line-height: var(--leading, 1.2);
    letter-spacing: var(--tracking, -0.02em);
    color: var(--text, #0f172a);
    margin: 0 0 20px;
}

.pub_about_1008_storyPara {
    line-height: var(--leading, 1.75);
    color: var(--text-muted, #475569);
    margin: 0 0 16px;
}

.pub_about_1008_storyPara:last-child {
    margin-bottom: 0;
}

/* ── Stats Row ──────────────────────────────────────────────── */
.pub_about_1008_statsRow {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-content-gap, 16px);
}

.pub_about_1008_statItem {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 4px);
    padding: 16px 20px;
    background: var(--stat-bg, rgba(99, 102, 241, 0.04));
    border: 1px solid var(--border, rgba(99, 102, 241, 0.12));
    border-radius: var(--radius-lg, 12px);
}

.pub_about_1008_statNumber {
    font-family: var(--font-heading, var(--font-body, system-ui, sans-serif));
    font-weight: 800;
    line-height: var(--leading, 1);
    color: var(--accent, #6366f1);
    letter-spacing: var(--tracking, -0.02em);
}

.pub_about_1008_statLabel {
    font-size: calc(0.8125rem * var(--body-scale, 1));
    font-weight: 500;
    color: var(--text-muted, #64748b);
    line-height: var(--leading, 1.3);
}

/* ── CTA Row ────────────────────────────────────────────────── */
.pub_about_1008_ctaRow {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.pub_about_1008_primaryBtn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    padding: 12px 28px;
    background: var(--cta-bg, #6366f1);
    color: var(--cta-text, #ffffff);
    border: none;
    border-radius: var(--radius-lg, 8px);
    font-size: calc(0.9375rem * var(--body-scale, 1));
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    white-space: nowrap;
    box-shadow: var(--shadow-sm, none);
}

.pub_about_1008_primaryBtn:hover {
    background: var(--cta-hover, rgba(99, 102, 241, 0.88));
    transform: translateY(-1px);
}

.pub_about_1008_secondaryBtn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    padding: 11px 26px;
    background: transparent;
    color: var(--cta2-text, #6366f1);
    border: 1.5px solid var(--cta2-border, rgba(99, 102, 241, 0.35));
    border-radius: var(--radius-lg, 8px);
    font-size: calc(0.9375rem * var(--body-scale, 1));
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
    white-space: nowrap;
    box-shadow: var(--shadow-sm, none);
}

.pub_about_1008_secondaryBtn:hover {
    border-color: var(--accent, #6366f1);
    background: var(--sec-hover-bg, rgba(99, 102, 241, 0.05));
    transform: translateY(-1px);
}

/* ── Image (right column) ───────────────────────────────────── */
.pub_about_1008_imageWrap {
    position: relative;
    border-radius: var(--radius-xl, 20px);
    overflow: hidden;
    box-shadow:
        var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.07)),
        var(--shadow-xl, 0 20px 48px -8px rgba(99, 102, 241, 0.14));
}

.pub_about_1008_storyImg {
    width: 100%;
    display: block;
    object-fit: cover;
}

.pub_about_1008_expBadge {
    position: absolute;
    bottom: 24px;
    left: 24px;
    padding: 12px 18px;
    background: var(--exp-bg, rgba(255, 255, 255, 0.92));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--exp-border, rgba(99, 102, 241, 0.15));
    border-radius: 14px;
    text-align: center;
}

/* ── Values Section ─────────────────────────────────────────── */
.pub_about_1008_valuesSection {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
}

.pub_about_1008_valuesHeading {
    font-family: var(--font-heading, var(--font-body, system-ui, sans-serif));
    font-weight: 700;
    line-height: var(--leading, 1.2);
    letter-spacing: var(--tracking, -0.02em);
    color: var(--text, #0f172a);
    margin: 0;
    text-align: center;
}

.pub_about_1008_valuesGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-gap, 24px);
    width: 100%;
}

.pub_about_1008_valueCard {
    padding: 28px 24px;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border, rgba(15, 23, 42, 0.08));
    border-radius: var(--radius-xl, 16px);
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--space-content-gap, 12px);
    row-gap: var(--space-content-gap, 8px);
    align-items: center;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* icon — row 1, col 1 */
.pub_about_1008_valueCard>*:first-child {
    grid-column: 1;
    grid-row: 1;
    color: var(--icon, #2563eb);
    background: var(--icon-bg, transparent);
    border-radius: var(--radius-lg, 8px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

/* h4 title — row 1, col 2 */
.pub_about_1008_valueCard>h4 {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
}

/* p description — row 2, spans both columns */
.pub_about_1008_valueCard>p {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
}

.pub_about_1008_valueCard:hover {
    transform: translateY(-2px);
}

/* ── Responsive — 1024px ────────────────────────────────────── */
@media (max-width: 1024px) {
    .pub_about_1008_storyGrid {
        gap: var(--space-gap, 48px);
    }

    .pub_about_1008_valuesGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Responsive — 768px ─────────────────────────────────────── */
@media (max-width: 768px) {
    .pub_about_1008_storyGrid {
        grid-template-columns: 1fr;
        gap: var(--space-gap, 40px);
    }

    /* On mobile: image shows first (above story text) */
    .pub_about_1008_storyContent {
        order: 2;
    }

    .pub_about_1008_imageWrap {
        order: 1;
    box-shadow: var(--shadow-sm, none);
    }

    .pub_about_1008_statsRow {
        grid-template-columns: repeat(2, 1fr);
    }

    .pub_about_1008_valuesGrid {
        grid-template-columns: 1fr;
    }
}

/* ── Responsive — 480px ─────────────────────────────────────── */
@media (max-width: 480px) {
    .pub_about_1008_statsRow {
        grid-template-columns: 1fr 1fr;
    }

    .pub_about_1008_ctaRow {
        flex-direction: column;
        align-items: stretch;
    }

    .pub_about_1008_primaryBtn,
    .pub_about_1008_secondaryBtn {
        justify-content: center;
    box-shadow: var(--shadow-sm, none);
    }
}

/* ── Reduced Motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .pub_about_1008_primaryBtn,
    .pub_about_1008_secondaryBtn,
    .pub_about_1008_valueCard {
        transition: none;
    box-shadow: var(--shadow-sm, none);
    }
}

/* ============================================================
   PUB-TESTIMONIAL-1008 — Clarity Testimonials
   Light SaaS | 3-column card grid · star ratings · avatars
   1008 series: #ffffff bg · #6366f1 accent · clean minimal
   ============================================================ */

/* ── Section ─────────────────────────────────────────────────── */
.pub_testimonial_1008_section {
    --radial-1: rgba(99, 102, 241, 0.07);
    --radial-2: rgba(168, 85, 247, 0.05);
    --badge-border: rgba(99, 102, 241, 0.2);
    --accent-start: #6366f1;
    --accent-light: #a78bfa;
    --card-hover-shadow: rgba(99, 102, 241, 0.12);
    --card-hover-border: rgba(99, 102, 241, 0.3);
    --card-badge-bg: rgba(99, 102, 241, 0.07);
    --card-badge-border: rgba(99, 102, 241, 0.15);
    --avatar-bg: rgba(99, 102, 241, 0.1);
    --avatar-border: rgba(99, 102, 241, 0.15);
    --avatar-size: 44px;
    width: 100%;
    padding: var(--pt, 96px) 24px var(--pb, 96px);
    background: var(--texture-bg, none),
        radial-gradient(ellipse 70% 50% at 100% 0%, var(--radial-1, rgba(99, 102, 241, 0.07)) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 0% 100%, var(--radial-2, rgba(168, 85, 247, 0.05)) 0%, transparent 55%),
        color-mix(in srgb, color-mix(in srgb, var(--bg, #ffffff) calc(var(--material-bg-opacity, 1) * 100%), transparent) calc(var(--material-bg-opacity, 1) * 100%), transparent);
    font-family: var(--font-body, system-ui, -apple-system, sans-serif);
    color: var(--text, #0f172a);
    overflow: hidden;
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Container ──────────────────────────────────────────────── */
.pub_testimonial_1008_container {
    max-width: var(--max-w, 1200px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 56px;
}

/* ── Section Header ─────────────────────────────────────────── */
.pub_testimonial_1008_headerWrap {
    text-align: center;
}

.pub_testimonial_1008_sectionHeader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 680px;
    margin: 0 auto;
}

.pub_testimonial_1008_badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 6px);
    padding: 4px 14px;
    background: var(--badge-bg, rgba(99, 102, 241, 0.08));
    color: var(--badge-text, #6366f1);
    border: 1px solid var(--badge-border, rgba(99, 102, 241, 0.2));
    border-radius: var(--radius-full, 999px);
    font-size: calc(0.8125rem * var(--heading-scale, 1));
    font-weight: 600;
    letter-spacing: var(--tracking, 0.04em);
    text-transform: uppercase;
}

.pub_testimonial_1008_sectionTitle {
    font-family: var(--font-heading, var(--font-body, system-ui, sans-serif));
    font-weight: 800;
    line-height: var(--leading, 1.25);
    letter-spacing: var(--tracking, -0.03em);
    color: var(--text, #0f172a);
    margin: 0;
}

.pub_testimonial_1008_titleAccent {
    display: block;
    font-weight: 900;
    line-height: var(--leading, 1.2);
    letter-spacing: var(--tracking, -0.035em);
    margin-top: 0.1em;
    padding-bottom: 0.12em;
    background: linear-gradient(110deg, var(--accent-start, #6366f1) 0%, var(--accent, #8b5cf6) 55%, var(--accent-light, #a78bfa) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pub_testimonial_1008_sectionDesc {
    line-height: var(--leading, 1.7);
    color: var(--text-muted, #64748b);
    max-width: 600px;
    margin: 0;
}

/* ── Grid ────────────────────────────────────────────────────── */
.pub_testimonial_1008_grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), 1fr);
gap: var(--space-gap, 24px);
    align-items: start;
}

/* ── Card ────────────────────────────────────────────────────── */
.pub_testimonial_1008_card {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border, rgba(99, 102, 241, 0.12));
    border-radius: var(--radius-xl, 16px);
    padding: 28px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 16px);
    position: relative;
    transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
    will-change: transform;
}

.pub_testimonial_1008_card:hover {
    transform: translateY(-3px);
    border-color: var(--card-hover-border, rgba(99, 102, 241, 0.3));
}

/* ── Card badge (top-right) ──────────────────────────────────── */
.pub_testimonial_1008_cardBadge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 3px 10px;
    background: var(--card-badge-bg, rgba(99, 102, 241, 0.07));
    color: var(--accent, #6366f1);
    border: 1px solid var(--card-badge-border, rgba(99, 102, 241, 0.15));
    border-radius: var(--radius-full, 999px);
    font-size: calc(0.6875rem * var(--heading-scale, 1));
    font-weight: 700;
    letter-spacing: var(--tracking, 0.05em);
    text-transform: uppercase;
}

/* ── Star rating ─────────────────────────────────────────────── */
.pub_testimonial_1008_ratingWrap {
    display: flex;
    gap: 3px;
    font-size: calc(1rem * var(--body-scale, 1));
    color: var(--accent, #f59e0b);
}

/* ── Quote ───────────────────────────────────────────────────── */
.pub_testimonial_1008_quoteWrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 6px);
    flex: 1;
}

.pub_testimonial_1008_quoteMark {
    font-size: calc(2.25rem * var(--body-scale, 1));
    line-height: var(--leading, 0.8);
    font-family: var(--font-heading, Georgia, 'Times New Roman', serif);
    background: linear-gradient(110deg, var(--accent-start, #6366f1) 0%, var(--accent, #8b5cf6) 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    user-select: none;
}

.pub_testimonial_1008_quoteText {
    line-height: var(--leading, 1.72);
    color: var(--text-muted, #475569);
    margin: 0;
}

/* ── Card footer ─────────────────────────────────────────────── */
.pub_testimonial_1008_cardFooter {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 10px);
    padding-top: 16px;
    border-top: 1px solid var(--border, rgba(15, 23, 42, 0.07));
}

/* ── Author row ──────────────────────────────────────────────── */
.pub_testimonial_1008_authorRow {
    display: flex;
    align-items: center;
gap: var(--space-content-gap, 12px);
}

.pub_testimonial_1008_avatar {
    width: var(--avatar-size, 44px);
    min-height: var(--avatar-size, 44px);
    border-radius: var(--radius-full, 50%);
    flex-shrink: 0;
    background: var(--avatar-bg, rgba(99, 102, 241, 0.1));
    border: 2px solid var(--avatar-border, rgba(99, 102, 241, 0.15));
    /* flex centering so initials div is centred inside the circle */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* img filled by AvatarBlock when src is present */
.pub_testimonial_1008_avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-full, 50%);
    display: block;
}

/* initials div rendered by AvatarBlock when no image */
.pub_testimonial_1008_avatar>div {
    font-size: calc(0.8125rem * var(--body-scale, 1));
    font-weight: 700;
    line-height: var(--leading, 1);
    color: var(--accent, #6366f1);
    letter-spacing: var(--tracking, 0.04em);
    text-align: center;
    user-select: none;
}

.pub_testimonial_1008_authorName {
    display: block;
    font-size: calc(0.9375rem * var(--heading-scale, 1));
    font-weight: 700;
    color: var(--text, #0f172a);
    line-height: var(--leading, 1.3);
}

.pub_testimonial_1008_authorRole {
    display: block;
    font-size: calc(0.8125rem * var(--body-scale, 1));
    color: var(--text-muted, #64748b);
    line-height: var(--leading, 1.4);
    margin-top: 1px;
}

/* ── Company name ────────────────────────────────────────────── */
.pub_testimonial_1008_companyName {
    font-size: calc(0.8125rem * var(--heading-scale, 1));
    font-weight: 600;
    color: var(--accent, #6366f1);
    letter-spacing: var(--tracking, 0.02em);
}

/* ── Company logo ────────────────────────────────────────────── */
.pub_testimonial_1008_companyLogo {
    max-height: 28px;
    width: auto;
    object-fit: contain;
    opacity: 0.65;
    filter: grayscale(0.3);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .pub_testimonial_1008_grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .pub_testimonial_1008_grid {
        grid-template-columns: 1fr;
    }

    .pub_testimonial_1008_card {
        padding: 24px 20px 20px;
    }
}

/* ── Scroll Reveal ─────────────────────────────────────────────────────── */
.pub_testimonial_1008_section [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.pub_testimonial_1008_section [data-reveal][data-visible='true'] {
    opacity: 1;
    transform: none;
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pub_testimonial_1008_section [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .pub_testimonial_1008_card {
        transition: none;
    }

    .pub_testimonial_1008_card:hover {
        transform: none;
    }
}

/* ─────────────────────────────────────────────────────────────
   PUB-CTA-1008 — Clarity CTA
   1008 series: deep indigo gradient bg · centered layout
   Pairs with: PUB-HERO-1008, PUB-NAV-1008, PUB-SERVICE-1008,
               PUB-GALLERY-1008, PUB-MENU-1008
   ───────────────────────────────────────────────────────────── */

/* ── Root ───────────────────────────────────────────────────── */
.pub_cta_1008_root {
    --radial-1: rgba(139, 92, 246, 0.38);
    --radial-2: rgba(99, 102, 241, 0.28);
    --radial-3: rgba(167, 139, 250, 0.22);
    --badge-bg: rgba(165, 180, 252, 0.15);
    --badge-border: rgba(165, 180, 252, 0.3);
    --accent-start: #a78bfa;
    --accent-mid: #c4b5fd;
    --accent-end: #e0d7ff;
    --desc-color: rgba(248, 250, 252, 0.72);
    --trust-color: rgba(248, 250, 252, 0.82);
    --btn-primary-bg: #ffffff;
    --btn-primary-text: #1e1b4b;
    --btn-primary-hover-bg: #ede9fe;
    --btn-primary-shadow: rgba(165, 180, 252, 0.4);
    --btn-secondary-border: rgba(248, 250, 252, 0.35);
    --btn-secondary-hover-bg: rgba(248, 250, 252, 0.08);
    --btn-secondary-hover-border: rgba(248, 250, 252, 0.6);
    --stars-color: #fbbf24;
    --review-color: rgba(248, 250, 252, 0.8);
    width: 100%;
    padding: var(--pt, 96px) 24px var(--pb, 96px);
    background: var(--texture-bg, none),
        radial-gradient(ellipse 70% 55% at 50% 0%, var(--radial-1, rgba(139, 92, 246, 0.38)) 0%, transparent 65%),
        radial-gradient(ellipse 50% 40% at 0% 100%, var(--radial-2, rgba(99, 102, 241, 0.28)) 0%, transparent 55%),
        radial-gradient(ellipse 40% 35% at 100% 80%, var(--radial-3, rgba(167, 139, 250, 0.22)) 0%, transparent 55%),
        color-mix(in srgb, color-mix(in srgb, var(--bg, #1e1b4b) calc(var(--material-bg-opacity, 1) * 100%), transparent) calc(var(--material-bg-opacity, 1) * 100%), transparent);
    font-family: var(--font-body, system-ui, -apple-system, sans-serif);
    color: var(--text, #f8fafc);
    overflow: hidden;
    position: relative;
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Container ──────────────────────────────────────────────── */
.pub_cta_1008_container {
    max-width: var(--max-w, 860px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-gap, 40px);
    text-align: center;
    position: relative;
    z-index: var(--z-base, 1);
    /* above decorative radial gradients */
}

/* ── Badge ──────────────────────────────────────────────────── */
.pub_cta_1008_badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 6px);
    padding: 5px 16px;
    background: var(--badge-bg, rgba(165, 180, 252, 0.15));
    border: 1px solid var(--badge-border, rgba(165, 180, 252, 0.3));
    border-radius: var(--radius-full, 999px);
    font-size: calc(0.8125rem * var(--heading-scale, 1));
    font-weight: 600;
    letter-spacing: var(--tracking, 0.04em);
    text-transform: uppercase;
    color: var(--text, #f8fafc);
}

/* ── Header Wrap ────────────────────────────────────────────── */
.pub_cta_1008_headerWrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-content-gap, 16px);
    max-width: 680px;
}

/* ── Title ──────────────────────────────────────────────────── */
.pub_cta_1008_title {
    font-family: var(--font-heading, var(--font-body, system-ui, sans-serif));
    font-weight: 800;
    line-height: var(--leading, 1.1);
    letter-spacing: var(--tracking, -0.03em);
    color: var(--text, #f8fafc);
    margin: 0;
}

/* ── Title Accent (gradient light purple) ───────────────────── */
.pub_cta_1008_titleAccent {
    display: block;
    font-weight: 900;
    line-height: var(--leading, 1.1);
    letter-spacing: var(--tracking, -0.035em);
    margin: 0;
    background: linear-gradient(110deg, var(--accent-start, #a78bfa) 0%, var(--accent-mid, #c4b5fd) 50%, var(--accent-end, #e0d7ff) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-bottom: 0.1em;
}

/* ── Description ────────────────────────────────────────────── */
.pub_cta_1008_description {
    line-height: var(--leading, 1.7);
    color: var(--desc-color, rgba(248, 250, 252, 0.72));
    max-width: 560px;
    margin: 0;
}

/* ── Trust Row ──────────────────────────────────────────────── */
.pub_cta_1008_trustRow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 28px;
}

.pub_cta_1008_trustItem {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: calc(0.875rem * var(--body-scale, 1));
    font-weight: 500;
    color: var(--trust-color, rgba(248, 250, 252, 0.82));
}

/* ── Button Group ───────────────────────────────────────────── */
.pub_cta_1008_btnGroup {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
gap: var(--space-content-gap, 12px);
}

.pub_cta_1008_btnPrimary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    padding: 14px 32px;
    background: var(--btn-primary-bg, #ffffff);
    color: var(--btn-primary-text, #1e1b4b);
    font-size: calc(1rem * var(--body-scale, 1));
    font-weight: 700;
    border-radius: var(--radius-lg, 8px);
    text-decoration: none;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

.pub_cta_1008_btnPrimary:hover {
    background: var(--btn-primary-hover-bg, #ede9fe);
    transform: translateY(-2px);
}

.pub_cta_1008_btnSecondary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    padding: 14px 32px;
    background: transparent;
    color: var(--text, #f8fafc);
    font-size: calc(1rem * var(--body-scale, 1));
    font-weight: 600;
    border-radius: var(--radius-lg, 8px);
    border: 1.5px solid var(--btn-secondary-border, rgba(248, 250, 252, 0.35));
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

.pub_cta_1008_btnSecondary:hover {
    background: var(--btn-secondary-hover-bg, rgba(248, 250, 252, 0.08));
    border-color: var(--btn-secondary-hover-border, rgba(248, 250, 252, 0.6));
    transform: translateY(-2px);
}

/* ── Social Proof Badge ─────────────────────────────────────── */
.pub_cta_1008_socialProof {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 10px);
    opacity: 0.85;
}

.pub_cta_1008_stars {
    color: var(--stars-color, #fbbf24);
}

.pub_cta_1008_reviewCount {
    font-size: calc(0.875rem * var(--body-scale, 1));
    font-weight: 500;
    color: var(--review-color, rgba(248, 250, 252, 0.8));
}

/* ── Scroll Reveal ──────────────────────────────────────────── */
.pub_cta_1008_root [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.pub_cta_1008_root [data-reveal][data-visible='true'] {
    opacity: 1;
    transform: none;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 576px) {

    .pub_cta_1008_btnPrimary,
    .pub_cta_1008_btnSecondary {
        width: 100%;
        justify-content: center;
    }

    .pub_cta_1008_btnGroup {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
    }
}

/* ── Reduced Motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pub_cta_1008_root [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .pub_cta_1008_btnPrimary,
    .pub_cta_1008_btnSecondary {
        transition: none;
    }
}

/* ============================================================
   PUB-FOOTER-1008 — Universal Footer (4-column grid layout)
   1008 series: #0f172a bg · #6366f1 accent · Inter font
   Layouts: grid | stacked | minimal  (via data-layout attr)
   ============================================================ */

/* ── Root / Section wrapper ─────────────────────────────── */
.pub_footer_1008_root {
    --newsletter-input-bg: rgba(255, 255, 255, 0.06);
    --newsletter-focus-shadow: rgba(99, 102, 241, 0.2);
    --alert-color: #f87171;
    --btn-text: #fff;
    background: var(--texture-bg, none),
        color-mix(in srgb, color-mix(in srgb, var(--bg, #0f172a) calc(var(--material-bg-opacity, 1) * 100%), transparent) calc(var(--material-bg-opacity, 1) * 100%), transparent);
    color: var(--text, #e2e8f0);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    padding-top: var(--pt, 80px);
    padding-bottom: var(--pb, 40px);
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Container ───────────────────────────────────────────── */
.pub_footer_1008_container {
    max-width: var(--max-w, 1200px);
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 3rem);
}

/* ── Main grid ───────────────────────────────────────────── */
.pub_footer_1008_mainGrid {
    display: grid;
    grid-template-columns: 1.8fr 2fr 1fr 1.4fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
}

/* stacked layout overrides */
.pub_footer_1008_root[data-layout="stacked"] .pub_footer_1008_mainGrid {
    grid-template-columns: 1fr;
    gap: var(--space-gap, 2rem);
}

/* minimal layout overrides */
.pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_mainGrid {
    grid-template-columns: 1fr auto;
    gap: var(--space-gap, 2rem);
    align-items: center;
}

.pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_contactCol,
.pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_newsletterCol {
    display: none;
}

/* ── Brand Column ────────────────────────────────────────── */
.pub_footer_1008_brandCol {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.75rem);
}

.pub_footer_1008_brandLogo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 0.5rem);
    color: var(--accent, #6366f1);
    font-family: var(--font-heading, var(--font-body, 'Inter', system-ui, sans-serif));
    font-weight: 700;
    letter-spacing: var(--tracking, -0.02em);
    text-decoration: none;
    margin-bottom: 0.25rem;
    border-radius: var(--radius-sm, 4px);
}

.pub_footer_1008_brandLogo:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 3px;
}

.pub_footer_1008_brandLogo i {
    color: var(--accent, #6366f1);
}

.pub_footer_1008_brandDesc {
    color: var(--text-muted, #94a3b8);
    line-height: var(--leading, 1.65);
    margin: 0;
}

/* ── Social Icons ────────────────────────────────────────── */
.pub_footer_1008_socialRow {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 0.5rem);
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.pub_footer_1008_socialLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-height: 36px;
    border-radius: var(--radius-lg, 8px);
    background: var(--social-bg, rgba(255, 255, 255, 0.08));
    color: var(--text-muted, #94a3b8);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    border: 1px solid var(--footer-border, rgba(255, 255, 255, 0.08));
}

.pub_footer_1008_socialLink:hover {
    background: var(--accent, #6366f1);
    color: var(--social-hover-text, #fff);
    transform: translateY(-2px);
    border-color: var(--accent, #6366f1);
}

.pub_footer_1008_socialLink i {
    font-size: calc(1rem * var(--body-scale, 1));
    line-height: var(--leading, 1);
}

/* ── Links Grid ──────────────────────────────────────────── */
.pub_footer_1008_linksArea {
    /* wrapper for the links grid zone */
}

.pub_footer_1008_linksGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: clamp(1rem, 2vw, 2rem);
}

.pub_footer_1008_linksCol {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Reset browser list defaults inside FooterLinksColumn */
.pub_footer_1008_linksCol ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.25rem);
}

.pub_footer_1008_linksCol li {
    margin: 0;
    padding: 0;
}

/* ── Column Headings ─────────────────────────────────────── */
.pub_footer_1008_colHeading {
    color: var(--text, #e2e8f0);
    font-family: var(--font-heading, var(--font-body, 'Inter', system-ui, sans-serif));
    font-weight: 700;
    letter-spacing: var(--tracking, 0.1em);
    text-transform: uppercase;
    margin: 0 0 0.875rem;
}

/* ── Nav Column Links ────────────────────────────────────── */
.pub_footer_1008_footerLink {
    display: inline-block;
    color: var(--text-muted, #94a3b8);
    text-decoration: none;
    line-height: var(--leading, 1.5);
    padding: 0.125rem 0;
    border-radius: var(--radius-sm, 4px);
    transition: color 180ms ease;
}

.pub_footer_1008_footerLink:hover {
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_footerLink:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 2px;
    color: var(--text, #e2e8f0);
}

/* ── Contact Column ──────────────────────────────────────── */
.pub_footer_1008_contactCol {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.25rem);
}

.pub_footer_1008_contactItem {
    display: flex;
    align-items: flex-start;
    gap: var(--space-content-gap, 0.5rem);
    color: var(--text-muted, #94a3b8);
    line-height: var(--leading, 1.5);
    margin-bottom: 0.5rem;
}

.pub_footer_1008_contactIcon {
    color: var(--accent, #6366f1);
    font-size: calc(1rem * var(--body-scale, 1));
    margin-top: 0.1em;
    flex-shrink: 0;
}

.pub_footer_1008_contactText {
    color: var(--text-muted, #94a3b8);
    text-decoration: none;
    border-radius: var(--radius-sm, 4px);
    transition: color 180ms ease;
}

.pub_footer_1008_contactText:hover {
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_contactText:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 2px;
    color: var(--text, #e2e8f0);
}

/* ── Newsletter Column ───────────────────────────────────── */
.pub_footer_1008_newsletterCol {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.75rem);
}

/* Space out the input and button inside the newsletter form */
.pub_footer_1008_newsletterCol form {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.625rem);
}

/* Email validation error message — min-height reserves 1 line always to prevent CLS */
.pub_footer_1008_newsletterCol form span[role="alert"] {
    display: block;
    min-height: calc(0.8125rem * 1.4);
    color: var(--alert-color, #f87171);
    font-size: calc(0.8125rem * var(--body-scale, 1));
    line-height: var(--leading, 1.4);
}

.pub_footer_1008_newsletterInput {
    width: 100%;
    background: var(--newsletter-input-bg, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
    border-radius: var(--radius-md, 6px);
    color: var(--text, #e2e8f0);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: calc(0.9375rem * var(--body-scale, 1));
    padding: 0.625rem 0.875rem;
    outline: none;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.pub_footer_1008_newsletterInput:focus {
    border-color: var(--accent, #6366f1);
}

.pub_footer_1008_newsletterInput::placeholder {
    color: var(--text-muted, #64748b);
}

.pub_footer_1008_newsletterBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent, #6366f1);
    color: var(--btn-text, #fff);
    border: none;
    border-radius: var(--radius-md, 6px);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: calc(0.9375rem * var(--body-scale, 1));
    font-weight: 600;
    letter-spacing: var(--tracking, -0.01em);
    padding: 0.625rem 1.25rem;
    cursor: pointer;
    transition: opacity 150ms ease;
}

.pub_footer_1008_newsletterBtn:hover {
    opacity: 0.88;
}

.pub_footer_1008_newsletterBtn:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 3px;
    opacity: 0.88;
}

/* ── Map ─────────────────────────────────────────────────── */
.pub_footer_1008_mapWrapper {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: var(--radius-lg, 8px);
    overflow: hidden;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

/* ── App Badges ──────────────────────────────────────────── */
.pub_footer_1008_appBadges {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 1rem);
    flex-wrap: wrap;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* ── Divider ─────────────────────────────────────────────── */
.pub_footer_1008_divider {
    border: none;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    margin: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(1rem, 2vw, 1.5rem);
}

/* ── Bottom Bar ──────────────────────────────────────────── */
.pub_footer_1008_bottomBarWrapper {
    background: var(--bottom-bg, transparent);
}

.pub_footer_1008_bottomBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-content-gap, 0.75rem);
}

.pub_footer_1008_copyright {
    color: var(--text-muted, #64748b);
    margin: 0;
    line-height: var(--leading, 1.5);
}

.pub_footer_1008_legalLinks {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.125rem;
}

.pub_footer_1008_legalLink {
    color: var(--text-muted, #64748b);
    text-decoration: none;
    border-radius: var(--radius-sm, 4px);
    padding: 0.125rem 0.25rem;
    transition: color 180ms ease;
}

.pub_footer_1008_legalLink:hover {
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_legalLink:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 2px;
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_legalSep {
    color: var(--text-muted, #475569);
    font-size: calc(0.875rem * var(--body-scale, 1));
    user-select: none;
}

/* ── Certifications Row ──────────────────────────────────── */
.pub_footer_1008_certsRow {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 1rem);
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* ── Interactive states ──────────────────────────────────── */

/* ── @media 1024px ───────────────────────────────────────── */
@media (max-width: 1024px) {
    .pub_footer_1008_mainGrid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-gap, 2rem);
    }

    .pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_mainGrid {
        grid-template-columns: 1fr;
    }
}

/* ── @media 768px ────────────────────────────────────────── */
@media (max-width: 768px) {
    .pub_footer_1008_mainGrid {
        grid-template-columns: 1fr;
        gap: var(--space-gap, 1.75rem);
    }

    .pub_footer_1008_linksGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pub_footer_1008_bottomBar {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-content-gap, 0.5rem);
    }
}

/* ── @media 480px ────────────────────────────────────────── */
@media (max-width: 480px) {
    .pub_footer_1008_linksGrid {
        grid-template-columns: 1fr;
    }

    .pub_footer_1008_appBadges {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── prefers-reduced-motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .pub_footer_1008_footerLink,
    .pub_footer_1008_contactText,
    .pub_footer_1008_legalLink,
    .pub_footer_1008_brandLogo,
    .pub_footer_1008_newsletterInput,
    .pub_footer_1008_newsletterBtn {
        transition: none;
    }
}

/* Page: services */
/* ============================================================
   PUB-NAV-1008 — Clarity SaaS Nav
   Series 1008 · Full-width sticky nav · Light theme · Inter font
   State: data-scrolled on .navBar  |  data-open on .mobileDrawer/.drawerOverlay
   ============================================================ */

/* ── Root ────────────────────────────────────────────────── */
.pub_nav_1008_navRoot {
    /* Scoped design tokens — not user-controlled */
    --t: 0.2s ease;
    --t-slow: 0.32s ease;
    --r: 6px;
    --r-lg: 10px;
    --r-btn: 8px;
    --fs-brand: clamp(15px, 1.5vw, 17px);
    --fs-nav: clamp(13px, 1.3vw, 14px);
    --fs-dd: clamp(12px, 1.2vw, 13.5px);
    --fs-drawer: clamp(14px, 1.4vw, 15px);
    --fs-icon: clamp(18px, 1.5vw, 20px);
    --fs-caret: 11px;
    --hover-bg: rgba(37, 99, 235, 0.06);

    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    isolation: isolate;
    /* ✅ Ensure nav stacking context sits above page content */
    position: relative;
    z-index: var(--z-nav, 1000);
    background-image: var(--texture-bg, none);
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Full-width Bar ──────────────────────────────────────── */
.pub_nav_1008_navBar {
    position: var(--navbar-position, fixed);
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav, 1000);
    /* above page content, below drawer overlay */
    background-color: var(--bg, #ffffff);
    border-bottom: 1px solid var(--border, #e5e7eb);
    transition:
        border-color var(--t, 0.2s ease),
        box-shadow var(--t, 0.2s ease);
    padding-top: var(--pt, 0);
    padding-bottom: var(--pb, 0);
}

.pub_nav_1008_navBar[data-scrolled='true'] {
    border-color: var(--border, #e5e7eb);
}

/* ── Inner container ─────────────────────────────────────── */
.pub_nav_1008_navInner {
    max-width: var(--max-w, 1200px);
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 40px);
    min-height: var(--nav-h, 72px);
    display: flex;
    align-items: center;
    justify-content: space-between;
gap: var(--space-gap, 32px);
}

/* ── Logo ────────────────────────────────────────────────── */
.pub_nav_1008_logo {
  /* composed: logo from NavBase.module.css */
  display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity var(--t, 0.22s ease);
    /* gap, margin, color: set in component */
    gap: var(--space-content-gap, 8px);
    color: var(--text, #374151);
    text-decoration: none;
}

.pub_nav_1008_logoMark {
    font-size: var(--fs-icon, clamp(18px, 1.5vw, 20px));
    color: var(--cta-bg, #2563eb);
    line-height: var(--leading, 1);
}

.pub_nav_1008_logoWord {
    font-size: var(--fs-brand, clamp(15px, 1.5vw, 17px));
    font-weight: 700;
    letter-spacing: var(--tracking, -0.02em);
    color: var(--text, #374151);
    white-space: nowrap;
}

.pub_nav_1008_logoImg {
  /* composed: logoImg from NavBase.module.css */
  object-fit: contain;
    display: block;
    /* width, height: set via CSS vars in component */
    width: var(--brand-image-width, 160px);
    height: var(--brand-image-height, 40px);
}

/* ── Center: Desktop nav links ───────────────────────────── */
.pub_nav_1008_navCenter {
    flex: 1;
    display: flex;
    justify-content: center;
}

.pub_nav_1008_navLinks {
  /* composed: navLinks from NavBase.module.css */
  display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    /* gap: set in component */
    gap: var(--space-content-gap, 4px);
}

.pub_nav_1008_dropWrap {
    position: relative;
}

.pub_nav_1008_navLink {
  /* composed: navLink from NavBase.module.css */
  display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: color var(--t, 0.22s ease), background-color var(--t, 0.22s ease);
    /* padding, font-size, font-weight, color, border-radius: set in component */
    padding: 6px 10px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 500;
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
}

.pub_nav_1008_navLink:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_navLinkBtn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 4px);
    padding: 6px 10px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 500;
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    background: none;
    border: none;
    cursor: pointer;
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
}

.pub_nav_1008_navLinkBtn:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_navCaret {
    font-size: var(--fs-caret, 11px);
    transition: transform var(--t, 0.2s ease);
}

/* ── Dropdown panel ──────────────────────────────────────── */
.pub_nav_1008_navDropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 160px;
    background-color: var(--bg, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--r-lg, 10px);
    padding: 6px;
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* open/close via data-open */
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-6px);
    transition:
        opacity var(--t, 0.2s ease),
        transform var(--t, 0.2s ease);
    z-index: var(--z-dropdown, 1200);
    /* above nav links, below sticky bar */
}

.pub_nav_1008_navDropdown[data-open='true'] {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.pub_nav_1008_ddItem {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    padding: 8px 12px;
    font-size: var(--fs-dd, clamp(12px, 1.2vw, 13.5px));
    font-weight: 500;
    color: var(--text, #374151);
    text-decoration: none;
    border-radius: var(--r, 6px);
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
    white-space: nowrap;
}

.pub_nav_1008_ddItem:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

/* ── Right area ──────────────────────────────────────────── */
.pub_nav_1008_navRight {
  /* composed: navRight from NavBase.module.css */
  display: flex;
    align-items: center;
    flex-shrink: 0;
    /* gap, margin: set in component */
    gap: var(--space-content-gap, 8px);
}

.pub_nav_1008_loginBtn {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 500;
    color: var(--text, #374151);
    text-decoration: none;
    border-radius: var(--r, 6px);
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
    white-space: nowrap;
}

.pub_nav_1008_loginBtn:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_navCta {
  /* composed: navCta from NavBase.module.css */
  display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: background-color var(--t, 0.22s ease), transform var(--t, 0.22s ease);
    /* padding, background, color, border-radius, font: set in component */
    padding: 7px 18px;
    background-color: var(--cta-bg, #2563eb);
    color: var(--cta-text, #ffffff);
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 600;
    border-radius: var(--r-btn, 8px);
    white-space: nowrap;
}

.pub_nav_1008_navCta:hover {
    background-color: var(--cta-hover, rgba(37, 99, 235, 0.88));
    transform: translateY(-1px);
}

/* ── Hamburger ───────────────────────────────────────────── */
.pub_nav_1008_hamburger {
  /* composed: hamburger from NavBase.module.css */
  display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    transition: background-color var(--t, 0.22s ease);
    width: 36px;
    min-height: var(--hamburger-h, 36px);
    font-size: var(--fs-icon, clamp(18px, 1.5vw, 20px));
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    display: none;
    /* visible on mobile via media query */
}

.pub_nav_1008_hamburger:hover {
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_hamburgerLine {
  /* composed: hamburgerLine from NavBase.module.css */
  display: block;
    transition: transform var(--t, 0.22s ease), opacity var(--t, 0.22s ease);
    width: 20px;
    height: 2px;
    background-color: var(--text, #374151);
    border-radius: 2px;
}

/* ── Drawer Overlay ──────────────────────────────────────── */
.pub_nav_1008_drawerOverlay {
  /* composed: drawerOverlay from NavBase.module.css */
  inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t, 0.22s ease), visibility var(--t, 0.22s ease);
    /* position, z-index, background-color: set in component */
    position: var(--drawer-position, fixed);
    z-index: var(--z-drawer, 1100);
    /* above sticky navbar, below drawer panel */
    background-color: var(--overlay-bg, rgba(17, 24, 39, 0.4));
}

.pub_nav_1008_drawerOverlay[data-open='true'] {
    opacity: 1;
    visibility: visible;
}

/* ── Mobile Drawer ───────────────────────────────────────── */
.pub_nav_1008_mobileDrawer {
  /* composed: mobileDrawer from NavBase.module.css */
  top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--t-slow, 0.36s ease);
    overflow-y: auto;
    /* position, z-index, width, background-color, border, box-shadow: set in component */
    position: var(--drawer-position, fixed);
    z-index: var(--z-drawer, 1100);
    /* above overlay, topmost drawer layer */
    width: min(320px, 85vw);
    background-color: var(--bg, #ffffff);
    border-left: 1px solid var(--border, #e5e7eb);
}

.pub_nav_1008_mobileDrawer[data-open='true'] {
    transform: translateX(0);
}

/* ── Drawer Header ───────────────────────────────────────── */
.pub_nav_1008_drawerHeader {
  /* composed: drawerHeader from NavBase.module.css */
  display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    /* padding, border: set in component */
    padding: 18px 20px;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.pub_nav_1008_drawerBrand {
  /* composed: drawerBrand from NavBase.module.css */
  display: flex;
    align-items: center;
    /* gap, font-family, font-size, color: set in component */
    gap: var(--space-content-gap, 8px);
    font-size: var(--fs-brand, clamp(15px, 1.5vw, 17px));
    font-weight: 700;
    color: var(--text, #374151);
}

.pub_nav_1008_drawerBrandMark {
    font-size: var(--fs-icon, clamp(18px, 1.5vw, 20px));
    color: var(--cta-bg, #2563eb);
}

.pub_nav_1008_drawerCloseBtn {
  /* composed: drawerCloseBtn from NavBase.module.css */
  display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color var(--t, 0.22s ease);
    /* width, height, font-size, color: set in component */
    width: 32px;
    min-height: var(--close-btn-h, 32px);
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
}

.pub_nav_1008_drawerCloseBtn:hover {
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

/* ── Drawer Links ────────────────────────────────────────── */
.pub_nav_1008_drawerLinks {
  /* composed: drawerLinks from NavBase.module.css */
  flex: 1;
    display: flex;
    flex-direction: column;
    /* padding: set in component */
    padding: 12px 12px;
    gap: 2px;
}

.pub_nav_1008_drawerLink {
  /* composed: drawerLink from NavBase.module.css */
  display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: color var(--t, 0.22s ease), background-color var(--t, 0.22s ease);
    /* padding, font-size, font-weight, color, font-family, border-radius: set in component */
    padding: 10px 12px;
    font-size: var(--fs-drawer, clamp(14px, 1.4vw, 15px));
    font-weight: 500;
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
}

.pub_nav_1008_drawerLink:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_drawerCaret {
  /* composed: drawerCaret from NavBase.module.css */
  transition: transform var(--t, 0.22s ease);
    /* font-size: set in component */
    font-size: var(--fs-caret, 11px);
}

.pub_nav_1008_drawerSub {
  /* composed: drawerSub from NavBase.module.css */
  max-height: 0;
    overflow: hidden;
    transition: max-height var(--t-slow, 0.36s ease);
    padding-left: 12px;
}

.pub_nav_1008_drawerSubLink {
  /* composed: drawerSubLink from NavBase.module.css */
  display: block;
    text-decoration: none;
    transition: color var(--t, 0.22s ease), background-color var(--t, 0.22s ease);
    /* padding, font-size, color: set in component */
    padding: 8px 12px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    display: block;
}

.pub_nav_1008_drawerSubLink:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

/* ── Drawer Footer ───────────────────────────────────────── */
.pub_nav_1008_drawerFooter {
  /* composed: drawerFooter from NavBase.module.css */
  flex-shrink: 0;
    /* padding, border: set in component */
    padding: 16px 20px;
    border-top: 1px solid var(--border, #e5e7eb);
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 10px);
}

.pub_nav_1008_drawerSecondaryBtn {
    display: block;
    text-align: center;
    padding: 10px 20px;
    font-size: var(--fs-drawer, clamp(14px, 1.4vw, 15px));
    font-weight: 500;
    color: var(--text, #374151);
    text-decoration: none;
    border-radius: var(--r-btn, 8px);
    border: 1px solid var(--border, #e5e7eb);
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
}

.pub_nav_1008_drawerSecondaryBtn:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_drawerCta {
  /* composed: drawerCta from NavBase.module.css */
  display: block;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--t, 0.22s ease);
    /* padding, background, color, border-radius, font: set in component */
    padding: 11px 20px;
    background-color: var(--cta-bg, #2563eb);
    color: var(--cta-text, #ffffff);
    font-size: var(--fs-drawer, clamp(14px, 1.4vw, 15px));
    font-weight: 600;
    border-radius: var(--r-btn, 8px);
    text-align: center;
}

.pub_nav_1008_drawerCta:hover {
    background-color: var(--cta-hover, rgba(37, 99, 235, 0.88));
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */

/* ── Focus states (accessibility — required) ─────────────── */
.pub_nav_1008_navLink:focus-visible,
.pub_nav_1008_navLinkBtn:focus-visible,
.pub_nav_1008_loginBtn:focus-visible,
.pub_nav_1008_navCta:focus-visible,
.pub_nav_1008_hamburger:focus-visible,
.pub_nav_1008_drawerCloseBtn:focus-visible,
.pub_nav_1008_drawerLink:focus-visible,
.pub_nav_1008_drawerSubLink:focus-visible,
.pub_nav_1008_drawerSecondaryBtn:focus-visible,
.pub_nav_1008_drawerCta:focus-visible {
    outline: 2px solid var(--accent, #2563eb);
    outline-offset: 3px;
    border-radius: var(--r, 6px);
}

/* ── Tablet (1100px) ─────────────────────────────────────── */
@media (max-width: 1100px) {
    .pub_nav_1008_navInner {
gap: var(--space-content-gap, 12px);
    }

    .pub_nav_1008_navLinks {
        gap: 2px;
    }

    .pub_nav_1008_navLink,
    .pub_nav_1008_navLinkBtn {
        padding: 6px 6px;
    }

    .pub_nav_1008_navRight {
        gap: var(--space-content-gap, 4px);
    }

    .pub_nav_1008_loginBtn {
        padding: 5px 8px;
    }

    .pub_nav_1008_navCta {
        padding: 5px 10px;
    }
}

/* ── Tablet / Mobile (768px) ─────────────────────────────── */
@media (max-width: 768px) {
    .pub_nav_1008_navCenter {
        display: none;
    }

    .pub_nav_1008_loginBtn {
        display: none;
    }

    .pub_nav_1008_navCta {
        display: none;
    }

    .pub_nav_1008_hamburger {
        display: flex;
    }
}

/* ── Mobile (480px) ──────────────────────────────────────── */
@media (max-width: 480px) {
    .pub_nav_1008_navInner {
        padding: 0 clamp(12px, 4vw, 16px);
gap: var(--space-content-gap, 12px);
    }
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .pub_nav_1008_navBar,
    .pub_nav_1008_navLink,
    .pub_nav_1008_navLinkBtn,
    .pub_nav_1008_navDropdown,
    .pub_nav_1008_ddItem,
    .pub_nav_1008_loginBtn,
    .pub_nav_1008_navCta,
    .pub_nav_1008_drawerOverlay,
    .pub_nav_1008_mobileDrawer,
    .pub_nav_1008_drawerLink,
    .pub_nav_1008_drawerSubLink,
    .pub_nav_1008_drawerSecondaryBtn,
    .pub_nav_1008_drawerCta {
        transition: none;
    }
}

/* PUB-SERVICE-1008 — Clarity Services
 * 1008 series: white bg + indigo #6366f1 accent · clean minimal SaaS
 * JS states: [data-visible='true'] for scroll reveal (SSR only).
 */

/* ── Root / Section ─────────────────────────────────────────────────────── */
.pub_service_1008_root {
    --radial-1: rgba(99, 102, 241, 0.07);
    --radial-2: rgba(168, 85, 247, 0.05);
    --badge-border: rgba(99, 102, 241, 0.2);
    --title-grad-start: #6366f1;
    --title-grad-end: #a78bfa;
    --card-shadow: rgba(99, 102, 241, 0.12);
    --card-hover-border: rgba(99, 102, 241, 0.35);
    --badge-white: #ffffff;
    --icon-h: 52px;
    --link-hover: #8b5cf6;
    --btn-white: #ffffff;
    width: 100%;
    padding: var(--pt, 96px) 24px var(--pb, 96px);
    background: var(--texture-bg, none),
        radial-gradient(ellipse 60% 45% at 100% 0%, var(--radial-1, rgba(99, 102, 241, 0.07)) 0%, transparent 60%),
        radial-gradient(ellipse 45% 35% at 0% 100%, var(--radial-2, rgba(168, 85, 247, 0.05)) 0%, transparent 55%),
        color-mix(in srgb, color-mix(in srgb, var(--bg, #ffffff) calc(var(--material-bg-opacity, 1) * 100%), transparent) calc(var(--material-bg-opacity, 1) * 100%), transparent);
    font-family: var(--font-body, system-ui, -apple-system, sans-serif);
    color: var(--text, #0f172a);
    overflow: hidden;
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Container ──────────────────────────────────────────────────────────── */
.pub_service_1008_container {
    max-width: var(--max-w, 1200px);
    margin-inline: auto;
    padding-inline: 24px;
}

/* ── Section Header ─────────────────────────────────────────────────────── */
.pub_service_1008_headerWrap {
    text-align: center;
    margin-bottom: 56px;
}

.pub_service_1008_sectionHeader {
    display: flex;
    flex-direction: column;
    align-items: center;
gap: var(--space-content-gap, 12px);
}

.pub_service_1008_badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 6px);
    background: var(--badge-bg, rgba(99, 102, 241, 0.08));
    color: var(--badge-text, #6366f1);
    border: 1px solid var(--badge-border, rgba(99, 102, 241, 0.2));
    font-size: calc(0.8125rem * var(--heading-scale, 1));
    font-weight: 600;
    letter-spacing: var(--tracking, 0.04em);
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: var(--radius-full, 999px);
    margin-bottom: 4px;
}

.pub_service_1008_title {
    font-family: var(--font-heading, var(--font-body, system-ui, sans-serif));
    font-weight: 800;
    color: var(--text, #0f172a);
    line-height: var(--leading, 1.15);
    margin: 0;
    letter-spacing: var(--tracking, -0.03em);
}

.pub_service_1008_titleAccent {
    display: block;
    font-weight: 900;
    background: linear-gradient(110deg, var(--title-grad-start, #6366f1) 0%, var(--primary, #8b5cf6) 55%, var(--title-grad-end, #a78bfa) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: var(--leading, 1.2);
    letter-spacing: var(--tracking, -0.035em);
    margin-top: 0.06em;
    padding-bottom: 0.1em;
}

.pub_service_1008_description {
    color: var(--text-muted, #64748b);
    line-height: var(--leading, 1.7);
    max-width: 600px;
    margin: 0 auto;
}

/* ── Services Grid ──────────────────────────────────────────────────────── */
.pub_service_1008_grid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), 1fr);
gap: var(--space-gap, 24px);
}

/* ── Service Card ───────────────────────────────────────────────────────── */
.pub_service_1008_card {
    background-color: var(--card-bg, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-xl, 16px);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
gap: var(--space-content-gap, 12px);
    position: relative;
    transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
    will-change: transform;
}

.pub_service_1008_card:hover {
    transform: translateY(-3px);
    border-color: var(--card-hover-border, rgba(99, 102, 241, 0.35));
}

/* Icon wrapper */
.pub_service_1008_iconWrap {
    width: var(--icon-h, 52px);
    min-height: var(--icon-h, 52px);
    border-radius: var(--radius-lg, 12px);
    background: var(--icon-bg, rgba(99, 102, 241, 0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 4px;
}

.pub_service_1008_icon {
    font-size: calc(1.5rem * var(--body-scale, 1));
    color: var(--icon, #6366f1);
    line-height: var(--leading, 1);
}

/* Card badge */
.pub_service_1008_cardBadge {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: var(--accent, #f59e0b);
    color: var(--badge-white, #ffffff);
    letter-spacing: var(--tracking, 0.06em);
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 100px;
}

/* Card title */
.pub_service_1008_cardTitle {
    font-family: var(--font-heading, var(--font-body, system-ui, sans-serif));
    font-weight: 700;
    color: var(--text, #0f172a);
    line-height: var(--leading, 1.3);
    margin: 0;
}

/* Card description */
.pub_service_1008_cardDesc {
    font-size: calc(0.9375rem * var(--body-scale, 1));
    color: var(--text-muted, #64748b);
    line-height: var(--leading, 1.65);
    margin: 0;
    flex-grow: 1;
}

/* Feature list */
.pub_service_1008_featureList {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 8px);
    margin-top: 4px;
}

.pub_service_1008_featureItem {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    font-size: calc(0.875rem * var(--body-scale, 1));
    color: var(--text, #0f172a);
}

.pub_service_1008_featureItem i {
    font-size: calc(1rem * var(--body-scale, 1));
    color: var(--primary, #6366f1);
    flex-shrink: 0;
}

/* Card link */
.pub_service_1008_cardLink {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 6px);
    margin-top: 8px;
    font-size: calc(0.875rem * var(--body-scale, 1));
    font-weight: 600;
    color: var(--primary, #6366f1);
    text-decoration: none;
    transition: gap 0.18s ease, color 0.18s ease;
}

.pub_service_1008_cardLink:hover {
    gap: var(--space-content-gap, 10px);
    color: var(--link-hover, #8b5cf6);
}

.pub_service_1008_cardLink i {
    font-size: calc(1rem * var(--body-scale, 1));
    transition: transform 0.18s ease;
}

.pub_service_1008_cardLink:hover i {
    transform: translateX(3px);
}

/* ── Scroll reveal ──────────────────────────────────────────────────────── */
.pub_service_1008_root [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.pub_service_1008_root [data-reveal][data-visible='true'] {
    opacity: 1;
    transform: translateY(0);
}

/* ── CTA Row ────────────────────────────────────────────────────────────── */
.pub_service_1008_ctaWrap {
    margin-top: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
gap: var(--space-gap, 24px);
    background-color: var(--card-bg, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-xl, 16px);
    padding: 32px 40px;
    flex-wrap: wrap;
}

.pub_service_1008_ctaText {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 6px);
}

.pub_service_1008_ctaHeadline {
    font-family: var(--font-heading, var(--font-body, system-ui, sans-serif));
    font-weight: 700;
    color: var(--text, #0f172a);
    margin: 0;
}

.pub_service_1008_ctaDesc {
    font-size: calc(0.9375rem * var(--body-scale, 1));
    color: var(--text-muted, #64748b);
    margin: 0;
}

.pub_service_1008_ctaBtns {
    display: flex;
    align-items: center;
gap: var(--space-content-gap, 12px);
    flex-wrap: wrap;
}

/* Primary button */
.pub_service_1008_btnPrimary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    background-color: var(--cta-bg, #6366f1);
    color: var(--cta-text, #ffffff);
    font-size: calc(0.9375rem * var(--body-scale, 1));
    font-weight: 600;
    border-radius: var(--radius-lg, 8px);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.pub_service_1008_btnPrimary:hover {
    background-color: var(--cta-hover, #4f46e5);
    transform: translateY(-1px);
}

/* Secondary button */
.pub_service_1008_btnSecondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    background-color: transparent;
    color: var(--cta2-text, #6366f1);
    border: 2px solid var(--cta2-border, #6366f1);
    font-size: calc(0.9375rem * var(--body-scale, 1));
    font-weight: 600;
    border-radius: var(--radius-lg, 8px);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.pub_service_1008_btnSecondary:hover {
    background-color: var(--cta2-border, #6366f1);
    color: var(--btn-white, #ffffff);
    transform: translateY(-1px);
}

/* ── Responsive — 1024px ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .pub_service_1008_grid[data-cols='4'] {
        grid-template-columns: repeat(2, 1fr);
    }

    .pub_service_1008_grid[data-cols='3'] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Responsive — 768px ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .pub_service_1008_headerWrap {
        margin-bottom: 36px;
    }

    .pub_service_1008_grid,
    .pub_service_1008_grid[data-cols='4'],
    .pub_service_1008_grid[data-cols='3'],
    .pub_service_1008_grid[data-cols='2'] {
        grid-template-columns: 1fr;
    }

    .pub_service_1008_ctaWrap {
        flex-direction: column;
        align-items: flex-start;
        padding: var(--space-card-padding, 24px);
    }

    .pub_service_1008_ctaBtns {
        width: 100%;
    }

    .pub_service_1008_btnPrimary,
    .pub_service_1008_btnSecondary {
        width: 100%;
        justify-content: center;
    }
}

/* ── Responsive — 480px ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .pub_service_1008_container {
        padding-inline: 16px;
    }

    .pub_service_1008_card {
        padding: 24px 20px;
    }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pub_service_1008_card {
        transition: none;
    }

    .pub_service_1008_cardLink,
    .pub_service_1008_cardLink i {
        transition: none;
    }

    .pub_service_1008_btnPrimary,
    .pub_service_1008_btnSecondary {
        transition: none;
    }

    .pub_service_1008_root [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ─────────────────────────────────────────────────────────────
   PUB-CTA-1008 — Clarity CTA
   1008 series: deep indigo gradient bg · centered layout
   Pairs with: PUB-HERO-1008, PUB-NAV-1008, PUB-SERVICE-1008,
               PUB-GALLERY-1008, PUB-MENU-1008
   ───────────────────────────────────────────────────────────── */

/* ── Root ───────────────────────────────────────────────────── */
.pub_cta_1008_root {
    --radial-1: rgba(139, 92, 246, 0.38);
    --radial-2: rgba(99, 102, 241, 0.28);
    --radial-3: rgba(167, 139, 250, 0.22);
    --badge-bg: rgba(165, 180, 252, 0.15);
    --badge-border: rgba(165, 180, 252, 0.3);
    --accent-start: #a78bfa;
    --accent-mid: #c4b5fd;
    --accent-end: #e0d7ff;
    --desc-color: rgba(248, 250, 252, 0.72);
    --trust-color: rgba(248, 250, 252, 0.82);
    --btn-primary-bg: #ffffff;
    --btn-primary-text: #1e1b4b;
    --btn-primary-hover-bg: #ede9fe;
    --btn-primary-shadow: rgba(165, 180, 252, 0.4);
    --btn-secondary-border: rgba(248, 250, 252, 0.35);
    --btn-secondary-hover-bg: rgba(248, 250, 252, 0.08);
    --btn-secondary-hover-border: rgba(248, 250, 252, 0.6);
    --stars-color: #fbbf24;
    --review-color: rgba(248, 250, 252, 0.8);
    width: 100%;
    padding: var(--pt, 96px) 24px var(--pb, 96px);
    background: var(--texture-bg, none),
        radial-gradient(ellipse 70% 55% at 50% 0%, var(--radial-1, rgba(139, 92, 246, 0.38)) 0%, transparent 65%),
        radial-gradient(ellipse 50% 40% at 0% 100%, var(--radial-2, rgba(99, 102, 241, 0.28)) 0%, transparent 55%),
        radial-gradient(ellipse 40% 35% at 100% 80%, var(--radial-3, rgba(167, 139, 250, 0.22)) 0%, transparent 55%),
        color-mix(in srgb, color-mix(in srgb, var(--bg, #1e1b4b) calc(var(--material-bg-opacity, 1) * 100%), transparent) calc(var(--material-bg-opacity, 1) * 100%), transparent);
    font-family: var(--font-body, system-ui, -apple-system, sans-serif);
    color: var(--text, #f8fafc);
    overflow: hidden;
    position: relative;
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Container ──────────────────────────────────────────────── */
.pub_cta_1008_container {
    max-width: var(--max-w, 860px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-gap, 40px);
    text-align: center;
    position: relative;
    z-index: var(--z-base, 1);
    /* above decorative radial gradients */
}

/* ── Badge ──────────────────────────────────────────────────── */
.pub_cta_1008_badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 6px);
    padding: 5px 16px;
    background: var(--badge-bg, rgba(165, 180, 252, 0.15));
    border: 1px solid var(--badge-border, rgba(165, 180, 252, 0.3));
    border-radius: var(--radius-full, 999px);
    font-size: calc(0.8125rem * var(--heading-scale, 1));
    font-weight: 600;
    letter-spacing: var(--tracking, 0.04em);
    text-transform: uppercase;
    color: var(--text, #f8fafc);
}

/* ── Header Wrap ────────────────────────────────────────────── */
.pub_cta_1008_headerWrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-content-gap, 16px);
    max-width: 680px;
}

/* ── Title ──────────────────────────────────────────────────── */
.pub_cta_1008_title {
    font-family: var(--font-heading, var(--font-body, system-ui, sans-serif));
    font-weight: 800;
    line-height: var(--leading, 1.1);
    letter-spacing: var(--tracking, -0.03em);
    color: var(--text, #f8fafc);
    margin: 0;
}

/* ── Title Accent (gradient light purple) ───────────────────── */
.pub_cta_1008_titleAccent {
    display: block;
    font-weight: 900;
    line-height: var(--leading, 1.1);
    letter-spacing: var(--tracking, -0.035em);
    margin: 0;
    background: linear-gradient(110deg, var(--accent-start, #a78bfa) 0%, var(--accent-mid, #c4b5fd) 50%, var(--accent-end, #e0d7ff) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-bottom: 0.1em;
}

/* ── Description ────────────────────────────────────────────── */
.pub_cta_1008_description {
    line-height: var(--leading, 1.7);
    color: var(--desc-color, rgba(248, 250, 252, 0.72));
    max-width: 560px;
    margin: 0;
}

/* ── Trust Row ──────────────────────────────────────────────── */
.pub_cta_1008_trustRow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 28px;
}

.pub_cta_1008_trustItem {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: calc(0.875rem * var(--body-scale, 1));
    font-weight: 500;
    color: var(--trust-color, rgba(248, 250, 252, 0.82));
}

/* ── Button Group ───────────────────────────────────────────── */
.pub_cta_1008_btnGroup {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
gap: var(--space-content-gap, 12px);
}

.pub_cta_1008_btnPrimary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    padding: 14px 32px;
    background: var(--btn-primary-bg, #ffffff);
    color: var(--btn-primary-text, #1e1b4b);
    font-size: calc(1rem * var(--body-scale, 1));
    font-weight: 700;
    border-radius: var(--radius-lg, 8px);
    text-decoration: none;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

.pub_cta_1008_btnPrimary:hover {
    background: var(--btn-primary-hover-bg, #ede9fe);
    transform: translateY(-2px);
}

.pub_cta_1008_btnSecondary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    padding: 14px 32px;
    background: transparent;
    color: var(--text, #f8fafc);
    font-size: calc(1rem * var(--body-scale, 1));
    font-weight: 600;
    border-radius: var(--radius-lg, 8px);
    border: 1.5px solid var(--btn-secondary-border, rgba(248, 250, 252, 0.35));
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

.pub_cta_1008_btnSecondary:hover {
    background: var(--btn-secondary-hover-bg, rgba(248, 250, 252, 0.08));
    border-color: var(--btn-secondary-hover-border, rgba(248, 250, 252, 0.6));
    transform: translateY(-2px);
}

/* ── Social Proof Badge ─────────────────────────────────────── */
.pub_cta_1008_socialProof {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 10px);
    opacity: 0.85;
}

.pub_cta_1008_stars {
    color: var(--stars-color, #fbbf24);
}

.pub_cta_1008_reviewCount {
    font-size: calc(0.875rem * var(--body-scale, 1));
    font-weight: 500;
    color: var(--review-color, rgba(248, 250, 252, 0.8));
}

/* ── Scroll Reveal ──────────────────────────────────────────── */
.pub_cta_1008_root [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.pub_cta_1008_root [data-reveal][data-visible='true'] {
    opacity: 1;
    transform: none;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 576px) {

    .pub_cta_1008_btnPrimary,
    .pub_cta_1008_btnSecondary {
        width: 100%;
        justify-content: center;
    }

    .pub_cta_1008_btnGroup {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
    }
}

/* ── Reduced Motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pub_cta_1008_root [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .pub_cta_1008_btnPrimary,
    .pub_cta_1008_btnSecondary {
        transition: none;
    }
}

/* ============================================================
   PUB-FOOTER-1008 — Universal Footer (4-column grid layout)
   1008 series: #0f172a bg · #6366f1 accent · Inter font
   Layouts: grid | stacked | minimal  (via data-layout attr)
   ============================================================ */

/* ── Root / Section wrapper ─────────────────────────────── */
.pub_footer_1008_root {
    --newsletter-input-bg: rgba(255, 255, 255, 0.06);
    --newsletter-focus-shadow: rgba(99, 102, 241, 0.2);
    --alert-color: #f87171;
    --btn-text: #fff;
    background: var(--texture-bg, none),
        color-mix(in srgb, color-mix(in srgb, var(--bg, #0f172a) calc(var(--material-bg-opacity, 1) * 100%), transparent) calc(var(--material-bg-opacity, 1) * 100%), transparent);
    color: var(--text, #e2e8f0);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    padding-top: var(--pt, 80px);
    padding-bottom: var(--pb, 40px);
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Container ───────────────────────────────────────────── */
.pub_footer_1008_container {
    max-width: var(--max-w, 1200px);
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 3rem);
}

/* ── Main grid ───────────────────────────────────────────── */
.pub_footer_1008_mainGrid {
    display: grid;
    grid-template-columns: 1.8fr 2fr 1fr 1.4fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
}

/* stacked layout overrides */
.pub_footer_1008_root[data-layout="stacked"] .pub_footer_1008_mainGrid {
    grid-template-columns: 1fr;
    gap: var(--space-gap, 2rem);
}

/* minimal layout overrides */
.pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_mainGrid {
    grid-template-columns: 1fr auto;
    gap: var(--space-gap, 2rem);
    align-items: center;
}

.pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_contactCol,
.pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_newsletterCol {
    display: none;
}

/* ── Brand Column ────────────────────────────────────────── */
.pub_footer_1008_brandCol {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.75rem);
}

.pub_footer_1008_brandLogo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 0.5rem);
    color: var(--accent, #6366f1);
    font-family: var(--font-heading, var(--font-body, 'Inter', system-ui, sans-serif));
    font-weight: 700;
    letter-spacing: var(--tracking, -0.02em);
    text-decoration: none;
    margin-bottom: 0.25rem;
    border-radius: var(--radius-sm, 4px);
}

.pub_footer_1008_brandLogo:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 3px;
}

.pub_footer_1008_brandLogo i {
    color: var(--accent, #6366f1);
}

.pub_footer_1008_brandDesc {
    color: var(--text-muted, #94a3b8);
    line-height: var(--leading, 1.65);
    margin: 0;
}

/* ── Social Icons ────────────────────────────────────────── */
.pub_footer_1008_socialRow {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 0.5rem);
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.pub_footer_1008_socialLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-height: 36px;
    border-radius: var(--radius-lg, 8px);
    background: var(--social-bg, rgba(255, 255, 255, 0.08));
    color: var(--text-muted, #94a3b8);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    border: 1px solid var(--footer-border, rgba(255, 255, 255, 0.08));
}

.pub_footer_1008_socialLink:hover {
    background: var(--accent, #6366f1);
    color: var(--social-hover-text, #fff);
    transform: translateY(-2px);
    border-color: var(--accent, #6366f1);
}

.pub_footer_1008_socialLink i {
    font-size: calc(1rem * var(--body-scale, 1));
    line-height: var(--leading, 1);
}

/* ── Links Grid ──────────────────────────────────────────── */
.pub_footer_1008_linksArea {
    /* wrapper for the links grid zone */
}

.pub_footer_1008_linksGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: clamp(1rem, 2vw, 2rem);
}

.pub_footer_1008_linksCol {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Reset browser list defaults inside FooterLinksColumn */
.pub_footer_1008_linksCol ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.25rem);
}

.pub_footer_1008_linksCol li {
    margin: 0;
    padding: 0;
}

/* ── Column Headings ─────────────────────────────────────── */
.pub_footer_1008_colHeading {
    color: var(--text, #e2e8f0);
    font-family: var(--font-heading, var(--font-body, 'Inter', system-ui, sans-serif));
    font-weight: 700;
    letter-spacing: var(--tracking, 0.1em);
    text-transform: uppercase;
    margin: 0 0 0.875rem;
}

/* ── Nav Column Links ────────────────────────────────────── */
.pub_footer_1008_footerLink {
    display: inline-block;
    color: var(--text-muted, #94a3b8);
    text-decoration: none;
    line-height: var(--leading, 1.5);
    padding: 0.125rem 0;
    border-radius: var(--radius-sm, 4px);
    transition: color 180ms ease;
}

.pub_footer_1008_footerLink:hover {
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_footerLink:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 2px;
    color: var(--text, #e2e8f0);
}

/* ── Contact Column ──────────────────────────────────────── */
.pub_footer_1008_contactCol {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.25rem);
}

.pub_footer_1008_contactItem {
    display: flex;
    align-items: flex-start;
    gap: var(--space-content-gap, 0.5rem);
    color: var(--text-muted, #94a3b8);
    line-height: var(--leading, 1.5);
    margin-bottom: 0.5rem;
}

.pub_footer_1008_contactIcon {
    color: var(--accent, #6366f1);
    font-size: calc(1rem * var(--body-scale, 1));
    margin-top: 0.1em;
    flex-shrink: 0;
}

.pub_footer_1008_contactText {
    color: var(--text-muted, #94a3b8);
    text-decoration: none;
    border-radius: var(--radius-sm, 4px);
    transition: color 180ms ease;
}

.pub_footer_1008_contactText:hover {
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_contactText:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 2px;
    color: var(--text, #e2e8f0);
}

/* ── Newsletter Column ───────────────────────────────────── */
.pub_footer_1008_newsletterCol {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.75rem);
}

/* Space out the input and button inside the newsletter form */
.pub_footer_1008_newsletterCol form {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.625rem);
}

/* Email validation error message — min-height reserves 1 line always to prevent CLS */
.pub_footer_1008_newsletterCol form span[role="alert"] {
    display: block;
    min-height: calc(0.8125rem * 1.4);
    color: var(--alert-color, #f87171);
    font-size: calc(0.8125rem * var(--body-scale, 1));
    line-height: var(--leading, 1.4);
}

.pub_footer_1008_newsletterInput {
    width: 100%;
    background: var(--newsletter-input-bg, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
    border-radius: var(--radius-md, 6px);
    color: var(--text, #e2e8f0);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: calc(0.9375rem * var(--body-scale, 1));
    padding: 0.625rem 0.875rem;
    outline: none;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.pub_footer_1008_newsletterInput:focus {
    border-color: var(--accent, #6366f1);
}

.pub_footer_1008_newsletterInput::placeholder {
    color: var(--text-muted, #64748b);
}

.pub_footer_1008_newsletterBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent, #6366f1);
    color: var(--btn-text, #fff);
    border: none;
    border-radius: var(--radius-md, 6px);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: calc(0.9375rem * var(--body-scale, 1));
    font-weight: 600;
    letter-spacing: var(--tracking, -0.01em);
    padding: 0.625rem 1.25rem;
    cursor: pointer;
    transition: opacity 150ms ease;
}

.pub_footer_1008_newsletterBtn:hover {
    opacity: 0.88;
}

.pub_footer_1008_newsletterBtn:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 3px;
    opacity: 0.88;
}

/* ── Map ─────────────────────────────────────────────────── */
.pub_footer_1008_mapWrapper {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: var(--radius-lg, 8px);
    overflow: hidden;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

/* ── App Badges ──────────────────────────────────────────── */
.pub_footer_1008_appBadges {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 1rem);
    flex-wrap: wrap;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* ── Divider ─────────────────────────────────────────────── */
.pub_footer_1008_divider {
    border: none;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    margin: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(1rem, 2vw, 1.5rem);
}

/* ── Bottom Bar ──────────────────────────────────────────── */
.pub_footer_1008_bottomBarWrapper {
    background: var(--bottom-bg, transparent);
}

.pub_footer_1008_bottomBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-content-gap, 0.75rem);
}

.pub_footer_1008_copyright {
    color: var(--text-muted, #64748b);
    margin: 0;
    line-height: var(--leading, 1.5);
}

.pub_footer_1008_legalLinks {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.125rem;
}

.pub_footer_1008_legalLink {
    color: var(--text-muted, #64748b);
    text-decoration: none;
    border-radius: var(--radius-sm, 4px);
    padding: 0.125rem 0.25rem;
    transition: color 180ms ease;
}

.pub_footer_1008_legalLink:hover {
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_legalLink:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 2px;
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_legalSep {
    color: var(--text-muted, #475569);
    font-size: calc(0.875rem * var(--body-scale, 1));
    user-select: none;
}

/* ── Certifications Row ──────────────────────────────────── */
.pub_footer_1008_certsRow {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 1rem);
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* ── Interactive states ──────────────────────────────────── */

/* ── @media 1024px ───────────────────────────────────────── */
@media (max-width: 1024px) {
    .pub_footer_1008_mainGrid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-gap, 2rem);
    }

    .pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_mainGrid {
        grid-template-columns: 1fr;
    }
}

/* ── @media 768px ────────────────────────────────────────── */
@media (max-width: 768px) {
    .pub_footer_1008_mainGrid {
        grid-template-columns: 1fr;
        gap: var(--space-gap, 1.75rem);
    }

    .pub_footer_1008_linksGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pub_footer_1008_bottomBar {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-content-gap, 0.5rem);
    }
}

/* ── @media 480px ────────────────────────────────────────── */
@media (max-width: 480px) {
    .pub_footer_1008_linksGrid {
        grid-template-columns: 1fr;
    }

    .pub_footer_1008_appBadges {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── prefers-reduced-motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .pub_footer_1008_footerLink,
    .pub_footer_1008_contactText,
    .pub_footer_1008_legalLink,
    .pub_footer_1008_brandLogo,
    .pub_footer_1008_newsletterInput,
    .pub_footer_1008_newsletterBtn {
        transition: none;
    }
}

/* Page: case-studies */
/* ============================================================
   PUB-NAV-1008 — Clarity SaaS Nav
   Series 1008 · Full-width sticky nav · Light theme · Inter font
   State: data-scrolled on .navBar  |  data-open on .mobileDrawer/.drawerOverlay
   ============================================================ */

/* ── Root ────────────────────────────────────────────────── */
.pub_nav_1008_navRoot {
    /* Scoped design tokens — not user-controlled */
    --t: 0.2s ease;
    --t-slow: 0.32s ease;
    --r: 6px;
    --r-lg: 10px;
    --r-btn: 8px;
    --fs-brand: clamp(15px, 1.5vw, 17px);
    --fs-nav: clamp(13px, 1.3vw, 14px);
    --fs-dd: clamp(12px, 1.2vw, 13.5px);
    --fs-drawer: clamp(14px, 1.4vw, 15px);
    --fs-icon: clamp(18px, 1.5vw, 20px);
    --fs-caret: 11px;
    --hover-bg: rgba(37, 99, 235, 0.06);

    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    isolation: isolate;
    /* ✅ Ensure nav stacking context sits above page content */
    position: relative;
    z-index: var(--z-nav, 1000);
    background-image: var(--texture-bg, none);
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Full-width Bar ──────────────────────────────────────── */
.pub_nav_1008_navBar {
    position: var(--navbar-position, fixed);
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav, 1000);
    /* above page content, below drawer overlay */
    background-color: var(--bg, #ffffff);
    border-bottom: 1px solid var(--border, #e5e7eb);
    transition:
        border-color var(--t, 0.2s ease),
        box-shadow var(--t, 0.2s ease);
    padding-top: var(--pt, 0);
    padding-bottom: var(--pb, 0);
}

.pub_nav_1008_navBar[data-scrolled='true'] {
    border-color: var(--border, #e5e7eb);
}

/* ── Inner container ─────────────────────────────────────── */
.pub_nav_1008_navInner {
    max-width: var(--max-w, 1200px);
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 40px);
    min-height: var(--nav-h, 72px);
    display: flex;
    align-items: center;
    justify-content: space-between;
gap: var(--space-gap, 32px);
}

/* ── Logo ────────────────────────────────────────────────── */
.pub_nav_1008_logo {
  /* composed: logo from NavBase.module.css */
  display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity var(--t, 0.22s ease);
    /* gap, margin, color: set in component */
    gap: var(--space-content-gap, 8px);
    color: var(--text, #374151);
    text-decoration: none;
}

.pub_nav_1008_logoMark {
    font-size: var(--fs-icon, clamp(18px, 1.5vw, 20px));
    color: var(--cta-bg, #2563eb);
    line-height: var(--leading, 1);
}

.pub_nav_1008_logoWord {
    font-size: var(--fs-brand, clamp(15px, 1.5vw, 17px));
    font-weight: 700;
    letter-spacing: var(--tracking, -0.02em);
    color: var(--text, #374151);
    white-space: nowrap;
}

.pub_nav_1008_logoImg {
  /* composed: logoImg from NavBase.module.css */
  object-fit: contain;
    display: block;
    /* width, height: set via CSS vars in component */
    width: var(--brand-image-width, 160px);
    height: var(--brand-image-height, 40px);
}

/* ── Center: Desktop nav links ───────────────────────────── */
.pub_nav_1008_navCenter {
    flex: 1;
    display: flex;
    justify-content: center;
}

.pub_nav_1008_navLinks {
  /* composed: navLinks from NavBase.module.css */
  display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    /* gap: set in component */
    gap: var(--space-content-gap, 4px);
}

.pub_nav_1008_dropWrap {
    position: relative;
}

.pub_nav_1008_navLink {
  /* composed: navLink from NavBase.module.css */
  display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: color var(--t, 0.22s ease), background-color var(--t, 0.22s ease);
    /* padding, font-size, font-weight, color, border-radius: set in component */
    padding: 6px 10px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 500;
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
}

.pub_nav_1008_navLink:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_navLinkBtn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 4px);
    padding: 6px 10px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 500;
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    background: none;
    border: none;
    cursor: pointer;
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
}

.pub_nav_1008_navLinkBtn:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_navCaret {
    font-size: var(--fs-caret, 11px);
    transition: transform var(--t, 0.2s ease);
}

/* ── Dropdown panel ──────────────────────────────────────── */
.pub_nav_1008_navDropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 160px;
    background-color: var(--bg, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--r-lg, 10px);
    padding: 6px;
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* open/close via data-open */
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-6px);
    transition:
        opacity var(--t, 0.2s ease),
        transform var(--t, 0.2s ease);
    z-index: var(--z-dropdown, 1200);
    /* above nav links, below sticky bar */
}

.pub_nav_1008_navDropdown[data-open='true'] {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.pub_nav_1008_ddItem {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    padding: 8px 12px;
    font-size: var(--fs-dd, clamp(12px, 1.2vw, 13.5px));
    font-weight: 500;
    color: var(--text, #374151);
    text-decoration: none;
    border-radius: var(--r, 6px);
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
    white-space: nowrap;
}

.pub_nav_1008_ddItem:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

/* ── Right area ──────────────────────────────────────────── */
.pub_nav_1008_navRight {
  /* composed: navRight from NavBase.module.css */
  display: flex;
    align-items: center;
    flex-shrink: 0;
    /* gap, margin: set in component */
    gap: var(--space-content-gap, 8px);
}

.pub_nav_1008_loginBtn {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 500;
    color: var(--text, #374151);
    text-decoration: none;
    border-radius: var(--r, 6px);
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
    white-space: nowrap;
}

.pub_nav_1008_loginBtn:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_navCta {
  /* composed: navCta from NavBase.module.css */
  display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: background-color var(--t, 0.22s ease), transform var(--t, 0.22s ease);
    /* padding, background, color, border-radius, font: set in component */
    padding: 7px 18px;
    background-color: var(--cta-bg, #2563eb);
    color: var(--cta-text, #ffffff);
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 600;
    border-radius: var(--r-btn, 8px);
    white-space: nowrap;
}

.pub_nav_1008_navCta:hover {
    background-color: var(--cta-hover, rgba(37, 99, 235, 0.88));
    transform: translateY(-1px);
}

/* ── Hamburger ───────────────────────────────────────────── */
.pub_nav_1008_hamburger {
  /* composed: hamburger from NavBase.module.css */
  display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    transition: background-color var(--t, 0.22s ease);
    width: 36px;
    min-height: var(--hamburger-h, 36px);
    font-size: var(--fs-icon, clamp(18px, 1.5vw, 20px));
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    display: none;
    /* visible on mobile via media query */
}

.pub_nav_1008_hamburger:hover {
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_hamburgerLine {
  /* composed: hamburgerLine from NavBase.module.css */
  display: block;
    transition: transform var(--t, 0.22s ease), opacity var(--t, 0.22s ease);
    width: 20px;
    height: 2px;
    background-color: var(--text, #374151);
    border-radius: 2px;
}

/* ── Drawer Overlay ──────────────────────────────────────── */
.pub_nav_1008_drawerOverlay {
  /* composed: drawerOverlay from NavBase.module.css */
  inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t, 0.22s ease), visibility var(--t, 0.22s ease);
    /* position, z-index, background-color: set in component */
    position: var(--drawer-position, fixed);
    z-index: var(--z-drawer, 1100);
    /* above sticky navbar, below drawer panel */
    background-color: var(--overlay-bg, rgba(17, 24, 39, 0.4));
}

.pub_nav_1008_drawerOverlay[data-open='true'] {
    opacity: 1;
    visibility: visible;
}

/* ── Mobile Drawer ───────────────────────────────────────── */
.pub_nav_1008_mobileDrawer {
  /* composed: mobileDrawer from NavBase.module.css */
  top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--t-slow, 0.36s ease);
    overflow-y: auto;
    /* position, z-index, width, background-color, border, box-shadow: set in component */
    position: var(--drawer-position, fixed);
    z-index: var(--z-drawer, 1100);
    /* above overlay, topmost drawer layer */
    width: min(320px, 85vw);
    background-color: var(--bg, #ffffff);
    border-left: 1px solid var(--border, #e5e7eb);
}

.pub_nav_1008_mobileDrawer[data-open='true'] {
    transform: translateX(0);
}

/* ── Drawer Header ───────────────────────────────────────── */
.pub_nav_1008_drawerHeader {
  /* composed: drawerHeader from NavBase.module.css */
  display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    /* padding, border: set in component */
    padding: 18px 20px;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.pub_nav_1008_drawerBrand {
  /* composed: drawerBrand from NavBase.module.css */
  display: flex;
    align-items: center;
    /* gap, font-family, font-size, color: set in component */
    gap: var(--space-content-gap, 8px);
    font-size: var(--fs-brand, clamp(15px, 1.5vw, 17px));
    font-weight: 700;
    color: var(--text, #374151);
}

.pub_nav_1008_drawerBrandMark {
    font-size: var(--fs-icon, clamp(18px, 1.5vw, 20px));
    color: var(--cta-bg, #2563eb);
}

.pub_nav_1008_drawerCloseBtn {
  /* composed: drawerCloseBtn from NavBase.module.css */
  display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color var(--t, 0.22s ease);
    /* width, height, font-size, color: set in component */
    width: 32px;
    min-height: var(--close-btn-h, 32px);
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
}

.pub_nav_1008_drawerCloseBtn:hover {
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

/* ── Drawer Links ────────────────────────────────────────── */
.pub_nav_1008_drawerLinks {
  /* composed: drawerLinks from NavBase.module.css */
  flex: 1;
    display: flex;
    flex-direction: column;
    /* padding: set in component */
    padding: 12px 12px;
    gap: 2px;
}

.pub_nav_1008_drawerLink {
  /* composed: drawerLink from NavBase.module.css */
  display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: color var(--t, 0.22s ease), background-color var(--t, 0.22s ease);
    /* padding, font-size, font-weight, color, font-family, border-radius: set in component */
    padding: 10px 12px;
    font-size: var(--fs-drawer, clamp(14px, 1.4vw, 15px));
    font-weight: 500;
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
}

.pub_nav_1008_drawerLink:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_drawerCaret {
  /* composed: drawerCaret from NavBase.module.css */
  transition: transform var(--t, 0.22s ease);
    /* font-size: set in component */
    font-size: var(--fs-caret, 11px);
}

.pub_nav_1008_drawerSub {
  /* composed: drawerSub from NavBase.module.css */
  max-height: 0;
    overflow: hidden;
    transition: max-height var(--t-slow, 0.36s ease);
    padding-left: 12px;
}

.pub_nav_1008_drawerSubLink {
  /* composed: drawerSubLink from NavBase.module.css */
  display: block;
    text-decoration: none;
    transition: color var(--t, 0.22s ease), background-color var(--t, 0.22s ease);
    /* padding, font-size, color: set in component */
    padding: 8px 12px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    display: block;
}

.pub_nav_1008_drawerSubLink:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

/* ── Drawer Footer ───────────────────────────────────────── */
.pub_nav_1008_drawerFooter {
  /* composed: drawerFooter from NavBase.module.css */
  flex-shrink: 0;
    /* padding, border: set in component */
    padding: 16px 20px;
    border-top: 1px solid var(--border, #e5e7eb);
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 10px);
}

.pub_nav_1008_drawerSecondaryBtn {
    display: block;
    text-align: center;
    padding: 10px 20px;
    font-size: var(--fs-drawer, clamp(14px, 1.4vw, 15px));
    font-weight: 500;
    color: var(--text, #374151);
    text-decoration: none;
    border-radius: var(--r-btn, 8px);
    border: 1px solid var(--border, #e5e7eb);
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
}

.pub_nav_1008_drawerSecondaryBtn:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_drawerCta {
  /* composed: drawerCta from NavBase.module.css */
  display: block;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--t, 0.22s ease);
    /* padding, background, color, border-radius, font: set in component */
    padding: 11px 20px;
    background-color: var(--cta-bg, #2563eb);
    color: var(--cta-text, #ffffff);
    font-size: var(--fs-drawer, clamp(14px, 1.4vw, 15px));
    font-weight: 600;
    border-radius: var(--r-btn, 8px);
    text-align: center;
}

.pub_nav_1008_drawerCta:hover {
    background-color: var(--cta-hover, rgba(37, 99, 235, 0.88));
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */

/* ── Focus states (accessibility — required) ─────────────── */
.pub_nav_1008_navLink:focus-visible,
.pub_nav_1008_navLinkBtn:focus-visible,
.pub_nav_1008_loginBtn:focus-visible,
.pub_nav_1008_navCta:focus-visible,
.pub_nav_1008_hamburger:focus-visible,
.pub_nav_1008_drawerCloseBtn:focus-visible,
.pub_nav_1008_drawerLink:focus-visible,
.pub_nav_1008_drawerSubLink:focus-visible,
.pub_nav_1008_drawerSecondaryBtn:focus-visible,
.pub_nav_1008_drawerCta:focus-visible {
    outline: 2px solid var(--accent, #2563eb);
    outline-offset: 3px;
    border-radius: var(--r, 6px);
}

/* ── Tablet (1100px) ─────────────────────────────────────── */
@media (max-width: 1100px) {
    .pub_nav_1008_navInner {
gap: var(--space-content-gap, 12px);
    }

    .pub_nav_1008_navLinks {
        gap: 2px;
    }

    .pub_nav_1008_navLink,
    .pub_nav_1008_navLinkBtn {
        padding: 6px 6px;
    }

    .pub_nav_1008_navRight {
        gap: var(--space-content-gap, 4px);
    }

    .pub_nav_1008_loginBtn {
        padding: 5px 8px;
    }

    .pub_nav_1008_navCta {
        padding: 5px 10px;
    }
}

/* ── Tablet / Mobile (768px) ─────────────────────────────── */
@media (max-width: 768px) {
    .pub_nav_1008_navCenter {
        display: none;
    }

    .pub_nav_1008_loginBtn {
        display: none;
    }

    .pub_nav_1008_navCta {
        display: none;
    }

    .pub_nav_1008_hamburger {
        display: flex;
    }
}

/* ── Mobile (480px) ──────────────────────────────────────── */
@media (max-width: 480px) {
    .pub_nav_1008_navInner {
        padding: 0 clamp(12px, 4vw, 16px);
gap: var(--space-content-gap, 12px);
    }
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .pub_nav_1008_navBar,
    .pub_nav_1008_navLink,
    .pub_nav_1008_navLinkBtn,
    .pub_nav_1008_navDropdown,
    .pub_nav_1008_ddItem,
    .pub_nav_1008_loginBtn,
    .pub_nav_1008_navCta,
    .pub_nav_1008_drawerOverlay,
    .pub_nav_1008_mobileDrawer,
    .pub_nav_1008_drawerLink,
    .pub_nav_1008_drawerSubLink,
    .pub_nav_1008_drawerSecondaryBtn,
    .pub_nav_1008_drawerCta {
        transition: none;
    }
}

/* ============================================================
   PUB-GALLERY-1008 — Mosaic Portfolio Gallery
   Layout: CSS columns masonry · hover overlay reveal · indigo accent
   1008 series: #ffffff white bg · #6366f1 indigo · #0f172a navy text

   KEY LAYOUT DIFFERENCES from existing galleries:
     - PUB-GALLERY-009/010: text-heavy case study cards with stats
     - PUB-GALLERY-028: before/after split image cards
     - PUB-GALLERY-1008: pure image masonry with hover overlay (CSS only)
       Variable aspect ratios create organic height diversity.
       Category filter + smooth hover reveal = clean portfolio feel.
   ============================================================ */

/* ── Root / Section ─────────────────────────────────────────── */
.pub_gallery_1008_root {
    --radial-1: rgba(99, 102, 241, 0.07);
    --radial-2: rgba(168, 85, 247, 0.05);
    --badge-border: rgba(99, 102, 241, 0.2);
    --accent-light: #a78bfa;
    --filter-hover-bg: rgba(99, 102, 241, 0.04);
    --filter-active-text: #ffffff;
    --overlay-mid: rgba(15, 23, 46, 0.35);
    --card-text: #ffffff;
    --card-text-muted: rgba(255, 255, 255, 0.72);
    --card-link-border: rgba(255, 255, 255, 0.35);
    --card-link-border-hover: rgba(255, 255, 255, 0.8);
    --cta-text: #ffffff;
    width: 100%;
    padding: var(--pt, 96px) 24px var(--pb, 96px);
    background: var(--texture-bg, none),
        radial-gradient(ellipse 60% 45% at 100% 0%, var(--radial-1, rgba(99, 102, 241, 0.07)) 0%, transparent 60%),
        radial-gradient(ellipse 45% 35% at 0% 100%, var(--radial-2, rgba(168, 85, 247, 0.05)) 0%, transparent 55%),
        color-mix(in srgb, color-mix(in srgb, var(--bg, #ffffff) calc(var(--material-bg-opacity, 1) * 100%), transparent) calc(var(--material-bg-opacity, 1) * 100%), transparent);
    font-family: var(--font-body, system-ui, -apple-system, sans-serif);
    color: var(--text, #0f172a);
    overflow: hidden;
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Container ──────────────────────────────────────────────── */
.pub_gallery_1008_container {
    max-width: var(--max-w, 1280px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-gap, 48px);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION HEADER — centered
   ═══════════════════════════════════════════════════════════════ */
.pub_gallery_1008_headerWrap {
    text-align: center;
}

.pub_gallery_1008_sectionHeader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 680px;
    margin: 0 auto;
}

.pub_gallery_1008_badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 6px);
    padding: 5px 16px;
    background: var(--badge-bg, rgba(99, 102, 241, 0.08));
    color: var(--badge-text, #6366f1);
    border: 1px solid var(--badge-border, rgba(99, 102, 241, 0.2));
    border-radius: var(--radius-full, 999px);
    font-size: calc(0.8125rem * var(--heading-scale, 1));
    font-weight: 600;
    letter-spacing: var(--tracking, 0.04em);
    text-transform: uppercase;
}

.pub_gallery_1008_sectionTitle {
    font-family: var(--font-heading, var(--font-body, system-ui, sans-serif));
    font-weight: 800;
    line-height: var(--leading, 1.15);
    letter-spacing: var(--tracking, -0.03em);
    color: var(--text, #0f172a);
    margin: 0;
}

.pub_gallery_1008_titleAccent {
    display: block;
    font-weight: 900;
    line-height: var(--leading, 1.1);
    letter-spacing: var(--tracking, -0.035em);
    margin-top: 0.05em;
    padding-bottom: 0.1em;
    background: linear-gradient(110deg, var(--accent, #6366f1) 0%, var(--accent, #8b5cf6) 55%, var(--accent-light, #a78bfa) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pub_gallery_1008_sectionDesc {
    line-height: var(--leading, 1.75);
    color: var(--text-muted, #64748b);
    max-width: 600px;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   FILTER PILLS
   ═══════════════════════════════════════════════════════════════ */
.pub_gallery_1008_filterBar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-content-gap, 8px);
    flex-wrap: wrap;
}

.pub_gallery_1008_filterBtn {
    padding: 8px 20px;
    border-radius: var(--radius-full, 999px);
    border: 1.5px solid var(--border, #e5e7eb);
    background: transparent;
    color: var(--text-muted, #64748b);
    font-size: calc(0.875rem * var(--body-scale, 1));
    font-weight: 500;
    font-family: var(--font-body, system-ui, sans-serif);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    white-space: nowrap;
}

.pub_gallery_1008_filterBtn:hover {
    border-color: var(--accent, #6366f1);
    color: var(--accent, #6366f1);
    background: var(--filter-hover-bg, rgba(99, 102, 241, 0.04));
}

/* Active filter pill — solid indigo */
.pub_gallery_1008_filterBtnActive {
    background: var(--accent, #6366f1);
    color: var(--filter-active-text, #ffffff);
    border-color: var(--accent, #6366f1);
    font-weight: 600;
}

.pub_gallery_1008_filterBtnActive:hover {
    background: var(--accent, #6366f1);
    color: var(--filter-active-text, #ffffff);
    opacity: 0.9;
}

/* ═══════════════════════════════════════════════════════════════
   MASONRY GRID — CSS columns
   Items flow top-to-bottom in each column for natural height variation.
   Different aspect ratios on each item create the organic masonry look.
   ═══════════════════════════════════════════════════════════════ */
.pub_gallery_1008_grid {
    columns: 3;
    column-gap: var(--space-content-gap, 16px);
}

/* ═══════════════════════════════════════════════════════════════
   GALLERY ITEM — break-inside: avoid keeps item in one column
   ═══════════════════════════════════════════════════════════════ */
.pub_gallery_1008_item {
    break-inside: avoid;
    margin-bottom: 16px;
    display: block;
}

/* Image wrapper — aspect-ratio driven by --ratio CSS variable set inline */
.pub_gallery_1008_imgWrap {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    aspect-ratio: var(--ratio, 4/3);
    display: block;
    cursor: pointer;
    box-shadow: var(--shadow-sm, none);
}

/* The image itself */
.pub_gallery_1008_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(calc(var(--img-zoom, 100) / 100));
    transform-origin: center center;
    transition: transform 0.55s ease;
    will-change: transform;
}

.pub_gallery_1008_item:hover .pub_gallery_1008_img {
    transform: scale(calc(var(--img-zoom, 100) / 100 * 1.06));
}

/* ═══════════════════════════════════════════════════════════════
   HOVER OVERLAY — dark gradient from bottom, fade-in
   ═══════════════════════════════════════════════════════════════ */
.pub_gallery_1008_overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            var(--overlay, rgba(15, 23, 46, 0.92)) 0%,
            var(--overlay-mid, rgba(15, 23, 46, 0.35)) 45%,
            transparent 75%);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px;
}

.pub_gallery_1008_item:hover .pub_gallery_1008_overlay {
    opacity: 1;
}

/* Category badge — top-left, slides down on hover */
.pub_gallery_1008_categoryBadge {
    align-self: flex-start;
    background: var(--accent, #6366f1);
    color: var(--card-text, #ffffff);
    font-size: calc(0.6875rem * var(--heading-scale, 1));
    font-weight: 700;
    letter-spacing: var(--tracking, 0.06em);
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 100px;
    white-space: nowrap;
    transform: translateY(-6px);
    transition: transform 0.3s ease;
}

.pub_gallery_1008_item:hover .pub_gallery_1008_categoryBadge {
    transform: translateY(0);
}

/* Overlay bottom block — title, subtitle, link — slides up */
.pub_gallery_1008_overlayBottom {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 4px);
    transform: translateY(10px);
    transition: transform 0.3s ease;
}

.pub_gallery_1008_item:hover .pub_gallery_1008_overlayBottom {
    transform: translateY(0);
}

/* Item title */
.pub_gallery_1008_itemTitle {
    font-family: var(--font-heading, var(--font-body, system-ui, sans-serif));
    font-weight: 700;
    color: var(--card-text, #ffffff);
    margin: 0;
    line-height: var(--leading, 1.3);
}

/* Item subtitle */
.pub_gallery_1008_itemSubtitle {
    font-size: calc(0.8125rem * var(--heading-scale, 1));
    color: var(--card-text-muted, rgba(255, 255, 255, 0.72));
    margin: 0;
    line-height: var(--leading, 1.4);
}

/* View project link */
.pub_gallery_1008_viewLink {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    font-size: calc(0.8125rem * var(--body-scale, 1));
    font-weight: 600;
    color: var(--card-text, #ffffff);
    text-decoration: none;
    border-bottom: 1px solid var(--card-link-border, rgba(255, 255, 255, 0.35));
    padding-bottom: 1px;
    width: fit-content;
    transition: border-color 0.18s ease, gap 0.18s ease;
}

.pub_gallery_1008_viewLink:hover {
    border-color: var(--card-link-border-hover, rgba(255, 255, 255, 0.8));
    gap: var(--space-content-gap, 8px);
}

.pub_gallery_1008_viewLink i {
    font-size: calc(0.875rem * var(--body-scale, 1));
    transition: transform 0.18s ease;
}

.pub_gallery_1008_viewLink:hover i {
    transform: translateX(2px);
}

/* ── Scroll reveal ──────────────────────────────────────────── */
.pub_gallery_1008_root [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.pub_gallery_1008_root [data-reveal][data-visible='true'] {
    opacity: 1;
    transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
   BOTTOM CTA
   ═══════════════════════════════════════════════════════════════ */
.pub_gallery_1008_ctaWrap {
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

.pub_gallery_1008_ctaBtn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 10px);
    padding: 14px 36px;
    background: var(--accent, #6366f1);
    color: var(--cta-text, #ffffff);
    font-size: calc(0.9375rem * var(--body-scale, 1));
    font-weight: 600;
    border-radius: var(--radius-full, 999px);
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.18s ease, transform 0.18s ease;
    box-shadow: var(--shadow-sm, none);
}

.pub_gallery_1008_ctaBtn:hover {
    opacity: 0.88;
    transform: translateY(-2px);
}

.pub_gallery_1008_ctaBtn i {
    font-size: calc(1rem * var(--body-scale, 1));
    transition: transform 0.18s ease;
}

.pub_gallery_1008_ctaBtn:hover i {
    transform: translateX(3px);
}

/* ── Responsive — 1024px ────────────────────────────────────── */
@media (max-width: 1024px) {
    .pub_gallery_1008_grid {
        columns: 2;
    }
}

/* ── Responsive — 640px ─────────────────────────────────────── */
@media (max-width: 640px) {
    .pub_gallery_1008_grid {
        columns: 1;
    }

    .pub_gallery_1008_filterBar {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .pub_gallery_1008_filterBar::-webkit-scrollbar {
        display: none;
    }

    .pub_gallery_1008_filterBtn {
        flex-shrink: 0;
    }
}

/* ── Responsive — 480px ─────────────────────────────────────── */
@media (max-width: 480px) {
    .pub_gallery_1008_root {
        padding-inline: 16px;
    }
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .pub_gallery_1008_img,
    .pub_gallery_1008_overlay,
    .pub_gallery_1008_categoryBadge,
    .pub_gallery_1008_overlayBottom,
    .pub_gallery_1008_viewLink,
    .pub_gallery_1008_viewLink i,
    .pub_gallery_1008_ctaBtn,
    .pub_gallery_1008_ctaBtn i,
    .pub_gallery_1008_filterBtn {
        transition: none;
    }

    /* Still show overlay on hover — just instant */
    .pub_gallery_1008_item:hover .pub_gallery_1008_overlay {
        opacity: 1;
    }

    .pub_gallery_1008_item:hover .pub_gallery_1008_categoryBadge {
        transform: translateY(0);
    }

    .pub_gallery_1008_item:hover .pub_gallery_1008_overlayBottom {
        transform: translateY(0);
    }

    .pub_gallery_1008_root [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ─────────────────────────────────────────────────────────────
   PUB-CTA-1008 — Clarity CTA
   1008 series: deep indigo gradient bg · centered layout
   Pairs with: PUB-HERO-1008, PUB-NAV-1008, PUB-SERVICE-1008,
               PUB-GALLERY-1008, PUB-MENU-1008
   ───────────────────────────────────────────────────────────── */

/* ── Root ───────────────────────────────────────────────────── */
.pub_cta_1008_root {
    --radial-1: rgba(139, 92, 246, 0.38);
    --radial-2: rgba(99, 102, 241, 0.28);
    --radial-3: rgba(167, 139, 250, 0.22);
    --badge-bg: rgba(165, 180, 252, 0.15);
    --badge-border: rgba(165, 180, 252, 0.3);
    --accent-start: #a78bfa;
    --accent-mid: #c4b5fd;
    --accent-end: #e0d7ff;
    --desc-color: rgba(248, 250, 252, 0.72);
    --trust-color: rgba(248, 250, 252, 0.82);
    --btn-primary-bg: #ffffff;
    --btn-primary-text: #1e1b4b;
    --btn-primary-hover-bg: #ede9fe;
    --btn-primary-shadow: rgba(165, 180, 252, 0.4);
    --btn-secondary-border: rgba(248, 250, 252, 0.35);
    --btn-secondary-hover-bg: rgba(248, 250, 252, 0.08);
    --btn-secondary-hover-border: rgba(248, 250, 252, 0.6);
    --stars-color: #fbbf24;
    --review-color: rgba(248, 250, 252, 0.8);
    width: 100%;
    padding: var(--pt, 96px) 24px var(--pb, 96px);
    background: var(--texture-bg, none),
        radial-gradient(ellipse 70% 55% at 50% 0%, var(--radial-1, rgba(139, 92, 246, 0.38)) 0%, transparent 65%),
        radial-gradient(ellipse 50% 40% at 0% 100%, var(--radial-2, rgba(99, 102, 241, 0.28)) 0%, transparent 55%),
        radial-gradient(ellipse 40% 35% at 100% 80%, var(--radial-3, rgba(167, 139, 250, 0.22)) 0%, transparent 55%),
        color-mix(in srgb, color-mix(in srgb, var(--bg, #1e1b4b) calc(var(--material-bg-opacity, 1) * 100%), transparent) calc(var(--material-bg-opacity, 1) * 100%), transparent);
    font-family: var(--font-body, system-ui, -apple-system, sans-serif);
    color: var(--text, #f8fafc);
    overflow: hidden;
    position: relative;
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Container ──────────────────────────────────────────────── */
.pub_cta_1008_container {
    max-width: var(--max-w, 860px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-gap, 40px);
    text-align: center;
    position: relative;
    z-index: var(--z-base, 1);
    /* above decorative radial gradients */
}

/* ── Badge ──────────────────────────────────────────────────── */
.pub_cta_1008_badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 6px);
    padding: 5px 16px;
    background: var(--badge-bg, rgba(165, 180, 252, 0.15));
    border: 1px solid var(--badge-border, rgba(165, 180, 252, 0.3));
    border-radius: var(--radius-full, 999px);
    font-size: calc(0.8125rem * var(--heading-scale, 1));
    font-weight: 600;
    letter-spacing: var(--tracking, 0.04em);
    text-transform: uppercase;
    color: var(--text, #f8fafc);
}

/* ── Header Wrap ────────────────────────────────────────────── */
.pub_cta_1008_headerWrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-content-gap, 16px);
    max-width: 680px;
}

/* ── Title ──────────────────────────────────────────────────── */
.pub_cta_1008_title {
    font-family: var(--font-heading, var(--font-body, system-ui, sans-serif));
    font-weight: 800;
    line-height: var(--leading, 1.1);
    letter-spacing: var(--tracking, -0.03em);
    color: var(--text, #f8fafc);
    margin: 0;
}

/* ── Title Accent (gradient light purple) ───────────────────── */
.pub_cta_1008_titleAccent {
    display: block;
    font-weight: 900;
    line-height: var(--leading, 1.1);
    letter-spacing: var(--tracking, -0.035em);
    margin: 0;
    background: linear-gradient(110deg, var(--accent-start, #a78bfa) 0%, var(--accent-mid, #c4b5fd) 50%, var(--accent-end, #e0d7ff) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-bottom: 0.1em;
}

/* ── Description ────────────────────────────────────────────── */
.pub_cta_1008_description {
    line-height: var(--leading, 1.7);
    color: var(--desc-color, rgba(248, 250, 252, 0.72));
    max-width: 560px;
    margin: 0;
}

/* ── Trust Row ──────────────────────────────────────────────── */
.pub_cta_1008_trustRow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 28px;
}

.pub_cta_1008_trustItem {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: calc(0.875rem * var(--body-scale, 1));
    font-weight: 500;
    color: var(--trust-color, rgba(248, 250, 252, 0.82));
}

/* ── Button Group ───────────────────────────────────────────── */
.pub_cta_1008_btnGroup {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
gap: var(--space-content-gap, 12px);
}

.pub_cta_1008_btnPrimary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    padding: 14px 32px;
    background: var(--btn-primary-bg, #ffffff);
    color: var(--btn-primary-text, #1e1b4b);
    font-size: calc(1rem * var(--body-scale, 1));
    font-weight: 700;
    border-radius: var(--radius-lg, 8px);
    text-decoration: none;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

.pub_cta_1008_btnPrimary:hover {
    background: var(--btn-primary-hover-bg, #ede9fe);
    transform: translateY(-2px);
}

.pub_cta_1008_btnSecondary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    padding: 14px 32px;
    background: transparent;
    color: var(--text, #f8fafc);
    font-size: calc(1rem * var(--body-scale, 1));
    font-weight: 600;
    border-radius: var(--radius-lg, 8px);
    border: 1.5px solid var(--btn-secondary-border, rgba(248, 250, 252, 0.35));
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

.pub_cta_1008_btnSecondary:hover {
    background: var(--btn-secondary-hover-bg, rgba(248, 250, 252, 0.08));
    border-color: var(--btn-secondary-hover-border, rgba(248, 250, 252, 0.6));
    transform: translateY(-2px);
}

/* ── Social Proof Badge ─────────────────────────────────────── */
.pub_cta_1008_socialProof {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 10px);
    opacity: 0.85;
}

.pub_cta_1008_stars {
    color: var(--stars-color, #fbbf24);
}

.pub_cta_1008_reviewCount {
    font-size: calc(0.875rem * var(--body-scale, 1));
    font-weight: 500;
    color: var(--review-color, rgba(248, 250, 252, 0.8));
}

/* ── Scroll Reveal ──────────────────────────────────────────── */
.pub_cta_1008_root [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.pub_cta_1008_root [data-reveal][data-visible='true'] {
    opacity: 1;
    transform: none;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 576px) {

    .pub_cta_1008_btnPrimary,
    .pub_cta_1008_btnSecondary {
        width: 100%;
        justify-content: center;
    }

    .pub_cta_1008_btnGroup {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
    }
}

/* ── Reduced Motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pub_cta_1008_root [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .pub_cta_1008_btnPrimary,
    .pub_cta_1008_btnSecondary {
        transition: none;
    }
}

/* ============================================================
   PUB-FOOTER-1008 — Universal Footer (4-column grid layout)
   1008 series: #0f172a bg · #6366f1 accent · Inter font
   Layouts: grid | stacked | minimal  (via data-layout attr)
   ============================================================ */

/* ── Root / Section wrapper ─────────────────────────────── */
.pub_footer_1008_root {
    --newsletter-input-bg: rgba(255, 255, 255, 0.06);
    --newsletter-focus-shadow: rgba(99, 102, 241, 0.2);
    --alert-color: #f87171;
    --btn-text: #fff;
    background: var(--texture-bg, none),
        color-mix(in srgb, color-mix(in srgb, var(--bg, #0f172a) calc(var(--material-bg-opacity, 1) * 100%), transparent) calc(var(--material-bg-opacity, 1) * 100%), transparent);
    color: var(--text, #e2e8f0);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    padding-top: var(--pt, 80px);
    padding-bottom: var(--pb, 40px);
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Container ───────────────────────────────────────────── */
.pub_footer_1008_container {
    max-width: var(--max-w, 1200px);
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 3rem);
}

/* ── Main grid ───────────────────────────────────────────── */
.pub_footer_1008_mainGrid {
    display: grid;
    grid-template-columns: 1.8fr 2fr 1fr 1.4fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
}

/* stacked layout overrides */
.pub_footer_1008_root[data-layout="stacked"] .pub_footer_1008_mainGrid {
    grid-template-columns: 1fr;
    gap: var(--space-gap, 2rem);
}

/* minimal layout overrides */
.pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_mainGrid {
    grid-template-columns: 1fr auto;
    gap: var(--space-gap, 2rem);
    align-items: center;
}

.pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_contactCol,
.pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_newsletterCol {
    display: none;
}

/* ── Brand Column ────────────────────────────────────────── */
.pub_footer_1008_brandCol {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.75rem);
}

.pub_footer_1008_brandLogo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 0.5rem);
    color: var(--accent, #6366f1);
    font-family: var(--font-heading, var(--font-body, 'Inter', system-ui, sans-serif));
    font-weight: 700;
    letter-spacing: var(--tracking, -0.02em);
    text-decoration: none;
    margin-bottom: 0.25rem;
    border-radius: var(--radius-sm, 4px);
}

.pub_footer_1008_brandLogo:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 3px;
}

.pub_footer_1008_brandLogo i {
    color: var(--accent, #6366f1);
}

.pub_footer_1008_brandDesc {
    color: var(--text-muted, #94a3b8);
    line-height: var(--leading, 1.65);
    margin: 0;
}

/* ── Social Icons ────────────────────────────────────────── */
.pub_footer_1008_socialRow {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 0.5rem);
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.pub_footer_1008_socialLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-height: 36px;
    border-radius: var(--radius-lg, 8px);
    background: var(--social-bg, rgba(255, 255, 255, 0.08));
    color: var(--text-muted, #94a3b8);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    border: 1px solid var(--footer-border, rgba(255, 255, 255, 0.08));
}

.pub_footer_1008_socialLink:hover {
    background: var(--accent, #6366f1);
    color: var(--social-hover-text, #fff);
    transform: translateY(-2px);
    border-color: var(--accent, #6366f1);
}

.pub_footer_1008_socialLink i {
    font-size: calc(1rem * var(--body-scale, 1));
    line-height: var(--leading, 1);
}

/* ── Links Grid ──────────────────────────────────────────── */
.pub_footer_1008_linksArea {
    /* wrapper for the links grid zone */
}

.pub_footer_1008_linksGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: clamp(1rem, 2vw, 2rem);
}

.pub_footer_1008_linksCol {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Reset browser list defaults inside FooterLinksColumn */
.pub_footer_1008_linksCol ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.25rem);
}

.pub_footer_1008_linksCol li {
    margin: 0;
    padding: 0;
}

/* ── Column Headings ─────────────────────────────────────── */
.pub_footer_1008_colHeading {
    color: var(--text, #e2e8f0);
    font-family: var(--font-heading, var(--font-body, 'Inter', system-ui, sans-serif));
    font-weight: 700;
    letter-spacing: var(--tracking, 0.1em);
    text-transform: uppercase;
    margin: 0 0 0.875rem;
}

/* ── Nav Column Links ────────────────────────────────────── */
.pub_footer_1008_footerLink {
    display: inline-block;
    color: var(--text-muted, #94a3b8);
    text-decoration: none;
    line-height: var(--leading, 1.5);
    padding: 0.125rem 0;
    border-radius: var(--radius-sm, 4px);
    transition: color 180ms ease;
}

.pub_footer_1008_footerLink:hover {
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_footerLink:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 2px;
    color: var(--text, #e2e8f0);
}

/* ── Contact Column ──────────────────────────────────────── */
.pub_footer_1008_contactCol {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.25rem);
}

.pub_footer_1008_contactItem {
    display: flex;
    align-items: flex-start;
    gap: var(--space-content-gap, 0.5rem);
    color: var(--text-muted, #94a3b8);
    line-height: var(--leading, 1.5);
    margin-bottom: 0.5rem;
}

.pub_footer_1008_contactIcon {
    color: var(--accent, #6366f1);
    font-size: calc(1rem * var(--body-scale, 1));
    margin-top: 0.1em;
    flex-shrink: 0;
}

.pub_footer_1008_contactText {
    color: var(--text-muted, #94a3b8);
    text-decoration: none;
    border-radius: var(--radius-sm, 4px);
    transition: color 180ms ease;
}

.pub_footer_1008_contactText:hover {
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_contactText:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 2px;
    color: var(--text, #e2e8f0);
}

/* ── Newsletter Column ───────────────────────────────────── */
.pub_footer_1008_newsletterCol {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.75rem);
}

/* Space out the input and button inside the newsletter form */
.pub_footer_1008_newsletterCol form {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.625rem);
}

/* Email validation error message — min-height reserves 1 line always to prevent CLS */
.pub_footer_1008_newsletterCol form span[role="alert"] {
    display: block;
    min-height: calc(0.8125rem * 1.4);
    color: var(--alert-color, #f87171);
    font-size: calc(0.8125rem * var(--body-scale, 1));
    line-height: var(--leading, 1.4);
}

.pub_footer_1008_newsletterInput {
    width: 100%;
    background: var(--newsletter-input-bg, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
    border-radius: var(--radius-md, 6px);
    color: var(--text, #e2e8f0);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: calc(0.9375rem * var(--body-scale, 1));
    padding: 0.625rem 0.875rem;
    outline: none;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.pub_footer_1008_newsletterInput:focus {
    border-color: var(--accent, #6366f1);
}

.pub_footer_1008_newsletterInput::placeholder {
    color: var(--text-muted, #64748b);
}

.pub_footer_1008_newsletterBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent, #6366f1);
    color: var(--btn-text, #fff);
    border: none;
    border-radius: var(--radius-md, 6px);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: calc(0.9375rem * var(--body-scale, 1));
    font-weight: 600;
    letter-spacing: var(--tracking, -0.01em);
    padding: 0.625rem 1.25rem;
    cursor: pointer;
    transition: opacity 150ms ease;
}

.pub_footer_1008_newsletterBtn:hover {
    opacity: 0.88;
}

.pub_footer_1008_newsletterBtn:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 3px;
    opacity: 0.88;
}

/* ── Map ─────────────────────────────────────────────────── */
.pub_footer_1008_mapWrapper {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: var(--radius-lg, 8px);
    overflow: hidden;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

/* ── App Badges ──────────────────────────────────────────── */
.pub_footer_1008_appBadges {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 1rem);
    flex-wrap: wrap;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* ── Divider ─────────────────────────────────────────────── */
.pub_footer_1008_divider {
    border: none;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    margin: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(1rem, 2vw, 1.5rem);
}

/* ── Bottom Bar ──────────────────────────────────────────── */
.pub_footer_1008_bottomBarWrapper {
    background: var(--bottom-bg, transparent);
}

.pub_footer_1008_bottomBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-content-gap, 0.75rem);
}

.pub_footer_1008_copyright {
    color: var(--text-muted, #64748b);
    margin: 0;
    line-height: var(--leading, 1.5);
}

.pub_footer_1008_legalLinks {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.125rem;
}

.pub_footer_1008_legalLink {
    color: var(--text-muted, #64748b);
    text-decoration: none;
    border-radius: var(--radius-sm, 4px);
    padding: 0.125rem 0.25rem;
    transition: color 180ms ease;
}

.pub_footer_1008_legalLink:hover {
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_legalLink:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 2px;
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_legalSep {
    color: var(--text-muted, #475569);
    font-size: calc(0.875rem * var(--body-scale, 1));
    user-select: none;
}

/* ── Certifications Row ──────────────────────────────────── */
.pub_footer_1008_certsRow {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 1rem);
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* ── Interactive states ──────────────────────────────────── */

/* ── @media 1024px ───────────────────────────────────────── */
@media (max-width: 1024px) {
    .pub_footer_1008_mainGrid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-gap, 2rem);
    }

    .pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_mainGrid {
        grid-template-columns: 1fr;
    }
}

/* ── @media 768px ────────────────────────────────────────── */
@media (max-width: 768px) {
    .pub_footer_1008_mainGrid {
        grid-template-columns: 1fr;
        gap: var(--space-gap, 1.75rem);
    }

    .pub_footer_1008_linksGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pub_footer_1008_bottomBar {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-content-gap, 0.5rem);
    }
}

/* ── @media 480px ────────────────────────────────────────── */
@media (max-width: 480px) {
    .pub_footer_1008_linksGrid {
        grid-template-columns: 1fr;
    }

    .pub_footer_1008_appBadges {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── prefers-reduced-motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .pub_footer_1008_footerLink,
    .pub_footer_1008_contactText,
    .pub_footer_1008_legalLink,
    .pub_footer_1008_brandLogo,
    .pub_footer_1008_newsletterInput,
    .pub_footer_1008_newsletterBtn {
        transition: none;
    }
}

/* ============================================================
   PUB-GALLERY-1008 — Mosaic Portfolio Gallery
   Layout: CSS columns masonry · hover overlay reveal · indigo accent
   1008 series: #ffffff white bg · #6366f1 indigo · #0f172a navy text

   KEY LAYOUT DIFFERENCES from existing galleries:
     - PUB-GALLERY-009/010: text-heavy case study cards with stats
     - PUB-GALLERY-028: before/after split image cards
     - PUB-GALLERY-1008: pure image masonry with hover overlay (CSS only)
       Variable aspect ratios create organic height diversity.
       Category filter + smooth hover reveal = clean portfolio feel.
   ============================================================ */

/* ── Root / Section ─────────────────────────────────────────── */
.pub_gallery_1008_root {
    --radial-1: rgba(99, 102, 241, 0.07);
    --radial-2: rgba(168, 85, 247, 0.05);
    --badge-border: rgba(99, 102, 241, 0.2);
    --accent-light: #a78bfa;
    --filter-hover-bg: rgba(99, 102, 241, 0.04);
    --filter-active-text: #ffffff;
    --overlay-mid: rgba(15, 23, 46, 0.35);
    --card-text: #ffffff;
    --card-text-muted: rgba(255, 255, 255, 0.72);
    --card-link-border: rgba(255, 255, 255, 0.35);
    --card-link-border-hover: rgba(255, 255, 255, 0.8);
    --cta-text: #ffffff;
    width: 100%;
    padding: var(--pt, 96px) 24px var(--pb, 96px);
    background: var(--texture-bg, none),
        radial-gradient(ellipse 60% 45% at 100% 0%, var(--radial-1, rgba(99, 102, 241, 0.07)) 0%, transparent 60%),
        radial-gradient(ellipse 45% 35% at 0% 100%, var(--radial-2, rgba(168, 85, 247, 0.05)) 0%, transparent 55%),
        color-mix(in srgb, color-mix(in srgb, var(--bg, #ffffff) calc(var(--material-bg-opacity, 1) * 100%), transparent) calc(var(--material-bg-opacity, 1) * 100%), transparent);
    font-family: var(--font-body, system-ui, -apple-system, sans-serif);
    color: var(--text, #0f172a);
    overflow: hidden;
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Container ──────────────────────────────────────────────── */
.pub_gallery_1008_container {
    max-width: var(--max-w, 1280px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-gap, 48px);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION HEADER — centered
   ═══════════════════════════════════════════════════════════════ */
.pub_gallery_1008_headerWrap {
    text-align: center;
}

.pub_gallery_1008_sectionHeader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 680px;
    margin: 0 auto;
}

.pub_gallery_1008_badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 6px);
    padding: 5px 16px;
    background: var(--badge-bg, rgba(99, 102, 241, 0.08));
    color: var(--badge-text, #6366f1);
    border: 1px solid var(--badge-border, rgba(99, 102, 241, 0.2));
    border-radius: var(--radius-full, 999px);
    font-size: calc(0.8125rem * var(--heading-scale, 1));
    font-weight: 600;
    letter-spacing: var(--tracking, 0.04em);
    text-transform: uppercase;
}

.pub_gallery_1008_sectionTitle {
    font-family: var(--font-heading, var(--font-body, system-ui, sans-serif));
    font-weight: 800;
    line-height: var(--leading, 1.15);
    letter-spacing: var(--tracking, -0.03em);
    color: var(--text, #0f172a);
    margin: 0;
}

.pub_gallery_1008_titleAccent {
    display: block;
    font-weight: 900;
    line-height: var(--leading, 1.1);
    letter-spacing: var(--tracking, -0.035em);
    margin-top: 0.05em;
    padding-bottom: 0.1em;
    background: linear-gradient(110deg, var(--accent, #6366f1) 0%, var(--accent, #8b5cf6) 55%, var(--accent-light, #a78bfa) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pub_gallery_1008_sectionDesc {
    line-height: var(--leading, 1.75);
    color: var(--text-muted, #64748b);
    max-width: 600px;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   FILTER PILLS
   ═══════════════════════════════════════════════════════════════ */
.pub_gallery_1008_filterBar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-content-gap, 8px);
    flex-wrap: wrap;
}

.pub_gallery_1008_filterBtn {
    padding: 8px 20px;
    border-radius: var(--radius-full, 999px);
    border: 1.5px solid var(--border, #e5e7eb);
    background: transparent;
    color: var(--text-muted, #64748b);
    font-size: calc(0.875rem * var(--body-scale, 1));
    font-weight: 500;
    font-family: var(--font-body, system-ui, sans-serif);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    white-space: nowrap;
}

.pub_gallery_1008_filterBtn:hover {
    border-color: var(--accent, #6366f1);
    color: var(--accent, #6366f1);
    background: var(--filter-hover-bg, rgba(99, 102, 241, 0.04));
}

/* Active filter pill — solid indigo */
.pub_gallery_1008_filterBtnActive {
    background: var(--accent, #6366f1);
    color: var(--filter-active-text, #ffffff);
    border-color: var(--accent, #6366f1);
    font-weight: 600;
}

.pub_gallery_1008_filterBtnActive:hover {
    background: var(--accent, #6366f1);
    color: var(--filter-active-text, #ffffff);
    opacity: 0.9;
}

/* ═══════════════════════════════════════════════════════════════
   MASONRY GRID — CSS columns
   Items flow top-to-bottom in each column for natural height variation.
   Different aspect ratios on each item create the organic masonry look.
   ═══════════════════════════════════════════════════════════════ */
.pub_gallery_1008_grid {
    columns: 3;
    column-gap: var(--space-content-gap, 16px);
}

/* ═══════════════════════════════════════════════════════════════
   GALLERY ITEM — break-inside: avoid keeps item in one column
   ═══════════════════════════════════════════════════════════════ */
.pub_gallery_1008_item {
    break-inside: avoid;
    margin-bottom: 16px;
    display: block;
}

/* Image wrapper — aspect-ratio driven by --ratio CSS variable set inline */
.pub_gallery_1008_imgWrap {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    aspect-ratio: var(--ratio, 4/3);
    display: block;
    cursor: pointer;
    box-shadow: var(--shadow-sm, none);
}

/* The image itself */
.pub_gallery_1008_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(calc(var(--img-zoom, 100) / 100));
    transform-origin: center center;
    transition: transform 0.55s ease;
    will-change: transform;
}

.pub_gallery_1008_item:hover .pub_gallery_1008_img {
    transform: scale(calc(var(--img-zoom, 100) / 100 * 1.06));
}

/* ═══════════════════════════════════════════════════════════════
   HOVER OVERLAY — dark gradient from bottom, fade-in
   ═══════════════════════════════════════════════════════════════ */
.pub_gallery_1008_overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            var(--overlay, rgba(15, 23, 46, 0.92)) 0%,
            var(--overlay-mid, rgba(15, 23, 46, 0.35)) 45%,
            transparent 75%);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px;
}

.pub_gallery_1008_item:hover .pub_gallery_1008_overlay {
    opacity: 1;
}

/* Category badge — top-left, slides down on hover */
.pub_gallery_1008_categoryBadge {
    align-self: flex-start;
    background: var(--accent, #6366f1);
    color: var(--card-text, #ffffff);
    font-size: calc(0.6875rem * var(--heading-scale, 1));
    font-weight: 700;
    letter-spacing: var(--tracking, 0.06em);
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 100px;
    white-space: nowrap;
    transform: translateY(-6px);
    transition: transform 0.3s ease;
}

.pub_gallery_1008_item:hover .pub_gallery_1008_categoryBadge {
    transform: translateY(0);
}

/* Overlay bottom block — title, subtitle, link — slides up */
.pub_gallery_1008_overlayBottom {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 4px);
    transform: translateY(10px);
    transition: transform 0.3s ease;
}

.pub_gallery_1008_item:hover .pub_gallery_1008_overlayBottom {
    transform: translateY(0);
}

/* Item title */
.pub_gallery_1008_itemTitle {
    font-family: var(--font-heading, var(--font-body, system-ui, sans-serif));
    font-weight: 700;
    color: var(--card-text, #ffffff);
    margin: 0;
    line-height: var(--leading, 1.3);
}

/* Item subtitle */
.pub_gallery_1008_itemSubtitle {
    font-size: calc(0.8125rem * var(--heading-scale, 1));
    color: var(--card-text-muted, rgba(255, 255, 255, 0.72));
    margin: 0;
    line-height: var(--leading, 1.4);
}

/* View project link */
.pub_gallery_1008_viewLink {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    font-size: calc(0.8125rem * var(--body-scale, 1));
    font-weight: 600;
    color: var(--card-text, #ffffff);
    text-decoration: none;
    border-bottom: 1px solid var(--card-link-border, rgba(255, 255, 255, 0.35));
    padding-bottom: 1px;
    width: fit-content;
    transition: border-color 0.18s ease, gap 0.18s ease;
}

.pub_gallery_1008_viewLink:hover {
    border-color: var(--card-link-border-hover, rgba(255, 255, 255, 0.8));
    gap: var(--space-content-gap, 8px);
}

.pub_gallery_1008_viewLink i {
    font-size: calc(0.875rem * var(--body-scale, 1));
    transition: transform 0.18s ease;
}

.pub_gallery_1008_viewLink:hover i {
    transform: translateX(2px);
}

/* ── Scroll reveal ──────────────────────────────────────────── */
.pub_gallery_1008_root [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.pub_gallery_1008_root [data-reveal][data-visible='true'] {
    opacity: 1;
    transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
   BOTTOM CTA
   ═══════════════════════════════════════════════════════════════ */
.pub_gallery_1008_ctaWrap {
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

.pub_gallery_1008_ctaBtn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 10px);
    padding: 14px 36px;
    background: var(--accent, #6366f1);
    color: var(--cta-text, #ffffff);
    font-size: calc(0.9375rem * var(--body-scale, 1));
    font-weight: 600;
    border-radius: var(--radius-full, 999px);
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.18s ease, transform 0.18s ease;
    box-shadow: var(--shadow-sm, none);
}

.pub_gallery_1008_ctaBtn:hover {
    opacity: 0.88;
    transform: translateY(-2px);
}

.pub_gallery_1008_ctaBtn i {
    font-size: calc(1rem * var(--body-scale, 1));
    transition: transform 0.18s ease;
}

.pub_gallery_1008_ctaBtn:hover i {
    transform: translateX(3px);
}

/* ── Responsive — 1024px ────────────────────────────────────── */
@media (max-width: 1024px) {
    .pub_gallery_1008_grid {
        columns: 2;
    }
}

/* ── Responsive — 640px ─────────────────────────────────────── */
@media (max-width: 640px) {
    .pub_gallery_1008_grid {
        columns: 1;
    }

    .pub_gallery_1008_filterBar {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .pub_gallery_1008_filterBar::-webkit-scrollbar {
        display: none;
    }

    .pub_gallery_1008_filterBtn {
        flex-shrink: 0;
    }
}

/* ── Responsive — 480px ─────────────────────────────────────── */
@media (max-width: 480px) {
    .pub_gallery_1008_root {
        padding-inline: 16px;
    }
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .pub_gallery_1008_img,
    .pub_gallery_1008_overlay,
    .pub_gallery_1008_categoryBadge,
    .pub_gallery_1008_overlayBottom,
    .pub_gallery_1008_viewLink,
    .pub_gallery_1008_viewLink i,
    .pub_gallery_1008_ctaBtn,
    .pub_gallery_1008_ctaBtn i,
    .pub_gallery_1008_filterBtn {
        transition: none;
    }

    /* Still show overlay on hover — just instant */
    .pub_gallery_1008_item:hover .pub_gallery_1008_overlay {
        opacity: 1;
    }

    .pub_gallery_1008_item:hover .pub_gallery_1008_categoryBadge {
        transform: translateY(0);
    }

    .pub_gallery_1008_item:hover .pub_gallery_1008_overlayBottom {
        transform: translateY(0);
    }

    .pub_gallery_1008_root [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Page: contact */
/* ============================================================
   PUB-NAV-1008 — Clarity SaaS Nav
   Series 1008 · Full-width sticky nav · Light theme · Inter font
   State: data-scrolled on .navBar  |  data-open on .mobileDrawer/.drawerOverlay
   ============================================================ */

/* ── Root ────────────────────────────────────────────────── */
.pub_nav_1008_navRoot {
    /* Scoped design tokens — not user-controlled */
    --t: 0.2s ease;
    --t-slow: 0.32s ease;
    --r: 6px;
    --r-lg: 10px;
    --r-btn: 8px;
    --fs-brand: clamp(15px, 1.5vw, 17px);
    --fs-nav: clamp(13px, 1.3vw, 14px);
    --fs-dd: clamp(12px, 1.2vw, 13.5px);
    --fs-drawer: clamp(14px, 1.4vw, 15px);
    --fs-icon: clamp(18px, 1.5vw, 20px);
    --fs-caret: 11px;
    --hover-bg: rgba(37, 99, 235, 0.06);

    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    isolation: isolate;
    /* ✅ Ensure nav stacking context sits above page content */
    position: relative;
    z-index: var(--z-nav, 1000);
    background-image: var(--texture-bg, none);
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Full-width Bar ──────────────────────────────────────── */
.pub_nav_1008_navBar {
    position: var(--navbar-position, fixed);
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav, 1000);
    /* above page content, below drawer overlay */
    background-color: var(--bg, #ffffff);
    border-bottom: 1px solid var(--border, #e5e7eb);
    transition:
        border-color var(--t, 0.2s ease),
        box-shadow var(--t, 0.2s ease);
    padding-top: var(--pt, 0);
    padding-bottom: var(--pb, 0);
}

.pub_nav_1008_navBar[data-scrolled='true'] {
    border-color: var(--border, #e5e7eb);
}

/* ── Inner container ─────────────────────────────────────── */
.pub_nav_1008_navInner {
    max-width: var(--max-w, 1200px);
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 40px);
    min-height: var(--nav-h, 72px);
    display: flex;
    align-items: center;
    justify-content: space-between;
gap: var(--space-gap, 32px);
}

/* ── Logo ────────────────────────────────────────────────── */
.pub_nav_1008_logo {
  /* composed: logo from NavBase.module.css */
  display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity var(--t, 0.22s ease);
    /* gap, margin, color: set in component */
    gap: var(--space-content-gap, 8px);
    color: var(--text, #374151);
    text-decoration: none;
}

.pub_nav_1008_logoMark {
    font-size: var(--fs-icon, clamp(18px, 1.5vw, 20px));
    color: var(--cta-bg, #2563eb);
    line-height: var(--leading, 1);
}

.pub_nav_1008_logoWord {
    font-size: var(--fs-brand, clamp(15px, 1.5vw, 17px));
    font-weight: 700;
    letter-spacing: var(--tracking, -0.02em);
    color: var(--text, #374151);
    white-space: nowrap;
}

.pub_nav_1008_logoImg {
  /* composed: logoImg from NavBase.module.css */
  object-fit: contain;
    display: block;
    /* width, height: set via CSS vars in component */
    width: var(--brand-image-width, 160px);
    height: var(--brand-image-height, 40px);
}

/* ── Center: Desktop nav links ───────────────────────────── */
.pub_nav_1008_navCenter {
    flex: 1;
    display: flex;
    justify-content: center;
}

.pub_nav_1008_navLinks {
  /* composed: navLinks from NavBase.module.css */
  display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    /* gap: set in component */
    gap: var(--space-content-gap, 4px);
}

.pub_nav_1008_dropWrap {
    position: relative;
}

.pub_nav_1008_navLink {
  /* composed: navLink from NavBase.module.css */
  display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: color var(--t, 0.22s ease), background-color var(--t, 0.22s ease);
    /* padding, font-size, font-weight, color, border-radius: set in component */
    padding: 6px 10px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 500;
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
}

.pub_nav_1008_navLink:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_navLinkBtn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 4px);
    padding: 6px 10px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 500;
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    background: none;
    border: none;
    cursor: pointer;
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
}

.pub_nav_1008_navLinkBtn:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_navCaret {
    font-size: var(--fs-caret, 11px);
    transition: transform var(--t, 0.2s ease);
}

/* ── Dropdown panel ──────────────────────────────────────── */
.pub_nav_1008_navDropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 160px;
    background-color: var(--bg, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--r-lg, 10px);
    padding: 6px;
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* open/close via data-open */
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-6px);
    transition:
        opacity var(--t, 0.2s ease),
        transform var(--t, 0.2s ease);
    z-index: var(--z-dropdown, 1200);
    /* above nav links, below sticky bar */
}

.pub_nav_1008_navDropdown[data-open='true'] {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.pub_nav_1008_ddItem {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    padding: 8px 12px;
    font-size: var(--fs-dd, clamp(12px, 1.2vw, 13.5px));
    font-weight: 500;
    color: var(--text, #374151);
    text-decoration: none;
    border-radius: var(--r, 6px);
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
    white-space: nowrap;
}

.pub_nav_1008_ddItem:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

/* ── Right area ──────────────────────────────────────────── */
.pub_nav_1008_navRight {
  /* composed: navRight from NavBase.module.css */
  display: flex;
    align-items: center;
    flex-shrink: 0;
    /* gap, margin: set in component */
    gap: var(--space-content-gap, 8px);
}

.pub_nav_1008_loginBtn {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 500;
    color: var(--text, #374151);
    text-decoration: none;
    border-radius: var(--r, 6px);
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
    white-space: nowrap;
}

.pub_nav_1008_loginBtn:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_navCta {
  /* composed: navCta from NavBase.module.css */
  display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: background-color var(--t, 0.22s ease), transform var(--t, 0.22s ease);
    /* padding, background, color, border-radius, font: set in component */
    padding: 7px 18px;
    background-color: var(--cta-bg, #2563eb);
    color: var(--cta-text, #ffffff);
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 600;
    border-radius: var(--r-btn, 8px);
    white-space: nowrap;
}

.pub_nav_1008_navCta:hover {
    background-color: var(--cta-hover, rgba(37, 99, 235, 0.88));
    transform: translateY(-1px);
}

/* ── Hamburger ───────────────────────────────────────────── */
.pub_nav_1008_hamburger {
  /* composed: hamburger from NavBase.module.css */
  display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    transition: background-color var(--t, 0.22s ease);
    width: 36px;
    min-height: var(--hamburger-h, 36px);
    font-size: var(--fs-icon, clamp(18px, 1.5vw, 20px));
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    display: none;
    /* visible on mobile via media query */
}

.pub_nav_1008_hamburger:hover {
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_hamburgerLine {
  /* composed: hamburgerLine from NavBase.module.css */
  display: block;
    transition: transform var(--t, 0.22s ease), opacity var(--t, 0.22s ease);
    width: 20px;
    height: 2px;
    background-color: var(--text, #374151);
    border-radius: 2px;
}

/* ── Drawer Overlay ──────────────────────────────────────── */
.pub_nav_1008_drawerOverlay {
  /* composed: drawerOverlay from NavBase.module.css */
  inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t, 0.22s ease), visibility var(--t, 0.22s ease);
    /* position, z-index, background-color: set in component */
    position: var(--drawer-position, fixed);
    z-index: var(--z-drawer, 1100);
    /* above sticky navbar, below drawer panel */
    background-color: var(--overlay-bg, rgba(17, 24, 39, 0.4));
}

.pub_nav_1008_drawerOverlay[data-open='true'] {
    opacity: 1;
    visibility: visible;
}

/* ── Mobile Drawer ───────────────────────────────────────── */
.pub_nav_1008_mobileDrawer {
  /* composed: mobileDrawer from NavBase.module.css */
  top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--t-slow, 0.36s ease);
    overflow-y: auto;
    /* position, z-index, width, background-color, border, box-shadow: set in component */
    position: var(--drawer-position, fixed);
    z-index: var(--z-drawer, 1100);
    /* above overlay, topmost drawer layer */
    width: min(320px, 85vw);
    background-color: var(--bg, #ffffff);
    border-left: 1px solid var(--border, #e5e7eb);
}

.pub_nav_1008_mobileDrawer[data-open='true'] {
    transform: translateX(0);
}

/* ── Drawer Header ───────────────────────────────────────── */
.pub_nav_1008_drawerHeader {
  /* composed: drawerHeader from NavBase.module.css */
  display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    /* padding, border: set in component */
    padding: 18px 20px;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.pub_nav_1008_drawerBrand {
  /* composed: drawerBrand from NavBase.module.css */
  display: flex;
    align-items: center;
    /* gap, font-family, font-size, color: set in component */
    gap: var(--space-content-gap, 8px);
    font-size: var(--fs-brand, clamp(15px, 1.5vw, 17px));
    font-weight: 700;
    color: var(--text, #374151);
}

.pub_nav_1008_drawerBrandMark {
    font-size: var(--fs-icon, clamp(18px, 1.5vw, 20px));
    color: var(--cta-bg, #2563eb);
}

.pub_nav_1008_drawerCloseBtn {
  /* composed: drawerCloseBtn from NavBase.module.css */
  display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color var(--t, 0.22s ease);
    /* width, height, font-size, color: set in component */
    width: 32px;
    min-height: var(--close-btn-h, 32px);
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
}

.pub_nav_1008_drawerCloseBtn:hover {
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

/* ── Drawer Links ────────────────────────────────────────── */
.pub_nav_1008_drawerLinks {
  /* composed: drawerLinks from NavBase.module.css */
  flex: 1;
    display: flex;
    flex-direction: column;
    /* padding: set in component */
    padding: 12px 12px;
    gap: 2px;
}

.pub_nav_1008_drawerLink {
  /* composed: drawerLink from NavBase.module.css */
  display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: color var(--t, 0.22s ease), background-color var(--t, 0.22s ease);
    /* padding, font-size, font-weight, color, font-family, border-radius: set in component */
    padding: 10px 12px;
    font-size: var(--fs-drawer, clamp(14px, 1.4vw, 15px));
    font-weight: 500;
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
}

.pub_nav_1008_drawerLink:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_drawerCaret {
  /* composed: drawerCaret from NavBase.module.css */
  transition: transform var(--t, 0.22s ease);
    /* font-size: set in component */
    font-size: var(--fs-caret, 11px);
}

.pub_nav_1008_drawerSub {
  /* composed: drawerSub from NavBase.module.css */
  max-height: 0;
    overflow: hidden;
    transition: max-height var(--t-slow, 0.36s ease);
    padding-left: 12px;
}

.pub_nav_1008_drawerSubLink {
  /* composed: drawerSubLink from NavBase.module.css */
  display: block;
    text-decoration: none;
    transition: color var(--t, 0.22s ease), background-color var(--t, 0.22s ease);
    /* padding, font-size, color: set in component */
    padding: 8px 12px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    display: block;
}

.pub_nav_1008_drawerSubLink:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

/* ── Drawer Footer ───────────────────────────────────────── */
.pub_nav_1008_drawerFooter {
  /* composed: drawerFooter from NavBase.module.css */
  flex-shrink: 0;
    /* padding, border: set in component */
    padding: 16px 20px;
    border-top: 1px solid var(--border, #e5e7eb);
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 10px);
}

.pub_nav_1008_drawerSecondaryBtn {
    display: block;
    text-align: center;
    padding: 10px 20px;
    font-size: var(--fs-drawer, clamp(14px, 1.4vw, 15px));
    font-weight: 500;
    color: var(--text, #374151);
    text-decoration: none;
    border-radius: var(--r-btn, 8px);
    border: 1px solid var(--border, #e5e7eb);
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
}

.pub_nav_1008_drawerSecondaryBtn:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_drawerCta {
  /* composed: drawerCta from NavBase.module.css */
  display: block;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--t, 0.22s ease);
    /* padding, background, color, border-radius, font: set in component */
    padding: 11px 20px;
    background-color: var(--cta-bg, #2563eb);
    color: var(--cta-text, #ffffff);
    font-size: var(--fs-drawer, clamp(14px, 1.4vw, 15px));
    font-weight: 600;
    border-radius: var(--r-btn, 8px);
    text-align: center;
}

.pub_nav_1008_drawerCta:hover {
    background-color: var(--cta-hover, rgba(37, 99, 235, 0.88));
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */

/* ── Focus states (accessibility — required) ─────────────── */
.pub_nav_1008_navLink:focus-visible,
.pub_nav_1008_navLinkBtn:focus-visible,
.pub_nav_1008_loginBtn:focus-visible,
.pub_nav_1008_navCta:focus-visible,
.pub_nav_1008_hamburger:focus-visible,
.pub_nav_1008_drawerCloseBtn:focus-visible,
.pub_nav_1008_drawerLink:focus-visible,
.pub_nav_1008_drawerSubLink:focus-visible,
.pub_nav_1008_drawerSecondaryBtn:focus-visible,
.pub_nav_1008_drawerCta:focus-visible {
    outline: 2px solid var(--accent, #2563eb);
    outline-offset: 3px;
    border-radius: var(--r, 6px);
}

/* ── Tablet (1100px) ─────────────────────────────────────── */
@media (max-width: 1100px) {
    .pub_nav_1008_navInner {
gap: var(--space-content-gap, 12px);
    }

    .pub_nav_1008_navLinks {
        gap: 2px;
    }

    .pub_nav_1008_navLink,
    .pub_nav_1008_navLinkBtn {
        padding: 6px 6px;
    }

    .pub_nav_1008_navRight {
        gap: var(--space-content-gap, 4px);
    }

    .pub_nav_1008_loginBtn {
        padding: 5px 8px;
    }

    .pub_nav_1008_navCta {
        padding: 5px 10px;
    }
}

/* ── Tablet / Mobile (768px) ─────────────────────────────── */
@media (max-width: 768px) {
    .pub_nav_1008_navCenter {
        display: none;
    }

    .pub_nav_1008_loginBtn {
        display: none;
    }

    .pub_nav_1008_navCta {
        display: none;
    }

    .pub_nav_1008_hamburger {
        display: flex;
    }
}

/* ── Mobile (480px) ──────────────────────────────────────── */
@media (max-width: 480px) {
    .pub_nav_1008_navInner {
        padding: 0 clamp(12px, 4vw, 16px);
gap: var(--space-content-gap, 12px);
    }
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .pub_nav_1008_navBar,
    .pub_nav_1008_navLink,
    .pub_nav_1008_navLinkBtn,
    .pub_nav_1008_navDropdown,
    .pub_nav_1008_ddItem,
    .pub_nav_1008_loginBtn,
    .pub_nav_1008_navCta,
    .pub_nav_1008_drawerOverlay,
    .pub_nav_1008_mobileDrawer,
    .pub_nav_1008_drawerLink,
    .pub_nav_1008_drawerSubLink,
    .pub_nav_1008_drawerSecondaryBtn,
    .pub_nav_1008_drawerCta {
        transition: none;
    }
}

/* ─────────────────────────────────────────────────────────────
   PUB-FORMS-1008 — Clarity Contact
   1008 series: white bg · indigo #6366f1 accent · light theme
   Pairs with: PUB-HERO-1008, PUB-NAV-1008, PUB-SERVICE-1008,
               PUB-CTA-1008, PUB-GALLERY-1008
   ───────────────────────────────────────────────────────────── */

/* ── Root ───────────────────────────────────────────────────── */
.pub_forms_1008_root {
    --radial-1: rgba(99, 102, 241, 0.07);
    --radial-2: rgba(168, 85, 247, 0.05);
    --badge-bg: rgba(99, 102, 241, 0.08);
    --badge-border: rgba(99, 102, 241, 0.2);
    --badge-color: #6366f1;
    --accent-grad-start: #6366f1;
    --accent-grad-end: #a78bfa;
    --contact-color: #374151;
    --contact-hover: #6366f1;
    --label-color: #374151;
    --input-bg: #ffffff;
    --input-border: #e5e7eb;
    --input-color: #0f172a;
    --placeholder-color: #94a3b8;
    --focus-border: #6366f1;
    --focus-shadow: rgba(99, 102, 241, 0.12);
    --btn-text: #ffffff;
    --btn-hover-bg: #4f46e5;
    --btn-hover-shadow: rgba(99, 102, 241, 0.35);
    --trust-color: #94a3b8;
    --success-icon: #6366f1;
    --success-text: #64748b;
    --error-bg: rgba(239, 68, 68, 0.06);
    --error-border: rgba(239, 68, 68, 0.2);
    --checkbox-size: 16px;
    width: 100%;
    padding: var(--pt, 96px) 24px var(--pb, 96px);
    background: var(--texture-bg, none),
        radial-gradient(ellipse 60% 45% at 100% 0%, var(--radial-1, rgba(99, 102, 241, 0.07)) 0%, transparent 60%),
        radial-gradient(ellipse 45% 35% at 0% 100%, var(--radial-2, rgba(168, 85, 247, 0.05)) 0%, transparent 55%),
        color-mix(in srgb, color-mix(in srgb, var(--bg, #ffffff) calc(var(--material-bg-opacity, 1) * 100%), transparent) calc(var(--material-bg-opacity, 1) * 100%), transparent);
    font-family: var(--font-body, system-ui, -apple-system, sans-serif);
    color: var(--text, #0f172a);
    overflow: hidden;
    position: relative;
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Container ──────────────────────────────────────────────── */
.pub_forms_1008_container {
    max-width: var(--max-w, 1200px);
    margin: 0 auto;
    position: relative;
    z-index: var(--z-base, 1);
    /* above decorative radial gradients */
}

/* ── Section Header ─────────────────────────────────────────── */
.pub_forms_1008_headerWrap {
    text-align: center;
    margin-bottom: 56px;
}

.pub_forms_1008_sectionHeader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.pub_forms_1008_badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 6px);
    padding: 4px 14px;
    background: var(--badge-bg, rgba(99, 102, 241, 0.08));
    border: 1px solid var(--badge-border, rgba(99, 102, 241, 0.2));
    border-radius: var(--radius-full, 999px);
    font-size: calc(0.8125rem * var(--heading-scale, 1));
    font-weight: 600;
    letter-spacing: var(--tracking, 0.04em);
    text-transform: uppercase;
    color: var(--badge-color, #6366f1);
}

.pub_forms_1008_title {
    font-family: var(--font-heading, var(--font-body, system-ui, sans-serif));
    font-weight: 800;
    line-height: var(--leading, 1.15);
    letter-spacing: var(--tracking, -0.03em);
    color: var(--text, #0f172a);
    margin: 0;
}

.pub_forms_1008_titleAccent {
    display: block;
    font-weight: 900;
    line-height: var(--leading, 1.2);
    letter-spacing: var(--tracking, -0.035em);
    margin-top: 0.06em;
    padding-bottom: 0.1em;
    background: linear-gradient(110deg, var(--accent-grad-start, #6366f1) 0%, var(--accent, #8b5cf6) 55%, var(--accent-grad-end, #a78bfa) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pub_forms_1008_description {
    line-height: var(--leading, 1.7);
    color: var(--text-muted, #64748b);
    max-width: 560px;
    margin: 0;
}

/* ── Split Layout (info panel + form) ───────────────────────── */
.pub_forms_1008_splitLayout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--space-gap, 40px);
    align-items: start;
}

/* ── Centered Layout (form only, no info panel) ─────────────── */
.pub_forms_1008_centeredLayout {
    max-width: 680px;
    margin: 0 auto;
}

/* ── Info Panel ─────────────────────────────────────────────── */
.pub_forms_1008_infoPanel {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-xl, 16px);
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
gap: var(--space-gap, 24px);
}

.pub_forms_1008_infoPanelHeading {
    font-family: var(--font-heading, var(--font-body, system-ui, sans-serif));
    font-weight: 800;
    line-height: var(--leading, 1.2);
    letter-spacing: var(--tracking, -0.025em);
    color: var(--text, #0f172a);
    margin: 0;
}

.pub_forms_1008_infoPanelDesc {
    font-size: calc(0.9375rem * var(--body-scale, 1));
    line-height: var(--leading, 1.7);
    color: var(--text-muted, #64748b);
    margin: 0;
}

.pub_forms_1008_contactItem {
    display: flex;
    align-items: center;
gap: var(--space-content-gap, 12px);
    font-size: calc(0.9375rem * var(--body-scale, 1));
    color: var(--contact-color, #374151);
}

.pub_forms_1008_contactItem a {
    color: inherit;
    text-decoration: none;
}

.pub_forms_1008_contactItem a:hover {
    color: var(--contact-hover, #6366f1);
    text-decoration: underline;
}

/* ── Form Card ──────────────────────────────────────────────── */
.pub_forms_1008_formCard {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-xl, 16px);
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    gap: 0;
    box-shadow: var(--shadow-sm, none);
}

/* ── Form Fields (FormDynamicField CSS class hooks) ─────────── */
.pub_forms_1008_fieldGroup {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 6px);
    margin-bottom: 20px;
}

.pub_forms_1008_label {
    font-size: calc(0.875rem * var(--body-scale, 1));
    font-weight: 600;
    color: var(--label-color, #374151);
    letter-spacing: var(--tracking, 0.01em);
}

.pub_forms_1008_input {
    width: 100%;
    background: var(--input-bg, #ffffff);
    border: 1px solid var(--input-border, #e5e7eb);
    border-radius: var(--radius-md, 10px);
    padding: 13px 16px;
    font-size: calc(0.9375rem * var(--body-scale, 1));
    font-family: var(--font-body, system-ui, sans-serif);
    color: var(--input-color, #0f172a);
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.pub_forms_1008_input::placeholder {
    color: var(--placeholder-color, #94a3b8);
}

.pub_forms_1008_input:focus {
    border-color: var(--focus-border, #6366f1);
}

.pub_forms_1008_textarea {
    width: 100%;
    background: var(--input-bg, #ffffff);
    border: 1px solid var(--input-border, #e5e7eb);
    border-radius: var(--radius-md, 10px);
    padding: 13px 16px;
    font-size: calc(0.9375rem * var(--body-scale, 1));
    font-family: var(--font-body, system-ui, sans-serif);
    color: var(--input-color, #0f172a);
    outline: none;
    resize: vertical;
    min-height: 120px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.pub_forms_1008_textarea::placeholder {
    color: var(--placeholder-color, #94a3b8);
}

.pub_forms_1008_textarea:focus {
    border-color: var(--focus-border, #6366f1);
}

.pub_forms_1008_checkbox {
    width: var(--checkbox-size, 16px);
    min-height: var(--checkbox-size, 16px);
    accent-color: var(--accent, #6366f1);
    cursor: pointer;
}

.pub_forms_1008_fieldError {
    font-size: calc(0.8125rem * var(--body-scale, 1));
    color: var(--field-error, #ef4444);
    font-family: var(--font-field-error, var(--font-body, inherit));
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 4px);
    margin-top: 4px;
}

/* ── Submit Button ──────────────────────────────────────────── */
.pub_forms_1008_submitBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-content-gap, 8px);
    width: 100%;
    padding: 14px 28px;
    background: var(--accent, #6366f1);
    color: var(--btn-text, #ffffff);
    font-size: calc(1rem * var(--body-scale, 1));
    font-weight: 700;
    border-radius: var(--radius-lg, 8px);
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    margin-top: 8px;
}

.pub_forms_1008_submitBtn:hover:not(:disabled) {
    background: var(--btn-hover-bg, #4f46e5);
    transform: translateY(-1px);
}

.pub_forms_1008_submitBtn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ── Trust Note ─────────────────────────────────────────────── */
.pub_forms_1008_trustNote {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-content-gap, 6px);
    margin-top: 14px;
    font-size: calc(0.8125rem * var(--body-scale, 1));
    color: var(--trust-color, #94a3b8);
}

/* ── Success Message ────────────────────────────────────────── */
.pub_forms_1008_successMsg {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
gap: var(--space-content-gap, 12px);
    padding: var(--pt, 48px) 24px var(--pb, 48px);
}

.pub_forms_1008_successMsg i {
    font-size: calc(3rem * var(--body-scale, 1));
    color: var(--success-icon, #6366f1);
}

.pub_forms_1008_successTitle {
    font-family: var(--font-heading, var(--font-body, system-ui, sans-serif));
    font-weight: 800;
    color: var(--text, #0f172a);
    margin: 0;
}

.pub_forms_1008_successText {
    font-size: calc(0.9375rem * var(--body-scale, 1));
    color: var(--success-text, #64748b);
    line-height: var(--leading, 1.6);
    margin: 0;
}

/* ── Error Message ──────────────────────────────────────────── */
.pub_forms_1008_errorMsg {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    padding: 12px 16px;
    background: var(--error-bg, rgba(239, 68, 68, 0.06));
    border: 1px solid var(--error-border, rgba(239, 68, 68, 0.2));
    border-radius: var(--radius-md, 10px);
    font-size: calc(0.875rem * var(--body-scale, 1));
    color: var(--field-error, #dc2626);
    font-family: var(--font-field-error, var(--font-body, inherit));
    margin-bottom: 16px;
}

/* ── Scroll Reveal ──────────────────────────────────────────── */
.pub_forms_1008_root [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.pub_forms_1008_root [data-reveal][data-visible='true'] {
    opacity: 1;
    transform: none;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 992px) {
    .pub_forms_1008_splitLayout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .pub_forms_1008_formCard {
        padding: 28px 24px;
    box-shadow: var(--shadow-sm, none);
    }

    .pub_forms_1008_infoPanel {
        padding: 28px 24px;
    }
}

@media (max-width: 576px) {
    .pub_forms_1008_submitBtn {
        border-radius: var(--radius-lg, 8px);
    box-shadow: var(--shadow-sm, none);
    }
}

/* ── Field Width & Layout ───────────────────────────────────── */
.pub_forms_1008_fieldsWrap {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-content-gap, 1rem);
    align-items: flex-start;
}

.pub_forms_1008_fieldFull {
    flex: 1 1 100%;
}

.pub_forms_1008_fieldHalf {
    flex: 0 0 calc(50% - 0.5rem);
    min-width: 240px;
}

.pub_forms_1008_fieldDescription {
    font-size: calc(0.875rem * var(--body-scale, 1));
    color: var(--text-muted, #6b7280);
    margin-top: 2px;
    margin-bottom: 4px;
    display: block;
}

/* ── Reduced Motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pub_forms_1008_submitBtn {
        transition: none;
    box-shadow: var(--shadow-sm, none);
    }

    .pub_forms_1008_input,
    .pub_forms_1008_textarea {
        transition: none;
    }

    .pub_forms_1008_root [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ============================================================
   PUB-FOOTER-1008 — Universal Footer (4-column grid layout)
   1008 series: #0f172a bg · #6366f1 accent · Inter font
   Layouts: grid | stacked | minimal  (via data-layout attr)
   ============================================================ */

/* ── Root / Section wrapper ─────────────────────────────── */
.pub_footer_1008_root {
    --newsletter-input-bg: rgba(255, 255, 255, 0.06);
    --newsletter-focus-shadow: rgba(99, 102, 241, 0.2);
    --alert-color: #f87171;
    --btn-text: #fff;
    background: var(--texture-bg, none),
        color-mix(in srgb, color-mix(in srgb, var(--bg, #0f172a) calc(var(--material-bg-opacity, 1) * 100%), transparent) calc(var(--material-bg-opacity, 1) * 100%), transparent);
    color: var(--text, #e2e8f0);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    padding-top: var(--pt, 80px);
    padding-bottom: var(--pb, 40px);
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Container ───────────────────────────────────────────── */
.pub_footer_1008_container {
    max-width: var(--max-w, 1200px);
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 3rem);
}

/* ── Main grid ───────────────────────────────────────────── */
.pub_footer_1008_mainGrid {
    display: grid;
    grid-template-columns: 1.8fr 2fr 1fr 1.4fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
}

/* stacked layout overrides */
.pub_footer_1008_root[data-layout="stacked"] .pub_footer_1008_mainGrid {
    grid-template-columns: 1fr;
    gap: var(--space-gap, 2rem);
}

/* minimal layout overrides */
.pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_mainGrid {
    grid-template-columns: 1fr auto;
    gap: var(--space-gap, 2rem);
    align-items: center;
}

.pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_contactCol,
.pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_newsletterCol {
    display: none;
}

/* ── Brand Column ────────────────────────────────────────── */
.pub_footer_1008_brandCol {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.75rem);
}

.pub_footer_1008_brandLogo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 0.5rem);
    color: var(--accent, #6366f1);
    font-family: var(--font-heading, var(--font-body, 'Inter', system-ui, sans-serif));
    font-weight: 700;
    letter-spacing: var(--tracking, -0.02em);
    text-decoration: none;
    margin-bottom: 0.25rem;
    border-radius: var(--radius-sm, 4px);
}

.pub_footer_1008_brandLogo:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 3px;
}

.pub_footer_1008_brandLogo i {
    color: var(--accent, #6366f1);
}

.pub_footer_1008_brandDesc {
    color: var(--text-muted, #94a3b8);
    line-height: var(--leading, 1.65);
    margin: 0;
}

/* ── Social Icons ────────────────────────────────────────── */
.pub_footer_1008_socialRow {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 0.5rem);
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.pub_footer_1008_socialLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-height: 36px;
    border-radius: var(--radius-lg, 8px);
    background: var(--social-bg, rgba(255, 255, 255, 0.08));
    color: var(--text-muted, #94a3b8);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    border: 1px solid var(--footer-border, rgba(255, 255, 255, 0.08));
}

.pub_footer_1008_socialLink:hover {
    background: var(--accent, #6366f1);
    color: var(--social-hover-text, #fff);
    transform: translateY(-2px);
    border-color: var(--accent, #6366f1);
}

.pub_footer_1008_socialLink i {
    font-size: calc(1rem * var(--body-scale, 1));
    line-height: var(--leading, 1);
}

/* ── Links Grid ──────────────────────────────────────────── */
.pub_footer_1008_linksArea {
    /* wrapper for the links grid zone */
}

.pub_footer_1008_linksGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: clamp(1rem, 2vw, 2rem);
}

.pub_footer_1008_linksCol {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Reset browser list defaults inside FooterLinksColumn */
.pub_footer_1008_linksCol ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.25rem);
}

.pub_footer_1008_linksCol li {
    margin: 0;
    padding: 0;
}

/* ── Column Headings ─────────────────────────────────────── */
.pub_footer_1008_colHeading {
    color: var(--text, #e2e8f0);
    font-family: var(--font-heading, var(--font-body, 'Inter', system-ui, sans-serif));
    font-weight: 700;
    letter-spacing: var(--tracking, 0.1em);
    text-transform: uppercase;
    margin: 0 0 0.875rem;
}

/* ── Nav Column Links ────────────────────────────────────── */
.pub_footer_1008_footerLink {
    display: inline-block;
    color: var(--text-muted, #94a3b8);
    text-decoration: none;
    line-height: var(--leading, 1.5);
    padding: 0.125rem 0;
    border-radius: var(--radius-sm, 4px);
    transition: color 180ms ease;
}

.pub_footer_1008_footerLink:hover {
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_footerLink:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 2px;
    color: var(--text, #e2e8f0);
}

/* ── Contact Column ──────────────────────────────────────── */
.pub_footer_1008_contactCol {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.25rem);
}

.pub_footer_1008_contactItem {
    display: flex;
    align-items: flex-start;
    gap: var(--space-content-gap, 0.5rem);
    color: var(--text-muted, #94a3b8);
    line-height: var(--leading, 1.5);
    margin-bottom: 0.5rem;
}

.pub_footer_1008_contactIcon {
    color: var(--accent, #6366f1);
    font-size: calc(1rem * var(--body-scale, 1));
    margin-top: 0.1em;
    flex-shrink: 0;
}

.pub_footer_1008_contactText {
    color: var(--text-muted, #94a3b8);
    text-decoration: none;
    border-radius: var(--radius-sm, 4px);
    transition: color 180ms ease;
}

.pub_footer_1008_contactText:hover {
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_contactText:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 2px;
    color: var(--text, #e2e8f0);
}

/* ── Newsletter Column ───────────────────────────────────── */
.pub_footer_1008_newsletterCol {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.75rem);
}

/* Space out the input and button inside the newsletter form */
.pub_footer_1008_newsletterCol form {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.625rem);
}

/* Email validation error message — min-height reserves 1 line always to prevent CLS */
.pub_footer_1008_newsletterCol form span[role="alert"] {
    display: block;
    min-height: calc(0.8125rem * 1.4);
    color: var(--alert-color, #f87171);
    font-size: calc(0.8125rem * var(--body-scale, 1));
    line-height: var(--leading, 1.4);
}

.pub_footer_1008_newsletterInput {
    width: 100%;
    background: var(--newsletter-input-bg, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
    border-radius: var(--radius-md, 6px);
    color: var(--text, #e2e8f0);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: calc(0.9375rem * var(--body-scale, 1));
    padding: 0.625rem 0.875rem;
    outline: none;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.pub_footer_1008_newsletterInput:focus {
    border-color: var(--accent, #6366f1);
}

.pub_footer_1008_newsletterInput::placeholder {
    color: var(--text-muted, #64748b);
}

.pub_footer_1008_newsletterBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent, #6366f1);
    color: var(--btn-text, #fff);
    border: none;
    border-radius: var(--radius-md, 6px);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: calc(0.9375rem * var(--body-scale, 1));
    font-weight: 600;
    letter-spacing: var(--tracking, -0.01em);
    padding: 0.625rem 1.25rem;
    cursor: pointer;
    transition: opacity 150ms ease;
}

.pub_footer_1008_newsletterBtn:hover {
    opacity: 0.88;
}

.pub_footer_1008_newsletterBtn:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 3px;
    opacity: 0.88;
}

/* ── Map ─────────────────────────────────────────────────── */
.pub_footer_1008_mapWrapper {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: var(--radius-lg, 8px);
    overflow: hidden;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

/* ── App Badges ──────────────────────────────────────────── */
.pub_footer_1008_appBadges {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 1rem);
    flex-wrap: wrap;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* ── Divider ─────────────────────────────────────────────── */
.pub_footer_1008_divider {
    border: none;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    margin: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(1rem, 2vw, 1.5rem);
}

/* ── Bottom Bar ──────────────────────────────────────────── */
.pub_footer_1008_bottomBarWrapper {
    background: var(--bottom-bg, transparent);
}

.pub_footer_1008_bottomBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-content-gap, 0.75rem);
}

.pub_footer_1008_copyright {
    color: var(--text-muted, #64748b);
    margin: 0;
    line-height: var(--leading, 1.5);
}

.pub_footer_1008_legalLinks {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.125rem;
}

.pub_footer_1008_legalLink {
    color: var(--text-muted, #64748b);
    text-decoration: none;
    border-radius: var(--radius-sm, 4px);
    padding: 0.125rem 0.25rem;
    transition: color 180ms ease;
}

.pub_footer_1008_legalLink:hover {
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_legalLink:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 2px;
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_legalSep {
    color: var(--text-muted, #475569);
    font-size: calc(0.875rem * var(--body-scale, 1));
    user-select: none;
}

/* ── Certifications Row ──────────────────────────────────── */
.pub_footer_1008_certsRow {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 1rem);
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* ── Interactive states ──────────────────────────────────── */

/* ── @media 1024px ───────────────────────────────────────── */
@media (max-width: 1024px) {
    .pub_footer_1008_mainGrid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-gap, 2rem);
    }

    .pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_mainGrid {
        grid-template-columns: 1fr;
    }
}

/* ── @media 768px ────────────────────────────────────────── */
@media (max-width: 768px) {
    .pub_footer_1008_mainGrid {
        grid-template-columns: 1fr;
        gap: var(--space-gap, 1.75rem);
    }

    .pub_footer_1008_linksGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pub_footer_1008_bottomBar {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-content-gap, 0.5rem);
    }
}

/* ── @media 480px ────────────────────────────────────────── */
@media (max-width: 480px) {
    .pub_footer_1008_linksGrid {
        grid-template-columns: 1fr;
    }

    .pub_footer_1008_appBadges {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── prefers-reduced-motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .pub_footer_1008_footerLink,
    .pub_footer_1008_contactText,
    .pub_footer_1008_legalLink,
    .pub_footer_1008_brandLogo,
    .pub_footer_1008_newsletterInput,
    .pub_footer_1008_newsletterBtn {
        transition: none;
    }
}

/* Page: categories */
/* ============================================================
   PUB-NAV-1008 — Clarity SaaS Nav
   Series 1008 · Full-width sticky nav · Light theme · Inter font
   State: data-scrolled on .navBar  |  data-open on .mobileDrawer/.drawerOverlay
   ============================================================ */

/* ── Root ────────────────────────────────────────────────── */
.pub_nav_1008_navRoot {
    /* Scoped design tokens — not user-controlled */
    --t: 0.2s ease;
    --t-slow: 0.32s ease;
    --r: 6px;
    --r-lg: 10px;
    --r-btn: 8px;
    --fs-brand: clamp(15px, 1.5vw, 17px);
    --fs-nav: clamp(13px, 1.3vw, 14px);
    --fs-dd: clamp(12px, 1.2vw, 13.5px);
    --fs-drawer: clamp(14px, 1.4vw, 15px);
    --fs-icon: clamp(18px, 1.5vw, 20px);
    --fs-caret: 11px;
    --hover-bg: rgba(37, 99, 235, 0.06);

    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    isolation: isolate;
    /* ✅ Ensure nav stacking context sits above page content */
    position: relative;
    z-index: var(--z-nav, 1000);
    background-image: var(--texture-bg, none);
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Full-width Bar ──────────────────────────────────────── */
.pub_nav_1008_navBar {
    position: var(--navbar-position, fixed);
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav, 1000);
    /* above page content, below drawer overlay */
    background-color: var(--bg, #ffffff);
    border-bottom: 1px solid var(--border, #e5e7eb);
    transition:
        border-color var(--t, 0.2s ease),
        box-shadow var(--t, 0.2s ease);
    padding-top: var(--pt, 0);
    padding-bottom: var(--pb, 0);
}

.pub_nav_1008_navBar[data-scrolled='true'] {
    border-color: var(--border, #e5e7eb);
}

/* ── Inner container ─────────────────────────────────────── */
.pub_nav_1008_navInner {
    max-width: var(--max-w, 1200px);
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 40px);
    min-height: var(--nav-h, 72px);
    display: flex;
    align-items: center;
    justify-content: space-between;
gap: var(--space-gap, 32px);
}

/* ── Logo ────────────────────────────────────────────────── */
.pub_nav_1008_logo {
  /* composed: logo from NavBase.module.css */
  display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity var(--t, 0.22s ease);
    /* gap, margin, color: set in component */
    gap: var(--space-content-gap, 8px);
    color: var(--text, #374151);
    text-decoration: none;
}

.pub_nav_1008_logoMark {
    font-size: var(--fs-icon, clamp(18px, 1.5vw, 20px));
    color: var(--cta-bg, #2563eb);
    line-height: var(--leading, 1);
}

.pub_nav_1008_logoWord {
    font-size: var(--fs-brand, clamp(15px, 1.5vw, 17px));
    font-weight: 700;
    letter-spacing: var(--tracking, -0.02em);
    color: var(--text, #374151);
    white-space: nowrap;
}

.pub_nav_1008_logoImg {
  /* composed: logoImg from NavBase.module.css */
  object-fit: contain;
    display: block;
    /* width, height: set via CSS vars in component */
    width: var(--brand-image-width, 160px);
    height: var(--brand-image-height, 40px);
}

/* ── Center: Desktop nav links ───────────────────────────── */
.pub_nav_1008_navCenter {
    flex: 1;
    display: flex;
    justify-content: center;
}

.pub_nav_1008_navLinks {
  /* composed: navLinks from NavBase.module.css */
  display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    /* gap: set in component */
    gap: var(--space-content-gap, 4px);
}

.pub_nav_1008_dropWrap {
    position: relative;
}

.pub_nav_1008_navLink {
  /* composed: navLink from NavBase.module.css */
  display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: color var(--t, 0.22s ease), background-color var(--t, 0.22s ease);
    /* padding, font-size, font-weight, color, border-radius: set in component */
    padding: 6px 10px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 500;
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
}

.pub_nav_1008_navLink:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_navLinkBtn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 4px);
    padding: 6px 10px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 500;
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    background: none;
    border: none;
    cursor: pointer;
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
}

.pub_nav_1008_navLinkBtn:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_navCaret {
    font-size: var(--fs-caret, 11px);
    transition: transform var(--t, 0.2s ease);
}

/* ── Dropdown panel ──────────────────────────────────────── */
.pub_nav_1008_navDropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 160px;
    background-color: var(--bg, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--r-lg, 10px);
    padding: 6px;
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* open/close via data-open */
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-6px);
    transition:
        opacity var(--t, 0.2s ease),
        transform var(--t, 0.2s ease);
    z-index: var(--z-dropdown, 1200);
    /* above nav links, below sticky bar */
}

.pub_nav_1008_navDropdown[data-open='true'] {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.pub_nav_1008_ddItem {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    padding: 8px 12px;
    font-size: var(--fs-dd, clamp(12px, 1.2vw, 13.5px));
    font-weight: 500;
    color: var(--text, #374151);
    text-decoration: none;
    border-radius: var(--r, 6px);
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
    white-space: nowrap;
}

.pub_nav_1008_ddItem:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

/* ── Right area ──────────────────────────────────────────── */
.pub_nav_1008_navRight {
  /* composed: navRight from NavBase.module.css */
  display: flex;
    align-items: center;
    flex-shrink: 0;
    /* gap, margin: set in component */
    gap: var(--space-content-gap, 8px);
}

.pub_nav_1008_loginBtn {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 500;
    color: var(--text, #374151);
    text-decoration: none;
    border-radius: var(--r, 6px);
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
    white-space: nowrap;
}

.pub_nav_1008_loginBtn:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_navCta {
  /* composed: navCta from NavBase.module.css */
  display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: background-color var(--t, 0.22s ease), transform var(--t, 0.22s ease);
    /* padding, background, color, border-radius, font: set in component */
    padding: 7px 18px;
    background-color: var(--cta-bg, #2563eb);
    color: var(--cta-text, #ffffff);
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 600;
    border-radius: var(--r-btn, 8px);
    white-space: nowrap;
}

.pub_nav_1008_navCta:hover {
    background-color: var(--cta-hover, rgba(37, 99, 235, 0.88));
    transform: translateY(-1px);
}

/* ── Hamburger ───────────────────────────────────────────── */
.pub_nav_1008_hamburger {
  /* composed: hamburger from NavBase.module.css */
  display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    transition: background-color var(--t, 0.22s ease);
    width: 36px;
    min-height: var(--hamburger-h, 36px);
    font-size: var(--fs-icon, clamp(18px, 1.5vw, 20px));
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    display: none;
    /* visible on mobile via media query */
}

.pub_nav_1008_hamburger:hover {
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_hamburgerLine {
  /* composed: hamburgerLine from NavBase.module.css */
  display: block;
    transition: transform var(--t, 0.22s ease), opacity var(--t, 0.22s ease);
    width: 20px;
    height: 2px;
    background-color: var(--text, #374151);
    border-radius: 2px;
}

/* ── Drawer Overlay ──────────────────────────────────────── */
.pub_nav_1008_drawerOverlay {
  /* composed: drawerOverlay from NavBase.module.css */
  inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t, 0.22s ease), visibility var(--t, 0.22s ease);
    /* position, z-index, background-color: set in component */
    position: var(--drawer-position, fixed);
    z-index: var(--z-drawer, 1100);
    /* above sticky navbar, below drawer panel */
    background-color: var(--overlay-bg, rgba(17, 24, 39, 0.4));
}

.pub_nav_1008_drawerOverlay[data-open='true'] {
    opacity: 1;
    visibility: visible;
}

/* ── Mobile Drawer ───────────────────────────────────────── */
.pub_nav_1008_mobileDrawer {
  /* composed: mobileDrawer from NavBase.module.css */
  top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--t-slow, 0.36s ease);
    overflow-y: auto;
    /* position, z-index, width, background-color, border, box-shadow: set in component */
    position: var(--drawer-position, fixed);
    z-index: var(--z-drawer, 1100);
    /* above overlay, topmost drawer layer */
    width: min(320px, 85vw);
    background-color: var(--bg, #ffffff);
    border-left: 1px solid var(--border, #e5e7eb);
}

.pub_nav_1008_mobileDrawer[data-open='true'] {
    transform: translateX(0);
}

/* ── Drawer Header ───────────────────────────────────────── */
.pub_nav_1008_drawerHeader {
  /* composed: drawerHeader from NavBase.module.css */
  display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    /* padding, border: set in component */
    padding: 18px 20px;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.pub_nav_1008_drawerBrand {
  /* composed: drawerBrand from NavBase.module.css */
  display: flex;
    align-items: center;
    /* gap, font-family, font-size, color: set in component */
    gap: var(--space-content-gap, 8px);
    font-size: var(--fs-brand, clamp(15px, 1.5vw, 17px));
    font-weight: 700;
    color: var(--text, #374151);
}

.pub_nav_1008_drawerBrandMark {
    font-size: var(--fs-icon, clamp(18px, 1.5vw, 20px));
    color: var(--cta-bg, #2563eb);
}

.pub_nav_1008_drawerCloseBtn {
  /* composed: drawerCloseBtn from NavBase.module.css */
  display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color var(--t, 0.22s ease);
    /* width, height, font-size, color: set in component */
    width: 32px;
    min-height: var(--close-btn-h, 32px);
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
}

.pub_nav_1008_drawerCloseBtn:hover {
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

/* ── Drawer Links ────────────────────────────────────────── */
.pub_nav_1008_drawerLinks {
  /* composed: drawerLinks from NavBase.module.css */
  flex: 1;
    display: flex;
    flex-direction: column;
    /* padding: set in component */
    padding: 12px 12px;
    gap: 2px;
}

.pub_nav_1008_drawerLink {
  /* composed: drawerLink from NavBase.module.css */
  display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: color var(--t, 0.22s ease), background-color var(--t, 0.22s ease);
    /* padding, font-size, font-weight, color, font-family, border-radius: set in component */
    padding: 10px 12px;
    font-size: var(--fs-drawer, clamp(14px, 1.4vw, 15px));
    font-weight: 500;
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
}

.pub_nav_1008_drawerLink:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_drawerCaret {
  /* composed: drawerCaret from NavBase.module.css */
  transition: transform var(--t, 0.22s ease);
    /* font-size: set in component */
    font-size: var(--fs-caret, 11px);
}

.pub_nav_1008_drawerSub {
  /* composed: drawerSub from NavBase.module.css */
  max-height: 0;
    overflow: hidden;
    transition: max-height var(--t-slow, 0.36s ease);
    padding-left: 12px;
}

.pub_nav_1008_drawerSubLink {
  /* composed: drawerSubLink from NavBase.module.css */
  display: block;
    text-decoration: none;
    transition: color var(--t, 0.22s ease), background-color var(--t, 0.22s ease);
    /* padding, font-size, color: set in component */
    padding: 8px 12px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    display: block;
}

.pub_nav_1008_drawerSubLink:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

/* ── Drawer Footer ───────────────────────────────────────── */
.pub_nav_1008_drawerFooter {
  /* composed: drawerFooter from NavBase.module.css */
  flex-shrink: 0;
    /* padding, border: set in component */
    padding: 16px 20px;
    border-top: 1px solid var(--border, #e5e7eb);
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 10px);
}

.pub_nav_1008_drawerSecondaryBtn {
    display: block;
    text-align: center;
    padding: 10px 20px;
    font-size: var(--fs-drawer, clamp(14px, 1.4vw, 15px));
    font-weight: 500;
    color: var(--text, #374151);
    text-decoration: none;
    border-radius: var(--r-btn, 8px);
    border: 1px solid var(--border, #e5e7eb);
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
}

.pub_nav_1008_drawerSecondaryBtn:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_drawerCta {
  /* composed: drawerCta from NavBase.module.css */
  display: block;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--t, 0.22s ease);
    /* padding, background, color, border-radius, font: set in component */
    padding: 11px 20px;
    background-color: var(--cta-bg, #2563eb);
    color: var(--cta-text, #ffffff);
    font-size: var(--fs-drawer, clamp(14px, 1.4vw, 15px));
    font-weight: 600;
    border-radius: var(--r-btn, 8px);
    text-align: center;
}

.pub_nav_1008_drawerCta:hover {
    background-color: var(--cta-hover, rgba(37, 99, 235, 0.88));
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */

/* ── Focus states (accessibility — required) ─────────────── */
.pub_nav_1008_navLink:focus-visible,
.pub_nav_1008_navLinkBtn:focus-visible,
.pub_nav_1008_loginBtn:focus-visible,
.pub_nav_1008_navCta:focus-visible,
.pub_nav_1008_hamburger:focus-visible,
.pub_nav_1008_drawerCloseBtn:focus-visible,
.pub_nav_1008_drawerLink:focus-visible,
.pub_nav_1008_drawerSubLink:focus-visible,
.pub_nav_1008_drawerSecondaryBtn:focus-visible,
.pub_nav_1008_drawerCta:focus-visible {
    outline: 2px solid var(--accent, #2563eb);
    outline-offset: 3px;
    border-radius: var(--r, 6px);
}

/* ── Tablet (1100px) ─────────────────────────────────────── */
@media (max-width: 1100px) {
    .pub_nav_1008_navInner {
gap: var(--space-content-gap, 12px);
    }

    .pub_nav_1008_navLinks {
        gap: 2px;
    }

    .pub_nav_1008_navLink,
    .pub_nav_1008_navLinkBtn {
        padding: 6px 6px;
    }

    .pub_nav_1008_navRight {
        gap: var(--space-content-gap, 4px);
    }

    .pub_nav_1008_loginBtn {
        padding: 5px 8px;
    }

    .pub_nav_1008_navCta {
        padding: 5px 10px;
    }
}

/* ── Tablet / Mobile (768px) ─────────────────────────────── */
@media (max-width: 768px) {
    .pub_nav_1008_navCenter {
        display: none;
    }

    .pub_nav_1008_loginBtn {
        display: none;
    }

    .pub_nav_1008_navCta {
        display: none;
    }

    .pub_nav_1008_hamburger {
        display: flex;
    }
}

/* ── Mobile (480px) ──────────────────────────────────────── */
@media (max-width: 480px) {
    .pub_nav_1008_navInner {
        padding: 0 clamp(12px, 4vw, 16px);
gap: var(--space-content-gap, 12px);
    }
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .pub_nav_1008_navBar,
    .pub_nav_1008_navLink,
    .pub_nav_1008_navLinkBtn,
    .pub_nav_1008_navDropdown,
    .pub_nav_1008_ddItem,
    .pub_nav_1008_loginBtn,
    .pub_nav_1008_navCta,
    .pub_nav_1008_drawerOverlay,
    .pub_nav_1008_mobileDrawer,
    .pub_nav_1008_drawerLink,
    .pub_nav_1008_drawerSubLink,
    .pub_nav_1008_drawerSecondaryBtn,
    .pub_nav_1008_drawerCta {
        transition: none;
    }
}

/* PUB-BLOG-1008 — Aurora Blog Grid
 * 1008 series: white bg + indigo #6366f1 accent · clean content grid
 * JS states: [data-visible='true'] for scroll reveal (SSR only).
 * Dynamic data: blogPosts injected from pageModel (pageType: 'blog') on SSR.
 */

/* ── Root / Section ─────────────────────────────────────────────────────── */
.pub_grid_1008_root {
    --radial-1: rgba(99, 102, 241, 0.06);
    --radial-2: rgba(168, 85, 247, 0.04);
    --badge-border: rgba(99, 102, 241, 0.2);
    --card-radius: 12px;
    --card-shadow: 0 1px 3px var(--shadow-light, rgba(0, 0, 0, 0.06)), 0 1px 2px var(--shadow-lighter, rgba(0, 0, 0, 0.04));
    --card-shadow-hover: 0 10px 25px var(--shadow-hover, rgba(0, 0, 0, 0.08)), 0 4px 10px var(--shadow-hover-light, rgba(0, 0, 0, 0.04));
    --img-h: 200px;
    --t: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    padding: var(--pt, 96px) 24px var(--pb, 96px);
    background: var(--texture-bg, none),
        radial-gradient(ellipse 55% 40% at 100% 0%, var(--radial-1, rgba(99, 102, 241, 0.06)) 0%, transparent 60%),
        radial-gradient(ellipse 40% 30% at 0% 100%, var(--radial-2, rgba(168, 85, 247, 0.04)) 0%, transparent 55%),
        color-mix(in srgb, color-mix(in srgb, var(--bg, #ffffff) calc(var(--material-bg-opacity, 1) * 100%), transparent) calc(var(--material-bg-opacity, 1) * 100%), transparent);
    font-family: var(--font-body, system-ui, -apple-system, sans-serif);
    color: var(--text, #0f172a);
    /* ⚠️ Do NOT add overflow:hidden, transform, or isolation here —
       they create stacking contexts that let blog content paint above
       the navbar (which uses isolation:isolate + traps its z-index). */

    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Container ──────────────────────────────────────────────────────────── */
.pub_grid_1008_container {
    max-width: var(--max-w, 1200px);
    margin-inline: auto;
    padding-inline: 24px;
}

/* ── Section Header ─────────────────────────────────────────────────────── */
.pub_grid_1008_headerWrap {
    text-align: center;
    margin-bottom: 48px;
}

.pub_grid_1008_sectionHeader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-content-gap, 12px);
}

.pub_grid_1008_badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 6px);
    padding: 6px 14px;
    border: 1px solid var(--badge-border, rgba(99, 102, 241, 0.2));
    border-radius: 100px;
    background: var(--badge-bg, #eef2ff);
    color: var(--badge-text, #6366f1);
    font-family: var(--font-body, system-ui, -apple-system, sans-serif);
    font-weight: 600;
    letter-spacing: var(--tracking, 0.04em);
    text-transform: uppercase;
}

.pub_grid_1008_title {
    font-family: var(--font-heading, 'Inter', system-ui, sans-serif);
    font-weight: 700;
    line-height: var(--leading, 1.15);
    color: var(--text, #0f172a);
    letter-spacing: var(--tracking, -0.02em);
    margin: 0;
}

.pub_grid_1008_titleAccent {
    display: block;
    background: linear-gradient(135deg, var(--accent, #6366f1), var(--secondary, #a78bfa));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pub_grid_1008_description {
    line-height: var(--leading, 1.6);
    color: var(--text-muted, #64748b);
    max-width: 580px;
    margin: 8px 0 0;
}

/* ── Blog Grid ──────────────────────────────────────────────────────────── */
.pub_grid_1008_grid {
    display: grid;
    grid-template-columns: repeat(var(--blog-cols, 3), 1fr);
    gap: clamp(16px, 2.5vw, 28px);
}

/* ── Card ───────────────────────────────────────────────────────────────── */
.pub_grid_1008_card {
    display: flex;
    flex-direction: column;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--card-border, #e2e8f0);
    border-radius: var(--card-radius, 12px);
    overflow: hidden;
    transition:
        box-shadow var(--t, 0.25s ease),
        border-color var(--t, 0.25s ease);
}

.pub_grid_1008_card:hover {
    border-color: var(--accent, #6366f1);
}

.pub_grid_1008_cardImage {
    width: 100%;
    height: var(--img-h, 200px);
    object-fit: cover;
    display: block;
    background: linear-gradient(135deg, var(--accent, #6366f1), var(--secondary, #a78bfa));
    /* Gradient overlay for depth — inset shadow, no stacking context */
}

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

.pub_grid_1008_cardContent {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 10px);
    padding: 24px 24px 28px;
    flex: 1;
}

.pub_grid_1008_cardCategory {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 100px;
    background: var(--cat-bg, rgba(99, 102, 241, 0.08));
    color: var(--accent, #6366f1);
    font-size: var(--fs-cat, clamp(10px, 1.1vw, 11px));
    font-weight: 700;
    letter-spacing: var(--tracking, 0.05em);
    text-transform: uppercase;
    text-decoration: none;
    transition: background var(--t, 0.2s ease), color var(--t, 0.2s ease);
}

.pub_grid_1008_cardCategory:hover {
    background: var(--accent, #6366f1);
    color: var(--badge-text, #ffffff);
}

/* Category dot indicator */
.pub_grid_1008_cardCategory::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: var(--radius-full, 50%);
    background: currentColor;
    flex-shrink: 0;
}

.pub_grid_1008_cardTitle {
    font-family: var(--font-heading, 'Inter', system-ui, sans-serif);
    font-size: var(--fs-card-title, clamp(16px, 1.8vw, 19px));
    font-weight: 600;
    line-height: var(--leading, 1.35);
    color: var(--text, #0f172a);
    margin: 0;
    transition: color var(--t, 0.25s ease);
    /* Animated underline effect (no transform) */
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) left 1.1em / 0% 2px no-repeat;
    transition: color var(--t, 0.25s ease), background-size var(--t, 0.25s ease);
}

.pub_grid_1008_card:hover .pub_grid_1008_cardTitle {
    color: var(--accent, #6366f1);
    background-size: 100% 2px;
}

.pub_grid_1008_cardTitle a {
    color: inherit;
    text-decoration: none;
}

.pub_grid_1008_cardExcerpt {
    font-size: var(--fs-body, 14px);
    line-height: var(--leading, 1.65);
    color: var(--text-muted, #64748b);
    margin: 2px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pub_grid_1008_cardMeta {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 6px);
    font-size: var(--fs-meta, 12px);
    color: var(--text-muted, #94a3b8);
    margin-top: auto;
    padding-top: 14px;
    font-weight: 500;
}

/* Dot separator between meta items */
.pub_grid_1008_cardMeta span+span::before {
    content: '·';
    margin: 0 6px;
    font-weight: 700;
    color: var(--border, #cbd5e1);
}

.pub_grid_1008_cardMeta span {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 4px);
}

.pub_grid_1008_cardAuthor {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 10px);
    font-size: var(--fs-author, clamp(12px, 1.2vw, 13px));
    font-weight: 600;
    color: var(--text, #0f172a);
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--border, #eef2f6);
}

/* ImageBlock wrapper inside author (BlogCard passes dynamic class) */
.pub_grid_1008_cardAuthor>div {
    display: flex;
    flex-shrink: 0;
    line-height: var(--leading, 0);
}

.pub_grid_1008_cardAuthor img {
    width: var(--author-img-size, 30px);
    height: var(--author-img-size, 30px);
    border-radius: var(--radius-full, 50%);
    object-fit: cover;
    border: 2px solid var(--border, #eef2f6);
    flex-shrink: 0;
    display: block;
}

.pub_grid_1008_cardAuthor span,
.pub_grid_1008_cardAuthor a {
    line-height: var(--leading, 1);
    color: inherit;
    text-decoration: none;
    transition: color var(--t, 0.2s ease);
}

.pub_grid_1008_cardAuthor a:hover {
    color: var(--accent, #6366f1);
}

/* No avatar fallback — show placeholder circle */
.pub_grid_1008_cardAuthor span:first-child:last-child::before,
.pub_grid_1008_cardAuthor a:first-child:last-child::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full, 50%);
    background: var(--cat-bg, rgba(99, 102, 241, 0.12));
    border: 2px solid var(--border, #eef2f6);
    flex-shrink: 0;
    margin-right: 10px;
    vertical-align: middle;
}

/* ── Tags ─────────────────────────────────────── */
.pub_grid_1008_cardTags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-content-gap, 6px);
    margin-top: 8px;
}

.pub_grid_1008_cardTag {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 100px;
    background: var(--cat-bg, rgba(99, 102, 241, 0.06));
    color: var(--text-muted, #64748b);
    font-size: var(--fs-tag, 11px);
    font-weight: 500;
    text-decoration: none;
    transition: background var(--t, 0.2s ease), color var(--t, 0.2s ease);
}

.pub_grid_1008_cardTag:hover {
    background: var(--accent, #6366f1);
    color: var(--badge-text, #ffffff);
}

/* ── Interactive States ─────────────────────────────────────────────────── */
.pub_grid_1008_card a {
    text-decoration: none;
}

/* ── Empty State Banner (Page Builder) ──────────────────────────────────── */
.pub_grid_1008_emptyStateBanner {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 10px);
    flex-wrap: wrap;
    padding: 12px 18px;
    margin-bottom: 28px;
    border-radius: var(--radius-md, 10px);
    background: var(--cat-bg, rgba(99, 102, 241, 0.06));
    border: 1px dashed var(--cat-border, rgba(99, 102, 241, 0.25));
    color: var(--accent, #6366f1);
    font-size: calc(13px * var(--body-scale, 1));
    font-weight: 500;
    line-height: var(--leading, 1.4);
}

.pub_grid_1008_emptyStateHint {
    color: var(--text-muted, #94a3b8);
    font-weight: 400;
    font-size: calc(12px * var(--body-scale, 1));
}

/* ── Placeholder Card Badge ─────────────────────────────────────────────── */
.pub_grid_1008_placeholderBadge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: var(--z-above, 2);
    /* above card image */
    padding: 3px 8px;
    border-radius: var(--radius-md, 6px);
    background: var(--badge-bg-solid, rgba(99, 102, 241, 0.85));
    color: var(--badge-text, #ffffff);
    font-size: calc(10px * var(--heading-scale, 1));
    font-weight: 600;
    letter-spacing: var(--tracking, 0.03em);
    text-transform: uppercase;
    pointer-events: none;
}

/* ── Pagination ──────────────────────────────────────────────────────────── */
.pub_grid_1008_pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-content-gap, 8px);
    margin-top: 48px;
    padding-top: 28px;
    border-top: none;
    position: relative;
    flex-wrap: wrap;
}

/* Gradient line separator above pagination */
.pub_grid_1008_pagination::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    max-width: 360px;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            var(--border, #e2e8f0) 30%,
            var(--accent, #6366f1) 50%,
            var(--border, #e2e8f0) 70%,
            transparent 100%);
}

.pub_grid_1008_paginationPages {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 4px);
}

.pub_grid_1008_paginationBtn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    padding: 9px 20px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 100px;
    background: var(--card-bg, #ffffff);
    color: var(--text, #0f172a);
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: calc(13px * var(--body-scale, 1));
    font-weight: 500;
    cursor: pointer;
    transition:
        all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    white-space: nowrap;
}

.pub_grid_1008_paginationBtn:hover:not(:disabled) {
    background: var(--card-bg, #ffffff);
    border-color: var(--accent, #6366f1);
    color: var(--accent, #6366f1);
    box-shadow:
        var(--shadow-md, 0 4px 12px rgba(99, 102, 241, 0.12)),
        var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
    transform: translateY(-1px);
}

.pub_grid_1008_paginationBtn:active:not(:disabled) {
    transform: translateY(0);
}

.pub_grid_1008_paginationBtn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.pub_grid_1008_paginationBtn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Hide text label on small screens, show icon only */
@media (max-width: 420px) {
    .pub_grid_1008_paginationBtn span {
        display: none;
    }

    .pub_grid_1008_paginationBtn {
        padding: 9px 14px;
        min-width: 38px;
        justify-content: center;
    }

    .pub_grid_1008_paginationBtn:first-child svg {
        margin: 0;
    }

    .pub_grid_1008_paginationBtn:last-child svg {
        margin: 0;
    }
}

.pub_grid_1008_paginationPage {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 4px;
    border: 1px solid transparent;
    border-radius: var(--radius-md, 10px);
    background: transparent;
    color: var(--text-muted, #64748b);
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: calc(14px * var(--body-scale, 1));
    font-weight: 500;
    cursor: pointer;
    transition:
        all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    position: relative;
}

.pub_grid_1008_paginationPage:hover:not(:disabled) {
    background: var(--cat-bg, rgba(99, 102, 241, 0.05));
    color: var(--accent, #6366f1);
    border-color: var(--cat-border-light, rgba(99, 102, 241, 0.12));
}

.pub_grid_1008_paginationPage:disabled {
    cursor: default;
}

.pub_grid_1008_paginationActive {
    background: linear-gradient(135deg, var(--accent, #6366f1), var(--accent-light, #818cf8));
    border-color: transparent;
    color: var(--badge-text, #ffffff);
    font-weight: 600;
    cursor: default;
    pointer-events: none;
    box-shadow:
        var(--shadow-md, 0 4px 12px rgba(99, 102, 241, 0.25)),
        var(--shadow-sm, 0 1px 3px rgba(99, 102, 241, 0.15));
    transform: scale(1.05);
}

.pub_grid_1008_paginationActive:hover {
    background: linear-gradient(135deg, var(--accent, #6366f1), var(--accent-light, #818cf8));
    color: var(--badge-text, #ffffff);
}

.pub_grid_1008_paginationDots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 38px;
    color: var(--text-muted, #94a3b8);
    font-size: calc(14px * var(--body-scale, 1));
    letter-spacing: var(--tracking, 3px);
    user-select: none;
}

/* ── Media: Tablet (max-width: 1024px) ──────────────────────────────────── */
@media (max-width: 1024px) {
    .pub_grid_1008_grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pub_grid_1008_headerWrap {
        margin-bottom: 36px;
    }

    .pub_grid_1008_pagination::before {
        width: 80%;
    }
}

/* ── Media: Mobile (max-width: 768px) ───────────────────────────────────── */
@media (max-width: 768px) {
    .pub_grid_1008_root {
        padding: var(--pt, 96px) 16px var(--pb, 96px);
    }

    .pub_grid_1008_container {
        padding-inline: 16px;
    }

    .pub_grid_1008_grid {
        grid-template-columns: 1fr;
        gap: var(--space-content-gap, 20px);
    }

    .pub_grid_1008_cardContent {
        padding: 16px 16px 20px;
    }

    .pub_grid_1008_headerWrap {
        margin-bottom: 28px;
    }

    .pub_grid_1008_pagination::before {
        width: 90%;
    }

    .pub_grid_1008_pagination {
        margin-top: 36px;
        padding-top: 24px;
        gap: var(--space-content-gap, 6px);
    }

    .pub_grid_1008_paginationBtn {
        padding: 7px 14px;
        font-size: calc(12px * var(--body-scale, 1));
        gap: var(--space-content-gap, 6px);
        border-radius: 100px;
    }

    .pub_grid_1008_paginationBtn svg {
        width: 12px;
        height: 12px;
    }

    .pub_grid_1008_paginationPage {
        min-width: 34px;
        height: 34px;
        font-size: calc(13px * var(--body-scale, 1));
        border-radius: var(--radius-lg, 8px);
    }

    .pub_grid_1008_paginationActive {
        transform: scale(1.03);
        box-shadow:
            var(--shadow-md, 0 3px 8px rgba(99, 102, 241, 0.2)),
            var(--shadow-sm, 0 1px 2px rgba(99, 102, 241, 0.12));
    }

    .pub_grid_1008_paginationDots {
        min-width: 24px;
        height: 34px;
    }
}

/* ── Media: Small Mobile (max-width: 480px) ─────────────────────────────── */
@media (max-width: 480px) {
    .pub_grid_1008_cardImage {
        height: var(--img-h-mobile, 180px);
    }

    .pub_grid_1008_cardMeta {
        flex-wrap: wrap;
        gap: var(--space-content-gap, 8px);
    }
}

/* ── Reduced Motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pub_grid_1008_card {
        transition: none;
    }

    .pub_grid_1008_card:hover {
        transform: none;
    }
}

/* ============================================================
   PUB-FOOTER-1008 — Universal Footer (4-column grid layout)
   1008 series: #0f172a bg · #6366f1 accent · Inter font
   Layouts: grid | stacked | minimal  (via data-layout attr)
   ============================================================ */

/* ── Root / Section wrapper ─────────────────────────────── */
.pub_footer_1008_root {
    --newsletter-input-bg: rgba(255, 255, 255, 0.06);
    --newsletter-focus-shadow: rgba(99, 102, 241, 0.2);
    --alert-color: #f87171;
    --btn-text: #fff;
    background: var(--texture-bg, none),
        color-mix(in srgb, color-mix(in srgb, var(--bg, #0f172a) calc(var(--material-bg-opacity, 1) * 100%), transparent) calc(var(--material-bg-opacity, 1) * 100%), transparent);
    color: var(--text, #e2e8f0);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    padding-top: var(--pt, 80px);
    padding-bottom: var(--pb, 40px);
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Container ───────────────────────────────────────────── */
.pub_footer_1008_container {
    max-width: var(--max-w, 1200px);
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 3rem);
}

/* ── Main grid ───────────────────────────────────────────── */
.pub_footer_1008_mainGrid {
    display: grid;
    grid-template-columns: 1.8fr 2fr 1fr 1.4fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
}

/* stacked layout overrides */
.pub_footer_1008_root[data-layout="stacked"] .pub_footer_1008_mainGrid {
    grid-template-columns: 1fr;
    gap: var(--space-gap, 2rem);
}

/* minimal layout overrides */
.pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_mainGrid {
    grid-template-columns: 1fr auto;
    gap: var(--space-gap, 2rem);
    align-items: center;
}

.pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_contactCol,
.pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_newsletterCol {
    display: none;
}

/* ── Brand Column ────────────────────────────────────────── */
.pub_footer_1008_brandCol {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.75rem);
}

.pub_footer_1008_brandLogo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 0.5rem);
    color: var(--accent, #6366f1);
    font-family: var(--font-heading, var(--font-body, 'Inter', system-ui, sans-serif));
    font-weight: 700;
    letter-spacing: var(--tracking, -0.02em);
    text-decoration: none;
    margin-bottom: 0.25rem;
    border-radius: var(--radius-sm, 4px);
}

.pub_footer_1008_brandLogo:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 3px;
}

.pub_footer_1008_brandLogo i {
    color: var(--accent, #6366f1);
}

.pub_footer_1008_brandDesc {
    color: var(--text-muted, #94a3b8);
    line-height: var(--leading, 1.65);
    margin: 0;
}

/* ── Social Icons ────────────────────────────────────────── */
.pub_footer_1008_socialRow {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 0.5rem);
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.pub_footer_1008_socialLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-height: 36px;
    border-radius: var(--radius-lg, 8px);
    background: var(--social-bg, rgba(255, 255, 255, 0.08));
    color: var(--text-muted, #94a3b8);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    border: 1px solid var(--footer-border, rgba(255, 255, 255, 0.08));
}

.pub_footer_1008_socialLink:hover {
    background: var(--accent, #6366f1);
    color: var(--social-hover-text, #fff);
    transform: translateY(-2px);
    border-color: var(--accent, #6366f1);
}

.pub_footer_1008_socialLink i {
    font-size: calc(1rem * var(--body-scale, 1));
    line-height: var(--leading, 1);
}

/* ── Links Grid ──────────────────────────────────────────── */
.pub_footer_1008_linksArea {
    /* wrapper for the links grid zone */
}

.pub_footer_1008_linksGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: clamp(1rem, 2vw, 2rem);
}

.pub_footer_1008_linksCol {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Reset browser list defaults inside FooterLinksColumn */
.pub_footer_1008_linksCol ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.25rem);
}

.pub_footer_1008_linksCol li {
    margin: 0;
    padding: 0;
}

/* ── Column Headings ─────────────────────────────────────── */
.pub_footer_1008_colHeading {
    color: var(--text, #e2e8f0);
    font-family: var(--font-heading, var(--font-body, 'Inter', system-ui, sans-serif));
    font-weight: 700;
    letter-spacing: var(--tracking, 0.1em);
    text-transform: uppercase;
    margin: 0 0 0.875rem;
}

/* ── Nav Column Links ────────────────────────────────────── */
.pub_footer_1008_footerLink {
    display: inline-block;
    color: var(--text-muted, #94a3b8);
    text-decoration: none;
    line-height: var(--leading, 1.5);
    padding: 0.125rem 0;
    border-radius: var(--radius-sm, 4px);
    transition: color 180ms ease;
}

.pub_footer_1008_footerLink:hover {
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_footerLink:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 2px;
    color: var(--text, #e2e8f0);
}

/* ── Contact Column ──────────────────────────────────────── */
.pub_footer_1008_contactCol {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.25rem);
}

.pub_footer_1008_contactItem {
    display: flex;
    align-items: flex-start;
    gap: var(--space-content-gap, 0.5rem);
    color: var(--text-muted, #94a3b8);
    line-height: var(--leading, 1.5);
    margin-bottom: 0.5rem;
}

.pub_footer_1008_contactIcon {
    color: var(--accent, #6366f1);
    font-size: calc(1rem * var(--body-scale, 1));
    margin-top: 0.1em;
    flex-shrink: 0;
}

.pub_footer_1008_contactText {
    color: var(--text-muted, #94a3b8);
    text-decoration: none;
    border-radius: var(--radius-sm, 4px);
    transition: color 180ms ease;
}

.pub_footer_1008_contactText:hover {
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_contactText:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 2px;
    color: var(--text, #e2e8f0);
}

/* ── Newsletter Column ───────────────────────────────────── */
.pub_footer_1008_newsletterCol {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.75rem);
}

/* Space out the input and button inside the newsletter form */
.pub_footer_1008_newsletterCol form {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.625rem);
}

/* Email validation error message — min-height reserves 1 line always to prevent CLS */
.pub_footer_1008_newsletterCol form span[role="alert"] {
    display: block;
    min-height: calc(0.8125rem * 1.4);
    color: var(--alert-color, #f87171);
    font-size: calc(0.8125rem * var(--body-scale, 1));
    line-height: var(--leading, 1.4);
}

.pub_footer_1008_newsletterInput {
    width: 100%;
    background: var(--newsletter-input-bg, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
    border-radius: var(--radius-md, 6px);
    color: var(--text, #e2e8f0);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: calc(0.9375rem * var(--body-scale, 1));
    padding: 0.625rem 0.875rem;
    outline: none;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.pub_footer_1008_newsletterInput:focus {
    border-color: var(--accent, #6366f1);
}

.pub_footer_1008_newsletterInput::placeholder {
    color: var(--text-muted, #64748b);
}

.pub_footer_1008_newsletterBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent, #6366f1);
    color: var(--btn-text, #fff);
    border: none;
    border-radius: var(--radius-md, 6px);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: calc(0.9375rem * var(--body-scale, 1));
    font-weight: 600;
    letter-spacing: var(--tracking, -0.01em);
    padding: 0.625rem 1.25rem;
    cursor: pointer;
    transition: opacity 150ms ease;
}

.pub_footer_1008_newsletterBtn:hover {
    opacity: 0.88;
}

.pub_footer_1008_newsletterBtn:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 3px;
    opacity: 0.88;
}

/* ── Map ─────────────────────────────────────────────────── */
.pub_footer_1008_mapWrapper {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: var(--radius-lg, 8px);
    overflow: hidden;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

/* ── App Badges ──────────────────────────────────────────── */
.pub_footer_1008_appBadges {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 1rem);
    flex-wrap: wrap;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* ── Divider ─────────────────────────────────────────────── */
.pub_footer_1008_divider {
    border: none;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    margin: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(1rem, 2vw, 1.5rem);
}

/* ── Bottom Bar ──────────────────────────────────────────── */
.pub_footer_1008_bottomBarWrapper {
    background: var(--bottom-bg, transparent);
}

.pub_footer_1008_bottomBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-content-gap, 0.75rem);
}

.pub_footer_1008_copyright {
    color: var(--text-muted, #64748b);
    margin: 0;
    line-height: var(--leading, 1.5);
}

.pub_footer_1008_legalLinks {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.125rem;
}

.pub_footer_1008_legalLink {
    color: var(--text-muted, #64748b);
    text-decoration: none;
    border-radius: var(--radius-sm, 4px);
    padding: 0.125rem 0.25rem;
    transition: color 180ms ease;
}

.pub_footer_1008_legalLink:hover {
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_legalLink:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 2px;
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_legalSep {
    color: var(--text-muted, #475569);
    font-size: calc(0.875rem * var(--body-scale, 1));
    user-select: none;
}

/* ── Certifications Row ──────────────────────────────────── */
.pub_footer_1008_certsRow {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 1rem);
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* ── Interactive states ──────────────────────────────────── */

/* ── @media 1024px ───────────────────────────────────────── */
@media (max-width: 1024px) {
    .pub_footer_1008_mainGrid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-gap, 2rem);
    }

    .pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_mainGrid {
        grid-template-columns: 1fr;
    }
}

/* ── @media 768px ────────────────────────────────────────── */
@media (max-width: 768px) {
    .pub_footer_1008_mainGrid {
        grid-template-columns: 1fr;
        gap: var(--space-gap, 1.75rem);
    }

    .pub_footer_1008_linksGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pub_footer_1008_bottomBar {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-content-gap, 0.5rem);
    }
}

/* ── @media 480px ────────────────────────────────────────── */
@media (max-width: 480px) {
    .pub_footer_1008_linksGrid {
        grid-template-columns: 1fr;
    }

    .pub_footer_1008_appBadges {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── prefers-reduced-motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .pub_footer_1008_footerLink,
    .pub_footer_1008_contactText,
    .pub_footer_1008_legalLink,
    .pub_footer_1008_brandLogo,
    .pub_footer_1008_newsletterInput,
    .pub_footer_1008_newsletterBtn {
        transition: none;
    }
}

/* Page: tags */
/* ============================================================
   PUB-NAV-1008 — Clarity SaaS Nav
   Series 1008 · Full-width sticky nav · Light theme · Inter font
   State: data-scrolled on .navBar  |  data-open on .mobileDrawer/.drawerOverlay
   ============================================================ */

/* ── Root ────────────────────────────────────────────────── */
.pub_nav_1008_navRoot {
    /* Scoped design tokens — not user-controlled */
    --t: 0.2s ease;
    --t-slow: 0.32s ease;
    --r: 6px;
    --r-lg: 10px;
    --r-btn: 8px;
    --fs-brand: clamp(15px, 1.5vw, 17px);
    --fs-nav: clamp(13px, 1.3vw, 14px);
    --fs-dd: clamp(12px, 1.2vw, 13.5px);
    --fs-drawer: clamp(14px, 1.4vw, 15px);
    --fs-icon: clamp(18px, 1.5vw, 20px);
    --fs-caret: 11px;
    --hover-bg: rgba(37, 99, 235, 0.06);

    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    isolation: isolate;
    /* ✅ Ensure nav stacking context sits above page content */
    position: relative;
    z-index: var(--z-nav, 1000);
    background-image: var(--texture-bg, none);
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Full-width Bar ──────────────────────────────────────── */
.pub_nav_1008_navBar {
    position: var(--navbar-position, fixed);
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav, 1000);
    /* above page content, below drawer overlay */
    background-color: var(--bg, #ffffff);
    border-bottom: 1px solid var(--border, #e5e7eb);
    transition:
        border-color var(--t, 0.2s ease),
        box-shadow var(--t, 0.2s ease);
    padding-top: var(--pt, 0);
    padding-bottom: var(--pb, 0);
}

.pub_nav_1008_navBar[data-scrolled='true'] {
    border-color: var(--border, #e5e7eb);
}

/* ── Inner container ─────────────────────────────────────── */
.pub_nav_1008_navInner {
    max-width: var(--max-w, 1200px);
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 40px);
    min-height: var(--nav-h, 72px);
    display: flex;
    align-items: center;
    justify-content: space-between;
gap: var(--space-gap, 32px);
}

/* ── Logo ────────────────────────────────────────────────── */
.pub_nav_1008_logo {
  /* composed: logo from NavBase.module.css */
  display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity var(--t, 0.22s ease);
    /* gap, margin, color: set in component */
    gap: var(--space-content-gap, 8px);
    color: var(--text, #374151);
    text-decoration: none;
}

.pub_nav_1008_logoMark {
    font-size: var(--fs-icon, clamp(18px, 1.5vw, 20px));
    color: var(--cta-bg, #2563eb);
    line-height: var(--leading, 1);
}

.pub_nav_1008_logoWord {
    font-size: var(--fs-brand, clamp(15px, 1.5vw, 17px));
    font-weight: 700;
    letter-spacing: var(--tracking, -0.02em);
    color: var(--text, #374151);
    white-space: nowrap;
}

.pub_nav_1008_logoImg {
  /* composed: logoImg from NavBase.module.css */
  object-fit: contain;
    display: block;
    /* width, height: set via CSS vars in component */
    width: var(--brand-image-width, 160px);
    height: var(--brand-image-height, 40px);
}

/* ── Center: Desktop nav links ───────────────────────────── */
.pub_nav_1008_navCenter {
    flex: 1;
    display: flex;
    justify-content: center;
}

.pub_nav_1008_navLinks {
  /* composed: navLinks from NavBase.module.css */
  display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    /* gap: set in component */
    gap: var(--space-content-gap, 4px);
}

.pub_nav_1008_dropWrap {
    position: relative;
}

.pub_nav_1008_navLink {
  /* composed: navLink from NavBase.module.css */
  display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: color var(--t, 0.22s ease), background-color var(--t, 0.22s ease);
    /* padding, font-size, font-weight, color, border-radius: set in component */
    padding: 6px 10px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 500;
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
}

.pub_nav_1008_navLink:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_navLinkBtn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 4px);
    padding: 6px 10px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 500;
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    background: none;
    border: none;
    cursor: pointer;
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
}

.pub_nav_1008_navLinkBtn:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_navCaret {
    font-size: var(--fs-caret, 11px);
    transition: transform var(--t, 0.2s ease);
}

/* ── Dropdown panel ──────────────────────────────────────── */
.pub_nav_1008_navDropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 160px;
    background-color: var(--bg, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--r-lg, 10px);
    padding: 6px;
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* open/close via data-open */
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-6px);
    transition:
        opacity var(--t, 0.2s ease),
        transform var(--t, 0.2s ease);
    z-index: var(--z-dropdown, 1200);
    /* above nav links, below sticky bar */
}

.pub_nav_1008_navDropdown[data-open='true'] {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.pub_nav_1008_ddItem {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    padding: 8px 12px;
    font-size: var(--fs-dd, clamp(12px, 1.2vw, 13.5px));
    font-weight: 500;
    color: var(--text, #374151);
    text-decoration: none;
    border-radius: var(--r, 6px);
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
    white-space: nowrap;
}

.pub_nav_1008_ddItem:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

/* ── Right area ──────────────────────────────────────────── */
.pub_nav_1008_navRight {
  /* composed: navRight from NavBase.module.css */
  display: flex;
    align-items: center;
    flex-shrink: 0;
    /* gap, margin: set in component */
    gap: var(--space-content-gap, 8px);
}

.pub_nav_1008_loginBtn {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 500;
    color: var(--text, #374151);
    text-decoration: none;
    border-radius: var(--r, 6px);
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
    white-space: nowrap;
}

.pub_nav_1008_loginBtn:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_navCta {
  /* composed: navCta from NavBase.module.css */
  display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: background-color var(--t, 0.22s ease), transform var(--t, 0.22s ease);
    /* padding, background, color, border-radius, font: set in component */
    padding: 7px 18px;
    background-color: var(--cta-bg, #2563eb);
    color: var(--cta-text, #ffffff);
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 600;
    border-radius: var(--r-btn, 8px);
    white-space: nowrap;
}

.pub_nav_1008_navCta:hover {
    background-color: var(--cta-hover, rgba(37, 99, 235, 0.88));
    transform: translateY(-1px);
}

/* ── Hamburger ───────────────────────────────────────────── */
.pub_nav_1008_hamburger {
  /* composed: hamburger from NavBase.module.css */
  display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    transition: background-color var(--t, 0.22s ease);
    width: 36px;
    min-height: var(--hamburger-h, 36px);
    font-size: var(--fs-icon, clamp(18px, 1.5vw, 20px));
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    display: none;
    /* visible on mobile via media query */
}

.pub_nav_1008_hamburger:hover {
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_hamburgerLine {
  /* composed: hamburgerLine from NavBase.module.css */
  display: block;
    transition: transform var(--t, 0.22s ease), opacity var(--t, 0.22s ease);
    width: 20px;
    height: 2px;
    background-color: var(--text, #374151);
    border-radius: 2px;
}

/* ── Drawer Overlay ──────────────────────────────────────── */
.pub_nav_1008_drawerOverlay {
  /* composed: drawerOverlay from NavBase.module.css */
  inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t, 0.22s ease), visibility var(--t, 0.22s ease);
    /* position, z-index, background-color: set in component */
    position: var(--drawer-position, fixed);
    z-index: var(--z-drawer, 1100);
    /* above sticky navbar, below drawer panel */
    background-color: var(--overlay-bg, rgba(17, 24, 39, 0.4));
}

.pub_nav_1008_drawerOverlay[data-open='true'] {
    opacity: 1;
    visibility: visible;
}

/* ── Mobile Drawer ───────────────────────────────────────── */
.pub_nav_1008_mobileDrawer {
  /* composed: mobileDrawer from NavBase.module.css */
  top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--t-slow, 0.36s ease);
    overflow-y: auto;
    /* position, z-index, width, background-color, border, box-shadow: set in component */
    position: var(--drawer-position, fixed);
    z-index: var(--z-drawer, 1100);
    /* above overlay, topmost drawer layer */
    width: min(320px, 85vw);
    background-color: var(--bg, #ffffff);
    border-left: 1px solid var(--border, #e5e7eb);
}

.pub_nav_1008_mobileDrawer[data-open='true'] {
    transform: translateX(0);
}

/* ── Drawer Header ───────────────────────────────────────── */
.pub_nav_1008_drawerHeader {
  /* composed: drawerHeader from NavBase.module.css */
  display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    /* padding, border: set in component */
    padding: 18px 20px;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.pub_nav_1008_drawerBrand {
  /* composed: drawerBrand from NavBase.module.css */
  display: flex;
    align-items: center;
    /* gap, font-family, font-size, color: set in component */
    gap: var(--space-content-gap, 8px);
    font-size: var(--fs-brand, clamp(15px, 1.5vw, 17px));
    font-weight: 700;
    color: var(--text, #374151);
}

.pub_nav_1008_drawerBrandMark {
    font-size: var(--fs-icon, clamp(18px, 1.5vw, 20px));
    color: var(--cta-bg, #2563eb);
}

.pub_nav_1008_drawerCloseBtn {
  /* composed: drawerCloseBtn from NavBase.module.css */
  display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color var(--t, 0.22s ease);
    /* width, height, font-size, color: set in component */
    width: 32px;
    min-height: var(--close-btn-h, 32px);
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
}

.pub_nav_1008_drawerCloseBtn:hover {
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

/* ── Drawer Links ────────────────────────────────────────── */
.pub_nav_1008_drawerLinks {
  /* composed: drawerLinks from NavBase.module.css */
  flex: 1;
    display: flex;
    flex-direction: column;
    /* padding: set in component */
    padding: 12px 12px;
    gap: 2px;
}

.pub_nav_1008_drawerLink {
  /* composed: drawerLink from NavBase.module.css */
  display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: color var(--t, 0.22s ease), background-color var(--t, 0.22s ease);
    /* padding, font-size, font-weight, color, font-family, border-radius: set in component */
    padding: 10px 12px;
    font-size: var(--fs-drawer, clamp(14px, 1.4vw, 15px));
    font-weight: 500;
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
}

.pub_nav_1008_drawerLink:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_drawerCaret {
  /* composed: drawerCaret from NavBase.module.css */
  transition: transform var(--t, 0.22s ease);
    /* font-size: set in component */
    font-size: var(--fs-caret, 11px);
}

.pub_nav_1008_drawerSub {
  /* composed: drawerSub from NavBase.module.css */
  max-height: 0;
    overflow: hidden;
    transition: max-height var(--t-slow, 0.36s ease);
    padding-left: 12px;
}

.pub_nav_1008_drawerSubLink {
  /* composed: drawerSubLink from NavBase.module.css */
  display: block;
    text-decoration: none;
    transition: color var(--t, 0.22s ease), background-color var(--t, 0.22s ease);
    /* padding, font-size, color: set in component */
    padding: 8px 12px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    display: block;
}

.pub_nav_1008_drawerSubLink:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

/* ── Drawer Footer ───────────────────────────────────────── */
.pub_nav_1008_drawerFooter {
  /* composed: drawerFooter from NavBase.module.css */
  flex-shrink: 0;
    /* padding, border: set in component */
    padding: 16px 20px;
    border-top: 1px solid var(--border, #e5e7eb);
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 10px);
}

.pub_nav_1008_drawerSecondaryBtn {
    display: block;
    text-align: center;
    padding: 10px 20px;
    font-size: var(--fs-drawer, clamp(14px, 1.4vw, 15px));
    font-weight: 500;
    color: var(--text, #374151);
    text-decoration: none;
    border-radius: var(--r-btn, 8px);
    border: 1px solid var(--border, #e5e7eb);
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
}

.pub_nav_1008_drawerSecondaryBtn:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_drawerCta {
  /* composed: drawerCta from NavBase.module.css */
  display: block;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--t, 0.22s ease);
    /* padding, background, color, border-radius, font: set in component */
    padding: 11px 20px;
    background-color: var(--cta-bg, #2563eb);
    color: var(--cta-text, #ffffff);
    font-size: var(--fs-drawer, clamp(14px, 1.4vw, 15px));
    font-weight: 600;
    border-radius: var(--r-btn, 8px);
    text-align: center;
}

.pub_nav_1008_drawerCta:hover {
    background-color: var(--cta-hover, rgba(37, 99, 235, 0.88));
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */

/* ── Focus states (accessibility — required) ─────────────── */
.pub_nav_1008_navLink:focus-visible,
.pub_nav_1008_navLinkBtn:focus-visible,
.pub_nav_1008_loginBtn:focus-visible,
.pub_nav_1008_navCta:focus-visible,
.pub_nav_1008_hamburger:focus-visible,
.pub_nav_1008_drawerCloseBtn:focus-visible,
.pub_nav_1008_drawerLink:focus-visible,
.pub_nav_1008_drawerSubLink:focus-visible,
.pub_nav_1008_drawerSecondaryBtn:focus-visible,
.pub_nav_1008_drawerCta:focus-visible {
    outline: 2px solid var(--accent, #2563eb);
    outline-offset: 3px;
    border-radius: var(--r, 6px);
}

/* ── Tablet (1100px) ─────────────────────────────────────── */
@media (max-width: 1100px) {
    .pub_nav_1008_navInner {
gap: var(--space-content-gap, 12px);
    }

    .pub_nav_1008_navLinks {
        gap: 2px;
    }

    .pub_nav_1008_navLink,
    .pub_nav_1008_navLinkBtn {
        padding: 6px 6px;
    }

    .pub_nav_1008_navRight {
        gap: var(--space-content-gap, 4px);
    }

    .pub_nav_1008_loginBtn {
        padding: 5px 8px;
    }

    .pub_nav_1008_navCta {
        padding: 5px 10px;
    }
}

/* ── Tablet / Mobile (768px) ─────────────────────────────── */
@media (max-width: 768px) {
    .pub_nav_1008_navCenter {
        display: none;
    }

    .pub_nav_1008_loginBtn {
        display: none;
    }

    .pub_nav_1008_navCta {
        display: none;
    }

    .pub_nav_1008_hamburger {
        display: flex;
    }
}

/* ── Mobile (480px) ──────────────────────────────────────── */
@media (max-width: 480px) {
    .pub_nav_1008_navInner {
        padding: 0 clamp(12px, 4vw, 16px);
gap: var(--space-content-gap, 12px);
    }
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .pub_nav_1008_navBar,
    .pub_nav_1008_navLink,
    .pub_nav_1008_navLinkBtn,
    .pub_nav_1008_navDropdown,
    .pub_nav_1008_ddItem,
    .pub_nav_1008_loginBtn,
    .pub_nav_1008_navCta,
    .pub_nav_1008_drawerOverlay,
    .pub_nav_1008_mobileDrawer,
    .pub_nav_1008_drawerLink,
    .pub_nav_1008_drawerSubLink,
    .pub_nav_1008_drawerSecondaryBtn,
    .pub_nav_1008_drawerCta {
        transition: none;
    }
}

/* PUB-BLOG-1008 — Aurora Blog Grid
 * 1008 series: white bg + indigo #6366f1 accent · clean content grid
 * JS states: [data-visible='true'] for scroll reveal (SSR only).
 * Dynamic data: blogPosts injected from pageModel (pageType: 'blog') on SSR.
 */

/* ── Root / Section ─────────────────────────────────────────────────────── */
.pub_grid_1008_root {
    --radial-1: rgba(99, 102, 241, 0.06);
    --radial-2: rgba(168, 85, 247, 0.04);
    --badge-border: rgba(99, 102, 241, 0.2);
    --card-radius: 12px;
    --card-shadow: 0 1px 3px var(--shadow-light, rgba(0, 0, 0, 0.06)), 0 1px 2px var(--shadow-lighter, rgba(0, 0, 0, 0.04));
    --card-shadow-hover: 0 10px 25px var(--shadow-hover, rgba(0, 0, 0, 0.08)), 0 4px 10px var(--shadow-hover-light, rgba(0, 0, 0, 0.04));
    --img-h: 200px;
    --t: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    padding: var(--pt, 96px) 24px var(--pb, 96px);
    background: var(--texture-bg, none),
        radial-gradient(ellipse 55% 40% at 100% 0%, var(--radial-1, rgba(99, 102, 241, 0.06)) 0%, transparent 60%),
        radial-gradient(ellipse 40% 30% at 0% 100%, var(--radial-2, rgba(168, 85, 247, 0.04)) 0%, transparent 55%),
        color-mix(in srgb, color-mix(in srgb, var(--bg, #ffffff) calc(var(--material-bg-opacity, 1) * 100%), transparent) calc(var(--material-bg-opacity, 1) * 100%), transparent);
    font-family: var(--font-body, system-ui, -apple-system, sans-serif);
    color: var(--text, #0f172a);
    /* ⚠️ Do NOT add overflow:hidden, transform, or isolation here —
       they create stacking contexts that let blog content paint above
       the navbar (which uses isolation:isolate + traps its z-index). */

    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Container ──────────────────────────────────────────────────────────── */
.pub_grid_1008_container {
    max-width: var(--max-w, 1200px);
    margin-inline: auto;
    padding-inline: 24px;
}

/* ── Section Header ─────────────────────────────────────────────────────── */
.pub_grid_1008_headerWrap {
    text-align: center;
    margin-bottom: 48px;
}

.pub_grid_1008_sectionHeader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-content-gap, 12px);
}

.pub_grid_1008_badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 6px);
    padding: 6px 14px;
    border: 1px solid var(--badge-border, rgba(99, 102, 241, 0.2));
    border-radius: 100px;
    background: var(--badge-bg, #eef2ff);
    color: var(--badge-text, #6366f1);
    font-family: var(--font-body, system-ui, -apple-system, sans-serif);
    font-weight: 600;
    letter-spacing: var(--tracking, 0.04em);
    text-transform: uppercase;
}

.pub_grid_1008_title {
    font-family: var(--font-heading, 'Inter', system-ui, sans-serif);
    font-weight: 700;
    line-height: var(--leading, 1.15);
    color: var(--text, #0f172a);
    letter-spacing: var(--tracking, -0.02em);
    margin: 0;
}

.pub_grid_1008_titleAccent {
    display: block;
    background: linear-gradient(135deg, var(--accent, #6366f1), var(--secondary, #a78bfa));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pub_grid_1008_description {
    line-height: var(--leading, 1.6);
    color: var(--text-muted, #64748b);
    max-width: 580px;
    margin: 8px 0 0;
}

/* ── Blog Grid ──────────────────────────────────────────────────────────── */
.pub_grid_1008_grid {
    display: grid;
    grid-template-columns: repeat(var(--blog-cols, 3), 1fr);
    gap: clamp(16px, 2.5vw, 28px);
}

/* ── Card ───────────────────────────────────────────────────────────────── */
.pub_grid_1008_card {
    display: flex;
    flex-direction: column;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--card-border, #e2e8f0);
    border-radius: var(--card-radius, 12px);
    overflow: hidden;
    transition:
        box-shadow var(--t, 0.25s ease),
        border-color var(--t, 0.25s ease);
}

.pub_grid_1008_card:hover {
    border-color: var(--accent, #6366f1);
}

.pub_grid_1008_cardImage {
    width: 100%;
    height: var(--img-h, 200px);
    object-fit: cover;
    display: block;
    background: linear-gradient(135deg, var(--accent, #6366f1), var(--secondary, #a78bfa));
    /* Gradient overlay for depth — inset shadow, no stacking context */
}

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

.pub_grid_1008_cardContent {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 10px);
    padding: 24px 24px 28px;
    flex: 1;
}

.pub_grid_1008_cardCategory {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 100px;
    background: var(--cat-bg, rgba(99, 102, 241, 0.08));
    color: var(--accent, #6366f1);
    font-size: var(--fs-cat, clamp(10px, 1.1vw, 11px));
    font-weight: 700;
    letter-spacing: var(--tracking, 0.05em);
    text-transform: uppercase;
    text-decoration: none;
    transition: background var(--t, 0.2s ease), color var(--t, 0.2s ease);
}

.pub_grid_1008_cardCategory:hover {
    background: var(--accent, #6366f1);
    color: var(--badge-text, #ffffff);
}

/* Category dot indicator */
.pub_grid_1008_cardCategory::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: var(--radius-full, 50%);
    background: currentColor;
    flex-shrink: 0;
}

.pub_grid_1008_cardTitle {
    font-family: var(--font-heading, 'Inter', system-ui, sans-serif);
    font-size: var(--fs-card-title, clamp(16px, 1.8vw, 19px));
    font-weight: 600;
    line-height: var(--leading, 1.35);
    color: var(--text, #0f172a);
    margin: 0;
    transition: color var(--t, 0.25s ease);
    /* Animated underline effect (no transform) */
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) left 1.1em / 0% 2px no-repeat;
    transition: color var(--t, 0.25s ease), background-size var(--t, 0.25s ease);
}

.pub_grid_1008_card:hover .pub_grid_1008_cardTitle {
    color: var(--accent, #6366f1);
    background-size: 100% 2px;
}

.pub_grid_1008_cardTitle a {
    color: inherit;
    text-decoration: none;
}

.pub_grid_1008_cardExcerpt {
    font-size: var(--fs-body, 14px);
    line-height: var(--leading, 1.65);
    color: var(--text-muted, #64748b);
    margin: 2px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pub_grid_1008_cardMeta {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 6px);
    font-size: var(--fs-meta, 12px);
    color: var(--text-muted, #94a3b8);
    margin-top: auto;
    padding-top: 14px;
    font-weight: 500;
}

/* Dot separator between meta items */
.pub_grid_1008_cardMeta span+span::before {
    content: '·';
    margin: 0 6px;
    font-weight: 700;
    color: var(--border, #cbd5e1);
}

.pub_grid_1008_cardMeta span {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 4px);
}

.pub_grid_1008_cardAuthor {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 10px);
    font-size: var(--fs-author, clamp(12px, 1.2vw, 13px));
    font-weight: 600;
    color: var(--text, #0f172a);
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--border, #eef2f6);
}

/* ImageBlock wrapper inside author (BlogCard passes dynamic class) */
.pub_grid_1008_cardAuthor>div {
    display: flex;
    flex-shrink: 0;
    line-height: var(--leading, 0);
}

.pub_grid_1008_cardAuthor img {
    width: var(--author-img-size, 30px);
    height: var(--author-img-size, 30px);
    border-radius: var(--radius-full, 50%);
    object-fit: cover;
    border: 2px solid var(--border, #eef2f6);
    flex-shrink: 0;
    display: block;
}

.pub_grid_1008_cardAuthor span,
.pub_grid_1008_cardAuthor a {
    line-height: var(--leading, 1);
    color: inherit;
    text-decoration: none;
    transition: color var(--t, 0.2s ease);
}

.pub_grid_1008_cardAuthor a:hover {
    color: var(--accent, #6366f1);
}

/* No avatar fallback — show placeholder circle */
.pub_grid_1008_cardAuthor span:first-child:last-child::before,
.pub_grid_1008_cardAuthor a:first-child:last-child::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full, 50%);
    background: var(--cat-bg, rgba(99, 102, 241, 0.12));
    border: 2px solid var(--border, #eef2f6);
    flex-shrink: 0;
    margin-right: 10px;
    vertical-align: middle;
}

/* ── Tags ─────────────────────────────────────── */
.pub_grid_1008_cardTags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-content-gap, 6px);
    margin-top: 8px;
}

.pub_grid_1008_cardTag {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 100px;
    background: var(--cat-bg, rgba(99, 102, 241, 0.06));
    color: var(--text-muted, #64748b);
    font-size: var(--fs-tag, 11px);
    font-weight: 500;
    text-decoration: none;
    transition: background var(--t, 0.2s ease), color var(--t, 0.2s ease);
}

.pub_grid_1008_cardTag:hover {
    background: var(--accent, #6366f1);
    color: var(--badge-text, #ffffff);
}

/* ── Interactive States ─────────────────────────────────────────────────── */
.pub_grid_1008_card a {
    text-decoration: none;
}

/* ── Empty State Banner (Page Builder) ──────────────────────────────────── */
.pub_grid_1008_emptyStateBanner {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 10px);
    flex-wrap: wrap;
    padding: 12px 18px;
    margin-bottom: 28px;
    border-radius: var(--radius-md, 10px);
    background: var(--cat-bg, rgba(99, 102, 241, 0.06));
    border: 1px dashed var(--cat-border, rgba(99, 102, 241, 0.25));
    color: var(--accent, #6366f1);
    font-size: calc(13px * var(--body-scale, 1));
    font-weight: 500;
    line-height: var(--leading, 1.4);
}

.pub_grid_1008_emptyStateHint {
    color: var(--text-muted, #94a3b8);
    font-weight: 400;
    font-size: calc(12px * var(--body-scale, 1));
}

/* ── Placeholder Card Badge ─────────────────────────────────────────────── */
.pub_grid_1008_placeholderBadge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: var(--z-above, 2);
    /* above card image */
    padding: 3px 8px;
    border-radius: var(--radius-md, 6px);
    background: var(--badge-bg-solid, rgba(99, 102, 241, 0.85));
    color: var(--badge-text, #ffffff);
    font-size: calc(10px * var(--heading-scale, 1));
    font-weight: 600;
    letter-spacing: var(--tracking, 0.03em);
    text-transform: uppercase;
    pointer-events: none;
}

/* ── Pagination ──────────────────────────────────────────────────────────── */
.pub_grid_1008_pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-content-gap, 8px);
    margin-top: 48px;
    padding-top: 28px;
    border-top: none;
    position: relative;
    flex-wrap: wrap;
}

/* Gradient line separator above pagination */
.pub_grid_1008_pagination::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    max-width: 360px;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            var(--border, #e2e8f0) 30%,
            var(--accent, #6366f1) 50%,
            var(--border, #e2e8f0) 70%,
            transparent 100%);
}

.pub_grid_1008_paginationPages {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 4px);
}

.pub_grid_1008_paginationBtn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    padding: 9px 20px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 100px;
    background: var(--card-bg, #ffffff);
    color: var(--text, #0f172a);
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: calc(13px * var(--body-scale, 1));
    font-weight: 500;
    cursor: pointer;
    transition:
        all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    white-space: nowrap;
}

.pub_grid_1008_paginationBtn:hover:not(:disabled) {
    background: var(--card-bg, #ffffff);
    border-color: var(--accent, #6366f1);
    color: var(--accent, #6366f1);
    box-shadow:
        var(--shadow-md, 0 4px 12px rgba(99, 102, 241, 0.12)),
        var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
    transform: translateY(-1px);
}

.pub_grid_1008_paginationBtn:active:not(:disabled) {
    transform: translateY(0);
}

.pub_grid_1008_paginationBtn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.pub_grid_1008_paginationBtn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Hide text label on small screens, show icon only */
@media (max-width: 420px) {
    .pub_grid_1008_paginationBtn span {
        display: none;
    }

    .pub_grid_1008_paginationBtn {
        padding: 9px 14px;
        min-width: 38px;
        justify-content: center;
    }

    .pub_grid_1008_paginationBtn:first-child svg {
        margin: 0;
    }

    .pub_grid_1008_paginationBtn:last-child svg {
        margin: 0;
    }
}

.pub_grid_1008_paginationPage {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 4px;
    border: 1px solid transparent;
    border-radius: var(--radius-md, 10px);
    background: transparent;
    color: var(--text-muted, #64748b);
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: calc(14px * var(--body-scale, 1));
    font-weight: 500;
    cursor: pointer;
    transition:
        all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    position: relative;
}

.pub_grid_1008_paginationPage:hover:not(:disabled) {
    background: var(--cat-bg, rgba(99, 102, 241, 0.05));
    color: var(--accent, #6366f1);
    border-color: var(--cat-border-light, rgba(99, 102, 241, 0.12));
}

.pub_grid_1008_paginationPage:disabled {
    cursor: default;
}

.pub_grid_1008_paginationActive {
    background: linear-gradient(135deg, var(--accent, #6366f1), var(--accent-light, #818cf8));
    border-color: transparent;
    color: var(--badge-text, #ffffff);
    font-weight: 600;
    cursor: default;
    pointer-events: none;
    box-shadow:
        var(--shadow-md, 0 4px 12px rgba(99, 102, 241, 0.25)),
        var(--shadow-sm, 0 1px 3px rgba(99, 102, 241, 0.15));
    transform: scale(1.05);
}

.pub_grid_1008_paginationActive:hover {
    background: linear-gradient(135deg, var(--accent, #6366f1), var(--accent-light, #818cf8));
    color: var(--badge-text, #ffffff);
}

.pub_grid_1008_paginationDots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 38px;
    color: var(--text-muted, #94a3b8);
    font-size: calc(14px * var(--body-scale, 1));
    letter-spacing: var(--tracking, 3px);
    user-select: none;
}

/* ── Media: Tablet (max-width: 1024px) ──────────────────────────────────── */
@media (max-width: 1024px) {
    .pub_grid_1008_grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pub_grid_1008_headerWrap {
        margin-bottom: 36px;
    }

    .pub_grid_1008_pagination::before {
        width: 80%;
    }
}

/* ── Media: Mobile (max-width: 768px) ───────────────────────────────────── */
@media (max-width: 768px) {
    .pub_grid_1008_root {
        padding: var(--pt, 96px) 16px var(--pb, 96px);
    }

    .pub_grid_1008_container {
        padding-inline: 16px;
    }

    .pub_grid_1008_grid {
        grid-template-columns: 1fr;
        gap: var(--space-content-gap, 20px);
    }

    .pub_grid_1008_cardContent {
        padding: 16px 16px 20px;
    }

    .pub_grid_1008_headerWrap {
        margin-bottom: 28px;
    }

    .pub_grid_1008_pagination::before {
        width: 90%;
    }

    .pub_grid_1008_pagination {
        margin-top: 36px;
        padding-top: 24px;
        gap: var(--space-content-gap, 6px);
    }

    .pub_grid_1008_paginationBtn {
        padding: 7px 14px;
        font-size: calc(12px * var(--body-scale, 1));
        gap: var(--space-content-gap, 6px);
        border-radius: 100px;
    }

    .pub_grid_1008_paginationBtn svg {
        width: 12px;
        height: 12px;
    }

    .pub_grid_1008_paginationPage {
        min-width: 34px;
        height: 34px;
        font-size: calc(13px * var(--body-scale, 1));
        border-radius: var(--radius-lg, 8px);
    }

    .pub_grid_1008_paginationActive {
        transform: scale(1.03);
        box-shadow:
            var(--shadow-md, 0 3px 8px rgba(99, 102, 241, 0.2)),
            var(--shadow-sm, 0 1px 2px rgba(99, 102, 241, 0.12));
    }

    .pub_grid_1008_paginationDots {
        min-width: 24px;
        height: 34px;
    }
}

/* ── Media: Small Mobile (max-width: 480px) ─────────────────────────────── */
@media (max-width: 480px) {
    .pub_grid_1008_cardImage {
        height: var(--img-h-mobile, 180px);
    }

    .pub_grid_1008_cardMeta {
        flex-wrap: wrap;
        gap: var(--space-content-gap, 8px);
    }
}

/* ── Reduced Motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pub_grid_1008_card {
        transition: none;
    }

    .pub_grid_1008_card:hover {
        transform: none;
    }
}

/* ============================================================
   PUB-FOOTER-1008 — Universal Footer (4-column grid layout)
   1008 series: #0f172a bg · #6366f1 accent · Inter font
   Layouts: grid | stacked | minimal  (via data-layout attr)
   ============================================================ */

/* ── Root / Section wrapper ─────────────────────────────── */
.pub_footer_1008_root {
    --newsletter-input-bg: rgba(255, 255, 255, 0.06);
    --newsletter-focus-shadow: rgba(99, 102, 241, 0.2);
    --alert-color: #f87171;
    --btn-text: #fff;
    background: var(--texture-bg, none),
        color-mix(in srgb, color-mix(in srgb, var(--bg, #0f172a) calc(var(--material-bg-opacity, 1) * 100%), transparent) calc(var(--material-bg-opacity, 1) * 100%), transparent);
    color: var(--text, #e2e8f0);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    padding-top: var(--pt, 80px);
    padding-bottom: var(--pb, 40px);
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Container ───────────────────────────────────────────── */
.pub_footer_1008_container {
    max-width: var(--max-w, 1200px);
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 3rem);
}

/* ── Main grid ───────────────────────────────────────────── */
.pub_footer_1008_mainGrid {
    display: grid;
    grid-template-columns: 1.8fr 2fr 1fr 1.4fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
}

/* stacked layout overrides */
.pub_footer_1008_root[data-layout="stacked"] .pub_footer_1008_mainGrid {
    grid-template-columns: 1fr;
    gap: var(--space-gap, 2rem);
}

/* minimal layout overrides */
.pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_mainGrid {
    grid-template-columns: 1fr auto;
    gap: var(--space-gap, 2rem);
    align-items: center;
}

.pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_contactCol,
.pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_newsletterCol {
    display: none;
}

/* ── Brand Column ────────────────────────────────────────── */
.pub_footer_1008_brandCol {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.75rem);
}

.pub_footer_1008_brandLogo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 0.5rem);
    color: var(--accent, #6366f1);
    font-family: var(--font-heading, var(--font-body, 'Inter', system-ui, sans-serif));
    font-weight: 700;
    letter-spacing: var(--tracking, -0.02em);
    text-decoration: none;
    margin-bottom: 0.25rem;
    border-radius: var(--radius-sm, 4px);
}

.pub_footer_1008_brandLogo:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 3px;
}

.pub_footer_1008_brandLogo i {
    color: var(--accent, #6366f1);
}

.pub_footer_1008_brandDesc {
    color: var(--text-muted, #94a3b8);
    line-height: var(--leading, 1.65);
    margin: 0;
}

/* ── Social Icons ────────────────────────────────────────── */
.pub_footer_1008_socialRow {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 0.5rem);
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.pub_footer_1008_socialLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-height: 36px;
    border-radius: var(--radius-lg, 8px);
    background: var(--social-bg, rgba(255, 255, 255, 0.08));
    color: var(--text-muted, #94a3b8);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    border: 1px solid var(--footer-border, rgba(255, 255, 255, 0.08));
}

.pub_footer_1008_socialLink:hover {
    background: var(--accent, #6366f1);
    color: var(--social-hover-text, #fff);
    transform: translateY(-2px);
    border-color: var(--accent, #6366f1);
}

.pub_footer_1008_socialLink i {
    font-size: calc(1rem * var(--body-scale, 1));
    line-height: var(--leading, 1);
}

/* ── Links Grid ──────────────────────────────────────────── */
.pub_footer_1008_linksArea {
    /* wrapper for the links grid zone */
}

.pub_footer_1008_linksGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: clamp(1rem, 2vw, 2rem);
}

.pub_footer_1008_linksCol {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Reset browser list defaults inside FooterLinksColumn */
.pub_footer_1008_linksCol ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.25rem);
}

.pub_footer_1008_linksCol li {
    margin: 0;
    padding: 0;
}

/* ── Column Headings ─────────────────────────────────────── */
.pub_footer_1008_colHeading {
    color: var(--text, #e2e8f0);
    font-family: var(--font-heading, var(--font-body, 'Inter', system-ui, sans-serif));
    font-weight: 700;
    letter-spacing: var(--tracking, 0.1em);
    text-transform: uppercase;
    margin: 0 0 0.875rem;
}

/* ── Nav Column Links ────────────────────────────────────── */
.pub_footer_1008_footerLink {
    display: inline-block;
    color: var(--text-muted, #94a3b8);
    text-decoration: none;
    line-height: var(--leading, 1.5);
    padding: 0.125rem 0;
    border-radius: var(--radius-sm, 4px);
    transition: color 180ms ease;
}

.pub_footer_1008_footerLink:hover {
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_footerLink:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 2px;
    color: var(--text, #e2e8f0);
}

/* ── Contact Column ──────────────────────────────────────── */
.pub_footer_1008_contactCol {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.25rem);
}

.pub_footer_1008_contactItem {
    display: flex;
    align-items: flex-start;
    gap: var(--space-content-gap, 0.5rem);
    color: var(--text-muted, #94a3b8);
    line-height: var(--leading, 1.5);
    margin-bottom: 0.5rem;
}

.pub_footer_1008_contactIcon {
    color: var(--accent, #6366f1);
    font-size: calc(1rem * var(--body-scale, 1));
    margin-top: 0.1em;
    flex-shrink: 0;
}

.pub_footer_1008_contactText {
    color: var(--text-muted, #94a3b8);
    text-decoration: none;
    border-radius: var(--radius-sm, 4px);
    transition: color 180ms ease;
}

.pub_footer_1008_contactText:hover {
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_contactText:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 2px;
    color: var(--text, #e2e8f0);
}

/* ── Newsletter Column ───────────────────────────────────── */
.pub_footer_1008_newsletterCol {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.75rem);
}

/* Space out the input and button inside the newsletter form */
.pub_footer_1008_newsletterCol form {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.625rem);
}

/* Email validation error message — min-height reserves 1 line always to prevent CLS */
.pub_footer_1008_newsletterCol form span[role="alert"] {
    display: block;
    min-height: calc(0.8125rem * 1.4);
    color: var(--alert-color, #f87171);
    font-size: calc(0.8125rem * var(--body-scale, 1));
    line-height: var(--leading, 1.4);
}

.pub_footer_1008_newsletterInput {
    width: 100%;
    background: var(--newsletter-input-bg, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
    border-radius: var(--radius-md, 6px);
    color: var(--text, #e2e8f0);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: calc(0.9375rem * var(--body-scale, 1));
    padding: 0.625rem 0.875rem;
    outline: none;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.pub_footer_1008_newsletterInput:focus {
    border-color: var(--accent, #6366f1);
}

.pub_footer_1008_newsletterInput::placeholder {
    color: var(--text-muted, #64748b);
}

.pub_footer_1008_newsletterBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent, #6366f1);
    color: var(--btn-text, #fff);
    border: none;
    border-radius: var(--radius-md, 6px);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: calc(0.9375rem * var(--body-scale, 1));
    font-weight: 600;
    letter-spacing: var(--tracking, -0.01em);
    padding: 0.625rem 1.25rem;
    cursor: pointer;
    transition: opacity 150ms ease;
}

.pub_footer_1008_newsletterBtn:hover {
    opacity: 0.88;
}

.pub_footer_1008_newsletterBtn:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 3px;
    opacity: 0.88;
}

/* ── Map ─────────────────────────────────────────────────── */
.pub_footer_1008_mapWrapper {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: var(--radius-lg, 8px);
    overflow: hidden;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

/* ── App Badges ──────────────────────────────────────────── */
.pub_footer_1008_appBadges {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 1rem);
    flex-wrap: wrap;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* ── Divider ─────────────────────────────────────────────── */
.pub_footer_1008_divider {
    border: none;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    margin: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(1rem, 2vw, 1.5rem);
}

/* ── Bottom Bar ──────────────────────────────────────────── */
.pub_footer_1008_bottomBarWrapper {
    background: var(--bottom-bg, transparent);
}

.pub_footer_1008_bottomBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-content-gap, 0.75rem);
}

.pub_footer_1008_copyright {
    color: var(--text-muted, #64748b);
    margin: 0;
    line-height: var(--leading, 1.5);
}

.pub_footer_1008_legalLinks {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.125rem;
}

.pub_footer_1008_legalLink {
    color: var(--text-muted, #64748b);
    text-decoration: none;
    border-radius: var(--radius-sm, 4px);
    padding: 0.125rem 0.25rem;
    transition: color 180ms ease;
}

.pub_footer_1008_legalLink:hover {
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_legalLink:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 2px;
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_legalSep {
    color: var(--text-muted, #475569);
    font-size: calc(0.875rem * var(--body-scale, 1));
    user-select: none;
}

/* ── Certifications Row ──────────────────────────────────── */
.pub_footer_1008_certsRow {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 1rem);
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* ── Interactive states ──────────────────────────────────── */

/* ── @media 1024px ───────────────────────────────────────── */
@media (max-width: 1024px) {
    .pub_footer_1008_mainGrid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-gap, 2rem);
    }

    .pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_mainGrid {
        grid-template-columns: 1fr;
    }
}

/* ── @media 768px ────────────────────────────────────────── */
@media (max-width: 768px) {
    .pub_footer_1008_mainGrid {
        grid-template-columns: 1fr;
        gap: var(--space-gap, 1.75rem);
    }

    .pub_footer_1008_linksGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pub_footer_1008_bottomBar {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-content-gap, 0.5rem);
    }
}

/* ── @media 480px ────────────────────────────────────────── */
@media (max-width: 480px) {
    .pub_footer_1008_linksGrid {
        grid-template-columns: 1fr;
    }

    .pub_footer_1008_appBadges {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── prefers-reduced-motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .pub_footer_1008_footerLink,
    .pub_footer_1008_contactText,
    .pub_footer_1008_legalLink,
    .pub_footer_1008_brandLogo,
    .pub_footer_1008_newsletterInput,
    .pub_footer_1008_newsletterBtn {
        transition: none;
    }
}

/* Page: authors */
/* ============================================================
   PUB-NAV-1008 — Clarity SaaS Nav
   Series 1008 · Full-width sticky nav · Light theme · Inter font
   State: data-scrolled on .navBar  |  data-open on .mobileDrawer/.drawerOverlay
   ============================================================ */

/* ── Root ────────────────────────────────────────────────── */
.pub_nav_1008_navRoot {
    /* Scoped design tokens — not user-controlled */
    --t: 0.2s ease;
    --t-slow: 0.32s ease;
    --r: 6px;
    --r-lg: 10px;
    --r-btn: 8px;
    --fs-brand: clamp(15px, 1.5vw, 17px);
    --fs-nav: clamp(13px, 1.3vw, 14px);
    --fs-dd: clamp(12px, 1.2vw, 13.5px);
    --fs-drawer: clamp(14px, 1.4vw, 15px);
    --fs-icon: clamp(18px, 1.5vw, 20px);
    --fs-caret: 11px;
    --hover-bg: rgba(37, 99, 235, 0.06);

    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    isolation: isolate;
    /* ✅ Ensure nav stacking context sits above page content */
    position: relative;
    z-index: var(--z-nav, 1000);
    background-image: var(--texture-bg, none);
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Full-width Bar ──────────────────────────────────────── */
.pub_nav_1008_navBar {
    position: var(--navbar-position, fixed);
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav, 1000);
    /* above page content, below drawer overlay */
    background-color: var(--bg, #ffffff);
    border-bottom: 1px solid var(--border, #e5e7eb);
    transition:
        border-color var(--t, 0.2s ease),
        box-shadow var(--t, 0.2s ease);
    padding-top: var(--pt, 0);
    padding-bottom: var(--pb, 0);
}

.pub_nav_1008_navBar[data-scrolled='true'] {
    border-color: var(--border, #e5e7eb);
}

/* ── Inner container ─────────────────────────────────────── */
.pub_nav_1008_navInner {
    max-width: var(--max-w, 1200px);
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 40px);
    min-height: var(--nav-h, 72px);
    display: flex;
    align-items: center;
    justify-content: space-between;
gap: var(--space-gap, 32px);
}

/* ── Logo ────────────────────────────────────────────────── */
.pub_nav_1008_logo {
  /* composed: logo from NavBase.module.css */
  display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity var(--t, 0.22s ease);
    /* gap, margin, color: set in component */
    gap: var(--space-content-gap, 8px);
    color: var(--text, #374151);
    text-decoration: none;
}

.pub_nav_1008_logoMark {
    font-size: var(--fs-icon, clamp(18px, 1.5vw, 20px));
    color: var(--cta-bg, #2563eb);
    line-height: var(--leading, 1);
}

.pub_nav_1008_logoWord {
    font-size: var(--fs-brand, clamp(15px, 1.5vw, 17px));
    font-weight: 700;
    letter-spacing: var(--tracking, -0.02em);
    color: var(--text, #374151);
    white-space: nowrap;
}

.pub_nav_1008_logoImg {
  /* composed: logoImg from NavBase.module.css */
  object-fit: contain;
    display: block;
    /* width, height: set via CSS vars in component */
    width: var(--brand-image-width, 160px);
    height: var(--brand-image-height, 40px);
}

/* ── Center: Desktop nav links ───────────────────────────── */
.pub_nav_1008_navCenter {
    flex: 1;
    display: flex;
    justify-content: center;
}

.pub_nav_1008_navLinks {
  /* composed: navLinks from NavBase.module.css */
  display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    /* gap: set in component */
    gap: var(--space-content-gap, 4px);
}

.pub_nav_1008_dropWrap {
    position: relative;
}

.pub_nav_1008_navLink {
  /* composed: navLink from NavBase.module.css */
  display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: color var(--t, 0.22s ease), background-color var(--t, 0.22s ease);
    /* padding, font-size, font-weight, color, border-radius: set in component */
    padding: 6px 10px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 500;
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
}

.pub_nav_1008_navLink:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_navLinkBtn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 4px);
    padding: 6px 10px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 500;
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    background: none;
    border: none;
    cursor: pointer;
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
}

.pub_nav_1008_navLinkBtn:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_navCaret {
    font-size: var(--fs-caret, 11px);
    transition: transform var(--t, 0.2s ease);
}

/* ── Dropdown panel ──────────────────────────────────────── */
.pub_nav_1008_navDropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 160px;
    background-color: var(--bg, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--r-lg, 10px);
    padding: 6px;
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* open/close via data-open */
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-6px);
    transition:
        opacity var(--t, 0.2s ease),
        transform var(--t, 0.2s ease);
    z-index: var(--z-dropdown, 1200);
    /* above nav links, below sticky bar */
}

.pub_nav_1008_navDropdown[data-open='true'] {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.pub_nav_1008_ddItem {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    padding: 8px 12px;
    font-size: var(--fs-dd, clamp(12px, 1.2vw, 13.5px));
    font-weight: 500;
    color: var(--text, #374151);
    text-decoration: none;
    border-radius: var(--r, 6px);
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
    white-space: nowrap;
}

.pub_nav_1008_ddItem:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

/* ── Right area ──────────────────────────────────────────── */
.pub_nav_1008_navRight {
  /* composed: navRight from NavBase.module.css */
  display: flex;
    align-items: center;
    flex-shrink: 0;
    /* gap, margin: set in component */
    gap: var(--space-content-gap, 8px);
}

.pub_nav_1008_loginBtn {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 500;
    color: var(--text, #374151);
    text-decoration: none;
    border-radius: var(--r, 6px);
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
    white-space: nowrap;
}

.pub_nav_1008_loginBtn:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_navCta {
  /* composed: navCta from NavBase.module.css */
  display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: background-color var(--t, 0.22s ease), transform var(--t, 0.22s ease);
    /* padding, background, color, border-radius, font: set in component */
    padding: 7px 18px;
    background-color: var(--cta-bg, #2563eb);
    color: var(--cta-text, #ffffff);
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 600;
    border-radius: var(--r-btn, 8px);
    white-space: nowrap;
}

.pub_nav_1008_navCta:hover {
    background-color: var(--cta-hover, rgba(37, 99, 235, 0.88));
    transform: translateY(-1px);
}

/* ── Hamburger ───────────────────────────────────────────── */
.pub_nav_1008_hamburger {
  /* composed: hamburger from NavBase.module.css */
  display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    transition: background-color var(--t, 0.22s ease);
    width: 36px;
    min-height: var(--hamburger-h, 36px);
    font-size: var(--fs-icon, clamp(18px, 1.5vw, 20px));
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    display: none;
    /* visible on mobile via media query */
}

.pub_nav_1008_hamburger:hover {
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_hamburgerLine {
  /* composed: hamburgerLine from NavBase.module.css */
  display: block;
    transition: transform var(--t, 0.22s ease), opacity var(--t, 0.22s ease);
    width: 20px;
    height: 2px;
    background-color: var(--text, #374151);
    border-radius: 2px;
}

/* ── Drawer Overlay ──────────────────────────────────────── */
.pub_nav_1008_drawerOverlay {
  /* composed: drawerOverlay from NavBase.module.css */
  inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t, 0.22s ease), visibility var(--t, 0.22s ease);
    /* position, z-index, background-color: set in component */
    position: var(--drawer-position, fixed);
    z-index: var(--z-drawer, 1100);
    /* above sticky navbar, below drawer panel */
    background-color: var(--overlay-bg, rgba(17, 24, 39, 0.4));
}

.pub_nav_1008_drawerOverlay[data-open='true'] {
    opacity: 1;
    visibility: visible;
}

/* ── Mobile Drawer ───────────────────────────────────────── */
.pub_nav_1008_mobileDrawer {
  /* composed: mobileDrawer from NavBase.module.css */
  top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--t-slow, 0.36s ease);
    overflow-y: auto;
    /* position, z-index, width, background-color, border, box-shadow: set in component */
    position: var(--drawer-position, fixed);
    z-index: var(--z-drawer, 1100);
    /* above overlay, topmost drawer layer */
    width: min(320px, 85vw);
    background-color: var(--bg, #ffffff);
    border-left: 1px solid var(--border, #e5e7eb);
}

.pub_nav_1008_mobileDrawer[data-open='true'] {
    transform: translateX(0);
}

/* ── Drawer Header ───────────────────────────────────────── */
.pub_nav_1008_drawerHeader {
  /* composed: drawerHeader from NavBase.module.css */
  display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    /* padding, border: set in component */
    padding: 18px 20px;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.pub_nav_1008_drawerBrand {
  /* composed: drawerBrand from NavBase.module.css */
  display: flex;
    align-items: center;
    /* gap, font-family, font-size, color: set in component */
    gap: var(--space-content-gap, 8px);
    font-size: var(--fs-brand, clamp(15px, 1.5vw, 17px));
    font-weight: 700;
    color: var(--text, #374151);
}

.pub_nav_1008_drawerBrandMark {
    font-size: var(--fs-icon, clamp(18px, 1.5vw, 20px));
    color: var(--cta-bg, #2563eb);
}

.pub_nav_1008_drawerCloseBtn {
  /* composed: drawerCloseBtn from NavBase.module.css */
  display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color var(--t, 0.22s ease);
    /* width, height, font-size, color: set in component */
    width: 32px;
    min-height: var(--close-btn-h, 32px);
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
}

.pub_nav_1008_drawerCloseBtn:hover {
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

/* ── Drawer Links ────────────────────────────────────────── */
.pub_nav_1008_drawerLinks {
  /* composed: drawerLinks from NavBase.module.css */
  flex: 1;
    display: flex;
    flex-direction: column;
    /* padding: set in component */
    padding: 12px 12px;
    gap: 2px;
}

.pub_nav_1008_drawerLink {
  /* composed: drawerLink from NavBase.module.css */
  display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: color var(--t, 0.22s ease), background-color var(--t, 0.22s ease);
    /* padding, font-size, font-weight, color, font-family, border-radius: set in component */
    padding: 10px 12px;
    font-size: var(--fs-drawer, clamp(14px, 1.4vw, 15px));
    font-weight: 500;
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
}

.pub_nav_1008_drawerLink:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_drawerCaret {
  /* composed: drawerCaret from NavBase.module.css */
  transition: transform var(--t, 0.22s ease);
    /* font-size: set in component */
    font-size: var(--fs-caret, 11px);
}

.pub_nav_1008_drawerSub {
  /* composed: drawerSub from NavBase.module.css */
  max-height: 0;
    overflow: hidden;
    transition: max-height var(--t-slow, 0.36s ease);
    padding-left: 12px;
}

.pub_nav_1008_drawerSubLink {
  /* composed: drawerSubLink from NavBase.module.css */
  display: block;
    text-decoration: none;
    transition: color var(--t, 0.22s ease), background-color var(--t, 0.22s ease);
    /* padding, font-size, color: set in component */
    padding: 8px 12px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    display: block;
}

.pub_nav_1008_drawerSubLink:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

/* ── Drawer Footer ───────────────────────────────────────── */
.pub_nav_1008_drawerFooter {
  /* composed: drawerFooter from NavBase.module.css */
  flex-shrink: 0;
    /* padding, border: set in component */
    padding: 16px 20px;
    border-top: 1px solid var(--border, #e5e7eb);
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 10px);
}

.pub_nav_1008_drawerSecondaryBtn {
    display: block;
    text-align: center;
    padding: 10px 20px;
    font-size: var(--fs-drawer, clamp(14px, 1.4vw, 15px));
    font-weight: 500;
    color: var(--text, #374151);
    text-decoration: none;
    border-radius: var(--r-btn, 8px);
    border: 1px solid var(--border, #e5e7eb);
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
}

.pub_nav_1008_drawerSecondaryBtn:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_drawerCta {
  /* composed: drawerCta from NavBase.module.css */
  display: block;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--t, 0.22s ease);
    /* padding, background, color, border-radius, font: set in component */
    padding: 11px 20px;
    background-color: var(--cta-bg, #2563eb);
    color: var(--cta-text, #ffffff);
    font-size: var(--fs-drawer, clamp(14px, 1.4vw, 15px));
    font-weight: 600;
    border-radius: var(--r-btn, 8px);
    text-align: center;
}

.pub_nav_1008_drawerCta:hover {
    background-color: var(--cta-hover, rgba(37, 99, 235, 0.88));
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */

/* ── Focus states (accessibility — required) ─────────────── */
.pub_nav_1008_navLink:focus-visible,
.pub_nav_1008_navLinkBtn:focus-visible,
.pub_nav_1008_loginBtn:focus-visible,
.pub_nav_1008_navCta:focus-visible,
.pub_nav_1008_hamburger:focus-visible,
.pub_nav_1008_drawerCloseBtn:focus-visible,
.pub_nav_1008_drawerLink:focus-visible,
.pub_nav_1008_drawerSubLink:focus-visible,
.pub_nav_1008_drawerSecondaryBtn:focus-visible,
.pub_nav_1008_drawerCta:focus-visible {
    outline: 2px solid var(--accent, #2563eb);
    outline-offset: 3px;
    border-radius: var(--r, 6px);
}

/* ── Tablet (1100px) ─────────────────────────────────────── */
@media (max-width: 1100px) {
    .pub_nav_1008_navInner {
gap: var(--space-content-gap, 12px);
    }

    .pub_nav_1008_navLinks {
        gap: 2px;
    }

    .pub_nav_1008_navLink,
    .pub_nav_1008_navLinkBtn {
        padding: 6px 6px;
    }

    .pub_nav_1008_navRight {
        gap: var(--space-content-gap, 4px);
    }

    .pub_nav_1008_loginBtn {
        padding: 5px 8px;
    }

    .pub_nav_1008_navCta {
        padding: 5px 10px;
    }
}

/* ── Tablet / Mobile (768px) ─────────────────────────────── */
@media (max-width: 768px) {
    .pub_nav_1008_navCenter {
        display: none;
    }

    .pub_nav_1008_loginBtn {
        display: none;
    }

    .pub_nav_1008_navCta {
        display: none;
    }

    .pub_nav_1008_hamburger {
        display: flex;
    }
}

/* ── Mobile (480px) ──────────────────────────────────────── */
@media (max-width: 480px) {
    .pub_nav_1008_navInner {
        padding: 0 clamp(12px, 4vw, 16px);
gap: var(--space-content-gap, 12px);
    }
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .pub_nav_1008_navBar,
    .pub_nav_1008_navLink,
    .pub_nav_1008_navLinkBtn,
    .pub_nav_1008_navDropdown,
    .pub_nav_1008_ddItem,
    .pub_nav_1008_loginBtn,
    .pub_nav_1008_navCta,
    .pub_nav_1008_drawerOverlay,
    .pub_nav_1008_mobileDrawer,
    .pub_nav_1008_drawerLink,
    .pub_nav_1008_drawerSubLink,
    .pub_nav_1008_drawerSecondaryBtn,
    .pub_nav_1008_drawerCta {
        transition: none;
    }
}

/* PUB-BLOG-1008 — Aurora Blog Grid
 * 1008 series: white bg + indigo #6366f1 accent · clean content grid
 * JS states: [data-visible='true'] for scroll reveal (SSR only).
 * Dynamic data: blogPosts injected from pageModel (pageType: 'blog') on SSR.
 */

/* ── Root / Section ─────────────────────────────────────────────────────── */
.pub_grid_1008_root {
    --radial-1: rgba(99, 102, 241, 0.06);
    --radial-2: rgba(168, 85, 247, 0.04);
    --badge-border: rgba(99, 102, 241, 0.2);
    --card-radius: 12px;
    --card-shadow: 0 1px 3px var(--shadow-light, rgba(0, 0, 0, 0.06)), 0 1px 2px var(--shadow-lighter, rgba(0, 0, 0, 0.04));
    --card-shadow-hover: 0 10px 25px var(--shadow-hover, rgba(0, 0, 0, 0.08)), 0 4px 10px var(--shadow-hover-light, rgba(0, 0, 0, 0.04));
    --img-h: 200px;
    --t: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    padding: var(--pt, 96px) 24px var(--pb, 96px);
    background: var(--texture-bg, none),
        radial-gradient(ellipse 55% 40% at 100% 0%, var(--radial-1, rgba(99, 102, 241, 0.06)) 0%, transparent 60%),
        radial-gradient(ellipse 40% 30% at 0% 100%, var(--radial-2, rgba(168, 85, 247, 0.04)) 0%, transparent 55%),
        color-mix(in srgb, color-mix(in srgb, var(--bg, #ffffff) calc(var(--material-bg-opacity, 1) * 100%), transparent) calc(var(--material-bg-opacity, 1) * 100%), transparent);
    font-family: var(--font-body, system-ui, -apple-system, sans-serif);
    color: var(--text, #0f172a);
    /* ⚠️ Do NOT add overflow:hidden, transform, or isolation here —
       they create stacking contexts that let blog content paint above
       the navbar (which uses isolation:isolate + traps its z-index). */

    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Container ──────────────────────────────────────────────────────────── */
.pub_grid_1008_container {
    max-width: var(--max-w, 1200px);
    margin-inline: auto;
    padding-inline: 24px;
}

/* ── Section Header ─────────────────────────────────────────────────────── */
.pub_grid_1008_headerWrap {
    text-align: center;
    margin-bottom: 48px;
}

.pub_grid_1008_sectionHeader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-content-gap, 12px);
}

.pub_grid_1008_badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 6px);
    padding: 6px 14px;
    border: 1px solid var(--badge-border, rgba(99, 102, 241, 0.2));
    border-radius: 100px;
    background: var(--badge-bg, #eef2ff);
    color: var(--badge-text, #6366f1);
    font-family: var(--font-body, system-ui, -apple-system, sans-serif);
    font-weight: 600;
    letter-spacing: var(--tracking, 0.04em);
    text-transform: uppercase;
}

.pub_grid_1008_title {
    font-family: var(--font-heading, 'Inter', system-ui, sans-serif);
    font-weight: 700;
    line-height: var(--leading, 1.15);
    color: var(--text, #0f172a);
    letter-spacing: var(--tracking, -0.02em);
    margin: 0;
}

.pub_grid_1008_titleAccent {
    display: block;
    background: linear-gradient(135deg, var(--accent, #6366f1), var(--secondary, #a78bfa));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pub_grid_1008_description {
    line-height: var(--leading, 1.6);
    color: var(--text-muted, #64748b);
    max-width: 580px;
    margin: 8px 0 0;
}

/* ── Blog Grid ──────────────────────────────────────────────────────────── */
.pub_grid_1008_grid {
    display: grid;
    grid-template-columns: repeat(var(--blog-cols, 3), 1fr);
    gap: clamp(16px, 2.5vw, 28px);
}

/* ── Card ───────────────────────────────────────────────────────────────── */
.pub_grid_1008_card {
    display: flex;
    flex-direction: column;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--card-border, #e2e8f0);
    border-radius: var(--card-radius, 12px);
    overflow: hidden;
    transition:
        box-shadow var(--t, 0.25s ease),
        border-color var(--t, 0.25s ease);
}

.pub_grid_1008_card:hover {
    border-color: var(--accent, #6366f1);
}

.pub_grid_1008_cardImage {
    width: 100%;
    height: var(--img-h, 200px);
    object-fit: cover;
    display: block;
    background: linear-gradient(135deg, var(--accent, #6366f1), var(--secondary, #a78bfa));
    /* Gradient overlay for depth — inset shadow, no stacking context */
}

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

.pub_grid_1008_cardContent {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 10px);
    padding: 24px 24px 28px;
    flex: 1;
}

.pub_grid_1008_cardCategory {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 100px;
    background: var(--cat-bg, rgba(99, 102, 241, 0.08));
    color: var(--accent, #6366f1);
    font-size: var(--fs-cat, clamp(10px, 1.1vw, 11px));
    font-weight: 700;
    letter-spacing: var(--tracking, 0.05em);
    text-transform: uppercase;
    text-decoration: none;
    transition: background var(--t, 0.2s ease), color var(--t, 0.2s ease);
}

.pub_grid_1008_cardCategory:hover {
    background: var(--accent, #6366f1);
    color: var(--badge-text, #ffffff);
}

/* Category dot indicator */
.pub_grid_1008_cardCategory::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: var(--radius-full, 50%);
    background: currentColor;
    flex-shrink: 0;
}

.pub_grid_1008_cardTitle {
    font-family: var(--font-heading, 'Inter', system-ui, sans-serif);
    font-size: var(--fs-card-title, clamp(16px, 1.8vw, 19px));
    font-weight: 600;
    line-height: var(--leading, 1.35);
    color: var(--text, #0f172a);
    margin: 0;
    transition: color var(--t, 0.25s ease);
    /* Animated underline effect (no transform) */
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) left 1.1em / 0% 2px no-repeat;
    transition: color var(--t, 0.25s ease), background-size var(--t, 0.25s ease);
}

.pub_grid_1008_card:hover .pub_grid_1008_cardTitle {
    color: var(--accent, #6366f1);
    background-size: 100% 2px;
}

.pub_grid_1008_cardTitle a {
    color: inherit;
    text-decoration: none;
}

.pub_grid_1008_cardExcerpt {
    font-size: var(--fs-body, 14px);
    line-height: var(--leading, 1.65);
    color: var(--text-muted, #64748b);
    margin: 2px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pub_grid_1008_cardMeta {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 6px);
    font-size: var(--fs-meta, 12px);
    color: var(--text-muted, #94a3b8);
    margin-top: auto;
    padding-top: 14px;
    font-weight: 500;
}

/* Dot separator between meta items */
.pub_grid_1008_cardMeta span+span::before {
    content: '·';
    margin: 0 6px;
    font-weight: 700;
    color: var(--border, #cbd5e1);
}

.pub_grid_1008_cardMeta span {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 4px);
}

.pub_grid_1008_cardAuthor {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 10px);
    font-size: var(--fs-author, clamp(12px, 1.2vw, 13px));
    font-weight: 600;
    color: var(--text, #0f172a);
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--border, #eef2f6);
}

/* ImageBlock wrapper inside author (BlogCard passes dynamic class) */
.pub_grid_1008_cardAuthor>div {
    display: flex;
    flex-shrink: 0;
    line-height: var(--leading, 0);
}

.pub_grid_1008_cardAuthor img {
    width: var(--author-img-size, 30px);
    height: var(--author-img-size, 30px);
    border-radius: var(--radius-full, 50%);
    object-fit: cover;
    border: 2px solid var(--border, #eef2f6);
    flex-shrink: 0;
    display: block;
}

.pub_grid_1008_cardAuthor span,
.pub_grid_1008_cardAuthor a {
    line-height: var(--leading, 1);
    color: inherit;
    text-decoration: none;
    transition: color var(--t, 0.2s ease);
}

.pub_grid_1008_cardAuthor a:hover {
    color: var(--accent, #6366f1);
}

/* No avatar fallback — show placeholder circle */
.pub_grid_1008_cardAuthor span:first-child:last-child::before,
.pub_grid_1008_cardAuthor a:first-child:last-child::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full, 50%);
    background: var(--cat-bg, rgba(99, 102, 241, 0.12));
    border: 2px solid var(--border, #eef2f6);
    flex-shrink: 0;
    margin-right: 10px;
    vertical-align: middle;
}

/* ── Tags ─────────────────────────────────────── */
.pub_grid_1008_cardTags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-content-gap, 6px);
    margin-top: 8px;
}

.pub_grid_1008_cardTag {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 100px;
    background: var(--cat-bg, rgba(99, 102, 241, 0.06));
    color: var(--text-muted, #64748b);
    font-size: var(--fs-tag, 11px);
    font-weight: 500;
    text-decoration: none;
    transition: background var(--t, 0.2s ease), color var(--t, 0.2s ease);
}

.pub_grid_1008_cardTag:hover {
    background: var(--accent, #6366f1);
    color: var(--badge-text, #ffffff);
}

/* ── Interactive States ─────────────────────────────────────────────────── */
.pub_grid_1008_card a {
    text-decoration: none;
}

/* ── Empty State Banner (Page Builder) ──────────────────────────────────── */
.pub_grid_1008_emptyStateBanner {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 10px);
    flex-wrap: wrap;
    padding: 12px 18px;
    margin-bottom: 28px;
    border-radius: var(--radius-md, 10px);
    background: var(--cat-bg, rgba(99, 102, 241, 0.06));
    border: 1px dashed var(--cat-border, rgba(99, 102, 241, 0.25));
    color: var(--accent, #6366f1);
    font-size: calc(13px * var(--body-scale, 1));
    font-weight: 500;
    line-height: var(--leading, 1.4);
}

.pub_grid_1008_emptyStateHint {
    color: var(--text-muted, #94a3b8);
    font-weight: 400;
    font-size: calc(12px * var(--body-scale, 1));
}

/* ── Placeholder Card Badge ─────────────────────────────────────────────── */
.pub_grid_1008_placeholderBadge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: var(--z-above, 2);
    /* above card image */
    padding: 3px 8px;
    border-radius: var(--radius-md, 6px);
    background: var(--badge-bg-solid, rgba(99, 102, 241, 0.85));
    color: var(--badge-text, #ffffff);
    font-size: calc(10px * var(--heading-scale, 1));
    font-weight: 600;
    letter-spacing: var(--tracking, 0.03em);
    text-transform: uppercase;
    pointer-events: none;
}

/* ── Pagination ──────────────────────────────────────────────────────────── */
.pub_grid_1008_pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-content-gap, 8px);
    margin-top: 48px;
    padding-top: 28px;
    border-top: none;
    position: relative;
    flex-wrap: wrap;
}

/* Gradient line separator above pagination */
.pub_grid_1008_pagination::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    max-width: 360px;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            var(--border, #e2e8f0) 30%,
            var(--accent, #6366f1) 50%,
            var(--border, #e2e8f0) 70%,
            transparent 100%);
}

.pub_grid_1008_paginationPages {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 4px);
}

.pub_grid_1008_paginationBtn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    padding: 9px 20px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 100px;
    background: var(--card-bg, #ffffff);
    color: var(--text, #0f172a);
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: calc(13px * var(--body-scale, 1));
    font-weight: 500;
    cursor: pointer;
    transition:
        all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    white-space: nowrap;
}

.pub_grid_1008_paginationBtn:hover:not(:disabled) {
    background: var(--card-bg, #ffffff);
    border-color: var(--accent, #6366f1);
    color: var(--accent, #6366f1);
    box-shadow:
        var(--shadow-md, 0 4px 12px rgba(99, 102, 241, 0.12)),
        var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
    transform: translateY(-1px);
}

.pub_grid_1008_paginationBtn:active:not(:disabled) {
    transform: translateY(0);
}

.pub_grid_1008_paginationBtn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.pub_grid_1008_paginationBtn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Hide text label on small screens, show icon only */
@media (max-width: 420px) {
    .pub_grid_1008_paginationBtn span {
        display: none;
    }

    .pub_grid_1008_paginationBtn {
        padding: 9px 14px;
        min-width: 38px;
        justify-content: center;
    }

    .pub_grid_1008_paginationBtn:first-child svg {
        margin: 0;
    }

    .pub_grid_1008_paginationBtn:last-child svg {
        margin: 0;
    }
}

.pub_grid_1008_paginationPage {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 4px;
    border: 1px solid transparent;
    border-radius: var(--radius-md, 10px);
    background: transparent;
    color: var(--text-muted, #64748b);
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: calc(14px * var(--body-scale, 1));
    font-weight: 500;
    cursor: pointer;
    transition:
        all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    position: relative;
}

.pub_grid_1008_paginationPage:hover:not(:disabled) {
    background: var(--cat-bg, rgba(99, 102, 241, 0.05));
    color: var(--accent, #6366f1);
    border-color: var(--cat-border-light, rgba(99, 102, 241, 0.12));
}

.pub_grid_1008_paginationPage:disabled {
    cursor: default;
}

.pub_grid_1008_paginationActive {
    background: linear-gradient(135deg, var(--accent, #6366f1), var(--accent-light, #818cf8));
    border-color: transparent;
    color: var(--badge-text, #ffffff);
    font-weight: 600;
    cursor: default;
    pointer-events: none;
    box-shadow:
        var(--shadow-md, 0 4px 12px rgba(99, 102, 241, 0.25)),
        var(--shadow-sm, 0 1px 3px rgba(99, 102, 241, 0.15));
    transform: scale(1.05);
}

.pub_grid_1008_paginationActive:hover {
    background: linear-gradient(135deg, var(--accent, #6366f1), var(--accent-light, #818cf8));
    color: var(--badge-text, #ffffff);
}

.pub_grid_1008_paginationDots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 38px;
    color: var(--text-muted, #94a3b8);
    font-size: calc(14px * var(--body-scale, 1));
    letter-spacing: var(--tracking, 3px);
    user-select: none;
}

/* ── Media: Tablet (max-width: 1024px) ──────────────────────────────────── */
@media (max-width: 1024px) {
    .pub_grid_1008_grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pub_grid_1008_headerWrap {
        margin-bottom: 36px;
    }

    .pub_grid_1008_pagination::before {
        width: 80%;
    }
}

/* ── Media: Mobile (max-width: 768px) ───────────────────────────────────── */
@media (max-width: 768px) {
    .pub_grid_1008_root {
        padding: var(--pt, 96px) 16px var(--pb, 96px);
    }

    .pub_grid_1008_container {
        padding-inline: 16px;
    }

    .pub_grid_1008_grid {
        grid-template-columns: 1fr;
        gap: var(--space-content-gap, 20px);
    }

    .pub_grid_1008_cardContent {
        padding: 16px 16px 20px;
    }

    .pub_grid_1008_headerWrap {
        margin-bottom: 28px;
    }

    .pub_grid_1008_pagination::before {
        width: 90%;
    }

    .pub_grid_1008_pagination {
        margin-top: 36px;
        padding-top: 24px;
        gap: var(--space-content-gap, 6px);
    }

    .pub_grid_1008_paginationBtn {
        padding: 7px 14px;
        font-size: calc(12px * var(--body-scale, 1));
        gap: var(--space-content-gap, 6px);
        border-radius: 100px;
    }

    .pub_grid_1008_paginationBtn svg {
        width: 12px;
        height: 12px;
    }

    .pub_grid_1008_paginationPage {
        min-width: 34px;
        height: 34px;
        font-size: calc(13px * var(--body-scale, 1));
        border-radius: var(--radius-lg, 8px);
    }

    .pub_grid_1008_paginationActive {
        transform: scale(1.03);
        box-shadow:
            var(--shadow-md, 0 3px 8px rgba(99, 102, 241, 0.2)),
            var(--shadow-sm, 0 1px 2px rgba(99, 102, 241, 0.12));
    }

    .pub_grid_1008_paginationDots {
        min-width: 24px;
        height: 34px;
    }
}

/* ── Media: Small Mobile (max-width: 480px) ─────────────────────────────── */
@media (max-width: 480px) {
    .pub_grid_1008_cardImage {
        height: var(--img-h-mobile, 180px);
    }

    .pub_grid_1008_cardMeta {
        flex-wrap: wrap;
        gap: var(--space-content-gap, 8px);
    }
}

/* ── Reduced Motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pub_grid_1008_card {
        transition: none;
    }

    .pub_grid_1008_card:hover {
        transform: none;
    }
}

/* ============================================================
   PUB-FOOTER-1008 — Universal Footer (4-column grid layout)
   1008 series: #0f172a bg · #6366f1 accent · Inter font
   Layouts: grid | stacked | minimal  (via data-layout attr)
   ============================================================ */

/* ── Root / Section wrapper ─────────────────────────────── */
.pub_footer_1008_root {
    --newsletter-input-bg: rgba(255, 255, 255, 0.06);
    --newsletter-focus-shadow: rgba(99, 102, 241, 0.2);
    --alert-color: #f87171;
    --btn-text: #fff;
    background: var(--texture-bg, none),
        color-mix(in srgb, color-mix(in srgb, var(--bg, #0f172a) calc(var(--material-bg-opacity, 1) * 100%), transparent) calc(var(--material-bg-opacity, 1) * 100%), transparent);
    color: var(--text, #e2e8f0);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    padding-top: var(--pt, 80px);
    padding-bottom: var(--pb, 40px);
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Container ───────────────────────────────────────────── */
.pub_footer_1008_container {
    max-width: var(--max-w, 1200px);
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 3rem);
}

/* ── Main grid ───────────────────────────────────────────── */
.pub_footer_1008_mainGrid {
    display: grid;
    grid-template-columns: 1.8fr 2fr 1fr 1.4fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
}

/* stacked layout overrides */
.pub_footer_1008_root[data-layout="stacked"] .pub_footer_1008_mainGrid {
    grid-template-columns: 1fr;
    gap: var(--space-gap, 2rem);
}

/* minimal layout overrides */
.pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_mainGrid {
    grid-template-columns: 1fr auto;
    gap: var(--space-gap, 2rem);
    align-items: center;
}

.pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_contactCol,
.pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_newsletterCol {
    display: none;
}

/* ── Brand Column ────────────────────────────────────────── */
.pub_footer_1008_brandCol {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.75rem);
}

.pub_footer_1008_brandLogo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 0.5rem);
    color: var(--accent, #6366f1);
    font-family: var(--font-heading, var(--font-body, 'Inter', system-ui, sans-serif));
    font-weight: 700;
    letter-spacing: var(--tracking, -0.02em);
    text-decoration: none;
    margin-bottom: 0.25rem;
    border-radius: var(--radius-sm, 4px);
}

.pub_footer_1008_brandLogo:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 3px;
}

.pub_footer_1008_brandLogo i {
    color: var(--accent, #6366f1);
}

.pub_footer_1008_brandDesc {
    color: var(--text-muted, #94a3b8);
    line-height: var(--leading, 1.65);
    margin: 0;
}

/* ── Social Icons ────────────────────────────────────────── */
.pub_footer_1008_socialRow {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 0.5rem);
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.pub_footer_1008_socialLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-height: 36px;
    border-radius: var(--radius-lg, 8px);
    background: var(--social-bg, rgba(255, 255, 255, 0.08));
    color: var(--text-muted, #94a3b8);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    border: 1px solid var(--footer-border, rgba(255, 255, 255, 0.08));
}

.pub_footer_1008_socialLink:hover {
    background: var(--accent, #6366f1);
    color: var(--social-hover-text, #fff);
    transform: translateY(-2px);
    border-color: var(--accent, #6366f1);
}

.pub_footer_1008_socialLink i {
    font-size: calc(1rem * var(--body-scale, 1));
    line-height: var(--leading, 1);
}

/* ── Links Grid ──────────────────────────────────────────── */
.pub_footer_1008_linksArea {
    /* wrapper for the links grid zone */
}

.pub_footer_1008_linksGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: clamp(1rem, 2vw, 2rem);
}

.pub_footer_1008_linksCol {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Reset browser list defaults inside FooterLinksColumn */
.pub_footer_1008_linksCol ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.25rem);
}

.pub_footer_1008_linksCol li {
    margin: 0;
    padding: 0;
}

/* ── Column Headings ─────────────────────────────────────── */
.pub_footer_1008_colHeading {
    color: var(--text, #e2e8f0);
    font-family: var(--font-heading, var(--font-body, 'Inter', system-ui, sans-serif));
    font-weight: 700;
    letter-spacing: var(--tracking, 0.1em);
    text-transform: uppercase;
    margin: 0 0 0.875rem;
}

/* ── Nav Column Links ────────────────────────────────────── */
.pub_footer_1008_footerLink {
    display: inline-block;
    color: var(--text-muted, #94a3b8);
    text-decoration: none;
    line-height: var(--leading, 1.5);
    padding: 0.125rem 0;
    border-radius: var(--radius-sm, 4px);
    transition: color 180ms ease;
}

.pub_footer_1008_footerLink:hover {
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_footerLink:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 2px;
    color: var(--text, #e2e8f0);
}

/* ── Contact Column ──────────────────────────────────────── */
.pub_footer_1008_contactCol {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.25rem);
}

.pub_footer_1008_contactItem {
    display: flex;
    align-items: flex-start;
    gap: var(--space-content-gap, 0.5rem);
    color: var(--text-muted, #94a3b8);
    line-height: var(--leading, 1.5);
    margin-bottom: 0.5rem;
}

.pub_footer_1008_contactIcon {
    color: var(--accent, #6366f1);
    font-size: calc(1rem * var(--body-scale, 1));
    margin-top: 0.1em;
    flex-shrink: 0;
}

.pub_footer_1008_contactText {
    color: var(--text-muted, #94a3b8);
    text-decoration: none;
    border-radius: var(--radius-sm, 4px);
    transition: color 180ms ease;
}

.pub_footer_1008_contactText:hover {
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_contactText:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 2px;
    color: var(--text, #e2e8f0);
}

/* ── Newsletter Column ───────────────────────────────────── */
.pub_footer_1008_newsletterCol {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.75rem);
}

/* Space out the input and button inside the newsletter form */
.pub_footer_1008_newsletterCol form {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.625rem);
}

/* Email validation error message — min-height reserves 1 line always to prevent CLS */
.pub_footer_1008_newsletterCol form span[role="alert"] {
    display: block;
    min-height: calc(0.8125rem * 1.4);
    color: var(--alert-color, #f87171);
    font-size: calc(0.8125rem * var(--body-scale, 1));
    line-height: var(--leading, 1.4);
}

.pub_footer_1008_newsletterInput {
    width: 100%;
    background: var(--newsletter-input-bg, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
    border-radius: var(--radius-md, 6px);
    color: var(--text, #e2e8f0);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: calc(0.9375rem * var(--body-scale, 1));
    padding: 0.625rem 0.875rem;
    outline: none;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.pub_footer_1008_newsletterInput:focus {
    border-color: var(--accent, #6366f1);
}

.pub_footer_1008_newsletterInput::placeholder {
    color: var(--text-muted, #64748b);
}

.pub_footer_1008_newsletterBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent, #6366f1);
    color: var(--btn-text, #fff);
    border: none;
    border-radius: var(--radius-md, 6px);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: calc(0.9375rem * var(--body-scale, 1));
    font-weight: 600;
    letter-spacing: var(--tracking, -0.01em);
    padding: 0.625rem 1.25rem;
    cursor: pointer;
    transition: opacity 150ms ease;
}

.pub_footer_1008_newsletterBtn:hover {
    opacity: 0.88;
}

.pub_footer_1008_newsletterBtn:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 3px;
    opacity: 0.88;
}

/* ── Map ─────────────────────────────────────────────────── */
.pub_footer_1008_mapWrapper {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: var(--radius-lg, 8px);
    overflow: hidden;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

/* ── App Badges ──────────────────────────────────────────── */
.pub_footer_1008_appBadges {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 1rem);
    flex-wrap: wrap;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* ── Divider ─────────────────────────────────────────────── */
.pub_footer_1008_divider {
    border: none;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    margin: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(1rem, 2vw, 1.5rem);
}

/* ── Bottom Bar ──────────────────────────────────────────── */
.pub_footer_1008_bottomBarWrapper {
    background: var(--bottom-bg, transparent);
}

.pub_footer_1008_bottomBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-content-gap, 0.75rem);
}

.pub_footer_1008_copyright {
    color: var(--text-muted, #64748b);
    margin: 0;
    line-height: var(--leading, 1.5);
}

.pub_footer_1008_legalLinks {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.125rem;
}

.pub_footer_1008_legalLink {
    color: var(--text-muted, #64748b);
    text-decoration: none;
    border-radius: var(--radius-sm, 4px);
    padding: 0.125rem 0.25rem;
    transition: color 180ms ease;
}

.pub_footer_1008_legalLink:hover {
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_legalLink:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 2px;
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_legalSep {
    color: var(--text-muted, #475569);
    font-size: calc(0.875rem * var(--body-scale, 1));
    user-select: none;
}

/* ── Certifications Row ──────────────────────────────────── */
.pub_footer_1008_certsRow {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 1rem);
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* ── Interactive states ──────────────────────────────────── */

/* ── @media 1024px ───────────────────────────────────────── */
@media (max-width: 1024px) {
    .pub_footer_1008_mainGrid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-gap, 2rem);
    }

    .pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_mainGrid {
        grid-template-columns: 1fr;
    }
}

/* ── @media 768px ────────────────────────────────────────── */
@media (max-width: 768px) {
    .pub_footer_1008_mainGrid {
        grid-template-columns: 1fr;
        gap: var(--space-gap, 1.75rem);
    }

    .pub_footer_1008_linksGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pub_footer_1008_bottomBar {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-content-gap, 0.5rem);
    }
}

/* ── @media 480px ────────────────────────────────────────── */
@media (max-width: 480px) {
    .pub_footer_1008_linksGrid {
        grid-template-columns: 1fr;
    }

    .pub_footer_1008_appBadges {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── prefers-reduced-motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .pub_footer_1008_footerLink,
    .pub_footer_1008_contactText,
    .pub_footer_1008_legalLink,
    .pub_footer_1008_brandLogo,
    .pub_footer_1008_newsletterInput,
    .pub_footer_1008_newsletterBtn {
        transition: none;
    }
}

/* Page: authors-copy1 */
/* ============================================================
   PUB-NAV-1008 — Clarity SaaS Nav
   Series 1008 · Full-width sticky nav · Light theme · Inter font
   State: data-scrolled on .navBar  |  data-open on .mobileDrawer/.drawerOverlay
   ============================================================ */

/* ── Root ────────────────────────────────────────────────── */
.pub_nav_1008_navRoot {
    /* Scoped design tokens — not user-controlled */
    --t: 0.2s ease;
    --t-slow: 0.32s ease;
    --r: 6px;
    --r-lg: 10px;
    --r-btn: 8px;
    --fs-brand: clamp(15px, 1.5vw, 17px);
    --fs-nav: clamp(13px, 1.3vw, 14px);
    --fs-dd: clamp(12px, 1.2vw, 13.5px);
    --fs-drawer: clamp(14px, 1.4vw, 15px);
    --fs-icon: clamp(18px, 1.5vw, 20px);
    --fs-caret: 11px;
    --hover-bg: rgba(37, 99, 235, 0.06);

    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    isolation: isolate;
    /* ✅ Ensure nav stacking context sits above page content */
    position: relative;
    z-index: var(--z-nav, 1000);
    background-image: var(--texture-bg, none);
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Full-width Bar ──────────────────────────────────────── */
.pub_nav_1008_navBar {
    position: var(--navbar-position, fixed);
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav, 1000);
    /* above page content, below drawer overlay */
    background-color: var(--bg, #ffffff);
    border-bottom: 1px solid var(--border, #e5e7eb);
    transition:
        border-color var(--t, 0.2s ease),
        box-shadow var(--t, 0.2s ease);
    padding-top: var(--pt, 0);
    padding-bottom: var(--pb, 0);
}

.pub_nav_1008_navBar[data-scrolled='true'] {
    border-color: var(--border, #e5e7eb);
}

/* ── Inner container ─────────────────────────────────────── */
.pub_nav_1008_navInner {
    max-width: var(--max-w, 1200px);
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 40px);
    min-height: var(--nav-h, 72px);
    display: flex;
    align-items: center;
    justify-content: space-between;
gap: var(--space-gap, 32px);
}

/* ── Logo ────────────────────────────────────────────────── */
.pub_nav_1008_logo {
  /* composed: logo from NavBase.module.css */
  display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity var(--t, 0.22s ease);
    /* gap, margin, color: set in component */
    gap: var(--space-content-gap, 8px);
    color: var(--text, #374151);
    text-decoration: none;
}

.pub_nav_1008_logoMark {
    font-size: var(--fs-icon, clamp(18px, 1.5vw, 20px));
    color: var(--cta-bg, #2563eb);
    line-height: var(--leading, 1);
}

.pub_nav_1008_logoWord {
    font-size: var(--fs-brand, clamp(15px, 1.5vw, 17px));
    font-weight: 700;
    letter-spacing: var(--tracking, -0.02em);
    color: var(--text, #374151);
    white-space: nowrap;
}

.pub_nav_1008_logoImg {
  /* composed: logoImg from NavBase.module.css */
  object-fit: contain;
    display: block;
    /* width, height: set via CSS vars in component */
    width: var(--brand-image-width, 160px);
    height: var(--brand-image-height, 40px);
}

/* ── Center: Desktop nav links ───────────────────────────── */
.pub_nav_1008_navCenter {
    flex: 1;
    display: flex;
    justify-content: center;
}

.pub_nav_1008_navLinks {
  /* composed: navLinks from NavBase.module.css */
  display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    /* gap: set in component */
    gap: var(--space-content-gap, 4px);
}

.pub_nav_1008_dropWrap {
    position: relative;
}

.pub_nav_1008_navLink {
  /* composed: navLink from NavBase.module.css */
  display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: color var(--t, 0.22s ease), background-color var(--t, 0.22s ease);
    /* padding, font-size, font-weight, color, border-radius: set in component */
    padding: 6px 10px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 500;
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
}

.pub_nav_1008_navLink:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_navLinkBtn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 4px);
    padding: 6px 10px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 500;
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    background: none;
    border: none;
    cursor: pointer;
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
}

.pub_nav_1008_navLinkBtn:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_navCaret {
    font-size: var(--fs-caret, 11px);
    transition: transform var(--t, 0.2s ease);
}

/* ── Dropdown panel ──────────────────────────────────────── */
.pub_nav_1008_navDropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 160px;
    background-color: var(--bg, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--r-lg, 10px);
    padding: 6px;
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* open/close via data-open */
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-6px);
    transition:
        opacity var(--t, 0.2s ease),
        transform var(--t, 0.2s ease);
    z-index: var(--z-dropdown, 1200);
    /* above nav links, below sticky bar */
}

.pub_nav_1008_navDropdown[data-open='true'] {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.pub_nav_1008_ddItem {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    padding: 8px 12px;
    font-size: var(--fs-dd, clamp(12px, 1.2vw, 13.5px));
    font-weight: 500;
    color: var(--text, #374151);
    text-decoration: none;
    border-radius: var(--r, 6px);
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
    white-space: nowrap;
}

.pub_nav_1008_ddItem:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

/* ── Right area ──────────────────────────────────────────── */
.pub_nav_1008_navRight {
  /* composed: navRight from NavBase.module.css */
  display: flex;
    align-items: center;
    flex-shrink: 0;
    /* gap, margin: set in component */
    gap: var(--space-content-gap, 8px);
}

.pub_nav_1008_loginBtn {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 500;
    color: var(--text, #374151);
    text-decoration: none;
    border-radius: var(--r, 6px);
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
    white-space: nowrap;
}

.pub_nav_1008_loginBtn:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_navCta {
  /* composed: navCta from NavBase.module.css */
  display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: background-color var(--t, 0.22s ease), transform var(--t, 0.22s ease);
    /* padding, background, color, border-radius, font: set in component */
    padding: 7px 18px;
    background-color: var(--cta-bg, #2563eb);
    color: var(--cta-text, #ffffff);
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 600;
    border-radius: var(--r-btn, 8px);
    white-space: nowrap;
}

.pub_nav_1008_navCta:hover {
    background-color: var(--cta-hover, rgba(37, 99, 235, 0.88));
    transform: translateY(-1px);
}

/* ── Hamburger ───────────────────────────────────────────── */
.pub_nav_1008_hamburger {
  /* composed: hamburger from NavBase.module.css */
  display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    transition: background-color var(--t, 0.22s ease);
    width: 36px;
    min-height: var(--hamburger-h, 36px);
    font-size: var(--fs-icon, clamp(18px, 1.5vw, 20px));
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    display: none;
    /* visible on mobile via media query */
}

.pub_nav_1008_hamburger:hover {
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_hamburgerLine {
  /* composed: hamburgerLine from NavBase.module.css */
  display: block;
    transition: transform var(--t, 0.22s ease), opacity var(--t, 0.22s ease);
    width: 20px;
    height: 2px;
    background-color: var(--text, #374151);
    border-radius: 2px;
}

/* ── Drawer Overlay ──────────────────────────────────────── */
.pub_nav_1008_drawerOverlay {
  /* composed: drawerOverlay from NavBase.module.css */
  inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t, 0.22s ease), visibility var(--t, 0.22s ease);
    /* position, z-index, background-color: set in component */
    position: var(--drawer-position, fixed);
    z-index: var(--z-drawer, 1100);
    /* above sticky navbar, below drawer panel */
    background-color: var(--overlay-bg, rgba(17, 24, 39, 0.4));
}

.pub_nav_1008_drawerOverlay[data-open='true'] {
    opacity: 1;
    visibility: visible;
}

/* ── Mobile Drawer ───────────────────────────────────────── */
.pub_nav_1008_mobileDrawer {
  /* composed: mobileDrawer from NavBase.module.css */
  top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--t-slow, 0.36s ease);
    overflow-y: auto;
    /* position, z-index, width, background-color, border, box-shadow: set in component */
    position: var(--drawer-position, fixed);
    z-index: var(--z-drawer, 1100);
    /* above overlay, topmost drawer layer */
    width: min(320px, 85vw);
    background-color: var(--bg, #ffffff);
    border-left: 1px solid var(--border, #e5e7eb);
}

.pub_nav_1008_mobileDrawer[data-open='true'] {
    transform: translateX(0);
}

/* ── Drawer Header ───────────────────────────────────────── */
.pub_nav_1008_drawerHeader {
  /* composed: drawerHeader from NavBase.module.css */
  display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    /* padding, border: set in component */
    padding: 18px 20px;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.pub_nav_1008_drawerBrand {
  /* composed: drawerBrand from NavBase.module.css */
  display: flex;
    align-items: center;
    /* gap, font-family, font-size, color: set in component */
    gap: var(--space-content-gap, 8px);
    font-size: var(--fs-brand, clamp(15px, 1.5vw, 17px));
    font-weight: 700;
    color: var(--text, #374151);
}

.pub_nav_1008_drawerBrandMark {
    font-size: var(--fs-icon, clamp(18px, 1.5vw, 20px));
    color: var(--cta-bg, #2563eb);
}

.pub_nav_1008_drawerCloseBtn {
  /* composed: drawerCloseBtn from NavBase.module.css */
  display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color var(--t, 0.22s ease);
    /* width, height, font-size, color: set in component */
    width: 32px;
    min-height: var(--close-btn-h, 32px);
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
}

.pub_nav_1008_drawerCloseBtn:hover {
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

/* ── Drawer Links ────────────────────────────────────────── */
.pub_nav_1008_drawerLinks {
  /* composed: drawerLinks from NavBase.module.css */
  flex: 1;
    display: flex;
    flex-direction: column;
    /* padding: set in component */
    padding: 12px 12px;
    gap: 2px;
}

.pub_nav_1008_drawerLink {
  /* composed: drawerLink from NavBase.module.css */
  display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: color var(--t, 0.22s ease), background-color var(--t, 0.22s ease);
    /* padding, font-size, font-weight, color, font-family, border-radius: set in component */
    padding: 10px 12px;
    font-size: var(--fs-drawer, clamp(14px, 1.4vw, 15px));
    font-weight: 500;
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
}

.pub_nav_1008_drawerLink:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_drawerCaret {
  /* composed: drawerCaret from NavBase.module.css */
  transition: transform var(--t, 0.22s ease);
    /* font-size: set in component */
    font-size: var(--fs-caret, 11px);
}

.pub_nav_1008_drawerSub {
  /* composed: drawerSub from NavBase.module.css */
  max-height: 0;
    overflow: hidden;
    transition: max-height var(--t-slow, 0.36s ease);
    padding-left: 12px;
}

.pub_nav_1008_drawerSubLink {
  /* composed: drawerSubLink from NavBase.module.css */
  display: block;
    text-decoration: none;
    transition: color var(--t, 0.22s ease), background-color var(--t, 0.22s ease);
    /* padding, font-size, color: set in component */
    padding: 8px 12px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    display: block;
}

.pub_nav_1008_drawerSubLink:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

/* ── Drawer Footer ───────────────────────────────────────── */
.pub_nav_1008_drawerFooter {
  /* composed: drawerFooter from NavBase.module.css */
  flex-shrink: 0;
    /* padding, border: set in component */
    padding: 16px 20px;
    border-top: 1px solid var(--border, #e5e7eb);
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 10px);
}

.pub_nav_1008_drawerSecondaryBtn {
    display: block;
    text-align: center;
    padding: 10px 20px;
    font-size: var(--fs-drawer, clamp(14px, 1.4vw, 15px));
    font-weight: 500;
    color: var(--text, #374151);
    text-decoration: none;
    border-radius: var(--r-btn, 8px);
    border: 1px solid var(--border, #e5e7eb);
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
}

.pub_nav_1008_drawerSecondaryBtn:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_drawerCta {
  /* composed: drawerCta from NavBase.module.css */
  display: block;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--t, 0.22s ease);
    /* padding, background, color, border-radius, font: set in component */
    padding: 11px 20px;
    background-color: var(--cta-bg, #2563eb);
    color: var(--cta-text, #ffffff);
    font-size: var(--fs-drawer, clamp(14px, 1.4vw, 15px));
    font-weight: 600;
    border-radius: var(--r-btn, 8px);
    text-align: center;
}

.pub_nav_1008_drawerCta:hover {
    background-color: var(--cta-hover, rgba(37, 99, 235, 0.88));
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */

/* ── Focus states (accessibility — required) ─────────────── */
.pub_nav_1008_navLink:focus-visible,
.pub_nav_1008_navLinkBtn:focus-visible,
.pub_nav_1008_loginBtn:focus-visible,
.pub_nav_1008_navCta:focus-visible,
.pub_nav_1008_hamburger:focus-visible,
.pub_nav_1008_drawerCloseBtn:focus-visible,
.pub_nav_1008_drawerLink:focus-visible,
.pub_nav_1008_drawerSubLink:focus-visible,
.pub_nav_1008_drawerSecondaryBtn:focus-visible,
.pub_nav_1008_drawerCta:focus-visible {
    outline: 2px solid var(--accent, #2563eb);
    outline-offset: 3px;
    border-radius: var(--r, 6px);
}

/* ── Tablet (1100px) ─────────────────────────────────────── */
@media (max-width: 1100px) {
    .pub_nav_1008_navInner {
gap: var(--space-content-gap, 12px);
    }

    .pub_nav_1008_navLinks {
        gap: 2px;
    }

    .pub_nav_1008_navLink,
    .pub_nav_1008_navLinkBtn {
        padding: 6px 6px;
    }

    .pub_nav_1008_navRight {
        gap: var(--space-content-gap, 4px);
    }

    .pub_nav_1008_loginBtn {
        padding: 5px 8px;
    }

    .pub_nav_1008_navCta {
        padding: 5px 10px;
    }
}

/* ── Tablet / Mobile (768px) ─────────────────────────────── */
@media (max-width: 768px) {
    .pub_nav_1008_navCenter {
        display: none;
    }

    .pub_nav_1008_loginBtn {
        display: none;
    }

    .pub_nav_1008_navCta {
        display: none;
    }

    .pub_nav_1008_hamburger {
        display: flex;
    }
}

/* ── Mobile (480px) ──────────────────────────────────────── */
@media (max-width: 480px) {
    .pub_nav_1008_navInner {
        padding: 0 clamp(12px, 4vw, 16px);
gap: var(--space-content-gap, 12px);
    }
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .pub_nav_1008_navBar,
    .pub_nav_1008_navLink,
    .pub_nav_1008_navLinkBtn,
    .pub_nav_1008_navDropdown,
    .pub_nav_1008_ddItem,
    .pub_nav_1008_loginBtn,
    .pub_nav_1008_navCta,
    .pub_nav_1008_drawerOverlay,
    .pub_nav_1008_mobileDrawer,
    .pub_nav_1008_drawerLink,
    .pub_nav_1008_drawerSubLink,
    .pub_nav_1008_drawerSecondaryBtn,
    .pub_nav_1008_drawerCta {
        transition: none;
    }
}

/* PUB-BLOG-1008 — Aurora Blog Grid
 * 1008 series: white bg + indigo #6366f1 accent · clean content grid
 * JS states: [data-visible='true'] for scroll reveal (SSR only).
 * Dynamic data: blogPosts injected from pageModel (pageType: 'blog') on SSR.
 */

/* ── Root / Section ─────────────────────────────────────────────────────── */
.pub_grid_1008_root {
    --radial-1: rgba(99, 102, 241, 0.06);
    --radial-2: rgba(168, 85, 247, 0.04);
    --badge-border: rgba(99, 102, 241, 0.2);
    --card-radius: 12px;
    --card-shadow: 0 1px 3px var(--shadow-light, rgba(0, 0, 0, 0.06)), 0 1px 2px var(--shadow-lighter, rgba(0, 0, 0, 0.04));
    --card-shadow-hover: 0 10px 25px var(--shadow-hover, rgba(0, 0, 0, 0.08)), 0 4px 10px var(--shadow-hover-light, rgba(0, 0, 0, 0.04));
    --img-h: 200px;
    --t: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    padding: var(--pt, 96px) 24px var(--pb, 96px);
    background: var(--texture-bg, none),
        radial-gradient(ellipse 55% 40% at 100% 0%, var(--radial-1, rgba(99, 102, 241, 0.06)) 0%, transparent 60%),
        radial-gradient(ellipse 40% 30% at 0% 100%, var(--radial-2, rgba(168, 85, 247, 0.04)) 0%, transparent 55%),
        color-mix(in srgb, color-mix(in srgb, var(--bg, #ffffff) calc(var(--material-bg-opacity, 1) * 100%), transparent) calc(var(--material-bg-opacity, 1) * 100%), transparent);
    font-family: var(--font-body, system-ui, -apple-system, sans-serif);
    color: var(--text, #0f172a);
    /* ⚠️ Do NOT add overflow:hidden, transform, or isolation here —
       they create stacking contexts that let blog content paint above
       the navbar (which uses isolation:isolate + traps its z-index). */

    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Container ──────────────────────────────────────────────────────────── */
.pub_grid_1008_container {
    max-width: var(--max-w, 1200px);
    margin-inline: auto;
    padding-inline: 24px;
}

/* ── Section Header ─────────────────────────────────────────────────────── */
.pub_grid_1008_headerWrap {
    text-align: center;
    margin-bottom: 48px;
}

.pub_grid_1008_sectionHeader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-content-gap, 12px);
}

.pub_grid_1008_badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 6px);
    padding: 6px 14px;
    border: 1px solid var(--badge-border, rgba(99, 102, 241, 0.2));
    border-radius: 100px;
    background: var(--badge-bg, #eef2ff);
    color: var(--badge-text, #6366f1);
    font-family: var(--font-body, system-ui, -apple-system, sans-serif);
    font-weight: 600;
    letter-spacing: var(--tracking, 0.04em);
    text-transform: uppercase;
}

.pub_grid_1008_title {
    font-family: var(--font-heading, 'Inter', system-ui, sans-serif);
    font-weight: 700;
    line-height: var(--leading, 1.15);
    color: var(--text, #0f172a);
    letter-spacing: var(--tracking, -0.02em);
    margin: 0;
}

.pub_grid_1008_titleAccent {
    display: block;
    background: linear-gradient(135deg, var(--accent, #6366f1), var(--secondary, #a78bfa));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pub_grid_1008_description {
    line-height: var(--leading, 1.6);
    color: var(--text-muted, #64748b);
    max-width: 580px;
    margin: 8px 0 0;
}

/* ── Blog Grid ──────────────────────────────────────────────────────────── */
.pub_grid_1008_grid {
    display: grid;
    grid-template-columns: repeat(var(--blog-cols, 3), 1fr);
    gap: clamp(16px, 2.5vw, 28px);
}

/* ── Card ───────────────────────────────────────────────────────────────── */
.pub_grid_1008_card {
    display: flex;
    flex-direction: column;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--card-border, #e2e8f0);
    border-radius: var(--card-radius, 12px);
    overflow: hidden;
    transition:
        box-shadow var(--t, 0.25s ease),
        border-color var(--t, 0.25s ease);
}

.pub_grid_1008_card:hover {
    border-color: var(--accent, #6366f1);
}

.pub_grid_1008_cardImage {
    width: 100%;
    height: var(--img-h, 200px);
    object-fit: cover;
    display: block;
    background: linear-gradient(135deg, var(--accent, #6366f1), var(--secondary, #a78bfa));
    /* Gradient overlay for depth — inset shadow, no stacking context */
}

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

.pub_grid_1008_cardContent {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 10px);
    padding: 24px 24px 28px;
    flex: 1;
}

.pub_grid_1008_cardCategory {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 100px;
    background: var(--cat-bg, rgba(99, 102, 241, 0.08));
    color: var(--accent, #6366f1);
    font-size: var(--fs-cat, clamp(10px, 1.1vw, 11px));
    font-weight: 700;
    letter-spacing: var(--tracking, 0.05em);
    text-transform: uppercase;
    text-decoration: none;
    transition: background var(--t, 0.2s ease), color var(--t, 0.2s ease);
}

.pub_grid_1008_cardCategory:hover {
    background: var(--accent, #6366f1);
    color: var(--badge-text, #ffffff);
}

/* Category dot indicator */
.pub_grid_1008_cardCategory::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: var(--radius-full, 50%);
    background: currentColor;
    flex-shrink: 0;
}

.pub_grid_1008_cardTitle {
    font-family: var(--font-heading, 'Inter', system-ui, sans-serif);
    font-size: var(--fs-card-title, clamp(16px, 1.8vw, 19px));
    font-weight: 600;
    line-height: var(--leading, 1.35);
    color: var(--text, #0f172a);
    margin: 0;
    transition: color var(--t, 0.25s ease);
    /* Animated underline effect (no transform) */
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) left 1.1em / 0% 2px no-repeat;
    transition: color var(--t, 0.25s ease), background-size var(--t, 0.25s ease);
}

.pub_grid_1008_card:hover .pub_grid_1008_cardTitle {
    color: var(--accent, #6366f1);
    background-size: 100% 2px;
}

.pub_grid_1008_cardTitle a {
    color: inherit;
    text-decoration: none;
}

.pub_grid_1008_cardExcerpt {
    font-size: var(--fs-body, 14px);
    line-height: var(--leading, 1.65);
    color: var(--text-muted, #64748b);
    margin: 2px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pub_grid_1008_cardMeta {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 6px);
    font-size: var(--fs-meta, 12px);
    color: var(--text-muted, #94a3b8);
    margin-top: auto;
    padding-top: 14px;
    font-weight: 500;
}

/* Dot separator between meta items */
.pub_grid_1008_cardMeta span+span::before {
    content: '·';
    margin: 0 6px;
    font-weight: 700;
    color: var(--border, #cbd5e1);
}

.pub_grid_1008_cardMeta span {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 4px);
}

.pub_grid_1008_cardAuthor {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 10px);
    font-size: var(--fs-author, clamp(12px, 1.2vw, 13px));
    font-weight: 600;
    color: var(--text, #0f172a);
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--border, #eef2f6);
}

/* ImageBlock wrapper inside author (BlogCard passes dynamic class) */
.pub_grid_1008_cardAuthor>div {
    display: flex;
    flex-shrink: 0;
    line-height: var(--leading, 0);
}

.pub_grid_1008_cardAuthor img {
    width: var(--author-img-size, 30px);
    height: var(--author-img-size, 30px);
    border-radius: var(--radius-full, 50%);
    object-fit: cover;
    border: 2px solid var(--border, #eef2f6);
    flex-shrink: 0;
    display: block;
}

.pub_grid_1008_cardAuthor span,
.pub_grid_1008_cardAuthor a {
    line-height: var(--leading, 1);
    color: inherit;
    text-decoration: none;
    transition: color var(--t, 0.2s ease);
}

.pub_grid_1008_cardAuthor a:hover {
    color: var(--accent, #6366f1);
}

/* No avatar fallback — show placeholder circle */
.pub_grid_1008_cardAuthor span:first-child:last-child::before,
.pub_grid_1008_cardAuthor a:first-child:last-child::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full, 50%);
    background: var(--cat-bg, rgba(99, 102, 241, 0.12));
    border: 2px solid var(--border, #eef2f6);
    flex-shrink: 0;
    margin-right: 10px;
    vertical-align: middle;
}

/* ── Tags ─────────────────────────────────────── */
.pub_grid_1008_cardTags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-content-gap, 6px);
    margin-top: 8px;
}

.pub_grid_1008_cardTag {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 100px;
    background: var(--cat-bg, rgba(99, 102, 241, 0.06));
    color: var(--text-muted, #64748b);
    font-size: var(--fs-tag, 11px);
    font-weight: 500;
    text-decoration: none;
    transition: background var(--t, 0.2s ease), color var(--t, 0.2s ease);
}

.pub_grid_1008_cardTag:hover {
    background: var(--accent, #6366f1);
    color: var(--badge-text, #ffffff);
}

/* ── Interactive States ─────────────────────────────────────────────────── */
.pub_grid_1008_card a {
    text-decoration: none;
}

/* ── Empty State Banner (Page Builder) ──────────────────────────────────── */
.pub_grid_1008_emptyStateBanner {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 10px);
    flex-wrap: wrap;
    padding: 12px 18px;
    margin-bottom: 28px;
    border-radius: var(--radius-md, 10px);
    background: var(--cat-bg, rgba(99, 102, 241, 0.06));
    border: 1px dashed var(--cat-border, rgba(99, 102, 241, 0.25));
    color: var(--accent, #6366f1);
    font-size: calc(13px * var(--body-scale, 1));
    font-weight: 500;
    line-height: var(--leading, 1.4);
}

.pub_grid_1008_emptyStateHint {
    color: var(--text-muted, #94a3b8);
    font-weight: 400;
    font-size: calc(12px * var(--body-scale, 1));
}

/* ── Placeholder Card Badge ─────────────────────────────────────────────── */
.pub_grid_1008_placeholderBadge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: var(--z-above, 2);
    /* above card image */
    padding: 3px 8px;
    border-radius: var(--radius-md, 6px);
    background: var(--badge-bg-solid, rgba(99, 102, 241, 0.85));
    color: var(--badge-text, #ffffff);
    font-size: calc(10px * var(--heading-scale, 1));
    font-weight: 600;
    letter-spacing: var(--tracking, 0.03em);
    text-transform: uppercase;
    pointer-events: none;
}

/* ── Pagination ──────────────────────────────────────────────────────────── */
.pub_grid_1008_pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-content-gap, 8px);
    margin-top: 48px;
    padding-top: 28px;
    border-top: none;
    position: relative;
    flex-wrap: wrap;
}

/* Gradient line separator above pagination */
.pub_grid_1008_pagination::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    max-width: 360px;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            var(--border, #e2e8f0) 30%,
            var(--accent, #6366f1) 50%,
            var(--border, #e2e8f0) 70%,
            transparent 100%);
}

.pub_grid_1008_paginationPages {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 4px);
}

.pub_grid_1008_paginationBtn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    padding: 9px 20px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 100px;
    background: var(--card-bg, #ffffff);
    color: var(--text, #0f172a);
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: calc(13px * var(--body-scale, 1));
    font-weight: 500;
    cursor: pointer;
    transition:
        all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    white-space: nowrap;
}

.pub_grid_1008_paginationBtn:hover:not(:disabled) {
    background: var(--card-bg, #ffffff);
    border-color: var(--accent, #6366f1);
    color: var(--accent, #6366f1);
    box-shadow:
        var(--shadow-md, 0 4px 12px rgba(99, 102, 241, 0.12)),
        var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
    transform: translateY(-1px);
}

.pub_grid_1008_paginationBtn:active:not(:disabled) {
    transform: translateY(0);
}

.pub_grid_1008_paginationBtn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.pub_grid_1008_paginationBtn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Hide text label on small screens, show icon only */
@media (max-width: 420px) {
    .pub_grid_1008_paginationBtn span {
        display: none;
    }

    .pub_grid_1008_paginationBtn {
        padding: 9px 14px;
        min-width: 38px;
        justify-content: center;
    }

    .pub_grid_1008_paginationBtn:first-child svg {
        margin: 0;
    }

    .pub_grid_1008_paginationBtn:last-child svg {
        margin: 0;
    }
}

.pub_grid_1008_paginationPage {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 4px;
    border: 1px solid transparent;
    border-radius: var(--radius-md, 10px);
    background: transparent;
    color: var(--text-muted, #64748b);
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: calc(14px * var(--body-scale, 1));
    font-weight: 500;
    cursor: pointer;
    transition:
        all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    position: relative;
}

.pub_grid_1008_paginationPage:hover:not(:disabled) {
    background: var(--cat-bg, rgba(99, 102, 241, 0.05));
    color: var(--accent, #6366f1);
    border-color: var(--cat-border-light, rgba(99, 102, 241, 0.12));
}

.pub_grid_1008_paginationPage:disabled {
    cursor: default;
}

.pub_grid_1008_paginationActive {
    background: linear-gradient(135deg, var(--accent, #6366f1), var(--accent-light, #818cf8));
    border-color: transparent;
    color: var(--badge-text, #ffffff);
    font-weight: 600;
    cursor: default;
    pointer-events: none;
    box-shadow:
        var(--shadow-md, 0 4px 12px rgba(99, 102, 241, 0.25)),
        var(--shadow-sm, 0 1px 3px rgba(99, 102, 241, 0.15));
    transform: scale(1.05);
}

.pub_grid_1008_paginationActive:hover {
    background: linear-gradient(135deg, var(--accent, #6366f1), var(--accent-light, #818cf8));
    color: var(--badge-text, #ffffff);
}

.pub_grid_1008_paginationDots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 38px;
    color: var(--text-muted, #94a3b8);
    font-size: calc(14px * var(--body-scale, 1));
    letter-spacing: var(--tracking, 3px);
    user-select: none;
}

/* ── Media: Tablet (max-width: 1024px) ──────────────────────────────────── */
@media (max-width: 1024px) {
    .pub_grid_1008_grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pub_grid_1008_headerWrap {
        margin-bottom: 36px;
    }

    .pub_grid_1008_pagination::before {
        width: 80%;
    }
}

/* ── Media: Mobile (max-width: 768px) ───────────────────────────────────── */
@media (max-width: 768px) {
    .pub_grid_1008_root {
        padding: var(--pt, 96px) 16px var(--pb, 96px);
    }

    .pub_grid_1008_container {
        padding-inline: 16px;
    }

    .pub_grid_1008_grid {
        grid-template-columns: 1fr;
        gap: var(--space-content-gap, 20px);
    }

    .pub_grid_1008_cardContent {
        padding: 16px 16px 20px;
    }

    .pub_grid_1008_headerWrap {
        margin-bottom: 28px;
    }

    .pub_grid_1008_pagination::before {
        width: 90%;
    }

    .pub_grid_1008_pagination {
        margin-top: 36px;
        padding-top: 24px;
        gap: var(--space-content-gap, 6px);
    }

    .pub_grid_1008_paginationBtn {
        padding: 7px 14px;
        font-size: calc(12px * var(--body-scale, 1));
        gap: var(--space-content-gap, 6px);
        border-radius: 100px;
    }

    .pub_grid_1008_paginationBtn svg {
        width: 12px;
        height: 12px;
    }

    .pub_grid_1008_paginationPage {
        min-width: 34px;
        height: 34px;
        font-size: calc(13px * var(--body-scale, 1));
        border-radius: var(--radius-lg, 8px);
    }

    .pub_grid_1008_paginationActive {
        transform: scale(1.03);
        box-shadow:
            var(--shadow-md, 0 3px 8px rgba(99, 102, 241, 0.2)),
            var(--shadow-sm, 0 1px 2px rgba(99, 102, 241, 0.12));
    }

    .pub_grid_1008_paginationDots {
        min-width: 24px;
        height: 34px;
    }
}

/* ── Media: Small Mobile (max-width: 480px) ─────────────────────────────── */
@media (max-width: 480px) {
    .pub_grid_1008_cardImage {
        height: var(--img-h-mobile, 180px);
    }

    .pub_grid_1008_cardMeta {
        flex-wrap: wrap;
        gap: var(--space-content-gap, 8px);
    }
}

/* ── Reduced Motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pub_grid_1008_card {
        transition: none;
    }

    .pub_grid_1008_card:hover {
        transform: none;
    }
}

/* ============================================================
   PUB-FOOTER-1008 — Universal Footer (4-column grid layout)
   1008 series: #0f172a bg · #6366f1 accent · Inter font
   Layouts: grid | stacked | minimal  (via data-layout attr)
   ============================================================ */

/* ── Root / Section wrapper ─────────────────────────────── */
.pub_footer_1008_root {
    --newsletter-input-bg: rgba(255, 255, 255, 0.06);
    --newsletter-focus-shadow: rgba(99, 102, 241, 0.2);
    --alert-color: #f87171;
    --btn-text: #fff;
    background: var(--texture-bg, none),
        color-mix(in srgb, color-mix(in srgb, var(--bg, #0f172a) calc(var(--material-bg-opacity, 1) * 100%), transparent) calc(var(--material-bg-opacity, 1) * 100%), transparent);
    color: var(--text, #e2e8f0);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    padding-top: var(--pt, 80px);
    padding-bottom: var(--pb, 40px);
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Container ───────────────────────────────────────────── */
.pub_footer_1008_container {
    max-width: var(--max-w, 1200px);
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 3rem);
}

/* ── Main grid ───────────────────────────────────────────── */
.pub_footer_1008_mainGrid {
    display: grid;
    grid-template-columns: 1.8fr 2fr 1fr 1.4fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
}

/* stacked layout overrides */
.pub_footer_1008_root[data-layout="stacked"] .pub_footer_1008_mainGrid {
    grid-template-columns: 1fr;
    gap: var(--space-gap, 2rem);
}

/* minimal layout overrides */
.pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_mainGrid {
    grid-template-columns: 1fr auto;
    gap: var(--space-gap, 2rem);
    align-items: center;
}

.pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_contactCol,
.pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_newsletterCol {
    display: none;
}

/* ── Brand Column ────────────────────────────────────────── */
.pub_footer_1008_brandCol {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.75rem);
}

.pub_footer_1008_brandLogo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 0.5rem);
    color: var(--accent, #6366f1);
    font-family: var(--font-heading, var(--font-body, 'Inter', system-ui, sans-serif));
    font-weight: 700;
    letter-spacing: var(--tracking, -0.02em);
    text-decoration: none;
    margin-bottom: 0.25rem;
    border-radius: var(--radius-sm, 4px);
}

.pub_footer_1008_brandLogo:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 3px;
}

.pub_footer_1008_brandLogo i {
    color: var(--accent, #6366f1);
}

.pub_footer_1008_brandDesc {
    color: var(--text-muted, #94a3b8);
    line-height: var(--leading, 1.65);
    margin: 0;
}

/* ── Social Icons ────────────────────────────────────────── */
.pub_footer_1008_socialRow {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 0.5rem);
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.pub_footer_1008_socialLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-height: 36px;
    border-radius: var(--radius-lg, 8px);
    background: var(--social-bg, rgba(255, 255, 255, 0.08));
    color: var(--text-muted, #94a3b8);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    border: 1px solid var(--footer-border, rgba(255, 255, 255, 0.08));
}

.pub_footer_1008_socialLink:hover {
    background: var(--accent, #6366f1);
    color: var(--social-hover-text, #fff);
    transform: translateY(-2px);
    border-color: var(--accent, #6366f1);
}

.pub_footer_1008_socialLink i {
    font-size: calc(1rem * var(--body-scale, 1));
    line-height: var(--leading, 1);
}

/* ── Links Grid ──────────────────────────────────────────── */
.pub_footer_1008_linksArea {
    /* wrapper for the links grid zone */
}

.pub_footer_1008_linksGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: clamp(1rem, 2vw, 2rem);
}

.pub_footer_1008_linksCol {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Reset browser list defaults inside FooterLinksColumn */
.pub_footer_1008_linksCol ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.25rem);
}

.pub_footer_1008_linksCol li {
    margin: 0;
    padding: 0;
}

/* ── Column Headings ─────────────────────────────────────── */
.pub_footer_1008_colHeading {
    color: var(--text, #e2e8f0);
    font-family: var(--font-heading, var(--font-body, 'Inter', system-ui, sans-serif));
    font-weight: 700;
    letter-spacing: var(--tracking, 0.1em);
    text-transform: uppercase;
    margin: 0 0 0.875rem;
}

/* ── Nav Column Links ────────────────────────────────────── */
.pub_footer_1008_footerLink {
    display: inline-block;
    color: var(--text-muted, #94a3b8);
    text-decoration: none;
    line-height: var(--leading, 1.5);
    padding: 0.125rem 0;
    border-radius: var(--radius-sm, 4px);
    transition: color 180ms ease;
}

.pub_footer_1008_footerLink:hover {
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_footerLink:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 2px;
    color: var(--text, #e2e8f0);
}

/* ── Contact Column ──────────────────────────────────────── */
.pub_footer_1008_contactCol {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.25rem);
}

.pub_footer_1008_contactItem {
    display: flex;
    align-items: flex-start;
    gap: var(--space-content-gap, 0.5rem);
    color: var(--text-muted, #94a3b8);
    line-height: var(--leading, 1.5);
    margin-bottom: 0.5rem;
}

.pub_footer_1008_contactIcon {
    color: var(--accent, #6366f1);
    font-size: calc(1rem * var(--body-scale, 1));
    margin-top: 0.1em;
    flex-shrink: 0;
}

.pub_footer_1008_contactText {
    color: var(--text-muted, #94a3b8);
    text-decoration: none;
    border-radius: var(--radius-sm, 4px);
    transition: color 180ms ease;
}

.pub_footer_1008_contactText:hover {
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_contactText:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 2px;
    color: var(--text, #e2e8f0);
}

/* ── Newsletter Column ───────────────────────────────────── */
.pub_footer_1008_newsletterCol {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.75rem);
}

/* Space out the input and button inside the newsletter form */
.pub_footer_1008_newsletterCol form {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.625rem);
}

/* Email validation error message — min-height reserves 1 line always to prevent CLS */
.pub_footer_1008_newsletterCol form span[role="alert"] {
    display: block;
    min-height: calc(0.8125rem * 1.4);
    color: var(--alert-color, #f87171);
    font-size: calc(0.8125rem * var(--body-scale, 1));
    line-height: var(--leading, 1.4);
}

.pub_footer_1008_newsletterInput {
    width: 100%;
    background: var(--newsletter-input-bg, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
    border-radius: var(--radius-md, 6px);
    color: var(--text, #e2e8f0);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: calc(0.9375rem * var(--body-scale, 1));
    padding: 0.625rem 0.875rem;
    outline: none;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.pub_footer_1008_newsletterInput:focus {
    border-color: var(--accent, #6366f1);
}

.pub_footer_1008_newsletterInput::placeholder {
    color: var(--text-muted, #64748b);
}

.pub_footer_1008_newsletterBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent, #6366f1);
    color: var(--btn-text, #fff);
    border: none;
    border-radius: var(--radius-md, 6px);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: calc(0.9375rem * var(--body-scale, 1));
    font-weight: 600;
    letter-spacing: var(--tracking, -0.01em);
    padding: 0.625rem 1.25rem;
    cursor: pointer;
    transition: opacity 150ms ease;
}

.pub_footer_1008_newsletterBtn:hover {
    opacity: 0.88;
}

.pub_footer_1008_newsletterBtn:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 3px;
    opacity: 0.88;
}

/* ── Map ─────────────────────────────────────────────────── */
.pub_footer_1008_mapWrapper {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: var(--radius-lg, 8px);
    overflow: hidden;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

/* ── App Badges ──────────────────────────────────────────── */
.pub_footer_1008_appBadges {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 1rem);
    flex-wrap: wrap;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* ── Divider ─────────────────────────────────────────────── */
.pub_footer_1008_divider {
    border: none;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    margin: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(1rem, 2vw, 1.5rem);
}

/* ── Bottom Bar ──────────────────────────────────────────── */
.pub_footer_1008_bottomBarWrapper {
    background: var(--bottom-bg, transparent);
}

.pub_footer_1008_bottomBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-content-gap, 0.75rem);
}

.pub_footer_1008_copyright {
    color: var(--text-muted, #64748b);
    margin: 0;
    line-height: var(--leading, 1.5);
}

.pub_footer_1008_legalLinks {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.125rem;
}

.pub_footer_1008_legalLink {
    color: var(--text-muted, #64748b);
    text-decoration: none;
    border-radius: var(--radius-sm, 4px);
    padding: 0.125rem 0.25rem;
    transition: color 180ms ease;
}

.pub_footer_1008_legalLink:hover {
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_legalLink:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 2px;
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_legalSep {
    color: var(--text-muted, #475569);
    font-size: calc(0.875rem * var(--body-scale, 1));
    user-select: none;
}

/* ── Certifications Row ──────────────────────────────────── */
.pub_footer_1008_certsRow {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 1rem);
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* ── Interactive states ──────────────────────────────────── */

/* ── @media 1024px ───────────────────────────────────────── */
@media (max-width: 1024px) {
    .pub_footer_1008_mainGrid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-gap, 2rem);
    }

    .pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_mainGrid {
        grid-template-columns: 1fr;
    }
}

/* ── @media 768px ────────────────────────────────────────── */
@media (max-width: 768px) {
    .pub_footer_1008_mainGrid {
        grid-template-columns: 1fr;
        gap: var(--space-gap, 1.75rem);
    }

    .pub_footer_1008_linksGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pub_footer_1008_bottomBar {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-content-gap, 0.5rem);
    }
}

/* ── @media 480px ────────────────────────────────────────── */
@media (max-width: 480px) {
    .pub_footer_1008_linksGrid {
        grid-template-columns: 1fr;
    }

    .pub_footer_1008_appBadges {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── prefers-reduced-motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .pub_footer_1008_footerLink,
    .pub_footer_1008_contactText,
    .pub_footer_1008_legalLink,
    .pub_footer_1008_brandLogo,
    .pub_footer_1008_newsletterInput,
    .pub_footer_1008_newsletterBtn {
        transition: none;
    }
}

/* Page: mf-article */
/* ============================================================
   PUB-NAV-1008 — Clarity SaaS Nav
   Series 1008 · Full-width sticky nav · Light theme · Inter font
   State: data-scrolled on .navBar  |  data-open on .mobileDrawer/.drawerOverlay
   ============================================================ */

/* ── Root ────────────────────────────────────────────────── */
.pub_nav_1008_navRoot {
    /* Scoped design tokens — not user-controlled */
    --t: 0.2s ease;
    --t-slow: 0.32s ease;
    --r: 6px;
    --r-lg: 10px;
    --r-btn: 8px;
    --fs-brand: clamp(15px, 1.5vw, 17px);
    --fs-nav: clamp(13px, 1.3vw, 14px);
    --fs-dd: clamp(12px, 1.2vw, 13.5px);
    --fs-drawer: clamp(14px, 1.4vw, 15px);
    --fs-icon: clamp(18px, 1.5vw, 20px);
    --fs-caret: 11px;
    --hover-bg: rgba(37, 99, 235, 0.06);

    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    isolation: isolate;
    /* ✅ Ensure nav stacking context sits above page content */
    position: relative;
    z-index: var(--z-nav, 1000);
    background-image: var(--texture-bg, none);
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Full-width Bar ──────────────────────────────────────── */
.pub_nav_1008_navBar {
    position: var(--navbar-position, fixed);
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav, 1000);
    /* above page content, below drawer overlay */
    background-color: var(--bg, #ffffff);
    border-bottom: 1px solid var(--border, #e5e7eb);
    transition:
        border-color var(--t, 0.2s ease),
        box-shadow var(--t, 0.2s ease);
    padding-top: var(--pt, 0);
    padding-bottom: var(--pb, 0);
}

.pub_nav_1008_navBar[data-scrolled='true'] {
    border-color: var(--border, #e5e7eb);
}

/* ── Inner container ─────────────────────────────────────── */
.pub_nav_1008_navInner {
    max-width: var(--max-w, 1200px);
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 40px);
    min-height: var(--nav-h, 72px);
    display: flex;
    align-items: center;
    justify-content: space-between;
gap: var(--space-gap, 32px);
}

/* ── Logo ────────────────────────────────────────────────── */
.pub_nav_1008_logo {
  /* composed: logo from NavBase.module.css */
  display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity var(--t, 0.22s ease);
    /* gap, margin, color: set in component */
    gap: var(--space-content-gap, 8px);
    color: var(--text, #374151);
    text-decoration: none;
}

.pub_nav_1008_logoMark {
    font-size: var(--fs-icon, clamp(18px, 1.5vw, 20px));
    color: var(--cta-bg, #2563eb);
    line-height: var(--leading, 1);
}

.pub_nav_1008_logoWord {
    font-size: var(--fs-brand, clamp(15px, 1.5vw, 17px));
    font-weight: 700;
    letter-spacing: var(--tracking, -0.02em);
    color: var(--text, #374151);
    white-space: nowrap;
}

.pub_nav_1008_logoImg {
  /* composed: logoImg from NavBase.module.css */
  object-fit: contain;
    display: block;
    /* width, height: set via CSS vars in component */
    width: var(--brand-image-width, 160px);
    height: var(--brand-image-height, 40px);
}

/* ── Center: Desktop nav links ───────────────────────────── */
.pub_nav_1008_navCenter {
    flex: 1;
    display: flex;
    justify-content: center;
}

.pub_nav_1008_navLinks {
  /* composed: navLinks from NavBase.module.css */
  display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    /* gap: set in component */
    gap: var(--space-content-gap, 4px);
}

.pub_nav_1008_dropWrap {
    position: relative;
}

.pub_nav_1008_navLink {
  /* composed: navLink from NavBase.module.css */
  display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: color var(--t, 0.22s ease), background-color var(--t, 0.22s ease);
    /* padding, font-size, font-weight, color, border-radius: set in component */
    padding: 6px 10px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 500;
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
}

.pub_nav_1008_navLink:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_navLinkBtn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 4px);
    padding: 6px 10px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 500;
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    background: none;
    border: none;
    cursor: pointer;
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
}

.pub_nav_1008_navLinkBtn:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_navCaret {
    font-size: var(--fs-caret, 11px);
    transition: transform var(--t, 0.2s ease);
}

/* ── Dropdown panel ──────────────────────────────────────── */
.pub_nav_1008_navDropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 160px;
    background-color: var(--bg, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--r-lg, 10px);
    padding: 6px;
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* open/close via data-open */
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-6px);
    transition:
        opacity var(--t, 0.2s ease),
        transform var(--t, 0.2s ease);
    z-index: var(--z-dropdown, 1200);
    /* above nav links, below sticky bar */
}

.pub_nav_1008_navDropdown[data-open='true'] {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.pub_nav_1008_ddItem {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    padding: 8px 12px;
    font-size: var(--fs-dd, clamp(12px, 1.2vw, 13.5px));
    font-weight: 500;
    color: var(--text, #374151);
    text-decoration: none;
    border-radius: var(--r, 6px);
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
    white-space: nowrap;
}

.pub_nav_1008_ddItem:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

/* ── Right area ──────────────────────────────────────────── */
.pub_nav_1008_navRight {
  /* composed: navRight from NavBase.module.css */
  display: flex;
    align-items: center;
    flex-shrink: 0;
    /* gap, margin: set in component */
    gap: var(--space-content-gap, 8px);
}

.pub_nav_1008_loginBtn {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 500;
    color: var(--text, #374151);
    text-decoration: none;
    border-radius: var(--r, 6px);
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
    white-space: nowrap;
}

.pub_nav_1008_loginBtn:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_navCta {
  /* composed: navCta from NavBase.module.css */
  display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: background-color var(--t, 0.22s ease), transform var(--t, 0.22s ease);
    /* padding, background, color, border-radius, font: set in component */
    padding: 7px 18px;
    background-color: var(--cta-bg, #2563eb);
    color: var(--cta-text, #ffffff);
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 600;
    border-radius: var(--r-btn, 8px);
    white-space: nowrap;
}

.pub_nav_1008_navCta:hover {
    background-color: var(--cta-hover, rgba(37, 99, 235, 0.88));
    transform: translateY(-1px);
}

/* ── Hamburger ───────────────────────────────────────────── */
.pub_nav_1008_hamburger {
  /* composed: hamburger from NavBase.module.css */
  display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    transition: background-color var(--t, 0.22s ease);
    width: 36px;
    min-height: var(--hamburger-h, 36px);
    font-size: var(--fs-icon, clamp(18px, 1.5vw, 20px));
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    display: none;
    /* visible on mobile via media query */
}

.pub_nav_1008_hamburger:hover {
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_hamburgerLine {
  /* composed: hamburgerLine from NavBase.module.css */
  display: block;
    transition: transform var(--t, 0.22s ease), opacity var(--t, 0.22s ease);
    width: 20px;
    height: 2px;
    background-color: var(--text, #374151);
    border-radius: 2px;
}

/* ── Drawer Overlay ──────────────────────────────────────── */
.pub_nav_1008_drawerOverlay {
  /* composed: drawerOverlay from NavBase.module.css */
  inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t, 0.22s ease), visibility var(--t, 0.22s ease);
    /* position, z-index, background-color: set in component */
    position: var(--drawer-position, fixed);
    z-index: var(--z-drawer, 1100);
    /* above sticky navbar, below drawer panel */
    background-color: var(--overlay-bg, rgba(17, 24, 39, 0.4));
}

.pub_nav_1008_drawerOverlay[data-open='true'] {
    opacity: 1;
    visibility: visible;
}

/* ── Mobile Drawer ───────────────────────────────────────── */
.pub_nav_1008_mobileDrawer {
  /* composed: mobileDrawer from NavBase.module.css */
  top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--t-slow, 0.36s ease);
    overflow-y: auto;
    /* position, z-index, width, background-color, border, box-shadow: set in component */
    position: var(--drawer-position, fixed);
    z-index: var(--z-drawer, 1100);
    /* above overlay, topmost drawer layer */
    width: min(320px, 85vw);
    background-color: var(--bg, #ffffff);
    border-left: 1px solid var(--border, #e5e7eb);
}

.pub_nav_1008_mobileDrawer[data-open='true'] {
    transform: translateX(0);
}

/* ── Drawer Header ───────────────────────────────────────── */
.pub_nav_1008_drawerHeader {
  /* composed: drawerHeader from NavBase.module.css */
  display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    /* padding, border: set in component */
    padding: 18px 20px;
    border-bottom: 1px solid var(--border, #e5e7eb);
}

.pub_nav_1008_drawerBrand {
  /* composed: drawerBrand from NavBase.module.css */
  display: flex;
    align-items: center;
    /* gap, font-family, font-size, color: set in component */
    gap: var(--space-content-gap, 8px);
    font-size: var(--fs-brand, clamp(15px, 1.5vw, 17px));
    font-weight: 700;
    color: var(--text, #374151);
}

.pub_nav_1008_drawerBrandMark {
    font-size: var(--fs-icon, clamp(18px, 1.5vw, 20px));
    color: var(--cta-bg, #2563eb);
}

.pub_nav_1008_drawerCloseBtn {
  /* composed: drawerCloseBtn from NavBase.module.css */
  display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color var(--t, 0.22s ease);
    /* width, height, font-size, color: set in component */
    width: 32px;
    min-height: var(--close-btn-h, 32px);
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
}

.pub_nav_1008_drawerCloseBtn:hover {
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

/* ── Drawer Links ────────────────────────────────────────── */
.pub_nav_1008_drawerLinks {
  /* composed: drawerLinks from NavBase.module.css */
  flex: 1;
    display: flex;
    flex-direction: column;
    /* padding: set in component */
    padding: 12px 12px;
    gap: 2px;
}

.pub_nav_1008_drawerLink {
  /* composed: drawerLink from NavBase.module.css */
  display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: color var(--t, 0.22s ease), background-color var(--t, 0.22s ease);
    /* padding, font-size, font-weight, color, font-family, border-radius: set in component */
    padding: 10px 12px;
    font-size: var(--fs-drawer, clamp(14px, 1.4vw, 15px));
    font-weight: 500;
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
}

.pub_nav_1008_drawerLink:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_drawerCaret {
  /* composed: drawerCaret from NavBase.module.css */
  transition: transform var(--t, 0.22s ease);
    /* font-size: set in component */
    font-size: var(--fs-caret, 11px);
}

.pub_nav_1008_drawerSub {
  /* composed: drawerSub from NavBase.module.css */
  max-height: 0;
    overflow: hidden;
    transition: max-height var(--t-slow, 0.36s ease);
    padding-left: 12px;
}

.pub_nav_1008_drawerSubLink {
  /* composed: drawerSubLink from NavBase.module.css */
  display: block;
    text-decoration: none;
    transition: color var(--t, 0.22s ease), background-color var(--t, 0.22s ease);
    /* padding, font-size, color: set in component */
    padding: 8px 12px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    color: var(--text, #374151);
    border-radius: var(--r, 6px);
    display: block;
}

.pub_nav_1008_drawerSubLink:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

/* ── Drawer Footer ───────────────────────────────────────── */
.pub_nav_1008_drawerFooter {
  /* composed: drawerFooter from NavBase.module.css */
  flex-shrink: 0;
    /* padding, border: set in component */
    padding: 16px 20px;
    border-top: 1px solid var(--border, #e5e7eb);
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 10px);
}

.pub_nav_1008_drawerSecondaryBtn {
    display: block;
    text-align: center;
    padding: 10px 20px;
    font-size: var(--fs-drawer, clamp(14px, 1.4vw, 15px));
    font-weight: 500;
    color: var(--text, #374151);
    text-decoration: none;
    border-radius: var(--r-btn, 8px);
    border: 1px solid var(--border, #e5e7eb);
    transition: color var(--t, 0.2s ease), background-color var(--t, 0.2s ease);
}

.pub_nav_1008_drawerSecondaryBtn:hover {
    color: var(--accent, #2563eb);
    background-color: var(--hover-bg, rgba(37, 99, 235, 0.06));
}

.pub_nav_1008_drawerCta {
  /* composed: drawerCta from NavBase.module.css */
  display: block;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--t, 0.22s ease);
    /* padding, background, color, border-radius, font: set in component */
    padding: 11px 20px;
    background-color: var(--cta-bg, #2563eb);
    color: var(--cta-text, #ffffff);
    font-size: var(--fs-drawer, clamp(14px, 1.4vw, 15px));
    font-weight: 600;
    border-radius: var(--r-btn, 8px);
    text-align: center;
}

.pub_nav_1008_drawerCta:hover {
    background-color: var(--cta-hover, rgba(37, 99, 235, 0.88));
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */

/* ── Focus states (accessibility — required) ─────────────── */
.pub_nav_1008_navLink:focus-visible,
.pub_nav_1008_navLinkBtn:focus-visible,
.pub_nav_1008_loginBtn:focus-visible,
.pub_nav_1008_navCta:focus-visible,
.pub_nav_1008_hamburger:focus-visible,
.pub_nav_1008_drawerCloseBtn:focus-visible,
.pub_nav_1008_drawerLink:focus-visible,
.pub_nav_1008_drawerSubLink:focus-visible,
.pub_nav_1008_drawerSecondaryBtn:focus-visible,
.pub_nav_1008_drawerCta:focus-visible {
    outline: 2px solid var(--accent, #2563eb);
    outline-offset: 3px;
    border-radius: var(--r, 6px);
}

/* ── Tablet (1100px) ─────────────────────────────────────── */
@media (max-width: 1100px) {
    .pub_nav_1008_navInner {
gap: var(--space-content-gap, 12px);
    }

    .pub_nav_1008_navLinks {
        gap: 2px;
    }

    .pub_nav_1008_navLink,
    .pub_nav_1008_navLinkBtn {
        padding: 6px 6px;
    }

    .pub_nav_1008_navRight {
        gap: var(--space-content-gap, 4px);
    }

    .pub_nav_1008_loginBtn {
        padding: 5px 8px;
    }

    .pub_nav_1008_navCta {
        padding: 5px 10px;
    }
}

/* ── Tablet / Mobile (768px) ─────────────────────────────── */
@media (max-width: 768px) {
    .pub_nav_1008_navCenter {
        display: none;
    }

    .pub_nav_1008_loginBtn {
        display: none;
    }

    .pub_nav_1008_navCta {
        display: none;
    }

    .pub_nav_1008_hamburger {
        display: flex;
    }
}

/* ── Mobile (480px) ──────────────────────────────────────── */
@media (max-width: 480px) {
    .pub_nav_1008_navInner {
        padding: 0 clamp(12px, 4vw, 16px);
gap: var(--space-content-gap, 12px);
    }
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .pub_nav_1008_navBar,
    .pub_nav_1008_navLink,
    .pub_nav_1008_navLinkBtn,
    .pub_nav_1008_navDropdown,
    .pub_nav_1008_ddItem,
    .pub_nav_1008_loginBtn,
    .pub_nav_1008_navCta,
    .pub_nav_1008_drawerOverlay,
    .pub_nav_1008_mobileDrawer,
    .pub_nav_1008_drawerLink,
    .pub_nav_1008_drawerSubLink,
    .pub_nav_1008_drawerSecondaryBtn,
    .pub_nav_1008_drawerCta {
        transition: none;
    }
}

/* ============================================================
   PUB-CONTENT-1008 — Aurora Blog Content
   Layout: Centered single column | Niche: Blog/Article
   Includes: TipTap editor styles + SSR content styles
   ============================================================ */

/* ── Scoped design tokens ──────────────────────────────────── */
.pub_content_1008_section {
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --t: 0.2s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
    --t-med: 0.3s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
    --r: 8px;
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    background-image: var(--texture-bg, none);
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Section wrapper ───────────────────────────────────────── */
.pub_content_1008_section {
    width: 100%;
    padding-top: clamp(calc(var(--pt, 80px) * 0.55), 7vw, var(--pt, 80px));
    padding-bottom: clamp(calc(var(--pb, 80px) * 0.55), 7vw, var(--pb, 80px));
    background-color: var(--bg, #ffffff);
    font-family: var(--font-body, system-ui, sans-serif);
    color: var(--text, #374151);
    position: relative;
}

/* TOC modifier — inherits all .section styles, class exists for targeting */
.pub_content_1008_section.pub_content_1008_withToc {
    /* Note: no overflow:clip here — it breaks position:sticky on the sidebar */
}

/* ── Container ─────────────────────────────────────────────── */
.pub_content_1008_container {
    width: 100%;
    max-width: var(--max-w, 800px);
    margin: 0 auto;
    padding-left: var(--content-px, 1rem);
    padding-right: var(--content-px, 1rem);
}


/* ── Editor wrapper — border fills the padded editor container ── */

/* ── Editor wrapper ────────────────────────────────────────── */
.blog-editor-wrapper {
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    background: var(--bg, #ffffff);
    position: relative;
}

/* ── Toolbar ───────────────────────────────────────────────── */
.blog-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 8px 12px;
    background: var(--toolbar-bg, #f9fafb);
    border-bottom: 1px solid var(--border, #e5e7eb);
    user-select: none;
}

.toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: none;
    background: transparent;
    color: var(--text-muted, #6b7280);
    font-family: var(--font-body, system-ui, sans-serif);
    cursor: pointer;
    border-radius: var(--radius-md, 6px);
    transition: background-color var(--t, 0.15s ease), color var(--t, 0.15s ease);
    white-space: nowrap;
}

.toolbar-btn:hover {
    background: var(--toolbar-hover, #e5e7eb);
    color: var(--text, #111827);
}

.toolbar-btn.active {
    background: var(--accent-light, #dbeafe);
    color: var(--accent, #2563eb);
}

.toolbar-select {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 6px;
    border: 1px solid var(--border, #d1d5db);
    border-radius: var(--radius-md, 6px);
    background: var(--bg, #ffffff);
    color: var(--text, #374151);
    font-family: var(--font-body, system-ui, sans-serif);
    cursor: pointer;
    outline: none;
    min-width: 56px;
    max-width: 80px;
    transition: border-color var(--t, 0.15s ease);
    appearance: auto;
    -webkit-appearance: auto;
}

.toolbar-select:hover {
    border-color: var(--accent, #2563eb);
}

.toolbar-select-wrap {
    display: inline-flex;
    align-items: center;
}

.toolbar-divider {
    width: 1px;
    height: 20px;
    background: var(--border, #d1d5db);
    margin: 0 4px;
    flex-shrink: 0;
}

/* ── Editor content area ───────────────────────────────────── */
.blog-editor-content {
    padding: 24px 0;
    min-height: 400px;
}

/* ── ProseMirror base ──────────────────────────────────────── */
.blog-editor-content .ProseMirror {
    outline: none;
    min-height: 350px;
    padding: 0 clamp(1rem, 2vw, 2rem);
    font-family: var(--font-body, system-ui, sans-serif);
    color: var(--text, #374151);
    line-height: var(--line-height, 1.8);
}

.blog-editor-content .ProseMirror p.is-editor-empty:first-child::before {
    color: var(--text-muted, #adb5bd);
    content: attr(data-placeholder);
    float: left;
    height: 0;
    pointer-events: none;
}

/* ── Bubble menu ───────────────────────────────────────────── */
.bubble-menu {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    background: var(--bubble-bg, #1f2937);
    border-radius: var(--radius-md, 10px);
}

.bubble-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--bubble-text, #d1d5db);
    font-family: var(--font-body, system-ui, sans-serif);
    cursor: pointer;
    border-radius: var(--radius-md, 6px);
    transition: background-color var(--t, 0.15s ease), color var(--t, 0.15s ease);
}

.bubble-btn:hover {
    background: var(--bubble-hover, #374151);
    color: var(--bubble-text-hover, #ffffff);
}

.bubble-btn.active {
    background: var(--accent, #3b82f6);
    color: var(--bubble-text-active, #ffffff);
}

.bubble-divider {
    width: 1px;
    height: 16px;
    background: var(--bubble-border, #4b5563);
    margin: 0 4px;
}

.bubble-link-input {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 4px);
}

.bubble-label {
    font-size: var(--fs-11, 11px);
    font-weight: 600;
    color: var(--bubble-text, #9ca3af);
    text-transform: uppercase;
    letter-spacing: var(--tracking, 0.5px);
    padding: 0 4px;
    white-space: nowrap;
}

.bubble-menu-image {
    flex-wrap: nowrap;
    gap: 1px;
    padding: 6px 8px;
}

.bubble-menu-image .bubble-btn {
    width: auto;
    padding: 0 6px;
    font-size: var(--fs-11, 11px);
    font-weight: 600;
}

.bubble-link-input input {
    width: 180px;
    padding: 4px 8px;
    border: 1px solid var(--bubble-border, #4b5563);
    border-radius: var(--radius-sm, 4px);
    background: var(--bubble-input-bg, #374151);
    color: var(--bubble-input-text, #ffffff);
    font-family: var(--font-body, system-ui, sans-serif);
    outline: none;
}

.bubble-link-input button {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--bubble-text, #d1d5db);
    cursor: pointer;
    border-radius: var(--radius-sm, 4px);
    font-family: var(--font-body, system-ui, sans-serif);
}

.bubble-link-input button:hover {
    background: var(--bubble-hover, #374151);
    color: var(--bubble-text-hover, #ffffff);
}

/* ── Slash menu ────────────────────────────────────────────── */
.slash-menu {
    width: 240px;
    padding: 6px;
    background: var(--bg, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-lg, 12px);
    max-height: 320px;
    overflow-y: auto;
}

.slash-menu-header {
    padding: 8px 12px 6px;
    font-weight: 600;
    color: var(--text-muted, #9ca3af);
    font-family: var(--font-body, system-ui, sans-serif);
    text-transform: uppercase;
    letter-spacing: var(--tracking, 0.05em);
}

.slash-menu-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-lg, 8px);
    text-align: left;
    font-family: var(--font-body, system-ui, sans-serif);
    transition: background-color var(--t, 0.15s ease);
}

.slash-menu-item:hover,
.slash-menu-item.selected {
    background: var(--toolbar-hover, #f3f4f6);
}

.slash-menu-item-title {
    font-weight: 500;
    color: var(--text, #111827);
    font-family: var(--font-body, system-ui, sans-serif);
}

.slash-menu-item-desc {
    color: var(--text-muted, #6b7280);
    font-family: var(--font-body, system-ui, sans-serif);
    margin-top: 2px;
}

/* ============================================================
   CONTENT TYPOGRAPHY (shared: editor + SSR renderer)
   ============================================================ */

.blog-content-renderer {
    font-family: var(--font-body, system-ui, sans-serif);
    color: var(--text, #374151);
    line-height: var(--line-height, 1.8);
    word-wrap: break-word;
}

/* ── Headings ────────────────────────────────────────────────
     Typographic scale: each heading top-margin = 2× paragraph spacing,
     bottom-margin = 0.5× paragraph spacing (ratio 4:1)
   ──────────────────────────────────────────────────────────── */
.ProseMirror h1,
.blog-content-renderer h1 {
    font-weight: 800;
    line-height: var(--leading, 1.2);
    margin: 40px 0 10px;
    color: var(--heading-color, #111827);
    font-family: var(--font-heading, var(--font-body, system-ui, serif));
    letter-spacing: var(--tracking, -0.02em);
}

/* First h1 in the article — main title treatment */
.blog-content-renderer h1:first-child {
    line-height: var(--leading, 1.15);
    margin-top: 0;
    margin-bottom: 20px;
    letter-spacing: var(--tracking, -0.03em);
    position: relative;
}

.ProseMirror h2,
.blog-content-renderer h2 {
    font-weight: 700;
    line-height: var(--leading, 1.3);
    margin: 32px 0 8px;
    color: var(--heading-color, #111827);
    font-family: var(--font-heading, var(--font-body, system-ui, serif));
}

.ProseMirror h3,
.blog-content-renderer h3 {
    font-weight: 600;
    line-height: var(--leading, 1.35);
    margin: 24px 0 6px;
    color: var(--heading-color, #111827);
    font-family: var(--font-heading, var(--font-body, system-ui, serif));
}

.ProseMirror h4,
.blog-content-renderer h4 {
    font-weight: 600;
    line-height: var(--leading, 1.4);
    margin: 20px 0 6px;
    color: var(--heading-color, #111827);
}

/* ── Paragraph ─────────────────────────────────────────────── */
.ProseMirror p,
.blog-content-renderer p {
    line-height: var(--line-height, 1.8);
    margin: 0 0 16px;
    color: var(--text, #374151);
}

/* ── Links ─────────────────────────────────────────────────── */
.ProseMirror a,
.blog-content-renderer a {
    color: var(--link-color, #2563eb);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ProseMirror a:hover,
.blog-content-renderer a:hover {
    opacity: 0.8;
}

/* ── Bold / Italic / Underline / Strike ────────────────────── */
.ProseMirror strong,
.blog-content-renderer strong {
    font-weight: 700;
}

.ProseMirror em,
.blog-content-renderer em {
    font-style: italic;
}

.ProseMirror u,
.blog-content-renderer u {
    text-decoration: underline;
}

.ProseMirror s,
.blog-content-renderer s {
    text-decoration: line-through;
}

/* ── Inline code ───────────────────────────────────────────── */
.ProseMirror code,
.blog-content-renderer code {
    background: var(--code-bg, #f3f4f6);
    padding: 2px 6px;
    border-radius: var(--radius-sm, 4px);
    font-size: var(--code-font-size, 0.875em);
    font-family: var(--font-mono, 'JetBrains Mono', 'Consolas', monospace);
    color: var(--code-color, #ef4444);
}

/* ── Lists ─────────────────────────────────────────────────── */
.ProseMirror ul,
.ProseMirror ol,
.blog-content-renderer ul,
.blog-content-renderer ol {
    margin: 0 0 16px;
    padding-left: 28px;
    line-height: var(--line-height, 1.8);
}

.ProseMirror li,
.blog-content-renderer li {
    margin-bottom: 6px;
}

.ProseMirror ul li,
.blog-content-renderer ul li {
    list-style-type: disc;
}

.ProseMirror ol li,
.blog-content-renderer ol li {
    list-style-type: decimal;
}

/* ── Task list ─────────────────────────────────────────────── */
.ProseMirror ul[data-type="taskList"],
.blog-content-renderer ul[data-type="taskList"] {
    list-style: none;
    padding-left: 0;
}

.ProseMirror ul[data-type="taskList"] li,
.blog-content-renderer ul[data-type="taskList"] li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-content-gap, 10px);
}

.ProseMirror ul[data-type="taskList"] li > label,
.blog-content-renderer ul[data-type="taskList"] li > label {
    flex-shrink: 0;
    margin-top: 4px;
}

.ProseMirror ul[data-type="taskList"] li > label input[type="checkbox"],
.blog-content-renderer ul[data-type="taskList"] li > label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent, #2563eb);
}

/* ── Blockquote ────────────────────────────────────────────── */
.ProseMirror blockquote,
.blog-content-renderer blockquote {
    margin: 32px 0;
    padding: 28px 32px 28px 36px;
    border-left: 4px solid var(--accent, #2563eb);
    background: color-mix(in srgb, var(--accent, #2563eb) 4%, transparent);
    border-radius: 0 14px 14px 0;
    position: relative;
}

/* Decorative quote mark */
.blog-content-renderer blockquote::before {
    content: '\201C';
    position: absolute;
    top: -8px;
    left: 12px;
    font-size: calc(4rem * var(--body-scale, 1));
    line-height: var(--leading, 1);
    color: var(--accent, #2563eb);
    opacity: 0.15;
    font-family: var(--font-heading, Georgia, serif);
    pointer-events: none;
}

.ProseMirror blockquote p,
.blog-content-renderer blockquote p {
    font-style: italic;
    margin: 0;
    color: var(--text, #374151);
}

.ProseMirror blockquote p:last-child,
.blog-content-renderer blockquote p:last-child {
    margin-bottom: 0;
}

/* ── Code blocks ───────────────────────────────────────────── */
.ProseMirror pre,
.blog-content-renderer pre {
    margin: 24px 0;
    padding: 20px 24px;
    background: var(--code-block-bg, #1e293b);
    border-radius: var(--radius-lg, 12px);
    overflow-x: auto;
    font-family: var(--font-mono, 'JetBrains Mono', 'Consolas', monospace);
    line-height: var(--leading, 1.7);
    color: var(--code-block-text, #e2e8f0);
}

.ProseMirror pre code,
.blog-content-renderer pre code {
    background: none;
    padding: 0;
    font-size: calc(inherit * var(--body-scale, 1));
    color: inherit;
    font-family: var(--font-mono, 'JetBrains Mono', 'Consolas', monospace);
}

/* ── Images ────────────────────────────────────────────────── */
.ProseMirror img,
.blog-content-renderer img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    margin: 36px auto;
    display: block;
    transition: box-shadow 0.3s ease;
}

.blog-content-renderer img:hover {
}

/* SSR image alignment — override horizontal margin */
.blog-content-renderer img[data-align="left"] {
    margin-left: 0;
    margin-right: auto;
}

.blog-content-renderer img[data-align="right"] {
    margin-left: auto;
    margin-right: 0;
}

/* ══════════════════════════════════════════════════════════════
   Resizable Image NodeView
   ══════════════════════════════════════════════════════════════ */
/* Outer react-renderer: flex + justify-content for alignment */
.react-renderer.node-image {
    display: flex;
    justify-content: center;
    width: 100%;
}

.react-renderer.node-image:has([data-align="left"]) {
    justify-content: flex-start;
}

.react-renderer.node-image:has([data-align="right"]) {
    justify-content: flex-end;
}

/* NodeViewWrapper — flex item, shrink-wraps to content */
[data-node-view-wrapper] {
    max-width: 100%;
}

.resizable-image-container {
    position: relative;
    line-height: var(--leading, 0);
}

/* Hide default ProseMirror selection outline — we use handles instead */
.ProseMirror-selectednode {
    outline: none !important;
}

.resizable-image-img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg, 12px);
}

/* ── Resize handles ── */
.resize-handle {
    position: absolute;
    z-index: var(--z-high, 10);
    /* above image for drag interaction */
    background: var(--accent, #3b82f6);
    border: 2px solid var(--handle-border, #ffffff);
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: auto;
    cursor: col-resize;
}

.resizable-image-container.selected .resize-handle {
    opacity: 1;
}

/* Corner handles */
.resize-handle-se {
    bottom: -6px;
    right: -6px;
    width: 12px;
    height: 12px;
    cursor: nwse-resize;
}

.resize-handle-sw {
    bottom: -6px;
    left: -6px;
    width: 12px;
    height: 12px;
    cursor: nesw-resize;
}

.resize-handle-ne {
    top: -6px;
    right: -6px;
    width: 12px;
    height: 12px;
    cursor: nesw-resize;
}

.resize-handle-nw {
    top: -6px;
    left: -6px;
    width: 12px;
    height: 12px;
    cursor: nwse-resize;
}

/* Edge handles */
.resize-handle-right {
    top: 50%;
    right: -5px;
    width: 10px;
    height: 30px;
    transform: translateY(-50%);
    cursor: ew-resize;
}

.resize-handle-left {
    top: 50%;
    left: -5px;
    width: 10px;
    height: 30px;
    transform: translateY(-50%);
    cursor: ew-resize;
}

/* ── Horizontal rule ───────────────────────────────────────── */
.ProseMirror hr,
.blog-content-renderer hr {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--border, #d1d5db) 20%, var(--border, #d1d5db) 80%, transparent);
    margin: 44px 0;
    position: relative;
}

/* Decorative dot in the center of hr */
.blog-content-renderer hr::after {
    content: '\00B7\00B7\00B7';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg, #ffffff);
    padding: 0 12px;
    color: var(--text-muted, #9ca3af);
    font-size: calc(1.2rem * var(--body-scale, 1));
    letter-spacing: var(--tracking, 4px);
}

/* ── Tables ────────────────────────────────────────────────── */
.ProseMirror table,
.blog-content-renderer table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    overflow: hidden;
}

.ProseMirror th,
.blog-content-renderer th {
    background: var(--table-header-bg, #f9fafb);
    font-weight: 600;
    text-align: left;
    padding: 12px 16px;
    border: 1px solid var(--border, #e5e7eb);
    color: var(--heading-color, #111827);
    font-family: var(--font-body, system-ui, sans-serif);
}

.ProseMirror td,
.blog-content-renderer td {
    padding: 10px 16px;
    border: 1px solid var(--border, #e5e7eb);
    font-family: var(--font-body, system-ui, sans-serif);
}

.ProseMirror td p,
.blog-content-renderer td p {
    margin: 0;
    font-size: calc(inherit * var(--body-scale, 1));
}

/* ── Highlight ───────────────────────────────────────────────── */
.ProseMirror mark,
.blog-content-renderer mark {
    background: var(--highlight-bg, #fef08a);
    padding: 1px 4px;
    border-radius: 2px;
}

/* ── Selected node ─────────────────────────────────────────── */
.ProseMirror .ProseMirror-gapcursor {
    display: none;
    pointer-events: none;
    position: relative;
}

.ProseMirror .ProseMirror-gapcursor:after {
    content: '';
    display: block;
    position: absolute;
    top: -2px;
    width: 20px;
    border-top: 1px solid var(--text, #000000);
    animation: pub_content_1008_ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
}

@keyframes pub_content_1008_ProseMirror-cursor-blink {
    to {
        visibility: hidden;
    }
}

.ProseMirror .ProseMirror-selectednode {
    outline: 2px solid var(--accent, #2563eb);
    outline-offset: 2px;
    border-radius: var(--radius-sm, 4px);
}

/* ── Table resizing ────────────────────────────────────────── */
.ProseMirror .tableWrapper {
    overflow-x: auto;
}

.ProseMirror .column-resize-handle {
    position: absolute;
    right: -2px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--accent, #2563eb);
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   TABLE OF CONTENTS — Pro Sidebar
   ══════════════════════════════════════════════════════════════ */

/* ── Two-column layout (desktop) ──────────────────────────── */
.pub_content_1008_contentWithToc {
    display: flex;
    gap: var(--space-gap, 40px);
    align-items: flex-start;
}

/* Position controlled purely by DOM element order:
   TOC first → appears left | TOC after content → appears right */
.pub_content_1008_tocRight {
    flex-direction: row;
}

.pub_content_1008_tocLeft {
    flex-direction: row;
}

.pub_content_1008_contentMain {
    flex: 1;
    min-width: 0;
}

.pub_content_1008_tocSidebar {
    flex-shrink: 0;
    width: var(--toc-w, 220px);
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 140px);
    overflow-y: visible;
}

/* ── TOC Card ─────────────────────────────────────────────── */
.blog-toc {
    background: var(--toc-bg, #ffffff);
    border: 1px solid var(--toc-border, #e5e7eb);
    border-radius: 14px;
    padding: 20px 0 0 0;
    font-family: var(--toc-font, var(--font-body, system-ui, sans-serif));
    transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease;
    overflow: hidden;
}

.blog-toc-sticky,
.blog-toc[data-scrolled="true"] {
    border-color: color-mix(in srgb, var(--toc-accent, var(--accent, #2563eb)) 15%, var(--toc-border, #d1d5db));
}

/* ── Progress Bar ─────────────────────────────────────────── */
.blog-toc-progress-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 10px);
    padding: 0 20px 16px;
    border-bottom: 1px solid var(--toc-border, #f0f0f0);
}

.blog-toc-progress-track {
    flex: 1;
    height: 2px;
    background: var(--toc-border, #e8e8e8);
    border-radius: var(--radius-sm, 4px);
    overflow: hidden;
}

.blog-toc-progress-fill {
    height: 100%;
    background: var(--toc-accent, var(--accent, #2563eb));
    border-radius: var(--radius-sm, 4px);
    transition: width 0.08s linear;
}

.blog-toc-progress-text {
    font-weight: 600;
    color: var(--toc-accent, #9ca3af);
    font-variant-numeric: tabular-nums;
    min-width: 28px;
    text-align: right;
    letter-spacing: var(--tracking, 0.02em);
}

/* ── Header ───────────────────────────────────────────────── */
.blog-toc-header {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    padding: 0 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking, 0.1em);
    color: var(--toc-text, var(--text-muted, #9ca3af));
    margin-bottom: 12px;
}

.blog-toc-header-icon {
    flex-shrink: 0;
    opacity: 0.5;
    width: 14px;
    height: 14px;
}

/* ── Links container (scrollable) ─────────────────────────── */
.blog-toc-scroll {
    max-height: var(--toc-scroll-h, calc(100vh - 300px));
    overflow-y: auto;
    padding: 0 0 0 20px;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 0.3s ease;
}

.blog-toc-scroll:hover {
    scrollbar-color: var(--toc-border, #e0e0e0) transparent;
}

.blog-toc-scroll::-webkit-scrollbar {
    width: 3px;
}

.blog-toc-scroll::-webkit-scrollbar-thumb {
    background: var(--toc-border, #e0e0e0);
    border-radius: var(--radius-sm, 4px);
}

/* ── Link List ────────────────────────────────────────────── */
.blog-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.blog-toc-list li {
    margin: 0;
    padding: 0;
}

.blog-toc-link {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: 9px 14px 9px 0;
    font-weight: 450;
    line-height: var(--leading, 1.5);
    color: var(--toc-text, var(--text-muted, #9ca3af));
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease, padding-left 0.2s ease;
    position: relative;
    border-radius: 0 8px 8px 0;
    margin-left: -20px;
    padding-left: 36px;
    border-left: 3px solid transparent;
}

.blog-toc-link:hover {
    color: var(--toc-accent, var(--text, #6b7280));
    padding-left: 40px;
    background: color-mix(in srgb, var(--toc-accent, var(--accent, #2563eb)) 4%, transparent);
}

.blog-toc-link.active {
    color: var(--toc-accent, var(--accent, #2563eb));
    font-weight: 600;
    padding-left: 40px;
    border-left-color: var(--toc-accent, var(--accent, #2563eb));
    background: color-mix(in srgb, var(--toc-accent, var(--accent, #2563eb)) 6%, transparent);
}

/* ── Link number badge (auto-generated) ───────────────────── */
.blog-toc-link-num {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-sm, 4px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--toc-text, #b0b7c3);
    background: var(--toc-border, #f0f0f0);
    margin-top: 1px;
    margin-right: 10px;
    transition: background 0.2s ease, color 0.2s ease;
}

.blog-toc-link:hover .blog-toc-link-num {
    background: var(--toc-accent, var(--accent, #2563eb));
    color: var(--toc-bg, #ffffff);
}

.blog-toc-link.active .blog-toc-link-num {
    background: var(--toc-accent, var(--accent, #2563eb));
    color: var(--toc-bg, #ffffff);
}

.blog-toc-link-text {
    flex: 1;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* ── Sub-links ────────────────────────────────────────────── */
.blog-toc-link-sub {
    font-weight: 400;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    padding-left: 50px !important;
    margin-left: -20px;
    border-left: 3px solid transparent;
}

.blog-toc-link-sub:hover {
    padding-left: 54px !important;
}

.blog-toc-link-sub.active {
    padding-left: 54px !important;
}

.blog-toc-sublist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.blog-toc-link-sub .blog-toc-link-num {
    width: 14px;
    height: 14px;
}

/* ── Sticky shadow on scroll ──────────────────────────────── */
.blog-toc-sticky .blog-toc-header,
.blog-toc[data-scrolled="true"] .blog-toc-header {
    color: var(--toc-accent, var(--accent, #9ca3af));
}

/* ── Mobile: TOC moves to top as card ─────────────────────── */
@media (max-width: 1023px) {

    .pub_content_1008_tocRight,
    .pub_content_1008_tocLeft {
        flex-direction: column;
        gap: 0;
    }

    .pub_content_1008_tocSidebar {
        width: 100%;
        position: relative;
        top: auto;
        max-height: none;
        overflow-y: visible;
        margin-bottom: 32px;
    }

    .blog-toc {
        padding: 16px 0 0 0;
    }

    .blog-toc-progress-wrap {
        padding: 0 16px 14px;
    }

    .blog-toc-header {
        padding: 0 16px;
    }

    .blog-toc-scroll {
        padding: 0 0 0 16px;
        max-height: none;
    }

    .blog-toc-link {
        margin-left: -16px;
        padding-left: 32px;
    }

    .blog-toc-link:hover {
        padding-left: 36px;
    }

    .blog-toc-link.active {
        padding-left: 36px;
    }

    .blog-toc-link-sub {
        padding-left: 46px !important;
    }

    .blog-toc-link-sub:hover {
        padding-left: 50px !important;
    }

    .blog-toc-link-sub.active {
        padding-left: 50px !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   TAGS SECTION — Page Builder + SSR
   ══════════════════════════════════════════════════════════════ */

/* ── Tags Section (PB) ────────────────────────────────────── */
.pub_content_1008_tagsSection {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border, #e5e7eb);
}

.pub_content_1008_tagsHeader {
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: calc(0.875rem * var(--body-scale, 1));
    font-weight: 600;
    color: var(--text, #111827);
    margin-bottom: 12px;
}

/* ── Tag Input Row ─────────────────────────────────────────── */
.pub_content_1008_tagInputRow {
    position: relative;
}

.pub_content_1008_tagInputWrapper {
    position: relative;
}

.pub_content_1008_tagInput {
    width: 100%;
    padding: 8px 14px;
    padding-right: 36px;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: calc(0.875rem * var(--body-scale, 1));
    color: var(--text, #111827);
    background: var(--bg, #ffffff);
    border: 1.5px solid var(--border, #e5e7eb);
    border-radius: var(--radius-lg, 8px);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.pub_content_1008_tagInput:focus {
    border-color: var(--accent, #2563eb);
}

.pub_content_1008_tagInput:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bg-light, #f9fafb);
}

.pub_content_1008_tagInput::placeholder {
    color: var(--text-muted, #9ca3af);
}

.pub_content_1008_tagSpinner {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border: 2px solid var(--border, #e5e7eb);
    border-top-color: var(--accent, #2563eb);
    border-radius: var(--radius-full, 50%);
    animation: pub_content_1008_tagSpin 0.6s linear infinite;
}

@keyframes pub_content_1008_tagSpin {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

/* ── Suggestions ───────────────────────────────────────────── */
.pub_content_1008_tagSuggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--text-white, #ffffff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: var(--radius-lg, 8px);
    z-index: var(--z-overlay, 100);
    /* above editor content */
    overflow: hidden;
}

.pub_content_1008_tagSuggestionItem {
    display: block;
    width: 100%;
    padding: 8px 14px;
    text-align: left;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: calc(0.8125rem * var(--body-scale, 1));
    color: var(--text, #111827);
    background: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.pub_content_1008_tagSuggestionItem:hover {
    background-color: var(--tag-bg, #f3f4f6);
}

.pub_content_1008_tagSuggestionItemAdded {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 14px;
    text-align: left;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: calc(0.8125rem * var(--body-scale, 1));
    color: var(--text-muted, #9ca3af);
    background: var(--bg-light, #f9fafb);
    border: none;
    cursor: default;
    opacity: 0.7;
}

.pub_content_1008_tagSuggestionCheck {
    font-size: calc(0.75rem * var(--body-scale, 1));
    color: var(--success, #10b981);
    font-weight: 500;
}

.pub_content_1008_tagCreateNewItem {
    display: block;
    width: 100%;
    padding: 8px 14px;
    text-align: left;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: calc(0.8125rem * var(--body-scale, 1));
    color: var(--accent, #2563eb);
    font-weight: 500;
    background: none;
    border: none;
    border-top: 1px solid var(--border, #e5e7eb);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.pub_content_1008_tagCreateNewItem:hover {
    background-color: var(--tag-bg, #eff6ff);
}

/* ── Tag Error ─────────────────────────────────────────────── */
.pub_content_1008_tagError {
    margin: 6px 0 0;
    font-size: calc(0.75rem * var(--body-scale, 1));
    color: var(--error, #ef4444);
}

.pub_content_1008_tagCount {
    margin: 6px 0 0;
    font-size: calc(0.75rem * var(--body-scale, 1));
    color: var(--text-muted, #6b7280);
}

/* ── Tag List (shared PB + SSR) ────────────────────────────── */
.pub_content_1008_tagList {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-content-gap, 6px);
    margin-top: 10px;
}

/* ── Tag Chip (PB — removable) ─────────────────────────────── */
.pub_content_1008_tagChip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 4px);
    padding: 4px 8px;
    padding-right: 4px;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: var(--tag-fs, 0.75rem);
    font-weight: 500;
    color: var(--tag-text, #2563eb);
    background: var(--tag-bg, #eff6ff);
    border: 1px solid var(--tag-border, #bfdbfe);
    border-radius: 100px;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    user-select: none;
}

.pub_content_1008_tagChipText {
    line-height: var(--leading, 1.2);
}

.pub_content_1008_tagChipRemove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    color: var(--tag-text, #2563eb);
    opacity: 0.5;
    cursor: pointer;
    border-radius: var(--radius-full, 50%);
    transition: opacity 0.2s ease, background-color 0.2s ease;
    flex-shrink: 0;
}

.pub_content_1008_tagChipRemove:hover {
    opacity: 1;
    background-color: var(--tag-border, #bfdbfe);
}

/* ── SSR Tags ──────────────────────────────────────────────── */
.pub_content_1008_ssrTagsSection {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--border, #e5e7eb);
}

.pub_content_1008_ssrTagList {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-content-gap, 8px);
    margin-top: 4px;
}

.pub_content_1008_ssrTagPill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: var(--tag-fs, 0.8125rem);
    font-weight: 500;
    color: var(--tag-text, #2563eb);
    background: var(--tag-bg, #eff6ff);
    border: 1px solid var(--tag-border, #bfdbfe);
    border-radius: 100px;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    cursor: default;
    text-decoration: none;
    line-height: var(--leading, 1.3);
}

/* Small hash icon before tag name */
.pub_content_1008_ssrTagPill::before {
    content: '#';
    font-size: calc(0.75em * var(--body-scale, 1));
    opacity: 0.5;
    font-weight: 600;
}

.pub_content_1008_ssrTagPill:hover {
    background: var(--tag-hover-bg, #dbeafe);
    border-color: var(--tag-text, #2563eb);
    transform: translateY(-2px);
}

/* ── Author Selector (Page Builder) ─────────────────────── */
.pub_content_1008_authorSelector {
    margin-top: 32px;
    padding: 16px;
    background: var(--bg, #f8fafc);
    border: 1.5px dashed var(--border, #cbd5e1);
    border-radius: var(--radius-md, 10px);
}

.pub_content_1008_authorSelectorHeader {
    font-size: calc(13px * var(--body-scale, 1));
    font-weight: 700;
    color: var(--text-muted, #475569);
    text-transform: uppercase;
    letter-spacing: var(--tracking, 0.04em);
    margin-bottom: 10px;
}

.pub_content_1008_authorSearchRow {
    position: relative;
}

.pub_content_1008_authorSearchInput {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border, #e2e8f0);
    border-radius: var(--radius-lg, 8px);
    font-size: calc(14px * var(--body-scale, 1));
    outline: none;
    background: white;
    color: var(--bg-dark, #1e293b);
    box-sizing: border-box;
}

.pub_content_1008_authorSearchInput:focus {
    border-color: var(--success, #44D7B6);
}

.pub_content_1008_authorSpinner {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid var(--border, #e2e8f0);
    border-top-color: var(--success, #44D7B6);
    border-radius: var(--radius-full, 50%);
    animation: pub_content_1008_authorSpin 0.6s linear infinite;
}

@keyframes pub_content_1008_authorSpin {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

.pub_content_1008_authorSuggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-overlay, 100);
    /* above editor content */
    margin-top: 4px;
    background: white;
    border: 1.5px solid var(--border, #e2e8f0);
    border-radius: var(--radius-md, 10px);
    max-height: 280px;
    overflow-y: auto;
}

.pub_content_1008_authorSuggestionItem {
    display: flex;
    align-items: center;
gap: var(--space-content-gap, 12px);
    width: 100%;
    padding: 10px 14px;
    background: white;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s ease;
}

.pub_content_1008_authorSuggestionItem:first-child {
    border-radius: 10px 10px 0 0;
}

.pub_content_1008_authorSuggestionItem:last-child {
    border-radius: 0 0 10px 10px;
}

.pub_content_1008_authorSuggestionItem:hover {
    background: var(--bg-subtle, #f1f5f9);
}

.pub_content_1008_authorSuggestionAvatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full, 50%);
    background: linear-gradient(135deg, var(--accent-dark, #1F3A65), var(--success, #44D7B6));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: calc(14px * var(--body-scale, 1));
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}

.pub_content_1008_authorSuggestionAvatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pub_content_1008_authorSuggestionInfo {
    flex: 1;
    min-width: 0;
}

.pub_content_1008_authorSuggestionName {
    font-size: calc(14px * var(--heading-scale, 1));
    font-weight: 600;
    color: var(--bg-dark, #1e293b);
}

.pub_content_1008_authorSuggestionRole {
    font-size: calc(12px * var(--body-scale, 1));
    color: var(--text-muted, #64748b);
    margin-top: 1px;
}

.pub_content_1008_authorNoResults {
    padding: 16px;
    text-align: center;
    color: var(--text-muted, #94a3b8);
    font-size: calc(13px * var(--body-scale, 1));
}

/* Selected author card */
.pub_content_1008_authorSelectedCard {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: white;
    border: 1.5px solid var(--success, #44D7B6);
    border-radius: var(--radius-md, 10px);
}

.pub_content_1008_authorSelectedInfo {
    display: flex;
    align-items: center;
gap: var(--space-content-gap, 12px);
}

.pub_content_1008_authorSelectedAvatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full, 50%);
    background: linear-gradient(135deg, var(--accent-dark, #1F3A65), var(--success, #44D7B6));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: calc(16px * var(--body-scale, 1));
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}

.pub_content_1008_authorSelectedAvatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pub_content_1008_authorSelectedName {
    font-size: calc(14px * var(--heading-scale, 1));
    font-weight: 600;
    color: var(--bg-dark, #1e293b);
}

.pub_content_1008_authorSelectedRole {
    font-size: calc(12px * var(--body-scale, 1));
    color: var(--text-muted, #64748b);
}

.pub_content_1008_authorSelectedChange {
    padding: 6px 14px;
    font-size: calc(12px * var(--body-scale, 1));
    font-weight: 600;
    color: var(--accent-dark, #1F3A65);
    background: var(--bg-subtle, #f1f5f9);
    border: 1.5px solid var(--border, #e2e8f0);
    border-radius: var(--radius-md, 6px);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pub_content_1008_authorSelectedChange:hover {
    background: var(--border, #e2e8f0);
}

/* Selected author bar (no dashed border) */
.pub_content_1008_authorSelectedBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 32px;
    padding: 12px 16px;
    background: var(--success-bg, #f0fdf4);
    border: 1.5px solid var(--success-border, #86efac);
    border-radius: var(--radius-md, 10px);
}

.pub_content_1008_authorSelectedBarInfo {
    display: flex;
    align-items: center;
gap: var(--space-content-gap, 12px);
}

.pub_content_1008_authorSelectedBarAvatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full, 50%);
    background: linear-gradient(135deg, var(--accent-dark, #1F3A65), var(--success, #44D7B6));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: calc(16px * var(--body-scale, 1));
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}

.pub_content_1008_authorSelectedBarAvatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pub_content_1008_authorSelectedBarName {
    font-size: calc(14px * var(--heading-scale, 1));
    font-weight: 600;
    color: var(--success-text, #166534);
}

.pub_content_1008_authorSelectedBarRole {
    font-size: calc(12px * var(--body-scale, 1));
    color: var(--success, #22c55e);
}

.pub_content_1008_authorChangeBtn {
    padding: 6px 14px;
    font-size: calc(12px * var(--body-scale, 1));
    font-weight: 600;
    color: var(--success-text, #166534);
    background: var(--success-bg-light, #dcfce7);
    border: 1.5px solid var(--success-border, #86efac);
    border-radius: var(--radius-md, 6px);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pub_content_1008_authorChangeBtn:hover {
    background: var(--success-bg-hover, #bbf7d0);
}



/* ══════════════════════════════════════════════════════════════
   AUTHOR — All 3 layouts (Inline, Side, Card)
   CSS consolidated here so BE SSR scopes it with instance IDs
   ══════════════════════════════════════════════════════════════ */

/* ── AuthorInline ────────────────────────────────────────── */
.pub_content_1008_inlineRoot {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--author-border, var(--border, #e5e7eb));
    color: var(--author-text, var(--text, #374151));
    font-family: var(--font-body, system-ui, sans-serif);
    text-align: left;
}

.pub_content_1008_inlineRoot:hover .pub_content_1008_inlineAvatarWrap {
}

.pub_content_1008_inlineRoot[data-author-padding="compact"] {
    padding-top: 16px;
}

.pub_content_1008_inlineRoot[data-author-padding="relaxed"] {
    padding-top: 32px;
}

.pub_content_1008_inlineRoot[data-author-padding="spacious"] {
    padding-top: 40px;
}

.pub_content_1008_inlineRoot[data-author-avatar="xs"] .pub_content_1008_inlineAvatarWrap {
    width: 28px;
    height: 28px;
}

.pub_content_1008_inlineRoot[data-author-avatar="xs"] .pub_content_1008_inlineAvatarPlaceholder {
    font-size: calc(0.625rem * var(--body-scale, 1));
}

.pub_content_1008_inlineRoot[data-author-avatar="sm"] .pub_content_1008_inlineAvatarWrap {
    width: 36px;
    height: 36px;
}

.pub_content_1008_inlineRoot[data-author-avatar="sm"] .pub_content_1008_inlineAvatarPlaceholder {
    font-size: calc(0.75rem * var(--body-scale, 1));
}

.pub_content_1008_inlineRoot[data-author-avatar="lg"] .pub_content_1008_inlineAvatarWrap {
    width: 56px;
    height: 56px;
}

.pub_content_1008_inlineRoot[data-author-avatar="lg"] .pub_content_1008_inlineAvatarPlaceholder {
    font-size: calc(1rem * var(--body-scale, 1));
}

.pub_content_1008_inlineRoot[data-author-avatar="xl"] .pub_content_1008_inlineAvatarWrap {
    width: 68px;
    height: 68px;
}

.pub_content_1008_inlineRoot[data-author-avatar="xl"] .pub_content_1008_inlineAvatarPlaceholder {
    font-size: calc(1.125rem * var(--body-scale, 1));
}

.pub_content_1008_inlineRoot[data-author-align="center"] {
    text-align: center;
}

.pub_content_1008_inlineRoot[data-author-align="center"] .pub_content_1008_inlineTopRow {
    justify-content: center;
}

.pub_content_1008_inlineRoot[data-author-align="right"] {
    text-align: right;
}

.pub_content_1008_inlineRoot[data-author-align="right"] .pub_content_1008_inlineTopRow {
    justify-content: flex-end;
}

.pub_content_1008_inlineInner {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 100%;
}

.pub_content_1008_inlineAvatarWrap {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full, 50%);
    overflow: hidden;
    background: var(--author-bg, #f3f4f6);
    transition: box-shadow 0.25s ease;
}

.pub_content_1008_inlineAvatarImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pub_content_1008_inlineAvatarPlaceholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(0.875rem * var(--body-scale, 1));
    font-weight: 600;
    color: var(--author-accent, #6b7280);
    background: var(--author-bg, #f3f4f6);
    text-transform: uppercase;
}

.pub_content_1008_inlineContent {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 6px;
    flex: 1;
    min-width: 0;
    font-size: calc(0.9375rem * var(--body-scale, 1));
    color: var(--author-text, #374151);
}

.pub_content_1008_byLabel {
    font-weight: 400;
    color: var(--author-text, #6b7280);
}

.pub_content_1008_inlineName {
    font-weight: 600;
    color: var(--author-text, #111827);
    white-space: nowrap;
}

.pub_content_1008_inlineRole {
    color: var(--author-text, #6b7280);
    font-weight: 400;
    white-space: nowrap;
}

.pub_content_1008_inlineRole::before {
    content: ', ';
    color: var(--author-text, #9ca3af);
}

.pub_content_1008_inlineSocialRow {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    margin-left: 4px;
}

.pub_content_1008_inlineSocialLink {
    display: inline-flex;
    align-items: center;
    color: var(--author-text, #6b7280);
    font-size: calc(0.875rem * var(--body-scale, 1));
    text-decoration: none;
    transition: color 0.2s ease;
}

.pub_content_1008_inlineSocialLink:hover {
    color: var(--author-accent, #2563eb);
}

.pub_content_1008_inlineTopRow {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
}

.pub_content_1008_inlineBio {
    margin: 12px 0 0;
    font-size: calc(0.875rem * var(--body-scale, 1));
    line-height: var(--leading, 1.6);
    color: var(--author-text, #4b5563);
}

/* ── AuthorSide ──────────────────────────────────────────── */
.pub_content_1008_sideRoot {
    display: flex;
gap: var(--space-gap, 24px);
    align-items: flex-start;
    margin-top: 48px;
    padding: var(--space-card-padding, 32px);
    background: var(--author-bg, #f9fafb);
    border: 1px solid var(--author-border, #e5e7eb);
    border-radius: 14px;
    color: var(--author-text, var(--text, #374151));
    font-family: var(--font-body, system-ui, sans-serif);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.pub_content_1008_sideRoot:hover {
    border-color: var(--author-border, #d1d5db);
}

.pub_content_1008_sideRoot[data-author-padding="compact"] {
    padding: 20px;
}

.pub_content_1008_sideRoot[data-author-padding="relaxed"] {
    padding: 40px;
}

.pub_content_1008_sideRoot[data-author-padding="spacious"] {
    padding: var(--pt, 48px) 2rem var(--pb, 48px);
}

.pub_content_1008_sideRoot[data-author-avatar="xs"] .pub_content_1008_sideAvatarWrap {
    width: 40px;
    height: 40px;
}

.pub_content_1008_sideRoot[data-author-avatar="xs"] .pub_content_1008_sideAvatarPlaceholder {
    font-size: calc(0.875rem * var(--body-scale, 1));
}

.pub_content_1008_sideRoot[data-author-avatar="sm"] .pub_content_1008_sideAvatarWrap {
    width: 52px;
    height: 52px;
}

.pub_content_1008_sideRoot[data-author-avatar="sm"] .pub_content_1008_sideAvatarPlaceholder {
    font-size: calc(1rem * var(--body-scale, 1));
}

.pub_content_1008_sideRoot[data-author-avatar="lg"] .pub_content_1008_sideAvatarWrap {
    width: 80px;
    height: 80px;
}

.pub_content_1008_sideRoot[data-author-avatar="lg"] .pub_content_1008_sideAvatarPlaceholder {
    font-size: calc(1.5rem * var(--body-scale, 1));
}

.pub_content_1008_sideRoot[data-author-avatar="xl"] .pub_content_1008_sideAvatarWrap {
    width: 96px;
    height: 96px;
}

.pub_content_1008_sideRoot[data-author-avatar="xl"] .pub_content_1008_sideAvatarPlaceholder {
    font-size: calc(1.75rem * var(--body-scale, 1));
}

.pub_content_1008_sideRoot[data-author-align="center"] {
    margin-left: auto;
    margin-right: auto;
}

.pub_content_1008_sideRoot[data-author-align="right"] {
    margin-left: auto;
}

.pub_content_1008_sideAvatarWrap {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full, 50%);
    overflow: hidden;
    background: var(--author-bg, #f3f4f6);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.pub_content_1008_sideRoot:hover .pub_content_1008_sideAvatarWrap {
    transform: scale(1.02);
}

.pub_content_1008_sideAvatarImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pub_content_1008_sideAvatarPlaceholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(1.25rem * var(--body-scale, 1));
    font-weight: 600;
    color: var(--author-accent, #6b7280);
    background: var(--author-bg, #f3f4f6);
    text-transform: uppercase;
}

.pub_content_1008_sideContent {
    flex: 1;
    min-width: 0;
}

.pub_content_1008_label {
    font-size: calc(0.6875rem * var(--body-scale, 1));
    font-weight: 600;
    letter-spacing: var(--tracking, 0.08em);
    text-transform: uppercase;
    color: var(--author-accent, #6b7280);
    margin-bottom: 6px;
}

.pub_content_1008_sideName {
    font-size: calc(1.0625rem * var(--heading-scale, 1));
    font-weight: 600;
    color: var(--author-text, #111827);
    line-height: var(--leading, 1.3);
}

.pub_content_1008_sideRole {
    font-size: calc(0.875rem * var(--body-scale, 1));
    color: var(--author-text, #6b7280);
    font-weight: 400;
    margin-top: 2px;
}

.pub_content_1008_sideBio {
    font-size: calc(0.9375rem * var(--body-scale, 1));
    line-height: var(--leading, 1.65);
    color: var(--author-text, #4b5563);
    margin: 10px 0 0;
}

.pub_content_1008_sideSocialRow {
    display: flex;
    align-items: center;
gap: var(--space-content-gap, 12px);
    margin-top: 16px;
}

.pub_content_1008_sideSocialLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-lg, 8px);
    color: var(--author-text, #6b7280);
    background: var(--author-bg, #f3f4f6);
    font-size: calc(0.9375rem * var(--body-scale, 1));
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.pub_content_1008_sideSocialLink:hover {
    color: var(--author-accent, #2563eb);
    background: color-mix(in srgb, var(--author-accent, #2563eb) 12%, white);
    transform: translateY(-2px);
}

/* ── AuthorCard ──────────────────────────────────────────── */
.pub_content_1008_cardRoot {
    margin-top: 48px;
    padding: 44px 36px 40px;
    background: linear-gradient(180deg, var(--author-bg, #fafbfc) 0%, var(--author-bg, #f8f9fb) 100%);
    border: 1px solid var(--author-border, #e5e7eb);
    border-radius: 18px;
    text-align: center;
    color: var(--author-text, var(--text, #374151));
    font-family: var(--font-body, system-ui, sans-serif);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    position: relative;
    overflow: hidden;
}

/* Subtle top accent line */
.pub_content_1008_cardRoot::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: linear-gradient(to right, transparent, var(--author-accent, #2563eb), transparent);
    border-radius: 0 0 4px 4px;
}

.pub_content_1008_cardRoot:hover {
    border-color: var(--author-border, #d1d5db);
    transform: translateY(-1px);
}

.pub_content_1008_cardRoot[data-author-padding="compact"] {
    padding: 24px 20px 22px;
}

.pub_content_1008_cardRoot[data-author-padding="relaxed"] {
    padding: 46px 36px 42px;
}

.pub_content_1008_cardRoot[data-author-padding="spacious"] {
    padding: var(--pt, 56px) 44px var(--pb, 52px) ;
}

.pub_content_1008_cardInner {
    max-width: 100%;
    margin: 0 auto;
}

.pub_content_1008_cardAvatarWrap {
    width: 88px;
    height: 88px;
    border-radius: var(--radius-full, 50%);
    overflow: hidden;
    margin: 0 auto 20px;
    background: var(--author-bg, #f3f4f6);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.pub_content_1008_cardRoot:hover .pub_content_1008_cardAvatarWrap {
    transform: scale(1.03);
}

.pub_content_1008_cardRoot[data-author-avatar="xs"] .pub_content_1008_cardAvatarWrap {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
}

.pub_content_1008_cardRoot[data-author-avatar="xs"] .pub_content_1008_cardAvatarPlaceholder {
    font-size: calc(1rem * var(--body-scale, 1));
}

.pub_content_1008_cardRoot[data-author-avatar="sm"] .pub_content_1008_cardAvatarWrap {
    width: 68px;
    height: 68px;
    margin-bottom: 16px;
}

.pub_content_1008_cardRoot[data-author-avatar="sm"] .pub_content_1008_cardAvatarPlaceholder {
    font-size: calc(1.375rem * var(--body-scale, 1));
}

.pub_content_1008_cardRoot[data-author-avatar="lg"] .pub_content_1008_cardAvatarWrap {
    width: 108px;
    height: 108px;
    margin-bottom: 24px;
}

.pub_content_1008_cardRoot[data-author-avatar="lg"] .pub_content_1008_cardAvatarPlaceholder {
    font-size: calc(2.125rem * var(--body-scale, 1));
}

.pub_content_1008_cardRoot[data-author-avatar="xl"] .pub_content_1008_cardAvatarWrap {
    width: 128px;
    height: 128px;
    margin-bottom: 28px;
}

.pub_content_1008_cardRoot[data-author-avatar="xl"] .pub_content_1008_cardAvatarPlaceholder {
    font-size: calc(2.5rem * var(--body-scale, 1));
}

.pub_content_1008_cardRoot[data-author-align="left"] .pub_content_1008_cardInner {
    margin-left: 0;
    margin-right: auto;
}

.pub_content_1008_cardRoot[data-author-align="right"] .pub_content_1008_cardInner {
    margin-left: auto;
    margin-right: 0;
}

.pub_content_1008_cardAvatarImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pub_content_1008_cardAvatarPlaceholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(1.75rem * var(--body-scale, 1));
    font-weight: 600;
    color: var(--author-accent, #6b7280);
    background: var(--author-bg, #f3f4f6);
    text-transform: uppercase;
}

.pub_content_1008_cardName {
    font-size: calc(1.125rem * var(--heading-scale, 1));
    font-weight: 700;
    color: var(--author-text, #111827);
    line-height: var(--leading, 1.35);
    letter-spacing: var(--tracking, -0.01em);
}

.pub_content_1008_cardRole {
    font-size: calc(0.875rem * var(--body-scale, 1));
    color: var(--author-accent, #6b7280);
    font-weight: 500;
    margin-top: 4px;
    letter-spacing: var(--tracking, 0.01em);
}

.pub_content_1008_cardSeparator {
    width: 32px;
    height: 3px;
    margin: 20px auto;
    border: none;
    background: linear-gradient(to right, transparent, var(--author-accent, #d1d5db), transparent);
    border-radius: 2px;
    opacity: 0.6;
}

.pub_content_1008_cardBio {
    font-size: calc(0.9375rem * var(--body-scale, 1));
    line-height: var(--leading, 1.75);
    color: var(--author-text, #4b5563);
    margin: 0;
}

.pub_content_1008_cardSocialRow {
    display: flex;
    align-items: center;
    justify-content: center;
gap: var(--space-content-gap, 12px);
    margin-top: 16px;
}

.pub_content_1008_cardSocialLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-lg, 8px);
    color: var(--author-text, #6b7280);
    background: var(--author-bg, #f3f4f6);
    font-size: calc(0.9375rem * var(--body-scale, 1));
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.pub_content_1008_cardSocialLink:hover {
    color: var(--author-accent, #2563eb);
    background: color-mix(in srgb, var(--author-accent, #2563eb) 12%, white);
    transform: translateY(-2px);
}

/* ── Author responsive (768px) ──────────────────────────── */
@media (max-width: 768px) {
    .pub_content_1008_sideRoot {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 24px 20px;
        gap: 18px;
    }

    .pub_content_1008_sideRoot[data-author-padding="compact"] {
        padding: 16px 14px;
    }

    .pub_content_1008_sideRoot[data-author-padding="relaxed"] {
        padding: 32px 26px;
    }

    .pub_content_1008_sideRoot[data-author-padding="spacious"] {
        padding: 38px 32px;
    }

    .pub_content_1008_sideAvatarWrap {
        width: 56px;
        height: 56px;
    }

    .pub_content_1008_sideRoot[data-author-avatar="xs"] .pub_content_1008_sideAvatarWrap {
        width: 36px;
        height: 36px;
    }

    .pub_content_1008_sideRoot[data-author-avatar="sm"] .pub_content_1008_sideAvatarWrap {
        width: 46px;
        height: 46px;
    }

    .pub_content_1008_sideRoot[data-author-avatar="lg"] .pub_content_1008_sideAvatarWrap {
        width: 68px;
        height: 68px;
    }

    .pub_content_1008_sideRoot[data-author-avatar="xl"] .pub_content_1008_sideAvatarWrap {
        width: 80px;
        height: 80px;
    }

    .pub_content_1008_cardRoot {
        padding: 28px 20px;
    }

    .pub_content_1008_cardRoot[data-author-padding="compact"] {
        padding: 18px 14px 16px;
    }

    .pub_content_1008_cardRoot[data-author-padding="relaxed"] {
        padding: 34px 26px 30px;
    }

    .pub_content_1008_cardRoot[data-author-padding="spacious"] {
        padding: 40px 30px 36px;
    }

    .pub_content_1008_cardAvatarWrap {
        width: 76px;
        height: 76px;
    }

    .pub_content_1008_cardRoot[data-author-avatar="xs"] .pub_content_1008_cardAvatarWrap {
        width: 42px;
        height: 42px;
    }

    .pub_content_1008_cardRoot[data-author-avatar="sm"] .pub_content_1008_cardAvatarWrap {
        width: 58px;
        height: 58px;
    }

    .pub_content_1008_cardRoot[data-author-avatar="lg"] .pub_content_1008_cardAvatarWrap {
        width: 92px;
        height: 92px;
    }

    .pub_content_1008_cardRoot[data-author-avatar="xl"] .pub_content_1008_cardAvatarWrap {
        width: 108px;
        height: 108px;
    }

    .pub_content_1008_inlineRoot {
        padding-top: 20px;
    }

    .pub_content_1008_inlineRoot[data-author-padding="compact"] {
        padding-top: 12px;
    }

    .pub_content_1008_inlineRoot[data-author-padding="relaxed"] {
        padding-top: 26px;
    }

    .pub_content_1008_inlineRoot[data-author-padding="spacious"] {
        padding-top: 32px;
    }

    .pub_content_1008_inlineContent {
        gap: 2px 4px;
        font-size: calc(0.875rem * var(--body-scale, 1));
    }

    .pub_content_1008_inlineInner {
        gap: var(--space-content-gap, 8px);
    }
}

/* ── Author responsive (480px) ──────────────────────────── */
@media (max-width: 480px) {
    .pub_content_1008_sideRoot {
        padding: 16px 12px;
        gap: var(--space-content-gap, 16px);
    }

    .pub_content_1008_sideRoot[data-author-padding="compact"] {
        padding: 12px 10px;
    }

    .pub_content_1008_sideRoot[data-author-padding="relaxed"] {
        padding: 24px 18px;
    }

    .pub_content_1008_sideRoot[data-author-padding="spacious"] {
        padding: 28px 22px;
    }

    .pub_content_1008_sideAvatarWrap {
        width: 48px;
        height: 48px;
    }

    .pub_content_1008_sideRoot[data-author-avatar="xs"] .pub_content_1008_sideAvatarWrap {
        width: 32px;
        height: 32px;
    }

    .pub_content_1008_sideRoot[data-author-avatar="sm"] .pub_content_1008_sideAvatarWrap {
        width: 40px;
        height: 40px;
    }

    .pub_content_1008_sideRoot[data-author-avatar="lg"] .pub_content_1008_sideAvatarWrap {
        width: 60px;
        height: 60px;
    }

    .pub_content_1008_sideRoot[data-author-avatar="xl"] .pub_content_1008_sideAvatarWrap {
        width: 72px;
        height: 72px;
    }

    .pub_content_1008_cardRoot {
        padding: 24px 16px;
    }

    .pub_content_1008_cardRoot[data-author-padding="compact"] {
        padding: 14px 10px 12px;
    }

    .pub_content_1008_cardRoot[data-author-padding="relaxed"] {
        padding: 28px 20px 24px;
    }

    .pub_content_1008_cardRoot[data-author-padding="spacious"] {
        padding: 34px 24px 30px;
    }

    .pub_content_1008_cardAvatarWrap {
        width: 72px;
        height: 72px;
    }

    .pub_content_1008_cardRoot[data-author-avatar="xs"] .pub_content_1008_cardAvatarWrap {
        width: 38px;
        height: 38px;
    }

    .pub_content_1008_cardRoot[data-author-avatar="sm"] .pub_content_1008_cardAvatarWrap {
        width: 54px;
        height: 54px;
    }

    .pub_content_1008_cardRoot[data-author-avatar="lg"] .pub_content_1008_cardAvatarWrap {
        width: 86px;
        height: 86px;
    }

    .pub_content_1008_cardRoot[data-author-avatar="xl"] .pub_content_1008_cardAvatarWrap {
        width: 100px;
        height: 100px;
    }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .blog-editor-content {
        padding: 16px 0;
        min-height: 300px;
    }

    .blog-editor-toolbar {
        padding: 6px 8px;
        gap: 1px;
    }

    .toolbar-btn {
        min-width: 28px;
        height: 28px;
        padding: 0 6px;
    }

    .toolbar-select {
        height: 28px;
        min-width: 42px;
        max-width: 64px;
        padding: 0 4px;
    }

    .blog-editor-content .ProseMirror {
        min-height: 250px;
    }

    .ProseMirror pre,
    .blog-content-renderer pre {
        padding: 16px 18px;
    }

    .ProseMirror table,
    .blog-content-renderer table {
    }

    /* ── Tags responsive ── */
    .pub_content_1008_ssrTagsSection {
        margin-top: 28px;
        padding-top: 20px;
    }

    .pub_content_1008_ssrTagPill {
        padding: 4px 10px;
        font-size: calc(0.75rem * var(--body-scale, 1));
    }

    .pub_content_1008_tagChip {
        font-size: calc(0.6875rem * var(--body-scale, 1));
        padding: 3px 6px;
        padding-right: 3px;
    }

    .pub_content_1008_tagInput {
        padding: 6px 12px;
        font-size: calc(0.8125rem * var(--body-scale, 1));
    }

    .pub_content_1008_tagSuggestionItem,
    .pub_content_1008_tagCreateNewItem {
        padding: 6px 12px;
        font-size: calc(0.75rem * var(--body-scale, 1));
    }
}

@media (max-width: 480px) {
    .blog-editor-content {
        padding: 12px 0;
        min-height: 250px;
    }

    .blog-editor-toolbar {
        gap: 0;
    }

    .toolbar-btn {
        min-width: 26px;
        height: 26px;
        padding: 0 4px;
    }

    .toolbar-select {
        height: 26px;
        min-width: 36px;
        max-width: 56px;
        padding: 0 2px;
    }

    .toolbar-divider {
        margin: 0 2px;
    }
}

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .pub_content_1008_section *,
    .toolbar-btn,
    .bubble-btn,
    .slash-menu-item {
        animation: none !important;
        transition: none !important;
    }

    .pub_content_1008_tagChip {
        transition: none;
    }

    .pub_content_1008_tagChipRemove {
        transition: none;
    }

    .pub_content_1008_tagSpinner {
        animation: none;
    }

    .pub_content_1008_authorSocialLink {
        transition: none;
    }

    .pub_content_1008_authorSocialLink:hover {
        transform: none;
    }
}

/* ══════════════════════════════════════════════════════════════
   Image Insert Popup
   ══════════════════════════════════════════════════════════════ */
.blog-editor-image-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-max, 9999);
    /* above all builder panels */
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--overlay-bg, rgba(0, 0, 0, 0.35));
    backdrop-filter: blur(2px);
}

.blog-editor-image-popup {
    background: var(--popup-bg, #ffffff);
    border-radius: var(--radius-xl, 16px);
    width: 440px;
    max-width: 90vw;
    overflow: hidden;
    animation: pub_content_1008_popupFadeIn 0.2s ease-out;
}

@keyframes pub_content_1008_popupFadeIn {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.blog-editor-image-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 0;
    font-size: var(--fs-15, 15px);
    font-weight: 650;
    color: var(--popup-heading, #111827);
    letter-spacing: var(--tracking, -0.01em);
}

.blog-editor-image-popup-close {
    background: none;
    border: none;
    color: var(--popup-muted, #9ca3af);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-lg, 8px);
    transition: color 0.15s ease, background 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-editor-image-popup-close:hover {
    color: var(--popup-text, #374151);
    background: var(--popup-hover, #f3f4f6);
}

.blog-editor-image-popup-tabs {
    display: flex;
    gap: 0;
    margin: 16px 24px 0;
    background: var(--popup-tabs-bg, #f3f4f6);
    border-radius: var(--radius-md, 10px);
    padding: 3px;
}

.popup-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-content-gap, 6px);
    padding: 8px 12px;
    border: none;
    background: transparent;
    font-size: var(--fs-13, 13px);
    font-weight: 550;
    color: var(--popup-muted, #6b7280);
    cursor: pointer;
    border-radius: var(--radius-lg, 8px);
    transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    font-family: var(--font-body, system-ui, sans-serif);
}

.popup-tab.active {
    color: var(--popup-text, #111827);
    background: var(--popup-bg, #ffffff);
}

.popup-tab:hover:not(.active) {
    color: var(--popup-text, #374151);
}

.blog-editor-image-popup-body {
    padding: 20px 24px 24px;
}

.blog-editor-image-popup-error {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    background: var(--error-bg, #fef2f2);
    color: var(--error-color, #dc2626);
    font-size: var(--fs-12, 12px);
    padding: 10px 14px;
    border-radius: var(--radius-md, 10px);
    margin-bottom: 16px;
    border: 1px solid var(--error-border, #fecaca);
    font-weight: 450;
}

.blog-editor-image-popup-error svg {
    flex-shrink: 0;
}

.popup-url-mode {
    display: flex;
    gap: var(--space-content-gap, 10px);
}

.popup-url-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 10px);
    padding: 0 14px;
    border: 1.5px solid var(--popup-border, #d1d5db);
    border-radius: var(--radius-md, 10px);
    background: var(--popup-input-bg, #ffffff);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.popup-url-input-wrap:focus-within {
    border-color: var(--accent, #3b82f6);
}

.popup-url-icon {
    flex-shrink: 0;
    color: var(--popup-muted, #9ca3af);
}

.popup-url-input {
    flex: 1;
    padding: 11px 0;
    border: none;
    font-size: var(--fs-13, 13px);
    font-family: var(--font-body, system-ui, sans-serif);
    outline: none;
    background: transparent;
    color: var(--popup-text, #374151);
}

.popup-url-input::placeholder {
    color: var(--popup-muted, #b0b7c3);
}

.popup-btn {
    padding: 11px 22px;
    border-radius: var(--radius-md, 10px);
    font-size: var(--fs-13, 13px);
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.15s ease, opacity 0.15s ease;
    font-family: var(--font-body, system-ui, sans-serif);
    white-space: nowrap;
}

.popup-btn-primary {
    background: var(--accent, #3b82f6);
    color: var(--popup-btn-text, #ffffff);
}

.popup-btn-primary:hover {
    opacity: 0.9;
}

/* ── Upload: Drop zone ── */
.popup-upload-mode {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.popup-file-input-hidden {
    display: none;
}

.popup-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 36px 20px;
    border: 2px dashed var(--popup-border, #d1d5db);
    border-radius: 14px;
    background: var(--popup-dropzone-bg, #fafafa);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.popup-dropzone:hover {
    border-color: var(--accent, #3b82f6);
    background: var(--popup-dropzone-hover, #f0f7ff);
}

.popup-dropzone.dragover {
    border-color: var(--accent, #3b82f6);
    background: var(--popup-dropzone-hover, #eff6ff);
}

.popup-dropzone-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    min-height: 52px;
    border-radius: 14px;
    background: var(--popup-dropzone-icon-bg, #eff6ff);
    color: var(--accent, #3b82f6);
}

.popup-dropzone-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-content-gap, 4px);
}

.popup-dropzone-title {
    font-size: var(--fs-13, 13px);
    color: var(--popup-text, #374151);
    font-weight: 450;
}

.popup-dropzone-title strong {
    color: var(--accent, #3b82f6);
    font-weight: 600;
}

.popup-dropzone-hint {
    font-size: var(--fs-11, 11.5px);
    color: var(--popup-muted, #9ca3af);
}

/* ── Upload: Progress ── */
.popup-uploading {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 0;
}

.popup-uploading-info {
    display: flex;
    align-items: center;
gap: var(--space-content-gap, 12px);
}

.popup-uploading-info svg {
    flex-shrink: 0;
    color: var(--accent, #3b82f6);
}

.popup-uploading-filename {
    font-size: var(--fs-13, 13px);
    font-weight: 550;
    color: var(--popup-text, #111827);
    word-break: break-all;
}

.popup-uploading-status {
    font-size: var(--fs-11, 11.5px);
    color: var(--popup-muted, #6b7280);
    margin-top: 1px;
}

.popup-upload-progress {
    display: flex;
    align-items: center;
gap: var(--space-content-gap, 12px);
}

.popup-progress-bar {
    flex: 1;
    height: 5px;
    background: var(--popup-progress-bg, #e5e7eb);
    border-radius: var(--radius-sm, 4px);
    overflow: hidden;
}

.popup-progress-fill {
    height: 100%;
    background: var(--accent, #3b82f6);
    border-radius: var(--radius-sm, 4px);
    transition: width 0.25s ease;
}

.popup-progress-text {
    font-size: var(--fs-11, 11.5px);
    color: var(--popup-muted, #6b7280);
    min-width: 34px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 550;
}

/* ─────────────────────────────────────────────────────────────
   PUB-CTA-1008 — Clarity CTA
   1008 series: deep indigo gradient bg · centered layout
   Pairs with: PUB-HERO-1008, PUB-NAV-1008, PUB-SERVICE-1008,
               PUB-GALLERY-1008, PUB-MENU-1008
   ───────────────────────────────────────────────────────────── */

/* ── Root ───────────────────────────────────────────────────── */
.pub_cta_1008_root {
    --radial-1: rgba(139, 92, 246, 0.38);
    --radial-2: rgba(99, 102, 241, 0.28);
    --radial-3: rgba(167, 139, 250, 0.22);
    --badge-bg: rgba(165, 180, 252, 0.15);
    --badge-border: rgba(165, 180, 252, 0.3);
    --accent-start: #a78bfa;
    --accent-mid: #c4b5fd;
    --accent-end: #e0d7ff;
    --desc-color: rgba(248, 250, 252, 0.72);
    --trust-color: rgba(248, 250, 252, 0.82);
    --btn-primary-bg: #ffffff;
    --btn-primary-text: #1e1b4b;
    --btn-primary-hover-bg: #ede9fe;
    --btn-primary-shadow: rgba(165, 180, 252, 0.4);
    --btn-secondary-border: rgba(248, 250, 252, 0.35);
    --btn-secondary-hover-bg: rgba(248, 250, 252, 0.08);
    --btn-secondary-hover-border: rgba(248, 250, 252, 0.6);
    --stars-color: #fbbf24;
    --review-color: rgba(248, 250, 252, 0.8);
    width: 100%;
    padding: var(--pt, 96px) 24px var(--pb, 96px);
    background: var(--texture-bg, none),
        radial-gradient(ellipse 70% 55% at 50% 0%, var(--radial-1, rgba(139, 92, 246, 0.38)) 0%, transparent 65%),
        radial-gradient(ellipse 50% 40% at 0% 100%, var(--radial-2, rgba(99, 102, 241, 0.28)) 0%, transparent 55%),
        radial-gradient(ellipse 40% 35% at 100% 80%, var(--radial-3, rgba(167, 139, 250, 0.22)) 0%, transparent 55%),
        color-mix(in srgb, color-mix(in srgb, var(--bg, #1e1b4b) calc(var(--material-bg-opacity, 1) * 100%), transparent) calc(var(--material-bg-opacity, 1) * 100%), transparent);
    font-family: var(--font-body, system-ui, -apple-system, sans-serif);
    color: var(--text, #f8fafc);
    overflow: hidden;
    position: relative;
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Container ──────────────────────────────────────────────── */
.pub_cta_1008_container {
    max-width: var(--max-w, 860px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-gap, 40px);
    text-align: center;
    position: relative;
    z-index: var(--z-base, 1);
    /* above decorative radial gradients */
}

/* ── Badge ──────────────────────────────────────────────────── */
.pub_cta_1008_badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 6px);
    padding: 5px 16px;
    background: var(--badge-bg, rgba(165, 180, 252, 0.15));
    border: 1px solid var(--badge-border, rgba(165, 180, 252, 0.3));
    border-radius: var(--radius-full, 999px);
    font-size: calc(0.8125rem * var(--heading-scale, 1));
    font-weight: 600;
    letter-spacing: var(--tracking, 0.04em);
    text-transform: uppercase;
    color: var(--text, #f8fafc);
}

/* ── Header Wrap ────────────────────────────────────────────── */
.pub_cta_1008_headerWrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-content-gap, 16px);
    max-width: 680px;
}

/* ── Title ──────────────────────────────────────────────────── */
.pub_cta_1008_title {
    font-family: var(--font-heading, var(--font-body, system-ui, sans-serif));
    font-weight: 800;
    line-height: var(--leading, 1.1);
    letter-spacing: var(--tracking, -0.03em);
    color: var(--text, #f8fafc);
    margin: 0;
}

/* ── Title Accent (gradient light purple) ───────────────────── */
.pub_cta_1008_titleAccent {
    display: block;
    font-weight: 900;
    line-height: var(--leading, 1.1);
    letter-spacing: var(--tracking, -0.035em);
    margin: 0;
    background: linear-gradient(110deg, var(--accent-start, #a78bfa) 0%, var(--accent-mid, #c4b5fd) 50%, var(--accent-end, #e0d7ff) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-bottom: 0.1em;
}

/* ── Description ────────────────────────────────────────────── */
.pub_cta_1008_description {
    line-height: var(--leading, 1.7);
    color: var(--desc-color, rgba(248, 250, 252, 0.72));
    max-width: 560px;
    margin: 0;
}

/* ── Trust Row ──────────────────────────────────────────────── */
.pub_cta_1008_trustRow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 28px;
}

.pub_cta_1008_trustItem {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: calc(0.875rem * var(--body-scale, 1));
    font-weight: 500;
    color: var(--trust-color, rgba(248, 250, 252, 0.82));
}

/* ── Button Group ───────────────────────────────────────────── */
.pub_cta_1008_btnGroup {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
gap: var(--space-content-gap, 12px);
}

.pub_cta_1008_btnPrimary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    padding: 14px 32px;
    background: var(--btn-primary-bg, #ffffff);
    color: var(--btn-primary-text, #1e1b4b);
    font-size: calc(1rem * var(--body-scale, 1));
    font-weight: 700;
    border-radius: var(--radius-lg, 8px);
    text-decoration: none;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

.pub_cta_1008_btnPrimary:hover {
    background: var(--btn-primary-hover-bg, #ede9fe);
    transform: translateY(-2px);
}

.pub_cta_1008_btnSecondary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    padding: 14px 32px;
    background: transparent;
    color: var(--text, #f8fafc);
    font-size: calc(1rem * var(--body-scale, 1));
    font-weight: 600;
    border-radius: var(--radius-lg, 8px);
    border: 1.5px solid var(--btn-secondary-border, rgba(248, 250, 252, 0.35));
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

.pub_cta_1008_btnSecondary:hover {
    background: var(--btn-secondary-hover-bg, rgba(248, 250, 252, 0.08));
    border-color: var(--btn-secondary-hover-border, rgba(248, 250, 252, 0.6));
    transform: translateY(-2px);
}

/* ── Social Proof Badge ─────────────────────────────────────── */
.pub_cta_1008_socialProof {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 10px);
    opacity: 0.85;
}

.pub_cta_1008_stars {
    color: var(--stars-color, #fbbf24);
}

.pub_cta_1008_reviewCount {
    font-size: calc(0.875rem * var(--body-scale, 1));
    font-weight: 500;
    color: var(--review-color, rgba(248, 250, 252, 0.8));
}

/* ── Scroll Reveal ──────────────────────────────────────────── */
.pub_cta_1008_root [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.pub_cta_1008_root [data-reveal][data-visible='true'] {
    opacity: 1;
    transform: none;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 576px) {

    .pub_cta_1008_btnPrimary,
    .pub_cta_1008_btnSecondary {
        width: 100%;
        justify-content: center;
    }

    .pub_cta_1008_btnGroup {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
    }
}

/* ── Reduced Motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pub_cta_1008_root [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .pub_cta_1008_btnPrimary,
    .pub_cta_1008_btnSecondary {
        transition: none;
    }
}

/* ============================================================
   PUB-FOOTER-1008 — Universal Footer (4-column grid layout)
   1008 series: #0f172a bg · #6366f1 accent · Inter font
   Layouts: grid | stacked | minimal  (via data-layout attr)
   ============================================================ */

/* ── Root / Section wrapper ─────────────────────────────── */
.pub_footer_1008_root {
    --newsletter-input-bg: rgba(255, 255, 255, 0.06);
    --newsletter-focus-shadow: rgba(99, 102, 241, 0.2);
    --alert-color: #f87171;
    --btn-text: #fff;
    background: var(--texture-bg, none),
        color-mix(in srgb, color-mix(in srgb, var(--bg, #0f172a) calc(var(--material-bg-opacity, 1) * 100%), transparent) calc(var(--material-bg-opacity, 1) * 100%), transparent);
    color: var(--text, #e2e8f0);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    padding-top: var(--pt, 80px);
    padding-bottom: var(--pb, 40px);
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Container ───────────────────────────────────────────── */
.pub_footer_1008_container {
    max-width: var(--max-w, 1200px);
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 3rem);
}

/* ── Main grid ───────────────────────────────────────────── */
.pub_footer_1008_mainGrid {
    display: grid;
    grid-template-columns: 1.8fr 2fr 1fr 1.4fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
}

/* stacked layout overrides */
.pub_footer_1008_root[data-layout="stacked"] .pub_footer_1008_mainGrid {
    grid-template-columns: 1fr;
    gap: var(--space-gap, 2rem);
}

/* minimal layout overrides */
.pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_mainGrid {
    grid-template-columns: 1fr auto;
    gap: var(--space-gap, 2rem);
    align-items: center;
}

.pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_contactCol,
.pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_newsletterCol {
    display: none;
}

/* ── Brand Column ────────────────────────────────────────── */
.pub_footer_1008_brandCol {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.75rem);
}

.pub_footer_1008_brandLogo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 0.5rem);
    color: var(--accent, #6366f1);
    font-family: var(--font-heading, var(--font-body, 'Inter', system-ui, sans-serif));
    font-weight: 700;
    letter-spacing: var(--tracking, -0.02em);
    text-decoration: none;
    margin-bottom: 0.25rem;
    border-radius: var(--radius-sm, 4px);
}

.pub_footer_1008_brandLogo:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 3px;
}

.pub_footer_1008_brandLogo i {
    color: var(--accent, #6366f1);
}

.pub_footer_1008_brandDesc {
    color: var(--text-muted, #94a3b8);
    line-height: var(--leading, 1.65);
    margin: 0;
}

/* ── Social Icons ────────────────────────────────────────── */
.pub_footer_1008_socialRow {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 0.5rem);
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.pub_footer_1008_socialLink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-height: 36px;
    border-radius: var(--radius-lg, 8px);
    background: var(--social-bg, rgba(255, 255, 255, 0.08));
    color: var(--text-muted, #94a3b8);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    border: 1px solid var(--footer-border, rgba(255, 255, 255, 0.08));
}

.pub_footer_1008_socialLink:hover {
    background: var(--accent, #6366f1);
    color: var(--social-hover-text, #fff);
    transform: translateY(-2px);
    border-color: var(--accent, #6366f1);
}

.pub_footer_1008_socialLink i {
    font-size: calc(1rem * var(--body-scale, 1));
    line-height: var(--leading, 1);
}

/* ── Links Grid ──────────────────────────────────────────── */
.pub_footer_1008_linksArea {
    /* wrapper for the links grid zone */
}

.pub_footer_1008_linksGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: clamp(1rem, 2vw, 2rem);
}

.pub_footer_1008_linksCol {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Reset browser list defaults inside FooterLinksColumn */
.pub_footer_1008_linksCol ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.25rem);
}

.pub_footer_1008_linksCol li {
    margin: 0;
    padding: 0;
}

/* ── Column Headings ─────────────────────────────────────── */
.pub_footer_1008_colHeading {
    color: var(--text, #e2e8f0);
    font-family: var(--font-heading, var(--font-body, 'Inter', system-ui, sans-serif));
    font-weight: 700;
    letter-spacing: var(--tracking, 0.1em);
    text-transform: uppercase;
    margin: 0 0 0.875rem;
}

/* ── Nav Column Links ────────────────────────────────────── */
.pub_footer_1008_footerLink {
    display: inline-block;
    color: var(--text-muted, #94a3b8);
    text-decoration: none;
    line-height: var(--leading, 1.5);
    padding: 0.125rem 0;
    border-radius: var(--radius-sm, 4px);
    transition: color 180ms ease;
}

.pub_footer_1008_footerLink:hover {
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_footerLink:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 2px;
    color: var(--text, #e2e8f0);
}

/* ── Contact Column ──────────────────────────────────────── */
.pub_footer_1008_contactCol {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.25rem);
}

.pub_footer_1008_contactItem {
    display: flex;
    align-items: flex-start;
    gap: var(--space-content-gap, 0.5rem);
    color: var(--text-muted, #94a3b8);
    line-height: var(--leading, 1.5);
    margin-bottom: 0.5rem;
}

.pub_footer_1008_contactIcon {
    color: var(--accent, #6366f1);
    font-size: calc(1rem * var(--body-scale, 1));
    margin-top: 0.1em;
    flex-shrink: 0;
}

.pub_footer_1008_contactText {
    color: var(--text-muted, #94a3b8);
    text-decoration: none;
    border-radius: var(--radius-sm, 4px);
    transition: color 180ms ease;
}

.pub_footer_1008_contactText:hover {
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_contactText:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 2px;
    color: var(--text, #e2e8f0);
}

/* ── Newsletter Column ───────────────────────────────────── */
.pub_footer_1008_newsletterCol {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.75rem);
}

/* Space out the input and button inside the newsletter form */
.pub_footer_1008_newsletterCol form {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.625rem);
}

/* Email validation error message — min-height reserves 1 line always to prevent CLS */
.pub_footer_1008_newsletterCol form span[role="alert"] {
    display: block;
    min-height: calc(0.8125rem * 1.4);
    color: var(--alert-color, #f87171);
    font-size: calc(0.8125rem * var(--body-scale, 1));
    line-height: var(--leading, 1.4);
}

.pub_footer_1008_newsletterInput {
    width: 100%;
    background: var(--newsletter-input-bg, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
    border-radius: var(--radius-md, 6px);
    color: var(--text, #e2e8f0);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: calc(0.9375rem * var(--body-scale, 1));
    padding: 0.625rem 0.875rem;
    outline: none;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.pub_footer_1008_newsletterInput:focus {
    border-color: var(--accent, #6366f1);
}

.pub_footer_1008_newsletterInput::placeholder {
    color: var(--text-muted, #64748b);
}

.pub_footer_1008_newsletterBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent, #6366f1);
    color: var(--btn-text, #fff);
    border: none;
    border-radius: var(--radius-md, 6px);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    font-size: calc(0.9375rem * var(--body-scale, 1));
    font-weight: 600;
    letter-spacing: var(--tracking, -0.01em);
    padding: 0.625rem 1.25rem;
    cursor: pointer;
    transition: opacity 150ms ease;
}

.pub_footer_1008_newsletterBtn:hover {
    opacity: 0.88;
}

.pub_footer_1008_newsletterBtn:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 3px;
    opacity: 0.88;
}

/* ── Map ─────────────────────────────────────────────────── */
.pub_footer_1008_mapWrapper {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: var(--radius-lg, 8px);
    overflow: hidden;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

/* ── App Badges ──────────────────────────────────────────── */
.pub_footer_1008_appBadges {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 1rem);
    flex-wrap: wrap;
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* ── Divider ─────────────────────────────────────────────── */
.pub_footer_1008_divider {
    border: none;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    margin: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(1rem, 2vw, 1.5rem);
}

/* ── Bottom Bar ──────────────────────────────────────────── */
.pub_footer_1008_bottomBarWrapper {
    background: var(--bottom-bg, transparent);
}

.pub_footer_1008_bottomBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-content-gap, 0.75rem);
}

.pub_footer_1008_copyright {
    color: var(--text-muted, #64748b);
    margin: 0;
    line-height: var(--leading, 1.5);
}

.pub_footer_1008_legalLinks {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.125rem;
}

.pub_footer_1008_legalLink {
    color: var(--text-muted, #64748b);
    text-decoration: none;
    border-radius: var(--radius-sm, 4px);
    padding: 0.125rem 0.25rem;
    transition: color 180ms ease;
}

.pub_footer_1008_legalLink:hover {
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_legalLink:focus-visible {
    outline: 2px solid var(--accent, #6366f1);
    outline-offset: 2px;
    color: var(--text, #e2e8f0);
}

.pub_footer_1008_legalSep {
    color: var(--text-muted, #475569);
    font-size: calc(0.875rem * var(--body-scale, 1));
    user-select: none;
}

/* ── Certifications Row ──────────────────────────────────── */
.pub_footer_1008_certsRow {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 1rem);
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* ── Interactive states ──────────────────────────────────── */

/* ── @media 1024px ───────────────────────────────────────── */
@media (max-width: 1024px) {
    .pub_footer_1008_mainGrid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-gap, 2rem);
    }

    .pub_footer_1008_root[data-layout="minimal"] .pub_footer_1008_mainGrid {
        grid-template-columns: 1fr;
    }
}

/* ── @media 768px ────────────────────────────────────────── */
@media (max-width: 768px) {
    .pub_footer_1008_mainGrid {
        grid-template-columns: 1fr;
        gap: var(--space-gap, 1.75rem);
    }

    .pub_footer_1008_linksGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pub_footer_1008_bottomBar {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-content-gap, 0.5rem);
    }
}

/* ── @media 480px ────────────────────────────────────────── */
@media (max-width: 480px) {
    .pub_footer_1008_linksGrid {
        grid-template-columns: 1fr;
    }

    .pub_footer_1008_appBadges {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── prefers-reduced-motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .pub_footer_1008_footerLink,
    .pub_footer_1008_contactText,
    .pub_footer_1008_legalLink,
    .pub_footer_1008_brandLogo,
    .pub_footer_1008_newsletterInput,
    .pub_footer_1008_newsletterBtn {
        transition: none;
    }
}

/* Page: blog */
/* PUB-BLOG-1008 — Aurora Blog Grid
 * 1008 series: white bg + indigo #6366f1 accent · clean content grid
 * JS states: [data-visible='true'] for scroll reveal (SSR only).
 * Dynamic data: blogPosts injected from pageModel (pageType: 'blog') on SSR.
 */

/* ── Root / Section ─────────────────────────────────────────────────────── */
.pub_grid_1008_root {
    --radial-1: rgba(99, 102, 241, 0.06);
    --radial-2: rgba(168, 85, 247, 0.04);
    --badge-border: rgba(99, 102, 241, 0.2);
    --card-radius: 12px;
    --card-shadow: 0 1px 3px var(--shadow-light, rgba(0, 0, 0, 0.06)), 0 1px 2px var(--shadow-lighter, rgba(0, 0, 0, 0.04));
    --card-shadow-hover: 0 10px 25px var(--shadow-hover, rgba(0, 0, 0, 0.08)), 0 4px 10px var(--shadow-hover-light, rgba(0, 0, 0, 0.04));
    --img-h: 200px;
    --t: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    padding: var(--pt, 96px) 24px var(--pb, 96px);
    background: var(--texture-bg, none),
        radial-gradient(ellipse 55% 40% at 100% 0%, var(--radial-1, rgba(99, 102, 241, 0.06)) 0%, transparent 60%),
        radial-gradient(ellipse 40% 30% at 0% 100%, var(--radial-2, rgba(168, 85, 247, 0.04)) 0%, transparent 55%),
        color-mix(in srgb, color-mix(in srgb, var(--bg, #ffffff) calc(var(--material-bg-opacity, 1) * 100%), transparent) calc(var(--material-bg-opacity, 1) * 100%), transparent);
    font-family: var(--font-body, system-ui, -apple-system, sans-serif);
    color: var(--text, #0f172a);
    /* ⚠️ Do NOT add overflow:hidden, transform, or isolation here —
       they create stacking contexts that let blog content paint above
       the navbar (which uses isolation:isolate + traps its z-index). */

    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* ── Container ──────────────────────────────────────────────────────────── */
.pub_grid_1008_container {
    max-width: var(--max-w, 1200px);
    margin-inline: auto;
    padding-inline: 24px;
}

/* ── Section Header ─────────────────────────────────────────────────────── */
.pub_grid_1008_headerWrap {
    text-align: center;
    margin-bottom: 48px;
}

.pub_grid_1008_sectionHeader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-content-gap, 12px);
}

.pub_grid_1008_badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 6px);
    padding: 6px 14px;
    border: 1px solid var(--badge-border, rgba(99, 102, 241, 0.2));
    border-radius: 100px;
    background: var(--badge-bg, #eef2ff);
    color: var(--badge-text, #6366f1);
    font-family: var(--font-body, system-ui, -apple-system, sans-serif);
    font-weight: 600;
    letter-spacing: var(--tracking, 0.04em);
    text-transform: uppercase;
}

.pub_grid_1008_title {
    font-family: var(--font-heading, 'Inter', system-ui, sans-serif);
    font-weight: 700;
    line-height: var(--leading, 1.15);
    color: var(--text, #0f172a);
    letter-spacing: var(--tracking, -0.02em);
    margin: 0;
}

.pub_grid_1008_titleAccent {
    display: block;
    background: linear-gradient(135deg, var(--accent, #6366f1), var(--secondary, #a78bfa));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pub_grid_1008_description {
    line-height: var(--leading, 1.6);
    color: var(--text-muted, #64748b);
    max-width: 580px;
    margin: 8px 0 0;
}

/* ── Blog Grid ──────────────────────────────────────────────────────────── */
.pub_grid_1008_grid {
    display: grid;
    grid-template-columns: repeat(var(--blog-cols, 3), 1fr);
    gap: clamp(16px, 2.5vw, 28px);
}

/* ── Card ───────────────────────────────────────────────────────────────── */
.pub_grid_1008_card {
    display: flex;
    flex-direction: column;
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--card-border, #e2e8f0);
    border-radius: var(--card-radius, 12px);
    overflow: hidden;
    transition:
        box-shadow var(--t, 0.25s ease),
        border-color var(--t, 0.25s ease);
}

.pub_grid_1008_card:hover {
    border-color: var(--accent, #6366f1);
}

.pub_grid_1008_cardImage {
    width: 100%;
    height: var(--img-h, 200px);
    object-fit: cover;
    display: block;
    background: linear-gradient(135deg, var(--accent, #6366f1), var(--secondary, #a78bfa));
    /* Gradient overlay for depth — inset shadow, no stacking context */
}

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

.pub_grid_1008_cardContent {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 10px);
    padding: 24px 24px 28px;
    flex: 1;
}

.pub_grid_1008_cardCategory {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 100px;
    background: var(--cat-bg, rgba(99, 102, 241, 0.08));
    color: var(--accent, #6366f1);
    font-size: var(--fs-cat, clamp(10px, 1.1vw, 11px));
    font-weight: 700;
    letter-spacing: var(--tracking, 0.05em);
    text-transform: uppercase;
    text-decoration: none;
    transition: background var(--t, 0.2s ease), color var(--t, 0.2s ease);
}

.pub_grid_1008_cardCategory:hover {
    background: var(--accent, #6366f1);
    color: var(--badge-text, #ffffff);
}

/* Category dot indicator */
.pub_grid_1008_cardCategory::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: var(--radius-full, 50%);
    background: currentColor;
    flex-shrink: 0;
}

.pub_grid_1008_cardTitle {
    font-family: var(--font-heading, 'Inter', system-ui, sans-serif);
    font-size: var(--fs-card-title, clamp(16px, 1.8vw, 19px));
    font-weight: 600;
    line-height: var(--leading, 1.35);
    color: var(--text, #0f172a);
    margin: 0;
    transition: color var(--t, 0.25s ease);
    /* Animated underline effect (no transform) */
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) left 1.1em / 0% 2px no-repeat;
    transition: color var(--t, 0.25s ease), background-size var(--t, 0.25s ease);
}

.pub_grid_1008_card:hover .pub_grid_1008_cardTitle {
    color: var(--accent, #6366f1);
    background-size: 100% 2px;
}

.pub_grid_1008_cardTitle a {
    color: inherit;
    text-decoration: none;
}

.pub_grid_1008_cardExcerpt {
    font-size: var(--fs-body, 14px);
    line-height: var(--leading, 1.65);
    color: var(--text-muted, #64748b);
    margin: 2px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pub_grid_1008_cardMeta {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 6px);
    font-size: var(--fs-meta, 12px);
    color: var(--text-muted, #94a3b8);
    margin-top: auto;
    padding-top: 14px;
    font-weight: 500;
}

/* Dot separator between meta items */
.pub_grid_1008_cardMeta span+span::before {
    content: '·';
    margin: 0 6px;
    font-weight: 700;
    color: var(--border, #cbd5e1);
}

.pub_grid_1008_cardMeta span {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 4px);
}

.pub_grid_1008_cardAuthor {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 10px);
    font-size: var(--fs-author, clamp(12px, 1.2vw, 13px));
    font-weight: 600;
    color: var(--text, #0f172a);
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--border, #eef2f6);
}

/* ImageBlock wrapper inside author (BlogCard passes dynamic class) */
.pub_grid_1008_cardAuthor>div {
    display: flex;
    flex-shrink: 0;
    line-height: var(--leading, 0);
}

.pub_grid_1008_cardAuthor img {
    width: var(--author-img-size, 30px);
    height: var(--author-img-size, 30px);
    border-radius: var(--radius-full, 50%);
    object-fit: cover;
    border: 2px solid var(--border, #eef2f6);
    flex-shrink: 0;
    display: block;
}

.pub_grid_1008_cardAuthor span,
.pub_grid_1008_cardAuthor a {
    line-height: var(--leading, 1);
    color: inherit;
    text-decoration: none;
    transition: color var(--t, 0.2s ease);
}

.pub_grid_1008_cardAuthor a:hover {
    color: var(--accent, #6366f1);
}

/* No avatar fallback — show placeholder circle */
.pub_grid_1008_cardAuthor span:first-child:last-child::before,
.pub_grid_1008_cardAuthor a:first-child:last-child::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full, 50%);
    background: var(--cat-bg, rgba(99, 102, 241, 0.12));
    border: 2px solid var(--border, #eef2f6);
    flex-shrink: 0;
    margin-right: 10px;
    vertical-align: middle;
}

/* ── Tags ─────────────────────────────────────── */
.pub_grid_1008_cardTags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-content-gap, 6px);
    margin-top: 8px;
}

.pub_grid_1008_cardTag {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 100px;
    background: var(--cat-bg, rgba(99, 102, 241, 0.06));
    color: var(--text-muted, #64748b);
    font-size: var(--fs-tag, 11px);
    font-weight: 500;
    text-decoration: none;
    transition: background var(--t, 0.2s ease), color var(--t, 0.2s ease);
}

.pub_grid_1008_cardTag:hover {
    background: var(--accent, #6366f1);
    color: var(--badge-text, #ffffff);
}

/* ── Interactive States ─────────────────────────────────────────────────── */
.pub_grid_1008_card a {
    text-decoration: none;
}

/* ── Empty State Banner (Page Builder) ──────────────────────────────────── */
.pub_grid_1008_emptyStateBanner {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 10px);
    flex-wrap: wrap;
    padding: 12px 18px;
    margin-bottom: 28px;
    border-radius: var(--radius-md, 10px);
    background: var(--cat-bg, rgba(99, 102, 241, 0.06));
    border: 1px dashed var(--cat-border, rgba(99, 102, 241, 0.25));
    color: var(--accent, #6366f1);
    font-size: calc(13px * var(--body-scale, 1));
    font-weight: 500;
    line-height: var(--leading, 1.4);
}

.pub_grid_1008_emptyStateHint {
    color: var(--text-muted, #94a3b8);
    font-weight: 400;
    font-size: calc(12px * var(--body-scale, 1));
}

/* ── Placeholder Card Badge ─────────────────────────────────────────────── */
.pub_grid_1008_placeholderBadge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: var(--z-above, 2);
    /* above card image */
    padding: 3px 8px;
    border-radius: var(--radius-md, 6px);
    background: var(--badge-bg-solid, rgba(99, 102, 241, 0.85));
    color: var(--badge-text, #ffffff);
    font-size: calc(10px * var(--heading-scale, 1));
    font-weight: 600;
    letter-spacing: var(--tracking, 0.03em);
    text-transform: uppercase;
    pointer-events: none;
}

/* ── Pagination ──────────────────────────────────────────────────────────── */
.pub_grid_1008_pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-content-gap, 8px);
    margin-top: 48px;
    padding-top: 28px;
    border-top: none;
    position: relative;
    flex-wrap: wrap;
}

/* Gradient line separator above pagination */
.pub_grid_1008_pagination::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    max-width: 360px;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            var(--border, #e2e8f0) 30%,
            var(--accent, #6366f1) 50%,
            var(--border, #e2e8f0) 70%,
            transparent 100%);
}

.pub_grid_1008_paginationPages {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 4px);
}

.pub_grid_1008_paginationBtn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    padding: 9px 20px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 100px;
    background: var(--card-bg, #ffffff);
    color: var(--text, #0f172a);
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: calc(13px * var(--body-scale, 1));
    font-weight: 500;
    cursor: pointer;
    transition:
        all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    white-space: nowrap;
}

.pub_grid_1008_paginationBtn:hover:not(:disabled) {
    background: var(--card-bg, #ffffff);
    border-color: var(--accent, #6366f1);
    color: var(--accent, #6366f1);
    box-shadow:
        var(--shadow-md, 0 4px 12px rgba(99, 102, 241, 0.12)),
        var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
    transform: translateY(-1px);
}

.pub_grid_1008_paginationBtn:active:not(:disabled) {
    transform: translateY(0);
}

.pub_grid_1008_paginationBtn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.pub_grid_1008_paginationBtn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Hide text label on small screens, show icon only */
@media (max-width: 420px) {
    .pub_grid_1008_paginationBtn span {
        display: none;
    }

    .pub_grid_1008_paginationBtn {
        padding: 9px 14px;
        min-width: 38px;
        justify-content: center;
    }

    .pub_grid_1008_paginationBtn:first-child svg {
        margin: 0;
    }

    .pub_grid_1008_paginationBtn:last-child svg {
        margin: 0;
    }
}

.pub_grid_1008_paginationPage {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 4px;
    border: 1px solid transparent;
    border-radius: var(--radius-md, 10px);
    background: transparent;
    color: var(--text-muted, #64748b);
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: calc(14px * var(--body-scale, 1));
    font-weight: 500;
    cursor: pointer;
    transition:
        all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    position: relative;
}

.pub_grid_1008_paginationPage:hover:not(:disabled) {
    background: var(--cat-bg, rgba(99, 102, 241, 0.05));
    color: var(--accent, #6366f1);
    border-color: var(--cat-border-light, rgba(99, 102, 241, 0.12));
}

.pub_grid_1008_paginationPage:disabled {
    cursor: default;
}

.pub_grid_1008_paginationActive {
    background: linear-gradient(135deg, var(--accent, #6366f1), var(--accent-light, #818cf8));
    border-color: transparent;
    color: var(--badge-text, #ffffff);
    font-weight: 600;
    cursor: default;
    pointer-events: none;
    box-shadow:
        var(--shadow-md, 0 4px 12px rgba(99, 102, 241, 0.25)),
        var(--shadow-sm, 0 1px 3px rgba(99, 102, 241, 0.15));
    transform: scale(1.05);
}

.pub_grid_1008_paginationActive:hover {
    background: linear-gradient(135deg, var(--accent, #6366f1), var(--accent-light, #818cf8));
    color: var(--badge-text, #ffffff);
}

.pub_grid_1008_paginationDots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 38px;
    color: var(--text-muted, #94a3b8);
    font-size: calc(14px * var(--body-scale, 1));
    letter-spacing: var(--tracking, 3px);
    user-select: none;
}

/* ── Media: Tablet (max-width: 1024px) ──────────────────────────────────── */
@media (max-width: 1024px) {
    .pub_grid_1008_grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pub_grid_1008_headerWrap {
        margin-bottom: 36px;
    }

    .pub_grid_1008_pagination::before {
        width: 80%;
    }
}

/* ── Media: Mobile (max-width: 768px) ───────────────────────────────────── */
@media (max-width: 768px) {
    .pub_grid_1008_root {
        padding: var(--pt, 96px) 16px var(--pb, 96px);
    }

    .pub_grid_1008_container {
        padding-inline: 16px;
    }

    .pub_grid_1008_grid {
        grid-template-columns: 1fr;
        gap: var(--space-content-gap, 20px);
    }

    .pub_grid_1008_cardContent {
        padding: 16px 16px 20px;
    }

    .pub_grid_1008_headerWrap {
        margin-bottom: 28px;
    }

    .pub_grid_1008_pagination::before {
        width: 90%;
    }

    .pub_grid_1008_pagination {
        margin-top: 36px;
        padding-top: 24px;
        gap: var(--space-content-gap, 6px);
    }

    .pub_grid_1008_paginationBtn {
        padding: 7px 14px;
        font-size: calc(12px * var(--body-scale, 1));
        gap: var(--space-content-gap, 6px);
        border-radius: 100px;
    }

    .pub_grid_1008_paginationBtn svg {
        width: 12px;
        height: 12px;
    }

    .pub_grid_1008_paginationPage {
        min-width: 34px;
        height: 34px;
        font-size: calc(13px * var(--body-scale, 1));
        border-radius: var(--radius-lg, 8px);
    }

    .pub_grid_1008_paginationActive {
        transform: scale(1.03);
        box-shadow:
            var(--shadow-md, 0 3px 8px rgba(99, 102, 241, 0.2)),
            var(--shadow-sm, 0 1px 2px rgba(99, 102, 241, 0.12));
    }

    .pub_grid_1008_paginationDots {
        min-width: 24px;
        height: 34px;
    }
}

/* ── Media: Small Mobile (max-width: 480px) ─────────────────────────────── */
@media (max-width: 480px) {
    .pub_grid_1008_cardImage {
        height: var(--img-h-mobile, 180px);
    }

    .pub_grid_1008_cardMeta {
        flex-wrap: wrap;
        gap: var(--space-content-gap, 8px);
    }
}

/* ── Reduced Motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pub_grid_1008_card {
        transition: none;
    }

    .pub_grid_1008_card:hover {
        transform: none;
    }
}