/* Zephyria Redesigned — Full Visual Treatment */

:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-serif: 'Palatino Linotype', Palatino, 'URW Palladio L', Georgia, serif;
  
  --bg: #F4F7FB;
  --bg-rgb: 244, 247, 251;   /* rgba(var(--bg),a) is invalid: --bg is a hex literal */
  --bg-2: #FFFFFF;
  --bg-3: #EAEFF6;
  --ink: #17202E;
  --ink-1: #17202E;   /* alias: referenced by the form rules */
  --ink-2: #5A6678;
  --ink-3: #67707F;   /* was #8A95A5 = 3.03:1 on white; now 5.00:1 */
  --line: #DCE3EC;
  --line-2: #F0F3F8;
  
  --wind: #237693;
  --wind-text: #1F6A85;
  --wind-rgb: 35, 118, 147;
  --wind-soft: rgba(35, 118, 147, 0.08);
  
  --zeus: #6D5AE6;
  --zeus-rgb: 109, 90, 230;
  --zeus-soft: rgba(109, 90, 230, 0.08);
  --zeus-glow: rgba(109, 90, 230, 0.15);
  
  --iris: #C54983;
  --iris-rgb: 197, 73, 131;
  --iris-soft: rgba(197, 73, 131, 0.08);
  --iris-glow: rgba(197, 73, 131, 0.15);
  
  --amelia: #A26B1B;
  --amelia-rgb: 162, 107, 27;
  --amelia-soft: rgba(162, 107, 27, 0.08);
  --amelia-glow: rgba(162, 107, 27, 0.15);
  
  --live: #059669;
  --built: #2563EB;
  --design: #D97706;
  --alert-soft: rgba(211, 47, 47, 0.10);
  --alert-text: #B3261E;
  /* TEXT variants. The badge label is 11px — normal text under WCAG, so it needs
     4.5:1, and the brand values gave 3.77 (live) and 3.19 (design) on white. The
     dots and borders below still use the brand colours; only the label moved.
     Measured: 5.48 / 5.17 / 5.10 on #FFFFFF. */
  --live-text: #047857;
  --built-text: #2460E4;   /* measured on the badge's own 6% tint over --bg, not on #FFF: #2563EB was 4.44:1 there */
  --design-text: #A15806;   /* same correction: #A65B06 was 4.45:1 on the tint */
  /* Brand colours as HEADING TEXT. The raw brand values pass on white by a hair
     (4.51 / 4.93 / 4.51) and fail outright on the dark background, and .feature-item
     h4 is 17px/600 — normal text, so 4.5:1 applies, not the large-text 3:1. These
     are the live site's proven --*-text palette. */
  --iris-text: #A8306A;
  --zeus-text: #5847C4;
  --amelia-text: #8A5A16;
  
  --gradient-hero: linear-gradient(135deg, #6D5AE6 0%, #C54983 30%, #A26B1B 60%, #237693 100%);
  --gradient-nav: linear-gradient(90deg, #6D5AE6, #C54983, #A26B1B, #059669, #2563EB);
  
  --shadow-sm: 0 1px 2px rgba(23, 32, 46, 0.05), 0 2px 8px rgba(23, 32, 46, 0.04);
  --shadow-md: 0 1px 2px rgba(23, 32, 46, 0.06), 0 4px 16px rgba(23, 32, 46, 0.06);
  --shadow-lg: 0 1px 2px rgba(23, 32, 46, 0.07), 0 8px 32px rgba(23, 32, 46, 0.08);
  --shadow-xl: 0 1px 2px rgba(23, 32, 46, 0.08), 0 16px 48px rgba(23, 32, 46, 0.1);
  --shadow-glow-wind: 0 4px 24px rgba(var(--wind-rgb), 0.15);
  --shadow-glow-iris: 0 4px 24px rgba(var(--iris-rgb), 0.15);
  --shadow-glow-zeus: 0 4px 24px rgba(var(--zeus-rgb), 0.15);
  --shadow-glow-amelia: 0 4px 24px rgba(var(--amelia-rgb), 0.15);
  
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  color-scheme: light;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 150ms;
  --transition-base: 250ms;
}

:root[data-theme="dark"] {
  /* Tells the UA to paint checkboxes, selects and scrollbars dark. Without
     it the consent boxes rendered as solid white squares in dark theme. */
  color-scheme: dark;
  --bg: #0E1420;
  --bg-rgb: 14, 20, 32;
  --bg-2: #161F2E;
  --bg-3: #1B2636;
  --ink: #E9EEF5;
  --ink-1: #E9EEF5;
  --ink-2: #93A0B4;
  --ink-3: #9AA7BA;   /* was 3.78:1 on --bg-2; now 6.78:1 */
  --line: #263245;
  --line-2: #1A2332;
  /* The accent tokens were NEVER redefined for dark, so --built rendered at
     3.20:1 and every feature-card heading failed. Measured on #161F2E:
     6.92 / 8.60 / 9.91 / 6.78. */
  --built: #7EA6FF;
  --wind-text: #6FC9E2;
  --iris-text: #EF87B4;
  --zeus-text: #9D8DF7;
  --amelia-text: #E4A84E;
  --live-text: #34D399;
  --built-text: #7EA6FF;
  --design-text: #FBBF24;
  --alert-soft: rgba(239, 154, 154, 0.14);
  --alert-text: #F2A6A0;
  --wind-soft: rgba(111, 201, 226, 0.08);
  --zeus-soft: rgba(157, 141, 247, 0.08);
  --iris-soft: rgba(239, 135, 180, 0.08);
  --amelia-soft: rgba(228, 168, 78, 0.08);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.2);
  --shadow-md: 0 1px 2px rgba(0,0,0,0.35), 0 4px 16px rgba(0,0,0,0.25);
  --shadow-lg: 0 1px 2px rgba(0,0,0,0.4), 0 8px 32px rgba(0,0,0,0.3);
  --shadow-xl: 0 1px 2px rgba(0,0,0,0.4), 0 16px 48px rgba(0,0,0,0.35);
}


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

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

body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; transition: color var(--transition-fast) ease; }

