/* Postlever page furniture.
   Layout, components and animation, carried over from the page this one
   grew out of and recoloured to the champagne ramp. Colour lives in
   tokens.css; nothing here should introduce a literal. */

/* ═══ layout.css ═══ */
/* ════════════════════════════════════════════════════════════════
   Postlever LAYOUT
   Shared structural styles: reset, typography base, containers,
   section utilities, grids, and accessibility helpers.

   Depends on: /css/design-tokens.css (must be loaded first)

   Sections
   ────────
   1.  Reset & Base
   2.  Typography Base
   3.  Containers
   4.  Section Utilities
   5.  Section Typography
   6.  Grid Utilities
   7.  Skip Navigation & Accessibility
   8.  Responsive Media Queries
   ════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────
   1. RESET & BASE
   ────────────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  scroll-padding-top: var(--nav-height);
}

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  overflow-x: clip;
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ──────────────────────────────────────────────────────────────
   2. TYPOGRAPHY BASE
   ────────────────────────────────────────────────────────────── */

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

h1 { font-size: var(--text-6xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

h5 {
  font-size: var(--text-lg);
  font-family: var(--font-heading);
  font-weight: var(--font-semibold);
}

h6 {
  font-size: var(--text-base);
  font-family: var(--font-heading);
  font-weight: var(--font-semibold);
}


/* ──────────────────────────────────────────────────────────────
   3. CONTAINERS
   ────────────────────────────────────────────────────────────── */

.container {
  max-width: var(--container-md);
  margin: 0 auto;
  padding: 0 var(--space-8);
}

.container-narrow {
  max-width: var(--container-sm);
  margin: 0 auto;
  padding: 0 var(--space-8);
}

.container-wide {
  max-width: var(--container-lg);
  margin: 0 auto;
  padding: 0 var(--space-8);
}

.container-xl {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--space-8);
}


/* ──────────────────────────────────────────────────────────────
   4. SECTION UTILITIES
   ────────────────────────────────────────────────────────────── */

.section     { padding: var(--space-24) var(--space-12); }
.section-sm  { padding: var(--space-16) var(--space-12); }
.section-lg  { padding: var(--space-32) var(--space-12); }
/* section-pad: horizontal-zero variant — used by deploy.html and sms-suppress.html */
.section-pad { padding: 6rem 0; }

/* ── Section Background Classes ──
   RULE: Every <section> MUST have one of these classes.
   No two adjacent sections may share the same background type.
   Four types available for rich alternation:

   LIGHT SPECTRUM:
     s-light  — white (default content sections)
     s-gray   — slate-50 (alternate light sections)

   DARK SPECTRUM:
     s-dark   — navy (standard dark sections)
     s-deep   — navy-deep (deeper dark, dashboard/visualization sections)

   Valid patterns:
     s-dark → s-light → s-gray → s-deep → s-light → s-dark
     s-dark → s-light → s-dark → s-gray → s-deep → s-light
   ─────────────────────────────────────────────────────────── */
.s-light { background: var(--color-bg); }
.s-gray  { background: var(--color-bg-alt); }
.s-dark  { background: var(--color-bg-dark);     color: var(--color-text-on-dark); }
.s-deep  { background: var(--color-bg-dark-alt); color: var(--color-text-on-dark); }
.s-white { background: var(--color-bg); } /* legacy alias for s-light */


/* ──────────────────────────────────────────────────────────────
   5. SECTION TYPOGRAPHY
   Context-aware: eyebrow, heading, and lead text automatically
   adapt to the section's background class.
   ────────────────────────────────────────────────────────────── */

/* Default (light backgrounds) */
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.section-eyebrow::before {
  content: '';
  width: 28px;
  height: 1.5px;
  background: var(--blue);
  opacity: 0.6;
  flex-shrink: 0;
}

/* Typewriter reveal — clips left-to-right in stepped increments */
@keyframes eyebrowType    { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0% 0 0); } }
@keyframes eyebrowCursor  { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes eyebrowCursorFade { to { opacity: 0; } }

/* Cursor pseudo — always present but invisible until animation fires */
.section-eyebrow::after {
  content: '|';
  font-size: 0.85em;
  margin-left: 1px;
  opacity: 0;
}

/* Eyebrow self-reveal: bypass the .reveal opacity/transform fade entirely.
   The clip-path typewriter (below) handles concealment. Without this,
   suppress.html eyebrows (which carry .reveal directly) fade in from opacity:0
   while the clip-path types — the typing effect is invisible against a
   transparent background. */
.section-eyebrow.reveal {
  opacity: 1;
  transform: none;
  animation: none; /* disable reveal-fallback too */
}

/* Pre-hide eyebrows inside unresolved reveal containers — prevents flash
   before the typewriter starts. Covers both patterns:
   - <div class="reveal"><span class="section-eyebrow">…  (deploy.html pattern)
   - <div class="section-eyebrow reveal">…               (suppress.html pattern) */
.reveal:not(.visible) .section-eyebrow,
.section-eyebrow.reveal:not(.visible) {
  clip-path: inset(0 100% 0 0);
}

/* Trigger on .reveal.visible parent OR eyebrow with reveal directly.
   Delay removed — pre-hiding above makes it unnecessary. */
.reveal.visible .section-eyebrow,
.section-eyebrow.reveal.visible {
  animation: eyebrowType 0.6s steps(20, end) both;
}
.reveal.visible .section-eyebrow::after,
.section-eyebrow.reveal.visible::after {
  animation:
    eyebrowCursor 0.5s step-end 0.6s 4,
    eyebrowCursorFade 0.25s ease 2.6s forwards;
}
.section-heading { color: var(--color-text); }
.section-lead    { color: var(--color-text-muted); font-size: var(--text-lg); line-height: var(--leading-relaxed); }

/* Dark backgrounds — eyebrow, heading, lead auto-adapt */
.s-dark .section-eyebrow,
.s-deep .section-eyebrow {
  color: var(--blue-light);
}
.s-dark .section-eyebrow::before,
.s-deep .section-eyebrow::before {
  background: var(--blue-light);
  opacity: 0.7;
}
.s-dark .section-heading,
.s-deep .section-heading {
  color: var(--color-text-on-dark);
}
.s-dark .section-lead,
.s-deep .section-lead {
  color: var(--color-text-on-dark-muted);
}


/* ──────────────────────────────────────────────────────────────
   6. GRID UTILITIES
   ────────────────────────────────────────────────────────────── */

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}


/* ──────────────────────────────────────────────────────────────
   7. SKIP NAVIGATION & ACCESSIBILITY
   ────────────────────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  background: var(--blue);
  color: white;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  z-index: var(--z-skip);
  font-weight: var(--font-semibold);
  text-decoration: none;
  transition: top var(--duration-normal);
}

.skip-link:focus {
  top: var(--space-4);
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}


/* ──────────────────────────────────────────────────────────────
   8. RESPONSIVE MEDIA QUERIES
   Breakpoints (from design-tokens.css section 9):
     480px  — mobile
     768px  — tablet
     900px  — nav collapse
     1200px — desktop
     1920px — ultrawide
   ────────────────────────────────────────────────────────────── */

/* nav-collapse: 900px — reduce container and section padding */
@media (max-width: 900px) {
  .container,
  .container-narrow,
  .container-wide,
  .container-xl {
    padding: 0 var(--space-6);
  }

  .section     { padding: var(--space-16) var(--space-8); }
  .section-sm  { padding: var(--space-12) var(--space-8); }
  .section-lg  { padding: var(--space-24) var(--space-8); }
  .section-pad { padding: 4rem 0; }

  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

/* tablet: 768px */
@media (max-width: 768px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* mobile: 480px — further reduce padding */
@media (max-width: 480px) {
  .container,
  .container-narrow,
  .container-wide,
  .container-xl {
    padding: 0 var(--space-4);
  }

  .section    { padding: var(--space-12) var(--space-4); }
  .section-sm { padding: var(--space-8)  var(--space-4); }
  .section-lg { padding: var(--space-16) var(--space-4); }

  .grid-4 { grid-template-columns: 1fr; }
}

/* ultrawide: 1920px+ — constrain max widths, increase side padding */
@media (min-width: 1920px) {
  :root {
    --container-nav: var(--container-xl);
  }

  .container {
    max-width: var(--container-md);
    padding: 0 var(--space-12);
  }

  .container-narrow {
    max-width: var(--container-sm);
    padding: 0 var(--space-12);
  }

  .container-wide {
    max-width: var(--container-lg);
    padding: 0 var(--space-12);
  }

  .container-xl {
    max-width: var(--container-xl);
    padding: 0 var(--space-12);
  }
}

/* ═══ components.css ═══ */
/* ════════════════════════════════════════════════════════════════
   Postlever SHARED COMPONENTS
   Extracted from styles.css and consolidated inline patterns.

   Load order: design-tokens.css → components.css → page styles

   Sections
   ────────
   1.  Buttons
   2.  Cards (generic)
   3.  Quote / Testimonial Cards
   4.  Testimonials Band
   5.  Navigation
   6.  Dropdowns
   7.  Mobile Menu
   8.  Footer
   9.  Cookie Banner
   10. Back to Top Button
   11. Sticky CTA Bar
   12. Reading Progress Bar
   13. Skeleton Loading
   14. Divider SVG
   15. View Transitions
   16. Hero Base Styles
   17. CTA Section Base
   18. Breadcrumbs
   19. Content Page Layout (legal / prose pages)
   20. Dark Mode — Component Overrides
   21. Responsive (consolidated media queries)
   ════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════
   1. BUTTONS
   ══════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-lg);
  font-weight: var(--font-semibold);
  font-size: 0.95rem;
  text-decoration: none;
  transition: all var(--duration-normal) var(--ease-out);
  cursor: pointer;
  border: none;
  font-family: var(--font-body);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-lg);
  font-weight: var(--font-semibold);
  font-size: 0.95rem;
  text-decoration: none;
  transition: all var(--duration-normal) var(--ease-out);
  cursor: pointer;
  border: none;
  font-family: var(--font-body);
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  color: var(--white);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--alpha-white-10);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-blue-lg);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.btn-secondary:hover {
  border-color: var(--slate-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-secondary:focus-visible {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--alpha-blue-25);
}

.btn-ghost {
  background: transparent;
  color: var(--blue);
}

.btn-ghost:hover {
  background: var(--blue-wash);
}

.btn-ghost:focus-visible {
  background: var(--blue-wash);
}

.btn-ghost-dark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.85rem 1.75rem;
  background: transparent;
  color: var(--alpha-white-60);
  border: 1px solid var(--alpha-white-15);
  border-radius: var(--radius-lg);
  font-size: 0.95rem;
  font-weight: var(--font-medium);
  font-family: var(--font-body);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--duration-normal);
}

.btn-ghost-dark:hover {
  border-color: var(--alpha-white-30);
  color: var(--white);
}

.btn-sm {
  padding: var(--space-2) var(--space-5);
  font-size: 0.85rem;
  border-radius: var(--radius-md);
}

.btn-lg {
  padding: var(--space-4) 2.25rem;
  font-size: 1.05rem;
  border-radius: var(--radius-lg);
}

/* ── Product Button Variants ── */
.btn--emerald { background: var(--emerald); color: var(--white); }
.btn--emerald:hover { background: var(--emerald-dark); }
.btn--indigo { background: var(--indigo); color: var(--white); }
.btn--indigo:hover { background: var(--indigo-dark); }
.btn--teal { background: var(--teal); color: var(--white); }
.btn--teal:hover { background: var(--teal-dark); }


/* ══════════════════════════════════════════════════════
   1b. INLINE SVG ICONS
   ══════════════════════════════════════════════════════ */

/* Replaces the repeated style="display:inline-block;vertical-align:middle;flex-shrink:0"
   pattern used on inline SVG icons throughout all pages. */
.icon-inline {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════
   2. CARDS (generic)
   ══════════════════════════════════════════════════════ */

.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  transition:
    transform var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* Glass variant — for use on dark / navy backgrounds */
.card--glass {
  background: var(--alpha-white-6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: var(--alpha-white-8);
}

/* Broad hover-transition guard for all card-like elements.
   Keeps transitions consistent without targeting every card class individually. */
[class*="-card"]:not(a) {
  transition:
    transform var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}


/* ══════════════════════════════════════════════════════
   3. QUOTE / TESTIMONIAL CARDS
   Canonical definition. Both .quote-card and
   .testimonial-card (inside .testimonials-band) use
   the same visual spec. No duplicate block needed.
   ══════════════════════════════════════════════════════ */

.quote-card,
.testimonials-band .testimonial-card {
  background: var(--alpha-white-6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--alpha-white-8);
  border-top: 2px solid var(--blue-light);
  border-radius: var(--radius-xl);
  padding: 1.75rem 1.75rem var(--space-6);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition:
    transform 0.25s var(--ease-out),
    box-shadow 0.25s var(--ease-out),
    border-top-color 0.25s;
  position: relative;
  overflow: hidden;
}

/* Decorative quote mark — dark card variant */
.quote-card::before,
.testimonials-band .testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: 0.5rem;
  right: 1.25rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 5.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--alpha-white-6);
  pointer-events: none;
  user-select: none;
}

.quote-card:hover,
.testimonials-band .testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 36px var(--alpha-black-20);
  border-top-color: var(--blue);
}

/* Quote body text */
.quote-card .quote-body,
.testimonial-text {
  font-size: 0.97rem;
  line-height: 1.72;
  color: var(--alpha-white-85);
  font-style: italic;
  font-weight: 500;
  flex: 1;
  margin-bottom: var(--space-5);
  font-family: var(--font-body);
  position: relative;
  z-index: 1;
}

/* Author block */
.quote-card .quote-author,
.testimonial-author {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--alpha-white-8);
}

.quote-card .quote-author-name,
.testimonial-author .quote-author-name {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size: 0.875rem;
  color: var(--slate-800);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
html.dark-mode .quote-card .quote-author-name,
html.dark-mode .testimonial-author .quote-author-name {
  color: #EBEEF3;
}

.quote-card .quote-author-role,
.testimonial-title {
  font-size: 0.75rem;
  color: var(--alpha-white-50);
  line-height: 1.3;
  font-weight: var(--font-regular);
  margin-top: 0.15rem;
}

.quote-card .quote-author-company,
.testimonial-company {
  font-size: 0.75rem;
  font-weight: var(--font-semibold);
  color: var(--blue-light);
  margin-top: 0.1rem;
}

/* Initials avatar — used in .quote-author beside name/role */
.quote-author-initial {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--alpha-blue-light-20) 0%, var(--alpha-blue-10) 100%);
  border: 1px solid var(--alpha-blue-light-20);
  color: var(--blue-light);
  font-size: 0.65rem;
  font-weight: 800;
  font-family: var(--font-heading);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
}

