/* ═══════════════════════════════════════════════════════════
   Blue Arctic V6 · Inner-page kit
   ────────────────────────────────
   Shared scaffolding for every non-home page: page hero,
   breadcrumbs, feature grids, split rows, tables, FAQ,
   steps, forms, legal layout, CTA band. Loaded via
   $page_css = ['page'] (before any page-specific sheet).
   ═══════════════════════════════════════════════════════════ */

/* ── Breadcrumbs ───────────────────────────────────────── */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  font-size: var(--fs-tiny);
  color: var(--ink-3);
  margin-bottom: 1.4rem;
}
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--blue-600); }
.crumbs .ico { color: var(--line-2); }
.page-hero-dark .crumbs, .page-hero-dark .crumbs a { color: #7A93AB; }
.page-hero-dark .crumbs a:hover { color: var(--sky-400); }

/* ── Page hero ─────────────────────────────────────────────
   Interior heroes are tighter than the homepage by design: the
   homepage is the cinematic intro; inner pages get to content
   faster. Vertical footprint reduced ~30% (2026-07-22): lower
   top/bottom padding and tighter gaps between eyebrow → headline
   → lead → CTAs → proof, without shrinking type. */
.page-hero {
  position: relative;
  padding-block: clamp(2.5rem, 5vw, 4.25rem) clamp(2.25rem, 4.25vw, 3.25rem);
  background: var(--wash-hero), var(--paper);
}
.page-hero h1 {
  font-size: clamp(2.35rem, 4.6vw, 3.6rem);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  max-width: 18em;
  margin-bottom: .9rem;
}
.page-hero h1 em { font-style: normal; color: var(--blue-600); }
.page-hero .lead { max-width: 42em; }
.page-hero .eyebrow { margin-bottom: .85rem; }
.page-hero-ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }
.page-hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin-top: 1.2rem;
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.page-hero-proof span { display: inline-flex; align-items: center; gap: .45rem; }
.page-hero-proof .ico { color: var(--ok-600); }

