/* ============================================================================
   NCCK front-office public styles (D2) — shell (header/nav/footer) + homepage.
   Contract: PUBLIC-SITE-DESIGN-SPEC v2. Every color/geometry value consumes
   the frozen css/ncck-tokens.css tokens (loaded first by head.tpl) — this
   file defines NO --ncck-* custom properties of its own.
   Scope: rooted under body.ncck-public; the client-area shell is untouched.
   ========================================================================== */

body.ncck-public {
    /* 2026-07-26: twenty-one/css/theme.min.css in the parent theme declares
       `body, html{height:100%}`. Because .ncck-header is a direct child of body, that makes the sticky
       containing block only **one viewport tall**. After roughly 850–960px of scrolling, the header
       stops sticking and scrolls away, leaving the top of the viewport empty.
       This is independent of the 32px clipping defect below: clipping reproduces only at ≥992px,
       while loss of sticky positioning also affects mobile. The parent theme is a locked shared
       resource, so release the height in this shell instead of editing the parent. */
    height: auto;
    font-family: var(--ncck-font);
    background-color: var(--ncck-surface);
    background-image: var(--ncck-dot-bg); /* P3 site-wide light lattice texture (data-URI, non-gradient) */
    background-size: 24px 24px;
    color: var(--ncck-text);
    overflow-x: clip;
}

body.ncck-public .ncck-container {
    max-width: var(--ncck-container);
    margin: 0 auto;
    padding: 0 40px;
}

/* ---------------------------------------------------------------- header */

.ncck-header {
    position: sticky;
    /* 2026-07-26 stakeholder report: "After scrolling, the tops of the logo, navigation, and buttons are
       clipped." This rule previously used top: calc(-1 * var(--ncck-toolbar-h)) = -32px so the 32px
       utility bar could scroll out while the navigation row remained sticky. The utility bar was
       removed from public-header.tpl on 2026-07-23; only a comment remains in the template, and live
       inspection confirms .ncck-utilbar is always null. The -32px offset was not removed with it, so
       the navigation row itself became the 32px sacrificed at the sticky boundary. Runtime measurements:
       3px clipped from the logo, 8px from menu links, and 11px from Sign In/Sign Up. The breakpoint is
       exactly 992px; ≤991px is unaffected because the later mobile rule overrides this with top:0. */
    top: 0;
    z-index: 1030;
    background: var(--ncck-surface);
}

/* utility row — stable 32px, dark strip per live baseline */
.ncck-utilbar {
    height: var(--ncck-toolbar-h);
    background: var(--ncck-rail);
}
.ncck-utilbar .ncck-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: var(--ncck-toolbar-h);
}
.ncck-utilbar-nav {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ncck-utilbar-nav > li > a,
.ncck-utilbar-control {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 32px;
    min-height: 32px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--ncck-font);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}
.ncck-utilbar-nav > li > a:hover,
.ncck-utilbar-control:hover,
.ncck-utilbar-control:focus-visible {
    color: #fff;
    text-decoration: none;
}
.ncck-utilbar-control:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}
.ncck-utilbar-cart.is-active {
    color: #fff;
    background: rgba(255, 255, 255, .12);
}
.ncck-utilbar-lang .ncck-langpick-menu {
    top: calc(100% + 6px);
    right: 0;
    bottom: auto;
}
.ncck-cart-count {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--ncck-primary);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* main navigation row — stable 72px desktop */
.ncck-mainnav {
    position: relative;
    background: var(--ncck-surface);
    border-bottom: 1px solid var(--ncck-border);
}
.ncck-mainnav .ncck-container {
    display: flex;
    align-items: center;
    height: var(--ncck-nav-h);
}
.ncck-header.is-stuck .ncck-mainnav {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

/* logo — live-calibrated: ~112x24 render inside a 112x54 anchor box */
.ncck-brand {
    display: flex;
    align-items: center;
    flex: 0 0 112px;
    width: 112px;
    height: 54px;
}
.ncck-brand-img {
    width: auto;
    height: auto;
    max-width: 112px;
    max-height: 26px;
    object-fit: contain;
}

/* first-level menu */
.ncck-nav-drawer {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    height: var(--ncck-nav-h);
    /* Stakeholder specification 2026-07-24: Logo → Menu 48–64px, use the midpoint */
    margin-left: 56px;
}
.ncck-menu {
    display: flex;
    align-items: center;
    /* Stakeholder specification 2026-07-24: Menu item spacing 36–44px, use the midpoint */
    gap: 40px;
    height: var(--ncck-nav-h);
    margin: 0 auto 0 0;
    padding: 0;
    list-style: none;
}
.ncck-menu-item { height: var(--ncck-nav-h); }
/* 2026-07-21 The stakeholder reported: The menu is on the left, but the mega panel is in the middle and on
   the right. Change to panel anchor trigger item left edge (--mega from static→relative, panel
   left:0), the same logic as --simple/--support. */
.ncck-menu-item--mega { position: relative; }
.ncck-menu-item--simple { position: relative; }
.ncck-menu-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: var(--ncck-nav-h);
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ncck-text);
    font-family: var(--ncck-font);
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-decoration: none;
    cursor: pointer;
}
.ncck-menu-link::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--ncck-primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 160ms ease-out;
}
.ncck-menu-item:hover > .ncck-menu-link,
.ncck-menu-item.open > .ncck-menu-link,
.ncck-menu-item.active > .ncck-menu-link {
    color: var(--ncck-primary);
}
.ncck-menu-item:hover > .ncck-menu-link::after,
.ncck-menu-item.open > .ncck-menu-link::after,
.ncck-menu-item.active > .ncck-menu-link::after {
    transform: scaleX(1);
}
/* Detail refinement: Navigation menu item hover light blue background (from homepage refinement draft nk-polish v2 §7) */
body.ncck-public .ncck-menu-link:hover { background: rgba(15,92,255,.06); border-radius: 8px; }
.ncck-caret {
    margin-left: 7px;
    font-size: 11px;
    transition: transform 160ms ease-out;
}
.ncck-menu-item.open .ncck-caret { transform: rotate(180deg); }

/* Header utilities — desktop uses the dark 32px utility row above the main
   navigation; mobile keeps a separate 44px Language → Cart group. */
.ncck-header-lang .ncck-langpick-menu {
    top: calc(100% + 8px);
    right: 0;
    bottom: auto;
}
.ncck-mobile-tools {
    display: none;
}
.ncck-mobile-tool {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--ncck-radius-sm);
    background: transparent;
    color: var(--ncck-text);
    font-family: var(--ncck-font);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

/* account actions — 42px high, 6px radius (spec §2) */
.ncck-nav-actions {
    display: flex;
    align-items: center;
    /* Stakeholder specification 2026-07-24: The spacing between Sign In and Sign Up is 14–16px, use the midpoint */
    gap: 15px;
    margin-left: 24px;
}
.ncck-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 18px;
    border-radius: var(--ncck-radius-sm);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.ncck-btn--outline,
.ncck-btn--outline:hover {
    color: var(--ncck-text);
    background: var(--ncck-surface);
    border: 1px solid var(--ncck-border);
}
.ncck-btn--outline:hover { color: var(--ncck-primary); border-color: var(--ncck-primary); }
.ncck-btn--primary,
.ncck-btn--primary:hover {
    color: #fff;
    background: var(--ncck-primary);
    border: 1px solid var(--ncck-primary);
}
.ncck-btn--primary:hover { background: var(--ncck-primary-hover); border-color: var(--ncck-primary-hover); }
/* P4 hero CTA size: enlarge primary and secondary hero buttons and reduce their weight. This override
   applies only to --xl; small navigation buttons remain at weight 700. */
.ncck-btn--xl { height: 64px; padding: 0 32px; font-size: 20px; font-weight: 500; border-radius: var(--ncck-radius); }
.ncck-btn--lg { height: 56px; padding: 0 26px; font-size: 17px; font-weight: 500; border-radius: var(--ncck-radius); }
.ncck-btn--ondark,
.ncck-btn--ondark:hover {
    color: var(--ncck-rail);
    background: #fff;
    border: 1px solid #fff;
}
.ncck-btn--ondark-outline,
.ncck-btn--ondark-outline:hover {
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.72);
}
.ncck-btn--ondark-outline:hover { background: rgba(255, 255, 255, 0.14); }
/* Detailed refinement: button texture - primary button gradient+inner highlight+lift, border/dark model hover slightly raised (from homepage refined draft nk-polish v2 §1) */
body.ncck-public .ncck-btn--primary, body.ncck-public .ncck-btn--primary:hover { background: linear-gradient(180deg, var(--ncck-primary), var(--ncck-primary-hover)); border-color: var(--ncck-primary-hover); box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 8px 18px -8px rgba(15,92,255,.55); }
body.ncck-public .ncck-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.26) inset, 0 12px 24px -8px rgba(15,92,255,.68); }
body.ncck-public .ncck-btn--outline:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(15,24,48,.25); }
body.ncck-public .ncck-btn--ondark:hover, body.ncck-public .ncck-btn--ondark-outline:hover { transform: translateY(-1px); }

/* focus visibility */
body.ncck-public :is(a, button):focus-visible {
    outline: 1px solid var(--ncck-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(15, 92, 255, 0.22);
}
/* 2026-07-22 Acceptance-review rejection: A focus box appears when the mouse clicks on the menu (none in
   w8). The mouse source focus will always suppress the UA default ring and custom ring; the keyboard
   navigation (:focus-visible) focus ring will not be affected (a11y is reserved). */
body.ncck-public :is(a, button):focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* Detail refinement: The refinement layer shares a smooth transition base (from homepage refinement draft nk-polish v2 §0) */
body.ncck-public .ncck-fcard, body.ncck-public .nlc, body.ncck-public .ncck-btn, body.ncck-public .nfk-ico, body.ncck-public .ncck-pcard, body.ncck-public .ncck-locrow, body.ncck-public .nsrv-row, body.ncck-public a.nsrv-rbuy, body.ncck-public .nsrv-fchips button, body.ncck-public .nk-alsorow a { transition: transform .18s ease, box-shadow .22s ease, border-color .2s ease, background-color .2s ease, filter .18s ease; }
/* Detailed refinement: motion effects respect system settings - each interactive component in the refinement layer is reduced-motion and shut down (from the end of nk-polish v2; including a11y reset! important, source code retained) */
@media (prefers-reduced-motion: reduce) { body.ncck-public .ncck-fcard, body.ncck-public .nlc, body.ncck-public .ncck-btn, body.ncck-public .nfk-ico, body.ncck-public .np-dot--g::after, body.ncck-public .nsrv-row, body.ncck-public a.nsrv-rbuy { animation: none !important; transition: none !important; } }

/* ------------------------------------------------------------- dropdowns */

.ncck-dd {
    position: absolute;
    top: 100%;
    display: none;
    margin-top: 8px;
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius);
    background: var(--ncck-surface);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
    overflow: hidden;
    z-index: 1040;
}
/* Detail refinement: drop-down panel shadow deepening (from homepage refinement draft nk-polish v2 §7) */
body.ncck-public .ncck-dd { box-shadow: 0 2px 4px rgba(14,24,48,.05), 0 28px 56px -24px rgba(14,24,48,.28); }
.ncck-menu-item.open > .ncck-dd { display: block; }
.ncck-dd--products,
.ncck-dd--locations {
    left: 0;                    /* Anchor the left edge of the trigger item (fix "menu on the left and pop-up window on the right") */
    padding: 22px;
}
.ncck-dd--products { width: 720px; }
.ncck-dd--locations { width: 760px; }
.ncck-dd--support {
    left: 0;
    min-width: 240px;
    padding: 8px;
}

.ncck-dd-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ncck-border);
}
.ncck-dd-cap {
    color: var(--ncck-primary);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}
.ncck-dd-title {
    margin-top: 4px;
    color: var(--ncck-text);
    font-size: 17px;
    font-weight: 700;
}
.ncck-dd-all {
    color: var(--ncck-primary);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

/* products grid — flat cells with shared dividers, no nested cards */
.ncck-pgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ncck-pcard {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border-radius: var(--ncck-radius-sm);
    color: var(--ncck-text);
    text-decoration: none;
}
.ncck-pcard:nth-child(even) { border-left: 1px solid var(--ncck-border); border-radius: 0 var(--ncck-radius-sm) var(--ncck-radius-sm) 0; }
.ncck-pcard:nth-child(n+3) { border-top: 1px solid var(--ncck-border); }
.ncck-pcard:hover,
.ncck-pcard:focus-visible {
    background: var(--ncck-bg);
    box-shadow: inset 3px 0 0 var(--ncck-primary);
    /* Unify the hover highlight shape: the even card (:nth-child(even)) is statically at square corners to
   the left of the conjoined grid (0 sm sm 0). If it is not covered here, the hover highlight will be
   inconsistent with "circle in the left column and straight in the right column" (the stakeholder reported on
   2026-07-22 "circle in the front and straight in the back"). The same specificity and source order
   follow, so all card hovers have the same border radius. */
    border-radius: var(--ncck-radius-sm);
}
body.ncck-public .ncck-header a.ncck-pcard:focus-visible {
    outline: 2px solid var(--ncck-primary);
    outline-offset: -2px;
    box-shadow: inset 3px 0 0 var(--ncck-primary);
}
.ncck-pico {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--ncck-radius-sm);
    background: rgba(15, 92, 255, 0.08);
    color: var(--ncck-primary);
    font-size: 17px;
}
.ncck-pbody { display: block; min-width: 0; }
.ncck-pname { display: block; color: var(--ncck-text); font-size: 14px; font-weight: 700; }
.ncck-pdesc {
    display: -webkit-box;
    min-height: 38px;
    margin-top: 4px;
    overflow: hidden;
    color: var(--ncck-text-muted);
    font-size: 13px;
    line-height: 1.45;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ncck-pmore {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 9px;
    color: var(--ncck-primary);
    font-size: 12.5px;
    font-weight: 700;
}
.ncck-pmore .fa-arrow-right { font-size: 10px; }

/* locations — flat list rows with dividers, gradient cover block */
.ncck-locrows { display: grid; grid-template-columns: 1fr; }
.ncck-locrow {
    position: relative;
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr) 156px;
    grid-template-rows: auto auto auto;
    column-gap: 16px;
    min-width: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ncck-border);
    color: var(--ncck-text);
    text-decoration: none;
}
.ncck-locrow:last-child { border-bottom: 0; }
.ncck-locrow:hover,
.ncck-locrow:focus-visible {
    background: var(--ncck-bg);
    border-radius: var(--ncck-radius-sm);
    overflow: hidden;
}
.ncck-locrow:hover::before,
.ncck-locrow:focus-visible::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--ncck-primary);
    z-index: 2;
    pointer-events: none;
}
body.ncck-public .ncck-header a.ncck-locrow:focus-visible {
    outline: 2px solid var(--ncck-primary);
    outline-offset: -2px;
    box-shadow: none;
}
/* Detail refinement: Navigation mega panel product card/region row hover micro-up (from homepage refinement draft nk-polish v2 §7) */
body.ncck-public .ncck-pcard:hover, body.ncck-public .ncck-locrow:hover { transform: translateY(-2px); }
.ncck-loccover {
    position: relative;
    grid-column: 1;
    grid-row: 1 / 4;
    width: 116px;
    min-height: 72px;
    border-radius: var(--ncck-radius-sm);
    overflow: hidden;
    background-color: var(--ncck-rail);
    background-size: cover;
    background-position: center;
}
/* real facility photos + a single flat rgba scrim for label contrast (no gradients) */
.ncck-loccover::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(4, 10, 24, 0.35);
}
.ncck-loccover--hk { background-image: url('../assets/img/ncck/photo-hkg.jpg'); }
.ncck-loccover--kr { background-image: url('../assets/img/ncck/photo-sel.jpg'); }
.ncck-loccover--us { background-image: url('../assets/img/ncck/photo-lax.jpg'); }
.ncck-loccover i, .ncck-loccover .ncck-loccity { z-index: 1; }
.ncck-loccode {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(2, 8, 23, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 10px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.06em;
}
.ncck-loccity {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(2, 8, 23, 0.6);
}
.ncck-locdesc {
    grid-column: 2;
    grid-row: 1 / 3;
    margin: 0;
    color: var(--ncck-text-muted);
    font-size: 13px;
    line-height: 1.45;
}
.ncck-locstats {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.ncck-locstats span { display: block; }
.ncck-locstats b {
    display: block;
    color: var(--ncck-text);
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.ncck-locstats i {
    display: block;
    margin-top: 2px;
    color: var(--ncck-text-muted);
    font-size: 11px;
    font-weight: 600;
    font-style: normal;
}
.ncck-locmore {
    grid-column: 2 / 4;
    grid-row: 3;
    margin-top: 6px;
    color: var(--ncck-primary);
    font-size: 12.5px;
    font-weight: 700;
}
.ncck-locsoon {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--ncck-border);
}
.ncck-locsoon-cap {
    color: var(--ncck-text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ncck-locsoon-item { color: var(--ncck-text); font-size: 13px; font-weight: 600; }
.ncck-locsoon-link {
    margin-left: auto;
    color: var(--ncck-primary);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
}

/* support — simple list rows */
.ncck-dd-list { margin: 0; padding: 0; list-style: none; }
.ncck-dd-list > li > a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: var(--ncck-radius);
    color: var(--ncck-text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}
.ncck-dd-list > li > a:hover,
.ncck-dd-list > li > a:focus-visible {
    color: var(--ncck-primary);
    background: var(--ncck-bg);
    box-shadow: inset 3px 0 0 var(--ncck-primary);
}

/* --------------------------------------------- full-bleed transparent top ...git */

/* live baseline keeps the dark utility strip opaque on the homepage; only the
   main nav row goes transparent over the light hero at the top state */
body.ncck-public.page-homepage .ncck-header:not(.is-stuck) {
    background: transparent;
}
body.ncck-public.page-homepage .ncck-header:not(.is-stuck) .ncck-mainnav {
    background: transparent;
    border-bottom-color: transparent;
}
body.ncck-public.page-homepage .ncck-header { margin-bottom: calc(-1 * (var(--ncck-toolbar-h) + var(--ncck-nav-h) + 1px)); }
body.ncck-public.page-homepage .ncck-header.is-stuck { background: var(--ncck-surface); }
body.ncck-public.page-homepage .ncck-header.is-stuck .ncck-mainnav { background: var(--ncck-surface); border-bottom-color: var(--ncck-border); }

/* ------------------------------------------------------------ page chrome */

/* native breadcrumb bar: keep for inner pages, drop on the homepage */
body.ncck-public.page-homepage .master-breadcrumb { display: none; }
body.ncck-public .master-breadcrumb {
    background: var(--ncck-bg);
    border-bottom: 1px solid var(--ncck-border);
}
/* Stakeholder report 2026-07-24: a darker gray rectangle appears inside the breadcrumb bar, and its left edge
   does not align with page content. Root cause: two native Bootstrap defaults in WHMCS were not
   skinned—① ol.breadcrumb supplies its own #e9ecef dark-gray background; ② the nested .container is
   Bootstrap's 1140px width while the site container is --ncck-container 1440px. Normalize both by
   using the NCCK container width and a transparent breadcrumb background. */
body.ncck-public .master-breadcrumb > .container,
/* Same-root-cause normalization: native WHMCS public pages such as contact, submitticket,
   announcements, and knowledgebase still use Bootstrap's 1140px .container. That does not align with
   the 1440px .ncck-container used by custom pages and the breadcrumb. Use the site-wide container so
   both page edges align consistently, per the stakeholder's "one style across the whole site" requirement. */
body.ncck-public #main-body > .container {
    max-width: var(--ncck-container);
    padding: 0 40px;
}
/* Same root cause as the corresponding ncck-client.css rule; see that comment for full evidence.
   At header.tpl:75, when WHMCS core sets $skipMainBodyContainer (confirmed for
   error/page-not-found), the outer wrapper becomes a classless div with padding 0. Nothing then
   cancels the nested .row's -15px margins, so every viewport overflows horizontally by 15px.
   Logged-out 404 pages in the public shell and authenticated error pages in the client shell share
   this defect, so each shell owns the same scoped correction. The normal .container branch retains
   its 40px padding and has zero visual change. */
body.ncck-public #main-body > div:not(.container) > .row {
    margin-left: 0;
    margin-right: 0;
}

body.ncck-public .master-breadcrumb .breadcrumb {
    margin: 0;
    padding: 12px 0;
    background: transparent;
    border-radius: 0;
}
/* (domain-search include was structurally removed from the locked header.tpl
   by the supervisor, 3fe4c14 — no hide rule needed anymore) */
/* homepage body renders full-width sections */
body.ncck-public.page-homepage #main-body .container { max-width: none; padding: 0; }
body.ncck-public.page-homepage #main-body .row { margin: 0; }
body.ncck-public.page-homepage #main-body .primary-content { padding: 0; }

/* ------------------------------------------------------------- homepage */

.ncck-home { color: var(--ncck-text); }
.ncck-text-primary { color: var(--ncck-primary); }

/* 1. hero — light technical variant, starts at y=0 behind the header;
   first-screen whitespace calibrated to the live baseline (~110px) */
.ncck-hero {
    padding: calc(var(--ncck-toolbar-h) + var(--ncck-nav-h) + 110px) 0 110px;
    background: var(--ncck-bg);
    border-bottom: 1px solid var(--ncck-border);
}
.ncck-hero-grid {
    display: grid;
    /* verified w8 (2026-07-22 direct measurement): measured column widths 636px/596px @1360 container, gap 48 */
    grid-template-columns: minmax(0, 636fr) minmax(0, 596fr);
    gap: 48px;
    align-items: center;
}
/* w8 direct port (theme-custom.css:3037-3050/4141): Remove the fixed 720px maximum width (original wrapping defect
   root cause ①), the title width is controlled by the grid column itself; the content is
   vertically centered and aligned with w8 .banner-content. */
.ncck-hero-content {
    max-width: none;
    /* ②home hero special items (2026-07-22 live verification step by step, iron rule ②: np-panel/np-chip/ ...git */
    min-height: 661px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ncck-hero-caption {
    display: inline-block;
    margin-bottom: 16px;
    color: var(--ncck-primary);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
}
.ncck-hero-title {
    margin: 0 0 18px;
    color: var(--ncck-heading);
    font-size: 50px;
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -0.02em;
}
/* Direct font-weight port (2026-07-22 live verification, H4 grep consumer pages=homepage.tpl only this one): ...git */
.ncck-hero-subtitle {
    max-width: 680px;
    margin: 0 0 28px;
    color: var(--ncck-text-body);
    font-size: 20px;
    line-height: 1.7;
    font-weight: var(--ncck-fw-light);
}
.ncck-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ntrust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin-top: 22px;
}
.ntrust span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ncck-text-muted);
    font-size: 13px;
}
.ntrust span b { color: var(--ncck-text); font-weight: 700; margin-right: 4px; }
/* [2026-07-22 hero review rejection correction SUPERSEDED P6] w8 verified live behavior=standalone green checkmark
   rgb(22,163,74)/13.5px without a background or enclosing circle (P6 "blue circle with white checkmark" is locally invented,
   rejected during acceptance review) */
.ntrust .fa-check {
    color: var(--ncck-trust-check);
    font-size: 13.5px;
}