/* Legacy quote mark — kept in DOM on older pages but invisible */
.testimonial-quote-mark {
  display: none;
}

/* ──────────────────────────────────────────────────────
   Light-background variant (white / gray sections)
   The card is white. The decorative quote mark, italic
   text, initials circle, and elevated shadow do the work.
   No top border stripe — that was too generic.
   ────────────────────────────────────────────────────── */
.quote-card.quote-card--light {
  background: var(--color-bg);
  border: 1px solid var(--alpha-navy-7);
  border-top: none;
  border-radius: var(--radius-xl);
  box-shadow:
    0 1px 2px var(--alpha-navy-4),
    0 4px 20px var(--alpha-navy-6);
  padding: 2.25rem 1.75rem 1.75rem;
}

/* Decorative quote mark — light card variant */
.quote-card.quote-card--light::before {
  content: '\201C';
  position: absolute;
  top: 0.75rem;
  right: 1.25rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 6rem;
  font-weight: 400;
  line-height: 1;
  color: var(--blue);
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
}

.quote-card.quote-card--light:hover {
  box-shadow:
    0 2px 6px var(--alpha-navy-6),
    0 8px 36px var(--alpha-navy-10);
  border-color: var(--alpha-blue-15);
  transform: translateY(-2px);
}

.quote-card.quote-card--light .quote-body {
  font-size: 1rem;
  font-style: italic;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.72;
  margin-bottom: var(--space-6);
}

.quote-card.quote-card--light .quote-author {
  border-top: 1px solid var(--alpha-navy-6);
  padding-top: var(--space-5);
}

.quote-card.quote-card--light .quote-author-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.quote-card.quote-card--light .quote-author-role {
  font-size: 0.74rem;
  color: var(--slate-400);
  margin-top: 0.15rem;
  line-height: 1.3;
  font-weight: var(--font-regular);
}

.quote-card.quote-card--light .quote-author-company {
  font-size: 0.74rem;
  font-weight: var(--font-semibold);
  color: var(--blue);
  margin-top: 0.1rem;
}

.quote-card.quote-card--light .quote-author-initial {
  background: linear-gradient(135deg, var(--alpha-blue-light-12) 0%, var(--alpha-blue-10) 100%);
  border-color: var(--alpha-blue-light-15);
  color: var(--blue);
}


/* ══════════════════════════════════════════════════════
   4. TESTIMONIALS BAND
   Dark section containing the testimonial grid.
   ══════════════════════════════════════════════════════ */

.testimonials-band {
  background: var(--color-bg, #E7EBF1);
  padding: var(--space-24) var(--space-8) 3.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.testimonials-band::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse 60% 50% at 20% 40%, rgba(59,130,246,0.04) 0%, transparent 65%),
              radial-gradient(ellipse 50% 60% at 80% 60%, rgba(96,165,250,0.03) 0%, transparent 65%);
  pointer-events: none;
}

.testimonials-band .section-eyebrow {
  color: var(--blue);
}

.testimonials-band h2 {
  color: var(--slate-800);
  font-size: var(--text-3xl);
  margin-bottom: var(--space-12);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}


/* ══════════════════════════════════════════════════════
   5. NAVIGATION
   ══════════════════════════════════════════════════════ */

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  padding: 1.25rem clamp(1.25rem, 4vw, 3rem);
  transition: background 0.4s var(--ease-smooth),
              border-color 0.4s var(--ease-smooth),
              box-shadow 0.4s var(--ease-smooth),
              padding 0.4s var(--ease-smooth);
  background: transparent;
  border-bottom: none;
  box-shadow: none;
}

nav.scrolled {
  background: var(--alpha-white-95);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid var(--slate-200);
  padding: 0.85rem clamp(1.25rem, 4vw, 3rem);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.nav-inner {
  max-width: var(--container-nav);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  position: relative;
  text-decoration: none;
  display: flex;
  align-items: center;
}

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

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  list-style: none;
}

.nav-links > li {
  position: relative;
}

.nav-links > li > a {
  color: var(--slate-500);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: var(--font-medium);
  transition: color var(--duration-normal);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: var(--space-2) 0;
}

.nav-links > li > a:hover {
  color: var(--navy);
}

.nav-links > li > a:focus-visible {
  color: var(--blue);
}

.nav-links > li > a .chevron {
  width: 12px;
  height: 12px;
  transition: transform 0.3s var(--ease-out);
}

.nav-links > li:hover > a .chevron {
  transform: rotate(180deg);
}

/* Nav CTA button */
/* Nav CTA — needs higher specificity to beat .nav-links > li > a */
.nav-links > li > a.nav-cta,
a.nav-cta {
  background: var(--blue);
  color: var(--white);
  padding: 0.55rem var(--space-6);
  border-radius: var(--radius-md);
  font-weight: var(--font-semibold);
  white-space: nowrap;
  transition: all var(--duration-normal) var(--ease-out);
  display: inline-flex;
  align-items: center;
  min-width: max-content;
  text-decoration: none;
  font-size: 0.875rem;
}

.nav-links > li > a.nav-cta:hover,
a.nav-cta:hover {
  background: var(--blue-dark);
  color: var(--white);
  transform: translateY(-1px);
}

/* ── Theme Toggle ── */
.theme-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--alpha-slate-400-30);
  border-radius: 12px;
  border: 1px solid var(--alpha-slate-400-20);
  cursor: pointer;
  padding: 0;
  transition: background var(--duration-normal), border-color var(--duration-normal);
  margin-left: var(--space-3);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.theme-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--white);
  border-radius: var(--radius-full);
  transition: transform var(--duration-normal) ease, background var(--duration-normal);
  box-shadow: 0 1px 3px var(--alpha-black-20);
}
.theme-toggle .toggle-sun,
.theme-toggle .toggle-moon {
  position: absolute;
  width: 14px;
  height: 14px;
  transition: opacity var(--duration-normal);
  pointer-events: none;
}
.theme-toggle .toggle-sun {
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
  color: var(--amber);
}
.theme-toggle .toggle-moon {
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.4;
  color: var(--slate-400);
}
html.dark-mode .theme-toggle {
  background: var(--alpha-white-15);
  border-color: var(--alpha-white-12);
}
html.dark-mode .theme-toggle::after {
  transform: translateX(20px);
  background: var(--slate-300);
}
html.dark-mode .theme-toggle .toggle-sun {
  opacity: 0.4;
  color: var(--slate-400);
}
html.dark-mode .theme-toggle .toggle-moon {
  opacity: 1;
  color: var(--blue-light);
}
.theme-toggle-li {
  display: flex;
  align-items: center;
}
/* Mobile menu theme toggle row */
.theme-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--alpha-white-6);
  margin-top: var(--space-2);
}
.theme-toggle-row span {
  color: var(--alpha-white-70);
  font-size: 0.95rem;
}

/* Mobile toggle — hidden on desktop */
.mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--navy);
  cursor: pointer;
}

.mobile-toggle:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Dark hero nav — apply .dark-nav to <nav> when page has a dark hero */
.dark-nav:not(.scrolled) .nav-logo {
  color: var(--white);
}

.dark-nav:not(.scrolled) .nav-links > li > a {
  color: var(--alpha-white-70);
}

.dark-nav:not(.scrolled) .nav-links > li > a:hover {
  color: var(--white);
}

.dark-nav:not(.scrolled) .mobile-toggle {
  color: var(--white);
}

.dark-nav:not(.scrolled) .nav-logo-img {
  filter: brightness(0) invert(1);
}


/* ══════════════════════════════════════════════════════
   6. DROPDOWNS
   ══════════════════════════════════════════════════════ */

.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--color-bg);
  border: 1px solid var(--alpha-navy-8);
  border-radius: var(--radius-xl);
  padding: var(--space-2);
  min-width: 280px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.35s var(--ease-out);
  box-shadow: 0 20px 60px var(--alpha-navy-12), 0 4px 12px var(--alpha-navy-5);
  z-index: var(--z-dropdown);
}

.nav-dropdown.wide {
  min-width: 520px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
}

.nav-links > li .nav-dropdown {
  transition-delay: 0.05s;
}

.nav-links > li:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown a {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.55rem var(--space-3);
  border-radius: var(--radius-md);
  color: var(--slate-600);
  font-size: 0.82rem;
  font-weight: var(--font-medium);
  text-decoration: none;
  transition: all var(--duration-normal);
  white-space: nowrap;
  line-height: 1.4;
}

.nav-dropdown a:hover {
  background: var(--blue-wash);
  color: var(--blue);
}

.nav-dropdown a:focus-visible {
  background: var(--blue-wash);
}
.nav-dropdown a.dd-dim { opacity: 0.55; }

.nav-dropdown a i {
  color: var(--blue);
  opacity: 0.6;
  flex-shrink: 0;
}

.nav-dropdown a:hover i {
  opacity: 1;
}

/* Dropdown icon badge */
.nav-dropdown a .dd-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-wash);
  color: var(--blue);
  transition: all var(--duration-normal);
}

.nav-dropdown a:hover .dd-icon {
  background: var(--blue);
  color: var(--white);
}

/* Colored icon variants */
.dd-icon.green { background: #DBEAFE; color: var(--emerald); }
.nav-dropdown a:hover .dd-icon.green { background: var(--emerald); color: var(--white); }
.dd-icon.navy  { background: #EFF6FF; color: #1E40AF; }
.nav-dropdown a:hover .dd-icon.navy  { background: #1E40AF; color: var(--white); }
.dd-icon.cyan  { background: #EFF6FF; color: #60A5FA; }
.nav-dropdown a:hover .dd-icon.cyan  { background: #60A5FA; color: var(--white); }

/* Dropdown text stack */
.nav-dropdown a .dd-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.nav-dropdown a .dd-title {
  font-weight: var(--font-semibold);
  font-size: 0.82rem;
  color: var(--navy);
}

.nav-dropdown a:hover .dd-title {
  color: var(--blue);
}

.nav-dropdown a .dd-desc {
  font-size: 0.72rem;
  font-weight: var(--font-regular);
  color: var(--slate-400);
  line-height: 1.4;
}

/* Deploy version switcher pills */
.dd-versions {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

.dd-ver {
  display: inline-block;
  padding: 0.15rem var(--space-2);
  font-size: 0.65rem;
  font-weight: var(--font-semibold);
  border-radius: var(--radius-sm);
  background: var(--blue-wash);
  color: var(--blue);
  text-decoration: none;
  transition: all var(--duration-normal);
  letter-spacing: 0.05em;
}

.dd-ver:hover {
  background: var(--blue);
  color: var(--white);
}

.dd-ver:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

/* Mobile menu deploy versions */
.mobile-deploy-versions {
  display: flex;
  gap: 0.4rem;
  padding: var(--space-1) 1.2rem var(--space-2);
}

.mobile-deploy-versions .dd-ver {
  font-size: 0.7rem;
  padding: 0.2rem 0.6rem;
}

/* Footer deploy versions */
.footer-deploy-versions {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.15rem;
  margin-bottom: var(--space-1);
}

.footer-deploy-versions a {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  font-size: 0.6rem;
  font-weight: var(--font-semibold);
  border-radius: var(--radius-sm);
  background: var(--alpha-blue-10);
  color: var(--blue);
  text-decoration: none;
  transition: all var(--duration-normal);
  letter-spacing: 0.05em;
}

.footer-deploy-versions a:hover {
  background: var(--blue);
  color: var(--white);
}


/* ══════════════════════════════════════════════════════
   7. MOBILE MENU
   Premium full-screen slide-in. Active at ≤ 900px.
   Shown/hidden via media query — see responsive block.
   ══════════════════════════════════════════════════════ */

/* Base state — overridden inside media query below */
.mobile-menu {
  display: none;
}

@keyframes mobileMenuSlideIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@keyframes mobileItemStagger {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}


/* ══════════════════════════════════════════════════════
   8. FOOTER
   ══════════════════════════════════════════════════════ */

footer {
  background: var(--navy-deep);
  padding: var(--space-16) var(--space-12) var(--space-8);
  border-top: 1px solid var(--alpha-white-4);
}

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

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: var(--space-12);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--alpha-white-6);
  margin-bottom: var(--space-8);
}

.footer-brand-col .footer-brand {
  font-family: var(--font-heading);
  font-weight: var(--font-extrabold);
  font-size: 1.3rem;
  color: #E7EBF1; /* always literal white — footer is always on a dark background */
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
}

.footer-brand-col p {
  font-size: 0.8rem;
  color: var(--alpha-white-70);
  line-height: 1.7;
  margin-bottom: var(--space-1);
}

.footer-brand-col a {
  font-size: 0.8rem;
  color: var(--alpha-white-70);
  text-decoration: none;
  transition: color var(--duration-normal);
}

.footer-brand-col a:hover {
  color: var(--alpha-white-90);
}

.footer-socials {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.footer-socials a {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--alpha-white-6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--alpha-white-60);
  transition: all var(--duration-normal);
  text-decoration: none;
}

.footer-socials a:hover {
  background: var(--alpha-blue-light-25);
  color: var(--alpha-white-90);
  border-radius: var(--radius-md);
}

.footer-col h4 {
  font-size: 0.75rem;
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--alpha-white-65);
  margin-bottom: var(--space-4);
}

.footer-col a {
  display: block;
  font-size: 0.8rem;
  color: var(--alpha-white-70);
  text-decoration: none;
  padding: var(--space-1) 0;
  transition: color var(--duration-normal);
}

.footer-col a:hover {
  color: var(--alpha-white-90);
}

.footer-bottom {
  font-size: 0.75rem;
  color: var(--alpha-white-60);
  text-align: center;
}

.footer-award {
  font-size: 0.78rem;
  color: var(--alpha-white-65);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.footer-badge-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}


/* ══════════════════════════════════════════════════════
   9. COOKIE BANNER
   ══════════════════════════════════════════════════════ */

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-cookie);
  background: var(--alpha-navy-dark-95);
  backdrop-filter: blur(12px);
  padding: var(--space-5) var(--space-8);
  transform: translateY(100%);
  animation: cookieSlideUp 0.5s ease-out 1.5s forwards;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

/* Ensure [hidden] attribute beats display:flex — must follow .cookie-banner rule */
.cookie-banner[hidden] { display: none; }

@keyframes cookieSlideUp {
  to { transform: translateY(0); }
}

.cookie-banner p {
  color: var(--alpha-white-75);
  font-size: 0.82rem;
  margin: 0;
  max-width: 600px;
  line-height: 1.5;
}

.cookie-banner a {
  color: var(--blue-400);
  text-decoration: underline;
}

.cookie-btns {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.cookie-accept {
  background: var(--blue);
  color: var(--white);
  border: none;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: var(--font-semibold);
  cursor: pointer;
  font-family: var(--font-body);
  transition: background var(--duration-normal);
}

.cookie-accept:hover {
  background: var(--blue-dark);
}

.cookie-decline {
  background: transparent;
  color: var(--alpha-white-65);
  border: 1px solid var(--alpha-white-15);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: var(--font-medium);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all var(--duration-normal);
}

.cookie-decline:hover {
  color: var(--white);
  border-color: var(--alpha-white-30);
}


/* ══════════════════════════════════════════════════════
   10. BACK TO TOP BUTTON
   ══════════════════════════════════════════════════════ */

.back-to-top {
  position: fixed;
  bottom: 5rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  background: var(--blue);
  color: var(--white);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  transition: all var(--duration-normal) var(--ease-out);
  z-index: var(--z-back-to-top);
  box-shadow: 0 4px 12px var(--alpha-blue-30);
  pointer-events: none;
}

.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px var(--alpha-blue-40);
}


/* ══════════════════════════════════════════════════════
   11. STICKY CTA BAR
   ══════════════════════════════════════════════════════ */

.sticky-cta {
  position: fixed;
  bottom: -80px;
  left: 0;
  right: 0;
  background: var(--alpha-navy-dark-95);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--alpha-white-8);
  padding: var(--space-3) var(--space-8);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  z-index: var(--z-sticky-cta);
  transition: bottom 0.4s var(--ease-out);
}

.sticky-cta.visible {
  bottom: 0;
}

.sticky-cta-text {
  color: var(--alpha-white-70);
  font-size: 0.9rem;
}

.sticky-cta-btn {
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  color: var(--white);
  padding: 0.6rem var(--space-6);
  border-radius: var(--radius-md);
  font-weight: var(--font-semibold);
  font-size: 0.85rem;
  text-decoration: none;
  transition: all var(--duration-normal);
  white-space: nowrap;
}

.sticky-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--alpha-blue-40);
}


