/*
 * 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, "sofia-pro", 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, "sofia-pro", system-ui, sans-serif);
    color: rgba(255, 255, 255, 0.85);
    min-width: 720px;
}
.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;
}
.nr-compare__th-metric { width: 24%; }
.nr-compare__th {
    width: 25.3%;
}
.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;
}
.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;
}
.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, "sofia-pro", 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, "sofia-pro", 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, "sofia-pro", 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; }
.nr-home-feature__media img {
    display: block;
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.40));
}

/* ── 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, "sofia-pro", 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; }
.nr-kb-article__body ul,
.nr-kb-article__body ol { margin: 0 0 16px 22px; padding: 0; }
.nr-kb-article__body li { 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;
}
.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.68); 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.50); 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); }

/* ── 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;
}
.nr-city-grafana {
    margin-top: 18px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
}
.nr-city-grafana__load {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(20, 187, 96, 0.12);
    border: 1px solid rgba(20, 187, 96, 0.30);
    border-radius: 6px;
    color: var(--primary, #14bb60);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    cursor: pointer;
    transition: background 180ms ease-out;
}
.nr-city-grafana__load:hover { background: rgba(20, 187, 96, 0.18); }
.nr-city-grafana__load-icon {
    width: 14px; height: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary, #14bb60);
    color: #ffffff;
    border-radius: 50%;
    font-size: 8px;
    padding-left: 1px;
}
.nr-city-grafana__note { margin: 8px 0 0; font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.nr-city-grafana iframe {
    width: 100%;
    min-height: 360px;
    border: 0;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.2);
    margin-top: 14px;
}
.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; }
.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; }

/* ── 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__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, "sofia-pro", 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, "sofia-pro", 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, "sofia-pro", 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;
}

/* ─────────────────────────────────────────────────────────────────
 * 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: 56px; height: 56px;
}
.nr-os-item .nr-product-features__icon img {
    filter: brightness(1.1) contrast(0.95);
}
.nr-os-item .nr-product-features__title {
    font-size: 14px;
    text-align: center;
}
.nr-os-item .nr-product-features__cta {
    margin-top: 4px;
}

/* 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;
}