/* Mac Mini Vault site-wide design system ("Vault Deck Tonal"): deep slate by
   default, with the .surface-light scope returning content sections to the
   light palette (interior-page content gets it from layout.php's <main>;
   the homepage manages its own scopes). .surface-dark re-darkens islands
   inside a light scope (page heroes, CTA bands). The DevOps "Pro" band and
   the Terminal window are the deepest layer and keep their fixed dark
   tokens. Builds on base.css. */

/* ---------- Fonts (self-hosted, latin subset, variable weight) ---------- */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */

:root {
  /* Palette (deep slate, the site-wide default) */
  --bg: #232c37;
  --bg-alt: #1e2630;
  --panel: #2a3441;
  --text: #eef2f6;
  --text-secondary: #a8b4c0;
  --accent: #52c7dc;
  --accent-strong: #8adcea;
  --hairline: rgba(255, 255, 255, 0.14);
  --header-bg: rgba(30, 38, 48, 0.8);
  --btn-primary-bg: #1a7f97;
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #1e93ae;
  --card-bg: #2a3441;
  --card-border: rgba(255, 255, 255, 0.08);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 10px 28px rgba(0, 0, 0, 0.35);
  --card-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.25), 0 18px 40px rgba(0, 0, 0, 0.45);
  --pop-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  --wash: rgba(82, 199, 220, 0.14);
  --floor-shadow: rgba(0, 0, 0, 0.55);
  --footer-bg: #1e2630;
  --line: #3a4552;
  --chip-bg: rgba(82, 199, 220, 0.1);

  /* Fixed tokens: the Pro dark band and Terminal window sit a layer
     deeper than the slate page, by design */
  --pro-bg: #0d1319;
  --pro-panel: #121920;
  --pro-text: #f2f5f7;
  --pro-secondary: #9aa6b0;
  --pro-hairline: #1d2731;
  --pro-accent: #4ac2d8;
  --term-bg: #090d12;
  --term-bar: #121920;
  --term-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
  --dot-r: #ff5f57;
  --dot-y: #febc2e;
  --dot-g: #28c840;

  /* Metrics */
  --radius-card: 18px;
  --header-h: 52px;
}

/* Light content scope: interior-page content (layout.php applies it to
   <main>) and the homepage's buy-decision sections. Re-declares the light
   palette and paints its own ground. */
.surface-light {
  --bg: #ffffff;
  --bg-alt: #f5f5f7;
  --panel: #ffffff;
  --text: #1d1d1f;
  --text-secondary: #6e6e73;
  --accent: #177085;
  --accent-strong: #0f5266;
  --hairline: rgba(0, 0, 0, 0.12);
  --btn-primary-bg: #177085;
  --btn-primary-hover: #0f5266;
  --card-bg: #ffffff;
  --card-border: rgba(0, 0, 0, 0);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 28px rgba(0, 0, 0, 0.07);
  --card-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.04), 0 18px 40px rgba(0, 0, 0, 0.11);
  --pop-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
  --wash: rgba(23, 112, 133, 0.16);
  --floor-shadow: rgba(13, 32, 40, 0.26);
  --line: #e3e8ee;
  --chip-bg: rgba(23, 112, 133, 0.08);
  background: var(--bg);
  color: var(--text);
}

/* Slate islands inside a light scope: page heroes and CTA bands keep the
   site's dark chrome even though layout wraps interior content in
   .surface-light. Mirrors the :root slate set. .page-hero is included
   here directly so templates with hand-rolled hero sections (blog post,
   FAQ, contact) darken without per-template edits. */
.surface-dark,
.page-hero {
  --bg: #232c37;
  --bg-alt: #1e2630;
  --panel: #2a3441;
  --text: #eef2f6;
  --text-secondary: #a8b4c0;
  --accent: #52c7dc;
  --accent-strong: #8adcea;
  --hairline: rgba(255, 255, 255, 0.14);
  --btn-primary-bg: #1a7f97;
  --btn-primary-hover: #1e93ae;
  --card-bg: #2a3441;
  --card-border: rgba(255, 255, 255, 0.08);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 10px 28px rgba(0, 0, 0, 0.35);
  --card-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.25), 0 18px 40px rgba(0, 0, 0, 0.45);
  --wash: rgba(82, 199, 220, 0.14);
  --floor-shadow: rgba(0, 0, 0, 0.55);
  --line: #3a4552;
  --chip-bg: rgba(82, 199, 220, 0.1);
  background: var(--bg);
  color: var(--text);
}

html { background: var(--bg); }

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 1.0625rem;
}

a { text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.mono,
.hero-eyebrow,
.term-title,
.term-body,
.page-hero-eyebrow,
.breadcrumbs,
.pagination,
.drop-eyebrow,
.drop-price,
.footer-col-label,
.footer-tagline,
.dc-net-label,
.dc-net-asn,
.dc-net-chips,
.dc-net-ip,
.dc-card-specs,
.dc-map-tag {
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular,
    Menlo, Consolas, monospace;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 100%;
}

.wordmark {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
}

.site-nav { margin-left: auto; }

.nav-list {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  font-size: 0.85rem;
}

.nav-list > li { position: relative; }

.nav-list > li > a,
.nav-list > li > button {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0;
  background: none;
  border: 0;
  color: var(--text);
  font-size: 0.85rem;
}

.nav-list > li > a:hover,
.nav-list > li > button:hover { color: var(--accent); }

/* Active top-level item: subtle accent underline */
.nav-list > li.active > a,
.nav-list > li.active > button {
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.chev { flex: none; }
.has-children > a .chev,
.has-children > button .chev { opacity: 0.55; transition: transform 0.15s ease; }
.has-children:hover > :is(a, button) .chev,
.has-children:focus-within > :is(a, button) .chev { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 6px);
  min-width: 19rem;
  max-width: 23rem;
  padding: 0.4rem 0.5rem 0.5rem;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: var(--pop-shadow);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.14s ease, transform 0.14s ease;
}

/* Invisible bridge across the 10px gap so the panel does not close while
   the pointer travels from trigger to panel. */
.dropdown::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.has-children:hover > .dropdown,
.has-children:focus-within > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* Right-edge variant: Services and About panels would overflow the
   container's right edge when centered under their triggers. */
.dropdown-right {
  left: auto;
  right: -0.5rem;
  transform: translateY(6px);
}

.has-children:hover > .dropdown-right,
.has-children:focus-within > .dropdown-right { transform: translateY(0); }

.drop-eyebrow {
  padding: 0.5rem 0.75rem 0.35rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.drop-item {
  display: block;
  padding: 0.55rem 0.75rem 0.6rem;
  border-radius: 8px;
}

.drop-item:hover { background: var(--bg-alt); }

.drop-title {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  white-space: nowrap;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 500;
}

.drop-item:hover .drop-title { color: var(--accent); }

.drop-title .ext { flex: none; align-self: center; opacity: 0.55; }

.drop-price {
  margin-left: auto;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}

.drop-desc {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-secondary);
  white-space: normal;
}

/* Child active mark, mirroring the top-level accent language */
.drop-item.active { box-shadow: inset 2px 0 0 var(--accent); }
.drop-item.active .drop-title { color: var(--accent); }

.nav-toggle,
.nav-toggle-label { display: none; }

/* ---------- Buttons and links ---------- */

/* "Machined" buttons:
   12px radius, top-light gradient, hairline edge, inner highlight; press
   flattens. The gradient tops use color-mix; where unsupported, the plain
   token fill declared first stands, so the fallback is the old flat look. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.7rem;
  border: 0; /* real <button> elements otherwise keep the UA's gray border */
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  transition: filter 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.btn-primary {
  color: var(--btn-primary-text);
  background: var(--btn-primary-bg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--btn-primary-bg) 82%, white) 0%, var(--btn-primary-bg) 55%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.25);
}