/* ══════════════════════════════════════════════════════
   12. READING PROGRESS BAR
   Scroll-driven — progressive enhancement.
   ══════════════════════════════════════════════════════ */

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transform-origin: left;
  transform: scaleX(0);
  z-index: var(--z-progress);
}

@keyframes readProgress {
  to { transform: scaleX(1); }
}

@supports (animation-timeline: scroll()) {
  .reading-progress {
    animation: readProgress linear;
    animation-timeline: scroll();
  }
}


/* Scroll-driven section fade */
@supports (animation-timeline: view()) {
  .scroll-fade-in {
    animation: scrollFadeIn linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }

  @keyframes scrollFadeIn {
    from { opacity: 0.3; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1;   transform: translateY(0)    scale(1); }
  }

  .footer-scroll-reveal {
    animation: footerReveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }

  @keyframes footerReveal {
    from { opacity: 0.5; transform: translateY(30px); }
    to   { opacity: 1;   transform: translateY(0); }
  }

  .stat-scroll-slide {
    animation: statSlide linear both;
    animation-timeline: view();
    animation-range: entry 20% entry 80%;
  }

  @keyframes statSlide {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
  }
}


/* ══════════════════════════════════════════════════════
   13. SKELETON LOADING
   ══════════════════════════════════════════════════════ */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--slate-100) 25%,
    var(--slate-50)  50%,
    var(--slate-100) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

@keyframes shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text     { height: 1rem;    margin-bottom: 0.5rem; }
.skeleton-text-sm  { height: 0.75rem; width: 60%; }
.skeleton-heading  { height: 2rem;    width: 40%; margin-bottom: 1rem; }
.skeleton-card     { height: 200px; }
.skeleton-avatar   { width: 48px; height: 48px; border-radius: 50%; }


/* ══════════════════════════════════════════════════════
   14. DIVIDER SVG
   ══════════════════════════════════════════════════════ */

.divider-svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  position: relative;
  z-index: 2;
  overflow: visible;
}


/* ══════════════════════════════════════════════════════
   15. VIEW TRANSITIONS
   Crossfade — prevents flash on page navigation.
   ══════════════════════════════════════════════════════ */

@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) { animation: fadeOut 0.15s ease-out forwards; }
::view-transition-new(root) { animation: fadeIn  0.20s ease-in  forwards; }

@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }


/* ══════════════════════════════════════════════════════
   16. HERO BASE STYLES
   Common hero patterns shared across pages.
   Page-specific decorations (swirls, dots, etc.) live
   in per-page <style> blocks.
   ══════════════════════════════════════════════════════ */

.hero {
  position: relative;
  min-height: 60vh;
  padding: var(--space-32) var(--space-12) var(--space-20);
  overflow: hidden;
}

/* Compact hero for listing pages (blog, case studies, videos) */
.hero--compact {
  min-height: auto;
  padding: 8rem var(--space-12) var(--space-12);
}

.hero--dark {
  background: var(--navy);
  color: var(--color-text-on-dark);
}

.hero--light {
  background: var(--color-bg);
}

/* Center-aligned content wrapper */
.hero-content {
  position: relative;
  z-index: 5;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.hero h1 {
  font-size: var(--text-6xl);
  font-weight: var(--font-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-6);
  color: var(--navy);
}

/* Gradient text accent — wrap target words in <span class="em"> */
.hero h1 .em {
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-sub {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 600px;
  margin: 0 auto var(--space-8);
  line-height: var(--leading-relaxed);
}

/* Hero eyebrow — same visual as .section-eyebrow but centered.
   Entrance animation is baked in here so per-page <style> blocks
   don't need to repeat it.
   To change the accent color, set --eyebrow-color on the element
   or its parent: e.g. .hero-eyebrow { --eyebrow-color: var(--cyan); } */
.hero-eyebrow {
  --eyebrow-color: var(--blue);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--eyebrow-color);
  margin-bottom: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  opacity: 0;
  transform: translateY(16px);
  animation: revealUp 0.8s var(--ease-out) 0.2s forwards;
}

.hero-eyebrow::before,
.hero-eyebrow::after {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--eyebrow-color);
  opacity: 0.4;
}

/* Mobile — shrink font and tighten margin on narrow viewports */
@media (max-width: 480px) {
  .hero-eyebrow {
    font-size: 0.65rem;
    margin-bottom: 0.5rem;
  }
}

/* Hero action row */
.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* Breadcrumb trail beneath hero title */
.hero-breadcrumb {
  display: none; /* Removed — breadcrumbs overlap nav and add clutter */
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: 0.8rem;
  color: var(--slate-400);
}

.hero-breadcrumb a {
  color: var(--slate-500);
  text-decoration: none;
  transition: color var(--duration-normal);
}

.hero-breadcrumb a:hover {
  color: var(--blue);
}

.hero-breadcrumb .breadcrumb-current {
  color: var(--blue-light);
}

/* ── Product Hero Variants ── */
.hero--emerald {
  /* Suppress product — emerald gradient */
  background: linear-gradient(135deg, #011a15 0%, #043a2c 25%, #036845 50%, #044f38 75%, #011a15 100%);
}
.hero--indigo {
  /* SMS Suppress product — indigo/blue-navy gradient */
  background: linear-gradient(135deg, #0A0E19 0%, #0D1321 25%, #171E2F 50%, #101625 75%, #0A0E19 100%);
}

/* ── Hero Mesh Gradient Overlay ── */
.hero-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  animation: meshShift 12s ease-in-out infinite alternate;
}

.hero--emerald .hero-mesh {
  background:
    radial-gradient(ellipse 50% 50% at 20% 30%, rgba(16,185,129,0.25) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 80% 70%, rgba(52, 211, 153, 0.15) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(4, 120, 87, 0.2) 0%, transparent 60%);
}

.hero--indigo .hero-mesh {
  background:
    radial-gradient(ellipse 50% 50% at 20% 30%, rgba(37,99,235,0.2) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 80% 70%, rgba(59,130,246,0.15) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(30,64,175,0.15) 0%, transparent 60%);
}

.hero--dark .hero-mesh {
  background:
    radial-gradient(ellipse 50% 50% at 20% 30%, rgba(59,130,246,0.15) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 80% 70%, rgba(96,165,250,0.1) 0%, transparent 70%);
}

/* ── Hero Grid Pattern Overlay ── */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(231,235,241,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231,235,241,0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(0,0,0,0.4) 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(0,0,0,0.4) 0%, transparent 70%);
}

/* ── Hero Glow (top radial) ── */
.hero-glow {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 600px;
  z-index: 0;
  pointer-events: none;
}

.hero--emerald .hero-glow {
  background: radial-gradient(ellipse, rgba(16,185,129,0.15) 0%, transparent 70%);
}

.hero--indigo .hero-glow {
  background: radial-gradient(ellipse, rgba(37,99,235,0.15) 0%, transparent 70%);
}

.hero--dark .hero-glow {
  background: radial-gradient(ellipse, rgba(37,99,235,0.15) 0%, transparent 70%);
}

/* ── Hero Tag (product-agnostic base) ── */
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem var(--space-4) 0.4rem 0.6rem;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: var(--font-medium);
  margin-bottom: var(--space-8);
  opacity: 0;
  transform: translateY(16px);
  animation: revealUp 0.8s var(--ease-out) 0.3s forwards;
}

/* Light hero tag */
.hero--light .hero-tag {
  background: var(--blue-wash);
  border: 1px solid var(--blue-pale);
  color: var(--blue);
}

/* Dark hero tag */
.hero--dark .hero-tag,
.hero--emerald .hero-tag,
.hero--indigo .hero-tag {
  background: var(--product-glow, var(--alpha-blue-light-15));
  border: 1px solid var(--product-accent-light, var(--blue-light));
  color: var(--product-accent-pale, var(--blue-pale));
}

.hero-tag .tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--product-accent-light, var(--blue-light));
  box-shadow: 0 0 8px var(--product-glow, rgba(59,130,246,0.3));
}

/* ── Hero on dark: heading + subtitle colors ── */
.hero--dark h1,
.hero--emerald h1,
.hero--indigo h1 {
  color: var(--color-text-on-dark);
}

.hero--dark .hero-sub,
.hero--emerald .hero-sub,
.hero--indigo .hero-sub {
  color: var(--alpha-white-70);
}

/* ── Hero reveal — visible by default, no animation dependency ── */
.hero h1,
.hero .hero-sub,
.hero .hero-actions {
  opacity: 1;
}

/* Hero separator character in multi-word titles */
.hero-sep {
  color: var(--alpha-white-20);
  font-weight: 300;
  margin: 0 0.15em;
}


/* ══════════════════════════════════════════════════════
   17. CTA SECTION BASE
   Common bottom-of-page CTA pattern.
   ══════════════════════════════════════════════════════ */

.cta-section {
  background: var(--navy);
  padding: var(--space-24) var(--space-12);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* When .cta-section is combined with a section-background class (s-light, s-gray,
   s-deep) let the background class win — the navy default is only for standalone use. */
.cta-section.s-light { background: var(--color-bg); }
.cta-section.s-gray  { background: var(--color-bg-alt); }
.cta-section.s-deep  { background: var(--color-bg-dark-alt); }

.cta-card {
  max-width: 900px;
  margin: 0 auto;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  border-radius: 24px;
  padding: var(--space-16) var(--space-12);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Any section-eyebrow inside a centered CTA card inherits the center alignment */
.cta-card .section-eyebrow {
  justify-content: center;
}

/* Multi-stop radial glow overlay — decorative, non-interactive */
.cta-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 15% 20%, rgba(37,99,235,0.10) 0%, transparent 65%),
    radial-gradient(ellipse 45% 55% at 85% 80%, rgba(16,185,129,0.08) 0%, transparent 65%),
    radial-gradient(ellipse 35% 40% at 55% 50%, rgba(96,165,250,0.06) 0%, transparent 55%);
  pointer-events: none;
}

.cta-card h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: var(--font-extrabold);
  color: var(--white);
  margin-bottom: var(--space-4);
  position: relative;
  z-index: 1;
}

.cta-card p {
  color: var(--alpha-white-65);
  font-size: var(--text-base);
  margin-bottom: var(--space-8);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  line-height: var(--leading-relaxed);
  position: relative;
  z-index: 1;
}

.cta-actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* Light variant — explicit modifier class for non-section-classed contexts */
.cta-section--light {
  background: var(--color-bg);
}

.cta-section--light .cta-card,
.cta-section.s-light .cta-card,
.cta-section.s-gray .cta-card {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
}

/* Deploy variant — full-bleed dark gradient, no inner .cta-card wrapper.
   Used by deploy.html and deploy-v7.html. */
.cta-section--deploy {
  background: linear-gradient(135deg, var(--navy-deep) 0%, #0D1321 50%, var(--navy) 100%);
}

.cta-section--deploy::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 70% at 30% 50%, rgba(37,99,235,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 70% 50%, rgba(96,165,250,0.10) 0%, transparent 70%);
  pointer-events: none;
}

.cta-section--deploy h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--white);
  margin-bottom: var(--space-3);
  position: relative;
  z-index: 1;
}

.cta-section--deploy p {
  color: var(--alpha-white-60);
  font-size: var(--text-base);
  position: relative;
  z-index: 1;
}


/* ══════════════════════════════════════════════════════
   18. BREADCRUMBS
   Generic breadcrumb — use outside hero for inline nav.
   ══════════════════════════════════════════════════════ */

.breadcrumb {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-normal);
}

.breadcrumb a:hover {
  color: var(--color-text);
}

.breadcrumb-sep {
  opacity: 0.5;
}

.breadcrumb-current {
  color: var(--blue);
  font-weight: var(--font-medium);
}


/* ══════════════════════════════════════════════════════
   19. CONTENT PAGE LAYOUT
   Shared base for legal, compliance, and prose pages:
   privacy, terms, security, email-compliance, etc.
   Page-specific callouts/tables live in per-page styles.
   ══════════════════════════════════════════════════════ */

