/* ==========================================================================
 * static_pages.css - Styles for /pricing, /features, /compare, /about pages
 * ========================================================================== */

/* Shared static page layout */
.NB-static-pricing .NB-body-inner,
.NB-static-features .NB-body-inner,
.NB-static-compare .NB-body-inner,
.NB-static-about .NB-body-inner,
.NB-static-faq .NB-body-inner,
.NB-static-api .NB-body-inner,
.NB-static-forgot-password .NB-body-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 96px 32px 48px;
}

/* ---- Top header bar ---- */

/* Full-width background bar */
.NB-static .NB-splash-info.NB-splash-top {
    height: 70px;
    left: 0;
}

/* Hidden by default on non-static, non-welcome pages */
.NB-splash-top-nav {
    display: none;
}

/* Inner container: matches content width below */
.NB-static .NB-splash-top-nav {
    display: flex;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* Left zone: page title */
.NB-static .NB-splash-top-title {
    flex: 1;
    font-family: 'Gotham Narrow A', 'Gotham Narrow B', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #2d261a;
    white-space: nowrap;
    text-align: left;
    min-width: 0;
}

body.NB-dark.NB-static .NB-splash-top-title {
    color: white;
}

/* When title is empty, still takes up flex space to keep links centered */
.NB-splash-top-title:empty {
    flex: 1;
}

/* Center zone: nav links */
.NB-splash-top-links {
    display: none;
}

.NB-static .NB-splash-top-links {
    display: flex;
    list-style: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
    -webkit-padding-start: 0;
    gap: 4px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Right zone: logo */
.NB-splash-top-logo {
    display: none;
}

.NB-static .NB-splash-top-logo {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
}

.NB-static .NB-splash-top-logo .NB-splash-blurred-logo {
    height: 28px;
    width: 146px;
    margin: 0;
}

/* Hide fallback logo on static and welcome pages */
.NB-static .NB-splash-top-logo-fallback,
.NB-welcome .NB-splash-top-logo-fallback {
    display: none;
}

/* Mobile-only logo link: hidden by default, shown in mobile media query */
.NB-mobile-logo-link {
    display: none;
}

/* Kill squares: force no list markers */
.NB-splash-top-link {
    list-style: none;
    list-style-type: none;
    padding: 0;
    display: block;
}

.NB-static .NB-splash-top-link,
.NB-welcome .NB-splash-top-link {
    margin: 0;
}

.NB-splash-top-link::marker {
    content: none;
}

.NB-static .NB-splash-top-link a {
    font-family: 'Gotham Narrow A', 'Gotham Narrow B', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: rgba(45, 38, 26, 0.6);
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    background: none;
    display: block;
    line-height: 1;
}

.NB-static .NB-splash-top-link a:hover {
    color: #2d261a;
    background: rgba(0, 0, 0, 0.06);
}

/* Active page: dark text + rounded border (direct child only, not dropdown links) */
.NB-static-features .NB-splash-top-link-features > a,
.NB-static-pricing .NB-splash-top-link-pricing > a,
.NB-static-about .NB-splash-top-link-about > a,
.NB-static-faq .NB-splash-top-link-faq > a,
.NB-static-compare .NB-splash-top-link-features > a {
    color: #2d261a;
    border-color: rgba(45, 38, 26, 0.2);
}

/* Hide old .NB-static-title - title is now in the header nav */
.NB-static .NB-static-title {
    display: none;
}

/* Hide old NB-module styling on API page (replaced by NB-api-section) */
.NB-static-api .NB-module {
    display: none;
}

/* Logo: light variant for frosted glass, dark variant for dark mode */
.NB-static .NB-splash-blurred-logo {
    background-image: url('/media/embed/logo_newsblur_blur.png');
}

body.NB-dark.NB-static .NB-splash-blurred-logo {
    background-image: url('/media/embed/logo_newsblur_blur_dark.png');
}

/* ---- Welcome page header ---- */

.NB-welcome .NB-splash-top-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 48px;
    box-sizing: border-box;
    height: 70px;
}

.NB-welcome .NB-splash-top-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    -webkit-padding-start: 0;
    gap: 4px;
    align-items: center;
}

.NB-welcome .NB-splash-top-link a {
    font-family: 'Gotham Narrow A', 'Gotham Narrow B', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: rgba(45, 38, 26, 0.6);
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: none;
    display: block;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.NB-welcome .NB-splash-top-link a:hover {
    color: #2d261a;
}

/* Welcome page: show toggle in top-right but hide logo and title */
.NB-welcome .NB-splash-top-logo {
    display: flex;
    align-items: center;
    position: absolute;
    right: 0;
    top: 0;
    height: 70px;
}

.NB-welcome .NB-splash-top-logo > a {
    display: none;
}

/* Welcome page: warm gold splash background (scoped so reader keeps #F6F8F0) */
.NB-welcome #NB-splash {
    background-color: #c4a870;
}

.NB-welcome .NB-splash-top-title {
    display: none;
}


/* ---- Navigation Dropdown Menus ---- */

.NB-splash-nav-has-dropdown {
    position: relative;
}

/* Dropdown arrow indicator next to trigger text */
.NB-splash-nav-has-dropdown > a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 4px solid currentColor;
    margin-left: 5px;
    vertical-align: middle;
    position: relative;
    top: -0.5px;
    opacity: 0.6;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.NB-splash-nav-has-dropdown > a:hover::after,
.NB-splash-nav-dropdown-open > a::after {
    opacity: 1;
}

.NB-splash-nav-dropdown-open > a::after {
    transform: rotate(180deg);
}

/* Dropdown panel - lives in <body> (moved via JS) so backdrop-filter
   works without being blocked by the header's own backdrop-filter. */
.NB-splash-dropdown {
    position: fixed;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    padding-top: 8px;
    top: 0;
    left: 0;
}

/* Constrain dropdown widths */
.NB-splash-dropdown-features {
    width: 652px;
}

.NB-splash-dropdown:not(.NB-splash-dropdown-features) {
    width: 312px;
}

/* Open state - applied directly to the dropdown element */
.NB-splash-dropdown.NB-splash-nav-dropdown-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Grace area - invisible bridge between trigger and panel */
.NB-splash-dropdown::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 20px;
}

/* Inner container - the visible panel (light mode: frosted glass) */
.NB-splash-dropdown-inner {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(40px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.03);
    padding: 12px;
    min-width: 280px;
}

/* Features dropdown: two columns */
.NB-splash-dropdown-features .NB-splash-dropdown-inner {
    display: flex;
    gap: 0;
    min-width: 620px;
    padding: 16px;
}

/* Left column: hero features */
.NB-splash-dropdown-col-hero {
    flex: 0 0 290px;
    padding-right: 16px;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
}

/* Right column: more features + compare + alternatives */
.NB-splash-dropdown-col-more {
    flex: 1;
    padding-left: 16px;
    min-width: 240px;
}

/* Section headings */
.NB-splash-dropdown-heading {
    font-family: 'Gotham Narrow A', 'Gotham Narrow B', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(26, 21, 8, 0.5);
    padding: 4px 10px 8px;
    margin: 0;
}

a.NB-splash-dropdown-heading-link,
a.NB-splash-dropdown-heading-link:link,
a.NB-splash-dropdown-heading-link:visited,
.NB-splash-dropdown-heading-link {
    color: #1a1508;
    text-decoration: none;
    font-family: 'Gotham Narrow A', 'Gotham Narrow B', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color 0.15s ease;
}

a.NB-splash-dropdown-heading-link:hover,
.NB-splash-dropdown-heading-link:hover {
    color: #000;
}

/* Hero dropdown items (name + description) */
.NB-splash-dropdown-item {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.15s ease;
    cursor: pointer;
}

/* Dropdown icons - inline with title text */
.NB-splash-dropdown-icon {
    width: 16px;
    height: 16px;
    vertical-align: -2px;
    margin-right: 6px;
}

/* iOS-inspired icon colors via CSS filters */
.NB-splash-dropdown-icon-blue {
    filter: invert(37%) sepia(93%) saturate(2000%) hue-rotate(200deg) brightness(1.1);
}

.NB-splash-dropdown-icon-coral {
    filter: invert(50%) sepia(80%) saturate(1200%) hue-rotate(340deg) brightness(1.1);
}

.NB-splash-dropdown-icon-purple {
    filter: invert(30%) sepia(90%) saturate(2500%) hue-rotate(260deg) brightness(1.1);
}

.NB-splash-dropdown-icon-pink {
    filter: invert(45%) sepia(90%) saturate(1500%) hue-rotate(310deg) brightness(1.1);
}

.NB-splash-dropdown-icon-teal {
    filter: invert(55%) sepia(75%) saturate(1500%) hue-rotate(140deg) brightness(1.1);
}

.NB-splash-dropdown-icon-orange {
    filter: invert(57%) sepia(98%) saturate(1000%) hue-rotate(360deg) brightness(1.1);
}

.NB-splash-dropdown-icon-green {
    filter: invert(55%) sepia(75%) saturate(1500%) hue-rotate(90deg) brightness(1.1);
}

.NB-splash-dropdown-icon-gold {
    filter: invert(60%) sepia(90%) saturate(1200%) hue-rotate(20deg) brightness(1.1);
}

.NB-splash-dropdown-icon-indigo {
    filter: invert(25%) sepia(90%) saturate(2500%) hue-rotate(235deg) brightness(0.9);
}

.NB-splash-dropdown-icon-cyan {
    filter: invert(55%) sepia(85%) saturate(1800%) hue-rotate(160deg) brightness(1.1);
}

a.NB-splash-dropdown-item,
a.NB-splash-dropdown-item:link,
a.NB-splash-dropdown-item:visited,
.NB-splash-dropdown-item {
    color: #2d261a;
    text-decoration: none;
}

a.NB-splash-dropdown-item:hover,
.NB-splash-dropdown-item:hover {
    background: rgba(0, 0, 0, 0.04);
    color: #1a1508;
}

.NB-splash-dropdown-item-name {
    font-family: 'Gotham Narrow A', 'Gotham Narrow B', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #2d261a;
    line-height: 1.2;
    margin-bottom: 2px;
}

.NB-splash-dropdown-item:hover .NB-splash-dropdown-item-name {
    color: #1a1508;
}

.NB-splash-dropdown-item-desc {
    font-family: 'Gotham Narrow A', 'Gotham Narrow B', sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: rgba(45, 38, 26, 0.65);
    line-height: 1.3;
}

/* Price badge in pricing dropdown */
.NB-splash-dropdown-price {
    font-size: 11px;
    font-weight: 600;
    color: #5a4510;
    margin-left: 4px;
}

/* Tier accent bars - rounded pill on the left */
.NB-splash-dropdown-tier {
    position: relative;
    padding-left: 18px;
}

.NB-splash-dropdown-tier::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60%;
    border-radius: 3px;
    background: transparent;
    transition: background 0.15s ease;
}

.NB-splash-dropdown-tier-premium:hover::before {
    background: rgba(34, 197, 94, 0.6);
}

.NB-splash-dropdown-tier-archive:hover::before {
    background: rgba(20, 184, 166, 0.6);
}

.NB-splash-dropdown-tier-pro:hover::before {
    background: rgba(249, 115, 22, 0.6);
}

/* Divider line */
.NB-splash-dropdown-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    margin: 6px 10px;
}

/* Compact grid items (more features, compare, alternatives) */
.NB-splash-dropdown-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

a.NB-splash-dropdown-grid-item,
a.NB-splash-dropdown-grid-item:link,
a.NB-splash-dropdown-grid-item:visited,
.NB-splash-dropdown-grid-item {
    display: block;
    font-family: 'Gotham Narrow A', 'Gotham Narrow B', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #1a1508;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
    flex: 0 0 50%;
    box-sizing: border-box;
}

a.NB-splash-dropdown-grid-item:hover,
.NB-splash-dropdown-grid-item:hover {
    color: #000;
    background: rgba(0, 0, 0, 0.06);
}

/* Current page highlight in dropdown - dim background */
/* Feature hero items - active page highlight */
.NB-static-feature-training .NB-splash-dropdown-item-training,
.NB-static-feature-ask-ai .NB-splash-dropdown-item-ask-ai,
.NB-static-feature-web-feeds .NB-splash-dropdown-item-web-feeds,
.NB-static-feature-newsletters .NB-splash-dropdown-item-newsletters,
.NB-static-feature-search .NB-splash-dropdown-item-search,
.NB-static-feature-archive .NB-splash-dropdown-item-archive,
.NB-static-feature-saved .NB-splash-dropdown-item-saved,
.NB-static-feature-native-apps .NB-splash-dropdown-item-native-apps {
    background: rgba(0, 0, 0, 0.05);
}

.NB-static-feature-training .NB-splash-dropdown-item-training .NB-splash-dropdown-item-name,
.NB-static-feature-ask-ai .NB-splash-dropdown-item-ask-ai .NB-splash-dropdown-item-name,
.NB-static-feature-web-feeds .NB-splash-dropdown-item-web-feeds .NB-splash-dropdown-item-name,
.NB-static-feature-newsletters .NB-splash-dropdown-item-newsletters .NB-splash-dropdown-item-name,
.NB-static-feature-search .NB-splash-dropdown-item-search .NB-splash-dropdown-item-name,
.NB-static-feature-archive .NB-splash-dropdown-item-archive .NB-splash-dropdown-item-name,
.NB-static-feature-saved .NB-splash-dropdown-item-saved .NB-splash-dropdown-item-name,
.NB-static-feature-native-apps .NB-splash-dropdown-item-native-apps .NB-splash-dropdown-item-name {
    color: #1a1508;
}

/* Compare & alternative grid items - active page highlight */
body.NB-static-compare-feedly .NB-splash-dropdown-grid-item-compare-feedly,
body.NB-static-compare-inoreader .NB-splash-dropdown-grid-item-compare-inoreader,
body.NB-static-compare-readwise .NB-splash-dropdown-grid-item-compare-readwise,
body.NB-static-compare-old-reader .NB-splash-dropdown-grid-item-compare-old-reader,
body.NB-static-compare-feedbin .NB-splash-dropdown-grid-item-compare-feedbin,
body.NB-static-alt-feedly .NB-splash-dropdown-grid-item-alt-feedly,
body.NB-static-alt-google-reader .NB-splash-dropdown-grid-item-alt-google-reader,
body.NB-static-alt-open-source .NB-splash-dropdown-grid-item-alt-open-source,
body.NB-static-alt-inoreader .NB-splash-dropdown-grid-item-alt-inoreader,
body.NB-static-alt-self-hosted .NB-splash-dropdown-grid-item-alt-self-hosted {
    color: #000 !important;
    background: rgba(0, 0, 0, 0.06);
}

