/* ============================================================
   page-2026.css: shared inner-page layer for the 2026 theme.

   Loads AFTER css/home-2026.css and depends on its tokens
   (--eug-ink, --eug-border, --eug-blue, --eug-font-display,
   --eug-radius-card, --eug-shell etc). Defines only the patterns
   the homepage does not already provide: the compact page hero,
   prose/article typography, spec tables, comparison tables,
   step lists, callouts and the closing CTA band.

   Mobile-first. Every block below is single-column by default and
   only becomes multi-column at a breakpoint.
   ============================================================ */

/* ---------- utilities ---------- */
.eug-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- compact page hero ---------- */
.eug-phero { position:relative; padding:56px 0 44px; border-bottom:1px solid var(--eug-border);
  background:
    radial-gradient(120% 120% at 12% 0%, rgba(69,199,255,0.09) 0%, transparent 58%),
    var(--eug-deep-navy); }
.eug-phero-eyebrow { display:inline-block; margin-bottom:14px; padding:6px 13px;
  border:1px solid var(--eug-border-blue); border-radius:999px;
  background:rgba(69,199,255,0.08); color:var(--eug-blue);
  font-size:0.74rem; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; }
.eug-phero-h1 { margin:0 0 16px; max-width:20ch;
  font-family:var(--eug-font-display); font-weight:700; line-height:1.08;
  letter-spacing:-0.01em; color:#fff;
  /* stays readable on a 320px screen instead of filling it */
  font-size:clamp(1.85rem, 5.2vw, 3.25rem); }
.eug-phero-h1 .eug-grad { background:var(--eug-beam); -webkit-background-clip:text;
  background-clip:text; color:transparent; }
.eug-phero-sub { margin:0; max-width:62ch; font-size:1.02rem; line-height:1.7; color:var(--eug-muted); }
.eug-phero-cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }

.eug-phero-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin:32px 0 0;
  border:1px solid var(--eug-border); border-radius:var(--eug-radius-card);
  background:var(--eug-border); overflow:hidden; }
.eug-phero-stats > div { padding:16px 18px; background:var(--eug-ink); }
.eug-phero-stats dt { margin:0 0 5px; font-size:0.7rem; font-weight:700; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--eug-muted); }
.eug-phero-stats dd { margin:0; font-family:var(--eug-font-display); font-size:1.35rem;
  font-weight:800; color:#fff; line-height:1.15; }

.eug-phero-checks { display:flex; flex-wrap:wrap; gap:10px 22px; margin:24px 0 0; padding:0; list-style:none; }
.eug-phero-checks li { display:inline-flex; align-items:center; gap:8px;
  font-size:0.9rem; color:var(--eug-muted); }
.eug-phero-checks i { color:var(--eug-blue); font-size:0.82rem; }

@media (min-width:768px) {
  .eug-phero { padding:76px 0 60px; }
  .eug-phero-stats { grid-template-columns:repeat(4,1fr); }
}

/* ---------- section head ---------- */
.eug-psec-head { max-width:64ch; margin:0 0 30px; }
.eug-psec-head.center { margin-left:auto; margin-right:auto; text-align:center; }
.eug-psec-kicker { display:inline-block; margin-bottom:11px; font-size:0.74rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--eug-blue); }
.eug-psec-lead { margin:14px 0 0; font-size:1rem; line-height:1.7; color:var(--eug-muted); }

/* ---------- article / prose (guides, comparisons, editorial) ---------- */
/* Guide copy quotes console commands and long file URLs inline, and an
   unbreakable string is the one thing a text container cannot shrink below.
   Measured: +189px of page scroll at 320px on
   help/rust/add-rust-server-header-image.php from a single
   server.headerimage "https://..." line inside a <strong>. */
