/* ========================================
   NETWORK CLASSIFICATION (network-classification.html, 2026-10-12): the product hero (css/product-hero.css) with a panel for the card's picture —
   the eight usage types as chips with the case's lit — over the page's own sections: the types grid, the datacenter coverage moved here
   from the reputation page, then the generated attributes, use cases and plans.
   ======================================== */
:root:not([data-json="0"]) .geo-hero-top .geo-hero-input { padding-left: 1.1rem; padding-right: 1.1rem; }   /* five cells, as on the threat page */
@media (max-width: 1320px) { :root:not([data-json="0"]) .geo-hero-top .geo-hero-input { padding-left: 0.7rem; padding-right: 0.7rem; } }   /* the fifth cell stays in the column down to the tight layout's edge */
:root[data-card="8"] .geo-card-wrap .geo-card-map--panel { background: #fff; }
:root[data-card="8"]:is([data-theme="dark"]) .geo-card-wrap .geo-card-map--panel { background: var(--bg-secondary); }
:root[data-card="8"] .geo-card-wrap { --map-h: 150px; }
/* the sample switcher above the card, as the VPN page set it */
.gs-samples { display: flex; gap: 1.1rem; margin-right: auto; font-family: var(--font-mono); }
.gs-samples button { margin: 0; padding: 0 0 .12rem; border: 0; border-bottom: 1px solid transparent; background: transparent; cursor: pointer; font: inherit; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.gs-samples button:hover { color: var(--text-primary); }
.gs-samples button.is-on { color: var(--text-primary); border-bottom-color: var(--accent); cursor: default; }
.gs-samples button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gs-samples { display: flex; gap: .9rem; align-items: baseline; margin-right: auto; font-family: var(--font-mono); }
.gs-samples-note { font-size: .62rem; letter-spacing: .04em; color: var(--text-muted); }
.gs-tags { display: inline-flex; gap: .4rem; margin-left: .7rem; margin-right: auto; }   /* tags by the address in the card's head, the threat card's chips (asked 2026-10-09) */
.gs-type { display: inline-block; padding: .2rem .5rem; border-radius: 6px; background: var(--strip-paper); font-family: var(--font-mono); font-size: .58rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--strip-ink); vertical-align: middle; }
.nc-strip { position: absolute; inset: 0; display: grid; grid-template-rows: auto auto; row-gap: 14px; align-content: center; padding: 14px 24px; font-family: var(--font-mono); }
.nc-types { display: flex; flex-wrap: wrap; gap: 6px; }
.nc-type { padding: 0.3rem 0.6rem; border: 1px solid var(--border); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--text-muted); transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
.nc-type.is-on { color: var(--bg-primary); background: var(--text-primary); border-color: var(--text-primary); }
.nc-line { display: flex; align-items: center; gap: 0.6rem; min-width: 0; font-size: 0.78rem; color: var(--text-secondary); }
.nc-line img { width: 18px; height: 18px; border-radius: 4px; flex: none; }
.nc-line b { color: var(--text-primary); font-weight: 500; }
.nc-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-dc { margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem; flex: none; font-size: 0.66rem; letter-spacing: 0.04em; color: var(--text-muted); }
.nc-dc i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--text-primary) 25%, transparent); } .nc-dc.is-on i { background: var(--accent); }
/* Inline field names in the prose: the mono face, a touch smaller than the text around them */
p code { font-family: var(--font-mono); font-size: 0.88em; }