/* hero route-status panel (header spec §5: retained component) ...git */
.ncck-hero-graphic { position: relative; min-width: 0; align-self: start; }
.np-panel {
    display: flex;
    flex-direction: column;
    background: var(--ncck-surface);
    border: 1px solid var(--ncck-w8-line2);   /* live #d5dded */
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.10);
}
/* Detail refinement: hero routing panel multi-layer soft shadow (from homepage refinement draft nk-polish v2 §3; Note: homepage scope 3809 --ncck-glow-panel has higher specificity, homepage still uses blue glow as the standard, this rule mainly affects panels that do not appear on homepage) */
body.ncck-public .np-panel { box-shadow: 0 1px 2px rgba(14,24,48,.05), 0 24px 48px -20px rgba(14,24,48,.22), 0 36px 80px -32px rgba(15,92,255,.18); }
.np-head {
    display: flex;
    align-items: center;
    gap: 8px;                                  /* live 8 */
    padding: 13px 18px;
    background: linear-gradient(180deg, var(--ncck-route-bg), var(--ncck-surface));  /* live #fafbfe→#fff */
    border-bottom: 1px solid var(--ncck-route-border);   /* live #e6eaf2 */
    color: var(--ncck-text-muted);
    font-size: 14px;                           /* verified 14px */
    font-weight: 600;
}
.np-head span { margin-left: 8px; font-size: 13px; }   /* live 13/600/ml8 */
.np-dot { width: 10px; height: 10px; border-radius: 50%; }
.np-dot--r { background: var(--ncck-danger); }
.np-dot--y { background: var(--ncck-warning); }
.np-dot--g { background: var(--ncck-success); }
/* Detail refinement: hero live green dot pulse ring (from homepage refinement draft nk-polish v2 §3) */
body.ncck-public .np-dot--g { position: relative; }
body.ncck-public .np-dot--g::after { content:""; position:absolute; inset:-3px; border-radius:50%; border:1.5px solid currentColor; opacity:.45; animation: nk-ping 2s ease-out infinite; }
@keyframes nk-ping { 0% { transform: scale(.5); opacity:.5; } 100% { transform: scale(1.6); opacity:0; } }
.np-b {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    flex: 1 1 auto;
    padding: 20px 18px 18px;
}
.np-route {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px 132px;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border: 1px solid var(--ncck-route-border);
    border-radius: 14px;
    background: var(--ncck-route-bg);
    margin-bottom: 0;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.np-route:hover {
    border-color: rgba(6, 86, 255, 0.40);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 14px rgba(15, 23, 42, 0.07);
}
.np-route--last { margin-bottom: 0; }

/* Use two rows for routes on mobile—defect captured during the 2026-07-25 mobile visual review.
   Desktop .np-route is a three-column grid (route information / 70px bar chart / 132px latency).
   Fixed columns, gaps, and padding consume 254px. At a 390px viewport the panel is 342px wide, leaving
   only 88px for the first column; the city name inside .np-ends is compressed to **42px wide**.
   Character-by-character wrapping plus height:64px and overflow:hidden then clips the text until only
   the vertical letters "T V C" remain, making "Hong Kong · Tsuen Wan" unreadable.
   On narrow viewports, let .np-ends span the entire first row, place the bar chart and latency side by
   side on the second row, and remove .np-ends' fixed height. Desktop keeps its three-column layout
   because it is outside this breakpoint, so the desktop visual is unchanged. */
@media (max-width: 575.98px) {
    body.ncck-public .np-route {
        grid-template-columns: auto 1fr;
        gap: 8px 10px;
        padding: 12px;
    }
    body.ncck-public .np-route .np-ends {
        grid-column: 1 / -1;
        height: auto;
    }
    body.ncck-public .np-route .np-lat {
        justify-self: end;
    }
}
.np-ends { display: flex; align-items: center; gap: 10px; min-width: 0; height: 64px; overflow: hidden; }
.np-node {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;                /* verified 31×34px: wide text, padding support */
    padding: 0 5px;
    height: 34px;
    border-radius: var(--ncck-radius-md);
    background: var(--ncck-rail);   /* City gradients are overridden by the --hkg/--sel/--lax variant */
    color: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 11px;
    font-weight: 800;           /* live 800 */
    letter-spacing: 0.04em;
}
.np-ends > div > span { display: block; color: var(--ncck-text); font-size: 14.5px; font-weight: 600; }  /* verified 14.5px */
.np-tag { color: var(--ncck-text-muted); font-size: 12px; font-weight: 500; }  /* live 12/500 */
.np-spark { display: flex; align-items: flex-end; justify-self: start; gap: 3px; height: 26px; }
.np-spark i {
    width: 4px;
    border-radius: 2px;
    background: var(--ncck-primary);
    animation: np-pulse 1.6s ease-in-out infinite;
}
.np-spark i:nth-child(2) { animation-delay: .2s; }
.np-spark i:nth-child(3) { animation-delay: .4s; }
.np-spark i:nth-child(4) { animation-delay: .6s; }
.np-spark i:nth-child(5) { animation-delay: .8s; }
@keyframes np-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.np-lat {
    justify-self: start;
    color: var(--ncck-text);
    font-family: var(--ncck-font-mono);
    font-size: 15px;
    font-weight: 700;           /* live 700 */
    font-variant-numeric: tabular-nums;
}
/* margin-left 2px → 4px (2026-07-25): The value and unit in lang are separated into two sections
   (lat="3" + dst="ms → Shenzhen"). The 2px gap is visually read as "3ms", which violates the stakeholder's
   "leave a space between the number and the unit". 4px ≈ 15px The width of the next space in the font
   size, pronounced as "3 ms". The probe has been added with adjacent fragments to scan to focus on
   this kind of cross-node splicing, so that it will not drift back quietly after regression. */
.np-lat small { margin-left: 4px; color: var(--ncck-hero-sub-ink); font-size: 11.5px; font-weight: 500; }  /* live 11.5/#64748b */
/* Detail refinement: hero delay value equal width + tight kerning (from homepage refinement draft nk-polish v2 §3) */
body.ncck-public .np-lat { font-family: var(--ncck-font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.np-foot {
    display: flex;
    justify-content: space-between;
    gap: 10px;                  /* live 10 */
    padding: 13px 18px;
    background: var(--ncck-route-bg);            /* live #fafbfe */
    border-top: 1px dashed var(--ncck-w8-line2); /* live #d5dded */
    color: var(--ncck-text-muted);
    font-size: 12.5px;          /* live 12.5 */
}
.np-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 9px;                   /* live 9 */
    padding: 10px 16px;         /* live 10/16 */
    background: var(--ncck-surface);
    border: 1px solid var(--ncck-w8-line2);   /* live #d5dded */
    border-radius: 14px;        /* verified 14px (non-pill) */
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    color: var(--ncck-text);
    font-size: 13px;            /* live 13 */
    font-weight: 600;
    z-index: 2;
}
.np-chip .fas { color: var(--ncck-primary); font-size: 12px; }
/* Detail refinement: floating hero badge shadow (from homepage refinement draft nk-polish v2 §3; homepage scope 3810 glow-panel has higher specificity, homepage still uses blue glow) */
body.ncck-public .np-chip { box-shadow: 0 10px 24px -12px rgba(14,24,48,.28); }
/* The floating badge is removed from normal flow and never squeezes the panel flex layout (root cause③: previously float would expand...git */
.np-c1 { top: -18px; right: 6px; }
.np-c2 { bottom: -16px; left: -14px; }

@media (min-width: 992px) {
    /* verified w8: The panel is always 480 wide, centered on the 596px track, and the height is driven by the
   content (runtime verification 412); chip horizontal offset = relative panel edge ±6/±14 (converted to
   relative track: (100%-480)/2 ∓ n, runtime verification right 51.6/left 45.6 consistent byte by byte) */
    .np-panel { width: 480px; max-width: 480px; min-width: 480px; margin: 0 auto; }
    .np-c1 { right: calc((100% - 480px) / 2 - 6px); }
    .np-c2 { left: calc((100% - 480px) / 2 - 14px); }
}

/* 2. partners strip — centered cap over a centered logo row (live baseline) */
/* P6:partners = restrained grayscale wordmark wall (opacity .6, no dividing line, transparent dot matrix) */
/* [D9 build 2026-07-22] Structural acceptance item registration (-44 @1440, recorded only after all child-level causes were exhausted, ...git */
.ncck-partners {
    padding: 36px 0 12px;
    background: transparent;
}
.ncck-partners .ncck-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.ncck-partners .nprow { justify-content: center; }
/* OP-2 (2026-07-22 build, whmcs8 live getComputedStyle runtime verification replaces previous manual estimate): ...git */
.npcap {
    color: var(--ncck-text-muted);
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    white-space: nowrap;
    line-height: 28px;
    margin-bottom: 20px;
}
.nprow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 44px;
    opacity: 0.6;
    line-height: 28px;
}
.nprow b {
    color: var(--ncck-text-muted);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.nprow b i { font-weight: 400; font-style: normal; }
/* Detailed refinement: partner wordmark, widening letter spacing + static lightening, hover brightening (from homepage refined draft nk-polish v2 §8) */
body.ncck-public .nprow b { letter-spacing: .05em; opacity: .78; transition: opacity .2s; }
body.ncck-public .nprow b:hover { opacity: 1; }

/* shared section scaffolding — vertical rhythm calibrated to live (~88px) */
/* Batch D G10 (w8 audit 2026-07-21, w8:3103 .site-section{padding:88px 0}): change 104px to
   88px once in the shared base used by home, legal, locations, and at least three other pages. */
.ncck-section { padding: 88px 0; }
/* ⑤R4 segment-by-segment live verification (2026-07-22): It was assumed that "w8 title-above segment padT:0" is globally available...git */
.ncck-cnroutes { padding-top: 0; padding-bottom: 80px; }
/* P3 dot matrix: light-colored segments (white/light gray) reveal the light dot matrix; steps exception = flat light gray + upper and lower thin lines; dark-colored segments (statband/cta) are covered with their own background color */
.ncck-section:nth-of-type(odd) { background-color: var(--ncck-surface); background-image: var(--ncck-dot-bg); background-size: 24px 24px; }
.ncck-hardware { background-color: var(--ncck-bg); background-image: var(--ncck-dot-bg); background-size: 24px 24px; }
.ncck-steps { background: var(--ncck-bg); border-top: 1px solid var(--ncck-border); border-bottom: 1px solid var(--ncck-border); }
/* section heads are centered with a pill eyebrow (baseline-live parity) */
.ncck-section-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.ncck-sec-cap {
    display: inline-block;
    margin-bottom: 12px;
    padding: 4px 14px;
    border-radius: 999px;
    background: rgba(15, 92, 255, 0.08);
    color: var(--ncck-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ncck-sec-title {
    margin: 0 0 12px;
    color: var(--ncck-heading);
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
}
/* Batch D G16——[2026-07-22 live final ruling amendment] Register static ruling home 36px, w8 homepage ...git */
body.ncck-public.page-homepage .ncck-sec-title,
.ncck-soon .ncck-sec-title {
    font-weight: 700;
}
body.ncck-public.page-homepage .ncck-sec-title { font-size: 40px; }
.ncck-soon .ncck-sec-title { font-size: 40px; }
.ncck-sec-subtitle {
    margin: 0;
    color: var(--ncck-text-body);
    font-size: 16px;
    line-height: 1.6;
}

/* card grids */
.ncck-cardgrid { display: grid; gap: 24px; }
.ncck-cardgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ncck-cardgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* G1 (w8 audit 2026-07-21): breakpoint parity——w8 Bootstrap grid card area col-xl-4/lg-6/md-6, ...git */
@media (max-width: 1199px) {
    .ncck-cardgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* OP-2 (2026-07-22 migration, w8 home HTML curl verification): products4 uses col-xl-6 col-lg-6 ...git */
@media (max-width: 991.98px) {
    .ncck-cardgrid--2 { grid-template-columns: 1fr; }
}
/* OP-2:loccards independent breakpoint(w8 home HTML col-xl-4 col-lg-4 col-md-12 col-12—— ...git */
@media (max-width: 991.98px) {
    .ncck-loccards .ncck-cardgrid--3 { grid-template-columns: 1fr; }
}
/* OP-2 (2026-07-22 build, network /network live verification):.ncck-dualdef (defense 3 card) ...git */
@media (max-width: 991.98px) {
    .ncck-dualdef .ncck-cardgrid--3 { grid-template-columns: 1fr; }
}
/* OP-2 (2026-07-22 build, network live verification, within the approved scope to fix adjacent symptoms with the same root cause): ...git */
@media (min-width: 768px) and (max-width: 991.98px) {
    .ncck-netlines .ncck-cardgrid--3 { gap: 64px 24px; }
}
/* OP-2 (2026-07-22 build, w8 live four independent runtime verification: dualdef/ of network /network...git */
@media (min-width: 768px) and (max-width: 991.98px) {
    .ncck-dualdef .ncck-sec-title,
    .ncck-netlines .ncck-sec-title,
    .ncck-tips .ncck-sec-title,
    .ncck-dcstory .ncck-sec-title {
        font-size: 40px;
        line-height: 1.3;
    }
}
/* The previous comment "home/locations etc. have converged at 26px" was falsified by this round of live review (2026-07-22...git */
@media (min-width: 768px) and (max-width: 991.98px) {
    body.ncck-public.page-homepage .ncck-hardware .ncck-sec-title,
    body.ncck-public.page-homepage .ncck-loccards .ncck-sec-title {
        font-size: 40px;
        line-height: 1.3;
    }
}
/* H4 (2026-07-22 runtime evidence, stakeholder direction ①: home products4@768 new regression heightDiff ...git */
/* P8 E8: The card can be broken when it carries a dynamic string (API key/long host name/email
   localpart) to prevent the box from bursting. overflow-wrap is inheritable, setting it on a container
   to overwrite its textual descendants. */
.ncck-fcard, .nlc { overflow-wrap: anywhere; }

/* feature card (products / hardware / lines / steps) ...git */
.ncck-fcard {
    display: flex;
    flex-direction: column;
    padding: 28px 28px 24px;
    background: var(--ncck-surface);
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius-lg);
    box-shadow: var(--ncck-shadow-sm);
    color: var(--ncck-text);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* Interactive lift+blue ring is only for <a> type cards (interactive), to avoid implying
   "interactive/selected" on non-linked <div> information cards. Unlinked feature cards remain static
   (shadow-sm); their "featured" highlighting is expressed by a persistent --featured ring. */
a.ncck-fcard:hover {
    border-color: transparent;
    box-shadow: var(--ncck-ring), var(--ncck-shadow-lg);
    transform: translateY(-4px);
}
a.ncck-fcard:hover .nfk-title { color: var(--ncck-primary); }
/* Selected/featured card: persistent blue border ring + medium-tier shadow (not hover-dependent) */
.ncck-fcard--featured {
    border-color: transparent;
    box-shadow: var(--ncck-ring), var(--ncck-shadow-base);
}
/* Detail refinement: soft resting shadow for feature cards (homepage refinement draft nk-polish v2 §2).
   Hover lift was removed because .ncck-fcard is homepage-only and lift conflicts with the accepted
   1:1-flat rule: "glow ≠ lift; do not imply that a noninteractive card is clickable." */
body.ncck-public .ncck-fcard { box-shadow: 0 1px 2px rgba(14,24,48,.04); }
/* OP-2 migration: top-align steps (w8:3217-3218 align-items:flex-start + height:auto) so the three
   cards keep their content-driven heights instead of being forced equal by grid stretch.
   This migration round covers steps only. Hardware shares the same w8 source but is outside this task
   list, so it remains unchanged; do not roll back or broaden the accepted scope. */
.ncck-steps .ncck-cardgrid--3 { align-items: start; }
.ncck-steps .ncck-fcard { height: auto; }
/* OP-2(2026-07-22 build, w8 theme-custom.css:4157 `.ncck-dualdef .feature.is-boxed ...git */
@media (min-width: 768px) and (max-width: 991.98px) {
    .ncck-dualdef .ncck-fcard { padding: 30px 30px 26px; }
}
.nfk-ico {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: var(--ncck-primary);
    color: #fff;
    font-size: 22px;
}
/* Detailed refinement: feature card icon gradient background + shadow, micro-movement with card hover (from homepage refined draft nk-polish v2 §2) */
body.ncck-public .nfk-ico { background: linear-gradient(150deg, #2f6dff, var(--ncck-primary) 55%, var(--ncck-primary-hover)); box-shadow: 0 8px 16px -8px rgba(15,92,255,.55), 0 1px 0 rgba(255,255,255,.28) inset; }
.nfk-title {
    display: block;
    margin-bottom: 10px;
    color: var(--ncck-heading);
    font-size: 19px;
    font-weight: 800;
}
/* Direct font-weight port(2026-07-22 live verification, H4 grep consumer pages=homepage/network/locations/ ...git */
.ndesc {
    display: block;
    margin-bottom: 16px;
    color: var(--ncck-text-body);
    font-size: 14px;
    line-height: 1.7;
    font-weight: var(--ncck-fw-light);
}
.nck-list {
    margin: auto 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--ncck-border);
    list-style: none;
}
/* Direct font-weight port is in the same cycle (H4 grep consumer pages=homepage/network/location-detail
   three pages, locations page has no .nck-list use case): w8 same .feature-desc also applies to the
   list item, live is constant 300; whmcs10 otherwise defaults to 400. */
.nck-list li {
    position: relative;
    padding: 5px 0 5px 30px;
    color: var(--ncck-text-body);
    font-size: 14px;
    font-weight: var(--ncck-fw-light);
}
/* Solid blue circular check badge (replaces green ✓):::before=blue circle,::after=white outlined checkmark */
.nck-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ncck-primary);
}
.nck-list li::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 10px;
    width: 8px;
    height: 4px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
}

/* 5. location photo cards */
/* OP-2 direct port (the stakeholder requested "direct copy w8 HTML+CSS" pilot, 2026-07-22 verified direct port): ...git */
.nlc-box {
    display: flex;
    background: var(--ncck-surface);
    border: 1px solid var(--ncck-route-border);
    border-radius: 16px;
    overflow: hidden;
    transition: .25s;
}
.nlc-box:hover {
    transform: translateY(-4px);
    border-color: rgba(6, 86, 255, 0.35);
    box-shadow: var(--ncck-glow-panel);
}
.nlc-box > .nlc { flex: 1 1 auto; border: 0; border-radius: 0; box-shadow: none; }
.nlc-box > .nlc:hover { transform: none; box-shadow: none; border-color: transparent; }
.nlc {
    display: flex;
    flex-direction: column;
    background: var(--ncck-surface);
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius-lg);
    overflow: hidden;
    color: var(--ncck-text);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.nlc:hover {
    border-color: transparent;
    box-shadow: var(--ncck-ring), var(--ncck-shadow-lg);
    transform: translateY(-4px);
}
/* Details refined: data center card lift hover has been removed (from nk-polish v2 §4; .nlc-box is only for homepage, the original design is "outer box lift, inner card does not repeat lift", this layer will cause double lift) */
/* w8 This component maintains 3 columns to 992 (no 1199 two-column intermediate state), column spacing 32/line spacing 24 */
.ncck-loccards .ncck-cardgrid--3 { gap: 24px 32px; }
@media (min-width: 992px) and (max-width: 1199px) {
    .ncck-loccards .ncck-cardgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* D2.3-R5 (2026-07-22 live segment-by-segment review): The data center segment of the w8 /locations page is stuck on its native DOM...git */
.ncck-locations-cards { padding-top: 0; }
.nlc-cover {
    position: relative;
    display: block;
    height: 190px;
    background-color: var(--ncck-rail);
    background-size: cover;
    background-position: center;
}
.nlc-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(4, 10, 24, 0.38); /* single flat scrim — gradients are banned */
}
/* Detail refinement: Gradient cover at the bottom of the data center cover (from homepage refinement draft nk-polish v2 §4; Note: homepage 3866/locations 4224 has been upgraded to grad-cover-scrim and has higher specificity, this rule is mainly used as fallback) */
body.ncck-public .nlc-cover::after { content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(180deg, rgba(4,10,24,0) 42%, rgba(4,10,24,.55) 100%); }
.nlc-cover i {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    padding: 3px 9px;
    border-radius: 999px;
    /* Dark frosted glass: dark background comes with fallback (when backdrop-filter is not supported, dark background white text is still readable, and any cover image is robust) */
    background: rgba(2, 8, 23, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.25);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-family: var(--ncck-font-mono);
    font-size: 10.5px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.06em;
}
.nlc-cover b {
    position: absolute;
    left: 14px;
    bottom: 12px;
    z-index: 1;
    color: #fff;
    font-size: 19px;
    font-weight: 800;
    text-shadow: 0 1px 3px rgba(2, 8, 23, 0.6);
}
/* D2.3-R5 (2026-07-22 live comparison w8 theme-custom.css:4198-4202 ground truth, two pages...git */
.nlc-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px 22px 22px; }
/* Direct font-weight port (2026-07-22 live verification, H4 grep consumer pages=homepage/locations two pages): ...git */
.nlc-desc {
    display: block;
    min-height: 72px;
    color: var(--ncck-loccard-desc-ink);
    font-size: 13.5px;
    line-height: 1.75;
    font-weight: var(--ncck-fw-light);
}
.nlc-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ncck-border);
}
.nlc-st b {
    display: block;
    color: var(--ncck-text);
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
/* Detailed refinement: data center card statistical values equal width + tight letter spacing (from homepage refined draft nk-polish v2 §4) */
body.ncck-public .nlc-st b { font-family: var(--ncck-font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.nlc-st i {
    display: block;
    margin-top: 3px;
    color: var(--ncck-text-muted);
    font-size: 12px;
    font-style: normal;
}

/* 6. backbone stats — dark band, centered columns (live baseline) */
/* Batch D G11 (w8 audit 2026-07-21, w8:3104 .ncck-statband{padding:64px 0}): 96→64, home/network hit
   (locdetail shared base class synchronization benefits) */
.ncck-statband {
    padding: 64px 0;
    background: var(--ncck-rail);
}
.ncck-statband .ncck-stat { text-align: center; }
/* ③statband shared a repair (2026-07-22 live comparison item by item w8:3104/:3341/:4219 three pages...git */
.ncck-stat { padding: 10px 0; }
.ncck-statband .ncck-sec-cap { color: rgba(255, 255, 255, 0.72); }
.ncck-statband .ncck-sec-title { color: #fff; }
/* Detailed refinement: subdivided dividing lines between each statistical column of the backbone belt, and the first column is delineated (from homepage refined draft nk-polish v2 §5) */
body.ncck-public .ncck-statband .ncck-stat { border-left: 1px solid rgba(255,255,255,.08); }
body.ncck-public .ncck-statband .ncck-statgrid > .ncck-stat:first-child { border-left: 0; }
/* H4 (2026-07-22 runtime evidence, stakeholder direction ③: both sites' .ncck-statgrid gap 24 vs w8 ground truth...git */
.ncck-statgrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
}
/* [D9 build 2026-07-22] w8 live childSamples(drill5c-statitems.json, four pages × ...git */
.ncck-stat b {
    display: block;
    color: var(--ncck-stat-accent);
    font-size: 40px;
    font-weight: 800;
    font-family: var(--ncck-font-mono);
    font-variant-numeric: tabular-nums;
    line-height: 66px;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
}
/* Detail refinement: The backbone has a blue glow with large numbers (from homepage refinement draft nk-polish v2 §5) */
body.ncck-public .ncck-stat b { text-shadow: 0 0 28px rgba(80,156,255,.45); }
/* [D9 build 2026-07-22] Tag line (w8 h3.feature-title; home/hk page test markup using ...git */
.ncck-stat span {
    display: block;
    margin: 0 0 12px;
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 28px;
}
/* [D9 build 2026-07-22] Description line (w8 div.feature-desc): line-height viewport related—— ...git */
/* Direct font-weight port(2026-07-22 live verification, H4 grep consumer pages=homepage/network/ ...git */
.ncck-stat i {
    display: block;
    margin-top: 0;
    color: var(--ncck-stat-desc);
    font-size: 12.5px;
    font-style: normal;
    line-height: 28px;
    font-weight: var(--ncck-fw-light);
}
/* [D9 build 2026-07-22] 375px-specific override. The existing 575.98px breakpoint block near line
   1893 already uses this value for another selector. Keep this rule in a separate block that reuses
   the same breakpoint rather than disrupting the readability of the existing selector group. */
@media (max-width: 575.98px) {
    .ncck-stat span { margin-bottom: 16px; }
    .ncck-stat i { line-height: 26px; }
}

/* 9. CTA — P6: Flatten the entire blue ribbon, with the content directly in the center (remove the inner dark blue rail card for a double-layered look) */
.ncck-cta {
    padding: 104px 0;
    background: var(--ncck-cta-bg);
    text-align: center;
}
.ncck-cta-card {
    max-width: 760px;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    border-radius: 0;
}
/* Detailed refinement: CTA card glow/border/projection has been removed (from nk-polish v2 §6; .ncck-cta-card is only for homepage, and conflicts with approved whmcs8 1:1 "No projection in internal card", keep homepage as it is) */
.ncck-cta-title { margin: 0 0 14px; color: #fff; font-size: 40px; font-weight: 700; letter-spacing: -0.02em; }
.ncck-cta-subtitle { margin: 0 0 32px; color: rgba(255, 255, 255, 0.85); font-size: 18px; }
.ncck-cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }

/* ---------------------------------------------------------------- footer */

.ncck-footer {
    background: var(--ncck-rail);
    color: #fff;
    font-family: var(--ncck-font);
}
.ncck-footer-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(0, 1fr));
    gap: 32px;
    padding: 48px 0 40px;
}
.ncck-footer-logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 110px;
    max-height: 24px;
    object-fit: contain;
    /* deterministic white derivative of the sole approved wordmark PNG */
    filter: brightness(0) invert(1);
}
/* Direct font-weight port(2026-07-22 live verification, H4 grep:.ncck-footer-desc is only defined in ...git */
.ncck-footer-desc {
    margin: 14px 0 18px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13.5px;
    font-weight: var(--ncck-fw-light);
}
.ncck-footer-lang {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--ncck-radius-sm);
    background: transparent;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.ncck-footer-lang:hover { border-color: #fff; }
/* Stakeholder direction 2026-07-24: Language switching is changed to whmcs8-style "expand upwards in place" small
   panel (replacing full-screen modal). Implemented with <details>/<summary>, zero JS; summary reuses
   .ncck-footer-lang appearance. */
.ncck-langpick { position: relative; display: inline-block; }
.ncck-langpick > summary { list-style: none; }
.ncck-langpick > summary::-webkit-details-marker { display: none; }
.ncck-langpick > summary::marker { content: ""; }
.ncck-langpick-caret { font-size: 10px; opacity: 0.75; transition: transform 0.18s ease; }
.ncck-langpick[open] .ncck-langpick-caret { transform: rotate(180deg); }
.ncck-langpick-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 1050;
    min-width: 208px;
    padding: 8px;
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius);
    background: var(--ncck-surface);
    box-shadow: 0 2px 4px rgba(14, 24, 48, 0.05), 0 18px 40px -16px rgba(14, 24, 48, 0.35);
}
.ncck-langpick-group + .ncck-langpick-group {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--ncck-border);
}
.ncck-langpick-cap {
    display: block;
    padding: 4px 10px 6px;
    color: var(--ncck-text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.ncck-langpick-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 0 10px;
    border-radius: var(--ncck-radius-sm);
    color: var(--ncck-text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.ncck-langpick-form { margin: 0; }
button.ncck-langpick-item {
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    line-height: inherit;
    text-align: left;
}
.ncck-langpick-item:hover,
.ncck-langpick-item:focus-visible {
    background: rgba(15, 92, 255, 0.06);
    color: var(--ncck-primary);
    text-decoration: none;
}
.ncck-langpick-item.is-active { color: var(--ncck-primary); font-weight: 700; }
.ncck-langpick-code {
    display: grid;
    place-items: center;
    width: 30px;
    height: 22px;
    border: 1px solid var(--ncck-border);
    border-radius: 4px;
    background: var(--ncck-bg);
    color: var(--ncck-text-muted);
    font-family: var(--ncck-font-mono);
    font-size: 10.5px;
    font-weight: 700;
}
.ncck-langpick-item.is-active .ncck-langpick-code {
    border-color: rgba(15, 92, 255, 0.32);
    background: rgba(15, 92, 255, 0.08);
    color: var(--ncck-primary);
}
.ncck-footer-title {
    margin: 4px 0 14px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ncck-footer-col ul { margin: 0; padding: 0; list-style: none; }
.ncck-footer-col li { margin-bottom: 10px; }
/* Direct font-weight port (2026-07-22 runtime evidence; same consumers as above—see the .ncck-footer-desc note): w8 footer...git */
.ncck-footer-col a {
    color: rgba(255, 255, 255, 0.72);
    font-size: 13.5px;
    text-decoration: none;
    font-weight: var(--ncck-fw-light);
}
.ncck-footer-col a:hover { color: #fff; }
.ncck-footer-bottom {
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.ncck-footer-bottom .ncck-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.ncck-footer-copy {
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12.5px;
}

/* ------------------------------------------- D2.3 locations pages section */

/* photographic page hero — 520-580px desktop (locations-hero spec), photo
   from y=0 behind the transparent header, single flat scrim (no gradients) */
.ncck-pagehero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 560px;
    padding: calc(var(--ncck-toolbar-h) + var(--ncck-nav-h) + 48px) 0 64px;
    background-color: var(--ncck-rail);
    background-size: cover;
    background-position: center;
}
.ncck-pagehero-scrim {
    position: absolute;
    inset: 0;
    background: rgba(4, 10, 24, 0.52);
}
/* route-scoped hero assets (spec: desktop triptych 1920x640, mobile stacked
   three-city 780x960; city detail pages keep their own facility photos) */
.ncck-pagehero--locidx { background-image: url('../assets/img/ncck/photo-locations-hero.webp'); }

/* Stakeholder review, 2026-07-25: use a dedicated image here instead of repeating photo-net.jpg from
   the network page. The replacement is a 1920×1077 dark data-center rack photo by Taylor Vick,
   licensed by Unsplash for commercial use without attribution. */
.ncck-pagehero--about { background-image: url('../assets/img/ncck/photo-about.jpg'); }
/* The /about modifier needs both a background image and the white-text treatment. Without them, the
   .ncck-pagehero base falls back to a plain --ncck-rail panel while the white-text rules remain scoped
   to --locidx/--kr/--us. Mirror the established --locidx behavior instead of adding new tokens. */
/* Full-bleed photo heroes place transparent navigation over the image. A flat rgba(4,10,24,.52)
   overlay leaves bright areas near the top too visible and reduces menu contrast, so the network hero
   uses the same --ncck-grad-hero-scrim token as data-center detail pages (.55 at top to .72 at bottom). */
.ncck-pagehero--net .ncck-pagehero-scrim {
    position: absolute;
    inset: 0;
    background: var(--ncck-grad-hero-scrim);
    pointer-events: none;
}

/* /about uses a separate, deeper treatment because its image is **a screenshot of our own homepage**
   (stakeholder-selected Plan D, 2026-07-25), not a naturally dark facility photo. It has a white background
   and embedded UI: · the usual .55→.72 photo scrim does not suppress the screenshot's dark-blue
   "Mainland China-Optimized" heading, which overlaps our white hero title; · the screenshot includes
   an NCCK navigation row, creating a ghosted double navigation behind the real transparent menu.
   Use a two-layer mask: darken the full image to .82, then add a stronger 0→160px top gradient to mask
   the navigation captured in the screenshot while leaving only the real menu visible. These values
   come from live render measurements, not estimates. */
.ncck-pagehero--about .ncck-pagehero-scrim {
    position: absolute;
    inset: 0;
    background:
        /* ① Central vignette: render this on the full-size scrim. An earlier version placed it on
           .ncck-pagehero-content, which clipped the gradient to the content width and produced visible
           vertical edges on both sides. */
        radial-gradient(ellipse 66% 60% at 50% 46%,
            rgba(4, 10, 24, 0.72) 0%,
            rgba(4, 10, 24, 0.64) 45%,
            rgba(4, 10, 24, 0.26) 78%,
            rgba(4, 10, 24, 0) 100%),
        /* ② Overall overlay: the previous source image contained the full homepage, including its
           navigation and large heading, and required .82/.88 opacity plus a 190px top gradient. The
           replacement crop contains only UI cards, so that treatment would make it nearly black.
           This lighter overlay keeps the cards recognizable as technical texture. */
        linear-gradient(180deg, rgba(4, 10, 24, 0.60), rgba(4, 10, 24, 0.70));
    pointer-events: none;
}

/* A stronger full-image scrim does not solve the title collision: the saturated dark-blue
   "Mainland China-Optimized" text remains visible at .82 and .90 while the image approaches black.
   Give the title area its own translucent backdrop so the white heading stays readable without
   obscuring the surrounding product-page texture. */
@media (max-width: 767.98px) {
    .ncck-pagehero--about .ncck-pagehero-content { padding: 8px 0; }
}
.ncck-pagehero--net .ncck-pagehero-content { position: relative; z-index: 1; }
.ncck-pagehero--about .ncck-pagehero-content { position: relative; z-index: 1; }
.ncck-pagehero--about .ncck-pagehero-title {
    color: #fff;
    font-size: 40px;
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: -1px;
}
.ncck-pagehero--about .ncck-pagehero-subtitle {
    color: rgba(255, 255, 255, 0.86);
    font-size: 20px;
    line-height: 1.667;
    margin-top: 20px;
}
@media (max-width: 767.98px) {
    /* The 560px base height is excessive at 390px and crops the photo to sky; reduce it only enough
       to contain the title. */
    .ncck-pagehero--about { min-height: 380px; }
    .ncck-pagehero--about .ncck-pagehero-title { font-size: 30px; }
    .ncck-pagehero--about .ncck-pagehero-subtitle { font-size: 16px; margin-top: 14px; }
}

.ncck-pagehero--kr { background-image: url('../assets/img/ncck/photo-sel.jpg'); }
.ncck-pagehero--us { background-image: url('../assets/img/ncck/photo-lax.jpg'); }
/* D2.3-R5 (2026-07-22 live review whmcs8 /locations hero section by section, runtime verification of both breakpoints): ...git */
.ncck-pagehero--locidx .ncck-hero-caption {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--ncck-locidx-caption-photo);
}
/* D2.3-R5 (same as live section-by-section review): the font size of title/subtitle is in w8 and both breakpoints (768/1440) are...git */
.ncck-pagehero--locidx .ncck-pagehero-title {
    font-size: 40px;
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: -1px;
    margin-bottom: 24px;
}
.ncck-pagehero--locidx .ncck-pagehero-subtitle {
    font-size: 24px;
    line-height: 1.667;
    margin-top: 32px;
}
/* ②The three heroes are all shared base class min-height:560px clamped down (2026-07-22 live verification step by step): ...git */

.ncck-pagehero--hk {
    background-image: url('../assets/img/ncck/photo-hkg.jpg');
    min-height: 722px
}
/* G2 (w8 audit 2026-07-21): .ncck-pagehero{display:flex} under .ncck-container as ...git */
.ncck-pagehero .ncck-container { position: relative; z-index: 1; width: 100%; }
.ncck-pagehero-content { max-width: 820px; margin: 0 auto; text-align: center; }
.ncck-pagehero-content .ncck-hero-actions { justify-content: center; }
/* M8 Photo hero Frosted eyebrow badge (Batch 5 2026-07-21; w8:4219 Color/Bottom/Edge + w8:4228 ...git */
.ncck-hero-caption--ondark {
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--ncck-caption-cyan);
}
.ncck-pagehero-title {
    margin: 0 0 16px;
    color: #fff;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.15;
}
/* Direct font-weight port(2026-07-22 live verification, H4 grep consumer pages=legal/location-detail/ ...git */
.ncck-pagehero-subtitle {
    margin: 0 0 28px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 17px;
    line-height: 1.6;
    font-weight: var(--ncck-fw-light);
}
/* ②servers hero(2026-07-22 live comparison w8:2114 same light-canvas...git */
.ncck-pagehero--srv .ncck-hero-caption { font-size: 15px; line-height: 1.5; }

.ncck-pagehero--srv .ncck-hero-actions { margin-top: 32px; }
/* servers hero @768 (2026-07-22 runtime verification whmcs8 /servers,-55 segments):padding ...git */
@media (min-width: 768px) and (max-width: 991.98px) {
    .ncck-pagehero--srv .ncck-hero-caption { font-size: 18px; font-weight: 500; line-height: 24px; }
    .ncck-pagehero--srv .ncck-pagehero-title { font-weight: 900; line-height: 56px; }
    .ncck-pagehero--srv .ncck-pagehero-subtitle { font-size: 24px; line-height: 40px; margin-top: 32px; margin-bottom: 32px; }
}

/* photographic hero header state — 2026-07-22 The manager narrowed it down (the stakeholder reported "the default homepage cannot be viewed...git" */
body.ncck-public.ncck-hero-photo .ncck-header { margin-bottom: calc(-1 * (var(--ncck-toolbar-h) + var(--ncck-nav-h) + 1px)); }
body.ncck-public.ncck-hero-photo .ncck-header:not(.is-stuck) { background: transparent; }
body.ncck-public.ncck-hero-photo .ncck-header:not(.is-stuck) .ncck-mainnav {
    background: transparent;
    border-bottom-color: rgba(255, 255, 255, 0.14);
}
body.ncck-public.ncck-hero-photo .ncck-header:not(.is-stuck) .ncck-brand-img {
    filter: brightness(0) invert(1);
}
body.ncck-public.ncck-hero-photo .ncck-header:not(.is-stuck) .ncck-menu-link { color: #fff; }
body.ncck-public.ncck-hero-photo .ncck-header:not(.is-stuck) .ncck-btn--outline {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.55);
}
body.ncck-public.ncck-hero-photo .ncck-header.is-stuck { background: var(--ncck-surface); }
body.ncck-public.ncck-hero-photo .ncck-header.is-stuck .ncck-mainnav { background: var(--ncck-surface); border-bottom-color: var(--ncck-border); }
body.ncck-public.ncck-fullbleed .master-breadcrumb { display: none; }
body.ncck-public.ncck-fullbleed #main-body .container { max-width: none; padding: 0; }
body.ncck-public.ncck-fullbleed #main-body .row { margin: 0; }
body.ncck-public.ncck-fullbleed #main-body .primary-content { padding: 0; }
/* R3-shell: structural full-width branch (header.tpl) — primary-content is now a ...git */
body.ncck-public.ncck-fullbleed #main-body > .primary-content.ncck-fullwidth {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* coming-soon cards (index) */
.ncck-soon { background: var(--ncck-bg); }
/* D2.3-R5(2026-07-22 runtime verification w8 theme-custom.css same paragraph .feature.is-boxed ...git */
.ncck-soon .ncck-fcard { padding: 28px 26px; }
.nsub {
    display: block;
    margin: 2px 0 10px;
    color: var(--ncck-text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 11.5px;
    letter-spacing: 0.06em;
}
.nbadge {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 14px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(15, 92, 255, 0.08);
    color: var(--ncck-primary);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
}
.ncck-fcard-link {
    margin-top: auto;
    color: var(--ncck-primary);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}
.ncck-fcard-link .fa-arrow-right { font-size: 10px; }

/* detail overview cards: stat tiles (pale blue, live parity) + cert chips */
.nstats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
}
.nstat {
    padding: 10px 12px;
    border-radius: var(--ncck-radius-sm);
    background: rgba(15, 92, 255, 0.06);
    text-align: center;
}
.nstat b {
    display: block;
    color: var(--ncck-primary);
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.nstat i {
    display: block;
    margin-top: 2px;
    color: var(--ncck-text-muted);
    font-size: 11.5px;
    font-style: normal;
}
.nchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.nchips i {
    padding: 3px 9px;
    border: 1px solid var(--ncck-border);
    border-radius: 999px;
    color: var(--ncck-text-muted);
    font-size: 10.5px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.04em;
}

/* facility story split */
.ncck-dcstory { background: var(--ncck-bg); }
/* OP-2 hk residual -38 root cause(2026-07-22 build, whmcs8 live dual station getComputedStyle ...git */
.ncck-dcstory .ncn-split {
    padding: 28px 26px;
    background: var(--ncck-surface);
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius-lg);
}
/* Secondary root cause (.nsub/.ncn-grid i/span lacks explicit line-height) via vertical-profile runtime verification ...git */
/* G12 (w8:4160 curl review): list/gap/limited width alignment - shared network.tpl + location-detail.tpl */
.ncn-split {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
    gap: 44px;
    align-items: start;
    max-width: 1160px;
    margin: 0 auto;
}
/* Detail refinement §11 (design correctness, not pure polish, so incorporated into the base layer
   permanent; from the network refinement draft): The left description block .ncn-copy was originally
   unframed text, the right .ncn-stat already has a frame → the left block is filled with the same card
   frame, and the two cards have unified hover feedback. */
.ncn-copy {
    padding: 26px;
    background: var(--ncck-surface);
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius);
    box-shadow: 0 1px 2px rgba(14, 24, 48, 0.04);
}
.ncn-copy,
.ncn-stat {
    transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.2s ease;
}
.ncn-copy:hover,
.ncn-stat:hover {
    transform: translateY(-3px);
    border-color: rgba(15, 92, 255, 0.32);
    box-shadow: 0 2px 4px rgba(14, 24, 48, 0.05), 0 18px 36px -18px rgba(15, 92, 255, 0.24);
}
/* Align the top of the text in the left card with the title of the right card (4px visual misalignment after adding the frame) */
.ncn-copy > :first-child { margin-top: 0; }

.ncn-copy .nsub { margin-bottom: 14px; }
/* Direct font-weight port (2026-07-22 live verification, H4 grep consumer pages=network/location-detail
   two pages): w8 .ncn-copy p the same .feature-desc cascade, live constant 300; whmcs10 fell back to
   400. */
.ncn-copy p {
    margin: 0 0 18px;
    color: var(--ncck-text);
    font-size: 15px;
    line-height: 1.7;
    font-weight: var(--ncck-fw-light);
}
.ncn-stat {
    padding: 26px;
    background: var(--ncck-surface);
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius);
}
.ncn-stat > b { display: block; color: var(--ncck-text); font-size: 15px; font-weight: 700; }
/* Direct font-weight port(2026-07-22 live verification, H4 grep consumer pages=network/location-detail two pages, ...git */
.ncn-stat > p { margin: 6px 0 18px; color: var(--ncck-text-muted); font-size: 13px; font-weight: var(--ncck-fw-light); }
.ncn-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.ncn-grid i {
    display: block;
    color: var(--ncck-primary);
    font-size: 17px;
    font-weight: 800;
    font-style: normal;
    font-variant-numeric: tabular-nums;
}
.ncn-grid span { display: block; margin-top: 2px; color: var(--ncck-text-muted); font-size: 11.5px; }

/* npeer marquee — original rich component on a dark panel (live parity),
   CSS-only motion */
.ncck-peers { background: var(--ncck-surface); }
.npeer {
    outline: none;
    padding: 48px 40px;
    border-radius: 16px;
    background: var(--ncck-rail);
}
.npeer__header { max-width: 760px; margin: 0 auto 36px; text-align: center; }
/* [D9 build 2026-07-22] childSamples retest (raw-peersHeader.json, hk @375): ...git */
.npeer__eyebrow {
    display: inline-block;
    margin: 0 0 12px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    color: #bcd6ff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.npeer__title { margin: 0 0 12px; color: #fff; font-size: 32px; font-weight: 800; }
/* [D9 build 2026-07-22] w8 runtime verification summary fs 15px (test before 16px) - both...git */
.npeer__summary { margin: 0; color: rgba(255, 255, 255, 0.75); font-size: 15px; line-height: 1.65; }
/* M11 peering lane structure parity (batch 5 2026-07-21; ground truth w8:5340-5350). npeer only ...git */
.npeer__lanes { margin-top: 40px; border-bottom: 1px solid rgba(148, 163, 184, 0.16); }
.npeer__lane {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    min-height: 92px;
    align-items: center;
    margin-bottom: 0;    /* Replace old 22px vertical stack (w8:5341 no margin) */
    border-top: 1px solid rgba(148, 163, 184, 0.16);
}
/* Risk 9 was removed (2026-07-21, the review followed the
   stakeholder's "strict 1:1" rule): follow w8:5342 ground truth 13px/#6ea8ff/ls .06em (the original NCCK
   11px/#bcd6ff/.08em is superseded) */
.npeer__lane-title {
    margin: 0;
    padding-right: 24px;
    color: #6ea8ff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
/* Fade mask at both ends (w8:5343; w8 endpoint is written as #000, here rgba has the same value while preserving the no-literal-hex rule) */
.npeer__viewport {
    min-width: 0;
    overflow: hidden;
    border-radius: 0;
    background: transparent;
    -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 1) 6%, rgba(0, 0, 0, 1) 94%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 1) 6%, rgba(0, 0, 0, 1) 94%, transparent 100%);
}
.npeer__track { display: flex; width: max-content; animation: npeer-scroll 36s linear infinite; }
.npeer__lane--reverse .npeer__track { animation-direction: reverse; }
/* w8:5346 set gap(34px) + trailing set gap 42px, so the -50% translated loop is seamless */
.npeer__set { display: flex; flex: none; align-items: center; gap: 34px; min-width: max-content; margin: 0; padding: 0 42px 0 0; list-style: none; }
/* w8:5347 fixed 148×46, no dividing line (matched with 92px lane height) */
.npeer__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 148px;
    height: 46px;
    flex: 0 0 148px;
    min-width: 0;
    padding: 0;
}
.npeer__text { color: #fff; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
/* Lane semantic variant (location-detail.tpl batch 5, one line: lane1=--route, lane2/3=--identity). ...git */
.npeer__lane--route .npeer__text { font-family: var(--ncck-font-mono); font-size: 19px; }
.npeer__lane--identity .npeer__text { font-size: 17px; font-weight: 700; }
.npeer__item--logo img {
    width: auto;
    height: auto;
    max-width: 110px;
    max-height: 26px;
    object-fit: contain;
    /* vendor marks render white on the dark panel (deterministic filter) */
    filter: brightness(0) invert(1);
}
@keyframes npeer-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.npeer:is(:hover, :focus-visible) .npeer__track { animation-play-state: paused; }

/* L5 Marquee small-screen fallback (batch 5 2026-07-21; ground truth w8:5412-5439 mobile block): lane to
   block level, stop track animation, render each item set as a two-column grid, hide the duplicated item set
   (aria-hidden collection no longer takes up space). */
@media (max-width: 767.98px) {
    .npeer__lane { display: block; min-height: 0; padding: 22px 0; }
    .npeer__lane-title { margin-bottom: 14px; padding: 0; }
    .npeer__viewport { overflow: visible; -webkit-mask-image: none; mask-image: none; }
    .npeer__track { display: block; width: 100%; animation: none !important; transform: none !important; }
    .npeer__set { display: grid; width: 100%; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; }
    .npeer__set--duplicate { display: none; }
    .npeer__item { width: 100%; height: 44px; min-width: 0; flex-basis: auto; padding: 0 4px; }
    .npeer__text { font-size: 15px; white-space: normal; }
    /* The identity lane desktop 17px (0,2,0) overrides the earlier 15px (0,1,0) - supplement the same
   weight rule to align w8:5437 (reduce identity to 15px; route 19px is maintained by w8:5350 high
   weight, leave unchanged) */
    .npeer__lane--identity .npeer__text { font-size: 15px; }
}

/* 404 body */
.ncck-notfound { padding-top: calc(var(--ncck-toolbar-h) + var(--ncck-nav-h)); }
.ncck-notfound-actions { text-align: center; }

/* ---------------------------------------------------- Dev License fallback ...git */
body.ncck-public:is(.ncck-fullbleed, .page-homepage):has(#main-body div[style*="ffffd2"]) .ncck-header {
    margin-bottom: 0;
    background: var(--ncck-surface);
}
body.ncck-public:is(.ncck-fullbleed, .page-homepage):has(#main-body div[style*="ffffd2"]) .ncck-header .ncck-mainnav {
    background: var(--ncck-surface);
    border-bottom-color: var(--ncck-border);
}
body.ncck-public:is(.ncck-fullbleed, .page-homepage):has(#main-body div[style*="ffffd2"]) .ncck-header .ncck-menu-link {
    color: var(--ncck-text);
}
body.ncck-public:is(.ncck-fullbleed, .page-homepage):has(#main-body div[style*="ffffd2"]) .ncck-header .ncck-menu-item:hover > .ncck-menu-link,
body.ncck-public:is(.ncck-fullbleed, .page-homepage):has(#main-body div[style*="ffffd2"]) .ncck-header .ncck-menu-item.open > .ncck-menu-link {
    color: var(--ncck-primary);
}
body.ncck-public:is(.ncck-fullbleed, .page-homepage):has(#main-body div[style*="ffffd2"]) .ncck-header .ncck-brand-img {
    filter: none;
}
body.ncck-public:is(.ncck-fullbleed, .page-homepage):has(#main-body div[style*="ffffd2"]) .ncck-header .ncck-btn--outline {
    color: var(--ncck-text);
    background: var(--ncck-surface);
    border-color: var(--ncck-border);
}
/* heroes no longer sit under the header in banner mode — drop the header-high
   top padding they normally reserve for the overlay */
/* G2 (w8 audit 2026-07-21): Previously, the additional min-height was 480px, compared with the base class 560px (:1162) ...git */
body.ncck-public.ncck-fullbleed:has(#main-body div[style*="ffffd2"]) .ncck-pagehero {
    padding-top: 56px;
}
body.ncck-public.page-homepage:has(#main-body div[style*="ffffd2"]) .ncck-hero {
    padding-top: 88px;
}

/* ------------------------------------------------------------- responsive */

/* H4 (2026-07-22 live forensics, w8 source: vars-minified.css --layout-container-gutter): ...git */
@media (max-width: 1199px) {
    .ncck-nav-drawer { margin-left: 32px; }
    .ncck-menu { gap: 18px; }
    .ncck-nav-actions { gap: 8px; margin-left: 10px; }
    .ncck-nav-actions .ncck-btn { padding: 0 12px; }
    .ncck-hero-title { font-size: 40px; }
}

@media (max-width: 479px) {
    body.ncck-public .ncck-container { padding: 0 24px; }
}

@media (max-width: 991px) {
    /* single 56px header row: left burger + centered logo + cart (spec §2 mobile) */
    .ncck-utilbar { display: none; }
    .ncck-mainnav .ncck-container {
        height: 56px;
        position: relative;
        justify-content: space-between;
    }
    .ncck-header { top: 0; }

    /* Real × close button inside the drawer (2026-07-26). Preserve all three measured constraints:
       ① z-index is required because the later `.ncck-menu-item--mega,
          .ncck-menu-item--simple { position:relative; }` rules otherwise stack menu items above the
          button; elementFromPoint would still hit Products instead of Close.
       ② It must be sticky, not merely absolute. #ncckNavDrawer is overflow-y:auto; after Products is
          expanded in a 360×640 viewport, scrolling can move an absolute button to rect.top=-158 and
          completely out of view.
       ③ The 44×44 hit area meets the minimum touch-target size. */
    .ncck-drawer-close {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin: 0 0 4px auto;
        padding: 0;
        border: 0;
        border-radius: var(--ncck-radius-sm);
        background: var(--ncck-surface);
        color: var(--ncck-text);
        font-size: 18px;
        cursor: pointer;
    }
    .ncck-drawer-close:hover { background: var(--ncck-surface-2, rgba(15, 92, 255, .06)); }
    .ncck-drawer-close:focus-visible { outline: 2px solid var(--ncck-primary); outline-offset: 2px; }
    .ncck-brand {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        flex: 0 0 auto;
        width: 104px;
        height: 46px;
        justify-content: center;
    }
    .ncck-brand-img { max-width: 104px; max-height: 22px; }
    .ncck-nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 0;
        background: none;
        color: var(--ncck-text);
        font-size: 18px;
        cursor: pointer;
    }
    .ncck-mobile-tools {
        display: flex;
        align-items: center;
        gap: 2px;
        margin-left: auto;
    }
    .ncck-mobile-lang > summary {
        width: 50px;
        gap: 4px;
        color: var(--ncck-primary);
    }
    .ncck-mobile-cart {
        color: var(--ncck-text);
        font-size: 17px;
    }
    .ncck-mobile-cart.is-active {
        background: rgba(15, 92, 255, .07);
        color: var(--ncck-primary);
    }
    .ncck-mobile-cart .ncck-cart-count {
        position: absolute;
        top: 4px;
        right: 2px;
    }
    .ncck-mobile-lang .ncck-langpick-menu {
        top: calc(100% + 6px);
        right: 0;
        bottom: auto;
    }
    /* drawer: left slide-out, fully off-screen when closed */
    .ncck-nav-drawer {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(320px, 86vw);
        height: auto;
        margin: 0;
        padding: 20px 20px 32px;
        background: var(--ncck-surface);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(-102%);
        transition: transform 200ms ease-out;
        box-shadow: 0 0 40px rgba(2, 8, 23, 0.25);
        z-index: 1060;
    }
    body.ncck-nav-open .ncck-nav-drawer { transform: translateX(0); }
    body.ncck-nav-open { overflow: hidden; }
    .ncck-drawer-scrim {
        position: fixed;
        inset: 0;
        background: rgba(2, 8, 23, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 200ms ease-out;
        z-index: 1050;
    }
    body.ncck-nav-open .ncck-drawer-scrim { opacity: 1; pointer-events: auto; }

    .ncck-menu {
        display: block;
        height: auto;
        margin: 0;
    }
    .ncck-menu-item {
        height: auto;
        border-bottom: 1px solid var(--ncck-border);
    }
    .ncck-menu-item--mega,
    .ncck-menu-item--simple { position: relative; }
    .ncck-menu-link {
        width: 100%;
        justify-content: space-between;
        height: auto;
        min-height: 48px;
        font-size: 15px;
    }
    .ncck-menu-link::after { display: none; }

    /* dropdowns become in-flow accordions inside the drawer */
    .ncck-dd,
    .ncck-dd--products,
    .ncck-dd--locations,
    .ncck-dd--support {
        position: static;
        width: auto;
        min-width: 0;
        margin: 0 0 12px;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        transform: none;
    }
    .ncck-dd-head { display: none; }
    .ncck-pgrid { grid-template-columns: 1fr; }
    .ncck-pcard { padding: 12px 0; }
    .ncck-pcard:nth-child(even) { border-left: 0; border-radius: 0; }
    .ncck-pcard:nth-child(n+2) { border-top: 1px solid var(--ncck-border); }
    .ncck-pdesc { min-height: 0; }
    .ncck-locrow {
        grid-template-columns: 72px minmax(0, 1fr);
        column-gap: 12px;
        padding: 12px 0;
    }
    .ncck-loccover { width: 72px; min-height: 56px; }
    .ncck-locdesc { grid-column: 2; }
    .ncck-locstats { grid-column: 2; grid-row: 3; }
    .ncck-locmore { display: none; }
    .ncck-locsoon { padding: 12px 0; }
    .ncck-dd-list > li > a { padding: 10px 0; }

    .ncck-nav-actions {
        display: flex;
        gap: 10px;
        margin: 16px 0 0;
    }
    .ncck-nav-actions .ncck-btn {
        flex: 1 1 0;
        min-height: 44px;
    }

    /* homepage responsive */
    body.ncck-public.page-homepage .ncck-header { margin-bottom: -57px; }
    /* hero @768 (2026-07-22 runtime verification whmcs8 homepage hero, replacing P7 locally invented responsive): ...git */
    .ncck-hero { padding: calc(56px + 40px) 0 72px; }
    .ncck-hero-grid { grid-template-columns: 1fr; gap: 48px; }
    .ncck-hero-content { min-height: 0; padding: 100px 72px 100px 0; text-align: left; }
    /* H4 correction: .ncck-hero-caption is legal/product-detail/servers three pages pagehero ...git */
    .ncck-hero .ncck-hero-caption { font-size: 18px; font-weight: 500; line-height: 24px; }
    .ncck-hero-title { font-size: 36px; margin-bottom: 24px; }
    .ncck-hero-subtitle { margin-bottom: 32px; }
    /* Graphic column (2026-07-22 secondary drill-down, live review whmcs8 grid-template-rows): ...git */
    .ncck-hero-graphic { padding: 100px 0; }
    /* partners @768/@375 (runtime verification has the same value):w8 This slot npcap/nprow runtime verification wrapping width ...git */
    .ncck-partners .nprow { max-width: 230px; }
    .ncck-section { padding: 64px 0; }
    /* D9 runtime verification segment by segment (2026-07-22, vertical-profile --viewport 768, yellow bar removed): ...git */
    .ncck-hardware,
    .ncck-loccards,
    .ncck-lines,
    .ncck-netlines,
    .ncck-steps,
    .ncck-dcdetail,
    .ncck-dcstory,
    .ncck-dualdef,
    .ncck-tips { padding: 88px 0; }
    .ncck-peers { padding: 48px 0; }
    .ncck-netpeers { padding: 88px 0; }
    /* w8:2637 The first section after hero on the network page is still padTop:0 (consistent with the 800
   desktop), but ≤991.98 generic .ncck-section override (above) and shorthand override will flush top
   back to 64/88 - here restate the rule after the generic override, and the route-specific rule of top:0 is maintained
   without regression. */
    .ncck-cnroutes { padding-top: 0; padding-bottom: 88px; }
    /* G1:cardgrid--3 The breakpoint of column 2 has been moved up to 1199px (independent @media above),
   so it is not duplicated here; the breakpoint alignment of statgrid 4→2 w8 col-xl-3(992) remains
   unchanged. */
    .ncck-statgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ncck-sec-title { font-size: 26px; }
    /* Batch D G16: The page-scope coverage (body.page-homepage/.ncck-soon) has a higher specificity than
   this rule and will override the responsive abbreviation - fill in the equivalent specificity
   rules in the same breakpoint and maintain the existing scaling without changing values (the value itself
   does not change, only the specificity is filled in) */
    body.ncck-public.page-homepage .ncck-sec-title,
    .ncck-soon .ncck-sec-title { font-size: 26px; }
    .ncck-statband { padding: 64px 0; }
    .ncck-cta { padding: 56px 0; }
    /* [D9 build 2026-07-22] childSamples retest (raw2-ctaCard.json):w8 cta-card ...git */

    /* D2.3 locations mobile: stacked hero, single-column split, 56px header offset */
    body.ncck-public.ncck-fullbleed .ncck-header { margin-bottom: -57px; }
    .ncck-pagehero {
        min-height: 440px;
        padding: calc(56px + 40px) 0 48px;
    }
    /* banner-mode fallback on mobile: header back in flow, hero padding drops */
    body.ncck-public:is(.ncck-fullbleed, .page-homepage):has(#main-body div[style*="ffffd2"]) .ncck-header { margin-bottom: 0; }
    body.ncck-public.ncck-fullbleed:has(#main-body div[style*="ffffd2"]) .ncck-pagehero { padding-top: 40px; }
    body.ncck-public.page-homepage:has(#main-body div[style*="ffffd2"]) .ncck-hero { padding-top: 48px; }
    body.ncck-public.ncck-fullbleed:has(#main-body div[style*="ffffd2"]) .ncck-pagehero--locidx { padding-top: 0; }

    /* [2026-07-22 OP-2 direct port SUPERSEDED×2] The original "Three Cities Stacked Big Picture" mobile variant system D2 locally invented...git */
    
    /* D2.3-R5(2026-07-22 runtime verification w8 /locations <992 ground truth, overturning "every breakpoint dark photo is not...git */
    .ncck-pagehero--locidx {
    min-height: 0;
        padding: 72px 0 56px;
    background: var(--ncck-grad-pagehero-light)
}
    .ncck-pagehero--locidx .ncck-pagehero-scrim { display: none; }
    .ncck-pagehero--locidx .ncck-pagehero-title { color: var(--ncck-locidx-title-ink); }
    .ncck-pagehero--locidx .ncck-pagehero-subtitle { color: var(--ncck-hero-sub-ink); }
    .ncck-pagehero--locidx .ncck-hero-caption { color: var(--ncck-grad-blue); }
    /* G-fix (2026-07-22 real regression discovered by manual review of triple comparison chart): If the data released by the CMS contains the second...git */
    .ncck-pagehero--locidx .ncck-btn--ondark-outline,
    .ncck-pagehero--locidx .ncck-btn--ondark-outline:hover {
        color: var(--ncck-text);
        background: var(--ncck-surface);
        border-color: var(--ncck-border);
    }
    .ncck-pagehero--locidx .ncck-btn--ondark-outline:hover {
        color: var(--ncck-primary);
        border-color: var(--ncck-primary);
    }
    .ncck-pagehero-title { font-size: 30px; }
    /* G37 (w8:4169 ≤991.98): The tablet breakpoint gap is not reset with the G12 44px base value, and is reset to 26px */
    .ncn-split { grid-template-columns: 1fr; gap: 26px; }
    .npeer__title { font-size: 26px; }
    .npeer__item { min-width: 120px; padding: 0 18px; }

    /* footer stacks */
    .ncck-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 20px;
        padding: 36px 0 28px;
    }
    .ncck-footer-brand { grid-column: 1 / -1; }
}

/* OP-2 (2026-07-22 build, locations/hong-kong live verification): w8 dcstory outer layer...git */
@media (min-width: 768px) and (max-width: 991.98px) {
    .ncck-dcstory .ncn-split { max-width: 328px; margin: 0 auto; }
}

/* G1 (w8 audit 2026-07-21): Card area/data band 2→1 column break points align to,
   Bootstrap md threshold 768 (w8 col-*-md-6 are all <768, collapse to one column); previously, cardgrid
   was mistakenly set to 576, statgrid was mistakenly set to 480, and the two independent breakpoints
   were consolidated into the same 767.98 block. */
@media (max-width: 767.98px) {
    .ncck-cardgrid--2, .ncck-cardgrid--3 { grid-template-columns: 1fr; }
    
    /* H4 (2026-07-22 runtime evidence, stakeholder direction ③ 375 retest regression correction): 32px base value gap above...git */
    .ncck-statgrid {
    grid-template-columns: 1fr;
    gap: 24px
}
}

/* P7: Tablet→Mobile second responsive step (adding the missing intermediate state from the single
   991 breakpoint is missing). ≤991: cardgrid--3→2 columns (moved up to 1199, see independent @media
   above)/--2 maintain 2 columns/statgrid→2 columns (991 blocks above); ≤575.98: title/spacing lowered
   twice (card grid breakpoints have been merged to 767.98, see new blocks above). */
@media (max-width: 575.98px) {
    /* hero @375(2026-07-22 runtime verification, whmcs8 375 and 768 have the same title font size of 36px—— ...git */
    .ncck-hero-title { font-size: 36px; }
    .ncck-hero-content { padding: 72px 0; text-align: center; }
    /* H4 correction: .ncck-hero-caption/.ncck-hero-actions is legal/product-detail/ ...git */
    .ncck-hero .ncck-hero-caption { font-size: 16px; line-height: 22px; }
    .ncck-hero-subtitle { margin-bottom: 16px; }
    .ncck-hero .ncck-hero-actions { flex-direction: column; align-items: center; }
    /* Graphic column @375 (runtime verification, asymmetric, different from 100/100 of 768): w8
   banner-background in 375 only padding-top:72, bottom:0. */
    .ncck-hero-graphic { padding: 72px 0 0; }
    /* loccards title @375(runtime verification 32px, non-universal 23px - same as 768-991.98 tier 40px...git */
    body.ncck-public.page-homepage .ncck-loccards .ncck-sec-title { font-size: 32px; line-height: 1.25; }
    .ncck-sec-title { font-size: 23px; }
    /* Batch D G16: Same as above, complete the 575.98 breakpoint and other specificity coverage */
    body.ncck-public.page-homepage .ncck-sec-title,
    .ncck-soon .ncck-sec-title { font-size: 23px; }
    .ncck-section { padding: 48px 0; }
    .ncck-cta-title { font-size: 30px; }
    /* D9 segment-by-segment runtime verification (2026-07-22, --viewport 375): Same as ≤991.98, w8 375 ground truth...git */
    .ncck-hardware,
    .ncck-loccards,
    .ncck-lines,
    .ncck-netlines,
    .ncck-steps,
    .ncck-dcdetail,
    .ncck-dcstory,
    .ncck-dualdef,
    .ncck-tips { padding: 88px 0; }
    .ncck-peers { padding: 36px 0; }
    /* D2.3-R5 (2026-07-22 live @375 review, overturning the "768 value is directly extrapolated to 375" hypothesis): w8 ...git */
    .ncck-pagehero--locidx .ncck-hero-caption { font-size: 16px; }
    .ncck-pagehero--locidx .ncck-pagehero-title { line-height: 1.2; }
    .ncck-pagehero--locidx .ncck-pagehero-subtitle { font-size: 21px; line-height: 1.905; }
    .ncck-netpeers { padding: 88px 0; }
    .ncck-cnroutes { padding-top: 0; padding-bottom: 88px; }
    /* [D9 build 2026-07-22] hk peers header residual (+79 @375) second root cause:.npeer ...git */
    .npeer { padding: 48px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .ncck-menu-link::after,
    .ncck-caret,
    .ncck-nav-drawer,
    .ncck-drawer-scrim { transition: none; }
    /* L5 completion (batch 5 2026-07-21; w8:5432-5438): The original block is only incomplete with animation:none—— ...git */
    .npeer__viewport { overflow: visible; -webkit-mask-image: none; mask-image: none; }
    .npeer__track { display: block; width: 100%; animation: none !important; transform: none !important; }
    .npeer__set.npeer__set--duplicate { display: none; }
    .np-spark i { animation: none; }
}
/* D9 (2026-07-22 vertical-profile profile, hk peers 375 residual +439): top...git */
@media (prefers-reduced-motion: reduce) and (min-width: 768px) {
    .npeer__set { display: grid; width: 100%; min-width: 0; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 14px; padding: 0; }
    .npeer__item { width: 100%; min-width: 0; flex-basis: auto; }
}

/* ------------------------------------------ D2.4 Auth shell + native 404 (B3) ...git */

/* -- compact chrome: brand-only header, no breadcrumb ---------------------- */
/* The stakeholder decided (2026-07-24): login/register/password-reset is consistent with the 201 auth design
   package = complete site framework (complete utilbar + navigation + four-column footer), so it is
   removed from the compressed :is list; only 2FA/switch/invite is still a compact shell.
   Breadcrumb remains hidden for all auth (design package has no breadcrumb). */
body.ncck-public:is(.page-two-factor-challenge, .page-two-factor-new-backup-code, .page-user-switch-account, .page-user-invite-accept) .ncck-header {
    top: 0; /* utility strip is hidden below, keep the nav row fully sticky */
}
body.ncck-public:is(.page-two-factor-challenge, .page-two-factor-new-backup-code, .page-user-switch-account, .page-user-invite-accept) .ncck-utilbar,
body.ncck-public:is(.page-two-factor-challenge, .page-two-factor-new-backup-code, .page-user-switch-account, .page-user-invite-accept) .ncck-nav-toggle,
body.ncck-public:is(.page-two-factor-challenge, .page-two-factor-new-backup-code, .page-user-switch-account, .page-user-invite-accept) .ncck-mobile-cart,
body.ncck-public:is(.page-two-factor-challenge, .page-two-factor-new-backup-code, .page-user-switch-account, .page-user-invite-accept) .ncck-nav-drawer,
body.ncck-public:is(.page-two-factor-challenge, .page-two-factor-new-backup-code, .page-user-switch-account, .page-user-invite-accept) .ncck-drawer-scrim {
    display: none;
}
/* Breadcrumb remains hidden for all auth pages (including login/register/password-reset) - design package has no breadcrumb */
body.ncck-public:is(.page-login, .page-clientregister, .page-password-reset-container, .page-two-factor-challenge, .page-two-factor-new-backup-code, .page-user-switch-account, .page-user-invite-accept) .master-breadcrumb {
    display: none;
}
body.ncck-public:is(.page-two-factor-challenge, .page-two-factor-new-backup-code, .page-user-switch-account, .page-user-invite-accept) .ncck-mainnav .ncck-container {
    justify-content: center;
}

/* -- compact footer (2FA/switch/invite only): marketing columns off, copyright bar stays -- */
body.ncck-public:is(.page-two-factor-challenge, .page-two-factor-new-backup-code, .page-user-switch-account, .page-user-invite-accept) .ncck-footer-grid,
body.ncck-public:is(.page-two-factor-challenge, .page-two-factor-new-backup-code, .page-user-switch-account, .page-user-invite-accept) .ncck-footer-bottom .ncck-footer-lang {
    display: none;
}

/* -- auth canvas ----------------------------------------------------------- */
body.ncck-public:is(.page-login, .page-clientregister, .page-password-reset-container, .page-two-factor-challenge, .page-two-factor-new-backup-code, .page-user-switch-account, .page-user-invite-accept) #main-body {
    background: var(--ncck-bg);
    padding: 40px 0 72px;
}

/* -- auth column + card ---------------------------------------------------- */
.ncck-auth {
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
}
.ncck-auth--register { max-width: 860px; }
.ncck-auth .card {
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius);
    box-shadow: 0 12px 32px rgba(7, 27, 66, 0.06);
}
.ncck-auth .card-footer {
    background: var(--ncck-bg);
    border-top: 1px solid var(--ncck-border);
    border-radius: 0 0 var(--ncck-radius) var(--ncck-radius);
}
.ncck-auth .card-title,
.ncck-auth .h3 {
    color: var(--ncck-text);
    font-family: var(--ncck-font);
}

/* -- pwreset card top icon badge in place (201 design package password-reset-request-1440)-------------
   The shape itself [not defined here]: 56 / radius 14 / glyph 26 / 8% light primary-blue background
   is provided by the W0 IconTile primitive .ncck-ico.ncck-ico--lg, and the design draft
   src/auth-shell.css .ncck-auth-badge--brand has the same values. This block only
   adds only the two positioning rules that the primitive can't manage. The scope is deliberately closed
   in .ncck-auth--pwreset, and .ncck-auth is not applied to the full: Unlike the sibling
   .ncck-auth--invite (user-invite-accept.tpl:78/187), which puts .ncck-ico--lg in the <h2> of
   text-center and is centered by the inline flow. Changing the display in the global scope will flip
   it to left alignment. Dual-shell exception: .ncck-auth* styles exist only in
   public.css; the password retrieval page login state goes to ncckClientShell, container.tpl. That one
   only renders the noPasswordResetWhenLoggedIn alert and does not include this family step template at
   all. Therefore, the icon badge can only appear in the public shell and does not need to be mirrored to
   ncck-client.css. ------------------------------------------------------------------ */
.ncck-auth--pwreset .ncck-ico--lg {
    display: flex;       /* Changed from inline-flex to block level: Eliminate the line-height gap left by the inline baseline below the icon */
    margin: 0 0 20px;    /* Design draft badge → title spacing */
}

/* The resend row in the sent state reuses the .ncck-auth-switch (question + link) of the login
   page, but the login footer is designed to be centered; this line in the design draft
   password-reset-sent is a left-aligned body text. Only the alignment and spacing are corrected in the
   scope of this page, and the centered form of login is not changed. */
.ncck-auth--pwreset .ncck-auth-switch {
    margin: 16px 0 20px;
    text-align: left;
}

/* -- form controls (native markup, skinned) -------------------------------- */
.ncck-auth .form-control,
.ncck-auth .field,
.ncck-auth .input-group-text {
    border-color: var(--ncck-border);
    border-radius: var(--ncck-radius-sm);
    font-family: var(--ncck-font);
}
.ncck-auth .form-control:hover,
.ncck-auth .field:hover {
    border-color: var(--ncck-text-muted);
}
.ncck-auth .form-control:focus,
.ncck-auth .form-control:focus-visible,
.ncck-auth .field:focus,
.ncck-auth .field:focus-visible {
    border-color: var(--ncck-primary);
    box-shadow: 0 0 0 3px rgba(15, 92, 255, 0.15);
    outline: none;
}

/* -- native bootstrap buttons inside the auth card ------------------------- */
.ncck-auth .btn-primary {
    background: var(--ncck-primary);
    border-color: var(--ncck-primary);
}
.ncck-auth .btn-primary:hover,
.ncck-auth .btn-primary:focus {
    background: var(--ncck-primary-hover);
    border-color: var(--ncck-primary-hover);
}
.ncck-auth .btn-primary:focus,
.ncck-auth .btn-primary:focus-visible {
    box-shadow: 0 0 0 3px rgba(15, 92, 255, 0.25);
    outline: none;
}
.ncck-auth .btn-primary:active {
    background: var(--ncck-rail);
    border-color: var(--ncck-rail);
}
.ncck-auth .btn-default:hover,
.ncck-auth .btn-default:focus {
    color: var(--ncck-primary);
    border-color: var(--ncck-primary);
}
.ncck-auth .btn-default:focus-visible {
    outline: 2px solid var(--ncck-primary);
    outline-offset: 2px;
}
.ncck-auth .btn-default:active {
    color: var(--ncck-primary-hover);
    border-color: var(--ncck-primary-hover);
}

/* -- plain links inside the auth card -------------------------------------- ...git */
.ncck-auth a:not(.btn):hover,
.ncck-auth a:not(.btn):focus {
    color: var(--ncck-primary-hover);
    text-decoration: underline;
}
.ncck-auth a:not(.btn):focus-visible {
    outline: 2px solid var(--ncck-primary);
    outline-offset: 2px;
    border-radius: 2px;
}
.ncck-auth a:not(.btn):active { color: var(--ncck-rail); }

/* -- meta bar: back-home + two-item EN/ZH language entry ------------------- */
.ncck-auth-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    max-width: 540px;
    margin: 18px auto 0;
    font-size: 13.5px;
}
.ncck-auth-meta a {
    display: inline-block;
    padding: 4px 2px;
    color: var(--ncck-text-muted);
    text-decoration: none;
}
.ncck-auth-meta a:hover,
.ncck-auth-meta a:focus {
    color: var(--ncck-primary);
    text-decoration: underline;
}
.ncck-auth-meta a:focus-visible {
    outline: 2px solid var(--ncck-primary);
    outline-offset: 2px;
    border-radius: 2px;
}
.ncck-auth-meta a:active { color: var(--ncck-primary-hover); }
.ncck-auth-lang {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ncck-auth-lang-sep { color: var(--ncck-border); }
.ncck-auth-lang a.is-active {
    color: var(--ncck-text);
    font-weight: 600;
}

/* -- card-interior: design account-switch divider + link (src/login.html /
      register.html card foot) + clientregister native order-sidebar collapsed so
      the form centers full-width. Chrome/compaction shell above is untouched;
      header.tpl grid is a locked shell file, so its sidebar column is neutralised
      here at the card layer only. ------------------------------------------- */
.ncck-auth-divider { position: relative; margin: 24px 0 18px; text-align: center; }
.ncck-auth-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--ncck-border);
}
.ncck-auth-divider span {
    position: relative;
    padding: 0 12px;
    background: var(--ncck-surface);
    font-size: 12.5px;
    color: var(--ncck-text-muted);
}
/* register foot sits on the page canvas (--ncck-bg), not inside a white card */
.ncck-auth--register .ncck-auth-divider span { background: var(--ncck-bg); }
.ncck-auth-switch { margin: 0; text-align: center; font-size: 13.5px; color: var(--ncck-text-muted); }
.ncck-auth-switch a { color: var(--ncck-primary); font-weight: 700; text-decoration: none; }
/* clientregister: hide the native primary/secondary order sidebar column and let
   the form span the row (header.tpl renders col-lg-4 + col-lg-8 only when a
   sidebar has children; without children primary-content is col-12 already, so
   the width override is a harmless no-op there) */
body.ncck-public.page-clientregister #main-body .row > .col-lg-4.col-xl-3 { display: none; }
body.ncck-public.page-clientregister #main-body .row > .primary-content { flex: 0 0 100%; max-width: 100%; }

/* -- native 404 body (.ncck-nf404 — distinct from the addon's
      defence-in-depth .ncck-notfound page) --------------------------------- */
.ncck-nf404 {
    padding: 104px 0 96px;
    text-align: center;
}
.ncck-nf404-code {
    margin: 0 0 6px;
    color: var(--ncck-primary);
    font-size: 88px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
}
.ncck-nf404-title {
    margin: 0 0 14px;
    color: var(--ncck-text);
    font-size: 32px;
    font-weight: 700;
}
.ncck-nf404-text {
    max-width: 560px;
    margin: 0 auto 34px;
    color: var(--ncck-text-muted);
    font-size: 16px;
}
.ncck-nf404-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
/* interactive completeness for the two entry buttons — the frozen base
   .ncck-btn rules above only ship :hover */
.ncck-nf404-actions .ncck-btn--primary:focus {
    background: var(--ncck-primary-hover);
    border-color: var(--ncck-primary-hover);
}
.ncck-nf404-actions .ncck-btn--outline:focus {
    color: var(--ncck-primary);
    border-color: var(--ncck-primary);
}
.ncck-nf404-actions .ncck-btn:focus-visible {
    outline: 2px solid var(--ncck-primary);
    outline-offset: 2px;
}
.ncck-nf404-actions .ncck-btn:active { transform: translateY(1px); }

/* unknown-routepath referrer note */
.ncck-nf404-ref {
    padding: 0 0 88px;
    text-align: center;
}
.ncck-nf404-ref p {
    margin: 0;
    color: var(--ncck-text-muted);
    font-size: 14px;
}
.ncck-nf404-ref a {
    color: var(--ncck-primary);
    text-decoration: none;
    word-break: break-all;
}
.ncck-nf404-ref a:hover,
.ncck-nf404-ref a:focus {
    color: var(--ncck-primary-hover);
    text-decoration: underline;
}
.ncck-nf404-ref a:focus-visible {
    outline: 2px solid var(--ncck-primary);
    outline-offset: 2px;
}
.ncck-nf404-ref a:active { color: var(--ncck-rail); }

/* -- responsive ------------------------------------------------------------ */
@media (max-width: 767.98px) {
    body.ncck-public:is(.page-login, .page-clientregister, .page-password-reset-container, .page-two-factor-challenge, .page-two-factor-new-backup-code, .page-user-switch-account, .page-user-invite-accept) #main-body {
        padding: 20px 0 48px;
    }
    .ncck-auth-meta { justify-content: center; }
    .ncck-nf404 { padding: 64px 0 56px; }
    .ncck-nf404-code { font-size: 64px; }
    .ncck-nf404-title { font-size: 24px; }
    .ncck-nf404-text { font-size: 15px; }
    .ncck-nf404-actions .ncck-btn {
        width: 100%;
        max-width: 320px;
        justify-content: center;
    }
    .ncck-nf404-ref { padding-bottom: 56px; }
}

@media (prefers-reduced-motion: reduce) {
    .ncck-nf404-actions .ncck-btn:active { transform: none; }
}

/* --------------------------------------------------- B4 /network page section ...git */

/* -- hero: photo-net.jpg is a registered asset gap (map §8-G7). Flat rail ...git */
.ncck-pagehero--net {
    min-height: 690px;
    background-color: var(--ncck-rail);
    background-image: linear-gradient(rgba(7, 27, 66, 0.64), rgba(7, 27, 66, 0.64)), url('../assets/img/ncck/photo-net.jpg');
    background-position: center 40%;
    background-size: cover;
    background-repeat: no-repeat
}

/* D-net375-hero(2026-07-22 verified direct port, pixel-gate/vertical-profile positioning network ...git */
@media (max-width: 575.98px) {
    .ncck-pagehero--net .ncck-hero-caption {
        font-size: 16px;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: 1.92px;
        margin-bottom: 16px;
    }
    .ncck-pagehero--net .ncck-pagehero-title {
        font-size: 40px;
        font-weight: 900;
        line-height: 48px;
        letter-spacing: -1px;
        margin-bottom: 24px;
    }
    .ncck-pagehero--net .ncck-pagehero-subtitle {
        font-size: 21px;
        font-weight: 300;
        line-height: 40px;
        margin-top: 32px;
        margin-bottom: 0;
    }
    .ncck-pagehero--net .ncck-hero-actions {
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding-top: 16px;
    }
    .ncck-pagehero--net .ncck-hero-actions .ncck-btn { margin: 0 8px 16px; }
}

/* -- section canvas rhythm down the page (white / light alternation) ------- */
.ncck-netpeers,
.ncck-tips { background: var(--ncck-bg); }

/* -- hero buttons: complete the frozen :hover-only .ncck-btn base to four
      states, scoped to this page body (same pattern as the B3 404 section) -- */
.ncck-netpage .ncck-btn--primary:focus {
    background: var(--ncck-primary-hover);
    border-color: var(--ncck-primary-hover);
}
.ncck-netpage .ncck-btn--ondark-outline:focus { background: rgba(255, 255, 255, 0.14); }
.ncck-netpage .ncck-btn:focus-visible {
    outline: 2px solid var(--ncck-primary);
    outline-offset: 2px;
}
.ncck-pagehero--net .ncck-btn:focus-visible { outline-color: #fff; }
.ncck-netpage .ncck-btn:active { transform: translateY(1px); }

/* -- stats band: network page carries its H3s inside .ncck-stat (map §3.5); ...git */
.ncck-netpage .ncck-stat h3 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 28px;
}
@media (max-width: 575.98px) {
    .ncck-netpage .ncck-stat h3 { margin-bottom: 16px; }
}

/* -- nqp: named-routes terminal-window carrier wall (page-unique component,
      map §3.3 — structure ported, visuals rewritten on tokens) -------------- */
/* Network terminal window (traffic-light container) benchmarks whmcs8 main site 1:1 (stakeholder 2026-07-22 ...git */
.nqp {
    max-width: 1280px;
    margin: 0 auto;
    background: var(--ncck-surface);
    border: 1px solid rgb(213, 221, 237);
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06), 0 16px 40px rgba(6, 86, 255, 0.1);
    overflow: hidden;
}
.nqp-head {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 18px;
    background: var(--ncck-bg);
    border-bottom: 1px solid var(--ncck-border);
}
.nqp-dot { width: 10px; height: 10px; border-radius: 50%; }
/* traffic-light dot = decorative terminal window dot (non-semantic state), benchmarking w8 soft spot
   color, non-danger/warning/success semantic token (w8 1:1, stakeholder 2026-07-22). */
