/* ============================================
   Skye Meta — Design System
   ============================================ */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Colors */
  --navy: #0a1628;
  --navy-light: #111d32;
  --slate: #2a3240;
  --gold: #c9a84c;
  --gold-hover: #d4b85e;
  --gold-dark: #b8952f;
  --cream: #f5f2ed;
  --cream-dark: #e8e4dd;
  --white: #ffffff;
  --gray-300: #94a3b8;
  --gray-400: #64748b;
  --gray-500: #475569;
  --gray-600: #334155;
  --border: rgba(201, 168, 76, 0.15);
  --cyan: #00d4ff;
  --border-light: rgba(255, 255, 255, 0.08);

  /* Typography — Design System v2 (2026-07): sans-led.
     --font-display is the headline face. --font-serif is kept as a LEGACY ALIAS
     pointing at the display stack so per-page inline styles written against it
     modernize without edits. New code should use --font-display. */
  --font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: var(--font-display);
  --font-sans: 'Inter', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'DM Mono', 'Fira Code', monospace;

  /* Product accents — one per product, used identically in nav, cards,
     marks, diagram nodes, and OG art. Do not introduce ad-hoc hex. */
  --accent-bothy: #b794e6;      /* heather — the issuer */
  --accent-gate: #c9a84c;       /* gold — flagship recognizer owns the brand color */
  --accent-woo: #e0a030;        /* amber — commerce */
  --accent-recognition: #7fb069; /* sage — Shopify / Skye Recognition */
  --accent-agenttalk: #00d4ff;  /* cyan — agents */
  --accent-profile: #34d399;    /* emerald — wallet trust */
  --accent-access: #7da2c9;     /* steel blue — the open SDK */

  /* Spacing */
  --section-pad: 80px 0;
  --container-width: 1080px;
  --nav-height: 72px;
}

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--cream);
  background: var(--navy);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--gold-hover); }

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Typography (v2: sans-led display) --- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 650;
  line-height: 1.15;
  color: var(--white);
}

h1 { font-size: 3.4rem; font-weight: 700; letter-spacing: -0.035em; }
h2 { font-size: 2.1rem; letter-spacing: -0.025em; margin-bottom: 16px; }
h3 { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 8px; }
h4 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }

p {
  color: var(--gray-300);
  line-height: 1.7;
  margin-bottom: 1.5em;
}

.section-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

.section-subtitle {
  font-size: 1.1rem;
  color: var(--gray-300);
  max-width: 600px;
  line-height: 1.7;
}

/* --- Buttons --- */
.btn-primary,
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  text-decoration: none;
  line-height: 1;
}

.btn-primary {
  background: var(--gold);
  color: var(--navy);
}
.btn-primary:hover {
  background: var(--gold-hover);
  color: var(--navy);
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--border);
}
.btn-outline:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.btn-sm {
  padding: 10px 20px;
  font-size: 0.85rem;
}

.cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* --- Navigation --- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  background: rgba(10, 22, 40, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-light);
  z-index: 1000;
  display: flex;
  align-items: center;
}

.nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--white);
  text-decoration: none;
}

.nav-logo img {
  height: 44px;
  width: 44px;
}

.nav-logo span {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

.nav-links a {
  color: var(--gray-300);
  font-size: 0.9rem;
  font-weight: 400;
  transition: color 0.2s;
  text-decoration: none;
}
.nav-links a:hover,
.nav-links a.active { color: var(--white); }

/* --- Nav dropdown groups (families) --- */
.nav-links { height: var(--nav-height); }
.nav-group { position: relative; height: 100%; display: flex; align-items: center; }
.nav-group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray-300);
  font-size: 0.9rem;
  font-weight: 400;
  font-family: inherit;
  padding: 0;
  transition: color 0.2s;
}
.nav-group:hover .nav-group-toggle,
.nav-group:focus-within .nav-group-toggle,
.nav-group.open .nav-group-toggle { color: var(--white); }
.nav-caret { font-size: 0.6rem; transition: transform 0.2s; }
.nav-group:hover .nav-caret,
.nav-group:focus-within .nav-caret,
.nav-group.open .nav-caret { transform: rotate(180deg); }
.nav-dropdown {
  list-style: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  margin-top: -1px;
  padding: 10px;
  background: rgba(10, 22, 40, 0.98);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.16s ease;
  z-index: 1001;
}
.nav-group:hover .nav-dropdown,
.nav-group:focus-within .nav-dropdown,
.nav-group.open .nav-dropdown { opacity: 1; visibility: visible; }
.nav-dropdown li { margin: 0; }
.nav-dropdown a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--gray-300);
  font-size: 0.9rem;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.nav-dropdown a:hover,
.nav-dropdown a.active { color: var(--white); background: rgba(201, 168, 76, 0.1); }
.nav-dropdown a strong { display: block; font-weight: 500; color: var(--cream); }
.nav-dropdown .nav-sub { display: block; margin-top: 2px; font-size: 0.78rem; color: var(--gray-300); opacity: 0.8; }

/* --- Nav log in + primary call to action --- */
.nav-links .nav-login { color: var(--cream); }
.nav-links .nav-cta,
.mobile-nav .nav-cta {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 100px;
  background: var(--gold);
  color: var(--navy);
  font-weight: 600;
  white-space: nowrap;
  transition: transform 0.15s, filter 0.15s;
}
.nav-links .nav-cta:hover,
.nav-links .nav-cta.active { color: var(--navy); filter: brightness(1.08); transform: translateY(-1px); }

/* Six menu groups + log in + call to action need room: hamburger below 1100px */
.nav-links { gap: 26px; }
@media (max-width: 1100px) {
  .nav-links { display: none; }
  .hamburger { display: flex; flex-shrink: 0; }
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--cream);
  transition: all 0.3s;
}

/* Mobile nav */
.mobile-nav {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--navy);
  z-index: 999;
  padding: 32px 24px 48px;
  overflow-y: auto;
}

.mobile-nav.open { display: flex; flex-direction: column; }

.mobile-nav ul { list-style: none; }
.mobile-nav li { margin-bottom: 16px; }
.mobile-nav .nav-cta { font-size: 1rem; margin-top: 4px; }

.mobile-nav a {
  color: var(--cream);
  font-size: 1.15rem;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
}

/* Mobile nav family labels */
.mobile-group-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
  margin-bottom: 16px !important;
}
.mobile-nav .mobile-group-label:not(:first-child) {
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--border-light);
}

/* --- Hero --- */
.hero {
  padding: 160px 0 80px;
  text-align: center;
}

.hero h1 {
  margin-bottom: 20px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.hero-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--gold);
  margin-bottom: 16px;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}

.hero p {
  max-width: 580px;
  margin: 0 auto 36px;
  font-size: 1.1rem;
  color: var(--gray-300);
}

.hero-ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-image {
  display: block;
  max-width: 900px;
  width: 100%;
  margin: 48px auto 0;
  border-radius: 12px;
  border: 1px solid var(--border);
}

/* --- Section --- */
.section {
  padding: var(--section-pad);
}

.section-dark {
  background: var(--navy-light);
  padding: var(--section-pad);
}

.section-center {
  text-align: center;
}

.section-header {
  text-align: center;
  margin-bottom: 48px;
}