/* Split hero (copy + photo) */
.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.page-hero-photo { position: relative; }
.page-hero-photo img {
  width: 100%;
  height: auto;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-panel);
}
@media (max-width: 900px) {
  .page-hero-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Dark hero variant */
.page-hero-dark {
  background:
    radial-gradient(1000px 480px at 85% -12%, rgba(95, 185, 238, .14), transparent 60%),
    radial-gradient(700px 400px at -5% 30%, rgba(21, 96, 232, .12), transparent 55%),
    var(--navy-950);
  border-bottom: 0;
  color: #A8BFD3;
}
.page-hero-dark h1 { color: #F4F9FD; }
.page-hero-dark h1 em { color: var(--sky-400); }
.page-hero-dark .lead { color: #A8BFD3; }
.page-hero-dark .page-hero-proof { color: #9DB4C9; }
.page-hero-dark .page-hero-proof .ico { color: var(--sky-400); }

/* ── In-page anchor nav (platform sections etc.) ───────── */
.anchor-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.anchor-nav-inner {
  display: flex;
  gap: .25rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: .55rem;
}
.anchor-nav-inner::-webkit-scrollbar { display: none; }
.anchor-nav a {
  flex: none;
  padding: .45rem 1rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.anchor-nav a:hover { color: var(--blue-600); background: var(--frost); text-decoration: none; }

/* ── Plan-grid variants (web-hosting, pricing, services) ── */
/* Scoped to desktop so components.css's ≤900px single-column
   collapse always wins on mobile. */
@media (min-width: 1101px) {
  .plan-grid-4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .plan-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
.plan-grid-4 .plan-card { padding: 1.5rem 1.3rem; }
.plan-grid-4 .plan-price .amount { font-size: 2.1rem; }

.plan-grid-2 { max-width: 56rem; margin-inline: auto; }
@media (min-width: 901px) {
  .plan-grid-2 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Domain search module (web-hosting) ─────────────────────
   A single contained card, not a full-width unstyled form.
   Input + Search read as one component on desktop and stack
   cleanly on mobile. Endpoint/method/params unchanged. */
.section-domain { padding-block: var(--space-section-md); }
.domain-card {
  /* 2026-08-17: widened from 40rem after the owner flagged the search as
     visually undersized. 52rem gives the input room for realistic domain
     names and puts the component at the prominence of established
     hosting-company domain searches, without dominating the page. */
  max-width: 52rem;
  margin-inline: auto;
  background: linear-gradient(160deg, #FDFEFF, var(--mist));
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.6rem, 3.5vw, 2.25rem);
}
.domain-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.15rem; }
.domain-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--ice-100), var(--blue-100));
  border: 1px solid var(--ice-200);
  color: var(--blue-600);
}
.domain-title { font-size: 1.35rem; margin: 0; }
.domain-sub { font-size: var(--fs-small); color: var(--ink-3); margin: 0; }
.domain-form { margin: 0; }
/* Joined field: bordered pill holding the input and the Search button. */
.domain-field {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  padding: .45rem .45rem .45rem .5rem;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.domain-field:focus-within { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(45, 121, 245, .18); }
.domain-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  padding: .55rem .5rem .55rem .85rem;
  font-size: 1.0625rem;
  color: var(--ink);
}
.domain-input::placeholder { color: var(--ink-3); }
.domain-submit { flex: none; }
.domain-alt { margin-top: 1rem; font-size: var(--fs-small); color: var(--ink-3); }
.domain-alt a { font-weight: 600; }
/* Stack cleanly on narrow screens: input gets its own field frame. */
@media (max-width: 520px) {
  .domain-field {
    flex-direction: column;
    align-items: stretch;
    gap: .55rem;
    background: transparent;
    border: 0;
    padding: 0;
    box-shadow: none;
  }
  .domain-field:focus-within { box-shadow: none; }
  .domain-input {
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    background: var(--paper);
    padding: .8rem 1rem;
  }
  .domain-input:focus { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(45, 121, 245, .18); }
  .domain-submit { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════
   CARD-GRID BALANCE ENGINE  (2026-08-05)
   ──────────────────────────────────────────────────────────────────
   The site's card grids used to be `repeat(3, 1fr)` no matter how
   many cards were in them, so every four-card section rendered as
   3 + 1 with a lone card stranded on the last row. That was a
   SYSTEM failure, not a page failure, and it is fixed here once.

   Written MOBILE-FIRST on purpose. The column count is derived from
   the child count with `:has()`, which adds specificity: if the
   desktop compositions were the base rule, no plain
   `@media (max-width: …)` override could beat them and the 6- and
   12-column compositions would leak onto phones. (They did, on the
   first attempt: about.php overflowed its viewport by 325px.)
   Layering each composition inside a `min-width` query keeps every
   breakpoint able to override the one below it.

   Desktop (≥1001px):
       2 → 2 cols          5 → 3 + 2, second row centred
       3 → 3 cols          6 → 3 × 2
       4 → 2 × 2           7 → 4 + 3, second row wider
                           8 → 4 × 2

   NEVER allowed on desktop: 3+1, 4+1, 3+3+1, or any single card
   alone on a final row.

   Tablet (641–1000px): two columns. An odd card count would orphan
   again, so the last child is centred at sibling width: the
   deliberate "2 + 1 centred" composition, not a stretched card.

   Mobile (≤640px): one column.

   `.feature-grid--2/--3/--4` override the engine when a section
   genuinely needs a different composition. Reach for those rather
   than writing a page-specific grid.

   NOT applied to `.channel-grid`: it renders inside a narrow
   contact-page column where one column is correct, and forcing a
   composition on it broke that layout. A grid that lives in a
   constrained container has to opt in, not be swept up. */

.feature-grid,
.approach-grid,
.pro-grid,
.ind-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-card-gap);
  align-items: stretch;
}

/* ── Tablet: two columns, last odd card centred ──
   Bounded at BOTH ends. The centring rule below is
   `.feature-grid > *:last-child:nth-child(odd)` (specificity 0,3,0);
   the desktop reset is `.feature-grid > *` (0,1,0) and cannot beat
   it. Left open-ended, the last card of every three-card grid kept
   its `grid-column: 1 / -1` on desktop and the section rendered
   2 + 1 at 1680px. Keep the max-width bound. */
@media (min-width: 641px) and (max-width: 1000px) {
  .feature-grid, .approach-grid, .pro-grid, .ind-grid,
  .feature-grid-2, .feature-grid--2, .feature-grid-4, .feature-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .feature-grid  > *:last-child:nth-child(odd),
  .approach-grid > *:last-child:nth-child(odd),
  .pro-grid      > *:last-child:nth-child(odd),
  .ind-grid      > *:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - (var(--space-card-gap) / 2));
    margin-inline: auto;
  }
}

/* ── Desktop: the derived compositions ── */
@media (min-width: 1001px) {
  .feature-grid, .approach-grid, .pro-grid, .ind-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  /* undo the tablet centring before composing */
  .feature-grid > *, .approach-grid > *, .pro-grid > *, .ind-grid > * {
    grid-column: auto;
    max-width: none;
    margin-inline: 0;
  }

  .feature-grid:has(> :nth-child(2):last-child),
  .approach-grid:has(> :nth-child(2):last-child),
  .pro-grid:has(> :nth-child(2):last-child),
  .ind-grid:has(> :nth-child(2):last-child)   { grid-template-columns: repeat(2, 1fr); }

  .feature-grid:has(> :nth-child(4):last-child),
  .approach-grid:has(> :nth-child(4):last-child),
  .pro-grid:has(> :nth-child(4):last-child),
  .ind-grid:has(> :nth-child(4):last-child)   { grid-template-columns: repeat(2, 1fr); }

  .feature-grid:has(> :nth-child(8):last-child),
  .ind-grid:has(> :nth-child(8):last-child)   { grid-template-columns: repeat(4, 1fr); }

  /* 5 → 3 on top, 2 centred beneath. A 6-column track with every
     card spanning 2 gives an exact centre for the second row. */
  .feature-grid:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, 1fr); }
  .feature-grid:has(> :nth-child(5):last-child) > * { grid-column: span 2; }
  .feature-grid:has(> :nth-child(5):last-child) > :nth-child(4) { grid-column: 2 / span 2; }

  /* 7 → 4 on top, 3 wider beneath. Differing row widths is the
     intentional composition here; it is not stretch-to-fill. */
  .feature-grid:has(> :nth-child(7):last-child) { grid-template-columns: repeat(12, 1fr); }
  .feature-grid:has(> :nth-child(7):last-child) > * { grid-column: span 3; }
  .feature-grid:has(> :nth-child(7):last-child) > :nth-child(n+5) { grid-column: span 4; }

  /* explicit escape hatches win over the derived compositions */
  .feature-grid--2, .feature-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .feature-grid--3, .feature-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .feature-grid--4, .feature-grid-4 { grid-template-columns: repeat(4, 1fr); }
  .feature-grid--2 > *, .feature-grid-2 > *,
  .feature-grid--3 > *, .feature-grid-3 > *,
  .feature-grid--4 > *, .feature-grid-4 > * { grid-column: auto; max-width: none; }
}