/* Outer section wrapper */
.legal-section {
  padding: var(--space-16) var(--space-12) var(--space-24);
  background: var(--color-bg);
}

/* Narrowed content column */
.legal-container {
  max-width: 800px;
  margin: 0 auto;
}

/* Metadata row (last updated, company name) */
.legal-meta {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--slate-200);
  font-size: 0.85rem;
  color: var(--slate-500);
  flex-wrap: wrap;
}

.legal-meta i,
.legal-meta svg {
  color: var(--blue);
}

/* Numbered section block */
.legal-block {
  margin-bottom: var(--space-10);
}

.legal-block h2 {
  font-size: 1.35rem;
  color: var(--navy);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Numbered badge within headings */
.legal-num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: var(--font-semibold);
  color: var(--blue);
  background: var(--blue-wash);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.legal-block p {
  font-size: 0.95rem;
  color: var(--slate-600);
  line-height: 1.8;
  margin-bottom: var(--space-3);
}

.legal-block ul,
.legal-block ol {
  padding-left: var(--space-6);
  color: var(--slate-600);
  font-size: 0.95rem;
  line-height: 1.8;
}

.legal-block li {
  margin-bottom: 0.4rem;
}


/* ══════════════════════════════════════════════════════
   20. DARK MODE — COMPONENT OVERRIDES
   Scoped to html.dark-mode. Overrides above component
   styles when user enables dark theme.
   ══════════════════════════════════════════════════════ */

/* Navigation */
html.dark-mode nav {
  background: transparent;
  border-bottom: none;
  box-shadow: none;
}

html.dark-mode nav.scrolled {
  background: var(--alpha-navy-dark-95);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid var(--alpha-white-8);
  box-shadow: 0 1px 3px var(--alpha-black-30);
}

html.dark-mode .nav-logo {
  color: var(--slate-50);
}

/* Dark mode nav — pages WITH .dark-nav (dark hero backgrounds) */
html.dark-mode .dark-nav .nav-links > li > a { color: var(--alpha-white-70); }
html.dark-mode .dark-nav .nav-links > li > a:hover { color: #E7EBF1; }
html.dark-mode .dark-nav .nav-logo-img { filter: brightness(0) invert(1); }
html.dark-mode .dark-nav .mobile-toggle { color: var(--white); }
html.dark-mode .dark-nav .theme-toggle { color: var(--alpha-white-70); }

/* Dark mode nav — pages WITHOUT .dark-nav: hero bg is still dark in dark mode
   (hero--light overrides to dark gradient), so nav text should be light */
html.dark-mode nav:not(.dark-nav):not(.scrolled) .nav-links > li > a { color: var(--alpha-white-70); }
html.dark-mode nav:not(.dark-nav):not(.scrolled) .nav-links > li > a:hover { color: #E7EBF1; }
html.dark-mode nav:not(.dark-nav):not(.scrolled) .nav-logo-img { filter: brightness(0) invert(1); }
html.dark-mode nav:not(.dark-nav):not(.scrolled) .mobile-toggle { color: var(--alpha-white-70); }
html.dark-mode nav:not(.dark-nav):not(.scrolled) .theme-toggle { color: var(--alpha-white-70); }/* When scrolled, nav bg is always dark — all navs get light text */
html.dark-mode nav.scrolled .nav-links > li > a { color: var(--alpha-white-70); }
html.dark-mode nav.scrolled .nav-links > li > a:hover { color: #E7EBF1; }
html.dark-mode nav.scrolled .nav-logo-img { filter: brightness(0) invert(1); }
html.dark-mode nav.scrolled .mobile-toggle { color: var(--white); }
html.dark-mode nav.scrolled .theme-toggle { color: var(--alpha-white-70); }
html.dark-mode nav.scrolled .mobile-toggle {
  color: var(--white);
}

/* Dropdowns */
html.dark-mode .nav-dropdown {
  background: var(--slate-800);
  border-color: var(--alpha-white-8);
  box-shadow: 0 20px 60px var(--alpha-black-50);
}

html.dark-mode .nav-dropdown a {
  color: var(--slate-200);
}

html.dark-mode .nav-dropdown a:hover {
  background: var(--alpha-white-5);
  color: var(--blue-light);
}

html.dark-mode .dd-title {
  color: var(--slate-50);
}

html.dark-mode .nav-dropdown a:hover .dd-title {
  color: var(--blue-light);
}

html.dark-mode .dd-desc {
  color: var(--slate-400);
}

html.dark-mode .dd-icon {
  background: var(--alpha-blue-light-12);
}

html.dark-mode .dd-icon.green { background: rgba(5, 150, 105, 0.15); }
html.dark-mode .dd-icon.navy  { background: rgba(30,64,175,0.2); }
html.dark-mode .dd-icon.cyan  { background: rgba(96,165,250,0.15); }

/* Version pills */
html.dark-mode .dd-ver {
  background: var(--alpha-blue-light-15);
  color: var(--blue-light);
}

html.dark-mode .dd-ver:hover {
  background: var(--blue);
  color: var(--white);
}

html.dark-mode .footer-deploy-versions a {
  background: var(--alpha-blue-light-15);
  color: var(--blue-light);
}

html.dark-mode .footer-deploy-versions a:hover {
  background: var(--blue);
  color: var(--white);
}

/* Buttons */
html.dark-mode .btn-secondary {
  background: var(--slate-800);
  border-color: var(--alpha-white-10);
  color: var(--slate-200);
}

html.dark-mode .btn-secondary:hover {
  border-color: var(--alpha-white-20);
  box-shadow: 0 4px 12px var(--alpha-black-30);
}

html.dark-mode .btn-ghost {
  color: var(--blue-light);
}

html.dark-mode .btn-ghost:hover {
  background: var(--alpha-blue-10);
}

/* Quote / testimonial cards */
html.dark-mode .testimonials-band .testimonial-card {
  background: var(--alpha-white-6);
  border-color: var(--alpha-white-8);
  border-top-color: var(--blue-light);
}

html.dark-mode .quote-card {
  border-top-color: var(--blue-light);
}

html.dark-mode .quote-card.quote-card--light {
  background: var(--alpha-white-4);
  border-color: var(--alpha-white-8);
  border-top: none;
  box-shadow: 0 4px 24px var(--alpha-black-20);
}

html.dark-mode .quote-card.quote-card--light::before {
  color: var(--blue-light);
  opacity: 0.12;
}

html.dark-mode .quote-card.quote-card--light:hover {
  border-color: var(--alpha-white-12);
  box-shadow: 0 10px 40px var(--alpha-black-30);
}

html.dark-mode .quote-card.quote-card--light .quote-body {
  color: rgba(235,238,243,0.9);
}

html.dark-mode .quote-card.quote-card--light .quote-author {
  border-top-color: var(--alpha-white-8);
}

html.dark-mode .quote-card.quote-card--light .quote-author-name {
  color: #EBEEF3;
}

html.dark-mode .quote-card.quote-card--light .quote-author-role {
  color: var(--slate-400);
}

html.dark-mode .quote-card.quote-card--light .quote-author-initial {
  background: var(--alpha-blue-light-20);
  border-color: var(--alpha-blue-light-25);
  color: var(--blue-light);
}

html.dark-mode .quote-author-initial {
  background: var(--alpha-white-8);
  border-color: var(--alpha-white-12);
  color: var(--alpha-white-75);
}

/* Testimonials band decoration */
html.dark-mode .testimonials-band::before {
  opacity: 0;
}

/* Footer */
html.dark-mode footer {
  background: #070B14;
}

/* Cookie banner (already dark, deepen slightly) */
html.dark-mode .cookie-banner {
  background: rgba(20,27,43,0.97);
}

/* Sticky CTA */
html.dark-mode .sticky-cta {
  background: rgba(7,11,20,0.95);
}

html.dark-mode .sticky-cta-btn {
  color: var(--white);
}

/* CTA section — dark-mode overrides. The s-light / s-gray variants collapse to
   a dark navy background so the card remains clearly visible on dark backgrounds. */
html.dark-mode .cta-section,
html.dark-mode .cta-section.s-light,
html.dark-mode .cta-section.s-gray {
  background: var(--navy);
}

html.dark-mode .cta-section .cta-card {
  box-shadow: 0 4px 40px var(--alpha-black-50);
}

/* Skeleton */
html.dark-mode .skeleton {
  background: linear-gradient(
    90deg,
    #1B2234 25%,
    #363D48 50%,
    #1B2234 75%
  );
  background-size: 200% 100%;
}

/* Dividers hidden in dark mode */
html.dark-mode .divider-svg {
  opacity: 0;
}

/* Hero */
html.dark-mode .hero h1 {
  color: #EBEEF3;
}

/* Breadcrumb */
html.dark-mode .breadcrumb a {
  color: var(--slate-400);
}

html.dark-mode .breadcrumb a:hover {
  color: var(--slate-300);
}

/* Content / legal pages */
html.dark-mode .legal-section {
  background: var(--navy);
}

html.dark-mode .legal-meta {
  border-bottom-color: var(--alpha-white-6);
  color: var(--slate-400);
}

html.dark-mode .legal-block h2 {
  color: #EBEEF3; /* literal — var(--slate-100) remaps to dark #141B2B */
}

html.dark-mode .prose h2 {
  color: #EBEEF3; /* literal — var(--slate-100) remaps to dark in theme-dark.css */
}

html.dark-mode .legal-num {
  background: var(--alpha-blue-light-15);
  color: var(--blue-light);
}

html.dark-mode .legal-block p,
html.dark-mode .legal-block li {
  color: var(--slate-300);
}

/* Generic card dark mode — broad but guarded against containers */
html.dark-mode [class*="-card"] {
  background: var(--slate-800);
  border-color: var(--alpha-white-6);
}

/* Card containers must remain transparent */
html.dark-mode [class*="-cards"],
html.dark-mode [class*="card-grid"],
html.dark-mode [class*="cards-"] {
  background: transparent;
  border-color: transparent;
}

/* Restore quote/testimonial card styles overridden above */
html.dark-mode .testimonials-band .testimonial-card {
  background: var(--alpha-white-6);
  border-color: var(--alpha-white-8);
  border-top-color: var(--blue-light);
}

html.dark-mode .quote-card {
  border-top-color: var(--blue-light);
}


/* ══════════════════════════════════════════════════════
   20A. SECTION HEADER COMPONENT
   Reusable centered or left-aligned section introduction.
   Usage: <div class="section-header [section-header--center]">
            <span class="section-eyebrow">LABEL</span>
            <h2 class="section-heading">Title</h2>
            <p class="section-lead">Description</p>
          </div>
   ══════════════════════════════════════════════════════ */

.section-header {
  margin-bottom: var(--space-10);
}

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

.section-header--center .section-eyebrow {
  justify-content: center;
}
/* Dash stays inline before text — same as left-aligned variant */

.section-header--center .section-lead {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.section-header .section-heading {
  margin-bottom: var(--space-3);
}

.section-header .section-lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  margin-bottom: 0;
}

/* Tighter variant for compact sections */
.section-header--tight {
  margin-bottom: var(--space-6);
}


/* ══════════════════════════════════════════════════════
   20B. STATS BAND COMPONENT
   Horizontal metrics row — works on light or dark bgs.
   Usage: <div class="stats-band [stats-band--dark]">
            <div class="stat-item">
              <span class="stat-value">99.9%</span>
              <span class="stat-label">Uptime</span>
            </div>
          </div>
   ══════════════════════════════════════════════════════ */

.stats-band {
  display: flex;
  justify-content: center;
  gap: var(--space-12);
  flex-wrap: wrap;
  padding: var(--space-8) var(--space-6);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
}

.stat-value {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--font-extrabold);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: var(--color-text);
}

.stat-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: var(--font-medium);
}

/* Dark variant */
.stats-band--dark .stat-value,
.s-dark .stat-value,
.s-deep .stat-value {
  color: var(--color-text-on-dark);
}

.stats-band--dark .stat-label,
.s-dark .stat-label,
.s-deep .stat-label {
  color: var(--alpha-white-60);
}

/* Product-tinted stat values */
[data-theme] .stat-value--accent {
  color: var(--product-accent-light, var(--blue-light));
}


/* ══════════════════════════════════════════════════════
   20C. FEATURE CARD COMPONENT
   Unified card for feature lists, step lists, icon cards.
   Replaces: .feature-card, .icon-card, .step-card,
             .value-card, .numbered-card, .how-step, etc.
   ══════════════════════════════════════════════════════ */

.fcard {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  transition:
    transform var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}

.fcard:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* Glass variant for dark sections */
.s-dark .fcard,
.s-deep .fcard,
.fcard--glass {
  background: var(--alpha-white-4);
  border-color: var(--alpha-white-8);
}

.s-dark .fcard:hover,
.s-deep .fcard:hover,
.fcard--glass:hover {
  background: var(--alpha-white-6);
  box-shadow: 0 10px 36px var(--alpha-black-20);
}

/* Card icon */
.fcard-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  font-size: 1.25rem;
  background: var(--blue-wash);
  color: var(--blue);
  border: 1px solid var(--blue-pale);
  transition: all var(--duration-normal);
}

.s-dark .fcard-icon,
.s-deep .fcard-icon {
  background: var(--alpha-blue-light-15);
  border-color: var(--alpha-blue-light-20);
  color: var(--blue-light);
}

/* Product-themed icon */
[data-theme] .fcard-icon--product {
  background: var(--product-accent-wash, var(--blue-wash));
  color: var(--product-accent, var(--blue));
  border-color: var(--product-accent-pale, var(--blue-pale));
}

.fcard:hover .fcard-icon {
  transform: scale(1.05);
}

/* Card number badge */
.fcard-num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--blue);
  margin-bottom: var(--space-3);
}

.s-dark .fcard-num,
.s-deep .fcard-num {
  color: var(--blue-light);
}

/* Card title */
.fcard-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
  letter-spacing: var(--tracking-tight);
}

.s-dark .fcard-title,
.s-deep .fcard-title {
  color: var(--color-text-on-dark);
}

/* Card description */
.fcard-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.s-dark .fcard-desc,
.s-deep .fcard-desc {
  color: var(--alpha-white-65);
}

/* Card with top border accent */
.fcard--bordered {
  border-top: 2px solid var(--blue);
}

[data-theme] .fcard--bordered {
  border-top-color: var(--product-accent);
}


