@charset "UTF-8";
/* ===========================
   OuterSpaceTrip.com -- Core Styles
   =========================== */

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

:root {
  --space-black: #0a0a0f;
  --space-dark:  #0d0d1a;
  --space-navy:  #0f0f2e;
  --accent:      #e26740;
  --accent-glow: rgba(226, 103, 64, 0.22);
  --accent-dim:  rgba(226, 103, 64, 0.10);
  --accent-space:     #aac4ff;                  /* periwinkle -- editorial accent: eyebrows, badges, numbers (never on a button) */
  --accent-space-dim: rgba(170, 196, 255, 0.10);
  --gold:        #f7c948;
  --text:        #e8e8f0;
  --text-muted:  #8888aa;
  --border:      rgba(226, 103, 64, 0.15);
  --card-bg:     rgba(255,255,255,0.03);
  --font:        'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

html { scroll-behavior: smooth; }

body {
  background: var(--space-black);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* -- Ambient drifting dot-grid (see fixed bg div in page templates) -- */
@keyframes ostDrift { from { background-position: 0 0; } to { background-position: 760px 0; } }

/* -- Layout -- */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

/* ======================================
   NAV
====================================== */
nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(10,10,15,0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  gap: 16px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.nav-logo-wordmark {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
}
.nav-logo-tagline {
  font-size: 0.48rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
}
.nav-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  /* New rocket monogram mark (favicon.svg). Text inside is kept for a11y/
     fallback but hidden so the SVG tile shows. */
  background: url("/favicon-96x96.png") center / contain no-repeat;
  font-size: 0;
  color: transparent;
  overflow: hidden;
  flex-shrink: 0;
}

/* Nav links */
.nav-links {
  display: flex;
  gap: 26px;
  list-style: none;
  align-items: center;
}
.nav-links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 500;
  transition: color .2s;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--text); }

.nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

/* Social icons in nav */
.nav-socials {
  display: flex;
  gap: 10px;
  align-items: center;
}
.nav-socials a {
  color: var(--text-muted);
  display: flex;
  transition: color .2s;
}
.nav-socials a:hover { color: var(--accent); }

.nav-cta {
  background: var(--accent);
  color: #fff;
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity .2s;
  white-space: nowrap;
}
.nav-cta:hover { opacity: 0.85; }

/* ======================================
   BUTTONS
====================================== */
.btn-primary {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity .2s, transform .15s;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary:hover { opacity: 0.88; transform: translateY(-1px); }

.btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--text);
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--border);
  transition: border-color .2s, color .2s;
  cursor: pointer;
  white-space: nowrap;
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }


/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: auto;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ======================================
   HERO
====================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 120px 0 80px;
}
.hero::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 700px;
  background: radial-gradient(ellipse at center, rgba(226, 103, 64,0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.hero-text { position: relative; z-index: 1; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-space-dim);
  border: 1px solid var(--border);
  color: var(--accent-space);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 24px;
}
.hero-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-space);
  animation: pulse 2s ease infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(1.3); }
}

.hero h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: 22px;
  background: linear-gradient(150deg, #ffffff 0%, #c0d4ff 60%, #8ab0f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero p {
  font-size: 1.1rem;
  color: var(--text-muted);
  line-height: 1.65;
  max-width: 480px;
  margin-bottom: 36px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.hero-proof {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-proof-avatars {
  display: flex;
}
.hero-proof-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--space-black);
  background: linear-gradient(135deg, #e26740, #1a3a7a);
  margin-left: -8px;
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-proof-avatar:first-child { margin-left: 0; }

/* Planet visual */
.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.planet-wrapper {
  position: relative;
  width: 420px;
  max-width: 100%;
  animation: planetFloat 7s ease-in-out infinite;
}
@keyframes planetFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-18px); }
}

.planet-svg { width: 100%; height: auto; filter: drop-shadow(0 0 60px rgba(226, 103, 64,0.25)); }

/* Satellite orbital dot animation */
@keyframes orbitSat {
  from { transform: rotate(0deg) translateX(175px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(175px) rotate(-360deg); }
}
.sat-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  animation: orbitSat 12s linear infinite;
}
.sat-orbit::after {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}

