/* =============================================================================
   NetU Platform — App Styles
   ============================================================================= */

/* -----------------------------------------------------------------------------
   CSS Custom Properties
   ----------------------------------------------------------------------------- */
:root {
    --netu-primary: #0d6efd;
    --netu-primary-dark: #0a58ca;
    --netu-sidebar-width: 260px;
    --netu-sidebar-bg: #212529;
    --netu-topbar-height: 64px;
    /* Brand */
    --netu-blue: #0068B8;
    --netu-blue-dark: #004E8C;
    --netu-red: #D02018;
    --netu-ink: #0C1B2A;
    --netu-slate: #475569;
    --netu-slate-light: #64748B;
    --netu-faint: #94A3B8;
    --netu-warning: #e4a023;
    --netu-line: #d5e2f1;
    --netu-surface: #F6F9FC;
    --netu-surface-bg: #fff;
    --netu-home-bg: #fff;
    --netu-surface-blue: #EEF5FC;
    --netu-surface-green: #ECFAF1;
    --netu-seb-1: #534AB7;
    --netu-seb-2: #8A3E8E;
    /* Derived tints — always computed from the locked brand tokens above */
    --netu-blue-tint: color-mix(in srgb, var(--netu-blue) 10%, #fff);
    --netu-blue-tint-strong: color-mix(in srgb, var(--netu-blue) 18%, #fff);
    --netu-seb-tint: color-mix(in srgb, var(--netu-seb-1) 6%, #fff);

    /* ⛔ THE HERO GRADIENT — LOCKED (Pushpak, 2026-07-13).
       Blue → Sebastian, washed into white. Every hero on the platform uses THIS and nothing else, so that a
       member arriving from /faqs at /pricing at /search is looking at one product rather than three teams.
       Defined once, here. If you are about to write a `linear-gradient` for a hero, you want this variable. */
    --netu-hero-bg: linear-gradient(120deg,
        color-mix(in srgb, var(--netu-blue) 14%, #fff) 0%,
        color-mix(in srgb, var(--netu-seb-1) 18%, #fff) 60%,
        color-mix(in srgb, var(--netu-seb-2) 22%, #fff) 100%);
    --netu-red-tint: color-mix(in srgb, var(--netu-red) 8%, #fff);
    --netu-amber-tint: color-mix(in srgb, var(--netu-warning) 14%, #fff);
    --netu-card-shadow: 0 4px 16px rgba(0, 104, 184, 0.07);
    --netu-card-shadow-hover: 0 8px 24px rgba(0, 104, 184, 0.12);
}

/* -----------------------------------------------------------------------------
   Thin scrollbars (Pushpak, 2026-08-27 — supersedes the invisible-scrollbar era):
   a slim rounded thumb on a transparent track, everywhere — the page, the
   sidebar, dropdowns. Visible on purpose: a hidden bar hides that there IS more.
   Standard props serve Firefox + Chromium 121+ (which then ignore the -webkit
   rules); the ::-webkit-scrollbar block is the fallback for Safari/older Chromium.
   ----------------------------------------------------------------------------- */
* {
    scrollbar-width: thin;
    /* Brand-blue thumb (Pushpak, 2026-08-27): follows --netu-blue via color-mix; the rgba() line before it
       is the same #0068B8 at the same opacity for browsers without color-mix. */
    scrollbar-color: rgba(0, 104, 184, .35) transparent;
    scrollbar-color: color-mix(in srgb, var(--netu-blue) 35%, transparent) transparent;
}
*::-webkit-scrollbar {
    width: 6px;
    height: 6px;                     /* horizontal bars (tables, code) stay slim too */
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background: rgba(0, 104, 184, .35);
    background: color-mix(in srgb, var(--netu-blue) 35%, transparent);
    border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 104, 184, .6);
    background: color-mix(in srgb, var(--netu-blue) 60%, transparent);
}
*::-webkit-scrollbar-corner {
    background: transparent;
}

/* -----------------------------------------------------------------------------
   Global
   ----------------------------------------------------------------------------- */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    min-height: 100vh;
}

/* Ensure public pages have footer at bottom */
body:not(.app-layout) {
    display: flex;
    flex-direction: column;
}
body:not(.app-layout) main {
    flex: 1;
}

/* -----------------------------------------------------------------------------
   App Layout (Sidebar + Main)
   ----------------------------------------------------------------------------- */
/* Shell: topbar -> content (sidebar | main | rail) -> footer */
.app-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Same tinted, patterned canvas as the home & onboarding pages —
       white cards must never sit on plain white */
    background: var(--netu-surface-bg);
    background-attachment: fixed;
}

.app-content {
    flex: 1;
    padding-top: 22px;
    padding-bottom: 44px;
    /* ⛔ Kill horizontal overflow (Pushpak, 2026-07-27): an off-screen absolutely-positioned popover (the per-card
       share panel is `opacity:0`, NOT display:none, so it still occupies layout at `left:0; width:340px`) widened
       the layout viewport on mobile, which pushed the fixed Sebastian FAB — anchored `right:14px` of that wider
       edge — half off the screen. `overflow-x: clip` contains such overflow WITHOUT creating a scroll container
       (so the sticky topbar/fixed FAB are untouched) and WITHOUT clipping vertically (overflow-y stays visible,
       per spec, since `clip` isn't `hidden/auto/scroll`) — so downward-opening popovers still escape. */
    overflow-x: clip;
}

/* Sidebar: an in-flow card column on desktop, sticky under the topbar */
.sidebar {
    background: #fff;
    border: 1px solid var(--netu-line);
    border-radius: 16px;
    box-shadow: var(--netu-card-shadow);
    overflow-y: auto;
    position: sticky;
    top: calc(var(--netu-topbar-height) + 16px);
    max-height: calc(100vh - var(--netu-topbar-height) - 32px);
}

/* Right rail sticks AND scrolls on its own — when its cards are taller than the
   viewport, the rail scrolls internally instead of forcing you to scroll the whole
   page to the bottom to reach the last card (Pushpak, 2026-09-24). */
.rail-sticky {
    position: sticky;
    top: calc(var(--netu-topbar-height) + 16px);
    max-height: calc(100vh - var(--netu-topbar-height) - 32px);
    overflow-y: auto;
    /* keep the internal scrollbar unobtrusive */
    scrollbar-width: thin;
}

/* Main content breathes: content itself is ~col-6 wide (75% of the col-8
   column), centered — desktop and larger only */
@media (min-width: 992px) {
    .app-page-inner {
        max-width: 85%;
        margin: 0 auto;
    }
}

/* The template uses Bootstrap's .h-100 here; height:100% would cap the content
   at the drawer height and clip the nav instead of letting .sidebar scroll. */
.sidebar .sidebar-content {
    padding: 0;
    height: auto !important;
    min-height: 100%;
}

/* Sidebar user info */
.sidebar-user-info {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 1rem 1rem 0.75rem;
}

.sidebar-user-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: var(--netu-surface-blue);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
}

.sidebar-avatar-initials {
    text-transform: uppercase;
}

.sidebar-user-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sidebar-user-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--netu-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-email {
    font-size: 0.72rem;
    color: var(--netu-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.sidebar-user-settings {
    font-size: 0.72rem;
    color: var(--netu-blue);
    text-decoration: none;
    font-weight: 500;
}

.sidebar-user-settings:hover {
    text-decoration: underline;
}

/* Sidebar navigation */
.sidebar-nav {
    padding: 0.25rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 1rem;
    color: var(--netu-ink);
    text-decoration: none;
    transition: background 0.15s ease;
}

.sidebar-link:hover {
    background: var(--netu-surface);
    color: var(--netu-ink);
}

/* The current page's link (activeNavHref — NavAdvice picks exactly one) */
.sidebar-link.active {
    background: var(--netu-surface);
    color: var(--netu-blue);
    font-weight: 600;
    letter-spacing: 1px;
}

.sidebar-link.active i {
    color: var(--netu-blue);
}

.sidebar-link i {
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
    color: var(--netu-slate-light);
}

/* .sidebar-link-highlight {
    color: var(--netu-blue);
    font-weight: 600;
} */

.sidebar-link-highlight i {
    color: var(--netu-blue);
}

.sidebar-badge {
    margin-left: auto;
    background: var(--netu-blue);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: 0.75rem;
    line-height: 1;
}

.sidebar-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    margin-left: auto;
}

/* Sidebar collapsible groups */
.sidebar-group {
    margin-top: 2px;
}

.sidebar-group-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.45rem 0.75rem;
    border: none;
    background: none;
    border-radius: 0.375rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--netu-ink);
    cursor: pointer;
    transition: background 0.15s ease;
}

.sidebar-group-toggle:hover {
    background: var(--netu-surface);
}

.sidebar-group-toggle i:first-child {
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
    color: var(--netu-slate-light);
}

.sidebar-chevron {
    margin-left: auto;
    font-size: 0.65rem;
    color: var(--netu-faint);
}

.sidebar-group-items {
    overflow: hidden;
}

.sidebar-sublink {
    display: block;
    padding: 0.35rem 0.75rem 0.35rem 2.5rem;
    font-size: 0.9rem;
    color: var(--netu-slate);
    text-decoration: none;
    border-radius: 0.375rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.sidebar-sublink:hover {
    background: var(--netu-surface);
    color: var(--netu-blue);
}

.sidebar-sublink.active {
    background: var(--netu-surface);
    color: var(--netu-blue);
    font-weight: 600;
}

.sidebar-footer {
    padding: 0.75rem 1rem;
    margin-top: auto;
    border-top: 1px solid var(--netu-line);
}

/* -----------------------------------------------------------------------------
   App Topbar — full-width bar with the brand-blue gradient (matches home page
   language), pill search, filled circular actions, real avatar.
   ----------------------------------------------------------------------------- */
/* Sticky wrapper — sticky must live on the header, not the nav inside it,
   or it can never stick beyond its own-height parent */
.app-header {
    position: sticky;
    top: 0;
    z-index: 1050;
}

.app-topbar {
    height: var(--netu-topbar-height);
    /* background: linear-gradient(180deg, var(--netu-blue-tint-strong), var(--netu-blue-tint)); */
    border-bottom: 1px solid color-mix(in srgb, var(--netu-blue) 22%, var(--netu-blue-dark));
    padding-top: 0;
    padding-bottom: 0;
    background: #fff;
}

/* Topbar logo — the brand joins the 3D language (UI/UX pass, Pushpak 2026-09-17): crisp at rest (NO filter,
   NO scale — a resting drop-shadow ghosts under the letterforms and any scale() resamples the raster, both
   read as "blurry logo"), a pure lift with a wide low-set glow on hover (it's the way home), press on click.
   Shared by the app topbar and the logged-in public topbar. */
.topbar-brand { display: inline-flex; align-items: center; }
.topbar-brand img {
    transition: transform .18s ease, filter .18s ease;
}
.topbar-brand:hover img {
    transform: translateY(-2px);
    filter: drop-shadow(0 8px 10px color-mix(in srgb, var(--netu-blue) 30%, transparent));
}
.topbar-brand:active img {
    transform: translateY(0);
    filter: drop-shadow(0 3px 5px color-mix(in srgb, var(--netu-blue) 25%, transparent));
}

.txt-logout {
    color: var(--netu-red);
}

.txt-logout :hover{
    color: var(--netu-red);
}

.topbar-search-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    max-width: 720px;
}

/* Search pills — the 3D language (UI/UX pass #3, Pushpak 2026-09-17): a raised pill with a glossy top edge
   resting on the bar; focusing LIFTS it toward you with a blue ring + ambient glow. */
.topbar-pill {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    height: 42px;
    padding: 0 16px;
    background: linear-gradient(180deg, #fff 0%, var(--netu-surface) 100%);
    border: 2px solid color-mix(in srgb, var(--netu-blue) 18%, #fff);
    border-radius: 999px;
    box-shadow:
        inset 0 1px 0 #fff,
        0 2px 6px -2px rgba(12, 27, 42, .14);
    transition: box-shadow 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.topbar-pill:hover {
    border-color: color-mix(in srgb, var(--netu-blue) 35%, #fff);
}

.topbar-pill:focus-within {
    background: #fff;
    border-color: var(--netu-blue);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 #fff,
        0 0 0 3px rgba(0, 104, 184, 0.12),
        0 8px 16px -6px color-mix(in srgb, var(--netu-blue) 40%, transparent);
}

.topbar-pill-location {
    flex: 0 0 180px;
}

.topbar-search-icon {
    color: var(--netu-blue);
    font-size: 0.9rem;
}

.topbar-search-input {
    border: none;
    background: none;
    font-size: 0.85rem;
    width: 100%;
    outline: none;
    color: var(--netu-ink);
}

.topbar-search-input::placeholder {
    color: var(--netu-faint);
}

/* The Go button — flat Sebastian-gradient face (Pushpak, 2026-09-17: no 3D side/gloss here), but it keeps
   the motion: lift with a soft glow on hover, press on click. */
.topbar-search-go {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--netu-seb-1), var(--netu-seb-2));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.topbar-search-go:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
    box-shadow: 0 8px 16px -6px color-mix(in srgb, var(--netu-seb-2) 45%, transparent);
}

.topbar-search-go:active {
    filter: none;
    transform: translateY(1px);
    box-shadow: none;
}

/* ---- Topbar typeahead dropdown (Pushpak, 2026-07-27) ---- */
.topbar-search-outer {
    position: relative;
    flex: 1;
    max-width: 720px;
}
.topbar-search-outer .topbar-search-wrap {
    width: 100%;
    max-width: none;
}
.topbar-suggest {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    max-width: 520px;
    width: 100%;
    max-height: 70vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--netu-line);
    border-radius: 16px;
    /* Floats over the page like the 3D modal — layered depth, not a flat sheet. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .6),
        0 8px 20px -10px rgba(12, 27, 42, .28),
        0 24px 60px -16px rgba(12, 27, 42, .35);
    padding: 6px;
    z-index: 1050;
}
.topbar-suggest-group + .topbar-suggest-group {
    border-top: 1px solid var(--netu-line);
    margin-top: 4px;
    padding-top: 4px;
}
.topbar-suggest-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 4px;
}
.topbar-suggest-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--netu-slate);
}
.topbar-suggest-count {
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--netu-blue);
    background: color-mix(in srgb, var(--netu-blue) 12%, #fff);
    border-radius: 999px;
    padding: 1px 7px;
}
.topbar-suggest-viewall {
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--netu-blue);
    text-decoration: none;
    white-space: nowrap;
}
.topbar-suggest-viewall:hover { text-decoration: underline; }
.topbar-suggest-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--netu-ink);
    transition: background-color .12s ease;
}
.topbar-suggest-item.is-active,
.topbar-suggest-item:hover {
    background: color-mix(in srgb, var(--netu-blue) 8%, #fff);
}
.topbar-suggest-thumb {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--netu-blue) 10%, #fff);
    color: var(--netu-blue);
    font-size: 0.95rem;
}
.topbar-suggest-thumb img { width: 100%; height: 100%; object-fit: cover; }
.topbar-suggest-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.topbar-suggest-name {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topbar-suggest-sub {
    font-size: 0.74rem;
    color: var(--netu-slate);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topbar-suggest-empty {
    padding: 14px 12px;
    font-size: 0.8rem;
    color: var(--netu-slate);
}

/* ---- "Sponsor Keyword" CTA on the /search hero (Pushpak, 2026-07-27) ----
   Absolute top-right OF the hero on desktop; on mobile it flows as a full-width block BELOW the hero, so the
   wide button can never overflow a narrow viewport (which was pushing the whole page sideways). */
.search-hero-cta {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
}
@media (max-width: 767.98px) {
    .search-hero-cta {
        position: static;
        display: block;
        margin: 0 1rem 0.75rem;
        text-align: center;
    }
}

/* ---- Ticket QR scanner overlay (#1, Pushpak, 2026-07-27). The heavy part (jsQR + qr-scanner.js) loads only
   when the camera opens; this small CSS ships with app.css. ---- */
.qr-scan-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(8, 12, 20, 0.94);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.qr-scan-stage {
    position: relative;
    max-width: 480px;
    width: 100%;
}
.qr-scan-video {
    width: 100%;
    max-height: 70vh;
    border-radius: 14px;
    background: #000;
    object-fit: cover;
}
.qr-scan-frame {
    position: absolute;
    inset: 12%;
    border: 3px solid rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.25);
    pointer-events: none;
}
.qr-scan-status {
    color: #fff;
    font-weight: 600;
    text-align: center;
    margin-top: 1.1rem;
    min-height: 1.5rem;
    padding: 0 1rem;
}
.qr-scan-status.ok   { color: #34d399; }
.qr-scan-status.warn { color: #fbbf24; }
.qr-scan-hint {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    margin-top: 0.35rem;
}
.qr-scan-close {
    position: absolute;
    top: 1rem;
    right: 1.15rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}
.qr-scan-close:hover { background: rgba(255, 255, 255, 0.28); }
/* The on-screen ticket card a successful scan slides in UNDER the viewfinder (Pushpak, 2026-08-06):
   the manager sees WHO they just admitted without leaving the scanner. Smooth in/out, never abrupt. */
.qr-scan-card {
    max-width: 480px;
    width: 100%;
    margin-top: 0.9rem;
    padding: 0.9rem 1.1rem;
    border-radius: 14px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    text-align: left;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}
.qr-scan-card.show { opacity: 1; transform: translateY(0); }
.qr-scan-card .qr-scan-card-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #fff;
    background: #6b7280;
}
.qr-scan-card.ok .qr-scan-card-icon      { background: #10b981; }
.qr-scan-card.already .qr-scan-card-icon { background: #f59e0b; }
.qr-scan-card.bad .qr-scan-card-icon     { background: #ef4444; }
.qr-scan-card .qr-scan-card-name { font-weight: 700; color: #111827; line-height: 1.2; }
.qr-scan-card .qr-scan-card-sub  { font-size: 0.8rem; color: #6b7280; margin-top: 0.1rem; }
.qr-scan-card .qr-scan-card-state { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.qr-scan-card.ok .qr-scan-card-state      { color: #059669; }
.qr-scan-card.already .qr-scan-card-state { color: #b45309; }
.qr-scan-card.bad .qr-scan-card-state     { color: #dc2626; }

/* ---- Voice notes (Pushpak, 2026-08-06): the embedded player fills its line — in the editor and in
   rendered note timelines. ---- */
.ql-editor audio, .netu-note-timeline audio { display: block; width: 100%; margin: 0.4rem 0; }

/* ---- /me/events list rows on mobile (Pushpak, 2026-07-27) ----
   The row is logo · text · status badge · Published/Draft · (chevron). On a phone those trailing badges stole
   the width, squeezing the text column so hard the name truncated to "Net…" and the date/location wrapped one
   word per line. Below sm the `.evt-list-meta` (the badges) drops to its own row under the text, so the name +
   when·where keep full width. Desktop keeps the badges inline on the right. */
@media (max-width: 575.98px) {
    .evt-list-link { flex-wrap: wrap; }
    .evt-list-link .evt-list-meta {
        flex-basis: 100%;
        margin-top: 0.4rem;
        padding-left: 56px;        /* clear the 40px logo + 1rem gap so the badges align under the text */
    }
}

.topbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 38px;
    padding: 0 0.9rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.topbar-btn-premium {
    background: var(--netu-warning);
    color: #fff;
    box-shadow: 0 2px 8px rgba(228, 160, 35, 0.35);
}

.topbar-btn-premium:hover {
    background: color-mix(in srgb, var(--netu-warning) 85%, #000);
    color: #fff;
}

.topbar-btn-matches {
    background: linear-gradient(135deg, var(--netu-seb-tint), color-mix(in srgb, var(--netu-seb-2) 8%, #fff));
    color: var(--netu-seb-1);
    border: 1px solid color-mix(in srgb, var(--netu-seb-1) 22%, #fff);
}

.topbar-btn-matches:hover {
    background: var(--netu-seb-1);
    color: #fff;
}

/* Filled circular action buttons */
.topbar-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.topbar-circle:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(12, 27, 42, 0.18);
}

.topbar-circle-create {
    background: var(--netu-blue);
}

.topbar-circle-bell {
    background: var(--netu-blue-dark);
}

/* Admin topbar: dark, minimal — avatar/account switcher only */
.admin-topbar {
    background: var(--netu-sidebar-bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Logo sits in a white chip so the brand mark reads on the dark bar */
.admin-topbar-logo-chip {
    background: #fff;
    border-radius: 9px;
    padding: 4px 10px;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    transition: transform .18s ease, box-shadow .18s ease;
}
.admin-topbar .navbar-brand:hover .admin-topbar-logo-chip {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(0, 0, 0, .35);
}
.admin-topbar .navbar-brand:active .admin-topbar-logo-chip {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

.admin-topbar .topbar-avatar {
    border-color: rgba(255, 255, 255, 0.35);
}

/* Avatar button */
.topbar-avatar-btn {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

.topbar-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--netu-surface-blue);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(12, 27, 42, 0.15);
    transition: transform 0.15s ease;
}

.topbar-avatar-btn:hover .topbar-avatar {
    transform: scale(1.05);
}

.topbar-avatar-img {
    object-fit: cover;
}

/* -----------------------------------------------------------------------------
   Responsive — Sidebar collapse on mobile
   ----------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* Off-canvas drawer under the topbar */
    .sidebar {
        position: fixed;
        top: var(--netu-topbar-height);
        left: 0;
        bottom: 0;
        width: var(--netu-sidebar-width);
        max-height: none;
        border-radius: 0;
        border-right: 1px solid var(--netu-line);
        z-index: 1040;
        transition: transform 0.3s ease;
        transform: translateX(-100%);
        /* Scroll the drawer itself; don't chain to the page behind it */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .sidebar.show {
        transform: translateX(0);
    }

    /* Freeze the page while the drawer is open */
    body.sidebar-open {
        overflow: hidden;
    }

    /* Overlay when sidebar is open on mobile */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1035;
        display: none;
    }

    .sidebar-overlay.show {
        display: block;
    }
}

/* -----------------------------------------------------------------------------
   To-Do List Page
   ----------------------------------------------------------------------------- */
.todo-page {
    max-width: 960px;
}

.todo-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--netu-ink);
    margin-bottom: 0.25rem;
}

.todo-page-subtitle {
    font-size: 0.88rem;
    color: var(--netu-slate);
    margin-bottom: 1.5rem;
    max-width: 540px;
}

/* Summary cards */
.todo-summary-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

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

.todo-summary-card {
    background: #fff;
    border: 1px solid var(--netu-line);
    border-radius: 0.5rem;
    padding: 1.25rem;
}

.todo-summary-label {
    font-size: 0.78rem;
    color: var(--netu-slate);
    font-weight: 500;
    display: block;
    margin-bottom: 0.35rem;
}

.todo-summary-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--netu-ink);
    line-height: 1.1;
    display: block;
    margin-bottom: 0.5rem;
}

.todo-progress-bar {
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.todo-progress-fill {
    height: 100%;
    background: var(--netu-blue);
    border-radius: 3px;
    transition: width 0.6s ease;
}

.todo-summary-hint {
    font-size: 0.75rem;
    color: var(--netu-faint);
}

.todo-badge-public {
    background: var(--netu-surface-blue);
    color: var(--netu-blue);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
}

/* Sections */
.todo-section {
    margin-bottom: 2rem;
}

.todo-section-heading {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--netu-slate);
    margin-bottom: 0.15rem;
}

.todo-section-desc {
    font-size: 0.8rem;
    color: var(--netu-faint);
    margin-bottom: 0.75rem;
}

/* Task rows */
.todo-task-list {
    background: #fff;
    border: 1px solid var(--netu-line);
    border-radius: 0.5rem;
    overflow: hidden;
}

.todo-task-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--netu-line);
    text-decoration: none;
    color: var(--netu-ink);
    transition: background 0.15s ease;
}

.todo-task-row:last-child {
    border-bottom: none;
}

.todo-task-row:hover:not(.todo-task-no-link) {
    background: var(--netu-surface);
    color: var(--netu-ink);
}

.todo-task-no-link {
    cursor: default;
}

/* Checkmark */
.todo-check {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    border: 2px solid var(--netu-line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: transparent;
    transition: all 0.2s ease;
}

.todo-check.checked {
    background: var(--netu-blue);
    border-color: var(--netu-blue);
    color: #fff;
}

/* Task title */
.todo-task-title {
    font-size: 0.85rem;
    font-weight: 500;
}

.todo-task-done .todo-task-title {
    color: var(--netu-faint);
}

/* Badges */
.todo-badges {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

.todo-badge {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
    white-space: nowrap;
}

.todo-badge-pct {
    background: #dcfce7;
    color: #16a34a;
}

.todo-badge-pts {
    background: #dbeafe;
    color: #2563eb;
}

.todo-badge-rew {
    background: #fef3c7;
    color: #d97706;
}

/* Chips */
.todo-chip {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.2rem 0.55rem;
    border-radius: 0.25rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.todo-chip-done {
    background: #dcfce7;
    color: #16a34a;
}

.todo-chip-avail {
    background: var(--netu-surface);
    color: var(--netu-slate);
}

.todo-chip-recur {
    background: #fce7f3;
    color: #db2777;
}

.todo-chip-prog {
    background: #dbeafe;
    color: #2563eb;
}

/* Arrow */
.todo-arrow {
    color: var(--netu-faint);
    font-size: 0.7rem;
    flex-shrink: 0;
}

/* Info box */
.todo-info-box {
    background: var(--netu-surface);
    border: 1px solid var(--netu-line);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin-top: 1rem;
}

/* -----------------------------------------------------------------------------
   Cards
   ----------------------------------------------------------------------------- */
.card {
    border-radius: 0.5rem;
    transition: box-shadow 0.2s ease;
}

.card:hover {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
}

/* -----------------------------------------------------------------------------
   Toast
   ----------------------------------------------------------------------------- */
.toast-container {
    z-index: 1080 !important;
}

.toast {
    border-radius: 0.5rem;
    border-width: 0 0 0 4px;
}

/* Auto-dismiss animation */
.toast.hiding {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* -----------------------------------------------------------------------------
   Forms
   ----------------------------------------------------------------------------- */
.form-control:focus,
.form-select:focus {
    border-color: var(--netu-primary);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

/* -----------------------------------------------------------------------------
   File Upload Preview
   ----------------------------------------------------------------------------- */
.file-upload-preview {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 0.5rem;
    border: 2px dashed #dee2e6;
}

.file-upload-preview.avatar {
    border-radius: 50%;
}

/* -----------------------------------------------------------------------------
   Empty State
   ----------------------------------------------------------------------------- */
.empty-state {
    padding: 3rem 1rem;
}

/* -----------------------------------------------------------------------------
   Pagination
   ----------------------------------------------------------------------------- */
.pagination .page-link {
    color: var(--netu-primary);
}

.pagination .page-item.active .page-link {
    background-color: var(--netu-primary);
    border-color: var(--netu-primary);
    color: #fff !important;
}

/* -----------------------------------------------------------------------------
   HTMX Loading Indicator
   ----------------------------------------------------------------------------- */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline-block;
}

.htmx-request.htmx-indicator {
    display: inline-block;
}

/* -----------------------------------------------------------------------------
   Public Navigation
   ----------------------------------------------------------------------------- */
.netu-public-nav {
    border-bottom: 1px solid var(--netu-line);
    padding: 0;
}

.netu-public-nav .container-xl {
    /* ⛔ min-height, NOT height (Pushpak, 2026-07-27): the mobile menu wraps to a 2nd line, and a FIXED height
       trapped the navbar at 72px so the expanded drawer overflowed the box and floated OVER the hero with no
       background (bg-white only painted the 72px row). min-height lets the navbar grow to contain — and paint —
       the open menu. */
    min-height: 72px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* Mobile: the expanded menu is a full-width panel under the brand row, separated by a divider so it reads as a
   drawer rather than text laid over the hero. Above lg the collapse is inline and these never apply. */
@media (max-width: 991.98px) {
    .netu-public-nav .navbar-collapse {
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        margin-top: 0.5rem;
        padding: 0.5rem 0 0.75rem;
        border-top: 1px solid var(--netu-line);
    }
    .netu-public-nav .navbar-collapse .navbar-nav { width: 100%; }
    .netu-public-nav .navbar-collapse .netu-nav-login { padding-left: 0.75rem; }
    /* Auth actions on their own row, left-aligned like the links (not floated to the far right). */
    .netu-public-nav .navbar-collapse > .d-flex { margin-left: 0 !important; padding: 0.25rem 0.75rem 0; }
}

.netu-logo {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-decoration: none;
}

.netu-logo-b { color: var(--netu-blue); }
.netu-logo-r { color: var(--netu-red); }

.netu-public-nav .nav-link {
    font-size: 16px;
    font-weight: 600;
    color: var(--netu-slate);
    padding: 0.5rem 0.75rem;
}

.netu-public-nav .nav-link:hover {
    color: var(--netu-blue);
}

.netu-nav-login {
    font-size: 16px;
    font-weight: 600;
    color: var(--netu-blue) !important;
}

.netu-btn-signup {
    background: var(--netu-blue);
    color: #fff;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 9px;
    font-size: 15px;
    display: inline-block;
}

.netu-btn-signup:hover {
    background: var(--netu-blue-dark);
    color: #fff;
}

/* -----------------------------------------------------------------------------
   Guest (logged-out) topbar — mockup style (Pushpak, 2026-09-08).
   Rendered ONLY for anonymous visitors (fragments/topbar :: public-topbar guest branch).
   Logged-in members keep .netu-public-nav / .app-topbar untouched.
   ----------------------------------------------------------------------------- */
.netu-guest-nav {
    position: sticky;
    top: 0;
    z-index: 1020;
    border-bottom: 1px solid #DCE4EC;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.netu-guest-nav .ngn-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 32px;
    height: 80px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
}
.netu-guest-nav .ngn-logo { justify-self: start; display: inline-flex; align-items: center; }
.netu-guest-nav .ngn-logo img { height: 46px; width: auto; display: block; }
.netu-guest-nav .ngn-links {
    justify-self: center;
    display: flex;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.netu-guest-nav .ngn-links a {
    color: #17202A;
    font-weight: 600;
    font-size: 17px;
    text-decoration: none;
    transition: color 0.2s ease;
}
.netu-guest-nav .ngn-links a:hover { color: #0068B8; }
.netu-guest-nav .ngn-auth { justify-self: end; display: flex; align-items: center; gap: 20px; }
.netu-guest-nav .ngn-login {
    color: #17202A;
    font-weight: 700;
    font-size: 17px;
    text-decoration: none;
    transition: color 0.2s ease;
}
.netu-guest-nav .ngn-login:hover { color: #0068B8; }
.netu-guest-nav .ngn-cta {
    background: #D02018;
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    padding: 12px 22px;
    border-radius: 12px;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}
.netu-guest-nav .ngn-cta:hover { background: #B31B14; transform: translateY(-1px); }
.netu-guest-nav a:focus-visible { outline: 3px solid #0068B8; outline-offset: 3px; }
@media (max-width: 900px) {
    .netu-guest-nav .ngn-wrap {
        display: flex;
        justify-content: space-between;
        padding: 0 18px;
        height: 64px;
        gap: 12px;
    }
    .netu-guest-nav .ngn-links { display: none; }
    .netu-guest-nav .ngn-logo img { height: 38px; }
    .netu-guest-nav .ngn-auth { gap: 12px; }
    .netu-guest-nav .ngn-login { font-size: 15px; }
    .netu-guest-nav .ngn-cta { padding: 10px 16px; font-size: 15px; }
}

/* -----------------------------------------------------------------------------
   Public Footer
   ----------------------------------------------------------------------------- */
.netu-footer {
    border-top: 1px solid var(--netu-line);
    padding: 28px 0;
}

.netu-footer-row {
    /* max-width: 1080px; */
    margin: 0 auto;
    padding: 0 56px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.netu-footer-links {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.netu-footer-links a {
    font-size: 15px;
    color: var(--netu-slate-light);
    text-decoration: none;
    font-weight: 500;
}

.netu-footer-links a:hover {
    color: var(--netu-blue);
}

.netu-footer-cr {
    font-size: 14px;
    color: var(--netu-slate-light);
}

/* -----------------------------------------------------------------------------
   Homepage — Layout Helpers
   ----------------------------------------------------------------------------- */
.hp-wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 56px;
}

.hp-narrow {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 56px;
}

/* -----------------------------------------------------------------------------
   Homepage (/) — styles live with the page.
   The old .netu-home landing CSS was removed on 2026-09-08 when the home page was
   rebuilt from pages/netu-homepage-mockup.html. The new page is fully self-contained
   and scoped under .nhp in an inline <style> in templates/pages/public/landing.html.
   The guest topbar for that redesign is .netu-guest-nav (above).
   ----------------------------------------------------------------------------- */

/* =============================================================================
   Pricing Page
   ============================================================================= */

/* Pricing wrap — slightly wider than homepage for comparison table */
.netu-pricing .pw { max-width: 1200px; margin: 0 auto; padding: 0 28px; }

/* Pricing eyebrow */
.netu-pricing .pr-eyebrow {
    display: inline-block; font-weight: 700; font-size: 13px;
    letter-spacing: 2px; text-transform: uppercase; color: var(--netu-blue);
}
.netu-pricing .pr-ey-red { color: var(--netu-red); }
.netu-pricing .pr-ey-light { color: #bcdcf5; }

/* Pricing hero — the locked gradient (Pushpak, 2026-07-13). It is a full-bleed <section>; .pw centres the
   text inside it, so the band spans the viewport exactly as it does on /faqs. */
.netu-pricing .pricing-hero {
    text-align: center;
    padding: 64px 0 42px;
    background: var(--netu-hero-bg);
    border-bottom: 1px solid var(--netu-line);
}
.netu-pricing .pricing-hero h1 {
    font-size: 48px; line-height: 1.12; font-weight: 800;
    letter-spacing: 1.2px; max-width: 840px; margin: 14px auto 18px;
}
.netu-pricing .pr-sub {
    font-size: 19px; color: var(--netu-slate); max-width: 720px;
    margin: 0 auto; line-height: 1.6;
}
.netu-pricing .pr-sub strong { color: var(--netu-ink); }

/* Billing toggle */
.netu-pricing .billing-row {
    display: flex; align-items: center; justify-content: center;
    gap: 14px; margin: 30px 0 6px;
}
.netu-pricing .seg {
    display: inline-flex; background: var(--netu-surface-bg);
    border: 1px solid var(--netu-line); border-radius: 999px; padding: 5px;
}
.netu-pricing .seg button {
    border: none; background: transparent; font-family: inherit;
    font-weight: 600; font-size: 16px; color: var(--netu-slate);
    padding: 11px 26px; border-radius: 999px; cursor: pointer;
    transition: all .15s;
}
.netu-pricing .seg button.on { background: var(--netu-blue); color: #fff; }
.netu-pricing .save-pill {
    background: #e6f6ee; color: #137a47; font-size: 13px;
    font-weight: 700; padding: 5px 12px; border-radius: 999px;
}

/* Audience panels */
.netu-pricing .panels {
    display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 14px 0 10px;
}
.netu-pricing .panel {
    border: 1.5px solid var(--netu-line); border-radius: 16px; padding: 28px 28px 26px;
}
.netu-pricing .panel.biz { background: #eaf3fb; border-color: #cfe4f6; }
.netu-pricing .panel.org { background: #fdecea; border-color: #f6d3cf; }
.netu-pricing .panel .pr-eyebrow { font-size: 12px; }
.netu-pricing .panel h3 {
    font-size: 24px; font-weight: 800; letter-spacing: .4px; margin: 8px 0 10px;
}
.netu-pricing .panel p { font-size: 16px; color: var(--netu-slate); margin-bottom: 16px; }

/* Panel chips */
.netu-pricing .pr-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.netu-pricing .pr-chip {
    background: #fff; border: 1px solid var(--netu-line); border-radius: 999px;
    padding: 7px 15px; font-size: 14px; font-weight: 600; color: var(--netu-ink);
}
.netu-pricing .org-chip { border-color: #f1cfca; }

/* Sebastian section */
.netu-pricing .seb-section { padding: 62px 0 20px; text-align: center; }
.netu-pricing .seb-section h2 {
    font-size: 34px; font-weight: 800; letter-spacing: .8px; margin: 10px 0 8px;
}
.netu-pricing .seb-lede {
    color: var(--netu-slate); font-size: 18px; max-width: 640px; margin: 0 auto 34px;
}
.netu-pricing .pr-jobs {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: left;
}
.netu-pricing .pr-job {
    border: 1px solid var(--netu-line); border-radius: 14px; padding: 24px;
}
.netu-pricing .pr-jic {
    width: 44px; height: 44px; border-radius: 11px;
    background: #ECEAFA; color: var(--netu-seb-1);
    display: grid; place-items: center; font-size: 20px; margin-bottom: 14px;
}
.netu-pricing .pr-job h4 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.netu-pricing .pr-job p { font-size: 15px; color: var(--netu-slate); line-height: 1.5; margin: 0; }

.netu-pricing .action-note {
    font-size: 15px; color: var(--netu-slate); max-width: 760px;
    margin: 28px auto 0; line-height: 1.6;
}
.netu-pricing .action-note strong { color: var(--netu-ink); }

.netu-pricing .value-anchor {
    max-width: 680px; margin: 22px auto 0;
    background: #ECEAFA; color: var(--netu-seb-1); border-radius: 12px;
    padding: 16px 22px; font-size: 16px; font-weight: 600; line-height: 1.5;
}

/* Plan tier cards */
.netu-pricing .tiers-head { text-align: center; padding: 64px 0 8px; }
.netu-pricing .tiers-head h2 {
    font-size: 34px; font-weight: 800; letter-spacing: .8px; margin-bottom: 8px;
}
.netu-pricing .tiers-head p {
    color: var(--netu-slate); font-size: 17px; max-width: 600px; margin: 0 auto;
}

.netu-pricing .tiers {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 20px; padding: 30px 0 20px; align-items: stretch;
}
.netu-pricing .tier-card {
    border: 1.5px solid var(--netu-line); border-radius: 16px;
    padding: 28px 24px; display: flex; flex-direction: column;
    background: #fff; position: relative;
}
.netu-pricing .tier-card.featured {
    border-color: var(--netu-blue);
    box-shadow: 0 16px 40px -18px rgba(0,104,184,.45);
}
.netu-pricing .ribbon {
    position: absolute; top: -13px; left: 26px;
    background: var(--netu-blue); color: #fff;
    font-size: 12px; font-weight: 700; letter-spacing: .6px;
    padding: 6px 14px; border-radius: 999px; text-transform: uppercase;
}
.netu-pricing .tier-name {
    font-size: 22px; font-weight: 800; color: var(--netu-blue); letter-spacing: .3px;
}
.netu-pricing .price {
    margin: 12px 0 2px; display: flex; align-items: baseline; gap: 6px;
}
.netu-pricing .price .amt {
    font-size: 40px; font-weight: 800; letter-spacing: 1.5px; color: var(--netu-ink);
}
.netu-pricing .price .amt-sm { font-size: 30px; }
.netu-pricing .price .per { font-size: 16px; color: var(--netu-slate); font-weight: 600; }
.netu-pricing .price-note { font-size: 14px; color: var(--netu-slate); min-height: 20px; }

.netu-pricing .blurb {
    background: var(--netu-surface-bg); border-radius: 11px;
    padding: 13px 15px; font-size: 14.5px; color: var(--netu-slate);
    line-height: 1.45; margin: 16px 0 18px; min-height: 78px;
}

/* Pricing buttons */
.netu-pricing .pr-btn {
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 17px; border-radius: 11px;
    padding: 12px 22px; cursor: pointer; border: none;
    transition: all .15s; text-decoration: none; width: 100%;
}
.netu-pricing .pr-btn-outline {
    background: #fff; color: var(--netu-blue); border: 1.5px solid var(--netu-blue);
}
.netu-pricing .pr-btn-outline:hover { background: #eaf3fb; }
.netu-pricing .pr-btn-primary { background: var(--netu-blue); color: #fff; }
.netu-pricing .pr-btn-primary:hover { background: var(--netu-blue-dark); }
.netu-pricing .pr-btn-red { background: var(--netu-red); color: #fff; }
.netu-pricing .pr-btn-red:hover { filter: brightness(.92); }
.netu-pricing .pr-btn-white { background: #fff; color: var(--netu-blue); }
.netu-pricing .pr-btn-white:hover { background: #eaf3fb; }
.netu-pricing .pr-btn-clear {
    background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.6);
}
.netu-pricing .pr-btn-clear:hover { background: rgba(255,255,255,.1); }

.netu-pricing .plus {
    font-size: 14px; font-weight: 700; color: var(--netu-blue); margin-bottom: 14px;
}

/* Feature list in plan cards */
.netu-pricing .feat {
    list-style: none; display: flex; flex-direction: column; gap: 12px;
    padding: 0; margin: 0;
}
.netu-pricing .feat li {
    display: flex; gap: 10px; font-size: 15px; line-height: 1.42;
}
.netu-pricing .feat li .ck {
    flex: 0 0 auto; width: 19px; height: 19px; border-radius: 50%;
    background: var(--netu-blue); color: #fff; display: grid; place-items: center;
    font-size: 11px; font-weight: 800; margin-top: 2px;
}
.netu-pricing .feat li.hero-feat .ck { background: var(--netu-seb-1); }
.netu-pricing .feat li.hero-feat { font-weight: 700; color: var(--netu-ink); }

/* Fee structure */
.netu-pricing .fees { padding: 64px 0 10px; text-align: center; }
.netu-pricing .fees h2 {
    font-size: 32px; font-weight: 800; letter-spacing: .7px; margin-bottom: 8px;
}
.netu-pricing .fees-lede {
    color: var(--netu-slate); font-size: 17px; max-width: 620px; margin: 0 auto 26px;
}
.netu-pricing .fee-table {
    max-width: 680px; margin: 0 auto; width: 100%;
    border-collapse: collapse; text-align: left;
}
.netu-pricing .fee-table th,
.netu-pricing .fee-table td {
    padding: 15px 18px; border-bottom: 1px solid var(--netu-line);
    font-size: 16px; vertical-align: middle;
}
.netu-pricing .fee-table .val { text-align: center; width: 160px; }
.netu-pricing .fee-table thead th {
    background: var(--netu-blue); color: #fff; font-weight: 700; font-size: 15px;
}
.netu-pricing .fee-table thead th:first-child { border-top-left-radius: 12px; }
.netu-pricing .fee-table thead th:last-child { border-top-right-radius: 12px; }
.netu-pricing .fee-table tbody td:first-child { font-weight: 600; }
.netu-pricing .fee-table tbody td.val { font-weight: 600; }
.netu-pricing .fee-table tbody td.highlight { color: var(--netu-blue); font-weight: 600; }
.netu-pricing .fee-note {
    font-size: 14.5px; color: var(--netu-slate); max-width: 760px;
    margin: 18px auto 0; line-height: 1.5;
}

/* Compare table */
.netu-pricing .compare { padding: 64px 0 20px; }
.netu-pricing .compare-toggle {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 0 auto 26px; padding: 14px 32px;
    font-size: 18px; font-weight: 700; letter-spacing: .3px;
    color: var(--netu-blue); background: none; border: 2px solid var(--netu-blue);
    border-radius: 10px; cursor: pointer; transition: background .2s, color .2s;
}
.netu-pricing .compare-toggle:hover { background: var(--netu-blue); color: #fff; }
.netu-pricing .compare-toggle svg { transition: transform .3s; }
.netu-pricing .compare-toggle svg.flip { transform: rotate(180deg); }
[x-cloak] { display: none !important; }
.compare-enter { transition: opacity .4s ease, transform .4s ease; }
.compare-enter-start { opacity: 0; transform: translateY(-12px); }
.compare-enter-end { opacity: 1; transform: translateY(0); }
.compare-leave { transition: opacity .3s ease, transform .3s ease; }
.compare-leave-start { opacity: 1; transform: translateY(0); }
.compare-leave-end { opacity: 0; transform: translateY(-12px); }
.netu-pricing .compare-scroll { overflow-x: auto; }
.netu-pricing .compare table {
    width: 100%; border-collapse: collapse; text-align: left;
    border: 1px solid var(--netu-line); border-radius: 12px; overflow: hidden;
    min-width: 780px;
}
.netu-pricing .compare th,
.netu-pricing .compare td {
    padding: 15px 18px; border-bottom: 1px solid var(--netu-line);
    font-size: 16px; vertical-align: middle;
}
.netu-pricing .compare .val { text-align: center; width: 150px; }
.netu-pricing .compare thead th {
    background: var(--netu-blue); color: #fff; font-weight: 700; font-size: 15px;
}
.netu-pricing .compare thead th:first-child { border-top-left-radius: 12px; }
.netu-pricing .compare thead th:last-child { border-top-right-radius: 12px; }
.netu-pricing .compare .th-price { font-weight: 500; font-size: 13px; opacity: .85; }
.netu-pricing .compare .grouphead td {
    background: var(--netu-surface-bg); font-weight: 800; font-size: 14px;
    letter-spacing: 1.2px; text-transform: uppercase; color: var(--netu-blue); padding: 14px 18px;
}
.netu-pricing .compare .grouphead.org-head td { color: var(--netu-red); }
.netu-pricing .compare .row-feat { font-weight: 600; }
.netu-pricing .compare .row-sub {
    font-size: 13.5px; color: var(--netu-slate); font-weight: 400;
    display: block; margin-top: 2px;
}
.netu-pricing .compare .yes { color: var(--netu-blue); font-weight: 800; font-size: 18px; }
.netu-pricing .compare .no { color: #c2ccd6; font-weight: 700; font-size: 17px; }
.netu-pricing .compare .cellval { font-weight: 600; font-size: 15px; text-align: center; }
.netu-pricing .compare .featured-col { background: #f4f9fe; }
.netu-pricing .compare thead th.featured-col { background: var(--netu-blue); }

/* FAQ */
.netu-pricing .pricing-faq { padding: 64px 0 10px; }
.netu-pricing .pricing-faq h2 {
    font-size: 32px; font-weight: 800; letter-spacing: .7px;
    text-align: center; margin-bottom: 26px;
}
.netu-pricing .pricing-faq .accordion-item { border: none; border-bottom: 1px solid var(--netu-line); }
.netu-pricing .pricing-faq .accordion-button {
    font-size: 18px; font-weight: 700; padding: 20px 4px; background: none; box-shadow: none;
}
.netu-pricing .pricing-faq .accordion-button:not(.collapsed) { color: var(--netu-blue); }
.netu-pricing .pricing-faq .accordion-body {
    font-size: 16px; color: var(--netu-slate); line-height: 1.55; padding: 0 4px 20px;
}

/* CTA band */
.netu-pricing .pr-cta-band {
    margin-top: 64px; background: linear-gradient(135deg, var(--netu-blue), #0a4f8c);
    color: #fff; text-align: center; padding: 58px 24px;
}
.netu-pricing .pr-cta-band h2 {
    font-size: 34px; font-weight: 800; letter-spacing: .7px; margin: 10px 0 22px;
}
.netu-pricing .pr-cta-btns {
    display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.netu-pricing .pr-cta-btns .pr-btn { width: auto; margin-bottom: 0; }

/* Pricing — Responsive */
@media (max-width: 991.98px) {
    .netu-pricing .pricing-hero h1 { font-size: 36px; }
    .netu-pricing .panels { grid-template-columns: 1fr; }
    .netu-pricing .tiers { grid-template-columns: repeat(2, 1fr); }
    .netu-pricing .pr-jobs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px) {
    .netu-pricing .pricing-hero h1 { font-size: 30px; }
    .netu-pricing .tiers { grid-template-columns: 1fr; }
    .netu-pricing .pr-jobs { grid-template-columns: 1fr; }
    .netu-pricing .billing-row { flex-wrap: wrap; gap: 8px; }
}

[x-cloak] { display: none !important; }
.co-modal { position: fixed; inset: 0; z-index: 1080; display: flex; align-items: center;
    justify-content: center; padding: 16px; background: rgba(17,24,39,.55); }
/* Smooth open/close for the pricing modals (checkout + upgrade) — never abrupt. */
.co-modal-enter { transition: opacity .22s ease; }
.co-modal-enter .co-modal-card { transition: transform .22s ease; }
.co-modal-enter-start { opacity: 0; }
.co-modal-enter-start .co-modal-card { transform: translateY(10px) scale(.98); }
.co-modal-enter-end { opacity: 1; }
.co-modal-enter-end .co-modal-card { transform: translateY(0) scale(1); }
.co-modal-leave { transition: opacity .16s ease; }
.co-modal-leave-start { opacity: 1; }
.co-modal-leave-end { opacity: 0; }
.co-modal-card { position: relative; width: 100%; max-width: 460px; background: #fff;
    border-radius: 16px; padding: 28px 24px; box-shadow: 0 20px 60px rgba(0,0,0,.3);
    max-height: 92vh; overflow-y: auto; }
.co-modal-x { position: absolute; top: 12px; right: 14px; border: 0; background: transparent;
    font-size: 26px; line-height: 1; color: #9ca3af; cursor: pointer; }
.co-modal-title { font-size: 20px; font-weight: 800; margin: 0 0 18px; }
.co-plan-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.co-plan-name { font-size: 18px; font-weight: 700; }
.co-plan-desc { color: #6b7280; font-size: 13px; margin-top: 2px; }
.co-price { text-align: right; white-space: nowrap; }
.co-amt { font-size: 24px; font-weight: 800; }
.co-per { color: #6b7280; font-size: 13px; }
.co-strike { color: #9ca3af; font-size: 13px; text-decoration: line-through; }
.co-seg { display: inline-flex; margin: 16px 0; border: 1px solid #e5e7eb; border-radius: 999px;
    padding: 3px; gap: 2px; }
.co-seg button { border: 0; background: transparent; padding: 6px 14px; border-radius: 999px;
    font-size: 13px; cursor: pointer; color: #374151; }
.co-seg button.on { background: #111827; color: #fff; }
.co-coupon { display: flex; gap: 8px; }
.co-coupon-input { flex: 1; border: 1px solid #e5e7eb; border-radius: 10px; padding: 9px 12px;
    font-size: 14px; }
.co-coupon-msg { margin: 8px 0 0; font-size: 13px; }
.co-coupon-msg.ok { color: #047857; }
.co-coupon-msg.bad { color: #b91c1c; }
.co-pay { display: grid; gap: 12px; margin-top: 18px; }
.co-opt { border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px; }
.co-btn { width: 100%; justify-content: center; }
.co-opt-sub { display: block; margin-top: 8px; color: #6b7280; font-size: 12px; line-height: 1.4; }
.co-fine { margin: 16px 0 0; font-size: 11px; color: #9ca3af; text-align: center; }
@media (prefers-color-scheme: dark) {
    .co-modal-card { background: #111827; }
    .co-modal-title, .co-plan-name, .co-amt { color: #f9fafb; }
    .co-opt, .co-coupon-input, .co-seg { border-color: #1f2937; }
}

/* =============================================================================
   Gallery
   ============================================================================= */

.gallery-page {
    max-width: 1200px;
}

.gallery-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
}

/* Storage bar */
.gallery-storage-card {
    background: #fff;
    border: 1px solid var(--netu-line);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
}

.gallery-storage-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
}

.gallery-storage-label {
    color: var(--netu-slate);
    font-weight: 500;
}

.gallery-storage-value {
    font-size: 13px;
}

.gallery-storage-bar {
    height: 8px;
    background: var(--netu-surface-bg);
    border-radius: 4px;
    overflow: hidden;
}

.gallery-storage-fill {
    height: 100%;
    background: var(--netu-blue);
    border-radius: 4px;
    transition: width .4s ease;
    min-width: 0;
}

.gallery-storage-fill.warning {
    background: #f59e0b;
}

.gallery-storage-fill.danger {
    background: var(--netu-red);
}

/* Drop zone */
.gallery-dropzone {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 104, 184, 0.08);
    border: 3px dashed var(--netu-blue);
    border-radius: 16px;
    margin: 16px;
    pointer-events: none;
}

.gallery-dropzone.active {
    pointer-events: auto;
}

.gallery-dropzone i {
    font-size: 48px;
    color: var(--netu-blue);
    margin-bottom: 8px;
}

.gallery-dropzone p {
    font-size: 16px;
    color: var(--netu-blue);
    font-weight: 600;
}

/* Empty state */
.gallery-empty {
    text-align: center;
    padding: 80px 20px;
    background: #fff;
    border: 1px solid var(--netu-line);
    border-radius: 12px;
}

/* Grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.gallery-item {
    background: #fff;
    border: 1px solid var(--netu-line);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow .2s, transform .15s;
}

.gallery-item:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* Thumbnail */
.gallery-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--netu-surface-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-doc i {
    font-size: 48px;
}

/* File info */
.gallery-item-info {
    padding: 10px 12px 4px;
}

.gallery-item-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--netu-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gallery-item-size {
    font-size: 12px;
    color: var(--netu-faint);
}

/* Item actions */
.gallery-item-actions {
    display: flex;
    gap: 6px;
    padding: 6px 12px 10px;
}

.gallery-item-actions .btn-sm {
    padding: 3px 8px;
    font-size: 13px;
}

/* Pagination */
.gallery-pagination {
    margin-top: 28px;
}

@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
    }

    .gallery-header {
        flex-direction: column;
        gap: 12px;
    }
}

/* =============================================================================
   Auth Pages (login, signup, verify-email, forgot/reset password)
   ============================================================================= */

.netu-auth-body {
    background: var(--netu-surface-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.netu-auth-header {
    border-bottom: 1px solid var(--netu-line);
    background: #fff;
}

.netu-auth-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.netu-auth-signin-btn {
    font-size: 15px;
    font-weight: 700;
    color: var(--netu-blue);
    text-decoration: none;
    padding: 8px 20px;
    border: 1.5px solid var(--netu-blue);
    border-radius: 8px;
    transition: all .15s;
}

.netu-auth-signin-btn:hover {
    background: var(--netu-blue);
    color: #fff;
}

.netu-auth-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.netu-auth-card {
    width: 440px;
    max-width: 100%;
    background: #fff;
    border: 1px solid var(--netu-line);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(12, 27, 42, 0.08);
    padding: 36px 32px 28px;
}

.netu-auth-card h1 {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--netu-ink);
    margin: 0 0 6px;
}

.auth-subtitle {
    font-size: 15px;
    color: var(--netu-slate);
    margin: 0 0 24px;
    line-height: 1.5;
}

/* OAuth buttons */
.oauth-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 0;
}

.oauth-row .oauth-btn {
    margin-bottom: 0;
}

.oauth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 48px;
    background: #fff;
    border: 1.5px solid #DADCE0;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #3C4043;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    margin-bottom: 10px;
}

.oauth-btn:hover {
    background: #f8f9fa;
    border-color: #bdc1c6;
    color: #3C4043;
}

/* Divider */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
}

.auth-divider-line {
    flex: 1;
    height: 1px;
    background: var(--netu-line);
}

.auth-divider-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--netu-faint);
    text-transform: uppercase;
}

/* Auth forms */
.netu-auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Terms/Privacy acceptance line under the email submit (login modal + login page). */
.auth-terms {
    text-align: center;
    line-height: 1.45;
    margin: -4px 0 0;      /* tighten against the button (form gap already spaces it) */
}
.auth-terms a { color: var(--netu-blue, #2563eb); text-decoration: none; }
.auth-terms a:hover { text-decoration: underline; }

.netu-auth-form label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--netu-ink);
    margin-bottom: 6px;
}

.netu-auth-form .optional {
    font-weight: 400;
    color: var(--netu-faint);
}

.netu-auth-form input[type="text"],
.netu-auth-form input[type="email"],
.netu-auth-form input[type="tel"],
.netu-auth-form input[type="password"],
.netu-auth-form input[type="url"] {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1.5px solid var(--netu-line);
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    color: var(--netu-ink);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.netu-auth-form input:focus {
    outline: none;
    border-color: var(--netu-blue);
    box-shadow: 0 0 0 3px rgba(0, 104, 184, 0.1);
}

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Phone input: country code + number */
.phone-input-row {
    display: flex;
    gap: 8px;
}

.country-code-wrap {
    flex: 0 0 auto;
    min-width: 110px;
}

.country-code-wrap select {
    width: 100%;
    height: 46px;
    padding: 0 8px;
    border: 1.5px solid var(--netu-line);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    color: var(--netu-ink);
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394A3B8' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px;
}

.country-code-wrap select:focus {
    outline: none;
    border-color: var(--netu-blue);
    box-shadow: 0 0 0 3px rgba(0, 104, 184, 0.1);
}

.phone-input-row input[type="tel"] {
    flex: 1;
}

/* SMS consent */
.sms-consent-wrap {
    overflow: hidden;
}

.sms-consent-enter {
    transition: opacity .25s ease, max-height .3s ease;
}
.sms-consent-enter-start {
    opacity: 0;
    max-height: 0;
}
.sms-consent-enter-end {
    opacity: 1;
    max-height: 200px;
}
.sms-consent-leave {
    transition: opacity .2s ease, max-height .25s ease;
}
.sms-consent-leave-start {
    opacity: 1;
    max-height: 200px;
}
.sms-consent-leave-end {
    opacity: 0;
    max-height: 0;
}

.sms-consent-label {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 10px;
    cursor: pointer;
    font-weight: 400 !important;
}

.sms-consent-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--netu-blue);
    cursor: pointer;
}

.sms-consent-text {
    font-size: 12px;
    line-height: 1.5;
    color: var(--netu-slate);
    text-align: justify;
}

/* Password wrap with toggle */
.pw-wrap {
    position: relative;
}

.pw-wrap input {
    padding-right: 46px !important;
}

.pw-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 8px;
    color: var(--netu-faint);
    cursor: pointer;
    font-size: 18px;
}

.pw-toggle:hover {
    color: var(--netu-slate);
}

/* Password rules */
.pw-rules {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--netu-faint);
    flex-wrap: wrap;
}

.pw-rules span.met {
    color: #16a34a;
}

.pw-rules .dot {
    color: var(--netu-line);
}

/* OTP input */
.otp-input {
    text-align: center;
    font-size: 28px !important;
    font-weight: 700;
    letter-spacing: 12px;
    height: 56px !important;
}

.hint {
    font-size: 13px;
    color: var(--netu-faint);
    margin: 6px 0 0;
}

/* Submit button */
.netu-auth-submit {
    width: 100%;
    height: 48px;
    background: var(--netu-blue);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, opacity .3s ease;
}

.netu-auth-submit:hover {
    background: var(--netu-blue-dark);
}

/* Disabled until the Turnstile check passes — fades back in smoothly when it does */
.netu-auth-submit:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* The Cloudflare widget (fixed 300px wide) centered inside the auth card */
.netu-turnstile {
    display: flex;
    justify-content: center;
    min-height: 65px;
}

/* Links */
.switch-link {
    text-align: center;
    font-size: 14px;
    color: var(--netu-slate);
    margin: 0;
}

.switch-link a {
    color: var(--netu-blue);
    font-weight: 700;
    text-decoration: none;
}

.switch-link a:hover {
    text-decoration: underline;
}

.forgot-row {
    text-align: right;
    margin-top: -8px;
}

.forgot-row a {
    font-size: 14px;
    color: var(--netu-blue);
    font-weight: 600;
    text-decoration: none;
}

.forgot-row a:hover {
    text-decoration: underline;
}

.terms {
    font-size: 13px;
    color: var(--netu-slate);
    line-height: 1.5;
    margin: 0;
}

.terms a {
    color: var(--netu-blue);
    text-decoration: none;
}

.terms a:hover {
    text-decoration: underline;
}

/* Resend form */
.resend-form {
    text-align: center;
    margin-top: 12px;
}

.resend-link {
    background: none;
    border: none;
    color: var(--netu-blue);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.resend-link:hover {
    text-decoration: underline;
}

/* Alert styles */
.netu-auth-card .alert {
    font-size: 14px;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 8px;
}

@media (max-width: 575.98px) {
    .netu-auth-card {
        padding: 28px 20px 24px;
        border-radius: 12px;
    }
    .netu-auth-card h1 {
        font-size: 22px;
    }
    .form-row-2 {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   Login Modal (popup on public pages)
   ============================================================================= */

.login-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1070;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    visibility: hidden;
    pointer-events: none;
}

.login-modal-overlay.open {
    visibility: visible;
    pointer-events: auto;
}

/* Blurred backdrop */
.login-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(12, 27, 42, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity .3s ease;
}

.login-modal-overlay.open .login-modal-backdrop {
    opacity: 1;
}

/* Card */
.login-modal-card {
    position: relative;
    z-index: 1;
    width: 440px;
    max-width: 100%;
    background: #fff;
    border: 1px solid var(--netu-line);
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(12, 27, 42, 0.16);
    padding: 36px 32px 28px;
    opacity: 0;
    transform: translateY(16px) scale(0.97);
    transition: opacity .3s ease, transform .3s ease;
}

.login-modal-overlay.open .login-modal-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.login-modal-card h2 {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--netu-ink);
    margin: 0 0 6px;
}

/* Close button */
.login-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 18px;
    color: var(--netu-faint);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color .15s;
}

.login-modal-close:hover {
    color: var(--netu-ink);
}

/* Body scroll lock when modal is open */
body.login-modal-active {
    overflow: hidden;
}

@media (max-width: 575.98px) {
    .login-modal-card {
        padding: 28px 20px 24px;
        border-radius: 12px;
    }
}

/* =============================================================================
   Onboarding Pages (persona, step1, step2)
   ============================================================================= */

.netu-onboarding-body {
    background: var(--netu-surface-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.netu-onboarding-header {
    border-bottom: 1px solid var(--netu-line);
    background: #fff;
}

.netu-onboarding-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
}

.netu-onboarding-main {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 40px 20px 60px;
}

/* ---- Persona Selection ---- */
.ob-persona-page {
    max-width: 900px;
    min-width: 55%;
    text-align: center;
}

.ob-persona-page h1 {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: 0.6px;
    color: var(--netu-ink);
    margin: 0 0 8px;
}

.ob-subtitle {
    font-size: 18px;
    color: var(--netu-slate);
    margin: 0 0 32px;
    line-height: 1.25;
}

.ob-persona-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 15px;
}

.ob-pcard {
    background: #fff;
    border: 2px solid var(--netu-line);
    border-radius: 16px;
    padding: 28px 24px;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
    font-family: inherit;
    color: var(--netu-ink);
}

.ob-pcard:hover {
    border-color: var(--netu-blue);
    box-shadow: 0 4px 16px rgba(0, 104, 184, 0.08);
}

.ob-pcard.active {
    border-color: var(--netu-blue);
    background: #f4f9fe;
    box-shadow: 0 0 0 3px rgba(0, 104, 184, 0.15);
}

.ob-pcard-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
    font-weight: 500;
}

.ob-pcard-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.ob-pcard-icon.ic-blue { background: #E6F0F9; color: var(--netu-blue); }
.ob-pcard-icon.ic-red { background: #FBE9E8; color: var(--netu-red); }
.ob-pcard-icon.ic-purple { background: #ECEAFA; color: var(--netu-seb-1); }
.ob-pcard-icon.ic-green { background: #E6F7EE; color: #16a34a; }

/* BANNER persona cards (Pushpak's mockup, 2026-10-24) — COMMUNITY persona pick only; the platform onboarding
   keeps the compact legacy cards above. The card's whole top is a tinted hero filled by the icon (radio
   floating top-right), then title, then subtext. */
.ob-pcard--banner { padding: 0; overflow: hidden; }
.ob-pcard-hero {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 100%; height: 230px;
}
.ob-pcard-hero img { width: 175px; height: 175px; object-fit: contain; }
.ob-pcard-hero .bi { font-size: 96px; color: var(--netu-seb-1); }
.ob-pcard-hero .ob-pcard-radio { position: absolute; top: 14px; right: 14px; background: #fff; }
/* The mockup's cycling pastel tints. */
.ob-hero-sand  { background: #F3EADF; }
.ob-hero-lilac { background: #EFEAF5; }
.ob-hero-sky   { background: #E8F0FB; }
.ob-hero-mint  { background: #E6F7EE; }
.ob-pcard-banner-body { display: block; padding: 22px 24px 26px; }
.ob-pcard-banner-title { font-size: 2rem; line-height: 1.15; letter-spacing: -.02em; margin-bottom: 8px; }
.ob-pcard-banner-desc { font-size: 18px; line-height: 1.45; }
@media (max-width: 576px) {
    .ob-pcard-hero { height: 190px; }
    .ob-pcard-hero img { width: 140px; height: 140px; }
    .ob-pcard-banner-title { font-size: 1.6rem; }
    .ob-pcard-banner-desc { font-size: 16px; }
}

.ob-pcard-radio {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--netu-line);
    flex-shrink: 0;
    transition: border-color .15s, background .15s;
    position: relative;
}

.ob-pcard-radio.checked {
    border-color: var(--netu-blue);
    background: var(--netu-blue);
}

.ob-pcard-radio.checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
}

.ob-pcard h3 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin: 0 0 8px;
    color: var(--netu-ink);
    transition: color .2s;
}

.ob-pcard.active h3 {
    color: var(--netu-blue);
}

.ob-pcard p {
    font-size: 16px;
    color: var(--netu-slate);
    line-height: 1.5;
    margin: 0;
}

.ob-pcard-examples {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--netu-line);
    font-size: 16px;
    color: var(--netu-slate);
    line-height: 1.25;
    font-weight: 300;
    letter-spacing: 0.2px;
}

.ob-pcard-examples-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9AA4B2;
    font-weight: 700;
    margin-bottom: 5px;
}

.ob-continue-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 36px;
    background: var(--netu-line);
    color: var(--netu-faint);
    border: none;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 700;
    font-family: inherit;
    cursor: not-allowed;
    transition: all .2s;
}

.ob-continue-btn.enabled {
    background: var(--netu-blue);
    color: #fff;
    cursor: pointer;
}

.ob-continue-btn.enabled:hover {
    background: var(--netu-blue-dark);
}

/* ---- Step Pages ---- */
.ob-step-page {
    max-width: 620px;
    width: 100%;
}

.ob-step-page h1 {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--netu-ink);
    margin: 0 0 6px;
}

/* Progress bar */
.ob-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}

.ob-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--netu-line);
    border-radius: 3px;
    overflow: hidden;
}

.ob-progress-fill {
    height: 100%;
    background: var(--netu-blue);
    border-radius: 3px;
    transition: width .4s ease;
}

.ob-progress-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--netu-slate);
    white-space: nowrap;
}

/* Onboarding form */
.ob-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 28px;
}

.ob-field-label {
    display: flex;
    font-size: 18px;
    font-weight: 400;
    color: var(--netu-ink);
    margin-bottom: 5px;
}

.ob-field .required {
    color: var(--netu-red);
}

.ob-field input[type="text"],
.ob-field input[type="email"],
.ob-field input[type="url"],
.ob-field input[type="tel"],
.ob-field select,
.ob-field textarea {
    width: 100%;
    height: 46px;
    padding: 1px 2px 1px 5px;
    border: 1.5px solid var(--netu-line);
    border-radius: 10px;
    font-size: 16px;
    font-family: inherit;
    color: var(--netu-ink);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.ob-field input::placeholder,
.ob-field textarea::placeholder {
    color: #9ca3af;
}

.ob-field input:focus,
.ob-field select:focus,
.ob-field textarea:focus {
    outline: none;
    border-color: var(--netu-blue);
    box-shadow: 0 0 0 3px rgba(0, 104, 184, 0.1);
}

.ob-field textarea {
    height: auto;
    padding: 12px 14px;
    resize: vertical;
    min-height: 70px;
}

.ob-hint {
    font-size: 14px;
    color: var(--netu-faint);
    margin-top: 4px;
    font-weight: 400;
}

.ob-error {
    font-size: 14px;
    color: #dc2626;
    margin-top: 6px;
    font-weight: 500;
}

.ob-input-error {
    border-color: #dc2626 !important;
}

.ob-input-error:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

.ob-char-count {
    float: right;
    font-size: 14px;
    color: var(--netu-faint);
    margin-top: 4px;
}

/* URL input with spinner */
.ob-url-input {
    position: relative;
}

.ob-url-input input {
    padding-right: 40px;
}

.ob-url-status {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--netu-blue);
    font-size: 18px;
}

.spin {
    animation: ob-spin 1s linear infinite;
}

@keyframes ob-spin {
    to { transform: rotate(360deg); }
}

/* Chip select (multi-select with dropdown) */
.ob-chip-select {
    position: relative;
}

.ob-chip-select input[type="text"] {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1.5px solid var(--netu-line);
    border-radius: 10px;
    font-size: 16px;
    font-family: inherit;
    color: var(--netu-ink);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.ob-chip-select input[type="text"]:focus {
    outline: none;
    border-color: var(--netu-blue);
    box-shadow: 0 0 0 3px rgba(0, 104, 184, 0.1);
}

.ob-chips-chosen {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.ob-chips-chosen:empty {
    margin-bottom: 0;
}

.ob-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--netu-surface-bg);
    border: 1px solid var(--netu-line);
    border-radius: 999px;
    font-size: 15px;
    font-weight: 500;
    color: var(--netu-ink);
    cursor: pointer;
    transition: all .15s;
}

.ob-chip.active {
    background: var(--netu-surface-blue);
    border: 2px solid var(--netu-blue);
    color: var(--netu-blue);
    font-weight: 500;
}

.ob-chip .bi-x {
    font-size: 14px;
}

.ob-chip-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid var(--netu-line);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    margin-top: 4px;
    /* ⛔ ~5 rows then scroll (Pushpak, 2026-08-19). We now render ALL 600+ matches (no 10-cap) so users
       know the full vocabulary is searchable; the cap here keeps the open list from filling the page. */
    max-height: 210px;
    overflow-y: auto;
}

/* Option picker in a <dialog>: open in the flow, not floating — a floating list makes the modal scroll. */
.ob-chip-dropdown.ob-chip-dropdown-inline { position: static; max-height: 180px; }

/* The "type to search 18,000+…" guidance shown in the tradeshow/chamber dropdown on empty focus. */
.ob-chip-hint {
    margin: 0;
    padding: 12px 14px;
    font-size: 14px;
    color: var(--netu-ink-soft, #6b7280);
}

.ob-chip-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 16px;
    color: var(--netu-ink);
    cursor: pointer;
    transition: background .1s;
}

.ob-chip-option:hover {
    background: var(--netu-surface-bg);
}

.ob-chip-option.ob-chip-hl {
    background: var(--netu-primary, #2563eb);
    color: #fff;
}

.ob-selected-industries {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

/* Radio chip group */
.ob-radio-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ob-radio-chip {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    background: #fff;
    border: 1px solid var(--netu-line);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    color: var(--netu-ink);
    cursor: pointer;
    transition: all .15s;
}

.ob-radio-chip:hover {
    border-color: var(--netu-blue);
}

.ob-radio-chip.active {
    background: var(--netu-surface-blue);
    border: 2px solid var(--netu-blue);
    color: var(--netu-blue);
    font-weight: 600;
}

/* Checkbox chip group */
.ob-check-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ob-check-chip {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    background: #fff;
    border: 1px solid var(--netu-line);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    color: var(--netu-ink);
    cursor: pointer;
    transition: all .15s;
}

.ob-check-chip:hover {
    border-color: var(--netu-blue);
}

.ob-check-chip.active {
    background: var(--netu-surface-blue);
    border: 2px solid var(--netu-blue);
    color: var(--netu-blue);
    font-weight: 600;
}

/* Tag input */
.ob-tag-input {
    border: 1.5px solid var(--netu-line);
    border-radius: 10px;
    padding: 8px 10px;
    min-height: 46px;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.ob-tag-input:focus-within {
    border-color: var(--netu-blue);
    box-shadow: 0 0 0 3px rgba(0, 104, 184, 0.1);
}

.ob-tags-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.ob-tags-wrap input[type="text"] {
    border: none !important;
    padding: 4px 0 !important;
    font-size: 16px;
    flex: 1;
    min-width: 120px;
    box-shadow: none !important;
}

.ob-tags-wrap input:focus {
    outline: none;
}

.ob-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--netu-surface-blue);
    border: 1px solid #cfe4f6;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 500;
    color: var(--netu-blue);
}

.ob-tag .bi-x {
    cursor: pointer;
    font-size: 14px;
}

/* Form actions (back + submit) */
.ob-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

.ob-back-link {
    font-size: 16px;
    font-weight: 500;
    color: var(--netu-slate);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ob-back-link:hover {
    color: var(--netu-blue);
}

/* ---- Reusable Crop Modal ---- */
.netu-crop-modal {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: netuFadeIn .15s ease;
}

@keyframes netuFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Smooth exit — the picker adds .closing before removal (never an abrupt vanish). */
.netu-crop-modal.closing { animation: netuFadeOut .18s ease forwards; }
@keyframes netuFadeOut { to { opacity: 0; } }

/* ⛔ PLATFORM RULE (2026-07-22): a clicked submit is a disabled submit. app.js adds these on every native
   form submission — the button dims smoothly and grows an inline spinner, so a double-click can't fire twice. */
.netu-btn-submitting { opacity: .7; pointer-events: none; transition: opacity .2s ease; }
.netu-btn-spin {
    display: inline-block;
    width: 1em; height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    margin-right: .45em;
    vertical-align: -.15em;
    animation: netuSpin .6s linear infinite;
}
@keyframes netuSpin { to { transform: rotate(360deg); } }

/* ---------- "Choose from Gallery" picker (netuOpenGalleryPicker) ---------- */
.netu-gallery-dialog { width: 640px; }
.netu-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    padding: 16px;
    max-height: 60vh;
    overflow-y: auto;
}
.netu-gallery-cell {
    border: 2px solid transparent;
    border-radius: 10px;
    padding: 0;
    background: #f3f4f6;
    aspect-ratio: 1;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease;
}
.netu-gallery-cell:hover { border-color: var(--netu-primary, #0d6efd); transform: scale(1.03); }
.netu-gallery-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.netu-gallery-empty { grid-column: 1 / -1; text-align: center; color: #6b7280; padding: 32px 8px; }

.netu-crop-dialog {
    background: #fff;
    border-radius: 16px;
    width: 500px;
    max-width: 100%;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
    animation: netuSlideUp .2s ease;
}

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

.netu-crop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--netu-line);
}

.netu-crop-header h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.netu-crop-close {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--netu-slate);
    cursor: pointer;
    padding: 4px;
}

.netu-crop-body {
    padding: 40px;
}

.netu-crop-container {
    max-height: 350px;
    overflow: hidden;
    background: #f0f0f0;
    border-radius: 8px;
}

.netu-crop-container img {
    display: block;
    max-width: 100%;
}

/* Circle highlight for logo cropping */
.netu-crop--circle .cropper-view-box,
.netu-crop--circle .cropper-face {
    border-radius: 50%;
}

.netu-crop-controls {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.netu-crop-controls button {
    width: 40px;
    height: 40px;
    border: 1.5px solid var(--netu-line);
    border-radius: 8px;
    background: #fff;
    color: var(--netu-ink);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
}

.netu-crop-controls button:hover {
    background: var(--netu-surface-bg);
    border-color: var(--netu-blue);
    color: var(--netu-blue);
}

.netu-crop-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid var(--netu-line);
}

.netu-btn-secondary {
    padding: 10px 22px;
    border: 1.5px solid var(--netu-line);
    border-radius: 10px;
    background: #fff;
    color: var(--netu-slate);
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all .15s;
}

.netu-btn-secondary:hover {
    background: var(--netu-surface-bg);
}

.netu-btn-primary {
    padding: 10px 22px;
    border: none;
    border-radius: 10px;
    background: var(--netu-blue);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s;
}

.netu-btn-primary:hover {
    background: var(--netu-blue-dark);
}

/* Emerald variant — pair with .netu-btn-primary for shape; overrides only the colour (source order beats
   the blue :hover above). Used for the final "commit" action on the CRM import. */
.netu-btn-emerald { background: #059669; }
.netu-btn-emerald:hover { background: #047857; }

/* ============ HIGH-IMPACT CTAs — series directive (Pushpak, 2026-09-17) ============
   ⛔ BUTTONS ARE FLAT (Pushpak trimmed the 3D side/gloss same day): the face is the SEBASTIAN GRADIENT
   (135deg seb-1 → seb-2, the Sebastian page's own .seb-grad — LOCKED, never blue) and the life comes from
   MOTION — hover lift + ambient glow, click press. Depth (layered shadows) lives on SURFACES — .netu-modal-3d,
   .netu-pick-row, the search pills — never on buttons. ONE .netu-cta-3d per view marks THE primary action
   (bigger, stronger glow); .netu-btn-grad below is the mid-weight sibling for form submits. */
.netu-cta-3d {
    border: 0;
    border-radius: 12px;
    padding: .55rem 1.15rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--netu-seb-1), var(--netu-seb-2));
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.netu-cta-3d:hover {
    color: #fff;
    filter: brightness(1.07);
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -10px color-mix(in srgb, var(--netu-seb-2) 55%, transparent);
}
.netu-cta-3d:active {
    color: #fff;
    filter: none;
    transform: translateY(1px);                                                   /* the press */
    box-shadow: none;
}
.netu-cta-3d:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--netu-seb-1) 35%, #fff);
    outline-offset: 2px;
}

/* The mid-weight sibling (Pushpak, 2026-09-17, born on the topbar's search-Go): same flat Sebastian face,
   for form submits and mid-weight actions that should match the brand without competing with the page's
   ONE .netu-cta-3d (which is bigger, with a stronger hover glow). Same motion: hover lift + glow, press. */
.netu-btn-grad {
    border: 0;
    border-radius: 10px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--netu-seb-1), var(--netu-seb-2));
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.netu-btn-grad:hover {
    color: #fff;
    filter: brightness(1.07);
    transform: translateY(-1px);
    box-shadow: 0 8px 16px -6px color-mix(in srgb, var(--netu-seb-2) 45%, transparent);
}
.netu-btn-grad:active {
    color: #fff;
    filter: none;
    transform: translateY(1px);
    box-shadow: none;
}
.netu-btn-grad:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--netu-seb-1) 35%, #fff);
    outline-offset: 2px;
}

/* The elevated dialog: deep layered shadow, soft radius, tinted header — floats OVER the page
   instead of sitting on it. */
.netu-modal-3d .modal-content {
    border: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .6),
        0 8px 24px -12px rgba(12, 27, 42, .3),
        0 28px 70px -18px rgba(12, 27, 42, .45);
}
.netu-modal-3d .modal-header {
    background: linear-gradient(135deg, var(--netu-blue-tint) 0%, #fff 70%);
    border-bottom: 1px solid var(--netu-line);
}
.netu-modal-3d .modal-title { font-weight: 700; color: var(--netu-ink); }
.netu-modal-3d .modal-title .bi { color: var(--netu-blue); }

/* Picker rows — raised cards, not flat list items: each floats a little, lifts toward you on hover,
   and its chevron leans into the click. */
.netu-pick-list { display: grid; gap: 10px; }
.netu-pick-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--netu-line);
    border-radius: 14px;
    background: linear-gradient(180deg, #fff 0%, var(--netu-surface) 100%);
    box-shadow:
        inset 0 1px 0 #fff,
        0 6px 16px -10px rgba(12, 27, 42, .25);
    text-decoration: none;
    color: inherit;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.netu-pick-row:hover {
    color: inherit;
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--netu-blue) 35%, var(--netu-line));
    box-shadow:
        inset 0 1px 0 #fff,
        0 14px 26px -12px color-mix(in srgb, var(--netu-blue) 35%, transparent);
}
.netu-pick-row:active { transform: translateY(0); }
.netu-pick-row .pick-avatar { box-shadow: 0 2px 6px rgba(12, 27, 42, .14); }
.netu-pick-row .bi-chevron-right {
    color: var(--netu-faint);
    transition: transform .16s ease, color .16s ease;
}
.netu-pick-row:hover .bi-chevron-right {
    color: var(--netu-blue);
    transform: translateX(3px);
}

/* ---- Booth Step 1: Layout ---- */
.ob-booth-page {
    max-width: 1060px;
    min-width: 60%;
    position: relative;
}

.ob-booth-page h1 {
    font-size: 26px;
    font-weight: 700;
    color: var(--netu-ink);
    margin: 0 0 6px;
}

.ob-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 28px;
}

.ob-stepper-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
    color: var(--netu-faint);
}

.ob-stepper-step.active {
    color: var(--netu-ink);
    font-weight: 600;
}

.ob-stepper-step.active .ob-stepper-circle {
    background: var(--netu-blue);
    color: #fff;
    border-color: var(--netu-blue);
}

.ob-stepper-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--netu-line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--netu-faint);
    background: #fff;
    flex-shrink: 0;
}

.ob-stepper-line {
    width: 60px;
    height: 2px;
    background: var(--netu-line);
    margin: 0 12px;
}

.ob-stepper-line.active {
    background: var(--netu-blue);
}

.ob-booth-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 40px;
    align-items: flex-start;
}

.ob-booth-form-col {
    min-width: 0;
    background: #fff;
    border: 1px solid var(--netu-line);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(12, 27, 42, 0.08);
    padding: 32px 30px 28px;
    /* Each step ARRIVES visibly (2026-10-07): the wizard's pages share one shell, and a static reload
       of a near-identical layout reads as "nothing happened" — motion is the new-page signal. */
    animation: obStepIn .3s ease;
}
@keyframes obStepIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

/* "STEP 2 OF 4" in words above the heading — the circles say it, but too quietly (2026-10-07). */
.ob-step-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--netu-seb-1);
    margin-bottom: 6px;
}

/* The newly-active stepper circle pulses once on arrival. */
.ob-stepper-step.active .ob-stepper-circle { animation: obStepPulse .7s ease .25s 1; }
@keyframes obStepPulse {
    from { box-shadow: 0 0 0 0 rgba(0, 104, 184, .40); }   /* --netu-blue, the active circle's color */
    to   { box-shadow: 0 0 0 14px rgba(0, 104, 184, 0); }
}

/* The Continue button's "Saving…" spinner (obContinueSaving, onboarding.js). */
.ob-btn-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    margin-right: 6px;
    vertical-align: -2px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: obSpin .7s linear infinite;
}
@keyframes obSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .ob-booth-form-col,
    .ob-stepper-step.active .ob-stepper-circle { animation: none; }
}

/* ---- Auto-fill card ---- */
.ob-autofill-card {
    background: linear-gradient(120deg, var(--netu-seb-1) 0%, var(--netu-seb-2) 58%, var(--netu-red) 130%);
    border: none;
    border-radius: 12px;
    padding: 20px 22px;
    color: #fff;
}

.ob-autofill-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 16px;
    color: #fff;
}

.ob-autofill-header strong {
    font-weight: 600;
}

.ob-autofill-desc {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 12px;
    line-height: 1.5;
}

.ob-autofill-card .ob-field-label {
    color: rgba(255, 255, 255, 0.9);
}

.ob-autofill-card .ob-optional {
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
}

.ob-autofill-row {
    display: flex;
    gap: 10px;
}

.ob-autofill-row input {
    flex: 1;
    height: 46px;
    padding: 0 14px;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    font-size: 16px;
    font-family: inherit;
    color: var(--netu-ink);
    background: #fff;
}

.ob-autofill-row input:focus {
    outline: none;
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}

.ob-autofill-btn {
    height: 46px;
    padding: 0 22px;
    border: none;
    border-radius: 10px;
    background: #fff;
    color: var(--netu-seb-1);
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s;
}

.ob-autofill-btn:hover { background: rgba(255, 255, 255, 0.9); }
.ob-autofill-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ---- Field labels ---- */
.ob-field-label {
    display: block;
    font-size: 24px;
    font-weight: 800;
    color: var(--netu-ink);
    margin-bottom: 6px;
}

.ob-required {
    background: #fef2f2;
    color: #dc2626;
    font-size: 13px;
    font-weight: 500;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

.ob-optional {
    background: #f3f4f6;
    color: var(--netu-faint);
    font-size: 13px;
    font-weight: 500;
    padding: 1px 8px;
    border-radius: 999px;
    margin-left: 6px;
    vertical-align: middle;
}

/* ---- Profile name input ---- */
.ob-profile-input-wrap {
    position: relative;
}

.ob-profile-input-wrap input {
    padding-right: 40px;
}

.ob-profile-status {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
}

/* URL-segment box (Pushpak, 2026-10-14): "netu.ai/companies/" is part of the field, the member types only
   the slug. The wrapper carries the border/focus/error so prefix + input read as ONE input.
   Onboarding Profile Name + /company/manage (create, and locked on edit). */
.ob-url-input {
    display: flex;
    align-items: center;
    height: 46px;
    border: 1.5px solid var(--netu-line);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.ob-url-input:focus-within {
    border-color: var(--netu-blue);
    box-shadow: 0 0 0 3px rgba(0, 104, 184, 0.1);
}
.ob-url-prefix {
    flex-shrink: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: 0 10px 0 12px;
    background: var(--netu-surface);
    border-right: 1.5px solid var(--netu-line);
    color: var(--netu-slate);
    font-size: 15px;
    white-space: nowrap;
    user-select: none;
}
.ob-field .ob-url-input input[type="text"] {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    border-radius: 0;
    padding: 0 40px 0 10px;
    background: transparent;
}
.ob-field .ob-url-input input[type="text"]:focus { box-shadow: none; }
.ob-url-input.is-locked { background: var(--netu-surface); }
.ob-url-input.is-locked input { color: var(--netu-slate); cursor: not-allowed; }
.ob-url-input.is-locked .ob-profile-status { color: var(--netu-faint); font-size: 14px; }
@media (max-width: 400px) {
    .ob-url-prefix { font-size: 13px; padding: 0 6px 0 8px; }
}

/* ---- Industry tab toggle ---- */
.ob-tab-toggle {
    display: inline-flex;
    border: 1px solid var(--netu-primary-dark);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 6px;
}

.ob-tab {
    padding: 7px 16px;
    border: none;
    background: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    color: var(--netu-slate);
    cursor: pointer;
    transition: all .15s;
}

.ob-tab.active {
    background: var(--netu-primary-dark);
    color: #fff;
    font-weight: 600;
}

.ob-tab:not(:last-child) {
    border-right: 1px solid var(--netu-line);
}

/* Smooth tab content switch */
.ob-tab-enter { transition: opacity .2s ease; }
.ob-tab-enter-start { opacity: 0; }
.ob-tab-enter-end { opacity: 1; }
.ob-tab-leave { transition: none; }
.ob-tab-leave-start { opacity: 1; }
.ob-tab-leave-end { opacity: 0; }

/* ---- NAICS code badge ---- */
.ob-naics-code {
    display: inline-block;
    background: var(--netu-surface-bg);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--netu-blue);
    margin-right: 8px;
    font-family: monospace;
}

/* ---- Tag input row ---- */
.ob-tag-input-row {
    display: flex;
    gap: 10px;
}

.ob-tag-input-row input {
    flex: 1;
    height: 46px;
    padding: 0 14px;
    border: 1.5px solid var(--netu-line);
    border-radius: 10px;
    font-size: 16px;
    font-family: inherit;
    color: var(--netu-ink);
    background: #fff;
}

.ob-tag-input-row input:focus {
    outline: none;
    border-color: var(--netu-blue);
    box-shadow: 0 0 0 3px rgba(0, 104, 184, 0.1);
}

.ob-tag-add-btn {
    height: 46px;
    padding: 0 22px;
    border: 1.5px solid var(--netu-primary-dark);
    border-radius: 10px;
    background: #fff;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    color: var(--netu-primary-dark);
    cursor: pointer;
    transition: all .15s;
}

.ob-tag-add-btn:hover { background: var(--netu-surface-bg); }
.ob-tag-add-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- Selectable grid chips (business model, roles, service area) ---- */
.ob-select-grid {
    display: grid;
    gap: 10px;
}

.ob-select-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.ob-grid-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 5px 2px 5px 15px;
    background: #fff;
    border: 1px solid var(--netu-line);
    border-radius: 8px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    color: #1f2937;
    cursor: pointer;
    text-align: left;
    transition: all .15s;
    user-select: none;
}

.ob-grid-chip:hover {
    border-color: #cbd5e1;
}

.ob-grid-chip.disabled,
.ob-grid-chip:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.ob-grid-chip.active {
    background: var(--netu-surface-blue);
    border: 2px solid var(--netu-blue);
    color: var(--netu-blue);
    font-weight: 500;
}

.ob-grid-chip-sub {
    font-size: 14px;
    font-weight: 400;
    color: var(--netu-faint);
    margin-top: 2px;
}

.ob-grid-chip.active .ob-grid-chip-sub {
    color: var(--netu-blue);
    opacity: 0.7;
}

/* ---- Intent checkboxes (grouped) ---- */
.ob-intent-group {
    margin-bottom: 16px;
}

.ob-intent-group-label {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--netu-slate);
    margin: 0 0 8px;
}

.ob-intent-checks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.ob-intent-check {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--netu-line);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 400;
    color: #374151;
    cursor: pointer;
    transition: all .15s;
    user-select: none;
    white-space: nowrap;
}

.ob-intent-check:hover { border-color: #cbd5e1; }

.ob-intent-check.active {
    background: #fff;
    border: 2px solid var(--netu-blue);
    color: var(--netu-ink);
}

.ob-check-box {
    width: 16px;
    height: 16px;
    border: 1.75px solid #535455;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all .15s;
    font-size: 12px;
    color: #fff;
    margin-top: 1px;
}

.ob-intent-check.active .ob-check-box {
    background: var(--netu-blue);
    border-color: var(--netu-blue);
}

/* ---- Location input with icon ---- */
/* ---- Map embed ---- */
.ob-map-embed {
    position: relative;
    width: 100%;
    height: 300px;
    border-radius: 12px;
    margin-top: 12px;
    border: 1px solid var(--netu-line);
    overflow: hidden;
    cursor: crosshair;
}

.ob-map-search {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
    padding: 0 12px;
    width: min(340px, calc(100% - 20px));
}

.ob-map-search i {
    color: var(--netu-muted, #888);
    font-size: 14px;
    flex-shrink: 0;
}

.ob-map-search input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    padding: 10px 0;
    width: 100%;
}

.ob-map-search input::placeholder {
    color: var(--netu-muted, #aaa);
}

/* ---- Side-by-side fields ---- */
.ob-field-row {
    display: flex;
    gap: 16px;
}

.ob-field-half {
    flex: 1;
}

/* ---- Drafted section (logo, descriptions) ---- */
.ob-drafted-section {
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid var(--netu-line);
}

.ob-drafted-header {
    font-size: 16px;
    color: var(--netu-slate);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ob-drafted-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

.ob-drafted-actions .ob-edit-link {
    margin: 0;
}

.ob-drafted-actions .ob-edit-link + .ob-edit-link::before {
    content: "|";
    margin-right: 4px;
    color: var(--netu-faint, #ccc);
    font-weight: 400;
}

.ob-generate-link {
    color: var(--netu-primary, #4f46e5) !important;
}

.ob-generate-link:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ob-generate-link i {
    font-size: 11px;
}

.ob-drafted-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ob-drafted-card {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--netu-surface-bg);
    border: 1px solid var(--netu-line);
    border-radius: 12px;
}

.ob-drafted-card-full {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--netu-home-bg);
    border: 1px solid var(--netu-line);
    border-radius: 12px;
}

.ob-drafted-card-icon {
    width: 40px;
    height: 40px;
    background: var(--netu-line);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
    color: var(--netu-slate);
}

.ob-drafted-card strong {
    font-size: 16px;
    font-weight: 600;
    display: block;
    margin-bottom: 2px;
}

.ob-drafted-card p,
.ob-drafted-card-full p {
    font-size: 15px;
    color: var(--netu-faint);
    margin: 0;
    line-height: 1.4;
}

.ob-edit-link {
    background: none;
    border: none;
    color: var(--netu-blue);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-top: 4px;
}

.ob-edit-link:hover { text-decoration: underline; }

/* ---- Reusable Image Upload Component ---- */
.netu-img-upload {
    display: flex;
    gap: 12px;
    align-items: center;
}

.netu-img-upload-area {
    flex-shrink: 0;
    cursor: pointer;
    overflow: hidden;
    border: 2px dashed var(--netu-line);
    transition: border-color .15s;
}

.netu-img-upload-area:hover {
    border-color: var(--netu-blue);
}

/* Logo variant: square */
.netu-img-upload--logo .netu-img-upload-area {
    width: 72px;
    height: 72px;
    border-radius: 12px;
}

/* Banner variant: the 4:1 banner contract (2026-08-26; reaffirmed 2026-09-29 after same-day 3:1 and
   2.4:1 trials were both discarded) — the SAME ratio as the locked crop box and every hero container,
   so this preview shows exactly what the public page will show. Never a fixed height: a fixed-height
   strip cover-crops the image at whatever ratio the column happens to be. */
.netu-img-upload--banner .netu-img-upload-area {
    width: 100%;
    aspect-ratio: 4 / 1;
    border-radius: 12px;
}

.netu-img-upload--banner {
    flex-direction: column;
    align-items: stretch;
}

/* The RENDER side of the 4:1 banner contract (2026-08-26): in-page banners (offer walls, members-pricing)
   use this instead of ad-hoc inline max-heights, so the page shows the crop the uploader drew. */
.netu-banner-4x1 {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 1;
    object-fit: cover;
}

.netu-img-preview-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

.netu-img-preview-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.netu-img-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .15s;
    color: #fff;
    font-size: 18px;
}

.netu-img-upload-area:hover .netu-img-overlay {
    opacity: 1;
}

.netu-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--netu-faint);
    font-size: 11px;
    font-weight: 500;
}

.netu-img-placeholder i {
    font-size: 22px;
}

.netu-img-upload-info {
    flex: 1;
    min-width: 0;
}

.netu-img-upload-info strong {
    font-size: 16px;
    font-weight: 600;
    display: block;
    margin-bottom: 2px;
}

.netu-img-upload-info p {
    font-size: 15px;
    color: var(--netu-faint);
    margin: 0;
    line-height: 1.4;
}

.netu-img-upload-actions {
    display: flex;
    gap: 12px;
    margin-top: 4px;
}

.netu-img-upload-btn {
    background: none;
    border: none;
    color: var(--netu-blue);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.netu-img-upload-btn:hover {
    text-decoration: underline;
}

.netu-img-upload-remove {
    color: var(--netu-faint) !important;
}

.netu-img-upload-remove:hover {
    color: var(--bs-danger) !important;
}

/* ---- Live Booth Preview (sticky sidebar) ---- */
.ob-booth-preview-col {
    position: sticky;
    top: 80px;
}

.ob-booth-preview-card {
    border: 1px solid var(--netu-line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.ob-booth-preview-badge {
    background: linear-gradient(120deg, var(--netu-seb-1) 0%, var(--netu-seb-2) 58%, var(--netu-red) 130%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 8px 12px 0;
}

.ob-booth-preview-url {
    background: linear-gradient(120deg, var(--netu-seb-1) 0%, var(--netu-seb-2) 58%, var(--netu-red) 130%);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    padding: 4px 12px 10px;
    margin-top: -1px;
}

.ob-booth-preview-banner {
    width: 100%;
    /* 4:1 banner contract (2026-08-26) — the mock preview shows the same crop the real booth will. */
    aspect-ratio: 4 / 1;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    margin-top: -8px;
}

.ob-booth-preview-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ob-booth-preview-body {
    padding: 20px 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.ob-booth-preview-logo {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--netu-surface-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ob-booth-preview-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ob-booth-preview-initials {
    font-size: 20px;
    font-weight: 800;
    color: var(--netu-faint);
}

.ob-booth-preview-info strong {
    font-size: 16px;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
    color: var(--netu-ink);
}

.ob-booth-preview-handle {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--netu-blue);
    margin-bottom: 2px;
}

.ob-booth-preview-location {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--netu-faint);
    margin-bottom: 6px;
}

.ob-booth-preview-location i {
    font-size: 12px;
}

.ob-booth-preview-info p {
    font-size: 14px;
    color: #4b5563;
    margin: 0;
    line-height: 1.5;
}

/* ---- Stepper: completed step ---- */
.ob-stepper-step.completed {
    color: var(--netu-blue);
    font-weight: 500;
}

.ob-stepper-step.completed .ob-stepper-circle {
    background: var(--netu-blue);
    color: #fff;
    border-color: var(--netu-blue);
}

/* ---- Info banner (gradient — Sebastian style) ---- */
.ob-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 20px;
    background: linear-gradient(120deg, var(--netu-seb-1) 0%, var(--netu-seb-2) 58%, var(--netu-red) 130%);
    border: none;
    border-radius: 12px;
    font-size: 15px;
    color: #fff;
    margin-bottom: 24px;
    line-height: 1.5;
}

.ob-info-banner i {
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Dashed variant — subtle, no gradient */
.ob-info-banner--dashed {
    background: #f8fafc;
    border: 1px dashed var(--netu-line);
    color: var(--netu-ink);
}

.ob-info-banner--dashed i {
    color: var(--netu-green, #16a34a);
}

/* ---- Skip link ---- */
.ob-skip-link {
    text-align: center;
    margin-top: 16px;
    padding-bottom: 24px;
}

.ob-skip-link a {
    font-size: 14px;
    color: var(--netu-faint);
    text-decoration: none;
    transition: color .15s;
}

.ob-skip-link a:hover {
    color: var(--netu-blue);
    text-decoration: underline;
}

/* ---- Affiliate: Earning path cards ---- */
.ob-earning-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ob-earning-card {
    background: var(--netu-bg);
    border: 2px solid var(--netu-line);
    border-radius: 12px;
    padding: 16px;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, background .2s;
}

.ob-earning-card:hover {
    border-color: var(--netu-blue);
    box-shadow: 0 2px 8px rgba(59, 130, 246, .08);
}

.ob-earning-card.active {
    border-color: var(--netu-blue);
    background: var(--netu-blue-light, #eff6ff);
    box-shadow: 0 2px 8px rgba(59, 130, 246, .1);
}

.ob-earning-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.ob-earning-card-header strong {
    font-size: 15px;
}

.ob-earning-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.ob-earning-badge.green {
    background: #dcfce7;
    color: #15803d;
}

.ob-earning-badge.gray {
    background: #f3f4f6;
    color: #6b7280;
}

.ob-earning-card p {
    font-size: 13px;
    color: var(--netu-faint);
    margin: 0;
    line-height: 1.5;
}

/* ---- Affiliate: Platform pills ---- */
.ob-platform-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.ob-platform-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1.5px solid var(--netu-border, #e2e8f0);
    background: #fff;
    color: var(--netu-text, #1e293b);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.ob-platform-pill:hover {
    border-color: var(--netu-slate, #94a3b8);
    background: var(--netu-bg-hover, #f8fafc);
}
.ob-platform-pill.active {
    color: #fff;
    border-color: transparent;
}
.ob-platform-pill.active:hover {
    opacity: 0.9;
    background: inherit;
}
.ob-platform-icon {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
.ob-platform-icon svg {
    flex-shrink: 0;
}

/* ---- Affiliate: Follower band rows ---- */
.ob-follower-band-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--netu-line);
}

.ob-follower-band-row:last-child {
    border-bottom: none;
}

.ob-follower-platform {
    font-weight: 600;
    font-size: 14px;
    min-width: 100px;
}

.ob-follower-select {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--netu-line);
    border-radius: 8px;
    font-size: 14px;
    background: var(--netu-bg);
    cursor: pointer;
    transition: border-color .15s;
}

.ob-follower-select:focus {
    border-color: var(--netu-blue);
    outline: none;
}

/* ---- Step 4: Completion icon ---- */
.ob-complete-icon {
    margin-bottom: 16px;
}

/* ---- 2-column grid ---- */
.ob-select-grid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* ---- Responsive: Onboarding ---- */
@media (max-width: 575.98px) {
    .ob-persona-cards {
        grid-template-columns: 1fr;
    }
    .ob-step-page {
        max-width: 100%;
    }
    .ob-pcard {
        padding: 20px 18px;
    }
    .ob-form-actions {
        flex-direction: column-reverse;
        gap: 12px;
    }
    .ob-form-actions .ob-continue-btn {
        width: 100%;
    }
}

@media (max-width: 991.98px) {
    .ob-booth-layout {
        grid-template-columns: 1fr;
    }
    .ob-booth-preview-col {
        position: static;
        order: -1;
    }
    /* Mobile: show only the active step — hide the rest (no overlap, no scroll) */
    .ob-stepper {
        margin-bottom: 20px;
        justify-content: center;
        overflow: visible;
    }
    .ob-stepper > .ob-stepper-step:not(.active),
    .ob-stepper > .ob-stepper-line {
        display: none !important;
    }
}

@media (max-width: 575.98px) {
    .ob-booth-page {
        max-width: 100%;
    }
    .ob-booth-form-col {
        padding: 24px 18px 22px;
        border-radius: 12px;
    }
    .ob-select-grid.cols-3 {
        grid-template-columns: 1fr 1fr;
    }
    .ob-intent-checks {
        grid-template-columns: 1fr;
    }
    .ob-drafted-cards {
        grid-template-columns: 1fr;
    }
    .ob-field-row {
        flex-direction: column;
        gap: 0;
    }
    .ob-autofill-row {
        flex-direction: column;
    }
}

/* -----------------------------------------------------------------------------
   Homepage — Responsive
   ----------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .netu-home .who-grid .pcard {
        width: 100%;
    }

    .netu-home .why-grid {
        flex-direction: column;
    }

    .netu-home .seb-inner {
        flex-direction: column;
        text-align: center;
        padding: 48px 24px;
    }

    .netu-home .mon-grid {
        flex-direction: column;
        gap: 32px;
    }

    .netu-home .jcard {
        width: calc(50% - 11px);
    }

    .netu-footer-row {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .netu-footer-links {
        justify-content: center;
    }

    /* Hero type scaled down for phones (Pushpak, 2026-08-09): smaller eyebrow/h1/sub, tighter tracking,
       and the desktop-tuned <br> line breaks are dropped so lines wrap naturally at this width. */
    .netu-home .eyebrow {
        font-size: 11px;
        letter-spacing: 1.6px;
        margin-bottom: 14px;
    }

    .netu-home .hero-center {
        max-width: 95%;
        margin: 0 auto;
        padding: 0 15px;
    }

    .netu-home .hero h1 {
        font-size: 30px;
        letter-spacing: 0.3px;
        line-height: 1.25;
        margin-bottom: 16px;
    }

    .netu-home .hero .sub {
        font-size: 15px;
        margin-bottom: 22px;
    }

    .netu-home .hero h1 br{
        display: none;
    }
}

@media (max-width: 575.98px) {
    .hp-wrap,
    .hp-narrow,
    .netu-home .hero-center,
    .netu-home .steps,
    .netu-home .demo-frame,
    .netu-home .seb-inner {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Hero type scaled down for phones (Pushpak, 2026-08-09): smaller eyebrow/h1/sub, tighter tracking,
       and the desktop-tuned <br> line breaks are dropped so lines wrap naturally at this width. */
    .netu-home .eyebrow {
        font-size: 11px;
        letter-spacing: 1.6px;
        margin-bottom: 14px;
    }

    .netu-home .hero-center {
        max-width: 95%;
        margin: 0 auto;
        padding: 0 5px;
    }

    .netu-home .hero h1 {
        font-size: 28px;
        letter-spacing: 0.3px;
        line-height: 1.25;
        margin-bottom: 16px;
    }

    .netu-home .hero .sub {
        font-size: 15px;
        margin-bottom: 22px;
    }

    .netu-home .hero h1 br {
        display: none;
    }

    .netu-home .hp-head {
        font-size: 26px;
    }

    .netu-home .demo-stage {
        min-height: 200px;
    }

    .netu-home .jcard {
        width: 100%;
    }

    .netu-home .step {
        flex-direction: column;
        gap: 16px;
    }

    .netu-footer-row {
        padding: 0 20px;
    }
}

/* =============================================================================
   Admin Panel
   ============================================================================= */


/* Stat icon circle */
.admin-stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

/* Quick action cards */
.admin-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 1rem;
    border: 1px solid var(--netu-line);
    border-radius: 0.5rem;
    text-decoration: none;
    color: var(--netu-ink);
    transition: all 0.2s ease;
}

.admin-action-card:hover {
    border-color: var(--netu-blue);
    background: var(--netu-surface-blue);
    color: var(--netu-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.admin-action-card i {
    font-size: 1.5rem;
}

.admin-action-card span {
    font-size: 0.875rem;
    font-weight: 500;
}

/* User avatar in table */
.admin-user-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.admin-user-avatar img {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.admin-user-initials {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--netu-surface-blue);
    color: var(--netu-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Large avatar for user detail page */
.admin-user-avatar-lg {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}

.admin-user-avatar-lg img {
    width: 64px;
    height: 64px;
    object-fit: cover;
}

.admin-user-initials-lg {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--netu-surface-blue);
    color: var(--netu-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   Admin Data Trace
   ----------------------------------------------------------------------------- */

.trace-kv-table td {
    padding: 0.35rem 0.75rem;
    vertical-align: top;
}

.trace-chevron {
    display: inline-block;
    transition: transform 0.2s ease;
    font-size: 0.75rem;
}

.trace-chevron-open {
    transform: rotate(90deg);
}

.trace-collapse-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.trace-collapse-open {
    max-height: 5000px;
}

.trace-row-detail {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.trace-row-detail-open {
    max-height: 5000px;
}

.trace-row-header:hover {
    background-color: var(--bs-light);
}

.trace-row-item {
    border-bottom: 1px solid var(--bs-border-color);
}

.trace-row-item:last-child {
    border-bottom: none;
}

.trace-child-card {
    transition: box-shadow 0.2s ease;
}

.trace-child-card:hover {
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.08) !important;
}

.trace-nested-card .card-header {
    background: var(--bs-gray-100);
    font-size: 0.85rem;
}

/* -----------------------------------------------------------------------------
   Account Switcher (Multi-Account)
   ----------------------------------------------------------------------------- */
.account-switcher-menu {
    min-width: 360px;
    /* The menu outgrew short screens (12 nav items + the linked-accounts switcher) and the overflow was
       just clipped — Log Out and Switch Account unreachable. Cap it to the viewport below the topbar and
       scroll INSIDE the menu (2026-08-27). overscroll-behavior keeps the wheel from grabbing the page
       behind once the list bottoms out. */
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ⛔ ENHANCED avatar menu (Pushpak, 2026-08-27) — the asm-* block. Identity card + icons + rounded hover.
   Revert = delete THIS block and restore the flat <li> list in topbar.html (comment there). */
.account-switcher-menu {
    padding: 8px;
    border: 1px solid var(--netu-line);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(12, 27, 42, .16);
}
.account-switcher-menu.show { animation: asm-in .16s ease; }
@keyframes asm-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}
/* The identity card: who you are, on your plan, one click from your public profile. */
.asm-head {
    margin: 0 0 6px;
    padding: 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--netu-blue-tint) 0%, #fff 78%);
    border: 1px solid var(--netu-line);
}
.asm-head-link { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.asm-head-avatar {
    width: 44px; height: 44px; min-width: 44px; border-radius: 50%;
    background: var(--netu-surface-blue); color: var(--netu-blue);
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700; text-transform: uppercase;
    border: 2px solid #fff; box-shadow: 0 2px 8px rgba(12, 27, 42, .14);
}
.asm-head-avatar-img { object-fit: cover; }
.asm-head-name {
    font-weight: 700; font-size: .92rem; color: var(--netu-ink, #1b2733);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.asm-head-email {
    font-size: .74rem; color: var(--netu-slate, #55606b);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.asm-plan-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.asm-plan-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 10px; border-radius: 999px;
    background: #fff; border: 1px solid var(--netu-line);
    font-size: .72rem; font-weight: 600; color: var(--netu-slate, #55606b);
}
.asm-plan-pill.is-paid { color: #92600a; border-color: #f0dcae; background: #fffaf0; }
.asm-upgrade {
    font-size: .74rem; font-weight: 700; color: var(--netu-blue); text-decoration: none;
    display: inline-flex; align-items: center; gap: 4px;
}
.asm-upgrade:hover { text-decoration: underline; }

/* Items: leading icon, rounded hover, a whisper of motion — never abrupt. */
.account-switcher-menu .asm-item {
    display: flex; align-items: center; gap: 10px;
    padding: .48rem .65rem; border-radius: 10px;
    font-size: .875rem;
    transition: background .12s ease, transform .12s ease;
}
.account-switcher-menu .asm-item i {
    width: 18px; text-align: center; font-size: .95rem;
    color: var(--netu-slate, #8a94a0);
    transition: color .12s ease;
}
.account-switcher-menu .asm-item:hover,
.account-switcher-menu .asm-item:focus-visible {
    background: var(--netu-blue-tint);
    color: var(--netu-blue);
    transform: translateX(2px);
}
.account-switcher-menu .asm-item:hover i { color: var(--netu-blue); }
.account-switcher-menu .dropdown-divider { margin: .45rem .25rem; opacity: .6; }

/* The registry nav inside the drawer (2026-10-11): same sections as the sidebar, folding like it too —
   unfolded made the drawer too tall. The toggle is a full-width asm-item with a trailing chevron. */
.account-switcher-menu .asm-group-toggle { width: 100%; text-align: left; }
.asm-chevron {
    margin-left: auto;
    font-size: 11px;
    color: var(--netu-slate, #8a94a0);
}
.account-switcher-menu .asm-subitem { padding-left: 38px; font-size: .84rem; }
.asm-nav-badge {
    margin-left: auto;
    font-size: 11px; font-weight: 700;
    padding: 1px 8px; border-radius: 999px;
    background: var(--netu-blue-tint); color: var(--netu-blue);
}

/* Logout: the one destructive act reads as one. */
.account-switcher-menu .txt-logout { color: #b42318; }
.account-switcher-menu .txt-logout i { color: #b42318; }
.account-switcher-menu .txt-logout:hover,
.account-switcher-menu .txt-logout:focus-visible {
    background: var(--netu-red-tint, #fdecea); color: #b42318; transform: translateX(2px);
}

/* Switch-account rows pick up the same rounded hover. */
.account-switcher-menu .account-switch-item .dropdown-item {
    border-radius: 10px;
    transition: background .12s ease;
}
.account-switcher-menu .account-switch-item .dropdown-item:hover { background: var(--netu-blue-tint); }

.account-avatar-sm {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: var(--netu-surface-blue);
    color: var(--netu-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.account-avatar-sm-img {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.account-switch-item {
    position: relative;
}

.account-switch-item .dropdown-item {
    padding-right: 2rem;
}

.account-switch-item .dropdown-item:hover {
    background-color: var(--netu-surface);
}

.account-remove-form {
    padding-right: 0.5rem;
    flex-shrink: 0;
}

.account-remove-btn {
    opacity: 0;
    transition: opacity 0.2s ease;
    line-height: 1;
}

.account-switch-item:hover .account-remove-btn {
    opacity: 0.5;
}

.account-remove-btn:hover {
    opacity: 1 !important;
    color: var(--netu-red) !important;
}

/* -----------------------------------------------------------------------------
   Quill Rich Text Editor — NetU overrides (matches v4 HtmlWordLimit)
   ----------------------------------------------------------------------------- */

.netu-rich-editor .ql-toolbar {
    border: 1px solid var(--netu-line);
    border-radius: 10px 10px 0 0;
    background: var(--netu-surface-bg);
    padding: 8px 12px;
}

.netu-rich-editor .ql-toolbar .ql-formats {
    margin-right: 10px;
}

.netu-rich-editor .ql-container {
    border: 1px solid var(--netu-line);
    border-top: none;
    border-radius: 0 0 10px 10px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
}

.netu-rich-editor .ql-editor {
    min-height: 150px;
    max-height: 500px;
    overflow-y: auto;
    line-height: 1.6;
    color: var(--netu-text);
    padding: 12px 16px;
}

.netu-rich-editor .ql-editor.ql-blank::before {
    color: var(--netu-faint);
    font-style: normal;
    padding-left: 0;
}

/* Toolbar icon colors */
.netu-rich-editor .ql-snow .ql-stroke {
    stroke: var(--netu-slate);
}

.netu-rich-editor .ql-snow .ql-fill {
    fill: var(--netu-slate);
}

.netu-rich-editor .ql-snow .ql-picker-label {
    color: var(--netu-slate);
}

.netu-rich-editor .ql-snow .ql-picker-options {
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    border: 1px solid var(--netu-line);
}

/* Active / hover states */
.netu-rich-editor .ql-snow button:hover .ql-stroke,
.netu-rich-editor .ql-snow button.ql-active .ql-stroke,
.netu-rich-editor .ql-snow .ql-picker-label:hover .ql-stroke,
.netu-rich-editor .ql-snow .ql-picker-label.ql-active .ql-stroke {
    stroke: var(--netu-primary, #4f46e5);
}

.netu-rich-editor .ql-snow button:hover .ql-fill,
.netu-rich-editor .ql-snow button.ql-active .ql-fill,
.netu-rich-editor .ql-snow .ql-picker-label:hover .ql-fill,
.netu-rich-editor .ql-snow .ql-picker-label.ql-active .ql-fill {
    fill: var(--netu-primary, #4f46e5);
}

.netu-rich-editor .ql-snow .ql-picker-label:hover,
.netu-rich-editor .ql-snow .ql-picker-label.ql-active {
    color: var(--netu-primary, #4f46e5);
}

/* Size picker labels */
.netu-rich-editor .ql-snow .ql-picker.ql-size .ql-picker-label::before,
.netu-rich-editor .ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: 'Normal';
}
.netu-rich-editor .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.netu-rich-editor .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
    content: 'Small';
}
.netu-rich-editor .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.netu-rich-editor .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
    content: 'Large';
}
.netu-rich-editor .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.netu-rich-editor .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
    content: 'Huge';
}

/* Embedded media */
.netu-rich-editor .ql-editor img {
    max-width: 40% !important;
    height: auto;
    border-radius: 8px;
    margin: 8px 0;
}

.netu-rich-editor .ql-editor iframe {
    max-width: 100%;
    border-radius: 8px;
    margin: 8px 0;
}

/* Word count */
.netu-rich-editor .ql-word-count {
    text-align: right;
    font-size: 12px;
    color: var(--netu-faint);
    padding: 4px 12px;
    margin: 0;
}

/* -----------------------------------------------------------------------------
   Legal Pages (Terms, Privacy)
   ----------------------------------------------------------------------------- */
/* Legal hero — the locked gradient too (Pushpak, 2026-07-13). A terms page is still a page somebody
   arrives on from an email footer, and it should look like the same company. */
.netu-legal .legal-hero {
    text-align: center;
    padding: 64px 0 42px;
    background: var(--netu-hero-bg);
    border-bottom: 1px solid var(--netu-line);
}

.netu-legal .legal-eyebrow {
    display: inline-block;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--netu-blue);
}

.netu-legal .legal-hero h1 {
    font-size: 48px;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: 1.2px;
    margin: 14px auto 12px;
    color: var(--netu-ink);
}

.netu-legal .legal-updated {
    font-size: 15px;
    color: var(--netu-slate);
    margin: 0;
}

.netu-legal .legal-body {
    padding: 24px 0 80px;
}

.netu-legal .legal-intro {
    background: var(--netu-surface);
    border: 1px solid var(--netu-line);
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 40px;
}

.netu-legal .legal-intro p {
    margin: 0 0 6px;
    font-size: 15px;
    color: var(--netu-slate);
}

.netu-legal .legal-intro p:last-child {
    margin-bottom: 0;
}

.netu-legal .legal-section {
    margin-bottom: 36px;
}

.netu-legal .legal-section h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--netu-ink);
    margin: 0 0 14px;
    letter-spacing: 0.3px;
}

.netu-legal .legal-section h3 {
    font-size: 17px;
    font-weight: 600;
    color: var(--netu-ink);
    margin: 20px 0 10px;
}

.netu-legal .legal-section p {
    font-size: 15.5px;
    line-height: 1.72;
    color: var(--netu-slate);
    margin: 0 0 12px;
}

.netu-legal .legal-section ul {
    padding-left: 22px;
    margin: 0 0 12px;
}

.netu-legal .legal-section li {
    font-size: 15.5px;
    line-height: 1.72;
    color: var(--netu-slate);
    margin-bottom: 4px;
}

.netu-legal .legal-section a {
    color: var(--netu-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.netu-legal .legal-section a:hover {
    color: var(--netu-primary);
}

@media (max-width: 768px) {
    .netu-legal .legal-hero { padding: 40px 0 20px; }
    .netu-legal .legal-hero h1 { font-size: 32px; }
    .netu-legal .legal-body { padding: 16px 0 56px; }
    .netu-legal .legal-intro { padding: 18px 20px; }
}

/* ---- Onboarding Description Modal ---- */
.ob-desc-modal {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: netuFadeIn .15s ease;
}

.ob-desc-modal-dialog {
    background: #fff;
    border-radius: 16px;
    width: 560px;
    max-width: 100%;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
    animation: netuSlideUp .2s ease;
    display: flex;
    flex-direction: column;
}

.ob-desc-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--netu-line);
}

.ob-desc-modal-header h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.ob-desc-modal-close {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--netu-slate);
    cursor: pointer;
    padding: 4px;
}

.ob-desc-modal-close:hover {
    color: var(--netu-charcoal);
}

.ob-desc-modal-body {
    padding: 20px;
    overflow-y: auto;
}

.ob-desc-modal-body textarea {
    width: 100%;
    border: 1px solid var(--netu-line);
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
    resize: vertical;
    min-height: 120px;
    transition: border-color .15s ease;
}

.ob-desc-modal-body textarea:focus {
    outline: none;
    border-color: var(--netu-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.ob-desc-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid var(--netu-line);
}

.ob-desc-modal-footer .ob-char-count {
    margin-right: auto;
}

@media (max-width: 576px) {
    .ob-desc-modal-dialog {
        width: 100%;
        max-height: 85vh;
        border-radius: 12px;
    }
}

/* ---- Rich Editor Media Picker ---- */
.netu-media-picker-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--netu-line);
    margin-bottom: 16px;
}

.netu-media-tab {
    flex: 1;
    padding: 10px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 14px;
    font-weight: 500;
    color: var(--netu-slate);
    cursor: pointer;
    transition: all .15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.netu-media-tab:hover {
    color: var(--netu-charcoal);
}

.netu-media-tab.active {
    color: var(--netu-blue);
    border-bottom-color: var(--netu-blue);
}

.netu-media-dropzone {
    border: 2px dashed var(--netu-line);
    border-radius: 12px;
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: all .15s ease;
}

.netu-media-dropzone:hover,
.netu-media-dropzone.dragover {
    border-color: var(--netu-blue);
    background: rgba(59, 130, 246, 0.04);
}

.netu-media-dropzone p {
    margin: 6px 0 0;
    font-size: 14px;
}

.netu-media-uploading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 24px;
    justify-content: center;
    font-size: 14px;
    color: var(--netu-slate);
}

.netu-media-url-input {
    width: 100%;
    border: 1px solid var(--netu-line);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    transition: border-color .15s ease;
}

.netu-media-url-input:focus {
    outline: none;
    border-color: var(--netu-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* =============================================================================
   Member Pages — Dashboard / To-Do / Timeline
   All colors come from the :root --netu-* tokens (design lock).
   Mobile-first: single column, right panel stacks below main.
   ============================================================================= */

/* ---- Shared page scaffolding ---- */
.mp-wrap {
    max-width: 1240px;
    margin: 0 auto;
}

.mp-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.mp-title {
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    color: var(--netu-ink);
    margin: 0;
}

.mp-sub {
    color: var(--netu-slate);
    font-size: 0.95rem;
    margin: 4px 0 0;
}

.mp-sub b { color: var(--netu-ink); }

.mp-sec-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 26px 0 12px;
}

.mp-sec-h {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: var(--netu-ink);
    margin: 0;
}

.mp-sec-link {
    color: var(--netu-blue);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    white-space: nowrap;
}
.mp-sec-link:hover { text-decoration: underline; color: var(--netu-blue-dark); }

.mp-card {
    background: #fff;
    border: 1px solid var(--netu-line);
    border-radius: 16px;
    box-shadow: var(--netu-card-shadow);
}

/* Dashboard main column (the shell provides sidebar and right rail) */

/* ---- Sebastian hero ---- */
.seb-hero {
    border-radius: 16px;
    padding: 1.5px;
    background: linear-gradient(135deg, var(--netu-seb-1), var(--netu-seb-2));
    margin-top: 16px;
}

.seb-hero {
    box-shadow: 0 8px 28px rgba(83, 74, 183, 0.14);
}

.seb-hero-inner {
    background: linear-gradient(135deg, #fff 55%, var(--netu-seb-tint));
    border-radius: 15px;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.seb-hero-left { flex: 1 1 320px; min-width: 0; }

.seb-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--netu-seb-1);
}

.seb-badge-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: linear-gradient(135deg, var(--netu-seb-1), var(--netu-seb-2));
}

.seb-hero-title {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--netu-ink);
    margin: 6px 0 0;
}

.seb-hero-desc {
    color: var(--netu-slate);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 5px 0 0;
    max-width: 560px;
}

.seb-hero-prompt {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--netu-surface);
    border: 1px solid var(--netu-line);
    border-radius: 11px;
    padding: 11px 14px;
    margin-top: 12px;
    font-size: 0.88rem;
    color: var(--netu-ink);
}

.seb-hero-prompt i { color: var(--netu-seb-1); }

.seb-hero-prompt-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--netu-faint);
    margin-bottom: 2px;
}

.seb-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--netu-seb-1), var(--netu-seb-2));
    color: #fff;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.seb-hero-cta:hover { color: #fff; opacity: 0.92; transform: translateY(-1px); }

/* ---- Setup stepper ---- */
.dash-stepper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (min-width: 1200px) {
    .dash-stepper { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.dash-step {
    background: #fff;
    border: 1px solid var(--netu-line);
    border-radius: 16px;
    padding: 15px 14px 0;
    display: flex;
    flex-direction: column;
    min-height: 132px;
    text-decoration: none;
    box-shadow: var(--netu-card-shadow);
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.dash-step:hover {
    box-shadow: var(--netu-card-shadow-hover);
    border-color: color-mix(in srgb, var(--netu-blue) 35%, #fff);
    transform: translateY(-2px);
}

.dash-step-circ {
    width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 11px;
    font-size: 1.05rem;
}
.dash-step-circ.done { background: #E6F7EE; color: #16a34a; }
.dash-step-circ.now { background: var(--netu-blue); color: #fff; box-shadow: 0 4px 12px rgba(0, 104, 184, 0.3); }
.dash-step-circ.todo { background: var(--netu-surface); color: var(--netu-faint); }

.dash-step-title { font-weight: 600; font-size: 0.88rem; color: var(--netu-ink); }
.dash-step-sub { color: var(--netu-faint); font-size: 0.76rem; line-height: 1.4; margin-top: 3px; flex: 1; }

.dash-step-chip {
    margin: 12px -14px 0;
    padding: 8px 14px;
    border-top: 1px solid var(--netu-line);
    font-size: 0.74rem;
    font-weight: 600;
}
.dash-step-chip.done { color: var(--netu-slate); }
.dash-step-chip.now { color: var(--netu-blue); }
.dash-step-chip.todo { color: var(--netu-faint); }

/* ---- Quick actions ---- */
.dash-qa { display: flex; gap: 10px; flex-wrap: wrap; }

.dash-qa-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 18px;
    border-radius: 11px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: all 0.15s ease;
    cursor: pointer;
}
.dash-qa-btn.primary {
    background: var(--netu-blue);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 104, 184, 0.3);
}
.dash-qa-btn.primary:hover { background: var(--netu-blue-dark); color: #fff; transform: translateY(-1px); }
.dash-qa-btn.secondary {
    background: #fff;
    color: var(--netu-blue);
    border-color: color-mix(in srgb, var(--netu-blue) 25%, #fff);
    box-shadow: var(--netu-card-shadow);
}
.dash-qa-btn.secondary:hover { background: var(--netu-blue-tint); color: var(--netu-blue-dark); transform: translateY(-1px); }

/* ---- Stats ---- */
.dash-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (min-width: 1200px) {
    .dash-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.dash-stat {
    background: #fff;
    border: 1px solid var(--netu-line);
    border-radius: 16px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 13px;
    box-shadow: var(--netu-card-shadow);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.dash-stat:hover { box-shadow: var(--netu-card-shadow-hover); transform: translateY(-2px); }

.dash-stat-ic {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    font-size: 1.1rem;
}
.dash-stat-ic.blue { background: var(--netu-blue-tint); color: var(--netu-blue); }
.dash-stat-ic.amber { background: var(--netu-amber-tint); color: var(--netu-warning); }
.dash-stat-ic.purple { background: var(--netu-seb-tint); color: var(--netu-seb-1); }
.dash-stat-ic.red { background: var(--netu-red-tint); color: var(--netu-red); }

.dash-stat-num { font-size: 1.35rem; font-weight: 700; letter-spacing: 0.4px; line-height: 1.1; color: var(--netu-ink); }
.dash-stat-label { color: var(--netu-slate); font-size: 0.78rem; margin-top: 2px; }

/* ---- Recent activity ---- */
.dash-act-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--netu-line);
}
.dash-act-row:last-child { border-bottom: none; }

.dash-act-ic {
    width: 34px; height: 34px; border-radius: 9px;
    background: var(--netu-surface-blue); color: var(--netu-blue);
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    font-size: 0.85rem;
}

.dash-act-text { flex: 1; min-width: 0; font-size: 0.88rem; color: var(--netu-ink); }

.dash-act-badge {
    font-size: 0.7rem; font-weight: 700;
    color: var(--netu-warning);
    background: rgba(228, 160, 35, 0.14);
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
}

.dash-act-time { color: var(--netu-faint); font-size: 0.76rem; white-space: nowrap; }

/* ---- Right panel ---- */
.rp-card {
    background: #fff;
    border: 1px solid var(--netu-line);
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 14px;
    box-shadow: var(--netu-card-shadow);
}

/* Score card — gradient brand statement, not another white box */
.rp-card-score {
    background: linear-gradient(135deg, var(--netu-blue-dark), var(--netu-blue) 55%,
                color-mix(in srgb, var(--netu-blue) 72%, #fff));
    border: none;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 104, 184, 0.32);
}

.rp-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--netu-faint);
    margin-bottom: 12px;
}
.rp-card-score .rp-title { color: rgba(255, 255, 255, 0.75); }

/* Pending-action row icon (timeline rail "Needs your attention") */
.rp-pa-ic {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 9px;
    background: var(--netu-blue-tint);
    color: var(--netu-blue);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.9rem;
}

.rp-score-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.rp-score-num { font-size: 1.85rem; font-weight: 800; letter-spacing: 0.5px; color: var(--netu-ink); line-height: 1; }
.rp-score-label { font-size: 0.76rem; color: var(--netu-slate); margin-top: 3px; }
.rp-card-score .rp-score-num { color: #fff; }
.rp-card-score .rp-score-label { color: rgba(255, 255, 255, 0.85); }

.rp-tag-pub {
    font-size: 0.62rem; font-weight: 700;
    color: var(--netu-blue); background: var(--netu-surface-blue);
    border-radius: 999px; padding: 2px 8px;
    vertical-align: middle;
}
.rp-card-score .rp-tag-pub { background: rgba(255, 255, 255, 0.22); color: #fff; }

.rp-bar {
    height: 8px;
    background: var(--netu-surface);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 10px;
}
.rp-bar span {
    display: block; height: 100%;
    background: var(--netu-blue);
    border-radius: 999px;
    transition: width 0.6s ease;
}
.rp-card-score .rp-bar { background: rgba(255, 255, 255, 0.25); }
.rp-card-score .rp-bar span { background: #fff; }

.rp-hint { color: var(--netu-faint); font-size: 0.76rem; margin-top: 8px; line-height: 1.45; }
.rp-card-score .rp-hint { color: rgba(255, 255, 255, 0.8); }

.rp-link {
    color: var(--netu-blue); font-weight: 600; font-size: 0.82rem;
    text-decoration: none; display: inline-flex; align-items: center; gap: 5px;
    margin-top: 10px;
}
.rp-link:hover { text-decoration: underline; color: var(--netu-blue-dark); }
.rp-card-score .rp-link { color: #fff; }
.rp-card-score .rp-link:hover { color: #fff; }

/* Quick actions inside the narrow right rail: stacked, full width */
.rp-qa {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rp-qa .dash-qa-btn {
    width: 100%;
    justify-content: flex-start;
    padding: 11px 14px;
    font-size: 0.84rem;
}

/* ---- Right-rail persona checklist ---- */
.rp-check-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.rp-check-head-text { min-width: 0; }

.rp-check-sub {
    color: var(--netu-faint);
    font-size: 0.75rem;
    line-height: 1.4;
}

/* Checklist items */
.rp-check-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rp-check-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border-radius: 10px;
    font-size: 0.8rem;
    text-decoration: none;
    color: var(--netu-ink);
    transition: background 0.15s ease, transform 0.15s ease;
}

.rp-check-circ {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
}

.rp-check-label { flex: 1; min-width: 0; line-height: 1.3; }

.rp-check-chip {
    font-size: 0.62rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 7px;
    white-space: nowrap;
    background: var(--netu-surface);
    color: var(--netu-slate);
}

/* Open (actionable) */
.rp-check-item.is-open .rp-check-circ {
    border: 2px solid var(--netu-line);
    color: transparent;
}
.rp-check-item.is-open:hover {
    background: var(--netu-blue-tint);
    color: var(--netu-ink);
    transform: translateX(2px);
}

/* Next best action — gently pulses until clicked */
.rp-check-item.is-next {
    background: var(--netu-blue-tint);
    font-weight: 600;
}
.rp-check-item.is-next .rp-check-circ {
    background: var(--netu-blue);
    border: none;
    color: #fff;
    animation: rp-next-pulse 2.2s ease-in-out infinite;
}
.rp-check-item.is-next .rp-check-chip {
    background: #fff;
    color: var(--netu-blue);
}

@keyframes rp-next-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 104, 184, 0.35); }
    50% { box-shadow: 0 0 0 6px rgba(0, 104, 184, 0); }
}

/* Done */
.rp-check-item.is-done .rp-check-circ {
    background: #E6F7EE;
    color: #16a34a;
}
.rp-check-item.is-done .rp-check-label {
    color: var(--netu-faint);
}

/* Locked (coming soon) */
.rp-check-item.is-locked {
    opacity: 0.55;
    cursor: default;
}
.rp-check-item.is-locked .rp-check-circ {
    background: var(--netu-surface);
    color: var(--netu-faint);
}

/* 100% celebration */
.rp-check-complete {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #E6F7EE;
    color: #15803d;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
}

/* Right panel invitation (empty-state) card */
.rp-invite {
    text-align: center;
    padding: 22px 16px;
}
.rp-invite i { font-size: 1.6rem; color: var(--netu-faint); display: block; margin-bottom: 8px; }
.rp-invite-t { font-weight: 600; font-size: 0.88rem; color: var(--netu-ink); }
.rp-invite-s { color: var(--netu-faint); font-size: 0.78rem; margin-top: 4px; line-height: 1.45; }

/* ---- To-Do v2: meters ---- */
.todo2-meters {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin: 18px 0 6px;
}

@media (min-width: 768px) {
    .todo2-meters { grid-template-columns: 1.3fr 1fr; }
}

.todo2-meter {
    background: #fff;
    border: 1px solid var(--netu-line);
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: var(--netu-card-shadow);
    border-top: 3px solid var(--netu-blue);
}
.todo2-meter.meter-score { border-top-color: var(--netu-warning); }

.todo2-meter-t {
    font-size: 0.8rem;
    color: var(--netu-slate);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.todo2-meter-n { font-size: 2rem; font-weight: 800; letter-spacing: 0.5px; color: var(--netu-ink); margin-top: 8px; line-height: 1; }
.todo2-meter-n small { font-size: 1rem; color: var(--netu-faint); font-weight: 600; }
.todo2-meter-s { color: var(--netu-faint); font-size: 0.76rem; margin-top: 7px; line-height: 1.45; }

/* ---- To-Do v2: expandable tasks ---- */
.todo2-sec-h {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--netu-faint);
    margin: 24px 0 0;
}
.todo2-sec-d { color: var(--netu-slate); font-size: 0.85rem; margin: 3px 0 10px; }

.todo2-list {
    background: #fff;
    border: 1px solid var(--netu-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--netu-card-shadow);
}

.todo2-task { border-bottom: 1px solid var(--netu-line); }
.todo2-task:last-child { border-bottom: none; }

.todo2-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.todo2-head:hover { background: var(--netu-surface); }

.todo2-check {
    width: 23px; height: 23px; min-width: 23px;
    border-radius: 50%;
    border: 2px solid var(--netu-line);
    display: flex; align-items: center; justify-content: center;
    color: transparent;
    font-size: 0.7rem;
    transition: all 0.2s ease;
}
.todo2-task.is-done .todo2-check {
    background: var(--netu-surface);
    border-color: var(--netu-line);
    color: var(--netu-slate);
}

.todo2-title { flex: 1; min-width: 0; font-weight: 600; font-size: 0.88rem; color: var(--netu-ink); }
.todo2-task.is-done .todo2-title { color: var(--netu-faint); }

.todo2-badges { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.todo2-pb {
    font-size: 0.68rem; font-weight: 700;
    border-radius: 999px; padding: 2px 8px;
    white-space: nowrap;
}
.todo2-pb.pct { color: var(--netu-blue); background: var(--netu-surface-blue); }
.todo2-pb.pts { color: var(--netu-warning); background: rgba(228, 160, 35, 0.14); }
.todo2-pb.rew { color: var(--netu-blue-dark); background: var(--netu-surface-blue); border: 1px solid var(--netu-line); }

.todo2-chip {
    font-size: 0.68rem; font-weight: 700;
    border-radius: 999px; padding: 2px 9px;
    white-space: nowrap;
    flex-shrink: 0;
}
.todo2-chip.done { color: var(--netu-slate); background: var(--netu-surface); }
.todo2-chip.avail { color: var(--netu-blue); background: var(--netu-surface-blue); }
.todo2-chip.recur { color: var(--netu-warning); background: rgba(228, 160, 35, 0.14); }
.todo2-chip.prog { color: var(--netu-slate); background: var(--netu-surface); }

.todo2-chev {
    color: var(--netu-faint);
    font-size: 0.8rem;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.todo2-task.open .todo2-chev { transform: rotate(90deg); }

.todo2-body {
    padding: 0 16px 15px 51px;
    color: var(--netu-slate);
    font-size: 0.85rem;
    line-height: 1.5;
}

.todo2-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    padding: 9px 16px;
    border-radius: 9px;
    background: var(--netu-blue);
    color: #fff;
    font-weight: 600;
    font-size: 0.82rem;
    text-decoration: none;
    transition: background 0.15s ease;
}
.todo2-cta:hover { background: var(--netu-blue-dark); color: #fff; }

/* On small screens hide task badges in the row head (still visible expanded via chip) */
@media (max-width: 576px) {
    .todo2-badges { display: none; }
}

/* ---- How-points-work box ---- */
.todo2-howto {
    margin-top: 22px;
    background: var(--netu-surface-blue);
    border: 1px solid var(--netu-line);
    border-radius: 13px;
    padding: 15px 17px;
    display: flex;
    gap: 12px;
}
.todo2-howto i { color: var(--netu-blue); font-size: 1.05rem; }
.todo2-howto-t { font-weight: 600; font-size: 0.88rem; color: var(--netu-ink); }
.todo2-howto-s { color: var(--netu-slate); font-size: 0.8rem; margin-top: 3px; line-height: 1.55; }
.todo2-howto-s b { color: var(--netu-ink); }

/* ---- Timeline ---- */
.tl-wrap { max-width: 680px; margin: 0 auto; }

.tl-empty {
    background: #fff;
    border: 1px solid var(--netu-line);
    border-radius: 18px;
    text-align: center;
    padding: 52px 24px;
    margin-top: 18px;
    box-shadow: var(--netu-card-shadow);
}
.tl-empty i {
    font-size: 1.5rem;
    color: var(--netu-blue);
    background: var(--netu-blue-tint);
    width: 56px; height: 56px;
    border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
}
.tl-empty-t { font-weight: 700; font-size: 1.05rem; color: var(--netu-ink); }
.tl-empty-s { color: var(--netu-slate); font-size: 0.9rem; margin: 6px auto 0; max-width: 420px; line-height: 1.5; }
.tl-empty .dash-qa-btn { margin-top: 18px; }

/* "Discover on NetU" divider — separates the network tier from the public backfill */
.tl-divider { display: flex; align-items: center; gap: 12px; margin: 28px 2px 20px; }
.tl-divider-line { flex: 1; height: 1px; background: var(--netu-line); }
.tl-divider-label {
    font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
    color: var(--netu-seb-1); white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--netu-seb-tint);
    border: 1px solid color-mix(in srgb, var(--netu-seb-1) 15%, #fff);
    padding: 5px 12px; border-radius: 999px;
}
.tl-divider-label i { color: var(--netu-seb-2); }

/* ---- Home-feed visual polish (A4 · P7) — scoped to .tl-wrap so no other surface is touched ---- */

/* Header — gradient Sebastian chip */
.tl-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.tl-head-ic {
    flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px;
    background: linear-gradient(135deg, var(--netu-seb-1), var(--netu-seb-2));
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.3rem; box-shadow: 0 6px 16px rgba(138, 62, 142, .28);
}
.tl-head-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; color: var(--netu-ink); margin: 0; }
.tl-head-sub { color: var(--netu-slate); font-size: 0.9rem; margin: 2px 0 0; }

/* Composer — your avatar beside an inviting "share something" card */
.tl-composer { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.tl-composer-av {
    flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; margin-top: 4px;
    background: var(--netu-blue-tint); color: var(--netu-blue);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; overflow: hidden;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px color-mix(in srgb, var(--netu-seb-1) 28%, transparent);
}
.tl-composer-av img { width: 100%; height: 100%; object-fit: cover; }
.tl-composer-body { flex: 1; min-width: 0; }
.tl-composer-body > .card { margin-bottom: 0 !important; }

/* Feed cards — softer radius, real shadow, a gentle hover lift (smooth per the animation rule) */
.tl-wrap .card {
    border-radius: 16px !important;
    box-shadow: var(--netu-card-shadow) !important;
    transition: transform .18s ease, box-shadow .18s ease;
}
.tl-wrap .card:hover { transform: translateY(-2px); box-shadow: var(--netu-card-shadow-hover) !important; }
/* …but the composer must not bob when you go to type in it (rule comes AFTER, so it wins on equal specificity) */
.tl-composer .card, .tl-composer .card:hover { transform: none; box-shadow: var(--netu-card-shadow) !important; }
/* Event cards (wrapped in .position-relative) clip their banner to the rounded corners; post cards are NOT wrapped
   this way, so their three-dots dropdown menu is never clipped. */
.tl-wrap .position-relative .card { overflow: hidden; }

/* Composer's Post button → the flat Sebastian gradient + motion (CTA rule), scoped to the timeline */
.tl-composer .btn-primary {
    background: linear-gradient(135deg, var(--netu-seb-1), var(--netu-seb-2));
    border: none; box-shadow: 0 2px 8px rgba(138, 62, 142, .25);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.tl-composer .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(138, 62, 142, .35); filter: brightness(1.03); }
.tl-composer .btn-primary:active { transform: translateY(1px); }
.tl-composer .btn-primary:disabled { background: var(--netu-faint); box-shadow: none; filter: none; }

/* Per-card quick-action buttons (Connect / Follow / Take-note) — a touch of motion */
.tl-wrap .netu-card-actions .btn { transition: transform .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease; }
.tl-wrap .netu-card-actions .btn:hover { transform: translateY(-1px); }

/* Right-rail pending-action rows — hover affordance */
.rp-pa-row { margin: 0 -6px; padding-left: 6px; padding-right: 6px; border-radius: 8px; transition: background .15s ease; }
.rp-pa-row:hover { background: var(--netu-blue-tint); }

/* Right-rail "Events" rows — status dot + hover */
.rp-ev-row { margin: 0 -6px; padding-left: 6px; padding-right: 6px; border-radius: 8px; transition: background .15s ease; }
.rp-ev-row:hover { background: var(--netu-blue-tint); }
.rp-ev-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: var(--netu-faint); }
.rp-ev-dot.is-happening { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .15); }
.rp-ev-dot.is-upcoming { background: var(--netu-blue); }
.rp-ev-dot.is-concluded { background: var(--netu-faint); }

/* ---- Share & invite modal ---- */
.share-link-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--netu-surface);
    border: 1px solid var(--netu-line);
    border-radius: 10px;
    padding: 9px 12px;
}
.share-link-box input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 0.82rem;
    color: var(--netu-ink);
    outline: none;
}

.share-copy-btn {
    border: none;
    background: var(--netu-blue);
    color: #fff;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
}
.share-copy-btn:hover { background: var(--netu-blue-dark); }
.share-copy-btn.copied { background: var(--netu-slate); }

.share-tmpl-row { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; }

.share-tmpl {
    border: 1.5px solid var(--netu-line);
    background: #fff;
    color: var(--netu-slate);
    border-radius: 999px;
    padding: 5px 13px;
    font-weight: 600;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.share-tmpl.on {
    border-color: var(--netu-blue);
    background: var(--netu-surface-blue);
    color: var(--netu-blue);
}

.share-msg {
    width: 100%;
    border: 1px solid var(--netu-line);
    border-radius: 10px;
    padding: 11px 13px;
    font-size: 0.85rem;
    color: var(--netu-ink);
    resize: vertical;
    min-height: 76px;
}
.share-msg:focus { outline: none; border-color: var(--netu-blue); }

.share-chans { display: flex; gap: 9px; flex-wrap: wrap; }

.share-chan {
    width: 44px; height: 44px;
    border: none; cursor: pointer;
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.share-chan:hover { color: #fff; opacity: 0.88; transform: translateY(-1px); }
/* Email channel acts as an in-modal toggle; ring it when its box is open. */
.share-chan.on { box-shadow: 0 0 0 3px var(--netu-blue-tint); opacity: 1; }

.share-lbl {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--netu-faint);
    margin: 16px 0 8px;
}

/* =============================================================
   Phase 4 — Profile editor (/users/{handle}/manage)
   Tokens only (bible §23). Prefix: pf-
   ============================================================= */
.pf-manage { max-width: 760px; }
.pf-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.pf-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--netu-ink);
    margin: 0 0 4px;
}
.pf-sub { color: var(--netu-slate); font-size: 14px; margin: 0; max-width: 52ch; }

.pf-card {
    background: #fff;
    border: 1px solid var(--netu-line);
    border-radius: 14px;
    box-shadow: var(--netu-card-shadow);
    padding: 22px;
    margin-bottom: 18px;
}
.pf-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--netu-ink);
    margin: 0 0 16px;
}
.pf-field { margin-top: 14px; }
.pf-label { font-size: 13px; font-weight: 600; color: var(--netu-slate); margin-bottom: 5px; }
.pf-hint { font-size: 12.5px; color: var(--netu-slate-light); margin: 6px 0 0; }

.pf-identity-row { display: flex; gap: 22px; align-items: flex-start; }
.pf-avatar-col { flex: 0 0 auto; width: 150px; }
.pf-identity-fields { flex: 1 1 auto; min-width: 0; }

/* Handle input with @ prefix + status icon */
.pf-handle-wrap {
    display: flex;
    align-items: center;
    border: 1px solid var(--netu-line);
    border-radius: 8px;
    background: #fff;
    padding: 0 12px;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.pf-handle-wrap:focus-within { border-color: var(--netu-blue); box-shadow: 0 0 0 3px var(--netu-blue-tint); }
.pf-handle-wrap.is-valid { border-color: #1a9e5f; }
.pf-handle-wrap.is-invalid { border-color: var(--netu-red); }
.pf-handle-at { color: var(--netu-faint); font-weight: 600; }
.pf-handle-wrap input {
    flex: 1 1 auto;
    border: 0;
    outline: 0;
    padding: 10px 6px;
    font-size: 15px;
    background: transparent;
    color: var(--netu-ink);
}
.pf-handle-status { font-size: 16px; display: inline-flex; }

/* Link fields with leading icon */
.pf-link-field { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.pf-link-field > i { color: var(--netu-slate-light); font-size: 18px; width: 20px; text-align: center; }
/* The auto-generated NetU link rows (profile manage + booth manage): read-only field reads as a fact,
   not a form input to fill. */
#netuProfileLink, #netuBoothLink { background: var(--netu-surface); color: var(--netu-blue-dark); font-weight: 600; }
.pf-link-note { margin: 6px 0 2px 30px; font-size: 12px; color: var(--netu-slate-light); }

.pf-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
    background: linear-gradient(to top, var(--netu-surface) 60%, transparent);
    padding: 16px 0 8px;
}
.pf-cancel { color: var(--netu-slate); text-decoration: none; }

@media (max-width: 575px) {
    .pf-identity-row { flex-direction: column; align-items: stretch; }
    .pf-avatar-col { width: 100%; }
    .pf-head { flex-direction: column; }
}

/* =============================================================
   Phase 4 — Public member profile (/users/{handle})
   Tokens only. Prefix: pubp-
   ============================================================= */
.pubp-wrap { max-width: 1300px; margin: 0 auto; padding: 44px 40px 0; }
/* Full-width hero — banner + white left→right gradient (see booth hero). */
/* ⛔ HERO REDESIGN (Pushpak, 2026-07-22 — same doctrine as .booth-hero): the banner renders CLEAN, identity
   on a white bar below it, avatar overlapping the banner edge. No scrim, no overlay text. */
.pubp-hero { background: #fff; border-bottom: 1px solid var(--netu-line); }
.pubp-hero-bg {
    /* 4:1 banner contract (2026-08-26; reaffirmed 2026-09-29) — same ratio as the cropper + manage
       preview, so the hero shows EXACTLY the crop the member drew. Never a fixed height: that re-crops
       per viewport. */
    aspect-ratio: 4 / 1;
    background-size: cover; background-position: center;
    background-color: var(--netu-blue-tint);
    /* CONTAINER-WIDTH hero (Pushpak, 2026-09-29 — booth-approved treatment, rollout stop #2:
       profile): capped at the same 1300px as .pubp-hero-inner/.pubp-wrap so the banner's edges line
       up with the content below instead of spanning the viewport. */
    max-width: 1300px;
    margin: 14px auto 0;
    border-radius: 14px;
}
@media (max-width: 1340px) {
    /* Below the container width the banner IS the viewport width — the original full-bleed look. */
    .pubp-hero-bg { border-radius: 0; margin-top: 0; }
}
.pubp-hero-inner {
    /* Same centered container + column split as the content grid below (locked booth convention). */
    max-width: 1300px; margin: 0 auto;
    padding: 16px 40px 16px;   /* top gap since the avatar no longer overlaps the banner */
    display: grid; grid-template-columns: 2fr 1fr; gap: 40px;
    align-items: start;
}
.pubp-hero-left { display: flex; gap: 22px; align-items: flex-start; min-width: 0; }
.pubp-avatar {
    flex: 0 0 auto;
    width: 125px; height: 125px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--netu-surface-blue);
    display: flex; align-items: center; justify-content: center;
    border: 4px solid #fff;
    box-shadow: 0 6px 20px rgba(12,27,42,0.18);
    /* No banner overlap (booth treatment, 2026-09-29): avatar fully below the capped banner. */
    margin-top: 0;
}
/* Crown hugs the avatar's top-right edge here — netu-crown-lg's -30px pull was overlap-era. */
.pubp-hero-left .netu-crown { margin-top: 0; top: -2px; right: 4px; }
.pubp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pubp-initials { color: #fff; font-size: 40px; font-weight: 700; letter-spacing: 1px; }
.pubp-id { min-width: 0; padding-top: 12px; }
.pubp-name { font-size: 32px; font-weight: 700; color: var(--netu-blue-dark); margin: 2px 0 2px; line-height: 1.2; }
.pubp-handle { color: var(--netu-blue-dark); font-size: 20px; font-weight: 400; margin-bottom: 8px; }
.pubp-headline { color: var(--netu-slate); font-size: 16; margin: 0 0 12px; line-height: 1.5; max-width: 58ch; }
.pubp-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.pubp-badge {
    display: inline-flex; align-items: center;
    background: var(--netu-blue-tint);
    color: var(--netu-blue-dark);
    font-size: 12px; font-weight: 700;
    padding: 4px 11px; border-radius: 999px;
}
.pubp-meta-item { color: var(--netu-slate-light); font-size: 13px; display: inline-flex; align-items: center; gap: 5px; }
.pubp-meta-item i { color: var(--netu-faint); }

/* Two-column content: main + sticky action card overlapping the hero */
/* col-8 / col-4 — content free-flows on the canvas, rail stays carded */
.pubp-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: start; }
.pubp-main { min-width: 0; padding-top: 14px; }
.pubp-side { position: sticky; top: 20px; }
/* Sections — free-flowing: no box, no border, no shadow (locked booth convention) */
.pubp-section {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0 0 52px;
}
.pubp-section + .pubp-section {
    border-top: 1px solid var(--netu-line);
    padding-top: 52px;
}
.pubp-section:last-child { margin-bottom: 0; }
.pubp-section-title {
    font-size: 18px; font-weight: 700;
    color: var(--netu-blue-dark);
    letter-spacing: 1.5px;
    margin: 0 0 20px;
    text-transform: uppercase;
}
.pubp-bio { color: var(--netu-slate); font-size: 18px; line-height: 1.8; margin: 0; max-width: 72ch; }
.pubp-bio p { margin: 0 0 16px; }
.pubp-bio p:last-child { margin-bottom: 0; }

.pubp-company-card {
    display: flex; gap: 16px; align-items: center;
    background: transparent;
    border: 0;
    padding: 4px 0 0;
    text-decoration: none;
    transition: opacity .18s ease;
}
.pubp-company-card:hover { opacity: .85; }
.pubp-company-card:hover .pubp-company-cta { text-decoration: underline; }
.pubp-company-logo {
    flex: 0 0 auto; width: 60px; height: 60px; border-radius: 12px;
    background: var(--netu-surface-blue);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    color: var(--netu-blue-dark); font-weight: 800; font-size: 24px;
}
.pubp-company-logo img { width: 100%; height: 100%; object-fit: cover; }
.pubp-company-info { min-width: 0; }
.pubp-company-info strong { display: block; color: var(--netu-ink); font-size: 16px; }
.pubp-company-info p { color: var(--netu-slate-light); font-size: 13.5px; margin: 3px 0 6px; }
.pubp-company-cta { color: var(--netu-blue-dark); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }

@media (max-width: 900px) {
    .pubp-hero-inner { grid-template-columns: 1fr; }
    .pubp-grid { grid-template-columns: 1fr; }
    .pubp-side { position: static; margin-top: 0; }
}
@media (max-width: 575px) {
    /* No banner height override — the 4:1 contract holds on phones too (banner is just smaller).
       Text stays RIGHT of the avatar (booth treatment — no stacking); the avatar just shrinks. */
    .pubp-hero-left { gap: 14px; }
    .pubp-avatar { width: 78px; height: 78px; margin-top: 0; }
    .pubp-name { font-size: 22px; }
}

/* =============================================================
   Phase 4 — Booth manager (/company/setup, /company/{profileName}/manage)
   Reuses ob-* form styles + pf-* cards. Prefix: bth-
   ============================================================= */
.bth-manage { max-width: 780px; }
.bth-media-row { display: grid; grid-template-columns: 1fr; gap: 14px; }
.bth-media-row > div:first-child .netu-img-upload { width: 100%; }

/* Manage-page spacing (Pushpak, 2026-10-22): ob-field carries no spacing of its own (the onboarding
   .ob-form gap spaces it there), so inside a pf-card the fields stacked flush. Spacing only — font
   sizes stay as they are. Scoped to the two manage pages; onboarding is untouched. */
.bth-manage .pf-card-title,
.pf-manage .pf-card-title { margin-bottom: 18px; }
.bth-manage .pf-card > .ob-field ~ .ob-field,
.bth-manage .pf-card > .ob-field ~ .ob-field-row,
.pf-manage .pf-card > .ob-field ~ .ob-field { margin-top: 20px; }
.bth-manage .pf-link-field { margin-top: 14px; }
/* A hint directly under the card title is its subtitle — tuck it under the title, then breathe. */
.bth-manage .pf-card-title + .pf-hint,
.bth-manage .pf-card-title + .ob-hint { margin: -10px 0 16px; }

/* =============================================================
   Phase 4 — Public company booth (/companies/{profileName})
   A business landing page. Tokens only. Prefix: booth-
   ============================================================= */
/* Page canvas — the content area sits on the surface tone (locked token),
   NOT on white, and the left column flows freely on it (no cards). */
.booth { background: var(--netu-home-bg); padding-bottom: 72px; }
/* Content is centered (hero stays full-bleed). */
.booth-container { max-width: 1300px; margin: 0 auto; }

/* Full-width hero — banner + white left→right gradient: opaque on the left
   (dark text) fading out to the right where the image shows through and the
   sticky action card overlaps. No banner → brand gradient under the overlay. */
/* ⛔ HERO REDESIGN (Pushpak, 2026-07-22): the banner renders CLEAN — no scrim, no gradient wash, no text
   overlay. Members upload banners that carry their own text/branding, and the old full-bleed white gradient +
   overlaid 48px name fought them. Identity now sits on a white BAR below the banner (LinkedIn pattern), with
   the logo overlapping the banner edge and the action card floating over the banner's right as a card. */
/* No full-width border under the hero (2026-09-29) — the white band flows straight into the tab
   row, whose centered 1300px hairline is the single separator (aligned with the capped banner). */
.booth-hero { background: #fff; }
.booth-banner {
    /* 4:1 banner contract (2026-08-26; reaffirmed 2026-09-29) — matches the cropper + manage preview;
       see .pubp-hero-bg. */
    aspect-ratio: 4 / 1;
    background-size: cover; background-position: center;
    background-color: var(--netu-blue-tint);      /* peeks only while the image loads */
    /* CONTAINER-WIDTH hero (Pushpak, 2026-09-29, after the split-card experiment was discarded):
       the banner caps at the SAME 1300px as .booth-hero-inner / .booth-container, so its edges line
       up exactly with the identity row, action card, tabs and content below — no more viewport-wide
       banner (~480px tall on 1920 screens) with content floating narrower inside it. */
    max-width: 1300px;
    margin: 14px auto 0;
    border-radius: 14px;
}
@media (max-width: 1340px) {
    /* Below the container width the banner IS the viewport width — exactly the original full-bleed
       look; the rounding and top gap only exist while the banner is narrower than the screen. */
    .booth-banner { border-radius: 0; margin-top: 0; }
    /* Gutters for the in-between screens (Pushpak, 2026-09-29 — "content feels edge to edge"):
       once the 1300px container no longer floats, the content needs breathing room. Above 1340px
       there is deliberately NO padding, so content stays flush with the capped banner; the ≤575px
       rules later tighten these to 16px. */
    .booth-container { padding-left: 24px; padding-right: 24px; }
    .booth-hero-inner { padding-left: 24px; padding-right: 24px; }
    /* The segmented tab strip uses its own 6px padding, so it takes the gutter as margin. */
    .booth-tabs-inner { margin-left: 24px; margin-right: 24px; }
}
.booth-hero-inner {
    /* Same centered container + column split as the content grid below, so the
       logo/name align with the section titles and the card aligns with the rail. */
    max-width: 1300px; margin: 0 auto;
    padding: 16px 5px 18px;   /* top gap since the logo no longer overlaps the banner */
    display: grid; grid-template-columns: 2fr 1fr; gap: 40px;
    align-items: start;
}
.booth-hero-left { display: flex; gap: 24px; align-items: flex-start; min-width: 0; }
/* Name + location pill flow as ONE text line (Pushpak, 2026-09-29): the name renders inline so the
   pill sits RIGHT AFTER the last word — even when a long name wraps, the pill trails the final
   word instead of dropping to its own row. */
.booth-name-row { display: block; }
.booth-name-row .booth-name,
.booth-name-row .pubp-name { display: inline; margin: 0; }
.booth-name-row .booth-locpill { margin: 0 0 0 0px; vertical-align: middle; position: relative; top: -2px; }
/* Socials under the @handle (2026-09-29; out of the Quick-actions card). */
.booth-hero-socials { margin-top: 12px; }
/* "Quick actions" — the action card's quiet header (Pushpak, 2026-09-29). */
.hero-card-label {
    font-size: 12.5px; font-weight: 700;
    color: var(--netu-slate-light);
    text-transform: uppercase; letter-spacing: 1.2px;
    margin: 0 0 12px;
}
/* The quick-actions GRID (Pushpak, 2026-09-29): two equal columns — owner 2×2 (Edit·Share /
   Contact·%ICP), visitor one row (Contact·%ICP), guest's lone Contact spans both. Every cell
   stretches to the same height. */
.hero-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; }
/* An odd straggler in the last row spans both columns (guest's lone Contact, owner's 3rd button…). */
.hero-card-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.hero-card-grid .hero-card-edit { margin-bottom: 0; }
.hero-card-grid .booth-btn { width: 100%; }
/* The % ICP chip fills its cell like a button (it keeps its Sebastian face). ⚠ Its wrapper is
   Bootstrap .d-inline-block (!important) — size via widths, don't fight the display. */
.hero-card-icp > div { width: 100%; }
.hero-card-icp .netu-match-chip { width: 100%; height: 100%; justify-content: center; }
.booth-logo {
    flex: 0 0 auto;
    width: 125px; height: 125px;
    /* No banner overlap (Pushpak, 2026-09-29): the logo sits fully BELOW the banner — the capped
       hero leaves enough room; text stays to its right on every device. */
    margin-top: 0;
    border-radius: 100px; overflow: hidden;
    background: #fff; border: 4px solid #fff;
    box-shadow: 0 8px 24px rgba(12,27,42,0.18);
    display: flex; align-items: center; justify-content: center;
}
/* The crown hugs the logo's top-right edge here — netu-crown-lg's -30px pull was tuned for the old
   banner-overlap context (and still fits the profile page); without the overlap it floated into the
   banner. */
.booth-hero-left .netu-crown { margin-top: 0; top: -2px; right: 4px; }
.booth-logo img { width: 100%; height: 100%; object-fit: cover; }
.booth-logo span {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--netu-blue), var(--netu-seb-1));
    color: #fff; font-size: 46px; font-weight: 800;
}
.booth-hero-main { min-width: 0; padding-top: 14px; }
.booth-name { font-size: 34px; font-weight: 700; color: var(--netu-blue-dark); margin: 0 0 2px; line-height: 1.25; letter-spacing: .25px; }
.booth-handle { color: var(--netu-slate-light); font-size: 16px; font-weight: 500; margin: 0 0 8px; }
.booth-tagline { font-size: 20px; color: var(--netu-slate); margin: 0; line-height: 1.5; max-width: 58ch; }

/* The hero answers WHERE, not WHAT: a location pill under the handle, where the tagline used to be
   (Pushpak, 2026-07-12). On the white bar it needs no translucency tricks anymore. */
.booth-locpill {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 6px 0 0; padding: 4px 11px;
    background: var(--netu-blue-tint);
    border: 1px solid var(--netu-line);
    border-radius: 999px;
    /* Smaller than body text (Pushpak, 2026-09-29) — a quiet tag beside the big name, on booth AND
       profile (both name rows share this pill). */
    font-size: 12.5px; font-weight: 600; color: var(--netu-ink);
}
.booth-locpill i { color: var(--netu-blue); font-size: 11px; }

/* The tagline is now the LEDE of the main column — the sentence a buyer reads before deciding whether to
   read anything else. Sized to lead, not to shout. */
.booth-lede {
    /* CITATION CARD (Pushpak, 2026-09-29): the tagline reads as an italic serif pull-quote on a
       soft surface panel — an epigraph opening the column, not another bold paragraph. */
    font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
    font-style: italic;
    font-size: 17.5px;
    line-height: 1.7;
    font-weight: 500;
    color: var(--netu-slate);
    max-width: 68ch;
    margin: 0 0 40px;
    padding: 18px 22px;
    background: var(--netu-surface);
    border-left: 3px solid var(--netu-blue);
    border-radius: 0 12px 12px 0;
}

/* Buttons */
.booth-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 20px; border-radius: 10px;
    font-size: 14.5px; font-weight: 700; text-decoration: none;
    border: 1px solid transparent; cursor: pointer;
    transition: transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.booth-btn-primary { background: var(--netu-blue); color: #fff; box-shadow: 0 4px 14px rgba(0,104,184,0.28); }
.booth-btn-primary:hover { background: var(--netu-blue-dark); transform: translateY(-1px); color: #fff; }
.booth-btn-primary:disabled { opacity: .7; transform: none; }
.booth-btn-block { width: 100%; }

/* Layout grid */
/* col-8 / col-4 */
.booth-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; margin-top: 44px; align-items: start; }
.booth-main { min-width: 0; }

/* Sections — free-flowing on the page canvas: no box, no border, no shadow.
   Rhythm comes from whitespace + a hairline rule between sections. */
.booth-main { padding-top: 14px; }
.booth-section {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0 0 52px;
}
.booth-section + .booth-section {
    border-top: 1px solid var(--netu-line);
    padding-top: 52px;
}
.booth-section:last-child { margin-bottom: 0; }
.booth-section-title {
    font-size: 18px; 
    font-weight: 700;
    color: var(--netu-blue-dark);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0 0 20px;
}
.booth-richtext { color: var(--netu-slate); font-size: 16px; line-height: 1.5; max-width: 72ch; text-align: justify;}
.booth-richtext p { margin: 0 0 16px; }
.booth-richtext p:last-child { margin-bottom: 0; }
.booth-richtext h2, .booth-richtext h3, .booth-richtext h4 { color: var(--netu-ink); margin: 26px 0 10px; }
.booth-richtext a { color: var(--netu-blue-dark); }
.booth-richtext ul, .booth-richtext ol { padding-left: 22px; margin: 0 0 16px; }
.booth-icp { color: var(--netu-slate); font-size: 18px; line-height: 1.8; margin: 0; max-width: 72ch; }

/* Tag groups */
.booth-tag-group { margin-bottom: 16px; }
.booth-tag-group:last-child { margin-bottom: 0; }
.booth-tag-label { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--netu-faint); margin-bottom: 10px; }
.booth-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.booth-chip { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; font-size: 14.5px; font-weight: 600; background: var(--netu-blue-tint); color: var(--netu-blue-dark); }
.booth-chip-solid { background: var(--netu-blue); color: #fff; }
.booth-chip-soft { background: #fff; color: var(--netu-slate); border: 1px solid var(--netu-line); }

/* Map */
.booth-location-text { color: var(--netu-slate); font-size: 17px; margin: 0 0 18px; display: flex; align-items: center; gap: 8px; }
.booth-location-text i { color: var(--netu-blue); }
.booth-map { width: 100%; height: 280px; border-radius: 12px; border: 1px solid var(--netu-line); overflow: hidden; }

/* Side cards */
.booth-side { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 18px; }
.booth-card { background: #fff; border: 1px solid var(--netu-line); border-radius: 14px; padding: 22px; box-shadow: var(--netu-card-shadow); }
.booth-card-title { font-size: 16px; font-weight: 700; color: var(--netu-ink); margin: 0 0 4px; }
.booth-card-sub { font-size: 13.5px; color: var(--netu-slate-light); margin: 0 0 16px; }
.booth-contact { border-top: 3px solid var(--netu-blue); }

/* Enquiry form */
.booth-form-field { margin-bottom: 12px; }
.booth-form-field label { display: block; font-size: 13px; font-weight: 600; color: var(--netu-slate); margin-bottom: 5px; }
.booth-optional { color: var(--netu-faint); font-weight: 500; }
.booth-form-field input, .booth-form-field textarea {
    width: 100%; border: 1px solid var(--netu-line); border-radius: 8px;
    padding: 10px 12px; font-size: 14px; color: var(--netu-ink); background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.booth-form-field input:focus, .booth-form-field textarea:focus {
    outline: 0; border-color: var(--netu-blue); box-shadow: 0 0 0 3px var(--netu-blue-tint);
}
.booth-form-field textarea { resize: vertical; }
.booth-form-note { font-size: 11.5px; color: var(--netu-faint); margin: 10px 0 0; line-height: 1.4; }
/* Honeypot — off-screen, not display:none so bots still fill it */
.booth-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Facts */
.booth-facts { list-style: none; margin: 0; padding: 0; }
.booth-facts li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--netu-line); }
.booth-facts li:last-child { border-bottom: 0; }
.booth-fact-k { color: var(--netu-slate-light); font-size: 13.5px; display: inline-flex; align-items: center; gap: 7px; }
.booth-fact-k i { color: var(--netu-faint); }
.booth-fact-v { color: var(--netu-ink); font-size: 13.5px; font-weight: 600; text-align: right; }
.booth-fact-link { color: var(--netu-blue-dark); text-decoration: none; }
.booth-fact-link:hover { text-decoration: underline; }

/* Owner */
.booth-owner { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.booth-owner-label { font-size: 12.5px; color: var(--netu-faint); }
.booth-owner-link { display: inline-flex; align-items: center; gap: 8px; color: var(--netu-ink); font-weight: 600; font-size: 14px; text-decoration: none; }
.booth-owner-link i { color: var(--netu-blue); font-size: 18px; }
.booth-owner-link:hover { color: var(--netu-blue-dark); }

/* The group About page's info card ("Built for meaningful connections.") sits ON the hero — the legacy
   layout: the right rail's first card is pulled up over the banner's lower edge. Desktop only; on small
   screens the columns stack and the card takes its natural place in the flow. */
@media (min-width: 992px) {
    .group-hero-overlap { position: relative; z-index: 3; }
}

/* Responsive */
@media (max-width: 900px) {
    .booth-grid { grid-template-columns: 1fr; }
    .booth-side { position: static; margin-top: 0; }
    .booth-hero-inner { grid-template-columns: 1fr; }
    .booth-hero-spacer { display: none; }
    /* One column: the card sits on the white bar below the identity, never over the banner. */
    .hero-card { margin-top: 0 !important; }
}
@media (max-width: 575px) {
    .booth-container { padding: 0 16px; }
    /* No banner height override — the 4:1 contract holds on phones too (banner is just smaller). */
    .booth-hero-inner { padding-left: 16px; padding-right: 16px; }
    .booth-tabs-inner { margin-left: 16px; margin-right: 16px; }
    /* Text stays to the RIGHT of the logo on phones too (Pushpak, 2026-09-29 — no more stacking);
       the logo just shrinks. */
    .booth-hero-left { gap: 14px; }
    .booth-logo { width: 78px; height: 78px; margin-top: 0; }
    .booth-logo span { font-size: 30px; }
    .booth-name { font-size: 22px; }
}

/* =============================================================
   Rich-text rendering (Quill 2 output) on public pages.
   Public shells don't load Quill CSS, so the ql-* utility classes
   and media embeds are styled here. Shared by booth + profile bio.
   ============================================================= */
.netu-richtext img { max-width: 30%; height: auto; border-radius: 10px; margin: 10px 0; display: block; }
.netu-richtext iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; margin: 10px 0; display: block; }
.netu-richtext .ql-align-center { text-align: center; }
.netu-richtext .ql-align-right { text-align: right; }
.netu-richtext .ql-align-justify { text-align: justify; }
.netu-richtext .ql-size-small { font-size: 0.78em; }
.netu-richtext .ql-size-large { font-size: 1.4em; }
.netu-richtext .ql-size-huge { font-size: 1.9em; }
.netu-richtext .ql-indent-1 { padding-left: 2em; }
.netu-richtext .ql-indent-2 { padding-left: 4em; }
.netu-richtext .ql-indent-3 { padding-left: 6em; }
.netu-richtext .ql-indent-4 { padding-left: 8em; }
/* Quill 2 emits every list as <ol> with li[data-list] */
.netu-richtext ol { padding-left: 20px; margin: 0 0 12px; }
.netu-richtext li[data-list="bullet"] { list-style-type: disc; }
.netu-richtext li[data-list="ordered"] { list-style-type: decimal; }

/* Profile editor additions (autosave chip, Sebastian action row) + public banner */
.pf-head-actions { display: flex; align-items: center; gap: 12px; }
.pf-save-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 600;
    padding: 5px 12px; border-radius: 999px;
    opacity: 0; transition: opacity .3s ease;
}
.pf-save-chip.saving { opacity: 1; background: var(--netu-amber-tint); color: var(--netu-warning); }
.pf-save-chip.saved { opacity: 1; background: var(--netu-blue-tint); color: var(--netu-blue-dark); }
.pf-card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.pf-card-title-row .pf-card-title { margin: 0; }


/* =============================================================
   Toasts — centered on screen, fade in/out, 2s auto-dismiss
   (timers live in app.js; .hiding is added before dismissal)
   ============================================================= */
/* BOTTOM-CENTRE, not dead centre (Pushpak, 2026-07-13).
   A toast in the middle of the screen sits on top of the thing you were just looking at, and on the thing you
   were about to click. It reads as a modal you have to deal with, when it is only a receipt. At the bottom it
   confirms what happened without taking the page away from you. */
.netu-toast-center {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1080;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    max-width: min(560px, calc(100vw - 32px));
}
.netu-toast-center .toast {
    pointer-events: auto;
    animation: netu-toast-in .3s ease both;
    box-shadow: 0 12px 36px rgba(12, 27, 42, 0.22);
}
.netu-toast-center .toast.hiding {
    animation: netu-toast-out .3s ease both;
}
/* It rises in from the bottom edge and sinks back out the same way. The exit used to drift UPWARD, which was
   right for a toast pinned to the middle of the screen and wrong for one pinned to the bottom — it looked like
   the message was wandering into the page on its way out. Enter and leave through the same edge. */
@keyframes netu-toast-in {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes netu-toast-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(10px) scale(0.97); }
}

/* =============================================================
   Sebastian floating assistant (FAB) — every screen.
   Placeholder for the public /faq endpoint. Gradient tokens only.
   ============================================================= */
.seb-fab-wrap { position: fixed; right: 22px; bottom: 22px; z-index: 1070; }
.seb-fab {
    width: 56px; height: 56px;
    border: 0; border-radius: 50%;
    background: linear-gradient(135deg, var(--netu-seb-1), var(--netu-seb-2));
    color: #fff; font-size: 22px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(83, 74, 183, 0.42);
    transition: transform .18s ease, box-shadow .18s ease;
}
.seb-fab:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 12px 30px rgba(83, 74, 183, 0.5); }
.seb-fab:active { transform: scale(0.97); }

.seb-fab-panel {
    position: absolute; right: 0; bottom: 70px;
    width: 320px; max-width: calc(100vw - 44px);
    background: #fff;
    border: 1px solid var(--netu-line);
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(12, 27, 42, 0.2);
    overflow: hidden;
    transform-origin: bottom right;
}
.seb-fab-panel-head {
    display: flex; align-items: center; gap: 12px;
    background: linear-gradient(135deg, var(--netu-seb-1), var(--netu-seb-2));
    color: #fff; padding: 14px 16px;
}
.seb-fab-panel-ic {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.18);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; flex: 0 0 auto;
}
.seb-fab-panel-head strong { display: block; font-size: 15px; line-height: 1.2; }
.seb-fab-panel-head span { font-size: 12px; opacity: .85; }
.seb-fab-close {
    margin-left: auto; border: 0; background: transparent; color: #fff;
    opacity: .8; cursor: pointer; font-size: 14px; padding: 4px;
}
.seb-fab-close:hover { opacity: 1; }
.seb-fab-panel-body { padding: 16px; }
.seb-fab-panel-body p { color: var(--netu-slate); font-size: 13.5px; line-height: 1.55; margin: 0 0 10px; }
.seb-fab-panel-note { color: var(--netu-slate-light) !important; font-size: 12.5px !important; margin-bottom: 0 !important; }

/* The live FAQ chat inside the panel (2026-07-31) */
.seb-faq { display: flex; flex-direction: column; }
.seb-faq-msgs { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.seb-faq-msg { font-size: 13.5px; line-height: 1.5; padding: 8px 11px; border-radius: 12px; max-width: 92%; white-space: pre-wrap; word-break: break-word; }
.seb-faq-msg.is-bot { background: var(--netu-surface, #f1f5f9); color: var(--netu-slate); align-self: flex-start; border-bottom-left-radius: 4px; }
.seb-faq-msg.is-user { background: var(--netu-blue); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.seb-faq-error { color: #b91c1c; font-size: 12.5px; }
.seb-faq-input { display: flex; gap: 6px; margin-bottom: 8px; }
.seb-faq-input input { flex: 1; border: 1px solid var(--netu-line); border-radius: 10px; padding: 8px 11px; font-size: 13.5px; outline: none; }
.seb-faq-input input:focus { border-color: var(--netu-blue); }
.seb-faq-input button { border: 0; border-radius: 10px; width: 38px; background: var(--netu-blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity .15s ease; }
.seb-faq-input button:disabled { opacity: .5; cursor: default; }
.seb-faq-typing { display: inline-flex; gap: 4px; align-items: center; }
.seb-faq-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--netu-slate-light); animation: sebFaqDot 1.2s infinite ease-in-out; }
.seb-faq-typing span:nth-child(2) { animation-delay: .15s; }
.seb-faq-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes sebFaqDot { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* Smooth open/close (Alpine x-transition classes) */
.seb-fab-enter { transition: opacity .22s ease, transform .22s ease; }
.seb-fab-leave { transition: opacity .18s ease, transform .18s ease; }
.seb-fab-enter-start { opacity: 0; transform: translateY(10px) scale(0.96); }
.seb-fab-enter-end { opacity: 1; transform: translateY(0) scale(1); }

@media (max-width: 575px) {
    .seb-fab-wrap { right: 14px; bottom: 14px; }
    .seb-fab { width: 50px; height: 50px; font-size: 20px; }
}

/* Share & Invite — locked message preview (outbound copy is platform-owned
   until Email Connectors let users send from their own provider) */
.share-msg--locked {
    position: relative;
    background: var(--netu-surface);
    border: 1px solid var(--netu-line);
    border-radius: 10px;
    padding: 12px 14px 30px;
}
.share-msg--locked p { color: var(--netu-slate); font-size: 13.5px; line-height: 1.55; margin: 0; }
.share-msg-lock {
    position: absolute; right: 10px; bottom: 8px;
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--netu-faint); font-size: 11px; font-weight: 600;
}

/* =============================================================
   Sebastian spotlight tour (netu-tour.js) — dims the page and
   glides a cutout between targets; the popover speaks as
   Sebastian. Gradient tokens only (locked seb-1 → seb-2).
   z-index: above the FAB (1070), below Bootstrap modals (1055 is
   the modal, but a tour never runs with a modal open — the join
   flash toast plays first, then the tour starts).
   ============================================================= */
.netu-tour-backdrop {
    position: fixed; inset: 0; z-index: 2000;
    /* transparent click-catcher — the DIMMING is the spotlight's box-shadow */
    background: transparent;
}
.netu-tour-spot {
    position: fixed; z-index: 2001;
    border-radius: 14px;
    pointer-events: none;
    box-shadow: 0 0 0 9999px rgba(23, 20, 44, 0);
    transition: top .4s cubic-bezier(.4, 0, .2, 1), left .4s cubic-bezier(.4, 0, .2, 1),
                width .4s cubic-bezier(.4, 0, .2, 1), height .4s cubic-bezier(.4, 0, .2, 1),
                box-shadow .3s ease;
}
.netu-tour-spot.is-in { box-shadow: 0 0 0 9999px rgba(23, 20, 44, 0.55); }
.netu-tour-spot.is-out { box-shadow: 0 0 0 9999px rgba(23, 20, 44, 0); }

.netu-tour-pop {
    position: fixed; z-index: 2002;
    width: min(340px, calc(100vw - 24px));
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(23, 20, 44, 0.28);
    padding: 0 16px 14px;
    opacity: 0; transform: translateY(10px);
    transition: opacity .28s ease, transform .28s ease;
}
.netu-tour-pop.is-in { opacity: 1; transform: translateY(0); }
.netu-tour-pop.is-out { opacity: 0; transform: translateY(10px); }
.netu-tour-pop.is-centered {
    top: 50%; left: 50%;
    transform: translate(-50%, -46%);
}
.netu-tour-pop.is-centered.is-in { transform: translate(-50%, -50%); }
/* Narrow screens: bottom sheet — one place, thumb reach, never mis-anchored. */
.netu-tour-pop.is-sheet {
    top: auto; left: 12px; right: 12px; bottom: 12px;
    width: auto;
}

.netu-tour-head {
    display: flex; align-items: center; gap: 10px;
    margin: 0 -16px 12px;
    padding: 12px 16px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(135deg, var(--netu-seb-1), var(--netu-seb-2));
    color: #fff;
}
.netu-tour-head strong { display: block; font-size: 14.5px; line-height: 1.2; }
.netu-tour-sub { font-size: 11.5px; opacity: .85; }
.netu-tour-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    font-size: 16px; flex-shrink: 0;
}
.netu-tour-close {
    margin-left: auto;
    border: 0; background: transparent; color: #fff;
    width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; cursor: pointer; opacity: .8;
    transition: background .16s ease, opacity .16s ease;
}
.netu-tour-close:hover { background: rgba(255, 255, 255, 0.16); opacity: 1; }

.netu-tour-title { font-weight: 700; font-size: 15px; color: var(--netu-ink); margin: 0 0 4px; }
.netu-tour-text { font-size: 13.5px; line-height: 1.55; color: var(--netu-slate); margin: 0 0 12px; }

/* Optional per-step CTA link (e.g. "Set up your ICP") — quiet outline pill, the gradient stays on Next. */
.netu-tour-link {
    display: inline-flex; align-items: center; gap: 6px;
    margin: -4px 0 12px;
    padding: 6px 14px;
    border: 1px solid color-mix(in srgb, var(--netu-seb-1) 35%, #fff);
    border-radius: 999px;
    color: var(--netu-seb-1);
    font-size: 13px; font-weight: 700;
    text-decoration: none;
    transition: background .16s ease, transform .16s ease;
}
.netu-tour-link:hover { background: var(--netu-seb-tint); color: var(--netu-seb-1); transform: translateY(-1px); }

.netu-tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.netu-tour-count { font-size: 12px; font-weight: 600; color: var(--netu-faint); }
.netu-tour-btns { display: flex; gap: 8px; }
/* Flat buttons, one primary (locked CTA rule): Next carries the gradient + lift, Back stays quiet. */
.netu-tour-btn-next {
    border: 0; border-radius: 999px;
    padding: 7px 18px;
    background: linear-gradient(135deg, var(--netu-seb-1), var(--netu-seb-2));
    color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease;
}
.netu-tour-btn-next:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(83, 74, 183, 0.4); }
.netu-tour-btn-next:active { transform: scale(.97); }
.netu-tour-btn-back {
    border: 1px solid var(--netu-line); border-radius: 999px;
    padding: 7px 16px;
    background: #fff; color: var(--netu-slate);
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background .16s ease, color .16s ease;
}
.netu-tour-btn-back:hover { background: var(--netu-surface); color: var(--netu-ink); }

/* The group owner's Categories-page message — a warm callout, not an alert; seb-tinted so it reads as
   guidance. Editable at /manage/edit/labels; default "Please select the category of your business." */
.netu-cat-msg {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    background: var(--netu-seb-tint);
    border: 1px solid color-mix(in srgb, var(--netu-seb-1) 18%, #fff);
    border-left: 4px solid var(--netu-seb-1);
    border-radius: 12px;
    color: var(--netu-ink);
    font-size: 20.5px; font-weight: 600; line-height: 1.5;
}
.netu-cat-msg .bi { color: var(--netu-seb-1); font-size: 17px; flex-shrink: 0; }

/* Category search — icon inside the field; cards fade back in as the filter narrows (smooth, never abrupt). */
.netu-cat-search { position: relative; max-width: 360px; }
.netu-cat-search .bi {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--netu-slate-light); font-size: 14px; pointer-events: none;
}
.netu-cat-search input { padding-left: 36px; border-radius: 999px; }
.netu-cat-search input:focus {
    border-color: var(--netu-seb-1);
    box-shadow: 0 0 0 3px var(--netu-seb-tint);
}
.netu-cat-card-in { animation: netu-cat-card-in .22s ease; }
@keyframes netu-cat-card-in {
    from { opacity: 0; transform: scale(.98); }
    to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .netu-cat-card-in { animation: none; } }

/* On-demand launchers — revealed by netuTour.register(). The page-header pill… */
.netu-tour-launch {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 14px;
    border: 1px solid color-mix(in srgb, var(--netu-seb-1) 35%, #fff);
    border-radius: 999px;
    background: #fff; color: var(--netu-seb-1);
    font-size: 13px; font-weight: 700; cursor: pointer;
    transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.netu-tour-launch:hover {
    background: var(--netu-seb-tint);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(83, 74, 183, 0.18);
}
.netu-tour-launch:active { transform: scale(.97); }
/* …and the full-width row inside the Sebastian FAB panel, under its gradient head. */
.seb-fab-tour {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%;
    padding: 9px 14px;
    border: 0; border-bottom: 1px solid var(--netu-line);
    background: var(--netu-seb-tint); color: var(--netu-seb-1);
    font-size: 13px; font-weight: 700; cursor: pointer;
    transition: background .16s ease;
}
.seb-fab-tour:hover { background: color-mix(in srgb, var(--netu-seb-1) 12%, #fff); }

@media (prefers-reduced-motion: reduce) {
    .netu-tour-spot, .netu-tour-pop { transition: none; }
}

/* =============================================================
   Invite-by-email pill input (Gmail-style) inside Share & Invite.
   ============================================================= */
.invite-pill-box {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    min-height: 44px;
    padding: 7px 9px;
    background: #fff;
    border: 1px solid var(--netu-line);
    border-radius: 10px;
    cursor: text;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.invite-pill-box.is-focused {
    border-color: var(--netu-blue);
    box-shadow: 0 0 0 3px var(--netu-blue-tint);
}
.invite-pill-box.is-invalid { border-color: #d64545; }

.invite-pill {
    display: inline-flex; align-items: center; gap: 6px;
    max-width: 100%;
    padding: 3px 6px 3px 10px;
    background: var(--netu-surface-blue);
    border: 1px solid var(--netu-line);
    border-radius: 999px;
    color: var(--netu-ink);
    font-size: 13px; line-height: 1.4;
    /* smooth enter/leave — never abrupt */
    transition: transform .16s ease, opacity .16s ease, background .16s ease;
}
.invite-pill > span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px;
}
.invite-pill.x-enter-start { opacity: 0; transform: scale(.85); }
.invite-pill.x-leave-end   { opacity: 0; transform: scale(.85); }
.invite-pill-x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border: none; border-radius: 50%;
    background: transparent; color: var(--netu-slate); cursor: pointer;
    font-size: 13px; line-height: 1;
    transition: background .16s ease, color .16s ease;
}
.invite-pill-x:hover { background: var(--netu-blue); color: #fff; }

.invite-pill-input {
    flex: 1 1 140px; min-width: 140px;
    border: none; outline: none; background: transparent;
    font-size: 13.5px; color: var(--netu-ink); padding: 4px 2px;
}
.invite-pill-hint { color: var(--netu-slate-light); font-size: 12px; margin: 6px 2px 0; }
.invite-pill-error { color: #d64545; font-size: 12px; margin: 6px 2px 0; min-height: 1em;
    transition: opacity .18s ease; }
.invite-result {
    margin-top: 10px; font-size: 13px; color: var(--netu-ink);
    background: var(--netu-blue-tint); border: 1px solid var(--netu-line);
    border-radius: 10px; padding: 10px 12px;
    transition: opacity .2s ease;
}

/* =============================================================
   Hero action card — the white sticky card on the right of the
   public profile/booth hero (location, website, socials, CTAs).
   Connect/Follow/Take note are approved disabled placeholders
   until Connections / Follow / CRM notes ship.
   ============================================================= */
.hero-card {
    background: #fff;
    border: 1px solid var(--netu-line);
    border-radius: 14px;
    box-shadow: var(--netu-card-shadow-hover);
    padding: 20px;
    /* Hero redesign (2026-07-22): the card floats up over the CLEAN banner's right edge — a deliberate
       card over the image, unlike the old full-bleed scrim. Mobile resets this (below). */
    margin-top: -45px;
    position: relative;
}
.hero-card-edit {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    border: 1px solid var(--netu-line);
    border-radius: 10px;
    padding: 9px 14px;
    margin-bottom: 10px;
    color: var(--netu-slate);
    font-size: 13.5px; font-weight: 600;
    text-decoration: none;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.hero-card-edit:hover { border-color: var(--netu-blue); color: var(--netu-blue-dark); background: var(--netu-blue-tint); }

/* ============ Owner row: Edit (70%) + Share (30%) ============
   Owner-only pair in the hero action card. Share opens the "Share your card" business-card modal
   (fragments/profile-share-modal.html). Edit + Share are a matched OUTLINE pair — neither competes with
   the page's ONE primary ("Visit digital presence" / "Contact us"); the branded gradient lives on the
   modal's Copy-link CTA instead. */
.hero-card-owner-row { display: flex; gap: 8px; margin-bottom: 10px; }
.hero-card-owner-row .hero-card-edit { flex: 0 0 70%; min-width: 0; margin-bottom: 0; }
.hero-card-share {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid var(--netu-line);
    border-radius: 10px;
    padding: 9px 10px;
    background: #fff;
    color: var(--netu-slate);
    font-size: 13.5px; font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.hero-card-share:hover { border-color: var(--netu-blue); color: var(--netu-blue-dark); background: var(--netu-blue-tint); }

/* ============ "Share your card" — Blinq-style (2026-10-07): QR with a centre logo badge up top,
   a miniature of the page (banner → overlapping avatar → name → citation → link pill) beneath. ============ */
.netu-sharecard-dialog { max-width: 400px; }
.netu-sharecard { border: 0; border-radius: 22px; overflow: hidden; }
.netu-sharecard-close {
    position: absolute; top: 14px; right: 14px; z-index: 5;
    background-color: rgba(255, 255, 255, .85);
    border-radius: 50%;
    padding: 10px;
}

/* --- the QR, badge at its centre (qrcodejs renders level-H, so the occlusion scans fine) --- */
.netu-sharecard-top { text-align: center; padding: 28px 20px 0; }
.netu-sharecard-qrwrap { position: relative; display: inline-block; line-height: 0; }
.netu-sharecard-qrbadge {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 38px; height: 38px;
    border-radius: 10px;
    object-fit: cover;
    background: #fff;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px -2px rgba(12, 27, 42, .35);
}
.netu-sharecard-qrbadge--ph {
    display: flex; align-items: center; justify-content: center;
    color: var(--netu-seb-1);
    background: var(--netu-seb-tint);
    font-size: 18px;
    line-height: 1;
}
.netu-sharecard-scan { margin-top: 10px; font-size: 12px; color: var(--netu-slate); }
.netu-sharecard-brand { font-weight: 700; color: var(--netu-blue-dark); }

/* --- the page in miniature --- */
.netu-sharecard-card {
    margin: 14px 16px 0;
    border: 1px solid var(--netu-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 26px -16px rgba(12, 27, 42, .35);
}
.netu-sharecard-banner { height: 88px; background-size: cover; background-position: center; background-color: var(--netu-seb-tint); }
.netu-sharecard-idwrap { padding: 0 16px 14px; }
.netu-sharecard-avatar {
    width: 66px; height: 66px;
    display: block;
    margin-top: -33px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px -4px rgba(12, 27, 42, .35);
}
.netu-sharecard--company .netu-sharecard-avatar { border-radius: 14px; }
.netu-sharecard-avatar--ph {
    display: flex; align-items: center; justify-content: center;
    color: var(--netu-blue);
    font-size: 28px;
}
.netu-sharecard-name {
    font-weight: 800; font-size: 19px; line-height: 1.2;
    margin-top: 8px;
    color: var(--netu-ink);
    word-break: break-word;
}
/* The same italic citation treatment the page itself opens with (booth-lede). */
.netu-sharecard-sub { font-size: 13px; font-style: italic; color: var(--netu-slate); margin-top: 3px; word-break: break-word; }
.netu-sharecard-link {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    margin-top: 10px;
    padding: 7px 12px;
    background: #f7f8fa;
    border: 1px solid var(--netu-line);
    border-radius: 999px;
    font-size: 12.5px;
    color: var(--netu-slate);
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.netu-sharecard-link:hover { border-color: var(--netu-seb-1); color: var(--netu-ink); background: var(--netu-seb-tint); }
.netu-sharecard-link span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }

.netu-sharecard-body { padding: 14px 16px 18px; }

/* --- the visitor side (card-visitor-modal): card at the top, quick actions in a 2×2 grid --- */
.netu-sharecard-card--visitor { margin-top: 16px; }
.netu-sharecard-qactions { grid-template-columns: repeat(2, 1fr); }

.hero-card-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
/* ⛔ LIVE buttons, styled like it (Pushpak, 2026-09-25). These shipped as dashed-grey "approved disabled
   placeholders" before Connections/Follow/CRM notes existed — the features arrived, the buttons kept the
   dead look, and members read them as disabled. NetU blue accent (the Sebastian gradient stays reserved
   for the page's ONE primary CTA); lift on hover, press on click, per the locked CTA motion rules. */
.hero-card-action {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 9px 4px;
    border: 1px solid color-mix(in srgb, var(--netu-blue) 32%, #fff);
    border-radius: 10px;
    background: var(--netu-blue-tint);
    color: var(--netu-blue-dark);
    font-size: 11.5px; font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease, color .18s ease,
                transform .16s ease, box-shadow .18s ease;
}
.hero-card-action i { font-size: 15px; color: var(--netu-blue); transition: color .18s ease; }
.hero-card-action:hover {
    background: var(--netu-blue);
    border-color: var(--netu-blue);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px color-mix(in srgb, var(--netu-blue) 30%, transparent);
}
.hero-card-action:hover i { color: #fff; }
.hero-card-action:active { transform: scale(.97); box-shadow: none; }

.hero-card-divider { height: 1px; background: var(--netu-line); margin: 14px 0 6px; }
.hero-card-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 7px 0;
    color: var(--netu-slate);
    font-size: 13.5px; line-height: 1.45;
}
.hero-card-row i { color: var(--netu-blue); margin-top: 1px; }
.hero-card-row a { color: var(--netu-blue-dark); text-decoration: none; word-break: break-all; }
.hero-card-row a:hover { text-decoration: underline; }

.hero-card-socials { display: flex; gap: 8px; margin-top: 10px; }
.hero-card-socials a {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--netu-line);
    color: var(--netu-slate); font-size: 15px;
    text-decoration: none;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.hero-card-socials a:hover { border-color: var(--netu-blue); color: var(--netu-blue-dark); background: var(--netu-blue-tint); }

/* -------------------------------------------------------------------------
 * Notification center (topbar bell + dropdown + list page)
 * ------------------------------------------------------------------------- */
.notif-bell-wrap { position: relative; margin: 5px;}

.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--netu-red);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}

.notif-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 380px;
    max-width: calc(100vw - 24px);
    max-height: 70vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--netu-line);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(15, 33, 55, 0.16);
    z-index: 1080;
}

/* ⛔ Mobile (#, Pushpak, 2026-07-27): the bell sits mid-right (the avatar is to its right), so `right:0` anchored
   to the bell-wrap pushed the 380px panel PAST the left edge — clipping the "Notifications" title. Below sm, pin
   the panel to the VIEWPORT with side gutters instead (the sticky header is not a transform, so `fixed` anchors
   to the viewport). Full-width, always on-screen. */
@media (max-width: 575.98px) {
    .notif-dropdown {
        position: fixed;
        top: calc(var(--netu-topbar-height) + 8px);
        left: 10px;
        right: 10px;
        width: auto;
        max-width: none;
        max-height: calc(100vh - var(--netu-topbar-height) - 24px);
    }
}

/* Smooth open/close (never abrupt) */
.notif-anim-enter { transition: opacity 0.18s ease, transform 0.18s ease; }
.notif-anim-leave { transition: opacity 0.14s ease, transform 0.14s ease; }
.notif-anim-from { opacity: 0; transform: translateY(-6px); }
.notif-anim-to { opacity: 1; transform: translateY(0); }

.notif-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--netu-line);
}

.notif-panel-title { font-weight: 700; color: var(--netu-ink); font-size: 0.95rem; }

.notif-mark-all {
    background: none;
    border: none;
    padding: 0;
    color: var(--netu-blue);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.notif-mark-all:hover { text-decoration: underline; }

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    text-decoration: none;
    border-bottom: 1px solid var(--netu-line);
    transition: background 0.15s ease;
}
.notif-item:last-of-type { border-bottom: none; }
.notif-item:hover { background: var(--netu-surface); }
.notif-item.unread { background: var(--netu-blue-tint); }
.notif-item.unread:hover { background: color-mix(in srgb, var(--netu-blue-tint) 80%, var(--netu-blue) 6%); }

.notif-ic {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--netu-blue-tint);
    color: var(--netu-blue);
    font-size: 0.95rem;
}

.notif-content { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-title { font-weight: 600; color: var(--netu-ink); font-size: 0.88rem; line-height: 1.35; }
.notif-text {
    color: var(--netu-slate);
    font-size: 0.82rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.notif-time { color: var(--netu-slate-light); font-size: 0.75rem; }

.notif-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--netu-blue);
    margin-left: auto;
    margin-top: 6px;
}

.notif-empty {
    padding: 2rem 1.25rem;
    text-align: center;
    color: var(--netu-slate);
}
.notif-empty i { font-size: 1.6rem; color: var(--netu-slate-light); display: block; margin-bottom: 0.5rem; }
.notif-empty p { margin: 0; font-size: 0.85rem; }

.notif-panel-foot {
    padding: 0.7rem 1rem;
    text-align: center;
    border-top: 1px solid var(--netu-line);
}
.notif-panel-foot a { color: var(--netu-blue); font-size: 0.85rem; font-weight: 600; text-decoration: none; }
.notif-panel-foot a:hover { text-decoration: underline; }

/* Full list page */
.notif-list-card {
    margin-top: 1rem;
    background: #fff;
    border: 1px solid var(--netu-line);
    border-radius: 14px;
    overflow: hidden;
}

/* -------------------------------------------------------------------------
 * Action card states + private notes modal (booth / member profile)
 * ------------------------------------------------------------------------- */
.hero-card-action-form { display: contents; }

/* Settled states (Pending / Connected) — genuinely inert, so they DO go quiet: neutral border, no hover
   motion. The contrast with the live blue buttons is now the signal disabled-vs-enabled. */
.hero-card-action.is-state {
    color: var(--netu-slate);
    background: var(--netu-surface);
    border-color: var(--netu-line);
    cursor: default;
    opacity: 1;
}
.hero-card-action.is-state:hover { transform: none; box-shadow: none; }
.hero-card-action.is-state i, .hero-card-action.is-state:hover i { color: var(--netu-slate); }
/* Following — visibly ON: solid blue border + deeper tint (the base's light tint now means "available"). */
.hero-card-action.is-active {
    color: var(--netu-blue-dark);
    background: color-mix(in srgb, var(--netu-blue) 14%, #fff);
    border-color: var(--netu-blue);
}
.hero-card-action.is-attention {
    color: #fff;
    background: var(--netu-blue);
}
.hero-card-action.is-attention:hover { background: var(--netu-blue-dark); }

.notes-count-badge {
    position: absolute;
    top: 4px;
    right: 8px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--netu-blue);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.notes-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 33, 55, 0.45);
    z-index: 1090;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4rem 1rem 2rem;
    overflow-y: auto;
}

.notes-modal {
    width: 640px;
    max-width: 100%;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(15, 33, 55, 0.28);
    overflow: hidden;
}

.notes-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.1rem 1.25rem 0.9rem;
    border-bottom: 1px solid var(--netu-line);
}
.notes-title { font-weight: 700; color: var(--netu-ink); font-size: 1rem; }
.notes-title i { color: var(--netu-blue); margin-right: 0.35rem; }
.notes-privacy { color: var(--netu-slate-light); font-size: 0.78rem; margin-top: 2px; }
.notes-privacy i { margin-right: 0.25rem; }
.notes-close {
    background: none;
    border: none;
    color: var(--netu-slate);
    font-size: 1rem;
    padding: 0.25rem;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s ease;
}
.notes-close:hover { background: var(--netu-surface); }

.notes-editor-wrap { padding: 1rem 1.25rem; border-bottom: 1px solid var(--netu-line); }
.notes-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.notes-error { color: var(--netu-red); font-size: 0.82rem; margin-top: 0.5rem; }

.notes-list { max-height: 40vh; overflow-y: auto; padding: 0.5rem 1.25rem 1rem; }
.note-item { padding: 0.85rem 0; border-bottom: 1px solid var(--netu-line); }
.note-item:last-child { border-bottom: none; }
.note-body { color: var(--netu-ink); font-size: 0.9rem; line-height: 1.55; word-break: break-word; }
.note-body img, .note-body video, .note-body iframe { max-width: 100%; border-radius: 8px; }
.note-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
    color: var(--netu-slate-light);
    font-size: 0.75rem;
}
.note-meta-actions { margin-left: auto; display: flex; gap: 0.6rem; }
.note-meta-actions button {
    background: none;
    border: none;
    padding: 0;
    color: var(--netu-blue);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}
.note-meta-actions button:hover { text-decoration: underline; }
.notes-empty { color: var(--netu-slate); font-size: 0.85rem; padding: 1rem 0; text-align: center; }

/* -------------------------------------------------------------------------
 * Network hub (/app/network)
 * ------------------------------------------------------------------------- */
.net-tabs {
    display: flex;
    gap: 0.35rem;
    margin: 1rem 0 1.1rem;
    border-bottom: 1px solid var(--netu-line);
    overflow-x: auto;
}
.net-tab {
    padding: 0.55rem 0.9rem;
    color: var(--netu-slate);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.net-tab:hover { color: var(--netu-ink); }
.net-tab.active { color: var(--netu-blue); border-bottom-color: var(--netu-blue); }
.net-tab-count {
    display: inline-block;
    min-width: 20px;
    padding: 0 6px;
    margin-left: 4px;
    border-radius: 10px;
    background: var(--netu-surface);
    color: var(--netu-slate);
    font-size: 0.72rem;
    line-height: 20px;
    text-align: center;
}
.net-tab.active .net-tab-count { background: var(--netu-blue-tint); color: var(--netu-blue); }

.net-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--netu-line);
}
.net-row:last-child { border-bottom: none; }
.net-row-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
    text-decoration: none;
}
.net-avatar {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--netu-surface);
}
.net-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--netu-slate-light);
    font-size: 1.1rem;
}
.net-row-text { display: flex; flex-direction: column; min-width: 0; }
.net-row-name { font-weight: 600; color: var(--netu-ink); font-size: 0.92rem; }
.net-row-sub {
    color: var(--netu-slate);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.net-row-chip {
    color: var(--netu-slate);
    font-size: 0.8rem;
    white-space: nowrap;
}
.net-row-chip i { color: var(--netu-blue); }
.net-row-actions { display: flex; gap: 0.5rem; }
.btn-sm-pad { padding: 0.35rem 0.9rem; font-size: 0.82rem; }

/* Privacy switches on the profile editor */
.pf-switch { padding: 0.6rem 0 0.6rem 3rem; border-bottom: 1px solid var(--netu-line); }
.pf-switch:last-child { border-bottom: none; }
.pf-switch .form-check-input { margin-left: -3rem; margin-top: 0.35rem; cursor: pointer; }
.pf-switch-t { display: block; font-weight: 600; color: var(--netu-ink); font-size: 0.9rem; }
.pf-switch-s { display: block; color: var(--netu-slate); font-size: 0.8rem; margin-top: 1px; }

/* Action card now sits INSIDE the booth hero (right cell of .booth-hero-inner).
   It rides the hero's transparent right side; the content grid below is a
   centered col-8/col-4 that no longer pulls up over the hero. */
.booth-hero-inner > .hero-card { width: 100%; align-self: end; }
@media (max-width: 900px) {
    .booth-hero-inner > .hero-card { max-width: 420px; margin-top: -25px;}
}

/* =============================================================
   Public member profile — locked booth conventions applied
   (canvas, free-flowing content, card-in-hero, col-8/col-4).
   ============================================================= */
/* Page canvas — surface tone from below the hero to the footer (mirrors .booth) */
.pubp-canvas { background: var(--netu-surface); padding-bottom: 72px; }

/* Action card in the identity bar's right cell — floats up over the clean banner (hero redesign 2026-07-22). */
.pubp-hero-inner > .hero-card { width: 100%; align-self: start; }

@media (max-width: 900px) {
    .pubp-hero-inner > .hero-card { max-width: 420px; }
    .pubp-wrap { padding-left: 16px; padding-right: 16px; }
}

/* =========================================================================
   SEARCH & DIRECTORY  (Phase 3.6)

   Layout: topbar + content only. The left column is FILTERS, not app nav —
   someone here is working a lead list, not navigating the product.

   Company results are BUSINESS CARDS: identity, the facts that qualify a
   lead, then contact handles along the bottom edge. Everything derives from
   the locked --netu-* tokens; no new palette (lesson #26).
   ========================================================================= */

.netu-searchpage {
    padding-top: 1.5rem;
    padding-bottom: 3rem;
}

.netu-searchpage-head h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--netu-ink);
    margin-bottom: .25rem;
}
.netu-searchpage-head p {
    color: var(--netu-slate);
    margin-bottom: 1.25rem;
}

/* Filters (left) + results (right). Collapses to one column on small screens. */
.netu-searchpage-body {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 991.98px) {
    /* ⛔ minmax(0, 1fr), NOT plain 1fr (Pushpak, 2026-07-27). Plain `1fr` is `minmax(auto, 1fr)` — the column is
       min-CONTENT sized, so one wide child (the tab row, a result card) grows it past the viewport and the whole
       page overflows and gets cut on mobile. `minmax(0, …)` lets the column shrink so children wrap/fit instead —
       the same fix the desktop content column already uses. */
    .netu-searchpage-body { grid-template-columns: minmax(0, 1fr); }
}

/* The results column is a grid item, which defaults to min-width:auto (min-content) — so a wide child (the tab
   row, a result card) can still push it past the viewport even with minmax(0,…) on the track. min-width:0 lets it
   shrink; the children then wrap/ellipsize inside it instead of the page scrolling sideways (Pushpak, 2026-07-27). */
.netu-searchpage-main { min-width: 0; }

/* ---------------------------- Filter rail ---------------------------- */

.netu-filters {
    position: sticky;
    top: 5.5rem;                      /* clears the sticky topbar */
    background: #fff;
    border: 1px solid var(--netu-line);
    border-radius: .75rem;
    padding: 1rem;
}
.netu-filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
}
.netu-filters-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--netu-ink);
    margin: 0;
}
/* Head-right cluster (Clear all + mobile caret). Caret hidden on desktop — the rail is always open there. */
.netu-filters-head-right {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.netu-filters-caret { display: none; }
/* Active-filter count pill, shown beside "Filters" (most useful when the rail is collapsed on mobile). */
.netu-filters-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .35rem;
    margin-left: .4rem;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--netu-blue);
    border-radius: 999px;
    vertical-align: middle;
}

/* ---- Mobile: the rail collapses behind a tap-to-expand "Filters" bar (Pushpak, 2026-07-27) ----
   Below lg the filter form used to stack full-width ABOVE the results, so a phone user scrolled past five
   controls + Apply before seeing a single result. Now the head is a tappable bar and the body animates open
   with the grid-rows 0fr→1fr trick (smooth height, no max-height guesswork). Overflow flips to visible AFTER
   the transition so the Country/Industry facet dropdowns are never clipped once the rail is open. */
@media (max-width: 991.98px) {
    .netu-filters { position: static; }
    .netu-filters-head {
        margin-bottom: 0;
        cursor: pointer;
        user-select: none;
    }
    .netu-filters-caret {
        display: inline-block;
        color: var(--netu-slate);
        transition: transform .25s ease;
    }
    .netu-filters.is-open .netu-filters-caret { transform: rotate(180deg); }

    .netu-filters-body {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows .28s ease;
    }
    .netu-filters.is-open .netu-filters-body { grid-template-rows: 1fr; }
    .netu-filters-body-inner {
        min-height: 0;
        overflow: hidden;
    }
    .netu-filters.is-open .netu-filters-body-inner {
        overflow: visible;
        transition: overflow 0s .28s;         /* stay clipped during the open, then let dropdowns escape */
        padding-top: .75rem;
    }
}
.netu-filters-clear {
    font-size: .8rem;
    color: var(--netu-blue);
    text-decoration: none;
}
.netu-filters-clear:hover { text-decoration: underline; }

.netu-filter-group { margin-bottom: 1rem; }
.netu-filter-label {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--netu-slate);
    margin-bottom: .35rem;
}

.netu-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.netu-filter-pill input { position: absolute; opacity: 0; pointer-events: none; }
.netu-filter-pill span {
    display: inline-block;
    padding: .2rem .55rem;
    font-size: .78rem;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid var(--netu-line);
    color: var(--netu-slate);
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.netu-filter-pill input:checked + span {
    color: #fff;
    background: var(--netu-blue);
    border-color: var(--netu-blue);
}
.netu-filter-pill input:focus-visible + span {
    outline: 2px solid var(--netu-blue);
    outline-offset: 2px;
}
.netu-filter-any {
    display: block;
    margin-top: .5rem;
    font-size: .8rem;
    color: var(--netu-slate);
}

/* ---------------------------- Results bar ---------------------------- */

.netu-results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .85rem;
}
.netu-results-bar h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--netu-ink);
    margin: 0;
}
.netu-results-count { margin: 0; color: var(--netu-ink); }
.netu-results-section + .netu-results-section { margin-top: 2rem; }

.netu-search-tabs { margin-bottom: 1.25rem; }
.netu-tab-count {
    display: inline-block;
    margin-left: .3rem;
    padding: 0 .4rem;
    font-size: .72rem;
    font-weight: 700;
    border-radius: 999px;
    color: var(--netu-slate);
    background: color-mix(in srgb, var(--netu-slate) 12%, transparent);
}

/* ---------------------------- The business card ---------------------------- */

.netu-bizcard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}
.netu-bizcard-grid--people {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.netu-bizcard-list { display: flex; flex-direction: column; gap: .75rem; }

.netu-bizcard {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--netu-line);
    border-radius: .75rem;
    padding: 1rem;
    transition: box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease;
}
.netu-bizcard:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--netu-blue) 35%, var(--netu-line));
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .07);
}
@media (prefers-reduced-motion: reduce) {
    .netu-bizcard { transition: none; }
    .netu-bizcard:hover { transform: none; }
}

.netu-bizcard-head {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
}

.netu-bizcard-logo,
.netu-bizcard-avatar {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--netu-surface);
    border: 1px solid var(--netu-line);
    color: var(--netu-slate);
    font-weight: 700;
    text-decoration: none;
}
.netu-bizcard-logo { border-radius: .5rem; }
.netu-bizcard-avatar { border-radius: 50%; }
.netu-bizcard-logo img,
.netu-bizcard-avatar img { width: 100%; height: 100%; object-fit: cover; }
.netu-bizcard-logo img { object-fit: contain; }

.netu-bizcard-id { min-width: 0; }        /* lets the truncation actually work */

.netu-bizcard-name {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 .15rem;
    line-height: 1.3;
}
.netu-bizcard-name a {
    color: var(--netu-ink);
    text-decoration: none;
}
.netu-bizcard-name a:hover { color: var(--netu-blue); }

.netu-bizcard-tagline {
    font-size: .85rem;
    color: var(--netu-slate);
    margin: 0 0 .25rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
.netu-bizcard-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    font-size: .78rem;
    color: var(--netu-faint);
    margin: 0;
}

/* The qualifying facts — chips reuse the booth's chip styles so a card and a booth speak the same language. */
.netu-bizcard-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin: .85rem 0 0;
}
.netu-bizcard-fact {
    font-size: .75rem;
    color: var(--netu-slate);
    white-space: nowrap;
}

/* The bottom edge: handles on the left, the action on the right. */
.netu-bizcard-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: auto;
    padding-top: .85rem;
}
.netu-bizcard-head + .netu-bizcard-foot,
.netu-bizcard-facts + .netu-bizcard-foot {
    margin-top: .85rem;
    border-top: 1px solid var(--netu-line);
}

.netu-bizcard-handles {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}
.netu-bizcard-site {
    font-size: .78rem;
    color: var(--netu-blue);
    text-decoration: none;
    max-width: 11ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.netu-bizcard-site:hover { text-decoration: underline; }

.netu-bizcard-socials {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: 1rem;
}
.netu-bizcard-socials a {
    color: var(--netu-slate-light);
    line-height: 1;
    transition: color 140ms ease;
}
.netu-bizcard-socials a:hover { color: var(--netu-blue); }

.netu-bizcard-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .7rem;
    font-size: .8rem;
    font-weight: 600;
    border-radius: 999px;
    text-decoration: none;
    color: var(--netu-blue);
    background: color-mix(in srgb, var(--netu-blue) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--netu-blue) 22%, transparent);
    transition: background-color 140ms ease, color 140ms ease;
}
.netu-bizcard-cta:hover {
    color: #fff;
    background: var(--netu-blue);
}
.netu-bizcard-cta--ghost {
    color: var(--netu-slate);
    background: transparent;
    border-color: var(--netu-line);
}
.netu-bizcard-cta--ghost:hover { color: #fff; background: var(--netu-slate); }

/* List row: same card, laid out wide for scanning. */
.netu-bizcard--row {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}
.netu-bizcard--row .netu-bizcard-facts { margin-top: .5rem; }
.netu-bizcard-rowside {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}
@media (max-width: 575.98px) {
    .netu-bizcard--row { flex-direction: column; align-items: flex-start; }
    .netu-bizcard-rowside { flex-direction: row; align-items: center; }
}

/* ---------------------------- Hero band (locked 2026-07-12) ----------------------------
   The booth's opening move, on the search surfaces: full-bleed brand gradient, one big pill.
   Same gradient family as .booth-hero, lightened via color-mix so the tokens stay the lock. */

.netu-search-hero {
    /* THE LOCKED HERO GRADIENT (Pushpak, 2026-07-13) — the same one /faqs, /pricing and a bannerless booth use.
       ⚠ This partly walks back 2026-07-12, when the band was removed because a coloured strip sat awkwardly on
       plain white and the backdrop moved to .netu-search-surface. Both decisions are honoured by fading the
       gradient OUT at the bottom and dropping the hard border: it reads as the hero dissolving into the page's
       surface, not as a strip pasted on top of it. */
    background:
        linear-gradient(to bottom, rgba(255,255,255,0) 55%, rgba(255,255,255,.55) 100%),
        var(--netu-hero-bg);
    border-bottom: 0;
}
.netu-search-hero-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 2.75rem 40px 2.25rem;
}
.netu-search-hero h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--netu-blue-dark);
    margin: 0 0 .25rem;
}
.netu-search-hero-sub {
    color: var(--netu-slate);
    margin: 0 0 1.25rem;
}

.netu-search-hero-pill {
    display: flex;
    align-items: center;
    gap: .6rem;
    max-width: 640px;
    background: #fff;
    border: 1px solid var(--netu-line);
    border-radius: 999px;
    padding: .35rem .5rem .35rem 1.1rem;
    box-shadow: 0 10px 30px rgba(12, 27, 42, .10);
}
.netu-search-hero-pill i { color: var(--netu-slate-light); }
.netu-search-hero-pill input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    font-size: 1rem;
    background: transparent;
    color: var(--netu-ink);
}
.netu-search-hero-pill button {
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    padding: .55rem 1.4rem;
    font-weight: 600;
    color: #fff;
    background: var(--netu-blue);
    transition: background-color 140ms ease;
}
.netu-search-hero-pill button:hover { background: var(--netu-blue-dark); }

@media (max-width: 767.98px) {
    .netu-search-hero-inner { padding: 2rem 1rem 1.5rem; }
    .netu-search-hero h1 { font-size: 1.5rem; }
}

/* Softer rail under the hero — shadow instead of a hard box (the booth-card treatment). */
.netu-filters {
    border: 1px solid var(--netu-line);
    box-shadow: var(--netu-card-shadow);
    border-radius: 14px;
}

/* ---------------------------- Mini-booth card (locked 2026-07-12) ----------------------------
   The booth hero in miniature: banner strip + white scrim, logo overlapping the edge in a white frame. */

.netu-bizcard--booth { padding: 0; overflow: hidden; }

.netu-bizcard-banner {
    position: relative;
    height: 76px;
    background-size: cover;
    background-position: center;
}
/* The booth's left→right white scrim, so text and logo always sit on something readable. */
.netu-bizcard-banner::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg,
        rgba(255,255,255,.85) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,.15) 100%);
}
/* No banner → the booth's brand gradient, tinted down. */
.netu-bizcard-banner--brand {
    background: linear-gradient(120deg,
        color-mix(in srgb, var(--netu-blue) 30%, #fff) 0%,
        color-mix(in srgb, var(--netu-seb-1) 35%, #fff) 60%,
        color-mix(in srgb, var(--netu-seb-2) 40%, #fff) 100%);
}
.netu-bizcard-banner--brand::after { content: none; }

.netu-bizcard-head--overlap {
    position: relative;
    margin-top: 6px;
    padding: 0 1rem;
}
.netu-bizcard-logo--framed {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: #fff;
    border: 3px solid #fff;
    box-shadow: 0 4px 14px rgba(12, 27, 42, .18);
}

/* The booth-style card body gets its side padding back (the card itself is p-0 for the banner). */
.netu-bizcard--booth .netu-bizcard-facts { margin: .85rem 1rem 0; }
.netu-bizcard--booth .netu-bizcard-foot  { margin: .85rem 1rem 0; padding: .85rem 0 1rem; }

/* ---- Lead Directory card (web-searched leads: no banner, no booth page) ---- */
.netu-bizcard--directory .netu-bizcard-head { align-items: center; }
/* The logo is a real favicon (small): give it a clean tile and let the icon sit at its
   own size, centered, instead of stretching a 16–32px favicon across 48px. */
.netu-dirlogo {
    width: 48px; height: 48px;
    background: var(--netu-surface);
    border: 1px solid var(--netu-line);
    border-radius: 10px;
    padding: 8px;
}
.netu-dirlogo img {
    width: 100%; height: 100%;
    object-fit: contain;         /* keep aspect; never crop a logo */
}
.netu-dir-badges { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .3rem; }
.netu-dir-badges .badge { font-weight: 600; }

/* ---------------------------- Map view ---------------------------- */

.netu-directory-map {
    width: 100%;
    height: min(70vh, 680px);
    border-radius: 14px;
    border: 1px solid var(--netu-line);
    box-shadow: var(--netu-card-shadow);
    overflow: hidden;
}

/* The info window's mini business card. */
.netu-map-card { max-width: 240px; font-family: inherit; }
.netu-map-card-logo {
    width: 36px; height: 36px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid var(--netu-line);
    display: block;
    margin-bottom: .35rem;
}
.netu-map-card-name {
    display: block;
    font-weight: 700;
    color: var(--netu-ink);
    text-decoration: none;
    margin-bottom: .15rem;
}
.netu-map-card-name:hover { color: var(--netu-blue); }
.netu-map-card-tagline { font-size: .8rem; color: var(--netu-slate); margin: 0 0 .2rem; }
.netu-map-card-loc { font-size: .75rem; color: var(--netu-faint); margin: 0 0 .5rem; }
.netu-map-card-cta {
    display: inline-block;
    padding: .25rem .7rem;
    font-size: .78rem;
    font-weight: 600;
    border-radius: 999px;
    text-decoration: none;
    color: #fff;
    background: var(--netu-blue);
}

/* =========================================================================
   MARKETING SURFACE  (Phase M)
   The indexed pages: /solutions/*, /about, /whynetu, /faqs, /contactus …
   Same hero language as the booth and the directory. Tokens only (lesson #26).
   ========================================================================= */

/* The marketing hero — now one of several that share the ONE locked gradient. Nothing here changed
   visually; the literal gradient just moved into --netu-hero-bg so there is a single place to change it. */
.netu-mkt-hero {
    background: var(--netu-hero-bg);
    border-bottom: 1px solid var(--netu-line);
}
.netu-mkt-hero-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 4rem 1.5rem 3.5rem;
    text-align: center;
}
.netu-mkt-hero h1 {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    color: var(--netu-blue-dark);
    line-height: 1.2;
    margin: 0 0 .75rem;
}
.netu-mkt-lede {
    font-size: 1.15rem;
    color: var(--netu-slate);
    max-width: 58ch;
    margin: 0 auto 1.75rem;
}
.netu-mkt-eyebrow { margin: 0 0 .5rem; }
.netu-mkt-eyebrow a { color: var(--netu-blue); text-decoration: none; font-weight: 600; }

.netu-mkt-cta {
    display: inline-block;
    padding: .9rem 2.25rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
    background: var(--netu-blue);
    border: 0;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--netu-blue) 30%, transparent);
    transition: transform 160ms ease, background-color 160ms ease;
}
.netu-mkt-cta:hover { background: var(--netu-blue-dark); color: #fff; transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .netu-mkt-cta:hover { transform: none; } }

.netu-mkt-body {
    max-width: 900px;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
}
.netu-mkt-body h2 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--netu-ink);
    margin: 2rem 0 .75rem;
}
.netu-mkt-body p { color: var(--netu-slate); line-height: 1.7; }

/* The bullet list on a persona page — the promise list. */
.netu-mkt-list { list-style: none; padding: 0; margin: 0; }
.netu-mkt-list li {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 0;
    border-bottom: 1px solid var(--netu-line);
    color: var(--netu-ink);
    line-height: 1.6;
}
.netu-mkt-list li:last-child { border-bottom: 0; }
.netu-mkt-list i { color: var(--netu-blue); font-size: 1.25rem; margin-top: .1rem; }

.netu-mkt-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem 2rem;
}
.netu-mkt-cols h2 { margin-top: 0; }

.netu-mkt-values { list-style: none; padding: 0; }
.netu-mkt-values li {
    padding: .85rem 0 .85rem 1.25rem;
    border-left: 3px solid var(--netu-blue);
    margin-bottom: 1rem;
    color: var(--netu-slate);
    line-height: 1.6;
}
.netu-mkt-values strong { display: block; color: var(--netu-ink); }

.netu-mkt-prose { color: var(--netu-slate); line-height: 1.75; }
.netu-mkt-prose h2:first-child { margin-top: 0; }
.netu-mkt-prose ul { padding-left: 1.25rem; }
.netu-mkt-prose li { margin-bottom: .5rem; }

.netu-mkt-foot { text-align: center; margin-top: 3rem; }
.netu-mkt-alt { margin-top: 1rem; font-size: .9rem; color: var(--netu-faint); }
.netu-mkt-alt a { color: var(--netu-blue); text-decoration: none; }
.netu-mkt-alt a:hover { text-decoration: underline; }

/* The /compare/* long-form comparison articles (AI Search Visibility Kit).
   Narrower column than .netu-mkt-body — these are reading pages, not landing pages. */
.netu-compare {
    max-width: 760px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4rem;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--netu-ink);
}
.netu-compare h1 { font-size: 2rem; line-height: 1.25; color: var(--netu-blue-dark); margin: 0 0 .5rem; }
.netu-compare h2 { font-size: 1.45rem; line-height: 1.3; color: var(--netu-ink); margin: 1.8em 0 .5em; }
.netu-compare h3 { font-size: 1.15rem; color: var(--netu-ink); margin: 1.5em 0 .4em; }
.netu-compare p, .netu-compare li { margin: 0 0 1em; color: var(--netu-slate); }
.netu-compare p strong, .netu-compare li strong { color: var(--netu-ink); }
.netu-compare ol, .netu-compare ul { padding-left: 1.4em; }
/* :not() keeps prose links blue without out-specificity-ing the CTA pill's white text */
.netu-compare a:not(.netu-mkt-cta) { color: var(--netu-blue); }
.netu-compare hr { border: none; border-top: 1px solid var(--netu-line); margin: 2.5em 0; }
.netu-compare .table-scroll { overflow-x: auto; margin: 1.2em 0; }
.netu-compare table { border-collapse: collapse; width: 100%; font-size: .85em; line-height: 1.45; }
.netu-compare th, .netu-compare td {
    border: 1px solid var(--netu-line);
    padding: .55em .7em;
    text-align: left;
    vertical-align: top;
    color: var(--netu-slate);
}
.netu-compare th { background: color-mix(in srgb, var(--netu-blue) 6%, #fff); color: var(--netu-ink); }
.netu-compare .netu-compare-updated { color: var(--netu-faint); font-size: .9rem; }
.netu-compare .netu-mkt-cta { margin-top: .5rem; }
/* Draft-only: unverified facts carried over from the kit. Zero of these may remain at publish. */
.netu-compare mark.todo {
    background: #ffe08a;
    color: #7a1f1f;
    font-weight: 700;
    padding: 0 .2em;
    border-radius: 2px;
}

/* Contact form */
.netu-mkt-form-card {
    max-width: 560px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--netu-line);
    border-top: 3px solid var(--netu-blue);
    border-radius: 14px;
    padding: 2rem;
    box-shadow: var(--netu-card-shadow);
}
.netu-mkt-field { margin-bottom: 1rem; }
.netu-mkt-field label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    color: var(--netu-slate);
    margin-bottom: .35rem;
}
.netu-optional { color: var(--netu-faint); font-weight: 500; }
/* Honeypot: off-screen, never display:none (some bots skip hidden fields). */
.netu-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* FAQ accordion */
.netu-faq { border-bottom: 1px solid var(--netu-line); }
.netu-faq-q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1.15rem 0;
    background: none;
    border: 0;
    text-align: left;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--netu-ink);
}
.netu-faq-q:hover { color: var(--netu-blue); }
.netu-faq-q i { transition: transform 200ms ease; color: var(--netu-slate-light); }
.netu-faq-q i.rotated { transform: rotate(180deg); }
.netu-faq-a { padding: 0 0 1.25rem; color: var(--netu-slate); line-height: 1.7; }
/* Admin-authored answer HTML (Quill) may carry images/embeds with their natural size or a width="" attribute —
   nothing clamped them, so a wide screenshot pushed /faqs sideways. Clamp media to the column on both the list
   and the /faqs/{slug} permalink (.netu-mkt-prose); height:auto overrides a stale height="" so it never squashes.
   overflow-wrap catches the other offender: a long pasted URL with no break points. */
.js-faq-answer, .netu-mkt-prose { overflow-wrap: anywhere; }
.js-faq-answer img, .js-faq-answer video, .js-faq-answer iframe,
.netu-mkt-prose img, .netu-mkt-prose video, .netu-mkt-prose iframe { max-width: 100%; }
.js-faq-answer img, .js-faq-answer video,
.netu-mkt-prose img, .netu-mkt-prose video { height: auto; }
.netu-faq-link { margin: .75rem 0 0; font-size: .85rem; }
.netu-faq-link a { color: var(--netu-blue); text-decoration: none; }

/* FAQ search + category chips (2026-10-01) — the search pill reuses .netu-cat-search; chips wrap on mobile. */
.netu-faq-tools { margin-bottom: 1.5rem; }
.netu-faq-search { max-width: 100%; margin-bottom: .85rem; }
.netu-faq-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.netu-faq-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .85rem;
    border: 1px solid var(--netu-line); border-radius: 999px;
    background: transparent; color: var(--netu-slate);
    font-size: .85rem; font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.netu-faq-chip:hover { border-color: var(--netu-seb-1); color: var(--netu-ink); }
.netu-faq-chip.is-active { background: var(--netu-seb-tint); border-color: var(--netu-seb-1); color: var(--netu-ink); }
.netu-faq-chip-n { font-size: .75rem; font-weight: 500; color: var(--netu-slate-light); }
.netu-faq-count { margin: .75rem 0 0; font-size: .85rem; color: var(--netu-slate-light); }
.netu-faq-group + .netu-faq-group { margin-top: 2rem; }
.netu-faq-cat {
    margin: 0 0 .25rem; font-size: .8rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--netu-slate-light);
}
.netu-faq-enter { transition: opacity .22s ease, transform .22s ease; }
.netu-faq-enter-start { opacity: 0; transform: translateY(4px); }
.netu-faq-enter-end { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .netu-faq-enter { transition: none; } }
.netu-faq-empty { padding: 1.5rem 0; color: var(--netu-slate); }
.netu-faq-empty-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.netu-faq-ask {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem 1.1rem; border: 0; border-radius: 999px;
    background: linear-gradient(135deg, var(--netu-seb-1), var(--netu-seb-2));
    color: #fff; font-weight: 600; font-size: .9rem;
}
.netu-faq-human { color: var(--netu-blue); font-weight: 600; text-decoration: none; font-size: .9rem; }
.netu-faq-clear { border: 0; background: none; padding: 0; color: var(--netu-slate-light); font-size: .85rem; text-decoration: underline; }

/* -----------------------------------------------------------------------------
   PRODUCTS & CATALOGUE (Track C — C1)

   Three families land here, and two of them are deliberately GENERIC rather than
   product-specific: `.netu-table-*` and `.netu-form-*`. The member area had no table
   and no form pattern of its own — every page rolled its own (`ob-*`, `booth-form-*`,
   `pf-*`). RFQs, quotes and orders all need the same two things, so they are built
   once here instead of a fourth and fifth time later.
   ----------------------------------------------------------------------------- */

/* --- buttons: the missing small/ghost variants (the -primary/-secondary family is standalone) --- */
.netu-btn-ghost {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border: 1px solid transparent; border-radius: 9px;
    background: transparent; color: var(--netu-slate);
    font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.netu-btn-ghost:hover { background: var(--netu-surface); color: var(--netu-ink); border-color: var(--netu-line); }
.netu-btn-sm { padding: 5px 10px; font-size: 13px; border-radius: 7px; }
.netu-btn-danger { color: var(--netu-red); }
.netu-btn-danger:hover { background: var(--netu-red-tint); color: var(--netu-red); border-color: transparent; }

/* --- page header: title on the left, the one primary action on the right --- */
.netu-page-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 20px; flex-wrap: wrap; margin-bottom: 24px;
}

.netu-chip {
    background: var(--netu-blue-tint); color: var(--netu-blue-dark);
    font-weight: 600; font-size: 11px; padding: 3px 8px; border-radius: 999px;
}

/* --- table --- */
.netu-table-wrap {
    background: #fff; border: 1px solid var(--netu-line); border-radius: 14px;
    box-shadow: var(--netu-card-shadow); overflow-x: auto;   /* wide tables scroll, the page never does */
}
.netu-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.netu-table thead th {
    text-align: left; padding: 12px 16px; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: var(--netu-faint);
    border-bottom: 1px solid var(--netu-line); white-space: nowrap;
}
.netu-table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--netu-line); vertical-align: top; }
.netu-table tbody tr:last-child td { border-bottom: 0; }
.netu-table tbody tr { transition: background .15s ease; }
.netu-table tbody tr:hover { background: var(--netu-surface); }
.netu-table code { background: var(--netu-surface); padding: 2px 6px; border-radius: 5px; font-size: 12.5px; color: var(--netu-ink); }
.netu-table-link { color: var(--netu-ink); font-weight: 600; text-decoration: none; }
.netu-table-link:hover { color: var(--netu-blue); }
.netu-table-sub { color: var(--netu-slate-light); font-size: 13px; margin-top: 3px; max-width: 42ch; }

/* --- status pill --- */
.netu-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.netu-pill-ok   { background: color-mix(in srgb, #16a34a 12%, #fff); color: #15803d; }
.netu-pill-warn { background: var(--netu-amber-tint); color: #a16207; }

/* --- form --- */
.netu-form-card {
    background: #fff; border: 1px solid var(--netu-line); border-radius: 14px;
    box-shadow: var(--netu-card-shadow); padding: 4px 28px 28px;
}
.netu-form-section { border: 0; padding: 20px 0; margin: 0; border-bottom: 1px solid var(--netu-line); }
.netu-form-section:last-of-type { border-bottom: 0; }
.netu-form-section legend {
    float: none; width: auto; font-size: 15px; font-weight: 700;
    color: var(--netu-ink); margin-bottom: 4px; padding: 0;
}
.netu-form-note {
    display: flex; gap: 8px; align-items: flex-start;
    background: var(--netu-surface-blue); border-radius: 9px; padding: 10px 12px;
    color: var(--netu-slate); font-size: 13px; margin: 8px 0 16px;
}
/* A reassuring note, not an informational one — green because the news is good. */
.netu-form-note.netu-note-ok { background: var(--netu-surface-green); }
.netu-form-note.netu-note-ok > i { color: var(--netu-green, #16a34a); }

.netu-form-row { display: flex; gap: 16px; flex-wrap: wrap; }
.netu-form-row > .netu-field { flex: 1 1 260px; }

.netu-field { margin-bottom: 16px; }
.netu-field-sm { max-width: 240px; }
.netu-field-xs { flex: 0 0 130px; margin-bottom: 0; }
.netu-field label { display: block; font-size: 13px; font-weight: 600; color: var(--netu-ink); margin-bottom: 5px; }
.netu-field input[type="text"],
.netu-field input[type="email"],
.netu-field input[type="number"] {
    width: 100%; padding: 9px 12px; border: 1.5px solid var(--netu-line);
    border-radius: 9px; font-size: 14px; color: var(--netu-ink); background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.netu-field input:focus {
    outline: 0; border-color: var(--netu-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--netu-blue) 12%, transparent);
}
.netu-req { color: var(--netu-red); }
.netu-hint { display: block; color: var(--netu-slate-light); font-size: 12.5px; margin-top: 5px; }
.netu-form-actions {
    display: flex; justify-content: flex-end; gap: 10px; align-items: center;
    padding-top: 20px; border-top: 1px solid var(--netu-line);
}

/* --- switch --- */
/* ⛔ The `.netu-field label` selector includes the label element, so it OUTRANKS a bare `.netu-switch` —
   inside a form field the switch went display:block, its inline track span collapsed (inline spans ignore
   width/height) and the knob overlapped the text (/me/products/new, 2026-07-23). The scoped variant below
   keeps the switch a flex row wherever it sits. */
.netu-switch,
.netu-field label.netu-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; margin-bottom: 0; }
.netu-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.netu-switch > span:first-of-type {
    width: 40px; height: 22px; border-radius: 999px; background: var(--netu-line);
    position: relative; flex: 0 0 auto; transition: background .2s ease;
}
.netu-switch > span:first-of-type::after {
    content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
    border-radius: 50%; background: #fff; transition: transform .2s ease;   /* never abrupt */
}
.netu-switch input:checked + span { background: var(--netu-blue); }
.netu-switch input:checked + span::after { transform: translateX(18px); }
.netu-switch input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--netu-blue) 25%, transparent); }
.netu-switch-label { font-size: 14px; color: var(--netu-slate); font-weight: 500; }

/* --- quantity-break rows --- */
.netu-price-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.netu-price-row {
    display: flex; gap: 12px; align-items: flex-end;
    background: var(--netu-surface); border: 1px solid var(--netu-line);
    border-radius: 10px; padding: 12px;
}

/* --- the public price table: the thing a B2B buyer actually came for --- */
/* Price-break table (restyled 2026-10-13, Pushpak): a warm card surface in the settled language —
   Sebastian-tinted header band, roomy rows, hover lift on rows, the per-unit price as the loud column.
   Flat tint only (never a gradient ON text/controls), max-width so two columns don't stretch a mile apart. */
.netu-price-table {
    width: 100%; max-width: 480px; border-collapse: separate; border-spacing: 0;
    font-size: 14.5px; border: 1px solid var(--netu-line); border-radius: 12px; overflow: hidden;
    box-shadow: 0 4px 14px -8px rgba(0, 0, 0, .12);
}
.netu-price-table th {
    text-align: left; padding: 10px 16px; font-size: 11.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: var(--netu-seb-1);
    background: var(--netu-seb-tint);
    border-bottom: 1px solid var(--netu-line);
}
.netu-price-table th:last-child { text-align: right; }
.netu-price-table td {
    padding: 12px 16px; border-bottom: 1px solid var(--netu-line); color: var(--netu-ink);
    transition: background .15s ease;
}
.netu-price-table tbody tr:hover td { background: var(--netu-seb-tint); }
.netu-price-table tr:last-child td { border-bottom: 0; }
.netu-price-table td:first-child { color: var(--netu-faint); font-weight: 600; }
.netu-price-table td:last-child { text-align: right; font-weight: 800; font-size: 15.5px; }

/* --- the booth tab strip (assembled by ProfileTabRegistry) --- */
/* Tabs — SEGMENTED STRIP (Pushpak, 2026-09-29: "Bold, Bigger, different background"). A tinted
   strip aligned with the 1300px content (flush with the capped banner's edges); tabs are bold
   15.5px, the ACTIVE tab is a raised white pill. Replaces the underline bar. */
.booth-tabs { background: #fff; padding: 2px 0 6px; }
.booth-tabs-inner {
    display: flex; gap: 6px;
    background: var(--netu-surface);
    border: 1px solid var(--netu-line);
    border-radius: 12px;
    padding: 6px;
    /* Overflow stays scrollable for many tabs, but no bar is ever painted. */
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none;
}
.booth-tabs-inner::-webkit-scrollbar { display: none; }
.booth-tab {
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    padding: 10px 18px; font-size: 15.5px; font-weight: 700;
    color: var(--netu-slate); text-decoration: none;
    border-radius: 9px;
    transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.booth-tab:hover { color: var(--netu-blue); background: #fff; }
.booth-tab--active {
    color: var(--netu-blue);
    background: #fff;
    box-shadow: 0 2px 8px rgba(12, 27, 42, 0.10);
}

/* --- product result card: the business-card shell, without the banner --- */
.netu-bizcard--product .netu-bizcard-logo { border-radius: 10px; background: var(--netu-surface); font-size: 20px; color: var(--netu-faint); }
.netu-bizcard--product .netu-bizcard-site { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

/* --- chip inputs (fragments/chips-input) --- */
.netu-chips .ob-chip-select input,
.netu-chips .ob-tag-input-row input { width: 100%; }
.netu-chips .netu-hint { margin-top: 6px; }

/* --- price field: the $ lives in the UI, never in the value --- */
.netu-price-field { position: relative; display: flex; align-items: center; }
.netu-price-symbol {
    position: absolute; left: 11px; color: var(--netu-faint);
    font-size: 14px; font-weight: 600; pointer-events: none;
}
.netu-price-field input { padding-left: 24px !important; font-variant-numeric: tabular-nums; }

/* -----------------------------------------------------------------------------
   BOOTH TABS — product pages living INSIDE the booth shell

   Locked 2026-07-12 (Pushpak): a booth sub-page is the same page with a different main column. So these
   styles extend the booth's own vocabulary (booth-section, booth-card, booth-chip) rather than introducing
   a parallel one — the moment a tab gets its own look, it stops being a tab.
   ----------------------------------------------------------------------------- */

/* On a sub-page the company name steps down from <h1> to a link back to the overview.
   It MUST look identical — same size, same weight, same colour. This modifier therefore does NOT touch a
   single property that .booth-name sets; it only removes the underline an <a> brings with it and adds a hover.

   The first version set `color: inherit`, which quietly overrode .booth-name's colour — so the company name
   was blue on the booth and black on every tab, and a colour change to .booth-name appeared to "not work" on
   the sub-pages. A modifier that re-declares a property the base class owns is a second source of truth
   wearing the same class name. */
.booth-name--link { display: inline-block; text-decoration: none; }
.booth-name--link:hover { text-decoration: underline; text-underline-offset: 3px; opacity: .85; }

/* The tab's own title carries the h1 weight the hero gave up. */
.booth-section-title--page { font-size: 24px; }
.booth-section-sub { color: var(--netu-slate-light); font-size: 14px; margin: -4px 0 18px; }

.booth-crumbs { margin-bottom: 14px; font-size: 13px; }
.booth-crumbs a {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--netu-slate); text-decoration: none; font-weight: 600;
}
.booth-crumbs a:hover { color: var(--netu-blue); }

/* Two across in the booth's main column — the card is the same one search renders. */
.booth-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 991px) { .booth-product-grid { grid-template-columns: 1fr; } }

/* One product, in the main column */
.booth-product-kicker {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: var(--netu-faint); margin-bottom: 8px;
}
.booth-product-sku { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.booth-product-name { font-size: 26px; font-weight: 800; color: var(--netu-ink); margin-bottom: 10px; }
.booth-product-summary { font-size: 16px; color: var(--netu-slate); line-height: 1.6; margin-bottom: 14px; }

/* --- owner "Edit" affordances on products (card + detail) --- */
.netu-bizcard--product { position: relative; }
.netu-card-edit {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px; border-radius: 999px;
    background: #fff; border: 1px solid var(--netu-line);
    color: var(--netu-slate); font-size: 12px; font-weight: 600; text-decoration: none;
    opacity: 0; transition: opacity .18s ease, color .18s ease, border-color .18s ease;
}
/* Visible on hover/focus — it is the owner's tool, not part of the buyer's card.
   Always visible on touch, where there is no hover to reveal it. */
.netu-bizcard--product:hover .netu-card-edit,
.netu-card-edit:focus-visible { opacity: 1; }
@media (hover: none) { .netu-card-edit { opacity: 1; } }
.netu-card-edit:hover { color: var(--netu-blue); border-color: var(--netu-blue); }

.booth-product-headrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.booth-product-edit { flex: 0 0 auto; }

/* -----------------------------------------------------------------------------
   IMPORT WIZARD (C1.6) — upload → map → preview → commit
   ----------------------------------------------------------------------------- */
.netu-page-actions { display: flex; gap: 10px; align-items: center; }

/* The stepper: where am I, and how much is left */
.netu-steps { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 22px; flex-wrap: wrap; }
.netu-steps li {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 999px;
    background: #fff; border: 1px solid var(--netu-line);
    color: var(--netu-faint); font-size: 13px; font-weight: 600;
}
.netu-steps li span {
    display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
    background: var(--netu-surface); color: var(--netu-faint); font-size: 11px; font-weight: 700;
}
.netu-steps li.is-current { color: var(--netu-ink); border-color: var(--netu-blue); }
.netu-steps li.is-current span { background: var(--netu-blue); color: #fff; }
.netu-steps li.is-done { color: var(--netu-slate); }
.netu-steps li.is-done span { background: #16a34a; color: #fff; }

/* Dropzone */
.netu-dropzone {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    padding: 36px 20px; border: 2px dashed var(--netu-line); border-radius: 14px;
    background: var(--netu-surface); cursor: pointer; text-align: center;
    color: var(--netu-slate); font-size: 14px; font-weight: 600;
    transition: border-color .18s ease, background .18s ease;
}
.netu-dropzone:hover { border-color: var(--netu-blue); background: var(--netu-blue-tint); }
.netu-dropzone i { font-size: 30px; color: var(--netu-faint); }
.netu-dropzone input[type="file"] { position: absolute; opacity: 0; width: 0; height: 0; }
/* Selected state — confirms the file landed and cues the next step (border-color/background animate). */
.netu-dropzone.is-selected { border-style: solid; border-color: var(--netu-green, #16a34a); background: var(--netu-surface-green); }
.netu-dropzone.is-selected i { color: var(--netu-green, #16a34a); }
.netu-hint.netu-hint-ready { color: var(--netu-green, #16a34a); font-weight: 600; }
/* Upload row — file chooser and Continue on one plane; stacks on narrow screens. */
.netu-import-row { display: flex; align-items: center; gap: 16px; }
.netu-import-row .netu-dropzone { flex: 1; }
.netu-import-row .netu-import-continue { white-space: nowrap; align-self: center; }
@media (max-width: 640px) {
    .netu-import-row { flex-direction: column; align-items: stretch; }
}

/* Mapping table */
.netu-select, .netu-input {
    width: 100%; padding: 8px 10px; border: 1.5px solid var(--netu-line); border-radius: 9px;
    font-size: 14px; color: var(--netu-ink); background: #fff;
}
.netu-select:focus, .netu-input:focus {
    outline: 0; border-color: var(--netu-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--netu-blue) 12%, transparent);
}
.netu-map-table td { vertical-align: middle; }
.netu-map-table td:first-child { max-width: 320px; }

/* The four numbers that answer "what am I about to do to my catalogue?" */
.netu-import-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px; margin-bottom: 26px;
}
.netu-import-stat {
    background: #fff; border: 1px solid var(--netu-line); border-left-width: 4px;
    border-radius: 12px; padding: 16px 18px; box-shadow: var(--netu-card-shadow);
    display: flex; flex-direction: column; gap: 2px;
}
.netu-import-n { font-size: 28px; font-weight: 800; color: var(--netu-ink); line-height: 1.1; }
.netu-import-k { font-size: 13px; font-weight: 600; color: var(--netu-slate); }
.netu-import-h { font-size: 12px; color: var(--netu-faint); }
.netu-import-stat.is-new    { border-left-color: #16a34a; }
.netu-import-stat.is-update { border-left-color: var(--netu-blue); }
.netu-import-stat.is-error  { border-left-color: var(--netu-red); }
.netu-import-stat.is-warn   { border-left-color: var(--netu-warning); }
.netu-import-stat.is-muted  { border-left-color: var(--netu-line); opacity: .6; }
.netu-import-stat.is-muted .netu-import-n { color: var(--netu-faint); }

.netu-import-errors { margin-bottom: 28px; }
.netu-import-commit { margin-top: 24px; }

.netu-pill-info { background: var(--netu-blue-tint); color: var(--netu-blue-dark); }

.netu-import-recap {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--netu-amber-tint); border-radius: 10px; padding: 10px 14px;
    margin-bottom: 18px; font-size: 14px; color: #a16207;
}
.netu-import-recap a { color: #a16207; font-weight: 700; }

/* -----------------------------------------------------------------------------
   SEARCH: facets · match% · active filters · view switcher   (2026-07-12)
   ----------------------------------------------------------------------------- */

/* Active filters in the hero — what narrowed your results, visible and undoable.
   (The hero's own search box is GONE: three search inputs on one page is two too many.) */
.netu-active-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.netu-active-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.9); border: 1px solid var(--netu-line);
    border-radius: 999px; padding: 5px 12px;
    font-size: 13px; font-weight: 600; color: var(--netu-ink);
}
.netu-active-chip i { color: var(--netu-faint); }
.netu-active-clear { font-size: 13px; font-weight: 700; color: var(--netu-blue); text-decoration: none; }
.netu-active-clear:hover { text-decoration: underline; }

/* Country facets — "United States (50)". A toggle, not a one-way door. */
.netu-facets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.netu-facet {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 8px; border-radius: 8px;
    color: var(--netu-slate); text-decoration: none; font-size: 14px;
    transition: background .15s ease, color .15s ease;
}
.netu-facet:hover { background: var(--netu-surface); color: var(--netu-ink); }
.netu-facet-check {
    flex: 0 0 16px; width: 16px; height: 16px; border-radius: 4px;
    border: 1.5px solid var(--netu-line); background: #fff;
    display: grid; place-items: center; font-size: 11px; color: #fff;
}
.netu-facet.is-on { background: var(--netu-blue-tint); color: var(--netu-blue-dark); font-weight: 600; }
.netu-facet.is-on .netu-facet-check { background: var(--netu-blue); border-color: var(--netu-blue); }
.netu-facet-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.netu-facet-count {
    flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--netu-faint);
    background: var(--netu-surface); border-radius: 999px; padding: 1px 8px;
}
.netu-facet.is-on .netu-facet-count { background: #fff; color: var(--netu-blue-dark); }

/* Match % — the number comes from the SAME expression that ordered the results. */
.netu-bizcard { position: relative; }
.netu-match {
    position: absolute; top: 10px; z-index: 2;
    font-size: 13px; 
    padding: 3px 8px; border-radius: 999px; 
}
.netu-match.is-strong { background: color-mix(in srgb, #16a34a 14%, #fff); color: #15803d; }
.netu-match.is-mid    { background: var(--netu-blue-tint); color: var(--netu-blue-dark); }
.netu-match.is-weak   { background: var(--netu-surface); color: var(--netu-faint); }
/* In-flow variant for cards that aren't .netu-bizcard (group member cards) — same tiers, no overlay. */
.netu-match--inline { position: static; display: inline-block; }
/* The product card already parks an Edit pill top-right — move the badge aside so they don't stack. */
.netu-bizcard--product .netu-match { right: auto; left: 10px; }

.netu-results-bar-right { display: flex; align-items: center; gap: 12px; }
.netu-viewswitch .btn { padding: 5px 10px; }

/* -----------------------------------------------------------------------------
   MULTI-SELECT DROPDOWN (country filter)   2026-07-12

   A flat checkbox list is fine at four countries and unusable at fifty — it pushes every other filter off the
   screen and the rail grows without bound as the platform does. Collapsed this costs one row; open, it scrolls
   and can be typed into.
   ----------------------------------------------------------------------------- */
.netu-dropdown-toggle {
    width: 100%; display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; border: 1.5px solid var(--netu-line); border-radius: 9px;
    background: #fff; color: var(--netu-slate); font-size: 14px; text-align: left; cursor: pointer;
    transition: border-color .18s ease;
}
.netu-dropdown-toggle:hover { border-color: var(--netu-blue); }
.netu-dropdown-value {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--netu-faint);
}
.netu-dropdown-value.is-set { color: var(--netu-ink); font-weight: 600; }
.netu-dropdown-n {
    flex: 0 0 auto; background: var(--netu-blue); color: #fff;
    font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px;
}
.netu-dropdown-toggle .bi-chevron-down {
    flex: 0 0 auto; font-size: 12px; color: var(--netu-faint);
    transition: transform .18s ease;                    /* never abrupt */
}
.netu-dropdown-toggle .bi-chevron-down.is-open { transform: rotate(180deg); }

.netu-filter-group { position: relative; }
.netu-dropdown-panel {
    position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
    background: #fff; border: 1px solid var(--netu-line); border-radius: 12px;
    box-shadow: var(--netu-card-shadow-hover); padding: 8px; max-height: 320px;
    display: flex; flex-direction: column;
}
.netu-dropdown-find {
    display: flex; align-items: center; gap: 7px;
    padding: 6px 9px; margin-bottom: 6px;
    border: 1px solid var(--netu-line); border-radius: 8px; background: var(--netu-surface);
}
.netu-dropdown-find i { color: var(--netu-faint); font-size: 13px; }
.netu-dropdown-find input { border: 0; background: transparent; outline: 0; width: 100%; font-size: 13.5px; }

.netu-dropdown-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
/* Members-page category facet (Pushpak, 2026-08-12): ~4 rows visible, then scroll — the group sidebar is
   narrow and a long open list buried the filters below it. */
.member-cat-facet .netu-dropdown-list { max-height: 150px; }
.netu-dropdown-empty { margin: 8px 4px 4px; font-size: 13px; color: var(--netu-faint); }

/* The checkbox row */
.netu-check {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 8px; border-radius: 8px; cursor: pointer; margin: 0;
    transition: background .15s ease;
}
.netu-check:hover { background: var(--netu-surface); }
/* Whole-row tint when picked — the box alone is easy to miss on option cards (Pushpak, 2026-07-19). */
.netu-check:has(input:checked) { background: color-mix(in srgb, var(--netu-blue) 8%, #fff); }
.netu-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.netu-check-box {
    flex: 0 0 17px; width: 17px; height: 17px; border-radius: 5px;
    border: 1.5px solid var(--netu-line); background: #fff;
    display: grid; place-items: center; color: #fff; font-size: 11px;
    transition: background .15s ease, border-color .15s ease;
}
.netu-check-box i { opacity: 0; transition: opacity .12s ease; }
.netu-check input:checked + .netu-check-box { background: var(--netu-blue); border-color: var(--netu-blue); }
.netu-check input:checked + .netu-check-box i { opacity: 1; }
.netu-check input:focus-visible + .netu-check-box {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--netu-blue) 25%, transparent);
}
.netu-check-name {
    flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--netu-slate);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.netu-check input:checked ~ .netu-check-name { color: var(--netu-ink); font-weight: 600; }
.netu-check .netu-pill { margin-left: auto; flex-shrink: 0; }

/* -----------------------------------------------------------------------------
   THE SEARCH SURFACE — /search and /companies   (2026-07-12)

   One continuous background behind the hero AND the results, using the platform's own home backdrop, rather
   than a gradient band sitting on plain white. Full-bleed: it is outside the container, so the backdrop runs
   edge to edge while the content still respects the grid.
   ----------------------------------------------------------------------------- */
.netu-search-surface {
    background: var(--netu-home-bg);
    background-attachment: fixed;      /* the backdrop stays put while the results scroll over it */
    min-height: 100%;
}

/* The view switcher now sits above the results and applies to the whole page — the layout is a property of
   how you want to READ results, not of any one type. */
.netu-view-bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-bottom: 16px;
}
.netu-view-hint { font-size: 12.5px; color: var(--netu-faint); }
.netu-view-hint i { margin-right: 3px; }

/* Cards sit ON the surface, so they need to read as cards rather than as holes in the background. */
.netu-search-surface .netu-bizcard { background: #fff; }

/* -----------------------------------------------------------------------------
   PRODUCT PHOTOS (C1.3)
   The FIRST photo is the primary — the card thumbnail and the JSON-LD image. Reordering IS choosing it.
   ----------------------------------------------------------------------------- */
.netu-photos { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.netu-photo {
    position: relative; width: 118px; height: 118px; border-radius: 10px; overflow: hidden;
    border: 1px solid var(--netu-line); background: var(--netu-surface);
}
.netu-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.netu-photo-primary {
    position: absolute; top: 6px; left: 6px;
    background: var(--netu-blue); color: #fff;
    font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
}
.netu-photo-actions {
    position: absolute; inset: auto 0 0 0;
    display: flex; justify-content: flex-end; gap: 4px; padding: 6px;
    background: linear-gradient(transparent, rgba(12,27,42,.55));
    opacity: 0; transition: opacity .18s ease;
}
.netu-photo:hover .netu-photo-actions { opacity: 1; }
@media (hover: none) { .netu-photo-actions { opacity: 1; } }
.netu-photo-btn {
    border: 0; border-radius: 6px; padding: 3px 7px; cursor: pointer;
    background: rgba(255,255,255,.92); color: var(--netu-ink); font-size: 12px;
}
.netu-photo-btn--danger:hover { background: var(--netu-red); color: #fff; }
.netu-dropzone--sm { padding: 20px; font-size: 13px; }
.netu-dropzone--sm i { font-size: 22px; }

/* The public gallery */
.netu-gallery-main {
    border-radius: 14px; overflow: hidden; border: 1px solid var(--netu-line);
    background: var(--netu-surface); aspect-ratio: 4 / 3; display: grid; place-items: center;
}
.netu-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.netu-gallery-strip { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.netu-gallery-thumb {
    width: 72px; height: 72px; padding: 0; border-radius: 8px; overflow: hidden; cursor: pointer;
    border: 2px solid transparent; background: none;
    transition: border-color .18s ease, opacity .18s ease;
    opacity: .72;
}
.netu-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.netu-gallery-thumb.is-on, .netu-gallery-thumb:hover { border-color: var(--netu-blue); opacity: 1; }

/* A product card with a real photo leads with it */
.netu-bizcard-photo {
    display: block; aspect-ratio: 16 / 10; overflow: hidden;
    border-radius: 12px 12px 0 0; background: var(--netu-surface);
    margin: -1px -1px 12px;             /* bleed to the card edge */
}
.netu-bizcard-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- product menus (C1.4): curated collections on a booth --- */
.netu-menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.netu-menu-card {
    display: block; padding: 20px; border-radius: 14px; text-decoration: none;
    background: #fff; border: 1px solid var(--netu-line); box-shadow: var(--netu-card-shadow);
    transition: transform .15s ease, box-shadow .18s ease, border-color .18s ease;
}
.netu-menu-card:hover {
    transform: translateY(-2px); box-shadow: var(--netu-card-shadow-hover); border-color: var(--netu-blue);
}
.netu-menu-card i { font-size: 22px; color: var(--netu-blue); }
.netu-menu-card h2 { font-size: 17px; font-weight: 700; color: var(--netu-ink); margin: 10px 0 4px; }
.netu-menu-card p { font-size: 13.5px; color: var(--netu-slate); margin: 0 0 10px; line-height: 1.5; }
.netu-menu-count { font-size: 12px; font-weight: 700; color: var(--netu-faint); }
.netu-menu-picks { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.netu-menu-picks .netu-check { width: auto; }
/* --- Save to a list (C1.7) --- */
.netu-bizcard-foot-actions { display: inline-flex; align-items: center; gap: 8px; }
.netu-save-form { display: inline; margin: 0; }
.netu-save {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; cursor: pointer;
    border: 1px solid var(--netu-line); border-radius: 8px;
    background: #fff; color: var(--netu-slate); font-size: 14px;
    transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.netu-save:hover { color: var(--netu-blue); border-color: var(--netu-blue); background: var(--netu-blue-tint); }

/* -----------------------------------------------------------------------------
   RFQ & QUOTES (C2) — the marketplace loop closing
   ----------------------------------------------------------------------------- */
.netu-bizcard--rfq { border-left: 3px solid var(--netu-blue); }
.netu-rfq-deadline { font-size: 12px; font-weight: 700; color: var(--netu-slate-light); }
.netu-rfq-deadline.is-urgent { color: var(--netu-red); }

/* The negotiation thread: two people, and it reads like it. */
.netu-thread { display: flex; flex-direction: column; gap: 10px; }
.netu-msg {
    max-width: 72%; padding: 12px 14px; border-radius: 14px;
    background: #fff; border: 1px solid var(--netu-line);
    box-shadow: var(--netu-card-shadow);
}
.netu-msg.is-mine {
    align-self: flex-end;
    background: var(--netu-blue-tint); border-color: transparent;
}
.netu-msg-who { font-size: 12px; font-weight: 700; color: var(--netu-faint); margin-bottom: 3px; }
.netu-msg-body { font-size: 14.5px; color: var(--netu-ink); line-height: 1.55; white-space: pre-wrap; }

/* A flash message can offer a way onward — "Saved to Valves. → View list" */
.netu-toast-link {
    display: inline-block; margin-left: 8px;
    font-weight: 700; color: var(--netu-blue); text-decoration: none;
}
.netu-toast-link::after { content: " →"; }
.netu-toast-link:hover { text-decoration: underline; }

/* -----------------------------------------------------------------------------
   CRM (C3)

   Built from the vocabulary we already have — netu-table, netu-check, netu-pill, netu-bulkbar, booth-chip,
   booth-facts, empty-state — so it looks like the rest of the platform on day one instead of after a round of
   rework (Pushpak, 2026-07-13).
   ----------------------------------------------------------------------------- */

/* WHAT DO I OWE? — the reason to open a CRM in the morning. */
.netu-due {
    background: #fff; border: 1px solid var(--netu-line); border-left: 4px solid var(--netu-warning);
    border-radius: 14px; padding: 16px 18px; margin-bottom: 22px;
    box-shadow: var(--netu-card-shadow);
}
.netu-due-head {
    display: flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 700; color: var(--netu-ink); margin: 0 0 10px;
}
.netu-due-head i { color: var(--netu-warning); }
.netu-due-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.netu-due-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 9px; transition: background .15s ease;
}
.netu-due-item:hover { background: var(--netu-surface); }
.netu-due-tick button, .netu-todo-tick button, .netu-todo-x button, .netu-note-x, .netu-group-chip button {
    border: 0; background: none; cursor: pointer; padding: 0; color: var(--netu-faint);
    display: grid; place-items: center; transition: color .15s ease;
}
.netu-due-tick button {
    width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--netu-line);
    color: transparent;
}
.netu-due-tick button:hover { border-color: #16a34a; color: #16a34a; }
.netu-due-body { flex: 1 1 auto; min-width: 0; }
.netu-due-title { font-size: 14.5px; color: var(--netu-ink); font-weight: 600; }
.netu-due-who {
    display: block; font-size: 12.5px; color: var(--netu-slate-light); text-decoration: none;
}
.netu-due-who:hover { color: var(--netu-blue); }
.netu-due-when { font-size: 12.5px; font-weight: 700; color: var(--netu-slate-light); white-space: nowrap; }
.netu-due-item.is-overdue .netu-due-when { color: var(--netu-red); }

/* The filter bar */
.netu-crm-bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 16px;
}
.netu-crm-search {
    display: flex; align-items: center; gap: 8px; flex: 1 1 260px;
    padding: 8px 12px; border: 1.5px solid var(--netu-line); border-radius: 9px; background: #fff;
}
.netu-crm-search i { color: var(--netu-faint); }
.netu-crm-search input { border: 0; outline: 0; width: 100%; font-size: 14px; background: transparent; }
.netu-crm-bar .netu-select { width: auto; min-width: 160px; }
.netu-crm-count { margin-left: auto; font-size: 13px; color: var(--netu-faint); }

/* The contact cell */
.netu-col-pick { width: 34px; }
.netu-contact-cell { display: flex; align-items: flex-start; gap: 10px; }
.netu-contact-avatar {
    flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--netu-blue-tint); color: var(--netu-blue-dark);
    font-weight: 800; font-size: 14px;
}
.netu-contact-avatar--lg { flex-basis: 60px; width: 60px; height: 60px; font-size: 24px; }
.netu-pill-xs { font-size: 10px; padding: 1px 6px; }
.netu-crm-pip { color: var(--netu-warning); font-size: 12px; margin-left: 4px; }

/* Contact page — 50/50 (Pushpak, 2026-07-31): the Details/Reach-them side is the working half of this page,
   not a rail; the old fixed 340px squeezed it while Notes sprawled. This grid is used ONLY by crm-contact.html. */
.netu-crm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start; }
@media (max-width: 991px) { .netu-crm-grid { grid-template-columns: 1fr; } }

.netu-crm-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 84px; }
@media (max-width: 991px) { .netu-crm-side { position: static; } }

.netu-contact-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.netu-contact-id h1 { font-size: 26px; font-weight: 800; color: var(--netu-ink); margin: 0 0 4px; }
.netu-contact-meta { display: flex; gap: 8px; font-size: 14px; color: var(--netu-slate); margin: 0 0 8px; }
.netu-contact-meta a { color: var(--netu-blue); text-decoration: none; }
.netu-contact-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; }

.netu-card {
    background: #fff; border: 1px solid var(--netu-line); border-radius: 14px;
    box-shadow: var(--netu-card-shadow); padding: 20px; margin-bottom: 18px;
}
.netu-card-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 16px; font-weight: 700; color: var(--netu-ink); margin: 0 0 4px;
}
.netu-card-sub { font-size: 13px; color: var(--netu-slate-light); margin: 0 0 14px; }

/* "Private to you" — said out loud, because a private thing you are unsure is private is one you
   will not write honestly. */
.netu-private-flag {
    margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
    background: var(--netu-surface); color: var(--netu-slate);
    font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
}
.netu-private-flag i { color: var(--netu-blue); }

/* Reminders */
.netu-todo-list { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.netu-todo {
    display: flex; align-items: center; gap: 10px;
    padding: 8px; border-radius: 9px; transition: background .15s ease;
}
.netu-todo:hover { background: var(--netu-surface); }
.netu-todo-tick button { font-size: 17px; }
.netu-todo-tick button:hover { color: #16a34a; }
.netu-todo-title { flex: 1 1 auto; font-size: 14.5px; color: var(--netu-ink); }
.netu-todo-due { font-size: 12.5px; font-weight: 700; color: var(--netu-slate-light); white-space: nowrap; }
.netu-todo.is-overdue .netu-todo-due { color: var(--netu-red); }
.netu-todo.is-done .netu-todo-title { text-decoration: line-through; color: var(--netu-faint); }
.netu-todo.is-done .netu-todo-tick button { color: #16a34a; }
.netu-todo-x button:hover { color: var(--netu-red); }

/* Notes timeline */
.netu-note-form { margin-bottom: 16px; }
.netu-note-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.netu-note {
    position: relative; padding: 14px 40px 14px 16px;
    background: var(--netu-surface); border-radius: 12px; border: 1px solid var(--netu-line);
}
.netu-note-body { font-size: 14.5px; color: var(--netu-ink); line-height: 1.6; }
.netu-note-x { position: absolute; top: 10px; right: 10px; }
.netu-note-x:hover { color: var(--netu-red); }

/* Groups */
.netu-group-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.netu-group-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; border: 1px solid var(--netu-line); border-radius: 999px; padding: 5px 8px 5px 13px;
    font-size: 13.5px;
}
.netu-group-chip a { color: var(--netu-ink); text-decoration: none; font-weight: 600; }
.netu-group-chip a:hover { color: var(--netu-blue); }
.netu-group-chip-n {
    background: var(--netu-surface); color: var(--netu-faint);
    font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px;
}
.netu-group-chip button:hover { color: var(--netu-red); }
.netu-group-chip form { display: inline; }

.btn-join-group {
    background: var(--netu-red);
}

.navbar-nav .dropdown-menu {
    position: absolute;
}

/* One-line add forms — used by groups and reminders. */
.netu-inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.netu-inline-form input[type="text"], .netu-inline-form input[type="date"] {
    padding: 8px 12px; border: 1.5px solid var(--netu-line); border-radius: 9px;
    font-size: 14px; background: #fff; color: var(--netu-ink);
}
.netu-inline-form input[type="text"] { flex: 1 1 220px; }
.netu-inline-form input:focus {
    outline: 0; border-color: var(--netu-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--netu-blue) 12%, transparent);
}

/* A native <dialog> — no modal library, no z-index war, and Escape closes it for free. */
.netu-dialog {
    width: min(560px, calc(100vw - 32px));
    border: 1px solid var(--netu-line); border-radius: 16px; padding: 0;
    box-shadow: 0 24px 60px rgba(12,27,42,.28);
}
.netu-dialog::backdrop { background: rgba(12,27,42,.42); backdrop-filter: blur(2px); }
.netu-dialog-form { padding: 22px 24px 20px; }
.netu-dialog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.netu-dialog-head h2 { font-size: 19px; font-weight: 800; color: var(--netu-ink); margin: 0; }
.netu-dialog-x { border: 0; background: none; cursor: pointer; color: var(--netu-faint); font-size: 15px; }
.netu-dialog-x:hover { color: var(--netu-ink); }
.netu-dialog-foot {
    display: flex; justify-content: flex-end; gap: 10px;
    padding-top: 16px; border-top: 1px solid var(--netu-line); margin-top: 6px;
}

/* ---------------------------------------------------------------------------
   CRM — custom fields (C3 addendum)
   A list of what you declared, and a card to declare one more. The two-column
   split is the same shape as every "manage a small set of things" screen.
   ------------------------------------------------------------------------- */

.netu-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.netu-split-main { min-width: 0; }
.netu-split-side { position: sticky; top: 84px; }

@media (max-width: 980px) {
    .netu-split { grid-template-columns: 1fr; }
    .netu-split-side { position: static; }
}

/* Row actions sit still until you want them — a trash can that shouts on every
   row makes a table feel dangerous to read. */
.netu-table-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.netu-table-actions form { display: inline; }

.netu-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0;
    border: 1px solid var(--netu-line); border-radius: 8px;
    background: var(--netu-surface-blue); color: var(--netu-slate); cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.netu-icon-btn:hover { background: var(--netu-surface-blue); color: var(--netu-blue); border-color: var(--netu-blue); }
.netu-icon-danger:hover {
    background: color-mix(in srgb, var(--netu-red) 8%, #fff);
    color: var(--netu-red); border-color: var(--netu-red);
}

.netu-inline-actions { display: flex; gap: 8px; margin-top: 8px; }
.netu-inline-form .netu-input { margin-bottom: 6px; }

/* The owner's own fields, fenced off from the ones we shipped. */
.netu-field-group {
    border-top: 1px solid var(--netu-line);
    margin-top: 18px; padding-top: 16px;
}
.netu-field-group-h {
    font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--netu-faint); margin: 0 0 12px;
}

.netu-chip-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }

.netu-pill-soft { background: var(--netu-surface-blue); color: var(--netu-slate); }
.netu-hint-centre { text-align: center; margin-top: 10px; }

/* ---------------------------------------------------------------------------
   C4 — sending accounts
   A connector is either ready or it is not, and the card should say which
   before you read a word of it.
   ------------------------------------------------------------------------- */

.netu-sender { margin-bottom: 16px; }
.netu-sender-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.netu-sender-badges { display: flex; gap: 6px; flex-wrap: wrap; }

.netu-sender-foot {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--netu-line);
}
.netu-sender-actions { display: flex; gap: 6px; align-items: center; }
.netu-sender-actions form { display: inline; }
.netu-sender-test { display: flex; gap: 8px; align-items: center; margin: 0; flex: 1 1 280px; }
.netu-sender-test .netu-input { margin-bottom: 0; max-width: 260px; }

/* The edit form is folded away until asked for — smoothly, never a snap. */
.netu-sender-edit {
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .32s ease, opacity .24s ease, margin-top .32s ease;
}
.netu-sender-edit.is-open { max-height: 1200px; opacity: 1; margin-top: 16px; }

.netu-pill-danger {
    background: color-mix(in srgb, var(--netu-red) 10%, #fff);
    color: var(--netu-red);
}
.netu-form-note.netu-note-bad {
    background: color-mix(in srgb, var(--netu-red) 7%, #fff);
}
.netu-form-note.netu-note-bad > i { color: var(--netu-red); }

/* ---------------------------------------------------------------------------
   First run — not an empty state
   An empty state apologises for having no data; a first run teaches you what the
   feature is for and puts the one control that starts it in the middle of the
   page. (Pushpak, 2026-07-13: "form in the middle rather than the right panel".)
   ------------------------------------------------------------------------- */

.netu-onboard { max-width: 85%; margin: 8px auto 48px; }

.netu-onboard-head { text-align: center; margin-bottom: 28px; }
.netu-onboard-head .mp-sub { max-width: 520px; margin-left: auto; margin-right: auto; }

.netu-onboard-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; margin-bottom: 14px;
    border-radius: 16px; font-size: 26px;
    background: var(--netu-surface-blue); color: var(--netu-blue);
}

.netu-onboard-form { margin-top: 20px; }
.netu-onboard-notes { margin-top: 20px; }

/* The stepper, wide enough to breathe on a first-run page. */
.netu-steps-wide { max-width: 560px; margin: 0 auto 8px; }

.netu-form-actions-centre { justify-content: center; }
.netu-btn-lg { padding: 12px 26px; font-size: 15px; }
.netu-btn-block { width: 100%; justify-content: center; margin-bottom: 12px; }

/* A single readable column — long forms in a 1200px-wide box are unreadable. */
.netu-centre-col { max-width: 720px; margin: 0 auto; }

.netu-form-note.netu-note-warn { background: color-mix(in srgb, var(--netu-amber, #f59e0b) 10%, #fff); }
.netu-form-note.netu-note-warn > i { color: var(--netu-amber, #f59e0b); }

/* Extra info — columns we had no field for, kept rather than discarded. */
.netu-extras { margin: 0; }
.netu-extra {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 7px 0; border-bottom: 1px dashed var(--netu-line);
}
.netu-extra:last-child { border-bottom: 0; }
.netu-extra dt {
    font-size: 12.5px; color: var(--netu-slate); font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.netu-extra dd { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--netu-ink); }
.netu-extra-note { margin-bottom: 8px; }
.netu-icon-xs { width: 24px; height: 24px; font-size: 12px; }
.netu-hidden-form { display: none; }

/* ---------------------------------------------------------------------------
   CRM list — act on someone without leaving the list
   A note you have to open another page to write is a note nobody writes.
   ------------------------------------------------------------------------- */

.netu-crm-table td { vertical-align: top; }
.netu-th-right { text-align: right; }

.netu-crm-who { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.netu-crm-who:hover strong { color: var(--netu-blue); }
.netu-crm-who strong { display: block; font-size: 14px; }

.netu-row-actions { text-align: right; }
.netu-row-buttons { display: inline-flex; gap: 6px; justify-content: flex-end; }

/* The quick forms unfold in place, smoothly — never a snap (locked UI rule). */
.netu-quick {
    margin-top: 10px; padding: 12px; text-align: left;
    background: var(--netu-surface-blue); border-radius: 10px;
    display: flex; flex-direction: column; gap: 8px;
}
.netu-quick .netu-input { margin-bottom: 0; }
.netu-quick textarea { resize: vertical; }
.netu-quick-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

.netu-filter-actions { flex-direction: column; gap: 8px; margin-top: 16px; }
.netu-result-count { color: var(--netu-slate); font-size: 13.5px; margin-bottom: 10px; }

/* ---------------------------------------------------------------------------
   C4.2 — the block email editor
   The stack on the left is the email. The pane on the right is the REAL
   renderer's output in an iframe, so the preview cannot disagree with the send.
   ------------------------------------------------------------------------- */

.netu-editor-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 24px; align-items: start;
}
.netu-editor-side { position: sticky; top: 84px; }

@media (max-width: 1100px) {
    .netu-editor-grid { grid-template-columns: 1fr; }
    .netu-editor-side { position: static; }
}

.netu-title-input {
    border: 0; border-bottom: 2px dashed transparent; background: transparent;
    font-size: 22px; font-weight: 700; color: var(--netu-ink); padding: 2px 0; width: 100%;
    transition: border-color .18s ease;
}
.netu-title-input:hover  { border-bottom-color: var(--netu-line); }
.netu-title-input:focus  { outline: 0; border-bottom-color: var(--netu-blue); }

.netu-editor-meta { margin-bottom: 14px; }

/* A block: a row you can read at a glance, that opens into the one thing you're changing. */
.netu-block {
    border: 1.5px solid var(--netu-line); border-radius: 11px; background: #fff;
    margin-bottom: 8px; transition: border-color .18s ease, box-shadow .18s ease;
}
.netu-block:hover { border-color: var(--netu-blue); }
.netu-block.is-open {
    border-color: var(--netu-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--netu-blue) 10%, transparent);
}
.netu-block.is-locked { background: var(--netu-surface-blue); border-style: dashed; }
.netu-block.is-locked:hover { border-color: var(--netu-line); }

.netu-block-head {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer;
    font-size: 14px; color: var(--netu-ink);
}
.netu-block.is-locked .netu-block-head { cursor: default; color: var(--netu-slate); }
.netu-block-head > .bi { color: var(--netu-slate); }
.netu-block-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.netu-block-tools { display: flex; gap: 4px; }
.netu-block-tools button:disabled { opacity: .35; cursor: default; }

.netu-block-body { padding: 0 14px 14px; }
.netu-block-foot { display: flex; justify-content: flex-end; margin-top: 8px; }
.netu-block-locked-note { padding: 0 14px 12px; margin: 0; }

/* Add a block. Nine chips — not a menu, because a menu hides the answer.
   THE SEBASTIAN GRADIENT (Pushpak, 2026-07-13). Two reasons, and the second is the real one:
     1. white chips on a white editor stack made the one control that starts everything the
        hardest thing on the page to see;
     2. this row is where Sebastian will offer to WRITE the block for you — so it should
        already wear his colour, and mean the same thing here as it does everywhere else. */
.netu-add-block {
    display: flex; flex-direction: column; align-items: stretch; gap: 10px;
    padding: 13px 14px 14px; margin: 12px 0 16px;
    border: 0; border-radius: 11px;
    background: linear-gradient(135deg, var(--netu-seb-1), var(--netu-seb-2));
    box-shadow: 0 6px 20px rgba(83, 74, 183, .18);
}
.netu-add-block .netu-add-block-label {
    color: rgba(255, 255, 255, .82);
    margin-right: 0;                       /* it is a heading now, not a chip's neighbour */
}
.netu-add-block-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.netu-add-block-label { font-size: 12px; font-weight: 700; color: var(--netu-faint); text-transform: uppercase; letter-spacing: .04em; margin-right: 4px; }

.netu-add-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 11px; border: 1px solid var(--netu-line); border-radius: 999px;
    background: #fff; color: var(--netu-slate); font-size: 12.5px; cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.netu-add-chip:hover { background: var(--netu-surface-blue); color: var(--netu-blue); border-color: var(--netu-blue); }
.netu-add-chip code { font-size: 12px; color: inherit; }

.netu-align-picker { display: inline-flex; gap: 2px; margin-top: 8px; }
.netu-align-btn {
    width: 32px; height: 30px; border: 1px solid var(--netu-line); background: #fff;
    color: var(--netu-slate); cursor: pointer;
}
.netu-align-btn:first-child { border-radius: 8px 0 0 8px; }
.netu-align-btn:last-child  { border-radius: 0 8px 8px 0; }
.netu-align-btn.is-on { background: var(--netu-surface-blue); color: var(--netu-blue); border-color: var(--netu-blue); }

/* The preview: the real thing, in its own document. */
.netu-preview-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.netu-preview-head h2 { font-size: 14px; font-weight: 700; margin: 0; color: var(--netu-ink); }

/* Editor chrome only — never injected into the rendered email HTML. */
.netu-preview-banner {
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 8px; padding: 10px 12px;
    border: 1.5px solid color-mix(in srgb, var(--netu-blue) 35%, var(--netu-line));
    border-radius: 10px;
    background: color-mix(in srgb, var(--netu-blue) 8%, #fff);
}
.netu-preview-banner-badge {
    flex-shrink: 0; padding: 2px 8px; border-radius: 6px;
    background: var(--netu-blue); color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
    line-height: 1.4;
}
.netu-preview-banner-text {
    margin: 0; font-size: 13px; line-height: 1.45; color: var(--netu-ink);
}
.netu-preview-banner-text strong { font-weight: 700; }

.netu-preview-frame {
    width: 100%; height: 620px; border: 1.5px solid var(--netu-line); border-radius: 12px;
    background: #f3f4f6;
}
/* The variable palette now sits at the TOP of the stack, above the subject line — so the
   margin that assumed it hung below the preview would push it off its own heading. */
.netu-vars { margin-bottom: 14px; }
.netu-vars .netu-card-title { display: flex; align-items: center; gap: 7px; }
.netu-vars .netu-chip-row { margin-top: 10px; }

/* Save, under the preview: it is the last thing you look at before you commit. */
.netu-save-under { margin-top: 12px; }

/* First-run demo of what a block email is. */
.netu-onboard-preview { display: flex; justify-content: center; margin: 4px 0 22px; }
.netu-block-demo {
    display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 380px;
    padding: 16px; border: 1.5px dashed var(--netu-line); border-radius: 12px; background: #fff;
}
.netu-block-demo-row {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; border-radius: 8px; background: var(--netu-surface-blue);
    font-size: 13px; color: var(--netu-slate);
}
.netu-block-demo-row.is-cta { background: color-mix(in srgb, var(--netu-blue) 12%, #fff); color: var(--netu-blue); font-weight: 600; }
.netu-block-demo-row.is-foot { background: transparent; border: 1px dashed var(--netu-line); font-size: 12px; }

.netu-template-card { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.netu-template-card .netu-card-title a { text-decoration: none; color: inherit; }
.netu-template-card .netu-card-title a:hover { color: var(--netu-blue); }

/* ---------------------------------------------------------------------------
   CRM — the filter rail sits on the RIGHT (Pushpak, 2026-07-13)
   On /search you are hunting, so the filters lead. In your own CRM the contacts
   ARE the page and the filters are a tool you reach for. Main comes first in the
   DOM too, so a phone shows you the list rather than the rail.
   ------------------------------------------------------------------------- */

.netu-filters-right { grid-template-columns: minmax(0, 1fr) 280px; }

@media (max-width: 991.98px) {
    .netu-filters-right { grid-template-columns: 1fr; }
}

/* The filtered heading: "Your contacts from Germany · Manufacturing" */
.netu-title-filter { color: var(--netu-slate); font-weight: 500; }
.netu-title-filter span { color: var(--netu-blue); }

/* Import map: the rows for fields your file has no column for. */
.netu-map-unmapped td:first-child { color: var(--netu-faint); font-style: italic; }
.netu-map-unmapped { background: color-mix(in srgb, var(--netu-surface-blue) 45%, #fff); }
.netu-map-toggle td { background: #fff; border-top: 1px dashed var(--netu-line); }
.netu-map-toggle .netu-hint { display: inline; margin-left: 10px; }

/* ---------------------------------------------------------------------------
   C4.3 — the drip flow
   The flow is a TREE, drawn as an indented stack. A cycle is unrepresentable,
   so there is nothing to validate and no loop to fall into.
   ------------------------------------------------------------------------- */

.netu-flow { border-left: 2px dashed var(--netu-line); padding-left: 14px; margin-bottom: 16px; }
.netu-flow-start {
    display: inline-flex; align-items: center; gap: 7px; margin-bottom: 10px;
    font-size: 12.5px; color: var(--netu-slate);
}
.netu-flow-start .bi { color: var(--netu-green, #16a34a); }

.netu-flow-row { margin-bottom: 6px; }

.netu-flow-node {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 12px; border: 1.5px solid var(--netu-line); border-radius: 10px; background: #fff;
    transition: border-color .16s ease;
}
.netu-flow-node:hover { border-color: var(--netu-blue); }
.netu-flow-node.is-email  { border-left: 4px solid var(--netu-blue); }
.netu-flow-node.is-wait   { border-left: 4px solid var(--netu-line); }
.netu-flow-node.is-branch { border-left: 4px solid var(--netu-amber, #f59e0b); background: color-mix(in srgb, var(--netu-amber, #f59e0b) 5%, #fff); }

.netu-flow-select { flex: 1; min-width: 0; }
.netu-flow-wait { display: flex; align-items: center; gap: 6px; flex: 1; font-size: 13.5px; color: var(--netu-slate); }
.netu-flow-wait .netu-input { width: 66px; margin: 0; }
.netu-flow-tools { display: flex; gap: 3px; }

/* "Review Template" link on an email step — opens the rendered preview in a new tab. */
.netu-flow-review {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    font-size: 12.5px; padding: 5px 10px; border-radius: 8px; text-decoration: none;
    color: var(--netu-blue); border: 1px solid var(--netu-line); background: #fff; transition: all .14s ease;
}
.netu-flow-review:hover {
    border-color: var(--netu-blue); background: color-mix(in srgb, var(--netu-blue) 6%, #fff);
}

.netu-flow-arm {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    margin: 6px 0 2px;
}
.netu-flow-arm.is-yes { color: var(--netu-green, #16a34a); }
.netu-flow-arm.is-no  { color: var(--netu-slate); }
.netu-flow-arm-note { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--netu-faint); font-size: 12px; }

/* The same control, the same problem, the same fix as .netu-add-block — these two editors
   must not drift apart, or "add a step" looks like a different idea in each of them. */
.netu-flow-add {
    display: flex; gap: 5px; flex-wrap: wrap; align-items: center;
    padding: 9px 10px; margin: 2px 0 8px;
    border: 0; border-radius: 10px;
    background: linear-gradient(135deg, var(--netu-seb-1), var(--netu-seb-2));
    box-shadow: 0 5px 16px rgba(83, 74, 183, .16);
}

/* The chips, ON the gradient. Scoped — .netu-add-chip is also the variable palette and the
   import-map toggle, which sit on white and must stay as they are. */
.netu-add-block .netu-add-chip,
.netu-flow-add  .netu-add-chip {
    background: rgba(255, 255, 255, .96);
    border-color: transparent;
    color: var(--netu-ink);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .10);
}
.netu-add-block .netu-add-chip:hover,
.netu-flow-add  .netu-add-chip:hover {
    background: #fff;
    border-color: #fff;
    color: var(--netu-seb-1);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15, 23, 42, .16);
}
.netu-add-block .netu-add-chip:active,
.netu-flow-add  .netu-add-chip:active { transform: translateY(0); }

/* The check panel: everything that could go wrong, said before the button. */
.netu-check-figures { list-style: none; padding: 0; margin: 0 0 12px; }
.netu-check-figures li { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--netu-line); }
.netu-check-figures li:last-child { border-bottom: 0; }
.netu-check-figures strong { font-size: 19px; color: var(--netu-ink); min-width: 52px; }
.netu-check-figures span { font-size: 12.5px; color: var(--netu-slate); }
.netu-check-figures li.is-muted strong { color: var(--netu-faint); }
.netu-check-figures li.is-bad strong { color: var(--netu-red); }

.netu-check-problems p {
    display: flex; gap: 8px; align-items: flex-start;
    background: color-mix(in srgb, var(--netu-amber, #f59e0b) 10%, #fff);
    border-radius: 9px; padding: 10px 12px; margin: 0 0 8px;
    font-size: 13px; color: var(--netu-slate);
}
.netu-check-problems .bi { color: var(--netu-amber, #f59e0b); }

.netu-campaign-stats .is-booked .netu-import-n { color: var(--netu-green, #16a34a); }
.netu-campaign-card { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.netu-campaign-card .netu-card-title a { text-decoration: none; color: inherit; }
.netu-campaign-card .netu-card-title a:hover { color: var(--netu-blue); }

/* The unsubscribe page — a stranger's first and possibly only view of NetU. */
.netu-unsub { max-width: 520px; margin: 60px auto; text-align: center; padding: 0 20px; }
.netu-unsub h1 { font-size: 24px; margin: 14px 0 10px; }
.netu-unsub p { color: var(--netu-slate); }
.netu-onboard-icon.is-ok { background: var(--netu-surface-green); color: var(--netu-green, #16a34a); }
.netu-unsub-note {
    display: flex; gap: 10px; text-align: left; margin: 22px 0;
    background: var(--netu-surface-blue); border-radius: 11px; padding: 14px 16px;
}
.netu-unsub-note p { margin: 0; font-size: 13.5px; }

/* The confirm step. The destructive action is the primary button — they came here to do it, and hiding it
   behind a secondary style would just make them hunt. "No, keep them" sits beside it, equally reachable. */
.netu-unsub-form {
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 22px 0 6px;
}
.netu-unsub-form .netu-btn-primary,
.netu-unsub-form .netu-btn-secondary { min-width: 170px; }

/* For the person the email was FORWARDED to. Quiet, because it is not addressed to most readers — but it is
   the difference between them unsubscribing someone else and closing the tab. */
.netu-unsub-hint {
    margin-top: 16px; font-size: 12.5px; line-height: 1.6;
    color: var(--netu-slate-light, #7a8699);
}

/* ---------------------------------------------------------------------------
   Template gallery — the starter shelf and your own
   Each card shows the REAL renderer's output in a scaled-down iframe, so what
   you pick is what you get.
   ------------------------------------------------------------------------- */

.netu-tpl-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    gap: 18px; margin-bottom: 32px;
}

.netu-tpl-card {
    display: flex; flex-direction: column;
    border: 1.5px solid var(--netu-line); border-radius: 13px; background: #fff; overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.netu-tpl-card:hover {
    border-color: var(--netu-blue); transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(15, 23, 42, .07);
}
.netu-tpl-card.is-seed { background: var(--netu-surface-blue); }

/* The thumbnail IS the email — scaled, and deliberately not clickable through. */
.netu-tpl-thumb {
    position: relative; display: block; height: 190px; overflow: hidden;
    background: #f3f4f6; border-bottom: 1px solid var(--netu-line);
}
.netu-tpl-thumb iframe {
    width: 600px; height: 760px; border: 0;
    transform: scale(.42); transform-origin: top left;
    pointer-events: none;                 /* it is a picture, not a page */
}
.netu-tpl-thumb-veil { position: absolute; inset: 0; }

.netu-tpl-badge { position: absolute; top: 8px; right: 8px; font-size: 11px; }

.netu-tpl-body { padding: 12px 14px 6px; flex: 1; }
.netu-tpl-body h3 { font-size: 14.5px; font-weight: 700; margin: 0 0 5px; color: var(--netu-ink); }
.netu-tpl-body h3 a { color: inherit; text-decoration: none; }
.netu-tpl-body h3 a:hover { color: var(--netu-blue); }

.netu-tpl-subject, .netu-tpl-desc {
    font-size: 12.5px; color: var(--netu-slate); margin: 0; line-height: 1.5;
}
.netu-tpl-subject { display: flex; gap: 6px; align-items: baseline; }
.netu-tpl-subject span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.netu-tpl-foot {
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
    padding: 10px 14px 14px;
}
.netu-tpl-foot form { display: inline; }
.netu-tpl-use { display: flex; gap: 6px; width: 100%; }
.netu-tpl-use .netu-input { margin: 0; flex: 1; min-width: 0; }

/* ---------------------------------------------------------------------------
   C4.4 — booking
   The public page is a stranger's first (and possibly only) view of NetU.
   ------------------------------------------------------------------------- */

.netu-book-page { max-width: 900px; margin: 44px auto; padding: 0 20px; }
.netu-book { width: 100%; }

/* Embedded in a booth or a profile card — it is a section of a page, not the page. */
.netu-book.is-compact .netu-book-grid { grid-template-columns: 280px minmax(0, 1fr); gap: 18px; }
.netu-book.is-compact .netu-book-form { margin-top: 18px; padding-top: 18px; }
@media (max-width: 900px) { .netu-book.is-compact .netu-book-grid { grid-template-columns: 1fr; } }

.netu-book-card { margin-top: 18px; }
.netu-book-card .netu-book-tz { text-align: left; margin-bottom: 12px; }
.netu-book-head { text-align: center; margin-bottom: 20px; }
.netu-book-head h1 { font-size: 25px; margin: 0 0 8px; }
.netu-book-tz { color: var(--netu-slate); font-size: 13px; }
.netu-book-tz strong { color: var(--netu-ink); }

.netu-book-durations { display: flex; gap: 6px; justify-content: center; margin-bottom: 20px; }
.netu-duration {
    padding: 7px 16px; border: 1.5px solid var(--netu-line); border-radius: 999px;
    background: #fff; color: var(--netu-slate); font-size: 13.5px; text-decoration: none;
}
.netu-duration.is-on { background: var(--netu-blue); border-color: var(--netu-blue); color: #fff; font-weight: 600; }

.netu-book-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 720px) { .netu-book-grid { grid-template-columns: 1fr; } }

.netu-book-grid h2 { font-size: 13px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--netu-faint); margin: 0 0 10px; }

/* ---- THE MONTH CALENDAR (Pushpak, 2026-07-13) ----
   A vertical list of days made you READ to find a Thursday. A calendar is the shape this information already has
   in everyone's head: look at the week you want, and the free days are the ones with a dot. */

.netu-cal { user-select: none; }

.netu-cal-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.netu-cal-month { font-size: 14px; font-weight: 700; color: var(--netu-ink); }

.netu-cal-weekdays,
.netu-cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }

.netu-cal-weekdays {
    margin-bottom: 4px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--netu-faint); text-align: center;
}
.netu-cal-grid { display: flex; flex-direction: column; gap: 3px; }

.netu-cal-day {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    aspect-ratio: 1 / 1;
    border: 1.5px solid transparent; border-radius: 9px;
    background: transparent; color: var(--netu-faint);
    font-size: 13.5px; font-weight: 600;
    cursor: default;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.netu-cal-day.is-out { visibility: hidden; }     /* days from the neighbouring month are noise, not information */

/* A day you can actually take. Everything else on the grid is scenery. */
.netu-cal-day.is-free {
    background: #fff; border-color: var(--netu-line); color: var(--netu-ink); cursor: pointer;
}
.netu-cal-day.is-free:hover { border-color: var(--netu-blue); color: var(--netu-blue); }
.netu-cal-day.is-on {
    background: var(--netu-blue); border-color: var(--netu-blue); color: #fff;
}
.netu-cal-day.is-today { box-shadow: inset 0 0 0 1px var(--netu-line); }

/* A DOT, not a count. "6 free" across thirty squares is a wall of digits; a dot says "something here" and lets
   the eye do the work. */
.netu-cal-dot {
    position: absolute; bottom: 5px;
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--netu-green, #16a34a);
}
.netu-cal-day.is-on .netu-cal-dot { background: #fff; }

.netu-cal-empty { margin-top: 12px; text-align: center; }

.netu-book-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 7px; }
.netu-book-slot {
    padding: 11px 8px; border: 1.5px solid var(--netu-line); border-radius: 9px;
    background: #fff; color: var(--netu-ink); font-size: 13.5px; font-weight: 600; cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.netu-book-slot:hover:not(:disabled) { border-color: var(--netu-blue); color: var(--netu-blue); }
.netu-book-slot.is-on { background: var(--netu-blue); border-color: var(--netu-blue); color: #fff; }

/* Taken slots are SHOWN, not hidden — a grid with holes says the seller is in demand; a grid that
   silently omits them says the seller has nothing on. The first one is true. */
.netu-book-slot.is-taken {
    background: var(--netu-surface-blue); color: var(--netu-faint);
    border-style: dashed; cursor: not-allowed; font-weight: 400; text-decoration: line-through;
}

.netu-book-form { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--netu-line); }
.netu-book-form h2 { font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--netu-slate);
    font-weight: 400; margin-bottom: 16px; }
.netu-book-form h2 strong { color: var(--netu-ink); }

.netu-book-when { font-size: 17px; font-weight: 700; color: var(--netu-ink); }
.netu-when-inline { font-size: 13.5px; }

/* The owner's availability grid. */
.netu-avail { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.netu-avail-day { padding: 7px 9px; border-radius: 9px; border: 1px solid transparent; }
.netu-avail-day.is-on { background: var(--netu-surface-blue); border-color: var(--netu-line); }
.netu-avail-hours { display: flex; align-items: center; gap: 7px; margin: 8px 0 2px 28px; }
.netu-avail-hours .netu-input { width: 108px; margin: 0; }
.netu-avail-hours span { font-size: 12.5px; color: var(--netu-slate); }

/* ---------------------------------------------------------------------------
   "DUE NOW" — the strip at the top of /me/crm  (C3; styles missed, added 2026-07-13)

   The markup shipped without any CSS at all, so it rendered as a bare <ul> with
   naked form buttons. It is the first thing on the CRM and the reason to open it
   in the morning — a list of names is not one — so it had better look like it.
   ------------------------------------------------------------------------- */

.netu-owe {
    background: color-mix(in srgb, var(--netu-amber, #f59e0b) 7%, #fff);
    border: 1.5px solid color-mix(in srgb, var(--netu-amber, #f59e0b) 22%, #fff);
    border-left: 4px solid var(--netu-amber, #f59e0b);
    border-radius: 12px;
    padding: 13px 16px 6px;
    margin-bottom: 20px;
}

/* The header is a BUTTON now — it opens the drawer. Full width so the whole strip is the hit target:
   a 12px-tall label is not something anyone taps on a phone. */
.netu-owe-h {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 0; margin: 0;
    border: 0; background: transparent; cursor: pointer; text-align: left;
    font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: color-mix(in srgb, var(--netu-amber, #f59e0b) 80%, #000);
}
.netu-owe.is-open .netu-owe-h { margin-bottom: 8px; }

/* THE SIGNAL SURVIVES THE COLLAPSE. Hiding the detail is a preference; hiding the fact that three
   people are waiting on you would be a bug. */
.netu-owe-count {
    padding: 1px 8px; border-radius: 999px;
    background: color-mix(in srgb, var(--netu-amber, #f59e0b) 22%, #fff);
    color: color-mix(in srgb, var(--netu-amber, #f59e0b) 85%, #000);
    font-size: 11px; letter-spacing: 0;
}
.netu-owe-count.is-overdue {
    background: color-mix(in srgb, var(--netu-red) 12%, #fff);
    color: var(--netu-red);
}

/* Pushed to the right, and it turns — so the strip says whether it is open without being read. */
.netu-owe-chevron { margin-left: auto; font-size: 13px; opacity: .7; }

/* Closed, it is a one-line bar rather than a padded box with nothing in it. */
.netu-owe { padding: 11px 16px; }
.netu-owe.is-open { padding: 13px 16px 6px; }

.netu-owe ul { list-style: none; margin: 0; padding: 0; }

.netu-owe li {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed color-mix(in srgb, var(--netu-amber, #f59e0b) 25%, #fff);
}
.netu-owe li:last-child { border-bottom: 0; }

/* The tick. A bare icon button — clicking it is "done", and it should feel like one keystroke. */
.netu-owe li > form { display: flex; margin: 0; }
.netu-owe li > form button {
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; padding: 0;
    border: 0; background: transparent; cursor: pointer;
    color: color-mix(in srgb, var(--netu-amber, #f59e0b) 70%, #000);
    font-size: 16px;
    transition: color .16s ease, transform .16s ease;
}
.netu-owe li > form button:hover { color: var(--netu-green, #16a34a); transform: scale(1.15); }

.netu-owe li > a {
    flex: 1; min-width: 0;
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    text-decoration: none; color: var(--netu-ink); font-size: 14px;
}
.netu-owe li > a:hover { color: var(--netu-blue); }

.netu-owe-who { font-size: 12.5px; color: var(--netu-slate); }

.netu-owe-due {
    font-size: 12px; font-weight: 600; white-space: nowrap;
    color: var(--netu-slate);
}
/* Overdue is the whole point of the strip. It must be the loudest thing on it. */
.netu-owe-due.is-overdue { color: var(--netu-red); font-weight: 700; }

@media (max-width: 640px) {
    .netu-owe li { align-items: flex-start; }
    .netu-owe-due { margin-left: auto; }
}

/* ---------------------------------------------------------------------------
   Scheduled campaigns (C4.5)
   ------------------------------------------------------------------------- */

.netu-scheduled {
    background: var(--netu-surface-blue);
    border: 1.5px solid color-mix(in srgb, var(--netu-blue) 25%, #fff);
}
.netu-scheduled .netu-card-title { color: var(--netu-blue); }
.netu-scheduled-when {
    font-size: 15px; font-weight: 700; color: var(--netu-ink);
    margin: 4px 0 8px;
}

.netu-schedule-box { margin-top: 10px; }
.netu-schedule-box .netu-form-card { margin-top: 10px; }

/* ---------------------------------------------------------------------------
   RESPONSIVE TABLES — opt-in with .netu-table-stack   (2026-07-13)

   A table is a grid of columns, and a phone has room for about one. The default
   .netu-table-wrap scrolls sideways, which is honest but useless when the column
   you need is the LAST one — on /me/crm that is the quick actions, which are the
   entire reason the page exists.

   So: below 760px each <tr> becomes a card and each <td> a line inside it. No
   data-label attributes, because these cells are already self-describing (an
   avatar and a name; a source pill; "3 days ago"). A label reading "CONTACT:"
   above a person's name is noise.

   OPT-IN, not automatic: the import preview and the click-report tables are
   genuinely tabular — you read DOWN their columns to compare rows — and stacking
   those would destroy the only thing they are for.
   ------------------------------------------------------------------------- */

@media (max-width: 760px) {

    /* An explicit class, not :has(). :has() is fine in modern browsers, but the failure mode — a stray
       border and shadow wrapped around a stack of cards — is a silly thing to risk for zero gain. */
    .netu-table-wrap.is-stacked {
        overflow-x: visible;                 /* nothing to scroll to any more */
        border: 0; background: transparent; box-shadow: none; border-radius: 0;
    }

    .netu-table-stack thead { display: none; }

    .netu-table-stack,
    .netu-table-stack tbody,
    .netu-table-stack tr,
    .netu-table-stack td { display: block; width: 100%; }

    .netu-table-stack tr {
        background: #fff;
        border: 1px solid var(--netu-line);
        border-radius: 13px;
        box-shadow: var(--netu-card-shadow);
        padding: 13px 14px;
        margin-bottom: 10px;
    }
    .netu-table-stack tr:hover { background: #fff; }     /* the row-hover tint reads as "selected" on a card */

    .netu-table-stack td { border-bottom: 0; padding: 0; }
    .netu-table-stack td:not(:last-child) { margin-bottom: 8px; }

    /* Who they are — the headline of the card. */
    .netu-crm-table.netu-table-stack td:first-child .netu-crm-who strong { font-size: 15px; }

    /* Source and last-activity sit on ONE line together, as a subtitle. Two stacked lines for
       "Booth enquiry" and "3 days ago" would push the actions off the first screen. */
    .netu-crm-table.netu-table-stack td:nth-child(2),
    .netu-crm-table.netu-table-stack td:nth-child(3) {
        display: inline-block; width: auto; vertical-align: middle;
        margin-bottom: 10px;
    }
    .netu-crm-table.netu-table-stack td:nth-child(2) { margin-right: 10px; }
    .netu-crm-table.netu-table-stack td:nth-child(3) { font-size: 12.5px; color: var(--netu-slate); }
    .netu-crm-table.netu-table-stack td:nth-child(3) .netu-table-sub { display: inline; margin-left: 6px; }

    /* THE QUICK ACTIONS. Full width, thumb-sized, and no longer at the end of a sideways scroll. */
    .netu-crm-table.netu-table-stack .netu-row-actions { text-align: left; }
    .netu-crm-table.netu-table-stack .netu-row-buttons {
        display: flex; width: 100%; gap: 8px; justify-content: flex-start;
    }
    .netu-crm-table.netu-table-stack .netu-row-buttons .netu-icon-btn,
    .netu-crm-table.netu-table-stack .netu-row-buttons a.netu-icon-btn {
        flex: 1; height: 40px;              /* 40px is a thumb; 32px is a wish */
    }
    .netu-crm-table.netu-table-stack .netu-quick { margin-top: 10px; }
    .netu-crm-table.netu-table-stack .netu-quick-foot { flex-wrap: wrap; }
}

/* Below 380px the two-across "source · last activity" line wraps anyway — let it, rather than
   squeezing the pill until the words break. */
@media (max-width: 380px) {
    .netu-crm-table.netu-table-stack td:nth-child(2),
    .netu-crm-table.netu-table-stack td:nth-child(3) { display: block; margin-right: 0; }
}

/* The Contact Groups tab sits on the same page — a member who finds Contacts broken on a phone
   finds Groups broken thirty seconds later. */
@media (max-width: 760px) {
    .netu-groups-table.netu-table-stack td:nth-child(2)::before {
        content: 'Contacts: ';
        color: var(--netu-faint); font-size: 12px; font-weight: 700;
        text-transform: uppercase; letter-spacing: .04em;
    }
    .netu-groups-table.netu-table-stack td:nth-child(2) { font-size: 13.5px; color: var(--netu-slate); }
    .netu-groups-table.netu-table-stack .netu-table-actions { justify-content: flex-start; gap: 8px; }
    .netu-groups-table.netu-table-stack .netu-btn-sm { flex: 1; }
}

/* ---------------------------------------------------------------------------
   Drag to reorder blocks (2026-07-13)
   Clicking a chevron nine times to move one block to the top is not reordering,
   it is data entry. The arrows stay — they are the keyboard path, and they are
   precise — but the mouse gets to do what a mouse is for.
   ------------------------------------------------------------------------- */

.netu-grip {
    display: flex; align-items: center;
    margin: -4px 2px -4px -4px; padding: 4px 2px;
    color: var(--netu-line);
    cursor: grab;
    transition: color .16s ease;
}
.netu-block:hover .netu-grip { color: var(--netu-slate); }
.netu-grip:active { cursor: grabbing; }

.netu-block-head { user-select: none; }        /* or the browser tries to select the label instead of dragging */

/* The block you picked up. */
.netu-block.is-dragging { opacity: .4; }

/* Where it will land. A LINE, not a highlighted box — a box says "this one", and a line says
   "between these two", which is the thing you are actually choosing. */
.netu-block.is-drop-above { box-shadow: 0 -3px 0 -1px var(--netu-blue); }
.netu-block.is-drop-below { box-shadow: 0  3px 0 -1px var(--netu-blue); }

/* ============================================================================================================
   CRM FORMS (C4.6)
   ============================================================================================================ */

/* ---- the tab: a grid of forms ---- */
.netu-forms-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
    flex-wrap: wrap; margin-bottom: 22px; }
.netu-forms-head h2 { font-size: 20px; margin: 0 0 4px; }
.netu-forms-head .netu-help { max-width: 460px; margin: 0; }
.netu-form-new { display: flex; gap: 8px; align-items: center; }
.netu-form-new .netu-input { min-width: 220px; }

.netu-form-grid { display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.netu-form-tile { display: block; padding: 18px; border: 1px solid var(--netu-border, #e5e7eb);
    border-radius: 12px; background: #fff; text-decoration: none; color: inherit;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.netu-form-tile:hover { border-color: var(--netu-primary, #4f46e5);
    box-shadow: 0 6px 20px rgba(17,24,39,.07); transform: translateY(-1px); }
.netu-form-tile-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.netu-form-tile h3 { font-size: 15.5px; margin: 0; font-weight: 650; }
.netu-form-tile-sub { margin: 6px 0 14px; font-size: 12.5px; color: var(--netu-slate, #6b7280); }
.netu-form-tile-foot { display: flex; align-items: baseline; gap: 5px; font-size: 13px;
    color: var(--netu-slate, #6b7280); border-top: 1px solid var(--netu-border, #e5e7eb); padding-top: 12px; }
.netu-form-tile-foot strong { font-size: 17px; color: var(--netu-ink, #111827); }
.netu-form-tile-go { margin-left: auto; font-weight: 600; color: var(--netu-primary, #4f46e5); }

.netu-pill { padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 650;
    letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.netu-pill.is-live  { background: #dcfce7; color: #15803d; }
.netu-pill.is-draft { background: #f3f4f6; color: #6b7280; }

/* ---- "where the leads go" — answered on the page, before they have to ask ---- */
.netu-form-lands { display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin-bottom: 20px;
    border: 1px solid #c7d2fe; background: #eef2ff; border-radius: 12px; font-size: 13.5px; }
.netu-form-lands i { font-size: 20px; color: #4f46e5; }
.netu-form-lands > div { flex: 1; }
.netu-form-lands a { font-weight: 650; }

/* ---- the builder ---- */
.netu-form-builder { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px;
    align-items: start; }
.netu-builder-rail { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 84px; }
.netu-builder-rail h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--netu-slate, #6b7280); margin: 0 0 10px; }
.netu-save { width: 100%; }

.netu-qlist { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }

.netu-qblock { border: 1px solid var(--netu-border, #e5e7eb); border-radius: 10px; background: #fff;
    transition: border-color .15s ease, opacity .15s ease, box-shadow .15s ease; }
.netu-qblock.is-dragging { opacity: .45; }
.netu-qblock.is-drop-above { box-shadow: 0 -3px 0 0 var(--netu-primary, #4f46e5); }
.netu-qblock.is-drop-below { box-shadow: 0 3px 0 0 var(--netu-primary, #4f46e5); }

.netu-qhead { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: grab; }
.netu-qhead:active { cursor: grabbing; }
.netu-grip { color: #d1d5db; font-size: 17px; }
.netu-qblock:hover .netu-grip { color: #9ca3af; }

.netu-qlabel { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-weight: 600;
    font-size: 14.5px; padding: 5px 7px; border-radius: 6px; cursor: text; }
.netu-qlabel:hover { background: #f9fafb; }
.netu-qlabel:focus { outline: none; background: #fff; box-shadow: 0 0 0 2px rgba(99,102,241,.3); }
.netu-qlabel[readonly] { cursor: default; }
.netu-qlabel[readonly]:hover { background: transparent; }

/* Where the answer lands. A BADGE — a fact about the block they chose, never a decision we make them make. */
.netu-qtarget { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px;
    background: #f3f4f6; color: #6b7280; white-space: nowrap; }

.netu-qreq { display: flex; align-items: center; gap: 5px; font-size: 12px;
    color: var(--netu-slate, #6b7280); white-space: nowrap; }
.netu-qdel { border: 0; background: transparent; color: #9ca3af; cursor: pointer; padding: 4px 6px;
    border-radius: 6px; }
.netu-qdel:hover { color: #dc2626; background: #fef2f2; }
.netu-qlock { color: #9ca3af; font-size: 13px; padding: 0 6px; }

.netu-qbody { padding: 0 12px 12px 38px; display: flex; flex-direction: column; gap: 8px; }
.netu-sub { font-size: 12.5px; color: var(--netu-slate, #6b7280); display: flex; align-items: center; gap: 6px; }
.netu-qhelp { font-size: 13px; }

/* ---- the palette ---- */
.netu-add-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    margin-top: 12px; }
.netu-add-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 11px 13px;
    border: 1px solid rgba(255,255,255,.35); border-radius: 9px; background: rgba(255,255,255,.75);
    cursor: pointer; text-align: left; transition: background .15s ease, transform .15s ease; }
.netu-add-btn:hover { background: #fff; transform: translateY(-1px); }
.netu-add-btn i { font-size: 15px; color: var(--netu-primary, #4f46e5); }
.netu-add-name { font-size: 13.5px; font-weight: 600; }
.netu-add-btn small { font-size: 11px; color: var(--netu-slate, #6b7280); }

.netu-embed-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
    line-height: 1.5; resize: vertical; }
.netu-copy { margin: -4px 0 12px; }
.netu-copy .netu-input { font-size: 12px; background: #f9fafb; }

/* ---- the public fill page ---- */
.netu-form-page { max-width: 620px; margin: 48px auto 80px; padding: 0 20px; }
.netu-form-card { padding: 32px; border: 1px solid var(--netu-border, #e5e7eb); border-radius: 16px;
    background: #fff; box-shadow: 0 4px 24px rgba(17,24,39,.05); }
.netu-form-card h1 { font-size: 24px; margin: 0 0 8px; }
.netu-form-intro { color: var(--netu-slate, #6b7280); margin: 0 0 22px; }
.netu-form-asyou { display: flex; align-items: center; gap: 9px; padding: 10px 14px; margin-bottom: 20px;
    background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 9px; font-size: 13px; }
.netu-form-asyou i { color: #4f46e5; }
.netu-form-card .req { color: #dc2626; margin-left: 2px; }
.netu-options { display: flex; flex-direction: column; gap: 7px; }
.netu-opt { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 400; cursor: pointer; }
.netu-consent { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.55;
    color: var(--netu-slate, #6b7280); cursor: pointer; }
.netu-captcha { margin: 20px 0 4px; }
.netu-form-foot { text-align: center; margin-top: 18px; font-size: 12.5px;
    color: var(--netu-slate-light, #9ca3af); }

/* ⛔ THE HONEYPOT. Off-screen, not display:none — plenty of bots know to skip a hidden field, and rather
   fewer of them compute layout. It must never be reachable by tab, a screen reader, or an autofill. */
.netu-pot { position: absolute !important; left: -9999px !important; top: auto !important;
    width: 1px !important; height: 1px !important; opacity: 0 !important; }

/* ---- the answers (counts, never people) ---- */
.netu-stats-note { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 20px;
    background: #f9fafb; border: 1px solid var(--netu-border, #e5e7eb); border-radius: 10px; font-size: 13px;
    color: var(--netu-slate, #6b7280); }
.netu-stats { display: flex; flex-direction: column; gap: 14px; }
.netu-stat-card { padding: 20px; border: 1px solid var(--netu-border, #e5e7eb); border-radius: 12px;
    background: #fff; }
.netu-stat-card h3 { font-size: 15px; margin: 0 0 14px; }
.netu-bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; font-size: 13px; }
.netu-bar-label { flex: 0 0 170px; color: var(--netu-slate, #6b7280); }
.netu-bar { flex: 1; height: 8px; background: #f3f4f6; border-radius: 999px; overflow: hidden; }
.netu-bar-fill { height: 100%; background: var(--netu-primary, #4f46e5); border-radius: 999px;
    transition: width .4s ease; }
.netu-bar-count { flex: 0 0 32px; text-align: right; font-weight: 650; }

@media (max-width: 900px) {
    .netu-form-builder { grid-template-columns: 1fr; }
    .netu-builder-rail { position: static; }
    .netu-bar-label { flex-basis: 110px; }
}

/* ---- a lead form living inside a booth / profile column ---- */
.netu-form-embed-section { margin-top: 28px; padding: 26px; border-radius: 14px;
    border: 1px solid var(--netu-border, #e5e7eb); background: #fff; }
.netu-form-embed-section h2 { font-size: 19px; margin: 0 0 6px; font-weight: 650; }
.netu-form-embed-section .netu-form-intro { margin: 0 0 20px; color: var(--netu-slate, #6b7280);
    font-size: 14px; }
.netu-form-inline { max-width: 520px; }
.netu-form-inline .netu-field { margin-bottom: 14px; }
.netu-form-inline label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.netu-form-inline .netu-consent { font-weight: 400; }
.netu-form-inline .req { color: #dc2626; margin-left: 2px; }

/* ============================================================================================================
   PAYOUTS (Track B, B1)
   ============================================================================================================ */
.netu-payout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.netu-payout-main { text-align: center; padding: 40px 32px; }
.netu-payout-main h2 { font-size: 21px; margin: 14px 0 10px; }
.netu-payout-main > p { color: var(--netu-slate, #6b7280); max-width: 460px; margin: 0 auto 22px; }
.netu-payout-main .netu-unsub-note { max-width: 480px; margin: 0 auto 16px; text-align: left; }
.netu-payout-main .netu-hint { max-width: 440px; margin: 16px auto 0; font-size: 12.5px; }
.netu-payout-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.netu-payout-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; max-width: 420px;
    margin: 24px auto 0; text-align: left; }
.netu-payout-facts dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--netu-slate, #6b7280); margin-bottom: 3px; }
.netu-payout-facts dd { margin: 0; font-weight: 600; font-size: 14px; }
.netu-yes { color: #15803d; }

/* The wallet. There is no edit button here, and there is no edit path — a mistake in a ledger is corrected
   with another entry, never by changing the past. */
.netu-payout-wallet { position: sticky; top: 84px; }
.netu-payout-wallet h3 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--netu-slate, #6b7280); margin: 0 0 8px; }
.netu-wallet-balance { font-size: 30px; font-weight: 700; margin: 0 0 18px; letter-spacing: .01em; }

.netu-statement { list-style: none; margin: 0; padding: 0; }
.netu-statement li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 10px 0; border-top: 1px solid var(--netu-border, #e5e7eb); font-size: 13px; }
.netu-statement-what { color: var(--netu-slate, #6b7280); }
.netu-statement-amount { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.netu-statement-amount.is-in  { color: #15803d; }
.netu-statement-amount.is-out { color: var(--netu-ink, #111827); }

@media (max-width: 900px) {
    .netu-payout-grid { grid-template-columns: 1fr; }
    .netu-payout-wallet { position: static; }
}

/* -----------------------------------------------------------------------------
   Premium avatar treatment — gold ring + crown for members on an ACTIVE PAID
   plan. Same ONE rule as the verified badge (VerificationService server-side;
   currentPlan.paid() for the viewer's own avatar) — never a second definition
   of "premium", never a second gold.
   Usage: wrap the round element in .netu-premium-wrap, put .netu-premium-ring
   on the round element, and drop the crown fragment
   (~{fragments/verified-badge :: crown('...')}) as a SIBLING inside the wrap —
   never inside the circle, whose overflow:hidden would clip it.
   ----------------------------------------------------------------------------- */
.netu-premium-wrap { position: relative; display: inline-flex; flex: 0 0 auto; margin: 10px;}
.netu-premium-ring { box-shadow: 0 0 0 2.5px #e2a70f, 0 2px 10px rgba(12, 27, 42, 0.18); }

/* A bordered PANEL that frames a whole premium-gated section (e.g. Exhibitor
   visibility on group privacy). Same ONE gold as the ring — never a second gold.
   The gold hairline + faint gold wash reads "premium" whether the feature is
   unlocked or not; the .locked modifier only softens it for a Free owner. */
.netu-premium-box {
    border: 1px solid color-mix(in srgb, #e2a70f 55%, var(--netu-line, #dfe3e8));
    border-radius: .75rem;
    background: linear-gradient(180deg, color-mix(in srgb, #e2a70f 5%, #fff), #fff);
    box-shadow: 0 1px 3px rgba(226, 167, 15, 0.08);
}
/* Free owner — a touch dimmer + a dashed hairline says "available, but not yours yet". */
.netu-premium-box.locked {
    border-style: dashed;
    background: linear-gradient(180deg, color-mix(in srgb, #e2a70f 4%, #fff), #fbfbfa);
}
.netu-premium-tag {
    display: inline-flex; align-items: center; gap: .3rem;
    background: linear-gradient(135deg, #f6cd4c, #d99a06);
    color: #fff; font-weight: 600; font-size: .68rem; letter-spacing: .02em;
    padding: .18rem .5rem; border-radius: 999px; vertical-align: middle;
    box-shadow: 0 1px 3px rgba(217, 154, 6, 0.35);
}
.netu-crown {
    position: absolute; top: -7px; right: -6px; z-index: 2;
    width: 18px; height: 18px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #f6cd4c, #d99a06);
    color: #fff; font-size: 9px; line-height: 1;
    border: 1.5px solid #fff;
    box-shadow: 0 1px 3px rgba(12, 27, 42, 0.3);
}
/* Hero-size portraits (the 116px profile avatar) carry a bigger crown, tucked onto the circle's edge. */
.netu-crown-lg { width: 28px; height: 28px; font-size: 14px; margin-top: -30px; right: 2px; }
.netu-crown svg { width: 64%; height: 64%; display: block; }
.netu-add-label { color: #fff; font-weight: 600;}
.manage-icon-wrap {background: var(--netu-warning);}
.netu-icon-danger {border: none; background: none; color: red; font-size: 1.25rem;}
/* -----------------------------------------------------------------------------
   C5 · On-demand % ICP Match — the chip wears SEBASTIAN'S face (locked, Pushpak
   2026-07-19): the same gradient orb + stars the assistant uses. Every run bills
   the Sebastian meter, so the run button SAYS so and nothing auto-runs on open
   (delegated handler in app.js).
   ----------------------------------------------------------------------------- */
.netu-match-wrap { position: relative; display: inline-block; }
.netu-match-chip {
    display: inline-flex; align-items: center; gap: .45rem;
    border: 1px solid var(--netu-line); background: #fff; border-radius: 999px;
    padding: .28rem .85rem .28rem .32rem; font-size: .82rem; font-weight: 600;
    color: var(--netu-ink); cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
}
.netu-match-chip:hover { box-shadow: 0 3px 12px rgba(12, 27, 42, .16); transform: translateY(-1px); }
.netu-match-orb {
    width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 13px;
    background: linear-gradient(135deg, var(--netu-seb-1), var(--netu-seb-2));
}
.netu-match-panel {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 1050;
    width: 340px; max-width: 88vw; background: #fff; text-align: left;
    border: 1px solid var(--netu-line); border-radius: 14px; padding: 16px;
    box-shadow: 0 12px 34px rgba(12, 27, 42, .18);
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}
.netu-match-wrap.is-open .netu-match-panel { opacity: 1; transform: translateY(0); pointer-events: auto; }
.netu-match-wrap--right .netu-match-panel { left: auto; right: 0; }
.netu-match-pct { font-size: 2rem; font-weight: 800; color: var(--netu-blue); line-height: 1; }
.netu-match-panel h6 {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--netu-slate-light); margin: .9rem 0 .35rem;
}
.netu-match-panel ul { margin: 0; padding-left: 1.1rem; font-size: .83rem; color: var(--netu-slate); }
.netu-match-panel ul li { margin-bottom: .25rem; }
.netu-match-cost { font-size: .75rem; color: var(--netu-slate-light); }
/* The booth-style company card clips its banner corners with overflow:hidden — un-clip while the
   match panel is open so the popover can escape the card. */
.netu-bizcard--booth:has(.netu-match-wrap.is-open) { overflow: visible; }
/* While a match panel is open, lift its host card above LATER siblings — the card's hover transform creates a
   stacking context that traps the panel's z-index, so the next card in the DOM painted over it (2026-07-19). */
.netu-bizcard:has(.netu-match-wrap.is-open),
.card:has(.netu-match-wrap.is-open) { position: relative; z-index: 1060; }
/* The match MODAL (2026-07-19, replaces the anchored panel): entity block + result typography. The
   .netu-match-panel rules above stay — the share popover still uses that geometry. */
.netu-match-entity-img {
    width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
    border: 1px solid var(--netu-line); background: #fff;
}
.netu-match-entity-initial {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--netu-surface); color: var(--netu-slate); font-weight: 700; font-size: 1.2rem;
}
#netuMatchModal h6 {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--netu-slate-light); margin: .9rem 0 .35rem;
}
#netuMatchModal [data-match-result] ul { margin: 0; padding-left: 1.1rem; font-size: .86rem; color: var(--netu-slate); }
#netuMatchModal [data-match-result] ul li { margin-bottom: .25rem; }
/* Bootstrap has no min-w-0 utility; flex children need it for text-truncate to actually truncate
   (already relied on by posts.html and the match modal). */
.min-w-0 { min-width: 0; }

/* -----------------------------------------------------------------------------
   Mobile safety net for the white-label topbars (group/event, 2026-07-19): the
   bar has a FIXED height, so a wrapping action cluster used to paint OVER the
   hero. Below md the bar may grow instead — wrapped rows stay on white.
   ----------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .app-topbar { height: auto; min-height: var(--netu-topbar-height); }
    .app-topbar .container-fluid { padding-left: .75rem !important; padding-right: .75rem !important; }
}
/* @Speaker mentions in agenda descriptions (AgendaMentionRenderer) */
.netu-mention { color: var(--netu-blue); font-weight: 600; text-decoration: none; }
.netu-mention:hover { text-decoration: underline; }

/* =============================================================================
   ⛔ ELEVATED PUBLIC-PAGE THEME  (.evt-theme scope) — Pushpak 2026-07-19.
   A refreshed, punchier visual language for event & group public pages (rolling
   out platform-wide later). Adopted from the event-page reference: big bold
   Inter headings with tight tracking, gradient CTAs, rounded soft-shadow cards,
   pill labels, alternating soft sections, gradient tag chips.
   ⛔ NOTHING here is hardcoded content — these are reusable component classes;
   the templates keep all their data + logic. Scoped under .evt-theme so the rest
   of the platform is untouched until we deliberately opt a page in.
   ============================================================================= */
.evt-theme {
    /* Refreshed brand palette (brighter than the corporate tokens; Pushpak chose
       to move toward the reference). Kept as evt-* so a future platform-wide flip
       is a rename, not a hunt. */
    --evt-blue:   var(--netu-blue);
    --evt-cyan:   #10C8E8;
    --evt-red:    #9c0101;
    --evt-orange: #E75431;
    --evt-yellow: #FFC21A;
    --evt-green:  #0BA66F;
    --evt-ink:    #111827;
    --evt-muted:  #6b7280;
    --evt-soft:   #f7f8fb;
    --evt-line:   #e5e7eb;
    color: var(--evt-ink);
}

/* ---- Typography rhythm: pill → section-title → section-lead ---- */
.evt-theme .evt-eyebrow {
    display: inline-flex; gap: .5rem; align-items: center;
    border: 1px solid rgba(21,87,244,.16); background: #fff; color: var(--evt-blue);
    border-radius: 999px; padding: .45rem .8rem; font-weight: 700; font-size: .85rem;
    box-shadow: 0 8px 24px rgba(17,24,39,.05);
}
.evt-theme .evt-pill {
    display: inline-flex; align-items: center; gap: .35rem;
    border-radius: 999px; padding: .35rem .7rem; background: #f3f4f6; color: #374151;
    font-weight: 700; font-size: .8rem;
}
.evt-theme .evt-pill-primary { background: color-mix(in srgb, var(--evt-blue) 12%, #fff); color: var(--evt-blue); }
/* ⛔ The LOCATION pill can hold a full venue address (Pushpak, 2026-08-13) — wrap it onto multiple lines inside
   the card instead of overflowing the edge. Only the location pill; the short status/type pills keep the 999px
   single-line shape. */
.evt-theme .evt-pill-location {
    align-items: flex-start;      /* icon tops-aligns when the text wraps to 2+ lines */
    max-width: 100%;              /* never wider than the card */
    text-align: left;
    line-height: 1.35;
    border-radius: 14px;          /* a rounded block reads better than a giant 999px blob when multi-line */
}
.evt-theme .evt-pill-location > i { margin-top: 3px; flex-shrink: 0; }
.evt-theme .evt-pill-location > span { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.evt-theme .evt-section-title {
    font-weight: 850; letter-spacing: .040em; line-height: 1.05;
    font-size: clamp(1.8rem, 3.4vw, 3.2rem);
}
.evt-theme .evt-section-lead {
    color: var(--evt-muted); max-width: 720px; line-height: 1.7;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
}
.evt-theme .evt-soft { background: var(--evt-soft); }

/* ---- Gradient CTAs ---- */
.evt-theme .evt-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    border-radius: 999px; font-weight: 800; padding: .7rem 1.6rem; text-decoration: none;
    border: 0; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.evt-theme .evt-btn-primary {
    color: #fff; background: linear-gradient(135deg, var(--evt-red), var(--evt-orange));
    box-shadow: 0 14px 30px rgba(247,22,53,.22);
}
.evt-theme .evt-btn-primary:hover { color: #fff; transform: translateY(-1px); }
.evt-theme .evt-btn-outline {
    color: var(--evt-ink); border: 1px solid transparent;
    background: linear-gradient(#fff,#fff) padding-box,
                linear-gradient(135deg, var(--evt-blue), var(--evt-cyan), var(--evt-orange)) border-box;
}
.evt-theme .evt-btn-outline:hover { color: var(--evt-ink); transform: translateY(-1px); }
.evt-theme .evt-btn-soft {
    color: var(--evt-blue); background: var(--evt-soft); border: 1px solid var(--evt-red); font-weight: 750;
}
.evt-theme .evt-btn-soft:hover { color: var(--evt-red); background: #fff; }
.evt-theme .evt-btn-lg { padding: .95rem 2.2rem; font-size: 1.05rem; }

/* ---- Cards ---- */
.evt-theme .evt-card {
    background: #fff; border: 1px solid var(--evt-line); border-radius: 24px;
    padding: 1.5rem; height: 100%; box-shadow: 0 16px 36px rgba(17,24,39,.045);
}
.evt-theme .evt-card-gradient {
    border-color: rgba(21,87,244,.12);
    background: linear-gradient(135deg,#fff 0%,#f7fbff 56%,#fff8f4 100%);
}
.evt-theme .evt-package-card { display: flex; flex-direction: column; }
.evt-theme .evt-package-card .evt-btn,
.evt-theme .evt-package-card .btn { margin-top: auto; }
.evt-theme .evt-price { font-weight: 850; letter-spacing: .02em; font-size: clamp(2rem, 3vw, 2.6rem); }

/* ---- Zone boundaries (V200) — box each NAMED exhibitor zone (North Hall, Food Court) on the wall + pricing
   ladder. Only named zones get the box; the ungrouped/trailing block stays plain (parity). The header is a
   gradient pill sitting at the box's top-left. */
.exh-zone {
    border: 1px solid color-mix(in srgb, var(--netu-seb-1) 22%, #fff); border-radius: 24px;
    padding: 1.5rem 1.5rem 1.75rem; background: color-mix(in srgb, var(--netu-seb-1) 4%, #fff);
    box-shadow: 0 10px 30px rgba(83,74,183,.08);
}
.exh-zone-head {
    display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.35rem;
    border-radius: 999px; padding: .6rem 1.25rem;
    background: linear-gradient(135deg, var(--netu-seb-1), var(--netu-seb-2)); color: #fff;
    font-weight: 800; font-size: clamp(1.15rem, 1.8vw, 1.5rem); letter-spacing: .01em;
    box-shadow: 0 10px 24px rgba(83,74,183,.26);
}
.exh-zone-head > i { font-size: .95em; }

/* Plan/tier heading on group + event walls — a real category ("Toy's & Gifts"), not a redundant
   Platinum label. Extra air below (and between stacked plans) so the name doesn't sit on the cards. */
.exh-tier-head {
    display: block;
    margin: 0 0 1.75rem;
    padding-bottom: .55rem;
    color: #1f2937;
    font-weight: 800;
    font-size: .95rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(17, 24, 39, .12);
}
[data-exh-tier] + [data-exh-tier] > .exh-tier-head { margin-top: 2rem; }

/* Logo box for sponsor/exhibitor company cards */
.evt-theme .evt-logo-box {
    min-height: 92px; border: 1px solid rgba(229,231,235,.9); border-radius: 18px;
    background: #fff; display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.evt-theme .evt-logo-box img { max-width: 150px; max-height: 58px; object-fit: contain; }

/* Speaker card + avatar */
.evt-theme .evt-avatar {
    width: 72px; height: 72px; border-radius: 22px;
    background: linear-gradient(135deg, rgba(21,87,244,.14), rgba(16,200,232,.22));
    display: flex; align-items: center; justify-content: center;
    color: var(--evt-blue); font-weight: 900; font-size: 1.3rem; overflow: hidden;
}
.evt-theme .evt-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Meta strip: gradient tag chips + share ---- */
.evt-theme .evt-meta-strip {
    background: linear-gradient(135deg, rgba(21,87,244,.06), rgba(16,200,232,.05) 46%, rgba(255,100,34,.06)), #fff;
    border-block: 1px solid rgba(229,231,235,.75);
}
.evt-theme .evt-tag {
    display: inline-flex; align-items: center; min-height: 34px; text-decoration: none;
    border-radius: 999px; padding: .42rem .8rem; font-size: .88rem; font-weight: 750;
    color: var(--evt-blue);
    background: linear-gradient(#fff,#fff) padding-box,
               linear-gradient(135deg, rgba(21,87,244,.42), rgba(16,200,232,.36), rgba(255,100,34,.42)) border-box;
    border: 1px solid transparent; box-shadow: 0 10px 24px rgba(17,24,39,.06);
}
.evt-theme .evt-tag:hover { color: var(--evt-blue); }

/* ---- Hero sponsors marquee (Pushpak, 2026-08-12 · polished same day): the band between the hero and the
   meta strip on group/event overviews. Static + centered when the logos fit; a slow seamless loop when they
   overflow (two .sponsor-marquee-seq copies, translateX(-50%)); pause on hover so chips stay clickable.
   The look ties into the evt-tag design language: gradient-border chips on the brand tint, edge fades while
   scrolling, and the TOP price tier gets the gold treatment — higher payers literally shine first. ---- */
.evt-theme .sponsor-marquee-band {
    background: linear-gradient(135deg, rgba(21,87,244,.045), rgba(16,200,232,.035) 46%, rgba(255,100,34,.045)), #fff;
    border-top: 1px solid rgba(229,231,235,.75);
    padding: .95rem 0;
}
.evt-theme .sponsor-marquee { display: flex; align-items: center; gap: 1.2rem; min-width: 0; }
.evt-theme .sponsor-marquee-label {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: .45rem;
    font-size: .7rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase;
    color: var(--evt-blue); white-space: nowrap;
    padding: .45rem .9rem; border-radius: 999px;
    background: linear-gradient(#fff,#fff) padding-box,
               linear-gradient(135deg, rgba(21,87,244,.4), rgba(16,200,232,.34), rgba(255,100,34,.4)) border-box;
    border: 1px solid transparent; box-shadow: 0 8px 20px rgba(17,24,39,.06);
}
.evt-theme .sponsor-marquee-label .bi { font-size: .85rem; }
.evt-theme .sponsor-marquee-viewport { flex: 1; min-width: 0; overflow: hidden; padding-block: .35rem; }
/* Edge fades ONLY while scrolling — a static centered row keeps its crisp edges. */
.evt-theme .sponsor-marquee-viewport.is-overflowing {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}
.evt-theme .sponsor-marquee-track { display: flex; width: max-content; margin-inline: auto; }
.evt-theme .sponsor-marquee-track.is-animated {
    margin-inline: 0;
    animation: sponsor-marquee-scroll var(--marquee-duration, 40s) linear infinite;
}
.evt-theme .sponsor-marquee-band:hover .sponsor-marquee-track.is-animated { animation-play-state: paused; }
.evt-theme .sponsor-marquee-seq { display: flex; align-items: center; gap: .7rem; padding-right: .7rem; }
.evt-theme .sponsor-chip {
    display: inline-flex; align-items: center; gap: .6rem; white-space: nowrap;
    padding: .42rem 1.05rem .42rem .5rem; border-radius: 999px; text-decoration: none;
    background: linear-gradient(#fff,#fff) padding-box,
               linear-gradient(135deg, rgba(21,87,244,.28), rgba(16,200,232,.22), rgba(255,100,34,.28)) border-box;
    border: 1px solid transparent;
    color: #1f2937; font-size: .9rem; font-weight: 700;
    box-shadow: 0 8px 20px rgba(17,24,39,.06);
    transition: box-shadow .2s ease, transform .2s ease, filter .2s ease;
}
.evt-theme .sponsor-chip:hover {
    color: var(--evt-blue); transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(21,87,244,.16);
}
.evt-theme .sponsor-chip img,
.evt-theme .sponsor-chip-initial {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    background: #fff; border: 1px solid rgba(229,231,235,.9);
}
.evt-theme .sponsor-chip img { object-fit: contain; padding: 3px; }
.evt-theme .sponsor-chip-initial {
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 850; font-size: 1.05rem; color: #fff; border: 0;
    background: linear-gradient(135deg, var(--evt-blue, #1557f4), #10c8e8);
    text-transform: uppercase;
}
/* The TOP price tier — gold ring + star, the "noticed first" the sponsor paid for. */
.evt-theme .sponsor-chip-top {
    background: linear-gradient(#fffdf5,#fffdf5) padding-box,
               linear-gradient(135deg, #f3cf67, #e0aa2e 45%, #f6dd8d) border-box;
    box-shadow: 0 10px 24px rgba(224,170,46,.22);
}
.evt-theme .sponsor-chip-top:hover { box-shadow: 0 16px 34px rgba(224,170,46,.32); color: #92600a; }
.evt-theme .sponsor-chip-top .sponsor-chip-star { color: #d4a017; font-size: .8rem; }
@keyframes sponsor-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .evt-theme .sponsor-marquee-track { animation: none !important; }
    .evt-theme .sponsor-marquee-viewport { overflow-x: auto; }
    .evt-theme .sponsor-marquee-viewport.is-overflowing { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 575.98px) {
    .evt-theme .sponsor-marquee { flex-direction: column; align-items: stretch; gap: .55rem; }
    .evt-theme .sponsor-marquee-label { align-self: center; }
}

/* ---- Hero, redesigned 2026-07-22 (Pushpak): the banner renders CLEAN as a strip on top (no white wash
   over it — organisers' banners carry their own text/branding); the title, lead and cards sit on WHITE
   below it. ::before carries the image, so BOTH shells (groups + events) get this with no template change.
   No banner uploaded → the brand-gradient fallback strip. ---- */
.evt-theme .evt-hero { position: relative; overflow: visible; padding: 0 0 24px; background: #fff; }
.evt-theme .evt-hero::before {
    content: ""; display: block;
    /* 4:1 banner contract (2026-08-26; reaffirmed 2026-09-29) — matches the cropper + manage preview;
       see .pubp-hero-bg. */
    aspect-ratio: 4 / 1;
    margin-bottom: 22px;
    background: var(--evt-hero-image, var(--netu-hero-bg));
    background-size: cover; background-position: center;
}
/* CONTAINER-WIDTH banner (Pushpak, 2026-09-29 — booth-approved treatment; a shell OPTS IN with
   evt-hero--capped: groups today, events when asked). ≥1340px: centered 1300px, rounded, small top
   gap — effectively flush with the Bootstrap .container content below; smaller screens keep the
   original full-bleed strip. */
.evt-theme .evt-hero--capped::before {
    max-width: 1300px;
    margin: 14px auto 22px;
    border-radius: 14px;
}
@media (max-width: 1340px) {
    .evt-theme .evt-hero--capped::before { border-radius: 0; margin: 0 0 22px; }
}
.evt-theme .evt-hero-inner { position: relative; z-index: 1; margin-top: -5rem;}
.evt-theme .evt-hero h1 {
    font-weight: 850; letter-spacing: .044em; line-height: 1.05;
    font-size: clamp(2rem, 4vw, 3.4rem); max-width: 900px;
    padding-top: 1.25rem;
}
.evt-theme .evt-hero-lead { max-width: 720px; color: #4b5563; font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.7; }
.evt-theme .evt-sticky-card {
    position: sticky; top: 84px; border-radius: 28px; border: 1px solid var(--evt-line);
    background: #fff; box-shadow: 0 24px 60px rgba(17,24,39,.08); padding: 1.5rem;
}
/* The hero's action card floats up over the clean banner's right edge — a deliberate card, not a wash. */
@media (min-width: 992px) {
    .evt-theme .evt-hero .evt-sticky-card { margin-top: -110px; }
}

/* ---- Schedule / ticket rows ---- */
.evt-theme .evt-schedule-card {
    border: 1px solid var(--evt-line); background: #fff; border-radius: 26px;
    box-shadow: 0 20px 50px rgba(17,24,39,.06);
}
.evt-theme .evt-date-chip {
    min-width: 92px; border-radius: 20px; text-align: center; padding: .9rem .7rem;
    background: linear-gradient(180deg,#f8fbff,#fff); border: 1px solid var(--evt-line);
}
.evt-theme .evt-date-chip .d { font-size: 1.85rem; font-weight: 900; line-height: 1; }
.evt-theme .evt-date-chip .m { color: var(--evt-muted); font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.evt-theme .evt-ticket-row {
    display: flex; gap: 1rem; align-items: center; justify-content: space-between;
    border: 1px solid var(--evt-line); border-radius: 18px; padding: 1rem; background: #fff;
}
.evt-theme .evt-ticket-row--vip { border-color: rgba(255,100,34,.22); background: linear-gradient(135deg,#fff 0%,#fff8f4 100%); }
.evt-theme .evt-ticket-price { font-weight: 900; font-size: 1.3rem; }

/* ---- CTA band ---- */
.evt-theme .evt-cta-band {
    background: linear-gradient(135deg,#101827, var(--evt-blue)); color: #fff;
    border-radius: 34px; overflow: hidden; position: relative;
}
.evt-theme .evt-cta-band::after {
    content: ""; position: absolute; right: -90px; bottom: -120px; width: 300px; height: 300px;
    border-radius: 50%; background: rgba(16,200,232,.24);
}

@media (max-width: 991px) {
    .evt-theme .evt-hero { padding: 0 0 32px; }
    .evt-theme .evt-sticky-card { position: static; }
    .evt-theme .evt-ticket-row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 575.98px) {
    /* A 4:1 banner is short on a phone — the -5rem content overlap would swallow it. Content sits below. */
    .evt-theme .evt-hero-inner { margin-top: 0; }
}

/* -----------------------------------------------------------------------------
   MANAGE HARMONIZATION — the manage shells carry .evt-theme too, so their plain
   Bootstrap components pick up the refreshed identity without rewriting every
   settings template (Pushpak 2026-07-19: "the manage section should match").
   Scoped to .evt-theme, so only opted-in pages are affected.
   ----------------------------------------------------------------------------- */
.evt-theme .card { border-radius: 18px; }
.evt-theme .card.border-0 { box-shadow: 0 12px 30px rgba(17,24,39,.05); }
.evt-theme h1, .evt-theme h2, .evt-theme h3 { letter-spacing: .02em; }

/* Primary actions → the refreshed gradient (matches the public pages' evt-btn-primary). */
.evt-theme .btn-primary {
    border: 0; 
    font-size: 18px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--evt-red), var(--evt-orange));
    box-shadow: 0 10px 22px var(--netu-line);
}
.evt-theme .btn-primary:hover, .evt-theme .btn-primary:focus { filter: brightness(1.02); transform: translateY(-1px); }
.evt-theme .btn-outline-primary {
    color: var(--evt-blue); border-color: color-mix(in srgb, var(--evt-blue) 45%, #fff);
}
.evt-theme .btn-outline-primary:hover { background: var(--evt-blue); border-color: var(--evt-blue); color: #fff; }
.evt-theme .btn, .evt-theme .form-control, .evt-theme .form-select { border-radius: 10px; }
.evt-theme .form-control:focus, .evt-theme .form-select:focus {
    border-color: color-mix(in srgb, var(--evt-blue) 50%, #fff);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--evt-blue) 18%, transparent);
}

/* The manage sidenav + tabs active state → refreshed blue. */
.evt-theme .list-group-item.active {
    background: color-mix(in srgb, var(--evt-blue) 10%, #fff);
    color: var(--evt-blue); border-color: color-mix(in srgb, var(--evt-blue) 18%, var(--evt-line));
    font-weight: 700;
}
.evt-theme .list-group-item.active i { color: var(--evt-blue); }
.evt-theme .nav-pills .nav-link.active,
.evt-theme .nav-tabs .nav-link.active { color: var(--evt-red); background: #fff;} /* was blue in blue on member tab */
.evt-theme .badge.bg-primary { background: var(--netu-line) !important; }
.evt-theme .text-primary { color: var(--evt-blue) !important; }


/* Public stat cards on the event overview (the reference's event-stat-card) — gradient wash, centered,
   bold small label above a big number (2026-07-19). */
.evt-theme .evt-stat-card {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; min-height: 122px; height: 100%;
    border: 1px solid rgba(21,87,244,.1); border-radius: 22px; padding: 1.1rem;
    box-shadow: 0 18px 40px rgba(17,24,39,.06);
    background: linear-gradient(135deg, #ffffff 0%, #f6faff 48%, #fff7f3 100%);
}
.evt-theme .evt-stat-card .evt-stat-label {
    font-weight: 800; font-size: .85rem; color: var(--evt-ink); letter-spacing: .01em;
}
.evt-theme .evt-stat-card .evt-stat-value {
    font-weight: 800; font-size: 2rem; line-height: 1.05; letter-spacing: .03em; color: var(--evt-ink);
}

/* Smooth in-page scrolling for anchor jumps (e.g. hero "Get Tickets" → #tickets). House rule: never abrupt. */
html { scroll-behavior: smooth; }

/* ⛔ DRAFT-STATE SETUP CHECKLIST on the event manage dashboard (Pushpak, 2026-11-10). A draft opens on
   "Get your event live" — big state-aware step cards — instead of zero-stats. The CURRENT step wears a
   Sebastian-gradient border ring and holds the page's ONE .netu-cta-3d; done steps settle back (reduced
   opacity, green check); future steps wait quietly. All motion is eased — never abrupt. */
.evt-theme .evt-setup-rail {
    height: 8px; border-radius: 999px; background: #eef1f7; overflow: hidden;
}
.evt-theme .evt-setup-fill {
    height: 100%; border-radius: 999px; min-width: 8px;
    background: linear-gradient(90deg, var(--netu-seb-1), var(--netu-seb-2));
    transition: width .5s ease;
}
.evt-theme .evt-setup-step {
    display: flex; align-items: center; gap: 1rem;
    border: 1px solid #e7eaf3; border-radius: 14px; background: #fff;
    padding: 1rem 1.15rem; margin-bottom: .65rem;
    transition: transform .18s ease, box-shadow .18s ease, opacity .25s ease;
}
.evt-theme .evt-setup-step:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -12px rgba(17,24,39,.22);
}
.evt-theme .evt-setup-step.now {
    border: 1px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box,
                linear-gradient(135deg, var(--netu-seb-1), var(--netu-seb-2)) border-box;
}
.evt-theme .evt-setup-step.done { opacity: .72; }
.evt-theme .evt-setup-step.done:hover { opacity: 1; }
.evt-theme .evt-setup-step.todo { opacity: .6; }
.evt-theme .evt-setup-step.todo:hover { opacity: 1; }
.evt-theme .evt-setup-title { font-weight: 700; }
.evt-theme .evt-setup-sub { font-size: .86rem; color: var(--evt-muted, #6c757d); }
/* Desktop reads larger (Pushpak, 2026-11-10); mobile keeps the compact sizes above. */
@media (min-width: 768px) {
    .evt-theme .evt-setup-title { font-size: 1.1rem; }
    .evt-theme .evt-setup-sub { font-size: .95rem; }
}
/* Manage sidenav: larger text + icons (Pushpak, 2026-11-10) — the fragment's `small` wrapper capped it. */
.evt-theme #manageSidebar .list-group-item { font-size: 1rem; padding: .8rem 1.1rem; }
.evt-theme #manageSidebar .list-group-item .bi { font-size: 1.15rem; vertical-align: -.12em; }
/* …and one solid color per icon (Pushpak, same day) — similar saturation/luminance so no item shouts. */
.evt-theme #manageSidebar .bi-speedometer2 { color: #2563EB; }   /* Dashboard — blue */
.evt-theme #manageSidebar .bi-pencil-square { color: #7C3AED; }  /* Details — violet */
.evt-theme #manageSidebar .bi-calendar-week { color: var(--netu-red); } /* Schedules — NetU red */
.evt-theme #manageSidebar .bi-tag { color: #F59E0B; }            /* Coupons — amber */
.evt-theme #manageSidebar .bi-mic { color: #DB2777; }            /* Speakers — pink */
.evt-theme #manageSidebar .bi-people { color: #059669; }         /* Attendees — green */
.evt-theme #manageSidebar .bi-envelope-plus { color: #0891B2; }  /* Invite — cyan */
.evt-theme #manageSidebar .bi-ui-checks { color: #9333EA; }      /* Forms — purple */
.evt-theme #manageSidebar .bi-alarm { color: #EA580C; }          /* Reminders — orange */
.evt-theme #manageSidebar .bi-folder2-open { color: #CA8A04; }   /* Files — gold */
.evt-theme #manageSidebar .bi-link-45deg { color: #475569; }     /* Tracking — slate */
.evt-theme #manageSidebar .bi-cash-coin { color: #16A34A; }      /* Monetize — money green */
/* …and the GROUP manage nav's own icons (Pushpak, 2026-11-11 — same treatment, shared scope). */
.evt-theme #manageSidebar .bi-shield-lock { color: #0D9488; }    /* Privacy — teal */
.evt-theme #manageSidebar .bi-collection { color: #6366F1; }     /* Categories — indigo */
.evt-theme #manageSidebar .bi-calendar-event { color: var(--netu-red); } /* Events — NetU red */
.evt-theme #manageSidebar .bi-file-earmark-richtext { color: #C026D3; } /* Pages — fuchsia */
.evt-theme #manageSidebar .bi-chat-square-text { color: #0284C7; } /* Spaces — sky */
.evt-theme #manageSidebar .bi-tags { color: #D97706; }           /* Labels — amber */
.evt-theme #manageSidebar .bi-diagram-3 { color: #4F46E5; }      /* Child groups — indigo */
.evt-theme #manageSidebar .bi-arrow-left-right { color: #475569; } /* Transfer — slate */
.evt-theme #manageSidebar .bi-credit-card { color: #16A34A; }    /* Member plans — green */
.evt-theme #manageSidebar .bi-star { color: #F59E0B; }           /* Sponsor plans — amber */
.evt-theme #manageSidebar .bi-shop { color: #C2410C; }           /* Exhibitor plans — burnt orange */
.evt-theme #manageSidebar .bi-heart { color: #E11D48; }          /* Donations — rose */
.evt-theme #manageSidebar .bi-pie-chart { color: #0891B2; }      /* Revenue partners — cyan */
.evt-theme #manageSidebar .bi-receipt { color: #64748B; }        /* Transactions — slate */
.evt-theme .evt-setup-publish {
    border-top: 1px dashed #e7eaf3; margin-top: 1rem; padding-top: 1rem;
}
/* Agenda session cards (Pushpak, 2026-11-10): a VISIBLE solid border so existing sessions read as real
   content blocks, not background furniture. */
.evt-theme .evt-agenda-card {
    border: 2px solid var(--evt-blue);
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(17,24,39,.06);
}

/* Schedule-builder empty slot (Pushpak, 2026-11-10): a dashed "this part isn't built yet" zone inside
   the public-style schedule card — reads as a place something will appear, not as missing content. */
.evt-theme .evt-build-slot {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    border: 1.5px dashed #cfd6e4; border-radius: 12px; padding: .8rem 1rem; font-size: .92rem;
    background: #fafbfe; transition: border-color .18s ease, background .18s ease;
}
.evt-theme .evt-build-slot:hover { border-color: var(--netu-seb-1); background: #fff; }

/* Growth recommendations: ONE line per item in a TWO-COLUMN grid (Pushpak, 2026-11-10 — "save space"),
   hairline dividers, done rows settle back. Single column under 768px. */
.evt-theme .evt-growth-grid { display: grid; grid-template-columns: 1fr; column-gap: 2.5rem; }
@media (min-width: 768px) {
    .evt-theme .evt-growth-grid { grid-template-columns: 1fr 1fr; }
    .evt-theme .evt-growth-grid .evt-growth-row:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; }
}
.evt-theme .evt-growth-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .55rem 0; border-bottom: 1px solid #f0f2f7;
}
.evt-theme .evt-growth-row:last-child { border-bottom: 0; }
.evt-theme .evt-growth-row .evt-growth-label { font-weight: 600; }
.evt-theme .evt-growth-row.done { opacity: .68; }
.evt-theme .evt-growth-row.done:hover { opacity: 1; }
.evt-theme .evt-growth-row .btn { white-space: nowrap; }
.evt-theme .evt-setup-statline strong { font-variant-numeric: tabular-nums; }

/* The dashboard's "More" drawer (Pushpak, 2026-11-10): one visible Publish action, the rest in here.
   Eased entrance — house rule: never abrupt. The trigger is SOLID NetU red (Pushpak, same day — the
   outline version disappeared next to Publish); motion per the button rules: lift + glow, press. */
.evt-theme .evt-more-btn {
    background: var(--netu-red); border: 0; color: #fff; font-weight: 600;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.evt-theme .evt-more-btn:hover, .evt-theme .evt-more-btn:focus, .evt-theme .evt-more-btn.show {
    background: var(--netu-red); color: #fff;
    filter: brightness(1.07); transform: translateY(-1px);
    box-shadow: 0 8px 16px -6px color-mix(in srgb, var(--netu-red) 45%, transparent);
}
.evt-theme .evt-more-btn:active { background: var(--netu-red); color: #fff; filter: none; transform: translateY(1px); box-shadow: none; }
.evt-theme .evt-more-menu { min-width: 240px; border-radius: 12px; padding: .4rem; }
.evt-theme .evt-more-menu .dropdown-item { border-radius: 8px; padding: .5rem .75rem; }
.evt-theme .evt-more-menu.show { animation: evtMenuIn .18s ease; }
@keyframes evtMenuIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .evt-theme .evt-more-menu.show { animation: none; } }

/* The action row is down to Publish + the More drawer, so it needs no mobile scroll strip — and MUST NOT
   get one: an overflow-x container would clip the open dropdown behind the page content. */
.evt-theme .evt-manage-actions { flex-wrap: wrap; }
/* Mobile steps keep text · action on ONE row (Pushpak, 2026-11-10) — just denser. */
@media (max-width: 767.98px) {
    .evt-theme .evt-setup-step { gap: .75rem; padding: .85rem .9rem; }
    .evt-theme .evt-setup-step > a { white-space: nowrap; }
}

/* Per-schedule sub-section label (Agenda · Speakers · Get your pass) on the overview (Pushpak, 2026-07-20). */
.evt-theme .evt-sublabel {
    display: flex; align-items: center; gap: .4rem;
    font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--evt-muted); margin-bottom: .6rem;
}

/* Read-more clamp for long agenda descriptions on the overview (Pushpak, 2026-07-19). */
.evt-clamp-2 {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    overflow: hidden;
}

/* 3-line read-more clamp (group Categories cards, /me/groups summaries — Pushpak, 2026-08-02).
   .netu-clamp-anim carries the smooth max-height transition; netuReadMoreClamp (app.js) swaps the clamp in/out. */
.netu-clamp-3 {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
    overflow: hidden;
}
.netu-clamp-anim { overflow: hidden; transition: max-height .25s ease; }
/* ~300 words of About text (Pushpak, 2026-10-26) — same mechanism, taller window. */
.netu-clamp-18 {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 18; line-clamp: 18;
    overflow: hidden;
}

/* ⛔ Inline BUY modal on the overview — the ticket checkout as a lightweight Alpine overlay
     (mirrors the platform-plan checkout, Pushpak 2026-07-19). Scoped outside .evt-theme so it
     floats above the whole page. */
.netu-buy-overlay {
    position: fixed; inset: 0; z-index: 1080; display: flex; align-items: center; justify-content: center;
    padding: 1rem; background: rgba(17,24,39,.55); backdrop-filter: blur(2px); overflow-y: auto;
}
.netu-buy-dialog {
    background: #fff; border-radius: 20px; width: 100%; max-width: 460px; padding: 1.5rem;
    box-shadow: 0 30px 80px rgba(17,24,39,.35); max-height: calc(100vh - 2rem); overflow-y: auto;
}
/* The ticket PICKER modal (hero #buy) lists whole schedules — it needs more room than the single-ticket
   checkout dialog. */
.netu-buy-dialog--wide { max-width: 640px; }

/* ⛔ Warning modal on a native <dialog> (first use: the campaigns "connect a mailbox first" gate,
   Pushpak 2026-08-26). Auto-opened via showModal(); smooth entrance (house rule: never abrupt). */
.netu-warn-modal {
    border: none; border-radius: 20px; padding: 2rem 2.25rem; max-width: 480px; width: calc(100% - 2rem);
    text-align: center; box-shadow: 0 30px 80px rgba(17,24,39,.35);
}
.netu-warn-modal::backdrop { background: rgba(17,24,39,.55); backdrop-filter: blur(2px); }
.netu-warn-modal[open] { animation: netu-warn-modal-in .22s ease; }
@keyframes netu-warn-modal-in {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
.netu-warn-modal-icon {
    width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #fff7e6; color: #b45309; font-size: 26px;
}
/* Upgrade prompts are an invitation, not a hazard — brand tint instead of amber. */
.netu-warn-modal-icon.is-upgrade { background: var(--netu-blue-tint); color: var(--netu-blue); }

/* Template editor: Builder ↔ HTML mode toggle (V198) + the raw-HTML code panel. */
.netu-mode-toggle {
    display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px;
    background: var(--netu-surface-blue, #eef3f8); border: 1px solid var(--netu-line);
    align-self: flex-start;
}
.netu-mode-toggle button {
    border: none; background: transparent; border-radius: 9px; padding: .45rem 1rem;
    font-size: .875rem; font-weight: 600; color: var(--netu-slate, #55606b); cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.netu-mode-toggle button.is-on {
    background: #fff; color: var(--netu-blue); box-shadow: 0 1px 4px rgba(12,27,42,.12);
}
.netu-html-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .82rem; line-height: 1.55; white-space: pre; overflow-x: auto;
    resize: vertical; min-height: 340px; width: 100%;
}
.netu-warn-modal h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: .5rem; }
.netu-warn-modal p { color: #555; font-size: .95rem; line-height: 1.6; margin-bottom: .5rem; }
.netu-warn-modal .netu-warn-modal-sub { color: #888; font-size: .85rem; margin-bottom: 1.25rem; }

/* Datetime-local quick helpers (Today / Clear / Done) */
.netu-dt-quick { display: flex; gap: .25rem; margin-top: .25rem; flex-wrap: wrap; }
.netu-dt-btn {
    border: 1px solid var(--netu-line); background: #fff; color: var(--netu-slate);
    border-radius: 999px; padding: .1rem .6rem; font-size: .75rem; font-weight: 600; cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.netu-dt-btn:hover { background: var(--netu-surface); color: var(--netu-blue); border-color: var(--netu-blue); }

/* Manage sidebar collapses to the topbar hamburger on mobile (Pushpak, 2026-07-19). Shown by default at lg+. */
@media (max-width: 991.98px) {
    .manage-sidebar { display: none; }
    .manage-sidebar.manage-sidebar-open { display: block; }
}

/* -------------------------------------------------------------------------
   Public "Groups" cards — shown on /users/{handle} (profile) and
   /companies/{slug}/groups (booth tab), via fragments/public-groups.
   (Pushpak, 2026-07-29 — enhanced community cards)
   ------------------------------------------------------------------------- */
.pubg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
}
.pubg-card {
    display: flex; flex-direction: column;
    border: 1px solid var(--netu-line, #e5e7eb); border-radius: 14px; overflow: hidden;
    background: #fff; text-decoration: none; color: inherit;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pubg-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .10);
    border-color: var(--netu-blue, #2563eb);
}
.pubg-banner {
    position: relative; height: 62px;
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 55%, #bae6fd 100%);
    background-size: cover; background-position: center;
}
.pubg-badge {
    position: absolute; top: 8px; right: 8px;
    font-size: 11px; font-weight: 600; letter-spacing: .01em;
    background: rgba(255, 255, 255, .92); color: var(--netu-blue, #2563eb);
    padding: 2px 9px; border-radius: 999px; box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.pubg-body { display: flex; gap: 12px; padding: 0 14px 14px; }
.pubg-logo {
    width: 52px; height: 52px; margin-top: -24px; flex-shrink: 0;
    border-radius: 13px; border: 3px solid #fff; background: #f1f5f9;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .12);
}
.pubg-logo img { width: 100%; height: 100%; object-fit: cover; }
.pubg-logo i { font-size: 22px; color: #94a3b8; }
.pubg-info { min-width: 0; padding-top: 8px; display: flex; flex-direction: column; }
.pubg-name {
    font-size: 14.5px; font-weight: 600; line-height: 1.25; color: #0f172a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pubg-card:hover .pubg-name { color: var(--netu-blue, #2563eb); }
.pubg-meta {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; color: var(--netu-slate, #64748b); margin-top: 3px;
}
.pubg-tagline {
    font-size: 12.5px; line-height: 1.4; color: var(--netu-slate, #64748b); margin-top: 5px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ============ AI Match & ICP — pill tabs (Pushpak's reference design, 2026-08-03) ============
   A full-width rounded strip on the Sebastian tint; the ACTIVE tab is a large pill carrying the
   Sebastian gradient. Smooth transitions on switch (house rule: never abrupt). */
.aim-tabs {
    display: flex; width: 100%; border-radius: 999px; overflow: hidden;
    background: var(--netu-seb-tint, #f6f5fc);
    border: 1px solid color-mix(in srgb, var(--netu-seb-1) 12%, #fff);
}
.aim-tab {
    flex: 1 1 0; border: 0; background: transparent; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 18px; font-weight: 600; font-size: 15px; border-radius: 999px;
    color: var(--netu-ink, #1f2937);
    transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.aim-tab i { font-size: 1rem; }
.aim-tab:hover:not(.active) { background: color-mix(in srgb, var(--netu-seb-1) 8%, #fff); }
.aim-tab.active {
    background: linear-gradient(135deg, var(--netu-seb-1), #D4537E);
    color: #fff;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--netu-seb-1) 35%, transparent);
}

/* Tab panes fade + lift in. */
.aim-pane-enter { transition: opacity .25s ease, transform .25s ease; }
.aim-pane-enter-start { opacity: 0; transform: translateY(6px); }
.aim-pane-enter-end { opacity: 1; transform: none; }

/* ?tab=icp deep link (2026-09-21): every "Set your ICP" CTA lands on the summary card —
   a soft Sebastian-tint pulse shows WHICH card the visit is about, then fades out. */
@keyframes aim-icp-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--netu-seb-1) 45%, transparent); }
    70% { box-shadow: 0 0 0 12px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.aim-icp-flash .ob-drafted-card { animation: aim-icp-pulse 1.6s ease-out 2; border-radius: 12px; }

/* The onboarding form fragments render inside the app shell here — neutralize the full-page chrome. */
.aim-embedded { padding: 0; min-height: auto; background: transparent; }
.aim-embedded .ob-form { max-width: 720px; }

/* =====================================================================
   /for/* AUDIENCE LANDING PAGES  (ForController — the "Who it's for" funnel)
   Four pages: /for/business, /for/organizers, /for/organizers/trade-shows,
   /for/organizers/chambers. Content is Pushpak's verbatim copy; the shell
   supplies our topbar + footer. Namespaced under .for-page.
   ===================================================================== */
.for-page { background: #fff; color: var(--netu-ink); }
.for-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px 40px; }
.for-page .accent { color: var(--netu-blue); }
.for-page .text-red { color: var(--netu-red); }
.for-check { color: var(--netu-blue); font-weight: 700; }

/* --- Tab bar (organizer-family pages) --- */
.for-tabs {
    background: #fff;
    border-bottom: 1px solid var(--netu-line);
}
.for-tabs-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    gap: 28px;
}
.for-tab {
    padding: 15px 2px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--netu-slate);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color .18s ease, border-color .18s ease;
}
.for-tab:hover { color: var(--netu-blue); }
.for-tab.is-active { color: var(--netu-blue); border-bottom-color: var(--netu-blue); }

/* --- Common section rhythm --- */
.for-sec { padding: 40px 0; }
.for-sec.center, .for-hero.center, .center { }
.for-kicker {
    color: var(--netu-blue);
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.for-eyebrow {
    color: var(--netu-blue);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.for-eyebrow.light { color: #cde0f2; }
.for-eyebrow.center, .for-sec-head.center, .for-sec-sub.center { text-align: center; }
.for-eyebrow.seb, .for-eyebrow.light.center { }
.for-h1 {
    font-size: clamp(2rem, 4.4vw, 3rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.02em;
    margin: 0 0 22px;
}
.for-lede {
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--netu-slate);
    max-width: 760px;
    margin: 0 0 22px;
}
.for-sec-head {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 8px;
}
.for-sec-head.light { color: #fff; }
.for-sec-sub { color: var(--netu-slate); font-size: 1.02rem; line-height: 1.6; margin: 0 0 24px; max-width: 760px; }
.for-sec-head.center, .for-sec-sub.center { margin-left: auto; margin-right: auto; }
.for-sec-sub.light { color: #cde0f2; }

/* --- Hero --- */
.for-hero { padding: 48px 0 8px; position: relative; }
.for-hero.center { text-align: center; }
.for-hero.center .for-lede, .for-close .for-close-sub { margin-left: auto; margin-right: auto; }
.for-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid var(--netu-blue);
    border-radius: 8px;
    padding: 10px 20px;
    text-decoration: none;
    margin-bottom: 34px;
}
.for-badge.right { float: right; }
.for-badge-t { color: var(--netu-blue); font-weight: 800; font-size: .72rem; letter-spacing: .05em; }
.for-badge-s { color: var(--netu-blue); font-size: .72rem; }

/* --- Split hero (organizers) --- */
.for-hero-split {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 40px;
    align-items: center;
    padding: 48px 0 16px;
}
.for-hero-copy .for-h1 { margin-bottom: 18px; }
.for-chart-card {
    border: 1px solid var(--netu-line);
    border-radius: 14px;
    padding: 20px;
    box-shadow: var(--netu-card-shadow);
    background: #fff;
}
.for-chart-title { font-weight: 700; font-size: 1rem; }
.for-chart-sub { color: var(--netu-slate); font-size: .85rem; margin-bottom: 12px; }
.for-chart { width: 100%; height: auto; }
.for-chart-legend { display: flex; gap: 18px; margin-top: 10px; font-size: .8rem; color: var(--netu-slate); }
.for-leg { display: inline-flex; align-items: center; }
.for-leg::before { content: ""; width: 16px; height: 2px; margin-right: 6px; display: inline-block; }
.for-leg-today::before { background: #94A3B8; }
.for-leg-netu::before { background: var(--netu-blue); }

/* --- Buttons --- */
.for-btn {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 8px;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.for-btn:hover { transform: translateY(-2px); }
.for-btn-blue { background: var(--netu-blue); color: #fff; }
.for-btn-blue:hover { background: var(--netu-blue-dark); color: #fff; }
.for-btn-red { background: var(--netu-red); color: #fff; }
.for-btn-red:hover { background: #b01a13; color: #fff; }
.for-btn-outline { border-color: var(--netu-line); color: var(--netu-ink); background: #fff; }
.for-btn-outline:hover { border-color: var(--netu-blue); color: var(--netu-blue); }
.for-btn-ghost { border-color: rgba(255,255,255,.4); color: #fff; background: transparent; }
.for-btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
.for-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.for-cta-btns.center { justify-content: center; }

/* --- Pills / strip --- */
.for-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--netu-surface-blue);
    border: 1px solid var(--netu-line);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: .9rem;
    color: var(--netu-ink);
    margin: 16px 0 0;
}
.for-pill-inline { margin-bottom: 22px; }
.for-strip {
    background: var(--netu-ink);
    color: #dbe7f3;
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    justify-content: center;
    padding: 16px 24px;
    margin: 20px 0;
    font-size: .92rem;
    font-weight: 600;
}
.for-strip .for-check { color: #7fb8e6; }

/* --- Sebastian callout (blue box) --- */
.for-seb {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 28px;
    background: var(--netu-blue);
    color: #fff;
    border-radius: 14px;
    padding: 34px 36px;
    margin: 24px 0;
}
.for-seb-title { font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
.for-seb-body { font-size: 1rem; line-height: 1.65; color: #eaf3fb; }
.for-seb strong, .for-seb-body strong { color: #fff; }

/* --- Card grids --- */
.for-cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.for-cols2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 24px 0; }
.for-cols2-tight { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.for-card {
    border: 1px solid var(--netu-line);
    border-radius: 14px;
    padding: 24px;
    background: #fff;
    box-shadow: var(--netu-card-shadow);
}
.for-card.center { text-align: center; }
.for-card.row { display: flex; gap: 14px; align-items: flex-start; }
.for-card h3 { font-size: 1.12rem; font-weight: 700; margin: 0 0 14px; }
.for-card h3.blue { color: var(--netu-blue); }
.for-card.center h3 { margin-top: 10px; }
.for-card p { color: var(--netu-slate); line-height: 1.6; margin: 0; }
.for-card-tag { color: var(--netu-faint); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.for-card-role { color: var(--netu-blue); font-size: 1.3rem; font-weight: 800; margin: 2px 0 14px; }

/* Feature bullet lists */
.for-flist { list-style: none; padding: 0; margin: 0; }
.for-flist li {
    position: relative;
    padding-left: 18px;
    color: var(--netu-slate);
    line-height: 1.55;
    margin-bottom: 14px;
    font-size: .95rem;
}
.for-flist li:last-child { margin-bottom: 0; }
.for-flist li::before {
    content: "";
    position: absolute;
    left: 0; top: 8px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--netu-red);
}
.for-flist strong { color: var(--netu-ink); }
.for-code {
    background: var(--netu-surface-blue);
    border: 1px solid var(--netu-line);
    border-radius: 5px;
    padding: 1px 6px;
    font-size: .85em;
    color: var(--netu-blue);
    white-space: nowrap;
}

/* Card icons */
.for-ic {
    width: 44px; height: 44px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 6px;
    flex: 0 0 auto;
}
.for-card.center .for-ic { margin-left: auto; margin-right: auto; }
.for-ic.ic-blue { background: #E6F0F9; color: var(--netu-blue); }
.for-ic.ic-amber { background: var(--netu-amber-tint); color: var(--netu-warning); }
.for-ic.ic-red { background: #FBE9E8; color: var(--netu-red); }

/* --- Note boxes (tinted) --- */
.for-note {
    border-radius: 14px;
    padding: 26px 28px;
}
.for-note-red { background: var(--netu-red-tint); }
.for-note-blue { background: var(--netu-surface-blue); }
.for-note h3 { font-size: 1.12rem; font-weight: 700; margin: 0 0 12px; }
.for-note-red h3 { color: var(--netu-red); }
.for-note-blue h3 { color: var(--netu-blue); }
.for-note p { color: var(--netu-slate); line-height: 1.65; margin: 0; }
.for-note p + p { margin-top: 12px; }
.for-note-foot { color: var(--netu-seb-1) !important; font-weight: 600; font-size: .88rem; }
.for-note-ic {
    width: 38px; height: 38px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.05rem; margin-bottom: 12px;
}
.for-note-ic.seb { background: var(--netu-seb-1); color: #fff; }
.for-note-ic.blue { background: var(--netu-blue); color: #fff; }

/* --- Any organizer --- */
.for-any {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 32px;
    background: var(--netu-surface);
    border: 1px solid var(--netu-line);
    border-radius: 14px;
    padding: 34px 36px;
    margin: 24px 0;
}
.for-any-head { color: var(--netu-blue); font-size: 2.1rem; font-weight: 800; line-height: 1.1; margin: 0; }
.for-any-lede { color: var(--netu-slate); line-height: 1.6; margin: 0 0 18px; }
.for-any-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.for-any-item { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--netu-ink); }
.for-any-item i { color: var(--netu-red); font-size: 1.05rem; }
.for-any-foot { color: var(--netu-slate); margin: 18px 0 0; font-size: .95rem; }

/* --- Sebastian gradient section --- */
.for-seb-grad {
    background: linear-gradient(120deg, var(--netu-seb-1) 0%, var(--netu-seb-2) 100%);
    border-radius: 16px;
    padding: 40px 40px 34px;
    margin: 24px 0;
    color: #fff;
}
.for-seb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 8px 0 20px; }
.for-seb-tile { background: #fff; border-radius: 12px; padding: 20px; }
.for-seb-tile-ic { color: var(--netu-seb-1); font-size: 1.2rem; margin-bottom: 8px; }
.for-seb-tile h4 { font-size: 1rem; font-weight: 700; margin: 0 0 6px; color: var(--netu-ink); }
.for-seb-tile p { color: var(--netu-slate); font-size: .9rem; line-height: 1.5; margin: 0; }
.for-seb-foot { text-align: center; color: #ece7f6; font-size: .95rem; margin: 0; }

/* --- Monetize grid --- */
.for-money-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.for-money {
    display: flex; align-items: center; gap: 12px;
    background: var(--netu-amber-tint);
    border: 1px solid color-mix(in srgb, var(--netu-warning) 22%, #fff);
    border-radius: 12px;
    padding: 16px 18px;
}
.for-money-ic {
    width: 34px; height: 34px; border-radius: 8px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: var(--netu-warning); font-size: 1rem;
}
.for-money strong { display: block; font-size: .95rem; color: var(--netu-ink); }
.for-money span { font-size: .82rem; color: var(--netu-slate); }

/* --- Steps (dark) --- */
.for-steps {
    background: var(--netu-ink);
    border-radius: 16px;
    padding: 44px 40px;
    margin: 24px 0;
}
.for-steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 22px; }
.for-step { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 22px; }
.for-step-n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--netu-blue); color: #fff; font-weight: 700; font-size: .9rem;
    margin-bottom: 12px;
}
.for-step h4 { color: #fff; font-size: 1.02rem; font-weight: 700; margin: 0 0 8px; }
.for-step p { color: #b8c7d6; font-size: .9rem; line-height: 1.5; margin: 0; }

/* --- Quote bar --- */
.for-quote {
    background: var(--netu-ink);
    color: #fff;
    border-radius: 12px;
    text-align: center;
    padding: 20px;
    font-weight: 600;
    font-size: 1.05rem;
    margin-top: 24px;
}

/* --- Plan A / Plan B (dark) --- */
.for-plan {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 32px;
    background: var(--netu-ink);
    border-radius: 16px;
    padding: 36px 40px;
    margin: 24px 0;
    color: #fff;
}
.for-plan-title { font-size: 1.7rem; font-weight: 800; line-height: 1.2; }
.for-plan-title .accent { color: #4da3e0; }
.for-plan-body { color: #cdd9e5; line-height: 1.7; }
.for-plan-body strong { color: #fff; }

/* --- Founder --- */
.for-founder { padding: 32px 0; border-top: 1px solid var(--netu-line); border-bottom: 1px solid var(--netu-line); margin: 20px 0; }
.for-founder.card {
    border: 1px solid var(--netu-line);
    border-radius: 14px;
    padding: 28px 32px;
    box-shadow: var(--netu-card-shadow);
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 28px;
    align-items: center;
}
.for-founder-badge {
    display: inline-block;
    border: 1px solid var(--netu-line);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: .82rem;
    color: var(--netu-slate);
    margin-bottom: 14px;
}
.for-founder-badge .star { color: var(--netu-red); }
.for-founder-copy { color: var(--netu-slate); line-height: 1.7; max-width: 620px; margin: 0; }
.for-founder-copy strong { color: var(--netu-ink); }
.for-stats { display: flex; gap: 40px; margin-top: 20px; flex-wrap: wrap; }
.for-founder.card .for-stats { margin-top: 0; }
.for-stat { display: flex; flex-direction: column; }
.for-stat-n { color: var(--netu-blue); font-size: 2rem; font-weight: 800; line-height: 1; }
.for-stat-l { color: var(--netu-slate); font-size: .82rem; margin-top: 6px; max-width: 160px; }

/* --- Comparison table --- */
.for-legend { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 14px; font-size: .85rem; color: var(--netu-slate); }
.for-legend-i { display: inline-flex; align-items: center; gap: 7px; }
.for-page .dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.for-page .dot.full { background: var(--netu-blue); }
.for-page .dot.limited { background: var(--netu-warning); }
.for-page .dot.none { background: transparent; border: 1.5px solid #cbd5e1; }
.for-table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--netu-line); }
.for-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.for-table th, .for-table td { text-align: left; padding: 14px 20px; border-bottom: 1px solid var(--netu-line); }
.for-table thead th { background: var(--netu-ink); color: #fff; font-size: .9rem; }
.for-table th.netu, .for-table td.netu { text-align: center; background: var(--netu-surface-blue); width: 130px; }
.for-table th.other, .for-table td:last-child { text-align: center; width: 200px; }
.for-table thead th.netu { color: #fff; background: #14324a; }
.for-table tbody tr:last-child td { border-bottom: 0; }
.for-table tbody tr:nth-child(even) td { background: #fbfdff; }
.for-table tbody tr:nth-child(even) td.netu { background: #e7f1fa; }
.for-table td strong { color: var(--netu-ink); }
.for-foot-note { color: var(--netu-faint); font-size: .8rem; line-height: 1.5; margin: 14px 0 0; }

/* --- Closing --- */
.for-close { padding: 44px 0; }
.for-close.center { text-align: center; }
.for-close-head { font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: 800; line-height: 1.2; margin: 0 0 14px; }
.for-close-sub { color: var(--netu-slate); line-height: 1.65; max-width: 680px; margin: 0 auto 24px; }

/* --- CTA boxes --- */
.for-cta {
    background: var(--netu-ink);
    border-radius: 16px;
    padding: 34px 40px;
    margin: 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.for-cta-text h2 { color: #fff; font-size: 1.5rem; font-weight: 800; margin: 0 0 6px; }
.for-cta-text p { color: #b8c7d6; margin: 0; font-size: .95rem; }
.for-cta-btn { background: var(--netu-red); color: #fff; padding: 14px 28px; border-radius: 8px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .15s ease, transform .15s ease; }
.for-cta-btn:hover { background: #b01a13; color: #fff; transform: translateY(-2px); }
.for-cta-dark {
    background: var(--netu-ink);
    border-radius: 16px;
    padding: 44px 40px;
    margin: 24px 0;
    text-align: center;
}
.for-cta-dark.left { text-align: left; }
.for-cta-dark h2 { color: #fff; font-size: 1.7rem; font-weight: 800; margin: 0 0 8px; }
.for-cta-dark p { color: #b8c7d6; margin: 0 auto 22px; max-width: 720px; }
.for-cta-dark.left p { margin-left: 0; }
.for-cta-dark .for-cta-btns { justify-content: center; }
.for-cta-dark.left .for-cta-btns { justify-content: flex-start; }

/* --- Closing tagline --- */
.for-tagline { text-align: center; color: var(--netu-slate); font-size: .9rem; padding: 20px 0 0; }
.for-tagline a { color: var(--netu-blue); font-weight: 600; text-decoration: none; }

/* --- Responsive --- */
@media (max-width: 900px) {
    .for-hero-split { grid-template-columns: 1fr; }
    .for-cols3, .for-money-grid, .for-seb-grid, .for-steps-grid { grid-template-columns: 1fr 1fr; }
    .for-any, .for-seb, .for-plan { grid-template-columns: 1fr; gap: 20px; }
    .for-founder.card { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .for-cols3, .for-cols2, .for-cols2-tight, .for-money-grid, .for-seb-grid, .for-steps-grid, .for-any-grid { grid-template-columns: 1fr; }
    .for-badge.right { float: none; }
    .for-cta { flex-direction: column; align-items: flex-start; }
    .for-tabs-inner { gap: 18px; overflow-x: auto; }
}

/* ============================================================================
   TRACK W — org-admin console + community onboarding (2026-09-28).
   The settled language: Sebastian gradient accents (135deg seb-1→seb-2 — never
   blue on CTAs), life from MOTION (hover lift + glow, press), DEPTH on
   surfaces only. One .netu-cta-3d per view; .netu-btn-grad for form submits.
   ============================================================================ */

/* Page hero band — a warm gradient-tinted header that gives every console page
   one place for the eye to land. */
.ow-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    border-radius: 18px;
    padding: 24px 28px;
    margin-bottom: 26px;
    background: linear-gradient(135deg,
        var(--netu-seb-tint) 0%,
        color-mix(in srgb, var(--netu-seb-1) 13%, #fff) 55%,
        color-mix(in srgb, var(--netu-seb-2) 18%, #fff) 100%);
    border: 1px solid color-mix(in srgb, var(--netu-seb-1) 20%, #fff);
    box-shadow: 0 12px 26px -18px color-mix(in srgb, var(--netu-seb-2) 50%, transparent);
}
.ow-hero h1 { font-weight: 800; letter-spacing: -.02em; color: var(--netu-ink); margin-bottom: 2px; }
.ow-hero .ow-sub { color: var(--netu-slate); margin: 0; }
.ow-hero .ow-hero-actions { margin-left: auto; }

/* Gradient icon chip — marks a section with the brand instead of a grey glyph. */
.ow-icon-chip {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--netu-seb-1), var(--netu-seb-2));
    color: #fff;
    font-size: 20px;
    box-shadow: 0 8px 18px -9px color-mix(in srgb, var(--netu-seb-2) 60%, transparent);
}

/* Console section card — a SURFACE with depth that lifts on hover; the whole
   card is the click target (no per-card primary buttons — one primary per view). */
.ow-card {
    display: block;
    height: 100%;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid var(--netu-line);
    background: linear-gradient(180deg, #fff 0%, var(--netu-surface) 100%);
    box-shadow: inset 0 1px 0 #fff, 0 6px 16px -10px rgba(12, 27, 42, .25);
    color: inherit;
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.ow-card:hover {
    color: inherit;
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--netu-seb-1) 40%, var(--netu-line));
    box-shadow: inset 0 1px 0 #fff, 0 16px 30px -14px color-mix(in srgb, var(--netu-seb-2) 40%, transparent);
}
.ow-card:active { transform: translateY(0); }
.ow-card .ow-card-title { font-weight: 700; color: var(--netu-ink); }
.ow-card .ow-go {
    color: var(--netu-seb-1);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ow-card .ow-go .bi { transition: transform .16s ease; }
.ow-card:hover .ow-go .bi { transform: translateX(4px); }

/* Template picker card — same surface, plus a gradient top bar so the four
   choices read as "pick me", not paperwork. */
.ow-tpl-card {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    text-align: left;
    border-radius: 16px;
    padding: 18px 18px 16px;
    border: 1px solid var(--netu-line);
    background: linear-gradient(180deg, #fff 0%, var(--netu-surface) 100%);
    box-shadow: inset 0 1px 0 #fff, 0 6px 16px -10px rgba(12, 27, 42, .25);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.ow-tpl-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(135deg, var(--netu-seb-1), var(--netu-seb-2));
}
.ow-tpl-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--netu-seb-1) 45%, var(--netu-line));
    box-shadow: inset 0 1px 0 #fff, 0 16px 30px -14px color-mix(in srgb, var(--netu-seb-2) 45%, transparent);
}
.ow-tpl-card:active { transform: translateY(0); }
.ow-tpl-card .ow-tpl-count {
    display: inline-block;
    font-size: .78rem;
    font-weight: 600;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--netu-seb-tint), color-mix(in srgb, var(--netu-seb-2) 10%, #fff));
    color: var(--netu-seb-1);
    border: 1px solid color-mix(in srgb, var(--netu-seb-1) 22%, #fff);
}

/* Step headers — a numbered gradient badge turns "a list of cards" into a path. */
.ow-step-head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ow-step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .9rem;
    color: #fff;
    background: linear-gradient(135deg, var(--netu-seb-1), var(--netu-seb-2));
    box-shadow: 0 6px 14px -7px color-mix(in srgb, var(--netu-seb-2) 60%, transparent);
}
.ow-step-title { font-weight: 700; color: var(--netu-ink); margin: 0; }

/* Selectable chips (member categories) — checked = the brand gradient. */
.ow-chip {
    border: 1px solid var(--netu-line);
    border-radius: 999px;
    padding: .35rem .9rem;
    font-weight: 500;
    color: var(--netu-slate);
    background: #fff;
    cursor: pointer;
    user-select: none;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease,
                background .16s ease, color .16s ease;
}
.ow-chip:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--netu-seb-1) 40%, var(--netu-line));
    color: var(--netu-seb-1);
}
.btn-check:checked + .ow-chip {
    background: linear-gradient(135deg, var(--netu-seb-1), var(--netu-seb-2));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 14px -7px color-mix(in srgb, var(--netu-seb-2) 55%, transparent);
}
.btn-check:focus-visible + .ow-chip {
    outline: 3px solid color-mix(in srgb, var(--netu-seb-1) 35%, #fff);
    outline-offset: 2px;
}

/* Warm empty state — an invitation, not a shrug. */
.ow-empty {
    text-align: center;
    padding: 34px 24px;
    border-radius: 16px;
    border: 1px dashed color-mix(in srgb, var(--netu-seb-1) 35%, var(--netu-line));
    background: var(--netu-seb-tint);
    color: var(--netu-slate);
}
.ow-empty .bi { font-size: 30px; color: var(--netu-seb-1); display: block; margin-bottom: 8px; }

/* TRACK W — the member onboarding renders netu.ai's own ob-grid-chip as a btn-check LABEL (the community
   questionnaire posts server-side; no Alpine selection state). Checked = the exact .ob-grid-chip.active look. */
.btn-check:checked + .ob-grid-chip {
    background: var(--netu-surface-blue);
    border: 2px solid var(--netu-blue);
    color: var(--netu-blue);
    font-weight: 500;
}
.btn-check:focus-visible + .ob-grid-chip {
    outline: 3px solid color-mix(in srgb, var(--netu-blue) 35%, #fff);
    outline-offset: 2px;
}

/* TRACK W — the category chip-select dropdown, grouped (the org's #-prefixed lines): bold accented group
   bands, indented options with CHECKBOXES — selected items stay listed and checked, so multi-select is obvious. */
.ob-chip-group {
    display: flex;
    align-items: center;
    padding: 9px 12px 7px;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--netu-ink);
    background: linear-gradient(90deg, var(--netu-seb-tint), transparent 85%);
    border-left: 3px solid var(--netu-seb-1);
}
.ob-chip-option.grouped {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 26px;
}
.ob-chip-check {
    width: 18px;
    height: 18px;
    flex: none;
    border: 2px solid var(--netu-line);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    transition: background .15s ease, border-color .15s ease;
}
.ob-chip-option.selected { color: var(--netu-blue); font-weight: 500; }
.ob-chip-option.selected .ob-chip-check {
    background: var(--netu-blue);
    border-color: var(--netu-blue);
}

/* The location input (onboarding + community MAP questions): .ob-location-input had no styles anywhere, so the
   geo icon stacked ABOVE the input. Anchor it INSIDE, left, with the input padded past it. Specificity beats
   the .ob-field input rules without !important. */
.ob-location-input {
    position: relative;
}
.ob-location-input > .bi-geo-alt {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--netu-faint);
    font-size: 16px;
    pointer-events: none;
    z-index: 2;
}
.ob-field .ob-location-input input[type="text"],
.ob-location-input input[type="text"] {
    padding-left: 38px;
}

/* Google Places suggestion dropdown — match the platform's dropdown language instead of Google's default. */
.pac-container {
    border: 1px solid var(--netu-line);
    border-radius: 10px;
    margin-top: 4px;
    box-shadow: 0 14px 28px -14px rgba(12, 27, 42, .3);
    font-family: inherit;
}
.pac-item {
    padding: 7px 12px;
    cursor: pointer;
    border-top: none;
}
.pac-item:hover, .pac-item-selected {
    background: var(--netu-surface);
}

/* Enterprise-community group card (Pushpak, 2026-10-02): a group that powers a white-label community wears the
   Sebastian gradient BOUNDARY on list cards — visibly a different class of group. Flat gradient, never blue;
   dual background-clip keeps the card face clean inside the gradient ring. */
.netu-enterprise-card {
    border: 2px solid transparent !important;
    background-image: linear-gradient(var(--netu-seb-tint), #fff),
                      linear-gradient(135deg, var(--netu-seb-1), var(--netu-seb-2));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--netu-seb-2) 45%, transparent);
    transition: transform .18s ease, box-shadow .18s ease;
}
.netu-enterprise-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--netu-seb-2) 55%, transparent);
}
.netu-enterprise-card .card-footer { background: transparent !important; }
.netu-enterprise-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .72rem; font-weight: 600; letter-spacing: .02em;
    color: #fff; padding: .18rem .6rem; border-radius: 999px;
    background: linear-gradient(135deg, var(--netu-seb-1), var(--netu-seb-2));
}


/* ============================================================================================
   Sebastian gradient INPUT borders (Pushpak, 2026-10-02): every standard text-entry control —
   text, email, tel, number, password, selects, textareas — wears the brand gradient as its
   border. Dual background-clip (a plain border-image ignores border-radius); the fill rides
   --netu-input-fill so disabled/readonly grey still shows through. Checks, radios, switches
   and buttons keep Bootstrap's own chrome.
   ============================================================================================ */
.form-control, .form-select,
.ob-field input[type="text"], .ob-field input[type="email"], .ob-field input[type="url"],
.ob-field input[type="tel"], .ob-field input[type="number"], .ob-field select, .ob-field textarea,
.netu-auth-form input[type="text"], .netu-auth-form input[type="email"], .netu-auth-form input[type="tel"],
.netu-auth-form input[type="password"], .netu-auth-form input[type="url"] {
    --netu-input-fill: #fff;
    border: 1px solid transparent;
    background-image: linear-gradient(var(--netu-input-fill), var(--netu-input-fill)),
                      linear-gradient(135deg, var(--netu-seb-1), var(--netu-seb-2));
    background-origin: border-box;
    background-clip: padding-box, border-box;
}
/* .form-select's caret is itself a background layer — restate the stack with per-layer geometry
   so the arrow keeps its size/position and the gradient still rings the border. */
.form-select {
    background-image: var(--bs-form-select-bg-img),
                      linear-gradient(var(--netu-input-fill), var(--netu-input-fill)),
                      linear-gradient(135deg, var(--netu-seb-1), var(--netu-seb-2));
    background-position: right .75rem center, 0 0, 0 0;
    background-size: 16px 12px, auto, auto;
    background-repeat: no-repeat;
    background-origin: padding-box, border-box, border-box;
    background-clip: padding-box, padding-box, border-box;
}
.form-control:disabled, .form-control[readonly], .form-select:disabled {
    --netu-input-fill: var(--bs-secondary-bg, #e9ecef);
}
.form-control:focus, .form-select:focus,
.ob-field input:focus, .ob-field select:focus, .ob-field textarea:focus,
.netu-auth-form input:focus {
    border-color: transparent;
    outline: none;
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--netu-seb-1) 16%, transparent);
}
/* Validation still reads as red — the error state replaces the brand ring. */
.form-control.is-invalid, .form-select.is-invalid, .was-validated .form-control:invalid {
    background-image: linear-gradient(var(--netu-input-fill), var(--netu-input-fill)),
                      linear-gradient(#dc3545, #dc3545);
}
/* Composite widgets carry the ring on their WRAPPER; their inner inputs stay chromeless
   (these come AFTER the rules above on purpose — same specificity, later wins). */
.ob-tag-input-row, .ob-location-input {
    border: 1px solid transparent;
    background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, var(--netu-seb-1), var(--netu-seb-2));
    background-origin: border-box;
    background-clip: padding-box, border-box;
}
.ob-field .ob-tag-input-row input, .ob-field .ob-location-input input {
    border: 0;
    background-image: none;
    box-shadow: none;
}

/* ===== Media banners (Pushpak, 2026-10-21): GIF/video banners FIT, never crop ===== */
/* GIF: the whole animation shows inside the 4:1 box (letterboxed on the container's own background). */
.netu-banner-contain,
.netu-banner-contain::before {
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

/* ===== Member Passport (Pushpak, 2026-10-24 — org-admin's design) — the REAL AGCX passport artwork, unmodified:
   agcx-pp-1.png is the static cover, agcx-pp-2.png the open VISAS spread. EXACTLY TWO pages — cover, then ONE
   spread carrying everything: writing starts on the LEFT page and flows to the RIGHT only when it doesn't fit
   (CSS columns), typeset like the printed "VISAS" (navy serif, letterspaced). 2× size on desktop (vw-capped on
   phones); the container widens cover → spread (is-open, toggled by netuInitPassport). */
.pp3d { font-family: Georgia, 'Times New Roman', serif; margin: 0 auto; width: fit-content; }
.pp3d-book {
    position: relative; margin: 0 auto;
    width: min(560px, 88vw); aspect-ratio: 1024 / 1536;         /* closed: the cover photo's own ratio */
    perspective: 3000px; perspective-origin: 100% 50%;
    container-type: inline-size;                                 /* cqw scales overlay text with the artwork */
    transition: width .5s ease, aspect-ratio .5s ease;
}
.pp3d-book.is-open { width: min(1240px, 94vw); aspect-ratio: 1465 / 1073; }   /* open: the spread's ratio */
.pp-leaf {
    position: absolute; inset: 0; border-radius: 10px; overflow: hidden;
    transform-origin: left center; transform-style: preserve-3d; backface-visibility: hidden;
    box-shadow: 0 26px 60px -24px rgba(17,34,71,.6);
    /* ⛔ ONLY the current leaf is ever on screen (Pushpak, 2026-10-24: "one image at a time") — the other
       leaf is fully hidden, never peeking from behind. The flip rotation still animates the changeover. */
    opacity: 0; visibility: hidden;
    transition: transform .75s cubic-bezier(.3,.1,.2,1), opacity .45s ease, visibility 0s linear .45s;
}
.pp-leaf.is-current { opacity: 1; visibility: visible; transition-delay: 0s; }
.pp-leaf.is-flipped { transform: rotateY(-178deg); }
.pp-leaf--cover { cursor: pointer; }
.pp-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The Q&A overlay spans BOTH pages as two text columns — a column per page, the gap jumping the spine, so
   content fills the LEFT page first and continues on the RIGHT only when the left is full. */
.pp-overlay {
    position: absolute; left: 7%; right: 7%; top: 19%; bottom: 14%;
    column-count: 2; column-gap: 13%; column-fill: auto;
    text-align: center; overflow: hidden;
}
.pp-q { break-inside: avoid; margin-bottom: 4.2cqw; }
/* "HOLDER: JOHN DOE" — label and name on ONE line, leading the left page. */
.pp-q--holder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-holder-name { font-size: clamp(13px, 2.3cqw, 30px); font-weight: 700; letter-spacing: .08em;
    color: #1d3666; margin-left: .45em; }
/* Typeset like the printed "VISAS": navy serif, wide tracking. */
.pp-label { font-size: clamp(10px, 1.6cqw, 21px); font-weight: 700; letter-spacing: .22em;
    text-transform: uppercase; color: #1d3666; }
.pp-value { font-size: clamp(13px, 2.3cqw, 30px); font-weight: 600; letter-spacing: .04em;
    color: #1d3666; line-height: 1.3; margin-top: 3px; overflow-wrap: anywhere; }
.pp-note { font-size: clamp(11px, 1.6cqw, 20px); color: #4a5a7a; letter-spacing: .04em; margin: 0;
    break-inside: avoid; }

/* Navigation + close (shared chrome, not part of the artwork). */
.pp3d-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 14px; }
.pp3d-btn {
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid #c7a25c;
    background: #fff; color: #112247; font-size: 17px; display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease, transform .15s ease;
}
.pp3d-btn:hover:not(:disabled) { background: #112247; color: #e4c884; transform: translateY(-1px); }
.pp3d-btn:disabled { opacity: .35; cursor: default; }
.pp-close {
    width: 38px; height: 38px; border-radius: 50%; border: 0;
    background: rgba(17,34,71,.92); color: #fff; font-size: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    margin: 0; top: -10px; right: -10px; box-shadow: 0 4px 12px -3px rgba(0,0,0,.5); z-index: 20;
    transition: background .15s ease, transform .15s ease;
}
.pp-close:hover { background: #1d3566; transform: scale(1.06); }
.pp3d-count { font-family: system-ui, sans-serif; font-size: 13px; color: #fff; letter-spacing: .06em; min-width: 54px; text-align: center; }

/* The "no passport" flat card (no book, no artwork). */
.pp3d--flat { width: min(380px, 92vw); }
.pp-flat-card { background: #fff; border-radius: 12px; padding: 36px 28px; text-align: center;
    box-shadow: 0 24px 60px -24px rgba(17,34,71,.55); }
.pp-flat-icon { display: inline-flex; width: 62px; height: 62px; border-radius: 50%; align-items: center;
    justify-content: center; background: #112247; color: #e4c884; font-size: 26px; }
/* Icon-only "View Passport" trigger on member cards — the same navy/gold journal mark as the modal. */
.pp-view-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
    border: 0; border-radius: 50%; background: #112247; color: #e4c884; font-size: 15px; padding: 0;
    transition: background .15s ease, transform .15s ease; }
.pp-view-btn:hover { background: #1d3566; transform: translateY(-1px); }
.pp-flat-title { font-size: 19px; font-weight: 700; color: #112247; margin-top: 12px; }
.pp-flat-sub { font-size: 14px; color: #6a6450; margin: 8px auto 0; max-width: 290px; }

/* ===== Group hero search (Pushpak, 2026-10-24) — the community's own "Google box": centered band
   above the About content, submits into the member page's relevance search. ===== */
.netu-group-search {
    display: flex; align-items: center; gap: 10px;
    background: #fff;
    border: 1px solid var(--netu-line);
    border-radius: 999px;
    padding: 7px 7px 7px 20px;
    box-shadow: 0 10px 28px -16px rgba(12, 27, 42, .35);
    transition: box-shadow .18s ease, border-color .18s ease;
}
.netu-group-search:focus-within {
    border-color: var(--netu-blue);
    box-shadow: 0 12px 32px -14px rgba(0, 104, 184, .35);
}
.netu-group-search-icon { color: var(--netu-slate); font-size: 1.1rem; flex-shrink: 0; }
.netu-group-search-input {
    flex: 1; min-width: 0;
    border: 0; outline: 0; background: transparent;
    font-size: 1.05rem;
    padding: 10px 0;
    color: var(--netu-ink);
}
.netu-group-search-input::placeholder { color: var(--netu-slate-light); }
.netu-group-search-go {
    border: 0; border-radius: 999px;
    padding: 10px 24px;
    font-weight: 700; font-size: .95rem;
    color: #fff;
    background: var(--netu-blue);
    flex-shrink: 0;
    transition: filter .18s ease, transform .12s ease;
}
.netu-group-search-go:hover  { filter: brightness(1.1); }
.netu-group-search-go:active { transform: scale(.97); }
/* Inline-in-strip variant (2026-10-25): sits between the tag list and Share/Invite. */
.netu-group-search--strip { max-width: 560px; padding: 4px 4px 4px 16px; }
.netu-group-search--strip .netu-group-search-input { font-size: .95rem; padding: 7px 0; }
.netu-group-search--strip .netu-group-search-go { padding: 7px 18px; font-size: .88rem; }
@media (max-width: 575px) {
    .netu-group-search { padding-left: 14px; }
    .netu-group-search-go { padding: 10px 14px; }
}

/* ===== Connected Group cards (Pushpak, 2026-10-26) — the About page's child communities:
   banner strip, overlapping logo ring, bold name, member count. Hover lifts (house motion rule). ===== */
.netu-cgc {
    display: block;
    border: 1px solid var(--netu-line);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: var(--netu-ink);
    background: #fff;
    box-shadow: 0 6px 18px -12px rgba(12, 27, 42, .25);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.netu-cgc:hover {
    transform: translateY(-3px);
    border-color: var(--netu-blue);
    box-shadow: 0 14px 30px -14px rgba(12, 27, 42, .4);
    color: var(--netu-ink);
}
.netu-cgc-banner {
    display: block; height: 84px;
    background: linear-gradient(135deg, var(--netu-blue-tint), var(--netu-seb-tint));
    background-size: cover; background-position: center;
}
.netu-cgc-body {
    display: flex; align-items: center; gap: 12px;
    padding: 0 14px 14px;
}
.netu-cgc-logo {
    width: 52px; height: 52px; flex-shrink: 0;
    margin-top: -26px;
    border-radius: 12px;
    object-fit: cover;
    background: #fff;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px -4px rgba(12, 27, 42, .35);
}
.netu-cgc-logo--ph {
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.3rem; color: var(--netu-blue);
    background: var(--netu-blue-tint);
}
.netu-cgc-info { min-width: 0; padding-top: 10px; }
.netu-cgc-name {
    display: block;
    font-weight: 800; font-size: 1.02rem; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.netu-cgc-members { display: block; font-size: .82rem; color: var(--netu-slate); margin-top: 2px; }
.netu-cgc-arrow {
    margin-left: auto; padding-top: 10px;
    color: var(--netu-slate-light);
    transition: transform .18s ease, color .18s ease;
}
.netu-cgc:hover .netu-cgc-arrow { transform: translateX(4px); color: var(--netu-blue); }

/* ============ Messages two-pane frame (2026-10-29) ============
   The frame is plain flex (not .row): .row is flex-wrap:wrap, and a 1px overflow wrapped the chat
   column under the thread list where the box's overflow-hidden clipped it (invisible composer).
   Left pane: full width on mobile (the open conversation hides it), fixed third on md+. */
.netu-msg-left { width: 100%; }
@media (min-width: 768px) {
    .netu-msg-left { width: 33.3333%; flex: 0 0 auto; }
}