/* Revenue blur toggle */
.revenue-blur {
    filter: blur(8px);
    user-select: none;
    transition: filter 0.2s ease;
}

/* Brand UI tweaks */
:root {
    --radius: 10px;

    /* (The --mud-palette shim + --mud-typography vars were removed once Mud was gone — restyle.) */
    --quill-font-family: var(--sb-font);
}

/* Global font: Inter (editorial/brutalist design system — var(--sb-font)) */
html, body {
    font-family: var(--sb-font);
}

/* Hard override to beat vendor defaults everywhere */
body, button, input, optgroup, select, textarea {
    font-family: var(--sb-font) !important;
}

/* Brutalist focus ring */
:focus-visible {
    outline: 2px solid var(--sb-accent);
    outline-offset: 2px;
}

/* Top bar — editorial/brutalist: solid paper masthead, hard rule, no blur or soft shadow */
.appbar-glass {
    position: sticky;
    top: 0;
    z-index: 1100;
    background-color: var(--sb-paper);
    border-bottom: 1px solid var(--sb-line);
    box-shadow: none;
}

/* Extension update banner — sits below appbar.
   margin-left clears the FIXED sidebar (z-index 1100), which otherwise covers the banner's
   left edge and eats the first few words. The var is already responsive: 220 / 56 / 0. */
.extension-update-banner {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: var(--sb-sidebar-width);
    padding: 8px 24px;
    background: #fff3e0;
    color: #7a4100;
    font-size: .85rem;
    font-weight: 500;
    border-bottom: 1px solid #ffe0b2;
    position: sticky;
    top: 64px; /* below the appbar */
    z-index: 1099;
    transition: margin-left 0.2s ease;
}

/* Bootcamp promo bar — the substackauthor.com palette taken from its CALM end: plum #3B0B36
   (their own dark section colour) as the base, with magenta and electric yellow kept for the
   two things that actually matter, the code and the price. Same campaign identity as the hot
   magenta gradient, a fraction of the volume. */
.bootcamp-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: var(--sb-sidebar-width);
    padding: 9px 20px;
    background: linear-gradient(90deg, #3B0B36 0%, #55123F 55%, #6E1748 100%);
    color: #F6EAF1;
    font-size: .85rem;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 214, 10, 0.30);
    position: sticky;
    top: 64px; /* below the appbar, same as the update banner */
    z-index: 1099;
    transition: margin-left 0.2s ease;
}

/* The text block wraps as a unit instead of overflowing on narrow viewports. */
.bootcamp-text {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    min-width: 0;
    flex: 1 1 auto;
}

.bootcamp-title {
    font-weight: 700;
    color: #fff;
    letter-spacing: .01em;
}

.bootcamp-detail {
    opacity: .78;
    font-weight: 400;
}

/* Outlined rather than a solid white pill: still obviously the action, without a bright
   block sitting in the corner of every page for a week. */
.bootcamp-cta {
    background: transparent;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    padding: 3px 12px;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease;
}

.bootcamp-cta:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.75);
    color: #fff;
    text-decoration: none;
}

/* The close button MUST set its own colour here. .sb-iconbtn paints itself var(--sb-ink-soft)
   and .ext-banner-close's `color: inherit` has the same specificity, so the dark ink wins and
   the X disappears against a dark banner. These two-class selectors outrank it. Same reason the
   hover state is overridden: .sb-iconbtn:hover swaps in a pale background and orange ink. */
.bootcamp-banner .ext-banner-close {
    flex: 0 0 auto;
    color: #fff;
    opacity: .7;
}

.bootcamp-banner .ext-banner-close:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    opacity: 1;
}

/* Legible by accident today (dark ink on a pale orange bar), pinned deliberately now. */
.extension-update-banner .ext-banner-close {
    color: inherit;
}

/* No dark-mode override: the gradient is a deliberate full-color bar and reads correctly
   on both themes. Muting it in dark mode is what made it look washed out. */

@media (max-width: 768px) {
    .bootcamp-banner {
        padding: 8px 14px;
        font-size: .8rem;
    }

    /* On phones the offer + CTA are what matter; the presenter/date line is the first
       thing to go rather than letting the bar grow into a three-line block. */
    .bootcamp-detail {
        display: none;
    }
}

/* Dark appbar — driven by the [data-theme="dark"] attribute on <html> (the SAME single source of truth
   as the body), so the bar can never mismatch the page theme. (Was a separate C#-toggled .appbar-glass-dark
   class, which drifted out of sync and produced a dark bar on a light body.) */
[data-theme="dark"] .appbar-glass {
    position: sticky;
    top: 0;
    z-index: 1100;
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    background-color: rgba(20, 22, 38, 0.85) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
}

/* Brand wordmark — editorial: heavy Inter, tight tracking */
.brand-title {
    font-family: var(--sb-font);
    font-weight: 900;
    font-size: clamp(1.5rem, 2vw, 2rem);
    letter-spacing: -0.02em;
}

/* Push content below appbar height */
.layout-content {
    padding-top: 84px; /* increased to account for bigger brand */
}

/* Hero image size */
.hero-illustration {
    max-width: 380px;
    width: 100%;
    height: auto;
}

/* Keep existing styles */
a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0iIHRyYW5zbGF0ZSgtMjM1IC01MSk+PHBhdGggZD0iTTI26My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA9NC4wODE1IDI5MSA9NC42NzgyIDI5MSA9Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg2IDY2LjAxODMuMjYzLjU3SiA2Ni4wMTgzIDI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Anchor offset so sticky appbar doesn't cover headings when using #hash links */
:root {
    --appbar-offset: 84px;
}

section[id] {
    scroll-margin-top: var(--appbar-offset);
}

html {
    scroll-behavior: smooth;
}

/* Publications card layout */
.pub-card {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 0;
    align-items: stretch;
    overflow: hidden;
}

.pub-card-image {
    width: 160px;
    height: 100%;
}

    .pub-card-image > img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-top-left-radius: var(--radius);
        border-bottom-left-radius: var(--radius);
    }

.pub-card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pub-card-content {
    flex: 1 1 auto;
}

.pub-card-actions {
    display: flex;
    justify-content: flex-end;
    padding: 0 16px 16px 16px;
}

@media (max-width: 600px) {
    .pub-card {
        grid-template-columns: 100px 1fr;
    }

    .pub-card-image {
        width: 100px;
    }
}

/* Schedule calendar item styling */
.sb-cal-item {
    background: rgba(245, 124, 0, 0.18); /* orange-ish */
    color: var(--sb-ink);
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid rgba(245,124,0,0.35);
}

/* (Dead .sb-composer.mud-drawer / .mud-drawer-content rules removed — the composer shell is a plain fixed div now.) */

/* Match rich-text editor background to active theme */
.sb-composer .ql-toolbar,
.sb-composer .ql-container,
.sb-composer .ql-editor {
    background-color: var(--sb-paper) !important;
    color: var(--sb-ink) !important;
    border-color: var(--sb-hairline) !important;
}

/* Toolbar icon color adapts to theme */
.sb-composer .ql-toolbar .ql-stroke {
    stroke: var(--sb-ink-soft) !important;
}

.sb-composer .ql-toolbar .ql-fill {
    fill: var(--sb-ink-soft) !important;
}

.sb-composer .ql-toolbar button:hover .ql-stroke,
.sb-composer .ql-toolbar button.ql-active .ql-stroke {
    stroke: var(--sb-accent) !important;
}

.sb-composer .ql-toolbar button:hover .ql-fill,
.sb-composer .ql-toolbar button.ql-active .ql-fill {
    fill: var(--sb-accent) !important;
}

/* Placeholder text uses theme disabled color */
.sb-composer .ql-editor.ql-blank::before {
    color: var(--sb-ink-mute) !important;
    font-style: italic;
}

/* Schedule: visually and interactively disable past items */
.sb-cal-item--past {
    pointer-events: none; /* disable drag/resize/click */
}

/* Collaborations Map styles: tweak InfoWindow and hide scrollbars */
.gm-style-iw {
    background-color: white;
    box-shadow: 0 2px 7px rgba(0,0,0,0.3);
    padding: 12px;
    border-radius: 2px;
    font-size: 14px;
    line-height: 18px;
    overflow: hidden !important;
}

.gm-ui-hover-effect {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 24px !important;
    height: 24px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    border-radius: 2px !important;
    cursor: pointer;
}

.gm-control-active {
    background-color: #fff;
    border: 0;
    border-radius: 2px;
    box-shadow: 0 1px 4px -1px rgba(0,0,0,.3);
    cursor: pointer;
    margin: 10px;
    padding: 6px;
    text-align: center;
}

    .gm-control-active img {
        width: 18px;
        height: 18px;
    }

.gm-fullscreen-control {
    background: none rgb(255, 255, 255);
    border: 0px;
    margin: 10px;
    padding: 0px;
    text-transform: none;
    appearance: none;
    position: absolute;
    cursor: pointer;
    user-select: none;
    border-radius: 2px;
    height: 40px;
    width: 40px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
    overflow: hidden;
    top: 0px;
    right: 0px;
}

.gm-control-active > img {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%, -50%);
}

.gm-ui-hover-effect > span {
    background-color: light-dark(#000, #fff);
    margin: 0 !important;
}

.gm-style-iw-chr {
    height: 24px;
}

.gm-style-iw, .gm-style-iw-d {
    overflow: hidden !important;
}

    .gm-style-iw-d::-webkit-scrollbar {
        display: none;
    }

.sb-iw {
    width: 200px;
    overflow: hidden;
}

.sb-iw-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sb-iw-pubimg {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid #e5e7eb;
}

.sb-iw-title {
    font-weight: 800;
    line-height: 1.1;
}

.sb-iw-by {
    color: #6b7280;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.sb-iw-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #e5e7eb;
}

.sb-iw-chips {
    margin-top: 4px;
}

.sb-iw-chip {
    display: inline-block;
    padding: 2px 6px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 11px;
    margin-right: 4px;
    white-space: nowrap;
}

.sb-iw-actions {
    margin-top: 8px;
}

.sb-iw-link {
    text-decoration: none;
    color: #1b6ec2;
    font-weight: 800;
}

/* Grouped pin: several publications at one location */
.sb-iw-grouphead {
    font-weight: 800;
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--sb-ink);
}

.sb-iw-rows {
    display: flex;
    flex-direction: column;
    max-height: 220px;
    overflow-y: auto;
}

.sb-iw-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 4px;
    text-decoration: none;
    color: var(--sb-ink);
    border-radius: 6px;
}

.sb-iw-row:hover { background: var(--sb-accent-soft); }

.sb-iw-rowimg {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: 5px;
}

.sb-iw-rowimg--empty {
    display: inline-block;
    background: var(--sb-line);
}

.sb-iw-rowtitle {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-iw-rowarrow { color: var(--sb-ink-mute); font-size: 12px; }

.sb-iw-more {
    margin-top: 4px;
    font-size: 12px;
    color: var(--sb-ink-mute);
}

/* Looking For callout */
.sb-lookingfor {
    background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(16,185,129,0.08));
    border: 1px solid color-mix(in srgb, var(--sb-accent) 30%, transparent);
    border-radius: 10px;
    padding: 10px 12px;
}

.sb-lf-title {
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--sb-accent);
    margin-bottom: 4px;
}

.sb-lf-text {
    color: var(--sb-ink-soft);
}