/* ══════════════════════════════════════════════════════
   20D. LOGO BAR COMPONENT
   Row of trusted-by logos.
   ══════════════════════════════════════════════════════ */

.logo-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  flex-wrap: wrap;
  padding: var(--space-8) var(--space-6);
}

.logo-bar-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: var(--font-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--slate-400);
  width: 100%;
  text-align: center;
  margin-bottom: var(--space-2);
}

.logo-bar img {
  height: 24px;
  width: auto;
  opacity: 0.5;
  filter: grayscale(100%);
  transition: all var(--duration-normal);
}

.logo-bar img:hover {
  opacity: 0.8;
  filter: grayscale(0%);
}

/* Dark section logos */
.s-dark .logo-bar img,
.s-deep .logo-bar img {
  filter: grayscale(100%) brightness(0) invert(1);
  opacity: 0.4;
}

.s-dark .logo-bar img:hover,
.s-deep .logo-bar img:hover {
  opacity: 0.7;
  filter: brightness(0) invert(1);
}

.s-dark .logo-bar-label,
.s-deep .logo-bar-label {
  color: var(--alpha-white-30);
}


/* ══════════════════════════════════════════════════════
   20E. CTA CARD VARIANTS
   Product-themed CTA sections.
   ══════════════════════════════════════════════════════ */

/* Product-themed glow */
[data-theme] .cta-card::before {
  background: radial-gradient(
    ellipse at 50% 0%,
    var(--product-glow, rgba(37,99,235,0.15)) 0%,
    transparent 60%
  );
}

/* Gray background CTA section */
.cta-section--gray {
  background: var(--color-bg-alt);
}


/* ══════════════════════════════════════════════════════
   20F. CONTENT PROSE COMPONENT
   Shared body text styling for blog, press, legal pages.
   ══════════════════════════════════════════════════════ */

.prose {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

.prose h2 {
  font-size: var(--text-2xl);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  color: var(--navy);
}

.prose h3 {
  font-size: var(--text-xl);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.prose p {
  margin-bottom: var(--space-4);
}

.prose ul,
.prose ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
}

.prose li {
  margin-bottom: var(--space-2);
}

.prose a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose a:hover {
  color: var(--blue-dark);
}

.prose blockquote {
  border-left: 3px solid var(--blue);
  padding-left: var(--space-4);
  margin: var(--space-6) 0;
  color: var(--color-text-muted);
  font-style: italic;
}

.prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  margin: var(--space-6) 0;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
  font-size: var(--text-sm);
}

.prose th,
.prose td {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  text-align: left;
}

.prose th {
  background: var(--color-bg-alt);
  font-weight: var(--font-semibold);
}


/* ══════════════════════════════════════════════════════
   20G. PRODUCT THEMING
   Apply product-specific colors via data-theme on <html>.
   Usage: <html data-theme="suppress">
   ══════════════════════════════════════════════════════ */

/* Product accent overrides */
[data-theme="postlever"] {
  --product-accent: var(--blue);
  --product-accent-dark: var(--blue-dark);
  --product-accent-light: var(--blue-light);
  --product-accent-gradient: linear-gradient(135deg, var(--blue), var(--blue-dark));
  --product-accent-wash: var(--blue-wash);
  --product-accent-pale: var(--blue-pale);
  --product-glow: rgba(37,99,235,0.15);
}

/* Nav CTA picks up product theme automatically */
[data-theme] .nav-cta,
[data-theme] .nav-links > li > a.nav-cta {
  background: var(--product-accent);
}
[data-theme] .nav-cta:hover,
[data-theme] .nav-links > li > a.nav-cta:hover {
  background: var(--product-accent-dark);
}

/* Product pages: scrolled nav uses dark navy so links stay legible against the
   dark hero that occupies the top of every product page. */
[data-theme] nav.scrolled {
  background: var(--nav-scrolled-bg, var(--alpha-navy-dark-95));
  border-bottom: 1px solid var(--alpha-white-8);
  box-shadow: 0 2px 16px var(--alpha-black-30);
}
[data-theme] nav.scrolled .nav-logo { color: var(--white); }
[data-theme] nav.scrolled .nav-logo-img { filter: brightness(0) invert(1); }
[data-theme] nav.scrolled .nav-links > li > a { color: var(--alpha-white-75); }
[data-theme] nav.scrolled .nav-links > li > a:hover { color: var(--white); }
[data-theme] nav.scrolled .mobile-toggle { color: var(--white); }
/* Keep dropdown links legible on dark scrolled nav */
[data-theme] nav.scrolled .dropdown-menu a { color: var(--color-text); }

/* Un-scrolled nav on product pages: white text over dark hero.
   Uses .dark-nav to scope — pages with light heroes don't get .dark-nav */
[data-theme] nav.dark-nav:not(.scrolled) .nav-logo { color: var(--white); }
[data-theme] nav.dark-nav:not(.scrolled) .nav-logo-img { filter: brightness(0) invert(1); }
[data-theme] nav.dark-nav:not(.scrolled) .nav-links > li > a { color: var(--alpha-white-70); }
[data-theme] nav.dark-nav:not(.scrolled) .nav-links > li > a:hover { color: var(--white); }
[data-theme] nav.dark-nav:not(.scrolled) .mobile-toggle { color: var(--white); }

/* Theme toggle: better contrast on dark hero background */
[data-theme] nav.dark-nav:not(.scrolled) .theme-toggle {
  background: var(--alpha-white-15);
  border-color: var(--alpha-white-25);
}
[data-theme] nav.dark-nav:not(.scrolled) .theme-toggle .toggle-moon {
  color: var(--alpha-white-70);
}
[data-theme] nav.dark-nav:not(.scrolled) .theme-toggle .toggle-sun {
  color: var(--amber);
}

/* Section eyebrow label adopts product accent on product pages */
[data-theme] .section-eyebrow {
  color: var(--product-accent);
}
[data-theme] .section-eyebrow::before {
  background: var(--product-accent);
}
/* Dark sections on product pages use the lighter accent shade */
[data-theme] .s-dark .section-eyebrow,
[data-theme] .s-deep .section-eyebrow {
  color: var(--product-accent-light);
}
[data-theme] .s-dark .section-eyebrow::before,
[data-theme] .s-deep .section-eyebrow::before {
  background: var(--product-accent-light);
}

/* Hero gradient text uses product color */
[data-theme] .hero h1 .em {
  background: linear-gradient(135deg, var(--product-accent-light), var(--product-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Product pages: .btn-primary adopts the product accent colour.
   These rules live here (not in page inline styles) so the product
   colour system stays in one place. */
[data-theme="postlever"] .btn-ghost {
  background: transparent;
  border: none;
  color: var(--alpha-white-75);
  text-decoration: underline;
  text-underline-offset: 3px;
}
[data-theme="postlever"] .btn-ghost:hover {
  background: transparent;
  color: var(--white);
}

/* Product-themed buttons */
.btn--product {
  background: var(--product-accent-gradient);
  color: var(--white);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--alpha-white-10);
}
.btn--product:hover {
  background: var(--product-accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px var(--product-glow);
}

/* Product hero tag */
.hero-tag--product {
  background: var(--product-glow);
  border-color: var(--product-accent-light);
  color: var(--product-accent-pale);
}
.hero-tag--product .tag-dot {
  background: var(--product-accent-light);
  box-shadow: 0 0 8px var(--product-glow);
}

/* ── Product hero eyebrow — deploy, suppress, sms-suppress ──
   Overrides base .hero-eyebrow for dark product hero sections.
   Hides the ::before/::after dashes, shows accent dot instead. */
[data-theme] .hero-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--alpha-white-45);
  gap: var(--space-2);
  opacity: 0;
  transform: translateY(16px);
  animation: revealUp 0.8s var(--ease-out) 0.3s forwards;
}
[data-theme] .hero-eyebrow::before,
[data-theme] .hero-eyebrow::after {
  display: none;
}
.hero-eyebrow-dot {
  width: 5px;
  height: 5px;
  background: var(--product-accent-light, var(--cyan));
  border-radius: 50%;
  box-shadow: 0 0 8px var(--product-glow, rgba(96,165,250,0.4));
}


/* ================================================================
   COMING-SOON TOAST
   Shared by videos, case-studies, and research pages.
   JS: /js/toast.js  →  window.showToast(msg)
   ================================================================ */
.coming-soon-toast {
  position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--alpha-navy-dark-95); color: var(--white); padding: 0.85rem 1.5rem;
  border-radius: 10px; font-size: 0.9rem; font-weight: 500;
  box-shadow: 0 8px 32px var(--alpha-black-30); z-index: 10000;
  opacity: 0; transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none; white-space: nowrap;
  border: 1px solid var(--alpha-blue-light-20);
}
.coming-soon-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }


/* ================================================================
   SLOPE DIVIDERS
   Angled section separators with brand-accent flourish.
   Desktop: full slope. Mobile: reduced height, shallower angle.
   Dark mode: hidden (near-identical dark backgrounds = no contrast).
   ================================================================ */
.slope-divider {
  display: block;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  height: 80px;
  position: relative;
  z-index: 3;
}
/* Overlap variant: pulls upward into the section above so the
   SVG's transparent area shows the previous section's background
   through (no color matching needed). */
.slope-divider--overlap {
  margin-top: -80px;
  background: var(--white);
}
html.dark-mode .slope-divider--overlap {
  background: transparent;
}
.slope-divider--overlap + * {
  position: relative;
  z-index: 4;
}
.slope-divider svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* Dark mode slopes — direction-specific to handle inverted SVG structures:
   --dk-lt (dark above, light rect below): darken rect + deepen dark wedge
   --lt-dk (light polygon above, dark rect below): darken the light polygon
   --overlap (index.html custom): darken the white lower-half polygon */
/* deploy.html, deploy-v7.html: dark above (#0A0E19), light below (#101625 in dark mode) */
html.dark-mode .slope-divider--dk-lt svg rect { fill: #101625; }
html.dark-mode .slope-divider--dk-lt svg polygon:first-of-type { fill: #0A0E19; }
html.dark-mode .slope-divider--dk-lt svg polygon:nth-of-type(2) { opacity: 0.4; }
html.dark-mode .slope-divider--dk-lt svg polygon:nth-of-type(3) { opacity: 0.6; }
html.dark-mode .slope-divider--dk-lt svg polygon:last-of-type { opacity: 0.4; }

/* suppress.html: gray above (#0A0E19), deep below (#0A0E19 in dark mode) */
html.dark-mode .slope-divider--lt-dk svg rect { fill: #0A0E19; }
html.dark-mode .slope-divider--lt-dk svg polygon:first-of-type { fill: #101625; }
html.dark-mode .slope-divider--lt-dk svg polygon:nth-of-type(2) { opacity: 0.4; }
html.dark-mode .slope-divider--lt-dk svg polygon:nth-of-type(3) { opacity: 0.6; }
html.dark-mode .slope-divider--lt-dk svg polygon:last-of-type { opacity: 0.4; }

/* deploy-v7.html second slope: light above (#101625), deep below (#0A0E19 in dark mode) */
html.dark-mode .slope-divider--lt-dk-v7 svg rect { fill: #0A0E19; }
html.dark-mode .slope-divider--lt-dk-v7 svg polygon:first-of-type { fill: #101625; }
html.dark-mode .slope-divider--lt-dk-v7 svg polygon:nth-of-type(2) { opacity: 0.4; }
html.dark-mode .slope-divider--lt-dk-v7 svg polygon:nth-of-type(3) { opacity: 0.6; }
html.dark-mode .slope-divider--lt-dk-v7 svg polygon:last-of-type { opacity: 0.4; }

/* Dark mode: transparent top (advantage gradient shows through),
   triangle matches testimonials-band top (#070B14), glow dimmed */
html.dark-mode .slope-divider--overlap svg .slope-fill { fill: #070B14; }
html.dark-mode .slope-divider--overlap svg polygon:nth-of-type(2) { opacity: 0.4; }
html.dark-mode .slope-divider--overlap svg polygon:nth-of-type(3) { opacity: 0.6; }
html.dark-mode .slope-divider--overlap svg polygon:last-of-type { opacity: 0.4; }
@media (max-width: 768px) {
  .slope-divider { height: 36px; }
  .slope-divider--overlap { margin-top: -36px; }
}

/* ── Diagonal clip-path section transitions ──
   Apply .section-clip to any section that needs a diagonal bottom edge.
   The section below gets +60px top padding via .section-clip + * */
.section-clip {
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 0 100%);
  margin-bottom: -60px;
  z-index: 2;
}
.section-clip::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 16px;
  background: linear-gradient(to right, transparent 0%, rgba(59,130,246,0.35) 15%, rgba(96,165,250,0.65) 50%, rgba(96,165,250,0.35) 85%, transparent 100%);
  filter: blur(4px);
  z-index: 10;
  pointer-events: none;
}
/* Emerald glow variant */
.section-clip--emerald::after {
  background: linear-gradient(to right, transparent 0%, rgba(52,211,153,0.3) 15%, rgba(110,231,183,0.6) 50%, rgba(16,185,129,0.3) 85%, transparent 100%);
}
/* Section following a clip gets extra top padding for the diagonal */
.section-clip + * {
  position: relative;
  z-index: 1;
  padding-top: calc(var(--space-24) + 30px) !important;
}
@media (max-width: 768px) {
  .section-clip {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 36px), 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 36px), 0 100%);
    margin-bottom: -36px;
  }
  .section-clip + * {
    padding-top: calc(var(--space-16) + 18px) !important;
  }
}
@media (max-width: 480px) {
  .section-clip {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), 0 100%);
    margin-bottom: -24px;
  }
  .section-clip + * {
    padding-top: calc(var(--space-12) + 12px) !important;
  }
}

/* ══════════════════════════════════════════════════════
   21. RESPONSIVE — CONSOLIDATED MEDIA QUERIES
   Breakpoints: 1920px (ultrawide) / 900px (tablet nav)
                768px (mobile grid) / 480px (mobile)
   ══════════════════════════════════════════════════════ */

/* ── Ultrawide constraint ── */
@media (min-width: 1920px) {
  /* nav-inner now uses --container-nav which switches automatically */

  /* Hero */
  .hero { padding: 9rem var(--space-12) var(--space-24); }
  .hero-content { max-width: 900px; }

  /* Stats band */
  .stats-band { gap: var(--space-16); }

  /* Feature cards */
  .fcard { padding: var(--space-10); }
}