.btn-primary:hover { filter: brightness(1.09); }

.btn-primary:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.18);
  filter: brightness(0.98);
}

.btn-small { padding: 0.35rem 0.95rem; font-size: 0.8rem; }

/* Secondary/outline button, the quieter alternative to .btn-primary (used
   by the cookie banner Deny). Matches the machined system's inner
   highlight; token-driven so it reads correctly in both the dark root
   scope and .surface-light. */
.btn-outline {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--hairline), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.btn-outline:hover { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.link-chevron {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--accent);
  font-size: 1rem;
  font-weight: 500;
}

.link-chevron:hover { text-decoration: underline; color: var(--accent-strong); }

/* ---------- Bands ---------- */

.band { padding: 4rem 0; background: var(--bg); }
.band-alt { background: var(--bg-alt); }

.band h2 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-align: center;
  margin-bottom: 1.25rem;
}

.container.narrow { max-width: 65ch; }

.content-section .container.narrow { text-align: center; }

.content-section h2 { font-size: clamp(1.9rem, 4vw, 2.4rem); }

.content-section p {
  color: var(--text-secondary);
  font-size: 1.125rem;
  line-height: 1.65;
}

/* Breathing room between a section's narrow intro and the full-width
   container that follows it (plan grids on the dedicated pages). */
.content-section > .container.narrow + .container { margin-top: 2.75rem; }

.section-device { margin-top: 3rem; margin-bottom: 3rem; }
.section-device img { margin-inline: auto; }

.section-photo { margin: 3rem auto 0; max-width: 760px; }

.section-photo img {
  margin-inline: auto;
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
}

/* ---------- Hero (homepage) ---------- */

.hero {
  padding: clamp(5rem, 10vw, 8.5rem) 0 3.5rem;
  background: var(--bg);
  text-align: center;
  overflow: hidden;
}

.hero-eyebrow {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--text-secondary);
  margin-bottom: 1.4rem;
}

.hero h1 {
  font-size: clamp(3rem, 6.5vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.03;
  max-width: 19ch;
  margin-inline: auto;
}

.hero-sub {
  font-size: 1.35rem;
  color: var(--text-secondary);
  max-width: 44ch;
  margin: 1.5rem auto 0;
  line-height: 1.5;
}

.hero-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  margin-top: 2.4rem;
}

/* Product stage: teal wash behind, elliptical floor shadow, masked
   reflection below. The image is cropped to the mini (940x395, base
   ~95% down); the 1 / 0.65 aspect leaves room for the reflection. */

.hero-device {
  position: relative;
  isolation: isolate;
  width: min(560px, 82vw);
  aspect-ratio: 1 / 0.65;
  margin: 3rem auto 0;
}

.hero-wash {
  position: absolute;
  inset: -34% -30% -10% -30%;
  z-index: 0;
  background: radial-gradient(50% 50% at 50% 42%, var(--wash), transparent 72%);
  pointer-events: none;
}

.hero-product {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero-floor {
  position: absolute;
  top: 61%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: 68%;
  height: 38px;
  background: radial-gradient(50% 50% at 50% 50%, var(--floor-shadow), transparent 72%);
  filter: blur(6px);
  pointer-events: none;
}

.hero-reflection {
  position: absolute;
  top: 60%;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 36%;
  object-fit: cover;
  object-position: center bottom;
  transform: scaleY(-1);
  opacity: 0.2;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent 55%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent 55%);
  pointer-events: none;
}

/* ---------- DevOps: the Pro dark band, dark by design ---------- */

.band-pro {
  background: var(--pro-bg);
  border-top: 1px solid var(--pro-hairline);
  border-bottom: 1px solid var(--pro-hairline);
  padding: 4.5rem 0;
}

.pro-inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

.band-pro h2 {
  font-size: clamp(1.9rem, 4vw, 2.4rem);
  text-align: left;
  color: var(--pro-text);
  margin-bottom: 1.1rem;
}

.pro-copy p {
  color: var(--pro-secondary);
  font-size: 1.125rem;
  line-height: 1.65;
}

.term {
  background: var(--term-bg);
  border: 1px solid var(--pro-hairline);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--term-shadow);
}

.term-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0.65rem 0.9rem;
  background: var(--term-bar);
  border-bottom: 1px solid var(--pro-hairline);
}

.t-dot { width: 11px; height: 11px; border-radius: 50%; }
.t-dot-r { background: var(--dot-r); }
.t-dot-y { background: var(--dot-y); }
.t-dot-g { background: var(--dot-g); }

.term-title {
  margin-left: 0.5rem;
  font-size: 0.72rem;
  color: var(--pro-secondary);
  letter-spacing: 0.04em;
}

.term-body {
  padding: 1.2rem 1.35rem 1.35rem;
  font-size: 0.86rem;
  line-height: 2;
  color: var(--pro-text);
  white-space: pre-wrap;
  word-break: break-word;
}

.t-prompt, .t-key { color: var(--pro-accent); }

/* neofetch gag: ASCII Mac mini + vitals */
.term-body pre.t-fetch {
  margin: 0.4rem 0;
  font-family: inherit;
  font-size: 0.72rem;
  line-height: 1.5;
  overflow-x: auto;
}
.t-art { color: var(--pro-accent); }
.t-user { color: var(--pro-accent); font-weight: 600; }
.t-dim { color: var(--pro-secondary); }

.t-cursor {
  display: inline-block;
  width: 0.58em;
  height: 1.05em;
  vertical-align: text-bottom;
  background: var(--pro-accent);
  animation: mmv-blink 1.1s steps(1, end) infinite;
}