/* 01 — the usage types: eight cells in a hairline grid, the value as code, a name, what it covers, real examples where we have them */
.nc-types-sec { padding: var(--space-5xl) 0; position: relative; z-index: 1; }
.nc-types-header { text-align: center; margin-bottom: var(--space-3xl); }
.nc-types-header h2 { margin-top: var(--space-lg); font-size: clamp(1.8rem, 3.5vw, 3rem); font-weight: 700; letter-spacing: -0.02em; }
.nc-types-header p { margin: var(--space-md) auto 0; max-width: 640px; font-size: var(--text-lg); line-height: 1.6; color: var(--text-secondary); }
.nc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.nc-cell { padding: var(--space-xl) var(--space-2xl); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.nc-cell-head { display: flex; align-items: baseline; gap: var(--space-md); margin-bottom: var(--space-sm); }
.nc-cell-head code { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.02em; color: var(--accent-text); }
.nc-cell-head h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.nc-cell p { max-width: 48ch; font-size: 0.95rem; line-height: 1.6; color: var(--text-secondary); }
.nc-cell-eg { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--space-md); }
.nc-cell-eg span { font-family: var(--font-mono); font-size: 0.75rem; padding: 0.25rem 0.55rem; border: 1px solid var(--border); color: var(--text-secondary); }
@media (max-width: 767px) { .nc-grid { grid-template-columns: minmax(0, 1fr); } .nc-cell { padding: var(--space-lg); } }
/* 02 — datacenter coverage, moved from ip-reputation.html on 2026-10-12 (the rules as they stand in css/threat-intelligence.css for the threat page's copy) */
.ti-datacenters { padding: var(--space-5xl) 0; }
.ti-datacenters-header { text-align: center; margin-bottom: var(--space-3xl); }
.ti-datacenters-header h2 { margin-top: var(--space-lg); font-size: clamp(1.8rem, 3.5vw, 3rem); font-weight: 700; letter-spacing: -0.02em; }
.ti-datacenters-header p { margin: var(--space-md) auto 0; max-width: 640px; font-size: var(--text-lg); line-height: 1.6; color: var(--text-secondary); }
.ti-dc-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: var(--space-2xl); }
.ti-dc-stat { padding: var(--space-lg) var(--space-xl); border-right: 1px solid var(--border); }
.ti-dc-stat:last-child { border-right: 0; }
.ti-dc-stat b { display: block; font-family: var(--font-mono); font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.ti-dc-stat span { display: block; margin-top: 0.35rem; font-family: var(--font-mono); font-size: 0.66rem; line-height: 1.5; color: var(--text-muted); }
.ti-dc-table-wrap { border-top: 1px solid var(--border); overflow-x: auto; }   /* the table scrolls inside it on a phone */
.ti-dc-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); }
.ti-dc-table th { padding: 0.7rem 0.75rem; text-align: left; font-size: 0.6rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.ti-dc-table td { padding: 0.8rem 0.75rem; border-bottom: 1px solid var(--border); font-size: 0.8rem; vertical-align: middle; }
.ti-dc-table th:first-child, .ti-dc-table td:first-child { padding-left: 0; width: 2.4rem; }
.ti-dc-table th:last-child, .ti-dc-table td:last-child { padding-right: 0; }
.ti-dc-n { font-size: 0.62rem; color: var(--text-muted); letter-spacing: 0.05em; }
.ti-dc-name { font-weight: 600; }
.ti-dc-who { display: inline-flex; align-items: center; gap: 0.6rem; white-space: nowrap; }   /* the mark and the name on one line, whatever the column's width */
.ti-dc-logo { width: 18px; height: 18px; border-radius: 4px; flex: none; }
.ti-dc-type { font-size: 0.7rem; color: var(--text-secondary); white-space: nowrap; }
.ti-dc-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ti-dc-table th.ti-dc-num { text-align: right; }
.ti-dc-share { width: 26%; }
.ti-dc-bar { display: inline-block; height: 6px; max-width: calc(100% - 3.4rem); background: var(--text-primary); vertical-align: middle; }
.ti-dc-pct { display: inline-block; margin-left: 0.6rem; font-size: 0.68rem; color: var(--text-muted); vertical-align: middle; }
.ti-dc-more { display: flex; gap: var(--space-2xl); margin: 0; padding: 0.9rem 0 0; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); }   /* what lies beyond the ten: Udger's other datacenters, rezmoss's other ranges */
.ti-dc-more b { color: var(--text-primary); font-weight: 600; }
.ti-dc-more a { margin-left: auto; color: var(--accent); text-decoration: none; }
.ti-dc-more a:hover { text-decoration: underline; }
@media (max-width: 767px) {
  .ti-dc-stats { grid-template-columns: 1fr; }
  .ti-dc-stat { border-right: 0; border-bottom: 1px solid var(--border); }
  .ti-dc-stat:last-child { border-bottom: 0; }
}

/* Phones (2026-10-15): the table keeps its columns and scrolls sideways within its wrap */
@media (max-width: 767px) { .ti-dc-table { min-width: 560px; } }