/* ─────────────────────────────────────────────────
   Azimuth Systems — Shared Website Styles
   Design system: Dark theme, Space Grotesk + DM Sans
   Colours: #030712, #0F172A, #0EA5E9, #F1F5F9
   ───────────────────────────────────────────────── */

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

:root {
  --bg-primary: #030712;
  --bg-secondary: #111827;
  --bg-card: #0F172A;
  --bg-card-hover: #1E293B;
  --accent: #0EA5E9;
  --accent-light: #38BDF8;
  --accent-glow: rgba(14, 165, 233, 0.15);
  --green: #22C55E;
  --amber: #F59E0B;
  --red: #EF4444;
  --text-primary: #F1F5F9;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --border: rgba(255, 255, 255, 0.08);
  --border-light: rgba(255, 255, 255, 0.12);
  --radius: 12px;
  --radius-lg: 20px;
  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
}

html {
  scroll-behavior: smooth;
  /* Offset anchor targets (e.g. #download) below the fixed nav so they
     aren't hidden behind it when jumped to. */
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.2;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover { color: var(--accent-light); }

img { max-width: 100%; height: auto; display: block; }

.accent { color: var(--accent); }

/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 24px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

.btn-primary {
  background: var(--accent);
  color: var(--bg-primary);
  border-color: var(--accent);
}
.btn-primary:hover {
  background: var(--accent-light);
  border-color: var(--accent-light);
  color: var(--bg-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(14, 165, 233, 0.3);
}

.btn-outline {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-light);
}
.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-glow);
}

.btn-sm { padding: 8px 18px; font-size: 0.85rem; }
.btn-block { width: 100%; }

/* ─── Navigation ─── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 16px 24px;
  transition: all 0.3s;
  background: transparent;
}

.nav-scrolled {
  background: rgba(3, 7, 18, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 10px 24px;
}

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

.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text-primary);
}

.nav-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
}

.nav-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
}

.nav-links {
  display: flex;
  /* flex-end so the cookbook tab's two-line stack (FREE / Galley Cookbook)
     sits with its 'Galley Cookbook' baseline level with the single-line
     siblings — i.e. siblings drop a few px to match the cookbook's bottom
     edge instead of the centred-on-cookbook arrangement that put 'Galley
     Cookbook' below the others' baseline. The mobile rule below resets to
     center because in column-direction `align-items` controls the cross
     (horizontal) axis, where centred is what we want. */
  align-items: flex-end;
  gap: 16px;
}

.nav-links a {
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.2s;
}
/* Flagship app links lead the nav (reachable from any page). */
.nav-app-link { color: var(--text-primary); font-weight: 600; }
.nav-links a:hover { color: var(--text-primary); }

/* Stacked nav link — small accent label above the main link text.
   Used by the Galley Cookbook tab to flag it as FREE. The flex column
   keeps the link a single flex child of .nav-links so vertical
   alignment with sibling links is preserved (their centres still
   line up against this link's centre). */
.nav-link-stacked {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  gap: 2px;
}
.nav-free-badge {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 1px;
  transition: all 0.3s;
}

/* ─── Download Button Dropdown ─── */
.download-wrap {
  position: relative;
}
.download-btn {
  color: #fff;
  font-weight: 600;
}
.download-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--bg-card, #0F172A);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 10px;
  padding: 6px;
  min-width: 200px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  z-index: 200;
}
.download-dropdown.open {
  display: block;
}
.download-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--text-primary, #F1F5F9);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.15s;
}
.download-option:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text-primary, #F1F5F9);
}
.download-option-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.coming-soon {
  font-size: 0.7rem;
  color: var(--text-muted, #64748B);
  font-weight: 400;
  margin-left: auto;
}

/* ─── Sections (shared) ─── */
.section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-inner-narrow {
  max-width: 800px;
}

.section-title {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}

.section-subtitle {
  text-align: center;
  color: var(--text-secondary);
  font-size: 1.05rem;
  max-width: 600px;
  margin: 0 auto 48px;
  line-height: 1.6;
}

/* ─── Trust Bar ─── */
.trust-bar {
  padding: 48px 24px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.trust-bar-inner {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}

.trust-number {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: 4px;
}

.trust-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* ─── Store badges ─── */
.hero-badges {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  /* Center vertically — Google's badge is taller than Apple's by design
     (Google's brand guidelines build clear space into the asset itself).
     Without this, both badges top-align and Google's bottom edge sits
     ~15px below Apple's, making Google look like it's "sitting lower". */
  align-items: center;
}

.store-badge {
  display: inline-block;
  transition: transform 0.2s, opacity 0.2s;
}
.store-badge:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}
/* Apple supplies the App Store badge with built-in clear space and a fixed
   aspect ratio. Google's "Get it on Google Play" badge ships with extra
   padding inside the asset itself (per their brand guidelines) so it
   visually balances against Apple's badge when both are sized to the
   same height. We honour each badge's intrinsic dimensions and let them
   sit at their natural visual weight. */
.store-badge img {
  display: block;
  height: auto;
}

/* ─── Features ─── */
.features {
  padding: 100px 24px;
}

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

.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px;
  transition: border-color 0.3s, transform 0.2s;
}