.feature-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  /* 24/23px. Was 1.85rem/1.7rem (30/27): cards were taller than
     their content needed and the lower half read as empty. */
  padding: 1.5rem 1.45rem;
  box-shadow: var(--shadow-soft);
}
/* Denser variant for short, label-like cards. */
.feature-grid--compact .feature-card { padding: 1.25rem 1.2rem; }
.feature-grid--compact .feature-card .feature-ico { margin-bottom: .6rem; }
.feature-card h3 { font-size: var(--fs-h4); margin-bottom: .3rem; line-height: 1.3; }
.feature-card p { font-size: var(--fs-small); color: var(--ink-2); }
.feature-card .feature-ico,
.vs-card .feature-ico {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-md);
  background: var(--ice-100);
  border: 1px solid var(--ice-200);
  color: var(--blue-600);
  margin-bottom: .8rem;
}
.feature-card .link-arrow { margin-top: .8rem; font-size: var(--fs-small); }
@media (max-width: 640px) {
  .feature-card { padding: 1.35rem 1.3rem; }
}

/* ── Split rows (alternating copy/media) ───────────────── */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split + .split { margin-top: clamp(3rem, 7vw, 5.5rem); }
/* abuse.php "Before You Submit": two text columns of very different
   length. The shared .split centers columns for copy+photo pairs; here
   that centering pushes the shorter column's heading well below its
   partner's. Top-align this specific instance so both headings line up. */
