/* ==========================================================================
   bigdomainhost — design system.

   Concept: an instrument panel. This is infrastructure, so the page is built
   out of the vernacular of measurement — hairlines, aligned columns, tabular
   figures and monospace reserved for things that are actually data (region
   codes, latencies, prices, shell output). Nothing is frosted, nothing glows.
   Surfaces are solid and the structure is drawn with 1px rules, because a
   hosting company should look like something you can rely on.

   One accent does the work: cyan is reserved for interactive and live states,
   while deep navy carries the reading hierarchy.

  Every colour is centralized in the root theme blocks so both palettes stay
  consistent across system preferences and the theme toggle.
   ========================================================================== */

:root {
  /* surfaces */
  --bg: #F8FAFC;
  --bg-2: #F1F5F9;
  --hover-bg: #E2E8F0;
  --panel: #FFFFFF;
  --panel-2: #F1F5F9;

  /* ink */
  --ink: #0F172A;
  --ink-2: #475569;
  --muted: #475569;

  /* brand */
  --accent: #0891B2;
  --accent-soft: rgba(8, 145, 178, .10);
  --accent-ink: #FFFFFF;
  --signal: #06B6D4;
  --green: #0891B2;
  --red: #06B6D4;
  --amber: #06B6D4;
  --lime: #06B6D4;

  /* lines */
  --line: #CBD5E1;
  --line-2: #CBD5E1;

  /* the globe reads these */
  --globe-land: #0891B2;
  --globe-sea: #E2E8F0;

  /* solid button, inverted against the page */
  --invert-bg: #0F172A;
  --invert-ink: #FFFFFF;

  --shadow: 0 18px 44px rgba(15, 23, 42, .09);
  --term-bg: #0F172A;
  --term-ink: #F8FAFC;

  /* control panel preview */
  --control-bg: #FFFFFF;
  --server-bg: #FFFFFF;
  --server-line: #CBD5E1;
  --server-subtle: #475569;
  --server-value: #0F172A;
  --server-track: #E2E8F0;
  --server-command-bg: #F1F5F9;
  --server-command-ink: #475569;

  --term-bar-line: #CBD5E1;
  --term-bar-ink: #475569;
  --term-dot: #CBD5E1;
  --term-prompt: #06B6D4;
  --term-out: #F8FAFC;
  --term-ok: #06B6D4;
  --server-region-bg: #E2E8F0;
  --server-region-ink: #0F172A;
  --server-live-ink: #475569;
  --server-status: #06B6D4;
  --server-status-ring: rgba(6, 182, 212, .12);
  --server-warning: #06B6D4;

  /* radii — three steps, used by hierarchy, not sprinkled */
  --r-sm: 4px;
  --r: 6px;
  --r-lg: 10px;

  /* rhythm */
  --max: 1180px;
  --pad: 32px;

  /* fonts */
  --display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #0B1220;
    --bg-2: #111C2E;
    --hover-bg: #1E293B;
    --panel: #0F172A;
    --panel-2: #111C2E;
    --ink: #F8FAFC;
    --ink-2: #CBD5E1;
    --muted: #94A3B8;
    --accent: #0891B2;
    --accent-soft: rgba(8, 145, 178, .12);
    --accent-ink: #0F172A;
    --signal: #0891B2;
    --green: #0891B2;
    --red: #0891B2;
    --amber: #0891B2;
    --lime: #0891B2;
    --line: #334155;
    --line-2: #475569;
    --globe-land: #0891B2;
    --globe-sea: #1E293B;
    --invert-bg: #0891B2;
    --invert-ink: #0F172A;
    --shadow: 0 18px 44px rgba(0, 0, 0, .35);
    --term-bg: #0F172A;
    --term-ink: #F8FAFC;
    --control-bg: #0F172A;
    --server-bg: #111C2E;
    --server-line: #334155;
    --server-subtle: #94A3B8;
    --server-value: #F8FAFC;
    --server-track: #1E293B;
    --server-command-bg: #0B1220;
    --server-command-ink: #CBD5E1;
    --term-bar-line: #334155;
    --term-bar-ink: #94A3B8;
    --term-dot: #334155;
    --term-prompt: #0891B2;
    --term-out: #F8FAFC;
    --term-ok: #0891B2;
    --server-region-bg: #1E293B;
    --server-region-ink: #CBD5E1;
    --server-live-ink: #CBD5E1;
    --server-status: #0891B2;
    --server-status-ring: rgba(8, 145, 178, .14);
    --server-warning: #0891B2;
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0B1220;
  --bg-2: #111C2E;
  --hover-bg: #1E293B;
  --panel: #0F172A;
  --panel-2: #111C2E;
  --ink: #F8FAFC;
  --ink-2: #CBD5E1;
  --muted: #94A3B8;
  --accent: #0891B2;
  --accent-soft: rgba(8, 145, 178, .12);
  --accent-ink: #0F172A;
  --signal: #0891B2;
  --green: #0891B2;
  --red: #0891B2;
  --amber: #0891B2;
  --lime: #0891B2;
  --line: #334155;
  --line-2: #475569;
  --globe-land: #0891B2;
  --globe-sea: #1E293B;
  --invert-bg: #0891B2;
  --invert-ink: #0F172A;
  --shadow: 0 18px 44px rgba(0, 0, 0, .35);
  --term-bg: #0F172A;
  --term-ink: #F8FAFC;
  --control-bg: #0F172A;
  --server-bg: #111C2E;
  --server-line: #334155;
  --server-subtle: #94A3B8;
  --server-value: #F8FAFC;
  --server-track: #1E293B;
  --server-command-bg: #0B1220;
  --server-command-ink: #CBD5E1;
  --term-bar-line: #334155;
  --term-bar-ink: #94A3B8;
  --term-dot: #334155;
  --term-prompt: #0891B2;
  --term-out: #F8FAFC;
  --term-ok: #0891B2;
  --server-region-bg: #1E293B;
  --server-region-ink: #CBD5E1;
  --server-live-ink: #CBD5E1;
  --server-status: #0891B2;
  --server-status-ring: rgba(8, 145, 178, .14);
  --server-warning: #0891B2;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  min-height: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color .3s ease, color .3s ease;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
img, svg, canvas { max-width: 100%; display: block; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

hr.rule { border: none; border-top: 1px solid var(--line); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--bg);
  padding: 12px 18px;
  font-size: 13px;
  border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; top: 0; }

/* --------------------------------------------------------------------------
   Type + layout primitives
   -------------------------------------------------------------------------- */

.shell { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: 100px var(--pad);
  position: relative;
  z-index: 1;
}
.section--tight { padding-top: 64px; }

.sec-head { margin-bottom: 56px; max-width: 720px; }
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  display: block;
  margin-bottom: 16px;
  letter-spacing: .04em;
}
.sec-title {
  font-size: clamp(32px, 4.5vw, 48px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.015em;
  margin-bottom: 14px;
}
.sec-lede { font-size: 17px; color: var(--ink-2); line-height: 1.55; max-width: 580px; }

.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.row { display: flex; align-items: center; gap: 8px; }
.row--wrap { flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--r);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  transition: opacity .15s ease, border-color .15s ease, transform .15s ease;
  white-space: nowrap;
}
.btn--solid { background: var(--invert-bg); color: var(--invert-ink); }
.btn--solid:hover { opacity: .88; }
.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--accent:hover { opacity: .9; }
.btn--ghost { border-color: var(--line-2); color: var(--ink); }
.btn--ghost:hover { border-color: var(--accent); }
.btn--sm { padding: 10px 18px; font-size: 14px; }

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 18px 0;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; }
.brand__mark {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--ink);
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.brand__mark::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 5px;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 2px;
}