::selection { background: rgba(var(--wind-rgb), 0.2); color: var(--ink); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.2;
  text-wrap: balance;
}

h1 { font-size: clamp(48px, 7vw, 80px); letter-spacing: -0.02em; }
h2 { font-size: clamp(32px, 4.5vw, 56px); letter-spacing: -0.015em; }
h3 { font-size: clamp(24px, 3vw, 36px); letter-spacing: -0.01em; }
h4 { font-size: clamp(20px, 2.5vw, 28px); }

p { margin: 0; max-width: 62ch; }

.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.italic-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 26px);
  color: var(--ink-2);
}

.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 720px; margin: 0 auto; padding: 0 24px; }

/* Navigation */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(var(--bg-rgb), 0.85);
  backdrop-filter: blur(12px) saturate(180%);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; height: 64px; max-width: 1200px; margin: 0 auto;
}

.nav-brand {
  font-family: var(--font-serif);
  font-size: 22px; font-style: italic; font-weight: 500;
  color: var(--ink); letter-spacing: -0.01em;
}

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

.nav-links a {
  font-size: 14px; font-weight: 500; color: var(--ink-2);
  position: relative; padding: 4px 0;
}

.nav-links a::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 0; height: 2px; background: var(--wind);
  transition: width var(--transition-base) var(--ease-out);
}

.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }

.nav-actions { display: flex; align-items: center; gap: 12px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  padding: 10px 20px; font-size: 14px; font-weight: 600; font-family: var(--font-sans);
  border: none; border-radius: var(--radius-md); cursor: pointer;
  transition: all var(--transition-base) var(--ease-out); white-space: nowrap; line-height: 1;
}

.btn-primary {
  background: var(--wind); color: #FFFFFF; box-shadow: var(--shadow-glow-wind);
}
.btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 6px 28px rgba(var(--wind-rgb), 0.2); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: transparent; color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.btn-secondary:hover { background: var(--bg-2); border-color: var(--ink-3); transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn-iris { background: var(--iris); color: #FFF; box-shadow: var(--shadow-glow-iris); }
.btn-iris:hover { box-shadow: 0 6px 28px rgba(var(--iris-rgb), 0.25); }
.btn-zeus { background: var(--zeus); color: #FFF; box-shadow: var(--shadow-glow-zeus); }
.btn-zeus:hover { box-shadow: 0 6px 28px rgba(var(--zeus-rgb), 0.25); }
.btn-amelia { background: var(--amelia); color: #FFF; box-shadow: var(--shadow-glow-amelia); }
.btn-amelia:hover { box-shadow: 0 6px 28px rgba(var(--amelia-rgb), 0.25); }

.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 1px solid var(--line);
  border-radius: var(--radius-full); background: var(--bg-2);
  cursor: pointer; transition: all var(--transition-base) ease; color: var(--ink-2);
}
.theme-toggle:hover { border-color: var(--ink-3); color: var(--ink); transform: rotate(15deg); }

.gradient-divider { height: 2px; background: var(--gradient-nav); border: none; opacity: 0.6; }
.section-divider { height: 1px; background: var(--line); border: none; margin: var(--space-2xl) 0; }
.product-divider { height: 1px; margin: var(--space-2xl) 0; border: none; opacity: 0.4; }
.product-divider.iris { background: var(--iris); }
.product-divider.zeus { background: var(--zeus); }
.product-divider.amelia { background: var(--amelia); }

/* Hero */
.hero {
  position: relative; padding: var(--space-3xl) 0 var(--space-2xl);
  text-align: center; overflow: hidden;
}

.hero-bg-orb {
  position: absolute; border-radius: 50%; filter: blur(100px);
  opacity: 0.08; pointer-events: none; animation: orbFloat 20s ease-in-out infinite;
}
.hero-bg-orb-1 { width: 600px; height: 600px; background: var(--zeus); top: -200px; left: -100px; }
.hero-bg-orb-2 { width: 500px; height: 500px; background: var(--iris); top: -150px; right: -100px; animation-delay: -7s; }
.hero-bg-orb-3 { width: 400px; height: 400px; background: var(--amelia); top: 100px; left: 50%; transform: translateX(-50%); animation-delay: -14s; }

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.05); }
  66% { transform: translate(-20px, 15px) scale(0.95); }
}

.hero-title {
  font-size: clamp(56px, 9vw, 100px);
  font-family: var(--font-serif); font-style: italic;
  letter-spacing: -0.03em; margin-bottom: var(--space-md);
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.hero-tagline {
  font-size: clamp(20px, 2.5vw, 28px);
  font-family: var(--font-serif); font-style: italic;
  color: var(--ink-2); margin-bottom: var(--space-lg);
}

.hero-description {
  font-size: 18px; color: var(--ink-2); margin: 0 auto;
  max-width: 58ch; margin-bottom: var(--space-xl);
}

.hero-actions {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-md); flex-wrap: wrap;
}

/* Product Cards */
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); margin: var(--space-2xl) 0; }

.product-card {
  position: relative; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-xl); padding: var(--space-xl);
  transition: all var(--transition-base) var(--ease-out); overflow: hidden;
}

.product-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0; opacity: 0.7;
}
.product-card.iris::before { background: var(--iris); }
.product-card.zeus::before { background: var(--zeus); }
.product-card.amelia::before { background: var(--amelia); }

.product-card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-xl);
  border-color: var(--ink-3);
}
.product-card.iris:hover { box-shadow: var(--shadow-xl), 0 8px 40px rgba(var(--iris-rgb), 0.1); }
.product-card.zeus:hover { box-shadow: var(--shadow-xl), 0 8px 40px rgba(var(--zeus-rgb), 0.1); }
.product-card.amelia:hover { box-shadow: var(--shadow-xl), 0 8px 40px rgba(var(--amelia-rgb), 0.1); }

.product-card-icon {
  width: 48px; height: 48px; border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; margin-bottom: var(--space-lg);
}
.product-card.iris .product-card-icon { background: var(--iris-soft); color: var(--iris-text); }
.product-card.zeus .product-card-icon { background: var(--zeus-soft); color: var(--zeus-text); }
.product-card.amelia .product-card-icon { background: var(--amelia-soft); color: var(--amelia-text); }

