/*
 * nr-page-sections — shared styles for the new infra-aesthetic page
 * sections: [nr_includes], [nr_compare], [nr_faq].
 *
 * One file because all three live on the same page (pricing-new) and
 * share the section-lede pattern (eyebrow + headline + sub). Loads
 * conditionally via the same shortcode-detection hook used for hero
 * and pricing-table.
 */

/* ── Shared section frame ─────────────────────────────────────── */
.nr-includes,
.nr-compare,
.nr-faq {
    /* Full-bleed dark sections that match the hero gradient family */
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    max-width: none;
    padding: clamp(56px, 7vw, 96px) 0;
    color: #ffffff;
    font-family: var(--masterfont, "Mulish", system-ui, sans-serif);
    position: relative;
    overflow: hidden;
}
.nr-includes__inner,
.nr-compare__inner,
.nr-faq__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 64px);
    position: relative;
    z-index: 1;
}

/* Shared eyebrow + headline + sub treatment */
.nr-includes__eyebrow,
.nr-compare__eyebrow,
.nr-faq__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    padding: 5px 12px 5px 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 4px;
}
/* Eyebrow dots culled site-wide — too many green dots competing for attention.
 * The chip itself (mono-typed, bordered) is the marker. Dot kept in markup
 * with display:none for a quick rollback. */
.nr-includes__eyebrow-dot,
.nr-compare__eyebrow-dot,
.nr-faq__eyebrow-dot { display: none; }
/* Pad-left correction now that the dot is gone */
.nr-includes__eyebrow,
.nr-compare__eyebrow,
.nr-faq__eyebrow { padding-left: 12px; gap: 0; }
.nr-includes__headline,
.nr-compare__headline,
.nr-faq__headline {
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.08;
    margin: 0 0 14px;
    color: #ffffff;
}
.nr-includes__sub,
.nr-compare__sub,
.nr-faq__sub {
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 32px;
    max-width: 640px;
}

/* ─────────────────────────────────────────────────────────────────
 * 1) [nr_includes] — feature strip
 * ───────────────────────────────────────────────────────────────── */
.nr-includes {
    background:
        radial-gradient(ellipse at 20% 0%, rgba(20, 187, 96, 0.10), transparent 55%),
        linear-gradient(180deg, #0a1626 0%, #050f1c 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nr-includes__lede { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.nr-includes__lede .nr-includes__sub { margin-left: auto; margin-right: auto; }
.nr-includes__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    overflow: hidden;
}
@media (max-width: 980px) {
    .nr-includes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
    .nr-includes__grid { grid-template-columns: 1fr; }
}
.nr-includes__item {
    background: rgba(10, 22, 38, 0.7);
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: background 200ms ease-out;
}
.nr-includes__item:hover {
    background: rgba(15, 32, 54, 0.85);
}
.nr-includes__icon {
    color: var(--primary, #14bb60);
    width: 24px;
    height: 24px;
    margin-bottom: 6px;
}
.nr-includes__icon svg { display: block; }
.nr-includes__item-title {
    font-size: 14.5px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.3;
}
.nr-includes__item-desc {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.4;
}

/* ─────────────────────────────────────────────────────────────────
 * 2) [nr_compare] — provider comparison table
 * ───────────────────────────────────────────────────────────────── */
.nr-compare {
    background:
        radial-gradient(ellipse at 80% 100%, rgba(82, 167, 255, 0.10), transparent 55%),
        linear-gradient(180deg, #050f1c 0%, #0a1626 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nr-compare__lede { max-width: 760px; margin-bottom: 36px; }
.nr-compare__workload {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
}
.nr-compare__workload-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.45);
}
.nr-compare__workload-value {
    color: rgba(255, 255, 255, 0.92);
}
.nr-compare__table-wrap {
    margin: 0;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: auto;
    background: rgba(10, 22, 38, 0.6);
}
.nr-compare__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--masterfont, "Mulish", system-ui, sans-serif);
    color: rgba(255, 255, 255, 0.85);
    /* Min-width scales with the number of provider columns. The table-wrap
     * has overflow:auto so anything wider just becomes horizontally
     * scrollable inside the dark card. 220 px per provider column +
     * 200 px for the metric-label column reads comfortably; 4-up
     * comparisons land at 1080 px (forces a scroll on tablets, fits
     * desktop comfortably). */
    min-width: 720px;
    table-layout: auto;
}
.nr-compare__table thead th {
    padding: 18px 18px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.02);
    vertical-align: top;
}
/* Column widths previously fixed at 24% / 25.3% — sized for 3-provider
 * comparisons. Dropped so columns size to content via `table-layout:
 * auto`. The metric-label column gets a min-width to keep
 * "Hourly billing" / "Network egress" / "12-month TCO" labels on one
 * line; provider columns auto-balance. The wrap container's
 * overflow:auto handles spillover gracefully on narrower viewports. */
.nr-compare__th-metric { min-width: 180px; }
.nr-compare__th {
    min-width: 200px;
    /* Keep the SKU + price values readable — wrap on word boundaries
     * only, never mid-token. */
    word-break: keep-all;
    overflow-wrap: normal;
}
.nr-compare__th .nr-compare__th-name,
.nr-compare__th .nr-compare__th-sku,
.nr-compare__th .nr-compare__th-price {
    white-space: nowrap;
}
.nr-compare__th.is-us {
    background: rgba(20, 187, 96, 0.06);
    border-bottom-color: rgba(20, 187, 96, 0.30);
}
.nr-compare__th-name {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.01em;
}
.nr-compare__th.is-us .nr-compare__th-name { color: var(--primary, #14bb60); }
.nr-compare__th-sku {
    display: block;
    margin-top: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.50);
}
.nr-compare__th-price {
    display: block;
    margin-top: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    font-variant-numeric: tabular-nums;
}

/* Reseller chip in the Netrouting-column TH — surfaces the volume-
 * based discount tiers (10 / 15 / 20 / 30%) prominently. Only rendered
 * for `is_us` columns, so competitor columns stay clean. Always shows
 * the tier ladder; an optional "from <price>" line appears when the
 * scenario JSON sets `reseller.from`. */
.nr-compare__th-reseller {
    display: block;
    margin-top: 12px;
    padding: 10px 12px 11px;
    background: rgba(20, 187, 96, 0.10);
    border: 1px solid rgba(20, 187, 96, 0.32);
    border-radius: 8px;
    text-align: left;
    line-height: 1.3;
}
.nr-compare__th-reseller-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}
.nr-compare__th-reseller-eyebrow {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary, #14bb60);
}
.nr-compare__th-reseller-save {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.78);
    font-variant-numeric: tabular-nums;
}
.nr-compare__th-reseller-from {
    display: block;
    margin-top: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13.5px;
    font-weight: 700;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}
.nr-compare__th-reseller-tiers {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    flex-wrap: wrap;
}
.nr-compare__th-reseller-tier {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 150ms ease, color 150ms ease;
}
.nr-compare__th-reseller-tier.is-max {
    background: var(--primary, #14bb60);
    color: #0a1626;
    border-color: var(--primary, #14bb60);
}

.nr-compare__row-metric {
    padding: 14px 18px;
    text-align: left;
    font-size: 13.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.015);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.nr-compare__cell {
    padding: 14px 18px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-variant-numeric: tabular-nums;
}
.nr-compare__cell.is-us {
    background: rgba(20, 187, 96, 0.04);
    color: #ffffff;
    font-weight: 500;
}
.nr-compare__table tbody tr:last-child .nr-compare__cell,
.nr-compare__table tbody tr:last-child .nr-compare__row-metric {
    border-bottom: none;
}
.nr-compare__footnote {
    margin: 16px 0 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.40);
    font-style: italic;
    line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────────
 * 3) [nr_faq] — collapsible accordion (native <details>)
 * ───────────────────────────────────────────────────────────────── */
.nr-faq {
    background:
        radial-gradient(ellipse at 20% 100%, rgba(20, 187, 96, 0.08), transparent 55%),
        linear-gradient(180deg, #0a1626 0%, #050f1c 100%);
}
.nr-faq__lede {
    max-width: 720px;
    margin: 0 auto 36px;
    text-align: center;
}
.nr-faq__lede .nr-faq__sub { margin-left: auto; margin-right: auto; }
.nr-faq__list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.nr-faq__item { margin: 0; }
.nr-faq__details {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    transition: border-color 200ms ease-out, background 200ms ease-out;
}
.nr-faq__details:hover {
    border-color: rgba(255, 255, 255, 0.12);
}
.nr-faq__details[open] {
    background: rgba(20, 187, 96, 0.04);
    border-color: rgba(20, 187, 96, 0.22);
}
.nr-faq__summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    user-select: none;
}
.nr-faq__summary::-webkit-details-marker { display: none; }
.nr-faq__summary::marker { display: none; }
.nr-faq__q {
    flex: 1;
    font-size: 15.5px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -0.005em;
    line-height: 1.4;
}
.nr-faq__chevron {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 18px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1;
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), background 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out;
}
.nr-faq__details[open] .nr-faq__chevron {
    transform: rotate(45deg);
    background: rgba(20, 187, 96, 0.10);
    border-color: rgba(20, 187, 96, 0.30);
    color: var(--primary, #14bb60);
}
.nr-faq__a {
    padding: 0 22px 22px 22px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14.5px;
    line-height: 1.6;
    max-width: 720px;
}
/* WP wraps shortcode-fed FAQ answers in <p>; the legacy main.css
   `p { color: var(--text_color2) }` rule otherwise resets paragraph
   colour to dark grey, which leaves the answer text washed-out on
   pages where the shortcode emits HTML-formatted content (e.g.
   /data-centers/amsterdam/). Force inherit. */
.nr-faq__a p,
.nr-faq__a li {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0 0 12px;
}
.nr-faq__a p:last-child,
.nr-faq__a li:last-child { margin-bottom: 0; }
.nr-faq__a ul,
.nr-faq__a ol { margin: 0 0 12px; padding-left: 1.25em; }
.nr-faq__a a {
    color: var(--primary, #14bb60);
    text-decoration: underline;
    text-decoration-color: rgba(20, 187, 96, 0.40);
    text-underline-offset: 0.18em;
    transition: text-decoration-color 150ms ease-out;
}
.nr-faq__a a:hover { text-decoration-color: var(--primary, #14bb60); }

@media (prefers-reduced-motion: reduce) {
    .nr-faq__chevron { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────
 * 4) [nr_locations] — datacenter footprint grid
 * ───────────────────────────────────────────────────────────────── */
.nr-locations {
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    max-width: none;
    padding: clamp(56px, 7vw, 96px) 0;
    color: #ffffff;
    font-family: var(--masterfont, "Mulish", system-ui, sans-serif);
    background:
        radial-gradient(ellipse at 80% 0%, rgba(82, 167, 255, 0.10), transparent 55%),
        linear-gradient(180deg, #050f1c 0%, #0a1626 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    overflow: hidden;
}
.nr-locations__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 64px);
}
.nr-locations__lede { text-align: center; max-width: 720px; margin: 0 auto 36px; }
.nr-locations__eyebrow {
    display: inline-block;
    margin: 0 0 14px;
    padding: 5px 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 4px;
}
.nr-locations__headline {
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.08;
    margin: 0 0 14px;
    color: #ffffff;
}
.nr-locations__sub {
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 auto;
    max-width: 640px;
}
.nr-locations__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    overflow: hidden;
}
.nr-locations__item { margin: 0; }
.nr-locations__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px;
    background: rgba(10, 22, 38, 0.7);
    color: #ffffff;
    text-decoration: none !important;
    transition: background 200ms ease-out, color 140ms ease-out;
    height: 100%;
}
.nr-locations__link:hover {
    background: rgba(15, 32, 54, 0.95);
    color: var(--primary, #14bb60) !important;
}
.nr-locations__cc {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(20, 187, 96, 0.85);
    background: rgba(20, 187, 96, 0.06);
    border: 1px solid rgba(20, 187, 96, 0.18);
    border-radius: 3px;
    padding: 4px 7px;
    min-width: 32px;
    text-align: center;
    flex-shrink: 0;
}
.nr-locations__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.25;
    min-width: 0;
}
.nr-locations__city {
    font-size: 14.5px;
    font-weight: 600;
    color: #ffffff;
}
.nr-locations__link:hover .nr-locations__city { color: var(--primary, #14bb60); }
.nr-locations__country {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.50);
}
.nr-locations__arrow {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: rgba(255, 255, 255, 0.30);
    flex-shrink: 0;
    transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), color 140ms ease-out;
}
.nr-locations__link:hover .nr-locations__arrow {
    color: var(--primary, #14bb60);
    transform: translateX(3px);
}

/* ─────────────────────────────────────────────────────────────────
 * 5) [nr_industries] — industry pivot card grid
 * ───────────────────────────────────────────────────────────────── */
.nr-industries {
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    max-width: none;
    padding: clamp(56px, 7vw, 96px) 0;
    color: #ffffff;
    font-family: var(--masterfont, "Mulish", system-ui, sans-serif);
    background:
        radial-gradient(ellipse at 20% 0%, rgba(20, 187, 96, 0.08), transparent 55%),
        linear-gradient(180deg, #0a1626 0%, #050f1c 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    overflow: hidden;
}
.nr-industries__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 64px);
}
.nr-industries__lede { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.nr-industries__eyebrow {
    display: inline-block;
    margin: 0 0 14px;
    padding: 5px 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 4px;
}
.nr-industries__headline {
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.08;
    margin: 0 0 14px;
    color: #ffffff;
}
.nr-industries__sub {
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 auto;
    max-width: 640px;
}
.nr-industries__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.nr-industries__item { margin: 0; }
.nr-industries__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px 22px;
    background: rgba(10, 22, 38, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    color: inherit;
    text-decoration: none !important;
    transition: background 200ms ease-out, border-color 200ms ease-out, transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
    height: 100%;
}
.nr-industries__card:hover {
    background: rgba(15, 32, 54, 0.95);
    border-color: rgba(20, 187, 96, 0.30);
    transform: translateY(-2px);
}
.nr-industries__icon {
    width: 48px; height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 187, 96, 0.06);
    border: 1px solid rgba(20, 187, 96, 0.18);
    border-radius: 10px;
}
.nr-industries__icon img {
    width: 28px; height: 28px;
    filter: brightness(0) saturate(100%) invert(60%) sepia(58%) saturate(443%) hue-rotate(95deg) brightness(95%) contrast(89%);
}
.nr-industries__name {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: rgba(20, 187, 96, 0.85);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.nr-industries__title {
    font-size: 16.5px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.nr-industries__desc {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.55;
    flex: 1;
}
.nr-industries__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary, #14bb60);
    margin-top: 4px;
    transition: gap 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nr-industries__card:hover .nr-industries__cta { gap: 10px; }

/* ─────────────────────────────────────────────────────────────────
 * 6) Homepage-only blocks
 * Inline content sections that only appear on /. Kept here (not in a
 * separate nr-home.css) so they piggyback on nr-page-sections's
 * existing auto-enqueue without an extra HTTP round-trip.
 *
 * Shared frame (full-bleed dark gradient + max-width inner) mirrors
 * nr-includes/nr-locations/nr-industries to keep visual cohesion.
 * ───────────────────────────────────────────────────────────────── */
.nr-home-products,
.nr-home-feature,
.nr-home-cross,
.nr-home-video,
.nr-home-trust {
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    max-width: none;
    padding: clamp(56px, 7vw, 96px) 0;
    color: #ffffff;
    font-family: var(--masterfont, "Mulish", system-ui, sans-serif);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    overflow: hidden;
}
.nr-home-products__inner,
.nr-home-feature__inner,
.nr-home-cross__inner,
.nr-home-video__inner,
.nr-home-trust__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 64px);
}

/* Shared lede pattern (eyebrow + headline + sub) — same look as the
 * other dark sections. Selectors namespace by .nr-home- so they don't
 * leak into nr-includes/nr-faq above. */
.nr-home-products__eyebrow,
.nr-home-video__eyebrow,
.nr-home-feature__eyebrow,
.nr-home-trust__eyebrow {
    display: inline-block;
    margin: 0 0 14px;
    padding: 5px 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 4px;
}
.nr-home-products__headline,
.nr-home-video__headline {
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.08;
    margin: 0 0 14px;
    color: #ffffff;
}
.nr-home-products__sub,
.nr-home-video__sub {
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
    max-width: 640px;
}

/* ── 6a) Product teaser (3 cards: Dedicated/Cloud/Colocation) ── */
.nr-home-products {
    background:
        radial-gradient(ellipse at 80% 0%, rgba(82, 167, 255, 0.10), transparent 55%),
        linear-gradient(180deg, #0a1626 0%, #050f1c 100%);
}
.nr-home-products__lede { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.nr-home-products__lede .nr-home-products__sub { margin-left: auto; margin-right: auto; }
.nr-home-products__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 880px) { .nr-home-products__grid { grid-template-columns: 1fr; } }
.nr-home-products__item { margin: 0; }
.nr-home-products__card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px 26px;
    background: rgba(10, 22, 38, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    color: inherit;
    text-decoration: none !important;
    transition: background 200ms ease-out, border-color 200ms ease-out, transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
    height: 100%;
    position: relative;
}
.nr-home-products__card:hover {
    background: rgba(15, 32, 54, 0.95);
    border-color: rgba(20, 187, 96, 0.30);
    transform: translateY(-2px);
}
.nr-home-products__name {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.01em;
}
.nr-home-products__desc {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.55;
    margin: 0;
    flex: 1;
}
/* Product-card top: stylized icon (vendor service-mark SVG) sized
 * down so it reads as an indicator, not a hero illustration. Tinted
 * green via the same filter trick the industries grid uses. */
.nr-home-products__media {
    width: 56px; height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 187, 96, 0.06);
    border: 1px solid rgba(20, 187, 96, 0.18);
    border-radius: 12px;
    margin-bottom: 4px;
}
.nr-home-products__media img {
    width: 32px; height: 32px;
    filter: brightness(0) saturate(100%) invert(60%) sepia(58%) saturate(443%) hue-rotate(95deg) brightness(95%) contrast(89%);
}
/* Specs list — neutral, time-stable indicators (uplink / billing /
 * hardware shape). Replaces the old "AS LOW AS €X" price block since
 * prices change and shouldn't be repeated in every card surface. */
.nr-home-products__specs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 14px;
    border-top: 1px dashed rgba(255, 255, 255, 0.10);
}
.nr-home-products__specs span {
    position: relative;
    padding-left: 18px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.5;
}
.nr-home-products__specs span::before {
    content: "";
    position: absolute;
    left: 0; top: 8px;
    width: 10px; height: 2px;
    background: var(--primary, #14bb60);
    border-radius: 2px;
}
.nr-home-products__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary, #14bb60);
    transition: gap 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nr-home-products__card:hover .nr-home-products__cta { gap: 10px; }

/* ── 6b) Featured highlight (Hyper-Scale) — 2-column ── */
.nr-home-feature {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(20, 187, 96, 0.10), transparent 55%),
        linear-gradient(180deg, #050f1c 0%, #0a1626 100%);
}
.nr-home-feature__inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}
@media (max-width: 880px) { .nr-home-feature__inner { grid-template-columns: 1fr; } }
.nr-home-feature__headline {
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.08;
    margin: 0 0 20px;
    color: #ffffff;
}
.nr-home-feature__body {
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 14px;
}
.nr-home-feature__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 12px 22px;
    background: rgba(20, 187, 96, 0.10);
    border: 1px solid rgba(20, 187, 96, 0.30);
    border-radius: 6px;
    color: var(--primary, #14bb60) !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background 180ms ease-out, gap 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nr-home-feature__cta:hover { background: rgba(20, 187, 96, 0.18); gap: 12px; }
/* ── Photo frame utility ──────────────────────────────────────────
   Bordered photo frame with a multi-colour neon halo. Thin hairline
   border defines the rim; image fills it edge-to-edge; a blurred
   conic-gradient pseudo-element behind the frame paints a soft brand-
   coloured glow around all four sides.

   Applied to all content-image wrappers across the site:
     .nr-home-feature__media        (homepage feature)
     .nr-product-highlight__media   (most product/page content sections)
     .nr-home-products__media       (homepage product cards — soft variant)

   Light-mode variant: parent <section class="nr-tone-light"> overrides
   the border + halo to read on a light background (border darkens,
   halo softens, inner image keeps its lift but in cooler tones). */
.nr-home-feature__media,
.nr-product-highlight__media {
    position: relative;
    isolation: isolate;                                /* contain ::before z-index: -1 */
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    background: transparent;
    line-height: 0;
}
.nr-home-feature__media::before,
.nr-product-highlight__media::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 14px;
    z-index: -1;
    background: conic-gradient(
        from 90deg,
        #21D974,                                       /* brand green (top) */
        #06aaa6,                                       /* teal (right) */
        #3B93EF,                                       /* brand blue (bottom) */
        #82c0ff,                                       /* lighter blue (left) */
        #21D974
    );
    filter: blur(22px);
    opacity: 0.55;
    pointer-events: none;
}
.nr-home-feature__media > img,
.nr-home-feature__media > picture,
.nr-product-highlight__media > img,
.nr-product-highlight__media > picture {
    display: block;
    max-width: 100%;
    height: auto;
    position: relative;
    z-index: 1;                                        /* above ::before halo */
}

/* ── Light-mode variant ──────────────────────────────────────────
   On .nr-tone-light parent sections, swap the white-on-dark border
   for a dark hairline + soften the halo so it reads as a subtle
   coloured glow rather than fighting the bright background. */
.nr-tone-light .nr-home-feature__media,
.nr-tone-light .nr-product-highlight__media {
    border: 1px solid rgba(15, 28, 46, 0.12);
}
.nr-tone-light .nr-home-feature__media::before,
.nr-tone-light .nr-product-highlight__media::before {
    opacity: 0.32;                                     /* gentler on light bg */
    filter: blur(28px);                                /* softer halo */
    inset: -12px;                                      /* a touch larger to compensate */
}

/* ── SVG-content exclusion ───────────────────────────────────────
   When the wrapped media is an SVG illustration — either an external
   <img src="…svg"> or an inline .nr-visual figure / raw <svg> — drop
   the frame and halo so the graphic blends naturally into the section
   background. Illustrations are designed with their own fade-out +
   transparent bg; framing them creates a competing rectangular
   boundary. Photos (raster jpg/webp/png) keep the frame. */
.nr-home-feature__media:has(> img[src$=".svg"]),
.nr-home-feature__media:has(.nr-visual),
.nr-home-feature__media:has(> svg),
.nr-home-feature__media:has(> figure),
.nr-product-highlight__media:has(> img[src$=".svg"]),
.nr-product-highlight__media:has(.nr-visual),
.nr-product-highlight__media:has(> svg),
.nr-product-highlight__media:has(> figure) {
    border: none;
    background: transparent;
}
.nr-home-feature__media:has(> img[src$=".svg"])::before,
.nr-home-feature__media:has(.nr-visual)::before,
.nr-home-feature__media:has(> svg)::before,
.nr-home-feature__media:has(> figure)::before,
.nr-product-highlight__media:has(> img[src$=".svg"])::before,
.nr-product-highlight__media:has(.nr-visual)::before,
.nr-product-highlight__media:has(> svg)::before,
.nr-product-highlight__media:has(> figure)::before {
    display: none;
}

/* When the media slot holds an HTML table (e.g. reseller tier table)
   instead of an image, drop the frame + halo and let the table render
   directly on the section bg. */
.nr-product-highlight__media:has(> table),
.nr-home-feature__media:has(> table) {
    border: none;
    background: transparent;
    line-height: inherit;
}
.nr-product-highlight__media:has(> table)::before,
.nr-home-feature__media:has(> table)::before { display: none; }

/* ── Tier table (used on Reseller "Maximize Savings") ─────────────
   A 4-column comparison table that renders inline in a __media slot.
   Works on both dark and light section toning. */
.nr-tier-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: #ffffff;
    font-family: var(--masterfont, "Mulish", system-ui, sans-serif);
}
.nr-tier-table thead th {
    text-align: left;
    font: 700 11px ui-monospace, Menlo, monospace;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    padding: 0 14px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.nr-tier-table tbody td {
    padding: 14px;
    font-size: 15px;
    background: rgba(15, 32, 54, 0.55);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nr-tier-table tbody tr td:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    font-weight: 700;
    color: #21D974;
    letter-spacing: 0.5px;
}
.nr-tier-table tbody tr td:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}
.nr-tier-table tbody tr + tr td { border-top: none; }
.nr-tier-table tbody tr + tr td:first-child { border-top-left-radius: 0; }
.nr-tier-table tbody tr + tr td:last-child { border-top-right-radius: 0; }
.nr-tier-table tbody tr:not(:last-child) td:first-child { border-bottom-left-radius: 0; }
.nr-tier-table tbody tr:not(:last-child) td:last-child { border-bottom-right-radius: 0; }