/* ======================================
   SCROLL ANIMATIONS
====================================== */
.fade-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger delays */
.fade-up:nth-child(2) { transition-delay: 0.1s; }
.fade-up:nth-child(3) { transition-delay: 0.2s; }
.fade-up:nth-child(4) { transition-delay: 0.3s; }
.fade-up:nth-child(5) { transition-delay: 0.35s; }
.fade-up:nth-child(6) { transition-delay: 0.4s; }

/* ======================================
   PRESS BAR
====================================== */
.press-bar {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
  background: rgba(255,255,255,0.015);
}
.press-bar-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.press-bar-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.press-logos {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
}
.press-logo {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(136,136,170,0.6);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ======================================
   STATS BAR
====================================== */
.stats {
  padding: 40px 0;
  margin-bottom: 80px;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.stat-item {
  background: var(--space-black);
  padding: 28px 24px;
  text-align: center;
  transition: background .2s;
}
.stat-item:hover { background: var(--card-bg); }
.stat-num {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--accent-space);
  letter-spacing: -0.04em;
  line-height: 1;
}
.stat-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.4;
}

/* ======================================
   SECTION HEADERS
====================================== */
.section-header { margin-bottom: 48px; }
.section-header.center { text-align: center; }
.section-header.center .section-header p { margin: 12px auto 0; }

.section-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-space);
  margin-bottom: 12px;
}

.section-header h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.section-header p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 560px;
  margin: 12px 0 0;
}

/* ======================================
   PRICING TABLE
====================================== */
.pricing-section { padding: 0 0 80px; }
.pricing-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.pricing-header h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 8px 0 0;
}
.pricing-header p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 10px 0 0;
  max-width: 480px;
}
.pricing-guide-link {
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.pricing-guide-link:hover { text-decoration: underline; }
.pricing-table-wrap {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.homepage-price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.homepage-price-table thead tr {
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
}
.homepage-price-table th {
  padding: 12px 16px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
}
.homepage-price-table td {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  vertical-align: middle;
}
.homepage-price-table tbody tr:last-child td { border-bottom: none; }
.homepage-price-table tbody tr:hover td { background: rgba(226, 103, 64,0.03); }
.exp-name-cell { color: var(--text); font-weight: 600; }
.homepage-price-table td strong { color: var(--text); }
.not-priced { color: rgba(136,136,170,0.5); font-style: italic; }
.status-pill {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid;
}
.status-pill.green  { color: #4ade80; border-color: rgba(74,222,128,0.3);  background: rgba(74,222,128,0.06); }
.status-pill.yellow { color: #f7c948; border-color: rgba(247,201,72,0.3);  background: rgba(247,201,72,0.06); }
.status-pill.red    { color: #f87171; border-color: rgba(248,113,113,0.3); background: rgba(248,113,113,0.06); }
.pricing-footer-note {
  padding: 12px 16px;
  font-size: 0.72rem;
  color: rgba(136,136,170,0.5);
  border-top: 1px solid var(--border);
  background: var(--card-bg);
}

/* ======================================
   WHY NOW -- numbered cards
====================================== */
.why-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.why-icon { font-size: 1.5rem; }
.why-num {
  font-size: 0.72rem;
  font-weight: 800;
  color: rgba(226, 103, 64,0.3);
  letter-spacing: 0.06em;
}

/* ======================================
   EXPERIENCES -- vertical list
====================================== */
.exp-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.exp-row {
  display: grid;
  grid-template-columns: 120px 56px 1fr;
  gap: 24px;
  align-items: center;
  padding: 28px 32px;
  border-bottom: 1px solid var(--border);
  transition: background .2s;
}
.exp-row:last-child { border-bottom: none; }
.exp-row:hover { background: rgba(226, 103, 64,0.03); }
.exp-altitude { text-align: right; }
.exp-alt-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-space);
  letter-spacing: 0.04em;
}
.exp-alt-sub {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 3px;
}
.exp-icon-sm {
  font-size: 1.4rem;
  width: 48px;
  height: 48px;
  background: var(--accent-dim);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.exp-body { min-width: 0; }
.exp-row-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.exp-row-header h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
}
.exp-status {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
}
.exp-status.active {
  color: #4ade80;
  background: rgba(74,222,128,0.08);
  border: 1px solid rgba(74,222,128,0.25);
}
.exp-status.upcoming {
  color: #f7c948;
  background: rgba(247,201,72,0.08);
  border: 1px solid rgba(247,201,72,0.25);
}
.exp-body p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 10px;
}
.exp-price {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
}

/* ======================================
   DOMAIN PORTFOLIO -- new layout
====================================== */
.domains-grid-new {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.domain-flagship-card {
  grid-column: 1;
  grid-row: 1;
  background: rgba(226, 103, 64,0.06);
  border: 1px solid var(--accent);
  border-radius: 14px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.domain-flagship-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-space);
}
.domain-flagship-name {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
}
.domain-flagship-name span { color: var(--accent); }
.domain-flagship-card p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}
.domain-flagship-meta {
  display: flex;
  gap: 24px;
  margin-top: auto;
}
.domain-meta-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.domain-meta-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.domain-meta-val { font-size: 0.88rem; font-weight: 600; color: var(--text); }
.domain-meta-val.accent { color: var(--accent); }
.domain-side-card {
  grid-column: 2;
  grid-row: 1;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.domain-cat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.domain-cat-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-space);
}
.domain-est {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}
.domain-side-name {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
}
.domain-side-name span { color: var(--accent); }
.domain-side-card p {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.domain-grid-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.domain-mini-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .2s;
}
.domain-mini-card:hover { border-color: rgba(226, 103, 64,0.4); }
.domain-mini-cat {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.domain-mini-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}
.domain-mini-name span { color: var(--accent); }
.domain-mini-est {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  margin-top: auto;
}
.btn-domain-secondary {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  text-align: center;
  transition: border-color .2s, color .2s;
  margin-top: 6px;
}
.btn-domain-secondary:hover { border-color: var(--accent); color: var(--accent); }