.ncck-netpage .nqp-dot:nth-child(1) { background: rgb(224, 101, 95); }
.ncck-netpage .nqp-dot:nth-child(2) { background: rgb(217, 164, 65); }
.ncck-netpage .nqp-dot:nth-child(3) { background: rgb(44, 224, 168); }
.nqp-name {
    margin-left: 8px;
    color: var(--ncck-text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.nqp-row {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid var(--ncck-border);
}
.nqp-row:last-child { border-bottom: 0; }
/* M9 operator wall hot line triple emphasis on benchmarking w8 1:1 (Stakeholder 2026-07-22 ruling,
   overturning NCCK pill adaptation): w8 hot line label/member text/preceding dots are all --nk-primary
   (blue); the bottom of the line is light blue. */
.nqp-row-hot { background: rgba(15, 92, 255, 0.06); }
/* hover(0,2,0) will darken the hot line bottom from .06 to .04 - add an equal-specificity rule to ensure that the static emphasis is not downgraded */
.nqp-row-hot:hover { background: rgba(15, 92, 255, 0.06); }
.nqp-row-hot .nqp-label { color: var(--ncck-primary); }
.nqp-row-hot .nqp-list i { color: rgb(6, 86, 255); }
.nqp-row-hot .nqp-list i::before { background: rgb(6, 86, 255); }
.nqp-row:hover {
    background: rgba(15, 92, 255, 0.04);
    box-shadow: inset 3px 0 0 var(--ncck-primary);
}
.nqp-label { display: block; color: var(--ncck-text); font-size: 14px; font-weight: 700; }
.nqp-count { display: block; margin-top: 2px; color: var(--ncck-text-muted); font-size: 12px; }
.nqp-list { display: flex; flex-wrap: wrap; gap: 8px 22px; }
/* Member = plain text + ::before small dot, benchmark whmcs8 1:1 (Stakeholder 2026-07-22 ruling overturns previous...git */
.nqp-list i {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgb(51, 65, 85);
    font-size: 13.5px;
    font-weight: 700;
    font-style: normal;
    white-space: nowrap;
}
.nqp-list i::before {
    content: "";
    flex: none;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgb(182, 194, 214);
}

/* -- nline: line-picker whole-card link (feature card base is reused from the
      frozen .ncck-fcard; four interactive states per map §3.6/IS parity) ---- */
.nline .nline-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    color: var(--ncck-primary);
    font-size: 13px;
    font-weight: 700;
}
.nline .nline-more .fa-arrow-right { font-size: 10px; transition: transform 160ms ease-out; }
a.nline:hover,
a.nline:focus {
    border-color: var(--ncck-primary);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10);
    text-decoration: none;
}
a.nline:hover .nfk-title,
a.nline:focus .nfk-title { color: var(--ncck-primary); }
a.nline:hover .nline-more .fa-arrow-right,
a.nline:focus .nline-more .fa-arrow-right { transform: translateX(3px); }
a.nline:focus-visible {
    outline: 2px solid var(--ncck-primary);
    outline-offset: 2px;
}
a.nline:active { transform: translateY(1px); }