#before-submit .split { align-items: start; }
.split-media img {
  width: 100%;
  height: auto;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lift);
}
.split-copy h2, .split-copy h3 { margin-bottom: .9rem; }
.split-copy .eyebrow { margin-bottom: .9rem; }
.split-copy p + p { margin-top: .9rem; }
.split-copy .check-list { margin-top: 1.25rem; }
@media (min-width: 901px) {
  .split-flip .split-media { order: 2; }
}
@media (max-width: 900px) {
  /* minmax(0,1fr) so wide children (scrolling tables) can't
     stretch the single column past the viewport */
  .split { grid-template-columns: minmax(0, 1fr); }
}

/* ── Check lists ───────────────────────────────────────── */
.check-list { display: grid; gap: .6rem; font-size: var(--fs-small); color: var(--ink-2); }
.check-list li { display: flex; gap: .55rem; align-items: flex-start; }
.check-list .ico { color: var(--ok-600); flex: none; margin-top: .2rem; }
.check-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem 2rem;
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.check-cols li { display: flex; gap: .55rem; align-items: flex-start; }
.check-cols .ico { color: var(--ok-600); flex: none; margin-top: .2rem; }
@media (max-width: 640px) { .check-cols { grid-template-columns: 1fr; } }

/* ── Stat rows ─────────────────────────────────────────── */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  text-align: center;
}
.stat-row > div {
  padding: 1.75rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-soft);
}
.stat-row strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.stat-row span { font-size: var(--fs-tiny); color: var(--ink-3); }
/* A unit word attached to a stat value (e.g. "8+ days"), styled like
   .plan-price's "/mo", smaller and lighter so it reads as a label next
   to the number rather than a second number of equal weight. Keeps
   every stat-row value visually the same shape at narrow widths. */
.stat-row strong .stat-unit {
  display: inline-block;
  margin-left: .3rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: normal;
}
@media (max-width: 800px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }

/* ── Tables ────────────────────────────────────────────── */
.table-wrap {
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  /* Scroll affordance: when the table is wider than its wrapper (e.g. a
     spec table inside a half-width .split-media column), a soft fade +
     shadow appears at whichever edge still has content to scroll to.
     The "cover" gradients scroll with the content (background-attachment:
     local) so they vanish once you've reached that edge; the "shadow"
     radials stay fixed to the wrapper (attachment: scroll). Pure CSS,
     no markup change, and inert when the table already fits. */
  background:
    linear-gradient(to right, var(--paper) 30%, rgba(255, 255, 255, 0)) left,
    linear-gradient(to right, rgba(255, 255, 255, 0), var(--paper) 70%) right,
    radial-gradient(farthest-side at 0% 50%, rgba(8, 25, 45, .22), rgba(8, 25, 45, 0)) left,
    radial-gradient(farthest-side at 100% 50%, rgba(8, 25, 45, .22), rgba(8, 25, 45, 0)) right;
  background-repeat: no-repeat;
  background-color: var(--paper);
  background-size: 32px 100%, 32px 100%, 18px 100%, 18px 100%;
  background-attachment: local, local, scroll, scroll;
}
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  min-width: 40rem;
}
.spec-table caption { text-align: left; padding: 1.1rem 1.25rem .35rem; font-weight: 600; color: var(--ink); }
.spec-table th, .spec-table td {
  padding: .85rem 1.25rem;
  text-align: left;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  vertical-align: top;
}
.spec-table thead th {
  border-top: 0;
  background: var(--mist);
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}
.spec-table tbody th { color: var(--ink); font-weight: 600; }
.spec-table .ico-yes { color: var(--ok-600); }
.spec-table .ico-no { color: var(--line-2); }
.spec-table td.is-popular-col, .spec-table th.is-popular-col { background: var(--ice-100); }