.product-card h3 { font-size: 28px; margin-bottom: var(--space-sm); }
.product-card .product-tagline {
  font-family: var(--font-serif); font-style: italic;
  color: var(--ink-2); font-size: 16px; margin-bottom: var(--space-md);
}
.product-card p { font-size: 15px; color: var(--ink-2); margin-bottom: var(--space-md); }

.product-card .card-cta {
  font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: var(--space-sm);
  transition: gap var(--transition-fast) ease;
}
.product-card:hover .card-cta { gap: var(--space-md); }
.product-card.iris .card-cta { color: var(--iris-text); }
.product-card.zeus .card-cta { color: var(--zeus-text); }
.product-card.amelia .card-cta { color: var(--amelia-text); }

.product-list li::before {
  background-color: var(--zeus-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236D5AE6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}
.product-list.iris li::before {
  background-color: var(--iris-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23C54983' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}
.product-list.zeus li::before {
  background-color: var(--zeus-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236D5AE6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}
.product-list.amelia li::before {
  background-color: var(--amelia-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A26B1B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Status Badges */
.status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: var(--radius-full); border: 1px solid;
}
.status-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }

.status-badge.live {
  color: var(--live-text); border-color: rgba(5, 150, 105, 0.3); background: rgba(5, 150, 105, 0.06);
}
.status-badge.live::before {
  background: var(--live); box-shadow: 0 0 8px rgba(5, 150, 105, 0.6);
  animation: pulse 2s ease-in-out infinite;
}
.status-badge.built {
  color: var(--built-text); border-color: rgba(37, 99, 235, 0.3); background: rgba(37, 99, 235, 0.06);
}
.status-badge.built::before { background: var(--built); }
.status-badge.design {
  color: var(--design-text); border-color: rgba(217, 119, 6, 0.3); background: rgba(217, 119, 6, 0.06);
}
.status-badge.design::before { background: var(--design); }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.3); }
}

.status-legend {
  display: flex; align-items: center; gap: var(--space-lg);
  padding: var(--space-lg); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  margin: var(--space-xl) 0; flex-wrap: wrap;
}

/* Feature Blocks */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-xl); margin: var(--space-xl) 0; }

.feature-item {
  padding: var(--space-lg); border: 1px solid var(--line);
  border-radius: var(--radius-lg); background: var(--bg-2);
  transition: all var(--transition-base) var(--ease-out);
}
.feature-item:hover {
  border-color: var(--ink-3); box-shadow: var(--shadow-md); transform: translateY(-2px);
}
.feature-item h4 {
  font-family: var(--font-sans); font-size: 17px; font-weight: 600;
  margin-bottom: var(--space-sm); display: flex; align-items: center; gap: var(--space-sm);
}
.feature-item p { font-size: 15px; color: var(--ink-2); max-width: none; }
.feature-status { margin-left: auto; flex-shrink: 0; }

.feature-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-md); margin: var(--space-lg) 0; }
.feature-list li { display: flex; align-items: flex-start; gap: var(--space-md); font-size: 16px; color: var(--ink); }
.feature-list li::before {
  content: ''; flex-shrink: 0; width: 20px; height: 20px; border-radius: var(--radius-full);
  background-color: var(--zeus-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236D5AE6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-position: center; background-repeat: no-repeat; margin-top: 3px;
}
.feature-list.iris li::before { background-color: var(--iris-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23C54983' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); }
.feature-list.zeus li::before { background-color: var(--zeus-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236D5AE6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); }
.feature-list.amelia li::before { background-color: var(--amelia-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A26B1B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); }

/* Pricing Banner */
.pricing-banner {
  position: relative; padding: var(--space-xl) var(--space-2xl);
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-xl); margin: var(--space-2xl) 0; overflow: hidden;
}
.pricing-banner::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gradient-nav);
}
.pricing-banner h3 { font-size: clamp(28px, 4vw, 40px); margin-bottom: var(--space-md); }
.pricing-banner .price-highlight {
  display: inline-flex; align-items: baseline; gap: var(--space-sm);
  font-size: 48px; font-weight: 700; color: var(--wind-text); margin: var(--space-lg) 0;
}
.pricing-banner .price-currency { font-size: 24px; font-weight: 600; vertical-align: super; }
.pricing-banner .price-period { font-size: 18px; font-weight: 400; color: var(--ink-3); }
.pricing-banner .price-features {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-md);
  margin: var(--space-lg) 0;
}
.pricing-banner .price-features li {
  display: flex; align-items: center; gap: var(--space-sm);
  font-size: 15px; color: var(--ink-2); padding: 8px 16px;
  background: var(--bg); border-radius: var(--radius-full);
  border: 1px solid var(--line);
}
.pricing-banner .price-features li::before { content: '✓'; color: var(--live); font-weight: 700; font-size: 14px; }

/* Infrastructure Grid */
.infra-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); margin: var(--space-xl) 0; }

.infra-card {
  padding: var(--space-xl); background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-xl); transition: all var(--transition-base) var(--ease-out);
  position: relative; overflow: hidden;
}
.infra-card::after {
  content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%;
  background: var(--wind); opacity: 0; transition: opacity var(--transition-base) ease;
}
.infra-card:hover::after { opacity: 1; }
.infra-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.infra-card h4 {
  font-size: 18px; font-weight: 600; font-family: var(--font-sans);
  margin-bottom: var(--space-sm); display: flex; align-items: center; gap: var(--space-sm);
}
.infra-card .infra-icon { font-size: 22px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--wind-soft); border-radius: var(--radius-sm); }
.infra-card p { font-size: 15px; color: var(--ink-2); max-width: none; }

/* Code Block */
.code-block {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-lg);
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 14px; line-height: 1.7; overflow-x: auto;
  margin: var(--space-lg) 0; position: relative;
}
.code-block::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 32px;
  background: var(--bg-3); border-bottom: 1px solid var(--line);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.code-block .code-dots { position: absolute; top: 10px; left: 12px; display: flex; gap: 6px; z-index: 1; }