/* -- ntips: order-lines comparison table. The wrap is the mobile horizontal
      scroll region — keyboard focusable, four states (map §3.7 a11y) -------- */
.ntips-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--ncck-surface);
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius);
}
.ntips-wrap:hover { border-color: var(--ncck-text-muted); }
.ntips-wrap:focus,
.ntips-wrap:active { border-color: var(--ncck-primary); }
.ntips-wrap:focus-visible {
    border-color: var(--ncck-primary);
    outline: 2px solid var(--ncck-primary);
    outline-offset: 2px;
}
.ntips {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 14px;
}
.ntips thead th {
    /* ④network tips (2026-07-22 live frame-by-frame comparison w8: 4104 same ntips table): w8...git */
    padding: 14px 20px;
    background: var(--ncck-bg);
    border-bottom: 1px solid var(--ncck-border);
    color: var(--ncck-text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
    line-height: 28px;
}
/* OP-2 (2026-07-22 build, network live verification): w8 theme-custom.css:3356 ...git */
@media (max-width: 991.98px) {
    .ntips thead th { white-space: normal; }
}
.ntips tbody td {
    padding: 19px 20px;
    border-bottom: 1px solid var(--ncck-border);
    color: var(--ncck-text);
    vertical-align: middle;
    line-height: 28px;
}
.ntips tbody tr:last-child td { border-bottom: 0; }
.ntips.ncmp tbody tr:hover { background: rgba(15, 92, 255, 0.03); }
/* U2 ltag 1:1(batch 5 2026-07-21 stakeholder ruling; ground truth w8:3360-3363; ltag only network...git */
.ltag {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 7px;
    font-family: var(--ncck-font-mono);
    font-size: 11px;
    font-weight: 800;
    font-style: normal;
    letter-spacing: 0.04em;
}
/* AA comment: #0656ff on rgba(6,86,255, .08)-over-white(≈#ecf1ff)≈4.9:1 passed (supervisor review
   correction, original note 5.4:1 is optimistic) */
.ltag-cdia { background: rgba(6, 86, 255, 0.08); color: var(--ncck-grad-blue); border: 1px solid rgba(6, 86, 255, 0.25); }
/* AA comment: #0284c7 on rgba(2,132,199, .08)-over-white ≈3.7:1 (supervisor review correction, original
   note 4.1:1), <4.5 below AA - the stakeholder strictly 1:1 ruling retains the original value of whmcs8
   (w8:3362), the comparison value is recorded truthfully */
.ltag-dia { background: rgba(2, 132, 199, 0.08); color: var(--ncck-dia-sky); border: 1px solid rgba(2, 132, 199, 0.25); }
/* AA Comment: #475569 on #f6f8fb ≈7.1:1 Passed (supervisor review) */
.ltag-glob { background: var(--ncck-ltag-glob-bg); color: var(--ncck-slate-ink); border: 1px solid var(--ncck-ltag-glob-border); }

/* -- visually-hidden utility (table caption stays in the a11y tree) -------- */
.ncck-vh {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* -- responsive ------------------------------------------------------------ */
@media (max-width: 991px) {
    .nqp-row { grid-template-columns: 1fr; gap: 10px; }
}

/* D-net375-tips(2026-07-22 verified direct port, pixel-gate/vertical-profile positioning network ...git */
@media (max-width: 575.98px) {
    .ncck-tips .ncck-sec-cap {
        font-size: 14px;
        font-weight: 400;
        line-height: 23.1px;
        letter-spacing: normal;
        padding: 5px 15px;
        margin-bottom: 14px;
    }
    .ncck-tips .ncck-sec-title {
        font-size: 32px;
        font-weight: 700;
        line-height: 40px;
        letter-spacing: -0.64px;
        margin-bottom: 0;
    }
    .ncck-tips .ncck-sec-subtitle {
        font-size: 14px;
        font-weight: 400;
        line-height: 23.1px;
        margin-top: 12px;
        margin-bottom: 0;
    }
    .ncck-tips .ncck-section-head { margin-bottom: 48px; }
    .ntips { min-width: 560px; }
}

@media (prefers-reduced-motion: reduce) {
    .ncck-netpage .ncck-btn:active,
    a.nline:active { transform: none; }
    .nline .nline-more .fa-arrow-right { transition: none; }
    a.nline:hover .nline-more .fa-arrow-right,
    a.nline:focus .nline-more .fa-arrow-right { transform: none; }
}

/* --------------------------------------------------- B5-s /servers page section ...git */

/* -- hero: light-canvas deep-ink form per map §3.1 (live: caption primary ...git */
.ncck-pagehero--srv {
    min-height: 0;
    padding: 52px 0 40px;
    background: url('../assets/img/ncck/net-hero-light.svg?v=1') center/cover no-repeat, var(--ncck-grad-pagehero-light);
}
.ncck-pagehero--srv .ncck-pagehero-title {
    line-height: 1.3; margin-bottom: 30px;
    color: var(--ncck-text);
    font-size: 40px
}
.ncck-pagehero--srv .ncck-pagehero-subtitle {
    margin-bottom: 36px;
    color: var(--ncck-text-muted)
}

/* -- hero buttons: complete the frozen :hover-only .ncck-btn base to four ...git */
.ncck-srvpage .ncck-btn--primary:focus {
    background: var(--ncck-primary-hover);
    border-color: var(--ncck-primary-hover);
}
.ncck-srvpage .ncck-btn--outline:focus {
    color: var(--ncck-primary);
    border-color: var(--ncck-primary);
}
.ncck-srvpage .ncck-btn:focus-visible {
    outline: 2px solid var(--ncck-primary);
    outline-offset: 2px;
}
.ncck-srvpage .ncck-btn:active { transform: translateY(1px); }

/* -- nsrv app section: light canvas, tight rhythm under the compact hero ...git */
.ncck-srvapp {
    padding: 20px 0 80px;
    background: var(--ncck-bg);
    scroll-margin-top: calc(var(--ncck-toolbar-h) + var(--ncck-nav-h) + 16px);
}
/* 2026-07-26 The stakeholder actually reported that "/servers width is inconsistent with about/locations":
   The original max-width here is: 1160px, and other content blocks of the site directly fill
   the .ncck-container content box (1440 - 40×2 = 1360), so /servers and /cloud are 100px smaller on
   each side than /about and /locations. Offset from the 40px baseline of the header and footer. Delete
   max-width to align with the site. ⚠️ This is not purely a bug fix, but a **visual dimensions change**:
   the old site w8 itself is 1160 installed in 1360 (docs/reports/2026-07-21-servers-geometry-audit.md
   records w8:3912 and the same max-width:1160px), so this look and feel exists as it is on the old
   site. The stakeholder reported it on 2026-07-26 and treated it as "more tidy than the old site". Casual
   effect: The row grid of .nsrv-row is calibrated according to w8 under the width of 1160. After the
   relaxation, the specification is reduced from 2 rows to 1 row, the row height is 120→108, and the
   overall page is shortened by about 276px. */
.nsrv { margin: 0 auto; }

/* -- filters card: 3 label+chips rows (map §3.2.1; visuals extracted from
      live v48 and rewritten on tokens) -- */
.nsrv-filters {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 22px;
    background: var(--ncck-surface);
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.nsrv-frow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}
.nsrv-flabel {
    flex: 0 0 88px;
    color: var(--ncck-text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* R6/① servers nsrv deep drilling (2026-07-22 runtime verification):w8:3927 .nsrv-frow row height...git */
    line-height: 28px;
}
.nsrv-fchips { display: flex; flex-wrap: wrap; gap: 10px; }

/* -- filter chips: real buttons, four states + .on selected class (the .on ...git */
.nsrv-fchips button {
    appearance: none;
    padding: 7px 16px;
    background: transparent;
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius-sm);
    color: var(--ncck-text);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
    /* Same as .nsrv-flabel Note: w8: 3927 chip line-height 44px, relying on the same grid line-height:
   28px, fill in the three lines of .nsrv-frow to align with the ground truth (map section ①). */
    line-height: 28px;
}
.nsrv-fchips button:hover,
.nsrv-fchips button:focus {
    border-color: rgba(15, 92, 255, 0.35);
    color: var(--ncck-primary);
}
.nsrv-fchips button:focus-visible {
    outline: 2px solid var(--ncck-primary);
    outline-offset: 2px;
}
.nsrv-fchips button:active { transform: translateY(1px); }
.nsrv-fchips button.on {
    background: rgba(15, 92, 255, 0.08);
    border-color: var(--ncck-primary);
    color: var(--ncck-primary);
}
/* Detail refinement: filtering chip selected state solid blue gradient + white text, unselected hover light blue background (from homepage refined draft nk-polish v2 §9) */
body.ncck-public .nsrv-fchips button.on { background: linear-gradient(180deg, var(--ncck-primary), var(--ncck-primary-hover)); border-color: var(--ncck-primary-hover); color: #fff; box-shadow: 0 6px 14px -8px rgba(15,92,255,.6); }
body.ncck-public .nsrv-fchips button:hover:not(.on) { background: rgba(15,92,255,.05); }

/* -- category description card (static all-state copy in this slice) -- */
/* Direct font-weight port (2026-07-22 live verification, H4 grep consumer pages=servers only this page):
   w8 .nsrv-desc-in ancestors are also cascaded .feature-desc, live constant 300 (the sample copy is
   consistent on both sides); whmcs10 otherwise defaults to 400. */
.nsrv-desc-in {
    margin-top: 16px;
    padding: 18px 22px;
    background: var(--ncck-surface);
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius);
    color: var(--ncck-text);
    font-size: 14px;
    line-height: 1.75;
    font-weight: var(--ncck-fw-light);
}
/* Detailed refinement: The outer wrapper and soft shadow of the classification description card (from the homepage refined draft nk-polish v2 §9; .nsrv-desc is the outer container that wraps .nsrv-desc-in in servers/cloud tpl) */
body.ncck-public .nsrv-desc { box-shadow: 0 1px 2px rgba(14,24,48,.035); }

/* -- note strip: warning-token amber tint; the live-extracted dark-amber ink ...git */
/* Direct font-weight port (2026-07-22 live verification, H4 grep consumer pages=servers only this page):
   w8 .nsrv-note ancestors are also cascaded .feature-desc, live constant 300 (the sample copy is
   consistent on both sides); whmcs10 otherwise defaults to 400. */
.nsrv-note {
    margin-top: 14px;
    padding: 13px 18px;
    background: rgba(201, 138, 6, 0.08);
    border: 1px solid rgba(201, 138, 6, 0.30);
    border-radius: var(--ncck-radius);
    color: #8a5a1a;
    font-size: 13px;
    line-height: 1.7;
    font-weight: var(--ncck-fw-light);
}
.nsrv-note::before { content: "\26A0\20"; opacity: 0.8; }

/* -- list shell: delivered as an empty container, live static-HTML parity ...git */
.nsrv-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

/* -- responsive: labels break onto their own line under 992px (live v48) -- */
@media (max-width: 991px) {
    .nsrv-flabel { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .ncck-srvpage .ncck-btn:active,
    .nsrv-fchips button:active { transform: none; }
    .nsrv-fchips button { transition: none; }
}

/* ----------------------------------------------------- B5 /legal page section ...git */

/* -- hero: the lightest hero variant site-wide (map §3.1 — no buttons, no ...git */
.ncck-pagehero--legal {
    min-height: 0;
    padding: 52px 0 40px;
    background: var(--ncck-grad-pagehero-light);
}
.ncck-pagehero--legal .ncck-pagehero-title {
    color: var(--ncck-text);
    font-size: 38px;
}
.ncck-pagehero--legal .ncck-pagehero-subtitle {
    margin-bottom: 0;
    color: var(--ncck-text-muted);
    font-size: 16px;
}

/* -- nleg: document app (page-unique component, map §3.2.4 — structure
      ported, visuals rewritten on tokens) ---------------------------------- */
.ncck-legalapp { background: var(--ncck-surface); }
.nleg { max-width: 1160px; margin: 0 auto; }

/* tab bar: static form = pure anchor jump links to #tos/#aup/#privacy;
   .on marker kept for runtime parity (9px radius outline chips, map §3.2.4) */
.nleg-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
}
.nleg-tabs a {
    display: inline-block;
    padding: 9px 18px;
    background: var(--ncck-surface);
    border: 1px solid var(--ncck-border);
    border-radius: 9px;
    color: var(--ncck-text);
    font-size: 13.5px;
    font-weight: 700;
}
.nleg-tabs a:hover {
    border-color: var(--ncck-primary);
    color: var(--ncck-primary);
    text-decoration: none;
}
.nleg-tabs a.on {
    background: rgba(15, 92, 255, 0.08);
    border-color: var(--ncck-primary);
    color: var(--ncck-primary);
}
.nleg-tabs a:focus-visible {
    outline: 2px solid var(--ncck-primary);
    outline-offset: 2px;
}
.nleg-upd {
    margin-left: auto;
    color: var(--ncck-text-muted);
    font-size: 12.5px;
    font-weight: 600;
}

/* documents: two-column grid (280px TOC rail + prose column). All three ...git */
.nleg-doc {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 36px;
    align-items: start;
    scroll-margin-top: 128px;
}
.nleg-doc + .nleg-doc {
    margin-top: 56px;
    padding-top: 48px;
    border-top: 1px solid var(--ncck-border);
}

/* TOC rail: sticky below the 104px shell header, inner-scrolls when tall */
.nleg-toc {
    position: sticky;
    top: 128px;
    max-height: calc(100vh - 152px);
    overflow: auto;
}
.nleg-toc a {
    display: block;
    padding: 5px 0 5px 14px;
    border-left: 2px solid var(--ncck-border);
    color: var(--ncck-text-muted);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.nleg-toc a:hover {
    color: var(--ncck-text);
    text-decoration: none;
}
.nleg-toc a.on {
    border-left-color: var(--ncck-primary);
    color: var(--ncck-primary);
}
.nleg-toc a:focus-visible {
    outline: 2px solid var(--ncck-primary);
    outline-offset: -2px;
}

/* prose column: numbered H3 articles (blue non-italic em numerals) */
.nleg-body { max-width: 820px; }
.nleg-sec {
    margin-bottom: 34px;
    scroll-margin-top: 128px;
}
.nleg-sec:last-child { margin-bottom: 0; }
/* [D9 build 2026-07-22] childSamples section-by-section retest (drill5d-legalsec.json, ...git */
.nleg-sec h3 {
    margin: 0 0 12px;
    color: var(--ncck-text);
    font-size: 19px;
    font-weight: 800;
    line-height: 46px;
}
@media (max-width: 767.98px) {
    .nleg-sec h3 { line-height: 34px; }
}
.nleg-sec h3 em {
    color: var(--ncck-primary);
    font-style: normal;
}
/* Direct font-weight port (2026-07-22 live verification, H4 grep consumer pages=legal only this page, 36
   articles full comparison): w8 .nleg-sec p ancestors are also cascaded .feature-desc, live constant
   300; whmcs10 dropped back to 400. */
.nleg-sec p {
    margin: 0 0 12px;
    color: var(--ncck-text);
    font-size: 14.5px;
    line-height: 1.85;
    font-weight: var(--ncck-fw-light);
}
.nleg-sec p:last-child { margin-bottom: 0; }

/* -- responsive (map §3.2.4 <992px: single column, TOC becomes a static ...git */
@media (max-width: 991px) {
    .nleg-upd {
        flex-basis: 100%;
        margin-left: 0;
    }
    .nleg-doc { grid-template-columns: 1fr; gap: 24px; }
    .nleg-toc {
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: 4px 16px;
        max-height: none;
        overflow: visible;
    }
    .nleg-toc a {
        padding: 4px 0;
        border-left: 0;
        border-bottom: 2px solid transparent;
    }
    .nleg-toc a:hover,
    .nleg-toc a.on { border-bottom-color: var(--ncck-primary); }
}

/* ============ B6 support family (announcements + knowledgebase) public skin ==============
   Stakeholder report on /knowledgebase, 2026-07-24: "Everything has reverted to the original appearance."
   The NCCK shell is present; the root cause is the native WHMCS Bootstrap content layout:
   ① #main-body lacks the NCCK page canvas, white background, and vertical rhythm used by
     contact/servers.
   ② The native left col-lg-4 .card-sidebar—#f7f7f9 card-header, native list-group, and solid
     #007bff active state—occupies roughly one quarter of the page but has no NCCK skin. This is the
     largest single source of the native-WHMCS appearance.
   ③ The empty state is a bare .alert-info, handled later by its component section.
   This section normalizes ① and ② once for knowledgebase and announcements, including
   viewannouncement. Scope is the support-family selector only:
   [class*="page-knowledgebase"] (page-knowledgebase / -cat / -article / -search),
   .page-announcements, and .page-viewannouncement. No other body class is affected, and the shared
   sidebar template at includes/sidebar.tpl remains unchanged. */

/* Support-family scope note (2026-07-24): authenticated versions use body.ncck-client and guest
   versions use body.ncck-public. Do not tie the content skin to body.ncck-public; header.tpl already
   loads this stylesheet for both shell states. */
body:is([class*="page-knowledgebase"], .page-announcements, .page-viewannouncement, .page-serverstatus, [class*="page-download"]) #main-body {
    background: var(--ncck-bg);
    padding: 44px 0 76px;
}

/* -- native sidebar panel .card.card-sidebar: gray head Bootstrap panel -> NCCK card --------- */
body:is([class*="page-knowledgebase"], .page-announcements, .page-viewannouncement, .page-serverstatus, [class*="page-download"]) .sidebar .card {
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius);
    background: var(--ncck-surface);
    box-shadow: 0 1px 2px rgba(14, 24, 48, 0.04);
    overflow: hidden;
}
/* Mobile "category" drop-down panel with native .bg-light (#f8f9fa), normalized to card surface white */
body:is([class*="page-knowledgebase"], .page-announcements, .page-viewannouncement, .page-serverstatus, [class*="page-download"]) .sidebar .card.bg-light {
    background: var(--ncck-surface);
}
body:is([class*="page-knowledgebase"], .page-announcements, .page-viewannouncement, .page-serverstatus, [class*="page-download"]) .sidebar .card-header {
    padding: 14px 18px;
    background: var(--ncck-surface);
    border-bottom: 1px solid var(--ncck-border);
}
body:is([class*="page-knowledgebase"], .page-announcements, .page-viewannouncement, .page-serverstatus, [class*="page-download"]) .sidebar .card-header .card-title {
    margin: 0;
    color: var(--ncck-heading);
    font-family: var(--ncck-font);
    font-size: 14px;
    font-weight: 700;
}
body:is([class*="page-knowledgebase"], .page-announcements, .page-viewannouncement, .page-serverstatus, [class*="page-download"]) .sidebar .card-header .card-title > i:first-child {
    color: var(--ncck-primary);
}
body:is([class*="page-knowledgebase"], .page-announcements, .page-viewannouncement, .page-serverstatus, [class*="page-download"]) .sidebar .card-minimise {
    color: var(--ncck-text-muted);
    font-size: 12px;
}
body:is([class*="page-knowledgebase"], .page-announcements, .page-viewannouncement, .page-serverstatus, [class*="page-download"]) .sidebar .card-body {
    padding: 16px 18px;
}

/* -- Sidebar menu row .list-group-item(native active = #007bff solid)---------------- */
body:is([class*="page-knowledgebase"], .page-announcements, .page-viewannouncement, .page-serverstatus, [class*="page-download"]) .sidebar .list-group-item {
    padding: 11px 18px;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--ncck-border);
    color: var(--ncck-text-muted);
    font-size: 13.5px;
    font-weight: 500;
}
body:is([class*="page-knowledgebase"], .page-announcements, .page-viewannouncement, .page-serverstatus, [class*="page-download"]) .sidebar .list-group-item:first-child {
    border-top: 0;
}
body:is([class*="page-knowledgebase"], .page-announcements, .page-viewannouncement, .page-serverstatus, [class*="page-download"]) .sidebar a.list-group-item {
    text-decoration: none;
    transition: background-color 0.12s ease, color 0.12s ease;
}
body:is([class*="page-knowledgebase"], .page-announcements, .page-viewannouncement, .page-serverstatus, [class*="page-download"]) .sidebar a.list-group-item:hover,
body:is([class*="page-knowledgebase"], .page-announcements, .page-viewannouncement, .page-serverstatus, [class*="page-download"]) .sidebar a.list-group-item:focus {
    background: var(--ncck-bg);
    color: var(--ncck-primary);
}
body:is([class*="page-knowledgebase"], .page-announcements, .page-viewannouncement, .page-serverstatus, [class*="page-download"]) .sidebar a.list-group-item:focus-visible {
    outline: 2px solid var(--ncck-primary);
    outline-offset: -2px;
}
body:is([class*="page-knowledgebase"], .page-announcements, .page-viewannouncement, .page-serverstatus, [class*="page-download"]) .sidebar a.list-group-item:active {
    background: var(--ncck-border);
}
/* Current page: light blue background + main blue text + 3px left subscript (replaces native solid blue block) */
body:is([class*="page-knowledgebase"], .page-announcements, .page-viewannouncement, .page-serverstatus, [class*="page-download"]) .sidebar .list-group-item.active {
    background: rgba(15, 92, 255, 0.08);
    color: var(--ncck-primary);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--ncck-primary);
}
body:is([class*="page-knowledgebase"], .page-announcements, .page-viewannouncement, .page-serverstatus, [class*="page-download"]) .sidebar .sidebar-menu-item-icon {
    color: var(--ncck-text-muted);
}
body:is([class*="page-knowledgebase"], .page-announcements, .page-viewannouncement, .page-serverstatus, [class*="page-download"]) .sidebar a.list-group-item:hover .sidebar-menu-item-icon,
body:is([class*="page-knowledgebase"], .page-announcements, .page-viewannouncement, .page-serverstatus, [class*="page-download"]) .sidebar .list-group-item.active .sidebar-menu-item-icon {
    color: var(--ncck-primary);
}

