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

/* Page: home */
/* ============================================================
   PUB-NAV-1009 — Symmetry Centered Nav
   Series 1009 · Center-logo · 3-column grid · Frosted glass on scroll · Adaptive theme
   State: data-scrolled on .navBar  |  data-open on .mobileDrawer/.drawerOverlay
   ============================================================ */

/* ── Root ────────────────────────────────────────────────── */
.pub_nav_1009_navRoot {
    --t: 0.22s ease;
    --t-slow: 0.35s ease;
    --r: 6px;
    --r-lg: 12px;
    --r-btn: 999px;
    --fs-brand: clamp(15px, 1.5vw, 18px);
    --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.6vw, 22px);
    --fs-caret: 10px;
    --hover-bg: rgba(167, 139, 250, 0.1);
    --hover-bg-strong: rgba(167, 139, 250, 0.12);

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

/* ── Transparent bar (default) ───────────────────────────── */
.pub_nav_1009_navBar {
    position: var(--navbar-position, fixed);
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav, 1000);
    /* above page content, below drawers */
    background-color: var(--bg, rgba(10, 10, 20, 0.90));
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.06));
    transition:
        background-color var(--t, 0.22s ease),
        border-color var(--t, 0.22s ease),
        box-shadow var(--t, 0.22s ease),
        backdrop-filter var(--t, 0.22s ease);
    padding-top: var(--pt, 0);
    padding-bottom: var(--pb, 0);
}

/* ── Frosted glass on scroll ─────────────────────────────── */
.pub_nav_1009_navBar[data-scrolled='true'] {
    background-color: var(--bg, rgba(10, 10, 20, 0.82));
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-color: var(--border, rgba(255, 255, 255, 0.10));
}

/* ── 3-column center grid ────────────────────────────────── */
.pub_nav_1009_navInner {
    max-width: var(--max-w, 1280px);
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 48px);
    min-height: var(--nav-h, 72px);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
gap: var(--space-gap, 24px);
}

/* ── Left: Nav Links ─────────────────────────────────────── */
.pub_nav_1009_navLeft {
    display: flex;
    justify-content: flex-start;
    /* links anchored to left edge */
}

.pub_nav_1009_navLinks {
  /* composed: navLinks from NavBase.module.css */
  display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    /* gap: set in component */
    gap: 2px;
}

.pub_nav_1009_dropWrap {
    position: relative;
}

.pub_nav_1009_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 12px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 500;
    color: var(--text, #f9fafb);
    border-radius: var(--r, 6px);
}

.pub_nav_1009_navLink:hover {
    color: var(--accent, #a78bfa);
    background-color: var(--hover-bg, rgba(167, 139, 250, 0.1));
}

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

.pub_nav_1009_navLinkBtn:hover {
    color: var(--accent, #a78bfa);
    background-color: var(--hover-bg, rgba(167, 139, 250, 0.1));
}

.pub_nav_1009_navCaret {
    font-size: var(--fs-caret, 10px);
    transition: transform var(--t, 0.22s ease);
}

/* ── Dropdown panel ──────────────────────────────────────── */
.pub_nav_1009_navDropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 168px;
    background-color: var(--bg, rgba(18, 18, 32, 0.92));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    border-radius: var(--r-lg, 12px);
    padding: 6px;
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-6px);
    transition:
        opacity var(--t, 0.22s ease),
        transform var(--t, 0.22s ease);
    z-index: var(--z-dropdown, 1200);
    /* above nav content */
}

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

.pub_nav_1009_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, #f9fafb);
    text-decoration: none;
    border-radius: var(--r, 6px);
    transition: color var(--t, 0.22s ease), background-color var(--t, 0.22s ease);
    white-space: nowrap;
}

.pub_nav_1009_ddItem:hover {
    color: var(--accent, #a78bfa);
    background-color: var(--hover-bg, rgba(167, 139, 250, 0.1));
}

/* ── Center: Logo ────────────────────────────────────────── */
.pub_nav_1009_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, #f9fafb);
    text-decoration: none;
    justify-self: center;
}

.pub_nav_1009_logoMark {
    font-size: var(--fs-icon, clamp(18px, 1.6vw, 22px));
    color: var(--accent, #a78bfa);
    line-height: var(--leading, 1);
}

.pub_nav_1009_logoWord {
    font-size: var(--fs-brand, clamp(15px, 1.5vw, 18px));
    font-weight: 700;
    letter-spacing: var(--tracking, -0.02em);
    color: var(--text, #f9fafb);
    font-family: var(--font-heading, var(--font-body, 'Inter', system-ui, sans-serif));
    white-space: nowrap;
}

.pub_nav_1009_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);
}

/* ── Right: CTA + Hamburger ──────────────────────────────── */
.pub_nav_1009_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, 10px);
    justify-content: flex-end;
    /* CTA anchored to right edge */
}

.pub_nav_1009_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: 8px 20px;
    background-color: var(--cta-bg, #7c3aed);
    color: var(--cta-text, #ffffff);
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 600;
    border-radius: var(--r-btn, 999px);
    white-space: nowrap;
}

.pub_nav_1009_navCta:hover {
    background-color: var(--cta-hover, rgba(124, 58, 237, 0.88));
    transform: translateY(-1px);
}

/* ── Hamburger ───────────────────────────────────────────── */
.pub_nav_1009_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.6vw, 22px));
    color: var(--text, #f9fafb);
    border-radius: var(--r, 6px);
    display: none;
    /* visible on mobile via media query */
}

.pub_nav_1009_hamburger:hover {
    background-color: var(--hover-bg-strong, rgba(167, 139, 250, 0.12));
}

.pub_nav_1009_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, #f9fafb);
    border-radius: 2px;
}

/* ── Drawer Overlay ──────────────────────────────────────── */
.pub_nav_1009_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 navbar, below drawer panel */
    background-color: var(--overlay-bg, rgba(10, 10, 20, 0.5));
}

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

/* ── Mobile Drawer ───────────────────────────────────────── */
.pub_nav_1009_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);
    /* topmost layer */
    width: min(320px, 85vw);
    background-color: var(--bg, #0f0f1e);
    border-left: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

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

/* ── Drawer Header ───────────────────────────────────────── */
.pub_nav_1009_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, rgba(255, 255, 255, 0.08));
}

.pub_nav_1009_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, 18px));
    font-weight: 700;
    color: var(--text, #f9fafb);
}

.pub_nav_1009_drawerBrandMark {
    font-size: var(--fs-icon, clamp(18px, 1.6vw, 22px));
    color: var(--accent, #a78bfa);
}

.pub_nav_1009_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, #f9fafb);
    border-radius: var(--r, 6px);
}

.pub_nav_1009_drawerCloseBtn:hover {
    background-color: var(--hover-bg, rgba(167, 139, 250, 0.1));
}

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

.pub_nav_1009_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, #f9fafb);
    border-radius: var(--r, 6px);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
}

.pub_nav_1009_drawerLink:hover {
    color: var(--accent, #a78bfa);
    background-color: var(--hover-bg, rgba(167, 139, 250, 0.1));
}

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

.pub_nav_1009_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_1009_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-muted, #a1a1b5);
    border-radius: var(--r, 6px);
    display: block;
}

.pub_nav_1009_drawerSubLink:hover {
    color: var(--accent, #a78bfa);
    background-color: var(--hover-bg, rgba(167, 139, 250, 0.1));
}

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

.pub_nav_1009_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, #7c3aed);
    color: var(--cta-text, #ffffff);
    font-size: var(--fs-drawer, clamp(14px, 1.4vw, 15px));
    font-weight: 600;
    border-radius: var(--r-btn, 999px);
    text-align: center;
}

.pub_nav_1009_drawerCta:hover {
    background-color: var(--cta-hover, rgba(124, 58, 237, 0.88));
}

/* ══════════════════════════════════════════════════════════
   FOCUS STATES (accessibility)
══════════════════════════════════════════════════════════ */
.pub_nav_1009_navLink:focus-visible,
.pub_nav_1009_navLinkBtn:focus-visible,
.pub_nav_1009_navCta:focus-visible,
.pub_nav_1009_hamburger:focus-visible,
.pub_nav_1009_drawerCloseBtn:focus-visible,
.pub_nav_1009_drawerLink:focus-visible,
.pub_nav_1009_drawerSubLink:focus-visible,
.pub_nav_1009_drawerCta:focus-visible {
    outline: 2px solid var(--accent, #a78bfa);
    outline-offset: 3px;
    border-radius: var(--r, 6px);
}

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

/* ── Tablet (1024px) ─────────────────────────────────────── */
@media (max-width: 1024px) {
    .pub_nav_1009_navLinks {
        gap: 0;
    }

    .pub_nav_1009_navLink,
    .pub_nav_1009_navLinkBtn {
        padding: 6px 8px;
    }
}

/* ── Tablet / Mobile (768px) ─────────────────────────────── */
@media (max-width: 768px) {
    .pub_nav_1009_navInner {
        /* switch to flex for mobile — logo centered with absolute positioning */
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }

    .pub_nav_1009_navLeft {
        display: none;
    }

    .pub_nav_1009_logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .pub_nav_1009_navCta {
        display: none;
    }

    .pub_nav_1009_hamburger {
        display: flex;
    }
}

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

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

    .pub_nav_1009_navBar,
    .pub_nav_1009_navLink,
    .pub_nav_1009_navLinkBtn,
    .pub_nav_1009_navDropdown,
    .pub_nav_1009_ddItem,
    .pub_nav_1009_navCta,
    .pub_nav_1009_drawerOverlay,
    .pub_nav_1009_mobileDrawer,
    .pub_nav_1009_drawerLink,
    .pub_nav_1009_drawerSubLink,
    .pub_nav_1009_drawerCta {
        transition: none;
    }
}

/* PUB-HERO-1021 */

.pub_hero_1021_root {
    position: relative;
    padding-top: var(--pt, 80px);
    padding-bottom: var(--pb, 80px);
    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, #f8fafc);
    min-height: var(--min-h, 600px);
    font-family: var(--font-body, system-ui, sans-serif);
    display: flex;
    align-items: center;
    overflow: hidden;

    /* Internal variables */
    --cta-shadow: rgba(139, 92, 246, 0.4);
    --cta-shadow-hover: rgba(139, 92, 246, 0.6);
    --modal-overlay-bg: rgba(15, 23, 42, 0.9);
    --btn-secondary-bg: rgba(255, 255, 255, 0.05);
    --border-light: rgba(255, 255, 255, 0.05);
    --ambient-glow: rgba(139, 92, 246, 0.1);

    /* Grid pattern */
    background-color: 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);
    background-image: linear-gradient(var(--border-light, rgba(255, 255, 255, 0.05)) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-light, rgba(255, 255, 255, 0.05)) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: center center;
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* Background glow effects */
.pub_hero_1021_root::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    width: 50%;
    height: 50%;
    background: radial-gradient(circle, var(--accent, rgba(139, 92, 246, 0.15)) 0%, transparent 70%);
    border-radius: var(--radius-full, 50%);
    filter: blur(80px);
    z-index: var(--z-bg, 0);
    /* Background layer */
    pointer-events: none;
    animation: pub_hero_1021_pulseGlow 8s ease-in-out infinite alternate;
}

.pub_hero_1021_root::after {
    content: '';
    position: absolute;
    bottom: -20%;
    right: -10%;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, var(--secondary, rgba(59, 130, 246, 0.15)) 0%, transparent 70%);
    border-radius: var(--radius-full, 50%);
    filter: blur(100px);
    z-index: var(--z-bg, 0);
    /* Background layer - glow behind content */
    pointer-events: none;
    animation: pub_hero_1021_pulseGlow2 10s ease-in-out infinite alternate-reverse;
}

@keyframes pub_hero_1021_pulseGlow {
    0% {
        transform: scale(1) translate(0, 0);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.2) translate(5%, 5%);
        opacity: 0.8;
    }
}

@keyframes pub_hero_1021_pulseGlow2 {
    0% {
        transform: scale(1) translate(0, 0);
        opacity: 0.4;
    }

    100% {
        transform: scale(1.3) translate(-5%, -5%);
        opacity: 0.7;
    }
}

.pub_hero_1021_container {
    width: 100%;
    max-width: var(--max-w, 1280px);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    position: relative;
    z-index: var(--z-base, 1);
    /* Base layer for content */
}