/* --- Cards --- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

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

.card {
  background: var(--navy-light);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
  transition: border-color 0.2s, transform 0.2s;
}

.section-dark .card {
  background: var(--navy);
}

.card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}

.card h3 {
  margin-bottom: 10px;
}

.card p {
  color: var(--gray-300);
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 0;
}

.card .btn-primary,
.card .btn-outline {
  margin-top: 20px;
}

/* --- Code Block --- */
pre {
  background: #0d1117;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 20px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.8;
  color: var(--gray-300);
  max-width: 100%;
}

code {
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

/* Inline code */
p code, li code {
  background: rgba(201, 168, 76, 0.1);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.8rem;
}

/* --- Feature List --- */
.feature-list {
  list-style: none;
  margin: 16px 0 24px;
}

.feature-list li {
  padding: 6px 0;
  color: var(--gray-300);
  font-size: 0.9rem;
  padding-left: 20px;
  position: relative;
}

.feature-list li::before {
  content: '\2713';
  color: var(--gold);
  font-weight: 700;
  position: absolute;
  left: 0;
}

/* Generic styled lists */
.styled-list {
  list-style: none;
  margin: 16px 0 24px;
}

.styled-list li {
  padding: 6px 0;
  color: var(--gray-300);
  font-size: 0.9rem;
  padding-left: 20px;
  position: relative;
}

.styled-list li::before {
  content: '\2713';
  color: var(--gold);
  font-weight: 700;
  position: absolute;
  left: 0;
}

/* --- How It Works / Steps --- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.step {
  position: relative;
  padding: 32px;
  background: var(--navy-light);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.section-dark .step {
  background: var(--navy);
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(201, 168, 76, 0.15);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.step h3 { margin-bottom: 8px; }
.step p { color: var(--gray-300); font-size: 0.88rem; }

/* --- Two-Column Layout --- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.two-col h2 {
  margin-bottom: 12px;
}

.two-col p {
  color: var(--gray-300);
  margin-bottom: 12px;
}

/* --- Trust Bar --- */
.trust-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 40px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.trust-item {
  text-align: center;
}

.trust-item strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 6px;
}

.trust-item span {
  font-size: 0.8rem;
  color: var(--gray-400);
}

/* --- Pricing --- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.pricing-grid-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 720px;
  margin: 0 auto;
}

.pricing-grid-1 {
  grid-template-columns: 1fr;
  max-width: 400px;
  margin: 0 auto;
}

.pricing-card {
  background: var(--navy-light);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 36px 28px;
  text-align: center;
  transition: border-color 0.2s;
  display: flex;
  flex-direction: column;
}

.section-dark .pricing-card {
  background: var(--navy);
}

.pricing-card.featured {
  border-color: var(--gold);
  position: relative;
}

.pricing-card.featured::before {
  content: 'Most Popular';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--navy);
  padding: 4px 16px;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pricing-price {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--gold);
  margin: 12px 0 8px;
}

.pricing-price span {
  font-size: 0.9rem;
  color: var(--gray-400);
  font-family: var(--font-sans);
  font-weight: 400;
}

.pricing-card > p {
  color: var(--gray-400);
  font-size: 0.85rem;
  margin-bottom: 20px;
}

.pricing-card ul {
  list-style: none;
  text-align: left;
  margin-bottom: 24px;
  flex: 1;
}

.pricing-card li {
  padding: 7px 0;
  color: var(--gray-300);
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 8px;
}

.pricing-card li::before {
  content: '\2713';
  color: var(--gold);
  font-weight: 700;
  font-size: 0.8rem;
}

.pricing-card .btn-primary,
.pricing-card .btn-outline {
  width: 100%;
  justify-content: center;
}

.pricing-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.coming-soon-badge {
  display: inline-block;
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 10px 24px;
  border-radius: 6px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.why-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.why-card h3 {
  margin-bottom: 16px;
}

.why-card .btn-outline {
  margin-top: auto;
}

/* --- Steps Grid --- */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 8px;
}

.step-card {
  background: var(--navy-light);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 24px;
  text-align: center;
}

.step-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.step-card h3 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.step-card p {
  font-size: 0.85rem;
  color: var(--gray-400);
  line-height: 1.5;
}

.step-card code {
  background: rgba(201, 168, 76, 0.1);
  color: var(--gold);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

/* --- Share Buttons --- */
.share-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.share-bar span {
  font-size: 0.85rem;
  color: var(--gray-400);
  font-weight: 500;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--border);
  color: var(--gray-300);
  background: var(--navy-light);
  cursor: pointer;
  transition: border-color 0.15s;
}

.share-btn:hover {
  border-color: var(--gold);
  color: #fff;
}

/* --- FAQ --- */
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-item h3 {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.faq-item p {
  font-size: 0.9rem;
  color: var(--gray-400);
  line-height: 1.6;
}

.faq-item pre {
  background: var(--navy-light);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--gold);
  overflow-x: auto;
  margin: 12px 0;
}

.faq-item code {
  background: rgba(201, 168, 76, 0.1);
  color: var(--gold);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

/* --- Chains Bar --- */
.chains-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 24px;
}

.chain-pill {
  padding: 6px 14px;
  background: rgba(201, 168, 76, 0.08);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 0.75rem;
  color: var(--gray-300);
  font-weight: 500;
}

/* --- Comparison Table --- */
.comparison-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -24px;
  padding: 0 24px;
  position: relative;
}

.comparison-table-wrap::after {
  content: '';
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(to right, transparent, var(--navy));
  pointer-events: none;
}

.comparison-table {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.85rem;
  text-align: center;
}

.comparison-table th,
.comparison-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
}

.comparison-table th {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gray-400);
  padding-bottom: 16px;
}

.comparison-table td:first-child,
.comparison-table th:first-child {
  text-align: left;
  color: var(--cream);
  font-weight: 500;
}

.comparison-table td {
  color: var(--gray-400);
}

.comparison-table .highlight-col {
  background: rgba(201, 168, 76, 0.06);
  color: var(--white);
  font-weight: 600;
}

.comparison-table th.highlight-col {
  color: var(--gold);
  font-size: 0.8rem;
}

.comparison-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

.comparison-table .check {
  color: var(--gold);
  font-weight: 700;
  font-size: 1rem;
}

.comparison-table .cross {
  color: var(--gray-500);
  font-size: 0.9rem;
}

/* --- About / Bio --- */
.bio-card {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}

.bio-card img {
  flex-shrink: 0;
  width: 180px;
  height: 180px;
  border-radius: 12px;
  object-fit: cover;
  border: 2px solid var(--border);
}

.bio-card p {
  color: var(--gray-300);
  margin-bottom: 12px;
}