/* --Native select in the sidebar (mobile category jump, onchange mechanism remains unchanged)------------------- */
body:is([class*="page-knowledgebase"], .page-announcements, .page-viewannouncement, .page-serverstatus, [class*="page-download"]) .sidebar .form-control {
    height: 42px;
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius-sm);
    background-color: var(--ncck-surface);
    color: var(--ncck-text);
    font-family: var(--ncck-font);
    font-size: 14px;
}
body:is([class*="page-knowledgebase"], .page-announcements, .page-viewannouncement, .page-serverstatus, [class*="page-download"]) .sidebar .form-control:focus {
    border-color: var(--ncck-primary);
    box-shadow: 0 0 0 3px rgba(15, 92, 255, 0.16);
    outline: none;
}

@media (max-width: 991.98px) {
    body:is([class*="page-knowledgebase"], .page-announcements, .page-viewannouncement, .page-serverstatus, [class*="page-download"]) #main-body {
        padding: 28px 0 56px;
    }
}

/* ------------------------------------------ B6 announcements page section ...git */

.ncck-ann {
    max-width: 860px;
    margin: 0 auto;
    padding: 8px 0 24px;
    font-family: var(--ncck-font);
}

/* -- page head = the single H1 + one line description (symmetrical with .ncck-kb-head) ----------- */
.ncck-ann-head { margin: 0 0 28px; }
.ncck-ann-title {
    margin: 0 0 8px;
    color: var(--ncck-heading);
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.ncck-ann-sub {
    margin: 0;
    max-width: 640px;
    color: var(--ncck-text-muted);
    font-size: 15.5px;
    line-height: 1.6;
}

/* -- list of announcement cards ------------------------------------------- */
.ncck-ann-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
/* Large card: 16px radius and soft shadow, matching the knowledge-base card language required by the
   site-wide style direction. The card itself is not interactive; only its title and Continue link are,
   so the card deliberately has no hover lift. */
.ncck-ann-item {
    background: var(--ncck-surface);
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius-lg);
    box-shadow: 0 1px 2px rgba(14, 24, 48, 0.04);
    padding: 24px 26px;
}
/* The parent theme twenty-one has .announcements .announcement{margin-bottom:4rem} (two types), which
   will overlap 64px outside the flex gap. The spacing is uniformly assigned to the gap of
   .ncck-ann-list. */
.ncck-ann-list .ncck-ann-item { margin-bottom: 0; }
.ncck-ann-item-title {
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
}
.ncck-ann-item-title a {
    color: var(--ncck-text);
    text-decoration: none;
}
.ncck-ann-item-title a:hover,
.ncck-ann-item-title a:focus {
    color: var(--ncck-primary);
    text-decoration: underline;
}
.ncck-ann-item-title a:focus-visible {
    outline: 2px solid var(--ncck-primary);
    outline-offset: 2px;
    border-radius: 2px;
}
.ncck-ann-item-title a:active { color: var(--ncck-primary-hover); }

/* -- meta line (date / time) ---------------------------------------------- */
.ncck-ann-meta {
    margin: 0 0 14px;
    font-size: 13.5px;
}
.ncck-ann-meta .text-muted { color: var(--ncck-text-muted) !important; }
.ncck-ann-meta i { color: var(--ncck-text-muted); }

/* -- excerpt / summary prose ---------------------------------------------- */
.ncck-ann-excerpt {
    margin: 0 0 18px;
    color: var(--ncck-text);
    font-size: 14.5px;
    line-height: 1.8;
}
.ncck-ann-excerpt :last-child { margin-bottom: 0; }
.ncck-ann-excerpt a {
    color: var(--ncck-primary);
    text-decoration: none;
}
.ncck-ann-excerpt a:hover,
.ncck-ann-excerpt a:focus { text-decoration: underline; }
.ncck-ann-excerpt img { max-width: 100%; height: auto; }

/* -- native .btn.btn-default controls (continue / back / edit), 4 states --- 2026-07-24: Complementary
   geometry (height/padding/font size), so that the Bootstrap size of native .btn/.btn-sm is no longer
   exposed - Look and feel alignment public site .ncck-btn base (42px / 6px border radius / 14px). */
.ncck-ann .btn-default {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    color: var(--ncck-primary);
    background: var(--ncck-surface);
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius-sm);
    font-family: var(--ncck-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}
.ncck-ann .btn-default.btn-sm {
    height: 38px;
    padding: 0 15px;
    font-size: 13.5px;
}
.ncck-ann .btn-default:hover,
.ncck-ann .btn-default:focus {
    color: var(--ncck-primary-hover);
    border-color: var(--ncck-primary);
    background: var(--ncck-bg);
    /* Same feel as body.ncck-public .ncck-btn--outline:hover */
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -10px rgba(15, 24, 48, 0.25);
}
.ncck-ann .btn-default:focus-visible {
    outline: 2px solid var(--ncck-primary);
    outline-offset: 2px;
}
.ncck-ann .btn-default:active {
    color: var(--ncck-primary-hover);
    border-color: var(--ncck-primary-hover);
}

/* -- pagination (native .pagination), 4 states + disabled/active ---------- */
.ncck-ann-pager {
    margin-top: 24px;
}
.ncck-ann-pager .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ncck-ann-pager .page-link {
    display: block;
    padding: 7px 13px;
    color: var(--ncck-primary);
    background: var(--ncck-surface);
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius-sm);
    text-decoration: none;
    font-size: 14px;
}
/* The parent theme's .page-item:first-child/:last-child .page-link is a three-type selector (with
   margin-left:-1px and .25rem border radius), which will snatch the geometry of the first/last page
   number back to Bootstrap. This one belongs to the same three categories and is further back,
   unifying the entire row of page numbers to NCCK geometry. */
.ncck-ann-pager .page-item .page-link {
    margin-left: 0;
    border-radius: var(--ncck-radius-sm);
}
.ncck-ann-pager .page-link:hover,
.ncck-ann-pager .page-link:focus {
    color: var(--ncck-primary-hover);
    border-color: var(--ncck-primary);
    background: var(--ncck-bg);
}
.ncck-ann-pager .page-link:focus-visible {
    outline: 2px solid var(--ncck-primary);
    outline-offset: 2px;
}
.ncck-ann-pager .page-link:active { background: var(--ncck-border); }
.ncck-ann-pager .page-item.active .page-link {
    color: #fff;
    background: var(--ncck-primary);
    border-color: var(--ncck-primary);
    cursor: default;
}
.ncck-ann-pager .page-item.disabled .page-link {
    color: var(--ncck-text-muted);
    background: var(--ncck-bg);
    border-color: var(--ncck-border);
    pointer-events: none;
    opacity: 0.6;
}

/* -- detail view (viewannouncement) --------------------------------------- */
.ncck-ann--detail .ncck-ann-article {
    background: var(--ncck-surface);
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius-lg);
    box-shadow: 0 1px 2px rgba(14, 24, 48, 0.04);
    padding: 32px 36px;
}
.ncck-ann-article-title {
    margin: 0 0 14px;
    color: var(--ncck-heading);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.3;
}
.ncck-ann-body {
    color: var(--ncck-text);
    font-size: 15px;
    line-height: 1.85;
}
.ncck-ann-body > :first-child { margin-top: 0; }
.ncck-ann-body > :last-child { margin-bottom: 0; }
.ncck-ann-body h1,
.ncck-ann-body h2,
.ncck-ann-body h3,
.ncck-ann-body h4 {
    margin: 26px 0 12px;
    color: var(--ncck-text);
    font-weight: 700;
    line-height: 1.35;
}
.ncck-ann-body h2 { font-size: 20px; }
.ncck-ann-body h3 { font-size: 17px; }
.ncck-ann-body p { margin: 0 0 14px; }
.ncck-ann-body ul,
.ncck-ann-body ol { margin: 0 0 14px; padding-left: 22px; }
.ncck-ann-body li { margin: 0 0 6px; }
.ncck-ann-body img { max-width: 100%; height: auto; border-radius: var(--ncck-radius-sm); }
.ncck-ann-body a {
    color: var(--ncck-primary);
    text-decoration: none;
}
.ncck-ann-body a:hover,
.ncck-ann-body a:focus { color: var(--ncck-primary-hover); text-decoration: underline; }
.ncck-ann-body a:focus-visible {
    outline: 2px solid var(--ncck-primary);
    outline-offset: 2px;
    border-radius: 2px;
}
.ncck-ann-body pre,
.ncck-ann-body table { max-width: 100%; overflow-x: auto; }
.ncck-ann-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}
.ncck-ann-actions .ncck-ann-edit { margin-left: auto; }

/* -- responsive ----------------------------------------------------------- */
@media (max-width: 767.98px) {
    .ncck-ann { padding-top: 4px; }
    .ncck-ann-head { margin-bottom: 22px; }
    .ncck-ann-title { font-size: 25px; }
    .ncck-ann-sub { font-size: 14.5px; }
    .ncck-ann-item { padding: 18px 18px; }
    .ncck-ann--detail .ncck-ann-article { padding: 22px 20px; }
    .ncck-ann-article-title { font-size: 22px; }
    .ncck-ann-actions .ncck-ann-edit { margin-left: 0; }
}

/* --------------------------------------------- B6 serverstatus (Network Status) ...git */

/* -- page H1 (the single H1; native header emits none) --------------------- */
.ncck-statuspage .ncck-status-title {
    margin: 0 0 24px;
    color: var(--ncck-text);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
}

/* -- cards (server status table wrapper, each network issue) --------------- */
.ncck-statuspage .card {
    margin-bottom: 20px;
    background: var(--ncck-surface);
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.ncck-statuspage .card-body { padding: 24px; }
.ncck-statuspage .card-header {
    padding: 14px 24px;
    background: var(--ncck-bg);
    border-bottom: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius) var(--ncck-radius) 0 0;
    color: var(--ncck-text);
    font-weight: 600;
}
.ncck-statuspage .card-body h2,
.ncck-statuspage .card-body .h3 {
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--ncck-text);
}
.ncck-statuspage .card-body > p { color: var(--ncck-text-muted); }
.ncck-statuspage .card-body > p:last-child { margin-bottom: 0; }

/* -- alerts (open-status / scheduled / affecting-you): token four-colour, ...git */
.ncck-statuspage .alert {
    border-radius: var(--ncck-radius);
    border-width: 1px;
    border-style: solid;
}
.ncck-statuspage .alert-success {
    background: rgba(26, 158, 92, 0.08);
    border-color: rgba(26, 158, 92, 0.30);
    color: #12703f;
}
.ncck-statuspage .alert-info {
    background: rgba(15, 92, 255, 0.08);
    border-color: rgba(15, 92, 255, 0.30);
    color: var(--ncck-primary-hover);
}
.ncck-statuspage .alert-warning {
    background: rgba(201, 138, 6, 0.08);
    border-color: rgba(201, 138, 6, 0.30);
    color: #8a5a1a;
}
.ncck-statuspage .alert-link {
    color: var(--ncck-primary);
    font-weight: 600;
    text-decoration: underline;
}
.ncck-statuspage .alert-link:hover,
.ncck-statuspage .alert-link:focus { color: var(--ncck-primary-hover); }

/* -- server status table: light-grey header, row hover ------------------- */
.ncck-statuspage .table { color: var(--ncck-text); margin-bottom: 0; }
.ncck-statuspage .table thead th {
    background: var(--ncck-bg);
    border-bottom: 2px solid var(--ncck-border);
    color: var(--ncck-text);
    font-weight: 600;
}
.ncck-statuspage .table td,
.ncck-statuspage .table th { border-color: var(--ncck-border); }
.ncck-statuspage .table tbody tr:hover { background: rgba(15, 92, 255, 0.04); }
.ncck-statuspage .table td a { color: var(--ncck-primary); }
.ncck-statuspage .table td a:hover,
.ncck-statuspage .table td a:focus { color: var(--ncck-primary-hover); }

/* -- priority badges: light tint + dark ink four-colour ------------------ */
.ncck-statuspage .badge {
    border-radius: var(--ncck-radius-sm);
    font-weight: 600;
    padding: 4px 10px;
}
.ncck-statuspage .badge-danger  { background: rgba(201, 48, 48, 0.12);  color: var(--ncck-danger); }
.ncck-statuspage .badge-warning { background: rgba(201, 138, 6, 0.14);  color: #8a5a1a; }
.ncck-statuspage .badge-success { background: rgba(26, 158, 92, 0.12);  color: #12703f; }
.ncck-statuspage .badge-info    { background: rgba(15, 92, 255, 0.12);  color: var(--ncck-primary-hover); }

/* -- pagination: four states, disabled kept from native markup ----------- */
.ncck-statuspage .pagination { margin: 0; }
.ncck-statuspage .page-link {
    color: var(--ncck-primary);
    background: var(--ncck-surface);
    border: 1px solid var(--ncck-border);
}
.ncck-statuspage .page-link:hover {
    color: var(--ncck-primary-hover);
    background: rgba(15, 92, 255, 0.06);
    border-color: var(--ncck-border);
}
.ncck-statuspage .page-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(15, 92, 255, 0.22);
}
.ncck-statuspage .page-link:active {
    color: #fff;
    background: var(--ncck-primary);
    border-color: var(--ncck-primary);
}
.ncck-statuspage .page-item.disabled .page-link {
    color: var(--ncck-text-muted);
    background: var(--ncck-bg);
    border-color: var(--ncck-border);
    opacity: 0.65;
    pointer-events: none;
}

/* -- generic focus ring for any link in the status body ------------------ */
.ncck-statuspage a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(15, 92, 255, 0.22);
    border-radius: var(--ncck-radius-sm);
}

/* -- responsive: native .table-responsive already scrolls the table on
      narrow viewports; keep the H1 from crowding the top bar ------------- */
@media (max-width: 767px) {
    .ncck-statuspage .ncck-status-title { font-size: 26px; margin-bottom: 18px; }
    .ncck-statuspage .card-body { padding: 18px; }
}

/* --------------------------------------------------- B6 /contact page section ...git */

/* -- page canvas: light background + rhythm around the native container ----- */
body.ncck-public.page-contact #main-body {
    background: var(--ncck-bg);
    padding: 48px 0 72px;
}
.ncck-contact {
    max-width: 1120px;
    margin: 0 auto;
}

/* -- page head: the sole H1 (native inner h6 dropped in the tpl) ------------ */
.ncck-contact-head {
    margin-bottom: 36px;
}
.ncck-contact-title {
    margin: 0 0 8px;
    color: var(--ncck-text);
    font-family: var(--ncck-font);
    font-size: 34px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.ncck-contact-sub {
    margin: 0;
    max-width: 640px;
    color: var(--ncck-text-muted);
    font-size: 16px;
    line-height: 1.6;
}

/* -- layout: five-channel cards (left) + native form (right) ---------------- */
.ncc-grid {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

/* -- left: contact-channel cards (verbatim live copy, NCCK visuals) --------- */
.ncc-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ncc-card {
    display: block;
    padding: 16px 18px;
    background: var(--ncck-surface);
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius);
    color: var(--ncck-text);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.ncc-card b {
    display: block;
    margin-bottom: 3px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ncck-text);
}
.ncc-card span {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ncck-text-muted);
}
/* Detail refinement: channel card hover lift + blue layered shadow (aligned contact refinement draft) */
/* The stakeholder requested "unified style for the site" (2026-07-24): lift/shadow alignment .ncck-fcard standard language */
.ncc-card:hover {
    border-color: rgba(15, 92, 255, 0.32);
    box-shadow: 0 2px 4px rgba(14, 24, 48, 0.05), 0 20px 40px -18px rgba(15, 92, 255, 0.26);
    transform: translateY(-4px);
    text-decoration: none;
}
.ncc-card:hover b { color: var(--ncck-primary); }
.ncc-card:focus-visible {
    outline: 2px solid var(--ncck-primary);
    outline-offset: 2px;
}
.ncc-card:active { transform: translateY(0); }
.ncc-notice {
    margin: 4px 0 0;
    padding: 14px 16px;
    background: rgba(15, 92, 255, 0.06);
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius);
    color: var(--ncck-text-muted);
    font-size: 12.5px;
    line-height: 1.6;
}