.nav-links { display: flex; gap: 28px; font-size: 14px; color: var(--ink-2); }
.nav-links a { transition: color .2s ease; }
.nav-links a:hover, .nav-links a[aria-current='page'] { color: var(--ink); }

.nav-right { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.nav-signin { color: var(--ink-2); }
.nav-signin:hover { color: var(--ink); }

.icon-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: none;
  color: var(--ink-2);
  flex-shrink: 0;
  transition: color .2s ease, border-color .2s ease;
}
.icon-btn:hover { color: var(--ink); border-color: var(--accent); }
.icon-btn svg { width: 16px; height: 16px; }

/* the toggle shows the theme a click would take you to */
.theme-toggle .sun { display: none; }
:root[data-theme='dark'] .theme-toggle .sun { display: block; }
:root[data-theme='dark'] .theme-toggle .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-toggle .sun { display: block; }
  :root:not([data-theme='light']) .theme-toggle .moon { display: none; }
}

.menu { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 9px; }
.menu span { display: block; width: 20px; height: 1.5px; background: var(--ink); border-radius: 2px; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: 84px var(--pad) 104px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  padding: 6px 12px;
  background: var(--accent-soft);
  border-radius: 999px;
  margin-bottom: 28px;
}
.badge i { width: 6px; height: 6px; background: var(--green); border-radius: 50%; display: block; }

.hero__title {
  font-size: clamp(42px, 6.4vw, 78px);
  font-weight: 600;
  line-height: .99;
  letter-spacing: -.025em;
  margin-bottom: 22px;
}
.hero__lede { font-size: 18px; color: var(--ink-2); line-height: 1.55; max-width: 520px; margin-bottom: 30px; }
.hero__cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 28px; }

.hero__stats {
  margin-top: 46px;
  display: flex;
  gap: 34px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  flex-wrap: wrap;
}
.hero__stats b { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   Hero search
   -------------------------------------------------------------------------- */

.search { position: relative; max-width: 480px; }

.search-box {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 12px 0 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--panel);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.search-box:focus-within,
.search[data-open='true'] .search-box { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.search-box > svg { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }

.search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 14px;
  outline: none;
}
.search input::placeholder { color: var(--muted); }
.search input::-webkit-search-cancel-button { display: none; }

.search kbd {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  border: 1px solid var(--line-2);
  border-radius: 5px;
  padding: 5px 7px;
  flex-shrink: 0;
}

.search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 25;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  max-height: 330px;
  overflow-y: auto;
  padding: 6px;
  list-style: none;
}
.search-results[hidden] { display: none; }
.search-results button {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 7px;
  padding: 10px 12px;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.search-results button:hover,
.search-results button[aria-selected='true'] { background: var(--accent-soft); }
.r-title { font-size: 13px; font-weight: 600; }
.r-desc { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }
.r-kind {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
}
.search-empty { padding: 18px 12px; font-size: 13px; color: var(--muted); }

/* --------------------------------------------------------------------------
   Globe
   -------------------------------------------------------------------------- */

.globe-wrap { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; margin-left: auto; }
.globe-wrap canvas { width: 100%; height: 100%; }

.globe-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--line);
  border-radius: 50%;
  pointer-events: none;
  animation: spin 44s linear infinite;
}
.ring-1 { width: 76%; height: 76%; border-color: var(--accent-soft); }
.ring-2 { width: 98%; height: 98%; border-style: dashed; animation-duration: 66s; animation-direction: reverse; }

.globe-tag {
  position: absolute;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.5;
}
.globe-tag b { font-weight: 600; display: block; }
.globe-tag small { color: var(--muted); }
.globe-tag i {
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
}
.tag-1 { left: -6%; top: 24%; }
.tag-1 i { right: -3px; }
.tag-2 { right: -3%; top: 60%; }
.tag-2 i { left: -3px; }

/* --------------------------------------------------------------------------
   Terminal
   -------------------------------------------------------------------------- */