.eug-prose { max-width:72ch; overflow-wrap:break-word; }
.eug-prose > * + * { margin-top:1.15em; }
.eug-prose p, .eug-prose li { font-size:1.02rem; line-height:1.78; color:var(--eug-muted); }
.eug-prose h2 { margin-top:2em; font-family:var(--eug-font-display); font-weight:700;
  font-size:clamp(1.4rem,3.4vw,1.85rem); line-height:1.2; color:#fff; }
.eug-prose h3 { margin-top:1.7em; font-family:var(--eug-font-display); font-weight:700;
  font-size:clamp(1.12rem,2.6vw,1.3rem); color:#fff; }
.eug-prose strong { color:var(--eug-frost); font-weight:700; }
.eug-prose a { color:var(--eug-blue); text-decoration:underline; text-underline-offset:2px; }
.eug-prose a:hover { color:var(--eug-blue-glow); }
.eug-prose ul, .eug-prose ol { padding-left:1.3em; }
.eug-prose li + li { margin-top:0.5em; }
/* anywhere, not break-word: inline code is usually one long token with no break
   opportunity at all, and anywhere also lets it shrink in a grid/flex track. */
.eug-prose code { padding:2px 6px; border-radius:5px; background:var(--eug-interactive);
  border:1px solid var(--eug-border); font-size:0.9em; color:var(--eug-frost);
  overflow-wrap:anywhere; }
.eug-prose pre { overflow-x:auto; padding:16px 18px; border-radius:var(--eug-radius-card);
  background:var(--eug-ink); border:1px solid var(--eug-border); }
.eug-prose pre code { padding:0; border:0; background:none; }
.eug-prose blockquote { margin-left:0; padding:4px 0 4px 20px;
  border-left:3px solid var(--eug-border-blue); color:var(--eug-frost); font-style:normal; }
.eug-prose img { max-width:100%; height:auto; border-radius:var(--eug-radius-card); }

/* Article layout with a sticky contents rail on wide screens. */
.eug-article { display:grid; grid-template-columns:1fr; gap:34px; }
/* Grid items default to min-width:auto, so a wide child (a scrollable table)
   would stretch the track and scroll the whole page sideways on mobile. */
.eug-article > * { min-width:0; }
@media (min-width:1000px) { .eug-article { grid-template-columns:minmax(0,1fr) 250px; gap:56px; } }
.eug-toc { align-self:start; }
@media (min-width:1000px) { .eug-toc { position:sticky; top:96px; } }
.eug-toc h2 { margin:0 0 12px; font-size:0.72rem; font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--eug-blue); }
.eug-toc ol { margin:0; padding:0; list-style:none; counter-reset:toc; }
.eug-toc li { counter-increment:toc; border-bottom:1px solid var(--eug-border); }
.eug-toc li:last-child { border-bottom:0; }
.eug-toc a { display:flex; gap:10px; padding:10px 0; min-height:24px;
  font-size:0.88rem; line-height:1.45; color:var(--eug-muted); transition:color .16s; }
.eug-toc a::before { content:counter(toc,decimal-leading-zero); flex:none;
  font-variant-numeric:tabular-nums; color:var(--eug-blue); font-weight:700; }
.eug-toc a:hover { color:var(--eug-frost); }

/* ---------- cards ---------- */
.eug-pcards { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:640px)  { .eug-pcards.is-2, .eug-pcards.is-4 { grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px)  { .eug-pcards.is-3 { grid-template-columns:repeat(3,1fr); }
                            .eug-pcards.is-4 { grid-template-columns:repeat(4,1fr); } }
.eug-pcard { padding:24px; border:1px solid var(--eug-border); border-radius:var(--eug-radius-card);
  background:var(--eug-ink); transition:border-color .18s ease, transform .18s ease; }
.eug-pcard:hover { border-color:var(--eug-border-blue); transform:translateY(-2px); }
.eug-pcard-ico { display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; margin-bottom:14px; border-radius:11px;
  background:rgba(69,199,255,0.12); color:var(--eug-blue); font-size:1rem; }
.eug-pcard h3 { margin:0 0 8px; font-family:var(--eug-font-display); font-size:1.1rem;
  font-weight:700; color:#fff; }
.eug-pcard p { margin:0; font-size:0.93rem; line-height:1.65; color:var(--eug-muted); }
.eug-pcard h3 a { color:inherit; transition:color .16s; }
.eug-pcard h3 a:hover { color:var(--eug-blue); }
.eug-pcard h3 a:focus-visible { outline:2px solid var(--eug-blue); outline-offset:3px; border-radius:3px; }

/* ---------- spec / comparison tables ---------- */
.eug-ptable-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--eug-border); border-radius:var(--eug-radius-card); background:var(--eug-ink); }
.eug-ptable-wrap:focus-visible { outline:2px solid var(--eug-blue); outline-offset:2px; }
.eug-ptable { width:100%; min-width:560px; border-collapse:collapse; font-size:0.93rem; }
.eug-ptable caption { padding:14px 18px; text-align:left; font-size:0.8rem; color:var(--eug-muted); }
.eug-ptable thead th { padding:14px 18px; text-align:left; white-space:nowrap;
  background:var(--eug-deep-navy); color:#fff; font-size:0.84rem; font-weight:700;
  border-bottom:1px solid var(--eug-border); }
.eug-ptable tbody th { padding:13px 18px; text-align:left; font-weight:600;
  color:var(--eug-muted); border-bottom:1px solid var(--eug-border); }
.eug-ptable tbody td { padding:13px 18px; color:var(--eug-frost);
  border-bottom:1px solid var(--eug-border); }
.eug-ptable tbody tr:last-child th, .eug-ptable tbody tr:last-child td { border-bottom:0; }
.eug-ptable tbody tr:hover th, .eug-ptable tbody tr:hover td { background:rgba(69,199,255,0.04); }
.eug-ptable .is-yes { color:#5BD98A; font-weight:700; }
.eug-ptable .is-no  { color:var(--eug-muted); }

/* ---------- numbered steps ---------- */
.eug-psteps { display:grid; grid-template-columns:1fr; gap:1px; margin:0; padding:0; list-style:none;
  border:1px solid var(--eug-border); border-radius:var(--eug-radius-card);
  background:var(--eug-border); overflow:hidden; }
@media (min-width:820px) { .eug-psteps.is-3 { grid-template-columns:repeat(3,1fr); }
                           .eug-psteps.is-4 { grid-template-columns:repeat(4,1fr); } }
.eug-psteps li { padding:24px; background:var(--eug-ink); }
.eug-pstep-n { display:block; margin-bottom:11px; font-family:var(--eug-font-display);
  font-size:0.8rem; font-weight:800; letter-spacing:0.08em; color:var(--eug-blue); }
.eug-psteps h3 { margin:0 0 7px; font-family:var(--eug-font-display); font-size:1.04rem;
  font-weight:700; color:#fff; }
.eug-psteps p { margin:0; font-size:0.9rem; line-height:1.62; color:var(--eug-muted); }

/* ---------- copy + aside split ----------
   Body copy beside a supporting panel (spec list, callout, plan summary).
   Stacks on mobile; only splits at 960px. Used by the cloud/edge pages. */
.eug-psplit { display:grid; grid-template-columns:1fr; gap:28px; align-items:start; }
/* Grid items default to min-width:auto, so a wide child (a scrollable table)
   would stretch the track and scroll the whole page sideways on mobile. */
.eug-psplit > * { min-width:0; }
@media (min-width:960px) { .eug-psplit { grid-template-columns:minmax(0,1fr) minmax(0,0.85fr); gap:48px; } }
.eug-psplit .eug-prose { max-width:none; }

/* ---------- callout ---------- */
.eug-callout { display:flex; gap:14px; padding:18px 20px;
  border:1px solid var(--eug-border-blue); border-left-width:3px;
  border-radius:var(--eug-radius-sm); background:rgba(69,199,255,0.06); }
.eug-callout i { flex:none; margin-top:3px; color:var(--eug-blue); }
.eug-callout p { margin:0; font-size:0.94rem; line-height:1.66; color:var(--eug-frost); }
.eug-callout p + p { margin-top:8px; }

/* ---------- key/value spec list ---------- */
.eug-pspecs { margin:0; border:1px solid var(--eug-border);
  border-radius:var(--eug-radius-card); background:var(--eug-ink); overflow:hidden; }
.eug-pspecs > div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px;
  padding:14px 20px; border-bottom:1px solid var(--eug-border); }
.eug-pspecs > div:last-child { border-bottom:0; }
.eug-pspecs dt { margin:0; font-size:0.9rem; color:var(--eug-muted); }
.eug-pspecs dd { margin:0; font-size:0.94rem; font-weight:700; color:#fff; text-align:right; }

/* ---------- server / plan cards ----------
   Shared by the dedicated-server landing pages (uk-dedicated-servers,
   dedicated-server-london, ryzen-7950x-dedicated-server,
   clearance-dedicated-servers). One card = one buyable configuration:
   name, price, spec list, order button. Single column on mobile. */
/* Tracks are minmax(0,1fr), not 1fr: a plain 1fr floors at the column's
   min-content width, so one long product name or button label used to push the
   whole grid wider than the viewport (a real horizontal scrollbar at 1024px).
   Paired with min-width:0 on the card so its own children wrap instead. */
.eug-srv-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
@media (min-width:620px) {
  .eug-srv-grid.is-2, .eug-srv-grid.is-3, .eug-srv-grid.is-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1020px) {
  .eug-srv-grid.is-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .eug-srv-grid.is-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
.eug-srv { display:flex; flex-direction:column; min-width:0; padding:22px;
  border:1px solid var(--eug-border); border-radius:var(--eug-radius-card);
  background:var(--eug-ink); transition:border-color .18s ease, transform .18s ease; }
.eug-srv:hover { border-color:var(--eug-border-blue); transform:translateY(-2px); }
.eug-srv.is-featured { border-color:var(--eug-border-blue); }
.eug-srv-tag { display:inline-block; align-self:flex-start; margin-bottom:12px;
  padding:5px 11px; border-radius:999px; border:1px solid var(--eug-border-blue);
  background:rgba(69,199,255,0.08); color:var(--eug-blue);
  font-size:0.68rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; }
.eug-srv-name { margin:0 0 5px; font-family:var(--eug-font-display); font-size:1.18rem;
  font-weight:700; line-height:1.2; color:#fff; }
.eug-srv-sub { margin:0; font-size:0.87rem; line-height:1.55; color:var(--eug-muted); }
.eug-srv-price { display:flex; align-items:baseline; flex-wrap:wrap; gap:5px;
  margin:16px 0 0; padding-top:16px; border-top:1px solid var(--eug-border); }
.eug-srv-price b { font-family:var(--eug-font-display); font-size:1.85rem; font-weight:800;
  line-height:1; color:#fff; }
.eug-srv-per { font-size:0.85rem; color:var(--eug-muted); }
.eug-srv-note { margin:6px 0 0; font-size:0.78rem; color:var(--eug-muted); }
/* previous price, for cards that show a genuine was/now (remote-desktop offers) */
.eug-srv-was { font-size:0.85rem; color:var(--eug-muted); text-decoration:line-through; }
.eug-srv-specs { margin:18px 0 22px; padding:0; list-style:none; }
.eug-srv-specs li { display:flex; align-items:flex-start; gap:10px; padding:7px 0;
  font-size:0.9rem; line-height:1.5; color:var(--eug-frost); }
.eug-srv-specs i { flex:none; width:16px; margin-top:3px; color:var(--eug-blue); font-size:0.82rem; }
.eug-srv-specs b { font-weight:700; color:#fff; }
.eug-srv-cta { margin-top:auto; }
.eug-srv-cta .eug-btn { width:100%; }

/* ---------- pill chips (protocols, stacks, frameworks) ---------- */
.eug-pchips { display:flex; flex-wrap:wrap; gap:9px; margin:0; padding:0; list-style:none; }
.eug-pchips li { display:inline-flex; align-items:center; gap:7px; padding:7px 14px;
  border:1px solid var(--eug-border); border-radius:var(--eug-pill);
  background:var(--eug-ink); font-size:0.86rem; color:var(--eug-muted); }
.eug-pchips i { color:var(--eug-blue); font-size:0.82em; }

/* ---------- small note under a section ---------- */
.eug-pnote { margin:20px 0 0; font-size:0.84rem; line-height:1.6; color:var(--eug-muted); }

/* ---------- related links ---------- */
.eug-plinks { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px;
  margin:0; padding:22px 0 0; border-top:1px solid var(--eug-border); font-size:0.92rem; }
.eug-plinks > span { color:var(--eug-muted); font-weight:600; }
.eug-plinks a { display:inline-flex; align-items:center; min-height:24px;
  color:var(--eug-frost); transition:color .16s; }
.eug-plinks a:hover { color:var(--eug-blue); }
.eug-plinks a:focus-visible { outline:2px solid var(--eug-blue); outline-offset:3px; border-radius:3px; }

/* ---------- closing CTA band ---------- */
.eug-pcta { border-top:1px solid var(--eug-border);
  background:
    radial-gradient(90% 140% at 50% 0%, rgba(69,199,255,0.10) 0%, transparent 60%),
    var(--eug-deep-navy); }
.eug-pcta-inner { max-width:64ch; margin:0 auto; text-align:center; }
.eug-pcta-p { margin:14px 0 0; font-size:1rem; line-height:1.7; color:var(--eug-muted); }
.eug-pcta-btns { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:26px; }
.eug-pcta-trust { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px;
  margin:26px 0 0; padding:20px 0 0; border-top:1px solid var(--eug-border); list-style:none;
  font-size:0.86rem; color:var(--eug-muted); }
.eug-pcta-trust li { display:inline-flex; align-items:center; gap:8px; }
.eug-pcta-trust i { color:var(--eug-blue); font-size:0.8rem; }

/* ---------- error pages (403 / 500 / 404) ----------
   Deliberately minimal: one drawn mark, the status code, one sentence and the
   recovery links. 403.php and 500.php share this block so the pair cannot
   drift apart: style them here, never in a page-local <style>. */
.eug-err { position:relative; display:flex; align-items:center; min-height:58vh;
  padding:64px 0; text-align:center;
  background:radial-gradient(ellipse 62% 58% at 50% 20%, rgba(69,199,255,0.10), transparent 72%); }
.eug-err-mark { display:block; width:clamp(88px,20vw,128px); height:auto; margin:0 auto 4px; }
.eug-err-code { display:block; font-family:var(--eug-font-display); font-weight:800;
  font-size:clamp(3.4rem,14vw,6rem); line-height:1; letter-spacing:-0.02em;
  color:transparent; -webkit-text-stroke:2px var(--eug-border-blue); }
.eug-err h1 { margin:14px 0 12px; font-family:var(--eug-font-display); font-weight:700;
  font-size:clamp(1.5rem,4.4vw,2.2rem); color:#fff; }
.eug-err p { margin:0 auto; max-width:52ch; font-size:1rem; line-height:1.7; color:var(--eug-muted); }
.eug-err-btns { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:28px; }
.eug-err-links { margin:30px 0 0; padding:22px 0 0; border-top:1px solid var(--eug-border); }

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce) {
  .eug-pcard, .eug-toc a, .eug-plinks a, .eug-srv { transition:none !important; }
  .eug-pcard:hover, .eug-srv:hover { transform:none; }
}

/* ============================================================
   RICH PAGE COMPONENTS
   The commercial inner pages (the cloud / edge cluster) need the
   same section vocabulary the UK VPS landing page uses, not a grid
   of bordered icon boxes. These rules are ported from
   css/vps-template.css so the two families read as one site.
   Class names are kept identical to the originals on purpose: no
   page loads both stylesheets, so nothing collides, and the markup
   stays copy-compatible with uk-vps-hosting.php.
   ============================================================ */

/* ---------- pill kicker (section eyebrow) ---------- */
.eug-vps-kicker {
  display:inline-flex; align-items:center; gap:9px; margin-bottom:20px;
  padding:7px 15px; border-radius:var(--eug-pill);
  background:rgba(69,199,255,0.08); border:1px solid var(--eug-border-blue);
  font-family:var(--eug-font-display); font-weight:700; font-size:0.8rem;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--eug-blue-glow);
}
.eug-vps-kicker i { color:var(--eug-blue); }

/* ---------- honeycomb hero backdrop ----------
   Opt-in variant of the shared .eug-phero. Tiles carry OS and
   platform glyphs rather than game covers, which is what these
   pages are actually about. */
.eug-phero--hex { position:relative; overflow:hidden; text-align:center;
  padding:clamp(72px,10vw,132px) 0 clamp(48px,7vw,80px);
  background:var(--eug-canvas); border-bottom:1px solid var(--eug-border-soft); }
.eug-phero--hex::before { content:""; position:absolute; inset:-20% 0 auto; height:70%;
  background:var(--eug-pulse); pointer-events:none; }
.eug-phero-hexwall { position:absolute; top:-34px; left:50%; transform:translateX(-50%);
  z-index:0; display:flex; flex-direction:column; opacity:0.6; pointer-events:none; }
.eug-phero-hexrow { display:flex; gap:8px; margin-top:-28px; }
.eug-phero-hexrow:first-child { margin-top:0; }
.eug-phero-hexrow.shift { margin-left:54px; }
.eug-phero-hex { width:100px; height:116px; flex:none; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#16243A 0%,#0B1626 100%);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  animation:eug-phero-hexin 0.55s cubic-bezier(0.22,1,0.36,1) both; }
.eug-phero-hex i { font-size:40px; line-height:1; color:var(--eug-blue-glow); opacity:0.85; }
.eug-phero-hex svg { width:44px; height:44px; display:block; opacity:0.92; }
@keyframes eug-phero-hexin { from { opacity:0; transform:scale(0.5); } to { opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion:reduce) { .eug-phero-hex { animation:none; } }
/* scrim so the headline stays crisp over the tiles */
.eug-phero--hex::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 76% at 50% 44%, rgba(7,11,18,0.95) 0%, rgba(7,11,18,0.74) 38%, rgba(7,11,18,0.4) 70%, rgba(7,11,18,0.18) 100%),
    linear-gradient(180deg, rgba(7,11,18,0.45) 0%, rgba(7,11,18,0.22) 35%, var(--eug-canvas) 100%); }
.eug-phero--hex .eug-shell { position:relative; z-index:2; }
.eug-phero--hex .eug-phero-h1 { max-width:22ch; margin-left:auto; margin-right:auto; }
.eug-phero--hex .eug-phero-sub { margin-left:auto; margin-right:auto; }
.eug-phero--hex .eug-phero-cta,
.eug-phero--hex .eug-phero-checks { justify-content:center; }

/* ---------- slim hardware + use-case band ---------- */
.eug-vps-strip { padding:20px 0; background:var(--eug-deep-navy);
  border-top:1px solid var(--eug-border); border-bottom:1px solid var(--eug-border); }
/* Single column below 420px. Two tracks of ~124px cannot hold a label such as
   "24/7 Remote Hands" or "30 Tbps EdgeProtect" at 1.04rem display type, so the
   strip used to push the page sideways on the narrowest phones (measured +23px
   on full-rack-colocation and +18px on nvme-vps-hosting at 320px). */
.eug-vps-strip-inner { display:grid; grid-template-columns:minmax(0,1fr); gap:18px 24px; align-items:start; }
@media (min-width:420px)  { .eug-vps-strip-inner { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.eug-vps-strip-inner > div { display:inline-flex; align-items:flex-start; gap:11px; min-width:0; }
.eug-vps-strip-inner > div > i { flex:none; margin-top:1px; color:var(--eug-blue); font-size:1.4rem; }
.eug-vps-strip-inner > div > span { display:flex; flex-direction:column; min-width:0;
  font-size:0.86rem; color:var(--eug-muted); line-height:1.32; }
.eug-vps-strip-inner strong { font-family:var(--eug-font-display); font-size:1.04rem; color:var(--eug-frost); }
@media (min-width:640px)  { .eug-vps-strip-inner { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1040px) { .eug-vps-strip-inner { grid-template-columns:repeat(6,minmax(0,1fr)); } }

.eug-vps-quick-uc { display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:10px 14px; margin-top:18px; padding-top:18px; border-top:1px solid var(--eug-border); }
.eug-vps-quick-label { font-family:var(--eug-font-display); font-size:0.82rem; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--eug-muted); }
.eug-vps-quick-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.eug-vps-quick-chips span { display:inline-flex; align-items:center; gap:8px; padding:10px 17px;
  border-radius:var(--eug-pill); background:var(--eug-ink); border:1px solid var(--eug-border);
  font-family:var(--eug-font-display); font-size:0.96rem; font-weight:600; color:var(--eug-frost);
  transition:border-color 0.18s ease; }
.eug-vps-quick-chips span:hover { border-color:var(--eug-border-blue); }
.eug-vps-quick-chips i { color:var(--eug-blue); font-size:0.95em; }

/* ---------- screenshot / showcase split ---------- */
.eug-vps-panel { background:var(--eug-deep-navy);
  border-top:1px solid var(--eug-border); border-bottom:1px solid var(--eug-border); }
.eug-vps-panel-grid { display:grid; grid-template-columns:1fr; gap:32px; align-items:center; }
.eug-vps-panel-grid > * { min-width:0; }
@media (min-width:860px) { .eug-vps-panel-grid { grid-template-columns:1.2fr 1fr; gap:clamp(28px,4vw,56px); } }
.eug-vps-panel-shot { margin:0; border-radius:var(--eug-radius-card); overflow:hidden;
  background:var(--eug-ink); border:1px solid var(--eug-border); box-shadow:0 16px 40px rgba(0,0,0,0.34); }
.eug-vps-panel-bar { display:flex; align-items:center; gap:7px; padding:11px 15px;
  background:var(--eug-deep-navy); border-bottom:1px solid var(--eug-border); }
.eug-vps-panel-bar span { width:11px; height:11px; border-radius:50%; background:#33486A; }
.eug-vps-panel-bar b { margin-left:8px; font-family:var(--eug-font-display); font-size:0.8rem;
  font-weight:600; color:var(--eug-muted); }
.eug-vps-panel-shot img,
.eug-vps-panel-shot > svg { display:block; width:100%; height:auto; }
.eug-vps-panel-feats { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:22px; }
.eug-vps-panel-feats li { display:flex; align-items:flex-start; gap:15px; }
.eug-vps-panel-ico { flex:none; width:54px; height:54px; display:inline-flex; align-items:center;
  justify-content:center; border-radius:14px; background:rgba(69,199,255,0.1); border:1px solid var(--eug-border-blue); }
.eug-vps-panel-ico svg { width:27px; height:27px; display:block; }
.eug-vps-panel-feats h3 { margin:0 0 5px; font-family:var(--eug-font-display); font-size:1.14rem;
  font-weight:700; color:var(--eug-frost); }
.eug-vps-panel-feats p { margin:0; font-size:0.94rem; line-height:1.55; color:var(--eug-muted); }

/* ---------- data centre / owned hardware photo split ---------- */
.eug-vps-dc { background:var(--eug-deep-navy);
  border-top:1px solid var(--eug-border); border-bottom:1px solid var(--eug-border); }
.eug-vps-dc-grid { display:grid; grid-template-columns:1fr; gap:30px; align-items:center; }
.eug-vps-dc-grid > * { min-width:0; }
@media (min-width:860px) { .eug-vps-dc-grid { grid-template-columns:1fr 1.05fr; gap:clamp(28px,4vw,56px); } }
.eug-vps-dc-photo { position:relative; margin:0; border-radius:var(--eug-radius-card); overflow:hidden;
  border:1px solid var(--eug-border); box-shadow:0 16px 40px rgba(0,0,0,0.34); }
.eug-vps-dc-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.eug-vps-dc-tag { position:absolute; left:14px; bottom:14px; display:inline-flex; align-items:center;
  gap:7px; padding:8px 13px; border-radius:var(--eug-pill); background:rgba(7,11,18,0.82);
  border:1px solid var(--eug-border-blue); font-family:var(--eug-font-display); font-size:0.84rem;
  font-weight:700; color:var(--eug-frost); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.eug-vps-dc-tag i { color:var(--eug-blue); }
.eug-vps-dc-copy .eug-h2 { text-align:left; margin-top:14px; }
.eug-vps-dc-copy .eug-lead { text-align:left; max-width:none; margin:14px 0 0; }
.eug-vps-dc-points { list-style:none; margin:26px 0; padding:0; display:flex; flex-direction:column; gap:20px; }
.eug-vps-dc-points li { display:flex; align-items:flex-start; gap:15px; }
.eug-vps-dc-ico { flex:none; width:50px; height:50px; display:inline-flex; align-items:center;
  justify-content:center; border-radius:13px; background:rgba(69,199,255,0.1); border:1px solid var(--eug-border-blue); }
.eug-vps-dc-ico svg { width:26px; height:26px; display:block; }
.eug-vps-dc-points h3 { margin:0 0 4px; font-family:var(--eug-font-display); font-size:1.1rem;
  font-weight:700; color:var(--eug-frost); }
.eug-vps-dc-points p { margin:0; font-size:0.93rem; line-height:1.55; color:var(--eug-muted); }

/* ---------- explore-the-range link columns ---------- */
.eug-vps-explore-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:26px 22px; }
.eug-vps-explore-col h3 { margin:0 0 12px; font-family:var(--eug-font-display); font-weight:700;
  font-size:0.98rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--eug-frost); }
.eug-vps-explore-col h3 i { margin-right:7px; color:var(--eug-blue); }
.eug-vps-explore-col ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.eug-vps-explore-col a { display:inline-flex; align-items:center; gap:7px; min-height:24px;
  font-size:0.95rem; font-weight:600; color:var(--eug-muted); transition:color 0.15s ease; }
.eug-vps-explore-col a:hover { color:var(--eug-blue); }
.eug-vps-explore-col a i { font-size:0.7rem; color:var(--eug-blue); opacity:0.7; }

/* ---------- bespoke SVG diagram frame ----------
   Hand-drawn section illustrations (backup topology, cost curve,
   latency path, isolation boundary). The drawing scales with the
   container, so nothing can push the page sideways at 320px. */
.eug-pdiag { margin:0; padding:clamp(18px,3vw,32px); border:1px solid var(--eug-border);
  border-radius:var(--eug-radius-card); background:
    radial-gradient(120% 120% at 20% 0%, rgba(69,199,255,0.07) 0%, transparent 60%), var(--eug-ink); }
.eug-pdiag > svg { display:block; width:100%; height:auto; }
.eug-pdiag figcaption { margin:16px 0 0; font-size:0.86rem; line-height:1.6; color:var(--eug-muted); }
.eug-pdiag figcaption strong { color:var(--eug-frost); }

/* Diagram beside its explanation. */
.eug-pdiag-split { display:grid; grid-template-columns:1fr; gap:28px; align-items:center; }
.eug-pdiag-split > * { min-width:0; }
@media (min-width:900px) { .eug-pdiag-split { grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr); gap:clamp(28px,4vw,52px); } }

/* ---------- vertical rail (sequences, ranked lists) ---------- */
.eug-prail { list-style:none; margin:0; padding:0 0 0 30px; position:relative; }
.eug-prail::before { content:""; position:absolute; left:9px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(180deg, var(--eug-blue) 0%, rgba(69,199,255,0.12) 100%); }
.eug-prail > li { position:relative; padding:0 0 26px; }
.eug-prail > li:last-child { padding-bottom:0; }
.eug-prail > li::before { content:""; position:absolute; left:-26px; top:5px; width:12px; height:12px;
  border-radius:50%; background:var(--eug-canvas); border:2px solid var(--eug-blue); }
.eug-prail h3 { margin:0 0 6px; font-family:var(--eug-font-display); font-size:1.06rem;
  font-weight:700; color:#fff; }
.eug-prail p { margin:0; font-size:0.94rem; line-height:1.68; color:var(--eug-muted); }
.eug-prail-n { display:block; margin-bottom:5px; font-family:var(--eug-font-display);
  font-size:0.72rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--eug-blue); }

/* ---------- feature list with bespoke SVG marks ----------
   The replacement for grids of .eug-pcard: each row is a drawn mark
   plus copy, with no box around it. */
.eug-pfeat { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:26px 34px; }
/* home-2026.css also defines .eug-pfeat, as a bordered card for the homepage
   control-panel grid. That rule was leaking a border and an ink background onto
   the LIST version here, drawing exactly the box this component exists to avoid.
   Scoped to ul/ol so the homepage's div-based card is untouched. */
ul.eug-pfeat, ol.eug-pfeat { border:0; background:none; }
@media (min-width:700px) { .eug-pfeat.is-2, .eug-pfeat.is-3 { grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px) { .eug-pfeat.is-3 { grid-template-columns:repeat(3,1fr); } }
.eug-pfeat > li { display:flex; align-items:flex-start; gap:15px; min-width:0; }
.eug-pfeat-mark { flex:none; width:46px; height:46px; display:inline-flex; align-items:center;
  justify-content:center; border-radius:12px; background:rgba(69,199,255,0.09);
  border:1px solid var(--eug-border-blue); }
.eug-pfeat-mark svg { width:24px; height:24px; display:block; }
.eug-pfeat h3 { margin:0 0 6px; font-family:var(--eug-font-display); font-size:1.04rem;
  font-weight:700; color:#fff; }
.eug-pfeat p { margin:0; font-size:0.93rem; line-height:1.64; color:var(--eug-muted); }
.eug-pfeat .eug-pchips { margin-top:12px; }

/* ---------- metric row (drawn stat tiles) ---------- */
.eug-pmetrics { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin:0; padding:0;
  list-style:none; border:1px solid var(--eug-border); border-radius:var(--eug-radius-card);
  background:var(--eug-border); overflow:hidden; }
@media (min-width:900px) { .eug-pmetrics.is-4 { grid-template-columns:repeat(4,1fr); }
                           .eug-pmetrics.is-3 { grid-template-columns:repeat(3,1fr); } }
.eug-pmetrics > li { padding:22px 20px; background:var(--eug-ink); text-align:center; }
.eug-pmetrics svg { width:38px; height:38px; margin:0 auto 12px; display:block; }
.eug-pmetric-v { display:block; font-family:var(--eug-font-display); font-size:1.5rem;
  font-weight:800; line-height:1.1; color:#fff; }
.eug-pmetric-v small { margin-left:2px; font-size:0.62em; font-weight:700; color:var(--eug-blue); }
.eug-pmetric-l { display:block; margin-top:6px; font-size:0.84rem; line-height:1.5; color:var(--eug-muted); }

/* ---------- motion (rich components) ---------- */
@media (prefers-reduced-motion:reduce) {
  .eug-vps-quick-chips span, .eug-vps-explore-col a { transition:none !important; }
}

/* ---------- diagram scroll box ----------
   An SVG diagram scales with its container, so on a phone its labels shrink
   with it and stop being readable. Below 700px the drawing keeps a minimum
   width and pans inside this box instead. The box scrolls; the page does not. */
.eug-pdiag-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.eug-pdiag-scroll:focus-visible { outline:2px solid var(--eug-blue); outline-offset:2px; border-radius:6px; }
.eug-pdiag-scroll > svg { display:block; width:100%; height:auto; }
.eug-pdiag-hint { display:none; }
@media (max-width:700px) {
  .eug-pdiag-scroll > svg { min-width:560px; }
  .eug-pdiag-hint { display:flex; align-items:center; gap:8px; margin:10px 0 0;
    font-size:0.78rem; color:var(--eug-muted); }
  .eug-pdiag-hint i { color:var(--eug-blue); }
}