/* Welcome page adjustments */
.NB-welcome .NB-splash-dropdown {
    padding-top: 6px;
}

/* Prevent Features dropdown from overflowing viewport */
.NB-splash-dropdown {
    max-width: calc(100vw - 32px);
}

/* Responsive: hide dropdowns on mobile */
@media (max-width: 900px) {
    .NB-splash-dropdown {
        display: none !important;
    }
}


/* ---- Feature Detail Pages ---- */

.NB-feature-detail-container {
    max-width: 900px;
    margin: 0 auto;
}

.NB-feature-detail-hero {
    text-align: center;
    margin: 0 0 48px;
}

.NB-feature-detail-title {
    font-size: 42px;
    font-weight: 700;
    color: #2d261a;
    margin: 12px 0 16px;
    line-height: 1.1;
}

.NB-feature-detail-subtitle {
    font-size: 18px;
    color: rgba(45, 38, 26, 0.6);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Screenshot gallery */
.NB-feature-detail-screenshots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 0 0 48px;
}

/* Ask AI: two-column layout with stacked left, tall right */
.NB-feature-detail-screenshots-askai {
    display: flex;
    gap: 24px;
    grid-template-columns: none;
}

.NB-feature-detail-screenshots-askai .NB-feature-detail-screenshots-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.NB-feature-detail-screenshots-askai .NB-feature-detail-screenshot-tall {
    flex: 1;
}

.NB-feature-detail-screenshots-askai .NB-feature-detail-screenshot-tall img {
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.NB-feature-detail-screenshots.NB-feature-detail-screenshots-single {
    grid-template-columns: 1fr;
    max-width: 700px;
    margin: 0 auto 48px;
}

.NB-feature-detail-screenshot {
    text-align: center;
}

.NB-feature-detail-screenshot img {
    width: 100%;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.NB-feature-detail-caption {
    font-size: 13px;
    color: rgba(45, 38, 26, 0.5);
    margin: 10px 0 0;
    line-height: 1.4;
}

/* How it works section */
.NB-feature-detail-how {
    margin: 0 0 48px;
}

.NB-feature-detail-how h2,
.NB-feature-detail-faq h2 {
    font-size: 24px;
    font-weight: 700;
    color: #2d261a;
    margin: 0 0 20px;
}

.NB-feature-detail-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: step-counter;
}

.NB-static .NB-feature-detail-step {
    counter-increment: step-counter;
    padding: 16px 0 16px 48px;
    position: relative;
    list-style: none;
    color: rgba(45, 38, 26, 0.75);
    font-size: 18px;
    line-height: 1.5;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.NB-feature-detail-step:last-child {
    border-bottom: none;
}

.NB-feature-detail-step::before {
    content: counter(step-counter);
    position: absolute;
    left: 0;
    top: 16px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(138, 109, 27, 0.15);
    color: #8a6d1b;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* FAQ section */
.NB-feature-detail-faq {
    margin: 0 0 48px;
}

.NB-feature-detail-faq-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 16px 0;
}

.NB-feature-detail-faq-item:last-child {
    border-bottom: none;
}

.NB-feature-detail-faq-q {
    font-size: 18px;
    font-weight: 600;
    color: rgba(45, 38, 26, 0.85);
    margin: 0 0 8px;
}

.NB-feature-detail-faq-a {
    font-size: 16px;
    color: rgba(45, 38, 26, 0.55);
    line-height: 1.6;
    margin: 0;
}

/* Bottom CTA */
.NB-feature-detail-cta {
    text-align: center;
    padding: 40px 0;
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.NB-feature-detail-cta a {
    display: inline-block;
    padding: 14px 36px;
    border-radius: 10px;
    font-family: 'Gotham Narrow A', 'Gotham Narrow B', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.NB-feature-detail-cta a:hover {
    transform: translateY(-1px);
}

.NB-static .NB-feature-detail-cta-primary {
    background: linear-gradient(135deg, #FBDB9B 0%, #f0c96e 100%);
    color: #2a2a1e;
    box-shadow: 0 2px 8px rgba(251, 219, 155, 0.3);
}

.NB-static .NB-feature-detail-cta-primary:hover {
    background: linear-gradient(135deg, #fce5b5 0%, #f5d580 100%);
    color: #2a2a1e;
    box-shadow: 0 4px 16px rgba(251, 219, 155, 0.4);
}

.NB-static .NB-feature-detail-cta-secondary {
    background: rgba(255, 255, 255, 0.4);
    color: #3a3122;
}

.NB-static .NB-feature-detail-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.6);
    color: #2d261a;
}

/* Cross-links to other feature pages */
.NB-feature-detail-crosslinks {
    margin: 0 0 32px;
}

.NB-feature-detail-crosslinks h2 {
    font-size: 28px;
    font-weight: 700;
    color: #2d261a;
    margin: 0 0 20px;
}

.NB-feature-detail-crosslinks-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 8px;
}

.NB-feature-detail-crosslink {
    display: block;
    padding: 14px 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.25);
    text-decoration: none;
    transition: background 0.15s ease;
}

.NB-feature-detail-crosslink:hover {
    background: rgba(255, 255, 255, 0.45);
}

.NB-feature-detail-crosslink-name {
    font-family: 'Gotham Narrow A', 'Gotham Narrow B', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: rgba(45, 38, 26, 0.85);
    margin: 0 0 4px;
}

.NB-feature-detail-crosslink-desc {
    font-size: 13px;
    color: rgba(45, 38, 26, 0.5);
    line-height: 1.4;
}

/* Current page in crosslinks - highlighted */
.NB-static-feature-training .NB-feature-detail-crosslink-training,
.NB-static-feature-ask-ai .NB-feature-detail-crosslink-ask-ai,
.NB-static-feature-web-feeds .NB-feature-detail-crosslink-web-feeds,
.NB-static-feature-newsletters .NB-feature-detail-crosslink-newsletters,
.NB-static-feature-search .NB-feature-detail-crosslink-search,
.NB-static-feature-archive .NB-feature-detail-crosslink-archive,
.NB-static-feature-saved .NB-feature-detail-crosslink-saved,
.NB-static-feature-native-apps .NB-feature-detail-crosslink-native-apps,
.NB-static-feature-mcp .NB-feature-detail-crosslink-mcp,
.NB-static-feature-cli .NB-feature-detail-crosslink-cli {
    background: rgba(255, 255, 255, 0.5);
}

.NB-static-feature-training .NB-feature-detail-crosslink-training .NB-feature-detail-crosslink-name,
.NB-static-feature-ask-ai .NB-feature-detail-crosslink-ask-ai .NB-feature-detail-crosslink-name,
.NB-static-feature-web-feeds .NB-feature-detail-crosslink-web-feeds .NB-feature-detail-crosslink-name,
.NB-static-feature-newsletters .NB-feature-detail-crosslink-newsletters .NB-feature-detail-crosslink-name,
.NB-static-feature-search .NB-feature-detail-crosslink-search .NB-feature-detail-crosslink-name,
.NB-static-feature-archive .NB-feature-detail-crosslink-archive .NB-feature-detail-crosslink-name,
.NB-static-feature-saved .NB-feature-detail-crosslink-saved .NB-feature-detail-crosslink-name,
.NB-static-feature-native-apps .NB-feature-detail-crosslink-native-apps .NB-feature-detail-crosslink-name,
.NB-static-feature-mcp .NB-feature-detail-crosslink-mcp .NB-feature-detail-crosslink-name,
.NB-static-feature-cli .NB-feature-detail-crosslink-cli .NB-feature-detail-crosslink-name {
    color: #8a6d1b;
}

/* Feature crosslinks on comparison pages - add spacing */
.NB-static-compare .NB-feature-detail-crosslinks {
    margin-top: 48px;
}

/* Responsive feature detail */
@media (max-width: 900px) {
    .NB-feature-detail-title {
        font-size: 28px;
    }
    .NB-feature-detail-screenshots {
        grid-template-columns: 1fr;
    }
    .NB-feature-detail-screenshots-askai {
        flex-direction: column;
    }
    .NB-feature-detail-crosslinks-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .NB-feature-detail-crosslinks-grid {
        grid-template-columns: 1fr;
    }
    .NB-mcp-tools-grid {
        grid-template-columns: 1fr;
    }
}


/* ---- MCP Feature Detail Page ---- */

/* Code blocks - terminal/code style */
pre.NB-feature-detail-code {
    background: #1a1a2e;
    color: #e0e0e0;
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    padding: 16px 20px;
    border-radius: 8px;
    font-size: 14px;
    overflow-x: auto;
    white-space: pre-wrap;
    margin: 8px 0 16px;
    line-height: 1.5;
}

/* Tools grid - two columns */
.NB-mcp-tools-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 36px;
}

.NB-mcp-tools-column-heading {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 12px;
    border-radius: 4px;
    margin: 0 0 8px;
    display: inline-block;
}

.NB-mcp-tools-column-heading-intelligence {
    margin-top: 20px;
}

.NB-mcp-tools-column-heading[data-category="reading"] {
    background: rgba(58, 118, 166, 0.1);
    color: rgba(40, 90, 130, 0.85);
}

.NB-mcp-tools-column-heading[data-category="actions"] {
    background: rgba(138, 109, 27, 0.1);
    color: rgba(120, 95, 20, 0.85);
}

.NB-mcp-tools-column-heading[data-category="intelligence"] {
    background: rgba(76, 141, 72, 0.1);
    color: rgba(50, 110, 48, 0.85);
}

.NB-mcp-tools-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.NB-mcp-tool {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.NB-mcp-tool:last-child {
    border-bottom: none;
}

.NB-mcp-tool code {
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    font-size: 13px;
    font-weight: 500;
    color: rgba(45, 38, 26, 0.85);
    white-space: nowrap;
}

.NB-mcp-tool-desc {
    font-size: 13px;
    color: rgba(45, 38, 26, 0.45);
    line-height: 1.4;
}

/* MCP conversation examples */
.NB-feature-detail-examples-intro {
    font-size: 15px;
    color: rgba(45, 38, 26, 0.6);
    margin-bottom: 24px;
    line-height: 1.5;
}

.NB-mcp-example {
    margin-bottom: 28px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.NB-mcp-example:last-child {
    margin-bottom: 0;
}

.NB-mcp-example-prompt {
    background: #1a1a2e;
    color: #e8e8e8;
    font-size: 15px;
    font-weight: 600;
    padding: 14px 20px;
    font-style: italic;
}

.NB-mcp-example-prompt::before {
    content: "> ";
    color: rgba(130, 180, 255, 0.7);
    font-style: normal;
    font-family: 'SF Mono', Monaco, Consolas, monospace;
}

.NB-mcp-example-tool {
    background: #14142a;
    color: rgba(130, 180, 255, 0.85);
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    font-size: 12px;
    padding: 6px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.NB-mcp-example-tool::before {
    content: "\25B6\00a0\00a0";
    font-size: 8px;
    vertical-align: 1px;
    opacity: 0.5;
}

.NB-mcp-example-tool-args {
    color: rgba(180, 160, 220, 0.7);
    margin-left: 4px;
}

.NB-mcp-example-response {
    background: #fafaf8;
    padding: 16px 20px;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(45, 38, 26, 0.8);
}

.NB-mcp-example-response p {
    margin: 0 0 10px 0;
}

.NB-mcp-example-response p:last-child {
    margin-bottom: 0;
}

.NB-mcp-example-response strong {
    color: rgba(45, 38, 26, 0.95);
}

.NB-mcp-example-response em {
    font-style: normal;
    color: rgba(45, 38, 26, 0.65);
}

.NB-mcp-example-response code {
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 6px;
    border-radius: 3px;
}

/* Setup section */
.NB-mcp-setup-options {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 16px;
}

.NB-mcp-setup-option h3 {
    font-size: 16px;
    font-weight: 600;
    color: #2d261a;
    margin: 0 0 8px;
}

.NB-mcp-setup-option p {
    font-size: 14px;
    color: rgba(45, 38, 26, 0.6);
    margin: 0 0 6px;
}

.NB-mcp-setup-note {
    font-size: 14px;
    color: rgba(45, 38, 26, 0.5);
    font-style: italic;
}

/* Cross-banner linking between related feature pages */
.NB-feature-crossbanner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    margin-bottom: 32px;
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(45, 38, 26, 0.1);
    border-radius: 8px;
    font-size: 15px;
    color: rgba(45, 38, 26, 0.7);
}

.NB-feature-crossbanner .NB-splash-dropdown-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.NB-feature-crossbanner a {
    color: #8a6d1b;
    font-weight: 600;
    text-decoration: none;
}

.NB-feature-crossbanner a:hover {
    text-decoration: underline;
}

/* CLI commands sections */
.NB-cli-commands-section .NB-feature-detail-subtitle {
    margin: 0 0 16px 0;
    max-width: none;
    text-align: left;
}

/* CLI Section */
.NB-cli-section {
    margin-top: 48px;
}

.NB-cli-steps {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 24px;
}

.NB-cli-step h3 {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #707070;
    margin-bottom: 8px;
}

.NB-cli-step-note {
    margin-top: 8px;
    font-size: 14px;
    color: #808080;
}

.NB-cli-step-note code {
    background: #f0f0f0;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 13px;
}


/* ---- Pricing Tier Detail Pages ---- */

.NB-pricing-tier-detail-container {
    max-width: 900px;
    margin: 0 auto;
}

.NB-pricing-tier-detail-hero {
    text-align: center;
    margin: 0 0 48px;
}

.NB-pricing-tier-detail-name {
    font-size: 42px;
    font-weight: 700;
    color: #2d261a;
    margin: 0 0 8px;
    line-height: 1.1;
}

.NB-pricing-tier-detail-price {
    font-size: 24px;
    color: #8a6d1b;
    margin: 0 0 16px;
}

.NB-pricing-tier-detail-subtitle {
    font-size: 18px;
    color: rgba(45, 38, 26, 0.6);
    max-width: 600px;
    margin: 0 auto 24px;
    line-height: 1.5;
}

.NB-pricing-tier-detail-cta-button {
    display: inline-block;
    padding: 14px 36px;
    border-radius: 8px;
    font-family: 'Gotham Narrow A', 'Gotham Narrow B', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease;
}

.NB-pricing-tier-detail-cta-premium {
    background: rgba(34, 160, 80, 0.15);
    color: #1a8a42;
    border: 1px solid rgba(34, 160, 80, 0.3);
}

.NB-pricing-tier-detail-cta-premium:hover {
    background: rgba(34, 160, 80, 0.25);
}

.NB-pricing-tier-detail-cta-archive {
    background: rgba(15, 145, 130, 0.15);
    color: #0d8a7c;
    border: 1px solid rgba(15, 145, 130, 0.3);
}

.NB-pricing-tier-detail-cta-archive:hover {
    background: rgba(15, 145, 130, 0.25);
}

.NB-pricing-tier-detail-cta-pro {
    background: rgba(210, 95, 15, 0.15);
    color: #c05a0e;
    border: 1px solid rgba(210, 95, 15, 0.3);
}

.NB-pricing-tier-detail-cta-pro:hover {
    background: rgba(210, 95, 15, 0.25);
}

/* Feature list on tier pages */
.NB-pricing-tier-detail-features {
    margin: 0 0 48px;
}

.NB-pricing-tier-detail-features h2 {
    font-size: 24px;
    font-weight: 700;
    color: #2d261a;
    margin: 0 0 24px;
}

.NB-pricing-tier-detail-feature {
    display: flex;
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    align-items: flex-start;
}

.NB-pricing-tier-detail-feature:last-child {
    border-bottom: none;
}

.NB-pricing-tier-detail-feature-text {
    flex: 1;
}

.NB-pricing-tier-detail-feature-name {
    font-size: 18px;
    font-weight: 600;
    color: rgba(45, 38, 26, 0.9);
    margin: 0 0 6px;
}

.NB-pricing-tier-detail-feature-desc {
    font-size: 16px;
    color: rgba(45, 38, 26, 0.55);
    line-height: 1.6;
    margin: 0;
}

.NB-pricing-tier-detail-feature-img {
    flex: 0 0 280px;
}

.NB-pricing-tier-detail-feature-img img {
    width: 100%;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Tier page FAQ */
.NB-pricing-tier-detail-faq {
    margin: 0 0 48px;
}

.NB-pricing-tier-detail-faq h2 {
    font-size: 24px;
    font-weight: 700;
    color: #2d261a;
    margin: 0 0 20px;
}

/* Reuse feature detail FAQ item styles */
.NB-pricing-tier-detail-faq .NB-feature-detail-faq-item,
.NB-pricing-tier-detail-faq .NB-feature-detail-faq-q,
.NB-pricing-tier-detail-faq .NB-feature-detail-faq-a {
    /* Inherits from feature detail FAQ styles above */
}

/* Other tiers callout */
.NB-pricing-tier-detail-others {
    text-align: center;
    padding: 24px 0 32px;
}

.NB-pricing-tier-detail-others-label {
    font-size: 13px;
    color: rgba(45, 38, 26, 0.45);
    margin: 0 0 12px;
}

.NB-pricing-tier-detail-others-links {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.NB-pricing-tier-detail-others-links a {
    font-family: 'Gotham Narrow A', 'Gotham Narrow B', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: rgba(45, 38, 26, 0.55);
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: color 0.15s ease, border-color 0.15s ease;
}

.NB-pricing-tier-detail-others-links a:hover {
    color: #8a6d1b;
    border-color: rgba(138, 109, 27, 0.3);
}

/* Pricing plan crosslinks - card grid at bottom of individual tier pages */
.NB-pricing-crosslinks {
    margin: 0 0 32px;
}

.NB-pricing-crosslinks h2 {
    font-size: 28px;
    font-weight: 700;
    color: #2d261a;
    margin: 0 0 20px;
}

.NB-pricing-crosslinks-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

.NB-pricing-crosslink {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border-radius: 10px;
    border: none;
    background: rgba(255, 255, 255, 0.35);
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.NB-pricing-crosslink:hover {
    background: rgba(255, 255, 255, 0.55);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.NB-pricing-crosslink-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 8px;
}

.NB-pricing-crosslink-name {
    font-family: 'Gotham Narrow A', 'Gotham Narrow B', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #2d261a;
}

.NB-pricing-crosslink-price {
    font-size: 14px;
    font-weight: 600;
    color: #8a6d1b;
}

.NB-pricing-crosslink-desc {
    font-size: 14px;
    color: rgba(45, 38, 26, 0.6);
    line-height: 1.5;
    flex: 1;
}

.NB-pricing-crosslink-arrow {
    font-family: 'Gotham Narrow A', 'Gotham Narrow B', sans-serif;
    font-size: 13px;
    font-weight: 600;
    margin-top: 12px;
    transition: color 0.15s ease;
}

/* Tier-specific accent colors on crosslink cards */
.NB-pricing-crosslink-premium .NB-pricing-crosslink-arrow {
    color: #1a8a42;
}

.NB-pricing-crosslink-archive .NB-pricing-crosslink-arrow {
    color: #0d8a7c;
}

.NB-pricing-crosslink-pro .NB-pricing-crosslink-arrow {
    color: #c05a0e;
}

/* Arrow animation on pricing CTA buttons and crosslink cards */
.NB-pricing-cta-arrow {
    display: inline-block;
    transition: transform 0.15s ease;
    margin-left: 2px;
}

.NB-pricing-cta:hover .NB-pricing-cta-arrow {
    transform: translateX(3px);
}

.NB-pricing-crosslink:hover .NB-pricing-crosslink-arrow {
    letter-spacing: 0.3px;
}

/* Current plan state - shown when viewing that plan's detail page */
.NB-pricing-crosslink-current {
    opacity: 0.5;
    cursor: default;
    border: 2px dashed rgba(45, 38, 26, 0.2);
    background: rgba(255, 255, 255, 0.15);
}

.NB-pricing-crosslink-current:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: none;
    box-shadow: none;
}

.NB-pricing-crosslink-current-label {
    font-family: 'Gotham Narrow A', 'Gotham Narrow B', sans-serif;
    font-size: 13px;
    font-weight: 600;
    margin-top: 12px;
    color: rgba(45, 38, 26, 0.4);
    font-style: italic;
}

/* Center CTA buttons in pricing tier cards on static page */
.NB-static-pricing .NB-pricing-tier-actions {
    text-align: center;
}

/* Responsive pricing crosslinks */
@media (max-width: 900px) {
    .NB-pricing-crosslinks-grid {
        grid-template-columns: 1fr;
    }
}

/* Responsive tier detail */
@media (max-width: 900px) {
    .NB-pricing-tier-detail-name {
        font-size: 28px;
    }
    .NB-pricing-tier-detail-feature {
        flex-direction: column;
    }
    .NB-pricing-tier-detail-feature-img {
        flex: none;
        width: 100%;
    }
}


/* ---- Pricing Page ---- */

.NB-static-pricing-hero {
    text-align: center;
    margin: 0 0 40px;
}

.NB-static-pricing-title {
    font-size: 42px;
    font-weight: 700;
    color: #2d261a;
    letter-spacing: -0.5px;
    margin: 0 0 12px;
}

.NB-static-pricing-subtitle {
    font-size: 17px;
    color: rgba(45, 38, 26, 0.65);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ---- Pricing tier card overrides for dark static page background ---- */

/* Card background: light translucent on beige page */
.NB-static-pricing .NB-pricing-tier {
    background: rgba(255, 255, 255, 0.45);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.NB-static-pricing .NB-pricing-tier:hover {
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Tier headers: slightly muted gradients so they don't pop so much */
.NB-static-pricing .NB-pricing-tier-premium .NB-pricing-tier-header {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.8) 0%, rgba(22, 163, 74, 0.8) 100%);
}

.NB-static-pricing .NB-pricing-tier-archive .NB-pricing-tier-header {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.8) 0%, rgba(13, 148, 136, 0.8) 100%);
}

.NB-static-pricing .NB-pricing-tier-pro .NB-pricing-tier-header {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.85) 0%, rgba(234, 88, 12, 0.85) 100%);
}

.NB-static-pricing .NB-pricing-tier-free .NB-pricing-tier-header {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.7) 0%, rgba(75, 85, 99, 0.7) 100%);
}