@keyframes mmv-blink { 50% { opacity: 0; } }

/* ---------- Product cards ---------- */

.products h2 { margin-bottom: 2.5rem; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.9rem 1.6rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
  color: var(--text);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
}

.product-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.product-card .price {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  white-space: nowrap;
}

.product-card .price-prefix {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-secondary);
  margin-right: 0.3rem;
}

.product-card .per {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--text-secondary);
  margin-left: 0.15rem;
}

.product-card .blurb {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.55;
  flex-grow: 1;
}

/* Align name / price / blurb / CTA rows across cards even when a title
   wraps to two lines. Cards span the
   grid's rows via subgrid; the flex layout above is the fallback. */
@supports (grid-template-rows: subgrid) {
  .product-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span var(--card-rows, 4);
    row-gap: 0.65rem;
    align-content: start;
  }
  .product-card .card-more { align-self: end; }
}

/* Straddles the card's top border, centered, so it never overlaps the
   card's own heading (long product names reach the top-right corner). */
.product-card .badge {
  position: absolute;
  top: -0.7rem;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  background: var(--accent);
  color: var(--btn-primary-text);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.card-more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 500;
}

.product-card:hover .card-more { text-decoration: underline; }

/* ---------- Feature tiles ---------- */

.features h2 { margin-bottom: 2.5rem; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 880px;
  margin-inline: auto;
}

.feature-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.95rem;
  padding: 2.75rem 1.5rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text);
}

.feature-icon { color: var(--accent); }

/* ---------- Stat strip ---------- */

.stats { padding: 3.5rem 0; }

.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
  padding: 3rem 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.stat-strip li {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.stat-value {
  font-size: clamp(2rem, 3.6vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--accent);
}

.stat-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* ---------- Data center pages: network facts + location maps ---------- */

.dc-network {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem 2.75rem;
  align-items: start;
  margin: 1.8rem 0 0.5rem;
  padding: 1.35rem 1.5rem;
  background: var(--bg-alt);
  border: 1px solid var(--hairline);
  border-radius: 14px;
}

.dc-net-label {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.dc-net-asn {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.dc-net-asn:hover { text-decoration: underline; }
.dc-net-asn .ext { opacity: 0.5; margin-left: 0.35rem; }

.dc-net-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dc-net-chips li {
  padding: 0.32rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text);
}

@media (max-width: 560px) {
  .dc-network { grid-template-columns: 1fr; }
}

.dc-map { margin: 2rem auto 0; max-width: 560px; }

.dc-map-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
}

.dc-map-frame img { display: block; width: 100%; height: auto; }

/* The facility sits at the exact center of the generated image. */
.dc-map-marker {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
}

.dc-map-dot,
.dc-map-ring {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.dc-map-dot {
  width: 12px;
  height: 12px;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.dc-map-ring {
  width: 12px;
  height: 12px;
  border: 2px solid var(--accent);
  animation: dc-map-ping 2.8s ease-out infinite;
}

@keyframes dc-map-ping {
  0%        { transform: translate(-50%, -50%) scale(1); opacity: 0.65; }
  70%, 100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

/* Fixed light colors: the label floats on the map image, which is always
   light regardless of surface theme. */
.dc-map-tag {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -215%);
  padding: 0.3rem 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.93);
  color: #16323a;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}

.dc-map-credit {
  margin-top: 0.5rem;
  font-size: 0.7rem;
  text-align: right;
  color: var(--text-secondary);
  opacity: 0.85;
}

/* Harden the chip list against .prose list styling wherever embedded:
   (0,2,1) beats .prose ul / .prose li at (0,1,1), so no disc markers or
   list margins ever leak into the pills again. */
.dc-network ul.dc-net-chips { margin: 0; padding: 0; list-style: none; }
.dc-network .dc-net-chips li { margin-bottom: 0; line-height: 1.35; }

.dc-net-note {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Speed test row spanning the full network panel */
.dc-net-wide {
  grid-column: 1 / -1;
  padding-top: 1.35rem;
  border-top: 1px solid var(--hairline);
}

.dc-net-test {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.5rem;
}

.dc-net-test .link-chevron { font-size: 0.95rem; }

.dc-net-ip {
  padding: 0.32rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

@media (max-width: 560px) {
  .dc-net-wide { grid-column: auto; }
}

/* Centered secondary intro paragraph for labeled DC bands */
.band-intro {
  max-width: 65ch;
  margin: 0 auto 0.5rem;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* Index facility cards (the .dc-grid column override lives in the
   order-sensitive block at the end of the file, after .card-grid) */
.dc-card img {
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 0.5rem;
}

.dc-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.dc-card-head h3 { font-size: 1.25rem; }

.dc-card-specs {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}

/* MKE street address plate */
.dc-address {
  display: inline-block;
  margin-top: 1.6rem;
  padding: 1.1rem 1.4rem;
  background: var(--bg-alt);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  line-height: 1.7;
}

.dc-address a { color: var(--accent); }
.dc-address a:hover { color: var(--accent-strong); text-decoration: underline; }

.dc-slot-note {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--footer-bg);
  border-top: 1px solid var(--hairline);
  padding: 3rem 0 2.5rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--hairline);
}

.footer-col .footer-col-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.9rem;
}

.footer-col li { margin-bottom: 0.55rem; }

.footer-col a { color: var(--text-secondary); transition: color 0.12s ease; }
.footer-col a:hover { color: var(--accent); text-decoration: underline; }
.footer-col .ext { opacity: 0.5; margin-left: 0.3rem; }

.footer-contact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 1.5rem;
}

.footer-contact a { color: var(--text-secondary); transition: color 0.12s ease; }
.footer-contact a:hover { color: var(--accent); text-decoration: underline; }

/* Live status badge (bin/status-check.php cron + App::systemStatus()).
   Dot colors follow the Statuspage indicator scale and are fixed values
   picked to read on both the dark and light footer backgrounds. */
.footer-contact .footer-status {
  flex-basis: 100%;
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular,
    Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Status link rendered as a chip pill (mirrors the hero status chips). */
.footer-status a {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  transition: color 0.12s ease, border-color 0.12s ease;
}

.footer-status a:hover {
  color: var(--accent);
  border-color: var(--accent);
  text-decoration: none;
}

.footer-status .status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.55rem;
  background: var(--text-secondary);
  --status-glow: rgba(168, 180, 192, 0.18);
  box-shadow: 0 0 0 3px var(--status-glow);
  animation: mmv-status-pulse 2.6s ease-in-out infinite;
}

.footer-status .status-dot.is-none        { background: #2fbf71; --status-glow: rgba(47, 191, 113, 0.2); }
.footer-status .status-dot.is-minor       { background: #e6a817; --status-glow: rgba(230, 168, 23, 0.22); }
.footer-status .status-dot.is-major       { background: #e8590c; --status-glow: rgba(232, 89, 12, 0.22); }
.footer-status .status-dot.is-critical    { background: #d64545; --status-glow: rgba(214, 69, 69, 0.22); }
.footer-status .status-dot.is-maintenance { background: #4098d7; --status-glow: rgba(64, 152, 215, 0.22); }
.footer-status .status-dot.is-unknown     { background: var(--text-secondary); }

@keyframes mmv-status-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--status-glow); }
  50%      { box-shadow: 0 0 0 5px var(--status-glow); }
}

.footer-status .status-count {
  margin-left: 0.55rem;
  padding-left: 0.65rem;
  border-left: 1px solid var(--hairline);
  opacity: 0.85;
}

.footer-contact .apple-legal {
  flex-basis: 100%;
  font-size: 0.72rem;
  color: var(--text-secondary);
  opacity: 0.75;
}

.footer-contact .dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-secondary);
  vertical-align: middle;
  margin: 0 0.65rem;
}

/* ====================================================================
   Interior-page components
   ==================================================================== */

/* ---------- Page hero: compact interior-page header band ---------- */

.page-hero {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--hairline);
  padding: clamp(2.25rem, 5vw, 3.25rem) 0;
}

.page-hero-eyebrow {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.page-hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.page-hero .page-hero-intro {
  font-size: 1.2rem;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 60ch;
  margin-top: 1.1rem;
}

/* ---------- Prose: long-form imported content ---------- */

.prose {
  max-width: 72ch;
  line-height: 1.65;
}

.prose > * + * { margin-top: 1.1rem; }

.prose h2 {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 2.4rem;
}

.prose h3 {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 1.9rem;
}

.prose h4 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-top: 1.6rem;
}

.prose p { color: var(--text); }

.prose a {
  color: var(--accent);
}

.prose a:hover {
  color: var(--accent-strong);
  text-decoration: underline;
}

.prose ul,
.prose ol {
  padding-left: 1.5rem;
}

.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }

.prose li { margin-bottom: 0.45rem; }
.prose li::marker { color: var(--text-secondary); }

.prose ul ul,
.prose ol ol,
.prose ul ol,
.prose ol ul { margin-top: 0.45rem; }

.prose blockquote {
  margin: 1.4rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 3px solid var(--accent);
  color: var(--text-secondary);
  font-style: italic;
}

.prose code {
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular,
    Menlo, Consolas, monospace;
  font-size: 0.85em;
  background: var(--bg-alt);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 0.1em 0.35em;
}

.prose pre {
  margin: 1.4rem 0;
  padding: 1.1rem 1.25rem;
  background: var(--term-bg);
  color: var(--pro-text);
  border: 1px solid var(--pro-hairline);
  border-radius: 12px;
  overflow-x: auto;
  font-size: 0.86rem;
  line-height: 1.7;
}

.prose pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

.prose img {
  border-radius: 12px;
  max-width: 100%;
}

.prose figure { margin: 1.6rem 0; }

.prose figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-align: center;
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 2.2rem 0;
}

.prose table,
.table-scroll table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.prose th,
.prose td,
.table-scroll th,
.table-scroll td {
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--hairline);
  text-align: left;
  vertical-align: top;
}

.prose th,
.table-scroll th {
  font-weight: 600;
  background: var(--bg-alt);
}

.prose tbody tr:nth-child(even) td,
.table-scroll tbody tr:nth-child(even) td {
  background: var(--bg-alt);
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.4rem 0;
}

/* ---------- Generic cards ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.9rem 1.6rem;
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
  color: var(--text);
}

.card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.card p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

a.card { transition: transform 0.2s ease, box-shadow 0.2s ease; }

a.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
}

/* ---------- Price table: plan comparison grids ---------- */

.price-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.price-table th,
.price-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
}

.price-table thead th {
  font-weight: 600;
  font-size: 0.85rem;
  background: var(--bg-alt);
}

.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td { border-bottom: 0; }

.price-table .price-col {
  background: rgba(23, 112, 133, 0.06);
  font-weight: 600;
  color: var(--accent-strong);
  white-space: nowrap;
}

.price-table tbody tr:hover td { background: var(--bg-alt); }
.price-table tbody tr:hover td.price-col { background: rgba(23, 112, 133, 0.1); }

/* ---------- Plan grid: responsive plan cards (replaces .price-table
   on the dedicated and firewall pages) ---------- */

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.25rem;
}

.plan-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.5rem 1.35rem;
  background: var(--card-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
}

.plan-card .plan-name {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.plan-card .plan-price {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--accent-strong);
}

.plan-card .plan-price .per {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-secondary);
  margin-left: 0.1rem;
}

.plan-spec {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border-top: 1px solid var(--hairline);
  padding-top: 0.5rem;
}

.plan-spec .spec-label {
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular,
    Menlo, Consolas, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.plan-spec .spec-value { font-size: 0.92rem; }

.plan-cta {
  margin-top: auto;
  padding-top: 0.6rem;
}

/* WHMCS stock state (bin/stock-check.php cron + App::stockOos()).
   Replaces the Sign Up button, so it mimics the button's vertical
   footprint to keep the CTA rows level across cards. */
.plan-cta .stock-flag {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0;
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular,
    Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c0392b;
}

/* Out-of-stock cards offer a back-in-stock alert signup (/stock-alerts/,
   controllers/stock-alerts.php). Same mono voice as the flag, accent colour. */
.plan-cta .notify-link {
  display: inline-flex;
  align-items: center;
  margin-left: 0.8rem;
  padding: 0.35rem 0;
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular,
    Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}

.plan-cta .notify-link:hover { color: var(--accent-strong); text-decoration: underline; }

/* Back-in-stock alert page: one centred panel (reuses .contact-form-panel). */
.alert-panel { max-width: 560px; margin: 0 auto; }

.alert-model {
  margin-bottom: 1.4rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}

.alert-model-name { margin: 0 0 0.25rem; font-size: 1.35rem; }

.alert-model-price { margin: 0 0 0.7rem; font-size: 1.1rem; font-weight: 700; }

.alert-model-price .per { font-size: 0.8rem; font-weight: 400; color: var(--text-secondary); }

.alert-model-specs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.2rem;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.alert-model-specs .spec-label {
  margin-right: 0.35rem;
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular,
    Menlo, Consolas, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cf-turnstile { margin: 0.25rem 0 0.9rem; }

.alert-order { margin: 0.75rem 0 0; }

.alert-back { margin: 1.4rem 0 0; font-size: 0.9rem; }

.plan-grid-notes {
  margin-top: 1.4rem;
  font-size: 0.88rem;
  color: var(--text-secondary);
  text-align: center;
}

/* Desktop comparison: cards in the same grid row share row tracks, so
   name / price / each spec / CTA line up like table rows. Browsers
   without subgrid keep the flex cards above. */
@supports (grid-template-rows: subgrid) {
  .plan-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span var(--plan-rows, 7);
    row-gap: 0.55rem;
    align-content: start;
  }
  .plan-cta { align-self: end; }
}

/* ---------- 404 page ---------- */

.error-404-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 3rem;
  align-items: center;
}