/* Clamp helper */
.sb-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sb-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Publication list item (Network directory + favorites) */
.pub-card {
    /* .sb-card is display:grid, which would size .pub-row to min-content */
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.pub-row { display: flex; gap: 16px; align-items: flex-start; }

.pub-img {
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: var(--sb-radius-sm);
    border: 1px solid var(--sb-line);
}

.pub-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.pub-titlerow { display: flex; align-items: center; gap: 6px; }

.pub-title {
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--sb-ink);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.pub-title:hover { color: var(--sb-accent-ink); text-decoration: underline; }

.pub-metarow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

.pub-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.pub-pill--free { background: var(--sb-teal-soft); color: var(--sb-teal-ink); }
.pub-pill--paid { background: var(--sb-accent-soft); color: var(--sb-accent-ink); }

.pub-side {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

@media (max-width: 640px) {
    .pub-row { flex-wrap: wrap; }
    .pub-side { flex-direction: row; align-items: center; width: 100%; justify-content: flex-end; }
}

/* Rounded frame for embedded Google Maps */
.sb-mapwrap {
    border-radius: var(--sb-radius);
    overflow: hidden;
    border: 1px solid var(--sb-line);
}

/* Network: the "new in your categories" band. A two-column grid on desktop that collapses to one
   on narrow screens, so the row stays a short readable shelf rather than a second feed. */
.sb-newcats-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.sb-newcats-item {
    min-width: 0;
}

@media (max-width: 900px) {
    .sb-newcats-row {
        grid-template-columns: 1fr;
    }
}

.ql-editor {
    font-size: 15px;
}

/* --- Collaborations Landing Styles (moved from inline) --- */
:root {
    --sb-bg: radial-gradient(circle at 20% 20%, #2d2f55 0%, #141626 60%, #0c0e18 100%);
    /* Aligned to the relaunch accent (sb-design.css owns the real token; this legacy
       copy must agree so stylesheet load order can never flip the app back to coral). */
    --sb-accent: #2563EB;
    --sb-accent-alt: #6ec9ff;
    --sb-primary: #2563EB;
    --sb-primary-focus: #1D4ED8;
    --sb-txt: #f5f7fb;
    --sb-txt-dim: #b5b9c9;
}

.sb-hero {
    background: var(--sb-bg);
    color: var(--sb-txt);
    padding: 4.5rem 0 5.5rem;
    position: relative;
    overflow: hidden;
}

    .sb-hero:before {
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 75% 35%, rgba(255,179,71,.15), transparent 60%);
    }

.sb-hero-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3rem;
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 2rem;
}

.sb-hero-collab-join {
    background: inherit;
    color: var(--sb-txt);
    padding: 4.5rem 0 5.5rem;
    position: relative;
    overflow: hidden;
}

    .sb-hero-collab-join:before {
        position: absolute;
        inset: 0;
        /*        background: radial-gradient(circle at 75% 35%, rgba(255,179,71,.15), transparent 60%);
*/
    }

.sb-hero-inner-collab-join {
    /*display: flex;*/
    flex-wrap: wrap;
    align-items: center;
    gap: inherit;
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 2rem;
}

.sb-hero-left {
    flex: 1 1 460px;
    min-width: 320px;
    position: relative;
    z-index: 3;
}

.sb-hero-art {
    flex: 1 1 480px;
    min-width: 340px;
    position: relative;
    height: 420px;
}

.sb-brand {
    color: #fff;
    font-weight: 900;
}

.sb-accent {
    background: linear-gradient(90deg,var(--sb-accent),var(--sb-accent-alt));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    font-weight: 600;
}

.sb-tagline {
    font-size: 1.25rem;
    line-height: 1.5;
    margin: 1.25rem 0 1.75rem;
    max-width: 600px;
}

.sb-cta-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.sb-btn {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border-radius: 10px;
    padding: .85rem 1.5rem;
    font-size: 1rem;
    line-height: 1.1;
    transition: all .25s ease;
    border: 1px solid transparent;
    cursor: pointer;
}

.sb-btn-xl {
    font-size: 1.15rem;
    padding: 1.05rem 2rem;
}

.sb-btn-primary {
    background: var(--sb-primary);
    color: #fff;
    box-shadow: 0 8px 24px -6px rgba(37, 99, 235,.45);
}

    .sb-btn-primary:hover {
        background: var(--sb-primary-focus);
        transform: translateY(-2px);
        box-shadow: 0 10px 30px -6px rgba(37, 99, 235,.6);
    }

.sb-btn-outline {
    background: rgba(255,255,255,.04);
    color: var(--sb-txt);
    border-color: rgba(255,255,255,.15);
}

    .sb-btn-outline:hover {
        background: rgba(255,255,255,.08);
    }

.sb-btn-accent {
    background: linear-gradient(90deg,var(--sb-accent),var(--sb-accent-alt));
    color: #1a1d29;
    font-weight: 700;
}

    .sb-btn-accent:hover {
        filter: brightness(1.1);
    }

.pulse {
    animation: pulse 4s infinite;
}

@keyframes pulse {
    0%,100% {
        box-shadow: 0 0 0 0 rgba(255,179,71,.4);
    }

    50% {
        box-shadow: 0 0 0 14px rgba(255,179,71,0);
    }
}

.sb-social-proof {
    display: flex;
    gap: .85rem;
    align-items: center;
    margin-top: 2rem;
    font-size: .9rem;
    color: var(--sb-txt-dim);
}

    .sb-social-proof img {
        height: 48px;
        width: auto;
        filter: drop-shadow(0 4px 10px rgba(0,0,0,.4));
    }

.sb-screenshot {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: linear-gradient(145deg,#1b1e2d,#252a41);
    box-shadow: 0 25px 60px -15px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.05);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .sb-screenshot .placeholder {
        color: #5f6480;
        font-size: 1rem;
        letter-spacing: .5px;
        text-align: center;
        padding: 1.5rem;
        line-height: 1.4;
    }

.sb-floating-card {
    position: absolute;
    backdrop-filter: blur(8px);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    padding: .9rem 1.1rem;
    font-size: .8rem;
    color: #fff;
    box-shadow: 0 8px 26px -8px rgba(0,0,0,.55);
    animation: float 8s ease-in-out infinite;
    pointer-events: none;
}

    .sb-floating-card .mini {
        opacity: .9;
    }

    .sb-floating-card.a {
        top: 14%;
        right: 13%;
        animation-delay: .4s;
    }

    .sb-floating-card.b {
        bottom: 22%;
        left: 24%;
        animation-delay: 1.2s;
    }

    .sb-floating-card.c {
        top: 12%;
        left: 8%;
        animation-delay: 2s;
    }

@keyframes float {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px)
    }
}

.sb-trust {
    background: #0f111b;
    padding: 3.5rem 0;
}

.sb-shell {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 2rem;
}

    .sb-shell.narrow {
        max-width: 900px;
    }

.sb-trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(210px,1fr));
    gap: 2rem;
}

    .sb-trust-grid h3 {
        margin: .65rem 0 .4rem;
        font-size: 1.05rem;
        color: #fff;
    }

    .sb-trust-grid p {
        margin: 0;
        font-size: .85rem;
        line-height: 1.35;
        color: #a4a9b9;
    }

    .sb-trust-grid .m {
        font-size: 1.4rem;
    }

.sb-how {
    background: #161a27;
    padding: 4.5rem 0 4rem;
    color: #e5e8ef;
    text-align: center;
}

    .sb-how h2 {
        font-size: 2.15rem;
        margin: 0 0 2.25rem;
        background: linear-gradient(90deg,var(--sb-accent),var(--sb-accent-alt));
        -webkit-background-clip: text;
        color: transparent;
    }

.sb-steps {
    list-style: decimal;
    text-align: left;
    margin: 0;
    padding-left: 1.25rem;
    display: grid;
    gap: 1.4rem;
}

    .sb-steps li {
        line-height: 1.5;
    }

.sb-value {
    background: #11131d;
    padding: 4.5rem 0 4.25rem;
    color: #d7dbe5;
}

.sb-value-grid {
    display: grid;
    gap: 1.75rem;
    grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
}