/* -- right: native form card, skinned --------------------------------------- */
.ncc-form .card {
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius);
    background: var(--ncck-surface);
    box-shadow: 0 12px 32px rgba(7, 27, 66, 0.06);
}
.ncc-form .card-body { padding: 32px; }
.ncc-form .form-group { margin-bottom: 20px; }
.ncc-form .control-label {
    display: block;
    margin-bottom: 7px;
    color: var(--ncck-text);
    font-size: 13.5px;
    font-weight: 600;
}
.ncc-form .form-control {
    width: 100%;
    padding: 10px 14px;
    background: var(--ncck-surface);
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius-sm);
    color: var(--ncck-text);
    font-family: var(--ncck-font);
    font-size: 14.5px;
    line-height: 1.5;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ncc-form textarea.form-control { resize: vertical; min-height: 132px; }
.ncc-form .form-control:hover { border-color: #c9d3e0; }
.ncc-form .form-control:focus {
    border-color: var(--ncck-primary);
    box-shadow: 0 0 0 3px rgba(15, 92, 255, 0.12);
    outline: none;
}

/* -- O7: CAPTCHA on its own row; native captcha.tpl markup left intact ------ */
.ncc-captcha {
    margin: 4px 0 22px;
    padding-top: 4px;
}
.ncc-captcha p { margin-bottom: 12px; color: var(--ncck-text-muted); font-size: 13px; }
.ncc-captcha .captchaimage img {
    max-width: 100%;
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius-sm);
}
.ncc-captcha #inputCaptcha { margin-top: 8px; }

/* -- O7: Send button on its own centered row -------------------------------- */
.ncc-submit {
    display: flex;
    justify-content: center;
    padding-top: 4px;
}
.ncc-form .btn-primary {
    min-width: 200px;
    height: 42px;
    padding: 0 26px;
    /* Detail refinement: Unify the site-level gradient button language for the send button (aligned contact refinement draft §12) */
    background: linear-gradient(180deg, var(--ncck-primary), var(--ncck-primary-hover));
    border: 1px solid var(--ncck-primary-hover);
    border-radius: var(--ncck-radius-sm);
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 40px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 8px 18px -8px rgba(15, 92, 255, 0.55);
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.15s ease;
}
.ncc-form .btn-primary:hover {
    background: linear-gradient(180deg, var(--ncck-primary), var(--ncck-primary-hover));
    border-color: var(--ncck-primary-hover);
    color: #fff;
    transform: translateY(-1px);
}
.ncc-form .btn-primary:focus-visible {
    outline: 2px solid var(--ncck-primary);
    outline-offset: 2px;
}
.ncc-form .btn-primary:active { background: var(--ncck-primary-hover); }

/* -- responsive (map §3.2.4 <992px: single column, cards stack above form) -- */
@media (max-width: 991px) {
    body.ncck-public.page-contact #main-body { padding: 32px 0 56px; }
    .ncc-grid { grid-template-columns: 1fr; gap: 20px; }
    .ncck-contact-title { font-size: 28px; }
    .ncc-form .card-body { padding: 24px; }
}

/* ============================================================================ ...git */

/* 2026-07-24 Acceptance-review rejection "Everything has become its original shape" - This paragraph is the
   main body of the repair. Route b remains unchanged (skinned native output, no self-made front end):
   .card / .list-group / .btn-primary / .btn-default / .badge-info / .row.col-xl-6 in tpl are all
   retained as they are, and the following .ncck-kbpage scope rules change their Bootstrap look and
   feel to the NCCK design language. For the page canvas and native sidebar on the left, see the
   section "B6 supports family public skins" above. */

.ncck-kbpage {
    color: var(--ncck-text);
    font-family: var(--ncck-font);
}

/* -- page head:H1 + one line description (symmetrical with .ncck-ann-head)---------------------- */
.ncck-kb-head { margin: 0 0 28px; }
.ncck-kb-title {
    margin: 0 0 8px;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ncck-heading);
}
.ncck-kb-sub {
    margin: 0;
    max-width: 640px;
    color: var(--ncck-text-muted);
    font-size: 15.5px;
    line-height: 1.6;
}

/* -- native KB search (input group + submit) ------------------------------ The mechanism remains
   unchanged (form action / #inputKnowledgebaseSearch[name=search] / #btnKnowledgebaseSearch); only the
   look and feel is changed: white card input + NCCK primary button (same gradient/inner
   highlight/projection formula as body.ncck-public .ncck-btn--primary). */
.ncck-kbpage .ncck-kb-search {
    max-width: 680px;
    margin-bottom: 32px !important; /* Overwrite native .mb-4, consistent with the 32px rhythm on the page */
}
.ncck-kbpage .kb-search { box-shadow: 0 1px 2px rgba(14, 24, 48, 0.04); border-radius: var(--ncck-radius); }
.ncck-kbpage .kb-search .form-control {
    height: 52px;
    padding: 0 16px;
    border: 1px solid var(--ncck-border);
    border-right: 0;
    border-radius: var(--ncck-radius) 0 0 var(--ncck-radius);
    color: var(--ncck-text);
    background: var(--ncck-surface);
    font-family: var(--ncck-font);
    font-size: 14.5px;
}
.ncck-kbpage .kb-search .form-control::placeholder { color: var(--ncck-text-muted); }
.ncck-kbpage .kb-search .form-control:hover { border-color: var(--ncck-primary); }
.ncck-kbpage .kb-search .form-control:focus {
    border-color: var(--ncck-primary);
    box-shadow: 0 0 0 3px rgba(15, 92, 255, 0.18);
    outline: none;
    z-index: 2;
}
.ncck-kbpage .kb-search .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0 26px;
    border-radius: 0 var(--ncck-radius) var(--ncck-radius) 0;
    font-family: var(--ncck-font);
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: linear-gradient(180deg, var(--ncck-primary), var(--ncck-primary-hover));
    border: 1px solid var(--ncck-primary-hover);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset;
}
.ncck-kbpage .kb-search .btn-primary:hover,
.ncck-kbpage .kb-search .btn-primary:focus {
    background: var(--ncck-primary-hover);
    border-color: var(--ncck-primary-hover);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.26) inset, 0 10px 20px -10px rgba(15, 92, 255, 0.6);
}
.ncck-kbpage .kb-search .btn-primary:focus-visible { outline: 2px solid var(--ncck-primary); outline-offset: 2px; }
.ncck-kbpage .kb-search .btn-primary:active { background: var(--ncck-primary-hover); box-shadow: none; }
.ncck-kbpage .kb-search .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

/* -- cards (shared surface): big card 16px border radius + soft shadow ----------------------- */
.ncck-kbpage .card {
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius-lg);
    background: var(--ncck-surface);
    box-shadow: 0 1px 2px rgba(14, 24, 48, 0.04);
}
.ncck-kbpage .card-body { padding: 22px 24px; }

/* --category grid:native .row/.col-xl-6 is normalized to CSS Grid (equal height card, breakpoint
   semantics are consistent with col-xl-6: ≥1200 double columns, the following single columns). tpl's
   raster classes remain as is. ---- */
.ncck-kbpage .ncck-kb-cats {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin: 0 0 32px;
}
.ncck-kbpage .ncck-kb-cats > .ncck-kb-cat-col {
    flex: none;
    width: auto;
    max-width: none;
    padding: 0;
}
@media (min-width: 1200px) {
    .ncck-kbpage .ncck-kb-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -- category cards ------------------------------------------------------- */
.ncck-kbpage .kb-category {
    height: 100%;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.ncck-kbpage .kb-category.mb-4 { margin-bottom: 0 !important; } /* Leave the spacing to grid gap */
.ncck-kbpage .kb-category > .card-body {
    display: block;
    height: 100%;
    /* The parent theme twenty-one has .kb-category a:hover{background-color:#f5f5f5} - if it is not
   suppressed, the entire card hover will turn gray, which will conflict with the NCCK lift language.
   Here even the still/hover is reset to zero. */
    background: transparent;
    color: var(--ncck-text);
    text-decoration: none;
}
.ncck-kbpage .kb-category > .card-body:hover { background: transparent; }
/* Title row: icon / name / count badge (native .float-right normalized to margin-left:auto) */
/* Note: The title line in tpl is <span class="h5 m-0">, .m-0 with !important - the spacing under the
   line cannot be written here (it will be overridden by .m-0), and it will be hung to the small below (it
   has no tool class). */
.ncck-kbpage .kb-category .h5 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ncck-heading);
}
.ncck-kbpage .kb-category .h5 > .badge {
    float: none !important;
    order: 3;
    margin-left: auto;
}
.ncck-kbpage .kb-category .h5 > .btn { order: 4; }
/* W0·icon The third batch: KB category folder icons are aligned in-place with .ncck-ico primitive
   visual dimensions (40 / radius 10 / 22px / inline-flex centered). This rule is directly applied to the native
   <i>. The tpl of this page can be consolidated without moving a single line - the "folder icon left
   over from the WHMCS native page" named by the stakeholder. The line height centering method of line-height:
   34px is also retired and replaced by inline-flex centering (the same method as the primitive). */
.ncck-kbpage .kb-category .fa-folder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--ncck-ico-size);
    width:  var(--ncck-ico-size);
    height: var(--ncck-ico-size);
    text-align: center;
    border-radius: var(--ncck-ico-radius);
    background: rgba(15, 92, 255, 0.08);
    color: var(--ncck-primary);
    font-size: var(--ncck-ico-glyph);
}
.ncck-kbpage .kb-category p { margin: 0; }
.ncck-kbpage .kb-category .text-muted { color: var(--ncck-text-muted) !important; }
.ncck-kbpage .kb-category small {
    display: block;
    margin-top: 8px;
    padding-left: 52px; /* Align with title text (40 icons + 12 gap; W0·icon The third batch is synchronized with icons 34→40) */
    font-size: 13.5px;
    line-height: 1.65;
}
/* interactive card -> Unify hover for the site (Stakeholder direction 2026-07-24: lift 4px + blue layered shadow) */
.ncck-kbpage .kb-category:hover {
    transform: translateY(-4px);
    border-color: rgba(15, 92, 255, 0.32);
    box-shadow: 0 2px 4px rgba(14, 24, 48, 0.05), 0 20px 40px -18px rgba(15, 92, 255, 0.26);
}
.ncck-kbpage .kb-category:hover .h5 { color: var(--ncck-primary); }
.ncck-kbpage .kb-category:hover .fa-folder { background: rgba(15, 92, 255, 0.14); }
.ncck-kbpage .kb-category > .card-body:focus-visible {
    outline: 2px solid var(--ncck-primary);
    outline-offset: 2px;
    border-radius: var(--ncck-radius-lg);
}
.ncck-kbpage .kb-category:active { transform: translateY(0); border-color: var(--ncck-primary-hover); }

/* -- article-count badge (info -> light-fill deep-text) ------------------- */
.ncck-kbpage .badge-info {
    padding: 5px 10px;
    border-radius: 999px;
    color: var(--ncck-primary);
    background: rgba(15, 92, 255, 0.10);
    font-family: var(--ncck-font);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* -- popular / related lists (native .list-group-flush line) ------------------- */
/* Pay attention to adding the .ncck-kbpage prefix: parent theme twenty-one has .primary-content
   .card{margin-bottom:10px} (two types of selector), and the single type .ncck-kb-popular will be
   covered by it. */
.ncck-kbpage .ncck-kb-popular {
    margin-bottom: 32px;
    overflow: hidden; /* Let the square corners of the first/last row not exceed the 16px card corner (use inset for the focus ring within the row and it will not be cropped) */
}
.ncck-kb-popular > .card-body {
    padding: 18px 24px;
    border-bottom: 1px solid var(--ncck-border);
}
.ncck-kbpage .card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ncck-heading);
    font-family: var(--ncck-font);
    font-size: 17px;
    font-weight: 700;
}
.ncck-kbpage .card-title .fa-star { color: var(--ncck-accent-orange); }
.ncck-kbpage .card-title .fa-folder-open { color: var(--ncck-primary); }
.ncck-kbpage .list-group-item {
    padding: 16px 24px;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--ncck-border);
    color: var(--ncck-text);
}
.ncck-kbpage .list-group-item:first-child { border-top: 0; }
.ncck-kbpage a.kb-article-item {
    display: block;
    text-decoration: none;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.ncck-kbpage a.kb-article-item > span {
    font-size: 15px;
    font-weight: 600;
    color: var(--ncck-heading);
}
.ncck-kbpage a.kb-article-item .fa-file-alt {
    margin-right: 10px;
    color: var(--ncck-text-muted) !important; /* Override native .text-black-50 */
}
.ncck-kbpage a.kb-article-item small {
    display: block;
    margin-top: 5px;
    padding-left: 28px;
    color: var(--ncck-text-muted);
    font-size: 13px;
    line-height: 1.65;
}
.ncck-kbpage a.kb-article-item:hover { background: rgba(15, 92, 255, 0.04); }
.ncck-kbpage a.kb-article-item:hover > span { color: var(--ncck-primary); }
.ncck-kbpage a.kb-article-item:hover .fa-file-alt { color: var(--ncck-primary) !important; }
.ncck-kbpage a.kb-article-item:focus-visible { outline: 2px solid var(--ncck-primary); outline-offset: -2px; }
.ncck-kbpage a.kb-article-item:active { background: rgba(15, 92, 255, 0.08); }

/* -- article page: article card + text layout ------------------------------------------- Same as
   above: .primary-content .card{margin-bottom:10px} Two types of selectors are needed to hold it down. */
.ncck-kbpage .ncck-kb-article { margin-bottom: 32px; }
.ncck-kb-article > .card-body { padding: 32px 36px; }
.ncck-kb-article h1 {
    margin: 0 0 14px;
    color: var(--ncck-heading);
    font-size: 28px;
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: -0.01em;
}
.ncck-kb-article .ncck-kb-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}
/* Override the native tool class on li (.pr-3 with !important; .text-sm / .list-inline-item single class) */
.ncck-kb-article .ncck-kb-article-meta > li { padding: 0 !important; margin: 0; font-size: 13px; }
.ncck-kb-article .ncck-kb-article-meta .text-muted { color: var(--ncck-text-muted) !important; }
.ncck-kb-article .badge-pill {
    padding: 5px 12px;
    border-radius: 999px;
    color: var(--ncck-primary);
    background: rgba(15, 92, 255, 0.10);
    font-family: var(--ncck-font);
    font-size: 12px;
    font-weight: 700;
}
.ncck-kb-article hr {
    margin: 22px 0;
    border: 0;
    border-top: 1px solid var(--ncck-border);
}
/* Body layout (same language as .ncck-ann-body) */
.ncck-kb-article article {
    color: var(--ncck-text);
    font-size: 15px;
    line-height: 1.85;
}
.ncck-kb-article article > :first-child { margin-top: 0; }
.ncck-kb-article article > :last-child { margin-bottom: 0; }
.ncck-kb-article article h1,
.ncck-kb-article article h2,
.ncck-kb-article article h3,
.ncck-kb-article article h4 {
    margin: 26px 0 12px;
    color: var(--ncck-heading);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0;
}
.ncck-kb-article article h1 { font-size: 22px; }
.ncck-kb-article article h2 { font-size: 20px; }
.ncck-kb-article article h3 { font-size: 17px; }
.ncck-kb-article article p { margin: 0 0 14px; }
.ncck-kb-article article ul,
.ncck-kb-article article ol { margin: 0 0 14px; padding-left: 22px; }
.ncck-kb-article article li { margin: 0 0 6px; }
.ncck-kb-article article img { max-width: 100%; height: auto; border-radius: var(--ncck-radius-sm); }
.ncck-kb-article article a { color: var(--ncck-primary); text-decoration: none; }
.ncck-kb-article article a:hover { color: var(--ncck-primary-hover); text-decoration: underline; }
.ncck-kb-article article a:focus-visible { outline: 2px solid var(--ncck-primary); outline-offset: 2px; border-radius: 2px; }
.ncck-kb-article article code,
.ncck-kb-article article pre {
    font-family: var(--ncck-font-mono);
    font-size: 13px;
}
.ncck-kb-article article code {
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--ncck-bg);
    color: var(--ncck-heading);
}
.ncck-kb-article article pre {
    padding: 14px 16px;
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius-sm);
    background: var(--ncck-bg);
    max-width: 100%;
    overflow-x: auto;
}
.ncck-kb-article article pre code { padding: 0; background: transparent; }
.ncck-kb-article article table { max-width: 100%; overflow-x: auto; }

/* -- "Is this article helpful?" voting area; preserve the form behavior and change appearance only. -- */
.ncck-kb-helpful {
    padding: 18px 20px;
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius);
    background: var(--ncck-bg);
}
.ncck-kb-helpful .h4 {
    margin: 0 0 12px;
    color: var(--ncck-heading);
    font-size: 15px;
    font-weight: 700;
}
.ncck-kb-helpful form { margin: 0; }
.ncck-kb-vote-group { display: flex; flex-wrap: wrap; gap: 10px; }

/* -- Native button geometric normalization (.btn / .btn-sm): Align the .ncck-btn base of the public
   site --------- The .btn size/font weight of native Bootstrap is another source of "original
   feeling". Here only the geometry and skin are changed, the type / name / value / id are not changed.
   The search primary button has been separately finalized (52px) above, and its .kb-search
   .btn-primary selector is more specific and is not affected by this paragraph. */
.ncck-kbpage .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    border-radius: var(--ncck-radius-sm);
    font-family: var(--ncck-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease,
                background-color 0.15s ease, box-shadow 0.15s ease;
}
.ncck-kbpage .btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; }
.ncck-kbpage .ncck-kb-vote { height: 40px; font-size: 14px; } /* The look and feel of the ticket button does not require sm */

/* -- secondary / default buttons (vote / back / edit) --------------------- */
.ncck-kbpage .btn-secondary,
.ncck-kbpage .btn-default {
    border: 1px solid var(--ncck-border);
    background: var(--ncck-surface);
    color: var(--ncck-text);
}
.ncck-kbpage .btn-secondary:hover,
.ncck-kbpage .btn-secondary:focus,
.ncck-kbpage .btn-default:hover,
.ncck-kbpage .btn-default:focus {
    border-color: var(--ncck-primary);
    color: var(--ncck-primary);
    background: var(--ncck-surface);
    /* Same feel as body.ncck-public .ncck-btn--outline:hover */
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -10px rgba(15, 24, 48, 0.25);
}
.ncck-kbpage .btn-secondary:focus-visible,
.ncck-kbpage .btn-default:focus-visible { outline: 2px solid var(--ncck-primary); outline-offset: 2px; }
.ncck-kbpage .btn-secondary:active,
.ncck-kbpage .btn-default:active { transform: none; background: var(--ncck-bg); box-shadow: none; }
.ncck-kbpage .btn-secondary:disabled,
.ncck-kbpage .btn-default:disabled { opacity: 0.6; cursor: not-allowed; }

/* -- Footer action area (return/edit by administrator): native .float-right renders as auto margins --- */
.ncck-kb-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}
.ncck-kb-actions .float-right { float: none !important; margin-left: auto; }

/* -- native alert (the "thank you rating" of the article page is rendered by includes/alert.tpl and is
   located outside of .ncck-kbpage)-> NCCK notification strip ---------------------------------------- */
body:is([class*="page-knowledgebase"], .page-serverstatus) #main-body .alert {
    margin-bottom: 20px;
    padding: 14px 18px;
    border: 1px solid var(--ncck-border);
    border-left: 3px solid var(--ncck-success);
    border-radius: var(--ncck-radius);
    background: var(--ncck-surface);
    box-shadow: 0 1px 2px rgba(14, 24, 48, 0.04);
    color: var(--ncck-text);
    font-family: var(--ncck-font);
    font-size: 14.5px;
}
body:is([class*="page-knowledgebase"], .page-serverstatus) #main-body .alert-info { border-left-color: var(--ncck-primary); }
body:is([class*="page-knowledgebase"], .page-serverstatus) #main-body .alert-danger { border-left-color: var(--ncck-danger); }

/* -- responsive ----------------------------------------------------------- */
@media (max-width: 767.98px) {
    .ncck-kb-head { margin-bottom: 22px; }
    .ncck-kb-title { font-size: 25px; }
    .ncck-kb-sub { font-size: 14.5px; }
    /* The order is the priority (these are two types of selectors): first general card-body, and then cover more specifically one by one. */
    .ncck-kbpage .card-body { padding: 18px 18px; }
    .ncck-kb-popular > .card-body { padding: 16px 18px; }
    .ncck-kb-article > .card-body { padding: 22px 20px; }
    .ncck-kb-article h1 { font-size: 23px; }
    .ncck-kbpage .list-group-item { padding: 14px 18px; }
    .ncck-kb-actions .float-right { margin-left: 0; }
}
@media (max-width: 575px) {
    .ncck-kbpage .kb-search .form-control,
    .ncck-kbpage .kb-search .btn-primary { height: 46px; }
    .ncck-kbpage .kb-search .btn-primary { padding: 0 16px; }
    .ncck-kbpage .kb-category .h5 { flex-wrap: wrap; }
    .ncck-kbpage .kb-category small { padding-left: 0; }
}

/* ============================================ PDc /servers/<slug> product ...git */

/* -- hero: compact light-canvas deep-ink form (same variant as --srv): no ...git */
.ncck-pagehero--pd {
    min-height: 0;
    padding: 52px 0 40px;
    background-color: var(--ncck-bg);
}
.ncck-pagehero--pd .ncck-pagehero-title {
    color: var(--ncck-text);
    font-size: 40px;
}
.ncck-pagehero--pd .ncck-pagehero-subtitle { color: var(--ncck-text-muted); }

/* -- page CTA buttons: complete the frozen :hover-only .ncck-btn base to four ...git */
.ncck-pdpage .ncck-btn--primary:focus {
    background: var(--ncck-primary-hover);
    border-color: var(--ncck-primary-hover);
}
.ncck-pdpage .ncck-btn--outline:focus {
    color: var(--ncck-primary);
    border-color: var(--ncck-primary);
}
.ncck-pdpage .ncck-btn:focus-visible {
    outline: 2px solid var(--ncck-primary);
    outline-offset: 2px;
}
.ncck-pdpage .ncck-btn:active { transform: translateY(1px); }

/* -- body: content column + sticky purchase rail -- */
.ncck-pdbody { padding: 8px 0 80px; background: var(--ncck-bg); }
.ncck-pd-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 32px;
    align-items: start;
}
.ncck-pd-main { min-width: 0; }
.ncck-pd-block { margin-bottom: 32px; }
.ncck-pd-block:last-child { margin-bottom: 0; }
.ncck-pd-h2 {
    margin: 0 0 14px;
    color: var(--ncck-text);
    font-size: 20px;
    font-weight: 800;
}
.ncck-pd-lead {
    margin: 0;
    color: var(--ncck-text-muted);
    font-size: 15px;
    line-height: 1.8;
}

/* -- feature list -- */
.ncck-pd-flist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.ncck-pd-flist li {
    position: relative;
    padding-left: 26px;
    color: var(--ncck-text);
    font-size: 14px;
    line-height: 1.7;
}
.ncck-pd-flist li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--ncck-success);
    font-weight: 800;
}

/* -- spec table (definition rows) -- */
.ncck-pd-spectable {
    margin: 0;
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius);
    background: var(--ncck-surface);
    overflow: hidden;
}
.ncck-pd-specrow {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 16px;
    padding: 12px 18px;
    border-top: 1px solid var(--ncck-border);
}
.ncck-pd-specrow:first-child { border-top: 0; }
.ncck-pd-specrow dt {
    margin: 0;
    color: var(--ncck-text-muted);
    font-size: 13px;
    font-weight: 700;
}
.ncck-pd-specrow dd {
    margin: 0;
    color: var(--ncck-text);
    font-size: 14px;
    font-weight: 600;
}

/* -- checkout note strip: warning-token amber tint (same pair as .nsrv-note),
      glyph is pseudo-element content, not copy -- */
.ncck-pd-note {
    margin: 24px 0 0;
    padding: 13px 18px;
    background: rgba(201, 138, 6, 0.08);
    border: 1px solid rgba(201, 138, 6, 0.30);
    border-radius: var(--ncck-radius);
    color: #8a5a1a;
    font-size: 13px;
    line-height: 1.7;
}
.ncck-pd-note::before { content: "\26A0\20"; opacity: 0.8; }

/* -- purchase rail -- */
.ncck-pd-rail { position: sticky; top: calc(var(--ncck-toolbar-h) + var(--ncck-nav-h) + 16px); }
.ncck-pd-buycard {
    padding: 22px;
    background: var(--ncck-surface);
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* -- price block (purchasable state) -- */
.ncck-pd-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.ncck-pd-price-from {
    color: var(--ncck-text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.ncck-pd-price-amt {
    color: var(--ncck-text);
    font-size: 30px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.ncck-pd-price-per { color: var(--ncck-text-muted); font-size: 13px; }
.ncck-pd-setup {
    margin: 8px 0 0;
    color: var(--ncck-text-muted);
    font-size: 12.5px;
}
.ncck-pd-cta { width: 100%; margin-top: 18px; }
.ncck-pd-buynote {
    margin: 12px 0 0;
    color: var(--ncck-text-muted);
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
}

/* -- not-for-sale panel (gate branch ③/④): no cart CTA, clear prohibition,
      danger-token framing; alt action routes to contact sales, never home -- */
.ncck-pd-unavail {
    border-color: rgba(201, 48, 48, 0.32);
    background: rgba(201, 48, 48, 0.05);
}
.ncck-pd-unavail-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(201, 48, 48, 0.12);
    color: var(--ncck-danger);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.ncck-pd-unavail-body {
    margin: 14px 0 0;
    color: var(--ncck-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.7;
}
.ncck-pd-unavail-why {
    margin: 8px 0 0;
    color: var(--ncck-text-muted);
    font-size: 13px;
    line-height: 1.7;
}
.ncck-pd-altcta { width: 100%; margin-top: 18px; }

/* -- responsive: rail drops under the content column, un-sticks -- */
@media (max-width: 991px) {
    .ncck-pd-split { grid-template-columns: 1fr; }
    .ncck-pd-rail { position: static; }
    .ncck-pd-specrow { grid-template-columns: 140px minmax(0, 1fr); }
}
@media (max-width: 575px) {
    .ncck-pagehero--pd .ncck-pagehero-title { font-size: 30px; }
    .ncck-pd-specrow { grid-template-columns: 1fr; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .ncck-pdpage .ncck-btn:active { transform: none; }
}

/* ============================================================================ ...git */

/* -- 1. hero: flat bottom → three layers of light background, two-color halo + blue dye dot matrix::before -- */
body.ncck-public.page-homepage .ncck-hero {
    position: relative;
    isolation: isolate;                 /* Isolate stack context: ::before dot matrix is below content and below header */
    background: var(--ncck-grad-hero);  /* Replaces flat var(--ncck-bg); border-bottom is preserved by above basis rules */
}
/* utilbar deterministic compensation (the agreed exception-tracking rule: utilbar is deterministic 1:1, 2026-07-23)—— ...git */
@media (min-width: 992px) {
    body.ncck-public.page-homepage .ncck-hero {
        padding-top: calc(var(--ncck-toolbar-h) + var(--ncck-nav-h) + 142px);
    }
}
body.ncck-public.page-homepage .ncck-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: var(--ncck-hero-dotglow);   /* Blue dye dot matrix, 26px tile */
    background-size: 26px 26px;
    -webkit-mask-image: var(--ncck-hero-dotmask); /* Focus on upper left, fade outward */
    mask-image: var(--ncck-hero-dotmask);
}
body.ncck-public.page-homepage .ncck-hero > .ncck-container {
    position: relative;
    z-index: 1;                         /* The content is lifted above the dot matrix layer to ensure clear text */
}
/* hero title live whmcs8 calibration: font-size 50 / letter-spacing -1.4px(=-0.028em) ...git */
body.ncck-public.page-homepage .ncck-hero-title {
    line-height: 1.14;
    letter-spacing: -0.028em;
    margin-bottom: 24px;   /* w8 hero h1 mb=24(base 18); Deterministic 1:1, homepage scope(pagehero keep base) */
}
/* w8 hero subtitle mt=18(base mt=0)——h1→subtitle gap align w8’s 42(=h1 mb24 + subtitle mt18); deterministic base */

/* hero sublabel live whmcs8 calibration: 24px / line-height 1.7 / color #64748b. Three-way conflict
   (currently 20 / whmcs8 static 17.5 / P9a target 24) is set to 24 by live - P9a pair. */
body.ncck-public.page-homepage .ncck-hero-subtitle {
    margin-top: 18px;
    font-size: 24px;
    line-height: 1.7;
    color: var(--ncck-hero-sub-ink)
}
/* hero panel/capsule: neutral shadow → blue glow (= whmcs8 --nk-shadow) */
body.ncck-public.page-homepage .np-panel,
body.ncck-public.page-homepage .np-chip {
    box-shadow: var(--ncck-glow-panel);
}
/* ★ The subtitle font size of hero (20px) has nothing to do with the dot matrix/kerning, and has
   nothing to do with the closing punch-list P9a (target 24px), whmcs8 (17.5px). Three-party conflict -
   According to the task "Don't make blind changes, wait for the stakeholder to set a benchmark", the subtitle
   font size will not be changed in this paragraph. */

/* -- 3/4/7/8. Feature card (.ncck-fcard shared): static flat (box-shadow:none pure border) + link card
   hover blue glow. The --featured ring is NCCK's own state and is retained without changing values.
   -- */
body.ncck-public.page-homepage .ncck-fcard:not(.ncck-fcard--featured) {
    box-shadow: none;
}
/* hover blue glow: whmcs8 is applied to all feature cards (theme-custom.css:3239), so it is extended
   to non-link div cards (hardware/lines). glow≠lift, does not imply interactivity; stakeholder 1:1 order
   overwrites the old "non-linked card does not hover" decision. --Except for featured featured ring
   cards (own status). */
body.ncck-public.page-homepage .ncck-fcard:not(.ncck-fcard--featured):hover {
    box-shadow: var(--ncck-glow-card);  /* Alternative to neutral --ncck-ring,--ncck-shadow-lg */
}
body.ncck-public.page-homepage a.ncck-fcard:hover {
    border-color: transparent;
}

/* ---- #1: Also-available additional capability strip (DDoS/IP Transit degradation strip, below the homepage product area; from the homepage detail refinement sample)---- */
.nk-alsosec { padding-top: 0; }
.nk-alsorow { display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; }
.nk-alsorow .nk-alsocap { display: flex; align-items: center; color: var(--ncck-text-muted); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; padding: 0 4px; }
.nk-alsorow a { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 3px; padding: 16px 20px; background: var(--ncck-surface); border: 1px solid var(--ncck-border); border-radius: var(--ncck-radius); transition: border-color .2s, box-shadow .2s, transform .18s; }
.nk-alsorow a b { color: var(--ncck-heading); font-size: 15px; font-weight: 700; }
.nk-alsorow a i { color: var(--ncck-text-muted); font-size: 13px; font-style: normal; }
/* Stakeholder 2026-07-25 identified: These two cards "still have underlines and have no effect of other
   cards." ① Add text-decoration:none (it is <a>, underlined by default) ② hover Unify card language
   for all sites: -4px lift + blue border + layered shadow + bottom 3px gradient bar */
.nk-alsorow a { position: relative; overflow: hidden; text-decoration: none; }
.nk-alsorow a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: var(--ncck-grad-accent-bar); opacity: 0; transition: opacity .25s ease;
}
.nk-alsorow a:hover,
.nk-alsorow a:focus { text-decoration: none; }
.nk-alsorow a:hover {
    transform: translateY(-4px);
    border-color: rgba(15, 92, 255, 0.32);
    box-shadow: 0 2px 4px rgba(14, 24, 48, 0.05), 0 20px 40px -18px rgba(15, 92, 255, 0.26);
}
.nk-alsorow a:hover::after { opacity: 1; }
@media (max-width: 991.98px) { .nk-alsorow { flex-direction: column; } .nk-alsorow .nk-alsocap { padding: 0 0 4px; } }

/* -- 3/7. Unified hover language for cards (Stakeholder Feedback 2026-07-24: Product card has effect/hardware
   card has no effect/step card only has shadow + bottom gradient bar only in product card). The
   three-piece set is combined into a set of site-wide selectors, no longer repeated by block: ① lift
   -4px + blue border + layered shadow ② Bottom 3px gradient emphasis bar (whmcs8::after original
   value) overflow:hidden makes the 3px bar fit the 16px border radius. Acts on all .ncck-fcard
   (products4/ hardware/lines/steps/dualdef/soon and all internal pages). -- */
body.ncck-public .ncck-fcard {
    position: relative;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.2s ease;
}
body.ncck-public .ncck-fcard::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--ncck-grad-accent-bar);
    opacity: 0;
    transition: opacity 0.25s ease;
}
body.ncck-public .ncck-fcard:hover {
    transform: translateY(-4px);
    border-color: rgba(15, 92, 255, 0.32);
    box-shadow: 0 2px 4px rgba(14, 24, 48, 0.05), 0 20px 40px -18px rgba(15, 92, 255, 0.26);
}
body.ncck-public .ncck-fcard:hover::after {
    opacity: 1;
}

/* -- 5. Data center photo card (.nlc/.nlc-cover shared, .ncck-loccards also reused by locations page): ...git */
body.ncck-public.page-homepage .ncck-loccards .nlc-cover::after {
    background: var(--ncck-grad-cover-scrim);  /* Replaces flat rgba(4,10,24, .38) */
}
body.ncck-public.page-homepage .ncck-loccards .nlc {
    position: relative;                 /* .nlc already has overflow:hidden + 18px border radius (batch D G27) */
}
body.ncck-public.page-homepage .ncck-loccards .nlc::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--ncck-grad-accent-bar);
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 2;                         /* Layer with .nlc-cover::after cover to avoid naming conflicts */
}
body.ncck-public.page-homepage .ncck-loccards .nlc:hover::after {
    opacity: 1;
}

