/* ===== Product / inner pages ===== */

.page-hero{position:relative;overflow:hidden;padding:60px 0 36px}
.page-hero::before{
  content:"";position:absolute;inset:-40% -20% auto -20%;height:560px;z-index:0;
  background:
    radial-gradient(55% 55% at 50% 0%, color-mix(in oklab, var(--blue) 12%, transparent) 0%, transparent 60%);
  pointer-events:none;
}
.page-hero-grid{
  position:absolute;inset:0;z-index:0;
  background-image:
    linear-gradient(var(--hairline-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline-2) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 20%, #000 20%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 20%, #000 20%, transparent 75%);
  opacity:.6;
}
.page-hero-inner{position:relative;z-index:1}

.crumb{
  display:flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;
  color:var(--muted-2);text-transform:uppercase;margin-bottom:18px;
}
.crumb a{color:var(--muted-2);text-decoration:none}
.crumb a:hover{color:var(--blue)}
.crumb .sep{opacity:.5}

/* see site.css: dark half on one row, blue .em half on the row below, sized as
   a share of the hero column so each page's own copy length picks the size */
.page-hero-inner{container-type:inline-size}

h1.page-title{
  font-size:clamp(26px, 9.4cqw, 66px);
  line-height:0.98;letter-spacing:-0.035em;font-weight:500;margin:0;color:var(--ink);max-width:none;
  overflow-wrap:break-word;
}
h1.page-title .em{display:block;font-weight:500;color:var(--blue)}
html[data-theme="dark"] h1.page-title .em{color:var(--blue-600)}

.page-lede{margin:22px 0 0;max-width:62ch;font-size:18px;line-height:1.55;color:var(--muted)}
.page-lede a{color:var(--blue);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--blue) 30%, transparent)}
html[data-theme="dark"] .page-lede a{color:var(--blue-600)}
.page-lede b,.page-lede strong{color:var(--ink);font-weight:600}

/* product sub-nav */
.subnav{
  display:flex;gap:6px;flex-wrap:wrap;margin-top:34px;
  border-top:1px solid var(--hairline);padding-top:22px;
}
.subnav a{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;border-radius:10px;text-decoration:none;
  font-size:14px;font-weight:500;color:var(--ink-2);
  border:1px solid var(--hairline);background:var(--bg-2);
  transition:transform .15s, border-color .15s, color .15s, background .15s;
}
.subnav a:hover{transform:translateY(-1px);color:var(--ink);border-color:color-mix(in oklab,var(--blue) 30%, var(--hairline))}
.subnav a.active{background:var(--blue);color:#fff;border-color:transparent}
html[data-theme="dark"] .subnav a.active{background:#e6ecff;color:#0a0f26}
.subnav a .d{font-family:'JetBrains Mono',monospace;font-size:11px;opacity:.6}
.subnav a.active .d{opacity:.8}

/* locations strip */
.loc-block{margin-top:28px}
.loc-title{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-2);margin:0 0 14px;display:flex;align-items:center;gap:10px;
}
.loc-title::before{content:"";width:18px;height:1px;background:var(--blue)}
.loc-strip{display:flex;gap:8px;flex-wrap:wrap}
.loc-chip{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 13px 8px 10px;border-radius:999px;
  border:1px solid var(--hairline);background:var(--bg-2);
  font-size:13.5px;color:var(--ink-2);font-weight:500;letter-spacing:-0.005em;
  box-shadow:var(--shadow-sm);
}
.loc-chip img{width:20px;height:14px;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px var(--hairline)}
.loc-chip .cc{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--muted-2);text-transform:uppercase}

/* configurator anchors: keep the user at the config block when switching
   tier/bandwidth (each option is its own page) instead of jumping to top */
#config{scroll-margin-top:24px}
#bandwidth{scroll-margin-top:24px}