.code-block .code-dots span { width: 10px; height: 10px; border-radius: 50%; }
.code-block .code-dots span:nth-child(1) { background: #FF5F57; }
.code-block .code-dots span:nth-child(2) { background: #FEBC2E; }
.code-block .code-dots span:nth-child(3) { background: #28C840; }
.code-block code { display: block; padding-top: 28px; color: var(--ink); }
.code-block .code-prompt { color: var(--wind-text); }
.code-block .code-output { color: var(--ink-3); }
.code-block .code-success { color: var(--live-text); }

/* Conversation Mockup */
.conversation-mockup {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-xl); padding: var(--space-xl);
  margin: var(--space-xl) 0; max-width: 700px;
}
.conversation-mockup .message { margin-bottom: var(--space-md); display: flex; gap: var(--space-md); }
.conversation-mockup .message.user { flex-direction: row-reverse; }
.conversation-mockup .message .bubble { max-width: 75%; padding: 12px 16px; border-radius: var(--radius-lg); font-size: 15px; line-height: 1.5; }
.conversation-mockup .message:not(.user) .bubble { background: var(--bg); border: 1px solid var(--line); color: var(--ink); border-bottom-left-radius: 4px; }
.conversation-mockup .message.user .bubble { background: var(--wind); color: #FFF; border-bottom-right-radius: 4px; }
.conversation-mockup .message .sender { font-size: 12px; font-weight: 600; color: var(--ink-3); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.05em; }

/* Inbox Mockup */
.inbox-mockup {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-xl); overflow: hidden; margin: var(--space-xl) 0; max-width: 700px;
}
.inbox-mockup .inbox-header {
  padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--space-md); background: var(--bg-3);
}
.inbox-mockup .inbox-item {
  padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--line-2);
  display: flex; gap: var(--space-md); transition: background var(--transition-fast) ease;
}
.inbox-mockup .inbox-item:hover { background: var(--bg); }
.inbox-mockup .inbox-item .sender-avatar {
  width: 36px; height: 36px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; flex-shrink: 0;
}
.inbox-mockup .inbox-item .inbox-content { flex: 1; min-width: 0; }
.inbox-mockup .inbox-item .inbox-subject { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.inbox-mockup .inbox-item .inbox-preview { font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Breadcrumb */
.breadcrumb { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: 14px; color: var(--ink-2); padding: var(--space-md) 0; }
.breadcrumb a { color: var(--ink-2); }
.breadcrumb a:hover { color: var(--ink); }

/* Page Hero */
.page-hero { padding: var(--space-2xl) 0 var(--space-xl); }
.page-hero .product-name { font-size: clamp(56px, 8vw, 96px); letter-spacing: -0.03em; margin-bottom: var(--space-sm); }
.page-headline { font-size: clamp(28px, 4vw, 40px); font-family: var(--font-sans); font-weight: 600; line-height: 1.3; margin-bottom: var(--space-md); }
.page-description { font-size: 17px; color: var(--ink-2); margin-bottom: var(--space-xl); }

/* Section Headings */
.section-heading { margin: var(--space-2xl) 0 var(--space-lg); }
.section-heading h3 { font-size: clamp(24px, 3.5vw, 36px); margin-bottom: var(--space-sm); }
.section-heading p { color: var(--ink-2); font-size: 16px; }

/* CTA Section */
.cta-section { text-align: center; padding: var(--space-3xl) 0; }

/* Footer */
.footer { border-top: 1px solid var(--line); padding: var(--space-xl) 0 var(--space-lg); margin-top: var(--space-xl); background: var(--bg-2); }
.footer-inner { display: grid; grid-template-columns: 2fr repeat(2, 1fr); gap: var(--space-xl); }
.footer-brand { font-family: var(--font-serif); font-style: italic; font-size: 20px; color: var(--ink); margin-bottom: var(--space-md); }
.footer-tagline { font-size: 14px; color: var(--ink-2); max-width: 36ch; }
.footer-links h5 { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--space-md); }
.footer-links ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.footer-links a { font-size: 14px; color: var(--ink-2); transition: color var(--transition-fast) ease; }
.footer-links a:hover { color: var(--ink); }
.footer-bottom { max-width: 1080px; margin: var(--space-lg) auto 0; padding-top: var(--space-md); border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--ink-3); }

/* Skip Link */
.skip-link {
  position: absolute; top: -100%; left: 16px; padding: 12px 24px;
  background: var(--wind); color: #FFF; font-size: 14px; font-weight: 600;
  border-radius: var(--radius-md); z-index: 200;
}
.skip-link:focus { top: 16px; }

/* Focus */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--wind); outline-offset: 2px; }

/* Scroll Animations — ADDITIVE, never subtractive.
   This was `.animate-on-scroll { opacity: 0 }`, so every animated block was
   INVISIBLE until JavaScript revealed it: 32 blocks on /iris, 16 on /amelia, 6 on
   the homepage. With JS blocked, a script error before the observer runs, or a
   crawler that does not execute JS, most of the site rendered blank. Content must
   not depend on a script to exist.
   The script now sets `js-anim` on <html>, which OPTS IN to the hidden start
   state. No script, no hiding. */