.error-404 .graphic-404 {
  width: 100%;
  height: auto;
  max-width: 400px;
  margin: 0 auto;
  display: block;
  color: var(--text);
}

.error-404 .term { margin-bottom: 1.4rem; }

.error-404-copy p { color: var(--text-secondary); line-height: 1.6; }

.error-search {
  display: flex;
  gap: 0.6rem;
  margin: 1.2rem 0 1.4rem;
  max-width: 30rem;
}

.error-search .form-input { flex: 1; }

.error-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 900px) {
  .error-404-inner { grid-template-columns: 1fr; gap: 2rem; }
}

/* ---------- Forms ---------- */

.form-field { margin-bottom: 1.25rem; }

.form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.form-label .optional {
  font-weight: 400;
  color: var(--text-secondary);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 0.15s ease;
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

.form-textarea { min-height: 9rem; resize: vertical; }

/* Custom select chevron: data URIs cannot ride currentColor, so the
   stroke is hardcoded per surface scope (values = each scope's
   --text-secondary). */
.form-select {
  appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1.5 1.75 4.5 4.5 4.5-4.5' fill='none' stroke='%23a8b4c0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 12px 8px;
}

.surface-light .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1.5 1.75 4.5 4.5 4.5-4.5' fill='none' stroke='%236e6e73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

.form-input[aria-invalid="true"],
.form-select[aria-invalid="true"],
.form-textarea[aria-invalid="true"] { border-color: #c0392b; }

.form-hint {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.form-errors {
  margin-bottom: 1.5rem;
  padding: 0.9rem 1.1rem 0.9rem 2.2rem;
  background: rgba(192, 57, 43, 0.07);
  border: 1px solid rgba(192, 57, 43, 0.35);
  border-radius: 12px;
  color: #8e2b20;
  font-size: 0.9rem;
  list-style: disc;
}

.form-errors li { margin: 0.2rem 0; }

.form-success {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin-bottom: 1.5rem;
  padding: 1rem 1.1rem;
  background: rgba(40, 130, 60, 0.08);
  border: 1px solid rgba(40, 130, 60, 0.35);
  border-radius: 12px;
  color: #1e6330;
  font-size: 0.95rem;
}

.form-success-icon {
  flex: none;
  width: 42px;
  height: 42px;
  padding: 10px;
  border-radius: 11px;
  background: rgba(40, 130, 60, 0.12);
  color: #1e6330;
}

.form-success p { margin: 0.15rem 0 0; }

/* ---------- Pagination ---------- */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.8rem;
}

.pagination a,
.pagination .current,
.pagination .gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
}

.pagination a {
  color: var(--accent);
  border: 1px solid var(--hairline);
}

.pagination a:hover {
  background: var(--bg-alt);
  color: var(--accent-strong);
}

.pagination .current {
  background: var(--accent);
  color: var(--btn-primary-text);
  font-weight: 600;
}

.pagination .gap { color: var(--text-secondary); }

/* ---------- Breadcrumbs ---------- */

.breadcrumbs {
  font-size: 0.75rem;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.breadcrumbs li + li::before {
  content: "/";
  color: var(--hairline);
}

.breadcrumbs a { color: var(--text-secondary); }
.breadcrumbs a:hover { color: var(--accent); text-decoration: underline; }

.breadcrumbs [aria-current="page"] { color: var(--text); }

/* ---------- CTA band ---------- */

.cta-band {
  background: var(--bg-alt);
  border-top: 1px solid var(--hairline);
  padding: 3.25rem 0;
  text-align: center;
}

.cta-band h2 {
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 1.75rem;
}

.cta-band .cta-sub {
  max-width: 56ch;
  margin: -0.75rem auto 1.75rem;
  color: var(--text-secondary);
}
.cta-band .hero-ctas { margin-top: 0; }

/* ---------- Search: header field, suggest dropdown, results pages ---------- */

/* Header widget: icon only until focused, then the field slides open. Kept
   open while it holds text (:not(:placeholder-shown)) so a typed query does
   not vanish on blur. Works with zero JS; search.js fills the listbox. */
.header-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
}

.header-search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  transition: color 0.12s ease;
}

.header-search-icon:hover { color: var(--accent); }

.header-search-input {
  width: 0;
  opacity: 0;
  padding: 0.32rem 0;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: width 0.18s ease, opacity 0.18s ease, padding 0.18s ease, border-color 0.18s ease;
}

.header-search-input::-webkit-search-decoration { -webkit-appearance: none; }

.header-search-input::placeholder {
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.header-search:focus-within .header-search-input,
.header-search-input:not(:placeholder-shown) {
  width: 12rem;
  opacity: 1;
  padding: 0.32rem 0.7rem;
  background: var(--panel);
  border-color: var(--line);
}

.header-search-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}

/* Suggest listbox: same panel language as the nav dropdowns */
.header-search-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 22rem;
  max-width: min(28rem, calc(100vw - 2rem));
  margin: 0;
  padding: 0.4rem 0.5rem 0.5rem;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: var(--pop-shadow);
}

.header-search-list[hidden] { display: none; }

.hs-option a {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 500;
}

.hs-option a:hover,
.hs-option[aria-selected="true"] a { background: var(--bg-alt); color: var(--accent); }