/* --- Career / Roles --- */
.roles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.role-item {
  padding: 20px;
  background: var(--navy-light);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.section-dark .role-item {
  background: var(--navy);
}

.role-item h3 {
  color: var(--gold);
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.role-item p {
  color: var(--gray-300);
  font-size: 0.85rem;
}

/* --- Contact --- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.contact-method {
  display: block;
  padding: 24px;
  background: var(--navy-light);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color 0.2s;
  text-decoration: none;
}

.contact-method:hover { border-color: var(--gold); }

.contact-method h3 {
  color: var(--white);
  margin-bottom: 4px;
  font-size: 1.1rem;
}

.contact-method p {
  color: var(--gray-300);
  font-size: 0.9rem;
  margin: 0;
}

/* --- Consultation Card --- */
.consultation-card {
  background: var(--navy-light);
  border: 1px solid var(--gold);
  border-radius: 12px;
  padding: 36px;
  margin-bottom: 32px;
  text-align: center;
}

.consultation-card h3 {
  margin-bottom: 8px;
}

.consultation-card p {
  color: var(--gray-300);
  margin-bottom: 20px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* --- CTA Banner --- */
.cta-banner {
  text-align: center;
  padding: 64px 0;
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.08), rgba(201, 168, 76, 0.02));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.cta-banner h2 { margin-bottom: 12px; }
.cta-banner p {
  color: var(--gray-300);
  margin-bottom: 28px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Footer --- */
.footer {
  padding: 60px 0 32px;
  border-top: 1px solid var(--border-light);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 48px;
  margin-bottom: 40px;
}

.footer-brand strong {
  color: var(--white);
  font-family: var(--font-serif);
  font-size: 1.2rem;
}

.footer-brand p {
  color: var(--gray-400);
  font-size: 0.85rem;
  margin-top: 12px;
  max-width: 280px;
  line-height: 1.6;
}

.footer-col h4 {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 16px;
}

.footer-col ul {
  list-style: none;
}

.footer-col li {
  margin-bottom: 8px;
}

.footer-col a {
  color: var(--gray-400);
  font-size: 0.85rem;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--gold); }

.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
  text-align: center;
  color: var(--gray-500);
  font-size: 0.8rem;
}

/* --- Page Header (inner pages) --- */
.page-header {
  padding: 140px 0 48px;
  text-align: center;
}

.page-header h1 { margin-bottom: 12px; }
.page-header p {
  color: var(--gray-300);
  max-width: 560px;
  margin: 0 auto;
}

/* ============================================
   Visual Enhancements
   ============================================ */

/* --- Animations --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes subtleFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --- Scroll Reveal --- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* --- Hero Backgrounds --- */
.hero {
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

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

/* Homepage hero — network nodes */
/* v2: CSS-only hero — heather (issuer) + gold (recognizer) glows on navy.
   Replaces the green fingerprint webp that fought the brand palette. */
.hero-home::before {
  background:
    radial-gradient(ellipse 55% 42% at 28% 18%, rgba(183, 148, 230, 0.12), transparent 70%),
    radial-gradient(ellipse 60% 48% at 78% 80%, rgba(201, 168, 76, 0.10), transparent 70%),
    linear-gradient(to bottom, #0a1628 0%, #0c1930 100%);
}

/* SkyeGate hero — golden gate */
.hero-skyegate::before {
  background:
    linear-gradient(to bottom, rgba(10, 22, 40, 0.72), rgba(10, 22, 40, 0.90)),
    url('/assets/images/hero-skyegate.webp') center/cover no-repeat;
}

/* SkyeWoo hero — commerce glow */
.hero-skyewoo::before {
  background:
    linear-gradient(to bottom, rgba(10, 22, 40, 0.72), rgba(10, 22, 40, 0.90)),
    url('/assets/images/hero-skyewoo.webp') center/cover no-repeat;
}

/* AgentTalk hero — cyan agents */
.hero-agenttalk::before {
  background:
    linear-gradient(to bottom, rgba(10, 22, 40, 0.68), rgba(10, 22, 40, 0.88)),
    url('/assets/images/hero-agenttalk.webp') center/cover no-repeat;
}

/* Wallet Verification hero — wallet verification */
.hero-wallet::before {
  background:
    linear-gradient(to bottom, rgba(10, 22, 40, 0.70), rgba(10, 22, 40, 0.88)),
    url('/assets/images/hero-wallet.webp') center/cover no-repeat;
}

/* About hero — professional subtle */
.hero-about::before {
  background:
    linear-gradient(to bottom, rgba(10, 22, 40, 0.75), rgba(10, 22, 40, 0.92)),
    url('/assets/images/hero-about.webp') center/cover no-repeat;
}

/* Contact hero — reuse about image */
.hero-contact::before {
  background:
    linear-gradient(to bottom, rgba(10, 22, 40, 0.75), rgba(10, 22, 40, 0.92)),
    url('/assets/images/hero-about.webp') center/cover no-repeat;
}

.hero-skyeprofile::before {
  background:
    linear-gradient(to bottom, rgba(10, 22, 40, 0.68), rgba(10, 22, 40, 0.88)),
    url('/assets/images/skyeprofile-hero-0.webp') center/cover no-repeat;
}

/* SkyeProfile section backgrounds */
.section-bg-profile {
  position: relative;
  overflow: hidden;
}

.section-bg-profile > * {
  position: relative;
  z-index: 1;
}

.section-bg-profile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.section-bg-profile-1::after {
  background:
    linear-gradient(to bottom, rgba(10, 22, 40, 0.88), rgba(10, 22, 40, 0.94)),
    url('/assets/images/skyeprofile-hero-1.webp') center/cover no-repeat;
}

.section-bg-profile-2::after {
  background:
    linear-gradient(to bottom, rgba(10, 22, 40, 0.86), rgba(10, 22, 40, 0.93)),
    url('/assets/images/skyeprofile-hero-2.webp') center/cover no-repeat;
}

.section-bg-profile-3::after {
  background:
    linear-gradient(to bottom, rgba(10, 22, 40, 0.85), rgba(10, 22, 40, 0.92)),
    url('/assets/images/skyeprofile-hero-3.webp') center/cover no-repeat;
}

/* --- Enhanced Card Shadows --- */
.card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(201, 168, 76, 0.15);
}

.step:hover,
.step-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: all 0.2s;
}

.pricing-card:hover {
  border-color: var(--gold);
  box-shadow: 0 8px 32px rgba(201, 168, 76, 0.12);
}

.pricing-card.featured {
  box-shadow: 0 0 40px rgba(201, 168, 76, 0.08);
}

/* --- Enhanced CTA Banner --- */
.cta-banner {
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(201, 168, 76, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

/* --- Enhanced Trust Bar --- */
.trust-bar {
  position: relative;
}

.trust-item strong {
  text-shadow: 0 0 24px rgba(201, 168, 76, 0.3);
}

/* --- Section Accent Backgrounds --- */
.section-glow-gold {
  position: relative;
  overflow: hidden;
}

.section-glow-gold::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(201, 168, 76, 0.04) 0%, transparent 70%);
  pointer-events: none;
}

.section-glow-cyan {
  position: relative;
  overflow: hidden;
}

.section-glow-cyan::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(0, 212, 255, 0.03) 0%, transparent 70%);
  pointer-events: none;
}

/* --- Enhanced Nav Glow on Scroll --- */
.nav {
  transition: box-shadow 0.3s, border-color 0.3s;
}