.animate-on-scroll { transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
html.js-anim .animate-on-scroll { opacity: 0; transform: translateY(20px); }
html.js-anim .animate-on-scroll.visible { opacity: 1; transform: translateY(0); }

/* Responsive */
@media (max-width: 768px) {
  /* The product links used to be display:none here, with no hamburger and no
     replacement - so on every phone the only navigation was the wordmark and
     the CTA, and Iris/Zeus/Amelia were unreachable without scrolling to the
     footer. They move to a second row instead: no JS, no menu to open, and it
     still fits at 320px. */
  .nav-inner { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 8px; }
  .nav-brand { flex: 1 1 auto; }
  .nav-actions { flex: 0 0 auto; }
  .nav-links {
    order: 3; flex: 1 0 100%; justify-content: center;
    gap: 22px; padding-top: 8px; margin-top: 6px;
    border-top: 1px solid var(--line-2);
  }
  .nav-links a { padding: 6px 0; }
  .products-grid { grid-template-columns: 1fr; }
  .infra-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: var(--space-xl); }
  .footer-bottom { flex-direction: column; gap: var(--space-sm); text-align: center; }
  .conversation-mockup .message .bubble { max-width: 85%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .animate-on-scroll { opacity: 1; transform: none; }
}

/* ---------- Beta form ----------
   Every class the beta page uses was referenced in the markup and defined
   nowhere, so the form rendered as raw browser defaults inside an otherwise
   designed page: unstyled inputs, an inert "toggle group" that looked like two
   words, and no visible status region. Written here in the page's own tokens. */
.form-group { display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.form-label { display: block; font-size: 14px; font-weight: 600; color: var(--ink-1); }
.form-input, .form-textarea {
  width: 100%; padding: 11px 13px; font: inherit; font-size: 15px;
  color: var(--ink-1); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  transition: border-color var(--transition-base) ease, box-shadow var(--transition-base) ease;
}
.form-textarea { min-height: 110px; resize: vertical; }
.form-input:focus, .form-textarea:focus {
  outline: none; border-color: var(--wind);
  box-shadow: 0 0 0 3px rgba(var(--wind-rgb), 0.22);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--ink-3); }

.checkbox-group { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.checkbox-group label { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink-2); }
.checkbox-group input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--wind); }

/* A real segmented control, not two bare words. */
.toggle-group { display: inline-flex; padding: 3px; gap: 3px; background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius-md); }
.toggle-btn {
  padding: 8px 16px; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--ink-2); background: none; border: 0;
  border-radius: calc(var(--radius-md) - 3px); cursor: pointer;
  transition: background var(--transition-base) ease, color var(--transition-base) ease;
}
.toggle-btn:hover { color: var(--ink-1); }
.toggle-btn.active { background: var(--bg-2); color: var(--ink-1); box-shadow: var(--shadow-sm); }
.toggle-btn:focus-visible { outline: 2px solid var(--wind); outline-offset: 2px; }

/* Replaces alert(). Must be visible without colour alone, hence the border. */
.form-status {
  padding: 12px 14px; margin-bottom: var(--space-lg); font-size: 14.5px;
  border-radius: var(--radius-md); border: 1px solid var(--line);
  background: var(--bg-2); color: var(--ink-2);
}
.form-status.ok  { border-left: 3px solid var(--live); }
.form-status.err { border-left: 3px solid var(--design); }
.form-status:focus-visible { outline: 2px solid var(--wind); outline-offset: 2px; }

/* ---------- Brand colour on headings ----------
   .color-iris / .color-zeus / .color-amelia / .color-design appear 60 times across
   the product H1s and feature headings and were defined NOWHERE, so every one of
   them rendered in default ink — the product colour-coding the design depends on
   simply did not appear. They point at the text-safe variants, not the raw brand
   tokens, because a 17px/600 heading is normal text under WCAG. */
.color-iris   { color: var(--iris-text); }
.color-zeus   { color: var(--zeus-text); }
.color-amelia { color: var(--amelia-text); }
.color-design { color: var(--design-text); }

/* ---------- "Where it stands today" ----------
   Restored from the live site. It is the page's ledger — what runs, what is only
   built, what is merely designed — so it is styled to read as a statement of
   record rather than as another marketing card: flat, bordered, no shadow, and a
   product-coloured rule down the left. */
.today-panel {
  margin: var(--space-2xl) 0;
  padding: var(--space-xl);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-3);
  border-radius: var(--radius-lg);
}
.today-panel .eyebrow { display: block; margin-bottom: var(--space-md); }
.today-panel p { max-width: 70ch; color: var(--ink-2); font-size: 16px; }
.today-panel strong { color: var(--ink); font-weight: 600; }
.today-iris   { border-left-color: var(--iris); }
.today-zeus   { border-left-color: var(--zeus); }
.today-amelia { border-left-color: var(--amelia); }

/* ==========================================================================
   Contract components
   --------------------------------------------------------------------------
   These are the pieces the BACKEND and app.js depend on by class or id. The
   design tree had no counterpart for any of them, so they are written here in
   its visual language rather than dropped. Renaming anything in this block
   changes behaviour, not just appearance - see the notes on each.
   ========================================================================== */

/* Theme toggle glyphs. The nav button carries both icons; only one shows, and
   it shows the theme that is ACTIVE. Inverted with the default: dark is now the
   starting state for everyone, so the moon is what a visitor sees first, and the
   sun appears only once they have explicitly chosen light. Keying this on
   prefers-color-scheme, as it did, would have shown a sun on a dark page for
   every visitor whose OS is set to light - which is most of them. */
.theme-toggle .sun { display: none; }
.theme-toggle .moon { display: inline; }
[data-theme="light"] .theme-toggle .sun { display: inline; }
[data-theme="light"] .theme-toggle .moon { display: none; }