.feature-card:hover {
  border-color: rgba(14, 165, 233, 0.2);
  transform: translateY(-2px);
}

.feature-card-large {
  grid-column: span 1;
}

.features-grid .feature-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - 12px);
}

.feature-icon {
  margin-bottom: 20px;
}

.feature-card h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.feature-card p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
}

.feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.tag {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--accent-glow);
  color: var(--accent);
  border: 1px solid rgba(14, 165, 233, 0.2);
}

/* ─── Modules ─── */
.modules {
  padding: 80px 24px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 700px;
  margin: 0 auto;
}

.module-pill {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 0.95rem;
  transition: border-color 0.2s;
}

.module-pill:hover {
  border-color: rgba(14, 165, 233, 0.25);
}

.module-number {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--accent);
  font-size: 0.85rem;
  opacity: 0.6;
}

/* ─── Screenshots ─── */
.screenshots {
  padding: 100px 24px;
}

.screenshots-scroll {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: 20px 0 0;
}

.screenshot-item {
  text-align: center;
  display: flex;
  flex-direction: column;
}

.screenshot-item img {
  width: 100%;
  border-radius: 24px;
  border: 2px solid var(--border);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
  transition: transform 0.3s;
  margin-top: auto;
}

.screenshot-item:hover img {
  transform: translateY(-4px);
}

.screenshot-caption {
  margin-bottom: 14px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
  line-height: 1.3;
}

.screenshot-subtext {
  margin-bottom: 14px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ─── How It Works ─── */
.how-it-works {
  padding: 100px 24px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.steps-grid {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}

.step {
  flex: 1;
  text-align: center;
  max-width: 260px;
}

.step-number {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--accent-glow);
  border: 2px solid rgba(14, 165, 233, 0.3);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--accent);
}

.step h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.step p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
}

.step-arrow {
  display: flex;
  align-items: center;
  padding-top: 20px;
  opacity: 0.4;
}

/* ─── Pricing ─── */
.pricing {
  padding: 100px 24px;
}

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

.pricing-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  position: relative;
}

.pricing-card-featured {
  border-color: var(--accent);
  box-shadow: 0 0 40px rgba(14, 165, 233, 0.1);
}

.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--bg-primary);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  padding: 4px 16px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pricing-header {
  text-align: center;
  margin-bottom: 32px;
}

.pricing-header h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.pricing-price {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

.pricing-price span {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.pricing-period {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 4px;
}

.pricing-features {
  list-style: none;
  margin-bottom: 32px;
}

.pricing-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.pricing-features li svg {
  flex-shrink: 0;
}

.pricing-features li strong {
  color: var(--text-primary);
  font-weight: 600;
}

.pricing-feature-disabled {
  opacity: 0.45;
}

.pricing-annual {
  text-align: center;
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ─── FAQ ─── */
.faq {
  padding: 100px 24px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.2s;
}

.faq-item[open] {
  border-color: rgba(14, 165, 233, 0.2);
}

.faq-item summary {
  padding: 20px 24px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color 0.2s;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '+';
  font-size: 1.4rem;
  color: var(--text-muted);
  font-weight: 400;
  transition: transform 0.2s;
}

.faq-item[open] summary::after {
  content: '\2212';
}

.faq-item summary:hover { color: var(--accent); }

.faq-item p {
  padding: 0 24px 20px;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* ─── Final CTA ─── */
.final-cta {
  padding: 100px 24px;
  text-align: center;
}

.final-cta h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 16px;
}

.final-cta p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  margin-bottom: 36px;
}

.final-cta .hero-badges {
  justify-content: center;
}

/* ─── Footer ─── */
.footer {
  padding: 60px 24px 40px;
  border-top: 1px solid var(--border);
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
}

.footer-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
}

.footer-app-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
}