/* ── Large desktop (≤ 1200px) ── */
@media (max-width: 1200px) {
  /* Hero */
  .hero { padding: 7rem var(--space-8) var(--space-16); }
  .hero-content { max-width: 700px; }

  /* Section headers */
  .section-header { margin-bottom: var(--space-8); }

  /* Stats band */
  .stats-band { gap: var(--space-8); }

  /* Logo bar */
  .logo-bar { gap: var(--space-6); }
  .logo-bar img { height: 20px; }
}

/* ── Pre-collapse: reduce link gap on narrower desktop (900–1100px) ── */
@media (max-width: 1100px) {
  .nav-links { gap: 1.25rem; }
  .nav-links > li > a { font-size: 0.82rem; }
}

/* ── Tablet / nav collapse (≤ 900px) ── */
@media (max-width: 1079px) {

  /* Navigation */
  nav {
    padding: 0.9rem var(--space-5);
  }

  nav.scrolled {
    padding: 0.7rem var(--space-5);
  }

  .nav-links {
    display: none;
  }

  .mobile-toggle {
    display: block;
  }

  /* ── Premium Mobile Menu ── */
  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: var(--z-mobile-nav);
    background: linear-gradient(
      160deg,
      #0D121F 0%,
      #141B2B 40%,
      #1B2234 70%,
      #0D121F 100%
    );
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    display: none;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .mobile-menu.open {
    display: flex;
    animation: mobileMenuSlideIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--alpha-white-6);
    position: sticky;
    top: 0;
    z-index: 1;
    background: linear-gradient(160deg, #0D121F 0%, #141B2B 100%);
  }

  .mobile-menu-header .nav-logo-img {
    height: 26px;
    filter: brightness(0) invert(1);
  }

  .mobile-menu-body {
    flex: 1;
    padding: var(--space-6) var(--space-6) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .mobile-menu a {
    color: var(--alpha-white-85);
    text-decoration: none;
    font-size: 1rem;
    font-weight: var(--font-medium);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    transition: all 0.25s ease;
    opacity: 0;
    transform: translateX(20px);
    animation: mobileItemStagger 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  .mobile-menu a.mobile-dim { opacity: 0.45; }

  /* Staggered entrance for each link */
  .mobile-menu a:nth-child(1)  { animation-delay: 0.06s; }
  .mobile-menu a:nth-child(2)  { animation-delay: 0.09s; }
  .mobile-menu a:nth-child(3)  { animation-delay: 0.12s; }
  .mobile-menu a:nth-child(4)  { animation-delay: 0.15s; }
  .mobile-menu a:nth-child(5)  { animation-delay: 0.18s; }
  .mobile-menu a:nth-child(6)  { animation-delay: 0.21s; }
  .mobile-menu a:nth-child(7)  { animation-delay: 0.24s; }
  .mobile-menu a:nth-child(8)  { animation-delay: 0.27s; }
  .mobile-menu a:nth-child(9)  { animation-delay: 0.30s; }
  .mobile-menu a:nth-child(10) { animation-delay: 0.33s; }
  .mobile-menu a:nth-child(11) { animation-delay: 0.36s; }
  .mobile-menu a:nth-child(12) { animation-delay: 0.39s; }

  .mobile-menu a:hover,
  .mobile-menu a:active {
    background: var(--alpha-white-6);
    color: var(--white);
  }

  .mobile-menu a.nav-cta {
    background: var(--blue);
    color: var(--white);
    text-align: center;
    margin-top: var(--space-3);
    font-weight: var(--font-semibold);
    border-radius: var(--radius-lg);
    padding: 0.85rem var(--space-4);
  }

  .mobile-menu a.nav-cta:hover {
    background: var(--blue-dark);
  }

  .mobile-section-label {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--alpha-blue-light-70);
    margin: var(--space-4) 0 var(--space-1);
    padding-left: var(--space-4);
    opacity: 0;
    animation: mobileItemStagger 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .mobile-section-label:nth-child(1)  { animation-delay: 0.04s; }
  .mobile-section-label:nth-child(n+2) { animation-delay: 0.20s; }

  .mobile-close {
    width: 36px;
    height: 36px;
    background: var(--alpha-white-6);
    border: 1px solid var(--alpha-white-10);
    border-radius: var(--radius-md);
    color: var(--alpha-white-70);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-normal);
  }

  .mobile-close:hover {
    background: var(--alpha-white-10);
    color: var(--white);
  }

  .mobile-menu-footer {
    padding: var(--space-4) var(--space-6) var(--space-6);
    border-top: 1px solid var(--alpha-white-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }

  .mobile-menu-footer .mobile-footer-text {
    font-size: 0.72rem;
    color: var(--alpha-white-30);
    text-align: center;
    line-height: 1.5;
  }

  .mobile-menu-footer .mobile-footer-text a {
    color: var(--alpha-blue-light-70);
    font-size: 0.72rem;
    padding: 0;
    margin: 0;
    display: inline;
    opacity: 1;
    transform: none;
    animation: none;
  }

}
@media (max-width: 900px) {
  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  /* Cookie banner */
  .cookie-banner {
    padding: var(--space-4);
    gap: var(--space-4);
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .cookie-banner p {
    max-width: 100%;
  }

  .cookie-btns {
    justify-content: center;
  }

  /* Testimonials grid */
  .testimonial-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .testimonials-band {
    padding: var(--space-12) var(--space-5) var(--space-10);
  }

  .testimonials-band .testimonial-card,
  .quote-card {
    padding: 1.4rem var(--space-5) var(--space-5);
  }

  .testimonials-band h2 {
    margin-bottom: var(--space-6);
  }

  /* Section headers */
  .section-header { margin-bottom: var(--space-6); }
  .section-header .section-lead { font-size: var(--text-base); }

  /* Stats band */
  .stats-band { gap: var(--space-6); padding: var(--space-6) var(--space-4); }
  .stat-value { font-size: var(--text-3xl); }

  /* Feature cards */
  .fcard { padding: var(--space-6); }
  .fcard-icon { width: 42px; height: 42px; font-size: 1.1rem; }
  .fcard-title { font-size: var(--text-lg); }

  /* Logo bar */
  .logo-bar { gap: var(--space-4); padding: var(--space-4); }
  .logo-bar img { height: 18px; }

  /* Prose */
  .prose { font-size: var(--text-sm); }

  /* Hero */
  .hero {
    min-height: auto;
    padding: 6.5rem var(--space-6) var(--space-12);
  }
  .hero-content { max-width: 100%; }
  .hero h1 { white-space: normal; }
  .hero-glow { width: 500px; height: 400px; }

  /* CTA section */
  .cta-section {
    padding: var(--space-12) var(--space-6);
  }

  .cta-actions {
    flex-direction: column;
    align-items: center;
  }

  .cta-card {
    padding: var(--space-10) var(--space-6);
    border-radius: var(--radius-xl);
  }

  /* Legal / content pages */
  .legal-section {
    padding: var(--space-12) var(--space-6) var(--space-16);
  }
}

/* ── Mobile grid (≤ 768px) ── */
@media (max-width: 768px) {

  .testimonial-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  /* Stats band — stack on narrow tablets */
  .stats-band { flex-direction: column; gap: var(--space-4); }
  .stat-item { flex-direction: row; gap: var(--space-3); }
  .stat-value { font-size: var(--text-2xl); }

  /* Logo bar — tighter */
  .logo-bar { gap: var(--space-3); }

  /* Hero */
  .hero { padding: 6rem var(--space-4) var(--space-10); }
  .hero-actions { flex-direction: column; align-items: center; }
}

/* ── Mobile (≤ 480px) ── */
@media (max-width: 480px) {

  /* Nav */
  nav {
    padding: var(--space-3) var(--space-4);
  }

  nav.scrolled {
    padding: 0.6rem var(--space-4);
  }

  .nav-logo-img {
    height: 24px;
  }

  .mobile-menu a {
    font-size: 0.95rem;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  footer {
    padding: var(--space-8) var(--space-4) var(--space-6);
  }

  .footer-col h4 {
    font-size: 0.7rem;
  }

  .footer-col a {
    font-size: 0.75rem;
  }

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

  /* Cookie banner */
  .cookie-banner {
    padding: var(--space-3);
    gap: var(--space-3);
  }

  .cookie-banner p {
    font-size: 0.75rem;
  }

  /* Sticky CTA */
  .sticky-cta {
    padding: 0.6rem var(--space-4);
    gap: var(--space-4);
  }

  .sticky-cta-text {
    display: none;
  }

  /* Buttons */
  .btn-lg {
    padding: var(--space-3) var(--space-6);
    font-size: 1rem;
  }

  /* Section headers */
  .section-header { margin-bottom: var(--space-4); }

  /* Stats band */
  .stats-band { padding: var(--space-4) var(--space-2); gap: var(--space-3); }
  .stat-value { font-size: var(--text-xl); }
  .stat-label { font-size: var(--text-xs); }

  /* Feature cards */
  .fcard { padding: var(--space-5); }
  .fcard-icon { width: 38px; height: 38px; font-size: 1rem; margin-bottom: var(--space-3); }
  .fcard-title { font-size: var(--text-base); }

  /* Logo bar */
  .logo-bar img { height: 16px; }

  /* Hero */
  .hero {
    padding: 5.5rem var(--space-4) var(--space-8);
    min-height: auto;
  }

  .hero h1 {
    font-size: clamp(2rem, 8vw, 2.5rem);
  }

  .hero-tag { font-size: 0.72rem; padding: 0.3rem 0.8rem 0.3rem 0.5rem; }
  .hero-glow { width: 300px; height: 250px; }

  /* CTA */
  .cta-section {
    padding: var(--space-8) var(--space-4) var(--space-10);
  }

  .cta-card {
    padding: 1.75rem var(--space-5);
  }

  .cta-card h2 {
    font-size: clamp(1.5rem, 5.5vw, 2rem);
  }

  .cta-actions {
    gap: var(--space-3);
  }

  .cta-actions .btn-primary,
  .cta-actions .btn-ghost-dark {
    width: 100%;
    justify-content: center;
  }

  /* Legal pages */
  .legal-section {
    padding: var(--space-8) var(--space-4) var(--space-12);
  }

  .legal-meta {
    flex-direction: column;
    gap: var(--space-3);
  }

  .legal-block h2 {
    font-size: 1.15rem;
  }
}

/* ═══ animations.css ═══ */
/* =============================================================================
   animations.css — Consolidated animation definitions
   Source of truth for all @keyframes, scroll-driven animations, the reveal
   system, and motion-preference overrides.

   DO NOT define @keyframes elsewhere in the codebase. Reference this file
   instead.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. Core utility keyframes (extracted from styles.css)
   ----------------------------------------------------------------------------- */

/* Used by .reveal system (JS-driven scroll reveal fallback) */
@keyframes revealUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* Floating icon / decorative element bob */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* Fallback: ensures .reveal elements become visible even if JS never runs.
   After 2.5 s the element animates itself visible without needing .visible. */
@keyframes reveal-fallback {
  to { opacity: 1; transform: translateY(0); }
}

/* Page-transition cross-fade (View Transitions API) */
@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Cookie banner entrance */
@keyframes cookieSlideUp {
  to { transform: translateY(0); }
}

/* Mobile menu panel slide-in */
@keyframes mobileMenuSlideIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* Mobile menu item stagger (applied per nth-child with animation-delay) */
@keyframes mobileItemStagger {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Reading-progress bar (scroll-timeline driven) */
@keyframes readProgress {
  to { transform: scaleX(1); }
}

/* Loading skeleton shimmer */
@keyframes shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}


/* -----------------------------------------------------------------------------
   2. Page-level decorative keyframes
      (previously duplicated inline across 5+ page <style> blocks)
   ----------------------------------------------------------------------------- */

/* Animated mesh/gradient background shift — suppress, sms-suppress, case-studies,
   videos, etc. */
@keyframes meshShift {
  0%   { background-position:   0%   0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position:   0%   0%; }
}

/* Slow floating for hero decorative shapes — compliance pages, case-studies */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0)     rotate(0deg); }
  50%       { transform: translateY(-15px) rotate(2deg); }
}

/* Pulsing status / live indicator dot — about, hero variations */
@keyframes pulse-dot {
  0%, 100% { transform: scale(1);   opacity: 0.6; }
  50%       { transform: scale(1.3); opacity: 1; }
}

/* SVG path draw-on — about page diagram lines */
@keyframes draw-line {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

/* Gradient text / background colour cycle — about page highlights */
@keyframes gradient-shift {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

/* Soft opacity pulse for decorative glow overlays */
@keyframes glow-pulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 0.7; }
}

/* Reverse float — case-studies decorative shapes */
@keyframes floatReverse {
  0%, 100% { transform: translateY(0)    rotate(0deg); }
  50%       { transform: translateY(10px) rotate(-2deg); }
}

/* Pulsing ring — videos play button, security page */
@keyframes pulse-ring {
  0%   { transform: translate(-50%,-50%) scale(1); opacity: 0.6; }
  100% { transform: translate(-50%,-50%) scale(1.8); opacity: 0; }
}

/* Security page: radar sweep rotation */
@keyframes sweep {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Security page: SVG check-mark draw-on */
@keyframes check-draw {
  to { stroke-dashoffset: 0; }
}

/* Glossary page: box-shadow pulse glow */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0.15); }
  50%       { box-shadow: 0 0 0 8px rgba(37,99,235,0); }
}

/* Email-compliance / general: simple opacity pulse */
@keyframes pulse {
  0%, 100% { opacity: 0.15; }
  50%       { opacity: 0.3; }
}

/* 404 page: ambient background transform */
@keyframes errorAmbient {
  0%   { transform: translate(0, 0) rotate(0deg); }
  33%  { transform: translate(2%, -1%) rotate(1deg); }
  66%  { transform: translate(-1%, 2%) rotate(-0.5deg); }
  100% { transform: translate(1%, -2%) rotate(0.5deg); }
}

/* Contact page: spinner */
@keyframes btnSpin {
  to { transform: rotate(360deg); }
}

/* Contact page: success check pop */
@keyframes successPop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