/* ---- beta page shell ---- */
.beta-wrap { padding: var(--space-2xl) 0; max-width: 560px; margin: 0 auto; }
.beta-badge { margin-bottom: var(--space-lg); display: inline-flex; }
.beta-title { font-size: clamp(36px, 5vw, 52px); margin-bottom: var(--space-md); }
.beta-sub { margin-bottom: var(--space-lg); }
.beta-lede { color: var(--ink-2); margin-bottom: var(--space-xl); }
.beta-submit { width: 100%; padding: 14px 24px; font-size: 16px; justify-content: center; }
.beta-expect {
  margin-top: var(--space-2xl); padding-top: var(--space-xl);
  border-top: 1px solid var(--line);
}
.beta-expect h4 {
  font-family: var(--font-sans); font-size: 16px; font-weight: 600;
  margin-bottom: var(--space-md); color: var(--ink);
}
.price-note { color: var(--ink-3); font-size: 14px; }
.opt { color: var(--ink-3); font-weight: 400; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
@media (max-width: 560px) { .fields-2 { grid-template-columns: 1fr; } }

/* select must match .form-input, which the design tree only styled for
   input/textarea - an unstyled select next to styled inputs looks broken. */
select.form-input {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

/* ---- product checkboxes ----
   The design tree used .form-checkbox / .checkbox-label in markup but only ever
   defined .checkbox-group, so every one of these rendered unstyled. */
.form-checkbox-group { display: grid; gap: var(--space-sm); }
.form-checkbox {
  display: flex; gap: var(--space-sm); align-items: flex-start;
  padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--bg-2); cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.form-checkbox:hover { border-color: var(--ink-3); }
.form-checkbox:focus-within { border-color: var(--wind); box-shadow: 0 0 0 3px var(--wind-soft); }
.form-checkbox input { margin-top: 3px; flex: none; accent-color: var(--wind); }
.checkbox-label { display: grid; gap: 2px; font-size: 15px; }
.checkbox-label strong { font-weight: 600; }
.checkbox-label span { color: var(--ink-3); font-size: 13px; line-height: 1.5; }

/* ---- honeypot ----
   Off-screen, NOT display:none: a bot that skips hidden fields would skip this
   one too, and then it catches nothing. aria-hidden keeps it out of the
   accessibility tree so a screen reader never offers it. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- no-JS instruction ----
   Visibility is NOT handled here. The banner is wrapped in <noscript> in the
   page, which is the only mechanism that cannot be wrong: a class toggled by
   app.js would need app.js to have run, and app.js not running is exactly the
   case the banner is for. */
.draft-banner {
  border: 1px solid var(--line); border-left: 3px solid var(--design);
  background: var(--bg-3); border-radius: var(--radius-md);
  padding: 13px 16px; font-size: 14px; color: var(--ink-2);
  margin-bottom: var(--space-lg);
}
.form-note { margin-top: var(--space-lg); font-size: 13px; color: var(--ink-3); line-height: 1.6; }

/* ---- submitted state ----
   data-via is set by app.js: "backend" when the POST succeeded, "mailto" when
   it could not reach the server. The two paragraphs are mutually exclusive and
   the mail button only appears on the fallback. */
.form-success { max-width: 560px; margin: 0 auto; padding: var(--space-2xl) 0; }
.form-success h2 {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: clamp(26px, 3.6vw, 34px); margin-bottom: var(--space-md); color: var(--ink);
}
.form-success p.via-backend, .form-success p.via-mailto { color: var(--ink-2); line-height: 1.65; }
/* Default (and the backend branch): show via-backend, hide via-mailto. The
   rules are written on both p and h2 so the heading switches with the copy. */
.form-success .via-mailto { display: none; }
.form-success[data-via="mailto"] .via-backend { display: none; }
.form-success[data-via="mailto"] p.via-mailto { display: block; }
.form-success[data-via="mailto"] h2.via-mailto { display: block; }
.form-success[data-via="backend"] #beta-mailto { display: none; }
.form-success:focus { outline: none; }
.form-success:focus-visible { outline: 2px solid var(--wind); outline-offset: 4px; }
.req-details {
  border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 12px 14px; margin-top: var(--space-lg);
}
.req-details summary { cursor: pointer; font-size: 14px; color: var(--ink-3); }
.req-out {
  width: 100%; margin-top: 12px; min-height: 170px; resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
  line-height: 1.6; color: var(--ink); background: var(--bg-3);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px;
}
.btn-ghost {
  background: transparent; color: var(--ink-2); border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--ink-3); color: var(--ink); }

/* ---- /demo confirmation page ---- */
.demo-head { max-width: 640px; margin: 0 auto; padding: var(--space-2xl) 0 var(--space-lg); }
.crumb { display: inline-block; font-size: 14px; color: var(--ink-3); margin-bottom: var(--space-md); }
.demo-badge { margin-bottom: var(--space-md); display: inline-flex; }
.demo-title { font-size: clamp(32px, 4.5vw, 46px); margin-bottom: var(--space-md); }
.demo-sub { color: var(--ink-2); line-height: 1.7; }
.demo-wrap { max-width: 640px; margin: 0 auto; padding-bottom: var(--space-xl); }
.demo-panel {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--bg-2); padding: var(--space-xl); box-shadow: var(--shadow-md);
}
.demo-panel h2, .demo-next h2 {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: clamp(22px, 3vw, 28px); margin-bottom: var(--space-md); color: var(--ink);
}
.demo-lede { color: var(--ink-2); line-height: 1.7; margin-bottom: var(--space-lg); }
.iris-frame {
  display: block; width: 100%; height: 560px; border: 1px solid var(--line);
  border-radius: var(--radius-md); background: var(--bg);
}
.demo-fine { margin-top: var(--space-md); font-size: 13px; color: var(--ink-3); line-height: 1.6; }
.demo-next { border-top: 1px solid var(--line); padding-top: var(--space-xl); }
.demo-next p { color: var(--ink-2); line-height: 1.7; }

/* ---- long-form legal / prose pages ---- */
/* 24px sides, NOT 0. .prose-wrap sits on the same element as .container
   and is defined later, so `padding: X 0` overrode .container's
   `padding: 0 24px` and ran the legal text flush to both screen edges on
   every phone. */
.prose-wrap { max-width: 720px; margin: 0 auto; padding: var(--space-2xl) 24px; }
.prose h1 { font-size: clamp(34px, 4.5vw, 48px); margin-bottom: var(--space-lg); }
.prose h2 {
  font-size: clamp(20px, 2.4vw, 26px); margin: var(--space-xl) 0 var(--space-sm);
  color: var(--ink);
}
.prose p, .prose li { color: var(--ink-2); line-height: 1.75; max-width: none; }
.prose p { margin-bottom: var(--space-md); }
.prose ul { margin: 0 0 var(--space-md); padding-left: 20px; display: grid; gap: var(--space-sm); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--wind-text); text-decoration: underline; text-underline-offset: 2px; }
.prose-updated { font-size: 13px; color: var(--ink-3); margin-bottom: var(--space-xl); }

/* ---- utilities replacing inline style attributes ----
   style-src 'self' has no 'unsafe-inline', so a style= attribute is DROPPED
   in production and silently kept in preview. 71 of them shipped in the
   design tree; these are their equivalents. Brand colours here use the
   -text variants: the raw tokens are never redefined for dark and measured
   3.10-3.77:1 there. ---- */