.footer-company {
  color: var(--text-muted);
  font-size: 0.85rem;
}

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

.footer-col h4 {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}

.footer-col a {
  display: block;
  color: var(--text-secondary);
  font-size: 0.9rem;
  padding: 4px 0;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--text-primary); }

.footer-col a.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}
.footer-col a.footer-social svg {
  flex-shrink: 0;
  border-radius: 2px;
  background: #fff;
}

.footer-bottom {
  padding-top: 32px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.footer-bottom p {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.footer-disclaimer {
  margin-top: 8px;
  font-size: 0.75rem !important;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* ─────────────────────────────────────
   Landing Page — App Selector
   ───────────────────────────────────── */

.landing-hero {
  padding: 140px 24px 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.landing-hero::before {
  content: '';
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 900px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.landing-hero-content {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.landing-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -1px;
  margin-bottom: 16px;
}

.landing-hero-subtitle {
  font-size: 1.15rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 60px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* App Tiles */
.app-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 800px;
  margin: 0 auto;
}

.app-tile {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 48px 36px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: relative;
  overflow: hidden;
}

.app-tile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.3s;
}

.app-tile:hover {
  border-color: rgba(14, 165, 233, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.app-tile:hover::before {
  opacity: 1;
}

.app-tile-icon {
  width: 120px;
  height: 120px;
  border-radius: 28px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  background: transparent;
}

.app-tile h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

.app-tile-tagline {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
}

.app-tile-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 5px 14px;
  border-radius: 20px;
  background: var(--accent-glow);
  color: var(--accent);
  border: 1px solid rgba(14, 165, 233, 0.2);
}

.app-tile-badge-amber {
  background: rgba(245, 158, 11, 0.1);
  color: var(--amber);
  border-color: rgba(245, 158, 11, 0.2);
}

.app-tile-cta {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.app-tile-cta svg {
  transition: transform 0.2s;
}

.app-tile:hover .app-tile-cta svg {
  transform: translateX(4px);
}

/* EOOW tile accent override */
.app-tile-eoow::before {
  background: var(--amber);
}

.app-tile-eoow:hover {
  border-color: rgba(245, 158, 11, 0.3);
}

.app-tile-eoow .app-tile-cta {
  color: var(--amber);
}

/* ─── Hero (app-specific pages) ─── */
.hero {
  padding: 160px 24px 80px;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 1000px;
  height: 1000px;
  /* Blue colour splash behind the OOW hero. Bright enough to actually read
     against the near-black page — the previous single-stop 0.08 alpha was
     imperceptible on most screens. (EOOW overrides this amber in
     eoow-styles.css.) */
  background: radial-gradient(circle, rgba(14, 165, 233, 0.22) 0%, rgba(14, 165, 233, 0.07) 45%, transparent 70%);
  pointer-events: none;
}

.hero-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
}

.hero-text h1 {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -1px;
  margin-bottom: 24px;
}

.hero-subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 520px;
}

.hero-note {
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.hero-image {
  display: flex;
  justify-content: center;
}

.hero-device {
  position: relative;
  filter: drop-shadow(0 40px 80px rgba(0,0,0,0.5));
}

.hero-device-bezel {
  width: 280px;
  background: #1C1C1E;
  border-radius: 40px;
  border: 3px solid #3A3A3C;
  overflow: hidden;
  position: relative;
}

.hero-device-bezel::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 28px;
  background: #000;
  border-radius: 14px;
  z-index: 2;
}

.hero-device-bezel::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: rgba(255,255,255,0.25);
  border-radius: 2px;
  z-index: 2;
}

.hero-device-bezel img {
  width: 100%;
  display: block;
}

/* ─── Hero promo reel ───
   The social promo videos are self-contained: they carry their own device
   mock, title cards and end card on the dark brand ground. So this is a plain
   rounded panel, not `.hero-device-bezel` — nesting one in the site bezel
   would put a phone inside a phone. */
.hero-promo {
  position: relative;
  width: 300px;
  border-radius: 28px;
  overflow: hidden;
  background: #05070C;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 40px 80px rgba(0,0,0,0.5);
  line-height: 0;
}

.hero-promo-video {
  width: 100%;
  height: auto;
  display: block;
}

.hero-promo-play,
.hero-promo-sound {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(10,14,22,0.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.hero-promo-play:hover,
.hero-promo-sound:hover { background: rgba(10,14,22,0.85); }

.hero-promo-play:focus-visible,
.hero-promo-sound:focus-visible {
  outline: 2px solid #0EA5E9;
  outline-offset: 3px;
}

/* Centred play affordance, shown whenever the reel is paused — which is the
   default state on mobile, reduced-motion and Save-Data. */
.hero-promo-play {
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
}

.hero-promo-play svg { width: 30px; height: 30px; }

.hero-promo.is-playing .hero-promo-play {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.85);
}

/* The reel autoplays muted, so the sound toggle is the primary control. */
.hero-promo-sound {
  right: 14px;
  bottom: 14px;
  width: 40px;
  height: 40px;
}

.hero-promo-sound svg { width: 20px; height: 20px; }
.hero-promo-sound .icon-unmuted,
.hero-promo.is-unmuted .icon-muted { display: none; }
.hero-promo.is-unmuted .icon-unmuted { display: block; }

/* ─── AI examiner session band ───
   A landscape reel given its own band between the trust bar and the feature
   grid. The gradient carries the trust bar's `--bg-secondary` down onto the
   primary ground the grid sits on, so neither edge needs a rule to separate
   it — the band reads as the transition rather than as a third slab. */
.session-band {
  position: relative;
  padding: 100px 24px;
  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 62%);
  overflow: hidden;
}

/* Accent bloom behind the panel. Sits under the stage (which is positioned)
   so it reads as spill from the screen, not as a shape of its own. */
.session-band::before {
  content: '';
  position: absolute;
  top: 58%;
  left: 50%;
  width: min(1200px, 130%);
  aspect-ratio: 2 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, var(--accent-glow), transparent 68%);
  pointer-events: none;
}

.session-band-stage {
  position: relative;
  /* Below the 768px source swap this holds the 9:16 cut; left uncapped it
     would run past 700px tall on a small tablet. Phones sit under the cap and
     get the full column width. */
  max-width: 400px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .session-band-stage { max-width: 960px; }
}

/* Self-contained reel — its own type, device mock and end card on the brand
   ground — so a plain panel, no device bezel. Same reasoning as .hero-promo. */
.session-reel {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* The poster rides on the panel, not the video's `poster` attribute, so each
     cut can carry its own still — see SessionReel.astro. The video paints over
     it opaquely once playback starts. */
  background-color: #05070C;
  background-image: var(--poster-narrow);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 40px 80px rgba(0,0,0,0.5);
  line-height: 0;
}

.session-reel-video {
  width: 100%;
  height: auto;
  display: block;
  /* Reserves the box before metadata arrives — preload="none" means the
     intrinsic size isn't known until the first play. Must track whichever cut
     the <source media> query picked, or the poster gets letterboxed. */
  aspect-ratio: 9 / 16;
}

@media (min-width: 768px) {
  .session-reel { background-image: var(--poster-wide); }
  .session-reel-video { aspect-ratio: 16 / 9; }
}

.session-reel-play,
.session-reel-sound {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(10,14,22,0.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.session-reel-play:hover,
.session-reel-sound:hover { background: rgba(10,14,22,0.85); }

.session-reel-play:focus-visible,
.session-reel-sound:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.session-reel-play {
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  transform: translate(-50%, -50%);
}

.session-reel-play svg { width: 32px; height: 32px; }

.session-reel.is-playing .session-reel-play {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.85);
}

/* The reel autoplays muted, so the sound toggle is the primary control — and
   on this cut it's the point: the examiner's question is spoken. */
.session-reel-sound {
  right: 16px;
  bottom: 16px;
  width: 44px;
  height: 44px;
}

.session-reel-sound svg { width: 22px; height: 22px; }
.session-reel-sound .icon-unmuted,
.session-reel.is-unmuted .icon-muted { display: none; }
.session-reel.is-unmuted .icon-unmuted { display: block; }

/* Mono caption row, matching the kicker treatment in brand-align.css. */
.session-band-meta {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 28px 0 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.session-band-meta .sep { color: var(--accent); }

/* ─── Articles ─── */
.articles-hero {
  padding: 140px 24px 40px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}
.articles-list { padding: 60px 24px 100px; }
.articles-teaser {
  padding: 80px 24px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
}
.articles-grid-teaser {
  grid-template-columns: repeat(2, 1fr);
  max-width: 880px;
  margin: 0 auto;
}

/* Ambassador dashboard — preferred payout currency picker row. */
.dash-payout-currency-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding: 16px;
  background: rgba(14, 165, 233, 0.04);
  border: 1px solid rgba(14, 165, 233, 0.15);
  border-radius: 10px;
}
.dash-payout-currency-row label {
  font-weight: 600;
  color: var(--text-primary, #F1F5F9);
  font-size: 0.95rem;
}
.dash-payout-currency-hint {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted, #64748B);
  font-style: italic;
}
/* "Stale rates" visual cue on the Total Earnings stat. */
.stat-earnings-stale {
  opacity: 0.7;
}
.stat-earnings-stale::before {
  content: "⚠ ";
  color: var(--amber, #F59E0B);
  font-weight: 600;
}

/* Pricing-region disclaimer shown beneath pricing tiles. Soft, secondary
   tone — should read as a quiet caveat, not an interruption. */
.pricing-region-disclaimer {
  margin-top: 16px;
  font-size: 0.78rem;
  color: var(--text-muted, #64748B);
  text-align: center;
  font-style: italic;
}

/* Dashboard locale picker — used by /affiliate/dashboard and /fleet/dashboard.
   These pages are static HTML (not Astro-routed) so the locale switch is a
   client-side runtime call, not a URL change. Native <select> for a11y. */
.dash-lang-select {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary, #94A3B8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 6px 10px;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.dash-lang-select:hover,
.dash-lang-select:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(14, 165, 233, 0.4);
  color: var(--text-primary, #F1F5F9);
  outline: none;
}
.dash-lang-select option {
  background: var(--bg-card, #0F172A);
  color: var(--text-primary, #F1F5F9);
}

.article-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--text-primary);
  transition: border-color 0.3s, transform 0.2s, box-shadow 0.3s;
}
.article-card:hover {
  border-color: rgba(14, 165, 233, 0.3);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}
.article-card-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.15) 0%, rgba(15, 23, 42, 0.8) 100%);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.article-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article-card-cover-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(14, 165, 233, 0.5);
}
.article-card-source-pill {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(3, 7, 18, 0.85);
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.article-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 26px 22px;
  gap: 12px;
}
.article-card-tag {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--accent-glow);
  color: var(--accent);
  border: 1px solid rgba(14, 165, 233, 0.2);
}
.article-card-tag-cadet {
  background: rgba(245, 158, 11, 0.12);
  color: var(--amber);
  border-color: rgba(245, 158, 11, 0.25);
}
.article-card-tag-industry {
  background: rgba(34, 197, 94, 0.12);
  color: var(--green);
  border-color: rgba(34, 197, 94, 0.25);
}
.article-card-tag-app-update {
  background: rgba(167, 139, 250, 0.14);
  color: #c4b5fd;
  border-color: rgba(167, 139, 250, 0.28);
}

.article-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}
.article-card-link {
  color: inherit;
  text-decoration: none;
}
.article-card-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.article-card:hover .article-card-link {
  color: var(--accent-light);
}
.article-card-excerpt {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text-muted);
}
.article-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-weight: 600;
}
.article-card:hover .article-card-cta {
  color: var(--accent-light);
}
.article-card-cta svg {
  transition: transform 0.2s;
}
.article-card:hover .article-card-cta svg {
  transform: translateX(3px);
}