/* ── FAQ (native disclosure) ───────────────────────────── */
.faq-list { display: grid; gap: .75rem; max-width: 50rem; margin-inline: auto; }
.faq-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* Hover feedback: the one interactive component that lacked it */
.faq-item summary:hover { color: var(--blue-600); }
.faq-item summary:hover .ico { color: var(--blue-600); }
.faq-item summary .ico { flex: none; color: var(--ink-3); transition: transform var(--dur-fast) var(--ease-out); }
.faq-item[open] summary .ico { transform: rotate(180deg); }
.faq-item[open] summary { color: var(--blue-600); }
.faq-body { padding: 0 1.3rem 1.2rem; font-size: var(--fs-small); color: var(--ink-2); }
.faq-body p + p { margin-top: .7rem; }
.faq-body a { font-weight: 600; }

/* ── Numbered steps ────────────────────────────────────── */
.step-list { display: grid; gap: 1.1rem; counter-reset: step; max-width: 46rem; }
.step-list li { display: flex; gap: 1rem; align-items: flex-start; }
.step-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--blue-600);
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-small);
}
.step-list strong { display: block; margin-bottom: .15rem; color: var(--ink); }
.step-list p { font-size: var(--fs-small); color: var(--ink-2); }

/* Inline price callout: a dollar figure quoted mid-sentence (e.g. a
   flat per-incident fee) rather than inside a `.plan-price` card. Carries
   the same display-font/weight identity as every other price on the
   site, just at sentence scale instead of `.plan-price .amount`'s
   headline scale. */