/* Light-tone variant */
.nr-tone-light .nr-tier-table { color: #0a1626; }
.nr-tone-light .nr-tier-table thead th { color: rgba(15, 28, 46, 0.55); border-bottom-color: rgba(15, 28, 46, 0.12); }
.nr-tone-light .nr-tier-table tbody td { background: #ffffff; border-top-color: rgba(15, 28, 46, 0.08); border-bottom-color: rgba(15, 28, 46, 0.08); }
.nr-tone-light .nr-tier-table tbody tr td:first-child { border-left-color: rgba(15, 28, 46, 0.08); color: #0fa055; }
.nr-tone-light .nr-tier-table tbody tr td:last-child { border-right-color: rgba(15, 28, 46, 0.08); }

@media (max-width: 720px) {
    .nr-tier-table { font-size: 13px; }
    .nr-tier-table thead th { padding: 0 8px 10px; }
    .nr-tier-table tbody td { padding: 10px 8px; }
}

/* ── 6c) Cross-sells (4 supplementary product cards) ── */
.nr-home-cross {
    background: linear-gradient(180deg, #0a1626 0%, #050f1c 100%);
}
.nr-home-cross__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 980px) { .nr-home-cross__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .nr-home-cross__grid { grid-template-columns: 1fr; } }
.nr-home-cross__item { margin: 0; }
.nr-home-cross__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px 20px;
    background: rgba(10, 22, 38, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    color: inherit;
    text-decoration: none !important;
    transition: background 200ms ease-out, border-color 200ms ease-out;
    height: 100%;
}
.nr-home-cross__card:hover {
    background: rgba(15, 32, 54, 0.95);
    border-color: rgba(20, 187, 96, 0.30);
}
.nr-home-cross__name {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: -0.005em;
}
.nr-home-cross__desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.60);
    line-height: 1.55;
    margin: 0;
    flex: 1;
}
.nr-home-cross__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--primary, #14bb60);
    transition: gap 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nr-home-cross__card:hover .nr-home-cross__cta { gap: 10px; }

/* ── 6d) Video + IaaS company profile block ── */
.nr-home-video {
    background:
        radial-gradient(ellipse at 80% 100%, rgba(82, 167, 255, 0.10), transparent 55%),
        linear-gradient(180deg, #050f1c 0%, #0a1626 100%);
}
.nr-home-video__inner {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}
@media (max-width: 880px) { .nr-home-video__inner { grid-template-columns: 1fr; } }
.nr-home-video__embed {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(0, 0, 0, 0.50);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.30);
}
.nr-home-video__embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ── 6e) Trust pair (Seamless OS / 24x7 Assistance) ── */
.nr-home-trust {
    background: linear-gradient(180deg, #0a1626 0%, #050f1c 100%);
}
.nr-home-trust__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 720px) { .nr-home-trust__inner { grid-template-columns: 1fr; } }
.nr-home-trust__card {
    padding: 28px 26px;
    background: rgba(10, 22, 38, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    margin: 0;
}
.nr-home-trust__headline {
    font-size: clamp(20px, 2vw, 24px);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin: 0 0 12px;
    color: #ffffff;
}
.nr-home-trust__body {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 16px;
}
.nr-home-trust__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary, #14bb60);
    text-decoration: none !important;
    transition: gap 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nr-home-trust__cta:hover { gap: 10px; }

/* ─────────────────────────────────────────────────────────────────
 * 7) Product-page shared blocks (.nr-product-*)
 * Reused across every product page (Bare Metal, Cloud, GPU,
 * Optimized Cloud, Colocation, Network, Connectivity). One CSS
 * surface for the recurring patterns: features grid, 2-col
 * highlight, plan-grid lede, use-case grid, side-by-side card pair.
 * ───────────────────────────────────────────────────────────────── */

/* Shared full-bleed dark frame for every nr-product-* section */
.nr-product-features,
.nr-product-highlight,
.nr-product-plans,
.nr-product-usecases,
.nr-product-pair,
.nr-product-managed,
.nr-net-map {
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    max-width: none;
    padding: clamp(56px, 7vw, 96px) 0;
    color: #ffffff;
    font-family: var(--masterfont, "Mulish", system-ui, sans-serif);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    overflow: hidden;
}
.nr-product-features__inner,
.nr-product-highlight__inner,
.nr-product-plans__inner,
.nr-product-usecases__inner,
.nr-product-pair__inner,
.nr-product-managed__inner,
.nr-net-map__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 64px);
}

/* Shared lede pattern */
.nr-product-features__eyebrow,
.nr-product-highlight__eyebrow,
.nr-product-plans__eyebrow,
.nr-product-usecases__eyebrow,
.nr-product-pair__eyebrow {
    display: inline-block;
    margin: 0 0 14px;
    padding: 5px 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 4px;
}
.nr-product-features__headline,
.nr-product-highlight__headline,
.nr-product-plans__headline,
.nr-product-usecases__headline {
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.08;
    margin: 0 0 14px;
    color: #ffffff;
}
.nr-product-plans__sub-headline {
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 14px;
    color: #ffffff;
}

/* ── 7-tone) Light-tone modifier ─────────────────────────────────────
 * Drop `nr-tone-light` on any nr-product-* section to flip its
 * background and text colors to a soft light scheme, while keeping the
 * brand-green accents. Used to break up long stacks of dark sections
 * on pages that don't have a [nr_plan_grid] in the middle (Home,
 * Network, Connectivity, SaaS/PaaS, Reseller etc.).
 *
 * Implementation note: the original sections each have a hardcoded
 * gradient + white text, so the modifier overrides the most-visible
 * tokens (background, text, eyebrow, title, body, list, table, card).
 * !important is used sparingly and only against rules that come from
 * the same stylesheet (no global override risk).
 */