.v-card {
    background: #1b1f2c;
    border: 1px solid #262c3c;
    border-radius: 18px;
    padding: 1.35rem 1.35rem 1.2rem;
    box-shadow: 0 10px 32px -12px rgba(0,0,0,.45);
}

    .v-card.highlight {
        background: linear-gradient(135deg,#262d46,#1d2132 55%,#262d46);
        border-color: #323a52;
    }

    .v-card h3 {
        margin: .2rem 0 .6rem;
        font-size: 1.05rem;
        color: #fff;
    }

    .v-card p {
        margin: 0;
        font-size: .85rem;
        line-height: 1.45;
        color: #a8afbd;
    }

.sb-final-cta {
    background: radial-gradient(circle at 65% 40%,rgba(99,102,241,.2),rgba(17,19,29,1) 60%), #11131d;
    padding: 5rem 0 6rem;
    text-align: center;
    color: #e8ebf5;
}

    .sb-final-cta h2 {
        font-size: 2.1rem;
        max-width: 860px;
        margin: 0 auto 1.3rem;
        line-height: 1.25;
    }

    .sb-final-cta p {
        font-size: 1.05rem;
        margin: .25rem 0 2.2rem;
        color: #b9c0d1;
    }

    .sb-final-cta .mini-note {
        margin-top: 1.75rem;
        font-size: .75rem;
        text-transform: uppercase;
        letter-spacing: 1.6px;
        color: #757d91;
    }

.center {
    text-align: center;
}

.mt-l {
    margin-top: 2.4rem;
}

.mt-xl {
    margin-top: 3.5rem;
}

/* Responsive tweaks for collaborations landing */
@media (max-width: 940px) {
    .sb-hero {
        padding: 3.2rem 0 4.2rem;
    }

    .sb-hero-art {
        order: -1;
        height: 340px;
    }
}

@media (max-width: 640px) {
    .sb-tagline {
        font-size: 1.05rem;
    }

    .sb-hero-art {
        height: 300px;
    }

    .sb-value-grid {
        grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    }
}

/* --- Responsive Enhancements: Collaborations Landing --- */
.sb-hero-left h1 {
    font-size: clamp(2.2rem,4.2vw + .5rem,3.25rem);
    line-height: 1.05;
    margin: 0 0 .4rem;
}

/* Medium: allow steps to go 2 columns for readability */
@media (min-width:720px) and (max-width:1100px) {
    .sb-steps {
        grid-template-columns: 1fr 1fr;
    }
}

/* Start flow breadcrumbs */
.sp-breadcrumbs {
    margin-top: -6px;
    margin-bottom: 2px;
    padding-top: 0;
}

/* (Dead .sp-breadcrumbs .mud-breadcrumb-* rules removed — breadcrumbs use SbBreadcrumbItem now.) */

/* CTA buttons stack on narrow screens */
@media (max-width:680px) {
    .sb-cta-group {
        flex-direction: column;
        align-items: stretch;
    }

        .sb-cta-group .sb-btn {
            width: 100%;
        }
}

/* Further tighten below 560px */
@media (max-width:560px) {
    .sb-hero-inner {
        padding: 0 1.25rem;
    }

    .sb-hero {
        padding: 2.8rem 0 3.4rem;
    }

    .sb-hero-art {
        height: 260px;
    }

    .sb-tagline {
        font-size: 1.02rem;
    }

    .sb-value {
        padding: 3.4rem 0 3.1rem;
    }

    .sb-final-cta {
        padding: 4.4rem 0 5.2rem;
    }

    .sb-floating-card {
        transform: scale(.9);
    }
}

/* Ultra small devices */
@media (max-width:440px) {
    .sb-hero-inner {
        padding: 0 1rem;
    }

    .sb-hero {
        padding: 2.4rem 0 3rem;
    }

    .sb-hero-art {
        height: 225px;
    }

    .sb-tagline {
        font-size: .98rem;
    }

    .sb-btn-xl {
        font-size: 1.03rem;
        padding: .95rem 1.4rem;
    }

    .sb-value-grid {
        gap: 1.25rem;
    }

    .v-card {
        padding: 1.1rem 1.05rem 1rem;
    }

    .sb-final-cta h2 {
        font-size: 1.65rem;
    }
}

/* Light variant fine‑tuning on very small screens */
@media (max-width:560px) {
    .collab-landing.light .sb-screenshot {
        box-shadow: 0 16px 42px -18px rgba(0,40,90,.15),0 0 0 1px rgba(0,0,0,.05);
    }
}

/* Smooth scaling for floating cards */
.sb-floating-card {
    transition: transform .6s ease, box-shadow .6s ease;
}

/* Prevent horizontal scroll due to transforms */
.collab-landing {
    overflow-x: hidden;
}

    /* --- Light Variant: Collaborations Landing (restored) --- */
    .collab-landing.light .sb-hero {
        background: linear-gradient(135deg,#f8fafc,#eef4ff 55%, #e9f3ff);
        color: #1b2430;
    }

        .collab-landing.light .sb-hero:before {
            background: radial-gradient(circle at 75% 35%, rgba(255,179,71,.35), transparent 60%);
        }

    .collab-landing.light .sb-brand {
        color: #111827;
    }

    .collab-landing.light .sb-accent {
        background: linear-gradient(90deg,var(--sb-accent),var(--sb-accent-alt));
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }

    .collab-landing.light .sb-tagline {
        color: #334155;
    }

    .collab-landing.light .sb-btn-primary {
        background: #2563EB;
        box-shadow: 0 8px 24px -6px rgba(37, 99, 235,.35);
    }

        .collab-landing.light .sb-btn-primary:hover {
            background: #1D4ED8;
            box-shadow: 0 10px 30px -6px rgba(37, 99, 235,.5);
        }

    .collab-landing.light .sb-btn-outline {
        background: rgba(255,255,255,.7);
        color: #1f2937;
        border-color: rgba(0,0,0,.08);
    }

        .collab-landing.light .sb-btn-outline:hover {
            background: #fff;
        }

    .collab-landing.light .sb-social-proof {
        color: #475569;
    }

    .collab-landing.light .sb-screenshot {
        background: linear-gradient(145deg,rgba(255,255,255,0.85),rgba(241,245,249,0)), url('/images/people-collaborating.png') center/cover no-repeat;
    }

    .collab-landing.light .sb-screenshot-alpha {
        background: linear-gradient(145deg,rgba(255,255,255,0.85),rgba(241,245,249,0)), url('/images/stackbuddy-alpha-chill.png') center/cover no-repeat;
    }

    .collab-landing.light .sb-floating-card {
        background: rgba(255,255,255,.75);
        color: #0f172a;
        border: 1px solid rgba(0,0,0,.06);
        box-shadow: 0 8px 26px -8px rgba(0,40,90,.15);
    }

    .collab-landing.light .sb-trust {
        background: #ffffff;
    }

    .collab-landing.light .sb-trust-grid h3 {
        color: #0f172a;
    }

    .collab-landing.light .sb-trust-grid p {
        color: #475569;
    }

    .collab-landing.light .sb-how {
        background: #f1f5f9;
        color: #334155;
    }

        .collab-landing.light .sb-how h2 {
            background: none;
            -webkit-background-clip: initial;
            color: #1e293b;
        }

    .collab-landing.light .sb-steps li {
        color: #1e293b;
    }

    .collab-landing.light .sb-value {
        background: #ffffff;
        color: #1e293b;
    }

    .collab-landing.light .v-card {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        box-shadow: 0 10px 32px -12px rgba(0,40,90,.12);
    }

        .collab-landing.light .v-card.highlight {
            background: linear-gradient(135deg,#f1f5f9,#e2e8f0 55%,#f1f5f9);
            border-color: #d1dbe6;
        }

        .collab-landing.light .v-card h3 {
            color: #0f172a;
        }

        .collab-landing.light .v-card p {
            color: #475569;
        }

    .collab-landing.light .sb-final-cta {
        background: radial-gradient(circle at 65% 40%,rgba(99,102,241,.18),#f1f5f9 60%), #f1f5f9;
        color: #1e293b;
    }

        .collab-landing.light .sb-final-cta h2 {
            color: #1e293b;
        }

        .collab-landing.light .sb-final-cta p {
            color: #475569;
        }

        .collab-landing.light .sb-final-cta .mini-note {
            color: #64748b;
        }

    .collab-landing.light .sb-btn-accent {
        color: #111827;
    }

        .collab-landing.light .sb-btn-accent:hover {
            filter: brightness(1.08);
        }

    .collab-landing.light .sb-btn {
        transition: background .3s ease, box-shadow .3s ease, transform .25s ease;
    }

    /* Transition group */
    .collab-landing.light .sb-hero, .collab-landing.light .sb-trust, .collab-landing.light .sb-how, .collab-landing.light .sb-value, .collab-landing.light .sb-final-cta, .collab-landing.light .v-card, .collab-landing.light .sb-screenshot, .collab-landing.light .sb-floating-card {
        transition: background .6s ease, color .4s ease, box-shadow .6s ease, border-color .5s ease;
    }
/* --- End Light Variant --- */

/* ============================================================
   DARK LANDING PAGE REDESIGN (VidIQ/Kleo Style)
   ============================================================ */

/* Landing Page Container */
.landing-dark {
    background: #0C0E18;
    color: #F5F7FB;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Fixed Navigation */
.landing-nav {
    position: fixed;
    top: 20px;
    right: 32px;
    z-index: 1000;
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Hero Section */
.landing-hero {
    position: relative;
    padding: 120px 0 100px;
    overflow: hidden;
}

.landing-hero-bg {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 25% 20%, rgba(37, 99, 235, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 75% 80%, rgba(110, 201, 255, 0.1) 0%, transparent 50%),
        linear-gradient(180deg, #0C0E18 0%, #141626 100%);
    z-index: 1;
}

.landing-hero-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(37, 99, 235, 0.03) 2px,
            rgba(37, 99, 235, 0.03) 4px
        );
    animation: grid-move 20s linear infinite;
    opacity: 0.3;
}

@keyframes grid-move {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

.landing-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    position: relative;
    z-index: 2;
}

.landing-container.narrow {
    max-width: 980px;
}

.landing-hero-content {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.landing-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.3);
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #FF7A1A;
    margin-bottom: 32px;
    backdrop-filter: blur(10px);
}

.badge-icon {
    font-size: 1.1rem;
}

.landing-hero-title {
    font-size: clamp(2.8rem, 6vw, 4.2rem);
    line-height: 1.1;
    font-weight: 900;
    margin: 0 0 28px;
    letter-spacing: -0.02em;
}

.gradient-text {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.landing-hero-subtitle {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    line-height: 1.6;
    color: #B5B9C9;
    margin: 0 0 48px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* Stats Bar */
.landing-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    padding: 24px 40px;
    background: rgba(20, 22, 38, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    backdrop-filter: blur(20px);
    margin: 0 auto 48px;
    max-width: fit-content;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 2.2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 6px;
}

.stat-label {
    font-size: 0.85rem;
    color: #B5B9C9;
    font-weight: 500;
}

.stat-divider {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
}

/* CTA Group */
.landing-cta-group {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.landing-cta-primary {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%) !important;
    box-shadow: 
        0 0 0 1px rgba(37, 99, 235, 0.2),
        0 8px 32px -8px rgba(37, 99, 235, 0.5),
        0 0 60px -15px rgba(37, 99, 235, 0.3) !important;
    position: relative;
    overflow: hidden;
}

.landing-cta-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.landing-cta-primary:hover::before {
    left: 100%;
}

.landing-cta-primary:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 
        0 0 0 1px rgba(37, 99, 235, 0.3),
        0 12px 40px -8px rgba(37, 99, 235, 0.6),
        0 0 80px -15px rgba(37, 99, 235, 0.4) !important;
}

/* Trust Line */
.landing-trust-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.95rem;
    color: #B5B9C9;
}

.trust-icon {
    color: #22C55E;
    font-weight: 700;
}

.trust-separator {
    opacity: 0.4;
}

/* Hero Video (Inline in Hero) */
.hero-video-container {
    max-width: 1100px;
    margin: 0 auto 48px;
}

.hero-video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    background: rgba(20, 22, 38, 0.6);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
        0 0 0 1px rgba(255, 255, 255, 0.05),
        0 16px 48px -12px rgba(0, 0, 0, 0.4);
}

.hero-video-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1A1C2E 0%, #141626 100%);
    cursor: pointer;
    transition: all 0.3s ease;
}

.hero-video-placeholder:hover {
    background: linear-gradient(135deg, #1E2036 0%, #171929 100%);
}

.hero-video-play {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 4px;
    font-size: 1.8rem;
    color: white;
    margin-bottom: 20px;
    box-shadow: 
        0 8px 32px rgba(37, 99, 235, 0.5),
        0 0 60px -15px rgba(37, 99, 235, 0.4);
    transition: all 0.3s ease;
}

.hero-video-placeholder:hover .hero-video-play {
    transform: scale(1.1);
    box-shadow: 
        0 12px 40px rgba(37, 99, 235, 0.6),
        0 0 80px -15px rgba(37, 99, 235, 0.5);
}

.hero-video-text {
    font-size: 1.15rem;
    font-weight: 700;
    color: #F5F7FB;
    text-align: center;
    line-height: 1.5;
}

/* Hero Visual */
.landing-hero-visual {
    position: relative;
    max-width: 1100px;
    margin: 80px auto 0;
    height: 600px;
}

.hero-window {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    border-radius: 16px;
    background: #141626;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 
        0 0 0 1px rgba(255, 255, 255, 0.05),
        0 40px 80px -20px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    animation: float-slow 8s ease-in-out infinite;
}

@keyframes float-slow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

.window-header {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    background: #1A1C2E;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.window-dots {
    display: flex;
    gap: 8px;
}

.window-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

.window-dots span:nth-child(1) { background: #FF5F57; }
.window-dots span:nth-child(2) { background: #FFBD2E; }
.window-dots span:nth-child(3) { background: #28CA42; }

.window-title {
    flex: 1;
    text-align: center;
    font-size: 0.85rem;
    color: #B5B9C9;
    font-weight: 600;
}

.window-content {
    background: #0F1119;
    padding: 0;
}

/* Floating Cards on Hero */
.hero-floating-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: rgba(20, 22, 38, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    animation: float-card 6s ease-in-out infinite;
}

@keyframes float-card {
    0%, 100% { transform: translateY(0) translateX(0); }
    50% { transform: translateY(-15px) translateX(5px); }
}

.hero-floating-card.card-1 {
    top: 8%;
    right: 5%;
    animation-delay: 0s;
}

.hero-floating-card.card-2 {
    bottom: 15%;
    left: 2%;
    animation-delay: 2s;
}

.hero-floating-card.card-3 {
    top: 35%;
    left: -3%;
    animation-delay: 4s;
}

.floating-icon {
    font-size: 1.8rem;
}

.floating-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.floating-label {
    font-size: 0.75rem;
    color: #B5B9C9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.floating-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #F5F7FB;
}

/* Testimonials Section */
.landing-testimonials {
    padding: 100px 0;
    background: 
        radial-gradient(circle at 30% 50%, rgba(110, 201, 255, 0.08) 0%, transparent 50%),
        #0C0E18;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 32px;
}

.testimonial-card {
    background: rgba(20, 22, 38, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 36px;
    transition: all 0.3s ease;
    position: relative;
}

.testimonial-card:hover {
    transform: translateY(-4px);
    border-color: rgba(37, 99, 235, 0.3);
    box-shadow: 0 20px 60px -15px rgba(37, 99, 235, 0.2);
}

.testimonial-featured {
    background: rgba(37, 99, 235, 0.05);
    border-color: rgba(37, 99, 235, 0.2);
}

.testimonial-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.testimonial-rating {
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: #FF7A1A;
}

.testimonial-text {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #F5F7FB;
    margin: 0 0 28px;
    font-style: italic;
}

.testimonial-text-short {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #F5F7FB;
    margin: 0 0 24px;
    font-style: italic;
}

/* Video Testimonials */
.testimonial-video {
    background: rgba(20, 22, 38, 0.8);
    border-color: rgba(255, 255, 255, 0.08);
    padding: 0;
    overflow: hidden;
}

.testimonial-video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    background: #000;
    border-radius: var(--sb-radius);
    overflow: hidden;
    border: none;
    margin-bottom: 0;
}

.testimonial-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.testimonial-play-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    cursor: pointer;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 45%);
    transition: background 0.35s ease;
}

.testimonial-play-overlay.playing {
    background: rgba(0, 0, 0, 0.001);
}

.testimonial-play-overlay.playing:hover {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, transparent 35%);
}

.testimonial-play-btn {
    position: absolute;
    bottom: 16px;
    left: 16px;
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 3px;
    font-size: 1.3rem;
    color: white;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.55), 0 0 40px -10px rgba(37, 99, 235, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    pointer-events: none;
}

.testimonial-play-overlay:hover .testimonial-play-btn {
    transform: scale(1.1);
    box-shadow: 0 8px 28px rgba(37, 99, 235, 0.7), 0 0 50px -10px rgba(37, 99, 235, 0.45);
}

.testimonial-video .testimonial-rating {
    margin-top: 20px;
    padding: 0 24px;
}

.testimonial-video .testimonial-text-short {
    padding: 0 24px;
}

.testimonial-video .testimonial-author {
    padding: 0 24px 24px;
}

.testimonial-video-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: 
        linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, transparent 100%),
        #1A1C2E;
    cursor: pointer;
    transition: all 0.3s ease;
}

.testimonial-video-placeholder:hover {
    background: 
        linear-gradient(135deg, rgba(37, 99, 235, 0.15) 0%, transparent 100%),
        #1E2036;
}

.video-play-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 3px;
    font-size: 1.2rem;
    color: white;
    margin-bottom: 12px;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
    transition: all 0.3s ease;
}

.testimonial-video-placeholder:hover .video-play-icon {
    transform: scale(1.1);
    box-shadow: 0 8px 28px rgba(37, 99, 235, 0.6);
}

.video-creator {
    font-size: 0.9rem;
    font-weight: 600;
    color: #FF7A1A;
    background: rgba(37, 99, 235, 0.1);
    padding: 5px 14px;
    border-radius: 16px;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 16px;
}

.author-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
}

.author-info {
    flex: 1;
}

.author-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #F5F7FB;
    margin-bottom: 4px;
}

.author-publication {
    font-size: 0.9rem;
    color: #B5B9C9;
}

/* Billing Toggle */
.billing-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 6px;
    background: rgba(20, 22, 38, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    margin: 0 auto 60px;
    max-width: fit-content;
    backdrop-filter: blur(10px);
}

.toggle-option {
    padding: 12px 28px;
    border: none;
    background: transparent;
    color: #B5B9C9;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 50px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Nunito', sans-serif;
}

.toggle-option.active {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    color: white;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4);
}

.toggle-option:not(.active):hover {
    color: #F5F7FB;
    background: rgba(255, 255, 255, 0.05);
}

.savings-badge {
    background: #22C55E;
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-left: 4px;
}