.price-inline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* ── Notices ───────────────────────────────────────────── */
.notice {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1rem 1.2rem;
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.notice .ico { flex: none; color: var(--blue-600); margin-top: .1rem; }
.notice strong { color: var(--ink); }
.notice-warn { background: #FEF8EC; border-color: #F3E2BB; }
.notice-warn .ico { color: #B7791F; }

/* ── CTA band (bottom of inner pages) ──────────────────── */
.cta-band {
  /* Licensed abstract accent (accent-steel-flow) beneath a ~94% navy
     overlay: a quiet sheen, content always dominates. */
  background:
    radial-gradient(900px 420px at 80% -20%, rgba(95, 185, 238, .14), transparent 60%),
    linear-gradient(160deg, rgba(8, 20, 32, .94), rgba(12, 29, 46, .96)),
    url(../images/stock/accent-steel-flow-1600.jpg) center / cover no-repeat,
    var(--navy-950);
  color: #A8BFD3;
  text-align: center;
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
.cta-band h2 { color: #F4F9FD; max-width: 24em; margin-inline: auto; margin-bottom: 1rem; }
.cta-band .lead { color: #A8BFD3; max-width: 38em; margin-inline: auto; }
.cta-band-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 2rem; }
.cta-band .chip {
  background: transparent;
  border-color: rgba(157, 180, 201, .3);
  color: #9DB4C9;
}
.cta-band .chip .ico { color: var(--sky-400); }
.cta-band-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.75rem; }

/* ── Prose (long-form / legal content) ─────────────────── */
.prose { max-width: 46rem; font-size: 1rem; color: var(--ink-2); }
.prose h2 { font-size: var(--fs-h3); margin: 2.4rem 0 .9rem; color: var(--ink); }
.prose h3 { font-size: var(--fs-h4); margin: 1.8rem 0 .7rem; color: var(--ink); }
.prose p { margin-bottom: .95rem; line-height: var(--lh-body); }
.prose ul, .prose ol { margin: 0 0 1rem 1.3rem; display: grid; gap: .45rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--ink-3); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); margin-bottom: 1.2rem; }
.prose table th, .prose table td { border: 1px solid var(--line); padding: .6rem .8rem; text-align: left; }
.prose table thead th { background: var(--mist); color: var(--ink); }
.prose strong { color: var(--ink); }
.prose .doc-meta { font-size: var(--fs-small); color: var(--ink-3); margin-bottom: 1.6rem; }

/* ── Legal layout (sidebar + document) ─────────────────── */
.legal-grid {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.legal-side {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
}
.legal-side h2 {
  font-family: var(--font-body);
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .9rem;
}
.legal-side ul { display: grid; gap: .1rem; font-size: var(--fs-small); }
.legal-side a {
  display: block;
  padding: .5rem .75rem;
  border-radius: var(--r-sm);
  color: var(--ink-2);
}
.legal-side a:hover { background: var(--mist); color: var(--blue-600); text-decoration: none; }
.legal-side a[aria-current="page"] {
  background: var(--blue-100);
  color: var(--blue-700);
  font-weight: 600;
}
@media (max-width: 900px) {
  .legal-grid { grid-template-columns: minmax(0, 1fr); }
  .legal-side { position: static; }
}

/* ── Forms (contact etc.) ──────────────────────────────── */
.form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-panel);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.form-grid .field-full { grid-column: 1 / -1; }
.field { display: grid; gap: .4rem; }
.field label { font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.field .field-hint { font-size: var(--fs-tiny); color: var(--ink-3); }
.field .input, .field select.input { width: 100%; }
textarea.input { min-height: 9rem; resize: vertical; padding-top: .8rem; }
select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236C87A3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.6rem; }
.field-error { font-size: var(--fs-tiny); color: #C0392B; }
.input[aria-invalid="true"] { border-color: #E5A198; }
.form-status {
  border-radius: var(--r-md);
  padding: 1rem 1.2rem;
  font-size: var(--fs-small);
  margin-bottom: 1.25rem;
}
.form-status-ok { background: #EAF8F2; border: 1px solid #BFE8D6; color: #0B6E4F; }
.form-status-err { background: #FDF0EE; border: 1px solid #F2C9C2; color: #A93226; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* ── Contact channel cards ─────────────────────────────── */
.channel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-card-gap); }
.channel-card {
  display: grid;
  gap: .35rem;
  align-content: start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.3rem;
  box-shadow: var(--shadow-soft);
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.channel-card .ico { color: var(--blue-600); }
.channel-card strong { color: var(--ink); font-size: 1rem; }
@media (max-width: 640px) { .channel-grid { grid-template-columns: 1fr; } }

/* ── Logo band reuse on inner pages ────────────────────── */
.page-logos { padding-block: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--line); }
.page-logos .logo-row { margin-top: 0; }

/* ── VPS vs VDS comparison cards ───────────────────────── */
.vs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-card-gap); }
.vs-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 2rem 1.8rem;
  box-shadow: var(--shadow-soft);
}
.vs-card.is-highlight { border-color: var(--blue-500); box-shadow: 0 0 0 1px var(--blue-500), var(--shadow-lift); }
.vs-card h3 { margin-bottom: .35rem; }
.vs-card .vs-tag { font-size: var(--fs-tiny); color: var(--ink-3); margin-bottom: 1rem; }
.vs-card .check-list { margin-top: 1.1rem; }
@media (max-width: 800px) { .vs-grid { grid-template-columns: 1fr; } }

/* ── Error pages ───────────────────────────────────────── */
.error-hero {
  min-height: 55vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: clamp(4rem, 9vw, 7rem);
  background: var(--wash-hero), var(--paper);
}
.error-code {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 12vw, 8rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--blue-600);
  margin-bottom: .5rem;
}
.error-hero h1 { margin-bottom: .8rem; }
.error-hero .lead { max-width: 34em; margin-inline: auto; }
.error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 2rem; }
.error-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.75rem;
  margin-top: 1.75rem;
  font-size: var(--fs-small);
}

/* ══════════════════════════════════════════════════════════════════
   PLAN COMPARISON: expandable detail below the Web Hosting cards
   Progressive-disclosure <details>. Collapsed by default; the pricing
   cards stay the primary interface. No always-visible matrix.
   ══════════════════════════════════════════════════════════════════ */
.compare {
  margin-top: 2.5rem;
  border-top: 1px solid var(--line);
  padding-top: 2rem;
}

/* ── The clickable control ── */
.compare-summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--paper);
  cursor: pointer;
  list-style: none;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.compare-summary::-webkit-details-marker { display: none; }