/* bandwidth selector */
.band-block{margin-top:10px}
.band-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.band-chip{
  display:inline-block;font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.01em;
  padding:8px 14px;border-radius:999px;background:var(--bg-2);color:var(--ink-2);
  border:1px solid var(--hairline);text-decoration:none;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
}
a.band-chip:hover{background:var(--bg-tint);border-color:var(--blue);color:var(--ink-1);transform:translateY(-1px)}
a.band-chip:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.band-chip.active{background:var(--blue);color:#fff;border-color:transparent}
a.band-chip.active:hover{background:var(--blue);color:#fff;transform:none}
html[data-theme="dark"] .band-chip.active{background:#e6ecff;color:#0a0f26}

/* pricing table */
.ptable-card{
  border:1px solid var(--hairline);border-radius:var(--radius-lg);
  background:var(--bg-2);overflow:hidden;box-shadow:var(--shadow-md);
}
.ptable-head{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:20px 26px;border-bottom:1px solid var(--hairline);
}
.ptable-head .t{font-size:18px;font-weight:600;letter-spacing:-0.02em;display:flex;align-items:center;gap:12px}
.ptable-head .t .flag{width:22px;height:15px;border-radius:2px;box-shadow:0 0 0 1px var(--hairline)}
.ptable-head .s{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted)}
.ptable-scroll{overflow-x:auto}
table.ptable{width:100%;border-collapse:collapse;min-width:760px}
table.ptable thead th{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2);text-align:left;font-weight:500;
  padding:14px 20px;border-bottom:1px solid var(--hairline);white-space:nowrap;
}
table.ptable thead th.right{text-align:right}
table.ptable tbody td{padding:18px 20px;border-bottom:1px solid var(--hairline-2);vertical-align:middle}
table.ptable tbody tr:last-child td{border-bottom:0}
table.ptable tbody tr{transition:background .15s}
table.ptable tbody tr:hover{background:var(--bg-tint)}
.spec-main{font-size:14.5px;font-weight:500;color:var(--ink);letter-spacing:-0.01em;line-height:1.3}
.spec-main a{color:inherit;text-decoration:none;border-bottom:1px dotted var(--muted-2)}
.spec-sub{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);margin-top:4px}
.tag-pill{
  display:inline-block;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.06em;
  padding:2px 7px;border-radius:999px;background:color-mix(in oklab,var(--accent) 16%, transparent);
  color:#067a68;margin-left:8px;vertical-align:1px;
  /* a badge that breaks across two lines stops reading as a badge */
  white-space:nowrap;
}
html[data-theme="dark"] .tag-pill{color:#3fe0c8}
.bw-cell{font-size:14px;color:var(--ink-2);font-weight:500}
.bw-cell .big{color:var(--blue);font-weight:600}
html[data-theme="dark"] .bw-cell .big{color:var(--blue-600)}
.bw-cell .ai{display:block;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--muted);margin-top:3px;font-weight:400}
.price-cell{text-align:right;white-space:nowrap}
.price-cell .n{font-size:24px;font-weight:600;letter-spacing:-0.03em;color:var(--ink)}
.price-cell .u{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted)}
.deliv{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted);white-space:nowrap}
.deliv.instant{color:#067a68}
html[data-theme="dark"] .deliv.instant{color:#3fe0c8}
.row-cta{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 15px;border-radius:9px;text-decoration:none;
  font-size:13px;font-weight:500;color:#fff;background:var(--blue);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 6px 14px -6px rgba(4,42,119,.45);
  transition:transform .15s;white-space:nowrap;
}
html[data-theme="dark"] .row-cta{color:#0a0f26;background:#e6ecff}
.row-cta:hover{transform:translateY(-1px)}

/* notice / info callout */
.notice{
  display:flex;gap:14px;align-items:flex-start;
  border:1px solid var(--hairline);border-radius:var(--radius);
  background:var(--blue-50);
  box-shadow:inset 3px 0 0 var(--blue-400);
  padding:15px 20px 15px 18px;margin-top:22px;
  font-size:13.5px;line-height:1.6;color:var(--ink-2);
}
.notice:first-child{margin-top:0}
.notice .ic{flex:none;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  color:var(--blue);background:var(--blue-100);border:0}
.notice .ic svg{width:16px;height:16px}
html[data-theme="dark"] .notice .ic{color:var(--blue-600)}
.notice b{color:var(--ink);font-weight:600}
/* box-decoration-break:clone keeps both fragments of a wrapped pill closed —
   without it the first loses its right border and the second its left. */
.notice code{font-family:'JetBrains Mono',monospace;font-size:12.5px;background:var(--bg-2);border:1px solid var(--hairline);padding:2px 6px;border-radius:5px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.notice a{color:var(--blue);text-decoration:none;font-weight:600;border-bottom:1px solid color-mix(in oklab,var(--blue) 35%, transparent);transition:border-color .15s}
.notice a:hover{border-bottom-color:var(--blue)}
html[data-theme="dark"] .notice a{color:var(--blue-600);border-bottom-color:color-mix(in oklab,var(--blue-600) 40%, transparent)}
.footnote{font-size:13px;color:var(--muted);margin-top:18px;line-height:1.5;max-width:90ch}

.section-tight{padding:clamp(40px, 6vw, 64px) 0}
/* callout notice that opens a section: tuck it nearer the section above */
.section-tight:has(> .wrap > .notice:first-child){padding-top:20px}
.stack-gap{display:flex;flex-direction:column;gap:24px}

/* colo locations table */
table.ptable.colo{min-width:640px}
/* The four-column explainer tables (protocol / codec / RAID / game-type
   guides) are plain text and need nowhere near the 760px the config tables
   do, so they keep reading as a table on a tablet instead of collapsing into
   cards that leave three quarters of every row empty. */
table.ptable.slim{min-width:620px}
.colo-city{font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:-0.01em}
.colo-country{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--ink-2)}
.colo-country img{width:20px;height:14px;border-radius:2px;box-shadow:0 0 0 1px var(--hairline)}
.svc-pill{
  display:inline-block;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.04em;
  padding:3px 8px;border-radius:999px;border:1px solid var(--hairline);color:var(--muted);
  margin:2px 4px 2px 0;
}

/* Tablet: the four pills fit one row, so keep them on one — sideways scroll is
   only the fallback for the odd long label. Phones get the wrapping row below;
   a half-visible pill at the gutter reads as a broken layout, not as "scroll me". */
@media (max-width:960px) and (min-width:641px){
  .subnav{
    overflow-x:auto;flex-wrap:nowrap;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .subnav::-webkit-scrollbar{display:none}
  .subnav a{white-space:nowrap}
}
@media (max-width:640px){
  /* Two per row, nothing clipped, nothing hidden behind a scroll gesture. */
  .subnav{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
  .subnav a{
    justify-content:center;white-space:nowrap;
    padding:11px 12px;overflow:hidden;text-overflow:ellipsis;
  }
}

/* ===== rich page sections ===== */

/* Use-case cards — auto-fit so a grid holding 2 cards (network services)
   fills its row instead of leaving two empty tracks. The 200px minimum is
   deliberate: 4×230+3×18 does not fit the 960px wrap at a 1024 viewport, and
   the four-card grids would drop their last card onto a row of its own. */
.uc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.uc{
  border:1px solid var(--hairline);border-radius:var(--radius);background:var(--bg-2);
  padding:24px 22px;display:flex;flex-direction:column;gap:12px;min-height:190px;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.uc:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:color-mix(in oklab,var(--blue) 22%, var(--hairline))}
.uc .ic{
  width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  color:var(--blue);background:var(--bg-tint);border:1px solid var(--hairline);
}
html[data-theme="dark"] .uc .ic{color:var(--blue-600)}
.uc h3{margin:0;font-size:17px;font-weight:600;letter-spacing:-0.015em}
.uc p{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)}

/* steps */
/* auto-fit, not a hard repeat(3): colocation has four steps, and a fixed
   3-track grid left the fourth alone on a second row beside two empty cells. */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;border:1px solid var(--hairline);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-2)}
.step{padding:clamp(22px,2.4vw,30px) clamp(20px,2.2vw,28px);border-right:1px solid var(--hairline);position:relative}
.step:last-child{border-right:0}
.step .no{
  font-family:'JetBrains Mono',monospace;font-size:12px;color:#fff;background:var(--blue);
  width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:500;
}
html[data-theme="dark"] .step .no{background:#e6ecff;color:#0a0f26}
.step h3{margin:16px 0 8px;font-size:18px;font-weight:600;letter-spacing:-0.02em}
.step p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}

/* OS / template grid */
.os-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.os{
  border:1px solid var(--hairline);border-radius:12px;background:var(--bg-2);
  padding:18px 14px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  transition:transform .15s, border-color .15s;
}
.os:hover{transform:translateY(-2px);border-color:color-mix(in oklab,var(--blue) 25%, var(--hairline))}
.os .gl{width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--ink-2)}
.os .gl svg{width:27px;height:27px;display:block;fill:var(--logo,var(--ink-2));transition:fill .15s}
.os[data-os="custom"] .gl svg{fill:none;stroke:var(--ink-2);stroke-width:1.6}
.os .nm{font-size:12.5px;font-weight:500;color:var(--ink-2);letter-spacing:-0.005em}
.os .vr{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted-2)}