/* suppress-offer-mockup: generic spin */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* about page: counter / icon reverse spin */
@keyframes counter-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* about page: timeline travel-along (offset-path) */
@keyframes travel-along {
  0%   { offset-distance: 0%;   opacity: 0; }
  6%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* about page: SVG map node pulse ring */
@keyframes node-pulse {
  0%   { opacity: 0.6; r: 5; }
  100% { opacity: 0;   r: 20; }
}

/* about page: world-map SVG breathing glow */
@keyframes map-breathe {
  0%, 100% { filter: drop-shadow(0 0  0px rgba(37,99,235,0)); }
  50%       { filter: drop-shadow(0 0 18px rgba(37,99,235,0.18)); }
}

/* about page: vertical timeline scanner */
@keyframes timeline-pulse {
  0%   { top: -40px; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: calc(100% + 10px); opacity: 0; }
}

/* Hero parallax scroll depth (scroll-timeline guard kept in HTML with @supports) */
@keyframes heroParallax {
  from { transform: translateY(0); }
  to   { transform: translateY(80px); }
}

/* suppress / sms-suppress: flow-node pop-in */
@keyframes flowNodePop {
  from { opacity: 0; transform: scale(0.9) translateY(8px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* suppress / sms-suppress: inline particle travel */
@keyframes particleMove {
  0%   { left: 0; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: calc(100% - 4px); opacity: 0; }
}

/* suppress: entity fade-in */
@keyframes entityFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* suppress: entity float */
@keyframes entityFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* suppress: SVG dash-flow travel */
@keyframes dashFlow {
  to { stroke-dashoffset: -20; }
}

/* suppress: crossover node rise */
@keyframes crossoverUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* suppress: bar chart grow */
@keyframes barGrow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* suppress: ring/halo pulse */
@keyframes ringPulse {
  0%   { transform: scale(1);   opacity: 0.5; }
  50%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1);   opacity: 0; }
}

/* suppress: panel float */
@keyframes panelFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* suppress: panel pulse */
@keyframes panelPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(37,99,235,0.08); }
  50%       { box-shadow: 0 4px 32px rgba(37,99,235,0.2); }
}

/* suppress: green pulse (live dot) */
@keyframes pulseGreen {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
  50%       { opacity: 0.7; box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}

/* suppress: amber flash (alert dot) */
@keyframes flashAmber {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* suppress: generic glow pulse */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0.2); }
  50%       { box-shadow: 0 0 0 6px rgba(37,99,235,0); }
}

/* suppress: DB border draw */
@keyframes dbBorderDraw {
  from { stroke-dashoffset: 500; }
  to   { stroke-dashoffset: 0; }
}

/* suppress: DB card border draw */
@keyframes dbCardBorderDraw {
  from { stroke-dashoffset: 300; }
  to   { stroke-dashoffset: 0; }
}

/* sms-suppress: primary card glow pulse */
@keyframes smsCardGlow {
  0%, 100% { box-shadow: 0 4px 20px rgba(37,99,235,0.08); }
  50%       { box-shadow: 0 4px 28px rgba(37,99,235,0.22), 0 0 0 1px rgba(37,99,235,0.1); }
}

/* sms-suppress: DNC status dot pulse */
@keyframes smsDotPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(5,150,105,0.5); }
  50%       { opacity: 0.7; box-shadow: 0 0 0 5px rgba(5,150,105,0); }
}

/* sms-suppress: arrow dash travel */
@keyframes smsDashTravel {
  to { stroke-dashoffset: -20; }
}

/* sms-suppress: fan-out dash travel */
@keyframes smsDashTravelFan {
  to { stroke-dashoffset: -16; }
}

/* index / deploy: CTA button gradient cycle */
@keyframes btnGradient {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

/* index: CTA button shimmer sweep */
@keyframes btnShimmer {
  0%, 80%, 100% { left: -100%; }
  40%            { left: 150%; }
}

/* index: background grid drift */
@keyframes gridDrift {
  0%, 100% { background-position: 0 0; }
  50%       { background-position: 8px 8px; }
}

/* index: hero ribbon strands */
@keyframes ribbonA {
  0%, 100% { d: path("M 0 300 Q 400 200 800 300 Q 1200 400 1600 300"); }
  50%       { d: path("M 0 280 Q 400 380 800 280 Q 1200 180 1600 280"); }
}
@keyframes ribbonB {
  0%, 100% { d: path("M 0 320 Q 400 420 800 320 Q 1200 220 1600 320"); }
  50%       { d: path("M 0 340 Q 400 240 800 340 Q 1200 440 1600 340"); }
}
@keyframes ribbonC {
  0%, 100% { d: path("M 0 310 Q 400 210 800 310 Q 1200 410 1600 310"); }
  50%       { d: path("M 0 330 Q 400 430 800 330 Q 1200 230 1600 330"); }
}

/* index: check-mark pulse ring */
@keyframes checkPulseRing {
  0%   { transform: scale(1);   opacity: 0.5; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* index: swirl / orbit spin */
@keyframes swirlSpin {
  to { transform: rotate(360deg); }
}

/* index: swirl path length animations */
@keyframes swirlLen1 { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -120; } }
@keyframes swirlLen2 { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -100; } }
@keyframes swirlLen3 { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -80; } }
@keyframes swirlLen4 { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -60; } }
@keyframes swirlLen5 { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -40; } }

/* index: radar pulse ring */
@keyframes radarPulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(2);   opacity: 0; }
}

/* index: radar sweep rotation */
@keyframes radarSweep {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* index: orrery ring orbits */
@keyframes orreryRing1 { to { transform: rotate(360deg); } }
@keyframes orreryRing2 { to { transform: rotate(360deg); } }
@keyframes orreryRing3 { to { transform: rotate(360deg); } }

/* index: centre node pulse */
@keyframes centerPulse {
  0%, 100% { r: 8;  opacity: 0.8; }
  50%       { r: 12; opacity: 0.4; }
}

/* index: network node pop */
@keyframes nodePop {
  0%   { opacity: 0; r: 0; }
  60%  { opacity: 1; r: 7; }
  100% { opacity: 1; r: 5; }
}

/* index: orbit particles */
@keyframes orbitParticle1 { to { transform: rotate(360deg); } }
@keyframes orbitParticle2 { to { transform: rotate(360deg); } }
@keyframes orbitParticle3 { to { transform: rotate(360deg); } }

/* index: compliance list slide-in */
@keyframes listSlideIn {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* index: SVG check draw */
@keyframes checkDraw {
  to { stroke-dashoffset: 0; }
}

/* index: shield glow */
@keyframes shieldGlow {
  0%, 100% { filter: drop-shadow(0 0  4px rgba(37,99,235,0.3)); }
  50%       { filter: drop-shadow(0 0 12px rgba(37,99,235,0.6)); }
}

/* index: plane float */
@keyframes planeFloat {
  0%, 100% { transform: translate(0, 0) rotate(-8deg); }
  50%       { transform: translate(4px, -6px) rotate(-5deg); }
}

/* index: trail fade */
@keyframes trailFade {
  0%   { opacity: 0.6; }
  100% { opacity: 0; }
}

/* index: destination pulse */
@keyframes destPulse {
  0%   { r: 4; opacity: 0.8; }
  100% { r: 10; opacity: 0; }
}

/* index: SMS bubble slide-in */
@keyframes smsBubbleIn {
  from { opacity: 0; transform: translateY(8px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* index: signal pulse rings */
@keyframes signalPulse {
  0%   { transform: scale(1);   opacity: 0.5; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* index v16: badge floats */
@keyframes v16badgeFloat1 {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
@keyframes v16badgeFloat2 {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
@keyframes v16badgeFloat3 {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

/* index v16: general pulse */
@keyframes v16pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.3); }
}

/* index v16: float */
@keyframes v16float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

/* index v16: bar grow */
@keyframes v16barGrow { to { transform: scaleY(1); } }

/* index v16: floating card */
@keyframes v16floatCard {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* index v17: block scale-in */
@keyframes v17blockScale {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 0.75; transform: scale(1); }
}

/* index v17: block float */
@keyframes v17blockFloat {
  0%, 100% { transform: translateY(0)     rotate(0deg); }
  50%       { transform: translateY(-10px) rotate(1deg); }
}

/* index v17: slide in from left */
@keyframes v17SlideInLeft {
  to { opacity: 1; transform: translateX(0); }
}

/* index v17: slide in from right */
@keyframes v17SlideInRight {
  to { opacity: 1; transform: translateX(0); }
}

/* index v21: typewriter effect widths */
@keyframes v21type1   { from { width: 0; } to { width: 49ch; } }
@keyframes v21type2   { from { width: 0; } to { width: 23ch; } }
@keyframes v21cursor  {
  0%, 100% { border-color: rgba(96,165,250,0.7); }
  50%       { border-color: transparent; }
}
@keyframes v21appear       { to { opacity: 1; } }
@keyframes v21appearWidth  { to { opacity: 1; width: auto; border-right: none; } }

/* index v22: float */
@keyframes v22float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

/* index v23: data visualisation draw/fill keyframes */
@keyframes v23DrawLine   { to { stroke-dashoffset: 0; } }
@keyframes v23DotIn      { to { opacity: 1; } }
@keyframes v23BarGrow    { to { transform: scaleY(1); } }
@keyframes v23DonutFill  { to { stroke-dashoffset: 1; } }

@keyframes v23DrawText {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}
@keyframes v23TextBreath {
  0%, 100% { opacity: 0.9; }
  50%       { opacity: 1; }
}
@keyframes v23TextGlow {
  0%, 100% { text-shadow: 0 0 8px rgba(96,165,250,0.3); }
  50%       { text-shadow: 0 0 20px rgba(96,165,250,0.7); }
}
@keyframes v23TextShimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes v23TextBreathDark {
  0%, 100% { opacity: 0.85; }
  50%       { opacity: 1; }
}
@keyframes v23TextGlowDark {
  0%, 100% { text-shadow: 0 0 8px rgba(96,165,250,0.2); }
  50%       { text-shadow: 0 0 16px rgba(96,165,250,0.5); }
}
@keyframes v23ScrollShift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes v23DrawSine   { to { stroke-dashoffset: 0; } }
@keyframes v23DrawCoord  { to { stroke-dashoffset: 0; } }
@keyframes v23FloatSlow  {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
@keyframes v23FloatMed {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}
@keyframes v23FloatFast {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-16px); }
}
@keyframes v23PulseOpacity {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 0.8; }
}
@keyframes v23PenTrace {
  0%   { stroke-dashoffset: 200; opacity: 0; }
  10%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes v23TypeIn {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes v23DotPop {
  0%   { opacity: 0; r: 0; }
  60%  { r: 6; }
  100% { opacity: 1; r: 4; }
}
@keyframes v23BarSpring {
  0%   { transform: scaleY(0); }
  70%  { transform: scaleY(1.05); }
  100% { transform: scaleY(1); }
}
@keyframes v23DonutSmooth {
  from { stroke-dashoffset: 440; }
  to   { stroke-dashoffset: 110; }
}
@keyframes v23CursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
@keyframes v23CursorFadeOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes v23BtnPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(37,99,235,0.3); }
  50%       { box-shadow: 0 4px 40px rgba(37,99,235,0.6); }
}
@keyframes v23LogoReveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}
@keyframes v23LabelShimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes v23EmailPulse {
  0%, 100% { transform: scale(1);   opacity: 0.6; }
  50%       { transform: scale(1.1); opacity: 1; }
}
@keyframes v23NnPulse { 0% { r: 6; opacity: 1; } 100% { r: 10; opacity: 0.3; } }
@keyframes v23MatrixFall {
  0%   { transform: translateY(-100%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(100%);  opacity: 0; }
}
@keyframes v23TreeDraw    { to { stroke-dashoffset: 0; } }
@keyframes v23TreeNodeIn  { to { opacity: 1; } }
@keyframes v23WaveScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes v23GlitchFlash {
  0%, 90%, 100% { opacity: 1;   transform: translate(0, 0); }
  92%           { opacity: 0.8; transform: translate(-2px, 1px); }
  94%           { opacity: 0.9; transform: translate(2px, -1px); }
  96%           { opacity: 0.7; transform: translate(-1px, 2px); }
}
@keyframes v23MobileFill {
  from { background-position: -200% center; }
  to   { background-position:  200% center; }
}
@keyframes v23MobileFillDark {
  from { background-position: -200% center; }
  to   { background-position:  200% center; }
}

/* index: analytics chart keyframes */
@keyframes bpDrawLine  { to { stroke-dashoffset: 0; } }
@keyframes bpDotAppear { to { opacity: 1; } }
@keyframes bpBarGrow   { to { transform: scaleY(1); } }
@keyframes bpDonutFill { to { stroke-dashoffset: 0; } }

/* deploy / hero-v13 / hero-circuit: chip breathing glow */
@keyframes chipBreath {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(59,130,246,0.25)); }
  50%       { filter: drop-shadow(0 0 8px rgba(59,130,246,0.55)); }
}
@keyframes espBreath {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(96,165,250,0.18)); }
  50%       { filter: drop-shadow(0 0 6px rgba(96,165,250,0.42)); }
}

/* deploy (d5-prefixed): deploy page section keyframes */
@keyframes d5-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(1.4); }
}
@keyframes d5-grid-scroll {
  to { background-position: 0 40px; }
}
@keyframes d5-cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
@keyframes d5-gradient-fade {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}
@keyframes d5-btn-grad {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}
@keyframes d5-btn-shine {
  0%, 75%, 100% { left: -100%; }
  35%            { left: 150%; }
}
@keyframes d5-float-1 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes d5-float-2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes d5-float-3 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes d5-reveal {
  to { opacity: 1; transform: none; }
}
@keyframes d5-arrow-pulse {
  0%, 100% { opacity: 0.4; transform: translateX(0); }
  50%       { opacity: 1;   transform: translateX(4px); }
}
@keyframes d5-spin-slow {
  to { transform: rotate(360deg); }
}
@keyframes d5-pulse-ring-out {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(2.5); opacity: 0; }
}
@keyframes d5-dash-flow {
  to { stroke-dashoffset: -20; }
}
@keyframes d5-esp-pulse {
  0%, 100% { box-shadow: 0 0 4px var(--esp-color); }
  50%       { box-shadow: 0 0 12px var(--esp-color), 0 0 24px var(--esp-color); }
}
@keyframes d5-wf-spine-travel {
  to { stroke-dashoffset: 0; }
}
@keyframes d5-signal-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes d5-bridge-dot-fwd {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}
@keyframes d5-bridge-dot-rev {
  from { offset-distance: 100%; }
  to   { offset-distance: 0%; }
}
@keyframes d5-em-reveal {
  to { clip-path: inset(0 0% 0 0); }
}
@keyframes d5-em-glow {
  0%   { left: 0; opacity: 0; }
  20%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* deploy-v7 (prefixed): deploy-v7 page section keyframes */
@keyframes circuitDraw  { to { stroke-dashoffset: 0; } }
@keyframes nodeAppear   { to { opacity: 1; } }
@keyframes glowShift {
  0%   { opacity: 1;   transform: translateX(0); }
  100% { opacity: 0.7; transform: translateX(1.5%); }
}
@keyframes orchSpin  {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes orchPulse {
  0%, 100% { opacity: 0.5; transform: translate(-50%,-50%) scale(1); }
  50%       { opacity: 1;   transform: translate(-50%,-50%) scale(1.22); }
}
@keyframes espDotPulse {
  0%, 100% { box-shadow: 0 0 4px var(--esp-color); }
  50%       { box-shadow: 0 0 12px var(--esp-color), 0 0 24px var(--esp-color); }
}
@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
@keyframes connPulse {
  0%   { stroke-opacity: 0.25; }
  50%  { stroke-opacity: 0.75; }
  100% { stroke-opacity: 0.25; }
}
@keyframes slpRowIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes cpUploadPulse {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}
@keyframes sparkSpin {
  to { transform: rotate(360deg); }
}
@keyframes bgpRowIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes syncRotate {
  to { transform: rotate(360deg); }
}
@keyframes epDotPulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(1.3); }
}
@keyframes espFleetPulse {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}
@keyframes heroGradFlow {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}
@keyframes phraseExit {
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes phraseEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes epCursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
@keyframes epRowActive {
  0%, 100% { background: rgba(59,130,246,0); }
  50%       { background: rgba(59,130,246,0.06); }
}
@keyframes epVarFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}
@keyframes epTyping {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes dnsScanLine {
  from { top: 0; }
  to   { top: 100%; }
}
@keyframes dnsRowReveal {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes dnsCountUp {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes dnsBadgeGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.3); }
  50%       { box-shadow: 0 0 8px 2px rgba(34,197,94,0.2); }
}
@keyframes heroCursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* hero-v12: blob drift */
@keyframes v12-blob-drift {
  0%   { transform: translate(-50%, -50%) scale(1)    translateX(0px)    translateY(0px); }
  33%  { transform: translate(-50%, -50%) scale(1.08) translateX(60px)   translateY(-30px); }
  66%  { transform: translate(-50%, -50%) scale(0.95) translateX(-40px)  translateY(20px); }
  100% { transform: translate(-50%, -50%) scale(1.05) translateX(20px)   translateY(-15px); }
}