.nr-tone-light {
    background:
        radial-gradient(ellipse at 80% 0%, rgba(82, 167, 255, 0.08), transparent 55%),
        linear-gradient(180deg, #f5f8fc 0%, #e9eff7 100%) !important;
    color: #1a2331;
}
.nr-tone-light .nr-product-features__headline,
.nr-tone-light .nr-product-highlight__headline,
.nr-tone-light .nr-product-managed__headline,
.nr-tone-light .nr-product-pair__headline,
.nr-tone-light .nr-product-plans__headline,
.nr-tone-light .nr-product-usecases__headline,
.nr-tone-light .nr-net-map__headline,
.nr-tone-light .nr-home-products__headline,
.nr-tone-light .nr-home-feature__headline,
.nr-tone-light .nr-home-trust__headline,
.nr-tone-light .nr-home-cross__name,
.nr-tone-light .nr-home-video__headline { color: #0a1626 !important; }
.nr-tone-light .nr-product-features__eyebrow,
.nr-tone-light .nr-product-highlight__eyebrow,
.nr-tone-light .nr-product-managed__eyebrow,
.nr-tone-light .nr-product-pair__eyebrow,
.nr-tone-light .nr-product-plans__eyebrow,
.nr-tone-light .nr-product-usecases__eyebrow,
.nr-tone-light .nr-net-map__eyebrow,
.nr-tone-light .nr-home-products__eyebrow,
.nr-tone-light .nr-home-feature__eyebrow,
.nr-tone-light .nr-home-trust__eyebrow,
.nr-tone-light .nr-home-video__eyebrow { color: var(--primary, #14bb60) !important; background: rgba(20, 187, 96, 0.10); border-color: rgba(20, 187, 96, 0.28); }
.nr-tone-light .nr-product-features__desc,
.nr-tone-light .nr-product-features__title,
.nr-tone-light .nr-product-managed__desc,
.nr-tone-light .nr-product-managed__title,
.nr-tone-light .nr-product-managed__sub,
.nr-tone-light .nr-product-highlight__body,
.nr-tone-light .nr-product-pair__body,
.nr-tone-light .nr-product-plans__sub,
.nr-tone-light .nr-product-plans__sub-headline,
.nr-tone-light .nr-product-usecases__desc,
.nr-tone-light .nr-product-usecases__title,
.nr-tone-light .nr-net-map__sub,
.nr-tone-light .nr-net-map__resources-title,
.nr-tone-light .nr-home-products__sub,
.nr-tone-light .nr-home-feature__body,
.nr-tone-light .nr-home-trust__body,
.nr-tone-light .nr-home-cross__desc,
.nr-tone-light .nr-home-video__sub { color: #2a3a52 !important; }
.nr-tone-light .nr-product-features__grid,
.nr-tone-light .nr-product-managed__grid,
.nr-tone-light .nr-product-usecases__grid,
.nr-tone-light .nr-net-map__kpis,
.nr-tone-light .nr-net-map__map,
.nr-tone-light .nr-net-map__table-wrap,
.nr-tone-light .nr-home-products__grid,
.nr-tone-light .nr-home-cross__grid {
    background: rgba(15, 32, 54, 0.06);
    border-color: rgba(15, 32, 54, 0.10);
}
.nr-tone-light .nr-product-features__item,
.nr-tone-light .nr-product-managed__item,
.nr-tone-light .nr-product-usecases__item,
.nr-tone-light .nr-net-map__kpi,
.nr-tone-light .nr-home-products__card,
.nr-tone-light .nr-home-cross__card,
.nr-tone-light .nr-home-trust__card,
.nr-tone-light .nr-product-pair__card,
.nr-tone-light .nr-net-map__map,
.nr-tone-light .nr-net-map__table-wrap {
    background: #ffffff;
    border-color: rgba(15, 32, 54, 0.08);
}
.nr-tone-light .nr-product-features__item:hover,
.nr-tone-light .nr-product-managed__item:hover,
.nr-tone-light .nr-product-usecases__item:hover { background: #f8fbff; }
.nr-tone-light .nr-net-map__kpi-num,
.nr-tone-light .nr-home-products__name,
.nr-tone-light .nr-home-products__cta,
.nr-tone-light .nr-home-cross__cta,
.nr-tone-light .nr-home-trust__cta,
.nr-tone-light .nr-home-feature__cta { color: #0a1626 !important; }
.nr-tone-light .nr-net-map__kpi-lbl { color: rgba(15, 32, 54, 0.62); }
.nr-tone-light .nr-net-map__table thead th { background: rgba(15, 32, 54, 0.04); color: rgba(15, 32, 54, 0.62); border-bottom-color: rgba(15, 32, 54, 0.08); }
.nr-tone-light .nr-net-map__table tbody td { background: #ffffff; color: #2a3a52; border-bottom-color: rgba(15, 32, 54, 0.06); }
.nr-tone-light .nr-net-map__table tbody tr:hover td { background: #f5f8fc; }
.nr-tone-light .nr-net-map__loc { color: #0a1626; }
.nr-tone-light .nr-product-features__icon { background: rgba(20, 187, 96, 0.08); border-color: rgba(20, 187, 96, 0.22); color: var(--primary, #14bb60); }
.nr-tone-light .nr-product-features__icon img,
.nr-tone-light .nr-product-managed__icon { color: var(--primary, #14bb60); }
.nr-tone-light .nr-product-pair__list li { color: #2a3a52; }
.nr-tone-light .nr-home-products__media { background: rgba(20, 187, 96, 0.06); border-color: rgba(20, 187, 96, 0.18); }
.nr-tone-light .nr-home-products__specs { border-top-color: rgba(15, 32, 54, 0.12); }
.nr-tone-light .nr-home-products__specs span { color: rgba(15, 32, 54, 0.78); }

/* ── 7a) Features grid (8-tile "Why Choose ...") ── */
.nr-product-features {
    background:
        radial-gradient(ellipse at 80% 0%, rgba(82, 167, 255, 0.10), transparent 55%),
        linear-gradient(180deg, #0a1626 0%, #050f1c 100%);
}
.nr-product-features__lede { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.nr-product-features__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    overflow: hidden;
}
@media (max-width: 980px) { .nr-product-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .nr-product-features__grid { grid-template-columns: 1fr; } }
.nr-product-features__item {
    background: rgba(10, 22, 38, 0.7);
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: background 200ms ease-out;
}
.nr-product-features__item:hover { background: rgba(15, 32, 54, 0.95); }
.nr-product-features__icon {
    width: 48px; height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 187, 96, 0.06);
    border: 1px solid rgba(20, 187, 96, 0.18);
    border-radius: 10px;
    margin-bottom: 4px;
}
.nr-product-features__icon img {
    width: 28px; height: 28px;
    /* Tint the legacy multi-color icons green for cohesion. Fallback
     * is the original color if filter is unsupported. */
    filter: brightness(0) saturate(100%) invert(60%) sepia(58%) saturate(443%) hue-rotate(95deg) brightness(95%) contrast(89%);
}
.nr-product-features__title {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.3;
}
.nr-product-features__desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.55;
}

/* ── 7a-kb) Knowledge-base browser (Guides + API docs) ── */
.nr-kb {
    background: linear-gradient(180deg, #050f1c 0%, #0a1626 100%);
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    max-width: none;
}
.nr-kb__inner { max-width: 1280px; margin: 0 auto; padding: clamp(36px, 5vw, 64px) clamp(20px, 4vw, 32px) clamp(40px, 6vw, 72px); }
.nr-kb__lede { text-align: center; max-width: 720px; margin: 0 auto 36px; }
.nr-kb__search--hero {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px auto 0;
    max-width: 640px;
    background: rgba(10, 22, 38, 0.92);
    border: 1px solid rgba(20, 187, 96, 0.30);
    border-radius: 10px;
    padding: 14px 18px;
    color: rgba(255, 255, 255, 0.65);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.30);
    transition: border-color 180ms ease-out, box-shadow 180ms ease-out;
}
.nr-kb__search--hero:focus-within {
    border-color: rgba(20, 187, 96, 0.60);
    box-shadow: 0 12px 36px rgba(20, 187, 96, 0.18);
}
.nr-kb__search--hero input {
    flex: 1;
    background: transparent;
    border: 0;
    color: #ffffff;
    font: inherit;
    font-size: 16px;
    line-height: 1.4;
}
.nr-kb__search--hero input:focus { outline: 0; }
.nr-kb__search--hero svg { color: var(--primary, #14bb60); flex-shrink: 0; }
.nr-kb__search--hero .nr-kb__count {
    background: rgba(20, 187, 96, 0.12);
    border: 1px solid rgba(20, 187, 96, 0.30);
    color: var(--primary, #14bb60);
    margin: 0;
}
.nr-kb__eyebrow {
    display: inline-flex; align-items: center;
    padding: 6px 14px;
    background: rgba(20, 187, 96, 0.10);
    border: 1px solid rgba(20, 187, 96, 0.28);
    border-radius: 999px;
    color: var(--primary, #14bb60);
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
}
.nr-kb__headline { font-size: clamp(24px, 3vw, 32px); font-weight: 700; color: #fff; margin: 14px 0 0; line-height: 1.2; }

.nr-kb__controls {
    display: flex; align-items: center; gap: 16px;
    margin: 0 0 18px;
}
.nr-kb__search {
    flex: 1;
    display: flex; align-items: center; gap: 10px;
    background: rgba(10, 22, 38, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    padding: 10px 14px;
    color: rgba(255, 255, 255, 0.55);
    transition: border-color 180ms ease-out;
}
.nr-kb__search:focus-within { border-color: rgba(20, 187, 96, 0.50); }
.nr-kb__search input {
    flex: 1;
    background: transparent;
    border: 0;
    color: #ffffff;
    font: inherit;
    font-size: 14px;
}
.nr-kb__search input:focus { outline: 0; }
.nr-kb__count {
    color: rgba(255, 255, 255, 0.55);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    padding: 6px 10px;
    background: rgba(10, 22, 38, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
}

.nr-kb__chips {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 24px;
}
.nr-kb__chips .nr-chip {
    background: rgba(10, 22, 38, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px; font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out;
}
.nr-kb__chips .nr-chip:hover { color: #ffffff; border-color: rgba(20, 187, 96, 0.30); }
.nr-kb__chips .nr-chip.is-active,
.nr-kb__chips .nr-chip[aria-pressed="true"] {
    background: rgba(20, 187, 96, 0.16);
    border-color: rgba(20, 187, 96, 0.50);
    color: #ffffff;
}

.nr-kb__grid {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
@media (max-width: 980px) { .nr-kb__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .nr-kb__grid { grid-template-columns: 1fr; } }
.nr-kb__card {
    display: flex; flex-direction: column;
    background: rgba(10, 22, 38, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 18px 20px;
    color: inherit;
    text-decoration: none !important;
    transition: border-color 180ms ease-out, transform 180ms ease-out;
    height: 100%;
}
.nr-kb__card:hover { border-color: rgba(20, 187, 96, 0.30); transform: translateY(-2px); }
.nr-kb__title { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: #ffffff; line-height: 1.35; }
.nr-kb__excerpt { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, 0.66); flex: 1; }
.nr-kb__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.nr-kb__tag {
    display: inline-flex;
    background: rgba(20, 187, 96, 0.10);
    border: 1px solid rgba(20, 187, 96, 0.22);
    color: var(--primary, #14bb60);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
}
.nr-kb__cta { color: var(--primary, #14bb60); font-size: 13px; font-weight: 600; margin-top: auto; }
.nr-kb__empty { text-align: center; color: rgba(255, 255, 255, 0.6); margin-top: 24px; }

/* ── 7a-kba) KB single article + archive ── */
.nr-kb-article-hero {
    background:
        radial-gradient(ellipse at 20% 0%, rgba(82, 167, 255, 0.10), transparent 55%),
        linear-gradient(180deg, #0a1626 0%, #050f1c 100%);
    padding: clamp(36px, 5vw, 56px) 0 clamp(28px, 4vw, 40px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    /* Full-bleed so the dark gradient covers viewport edge-to-edge even
     * when a parent wrapper has padding/max-width applied. */
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    max-width: none;
}
.nr-kb-article-hero__inner {
    max-width: 920px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 32px);
    color: #ffffff;
}
.nr-kb-article-hero__crumbs {
    margin: 0 0 14px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.04em;
}
.nr-kb-article-hero__crumbs a { color: var(--primary, #14bb60) !important; text-decoration: none !important; }
.nr-kb-article-hero__crumbs a:hover { text-decoration: underline !important; }
.nr-kb-article-hero__title {
    margin: 0 0 12px;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: #ffffff;
}
.nr-kb-article-hero__meta {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    display: flex;
    gap: 10px;
}

.nr-kb-article {
    background: linear-gradient(180deg, #050f1c 0%, #0a1626 100%);
    color: rgba(255, 255, 255, 0.86);
    padding: clamp(28px, 4vw, 56px) 0 clamp(36px, 5vw, 64px);
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    max-width: none;
}
.nr-kb-article__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 32px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}
@media (max-width: 920px) { .nr-kb-article__inner { grid-template-columns: 1fr; } }
.nr-kb-article__body {
    background: rgba(10, 22, 38, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: clamp(24px, 4vw, 44px);
    line-height: 1.75;
    font-size: 15px;
}
.nr-kb-article__body h2 {
    margin: 32px 0 14px;
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
}
.nr-kb-article__body h3 {
    margin: 24px 0 10px;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.35;
}
.nr-kb-article__body h4 { margin: 20px 0 8px; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.92); }
.nr-kb-article__body p,
.nr-kb-article__body li,
.nr-kb-article__body span { color: inherit; }       /* defeat global "p { color: var(--text_color2) }" */
.nr-kb-article__body p { margin: 0 0 14px; color: rgba(255, 255, 255, 0.86); }
.nr-kb-article__body li { color: rgba(255, 255, 255, 0.86); }
.nr-kb-article__body a { color: var(--primary, #14bb60); }
.nr-kb-article__body a:hover { text-decoration: underline; }
/* Restore list bullets — main.css has a global `ul, li { list-style: none }`
 * reset that strips them site-wide. Article bodies need real bullets/numbers,
 * so we override here. padding-left provides the indent; list-style-position
 * stays at the default `outside` so the bullet sits in that padding. */
.nr-kb-article__body ul,
.nr-kb-article__body ol { margin: 0 0 16px; padding-left: 24px; }
.nr-kb-article__body ul    { list-style-type: disc; }
.nr-kb-article__body ol    { list-style-type: decimal; }
.nr-kb-article__body ul ul { list-style-type: circle; }
.nr-kb-article__body ol ol { list-style-type: lower-alpha; }
.nr-kb-article__body li    { list-style: inherit; margin-bottom: 6px; }
.nr-kb-article__body code {
    background: rgba(20, 187, 96, 0.12);
    border: 1px solid rgba(20, 187, 96, 0.30);
    color: #b6f5d3;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.92em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.nr-kb-article__body pre {
    background: #04101e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 16px 18px;
    overflow-x: auto;
    margin: 16px 0;
    color: #cfe1f4;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.55;
}
.nr-kb-article__body pre code { background: transparent; border: 0; padding: 0; color: inherit; }
.nr-kb-article__body img { max-width: 100%; height: auto; border-radius: 6px; margin: 12px 0; }
.nr-kb-article__body blockquote {
    margin: 16px 0;
    padding: 12px 18px;
    border-left: 3px solid var(--primary, #14bb60);
    background: rgba(20, 187, 96, 0.06);
    color: rgba(255, 255, 255, 0.78);
    border-radius: 0 6px 6px 0;
}
.nr-kb-article__body table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 13px;
}
.nr-kb-article__body th,
.nr-kb-article__body td {
    border: 1px solid rgba(255, 255, 255, 0.10);
    padding: 8px 12px;
    text-align: left;
}
.nr-kb-article__body th {
    background: rgba(20, 187, 96, 0.08);
    color: #ffffff;
    font-weight: 600;
}
/* ─── Blog reading view (single-post) ────────────────────────────
 *
 * Layout (per 2026-05-08 marketing iteration):
 *   - Section 1 (global nav) ……… dark, untouched.
 *   - Single page-card …………… white card on grey full-bleed
 *     containing hero (breadcrumb + title + meta) → cover image →
 *     article body. No right-rail sidebar (removed in this revision).
 *
 * The card spans the full content width and reads as one continuous
 * white container; the grey gutter only shows around the card.
 *
 * Background tokens match the existing .nr-tone-light treatment
 * (#f5f8fc → #e9eff7) used elsewhere on the site so the blog feels
 * site-consistent. Code/pre blocks stay dark for technical contrast.
 */
/* Give the global header its own dark background on single-post
 * pages so the white logo + nav links + "Log in" pill stay legible
 * over the grey blog gutter. (.nr-header.header__main is normally
 * background:transparent and relies on a dark hero behind it; the
 * blog has a light hero, so we paint the header itself.)
 *
 * Sticky-header already has its own dark bg via the global rule —
 * this :not(.sticky-header) selector only applies on first paint
 * before the user scrolls past the trigger. No z-index gymnastics:
 * the existing nav stacking is unchanged. */
body.single-post .nr-header.header__main:not(.sticky-header) {
    background:
        radial-gradient(ellipse at 20% 0%, rgba(82, 167, 255, 0.10), transparent 55%),
        linear-gradient(180deg, #0a1626 0%, #050f1c 100%);
}

.nr-kb-article-page {
    background:
        radial-gradient(ellipse at 80% 0%, rgba(82, 167, 255, 0.08), transparent 55%),
        linear-gradient(180deg, #f5f8fc 0%, #e9eff7 100%);
    /* Top padding = breathing-room gap between the dark global nav cap
     * (above) and the white card with breadcrumb. */
    padding: clamp(48px, 6vw, 96px) clamp(20px, 4vw, 32px) clamp(36px, 5vw, 72px);
    /* Full-bleed grey gutter regardless of any parent shell padding. */
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    max-width: none;
    color: #1a2331;
}
.nr-kb-article-page__card {
    /* Site-wide content width (matches nr-product-highlight,
     * nr-product-features, et al. which all use 1280 px). */
    max-width: 1280px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid rgba(15, 28, 46, 0.06);
    border-radius: 14px;
    box-shadow: 0 1px 0 rgba(15, 28, 46, 0.02), 0 14px 40px -22px rgba(15, 28, 46, 0.18);
    /* No padding on the card itself — each child section (hero,
     * cover, article body) provides its own internal padding. This
     * lets the cover image bleed to the card's left/right edges
     * for a clean editorial photo treatment. */
    overflow: hidden;
}

/* Hero (breadcrumb + title + meta) inside the card — dark ink on
 * white, no separate background, padding handles the spacing. */
.nr-kb-article-page .nr-kb-article-hero {
    background: transparent;
    padding: 0;
    margin: 0;
    width: auto;
    max-width: none;
    border-bottom: 0;
}
.nr-kb-article-page .nr-kb-article-hero__inner {
    color: #1a2331;
    padding: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 48px) clamp(20px, 3vw, 36px);
    max-width: none;
    margin: 0;
}
.nr-kb-article-page .nr-kb-article-hero__title  { color: #0a1626; }
.nr-kb-article-page .nr-kb-article-hero__crumbs { color: rgba(15, 28, 46, 0.55); }
.nr-kb-article-page .nr-kb-article-hero__meta   { color: rgba(15, 28, 46, 0.55); }

/* Cover image — bleeds to the card's left/right edges, no rounded
 * corners (the parent card's overflow:hidden + border-radius take
 * care of clipping). */
/* Cover image gets the same horizontal padding as the rest of the
 * card content (hero, body) so it doesn't stretch edge-to-edge —
 * "room to breathe" inside the card. Rounded corners on the image
 * itself + a soft drop-shadow lift it off the white surface
 * subtly, like a polaroid. */
.nr-kb-article-page .nr-kb-article__cover {
    background: transparent;
    padding: 0 clamp(24px, 4vw, 48px);
    margin: 0;
    width: auto;
    max-width: none;
}
.nr-kb-article-page .nr-kb-article__cover-inner {
    max-width: none;
    margin: 0;
    padding: 0;
}
.nr-kb-article-page .nr-kb-article__cover img {
    /* No max-height + no object-fit so any image renders at its
     * natural aspect ratio without cropping. The base
     * .nr-kb-article__cover img rule (used by the legacy KB-article
     * template) sets max-height:480 + object-fit:cover, so we need
     * to RESET both explicitly here — otherwise the cascade still
     * crops single-post hero banners (e.g. the 2:1 "Managed vs
     * Unmanaged" image had its bottom CLI line chopped off). */
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: initial;
    border-radius: 12px;
    border: 1px solid rgba(15, 28, 46, 0.06);
    box-shadow: 0 6px 20px -8px rgba(15, 28, 46, 0.18);
    margin: 0;
}

/* Article body — full card width with 20 px body type and 1.7
 * line-height (matching Hostinger blog). We removed the sidebar in
 * 2026-05-08, so the reference blogs we cross-checked (Hostinger
 * 664 px column / Kinsta 608 px column) don't apply — they render
 * narrow because their layouts keep dual sidebars (Kinsta is a 3-col
 * grid: TOC + content + CTA). Without a sidebar we use the full card
 * width and bump the body type to differentiate from the site-wide
 * 18 px paragraph default (set globally on `p` in main.css).
 *
 * Scoped p / li / ul / ol rules below are necessary to defeat the
 * global `p { line-height: normal; font-size: 18px }` baseline —
 * inherited container values lose specificity to that rule. */
.nr-kb-article-page .nr-kb-article__body {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 48px);
    line-height: 1.7;
    font-size: 18px;
    color: #1a2331;
}
.nr-kb-article-page .nr-kb-article__body p,
.nr-kb-article-page .nr-kb-article__body li {
    font-size: 18px;
    line-height: 1.7;
}
.nr-kb-article-page .nr-kb-article__body p {
    margin: 0 0 18px;
}
/* Editorial heading scale. The legacy .nr-kb-article__body rules use
 * 22 / 18 / 15 px (sized for the dark KB template at 15 px body) —
 * at 20 px body those look underwhelming. Bump to a scale that
 * matches the Hostinger / Kinsta editorial feel. */
.nr-kb-article-page .nr-kb-article__body h2 {
    margin: 48px 0 16px;
    font-size: 32px;
    line-height: 1.25;
    font-weight: 700;
}
.nr-kb-article-page .nr-kb-article__body h3 {
    /* Tightened 2026-05-20 — authors use <h3>1. Step Name</h3> patterns
     * for numbered lists, and the previous 36/24 sizing made each step
     * read as a section break. 28/22 keeps the hierarchy distinct
     * from h2 but reads as in-section subheads. */
    margin: 28px 0 8px;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 600;
}
.nr-kb-article-page .nr-kb-article__body h4 {
    margin: 28px 0 10px;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 600;
}
.nr-kb-article-page .nr-kb-article__body h2,
.nr-kb-article-page .nr-kb-article__body h3,
.nr-kb-article-page .nr-kb-article__body h4 { color: #0a1626; }
.nr-kb-article-page .nr-kb-article__body p,
.nr-kb-article-page .nr-kb-article__body li,
.nr-kb-article-page .nr-kb-article__body span { color: #1a2331; }
.nr-kb-article-page .nr-kb-article__body a {
    /* #0a8a4d previously rendered at 4.41:1 on white — fails WCAG AA.
     * Darkened to #0a763d (5.74:1) to match .nr-btn--primary's
     * accessible green. Consistent palette across links + buttons. */
    color: #0a763d;
    text-underline-offset: 0.18em;
    text-decoration-color: rgba(10, 118, 61, 0.45);
    transition: text-decoration-color 150ms ease-out, color 150ms ease-out;
}
.nr-kb-article-page .nr-kb-article__body a:hover {
    color: #075c2c;        /* 8.15:1 — AAA, matches .nr-btn--primary:hover */
    text-decoration-color: currentColor;
}

/* Code blocks: keep the dark treatment for technical contrast. */
.nr-kb-article-page .nr-kb-article__body code {
    background: rgba(20, 187, 96, 0.10);
    border-color: rgba(20, 187, 96, 0.28);
    color: #0a6f3f;
}
.nr-kb-article-page .nr-kb-article__body pre {
    background: #0a1626;
    border-color: rgba(15, 28, 46, 0.12);
    color: #e8ecf3;
}
.nr-kb-article-page .nr-kb-article__body blockquote {
    background: rgba(20, 187, 96, 0.06);
    border-left-color: #14bb60;
    color: #0a1626;
}
.nr-kb-article-page .nr-kb-article__body th,
.nr-kb-article-page .nr-kb-article__body td { border-color: rgba(15, 28, 46, 0.08); }
.nr-kb-article-page .nr-kb-article__body th  { background: rgba(20, 187, 96, 0.08); color: #0a1626; }
.nr-kb-article-page .nr-kb-article__body img {
    box-shadow: 0 4px 16px -8px rgba(15, 28, 46, 0.22);
    border-radius: 8px;
}
.nr-kb-article-page .nr-kb-article__tag-link {
    background: rgba(15, 28, 46, 0.04);
    border: 1px solid rgba(15, 28, 46, 0.10);
    color: #1a2331;
}
.nr-kb-article-page .nr-kb-article__tag-link:hover {
    background: rgba(20, 187, 96, 0.08);
    border-color: rgba(20, 187, 96, 0.30);
    color: #0a6f3f;
}
/* (Body-class-scoped overrides removed 2026-05-08 — the new
 * .nr-kb-article-page wrapper carries all single-post styling now;
 * see the block above. The legacy `body.single-post .nr-kb-article*`
 * rules they replaced were sized for a multi-section layout with
 * sidebar that no longer exists.) */

.nr-kb-article__copy {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(20, 187, 96, 0.12);
    border: 1px solid rgba(20, 187, 96, 0.30);
    color: var(--primary, #14bb60);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    transition: background 180ms ease-out;
}
.nr-kb-article__copy:hover { background: rgba(20, 187, 96, 0.22); }

.nr-kb-article__side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 96px;
}
@media (max-width: 920px) { .nr-kb-article__side { position: static; } }
.nr-kb-article__side-card {
    background: rgba(10, 22, 38, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 18px 20px;
}
.nr-kb-article__side-card h3 {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.nr-kb-article__side-card p { font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, 0.82); margin: 0 0 12px; }
.nr-kb-article__search {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 6px;
    padding: 8px 12px;
    color: rgba(255, 255, 255, 0.55);
}
.nr-kb-article__search:focus-within { border-color: rgba(20, 187, 96, 0.50); }
.nr-kb-article__search input {
    flex: 1; background: transparent; border: 0; color: #ffffff; font: inherit; font-size: 13px;
}
.nr-kb-article__search input:focus { outline: 0; }
.nr-kb-article__related {
    list-style: none;
    margin: 0;
    padding: 0;
}
.nr-kb-article__related li {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
    padding: 10px 0;
}
.nr-kb-article__related li:last-child { border-bottom: 0; padding-bottom: 0; }
.nr-kb-article__related li:first-child { padding-top: 0; }
.nr-kb-article__related a {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-decoration: none !important;
    color: inherit;
}
.nr-kb-article__related-title { color: #ffffff; font-size: 13px; font-weight: 500; line-height: 1.4; }
.nr-kb-article__related-date { color: rgba(255, 255, 255, 0.72); font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.nr-kb-article__related a:hover .nr-kb-article__related-title { color: var(--primary, #14bb60); }
.nr-kb-article__cta { background: rgba(20, 187, 96, 0.06); border-color: rgba(20, 187, 96, 0.20); }

/* Single-column variant — used by templates that don't render the
 * sidebar <aside> (e.g. single-nr_vacancy.php). Without this, the
 * empty 320px right column from the default 2-col grid leaves the
 * article body off-centre. */
.nr-kb-article__inner--solo {
    grid-template-columns: 1fr;
    max-width: 920px;
}

/* Optional editorial standfirst paragraph — set on the first <p> of
 * the body when the post Excerpt is filled in. Slightly larger,
 * lighter weight, brighter text. */
.nr-kb-article__lede {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92) !important;
    border-left: 3px solid var(--primary, #14bb60);
    padding-left: 16px;
    margin: 0 0 24px !important;
}

/* ─── KB single article — light theme variant (2026-05-09) ──────
 * Same single-knowledge_base.php template, but the body+sidebar
 * section gets the white-card-on-grey-gutter treatment from the
 * blog. The dark .nr-kb-article-hero (title section) stays dark
 * per design — only the body container transforms.
 *
 * Modifier class is added directly to the existing
 * <section class="nr-kb-article"> wrapper, so all base layout
 * (the 1fr+320px grid in .nr-kb-article__inner, sticky sidebar,
 * <920px collapse) keeps working unchanged. */
.nr-kb-article.nr-kb-article--light {
    background:
        radial-gradient(ellipse at 80% 0%, rgba(82, 167, 255, 0.08), transparent 55%),
        linear-gradient(180deg, #f5f8fc 0%, #e9eff7 100%);
    color: #1a2331;
}

/* Body — white card with editorial 20 px / 1.7 typography. Mirrors
 * the .nr-kb-article-page .nr-kb-article__body block above; kept
 * separate (rather than reusing that scope) because the KB body
 * sits inside a 2-col grid and gets its own card border, while
 * the blog body is the full-card child of a single outer card. */
.nr-kb-article--light .nr-kb-article__body {
    background: #ffffff;
    border: 1px solid rgba(15, 28, 46, 0.06);
    border-radius: 14px;
    box-shadow: 0 1px 0 rgba(15, 28, 46, 0.02), 0 14px 40px -22px rgba(15, 28, 46, 0.18);
    padding: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 48px);
    line-height: 1.7;
    font-size: 20px;
    color: #1a2331;
}
.nr-kb-article--light .nr-kb-article__body p,
.nr-kb-article--light .nr-kb-article__body li {
    font-size: 20px;
    line-height: 1.7;
    color: #1a2331;
}
.nr-kb-article--light .nr-kb-article__body p { margin: 0 0 20px; }
.nr-kb-article--light .nr-kb-article__body h2 {
    margin: 48px 0 16px;
    font-size: 32px;
    line-height: 1.25;
    font-weight: 700;
    color: #0a1626;
}
.nr-kb-article--light .nr-kb-article__body h3 {
    margin: 36px 0 12px;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 600;
    color: #0a1626;
}
.nr-kb-article--light .nr-kb-article__body h4 {
    margin: 28px 0 10px;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 600;
    color: #0a1626;
}
.nr-kb-article--light .nr-kb-article__body a {
    /* #0a8a4d previously rendered at 4.41:1 on white — fails WCAG AA.
     * Darkened to #0a763d (5.74:1) to match .nr-btn--primary's
     * accessible green. Consistent palette across links + buttons. */
    color: #0a763d;
    text-underline-offset: 0.18em;
    text-decoration-color: rgba(10, 118, 61, 0.45);
    transition: text-decoration-color 150ms ease-out, color 150ms ease-out;
}
.nr-kb-article--light .nr-kb-article__body a:hover {
    color: #075c2c;        /* 8.15:1 — AAA, matches .nr-btn--primary:hover */
    text-decoration-color: currentColor;
}
/* Code: keep dark for technical contrast (matches blog). */
.nr-kb-article--light .nr-kb-article__body code {
    background: rgba(20, 187, 96, 0.10);
    border-color: rgba(20, 187, 96, 0.28);
    color: #0a6f3f;
}
.nr-kb-article--light .nr-kb-article__body pre {
    background: #0a1626;
    border-color: rgba(15, 28, 46, 0.12);
    color: #e8ecf3;
}
.nr-kb-article--light .nr-kb-article__body blockquote {
    background: rgba(20, 187, 96, 0.06);
    border-left-color: #14bb60;
    color: #0a1626;
}
.nr-kb-article--light .nr-kb-article__body th,
.nr-kb-article--light .nr-kb-article__body td { border-color: rgba(15, 28, 46, 0.08); }
.nr-kb-article--light .nr-kb-article__body th  { background: rgba(20, 187, 96, 0.08); color: #0a1626; }
.nr-kb-article--light .nr-kb-article__body img {
    box-shadow: 0 4px 16px -8px rgba(15, 28, 46, 0.22);
    border-radius: 8px;
}
/* Lede paragraph (post excerpt) on the light variant. */
.nr-kb-article--light .nr-kb-article__lede {
    color: #0a1626 !important;
    border-left-color: #14bb60;
}

/* Sidebar cards — light versions of the dark .nr-kb-article__side-card
 * rule above. Kept the same shape/padding so the existing markup
 * (search form, related list, CTA) renders identically. */
.nr-kb-article--light .nr-kb-article__side-card {
    background: #ffffff;
    border: 1px solid rgba(15, 28, 46, 0.06);
    box-shadow: 0 1px 0 rgba(15, 28, 46, 0.02), 0 8px 24px -14px rgba(15, 28, 46, 0.12);
}
.nr-kb-article--light .nr-kb-article__side-card h3 { color: #0a1626; }
.nr-kb-article--light .nr-kb-article__side-card p  { color: rgba(15, 28, 46, 0.82); }

/* Search input inside the sidebar. */
.nr-kb-article--light .nr-kb-article__search {
    background: #f5f8fc;
    border-color: rgba(15, 28, 46, 0.10);
    color: rgba(15, 28, 46, 0.55);
}
.nr-kb-article--light .nr-kb-article__search:focus-within {
    border-color: rgba(20, 187, 96, 0.50);
    background: #ffffff;
}
.nr-kb-article--light .nr-kb-article__search input { color: #1a2331; }
.nr-kb-article--light .nr-kb-article__search input::placeholder { color: rgba(15, 28, 46, 0.45); }

/* Related articles list — light variant. */
.nr-kb-article--light .nr-kb-article__related li {
    border-bottom-color: rgba(15, 28, 46, 0.08);
}
.nr-kb-article--light .nr-kb-article__related-title { color: #0a1626; }
.nr-kb-article--light .nr-kb-article__related-date  { color: rgba(15, 28, 46, 0.72); }
.nr-kb-article--light .nr-kb-article__related a:hover .nr-kb-article__related-title { color: #0a8a4d; }

/* CTA card — keep the brand-green tint, but lighten background/border
 * so it sits on the white-card landscape rather than the dark one. */
.nr-kb-article--light .nr-kb-article__cta {
    background: rgba(20, 187, 96, 0.06);
    border-color: rgba(20, 187, 96, 0.28);
}
.nr-kb-article--light .nr-kb-article__cta h3 { color: #0a6f3f; }
.nr-kb-article--light .nr-kb-article__cta p  { color: rgba(15, 28, 46, 0.72); }

/* ── 7a-vac) Vacancy "other open roles" closing strip ── */
.nr-vacancy-more {
    background: linear-gradient(180deg, #050f1c 0%, #0a1626 100%);
    padding: clamp(40px, 5vw, 64px) 0 clamp(48px, 6vw, 72px);
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    max-width: none;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.nr-vacancy-more__inner {
    max-width: 920px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 32px);
    color: rgba(255, 255, 255, 0.86);
}
.nr-vacancy-more__title {
    margin: 0 0 20px;
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 700;
    color: #ffffff;
}
.nr-vacancy-more__list {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: grid;
    gap: 10px;
}
.nr-vacancy-more__item { margin: 0; }
.nr-vacancy-more__link {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 16px;
    align-items: center;
    padding: 16px 20px;
    background: rgba(10, 22, 38, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    text-decoration: none !important;
    color: inherit;
    transition: border-color 120ms ease, background 120ms ease;
}
.nr-vacancy-more__link:hover {
    border-color: rgba(20, 187, 96, 0.35);
    background: rgba(20, 187, 96, 0.04);
}
.nr-vacancy-more__role {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
}
.nr-vacancy-more__meta {
    display: flex;
    gap: 10px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.nr-vacancy-more__meta span:not(:last-child)::after {
    content: '·';
    margin-left: 10px;
    color: rgba(255, 255, 255, 0.35);
}
.nr-vacancy-more__arrow {
    color: var(--primary, #14bb60);
    font-size: 16px;
    transition: transform 120ms ease;
}
.nr-vacancy-more__link:hover .nr-vacancy-more__arrow { transform: translateX(3px); }
.nr-vacancy-more__cta { margin: 0; }
@media (max-width: 600px) {
    .nr-vacancy-more__link { grid-template-columns: 1fr auto; }
    .nr-vacancy-more__meta { grid-column: 1 / -1; }
}

/* ── 7a-bl) Blog index + archive ── */
.nr-blog-list {
    background: linear-gradient(180deg, #050f1c 0%, #0a1626 100%);
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    max-width: none;
}
.nr-blog-list__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 32px) clamp(36px, 5vw, 64px);
}
.nr-blog-list__inner .nr-kb__search--hero { margin: 0 auto 32px; }
.nr-blog-list__grid {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 880px) { .nr-blog-list__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .nr-blog-list__grid { grid-template-columns: 1fr; } }
.nr-blog-list__pagination,
.nr-kb__pagination {
    margin-top: 36px;
    display: flex; justify-content: center;
}
.nr-blog-list__pagination .nav-links,
.nr-kb__pagination .nav-links {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.nr-blog-list__pagination .page-numbers,
.nr-kb__pagination .page-numbers {
    background: rgba(10, 22, 38, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.80) !important;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    min-width: 36px;
    text-align: center;
    transition: background 180ms ease-out, border-color 180ms ease-out;
}
.nr-blog-list__pagination .page-numbers:hover,
.nr-kb__pagination .page-numbers:hover {
    border-color: rgba(20, 187, 96, 0.40);
    color: var(--primary, #14bb60) !important;
}
.nr-blog-list__pagination .page-numbers.current,
.nr-kb__pagination .page-numbers.current {
    background: rgba(20, 187, 96, 0.16);
    border-color: rgba(20, 187, 96, 0.50);
    color: #ffffff !important;
}
.nr-kb-article__cover {
    background: #050f1c;
    padding: 0 0 clamp(24px, 4vw, 48px);
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    max-width: none;
}
.nr-kb-article__cover-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 32px);
}
.nr-kb-article__cover img {
    display: block;
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.nr-kb-article__tags {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px dashed rgba(255, 255, 255, 0.10);
    display: flex; flex-wrap: wrap; gap: 8px;
}
.nr-kb-article__tag-link {
    display: inline-flex;
    background: rgba(20, 187, 96, 0.10);
    border: 1px solid rgba(20, 187, 96, 0.28);
    color: var(--primary, #14bb60) !important;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    text-decoration: none !important;
}
.nr-kb-article__tag-link:hover { background: rgba(20, 187, 96, 0.18); }
.nr-kb-article__comments {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px dashed rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.78);
}

/* ── 7a-pl) Press list (press-releases page) ── */
.nr-press-list {
    background: linear-gradient(180deg, #0a1626 0%, #050f1c 100%);
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    max-width: none;
}
.nr-press-list__inner {
    max-width: 1200px; margin: 0 auto;
    padding: clamp(36px, 5vw, 64px) clamp(20px, 4vw, 32px) clamp(40px, 6vw, 72px);
}
.nr-press-list__lede { text-align: center; max-width: 720px; margin: 0 auto 36px; }
.nr-press-list__eyebrow {
    display: inline-flex; align-items: center;
    padding: 6px 14px;
    background: rgba(20, 187, 96, 0.10);
    border: 1px solid rgba(20, 187, 96, 0.28);
    border-radius: 999px;
    color: var(--primary, #14bb60);
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
}
.nr-press-list__headline {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700; color: #ffffff;
    line-height: 1.2; margin: 14px 0 0;
}
.nr-press-list__grid {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 880px) { .nr-press-list__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .nr-press-list__grid { grid-template-columns: 1fr; } }
.nr-press-list__card {
    display: flex; flex-direction: column;
    background: rgba(10, 22, 38, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
    color: inherit;
    text-decoration: none !important;
    transition: border-color 200ms ease-out, transform 200ms ease-out;
    height: 100%;
}
.nr-press-list__card:hover {
    border-color: rgba(20, 187, 96, 0.30);
    transform: translateY(-2px);
}
.nr-press-list__media {
    height: 160px;
    background-size: cover;
    background-position: center;
    background-color: rgba(20, 187, 96, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}
.nr-press-list__media--placeholder { color: rgba(20, 187, 96, 0.55); }
.nr-press-list__date {
    margin: 16px 20px 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.50);
    letter-spacing: 0.04em;
}
.nr-press-list__title {
    margin: 8px 20px 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: #ffffff;
}
.nr-press-list__excerpt {
    margin: 0 20px 14px;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.68);
    flex: 1;
}
.nr-press-list__cta {
    margin: auto 20px 18px;
    color: var(--primary, #14bb60);
    font-size: 13px;
    font-weight: 600;
}

/* ── 7a-mr) Test mirror panel + Grafana lazy iframe (city pages) ── */
.nr-city-mirror {
    margin: 18px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
}
.nr-city-mirror__row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 12px;
    align-items: baseline;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}
.nr-city-mirror__row:last-child { border-bottom: 0; padding-bottom: 0; }
.nr-city-mirror__row dt {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin: 0;
}
.nr-city-mirror__row dd { margin: 0; color: rgba(255, 255, 255, 0.85); }
.nr-city-mirror__row a { color: var(--primary, #14bb60) !important; text-decoration: none !important; font-weight: 500; }
.nr-city-mirror__row a:hover { text-decoration: underline !important; }
.nr-city-mirror__row code {
    font-size: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    padding: 1px 6px;
}
.nr-city-mirror__row--specs dd {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.nr-city-mirror__chip {
    background: rgba(20, 187, 96, 0.10);
    border: 1px solid rgba(20, 187, 96, 0.28);
    color: rgba(255, 255, 255, 0.92);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 3px;
}
/* ── Grafana per-target accordion ─────────────────────────────────
 * One <details> per latency target. Closed state shows a pill with
 * the target name (e.g. "Google DNS · 8.8.8.8") and a tiny pulse
 * sparkline hinting that data is flowing. Expanding lazy-loads a
 * d-solo iframe just for that panel.
 *
 * The Grafana mirror's CSP only allows iframe embedding from
 * https://netrouting.com — dev / localhost will see the iframe
 * blocked by the browser. Production renders correctly. */
.nr-city-grafana {
    margin-top: 18px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}
.nr-city-grafana__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 14px 18px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nr-city-grafana__open {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--primary, #14bb60);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dotted transparent;
    padding-bottom: 1px;
    transition: border-color 180ms ease-out, color 180ms ease-out;
}
.nr-city-grafana__open:hover {
    border-bottom-color: var(--primary, #14bb60);
    color: #1ad072;
}
.nr-city-grafana__note {
    margin: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    flex: 1 1 280px;
    line-height: 1.5;
}
.nr-city-grafana__targets {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.nr-city-grafana__target {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.02);
    transition: border-color 180ms ease-out, background 180ms ease-out;
}
.nr-city-grafana__target[open] {
    border-color: rgba(20, 187, 96, 0.30);
    background: rgba(20, 187, 96, 0.04);
}
.nr-city-grafana__target:hover { border-color: rgba(255, 255, 255, 0.18); }
.nr-city-grafana__target[open]:hover { border-color: rgba(20, 187, 96, 0.40); }

/* The browser shows a default disclosure marker (▶ / ▼) on every
 * <summary>. Three places it can leak through, all of which need
 * explicit suppression — `list-style: none` alone isn't enough on
 * Safari, and Firefox uses `::marker` (not the WebKit pseudo). */
.nr-city-grafana__target > summary.nr-city-grafana__target-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    cursor: pointer;
    user-select: none;
    list-style: none;
    list-style-image: none;
    list-style-type: none;
}
.nr-city-grafana__target > summary.nr-city-grafana__target-head::-webkit-details-marker { display: none !important; }
.nr-city-grafana__target > summary.nr-city-grafana__target-head::marker { content: '' !important; display: none !important; }

.nr-city-grafana__target-arrow {
    color: rgba(255, 255, 255, 0.55);
    font-size: 18px;
    line-height: 1;
    width: 12px;
    flex-shrink: 0;
    transition: transform 180ms ease-out, color 180ms ease-out;
}
.nr-city-grafana__target[open] .nr-city-grafana__target-arrow {
    transform: rotate(90deg);
    color: var(--primary, #14bb60);
}
.nr-city-grafana__target-label {
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}
.nr-city-grafana__target-meta {
    color: rgba(255, 255, 255, 0.55);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    letter-spacing: 0.02em;
}
.nr-city-grafana__target-spark {
    margin-left: auto;
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 16px;
}
.nr-city-grafana__target-spark span {
    display: inline-block;
    width: 3px;
    height: 30%;
    background: rgba(20, 187, 96, 0.45);
    border-radius: 1px;
    animation: nr-grafana-spark 1.4s ease-in-out infinite;
}
.nr-city-grafana__target-spark span:nth-child(2) { animation-delay: 0.18s; height: 55%; }
.nr-city-grafana__target-spark span:nth-child(3) { animation-delay: 0.36s; height: 75%; }
.nr-city-grafana__target-spark span:nth-child(4) { animation-delay: 0.54s; height: 50%; }
.nr-city-grafana__target-spark span:nth-child(5) { animation-delay: 0.72s; height: 35%; }
@keyframes nr-grafana-spark {
    0%, 100% { transform: scaleY(0.55); opacity: 0.45; }
    50%      { transform: scaleY(1.10); opacity: 0.95; }
}
.nr-city-grafana__target[open] .nr-city-grafana__target-spark { display: none; }

.nr-city-grafana__panel-wrap {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: #0a1626;
    border-radius: 0 0 5px 5px;
    overflow: hidden;
}
.nr-city-grafana__panel-wrap iframe {
    display: block;
    width: 100%;
    /* Single d-solo panel — 8 grid rows × 30px + Grafana chrome ≈ 320px */
    height: 320px;
    border: 0;
    background: transparent;
}
.nr-city-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 36px;
}

/* ── 7a-gnt) Netrouting Guarantee (DC pages, /netrouting-guarantee/) ── */
.nr-guarantee {
    background:
        radial-gradient(ellipse at 100% 0%, rgba(20, 187, 96, 0.10), transparent 55%),
        linear-gradient(180deg, #0a1626 0%, #050f1c 100%);
}
.nr-guarantee__inner { max-width: 1180px; margin: 0 auto; padding: clamp(56px, 8vw, 96px) clamp(20px, 4vw, 32px); }
.nr-guarantee__lede { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.nr-guarantee__badge {
    display: inline-block;
    margin-bottom: 18px;
    filter: drop-shadow(0 12px 24px rgba(20, 187, 96, 0.35));
}
.nr-guarantee__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(20, 187, 96, 0.12);
    border: 1px solid rgba(20, 187, 96, 0.30);
    border-radius: 999px;
    color: var(--primary, #14bb60);
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
}
.nr-guarantee__headline {
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.18;
    margin: 16px 0 14px;
}
.nr-guarantee__sub { font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, 0.72); margin: 0; }
.nr-guarantee__grid {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    overflow: hidden;
}
@media (max-width: 720px) { .nr-guarantee__grid { grid-template-columns: 1fr; } }
.nr-guarantee__item {
    background: rgba(10, 22, 38, 0.7);
    padding: 22px 24px;
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 14px 16px;
    align-items: start;
    transition: background 200ms ease-out;
}
.nr-guarantee__item:hover { background: rgba(15, 32, 54, 0.92); }
.nr-guarantee__icon {
    grid-row: span 2;
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 187, 96, 0.08);
    border: 1px solid rgba(20, 187, 96, 0.22);
    border-radius: 10px;
    color: var(--primary, #14bb60);
}
.nr-guarantee__title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.3;
}
.nr-guarantee__desc {
    margin: 0;
    grid-column: 2;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.6;
}

/* Compact inline guarantee badge for plan-grid cards. */
.nr-guarantee-mini {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    background: rgba(20, 187, 96, 0.10);
    border: 1px solid rgba(20, 187, 96, 0.30);
    border-radius: 999px;
    color: var(--primary, #14bb60);
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.03em;
    text-decoration: none !important;
}
.nr-guarantee-mini svg { color: var(--primary, #14bb60); }

/* ── 7a-q) Quote form (DC pages, contact, careers) ── */
.nr-quote {
    background:
        radial-gradient(ellipse at 0% 100%, rgba(82, 167, 255, 0.10), transparent 55%),
        linear-gradient(180deg, #050f1c 0%, #0a1626 100%);
}
.nr-quote__inner {
    max-width: 1180px; margin: 0 auto;
    padding: clamp(56px, 8vw, 96px) clamp(20px, 4vw, 32px);
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(28px, 5vw, 64px);
    align-items: start;
}
@media (max-width: 880px) { .nr-quote__inner { grid-template-columns: 1fr; } }
.nr-quote__lede { color: #ffffff; }
.nr-quote__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(82, 167, 255, 0.12);
    border: 1px solid rgba(82, 167, 255, 0.30);
    border-radius: 999px;
    color: #52a7ff;
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
}
.nr-quote__headline {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 700;
    line-height: 1.2;
    margin: 16px 0 14px;
    color: #ffffff;
}
.nr-quote__sub { font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, 0.72); margin: 0 0 20px; }
.nr-quote__perks {
    list-style: none; margin: 16px 0 0; padding: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.nr-quote__perks li {
    position: relative; padding-left: 22px;
    font-size: 13px; color: rgba(255, 255, 255, 0.78);
}
.nr-quote__perks li::before {
    content: ""; position: absolute; left: 0; top: 7px;
    width: 14px; height: 2px;
    background: var(--primary, #14bb60);
    border-radius: 2px;
}
.nr-quote__form {
    background: rgba(10, 22, 38, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: clamp(20px, 3vw, 32px);
    display: flex; flex-direction: column; gap: 14px;
}
.nr-quote__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 540px) { .nr-quote__row { grid-template-columns: 1fr; } }
.nr-quote__field {
    display: flex; flex-direction: column; gap: 6px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.nr-quote__field input,
.nr-quote__field textarea {
    /* Override the legacy `.form-control` look from main.css that
     * leaks transparent borders here. Idle border is bright enough
     * to read on the dark navy form panel. */
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: 6px;
    padding: 12px 14px !important;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-family: inherit;
    line-height: 1.4;
    width: 100%;
    box-shadow: none !important;
    transition: border-color 180ms ease-out, background 180ms ease-out, box-shadow 180ms ease-out;
}
.nr-quote__field input::placeholder,
.nr-quote__field textarea::placeholder {
    color: rgba(255, 255, 255, 0.42);
}
.nr-quote__field input[type="file"] {
    padding: 8px 14px !important;
    cursor: pointer;
}
.nr-quote__field input[type="file"]::-webkit-file-upload-button {
    background: rgba(20, 187, 96, 0.16);
    border: 1px solid rgba(20, 187, 96, 0.40);
    color: var(--primary, #14bb60);
    font-weight: 600;
    padding: 6px 12px;
    margin-right: 12px;
    border-radius: 4px;
    cursor: pointer;
}
.nr-quote__field input:focus,
.nr-quote__field textarea:focus {
    outline: 0;
    border-color: rgba(20, 187, 96, 0.65) !important;
    background: rgba(20, 187, 96, 0.08) !important;
    box-shadow: 0 0 0 3px rgba(20, 187, 96, 0.18) !important;
}
.nr-quote__field textarea { resize: vertical; min-height: 100px; }

/* Readonly prefilled fields (e.g. SKU captured from URL param) — visually
 * distinct from editable inputs so the user knows the value came from the
 * link they clicked and isn't expected to be re-typed. */
.nr-quote__field input[readonly] {
    background: rgba(20, 187, 96, 0.05) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(20, 187, 96, 0.20) !important;
    cursor: text;
}
.nr-quote__hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.50);
    line-height: 1.4;
}
.nr-tone-light .nr-quote__hint { color: rgba(0, 0, 0, 0.55); }
.nr-quote__hp {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px; height: 1px;
    overflow: hidden;
}
.nr-quote__row--submit {
    grid-template-columns: 1fr auto;
    align-items: center;
    margin-top: 4px;
}
.nr-quote__legal { margin: 0; font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.nr-quote__legal a { color: #52a7ff !important; }
.nr-quote__form .nr-btn { white-space: nowrap; }

/* Post-submit status banners. The handler redirects with ?quote=<state>
 * (or ?resume=<state>); the form-render function reads the param and emits
 * one of these. `--success` replaces the form entirely; `--error` and the
 * turnstile-failure variant sit above the still-rendered form so the user
 * can correct + retry. FlyingPress excludes query-string URLs from its
 * cache by default, so these always render live. */
.nr-quote__notice {
    padding: 24px 28px;
    border-radius: 12px;
    border: 1px solid;
    margin: 0 0 24px;
    font-size: 15px;
    line-height: 1.55;
}
.nr-quote__notice--success {
    background: rgba(20, 187, 96, 0.10);
    border-color: rgba(20, 187, 96, 0.32);
    color: #ffffff;
    margin-bottom: 0;
}
.nr-quote__notice--error {
    background: rgba(230, 57, 70, 0.10);
    border-color: rgba(230, 57, 70, 0.32);
    color: #ffffff;
}
.nr-quote__notice-head {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
}
.nr-quote__notice--success .nr-quote__notice-head { color: #21d974; }
.nr-quote__notice--error   .nr-quote__notice-head { color: #ff8a92; }
.nr-quote__notice-body { margin: 0; color: rgba(255, 255, 255, 0.82); }
.nr-quote__notice-body a { color: #82c0ff; text-decoration: underline; }
.nr-quote__notice-footer {
    margin: 14px 0 0;
    font-size: 13.5px;
}
.nr-quote__notice-footer a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
    padding-bottom: 1px;
}
.nr-quote__notice-footer a:hover { color: #ffffff; border-bottom-style: solid; }

/* Cloudflare Turnstile widget container — sits between the last form
 * field and the submit row. The plugin renders a <div class="cf-turnstile">
 * inside; we just need to give it breathing room and constrain width on
 * narrow viewports so it doesn't push past the form edge. */
.nr-quote__turnstile {
    margin: 4px 0;
    display: flex;
    justify-content: flex-start;
    min-height: 65px;
}
.nr-quote__turnstile .cf-turnstile { max-width: 100%; }
@media (max-width: 540px) {
    .nr-quote__turnstile { justify-content: center; }
}

/* ── 7a-nm) Network-at-a-glance (network page) ── */
.nr-net-map {
    background:
        radial-gradient(ellipse at 100% 0%, rgba(82, 167, 255, 0.10), transparent 55%),
        linear-gradient(180deg, #050f1c 0%, #0a1626 100%);
}
.nr-net-map__inner { max-width: 1200px; margin: 0 auto; padding: clamp(56px, 8vw, 96px) clamp(20px, 4vw, 32px); }
.nr-net-map__lede { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.nr-net-map__eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px;
    background: rgba(82, 167, 255, 0.12);
    border: 1px solid rgba(82, 167, 255, 0.30);
    border-radius: 999px;
    color: #52a7ff;
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase;
}
.nr-net-map__headline {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 700; color: #fff; line-height: 1.2;
    margin: 16px 0 14px;
}
.nr-net-map__sub { font-size: 15px; line-height: 1.65; color: rgba(255,255,255,0.72); margin: 0; }

.nr-net-map__kpis {
    list-style: none; margin: 0 0 32px; padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px; overflow: hidden;
}
@media (max-width: 720px) { .nr-net-map__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nr-net-map__kpi { background: rgba(10,22,38,0.7); padding: 22px 20px; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.nr-net-map__kpi-num { font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; color: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.nr-net-map__kpi-lbl { font-size: 12px; color: rgba(255,255,255,0.62); letter-spacing: 0.03em; text-transform: uppercase; }

/* Regional PoP grid (replaces the prior stylised SVG world map). */
.nr-net-map__regions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}
@media (max-width: 720px) { .nr-net-map__regions { grid-template-columns: 1fr; } }
.nr-net-map__region {
    background: rgba(10, 22, 38, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 22px 22px 18px;
}
.nr-net-map__region-label {
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary, #14bb60);
}
.nr-net-map__region-count {
    background: rgba(20, 187, 96, 0.10);
    border: 1px solid rgba(20, 187, 96, 0.30);
    color: rgba(140, 240, 184, 0.95);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.nr-net-map__region-pops {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.nr-net-map__region-pop {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    font-size: 13px;
}
.nr-net-map__region-flag { font-size: 16px; line-height: 1; }
.nr-net-map__region-name { color: rgba(255, 255, 255, 0.86); font-weight: 500; }

.nr-net-map__resources-head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 16px;
}
.nr-net-map__resources-title { font-size: 18px; font-weight: 600; color: #fff; margin: 0; }
.nr-net-map__status-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    background: rgba(20,187,96,0.10);
    border: 1px solid rgba(20,187,96,0.30);
    border-radius: 6px;
    color: var(--primary, #14bb60) !important;
    font-size: 13px; font-weight: 600;
    text-decoration: none !important;
    transition: background 180ms ease-out, gap 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nr-net-map__status-cta:hover { background: rgba(20,187,96,0.18); gap: 12px; }
.nr-net-map__status-cta .nr-net-map__status-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--primary, #14bb60);
    box-shadow: 0 0 0 0 rgba(20,187,96,0.55);
    animation: nrNetMapDot 1.8s ease-out infinite;
}
@keyframes nrNetMapDot {
    0%   { box-shadow: 0 0 0 0 rgba(20,187,96,0.55); }
    100% { box-shadow: 0 0 0 8px rgba(20,187,96,0); }
}

.nr-net-map__table-wrap { overflow-x: auto; border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; }
.nr-net-map__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.nr-net-map__table thead th {
    text-align: left; padding: 12px 16px;
    background: rgba(10,22,38,0.85);
    color: rgba(255,255,255,0.62);
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.05em; text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nr-net-map__table tbody td {
    padding: 12px 16px;
    color: rgba(255,255,255,0.78);
    background: rgba(10,22,38,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.nr-net-map__table tbody tr:last-child td { border-bottom: 0; }
.nr-net-map__table tbody tr:hover td { background: rgba(15,32,54,0.85); }
.nr-net-map__table a {
    color: var(--primary, #14bb60) !important;
    text-decoration: none !important;
    font-weight: 500;
}
.nr-net-map__table a:hover { text-decoration: underline !important; }
.nr-net-map__loc { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; }
.nr-net-map__flag { font-size: 16px; line-height: 1; }
.nr-net-map__files {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 6px 16px;
}
.nr-net-map__files li { margin: 0; }
.nr-net-map__iperf {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    color: rgba(255,255,255,0.88);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 4px 8px;
    white-space: nowrap;
}
.nr-net-map__na { color: rgba(255,255,255,0.35); }
.nr-tone-light .nr-net-map__iperf {
    color: #2a3a52;
    background: rgba(15,32,54,0.05);
    border-color: rgba(15,32,54,0.1);
}
.nr-tone-light .nr-net-map__na { color: rgba(15,32,54,0.4); }
.nr-net-map__status { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; }
.nr-net-map__status-dot--operational { background: var(--primary, #14bb60); }
.nr-net-map__status-dot--degraded    { background: #ff9f1c; }
.nr-net-map__status-dot--outage      { background: #ff4d4d; }
.nr-net-map__status--operational     { color: var(--primary, #14bb60); }
.nr-net-map__status--degraded        { color: #ff9f1c; }
.nr-net-map__status--outage          { color: #ff4d4d; }

/* ── 7a-mc) Managed-colocation service tier (Colocation page) ── */
.nr-product-managed {
    background:
        radial-gradient(ellipse at 0% 0%, rgba(20, 187, 96, 0.08), transparent 55%),
        linear-gradient(180deg, #050f1c 0%, #0a1626 100%);
}
.nr-product-managed__lede { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.nr-product-managed__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(20, 187, 96, 0.12);
    border: 1px solid rgba(20, 187, 96, 0.30);
    border-radius: 999px;
    color: var(--primary, #14bb60);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.nr-product-managed__headline {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    margin: 16px 0 14px;
}
.nr-product-managed__sub {
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
}
.nr-product-managed__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
@media (max-width: 880px) { .nr-product-managed__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .nr-product-managed__grid { grid-template-columns: 1fr; } }
.nr-product-managed__item {
    background: rgba(10, 22, 38, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 200ms ease-out, background 200ms ease-out;
}
.nr-product-managed__item:hover {
    background: rgba(15, 32, 54, 0.92);
    border-color: rgba(20, 187, 96, 0.30);
}
.nr-product-managed__icon {
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 187, 96, 0.10);
    border: 1px solid rgba(20, 187, 96, 0.24);
    border-radius: 10px;
    color: var(--primary, #14bb60);
    margin-bottom: 6px;
}
.nr-product-managed__title {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.3;
    margin: 0;
}
.nr-product-managed__desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.6;
    margin: 0;
}
.nr-product-managed__cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: center;
    margin-top: 36px;
}
.nr-product-managed__cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary, #14bb60) !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: gap 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nr-product-managed__cta-secondary:hover { gap: 12px; }

/* ── 7b) 2-col text + image highlight (reused multiple times) ── */
.nr-product-highlight {
    background: linear-gradient(180deg, #050f1c 0%, #0a1626 100%);
}
.nr-product-highlight__inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}
@media (max-width: 880px) { .nr-product-highlight__inner { grid-template-columns: 1fr; } }
.nr-product-highlight__body {
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 14px;
}
.nr-product-highlight__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 12px 22px;
    background: rgba(20, 187, 96, 0.10);
    border: 1px solid rgba(20, 187, 96, 0.30);
    border-radius: 6px;
    color: var(--primary, #14bb60) !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background 180ms ease-out, gap 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nr-product-highlight__cta:hover { background: rgba(20, 187, 96, 0.18); gap: 12px; }
.nr-product-highlight__media img {
    display: block;
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.40));
}
/* Single-column variant: drop the right media column entirely. Used
 * when no real photo/illustration is available — beats showing a tiny
 * stand-alone icon next to a half-empty 2-col grid. */
.nr-product-highlight--single .nr-product-highlight__inner {
    grid-template-columns: 1fr;
    max-width: 880px;
}
.nr-product-highlight--single .nr-product-highlight__media { display: none; }

/* Bullet list inside .nr-product-pair__card — used on Connectivity to
 * surface the technical specifics under each service description. */
.nr-product-pair__list {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.nr-product-pair__list li {
    position: relative;
    padding-left: 22px;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
}
.nr-product-pair__list li::before {
    content: "";
    position: absolute;
    left: 0; top: 8px;
    width: 12px; height: 2px;
    background: var(--primary, #14bb60);
    border-radius: 2px;
}

/* ─────────────────────────────────────────────────────────────────
 * 8) [nr_visual kind="..."] — inline SVG infrastructure schematics
 *
 * Six kinds: rack | cloud | topology | monitoring | support | pricing
 * The PHP renders a 320×240 SVG; this surface tints + scales it via
 * currentColor, gives it a subtle hover lift, and adds gentle
 * animations that obey prefers-reduced-motion.
 * ───────────────────────────────────────────────────────────────── */
.nr-visual {
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
    max-width: 360px;
    color: rgba(255, 255, 255, 0.92);
    line-height: 0;       /* prevent baseline gap under the SVG */
    aspect-ratio: 4 / 3;
    position: relative;
}
.nr-visual svg { width: 100%; height: 100%; display: block; }

/* When dropped inside .nr-product-highlight__media, sit centered + sized */
.nr-product-highlight__media .nr-visual {
    margin-left: auto;
    margin-right: auto;
    max-width: 380px;
}

/* ── 8a) LED pulse — used by rack, cloud, monitoring ── */
@keyframes nr-visual-led {
    0%, 100% { opacity: 1; filter: drop-shadow(0 0 4px rgba(20, 187, 96, 0.55)); }
    50%      { opacity: 0.45; filter: drop-shadow(0 0 1px rgba(20, 187, 96, 0.20)); }
}
.nrv-led        { animation: nr-visual-led 2.4s ease-in-out infinite; }
.nrv-led--late  { animation: nr-visual-led 2.4s ease-in-out infinite; animation-delay: 1.2s; }

/* ── 8b) Rack-unit cascade — top unit pops, others fade in ── */
@keyframes nr-visual-rack-emerge {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}
.nrv-rack-unit {
    animation: nr-visual-rack-emerge 700ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.nrv-rack-unit--1 { animation-delay: 0ms; }
.nrv-rack-unit--2 { animation-delay: 120ms; }
.nrv-rack-unit--3 { animation-delay: 240ms; }
.nrv-rack-unit--4 { animation-delay: 360ms; }

/* ── 8c) Topology pulse halo + traffic dot ── */
@keyframes nr-visual-pulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.08); opacity: 0.6; }
}
.nrv-pulse {
    transform-origin: 160px 120px;
    transform-box: fill-box;
    animation: nr-visual-pulse 3.2s ease-in-out infinite;
}
.nrv-traffic { filter: drop-shadow(0 0 6px rgba(20, 187, 96, 0.85)); }

/* ── 8d) Monitoring sparkline draw-in ── */
@keyframes nr-visual-spark-draw {
    0%   { stroke-dasharray: 320; stroke-dashoffset: 320; opacity: 0.4; }
    60%  { stroke-dashoffset: 0;   opacity: 1; }
    100% { stroke-dashoffset: 0;   opacity: 1; }
}
.nrv-spark { animation: nr-visual-spark-draw 2.4s ease-out 200ms backwards; }

/* ── 8e) Support clock sweep + bars ── */
@keyframes nr-visual-sweep {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.nrv-sweep,
.nrv-sweep-hand {
    animation: nr-visual-sweep 12s linear infinite;
}
@keyframes nr-visual-bar {
    0%, 100% { transform: scaleY(0.5); opacity: 0.6; }
    50%      { transform: scaleY(1);   opacity: 1; }
}
.nrv-bar {
    transform-origin: center bottom;
    transform-box: fill-box;
    animation: nr-visual-bar 1.6s ease-in-out infinite;
}
.nrv-bar--1 { animation-delay: 0ms; }
.nrv-bar--2 { animation-delay: 200ms; }
.nrv-bar--3 { animation-delay: 400ms; }

/* ── 8f) Pricing highlighted-row pulse ── */
@keyframes nr-visual-highlight-fade {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}
.nrv-highlight { animation: nr-visual-highlight-fade 3.4s ease-in-out infinite; }

/* Reduced-motion: kill every animation but preserve the still frame */
@media (prefers-reduced-motion: reduce) {
    .nrv-led,
    .nrv-led--late,
    .nrv-rack-unit,
    .nrv-pulse,
    .nrv-spark,
    .nrv-sweep,
    .nrv-sweep-hand,
    .nrv-bar,
    .nrv-highlight {
        animation: none;
    }
}

/* ── 8g) Hero integration — schematic above status panel ──
 * When the hero renders the visual instead of an image, the right
 * column stacks: visual on top, status panel below. Both stay in
 * frame on 1080p. */
.nr-hero__visual {
    margin: 0 0 16px;
    max-width: 360px;
    width: 100%;
    color: rgba(255, 255, 255, 0.92);
    line-height: 0;
    /* Subtle lift so it reads as foreground over the cube pattern */
    filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.40));
}
.nr-hero__media--solo .nr-hero__visual { margin-left: auto; margin-right: auto; }
.nr-hero__media--solo .nr-hero__status { width: min(360px, 100%); }
@media (max-width: 880px) {
    .nr-hero__visual { max-width: 280px; }
}

/* ── 7c) Plan-grid lede (sits above [nr_plan_grid]) ── */
.nr-product-plans {
    background: linear-gradient(180deg, #0a1626 0%, #050f1c 100%);
    /* Slightly tighter spacing — the plan grid below has its own
     * generous padding, no need to double up. */
    padding-bottom: clamp(20px, 3vw, 36px);
}
.nr-product-plans__lede { text-align: center; max-width: 800px; margin: 0 auto 40px; }
.nr-product-plans__lede:last-of-type { margin-bottom: 40px; }
.nr-product-plans__sub {
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 auto;
    max-width: 720px;
}

/* ── 7d) Use-case grid (8 cards: streaming/gaming/...) ── */
.nr-product-usecases {
    background:
        radial-gradient(ellipse at 20% 100%, rgba(20, 187, 96, 0.08), transparent 55%),
        linear-gradient(180deg, #050f1c 0%, #0a1626 100%);
}
.nr-product-usecases__lede { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.nr-product-usecases__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 1100px) { .nr-product-usecases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px)  { .nr-product-usecases__grid { grid-template-columns: 1fr; } }
.nr-product-usecases__item {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px 22px;
    background: rgba(10, 22, 38, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    transition: background 200ms ease-out, border-color 200ms ease-out;
}
.nr-product-usecases__item:hover {
    background: rgba(15, 32, 54, 0.95);
    border-color: rgba(20, 187, 96, 0.30);
}
.nr-product-usecases__icon {
    width: 48px; height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 187, 96, 0.06);
    border: 1px solid rgba(20, 187, 96, 0.18);
    border-radius: 10px;
}
.nr-product-usecases__icon img {
    width: 32px; height: 32px;
    /* Use-case icons are colorful illustrations — keep them, just
     * desaturate slightly so they sit well on dark. */
    filter: saturate(0.85);
}
.nr-product-usecases__title {
    font-size: 15.5px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.3;
    letter-spacing: -0.005em;
}
.nr-product-usecases__desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.55;
    flex: 1;
}

/* ── 7e) 2-card pair (OS + Control Panels, etc.) ── */
.nr-product-pair {
    background: linear-gradient(180deg, #0a1626 0%, #050f1c 100%);
}
.nr-product-pair__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 720px) { .nr-product-pair__inner { grid-template-columns: 1fr; } }
.nr-product-pair__card {
    padding: 28px 26px;
    background: rgba(10, 22, 38, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.nr-product-pair__headline {
    font-size: clamp(20px, 2vw, 24px);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin: 0;
    color: #ffffff;
}
.nr-product-pair__body {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
    flex: 1;
}
.nr-product-pair__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary, #14bb60);
    text-decoration: none !important;
    transition: gap 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nr-product-pair__cta:hover { gap: 10px; }

/* 4-card variant of the pair grid — used for "alternatives" / cross-sell
 * strips at the bottom of every product page. Same card chrome, just 4
 * columns instead of 2. */
.nr-product-pair--quad .nr-product-pair__inner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 980px) {
    .nr-product-pair--quad .nr-product-pair__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 540px) {
    .nr-product-pair--quad .nr-product-pair__inner {
        grid-template-columns: 1fr;
    }
}
.nr-product-pair--quad .nr-product-pair__card {
    align-items: flex-start;
    padding: 22px 20px;
    text-align: left;
}
.nr-product-pair__icon {
    width: 56px; height: 56px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(60%) sepia(58%) saturate(443%) hue-rotate(95deg) brightness(95%) contrast(89%);
}

/* Carrier logo grid (carrier-neutral page). Logos are mixed-source
 * vendor marks of varying contrast — desaturate + brighten so they
 * read uniformly on the dark card surface, hover lifts to full color. */
.nr-carrier-item {
    align-items: center;
    justify-content: center;
    min-height: 96px;
    padding: 16px !important;
}
.nr-carrier-item img {
    max-width: 100%;
    max-height: 56px;
    object-fit: contain;
    opacity: 0.78;
    filter: grayscale(1) brightness(2.2) contrast(0.85);
    transition: opacity 200ms ease-out, filter 200ms ease-out;
}
.nr-carrier-item:hover img {
    opacity: 1;
    filter: none;
}

/* ─────────────────────────────────────────────────────────────────
 * 9) Data-center image cards (parent /data-centers/)
 * Photo-led card grid for the 7 flagship locations + a compact
 * secondary grid for regional POPs (Rotterdam / Groningen / NY).
 * ───────────────────────────────────────────────────────────────── */
.nr-dc-cards {
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    max-width: none;
    padding: clamp(56px, 7vw, 96px) 0;
    color: #ffffff;
    font-family: var(--masterfont, "Mulish", system-ui, sans-serif);
    background:
        radial-gradient(ellipse at 80% 0%, rgba(82, 167, 255, 0.10), transparent 55%),
        linear-gradient(180deg, #0a1626 0%, #050f1c 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nr-dc-cards__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 64px);
}
.nr-dc-cards__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
@media (max-width: 1100px) { .nr-dc-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .nr-dc-cards__grid { grid-template-columns: 1fr; } }
.nr-dc-cards__grid--secondary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 18px;
}
@media (max-width: 880px) { .nr-dc-cards__grid--secondary { grid-template-columns: 1fr; } }
.nr-dc-cards__item { margin: 0; }

/* Photo-led card: image header + body with country, name, description, CTA */
.nr-dc-card {
    display: flex;
    flex-direction: column;
    background: rgba(10, 22, 38, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none !important;
    color: inherit;
    transition: background 200ms ease-out, border-color 200ms ease-out, transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
    height: 100%;
    position: relative;
}
.nr-dc-card:hover {
    background: rgba(15, 32, 54, 0.95);
    border-color: rgba(20, 187, 96, 0.30);
    transform: translateY(-2px);
}
.nr-dc-card__media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.30);
    position: relative;
}
.nr-dc-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nr-dc-card:hover .nr-dc-card__media img { transform: scale(1.04); }
/* Subtle dark gradient overlay on the photo so the country code chip
 * we float top-left always has enough contrast to be legible. */
.nr-dc-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 15, 28, 0.55) 0%, transparent 35%, transparent 75%, rgba(5, 15, 28, 0.45) 100%);
    pointer-events: none;
}
.nr-dc-card__cc {
    position: absolute;
    top: 14px; left: 14px;
    z-index: 1;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(20, 187, 96, 0.95);
    background: rgba(5, 15, 28, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(20, 187, 96, 0.25);
    border-radius: 4px;
    padding: 4px 8px;
}
.nr-dc-card__name {
    display: block;
    padding: 16px 22px 0;
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.015em;
    line-height: 1.2;
}
.nr-dc-card__country {
    display: block;
    padding: 2px 22px 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.45);
}
.nr-dc-card__desc {
    display: block;
    padding: 12px 22px 16px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.70);
    line-height: 1.55;
    flex: 1;
}
.nr-dc-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 22px 22px;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary, #14bb60);
    transition: gap 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nr-dc-card:hover .nr-dc-card__cta { gap: 10px; }

/* Compact variant: regional POPs (Rotterdam / Groningen / NY) without
 * dedicated photos. Single-row card with country chip + name + arrow. */
.nr-dc-card--compact {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
}
.nr-dc-card--compact .nr-dc-card__cc {
    position: static;
    flex-shrink: 0;
}
.nr-dc-card--compact .nr-dc-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.nr-dc-card--compact .nr-dc-card__name {
    padding: 0;
    font-size: 16px;
}
.nr-dc-card--compact .nr-dc-card__country {
    padding: 0;
    font-size: 11.5px;
}
.nr-dc-card--compact .nr-dc-card__arrow {
    flex-shrink: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: rgba(255, 255, 255, 0.30);
    transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), color 140ms ease-out;
}
.nr-dc-card--compact:hover .nr-dc-card__arrow {
    color: var(--primary, #14bb60);
    transform: translateX(3px);
}

/* ─────────────────────────────────────────────────────────────────
 * 10) .nr-legal — reading container for the 4 legal pages
 * Sidebar nav (other legal docs + compliance) on the left, scrollable
 * policy body on the right. Optimized for long-form reading on dark.
 * ───────────────────────────────────────────────────────────────── */
.nr-legal {
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    max-width: none;
    padding: clamp(40px, 5vw, 72px) 0 clamp(56px, 7vw, 96px);
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--masterfont, "Mulish", system-ui, sans-serif);
    background: linear-gradient(180deg, #050f1c 0%, #0a1626 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nr-legal__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 64px);
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: clamp(28px, 4vw, 56px);
}
@media (max-width: 880px) {
    .nr-legal__inner { grid-template-columns: 1fr; }
}

.nr-legal__nav {
    position: sticky;
    top: clamp(80px, 10vh, 120px);
    align-self: start;
    padding: 22px 20px;
    background: rgba(10, 22, 38, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.55;
}
@media (max-width: 880px) {
    .nr-legal__nav { position: static; }
}
.nr-legal__nav-eyebrow {
    margin: 0 0 10px;
    padding: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: rgba(255, 255, 255, 0.45);
}
.nr-legal__nav-eyebrow--mt { margin-top: 18px; }
.nr-legal__nav ul {
    list-style: none;
    margin: 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.nr-legal__nav li { margin: 0; }
.nr-legal__nav a {
    display: block;
    padding: 7px 10px;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none !important;
    border-radius: 4px;
    transition: background 140ms ease-out, color 140ms ease-out;
}
.nr-legal__nav a:hover,
.nr-legal__nav a:focus {
    background: rgba(20, 187, 96, 0.08);
    color: var(--primary, #14bb60);
}

.nr-legal__body {
    /* Long-form reading. Indent slightly off the left rail and let
     * the type breathe — line-height 1.65, max-width ~720px on the
     * paragraphs inside. */
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.78);
}
.nr-legal__body h1 {
    /* Hide the legacy duplicate H1 — the hero already provides one */
    display: none;
}
.nr-legal__body h2,
.nr-legal__body h3,
.nr-legal__body h4,
.nr-legal__body h5,
.nr-legal__body h6 {
    color: #ffffff;
    font-weight: 700;
    letter-spacing: -0.012em;
    margin: 32px 0 12px;
    padding-top: 4px;
}
.nr-legal__body h2 { font-size: 24px; line-height: 1.25; }
.nr-legal__body h3 { font-size: 20px; line-height: 1.3; }
.nr-legal__body h4,
.nr-legal__body h5,
.nr-legal__body h6 { font-size: 17px; line-height: 1.35; }
.nr-legal__body h2:first-of-type,
.nr-legal__body h3:first-of-type,
.nr-legal__body h6:first-of-type { margin-top: 0; }
.nr-legal__body p {
    margin: 0 0 14px;
    max-width: 72ch;
}
.nr-legal__body ul,
.nr-legal__body ol {
    margin: 0 0 16px;
    padding-left: 22px;
    max-width: 72ch;
}
.nr-legal__body li { margin: 0 0 6px; }
.nr-legal__body a {
    color: var(--primary, #14bb60);
    text-decoration: underline;
    text-decoration-color: rgba(20, 187, 96, 0.40);
    text-underline-offset: 0.18em;
    transition: text-decoration-color 140ms ease-out;
}
.nr-legal__body a:hover { text-decoration-color: var(--primary, #14bb60); }
.nr-legal__body strong { color: rgba(255, 255, 255, 0.95); }
.nr-legal__body code {
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 13.5px;
}

/* ─────────────────────────────────────────────────────────────────
 * 11) .nr-sitemap — column grid for the sitemap page
 * Six columns of section links, responsive collapse to 3/2/1 cols.
 * ───────────────────────────────────────────────────────────────── */
.nr-sitemap {
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    max-width: none;
    padding: clamp(56px, 7vw, 96px) 0;
    color: #ffffff;
    font-family: var(--masterfont, "Mulish", system-ui, sans-serif);
    background: linear-gradient(180deg, #0a1626 0%, #050f1c 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nr-sitemap__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 64px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 40px);
}
@media (max-width: 880px) { .nr-sitemap__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .nr-sitemap__inner { grid-template-columns: 1fr; } }
.nr-sitemap__col {
    background: rgba(10, 22, 38, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 22px 22px 24px;
}
.nr-sitemap__title {
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: rgba(20, 187, 96, 0.85);
}
.nr-sitemap__title--mt { margin-top: 22px; }
.nr-sitemap__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.nr-sitemap__list li { margin: 0; }
.nr-sitemap__list a {
    display: block;
    padding: 6px 8px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    text-decoration: none !important;
    border-radius: 4px;
    transition: background 140ms ease-out, color 140ms ease-out, padding-left 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nr-sitemap__list a:hover,
.nr-sitemap__list a:focus {
    background: rgba(20, 187, 96, 0.06);
    color: var(--primary, #14bb60);
    padding-left: 12px;
}

/* ─────────────────────────────────────────────────────────────────
 * 11b) .rank-math-html-sitemap — auto-generated sitemap rendered
 *      inside an .nr-sitemap section. Rank Math owns the markup
 *      (one section per post-type, then a flat list of links). We
 *      map its class names onto the same visual treatment as the
 *      hand-authored .nr-sitemap__col / __title / __list above so
 *      the page reads identically whether the editor drops in
 *      [rank_math_html_sitemap] or builds the columns by hand.
 *
 *      Drop the .nr-sitemap__inner wrapper for this variant — the
 *      .rank-math-html-sitemap root takes the grid role directly.
 * ───────────────────────────────────────────────────────────────── */
.nr-sitemap .rank-math-html-sitemap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 64px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 3vw, 40px);
    align-items: start;
}
@media (max-width: 880px) { .nr-sitemap .rank-math-html-sitemap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .nr-sitemap .rank-math-html-sitemap { grid-template-columns: 1fr; } }
.nr-sitemap .rank-math-html-sitemap__section {
    background: rgba(10, 22, 38, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 22px 22px 24px;
}
.nr-sitemap .rank-math-html-sitemap__title {
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: rgba(20, 187, 96, 0.85);
}
.nr-sitemap .rank-math-html-sitemap__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.nr-sitemap .rank-math-html-sitemap__item { margin: 0; }
.nr-sitemap .rank-math-html-sitemap__link {
    display: block;
    padding: 6px 8px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none !important;
    border-radius: 4px;
    transition: background 140ms ease-out, color 140ms ease-out, padding-left 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nr-sitemap .rank-math-html-sitemap__link:hover,
.nr-sitemap .rank-math-html-sitemap__link:focus {
    background: rgba(20, 187, 96, 0.06);
    color: var(--primary, #14bb60);
    padding-left: 12px;
}
/* Rank Math occasionally emits empty <a> tags for posts with no
 * resolvable title — hide those rows so they don't render as a
 * silent gap in the list. */
.nr-sitemap .rank-math-html-sitemap__link:empty { display: none; }
.nr-sitemap .rank-math-html-sitemap__item:has(> a:empty) { display: none; }

/* ─────────────────────────────────────────────────────────────────
 * 12) .nr-os-grid — operating-system tiles use a denser layout
 * (more columns, smaller cards) than the standard product features.
 * Keeps logos legible and the 12-OS grid scannable at a glance.
 * ───────────────────────────────────────────────────────────────── */
.nr-os-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .nr-os-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .nr-os-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nr-os-item { align-items: center; text-align: center; padding: 22px 16px; }
.nr-os-item .nr-product-features__icon {
    /* OS logos are mixed-source — desaturate + brighten so they read on dark */
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.10);
    width: 72px; height: 72px;
}
.nr-os-item .nr-product-features__icon img {
    width: 48px; height: 48px;
    object-fit: contain;
    /* OS logos are real brand marks — keep their original colours
       (override the green-tint filter that the parent .nr-product-features__icon
       img rule applies to monochrome inline icons). */
    filter: none;
}
.nr-os-item .nr-product-features__title {
    font-size: 14px;
    text-align: center;
}
.nr-os-item .nr-product-features__cta {
    margin-top: 4px;
}

/* ─────────────────────────────────────────────────────────────────
 * Contact-methods grid — used on /contact-us/.
 *
 * Reuses .nr-product-features chrome with .nr-contact-methods overrides:
 *   - each card gets a CTA link at the bottom (mailto:, tel:, live-chat,
 *     /service-and-support/)
 *   - phone tile shows BOTH EU and US numbers stacked
 *   - all CTAs share the same green-on-dark hover treatment as other
 *     in-section "tile" CTAs
 * ────────────────────────────────────────────────────────────────── */
.nr-contact-methods .nr-product-features__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.nr-contact-methods .nr-product-features__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding: 8px 14px;
    color: var(--primary, #14bb60);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none;
    background: rgba(20, 187, 96, 0.08);
    border: 1px solid rgba(20, 187, 96, 0.22);
    border-radius: 6px;
    transition: background 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
    word-break: break-word;
}
.nr-contact-methods .nr-product-features__cta:hover {
    background: rgba(20, 187, 96, 0.16);
    border-color: rgba(20, 187, 96, 0.45);
    color: #ffffff;
}
/* Phone tile: stack both regional numbers */
.nr-contact-methods .nr-product-features__item .nr-track-phone-eu,
.nr-contact-methods .nr-product-features__item .nr-track-phone-us {
    width: 100%;
}
.nr-contact-methods .nr-product-features__item .nr-track-phone-eu + .nr-product-features__cta,
.nr-contact-methods .nr-product-features__item .nr-track-phone-us + .nr-product-features__cta {
    margin-top: 6px;
}

/* Brand-logo variant for the panel cards (cPanel / DA / SolusVM) — keep
 * the vendor's native color exactly as supplied; just sit on a soft
 * white plate so the logo art reads against the dark card surface. */
.nr-product-pair__icon--brand {
    width: auto;
    max-width: 140px;
    height: 56px;
    filter: none;
    background: #ffffff;
    border-radius: 6px;
    padding: 8px 12px;
    box-sizing: content-box;
}

/* ─────────────────────────────────────────────────────────────────
 * 404 page — brand-aligned full-bleed centred hero
 * ───────────────────────────────────────────────────────────────── */
.nr-404-main { min-height: 70vh; display: flex; flex-direction: column; }
.nr-404 {
    position: relative;
    overflow: hidden;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(80px, 12vw, 160px) 0;
    background:
        radial-gradient(ellipse at 80% 0%, rgba(82, 167, 255, 0.10), transparent 55%),
        linear-gradient(180deg, #050f1c 0%, #0a1626 60%, #050f1c 100%);
    color: #ffffff;
    font-family: var(--masterfont, "Mulish", system-ui, sans-serif);
}
.nr-404__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.nr-404__bg-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(82, 167, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(82, 167, 255, 0.06) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
}
.nr-404__bg-orb {
    position: absolute;
    width: 480px; height: 480px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    background: radial-gradient(circle, #21D974 0%, transparent 70%);
    top: -120px; left: -120px;
}
.nr-404__bg-orb--2 {
    background: radial-gradient(circle, #3B93EF 0%, transparent 70%);
    top: auto; bottom: -120px; left: auto; right: -120px;
}
.nr-404__inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px);
    text-align: center;
}
.nr-404__eyebrow {
    display: inline-block;
    margin: 0 0 18px;
    padding: 6px 14px;
    border-radius: 999px;
    font: 700 11px ui-monospace, Menlo, monospace;
    letter-spacing: 1.5px;
    color: #21D974;
    background: rgba(33, 217, 116, 0.10);
    border: 1px solid rgba(33, 217, 116, 0.32);
    text-transform: uppercase;
}
.nr-404__code {
    margin: 0 0 16px;
    font-family: var(--masterfont, "Mulish", system-ui, sans-serif);
    font-weight: 800;
    font-size: clamp(120px, 22vw, 280px);
    line-height: 0.9;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, #21D974 0%, #3B93EF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.nr-404__headline {
    margin: 0 0 18px;
    font-size: clamp(28px, 4.5vw, 44px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #ffffff;
}
.nr-404__sub {
    margin: 0 auto 36px;
    max-width: 560px;
    font-size: 16px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.72);
}
.nr-404__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-bottom: 48px;
}
.nr-404__cta-primary,
.nr-404__cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 999px;
    font: 700 14px var(--masterfont, "Mulish", system-ui, sans-serif);
    text-decoration: none !important;
    transition: transform 180ms ease-out, background 180ms ease-out, gap 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nr-404__cta-primary {
    background: #21D974;
    color: #0a1626;
}
.nr-404__cta-primary:hover { background: #1bbf63; gap: 12px; transform: translateY(-1px); }
.nr-404__cta-secondary {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.nr-404__cta-secondary:hover { background: rgba(255, 255, 255, 0.08); }
.nr-404__shortcuts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 0;
}
.nr-404__shortcuts li { display: inline-block; }
.nr-404__shortcuts li:not(:last-child)::after {
    content: "·";
    margin: 0 14px;
    color: rgba(255, 255, 255, 0.30);
}
.nr-404__shortcuts a {
    font: 12px ui-monospace, Menlo, monospace;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none !important;
    transition: color 180ms;
}
.nr-404__shortcuts a:hover { color: #21D974; }

/* ═══════════════════════════════════════════════════════════════════
   Blog single-post enhancements (2026-05-20)
   Body type bumped down to 18 px (was 20). The rules below polish the
   reading surface around it — tables, author card, anchor links, scroll
   progress, related-posts strip — and live ONLY under .nr-kb-article-page
   so the legacy dark KB template (.nr-kb-article without --light /
   --page) keeps its existing styling untouched.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tables ──
   Replace the bare 8 px / no-zebra default with editorial-grade table
   styling: bigger padding, zebra rows, heavier header treatment, and a
   horizontal-scroll wrapper for narrow viewports (the Gutenberg table
   block already emits <figure class="wp-block-table"> which we target). */
.nr-kb-article-page .nr-kb-article__body .wp-block-table {
    margin: 24px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.nr-kb-article-page .nr-kb-article__body .wp-block-table > table { margin: 0; }
.nr-kb-article-page .nr-kb-article__body table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 14px;
    border: 1px solid rgba(15, 28, 46, 0.10);
    border-radius: 8px;
    overflow: hidden;
}
.nr-kb-article-page .nr-kb-article__body th,
.nr-kb-article-page .nr-kb-article__body td {
    border: 0;
    border-bottom: 1px solid rgba(15, 28, 46, 0.08);
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
    line-height: 1.5;
}
/* OPAQUE header bg with !important so author-set inline styles on the
 * <tr> (e.g. `<tr style="background:#0f172a;color:#fff">` on the Equinix
 * checklist table) can't bleed through a translucent header and turn the
 * th text invisible. We render the header on every table consistently. */
.nr-kb-article-page .nr-kb-article__body th {
    background: #e8f5ee !important;
    color: #0a1626 !important;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid rgba(20, 187, 96, 0.35);
}
/* Also force the parent <tr> background to transparent on the header
 * row so a hardcoded dark tr-bg (Equinix table) doesn't render an
 * "underglow" of dark navy around the cells. */
.nr-kb-article-page .nr-kb-article__body thead tr,
.nr-kb-article-page .nr-kb-article__body tr:first-child {
    background: transparent !important;
    color: inherit !important;
}
.nr-kb-article-page .nr-kb-article__body tbody tr:nth-child(even) td {
    background: rgba(15, 28, 46, 0.022);
}
.nr-kb-article-page .nr-kb-article__body tbody tr:last-child td { border-bottom: 0; }

/* ── Author card (Gutenberg <core/post-author> block) ──
   The default Gutenberg post-author block renders as a small avatar +
   inline byline + bio — visually cramped. Style it as a labelled author
   card sitting between the article and the related-posts strip. */
/* Author business card — driven by the [nr_author] shortcode (renders
 * .nr-author-card) and also applied to Gutenberg's <core/post-author>
 * block (renders .wp-block-post-author) so both produce the same visual
 * result. Unscoped so it works in blog posts AND landing pages, KB
 * articles, sidebars — anywhere the markup appears. */
.nr-author-card,
.wp-block-post-author {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 24px;
    row-gap: 14px;
    align-items: start;
    padding: 36px 28px 28px 32px;
    margin: 56px 0 24px;
    background: #ffffff;
    border: 1px solid rgba(15, 28, 46, 0.10);
    border-left: 3px solid var(--primary, #14bb60);
    border-radius: 12px;
    box-shadow: 0 14px 40px -22px rgba(15, 28, 46, 0.20), 0 2px 6px rgba(15, 28, 46, 0.04);
    color: #0a1626;
}
.nr-author-card::before,
.wp-block-post-author::before {
    content: "About the author";
    position: absolute;
    top: 14px;
    right: 24px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(15, 28, 46, 0.40);
    pointer-events: none;
}
.nr-author-card__avatar,
.wp-block-post-author__avatar {
    line-height: 0;
    grid-row: 1;
    grid-column: 1;
}
.nr-author-card__avatar img,
.wp-block-post-author__avatar img {
    width: 96px !important;
    height: 96px !important;
    /* !important needed to beat the base .nr-kb-article__body img rule
     * (border-radius: 8px) and the rendered HTML's inline width/height
     * attributes — we want a perfect circle, no compromise. */
    border-radius: 50% !important;
    border: 3px solid #ffffff;
    box-shadow: 0 6px 18px -8px rgba(15, 28, 46, 0.28), 0 0 0 1px rgba(15, 28, 46, 0.08);
    margin: 0 !important;
    object-fit: cover;
    display: block;
    max-width: none;
}
.nr-author-card__content,
.wp-block-post-author__content {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
/* Order: byline → name → bio → links. nr-author-card emits them in this
 * DOM order natively; the Gutenberg block emits name first, so the
 * explicit `order` values reshuffle both consistently. */
.nr-author-card__byline,
.wp-block-post-author__byline {
    order: 1;
    margin: 0 0 6px !important;
    font-size: 11px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--primary, #14bb60);
    line-height: 1;
}
.nr-author-card__name,
.wp-block-post-author__name {
    order: 2;
    margin: 0 0 12px !important;
    font-size: 22px !important;
    font-weight: 700;
    line-height: 1.2;
    color: #0a1626;
    letter-spacing: -0.01em;
}
.nr-author-card__name a,
.wp-block-post-author__name a {
    color: #0a1626;
    text-decoration: none;
}
.nr-author-card__name a:hover,
.wp-block-post-author__name a:hover { color: #0a763d; }
.nr-author-card__bio,
.wp-block-post-author__bio {
    order: 3;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #475262 !important;
}
.nr-author-card__bio p,
.wp-block-post-author__bio p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin: 0 0 10px !important;
    color: #475262 !important;
}
.nr-author-card__bio p:last-child,
.wp-block-post-author__bio p:last-child { margin-bottom: 0 !important; }
.nr-author-card__bio a:not(.nr-author-card__linkedin),
.wp-block-post-author__bio a {
    color: #0a763d !important;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(10, 118, 61, 0.35);
}
.nr-author-card__bio a:not(.nr-author-card__linkedin):hover,
.wp-block-post-author__bio a:hover { text-decoration-color: currentColor; }
/* Dedicated links row (LinkedIn etc) — pinned to the bottom of the card. */
.nr-author-card__links {
    order: 4;
    margin: 12px 0 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.nr-author-card__linkedin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 4px;
    background: rgba(0, 119, 181, 0.08);
    color: #0a66c2 !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    border: 1px solid rgba(0, 119, 181, 0.22);
    transition: background 180ms ease, border-color 180ms ease;
    line-height: 1;
}
.nr-author-card__linkedin::before {
    content: "";
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230a66c2'><path d='M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.03-1.85-3.03-1.85 0-2.14 1.45-2.14 2.94v5.66h-3.56V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43c-1.14 0-2.07-.93-2.07-2.07s.93-2.07 2.07-2.07 2.07.93 2.07 2.07-.93 2.07-2.07 2.07zm1.78 13.02H3.56V9h3.56v11.45z'/></svg>") no-repeat center / contain;
    display: inline-block;
    flex-shrink: 0;
}
.nr-author-card__linkedin:hover {
    background: rgba(0, 119, 181, 0.16);
    border-color: rgba(0, 119, 181, 0.38);
}
@media (max-width: 600px) {
    .nr-author-card,
    .wp-block-post-author {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 32px 20px 24px;
    }
    .nr-author-card__avatar,
    .wp-block-post-author__avatar { justify-self: center; }
    .nr-author-card__content,
    .wp-block-post-author__content { align-items: center; }
    .nr-author-card::before,
    .wp-block-post-author::before {
        position: static;
        display: block;
        margin: 0 auto 4px;
        text-align: center;
    }
    .nr-author-card__links { justify-content: center; }
}

/* ── Anchor-link icons on h2/h3 ──
   JS in single-post.php appends an <a class="nr-anchor-link">#</a> to
   every section heading; the link is invisible until the heading is
   hovered. Click copies the section URL to the clipboard. */
.nr-kb-article-page .nr-kb-article__body h2,
.nr-kb-article-page .nr-kb-article__body h3 { position: relative; scroll-margin-top: 80px; }
.nr-anchor-link {
    position: absolute;
    left: -1em;
    top: 50%;
    transform: translateY(-50%);
    width: 1em;
    text-align: center;
    color: #0a763d;
    font-weight: 400;
    text-decoration: none !important;
    opacity: 0;
    transition: opacity 180ms ease-out, color 180ms ease-out;
    font-size: 0.78em;
    line-height: 1;
}
.nr-kb-article-page .nr-kb-article__body h2:hover .nr-anchor-link,
.nr-kb-article-page .nr-kb-article__body h3:hover .nr-anchor-link,
.nr-anchor-link:focus { opacity: 0.6; }
.nr-anchor-link:hover { opacity: 1; }
.nr-anchor-link.is-copied {
    opacity: 1 !important;
    color: #14bb60;
}
/* "copied" tooltip — positioned BELOW the # link (not appended to its
 * right) so it can't overlap the heading text. Small dark pill with a
 * tiny tail, sits centred under the link, fades in via the .is-copied
 * class. The link itself stays at its anchor-icon size. */
.nr-anchor-link.is-copied::after {
    content: "copied";
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #14bb60;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 4px 12px -4px rgba(20, 187, 96, 0.45);
}
/* On narrow viewports the negative-left positioning would clip — pull
   the icon back into the flow as a small inline pseudo-button. */
@media (max-width: 880px) {
    .nr-anchor-link { position: static; transform: none; display: inline-block; margin-left: 8px; opacity: 0.4; }
}

/* ── Scroll-progress bar ──
   3 px sliver fixed at the very top of the viewport, fills left-to-right
   as the user scrolls through the article. Markup is added to
   single-post.php; transform: scaleX is animated by JS on scroll. */
.nr-kb-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: rgba(15, 28, 46, 0.06);
    /* Above the WP admin bar (z-index 99999) when an admin is logged in,
     * above any sticky header, below modals only. The bar must be the
     * topmost fixed element so the user always sees the scroll progress. */
    z-index: 100001;
    pointer-events: none;
}
.nr-kb-progress__bar {
    height: 100%;
    /* Slightly more saturated than --primary so the sliver pops against
     * any background — light or dark — and is easy to spot at a glance. */
    background: linear-gradient(90deg, #14bb60 0%, #21D974 100%);
    box-shadow: 0 0 8px rgba(33, 217, 116, 0.45);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 90ms linear;
}
/* Logged-in: WP admin bar sits at top:0. Push the progress bar BELOW it
 * so it's not hidden under the admin bar's chrome. The admin bar is
 * 32px tall on >=783px viewports and 46px below that — match both. */
body.admin-bar .nr-kb-progress { top: 32px; }
@media (max-width: 782px) { body.admin-bar .nr-kb-progress { top: 46px; } }

/* ── Related posts ──
   3-card strip at the end of single-post.php pulling latest posts from
   the same category. Light surround matching the blog gutter, white
   cards matching the article surface. */
.nr-kb-related {
    background: linear-gradient(180deg, #f5f8fc 0%, #e9eff7 100%);
    padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 32px);
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    max-width: none;
    color: #1a2331;
}
.nr-kb-related__inner { max-width: 1280px; margin: 0 auto; }
.nr-kb-related__heading {
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 700;
    margin: 0 0 24px;
    color: #0a1626;
    letter-spacing: -0.01em;
}
.nr-kb-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 880px) { .nr-kb-related__grid { grid-template-columns: 1fr; } }
.nr-kb-related__card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(15, 28, 46, 0.08);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none !important;
    color: inherit !important;
    transition: border-color 180ms ease, transform 180ms ease, box-shadow 220ms ease;
}
.nr-kb-related__card:hover {
    border-color: rgba(20, 187, 96, 0.30);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -16px rgba(15, 28, 46, 0.18);
}
.nr-kb-related__thumb {
    aspect-ratio: 16 / 9;
    background: rgba(15, 28, 46, 0.05);
    overflow: hidden;
}
.nr-kb-related__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 360ms ease;
}
.nr-kb-related__card:hover .nr-kb-related__thumb img { transform: scale(1.04); }
.nr-kb-related__meta {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.nr-kb-related__cat {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #0a6f3f;
}
.nr-kb-related__title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    color: #0a1626;
    letter-spacing: -0.01em;
}
.nr-kb-related__date {
    font-size: 12px;
    color: rgba(15, 28, 46, 0.55);
    margin: 0;
}

/* ── Inline <code> polish (blog light variant) ──
   The deferred rule above already light-themes inline code; this just
   tightens the visual — slightly tighter padding + monospace fallback
   chain so it reads as an inline token rather than a chip. */
.nr-kb-article-page .nr-kb-article__body :not(pre) > code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.92em;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(20, 187, 96, 0.28);
    background: rgba(20, 187, 96, 0.08);
    color: #0a6f3f;
}

/* ── Blockquote polish ── */
.nr-kb-article-page .nr-kb-article__body blockquote {
    margin: 24px 0;
    padding: 16px 20px 16px 24px;
    border-left: 4px solid var(--primary, #14bb60);
    background: rgba(20, 187, 96, 0.05);
    border-radius: 0 8px 8px 0;
    color: #0a1626;
    font-style: italic;
    font-size: 18px;
    line-height: 1.6;
}
.nr-kb-article-page .nr-kb-article__body blockquote p { margin: 0 0 8px !important; font-size: 18px !important; line-height: 1.6 !important; }
.nr-kb-article-page .nr-kb-article__body blockquote p:last-child { margin-bottom: 0 !important; }
.nr-kb-article-page .nr-kb-article__body blockquote cite,
.nr-kb-article-page .nr-kb-article__body blockquote footer {
    display: block;
    margin-top: 8px;
    font-style: normal;
    font-size: 13px;
    color: rgba(15, 28, 46, 0.55);
    font-weight: 600;
}