/* ======================================
   NEWSLETTER SECTION
====================================== */
.newsletter-section { padding: 80px 0; }
.newsletter-inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 56px 48px;
}
.newsletter-inner h2 {
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 8px 0 12px;
}
.newsletter-inner p {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.7;
  max-width: 420px;
  margin: 0 auto 28px;
}
.newsletter-form {
  display: flex;
  gap: 10px;
  max-width: 420px;
  margin: 0 auto 14px;
}
.newsletter-input {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  color: var(--text);
  font-size: 0.9rem;
  outline: none;
  transition: border-color .2s;
}
.newsletter-input:focus { border-color: var(--accent); }
.newsletter-sub {
  font-size: 0.75rem;
  color: rgba(136,136,170,0.6);
}

/* ======================================
   FOOTER -- row layout
====================================== */
footer { padding: 32px 0; border-top: 1px solid var(--border); }
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-left { display: flex; flex-direction: column; gap: 6px; }
.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.footer-copy { font-size: 0.75rem; color: rgba(136,136,170,0.5); margin: 0; }
.footer-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
}
.footer-links a {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .2s;
}
.footer-links a:hover { color: var(--text); }

/* ======================================
   GUIDES PAGE
====================================== */
.guides-hero-section { padding: 80px 0 60px; }
.guides-hero-section h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  margin: 8px 0 16px;
}
.guides-hero-section p {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 560px;
}
.guides-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding-bottom: 80px;
}
.guide-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color .2s, transform .2s;
}
.guide-card:hover {
  border-color: rgba(226, 103, 64,0.4);
  transform: translateY(-4px);
  box-shadow: 0 20px 48px -14px rgba(226, 103, 64,0.28);
}
.guide-card-tag {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-space);
}
.guide-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.3;
}
.guide-card p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.guide-card-arrow {
  font-size: 0.85rem;
  color: var(--accent);
  font-weight: 600;
  margin-top: auto;
}

/* ======================================
   STATIC CONTENT PAGES
   Shared by About, Privacy, and the Guides hub -- the pages that link this
   external stylesheet rather than the homepage's inline CSS. Their layout
   classes live here, built on the same tokens as the homepage (dark palette,
   accent blue, card system) so the whole site reads as one brand.
====================================== */

/* Page hero -- heading block at the top of a static page. A soft accent glow
   echoes the homepage hero without competing with it. */