/* per-distro brand colors */
.os[data-os="ubuntu"]{--logo:#E95420}
.os[data-os="debian"]{--logo:#A81D33}
.os[data-os="almalinux"]{--logo:#0B6CB7}
.os[data-os="rocky"]{--logo:#10B981}
.os[data-os="centos"]{--logo:#262577}
.os[data-os="fedora"]{--logo:#3C6EB4}
.os[data-os="opensuse"]{--logo:#73BA25}
.os[data-os="arch"]{--logo:#1793D1}
.os[data-os="alpine"]{--logo:#0D597F}
.os[data-os="freebsd"]{--logo:#AB2B28}
.os[data-os="kali"]{--logo:#557C94}
/* brighten the dark brand marks on dark theme */
html[data-theme="dark"] .os[data-os="debian"]{--logo:#E04357}
html[data-theme="dark"] .os[data-os="almalinux"]{--logo:#4FA8E0}
html[data-theme="dark"] .os[data-os="centos"]{--logo:#7E7CE8}
html[data-theme="dark"] .os[data-os="fedora"]{--logo:#5C97E0}
html[data-theme="dark"] .os[data-os="alpine"]{--logo:#3AA6D6}
html[data-theme="dark"] .os[data-os="freebsd"]{--logo:#E0635E}
html[data-theme="dark"] .os[data-os="kali"]{--logo:#86AAC0}

/* bandwidth tier explainer — the three meters only compare side by side, so
   keep them in a row as long as ~230px tracks fit */
.tier-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.tier{
  border:1px solid var(--hairline);border-radius:var(--radius);background:var(--bg-2);
  padding:24px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden;
}
.tier .rng{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--blue);font-weight:500;letter-spacing:.02em}
html[data-theme="dark"] .tier .rng{color:var(--blue-600)}
.tier h3{margin:0;font-size:19px;font-weight:600;letter-spacing:-0.02em}
.tier p{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.tier .meter{height:5px;border-radius:99px;background:var(--bg-tint);overflow:hidden;margin-top:auto}
.tier .meter i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--blue-500));border-radius:99px}

/* included spec list */
.incl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--hairline);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-2)}
.incl{display:grid;grid-template-columns:42px 1fr;gap:16px;padding:24px 26px;border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.incl:nth-child(2n){border-right:0}
.incl .ic{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:var(--blue);background:var(--bg-tint);border:1px solid var(--hairline)}
html[data-theme="dark"] .incl .ic{color:var(--blue-600)}
.incl h3{margin:0 0 5px;font-size:16px;font-weight:600;letter-spacing:-0.015em}
.incl p{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)}

/* FAQ */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px}
.faq-item{border-bottom:1px solid var(--hairline);padding:6px 0 18px}
/* the rule under the last item in each column points at nothing */
.faq-item:last-child,
.faq-item:nth-last-child(2):nth-child(odd){border-bottom:0}
@media (max-width:960px){
  /* single column: only the true last item loses its rule */
  .faq-item:nth-last-child(2):nth-child(odd){border-bottom:1px solid var(--hairline)}
  .faq-item:last-child{border-bottom:0}
}
.faq-item h3{margin:0 0 8px;font-size:16px;font-weight:600;letter-spacing:-0.015em;color:var(--ink);display:flex;gap:10px;align-items:flex-start}
/* Q-numbers are decorative: rendered via CSS counter so text extractors
   (AI crawlers read raw text, not CSS) never see "Q01How fast..." glued
   together. The span itself is empty + aria-hidden in the markup. */
.faq{counter-reset:faq}
.faq-item{counter-increment:faq}
.faq-item h3 .q::before{content:"Q" counter(faq,decimal-leading-zero)}
.faq-item h3 .q{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--blue);margin-top:2px}
html[data-theme="dark"] .faq-item h3 .q{color:var(--blue-600)}
.faq-item p{margin:0;font-size:14px;line-height:1.6;color:var(--muted);padding-left:24px}
.faq-item p code{font-family:'JetBrains Mono',monospace;font-size:12.5px;background:var(--bg-tint);border:1px solid var(--hairline);padding:1px 5px;border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}

@media (max-width:960px){
  .uc-grid{grid-template-columns:1fr 1fr}
  /* .steps and .tier-grid keep their auto-fit tracks here: a 768px tablet has
     room for three 220px columns, and forcing 1fr turned both sections into
     full-width banner rows several times taller than they need to be. */
  .os-grid{grid-template-columns:repeat(3,1fr)}
  .incl-grid{grid-template-columns:1fr}
  .incl{border-right:0}
  .faq{grid-template-columns:1fr}
}

/* Tablet: four 220px tracks no longer fit, and auto-fit would drop colocation's
   four steps to 3 + 1. Two columns instead, with an odd last step spanning the
   row so a 3-step page reads as 2 + 1 wide rather than 2 + 1 orphaned. */
@media (min-width:701px) and (max-width:960px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .step:last-child:nth-child(odd){grid-column:1 / -1}
  .step:nth-child(2n){border-right:0}
  .step{border-bottom:1px solid var(--hairline)}
  .steps > .step:last-child,
  .steps > .step:nth-last-child(2):nth-child(odd){border-bottom:0}
}

@media (max-width:700px){
  /* Below tablet the steps genuinely stack; swap the column rules for rows. */
  .steps{grid-template-columns:1fr}
  .step{border-right:0;border-bottom:1px solid var(--hairline)}
  .step:last-child{border-bottom:0}
  .tier-grid{grid-template-columns:1fr}
}

@media (max-width:600px){
  /* 2-up use-case cards needed ~154px of min-content but only got ~120px,
     so they punched out of .wrap and gave the page a horizontal scrollbar. */
  .uc-grid{grid-template-columns:1fr;gap:12px}
  .uc{min-height:0;padding:20px 18px}
  .ptable-head{padding:16px 18px;gap:10px}
  .step{padding:24px 20px}
  .incl{padding:20px 18px;grid-template-columns:38px 1fr;gap:14px}
  .notice{padding:14px 16px;gap:11px}
  .loc-chip,.band-chip{font-size:13px}
  /* Mono micro-labels: readable on a desktop, squinting on a phone. */
  .os .vr,.svc-pill,.uc-eyebrow .tag,.uc .meta span,.tag-pill{font-size:11px}
  /* Breadcrumb links are 14px tall inline boxes — give them a touch target. */
  .crumb{gap:6px;flex-wrap:wrap;margin-bottom:14px}
  .crumb a{padding:5px 0}
}

@media (max-width:430px){
  /* Three OS tiles at 320px left ~85px each: the version string wrapped
     under a 27px glyph and the cards lost their square proportion. */
  .os-grid{grid-template-columns:repeat(2,1fr)}
  .ptable-head{padding:14px 16px}
  /* real filter controls, not decoration — give them a comfortable hit box */
  .loc-chip{padding:10px 14px 10px 11px}
  .band-chip{padding:10px 15px}
}

/* ===== pricing tables → stacked cards below desktop =====
   The dense 6-column config tables (min-width 760) flip straight to phone-style
   stacked cards at 990px — no tablet half-step. Column headers move inline from
   data-label per cell.

   The colocation footprint table is excluded: it is four plain columns needing
   only 640px, so it still reads as a real table on a tablet. Stacking it at 990
   turned 40 PoPs into 40 quarter-empty cards seven screens tall. It gets the
   same treatment lower down, at 700px, in the block that follows. */
@media (max-width:990px){
  .ptable-scroll:not(:has(table.colo)):not(:has(table.slim)){overflow-x:visible}
  /* release the desktop min-width so the table can shrink */
  table.ptable:not(.colo):not(.slim){min-width:0}
  /* hide the header row — labels now live inline (still read by screen readers) */
  table.ptable:not(.colo):not(.slim) thead{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }
  table.ptable:not(.colo):not(.slim),
  table.ptable:not(.colo):not(.slim) tbody{display:block;width:100%}
  /* Each row = a card. The cells flow into as many columns as fit rather than
     one per row: at 768 a full-width row holding "256 GB" left ~550px of dead
     space and turned three configs into a 1,400px block. */
  table.ptable:not(.colo):not(.slim) tbody tr{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    gap:2px 22px;padding:18px 20px;border-bottom:1px solid var(--hairline);
  }
  table.ptable:not(.colo):not(.slim) tbody tr:last-child{border-bottom:0}
  table.ptable:not(.colo):not(.slim) tbody tr:hover{background:transparent}
  /* each cell: label stacked above its value */
  table.ptable:not(.colo):not(.slim) tbody td{
    padding:6px 0;border:0;text-align:left;white-space:normal;
  }
  /* the action cell always gets its own full-width row under the specs */
  table.ptable:not(.colo):not(.slim) tbody td:not([data-label]){grid-column:1 / -1}
  table.ptable:not(.colo):not(.slim) tbody td[data-label]::before{
    content:attr(data-label);display:block;margin-bottom:3px;
    font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.09em;
    text-transform:uppercase;color:var(--muted-2);font-weight:500;line-height:1.4;
  }
  table.ptable:not(.colo):not(.slim) tbody td.price-cell .n{font-size:22px}
  /* the action cell (no label) becomes a full-width button under the card */
  table.ptable:not(.colo):not(.slim) tbody td:not([data-label]){margin-top:12px}
  table.ptable:not(.colo):not(.slim) tbody td:not([data-label]):empty{display:none}
  table.ptable:not(.colo):not(.slim) tbody td:not([data-label]) .row-cta{
    display:flex;justify-content:center;width:100%;padding:12px 15px;
  }
}

/* Colocation footprint on a phone: 40 PoPs. The generic stacked-card treatment
   (label above value, four blocks per row) makes each row ~190px and the list
   ~9,600px — twelve screens of repeated COUNTRY / CITY / BUILDING labels and
   forty identical "All network services" pills. A flag, a city and a building
   need no labels, so drop them and lay each PoP out as a compact two-line
   entry: city + country on top, building underneath, services as a trailing
   pill. Roughly a third of the height, and scannable. */
@media (max-width:700px){
  .ptable-scroll:has(table.colo),.ptable-scroll:has(table.slim){overflow-x:visible}

  /* the slim guide tables use the same stacked-card treatment as the config
     tables, just one breakpoint lower */
  table.ptable.slim{min-width:0}
  table.ptable.slim thead{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }
  table.ptable.slim,
  table.ptable.slim tbody{display:block;width:100%}
  table.ptable.slim tbody tr{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    gap:2px 22px;padding:16px 18px;border-bottom:1px solid var(--hairline);
  }
  table.ptable.slim tbody tr:last-child{border-bottom:0}
  table.ptable.slim tbody tr:hover{background:transparent}
  table.ptable.slim tbody td{padding:6px 0;border:0;text-align:left;white-space:normal}
  table.ptable.slim tbody td[data-label]::before{
    content:attr(data-label);display:block;margin-bottom:3px;
    font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.09em;
    text-transform:uppercase;color:var(--muted-2);font-weight:500;line-height:1.4;
  }

  table.ptable.colo{min-width:0}
  table.ptable.colo thead{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }
  table.ptable.colo,
  table.ptable.colo tbody{display:block;width:100%}
  table.ptable.colo tbody tr{
    display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:3px;
    padding:13px 18px;border-bottom:1px solid var(--hairline-2);
  }
  table.ptable.colo tbody tr:last-child{border-bottom:0}
  table.ptable.colo tbody tr:hover{background:transparent}
  table.ptable.colo tbody td{padding:0;border:0;text-align:left;white-space:normal}
  /* the column headers are self-evident once the row is compact */
  table.ptable.colo tbody td[data-label]::before{content:none}
  /* line 1: the city — the thing you actually scan for.
     line 2: flag + country · building.   line 3: the services pill. */
  table.ptable.colo tbody td[data-label="City"]{order:1;flex:1 0 100%}
  table.ptable.colo tbody td[data-label="Country"]{order:2}
  table.ptable.colo tbody td[data-label="Building"]{order:3}
  table.ptable.colo tbody td[data-label="Building"] .spec-main::before{
    content:"· ";color:var(--muted-2);
  }
  /* Forty identical "All network services" pills said nothing forty times and
     added a third to the list height — the card header already states it once
     for the whole table. Drop them on the phone; the row becomes two lines. */
  table.ptable.colo tbody td[data-label="Services"]{display:none}
  table.ptable.colo .colo-country{font-size:12.5px;color:var(--muted);gap:7px}
  table.ptable.colo .colo-city{font-size:15px}
  table.ptable.colo .spec-main{font-size:12.5px;font-weight:400;color:var(--muted)}

  /* With the pill gone the rows are short enough to pair up, halving the scroll
     for a 40-PoP list. The flag anchors the left edge of each card. */
  table.ptable.colo tbody{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  }
  table.ptable.colo tbody tr{
    align-content:flex-start;padding:12px 14px;
    border-bottom:1px solid var(--hairline-2);
  }
  /* the grid means "last row" is no longer just the last cell — keep every
     divider except the ones sitting on the card's own bottom edge */
  table.ptable.colo tbody tr:last-child{border-bottom:0}
  table.ptable.colo tbody tr:nth-last-child(2):nth-child(odd){border-bottom:0}
  table.ptable.colo tbody tr:nth-child(odd){border-right:1px solid var(--hairline-2)}
  /* an odd PoP count leaves the last card alone in the left column — no rule
     to the right of it, nothing there to divide */
  table.ptable.colo tbody tr:last-child:nth-child(odd){border-right:0}
  table.ptable.colo tbody td[data-label="Building"]{flex:1 0 100%}
  table.ptable.colo tbody td[data-label="Building"] .spec-main::before{content:none}
}

@media (max-width:430px){
  /* Card padding on top of the page gutter left ~230px of usable row. */
  table.ptable tbody tr{padding:16px 14px}
}