.nav.scrolled {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

/* --- Contact Method Glow --- */
.contact-method:hover {
  box-shadow: 0 8px 24px rgba(201, 168, 76, 0.1);
}

/* --- Bio Card Enhancement --- */
.bio-card img {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* --- Consultation Card Glow --- */
.consultation-card {
  box-shadow: 0 0 40px rgba(201, 168, 76, 0.06);
}

/* --- AgentTalk Pricing 3-col --- */
.pricing-grid-agenttalk {
  grid-template-columns: repeat(3, 1fr);
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 1024px) {
  h1 { font-size: 2.6rem; }
  h2 { font-size: 1.8rem; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .trust-bar { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root {
    --section-pad: 56px 0;
    --nav-height: 64px;
  }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; }
  h3 { font-size: 1.2rem; }

  .nav .container {
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .nav-links { display: none; }
  .hamburger { display: flex; flex-shrink: 0; }

  .comparison-table-wrap::after { display: block; }

  .comparison-table {
    font-size: 0.78rem;
  }

  .comparison-table th,
  .comparison-table td {
    padding: 10px 12px;
    white-space: nowrap;
  }

  .comparison-table td:first-child,
  .comparison-table th:first-child {
    position: sticky;
    left: 0;
    background: var(--navy);
    z-index: 1;
  }

  .comparison-table .highlight-col {
    min-width: 80px;
  }

  .hero { padding: 120px 0 56px; }
  .hero-ctas { flex-direction: column; align-items: center; }

  .card-grid,
  .card-grid-2, .card-grid-3 {
    grid-template-columns: 1fr;
  }

  .steps { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }

  .two-col {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .trust-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .bio-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .contact-grid { grid-template-columns: 1fr; }
  .roles-grid { grid-template-columns: 1fr; }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  pre {
    font-size: 0.72rem;
    padding: 14px;
    word-break: break-word;
  }

  .section, .section-dark {
    overflow-x: hidden;
  }

  .page-header {
    padding: 100px 0 36px;
  }

  .page-header h1 {
    font-size: 1.8rem;
  }

  .cta-banner {
    padding: 48px 0;
  }

  .pricing-grid-agenttalk {
    grid-template-columns: 1fr;
    max-width: 400px;
  }

  .share-bar {
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.4rem; }

  .container { padding: 0 16px; }

  .trust-bar { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }

  .btn-primary, .btn-outline { width: 100%; justify-content: center; }

  .hero { padding: 100px 0 40px; }

  .hero p { font-size: 1rem; }

  .nav-logo span { font-size: 1.1rem; }
  .nav-logo img { height: 36px; width: 36px; }

  pre { font-size: 0.68rem; padding: 12px; }

  .footer-bottom { font-size: 0.72rem; }
}

/* ============================================
   Warm Clubhouse — light theme (2026-10-07)
   For the community and merchant pages. Developer pages stay dark.
   Opt in with <body class="theme-light">. The token swap below lets
   existing markup written against the dark tokens read correctly on
   paper; .band-dark puts a section back on navy.
   ============================================ */
:root {
  --paper: #f7f3ec;
  --paper-deep: #efe8dc;
  --ink: #14213a;
  --ink-soft: #46516a;
  --ink-mute: #5f6880;           /* small print: 5.0:1 on paper (WCAG AA) */
  --font-accent: 'Instrument Serif', Georgia, 'Times New Roman', serif;
}

.theme-light {
  --white: var(--ink);          /* headings */
  --cream: var(--ink);          /* body text, outline buttons */
  --gray-200: #2b3650;
  --gray-300: var(--ink-soft);  /* paragraphs */
  --gray-400: var(--ink-mute);
  --gray-500: #8a8f9c;
  --navy-light: #ffffff;        /* cards and .section-dark become white */
  --border: rgba(20, 33, 58, 0.12);
  --border-light: rgba(20, 33, 58, 0.08);
  --gold: #7f6219;              /* gold text that reads on paper: 5.2:1 (WCAG AA) */
  --gold-hover: #6b5214;
  background: var(--paper);
  color: var(--ink);
}
.theme-light .btn-primary,
.theme-light .nav-links .nav-cta,
.theme-light .mobile-nav .nav-cta { background: #c9a84c; color: var(--navy); }
.theme-light .btn-primary:hover { background: #d4b85e; }
.theme-light .btn-outline { border-color: rgba(20, 33, 58, 0.25); }
.theme-light .btn-outline:hover { border-color: var(--ink); color: var(--ink); }
.theme-light .section-dark .card { background: var(--paper); }
.theme-light .card:hover { box-shadow: 0 10px 30px rgba(20, 33, 58, 0.08); }

/* Nav on paper */
.theme-light .nav { background: rgba(247, 243, 236, 0.92); }
.theme-light .nav.scrolled { box-shadow: 0 4px 24px rgba(20, 33, 58, 0.08); }
.theme-light .nav-dropdown { background: #fffdf9; box-shadow: 0 16px 44px rgba(20, 33, 58, 0.14); }
.theme-light .nav-dropdown a:hover,
.theme-light .nav-dropdown a.active { background: rgba(201, 168, 76, 0.14); }
.theme-light .mobile-nav { background: var(--paper); }
.theme-light .footer { background: var(--paper-deep); }

/* Accent word in a headline: "Recognized <em class="accent">everywhere</em>." */
.accent, h1 em, h2 em {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.theme-light .accent, .theme-light h1 em, .theme-light h2 em { color: #9a6fd6; }

/* A section that stays navy inside a light page */
.theme-light .band-dark {
  --white: #ffffff;
  --cream: #f5f2ed;
  --gray-200: #cbd5e1;
  --gray-300: #94a3b8;
  --gray-400: #64748b;
  --navy-light: #111d32;
  --border: rgba(201, 168, 76, 0.15);
  --border-light: rgba(255, 255, 255, 0.08);
  --gold: #c9a84c;
  --gold-hover: #d4b85e;
  background: var(--navy);
  color: var(--cream);
}
.theme-light .band-dark .btn-outline { border-color: rgba(255, 255, 255, 0.25); }
.theme-light .band-dark .btn-outline:hover { border-color: #c9a84c; color: #c9a84c; }
.theme-light .band-dark h1 em, .theme-light .band-dark h2 em { color: var(--accent-bothy); }

/* Announcement bar above the fixed nav */
.announce {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1001;
  height: 38px; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 16px; background: var(--ink); color: #f5f2ed;
  font-size: 0.86rem; text-decoration: none; white-space: nowrap; overflow: hidden;
}
.announce:hover { color: #fff; }
.announce strong { color: var(--accent-bothy); font-weight: 600; }
.announce .announce-go { color: #c9a84c; font-weight: 600; }
.has-announce .nav { top: 38px; }
.has-announce .mobile-nav { top: calc(var(--nav-height) + 38px); }
@media (max-width: 560px) {
  .announce { font-size: 0.78rem; }
  .announce .announce-long { display: none; }
}

/* --- Light theme: shared components (2026-10-07) --- */
/* Hero photos/overlays were tuned for navy. On paper, every hero gets the
   same warm wash instead; the homepage builds its own hero. */
.theme-light .hero::before,
.theme-light .hero-home::before,
.theme-light .hero-skyegate::before,
.theme-light .hero-skyewoo::before,
.theme-light .hero-wallet::before,
.theme-light .hero-about::before,
.theme-light .hero-contact::before {
  background:
    radial-gradient(ellipse 45% 55% at 85% 20%, rgba(183, 148, 230, 0.16), transparent 70%),
    radial-gradient(ellipse 40% 50% at 10% 90%, rgba(201, 168, 76, 0.14), transparent 70%),
    var(--paper);
}
.theme-light .section-bg-profile::after { background: none !important; }
.theme-light .section-glow-gold::before,
.theme-light .section-glow-cyan::before,
.theme-light .cta-banner::before { background: none; }

/* Alternate paper / white like the homepage */
.theme-light .section-dark { background: #fffdf9; }
.theme-light .section-dark .step,
.theme-light .section-dark .pricing-card,
.theme-light .section-dark .role-item,
.theme-light .section-dark .card { background: var(--paper); }
.theme-light .step,
.theme-light .step-card,
.theme-light .pricing-card,
.theme-light .contact-method,
.theme-light .consultation-card,
.theme-light .role-item,
.theme-light .card { border-color: var(--border-light); border-radius: 18px; }
.theme-light .step:hover,
.theme-light .step-card:hover,
.theme-light .pricing-card:hover { box-shadow: 0 12px 30px rgba(20, 33, 58, 0.08); }
.theme-light .step-number { font-family: var(--font-display); }
.theme-light .cta-banner { background: var(--paper-deep); border-color: var(--border-light); }

/* Text that sat on navy */
.theme-light .comparison-table td:first-child,
.theme-light .comparison-table th:first-child { background: var(--paper); }
.theme-light .comparison-table-wrap::after { background: linear-gradient(to right, transparent, var(--paper)); }
.theme-light .comparison-table tbody tr:hover { background: rgba(20, 33, 58, 0.03); }
.theme-light .trust-item strong { text-shadow: none; }
.theme-light .share-btn:hover { color: var(--ink); }
.theme-light .hero-image,
.theme-light .bio-card img { box-shadow: 0 16px 40px rgba(20, 33, 58, 0.14); }

/* Code stays dark: it reads as code */
.theme-light pre { background: #14213a; color: #cbd5e1; border-color: transparent; }
.theme-light pre code { color: inherit; }
.theme-light p code, .theme-light li code { background: rgba(201, 168, 76, 0.14); color: #6f5718; }

/* Headlines: drop the glow, add warmth */
.theme-light .hero-tagline { font-family: var(--font-accent); font-size: 1.3rem; color: #9a6fd6; }

/* Accent colors deepened so they read as TEXT on paper. Pages that alias
   them locally (--heather, --emerald) are re-pointed here too. */
.theme-light {
  --gold: #8a6d1f;
  --gold-hover: #6f5718;
  --accent-bothy: #7a52b8;
  --heather: #7a52b8;
  --heather-hover: #6a44a6;
  --heather-dark: #5b3a94;
  --accent-gate: #8a6d1f;
  --accent-woo: #a3650a;
  --accent-recognition: #4a7f37;
  --accent-agenttalk: #0a7f9e;
  --cyan: #0a7f9e;
  --accent-profile: #0f8a63;
  --emerald: #0f8a63;
  --accent-access: #3f6f9e;
}
/* Buttons filled with an accent: white text on the deeper fill */
.theme-light .btn-primary[style*="background: var(--accent-"],
.theme-light .btn-primary[style*="background:var(--accent-"],
.theme-light a[style*="background: var(--heather)"],
.theme-light a[style*="background:var(--heather)"],
.theme-light a[style*="background: var(--accent-bothy)"] { color: #fff !important; }
/* Plain gold buttons keep the bright brand gold with navy text */
.theme-light .btn-primary:not([style*="background"]) { background: #c9a84c; color: var(--navy); }
/* Hard-coded bright gold labels */
.theme-light [style*="color: #c9a84c"], .theme-light [style*="color:#c9a84c"] { color: var(--gold) !important; }
.theme-light .tk .tk-live { color: #2f7a4f; }
/* Footer links on the deeper paper */
.theme-light .footer-bottom a { color: var(--gold); }
.theme-light .band-dark { --heather: #b794e6; --accent-bothy: #b794e6; --accent-gate: #c9a84c; }
/* A CTA band that asked to stay navy wins over the light CTA default */
.theme-light .cta-banner.band-dark { background: var(--navy); border-color: transparent; }
.theme-light .band-dark h2 em { color: #c9a84c; }

/* ============================================
   Light theme: one system (2026-10-07, from the design review)
   One button, one label, one card radius, no code font outside code.
   ============================================ */
.theme-light { --font-mono: var(--font-sans); --r-card: 16px; }
.theme-light pre, .theme-light code, .theme-light kbd { font-family: 'DM Mono', 'Fira Code', monospace; }

/* Buttons: gold pill primary, white pill secondary. Per-page inline colours lose. */
.theme-light .btn-primary,
.theme-light .btn-outline {
  min-height: 48px; padding: 0 24px !important; border-radius: 999px !important;
  font-family: var(--font-sans); font-size: 0.95rem !important; font-weight: 600 !important;
  letter-spacing: -0.005em; justify-content: center;
}
.theme-light .btn-primary { background: #c9a84c !important; color: #14213a !important; border: 0 !important; box-shadow: 0 1px 2px rgba(20,33,58,.08); }
.theme-light .btn-primary:hover { background: #d4b85e !important; color: #14213a !important; }
.theme-light .btn-outline { background: #fff !important; color: #14213a !important; border: 1px solid rgba(20,33,58,.16) !important; box-shadow: 0 1px 2px rgba(20,33,58,.06); }
.theme-light .btn-outline:hover { border-color: #14213a !important; }
.theme-light .btn-sm { min-height: 40px; padding: 0 18px !important; font-size: 0.88rem !important; }
.theme-light .band-dark .btn-outline { background: transparent !important; color: #f5f2ed !important; border-color: rgba(247,243,236,.4) !important; box-shadow: none; }

/* Labels: one style, everywhere */
.theme-light .section-label {
  font-family: var(--font-sans) !important; font-size: 0.75rem !important; font-weight: 600 !important;
  letter-spacing: 0.1em !important; text-transform: uppercase; color: var(--gold) !important;
}
.theme-light .band-dark .section-label { color: #c9a84c !important; }

/* Cards: one radius, quiet shadow, no lift unless it's a link */
.theme-light .card, .theme-light .step, .theme-light .step-card, .theme-light .pricing-card,
.theme-light .role-item, .theme-light .contact-method, .theme-light .consultation-card { border-radius: var(--r-card) !important; box-shadow: 0 1px 2px rgba(20,33,58,.04); }
.theme-light div.card:hover, .theme-light .step:hover, .theme-light .step-card:hover { transform: none; border-color: var(--border-light); box-shadow: 0 1px 2px rgba(20,33,58,.04), 0 8px 24px rgba(20,33,58,.06); }
.theme-light .step-number { background: rgba(201,168,76,.18); color: #8a6d1f; font-weight: 700; }

/* Hero wash fades out instead of stopping at a hard edge */
.theme-light .hero::before { -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }

/* Status pills read as tags, not code */
.theme-light .tag-pill, .theme-light .tk-live, .theme-light .int-tag { font-family: var(--font-sans) !important; letter-spacing: 0.04em; }

/* Nav (2026-10-07): four items plus a quiet Developers link */
.nav-links .nav-dev { color: var(--gray-400); font-size: 0.85rem; }
.nav-links .nav-dev::before { content: ''; display: inline-block; width: 1px; height: 14px; background: var(--border-light); margin-right: 26px; vertical-align: -2px; }
@media (max-width: 1100px) and (min-width: 769px) { .nav-links { display: flex; gap: 20px; } .hamburger { display: none; } }
@media (max-width: 960px) { .nav-links { display: none; } .hamburger { display: flex; flex-shrink: 0; } }

/* ============================================
   Product mockups (2026-10-07): device frames any page can reuse.
   .mock-phone / .mock-tablet / .mock-laptop / .mock-browser wrap a
   .mock-screen that holds either HTML or a real screenshot <img>.
   ============================================ */
.mock-stage { position: relative; display: flex; justify-content: center; align-items: center; padding: 40px 20px; border-radius: 28px;
  background: radial-gradient(ellipse 60% 60% at 70% 30%, rgba(183,148,230,.22), transparent 70%), radial-gradient(ellipse 55% 55% at 25% 85%, rgba(201,168,76,.20), transparent 70%), #fbf7f0; }
.mock-phone { position: relative; width: 280px; aspect-ratio: 9 / 18.6; background: #0d1526; border-radius: 42px; padding: 11px;
  box-shadow: 0 40px 80px rgba(20,33,58,.26), 0 0 0 2px #2a3550 inset; flex-shrink: 0; }
.mock-phone::before { content: ''; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 88px; height: 24px; border-radius: 14px; background: #0d1526; z-index: 3; }
.mock-phone .mock-screen { width: 100%; height: 100%; border-radius: 32px; overflow: hidden; position: relative; }
.mock-tablet { position: relative; width: min(100%, 520px); aspect-ratio: 4 / 3; background: #1b2336; border-radius: 30px; padding: 16px;
  box-shadow: 0 40px 80px rgba(20,33,58,.26), 0 0 0 2px #2f3a55 inset; }
.mock-tablet .mock-screen { width: 100%; height: 100%; border-radius: 16px; overflow: hidden; position: relative; }
.mock-laptop { position: relative; width: min(100%, 720px); }
.mock-laptop .mock-lid { background: #1b2336; border-radius: 18px 18px 6px 6px; padding: 14px 14px 18px; box-shadow: 0 30px 70px rgba(20,33,58,.24); }
.mock-laptop .mock-screen { aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: #fff; position: relative; }
.mock-laptop .mock-base { height: 16px; margin: 0 -6%; background: linear-gradient(#d9dde5, #b8bfcc); border-radius: 0 0 16px 16px; box-shadow: 0 14px 30px rgba(20,33,58,.18); }
.mock-browser { width: min(100%, 860px); border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid rgba(20,33,58,.1);
  box-shadow: 0 2px 4px rgba(20,33,58,.04), 0 30px 60px rgba(20,33,58,.14); }
.mock-browser .mock-bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; background: #f3efe8; border-bottom: 1px solid rgba(20,33,58,.08); }
.mock-browser .mock-bar i { width: 11px; height: 11px; border-radius: 50%; background: #e0d8cb; }
.mock-browser .mock-bar span { margin-left: 12px; flex: 1; max-width: 340px; height: 22px; border-radius: 6px; background: #fff; font-size: 11px; color: #6b7488; display: flex; align-items: center; padding: 0 10px; font-family: var(--font-sans); }
.mock-screen > img, .mock-browser > img { display: block; width: 100%; height: auto; }
.mock-screen > img.cover { height: 100%; object-fit: cover; object-position: top; }
.mock-float { position: absolute; background: #fff; border-radius: 16px; padding: 12px 16px; box-shadow: 0 18px 40px rgba(20,33,58,.16);
  display: flex; gap: 12px; align-items: center; font-size: .86rem; color: #14213a; white-space: nowrap; z-index: 4; }
.mock-float b { display: block; font-family: var(--font-display); font-weight: 650; }
.mock-float small { color: #6b7488; font-size: .74rem; }
@media (max-width: 600px) { .mock-float { display: none; } .mock-stage { padding: 28px 12px; } }

/* Split hero: copy left, visual right (light pages) */
.hero-split { padding: 150px 0 80px; text-align: left; }
.hero-split .container { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero-split h1 { margin-left: 0; font-size: 3.4rem; line-height: 1.05; }
.hero-split p { margin-left: 0; }
.hero-split .hero-ctas { justify-content: flex-start; }
.hero-split .hero-tagline { margin-left: 0; }
@media (max-width: 960px) { .hero-split .container { grid-template-columns: 1fr; text-align: center; } .hero-split .hero-ctas { justify-content: center; } .hero-split h1, .hero-split p, .hero-split .hero-tagline { margin-left: auto; margin-right: auto; } .hero-split h1 { font-size: 2.6rem; } }

/* Full-bleed photo band with one line over it */
.photo-band { position: relative; min-height: 420px; display: flex; align-items: flex-end; overflow: hidden; }
.photo-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14,22,38,.72) 0%, rgba(14,22,38,.15) 55%, transparent 80%); }
.photo-band .container { position: relative; z-index: 1; padding-bottom: 56px; }
.photo-band h2 { color: #fff !important; font-size: 2.6rem; max-width: 720px; margin: 0; }
.photo-band h2 em { color: #e9d6a0 !important; }
.photo-band p { color: rgba(255,255,255,.85) !important; max-width: 560px; margin: 12px 0 0; font-size: 1.1rem; }
@media (max-width: 600px) { .photo-band { min-height: 320px; } .photo-band h2 { font-size: 1.8rem; } }

/* Tinted panel that frames a real screenshot so old captures sit well */
.shot-panel { border-radius: 24px; padding: 36px; background: linear-gradient(135deg, rgba(183,148,230,.16), rgba(201,168,76,.14)); }
.shot-panel img { border-radius: 12px; box-shadow: 0 2px 4px rgba(20,33,58,.05), 0 24px 50px rgba(20,33,58,.16); border: 1px solid rgba(20,33,58,.08); }
@media (max-width: 600px) { .shot-panel { padding: 16px; border-radius: 18px; } }

/* ============================================
   Kit for inner pages (2026-10-07). Snippets + preview: tools/snippets/kit.html
   ============================================ */
/* K1 split hero: visual side */
.k-photo { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 3.3; box-shadow: 0 30px 70px rgba(20,33,58,.18); transform: rotate(-1.5deg); }
.k-photo > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.k-visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 420px; }
.k-visual .mock-float { animation: chipFloat 6s ease-in-out infinite; }
@keyframes chipFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { .k-visual .mock-float { animation: none; } }
@media (max-width: 960px) { .k-visual { min-height: 0; } .k-photo { max-height: 380px; aspect-ratio: 16 / 10; transform: none; } }

/* K3 framed screenshot rising out of a tinted panel */
.k-shot { position: relative; overflow: hidden; border-radius: 28px; padding: 44px 44px 0; background: linear-gradient(160deg, #efe7fa, #f7f3ec); }
.k-shot.gold { background: linear-gradient(160deg, #f6ecd2, #f7f3ec); }
.k-shot::after { content: ''; position: absolute; width: 280px; height: 280px; border-radius: 50%; right: -80px; top: -90px; background: rgba(201,168,76,.18); }
.k-shot .mock-browser { position: relative; z-index: 1; margin: 0 auto -1px; border-radius: 14px 14px 0 0; box-shadow: 0 -2px 30px rgba(20,33,58,.10); }
.k-shot .mock-browser img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; }
@media (max-width: 600px) { .k-shot { padding: 20px 16px 0; border-radius: 20px; } }

/* K5 photo-backed CTA card */
.k-cta { position: relative; overflow: hidden; border-radius: 28px; padding: 76px 56px; text-align: center; color: #fff; }
.k-cta > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.k-cta::before { content: ''; position: absolute; inset: 0; background: rgba(14,22,38,.62); }
.k-cta > *:not(img) { position: relative; z-index: 1; }
.k-cta h2 { color: #fff !important; font-size: 2.5rem; margin-bottom: 12px; }
.k-cta h2 em { color: #e9d6a0 !important; }
.k-cta p { color: rgba(255,255,255,.88) !important; max-width: 560px; margin: 0 auto 26px; }
.k-cta .btn-outline { background: transparent !important; color: #fff !important; border-color: rgba(255,255,255,.5) !important; }
@media (max-width: 600px) { .k-cta { padding: 52px 22px; } .k-cta h2 { font-size: 1.8rem; } }

/* K6 alternating feature rows */
.k-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 48px 0; }
.k-row.flip > :first-child { order: 2; }
.k-row .k-kicker { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; display: block; }
.k-row h3 { font-size: 1.7rem; margin-bottom: 10px; }
.k-row p { font-size: 1.05rem; max-width: 30em; }
.k-step { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; align-items: center; justify-content: center; background: rgba(201,168,76,.2); color: #8a6d1f; font-weight: 700; margin-bottom: 14px; font-family: var(--font-display); }
@media (max-width: 860px) { .k-row { grid-template-columns: 1fr; gap: 28px; padding: 32px 0; text-align: center; } .k-row.flip > :first-child { order: 0; } .k-row p { margin-left: auto; margin-right: auto; } }

/* K7 tinted section with soft shapes */
.k-tint { position: relative; overflow: hidden; background: #f3ece0; }
.k-tint::before, .k-tint::after { content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%; filter: blur(60px); pointer-events: none; }
.k-tint::before { background: rgba(183,148,230,.20); left: -120px; top: -100px; }
.k-tint::after { background: rgba(201,168,76,.18); right: -120px; bottom: -120px; }
.k-tint > .container { position: relative; z-index: 1; }
.k-ico { width: 44px; height: 44px; border-radius: 12px; background: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(20,33,58,.06); margin-bottom: 14px; }
.k-ico img { width: 28px; height: 28px; }

/* ---------- Mockup screens ---------- */
/* M1 Bothy Pass (phone): same look as the homepage */
.bp { background: #0a1628; color: #f5f2ed; height: 100%; font-family: var(--font-sans); text-align: left; }
.bp-head { display: flex; align-items: center; gap: 9px; padding: 44px 14px 10px; border-bottom: 1px solid rgba(255,255,255,0.07); background: #0e1b31; }
.bp-head img { width: 30px; height: 30px; border-radius: 8px; }
.bp-name { font-family: Georgia, 'Times New Roman', serif; font-size: 0.98rem; color: #fff; line-height: 1.1; }
.bp-tag { font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: #b794e6; font-weight: 600; }
.bp-menu { margin-left: auto; width: 26px; height: 26px; border: 1px solid rgba(255,255,255,0.14); border-radius: 7px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2.5px; }
.bp-menu i { display: block; width: 10px; height: 1.5px; background: #cbd5e1; }
.bp-card { margin: 12px 12px 0; background: #16243d; border: 1px solid rgba(183,148,230,0.35); border-radius: 14px; padding: 12px; }
.bp-org { display: flex; align-items: center; gap: 10px; }
.bp-crest { width: 36px; height: 36px; border-radius: 10px; background: #0a1628; border: 1px solid rgba(201,168,76,0.4); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bp-org b { display: block; white-space: nowrap; font-size: 0.86rem; color: #fff; font-weight: 600; }
.bp-org small { white-space: nowrap; font-size: 0.66rem; color: #94a3b8; }
.bp-live { margin-left: auto; font-size: 0.6rem; font-weight: 600; color: #7ee0a6; background: rgba(126,224,166,0.12); padding: 3px 8px; border-radius: 20px; }
.bp-qr { margin: 10px 12px 0; background: #111d32; border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 12px; text-align: center; }
.bp-qr-box { width: 124px; height: 124px; margin: 0 auto; background: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.bp-qr-cap { margin-top: 8px; font-size: 0.74rem; color: #fff; font-weight: 600; }
.bp-qr-sub { font-size: 0.64rem; color: #94a3b8; display: inline-flex; align-items: center; gap: 5px; }
.bp-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }
.bp-sect { margin: 12px 14px 6px; font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: #b794e6; font-weight: 600; }
.bp-row { margin: 0 12px 6px; background: #16243d; border-radius: 11px; padding: 8px 10px; display: flex; gap: 9px; align-items: center; }
.bp-row b { display: block; font-size: 0.74rem; color: #fff; font-weight: 600; }
.bp-row small { font-size: 0.64rem; color: #94a3b8; }
.bp-ico { width: 24px; height: 24px; border-radius: 7px; background: #0a1628; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; }

/* M2 Bothy Scanner result (tablet), wording from /bothy/scanner/ */
.sc { background: #0a1628; color: #f5f2ed; height: 100%; padding: 18px; display: flex; flex-direction: column; font-family: var(--font-sans); text-align: center; }
.sc-top { display: flex; justify-content: space-between; align-items: center; font-size: .72rem; color: #94a3b8; margin-bottom: 14px; text-align: left; }
.sc-top b { color: #fff; font-weight: 600; font-size: .8rem; }
.sc-res { flex: 1; border-radius: 16px; border: 1px solid rgba(92,201,138,.5); background: rgba(92,201,138,.08); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 16px; }
.sc-ok { width: 40px; height: 40px; border-radius: 50%; background: #22c55e; color: #0a1628; display: flex; align-items: center; justify-content: center; font-weight: 800; margin-bottom: 8px; }
.sc-big { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; color: #5cc98a; letter-spacing: -0.02em; line-height: 1; }
.sc-title { font-weight: 600; font-size: 1rem; margin-top: 8px; color: #fff; }
.sc-sub { font-size: .8rem; color: #94a3b8; margin-top: 4px; }
.sc-btn { margin-top: 14px; border-radius: 10px; background: #b794e6; color: #0a1628; font-weight: 700; font-size: .82rem; padding: 10px; }

/* M3 Bothy dashboard (laptop), labels from /bothy/dashboard/ */
.db { display: grid; grid-template-columns: 26% 1fr; height: 100%; font-family: var(--font-sans); background: #0a1628; color: #f5f2ed; text-align: left; font-size: 11px; }
.db-rail { background: #0e1b31; padding: 14px 10px; display: grid; align-content: start; gap: 4px; border-right: 1px solid rgba(255,255,255,.06); }
.db-rail b { font-family: var(--font-display); font-size: 12px; color: #fff; margin-bottom: 8px; display: flex; gap: 6px; align-items: center; }
.db-rail span { padding: 6px 8px; border-radius: 6px; color: #94a3b8; }
.db-rail span.on { background: rgba(183,148,230,.16); color: #fff; }
.db-main { padding: 14px 16px; display: grid; align-content: start; gap: 10px; }
.db-h { font-family: var(--font-display); font-weight: 650; font-size: 14px; color: #fff; display: flex; justify-content: space-between; align-items: center; }
.db-h small { font-family: var(--font-sans); font-weight: 400; color: #94a3b8; font-size: 10px; }
.db-inv { background: #111d32; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: 8px; display: flex; gap: 6px; align-items: center; }
.db-inv label { color: #94a3b8; font-size: 9.5px; display: block; margin-bottom: 3px; }
.db-inv .f { flex: 1; } .db-inv .in { background: #0a1628; border: 1px solid rgba(255,255,255,.1); border-radius: 5px; padding: 5px 7px; color: #64748b; }
.db-inv .go { background: #c9a84c; color: #0a1628; font-weight: 700; border-radius: 5px; padding: 6px 9px; align-self: flex-end; }
.db-list { background: #111d32; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; }
.db-list div { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; border-bottom: 1px solid rgba(255,255,255,.05); color: #cbd5e1; }
.db-list div:last-child { border-bottom: 0; }
.db-pill { font-size: 9px; font-weight: 600; padding: 2px 7px; border-radius: 20px; }
.db-pill.live { color: #7ee0a6; background: rgba(126,224,166,.12); } .db-pill.inv { color: #e0b96a; background: rgba(224,185,106,.12); }

/* M4 a members-only page (browser), from the SkyeGate lounge captures */
.lg { background: #fff; color: #1e1e1e; padding: 26px 30px 30px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; text-align: left; }
.lg-nav { display: flex; justify-content: space-between; font-size: 11px; color: #444; margin-bottom: 22px; }
.lg-nav b { font-weight: 600; color: #111; }
.lg h4 { font-size: 26px; font-weight: 500; color: #111; margin-bottom: 6px; font-family: inherit; letter-spacing: -0.01em; }
.lg p { font-size: 12px; color: #555; margin-bottom: 14px; line-height: 1.5; }
.lg-door { border: 1px solid #e6e3f0; background: #f8f6fd; border-radius: 10px; padding: 18px; text-align: center; font-size: 12px; color: #333; }
.lg-door span { display: inline-block; margin-top: 10px; background: #6d4bd0; color: #fff; font-weight: 600; border-radius: 6px; padding: 7px 14px; }
.lg-open { border-left: 3px solid #c9a84c; background: #fbf7ec; border-radius: 6px; padding: 14px 16px; font-size: 12px; color: #333; }
.lg-open b { display: block; font-size: 15px; color: #111; margin-bottom: 4px; }

/* M6 invite email (phone), wording from api/bothy/_lib/invite-send.js */
.em { background: #fff; height: 100%; color: #0a1628; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; text-align: left; }
.em-top { padding: 46px 16px 10px; border-bottom: 1px solid #eee; }
.em-subj { font-weight: 700; font-size: 14px; line-height: 1.25; }
.em-from { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: 11px; color: #666; }
.em-from i { width: 26px; height: 26px; border-radius: 50%; background: #0a1628; color: #c9a84c; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 700; font-size: 11px; }
.em-body { padding: 18px 16px; text-align: center; }
.em-logo { width: 50px; height: 50px; border-radius: 12px; background: #0a1628; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; }
.em-body h5 { font-size: 16px; margin-bottom: 8px; font-family: inherit; color: #0a1628; }
.em-body p { font-size: 11.5px; color: #444; line-height: 1.5; text-align: left; margin-bottom: 14px; }
.em-btn { display: inline-block; background: #9d6bd4; color: #fff; font-weight: 600; font-size: 12px; border-radius: 9px; padding: 10px 18px; }
.em-note { margin-top: 14px; background: #f6f1fc; border-radius: 9px; padding: 10px; font-size: 10.5px; color: #333; text-align: left; line-height: 1.45; }
.mock-laptop .mock-screen.db, .mock-screen.db { background: #0a1628; }
/* Scanner screen fits small tablets; links on photo CTAs stay readable */
.sc { padding: 14px; }
.sc-top { margin-bottom: 10px; }
.sc-res { padding: 10px; min-height: 0; }
.sc-ok { width: 32px; height: 32px; margin-bottom: 6px; }
.sc-big { font-size: clamp(1.5rem, 4.2vw, 2.2rem); }
.sc-title { font-size: .92rem; margin-top: 6px; }
.sc-sub { font-size: .74rem; }
.sc-btn { margin-top: 10px; padding: 8px; font-size: .78rem; }
.k-cta a:not(.btn-primary):not(.btn-outline) { color: #f1dfa6 !important; text-decoration: underline; text-underline-offset: 3px; }
.k-cta p, .k-cta small { text-shadow: 0 1px 12px rgba(0,0,0,.35); }
/* Grid children never grow past the screen because a mockup inside is wide */
.k-row > *, .hero-split .container > *, .k-visual, .mock-stage { min-width: 0; }
.mock-stage { max-width: 100%; }
.mock-laptop, .mock-tablet, .mock-browser { max-width: 100%; }
.theme-light figure { margin-left: 0; margin-right: 0; max-width: 100%; }

/* Founder bubble (2026-10-07) */
.founder-bubble { display: flex; gap: 18px; align-items: flex-start; max-width: 760px; margin: 40px auto 0 !important; background: #fff; border: 1px solid var(--border-light); border-radius: 22px; padding: 24px 26px; box-shadow: 0 12px 34px rgba(20,33,58,.08); position: relative; text-align: left; }
.founder-bubble::before { content: ''; position: absolute; left: 44px; top: -9px; width: 18px; height: 18px; background: #fff; border-left: 1px solid var(--border-light); border-top: 1px solid var(--border-light); transform: rotate(45deg); }
.founder-bubble img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid #e9d6a0; }
.founder-bubble blockquote { font-family: var(--font-accent); font-style: italic; font-size: 1.35rem; line-height: 1.4; color: var(--ink); margin: 0 0 8px; }
.founder-bubble figcaption { font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--gold); }
@media (max-width: 600px) { .founder-bubble { flex-direction: column; gap: 12px; padding: 20px; } .founder-bubble blockquote { font-size: 1.15rem; } }

/* One header and footer everywhere (2026-10-07): dark developer pages get the
   same cream nav, mobile menu and footer as the light pages. */
body:not(.theme-light) .nav,
body:not(.theme-light) .mobile-nav,
body:not(.theme-light) .footer {
  --white: #14213a; --cream: #14213a; --gray-200: #2b3650; --gray-300: #46516a; --gray-400: #6b7488; --gray-500: #8a8f9c;
  --navy-light: #ffffff; --border: rgba(20,33,58,.12); --border-light: rgba(20,33,58,.08); --gold: #8a6d1f; --gold-hover: #6f5718;
  --font-mono: var(--font-sans);
  color: #14213a;
}
body:not(.theme-light) .nav { background: rgba(247,243,236,.94); border-bottom: 1px solid rgba(20,33,58,.08); }
body:not(.theme-light) .nav.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.25); }
body:not(.theme-light) .nav-dropdown { background: #fffdf9; box-shadow: 0 16px 44px rgba(20,33,58,.18); border-color: rgba(20,33,58,.1); }
body:not(.theme-light) .nav-dropdown a:hover { background: rgba(201,168,76,.14); }
body:not(.theme-light) .nav-links .nav-cta, body:not(.theme-light) .mobile-nav .nav-cta { background: #c9a84c; color: #14213a; }
body:not(.theme-light) .mobile-nav { background: #f7f3ec; }
body:not(.theme-light) .hamburger span { background: #14213a; }
body:not(.theme-light) .footer { background: #efe8dc; border-top: 0; }
body:not(.theme-light) .footer-bottom a { color: #8a6d1f; }
/* Developers dropdown: quieter than the main menus, divider before it */
.nav-links .nav-dev-group::before { content: ''; display: inline-block; width: 1px; height: 14px; background: rgba(20,33,58,.12); margin-right: 26px; }
.nav-links .nav-dev-group .nav-group-toggle { color: var(--gray-400); font-size: .85rem; }
.nav-links .nav-dev-group .nav-dropdown { left: auto; right: -20px; transform: none; }
.nav-links button.nav-dev::before { content: none; }

.mock-note { text-align: center; font-size: .8rem; color: var(--ink-mute, #6b7488); margin: 12px auto 0; max-width: 34em; }