/* ─── Top Bar (announcement strip above header) ─── */
.liq-top-bar {
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em;
}
.liq-top-bar a {
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.4);
    transition: border-color 0.2s;
}
.liq-top-bar a:hover {
    border-color: rgba(255,255,255,0.9);
}

/* ─── CMS-specific: header/footer wrappers (replaces WP theme wrapper) ─── */
.luperiq-ts-layout--header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--luperiq-header-bg, #0f172a);
    color: var(--luperiq-header-text, #ffffff);
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.luperiq-ts-layout--header a {
    color: inherit;
}

.luperiq-ts-layout--header .luperiq-ts-layout-row {
    width: 100%;
    max-width: var(--luperiq-container, 1280px);
    margin: 0 auto;
    padding: 12px 18px;
}

/* Header: blocks must be transparent so dark header bg shows through */
.luperiq-ts-layout--header .luperiq-ts-block {
    background-color: transparent !important;
    background: transparent !important;
    color: inherit !important;
    border-bottom: none !important;
}

.luperiq-ts-layout--header .luperiq-ts-block--rotating-text {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

/* Header: 2-col layout — brand shrinks, CTAs keep natural size */
.luperiq-ts-layout--header .luperiq-ts-layout-row.is-cols-2 {
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
}

.luperiq-ts-layout--header .luperiq-ts-cta-group {
    flex-wrap: nowrap;
}

/* Center the nav list within header */
.luperiq-ts-layout--header .luperiq-ts-nav {
    display: flex;
    justify-content: center;
}
.luperiq-ts-layout--header .luperiq-ts-nav ul {
    display: flex;
    justify-content: center;
}

.luperiq-ts-layout--header .luperiq-ts-brand-name {
    font-size: 24px;
}

.luperiq-ts-layout--header .luperiq-ts-cta {
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: calc(var(--luperiq-radius, 8px) * 0.75);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    transition: filter 0.15s ease;
}
.luperiq-ts-layout--header .luperiq-ts-cta--primary {
    background: var(--luperiq-accent, #2563eb);
    color: var(--luperiq-button-text, #fff) !important;
}
.luperiq-ts-layout--header .luperiq-ts-cta--primary:hover { filter: brightness(1.08); }
.luperiq-ts-layout--header .luperiq-ts-cta--outline {
    border: 1.5px solid currentColor;
    background: transparent;
    opacity: 0.85;
}
.luperiq-ts-layout--header .luperiq-ts-cta--outline:hover { opacity: 1; }
/* Header: 3-col layout — narrow left (toggle/spacer), wide center (brand or
   nav), narrow right (cta+user).

   ⚠ Was `1fr auto 1fr`, which OVERLAPPED. The middle `auto` track sizes to its
   content, and on a site whose centre column holds the mega-nav that content is
   wide (597px measured on rule-the-roost). The two `1fr` tracks then split what
   is left — 206px each — while the right column's CTA + user menu needs 310px.
   A grid item does not clip: it overflowed its 206px track and, because the
   column is `justify-self: end`, spilled LEFTWARD across the middle column,
   covering 81 of the 100px "Contact" link. The link was invisible and
   unclickable, and nothing errored.

   Outer columns are now sized to their content and the CENTRE column absorbs
   the remainder (`minmax(0, 1fr)` so it may shrink below its content rather
   than forcing the row to overflow). The nav is the element that can afford to
   compress — it has a hamburger fallback; a CTA button cannot shrink. */
.luperiq-ts-layout--header .luperiq-ts-layout-row.is-cols-3 {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
}
/* Center the brand in the middle column */
.luperiq-ts-layout--header .luperiq-ts-layout-row.is-cols-3 > .luperiq-ts-layout-col:nth-child(2) {
    text-align: center;
    justify-self: center;
    /* Without min-width:0 a grid item refuses to shrink below its content's
       min-content size, which reintroduces the overflow this rule fixes. */
    min-width: 0;
}
/* Right-align the last column — flex row so CTA group + UserMenu sit inline */
.luperiq-ts-layout--header .luperiq-ts-layout-row.is-cols-3 > .luperiq-ts-layout-col:last-child {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 12px;
    /* Belt and braces: never let this column bleed back over the nav even if a
       future CTA is wider than the space available. */
    min-width: 0;
}
/* Same for 2-col header rows (EditorialSplit) */
.luperiq-ts-layout--header .luperiq-ts-layout-row.is-cols-2 > .luperiq-ts-layout-col:last-child {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
}

/* ── Header button cleanup ──
   When a top bar is present, hide the redundant "Call" outline button from the
   CTA group — the top bar already provides a Call link. */
.liq-top-bar + .luperiq-ts-layout--header .luperiq-ts-cta-group .luperiq-ts-cta--outline {
    display: none;
}
/* Hide the CTA group in the header — UserMenu is the single source of auth CTAs.
   The CTA group stored in the header profile duplicates Log In / purchase actions. */
.luperiq-ts-layout--header .luperiq-ts-block--cta-group {
    display: none;
}
/* Mobile CTA buttons injected into nav — only visible on mobile when menu is open */
.luperiq-ts-mobile-cta {
    display: none !important;
}
@media (max-width: 640px) {
    .luperiq-ts-nav.is-open .luperiq-ts-mobile-cta {
        display: flex !important;
    }
}

/* UserMenu in header: Log In as outline button (visible but secondary) */
.luperiq-ts-layout--header .luperiq-ts-user-menu .luperiq-ts-cta--outline {
    border: 1.5px solid rgba(255,255,255,0.35) !important;
    background: transparent !important;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: var(--luperiq-radius, 6px);
    opacity: 0.85;
}
.luperiq-ts-layout--header .luperiq-ts-user-menu .luperiq-ts-cta--outline:hover {
    opacity: 1;
    border-color: rgba(255,255,255,0.6) !important;
}
/* UserMenu: Start Free as a visible primary button */
.luperiq-ts-layout--header .luperiq-ts-user-menu .luperiq-ts-cta--primary {
    background: var(--luperiq-accent, #2563eb) !important;
    color: var(--luperiq-button-text, #fff) !important;
    border: none !important;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: var(--luperiq-radius, 6px);
    opacity: 1;
    margin-left: 8px;
}
.luperiq-ts-layout--header .luperiq-ts-user-menu .luperiq-ts-cta--primary:hover {
    filter: brightness(1.08);
}

/* Mega nav links and toggles inside header */
.luperiq-ts-layout--header .luperiq-ts-mega-nav-link,
.luperiq-ts-layout--header .luperiq-ts-mega-nav-toggle {
    color: inherit;
    font-size: var(--luperiq-nav-size, 14px);
}

/* Hide the NavToggle block when a MegaNav block is present (it has its own hamburger).
   All MegaNav styles (family_hub, card_grid_mega, classic, simple_bar, side_drawer,
   command_palette) include their own mobile hamburger — the NavToggle block is redundant.
   Uses JS fallback below for browsers without :has() support.
   EXCEPTION: classic style does NOT include its own hamburger, so on mobile we need
   the standalone NavToggle to show. Restore it for classic mega-nav under 860px. */
.luperiq-ts-layout--header:has(.luperiq-ts-block--mega-nav) .luperiq-ts-block--nav-toggle { display: none !important; }
@media (max-width: 860px) {
    /* Higher specificity than the desktop hide-rule above so we win the cascade.
       Use body. prefix to bump specificity. */
    body .luperiq-ts-layout--header:has(.luperiq-ts-block--mega-nav) .luperiq-ts-block--nav-toggle {
        display: block !important;
    }
    body .luperiq-ts-layout--header:has(.luperiq-ts-block--mega-nav) .luperiq-ts-block--nav-toggle .luperiq-ts-nav-toggle {
        display: flex !important;
    }
}

/* Nav toggle (hamburger): hidden on desktop, visible on mobile */
.luperiq-ts-nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: inherit;
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    transition: background 0.2s;
}

.luperiq-ts-nav-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Hamburger lines from <span> children */
.luperiq-ts-nav-toggle > span {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
}

/* Hamburger X animation when open */
.luperiq-ts-nav-toggle.is-open > span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.luperiq-ts-nav-toggle.is-open > span:nth-child(2) { opacity: 0; }
.luperiq-ts-nav-toggle.is-open > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile: show hamburger, stack nav vertically */
/* On mobile: hide the nav column inline — it drops down via hamburger instead */
@media (max-width: 768px) {
    .luperiq-ts-layout--header .luperiq-ts-layout-col:last-child > .luperiq-ts-block--nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
    }
    .luperiq-ts-layout--header .luperiq-ts-block--nav .luperiq-ts-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--luperiq-header-bg, var(--header-bg, #fff));
        border-bottom: 1px solid rgba(0,0,0,0.1);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        z-index: 100;
        padding: 8px 0;
    }
    .luperiq-ts-layout--header .luperiq-ts-block--nav .luperiq-ts-nav.is-open { display: block; }
    .luperiq-ts-layout--header .luperiq-ts-nav ul,
    .luperiq-ts-layout--header .luperiq-ts-nav-menu {
        flex-direction: column;
    }
    .luperiq-ts-layout--header .luperiq-ts-nav-menu li a {
        display: block;
        padding: 14px 24px;
        font-size: 16px;
        border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    .luperiq-ts-layout--header .luperiq-ts-nav-menu li:last-child a { border-bottom: none; }
    /* Force header to stay horizontal on mobile — brand left, hamburger right */
    .luperiq-ts-layout--header .luperiq-ts-layout-row {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        grid-template-columns: unset !important;
        gap: 8px;
    }
    .luperiq-ts-layout--header .luperiq-ts-layout-col {
        width: auto !important;
        flex-shrink: 0;
    }
    .luperiq-ts-layout--header { position: relative; }
/* Mobile nav closing brace already above */
}

/* Brand link styling */
.luperiq-ts-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    font-size: var(--luperiq-brand-size, 24px);
    font-weight: 850;
    letter-spacing: 0.2px;
    line-height: 1.1;
    white-space: nowrap;
}

/* Footer wrapper */
.luperiq-theme-footer {
    background: var(--luperiq-footer-bg, var(--luperiq-primary, #0f172a));
    color: var(--luperiq-footer-text, rgba(255,255,255,0.7));
    margin-top: auto;
}

/* Footer layout */
.luperiq-ts-layout--footer {
    color: inherit;
}

.luperiq-ts-layout--footer a {
    color: inherit;
}

.luperiq-ts-layout--footer .luperiq-ts-layout-row {
    width: 100%;
    max-width: var(--luperiq-container, 1280px);
    margin: 0 auto;
    padding: 24px 18px;
}

/* Footer: blocks transparent like header */
.luperiq-ts-layout--footer .luperiq-ts-block {
    background-color: transparent !important;
    background: transparent !important;
    color: inherit !important;
    border-bottom: none !important;
}

/* Footer legal bar — copyright, address, policy links */
.luperiq-theme-footer-legal {
    max-width: var(--luperiq-container, 1280px);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 24px;
    padding: 18px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* DarkHero footer: large centered brand statement */
.luperiq-ts-layout--footer .luperiq-ts-layout-row.is-cols-1 .luperiq-ts-block--heading h2 {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 900;
}

.luperiq-theme-footer-legal a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s;
}

.luperiq-theme-footer-legal a:hover {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
}

.luperiq-theme-footer-legal-note {
    font-weight: 500;
}

.luperiq-theme-footer-legal-sep {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}

.luperiq-theme-footer-address {
    color: rgba(255, 255, 255, 0.4);
}

/* Ensure page fills viewport height so footer is at bottom */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    background: var(--luperiq-background, #f1f5f9);
    color: var(--luperiq-text, #1e293b);
}

.site-main {
    flex: 1;
    max-width: var(--luperiq-container, 1100px);
    margin: 0 auto;
    padding: 32px 18px;
    width: 100%;
    box-sizing: border-box;
}

/* Constrain prose-level direct children to a centered readable column.
   Smart blocks (cards, grids, sections, asides) intentionally stay full-width
   so they can use the parent's 1100px container. */
.site-main > p,
.site-main > h1,
.site-main > h2,
.site-main > h3,
.site-main > ul,
.site-main > ol,
.site-main > blockquote,
.site-main > pre,
.site-main > table {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
.site-main > h1,
.site-main > h2,
.site-main > h3 {
    text-align: center;
}
/* Center the first 2 paragraphs (typically a kicker + lead) */
.site-main > p:first-of-type,
.site-main > p:nth-of-type(2) {
    text-align: center;
}

/* Full-bleed dark-shell pages */
.site-main:has(.md-shell),
.site-main:has(.wd-shell),
.site-main:has(.cat-shell),
.site-main:has(.wf-shell),
.site-main:has(.mktg-hero) {
    max-width: none !important;
    padding: 0 !important;
}
.site-main-inner:has(.md-shell),
.site-main-inner:has(.wd-shell),
.site-main-inner:has(.cat-shell),
.site-main-inner:has(.wf-shell),
.site-main-inner:has(.mktg-hero) {
    max-width: none !important;
    padding: 0 !important;
}
.site-main > .page-content--blocks:has(.md-shell),
.site-main > .page-content--blocks:has(.wd-shell),
.site-main > .page-content--blocks:has(.cat-shell),
.site-main > .page-content--blocks:has(.wf-shell),
.site-main > .page-content--blocks:has(.mktg-hero) {
    max-width: none !important;
    padding: 0 !important;
}

/* Block pages: deterministic rhythm between flow blocks so a paragraph or
   list never butts against the note/card that follows it. */
.page-content--blocks > h2 { margin: 30px 0 12px; }
.page-content--blocks > h3 { margin: 22px 0 10px; }
.page-content--blocks > p { margin: 0 0 16px; line-height: 1.7; }
.page-content--blocks > ul,
.page-content--blocks > ol { margin: 0 0 22px; padding-left: 1.4em; }
.page-content--blocks > ul li,
.page-content--blocks > ol li { margin: 0 0 6px; }
.page-content--blocks > .columns > .col > h3 { margin: 0 0 10px; }

/* The block editor's "columns" shortcode (render.rs) had no CSS on themed
   sites at all — main.css carries it but tenants only load this sheet — so
   `.cols-2` stacked full-width and unpadded. Same rules as main.css, plus a
   single-column collapse on phones. */
.columns { display: grid; gap: 24px; margin: 24px 0; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) {
    .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
}

/* Button block wrapper (render.rs "button"): only main.css styled it. */
.btn-wrap { margin: 24px 0; }
.btn-wrap.align-center { text-align: center; }
.btn-wrap.align-right { text-align: right; }
.btn-wrap.align-left { text-align: left; }

/* Theme-Studio footer columns stack heading/paragraph/link blocks with no
   gap between them; give consecutive blocks in a footer column some air. */
.luperiq-ts-layout--footer .luperiq-ts-layout-col > .luperiq-ts-block + .luperiq-ts-block { margin-top: 10px; }
.page-content--blocks > .columns > .col > p { margin: 0 0 8px; }

/* CTA group in header */
.luperiq-ts-cta-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.luperiq-ts-block.is-align-right .luperiq-ts-cta-group {
    justify-content: flex-end;
}

/* User menu in header */
.luperiq-ts-user-menu {
    display: flex;
    align-items: center;
}

.luperiq-ts-user-menu a {
    text-decoration: none;
    color: inherit;
    opacity: 0.88;
    font-weight: 500;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: calc(var(--luperiq-radius, 16px) * 0.5);
    border: 1px solid rgba(255,255,255,0.2);
}

.luperiq-ts-user-menu a:hover {
    opacity: 1;
    background: rgba(255,255,255,0.1);
}

/* Body typography tokens — only active when the CSS variables are defined via :root */
body {
    font-family: var(--luperiq-body-font, inherit);
    font-size: var(--luperiq-body-size, inherit);
    line-height: var(--luperiq-body-line-height, inherit);
}

.luperiq-ts-layout {
    width: 100%;
    display: grid;
    gap: 14px;
}

/* Page layouts: seamless full-bleed rows, no gap */
.luperiq-ts-layout--page {
    gap: 0;
}

/* Collapse vertical padding when consecutive rows share the same tone */
.luperiq-ts-layout--page > .luperiq-ts-layout-row.is-tone-dark + .luperiq-ts-layout-row.is-tone-dark,
.luperiq-ts-layout--page > .luperiq-ts-layout-row.is-tone-accent + .luperiq-ts-layout-row.is-tone-accent,
.luperiq-ts-layout--page > .luperiq-ts-layout-row.is-tone-muted + .luperiq-ts-layout-row.is-tone-muted,
.luperiq-ts-layout--page > .luperiq-ts-layout-row.is-tone-surface + .luperiq-ts-layout-row.is-tone-surface {
    padding-top: 0;
}

/* Page rows get inner container constraint for readability.
   Use responsive padding so content has breathing room at all viewport widths. */
.luperiq-ts-layout--page > .luperiq-ts-layout-row {
    max-width: none;
    padding-left: clamp(16px, 4vw, 48px);
    padding-right: clamp(16px, 4vw, 48px);
}

.luperiq-ts-layout--page > .luperiq-ts-layout-row > .luperiq-ts-layout-col {
    max-width: var(--luperiq-container, 1100px);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.luperiq-ts-layout-row {
    display: grid;
    gap: 14px;
    align-items: center;
}

.luperiq-ts-layout-row.is-cols-1 {
    grid-template-columns: 1fr;
}

.luperiq-ts-layout-row.is-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.luperiq-ts-layout-row.is-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.luperiq-ts-layout-row.is-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.luperiq-ts-layout-col {
    min-width: 0;
}

/* Row tone variants */
.luperiq-ts-layout-row.is-tone-surface {
    background-color: var(--luperiq-surface, #ffffff);
    color: var(--luperiq-text, #111111);
}

/* Header/footer layouts inherit their parent background, not tone */
.luperiq-ts-layout--header .luperiq-ts-layout-row,
.luperiq-ts-layout--footer .luperiq-ts-layout-row {
    background-color: transparent;
    color: inherit;
}

.luperiq-ts-layout-row.is-tone-dark {
    background-color: var(--luperiq-primary, #0f1115);
    color: #f1f5f9;
    padding: 48px clamp(16px, 4vw, 48px);
}

.luperiq-ts-layout-row.is-tone-dark .luperiq-ts-block,
.luperiq-ts-layout-row.is-tone-dark .luperiq-ts-hero {
    background: transparent;
    color: inherit;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

/* Full-bleed hero inside page dark rows */
.luperiq-ts-layout--page .luperiq-ts-layout-row.is-tone-dark .luperiq-ts-hero {
    border: none;
    border-radius: 0;
    padding: 64px 24px;
}

.luperiq-ts-layout--page .luperiq-ts-layout-row.is-tone-dark .luperiq-ts-hero .luperiq-ts-hero-actions {
    justify-content: center;
}

.luperiq-ts-layout--page .luperiq-ts-layout-row.is-tone-dark .luperiq-ts-hero .luperiq-ts-hero-title {
    text-align: center;
}

.luperiq-ts-layout--page .luperiq-ts-layout-row.is-tone-dark .luperiq-ts-hero .luperiq-ts-hero-subtitle {
    text-align: center;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.luperiq-ts-layout--page .luperiq-ts-layout-row.is-tone-dark .luperiq-ts-hero .luperiq-ts-hero-kicker {
    text-align: center;
}

.luperiq-ts-layout-row.is-tone-dark .luperiq-ts-hero-meta-item {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

.luperiq-ts-layout-row.is-tone-dark a:not(.luperiq-ts-button):not(.luperiq-ts-cta-button) {
    color: #93c5fd;
}

.luperiq-ts-layout-row.is-tone-dark .luperiq-ts-button {
    background: var(--luperiq-accent, #2563eb);
    color: #ffffff;
}

.luperiq-ts-layout-row.is-tone-dark .luperiq-ts-button.is-secondary,
.luperiq-ts-layout-row.is-tone-dark .luperiq-ts-button.is-outline {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.24);
    color: #f1f5f9;
}

.luperiq-ts-layout-row.is-tone-dark .luperiq-ts-card {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: inherit;
}

.luperiq-ts-layout-row.is-tone-dark .luperiq-ts-cta-bar {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: inherit;
}

.luperiq-ts-layout-row.is-tone-dark .luperiq-ts-stat {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.10);
    color: inherit;
}

.luperiq-ts-layout-row.is-tone-dark .luperiq-ts-stat span {
    opacity: 0.5;
}

.luperiq-ts-layout-row.is-tone-dark .luperiq-ts-stat strong {
    color: #ffffff;
}

.luperiq-ts-layout-row.is-tone-dark .luperiq-ts-card:hover {
    background: rgba(255, 255, 255, 0.10);
}

.luperiq-ts-layout-row.is-tone-dark .luperiq-ts-card-link {
    color: #93c5fd;
}

.luperiq-ts-layout-row.is-tone-dark h2,
.luperiq-ts-layout-row.is-tone-dark h3 {
    color: #ffffff;
}

.luperiq-ts-layout-row.is-tone-accent {
    background-color: var(--luperiq-accent, #22c55e);
    color: #ffffff;
    padding: 48px clamp(16px, 4vw, 48px);
}

.luperiq-ts-layout-row.is-tone-accent .luperiq-ts-block,
.luperiq-ts-layout-row.is-tone-accent .luperiq-ts-hero {
    background: transparent;
    color: inherit;
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: none;
}

.luperiq-ts-layout-row.is-tone-accent a:not(.luperiq-ts-button):not(.luperiq-ts-cta-button) {
    color: #ffffff;
    text-decoration: underline;
}

.luperiq-ts-layout-row.is-tone-accent .luperiq-ts-button {
    background: #ffffff;
    color: var(--luperiq-accent, #2563eb);
    font-weight: 800;
}

.luperiq-ts-layout-row.is-tone-accent .luperiq-ts-button.is-secondary,
.luperiq-ts-layout-row.is-tone-accent .luperiq-ts-button.is-outline {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

.luperiq-ts-layout-row.is-tone-accent h2,
.luperiq-ts-layout-row.is-tone-accent h3 {
    color: #ffffff;
}

.luperiq-ts-layout-row.is-tone-muted {
    background-color: var(--luperiq-background, #f6f7f8);
    color: var(--luperiq-text, #111111);
    padding: 48px clamp(16px, 4vw, 48px);
}

/* Theme-level shell (optional sidebars) */

.luperiq-ts-shell {
    width: 100%;
    display: grid;
    gap: 18px;
    align-items: start;
    grid-template-columns: minmax(0, 1fr) var(--luperiq-ts-sidebar-width, 340px);
}

.luperiq-ts-shell.is-sidebar-left {
    grid-template-columns: var(--luperiq-ts-sidebar-width, 340px) minmax(0, 1fr);
}

.luperiq-ts-shell-main {
    min-width: 0;
}

.luperiq-ts-shell-sidebar {
    min-width: 0;
}

.luperiq-ts-shell-sidebar.is-sticky {
    position: sticky;
    top: 20px;
}

.luperiq-ts-sidebar-placeholder {
    border: 1px dashed rgba(15, 17, 21, 0.24);
    border-radius: calc(var(--luperiq-radius, 16px) * 0.75);
    background: rgba(15, 17, 21, 0.03);
    padding: 14px;
    font-size: 13px;
    line-height: 1.35;
    color: rgba(15, 17, 21, 0.78);
    font-weight: 650;
}

@media (max-width: 980px) {
    .luperiq-ts-shell {
        grid-template-columns: 1fr !important;
    }
}

/* ── Nav style: Pill ── */
.luperiq-ts-nav--pill .luperiq-ts-nav-menu li a {
    background: rgba(255,255,255,0.1);
    padding: 6px 16px;
    border-radius: 999px;
    transition: background 0.2s;
}
.luperiq-ts-nav--pill .luperiq-ts-nav-menu li a:hover {
    background: rgba(255,255,255,0.2);
}

/* ── Nav style: Underline ── */
.luperiq-ts-nav--underline .luperiq-ts-nav-menu li a {
    position: relative;
    padding-bottom: 4px;
}
.luperiq-ts-nav--underline .luperiq-ts-nav-menu li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--luperiq-accent, #3b82f6);
    transition: width 0.25s ease;
}
.luperiq-ts-nav--underline .luperiq-ts-nav-menu li a:hover::after {
    width: 100%;
}

@media (max-width: 860px) {
    .luperiq-ts-layout-row {
        grid-template-columns: 1fr !important;
    }
}

/* Inline blocks when used inside layout builder (avoid “full-width bar” styling).
   background/color omit !important so per-element inline style overrides take effect. */
body .luperiq-ts-layout .luperiq-ts-block {
    background: transparent;
    border: 0 !important;
    color: inherit;
}

/* Block alignment */
body .luperiq-ts-layout .luperiq-ts-block.is-align-center { text-align: center; }
body .luperiq-ts-layout .luperiq-ts-block.is-align-right { text-align: right; }
body .luperiq-ts-layout .luperiq-ts-block.is-align-left { text-align: left; }

/* Let text_color cascade into block children */
body .luperiq-ts-layout .luperiq-ts-block h1,
body .luperiq-ts-layout .luperiq-ts-block h2,
body .luperiq-ts-layout .luperiq-ts-block h3,
body .luperiq-ts-layout .luperiq-ts-block h4,
body .luperiq-ts-layout .luperiq-ts-block h5,
body .luperiq-ts-layout .luperiq-ts-block h6,
body .luperiq-ts-layout .luperiq-ts-block p,
body .luperiq-ts-layout .luperiq-ts-block span,
body .luperiq-ts-layout .luperiq-ts-block li {
    color: inherit;
}

body .luperiq-ts-layout .luperiq-ts-block-inner {
    max-width: none !important;
    margin: 0 !important;
    padding: 0;
    display: block !important;
    gap: 0 !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
}

.luperiq-ts-rotating-text {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    max-width: 100%;
}

.luperiq-ts-rotating-lines {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.luperiq-ts-rotating-line {
    line-height: 1.1;
    white-space: nowrap;
}

.luperiq-ts-rotating-slot {
    display: inline-block;
    min-width: var(--lqts-rotate-width, 0);
    color: var(--lqts-rotate-color, var(--luperiq-accent, #2563eb));
    transition: opacity 0.18s ease, transform 0.18s ease;
    will-change: opacity, transform;
}

.luperiq-ts-rotating-slot.is-changing {
    opacity: 0.18;
    transform: translateY(-0.16em);
}

.luperiq-ts-layout--header .luperiq-ts-rotating-text {
    font-size: clamp(13px, 1.1vw, 15px);
    letter-spacing: 0.04em;
    font-weight: 600;
}

.luperiq-ts-layout--header .luperiq-ts-rotating-line {
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Brand */
.luperiq-ts-brand {
    display: flex;
    gap: 10px;
    align-items: center;
    color: inherit;
    text-decoration: none;
    min-width: 0;
}

.luperiq-ts-brand-logo {
    display: inline-flex;
    align-items: center;
}

.luperiq-ts-brand-logo-img {
    width: auto;
    max-height: 46px;
    display: block;
}

.luperiq-ts-brand-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.luperiq-ts-brand-name {
    font-weight: 900;
    line-height: 1.1;
    /* Was white-space:nowrap + overflow:hidden + text-overflow:ellipsis, which
       clipped "The Anderson Family" down to "The A..." in the 3-column header
       (the centre column is minmax(0,1fr), so it shrinks to whatever the CTA
       column leaves). Wrapping degrades far better than a mid-word ellipsis and
       can never overflow its container more than clipping did — the surrounding
       min-width:0 rules still keep the row from spilling. */
    overflow-wrap: break-word;
}

.luperiq-ts-brand-subtitle {
    font-size: 12px;
    opacity: 0.85;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Nav */
.luperiq-ts-nav {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

.luperiq-ts-nav-link,
.luperiq-ts-nav-menu a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    font-weight: 500;
    opacity: 0.88;
}

.luperiq-ts-nav-link:hover,
.luperiq-ts-nav-menu a:hover {
    opacity: 1;
}

.luperiq-ts-nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

/* Mobile toggle (themes can override/replace) */
.luperiq-ts-nav-toggle {
    display: none;
    gap: 10px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: inherit;
    border-radius: calc(var(--luperiq-radius, 16px) * 0.75);
    padding: 10px 12px;
    font-weight: 850;
    cursor: pointer;
}

.luperiq-ts-nav-toggle-lines {
    width: 18px;
    height: 12px;
    position: relative;
    display: inline-block;
}

.luperiq-ts-nav-toggle-lines::before,
.luperiq-ts-nav-toggle-lines::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}

.luperiq-ts-nav-toggle-lines::before {
    top: 2px;
}

.luperiq-ts-nav-toggle-lines::after {
    bottom: 2px;
}

@media (max-width: 860px) {
    .luperiq-ts-nav-toggle {
        display: inline-flex;
    }

    .luperiq-ts-nav {
        display: none;
        width: 100%;
    }

    .luperiq-ts-nav.is-open {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 12px 0;
    }

    .luperiq-ts-nav.is-open ul {
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }

    /* Hide the nav row on mobile — content shows via hamburger dropdown instead */
    .luperiq-ts-layout--header .luperiq-ts-layout-row:has(.luperiq-ts-nav) {
        display: none;
    }

    .luperiq-ts-layout--header .luperiq-ts-layout-row:has(.luperiq-ts-nav.is-open) {
        display: grid;
    }

    /* ── Mobile header restructure ──
       Hide CTAs + UserMenu (hero has the CTA, top bar has Call + My Account).
       Move hamburger to bottom-left of header. */
    .luperiq-ts-layout--header .luperiq-ts-block--cta-group,
    .luperiq-ts-layout--header .luperiq-ts-block--user-menu {
        display: none;
    }

    /* Brand row: single-row flex with brand left, hamburger right */
    .luperiq-ts-layout--header .luperiq-ts-layout-row.is-cols-3 {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0 !important;
        padding: 10px 16px;
    }

    /* Brand column: auto width, left-aligned */
    .luperiq-ts-layout--header .luperiq-ts-layout-row.is-cols-3 > .luperiq-ts-layout-col:nth-child(2) {
        order: 1;
        flex: 1;
        display: flex;
        justify-content: flex-start;
    }

    /* Center brand on mobile: make it inline-flex so text-align works */
    .luperiq-ts-layout--header .luperiq-ts-layout-row.is-cols-3 .luperiq-ts-brand {
        display: inline-flex !important;
    }

    /* Hamburger column: right side, no extra spacing */
    .luperiq-ts-layout--header .luperiq-ts-layout-row.is-cols-3 > .luperiq-ts-layout-col:first-child {
        order: 3;
        width: auto;
        padding: 0;
        flex-shrink: 0;
    }

    /* CTA column: hidden (CTAs injected into mobile nav by JS) */
    .luperiq-ts-layout--header .luperiq-ts-layout-row.is-cols-3 > .luperiq-ts-layout-col:last-child {
        display: none;
    }

    /* Card-grid mega nav ships its own mobile hamburger + drawer.
       Hide the generic Theme Studio toggle at the CSS level too, so stale JS
       or cached pages cannot surface a second dead hamburger. */
    .luperiq-ts-layout--header .luperiq-ts-layout-row:has(nav[data-lq-nav-style="card_grid_mega"]) > .luperiq-ts-layout-col:first-child,
    .luperiq-ts-layout--header .luperiq-ts-layout-row:has(nav[data-lq-nav-style="card_grid_mega"]) .luperiq-ts-block--nav-toggle {
        display: none !important;
    }

    /* Give the card-grid mega nav its own second row so the working hamburger
       sits at the lower-left of the header instead of floating beside the logo. */
    .luperiq-ts-layout--header .luperiq-ts-layout-row.is-cols-3:has(nav[data-lq-nav-style="card_grid_mega"]) {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        justify-items: center;
        padding: 12px 16px 16px;
    }

    .luperiq-ts-layout--header .luperiq-ts-layout-row.is-cols-3:has(nav[data-lq-nav-style="card_grid_mega"]) > .luperiq-ts-layout-col:nth-child(2) {
        order: 1;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        min-width: 0;
    }

    .luperiq-ts-layout--header .luperiq-ts-layout-row.is-cols-3:has(nav[data-lq-nav-style="card_grid_mega"]) .luperiq-ts-block--site-brand {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .luperiq-ts-layout--header .luperiq-ts-layout-row.is-cols-3:has(nav[data-lq-nav-style="card_grid_mega"]) .luperiq-ts-block--mega-nav {
        width: 100%;
        display: flex;
        justify-content: flex-start;
    }

    .luperiq-ts-layout--header .luperiq-ts-layout-row.is-cols-3:has(nav[data-lq-nav-style="card_grid_mega"]) nav[data-lq-nav-style="card_grid_mega"] {
        width: 100%;
        text-align: left;
    }

    .luperiq-ts-layout--header .luperiq-ts-layout-row.is-cols-3:has(nav[data-lq-nav-style="card_grid_mega"]) .lq-nav-cgm-hamburger {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
        border-radius: 14px;
        background: color-mix(in srgb, var(--luperiq-header-text, #fff) 10%, transparent);
        border: 1px solid color-mix(in srgb, var(--luperiq-header-text, #fff) 22%, transparent);
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
    }

    .luperiq-ts-layout--header .luperiq-ts-layout-row.is-cols-3:has(nav[data-lq-nav-style="card_grid_mega"]) .lq-nav-cgm-mobile.is-open {
        width: 100%;
        box-sizing: border-box;
        margin-top: 8px;
        border-radius: 20px;
        background: color-mix(in srgb, var(--luperiq-header-bg, #0f172a) 92%, white);
        border: 1px solid color-mix(in srgb, var(--luperiq-header-text, #fff) 14%, transparent);
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
    }
}

/* ── Top bar flanking actions ── */
.liq-top-bar-action {
    font-size: 13px;
    opacity: 0.9;
    transition: opacity 0.15s;
}
.liq-top-bar-action:hover {
    opacity: 1;
    text-decoration: underline !important;
}

/* Mega navigation */
.luperiq-ts-mega-nav {
    display: flex;
    gap: 0;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    position: relative;
}

.luperiq-ts-mega-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: inherit;
    font-weight: 500;
    font-size: 14px;
    opacity: 0.88;
    padding: 4px 7px;
    border-radius: 6px;
    white-space: nowrap;
    transition: opacity 0.15s, background 0.15s;
}

.luperiq-ts-mega-nav-link:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.08);
}

.luperiq-ts-mega-nav-item {
    position: relative;
}

.luperiq-ts-mega-nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    opacity: 0.88;
    cursor: pointer;
    padding: 4px 7px;
    border-radius: 6px;
    white-space: nowrap;
    transition: opacity 0.15s, background 0.15s;
}

.luperiq-ts-mega-nav-toggle:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.08);
}

[data-lq-mega-open] > .luperiq-ts-mega-nav-toggle {
    opacity: 1;
    background: rgba(255, 255, 255, 0.12);
}

.luperiq-ts-mega-chevron {
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 10px;
    opacity: 0.6;
    transition: transform 0.2s ease;
}

[data-lq-mega-open] > .luperiq-ts-mega-nav-toggle .luperiq-ts-mega-chevron {
    opacity: 1;
}

[data-lq-mega-open] > .luperiq-ts-mega-nav-toggle .luperiq-ts-mega-chevron {
    transform: rotate(180deg);
}

/* Mega panel */
.luperiq-ts-mega-panel {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: var(--luperiq-surface, var(--luperiq-background, #ffffff));
    color: var(--luperiq-text, #111111);
    border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);
    padding: 20px 24px;
    z-index: 200;
    animation: lqMegaPanelIn 0.18s ease;
}

@keyframes lqMegaPanelIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

[data-lq-mega-open] > .luperiq-ts-mega-panel {
    display: block;
}
/* Inner cols wrapper is the actual grid container */
.luperiq-ts-mega-panel > .luperiq-ts-mega-cols {
    display: grid;
    grid-template-columns: repeat(var(--lq-mega-cols, 4), minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

.luperiq-ts-mega-panel.is-full-width {
    width: max-content;
    min-width: 320px;
    max-width: min(960px, calc(100vw - 32px));
    /* Dynamically positioned via --lq-mega-offset set by JS */
    left: var(--lq-mega-offset, 0px);
}
/* Constrain each column to a sensible width so panels don't get unwieldy */
.luperiq-ts-mega-panel > .luperiq-ts-mega-cols > .luperiq-ts-mega-col {
    min-width: 220px;
    max-width: 300px;
}

/* Hide intermediate level-3 group labels that exist only to push leaves to level-4
   (renderer-bug workaround). Pattern: ul has exactly one li, and that li contains
   a label span followed by sublinks. The label is purely structural — hide it.
   !important required because mobile @media block sets these to display:block !important. */
.luperiq-ts-mega-col ul.luperiq-ts-mega-links > li:only-child > span.luperiq-ts-mega-link:first-child:has(+ .luperiq-ts-mega-sublinks) {
    display: none !important;
}
.luperiq-ts-mega-col ul.luperiq-ts-mega-links > li:only-child {
    padding: 0;
    margin: 0;
}
/* Position panel relative to its trigger button. Let JS-set --lq-mega-offset
   handle the precise X position. We just make the parent positioned. */
.luperiq-ts-mega-nav-item {
    position: relative;
}

/* Desktop only: center the mega-nav items horizontally instead of right-aligned.
   Mobile keeps its existing column-stacked behavior set in @media below. */
@media (min-width: 861px) {
    .luperiq-ts-mega-nav {
        justify-content: center;
        gap: 8px;
    }
    /* Center the row that contains the mega-nav block */
    .luperiq-ts-layout-row:has(nav.luperiq-ts-mega-nav) {
        justify-content: center;
    }
    /* Center the brand row too */
    .luperiq-ts-layout-row:has(.luperiq-ts-block--site-brand) {
        justify-content: center;
    }
    /* But keep CTAs on the right within their column */
    .luperiq-ts-layout-row:has(.luperiq-ts-block--site-brand) .luperiq-ts-block--cta-group,
    .luperiq-ts-layout-row:has(.luperiq-ts-block--site-brand) .luperiq-ts-block--user-menu {
        justify-self: end;
    }
}

.luperiq-ts-mega-panel.is-auto-width {
    width: auto;
    min-width: 320px;
    max-width: calc(100vw - 32px);
}

.luperiq-ts-mega-panel.is-fixed-width {
    max-width: calc(100vw - 32px);
}

/* Mega column */
.luperiq-ts-mega-col {
    min-width: 0;
}

.luperiq-ts-mega-col-header {
    display: block;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.6;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
    text-decoration: none;
    color: inherit;
    text-align: center;
}

a.luperiq-ts-mega-col-header:hover {
    opacity: 0.85;
}

.luperiq-ts-mega-col-desc {
    display: block;
    font-size: 12px;
    opacity: 0.55;
    margin: -6px 0 8px;
    line-height: 1.35;
}

/* Mega links */
.luperiq-ts-mega-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.luperiq-ts-mega-link {
    display: block;
    padding: 6px 8px;
    text-decoration: none;
    color: var(--luperiq-text, #111111);
    font-weight: 500;
    font-size: 14px;
    border-radius: calc(var(--luperiq-radius, 16px) * 0.35);
    transition: background 0.15s ease;
    line-height: 1.3;
    text-align: center;
}

.luperiq-ts-mega-link:hover {
    background: color-mix(in srgb, currentColor 8%, transparent);
}

.luperiq-ts-mega-link-desc {
    display: block;
    font-size: 12px;
    opacity: 0.5;
    padding: 0 8px 4px;
    line-height: 1.35;
}

/* Level 4 sub-links (pill badges) */
.luperiq-ts-mega-sublinks {
    display: flex;
    gap: 4px;
    padding: 2px 8px 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.luperiq-ts-mega-sublink {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    color: var(--luperiq-accent, #2563eb);
    text-decoration: none;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.06);
    border: 1px solid rgba(37, 99, 235, 0.10);
    transition: background 0.15s ease, border-color 0.15s ease;
    line-height: 1.3;
}

.luperiq-ts-mega-sublink:hover {
    background: rgba(37, 99, 235, 0.12);
    border-color: rgba(37, 99, 235, 0.22);
    text-decoration: none;
}

.luperiq-ts-mega-sublink[data-type="about"]::before   { content: "\1F4C4"; font-size: 10px; }
.luperiq-ts-mega-sublink[data-type="guide"]::before   { content: "\1F527"; font-size: 10px; }
.luperiq-ts-mega-sublink[data-type="help"]::before    { content: "\1F4D6"; font-size: 10px; }
.luperiq-ts-mega-sublink[data-type="roadmap"]::before { content: "\1F5D3"; font-size: 10px; }
.luperiq-ts-mega-sublink[data-type="docs"]::before    { content: "\1F4DA"; font-size: 10px; }

/* Non-clickable module names */
span.luperiq-ts-mega-tab-card-title,
span.luperiq-ts-mega-link {
    cursor: default;
}

/* Nav item icons */
.luperiq-ts-nav-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
    vertical-align: middle;
    flex-shrink: 0;
}
.luperiq-ts-nav-icon img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    vertical-align: middle;
}

/* Mega nav — Tabbed mode */
[data-lq-mega-open] > .luperiq-ts-mega-panel.is-tabbed {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.luperiq-ts-mega-tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
    padding: 0;
    margin-bottom: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: wrap;
}

.luperiq-ts-mega-tab-bar::-webkit-scrollbar {
    display: none;
}

.luperiq-ts-mega-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: inherit;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.5;
    cursor: pointer;
    padding: 8px 12px 10px;
    white-space: nowrap;
    transition: opacity 0.15s ease, border-color 0.2s ease, color 0.15s ease;
}

.luperiq-ts-mega-tab:hover {
    opacity: 0.75;
}

.luperiq-ts-mega-tab.is-active {
    opacity: 1;
    border-bottom-color: var(--luperiq-accent, #2563eb);
    color: var(--luperiq-accent, #2563eb);
}

.luperiq-ts-mega-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    font-size: 11px;
    font-weight: 700;
    background: color-mix(in srgb, currentColor 10%, transparent);
    border-radius: 9px;
    padding: 0 5px;
    line-height: 1;
}

.luperiq-ts-mega-tab.is-active .luperiq-ts-mega-tab-count {
    background: var(--luperiq-accent, #2563eb);
    color: #fff;
}

.luperiq-ts-mega-tab-panels {
    position: relative;
    min-height: 120px;
}

.luperiq-ts-mega-tab-panel {
    display: none;
    animation: lqMegaTabFadeIn 0.2s ease;
}

.luperiq-ts-mega-tab-panel.is-active {
    display: block;
}

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

.luperiq-ts-mega-tab-panel-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--luperiq-accent, #2563eb);
    text-decoration: none;
    margin-bottom: 8px;
    padding: 5px 12px;
    border-radius: 6px;
    background: rgba(37, 99, 235, 0.05);
    border: 1px solid rgba(37, 99, 235, 0.10);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.luperiq-ts-mega-tab-panel-link:hover {
    background: rgba(37, 99, 235, 0.10);
    border-color: rgba(37, 99, 235, 0.20);
}

.luperiq-ts-mega-tab-panel-desc {
    font-size: 13px;
    opacity: 0.55;
    margin: 0 0 12px;
    line-height: 1.45;
    max-width: 600px;
}

.luperiq-ts-mega-tab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 2px 8px;
}

.luperiq-ts-mega-tab-card {
    padding: 8px 10px;
    border-radius: 8px;
    transition: background 0.15s ease;
    text-decoration: none;
    color: inherit;
}

a.luperiq-ts-mega-tab-card:hover,
.luperiq-ts-mega-tab-card:hover {
    background: color-mix(in srgb, currentColor 8%, transparent);
}

.luperiq-ts-mega-tab-card-title {
    display: block;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--luperiq-text, #111111);
    text-decoration: none;
    line-height: 1.3;
    text-align: center;
}

a.luperiq-ts-mega-tab-card:hover .luperiq-ts-mega-tab-card-title,
.luperiq-ts-mega-tab-card:hover .luperiq-ts-mega-tab-card-title {
    color: var(--luperiq-accent, #2563eb);
}

.luperiq-ts-mega-tab-card-desc {
    display: block;
    font-size: 12px;
    opacity: 0.45;
    margin-top: 2px;
    line-height: 1.35;
    text-align: center;
}

.luperiq-ts-mega-tab-card .luperiq-ts-mega-sublinks {
    padding: 2px 0 0;
}

/* Mega nav — Card images */
.luperiq-ts-mega-tab-card-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: calc(var(--luperiq-radius, 16px) * 0.25);
    margin-bottom: 6px;
}

.luperiq-ts-mega-tab-card.has-image {
    display: flex;
    flex-direction: column;
}

/* Mobile: collapse mega nav into hamburger dropdown */
@media (max-width: 860px) {
    /* Hide mega nav by default on mobile — hamburger controls visibility */
    .luperiq-ts-mega-nav {
        display: none;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start !important;  /* override desktop flex-end which pushed items off-screen */
    }

    /* Show when hamburger menu is open */
    html.lq-theme-nav-open .luperiq-ts-mega-nav {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start !important;
    }
    /* Force ALL nav children full-width — prevents wrap-to-second-column bug */
    html.lq-theme-nav-open .luperiq-ts-mega-nav > * {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    /* Mega-nav-item panels on mobile become inline accordions, not floating dropdowns */
    .luperiq-ts-mega-nav-item .luperiq-ts-mega-panel {
        position: static !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 8px 12px 12px !important;
    }
    /* Reset any --lq-mega-offset positioning on mobile */
    .luperiq-ts-mega-nav-item .luperiq-ts-mega-panel.is-full-width {
        left: auto !important;
        transform: none !important;
        width: 100% !important;
    }
    /* Sublinks stack vertically as readable list items, not pill grid */
    .luperiq-ts-mega-nav-item .luperiq-ts-mega-sublinks {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }
    .luperiq-ts-mega-nav-item .luperiq-ts-mega-sublinks > a.luperiq-ts-mega-sublink {
        display: block !important;
        padding: 10px 14px 10px 28px !important;
        border-radius: 0 !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 1px solid color-mix(in srgb, currentColor 6%, transparent) !important;
        text-align: left !important;
        font-size: 14px !important;
    }
    .luperiq-ts-mega-nav-item .luperiq-ts-mega-link,
    .luperiq-ts-mega-nav-item .luperiq-ts-mega-col-header {
        display: block !important;
        padding: 8px 14px !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        opacity: 1 !important;
        color: var(--luperiq-text, #1e293b) !important;
        border-bottom: none !important;
    }
    .luperiq-ts-mega-nav-item .luperiq-ts-mega-col-desc {
        display: none !important;
    }
    .luperiq-ts-mega-nav-item .luperiq-ts-mega-cols {
        display: block !important;
        gap: 0 !important;
    }

    /* Position as dropdown that overlays the page from top of viewport
       (was top: 100% which left a tall empty space above the menu on tall headers) */
    .luperiq-ts-mega-nav.is-open {
        position: fixed;
        top: 56px;
        left: 8px;
        right: 8px;
        width: auto;
        z-index: 1000;
        background: var(--luperiq-surface, var(--luperiq-background, #ffffff));
        color: var(--luperiq-text, #1e293b);
        border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
        padding: 0;
        border-radius: 12px;
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.12);
        max-height: calc(100vh - 72px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Force readable text color inside dropdown */
    .luperiq-ts-mega-nav .luperiq-ts-mega-nav-toggle,
    .luperiq-ts-mega-nav .luperiq-ts-mega-nav-link {
        color: var(--luperiq-text, #1e293b);
        font-size: 15px;
        font-weight: 600;
        opacity: 1;
    }

    .luperiq-ts-mega-nav .luperiq-ts-mega-chevron {
        opacity: 0.5;
    }

    /* Simple links (Themes, Pricing, etc.) stack full-width */
    .luperiq-ts-mega-nav > .luperiq-ts-mega-nav-link {
        display: block;
        padding: 12px 14px;
        border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
        text-decoration: none;
        font-weight: 600;
        color: var(--luperiq-text, #1e293b);
    }

    .luperiq-ts-mega-nav-item {
        position: static;
        width: 100%;
        border-bottom: 1px solid color-mix(in srgb, currentColor 8%, transparent);
    }

    .luperiq-ts-mega-nav-item .luperiq-ts-mega-nav-toggle {
        width: 100%;
        padding: 14px 14px;
        justify-content: space-between;
        font-size: 15px;
        border-radius: 8px;
    }

    .luperiq-ts-mega-nav-item .luperiq-ts-mega-nav-toggle:hover,
    .luperiq-ts-mega-nav-item .luperiq-ts-mega-nav-toggle:active {
        background: rgba(37, 99, 235, 0.06);
    }

    .luperiq-ts-mega-panel {
        position: static;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: none;
        box-shadow: none;
        border: none;
        border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent);
        border-radius: 0;
        padding: 8px 0 12px;
        background: color-mix(in srgb, var(--luperiq-surface, #f1f5f9) 85%, transparent);
    }

    [data-lq-mega-open] > .luperiq-ts-mega-panel {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .luperiq-ts-mega-panel.is-full-width {
        left: auto !important;
        transform: none !important;
        width: 100% !important;
    }

    /* Tabbed mode on mobile: vertical accordion tabs */
    .luperiq-ts-mega-tab-bar {
        flex-direction: column;
        gap: 0;
        border-bottom: none;
        margin-bottom: 0;
        overflow-x: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .luperiq-ts-mega-tab {
        font-size: 13px;
        padding: 12px 14px;
        border-bottom: 1px solid color-mix(in srgb, currentColor 8%, transparent);
        border-left: 3px solid transparent;
        margin-bottom: 0;
        justify-content: space-between;
        width: 100%;
        text-align: left;
    }

    .luperiq-ts-mega-tab.is-active {
        border-left-color: var(--luperiq-accent, #2563eb);
        border-bottom-color: color-mix(in srgb, currentColor 8%, transparent);
        background: color-mix(in srgb, var(--luperiq-accent, #2563eb) 6%, transparent);
    }

    /* Tab panels on mobile: hidden by default until JS-activated */
    .luperiq-ts-mega-tab-panel {
        padding: 8px 0 16px 16px;
    }

    .luperiq-ts-mega-tab-panel.is-active {
        animation: none;
    }

    /* Mobile card grid: 2 columns for lists with 4+ items, configurable via data attr */
    .luperiq-ts-mega-tab-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 4px 12px;
    }

    /* Wider cards on mobile */
    .luperiq-ts-mega-tab-card {
        padding: 10px 8px;
    }

    .luperiq-ts-mega-tab-card-title {
        font-size: 13px;
    }

    .luperiq-ts-mega-tab-card .luperiq-ts-mega-sublinks {
        display: flex;
        flex-wrap: wrap;
        gap: 3px;
        padding: 2px 6px 4px;
    }

    .luperiq-ts-mega-tab-card .luperiq-ts-mega-sublink {
        font-size: 10px;
        padding: 2px 7px;
    }

    /* Expanded mode columns on mobile */
    .luperiq-ts-mega-col {
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(15, 17, 21, 0.06);
        margin-bottom: 8px;
    }
}

/* User menu */
.luperiq-ts-user-menu {
    position: relative;
}

.luperiq-ts-user-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    font-weight: 500;
    opacity: 0.88;
    cursor: pointer;
    padding: 4px 0;
}

.luperiq-ts-user-menu-toggle:hover {
    opacity: 1;
}

.luperiq-ts-user-menu-chevron {
    transition: transform 0.2s ease;
}

.luperiq-ts-user-menu[data-open] .luperiq-ts-user-menu-chevron {
    transform: rotate(180deg);
}

.luperiq-ts-user-menu-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 160px;
    background: var(--luperiq-surface, #fff);
    color: var(--luperiq-ink, #0f172a);
    border-radius: var(--luperiq-radius-sm, 10px);
    box-shadow: var(--luperiq-shadow-soft, 0 10px 24px rgba(15,23,42,0.1));
    padding: 6px 0;
    z-index: 100;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.luperiq-ts-user-menu[data-open] .luperiq-ts-user-menu-dropdown {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.luperiq-ts-user-menu-item {
    display: block;
    padding: 8px 16px;
    color: var(--luperiq-ink, #0f172a);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.luperiq-ts-user-menu-item:hover {
    background: var(--luperiq-bg, #f6f7fb);
}

.luperiq-ts-user-menu-item--logout {
    border-top: 1px solid var(--luperiq-border, rgba(148,163,184,0.28));
    margin-top: 4px;
    padding-top: 10px;
    opacity: 0.7;
}

.luperiq-ts-user-menu-item--logout:hover {
    opacity: 1;
}

/* Guest (logged out) state */
.luperiq-ts-user-menu-guest {
    display: flex;
    align-items: center;
    gap: 14px;
}

.luperiq-ts-user-menu-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    font-weight: 500;
    opacity: 0.88;
}

.luperiq-ts-user-menu-link:hover {
    opacity: 1;
}

@media (max-width: 860px) {
    .luperiq-ts-user-menu-name {
        display: none;
    }

    .luperiq-ts-user-menu-toggle::before {
        content: "";
        display: block;
        width: 20px;
        height: 20px;
        background: currentColor;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center/contain no-repeat;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center/contain no-repeat;
    }

    .luperiq-ts-user-menu-chevron {
        display: none;
    }
}

/* Buttons */
.luperiq-ts-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: calc(var(--luperiq-radius, 8px) * 0.75);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    border: 2px solid transparent;
    background: var(--luperiq-accent, #2563eb);
    color: #fff;
    line-height: 1.2;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.1s ease;
}

.luperiq-ts-button:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.luperiq-ts-button:active {
    transform: translateY(0);
}

.luperiq-ts-button.is-primary {
    background: var(--luperiq-accent, #2563eb);
    border-color: transparent;
    color: #fff;
}

.luperiq-ts-button.is-secondary {
    background: rgba(15, 17, 21, 0.08);
    border-color: rgba(15, 17, 21, 0.18);
    color: var(--luperiq-text, #111111);
}

.luperiq-ts-button.is-secondary:hover {
    background: rgba(15, 17, 21, 0.12);
}

.luperiq-ts-button.is-outline {
    background: transparent;
    border-color: rgba(15, 17, 21, 0.24);
    color: var(--luperiq-text, #111111);
}

.luperiq-ts-button.is-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--luperiq-link, #2563eb);
    padding: 12px 16px;
}

/* CTA bar */
.luperiq-ts-cta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 36px 40px;
    border-radius: calc(var(--luperiq-radius, 16px) * 0.9);
    background: var(--luperiq-surface, #ffffff);
    border: 1px solid rgba(15, 17, 21, 0.08);
    flex-wrap: wrap;
}

.luperiq-ts-cta-copy {
    flex: 1 1 320px;
    min-width: 0;
}

.luperiq-ts-cta-title {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 8px;
    letter-spacing: -0.3px;
}

.luperiq-ts-cta-text {
    font-size: 16px;
    opacity: 0.7;
    line-height: 1.55;
}

.luperiq-ts-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    border-radius: calc(var(--luperiq-radius, 8px) * 0.75);
    text-decoration: none;
    font-weight: 800;
    font-size: 16px;
    background: var(--luperiq-accent, #2563eb);
    color: #fff;
    white-space: nowrap;
    transition: filter 0.15s ease, transform 0.1s ease;
}

.luperiq-ts-cta-button:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.luperiq-ts-layout-row.is-tone-accent .luperiq-ts-cta-bar {
    background: transparent;
    border-color: transparent;
}

.luperiq-ts-layout-row.is-tone-accent .luperiq-ts-cta-title,
.luperiq-ts-layout-row.is-tone-accent .luperiq-ts-cta-text {
    color: #ffffff;
    opacity: 1;
}

.luperiq-ts-layout-row.is-tone-accent .luperiq-ts-cta-text {
    opacity: 0.85;
}

.luperiq-ts-layout-row.is-tone-accent .luperiq-ts-cta-button {
    background: #ffffff;
    color: var(--luperiq-accent, #2563eb);
}

@media (max-width: 640px) {
    .luperiq-ts-cta-bar {
        flex-direction: column;
        text-align: center;
        padding: 28px 20px;
    }
}

/* CTA group */
.luperiq-ts-cta-group {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Hero */
.luperiq-ts-hero {
    background: var(--luperiq-surface, #ffffff);
    border: 1px solid rgba(15, 17, 21, 0.08);
    border-radius: calc(var(--luperiq-radius, 16px) * 1.05);
    padding: 48px 40px;
    box-shadow: 0 12px 32px rgba(15, 17, 21, 0.08);
    display: grid;
    gap: 20px;
}

.luperiq-ts-hero-kicker {
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 13px;
    font-weight: 800;
    opacity: 0.6;
}

.luperiq-ts-hero-title {
    margin: 0;
    font-size: 48px;
    letter-spacing: -1px;
    line-height: 1.08;
    font-weight: 800;
}

.luperiq-ts-hero-subtitle {
    margin: 0;
    font-size: 19px;
    opacity: 0.75;
    line-height: 1.55;
    max-width: 640px;
}

.luperiq-ts-hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.luperiq-ts-hero-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-top: 8px;
}

.luperiq-ts-hero-meta-item {
    background: rgba(15, 17, 21, 0.04);
    border-radius: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(15, 17, 21, 0.06);
}

.luperiq-ts-hero-meta-item span {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.6;
    margin-bottom: 4px;
}

.luperiq-ts-hero-meta-item strong {
    display: block;
    font-size: 18px;
    font-weight: 700;
}

/* Stat grid */
.luperiq-ts-stat-title {
    margin: 0 0 16px;
    font-size: 26px;
    font-weight: 700;
}

.luperiq-ts-stat-grid-items {
    display: grid;
    gap: 14px;
}

.luperiq-ts-stat {
    background: rgba(15, 17, 21, 0.04);
    border-radius: 14px;
    padding: 20px 18px;
    border: 1px solid rgba(15, 17, 21, 0.06);
    transition: transform 0.2s ease;
}

.luperiq-ts-stat:hover {
    transform: translateY(-2px);
}

.luperiq-ts-stat span {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.6;
    margin-bottom: 6px;
}

.luperiq-ts-stat strong {
    display: block;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.3px;
}

/* Card grid */
.luperiq-ts-card-grid-title {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 700;
}

.luperiq-ts-card-grid-subtitle {
    margin: 0 0 20px;
    opacity: 0.7;
    font-size: 16px;
    line-height: 1.5;
}

.luperiq-ts-card-grid-items {
    display: grid;
    gap: 18px;
}

.luperiq-ts-card {
    background: var(--luperiq-surface, #ffffff);
    border: 1px solid rgba(15, 17, 21, 0.08);
    border-radius: calc(var(--luperiq-radius, 16px) * 0.9);
    padding: 28px 24px;
    box-shadow: 0 4px 20px rgba(15, 17, 21, 0.06);
    display: grid;
    gap: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.luperiq-ts-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(15, 17, 21, 0.12);
}

.luperiq-ts-card-kicker {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    opacity: 0.55;
    font-weight: 700;
}

.luperiq-ts-card-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

.luperiq-ts-card-text {
    margin: 0;
    opacity: 0.7;
    line-height: 1.6;
    font-size: 15px;
}

.luperiq-ts-card-link {
    color: var(--luperiq-link, #0b57d0);
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    transition: gap 0.15s ease;
}

.luperiq-ts-card-link:hover {
    text-decoration: none;
    gap: 8px;
}

.luperiq-ts-card-link::after {
    content: "\2192";
}

/* List */
.luperiq-ts-list-title {
    margin: 0 0 8px;
    font-size: 22px;
}

.luperiq-ts-list ul,
.luperiq-ts-list ol {
    margin: 0;
    padding-left: 18px;
    line-height: 1.6;
    opacity: 0.85;
}

/* FAQ */
.luperiq-ts-faq-title {
    margin: 0 0 10px;
    font-size: 22px;
}

.luperiq-ts-faq-list {
    display: grid;
    gap: 12px;
}

.luperiq-ts-faq-item {
    border: 1px solid rgba(15, 17, 21, 0.08);
    border-radius: 14px;
    padding: 14px 16px;
    background: var(--luperiq-surface, #ffffff);
    box-shadow: 0 10px 24px rgba(15, 17, 21, 0.08);
}

.luperiq-ts-faq-item summary {
    cursor: pointer;
    font-weight: 700;
    list-style: none;
}

.luperiq-ts-faq-item summary::-webkit-details-marker {
    display: none;
}

.luperiq-ts-faq-answer {
    margin-top: 8px;
    opacity: 0.8;
}

/* Pricing */
.luperiq-ts-pricing-title {
    margin: 0 0 6px;
    font-size: 24px;
}

.luperiq-ts-pricing-subtitle {
    margin: 0 0 14px;
    opacity: 0.75;
}

.luperiq-ts-pricing-placeholder {
    padding: 16px;
    border-radius: 12px;
    border: 1px dashed rgba(15, 17, 21, 0.18);
    opacity: 0.7;
}

/* AI tasks */
.luperiq-ts-ai-title {
    margin: 0 0 6px;
    font-size: 24px;
}

.luperiq-ts-ai-subtitle {
    margin: 0 0 12px;
    opacity: 0.75;
}

.luperiq-ts-ai-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.luperiq-ts-ai-cat {
    background: rgba(15, 17, 21, 0.04);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
}

.luperiq-ts-ai-grid {
    display: grid;
    gap: 12px;
}

.luperiq-ts-ai-task {
    background: var(--luperiq-surface, #ffffff);
    border: 1px solid rgba(15, 17, 21, 0.08);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 8px 22px rgba(15, 17, 21, 0.08);
}

.luperiq-ts-ai-task-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.luperiq-ts-ai-task-head span {
    color: var(--luperiq-accent, #22c55e);
    font-weight: 800;
    font-size: 12px;
}

.luperiq-ts-ai-task p {
    margin: 8px 0 6px;
    opacity: 0.75;
    line-height: 1.5;
}

.luperiq-ts-ai-task-scope {
    font-size: 12px;
    opacity: 0.8;
    font-weight: 700;
}

@media (max-width: 860px) {
    .luperiq-ts-stat-grid-items {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .luperiq-ts-hero-meta {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {
    .luperiq-ts-hero {
        padding: 32px 20px;
    }
    .luperiq-ts-layout--page .luperiq-ts-layout-row.is-tone-dark .luperiq-ts-hero {
        padding: 40px 16px;
    }
    .luperiq-ts-hero-title {
        font-size: 32px;
        letter-spacing: -0.5px;
    }
    .luperiq-ts-hero-subtitle {
        font-size: 16px;
    }
    .luperiq-ts-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .luperiq-ts-layout-row.is-tone-dark,
    .luperiq-ts-layout-row.is-tone-accent,
    .luperiq-ts-layout-row.is-tone-muted {
        padding: 32px 16px;
    }
    .luperiq-ts-stat-grid-items {
        grid-template-columns: 1fr 1fr !important;
    }
    .luperiq-ts-hero-meta {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Popup Overlay ─────────────────────────────────────────── */

.luperiq-ts-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    pointer-events: none;
}

.luperiq-ts-popup-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.luperiq-ts-popup-overlay.is-closing {
    opacity: 0;
    visibility: visible;
    pointer-events: none;
}

.luperiq-ts-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
}

.luperiq-ts-popup-content {
    position: relative;
    background: var(--luperiq-surface, #fff);
    border-radius: var(--luperiq-radius, 14px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, .3);
    overflow: auto;
    max-width: calc(100vw - 32px);
    padding: 24px;
}

.luperiq-ts-popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--luperiq-text, #333);
    opacity: .6;
    transition: opacity .15s;
    padding: 4px 8px;
}

.luperiq-ts-popup-close:hover {
    opacity: 1;
}

.luperiq-ts-popup-close-action {
    display: inline-block;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-size: inherit;
    line-height: 1.4;
    opacity: .7;
    transition: opacity .15s;
    padding: 4px 12px;
}

.luperiq-ts-popup-close-action:hover {
    opacity: 1;
}

/* Position variants */
.luperiq-ts-popup-overlay[data-lqts-popup-position="bottom_bar"] {
    align-items: flex-end;
    justify-content: stretch;
}
.luperiq-ts-popup-overlay[data-lqts-popup-position="bottom_bar"] .luperiq-ts-popup-content {
    border-radius: 0;
    width: 100%;
    max-width: 100%;
    max-height: none;
}

.luperiq-ts-popup-overlay[data-lqts-popup-position="top_bar"] {
    align-items: flex-start;
    justify-content: stretch;
}
.luperiq-ts-popup-overlay[data-lqts-popup-position="top_bar"] .luperiq-ts-popup-content {
    border-radius: 0;
    width: 100%;
    max-width: 100%;
    max-height: none;
}

.luperiq-ts-popup-overlay[data-lqts-popup-position="bottom_right"] {
    align-items: flex-end;
    justify-content: flex-end;
    padding: 24px;
}

.luperiq-ts-popup-overlay[data-lqts-popup-position="bottom_left"] {
    align-items: flex-end;
    justify-content: flex-start;
    padding: 24px;
}

/* Animation: slide_up */
.luperiq-ts-popup-overlay[data-lqts-popup-animation="slide_up"] .luperiq-ts-popup-content {
    transform: translateY(30px);
    transition: transform .3s ease, opacity .3s ease;
}
.luperiq-ts-popup-overlay[data-lqts-popup-animation="slide_up"].is-open .luperiq-ts-popup-content {
    transform: translateY(0);
}

/* Animation: scale */
.luperiq-ts-popup-overlay[data-lqts-popup-animation="scale"] .luperiq-ts-popup-content {
    transform: scale(.9);
    transition: transform .3s ease, opacity .3s ease;
}
.luperiq-ts-popup-overlay[data-lqts-popup-animation="scale"].is-open .luperiq-ts-popup-content {
    transform: scale(1);
}

/* --- Newsletter signup --- */

.luperiq-ts-newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.luperiq-ts-newsletter-heading {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700;
}

.luperiq-ts-newsletter-subheading {
    margin: 0 0 8px;
    opacity: 0.75;
    line-height: 1.5;
}

.luperiq-ts-field {
    display: flex;
    flex-direction: column;
}

.luperiq-ts-input {
    padding: 10px 14px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--luperiq-radius, 8px);
    font-size: 15px;
    font-family: inherit;
    background: var(--luperiq-surface, #fff);
    color: var(--luperiq-text, #111);
    transition: border-color 0.15s;
}

.luperiq-ts-input:focus {
    outline: none;
    border-color: var(--luperiq-accent, #22c55e);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15);
}

.luperiq-ts-newsletter-submit {
    width: 100%;
    cursor: pointer;
}

.luperiq-ts-newsletter-submit:disabled {
    opacity: 0.65;
    cursor: wait;
}

.luperiq-ts-newsletter-error {
    margin: 6px 0 0;
    color: #dc2626;
    font-size: 13px;
}

/* Newsletter list checkboxes (Step 2) */
.luperiq-ts-newsletter-list-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin: 8px 0;
    border: 1px solid rgba(15, 17, 21, 0.14);
    border-radius: calc(var(--luperiq-radius, 16px) * 0.5);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.luperiq-ts-newsletter-list-option:hover {
    border-color: var(--luperiq-accent, #22c55e);
    background: rgba(0, 0, 0, 0.02);
}

.luperiq-ts-newsletter-list-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--luperiq-accent, #22c55e);
    cursor: pointer;
}

.luperiq-ts-newsletter-step {
    animation: lqts-fade-in 0.3s ease;
}

@keyframes lqts-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.luperiq-ts-newsletter-success {
    text-align: center;
}

.luperiq-ts-newsletter-success-msg {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 600;
}

.luperiq-ts-newsletter-coupon-msg {
    margin: 0 0 8px;
    font-size: 14px;
    opacity: 0.8;
}

/* --- Coupon display --- */

.luperiq-ts-coupon-static {
    text-align: center;
}

.luperiq-ts-coupon-label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    opacity: 0.8;
}

.luperiq-ts-coupon-display {
    display: inline-flex;
    align-items: stretch;
    border: 2px dashed var(--luperiq-accent, #22c55e);
    border-radius: var(--luperiq-radius, 8px);
    overflow: hidden;
    background: var(--luperiq-surface, #fff);
}

.luperiq-ts-coupon-code {
    padding: 10px 16px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--luperiq-text, #111);
    user-select: all;
}

.luperiq-ts-coupon-copy {
    padding: 10px 16px;
    border: none;
    border-left: 2px dashed var(--luperiq-accent, #22c55e);
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: var(--luperiq-accent, #22c55e);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.luperiq-ts-coupon-copy:hover {
    background: var(--luperiq-accent, #22c55e);
    color: #fff;
}

.luperiq-ts-coupon-copy.is-copied {
    background: var(--luperiq-accent, #22c55e);
    color: #fff;
}

/* Minimize pill */
.luperiq-ts-popup-pill {
    position: fixed;
    z-index: 99998;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--luperiq-accent, #22c55e);
    color: #fff;
    border-radius: 50px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    box-shadow: 0 4px 20px rgba(0,0,0,.2);
    transition: transform .2s, box-shadow .2s;
    animation: lqts-pill-in .3s ease;
}
.luperiq-ts-popup-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0,0,0,.25);
}
.luperiq-ts-popup-pill[data-lqts-popup-pill-position="bottom_right"] { bottom: 24px; right: 24px; }
.luperiq-ts-popup-pill[data-lqts-popup-pill-position="bottom_left"] { bottom: 24px; left: 24px; }
.luperiq-ts-popup-pill[data-lqts-popup-pill-position="top_right"] { top: 24px; right: 24px; }
.luperiq-ts-popup-pill[data-lqts-popup-pill-position="top_left"] { top: 24px; left: 24px; }
.luperiq-ts-popup-pill-icon { font-size: 16px; }

@keyframes lqts-pill-in {
    from { opacity: 0; transform: scale(.8) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@media (max-width: 600px) {
    .luperiq-ts-popup-content {
        max-width: calc(100vw - 16px) !important;
        width: calc(100vw - 16px) !important;
        padding: 16px;
    }
    .luperiq-ts-popup-pill {
        padding: 8px 14px;
        font-size: 13px;
    }
    .luperiq-ts-popup-pill[data-lqts-popup-pill-position="bottom_right"],
    .luperiq-ts-popup-pill[data-lqts-popup-pill-position="bottom_left"] { bottom: 16px; }
    .luperiq-ts-popup-pill[data-lqts-popup-pill-position="bottom_right"] { right: 16px; }
    .luperiq-ts-popup-pill[data-lqts-popup-pill-position="bottom_left"] { left: 16px; }
    .luperiq-ts-popup-pill[data-lqts-popup-pill-position="top_right"],
    .luperiq-ts-popup-pill[data-lqts-popup-pill-position="top_left"] { top: 16px; }
    .luperiq-ts-popup-pill[data-lqts-popup-pill-position="top_right"] { right: 16px; }
    .luperiq-ts-popup-pill[data-lqts-popup-pill-position="top_left"] { left: 16px; }
}

/* ── Restaurant blocks ──────────────────────────────────────────────── */
.luperiq-ts-block--menu-grid .rm-ts-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.luperiq-ts-block--menu-grid .rm-ts-item { border:1px solid var(--luperiq-border,#e5e7eb); border-radius:var(--luperiq-radius,8px); padding:12px; }
.luperiq-ts-block--menu-grid .rm-ts-item-img { width:100%; height:160px; object-fit:cover; border-radius:var(--luperiq-radius,6px); margin-bottom:8px; }
.luperiq-ts-block--menu-grid .rm-ts-item-name { font-weight:600; font-size:1.05em; }
.luperiq-ts-block--menu-grid .rm-ts-item-desc { color:#6b7280; font-size:0.9em; margin:4px 0; }
.luperiq-ts-block--menu-grid .rm-ts-item-price { font-weight:700; color:var(--luperiq-primary,#0f1115); margin-top:4px; }
.luperiq-ts-block--menu-grid .rm-ts-item-dietary { margin-top:6px; display:flex; flex-wrap:wrap; gap:4px; }
.luperiq-ts-block--menu-grid .rm-ts-tag { display:inline-block; padding:2px 8px; border-radius:12px; font-size:0.75em; background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }
.luperiq-ts-block--menu-grid .rm-ts-section h3 { margin:16px 0 8px; padding-bottom:4px; border-bottom:2px solid var(--luperiq-primary,#0f1115); }
.luperiq-ts-block--menu-grid .rm-ts-empty { color:#9ca3af; text-align:center; padding:32px 0; }

.luperiq-ts-block--reservation-widget form { max-width:480px; margin:0 auto; }
.luperiq-ts-block--reservation-widget .rm-ts-reserve-row { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.luperiq-ts-block--reservation-widget .rm-ts-reserve-row label { flex:1; min-width:140px; display:flex; flex-direction:column; font-size:0.85em; font-weight:500; }
.luperiq-ts-block--reservation-widget input,
.luperiq-ts-block--reservation-widget select { width:100%; padding:8px 12px; margin:4px 0 0; border:1px solid var(--luperiq-border,#d1d5db); border-radius:var(--luperiq-radius,6px); font-size:0.95em; }
.luperiq-ts-block--reservation-widget .rm-ts-reserve-btn { width:100%; padding:10px 20px; background:var(--luperiq-primary,#0f1115); color:#fff; border:none; border-radius:var(--luperiq-radius,6px); font-weight:600; cursor:pointer; margin-top:8px; }
.luperiq-ts-block--reservation-widget .rm-ts-reserve-btn:hover { opacity:0.9; }
.luperiq-ts-block--reservation-widget .rm-ts-reserve-success { text-align:center; color:#166534; font-weight:600; padding:20px; }

.luperiq-ts-block--review-carousel { overflow-x:auto; white-space:nowrap; padding:16px 0; }
.luperiq-ts-block--review-carousel .rm-review-card { display:inline-block; width:280px; white-space:normal; vertical-align:top; margin-right:16px; border:1px solid var(--luperiq-border,#e5e7eb); border-radius:var(--luperiq-radius,8px); padding:16px; }
.luperiq-ts-block--review-carousel .rm-review-stars { margin-bottom:8px; }
.luperiq-ts-block--review-carousel .rm-star { font-size:1.1em; color:#d1d5db; }
.luperiq-ts-block--review-carousel .rm-star--filled { color:#f59e0b; }
.luperiq-ts-block--review-carousel .rm-review-text { font-size:0.9em; line-height:1.5; margin-bottom:8px; }
.luperiq-ts-block--review-carousel .rm-review-author { font-size:0.85em; color:#6b7280; }
.luperiq-ts-block--review-carousel .rm-review-photos { margin-top:8px; }
.luperiq-ts-block--review-carousel .rm-review-photo { width:48px; height:48px; object-fit:cover; border-radius:4px; margin-right:4px; }
.luperiq-ts-block--review-carousel .rm-ts-empty { color:#9ca3af; text-align:center; padding:20px 0; }

.luperiq-ts-block--hours-display table { width:100%; border-collapse:collapse; }
.luperiq-ts-block--hours-display td { padding:8px 12px; border-bottom:1px solid var(--luperiq-border,#e5e7eb); }
.luperiq-ts-block--hours-display .today { font-weight:700; background:var(--luperiq-primary-subtle,#f0fdf4); }
.luperiq-ts-block--hours-display .rm-ts-hours-title { margin-bottom:12px; }

.luperiq-ts-block--order-button .rm-order-cta { display:inline-block; padding:12px 32px; border-radius:var(--luperiq-radius,8px); font-weight:600; text-decoration:none; cursor:pointer; background:var(--luperiq-primary,#0f1115); color:#fff; transition:opacity 0.2s; }
.luperiq-ts-block--order-button .rm-order-cta:hover { opacity:0.9; }

/* ── User Menu (Log In / My Account) ───────────────────── */
.luperiq-ts-user-menu {
    display: flex;
    gap: 12px;
    align-items: center;
}
.luperiq-ts-user-login,
.luperiq-ts-user-account,
.luperiq-ts-user-admin {
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    padding: 6px 16px;
    border-radius: var(--ts-radius, 6px);
    transition: background 0.2s, color 0.2s;
}
.luperiq-ts-user-login {
    background: var(--ts-accent, #3b82f6);
    color: #fff;
}
.luperiq-ts-user-login:hover {
    opacity: 0.9;
}
.luperiq-ts-user-account {
    color: var(--ts-text, inherit);
}
.luperiq-ts-user-account:hover {
    text-decoration: underline;
}
.luperiq-ts-user-admin {
    font-size: 12px;
    color: var(--ts-text-muted, #94a3b8);
}

/* ── Customer Portal ───────────────────────────────────── */
.portal-page { padding: 48px 0; }
.portal-tabs {
    display: flex; gap: 0; border-bottom: 2px solid var(--ts-border, #e2e8f0);
    margin-bottom: 32px; flex-wrap: wrap; overflow-x: visible;
}
.portal-tabs a {
    padding: 10px 8px; text-decoration: none; font-weight: 500; font-size: 14px;
    color: var(--ts-text-muted, #64748b); border-bottom: 2px solid transparent;
    margin-bottom: -2px; white-space: nowrap; transition: all 0.2s;
    flex: 1 1 calc(33.33% - 2px); text-align: center; min-width: 0;
}
.portal-tabs a.active, .portal-tabs a[aria-selected="true"] {
    color: var(--ts-accent, #3b82f6); border-bottom-color: var(--ts-accent, #3b82f6);
}
.portal-tabs a:hover { color: var(--ts-text, inherit); }
.portal-stats { display: flex; gap: 16px; margin: 24px 0; flex-wrap: wrap; }
.portal-stat {
    background: var(--ts-surface, #f8fafc); padding: 16px 24px; border-radius: 8px;
    text-align: center; min-width: 120px;
}
.portal-stat .label { font-size: 12px; text-transform: uppercase; color: var(--ts-text-muted, #64748b); }
.portal-stat .value { font-size: 28px; font-weight: 700; display: block; margin-top: 4px; }
.portal-appointment-card {
    background: var(--ts-surface, #f8fafc); border: 1px solid var(--ts-border, #e2e8f0);
    border-radius: 8px; padding: 20px; margin-bottom: 16px;
}
.portal-appointment-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.portal-status-badge { font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 12px; text-transform: uppercase; }
.portal-status--new { background: #dbeafe; color: #1d4ed8; }
.portal-status--scheduled { background: #fef3c7; color: #92400e; }
.portal-status--completed { background: #d1fae5; color: #065f46; }
.portal-status--cancelled { background: #fee2e2; color: #991b1b; }
.portal-detail-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ts-border, #e2e8f0); }
.portal-widget { background: var(--ts-surface, #f8fafc); padding: 16px; border-radius: 8px; margin-bottom: 12px; }
.portal-widget h4 { font-size: 13px; color: var(--ts-text-muted, #64748b); margin-bottom: 4px; }
.portal-widget-stat { font-size: 32px; font-weight: 700; }
.portal-widget--advisory { background: #fffbeb; border: 1px solid #fbbf24; }
.portal-placeholder { text-align: center; padding: 48px; }
.portal-profile .form-group { margin-bottom: 16px; }
.portal-profile label { display: block; font-weight: 500; margin-bottom: 4px; font-size: 14px; }
.portal-profile input, .portal-profile select, .portal-profile textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--ts-border, #e2e8f0);
    border-radius: 6px; font-size: 14px;
}
.portal-profile-section { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--ts-border, #e2e8f0); }