/* -- 6. Data band (.ncck-statband shared network/location-detail): flat rail → ...git */
body.ncck-public.page-homepage .ncck-statband {
    background: var(--ncck-grad-statband);
}
/* [2026-07-21 Manager review SUPERSEDED] Original note "w8 without capsule bottom/side" via live whmcs8 homepage...git */
body.ncck-public.page-homepage .ncck-statband .ncck-sec-cap {
    color: var(--ncck-stat-accent);     /* #9cc3ff (existing frozen token) */
    background: var(--ncck-statcap-bg);
    border: 1px solid var(--ncck-statcap-border);
}

/* -- 9. CTA (.ncck-cta/.ncck-cta-card shared location-detail) ★The top item in this round: ...git */
body.ncck-public.page-homepage .ncck-cta {
    padding: 88px 0;                         /* live whmcs8 = 88px */
    background: var(--ncck-grad-cta-band);   /* Outside: blue gradient strip (90deg #0443c4→#0656ff) */
}
body.ncck-public.page-homepage .ncck-cta-card {
    max-width: none;
    margin: 0 auto;
    text-align: center;
    padding: 64px 40px;                      /* live whmcs8 ground truth 64/40 */
    background: var(--ncck-grad-cta-card);   /* Inside: navy dual radial glow card */
    border-radius: 26px;                     /* whmcs8 .section-box */
    /* box-shadow:none —— live whmcs8 internal card has no shadow, dual radial gradient is depth (strictly 1:1) */
}
body.ncck-public.page-homepage .ncck-cta-subtitle {
    color: var(--ncck-cta-subtitle);         /* live rgba(255,255,255, .72) */
    font-size: 20px;                         /* live whmcs8 = 20px(base 18) */
}
/* CTA button parity (whmcs8 is restyled in .ncck-cta scope; homepage scope is hung here, and the ondark
   button on public page pagehero is not affected). The white background is changed to dark blue and
   the edges are removed; the border section is narrowed. */
body.ncck-public.page-homepage .ncck-cta .ncck-btn--ondark {
    color: var(--ncck-cta-btn-ink);          /* White background + #0443c4 dark blue text */
    border-color: transparent;               /* White background inherits from base rules */
}
body.ncck-public.page-homepage .ncck-cta .ncck-btn--ondark-outline {
    border-color: rgba(255, 255, 255, 0.4);
}
body.ncck-public.page-homepage .ncck-cta .ncck-btn--ondark-outline:hover {
    border-color: rgba(255, 255, 255, 1);
    background: rgba(255, 255, 255, 0.08);
}

/* -- G4 (w8 audit 2026-07-22): CTA section and homepage of location-detail.tpl:326-345...git */
.ncck-locdetail .ncck-cta {
    padding: 88px 0;
    background: var(--ncck-grad-cta-band);
}
.ncck-locdetail .ncck-cta-card {
    max-width: none;
    margin: 0 auto;
    text-align: center;
    padding: 64px 40px;
    background: var(--ncck-grad-cta-card);
    border-radius: 26px;
}
.ncck-locdetail .ncck-cta-subtitle {
    color: var(--ncck-cta-subtitle);
    font-size: 20px;
}
.ncck-locdetail .ncck-cta .ncck-btn--ondark {
    color: var(--ncck-cta-btn-ink);
    border-color: transparent;
}
.ncck-locdetail .ncck-cta .ncck-btn--ondark-outline {
    border-color: rgba(255, 255, 255, 0.4);
}
.ncck-locdetail .ncck-cta .ncck-btn--ondark-outline:hover {
    border-color: rgba(255, 255, 255, 1);
    background: rgba(255, 255, 255, 0.08);
}
@media (max-width: 768px) {
    /* D9 runtime verification segment by segment (2026-07-22, --viewport 768/375 are the same): w8 locdetail cta ground truth ...git */
    .ncck-locdetail .ncck-cta { padding: 88px 0; }
    .ncck-locdetail .ncck-cta-card { border-radius: 20px; }
    .ncck-locdetail .ncck-cta-title { font-size: 30px; }
}

/* -- homepage CTA responsive (whmcs8 target breakpoint 768; only homepage scope, do not change public page breakpoint) -- */
@media (max-width: 768px) {
    /* D9 Same as above annotation: Home cta ground truth both tiers are 88px 0; [D9 build] cta-card inner
   layer is the same as above, convergence conclusion, remove 48px 24px shrink, inherit the base rule
   64px 40px, only keep border-radius. */
    body.ncck-public.page-homepage .ncck-cta { padding: 88px 0; }
    body.ncck-public.page-homepage .ncck-cta-card { border-radius: 20px; }
    body.ncck-public.page-homepage .ncck-cta-title { font-size: 30px; }
}

/* Reduced motion: disable the accent-bar fade and card lift. Keep the selector synchronized with the
   site-wide .ncck-fcard hover language. */
@media (prefers-reduced-motion: reduce) {
    body.ncck-public .ncck-fcard,
    body.ncck-public .ncck-fcard::after,
    body.ncck-public.page-homepage .ncck-loccards .nlc::after {
        transition: none;
    }
    body.ncck-public .ncck-fcard:hover { transform: none; }
}

/* ==== Hero panel enrichment (2026-07-21 Stakeholder identification is simplified compared to whmcs8) + site-wide hover underline suppression ==== */
/* City emblem (whmcs8: HKG blue/SEL purple/LAX sky blue; white lettering with AA contrast on each background) */
/* 2026-07-22 hero review rejection F6 Correction: verified live behavior = light gradient background + dark ink characters (not white characters on a solid background) */
body.ncck-public.page-homepage .np-node--hkg { background: var(--ncck-node-hkg-grad); color: var(--ncck-node-hkg-ink); }
body.ncck-public.page-homepage .np-node--sel { background: var(--ncck-node-sel-grad); color: var(--ncck-node-sel-ink); }
body.ncck-public.page-homepage .np-node--lax { background: var(--ncck-node-lax-grad); color: var(--ncck-node-lax-ink); }
/* Delay digital blue (whmcs8: digital blue, destination city gray) */
body.ncck-public.page-homepage .np-lat { color: var(--ncck-grad-blue); }
body.ncck-public.page-homepage .np-lat small { color: var(--ncck-hero-sub-ink); }  /* live #64748b */
/* The pill transposition (chip1 upper right/chip2 lower left) has been changed to absolute positioning
   ground truth (:699-712/ min-width:992px coverage block) with the D2 direct port. The float coverage
   rule is superseded and removed - float would affect text flow and suppress .np-head (stakeholder
   acceptance root cause③). The absolute positioning version has been implemented in the basic rules, so
   it is not left here. */
/* The right side of the footnote is disclosed (the left is empty); just align it to the left, and it does not occupy space when the right span is empty. */
body.ncck-public.page-homepage .np-foot span:empty { display: none; }

/* Site-wide repair (stakeholder command "whmcs8 no underline"): link cards/buttons hover|focus will always
   have no underline. The a:hover of the core style will underline the entire card text
   (text-decoration is propagated from the anchor point, the sub-element cannot be canceled and must be
   set on the anchor itself); the body prefix increases the specificity and wins the core rule. */
body.ncck-public a.ncck-fcard:hover, body.ncck-public a.ncck-fcard:focus,
body.ncck-public .ncck-fcard-link:hover, body.ncck-public .ncck-fcard-link:focus,
body.ncck-public a.nlc:hover, body.ncck-public a.nlc:focus,
body.ncck-public .ncck-pcard:hover, body.ncck-public .ncck-pcard:focus,
body.ncck-public .ncck-locrow:hover, body.ncck-public .ncck-locrow:focus,
body.ncck-public .ncck-locsoon-link:hover, body.ncck-public .ncck-locsoon-link:focus,
body.ncck-public .ncck-dd-all:hover,
body.ncck-public a.ncck-btn:hover, body.ncck-public a.ncck-btn:focus,
/* Stakeholder feedback #3 (2026-07-24): The menu Network/Contact hover appears underlined - these two items
   are simple menu items of type <a> (Products/Locations/Support is <button> and naturally none), and
   needs to be explicitly suppressed */
body.ncck-public .nk-alsorow a:hover, body.ncck-public .nk-alsorow a:focus,
body.ncck-public a.ncck-menu-link:hover, body.ncck-public a.ncck-menu-link:focus,
body.ncck-public .ncck-dd-list > li > a:hover, body.ncck-public .ncck-dd-list > li > a:focus,
body.ncck-public .ncck-auth-switch a:hover, body.ncck-public .ncck-auth-switch a:focus {
    text-decoration: none;
}

/* ============================================== /servers H1-H3 runtime rows ...git */
.nsrv-row {
    display: grid;
    grid-template-columns: 210px 1fr auto 150px;
    align-items: center;
    /* SRV-768-RETUNE Route D (2026-07-22 breakpoint probe, w8/servers 479-1440 six-width live
   measurement): w8 grid gap three tiers constant 20px, previously 18px no runtime verification source;
   padding desktop tier 26/30 has been aligned (≤991.98 bucket and 20/22 ground truth coverage, see
   below). */
    gap: 20px;
    padding: 26px 30px;
    background: var(--ncck-surface);
    border: 1px solid var(--ncck-border);
    border-radius: 14px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.nsrv-row:hover {
    border-color: rgba(15, 92, 255, 0.35);
    box-shadow: var(--ncck-shadow-base);
}
/* Detail refinement: product line static fine shadow + hover lift + light blue background + soft shadow (from homepage refinement draft nk-polish v2 §9) */
body.ncck-public .nsrv-row { box-shadow: 0 1px 2px rgba(14,24,48,.035); }
/* The stakeholder requested "unified style for the site" (2026-07-24): lift/border/shadow alignment .ncck-fcard standard language */
body.ncck-public .nsrv-row:hover { transform: translateY(-4px); border-color: rgba(15,92,255,.32); background: linear-gradient(0deg, rgba(15,92,255,.015), rgba(15,92,255,.015)), var(--ncck-surface); box-shadow: 0 2px 4px rgba(14,24,48,.05), 0 20px 40px -18px rgba(15,92,255,.26); }
.nsrv-rname {
    font-size: 16px;
    /* SRV-768-RETUNE Route D (2026-07-22, supervisor review PASS-WITH-FIXES, manager final ruling, ...git */
    font-weight: 800;
    line-height: 1.45;
    color: var(--ncck-text);
    overflow-wrap: anywhere;
}
.nsrv-rspecs {
    display: flex;
    flex-wrap: wrap;
    /* ① Main root cause (2026-07-22 live item-by-item comparison w8: 3927 same product row): w8 ground truth row and row spacing...git */
    gap: 10px 26px;
}
.nsrv-rspecs span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* SRV-768-RETUNE route D:w8 computed fs14.5/fw300 (echoing the site --ncck-fw-light ...git */
    font-size: 14.5px;
    font-weight: 300;
    color: var(--ncck-text-muted);
    /* ①Added (2026-07-22 live retest after second drill-down): The break point has been aligned with the gap repair w8(3+2...git */
    line-height: 28px;
}
.nsrv-rspecs svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    color: var(--ncck-text-muted);
}
/* Detailed refinement: product row specification icon changed to theme blue (from homepage refined draft nk-polish v2 §9) */
body.ncck-public .nsrv-rspecs svg { color: var(--ncck-primary); opacity: .85; }
.nsrv-rspecs i {
    font-style: normal;
    overflow-wrap: anywhere;
}
.nsrv-rprice {
    color: var(--ncck-text-muted);
    /* SRV-768-RETUNE route D:w8 computed fs13.5/fw300/lh28(1440/768 same value, ...git */
    font-size: 13.5px;
    font-weight: 300;
    line-height: 28px;
    white-space: nowrap;
}
.nsrv-rprice b {
    color: var(--ncck-primary);
    font-size: 24px;
    /* SRV-768-RETUNE route D:w8 computed fw500/lh28 (original 700/inherited 36). */
    font-weight: 500;
    line-height: 28px;
    margin-right: 3px;
}
/* Detailed refinement: product line price equal-width numbers + tight letter spacing (from nk-polish v2 §9; font weight w8 1:1 calibrated fw500, only mono/tabular) */
body.ncck-public .nsrv-rprice b { font-family: var(--ncck-font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; font-weight: 500; }
a.nsrv-rbuy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* SRV-768-RETUNE Route D: w8 Desktop tier padding 13px 10px (150px fixed width column, no visual
   difference, still closed according to ground truth; ≤991.98 bucket coverage is 11px 18px ground
   truth). The three tiers of fs15/fw700 have the same value (the original 14/600 are one step),
   which was confirmed by the supervisor's full retest of 24 lines. */
    padding: 13px 10px;
    background: var(--ncck-primary);
    border-radius: 10px;
    color: var(--ncck-surface);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: background-color 150ms ease;
    /* ①Added secondary drill-down (2026-07-22): The row height of a single row specification is determined by this button column instead of rspecs...git */
    line-height: 28px;
}
a.nsrv-rbuy:hover,
a.nsrv-rbuy:focus {
    background: var(--ncck-primary-hover);
    color: var(--ncck-surface);
    text-decoration: none;
}
a.nsrv-rbuy:focus-visible {
    outline: 2px solid var(--ncck-primary);
    outline-offset: 2px;
}
a.nsrv-rbuy:active { transform: translateY(1px); }
/* Detail refinement: product line purchase button gradient + inner highlight, hover micro-rise (from homepage refinement draft nk-polish v2 §9) */
body.ncck-public a.nsrv-rbuy { background: linear-gradient(180deg, var(--ncck-primary), var(--ncck-primary-hover)); box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 8px 16px -8px rgba(15,92,255,.5); }
body.ncck-public a.nsrv-rbuy:hover, body.ncck-public a.nsrv-rbuy:focus { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.26) inset, 0 12px 22px -8px rgba(15,92,255,.62); }
.nsrv-empty {
    padding: 48px 24px;
    text-align: center;
    background: var(--ncck-surface);
    border: 1px dashed var(--ncck-border);
    border-radius: 14px;
    color: var(--ncck-text-muted);
    font-size: 14px;
    line-height: 1.7;
}

/* -- responsive: two-column fold under 992px (name/price row, then specs,
      then a full-width buy button — map §4) -- */
@media (max-width: 991px) {
    .nsrv-row {
        /* srvapp diagnostic record (2026-07-22 live line-by-line runtime verification whmcs8 /servers,768 and 375...git */
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name price"
            "specs specs"
            "buy buy";
        /* Route D: w8 ground truth gap 20 (three tiers constant), padding 20px 22px (≤991.98 tier; the
   previous 14px/22px 20px were up and down and left and right transposed + no source value). */
        gap: 20px;
        padding: 20px 22px;
    }
    .nsrv-rname { grid-area: name; }
    .nsrv-rprice { grid-area: price; }
    .nsrv-rspecs { grid-area: specs; }
    
    /* Route D (2026-07-22 Alignment Probe): Five sets of typesetting values have been moved up the base rule (w8 three tiers have the same value, ...git */
    a.nsrv-rbuy {
    grid-area: buy;
    padding: 11px 18px; justify-self: end
}
}

/* Route D: w8 row-height rule switching breakpoint runtime verification
   (479/576/700/767→26px,768/992→28px): ≤767.98 tier rspecs/rprice/rprice b/rbuy row height full family
   closes 26 (rname's 1.45 is constant regardless of tier). rbuy The tier height is 48=11+11+26, which
   is consistent with w8@375 runtime verification. */
@media (max-width: 767.98px) {
    .nsrv-rspecs span,
    .nsrv-rprice,
    .nsrv-rprice b,
    a.nsrv-rbuy { line-height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .nsrv-row,
    a.nsrv-rbuy { transition: none; }
    a.nsrv-rbuy:active { transform: none; }
}

/* ============================================================================ ...git */

/* -- M3 statband halo expansion (w8:2948-2953 double radial + #0b1220, with existing tokens...git */
.ncck-netpage .ncck-statband,
.ncck-locdetail .ncck-statband {
    background: var(--ncck-grad-statband);
}
/* H4 (2026-07-22 runtime evidence, stakeholder direction ②: network desktop 1440 profile >±16 segments only...git */
.ncck-netpage .ncck-statband .ncck-section-head {
    margin-bottom: 32px;
}
/* OP-2 hk residual -41: Tried to imitate w8 live value (.ncck-statband h2 margin-bottom:28px, ...git */
/* Override base rules (.ncck-statband .ncck-sec-cap white .72) and base .ncck-sec-cap light blue; base
   class has no border, +1px has negligible impact on layout */
.ncck-netpage .ncck-statband .ncck-sec-cap,
.ncck-locdetail .ncck-statband .ncck-sec-cap {
    color: var(--ncck-stat-accent);
    background: var(--ncck-statcap-bg);
    border: 1px solid var(--ncck-statcap-border);
}

/* -- M7 network china-routes data card (ground truth w8:4160-4170). G3 (w8 audit 2026-07-21): ...git */
.ncck-netpage .ncn-stat,
.ncck-locdetail .ncn-stat {
    padding: 26px 28px;
    border-radius: 16px;   /* Batch D G27 (w8 audit 2026-07-21): --ncck-radius-lg has been shipped with G27...git */
    box-shadow: var(--ncck-glow-panel);     /* w8 var(--nk-shadow) is consistent with the existing token value by value */
}
.ncck-netpage .ncn-stat > b,
.ncck-locdetail .ncn-stat > b { margin-bottom: 8px; font-size: 18px; font-weight: 800; }
.ncck-netpage .ncn-stat > p,
.ncck-locdetail .ncn-stat > p { margin: 0 0 18px; font-size: 13.5px; line-height: 1.7; }
/* Field line: container border-top/left + grid border-right/bottom (w8 grid has no gap) */
.ncck-netpage .ncn-grid,
.ncck-locdetail .ncn-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid var(--ncck-border);
    border-left: 1px solid var(--ncck-border);
}
.ncck-netpage .ncn-grid > div,
.ncck-locdetail .ncn-grid > div {
    padding: 18px 16px;
    border-right: 1px solid var(--ncck-border);
    border-bottom: 1px solid var(--ncck-border);
}
/* Value 22px equal width -.02em(w8:4168); weight 800 base rule; color retention
   var(--ncck-primary)——w8 is #0656ff, the task is not listed to change the color, it remains unchanged */
.ncck-netpage .ncn-grid i,
.ncck-locdetail .ncn-grid i {
    font-size: 22px;
    font-family: var(--ncck-font-mono);
    letter-spacing: -0.02em;
}
.ncck-netpage .ncn-grid span,
.ncck-locdetail .ncn-grid span { margin-top: 4px; font-size: 12.5px; }

/* -- L2 scrim extension:locations three-card cover vertical gradient (w8:4195 .nlc-cover::after ...git */
.ncck-locpage .ncck-loccards .nlc-cover::after {
    background: var(--ncck-grad-cover-scrim);
}
.ncck-locdetail .ncck-pagehero-scrim {
    background: var(--ncck-grad-hero-scrim);
}

/* ============================== M2 icon system (batch 6): icon-map.tpl stroke SVG size ...git */
.nfk-ico svg { width: 24px; height: 24px; }
/* Batch 6 legacy ticket closing (2026-07-21 manager, strict 1:1 total ruling): add w8 chip 26px base...git */
.np-chip .np-ico {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 8px;
    background: var(--ncck-chip-ico-bg);
}
.np-chip svg { width: 15px; height: 15px; color: var(--ncck-grad-blue); flex: none; }

/* ============================== B10 user invitation family — Auth-shell sub-skin (design specification §4/§6) ...git */
.ncck-usr-acctlist {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ncck-usr-acctrow {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius-sm);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ncck-usr-acctrow:hover,
.ncck-usr-acctrow:focus {
    border-color: var(--ncck-primary);
    box-shadow: 0 0 0 3px rgba(15, 92, 255, 0.10);
    text-decoration: none;
    color: inherit;
}
.ncck-usr-acctrow.disabled {
    opacity: .55;
    pointer-events: none;
}
.ncck-usr-acctico {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: var(--ncck-radius-sm);
    background: var(--ncck-bg);
    color: var(--ncck-primary);
    font-size: 16px;
}
.ncck-usr-acctbody {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ncck-usr-acctname {
    font-weight: 600;
    color: var(--ncck-text);
}
.ncck-usr-acctmeta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--ncck-text-muted);
}
.ncck-usr-acctlast {
    color: var(--ncck-text-muted);
}
.ncck-usr-acctarrow {
    flex: none;
    color: var(--ncck-text-muted);
    font-size: 13px;
}

/* -- invitation-accept: login/register two-column native invite-box ------- */
.ncck-auth--invite.ncck-auth--wide {
    max-width: 860px;
}
.ncck-usr-invitebox {
    height: 100%;
    padding: 22px;
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius);
}
.ncck-usr-invitebox h2 {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 700;
    color: var(--ncck-text);
}

/* -- invitation-accepted success banner ------------------------------------ */
.ncck-usr-okico {
    display: inline-flex;
    margin-bottom: 16px;
    color: var(--ncck-primary);
    font-size: 40px;
}
.ncck-usr-accepted-title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    color: var(--ncck-text);
}

@media (max-width: 991.98px) {
    .ncck-usr-invitebox {
        margin-bottom: 16px;
    }
}