.t-zeus { color: var(--zeus-text); }
.t-iris { color: var(--iris-text); }
.t-amelia { color: var(--amelia-text); }
.t-live { color: var(--live-text); }
.t-design { color: var(--design-text); }
.t-ink2 { color: var(--ink-2); }
.t-ink3 { color: var(--ink-3); }
.btn-lg { font-size: 16px; padding: 14px 32px; }
.mt-lg { margin-top: var(--space-lg); }
.mt-sm-inline { margin-top: var(--space-sm); display: inline-flex; }
.mt-2xl { margin-top: var(--space-2xl); }
.mr-md { margin-right: var(--space-md); }
.mb-lg-18 { margin-bottom: var(--space-lg); font-size: 18px; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; margin-bottom: var(--space-md); }
.btn-row { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; }
.center-mb-xl { text-align: center; margin-bottom: var(--space-xl); }
.lede { color: var(--ink-2); margin-bottom: var(--space-lg); }
.lede-xl { color: var(--ink-2); margin-bottom: var(--space-xl); font-size: 17px; }
.edge-design { border-left: 3px solid var(--design); }
.fs-9 { font-size: 9px; }
.meta-right { font-size: 11px; color: var(--ink-3); margin-left: auto; white-space: nowrap; }
.meta-right-sm { margin-left: auto; font-size: 10px; }
.notfound { text-align: center; padding: 120px 24px 130px; }
.pad-2xl { padding: var(--space-2xl) 0; }
.callout-card { margin-top: var(--space-xl); padding: var(--space-xl); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-xl); text-align: center; }
.note-sm { margin-top: var(--space-lg); color: var(--ink-3); font-size: 14px; }
.notfound-p { margin: 20px auto 30px; color: var(--ink-2); }
.fw-600-14 { font-weight: 600; font-size: 14px; }
.h-page { font-size: clamp(36px, 5vw, 52px); margin-bottom: var(--space-lg); }
.fs-16 { font-size: 16px; }
.serif-italic { font-family: var(--font-serif); font-style: italic; }
.note-14 { color: var(--ink-3); font-size: 14px; }
.av-zeus { background: var(--zeus-soft); color: var(--zeus-text); }
.av-iris { background: var(--iris-soft); color: var(--iris-text); }
.av-alert { background: var(--alert-soft); color: var(--alert-text); }

/* ---- status legend ---- used by /, /iris, /zeus, /amelia; previously undefined */
.legend { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; justify-content: center; }
.legend-note { font-size: 13px; color: var(--ink-3); text-align: center; margin-top: var(--space-sm); }

/* ---- mockup chips ----
   Deliberately NOT .status-badge. That class is the site's honesty vocabulary
   (LIVE / BUILT / IN DESIGN); reusing it for invented inbox state inside a
   mockup of a product badged IN DESIGN reads as a claim about what is built. */
.mock-chip {
  display: inline-flex; align-items: center; padding: 2px 7px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--bg-3); color: var(--ink-3);
}
.mock-chip-green { color: var(--live-text); border-color: rgba(5, 150, 105, 0.25); }
.mock-chip-amber { color: var(--design-text); border-color: rgba(217, 119, 6, 0.25); }

/* ---- per-page accent ----
   build.py stamps one of these on <body>. It used to stamp the CSS VALUE
   (class="var(--iris)"), which matches no selector, so the accent never
   applied on any page. */
.accent-iris   { --accent: var(--iris);   --accent-text: var(--iris-text); }
.accent-zeus   { --accent: var(--zeus);   --accent-text: var(--zeus-text); }
.accent-amelia { --accent: var(--amelia); --accent-text: var(--amelia-text); }
.accent-wind   { --accent: var(--wind);   --accent-text: var(--wind-text); }
.accent-iris   .nav-links a::after,
.accent-zeus   .nav-links a::after,
.accent-amelia .nav-links a::after,
.accent-wind   .nav-links a::after { background: var(--accent); }

/* ---- consent ----
   Three boxes rather than one combined tick, because the record we keep is
   per-document and so the agreement has to be per-document too. */
.consent {
  border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  margin-top: var(--space-xl); background: var(--bg-2);
}
.consent legend { padding: 0 var(--space-sm); }
.consent-item {
  display: flex; gap: var(--space-sm); align-items: flex-start;
  padding: 9px 0; cursor: pointer; font-size: 14px; line-height: 1.6;
  color: var(--ink-2);
}
.consent-item + .consent-item { border-top: 1px solid var(--line-2); }
.consent-item input { margin-top: 4px; flex: none; accent-color: var(--wind); }
.consent-item a { color: var(--wind-text); text-decoration: underline; text-underline-offset: 2px; }
.consent-item:focus-within { color: var(--ink); }
.consent-error {
  margin-top: var(--space-md); padding: 11px 14px; font-size: 14px;
  border: 1px solid var(--alert-text); border-left-width: 3px;
  border-radius: var(--radius-md); background: var(--alert-soft);
  color: var(--alert-text);
}
.consent-error:focus { outline: 2px solid var(--wind); outline-offset: 2px; }

/* Hero lead: the plain-language answer to "what is this", above the tagline.
   Sits between the wordmark and the poetry so a visitor gets the product
   before the metaphor. */
.hero-lead {
  font-size: clamp(18px, 2.1vw, 22px); font-weight: 500; line-height: 1.5;
  color: var(--ink); max-width: 34ch; margin: 0 auto var(--space-md);
  text-wrap: balance;
}

/* ---- centred blocks ----
   `p { margin: 0; max-width: 62ch }` caps every paragraph, so inside a
   text-align:center container the TEXT centres within its 62ch box while the
   BOX stays hard left. The heading and the button centred; the sentence between
   them did not, by up to ~236px. Four separate findings, one cause.

   Applied to the containers that actually centre, rather than globally: a blanket
   `margin: 0 auto` on p would also re-centre left-aligned body copy. */