.term {
  background: var(--term-bg);
  color: var(--term-ink);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.75;
  box-shadow: var(--shadow);
}
.term__bar {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--term-bar-line);
  font-size: 12px;
  color: var(--term-bar-ink);
}
.term__dots { display: flex; gap: 6px; margin-right: 6px; }
.term__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--term-dot); display: block; }
.term__body { padding: 22px 24px 26px; overflow-x: auto; }
.term__line { display: flex; gap: 10px; min-height: 22px; }
.term__prompt { color: var(--term-prompt); }
.term__out { color: var(--term-out); }
.term__ok { color: var(--term-ok); }
.term__cursor { display: inline-block; width: 7px; height: 14px; background: var(--term-prompt); animation: blink 1.1s steps(2) infinite; }
.term__copy { background: none; border: 0; color: var(--term-bar-ink); font: inherit; margin-left: 16px; }
.term__copy:hover { color: var(--term-out); }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.grid { display: grid; gap: 20px; }
.grid--features { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; }
.grid--plans { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }
.grid--regions { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.grid--posts { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid--addons { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.feature {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color .3s ease, transform .3s ease;
}
.feature:hover { border-color: var(--accent); transform: translateY(-3px); }
.feature__icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.feature h3 { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.feature p { font-size: 14px; color: var(--ink-2); line-height: 1.6; }

/* plans */
.plan {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.plan--popular { border: 2px solid var(--accent); }
.plan__badge {
  position: absolute;
  top: -12px;
  left: 24px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--mono);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
}
.plan__name { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.plan__desc { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.plan__price { font-size: 36px; font-weight: 600; margin-bottom: 4px; letter-spacing: -.02em; }
.plan__price sup { font-size: 18px; font-weight: 400; margin-right: 2px; }
.plan__price small { font-size: 14px; color: var(--muted); font-weight: 400; }
.plan__renew { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-bottom: 22px; }
.plan__specs { border-top: 1px solid var(--line); padding-top: 20px; margin-bottom: 24px; flex: 1; }
.spec-row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.spec-row span:first-child { color: var(--muted); }
.spec-row span:last-child { font-weight: 600; text-align: right; }
.plan__cta {
  display: block;
  text-align: center;
  padding: 11px 0;
  border-radius: var(--r);
  border: 1px solid var(--line-2);
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  transition: background-color .2s ease, color .2s ease;
}
.plan__cta:hover { background: var(--invert-bg); color: var(--invert-ink); border-color: transparent; }
.plan__cta--primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.plan__cta--primary:hover { background: var(--accent); opacity: .9; color: var(--accent-ink); }

/* billing toggle */
.billing { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r); padding: 4px; }
.billing button {
  border: 0;
  background: none;
  color: var(--muted);
  padding: 8px 14px;
  border-radius: 7px;
  font-family: var(--mono);
  font-size: 12px;
}
.billing button.active { background: var(--accent); color: var(--accent-ink); }
.billing button span { color: var(--green); margin-left: 5px; }
.billing button.active span { color: var(--accent-ink); }

/* regions */
.region {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.region--soon { border-style: dashed; background: none; }
.region__code { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.region__city { font-size: 14px; font-weight: 600; }
.region--soon .region__city { color: var(--muted); }
.region__ms { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.region__ms i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); display: block; box-shadow: 0 0 8px var(--green); }
.region__eta { font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* the flat map */
.map-frame {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-2);
  overflow: hidden;
  aspect-ratio: 2 / 1;
  margin-bottom: 12px;
}
.map-frame canvas { width: 100%; height: 100%; }
.map-hint {
  position: absolute;
  left: 18px;
  bottom: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Stats strip
   -------------------------------------------------------------------------- */

.stats {
  max-width: var(--max);
  margin: 0 auto;
  border-block: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  z-index: 1;
}
.stat { padding: 40px var(--pad); border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat strong { font-size: 42px; font-weight: 600; letter-spacing: -.03em; }
.stat > span { font-size: 18px; color: var(--muted); }
.stat p { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .1em; margin-top: 8px; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   Tables, FAQ, prose (pricing + docs)
   -------------------------------------------------------------------------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
table.compare { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 620px; }
table.compare th, table.compare td { padding: 14px 18px; border-bottom: 1px solid var(--line); text-align: left; }
table.compare thead th {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg-2);
  font-weight: 600;
}
table.compare tbody th { font-weight: 600; }
table.compare td { text-align: center; color: var(--ink-2); }
table.compare tbody tr:last-child th, table.compare tbody tr:last-child td { border-bottom: 0; }
table.compare .yes { color: var(--green); }
table.compare .no { color: var(--muted); }

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  padding: 22px 0;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--accent); font-size: 22px; line-height: 1; flex-shrink: 0; }
.faq details[open] summary::after { content: '−'; }
.faq p { padding-bottom: 22px; color: var(--ink-2); font-size: 14px; line-height: 1.8; max-width: 72ch; }

.docs { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 56px; align-items: start; }
.docs-side { position: sticky; top: 104px; }
.docs-side h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 26px 0 10px;
  font-weight: 600;
}
.docs-side h4:first-child { margin-top: 0; }
.docs-side a { display: block; font-size: 14px; color: var(--ink-2); padding: 6px 0 6px 12px; border-left: 2px solid transparent; }
.docs-side a:hover { color: var(--ink); }
.docs-side a.is-active { color: var(--ink); border-left-color: var(--accent); font-weight: 600; }

.prose { max-width: 72ch; }
.prose h2 { font-size: 28px; font-weight: 600; letter-spacing: -.02em; margin: 54px 0 16px; scroll-margin-top: 104px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 17px; font-weight: 600; margin: 32px 0 12px; }
.prose p, .prose li { color: var(--ink-2); font-size: 15px; line-height: 1.8; }
.prose p { margin-bottom: 16px; }
.prose ul, .prose ol { margin: 0 0 18px 20px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--ink); }
.prose a { color: var(--accent); border-bottom: 1px solid currentColor; }
.prose code { font-family: var(--mono); font-size: 13px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; color: var(--ink); }
.prose pre {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 20px;
  overflow-x: auto;
  margin-bottom: 20px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.9;
  color: var(--ink-2);
}
.prose pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.prose pre .c { color: var(--muted); }
.prose pre .k { color: var(--accent); }
.prose pre .s { color: var(--green); }
.prose blockquote { border-left: 2px solid var(--accent); padding-left: 18px; margin: 0 0 20px; color: var(--ink-2); font-size: 15px; line-height: 1.8; }

.callout { border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: var(--r); background: var(--bg-2); padding: 18px 20px; margin-bottom: 22px; }
.callout b { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.callout p { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.7; }

/* --------------------------------------------------------------------------
   Blog
   -------------------------------------------------------------------------- */

.post {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 250px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color .3s ease, transform .3s ease;
}
.post:hover { border-color: var(--accent); transform: translateY(-3px); }
.post__meta { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; }
.post__meta .tag { color: var(--accent); }
.post h3 { font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -.015em; }
.post p { font-size: 14px; color: var(--ink-2); line-height: 1.65; }
.post__read { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--ink); }
.post__read span { color: var(--accent); margin-left: 6px; }
.post--featured { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 40px; min-height: 0; flex-wrap: wrap; }
.post--featured > div { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 12px; }
.post--featured h3 { font-size: clamp(24px, 3.2vw, 36px); }

/* --------------------------------------------------------------------------
   Page head, CTA band, footer
   -------------------------------------------------------------------------- */

.page-head { max-width: var(--max); margin: 0 auto; padding: 72px var(--pad) 0; position: relative; z-index: 1; }
.page-head h1 { font-size: clamp(34px, 5vw, 56px); font-weight: 600; line-height: 1.05; letter-spacing: -.025em; margin-bottom: 18px; }
.page-head .sec-lede { max-width: 620px; }

.cta-band {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 56px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.cta-band h2 { font-size: clamp(26px, 3.4vw, 34px); font-weight: 600; letter-spacing: -.02em; margin-bottom: 10px; }
.cta-band p { font-size: 16px; color: var(--ink-2); line-height: 1.55; }

footer { border-top: 1px solid var(--line); padding: 48px 0 32px; position: relative; z-index: 1; margin-top: 40px; }
.footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 48px; margin-bottom: 48px; }
.footer__about { font-size: 14px; color: var(--ink-2); line-height: 1.6; max-width: 260px; margin-top: 16px; }
.footer__grid h4 { font-size: 13px; font-weight: 700; margin-bottom: 16px; }
.footer__grid ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer__grid ul a { font-size: 14px; color: var(--ink-2); transition: color .2s ease; }
.footer__grid ul a:hover { color: var(--ink); }
.footer__bottom {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}
.footer__bottom nav { display: flex; gap: 24px; }

/* --------------------------------------------------------------------------
   Reveal + keyframes
   -------------------------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
.delay-1 { transition-delay: .09s; }
.delay-2 { transition-delay: .18s; }
.delay-3 { transition-delay: .27s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

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

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; gap: 52px; }
  .globe-wrap { max-width: 420px; margin: 0 auto; }
  /* minmax(0,…) so a wide <pre> scrolls inside itself instead of
     stretching the whole column past the viewport */
  .docs { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .docs-side { position: static; border-bottom: 1px solid var(--line); padding-bottom: 18px; }
}

@media (max-width: 1179px) {
  /* Brand + five links + search + two switches + phone + CTA stop fitting on
     one row here, so the links move into the burger. Measured: the row needs
     the full 1180px --max width, and --max is what caps it above that. */
  .nav-links { display: none; }
  .menu { display: flex; }
  .nav.is-open .nav-links {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 4px var(--pad) 14px;
  }
  .nav.is-open .nav-links a { padding: 12px 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 860px) {
  .section { padding: 72px var(--pad); }
  .sec-head { margin-bottom: 40px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { border-bottom: 1px solid var(--line); }
  .stat:nth-child(2), .stat:nth-child(4) { border-right: 0; }
  .cta-band { padding: 36px 28px; }
  .post--featured { flex-direction: column; align-items: flex-start; gap: 14px; }
}

@media (max-width: 680px) {
  /* Brand + toggle + a nowrap CTA + the burger stop fitting on one row here.
     The links and the hero CTA both still reach these destinations. */
  .nav-signin, .nav__inner .btn { display: none; }
  .nav__inner { gap: 12px; }
}

@media (max-width: 600px) {
  :root { --pad: 20px; }

  .hero { padding: 52px var(--pad) 72px; }
  .hero__stats { gap: 18px; margin-top: 32px; }
  .search kbd { display: none; }
  .term__body { padding: 18px; font-size: 12px; }
  .stat strong { font-size: 32px; }
  .map-frame { aspect-ratio: 3 / 2; }
  .footer__grid { gap: 28px; }
}


/* ==========================================================================
   Design layer
   Everything above is the structural base. This layer applies the instrument
   -panel language: hairline structure, solid surfaces, one accent, and a
   single orchestrated motion moment in the hero.
   ========================================================================== */

/* --- Typography ---------------------------------------------------------- */

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: 'cv05' 1, 'cv11' 1, 'ss01' 1;
  letter-spacing: -.006em;
}

h1, h2, h3, h4,
.brand, .hero__title, .sec-title, .page-head h1,
.plan__price, .stat strong, .cta-band h2, .post h3, .prose h2 {
  font-family: var(--display);
  font-weight: 500;
}

.hero__title {
  font-size: clamp(44px, 6.2vw, 76px);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -.035em;
  text-wrap: balance;
  max-width: 11ch;
  margin-bottom: 24px;
}

.sec-title {
  font-size: clamp(30px, 3.8vw, 42px);
  font-weight: 500;
  letter-spacing: -.028em;
  line-height: 1.06;
  text-wrap: balance;
}

.page-head h1 {
  font-weight: 500;
  letter-spacing: -.032em;
  text-wrap: balance;
}

.hero__lede, .sec-lede { max-width: 58ch; letter-spacing: -.003em; }
.hero__lede { font-size: 18px; line-height: 1.5; }

/* Numbers are data: align them and give them tabular figures. */
.plan__price, .stat strong, .stat > span, .region__ms, .hero__stats b, .spec-row span:last-child {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Sentence case, not shouted. Caps labels were doing no work. */
.stat p, .map-hint, .docs-side h4, table.compare thead th, .callout b, .post__meta {
  text-transform: none;
  letter-spacing: .01em;
}

/* The eyebrow is a structural marker, so give it a rule to hang off. */
.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .02em;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--accent);
  flex-shrink: 0;
}

/* --- Chrome -------------------------------------------------------------- */

.nav {
  padding: 0;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav__inner { height: 64px; }

.brand { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.brand__mark {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background: var(--accent);
}
.brand__mark::after {
  left: 0; top: 0;
  width: 18px; height: 18px;
  border-radius: 3px;
  background: none;
  border: 3px solid color-mix(in srgb, var(--bg) 100%, transparent);
  border-right-color: transparent;
  border-bottom-color: transparent;
}

.nav-links { gap: 21px; font-size: 14px; }
.nav-links a { position: relative; padding: 4px 0; }
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}
.nav-links a:hover::after, .nav-links a[aria-current='page']::after { transform: scaleX(1); }

/* --- Buttons ------------------------------------------------------------- */

.btn {
  border-radius: var(--r);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -.004em;
  padding: 11px 20px;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.btn--solid { background: var(--invert-bg); color: var(--invert-ink); }
.btn--solid:hover { opacity: 1; background: color-mix(in srgb, var(--invert-bg) 86%, var(--accent)); }
.btn--accent:hover { opacity: 1; background: color-mix(in srgb, var(--accent) 86%, var(--ink)); }
.btn--ghost { border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); background: var(--hover-bg); }

/* --- Hero ---------------------------------------------------------------- */

/* A faint measured grid, clipped to the hero. It reads as graph paper rather
   than as decoration, and it is the only background treatment on the site. */
.hero::before {
  /* content: ''; */
  position: absolute;
  inset: -120px 0 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: radial-gradient(120% 90% at 68% 30%, #000, transparent 72%);
  mask-image: radial-gradient(120% 90% at 68% 30%, #000, transparent 72%);
  opacity: .55;
}

.hero { padding: 76px var(--pad) 72px; gap: 56px; }
.hero-copy { position: relative; z-index: 2; }

.badge {
  font-size: 11.5px;
  color: var(--ink-2);
  background: var(--bg);
  border: 1px solid var(--line-2);
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  margin-bottom: 26px;
}
.badge i { background: var(--green); animation: pulse 2.4s ease-in-out infinite; }

.hero__stats {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  gap: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  font-size: 11.5px;
}
.hero__stats span { display: flex; flex-direction: column; gap: 5px; }
.hero__stats b { font-size: 17px; font-family: var(--display); font-weight: 500; letter-spacing: -.02em; }

.search-box { height: 48px; border-radius: var(--r); background: var(--bg); }
.search-box:focus-within, .search[data-open='true'] .search-box {
  border-color: var(--ink);
  box-shadow: none;
}
.search-results { border-radius: var(--r); }

/* --- Globe --------------------------------------------------------------- */

.globe-ring { border-color: var(--line); }
.ring-1 { border-color: var(--line); }

.globe-tag {
  background: var(--bg);
  border-color: var(--line-2);
  border-radius: var(--r-sm);
  padding: 8px 11px;
  box-shadow: var(--shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.globe-tag b { font-size: 10.5px; letter-spacing: .02em; }
.globe-tag i { background: var(--signal); box-shadow: none; }

/* --- Terminal ------------------------------------------------------------ */

.term {
  border-radius: var(--r-lg);
  border-color: var(--line-2);
  font-size: 13px;
  box-shadow: var(--shadow);
}
.term__bar { border-bottom-color: var(--term-bar-line); color: var(--term-bar-ink); }
.term__dots i { background: var(--term-dot); }
.term__prompt { color: var(--term-prompt); }
.term__ok { color: var(--term-ok); }
.term__cursor { background: var(--term-prompt); }

/* --- Sections ------------------------------------------------------------ */

.section { padding: 104px var(--pad); scroll-margin-top: 80px; }
.section--tight { padding-top: 40px; padding-bottom: 72px; }
.sec-head { margin-bottom: 48px; }

/* Features: one bordered field divided by hairlines rather than six floating
   cards. The shared grid is what makes them read as a single capability set. */
.grid--features {
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--panel);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.feature {
  background: none;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 30px 28px 32px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background-color .2s ease;
}
.feature:hover { transform: none; border-color: var(--line); background: var(--hover-bg); }
.grid--features .feature:nth-child(3n) { border-right: 0; }
.grid--features .feature:nth-last-child(-n+3) { border-bottom: 0; }
.feature__icon {
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: none;
  border: 1px solid var(--line-2);
  color: var(--ink);
  margin-bottom: 20px;
}
.feature__icon svg { width: 16px; height: 16px; }
.feature h3 { font-size: 15px; font-weight: 600; font-family: var(--sans); letter-spacing: -.012em; }
.feature p { font-size: 14px; line-height: 1.6; max-width: 34ch; }

/* --- Plans --------------------------------------------------------------- */

.grid--plans { gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.plan {
  background: var(--panel);
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  padding: 30px 26px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.grid--plans .plan:last-child { border-right: 0; }
.plan--popular {
  border: 0;
  border-right: 1px solid var(--line);
  background: var(--bg-2);
  box-shadow: inset 0 2px 0 var(--accent);
}
.plan__badge {
  position: static;
  display: inline-block;
  align-self: flex-start;
  background: none;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  font-size: 10.5px;
  padding: 2px 8px;
  margin-bottom: 10px;
}
.plan__name { font-size: 15px; font-weight: 600; }
.plan__desc { font-size: 13px; margin-bottom: 22px; min-height: 2.6em; }
.plan__price { font-size: 38px; font-weight: 500; letter-spacing: -.035em; }
.plan__price sup { font-size: 17px; top: -.55em; }
.plan__renew { font-family: var(--sans); font-size: 12px; }
.spec-row { padding: 9px 0; font-size: 13.5px; }
.spec-row span:last-child { font-weight: 500; font-family: var(--mono); font-size: 12.5px; }
.plan__cta { border-radius: var(--r); font-weight: 500; font-size: 14px; padding: 10px 0; }

.billing { border-radius: var(--r); padding: 3px; }
.billing button { font-family: var(--sans); font-size: 13px; border-radius: var(--r-sm); padding: 7px 14px; }
.billing button.active { background: var(--invert-bg); color: var(--invert-ink); }
.billing button.active span { color: var(--invert-ink); opacity: .7; }

/* --- Regions ------------------------------------------------------------- */

.grid--regions {
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  overflow: hidden;
}
.region {
  background: var(--panel);
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  padding: 18px 20px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background-color .2s ease;
}
.region:last-child { border-right: 0; }
.region:hover { transform: none; border-color: var(--line); background: var(--hover-bg); }
.region--soon { background: var(--bg-2); border-style: solid; }
.region__code { font-size: 11px; letter-spacing: .04em; }
.region__city { font-size: 14px; font-weight: 600; }
.region__ms { font-family: var(--mono); font-size: 12.5px; color: var(--ink); }
.region__ms i { background: var(--green); box-shadow: none; }
.region__eta { font-size: 11.5px; }

.map-frame {
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  border-bottom: 0;
  margin-bottom: 0;
  background: var(--panel);
}
.map-hint {
  font-size: 11px;
  letter-spacing: .02em;
  left: 20px;
  bottom: 18px;
}

/* --- Stats --------------------------------------------------------------- */

.stats { border-block: 1px solid var(--line); }
.stat { padding: 36px var(--pad); border-right-color: var(--line); }
.stat strong { font-size: 38px; font-weight: 500; letter-spacing: -.04em; }
.stat > span { font-size: 17px; color: var(--muted); font-family: var(--display); }
.stat p { font-family: var(--sans); font-size: 13px; margin-top: 6px; color: var(--muted); }

/* --- Editorial + docs ---------------------------------------------------- */

.post {
  background: var(--panel);
  border-radius: var(--r-lg);
  padding: 26px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background-color .2s ease, border-color .2s ease;
}
.post:hover { transform: none; border-color: var(--line-2); background: var(--hover-bg); }
.post__meta { font-size: 11.5px; gap: 12px; }
.post__meta .tag { color: var(--ink); }
.post h3 { font-weight: 500; letter-spacing: -.025em; }
.post__read { font-size: 14px; font-weight: 500; }

.card, .cta-band, .table-wrap, .callout, .prose pre, .docs-side {
  background: var(--panel);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.cta-band { border-radius: var(--r-lg); padding: 48px var(--pad); background: var(--bg-2); }
.cta-band h2 { font-weight: 500; letter-spacing: -.028em; }

.callout { border-left-width: 2px; }
.callout b { font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--ink); letter-spacing: -.005em; }

.docs-side h4 { font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--ink); }
.docs-side a { border-radius: var(--r-sm); padding: 6px 10px; margin-left: -10px; }
.docs-side a.is-active { border-left-color: transparent; background: var(--accent-soft); color: var(--accent); font-weight: 500; }

.prose h2 { font-weight: 500; letter-spacing: -.025em; }
.prose pre { border-radius: var(--r); }
table.compare thead th { font-family: var(--sans); font-size: 12px; }

footer { margin-top: 0; padding-top: 56px; }
.footer__grid h4 { font-family: var(--sans); font-size: 12.5px; font-weight: 600; }

/* --- Motion -------------------------------------------------------------- */

/* One orchestrated moment, on load, in the hero. Everything further down the
   page is simply there when you reach it — a section that fades in as you
   scroll tells the reader nothing they did not already know. */
.reveal { opacity: 1; transform: none; transition: none; }

.hero-copy > *,
.globe-wrap {
  animation: rise .62s cubic-bezier(.22, .72, .3, 1) backwards;
}
.hero-copy > *:nth-child(1) { animation-delay: .02s; }
.hero-copy > *:nth-child(2) { animation-delay: .07s; }
.hero-copy > *:nth-child(3) { animation-delay: .12s; }
.hero-copy > *:nth-child(4) { animation-delay: .17s; }
.hero-copy > *:nth-child(5) { animation-delay: .22s; }
.hero-copy > *:nth-child(6) { animation-delay: .27s; }
.globe-wrap { animation-delay: .18s; animation-duration: .9s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy > *, .globe-wrap { animation: none; }
}

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

@media (max-width: 1000px) {
  .grid--features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--features .feature:nth-child(3n) { border-right: 1px solid var(--line); }
  .grid--features .feature:nth-child(2n) { border-right: 0; }
  .grid--features .feature:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .grid--features .feature:nth-last-child(-n+2) { border-bottom: 0; }

  .grid--plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--plans .plan { border-bottom: 1px solid var(--line); }
  .grid--plans .plan:nth-child(2n) { border-right: 0; }
  .grid--plans .plan:nth-last-child(-n+2) { border-bottom: 0; }

  .hero { padding-top: 56px; }
  .hero::before { -webkit-mask-image: radial-gradient(140% 70% at 50% 20%, #000, transparent 78%); mask-image: radial-gradient(140% 70% at 50% 20%, #000, transparent 78%); }
}

@media (max-width: 860px) {
  .section { padding: 76px var(--pad); }
}

@media (max-width: 700px) {
  .grid--features, .grid--plans { grid-template-columns: minmax(0, 1fr); }
  .grid--features .feature, .grid--plans .plan { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .grid--features .feature:last-child, .grid--plans .plan:last-child { border-bottom: 0 !important; }
  .grid--regions { grid-template-columns: minmax(0, 1fr); }
  .region { border-right: 0; border-bottom: 1px solid var(--line); }
  .region:last-child { border-bottom: 0; }
  .hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 0; }
  .plan__desc { min-height: 0; }
}

/* --- Alignment corrections ---------------------------------------------- */

/* The plan columns must read across as well as down: same baseline for the
   price, the spec table and the button in every column. */
.plan { padding-top: 34px; }
.plan__badge { position: absolute; top: 14px; right: 20px; left: auto; margin: 0; }
.plan__desc { min-height: 3.2em; }
.plan__price sup { font-size: 19px; top: -.5em; margin-right: 3px; font-weight: 400; }
.plan__specs { padding-top: 18px; }

/* Stats sit on the same left edge as the prose above them. */
.stats { padding: 0 var(--pad); }
.stat { padding: 36px 28px; }
.stat:first-child { padding-left: 0; }
.stat:last-child { padding-right: 0; }

.section--tight { padding-top: 16px; padding-bottom: 60px; }

.post__read { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.post__read::after {
  content: '';
  width: 14px;
  height: 1px;
  background: currentColor;
  transition: width .18s ease;
}
.post:hover .post__read::after { width: 26px; }

@media (max-width: 700px) {
  /* keep the region tags inside the viewport */
  .globe-wrap { max-width: 320px; }
  .tag-1 { left: 0; top: 18%; }
  .tag-2 { right: 0; top: 66%; }
  .hero__cta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .hero__cta .btn { width: 100%; }
}

/* --- Search in the nav --------------------------------------------------- */

/* It sits with the actions rather than in the hero, so it is reachable from
   every page. Collapsed it is a quiet field; focused it widens and the results
   drop straight under it. */
.search--nav { width: 150px; max-width: none; margin-right: 4px; transition: width .22s cubic-bezier(.2, .7, .3, 1); }
.search--nav:focus-within { width: 300px; }

.search--nav .search-box {
  height: 36px;
  padding: 0 8px 0 12px;
  gap: 9px;
  border-radius: var(--r);
  background: var(--bg-2);
  border-color: transparent;
}
.search--nav .search-box:hover { border-color: var(--line-2); }
.search--nav:focus-within .search-box,
.search--nav[data-open='true'] .search-box { background: var(--bg); border-color: var(--ink); }
.search--nav .search-box > svg { width: 15px; height: 15px; }
.search--nav input { font-size: 13.5px; }
.search--nav kbd { padding: 3px 6px; font-size: 9.5px; }

/* The dropdown is anchored to the field but wide enough to read. */
.search--nav .search-results {
  left: auto;
  right: 0;
  width: 360px;
  max-height: 60vh;
  border-radius: var(--r);
}

@media (max-width: 1080px) {
  .search--nav { width: 160px; }
  .search--nav:focus-within { width: 240px; }
  .nav-links { gap: 20px; }
}

@media (max-width: 940px) {
  /* Below this the field and the links cannot both fit. The links win on
     desktop widths; the field collapses to its icon and opens on focus. */
  .search--nav { width: 38px; }
  .search--nav:focus-within { width: 260px; }
  .search--nav input { opacity: 0; }
  .search--nav:focus-within input { opacity: 1; }
  .search--nav kbd { display: none; }
  .search--nav .search-box { padding: 0 10px; justify-content: center; }
  .search--nav:focus-within .search-box { justify-content: flex-start; padding: 0 10px 0 12px; }
}

@media (max-width: 860px) {
  /* The links collapse into the burger here, so the field takes the space
     they leave behind and fills the row. */
  .search--nav { order: -1; flex: 1 1 auto; width: auto; min-width: 0; }
  .search--nav:focus-within { width: auto; }
  .search--nav input { opacity: 1; min-width: 0; }
  .search--nav .search-box { justify-content: flex-start; padding: 0 10px 0 12px; }
  /* Pinned under the header so it can be wider than the field itself. */
  .search--nav .search-results {
    position: fixed;
    top: 72px;
    left: var(--pad);
    right: var(--pad);
    width: auto;
    max-height: 62vh;
  }
  .nav__inner { gap: 12px; }
  .nav-right { flex: 1 1 auto; min-width: 0; gap: 10px; }
  .nav.is-open .nav-links { top: 100%; }
}

@media (max-width: 420px) {
  .search--nav .search-box { height: 34px; }
}

.r-kind { font-family: var(--sans); font-size: 11px; letter-spacing: 0; text-transform: none; }
.r-title { font-size: 13.5px; }
.r-desc { font-size: 12px; }


/* bigdomainhost control-panel preview: new content block, existing theme/animation system preserved. */
.control-section { padding-top: 28px; }
.control-panel-wrap {
  display:grid; grid-template-columns:minmax(300px,.82fr) minmax(520px,1.55fr);
  gap:48px; align-items:center; padding:34px 38px; border:1px solid var(--line);
  border-radius:var(--r-lg); background:var(--control-bg);
  box-shadow:0 18px 60px rgba(15,23,42,.12); overflow:hidden;
}
.control-copy { max-width:560px; }
.control-title { font-family:var(--display); font-size:clamp(36px,4vw,58px); line-height:1.02; letter-spacing:-.045em; margin:20px 0 24px; }
.control-lede { color:var(--ink-2); font-size:18px; line-height:1.65; max-width:600px; }
.control-link { display:inline-flex; gap:10px; align-items:center; margin-top:30px; color:var(--ink); font-weight:600; }
.control-link span { color:var(--accent); transition:transform .2s ease; }
.control-link:hover span { transform:translateX(4px); }
.server-panel { min-width:0; border:1px solid var(--server-line); border-radius:18px; background:var(--server-bg); box-shadow:var(--shadow); overflow:hidden; }
.server-panel__head,.server-panel__foot { min-height:58px; display:flex; align-items:center; gap:12px; padding:0 20px; border-bottom:1px solid var(--server-line); }
.server-panel__head strong { font-size:16px; }
.server-region { padding:5px 10px; border-radius:999px; background:var(--server-region-bg); color:var(--server-region-ink); font-size:12px; }
.server-live { margin-left:auto; color:var(--server-live-ink); font-size:13px; display:flex; gap:8px; align-items:center; }
.server-live i,.status-dot { width:8px; height:8px; border-radius:50%; display:inline-block; background:var(--server-status); box-shadow:0 0 0 3px var(--server-status-ring); }
.server-row { padding:18px 24px 17px; border-bottom:1px solid var(--server-line); }
.server-row__top { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.server-row__top span { display:flex; align-items:center; gap:10px; }
.server-row__top strong { font-size:16px; }
.server-row__top small { color:var(--server-subtle); font-size:12px; white-space:nowrap; }
.server-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:16px; }
.server-metrics div > span { display:flex; justify-content:space-between; color:var(--server-subtle); font-size:12px; }
.server-metrics b { color:var(--server-value); font-weight:500; }
.server-metrics i { display:block; height:5px; margin-top:9px; background:var(--server-track); border-radius:99px; overflow:hidden; }
.server-metrics em { display:block; height:100%; border-radius:99px; background:var(--server-status); }
.server-metrics em.warn { background:var(--server-warning); }
.server-panel__foot { justify-content:space-between; border-bottom:0; color:var(--server-value); font-size:13px; }
.server-panel__foot b { color:var(--server-status); font-size:16px; margin-right:8px; }
.server-command { margin:0 20px 20px; padding:16px 18px; border-radius:12px; background:var(--server-command-bg); color:var(--server-command-ink); font:500 13px var(--mono); overflow:auto; white-space:nowrap; }
.server-command span { color:var(--server-status); margin-right:12px; }
@media (max-width: 1000px) {
  .control-panel-wrap { grid-template-columns:1fr; gap:34px; }
  .control-copy { max-width:760px; }
}
@media (max-width: 680px) {
  .control-panel-wrap { padding:26px 18px; border-radius:var(--r); }
  .server-row__top small { white-space:normal; text-align:right; }
  .server-metrics { gap:14px; }
  .server-panel__head,.server-panel__foot { padding:0 14px; }
  .server-row { padding:16px 14px; }
  .server-command { margin:0 14px 14px; }
}


/* Full catalogue styling. Uses existing bigdomainhost typography, borders and motion. */
.price-catalog { display:grid; gap:28px; }
.price-group { border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); }
.price-group__head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding:26px 28px 22px; border-bottom:1px solid var(--line); }
.price-group__head h3 { margin:6px 0 0; font-family:var(--display); font-size:24px; letter-spacing:-.025em; }
.price-group__head > span { color:var(--accent); font-family:var(--mono); font-size:12px; white-space:nowrap; }
.price-table { width:100%; }
.price-table th:first-child { white-space:nowrap; }
.price-table td:last-child, .price-table thead th:last-child { white-space:nowrap; font-family:var(--mono); }
.price-table tbody th { font-weight:600; }
.table-badge { display:inline-block; margin-left:8px; padding:3px 7px; border-radius:999px; font:500 10px var(--sans); color:var(--accent-ink); background:var(--accent); vertical-align:middle; }
.price-note { margin:0; padding:16px 28px 22px; color:var(--muted); font-size:13px; line-height:1.65; }
@media (max-width:700px) {
  .price-group__head { padding:22px 18px; align-items:flex-start; flex-direction:column; }
  .price-group__head > span { white-space:normal; }
  .price-table { min-width:760px; }
  .price-group .table-wrap { overflow-x:auto; }
  .price-note { padding:14px 18px 20px; }
}


/* =======================================================================
   Support bar, contact surfaces and legal pages
   Support details sit above the fold on every page, again in the footer,
   and in a widget that follows the reader down the page.
   ======================================================================= */

/* --- announcement / support bar ---------------------------------------- */
.topbar {
  background: var(--invert-bg);
  color: var(--invert-ink);
  font-size: 13px;
  line-height: 1.4;
}
.topbar__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 9px var(--pad);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px 26px;
  flex-wrap: wrap;
}
.topbar a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: inherit;
  font-weight: 600;
  white-space: nowrap;
}
.topbar a:hover { color: var(--signal); }
.topbar svg { width: 14px; height: 14px; flex-shrink: 0; }
.topbar__note { opacity: .72; font-weight: 400; }
.topbar__sep { opacity: .3; }

/* --- phone pill in the header ------------------------------------------ */
.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.nav-phone:hover { border-color: var(--accent); color: var(--accent); }
.nav-phone svg { width: 14px; height: 14px; color: var(--accent); }

/* --- floating contact widget ------------------------------------------- */
.floatbar {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.floatbar a {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--invert-bg);
  color: var(--invert-ink);
  box-shadow: var(--shadow);
  border: 1px solid var(--line-2);
  transition: transform .18s ease, background .18s ease;
}
.floatbar a:hover { transform: translateY(-2px); background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.floatbar a svg { width: 19px; height: 19px; }
.floatbar .is-call { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.floatbar .is-wa { background: #25D366; color: #062512; border-color: transparent; }

/* --- support band (repeatable contact block) ---------------------------- */
.support-band {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-2);
  padding: 30px 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 32px;
  align-items: center;
}
.support-band h2, .support-band h3 {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.025em;
  margin-bottom: 8px;
}
.support-band p { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; margin: 0; }
.support-band__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* --- contact cards ------------------------------------------------------ */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 20px; }
.contact-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-card__icon {
  width: 34px;
  height: 34px;
  border-radius: var(--r);
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 8px;
}
.contact-card__icon svg { width: 17px; height: 17px; }
.contact-card h3 { font-size: 13px; font-weight: 600; letter-spacing: -.005em; }
.contact-card strong {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
/* An email address is long enough to break mid-word in a card column, so it
   gets a size that fits on one line instead. */
.contact-card strong.is-mail { font-size: 15.5px; letter-spacing: -.01em; }
.contact-card a strong { color: var(--ink); }
.contact-card a:hover strong { color: var(--accent); }
.contact-card p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0; }
.contact-card address { font-style: normal; font-size: 14.5px; color: var(--ink-2); line-height: 1.65; }

/* --- footer contact column --------------------------------------------- */
.footer__contact { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; font-size: 14px; }
.footer__contact a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; }
.footer__contact a:hover { color: var(--accent); }
.footer__contact svg { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; }
.footer__contact address { font-style: normal; color: var(--ink-2); line-height: 1.6; font-weight: 400; font-size: 13.5px; }

/* --- breadcrumbs -------------------------------------------------------- */
.crumbs {
  max-width: var(--max);
  margin: 0 auto;
  padding: 24px var(--pad) 0;
  font-size: 13px;
  color: var(--muted);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); }
.crumbs span[aria-current] { color: var(--ink); }

/* --- legal pages -------------------------------------------------------- */
.legal { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 56px; align-items: start; }
.legal-meta {
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--r);
  background: var(--bg-2);
  padding: 16px 20px;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.7;
  margin-bottom: 34px;
}
.legal-meta b { color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 22px; font-size: 14px; }
.prose table th, .prose table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.prose table th { font-weight: 600; color: var(--ink); }
.prose table td { color: var(--ink-2); }

/* --- key/value spec list ------------------------------------------------ */
.nap { font-style: normal; line-height: 1.75; color: var(--ink-2); font-size: 15px; }
.nap b { color: var(--ink); }

@media (max-width: 1000px) {
  /* minmax(0,…) so a wide table scrolls inside .prose-table instead of
     widening the single column past the viewport */
  .legal { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .legal .docs-side { position: static; }
}
@media (max-width: 860px) {
  .support-band { grid-template-columns: 1fr; padding: 26px 22px; }
}
@media (max-width: 620px) {
  /* Below this the brand, the two switches and the burger need the whole row.
     The top bar and the floating call button still carry the number. */
  .nav-phone { display: none; }
}
@media (max-width: 680px) {
  .topbar__inner { padding: 8px 16px; gap: 6px 16px; font-size: 12.5px; }
  .topbar__note { display: none; }
  .topbar__sep { display: none; }
  .floatbar { right: 12px; bottom: 12px; }
  .floatbar a { width: 44px; height: 44px; }
  .contact-card { padding: 22px 18px; }
}


/* Six nav items only fit on one row if none of them wrap. */
.nav-links a { white-space: nowrap; }

/* A wide prose table scrolls inside its own column on a narrow screen. */
.prose-table { overflow-x: auto; margin-bottom: 22px; }
.prose-table table { margin-bottom: 0; }


/* =======================================================================
   Currency
   Every price is written twice — once in rupees, once in dollars — and CSS
   shows one of them. No JavaScript is needed to render the right one, so
   there is no flash on load and INR still shows with scripting off.
   ======================================================================= */
[data-cur] { display: none; }
[data-cur='inr'] { display: inline; }
:root[data-currency='usd'] [data-cur='inr'] { display: none; }
:root[data-currency='usd'] [data-cur='usd'] { display: inline; }

.currency-toggle { font: 600 13px var(--sans); letter-spacing: -.01em; }
.currency-toggle span { line-height: 1; }

/* The billing switch and the currency switch sit on one row above a table. */
.price-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.price-controls .muted { font-size: 13px; }

/* Two ledes stacked under one heading need air between them. */
.sec-lede + .sec-lede { margin-top: 12px; }

/* Very small phones: the brand, the search, both switches and the burger only
   fit on one row once the gutters and the buttons tighten up. The field itself
   is already flexible — see the min-width:0 on its input above. */
@media (max-width: 380px) {
  :root { --pad: 16px; }
  .nav__inner { gap: 8px; }
  .nav-right { gap: 8px; }
  .nav-right .icon-btn { width: 34px; height: 34px; }
  .menu { padding: 7px; }
  /* The flexible field has no room left here and would collapse to a 0px
     ghost that is still focusable. Drop it instead; every destination it
     reaches is in the burger. */
  .search--nav { display: none; }
}


/* The guide cards are links, not articles, so they need the card reset. */
a.post { color: inherit; text-decoration: none; }
a.post h3 { color: var(--ink); }

/* A price we quote rather than publish. */
.enquiry {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font: 500 12px var(--sans);
  letter-spacing: -.005em;
  color: var(--muted);
  white-space: nowrap;
}

/* The fact table on answers.html reads as a reference, not a comparison, so
   its values sit left rather than centred like the plan-comparison tables. */
.facts-table td { text-align: left; }
.facts-table th[scope='row'] { font-family: var(--mono); font-size: 12.5px; color: var(--muted); font-weight: 500; }