.page-hero {
  position: relative;
  padding: 72px 0 40px;
  border-bottom: 1px solid var(--border);
  background: radial-gradient(60% 120% at 50% 0%, var(--accent-dim), transparent 70%);
}
.page-hero h1 {
  font-size: clamp(2rem, 5vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin: 0;
  color: #f4f6fb;
}

/* Long-form content column -- comfortable measure and vertical rhythm for the
   prose on About / Privacy. */
.content-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 0 72px;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--text);
}
.content-page h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 44px 0 14px;
}
.content-page h3 {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--text);
  margin: 28px 0 10px;
}
.content-page p {
  color: var(--text-muted);
  margin: 0 0 18px;
}
.content-page strong { color: var(--text); font-weight: 600; }
.content-page a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-dim);
  transition: border-color .2s, color .2s;
}
.content-page a:hover { border-bottom-color: var(--accent); }
.content-page ul {
  color: var(--text-muted);
  margin: 0 0 18px;
  padding-left: 1.25rem;
}
.content-page li { margin: 0 0 8px; }
.content-meta {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 28px;
}

/* Feature card grid -- the "About the Site / Domain Inquiries / ..." cards. */
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.about-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  transition: border-color .2s, transform .2s;
}
.about-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.about-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
}
.about-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Call-to-action band -- closing prompt on the About page. */
.cta-band {
  text-align: center;
  border-top: 1px solid var(--border);
  background: radial-gradient(60% 140% at 50% 0%, var(--accent-dim), transparent 70%);
}
.cta-band h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
}
.cta-band p {
  color: var(--text-muted);
  max-width: 520px;
  margin: 0 auto 26px;
}

/* ======================================
   RESPONSIVE
====================================== */
@media (max-width: 900px) {
  .domains-grid-new { grid-template-columns: 1fr; }
  .domain-flagship-card, .domain-side-card { grid-column: 1; grid-row: auto; }
  .domain-grid-row { grid-template-columns: repeat(2, 1fr); }
  .exp-row { grid-template-columns: 90px 44px 1fr; gap: 16px; padding: 20px; }
}
@media (max-width: 680px) {
  .pricing-header { flex-direction: column; align-items: flex-start; }
  .homepage-price-table { font-size: 0.78rem; }
  .homepage-price-table th, .homepage-price-table td { padding: 10px 12px; }
  .exp-row { grid-template-columns: 1fr; gap: 8px; }
  .exp-altitude { text-align: left; }
  .domain-grid-row { grid-template-columns: 1fr; }
  .newsletter-inner { padding: 36px 24px; }
  .newsletter-form { flex-direction: column; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* ======================================
   MOBILE NAV -- static pages (guides hub, about, privacy)
   These pages use this nav + the main.js hamburger toggle (adds .open to
   #navLinks). Without a breakpoint the desktop links render on mobile and,
   being white-space:nowrap, overflow the viewport (horizontal scroll). Hide
   them behind the hamburger and reveal an open dropdown, matching the homepage.
====================================== */
@media (max-width: 768px) {
  .nav-hamburger { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(10,10,15,0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    padding: 8px 24px 18px;
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a {
    display: block;
    width: 100%;
    padding: 13px 2px;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
}

/* ======================================
   FOCUS STATES -- keyboard accessibility
   Visible only during keyboard navigation (:focus-visible), so mouse and
   touch users see no change. Uses the accent system. Best-in-class design
   systems (Stripe, Linear, the GOV.UK design system) ship a consistent
   focus ring like this; the site previously relied on hover alone, and the
   newsletter input cleared its outline with no keyboard-visible replacement.
====================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.nav-cta:focus-visible,
.btn-domain-secondary:focus-visible,
.guide-card:focus-visible,
.domain-mini-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
/* Suppress the ring for mouse/touch focus where :focus-visible is supported,
   while never stripping it from keyboard users. */
:focus:not(:focus-visible) { outline: none; }

/* ======================================
   REDUCED MOTION -- honor the OS/browser preference
   Visitors who request reduced motion get a calm, static experience: no
   background drift, float, orbit, pulse, or scroll-reveal. Standard practice
   on the best-designed sites and a WCAG 2.3.3 consideration.
====================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .fade-up { opacity: 1 !important; transform: none !important; }
}