.NB-static-pricing .NB-pricing-tier-selfhosted .NB-pricing-tier-header {
    background: linear-gradient(135deg, rgba(71, 85, 105, 0.7) 0%, rgba(51, 65, 85, 0.7) 100%);
}

/* Feature list text: dark text on light cards */
.NB-static-pricing .NB-pricing-tier-features li {
    color: rgba(45, 38, 26, 0.75);
}

.NB-static-pricing .NB-pricing-tier-features li.NB-pricing-tier-includes {
    color: rgba(45, 38, 26, 0.5);
}

/* Feature list backgrounds: transparent on dark cards */
.NB-static-pricing .NB-pricing-tier-premium .NB-pricing-tier-features,
.NB-static-pricing .NB-pricing-tier-archive .NB-pricing-tier-features,
.NB-static-pricing .NB-pricing-tier-pro .NB-pricing-tier-features {
    background: transparent;
}

.NB-static-pricing .NB-pricing-tier-free .NB-pricing-tier-features,
.NB-static-pricing .NB-pricing-tier-selfhosted .NB-pricing-tier-features {
    background: transparent;
}

.NB-static-pricing .NB-pricing-tier-free .NB-pricing-tier-features li,
.NB-static-pricing .NB-pricing-tier-selfhosted .NB-pricing-tier-features li {
    color: rgba(45, 38, 26, 0.7);
}

.NB-static-pricing .NB-pricing-tier-free .NB-pricing-tier-features li span,
.NB-static-pricing .NB-pricing-tier-selfhosted .NB-pricing-tier-features li span {
    color: rgba(45, 38, 26, 0.7);
}

/* Bullet icons: lighten for dark background */
.NB-static-pricing .NB-pricing-tier-free .NB-pricing-bullet,
.NB-static-pricing .NB-pricing-tier-selfhosted .NB-pricing-bullet {
    filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(120%) contrast(90%);
}

/* Actions bar: light treatment */
.NB-static-pricing .NB-pricing-tier-actions {
    background: rgba(0, 0, 0, 0.03);
    border-top-color: rgba(0, 0, 0, 0.06);
}

/* "Coming soon" header on light cards */
.NB-static-pricing .NB-pricing-tier-features li.NB-pricing-tier-upcoming-header {
    color: rgba(45, 38, 26, 0.4);
}

.NB-static-pricing .NB-pricing-tier-features li.NB-upcoming {
    color: rgba(45, 38, 26, 0.4);
}