.hs-type {
  flex: none;
  min-width: 2.6rem;
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.hs-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hs-more { margin-top: 0.35rem; border-top: 1px solid var(--hairline); }

.hs-more a {
  display: block;
  padding: 0.6rem 0.75rem 0.3rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.hs-more a:hover,
.hs-more[aria-selected="true"] a { color: var(--accent); }

.hs-empty {
  padding: 0.6rem 0.75rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

/* Results pages (/search/ and /faq/search/) plus the FAQ index/article forms */
.search-row,
.faq-search-row { display: flex; gap: 0.6rem; max-width: 40rem; }

.search-row .form-input,
.faq-search-row .form-input { flex: 1; }

.search-row .form-input::placeholder,
.faq-search-row .form-input::placeholder {
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.search-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.75rem;
}

.search-filters a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.38rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.search-filters a:hover { border-color: var(--accent); color: var(--accent); }

.search-filters a[aria-current="page"] {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

.search-filter-count { font-weight: 600; opacity: 0.75; }

.search-results,
.faq-results { max-width: 46rem; margin-top: 2.75rem; padding: 0; list-style: none; }

.search-result + .search-result,
.faq-result + .faq-result { border-top: 1px solid var(--hairline); margin-top: 1.5rem; padding-top: 1.5rem; }

.search-result h2,
.faq-result h2 { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; }

.search-result h2 { margin-top: 0.4rem; }

.search-result h2 a,
.faq-result h2 a { color: var(--accent); }

.search-result h2 a:hover,
.faq-result h2 a:hover { color: var(--accent-strong); text-decoration: underline; }

.result-tag,
.result-cat {
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.result-type { font-weight: 600; }

.result-cat {
  display: inline-block;
  background: var(--bg-alt);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 0.15rem 0.5rem;
  margin-top: 0.55rem;
}

.search-result p,
.faq-result p { margin-top: 0.6rem; font-size: 0.95rem; color: var(--text-secondary); line-height: 1.55; }

.search-result mark,
.faq-result mark {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--text);
  border-radius: 3px;
  padding: 0 0.12em;
}

.search-empty,
.faq-empty { max-width: 46rem; margin-top: 2.75rem; }

.search-empty p + p,
.faq-empty p + p { margin-top: 0.8rem; }

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .pro-inner { grid-template-columns: 1fr; }
  .band-pro h2 { text-align: center; }
  .pro-copy { text-align: center; }
  .term { max-width: 560px; margin-inline: auto; }

  .nav-toggle-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    margin-left: auto;
    width: 40px;
    height: 40px;
    padding: 9px;
    cursor: pointer;
  }

  .nav-toggle-label span {
    display: block;
    height: 1.5px;
    background: var(--text);
    border-radius: 1px;
  }

  .nav-toggle {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
  }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-left: 0;
    background: var(--panel);
    border-bottom: 1px solid var(--hairline);
    box-shadow: var(--pop-shadow);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }

  .nav-toggle:checked ~ .site-nav { display: block; }

  /* Search sits between the wordmark and the hamburger; the open list
     becomes a full-width sheet under the header. */
  .header-search { order: 1; margin-left: auto; }
  .nav-toggle-label { order: 2; margin-left: 0; }
  .header-search:focus-within .header-search-input,
  .header-search-input:not(:placeholder-shown) { width: min(11rem, 36vw); }
  .header-search-list {
    position: fixed;
    top: var(--header-h);
    left: 0.75rem;
    right: 0.75rem;
    min-width: 0;
    max-width: none;
    border-radius: 0 0 14px 14px;
  }

  .nav-toggle:focus-visible + .nav-toggle-label {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 8px;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.75rem 1.25rem 1.25rem;
    font-size: 1rem;
  }

  .nav-list > li { border-bottom: 1px solid var(--hairline); }
  .nav-list > li:last-child { border-bottom: 0; }

  .nav-list > li > a,
  .nav-list > li > button {
    width: 100%;
    justify-content: space-between;
    padding: 0.85rem 0;
    font-size: 1rem;
  }

  .nav-list > li.active > a,
  .nav-list > li.active > button {
    box-shadow: inset 3px 0 0 var(--accent);
    padding-left: 0.75rem;
  }

  .dropdown {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    max-width: none;
    padding: 0 0 0.75rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  /* Mobile keeps the plain indented-link accordion: no hover bridge,
     eyebrows, descriptions, or price tags. */
  .dropdown::before { display: none; }
  .drop-eyebrow,
  .drop-desc,
  .drop-price { display: none; }

  .drop-item { padding: 0.5rem 0 0.5rem 1rem; border-radius: 0; }
  .drop-item:hover { background: transparent; }

  .drop-title {
    white-space: normal;
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-secondary);
  }

  .drop-item:hover .drop-title { color: var(--accent); }
  .drop-item.active { box-shadow: none; }
  .drop-item.active .drop-title { color: var(--accent); }

  .has-children > a .chev,
  .has-children > button .chev { display: none; }

  .nav-signup { padding-top: 1rem; }
  .nav-signup .btn { width: 100%; padding: 0.7rem 1rem; font-size: 0.95rem; }

  /* The rest of the page collapses here; keep the footer in step instead
     of staying 4-up until 700px. */
  .footer-columns { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .band { padding: 2.75rem 0; }
  .band-pro { padding: 3.25rem 0; }

  .hero-ctas { flex-direction: column; gap: 1.1rem; }
  .hero-eyebrow { font-size: 0.68rem; letter-spacing: 0.12em; }

  .term-body { font-size: 0.78rem; }

  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-tile { padding: 1.75rem 0.75rem; }

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

  .footer-contact { flex-direction: column; }
  .footer-contact .dot { margin: 0 0.45rem; }
}

@media (max-width: 480px) {
  .product-grid { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr; }
  .footer-columns { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
  .product-card:hover, a.card:hover { transform: none; }
  .t-cursor { animation: none; opacity: 1; }
}

/* ====================================================================
   Vault Deck components:
   logo lockup, live status chips, split bands with SVG graphics, rack
   band with stat cards, photo plates, carded feature tiles, footer
   glyph.
   ==================================================================== */

/* Header lockup: glyph + wordmark */
.wordmark { display: inline-flex; align-items: center; gap: 0.55rem; }
.wordmark .logo-mark { color: var(--accent); flex: none; }
/* Wordmark lockup: ink rides currentColor,
   the "Vault" accent rides --wm-accent, wired to the surface's accent. */
.wm { --wm-accent: var(--accent); }

/* Hero status chips (live via /assets/js/status.js) */
.hero-status {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.6rem;
}
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.32rem 0.85rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  background: var(--panel);
  text-decoration: none;
}
a.status-chip:hover { border-color: var(--accent); color: var(--accent); }
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #28c840;
  box-shadow: 0 0 0 3px rgba(40, 200, 64, 0.18);
}
.status-chip.is-degraded .status-dot {
  background: var(--dot-y);
  box-shadow: 0 0 0 3px rgba(254, 188, 46, 0.18);
}
.status-chip.is-outage .status-dot {
  background: var(--dot-r);
  box-shadow: 0 0 0 3px rgba(255, 95, 87, 0.18);
}
.status-chip.is-maintenance .status-dot {
  background: var(--pro-accent);
  box-shadow: 0 0 0 3px rgba(74, 194, 216, 0.18);
}


/* Two-column band: copy beside a graphic */
.split-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 3.5rem;
  align-items: center;
}
.split-copy h2 { font-size: 2rem; letter-spacing: -0.025em; margin-bottom: 0.9rem; }
.split-copy p { color: var(--text-secondary); font-size: 1.08rem; line-height: 1.6; }
.split-copy .link-chevron { margin-top: 1.1rem; display: inline-flex; }
.graphic { width: 100%; height: auto; color: var(--text); }
.graphic-schematic { max-width: 520px; margin: 0 auto; display: block; }