.hero :is(p, .eyebrow),
.cta-section :is(p, .price-note),
.callout-card p,
.notfound p,
.center-mb-xl { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   Cosmetic pass — 2026-08-15 visual review
   ========================================================================== */

/* Filled vs outline buttons differed by 2px wherever they sat side by side:
   .btn sets `border: none` and .btn-secondary adds a 1px border, so the outline
   variant was 2px taller. A transparent border on the base keeps the box model
   identical and costs nothing. */
.btn { border: 1px solid transparent; min-height: 44px; }
.btn-secondary { border-color: var(--line); }

/* Tap targets. Buttons now clear 44px above; these are the text links that sat
   at ~20px, which is under any reasonable thumb. Padding rather than height so
   the visual rhythm does not change. */
.footer-links ul a { display: inline-block; padding: 4px 0; }
/* 44px targets are for touch. Restoring them behind pointer:coarse keeps
   phones tappable without spacing a desktop footer out to ~50px per row. */
@media (pointer: coarse) {
  .footer-links ul a { padding: 11px 0; }
  .footer-links ul { gap: 2px; }
}
.card-cta { display: inline-block; padding: 6px 0; }
.crumb { padding: 6px 0; }

/* Equal-height card rows had the badge and the CTA floating at whatever height
   the copy ended, so neither lined up across a row. Push them to the bottom. */
.product-card { display: flex; flex-direction: column; }
/* The BADGE takes the auto margin, not the CTA. Pushing only the CTA down left
   the badge floating at whatever height the copy happened to end, so the badges
   still failed to line up across a row. Taking it here moves badge and CTA down
   together as one block. */
.product-card .status-badge { margin-top: auto; align-self: flex-start; }
.product-card > .mt-lg { margin-top: var(--space-md); }

/* 10-11px is below what most people can comfortably read, and these carry the
   status vocabulary the whole site leans on. */
.status-badge { font-size: 12px; }
.eyebrow { font-size: 12px; }
.mock-chip, .fs-9 { font-size: 11px; }

/* The confirmation page put the back-link and the REQUEST RECEIVED badge on one
   line with nothing to separate them, so they collided at narrow widths. */
.demo-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
.demo-head .crumb { margin-bottom: 0; }

/* The demo panel kept 40px of padding at every width, squeezing the embedded
   Iris frame to ~190px on a small phone. */
@media (max-width: 520px) {
  .demo-panel { padding: var(--space-lg) var(--space-md); }
  .iris-frame { height: 460px; }
}

/* Feature cards were clipped at the right edge on very narrow screens. */
@media (max-width: 360px) {
  .container { padding: 0 16px; }
  .prose-wrap { padding-left: 16px; padding-right: 16px; }
}

/* Amelia's mockup chips stretched into tall empty boxes as the subject line
   wrapped, because they were stretched by the flex row they sit in. */
.mock-chip { align-self: flex-start; white-space: nowrap; }

/* ==========================================================================
   DARK BY DEFAULT
   --------------------------------------------------------------------------
   Every visitor gets the dark theme, whatever their OS is set to. The toggle
   still works and still persists, so anyone who prefers light can choose it and
   keep it - which matters, because overriding an OS preference takes a real
   choice away from people who set light mode for a reason.

   Written as an override layer rather than by rewriting :root, so both palettes
   remain exactly the ones measured for contrast: dark wins over the original
   :root by source order, and an explicit [data-theme="light"] wins over that by
   specificity.

   The prefers-color-scheme block above is now redundant - the OS preference no
   longer selects anything - and is removed below.
   ========================================================================== */
:root {
  color-scheme: dark;
  --bg: #0E1420;
  --bg-rgb: 14, 20, 32;
  --bg-2: #161F2E;
  --bg-3: #1B2636;
  --ink: #E9EEF5;
  --ink-1: #E9EEF5;
  --ink-2: #93A0B4;
  --ink-3: #9AA7BA;
  --line: #263245;
  --line-2: #1A2332;
  --built: #7EA6FF;
  --wind-text: #6FC9E2;
  --iris-text: #EF87B4;
  --zeus-text: #9D8DF7;
  --amelia-text: #E4A84E;
  --live-text: #34D399;
  --built-text: #7EA6FF;
  --design-text: #FBBF24;
  --alert-soft: rgba(239, 154, 154, 0.14);
  --alert-text: #F2A6A0;
  --wind-soft: rgba(111, 201, 226, 0.08);
  --zeus-soft: rgba(157, 141, 247, 0.08);
  --iris-soft: rgba(239, 135, 180, 0.08);
  --amelia-soft: rgba(228, 168, 78, 0.08);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.2);
  --shadow-md: 0 1px 2px rgba(0,0,0,0.35), 0 4px 16px rgba(0,0,0,0.25);
  --shadow-lg: 0 1px 2px rgba(0,0,0,0.4), 0 8px 32px rgba(0,0,0,0.3);
  --shadow-xl: 0 1px 2px rgba(0,0,0,0.4), 0 16px 48px rgba(0,0,0,0.35);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F4F7FB;
  --bg-rgb: 244, 247, 251;
  --bg-2: #FFFFFF;
  --bg-3: #EAEFF6;
  --ink: #17202E;
  --ink-1: #17202E;
  --ink-2: #5A6678;
  --ink-3: #67707F;
  --line: #DCE3EC;
  --line-2: #F0F3F8;
  --built: #2563EB;
  --wind-text: #1F6A85;
  --iris-text: #A8306A;
  --zeus-text: #5847C4;
  --amelia-text: #8A5A16;
  --live-text: #047857;
  --built-text: #2460E4;
  --design-text: #A15806;
  --alert-soft: rgba(211, 47, 47, 0.10);
  --alert-text: #B3261E;
  --wind-soft: rgba(35, 118, 147, 0.08);
  --zeus-soft: rgba(109, 90, 230, 0.08);
  --iris-soft: rgba(197, 73, 131, 0.08);
  --amelia-soft: rgba(162, 107, 27, 0.08);
  --shadow-sm: 0 1px 2px rgba(23, 32, 46, 0.05), 0 2px 8px rgba(23, 32, 46, 0.04);
  --shadow-md: 0 1px 2px rgba(23, 32, 46, 0.06), 0 4px 16px rgba(23, 32, 46, 0.06);
  --shadow-lg: 0 1px 2px rgba(23, 32, 46, 0.07), 0 8px 32px rgba(23, 32, 46, 0.08);
  --shadow-xl: 0 1px 2px rgba(23, 32, 46, 0.08), 0 16px 48px rgba(23, 32, 46, 0.1);
}