.article-card-secondary {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: 14px;
  padding: 7px 12px 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.article-card-secondary:hover {
  background: rgba(10, 102, 194, 0.12);
  border-color: rgba(10, 102, 194, 0.45);
  color: var(--text-primary);
}
.article-card-secondary svg:first-child {
  color: #0A66C2;
  flex-shrink: 0;
}
.article-card-secondary svg:last-child {
  opacity: 0.6;
}

.articles-teaser-cta-row {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

/* ─────────────────────────────────────
   Responsive
   ───────────────────────────────────── */

/* Collapse the horizontal nav to the mobile menu earlier — the flagship app
   links make the full row too wide for mid-size screens. */
@media (max-width: 1200px) {
  .nav-links {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(3, 7, 18, 0.97);
    flex-direction: column;
    align-items: center;
    justify-content: safe center;
    gap: 24px;
    padding: 88px 24px 48px;
    box-sizing: border-box;
    overflow-y: auto;
    z-index: 99;
  }
  .nav-links.open { display: flex; }
  .nav-links a { font-size: 1.15rem; white-space: normal; text-align: center; }
  .nav-toggle { display: flex; z-index: 101; }
  body:has(.nav-links.open) { overflow: hidden; }
  .nav:has(.nav-links.open) {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom: none !important;
  }
}

@media (max-width: 768px) {
  /* Nav */
  .nav-links {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(3, 7, 18, 0.97);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    justify-content: safe center;
    gap: 24px;
    padding: 88px 24px 48px;
    box-sizing: border-box;
    overflow-y: auto;
    z-index: 99;
  }
  .nav-links.open { display: flex; }
  .nav-links a { font-size: 1.2rem; }
  .nav-links .download-wrap { margin-top: 4px; }
  .nav-links .download-btn { font-size: 1rem; padding: 12px 32px; }
  .nav-links .download-dropdown { display: none !important; }
  .nav-toggle { display: flex; z-index: 101; }

  /* When mobile menu is open: lock body scroll and hide scrolled-nav
     backdrop so the overlay renders cleanly (uses :has() — modern Safari
     15.4+, Chrome 105+; older browsers keep current behaviour). */
  body:has(.nav-links.open) { overflow: hidden; }
  .nav:has(.nav-links.open) {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom: none !important;
  }

  /* Landing */
  .landing-hero { padding: 120px 24px 40px; }
  .app-tiles { grid-template-columns: 1fr; max-width: 400px; }

  /* Hero */
  .hero { padding: 120px 24px 60px; }
  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }
  .hero-subtitle { margin-left: auto; margin-right: auto; }
  .hero-badges { justify-content: center; }
  .hero-device-bezel { width: 220px; }
  .hero-promo { width: 260px; }

  /* Trust bar */
  .trust-bar-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .trust-number { font-size: 1.6rem; }

  /* Session band */
  .session-band { padding: 72px 24px; }

  /* Features */
  .features-grid { grid-template-columns: 1fr; }
  .feature-card-large { grid-column: span 1; }
  .features-grid .feature-card:last-child:nth-child(odd) { width: 100%; }

  /* Modules */
  .modules-grid { grid-template-columns: 1fr; }

  /* Screenshots */
  .screenshots-scroll { grid-template-columns: repeat(2, 1fr); gap: 20px; }

  /* Steps */
  .steps-grid { flex-direction: column; align-items: center; }
  .step-arrow { display: none; }

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

  /* Footer */
  .footer-links { grid-template-columns: repeat(2, 1fr); gap: 32px; }

  /* Articles */
  .articles-hero { padding: 110px 24px 32px; }
  .articles-grid-teaser { grid-template-columns: 1fr; max-width: 480px; }
}

@media (max-width: 480px) {
  .landing-hero { padding: 100px 16px 40px; }
  .landing-hero h1 { font-size: 1.8rem; }
  .app-tile { padding: 36px 24px; }
  .app-tile-icon { width: 90px; height: 90px; border-radius: 22px; }

  .hero { padding: 100px 16px 40px; }
  .hero-text h1 { font-size: 1.9rem; }
  .hero-device-bezel { width: 180px; }
  .hero-promo { width: 215px; }
  .hero-promo-play { width: 52px; height: 52px; }
  .hero-promo-play svg { width: 24px; height: 24px; }
  .trust-bar-inner { grid-template-columns: repeat(2, 1fr); }
  .session-band { padding: 60px 16px; }
  .session-reel { border-radius: 14px; }
  .session-reel-play { width: 52px; height: 52px; }
  .session-reel-play svg { width: 24px; height: 24px; }
  .session-reel-sound { right: 10px; bottom: 10px; width: 38px; height: 38px; }
  .session-band-meta { gap: 8px; font-size: 10px; letter-spacing: 0.1em; }
  .feature-card { padding: 24px; }
  .pricing-card { padding: 32px 24px; }
  .footer-links { grid-template-columns: 1fr; }
}