/* Rack band: elevation beside the stat grid */
.rack-inner {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 3.5rem;
  align-items: center;
}
.graphic-rack { max-height: 460px; margin: 0 auto; }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1.6rem;
}
.stat-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.3rem 1.4rem;
  background: var(--panel);
}
.stat-card .stat-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: -0.02em;
  color: var(--accent);
  display: block;
}
.stat-card .stat-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 0.3rem;
  display: block;
}

/* Photo plates */
.photo-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.photo-plate {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--panel);
}
.photo-plate img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-plate figcaption {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  padding: 0.6rem 0.9rem;
  border-top: 1px solid var(--line);
}

/* Feature tiles as hairline cards */
.feature-grid { max-width: 980px; gap: 1rem; }
.feature-tile {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  padding: 1.4rem 1.25rem;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.9rem;
  text-align: left;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.feature-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow);
  border-color: rgba(82, 199, 220, 0.35);
}
.surface-light .feature-tile:hover { border-color: rgba(23, 112, 133, 0.35); }
.feature-tile .feature-icon {
  flex: none;
  width: 42px;
  height: 42px;
  padding: 9px;
  border-radius: 11px;
  background: var(--chip-bg);
}

/* Same icon chip on generic cards (firewall page tiles) */
.card .card-icon {
  width: 42px;
  height: 42px;
  padding: 9px;
  border-radius: 11px;
  background: var(--chip-bg);
  color: var(--accent);
  margin-bottom: 0.9rem;
}
.feature-tile span:last-child { font-size: 0.92rem; font-weight: 500; }

/* Terminal title-bar glyph */
.term-title { display: inline-flex; align-items: center; gap: 0.45rem; }
.term-title .logo-mark { color: var(--pro-accent); opacity: 0.9; }

/* Footer brand glyph */
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin: 2rem 0 1.25rem;
  color: var(--text);
}

.footer-tagline {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

@media (max-width: 900px) {
  .split-inner, .rack-inner { grid-template-columns: 1fr; gap: 2rem; }
  .photo-strip { grid-template-columns: 1fr; }
  .graphic-rack { max-height: 380px; }
}

/* ====================================================================
   Card media images, centered narrow grids, dedicated family
   headers. Late in the file on purpose: the count classes must win
   over the generic .product-grid media rules above.
   ==================================================================== */

.product-card .card-media,
.plan-card .plan-media { margin: 0; }

/* Media images are pre-composed on a uniform 600x360 canvas
   (bin/trim-images.php), so a plain width rule gives every card an
   identically framed image block. */
.product-card .card-media img,
.plan-card .plan-media img {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin-inline: auto;
}

/* Two overview tiles (colocation index): center them */
.product-grid-2 {
  grid-template-columns: repeat(2, minmax(240px, 340px));
  justify-content: center;
}

/* Narrow plan grids center instead of hugging the left edge */
.plan-grid-1 {
  grid-template-columns: minmax(260px, 420px);
  justify-content: center;
}
.plan-grid-2 {
  grid-template-columns: repeat(2, minmax(240px, 400px));
  justify-content: center;
}
.plan-grid-3 { grid-template-columns: repeat(3, minmax(240px, 1fr)); }

@media (max-width: 900px) {
  .plan-grid-3 { grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}
@media (max-width: 640px) {
  .product-grid-2,
  .plan-grid-1,
  .plan-grid-2,
  .plan-grid-3 { grid-template-columns: 1fr; }
}

/* Inline plan thumb: small hardware image beside the model name
   (dedicated tiles; plan-grid image_style 'inline') */
.plan-name-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.plan-name-row .plan-thumb {
  flex: none;
  height: 30px;
  width: auto;
  max-width: 84px;
  object-fit: contain;
}

/* Single-card plan grid (Mac Studio colo): a wider card and a larger
   product image so the lone tile reads as intentional */
.plan-grid-1 { grid-template-columns: minmax(280px, 480px); }
.plan-grid-1 .plan-media img { max-width: 340px; }

/* ====================================================================
   Data center page (spec-sheet layout). Late in the file so
   these count/scope modifiers beat the generic grid rules above.
   ==================================================================== */

/* Hero status chips: .hero-status centers by default; the page-hero
   content is left-aligned. Same story for a hero CTA row. */
.page-hero .hero-status { justify-content: flex-start; margin-top: 1.5rem; }
.page-hero .hero-ctas { justify-content: flex-start; margin-top: 1.75rem; }

/* 4-up facility stat row */
.stat-grid.dc-stats { grid-template-columns: repeat(4, 1fr); margin-top: 2.2rem; }

@media (max-width: 860px) {
  .stat-grid.dc-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .stat-grid.dc-stats { grid-template-columns: 1fr; }
}

/* Per-slot tiles inside the cabinet split */
.feature-grid.dc-slot-tiles { grid-template-columns: repeat(2, 1fr); margin-top: 1.4rem; }

@media (max-width: 560px) {
  .feature-grid.dc-slot-tiles { grid-template-columns: 1fr; }
}

/* Index facility cards: two centered cards, not the generic 3-up
   .card-grid (that rule sits earlier at higher file position and must
   lose to this one). */
.card-grid.dc-grid {
  grid-template-columns: repeat(2, 1fr);
  max-width: 880px;
  margin-inline: auto;
}

@media (max-width: 640px) {
  .card-grid.dc-grid { grid-template-columns: 1fr; }
}

/* Two-plate strip (PHX has two photos) */
.photo-strip.photo-strip-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 880px;
  margin-inline: auto;
}

@media (max-width: 900px) {
  .photo-strip.photo-strip-2 { grid-template-columns: 1fr; }
}

/* ---------- Page-specific rules (kept here rather than in template
   <style> blocks) ---------- */

/* Legal pages */
.legal-body { padding: clamp(3rem, 6vw, 4.5rem) 0 5.5rem; }

/* Cookie consent banner (partials/cookie-banner.php + consent.js). Fixed
   card outside <main>, so it inherits the dark :root tokens by design.
   z-index sits above the sticky .site-header (50). The global
   prefers-reduced-motion block already suppresses the entrance animation. */
.cookie-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  max-width: 430px;
  padding: 1.1rem 1.25rem 1.2rem;
  background: var(--panel);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--pop-shadow);
  animation: cookie-banner-in 0.25s ease-out;
}