/* Layout variants */
.pub_hero_1021_split-right .pub_hero_1021_container {
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

.pub_hero_1021_split-left .pub_hero_1021_container {
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

.pub_hero_1021_split-left .pub_hero_1021_contentSide {
    order: 2;
}

.pub_hero_1021_split-left .pub_hero_1021_mediaSide {
    order: 1;
}

/* Media Queries for layout */
@media (max-width: 1024px) {

    .pub_hero_1021_split-right .pub_hero_1021_container,
    .pub_hero_1021_split-left .pub_hero_1021_container {
        grid-template-columns: 1fr;
        gap: var(--space-gap, 3rem);
    }

    .pub_hero_1021_split-left .pub_hero_1021_contentSide {
        order: 1;
    }

    .pub_hero_1021_split-left .pub_hero_1021_mediaSide {
        order: 2;
    }
}

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

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

/* Typography & Content */
.pub_hero_1021_headline {
    font-family: var(--font-heading, system-ui, sans-serif);
    line-height: var(--leading, 1.05);
    font-weight: 900;
    letter-spacing: var(--tracking, -0.03em);
    margin-bottom: 1.5rem;
    position: relative;
    z-index: var(--z-elevated, 10);
    /* Elevated above glow */
}

.pub_hero_1021_accent {
    background: linear-gradient(135deg, var(--accent, #8B5CF6) 0%, var(--secondary, #3B82F6) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.pub_hero_1021_typewriterWrapper {
    display: inline-grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    color: var(--accent, #8B5CF6);
    text-align: left;
}

.pub_hero_1021_hiddenGhost {
    grid-area: 1 / 1 / 2 / 2;
    visibility: hidden;
    pointer-events: none;
    user-select: none;
}

.pub_hero_1021_typewriterContent {
    grid-area: 1 / 1 / 2 / 2;
    display: inline-flex;
    align-items: center;
}

.pub_hero_1021_typewriterWord {
    display: inline-block;
    white-space: pre-wrap;
}

.pub_hero_1021_cursor {
    animation: pub_hero_1021_blink 1s step-end infinite;
}

@keyframes pub_hero_1021_blink {
    50% {
        opacity: 0;
    }
}

.pub_hero_1021_description {
    color: var(--text-muted, #94a3b8);
    line-height: var(--leading, 1.6);
    margin-bottom: 2.5rem;
    max-width: 32rem;
}

.pub_hero_1021_badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 0.5rem);
    padding: 0.5rem 1rem;
    background: var(--badge-bg, rgba(139, 92, 246, 0.1));
    color: var(--badge-text, #8B5CF6);
    border-radius: var(--radius-full, 9999px);
    font-size: calc(0.875rem * var(--heading-scale, 1));
    font-weight: 600;
    margin-bottom: 1.5rem;
}

/* Buttons */
.pub_hero_1021_ctaWrapper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-content-gap, 1rem);
    margin-bottom: 3rem;
}

.pub_hero_1021_primaryBtn {
    background: linear-gradient(135deg, var(--cta-bg, #8B5CF6) 0%, var(--btn-primary-hover, #7c3aed) 100%);
    color: var(--cta-text, #ffffff);
    padding: 1rem 2rem;
    border-radius: var(--radius-full, 9999px);
    /* Pill shape for premium feel */
    font-weight: 600;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    text-decoration: none;

    /* Glow effect */
    position: relative;
    overflow: hidden;
}

/* Sweeping shine effect */
.pub_hero_1021_primaryBtn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--btn-shine, rgba(255, 255, 255, 0.3)), transparent);
    transform: skewX(-20deg);
    animation: pub_hero_1021_shine 4s infinite;
}

@keyframes pub_hero_1021_shine {
    0% {
        left: -100%;
    }

    20% {
        left: 200%;
    }

    100% {
        left: 200%;
    }
}

.pub_hero_1021_primaryBtn:hover {
    transform: translateY(-2px) scale(1.02);

}

.pub_hero_1021_secondaryBtn {
    background: var(--btn-secondary-bg, rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(10px);
    color: var(--btn-secondary-text, #f8fafc);
    padding: 1rem 2rem;
    border-radius: var(--radius-full, 9999px);
    font-weight: 600;
    border: 1px solid var(--btn-secondary-border, rgba(255, 255, 255, 0.2));
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    text-decoration: none;
    box-shadow: var(--shadow-sm, none);
}

.pub_hero_1021_secondaryBtn:hover {
    background: var(--badge-bg, rgba(139, 92, 246, 0.1));
    border-color: var(--btn-secondary-text, #f8fafc);
    transform: translateY(-2px);
}

/* Stats */
.pub_hero_1021_statsWrapper {
    display: flex;
    gap: var(--space-gap, 2rem);
    padding-top: 2rem;
    border-top: 1px solid var(--border, #e5e7eb);
}

.pub_hero_1021_statItem {
    display: flex;
    flex-direction: column;
}

.pub_hero_1021_statNumber {
    font-size: calc(2rem * var(--heading-scale, 1));
    font-weight: 700;
    font-family: var(--font-heading, system-ui, sans-serif);
    color: var(--text, #f8fafc);
    line-height: var(--leading, 1);
    margin-bottom: 0.25rem;
}

.pub_hero_1021_statLabel {
    font-size: calc(0.875rem * var(--body-scale, 1));
    color: var(--text-muted, #94a3b8);
    font-weight: 500;
}

/* Media Side */
.pub_hero_1021_mediaSide {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pub_hero_1021_imageWrapper {
    position: relative;
    width: 100%;
    max-width: 640px;
    border-radius: var(--radius-xl, 2rem);
    transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
    /* Subtle 3D tilt */
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.pub_hero_1021_imageWrapper:hover {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}

.pub_hero_1021_imageInner {
    border-radius: 2.1rem;
    overflow: hidden;
    position: relative;
    z-index: var(--z-content, 20);
    /* Ensure image is above glow */
    padding: 2px;
    /* For animated border */
}

/* Rotating Gradient Border */
.pub_hero_1021_imageInner::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(transparent, var(--accent, rgba(139, 92, 246, 0.8)), transparent 30%);
    animation: pub_hero_1021_rotateBorder 5s linear infinite;
    z-index: var(--z-below, -2);
    /* Behind image mask */
}

/* Inner masking layer to hide gradient inside */
.pub_hero_1021_imageInner::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: var(--bg, #0F172A);
    border-radius: var(--radius-xl, 2rem);
    z-index: var(--z-under, -1);
    /* Mask inner gradient */

}

@keyframes pub_hero_1021_rotateBorder {
    100% {
        transform: rotate(360deg);
    }
}

.pub_hero_1021_heroImage {
    position: relative;
    z-index: var(--z-img, 1);
    /* Above mask */
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 4/3;
    border-radius: var(--radius-xl, 2rem);
    box-shadow: var(--shadow-sm, none);
}

/* Float Card */
.pub_hero_1021_floatCardWrapper {
    position: absolute;
    bottom: -2rem;
    left: -3rem;
    background: var(--card-bg, #1e293b);
    backdrop-filter: blur(20px);
    /* Premium dashboard glass */
    color: var(--text, #f8fafc);
    padding: var(--space-card-padding, 1.5rem);
    border-radius: var(--radius-xl, 1.25rem);
    border: var(--border-card, 1px solid var(--border-light, rgba(255, 255, 255, 0.05)));
    border-top: 1px solid var(--border-bright, rgba(255, 255, 255, 0.15));
    /* Shiny top edge */
    box-shadow: var(--shadow-xl, 0 30px 60px -15px rgba(0, 0, 0, 0.5)),
        var(--shadow-lg, 0 0 20px rgba(139, 92, 246, 0.1));
    /* Subtle ambient shadow */
    display: flex;
    align-items: center;
    gap: var(--space-gap, 1.25rem);
    animation: pub_hero_1021_float 6s ease-in-out infinite;
    z-index: var(--z-popover, 30);
    /* Elevate float card above image */
    transition: transform 0.3s ease;
}

.pub_hero_1021_floatCardWrapper:hover {
    animation-play-state: paused;
    transform: translateY(-5px) scale(1.05);
}

@keyframes pub_hero_1021_float {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(1deg);
    }

    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

.pub_hero_1021_floatCardIconWrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full, 50%);
    background: var(--icon-bg, rgba(139, 92, 246, 0.1));
    color: var(--icon-color, #8B5CF6);
}

.pub_hero_1021_floatCardIcon {
    font-size: calc(1.5rem * var(--body-scale, 1));
}

.pub_hero_1021_floatCard {
    display: flex;
    flex-direction: column;
}

.pub_hero_1021_floatCardValue {
    font-size: calc(1.25rem * var(--body-scale, 1));
    font-weight: 700;
    line-height: var(--leading, 1.2);
}

.pub_hero_1021_floatCardLabel {
    font-size: calc(0.875rem * var(--body-scale, 1));
    color: var(--text-muted, #94a3b8);
    opacity: 0.8;
}

/* Video & Overlay */
.pub_hero_1021_videoBg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-bg, 0);
    /* Background layer */
}

.pub_hero_1021_videoEl {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pub_hero_1021_overlay {
    position: absolute;
    inset: 0;
    background: var(--bg, #0F172A);
    opacity: var(--overlay-opacity, 0.4);
    pointer-events: none;
    z-index: var(--z-bg, 0);
    /* Above video but behind content */
}

/* Scroll indicator */
.pub_hero_1021_scrollIndicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-elevated, 10);
    /* Elevated so it is clickable */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-content-gap, 0.5rem);
    color: var(--text-muted, #94a3b8);
    text-decoration: none;
    animation: pub_hero_1021_bounce 2s infinite;
}

.pub_hero_1021_scrollIcon {
    font-size: calc(1.5rem * var(--body-scale, 1));
}

@keyframes pub_hero_1021_bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

.pub_hero_1021_modalOverlay {
    /* Custom overlay class if needed by HeroVideoModal */
    background: var(--modal-overlay-bg, rgba(15, 23, 42, 0.9));
}

.pub_hero_1021_modalPanel {
    /* Custom panel class if needed by HeroVideoModal */
    background: var(--card-bg, #1e293b);
}

@media (max-width: 768px) {
    .pub_hero_1021_statsWrapper {
        flex-direction: column;
        gap: var(--space-gap, 1.5rem);
    }

    .pub_hero_1021_floatCardWrapper {
        left: 50%;
        transform: translateX(-50%);
        bottom: -2rem;
        width: max-content;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pub_hero_1021_root [data-reveal] {
        transition: none;
        opacity: 1;
        transform: none;
    }

    .pub_hero_1021_floatCardWrapper {
        animation: none;
    }

    .pub_hero_1021_scrollIndicator {
        animation: none;
    }

    .pub_hero_1021_primaryBtn,
    .pub_hero_1021_secondaryBtn {
        transition: none;
    box-shadow: var(--shadow-sm, none);
    }
}

/* ============================================================
   PUB-ABOUT-1009 — Apex About
   Dark SaaS | split layout · values grid · stats
   1009 series: #0c0f1a bg · #0ea5e9 accent · glassmorphism
   ============================================================ */

/* ── Section ─────────────────────────────────────────────────── */
.pub_about_1009_section {
    --radial-1: rgba(14, 165, 233, 0.13);
    --radial-2: rgba(167, 139, 250, 0.08);
    --badge-border: rgba(14, 165, 233, 0.25);
    --accent-start: #7dd3fc;
    --accent-deep: #2563eb;
    --accent-glow: rgba(14, 165, 233, 0.55);
    --exp-color: #ffffff;
    --exp-shadow: rgba(14, 165, 233, 0.35);
    --ph-bg: rgba(255, 255, 255, 0.03);
    --ph-border: rgba(255, 255, 255, 0.10);
    --ph-radial-1: rgba(14, 165, 233, 0.11);
    --ph-radial-2: rgba(167, 139, 250, 0.07);
    --stat-accent-mid: #38bdf8;
    --stat-accent-end: #67e8f9;
    --val-bg: rgba(255, 255, 255, 0.03);
    --val-border: rgba(255, 255, 255, 0.08);
    --underline-end: #38bdf8;
    --card-bg: rgba(255, 255, 255, 0.04);
    --card-border: rgba(255, 255, 255, 0.10);
    --card-hover-bg: rgba(255, 255, 255, 0.07);
    --card-hover-border: rgba(14, 165, 233, 0.40);
    --card-hover-shadow: rgba(14, 165, 233, 0.12);
    --icon-border: rgba(14, 165, 233, 0.20);
    --icon-h: 44px;
    --btn-shadow: rgba(14, 165, 233, 0.30);
    --btn-hover-shadow: rgba(14, 165, 233, 0.40);
    --btn2-hover-bg: rgba(14, 165, 233, 0.08);
    width: 100%;
    padding: var(--pt, 80px) 24px var(--pb, 80px);
    background: var(--texture-bg, none),
        radial-gradient(ellipse 55% 65% at 105% 40%, var(--radial-1, rgba(14, 165, 233, 0.13)) 0%, transparent 60%),
        radial-gradient(ellipse 40% 45% at -5% 85%, var(--radial-2, rgba(167, 139, 250, 0.08)) 0%, transparent 55%),
        color-mix(in srgb, color-mix(in srgb, var(--bg, #0c0f1a) calc(var(--material-bg-opacity, 1) * 100%), transparent) calc(var(--material-bg-opacity, 1) * 100%), transparent);
    font-family: var(--font-body, 'Inter', system-ui, -apple-system, sans-serif);
    color: var(--text, #f1f5f9);
    overflow: hidden;
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

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

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

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

.pub_about_1009_badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 6px);
    padding: 4px 14px;
    background: var(--badge-bg, rgba(14, 165, 233, 0.12));
    color: var(--badge-text, #0ea5e9);
    border: 1px solid var(--badge-border, rgba(14, 165, 233, 0.25));
    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_1009_sectionTitle {
    font-family: var(--font-heading, var(--font-body, 'Inter', system-ui, sans-serif));
    font-weight: 800;
    line-height: var(--leading, 1.12);
    letter-spacing: var(--tracking, -0.03em);
    color: var(--text, #f1f5f9);
    margin: 0;
}

.pub_about_1009_titleAccent {
    display: block;
    font-weight: 900;
    line-height: var(--leading, 1.05);
    margin-top: 0.08em;
    background: linear-gradient(110deg, var(--accent-start, #7dd3fc) 0%, var(--accent, #0ea5e9) 45%, var(--accent-deep, #2563eb) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 28px var(--accent-glow, rgba(14, 165, 233, 0.55)));
}

.pub_about_1009_sectionDesc {
    line-height: var(--leading, 1.7);
    color: var(--text-muted, #94a3b8);
    max-width: 640px;
    margin: 0;
}

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

/* ── Image ──────────────────────────────────────────────────── */
.pub_about_1009_imageWrap {
    position: relative;
    border-radius: var(--radius-xl, 16px);
    overflow: visible;
    box-shadow: var(--shadow-sm, none);
}

.pub_about_1009_storyImg {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-xl, 16px);
    display: block;
}

/* Experience badge overlay on the image */
.pub_about_1009_expBadge {
    position: absolute;
    bottom: -20px;
    right: -20px;
    background: var(--accent, #0ea5e9);
    color: var(--exp-color, #ffffff);
    padding: 16px 20px;
    border-radius: 14px;
    text-align: center;
    z-index: var(--z-above, 2);
    /* above story image */
}

/* ── Image Placeholder (shown when no src provided) ────────── */
.pub_about_1009_imagePlaceholder {
    position: relative;
    border-radius: var(--radius-xl, 20px);
    aspect-ratio: 4 / 3;
    background: var(--ph-bg, rgba(255, 255, 255, 0.03));
    border: 2px dashed var(--ph-border, rgba(255, 255, 255, 0.10));
    overflow: hidden;
}

.pub_about_1009_imagePlaceholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 72% 22%, var(--ph-radial-1, rgba(14, 165, 233, 0.11)) 0%, transparent 55%),
        radial-gradient(circle at 22% 78%, var(--ph-radial-2, rgba(167, 139, 250, 0.07)) 0%, transparent 50%);
}

/* Three floating circles rendered via JS divs */
.pub_about_1009_placeholderShape {
    position: absolute;
    border-radius: var(--radius-full, 50%);
    background: var(--accent, #0ea5e9);
}

.pub_about_1009_placeholderShape:nth-child(1) {
    width: 260px;
    min-height: var(--shape-1-h, 260px);
    top: -80px;
    right: -60px;
    opacity: 0.08;
}

.pub_about_1009_placeholderShape:nth-child(2) {
    width: 180px;
    min-height: var(--shape-2-h, 180px);
    bottom: -50px;
    left: -30px;
    opacity: 0.06;
}

.pub_about_1009_placeholderShape:nth-child(3) {
    width: 56px;
    min-height: var(--shape-3-h, 56px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.18;
}

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

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

.pub_about_1009_storyHeadline {
    font-family: var(--font-heading, var(--font-body, 'Inter', system-ui, sans-serif));
    font-weight: 700;
    color: var(--text, #f1f5f9);
    margin: 0 0 12px;
    line-height: var(--leading, 1.3);
    letter-spacing: var(--tracking, -0.02em);
}

.pub_about_1009_storyPara {
    font-size: calc(1rem * var(--body-scale, 1));
    line-height: var(--leading, 1.75);
    color: var(--text-muted, #94a3b8);
    margin: 0;
}

/* ── Stats Row ──────────────────────────────────────────────── */
.pub_about_1009_statsRow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding-top: 20px;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.10));
}

.pub_about_1009_statItem {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 4px);
    padding-right: 20px;
}

.pub_about_1009_statItem+.pub_about_1009_statItem {
    padding-left: 20px;
    border-left: 1px solid var(--border, rgba(255, 255, 255, 0.10));
}

.pub_about_1009_statItem:last-child {
    padding-right: 0;
}

.pub_about_1009_statNumber {
    font-family: var(--font-heading, var(--font-body, 'Inter', system-ui, sans-serif));
    font-weight: 800;
    background: linear-gradient(125deg, var(--accent, #0ea5e9) 0%, var(--stat-accent-mid, #38bdf8) 60%, var(--stat-accent-end, #67e8f9) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: var(--leading, 1);
    letter-spacing: var(--tracking, -0.02em);
}

.pub_about_1009_statLabel {
    font-size: calc(0.8125rem * var(--body-scale, 1));
    color: var(--text-muted, #94a3b8);
    font-weight: 500;
}

/* ── Values Section ─────────────────────────────────────────── */
.pub_about_1009_valuesSection {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-gap, 40px);
    padding: var(--pt, 52px) 40px var(--pb, 52px);
    background: var(--val-bg, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--val-border, rgba(255, 255, 255, 0.08));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--radius-xl, 24px);
}

.pub_about_1009_valuesHeading {
    font-family: var(--font-heading, var(--font-body, 'Inter', system-ui, sans-serif));
    font-weight: 800;
    color: var(--text, #f1f5f9);
    text-align: center;
    margin: 0;
    letter-spacing: var(--tracking, -0.02em);
    position: relative;
    padding-bottom: 18px;
}

.pub_about_1009_valuesHeading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent, #0ea5e9), var(--underline-end, #38bdf8));
    border-radius: 2px;
}

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

.pub_about_1009_valueCard {
    display: flex;
    flex-direction: column;
gap: var(--space-content-gap, 12px);
    padding: 28px 24px;
    background: var(--card-bg, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.10));
    border-radius: var(--radius-xl, 16px);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.pub_about_1009_valueCard:hover {
    background: var(--card-hover-bg, rgba(255, 255, 255, 0.07));
    border-color: var(--card-hover-border, rgba(14, 165, 233, 0.40));
    transform: translateY(-3px);
}

/* Icon inside value card — targets the i element rendered by IconBlock */
.pub_about_1009_valueCard i {
    font-size: calc(1.5rem * var(--body-scale, 1));
    color: var(--icon, #0ea5e9);
    width: var(--icon-h, 44px);
    min-height: var(--icon-h, 44px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--icon-bg, rgba(14, 165, 233, 0.12));
    border: 1px solid var(--icon-border, rgba(14, 165, 233, 0.20));
    border-radius: var(--radius-md, 10px);
    flex-shrink: 0;
}

/* Title inside value card — targets h4 rendered by AboutValueItem */
.pub_about_1009_valueCard h4 {
    font-family: var(--font-heading, var(--font-body, 'Inter', system-ui, sans-serif));
    font-size: calc(1rem * var(--heading-scale, 1));
    font-weight: 700;
    color: var(--text, #f1f5f9);
    margin: 0;
}

/* Description inside value card — targets p rendered by AboutValueItem */
.pub_about_1009_valueCard p {
    font-size: calc(0.9375rem * var(--body-scale, 1));
    line-height: var(--leading, 1.65);
    color: var(--text-muted, #94a3b8);
    margin: 0;
}

/* ── CTA Row ────────────────────────────────────────────────── */
.pub_about_1009_ctaRow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-content-gap, 16px);
}

.pub_about_1009_primaryBtn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    padding: 13px 30px;
    background: var(--cta-bg, #0ea5e9);
    color: var(--cta-text, #ffffff);
    font-size: calc(1rem * var(--body-scale, 1));
    font-weight: 600;
    border-radius: var(--radius-full, 999px);
    text-decoration: none;
    transition: opacity 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.pub_about_1009_primaryBtn:hover {
    background: var(--cta-hover, #0284c7);
    transform: translateY(-2px);
}

.pub_about_1009_secondaryBtn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    padding: 13px 30px;
    background: transparent;
    color: var(--cta2-text, #f1f5f9);
    font-size: calc(1rem * var(--body-scale, 1));
    font-weight: 600;
    border: 1.5px solid var(--cta2-border, rgba(241, 245, 249, 0.22));
    border-radius: var(--radius-full, 999px);
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
    box-shadow: var(--shadow-sm, none);
}

.pub_about_1009_secondaryBtn:hover {
    border-color: var(--accent, #0ea5e9);
    background: var(--btn2-hover-bg, rgba(14, 165, 233, 0.08));
    transform: translateY(-2px);
}

/* ── Tablet ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .pub_about_1009_storyGrid {
gap: var(--space-gap, 32px);
    }

    .pub_about_1009_valuesGrid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-content-gap, 16px);
    }
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .pub_about_1009_container {
        gap: var(--space-gap, 48px);
    }

    .pub_about_1009_storyGrid {
        grid-template-columns: 1fr;
gap: var(--space-gap, 32px);
    }

    /* Show image first on mobile — let natural DOM order prevail */
    .pub_about_1009_storyContent {
gap: var(--space-gap, 24px);
    }

    .pub_about_1009_statsRow {
        grid-template-columns: repeat(3, 1fr);
gap: var(--space-content-gap, 12px);
    }

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

    .pub_about_1009_expBadge {
        bottom: -16px;
        right: -8px;
    }
}

/* ── Small Mobile ─────────────────────────────────────────────── */
@media (max-width: 480px) {
    .pub_about_1009_statsRow {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-content-gap, 8px);
    }

    .pub_about_1009_statNumber {
        font-size: calc(1.375rem * var(--heading-scale, 1));
    }

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

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

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

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

    .pub_about_1009_primaryBtn,
    .pub_about_1009_secondaryBtn,
    .pub_about_1009_valueCard {
        transition: none;
    box-shadow: var(--shadow-sm, none);
    }
}

/* PUB-ABOUT-1021 - Rebuilt Ultra Premium SaaS Bento */

.pub_about_1021_root {
    position: relative;
    background-color: 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, #f8fafc);
    padding-top: var(--pt, 80px);
    padding-bottom: var(--pb, 80px);
    font-family: var(--font-body, Inter, system-ui, sans-serif);
    overflow: hidden;
    /* Grid pattern */
    background-image: var(--texture-bg, none),
        linear-gradient(color-mix(in srgb, var(--text, #ffffff) 5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--text, #ffffff) 5%, transparent) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: center center;
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* Background glows */
.pub_about_1021_root::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent, #8B5CF6) 20%, transparent) 0%, transparent 70%);
    border-radius: var(--radius-full, 50%);
    filter: blur(80px);
    z-index: var(--z-bg, 0);
    /* Ambient background glow */
    pointer-events: none;
}

.pub_about_1021_root::after {
    content: '';
    position: absolute;
    bottom: -10%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, color-mix(in srgb, var(--secondary, #3B82F6) 20%, transparent) 0%, transparent 70%);
    border-radius: var(--radius-full, 50%);
    filter: blur(80px);
    z-index: var(--z-bg, 0);
    /* Ambient background glow */
    pointer-events: none;
}

.pub_about_1021_container {
    width: 100%;
    max-width: var(--max-w, 1280px);
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: var(--z-1, 1);
    /* Content above background */
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-gap, 1.5rem);
}

@media (min-width: 1024px) {
    .pub_about_1021_container {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto auto auto;
    }

    .pub_about_1021_cardStory {
        grid-column: 1 / 3;
        grid-row: 1 / 3;
    }

    .pub_about_1021_cardMedia {
        grid-column: 3 / 4;
        grid-row: 1 / 4;
    }

    .pub_about_1021_cardMission {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }

    .pub_about_1021_cardVision {
        grid-column: 2 / 3;
        grid-row: 3 / 4;
    }

    .pub_about_1021_cardStats {
        grid-column: 1 / 4;
        grid-row: 4 / 5;
    }
}

/* Bento Card Base */
.pub_about_1021_bentoCard {
    background-color: color-mix(in srgb, var(--card-bg, #1e293b) 80%, transparent);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid color-mix(in srgb, var(--text, #ffffff) 8%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--text, #ffffff) 15%, transparent);
    border-left: 1px solid color-mix(in srgb, var(--text, #ffffff) 10%, transparent);
    border-radius: 1.5rem;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;
    overflow: hidden;
}

.pub_about_1021_bentoCard::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, color-mix(in srgb, var(--text, #ffffff) 10%, transparent) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: var(--z-bg, 0);
    /* Glow behind card content */
    pointer-events: none;
}

.pub_about_1021_bentoCard:hover {
    transform: translateY(-4px);

    border-color: color-mix(in srgb, var(--text, #ffffff) 25%, transparent);
}

.pub_about_1021_bentoCard:hover::before {
    opacity: 1;
}

/* Story Card */
.pub_about_1021_cardStory {
    gap: var(--space-gap, 2rem);
}

.pub_about_1021_headerArea {
    margin-bottom: 1rem;
}

.pub_about_1021_badge {
    display: inline-flex;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full, 9999px);
    background-color: color-mix(in srgb, var(--accent, #8B5CF6) 15%, transparent);
    color: var(--accent, #8B5CF6);
    font-size: calc(0.875rem * var(--heading-scale, 1));
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: var(--tracking, 0.05em);
}

.pub_about_1021_title {
    font-family: var(--font-heading, Inter, sans-serif);
    font-weight: 900;
    line-height: var(--leading, 1.1);
    letter-spacing: var(--tracking, -0.04em);
    color: var(--text, #ffffff);
    margin: 0;
}

.pub_about_1021_accent {
    background: linear-gradient(135deg, var(--text, #ffffff) 0%, color-mix(in srgb, var(--text, #ffffff) 60%, transparent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pub_about_1021_storyArea {
    display: flex;
    flex-direction: column;
    gap: var(--space-gap, 1.5rem);
}

.pub_about_1021_storyHeadline {
    font-family: var(--font-heading, Inter, sans-serif);
    font-size: calc(1.5rem * var(--heading-scale, 1));
    font-weight: 700;
    color: var(--text, #ffffff);
    margin: 0;
}

.pub_about_1021_storyTextContainer {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 1rem);
}

.pub_about_1021_storyText {
    font-size: calc(1.125rem * var(--body-scale, 1));
    line-height: var(--leading, 1.7);
    color: color-mix(in srgb, var(--text, #ffffff) 70%, transparent);
    margin: 0;
}

.pub_about_1021_ctaWrap {
    margin-top: 1rem;
}

.pub_about_1021_primaryBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-content-gap, 0.5rem);
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--accent, #8B5CF6) 0%, var(--secondary, #3b82f6) 100%);
    color: var(--text, #ffffff);
    font-weight: 600;
    font-size: calc(1rem * var(--body-scale, 1));
    border-radius: var(--radius-full, 9999px);
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease;
    box-shadow: var(--shadow-md, 0 10px 25px -5px color-mix(in srgb, var(--accent, #8B5CF6) 50%, transparent)),
        inset 0 1px 1px color-mix(in srgb, var(--text, #ffffff) 30%, transparent);
    border: none;
}

.pub_about_1021_primaryBtn i {
    transition: transform 0.3s ease;
}

.pub_about_1021_primaryBtn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg, 0 15px 30px -5px color-mix(in srgb, var(--accent, #8B5CF6) 60%, transparent)),
        inset 0 1px 1px color-mix(in srgb, var(--text, #ffffff) 40%, transparent);
    filter: brightness(1.1);
}

.pub_about_1021_primaryBtn:hover i {
    transform: translateX(4px);
}

/* Media Card */
.pub_about_1021_cardMedia {
    padding: var(--space-card-padding, 1.5rem);
    justify-content: center;
}

.pub_about_1021_imageInner {
    width: 100%;
    height: 100%;
    min-height: 400px;
    border-radius: var(--radius-lg, 1rem);
    overflow: hidden;
    position: relative;
}

.pub_about_1021_storyImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.pub_about_1021_bentoCard:hover .pub_about_1021_storyImg {
    transform: scale(1.05);
}

/* Mission / Vision Cards */
.pub_about_1021_cardMission,
.pub_about_1021_cardVision {
    gap: var(--space-gap, 1.25rem);
}

.pub_about_1021_iconBox {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-lg, 1rem);
    background: color-mix(in srgb, var(--accent, #8B5CF6) 15%, transparent);
    color: var(--accent, #8B5CF6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(1.5rem * var(--body-scale, 1));
    border: 1px solid color-mix(in srgb, var(--accent, #8B5CF6) 25%, transparent);
}

.pub_about_1021_cardTitle {
    font-family: var(--font-heading, Inter, sans-serif);
    font-size: calc(1.25rem * var(--heading-scale, 1));
    font-weight: 700;
    color: var(--text, #ffffff);
    margin: 0;
}

.pub_about_1021_cardText {
    font-size: calc(1rem * var(--body-scale, 1));
    line-height: var(--leading, 1.6);
    color: color-mix(in srgb, var(--text, #ffffff) 70%, transparent);
    margin: 0;
}

/* Stats Card */
.pub_about_1021_cardStats {
    flex-direction: row;
    align-items: center;
}

.pub_about_1021_statsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-gap, 3rem);
    width: 100%;
}

.pub_about_1021_statItem {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.5rem);
    text-align: center;
}

.pub_about_1021_statNumber {
    font-family: var(--font-heading, Inter, sans-serif);
    font-size: calc(3.5rem * var(--heading-scale, 1));
    font-weight: 800;
    color: var(--text, #ffffff);
    line-height: var(--leading, 1);
    background: linear-gradient(135deg, var(--text, #ffffff) 0%, color-mix(in srgb, var(--text, #ffffff) 50%, transparent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pub_about_1021_statLabel {
    font-size: calc(1.125rem * var(--body-scale, 1));
    font-weight: 600;
    color: var(--accent, #8B5CF6);
    text-transform: uppercase;
    letter-spacing: var(--tracking, 0.05em);
}

/* Reveal Animation */
.pub_about_1021_root [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.pub_about_1021_root [data-reveal].pub_about_1021_revealed {
    opacity: 1;
    transform: translateY(0);
}

[data-pb-mode="true"] .pub_about_1021_root [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* ============================================================
   PUB-ABOUT-1009 — Apex About
   Dark SaaS | split layout · values grid · stats
   1009 series: #0c0f1a bg · #0ea5e9 accent · glassmorphism
   ============================================================ */

/* ── Section ─────────────────────────────────────────────────── */
.pub_about_1009_section {
    --radial-1: rgba(14, 165, 233, 0.13);
    --radial-2: rgba(167, 139, 250, 0.08);
    --badge-border: rgba(14, 165, 233, 0.25);
    --accent-start: #7dd3fc;
    --accent-deep: #2563eb;
    --accent-glow: rgba(14, 165, 233, 0.55);
    --exp-color: #ffffff;
    --exp-shadow: rgba(14, 165, 233, 0.35);
    --ph-bg: rgba(255, 255, 255, 0.03);
    --ph-border: rgba(255, 255, 255, 0.10);
    --ph-radial-1: rgba(14, 165, 233, 0.11);
    --ph-radial-2: rgba(167, 139, 250, 0.07);
    --stat-accent-mid: #38bdf8;
    --stat-accent-end: #67e8f9;
    --val-bg: rgba(255, 255, 255, 0.03);
    --val-border: rgba(255, 255, 255, 0.08);
    --underline-end: #38bdf8;
    --card-bg: rgba(255, 255, 255, 0.04);
    --card-border: rgba(255, 255, 255, 0.10);
    --card-hover-bg: rgba(255, 255, 255, 0.07);
    --card-hover-border: rgba(14, 165, 233, 0.40);
    --card-hover-shadow: rgba(14, 165, 233, 0.12);
    --icon-border: rgba(14, 165, 233, 0.20);
    --icon-h: 44px;
    --btn-shadow: rgba(14, 165, 233, 0.30);
    --btn-hover-shadow: rgba(14, 165, 233, 0.40);
    --btn2-hover-bg: rgba(14, 165, 233, 0.08);
    width: 100%;
    padding: var(--pt, 80px) 24px var(--pb, 80px);
    background: var(--texture-bg, none),
        radial-gradient(ellipse 55% 65% at 105% 40%, var(--radial-1, rgba(14, 165, 233, 0.13)) 0%, transparent 60%),
        radial-gradient(ellipse 40% 45% at -5% 85%, var(--radial-2, rgba(167, 139, 250, 0.08)) 0%, transparent 55%),
        color-mix(in srgb, color-mix(in srgb, var(--bg, #0c0f1a) calc(var(--material-bg-opacity, 1) * 100%), transparent) calc(var(--material-bg-opacity, 1) * 100%), transparent);
    font-family: var(--font-body, 'Inter', system-ui, -apple-system, sans-serif);
    color: var(--text, #f1f5f9);
    overflow: hidden;
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

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

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

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

.pub_about_1009_badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 6px);
    padding: 4px 14px;
    background: var(--badge-bg, rgba(14, 165, 233, 0.12));
    color: var(--badge-text, #0ea5e9);
    border: 1px solid var(--badge-border, rgba(14, 165, 233, 0.25));
    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_1009_sectionTitle {
    font-family: var(--font-heading, var(--font-body, 'Inter', system-ui, sans-serif));
    font-weight: 800;
    line-height: var(--leading, 1.12);
    letter-spacing: var(--tracking, -0.03em);
    color: var(--text, #f1f5f9);
    margin: 0;
}

.pub_about_1009_titleAccent {
    display: block;
    font-weight: 900;
    line-height: var(--leading, 1.05);
    margin-top: 0.08em;
    background: linear-gradient(110deg, var(--accent-start, #7dd3fc) 0%, var(--accent, #0ea5e9) 45%, var(--accent-deep, #2563eb) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 28px var(--accent-glow, rgba(14, 165, 233, 0.55)));
}

.pub_about_1009_sectionDesc {
    line-height: var(--leading, 1.7);
    color: var(--text-muted, #94a3b8);
    max-width: 640px;
    margin: 0;
}

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

/* ── Image ──────────────────────────────────────────────────── */
.pub_about_1009_imageWrap {
    position: relative;
    border-radius: var(--radius-xl, 16px);
    overflow: visible;
    box-shadow: var(--shadow-sm, none);
}

.pub_about_1009_storyImg {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-xl, 16px);
    display: block;
}

/* Experience badge overlay on the image */
.pub_about_1009_expBadge {
    position: absolute;
    bottom: -20px;
    right: -20px;
    background: var(--accent, #0ea5e9);
    color: var(--exp-color, #ffffff);
    padding: 16px 20px;
    border-radius: 14px;
    text-align: center;
    z-index: var(--z-above, 2);
    /* above story image */
}

/* ── Image Placeholder (shown when no src provided) ────────── */
.pub_about_1009_imagePlaceholder {
    position: relative;
    border-radius: var(--radius-xl, 20px);
    aspect-ratio: 4 / 3;
    background: var(--ph-bg, rgba(255, 255, 255, 0.03));
    border: 2px dashed var(--ph-border, rgba(255, 255, 255, 0.10));
    overflow: hidden;
}

.pub_about_1009_imagePlaceholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 72% 22%, var(--ph-radial-1, rgba(14, 165, 233, 0.11)) 0%, transparent 55%),
        radial-gradient(circle at 22% 78%, var(--ph-radial-2, rgba(167, 139, 250, 0.07)) 0%, transparent 50%);
}

/* Three floating circles rendered via JS divs */
.pub_about_1009_placeholderShape {
    position: absolute;
    border-radius: var(--radius-full, 50%);
    background: var(--accent, #0ea5e9);
}

.pub_about_1009_placeholderShape:nth-child(1) {
    width: 260px;
    min-height: var(--shape-1-h, 260px);
    top: -80px;
    right: -60px;
    opacity: 0.08;
}

.pub_about_1009_placeholderShape:nth-child(2) {
    width: 180px;
    min-height: var(--shape-2-h, 180px);
    bottom: -50px;
    left: -30px;
    opacity: 0.06;
}

.pub_about_1009_placeholderShape:nth-child(3) {
    width: 56px;
    min-height: var(--shape-3-h, 56px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.18;
}

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

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

.pub_about_1009_storyHeadline {
    font-family: var(--font-heading, var(--font-body, 'Inter', system-ui, sans-serif));
    font-weight: 700;
    color: var(--text, #f1f5f9);
    margin: 0 0 12px;
    line-height: var(--leading, 1.3);
    letter-spacing: var(--tracking, -0.02em);
}

.pub_about_1009_storyPara {
    font-size: calc(1rem * var(--body-scale, 1));
    line-height: var(--leading, 1.75);
    color: var(--text-muted, #94a3b8);
    margin: 0;
}

/* ── Stats Row ──────────────────────────────────────────────── */
.pub_about_1009_statsRow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding-top: 20px;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.10));
}

.pub_about_1009_statItem {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 4px);
    padding-right: 20px;
}

.pub_about_1009_statItem+.pub_about_1009_statItem {
    padding-left: 20px;
    border-left: 1px solid var(--border, rgba(255, 255, 255, 0.10));
}

.pub_about_1009_statItem:last-child {
    padding-right: 0;
}

.pub_about_1009_statNumber {
    font-family: var(--font-heading, var(--font-body, 'Inter', system-ui, sans-serif));
    font-weight: 800;
    background: linear-gradient(125deg, var(--accent, #0ea5e9) 0%, var(--stat-accent-mid, #38bdf8) 60%, var(--stat-accent-end, #67e8f9) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: var(--leading, 1);
    letter-spacing: var(--tracking, -0.02em);
}

.pub_about_1009_statLabel {
    font-size: calc(0.8125rem * var(--body-scale, 1));
    color: var(--text-muted, #94a3b8);
    font-weight: 500;
}

/* ── Values Section ─────────────────────────────────────────── */
.pub_about_1009_valuesSection {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-gap, 40px);
    padding: var(--pt, 52px) 40px var(--pb, 52px);
    background: var(--val-bg, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--val-border, rgba(255, 255, 255, 0.08));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--radius-xl, 24px);
}

.pub_about_1009_valuesHeading {
    font-family: var(--font-heading, var(--font-body, 'Inter', system-ui, sans-serif));
    font-weight: 800;
    color: var(--text, #f1f5f9);
    text-align: center;
    margin: 0;
    letter-spacing: var(--tracking, -0.02em);
    position: relative;
    padding-bottom: 18px;
}

.pub_about_1009_valuesHeading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent, #0ea5e9), var(--underline-end, #38bdf8));
    border-radius: 2px;
}

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

.pub_about_1009_valueCard {
    display: flex;
    flex-direction: column;
gap: var(--space-content-gap, 12px);
    padding: 28px 24px;
    background: var(--card-bg, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.10));
    border-radius: var(--radius-xl, 16px);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.pub_about_1009_valueCard:hover {
    background: var(--card-hover-bg, rgba(255, 255, 255, 0.07));
    border-color: var(--card-hover-border, rgba(14, 165, 233, 0.40));
    transform: translateY(-3px);
}

/* Icon inside value card — targets the i element rendered by IconBlock */
.pub_about_1009_valueCard i {
    font-size: calc(1.5rem * var(--body-scale, 1));
    color: var(--icon, #0ea5e9);
    width: var(--icon-h, 44px);
    min-height: var(--icon-h, 44px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--icon-bg, rgba(14, 165, 233, 0.12));
    border: 1px solid var(--icon-border, rgba(14, 165, 233, 0.20));
    border-radius: var(--radius-md, 10px);
    flex-shrink: 0;
}

/* Title inside value card — targets h4 rendered by AboutValueItem */
.pub_about_1009_valueCard h4 {
    font-family: var(--font-heading, var(--font-body, 'Inter', system-ui, sans-serif));
    font-size: calc(1rem * var(--heading-scale, 1));
    font-weight: 700;
    color: var(--text, #f1f5f9);
    margin: 0;
}

/* Description inside value card — targets p rendered by AboutValueItem */
.pub_about_1009_valueCard p {
    font-size: calc(0.9375rem * var(--body-scale, 1));
    line-height: var(--leading, 1.65);
    color: var(--text-muted, #94a3b8);
    margin: 0;
}

/* ── CTA Row ────────────────────────────────────────────────── */
.pub_about_1009_ctaRow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-content-gap, 16px);
}

.pub_about_1009_primaryBtn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    padding: 13px 30px;
    background: var(--cta-bg, #0ea5e9);
    color: var(--cta-text, #ffffff);
    font-size: calc(1rem * var(--body-scale, 1));
    font-weight: 600;
    border-radius: var(--radius-full, 999px);
    text-decoration: none;
    transition: opacity 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.pub_about_1009_primaryBtn:hover {
    background: var(--cta-hover, #0284c7);
    transform: translateY(-2px);
}

.pub_about_1009_secondaryBtn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 8px);
    padding: 13px 30px;
    background: transparent;
    color: var(--cta2-text, #f1f5f9);
    font-size: calc(1rem * var(--body-scale, 1));
    font-weight: 600;
    border: 1.5px solid var(--cta2-border, rgba(241, 245, 249, 0.22));
    border-radius: var(--radius-full, 999px);
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
    box-shadow: var(--shadow-sm, none);
}

.pub_about_1009_secondaryBtn:hover {
    border-color: var(--accent, #0ea5e9);
    background: var(--btn2-hover-bg, rgba(14, 165, 233, 0.08));
    transform: translateY(-2px);
}

/* ── Tablet ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .pub_about_1009_storyGrid {
gap: var(--space-gap, 32px);
    }

    .pub_about_1009_valuesGrid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-content-gap, 16px);
    }
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .pub_about_1009_container {
        gap: var(--space-gap, 48px);
    }

    .pub_about_1009_storyGrid {
        grid-template-columns: 1fr;
gap: var(--space-gap, 32px);
    }

    /* Show image first on mobile — let natural DOM order prevail */
    .pub_about_1009_storyContent {
gap: var(--space-gap, 24px);
    }

    .pub_about_1009_statsRow {
        grid-template-columns: repeat(3, 1fr);
gap: var(--space-content-gap, 12px);
    }

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

    .pub_about_1009_expBadge {
        bottom: -16px;
        right: -8px;
    }
}

/* ── Small Mobile ─────────────────────────────────────────────── */
@media (max-width: 480px) {
    .pub_about_1009_statsRow {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-content-gap, 8px);
    }

    .pub_about_1009_statNumber {
        font-size: calc(1.375rem * var(--heading-scale, 1));
    }

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

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

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

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

    .pub_about_1009_primaryBtn,
    .pub_about_1009_secondaryBtn,
    .pub_about_1009_valueCard {
        transition: none;
    box-shadow: var(--shadow-sm, none);
    }
}

.pub_services_1021_wrapper {
    position: relative;
    background-color: 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, #ffffff);
    font-family: var(--font-body, system-ui, sans-serif);
    padding-top: var(--pt, 96px);
    padding-bottom: var(--pb, 96px);
    overflow: hidden;
    /* Dark Grid Pattern */
    background-image: var(--texture-bg, none),
        linear-gradient(var(--border, transparent) 1px, transparent 1px),
                      linear-gradient(90deg, var(--border, transparent) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: center center;
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* Ambient Background Glow */
.pub_services_1021_wrapper::before,
.pub_services_1021_wrapper::after {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: var(--radius-full, 50%);
    filter: blur(80px);
    z-index: var(--z-bg, 0); /* Background glow */
    pointer-events: none;
}

.pub_services_1021_wrapper::before {
    top: -10%;
    left: -10%;
    background: radial-gradient(circle, var(--accent-alpha, transparent), transparent 70%);
}

.pub_services_1021_wrapper::after {
    bottom: -10%;
    right: -10%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent, #8B5CF6) 20%, transparent), transparent 70%);
}

.pub_services_1021_container {
    width: 100%;
    max-width: var(--max-w, 1280px);
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: var(--z-1, 1); /* Main container */
}

/* Header */
.pub_services_1021_header {
    text-align: center;
    max-width: 48rem;
    margin: 0 auto 4rem auto;
}

.pub_services_1021_badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 0.5rem);
    padding: 0.5rem 1rem;
    background-color: color-mix(in srgb, var(--accent, #8B5CF6) 10%, transparent);
    color: var(--accent, #8B5CF6);
    border-radius: var(--radius-full, 9999px);
    font-size: calc(0.875rem * var(--heading-scale, 1));
    font-weight: 600;
    margin-bottom: 1.5rem;
    border: 1px solid color-mix(in srgb, var(--accent, #8B5CF6) 20%, transparent);
}

.pub_services_1021_title {
    font-family: var(--font-heading, system-ui, sans-serif);
    font-weight: 900;
    line-height: var(--leading, 1.05);
    margin-bottom: 1.5rem;
    letter-spacing: var(--tracking, -0.03em);
    color: var(--text, #ffffff);
}

.pub_services_1021_titleAccent {
    background: linear-gradient(135deg, var(--accent, #8B5CF6) 0%, var(--bg, #3b82f6) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.pub_services_1021_description {
    font-size: calc(1.125rem * var(--body-scale, 1));
    color: var(--text-muted, #94a3b8);
    line-height: var(--leading, 1.75);
}

/* Services Grid */
.pub_services_1021_servicesGrid {
    display: grid;
    gap: var(--space-gap, 2rem);
    margin-bottom: 6rem;
}

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

@media (max-width: 1024px) {
    .pub_services_1021_servicesGrid[data-cols="3"],
    .pub_services_1021_servicesGrid[data-cols="4"] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .pub_services_1021_servicesGrid[data-cols="2"],
    .pub_services_1021_servicesGrid[data-cols="3"],
    .pub_services_1021_servicesGrid[data-cols="4"] {
        grid-template-columns: 1fr;
    }
}

/* Service Card (Bento Style) */
.pub_services_1021_card {
    background: var(--card-bg, #1e293b);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border, transparent);
    border-top: 1px solid color-mix(in srgb, var(--text, #ffffff) 15%, transparent);
    border-radius: 1.5rem;
    padding: 2.5rem;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.pub_services_1021_card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at top right, color-mix(in srgb, var(--text, #ffffff) 10%, transparent) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: var(--z-bg, 0); /* Ambient hover */
    pointer-events: none;
}

.pub_services_1021_card:hover {
    transform: translateY(-8px) scale(1.02);

    border-color: color-mix(in srgb, var(--text, #ffffff) 20%, transparent);
}

.pub_services_1021_card:hover::before {
    opacity: 1;
}

.pub_services_1021_card > * {
    position: relative;
    z-index: var(--z-content, 1); /* Card inner content */
}

.pub_services_1021_cardHeader {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.pub_services_1021_iconWrap {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-lg, 1rem);
    background: color-mix(in srgb, var(--accent, #8B5CF6) 15%, transparent);
    color: var(--accent, #8B5CF6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(1.75rem * var(--body-scale, 1));
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.pub_services_1021_card:hover .pub_services_1021_iconWrap {
    background: var(--accent, #8B5CF6);
    color: var(--bg, #ffffff);
    transform: scale(1.1) rotate(5deg);

}

.pub_services_1021_cardBadge {
    font-size: calc(0.75rem * var(--heading-scale, 1));
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full, 9999px);
    background-color: var(--accent, #8B5CF6);
    color: var(--bg, #ffffff);
}

.pub_services_1021_cardTitle {
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: calc(1.25rem * var(--heading-scale, 1));
    font-weight: 700;
    margin-bottom: 0.75rem;
    line-height: var(--leading, 1.4);
    color: var(--text, #ffffff);
}

.pub_services_1021_cardDescription {
    color: var(--text-muted, #94a3b8);
    line-height: var(--leading, 1.6);
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.pub_services_1021_cardLink {
    display: inline-flex;
    align-items: center;
    gap: var(--space-content-gap, 0.5rem);
    color: var(--accent, #8B5CF6);
    font-weight: 600;
    font-size: calc(0.875rem * var(--body-scale, 1));
    text-decoration: none;
    margin-top: auto;
}

.pub_services_1021_cardLink i {
    transition: transform 0.2s ease;
}

.pub_services_1021_cardLink:hover i {
    transform: translateX(4px);
}

/* CTA Section */
.pub_services_1021_ctaSection {
    background: var(--card-bg, #1e293b);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border, transparent);
    border-top: 1px solid color-mix(in srgb, var(--text, #ffffff) 15%, transparent);
    border-radius: 1.5rem;
    margin: 4rem auto 0 auto;
    padding-block: 4rem;
    padding-inline: 2rem;
    text-align: center;
    max-width: 64rem;

}

.pub_services_1021_ctaHeadline {
    font-family: var(--font-heading, system-ui, sans-serif);
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text, #ffffff);
}

.pub_services_1021_ctaDescription {
    font-size: calc(1.125rem * var(--body-scale, 1));
    color: var(--text-muted, #94a3b8);
    max-width: 42rem;
    margin: 0 auto 2rem auto;
}

.pub_services_1021_ctaButtons {
    display: flex;
    gap: var(--space-content-gap, 1rem);
    justify-content: center;
    flex-wrap: wrap;
}

.pub_services_1021_planCta {
    display: block;
    text-align: center;
    border-radius: var(--radius-full, 9999px);
    font-weight: 600;
    font-size: calc(1rem * var(--body-scale, 1));
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.pub_services_1021_btnPrimary {
    background: linear-gradient(135deg, var(--accent, #8B5CF6) 0%, var(--bg, #3b82f6) 100%);
    color: var(--bg, #ffffff);

    border: none;
}

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

}

.pub_services_1021_btnPrimary::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, color-mix(in srgb, var(--text, #ffffff) 30%, transparent), transparent);
    transform: skewX(-20deg);
    animation: pub_services_1021_shine 6s infinite;
}

@keyframes pub_services_1021_shine {
    0%, 80% { left: -100%; }
    100% { left: 200%; }
}

.pub_services_1021_btnSecondary {
    background: color-mix(in srgb, var(--text, #ffffff) 5%, transparent);
    backdrop-filter: blur(10px);
    color: var(--text, #ffffff);
    border: 1px solid color-mix(in srgb, var(--text, #ffffff) 10%, transparent);
}

.pub_services_1021_btnSecondary:hover {
    background: color-mix(in srgb, var(--text, #ffffff) 10%, transparent);
    transform: translateY(-2px);
}



.pub_table_1009_comparisonSection {
    background-color: var(--bg-color, #ffffff);
    padding-top: var(--pt, 80px);
    padding-bottom: var(--pb, 80px);
    color: var(--text-color, #0f172a);
    font-family: var(--font-body, inherit);
}

.pub_table_1009_headerWrapper {
    margin-bottom: 48px;
}

.pub_table_1009_sectionTitle {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 16px;
    font-family: var(--font-heading, inherit);
    color: var(--text-color, #0f172a);
}

.pub_table_1009_sectionDescription {
    font-size: 1.125rem;
    color: var(--text-muted, #64748b);
    max-width: 600px;
    margin: 0 auto;
    line-height: var(--line-height, 1.6);
    letter-spacing: var(--letter-spacing, normal);
}

.pub_table_1009_comparisonWrapper {
    max-width: var(--max-w, 900px);
    margin: 0 auto;
    width: 100%;
    position: relative;
}

@media (min-width: 1200px) {
    .pub_table_1009_comparisonWrapper {
        max-width: min(var(--max-w, 1000px), 60%);
    }
}

/* --- Mobile Segmented Toggle --- */
.pub_table_1009_mobileToggleWrapper {
    display: none; /* Hidden on desktop */
    margin-bottom: 32px;
    justify-content: center;
}

.pub_table_1009_segmentedControl {
    display: flex;
    position: relative;
    background-color: var(--toggle-bg, #F1F5F9);
    border-radius: 999px;
    padding: 6px;
    width: 100%;
    max-width: 400px;
}

.pub_table_1009_activeSlider {
    position: absolute;
    top: 6px;
    left: 6px;
    bottom: 6px;
    width: calc(50% - 6px);
    background-color: var(--toggle-active-bg, #ffffff);
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: var(--z-bg, 0); /* Background layer */
    pointer-events: none;
}

.pub_table_1009_segmentButton {
    flex: 1;
    position: relative;
    z-index: var(--z-above, 1); /* Overlay elements */
    border: none;
    background: transparent;
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 600;
    color: var(--toggle-text, #64748b);
    cursor: pointer;
    border-radius: 999px;
    transition: color 0.3s ease;
    outline: none;
    font-family: var(--font-heading, inherit);
}

.pub_table_1009_segmentButton[data-active="true"] {
    color: var(--toggle-active-text, #0f172a);
}

/* --- Cards Grid --- */
.pub_table_1009_cardsGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    align-items: center;
}

.pub_table_1009_compareCard {
    background-color: var(--card-bg, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--border-color, rgba(128, 128, 128, 0.2));
    border-radius: 20px;
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    min-height: var(--card-min-h, auto);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.pub_table_1009_compareCard:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.pub_table_1009_highlightedCard {
    background-color: var(--highlight-card-bg, var(--card-bg, rgba(255, 255, 255, 0.07)));
    border: 2px solid var(--accent, #3b82f6);
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    position: relative;
    transform: scale(1.05);
    z-index: var(--z-elevated, 2); /* Elevated elements */
}

.pub_table_1009_highlightedCard:hover {
    transform: scale(1.05) translateY(-4px);
    box-shadow: 0 30px 60px -15px rgba(0,0,0,0.3);
}

.pub_table_1009_recommendedBadge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--accent, #3b82f6);
    color: var(--badge-text, #ffffff);
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.15);
}

.pub_table_1009_cardHeader {
    margin-bottom: 32px;
    text-align: left;
    border-bottom: 1px solid var(--border-color, rgba(128, 128, 128, 0.15));
    padding-bottom: 32px;
}

.pub_table_1009_cardName {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-muted, inherit);
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--font-heading, inherit);
}

.pub_table_1009_cardPrice {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-color, inherit);
    margin-bottom: 12px;
    font-family: var(--font-heading, inherit);
    letter-spacing: -0.02em;
}

.pub_table_1009_cardDesc {
    font-size: 1rem;
    color: var(--text-muted, inherit);
    opacity: 0.8;
    line-height: var(--line-height, 1.5);
    letter-spacing: var(--letter-spacing, normal);
    margin: 0;
}

.pub_table_1009_cardBody {
    flex-grow: 1;
}

.pub_table_1009_featureList {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pub_table_1009_featureItem {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.5;
}

.pub_table_1009_featureMuted {
    color: var(--text-muted, #64748b);
    opacity: 0.7;
}

.pub_table_1009_featureIconYes {
    color: var(--accent, #3b82f6);
    background-color: var(--toggle-bg, #F1F5F9);
    border: 1px solid var(--border-color, #e2e8f0);
    margin-right: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.pub_table_1009_featureIconNo {
    color: var(--text-muted, #94a3b8);
    background-color: transparent;
    margin-right: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.pub_table_1009_featureTextValue {
    font-weight: 700;
    color: var(--text-color, #0f172a);
    margin-right: 12px;
    flex-shrink: 0;
}

.pub_table_1009_featureLabel {
    flex-grow: 1;
}

.pub_table_1009_cardFooter {
    margin-top: 32px;
}

.pub_table_1009_ctaButton {
    display: block;
    width: 100%;
    text-align: center;
    padding: 16px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    font-size: 16px;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    font-family: var(--font-heading, inherit);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.pub_table_1009_ctaPrimary {
    background-color: var(--cta-bg, #3b82f6);
    color: var(--cta-text, #ffffff);
}

.pub_table_1009_ctaPrimary:hover {
    background-color: var(--btn-primary-hover, #2563eb);
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.15);
}

.pub_table_1009_ctaSecondary {
    background-color: var(--btn-secondary-bg, #e2e8f0);
    color: var(--btn-secondary-text, #0f172a);
}

.pub_table_1009_ctaSecondary:hover {
    background-color: var(--border-color, #cbd5e1);
    transform: translateY(-2px);
}

/* --- Responsive Layout (Mobile Toggle Switch) --- */
@media (max-width: 767px) {
    .pub_table_1009_cardsGrid {
        grid-template-columns: 1fr;
        gap: 0; /* Only 1 card is visible */
    }

    .pub_table_1009_mobileToggleWrapper {
        display: flex; /* Show toggle */
    }

    .pub_table_1009_compareCard[data-visible-mobile="false"] {
        display: none !important;
    }

    .pub_table_1009_compareCard[data-visible-mobile="true"] {
        display: flex !important;
        animation: pub_table_1009_fadeIn 0.3s ease forwards;
    }

    .pub_table_1009_highlightedCard {
        transform: scale(1);
    }
}

@keyframes pub_table_1009_fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.pub_clients_1008_main-container {
  width: 100%;
  background-color: var(--bg, transparent);
  padding-top: var(--pt, 80px);
  padding-bottom: var(--pb, 80px);
  overflow: hidden;
}

.pub_clients_1008_content-wrapper {
  width: 100%;
  max-width: var(--max-w, 1200px);
  margin: 0 auto;
  padding: 0 20px;
}

.pub_clients_1008_header-wrapper {
  margin-bottom: 60px;
  color: var(--text, #111111);
  text-align: var(--header-align, center);
  display: flex;
  flex-direction: column;
}

/* Handle badge alignment based on text-align */
.pub_clients_1008_header-wrapper[style*="--header-align: center"] > div,
.pub_clients_1008_header-wrapper[style*="--header-align: right"] > div {
  margin-left: auto;
  margin-right: auto;
}

.pub_clients_1008_header-wrapper[style*="--header-align: right"] {
  align-items: flex-end;
}

.pub_clients_1008_header-wrapper[style*="--header-align: center"] {
  align-items: center;
}

.pub_clients_1008_header-wrapper[style*="--header-align: left"] {
  align-items: flex-start;
}

.pub_clients_1008_header-wrapper h2, 
.pub_clients_1008_header-wrapper p {
  color: var(--text, #111111);
}

.pub_clients_1008_marquee-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  /* Fading edges */
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.pub_clients_1008_marquee-track {
  display: flex;
  align-items: center;
  gap: 60px;
  width: max-content;
  padding: 20px 0;
}

/* Animation */
.pub_clients_1008_marquee-container[data-animated="true"] .pub_clients_1008_marquee-track {
  animation: pub_clients_1008_pubClients1008Scroll var(--anim-dur, 30s) linear infinite var(--anim-dir, normal);
}

.pub_clients_1008_marquee-container[data-animated="true"][data-pause-hover="true"]:hover .pub_clients_1008_marquee-track {
  animation-play-state: paused;
}

@keyframes pub_clients_1008_pubClients1008Scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Since we duplicated the array, we translate by half the track width (including gap) */
    transform: translateX(calc(-50% - 30px)); 
  }
}

.pub_clients_1008_logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: auto;
  min-height: var(--logo-h, 60px);
  height: var(--logo-h, 60px);
  transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
  text-decoration: none;
}

.pub_clients_1008_logo-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
}

/* Grayscale Mode */
.pub_clients_1008_marquee-container[data-grayscale="true"] .pub_clients_1008_logo-img {
  filter: grayscale(100%) opacity(0.6);
}

.pub_clients_1008_marquee-container[data-grayscale="true"] .pub_clients_1008_logo-item:hover .pub_clients_1008_logo-img {
  filter: grayscale(0%) opacity(1);
}

/* Responsive */
@media (max-width: 768px) {
  .pub_clients_1008_marquee-track {
    gap: 40px;
  }
  
  .pub_clients_1008_logo-item {
    height: calc(var(--logo-h, 60px) * 0.8);
    min-height: calc(var(--logo-h, 60px) * 0.8);
  }
  
  @keyframes pub_clients_1008_pubClients1008Scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-50% - 20px));
    }
  }
}

@media (max-width: 480px) {
  .pub_clients_1008_logo-item {
    height: calc(var(--logo-h, 60px) * 0.6);
    min-height: calc(var(--logo-h, 60px) * 0.6);
  }
}


.pub_clients_1008_main-container {
  width: 100%;
  background-color: var(--bg, transparent);
  padding-top: var(--pt, 80px);
  padding-bottom: var(--pb, 80px);
  overflow: hidden;
}

.pub_clients_1008_content-wrapper {
  width: 100%;
  max-width: var(--max-w, 1200px);
  margin: 0 auto;
  padding: 0 20px;
}

.pub_clients_1008_header-wrapper {
  margin-bottom: 60px;
  color: var(--text, #111111);
  text-align: var(--header-align, center);
  display: flex;
  flex-direction: column;
}

/* Handle badge alignment based on text-align */
.pub_clients_1008_header-wrapper[style*="--header-align: center"] > div,
.pub_clients_1008_header-wrapper[style*="--header-align: right"] > div {
  margin-left: auto;
  margin-right: auto;
}

.pub_clients_1008_header-wrapper[style*="--header-align: right"] {
  align-items: flex-end;
}

.pub_clients_1008_header-wrapper[style*="--header-align: center"] {
  align-items: center;
}

.pub_clients_1008_header-wrapper[style*="--header-align: left"] {
  align-items: flex-start;
}

.pub_clients_1008_header-wrapper h2, 
.pub_clients_1008_header-wrapper p {
  color: var(--text, #111111);
}

.pub_clients_1008_marquee-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  /* Fading edges */
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.pub_clients_1008_marquee-track {
  display: flex;
  align-items: center;
  gap: 60px;
  width: max-content;
  padding: 20px 0;
}

/* Animation */
.pub_clients_1008_marquee-container[data-animated="true"] .pub_clients_1008_marquee-track {
  animation: pub_clients_1008_pubClients1008Scroll var(--anim-dur, 30s) linear infinite var(--anim-dir, normal);
}

.pub_clients_1008_marquee-container[data-animated="true"][data-pause-hover="true"]:hover .pub_clients_1008_marquee-track {
  animation-play-state: paused;
}

@keyframes pub_clients_1008_pubClients1008Scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Since we duplicated the array, we translate by half the track width (including gap) */
    transform: translateX(calc(-50% - 30px)); 
  }
}

.pub_clients_1008_logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: auto;
  min-height: var(--logo-h, 60px);
  height: var(--logo-h, 60px);
  transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
  text-decoration: none;
}

.pub_clients_1008_logo-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
}

/* Grayscale Mode */
.pub_clients_1008_marquee-container[data-grayscale="true"] .pub_clients_1008_logo-img {
  filter: grayscale(100%) opacity(0.6);
}

.pub_clients_1008_marquee-container[data-grayscale="true"] .pub_clients_1008_logo-item:hover .pub_clients_1008_logo-img {
  filter: grayscale(0%) opacity(1);
}

/* Responsive */
@media (max-width: 768px) {
  .pub_clients_1008_marquee-track {
    gap: 40px;
  }
  
  .pub_clients_1008_logo-item {
    height: calc(var(--logo-h, 60px) * 0.8);
    min-height: calc(var(--logo-h, 60px) * 0.8);
  }
  
  @keyframes pub_clients_1008_pubClients1008Scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-50% - 20px));
    }
  }
}

@media (max-width: 480px) {
  .pub_clients_1008_logo-item {
    height: calc(var(--logo-h, 60px) * 0.6);
    min-height: calc(var(--logo-h, 60px) * 0.6);
  }
}


.pub_form_1021_wrapper {
    position: relative;
    background-color: 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, #ffffff);
    font-family: var(--font-body, Inter, sans-serif);
    padding-top: var(--pt, 96px);
    padding-bottom: var(--pb, 96px);
    overflow: hidden;
    /* Dark Grid Pattern */
    background-image: var(--texture-bg, none),
        linear-gradient(var(--border, transparent) 1px, transparent 1px),
        linear-gradient(90deg, var(--border, transparent) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: center center;
    /* Internal variables */
    --inset-light: #ffffff;
    --cta-bg-end: #3b82f6;
    --hover-brightness: brightness(1.1);
    backdrop-filter: var(--material-backdrop, none);
    -webkit-backdrop-filter: var(--material-backdrop, none);
}

/* Ambient Background Glow */
.pub_form_1021_wrapper::before,
.pub_form_1021_wrapper::after {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: var(--radius-full, 50%);
    filter: blur(80px);
    z-index: var(--z-bg, 0);
    /* Background glow layer */
    pointer-events: none;
}

.pub_form_1021_wrapper::before {
    top: -10%;
    left: -10%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent, #8B5CF6) 15%, transparent), transparent 70%);
}

.pub_form_1021_wrapper::after {
    bottom: -10%;
    right: -10%;
    background: radial-gradient(circle, color-mix(in srgb, var(--primary, #3b82f6) 15%, transparent), transparent 70%);
}

.pub_form_1021_container {
    width: 100%;
    max-width: var(--max-w, 1280px);
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: var(--z-1, 1);
    /* Ensure content is above wrapper background/glow */
}

.pub_form_1021_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

@media (max-width: 1024px) {
    .pub_form_1021_grid {
        grid-template-columns: 1fr;
        gap: var(--space-gap, 3rem);
    }
}

/* Left Panel */
.pub_form_1021_leftPanel {
    display: flex;
    flex-direction: column;
}

.pub_form_1021_headline {
    font-family: var(--font-heading, Inter, sans-serif);
    font-weight: 900;
    line-height: var(--leading, 1.05);
    margin-bottom: 1.5rem;
    color: var(--text, #ffffff);
    letter-spacing: var(--tracking, -0.03em);
}

.pub_form_1021_description {
    font-size: calc(1.125rem * var(--body-scale, 1));
    color: var(--text-muted, #94a3b8);
    line-height: var(--leading, 1.75);
    margin-bottom: 2.5rem;
    max-width: 90%;
}

.pub_form_1021_featuresWrap {
    margin-bottom: 3rem;
}

.pub_form_1021_featuresLabel {
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text, #ffffff);
    font-size: calc(1.125rem * var(--body-scale, 1));
}

.pub_form_1021_featuresList {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pub_form_1021_featureItem {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 0.75rem);
    margin-bottom: 1rem;
    font-size: calc(1rem * var(--body-scale, 1));
    color: var(--text-muted, #94a3b8);
}

.pub_form_1021_featureItem i {
    color: var(--accent, #8B5CF6);
    font-size: calc(1.25rem * var(--body-scale, 1));
}

/* Social Proof */
.pub_form_1021_socialProof {
    background-color: var(--card-bg, #1e293b);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border, transparent);
    border-top: 1px solid color-mix(in srgb, var(--text, #ffffff) 15%, transparent);
    border-radius: 1.5rem;
    padding: 2.5rem;
    position: relative;

    transform: perspective(1000px) rotateY(2deg);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.pub_form_1021_socialProof::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top right, color-mix(in srgb, var(--text, #ffffff) 10%, transparent) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: var(--z-bg, 0);
    /* Glow layer behind card content */
    pointer-events: none;
}

.pub_form_1021_socialProof:hover {
    transform: perspective(1000px) rotateY(0deg) scale(1.02);

    border-color: color-mix(in srgb, var(--text, #ffffff) 20%, transparent);
}

.pub_form_1021_socialProof:hover::before {
    opacity: 1;
}

.pub_form_1021_socialQuote {
    font-size: calc(1.125rem * var(--body-scale, 1));
    font-style: italic;
    color: var(--text, #ffffff);
    line-height: var(--leading, 1.6);
    margin-bottom: 1.5rem;
    position: relative;
    z-index: var(--z-content, 2);
    /* Content above glow */
}

.pub_form_1021_socialAuthorWrap {
    display: flex;
    align-items: center;
    gap: var(--space-content-gap, 1rem);
    position: relative;
    z-index: var(--z-content, 2);
    /* Content above glow */
}

.pub_form_1021_socialAvatar {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full, 50%);
    object-fit: cover;
}

.pub_form_1021_socialAuthorInfo {
    display: flex;
    flex-direction: column;
}

.pub_form_1021_socialAuthorName {
    font-weight: 600;
    color: var(--text, #ffffff);
    font-size: calc(1rem * var(--heading-scale, 1));
}

.pub_form_1021_socialAuthorRole {
    font-size: calc(0.875rem * var(--body-scale, 1));
    color: var(--text-muted, #94a3b8);
}

/* Form Panel */
.pub_form_1021_formPanel {
    background-color: color-mix(in srgb, var(--card-bg, #1e293b) 80%, transparent);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid color-mix(in srgb, var(--text, #ffffff) 8%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--text, #ffffff) 15%, transparent);
    border-left: 1px solid color-mix(in srgb, var(--text, #ffffff) 10%, transparent);
    border-radius: var(--radius-xl, 2rem);
    padding-top: var(--pt, 3.5rem);
    padding-bottom: var(--pb, 3.5rem);
    padding-inline: 3rem;
    box-shadow: var(--shadow-xl, 0 40px 80px -20px color-mix(in srgb, #000000 50%, transparent)),
        inset 0 0 0 1px color-mix(in srgb, var(--text, #ffffff) 5%, transparent);
    position: relative;
    overflow: hidden;
}

.pub_form_1021_formPanel::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-xl, 2rem);
    background: radial-gradient(800px circle at top right, color-mix(in srgb, var(--text, #ffffff) 8%, transparent) 0%, transparent 60%);
    pointer-events: none;
    z-index: var(--z-bg, 0);
    /* Ambient inner glow */
}

.pub_form_1021_formHeader,
.pub_form_1021_statusWrap,
.pub_form_1021_submitWrap,
.pub_form_1021_form {
    position: relative;
    z-index: var(--z-content, 2);
    /* Ensure content is above form inner glow */
}

@media (max-width: 640px) {
    .pub_form_1021_formPanel {
        padding-inline: 2rem;
        padding-block: 2rem;
    }
}

.pub_form_1021_formTitle {
    font-family: var(--font-heading, Inter, sans-serif);
    font-size: calc(1.5rem * var(--heading-scale, 1));
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--text, #ffffff);
}

.pub_form_1021_form {
    display: flex;
    flex-direction: column;
    gap: var(--space-gap, 1.25rem);
}

.pub_form_1021_formRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-gap, 1.25rem);
}

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

.pub_form_1021_formGroup {
    display: flex;
    flex-direction: column;
    gap: var(--space-content-gap, 0.5rem);
}

.pub_form_1021_label {
    font-size: calc(0.8rem * var(--body-scale, 1));
    font-weight: 600;
    color: var(--text, #ffffff);
    text-transform: uppercase;
    letter-spacing: var(--tracking, 0.05em);
    opacity: 0.9;
}

.pub_form_1021_input,
.pub_form_1021_textarea {
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 1.125rem 1.25rem !important;
    background-color: color-mix(in srgb, #000000 20%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--text, #ffffff) 12%, transparent) !important;
    border-radius: 0.75rem !important;
    font-family: var(--font-body, inherit) !important;
    font-size: calc(1rem !important * var(--body-scale, 1));
    color: var(--text, #ffffff) !important;
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;

}

.pub_form_1021_textarea {
    resize: vertical !important;
    min-height: 140px !important;
    line-height: var(--leading, 1.6 !important);
}

.pub_form_1021_input:hover,
.pub_form_1021_textarea:hover {
    border-color: color-mix(in srgb, var(--text, #ffffff) 25%, transparent) !important;
    background-color: color-mix(in srgb, #000000 30%, transparent) !important;
}

.pub_form_1021_input:focus,
.pub_form_1021_textarea:focus {
    outline: none !important;
    border-color: var(--accent, #8B5CF6) !important;
    background-color: color-mix(in srgb, #000000 40%, transparent) !important;
    box-shadow: var(--shadow-sm, 0 0 0 4px color-mix(in srgb, var(--accent, #8B5CF6) 20%, transparent)),
        inset 0 2px 4px color-mix(in srgb, #000000 40%, transparent) !important;
    transform: translateY(-1px) !important;
}

/* Ensure placeholder color is visible against dark background */
.pub_form_1021_input::placeholder,
.pub_form_1021_textarea::placeholder {
    color: color-mix(in srgb, var(--text-muted, #94a3b8) 70%, transparent) !important;
}

.pub_form_1021_submitBtn {
    background: linear-gradient(135deg, var(--accent, #8B5CF6) 0%, var(--cta-bg-end, #3b82f6) 100%);
    color: var(--cta-text, #ffffff);
    font-family: var(--font-body, system-ui, sans-serif);
    font-weight: 700;
    font-size: calc(1.125rem * var(--body-scale, 1));
    padding: 1.125rem 2rem;
    border: none;
    border-radius: var(--radius-lg, 0.75rem);
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 1rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-content-gap, 0.75rem);
    box-shadow: var(--shadow-md, 0 10px 25px -5px color-mix(in srgb, var(--accent, #8B5CF6) 50%, transparent)),
        inset 0 1px 1px color-mix(in srgb, var(--inset-light, #ffffff) 30%, transparent);
    letter-spacing: var(--tracking, 0.02em);
}

.pub_form_1021_submitBtn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg, 0 15px 30px -5px color-mix(in srgb, var(--accent, #8B5CF6) 60%, transparent)),
        inset 0 1px 1px color-mix(in srgb, var(--inset-light, #ffffff) 40%, transparent);
    filter: var(--hover-brightness, brightness(1.1));
}

.pub_form_1021_submitBtn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.pub_form_1021_privacyText {
    font-size: calc(0.75rem * var(--body-scale, 1));
    color: var(--text-muted, #94a3b8);
    text-align: center;
    margin-top: 1rem;
}

/* Status Messages */
.pub_form_1021_successMessage {
    background-color: color-mix(in srgb, var(--accent, #8B5CF6) 15%, transparent);
    color: var(--text, #ffffff);
    padding: 1rem;
    border-radius: var(--radius-md, 0.5rem);
    margin-bottom: 1.5rem;
    font-weight: 500;
    text-align: center;
    border: 1px solid var(--accent, #8B5CF6);
}

.pub_form_1021_errorMessage {
    background-color: color-mix(in srgb, var(--error, #ef4444) 15%, transparent);
    color: var(--text, #ffffff);
    padding: 1rem;
    border-radius: var(--radius-md, 0.5rem);
    margin-bottom: 1.5rem;
    font-weight: 500;
    text-align: center;
    border: 1px solid var(--error, #ef4444);
}

/* ============================================================
   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: privacy-policy */
/* ============================================================
   PUB-NAV-1009 — Symmetry Centered Nav
   Series 1009 · Center-logo · 3-column grid · Frosted glass on scroll · Adaptive theme
   State: data-scrolled on .navBar  |  data-open on .mobileDrawer/.drawerOverlay
   ============================================================ */

/* ── Root ────────────────────────────────────────────────── */
.pub_nav_1009_navRoot {
    --t: 0.22s ease;
    --t-slow: 0.35s ease;
    --r: 6px;
    --r-lg: 12px;
    --r-btn: 999px;
    --fs-brand: clamp(15px, 1.5vw, 18px);
    --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.6vw, 22px);
    --fs-caret: 10px;
    --hover-bg: rgba(167, 139, 250, 0.1);
    --hover-bg-strong: rgba(167, 139, 250, 0.12);

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

/* ── Transparent bar (default) ───────────────────────────── */
.pub_nav_1009_navBar {
    position: var(--navbar-position, fixed);
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav, 1000);
    /* above page content, below drawers */
    background-color: var(--bg, rgba(10, 10, 20, 0.90));
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.06));
    transition:
        background-color var(--t, 0.22s ease),
        border-color var(--t, 0.22s ease),
        box-shadow var(--t, 0.22s ease),
        backdrop-filter var(--t, 0.22s ease);
    padding-top: var(--pt, 0);
    padding-bottom: var(--pb, 0);
}

/* ── Frosted glass on scroll ─────────────────────────────── */
.pub_nav_1009_navBar[data-scrolled='true'] {
    background-color: var(--bg, rgba(10, 10, 20, 0.82));
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-color: var(--border, rgba(255, 255, 255, 0.10));
}

/* ── 3-column center grid ────────────────────────────────── */
.pub_nav_1009_navInner {
    max-width: var(--max-w, 1280px);
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 48px);
    min-height: var(--nav-h, 72px);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
gap: var(--space-gap, 24px);
}

/* ── Left: Nav Links ─────────────────────────────────────── */
.pub_nav_1009_navLeft {
    display: flex;
    justify-content: flex-start;
    /* links anchored to left edge */
}

.pub_nav_1009_navLinks {
  /* composed: navLinks from NavBase.module.css */
  display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    /* gap: set in component */
    gap: 2px;
}

.pub_nav_1009_dropWrap {
    position: relative;
}

.pub_nav_1009_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 12px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 500;
    color: var(--text, #f9fafb);
    border-radius: var(--r, 6px);
}

.pub_nav_1009_navLink:hover {
    color: var(--accent, #a78bfa);
    background-color: var(--hover-bg, rgba(167, 139, 250, 0.1));
}

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

.pub_nav_1009_navLinkBtn:hover {
    color: var(--accent, #a78bfa);
    background-color: var(--hover-bg, rgba(167, 139, 250, 0.1));
}

.pub_nav_1009_navCaret {
    font-size: var(--fs-caret, 10px);
    transition: transform var(--t, 0.22s ease);
}

/* ── Dropdown panel ──────────────────────────────────────── */
.pub_nav_1009_navDropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 168px;
    background-color: var(--bg, rgba(18, 18, 32, 0.92));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    border-radius: var(--r-lg, 12px);
    padding: 6px;
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-6px);
    transition:
        opacity var(--t, 0.22s ease),
        transform var(--t, 0.22s ease);
    z-index: var(--z-dropdown, 1200);
    /* above nav content */
}

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

.pub_nav_1009_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, #f9fafb);
    text-decoration: none;
    border-radius: var(--r, 6px);
    transition: color var(--t, 0.22s ease), background-color var(--t, 0.22s ease);
    white-space: nowrap;
}

.pub_nav_1009_ddItem:hover {
    color: var(--accent, #a78bfa);
    background-color: var(--hover-bg, rgba(167, 139, 250, 0.1));
}

/* ── Center: Logo ────────────────────────────────────────── */
.pub_nav_1009_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, #f9fafb);
    text-decoration: none;
    justify-self: center;
}

.pub_nav_1009_logoMark {
    font-size: var(--fs-icon, clamp(18px, 1.6vw, 22px));
    color: var(--accent, #a78bfa);
    line-height: var(--leading, 1);
}

.pub_nav_1009_logoWord {
    font-size: var(--fs-brand, clamp(15px, 1.5vw, 18px));
    font-weight: 700;
    letter-spacing: var(--tracking, -0.02em);
    color: var(--text, #f9fafb);
    font-family: var(--font-heading, var(--font-body, 'Inter', system-ui, sans-serif));
    white-space: nowrap;
}

.pub_nav_1009_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);
}

/* ── Right: CTA + Hamburger ──────────────────────────────── */
.pub_nav_1009_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, 10px);
    justify-content: flex-end;
    /* CTA anchored to right edge */
}

.pub_nav_1009_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: 8px 20px;
    background-color: var(--cta-bg, #7c3aed);
    color: var(--cta-text, #ffffff);
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 600;
    border-radius: var(--r-btn, 999px);
    white-space: nowrap;
}

.pub_nav_1009_navCta:hover {
    background-color: var(--cta-hover, rgba(124, 58, 237, 0.88));
    transform: translateY(-1px);
}

/* ── Hamburger ───────────────────────────────────────────── */
.pub_nav_1009_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.6vw, 22px));
    color: var(--text, #f9fafb);
    border-radius: var(--r, 6px);
    display: none;
    /* visible on mobile via media query */
}

.pub_nav_1009_hamburger:hover {
    background-color: var(--hover-bg-strong, rgba(167, 139, 250, 0.12));
}

.pub_nav_1009_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, #f9fafb);
    border-radius: 2px;
}

/* ── Drawer Overlay ──────────────────────────────────────── */
.pub_nav_1009_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 navbar, below drawer panel */
    background-color: var(--overlay-bg, rgba(10, 10, 20, 0.5));
}

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

/* ── Mobile Drawer ───────────────────────────────────────── */
.pub_nav_1009_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);
    /* topmost layer */
    width: min(320px, 85vw);
    background-color: var(--bg, #0f0f1e);
    border-left: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

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

/* ── Drawer Header ───────────────────────────────────────── */
.pub_nav_1009_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, rgba(255, 255, 255, 0.08));
}

.pub_nav_1009_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, 18px));
    font-weight: 700;
    color: var(--text, #f9fafb);
}

.pub_nav_1009_drawerBrandMark {
    font-size: var(--fs-icon, clamp(18px, 1.6vw, 22px));
    color: var(--accent, #a78bfa);
}

.pub_nav_1009_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, #f9fafb);
    border-radius: var(--r, 6px);
}

.pub_nav_1009_drawerCloseBtn:hover {
    background-color: var(--hover-bg, rgba(167, 139, 250, 0.1));
}

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

.pub_nav_1009_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, #f9fafb);
    border-radius: var(--r, 6px);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
}

.pub_nav_1009_drawerLink:hover {
    color: var(--accent, #a78bfa);
    background-color: var(--hover-bg, rgba(167, 139, 250, 0.1));
}

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

.pub_nav_1009_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_1009_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-muted, #a1a1b5);
    border-radius: var(--r, 6px);
    display: block;
}

.pub_nav_1009_drawerSubLink:hover {
    color: var(--accent, #a78bfa);
    background-color: var(--hover-bg, rgba(167, 139, 250, 0.1));
}

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

.pub_nav_1009_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, #7c3aed);
    color: var(--cta-text, #ffffff);
    font-size: var(--fs-drawer, clamp(14px, 1.4vw, 15px));
    font-weight: 600;
    border-radius: var(--r-btn, 999px);
    text-align: center;
}

.pub_nav_1009_drawerCta:hover {
    background-color: var(--cta-hover, rgba(124, 58, 237, 0.88));
}

/* ══════════════════════════════════════════════════════════
   FOCUS STATES (accessibility)
══════════════════════════════════════════════════════════ */
.pub_nav_1009_navLink:focus-visible,
.pub_nav_1009_navLinkBtn:focus-visible,
.pub_nav_1009_navCta:focus-visible,
.pub_nav_1009_hamburger:focus-visible,
.pub_nav_1009_drawerCloseBtn:focus-visible,
.pub_nav_1009_drawerLink:focus-visible,
.pub_nav_1009_drawerSubLink:focus-visible,
.pub_nav_1009_drawerCta:focus-visible {
    outline: 2px solid var(--accent, #a78bfa);
    outline-offset: 3px;
    border-radius: var(--r, 6px);
}

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

/* ── Tablet (1024px) ─────────────────────────────────────── */
@media (max-width: 1024px) {
    .pub_nav_1009_navLinks {
        gap: 0;
    }

    .pub_nav_1009_navLink,
    .pub_nav_1009_navLinkBtn {
        padding: 6px 8px;
    }
}

/* ── Tablet / Mobile (768px) ─────────────────────────────── */
@media (max-width: 768px) {
    .pub_nav_1009_navInner {
        /* switch to flex for mobile — logo centered with absolute positioning */
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }

    .pub_nav_1009_navLeft {
        display: none;
    }

    .pub_nav_1009_logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .pub_nav_1009_navCta {
        display: none;
    }

    .pub_nav_1009_hamburger {
        display: flex;
    }
}

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

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

    .pub_nav_1009_navBar,
    .pub_nav_1009_navLink,
    .pub_nav_1009_navLinkBtn,
    .pub_nav_1009_navDropdown,
    .pub_nav_1009_ddItem,
    .pub_nav_1009_navCta,
    .pub_nav_1009_drawerOverlay,
    .pub_nav_1009_mobileDrawer,
    .pub_nav_1009_drawerLink,
    .pub_nav_1009_drawerSubLink,
    .pub_nav_1009_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
   ══════════════════════════════════════════════════════════════ */

/* Override container max-width when TOC is present to allow exact centering */
@media (min-width: 1024px) {
    .pub_content_1008_section.pub_content_1008_withToc .pub_content_1008_container {
        max-width: 100%;
    }
    .pub_content_1008_tocLeft::after {
        content: "";
        width: var(--toc-w, 220px);
        flex-shrink: 100;
        display: block;
    }
    .pub_content_1008_tocRight::before {
        content: "";
        width: var(--toc-w, 220px);
        flex-shrink: 100;
        display: block;
    }
}

/* ── Two-column layout (desktop) ──────────────────────────── */
.pub_content_1008_contentWithToc {
    display: flex;
    gap: var(--space-gap, 40px);
    align-items: flex-start;
    justify-content: center;
}

/* 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: 0 1 var(--max-w, 800px);
    width: 100%;
    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-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: terms-conditions */
/* ============================================================
   PUB-NAV-1009 — Symmetry Centered Nav
   Series 1009 · Center-logo · 3-column grid · Frosted glass on scroll · Adaptive theme
   State: data-scrolled on .navBar  |  data-open on .mobileDrawer/.drawerOverlay
   ============================================================ */

/* ── Root ────────────────────────────────────────────────── */
.pub_nav_1009_navRoot {
    --t: 0.22s ease;
    --t-slow: 0.35s ease;
    --r: 6px;
    --r-lg: 12px;
    --r-btn: 999px;
    --fs-brand: clamp(15px, 1.5vw, 18px);
    --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.6vw, 22px);
    --fs-caret: 10px;
    --hover-bg: rgba(167, 139, 250, 0.1);
    --hover-bg-strong: rgba(167, 139, 250, 0.12);

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

/* ── Transparent bar (default) ───────────────────────────── */
.pub_nav_1009_navBar {
    position: var(--navbar-position, fixed);
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav, 1000);
    /* above page content, below drawers */
    background-color: var(--bg, rgba(10, 10, 20, 0.90));
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.06));
    transition:
        background-color var(--t, 0.22s ease),
        border-color var(--t, 0.22s ease),
        box-shadow var(--t, 0.22s ease),
        backdrop-filter var(--t, 0.22s ease);
    padding-top: var(--pt, 0);
    padding-bottom: var(--pb, 0);
}

/* ── Frosted glass on scroll ─────────────────────────────── */
.pub_nav_1009_navBar[data-scrolled='true'] {
    background-color: var(--bg, rgba(10, 10, 20, 0.82));
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-color: var(--border, rgba(255, 255, 255, 0.10));
}

/* ── 3-column center grid ────────────────────────────────── */
.pub_nav_1009_navInner {
    max-width: var(--max-w, 1280px);
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 48px);
    min-height: var(--nav-h, 72px);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
gap: var(--space-gap, 24px);
}

/* ── Left: Nav Links ─────────────────────────────────────── */
.pub_nav_1009_navLeft {
    display: flex;
    justify-content: flex-start;
    /* links anchored to left edge */
}

.pub_nav_1009_navLinks {
  /* composed: navLinks from NavBase.module.css */
  display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    /* gap: set in component */
    gap: 2px;
}

.pub_nav_1009_dropWrap {
    position: relative;
}

.pub_nav_1009_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 12px;
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 500;
    color: var(--text, #f9fafb);
    border-radius: var(--r, 6px);
}

.pub_nav_1009_navLink:hover {
    color: var(--accent, #a78bfa);
    background-color: var(--hover-bg, rgba(167, 139, 250, 0.1));
}

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

.pub_nav_1009_navLinkBtn:hover {
    color: var(--accent, #a78bfa);
    background-color: var(--hover-bg, rgba(167, 139, 250, 0.1));
}

.pub_nav_1009_navCaret {
    font-size: var(--fs-caret, 10px);
    transition: transform var(--t, 0.22s ease);
}

/* ── Dropdown panel ──────────────────────────────────────── */
.pub_nav_1009_navDropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 168px;
    background-color: var(--bg, rgba(18, 18, 32, 0.92));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    border-radius: var(--r-lg, 12px);
    padding: 6px;
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-6px);
    transition:
        opacity var(--t, 0.22s ease),
        transform var(--t, 0.22s ease);
    z-index: var(--z-dropdown, 1200);
    /* above nav content */
}

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

.pub_nav_1009_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, #f9fafb);
    text-decoration: none;
    border-radius: var(--r, 6px);
    transition: color var(--t, 0.22s ease), background-color var(--t, 0.22s ease);
    white-space: nowrap;
}

.pub_nav_1009_ddItem:hover {
    color: var(--accent, #a78bfa);
    background-color: var(--hover-bg, rgba(167, 139, 250, 0.1));
}

/* ── Center: Logo ────────────────────────────────────────── */
.pub_nav_1009_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, #f9fafb);
    text-decoration: none;
    justify-self: center;
}

.pub_nav_1009_logoMark {
    font-size: var(--fs-icon, clamp(18px, 1.6vw, 22px));
    color: var(--accent, #a78bfa);
    line-height: var(--leading, 1);
}

.pub_nav_1009_logoWord {
    font-size: var(--fs-brand, clamp(15px, 1.5vw, 18px));
    font-weight: 700;
    letter-spacing: var(--tracking, -0.02em);
    color: var(--text, #f9fafb);
    font-family: var(--font-heading, var(--font-body, 'Inter', system-ui, sans-serif));
    white-space: nowrap;
}

.pub_nav_1009_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);
}

/* ── Right: CTA + Hamburger ──────────────────────────────── */
.pub_nav_1009_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, 10px);
    justify-content: flex-end;
    /* CTA anchored to right edge */
}

.pub_nav_1009_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: 8px 20px;
    background-color: var(--cta-bg, #7c3aed);
    color: var(--cta-text, #ffffff);
    font-size: var(--fs-nav, clamp(13px, 1.3vw, 14px));
    font-weight: 600;
    border-radius: var(--r-btn, 999px);
    white-space: nowrap;
}

.pub_nav_1009_navCta:hover {
    background-color: var(--cta-hover, rgba(124, 58, 237, 0.88));
    transform: translateY(-1px);
}

/* ── Hamburger ───────────────────────────────────────────── */
.pub_nav_1009_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.6vw, 22px));
    color: var(--text, #f9fafb);
    border-radius: var(--r, 6px);
    display: none;
    /* visible on mobile via media query */
}

.pub_nav_1009_hamburger:hover {
    background-color: var(--hover-bg-strong, rgba(167, 139, 250, 0.12));
}

.pub_nav_1009_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, #f9fafb);
    border-radius: 2px;
}

/* ── Drawer Overlay ──────────────────────────────────────── */
.pub_nav_1009_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 navbar, below drawer panel */
    background-color: var(--overlay-bg, rgba(10, 10, 20, 0.5));
}

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

/* ── Mobile Drawer ───────────────────────────────────────── */
.pub_nav_1009_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);
    /* topmost layer */
    width: min(320px, 85vw);
    background-color: var(--bg, #0f0f1e);
    border-left: 1px solid var(--border, rgba(255, 255, 255, 0.08));
}

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

/* ── Drawer Header ───────────────────────────────────────── */
.pub_nav_1009_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, rgba(255, 255, 255, 0.08));
}

.pub_nav_1009_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, 18px));
    font-weight: 700;
    color: var(--text, #f9fafb);
}

.pub_nav_1009_drawerBrandMark {
    font-size: var(--fs-icon, clamp(18px, 1.6vw, 22px));
    color: var(--accent, #a78bfa);
}

.pub_nav_1009_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, #f9fafb);
    border-radius: var(--r, 6px);
}

.pub_nav_1009_drawerCloseBtn:hover {
    background-color: var(--hover-bg, rgba(167, 139, 250, 0.1));
}

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

.pub_nav_1009_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, #f9fafb);
    border-radius: var(--r, 6px);
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
}

.pub_nav_1009_drawerLink:hover {
    color: var(--accent, #a78bfa);
    background-color: var(--hover-bg, rgba(167, 139, 250, 0.1));
}

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

.pub_nav_1009_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_1009_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-muted, #a1a1b5);
    border-radius: var(--r, 6px);
    display: block;
}

.pub_nav_1009_drawerSubLink:hover {
    color: var(--accent, #a78bfa);
    background-color: var(--hover-bg, rgba(167, 139, 250, 0.1));
}

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

.pub_nav_1009_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, #7c3aed);
    color: var(--cta-text, #ffffff);
    font-size: var(--fs-drawer, clamp(14px, 1.4vw, 15px));
    font-weight: 600;
    border-radius: var(--r-btn, 999px);
    text-align: center;
}

.pub_nav_1009_drawerCta:hover {
    background-color: var(--cta-hover, rgba(124, 58, 237, 0.88));
}

/* ══════════════════════════════════════════════════════════
   FOCUS STATES (accessibility)
══════════════════════════════════════════════════════════ */
.pub_nav_1009_navLink:focus-visible,
.pub_nav_1009_navLinkBtn:focus-visible,
.pub_nav_1009_navCta:focus-visible,
.pub_nav_1009_hamburger:focus-visible,
.pub_nav_1009_drawerCloseBtn:focus-visible,
.pub_nav_1009_drawerLink:focus-visible,
.pub_nav_1009_drawerSubLink:focus-visible,
.pub_nav_1009_drawerCta:focus-visible {
    outline: 2px solid var(--accent, #a78bfa);
    outline-offset: 3px;
    border-radius: var(--r, 6px);
}

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

/* ── Tablet (1024px) ─────────────────────────────────────── */
@media (max-width: 1024px) {
    .pub_nav_1009_navLinks {
        gap: 0;
    }

    .pub_nav_1009_navLink,
    .pub_nav_1009_navLinkBtn {
        padding: 6px 8px;
    }
}

/* ── Tablet / Mobile (768px) ─────────────────────────────── */
@media (max-width: 768px) {
    .pub_nav_1009_navInner {
        /* switch to flex for mobile — logo centered with absolute positioning */
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }

    .pub_nav_1009_navLeft {
        display: none;
    }

    .pub_nav_1009_logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .pub_nav_1009_navCta {
        display: none;
    }

    .pub_nav_1009_hamburger {
        display: flex;
    }
}

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

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

    .pub_nav_1009_navBar,
    .pub_nav_1009_navLink,
    .pub_nav_1009_navLinkBtn,
    .pub_nav_1009_navDropdown,
    .pub_nav_1009_ddItem,
    .pub_nav_1009_navCta,
    .pub_nav_1009_drawerOverlay,
    .pub_nav_1009_mobileDrawer,
    .pub_nav_1009_drawerLink,
    .pub_nav_1009_drawerSubLink,
    .pub_nav_1009_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
   ══════════════════════════════════════════════════════════════ */

/* Override container max-width when TOC is present to allow exact centering */
@media (min-width: 1024px) {
    .pub_content_1008_section.pub_content_1008_withToc .pub_content_1008_container {
        max-width: 100%;
    }
    .pub_content_1008_tocLeft::after {
        content: "";
        width: var(--toc-w, 220px);
        flex-shrink: 100;
        display: block;
    }
    .pub_content_1008_tocRight::before {
        content: "";
        width: var(--toc-w, 220px);
        flex-shrink: 100;
        display: block;
    }
}

/* ── Two-column layout (desktop) ──────────────────────────── */
.pub_content_1008_contentWithToc {
    display: flex;
    gap: var(--space-gap, 40px);
    align-items: flex-start;
    justify-content: center;
}

/* 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: 0 1 var(--max-w, 800px);
    width: 100%;
    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-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;
    }
}