.compare-summary:hover { border-color: var(--sky-400); background: var(--mist); }
.compare-summary:focus-visible {
  outline: 3px solid var(--sky-400);
  outline-offset: 2px;
}
.compare-summary-text { display: flex; flex-direction: column; gap: .15rem; }
.compare-summary-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--ink);
}
.compare-summary-sub {
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.compare-chevron {
  margin-left: auto;
  flex: none;
  color: var(--ink-3);
  transition: transform .22s ease;
}
.compare[open] .compare-chevron { transform: rotate(180deg); color: var(--blue-600); }
.compare[open] .compare-summary { border-color: var(--sky-400); }

/* ── Expanded panel ── */
.compare-panel { padding-top: 1.75rem; }
.compare-intro {
  max-width: 60ch;
  margin: 0 0 1.5rem;
  color: var(--ink-2);
  font-size: var(--fs-small);
}
@media (prefers-reduced-motion: no-preference) {
  .compare[open] .compare-panel { animation: compareIn .28s ease both; }
  @keyframes compareIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ── Scroll container (mobile only) ── */
.compare-scroll { overflow: visible; }

/* ── The table ── */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}
.compare-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.compare-table th, .compare-table td {
  padding: .8rem 1rem;
  text-align: center;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.compare-table thead th {
  position: sticky;
  /* Clears the fixed site header (--header-h) AND the sticky in-page
     anchor-nav below it (~3.625rem tall) so the plan names never slide
     behind either bar. */
  top: calc(var(--header-h) + 3.625rem);
  z-index: 2;
  background: var(--mist);
  border-bottom: 1px solid var(--line-2);
  color: var(--ink);
  font-family: var(--font-display);
  padding-block: 1rem;
}
.compare-table thead th:first-child {
  text-align: left;
  background: var(--mist);
}
.compare-col-name {
  display: block;
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--ink);
}
.compare-col-price { display: block; font-size: var(--fs-tiny); color: var(--ink-2); font-weight: 500; font-family: var(--font-body); }
.compare-col-pop {
  display: inline-block;
  margin-top: .3rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--blue-700);
}
/* row header cells (feature names) */
.compare-table tbody th[scope="row"] {
  text-align: left;
  font-weight: 500;
  color: var(--ink);
  min-width: 13rem;
}
.compare-table tbody td { color: var(--ink-2); }
/* group header rows */
.compare-group th {
  text-align: left;
  background: var(--frost);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-tiny);
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .6rem 1rem;
  border-bottom: 1px solid var(--line-2);
}
.compare-yes { color: var(--ok-600); }
/* popular column emphasis */
.compare-table col.compare-col-highlight { background: var(--ice-100); }
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: none; }

/* ── Small note under the table ── */
.compare-note {
  margin-top: 1.25rem;
  font-size: var(--fs-small);
  color: var(--ink-3);
}
.compare-note a { color: var(--blue-600); }

/* ── Mobile: contained horizontal scroll, drop the vertical sticky header ── */
@media (max-width: 840px) {
  .compare-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
  }
  .compare-table { min-width: 40rem; font-size: var(--fs-tiny); }
  .compare-table thead th { position: static; top: auto; }
  .compare-table th, .compare-table td { padding: .65rem .75rem; }
  .compare-table tbody th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--paper);
    min-width: 11rem;
    box-shadow: 1px 0 0 var(--line);
  }
  .compare-group th { position: sticky; left: 0; }
}

/* ══════════════════════════════════════════════════════════════════
   PLATFORM MARK: official platform logo above a section eyebrow.
   Recolored to the Blue Arctic blue (currentColor) so the mark reads
   as a quiet platform identifier, not a foreign brand badge. Natural
   aspect (width auto) so wide/tall marks are never stretched.
   ══════════════════════════════════════════════════════════════════ */
.platform-mark {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 2.15rem;
  margin-bottom: .85rem;
  color: var(--blue-600);
}
.platform-mark .ico-brand { width: auto; height: 100%; }
.section-head-center .platform-mark { justify-content: center; }