@keyframes cookie-banner-in {
  from { opacity: 0; transform: translateY(8px); }
}

.cookie-banner-eyebrow {
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular,
    Menlo, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.cookie-banner-text {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.cookie-banner-text a { color: var(--accent); }
.cookie-banner-text a:hover { text-decoration: underline; }

/* .btn's display:inline-flex would defeat the UA [hidden] rule, so make
   hidden authoritative anywhere inside the banner. */
.cookie-banner [hidden] { display: none !important; }

.cookie-banner-more { margin-top: 0.6rem; }

.cookie-banner-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

.cookie-banner-more-link {
  background: none;
  border: 0;
  padding: 0.35rem 0.2rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
}

.cookie-banner-more-link:hover { color: var(--accent); text-decoration: underline; }

@media print {
  .cookie-banner { display: none; }
}

/* About Us staff cards */
.staff-card { align-items: center; text-align: center; }
.staff-card p { margin-top: -0.35rem; }

.staff-photo {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 0.5rem;
}

.staff-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-alt);
  border: 1px solid var(--hairline);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
}

.about-logo { margin-top: 2.4rem; }
.about-logo img { width: min(320px, 100%); margin-inline: auto; }

/* Getting Started steps */
.start-step { max-width: 720px; margin-inline: auto; }
.start-step + .start-step { margin-top: 2.6rem; padding-top: 2.6rem; border-top: 1px solid var(--hairline); }

.start-step .path {
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular,
    Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  color: var(--accent);
  margin-bottom: 0.4rem;
}

.start-step h2 { margin-top: 0; }

/* "2 Different Ways" cards (mac-mini-colocation) */
.ways-grid {
  grid-template-columns: repeat(2, 1fr);
  max-width: 880px;
  margin-inline: auto;
}

@media (max-width: 480px) {
  .ways-grid { grid-template-columns: 1fr; }
}

.ways-grid .card { text-align: center; align-items: center; }

/* Wide centered card grid (why-use-a-mac-mini) */
.card-grid-wide { max-width: 1100px; margin: 1.6rem auto 0; }

/* Highlighted apply panel (careers) */
.apply-panel {
  margin-top: 2rem;
  padding: 1.3rem 1.5rem;
  background: var(--bg-alt);
  border: 1px solid var(--hairline);
  border-radius: 14px;
}

/* Cloud-hosting landers: 4-up "why choose" cards with mono numerals */
.card-grid.cloud-why { grid-template-columns: repeat(4, 1fr); margin-top: 1.6rem; }

@media (max-width: 900px) {
  .card-grid.cloud-why { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .card-grid.cloud-why { grid-template-columns: 1fr; }
}

.cloud-why .card .num {
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular,
    Menlo, Consolas, monospace;
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  color: var(--accent);
}

.cloud-dc {
  margin-top: 2.4rem;
  max-width: 560px;
  margin-inline: auto;
}

/* "Most popular" badge on plan cards */
.plan-card { position: relative; }

.plan-badge {
  position: absolute;
  top: -0.7rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.24rem 0.75rem;
  border-radius: 999px;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular,
    Menlo, Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Rent-vs-colocate comparison table (dedicated pages, dark island) */
.compare-table th:first-child,
.compare-table td:first-child { font-weight: 600; }

.compare-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin-top: 1.75rem;
}

/* Mono from-price line on service hub cards */
.card .card-price {
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular,
    Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent);
}

/* Stock filter strip above the dedicated plan grids (?stock=in). */
.plan-filter {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.75rem auto -1.25rem;
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

/* Anchored plan-family sections land below the sticky header */
.content-section[id] { scroll-margin-top: calc(var(--header-h) + 0.5rem); }

.plan-filter-note {
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular,
    Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ====================================================================
   Contact page (channels + form split). Late in the file so
   the compact channel-card overrides beat the generic .card rules.
   ==================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.contact-form-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  box-shadow: var(--card-shadow);
}

.contact-eyebrow {
  display: block;
  margin-bottom: 0.6rem;
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular,
    Menlo, Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.contact-form-panel > .contact-eyebrow { margin-bottom: 1.4rem; }

/* Mono labels scoped to the contact panel so FAQ search, the 404 box,
   and the admin login keep their plain labels. */
.contact-form-panel .form-label {
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular,
    Menlo, Consolas, monospace;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0;
}

.contact-aside { display: grid; gap: 1rem; }

.contact-aside .card.contact-channel { padding: 1.25rem 1.4rem; gap: 0.15rem; }
.contact-channel .card-icon { margin-bottom: 0.6rem; }
.contact-channel p { font-size: 0.95rem; }
.contact-channel p a { color: var(--accent); }
.contact-channel p a:hover { color: var(--accent-strong); text-decoration: underline; }
.contact-channel .ext { opacity: 0.5; margin-left: 0.3rem; }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .form-actions .btn { width: 100%; }
}

/* ---------- Lander chrome (Google Ads landing pages) ---------- */
/* layout.php renders this when a pages.php entry sets chrome => 'lander':
   wordmark + phone + one CTA up top, legal-only footer, no nav or search.
   Everything reuses the site-header/site-footer shells and tokens. */

.header-lander-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-left: auto;
}

.header-lander-phone {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: color 0.12s ease;
}

.header-lander-phone:hover { color: var(--text); }

/* On phones the header keeps the click-to-call number and drops the CTA
   button instead (the hero's primary CTA is still above the fold). */
@media (max-width: 540px) {
  .header-lander-actions .btn { display: none; }
}

.footer-lander .footer-brand { margin-top: 0; }

.footer-lander .footer-contact {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding-top: 0.5rem;
}

.footer-lander-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.6rem;
  margin: 0.5rem 0;
}

.footer-lander-links a { color: var(--text-secondary); transition: color 0.12s ease; }
.footer-lander-links a:hover { color: var(--accent); text-decoration: underline; }

/* Numbered how-it-works cards (colocation lander); same treatment as the
   cloud-why cards' step numbers. */
.lander-steps .card .num {
  font-family: "JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular,
    Menlo, Consolas, monospace;
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  color: var(--accent);
}

/* Chooser lander path cards: ways-grid layout plus a bottom-anchored CTA. */
.choose-grid .card { display: flex; flex-direction: column; }
.choose-grid .card .btn { margin-top: auto; }
.choose-grid .card ul {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
  font-size: 0.95rem;
  color: var(--text-secondary);
}
.choose-grid .card ul li { margin-bottom: 0.45rem; }