@media (max-width: 767.98px) {
    .ncck-usr-acctrow {
        padding: 12px 14px;
    }
    .ncck-usr-acctmeta {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* ============================================================================ ...git */

.ncck-auth--twofactor .card { overflow: hidden; }

.ncck-auth-head { margin-bottom: 22px; text-align: center; }
.ncck-auth-icon { display: inline-flex; margin-bottom: 14px; color: var(--ncck-primary); }
.ncck-auth-icon svg { width: 56px; height: 56px; }
.ncck-auth-title {
    margin: 0 0 8px;
    color: var(--ncck-text);
    font-family: var(--ncck-font);
    font-size: 24px;
    font-weight: 700;
}
.ncck-auth-subtitle {
    margin: 0;
    color: var(--ncck-text-muted);
    font-size: 14.5px;
    line-height: 1.5;
}

.ncck-auth-fieldlabel {
    margin-bottom: 8px;
    color: var(--ncck-text);
    font-size: 13.5px;
    font-weight: 600;
}
.ncck-auth-hint {
    margin: 8px 0 0;
    color: var(--ncck-text-muted);
    font-size: 12.5px;
}

/* -- OTP field: {$challenge} is module output (see template doc-comment) --
      generic element selectors, single-box letter-spacing treatment -- */
.ncck-auth-otpwrap input[type="text"],
.ncck-auth-otpwrap input[type="tel"],
.ncck-auth-otpwrap input[type="number"],
.ncck-auth-otpwrap input:not([type]) {
    width: 100%;
    height: 54px;
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius-sm);
    background: var(--ncck-surface);
    color: var(--ncck-text);
    font-family: var(--ncck-font-mono);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 10px;
    text-align: center;
    text-indent: 10px;
}
.ncck-auth-otpwrap input[type="text"]:hover,
.ncck-auth-otpwrap input[type="tel"]:hover,
.ncck-auth-otpwrap input[type="number"]:hover,
.ncck-auth-otpwrap input:not([type]):hover {
    border-color: var(--ncck-text-muted);
}
.ncck-auth-otpwrap input[type="text"]:focus,
.ncck-auth-otpwrap input[type="tel"]:focus,
.ncck-auth-otpwrap input[type="number"]:focus,
.ncck-auth-otpwrap input:not([type]):focus {
    border-color: var(--ncck-primary);
    box-shadow: 0 0 0 3px rgba(15, 92, 255, 0.15);
    outline: none;
}
.ncck-auth-otpwrap button[type="submit"],
.ncck-auth-otpwrap input[type="submit"] {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 12px 20px;
    border: 1px solid var(--ncck-primary);
    border-radius: var(--ncck-radius-sm);
    background: var(--ncck-primary);
    color: var(--ncck-surface);
    font-family: var(--ncck-font);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.ncck-auth-otpwrap button[type="submit"]:hover,
.ncck-auth-otpwrap input[type="submit"]:hover,
.ncck-auth-otpwrap button[type="submit"]:focus,
.ncck-auth-otpwrap input[type="submit"]:focus {
    background: var(--ncck-primary-hover);
    border-color: var(--ncck-primary-hover);
}
.ncck-auth-otpwrap button[type="submit"]:focus-visible,
.ncck-auth-otpwrap input[type="submit"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(15, 92, 255, 0.25);
    outline: none;
}

/* -- recovery-code field: NCCK-authored input, not module output -- */
.ncck-auth-reccode {
    text-align: center;
    font-family: var(--ncck-font-mono);
    font-size: 18px;
    letter-spacing: 3px;
}
.ncck-auth-reccode::placeholder {
    letter-spacing: 3px;
    color: var(--ncck-text-muted);
    opacity: 0.7;
}

.ncck-auth-btnrow {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

/* -- security notice strips: info (default state) / warn (recovery
      state), same rgba-tint pattern as the existing .nsrv-note strip -- */
.ncck-auth-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 18px 24px;
    padding: 12px 14px;
    border-radius: var(--ncck-radius);
    font-size: 13px;
    line-height: 1.5;
}
/* native .w-hidden is a plain "display: none" rule with no !important, so ...git */
.ncck-auth-notice.w-hidden { display: none; }
.ncck-auth-notice i { margin-top: 1px; font-size: 14px; }
.ncck-auth-notice--info {
    background: rgba(15, 92, 255, 0.06);
    border: 1px solid rgba(15, 92, 255, 0.20);
    color: var(--ncck-primary-hover);
}
.ncck-auth-notice--warn {
    margin: 0 0 18px;
    background: rgba(201, 138, 6, 0.08);
    border: 1px solid rgba(201, 138, 6, 0.30);
    color: var(--ncck-warning);
}

/* -- backup-state footer (mirrors the native #frmTwoFactorChallengeFooter ...git */
.ncck-auth-backfooter { text-align: center; }
.ncck-auth-backlink { font-size: 14px; }

@media (max-width: 767.98px) {
    .ncck-auth-icon svg { width: 48px; height: 48px; }
    .ncck-auth-title { font-size: 21px; }
    .ncck-auth-notice--info { margin-left: 16px; margin-right: 16px; }
    .ncck-auth-otpwrap input[type="text"],
    .ncck-auth-otpwrap input[type="tel"],
    .ncck-auth-otpwrap input[type="number"],
    .ncck-auth-otpwrap input:not([type]) {
        font-size: 19px;
        letter-spacing: 7px;
        text-indent: 7px;
    }
}

/* ==== W0 IconStroke single-stroke baseline (stakeholder audit Batch 3, 2026-07-24) ====================
   Public-shell counterpart to the rule at the top of ncck-client.css. The two shells follow a
   byte-synchronization discipline: this rule body (font-weight:400) must remain identical to the
   client.css rule. The only intentional difference is the scope list below; review both locations
   whenever either one changes.

   The stakeholder requirement was: "Use one outline style, with strokes around 1.75–2px."
   Evidence (locally bundled FA Pro 5.10.1 in fontawesome-all.min.css; no external request):
     .fa, .fas{font-family:"Font Awesome 5 Pro"; font-weight:900}
     .far{...font-weight:400}  .fal{...font-weight:300}
   All four @font-face entries share a family name and switch files through font-weight. Changing
   weight changes stroke thickness without changing the glyph, family, or bundle size. Regular(400)
   renders about 2px on a 24px canvas, within the requested range; Light(300) is about 1.5px and too
   thin, so use 400. All 119 repository glyphs were checked against the 1648 glyph-name entries in
   fa-regular-400.svg; none are missing. Include .fa because bare .fa aliases .fas (weight 900) in
   FA5. Exclude .fab (brand) and .fad (duotone): Brands has only one weight, so overriding it would
   make glyphs disappear. Escape hatch: add .ncck-keep-solid to an individual <i> if its contrast is
   insufficient; !important is unnecessary.

   Scope is deliberately limited to these three content-root classes, not all body.ncck-public:
     .ncck-kbpage — logged-out KB loads only public.css (header.tpl:24-30)
     .ncck-sup    — same for logged-out supportticketsubmit
     .ncck-cart   — root class at viewcart.tpl:29 ($inShoppingCart always uses the public shell)
   A global body.ncck-public rule would alter accepted marketing visuals on the homepage and
   data-center pages, violating regression guard 5.
   ============================================================================ */
.ncck-kbpage .fa:not(.ncck-keep-solid),
.ncck-kbpage .fas:not(.ncck-keep-solid),
.ncck-kbpage .fal:not(.ncck-keep-solid),
.ncck-sup .fa:not(.ncck-keep-solid),
.ncck-sup .fas:not(.ncck-keep-solid),
.ncck-sup .fal:not(.ncck-keep-solid),
.ncck-cart .fa:not(.ncck-keep-solid),
.ncck-cart .fas:not(.ncck-keep-solid),
.ncck-cart .fal:not(.ncck-keep-solid) {
    font-weight: 400;
}
/* ==== /W0 IconStroke single stroke baseline ============================================== */

/* ==== W0 IconTile container primitive - .ncck-ico (stakeholder audit batch 3, 2026-07-24) ===== One
   specification is mirrored byte-for-byte in ncck-client.css and ncck-public.css. Update both copies:
   logged-out KB pages and the cart load only public.css, while authenticated client pages load only
   client.css. A one-sided edit would repeat regression 3eab815.

   This primitive replaces 35 icon-container families: 25 circular, 7 square, 3 boxed without a visible
   background, and 1 square transparent treatment. Those families used 11 sizes from 32–64px, three
   radius models, and 11 background treatments. The shared form is 40×40px, radius 10px, inline-flex
   centered, with a light background.

   Component shapes intentionally remain distinct: .ncck-ca-btn uses a 6px interactive radius,
   .ncck-badge uses a 999px non-interactive pill, and .ncck-ico uses a 10px decorative tile. Geometry
   must consume the --ncck-ico-* variables from ncck-tokens.css rather than introducing local literals.
   The primitive currently hosts Font Awesome <i> glyphs; a future stroke SVG needs only a 1em child
   sizing rule and does not require changing the container.
   ============================================================================ */
.ncck-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--ncck-ico-size);
    width:  var(--ncck-ico-size);
    height: var(--ncck-ico-size);
    border: 0;
    border-radius: var(--ncck-ico-radius);
    background: var(--ncck-ico-bg);
    color: var(--ncck-ico-ink);
    font-size: var(--ncck-ico-glyph);
    line-height: 1;
}

/* Fixed width fallback: throughout the repository 20 places with fa-fw (1.25em)/388 places without it.
   If the width is not explicitly given, the left border of the icons with or without fa-fw in the same
   set of cards will differ by 0.25em. Here, center according to 1em to eliminate the difference. */
.ncck-ico > i {
    width: 1em;
    font-size: inherit;
    line-height: inherit;
    text-align: center;
}

/* If inline SVG is placed in the future (such as the stroke icon of icon-map.tpl), the size and visual dimensions will be consistent with the glyph. */
.ncck-ico > svg {
    width:  1em;
    height: 1em;
}

/* -- Size variants: only these two are supported. Shape, light background, and centering stay
   consistent; the variants scale the complete tile rather than introducing new visual treatments. -- */
/* --sm: for 48px table/list rows and notification dropdowns where a 40px tile would break row height. */
.ncck-ico--sm { --ncck-ico-size: 32px; --ncck-ico-radius: 8px;  --ncck-ico-glyph: 16px; }
/* --lg: the only enlarged tile, used by modal headers, payment results, and ticket failure states. */
.ncck-ico--lg { --ncck-ico-size: 56px; --ncck-ico-radius: 14px; --ncck-ico-glyph: 26px; }

/* -- Color variants: reuse the .ncck-badge semantic palette; do not add local hex values. Every
   background is an 8% tint rather than the old solid treatments used by .ncck-sup-247-ico,
   .ncck-sup-done-ico, and .ncck-inv-result-ico.

   The var() fallback is required for the public shell. Badge tokens are scoped to body.ncck-client
   and supportticketsubmit in ncck-client.css, so the cart and logged-out KB pages cannot read them.
   Fallback values therefore mirror the badge tokens exactly and must be updated with them. -- */
.ncck-ico--ok     { --ncck-ico-ink: var(--ncck-badge-ok-text,      #147a46); --ncck-ico-bg: var(--ncck-badge-ok-bg,      color-mix(in srgb, #147a46 8%, #ffffff)); }
.ncck-ico--warn   { --ncck-ico-ink: var(--ncck-badge-pending-text, #c2410c); --ncck-ico-bg: var(--ncck-badge-pending-bg, color-mix(in srgb, #c2410c 8%, #ffffff)); }
.ncck-ico--danger { --ncck-ico-ink: var(--ncck-badge-danger-text,  #c93030); --ncck-ico-bg: var(--ncck-badge-danger-bg,  color-mix(in srgb, #c93030 8%, #ffffff)); }
.ncck-ico--muted  { --ncck-ico-ink: var(--ncck-badge-muted-text,   #5b6b83); --ncck-ico-bg: var(--ncck-badge-muted-bg,   color-mix(in srgb, #5b6b83 8%, #ffffff)); }
/* Default (colorless tier) = info blue, so the --info alias is deliberately not set: avoiding an unnecessary alias. */

/* This table is exempt from the 48px row-height rule (--ncck-tbl-row-h); multiple icons in the same grid require 8px spacing */
td > .ncck-ico, dd > .ncck-ico { vertical-align: middle; }
.ncck-ico + .ncck-ico { margin-left: 8px; }
/* ==== /W0 IconTile container primitive ==================================================== */

/* ============================================================================== NCCK EmptyState
   unified component - .ncck-empty (W0 second batch component layer) One specification, two shells with
   the same text: This block is consistent byte by byte in ncck-client.css and ncck-public.css. The
   change must be made in two places at the same time - only public.css(header.tpl:24-30) is loaded in
   the KB/announcement logout state, and client.css(head.tpl:28-30) is loaded in the login state;
   unilateral changes will repeat 3eab815. Structural contract: .ncck-empty > [.ncck-empty-ico] +
   .ncck-empty-title + [.ncck-empty-sub] + [.ncck-empty-action > .ncck-ca-btn] The button size is not
   defined in this component - it is all provided by the .ncck-ca-btn base (single source of truth).
   ========================================================================== */
.ncck-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

/* Icon: Monochrome glyph 44px (size 40–48), without round color background, without reduced opacity */
.ncck-empty-ico {
    display: block;
    margin: 0 0 16px;
    font-size: 44px;
    line-height: 1;
    color: var(--ncck-text-muted);
}

.ncck-empty-ico > i {
    font-size: inherit;
    line-height: inherit;
}

.ncck-empty-title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ncck-heading);
}

.ncck-empty-sub {
    max-width: 440px;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ncck-text-muted);
}

/* Action area: 20px for description; horizontal 12px gap when there are multiple buttons, narrow viewport automatically wraps */
.ncck-empty-action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

/* --Variations ------------------------------------------------------------------------------- */

/* --sm: Dashboard card/notification drop-down (height contract <=240px) */
.ncck-empty--sm { padding: 32px 20px; }
.ncck-empty--sm .ncck-empty-ico { margin-bottom: 12px; font-size: 40px; }
.ncck-empty--sm .ncck-empty-title { font-size: 15px; }
.ncck-empty--sm .ncck-empty-sub { font-size: 13.5px; }
.ncck-empty--sm .ncck-empty-action { margin-top: 16px; }

/* --row:foreachelse single row slot (masspay <td> / download category / KB list) */
.ncck-empty--row { padding: 28px 16px; }
.ncck-empty--row .ncck-empty-ico { margin-bottom: 10px; font-size: 40px; }
.ncck-empty--row .ncck-empty-title { font-size: 15px; }

/* --incard: occupies the order slot of the flex table card (takes over the order:3 of the old .ncck-bill/.ncck-sup) */
.ncck-empty--incard { order: 3; }

/* --card: Comes with its own card shell (public site KB/announcement, there is no outer card in the content area) */
.ncck-empty--card {
    max-width: 520px;
    min-height: 200px;
    margin: 24px auto 0;
    background: var(--ncck-surface);
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius);      /* 8px, card size */
    box-shadow: var(--ncck-shadow-sm);      /* The only light shadow tier */
}

/* w-hidden: The native tool class is not strong enough in the flex of this component and is explicitly
   closed (replacing the old .ncck-sup-noresults.w-hidden / .ncck-eml-noresults family-specific rules) */
.ncck-empty.w-hidden { display: none; }

@media (max-width: 767.98px) {
    .ncck-empty { padding: 40px 16px; }
    .ncck-empty--sm { padding: 28px 16px; }
    .ncck-empty--card { margin-left: 16px; margin-right: 16px; }
    /* Mobile CTA is full width (inheriting the old .ncck-dash-empty-btn / .ncck-swa-empty .ncck-ca-btn).
   Both bases are listed: .ncck-ca-btn is only in client.css, and the public site (KB logout state)
   uses .ncck-btn. */
    .ncck-empty-action { width: 100%; }
    .ncck-empty-action .ncck-ca-btn,
    .ncck-empty-action .ncck-btn { width: 100%; }
}

/* #fullpage-overlay .w-hidden cascade root cause repair (2026-07-22, the stakeholder requested the root cause to be analyzed and repaired): ...git */
#fullpage-overlay.w-hidden { display: none; }

/* Dynamic branding (Stakeholder 2026-07-25 "Change all to dynamic"): After the logo is changed to read the
   {$logo} configured in the admin, the image intrinsic proportions can vary - the
   width/height written on the original markup will cause the image to be deformed. Change to CSS height
   control: height limit + adaptive width, and images of any proportion will not be stretched. */
.ncck-logo-img {
    height: auto;
    width: auto;
    max-height: 26px;
    max-width: 160px;
    object-fit: contain;
}

/* The first stage of brand dynamics (Stakeholder 2026-07-25): Two new company address and social areas are
   added to the contact page. They are all "rendered only when they are valuable" - if the background
   is not configured, the entire block will not appear, leaving no empty shell. */
body.ncck-public .ncc-addr {
    display: grid;
    gap: 4px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--ncck-border);
    color: var(--ncck-text-muted);
    font-size: 13.5px;
    line-height: 1.7;
}
body.ncck-public .ncc-addr b {
    color: var(--ncck-text);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
body.ncck-public .ncc-social {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}
body.ncck-public .ncc-social a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius-sm);
    color: var(--ncck-text-muted);
    font-size: 15px;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
body.ncck-public .ncc-social a:hover,
body.ncck-public .ncc-social a:focus-visible {
    border-color: var(--ncck-primary);
    color: var(--ncck-primary);
    background: rgba(15, 92, 255, 0.06);
}

/* ----/about company profile page (newly created after stakeholder 2026-07-25 finalizes the
   draft)----------------------------- Reuse existing base: .ncck-container width control / .ncck-fcard
   card (including unified hover for the whole site) / .ncck-btn button. Here we only add the unique
   layout of this page and do not create any new design tokens. */
body.ncck-public .ncck-about-sec {
    padding: 56px 0;
    border-bottom: 1px solid var(--ncck-border);
}
body.ncck-public .ncck-about-sec:last-of-type { border-bottom: 0; }
body.ncck-public .ncck-about-sec h2 {
    margin: 0 0 20px;
    font-size: 28px;
    font-weight: 700;
    color: var(--ncck-text);
}
body.ncck-public .ncck-about-subt {
    margin: 32px 0 12px;
    font-size: 16px;
    font-weight: 700;
    color: var(--ncck-text);
}
body.ncck-public .ncck-about-lead {
    max-width: 760px;
    margin: 0;
    color: var(--ncck-text-muted);
    font-size: 16px;
    line-height: 1.8;
}
body.ncck-public .ncck-about-note {
    margin: 14px 0 0;
    color: var(--ncck-text-muted);
    font-size: 13.5px;
    line-height: 1.7;
}
/* The disambiguation line requested by the stakeholder: data center three places vs support three places - give it some weight, don't be swept away as a footnote */
body.ncck-public .ncck-about-scope {
    display: inline-block;
    margin-top: 16px;
    padding: 10px 16px;
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius-sm);
    background: var(--ncck-bg);
    color: var(--ncck-text);
    font-size: 14px;
    font-weight: 600;
}
/* The four-frame number bar on the first screen (under the final version of Hero). The same shape as homepage .ncck-stat, no new token is created. */
body.ncck-public .ncck-about-stats {
    padding: 28px 0;
    border-bottom: 1px solid var(--ncck-border);
    background: var(--ncck-bg);
}
body.ncck-public .ncck-about-statgrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
body.ncck-public .ncck-about-stat { text-align: center; }
body.ncck-public .ncck-about-stat b {
    display: block;
    color: var(--ncck-primary);
    font-family: var(--ncck-font-mono);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
}
body.ncck-public .ncck-about-stat span {
    display: block;
    margin-top: 6px;
    color: var(--ncck-text-muted);
    font-size: 13px;
}
body.ncck-public .ncck-about-ctabtns {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
body.ncck-public .ncck-about-sec p {
    max-width: 900px;
    margin: 0 0 14px;
    color: var(--ncck-text-muted);
    font-size: 15px;
    line-height: 1.85;
}
body.ncck-public .ncck-about-cn {
    width: 100%;
    max-width: 760px;
    border-collapse: collapse;
}
body.ncck-public .ncck-about-cn th,
body.ncck-public .ncck-about-cn td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--ncck-border);
    text-align: left;
    font-size: 14.5px;
}
body.ncck-public .ncck-about-cn th {
    color: var(--ncck-text-muted);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
body.ncck-public .ncck-about-cn td:first-child { font-weight: 600; white-space: nowrap; }
body.ncck-public .ncck-about-intl {
    display: grid;
    gap: 16px;
    max-width: 900px;
    margin: 16px 0 0;
}
body.ncck-public .ncck-about-intl dt {
    color: var(--ncck-text-muted);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
body.ncck-public .ncck-about-intl dd {
    margin: 4px 0 0;
    color: var(--ncck-text);
    font-size: 15px;
    line-height: 1.8;
}
body.ncck-public .ncck-about-dcs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
body.ncck-public .ncck-about-dcs .ncck-fcard { padding: 24px; }
body.ncck-public .ncck-about-dcs h3 {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--ncck-text);
}
body.ncck-public .ncck-about-dcs p {
    margin: 0;
    color: var(--ncck-text-muted);
    font-size: 14px;
    line-height: 1.75;
}
body.ncck-public .ncck-about-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px 32px;
    margin: 4px 0 18px;
}
body.ncck-public .ncck-about-logos img {
    /* Unified height control of 30px + max-width fallback: pccw (600×195) and hurricane-electric are long
   horizontal labels. Unlimited width will break the grid; SVG is mostly used, and it will not be
   blurry when enlarged. */
    height: 30px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    opacity: 0.8;
    transition: opacity .15s ease;
}
body.ncck-public .ncck-about-logos img:hover { opacity: 1; }
body.ncck-public .ncck-about-cta {
    padding: 56px 0 72px;
    text-align: center;
}
body.ncck-public .ncck-about-cta h2 { margin: 0 0 10px; font-size: 26px; font-weight: 700; }
body.ncck-public .ncck-about-cta p { margin: 0 0 22px; color: var(--ncck-text-muted); }

@media (max-width: 991.98px) {
    body.ncck-public .ncck-about-dcs { grid-template-columns: 1fr; }
    body.ncck-public .ncck-about-statgrid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    body.ncck-public .ncck-about-sec { padding: 40px 0; }
}

/* ======================================================================================================================================================================================================
   Navigation capsule + Chinese-specific metrics (Stakeholder 2026-07-25 Looking at the picture and making a
   decision, all three fell together) root cause: hover The background color was originally "text width
   × 84px full height", and the Chinese two-character item became a vertical bar (report from
   the stakeholder). .ncck-menu-item is still full of 84px - the mega panel relies on it to make a hover
   bridge and cannot move; only the visible .ncck-menu-link is compressed into a 36px capsule.
   ========================================================================== */
body.ncck-public .ncck-menu { gap: 16px; }
/* Stakeholder 2026-07-25 Report "The menu has gone up and is misplaced": .ncck-menu-item is 84px high
   (the mega hover bridge relies on it and cannot be changed), but it is not flex. After pressing the
   link to 36px, it is attached to the top of the item, staggered from the vertical center line of the
   left logo. Add flex to the item to center it, and the bridge height of 84px remains unchanged. */
body.ncck-public .ncck-menu-item {
    display: flex;
    align-items: center;
}
body.ncck-public .ncck-menu-link {
    height: 36px;
    /* The base (css:138) has min-height:44px, which will hold up the height - it must be reduced
   together, otherwise the capsule runtime verification will still be 44px high (this is the case after the
   first change). */
    min-height: 36px;
    padding: 0 12px;
    border-radius: 8px;
}
@media (max-width: 767.98px) {
    /* Keep the compact desktop capsule, but preserve a 44px finger target
       when the same navigation becomes the mobile drawer. */
    body.ncck-public .ncck-menu-link {
        height: 44px;
        min-height: 44px;
    }
}
/* Remove double decoration: it turns out that hover has both a background color and a 2px underline, and the two sets of decorations fight */
body.ncck-public .ncck-menu-link::after { display: none; }
/* After removing the underline, there must be a current state: active = permanent light blue capsule + blue word */
body.ncck-public .ncck-menu-item.is-active > .ncck-menu-link,
body.ncck-public .ncck-menu-link.is-active {
    background: rgba(15, 92, 255, 0.08);
    color: var(--ncck-primary);
}
body.ncck-public .ncck-dd--about { min-width: 180px; }

/* Exclusively for Chinese: Leave the English layout unchanged. header.tpl has output <html lang>, no
   need to change the template. ⚠️ There is no need to use letter-spacing to make the words equal width
   - CSS cannot pick out "which two-character items are", and it will scatter the four-character items
   together as soon as they are added, making them even more uneven (the "network" plan has been
   rejected by rendering). Use min-width fallback instead. */
html[lang^="zh"] body.ncck-public .ncck-menu-link {
    min-width: 84px;
    justify-content: center;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .5px;
}
html[lang^="zh"] body.ncck-public .ncck-caret { margin-left: 4px; }

/* ---- IP ban page (2026-07-25): The IP is blocked, not the account, and the logout state will also
   fall to this page, so both the client area shell and the public shell must have this paragraph,
   otherwise one of the shells will remain unstyled. ---- */
.ncck-banned-meta {
    display: grid;
    gap: 12px;
    margin: 8px 0 0;
    padding: 16px 24px;
    min-width: 280px;
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius);
    text-align: left;
}
.ncck-banned-meta > div { display: flex; gap: 12px; align-items: baseline; }
.ncck-banned-meta dt {
    flex: none;
    min-width: 84px;
    color: var(--ncck-text-muted);
    font-size: 13px;
    font-weight: 400;
}
.ncck-banned-meta dd { margin: 0; color: var(--ncck-text); font-size: 14px; font-weight: 600; }


/* ═════════════════════════════════════ ═════════════════════════════════════ Registration page
   refinement (2026-07-26, press output/design/register-refined-v1.png) The previous version had four
   independent floating cards, only placeholder fields, and a Yes/No switch for email subscription.
   Refined draft: a large card + segmented thin lines, labels for each field, and checkboxes for
   subscribing to harvest. Buttons and field labels will all reuse the existing base of the public
   shell (.ncck-btn--* / .ncck-auth-fieldlabel). .ncck-ca-btn--* that does not reference the client
   area - those are not defined in the public shell and will remain unstyled when used.
   ═════════════════════════════════════ ═════════════════════════════════════ */

.ncck-auth--register .ncck-reg-head { margin-bottom: 20px; }
.ncck-auth--register .ncck-reg-head h1 {
    margin: 0 0 6px;
    color: var(--ncck-text);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.3px;
}
.ncck-auth--register .ncck-reg-head p {
    margin: 0;
    color: var(--ncck-text-muted);
    font-size: 14px;
}

/* Single big card - segments are separated by thin lines, no longer four floating cards */
.ncck-reg-card {
    padding: 4px 32px 28px;
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius);
    background: #fff;
}
.ncck-reg-sec { padding: 24px 0; border-bottom: 1px solid var(--ncck-border); }
.ncck-reg-sec:last-of-type { border-bottom: 0; }
.ncck-reg-sectitle {
    margin: 0 0 18px;
    color: var(--ncck-text);
    font-size: 16px;
    font-weight: 600;
}
.ncck-reg-secnote {
    margin: -12px 0 16px;
    color: var(--ncck-text-muted);
    font-size: 12.5px;
}

/* Field grid */
.ncck-reg-grid { display: grid; gap: 0 24px; }
.ncck-reg-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ncck-reg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Single field: label on top, icon on the left side of the input box */
.ncck-fld { margin-bottom: 16px; min-width: 0; }
.ncck-auth--register .ncck-auth-fieldlabel {
    display: block;
    margin-bottom: 6px;
    color: var(--ncck-text);
    font-size: 12.5px;
    font-weight: 600;
}
.ncck-required {
    color: var(--ncck-danger);
    font-weight: 700;
}
.ncck-fld.is-invalid > .ncck-fld-wrap > input,
.ncck-fld.is-invalid > .ncck-fld-wrap > select,
.ncck-fld.is-invalid .control input,
.ncck-fld.is-invalid .control select,
.ncck-reg-optin.is-invalid input[type="checkbox"] {
    border-color: var(--ncck-danger);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}
.ncck-field-error {
    margin: 6px 0 0;
    color: var(--ncck-danger);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
}
.ncck-reg-error-summary:focus { outline: none; }
.ncck-fld-wrap { position: relative; }
.ncck-fld-ico {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: var(--ncck-text-muted);
    font-size: 13px;
    pointer-events: none;
    line-height: 1;
}
.ncck-fld-wrap > input,
.ncck-fld-wrap > select {
    width: 100%;
    height: 40px;
    /* The left padding was originally 36px to make way for the icon; the icon has been removed (see
   clientregister.tpl header comment), and the normal padding is restored here, otherwise the input
   content will be inexplicably shrunk to the right. */
    padding: 0 12px;
    border: 1px solid var(--ncck-border);
    border-radius: var(--ncck-radius-sm);
    background: #fff;
    color: var(--ncck-text);
    font-family: inherit;
    font-size: 14px;
}
.ncck-fld-wrap > input:focus,
.ncck-fld-wrap > select:focus {
    outline: none;
    border-color: var(--ncck-primary);
    box-shadow: 0 0 0 3px rgba(15, 92, 255, .12);
}
.ncck-fld-wrap > input::placeholder { color: var(--ncck-text-muted); }
/* select drop-down arrow. Originally, SVG with data-URI was used as the background-image, and the
   computed value of runtime verification was none - both appearance and padding-right in the same
   rule took effect, but that one was ignored. No longer bother with coding issues, use pure CSS
   triangles (::after drawn on the wrapper), zero external dependencies, and must be visible. */
.ncck-fld-wrap--select { position: relative; }
.ncck-fld-wrap--select > select {
    padding-right: 34px;
    appearance: none;
    -webkit-appearance: none;
}
.ncck-fld-wrap--select::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 0;
    height: 0;
    margin-top: -2px;
    border-left: 4.5px solid transparent;
    border-right: 4.5px solid transparent;
    border-top: 5px solid var(--ncck-text-muted);
    pointer-events: none;
}

/* Password row: generate button + strength bar side by side */
.ncck-reg-pwrow {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px 24px;
    align-items: center;
}
.ncck-reg-genbtn { height: 34px; padding: 0 14px; font-size: 13px; }
.ncck-reg-pwtext { margin: 6px 0 0; color: var(--ncck-text-muted); font-size: 12px; text-align: right; }
.ncck-reg-pwrow .progress { height: 6px; border-radius: 999px; overflow: hidden; background: var(--ncck-border); }

/* Checkbox (Subscription/Terms) - The public shell originally did not have a checkbox base, here we add one with the same family as .ncck-auth-* */
.ncck-reg-optin { padding: 18px 0 0; }
.ncck-auth-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    color: var(--ncck-text);
    font-size: 13.5px;
    cursor: pointer;
}
.ncck-auth-check input[type="checkbox"] {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 1px 0 0;
    accent-color: var(--ncck-primary);
    cursor: pointer;
}
.ncck-reg-optin-note {
    margin: 4px 0 0 26px;
    color: var(--ncck-text-muted);
    font-size: 12.5px;
}

/* Verification code segmentation: the image and the input box are side by side and aligned to the left (native is centered + two lines of description) */
.ncck-reg-sec--captcha .form-group,
.ncck-reg-sec--captcha .row { margin: 0; }
.ncck-reg-sec--captcha img { border-radius: var(--ncck-radius-sm); }

.ncck-reg-submit { padding-top: 22px; }
.ncck-reg-submitbtn { width: 100%; height: 46px; font-size: 15px; }

.ncck-auth--register .ncck-auth-switch {
    margin: 16px 0 0;
    color: var(--ncck-text-muted);
    font-size: 13.5px;
    text-align: center;
}

@media (max-width: 767.98px) {
    .ncck-reg-card { padding: 4px 18px 22px; }
    .ncck-reg-grid--2,
    .ncck-reg-grid--3 { grid-template-columns: minmax(0, 1fr); }
    .ncck-reg-pwrow { grid-template-columns: minmax(0, 1fr); }
    .ncck-reg-pwtext { text-align: left; }
    .ncck-fld-wrap > input,
    .ncck-fld-wrap > select,
    .ncck-fld-wrap .intl-tel-input > input {
        min-height: 44px;
        height: 44px;
    }
    .ncck-auth-check {
        min-height: 44px;
        align-items: center;
    }
    .ncck-auth-check input[type="checkbox"] {
        width: 20px;
        height: 20px;
        margin: 0;
    }
    .ncck-reg-genbtn { min-height: 44px; }
}

@media (max-width: 767.98px) {
    .nsrv-filters {
        position: sticky;
        top: 56px;
        z-index: 20;
        max-height: calc(100dvh - 72px);
        overflow-y: auto;
        box-shadow: 0 10px 22px -16px rgba(15, 23, 42, .28);
    }
}