/* GitHub button on light card */
.NB-static-pricing .NB-pricing-github-button {
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.NB-static-pricing .NB-pricing-github-button:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* CTA buttons */
.NB-pricing-cta {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
    margin-top: 12px;
}

.NB-pricing-cta:active {
    transform: scale(0.96);
}

.NB-pricing-cta-premium {
    background: rgba(34, 197, 94, 0.7);
    color: white;
}

.NB-pricing-cta-premium:hover {
    background: rgba(34, 197, 94, 0.9);
}

.NB-pricing-cta-archive {
    background: rgba(20, 184, 166, 0.7);
    color: white;
}

.NB-pricing-cta-archive:hover {
    background: rgba(20, 184, 166, 0.9);
}

.NB-pricing-cta-pro {
    background: rgba(249, 115, 22, 0.8);
    color: white;
}

.NB-pricing-cta-pro:hover {
    background: rgba(249, 115, 22, 1);
}

.NB-pricing-cta-free {
    background: rgba(255, 255, 255, 0.4);
    color: rgba(45, 38, 26, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.NB-pricing-cta-free:hover {
    background: rgba(255, 255, 255, 0.6);
    color: #2d261a;
}

.NB-pricing-cta-features {
    background: rgba(255, 255, 255, 0.35);
    color: rgba(45, 38, 26, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 12px 32px;
    font-size: 16px;
}

.NB-pricing-cta-features:hover {
    background: rgba(255, 255, 255, 0.55);
    color: #2d261a;
}

/* Trial callout: light-friendly version */
.NB-static-pricing .NB-pricing-trial-callout {
    margin: 28px auto;
    background: rgba(16, 135, 90, 0.08);
    border-color: rgba(16, 135, 90, 0.2);
    color: rgba(16, 110, 75, 0.8);
}

.NB-static-pricing .NB-pricing-trial-callout strong {
    color: #0d7a50;
}

/* Features link */
.NB-pricing-features-link {
    text-align: center;
    margin: 24px 0 0;
}

/* Compare links on pricing page */
.NB-pricing-compare-links {
    text-align: center;
    margin: 20px 0 0;
    font-size: 14px;
}

.NB-pricing-compare-label {
    color: rgba(45, 38, 26, 0.45);
    margin-right: 6px;
}

.NB-pricing-compare-links a {
    color: #8a6d1b;
    text-decoration: none;
}

.NB-pricing-compare-links a:hover {
    color: #5a4710;
}

.NB-pricing-compare-sep {
    color: rgba(45, 38, 26, 0.25);
    margin: 0 6px;
}

/* ---- FAQ Section ---- */

.NB-pricing-faq {
    max-width: 750px;
    margin: 40px auto 0;
}

.NB-pricing-faq-title {
    font-size: 24px;
    font-weight: 700;
    color: #2d261a;
    text-align: center;
    margin: 0 0 20px;
}

.NB-pricing-faq-item {
    margin: 0 0 8px;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.NB-pricing-faq-question {
    font-size: 15px;
    font-weight: 600;
    color: rgba(45, 38, 26, 0.9);
    margin: 0 0 4px;
    padding: 0;
}

h3.NB-pricing-faq-question {
    margin-top: 0;
}

.NB-pricing-faq-answer {
    font-size: 14px;
    color: rgba(45, 38, 26, 0.6);
    line-height: 1.55;
    margin: 0;
}

.NB-pricing-faq-answer a {
    color: #8a6d1b;
}

.NB-pricing-faq-answer a:hover {
    color: #5a4710;
}

/* ---- Features Page ---- */

.NB-static-features-hero {
    text-align: center;
    margin: 0 0 56px;
}

.NB-static-features-title {
    font-size: 42px;
    font-weight: 700;
    color: #2d261a;
    letter-spacing: -0.5px;
    margin: 0 0 12px;
}

.NB-static-features-subtitle {
    font-size: 17px;
    color: rgba(45, 38, 26, 0.65);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Feature section - alternating left-right layout */
.NB-feature-section {
    display: flex;
    align-items: center;
    gap: 48px;
    margin: 0 0 64px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.NB-feature-section:nth-child(even) {
    flex-direction: row-reverse;
}

.NB-feature-section-text {
    flex: 1;
    min-width: 0;
}

.NB-feature-section-screenshot {
    flex: 1;
    min-width: 0;
}

.NB-feature-section-screenshot img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

.NB-feature-section-screenshot .NB-feature-screenshot-placeholder {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    border: 2px dashed rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(45, 38, 26, 0.3);
    font-size: 14px;
}

.NB-feature-section-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px;
}

.NB-feature-badge-free {
    background: rgba(0, 0, 0, 0.08);
    color: rgba(45, 38, 26, 0.6);
}

.NB-feature-badge-premium {
    background: rgba(26, 138, 66, 0.12);
    color: #1a7a3a;
}

.NB-feature-badge-archive {
    background: rgba(13, 138, 124, 0.12);
    color: #0d7a6e;
}

.NB-feature-badge-pro {
    background: rgba(192, 90, 14, 0.12);
    color: #a85010;
    border: 1px solid rgba(192, 90, 14, 0.2);
}

.NB-feature-section-name {
    font-size: 26px;
    font-weight: 700;
    color: #2d261a;
    margin: 0 0 12px;
    letter-spacing: -0.3px;
}

.NB-feature-section-description {
    font-size: 16px;
    color: rgba(45, 38, 26, 0.7);
    line-height: 1.7;
    margin: 0;
}

.NB-feature-section-links {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.NB-feature-section-links .NB-feature-section-blog,
.NB-feature-section-links .NB-feature-section-cta {
    margin-top: 0;
}

.NB-feature-section-cta {
    display: inline-flex;
    align-items: center;
    margin-top: 16px;
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.4);
    color: rgba(45, 38, 26, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.NB-feature-section-cta:hover {
    background: rgba(255, 255, 255, 0.6);
    color: #2d261a;
}

/* Blog post link */
.NB-feature-section-blog {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    background: rgba(138, 109, 27, 0.08);
    color: #8a6d1b;
    border: 1px solid rgba(138, 109, 27, 0.18);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.NB-feature-section-blog:hover {
    background: rgba(138, 109, 27, 0.14);
    color: #6b5515;
    border-color: rgba(138, 109, 27, 0.28);
}

.NB-feature-blog-favicon {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Compare NewsBlur cross-link section */
.NB-features-compare {
    margin: 56px auto 0;
    max-width: 700px;
}

.NB-features-compare-inner {
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    padding: 32px 36px 28px;
    backdrop-filter: blur(8px);
}

.NB-features-compare-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 24px;
}

.NB-features-compare-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.12), transparent);
}

.NB-features-compare-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(45, 38, 26, 0.5);
    white-space: nowrap;
    margin: 0;
}

.NB-features-compare-links {
    display: flex;
    gap: 32px;
}

.NB-features-compare-group {
    flex: 1;
}

.NB-features-compare-group-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgba(45, 38, 26, 0.45);
    margin: 0 0 10px;
    padding: 0 0 0 12px;
}

.NB-features-compare-group-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.NB-compare-link-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    color: rgba(45, 38, 26, 0.7);
    font-size: 14px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.NB-compare-link-item:hover {
    background: rgba(255, 255, 255, 0.35);
    color: #2d261a;
}

.NB-compare-link-arrow {
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    font-size: 13px;
    color: rgba(192, 90, 14, 0.7);
}

.NB-compare-link-item:hover .NB-compare-link-arrow {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 600px) {
    .NB-features-compare-inner {
        padding: 24px 20px 20px;
    }
    .NB-features-compare-links {
        flex-direction: column;
        gap: 20px;
    }
}

.NB-features-bottom-cta {
    text-align: center;
    margin: 24px 0 0;
    padding: 40px;
}

.NB-features-bottom-cta-text {
    font-size: 22px;
    font-weight: 600;
    color: #2d261a;
    margin: 0 0 16px;
}

.NB-features-bottom-cta .NB-pricing-cta {
    margin: 0 8px;
}

/* ---- Compare Pages ---- */

.NB-static-compare-hero {
    text-align: center;
    margin: 0 0 48px;
}

.NB-static-compare-title {
    font-size: 38px;
    font-weight: 700;
    color: #2d261a;
    letter-spacing: -0.5px;
    margin: 0 0 12px;
}

.NB-static-compare-subtitle {
    font-size: 17px;
    color: rgba(45, 38, 26, 0.65);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Comparison table */
.NB-compare-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0 0 48px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.NB-compare-table th,
.NB-compare-table td {
    padding: 14px 20px;
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.NB-compare-table thead th {
    background: rgba(255, 255, 255, 0.4);
    color: #2d261a;
    font-size: 15px;
    font-weight: 700;
}

.NB-compare-table thead th:first-child {
    width: 40%;
}

.NB-compare-table tbody td {
    color: rgba(45, 38, 26, 0.75);
    font-size: 14px;
    background: rgba(255, 255, 255, 0.2);
}

.NB-compare-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.35);
}

.NB-compare-table tbody td:first-child {
    font-weight: 600;
    color: rgba(45, 38, 26, 0.9);
}

.NB-compare-check {
    color: #10b981;
    font-weight: 700;
}

.NB-compare-x {
    color: rgba(45, 38, 26, 0.2);
}

/* Compare narrative sections */
.NB-compare-section {
    margin: 0 0 40px;
    padding: 32px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.NB-compare-section-title {
    font-size: 22px;
    font-weight: 700;
    color: #2d261a;
    margin: 0 0 12px;
}

.NB-compare-section-text {
    font-size: 15px;
    color: rgba(45, 38, 26, 0.7);
    line-height: 1.7;
    margin: 0;
}

.NB-compare-bottom-cta {
    text-align: center;
    margin: 48px 0 0;
}

/* ---- About Page ---- */

/* Override old .NB-module styles from reader.css */
.NB-static-about .NB-module {
    display: none;
}

/* Hero */
.NB-about-hero {
    text-align: center;
    margin: 0 0 56px;
    padding: 0 24px;
}

.NB-about-hero-title {
    font-family: 'Chronicle Display A', 'Chronicle Display B', Georgia, serif;
    font-size: 36px;
    font-weight: 400;
    font-style: italic;
    color: rgba(45, 38, 26, 0.88);
    line-height: 1.35;
    max-width: 680px;
    margin: 0 auto;
    letter-spacing: -0.3px;
}

/* Sections */
.NB-about-section {
    margin: 0 0 56px;
}

.NB-about-section-title {
    font-family: 'Gotham Narrow A', 'Gotham Narrow B', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #D9A621;
    margin: 0 0 24px;
}

/* Why cards - 2x2 grid */
.NB-about-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.NB-about-card {
    padding: 28px 28px 24px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.NB-about-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
}

.NB-about-card-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: block;
    align-self: center;
}

/* Per-card icon colors via hue-rotate on the base #95968E grey */
.NB-about-card:nth-child(1) .NB-about-card-icon { filter: brightness(1.4) sepia(1) saturate(3) hue-rotate(75deg); }   /* green */
.NB-about-card:nth-child(2) .NB-about-card-icon { filter: brightness(1.4) sepia(1) saturate(3) hue-rotate(180deg); }  /* blue */
.NB-about-card:nth-child(3) .NB-about-card-icon { filter: brightness(1.4) sepia(1) saturate(3) hue-rotate(5deg); }    /* gold */
.NB-about-card:nth-child(4) .NB-about-card-icon { filter: brightness(1.4) sepia(1) saturate(3) hue-rotate(240deg); }  /* purple */
.NB-about-card:nth-child(5) .NB-about-card-icon { filter: brightness(1.4) sepia(1) saturate(3) hue-rotate(140deg); }  /* teal */
.NB-about-card:nth-child(6) .NB-about-card-icon { filter: brightness(1.4) sepia(1) saturate(3) hue-rotate(330deg); }  /* orange */
.NB-about-card:nth-child(7) .NB-about-card-icon { filter: brightness(1.4) sepia(1) saturate(3) hue-rotate(200deg); }  /* sky blue */
.NB-about-card:nth-child(8) .NB-about-card-icon { filter: brightness(1.4) sepia(1) saturate(3) hue-rotate(290deg); }  /* pink */

/* Inline SVG icons: override filter with direct color */
.NB-about-card:nth-child(2) .NB-about-card-icon-inline {
    filter: none;
    color: #5b9bd5;
}

h3.NB-about-card-title {
    font-family: 'Gotham Narrow A', 'Gotham Narrow B', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #2d261a;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.NB-about-card-text {
    font-size: 15px;
    color: rgba(45, 38, 26, 0.65);
    line-height: 1.6;
    margin: 0;
}

/* Team */
.NB-about-team {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.NB-about-person {
    flex: 1;
    min-width: 180px;
    text-align: center;
}

.NB-about-person-photo {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin: 0 0 12px;
}

.NB-about-person-name {
    font-family: 'Gotham Narrow A', 'Gotham Narrow B', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #2d261a;
    margin: 0 0 2px;
}

.NB-about-person-role {
    font-size: 13px;
    color: rgba(45, 38, 26, 0.45);
    margin: 0 0 8px;
}

.NB-about-person-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
}

.NB-about-person-links a {
    font-size: 13px;
    color: rgba(45, 38, 26, 0.5);
    text-decoration: none;
    transition: color 0.15s ease;
}

.NB-about-person-links a:hover {
    color: #8a6d1b;
}

/* Timeline */
.NB-about-timeline {
    position: relative;
    padding-left: 80px;
}

.NB-about-timeline::before {
    content: '';
    position: absolute;
    left: 52px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: linear-gradient(180deg, #D9A621 0%, rgba(217, 166, 33, 0.15) 100%);
}

.NB-about-timeline-item {
    position: relative;
    margin: 0 0 32px;
}

.NB-about-timeline-item:last-child {
    margin-bottom: 0;
}

.NB-about-timeline-item::before {
    content: '';
    position: absolute;
    left: -32px;
    top: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #D9A621;
    box-shadow: 0 0 0 3px rgba(217, 166, 33, 0.2);
}

.NB-about-timeline-year {
    font-family: 'Gotham Narrow A', 'Gotham Narrow B', sans-serif;
    position: absolute;
    left: -76px;
    top: 2px;
    font-size: 14px;
    font-weight: 700;
    color: rgba(45, 38, 26, 0.4);
    letter-spacing: 0.5px;
    text-align: right;
    width: 36px;
}

.NB-about-timeline-content p {
    font-size: 15px;
    color: rgba(45, 38, 26, 0.65);
    line-height: 1.65;
    margin: 0;
}

/* Tech stack */
.NB-about-tech {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

.NB-about-tech-group {
    flex: 1;
    min-width: 200px;
}

.NB-about-tech-group-title {
    font-family: 'Gotham Narrow A', 'Gotham Narrow B', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(45, 38, 26, 0.4);
    margin: 0 0 12px;
}

.NB-about-tech-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.NB-about-tech-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(45, 38, 26, 0.65);
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.06);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.NB-about-tech-pill:hover {
    background: rgba(255, 255, 255, 0.5);
    color: #2d261a;
    border-color: rgba(0, 0, 0, 0.12);
}

.NB-about-tech-pill-github {
    background: rgba(138, 109, 27, 0.1);
    color: #8a6d1b;
    border-color: rgba(138, 109, 27, 0.2);
}

.NB-about-tech-pill-github:hover {
    background: rgba(138, 109, 27, 0.12);
    color: #6b5515;
    border-color: rgba(138, 109, 27, 0.25);
}

.NB-about-github-icon {
    width: 14px;
    height: 14px;
    opacity: 0.6;
}

/* Legal */
.NB-about-section-legal {
    text-align: center;
    margin: 0 0 48px;
}

.NB-about-legal-link {
    font-size: 14px;
    color: rgba(45, 38, 26, 0.5);
    text-decoration: none;
    transition: color 0.15s ease;
}

.NB-about-legal-link:hover {
    color: #8a6d1b;
}

.NB-about-legal-sep {
    color: rgba(45, 38, 26, 0.2);
    margin: 0 12px;
}

/* Tagline */
.NB-about-tagline {
    text-align: center;
    margin: 0 0 24px;
}

.NB-about-tagline-text {
    font-family: 'Chronicle Display A', 'Chronicle Display B', Georgia, serif;
    font-size: 20px;
    font-style: italic;
    color: rgba(45, 38, 26, 0.5);
    margin: 0 0 16px;
}

.NB-about-tagline-img {
    width: 400px;
    max-width: 100%;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.NB-about-tagline-img:hover {
    opacity: 1;
}

/* ---- FAQ Page ---- */

/* Hide old .NB-module markup on the FAQ page */
.NB-static-faq .NB-module {
    display: none;
}

.NB-faq-container {
    max-width: 900px;
    margin: 0 auto;
}

.NB-faq-hero {
    text-align: center;
    margin: 0 0 56px;
    padding: 0 24px;
}

.NB-faq-hero-title {
    font-family: 'Chronicle Display A', 'Chronicle Display B', Georgia, serif;
    font-size: 36px;
    font-weight: 400;
    font-style: italic;
    color: rgba(45, 38, 26, 0.88);
    line-height: 1.35;
    max-width: 680px;
    margin: 0 auto 12px;
    letter-spacing: -0.3px;
}

.NB-faq-hero-subtitle {
    font-size: 17px;
    color: rgba(45, 38, 26, 0.55);
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.6;
}

.NB-faq-section {
    margin: 0 0 48px;
}

.NB-faq-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.NB-faq-item {
    padding: 20px 24px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

h3.NB-faq-question {
    font-family: 'Gotham Narrow A', 'Gotham Narrow B', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: rgba(45, 38, 26, 0.9);
    margin: 0 0 8px;
    line-height: 1.35;
}

.NB-faq-answer {
    font-size: 15px;
    color: rgba(45, 38, 26, 0.6);
    line-height: 1.65;
    margin: 0;
}

.NB-faq-answer + .NB-faq-answer {
    margin-top: 8px;
}

.NB-faq-answer a {
    color: #8a6d1b;
    text-decoration: none;
    transition: color 0.15s ease;
}

.NB-faq-answer a:hover {
    color: #5a4710;
}

.NB-faq-answer code {
    background: rgba(0, 0, 0, 0.06);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 13px;
    color: rgba(45, 38, 26, 0.75);
}

.NB-faq-answer ul {
    margin: 8px 0 0;
    padding: 0 0 0 20px;
}

.NB-faq-answer li {
    margin: 0 0 4px;
    color: rgba(45, 38, 26, 0.6);
}

.NB-faq-bullet-icons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 4px 0 0;
}

.NB-faq-bullet-icon {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: rgba(45, 38, 26, 0.6);
}

.NB-faq-bullet-icon img {
    width: 14px;
    height: 14px;
}

.NB-faq-tier-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 12px 0 0;
}

a.NB-faq-tier {
    display: block;
    padding: 14px 18px;
    border-radius: 10px;
    border: 0;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s ease, transform 0.15s ease;
    background: rgba(75, 85, 99, 0.07);
}

a.NB-faq-tier:hover {
    transform: translateY(-1px);
}

a.NB-faq-tier-free {
    background: rgba(75, 85, 99, 0.07);
}

a.NB-faq-tier-free:hover {
    background: rgba(75, 85, 99, 0.13);
}

a.NB-faq-tier-premium {
    background: rgba(22, 163, 74, 0.08);
}

a.NB-faq-tier-premium:hover {
    background: rgba(22, 163, 74, 0.15);
}

a.NB-faq-tier-archive {
    background: rgba(13, 148, 136, 0.09);
}

a.NB-faq-tier-archive:hover {
    background: rgba(13, 148, 136, 0.16);
}

a.NB-faq-tier-pro {
    background: rgba(234, 88, 12, 0.08);
}

a.NB-faq-tier-pro:hover {
    background: rgba(234, 88, 12, 0.16);
}

.NB-faq-tier-name {
    font-family: 'Gotham Narrow A', 'Gotham Narrow B', sans-serif;
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 4px;
    transition: color 0.2s;
}

/* Distinct tier title colors - light mode */
.NB-faq-tier-free .NB-faq-tier-name {
    color: rgba(75, 85, 99, 0.9);
}
.NB-faq-tier-premium .NB-faq-tier-name {
    color: rgba(22, 163, 74, 0.9);
}
.NB-faq-tier-archive .NB-faq-tier-name {
    color: rgba(13, 148, 136, 0.9);
}
.NB-faq-tier-pro .NB-faq-tier-name {
    color: rgba(234, 88, 12, 0.9);
}

/* Tier title hover colors - light mode */
a.NB-faq-tier-free:hover .NB-faq-tier-name {
    color: rgba(55, 65, 81, 1);
}
a.NB-faq-tier-premium:hover .NB-faq-tier-name {
    color: rgba(22, 163, 74, 1);
}
a.NB-faq-tier-archive:hover .NB-faq-tier-name {
    color: rgba(13, 148, 136, 1);
}
a.NB-faq-tier-pro:hover .NB-faq-tier-name {
    color: rgba(234, 88, 12, 1);
}

.NB-faq-tier-desc {
    font-size: 13px;
    color: rgba(45, 38, 26, 0.5);
    line-height: 1.5;
    margin: 0;
}

.NB-faq-feature-image {
    margin: 16px 0 0;
    padding: 0;
    text-align: center;
}

.NB-faq-feature-image img {
    display: inline-block;
    /* 2x retina screenshots are marked with srcset="... 2x" so the browser
       renders them at their intrinsic half size. 1x images render natively. */
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid rgba(45, 38, 26, 0.1);
    box-shadow: 0 4px 12px -6px rgba(45, 38, 26, 0.2);
}

.NB-faq-item-links {
    margin: 16px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-family: 'Gotham Narrow A', 'Gotham Narrow B', sans-serif;
}

a.NB-faq-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

a.NB-faq-button:active {
    transform: translateY(1px);
}

a.NB-faq-button-primary {
    background: #f5e8c2;
    border-color: rgba(138, 109, 27, 0.25);
    color: #6b5110;
}

a.NB-faq-button-primary:hover {
    background: #ecd896;
    border-color: rgba(138, 109, 27, 0.5);
    color: #4a3a0a;
}

a.NB-faq-button-secondary {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(45, 38, 26, 0.12);
    color: rgba(45, 38, 26, 0.7);
}

a.NB-faq-button-secondary:hover {
    background: #fff;
    border-color: rgba(45, 38, 26, 0.2);
    color: rgba(45, 38, 26, 0.95);
}

.NB-faq-blog-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url("/media/img/favicon.png") no-repeat center center;
    background-size: contain;
    flex-shrink: 0;
}

.NB-faq-bullet-list {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
}

.NB-faq-bullet-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    color: rgba(45, 38, 26, 0.6);
}

.NB-faq-bullet-list li img {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.NB-faq-loading {
    text-align: center;
    padding: 60px 20px;
    color: rgba(45, 38, 26, 0.4);
    font-size: 15px;
}

.NB-faq-error {
    text-align: center;
    padding: 60px 20px;
    color: rgba(160, 50, 50, 0.7);
    font-size: 15px;
}

.NB-faq-bottom-cta {
    text-align: center;
    margin: 24px 0 0;
    padding: 40px;
}

.NB-faq-bottom-cta-text {
    font-size: 22px;
    font-weight: 600;
    color: #2d261a;
    margin: 0 0 8px;
}

.NB-faq-bottom-cta-subtext {
    font-size: 15px;
    color: rgba(45, 38, 26, 0.5);
    margin: 0 0 20px;
}

.NB-faq-bottom-cta .NB-pricing-cta {
    margin: 0 8px;
}

/* ---- API Page ---- */

.NB-api-container {
    max-width: 900px;
    margin: 0 auto;
}

.NB-api-hero {
    text-align: center;
    margin: 0 0 48px;
    padding: 0 24px;
}

.NB-api-hero-title {
    font-size: 42px;
    font-weight: 700;
    color: #2d261a;
    letter-spacing: -0.5px;
    margin: 0 0 12px;
}

.NB-api-hero-subtitle {
    font-size: 17px;
    color: rgba(45, 38, 26, 0.6);
    line-height: 1.6;
    margin: 0;
}

.NB-api-section {
    margin: 0 0 40px;
    padding: 32px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.NB-api-section-title {
    font-family: 'Gotham Narrow A', 'Gotham Narrow B', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #2d261a;
    margin: 0 0 16px;
    padding: 0 0 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.NB-api-section-content p {
    font-size: 15px;
    color: rgba(45, 38, 26, 0.7);
    line-height: 1.7;
    margin: 0 0 12px;
}

.NB-api-section-content p:last-child {
    margin-bottom: 0;
}

.NB-api-section-content a {
    color: #8a6d1b;
    text-decoration: none;
    transition: color 0.15s ease;
}

.NB-api-section-content a:hover {
    color: #5a4710;
}

.NB-api-section-content code {
    font-size: 13px;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    color: rgba(45, 38, 26, 0.85);
}

.NB-api-section-content h3 {
    font-size: 16px;
    font-weight: 700;
    color: rgba(45, 38, 26, 0.9);
    margin: 32px 0 8px;
    padding: 16px 0 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.NB-api-section-content h3:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.NB-api-section-content h3 tt {
    font-size: 15px;
}

.NB-api-section-content h4 {
    font-size: 14px;
    font-weight: 600;
    color: rgba(45, 38, 26, 0.7);
    margin: 16px 0 8px;
}

.NB-api-section-content ul {
    margin: 8px 0 12px 0;
    padding-left: 20px;
}

.NB-api-section-content li {
    font-size: 14px;
    color: rgba(45, 38, 26, 0.65);
    line-height: 1.6;
    margin: 0 0 6px;
}

/* TOC */
.NB-static-api .NB-api-toc-header {
    font-family: 'Gotham Narrow A', 'Gotham Narrow B', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #D9A621;
    margin: 20px 0 8px;
    padding: 0;
    border: none;
    background: none;
}

.NB-static-api .NB-api-toc-header:first-child {
    margin-top: 0;
}

.NB-static-api .NB-api-toc {
    list-style: none;
    margin: 0 0 0 0;
    padding: 0;
}

.NB-static-api .NB-api-toc li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 6px;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.NB-static-api .NB-api-toc li:hover {
    background: rgba(255, 255, 255, 0.3);
}

.NB-static-api .NB-api-toc a {
    font-size: 14px;
    color: rgba(45, 38, 26, 0.8);
    text-decoration: none;
    width: auto;
    flex-shrink: 0;
}

.NB-static-api .NB-api-toc a:hover {
    color: #8a6d1b;
}

.NB-static-api .NB-api-toc a code {
    font-size: 13px;
    padding: 1px 5px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 3px;
}

.NB-static-api .NB-api-toc .NB-api-link-desc {
    font-size: 13px;
    color: rgba(45, 38, 26, 0.4);
    text-align: right;
    flex: 1;
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
}

/* Param tables */
.NB-static-api .NB-api-section-content table {
    width: 100%;
    border-spacing: 0;
    margin: 16px 0 12px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.2);
}

.NB-static-api .NB-api-section-content table th {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(45, 38, 26, 0.6);
    background: rgba(255, 255, 255, 0.3);
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    border-right: none;
}

.NB-static-api .NB-api-section-content table td {
    font-size: 14px;
    color: rgba(45, 38, 26, 0.7);
    padding: 8px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    border-right: none;
    white-space: normal;
    vertical-align: top;
}

.NB-static-api .NB-api-section-content table td:first-child {
    font-weight: 600;
    color: rgba(45, 38, 26, 0.85);
    white-space: nowrap;
}

.NB-static-api .NB-api-section-content table tr:last-child td {
    border-bottom: none;
}

/* Badges */
.NB-static-api .optional,
.NB-static-api .required {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 6px;
    border-radius: 3px;
    margin-right: 6px;
}

.NB-static-api .optional {
    background: rgba(152, 200, 146, 0.2);
    border: 1px solid rgba(152, 200, 146, 0.3);
    color: rgba(152, 200, 146, 0.9);
}

.NB-static-api .required {
    background: rgba(217, 144, 15, 0.15);
    border: 1px solid rgba(217, 144, 15, 0.35);
    color: #996b0a;
}

/* Anchor links */
.NB-static-api .NB-anchor {
    position: relative;
    top: -100px;
    display: block;
}

.NB-static-api .NB-api-endpoint-param-desc {
    width: 100%;
    white-space: normal;
}

/* ---- Forgot Password Page ---- */

.NB-forgot-password-container {
    max-width: 480px;
    margin: 0 auto;
}

.NB-forgot-password-hero {
    text-align: center;
    margin: 0 0 40px;
}

.NB-forgot-password-title {
    font-size: 36px;
    font-weight: 700;
    color: #2d261a;
    letter-spacing: -0.5px;
    margin: 0 0 12px;
}

.NB-forgot-password-subtitle {
    font-size: 16px;
    color: rgba(45, 38, 26, 0.6);
    line-height: 1.6;
    margin: 0;
}

.NB-forgot-password-card {
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 36px 40px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.NB-forgot-password-field {
    margin: 0 0 24px;
}

.NB-forgot-password-field label {
    display: block;
    font-family: 'Gotham Narrow A', 'Gotham Narrow B', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: rgba(45, 38, 26, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 8px;
}

.NB-forgot-password-field input[type="text"],
.NB-forgot-password-field input[type="email"],
.NB-forgot-password-field input[type="password"] {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    color: #2d261a;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.NB-forgot-password-field input:focus {
    border-color: rgba(138, 109, 27, 0.5);
    background: rgba(255, 255, 255, 0.7);
}

.NB-forgot-password-field input::placeholder {
    color: rgba(45, 38, 26, 0.3);
}

.NB-forgot-password-errors {
    margin: 0 0 20px;
    padding: 12px 16px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 8px;
    font-size: 14px;
    color: rgba(252, 165, 165, 0.9);
    line-height: 1.5;
}

.NB-forgot-password-errors ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.NB-forgot-password-submit {
    display: block;
    width: 100%;
    padding: 14px 24px;
    font-family: 'Gotham Narrow A', 'Gotham Narrow B', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.8) 0%, rgba(22, 163, 74, 0.8) 100%);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-image 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
    letter-spacing: 0.2px;
}

.NB-forgot-password-submit:hover {
    background: linear-gradient(135deg, rgba(34, 197, 94, 1) 0%, rgba(22, 163, 74, 1) 100%);
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3);
}

.NB-forgot-password-submit:active {
    transform: scale(0.96);
}

.NB-forgot-password-back {
    text-align: center;
    margin: 24px 0 0;
}

.NB-forgot-password-back a {
    font-size: 14px;
    color: rgba(45, 38, 26, 0.4);
    text-decoration: none;
    transition: color 0.15s ease;
}

.NB-forgot-password-back a:hover {
    color: #8a6d1b;
}

/* ---- Responsive ---- */

@media (max-width: 900px) {
    .NB-static-pricing .NB-body-inner,
    .NB-static-features .NB-body-inner,
    .NB-static-compare .NB-body-inner,
    .NB-static-about .NB-body-inner,
    .NB-static-faq .NB-body-inner,
    .NB-static-api .NB-body-inner,
    .NB-static-forgot-password .NB-body-inner {
        padding: 70px 16px 32px;
    }

    .NB-api-hero-title {
        font-size: 30px;
    }

    .NB-api-section {
        padding: 20px;
    }

    .NB-static-pricing-title,
    .NB-static-features-title,
    .NB-static-compare-title {
        font-size: 30px;
    }

    .NB-about-hero-title,
    .NB-faq-hero-title {
        font-size: 26px;
    }

    .NB-static .NB-splash-info.NB-splash-top,
    .NB-welcome .NB-splash-info.NB-splash-top {
        height: auto;
        padding: 0;
    }

    /* Hide page title on mobile to save space */
    .NB-splash-top-title {
        display: none;
    }

    /* Nav: links left, toggle right */
    .NB-static .NB-splash-top-nav,
    .NB-welcome .NB-splash-top-nav {
        gap: 4px;
        padding: 6px 10px;
        height: auto;
        justify-content: flex-start;
    }

    .NB-static .NB-splash-top-links,
    .NB-welcome .NB-splash-top-links {
        gap: 2px;
    }

    .NB-static .NB-splash-top-link a,
    .NB-welcome .NB-splash-top-link a {
        font-size: 12px;
        padding: 4px 6px;
        letter-spacing: 0;
        line-height: 16px;
    }

    /* Hide dropdown arrows on mobile since dropdowns are hidden */
    .NB-splash-nav-has-dropdown > a::after {
        display: none;
    }

    /* Push toggle to the right */
    .NB-static .NB-splash-top-logo,
    .NB-welcome .NB-splash-top-logo {
        position: static;
        flex: 1;
        gap: 8px;
        height: auto;
        align-items: center;
    }

    .NB-static .NB-splash-top-links,
    .NB-welcome .NB-splash-top-links,
    .NB-static .NB-splash-top-logo,
    .NB-welcome .NB-splash-top-logo,
    .NB-theme-toggle {
        align-self: center;
    }

    /* Hide the NewsBlur text logo on mobile */
    .NB-static .NB-splash-top-logo .NB-splash-blurred-logo {
        display: none;
    }

    /* Shrink theme toggle */
    .NB-theme-toggle {
        gap: 4px;
        margin-top: -1px;
    }

    .NB-theme-toggle-sun,
    .NB-theme-toggle-moon {
        font-size: 11px;
    }

    .NB-theme-toggle-track {
        width: 28px;
        height: 16px;
    }

    .NB-theme-toggle-thumb {
        width: 11px;
        height: 11px;
        top: 1.5px;
        left: 1.5px;
    }

    body.NB-dark .NB-theme-toggle-thumb {
        transform: translateX(12px);
    }

    .NB-feature-section {
        flex-direction: column !important;
        gap: 24px;
        padding: 24px;
    }

    .NB-about-cards {
        grid-template-columns: 1fr;
    }

    .NB-about-team {
        flex-wrap: wrap;
        justify-content: center;
    }

    .NB-about-person {
        min-width: 140px;
        flex: 0 1 auto;
    }

    .NB-about-timeline {
        padding-left: 64px;
    }

    .NB-about-timeline::before {
        left: 40px;
    }

    .NB-about-timeline-year {
        left: -60px;
    }

    .NB-about-tech {
        flex-direction: column;
        gap: 24px;
    }

    .NB-compare-table {
        font-size: 13px;
    }

    .NB-compare-table th,
    .NB-compare-table td {
        padding: 10px 12px;
    }

    .NB-faq-item {
        padding: 16px 18px;
    }

    .NB-faq-tier-summary {
        grid-template-columns: 1fr;
    }

    .NB-forgot-password-title {
        font-size: 28px;
    }

    .NB-forgot-password-card {
        padding: 28px 24px;
    }

    /* NewsBlur branding above page title on mobile */
    .NB-static .NB-mobile-logo-link {
        display: block;
        text-align: center;
        margin: -48px auto 8px;
    }

    .NB-static .NB-mobile-logo {
        width: 146px;
        height: 28px;
        margin: 0 auto;
        background: url('/media/embed/logo_newsblur_blur.png') no-repeat center center;
        background-size: contain;
    }

    /* Hide tier badges on feature detail pages */
    .NB-feature-section-badge {
        display: none;
    }

    body.NB-dark.NB-static .NB-mobile-logo {
        background-image: url('/media/embed/logo_newsblur_blur_dark.png');
    }
}

/* ---- Theme Toggle ---- */

.NB-theme-toggle {
    display: none;
}

.NB-static .NB-theme-toggle,
.NB-welcome .NB-theme-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    cursor: pointer;
}

.NB-theme-toggle-sun,
.NB-theme-toggle-moon {
    color: rgba(0, 0, 0, 0.2);
    transition: color 0.3s ease;
    flex-shrink: 0;
    display: block;
}

/* Active sun icon in light mode */
body:not(.NB-dark) .NB-theme-toggle-sun {
    color: #b8960a;
}

/* Dark mode: dim icons use white */
body.NB-dark .NB-theme-toggle-sun,
body.NB-dark .NB-theme-toggle-moon {
    color: rgba(255, 255, 255, 0.25);
}

/* Active moon icon in dark mode */
body.NB-dark .NB-theme-toggle-moon {
    color: #8bb8d8;
}

.NB-theme-toggle-track {
    position: relative;
    width: 36px;
    height: 20px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: rgba(0, 0, 0, 0.08);
    cursor: pointer;
    padding: 0;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
}

.NB-theme-toggle-track:hover {
    background: rgba(0, 0, 0, 0.12);
    border-color: rgba(0, 0, 0, 0.25);
}

/* Dark mode: revert toggle track to white-based */
body.NB-dark .NB-theme-toggle-track {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
}

body.NB-dark .NB-theme-toggle-track:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.NB-theme-toggle-track:focus-visible {
    border-color: #FBDB9B;
    box-shadow: 0 0 0 2px rgba(251, 219, 155, 0.3);
}

.NB-theme-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #555;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.3s ease;
    display: block;
}

/* Dark mode: slide thumb right, shift color cool */
body.NB-dark .NB-theme-toggle-thumb {
    transform: translateX(16px);
    background: #8bb8d8;
}

/* ---- Dark mode overrides ---- */

/* Transitions on base selectors so they animate in BOTH directions.
   Gradients can't be transitioned, so we split into:
   - background-color: solid base color that transitions smoothly
   - background-image: subtle semi-transparent gradient overlay (snaps but unnoticeable) */
body.NB-static {
    background-color: #ebe0c2;
    background-image: linear-gradient(180deg,
        rgba(255,255,255,0.07) 0%,
        rgba(255,255,255,0.03) 20%,
        transparent 40%,
        rgba(0,0,0,0.02) 60%,
        rgba(0,0,0,0.04) 80%,
        rgba(0,0,0,0.06) 100%);
    transition: background-color 0.4s ease, color 0.4s ease;
}

body.NB-static h1,
body.NB-static h2,
body.NB-static h3,
body.NB-static h4 {
    transition: color 0.4s ease;
}

body.NB-static a {
    transition: color 0.3s ease;
}

/* Light mode: frosted glass header/footer */
body.NB-static:not(.NB-dark) .NB-splash-info {
    background-color: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(12px);
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.NB-static:not(.NB-dark) .NB-splash-info.NB-splash-bottom {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    border-top-color: rgba(0, 0, 0, 0.08);
}

/* Light mode: dark footer link text on frosted glass */
body.NB-static:not(.NB-dark) .NB-splash-info .NB-splash-links .NB-splash-link a {
    color: rgba(45, 38, 26, 0.55);
}

body.NB-static:not(.NB-dark) .NB-splash-info .NB-splash-links .NB-splash-link a:hover {
    color: #2d261a;
}

body.NB-static:not(.NB-dark) .NB-splash-info .NB-splash-links .NB-splash-link.NB-active a {
    color: #2d261a;
}

body.NB-static:not(.NB-dark) .NB-splash-info .NB-splash-links .NB-splash-link.NB-active a:hover {
    color: #000;
}

/* Dark mode: teal header/footer */
body.NB-dark.NB-static .NB-splash-info {
    background-color: rgba(72, 132, 128, 0.88);
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

/* Dark mode: restore light nav links on teal header */
body.NB-dark .NB-splash-top-link a {
    color: rgba(255, 255, 255, 0.5);
}

body.NB-dark .NB-splash-top-link a:hover {
    color: #FBDB9B;
    background: rgba(255, 255, 255, 0.06);
}

body.NB-dark.NB-static-features .NB-splash-top-link-features > a,
body.NB-dark.NB-static-pricing .NB-splash-top-link-pricing > a,
body.NB-dark.NB-static-about .NB-splash-top-link-about > a,
body.NB-dark.NB-static-faq .NB-splash-top-link-faq > a,
body.NB-dark.NB-static-compare .NB-splash-top-link-features > a {
    color: #FBDB9B;
    border-color: rgba(251, 219, 155, 0.3);
}

body.NB-dark.NB-static .NB-splash-info.NB-splash-bottom {
    background: rgba(72, 132, 128, 0.9);
    border-top-color: rgba(255, 255, 255, 0.15);
}

/* Dark mode: teal background for static and welcome pages */
body.NB-dark.NB-static,
body.NB-dark.NB-welcome,
body.NB-dark.NB-welcome #NB-splash {
    background-color: #2a524e;
    background-image: linear-gradient(180deg,
        rgba(255,255,255,0.04) 0%,
        rgba(255,255,255,0.02) 20%,
        transparent 40%,
        rgba(0,0,0,0.02) 60%,
        rgba(0,0,0,0.04) 80%,
        rgba(0,0,0,0.06) 100%);
    color: #c0c0c0;
}

body.NB-dark.NB-static h1,
body.NB-dark.NB-static h2,
body.NB-dark.NB-static h3,
body.NB-dark.NB-static h4 {
    color: #e0e0e0;
}

body.NB-dark.NB-static a {
    color: #FBDB9B;
}

body.NB-dark.NB-static a:hover {
    color: #fce8b8;
}

/* Dark mode: dark frosted glass dropdowns */
.NB-dark .NB-splash-dropdown-inner {
    background: rgba(16, 20, 28, 0.95);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.NB-dark .NB-splash-dropdown-heading {
    color: rgba(255, 255, 255, 0.35);
}

.NB-dark .NB-splash-dropdown-heading-link {
    color: rgba(251, 219, 155, 0.6);
}

.NB-dark .NB-splash-dropdown-heading-link:hover {
    color: #FBDB9B;
}

.NB-dark .NB-splash-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

.NB-dark .NB-splash-dropdown-item-name {
    color: rgba(255, 255, 255, 0.9);
}

.NB-dark .NB-splash-dropdown-item:hover .NB-splash-dropdown-item-name {
    color: white;
}

.NB-dark .NB-splash-dropdown-item-desc {
    color: rgba(255, 255, 255, 0.4);
}

.NB-dark .NB-splash-dropdown-price {
    color: #FBDB9B;
}

.NB-dark .NB-splash-dropdown-divider {
    background: rgba(255, 255, 255, 0.08);
}

.NB-dark .NB-splash-dropdown-grid-item {
    color: rgba(255, 255, 255, 0.55);
}

.NB-dark .NB-splash-dropdown-grid-item:hover {
    color: #FBDB9B;
    background: rgba(255, 255, 255, 0.04);
}

body.NB-dark.NB-static-feature-training .NB-splash-dropdown-item-training,
body.NB-dark.NB-static-feature-ask-ai .NB-splash-dropdown-item-ask-ai,
body.NB-dark.NB-static-feature-web-feeds .NB-splash-dropdown-item-web-feeds,
body.NB-dark.NB-static-feature-newsletters .NB-splash-dropdown-item-newsletters,
body.NB-dark.NB-static-feature-search .NB-splash-dropdown-item-search,
body.NB-dark.NB-static-feature-archive .NB-splash-dropdown-item-archive,
body.NB-dark.NB-static-feature-saved .NB-splash-dropdown-item-saved,
body.NB-dark.NB-static-feature-native-apps .NB-splash-dropdown-item-native-apps {
    background: rgba(255, 255, 255, 0.06);
}

body.NB-dark.NB-static-feature-training .NB-splash-dropdown-item-training .NB-splash-dropdown-item-name,
body.NB-dark.NB-static-feature-ask-ai .NB-splash-dropdown-item-ask-ai .NB-splash-dropdown-item-name,
body.NB-dark.NB-static-feature-web-feeds .NB-splash-dropdown-item-web-feeds .NB-splash-dropdown-item-name,
body.NB-dark.NB-static-feature-newsletters .NB-splash-dropdown-item-newsletters .NB-splash-dropdown-item-name,
body.NB-dark.NB-static-feature-search .NB-splash-dropdown-item-search .NB-splash-dropdown-item-name,
body.NB-dark.NB-static-feature-archive .NB-splash-dropdown-item-archive .NB-splash-dropdown-item-name,
body.NB-dark.NB-static-feature-saved .NB-splash-dropdown-item-saved .NB-splash-dropdown-item-name,
body.NB-dark.NB-static-feature-native-apps .NB-splash-dropdown-item-native-apps .NB-splash-dropdown-item-name {
    color: #FBDB9B;
}

body.NB-dark.NB-static-compare-feedly .NB-splash-dropdown-grid-item-compare-feedly,
body.NB-dark.NB-static-compare-inoreader .NB-splash-dropdown-grid-item-compare-inoreader,
body.NB-dark.NB-static-compare-readwise .NB-splash-dropdown-grid-item-compare-readwise,
body.NB-dark.NB-static-compare-old-reader .NB-splash-dropdown-grid-item-compare-old-reader,
body.NB-dark.NB-static-compare-feedbin .NB-splash-dropdown-grid-item-compare-feedbin,
body.NB-dark.NB-static-alt-feedly .NB-splash-dropdown-grid-item-alt-feedly,
body.NB-dark.NB-static-alt-google-reader .NB-splash-dropdown-grid-item-alt-google-reader,
body.NB-dark.NB-static-alt-open-source .NB-splash-dropdown-grid-item-alt-open-source,
body.NB-dark.NB-static-alt-inoreader .NB-splash-dropdown-grid-item-alt-inoreader,
body.NB-dark.NB-static-alt-self-hosted .NB-splash-dropdown-grid-item-alt-self-hosted {
    color: #FBDB9B !important;
    background: rgba(251, 219, 155, 0.1);
}

.NB-dark .NB-feature-section {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.05);
}

.NB-dark .NB-static-features-title {
    color: rgba(255, 255, 255, 0.95);
}

.NB-dark .NB-static-features-subtitle {
    color: rgba(255, 255, 255, 0.55);
}

.NB-dark .NB-feature-section-name {
    color: rgba(255, 255, 255, 0.9);
}

.NB-dark .NB-feature-section-description {
    color: rgba(255, 255, 255, 0.6);
}

.NB-dark .NB-feature-section-blog {
    color: #FBDB9B;
    background: rgba(251, 219, 155, 0.08);
    border-color: rgba(251, 219, 155, 0.15);
}

.NB-dark .NB-feature-section-blog:hover {
    color: #fce8b8;
    background: rgba(251, 219, 155, 0.14);
    border-color: rgba(251, 219, 155, 0.25);
}

.NB-dark .NB-feature-badge-free {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
}

.NB-dark .NB-feature-badge-premium {
    background: rgba(64, 107, 108, 0.3);
    color: #7cc5c6;
}

.NB-dark .NB-feature-badge-archive {
    background: rgba(217, 119, 6, 0.2);
    color: #fbbf24;
}

.NB-dark .NB-feature-badge-pro {
    background: rgba(217, 119, 6, 0.35);
    color: #fcd34d;
    border-color: rgba(217, 119, 6, 0.4);
}

.NB-dark .NB-features-compare-inner {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

.NB-dark .NB-features-compare-title {
    color: rgba(255, 255, 255, 0.5);
}

.NB-dark .NB-features-compare-rule {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
}

.NB-dark .NB-features-compare-group-label {
    color: rgba(255, 255, 255, 0.4);
}

/* Feature detail pages - dark mode */
.NB-dark .NB-feature-detail-title {
    color: rgba(255, 255, 255, 0.95);
}

.NB-dark .NB-feature-detail-subtitle {
    color: rgba(255, 255, 255, 0.55);
}

.NB-dark .NB-feature-detail-caption {
    color: rgba(255, 255, 255, 0.4);
}

.NB-dark .NB-feature-detail-how h2,
.NB-dark .NB-feature-detail-faq h2 {
    color: rgba(255, 255, 255, 0.9);
}

.NB-dark .NB-feature-detail-step {
    color: rgba(255, 255, 255, 0.7);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.NB-dark .NB-feature-detail-step::before {
    background: rgba(251, 219, 155, 0.15);
    color: #FBDB9B;
}

.NB-dark .NB-feature-detail-faq-item {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.NB-dark .NB-feature-detail-faq-q {
    color: rgba(255, 255, 255, 0.85);
}

.NB-dark .NB-feature-detail-faq-a {
    color: rgba(255, 255, 255, 0.5);
}

.NB-dark .NB-feature-detail-cta-primary {
    background: linear-gradient(135deg, #FBDB9B 0%, #f0c96e 100%);
    color: #2a2a1e !important;
}

.NB-dark .NB-feature-detail-cta-primary:hover {
    background: linear-gradient(135deg, #fce5b5 0%, #f5d580 100%);
    color: #2a2a1e !important;
}

.NB-dark .NB-feature-detail-cta-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
}

.NB-dark .NB-feature-detail-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.95);
}

/* Crosslinks - dark mode */
.NB-dark .NB-feature-detail-crosslinks h2 {
    color: rgba(255, 255, 255, 0.9);
}

.NB-dark .NB-feature-detail-crosslink {
    background: rgba(255, 255, 255, 0.06);
}

.NB-dark .NB-feature-detail-crosslink:hover {
    background: rgba(255, 255, 255, 0.1);
}

.NB-dark .NB-feature-detail-crosslink-name {
    color: rgba(255, 255, 255, 0.85);
}

.NB-dark .NB-feature-detail-crosslink-desc {
    color: rgba(255, 255, 255, 0.45);
}

/* Active crosslink in dark mode - classes are on body so use compound selector */
.NB-dark.NB-static-feature-training .NB-feature-detail-crosslink-training,
.NB-dark.NB-static-feature-ask-ai .NB-feature-detail-crosslink-ask-ai,
.NB-dark.NB-static-feature-web-feeds .NB-feature-detail-crosslink-web-feeds,
.NB-dark.NB-static-feature-newsletters .NB-feature-detail-crosslink-newsletters,
.NB-dark.NB-static-feature-search .NB-feature-detail-crosslink-search,
.NB-dark.NB-static-feature-archive .NB-feature-detail-crosslink-archive,
.NB-dark.NB-static-feature-saved .NB-feature-detail-crosslink-saved,
.NB-dark.NB-static-feature-native-apps .NB-feature-detail-crosslink-native-apps,
.NB-dark.NB-static-feature-mcp .NB-feature-detail-crosslink-mcp,
.NB-dark.NB-static-feature-cli .NB-feature-detail-crosslink-cli {
    background: rgba(251, 219, 155, 0.12);
}

.NB-dark.NB-static-feature-training .NB-feature-detail-crosslink-training .NB-feature-detail-crosslink-name,
.NB-dark.NB-static-feature-ask-ai .NB-feature-detail-crosslink-ask-ai .NB-feature-detail-crosslink-name,
.NB-dark.NB-static-feature-web-feeds .NB-feature-detail-crosslink-web-feeds .NB-feature-detail-crosslink-name,
.NB-dark.NB-static-feature-newsletters .NB-feature-detail-crosslink-newsletters .NB-feature-detail-crosslink-name,
.NB-dark.NB-static-feature-search .NB-feature-detail-crosslink-search .NB-feature-detail-crosslink-name,
.NB-dark.NB-static-feature-archive .NB-feature-detail-crosslink-archive .NB-feature-detail-crosslink-name,
.NB-dark.NB-static-feature-saved .NB-feature-detail-crosslink-saved .NB-feature-detail-crosslink-name,
.NB-dark.NB-static-feature-native-apps .NB-feature-detail-crosslink-native-apps .NB-feature-detail-crosslink-name,
.NB-dark.NB-static-feature-mcp .NB-feature-detail-crosslink-mcp .NB-feature-detail-crosslink-name,
.NB-dark.NB-static-feature-cli .NB-feature-detail-crosslink-cli .NB-feature-detail-crosslink-name {
    color: #FBDB9B;
}

/* Features bottom CTA - dark mode */
.NB-dark .NB-features-bottom-cta-text {
    color: rgba(255, 255, 255, 0.9);
}

/* Pricing CTA buttons - dark mode */
.NB-dark .NB-pricing-cta-free {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
}

.NB-dark .NB-pricing-cta-free:hover {
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.95);
}

/* Compare links - dark mode */
.NB-dark .NB-compare-link-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.NB-dark .NB-compare-link-arrow {
    color: #FBDB9B;
}

/* ======================================= */
/* = Dark mode overrides for all sections = */
/* ======================================= */

/* Compare / Alternative pages - dark mode */
.NB-dark .NB-static-compare-title {
    color: rgba(255, 255, 255, 0.95);
}

.NB-dark .NB-static-compare-subtitle {
    color: rgba(255, 255, 255, 0.55);
}

.NB-dark .NB-compare-table {
    border-color: rgba(255, 255, 255, 0.08);
}

.NB-dark .NB-compare-table th,
.NB-dark .NB-compare-table td {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.NB-dark .NB-compare-table thead th {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
}

.NB-dark .NB-compare-table tbody td {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.03);
}

.NB-dark .NB-compare-table tbody tr:hover td {
    background: rgba(255, 255, 255, 0.08);
}

.NB-dark .NB-compare-table tbody td:first-child {
    color: rgba(255, 255, 255, 0.9);
}

.NB-dark .NB-compare-x {
    color: rgba(255, 255, 255, 0.15);
}

.NB-dark .NB-compare-section {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.06);
}

.NB-dark .NB-compare-section-title {
    color: rgba(255, 255, 255, 0.9);
}

.NB-dark .NB-compare-section-text {
    color: rgba(255, 255, 255, 0.6);
}

/* Compare links section - dark mode */
.NB-dark .NB-compare-links-section {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
}

.NB-dark .NB-compare-links-title {
    color: rgba(255, 255, 255, 0.5);
}

.NB-dark .NB-compare-link-group-label {
    color: rgba(255, 255, 255, 0.4);
}

.NB-dark .NB-compare-link-item a {
    color: #FBDB9B;
}

.NB-dark .NB-compare-link-item a:hover {
    color: #fce8b8;
}

/* Pricing tier detail pages - dark mode */
.NB-dark .NB-pricing-tier-detail-name {
    color: rgba(255, 255, 255, 0.95);
}

.NB-dark .NB-pricing-tier-detail-price {
    color: rgba(255, 255, 255, 0.7);
}

.NB-dark .NB-pricing-tier-detail-subtitle {
    color: rgba(255, 255, 255, 0.55);
}

.NB-dark .NB-pricing-tier-detail-features h2 {
    color: rgba(255, 255, 255, 0.9);
}

.NB-dark .NB-pricing-tier-detail-feature {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.NB-dark .NB-pricing-tier-detail-feature-name {
    color: rgba(255, 255, 255, 0.9);
}

.NB-dark .NB-pricing-tier-detail-feature-desc {
    color: rgba(255, 255, 255, 0.55);
}

.NB-dark .NB-pricing-tier-detail-faq h2 {
    color: rgba(255, 255, 255, 0.9);
}

/* Pricing crosslinks - dark mode */
.NB-dark .NB-pricing-crosslinks h2 {
    color: rgba(255, 255, 255, 0.9);
}

.NB-dark .NB-pricing-crosslink {
    background: rgba(255, 255, 255, 0.06);
}

.NB-dark .NB-pricing-crosslink:hover {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.NB-dark .NB-pricing-crosslink-name {
    color: rgba(255, 255, 255, 0.9);
}

.NB-dark .NB-pricing-crosslink-price {
    color: rgba(255, 255, 255, 0.5);
}

.NB-dark .NB-pricing-crosslink-desc {
    color: rgba(255, 255, 255, 0.5);
}

.NB-dark .NB-pricing-crosslink-premium .NB-pricing-crosslink-arrow {
    color: #7cc5c6;
}

.NB-dark .NB-pricing-crosslink-archive .NB-pricing-crosslink-arrow {
    color: #fbbf24;
}

.NB-dark .NB-pricing-crosslink-pro .NB-pricing-crosslink-arrow {
    color: #fcd34d;
}

.NB-dark .NB-pricing-crosslink-current {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

.NB-dark .NB-pricing-crosslink-current:hover {
    background: rgba(255, 255, 255, 0.03);
}

.NB-dark .NB-pricing-crosslink-current-label {
    color: rgba(255, 255, 255, 0.3);
}

/* Main pricing page - dark mode */
.NB-dark .NB-pricing-title,
.NB-dark .NB-static-pricing-title {
    color: rgba(255, 255, 255, 0.95);
}

.NB-dark .NB-pricing-subtitle,
.NB-dark .NB-static-pricing-subtitle {
    color: rgba(255, 255, 255, 0.55);
}

.NB-dark .NB-pricing-tier {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

.NB-dark .NB-pricing-tier:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

.NB-dark .NB-pricing-tier-name {
    color: rgba(255, 255, 255, 0.95);
}

.NB-dark .NB-pricing-tier-price {
    color: rgba(255, 255, 255, 0.8);
}

.NB-dark .NB-pricing-tier-period {
    color: rgba(255, 255, 255, 0.4);
}

.NB-dark .NB-pricing-tier-desc {
    color: rgba(255, 255, 255, 0.55);
}

.NB-dark .NB-pricing-tier-features li {
    color: rgba(255, 255, 255, 0.65);
    border-bottom-color: rgba(255, 255, 255, 0.04);
}

.NB-dark .NB-pricing-tier-features li::before {
    color: rgba(255, 255, 255, 0.3);
}

.NB-dark .NB-pricing-free-note {
    color: rgba(255, 255, 255, 0.45);
}

.NB-dark .NB-pricing-faq-title {
    color: rgba(255, 255, 255, 0.9);
}

.NB-dark .NB-pricing-faq-item {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
}

.NB-dark .NB-pricing-faq-question {
    color: rgba(255, 255, 255, 0.85);
}

.NB-dark .NB-pricing-faq-answer {
    color: rgba(255, 255, 255, 0.55);
}

.NB-dark .NB-pricing-faq-answer a {
    color: #FBDB9B;
}

.NB-dark .NB-pricing-faq-answer a:hover {
    color: #fce8b8;
}

/* Pricing page cards in dark mode */
.NB-dark.NB-static-pricing .NB-pricing-tier {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

.NB-dark.NB-static-pricing .NB-pricing-tier:hover {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.NB-dark.NB-static-pricing .NB-pricing-tier-features li {
    color: rgba(255, 255, 255, 0.7);
}

.NB-dark.NB-static-pricing .NB-pricing-tier-features li.NB-pricing-tier-includes {
    color: rgba(255, 255, 255, 0.45);
}

.NB-dark.NB-static-pricing .NB-pricing-tier-free .NB-pricing-tier-features li,
.NB-dark.NB-static-pricing .NB-pricing-tier-selfhosted .NB-pricing-tier-features li {
    color: rgba(255, 255, 255, 0.65);
}

.NB-dark.NB-static-pricing .NB-pricing-tier-free .NB-pricing-tier-features li span,
.NB-dark.NB-static-pricing .NB-pricing-tier-selfhosted .NB-pricing-tier-features li span {
    color: rgba(255, 255, 255, 0.65);
}

.NB-dark.NB-static-pricing .NB-pricing-tier-features li.NB-pricing-tier-upcoming-header {
    color: rgba(255, 255, 255, 0.35);
}

.NB-dark.NB-static-pricing .NB-pricing-tier-features li.NB-upcoming {
    color: rgba(255, 255, 255, 0.35);
}

.NB-dark.NB-static-pricing .NB-pricing-tier-actions {
    background: rgba(255, 255, 255, 0.03);
    border-top-color: rgba(255, 255, 255, 0.06);
}

.NB-dark.NB-static-pricing .NB-pricing-github-button {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}

.NB-dark.NB-static-pricing .NB-pricing-github-button:hover {
    background: rgba(255, 255, 255, 0.14);
}

/* About page - dark mode */
.NB-dark .NB-about-hero-title {
    color: rgba(255, 255, 255, 0.88);
}

.NB-dark .NB-about-section-title {
    color: #FBDB9B;
}

.NB-dark .NB-about-section-text {
    color: rgba(255, 255, 255, 0.65);
}

.NB-dark .NB-about-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.06);
}

.NB-dark .NB-about-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}

.NB-dark .NB-about-card-title {
    color: rgba(255, 255, 255, 0.9);
}

.NB-dark .NB-about-card-text {
    color: rgba(255, 255, 255, 0.55);
}

.NB-dark .NB-about-stat-value {
    color: rgba(255, 255, 255, 0.95);
}

.NB-dark .NB-about-stat-label {
    color: rgba(255, 255, 255, 0.45);
}

.NB-dark .NB-about-tech-pill {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.65);
    border-color: rgba(255, 255, 255, 0.08);
}

.NB-dark .NB-about-tech-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.15);
}

.NB-dark .NB-about-tech-pill-github {
    background: rgba(251, 219, 155, 0.08);
    color: #FBDB9B;
    border-color: rgba(251, 219, 155, 0.15);
}

.NB-dark .NB-about-tech-pill-github:hover {
    background: rgba(251, 219, 155, 0.14);
    color: #fce8b8;
    border-color: rgba(251, 219, 155, 0.25);
}

.NB-dark .NB-about-timeline-item {
    border-left-color: rgba(255, 255, 255, 0.08);
}

.NB-dark .NB-about-timeline-text,
.NB-dark .NB-about-timeline-content p {
    color: rgba(255, 255, 255, 0.6);
}

.NB-dark .NB-about-timeline-dot,
.NB-dark .NB-about-timeline-item::before {
    background: #FBDB9B;
}

.NB-dark .NB-about-timeline-year {
    color: #FBDB9B;
}

.NB-dark .NB-about-person-name {
    color: rgba(255, 255, 255, 0.9);
}

.NB-dark .NB-about-person-role {
    color: rgba(255, 255, 255, 0.45);
}

.NB-dark .NB-about-person-photo {
    border-color: rgba(255, 255, 255, 0.15);
}

.NB-dark .NB-about-person-links a {
    color: rgba(255, 255, 255, 0.5);
}

.NB-dark .NB-about-person-links a:hover {
    color: #FBDB9B;
}

.NB-dark .NB-about-cta-title {
    color: rgba(255, 255, 255, 0.9);
}

.NB-dark .NB-about-cta-text {
    color: rgba(255, 255, 255, 0.55);
}

/* About tech stack - dark mode */
.NB-dark .NB-about-tech-group-title {
    color: rgba(255, 255, 255, 0.4);
}

/* About tagline - dark mode */
.NB-dark .NB-about-tagline-text {
    color: rgba(255, 255, 255, 0.5);
}

.NB-dark .NB-about-tagline-img {
    border-color: rgba(255, 255, 255, 0.15);
}

/* FAQ page - dark mode */
.NB-dark .NB-faq-hero-title {
    color: rgba(255, 255, 255, 0.88);
}

.NB-dark .NB-faq-hero-subtitle {
    color: rgba(255, 255, 255, 0.5);
}

.NB-dark .NB-faq-item {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.06);
}

.NB-dark h3.NB-faq-question {
    color: rgba(255, 255, 255, 0.9);
}

.NB-dark .NB-faq-answer {
    color: rgba(255, 255, 255, 0.6);
}

.NB-dark .NB-faq-answer a {
    color: #FBDB9B;
}

.NB-dark .NB-faq-answer a:hover {
    color: #fce8b8;
}

.NB-dark .NB-faq-answer code {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
}

.NB-dark .NB-faq-answer li {
    color: rgba(255, 255, 255, 0.6);
}

.NB-dark .NB-faq-bullet-icon {
    color: rgba(255, 255, 255, 0.6);
}

/* FAQ tier cards - dark mode */
.NB-dark .NB-faq-tier-card {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
}

.NB-dark a.NB-faq-tier {
    background: rgba(255, 255, 255, 0.06);
}

.NB-dark a.NB-faq-tier:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Distinct tier title colors - dark mode */
.NB-dark .NB-faq-tier-free .NB-faq-tier-name {
    color: rgba(255, 255, 255, 0.85);
}
.NB-dark .NB-faq-tier-premium .NB-faq-tier-name {
    color: #86efac;
}
.NB-dark .NB-faq-tier-archive .NB-faq-tier-name {
    color: #99f6e4;
}
.NB-dark .NB-faq-tier-pro .NB-faq-tier-name {
    color: #fdba74;
}

/* Tier title hover colors - dark mode */
.NB-dark a.NB-faq-tier-free:hover .NB-faq-tier-name {
    color: rgba(255, 255, 255, 0.9);
}
.NB-dark a.NB-faq-tier-premium:hover .NB-faq-tier-name {
    color: rgba(74, 222, 128, 1);
}
.NB-dark a.NB-faq-tier-archive:hover .NB-faq-tier-name {
    color: rgba(94, 234, 212, 1);
}
.NB-dark a.NB-faq-tier-pro:hover .NB-faq-tier-name {
    color: rgba(253, 186, 116, 1);
}

.NB-dark .NB-faq-tier-desc {
    color: rgba(255, 255, 255, 0.55);
}

/* FAQ bottom CTA - dark mode */
.NB-dark .NB-faq-bottom-cta-text {
    color: rgba(255, 255, 255, 0.9);
}

.NB-dark .NB-faq-bottom-cta-subtext {
    color: rgba(255, 255, 255, 0.55);
}

/* Forgot password - dark mode */
.NB-dark .NB-forgot-title {
    color: rgba(255, 255, 255, 0.95);
}

.NB-dark .NB-forgot-subtitle {
    color: rgba(255, 255, 255, 0.55);
}

.NB-dark .NB-forgot-card {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
}

.NB-dark .NB-forgot-label {
    color: rgba(255, 255, 255, 0.7);
}

.NB-dark .NB-forgot-input {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

.NB-dark .NB-forgot-input:focus {
    border-color: rgba(251, 219, 155, 0.4);
}

.NB-dark .NB-forgot-hint {
    color: rgba(255, 255, 255, 0.4);
}

.NB-dark .NB-forgot-hint a {
    color: #FBDB9B;
}

/* API page - dark mode */
.NB-dark .NB-static-api-title {
    color: rgba(255, 255, 255, 0.95);
}

.NB-dark .NB-static-api-subtitle {
    color: rgba(255, 255, 255, 0.6);
}

.NB-dark .NB-static-api-section-title {
    color: rgba(255, 255, 255, 0.9);
}

.NB-dark .NB-static-api-endpoint-title {
    color: rgba(255, 255, 255, 0.85);
}

.NB-dark .NB-static-api-endpoint-desc {
    color: rgba(255, 255, 255, 0.6);
}

.NB-dark .NB-static-api-method {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
}

.NB-dark .NB-static-api-path {
    color: #FBDB9B;
}

/* Testimonials - dark mode */
.NB-dark .NB-testimonial-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
}

.NB-dark .NB-testimonial-text {
    color: rgba(255, 255, 255, 0.7);
}

.NB-dark .NB-testimonial-author {
    color: rgba(255, 255, 255, 0.5);
}

.NB-dark .NB-testimonial-author a {
    color: #FBDB9B;
}

/* MCP feature detail - dark mode */
.NB-dark pre.NB-feature-detail-code {
    background: #12121f;
    color: #d0d0d0;
}

.NB-dark .NB-feature-detail-connect h3 {
    color: rgba(255, 255, 255, 0.9);
}

.NB-dark .NB-mcp-tool {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.NB-dark .NB-mcp-tools-column-heading[data-category="reading"] {
    background: rgba(100, 170, 220, 0.15);
    color: rgba(140, 195, 235, 0.9);
}

.NB-dark .NB-mcp-tools-column-heading[data-category="actions"] {
    background: rgba(251, 219, 155, 0.12);
    color: rgba(251, 219, 155, 0.85);
}

.NB-dark .NB-mcp-tools-column-heading[data-category="intelligence"] {
    background: rgba(120, 200, 120, 0.12);
    color: rgba(140, 210, 140, 0.85);
}

.NB-dark .NB-mcp-tool code {
    color: rgba(255, 255, 255, 0.85);
}

.NB-dark .NB-mcp-tool-desc {
    color: rgba(255, 255, 255, 0.4);
}

/* MCP examples - dark mode */
.NB-dark .NB-feature-detail-examples-intro {
    color: rgba(255, 255, 255, 0.5);
}

.NB-dark .NB-mcp-example {
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.NB-dark .NB-mcp-example-prompt {
    background: #12121f;
}

.NB-dark .NB-mcp-example-tool {
    background: #0e0e1a;
}

.NB-dark .NB-mcp-example-response {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.75);
}

.NB-dark .NB-mcp-example-response strong {
    color: rgba(255, 255, 255, 0.9);
}

.NB-dark .NB-mcp-example-response em {
    color: rgba(255, 255, 255, 0.5);
}

.NB-dark .NB-mcp-example-response code {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(251, 219, 155, 0.85);
}

/* MCP setup section - dark mode */
.NB-dark .NB-mcp-setup-option h3 {
    color: rgba(255, 255, 255, 0.9);
}

.NB-dark .NB-mcp-setup-option p {
    color: rgba(255, 255, 255, 0.5);
}

.NB-dark .NB-mcp-setup-note {
    color: rgba(255, 255, 255, 0.4);
}

.NB-dark .NB-cli-step h3 {
    color: #a0a0a0;
}

.NB-dark .NB-cli-step-note {
    color: #808080;
}

.NB-dark .NB-cli-step-note code {
    background: #2a2a2a;
    color: #c0c0c0;
}

/* Cross-banner - dark mode */
.NB-dark .NB-feature-crossbanner {
    background: rgba(251, 219, 155, 0.08);
    border-color: rgba(251, 219, 155, 0.15);
    color: rgba(255, 255, 255, 0.75);
}

.NB-dark .NB-feature-crossbanner a {
    color: #FBDB9B;
}

/* Feature detail screenshots - dark mode */
.NB-dark .NB-feature-detail-screenshot {
    border-color: rgba(255, 255, 255, 0.08);
}

.NB-dark .NB-feature-detail-screenshot img {
    border-color: rgba(255, 255, 255, 0.06);
}

/* Features bottom CTA - dark mode */
.NB-dark .NB-features-bottom-cta-text {
    color: rgba(255, 255, 255, 0.9);
}

/* Pricing CTA arrows - dark mode */
.NB-dark .NB-pricing-cta-premium {
    color: #7cc5c6;
}

.NB-dark .NB-pricing-cta-archive {
    color: #fbbf24;
}

.NB-dark .NB-pricing-cta-pro {
    color: #fcd34d;
}

/* reader.css overrides - dark mode */
body.NB-dark.NB-static .NB-module .NB-module-title {
    border-left-color: rgba(217, 166, 33, 0.5);
    color: white;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.04);
}

body.NB-dark.NB-static .NB-module .NB-module-content,
body.NB-dark.NB-static .NB-module .NB-module-content p {
    color: rgba(255, 255, 255, 0.75);
}

body.NB-dark.NB-static .NB-module .NB-module-content b,
body.NB-dark.NB-static .NB-module .NB-module-content strong {
    color: rgba(255, 255, 255, 0.9);
}

body.NB-dark.NB-static li {
    color: rgba(255, 255, 255, 0.75);
}

body.NB-dark.NB-static pre,
body.NB-dark.NB-static code {
    background-color: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
}

body.NB-dark.NB-static .NB-module-title-prefix {
    color: #FBDB9B;
}

.NB-dark .NB-static-press-reviews .NB-press-date {
    color: rgba(255, 255, 255, 0.5);
}

.NB-dark.NB-static-about .NB-about-who-name {
    color: white;
}

.NB-dark.NB-static-about .NB-about-who img {
    border-color: rgba(255, 255, 255, 0.15);
}

.NB-dark.NB-static-about .NB-about-tagline img {
    border-color: rgba(255, 255, 255, 0.15);
}

.NB-dark .NB-static-faq .NB-faq-image {
    border-color: rgba(255, 255, 255, 0.15);
}

.NB-dark .NB-static-faq ul li.NB-faq-question {
    color: white;
}

.NB-dark .NB-static-faq ul li.NB-faq-answer {
    color: rgba(255, 255, 255, 0.65);
}

/* API page - dark mode */
.NB-dark .NB-static-api .optional,
.NB-dark .NB-static-api .required {
    background-color: rgba(152, 200, 146, 0.3);
    border-color: rgba(152, 200, 146, 0.4);
    color: rgba(255, 255, 255, 0.8);
}

.NB-dark .NB-static-api .required {
    background-color: rgba(217, 144, 15, 0.3);
    border-color: rgba(217, 144, 15, 0.5);
    color: #FBDB9B;
}

.NB-dark .NB-static-api table {
    border-bottom-color: rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.15);
}

.NB-dark .NB-static-api table td {
    border-right-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
}

.NB-dark .NB-static-api table th,
.NB-dark .NB-static-api .NB-api-toc-header {
    border-right-color: rgba(255, 255, 255, 0.15);
    border-bottom-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.05);
}

.NB-dark .NB-static-api .NB-api-toc .NB-api-link-desc {
    color: rgba(255, 255, 255, 0.55);
}

/* Login card - dark mode */
.NB-dark .NB-static-card {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: none;
}

@supports not (backdrop-filter: blur(20px)) {
    .NB-dark .NB-static-card {
        background: rgba(50, 70, 70, 0.85);
    }
}

.NB-dark .NB-static-card-title {
    color: white;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
}

.NB-dark .NB-static-card-tagline {
    color: #FBDB9B;
}

.NB-dark .NB-static-card-field input[type=text],
.NB-dark .NB-static-card-field input[type=password],
.NB-dark .NB-static-card-field input[type=email] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.NB-dark .NB-static-card-field input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.NB-dark .NB-static-card-field input:focus {
    border-color: rgba(217, 166, 33, 0.5);
    background: rgba(255, 255, 255, 0.13);
}

.NB-dark .NB-static-card-altlink {
    color: #FBDB9B;
}

.NB-dark .NB-static-card-altlink:hover {
    color: #fff;
}

.NB-dark .NB-delete-form h2 {
    color: white;
}

.NB-dark .NB-static-oauth h3 {
    color: white;
}

.NB-dark .NB-static-oauth .NB-static-form-label label {
    color: rgba(255, 255, 255, 0.6);
}

.NB-dark .NB-static-oauth .NB-static-form-input input {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.NB-dark .NB-static-form-alttext {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.NB-dark .NB-static-form-alttext a {
    color: #FBDB9B;
}