/* Pricing Note */
.pricing-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 28px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 16px;
    margin-top: 40px;
    font-size: 0.95rem;
    color: #F5F7FB;
    text-align: center;
    white-space: nowrap;
}

.note-icon {
    font-size: 1.3rem;
}

/* Features Section */
.landing-features {
    padding: 100px 0;
    background: #141626;
    position: relative;
}

.section-header {
    text-align: center;
    margin-bottom: 70px;
}

.section-title {
    font-size: clamp(2rem, 4vw, 2.8rem);
    line-height: 1.2;
    font-weight: 800;
    margin: 0 0 20px;
    color: #F5F7FB;
}

.section-subtitle {
    font-size: clamp(1rem, 2vw, 1.2rem);
    line-height: 1.6;
    color: #B5B9C9;
    max-width: 680px;
    margin: 0 auto;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 28px;
}

.feature-card {
    background: rgba(20, 22, 38, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 36px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #2563EB 0%, #1D4ED8 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    border-color: rgba(37, 99, 235, 0.3);
    box-shadow: 0 20px 60px -15px rgba(37, 99, 235, 0.3);
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-highlight {
    background: rgba(37, 99, 235, 0.05);
    border-color: rgba(37, 99, 235, 0.2);
}

.feature-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    filter: drop-shadow(0 4px 12px rgba(37, 99, 235, 0.3));
}

.feature-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 16px;
    color: #F5F7FB;
}

.feature-description {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #B5B9C9;
    margin: 0 0 24px;
}

.feature-image {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: #0F1119;
}

.feature-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* How It Works Section */
.landing-how {
    padding: 100px 0;
    background: 
        radial-gradient(circle at 50% 20%, rgba(110, 201, 255, 0.08) 0%, transparent 50%),
        #0C0E18;
}

.steps-grid {
    display: flex;
    flex-direction: column;
    gap: 60px;
    margin-top: 60px;
}

.step-card {
    display: grid;
    gap: 32px;
    align-items: start;
}

.step-number {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    font-weight: 900;
    color: white;
    box-shadow: 
        0 8px 32px -8px rgba(37, 99, 235, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.step-content {
    padding-top: 8px;
}

.step-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 16px;
    color: #F5F7FB;
}

.step-description {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #B5B9C9;
    margin: 0 0 24px;
}

.step-visual {
    grid-column: 2;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #141626;
    box-shadow: 0 12px 40px -10px rgba(0, 0, 0, 0.4);
}

.step-visual img {
    width: 100%;
    height: auto;
    display: block;
}

/* Social Proof Section */
.landing-social-proof {
    padding: 100px 0;
    background: #141626;
}

.proof-content {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 48px;
    align-items: center;
    background: rgba(20, 22, 38, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 48px;
}

.proof-mascot {
    width: 180px;
    height: auto;
    filter: drop-shadow(0 8px 24px rgba(37, 99, 235, 0.3));
}

.proof-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 16px;
    color: #F5F7FB;
}

.proof-description {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #B5B9C9;
    margin: 0 0 32px;
}

.proof-metrics {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.proof-metric {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: rgba(37, 99, 235, 0.05);
    border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: 12px;
}

.metric-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
}

.metric-text {
    font-size: 1.05rem;
    color: #F5F7FB;
    font-weight: 600;
}

/* Pricing Section */
.landing-pricing {
    padding: 100px 0;
    background: 
        radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.06) 0%, transparent 60%),
        #0C0E18;
}

.pricing-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 1600px;
    margin: 0 auto 32px;
}

.pricing-card {
    background: rgba(20, 22, 38, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 40px 32px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}

.pricing-card:hover {
    transform: translateY(-6px);
    border-color: rgba(37, 99, 235, 0.3);
    box-shadow: 0 24px 60px -15px rgba(37, 99, 235, 0.3);
}

.pricing-featured {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(20, 22, 38, 0.8) 100%);
    border: 2px solid rgba(37, 99, 235, 0.4);
    transform: scale(1.05);
}

.pricing-featured:hover {
    transform: scale(1.05) translateY(-6px);
}

.pricing-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    color: white;
    padding: 6px 20px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4);
}