/* hero-v12: status dot pulse */
@keyframes v12-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(1.4); }
}

/* hero-v12: button gradient */
@keyframes v12-btn-grad {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

/* hero-v12: reveal */
@keyframes v12-reveal {
  to { opacity: 1; transform: translateY(0); }
}

/* hero-v13: headline clip-path reveal */
@keyframes em-reveal {
  to { clip-path: inset(0 0% 0 0); }
}

/* hero-v13: trailing glow sweep */
@keyframes em-glow-sweep {
  0%   { left: 0; opacity: 0; }
  20%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* hero-v3-circuit: button gradient */
@keyframes btn-grad {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

/* hero-v3-circuit: button shine sweep */
@keyframes btn-shine {
  0%, 75%, 100% { left: -100%; }
  35%            { left: 150%; }
}

/* hero-v3-circuit / hero-v9: element reveal */
@keyframes reveal {
  to { opacity: 1; transform: translateY(0); }
}

/* hero-v9: mockup entrance */
@keyframes mockup-enter {
  from { opacity: 0; transform: translateY(48px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* hero-v9: sending status pulse */
@keyframes pulse-sending {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(96,165,250,0.4); }
  50%       { opacity: 0.7; box-shadow: 0 0 0 3px rgba(96,165,250,0); }
}

/* hero-v9: progress bar oscillation */
@keyframes progress-fill {
  from { width: 58%; }
  to   { width: 71%; }
}

/* careers: orb drift variants */
@keyframes orbDrift1 {
  0%, 100% { transform: translate(0,0) scale(1); }
  33%       { transform: translate(40px,-25px) scale(1.08); }
  66%       { transform: translate(-20px,20px) scale(0.92); }
}
@keyframes orbDrift2 {
  0%, 100% { transform: translate(0,0) rotate(0deg); }
  50%       { transform: translate(-30px,35px) rotate(20deg); }
}
@keyframes orbDrift3 {
  0%, 100% { transform: translate(0,0); }
  50%       { transform: translate(25px,-18px); }
}

/* careers: dot ring pulse */
@keyframes dotRing {
  0%, 100% { transform: translate(-50%,-50%) scale(1);   opacity: 0.15; }
  50%       { transform: translate(-50%,-50%) scale(2.2); opacity: 0; }
}

/* careers: geometric hex/circle spin & diamond float */
@keyframes geoSpin  { to { transform: rotate(360deg); } }
@keyframes geoFloat {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  50%       { transform: rotate(45deg) translateY(-12px); }
}

/* careers: CTA orb floats */
@keyframes ctaFloat1 {
  0%, 100% { transform: translate(0,0); }
  50%       { transform: translate(15px,10px); }
}
@keyframes ctaFloat2 {
  0%, 100% { transform: translate(0,0); }
  50%       { transform: translate(-12px,-8px); }
}

/* careers: dot pulse (hero dots) */
@keyframes dotPulse {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50%       { opacity: 0.4;  transform: scale(1.3); }
}

/* careers: illustration float */
@keyframes illustrationFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* careers: window blink */
@keyframes windowBlink {
  0%, 42%, 48%, 100% { opacity: var(--win-opacity, 0.3); }
  45%                 { opacity: 0.05; }
}

/* careers: people sway */
@keyframes personSway {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25%       { transform: translateX(0.5px) rotate(0.5deg); }
  75%       { transform: translateX(-0.5px) rotate(-0.5deg); }
}
@keyframes personSway2 {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  30%       { transform: translateX(-0.5px) rotate(-0.4deg); }
  70%       { transform: translateX(0.5px) rotate(0.4deg); }
}

/* careers: sparkle twinkle */
@keyframes sparkleTwinkle {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.4); }
}

/* careers: heart pulse */
@keyframes heartPulse {
  0%, 100% { transform: scale(1);    opacity: 0.5; }
  15%       { transform: scale(1.2);  opacity: 0.8; }
  30%       { transform: scale(1);    opacity: 0.5; }
  45%       { transform: scale(1.15); opacity: 0.7; }
  60%       { transform: scale(1);    opacity: 0.5; }
}

/* careers: globe rotate (stroke-dashoffset on lat lines) */
@keyframes globeRotate {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -60; }
}

/* careers: globe meridian breathing */
@keyframes globeBreathe {
  0%, 100% { rx: 10; }
  50%       { rx: 12; }
}

/* careers: location pin ripple */
@keyframes pinRipple {
  0%   { r: 3;  opacity: 0.5; }
  100% { r: 12; opacity: 0; }
}

/* careers: wi-fi signal pulse */
@keyframes wifiPulse {
  0%, 100% { opacity: 0.25; }
  50%       { opacity: 0.6; }
}

/* careers: wi-fi dot blink */
@keyframes wifiDotBlink {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

/* careers: star sparkle */
@keyframes starSparkle {
  0%, 100% { filter: brightness(1);   opacity: 0.8; }
  50%       { filter: brightness(1.3); opacity: 1; }
}

/* careers: star shimmer */
@keyframes starShimmer {
  0%, 100% { opacity: 0.2; }
  50%       { opacity: 0.4; }
}

/* careers: GPTW ribbon wave */
@keyframes ribbonWaveLeft {
  0%, 100% { transform: rotate(0deg) skewX(0deg); }
  25%       { transform: rotate(-1deg) skewX(-0.5deg); }
  75%       { transform: rotate(0.5deg) skewX(0.3deg); }
}
@keyframes ribbonWaveRight {
  0%, 100% { transform: rotate(0deg) skewX(0deg); }
  25%       { transform: rotate(1deg) skewX(0.5deg); }
  75%       { transform: rotate(-0.5deg) skewX(-0.3deg); }
}

/* careers: GPTW sparkle dots */
@keyframes gptwSparklePop {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.8); }
}

/* careers: GPTW outer ring pulse */
@keyframes gptwRingPulse {
  0%, 100% { opacity: 0.06; transform: scale(1); }
  50%       { opacity: 0.1;  transform: scale(1.04); }
}

/* careers: CTA grid shimmer */
@keyframes ctaGridShimmer {
  0%, 100% { opacity: 0.6; background-position: 0 0; }
  50%       { opacity: 1;   background-position: 20px 20px; }
}

/* team-structure: ambient orb drift */
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(30px,-20px) scale(1.08); }
  66%       { transform: translate(-15px,15px) scale(0.95); }
}

/* team-structure: screen panel slide-in/fade */
@keyframes screenIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* team-structure: draft stamp animations */
@keyframes stampPulse {
  0%, 100% { opacity: 0.85; transform: rotate(-2deg) scale(1); }
  50%       { opacity: 1;    transform: rotate(-2deg) scale(1.05); }
}
@keyframes stampBorderGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); }
  50%       { box-shadow: 0 0 8px 2px rgba(59,130,246,0.3); }
}

/* team-structure: animated product icon keyframes */
@keyframes checklistCheck {
  0%, 100% { stroke-dashoffset: 8; }
  50%       { stroke-dashoffset: 0; }
}
@keyframes checklistStagger2 {
  0%, 100% { stroke-dashoffset: 8; }
  60%, 80% { stroke-dashoffset: 0; }
}
@keyframes checklistStagger3 {
  0%, 100% { stroke-dashoffset: 8; }
  70%, 90% { stroke-dashoffset: 0; }
}
@keyframes magPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.08); }
}
@keyframes magScanline {
  0%   { transform: translateY(-100%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(200%); opacity: 0; }
}
@keyframes bulbGlow {
  0%, 100% { filter: brightness(1)   drop-shadow(0 0  4px rgba(251,191,36,0.4)); }
  50%       { filter: brightness(1.3) drop-shadow(0 0 12px rgba(251,191,36,0.7)); }
}
@keyframes bulbFlicker {
  0%, 95%, 100% { opacity: 1; }
  96%            { opacity: 0.6; }
  97%            { opacity: 0.9; }
  98%            { opacity: 0.5; }
}
@keyframes boltFlash {
  0%, 100% { opacity: 0.5; filter: brightness(1); }
  50%       { opacity: 1;   filter: brightness(1.5); }
}
@keyframes blockStack1 {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-3px); }
}
@keyframes blockStack2 {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}
@keyframes blockStack3 {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}

/* team-structure: screen content animations */
@keyframes screen-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
@keyframes screen-slideFromLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes screen-slideFromRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes screen-fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes screen-scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes screen-breathe {
  0%, 100% { box-shadow: 0 0  8px rgba(59,130,246,0.2); }
  50%       { box-shadow: 0 0 20px rgba(59,130,246,0.4); }
}

/* team-structure: platform indicator animations */
@keyframes platform-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}
@keyframes platform-antenna {
  0%, 100% { transform: scaleY(1); }
  50%       { transform: scaleY(1.2); }
}
@keyframes platform-wrench {
  0%, 100% { transform: rotate(0deg); }
  25%       { transform: rotate(15deg); }
  75%       { transform: rotate(-15deg); }
}
@keyframes platform-bar-rise {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes platform-gear-spin {
  to { transform: rotate(360deg); }
}
@keyframes platform-bolt-flash {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}
@keyframes platform-shield-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.06); }
}
@keyframes platform-trend-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes platform-trend-dot {
  to { opacity: 1; }
}
@keyframes platform-beacon-flash {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
@keyframes platform-beacon-ring {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(2.5); opacity: 0; }
}


/* -----------------------------------------------------------------------------
   3. Scroll-driven animations (@supports guard — progressive enhancement only)
   ----------------------------------------------------------------------------- */

/* Section headings: fade + lift as they enter the viewport */
@supports (animation-timeline: view()) {
  .scroll-fade-in {
    animation: scrollFadeIn linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }

  @keyframes scrollFadeIn {
    from { opacity: 0.3; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1;   transform: translateY(0)    scale(1); }
  }
}

/* Footer content reveal */
@supports (animation-timeline: view()) {
  .footer-scroll-reveal {
    animation: footerReveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }

  @keyframes footerReveal {
    from { opacity: 0.5; transform: translateY(30px); }
    to   { opacity: 1;   transform: translateY(0); }
  }
}

/* Stats / metric counters slide in from the left */
@supports (animation-timeline: view()) {
  .stat-scroll-slide {
    animation: statSlide linear both;
    animation-timeline: view();
    animation-range: entry 20% entry 80%;
  }

  @keyframes statSlide {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
  }
}


/* -----------------------------------------------------------------------------
   4. Reveal system
      JS-driven scroll reveal: IntersectionObserver adds .visible when the
      element enters the viewport. The @keyframes fallback (reveal-fallback,
      defined above in §1) fires after 2.5 s so content is never permanently
      hidden if JS fails.
   ----------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  animation: reveal-fallback 0.6s var(--ease-out) 2.5s forwards;
}

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

/* Stagger delays — apply alongside .reveal */
.reveal-d1 { transition-delay: 0.12s; }
.reveal-d2 { transition-delay: 0.24s; }
.reveal-d3 { transition-delay: 0.36s; }
.reveal-d4 { transition-delay: 0.48s; }
.reveal-d5 { transition-delay: 0.60s; }
.reveal-d6 { transition-delay: 0.72s; }


/* -----------------------------------------------------------------------------
   5. Accessibility overrides
   ----------------------------------------------------------------------------- */

/* Respect the OS "reduce motion" preference.
   !important is intentional here — it must override all animation/transition
   declarations regardless of specificity. This is the ONLY place in the
   codebase where !important on animation properties is acceptable. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }
}

/* When JavaScript is unavailable, reveal elements must be visible immediately
   (no reliance on the JS observer or the 2.5 s fallback timer). */
@media (scripting: none) {
  .reveal,
  .reveal-d1,
  .reveal-d2,
  .reveal-d3,
  .reveal-d4,
  .reveal-d5,
  .reveal-d6 {
    opacity: 1;
    transform: none;
    animation: none;
  }
}