/* ========================================
   GEOLOCATION — PRODUCT PAGE
   ======================================== */

/* Hero stats row */

/* ========================================
   DATA SOURCES — how geolocation works
   ======================================== */
.geo-sources {
  padding: var(--space-5xl) 0;
  position: relative;
  z-index: 1;
}

/* the sources in the homepage's datasets form since 2026-10-12: a two-column head, a sticky bar of the six names, framed rows with the
   diagram at the right (rules in css/datasets-scroll.css); only the detail lists and the diagrams keep rules of their own here */
.geo-sources .ds-x-uk-bar { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.geo-sources .ds-x-uk-text .source-details { margin-top: var(--space-md); }
.geo-sources .ds-x-uk-pic .source-diagram { width: 100%; max-width: 520px; }
@media (max-width: 899px) { .geo-sources .ds-x-uk-bar { grid-template-columns: none; } }

.source-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.source-detail {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

.source-detail-marker {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-primary);
  flex-shrink: 0;
  width: 1rem;
  text-align: center;
}

.source-diagram {
  position: relative;
}

.source-diagram svg {
  width: 100%;
  height: auto;
  color: var(--text-primary);
}
/* the drawings were set in hairlines at an eighth to two thirds of the ink, with labels of 3.5 to 6.5 units (4 to 8px on the page);
   lifted and enlarged so they read at a glance, their hierarchy kept, each label on a halo of the page colour */
.source-diagram svg [opacity="0.12"] { opacity: 0.3; }
.source-diagram svg [opacity="0.2"] { opacity: 0.5; }
.source-diagram svg [opacity="0.25"] { opacity: 0.55; }
.source-diagram svg [opacity="0.3"] { opacity: 0.6; }
.source-diagram svg [opacity="0.35"] { opacity: 0.65; }
.source-diagram svg [opacity="0.4"] { opacity: 0.7; }
.source-diagram svg [opacity="0.45"] { opacity: 0.75; }
.source-diagram svg [opacity="0.5"] { opacity: 0.8; }
.source-diagram svg [opacity="0.55"] { opacity: 0.85; }
.source-diagram svg [opacity="0.6"] { opacity: 0.9; }
.source-diagram svg [opacity="0.65"] { opacity: 0.95; }
.source-diagram svg [stroke-width="0.3"] { stroke-width: 0.7; }
.source-diagram svg [stroke-width="0.4"] { stroke-width: 0.9; }
.source-diagram svg [stroke-width="0.5"] { stroke-width: 1; }
.source-diagram svg [stroke-width="0.6"] { stroke-width: 1.1; }
.source-diagram svg [stroke-width="0.7"] { stroke-width: 1.25; }
.source-diagram svg [stroke-width="0.8"] { stroke-width: 1.4; }
.source-diagram svg text { font-size: 7.5px; opacity: 1; paint-order: stroke; stroke: var(--bg-primary); stroke-width: 2.5px; stroke-linejoin: round; }
.source-diagram svg g[font-size="3.5"] text, .source-diagram svg text[font-size="3.5"] { font-size: 6px; }
.source-diagram svg g[font-size="3.8"] text, .source-diagram svg text[font-size="3.8"] { font-size: 6.3px; }
.source-diagram svg g[font-size="4"] text, .source-diagram svg text[font-size="4"] { font-size: 6.5px; }
.source-diagram svg g[font-size="4.5"] text, .source-diagram svg text[font-size="4.5"] { font-size: 7px; }
.source-diagram svg g[font-size="5"] text, .source-diagram svg text[font-size="5"] { font-size: 7.5px; }
.source-diagram svg g[font-size="5.5"] text, .source-diagram svg text[font-size="5.5"] { font-size: 8px; }
.source-diagram svg g[font-size="6"] text, .source-diagram svg text[font-size="6"] { font-size: 8.5px; }
.source-diagram svg g[font-size="6.5"] text, .source-diagram svg text[font-size="6.5"] { font-size: 9px; }
.source-diagram svg text[opacity="0.2"], .source-diagram svg text[opacity="0.25"], .source-diagram svg text[opacity="0.3"] { opacity: 0.75; }
.source-diagram svg text[opacity="0.35"], .source-diagram svg text[opacity="0.4"], .source-diagram svg text[opacity="0.45"] { opacity: 0.85; }

/* ========================================
   ACCURACY TIERS
   ======================================== */
.geo-accuracy {
  padding: var(--space-5xl) 0;
  background: var(--bg-secondary);
  position: relative;
  z-index: 1;
}
/* the band carries the corner brackets the use-cases panel has (his ask, 2026-10-16); .hud's own padding and clipping do not apply to it */
.geo-accuracy.hud { --hud: color-mix(in srgb, var(--text-primary) 55%, transparent); --hin: 10px; margin: 12px; border-radius: 6px; padding: var(--space-4xl) 0; overflow: visible; }   /* inset from the page edge with rounded corners, as the use-cases panel is */

.geo-accuracy-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.geo-accuracy-header h2 {
  margin-top: var(--space-lg);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.geo-accuracy-header p {
  margin-top: var(--space-md);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--text-lg);
  color: var(--text-secondary);
}

/* Accuracy tiers table */
.accuracy-tiers {
  border: 1px solid var(--border);
  overflow: hidden;
}

.accuracy-tier-row {
  display: grid;
  grid-template-columns: 180px 1fr 210px;
  border-bottom: 1px solid var(--border);
  transition: background 150ms ease;
}

.accuracy-tier-row:last-child {
  border-bottom: none;
}

.accuracy-tier-row:hover {
  background: color-mix(in srgb, var(--text-primary) 3%, transparent);
}

.accuracy-tier-row--header {
  background: color-mix(in srgb, var(--text-primary) 3%, transparent);
}

.accuracy-tier-row--header:hover {
  background: color-mix(in srgb, var(--text-primary) 3%, transparent);
}

.accuracy-tier-cell {
  padding: var(--space-lg) var(--space-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--border);
}

.accuracy-tier-cell:last-child {
  border-right: none;
}

.accuracy-tier-cell--header {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.accuracy-tier-level {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
}

.accuracy-tier-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.accuracy-tier-value {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.accuracy-tier-sub {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* ========================================
   COVERAGE MAP
   ======================================== */
.geo-coverage {
  padding: var(--space-5xl) 0;
  position: relative;
  z-index: 1;
}

.geo-coverage-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.geo-coverage-header h2 {
  margin-top: var(--space-lg);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.geo-coverage-header p {
  margin-top: var(--space-md);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--text-lg);
  color: var(--text-secondary);
}

/* Coverage stats strip: four figures */
.coverage-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--border);
}

.coverage-stat {
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  border-right: 1px solid var(--border);
}

.coverage-stat:last-child {
  border-right: none;
}

.coverage-stat-value {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}

.coverage-stat-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-top: 0.4rem;
}

/* ========================================
   DATA FIELDS / API RESPONSE — EDITOR STYLE
   ======================================== */
.geo-api {
  padding: var(--space-5xl) 0;
  position: relative;
  z-index: 1;
}

.geo-api-header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.geo-api-header h2 {
  margin-top: var(--space-lg);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.geo-api-header p {
  margin-top: var(--space-md);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--text-lg);
  color: var(--text-secondary);
}

/* ---- Every geolocation attribute, in the response's own groups, one cell each in a three-across grid: the
   type above the field's path, then what it means. Rows were chosen over this grid on 2026-10-07 and the grid
   brought back the same day. ---- */
.editor-wrap {
  max-width: 1120px;
  margin: 0 auto;
}

.editor-group + .editor-group {
  margin-top: var(--space-2xl);
}

.editor-group-title {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 var(--space-md);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

.editor-group-title::before {
  content: '▸';
  color: var(--accent);
}

.editor-group-title span {
  margin-left: auto;
  font-weight: 400;
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.editor-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

/* each cell draws its own right and bottom rules, so a short last row leaves the empty slots open */
.editor-field {
  min-width: 0;
  padding: var(--space-lg);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* the type above the name, then the definition */
.editor-field-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}

.editor-field-name {
  font: 600 0.9rem/1.4 var(--font-mono);
  color: var(--text-primary);
  background: none;
  padding: 0;
  overflow-wrap: anywhere;
}

.editor-field-type {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.editor-field-desc {
  margin: 0.55rem 0 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

@media (max-width: 899px) {
  .editor-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 559px) {
  .editor-fields { grid-template-columns: minmax(0, 1fr); }
}

/* ========================================
   USE CASES
   ======================================== */
/* The section is a panel, like the homepage's enrichment panels: inset 12px from the page edge on every side,
   rounded, corner brackets (the .hud class from enrich.css) and a paper glow. The top inset keeps the panel clear
   of the section marker above it, whose labels hang half below the line; z-index 0 (a stacking context for the
   brackets) keeps the marker, at z-index 1, painting above the panel like above every other section. */
.geo-usecases {
  --hud: color-mix(in srgb, var(--text-primary) 55%, transparent);
  padding: var(--space-2xl) 0;   /* close bands above the headline and below the grid: the room goes to the cards */
  position: relative;
  z-index: 0;
  margin: 12px;
  border-radius: 6px;
  background: radial-gradient(ellipse 72% 62% at 50% 56%, color-mix(in srgb, #fff 70%, var(--bg-primary)) 0%, var(--bg-primary) 62%, color-mix(in srgb, var(--bg-primary) 94%, var(--text-primary)) 100%);
  overflow: hidden;
}

.geo-usecases > .container {
  position: relative;
  z-index: 1;
}

.geo-usecases-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.geo-usecases-header h2 {
  margin-top: var(--space-lg);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1023px) {
  

  

  .source-diagram {
    max-width: 500px;
  }

  .source-tabs {
    flex-wrap: wrap;
  }

  .source-tab {
    flex: 1 1 33.33%;
  }

  .source-tab:nth-child(3) {
    border-right: none;
  }

  .accuracy-tier-row {
    grid-template-columns: 140px 1fr 150px;
  }

  .coverage-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .coverage-stat:nth-child(2) {
    border-right: none;
  }

  .coverage-stat:nth-child(3),
  .coverage-stat:nth-child(4) {
    border-top: 1px solid var(--border);
  }
}

@media (max-width: 767px) {
  

  

  

  

  

  

  

  .source-tab {
    flex: 1 1 33.33%;
  }

  

  .accuracy-tier-row {
    grid-template-columns: 1fr;
  }

  .accuracy-tier-cell {
    border-right: none;
    border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 5%, transparent);
    padding: var(--space-md) var(--space-lg);
  }

  .accuracy-tier-cell:last-child {
    border-bottom: none;
  }

  .coverage-stats {
    grid-template-columns: 1fr;
  }

  .coverage-stat {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .coverage-stat:last-child {
    border-bottom: none;
  }

  .coverage-stat:nth-child(3),
  .coverage-stat:nth-child(4) {
    border-top: none;
  }

}

/* the lifted look keeps the page grid: its lines run down from the section markers' plus marks, as on the homepage */
:root:is([data-page="1"], [data-page="2"]) .geo-hero-diagram .gh-plain {
  display: none;
}

@keyframes gh-march {
  to { stroke-dashoffset: -7; }
}

/* sources: the selected tab is marked with a line of the accent, and the small drawings get more ink */
:root:is([data-page="1"], [data-page="2"]) .source-tab--active {
  background: transparent;
  box-shadow: inset 0 2px 0 var(--accent);
}

:root:is([data-page="1"], [data-page="2"]) .source-tab--active .source-tab-num {
  color: var(--accent-hover);
}

:root:is([data-page="1"], [data-page="2"]) .source-diagram svg {
  filter: url(#ink-lift);
}

/* accuracy: a bar under each percentage, filled to it */
:root:is([data-page="1"], [data-page="2"]) .accuracy-tier-value.has-bar::after {
  content: '';
  display: block;
  width: 100%;
  max-width: 6.5rem;
  height: 3px;
  margin: 0.45rem 0 0.3rem;
  background: linear-gradient(90deg, var(--accent) calc(var(--pct) * 1%), color-mix(in srgb, var(--text-primary) 12%, transparent) 0);
}

/* the accuracy band stays on the secondary grey in the lifted page look; its accent tint went on 2026-10-16 */

@keyframes geo-win-blink {
  to { visibility: hidden; }
}

/* 6: as 3, without the large coordinates readout */

   

   

   

         

      /* long values wrap on a phone rather than hide off the edge */

/* ---- The use cases as the VPN page's grid of numbered cards; decided over rows on 2026-10-08 ---- */
.usecase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--border); }
.usecase-card { padding: var(--space-2xl); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transition: background 200ms ease; }
.usecase-card:nth-child(3n) { border-right: none; }
.usecase-card:nth-last-child(-n+2) { border-bottom: none; }   /* eight cards: the last row holds two */
.usecase-card:hover { background: color-mix(in srgb, var(--text-primary) 3%, transparent); }
.usecase-number { font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-muted); letter-spacing: 0.05em; margin-bottom: var(--space-md); }
.usecase-card h4 { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; margin-bottom: var(--space-sm); line-height: 1.25; }
.usecase-card p { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.65; }
@media (max-width: 1023px) {
  .usecase-grid { grid-template-columns: repeat(2, 1fr); }
  .usecase-card:nth-child(3n) { border-right: 1px solid var(--border); }
  .usecase-card:nth-child(2n) { border-right: none; }
  .usecase-card:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 767px) {
  .usecase-grid { grid-template-columns: 1fr; }
  .usecase-card { border-right: none !important; border-bottom: 1px solid var(--border) !important; }
  .usecase-card:last-child { border-bottom: none !important; }
}

/* inline links in the source rows' prose: underlined like the pricing page's, the accent on hover */
.ds-x-text a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-strong, currentColor);
}

.ds-x-text a:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}