.pricing-header {
    text-align: center;
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pricing-plan {
    font-size: 1.3rem;
    font-weight: 700;
    color: #F5F7FB;
    margin: 0 0 16px;
}

.pricing-price {
    margin-bottom: 12px;
}

.price-amount {
    font-size: 3.5rem;
    font-weight: 900;
    color: #F5F7FB;
    line-height: 1;
}

.price-period {
    font-size: 1.1rem;
    color: #B5B9C9;
    font-weight: 500;
}

.pricing-description {
    font-size: 1rem;
    color: #B5B9C9;
    margin: 0;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.feature-item {
    display: flex;
    align-items: start;
    gap: 12px;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #F5F7FB;
}

.feature-item.disabled {
    color: #6B7082;
    opacity: 0.6;
}

.feature-item .check {
    color: #22C55E;
    font-weight: 700;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.feature-item .cross {
    color: #6B7082;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.pricing-cta {
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 16px 32px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.pricing-cta-primary {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    color: white;
    box-shadow: 0 8px 24px -8px rgba(37, 99, 235, 0.5);
}

.pricing-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -8px rgba(37, 99, 235, 0.6);
}

.pricing-cta-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: #F5F7FB;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.pricing-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
}

.pricing-footer {
    text-align: center;
    font-size: 1.05rem;
    color: #B5B9C9;
    margin-top: 32px;
}

.pricing-link {
    color: #2563EB;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid rgba(37, 99, 235, 0.3);
    transition: border-color 0.2s ease;
}

.pricing-link:hover {
    border-bottom-color: #2563EB;
}

/* Final CTA Section */
.landing-final-cta {
    padding: 120px 0 100px;
    background: 
        radial-gradient(circle at 50% 30%, rgba(37, 99, 235, 0.15) 0%, transparent 60%),
        linear-gradient(180deg, #141626 0%, #0C0E18 100%);
    text-align: center;
    position: relative;
}

.cta-mascot {
    width: 140px;
    height: auto;
    margin: 0 auto 32px;
    filter: drop-shadow(0 12px 32px rgba(37, 99, 235, 0.4));
    animation: bounce-subtle 3s ease-in-out infinite;
}

@keyframes bounce-subtle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.cta-title {
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    line-height: 1.2;
    font-weight: 800;
    margin: 0 0 24px;
    color: #F5F7FB;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.cta-subtitle {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    line-height: 1.6;
    color: #B5B9C9;
    margin: 0 0 48px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.cta-note {
    margin-top: 24px;
    font-size: 0.95rem;
    color: #B5B9C9;
}

/* Footer in Dark Theme */
.landing-dark .sb-footer {
    background: #0A0C14;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 40px 0;
}

.landing-dark .sb-link {
    color: #B5B9C9;
    text-decoration: none;
    transition: color 0.2s ease;
}

.landing-dark .sb-link:hover {
    color: #2563EB;
}

/* ============================================================
   RESPONSIVE DESIGN
   ============================================================ */

@media (max-width: 1024px) {
    .landing-hero-visual {
        height: 500px;
    }

    .hero-floating-card {
        padding: 12px 16px;
    }

    .floating-icon {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .landing-nav {
        top: 12px;
        right: 16px;
        gap: 8px;
    }

    .landing-hero {
        padding: 80px 0 60px;
    }

    .landing-stats {
        flex-direction: column;
        gap: 20px;
        padding: 24px 28px;
    }

    .stat-divider {
        width: 60%;
        height: 1px;
    }

    .landing-hero-visual {
        height: 400px;
        margin-top: 60px;
    }

    .hero-floating-card {
        transform: scale(0.85);
    }

    .hero-floating-card.card-1 { top: 5%; right: -2%; }
    .hero-floating-card.card-2 { bottom: 10%; left: -5%; }
    .hero-floating-card.card-3 { top: 30%; left: -8%; }

    .billing-toggle {
        flex-direction: column;
        gap: 8px;
        padding: 8px;
        width: 100%;
        max-width: 320px;
    }

    .toggle-option {
        width: 100%;
        justify-content: center;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .steps-grid {
        gap: 48px;
    }

    .step-card {
        grid-template-columns: 60px 1fr;
        gap: 20px;
    }

    .step-number {
        width: 60px;
        height: 60px;
        font-size: 1.8rem;
    }

    .step-visual {
        grid-column: 1 / -1;
        margin-top: 20px;
    }

    .proof-content {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 36px;
        text-align: center;
    }

    .proof-mascot {
        margin: 0 auto;
    }

    .pricing-cards {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .pricing-featured {
        transform: scale(1);
    }

    .pricing-featured:hover {
        transform: translateY(-6px);
    }

    .pricing-note {
        flex-direction: column;
        padding: 20px 24px;
    }
}

@media (max-width: 480px) {
    .landing-container {
        padding: 0 20px;
    }

    .landing-hero {
        padding: 60px 0 40px;
    }

    .landing-hero-badge {
        font-size: 0.8rem;
        padding: 6px 16px;
    }

    .landing-cta-group {
        flex-direction: column;
        width: 100%;
    }

    .landing-cta-group .sb-btn {
        width: 100%;
    }

    .landing-trust-line {
        flex-direction: column;
        gap: 8px;
    }

    .trust-separator {
        display: none;
    }

    .landing-hero-visual {
        height: 320px;
        margin-top: 48px;
    }

    .hero-floating-card {
        display: none;
    }

    .landing-features,
    .landing-how,
    .landing-social-proof,
    .landing-pricing,
    .landing-final-cta {
        padding: 60px 0;
    }

    .section-header {
        margin-bottom: 48px;
    }

    .feature-card {
        padding: 28px 24px;
    }

    .step-card {
        grid-template-columns: 1fr;
    }

    .step-number {
        margin: 0 auto 20px;
    }

    .proof-content {
        padding: 28px 24px;
        gap: 24px;
    }

    .proof-mascot {
        width: 120px;
    }

    .pricing-card {
        padding: 32px 24px;
    }

    .cta-mascot {
        width: 100px;
    }
}

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   END DARK LANDING PAGE STYLES
   ============================================================ */

/* ============================================================
   LIGHT LANDING PAGE  (mirrors dark layout, light palette)
   ============================================================ */

.landing-light {
    background: #F8FAFC;
    color: #1B2430;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ── Hero background ── */
.landing-light .landing-hero-bg {
    background:
        radial-gradient(circle at 25% 20%, rgba(37, 99, 235, 0.07) 0%, transparent 50%),
        radial-gradient(circle at 75% 80%, rgba(110, 201, 255, 0.06) 0%, transparent 50%),
        linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
}

.landing-light .landing-hero-bg::before {
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(37, 99, 235, 0.018) 2px,
            rgba(37, 99, 235, 0.018) 4px
        );
    opacity: 0.6;
}

/* ── Hero text & badge ── */
.landing-light .landing-hero-badge {
    background: rgba(37, 99, 235, 0.07);
    border-color: rgba(37, 99, 235, 0.22);
    color: #2563EB;
}

.landing-light .landing-hero-title { color: #1B2430; }
.landing-light .landing-hero-subtitle { color: #475569; }

/* ── Stats bar ── */
.landing-light .landing-stats {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #E2E8F0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.landing-light .stat-label { color: #64748B; }
.landing-light .stat-divider { background: #E2E8F0; }

/* ── Trust line ── */
.landing-light .landing-trust-line { color: #64748B; }
.landing-light .trust-separator { opacity: 0.35; }

/* ── Buttons ── */
.landing-light .sb-btn-outline {
    background: rgba(255, 255, 255, 0.85);
    color: #1B2430;
    border-color: rgba(0, 0, 0, 0.12);
}

.landing-light .sb-btn-outline:hover {
    background: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.18);
}

/* ── Video placeholder ── */
.landing-light .hero-video-wrapper {
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.07);
}

.landing-light .hero-video-placeholder {
    background: linear-gradient(135deg, #F1F5F9 0%, #E9EFF7 100%);
}

.landing-light .hero-video-placeholder:hover {
    background: linear-gradient(135deg, #E9EFF7 0%, #DDE6F0 100%);
}

.landing-light .hero-video-text { color: #1B2430; }

/* ── Hero window ── */
.landing-light .hero-window {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.12);
}

.landing-light .window-header {
    background: #F8FAFC;
    border-bottom: 1px solid #E2E8F0;
}

.landing-light .window-title { color: #64748B; }
.landing-light .window-content { background: #F1F5F9; }

/* ── Floating cards ── */
.landing-light .hero-floating-card {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.09);
}

.landing-light .floating-label { color: #64748B; }
.landing-light .floating-value { color: #1B2430; }

/* ── Section headers ── */
.landing-light .section-title { color: #1B2430; }
.landing-light .section-subtitle { color: #475569; }

/* ── Testimonials ── */
.landing-light .landing-testimonials {
    background:
        radial-gradient(circle at 30% 50%, rgba(110, 201, 255, 0.05) 0%, transparent 50%),
        #F8FAFC;
}

.landing-light .testimonial-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.landing-light .testimonial-card:hover {
    border-color: rgba(37, 99, 235, 0.28);
    box-shadow: 0 12px 40px rgba(37, 99, 235, 0.09);
}

.landing-light .testimonial-featured {
    background: rgba(37, 99, 235, 0.03);
    border-color: rgba(37, 99, 235, 0.18);
}

.landing-light .testimonial-text,
.landing-light .testimonial-text-short { color: #334155; }

.landing-light .testimonial-video { background: #FFFFFF; border-color: #E2E8F0; }

.landing-light .testimonial-video-wrapper {
    background: #000;
    border: none;
}

.landing-light .testimonial-play-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 45%);
}

.landing-light .testimonial-play-overlay.playing {
    background: transparent;
}

.landing-light .testimonial-play-overlay.playing:hover {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.25) 0%, transparent 35%);
}

.landing-light .testimonial-video-placeholder {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, transparent 100%), #F1F5F9;
}

.landing-light .testimonial-video-placeholder:hover {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.09) 0%, transparent 100%), #E9EEF5;
}

.landing-light .author-name { color: #1B2430; }
.landing-light .author-publication { color: #64748B; }

/* ── Billing toggle ── */
.landing-light .billing-toggle {
    background: rgba(241, 245, 249, 0.95);
    border-color: #E2E8F0;
}

.landing-light .toggle-option { color: #64748B; }

.landing-light .toggle-option:not(.active):hover {
    color: #1B2430;
    background: rgba(0, 0, 0, 0.04);
}

/* ── Pricing note ── */
.landing-light .pricing-note {
    background: rgba(34, 197, 94, 0.06);
    border-color: rgba(34, 197, 94, 0.22);
    color: #1B2430;
}

/* ── Features section ── */
.landing-light .landing-features { background: #FFFFFF; }

.landing-light .feature-card {
    background: #F8FAFC;
    border-color: #E2E8F0;
}

.landing-light .feature-card:hover {
    border-color: rgba(37, 99, 235, 0.25);
    box-shadow: 0 12px 40px rgba(37, 99, 235, 0.09);
}

.landing-light .feature-highlight {
    background: rgba(37, 99, 235, 0.03);
    border-color: rgba(37, 99, 235, 0.16);
}

.landing-light .feature-title { color: #1B2430; }
.landing-light .feature-description { color: #475569; }

.landing-light .feature-image {
    background: #F1F5F9;
    border-color: #E2E8F0;
}

/* ── How it works ── */
.landing-light .landing-how {
    background:
        radial-gradient(circle at 50% 20%, rgba(110, 201, 255, 0.05) 0%, transparent 50%),
        #F8FAFC;
}

.landing-light .step-title { color: #1B2430; }
.landing-light .step-description { color: #475569; }

.landing-light .step-visual {
    background: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

/* ── Social proof ── */
.landing-light .landing-social-proof { background: #FFFFFF; }

.landing-light .proof-content {
    background: #F8FAFC;
    border-color: #E2E8F0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.landing-light .proof-title { color: #1B2430; }
.landing-light .proof-description { color: #475569; }

.landing-light .proof-metric {
    background: rgba(37, 99, 235, 0.04);
    border-color: rgba(37, 99, 235, 0.1);
}

.landing-light .metric-text { color: #1B2430; }

/* ── Pricing section ── */
.landing-light .landing-pricing {
    background:
        radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.04) 0%, transparent 60%),
        #F8FAFC;
}

.landing-light .pricing-card {
    background: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.landing-light .pricing-card:hover {
    border-color: rgba(37, 99, 235, 0.25);
    box-shadow: 0 16px 48px rgba(37, 99, 235, 0.1);
}

.landing-light .pricing-featured {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.06) 0%, #FFFFFF 100%);
    border: 2px solid rgba(37, 99, 235, 0.35);
}

.landing-light .pricing-header { border-bottom-color: #E2E8F0; }
.landing-light .pricing-plan { color: #1B2430; }
.landing-light .price-amount { color: #1B2430; }
.landing-light .price-period { color: #64748B; }
.landing-light .pricing-description { color: #64748B; }
.landing-light .feature-item { color: #334155; }
.landing-light .feature-item.disabled { color: #94A3B8; }

.landing-light .pricing-cta-secondary {
    background: #F1F5F9;
    color: #1B2430;
    border-color: #E2E8F0;
}

.landing-light .pricing-cta-secondary:hover {
    background: #E8EEF6;
    border-color: #CBD5E1;
}

/* ── Start Free section ── */
.landing-start-free {
    padding: 100px 0;
    background:
        radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.08) 0%, transparent 60%),
        #0C0E18;
    text-align: center;
}

.start-free-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sb-accent);
    background: rgba(37, 99, 235, 0.12);
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-radius: 100px;
    padding: 4px 14px;
    margin-bottom: 20px;
}

.start-free-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: #F5F7FB;
    margin-bottom: 16px;
    line-height: 1.2;
}

.start-free-subtitle {
    font-size: 1.1rem;
    color: rgba(245, 247, 251, 0.65);
    margin-bottom: 36px;
    line-height: 1.7;
}

.start-free-cta {
    font-size: 1.1rem !important;
    padding: 16px 36px !important;
    margin-bottom: 48px;
    display: inline-block;
}

.start-free-note {
    font-size: 0.875rem;
    color: rgba(245, 247, 251, 0.45);
    margin-top: 24px;
}

/* Light theme overrides for start-free */
.landing-light .landing-start-free {
    background:
        radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.05) 0%, transparent 60%),
        #F8FAFC;
}

.landing-light .start-free-title { color: #1B2430; }
.landing-light .start-free-subtitle { color: #475569; }
.landing-light .start-free-note { color: #64748B; }

/* ── FAQ section ── */
.landing-faq {
    padding: 100px 0;
    background: #0C0E18;
}

.faq-list {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.faq-item:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.faq-question {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 4px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #F5F7FB;
    text-align: left;
    transition: color 0.2s ease;
}

.faq-question:hover {
    color: var(--sb-accent);
}

.faq-icon {
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--sb-accent);
    flex-shrink: 0;
    line-height: 1;
    transition: transform 0.25s ease;
}

.faq-open .faq-icon {
    transform: rotate(0deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.25s ease;
}

.faq-answer p {
    font-size: 0.97rem;
    line-height: 1.75;
    color: rgba(245, 247, 251, 0.65);
    padding-bottom: 22px;
    margin: 0;
}

.faq-open .faq-answer {
    max-height: 400px;
}

/* Light theme for FAQ */
.landing-light .landing-faq {
    background: #F8FAFC;
}

.landing-light .faq-item {
    border-color: #E2E8F0;
}

.landing-light .faq-item:first-child {
    border-color: #E2E8F0;
}

.landing-light .faq-question {
    color: #1B2430;
}

.landing-light .faq-answer p {
    color: #475569;
}

/* ── Creators section ── */
.landing-creators {
    padding: 100px 0;
    background: #0C0E18;
}

.creators-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    max-width: 900px;
    margin: 0 auto;
}

.creator-card {
    text-align: center;
    padding: 40px 32px;
    border-radius: 20px;
    background: rgba(20, 22, 38, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}

.creator-card:hover {
    transform: translateY(-4px);
    border-color: rgba(37, 99, 235, 0.25);
    box-shadow: 0 16px 48px rgba(37, 99, 235, 0.1);
}

.creator-photo {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 24px;
    border: 3px solid rgba(37, 99, 235, 0.4);
    box-shadow: 0 8px 32px rgba(37, 99, 235, 0.2);
}

.creator-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.creator-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 6px;
    color: #F5F7FB;
}

.creator-role {
    font-size: 0.95rem;
    color: #2563EB;
    font-weight: 600;
    margin: 0 0 20px;
}

.creator-publication {
    font-size: 0.85rem;
    color: #B5B9C9;
    margin: 0 0 4px;
}

.creator-publication a {
    color: #2563EB;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.creator-publication a:hover {
    color: #FF7A1A;
}

.creator-bio {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #B5B9C9;
    margin: 0;
}

.landing-light .landing-creators {
    background: #F8FAFC;
}

.landing-light .creator-card {
    background: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.landing-light .creator-card:hover {
    border-color: rgba(37, 99, 235, 0.25);
    box-shadow: 0 16px 48px rgba(37, 99, 235, 0.1);
}

.landing-light .creator-photo {
    border-color: rgba(37, 99, 235, 0.35);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12);
}

.landing-light .creator-name { color: #1B2430; }
.landing-light .creator-bio { color: #475569; }

/* ── Final CTA ── */
.landing-light .landing-final-cta {
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 50%, #F1F5F9 100%);
}

.landing-light .cta-title { color: #1B2430; }
.landing-light .cta-subtitle { color: #475569; }
.landing-light .cta-note { color: #64748B; }

/* ── Footer ── */
.landing-light .sb-footer {
    background: #F1F5F9 !important;
    border-top: 1px solid #E2E8F0 !important;
}

.landing-light .sb-footer div { color: #64748B; }

/* ============================================================
   END LIGHT LANDING PAGE STYLES
   ============================================================ */

/* ============================================================
   REGISTRATION PAGE STYLES (Dark Theme)
   ============================================================ */

.registration-page {
    min-height: 100vh;
}

.registration-hero {
    position: relative;
    padding: 100px 0 120px;
    overflow: hidden;
}

.registration-header {
    text-align: center;
    margin-bottom: 60px;
}

.registration-mascot {
    width: 120px;
    height: auto;
    margin: 0 auto 32px;
    filter: drop-shadow(0 12px 32px rgba(37, 99, 235, 0.4));
    animation: bounce-subtle 3s ease-in-out infinite;
}

.registration-title {
    font-size: clamp(2.4rem, 5vw, 3.2rem);
    line-height: 1.2;
    font-weight: 800;
    margin: 0 0 20px;
    color: #F5F7FB;
}

.registration-subtitle {
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    line-height: 1.6;
    color: #B5B9C9;
    max-width: 560px;
    margin: 0 auto;
}

.registration-card {
    background: rgba(20, 22, 38, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 48px;
    backdrop-filter: blur(20px);
    box-shadow: 0 24px 60px -15px rgba(0, 0, 0, 0.5);
    max-width: 720px;
    margin: 0 auto 40px;
}

.registration-step {
    margin-bottom: 48px;
}

.registration-step:last-child {
    margin-bottom: 0;
}

.step-header {
    text-align: center;
    margin-bottom: 36px;
}

.step-badge {
    display: inline-block;
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.3);
    color: #FF7A1A;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

.step-title {
    font-size: 2rem;
    font-weight: 700;
    color: #F5F7FB;
    margin: 0 0 12px;
}

.step-description {
    font-size: 1.05rem;
    color: #B5B9C9;
    margin: 0;
}

.step-hint {
    font-size: 0.95rem;
    color: #B5B9C9;
    margin: 8px 0 0;
    font-style: italic;
}

/* Form Styles */
.form-group {
    margin-bottom: 24px;
}

.form-label {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: #F5F7FB;
    margin-bottom: 8px;
}

.form-input {
    width: 100%;
    padding: 14px 16px;
    background: rgba(20, 22, 38, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #F5F7FB;
    font-size: 1rem;
    font-family: 'Nunito', sans-serif;
    transition: all 0.3s ease;
}

.form-input::placeholder {
    color: #6B7082;
}

.form-input:focus {
    outline: none;
    border-color: rgba(37, 99, 235, 0.5);
    background: rgba(20, 22, 38, 0.8);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 16px;
    font-size: 1.2rem;
    pointer-events: none;
}

.input-with-icon .form-input {
    padding-left: 48px;
}

.code-input {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 8px;
    padding: 20px;
}

.form-checkbox {
    display: flex;
    align-items: start;
    gap: 12px;
    margin-bottom: 28px;
}

.form-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: #2563EB;
    cursor: pointer;
}

.form-checkbox label {
    flex: 1;
    font-size: 0.95rem;
    color: #B5B9C9;
    line-height: 1.5;
    cursor: pointer;
}

/* Buttons */
.btn-primary-large {
    width: 100%;
    padding: 18px 32px;
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.15rem;
    font-weight: 700;
    font-family: 'Nunito', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px -8px rgba(37, 99, 235, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.btn-primary-large:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -8px rgba(37, 99, 235, 0.6);
}

.btn-primary-large:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-text {
    background: transparent;
    border: none;
    color: #B5B9C9;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: 'Nunito', sans-serif;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.btn-text:hover {
    color: #2563EB;
    background: rgba(37, 99, 235, 0.1);
}

.btn-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Loading State */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px;
    background: rgba(20, 22, 38, 0.4);
    border-radius: 16px;
    margin: 24px 0;
}

.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top-color: #2563EB;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.loading-text {
    font-size: 1.05rem;
    color: #F5F7FB;
    font-weight: 600;
}

.loading-hint {
    font-size: 0.9rem;
    color: #B5B9C9;
    font-style: italic;
}

/* Alerts */
.alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    font-size: 0.95rem;
}

.alert-error {
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.3);
    color: #FCA5A5;
}

.alert-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
}

/* Preview Section */
.preview-section {
    margin: 32px 0;
    padding: 28px;
    background: rgba(34, 197, 94, 0.05);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 16px;
}

.preview-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    font-size: 1.05rem;
    color: #22C55E;
    font-weight: 600;
}

.check-icon {
    font-size: 1.5rem;
    background: rgba(34, 197, 94, 0.2);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-grid {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 28px;
    align-items: start;
}

.preview-images {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.preview-pub-image, .preview-author-image {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.preview-fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Code Actions */
.code-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
}

.action-divider {
    color: #6B7082;
}

/* Registration Trust */
.registration-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
    padding: 24px;
    background: rgba(20, 22, 38, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    margin-top: 40px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    color: #F5F7FB;
}

.trust-check {
    color: #22C55E;
    font-weight: 700;
    font-size: 1.2rem;
}

/* Responsive Registration */
@media (max-width: 768px) {
    .registration-card {
        padding: 32px 24px;
    }

    .preview-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .preview-images {
        flex-direction: row;
        justify-content: center;
    }

    .preview-pub-image, .preview-author-image {
        width: 100px;
        height: 100px;
    }

    .registration-trust {
        flex-direction: column;
        gap: 16px;
    }

    .code-actions {
        flex-direction: column;
        gap: 8px;
    }

    .action-divider {
        display: none;
    }
}

@media (max-width: 480px) {
    .registration-card {
        padding: 24px 20px;
    }

    .registration-mascot {
        width: 90px;
    }

    .code-input {
        font-size: 1.5rem;
        letter-spacing: 4px;
    }
}

/* ============================================================
   END REGISTRATION PAGE STYLES
   ============================================================ */

/* ============================================================
   LOGIN PAGE STYLES (Dark Theme)
   ============================================================ */

.login-page {
    min-height: 100vh;
}

.login-hero {
    position: relative;
    padding: 100px 0 120px;
    overflow: hidden;
}

.login-header {
    text-align: center;
    margin-bottom: 60px;
}

.login-mascot {
    width: 120px;
    height: auto;
    margin: 0 auto 32px;
    filter: drop-shadow(0 12px 32px rgba(37, 99, 235, 0.4));
    animation: bounce-subtle 3s ease-in-out infinite;
}

.login-title {
    font-size: clamp(2.4rem, 5vw, 3.2rem);
    line-height: 1.2;
    font-weight: 800;
    margin: 0 0 20px;
    color: #F5F7FB;
}

.login-subtitle {
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    line-height: 1.6;
    color: #B5B9C9;
    max-width: 520px;
    margin: 0 auto;
}

.login-card {
    background: rgba(20, 22, 38, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 48px;
    backdrop-filter: blur(20px);
    box-shadow: 0 24px 60px -15px rgba(0, 0, 0, 0.5);
    max-width: 560px;
    margin: 0 auto 32px;
}

.login-step {
    /* Container for form content */
}

.login-footer {
    text-align: center;
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.login-footer p {
    color: #B5B9C9;
    margin: 0 0 12px;
    font-size: 0.95rem;
}

.link-primary {
    color: #2563EB;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid rgba(37, 99, 235, 0.3);
    transition: all 0.2s ease;
    font-size: 1.05rem;
}

.link-primary:hover {
    border-bottom-color: #2563EB;
    color: #FF7A1A;
}

.login-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    padding: 24px;
    background: rgba(20, 22, 38, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    margin-top: 32px;
}

/* Responsive Login */
@media (max-width: 768px) {
    .login-card {
        padding: 32px 24px;
    }

    .login-trust {
        flex-direction: column;
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .login-card {
        padding: 24px 20px;
    }

    .login-mascot {
        width: 90px;
    }

    .code-input {
        font-size: 1.5rem;
        letter-spacing: 4px;
    }
}

/* ============================================================
   END LOGIN PAGE STYLES
   ============================================================ */

/* ============================================================
   LIGHT THEME OVERRIDES – Login & Registration Pages
   ============================================================ */

.collab-landing.light .landing-hero-bg {
    display: none;
}

.collab-landing.light .login-hero,
.collab-landing.light .registration-hero {
    background: linear-gradient(135deg, #f8fafc, #eef4ff 55%, #e9f3ff);
}

.collab-landing.light .login-title,
.collab-landing.light .registration-title {
    color: #1a1a2e;
}

.collab-landing.light .login-subtitle,
.collab-landing.light .registration-subtitle {
    color: #555;
}

.collab-landing.light .login-card,
.collab-landing.light .registration-card {
    background: #fff;
    border: 1px solid #e8e8f0;
    box-shadow: 0 2px 20px rgba(0, 0, 6, 0.06);
    backdrop-filter: none;
}

.collab-landing.light .login-footer {
    border-top-color: #e8e8f0;
}

.collab-landing.light .login-footer p {
    color: #555;
}

.collab-landing.light .login-trust,
.collab-landing.light .registration-trust {
    background: rgba(248, 250, 252, 0.9);
    border-color: #e8e8f0;
}

.collab-landing.light .trust-item {
    color: #1a1a2e;
}

.collab-landing.light .step-title {
    color: #1a1a2e;
}

.collab-landing.light .step-description,
.collab-landing.light .step-hint {
    color: #555;
}

.collab-landing.light .step-badge {
    background: rgba(108, 99, 255, 0.08);
    border-color: rgba(108, 99, 255, 0.2);
    color: #6c63ff;
}

.collab-landing.light .form-label {
    color: #1a1a2e;
}

.collab-landing.light .form-input {
    background: #fff;
    border: 1px solid #e0e0e8;
    color: #1a1a2e;
}

.collab-landing.light .form-input::placeholder {
    color: #aaa;
}

.collab-landing.light .form-input:focus {
    background: #fff;
    border-color: rgba(108, 99, 255, 0.5);
    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1);
}

.collab-landing.light .form-checkbox label {
    color: #555;
}

.collab-landing.light .btn-text {
    color: #555;
}

.collab-landing.light .btn-text:hover {
    color: #6c63ff;
    background: rgba(108, 99, 255, 0.08);
}

.collab-landing.light .action-divider {
    color: #aaa;
}

.collab-landing.light .loading-state {
    background: rgba(241, 245, 249, 0.8);
}

.collab-landing.light .loading-text {
    color: #1a1a2e;
}

.collab-landing.light .loading-hint {
    color: #555;
}

.collab-landing.light .preview-section {
    background: rgba(34, 197, 94, 0.04);
    border-color: rgba(34, 197, 94, 0.2);
}

.collab-landing.light .preview-pub-image,
.collab-landing.light .preview-author-image {
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 16px rgba(0, 40, 90, 0.1);
}

.collab-landing.light .registration-mascot,
.collab-landing.light .login-mascot {
    filter: drop-shadow(0 12px 32px rgba(108, 99, 255, 0.25));
}

.collab-landing.light .sb-footer {
    background: #f8fafc;
    border-top: 1px solid #e8e8f0;
}

.collab-landing.light .sb-footer > div {
    color: #777 !important;
}

.collab-landing.light .sb-footer .sb-link:hover {
    color: #6c63ff !important;
}

/* ============================================================
   END LIGHT THEME OVERRIDES – Login & Registration Pages
   ============================================================ */


/* (Dead global .mud-button-root button-hover + primary-filled-sizing rules removed — buttons are SbButton now.) */

.collab-tabs {
    gap: .25rem;
    align-items: flex-end;
}

/* Tab-like nav links */
.collab-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-top-left-radius: .6rem;
    border-top-right-radius: .6rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    color: var(--sb-ink-soft);
    text-decoration: none;
    min-width: 9rem;
    height: 40px;
    font-weight: 600;
    transition: color .15s ease, background-color .2s ease, transform .15s ease, box-shadow .2s ease;
    background-color: rgba(0, 0, 0, 0.05);
    margin-bottom: -16px;
}

    /* Keep visuals flat with the appbar, and create subtle bottom overlap */
    .collab-tab::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px; /* sit exactly on appbar bottom line */
        height: 2px;
        background: transparent;
        transition: background-color .2s ease;
    }

    /* Hover animation: gentle raise and underline glow */
    .collab-tab:hover:not(.active) {
        background-color: rgba(255, 255, 255, 0.07);
        color: var(--sb-ink);
        transform: translateY(-1px);
        box-shadow: 0 3px 10px rgba(0,0,0,.25);
    }

    .collab-tab:hover::after {
        background: var(--sb-accent);
    }

/*.collab-tab:active::after {
        background: var(--sb-accent);
    }*/


/* (Dead .mud-nav-link.collab-tab.* active-tab + .mud-navmenu rules removed — collab tabs no longer use MudNavLink.) */

.sb-content {
    margin-top: 36px;
}

/* (Dead .subs-badges .mud-chip, .mud-chart apexcharts-tooltip, and .queue-menu .mud-tab* rules removed —
   chips/charts/tabs are SbChip/SbChart/SbTabs now.) */

/* ═══════════════════════════════════════════════════════════════
   StackBuddy Chat Panel
   (global — scoped .razor.css not picked up by the server bundle)
   ═══════════════════════════════════════════════════════════════ */

/* Panel — fixed, bottom-right, above the FAB column */
.sb-chat-panel {
    /* Anchored to the .sb-fab-dock (its positioned parent) so it always opens
       directly above the AI bubble, right edges aligned. */
    position: absolute;
    bottom: calc(100% + 14px);
    right: 0;
    width: 360px;
    max-height: 520px;
    display: flex;
    flex-direction: column;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,.22), 0 4px 12px rgba(0,0,0,.12);
    background: var(--sb-paper);
    z-index: 1199;
    animation: sbPanelIn .22s cubic-bezier(.34,1.3,.64,1) both;
    transform-origin: bottom right;
}

@keyframes sbPanelIn {
    from { opacity: 0; transform: translateY(14px) scale(.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1);   }
}

/* Header */
.sb-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 12px 16px;
    background: linear-gradient(135deg, var(--sb-accent) 0%, color-mix(in srgb, var(--sb-accent) 75%, #6d28d9) 100%);
    flex-shrink: 0;
}

.sb-chat-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sb-chat-header-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(255,255,255,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sb-chat-header-name {
    display: block;
    color: white;
    font-weight: 600;
    font-size: .875rem;
    line-height: 1.2;
}

.sb-chat-header-sub {
    display: block;
    color: rgba(255,255,255,.65);
    font-size: .7rem;
    line-height: 1.2;
}

/* Messages area */
.sb-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 14px 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
}

.sb-chat-messages::-webkit-scrollbar { width: 4px; }
.sb-chat-messages::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: var(--sb-hairline);
}

/* Empty state */
.sb-chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px 12px 8px;
    gap: 10px;
    color: var(--sb-ink-soft);
}

.sb-chat-empty-text {
    font-size: .82rem;
    line-height: 1.55;
    margin: 0;
    max-width: 260px;
}

.sb-chat-suggestions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin-top: 4px;
}

.sb-chat-hint {
    background: var(--sb-paper-soft, rgba(0,0,0,.04));
    border: 1px solid var(--sb-hairline);
    border-radius: 10px;
    padding: 7px 12px;
    font-size: .78rem;
    color: var(--sb-ink);
    cursor: pointer;
    text-align: left;
    transition: background .15s, border-color .15s;
    font-family: inherit;
}

.sb-chat-hint:hover {
    background: color-mix(in srgb, var(--sb-accent) 10%, transparent);
    border-color: var(--sb-accent);
    color: var(--sb-accent);
}

/* Message rows */
.sb-chat-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    animation: sbMsgIn .18s ease both;
}

.sb-chat-row--user { justify-content: flex-end; }
.sb-chat-row--bot  { justify-content: flex-start; }

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

/* Bot avatar */
.sb-chat-bot-avatar {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--sb-accent), color-mix(in srgb, var(--sb-accent) 70%, #6d28d9));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Bubbles */
.sb-chat-bubble {
    max-width: 252px;
    padding: 9px 13px;
    border-radius: 16px;
    font-size: .825rem;
    line-height: 1.5;
    word-break: break-word;
}

.sb-chat-bubble--user {
    background: var(--sb-accent);
    color: white;
    border-bottom-right-radius: 4px;
}

.sb-chat-bubble--bot {
    background: var(--sb-paper-soft, rgba(0,0,0,.05));
    color: var(--sb-ink);
    border-bottom-left-radius: 4px;
    border: 1px solid var(--sb-hairline);
}

/* Typing indicator */
.sb-chat-bubble--typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    min-width: 52px;
}

.sb-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sb-ink-soft);
    opacity: .6;
    animation: sbDotBounce 1.2s ease-in-out infinite;
}

.sb-dot:nth-child(1) { animation-delay: 0s;    }
.sb-dot:nth-child(2) { animation-delay: .18s;  }
.sb-dot:nth-child(3) { animation-delay: .36s;  }

@keyframes sbDotBounce {
    0%, 60%, 100% { transform: translateY(0);  opacity: .4; }
    30%            { transform: translateY(-5px); opacity: 1; }
}

/* Feedback banner */
.sb-chat-feedback-banner {
    display: flex;
    align-items: center;
    gap: 6px;
    background: color-mix(in srgb, var(--sb-accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--sb-accent) 30%, transparent);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: .77rem;
    color: var(--sb-ink-soft);
    animation: sbMsgIn .2s ease both;
}

.sb-chat-feedback-btn {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--sb-accent);
    font-weight: 600;
    font-size: .77rem;
    cursor: pointer;
    white-space: nowrap;
    padding: 0;
    font-family: inherit;
    transition: opacity .15s;
}

.sb-chat-feedback-btn:hover { opacity: .75; }

/* Input area */
.sb-chat-input-area {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px 12px;
    border-top: 1px solid var(--sb-hairline);
    background: var(--sb-paper);
    flex-shrink: 0;
}

.sb-chat-textarea {
    flex: 1;
    resize: none;
    border: 1px solid var(--sb-hairline);
    border-radius: 12px;
    padding: 9px 12px;
    font-size: .825rem;
    font-family: inherit;
    color: var(--sb-ink);
    background: var(--sb-paper-soft, rgba(0,0,0,.03));
    line-height: 1.45;
    max-height: 100px;
    overflow-y: auto;
    outline: none;
    transition: border-color .15s;
}

.sb-chat-textarea:focus {
    border-color: var(--sb-accent);
    background: var(--sb-paper);
}

.sb-chat-textarea:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Send button */
.sb-chat-send {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    background: var(--sb-accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, transform .1s, opacity .15s;
}

.sb-chat-send:hover:not(:disabled) {
    filter: brightness(1.1);
    transform: scale(1.06);
}

.sb-chat-send:active:not(:disabled) { transform: scale(.95); }

.sb-chat-send--disabled {
    opacity: .35;
    cursor: not-allowed;
}

/* Dark mode */
:root.dark .sb-chat-bubble--bot {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.1);
}

:root.dark .sb-chat-hint {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.1);
}

:root.dark .sb-chat-textarea {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.12);
}

/* Inline links inside bot bubbles */
.sb-chat-link {
    color: var(--sb-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
    transition: opacity .15s;
}

.sb-chat-link:hover { opacity: .75; }

/* Beta pill in header */
.sb-chat-beta-pill {
    display: inline-block;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.9);
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 20px;
    padding: 1px 7px;
    line-height: 1.6;
    vertical-align: middle;
}

/* ===== Substack Note Preview Card (moved from isolated CSS) ===== */

.snp-shell {
    width: 100%;
    min-width: 0;
    max-width: 460px;
    max-height: 72vh;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    box-sizing: border-box;
    padding: 10px;
    background: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 20px;
    color: #15181c;
}

/* Dark theme: the preview card shares the global .snp-* text styles (which go
   light on dark), so the shell itself must go dark too — otherwise it's light
   text on a white card. Matches the inspiration note cards. */
.sb-dark .snp-shell,
[data-theme="dark"] .snp-shell {
    background: #11203A;
    color: #D6DAE0;
}
.sb-dark .snp-close-btn,
[data-theme="dark"] .snp-close-btn { color: #8C97A8; }
.sb-dark .snp-close-btn:hover,
[data-theme="dark"] .snp-close-btn:hover { color: #EDF1F7; }
.sb-dark .snp-avatar-fallback,
[data-theme="dark"] .snp-avatar-fallback { background: #243756; color: #EDF1F7; }

.snp-close-btn {
    position: absolute;
    top: 4px;
    right: 6px;
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 18px;
    line-height: 1;
    padding: 4px;
    cursor: pointer;
}

.snp-close-btn:hover {
    color: #6b7280;
}

.snp-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.snp-avatar-wrap {
    flex-shrink: 0;
}

.snp-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: #d5d9df;
}

.snp-avatar-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: #d5d9df;
}

.snp-avatar-fallback {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d5d9df;
    color: #15181c;
    font-weight: 600;
    font-size: 14px;
}

.snp-author-col {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
}

.snp-author-row {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 15px;
    line-height: 20px;
    flex-wrap: nowrap;
}

.snp-author-name {
    font-weight: 500;
    color: #000;
    font-size: 15px;
    line-height: 20px;
    white-space: nowrap;
}

.snp-time {
    font-size: 13px;
    color: #6b7280;
    white-space: nowrap;
    line-height: 20px;
}

.snp-publication {
    font-size: 13px;
    color: #6b7280;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.snp-body {
    font-size: 15px;
    line-height: 20px;
    color: #15181c;
    margin-bottom: 4px;
}

.snp-body p {
    margin: 0 0 8px;
}

.snp-body p:last-child {
    margin-bottom: 0;
}

.snp-body strong,
.snp-body b {
    font-weight: 700;
}

.snp-body em,
.snp-body i {
    font-style: italic;
}

.snp-body a {
    color: #1773d1;
    text-decoration: underline;
}

.snp-body blockquote {
    margin: 8px 0;
    padding: 4px 12px;
    border-left: 3px solid #d1d5db;
    color: #6b7280;
}

.snp-body code {
    font-family: Consolas, "Courier New", monospace;
    background: #f3f4f6;
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 0.9em;
}

.snp-body pre {
    overflow-x: auto;
    background: #111827;
    color: #f9fafb;
    border-radius: 6px;
    padding: 10px 12px;
    margin: 8px 0;
}

.snp-body pre code {
    background: transparent;
    padding: 0;
}

.snp-attachment {
    display: block;
    width: 100%;
    max-height: 360px;
    object-fit: contain;
    border-radius: 8px;
    margin-bottom: 12px;
    background: #f3f4f6;
}

.snp-empty {
    color: #9ca3af;
    font-size: 14px;
}

.snp-actions {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 6px;
    padding-top: 4px;
}

.snp-actions-left {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 0;
}

.snp-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    height: 32px;
    min-width: 32px;
    padding: 0 6px;
    border-radius: 100px;
    border: none;
    background: transparent;
    cursor: default !important;
    pointer-events: none;
    color: rgb(119, 119, 119);
    font-size: 13px;
    font-family: inherit;
    line-height: 20px;
    outline: none;
    user-select: none;
}

.snp-action-btn svg {
    flex-shrink: 0;
}

/* Interactive variant — the base class is decorative (pointer-events:none !important above),
   which silently swallowed clicks on the Radar's heart/diamond. Cards that wire a real
   handler add --live to become clickable again. */
.snp-action-btn--live {
    pointer-events: auto;
    cursor: pointer !important;
    transition: color .12s ease, background .12s ease;
}

.snp-action-btn--live:hover {
    background: rgba(224, 36, 94, 0.08);
    color: #e0245e;
}

.snp-action-btn--live.snp-save:hover {
    background: var(--sb-paper-soft, rgba(0,0,0,0.05));
    color: var(--sb-accent-ink, var(--sb-accent));
}

.snp-action-count {
    font-size: 13px;
    color: rgb(119, 119, 119);
    line-height: 20px;
    margin-left: 4px;
}

/* ===== Inspiration Feed (Substack-style note cards) ===== */

.insp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    padding: 0;
}

/* Engagement Radar + Replies & Mentions: ONE wide column, like Substack's own activity
   feed (owner call after trying 2-col grid and masonry — mixed-height cards with reply
   composers read best as a single stream). */
.sb-engage-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* The note card's global 380px cap is for the Discover grid; in the single-column
   stream the cards must fill the section card, and the section itself is capped at a
   Substack-feed reading width so card and background always match — no dead space. */
.sb-engage-grid > .insp-note-card {
    max-width: none;
}

.sb-engage-section {
    max-width: 800px;
    margin: 0 auto;
}

.insp-note-card {
    position: relative;
    max-width: 380px;
    width: 100%;
    justify-self: stretch;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 20px;
    color: #15181c;
    transition: box-shadow 0.15s ease;
}

.insp-note-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}

/* ── Platform badge (top-right corner of note card) ──────────── */

.sb-platform-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    z-index: 1;
    pointer-events: none;
}

.sb-platform-badge svg {
    width: 13px;
    height: 13px;
}

.sb-platform-badge--substack {
    color: #2563EB;
}

.sb-platform-badge--linkedin {
    color: #0a66c2;
}

.insp-note-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.insp-card-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.insp-see-more {
    display: inline-block;
    margin-top: 4px;
    margin-bottom: 8px;
    font-size: 13px;
    color: #1773d1;
    cursor: pointer;
    user-select: none;
}

.insp-see-more:hover {
    text-decoration: underline;
}

/* ── Inspiration / generated note cards: dark theme ───────────────────
   These cards hardcode a light Substack look. In dark mode they'd glare
   as bright-white tiles, so re-skin them as dark cards with light text. */
.sb-dark .insp-note-card,
[data-theme="dark"] .insp-note-card {
    background: #11203A;
    border-color: #243756;
    color: #D6DAE0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.sb-dark .insp-note-card:hover,
[data-theme="dark"] .insp-note-card:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.sb-dark .snp-author-name,
[data-theme="dark"] .snp-author-name {
    color: #F3F6FB;
}

.sb-dark .snp-time,
.sb-dark .snp-publication,
.sb-dark .snp-empty,
[data-theme="dark"] .snp-time,
[data-theme="dark"] .snp-publication,
[data-theme="dark"] .snp-empty {
    color: #8C97A8;
}

.sb-dark .snp-body,
[data-theme="dark"] .snp-body {
    color: #D6DAE0;
}

.sb-dark .snp-body a,
[data-theme="dark"] .snp-body a {
    color: #93B4FF;
}

.sb-dark .snp-body blockquote,
[data-theme="dark"] .snp-body blockquote {
    border-left-color: #3A4D6E;
    color: #AEB8C7;
}

.sb-dark .snp-body code,
[data-theme="dark"] .snp-body code {
    background: rgba(255, 255, 255, 0.08);
}

.sb-dark .snp-attachment,
[data-theme="dark"] .snp-attachment {
    background: #0A1525;
}

.sb-dark .snp-action-btn,
.sb-dark .snp-action-count,
[data-theme="dark"] .snp-action-btn,
[data-theme="dark"] .snp-action-count {
    color: #8C97A8;
}

.sb-dark .sb-platform-badge,
[data-theme="dark"] .sb-platform-badge {
    background: rgba(10, 21, 37, 0.92);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.sb-dark .insp-card-actions,
[data-theme="dark"] .insp-card-actions {
    border-top-color: rgba(237, 241, 247, 0.10);
}

.sb-dark .insp-see-more,
[data-theme="dark"] .insp-see-more {
    color: #93B4FF;
}

.insp-note-images {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 8px 0;
    flex-wrap: wrap;
}

/* Inline note image preview (collab directory note cards) */
.insp-note-image {
    margin: 8px 0 2px;
    border-radius: 10px;
    overflow: hidden;
    max-width: 100%;
}
.insp-note-image img {
    display: block;
    width: 100%;
    max-height: 220px;
    object-fit: cover;
}

.insp-note-img-thumb {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.insp-note-img-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.insp-note-img-more {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
}

.insp-note-stats {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 0 4px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 13px;
    color: #6b7280;
    line-height: 20px;
    flex-wrap: wrap;
    gap: 4px;
}

.insp-note-stats-left {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.insp-stats-dot {
    color: #6b7280;
}

.insp-note-stats-right {
    color: #6b7280;
    white-space: nowrap;
}

/* ── Upgrade-to-Pro modal plan cards ────────────────────────────── */

@keyframes upgrade-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.upgrade-plans-row {
    display: flex;
    gap: 16px;
    align-items: stretch;
}

.upgrade-plan-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 24px 18px 18px;
    border-radius: 14px;
    border: 1.5px solid var(--sb-hairline, rgba(0,0,0,0.12));
    background: #f8f9fb;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
    position: relative;
    overflow: visible;
}

.upgrade-plan-card:hover {
    border-color: var(--sb-accent);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

/* Annual / best-value card */
.upgrade-plan-best {
    border: 2px solid transparent;
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-image:
        linear-gradient(var(--sb-paper), var(--sb-paper)),
        linear-gradient(135deg, #6366f1, #8b5cf6, #a78bfa, #6366f1);
    box-shadow: 0 4px 24px rgba(99,102,241,0.18), 0 0 0 1px rgba(99,102,241,0.10);
}

.upgrade-plan-best:hover {
    box-shadow: 0 8px 32px rgba(99,102,241,0.28), 0 0 0 1px rgba(99,102,241,0.2);
    transform: translateY(-3px);
}

/* "Best Value" badge */
.upgrade-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 10px;
    letter-spacing: 0.4px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(99,102,241,0.35);
    z-index: 2;
}

/* Annual price text */
.upgrade-price-shine {
    color: var(--sb-accent);
}

/* Shiny shimmer effect for the annual CTA button */
.upgrade-btn-shine {
    position: relative;
    overflow: hidden;
}

.upgrade-btn-shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255,255,255,0.25) 45%,
        rgba(255,255,255,0.4) 50%,
        rgba(255,255,255,0.25) 55%,
        transparent 80%
    );
    animation: upgrade-shimmer 3s ease-in-out infinite;
    pointer-events: none;
}

@media (max-width: 500px) {
    .upgrade-plans-row {
        flex-direction: column;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Article Preview – Substack-style rendering
   ═══════════════════════════════════════════════════════════════ */
.sb-article-preview {
    font-family: charter, 'Georgia', 'Cambria', 'Times New Roman', Times, serif;
    font-size: 1.125rem;
    line-height: 1.8;
    /* WYSIWYG preview of the published Substack article. In light mode it's a white
       "page"; in dark mode it becomes a dark reading surface (see the dark-theme
       block further down) so it doesn't glare against the dark app shell. */
    color: #242424;
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    max-width: 680px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem;
    max-height: 70vh;
    overflow-y: auto;
}

.sb-article-preview h1 {
    font-family: sohne, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 2rem 0 0.6rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.sb-article-preview h2 {
    font-family: sohne, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.625rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 2.25rem 0 0.5rem;
    line-height: 1.3;
    letter-spacing: -0.015em;
}

.sb-article-preview h3 {
    font-family: sohne, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.375rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 1.75rem 0 0.4rem;
    line-height: 1.35;
}

.sb-article-preview h4,
.sb-article-preview h5,
.sb-article-preview h6 {
    font-family: sohne, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 1.5rem 0 0.35rem;
}

.sb-article-preview p {
    margin: 0 0 1.25rem;
}

.sb-article-preview strong {
    font-weight: 700;
}

.sb-article-preview em {
    font-style: italic;
}

.sb-article-preview blockquote {
    border-left: 3px solid #242424;
    margin: 1.5rem 0;
    padding: 0.1rem 0 0.1rem 1.25rem;
    font-style: italic;
    color: #555;
}

.sb-article-preview blockquote p {
    margin-bottom: 0.75rem;
}

.sb-article-preview hr {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 2rem auto;
}

.sb-article-preview ul,
.sb-article-preview ol {
    margin: 0 0 1.25rem;
    padding-left: 1.75rem;
}

.sb-article-preview li {
    margin-bottom: 0.5rem;
}

.sb-article-preview code {
    background: rgba(0, 0, 0, 0.05);
    padding: 0.15em 0.4em;
    border-radius: 3px;
    font-size: 0.875em;
    font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
}

.sb-article-preview pre {
    background: #f7f7f7;
    padding: 1.25rem;
    border-radius: 4px;
    overflow-x: auto;
    margin: 1.5rem 0;
    border: 1px solid #e8e8e8;
}

.sb-article-preview pre code {
    background: none;
    padding: 0;
    font-size: 0.875rem;
}

.sb-article-preview a {
    color: #242424;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sb-article-preview a:hover {
    color: #000;
}

.sb-article-preview img {
    max-width: 100%;
    height: auto;
    margin: 1.5rem 0;
}

.sb-article-preview table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.sb-article-preview th,
.sb-article-preview td {
    border: 1px solid #e0e0e0;
    padding: 0.6rem 0.85rem;
    text-align: left;
}

.sb-article-preview th {
    font-weight: 700;
    background: #fafafa;
}

/* ── Article preview: dark-theme reading surface ──────────────────────
   The markup hardcodes light-mode colours, so dark mode needs explicit
   overrides. Mirrors how Substack's own reader looks in dark mode:
   near-black page, light-gray body, bright headings. */
.sb-dark .sb-article-preview,
[data-theme="dark"] .sb-article-preview {
    color: #D6DAE0;
    background: #11203A;
    border-color: #243756;
}

.sb-dark .sb-article-preview h1,
.sb-dark .sb-article-preview h2,
.sb-dark .sb-article-preview h3,
.sb-dark .sb-article-preview h4,
.sb-dark .sb-article-preview h5,
.sb-dark .sb-article-preview h6,
[data-theme="dark"] .sb-article-preview h1,
[data-theme="dark"] .sb-article-preview h2,
[data-theme="dark"] .sb-article-preview h3,
[data-theme="dark"] .sb-article-preview h4,
[data-theme="dark"] .sb-article-preview h5,
[data-theme="dark"] .sb-article-preview h6 {
    color: #F3F6FB;
}

.sb-dark .sb-article-preview blockquote,
[data-theme="dark"] .sb-article-preview blockquote {
    border-left-color: #5B8DEF;
    color: #AEB8C7;
}

.sb-dark .sb-article-preview hr,
[data-theme="dark"] .sb-article-preview hr {
    border-top-color: #243756;
}

.sb-dark .sb-article-preview code,
[data-theme="dark"] .sb-article-preview code {
    background: rgba(255, 255, 255, 0.08);
}

.sb-dark .sb-article-preview pre,
[data-theme="dark"] .sb-article-preview pre {
    background: #0A1525;
    border-color: #243756;
}

.sb-dark .sb-article-preview a,
[data-theme="dark"] .sb-article-preview a {
    color: #93B4FF;
}

.sb-dark .sb-article-preview a:hover,
[data-theme="dark"] .sb-article-preview a:hover {
    color: #C7D6FF;
}

.sb-dark .sb-article-preview th,
.sb-dark .sb-article-preview td,
[data-theme="dark"] .sb-article-preview th,
[data-theme="dark"] .sb-article-preview td {
    border-color: #243756;
}

.sb-dark .sb-article-preview th,
[data-theme="dark"] .sb-article-preview th {
    background: rgba(255, 255, 255, 0.04);
}

/* ── Substack operation overlay (bottom-center floating status pill) ── */
.sb-substack-op-overlay {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    pointer-events: none;
}

.sb-substack-op-card {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 8px;
    background: rgba(30, 30, 30, 0.85) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(6px);
    white-space: nowrap;
    pointer-events: auto;
    animation: sb-overlay-fade-in 0.2s ease;
}

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



/* ── Daily Hub Header strip ── */
.sb-daily-hub-header {
    border-left: 4px solid var(--sb-accent);
}

/* ── AI Content Coach panel ── */
.sb-coach-brief {
    background: var(--sb-paper-soft);
    border-left: 3px solid var(--sb-accent);
    border-radius: 4px;
    padding: 10px 14px;
    font-style: italic;
}

.sb-coach-upgrade-teaser {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 16px;
}

.sb-coach-full-analysis h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 16px 0 6px;
}

.sb-coach-full-analysis ul,
.sb-coach-full-analysis ol {
    padding-left: 1.4rem;
    margin: 6px 0 12px;
}

.sb-coach-full-analysis p {
    margin: 0 0 10px;
}

/* ── Daily Hub Recap Panel ── */
.sb-recap-block {
    background: var(--sb-paper-soft);
    border: 1px solid var(--sb-hairline);
    border-radius: 10px;
    padding: 14px 16px;
    height: 100%;
}

.sb-recap-block-header {
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    font-weight: 600;
}

.sb-recap-block-subheader {
    font-size: 0.75rem;
    margin-top: 2px;
    margin-left: 24px;
}

.sb-recap-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sb-recap-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid var(--sb-hairline);
}

.sb-recap-row:last-child {
    border-bottom: none;
}

.sb-recap-label {
    font-size: 0.82rem;
}

.sb-recap-value {
    font-size: 0.95rem;
    font-weight: 700;
    text-align: right;
    min-width: 32px;
}

.sb-recap-prev {
    font-size: 0.78rem;
    text-align: right;
}

.sb-recap-delta {
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 44px;
    text-align: right;
}

/* ── Daily Hub Coach Panel — recommendation label (wrapping) ── */
.sb-coach-rec-label {
    display: inline-block;
    width: 100%;
    padding: 3px 8px;
    border: 1px solid var(--sb-accent);
    border-radius: 12px;
    color: var(--sb-accent);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: normal;
    word-break: break-word;
    box-sizing: border-box;
}

/* ── Daily Hub Welcome Panel stat chips ── */
.sb-stat-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 12px;
    cursor: default;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: 1px solid transparent;
}

.sb-stat-chip:hover {
    transform: translateY(-2px);
}

.sb-stat-chip__icon {
    font-size: 1.6rem;
    line-height: 1;
}

.sb-stat-chip__value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
}

.sb-stat-chip__label {
    font-size: 0.7rem;
    opacity: 0.75;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Variants */
.sb-stat-chip--default {
    background: var(--sb-paper-soft);
    border-color: var(--sb-hairline);
}

.sb-stat-chip--fire {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    border-color: #ffb74d;
    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.25);
}

.sb-stat-chip--fire .sb-stat-chip__value {
    color: #e65100;
}

.sb-stat-chip--info {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-color: #64b5f6;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.18);
}

.sb-stat-chip--info .sb-stat-chip__value {
    color: #1565c0;
}

.sb-stat-chip--score {
    background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
    border-color: #ce93d8;
    box-shadow: 0 2px 8px rgba(156, 39, 176, 0.18);
}

.sb-stat-chip--score .sb-stat-chip__value {
    color: #6a1b9a;
}

.sb-stat-chip--achievement {
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
    border-color: #ffd54f;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.2);
}

.sb-stat-chip--achievement .sb-stat-chip__value {
    color: #e65100;
}

/* Dark mode overrides */
.dark .sb-stat-chip--fire {
    background: linear-gradient(135deg, #3e2723 0%, #4e342e 100%);
    border-color: #ff8f00;
}
.dark .sb-stat-chip--info {
    background: linear-gradient(135deg, #0d2137 0%, #0d3057 100%);
    border-color: #1976d2;
}
.dark .sb-stat-chip--score {
    background: linear-gradient(135deg, #2a1535 0%, #3b1f4e 100%);
    border-color: #9c27b0;
}
.dark .sb-stat-chip--achievement {
    background: linear-gradient(135deg, #3e2a00 0%, #4e3500 100%);
    border-color: #ffa000;
}

/* (Dead .sb-glow-progress .mud-progress-linear-bar glow rules removed — progress is SbProgress now.) */

/* ── LinkedIn Queue styling ── */
.sb-queue-linkedin {
    border-left: 3px solid #0A66C2;
}

/* ── Admin: user drill-down (/admin/user/{id}) ────────────────────────────── */
.sb-admin-userlink { color: var(--sb-accent); font-weight: 600; text-decoration: none; }
.sb-admin-userlink:hover { text-decoration: underline; }
.sb-section-title { font-size: 1.05rem; font-weight: 800; margin: 0; }

/* ── Admin email preview ─────────────────────────────────────────────────────
   Renders a draft as the recipient sees it. Deliberately light-on-white even in
   dark mode: email clients show the branded template on white, so previewing it
   dark would misrepresent what actually lands in the inbox. */
.sb-email-preview {
    background: #ffffff;
    color: #222;
    border: 1px solid #e6e2db;
    border-radius: 10px;
    padding: 24px;
    max-width: 600px;
    margin: 0 auto;
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.7;
    max-height: 640px;
    overflow-y: auto;
}

.sb-email-preview-brand {
    text-align: center;
    font-weight: 800;
    font-size: 28px;
    letter-spacing: .2px;
    color: #111;
    margin-bottom: 24px;
}

.sb-email-preview-body img { max-width: 100%; border-radius: 8px; }
.sb-email-preview-body a { color: #B4560A; }

.sb-email-preview-rule { margin: 32px 0 0; border: none; border-top: 1px solid #eee; }

.sb-email-preview-foot {
    margin-top: 12px;
    color: #999;
    font-size: 12px;
    text-align: center;
}

/* ── Admin revenue scrub ─────────────────────────────────────────────────────
   The chart is a static SVG, so the per-period detail lives in a hover list
   underneath it: the numbers you want when a point on the line looks wrong. */
.sb-revenue-scrub { margin-top: 14px; border-top: 1px solid var(--sb-hairline); }

.sb-revenue-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 12px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: .85rem;
    transition: background .12s ease;
}

.sb-revenue-row:hover { background: var(--sb-paper-soft); }

.sb-revenue-label { color: var(--sb-ink-soft); }
.sb-revenue-mrr { font-weight: 800; font-variant-numeric: tabular-nums; }
.sb-revenue-meta { color: var(--sb-ink-soft); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
    .sb-revenue-row { grid-template-columns: 1fr auto; row-gap: 2px; }
}